/* ===== HIPSTER — ASOS-style catalog theme ===== */
:root{
  --white:#ffffff;
  --grey-bg:#f6f6f6;
  --ink:#0a0a0a;
  --grey-text:#767676;
  --border:#e5e5e5;
  --red:#e42313;
  --whatsapp:#25D366;
  --font: 'Helvetica Neue', Arial, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img,.ph{display:block;width:100%;height:100%;object-fit:cover;}
button{font-family:inherit;border:none;background:none;cursor:pointer;}
ul{list-style:none;}

/* placeholder imagery */
.ph{
  position:relative;
  background:linear-gradient(145deg,#efefef 0%,#e2e2e2 60%,#d8d8d8 100%);
  overflow:hidden;
}
.ph::after{
  content:attr(data-label);
  position:absolute; left:8px; bottom:8px;
  font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  color:#9a9a9a; background:rgba(255,255,255,.85);
  padding:3px 6px; font-weight:700;
}

/* ---- utility bar ---- */
.util-bar{
  background:var(--ink); color:var(--white);
  font-size:11px; font-weight:700; letter-spacing:.03em;
  padding:7px 24px; display:flex; justify-content:space-between; align-items:center;
  text-transform:uppercase;
}
.util-bar .util-left{display:flex; gap:20px;}
.util-bar a{opacity:.9;}
.util-bar a:hover{opacity:1; text-decoration:underline;}

/* ---- main nav ---- */
header.main-nav{
  position:sticky; top:0; z-index:100; background:var(--white);
  border-bottom:1px solid var(--border);
}
.nav-row{
  display:flex; align-items:center; gap:28px;
  padding:14px 24px;
  max-width:1600px; margin:0 auto;
}
.logo{
  font-size:24px; font-weight:800; letter-spacing:-.02em; text-transform:uppercase;
  flex-shrink:0;
}
.search-wrap{flex:1; position:relative;}
.search-wrap input{
  width:100%; border:2px solid var(--ink); padding:10px 40px 10px 14px;
  font-size:13px; font-family:var(--font);
}
.search-wrap input:focus{outline:none;}
.search-wrap .search-icon{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:15px; pointer-events:none;
}
.nav-icons{display:flex; align-items:center; gap:20px; flex-shrink:0;}
.nav-icons button{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--ink);
}
.nav-icons .icon-glyph{font-size:18px;}
.bag-count{
  position:absolute; top:-6px; right:-8px;
  background:var(--red); color:var(--white);
  width:16px; height:16px; border-radius:50%;
  font-size:9px; display:flex; align-items:center; justify-content:center;
  font-weight:700;
}
.nav-icons .bag-btn{position:relative;}
.menu-toggle{display:none;}

/* ---- category strip ---- */
.cat-strip{
  display:flex; gap:0; overflow-x:auto; border-bottom:1px solid var(--border);
  padding:0 24px; max-width:1600px; margin:0 auto;
}
.cat-strip a{
  padding:13px 16px; font-size:12px; font-weight:700; text-transform:uppercase;
  white-space:nowrap; letter-spacing:.02em; border-bottom:3px solid transparent;
}
.cat-strip a:hover, .cat-strip a.active{border-bottom-color:var(--ink);}
.cat-strip a.sale-link{color:var(--red);}

/* ---- hero / promo banner ---- */
.promo-banner{
  position:relative; aspect-ratio:21/8; min-height:220px; overflow:hidden;
}
.promo-banner .ph{height:100%;}
.promo-content{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  padding:0 60px; max-width:1600px; margin:0 auto;
}
.promo-content h1{
  font-size:clamp(28px,5vw,56px); font-weight:800; text-transform:uppercase;
  letter-spacing:-.01em; line-height:1; background:var(--white);
  display:inline-block; padding:6px 14px; margin-bottom:10px;
}
.promo-content p{
  font-size:14px; font-weight:600; background:var(--white); display:inline-block;
  padding:5px 12px; margin-bottom:16px; max-width:340px;
}
.promo-content .btn{width:fit-content;}

/* ---- buttons ---- */
.btn{
  display:inline-block; background:var(--ink); color:var(--white);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:13px 26px; border:2px solid var(--ink); text-align:center; cursor:pointer;
  transition:background .2s, color .2s;
}
.btn:hover{background:var(--white); color:var(--ink);}
.btn-outline{background:var(--white); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--white);}
.btn-whatsapp{background:var(--whatsapp); border-color:var(--whatsapp); width:100%;}
.btn-whatsapp:hover{background:var(--white); color:var(--whatsapp);}

/* ---- section shell ---- */
section{padding:40px 24px; max-width:1600px; margin:0 auto;}
.section-head{
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:20px;
}
.section-head h2{font-size:20px; font-weight:800; text-transform:uppercase; letter-spacing:-.01em;}
.section-head .view-all{font-size:12px; font-weight:700; text-transform:uppercase; border-bottom:2px solid var(--ink); padding-bottom:2px;}

/* ---- product grid ---- */
.product-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:2px 12px;
}
.p-card{position:relative;}
.p-media{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--grey-bg); margin-bottom:8px;}
.p-media .ph{transition:transform .35s ease;}
.p-card:hover .p-media .ph{transform:scale(1.03);}
.p-badges{position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:4px; z-index:2;}
.p-badge{
  font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  padding:3px 7px; background:var(--ink); color:var(--white);
}
.p-badge.sale{background:var(--red);}
.p-wishlist{
  position:absolute; top:8px; right:8px; z-index:2;
  width:26px; height:26px; background:rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.p-wishlist:hover{color:var(--red);}
.p-brand{font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; margin-bottom:2px;}
.p-name{font-size:12.5px; color:var(--grey-text); margin-bottom:6px; line-height:1.3; min-height:31px;}
.p-price-row{display:flex; gap:8px; align-items:baseline; margin-bottom:8px;}
.p-price{font-size:13px; font-weight:700;}
.p-price.strike{color:var(--grey-text); text-decoration:line-through; font-weight:400;}
.p-price.sale{color:var(--red);}
.add-bag-btn{
  width:100%; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:9px; border:1.5px solid var(--ink); background:var(--white); color:var(--ink);
  transition:all .15s;
}
.add-bag-btn:hover{background:var(--ink); color:var(--white);}
.add-bag-btn.added{background:var(--red); border-color:var(--red); color:var(--white);}

/* ---- USP strip ---- */
.usp-strip{
  background:var(--grey-bg); display:flex; justify-content:center; gap:48px;
  padding:22px 24px; flex-wrap:wrap;
}
.usp-item{display:flex; align-items:center; gap:10px; font-size:12px; font-weight:700; text-transform:uppercase;}
.usp-item .ico{font-size:20px;}

/* ---- edit / lookbook split ---- */
.edit-split{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:40px 24px; max-width:1600px; margin:0 auto;
}
.edit-tile{position:relative; aspect-ratio:4/5; overflow:hidden;}
.edit-tile .ph{height:100%;}
.edit-tile-caption{
  position:absolute; left:0; bottom:0; right:0; padding:20px;
  background:linear-gradient(0deg, rgba(0,0,0,.65), transparent);
  color:var(--white);
}
.edit-tile-caption h3{font-size:20px; font-weight:800; text-transform:uppercase; margin-bottom:8px;}
.edit-tile-caption a{font-size:11px; font-weight:700; text-transform:uppercase; border-bottom:1px solid var(--white); padding-bottom:2px;}

/* ---- store info ---- */
.store-block{
  background:var(--grey-bg); display:grid; grid-template-columns:1fr 1fr;
}
.store-media{aspect-ratio:16/9;}
.store-info{padding:40px 48px; display:flex; flex-direction:column; justify-content:center;}
.store-info h2{font-size:22px; font-weight:800; text-transform:uppercase; margin-bottom:18px;}
.store-line{display:flex; gap:14px; padding:10px 0; font-size:13px; border-top:1px solid var(--border);}
.store-line:last-of-type{border-bottom:1px solid var(--border); margin-bottom:20px;}
.store-line .label{font-weight:700; text-transform:uppercase; font-size:10px; width:90px; flex-shrink:0; color:var(--grey-text); padding-top:1px;}
.store-info .btn{align-self:flex-start;}

/* ---- footer ---- */
footer{border-top:1px solid var(--border); padding:40px 24px 20px;}
.footer-inner{max-width:1600px; margin:0 auto;}
.footer-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-bottom:32px;}
.footer-col h4{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; margin-bottom:14px;}
.footer-col a{display:block; font-size:13px; color:var(--grey-text); margin-bottom:10px;}
.footer-col a:hover{color:var(--ink); text-decoration:underline;}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  border-top:1px solid var(--border); padding-top:18px; font-size:11px; color:var(--grey-text);
}

/* ---- mobile nav sheet ---- */
.mobile-nav{
  position:fixed; inset:0; background:var(--white); z-index:300;
  padding:24px; transform:translateX(-100%); transition:transform .3s ease;
  overflow-y:auto;
}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav .close{position:absolute; top:18px; right:20px; font-size:22px;}
.mobile-nav a{display:block; font-size:16px; font-weight:700; text-transform:uppercase; padding:14px 0; border-bottom:1px solid var(--border);}

/* ---- cart drawer (kept functionally identical, restyled) ---- */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:398; opacity:0; pointer-events:none; transition:opacity .3s;}
.overlay.open{opacity:1; pointer-events:auto;}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,100vw);
  background:var(--white); z-index:399; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .35s ease; border-left:1px solid var(--border);
}
.drawer.open{transform:translateX(0);}
.drawer-head{display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--border);}
.drawer-head h3{font-size:14px; font-weight:800; text-transform:uppercase;}
.drawer-close{font-size:20px;}
.drawer-body{flex:1; overflow-y:auto; padding:16px 20px;}
.drawer-empty{text-align:center; padding:60px 0; color:var(--grey-text); font-size:13px; font-weight:600; text-transform:uppercase;}
.bag-item{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--border);}
.bag-item .thumb{width:60px; height:76px; flex-shrink:0; background:var(--grey-bg);}
.bag-item .thumb .ph::after{display:none;}
.bag-item .info{flex:1; min-width:0;}
.bag-item .info .name{font-size:12.5px; font-weight:700; margin-bottom:4px;}
.bag-item .info .price{font-size:12px; color:var(--grey-text);}
.qty-row{display:flex; align-items:center; gap:10px; margin-top:8px;}
.qty-row button{width:22px; height:22px; border:1.5px solid var(--ink); font-size:13px; display:flex; align-items:center; justify-content:center;}
.qty-row .qty-val{font-size:12px; font-weight:700; min-width:16px; text-align:center;}
.bag-item .remove{font-size:10px; font-weight:700; text-transform:uppercase; color:var(--grey-text); margin-left:auto; padding-top:8px;}
.bag-item .remove:hover{color:var(--red);}
.drawer-foot{border-top:1px solid var(--border); padding:18px 20px 22px;}
.subtotal-row{display:flex; justify-content:space-between; font-size:13px; font-weight:700; margin-bottom:16px;}
.subtotal-row .amt{font-size:16px;}
.checkout-form{display:none; flex-direction:column; gap:10px; margin-bottom:14px;}
.checkout-form.open{display:flex;}
.checkout-form label{font-size:10px; font-weight:700; text-transform:uppercase; color:var(--grey-text); margin-bottom:4px; display:block;}
.checkout-form input, .checkout-form textarea{
  width:100%; border:1.5px solid var(--border); padding:10px 11px; font-size:13px; font-family:var(--font); resize:vertical;
}
.checkout-form input:focus, .checkout-form textarea:focus{outline:none; border-color:var(--ink);}
.field-error{border-color:var(--red) !important;}
.form-note{font-size:10.5px; color:var(--grey-text); margin-top:-2px;}

@media (max-width:980px){
  .util-bar{display:none;}
  .search-wrap{display:none;}
  .cat-strip{display:none;}
  .nav-icons .icon-label{display:none;}
  .menu-toggle{display:block; font-size:20px;}
  .product-grid{grid-template-columns:repeat(2,1fr); gap:2px 8px;}
  .edit-split{grid-template-columns:1fr; padding:24px 16px;}
  .store-block{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:repeat(2,1fr);}
  section{padding:28px 16px;}
  .promo-content{padding:0 20px;}
  .drawer{width:100vw;}
}