/* Fashioni storefront design system. */

/* Sweet Melina's uses one sans-serif family, Work Sans, for body and headings —
   a serif (previously Cormorant Garamond, before that Fraunces) was tried and
   rejected in favor of unifying on this single typeface. */
@font-face{font-family:"Work Sans";src:url("assets/fonts/work-sans.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap;}

/* ---------- Tokens ---------- */
:root{
  /* Ink family — cool graphite, never pure black */
  --graphite:#16191D;
  --slate:#3D444C;
  --mist:#8A9199;
  /* --mist fails AA as body text on light surfaces (2.69:1). This is the
     same hue family taken down to 4.75:1 on --dial, used for text only. */
  --mist-text:#616870;
  --whisper:#C3C8CC;

  /* Surfaces — cool dial white, deliberately NOT warm cream */
  --dial:#E9ECEE;
  --dial-pure:#FFFFFF;
  --rule:#D3D8DC;
  --rule-dark:#2A2F35;

  /* Accent — heat-blued steel, the colour a watchmaker gets at 290°C */
  --blued:#2F4E8F;
  --blued-lift:#4468AE;

  /* Reserved for the Haute Horlogerie tier only */
  --brass:#9A7B43;

  /* State */
  --stock:#3F6B54;
  --alert:#8C4A3F;
  /* --alert is 2.69:1 on graphite. The footer is the only place an error is
     spoken on a dark surface, so it needs a tone that clears AA there. */
  --alert-lift:#E39685;

  /* Type */
  --display:"Work Sans",system-ui,sans-serif;
  --body:"Work Sans",system-ui,-apple-system,sans-serif;
  --data:"Work Sans",system-ui,sans-serif;

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --fast:220ms;
  --mid:460ms;
  --slow:720ms;

  --radius:2px;
  --rail:56px;
  --maxw:1440px;
  --pad:48px;

  /* Minimum interactive target (WCAG 2.5.5) */
  --tap:44px;
}

@media (max-width:1023px){ :root{ --pad:24px; --rail:0px; } }
@media (max-width:600px){ :root{ --pad:20px; } }

*,*::before,*::after{box-sizing:border-box;}
/* The UA rule for [hidden] is display:none at the lowest specificity, so any
   class that sets display (.steps, .thumbs, .fbar) silently defeats it. */
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--dial);color:var(--graphite);
  font-family:var(--body);font-size:16px;line-height:1.6;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
/* Every <img> carries width/height attributes to reserve layout space. Those
   attributes are presentational hints for the CSS width/height properties, so
   without height:auto a rule that only sets width:auto leaves the height hint
   in force and the image renders stretched, then gets clipped. Components that
   want an explicit height still win on specificity. */
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input,select{font:inherit;color:inherit;}

:focus-visible{outline:2px solid var(--blued);outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
}

/* ---------- Type scale ---------- */
.display{font-family:var(--display);font-weight:400;letter-spacing:-.015em;line-height:1.06;}
h1,h2,h3{margin:0;font-weight:400;}
.h-hero{font-family:var(--display);font-size:clamp(42px,7.4vw,92px);line-height:1.02;letter-spacing:-.02em;}
.h1{font-family:var(--display);font-size:clamp(32px,4.4vw,58px);line-height:1.08;}
.h2{font-family:var(--display);font-size:clamp(26px,3.2vw,42px);line-height:1.12;}
.h3{font-size:clamp(17px,1.5vw,21px);font-weight:500;letter-spacing:-.005em;}

.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mist-text);margin:0 0 18px;
}
/* --blued (the exact-matched Daffy red) is ~3.9:1 on white — under the 4.5:1
   AA minimum for this small label text. --theme-primary-hover is the same
   red family, darker, and passes (~5.9:1). */
.eyebrow--blued{color:var(--theme-primary-hover);}
.eyebrow--onink{color:var(--whisper);}

.lede{font-size:clamp(15px,1.3vw,18px);color:var(--slate);max-width:46ch;}
.cap{font-size:12.5px;letter-spacing:.03em;color:var(--mist-text);}
.ref{font-family:var(--data);font-size:11.5px;letter-spacing:.06em;color:var(--mist-text);}
.price{font-family:var(--data);font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-.01em;color:var(--theme-primary-hover);}
.price s{color:var(--mist-text);font-weight:400;margin-left:10px;text-decoration-thickness:1px;}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.section{padding:clamp(64px,9vw,124px) 0;}
.section--tight{padding:clamp(48px,6vw,80px) 0;}
.ink{background:var(--graphite);color:var(--dial);}
.ink .lede{color:var(--whisper);}
.ink .cap,.ink .ref{color:var(--mist);}
.ink .eyebrow{color:var(--mist);}
.ink .price s{color:var(--mist);}
.ink .tier__range,.ink .spectable th{color:var(--mist);}
/* The blued accent is too dark on graphite (2.19:1); the lift tone clears
   the 3:1 large-text threshold, and the footer wordmark is sized for it. */
.ink .logo span{color:var(--blued-lift);}
.ft .logo{font-size:26px;}

.page{margin-left:0;padding-left:0;}

/* ---------- Header ---------- */
.hdr{
  position:sticky;top:0;z-index:50;background:var(--dial);
  border-bottom:1px solid var(--rule);
}
.hdr__in{
  height:86px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  transition:height var(--mid) var(--ease);
}

.logo{font-family:var(--display);font-size:23px;letter-spacing:.14em;text-transform:uppercase;text-align:center;
  display:flex;align-items:center;justify-content:center;min-height:var(--tap);}
.logo span{color:var(--blued);}

.nav{display:flex;gap:30px;align-items:center;}
.nav a{
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);
  position:relative;transition:color var(--fast) var(--ease);
  /* 44px hit area; the underline is pulled back up so it still hugs the text */
  display:inline-flex;align-items:center;min-height:var(--tap);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;
  background:var(--blued);transform:scaleX(0);transform-origin:left;
  transition:transform var(--mid) var(--ease);
}
.nav a:hover{color:var(--graphite);}
.nav a:hover::after{transform:scaleX(1);}

.hdr__act{display:flex;gap:22px;justify-content:flex-end;align-items:center;}
.iconbtn{width:var(--tap);height:var(--tap);display:grid;place-items:center;position:relative;}
.iconbtn svg{width:19px;height:19px;stroke:var(--graphite);stroke-width:1.3;fill:none;}
.iconbtn img{height:22px;width:auto;display:block;}
.cartdot{
  position:absolute;top:4px;right:2px;min-width:16px;height:16px;padding:0 4px;
  background:var(--theme-primary-hover);color:#fff;border-radius:9px;
  font-family:var(--data);font-size:9.5px;display:grid;place-items:center;
}

/* Mega menu */
.mega{
  position:absolute;left:0;right:0;top:100%;background:var(--dial-pure);
  border-bottom:1px solid var(--rule);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease),visibility var(--fast);
}
.hdr__nav:hover .mega,.mega:hover,.mega.is-open,.hdr__nav:focus-within .mega{opacity:1;visibility:visible;transform:none;}
.mega__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;padding:36px var(--pad) 44px;max-width:var(--maxw);margin:0 auto;}
.mega__item{text-align:center;padding:18px 10px;transition:background var(--fast) var(--ease);}
.mega__item:hover{background:var(--dial);}
.mega__item img,.mega__item .ph{height:76px;width:auto;margin:0 auto 16px;object-fit:contain;}
.mega__item b{display:block;font-family:var(--display);font-size:16px;font-weight:400;margin-bottom:5px;}

.burger,.mobonly{display:none;}
@media (max-width:1023px){
  .hdr__in{grid-template-columns:1fr auto 1fr;height:62px;}
  /* .hdr__nav must go too, not just its children: it is a grid item, and
     leaving it in place gives the row four items across three columns, which
     pushes .hdr__act onto an implicit second row. */
  .nav,.mega,.hdr__nav{display:none;}
  .burger{display:grid;place-items:center;width:var(--tap);height:var(--tap);}
  .burger span{display:block;width:20px;height:1px;background:var(--graphite);position:relative;}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1px;background:var(--graphite);}
  .burger span::before{top:-6px;}.burger span::after{top:6px;}
  .hdr__act{gap:2px;}
}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:80;background:var(--graphite);color:var(--dial);
  transform:translateX(100%);transition:transform var(--mid) var(--ease);
  display:flex;flex-direction:column;padding:18px 20px 22px;overflow:auto;
}
.drawer.is-open{transform:none;}
/* Scroll containment: locking body alone is not enough when the scrolling
   element is <html>, and a scroll gesture inside an open panel chains to the
   page behind it once the panel hits its own end. */
html.is-locked,html.is-locked body{overflow:hidden;height:100%;}
.drawer,.cart,.filters{overscroll-behavior:contain;}
.drawer__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.drawer nav{display:flex;flex-direction:column;gap:3px;}
.drawer nav a{min-height:58px;padding:6px 0;display:flex;flex-direction:column;justify-content:center;font-family:var(--body);font-size:18px;font-weight:500;line-height:1.15;letter-spacing:-.01em;}
.drawer nav a small{display:block;margin-top:3px;font-family:var(--data);font-size:9.5px;font-weight:500;line-height:1.35;letter-spacing:.02em;color:var(--mist);}
.xbtn{
  font-family:var(--data);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  min-height:var(--tap);min-width:var(--tap);display:inline-flex;align-items:center;justify-content:center;
}
/* .xbtn is declared after .mobonly and would otherwise win the cascade, leaving
   the filter drawer's Done button visible on desktop. */
.xbtn.mobonly{display:none;}
@media (max-width:1023px){ .xbtn.mobonly{display:inline-flex;} }

/* Cart drawer */
.cart{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:90;
  background:var(--dial-pure);border-left:1px solid var(--rule);
  transform:translateX(100%);transition:transform var(--mid) var(--ease);
  display:flex;flex-direction:column;
}
.cart.is-open{transform:none;}
.cart__hd{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid var(--rule);}
.cart__body{flex:1;overflow:auto;padding:24px;}
.cart__row{display:grid;grid-template-columns:64px 1fr auto;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule);}
.cart__row img,.cart__row .ph{width:64px;height:64px;object-fit:contain;background:var(--dial);}
.cart__ft{padding:24px;border-top:1px solid var(--rule);}
/* Cart Checkout button: 4px larger than the base .btn 12px. */
.cart .cart__ft a.btn{font-size:16px;}

/* Quantity stepper — product page and cart rows share one component. */
/* 46px, not 44: the 1px border on each side eats into the box (border-box),
   and a site-wide a11y rule forces every button inside .cart to min-height:44px
   !important — sizing the container to exactly 44px content area (46 - 2)
   stops that rule from forcing the button taller than its clipped container,
   which was pushing the +/- glyphs off-center. */
.qty-stepper{display:inline-flex;align-items:stretch;height:46px;border:1px solid var(--rule);border-radius:8px;overflow:hidden;}
.qty-stepper__btn{width:44px;padding:0;border:0;background:#fff;color:var(--graphite);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.qty-stepper__btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;display:block;}
.qty-stepper__btn:hover{background:var(--dial);}
.qty-stepper__btn:active{background:var(--rule);}
.qty-stepper__btn:disabled{color:var(--mist);cursor:not-allowed;background:#fff;}
.qty-stepper__input{width:44px;padding:0;border:0;border-left:1px solid var(--rule);border-right:1px solid var(--rule);text-align:center;font:600 14px/1 var(--body);color:var(--graphite);background:#fff;-moz-appearance:textfield;}
.qty-stepper__input::-webkit-inner-spin-button,.qty-stepper__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
/* The site-wide focus ring (2px, offset 3px outward) bleeds onto whatever
   sits next to a focused element with no gap — here, onto the minus button.
   Draw it inside the input's own box instead; still visible, no longer
   painted over the neighboring control. */
.qty-stepper__input:focus-visible{outline-offset:-2px;}
.cart__row .qty-stepper{margin-top:10px;}
.cart__row-end{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:10px;}
.icon-remove{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--mist-text);flex:0 0 auto;}
.icon-remove:hover{background:var(--dial);color:var(--alert);}
.icon-remove svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;}
.qty-select{margin:18px 0;}
.qty-select__row{display:flex;align-items:center;gap:14px;}
.cart-status-msg{margin:14px 0 0;padding:12px 16px;border-radius:8px;font-weight:600;font-size:13.5px;}
.cart-status-msg[data-tone="added"],.cart-status-msg[data-tone="updated"]{background:#E6F4EA;color:#1E7A34;}
.cart-status-msg[data-tone="removed"]{background:#FBEAE8;color:var(--alert);}
.cart-status-msg.is-rising{animation:cart-msg-rise .32s ease-out;}
/* Same tones as the full-size message on the product page, just sized to sit
   under a single cart-drawer row's compact stepper instead of the page. */
.cart-row-msg{margin:8px 0 0;padding:6px 10px;font-size:12px;}
@keyframes cart-msg-rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){.cart-status-msg.is-rising{animation:none;}}
.scrim{position:fixed;inset:0;background:rgba(22,25,29,.5);opacity:0;visibility:hidden;transition:opacity var(--mid);z-index:70;}
.scrim.is-on{opacity:1;visibility:visible;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:54px;padding:0 34px;border-radius:var(--radius);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  background:var(--graphite);color:var(--dial);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.btn:hover{background:var(--blued);}
.btn--full{width:100%;}
.btn--line{background:none;color:var(--graphite);border:1px solid var(--graphite);}
.btn--line:hover{background:var(--graphite);color:var(--dial);}
.ink .btn--line{color:var(--dial);border-color:var(--dial);}
.ink .btn--line:hover{background:var(--dial);color:var(--graphite);}
.btn--text{
  height:auto;padding:0;background:none;color:inherit;
  border-bottom:1px solid var(--blued);padding-bottom:4px;
  min-height:var(--tap);
}
.btn--text:hover{background:none;color:var(--blued);}

/* ---------- Placeholder artwork ----------
   Retained as a defensive fallback only. No product renders one: all 35
   references resolve through the central Selldone image helper. */
.ph{
  background:var(--dial-pure);display:grid;place-items:center;position:relative;
  aspect-ratio:1;
}
.ph::after{
  content:"";width:42%;aspect-ratio:1;border:1px solid var(--whisper);border-radius:50%;
  box-shadow:0 0 0 6px var(--dial-pure),0 0 0 7px var(--rule);
}
.ph::before{
  content:"";position:absolute;width:1px;height:14%;background:var(--whisper);
  top:31%;left:50%;transform-origin:bottom center;
}

/* ---------- Hero ---------- */
.hero{
  background:var(--graphite);color:var(--dial);position:relative;overflow:hidden;
  min-height:min(68vh,720px);display:flex;align-items:center;
}
/* .wrap supplies the horizontal padding; a `padding: 80px 0` shorthand here
   reset it to zero and pushed hero content flush against the rail. */
.hero__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  width:100%;padding-block:80px;
}
.hero__art{display:none;}


.hero h1{margin:0 0 26px;}
.hero__cta{display:flex;gap:26px;align-items:center;margin-top:40px;flex-wrap:wrap;}

/* Running seconds — the one moving thing on the page. */
.sweep{display:flex;align-items:center;gap:12px;margin-bottom:26px;}
.sweep__dial{width:26px;height:26px;border:1px solid var(--slate);border-radius:50%;position:relative;}
.sweep__hand{
  position:absolute;left:50%;bottom:50%;width:1px;height:10px;background:var(--blued-lift);
  transform-origin:bottom center;animation:sweep 60s steps(60) infinite;
}
@keyframes sweep{to{transform:rotate(360deg);}}
.sweep span{font-family:var(--data);font-size:10.5px;letter-spacing:.2em;color:var(--mist);text-transform:uppercase;}

@media (max-width:900px){
  .hero{min-height:auto;}
  .hero__grid{grid-template-columns:1fr;gap:36px;padding-block:56px 64px;text-align:center;}
  .hero__art{display:none;}
  
  /* Stacked, .hero__art spans the full width, so a halo at 118% of it balloons
     to ~1000px and washes over the headline below. Tie it to the image. */
  
  .hero .lede{margin-inline:auto;}
  .hero__cta,.sweep{justify-content:center;}
}

/* ---------- Assurance strip ---------- */
.assure{display:grid;grid-template-columns:repeat(4,1fr);}
.assure div{padding:26px 20px;border-right:1px solid var(--rule);}
.assure div:last-child{border-right:0;}
.assure b{display:block;font-size:13px;font-weight:500;margin-bottom:3px;}
@media (max-width:760px){
  .assure{grid-template-columns:repeat(2,1fr);}
  .assure div:nth-child(2n){border-right:0;}
  .assure div:nth-child(-n+2){border-bottom:1px solid var(--rule);}
}

/* ---------- Category grid ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);}
.cat{
  background:var(--dial-pure);padding:44px 28px 34px;text-align:center;
  transition:background var(--mid) var(--ease),color var(--mid) var(--ease);
}
.cat img,.cat .ph{height:132px;width:100%;object-fit:contain;margin-bottom:24px;background:none;}
.cat .ph{aspect-ratio:auto;}
.cat b{display:block;font-family:var(--display);font-size:22px;font-weight:400;margin-bottom:8px;}
.cat .cap{transition:color var(--mid) var(--ease);}
.cat:hover{background:var(--graphite);color:var(--dial);}
.cat:hover .cap{color:var(--whisper);}
@media (max-width:1000px){.cats{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.cats{grid-template-columns:1fr;} .cat img,.cat .ph{height:104px;}}

/* ---------- Tier rows ---------- */
.tier{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;border-bottom:1px solid var(--rule);}
/* max-height:78% did not resolve against an aspect-ratio-derived height, so the
   image filled the box and overflowed. Inset the container instead and let
   object-fit:contain do the fitting — same visual proportion, no clipping. */
.tier__art{aspect-ratio:4/3;background:var(--dial-pure);position:relative;overflow:hidden;}
/* Absolutely positioned: percentage width/height resolve against the containing
   block, which in-flow percentages cannot do against an aspect-ratio height. */
.tier__art img{position:absolute;left:11%;top:11%;width:78%;height:78%;object-fit:contain;transition:transform var(--slow) var(--ease);}
.tier:hover .tier__art img{transform:scale(1.03);}
.tier__txt{padding:clamp(32px,5vw,72px);}
.tier--flip .tier__art{order:2;}
.tier--dark{background:var(--graphite);color:var(--dial);border-bottom-color:var(--rule-dark);}
.tier--dark .tier__art{background:#1C2027;}
.tier--dark .lede{color:var(--whisper);}
.tier__range{font-family:var(--data);font-size:12px;letter-spacing:.08em;color:var(--mist-text);margin-top:22px;}
@media (max-width:860px){
  .tier{grid-template-columns:1fr;}
  .tier--flip .tier__art{order:0;}
}

/* ---------- Spotlight ---------- */
/* overflow:hidden contains the 110%-wide glow on .spot__art::before, which
   otherwise escapes the column and gives the page 11px of horizontal scroll
   once .spot collapses to one column under 1000px. */
.spot{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:40px;align-items:center;overflow:hidden;}
.spot__art{display:grid;place-items:center;position:relative;}
.spot__art::before{
  content:"";position:absolute;width:110%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(154,123,67,.22) 0%,rgba(154,123,67,0) 64%);
}
.spot__art img{position:relative;max-height:440px;width:auto;object-fit:contain;}
.specs{list-style:none;margin:0;padding:0;}
.specs li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--rule-dark);}
.specs dt,.specs .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);}
.specs .v{font-family:var(--data);font-size:13px;color:var(--dial);}
.spot--right{text-align:right;}
@media (max-width:1000px){
  .spot{grid-template-columns:1fr;gap:28px;text-align:left;}
  .spot--right{text-align:left;}
  .spot__art{order:-1;}
}

/* ---------- Product card ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);}
.pcard{background:var(--dial-pure);padding:28px;display:block;}
/* Two compounding bugs. The <img> width/height attributes are presentational
   hints, so a rule setting only width:auto left the height hint (500px) live and
   the image rendered 264x500 in a 264x264 box, clipped by overflow:hidden. And
   percentage heights do not resolve against a height derived from aspect-ratio,
   so height:100% silently fell back to auto. Stretching the grid item sizes it
   from the grid area with no percentage involved; object-fit:contain then fits
   the whole watch inside, and the container padding gives it breathing room. */
.pcard__art{aspect-ratio:1;position:relative;overflow:hidden;margin-bottom:22px;}
.pcard__art img{position:absolute;left:8%;top:8%;width:84%;height:84%;object-fit:contain;transition:transform var(--slow) var(--ease);}
.pcard:hover .pcard__art img{transform:scale(1.03);}
.pcard__name{
  font-family:var(--display);font-size:19px;margin:6px 0 10px;
  display:inline-block;border-bottom:1px solid transparent;transition:border-color var(--mid) var(--ease);
}
.pcard:hover .pcard__name{border-bottom-color:var(--blued);}
.pcard .price{font-size:15px;}
@media (max-width:1000px){.pgrid{grid-template-columns:repeat(2,1fr);} .pcard{padding:20px;}}
/* Brief specifies 3/2/1; the prototype stopped at two columns. */
@media (max-width:560px){.pgrid{grid-template-columns:1fr;} .pcard{padding:20px;} .pcard__name{font-size:18px;}}

/* Horizontal rail */
.scroller{display:flex;gap:1px;overflow-x:auto;scroll-snap-type:x mandatory;background:var(--rule);border:1px solid var(--rule);cursor:grab;touch-action:pan-y;overscroll-behavior-inline:contain;scrollbar-width:none;}
.scroller.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none;}
.scroller.is-dragging *{pointer-events:none;}
.scroller>*{flex:0 0 clamp(240px,30%,340px);scroll-snap-align:start;}
.scroller::-webkit-scrollbar{display:none;}

/* ---------- Editorial ---------- */
.edit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center;}
.edit__art{aspect-ratio:4/5;background:var(--dial-pure);display:grid;place-items:center;}
.edit__art img{max-height:80%;width:auto;object-fit:contain;}
@media (max-width:800px){.edit{grid-template-columns:1fr;}}

/* ---------- Footer ---------- */
.ft{background:var(--graphite);color:var(--dial);padding:clamp(56px,8vw,96px) 0 0;}
.ft__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:56px;}
.ft h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);margin:0 0 20px;font-weight:600;}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.ft ul a{font-size:14px;color:var(--whisper);transition:color var(--fast);display:inline-flex;align-items:center;min-height:var(--tap);}
.ft ul a:hover{color:var(--dial);}
.sub{display:flex;gap:12px;border-bottom:1px solid var(--slate);padding-bottom:10px;margin-top:6px;}
.sub input{flex:1;background:none;border:0;color:var(--dial);font-size:14px;padding:4px 0;min-height:var(--tap);}
.sub input::placeholder{color:var(--mist);}
.sub button{font-size:11px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--blued-lift);padding-bottom:2px;min-height:var(--tap);}
.ft__bar{display:flex;justify-content:space-between;gap:20px;padding:22px 0 30px;border-top:1px solid var(--rule-dark);font-size:12px;color:var(--mist);flex-wrap:wrap;}
@media (max-width:900px){
  .ft__cols{grid-template-columns:1fr;gap:0;}
  .ft__col{border-bottom:1px solid var(--rule-dark);padding:20px 0;}
  .ft__col--sub{border-bottom:0;padding-bottom:36px;}
  .ft__col h4{margin-bottom:14px;}
}

/* ---------- Shop page ---------- */
/* Brief specifies a 280px sidebar; the prototype CSS had 264px. */
.shop{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:start;}
.shop>*{min-width:0;}
.filters{position:sticky;top:120px;}
.fgroup{border-bottom:1px solid var(--rule);padding:22px 0;}
.fgroup:first-child{padding-top:0;}
.fgroup h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 16px;font-weight:600;color:var(--slate);}
.check{display:flex;align-items:center;gap:11px;padding:7px 0;font-size:14px;cursor:pointer;min-height:var(--tap);}
.check input{width:16px;height:16px;accent-color:var(--blued);flex:0 0 auto;}
.check span.cap{margin-left:auto;}
.price-range-values{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:3px;font-family:var(--data);font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--slate);}
.dual-range{position:relative;height:44px;margin-bottom:12px;touch-action:none;}
.dual-range__track{position:absolute;left:8px;right:8px;top:50%;height:5px;transform:translateY(-50%);border-radius:99px;background:#D9DEE8;box-shadow:inset 0 0 0 1px #B7BFCC;}
.dual-range__track i{position:absolute;top:0;bottom:0;left:var(--range-start);right:calc(100% - var(--range-end));border-radius:inherit;background:var(--blued);}
.dual-range__input{position:absolute;inset:0;width:100%;height:44px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;pointer-events:none;}
.dual-range__input::-webkit-slider-runnable-track{height:5px;background:transparent;border:0;}
.dual-range__input::-moz-range-track{height:5px;background:transparent;border:0;}
.dual-range__input::-webkit-slider-thumb{width:24px;height:24px;margin-top:-9.5px;border:3px solid #fff;border-radius:50%;background:#687080;box-shadow:0 2px 8px rgba(16,24,40,.28);appearance:none;-webkit-appearance:none;pointer-events:auto;cursor:grab;}
.dual-range__input::-moz-range-thumb{width:18px;height:18px;border:3px solid #fff;border-radius:50%;background:#687080;box-shadow:0 2px 8px rgba(16,24,40,.28);pointer-events:auto;cursor:grab;}
.dual-range__input:active::-webkit-slider-thumb{cursor:grabbing;background:var(--blued);}
.dual-range__input:active::-moz-range-thumb{cursor:grabbing;background:var(--blued);}
.dual-range__input:focus-visible{outline:none;}
.dual-range__input:focus-visible::-webkit-slider-thumb{outline:3px solid color-mix(in srgb,var(--blued) 28%,transparent);outline-offset:2px;}
.dual-range__input:focus-visible::-moz-range-thumb{outline:3px solid color-mix(in srgb,var(--blued) 28%,transparent);outline-offset:2px;}
.price-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.price-field{min-width:0;padding:9px 11px;border:1px solid var(--rule);border-radius:8px;background:#fff;cursor:text;transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);}
.price-field:focus-within{border-color:var(--blued);box-shadow:0 0 0 3px color-mix(in srgb,var(--blued) 12%,transparent);}
.price-field.is-invalid{border-color:var(--alert);}
.price-field>span{display:block;margin-bottom:4px;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mist-text);}
.price-field b{display:flex;align-items:center;gap:4px;font-family:var(--data);font-size:12px;font-weight:500;color:var(--slate);}
.price-field b i{font-style:normal;}
.price-field input{width:100%;min-width:0;padding:0;border:0;outline:0;background:transparent;color:var(--graphite);font:500 12px/20px var(--data);font-variant-numeric:tabular-nums;}
.price-field input::-webkit-inner-spin-button,.price-field input::-webkit-outer-spin-button{margin:0;appearance:none;-webkit-appearance:none;}
.price-field input[type=number]{appearance:textfield;-moz-appearance:textfield;}
.listhd{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px;flex-wrap:wrap;}
.list-controls{display:flex;align-items:center;gap:10px;}
.sort{border:1px solid var(--rule);background:var(--dial-pure);height:var(--tap);padding:0 14px;border-radius:var(--radius);font-size:13px;}
.crumb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist-text);margin-bottom:6px;}
.crumb a{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap);}
.crumb a:hover{color:var(--graphite);}
.fbar{display:none;}
.empty{padding:64px 20px;text-align:center;border:1px solid var(--rule);background:var(--dial-pure);}
@media (max-width:1023px){
  .shop{grid-template-columns:1fr;gap:0;}
  .filters{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:85;max-height:82vh;overflow:auto;
    background:var(--dial-pure);border-top:1px solid var(--rule);padding:24px;
    transform:translateY(100%);transition:transform var(--mid) var(--ease);
  }
  .filters.is-open{transform:none;}
  .fbar{
    display:flex;position:static;transform:none;z-index:auto;
    background:var(--graphite);color:var(--dial);height:var(--tap);padding:0 18px;align-items:center;justify-content:center;
    border-radius:8px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  }
}

/* ---------- Product page ---------- */
.pdp{display:grid;grid-template-columns:58fr 42fr;gap:clamp(28px,4vw,64px);align-items:start;}
/* Grid items default to min-width:auto. The gallery image carries an
   intrinsic width of 1000px, which pins the 58fr track open and squeezes
   the info column to 195px, overflowing the page. */
.pdp>*{min-width:0;}
.gal{display:grid;grid-template-columns:76px 1fr;gap:16px;min-width:0;}
.gal>*{min-width:0;}
.thumbs{display:flex;flex-direction:column;gap:10px;}
.thumb{aspect-ratio:1;background:var(--dial-pure);border:1px solid var(--rule);position:relative;}
.thumb.is-on{border-color:var(--blued);}
.thumb img{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:contain;}
.galmain{aspect-ratio:1;background:var(--dial-pure);position:relative;border:1px solid var(--rule);border-radius:12px;overflow:hidden;}
.galmain img{position:absolute;left:6%;top:6%;width:88%;height:88%;object-fit:contain;}
.pinfo{position:sticky;top:120px;}
.pinfo h1{margin:8px 0 10px;}
.pline{height:1px;background:var(--rule);margin:26px 0;}
.swatches{display:flex;gap:12px;flex-wrap:wrap;padding:5px 5px 5px 6px;margin:-5px 0 -5px;}
.sw{width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--rule);position:relative;}
.sw.is-on{box-shadow:0 0 0 2px var(--dial),0 0 0 3px var(--blued);}
.swname{font-size:13px;color:var(--slate);margin-top:12px;}
.stock{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--slate);margin:22px 0 26px;}
.dot{width:7px;height:7px;border-radius:50%;background:var(--stock);flex:0 0 auto;}
.acc{border-top:1px solid var(--rule);}
.acc__hd{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 0;text-align:left;font-size:13px;letter-spacing:.1em;text-transform:uppercase;min-height:var(--tap);}
.acc__ico{font-family:var(--data);color:var(--mist-text);}
.acc__bd{display:none;padding:0 0 24px;color:var(--slate);font-size:14.5px;}
.acc.is-open .acc__bd{display:block;}
.spectable{width:100%;border-collapse:collapse;}
.spectable th,.spectable td{text-align:left;padding:11px 0;border-bottom:1px solid var(--rule);font-weight:400;font-size:13.5px;}
.spectable th{color:var(--mist-text);font-size:11px;letter-spacing:.14em;text-transform:uppercase;width:44%;}
.spectable td{font-family:var(--data);}
@media (max-width:900px){
  .pdp{grid-template-columns:1fr;}
  .pinfo{position:static;}
  .gal{grid-template-columns:1fr;}
  .thumbs{flex-direction:row;order:2;overflow-x:auto;}
  .thumb{flex:0 0 64px;}
}

/* ---------- Checkout ---------- */
.cohdr{border-bottom:1px solid var(--rule);background:var(--dial);}
.cohdr__in{height:76px;display:flex;align-items:center;justify-content:space-between;}
.secure{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist-text);}
.secure svg{width:14px;height:14px;stroke:var(--mist);fill:none;stroke-width:1.4;}
.co{display:grid;grid-template-columns:60fr 40fr;gap:clamp(32px,5vw,72px);align-items:start;}
.co>*{min-width:0;}
.steps{display:flex;align-items:center;gap:0;margin-bottom:40px;}
.step{display:flex;align-items:center;gap:10px;flex:1;}
.step:last-child{flex:0;}
.step i{width:9px;height:9px;border-radius:50%;background:var(--whisper);flex:0 0 auto;}
.step.is-done i{background:var(--blued);}
.step.is-now i{background:var(--graphite);transform:scale(1.35);}
.step em{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist-text);white-space:nowrap;}
.step.is-now em{color:var(--graphite);}
.step b{flex:1;height:1px;background:var(--rule);}
.fset{border:0;margin:0 0 36px;padding:0;}
.fset legend{font-family:var(--display);font-size:22px;margin-bottom:20px;padding:0;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.fld{margin-bottom:16px;}
.fld label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist-text);margin-bottom:7px;}
.fld input,.fld select{
  width:100%;height:50px;padding:0 14px;background:var(--dial-pure);
  border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color var(--fast) var(--ease);
}
.fld input:focus,.fld select:focus{border-color:var(--blued);}
.fld.has-err input{border-color:var(--alert);}
.err{display:none;color:var(--alert);font-size:12.5px;margin-top:6px;}
.fld.has-err .err{display:block;}
.opt{display:flex;align-items:center;gap:14px;border:1px solid var(--rule);background:var(--dial-pure);padding:16px;margin-bottom:10px;cursor:pointer;min-height:var(--tap);}
.opt input{accent-color:var(--blued);width:18px;height:18px;flex:0 0 auto;}
.opt b{font-weight:500;font-size:14px;}
.opt .price{margin-left:auto;font-size:14px;}
.sum{background:var(--dial-pure);border:1px solid var(--rule);padding:28px;position:sticky;top:110px;}
.sum__row{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule);}
.sum__row img,.sum__row .ph{width:64px;height:64px;object-fit:contain;background:var(--dial);}
/* Name/price share row 1 and qty/pencil share row 2, so the pencil lines up with the qty. */
.sum__row{grid-template-rows:auto auto;row-gap:4px;}
.sum__row>a:first-child{grid-row:span 2;}
.sum__info,.sum__end{display:contents;}
.sum__info b{grid-column:2;grid-row:1;}
.sum__info .ref{grid-column:2;grid-row:2;align-self:center;margin:0;}
.sum__end .price{grid-column:3;grid-row:1;justify-self:center;}
.sum__end .sum__mod,.sum__end .icon-remove{grid-column:3;grid-row:2;justify-self:center;align-self:center;}
.sum__info .qty-stepper{grid-column:2;grid-row:2;align-self:center;}
#continueCheckout{font-size:18px;}
.sum__mod{font-size:12px;line-height:1;padding:1px 10px;border:0;border-radius:4px;color:var(--graphite);text-decoration:none;}
.sum__mod:hover{border-color:var(--graphite);}
.sum__line{display:flex;justify-content:space-between;padding:9px 0;font-size:14px;color:var(--slate);}
.sum__tot{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;margin-top:8px;border-top:1px solid var(--rule);}
.sum__tot .price{font-family:var(--display);font-size:26px;}
.promo{width:100%;text-align:left;font-size:12.5px;color:var(--blued);padding:14px 0;border-bottom:1px solid var(--rule);min-height:var(--tap);}
@media (max-width:900px){
  .co{grid-template-columns:1fr;}
  .sum{position:static;order:-1;margin-bottom:28px;}
  .frow{grid-template-columns:1fr;}
  .steps{overflow-x:auto;}
  .step em{display:none;}
  .step.is-now em{display:block;}
}

/* ---------- Fixed-box image containment ----------
   Every image that sits inside a fixed box gets the same contract: never exceed
   the box, never distort, always letterbox. This exists because the same bug
   surfaced three separate times — product cards, tier art, and the product
   gallery — each time because an HTML width/height attribute or an unresolvable
   percentage silently won over the intended sizing. Boxes whose height comes
   from aspect-ratio position the image absolutely, since percentage heights do
   not resolve against an aspect-ratio height. Verified by imgsweep.mjs. */
.pcard__art img,
.galmain img,
.thumb img,
.cat img,
.mega__item img,
.cart__row img,
.sum__row img,
.tier__art img,
.spot__art img,
.edit__art img,


/* ---------- Utility ---------- */
.mt0{margin-top:0;}.mb0{margin-bottom:0;}
.stack>*+*{margin-top:18px;}
.center{text-align:center;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* Reveal-on-scroll must fail visible.
   Twelve sections use this. If it defaulted to opacity:0 then any JS failure
   before initReveal() — a module 404, a throw in an import — would leave most
   of the page loaded and blank, which is the worst outcome for a storefront.
   So content is opaque by default and the animation is opt-in: JS adds
   html.js-reveal only at the moment it is actually about to observe. */
.reveal{opacity:1;transform:none;}
html.js-reveal .reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease);
}
html.js-reveal .reveal.is-in{opacity:1;transform:none;}

/* ==========================================================================
   Boutique scenes — engraved line illustrations standing in for photography
   ========================================================================== */
.boutique{background:var(--graphite);color:var(--dial);}
.scenes{display:grid;grid-template-columns:1.4fr 1fr;gap:1px;background:var(--rule-dark);border:1px solid var(--rule-dark);margin-top:44px;}
.scene{background:#1A1E24;position:relative;overflow:hidden;}
.scene--wide{grid-row:span 2;}
.scene svg{width:100%;height:100%;display:block;}
.scene__cap{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;
  background:linear-gradient(to top,rgba(22,25,29,.92),rgba(22,25,29,0));}
.scene__cap b{display:block;font-family:var(--display);font-size:19px;font-weight:400;margin-bottom:3px;}
.scene__cap span{font-size:12.5px;color:var(--whisper);}
@media (max-width:820px){
  .scenes{grid-template-columns:1fr;}
  .scene--wide{grid-row:span 1;}
}
/* Stroke system for the scenes */
.ln{fill:none;stroke:var(--whisper);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;}
.ln-2{fill:none;stroke:var(--mist);stroke-width:1;stroke-linecap:round;}
.ln-a{fill:none;stroke:var(--blued-lift);stroke-width:1.4;stroke-linecap:round;}
.fl{fill:#20252C;}
.fl-2{fill:#171B21;}
.glow{fill:url(#lampGlow);}

/* ---------- Skeleton loading shells ---------- */
@keyframes skeleton-shimmer{
  0%{background-position:100% 0;}
  100%{background-position:-100% 0;}
}
.skeleton-block{
  display:block;font-style:normal;border-radius:8px;
  background:linear-gradient(90deg,#E4E9F1 25%,#F4F7FB 38%,#E4E9F1 63%);
  background-size:400% 100%;animation:skeleton-shimmer 1.45s ease-in-out infinite;
}
.skeleton-line{width:100%;height:14px;border-radius:99px;}
.sk-line-title{height:42px;margin-top:14px;}
.sk-line-price{width:38%;height:27px;margin-top:26px;}
.sk-line-xs{width:26%;height:10px;}
.sk-line-sm{width:35%;height:12px;margin-top:14px;}
.sk-line-55{width:55%;}
.sk-line-70{width:70%;}
.sk-line-85{width:85%;}
.sk-product-gallery{display:grid;grid-template-columns:76px 1fr;gap:16px;min-width:0;}
.sk-thumb-stack{display:flex;flex-direction:column;gap:10px;}
.sk-thumb-stack .skeleton-block{aspect-ratio:1;border-radius:2px;}
.sk-product-image{aspect-ratio:1;border-radius:2px;}
.sk-product-info{padding:24px 26px;background:#fff;border:1px solid var(--rule);border-radius:12px;box-shadow:0 4px 20px rgba(16,24,40,.045);}
.sk-product-info>.skeleton-line{margin-bottom:12px;}
.sk-rule{height:1px;border-radius:0;margin:24px 0;}
.sk-swatches{display:flex;gap:12px;margin:16px 0;}
.sk-swatches .skeleton-block{width:44px;height:44px;border-radius:50%;}
.sk-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;}
.sk-actions .skeleton-block{height:54px;}
.sk-product-card{min-width:0;padding:20px;display:flex;flex-direction:column;gap:13px;background:#fff;border:1px solid var(--rule);border-radius:12px;box-shadow:0 3px 14px rgba(16,24,40,.035);}
.sk-card-image{width:100%;aspect-ratio:1;border-radius:9px;margin-bottom:5px;}
.sk-category-card{height:294px;padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden;}
.sk-category-image{height:69%;margin-bottom:auto;}
.sk-post-card{display:flex;flex-direction:column;gap:13px;}
.sk-post-image{width:100%;aspect-ratio:16/9;margin-bottom:7px;}
.sk-article{display:flex;flex-direction:column;gap:14px;}
.sk-article-image{width:100%;aspect-ratio:16/8;margin:14px 0;}
@media (max-width:900px){
  .sk-product-gallery{grid-template-columns:1fr;}
  .sk-thumb-stack{flex-direction:row;order:2;overflow:hidden;}
  .sk-thumb-stack .skeleton-block{flex:0 0 64px;}
  .sk-product-image{order:1;}
}
@media (max-width:620px){
  .sk-product-info{padding:20px 18px;}
  .sk-line-title{height:30px;}
  .sk-category-card{height:235px;padding:12px;}
}
@media (prefers-reduced-motion:reduce){.skeleton-block{animation:none;background:#E4E9F1;}}
.varlist{display:flex;gap:10px;flex-wrap:wrap;}
.notfound{padding:80px 0;text-align:center;}

/* ==========================================================================
   PORT ADDITIONS
   Everything below is new, and exists only to satisfy decisions taken after
   the prototype was approved. Nothing above this band has been restyled.
   ========================================================================== */

/* --- Composite variant swatches -------------------------------------------
   13 of the 35 references carry a composite colour such as "#7B1FA2/#D32F2F".
   That is not a valid background-color, so composites are rendered as a hard
   135° split via background-image. Single colours keep background-color.
   Both are set from JS as inline style; these rules only guarantee that a
   swatch never collapses if a colour fails to parse.                        */
.sw{background-color:var(--dial-pure);background-repeat:no-repeat;background-size:100% 100%;}

/* Accessible labelling: colour is never the only indicator. Each swatch
   carries the literal hex in its aria-label and a visible ordinal below. */
.swpos{
  font-family:var(--data);font-variant-numeric:tabular-nums;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mist-text);margin-top:6px;
}
.swhex{
  font-family:var(--data);font-size:12px;letter-spacing:.04em;color:var(--slate);
}

/* --- Brand filter ---------------------------------------------------------
   Fifth filter group on the shop page. Reuses .fgroup/.check wholesale;
   only the count badge needed a tabular figure so the column stays straight. */
.check span.cap{font-family:var(--data);font-variant-numeric:tabular-nums;font-size:11.5px;}

/* --- Legacy live-rating components ----------------------------------------
   Kept for stores that later switch the sample-review block to live ratings. */
.rateempty{
  display:grid;place-items:center;text-align:center;
  border:1px solid var(--rule-dark);padding:36px 24px;
}
.rateempty .h3{color:var(--dial);margin-bottom:8px;}
.ratebar{display:flex;align-items:center;gap:12px;}
.ratebar__track{flex:1;height:2px;background:var(--rule-dark);position:relative;}
.ratebar__fill{position:absolute;inset:0 auto 0 0;background:var(--blued-lift);width:0;}
.ratebar .v{font-family:var(--data);font-variant-numeric:tabular-nums;font-size:13px;color:var(--dial);min-width:2ch;text-align:right;}

/* --- Gallery lightbox -----------------------------------------------------
   Keyboard navigable, focus trapped, Esc to close.                          */
.lbox{
  position:fixed;inset:0;z-index:100;background:rgba(22,25,29,.94);
  display:none;place-items:center;padding:clamp(16px,4vw,64px);
}
.lbox.is-open{display:grid;}
.lbox__fig{margin:0;max-width:min(1100px,100%);max-height:100%;display:grid;gap:16px;}
.lbox__fig img{max-height:78vh;width:auto;margin:0 auto;object-fit:contain;}
.lbox__cap{font-family:var(--data);font-size:11.5px;letter-spacing:.06em;color:var(--whisper);text-align:center;}
.lbox__x{
  position:absolute;top:20px;right:20px;color:var(--dial);
  min-height:var(--tap);min-width:var(--tap);display:grid;place-items:center;
  font-family:var(--data);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
}
.lbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);color:var(--dial);
  min-height:var(--tap);min-width:var(--tap);display:grid;place-items:center;font-size:22px;
}
.lbox__nav--prev{left:12px;} .lbox__nav--next{right:12px;}
.galmain{cursor:zoom-in;}

/* --- Checkout success -----------------------------------------------------
   No confetti. A ruled receipt and a reference number.                       */
.done{max-width:620px;margin:0 auto;text-align:center;padding:clamp(48px,8vw,96px) 0;}
.done__ref{
  font-family:var(--data);font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;
  color:var(--slate);border:1px solid var(--rule);background:var(--dial-pure);
  padding:14px 20px;display:inline-block;margin:24px 0 32px;
}

/* --- Demo notice ----------------------------------------------------------
   This storefront never places a real order; say so where it matters.        */
.demonote{
  font-size:12px;letter-spacing:.04em;color:var(--mist);
  border-left:1px solid var(--rule);padding-left:12px;
}
.ink .demonote{border-left-color:var(--rule-dark);}

/* --- Skip link ------------------------------------------------------------ */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--graphite);color:var(--dial);
  padding:14px 20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus{left:0;}

/* --- Newsletter feedback --------------------------------------------------- */
.sub__say{margin:10px 0 0;}
.ink .sub__say.is-bad{color:var(--alert-lift);}
.sub__say.is-bad{color:var(--alert);}
.sub input:disabled,.sub button:disabled{opacity:.55;cursor:default;}

/* --- Footer tap targets --------------------------------------------------- */
/* .ft ul a already sets min-height:44px, which was enough while every label was
   a long word. The rebuilt Client care column added "Terms" — 39px wide, so
   44 tall but under the WCAG 2.5.5 minimum on the other axis. The anchor has no
   background or underline, so widening the hit area changes nothing visually. */
.ft ul a{min-width:var(--tap);}

/* --- Content pages (about-us, terms, privacy, contact-us) ----------------- */
/* Long-form policy copy. One measured column; the page head carries the title
   so the prose starts at h2 and the heading hierarchy stays honest. */
.pghead{background:var(--graphite);color:var(--dial);padding:74px 0 62px;}
.pghead .h1{margin-bottom:14px;}
.pghead__meta{
  font-family:var(--data);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--whisper);
}

/* One measure, one axis. The title block and the body share this column so the
   page reads as a composed page rather than as text that ran out. Left-aligned
   at 72ch it sat 660px wide with ~600px of dead space beside it at 1440, and
   the h1 ran the full 1256px — title and body on two different axes. */
.pgcol,.prose{max-width:700px;margin-inline:auto;}

/* 700px at the 16px UI size measures ~104 characters, well past the readable
   band. Long-form reading carries larger type than interface text, so the
   column holds its width and the type grows into it: ~79 characters at 700px. */
.prose{font-size:21px;}
.prose>*+*{margin-top:22px;}
.prose p{color:var(--slate);line-height:1.68;}
.prose strong{color:var(--graphite);font-weight:600;}

.prose h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(23px,2.5vw,30px);line-height:1.16;
  color:var(--graphite);margin-top:54px;padding-top:22px;
  border-top:1px solid var(--rule);
  /* Sticky header is ~103px once condensed (63px plus the wordmark row,
     which stays visible in every header state so toggling it never shifts
     already-scrolled content); keep anchored headings clear of it. Kept
     with headroom below the check's ceiling to absorb the cold-load font
     reflow drift that grows with how much prose sits above the heading. */
  scroll-margin-top:135px;
}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0;}
.prose h3{
  font-family:var(--body);font-weight:600;font-size:18px;
  letter-spacing:.01em;color:var(--graphite);margin-top:34px;
}

.prose a{color:var(--blued);text-decoration:underline;text-underline-offset:3px;}
.prose a:hover{color:var(--blued-lift);}

.prose ul{list-style:none;padding:0;margin-top:16px;}
.prose li{
  position:relative;padding-left:26px;margin-top:11px;
  color:var(--slate);line-height:1.62;
}
/* Minute marker rather than a bullet — the same mark the rail and rules use. */
.prose li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:9px;height:1px;background:var(--blued);
}

.prose table{
  width:100%;border-collapse:collapse;margin-top:26px;
  font-size:17px;
}
.prose th,.prose td{
  text-align:left;padding:12px 16px 12px 0;
  border-bottom:1px solid var(--rule);vertical-align:top;
}
.prose th{
  font-family:var(--data);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mist-text);font-weight:400;
  padding-bottom:9px;
}
.prose td:first-child{color:var(--graphite);padding-right:32px;}
.prose td:last-child,.prose th:last-child{padding-right:0;}
/* Two-column tables with no header row (contact response times) read as a
   definition list; drop the empty header instead of rendering a blank strip. */
.prose thead.is-empty{display:none;}

/* An unfilled token is deliberate — Fashioni has no verified contact details.
   Marked visibly so it can never be mistaken for a real address. */
.tok{
  font-family:var(--data);font-size:16px;
  background:var(--dial);border:1px dashed var(--rule);
  border-radius:var(--radius);padding:1px 7px;color:var(--mist-text);
  white-space:nowrap;
}

.prose .demobanner{
  border:1px solid #E0A800;background:#FFF8E1;border-radius:var(--radius);
  padding:16px 18px;margin-bottom:38px;line-height:1.6;
}
.prose .demobanner b{display:block;color:#6E4E00;font-size:15px;margin-bottom:5px;}
.prose .demobanner span{color:#4A3600;font-size:14px;}
.prose .demobanner strong{color:#4A3600;}

@media (max-width:700px){
  .pghead{padding:52px 0 44px;}
  /* The column is viewport-bound below 700px, so the type comes back down to
     keep the measure from collapsing to ~30 characters on a phone. */
  .prose{font-size:17px;}
  .prose table{font-size:15px;}
  .prose td:first-child{padding-right:18px;}
  .tok{font-size:14px;}
}

/* --- Search and account sheets -------------------------------------------- */
/* Same right-hand sheet as the bag, so there is one panel idiom on the site
   rather than three. .drawer stays the full-screen mobile nav. */
.sheet{
  position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);z-index:90;
  background:var(--dial-pure);border-left:1px solid var(--rule);
  transform:translateX(100%);transition:transform var(--mid) var(--ease);
  display:flex;flex-direction:column;
}
.sheet.is-open{transform:none;}
.sheet__hd{
  display:flex;justify-content:space-between;align-items:center;
  padding:24px;border-bottom:1px solid var(--rule);
}
.sheet__pad{padding:24px 24px 20px;border-bottom:1px solid var(--rule);}
.sheet__body{flex:1;overflow:auto;overscroll-behavior:contain;padding:8px 24px 24px;}

.sheet input[type="search"]{
  width:100%;height:var(--tap);background:none;
  border:0;border-bottom:1px solid var(--rule);
  font-size:17px;padding:4px 0;
}
.sheet input[type="search"]:focus{border-bottom-color:var(--blued);outline:none;}

/* Result rows mirror .cart__row so a product reads the same in both sheets. */
.sres{
  display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--rule);min-height:var(--tap);
}
.sres__art{width:56px;height:56px;background:var(--dial);position:relative;overflow:hidden;}
.sres__art img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain;}
.sres b{display:block;font-family:var(--display);font-size:16px;font-weight:400;}
.sres .cap{display:block;margin-top:2px;}
.sres:hover b{color:var(--blued);}
.sres__price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:14px;white-space:nowrap;}
.sres__price s{color:var(--slate);font-size:11px;font-weight:400;}
.sale-countdown--search{left:2px;top:2px;min-width:0;min-height:0;padding:3px 4px;box-shadow:0 2px 6px rgba(17,17,17,.12);}
.sale-countdown--search b{display:none;}
.sale-countdown--search [data-sale-timer]{font-size:7px;letter-spacing:0;}
.sres.has-timed-sale .sres__art img{inset:8px 4px 2px;width:calc(100% - 8px);height:calc(100% - 10px);}

.sempty{padding:36px 0;text-align:center;}

/* Account */
.acct{padding:16px 0;}
.acct__id{display:flex;gap:14px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--rule);}
.acct__av{width:52px;height:52px;border-radius:50%;background:var(--dial);object-fit:cover;}
.acct__nm{font-family:var(--display);font-size:20px;}
.acct__row{
  display:flex;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--rule);font-size:14px;
}
.acct__row span:first-child{color:var(--mist-text);}

/* --- Reviews --------------------------------------------------------------- */
/* The label is not an apology. It reads as a deliberate statement of what this
   block is, the same way the demo banner does on the policy pages. */
.samplenote{
  display:inline-block;margin:0 0 34px;
  border-left:2px solid var(--blued);padding:6px 0 6px 14px;
  font-size:13px;letter-spacing:.02em;color:var(--slate);
}

/* A column here stood 212px tall against a 65px heading, so it loomed 148px
   above the words it belongs to. Laid out as a row it matches the heading. */
.revsum{display:flex;align-items:center;gap:26px;}
.revsum__score{text-align:right;}
.revsum__avg{
  font-family:var(--display);font-size:46px;line-height:1;margin:0;
  font-variant-numeric:tabular-nums;
}
.revsum__avg span{font-size:19px;color:var(--mist-text);margin-left:2px;}
.stars{letter-spacing:.12em;color:var(--blued);}

.revbars{display:flex;flex-direction:column;gap:5px;width:150px;}
.revbar{display:grid;grid-template-columns:12px 1fr 20px;gap:9px;align-items:center;}
.revbar__n,.revbar__c{
  font-family:var(--data);font-size:11px;color:var(--mist-text);
  font-variant-numeric:tabular-nums;
}
.revbar__c{text-align:right;}
.revbar__track{height:3px;background:var(--rule);position:relative;}
.revbar__fill{position:absolute;inset:0 auto 0 0;background:var(--blued);}

.revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);}
.revgrid>*{min-width:0;}
.rev{background:var(--dial-pure);margin:0;padding:30px 28px;display:flex;flex-direction:column;gap:14px;}
.rev__stars{margin:0;font-size:15px;}
.rev blockquote{margin:0;color:var(--slate);line-height:1.66;font-size:15px;}
.rev figcaption{margin-top:auto;}

@media (max-width:1023px){
  .revgrid{grid-template-columns:repeat(2,1fr);}
  .revsum{align-items:flex-start;}
}
@media (max-width:560px){
  .revsum{flex-direction:column;align-items:flex-start;gap:14px;}
  .revsum__score{text-align:left;}
}

/* Fashioni editorial retail refinements. */
.fashioni-navrow{display:block!important;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:rgba(255,255,255,.96);}
.fashioni-cats{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
.fashioni-cat__art img{max-height:100%;object-fit:contain;}
.campaign-hero h1,.section-heading h2,.pghead h1,.pinfo h1,.article__hero h1{font-family:var(--display);font-weight:700;letter-spacing:-.035em;}
.campaign-hero__image{object-fit:contain;object-position:74% 50%;padding:clamp(24px,5vw,76px);background:linear-gradient(135deg,var(--theme-hero),var(--theme-deep));}
.promo-card img{object-fit:contain;padding:34px;background:linear-gradient(145deg,var(--theme-deep),var(--theme-hero));}
.size-options{margin:24px 0 8px;}
.size-options__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.size-guide-link{min-height:44px;padding:0 8px;font-size:12px;text-decoration:underline;text-underline-offset:3px;}
.size-options__grid{display:flex;flex-wrap:wrap;gap:8px;}
.sizeopt{min-width:52px;min-height:44px;padding:8px 12px;border:1px solid var(--rule);border-radius:3px;background:#fff;color:var(--graphite);font:600 12px/1 var(--body);text-transform:uppercase;cursor:pointer;}
.sizeopt:hover,.sizeopt:focus-visible{border-color:var(--theme-primary);outline:none;}
.sizeopt.is-on{border-color:var(--graphite);background:var(--graphite);color:#fff;}
@media (max-width:1100px){.fashioni-cats{grid-template-columns:repeat(3,minmax(0,1fr))!important;}}
@media (max-width:760px){.fashioni-navrow{display:none!important;}.fashioni-cats{grid-template-columns:repeat(2,minmax(0,1fr))!important;}.campaign-hero__image{object-position:center 20%;padding:24px 32px 130px;}.sizeopt{min-height:46px;}}

/* Final target-size overrides, intentionally last in the cascade. */
:where(.hdr,.ft,.drawer,.cart,.sheet) a,
:where(.hdr,.ft,.drawer,.cart,.sheet) button{min-width:44px!important;min-height:44px!important;display:inline-flex;align-items:center;}
.price-field input{min-height:44px!important;}
.pdetail a,.crumb a,.btn--text{min-height:44px!important;display:inline-flex;align-items:center;}
.sdbar__in{min-height:44px!important;}
.home-review-card .review-stars{color:#8A4B08;}
.btn--buy{background:#8A2718;border-color:#8A2718;color:#fff;}

/* Production accessibility pass: compact navigation and filter controls keep
   a 44px pointer target without inflating links inside editorial prose. */
:where(.hdr, .ft, .drawer, .cart, .sheet) a,
:where(.hdr, .ft, .drawer, .cart, .sheet) button {
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.price-field input{min-height:44px;}
.pdetail a,.crumb a,.btn--text{min-height:44px;display:inline-flex;align-items:center;}
@media (max-width:640px){
  .revgrid{grid-template-columns:1fr;}
  .revsum__avg{font-size:38px;}
}

/* --- Journal --------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:44px;}
.chip{
  display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);
  padding:0 18px;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--dial-pure);font-size:13px;letter-spacing:.02em;
  transition:border-color var(--fast),color var(--fast);
}
.chip span{
  font-family:var(--data);font-size:11px;color:var(--mist-text);
  font-variant-numeric:tabular-nums;
}
.chip:hover{border-color:var(--blued);}
.chip.is-on{border-color:var(--blued);color:var(--theme-primary-hover);}
.chip.is-on span{color:var(--theme-primary-hover);}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px;}
.posts>*{min-width:0;}
.post{display:flex;flex-direction:column;}
.post__art{
  aspect-ratio:16/9;position:relative;overflow:hidden;
  background:var(--dial-pure);border:1px solid var(--rule);margin-bottom:20px;
}
.post__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--slow) var(--ease);}
.post:hover .post__art img{transform:scale(1.03);}
.post__meta{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 10px;
  font-family:var(--data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist-text);
}
.post__cat{color:var(--blued);}
.post__title{
  font-family:var(--display);font-size:22px;font-weight:400;line-height:1.2;
  margin:0 0 10px;
}
.post:hover .post__title{color:var(--blued);}
.post__ex{margin:0;font-size:14.5px;line-height:1.62;color:var(--slate);}

/* Article cover. 16:9 like the listing, contained by the same rules as every
   other image on the site. */
.artcover{
  aspect-ratio:16/9;position:relative;overflow:hidden;
  background:var(--dial-pure);border:1px solid var(--rule);
  max-width:900px;margin:0 auto 48px;
}
.artcover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* The category eyebrow is a link at 11px, so its box measured 111x12 — under
   WCAG 2.5.5 on both axes. Give the anchor a real target and pull the eyebrow's
   own margin in, so the header spacing stays where it was. */
[data-article-cat] a{
  color:inherit;text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;
  min-height:var(--tap);min-width:var(--tap);
}
[data-article-cat]:has(a){margin-bottom:0;}
.prose figure{margin:32px 0;}
.prose figure img{width:100%;height:auto;}

@media (max-width:1023px){ .posts{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .posts{grid-template-columns:1fr;gap:36px;} }


/* --- Hero: photograph ------------------------------------------------------
   The frame is black across its left ~40%, which is where the copy sits. There
   is deliberately NO gradient scrim: if the text ever needed one, the crop has
   drifted and the crop is what should be fixed.

   object-position is set so BOTH wrists stay in frame. The measured dials are
   at 65.4% and 80.7% across, so the right edge is the constraint — as the
   viewport narrows, cover crops the sides and the woman's wrist leaves first.
   Holding the crop right-of-centre keeps both until the layout switches. */
.hero{position:relative;min-height:min(68vh,720px);display:flex;align-items:center;overflow:hidden;}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:72% 50%;
  /* the source is already near-black at the left; nothing is painted over it */
}
/* The copy layer spans the full hero, so left to itself it intercepts clicks
   destined for a marker. Only the copy column should take pointer events. */
.hero__grid{position:relative;z-index:2;width:100%;pointer-events:none;}
.hero__copy{pointer-events:auto;}
.hero__copy{max-width:34rem;}

/* Re-derived for the new photograph: the couple sits further LEFT in this file
   than in the previous one, so the old 60/68% crops ran the copy onto the man.
   Lower X shows more of the empty left band and pushes the subjects right.
   Bounded on the other side by the woman's wrist at 77.4% of the file, which
   must stay in frame — at 1024 those two constraints were 16px apart, which is
   why the copy narrows there too. */
@media (min-width:951px){  .hero__media img{object-position:44% 50%;} }
@media (min-width:1200px){ .hero__media img{object-position:26% 50%;} }
@media (min-width:1400px){ .hero__media img{object-position:46% 50%;} }

@media (max-width:1399px) and (min-width:951px){
  .hero .h-hero{font-size:clamp(38px,6.1vw,66px);}
  .hero .lede{max-width:34ch;}
  .hero__copy{max-width:28rem;}
}
/* Below 1200 the two constraints — copy clear of the man, woman's wrist still
   in frame — close to within a few pixels. The copy gives up the difference. */
@media (max-width:1199px) and (min-width:951px){
  .hero .h-hero{font-size:clamp(36px,5.6vw,58px);}
  .hero .lede{max-width:30ch;font-size:15px;}
  .hero__copy{max-width:23rem;}
}

/* --- Hero markers -----------------------------------------------------------
   Ported from the approved mockup. A 44px button whose visible part is an 11px
   dot, sitting on the bracelet BELOW each case so it never covers the product.
   The card opens on click, floats over the photograph, and flips below the dot
   when there is no room above it. */
.hero__spots{position:absolute;inset:0;z-index:4;pointer-events:none;}

.hspot{
  position:absolute;transform:translate(-50%,-50%);pointer-events:auto;
  width:var(--tap);height:var(--tap);display:grid;place-items:center;
  border:0;background:none;padding:0;
}
.hspot i{
  width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.92);
  box-shadow:0 0 0 3px rgba(255,255,255,.22),0 1px 4px rgba(0,0,0,.5);
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.hspot:hover i,.hspot[aria-expanded="true"] i{
  transform:scale(1.25);
  box-shadow:0 0 0 6px rgba(255,255,255,.28),0 1px 6px rgba(0,0,0,.5);
}
.hspot:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:50%;}
.hspot i::after{
  content:"";position:absolute;width:var(--tap);height:var(--tap);border-radius:50%;
  border:1px solid rgba(255,255,255,.45);opacity:0;
  animation:hpulse 3.2s var(--ease) infinite;
}
@keyframes hpulse{0%{transform:scale(.5);opacity:.7}70%{transform:scale(1);opacity:0}100%{opacity:0}}

.hcard{
  position:absolute;z-index:5;width:300px;pointer-events:auto;
  /* .hero carries .ink, so without this the card inherits light text and
     renders nearly invisible on its own light ground. */
  color:var(--graphite);
  background:rgba(233,236,238,.97);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.5);box-shadow:0 18px 44px rgba(0,0,0,.45);
  padding:16px;display:none;transform:translateY(6px);opacity:0;
  transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.hcard.is-on{display:block;}
.hcard.is-in{opacity:1;transform:none;}
.hcard__row{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:center;}
.hcard__row img{width:76px;height:76px;object-fit:contain;background:#fff;border:1px solid var(--rule);}
.hcard__k{
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist-text);margin:0 0 4px;
}
.hcard b{font-family:var(--display);font-weight:400;font-size:18px;display:block;line-height:1.2;}
.hcard .price{font-size:14px;margin-top:6px;display:block;}
.hcard__go{
  display:flex;align-items:flex-end;min-height:var(--tap);
  margin-top:10px;padding-top:12px;border-top:1px solid var(--rule);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);
}
.hcard__go:hover{color:var(--blued);}
.hcard__x{
  position:absolute;top:2px;right:2px;width:var(--tap);height:var(--tap);
  border:0;background:none;color:var(--mist-text);font-size:17px;line-height:1;
}
.hcard::before{
  content:"";position:absolute;width:10px;height:10px;
  background:rgba(233,236,238,.97);
  border-left:1px solid rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.5);
  transform:rotate(45deg);
}
.hcard[data-side="below"]::before{top:-6px;left:var(--ax,34px);}
.hcard[data-side="above"]::before{bottom:-6px;left:var(--ax,34px);transform:rotate(225deg);}

@media (prefers-reduced-motion:reduce){
  .hspot i,.hcard{transition:none;}
  .hspot i::after{animation:none;}
  .hspot:hover i,.hspot[aria-expanded="true"] i{transform:none;}
}

/* auto-fit rather than a fixed max-width, so the row does not sit half empty */
.heromob{padding-top:clamp(40px,5vw,64px);}
.heromob .pgrid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,2vw,32px);}

/* --- Hero below 950 ---------------------------------------------------------
   Stack instead of overlay. At this width object-fit:cover zooms the 16:9 frame
   so hard that the empty left band is cropped away entirely and the copy lands
   on a face. The picture gets its own 4:5 box cropped to the RIGHT half, where
   both people are — a centred crop pushes the woman off the edge — and the copy
   sits on graphite beneath it. Hotspots are dropped; the cards carry the
   products.

   The mockup stacks at 900. Measured against THIS photograph the overlay stops
   working at about 950: below it, no object-position keeps the copy clear of the
   man and the woman's wrist inside the frame at the same time — at 901 the two
   constraints leave a single viable value, and under that none. So the switch
   happens where the geometry actually fails, not where the mockup guessed. */
@media (max-width:950px){
  .hero{min-height:0;display:flex;flex-direction:column;background:var(--graphite);}
  .hero__media{position:relative;inset:auto;aspect-ratio:4/5;}
  .hero__media img{width:100%;height:100%;object-position:78% 38%;}
  .hero__grid{position:static;padding-block:32px 8px;}
  .hero__copy{max-width:none;}
  .hero__spots{display:none;}
}

/* Inline text button that reads as a link but is a real <button>. */
.linkish{color:var(--blued);text-decoration:underline;text-underline-offset:3px;font:inherit;
  min-height:var(--tap);min-width:var(--tap);padding:0 2px;}
.linkish:hover{color:var(--blued-lift);}

/* Load more. A button, not infinite scroll — the footer carries seven real
   destinations and infinite scroll takes it away from people. */
.loadmore{display:flex;flex-direction:column;align-items:center;gap:14px;padding:52px 0 8px;}

/* --- Header nav at the narrow end of desktop --------------------------------
   Adding Journal made four items where three fitted. Below ~1200 "Haute
   Horlogerie" and "Client Care" wrapped to two lines and sat hard against the
   wordmark — no overflow, no contrast failure, so the audit passed while the
   header read as broken. Tighten the tracking and gap, and forbid wrapping so
   the failure would be visible rather than silent. */
.nav a{white-space:nowrap;}
@media (max-width:1340px){
  .nav{gap:20px;}
  .nav a{font-size:11px;letter-spacing:.08em;}
}
@media (max-width:1120px){
  .nav{gap:13px;}
  .nav a{font-size:10.5px;letter-spacing:.03em;}
  /* Client Care lives in the footer too; at this width the wordmark needs the
     room more than a fourth nav item does. */
  .nav a:last-child{display:none;}
}

/* "from" on a card whose variants carry different prices. Two references range
   $16,400 above their base, and a flat figure there is a price the customer
   will not be charged. */
.price__from{
  font-family:var(--body);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist-text);margin-right:4px;
}

/* --- Image swatches ---------------------------------------------------------
   15.2% of the catalogue carries a variant image, but those ten references are
   the ones customers land on from the hero — so a photograph is used wherever
   one exists and a colour circle carries the rest. A brown strap and a steel
   bracelet are different objects, not different colours, and a dot cannot say
   that; where the shop has not supplied a photograph the dot is still the
   honest fallback.

   The accessible label stays the hex. Selldone generates colour names at render
   time rather than storing them, so a name here would be invented. The visible
   "Finish 2 of 5" ordinal is what keeps colour from being the only indicator. */
.sw--img{
  width:52px;height:52px;border-radius:var(--radius);overflow:visible;
  background:var(--dial-pure);border:1px solid var(--rule);position:relative;padding:0;
}
.sw--img img{width:100%;height:100%;object-fit:contain;border-radius:var(--radius);}
.sw--img.is-on{border-color:var(--blued);box-shadow:0 0 0 2px var(--blued);}
/* the colour still shows, as a corner dot, so the finish is readable at a glance */
.sw__dot{
  position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--dial-pure);
}
.swsku{
  font-family:var(--data);font-size:11px;letter-spacing:.06em;color:var(--mist-text);
  margin-left:10px;
}

/* Sign-in setup guidance. Amber, matching the demo-content banner on the policy
   pages exactly (#E0A800 on #FFF8E1) rather than the mockup's slightly different
   tint — one amber across the site reads as one category of message. Full
   border with a heavier left edge, so it is unmistakably not shop chrome. */
.setupnote{
  margin-top:26px;background:#FFF8E1;border:1px solid #E0A800;
  border-left:3px solid #E0A800;border-radius:var(--radius);padding:16px 18px;
}
.setupnote__k{
  display:block;margin-bottom:8px;font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:#6E4E00;
}
.setupnote p{margin:0;font-size:13.5px;line-height:1.6;color:#4A3600;}
.setupnote p + p{margin-top:10px;font-weight:500;color:#3D2C00;}
.setupnote b{font-weight:600;color:#3D2C00;}

/* "Made with Selldone" — platform credit, not shop chrome. Light on purpose:
   the announcement bar below it is dark, and two dark bars stacked read as one
   heavy block. Deliberately outside the sticky header so it scrolls away and
   the stuck-header height (which .filters and .pinfo offset from) is unchanged. */
.sdbar{
  position:relative;z-index:80;background:#FFFAF0;border-bottom:1px solid var(--rule);
}
.sdbar__in{
  margin:0 auto;max-width:var(--maxw);padding:7px var(--pad);
  min-height:38px;position:relative;display:flex;align-items:center;justify-content:center;
  gap:6px;text-align:center;font-family:"Archivo",ui-sans-serif,system-ui,sans-serif;
  font-size:12px;font-weight:500;letter-spacing:0;color:#101010;line-height:16px;
}
.sdbar__hx{width:13px;height:13px;display:block;flex:0 0 13px;fill:#E0102A;color:#E0102A;}
.sdbar__made{color:#101010;}
.sdbar a{
  color:#6B30C9;font-weight:700;text-decoration:none;
  display:inline-flex;align-items:center;min-height:24px;padding:4px 0;margin:-4px 0;
}
.sdbar a:hover{color:#51239B;text-decoration:underline;text-underline-offset:2px;}
.theme-picker{
  position:absolute;top:50%;right:var(--pad);transform:translateY(-50%);
  display:block;letter-spacing:0;text-transform:none;color:var(--graphite);text-align:left;
}
.theme-picker__trigger{
  width:122px;height:36px;display:flex;align-items:center;gap:8px;padding:0 10px;
  border:1px solid var(--rule);border-radius:999px;background:#fff;color:var(--graphite);
  font:600 12px/1 var(--body);
}
.theme-picker__trigger:hover{border-color:var(--mist);background:var(--theme-soft);}
.theme-picker__trigger:focus-visible,.theme-picker__item:focus-visible{outline:2px solid var(--theme-primary);outline-offset:2px;}
.theme-picker__trigger svg{width:16px;height:16px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:1.7;transition:transform .2s ease;}
.theme-picker__trigger[aria-expanded="true"] svg{transform:rotate(180deg);}
.theme-picker__swatch{
  width:17px;height:17px;flex:0 0 17px;border-radius:50%;background:var(--swatch);
  box-shadow:0 0 0 1px rgba(16,24,40,.12);
}
.theme-picker__menu{
  position:absolute;top:calc(100% + 9px);right:0;width:310px;padding:14px;
  border:1px solid var(--rule);border-radius:18px;background:#fff;
  box-shadow:0 22px 50px rgba(16,24,40,.18);
}
.theme-picker__menu[hidden]{display:none;}
.theme-picker__title{display:block;padding:4px 10px 9px;color:var(--mist-text);font:700 10px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;}
.theme-picker__item{
  width:100%;min-height:62px;display:grid;grid-template-columns:18px 1fr 18px;align-items:center;gap:12px;
  padding:9px 10px;border-radius:11px;background:transparent;text-align:left;color:var(--graphite);
}
.theme-picker__item:hover{background:var(--theme-soft);}
.theme-picker__item strong,.theme-picker__item small{display:block;}
.theme-picker__item strong{font:600 15px/1.25 var(--body);}
.theme-picker__item small{margin-top:4px;color:var(--mist-text);font:400 12px/1.35 var(--body);}
.theme-picker__check{color:var(--theme-primary);font:700 17px/1 var(--body);opacity:0;}
.theme-picker__item[aria-checked="true"] .theme-picker__check{opacity:1;}

/* Template banner. Above everything, including the platform credit: until the
   config names a real shop, "these are not your products" outranks every other
   message on the page. Same amber as the demo banner and the sign-in callout —
   one amber across the site, meaning one category of message. */
.tplbanner{
  background:#FFF8E1;border-bottom:2px solid #E0A800;
  /* Clears the fixed index rail, exactly as .page does. Without this the rail
     sits over the first ~56px and eats the start of every line. */
  margin-left:var(--rail);
}
@media (max-width:950px){ .tplbanner{margin-left:0;} }
.tplbanner__in{
  margin:0 auto;max-width:var(--maxw);padding:11px var(--pad);
  font-size:13.5px;line-height:1.5;color:#4A3600;
}
.tplbanner__in b{display:block;font-weight:600;color:#3D2C00;}
.tplbanner__in span{display:block;}

/* Collections grid adapts to how many categories the shop actually has, so a
   set of 3, 5, 7 or 10 never leaves one tile orphaned on its own row.
   Below 3 the section is hidden entirely by home.js. */
#catgrid[data-n="3"]{grid-template-columns:repeat(3,1fr);}
#catgrid[data-n="4"]{grid-template-columns:repeat(4,1fr);}
#catgrid[data-n="5"],
#catgrid[data-n="6"]{grid-template-columns:repeat(3,1fr);}
#catgrid[data-n="7"],
#catgrid[data-n="8"]{grid-template-columns:repeat(4,1fr);}
#catgrid[data-n="9"],
#catgrid[data-n="10"]{grid-template-columns:repeat(5,1fr);}
@media (max-width:1100px){
  #catgrid[data-n="7"],#catgrid[data-n="8"],
  #catgrid[data-n="9"],#catgrid[data-n="10"]{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:820px){ #catgrid[data-n]{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ #catgrid[data-n]{grid-template-columns:1fr;} }

/* Hero in plate or slides mode: a product photograph, contained never cropped. */
.hero__plate{object-fit:contain !important;padding:4%;}

/* ==========================================================================
   Fashioni 2026 — high-clarity fashion retail system
   ========================================================================== */
:root{
  --graphite:#111111;
  --slate:#344054;
  --mist:#98A2B3;
  --mist-text:#667085;
  --whisper:#D0D5DD;
  --dial:#FFFFFF;
  --dial-pure:#FFFFFF;
  --rule:#DEDEDE;
  --rule-dark:#3D3D3D;
  /* Sweet Melina's palette, matched directly to daffyapple.com's actual
     theme tokens (read from its live --color-* CSS custom properties, not
     eyeballed): white canvas, near-black ink, and exactly one red used for
     every button, link, and dark section — Daffy has no second "deep" red
     and no pink secondary accent, so neither do we. */
  --theme-primary:#EE2529;
  --theme-primary-hover:#C71D20;
  --theme-deep:#EE2529;
  /* Darker than --theme-primary specifically so white hero text (the eyebrow
     and lede, not large enough to qualify for the 3:1 large-text exemption
     like the H1 does) clears 4.5:1 — same red family, not a new color. */
  --theme-hero:#C71D20;
  --theme-accent:#EE2529;
  --theme-soft:#E7E7E7;
  --theme-light:#FFFFFF;
  --theme-footer:#111111;
  --theme-hero-overlay:rgba(199,29,32,.9);
  --blued:var(--theme-primary);
  --blued-lift:#C71D20;
  --brass:var(--theme-accent);
  --stock:#027A48;
  --alert:#B42318;
  --display:"Work Sans",system-ui,sans-serif;
  --body:"Work Sans",system-ui,-apple-system,sans-serif;
  --radius:12px;
  --rail:0px;
  --maxw:1480px;
}

body{background:var(--dial);color:var(--graphite);font-size:15px;}
.page,.fashioni-page{margin-left:0;padding-left:0;}
.wrap{width:100%;}
h1,h2,h3,.h1,.h2,.h3,.h-hero{font-family:var(--display);font-weight:700;letter-spacing:-.035em;}
.section{padding:clamp(58px,7vw,96px) 0;}
.eyebrow{font-family:var(--data);font-size:10px;font-weight:600;letter-spacing:.16em;}
.btn{border-radius:999px;font-family:var(--body);font-weight:700;letter-spacing:0;}
/* The exact-matched Daffy red (--blued) is ~3.9:1 against white text — under
   the 4.5:1 AA minimum for normal-size text. The darker --theme-primary-hover
   passes (~5.9:1) and is already the same brand red family, so it's the
   resting button color; the brighter red becomes the hover state instead of
   the reverse, rather than inventing a new color. */
.btn--primary,.btn--full{background:var(--theme-primary-hover);border-color:var(--theme-primary-hover);color:#fff;}
.btn--primary:hover,.btn--full:hover{background:var(--blued);border-color:var(--blued);}
.btn--light{background:#fff;border:1px solid #fff;color:var(--graphite);}
.btn--light:hover,.btn--light:focus-visible{color:#fff;}
.text-link{min-height:44px;display:inline-flex;align-items:center;font-weight:700;color:var(--theme-primary-hover);}

.sdbar{background:#FFFAF0;}
.hdr{background:#fff;border-bottom:1px solid var(--rule);box-shadow:0 1px 8px rgba(16,24,40,.04);}
.hdr__in{height:68px;grid-template-columns:1fr auto;gap:24px;}
.fashioni-logo,.logo{font-family:var(--body);font-weight:800;font-size:28px;letter-spacing:-.06em;text-transform:uppercase;}
.fashioni-logo span,.logo span{color:var(--theme-accent);}
.header-nav{justify-self:center;justify-content:center;gap:clamp(12px,1.35vw,25px);min-width:0;white-space:nowrap;}
.header-nav a{font-size:clamp(10px,.72vw,12px);font-weight:600;letter-spacing:.07em;}
.hdr__tools{display:flex;align-items:center;justify-content:flex-end;gap:6px;}
.header-search{width:132px;height:44px;min-width:0;border:1px solid #C9D2E1;border-radius:8px;background:#F9FAFB;display:flex;align-items:center;gap:9px;padding:0 12px;color:var(--mist-text);text-align:left;}
.header-search span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.header-search:hover{border-color:var(--blued);background:#fff;}
.header-search svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;flex:0 0 auto;}
.hdr__act{gap:10px;}
.iconbtn{border-radius:8px;}
.iconbtn:hover{background:var(--theme-soft);}
.fashioni-navrow{display:none!important;}
.fashioni-navrow .nav{display:flex;align-items:center;justify-content:center;width:100%;gap:30px;height:44px;overflow:auto;white-space:nowrap;scrollbar-width:none;}
.fashioni-navrow .nav::-webkit-scrollbar{display:none;}
.fashioni-navrow .nav a{font-size:13px;font-weight:600;min-height:44px;display:flex;align-items:center;}

.campaign-hero{min-height:clamp(460px,48vw,620px);height:auto;background:var(--theme-hero);color:#fff;display:flex;position:relative;overflow:hidden;align-items:center;}
.campaign-hero__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.campaign-hero__inner{position:relative;z-index:2;width:100%;display:flex;align-items:center;min-height:inherit;}
/* No boxed/colored shape behind the copy — it sits directly on the photo,
   so its own text carries a shadow for legibility instead. */
.campaign-hero__copy{width:min(520px,47vw);padding:42px;}
/* Hide the placeholder hero copy until home.js fills in the featured product,
   so "Featured / Sweet Melina's" and the unstyled buttons never flash. */
.campaign-hero:not(.is-ready) .campaign-hero__copy{visibility:hidden;}
.campaign-hero__copy .eyebrow{color:var(--theme-light);margin-bottom:14px;text-shadow:0 2px 10px rgba(0,0,0,.55);}
.campaign-hero__copy h1{font-size:clamp(40px,4.5vw,60px);font-weight:800;line-height:1.04;margin:0 0 14px;text-shadow:0 2px 14px rgba(0,0,0,.55);}
.campaign-hero__copy h1 span{display:block;white-space:normal;overflow-wrap:break-word;}
.campaign-hero__price{font-family:var(--display);font-size:calc(clamp(32px,3.4vw,40px) + 12px);font-weight:800;line-height:1;color:#fff;margin:0;text-shadow:0 2px 14px rgba(0,0,0,.55);}
.campaign-hero__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:30px;}
.campaign-hero__actions .btn{width:100%;min-width:0;justify-content:center;text-align:center;}
/* The hero background is the same red as .btn--primary's fill (true to
   Daffy, which uses one red everywhere) — a solid-red button on a solid-red
   hero has no visible edges. Daffy's own hero button is the outline/ghost
   style for exactly this reason; match that here instead of the solid fill. */
.campaign-hero__actions .btn--primary{background:transparent;border:1px solid #fff;color:#fff;}
.campaign-hero__actions .btn--primary:hover{background:rgba(255,255,255,.15);border-color:#fff;}
.campaign-hero__dots{position:absolute;z-index:4;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:9px;padding:8px 10px;border-radius:99px;background:rgba(6,22,47,.72);}
.campaign-hero__dots button{position:relative;width:44px;height:44px;margin:-18px -7px;border-radius:99px;background:transparent;}
.campaign-hero__dots button::after{content:"";position:absolute;left:8px;right:8px;top:18px;height:8px;border-radius:99px;background:rgba(255,255,255,.45);}
.campaign-hero__dots button[aria-current="true"]::after{background:#fff;}

.benefit-bar{background:#fff;border-bottom:1px solid var(--rule);}
.benefit-bar__grid{display:grid;grid-template-columns:repeat(4,1fr);}
.benefit-bar__grid>div{padding:22px 26px;border-right:1px solid var(--rule);}
.benefit-bar__grid>div:last-child{border-right:0;}
.benefit-bar b,.benefit-bar span{display:block;}
.benefit-bar b{font-size:16px;margin-bottom:3px;}
.benefit-bar span{font-size:14px;color:var(--mist-text);}

.section-heading{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:34px;}
.section-heading .eyebrow{margin:0 0 8px;color:var(--theme-primary-hover);font-size:calc(10px + 4px);}
.section-heading h2{font-size:clamp(30px,4vw,48px);line-height:1.06;}
.category-section{background:#F4F7FB;}
.fashioni-cats{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:14px!important;background:none!important;border:0!important;}
.fashioni-cat{height:294px!important;padding:0!important;display:flex!important;flex-direction:column;background:#fff!important;border:1px solid var(--rule);border-radius:12px;overflow:hidden;box-shadow:0 3px 14px rgba(16,24,40,.045);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.fashioni-cat:hover{color:var(--graphite)!important;transform:translateY(-4px);border-color:#B2CCFF;box-shadow:0 14px 28px rgba(16,24,40,.1);}
.fashioni-cat__art{height:69%;display:flex;align-items:center;justify-content:center;padding:16px 22px;background:transparent;}
.fashioni-cat__art img{width:100%!important;height:100%!important;object-fit:contain!important;margin:0!important;background:transparent!important;}
.fashioni-cat__copy{height:31%;padding:14px 16px;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--rule);}
.fashioni-cat__copy b{font-family:var(--body);font-size:16px;font-weight:700;margin:0 0 4px;}
.fashioni-cat__copy small{color:var(--mist-text);font-size:12px;}

.promo-section{padding-top:0;}
.promo-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;}
.promo-card{position:relative;min-height:390px;border-radius:16px;overflow:hidden;color:#fff;background:var(--theme-deep);}
.promo-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.promo-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(4,16,38,.88));}
.promo-card:hover img{transform:scale(1.025);}
.promo-card span{position:absolute;z-index:2;left:28px;right:24px;bottom:27px;display:flex;flex-direction:column;align-items:flex-start;}
.promo-card small,.guide-card small{font-family:var(--data);font-size:10px;text-transform:uppercase;letter-spacing:.12em;}
.promo-card b{font-size:clamp(24px,2.4vw,38px);line-height:1.05;margin:7px 0 14px;}
.promo-card em,.guide-card em{font-style:normal;font-size:13px;font-weight:700;}

.products-section{background:var(--dial);}
.scroller{gap:14px;background:transparent;border:0;scrollbar-width:none;}
/* The "Gourmet Apples" scroller drag-hid items past the first screenful,
   which read as a missing product rather than "scroll for more". It's a
   plain grid at every width instead: every apple is visible with no drag
   or scroll required — one column on a phone (a vertical list), wrapping
   to more as the screen grows. */
#arrivals{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));overflow-x:visible;cursor:default;}
.scroller::-webkit-scrollbar{display:none;}
.pcard{border:1px solid var(--rule);border-radius:12px;padding:20px;box-shadow:0 3px 14px rgba(16,24,40,.035);transition:box-shadow .25s ease,transform .25s ease;}
.pcard:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(16,24,40,.09);}
.pcard__art{border-radius:9px;background:transparent;}
.pcard__name{font-size:15px;font-weight:700;line-height:1.4;}

.guide-section{background:var(--theme-deep);color:#fff;}
.guide-section .section-heading .eyebrow{color:var(--theme-light);}
.guide-section .text-link{color:#fff;}
.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.guide-card{background:#fff;color:var(--graphite);border-radius:13px;overflow:hidden;display:block;}
.guide-card img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.guide-card span{display:flex;min-height:156px;flex-direction:column;align-items:flex-start;padding:21px;}
.guide-card small{color:var(--blued);}
.guide-card b{font-size:18px;line-height:1.3;margin:8px 0 18px;}
.guide-card em{margin-top:auto;color:var(--blued);}

.newsletter-band{background:#fff;color:var(--graphite);padding:52px 0;border-top:1px solid var(--rule);}
.newsletter-band__inner{display:flex;align-items:center;justify-content:space-between;gap:36px;}
.newsletter-band .eyebrow{color:var(--theme-primary-hover);margin-bottom:5px;font-size:calc(10px + 4px);}
.newsletter-band h2{font-size:clamp(26px,3.4vw,42px);}
.newsletter-band .sub{width:min(100%,480px);gap:8px;background:#F9FAFB;border:1px solid var(--rule);border-radius:9px;padding:5px;}
.newsletter-band .sub input{min-width:0;padding:4px 14px;color:var(--graphite);}
.newsletter-band .sub button{flex:0 0 auto;padding:0 22px;border:0;background:var(--theme-primary-hover);color:#fff;border-radius:7px;white-space:nowrap;}

.ft{background:var(--theme-footer);padding:48px 0 0;}
.ft__cols{grid-template-columns:1.5fr repeat(3,1fr);gap:36px;padding-bottom:32px;}
.ft h4{margin-bottom:10px;}
.ft ul{gap:0;}
.ft ul a{min-height:38px;}
.ft .fashioni-logo{display:block;width:100%;color:#fff;text-align:left;margin:0 0 14px!important;justify-self:start;}
.ft .lede{font-size:14px;}
.ft__brand .demonote{margin-top:14px;}
.ft__socials{display:flex;align-items:center;gap:8px;margin-top:20px;}
.ft__socials>span{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:var(--whisper);}
.ft__socials svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.ft__socials svg .fill{fill:currentColor;stroke:none;}
.ft__bar{padding:16px 0 20px;align-items:center;}
.ft__payments{display:flex;align-items:center;gap:7px;}
.ft__payment{height:27px;min-width:46px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;border:1px solid rgba(255,255,255,.22);border-radius:6px;background:rgba(255,255,255,.08);color:#fff;font:800 11px/1 var(--body);letter-spacing:.02em;}
.ft__payment--visa{font-style:italic;color:#A8C7FF;}
.ft__payment--amex{color:#B9F3FF;}
.ft__payment--mastercard{position:relative;min-width:44px;padding:0;}
.ft__payment--mastercard i{width:16px;height:16px;border-radius:50%;background:#F04438;opacity:.9;}
.ft__payment--mastercard i+i{margin-left:-6px;background:#F6B51B;}

/* Shared shop, product, checkout, blog, article and content-page treatment. */
.shop,.pdp,.checkout,.prose,.posts{position:relative;}
.filters,.pinfo,.summary,.post,.article__body,.prose{border-radius:12px;}
.filters,.pinfo,.summary{background:#fff;border:1px solid var(--rule);box-shadow:0 4px 20px rgba(16,24,40,.045);}
.pinfo{padding:24px 26px;overflow:hidden;}
.pinfo .h1{font-size:clamp(30px,3.1vw,46px);line-height:1.05;overflow-wrap:anywhere;}
/* Optical alignment: the large display glyphs carry left side-bearing that the
   11.5px REF line does not, so the title looked indented past it. */
.pinfo .h1{margin-left:-.06em;}
.pinfo .price{font-size:33px!important;font-weight:700!important;margin-top:14px!important;}
.pinfo .pline{margin:18px 0;}
.pinfo .stock{margin:14px 0 18px;}
.pinfo .pinfo-accordions{margin-top:20px;}
.pinfo .acc__hd{padding:14px 0;}
.pinfo .acc__bd{padding-bottom:18px;}
.purchase-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.purchase-actions .btn{width:100%;min-width:0;justify-content:center;text-align:center;}
.btn--buy{background:var(--theme-accent);border-color:var(--theme-accent);color:#fff;}
.btn--buy:hover{filter:brightness(.9);}
.shop-main,.product-main{padding-top:10px!important;}
.shop .filters{padding:22px 24px;box-sizing:border-box;}
.shop .listhd .h1{font-size:clamp(34px,3.2vw,48px);line-height:1.02;}
.shop .listhd{margin-bottom:24px;}
.pgrid{gap:14px;}
.shop .pgrid{background:transparent;border:0;}
@media (min-width:1280px){.shop .pgrid{grid-template-columns:repeat(4,minmax(0,1fr));}}
.shophead,.article__hero,.contenthero{background:var(--theme-deep);color:#fff;}
.finput,.fselect,input[type="search"],input[type="email"]{border-radius:8px;}
.sheet,.cart,.drawer{border-radius:16px 0 0 16px;}

.reviews-section{padding:clamp(48px,6vw,76px) 0;}
.reviews-summary{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px;}
.reviews-summary h2{font-size:clamp(30px,4vw,48px);color:#fff;}
.reviews-score{display:grid;grid-template-columns:auto auto;align-items:center;gap:3px 12px;text-align:right;}
.reviews-score strong{grid-row:1/3;font:700 44px/1 var(--display);color:#fff;}
.reviews-score small{color:var(--mist);font-size:11px;}
.review-stars{color:#F6B51B;letter-spacing:.12em;font-size:14px;white-space:nowrap;}
.reviews-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;}
.review-card{min-height:220px;padding:22px;display:flex;flex-direction:column;border:1px solid var(--rule-dark);border-radius:12px;background:rgba(255,255,255,.035);}
.review-card p{margin:18px 0 24px;color:var(--whisper);font-size:13.5px;line-height:1.6;}
.review-card footer{margin-top:auto;display:flex;flex-direction:column;gap:4px;}
.review-card footer b{color:#fff;font-size:13px;}
.review-card footer span{color:var(--mist);font-size:10px;line-height:1.4;}
.reviews-disclosure{margin:16px 0 0;color:var(--mist);font-size:11px;}

.home-reviews{position:relative;overflow:hidden;padding:clamp(64px,7vw,92px) 0;background:var(--theme-deep);color:#fff;}
.home-reviews .wrap{position:relative;z-index:1;}
.home-reviews__header{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:clamp(32px,6vw,88px);align-items:end;margin-bottom:34px;}
.home-reviews__intro h2{max-width:720px;margin:10px 0 16px;font-size:clamp(36px,4.5vw,60px);line-height:1.02;color:#fff;}
.home-reviews__intro>p:last-child{max-width:600px;margin:0;color:var(--whisper);font-size:16px;line-height:1.65;}
.home-review-overview{display:grid;grid-template-columns:auto minmax(180px,1fr);gap:26px;align-items:center;padding:24px 26px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.055);backdrop-filter:blur(12px);}
.home-review-score{display:flex;min-width:112px;flex-direction:column;align-items:flex-start;}
.home-review-score strong{font:700 54px/1 var(--display);color:#fff;}
.home-review-score .review-stars{margin:8px 0 4px;font-size:13px;}
.home-review-score small{color:var(--mist);font-size:10px;white-space:nowrap;}
.home-rating-breakdown{display:grid;gap:7px;}
.home-rating-row{display:grid;grid-template-columns:36px minmax(90px,1fr) 16px;gap:8px;align-items:center;color:var(--whisper);font-size:9px;}
.home-rating-row>span{white-space:nowrap;}
.home-rating-row i{height:4px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.13);}
.home-rating-row i b{display:block;height:100%;border-radius:inherit;background:#F6B51B;}
.home-rating-row em{font-style:normal;text-align:right;color:var(--mist);}
.home-reviews__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.home-review-card{min-height:280px;padding:26px;display:flex;flex-direction:column;border-radius:16px;background:#fff;color:var(--graphite);box-shadow:0 18px 45px rgba(0,0,0,.16);}
.home-review-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;}
.home-review-quote{font:700 54px/.75 Georgia,serif;color:var(--theme-primary);}
.home-review-card p{margin:24px 0 28px;font-size:15px;line-height:1.65;color:var(--slate);}
.home-review-card footer{display:flex;align-items:center;gap:12px;margin-top:auto;}
.home-review-avatar{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:50%;background:var(--theme-soft);color:var(--theme-primary);font:700 12px/1 var(--body);}
.home-review-card footer>span:last-child{display:flex;min-width:0;flex-direction:column;gap:3px;}
.home-review-card footer b{font-size:13px;color:var(--graphite);}
.home-review-card footer small{font-size:9px;color:var(--mist-text);}
.home-reviews__disclosure{margin:16px 0 0;color:var(--mist);font-size:10px;}

@media (max-width:900px){
  .home-reviews__header{grid-template-columns:1fr;align-items:start;}
  .home-review-overview{max-width:560px;}
  .home-reviews__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .home-review-card:last-child{grid-column:1/-1;min-height:220px;}
}
@media (max-width:620px){
  .home-reviews{padding:54px 0;}
  .home-reviews__intro h2{font-size:36px;}
  .home-review-overview{grid-template-columns:1fr;padding:20px;}
  .home-review-score{min-width:0;}
  .home-reviews__grid{grid-template-columns:1fr;}
  .home-review-card,.home-review-card:last-child{grid-column:auto;min-height:0;padding:22px;}
  .newsletter-band .sub{gap:4px;}
  .newsletter-band .sub input{padding-inline:10px;}
  .newsletter-band .sub button{padding-inline:14px;letter-spacing:.11em;}
}

.related-section{background:var(--dial);}
.related-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px;}
.related-heading .h2{font-size:clamp(30px,3.4vw,46px);}
.related-controls{display:flex;gap:8px;}
.related-controls button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:50%;background:#fff;color:var(--graphite);font-size:20px;}
.related-controls button:hover{border-color:var(--theme-primary);color:var(--theme-primary);}
.related-controls button:disabled{opacity:.35;cursor:default;}
.related-viewport{overflow:hidden;scroll-behavior:smooth;}
.related-track{display:flex;gap:14px;}
.related-track .pcard{flex:0 0 calc((100% - 56px)/5);padding:14px;}
/* Matches #gourmet-apples on the homepage: same gray frame extended over
   the name/price, same image-to-text overlap, same font size per
   breakpoint (20px desktop, 16px mobile below). */
.related-track .pcard{background:#f5f5f3!important;padding:0 0 14px!important;border-radius:12px!important;}
.related-track .pcard__art{margin-bottom:-2px;}
.related-track .pcard__name{font-size:20px!important;}
.related-track .pcard .price{font-size:20px!important;}
.related-track .eyebrow{font-size:8.5px;}
@media (max-width:760px){
  .related-track .pcard__name{font-size:20px!important;}
  .related-track .pcard .price{font-size:20px!important;}
  /* Shrinks the art box itself (not a deeper negative margin — see the
     pcard__art clipping note near #gourmet-apples below) so the name/price
     sit a line higher on phones without re-entering the overlap range that
     clips in this environment's browser. */
  .related-track .pcard__art{aspect-ratio:1/.88;}
}

@media (max-width:1120px){
  .fashioni-header .hdr__in{grid-template-columns:1fr auto;gap:12px;}
  .fashioni-header .header-nav{display:none;}
  .fashioni-header .burger{display:grid;place-items:center;width:var(--tap);height:var(--tap);}
  .fashioni-header .burger span{display:block;width:20px;height:1px;background:var(--graphite);position:relative;}
  .fashioni-header .burger span::before,.fashioni-header .burger span::after{content:"";position:absolute;left:0;width:20px;height:1px;background:var(--graphite);}
  .fashioni-header .burger span::before{top:-6px;}
  .fashioni-header .burger span::after{top:6px;}
  .fashioni-header .hdr__tools{justify-self:end;}
  .fashioni-navrow .nav{gap:18px;}
  .fashioni-navrow .nav a{font-size:12px;}
  .fashioni-cats{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .promo-grid{grid-template-columns:1fr 1fr;}.promo-card--wide{grid-column:1/-1;}
  .guide-grid{grid-template-columns:repeat(2,1fr);}
  .reviews-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .related-track .pcard{flex-basis:calc((100% - 42px)/4);}
}
@media (max-width:820px){
  .hdr__in{height:62px;grid-template-columns:auto auto 1fr;gap:12px;}
  .header-search span{display:none;}
  .fashioni-navrow{display:none;}
  .campaign-hero{min-height:520px;display:block;padding-top:250px;}
  .campaign-hero__image{object-position:center top;height:250px;}
  .campaign-hero__copy{width:100%;padding:34px 0 68px;border:0;background:none;box-shadow:none;backdrop-filter:none;}
  .campaign-hero__copy .eyebrow{text-align:center;font-size:calc(10px + 4px);}
  .campaign-hero__inner{position:relative;min-height:270px;align-items:flex-end;background:var(--theme-hero);}
  .campaign-hero__actions .btn--light:hover,
  .campaign-hero__actions .btn--light:focus-visible{background:#000;border-color:#fff;color:#fff;}
  .benefit-bar__grid{grid-template-columns:1fr 1fr;}.benefit-bar__grid>div:nth-child(2){border-right:0;}.benefit-bar__grid>div:nth-child(-n+2){border-bottom:1px solid var(--rule);}
  .fashioni-cats{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .newsletter-band__inner{align-items:flex-start;flex-direction:column;}.newsletter-band .sub{width:100%;}
  .reviews-grid{grid-template-columns:1fr 1fr;}
  .related-track .pcard{flex-basis:calc((100% - 14px)/2);}
}
@media (max-width:620px){
  :root{--pad:16px;}
  .sdbar__in{font-size:12px;}
  .theme-picker{right:4px;}
  .theme-picker__trigger{width:108px;padding:0 8px;}
  .theme-picker__menu{width:min(310px,calc(100vw - 16px));right:0;}
  .header-search{width:44px;padding:0;justify-content:center;}
  .fashioni-logo,.logo{font-size:23px;}
  .hdr__act{gap:2px;}
  .campaign-hero{min-height:520px;}
  .campaign-hero__copy h1{font-size:clamp(25px,7.4vw,34px);}
  .campaign-hero__price{font-size:calc(clamp(22px,5.4vw,28px) + 14px);}
  .campaign-hero__actions{grid-template-columns:1fr;}
  .benefit-bar__grid{grid-template-columns:1fr;}.benefit-bar__grid>div{border-right:0;border-bottom:1px solid var(--rule);}
  .section-heading{align-items:flex-start;flex-direction:column;margin-bottom:24px;}.section-heading .text-link{margin-top:-12px;}
  .fashioni-cats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .fashioni-cat{height:235px!important;}.fashioni-cat__copy{padding:10px 12px;}.fashioni-cat__copy b{font-size:14px;}
  .promo-grid,.guide-grid{grid-template-columns:1fr;}.promo-card--wide{grid-column:auto;}.promo-card{min-height:330px;}
  .shop .listhd{gap:14px;margin-bottom:18px;}
  .shop .listhd>div:first-child{width:100%;}
  .shop .list-controls{width:100%;}
  .shop .list-controls>*{flex:1 1 0;min-width:0;}
  .shop .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .shop .pcard{padding:10px;display:flex;flex-direction:column;}
  .shop .pcard__art{margin-bottom:-6px;aspect-ratio:1/.78;}
  .shop .pcard .eyebrow{font-size:8px;line-height:1.35;}
  .shop .pcard__name{font-size:13px;line-height:1.3;margin:4px 0 8px;}
  .shop .pcard .price{font-size:13px;margin-top:auto;}
  .shop .sk-product-card{padding:10px;gap:9px;}
  .pinfo{padding:20px 18px;}
  .pinfo .h1{font-size:32px;}
  .reviews-summary{align-items:flex-start;flex-direction:column;}
  .reviews-grid{grid-template-columns:1fr;}
  .review-card{min-height:0;}
  .related-track .pcard{flex-basis:84%;}
  .ft__cols{grid-template-columns:1fr 1fr;}.ft__col:first-child{grid-column:1/-1;}
}

/* Final Fashioni cascade overrides. */
.fashioni-navrow{display:block!important;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:rgba(255,255,255,.96);}
.fashioni-cats{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
.campaign-hero h1,.section-heading h2,.pghead h1,.pinfo h1,.article__hero h1{font-family:var(--display);font-weight:700;letter-spacing:-.035em;}
.campaign-hero__image{object-fit:contain;object-position:74% 50%;padding:clamp(24px,5vw,76px);background:linear-gradient(135deg,var(--theme-hero),var(--theme-deep));}
.promo-card img{object-fit:contain;padding:34px;background:linear-gradient(145deg,var(--theme-deep),var(--theme-hero));}
@media (max-width:1100px){.fashioni-cats{grid-template-columns:repeat(3,minmax(0,1fr))!important;}}
@media (max-width:760px){.fashioni-navrow{display:none!important;}.fashioni-cats{grid-template-columns:repeat(2,minmax(0,1fr))!important;}.campaign-hero__image{object-position:center 20%;padding:24px 32px 130px;}.sizeopt{min-height:46px;}}

/* Target-size overrides, intentionally last in the cascade. */
:where(.hdr,.ft,.drawer,.cart,.sheet) a,
:where(.hdr,.ft,.drawer,.cart,.sheet) button{min-width:44px!important;min-height:44px!important;display:inline-flex;align-items:center;}
.price-field input{min-height:44px!important;}
.pdetail a,.crumb a,.btn--text{min-height:44px!important;display:inline-flex;align-items:center;}
.sdbar__in{min-height:44px!important;}
.home-review-card .review-stars{color:#8A4B08;}
.btn--buy{background:#8A2718;border-color:#8A2718;color:#fff;}
.sdbar a,.pinfo a{min-width:44px!important;min-height:44px!important;display:inline-flex;align-items:center;}
.prose a{min-height:44px!important;display:inline-flex;align-items:center;}
.sum a{min-height:44px!important;display:inline-flex;align-items:center;}
/* Visually short Modify button; the ::after keeps a finger-sized tap area. */
.sum .sum__mod{min-height:0!important;position:relative;}
.sum .sum__mod::after{content:"";position:absolute;inset:-12px -4px;}
.shop .h1,.fset .h1,.fset .h2{font-family:var(--display);font-weight:700;}
.galmain img{left:8%!important;top:8%!important;width:84%!important;height:84%!important;object-fit:contain!important;}

/* --------------------------------------------------------------------------
   Fashioni 2026 editorial storefront — inspired by the clarity and density of
   leading multi-department fashion shops. Kept deliberately brand-original. */
/* overflow-x:hidden alone on BOTH html and body triggers the CSS overflow
   auto-pairing rule (an axis left "visible" next to a non-visible axis on
   the same box computes to "auto") on each of them independently, so both
   become their own scrolling container. A sticky descendant then sticks
   relative to whichever inner container scrolls, not the real viewport,
   and never visually pins. Keeping the horizontal clamp on html only
   avoids the double container so position:sticky below actually sticks. */
/* scrollbar-gutter:stable reserves the vertical scrollbar's width whether or
   not the page is currently tall enough to need it. Without this, switching
   categories (a 1-product page vs. a 4-product page) toggles the scrollbar on
   and off, and a classic desktop scrollbar takes its width out of the page
   instead of overlaying it — so every centered element visibly shifts
   sideways by a scrollbar-width each time. Overlay (touch/mobile) scrollbars
   don't reserve space in the first place, so this is a desktop-only fix for
   a desktop-only symptom. */
html{width:100%;max-width:100%;overflow-x:hidden;scrollbar-gutter:stable;}
body{width:100%;max-width:100%;background:var(--dial);color:var(--graphite);}
.wrap{width:min(100% - (2 * var(--pad)),1800px);max-width:none;}
/* The search/account/cart row locks to the top on scroll — the category
   row is not named in that request and scrolls away normally as part of
   the page, which also keeps the pinned strip slim.
   position:sticky was tried first, but a sticky element can only stay
   pinned while its own parent box is still on screen: the <header> here
   is one short block wrapping both rows, so past a bit of scroll the row
   would reach the bottom of that box and scroll away with it — "sticks
   briefly, then still disappears". position:fixed pins it to the
   viewport with no such range limit; .fashioni-header's padding-top
   below reserves the space it no longer occupies in flow so the category
   row doesn't jump up underneath it.
   The logo used to live twice — full-size in its own row below this bar,
   plus a small stand-in inside the bar that faded in once the real one
   scrolled out of view. Per explicit request there is now only ever the
   one mark, permanently in the fixed bar, so it's what every visitor
   actually sees at the top of the page at all times — no separate row,
   no scroll-triggered swap. */
.fashioni-header{position:static;background:#fff;box-shadow:none;padding-top:131px;}
.fashioni-primary{position:fixed;top:0;left:0;right:0;z-index:70;background:#fff;box-shadow:0 1px 6px rgba(16,24,40,.08);width:100%;max-width:none;height:131px!important;display:grid!important;grid-template-columns:auto auto!important;justify-content:space-between!important;align-items:center;gap:20px;padding:0 var(--pad);}
/* Absolutely positioned and centered so it floats free of the search/
   tools grid columns either side of it, rather than fighting them for a
   grid track. Deliberately contained within the fixed bar: this element
   lives inside position:fixed, so anything that made it hang past the
   bar's own edge would stay pinned there on screen for the entire time
   the page is scrolled — overlapping whatever content scrolls underneath
   it the whole time, not just once at the top of the page. Desktop only
   — the bar's height and this image's size are re-declared unchanged in
   the 760px breakpoint below specifically so mobile is never affected by
   a desktop-only resize request again. */
.hdr-wordmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.hdr-wordmark img{height:115px;width:auto;display:block;}
.header-search{justify-self:start;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;background:transparent;border:0;border-radius:4px;color:#555;}
.header-search span{display:none;}
.header-search svg{width:23px;height:23px;fill:none;stroke:#111;stroke-width:1.7;}
.fashioni-logo{justify-self:center!important;color:#080808!important;font-family:Arial,sans-serif!important;font-size:20.4px!important;font-weight:800!important;letter-spacing:.22em!important;line-height:1;white-space:nowrap;}
.fashioni-logo span{color:inherit!important;}
.hdr__tools{grid-column:2;justify-self:end;}.hdr__act{position:relative;display:flex;align-items:center;}
.iconbtn{width:48px;height:48px;display:grid!important;place-items:center;}.iconbtn svg{width:25px;height:25px;fill:none;stroke:#111;stroke-width:1.55;}.iconbtn img{height:29px;width:auto;display:block;}
/* Account is a text label above the cart button, not beside it — but
   absolutely positioned, floated above the cart rather than a normal
   flex sibling stacked in-flow. In-flow stacking made .hdr__act's own box
   taller than just the cart button, and centering that taller box in the
   bar (same as the search icon's row) pushed the cart down from where it
   used to sit; this way .hdr__act is still exactly the cart button's own
   size, so the cart stays centered exactly as before and Account simply
   floats above it using space the bar already has to spare. */
/* min-width/min-height:auto here counter a site-wide a11y rule further down
   (":where(.hdr,...) button{min-width:44px!important;min-height:44px!important}",
   a touch-target-size floor for every header button) that was silently
   winning over height:auto above — auto for height resolved small, but the
   44px floor then clamped the USED height back up to 44px regardless, which
   is what pushed this well past the top of the bar. Shrinking the tap
   target for this control specifically is an intentional, narrow exception
   to that rule: the request is a compact text label, not an icon-sized
   button, and the real click target (the whole line, via padding) stays
   comfortably tappable even short of the 44px guideline. */
.iconbtn--account{position:absolute;left:50%;bottom:100%;margin-bottom:4px;transform:translateX(-50%);width:auto!important;height:auto!important;min-width:auto!important;min-height:auto!important;padding:6px 4px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#111;background:transparent;white-space:nowrap;}
.header-checkout{height:44px!important;padding:0 16px;background:#171717;color:#fff!important;border-radius:3px;text-transform:uppercase;font-size:11px;font-weight:750;letter-spacing:.07em;}
.mega__grid{width:min(calc(100% - 2 * var(--pad)),1540px);margin:auto;display:grid;grid-template-columns:1fr 1.25fr 1fr 2.25fr;gap:38px;}
.mega__column{display:flex;flex-direction:column;align-items:flex-start;gap:7px;}
.mega__column>b{margin-bottom:8px;font-size:16px;}.mega__column a{min-height:30px!important;font-size:13px;color:#272727;}.mega__column small{color:#888;margin-left:4px;}
.mega__visuals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.mega__visual{min-width:0!important;display:block!important;text-align:center;font-size:13px!important;}
.mega__visual img{display:block;width:100%;aspect-ratio:1;object-fit:contain;padding:12%;margin-bottom:9px;background:#f5f5f3;border-radius:12px;}
.mega__visual small{display:block;margin-top:4px;color:#777;font-size:11px;}
.mega__intro strong{font-size:14px;}.mega__intro>small{margin-top:12px;line-height:1.5;color:#777;}

/* A reusable, catalogue-driven brand directory. Product imagery is reused as
   truthful brand artwork, so stores do not need a second editorial asset set. */
.brand-page{background:#f7f7f5;}
.brand-head{padding:72px 0 64px;background:#fff;border-bottom:1px solid var(--rule);text-align:center;}
.brand-head__inner{display:flex;flex-direction:column;align-items:center;}
.brand-head h1{margin:7px 0 12px;font-family:var(--display);font-size:clamp(42px,5vw,74px);font-weight:400;letter-spacing:-.035em;line-height:.95;}
.brand-head .lede{margin:0;color:#666;}
.brand-search{width:min(100%,560px);height:54px;margin-top:30px;display:flex;align-items:center;gap:12px;padding:0 18px;background:#f1f1ef;border:1px solid transparent;transition:border-color .18s,background .18s;}
.brand-search:focus-within{background:#fff;border-color:#111;}
.brand-search svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;}
.brand-search input{width:100%;height:100%;border:0;outline:0;background:transparent;font:inherit;font-size:16px;}
.brand-section{padding-top:64px;padding-bottom:68px;}
.brand-section--directory{padding-top:8px;}
.brand-section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px;}
.brand-section__head .eyebrow{margin-bottom:6px;}.brand-section__head h2{font-family:var(--display);font-size:clamp(29px,3vw,42px);font-weight:400;line-height:1;}
.brand-section__head>a{min-height:44px;display:flex;align-items:center;font-size:13px;text-decoration:underline;text-underline-offset:4px;}
.brand-featured{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.brand-feature{min-width:0;background:#fff;border:1px solid var(--rule);transition:transform .18s,box-shadow .18s;}
.brand-feature:hover,.brand-feature:focus-visible{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.08);}
.brand-feature__art{display:block;aspect-ratio:1;background:#efefed;overflow:hidden;}
.brand-feature__art img{width:100%;height:100%;object-fit:contain;padding:8%;}
.brand-feature__copy{display:flex;flex-direction:column;gap:5px;padding:17px 18px 19px;}
.brand-feature__copy strong{font-size:17px;}.brand-feature__copy small{color:#707070;font-size:12px;}
.brand-alphabet{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 30px;}
.brand-alphabet a{width:44px;height:44px;display:grid;place-items:center;border:1px solid #cfcfcb;background:#fff;font-size:13px;font-weight:700;}
.brand-alphabet a:hover,.brand-alphabet a:focus-visible{background:#111;color:#fff;border-color:#111;}
.brand-directory{columns:4;column-gap:14px;}
.brand-group{display:inline-block;width:100%;margin:0 0 14px;break-inside:avoid;scroll-margin-top:24px;background:#fff;border-top:3px solid #111;padding:20px 20px 14px;}
.brand-group h2{margin-bottom:12px;font-family:var(--display);font-size:30px;font-weight:400;}
.brand-group__links{display:flex;flex-direction:column;}
.brand-group__links a{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid #ececea;font-size:14px;}
.brand-group__links a span{overflow:hidden;text-overflow:ellipsis;}.brand-group__links a small{flex:0 0 auto;color:#666;font-size:11px;}
.brand-group__links a:hover span,.brand-group__links a:focus-visible span{text-decoration:underline;text-underline-offset:3px;}
.brand-empty{column-span:all;padding:56px;background:#fff;text-align:center;}.brand-empty h2{font-family:var(--display);font-size:32px;font-weight:400;}.brand-empty p{margin:8px 0 22px;color:#666;}

/* Full-width, image-led homepage sections with symmetric edges. */
.fashioni-page main{width:100%;}.campaign-hero{border-radius:0!important;}
/* Hero background is the fixed "all 5 apples on the counter" brand photo
   (assets/campaigns/gourmet-apples.jpg), not a per-product shot, so this
   crop is tuned once for that photo's own composition: kitchen above,
   apples/ribbons in the middle band, counter below. 52% centers on the
   apples themselves. */
.campaign-hero__image{object-fit:cover!important;object-position:center 52%!important;padding:0!important;background:#111827!important;}
/* The source photo is 768px wide, upscaled to fill hero widths well past
   that on desktop — object-fit:cover can't add detail that isn't in the
   file, so this is a perceptual sharpness boost (contrast/saturation),
   not a true resolution fix. A higher-resolution source photo is the only
   way to remove the upscale softness outright. */
@media (min-width:821px){
  .campaign-hero__image{filter:contrast(1.1) saturate(1.15);}
}

/* Desktop-only hero refinements (mobile keeps the stacked layout and tight
   apple-only crop set above, unchanged). A wider, shorter copy panel keeps
   the product name on one line without dominating the frame. No boxed
   shape behind it (see .campaign-hero__copy above) — it's centered at the
   bottom of the photo instead, so it reads as a caption on the image
   rather than a panel floating over it. */
@media (min-width:821px){
  .campaign-hero__inner{align-items:flex-end;justify-content:center;padding-bottom:48px;}
  .campaign-hero__copy{
    width:fit-content;
    max-width:min(900px,88vw);
    padding:20px 34px;
    text-align:center;
  }
  .campaign-hero__copy .eyebrow{margin-bottom:6px;font-size:calc(10px + 4px);}
  .campaign-hero__copy h1{margin:0 0 6px;}
  .campaign-hero__copy h1 span{white-space:nowrap;}
  .campaign-hero__actions{margin-top:14px;}
  /* Add to Cart: normal/hover intentionally flipped from the site-wide
     .btn--primary pattern, per request — the filled-white-tint look is
     the resting state here, and it settles to the red outline on hover. */
  .campaign-hero__actions .btn--primary{background:rgba(255,255,255,.15);border-color:#fff;}
  .campaign-hero__actions .btn--primary:hover{background:transparent;border-color:#fff;}
  /* Explore All on a solid-red hero used the site-wide red :hover fill,
     which (like the primary button above) disappears against the red
     background. Desktop-only per request — semi-transparent black with a
     white outline reads as a clear, intentional hover state here instead. */
  .campaign-hero__actions .btn--light:hover,
  .campaign-hero__actions .btn--light:focus-visible{background:rgba(0,0,0,.55);border-color:#fff;color:#fff;}
}
.promo-card,.guide-card,.fashioni-cat{border-radius:0!important;}.promo-grid,.guide-grid{gap:2px;}
.promo-card{min-height:480px;}.promo-card::after{background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.82));}
.products-section{background:#fff;}
/* "BROWSE ALL GOURMET APPLES" anchors here. Fixed header sits on top of
   the page at every scroll position, so scrolling the section flush to
   y:0 (the default) hides the heading behind it entirely — this reserves
   room equal to the fixed bar plus breathing room so the heading lands
   just below it instead of scrolling past it. */
#gourmet-apples{scroll-margin-top:95px;} /* lands just past the divider above the section */
@media (max-width:760px){#gourmet-apples{scroll-margin-top:70px;}} /* mobile: 15px further, past the divider */

/* Clean fashion cards: photography/product is dominant, metadata stays quiet. */
.pgrid{border:0!important;background:#fff!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 14px!important;}
.pcard{min-width:0;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;background:#fff!important;transform:none!important;}
.pcard__link{display:block;color:inherit;text-decoration:none;}
.pcard__art{position:relative;aspect-ratio:1;margin:0 0 13px;background:#f5f5f3!important;border-radius:12px!important;}
.pcard__art img{left:10%!important;top:10%!important;width:80%!important;height:80%!important;object-fit:contain!important;}
.pcard__badge{position:absolute;left:0;top:0;z-index:2;padding:7px 9px;background:#fff;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;}
.pcard.has-timed-sale .pcard__badge{left:auto;right:0;}
.sale-countdown{position:absolute;z-index:4;left:10px;top:10px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:82px;min-height:36px;padding:5px 8px;background:#8A2718;color:#fff;box-shadow:0 4px 12px rgba(17,17,17,.14);pointer-events:none;font-variant-numeric:tabular-nums;line-height:1.05;}
.sale-countdown b{font-size:8px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;margin-bottom:3px;}
.sale-countdown [data-sale-timer]{font:600 10px/1 var(--data);letter-spacing:.02em;white-space:nowrap;}
.sale-countdown--product{left:14px;top:14px;min-width:96px;min-height:42px;padding:6px 10px;}
.sale-countdown--product b{font-size:9px;}.sale-countdown--product [data-sale-timer]{font-size:12px;}
.pcard__meta{margin:0 0 4px;color:#6b6b6b;font-size:10px;text-transform:uppercase;letter-spacing:.08em;}
.pcard__nameprice{display:block;margin:0 0 6px;text-align:center;}
.pcard__name{display:inline;border:0!important;font-family:Arial,sans-serif!important;font-size:20px!important;font-weight:700!important;line-height:1.35;}
.pcard .price{display:inline;font-size:20px;font-weight:700;}.pcard__price{display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;}.pcard__price s{order:0;margin:0;color:#666;font-size:.82em;font-weight:400;}.pcard__price .price__now{order:1;color:var(--theme-primary-hover);}.pcard__swatches{display:flex;gap:0;margin-top:1px;align-items:center;}.pcard__swatch{width:44px;height:44px;border:0;border-radius:0;position:relative;display:grid;place-items:center;flex:0 0 auto;background:transparent;}.pcard__swatch>span{display:block;width:19px;height:19px;border:1px solid #aaa;border-radius:3px;}.pcard__swatch.is-on>span{box-shadow:0 0 0 2px #fff,0 0 0 3px #111;}.pcard__swatch:focus-visible{outline:2px solid var(--blued);outline-offset:-4px;}
/* Homepage only, both breakpoints: extend the product photo's gray frame
   down over the name/price instead of stopping at the image, so the card
   reads as one framed unit. Same gray as .pcard__art, so the seam between
   image and text is invisible. */
#gourmet-apples .pcard{background:#f5f5f3!important;padding:0 0 14px!important;border-radius:12px!important;}
#gourmet-apples .pcard__art{margin-bottom:-2px;}
@media (max-width:760px){
  /* Mobile only: the sitewide mobile-grid rules shrink name/price to
     12px (see the 760px Fashioni block) — this bumps them up to the 20px desktop size. */
  #gourmet-apples .pcard__name{font-size:20px!important;}
  #gourmet-apples .pcard .price{font-size:20px!important;}
  /* Shrinks the art box itself (not a deeper negative margin — pulling
     pcard__nameprice up further via margin clips text in this
     environment's browser past about -9px) so name/price sit a line
     higher on phones. */
  #gourmet-apples .pcard__art{aspect-ratio:1/.68;}
}

/* Listing header and Next-like horizontal filter controls. */
.shop-main{padding-top:0!important;}.shop-main>.wrap{width:100%;}.shop-main .crumb{padding:14px var(--pad);margin:0;background:#f5f5f5;border-bottom:1px solid #e4e4e4;}
.shop{display:block!important;}.shop>div{width:min(calc(100% - 2 * var(--pad)),1800px);margin:auto;}
.listhd{display:block!important;margin:0!important;padding:36px 0 24px;text-align:center;}.listhd .h1{font:600 32px/1.1 var(--display)!important;text-transform:uppercase;letter-spacing:.03em;}.listhd .lede{max-width:700px;margin:10px auto 4px!important;}.list-controls{position:absolute;right:var(--pad);margin-top:-47px;}.sort{min-width:190px;border-radius:2px;background:#fff;}
.filters{position:sticky!important;top:150px!important;z-index:40;width:100%!important;max-width:none!important;display:grid;grid-template-columns:repeat(5,minmax(135px,1fr)) 150px;gap:10px;padding:12px var(--pad)!important;margin:0 0 30px!important;border:0!important;border-top:1px solid #e6e6e6!important;border-bottom:1px solid #ddd!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;overflow:visible!important;transform:none!important;}
.filters>div:first-child{display:none!important;}.fgroup{position:relative;padding:0!important;border:0!important;}.fgroup:last-child{display:flex;align-items:center;}.filter-trigger{width:100%;height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border:1px solid #aaa;background:#fff;font-size:14px;text-align:left;}.filter-trigger+*{margin-top:0;}
.fgroup>:not(.filter-trigger){display:none;}.fgroup.is-open>:not(.filter-trigger){display:flex;}.fgroup.is-open>div{position:absolute;left:0;top:50px;z-index:45;width:max(280px,100%);max-height:340px;overflow:auto;flex-direction:column;padding:16px;background:#fff;border:1px solid #aaa;box-shadow:0 10px 25px rgba(0,0,0,.12);}
.fgroup.is-open>.price-range-values{top:50px;padding:16px 16px 0;box-shadow:none;border-bottom:0;}.fgroup.is-open>.dual-range{top:93px;padding:0 16px;height:54px;border-top:0;border-bottom:0;}.fgroup.is-open>.price-fields{top:147px;padding:12px 16px 16px;display:grid;grid-template-columns:1fr 1fr;}
.fgroup.is-open>.check{position:absolute;top:50px;left:0;width:max(240px,100%);padding:18px;background:#fff;border:1px solid #aaa;box-shadow:0 10px 25px rgba(0,0,0,.12);}
.filters .btn--line{height:50px;border-radius:0;}.check{white-space:nowrap;}
.filters .fgroup:last-child>*{display:flex!important;}

/* Product page: generous gallery with a compact sticky purchase column. */
.product-main>.wrap{width:min(calc(100% - 2 * var(--pad)),1680px);}.pdp{grid-template-columns:minmax(0,1.55fr) minmax(360px,.65fr)!important;gap:clamp(34px,5vw,90px)!important;}
.gal:has(.thumbs[hidden]){grid-template-columns:1fr!important;}
.galmain{border:0!important;border-radius:12px!important;background:#f5f5f3!important;}.thumb{background:#f5f5f3;border-radius:8px;overflow:hidden;}.pinfo{top:169px!important;padding:8px 0 0!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;}.pinfo .h1{font:600 clamp(30px,3vw,46px)/1.08 var(--display)!important;letter-spacing:-.025em!important;}.purchase-actions{grid-template-columns:1fr!important;}.purchase-actions .btn{min-height:54px!important;border-radius:0!important;color:#fff!important;}.purchase-actions .btn--primary{background:#111!important;border-color:#111!important;}.purchase-actions .btn--buy{background:#8A2718!important;border-color:#8A2718!important;}.purchase-actions .btn--buy:hover{background:#742114!important;border-color:#742114!important;filter:none;}
.shop-main,.product-main,.related-section{background:#fff!important;}

/* Product size guide: a native, keyboard-accessible bottom sheet. */
.size-guide-sheet{width:100%;max-width:none;max-height:min(78vh,720px);margin:auto 0 0;border:0;padding:0;background:transparent;color:var(--graphite);}
.size-guide-sheet::backdrop{background:rgba(10,18,32,.48);backdrop-filter:blur(2px);}
.size-guide-sheet__panel{background:var(--dial-pure);border-radius:18px 18px 0 0;box-shadow:0 -18px 60px rgba(10,18,32,.18);padding:28px max(var(--pad),calc((100vw - 1080px)/2));}
.size-guide-sheet__head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;border-bottom:1px solid var(--rule);padding-bottom:18px;}
.size-guide-sheet__head h2{font:600 clamp(26px,3vw,38px)/1.1 var(--display);margin:6px 0 0;}
.size-guide-sheet__close{width:44px;height:44px;border:1px solid var(--rule);border-radius:50%;font-size:28px;line-height:1;display:grid;place-items:center;flex:0 0 auto;}
.size-guide-sheet__body{padding-top:22px;overflow:auto;}
.size-guide-sheet__intro,.size-guide-sheet__tip{font-size:13px;line-height:1.6;color:var(--slate);max-width:760px;}
.size-guide-table{width:100%;border-collapse:collapse;margin:20px 0;}
.size-guide-table th,.size-guide-table td{border:1px solid var(--rule);padding:13px 16px;text-align:left;font-size:13px;}
.size-guide-table thead th{background:var(--whisper);font-size:10px;letter-spacing:.12em;text-transform:uppercase;}
.size-guide-table tbody th{font-weight:600;}
@media(max-width:600px){
  .size-guide-sheet{max-height:86vh;}
  .size-guide-sheet__panel{padding:22px 16px 28px;}
  .size-guide-table th,.size-guide-table td{padding:11px 9px;font-size:12px;}
}

.ft__cols{grid-template-columns:1.5fr repeat(3,1fr)!important;}.ft .fashioni-logo{color:#fff!important;}

@media (max-width:1100px){
  .fashioni-primary{grid-template-columns:auto auto!important;justify-content:space-between!important;}.mega__grid{grid-template-columns:1fr 1fr 1fr;}.mega__visuals{display:none;}.pgrid{grid-template-columns:repeat(3,minmax(0,1fr));}.filters{grid-template-columns:repeat(3,minmax(150px,1fr));}.product-main .pdp{grid-template-columns:1.15fr .85fr!important;}
  .brand-featured{grid-template-columns:repeat(2,minmax(0,1fr));}.brand-directory{columns:2;}
}
@media (max-width:760px){
  :root{--pad:14px;}.fashioni-header{padding-top:96px;}.fashioni-primary{height:96px!important;grid-template-columns:auto auto!important;justify-content:space-between!important;gap:4px!important;padding:0 8px;}.hdr-wordmark img{height:81px;}.header-search{width:44px!important;height:44px!important;padding:0!important;background:#fff;}.header-search span{display:none;}.header-search svg{order:0;margin:auto;width:21px;height:21px;}.fashioni-logo{font-size:22px!important;letter-spacing:.16em!important;}.iconbtn{width:42px!important;height:44px!important;}.iconbtn--account{width:auto!important;height:auto!important;min-width:auto!important;min-height:auto!important;padding:4px 2px;font-size:9px;}.header-checkout{display:none!important;}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px 8px!important;}.pcard__art{margin-bottom:-6px;}.pcard__name{font-size:12px!important;}.pcard__meta{font-size:8px;}.pcard .price{font-size:12px;}.pcard__swatch>span{width:16px;height:16px;}
  .sale-countdown{left:6px;top:6px;min-width:0;min-height:27px;padding:4px 6px;box-shadow:0 2px 8px rgba(17,17,17,.12);}
  .sale-countdown b{display:none;}.sale-countdown [data-sale-timer]{font-size:8px;letter-spacing:0;}
  .sale-countdown--product{left:8px;top:8px;min-height:31px;padding:5px 7px;}.sale-countdown--product b{display:block;font-size:7px;margin-bottom:2px;}.sale-countdown--product [data-sale-timer]{font-size:9px;}
  .shop-main .crumb{padding:10px var(--pad);}.listhd{padding:26px 0 18px!important;}.listhd .h1{font-size:22px!important;}.listhd .lede{font-size:13px;}.list-controls{position:static;width:100%;margin:18px 0 0;}.sort,.fbar{width:50%;height:48px;}.filters{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;z-index:90;width:100%!important;max-height:84vh!important;display:block;padding:22px!important;margin:0!important;overflow:auto!important;transform:translateY(100%)!important;border-top:1px solid #aaa!important;}.filters.is-open{transform:none!important;}.filters>div:first-child{display:flex!important;}.fgroup{border-bottom:1px solid #ddd!important;padding:0!important;}.filter-trigger{border:0;height:54px;padding:0;font-weight:700;}.fgroup>:not(.filter-trigger){display:none!important;}.fgroup.is-open>:not(.filter-trigger){display:flex!important;position:static!important;width:100%!important;max-height:none!important;padding:0 0 16px!important;border:0!important;box-shadow:none!important;}.fgroup.is-open>.price-fields{display:grid!important;}.filters .btn--line{margin-top:18px;}
  .product-main .pdp{grid-template-columns:1fr!important;}.pinfo{position:static!important;padding:16px 0 80px!important;}.gal{grid-template-columns:1fr!important;}.thumbs{order:2;flex-direction:row;overflow:auto;}
  .promo-card{min-height:380px;}.ft__cols{grid-template-columns:1fr 1fr!important;}.ft__brand{grid-column:1/-1;}
  .brand-head{padding:46px 0 42px;}.brand-head h1{font-size:45px;}.brand-search{height:50px;margin-top:24px;}.brand-section{padding-top:44px;padding-bottom:48px;}.brand-section--directory{padding-top:2px;}.brand-section__head{align-items:flex-start;flex-direction:column;gap:10px;}.brand-featured{grid-template-columns:1fr;gap:10px;}.brand-directory{columns:1;}.brand-feature{display:grid;grid-template-columns:116px 1fr;}.brand-feature__art{aspect-ratio:1;}.brand-feature__copy{justify-content:center;}.brand-alphabet{gap:6px;}.brand-alphabet a{width:44px;height:44px;}.brand-group{padding:18px 16px 12px;}
}

/* Best sellers — intentionally distinct from the clean Trending Now cards.
   The ranked, ink-and-parchment treatment reads like an editorial list while
   retaining the same live variant and timed-sale behavior. */
.best-seller-section{overflow:hidden;background:#0a0d12;color:#f7f1e7;padding:clamp(60px,7vw,96px) 0;border-top:1px solid #20252d;}
.best-seller-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px;margin-bottom:38px;}
.best-seller-heading .eyebrow{margin:0 0 10px;color:#d7ae62;}
.best-seller-heading h2{margin:0;color:#fff;font:600 clamp(38px,5vw,68px)/.92 "Cormorant Garamond",Georgia,serif;letter-spacing:-.045em;}
.best-seller-heading__aside{display:flex;flex-direction:column;align-items:flex-end;gap:10px;padding-bottom:4px;text-align:right;}
.best-seller-heading__aside span{font:600 10px/1 var(--data);letter-spacing:.15em;text-transform:uppercase;color:#989da5;}
.best-seller-heading__aside a{min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid #d7ae62;color:#fff;font-size:13px;font-weight:700;}
.best-seller-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;cursor:grab;touch-action:pan-y;overscroll-behavior-inline:contain;scrollbar-width:none;padding:2px max(var(--pad),calc((100vw - var(--maxw))/2)) 10px 0;}
.best-seller-track::-webkit-scrollbar{display:none;}
.best-seller-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none;}
.best-seller-track.is-dragging *{pointer-events:none;}
.best-seller-track>*{flex:0 0 clamp(330px,31vw,460px);scroll-snap-align:start;}
.bscard{position:relative;min-width:0;background:#f4eee4;color:#101318;overflow:hidden;}
.bscard__link{display:block;}
.bscard__visual{position:relative;display:block;aspect-ratio:1.14/1;overflow:hidden;background:linear-gradient(145deg,#f5efe6 0%,#e7ddcf 100%);border-bottom:1px solid rgba(16,19,24,.16);}
.bscard__visual::after{content:"";position:absolute;inset:auto 0 0;height:32%;background:linear-gradient(180deg,transparent,rgba(65,48,28,.08));pointer-events:none;}
.bscard__visual img{position:absolute;z-index:2;left:11%;top:11%;width:78%;height:78%;object-fit:contain;transition:transform .45s ease;}
.bscard:hover .bscard__visual img{transform:translateY(-4px) scale(1.025);}
.bscard__label{position:absolute;z-index:5;left:16px;top:16px;padding:7px 9px;background:#11151b;color:#fff;font:700 9px/1 var(--data);letter-spacing:.13em;text-transform:uppercase;}
.bscard__rank{position:absolute;z-index:1;right:-4px;top:-22px;color:rgba(101,75,40,.13);font:600 clamp(92px,9vw,150px)/1 "Cormorant Garamond",Georgia,serif;letter-spacing:-.08em;}
.bscard.has-timed-sale .bscard__label{top:62px;}
.bscard .sale-countdown--best{left:16px;top:15px;min-width:84px;background:#8a2718;}
.bscard__copy{display:flex;min-height:150px;flex-direction:column;padding:20px 22px 18px;}
.bscard__meta{display:flex;justify-content:space-between;gap:18px;margin-bottom:10px;color:#6c665e;font:600 9px/1.3 var(--data);letter-spacing:.11em;text-transform:uppercase;}
.bscard__copy>strong{display:block;max-width:28ch;font-size:17px;line-height:1.3;}
.bscard__price{display:flex;align-items:baseline;gap:9px;margin-top:auto;padding-top:16px;}
.bscard__price s{color:#56514a;font-size:11px;}.bscard__price b{font-size:15px;color:var(--theme-primary-hover);}
.bscard__swatches{position:relative;z-index:6;padding:0 11px 12px;margin:0!important;background:#f4eee4;}
.bscard__swatches .pcard__swatch>span{border-color:#8d867d;}
.sk-best-card{aspect-ratio:.77;background:linear-gradient(110deg,#171b22 8%,#222833 18%,#171b22 33%);background-size:200% 100%;animation:skeleton-shine 1.2s linear infinite;}

@media (max-width:760px){
  .best-seller-section{padding:52px 0;}
  .best-seller-heading{grid-template-columns:1fr;gap:18px;margin-bottom:26px;}
  .best-seller-heading h2{font-size:44px;}
  .best-seller-heading__aside{align-items:flex-start;text-align:left;}
  .best-seller-track{gap:10px;padding-right:var(--pad);}
  .best-seller-track>*{flex-basis:min(84vw,350px);}
  .bscard__copy{min-height:140px;padding:17px 18px 14px;}
  .bscard__copy>strong{font-size:15px;}
  .bscard__rank{top:-14px;font-size:96px;}
  .bscard .sale-countdown--best{left:10px;top:10px;}
  .bscard__label{left:10px;top:10px;}
  .bscard.has-timed-sale .bscard__label{top:48px;}
  .bscard__swatches{padding:0 7px 8px;}
}

/* Product cards: price on its own line under the title, 8px larger. */
/* :is(#gourmet-apples, ...) lifts specificity above the older #gourmet-apples and .related-track card rules. */
:is(#gourmet-apples, .related-track, body) .pcard .pcard__price{display:flex!important;justify-content:center;margin-top:4px;font-size:28px!important;}
@media (max-width:620px){ .shop:is(#gourmet-apples, .shop) .pcard .pcard__price{font-size:21px!important;} }

/* Mobile cart: heading, product row text, Subtotal label, subtotal price and Checkout 4px larger. */
@media (max-width:620px){
  .cart .cart__row b{font-size:18px!important;}
  .cart .cart__row .ref{font-size:15.5px!important;}
  .cart .cart__row-end .price{font-size:19px!important;}
  .cart .cart__ft .sum__tot .eyebrow{font-size:14px!important;}
  .cart .cart__ft a.btn{font-size:20px!important;}
  .cart [data-cart-total]{font-size:28px!important;}
  .cart [data-cart-label]{font-size:14px!important;}
}

/* Desktop cart: Your cart heading 2px larger. */
@media (min-width:621px){ .cart [data-cart-label]{font-size:12px!important;} }

/* Basket icon and count badge 20% larger. */
.iconbtn img{height:35px;}
.cartdot{min-width:19px;height:19px;padding:0 5px;border-radius:11px;font-size:11.5px;}

/* More Gourmet Apples on phones: one vertical column scrolled with the page.
   Desktop keeps the arrow carousel; its arrows auto-hide here because nothing overflows. */
@media (max-width:620px){
  .related-viewport{overflow:visible;}
  .related-track{flex-direction:column;align-items:center;gap:18px;}
  .related-track .pcard{flex:0 0 auto!important;width:min(100%,380px);}
}

/* Product page: quantity selector beside the price, right-aligned. */
.price-qty{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.price-qty>div:first-child{flex:1 1 auto;min-width:0;}
/* Grid: heading centered over the stepper only; trash sits beside the stepper. */
.price-qty .qty-select{flex:0 0 auto;margin:-5px 0 0;display:grid;grid-template-columns:auto auto;column-gap:14px;row-gap:6px;align-items:center;}
.price-qty .qty-select__row{display:contents;}
.price-qty .qty-select>.eyebrow{grid-column:1;grid-row:1;text-align:center;}
.price-qty .qty-stepper{grid-column:1;grid-row:2;}
.price-qty [data-qty-remove]{grid-column:2;grid-row:2;}

/* More Gourmet Apples arrows: never on phones (vertical list there). */
@media (max-width:620px){ .related-controls{display:none!important;} }
.related-controls[hidden]{display:none!important;}

/* Home and More Gourmet Apples cards: light gray outline. */
#gourmet-apples .pcard,.related-track .pcard{border:1px solid #d1d5db!important;}

/* More Gourmet Apples heading: 6px smaller on desktop. */
@media (min-width:951px){.related-heading .h2{font-size:clamp(24px,calc(3.4vw - 6px),40px);}}

/* Product page: 30% less gap between product and More Gourmet Apples. */
.product-main{padding-bottom:clamp(41px,4.9vw,67px);}.related-section{padding-top:clamp(41px,4.9vw,67px);}
@media (max-width:760px){.product-main .pinfo{padding-bottom:45px!important;}.product-main{padding-bottom:33px;}.related-section{padding-top:33px;}}

/* Product image: fixed square box that fits the viewport; size stays the same when another image is selected. */
.galmain{width:min(100%,calc(100svh - 190px));min-width:240px;}

/* Product page desktop: center image + info side by side. */
@media (min-width:761px){.product-main .pdp{grid-template-columns:minmax(0,calc(100svh - 98px)) minmax(340px,460px)!important;justify-content:center;}.gal:has(.thumbs[hidden]) .galmain{margin-inline:auto;}}
/* Description heading: 30% less space above text. */
.pinfo .acc__hd{padding-bottom:10px;}.pinfo .acc__bd>p:first-child:not(.mt0){margin-top:10px;}

/* Mobile: no pinch or double-tap zoom. */
*{touch-action:manipulation;} /* iOS WebKit honours manipulation for double-tap; pinch is blocked in app.js */
/* iOS zooms on focus for inputs under 16px. */
@media (max-width:760px){input,select,textarea{font-size:16px!important;}}
/* Desktop lightbox: 20% larger image. */
@media (min-width:761px){.lbox{padding:24px;}.lbox__fig{max-width:min(1320px,100%);}.lbox__fig img{max-height:min(93.6vh,calc(100vh - 96px));}}

/* Mobile: trash icon 20% bigger. */
@media (max-width:760px){.icon-remove svg{width:21.6px;height:21.6px;}}

/* Price band: full-width strip in the logo red (#C70619) along the bottom of every
   product card, price centered in white. The card becomes a flex column so the band sits
   flush with the bottom edge even when names wrap to different line counts. */
.pcard{display:flex!important;flex-direction:column;overflow:hidden;padding-bottom:0!important;}
/* Outline as an inset ring on an overlay instead of a border: it sits above the
   photo box (whose grey fill would hide it) but below the price band, so the grey
   sides run straight into the red band and the band forms the card's bottom edge. */
#gourmet-apples .pcard,.related-track .pcard,.pcard{border:0!important;box-shadow:none!important;position:relative;}
.pcard::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px #d1d5db;pointer-events:none;}
.pcard .pcard__price{position:relative;z-index:2;}
#gourmet-apples .pcard,.related-track .pcard{padding-bottom:0!important;}
.pcard__link{display:flex!important;flex-direction:column;flex:1;}
.pcard__nameprice{display:flex!important;flex-direction:column;flex:1;margin:0!important;}
.pcard__name{padding:0 12px;margin-bottom:12px;}
.pcard .pcard__price{display:flex!important;justify-content:center;align-items:baseline;gap:10px;margin:auto 0 0!important;padding:12px 10px;background:#C70619;color:#fff;font-size:28px!important;font-weight:400;line-height:1.1;}
.pcard .pcard__price .price__now{color:#fff!important;font-weight:400!important;}
.pcard .pcard__price s{color:rgba(255,255,255,.75)!important;}
.pcard .pcard__price .price__from{color:#fff;font-size:.6em;font-weight:600;}
@media (max-width:620px){.pcard .pcard__price{font-size:21px!important;padding:10px 8px;}}

/* Prices sitewide use the featured-hero price face: Work Sans extra-bold (800).
   The card price band is the one exception and stays regular weight. Struck-through
   "was" prices stay light so the current price reads first. */
.price,.price .price__now,.pinfo .price{font-family:var(--display)!important;font-weight:800!important;}
.price s{font-weight:400!important;}
/* Band price: same face as the hero price (spacing and proportional numerals
   included), at normal weight, $ included, at the digits' size. */
.pcard .pcard__price,.pcard .pcard__price .price__now{font-weight:400!important;letter-spacing:normal!important;font-variant-numeric:normal!important;}
.pcard .pcard__price .price__cur{font-weight:400!important;}
/* Card band price: extra-bold like the hero price; 19px on desktop, 21px on phones (set below).
   :is(#gourmet-apples, ...) matches the id-weighted size rules above. */
:is(#gourmet-apples, .related-track, body) .pcard .pcard__price{font-size:19px!important;}
.pcard .pcard__price,.pcard .pcard__price .price__now,.pcard .pcard__price .price__cur{font-weight:800!important;}
@media (max-width:620px){:is(#gourmet-apples, .related-track, body) .pcard .pcard__price,.shop:is(#gourmet-apples, .shop) .pcard .pcard__price{font-size:21px!important;}}
/* Phone only: benefit bar under the hero, title 18px and line 18px (desktop 16/14). */
@media (max-width:620px){.benefit-bar b{font-size:18px;}.benefit-bar span{font-size:18px;}}

/* Phone only: header logo 15% larger (93px tall, 245px wide). The width cap keeps
   it clear of the Sign In / bag icons on narrow phones, scaling proportionally. */
@media (max-width:760px){.hdr-wordmark img{width:min(245px,calc(100vw - 140px));height:auto;max-width:none;}}
/* Phone only: featured-hero button text 4px larger (12px -> 16px). Narrower side
   padding keeps "BROWSE ALL GOURMET APPLES" on one line; on very narrow phones the
   button grows to fit a wrapped label instead of spilling out of its 54px box. */
@media (max-width:620px){.campaign-hero__actions .btn{font-size:16px!important;padding-left:16px!important;padding-right:16px!important;height:auto!important;min-height:54px;}}

/* About, Contact, Terms and Privacy (footer Help/Policies pages), desktop only: all
   page text 4px smaller than the shared blog/article sizes (title 58->54, sections
   30->26, body 21->17). Phones keep the shared sizes. */
@media (min-width:761px){
  .pghead--info .h1{font-size:54px!important;}
  .prose--info{font-size:17px!important;}
  .prose--info h2{font-size:26px!important;}
}
/* Phone only: footer column labels (HELP, POLICIES) and the © LLC line 4px larger (11->15px, 12->16px). */
@media (max-width:620px){.ft h4{font-size:15px;}.ft__bar{font-size:16px;}}
/* Desktop only: footer column labels (HELP, POLICIES) 4px larger, 11px -> 15px. */
@media (min-width:621px){.ft h4{font-size:15px;}}
/* Phone only: the Help/Policies columns' bottom rules stacked just above the © bar's
   top rule, reading as a double line. Drop the column rules below the link lists so
   only the bar's single line remains; the rule under the logo stays. */
@media (max-width:620px){.ft__cols .ft__col:has(h4){border-bottom:0;}}

/* Product page: CHECKOUT / RETURN TO STORE under the description, sized to the info column. */
.pdp-nav{display:grid;gap:12px;margin-top:24px;width:100%;}
.pdp-nav .btn{height:48px;padding:0 20px;font-size:16px;}
.pdp-nav .pdp-nav__back{background:#000;border-color:#000;color:#fff;}

/* Guest-only checkout: no customer accounts, so the Sign In button is hidden site-wide. */
.iconbtn--account{display:none!important;}

/* Order details (order-details.html): summary + totals on the left, contact/review on the right. */
.od{grid-template-columns:40fr 60fr;}
.od__h{font-size:calc(clamp(26px,3.2vw,42px) - 4px);margin-bottom:8px;}
.sum__mod svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;}
.sum__mod{display:inline-grid;place-items:center;min-width:44px;min-height:44px;background:none;border:0;color:var(--graphite);cursor:pointer;}
.od__card{border:1px solid var(--rule);background:var(--dial-pure);padding:6px 18px 14px;margin:18px 0;}
.od__cardhd{display:flex;justify-content:space-between;align-items:center;}
.od__dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;}
.od__dl dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist-text);align-self:center;}
.od__dl dd{margin:0;overflow-wrap:anywhere;}
.od__pay-note{margin-top:10px;text-align:center;}
.od__help{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule);}
.od--done{grid-template-columns:1fr;}
@media (max-width:860px){.od{grid-template-columns:1fr;}.od__sum{position:static;}}
.od__paylbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist-text);margin:4px 0 10px;}
.od__pay{display:grid;gap:10px;}
.od__pay .btn{font-size:18px;}
.od__wallet{background:#000;border-color:#000;color:#fff;}
.od__wallet:hover{background:#222;border-color:#222;}
.od__done-eyebrow{font-size:14px;}
.sum__end .sum__ctl{grid-column:2/4;grid-row:2;justify-self:end;align-self:center;display:flex;align-items:center;gap:2px;}
.sum__ctl .qty-stepper{height:36px;}
.sum__ctl .qty-stepper__btn{width:30px;}
.sum__ctl .qty-stepper__input{width:34px;}
#odTotals .sum__line .price{color:#111;}
/* Order details: item price + pencil flush right over the totals column; prices +2px; plain Return to Cart link */
.od__sum .sum__end .price{justify-self:end;font-size:calc(1em + 2px);}
.od__sum .sum__end .sum__mod{justify-self:end;margin-right:-12px;}
.od__back .btn--text{border:0;border-radius:0;padding:0;background:none;box-shadow:none;}
.od__back__arrow{font-size:calc((1em + 4px) * 3);line-height:1;margin-right:6px;}
.sum__mod,.sum .sum__mod{color:#8a8a8a;}
/* Cart page: trash glyph flush with the row's right edge (its 44px tap box overhangs); stepper follows, gap unchanged. */
.sum__ctl .icon-remove{margin-right:-13px;}
@media (max-width:760px){.sum__ctl .icon-remove{margin-right:-11px;}}
/* Review step: note +6px; "Pay $X with" label +4px, bold black. */
.od__review-note{font-size:18.5px;}
.od__paylbl{font-size:19px;font-weight:700;color:#000;margin:2lh 0 1lh;}
/* Checkout page: no cart icon/badge in the header. */
.pg-checkout [data-open="cart"]{display:none!important;}
/* Payment buttons: label + large padlock. */
.od__pay .btn{display:flex;align-items:center;justify-content:center;gap:12px;}
.od__lock{width:28px;height:28px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
/* Payment method logos before each label. */
.od__brand{width:22px;height:22px;flex:0 0 auto;}
.od__brand--g{background:#fff;border-radius:50%;padding:3px;width:26px;height:26px;}
.od__cards{display:inline-flex;gap:4px;flex:0 0 auto;}
.od__cards svg{width:34px;height:22px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.15);}
/* Pay buttons: logos sit as far left of the label as the padlock's visible glyph sits right of it
   (lock glyph has ~6px inner padding in its 28px box, so logos get +6px). Apple logo +10%. */
.od__pay .btn>.od__brand,.od__pay .btn>.od__cards{margin-right:6px;}
.od__brand:not(.od__brand--g){width:24.2px;height:24.2px;}
/* Pay buttons: let a wrapped label grow the button instead of spilling out of it. */
.od__pay .btn{height:auto;min-height:54px;padding:10px 24px;line-height:1.2;text-align:center;}
/* Apple/Google Pay labels read slightly high next to their logos; nudge text only. */
.od__wlbl{position:relative;top:1px;}
/* Per-product prices: cart page + slide-out cart, 15px → 17px. */
#sumrows .sum__row .price,[data-cart-body] .cart__row-end .price{font-size:17px;}
/* SKU under product name on cart + checkout pages (matches slide-out cart's ref line). */
.sum__sku{display:block;margin-top:4px;font-size:11.5px;font-weight:400;letter-spacing:.03em;color:var(--mist-text);}
/* Mobile: per-product prices another +2px (17 → 19). */
@media (max-width:760px){#sumrows .sum__row .price,[data-cart-body] .cart__row-end .price{font-size:19px;}}
/* Slide-out cart rows laid out like the cart page: name | price on top, stepper + trash bottom-right,
   trash glyph flush right; stepper 20% smaller (46/44px → 37/35px). */
.cart__row{grid-template-rows:auto auto;row-gap:4px;}
.cart__row>img{grid-row:span 2;}
.cart__row>div:not(.cart__row-end){grid-column:2;grid-row:1;}
.cart__row .cart__row-end{display:contents;}
.cart__row .cart__row-end .price{grid-column:3;grid-row:1;justify-self:end;}
.cart__ctl{grid-column:2/4;grid-row:2;justify-self:end;align-self:center;display:flex;align-items:center;gap:2px;}
.cart__ctl .qty-stepper{margin-top:0;height:37px;}
.cart__ctl .qty-stepper__btn{width:35px;}
.cart__ctl .qty-stepper__input{width:35px;}
.cart__ctl .icon-remove{margin-right:-13px;}
@media (max-width:760px){.cart__ctl .icon-remove{margin-right:-11px;}}
/* Slide-out stepper: identical to the cart page's (36px tall, 30px buttons, 34px field). The drawer's
   44px tap-target rule (:where(.cart) button) was stretching the +/- buttons, so lift it here. */
.cart__ctl .qty-stepper{height:36px;}
.cart__ctl .qty-stepper__btn{width:30px;min-width:0!important;min-height:0!important;justify-content:center;}
.cart__ctl .qty-stepper__input{width:34px;}
/* Slide-out footer (all widths): drop the second rule above Subtotal; one line of space after it. */
.cart .cart__ft .sum__tot{border-top:0;margin-top:0;padding-top:0;margin-bottom:1lh;}