/* ══════════ TOKENS — unchanged from the approved direction ══════════ */
:root{
  --ink:#12161D; --wool:#1A2029; --wool-2:#232A36;
  --chalk:#F3F0E8; --chalk-dim:#8E96A4;
  --oyster:#EDE9E0;
  --accent:#C15C2C;
  --display:"Bodoni Moda",Georgia,serif;
  --body:"Jost",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono","Roboto Mono",Menlo,monospace;
  --hair:1px solid rgba(243,240,232,.16);
  --pad:clamp(1.1rem,4vw,4.5rem);
}
/* Native cross-document view transitions — every internal navigation (nav
   links, "Shop the collections", footer links, tab bar) crossfades instead
   of hard-jumping to the next page. Both the departing and arriving page
   need this declared for the browser to animate between them, so it lives
   in the shared stylesheet every page already links to. Unsupported
   browsers just ignore the at-rule and navigate normally — no fallback
   code needed, nothing to break. */
@view-transition{
  navigation:auto;
}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.5s;
  animation-timing-function:cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){
    animation:none!important;
  }
}

*,*::before,*::after{box-sizing:border-box}
/* The `hidden` attribute only works because of a UA rule at the very bottom of
   the cascade, so ANY class rule setting `display` silently outranks it and the
   element stays on screen. This has caught us three times now — .btn, and
   .login-view in the admin, both carry their own patch for it, and .head was
   the third: /return set hidden on its intro and the intro kept rendering
   underneath the thank-you screen.
   One rule, so there is no fourth. The per-element patches further down are now
   redundant but harmless, and are left where they are. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--chalk);font-family:var(--body);font-weight:300;
     font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.06;letter-spacing:-.015em}
h1{font-size:clamp(2.6rem,8vw,5.4rem)}
h2{font-size:clamp(2rem,4.6vw,3.2rem)}
/* these line breaks are tuned for desktop's wider canvas — on narrow phones they force
   3 stacked lines regardless of how little room there is, so let text wrap naturally instead */
@media(max-width:600px){.lbreak{display:none}}
h3{font-size:1.15rem;line-height:1.25}
p{margin:0 0 1em}
.mono{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase}
.eyebrow{font-family:var(--mono);font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;
         color:var(--accent);margin:0 0 1.1rem}
.light .eyebrow{color:#A04D25}
[id]{scroll-margin-top:5.5rem} /* keeps anchor targets (e.g. #sizes) clear of the sticky nav */
.wrap{max-width:1220px;margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:clamp(3.5rem,7vw,6.5rem)}
.light{background:var(--oyster);color:#2B2A24}
.light h1,.light h2,.light h3{color:#1B1A16}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
     font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
     padding:.9rem 1.5rem;border:1px solid var(--chalk);color:var(--chalk);
     background:transparent;cursor:pointer;transition:background .22s,color .22s,border-color .22s}
.btn[hidden]{display:none} /* .btn's own display:inline-flex would otherwise override the native [hidden] behavior */
.btn:hover{background:var(--chalk);color:var(--ink)}
.btn-solid{background:var(--accent);border-color:var(--accent);color:#F6F2E9}
.btn-solid:hover{background:#95431C;border-color:#95431C;color:#F6F2E9}
.light .btn{border-color:#2B2A24;color:#2B2A24}
.light .btn:hover{background:#2B2A24;color:var(--oyster)}

/* Nav Order button, once there's something in the cart — brighter than
   the standard --accent used everywhere else (badges, the "&", other
   buttons), scoped to just this one CTA rather than changing the brand
   accent globally. Hover lifts it further; a distinct pressed color on
   :active gives real click feedback (the shared .btn-solid:hover alone
   doesn't fire reliably on touch). */
#navOrderBtn.btn-solid{background:#D9702E;border-color:#D9702E;color:#F6F2E9}
#navOrderBtn.btn-solid:hover{background:#E28345;border-color:#E28345;color:#F6F2E9}
#navOrderBtn.btn-solid:active{background:#A6491E;border-color:#A6491E;color:#F6F2E9}

/* One more shirt away from a bundle price — same eligibility check as the
   shop-page pack nudge (findPackPlan in app.js), just surfaced on the one
   piece of UI that's on every page instead of only the shop grid. */
.order-nudge-dot{width:7px;height:7px;border-radius:999px;background:#F6F2E9;flex:none;
     animation:orderNudgePulse 1.8s ease-in-out infinite}
.order-nudge-dot[hidden]{display:none}
@keyframes orderNudgePulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.order-nudge-dot{animation:none}}
.slip .btn:not(.btn-solid){border-color:#2B2A24;color:#2B2A24} /* slip card is light — same fix as .light .btn */
.slip .btn:not(.btn-solid):hover{background:#2B2A24;color:var(--oyster)}
.wa{width:15px;height:15px;flex:none;fill:currentColor}

/* ── site banner (admin-controlled announcement strip) ──
   Deliberately quieter than both .ticker (solid accent, ambient trust
   copy, always on) and .xhero (heading + CTA, evergreen feature) — this
   is for one specific, time-limited thing, so it reads as a brief notice
   rather than another shout competing with either of those. */
.site-banner{background:var(--wool);border-bottom:var(--hair)}
.site-banner .wrap{position:relative;display:flex;align-items:center;justify-content:center;
     gap:.6rem .9rem;flex-wrap:wrap;padding-block:.65rem;padding-right:2.75rem;
     font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
     text-align:center;color:var(--chalk-dim)}
.site-banner-msg{color:var(--chalk)}
.site-banner-code{border:1px solid rgba(193,92,44,.45);color:var(--accent);padding:.2rem .55rem;
     letter-spacing:.12em;white-space:nowrap}
.site-banner-link{color:var(--accent);text-decoration:underline;text-underline-offset:.2em}
.site-banner-close{position:absolute;right:0;top:50%;transform:translateY(-50%);background:none;
     border:0;color:var(--chalk-dim);cursor:pointer;font-size:1.1rem;line-height:1;padding:.5rem;
     text-transform:none;letter-spacing:normal}
.site-banner-close:hover{color:var(--chalk)}

/* the banner absorbs the nav's own top accent line while it's showing, so
   there's one accent edge at the top of the page, not two stacked */
body.has-banner .nav{border-top:0}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:70;background:rgba(18,22,29,.92);backdrop-filter:blur(14px);
     border-bottom:var(--hair);border-top:3px solid var(--accent)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:62px;gap:1rem}
.mark{font-family:var(--display);font-size:1.15rem;white-space:nowrap}
.mark .amp{font-style:italic;color:var(--accent);padding-inline:.1em}
.nav-links{display:flex;gap:2rem;align-items:center}
.nav-links a{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-dim)}
.nav-links a:hover{color:var(--chalk)}
.nav-links a.active{color:var(--chalk)}
@media(max-width:860px){.nav-links a:not(.btn){display:none}.nav .btn{padding:.6rem 1rem}}
@media(max-width:1150px) and (min-width:861px){.nav-links{gap:1.25rem}}

.nav-toggle{display:none;background:none;border:0;color:var(--chalk);cursor:pointer;padding:.75rem;margin:0}
.nav-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.nav-toggle .bar{transform-box:fill-box;transform-origin:center;
     transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s ease}
.nav-toggle[aria-expanded="true"] .bar-top{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bar-mid{opacity:0}
.nav-toggle[aria-expanded="true"] .bar-bot{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:860px){.nav-toggle{display:flex;align-items:center}}

.nav-mobile{display:flex;flex-direction:column;background:rgba(18,22,29,.98);backdrop-filter:blur(14px);
     border-top:var(--hair);max-height:0;overflow:hidden;opacity:0;visibility:hidden;
     transition:max-height .35s cubic-bezier(.16,1,.3,1),opacity .25s ease,visibility 0s linear .35s}
.nav-mobile.show{max-height:20rem;opacity:1;visibility:visible;
     transition:max-height .35s cubic-bezier(.16,1,.3,1),opacity .25s ease,visibility 0s linear 0s}
.nav-mobile a{padding:1rem var(--pad);font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
     color:var(--chalk-dim);border-bottom:var(--hair)}
.nav-mobile a:hover,.nav-mobile a.active{color:var(--chalk)}
@media(min-width:861px){.nav-mobile{display:none !important}}

/* ══════════ HERO ══════════ */
.hero{border-bottom:var(--hair);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(85% 65% at 78% 18%,rgba(193,92,44,.12),transparent 60%)}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;
         gap:clamp(2rem,5vw,4rem);align-items:center;padding-block:clamp(2.5rem,6vw,4.5rem)}
@media(max-width:900px){.hero-in{grid-template-columns:1fr;gap:2.25rem}}
h1 em{font-style:italic;color:var(--accent)}
.hero .lede{font-size:clamp(1rem,.95rem + .4vw,1.2rem);color:#B7BCC7;max-width:42ch;margin-top:1.6rem}
.hero-actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}
.pricebar{display:flex;margin-top:2.5rem;border-top:var(--hair);flex-wrap:wrap;row-gap:1rem}
.pricebar div{padding:1rem 1.5rem 0 0}
.pricebar div+div{border-left:var(--hair);padding-left:1.5rem}
.pricebar b{font-family:var(--display);font-size:1.4rem;font-weight:400;display:block}
.pricebar span{font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--chalk-dim)}
@media(max-width:420px){
  .pricebar{flex-direction:column;row-gap:0}
  .pricebar div+div{border-left:none;padding-left:0;border-top:var(--hair);margin-top:1rem;padding-top:1rem}
}

.stack{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shot{position:relative;background:linear-gradient(150deg,var(--wool-2),var(--wool) 62%,#0A0D12);
      aspect-ratio:3/4;overflow:hidden}
.shot.tall{grid-row:span 2;aspect-ratio:3/5.2}
.shot::after{content:attr(data-slot);position:absolute;left:.9rem;bottom:.9rem;
  font-family:var(--mono);font-size:.5rem;letter-spacing:.16em;color:rgba(230,227,218,.32)}
/* SLOT → replace background with: url("img/shirt-white.jpg") center/cover; */
@media(max-width:520px){.shot.tall{grid-column:1/-1;grid-row:auto;aspect-ratio:16/9}}

/* ══════════ TICKER ══════════ */
.ticker{background:var(--accent);color:#F6F2E9;overflow:hidden;white-space:nowrap;padding:.6rem 0}
.ticker-in{display:inline-block;animation:slide 26s linear infinite;font-family:var(--mono);
           font-size:.625rem;letter-spacing:.2em;text-transform:uppercase}
.ticker-in span{padding-inline:1.5rem}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ══════════ EXPRESS™ HERO BANNER ══════════ */
.xhero{border-top:3px solid var(--accent);border-bottom:var(--hair);background:var(--wool)}
.xhero-in{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;
          padding-block:clamp(1.75rem,4vw,2.75rem)}
.xhero-in .copy{max-width:48ch}
.xhero-in h2{font-size:clamp(1.5rem,3vw,2.2rem)}
.xhero-in p{color:var(--chalk-dim);margin:.75rem 0 0;font-size:.9375rem}
.xhero-cta{white-space:nowrap;flex:none}
@media(max-width:700px){.xhero-in{flex-direction:column;align-items:flex-start}.xhero-cta{width:100%}}

.statement{text-align:center;border-bottom:var(--hair)}
.statement .wrap{max-width:700px}
.statement h2{font-size:clamp(2.1rem,5.2vw,3.4rem)}
.statement p{color:#B7BCC7;font-size:1.0625rem;max-width:50ch;margin:1.5rem auto 0}

.promise{border-bottom:var(--hair)}
.promise-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem 2rem}
.promise-list li{display:flex;align-items:flex-start;gap:.75rem;font-size:1.0625rem}
.promise-list svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--accent);stroke-width:2.4;margin-top:.2rem}
@media(max-width:900px){.promise-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.promise-list{grid-template-columns:1fr}}

/* ══════════ DELIVERY CHECKER MODAL ══════════ */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(6,7,10,.72);backdrop-filter:blur(3px);
     display:flex;align-items:center;justify-content:center;padding:1.5rem}
.modal-overlay[hidden]{display:none}
.modal-card{background:var(--ink);border:var(--hair);max-width:420px;width:100%;padding:2rem 1.75rem;
     position:relative;max-height:90vh;overflow-y:auto}
.modal-close{position:absolute;top:.7rem;right:.7rem;background:none;border:0;color:var(--chalk-dim);
     font-size:1.5rem;line-height:1;cursor:pointer;padding:.55rem .7rem}
.modal-close:hover{color:var(--chalk)}
.modal-card h3{font-size:1.5rem;margin-top:.2rem}
.modal-sub{color:var(--chalk-dim);font-size:.875rem;margin:.65rem 0 1.5rem}
.modal-divider{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0;
     font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--chalk-dim)}
.modal-divider::before,.modal-divider::after{content:"";flex:1;height:1px;background:rgba(243,240,232,.16)}
.pin-form{display:flex;gap:.6rem}
.pin-form input{flex:1;min-width:0;background:transparent;border:1px solid rgba(243,240,232,.24);
     color:var(--chalk);padding:.75rem .9rem;font-family:var(--mono);font-size:.9375rem;letter-spacing:.04em}
.pin-form input::placeholder{color:var(--chalk-dim)}
.pin-form input:focus{outline:none;border-color:var(--accent)}
.pin-form .btn{padding:.75rem 1.2rem}
.checker-result{margin-top:1.5rem;padding:1.1rem 1.2rem;border:1px solid rgba(243,240,232,.16);font-size:.875rem;
     line-height:1.55}
.checker-result.ok{border-color:#3E7D4C;background:rgba(62,125,76,.12);color:#BFE3C8}
.checker-result.no{border-color:var(--accent);background:rgba(193,92,44,.14);color:#F0CBB2}
.checker-result.wait{border-color:rgba(243,240,232,.16);color:var(--chalk-dim)}
.checker-result b{display:block;font-family:var(--display);font-size:1.1rem;margin-bottom:.35rem;color:var(--chalk);font-weight:400}
.checker-result .btn{margin-top:.9rem}
.modal-note{font-size:.75rem;color:var(--chalk-dim);margin:1.5rem 0 0;text-align:center;line-height:1.5}

/* ══════════ QUICK VIEW ══════════ */
/* Smooth open/close: the scrim fades while the card rises and scales in a
   beat slower, driven by the .qv-open class (added a frame after the
   overlay unhides, removed a frame before it rehides — see openQuickView/
   closeQuickView in app.js) instead of the instant [hidden] cut. */
#qvOverlay{opacity:0;transition:opacity .32s cubic-bezier(.16,1,.3,1)}
#qvOverlay.qv-open{opacity:1}
#qvOverlay .qv-card{transform:translateY(14px) scale(.98);opacity:0;
     transition:transform .38s cubic-bezier(.16,1,.3,1),opacity .3s ease}
#qvOverlay.qv-open .qv-card{transform:translateY(0) scale(1);opacity:1}
.qv-card{background:var(--ink);border:var(--hair);max-width:760px;width:100%;position:relative;
     max-height:90vh;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr}
@media(max-width:680px){
  .qv-card{grid-template-columns:1fr}
  .qv-main{aspect-ratio:16/10} /* shorter than 4/5 on mobile so details aren't pushed off-screen */
}
.qv-imgs{background:var(--wool)}
.qv-main{position:relative;aspect-ratio:4/5;background:linear-gradient(150deg,var(--wool-2),var(--wool) 60%,#0A0D12)}
.qv-main img{width:100%;height:100%;object-fit:cover;display:block}
.qv-main::after{content:attr(data-slot);position:absolute;left:1rem;bottom:1rem;
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;color:rgba(230,227,218,.32)}
.qv-main.has-img::after{display:none}
.qv-thumbs{display:flex;gap:.4rem;padding:.6rem}
.qv-thumb{flex:1;aspect-ratio:1/1;border:1px solid rgba(243,240,232,.16);cursor:pointer;
  background:linear-gradient(150deg,var(--wool-2),var(--wool) 60%,#0A0D12);position:relative;overflow:hidden}
.qv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.qv-thumb.active{border-color:var(--accent)}
.qv-body{padding:1.75rem 1.75rem 2rem;display:flex;flex-direction:column}
@media(max-width:680px){.qv-body{padding:1.4rem 1.4rem 1.75rem}}
.qv-body .coll{margin-bottom:.4rem}
.qv-body h3{font-size:1.6rem;margin-bottom:.5rem}
.qv-body .p{font-family:var(--display);font-size:1.4rem;color:var(--chalk-dim);margin-bottom:1rem}
.qv-body .fab{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--chalk-dim);margin-bottom:1.25rem;line-height:1.6}
.qv-facts{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem;padding:1rem 0;
  border-top:var(--hair);border-bottom:var(--hair)}
.qv-facts div{display:flex;gap:.6rem;font-size:.8125rem;color:#B7BCC7;align-items:baseline}
.qv-facts svg{width:12px;height:12px;flex:none;fill:none;stroke:var(--accent);stroke-width:2.2;margin-top:.15rem}
.qv-stock{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.9rem}
.qv-stock.low{color:var(--accent)}
.qv-stock.ok{color:#7FA98B}
.qv-body .sizes{margin-bottom:1.1rem}
.qv-close{position:absolute;top:.7rem;right:.7rem;z-index:3;background:rgba(18,22,29,.6);border:1px solid rgba(243,240,232,.24);
     color:var(--chalk);font-size:1.25rem;line-height:1;cursor:pointer;padding:.65rem .8rem;backdrop-filter:blur(4px)}
.qv-close:hover{background:var(--ink)}

/* ══════════ TOAST ══════════ */
.toast{position:fixed;left:50%;bottom:1.75rem;transform:translateX(-50%) translateY(10px);z-index:250;
     background:var(--chalk);color:var(--ink);padding:.85rem 1.3rem;font-family:var(--mono);font-size:.75rem;
     letter-spacing:.06em;display:flex;align-items:center;gap:.6rem;opacity:0;pointer-events:none;
     transition:opacity .25s,transform .25s;box-shadow:0 12px 30px rgba(0,0,0,.35);white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{width:14px;height:14px;fill:none;stroke:#3E7D4C;stroke-width:2.5;flex:none}
@media(max-width:860px){.toast{bottom:5.5rem}}

/* ══════════ SKELETON ══════════ */
.skel{position:relative;overflow:hidden;background:var(--wool-2)}
.skel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(243,240,232,.06),transparent);
  animation:shimmer 1.3s infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(243,240,232,.3);border-top-color:var(--chalk);
     border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px;margin-right:.5rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════ HEADS ══════════ */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2.5rem}
.head p:not(.eyebrow){max-width:36ch;margin:0;color:var(--chalk-dim);font-size:.9375rem}
.light .head p:not(.eyebrow){color:#5E594B}
@media(max-width:760px){.head{flex-direction:column;align-items:flex-start;gap:1rem}}

/* ══════════ SHOP ══════════ */
.filters{display:flex;gap:.5rem;margin-bottom:1.75rem;flex-wrap:wrap}
.chip{background:transparent;border:1px solid rgba(230,227,218,.22);color:var(--chalk-dim);
      padding:.45rem 1rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
      text-transform:uppercase;cursor:pointer;transition:.2s}
.chip:hover{color:var(--chalk);border-color:var(--chalk)}
.chip[aria-pressed="true"]{background:var(--chalk);border-color:var(--chalk);color:var(--ink)}
.light .chip{border-color:rgba(43,42,36,.3);color:#6A6558}
.light .chip:hover{color:#2B2A24;border-color:#2B2A24}
.light .chip[aria-pressed="true"]{background:#2B2A24;border-color:#2B2A24;color:var(--oyster)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.75rem)}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr);gap:.85rem}}
@media(max-width:380px){.grid{gap:.6rem}}
.prod{border:var(--hair);display:flex;flex-direction:column;background:#1C222E}
.prod-img{position:relative;aspect-ratio:4/5;cursor:pointer;overflow:hidden;
  background:linear-gradient(150deg,var(--wool-2),var(--wool) 60%,#0A0D12);transition:filter .35s}
.prod:hover .prod-img{filter:brightness(1.12)}
.prod-img img{width:100%;height:100%;object-fit:cover;display:block}
.prod-img::after{content:attr(data-slot);position:absolute;left:.9rem;bottom:.9rem;
  font-family:var(--mono);font-size:.5rem;letter-spacing:.16em;color:rgba(230,227,218,.3)}
.prod-img.has-img::after{display:none}
.prod-img .zoom-hint{position:absolute;top:.7rem;right:.7rem;width:26px;height:26px;
  border:1px solid rgba(243,240,232,.28);border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(18,22,29,.55);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s}
.prod:hover .zoom-hint{opacity:1}
@media(hover:none){.prod-img .zoom-hint{opacity:1}} /* no hover on touch — show it plainly instead */
.prod-img .zoom-hint svg{width:12px;height:12px;fill:none;stroke:var(--chalk);stroke-width:2}
.badge{position:absolute;top:.7rem;left:.7rem;font-family:var(--mono);font-size:.5625rem;
  letter-spacing:.12em;text-transform:uppercase;padding:.3rem .55rem;z-index:2}
.badge-low{background:var(--accent);color:#F6F2E9}
.badge-out{background:rgba(18,22,29,.85);color:var(--chalk-dim);border:1px solid rgba(243,240,232,.24)}
.prod-body{padding:1.1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.prod-top{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}
.prod-top .p{font-family:var(--display);font-size:1.15rem;white-space:nowrap}
.coll{font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;
           color:var(--accent);margin:0 0 .3rem}
.prod .fab{font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;
           color:var(--chalk-dim);margin:0}
.sizes{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:auto}
.size{width:2.4rem;height:2.4rem;border:1px solid rgba(230,227,218,.24);background:transparent;
      color:var(--chalk-dim);font-family:var(--mono);font-size:.75rem;cursor:pointer;transition:.15s}
.size:hover:not([disabled]){border-color:var(--chalk);color:var(--chalk)}
.size[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#F6F2E9}
.size[disabled]{opacity:.28;cursor:not-allowed;text-decoration:line-through}
.add{width:100%;margin-top:auto;padding:.75rem;background:transparent;border:1px solid var(--chalk);color:var(--chalk);
     font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
     cursor:pointer;transition:.2s}

.add:hover{background:var(--chalk);color:var(--ink)}
.add.done{background:var(--accent);border-color:var(--accent);color:#F6F2E9}

/* Grid card content is mobile-first minimal — image, name, price and one
   CTA that opens quick view. Desktop's 3-column grid (≥901px, same
   breakpoint the grid itself switches at) has room for the full picker
   inline instead, so it swaps back in and the CTA swaps out. */
.prod .fab, .prod .sizes{display:none}
.prod-body .add[data-add]{display:none}
@media(min-width:901px){
  .prod .fab{display:block}
  .prod .sizes{display:flex}
  .prod-body .add[data-add]{display:block}
  .prod-body .add.select-size{display:none}
}
@media(max-width:480px){
  /* grid instead of flex-wrap keeps all 4 sizes on one line in quick view's
     narrow single-column layout — each button's width shrinks to fit, but
     height stays a full 44px tap target regardless (width and height
     aren't coupled) */
  .prod-body{padding:.9rem .9rem 1rem;gap:.55rem}
  .sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem}
  .size{width:auto;height:2.75rem;font-size:.75rem;padding:0}
  .add{padding:.65rem;font-size:.5625rem}
}

/* ══════════ ORDER SLIP ══════════ */
.slip-sec{background:var(--wool);border-block:var(--hair)}
.slip-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:860px){.slip-grid{grid-template-columns:1fr}}
.slip{background:var(--oyster);color:#25241E;padding:1.6rem 1.5rem 1.5rem;position:relative;
      font-family:var(--mono);font-size:.75rem;letter-spacing:.04em}
.slip::before,.slip::after{content:"";position:absolute;left:0;right:0;height:8px;
  background:repeating-linear-gradient(90deg,var(--oyster) 0 9px,transparent 9px 18px)}
.slip::before{top:-8px}
.slip::after{bottom:-8px}
.slip h3{font-family:var(--mono);font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;
         color:#6A6558;margin:0 0 1.1rem;padding-bottom:.8rem;border-bottom:1px dashed rgba(37,36,30,.35)}
.slip-rows{display:flex;flex-direction:column;gap:.55rem;min-height:4.5rem}
.slip-row{display:grid;grid-template-columns:1fr auto auto;gap:.8rem;align-items:baseline}
.slip-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slip-row .amt{font-variant-numeric:tabular-nums}
.slip-row .x{border:0;background:none;color:var(--accent);cursor:pointer;padding:.5rem;margin:-.5rem -.5rem -.5rem 0;font-size:.95rem;line-height:1}
.slip-bundle-items{margin-top:-.3rem;color:#6A6558;font-size:.6875rem;line-height:1.5;white-space:normal}
.slip-empty{color:#8A8578}
.slip-total{display:flex;justify-content:space-between;margin-top:1.1rem;padding-top:.9rem;
            border-top:1px dashed rgba(37,36,30,.35);font-size:.875rem;letter-spacing:.1em;text-transform:uppercase}
.slip-total b{font-weight:500;font-variant-numeric:tabular-nums}
.slip-fields{display:flex;flex-direction:column;gap:.85rem;margin-top:1.1rem;padding-top:1rem;
             border-top:1px dashed rgba(37,36,30,.35)}
.slip-fields label{display:block;font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:#6A6558}
.slip-fields input{display:block;width:100%;margin-top:.4rem;padding:.5rem .05rem;background:transparent;
     border:0;border-bottom:1px solid rgba(37,36,30,.35);font-family:var(--mono);font-size:.8125rem;
     letter-spacing:.02em;color:#25241E;text-transform:none}
.slip-fields input::placeholder{color:#A8A297}
.slip-fields input:focus{outline:none;border-color:var(--accent)}
.slip-fields input.err{border-color:#A8342A}
.slip-fields input.err::placeholder{color:#A8342A}
.slip .btn{width:100%;margin-top:1.25rem;border-color:var(--accent)}
.slip-actions{display:flex;gap:.6rem;margin-top:1.25rem;flex-wrap:wrap}
.slip-actions .btn{flex:1;min-width:150px;width:auto;margin-top:0}
.slip-note{font-size:.5625rem;letter-spacing:.1em;color:#6A6558;text-transform:uppercase;
           margin:.8rem 0 0;text-align:center;line-height:1.5}
.slip-cod-note{font-size:.75rem;color:#6A6558;margin:.75rem 0 0;line-height:1.5;text-align:center}
.slip-cod-note strong{color:#25241E}
/* Subtotal/discount breakdown — only rendered once a coupon is on, so an
   ordinary order still reads as a single Total line. */
.slip-breakdown{margin-top:1.1rem;padding-top:.9rem;border-top:1px dashed rgba(37,36,30,.35);
                display:flex;flex-direction:column;gap:.4rem}
.slip-breakdown[hidden]{display:none}
.slip-breakdown-row{display:flex;justify-content:space-between;font-size:.8125rem;color:#6A6558;
                    font-variant-numeric:tabular-nums}
.slip-breakdown-row.is-discount{color:#3E7D4C}
.slip-breakdown-row.is-discount b{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.06em}
.slip-breakdown-row[hidden]{display:none}
/* With a breakdown above it the Total already sits under a dashed rule, so
   the one it draws for itself would double up. */
.slip-breakdown:not([hidden]) + .slip-total{margin-top:.55rem;padding-top:.55rem;border-top:0}
.slip-coupon{margin-top:1rem;padding-top:1rem;border-top:1px dashed rgba(37,36,30,.35)}
.slip-coupon-entry{display:flex;gap:.5rem;align-items:stretch}
.slip-coupon-entry[hidden]{display:none}
.slip-coupon-entry input{flex:1;min-width:0;padding:.55rem .6rem;background:transparent;
     border:1px solid rgba(37,36,30,.35);font-family:var(--mono);font-size:.8125rem;
     letter-spacing:.08em;color:#25241E;text-transform:uppercase}
.slip-coupon-entry input::placeholder{color:#A8A297;text-transform:none;letter-spacing:.02em}
.slip-coupon-entry input:focus{outline:none;border-color:var(--accent)}
.slip .slip-coupon-entry .btn{width:auto;flex:0 0 auto;margin-top:0;padding-left:1.1rem;padding-right:1.1rem}
.slip-coupon-applied{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
                     padding:.6rem .7rem;border:1px solid rgba(62,125,76,.45);background:rgba(62,125,76,.1)}
.slip-coupon-applied[hidden]{display:none}
.coupon-tick{color:#3E7D4C;font-size:.875rem;line-height:1}
.coupon-applied-text{flex:1;min-width:0;font-size:.8125rem;color:#1F4A29}
.coupon-applied-text b{font-family:var(--mono);font-weight:500;letter-spacing:.06em}
.slip .slip-coupon-applied .text-link-btn{color:#1F4A29;font-size:.75rem}
.slip-coupon-msg{margin:.55rem 0 0;font-size:.75rem;line-height:1.5}
.slip-coupon-msg[hidden]{display:none}
.slip-coupon-msg.ok{color:#1F4A29}
.slip-coupon-msg.no{color:#7A241C}
/* On a narrow slip the code + saving can't share a line with Remove without
   the last word wrapping under it and leaving Remove stranded beside an
   orphan. Below this width Remove takes a line of its own, right-aligned,
   so the banner reads as two clean rows instead. */
@media(max-width:560px){
  .slip-coupon-applied{align-items:flex-start}
  .slip .slip-coupon-applied .text-link-btn{flex:0 0 100%;text-align:right;margin-top:.15rem}
}
.slip-location-note{margin:.6rem 0 0;text-align:center}
.slip-whatsapp-alt{margin:.9rem 0 0;text-align:center}
/* Deliberately understated — a plain text link, not a button, for the two
   things that are now secondary to the main flow: GPS (pin code already
   covers this automatically) and WhatsApp (COD/Online are now primary). */
.text-link-btn{background:none;border:0;padding:0;font-family:var(--body);
     font-size:.75rem;letter-spacing:0;text-transform:none;color:var(--chalk-dim);
     text-decoration:underline;cursor:pointer}
.text-link-btn:hover{color:var(--chalk)}
.text-link-btn:disabled{opacity:.6;cursor:default;text-decoration:none}
/* The Order slip is a light card sitting on a dark page — same override
   pattern .light .btn already uses — so this one link style reads
   correctly in both places instead of needing two different classes. */
.slip .text-link-btn{color:#6A6558}
.slip .text-link-btn:hover{color:#25241E}

.reserve-form{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.reserve-form input{background:transparent;border:1px solid rgba(243,240,232,.24);
     color:var(--chalk);padding:.75rem .9rem;font-family:var(--body);font-size:.9375rem}
.reserve-form input::placeholder{color:var(--chalk-dim)}
.reserve-form input:focus{outline:none;border-color:var(--accent)}
.reserve-form .btn{width:100%;margin-top:.4rem}
.reserve-status{margin-top:1rem;padding:.85rem 1rem;border:1px solid rgba(243,240,232,.16);font-size:.8125rem;line-height:1.6}
.reserve-status.ok{border-color:#3E7D4C;background:rgba(62,125,76,.12);color:#BFE3C8}
.reserve-status.err{border-color:var(--accent);background:rgba(193,92,44,.14);color:#F0CBB2}

.slip-location-result{margin-top:.9rem;padding:1rem 1.1rem;border:1px solid rgba(37,36,30,.18);
     font-size:.8125rem;line-height:1.5;text-align:center}
.slip-location-result.yes{border-color:#3E7D4C;background:rgba(62,125,76,.08)}
.slip-location-result.err{border-color:#A8342A;color:#6A6558}
/* The quiet "you asked, here's the no" answer for an explicit "use my
   location" click that turns out to be outside the zone — deliberately
   not boxed like .yes/.err, just a small note with no visual weight. */
.slip-location-result.plain{margin-top:.5rem;padding:0;border:0;color:#6A6558;font-size:.75rem;text-align:center}
.slip-location-result b{display:block;font-family:var(--display);font-size:1rem;margin-bottom:.3rem;font-weight:400;color:#25241E}
.express-choice{display:flex;flex-direction:column;gap:.6rem;margin-top:.8rem;padding-top:.8rem;
     border-top:1px dashed rgba(37,36,30,.18);text-align:left}
.express-choice-option{display:flex;align-items:flex-start;gap:.6rem;font-size:.8125rem;color:#25241E;cursor:pointer}
.express-choice-option input{margin-top:.2rem;width:16px;height:16px;flex:none;accent-color:var(--accent)}
.express-choice-option i{font-style:normal;color:#A8342A;font-size:.75rem;display:block;margin-top:.2rem}

/* ── pay online status ── */
.pay-status{margin-top:1rem;padding:.85rem 1rem;border:1px solid rgba(37,36,30,.35);
     font-size:.75rem;line-height:1.6}
.pay-status[hidden]{display:none}
.pay-status.ok{border-color:#3E7D4C;background:rgba(62,125,76,.12);color:#1F4A29}
.pay-status.no{border-color:#A8342A;background:rgba(168,52,42,.1);color:#7A241C}
.pay-status b{display:block;font-family:var(--display);font-size:1rem;margin-bottom:.3rem;font-weight:400}
.pay-status .btn{width:100%;margin-top:.7rem}

/* ══════════ SIZE TABLE ══════════ */
.tabs{display:flex;gap:.5rem;margin-bottom:1.5rem}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.875rem;min-width:430px}
th,td{text-align:left;padding:.85rem 1rem .85rem 0;border-bottom:1px solid rgba(43,42,36,.18)}
th{font-family:var(--mono);font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;
   color:#6A6558;font-weight:400}
td{font-variant-numeric:tabular-nums;color:#4A4638}
td:first-child{font-family:var(--display);font-size:1.15rem;color:#1B1A16}

/* ══════════ PACK NUDGE ══════════
   Snackbar-style prompt offering to auto-complete a bundle, styled after
   .toast above — fixed, bottom-centered, same mobile tab-bar clearance —
   but carries a message plus one CTA button instead of just an icon+text. */
.pack-nudge{position:fixed;left:50%;bottom:1.75rem;transform:translateX(-50%) translateY(10px);
     z-index:250;width:340px;max-width:calc(100vw - 2.5rem);background:var(--ink);border:var(--hair);
     padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.65rem;
     box-shadow:0 12px 30px rgba(0,0,0,.35);opacity:0;pointer-events:none;
     transition:opacity .25s,transform .25s}
.pack-nudge.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.pack-nudge-close{position:absolute;top:.35rem;right:.45rem;background:none;border:0;color:var(--chalk-dim);
     font-size:1.1rem;line-height:1;cursor:pointer;padding:.4rem .55rem}
.pack-nudge-close:hover{color:var(--chalk)}
.pack-nudge-added{display:flex;align-items:center;gap:.45rem;margin:0;
     font-family:var(--mono);font-size:.625rem;letter-spacing:.04em;color:#7FA98B}
.pack-nudge-added svg{width:12px;height:12px;fill:none;stroke:#3E7D4C;stroke-width:2.5;flex:none}
.pack-nudge-msg{margin:0 1.1rem 0 0;font-size:.875rem;color:var(--chalk)}
.pack-nudge-cta{width:100%;padding:.7rem;background:var(--accent);border:1px solid var(--accent);
     color:#F6F2E9;font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
     cursor:pointer;transition:.2s}
.pack-nudge-cta:hover{background:#E28345;border-color:#E28345}
@media(max-width:860px){.pack-nudge{bottom:5.5rem}}

/* ══════════ EXPRESS™ ══════════ */
.xpress{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
@media(max-width:900px){.xpress{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.xpress{grid-template-columns:1fr}}
.xcard{border:var(--hair);padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.55rem}
.xcard h3{font-size:1.05rem}
.xcard p:not(.coll){color:var(--chalk-dim);font-size:.875rem;margin:0}
.xcard .btn{margin-top:.6rem;align-self:flex-start;padding:.6rem 1.05rem;font-size:.6875rem}

/* ══════════ PROOF ══════════ */
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(2rem,5vw,4rem)}
@media(max-width:760px){.rules{grid-template-columns:1fr}}
.rule{display:grid;grid-template-columns:96px 1fr;gap:1.25rem;padding:1.2rem 0;
      border-bottom:var(--hair);align-items:baseline}
.rule dt{font-family:var(--mono);font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.rule dd{margin:0;font-size:.9375rem;color:#B7BCC7}
@media(max-width:440px){.rule{grid-template-columns:1fr;gap:.35rem}}

/* ══════════ NEXT / FOOTER ══════════ */
.next{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;
      border:var(--hair);padding:clamp(1.75rem,4vw,3rem)}
.foot{border-top:var(--hair);padding-block:3rem;padding-bottom:7rem}
@media(min-width:861px){.foot{padding-bottom:2.5rem}}
@media(max-width:760px){.foot{padding-top:2.25rem}} /* bottom padding stays — still clearing the tab bar */
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:2rem}
@media(max-width:760px){
  /* single column, not 2 — the collapsed accordions are one line each now, so
     stacking everything is cheaper than a 2-col grid stretching Shop's row to
     match the taller Brand block next to it */
  .foot-grid{grid-template-columns:1fr;gap:1.5rem}
}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;font-size:.9375rem;color:#B7BCC7}
.foot ul a{display:inline-block;padding:.35rem 0}
.foot a:hover{color:var(--accent)}

/* footer link sections (Shop/Policies/Reach us) — collapsible accordion on mobile,
   where the Policies list especially made the footer very tall; forced open and
   non-interactive on desktop, where there's room to show everything.
   `open` stays on the <details> at all times, on every breakpoint — the browser's
   own native open/close mechanism proved impossible to reliably override or animate
   (newer Chrome hides closed content via an internal pseudo-element, not a plain
   display rule), so instead we always keep it technically "open" and drive the
   actual visual collapse/expand ourselves via the .is-open class below. */
.foot-acc summary{font-family:var(--mono);font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;
     color:var(--chalk-dim);margin:0 0 .9rem;font-weight:400;cursor:pointer;list-style:none;
     display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.foot-acc summary::-webkit-details-marker{display:none}
.foot-acc summary::marker{display:none}
.foot-acc summary::after{content:"+";font-size:.8125rem;color:var(--chalk-dim);transition:transform .2s ease}
@media(max-width:760px){
  .foot-dup{display:none} /* Shirts/Trousers/Express delivery duplicate the mobile tab bar's own destinations */
  .foot-acc > ul{max-height:0;overflow:hidden;opacity:0;
       transition:max-height .35s cubic-bezier(.16,1,.3,1),opacity .25s ease}
  .foot-acc.is-open > ul{max-height:26rem;opacity:1}
  .foot-acc.is-open summary::after{transform:rotate(135deg)} /* "+" rotated into "×" */
}
@media(min-width:761px){
  .foot-acc summary{cursor:default;pointer-events:none}
  .foot-acc summary::after{display:none}
}
/* Markup defaults every .foot-acc to open (so desktop just works with zero CSS
   trickery — no fighting the browser's internal <details> rendering). JS then
   removes `open` on mobile at load time, which lets the browser's own native
   mechanism collapse it correctly rather than us trying to override it. */
.colophon{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;
          padding-top:1.25rem;border-top:var(--hair);font-family:var(--mono);font-size:.5625rem;
          letter-spacing:.14em;text-transform:uppercase;color:#767D89}
@media(max-width:760px){.colophon{margin-top:1.5rem;padding-top:1rem}}

/* ══════════ MOBILE TAB BAR ══════════ */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
     background:rgba(18,22,29,.96);backdrop-filter:blur(12px);border-top:var(--hair);
     padding-bottom:env(safe-area-inset-bottom)}
@media(max-width:860px){.tabbar{display:flex}}
.tabbar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;
     padding:.65rem .4rem .55rem;color:var(--chalk-dim);transition:color .2s ease}
.tabbar-item:hover{color:var(--chalk)}
.tabbar-item.active{color:var(--accent)}
.tabbar-icon-wrap{position:relative;display:inline-flex}
.tabbar-item svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.1;
     stroke-linecap:round;stroke-linejoin:round}
.tabbar-item span:not(.tabbar-badge){font-family:var(--mono);font-size:.5625rem;letter-spacing:.08em;text-transform:uppercase}
.tabbar-badge{position:absolute;top:-5px;right:-9px;min-width:15px;height:15px;padding:0 3px;
     background:var(--accent);color:#F6F2E9;border-radius:999px;
     font-family:var(--mono);font-size:.5625rem;line-height:15px;text-align:center}
.tabbar-badge[hidden]{display:none}

/* Bottom-left corner of the icon, opposite the count badge — the nav pill's
   dot (styles.css line ~91) is desktop-only, since #navOrderBtn is hidden
   below 860px in favor of this tab bar, so mobile needs its own copy of the
   same signal here instead. */
.order-nudge-dot.is-tabbar{position:absolute;bottom:-2px;left:-4px;top:auto}

/* nav's own Order button is redundant once the tab bar covers it on mobile */
@media(max-width:860px){#navOrderBtn{display:none !important}}

/* fine-print labels are fixed-size relative to viewport; nudge them up slightly on very
   large displays where 9px text reads disproportionately small */
@media(min-width:1600px){
  .badge,.foot h4{font-size:.625rem}
}

/* ══════════ REVEAL ══════════ */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.001s !important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ══════════ POLICY / INFO PAGES ══════════ */
.policy{max-width:72ch}
.policy .updated{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
     color:var(--chalk-dim);margin:-.5rem 0 2rem}
.policy h3{font-family:var(--body);font-weight:500;font-size:1.05rem;letter-spacing:.01em;
     margin:2.2rem 0 .75rem;color:var(--chalk)}
.policy h3:first-of-type{margin-top:0}
.policy p{color:#B7BCC7;font-size:.9375rem;line-height:1.7}
.policy ul,.policy ol{color:#B7BCC7;font-size:.9375rem;line-height:1.7;padding-left:1.25rem;margin:0 0 1em}
.policy li{margin-bottom:.4rem}
.policy strong{color:var(--chalk);font-weight:500}
.policy a{text-decoration:underline;text-underline-offset:.15em}
.policy a:hover{color:var(--accent)}
.policy .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.5rem 0}
.policy table{width:100%;border-collapse:collapse;font-size:.8125rem;min-width:520px}
.policy th,.policy td{text-align:left;padding:.7rem .9rem .7rem 0;border-bottom:1px solid rgba(243,240,232,.16);color:#B7BCC7}
.policy th{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;
     color:var(--chalk-dim);font-weight:400}

/* ══════════ REVIEWS — READ SIDE ══════════ */
/* Star rows, the homepage strip and the quick-view list. Every one of these
   is rendered only when there's an approved review behind it (see the
   REVIEWS section in app.js), so none of it has an "empty" state to style. */
.stars{display:inline-flex;gap:.12rem;line-height:0}
.stars svg{width:14px;height:14px;fill:rgba(243,240,232,.22);stroke:none;flex:none}
.stars svg.on{fill:var(--accent)}
.stars.small svg{width:12px;height:12px}
.light .stars svg{fill:rgba(43,42,36,.22)}
.light .stars svg.on{fill:#A04D25}

.rating-row{display:flex;align-items:center;gap:.4rem;font-family:var(--mono);
            font-size:.625rem;letter-spacing:.1em;color:var(--chalk-dim)}
.rating-num{color:var(--chalk);letter-spacing:.08em}
.rating-count{letter-spacing:.1em}
/* The card's rating row sits between the name/price line and the fabric line,
   in a grid whose rows are already gap-spaced — no margin of its own. */
.prod .rating-row{margin:0}

/* ── Homepage strip ── */
.reviews-strip{background:var(--wool);border-block:var(--hair)}
.review-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.75rem);
              margin-top:clamp(2rem,4vw,3rem)}
@media(max-width:900px){.review-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.review-cards{grid-template-columns:1fr}}
.review-card{border:var(--hair);background:#1C222E;padding:1.4rem 1.35rem 1.25rem;margin:0;
             display:flex;flex-direction:column;gap:.85rem}
.review-card blockquote{margin:0;font-family:var(--display);font-size:1.0625rem;line-height:1.45;
                        color:var(--chalk);letter-spacing:-.005em}
.review-card figcaption{display:flex;flex-direction:column;gap:.3rem;margin-top:auto;padding-top:.4rem}
.review-who{font-size:.875rem;color:var(--chalk)}
.review-what{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;
             color:var(--chalk-dim)}
/* The badge is the whole point of the system — it's the one claim on the page
   that the backend actually enforces, so it gets the accent. */
.review-verified{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);
                 font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.review-verified svg{width:10px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:3}

/* ── Quick-view list ── */
.qv-reviews{margin-top:1.5rem;padding-top:1.25rem;border-top:var(--hair)}
.qv-reviews-loading{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
                    text-transform:uppercase;color:var(--chalk-dim)}
.qv-reviews-head{margin-bottom:.9rem}
.qv-fit-note{font-size:.8125rem;color:#B7BCC7;margin:0 0 1rem}
.qv-fit-note b{color:var(--chalk);font-weight:500}
/* No max-height/overflow here on purpose. .qv-card is already the scroll
   container (max-height:90vh, overflow-y:auto), and nesting a second scroll
   area inside it traps a mobile drag in whichever one the finger landed on.
   The list is capped at 20 server-side, so the card's own scroll is enough. */
.qv-review-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1rem}
.qv-review-list li{display:flex;flex-direction:column;gap:.4rem}
.qv-review-top{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.qv-review-who{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;
               text-transform:uppercase;color:var(--chalk-dim)}
.qv-review-list p{margin:0;font-size:.875rem;line-height:1.55;color:#B7BCC7}
.qv-review-more{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;
                color:var(--chalk-dim);margin:.9rem 0 0}

/* ══════════ REVIEWS — WRITE SIDE (/review) ══════════ */
.rv-panel{border:var(--hair);background:#1C222E;padding:clamp(1.4rem,3vw,2rem);
          max-width:34rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
.rv-fields{display:flex;flex-direction:column;gap:1.1rem;margin-bottom:1.5rem}
.rv-fields label{display:block;font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;
                 text-transform:uppercase;color:var(--chalk-dim)}
.rv-fields input{display:block;width:100%;margin-top:.5rem;padding:.6rem .05rem;background:transparent;
                 border:0;border-bottom:1px solid rgba(243,240,232,.24);font-family:var(--mono);
                 font-size:.9375rem;letter-spacing:.04em;color:var(--chalk);text-transform:none}
.rv-fields input::placeholder{color:#5E6674}
.rv-fields input:focus{outline:none;border-color:var(--accent)}

.rv-msg{font-size:.8125rem;line-height:1.5;margin:.9rem 0 0}
.rv-msg.bad{color:#E08A6E}
.rv-note{font-size:.75rem;line-height:1.6;color:var(--chalk-dim);margin:1.1rem 0 0}
.rv-note a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.rv-note b{color:var(--chalk);font-weight:400}

.rv-items{display:flex;flex-direction:column;gap:1.25rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
.rv-item{border:var(--hair);background:#1C222E;padding:clamp(1.2rem,2.5vw,1.6rem);
         display:flex;flex-direction:column;gap:1.4rem;transition:border-color .25s}
.rv-item-error{border-color:#A8342A}
.rv-item-head{display:flex;align-items:center;gap:.9rem}
.rv-thumb{width:56px;height:70px;flex:none;background:linear-gradient(150deg,var(--wool-2),var(--wool) 60%,#0A0D12);
          border:1px solid rgba(243,240,232,.1);overflow:hidden}
.rv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rv-item-head h3{font-size:1.15rem;margin:0}
.rv-size{font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;
         color:var(--chalk-dim);margin:.35rem 0 0}

.rv-field{display:flex;flex-direction:column;gap:.6rem}
.rv-label{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;
          color:var(--chalk-dim)}
.rv-label em{font-style:normal;opacity:.6}

.rv-stars{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.rv-star{width:2.5rem;height:2.5rem;padding:0;border:0;background:transparent;cursor:pointer;
         display:inline-flex;align-items:center;justify-content:center;line-height:0}
.rv-star svg{width:26px;height:26px;fill:rgba(243,240,232,.2);transition:fill .15s,transform .15s}
.rv-star.on svg{fill:var(--accent)}
.rv-star:hover svg{transform:scale(1.12)}
.rv-star-word{margin-left:.5rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
              text-transform:uppercase;color:var(--accent)}

.rv-fit{display:flex;gap:.5rem;flex-wrap:wrap}
.rv-chip{padding:.5rem .95rem;border:1px solid rgba(243,240,232,.24);background:transparent;
         color:var(--chalk-dim);font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
         text-transform:uppercase;cursor:pointer;transition:.18s}
.rv-chip:hover{border-color:var(--chalk);color:var(--chalk)}
.rv-chip[aria-checked="true"]{background:var(--accent);border-color:var(--accent);color:#F6F2E9}

.rv-body{width:100%;background:transparent;border:1px solid rgba(243,240,232,.24);
         padding:.75rem .85rem;color:var(--chalk);font-family:var(--body);font-weight:300;
         font-size:.9375rem;line-height:1.6;resize:vertical}
.rv-body::placeholder{color:#5E6674}
.rv-body:focus{outline:none;border-color:var(--accent)}
.rv-count{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;color:var(--chalk-dim);
          align-self:flex-end}

.rv-submit-row{margin-top:1.75rem}
.rv-submit-row .btn{width:100%;max-width:22rem}

.rv-done{text-align:center;max-width:34rem;margin:clamp(2rem,6vw,4rem) auto;
         display:flex;flex-direction:column;align-items:center;gap:1rem}
.rv-done-tick{width:44px;height:44px;fill:none;stroke:var(--accent);stroke-width:2.2;
              stroke-linecap:round;stroke-linejoin:round}
.rv-done p{color:#B7BCC7;margin:0 0 .5rem}

/* ══════════ RETURNS / EXCHANGES (/return) ══════════ */
/* Built on the /review furniture — .rv-panel, .rv-fields, .rv-msg, .rv-note,
   .rv-body, .rv-done are all reused as-is. Only what a four-step form needs
   on top of a one-step form is new below. */

/* ── Breadcrumb ── */
/* This page and /review are only ever arrived at from a link somebody sent,
   so unlike the browsable pages there's no nav trail behind you. */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
       font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;
       color:var(--chalk-dim);margin:0 0 clamp(1.5rem,4vw,2.25rem)}
.crumb a{color:var(--chalk-dim);transition:color .2s}
.crumb a:hover{color:var(--accent)}
.crumb span[aria-hidden]{opacity:.4}
.crumb [aria-current]{color:var(--chalk)}

/* ── Progress ── */
.ret-progress{max-width:34rem;margin:0 0 clamp(1.25rem,3vw,1.75rem)}
.ret-progress-label{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
                    text-transform:uppercase;color:var(--accent);margin:0 0 .75rem}
.ret-steps{list-style:none;display:flex;gap:.4rem;margin:0;padding:0}
/* Each step is an equal share of the bar, so the row reads as a progress
   meter at a glance and only resolves into four labels once you look. */
.ret-step{flex:1;display:flex;align-items:center;gap:.4rem;padding-top:.5rem;
          border-top:2px solid rgba(243,240,232,.16);
          font-family:var(--mono);font-size:.5625rem;letter-spacing:.1em;
          text-transform:uppercase;color:var(--chalk-dim);transition:.25s}
.ret-step span{width:1.15rem;height:1.15rem;flex:none;display:inline-flex;
               align-items:center;justify-content:center;border-radius:50%;
               border:1px solid rgba(243,240,232,.24);font-size:.5rem;letter-spacing:0}
.ret-step.done{border-top-color:var(--accent);color:var(--chalk-dim)}
.ret-step.done span{background:var(--accent);border-color:var(--accent);color:#F6F2E9}
.ret-step.on{border-top-color:var(--accent);color:var(--chalk)}
.ret-step.on span{border-color:var(--accent);color:var(--accent)}
/* Under ~420px four labels plus four bullets won't fit on one line without
   wrapping into a mess — the bar and the numbers still tell the story, and
   the live-region label above spells out where you are in words. */
@media(max-width:420px){
  .ret-step{font-size:0;gap:0;justify-content:center}
  .ret-step span{font-size:.5rem}
}

/* ── Step 2 · reason ── */
.ret-order-line{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;
                text-transform:uppercase;color:var(--accent);margin:0 0 .9rem}
.ret-q{font-size:clamp(1.25rem,3.5vw,1.6rem);margin:0 0 .5rem}
.ret-sub{font-size:.875rem;line-height:1.65;color:#B7BCC7;margin:0 0 1.4rem}

/* The one statement of how the fee works, sitting above the reason list.
   Deliberately quieter than .ret-fee below it — that one reacts to what you
   picked, this one is the standing rule and shouldn't compete with it. */
.ret-rule{margin:1rem 0 0;padding:.85rem 1rem;font-size:.8125rem;line-height:1.65;
          color:#B7BCC7;background:rgba(243,240,232,.05);
          border-left:2px solid rgba(243,240,232,.28)}
.ret-rule b{color:var(--chalk);font-weight:400}

.ret-reasons{display:flex;flex-direction:column;gap:.6rem;margin-top:1.25rem}
.ret-reason{display:flex;align-items:flex-start;gap:.85rem;
            padding:.9rem 1rem;border:1px solid rgba(243,240,232,.24);cursor:pointer;
            transition:border-color .2s,background .2s}
.ret-reason:hover{border-color:rgba(243,240,232,.5)}
/* The native radio is kept in the flow rather than hidden and redrawn: it
   already has the focus ring, the keyboard arrow behaviour and the accent
   colour, and a hand-rolled one would only be a worse version of all three. */
.ret-reason input{flex:none;width:1.05rem;height:1.05rem;margin:.15rem 0 0;
                  accent-color:var(--accent)}
.ret-reason:has(input:checked){border-color:var(--accent);background:rgba(193,92,44,.08)}
.ret-reason:focus-within{border-color:var(--accent)}
.ret-reason-body{display:flex;flex-direction:column;gap:.2rem}
.ret-reason-body b{font-weight:400;font-size:.9375rem;color:var(--chalk)}
.ret-reason-body em{font-style:normal;font-size:.8125rem;line-height:1.5;color:var(--chalk-dim)}

.ret-fee{margin-top:1.25rem;padding:.85rem 1rem;border-left:2px solid var(--accent);
         background:rgba(193,92,44,.08);font-size:.8125rem;line-height:1.6;color:#B7BCC7}
.ret-fee.is-free{border-left-color:#3E7D4C;background:rgba(62,125,76,.1)}
.ret-fee b{color:var(--chalk);font-weight:400}

/* ── Step 3 · photos ── */
.ret-drop{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;
          padding:clamp(1.5rem,5vw,2.25rem) 1rem;cursor:pointer;
          border:1px dashed rgba(243,240,232,.3);transition:border-color .2s,background .2s}
.ret-drop:hover{border-color:var(--accent);background:rgba(193,92,44,.05)}
.ret-drop svg{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:1.6;
              stroke-linecap:round;stroke-linejoin:round}
.ret-drop-label{font-size:.9375rem;color:var(--chalk)}
.ret-drop-hint{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;
               text-transform:uppercase;color:var(--chalk-dim)}

.ret-thumbs{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}
.ret-thumbs:empty{margin-top:0}
.ret-thumb{position:relative;width:5.5rem;height:6.5rem;
           border:1px solid rgba(243,240,232,.16);overflow:hidden}
.ret-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* 2rem square: this sits over a photo on a phone, so it has to clear the
   minimum comfortable tap target rather than match the ✕ glyph's size. */
.ret-thumb-x{position:absolute;top:0;right:0;width:2rem;height:2rem;padding:0;
             border:0;background:rgba(18,22,29,.78);color:var(--chalk);
             font-size:1.15rem;line-height:1;cursor:pointer}
.ret-thumb-x:hover{background:#A8342A}

/* ── Step 4 · confirm ── */
.ret-summary{margin:1.25rem 0 0;padding:0;display:flex;flex-direction:column}
.ret-summary-row{display:flex;justify-content:space-between;align-items:baseline;gap:1.25rem;
                 padding:.7rem 0;border-bottom:1px solid rgba(243,240,232,.1)}
.ret-summary-row:last-child{border-bottom:0}
.ret-summary dt{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;
                text-transform:uppercase;color:var(--chalk-dim);flex:none}
.ret-summary dd{margin:0;font-size:.9375rem;color:var(--chalk);text-align:right;
                overflow-wrap:anywhere}
.ret-terms{font-size:.8125rem;line-height:1.65;color:var(--chalk-dim);margin:1.4rem 0 0}

/* ── Shared step nav ── */
/* Column on a phone with the forward action on top: on a narrow screen the
   thumb sits at the bottom of the display, and "Back" is the one you'd hit
   by accident if it were down there. */
.ret-nav{display:flex;flex-direction:column-reverse;gap:.7rem;margin-top:1.75rem}
.ret-nav .btn{width:100%}
@media(min-width:560px){
  .ret-nav{flex-direction:row;justify-content:space-between}
  .ret-nav .btn{width:auto;min-width:9rem}
}
.ret-done-sub{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
              text-transform:uppercase;color:var(--accent);margin:.25rem 0 1rem}

/* ── Closed-window block (/return step 1) ── */
.ret-closed-help{margin-top:1.1rem;padding:.95rem 1.1rem;border-left:2px solid #A8342A;
                 background:rgba(168,52,42,.1)}
.ret-closed-help p{margin:0 0 .9rem;font-size:.8125rem;line-height:1.65;color:#B7BCC7}
.ret-closed-help .btn{width:100%}
@media(min-width:560px){.ret-closed-help .btn{width:auto}}

/* ══════════ DELIVERED / ORDER STATUS CARD (/delivered) ══════════ */
.dlv-card{border:var(--hair);background:#1C222E;padding:clamp(1.4rem,3vw,2rem);
          max-width:38rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
.dlv-card-head{display:flex;align-items:flex-start;justify-content:space-between;
               gap:1rem;flex-wrap:wrap}
.dlv-card-head h2{margin:.2rem 0 0;font-size:clamp(1.6rem,5vw,2.2rem)}
.dlv-badge{flex:none;padding:.3rem .7rem;border:1px solid #3E7D4C;color:#7FA98B;
           font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase}
.dlv-facts{margin:1.5rem 0 0;padding:0;display:flex;flex-direction:column}

/* The return window, stated in all three of its states. Neutral when we
   don't know the delivery date, green while it's open, red once it's shut —
   a customer should never first learn their window closed from a refusal. */
.dlv-window{margin-top:1.5rem;padding:.95rem 1.1rem;font-size:.8125rem;line-height:1.65;
            color:#B7BCC7;border-left:2px solid var(--chalk-dim);
            background:rgba(243,240,232,.05)}
.dlv-window.is-open{border-left-color:#3E7D4C;background:rgba(62,125,76,.1)}
.dlv-window.is-closed{border-left-color:#A8342A;background:rgba(168,52,42,.1)}
.dlv-window b{color:var(--chalk);font-weight:400}

.dlv-actions{display:flex;flex-direction:column;gap:.6rem;margin-top:1.5rem}
.dlv-actions .btn{width:100%;text-align:center}
@media(min-width:560px){
  .dlv-actions{flex-direction:row;flex-wrap:wrap}
  .dlv-actions .btn{width:auto}
}
/* A return already in flight, where the "request a return" button would be.
   Reads as status, not as something to press. */
.dlv-inflight{display:inline-flex;align-items:center;padding:.6rem .95rem;
              border:1px dashed rgba(243,240,232,.3);color:var(--chalk-dim);
              font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;
              text-transform:uppercase;line-height:1.5}

/* ══════════ AFTER-DELIVERY CARD (/order) ══════════ */
/* The three things a customer can do once the parcel is in their hands.
   Shown on the order page under the slip, where someone who has come back to
   the site with a delivered order is most likely to look. */
.post-card{border:var(--hair);background:#1C222E;padding:clamp(1.25rem,3vw,1.75rem);
           margin-top:clamp(2rem,5vw,3rem)}
.post-card h3{font-size:1.15rem;margin:.35rem 0 .5rem}
.post-card p{font-size:.875rem;line-height:1.65;color:#B7BCC7;margin:0 0 1.25rem;max-width:44ch}
.post-actions{display:flex;flex-direction:column;gap:.6rem}
.post-actions .btn{width:100%;justify-content:center}
@media(min-width:560px){
  .post-actions{flex-direction:row;flex-wrap:wrap}
  .post-actions .btn{width:auto}
}

/* ══════════ MOBILE FOCUS-ZOOM GUARD ══════════ */
/* Safari on iOS zooms the whole page in when you tap a form control whose text
   computes under 16px — and it never zooms back out on blur, so the enlarged
   layout sticks for the rest of the visit. Every field on the site is set
   smaller than that by design, so at touch widths they all get bumped to
   exactly 16px. Last block in the file on purpose: same specificity as the
   rules above, so source order is what makes these win.
   Do NOT "fix" this with maximum-scale/user-scalable on the viewport tag —
   that stops the zoom by taking pinch-zoom away from everyone. */
@media(max-width:860px){
  .pin-form input,
  .slip-fields input,
  .slip-coupon-entry input,
  .reserve-form input,
  .rv-fields input,
  .rv-body{font-size:16px}
  /* The coupon field is mono + uppercase + letter-spaced, so 16px is the one
     that actually grows next to its Apply button — tighten the tracking and
     padding to buy the characters back. */
  .slip-coupon-entry input{letter-spacing:.04em;padding-left:.5rem;padding-right:.5rem}
}