/* ==========================================================================
   MIERE — desktop refinement
   --------------------------------------------------------------------------
   A quieter, roomier desktop layout: white ground, black type, a centred
   wordmark with labelled controls, a full-width mega panel, smaller product
   cards with real margins, and more air between sections.

   Loaded after typography.css and before the mobile folder, so phones can
   still override anything here.
   ========================================================================== */

:root{
  --page-max   : 1680px;  /* content never stretches past this */
  --page-pad   : clamp(24px, 7vw, 128px);  /* side margin — generous, like the reference */
  --sec-gap    : clamp(56px, 6vw, 104px);  /* space between sections */
  --card-gap   : clamp(16px, 1.6vw, 28px);
  --rule       : rgba(0,0,0,.10);
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════ */
.navbar{
  background:#fff;
  border-bottom:1px solid var(--rule);
  box-shadow:none;
}
body.nav-stuck .navbar{box-shadow:0 1px 12px rgba(0,0,0,.06);}

/* top row — three zones, logo optically centred */
.nav-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  height:99px;
  max-width:var(--page-max);
  margin:0 auto;
  padding:0 var(--page-pad);
}

.nav-side{display:flex;align-items:center;gap:26px;}
.nav-side-right{justify-content:flex-end;gap:18px;}

.nav-text-btn{
  display:inline-flex;align-items:center;gap:9px;
  background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--font);
  font-size:.8125rem;font-weight:400;letter-spacing:.01em;
  color:var(--black);text-decoration:none;
  transition:opacity .18s;
}
.nav-text-btn:hover{opacity:.55;}
.nav-text-btn i{font-size:1.15rem;}
.nav-text-btn span{white-space:nowrap;}

.nav-logo{
  justify-self:center;
  display:inline-flex;align-items:center;
  margin:0;
}
.nav-logo img{max-height:56px;width:auto;display:block;}

.nav-icon-btn{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;position:relative;
  font-size:1.2rem;color:var(--black);
  transition:opacity .18s;
}
.nav-icon-btn:hover{opacity:.55;}
.nav-search-icon{display:none;}      /* the labelled one on the left covers it */
.icon-badge{
  position:absolute;top:2px;right:0;
  min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--black);color:#fff;
  font-size:.5625rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}

/* second row — the category menu, centred */
.nav-row{
  border-top:1px solid var(--rule);
  background:#fff;
}
.nav-row .nav-menu{
  display:flex;align-items:center;justify-content:center;
  gap:38px;list-style:none;
  max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad);
  height:52px;
}
.nav-menu > .nav-item > a{
  font-family:var(--font);
  font-size:.8125rem;font-weight:400;letter-spacing:.04em;
  text-transform:none;color:var(--black);
  display:inline-flex;align-items:center;gap:5px;
  height:52px;padding:0;
  border-bottom:1px solid transparent;
  transition:border-color .18s,opacity .18s;
}
.nav-menu > .nav-item:hover > a{border-bottom-color:var(--black);}
.nav-item.highlight > a,.nav-menu > .nav-item > a.sale{font-weight:600;}

/* ══════════════════════════════════════════════════════════════════════════
   MEGA PANEL
   It used to be centred on the hovered item, so the first item pushed a
   939px panel to x=-215 and `overflow-x:hidden` clipped it. It now spans the
   header, with its contents constrained to the page width.
   ═══════════════════════════════════════════════════════════════════════ */
.nav-menu > .nav-item{position:static;}
.nav-menu > .nav-item.simpleMenu{ position: relative; }
.mega-drop{
  left:0;right:0;
  transform:none;
  width:auto;min-width:0;
  border:none;border-top:1px solid var(--rule);
  box-shadow:0 18px 40px rgba(0,0,0,.09);
  padding:40px var(--page-pad) 44px;
  justify-content:center;
  gap:0;
}
.mega-drop > *{max-width:calc(var(--page-max) / 1.2);}
.mega-col{flex:0 1 210px;padding-right:34px;min-width:0;}
.mega-heading{
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;margin-bottom:16px;color:var(--black);
}
.mega-heading a{text-decoration:none;color:inherit;}
.mega-links a{
  font-size:.8125rem;color:#333;text-decoration:none;
  transition:opacity .16s;
}
.mega-links a:hover{opacity:.55;padding-left:0;color:var(--black);}
.mega-imgs{gap:16px;}
.mega-img-card{width:200px;}
.mega-img-label{font-size:.75rem;letter-spacing:.02em;}

/* the simple dropdown gets the same treatment */
.nav-drop{border:none;border-top:1px solid var(--rule);box-shadow:0 18px 40px rgba(0,0,0,.09);}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE RHYTHM — margins and the space between sections
   ═══════════════════════════════════════════════════════════════════════ */
.sec-block,
.category-section,
.women-section,
.brands-sec,
.insta-sec,
.rev-sec,
.newsletter-sec{
  padding-left:0;padding-right:0;
}

.sec-head{
  max-width:var(--page-max);margin:0 auto;
  padding:var(--sec-gap) var(--page-pad) 32px;
  text-align:center;
}
.sec-head p{
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:#777;margin-bottom:12px;font-weight:500;
}
.sec-head h2{font-weight:400;letter-spacing:-.005em;}
.sec-head h2 em{font-style:italic;}
.sec-head small{color:#777;}

.sec-body{
  max-width:var(--page-max);margin:0 auto;
  padding:0 var(--page-pad) 0;
}
.sec-more{padding:44px var(--page-pad) var(--sec-gap);}
.sec-tail{padding-bottom:var(--sec-gap);}

/* the "Discover the Selection" pill */
.sec-more .fh-btn,
.sec-more a{
  border-radius:999px;
  border:1px solid var(--black);
  background:transparent;color:var(--black);
  padding:15px 44px;
  font-size:.75rem;letter-spacing:.06em;text-transform:none;
  font-weight:400;
  transition:background .2s,color .2s;
}
.sec-more .fh-btn:hover,.sec-more a:hover{background:var(--black);color:#fff;}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT CARDS — smaller, quieter, with room to breathe
   ═══════════════════════════════════════════════════════════════════════ */
.products,.product-grid,.mood-grid,.related-grid{
  gap:var(--card-gap) var(--card-gap);
}
.products{grid-template-columns:repeat(var(--cols,4),1fr);}

.pcard {
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 40px;
}
.pcard:hover{transform:none;box-shadow:none;}

.pcard-img{
  height:auto;aspect-ratio:3/4;
  background:#f4f3f1;border-radius:0;overflow:hidden;
  margin-bottom:14px;
}
.pcard-img img{
  width:100%;height:100%;object-fit:cover;
  transition:opacity .35s;
}
.pcard:hover .pcard-img img{opacity:.88;}

/* wishlist heart, outline only, top-right */
.pwish {
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: none;
  border: none;
  font-size: 1.05rem;
  color: #000;
  opacity: 1;
  transform: none;
  /* background: #000; */
  border-radius: 6px;
  border: 1px solid;
}
.pwish:hover{opacity:.55;}

/* badges: small, uppercase, no fill */
.pbadge{
  top:12px;left:12px;
  background:none;color:var(--black);
  padding:0;font-size:.625rem;font-weight:600;
  letter-spacing:.14em;
}

.pbody{padding:0;text-align:left;}
.pname{
  font-size:.875rem;font-weight:400;line-height:1.45;
  color:var(--black);margin-bottom:6px;min-height:2.9em;
}
.psub{display:none;}
.pprice{
  font-size:.875rem;font-weight:400;color:#111;
  display:flex;gap:9px;align-items:baseline;
}
.pprice s{color:#9b9b9b;font-size:.8125rem;}
.pprice .disc{color:var(--black);font-size:.75rem;}
.pcard-hover{display:none;}
.padd{display:none;}
.pswatch{margin-top:10px;}

/* related row matches */
.rcard{border:none;background:transparent;}
.rcard:hover{transform:none;box-shadow:none;}
.rcard img{height:auto;aspect-ratio:3/4;background:#f4f3f1;}
.rcard-body{padding:12px 0 0;}
.rcard-body h4{font-weight:400;font-size:.8125rem;}
.rcard-body .rp{color:var(--black);font-weight:400;}

/* ══════════════════════════════════════════════════════════════════════════
   SALE BANNER — text, then the countdown, then the button
   ═══════════════════════════════════════════════════════════════════════ */
.sale-banner{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:28px;
  max-width:var(--page-max);
  margin:0 auto var(--sec-gap);
  padding:clamp(40px,4.5vw,72px) clamp(28px,4vw,64px);
}
.sale-left,.sale-right{width:100%;max-width:none;}
.sale-left h2{
  font-size:clamp(1.6rem,3.2vw,2.6rem);
  line-height:1.15;margin-bottom:12px;
  max-width:22ch;
}
.sale-left p{max-width:52ch;font-size:.875rem;line-height:1.7;}
.sale-right{
  display:flex;flex-direction:column;align-items:flex-start;gap:24px;
}
.sale-timer{display:flex;gap:12px;flex-wrap:wrap;}
.time-box{min-width:82px;padding:14px 10px;text-align:center;}
.time-box .num{font-size:1.6rem;line-height:1;}
.time-box .lbl{font-size:.625rem;letter-spacing:.14em;white-space:nowrap;margin-top:6px;}
.btn-yellow{
  padding:16px 42px;border-radius:999px;
  font-size:.75rem;letter-spacing:.06em;text-transform:none;font-weight:500;
}

/* ══════════════════════════════════════════════════════════════════════════
   FULL-WIDTH BANNER
   Written to stand on its own: every property the copy needs is declared
   here, so the block still looks designed even if another sheet is stale or
   missing. The scrim keeps white type legible over a pale photograph.
   ═══════════════════════════════════════════════════════════════════════ */
.fbanner{
  position:relative;display:block;overflow:hidden;
  min-height:420px;                    /* survives without a size class */
  margin-bottom:var(--sec-gap);
  background:#e9e7e3;
}
.fbanner > img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  z-index:0;
  object-position: top;
}

/* A flat black wash over the whole photograph, with the copy centred on it.
   Every declaration the copy needs is repeated here on purpose: if another
   stylesheet fails to load, this block alone still renders the design. */
.fbanner .fb-overlay{
  position:absolute;inset:0;z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(32px,5vw,72px) var(--page-pad);
  background:rgba(0,0,0,.46);
}
.fbanner .fb-inner{
  max-width:min(760px,92%);
  margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
}

.fbanner .fb-eyebrow{
  display:block;
  font-family:var(--font);
  font-size:.75rem;
  font-weight:400;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  margin:0 0 20px;
}
.fbanner h2{
  font-family:var(--serif);
  font-size:clamp(2rem,4.4vw,3.6rem);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.01em;
  color:#fff;
  margin:0 0 18px;
  text-shadow:none;
}
.fbanner h2 em{font-style:italic;font-weight:400;}
.fbanner .fb-sub{
  font-family:var(--font);
  font-size:1rem;
  font-weight:300;
  line-height:1.65;
  color:rgba(255,255,255,.88);
  margin:0 auto 34px;
  max-width:46ch;
}
.fbanner .fb-btn{
  display:inline-block;
  background:#fff;
  color:#000;
  border:1px solid #fff;
  border-radius:999px;
  padding:16px 44px;
  font-family:var(--font);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .22s,color .22s;
}
.fbanner .fb-btn:hover{background:transparent;color:#fff;}
.fbanner .fb-cover{position:absolute;inset:0;z-index:3;}

/* A darker wash for busy photography. */
.fbanner.fb-dark .fb-overlay{background:rgba(0,0,0,.62);}

/* ══════════════════════════════════════════════════════════════════════════
   OTHER SECTIONS — same margins
   ═══════════════════════════════════════════════════════════════════════ */
.cat-grid,.acc-grid,.lookbook,.rev-grid,.insta-grid,.brand-row{
  max-width:var(--page-max);margin-left:auto;margin-right:auto;
  padding-left:var(--page-pad);padding-right:var(--page-pad);
}
.acc-grid{ padding-left: 46px; }
.gtl,.crow-head,.crow-track{
  max-width:var(--page-max);margin-left:auto;margin-right:auto;
}
/* The feature-split column must stay inside its grid track. Without this it
   took the page-wide max-width, overflowed, and the slider inside had no
   definite width to resolve its percentage card widths against — so the cards
   fell back to max-content and the whole block blew out. */
.fsplit-side{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
}
.gtl{padding:var(--sec-gap) var(--page-pad);}
.crow{padding:var(--sec-gap) 0;}
.crow-track{padding-left:var(--page-pad);padding-right:var(--page-pad);}
.fsplit{margin-bottom:var(--sec-gap);}

.features{max-width:var(--page-max);margin:0 auto var(--sec-gap);}
.marquee{margin-bottom:0;}
.newsletter-sec{padding:var(--sec-gap) var(--page-pad);}

/* ══════════════════════════════════════════════════════════════════════════
   MONOCHROME PASS — white ground, black type
   ═══════════════════════════════════════════════════════════════════════ */
body{background:#fff;color:var(--black);}
.topbar{background:var(--black);color:#fff;font-weight:400;letter-spacing:.06em;}
.topbar a{color:#fff;}
.fh-btn{border-radius:0;}
.fh-btn-red{background:var(--black);border-color:var(--black);}
.hero-btns a{border-radius:999px;}

@media (max-width:1200px){
  .nav-row .nav-menu{gap:26px;}
  .nav-side{gap:18px;}
  .mega-col{flex:0 1 180px;padding-right:24px;}
  .mega-img-card{width:160px;}
}

@media (max-width:900px){
  /* the drawer takes over (same 900px as the mobile stylesheets) — hide the desktop chrome */
  .nav-row{display:none;}
  .nav-text-btn{display:none;}
  .nav-search-icon{display:flex;}
  .nav-inner{grid-template-columns:auto 1fr auto;height:auto;}
  .nav-logo{justify-self:start;}
}

/* ══════════════════════════════════════════════════════════════════════════
   BADGES — the base sheets hard-code orange/red fills. Monochrome them so
   nothing but photography carries colour.
   ═══════════════════════════════════════════════════════════════════════ */
.pbadge,.pbadge.hot,.pbadge.new,.pbadge.sale{
  background:none !important;
  color:var(--black) !important;
  border-radius:0;
  padding:0;
  font-size:.625rem;font-weight:600;letter-spacing:.14em;
}
.pbadge.sale {
  background: #000 !important;
  color: #fff !important;
  padding: 0 10px;
}
.nav-badge,.nav-menu .badge{
  background:var(--black) !important;color:#fff !important;
  border-radius:0;font-size:.5625rem;letter-spacing:.1em;padding:2px 6px;
}
.mega-links .badge,.mega-links .tag{
  background:var(--black) !important;color:#fff !important;border-radius:0;
}
.disc,.pprice .disc{color:var(--black);}
.pd-colour.soldout::after{background:var(--black);}

/* ══════════════════════════════════════════════════════════════════════════
   WEIGHT CAP — 400 everywhere
   The base sheets carry 130-odd declarations at 500/600/700. Rather than edit
   each one, the brand rule is enforced here. Hierarchy comes from size,
   letter-spacing and colour instead of weight, which is how the reference
   storefronts read. `!important` is deliberate: several of these selectors are
   re-declared in later sheets, and this rule has to outrank all of them.
   ═══════════════════════════════════════════════════════════════════════ */
body, p, li, a, span, div, td, th, label, small, strong, b, em, i,
h1, h2, h3, h4, h5, h6,
button, input, select, textarea,
.nav-menu > .nav-item > a, .nav-text-btn, .nav-logo,
.sec-head h2, .sec-head p, .sec-head small,
.pname, .pprice, .psub, .pbadge, .disc,
.crow-name, .crow-price, .gtl-name, .gtl-price,
.fsplit-name, .fsplit-price, .rcard-body h4, .rcard-body .rp,
.fh-btn, .pd-btn, .btn-yellow, .fb-btn, .gtl-cta, .sec-more a,
.mega-heading, .mega-links a, .mega-img-label,
.feat strong, .feat span, .insta-head h2, .insta-head a,
.fh-h1, .fh-h2, .fh-sub, .fh-cart-name, .fh-sum-row, .fh-summary h3,
.pd-info h1, .pd-price, .pd-section-label, .related-title,
.time-box .num, .time-box .lbl, .sale-left h2,
.topbar, .topbar a, .drawer-link, .footer-col-head,
.page-banner h1, .fh-banner h1, .women-section-title,
.hero-text h1, .slide-tag, .fbanner h2, .fb-eyebrow, .fb-sub{
  font-weight:400 !important;
}

/* The two places a little extra presence still helps, kept to 500. */
.fh-sum-row.total, .fh-sum-row.total span,
.pcard .pprice{
  font-weight:400 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPE DETAILS you tuned
   ═══════════════════════════════════════════════════════════════════════ */
.pname{
  font-size:.875rem;
  line-height:1.45;
  color:var(--black);
  min-height:auto;          /* the clamp already caps it at two lines */
  margin-bottom:6px;
}
.crow-price{font-size:.86rem;color:var(--black);}
.gtl-price{font-size:.95rem;color:var(--black);}
.feat strong{display:block;font-size:.85rem;margin-bottom:4px;}

/* Instagram header aligned to the page gutter rather than fixed offsets, so
   it stays lined up with everything else at any width. */
.insta-head{
  max-width:var(--page-max);
  margin:0 auto;
  padding:0 var(--page-pad) 24px;
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
}
.insta-head h2{
  font-family:var(--serif);
  font-size:1.6rem;
  margin:0;
}
.insta-head a{
  font-size:.8rem;
  color:var(--black);
  text-decoration:none;
  white-space:nowrap;
}
.insta-head a:hover{opacity:.55;}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   White ground, black type, four columns on a shared grid. The rhythm is
   deliberately open: small tracked-out headings, a wide gap down to the first
   link, and generous space between links so each one reads as its own line
   rather than part of a list.
   ═══════════════════════════════════════════════════════════════════════ */
.site-footer{
  background:#fff;
  color:var(--black);
  border-top:1px solid var(--rule);
  padding:0;
  font-family:var(--font);
}

/* ── link columns ── */
.footer-cols{
  max-width:var(--page-max);
  margin:0 auto;
  padding:clamp(52px,5.5vw,88px) var(--page-pad) clamp(40px,4vw,64px);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
  align-items:start;
}

.footer-col-head{
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--black);
  margin:0 0 34px;          /* the wide drop to the first link */
  line-height:1.4;
}

.footer-list{list-style:none;margin:0;padding:0;}
.footer-list li{margin:0 0 26px;}   /* airy spacing between links */
.footer-list li:last-child{margin-bottom:0;}

.footer-link{
  font-size:.9375rem;       /* 15px — links read as content, not fine print */
  line-height:1.4;
  color:var(--black);
  text-decoration:none;
  transition:opacity .18s;
}
.footer-link:hover{opacity:.55;text-decoration:underline;text-underline-offset:3px;}

/* ── connect column ── */
.footer-copy{
  font-size:.9375rem;
  line-height:1.65;
  color:var(--black);
  margin:0 0 26px;
  max-width:34ch;
}
.footer-inline{
  color:var(--black);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.footer-inline:hover{opacity:.55;}

.footer-social{display:flex;gap:10px;margin-top:4px;}
.footer-soc{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);
  color:var(--black);
  text-decoration:none;font-size:1rem;
  transition:background .18s,color .18s;
}
.footer-soc:hover{background:var(--black);color:#fff;}

/* ── utility bar ── */
.footer-bar{
  border-top:1px solid var(--rule);
  max-width:var(--page-max);
  margin:0 auto;
  padding:26px var(--page-pad);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.footer-locale{display:flex;align-items:center;gap:14px;}
.footer-logo-sm img{max-height:42px;width:auto;display:block;}
.footer-region{
  font-size:.875rem;color:var(--black);
  padding-left:14px;border-left:1px solid var(--rule);
}
.footer-legal{display:flex;gap:34px;flex-wrap:wrap;}
.footer-legal a{
  font-size:.875rem;color:var(--black);text-decoration:none;
}
.footer-legal a:hover{text-decoration:underline;text-underline-offset:3px;opacity:.55;}

/* ── small print ── */
.footer-fine{
  border-top:1px solid var(--rule);
  max-width:var(--page-max);
  margin:0 auto;
  padding:34px var(--page-pad) 10px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:40px;
}
.footer-fine-col h3{
  font-size:.8125rem;
  color:var(--black);
  margin:0 0 14px;
  letter-spacing:.01em;
}
.footer-fine-col p{
  font-size:.8125rem;
  line-height:1.75;
  color:#6f6f6f;
  margin:0 0 10px;
  max-width:44ch;
}
.footer-fine-note{font-size:.75rem !important;color:#8c8c8c !important;}

.pay-strip{
  display:block;width:100%;max-width:250px;height:auto;margin:0 0 12px;
}

/* ── closing line ── */
.footer-end{
  max-width:var(--page-max);
  margin:0 auto;
  padding:14px var(--page-pad) 40px;
}
.footer-end p{font-size:.75rem;color:#8c8c8c;margin:0;}

/* ── responsive ── */
@media (max-width:1100px){
  .footer-cols{gap:32px;}
  .footer-legal{gap:24px;}
}
@media (max-width:900px){
  .footer-cols{
    grid-template-columns:repeat(2,1fr);
    gap:36px 24px;
    padding:44px var(--m-gutter,16px) 32px;
  }
  .footer-col-head{margin-bottom:22px;}
  .footer-list li{margin-bottom:18px;}
  .footer-col-connect{grid-column:1 / -1;}
  .footer-bar,.footer-fine,.footer-end{padding-left:var(--m-gutter,16px);padding-right:var(--m-gutter,16px);}
  .footer-bar{flex-direction:column;align-items:flex-start;gap:18px;}
  .footer-fine{grid-template-columns:1fr;gap:28px;}
  .footer-legal{gap:20px;}
}
@media (max-width:480px){
  .footer-cols{grid-template-columns:1fr;gap:30px;}
  .footer-col-connect{grid-column:auto;}
  .footer-copy,.footer-fine-col p{max-width:none;}
}

/* ══════════════════════════════════════════════════════════════════════════
   COUNTRY / CURRENCY SWITCHER
   ═══════════════════════════════════════════════════════════════════════ */
.nav-country{position:relative;}
.nav-country-btn{display:inline-flex;align-items:center;gap:8px;}
.nav-country-btn .ti-chevron-down{font-size:.9rem;opacity:.6;}
.cflag{width:20px;height:14px;object-fit:cover;display:inline-block;
  border:1px solid rgba(0,0,0,.08);vertical-align:middle;}
.cflag-text{font-size:.7rem;letter-spacing:.06em;border:1px solid var(--rule);
  padding:1px 4px;line-height:1.2;}

.nav-country-menu{
  position:absolute;top:calc(100% + 14px);right:0;
  min-width:270px;background:#fff;
  border:1px solid var(--rule);
  box-shadow:0 18px 44px rgba(0,0,0,.14);
  padding:10px 0;z-index:1400;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.nav-country.open .nav-country-menu{opacity:1;visibility:visible;transform:translateY(0);}
.nav-country-head{
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:#8c8c8c;padding:6px 18px 10px;margin:0;
}
.nav-country-menu a{
  display:flex;align-items:center;gap:11px;
  padding:10px 18px;font-size:.875rem;color:var(--black);text-decoration:none;
  transition:background .15s;
}
.nav-country-menu a:hover{background:#f6f6f6;}
.nav-country-menu a.on{font-weight:400;background:#f2f2f2;}
.nav-country-menu .cname{flex:1;}
.nav-country-menu .ccur{color:#8c8c8c;font-size:.8125rem;}

/* drawer version */
.drawer-country{padding:14px 0 4px;border-top:1px solid var(--rule);margin-top:8px;}
.drawer-country-head{
  display:block;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:#8c8c8c;margin-bottom:10px;
}
.drawer-country-row{display:flex;flex-wrap:wrap;gap:8px;}
.drawer-country-row a{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--rule);padding:7px 10px;
  text-decoration:none;color:var(--black);min-height:auto;
}
.drawer-country-row a.on{border-color:var(--black);}
.drawer-country-row em{font-style:normal;font-size:.75rem;}

@media (max-width:980px){
  .nav-country{display:none;}     /* the drawer carries it */
}


/* Desktop: the header scrolls away and only the menu row is pinned (by
   .nav-stuck .nav-row). .navbar is also marked sticky elsewhere — that never
   took effect while html/body used overflow-x:hidden; with overflow-x:clip it
   would, and the logo row would sit under the pinned menu. Phones keep the
   sticky header (their menu row is hidden). */
@media (min-width:901px){
  .navbar{position:relative;}
}

/* ══════════════════════════════════════════════════════════════════════════
   Product imagery — every frame is 3:4 and scales with the screen, photos
   fill it whatever their own size (object-fit: cover), cropped from the TOP
   so faces are never cut. A second photo fades in on hover (mouse only).
   ═══════════════════════════════════════════════════════════════════════ */
img{object-position:50% 0;}                       /* default for any cropped image */
.hero img,.hero .slide img{object-position:center 22%;}

.pcard-img img,.fsplit-media img,.rcard-media img,.gtl-item img,.acc-card img,.cat img,
.lb-item img,.mega-img-card img,.blog-card img,.fh-mc-item img,.fh-mc-sgi img,.fbt-card img{
  object-fit:cover;object-position:50% 0;
}
.fsplit-card .fsplit-media,.rcard .rcard-media{position:relative;display:block;width:100%;aspect-ratio:3/4;overflow:hidden;background:#f4f3f1;margin-bottom:12px;}
.fsplit-card .fsplit-media img,.rcard .rcard-media img{position:absolute;inset:0;width:100%;height:100%;margin:0;aspect-ratio:auto;}
.mega-img-card img{width:100%;height:auto;aspect-ratio:3/4;}

/* hover: swap to the second photo */
.pcard-img{position:relative;}
.pimg-alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;transition:opacity .35s ease;pointer-events:none;}
.pcard-img a,.fsplit-media,.rcard-media{background:#f4f2ef;}
.pcard-img .pimg-alt,.fsplit-media .pimg-alt,.rcard-media .pimg-alt{transform:none;}
@media (hover:hover){
  /* no dimming or zoom on card photos; with a second photo the first fades out as it fades in */
  .pcard:hover .pcard-img img,.fsplit-card:hover img,.rcard:hover img{transform:none;opacity:1;}
  .pcard:hover .pcard-img img.pimg-alt,.fsplit-card:hover img.pimg-alt,.rcard:hover img.pimg-alt{opacity:1;}
  .pcard:hover .pcard-img img:has(+ .pimg-alt),.fsplit-card:hover img:has(+ .pimg-alt),.rcard:hover img:has(+ .pimg-alt){opacity:0;}
  .pcard-img img,.fsplit-media img,.rcard-media img{transition:opacity .35s ease;}
}

/* discount on the image (carousel cards) */
.fh-disc-tag{position:absolute;left:10px;top:10px;z-index:1;background:#fff;color:#111;font-size:.66rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 8px;}

/* price · MRP · % off — the same everywhere */
.fh-price{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;}
.fh-price-now{font-weight:700;color:var(--black);}
.fh-price-was{color:#9a9a9a;font-weight:400;font-size:.86em;}
.fh-price-off{color:#16a34a;font-weight:600;font-size:.82em;}
.fsplit-dark .fh-price-now{color:#fff;}
.fh-mc-sgi span s,.fh-qa-price s{color:#9a9a9a;font-weight:400;font-size:.88em;margin-left:4px;}
.fh-mc-sgi span em,.fh-qa-price em{color:#16a34a;font-style:normal;font-weight:600;font-size:.85em;}
.fg-size-set{flex-basis:100%;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#888;margin:8px 0 2px;}

/* ── shop filters: slide-in drawer on phones and tablets ── */
.fs-open-btn,.fs-close,.fs-scrim{display:none;}
@media (max-width:980px){
  .filter-sidebar{position:fixed;top:0;bottom:0;left:0;z-index:1300;width:min(88vw,380px);margin:0;border:0;border-radius:0;
    display:flex;flex-direction:column;overflow:hidden;transform:translateX(-102%);transition:transform .3s ease;box-shadow:0 0 40px rgba(0,0,0,.18);}
  body.fs-open .filter-sidebar{transform:none;}
  .filter-sidebar .fs-header{flex:none;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 14px 20px;gap:14px;}
  .filter-sidebar .fs-header h3{margin-right:auto;}
  .filter-sidebar > .filter-group{flex:none;}
  .filter-sidebar{overflow-y:auto;overscroll-behavior:contain;}
  .fs-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;background:transparent;font-size:20px;color:#111;cursor:pointer;}
  .fs-apply{position:sticky;bottom:0;margin-top:auto;background:#fff;border-top:1px solid var(--border);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));}
  .fs-scrim{display:block;position:fixed;inset:0;z-index:1299;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;}
  body.fs-open .fs-scrim{opacity:1;visibility:visible;}
  body.fs-open{overflow:hidden;}
  .shop-layout{padding:0 16px 48px;}
  .prod-area-top{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch;}
  .prod-area-top .prod-count{grid-column:1/-1;order:3;font-size:.78rem;}
  .fs-open-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;border:1px solid #111;background:#fff;color:#111;
    font:inherit;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;}
  .fs-open-btn span{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#111;color:#fff;font-size:.7rem;letter-spacing:0;}
  .prod-area-top .sort-wrap{min-width:0;}
  .prod-area-top .sort-label{display:none;}
  .prod-area-top .sort-select{width:100%;height:42px;border-radius:0;border-color:#111;font-size:.78rem;}
}
body.fs-open .back-to-top{opacity:0;visibility:hidden;pointer-events:none;}

/* ── card badge + wishlist: solid chips so they read on any photo ── */
.pcard .pbadge,.pcard .pbadge.hot,.pcard .pbadge.new,.pcard .pbadge.trend,.pcard .pbadge.trending,.pcard .pbadge.bestseller{
  top:12px;left:12px;padding:6px 10px;border-radius:2px;
  background:#fff !important;color:#111 !important;
  font-size:.625rem;font-weight:600;letter-spacing:.14em;line-height:1;
  box-shadow:0 1px 6px rgba(0,0,0,.14);
}
.pcard .pbadge.sale{background:#111 !important;color:#fff !important;}
.pcard .pwish{
  top:10px;right:10px;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:none;border-radius:50%;
  color:#111;font-size:1.1rem;opacity:1;transform:none;
  box-shadow:0 2px 10px rgba(0,0,0,.16);
  transition:transform .2s ease,box-shadow .2s ease;
}
.pcard .pwish:hover{opacity:1;transform:scale(1.08);box-shadow:0 4px 14px rgba(0,0,0,.2);}
.pcard .pwish.active,.pcard .pwish.on{color:#d0213b;}
@media (max-width:900px){
  .pcard .pbadge{top:8px;left:8px;padding:5px 8px;}
  .pcard .pwish{top:8px;right:8px;width:34px;height:34px;font-size:1rem;}
}

/* ── full-width banner: text position (Admin → Home sections) ── */
.fbanner.fb-align-left .fb-overlay{justify-content:flex-start;text-align:left;padding-left:clamp(24px,7vw,120px);padding-right:clamp(24px,7vw,120px);
  background:linear-gradient(to right,rgba(0,0,0,.62),rgba(0,0,0,.34) 45%,rgba(0,0,0,.06) 80%);}
.fbanner.fb-align-right .fb-overlay{justify-content:flex-end;text-align:right;padding-left:clamp(24px,7vw,120px);padding-right:clamp(24px,7vw,120px);
  background:linear-gradient(to left,rgba(0,0,0,.62),rgba(0,0,0,.34) 45%,rgba(0,0,0,.06) 80%);}
.fbanner.fb-align-left.fb-dark .fb-overlay{background:linear-gradient(to right,rgba(0,0,0,.78),rgba(0,0,0,.5) 50%,rgba(0,0,0,.2));}
.fbanner.fb-align-right.fb-dark .fb-overlay{background:linear-gradient(to left,rgba(0,0,0,.78),rgba(0,0,0,.5) 50%,rgba(0,0,0,.2));}
.fbanner.fb-align-left .fb-inner,.fbanner.fb-align-right .fb-inner{max-width:min(520px,100%);margin:0;}
.fbanner.fb-align-left .fb-inner{align-items:flex-start;}
.fbanner.fb-align-right .fb-inner{align-items:flex-end;}
.fbanner.fb-align-left .fb-sub{margin-left:0;margin-right:0;}
.fbanner.fb-align-right .fb-sub{margin-left:auto;margin-right:0;}
@media (max-width:900px){
  /* on phones the copy sits at the bottom; keep the side but use the bottom-up wash */
  .fbanner.fb-align-left .fb-overlay,.fbanner.fb-align-right .fb-overlay{align-items:flex-end;padding:0 var(--m-gutter,16px) clamp(26px,8vw,52px);
    background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,.22) 55%,rgba(0,0,0,.02));}
}

/* ── full-width banner: custom text placement (x/y set by dragging in admin) ──
   The copy sits inside a padded area at --fx/--fy (0–1); translating by the
   same fraction of its own size keeps it inside the banner at 0 and 1. */
.fbanner.fb-align-custom .fb-overlay{display:block;padding:0;
  background:radial-gradient(ellipse 75% 95% at var(--fxp,50%) var(--fyp,50%),rgba(0,0,0,.58),rgba(0,0,0,.12));}
.fbanner.fb-align-custom.fb-dark .fb-overlay{background:radial-gradient(ellipse 75% 95% at var(--fxp,50%) var(--fyp,50%),rgba(0,0,0,.72),rgba(0,0,0,.3));}
.fbanner.fb-align-custom .fb-inner{position:absolute;margin:0;max-width:min(560px,40%);
  left:calc(7% + 86% * var(--fx,.5));top:calc(6% + 88% * var(--fy,.5));
  transform:translate(calc(var(--fx,.5) * -100%),calc(var(--fy,.5) * -100%));}
.fbanner.fb-ta-left .fb-inner{align-items:flex-start;text-align:left;}
.fbanner.fb-ta-right .fb-inner{align-items:flex-end;text-align:right;}
.fbanner.fb-ta-left .fb-sub{margin-left:0;margin-right:0;}
.fbanner.fb-ta-right .fb-sub{margin-left:auto;margin-right:0;}
@media (max-width:1100px){ .fbanner.fb-align-custom .fb-inner{max-width:min(520px,55%);} }
@media (max-width:900px){
  /* phones: bottom of the banner, lined up to the chosen side */
  .fbanner.fb-align-custom .fb-overlay{display:flex;align-items:flex-end;justify-content:center;padding:0 var(--m-gutter,16px) clamp(26px,8vw,52px);
    background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,.22) 55%,rgba(0,0,0,.02));}
  .fbanner.fb-align-custom.fb-ta-left .fb-overlay{justify-content:flex-start;}
  .fbanner.fb-align-custom.fb-ta-right .fb-overlay{justify-content:flex-end;}
  .fbanner.fb-align-custom .fb-inner{position:static;transform:none;max-width:100%;}
}