/* =====================================================================
   VORÉ CLOTHING - STORE V3 · MONOCHROME
   A premium monochrome fashion storefront. Brand identity:
   black · white · greys · Poppins · editorial
   spacing · sharp geometry. Build-free, static, shared across every page.

   THEME MODEL
   The site is two surfaces sharing one token vocabulary:
   · INK surface (default, :root): black chrome + photography — header,
     menus, cart drawer, hero, manifesto, footer, overlays.
   · PAPER surface (scoped, see the MONOCHROME PAPER SCOPE block at the
     end of this sheet): off-white commerce canvas — product sections,
     PDP, collection grids, checkout, legal pages.
   Every component colour routes through the tokens below, so flipping
   the token values under a scope re-themes the whole subtree. The old
   accent token names (--orange/--orange-soft) are kept as ALIASES for
   the monochrome accent so legacy per-page inline styles re-theme
   automatically — no colour in this system is actually orange.
   ===================================================================== */

:root{
  --black:#070707;
  --black-2:#0c0c0c;
  --black-3:#111111;
  --white:#F6F4F0;
  --mute:rgba(246,244,240,.62);
  --faint:rgba(246,244,240,.40);
  --ghost:rgba(246,244,240,.16);
  --orange:#F6F4F0;                    /* accent = white on ink */
  --orange-soft:rgba(246,244,240,.82); /* accent-soft */
  --line:rgba(246,244,240,.14);
  --line-2:rgba(246,244,240,.07);
  --glass:rgba(10,10,10,.78);
  --glass-hi:rgba(246,244,240,.08);   /* liquid-glass top-edge highlight */
  --font:'Poppins',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --pad:clamp(20px,4.4vw,80px);
  --maxw:1560px;
  --hd-h:clamp(64px,7vw,92px);
  --ann-h:38px;
  --top-off:var(--hd-h);
}
html.has-ann{--top-off:calc(var(--hd-h) + var(--ann-h))}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--top-off)}
body{
  background:var(--black);color:var(--white);
  font-family:var(--font);font-weight:400;line-height:1.55;
  overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
html:has(body.is-intro),html:has(body.lock){overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
input,select,textarea{font-family:inherit}
::selection{background:var(--orange);color:var(--black)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- typography ---------- */
.eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--orange)}
.idx{font-size:.68rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--orange)}
.h-display{font-size:clamp(2.6rem,7vw,6.4rem);font-weight:700;line-height:.96;letter-spacing:-.03em}
.h-big{font-size:clamp(1.8rem,4.2vw,3.6rem);font-weight:600;line-height:1.06;letter-spacing:-.02em}
.h-mid{font-size:clamp(1.4rem,2.6vw,2.3rem);font-weight:600;line-height:1.12;letter-spacing:-.015em}
em,.accent{font-style:italic;font-weight:500;color:var(--orange)}
.lede{color:var(--mute);font-size:clamp(1rem,1.4vw,1.18rem);max-width:52ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  padding:1.05em 2em;border-radius:2px;transition:transform .5s var(--ease),background .4s,color .4s,border-color .4s,opacity .4s}
.btn--primary{background:var(--orange);color:var(--black)}
.btn--primary:hover{background:var(--orange-soft);transform:translateY(-2px)}
.btn--ghost{border:1px solid var(--line);color:var(--white)}
.btn--ghost:hover{border-color:var(--orange);color:var(--orange-soft)}
.btn--fill{background:var(--white);color:var(--black)}
.btn--fill:hover{background:var(--orange);transform:translateY(-2px)}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-size:.74rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--orange-soft)}
.link-arrow::after{content:"→";transition:transform .4s var(--ease)}
.link-arrow:hover::after{transform:translateX(5px)}

/* =====================================================================
   BRAND INTRO (homepage only)
   Pure-black splash: a single VORÉ mark fades in, a soft ring reveals
   around it, then the mark shrinks and travels into the navbar. Always
   #000 and identical regardless of system light/dark preference.
   ===================================================================== */
.intro{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;
  overflow:hidden;pointer-events:none}
.intro.is-done{display:none}
.intro__bg{position:absolute;inset:0;background:#000;will-change:opacity}
.intro__ring{position:absolute;top:50%;left:50%;width:clamp(188px,52vw,372px);height:clamp(188px,52vw,372px);
  border:1px solid rgba(255,255,255,.16);border-radius:50%;opacity:0;
  transform:translate(-50%,-50%) scale(.82);transform-origin:center center;
  will-change:transform,opacity;z-index:1}
.intro__mark{position:absolute;top:50%;left:50%;width:clamp(148px,40vw,284px);height:auto;aspect-ratio:1/1;
  opacity:0;transform:translate(-50%,-50%);transform-origin:center center;
  will-change:transform,opacity;z-index:2}
@media (prefers-reduced-motion:reduce){
  .intro{display:none}
  .intro-active .hd,.intro-active .ann{opacity:1}   /* skip straight to final chrome */
}

/* =====================================================================
   ANNOUNCEMENT BAR (marquee, home / collection / PDP only)
   ===================================================================== */
.ann{position:fixed;top:0;left:0;right:0;z-index:902;height:var(--ann-h);
  background:#0D0D0D;color:#F5F5F5;overflow:hidden;display:flex;align-items:center}
.intro-active .ann{opacity:0}
.ann__track{display:flex;align-items:center;width:max-content;white-space:nowrap;
  will-change:transform;transform:translateZ(0);animation:ann-scroll 39s linear infinite}
.ann__half{display:flex;align-items:center;flex:0 0 auto}
.ann__item{display:inline-flex;align-items:center;font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;flex:0 0 auto}
.ann__dot{color:var(--orange);margin:0 1.1em}
@keyframes ann-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (hover:hover) and (pointer:fine){.ann:hover .ann__track{animation-play-state:paused}}
@media (prefers-reduced-motion:reduce){.ann__track{animation:none}}

/* =====================================================================
   HEADER
   ===================================================================== */
.hd{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--hd-h);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),-webkit-backdrop-filter .5s var(--ease),border-color .5s,height .5s var(--ease),top .5s var(--ease)}
html.has-ann .hd{top:var(--ann-h)}
/* Liquid-glass chrome: translucent tint + blur + a hairline top highlight and
   soft base shadow so the bar reads as a single pane of frosted glass. The
   -webkit- prefix is required for the blur to render on iOS/Safari at all. */
.hd.is-stuck{background:rgba(7,7,7,.55);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid var(--line-2);box-shadow:inset 0 1px 0 var(--glass-hi),0 8px 24px -18px rgba(0,0,0,.7)}
.hd--solid{background:rgba(7,7,7,.82);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line-2);box-shadow:inset 0 1px 0 var(--glass-hi)}
.intro-active .hd{opacity:0}                    /* header hidden until intro hands off */
.intro-run .hd{transition:opacity .8s var(--ease)}   /* gentle fade-in only during the animated intro; instant on refresh/reduced-motion */
.hd__brand{display:inline-flex;align-items:center;gap:clamp(.5em,1vw,.9em)}
.hd__mark{height:clamp(30px,3.34vw,44px);width:auto;aspect-ratio:1/1}   /* +15% over the previous clamp(26px,2.9vw,38px) */
.intro-run .hd__mark{opacity:0}                 /* navbar mark hidden until the travelling logo lands on it */
/* Desktop-only browsing links (hidden ≤1000px, see RESPONSIVE block below,
   the same breakpoint the rest of the sheet already treats as "tablet and
   down"). Mobile keeps the hamburger as its one nav entry; this never
   duplicates it, it just gives a desktop visitor a direct path off any
   non-homepage page without opening the full-screen menu first. */
.hd__links{display:flex;align-items:center;gap:clamp(20px,2.6vw,38px)}
.hd__links a{position:relative;font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);transition:color .3s}
.hd__links a::after{content:"";position:absolute;left:0;bottom:-5px;width:100%;height:1px;background:var(--orange);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.hd__links a:hover{color:var(--white)}
.hd__links a:hover::after{transform:scaleX(1);transform-origin:left}
.hd__nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px)}
.hd__act{position:relative;display:inline-flex;align-items:center;gap:.5em;font-size:.78rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase}
.hd__act::after{content:"";position:absolute;left:0;bottom:-5px;width:100%;height:1px;background:var(--orange);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.hd__act:hover::after{transform:scaleX(1);transform-origin:left}
.hd__count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  font-size:.6rem;font-weight:700;border-radius:20px;background:var(--orange);color:var(--black);transition:transform .3s var(--ease)}
.hd__count.pop{transform:scale(1.35)}
.hd__menu{display:inline-flex;align-items:center;gap:.55em;font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.hd__menu-ico{position:relative;width:22px;height:12px}
.hd__menu-ico b{position:absolute;left:0;width:100%;height:1.5px;background:var(--white);transition:transform .4s var(--ease),background .4s}
.hd__menu-ico b:first-child{top:2px}.hd__menu-ico b:last-child{bottom:2px}
.hd__menu:hover .hd__menu-ico b{background:var(--orange)}
body.menu-open .hd__menu-ico b:first-child{transform:translateY(3px) rotate(45deg);background:var(--orange)}
body.menu-open .hd__menu-ico b:last-child{transform:translateY(-3px) rotate(-45deg);background:var(--orange)}

/* =====================================================================
   FULL-SCREEN MENU
   ===================================================================== */
.menu{position:fixed;inset:0;z-index:880;background:rgba(6,6,6,.9);-webkit-backdrop-filter:blur(28px) saturate(1.3);backdrop-filter:blur(28px) saturate(1.3);
  display:flex;flex-direction:column;justify-content:center;padding:var(--pad);
  opacity:0;visibility:hidden;transition:opacity .55s var(--ease),visibility .55s}
body.menu-open .menu{opacity:1;visibility:visible}
.menu__list{display:flex;flex-direction:column;gap:clamp(.1em,1vh,.25em);max-width:var(--maxw);margin:0 auto;width:100%}
.menu__item{display:flex;align-items:baseline;gap:1rem;overflow:hidden}
.menu__item a{position:relative;display:inline-block;font-size:clamp(1.2rem,4vw,3.25rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.02;color:var(--white);opacity:.55;
  transform:translateY(110%);transition:opacity .45s var(--ease),color .45s var(--ease),transform .8s var(--ease)}
body.menu-open .menu__item a{transform:translateY(0)}
.menu__item:nth-child(1) a{transition-delay:.08s}
.menu__item:nth-child(2) a{transition-delay:.15s}
.menu__item:nth-child(3) a{transition-delay:.22s}
.menu__item:nth-child(4) a{transition-delay:.29s}
.menu__item:nth-child(5) a{transition-delay:.36s}
.menu__item a:hover{opacity:1;color:var(--orange-soft)}
.menu__num{font-size:.72rem;font-weight:600;letter-spacing:.2em;color:var(--orange);opacity:0;transition:opacity .5s var(--ease) .3s}
body.menu-open .menu__num{opacity:1}
.menu__foot{max-width:var(--maxw);margin:clamp(30px,5vh,60px) auto 0;width:100%;display:flex;gap:24px;flex-wrap:wrap;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);opacity:0;transition:opacity .6s var(--ease) .4s}
body.menu-open .menu__foot{opacity:1}
.menu__foot a:hover{color:var(--orange-soft)}

/* =====================================================================
   CART DRAWER (dark glass, slide-in)
   ===================================================================== */
.cart{position:fixed;inset:0;z-index:1000;visibility:hidden;pointer-events:none}
.cart.is-open{visibility:visible;pointer-events:auto}
.cart__scrim{position:absolute;inset:0;background:rgba(3,3,3,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .5s var(--ease)}
.cart.is-open .cart__scrim{opacity:1}
.cart__panel{position:absolute;top:0;right:0;height:100%;width:min(460px,92vw);
  background:var(--glass);-webkit-backdrop-filter:blur(28px) saturate(1.4);backdrop-filter:blur(28px) saturate(1.4);border-left:1px solid var(--line);
  box-shadow:inset 1px 0 0 var(--glass-hi),-24px 0 60px -30px rgba(0,0,0,.8);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .6s var(--ease)}
.cart.is-open .cart__panel{transform:none}
.cart__head{display:flex;align-items:center;justify-content:space-between;padding:26px var(--cpad,28px) 18px;border-bottom:1px solid var(--line-2)}
.cart__head h2{font-size:.86rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.cart__close{font-size:1.4rem;line-height:1;color:var(--mute);transition:color .3s,transform .3s var(--ease)}
.cart__close:hover{color:var(--orange);transform:rotate(90deg)}
.cart__body{flex:1;overflow-y:auto;padding:var(--cpad,28px)}
.cart__empty{color:var(--faint);text-align:center;padding:60px 0;font-size:.92rem}
.cart__empty a{color:var(--orange-soft);display:inline-block;margin-top:14px}
.citem{display:grid;grid-template-columns:70px 1fr auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-2)}
.citem__img{width:70px;aspect-ratio:4/5;border-radius:2px;object-fit:cover;background:var(--black-3)}
.citem__name{font-size:.9rem;font-weight:600;letter-spacing:-.01em}
.citem__meta{font-size:.72rem;color:var(--faint);margin-top:3px;text-transform:uppercase;letter-spacing:.08em}
.citem__qty{display:inline-flex;align-items:center;gap:10px;margin-top:10px}
.citem__qty button{position:relative;width:22px;height:22px;border:1px solid var(--line);border-radius:50%;font-size:.8rem;color:var(--mute);
  display:inline-flex;align-items:center;justify-content:center;transition:border-color .3s,color .3s}
/* invisible ~44px hit area, same technique as .hero-slider__dot::before,
   so the visible 22px circle stays exactly as designed while the tappable
   area meets a comfortable mobile touch-target size. Absolutely positioned,
   so it adds zero layout width/height, the row spacing is untouched. */
.citem__qty button::before{content:"";position:absolute;inset:-11px}
.citem__qty button:hover{border-color:var(--orange);color:var(--orange)}
.citem__qty span{font-size:.82rem;min-width:16px;text-align:center}
.citem__right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
.citem__price{font-size:.86rem;font-weight:600}
.citem__rm{font-size:.66rem;color:var(--faint);letter-spacing:.1em;text-transform:uppercase;transition:color .3s}
.citem__rm:hover{color:var(--orange)}
.cart__foot{padding:22px var(--cpad,28px);border-top:1px solid var(--line);background:rgba(7,7,7,.4)}
.cart__row{display:flex;justify-content:space-between;font-size:.82rem;color:var(--mute);margin-bottom:8px}
.cart__row[hidden]{display:none}
.cart__row--total{color:var(--white);font-size:1rem;font-weight:600;margin:12px 0 18px}
.cart__note{font-size:.68rem;color:var(--faint);text-align:center;margin-top:12px;letter-spacing:.04em}

/* =====================================================================
   REVEAL
   Sections/cards used to fade + slide in on scroll via IntersectionObserver
   (core.js still marks them .is-in when they intersect, harmlessly). That
   entrance animation is intentionally disabled site-wide: content is laid
   out and fully visible the instant it's in the DOM, no scroll-triggered
   delay, no blank space before a section appears (Part: flat, immediate
   landing page).
   ===================================================================== */
.reveal{opacity:1;transform:none}

/* =====================================================================
   HERO SLIDER (homepage), one full-screen slide visible at a time
   ===================================================================== */
.hero-slider{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero-slider__track{display:flex;height:100%;width:calc(var(--n,3) * 100%);
  transition:transform .9s var(--ease-io);touch-action:pan-y}
.hero-slide{position:relative;width:calc(100% / var(--n,3));flex:0 0 auto;height:100%;overflow:hidden;
  display:flex;align-items:flex-end}
.banner__media{position:absolute;inset:0;z-index:-2}
.banner__media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.hero-slide::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,transparent 0%,transparent 58%,rgba(7,7,7,.32) 72%,rgba(7,7,7,.82) 100%)}
.banner__inner{position:relative;padding:0 var(--pad) clamp(48px,9vh,120px);max-width:min(900px,92vw)}
#hero-1 .banner__inner{max-width:min(1120px,94vw)}
.banner__title{font-size:clamp(2.42rem,5.94vw,5.06rem);font-weight:700;line-height:1;letter-spacing:-.025em}
#b1{white-space:normal}
@media (min-width:761px){ #b1{white-space:nowrap;font-size:clamp(2.42rem,5.7vw,5.06rem)} }
.banner__cta{margin-top:2.75rem;display:flex}
.banner__count{position:absolute;top:calc(var(--top-off) + 6px);right:var(--pad);font-size:.7rem;letter-spacing:.24em;
  color:var(--faint);z-index:1}
.banner__count b{color:var(--white);font-weight:600}
.hero-slider__dots{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:2;
  display:flex;gap:10px}
.hero-slider__dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--ghost);transition:background .35s var(--ease),transform .35s var(--ease)}
/* invisible ~25px hit area so the dots meet WCAG 2.5.8 target size without any visual change */
.hero-slider__dot::before{content:"";position:absolute;inset:-9px;border-radius:50%}
.hero-slider__dot.is-active{background:var(--orange);transform:scale(1.3)}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;
  align-items:center;gap:8px;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.scroll-cue i{width:1px;height:40px;background:linear-gradient(var(--orange),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* =====================================================================
   MOBILE HERO (homepage), single full-bleed 9:16 poster, automatic
   crossfade rotation (site/js/mobile-hero-carousel.js), no manual swipe,
   no dots. Hidden above the mobile breakpoint; the desktop hero-slider is
   hidden below it in its place (see RESPONSIVE block). Deliberately
   edge-to-edge, same "the image IS the hero" treatment as the desktop
   .hero-slider, just height-driven by the 9:16 ratio instead of forced to
   100svh (forcing the height would require object-fit:cover to crop these
   portrait banners, which the source art isn't cut for).
   ===================================================================== */
.mb-hero{display:none;position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;background:var(--black);
  container-type:inline-size}   /* size source for the cqw headline type below */
.mb-hero__stage{position:relative;width:100%;height:100%}
.mb-hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.15s var(--ease)}
.mb-hero__slide.is-active{opacity:1;z-index:1}
.mb-hero__slide picture,.mb-hero__slide img{width:100%;height:100%}
.mb-hero__slide img{object-fit:cover;display:block}
/* ---- CINEMATIC EDGE DISSOLVE ------------------------------------------
   The poster used to end in a knife-edge against the page black at both
   ends: a hard horizontal line under the status bar at the top, and a
   second one where the black Hot Picks section starts at the bottom. Both
   edges are dissolved with a multi-stop falloff that reaches the exact page
   background (--black #070707) at 0% / 100%, so there is no luminance step
   anywhere, the poster reads as one continuous composition that simply
   fades out into the page. Nothing is cropped or rescaled: the 9:16 frame
   and the 1080x1920 source proportions are untouched, only overlaid.
   Stacking: active slide z1 < these scrims z2 < headline z3, so the type
   always sits on top of the falloff (which also carries its contrast). */
.mb-hero::before,.mb-hero::after{content:"";position:absolute;left:0;right:0;z-index:2;pointer-events:none}
/* top: continues the browser/status-bar black straight into the frame */
.mb-hero::before{top:0;height:calc(var(--top-off) + clamp(112px,18vh,180px));
  background:linear-gradient(to bottom,
    #070707 0%,rgba(7,7,7,.92) 7%,rgba(7,7,7,.79) 17%,rgba(7,7,7,.64) 29%,
    rgba(7,7,7,.48) 43%,rgba(7,7,7,.33) 57%,rgba(7,7,7,.19) 71%,
    rgba(7,7,7,.08) 85%,rgba(7,7,7,.02) 94%,rgba(7,7,7,0) 100%)}
/* bottom: lands on solid --black exactly at the frame edge, so the black
   run-out into the next section's top padding is perfectly continuous */
.mb-hero::after{bottom:0;height:clamp(190px,34%,360px);
  background:linear-gradient(to top,
    #070707 0%,rgba(7,7,7,.985) 7%,rgba(7,7,7,.93) 16%,rgba(7,7,7,.81) 27%,
    rgba(7,7,7,.63) 40%,rgba(7,7,7,.43) 54%,rgba(7,7,7,.25) 68%,
    rgba(7,7,7,.11) 82%,rgba(7,7,7,.03) 92%,rgba(7,7,7,0) 100%)}

/* Persistent mobile-hero CTA (Instagram landing). No rotating headline over
   the poster anymore (composition fix: it competed with the garment print
   and kept changing before a visitor could read it) — this block is the
   only copy layer, pinned to the bottom band. The wrapper stays
   click-through (pointer-events:none) so only its real controls (button,
   progress segments) are targets, keeping the rest of the poster tappable
   for the swipe gesture underneath it. */
.mb-hero__cta{position:absolute;left:0;right:0;bottom:calc(clamp(18px,3.4vh,32px) + env(safe-area-inset-bottom,0px));z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:9px;padding-inline:18px;
  text-align:center;pointer-events:none}
.mb-hero__cta-note{font-size:.7rem;font-weight:600;letter-spacing:.04em;color:rgba(246,244,240,.92);
  text-shadow:0 2px 12px rgba(0,0,0,.72),0 1px 3px rgba(0,0,0,.6)}
.mb-hero__cta-btn{pointer-events:auto;min-height:50px;padding:0 2.1em;
  box-shadow:0 12px 34px rgba(0,0,0,.4)}
.mb-hero__cta-arrow{transition:transform .4s var(--ease)}
.mb-hero__cta-btn:active .mb-hero__cta-arrow{transform:translateX(4px)}
/* ---- USER-CONTROLLED PROGRESS BAR (Stories-style) ---------------------
   One thin segment per poster. Sits directly beneath the CTA button as a
   third row in the same flex column (gap:9px, inherited from .mb-hero__cta
   above) rather than a separately-positioned overlay, so the note, the
   button and the slide position always read as one deliberate unit instead
   of two overlays that happen to be near each other. While autoplay runs,
   the active segment fills left-to-right over the rotation interval; the
   moment the visitor swipes the poster or taps a segment
   (site/js/mobile-hero-carousel.js), autoplay stops for good and the bar
   becomes a plain, static position marker they drive themselves. Each
   button carries real vertical padding so the tap target clears ~24px even
   though the visible bar itself stays a hairline. */
.mb-hero__progress{pointer-events:auto;display:flex;gap:5px;width:min(200px,54vw)}
.mb-hero__seg{flex:1;min-width:0;padding:8px 0;background:none;border:none}
.mb-hero__seg-bar{display:block;position:relative;height:2px;border-radius:2px;
  background:rgba(246,244,240,.3);overflow:hidden}
.mb-hero__seg-fill{position:absolute;inset:0;width:0;background:var(--white);border-radius:inherit}
@keyframes mbHeroSegFill{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){.mb-hero__seg-fill{animation:none!important}}

/* =====================================================================
   MANIFESTO
   ===================================================================== */
.mani{position:relative;padding:clamp(44px,8vh,100px) var(--pad);overflow:hidden}
.mani__bg{position:absolute;inset:0;z-index:-2}
/* brightness(.95) darkens the image ~5% without touching source pixels
   (lossless, image quality preserved); the overlay gradient lifts text
   legibility over the busiest part of the frame. */
.mani__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.05) brightness(.95)}
.mani::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,7,7,.5) 0%,rgba(7,7,7,.42) 45%,rgba(7,7,7,.55) 100%)}
.mani__inner{max-width:1080px;margin:0 auto;text-align:center}
.mani__title{font-size:clamp(1.9rem,4.4vw,3.6rem);font-weight:600;line-height:1.08;letter-spacing:-.02em;margin:.9rem 0 1.1rem}
.mani__body{max-width:56ch;margin:0 auto .9em;color:var(--mute);font-size:clamp(.98rem,1.4vw,1.15rem);line-height:1.75}
.mani__body:last-of-type{margin-bottom:0}
/* Closing statement: short, confident, set apart by weight and air. */
.mani__close{margin:clamp(20px,3.5vh,34px) auto 0;font-size:clamp(1.02rem,1.6vw,1.3rem);font-weight:500;letter-spacing:.01em;color:var(--white)}

/* =====================================================================
   LATEST DROP (oversized editorial cards)
   ===================================================================== */
.drop{padding:clamp(60px,10vh,120px) var(--pad) clamp(70px,12vh,150px)}
.drop__head{max-width:var(--maxw);margin:0 auto clamp(32px,5vw,56px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.drop__head .h-big{margin-top:.7rem}
/* Bracketed section sub-label ("(Trending)" / "(Classic)") stacked under the
   collection heading, ~50% of the heading size — replaces the old descriptive
   ledes/eyebrows with a clean, premium hierarchy (Part: collection headings). */
/* Title + category on ONE line: "Hot Picks (Trending)". Inline suffix, a touch
   smaller and muted, wrapped as a unit so it never breaks mid-phrase. */
.drop__label{display:inline;margin-left:.34em;font-size:.4em;font-weight:500;line-height:1;letter-spacing:.005em;color:var(--mute);white-space:nowrap}
/* One clean line of collection context beneath the heading. */
.drop__desc{max-width:62ch;margin:.6rem 0 0;color:var(--mute);font-size:clamp(.84rem,1vw,.98rem);line-height:1.5;letter-spacing:.01em}
.drop__list{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,40px);align-items:start}
/* Desktop preview shows the first 3 curated products; the 4th (rendered for the
   mobile 2×2 grid) is hidden here so the desktop 3-up row is unchanged. */
.drop__list .pcard:nth-child(n+4){display:none}
/* Compact, tightly-wrapped "View More" pill on its own centered row beneath the
   product grid — not full-width, not a tile, no dead space (Part: View More). */
.drop__more{max-width:var(--maxw);margin:clamp(22px,3vw,40px) auto 0;display:flex;justify-content:center}
.drop__viewmore{display:inline-flex;align-items:center;gap:.5em;padding:.72em 1.6em;border:1px solid var(--line);border-radius:999px;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--white,#fff);background:transparent;
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.drop__viewmore-arrow{transition:transform .35s var(--ease)}
/* Hover styling is pointer-only. On touch a :hover background/transform makes
   the first tap "arm" the hover and swallow the navigation (the reported
   two-tap View More); gating it means the first tap always follows the link. */
@media (hover:hover) and (pointer:fine){
  .drop__viewmore:hover{border-color:var(--orange);color:var(--orange-soft);background:rgba(246,244,240,.04)}
  .drop__viewmore:hover .drop__viewmore-arrow{transform:translateX(5px)}
}
/* Cards sit in a 3-up grid on desktop and a horizontal scroll-snap carousel on
   mobile (see the ≤760px block) — the CONTAINER scrolls, individual cards
   never move independently. What must never happen is the card's own
   image/link being draggable (the browser default for <img>/<a>), which
   reads as the tile itself coming loose under touch, distinct from the
   carousel's own intentional swipe. -webkit-user-drag:none + pointer-events:
   none on the img + the draggable="false" markup in home.js make a single
   tile completely fixed inside the carousel. */
.pcard{display:flex;flex-direction:column;min-width:0;-webkit-user-drag:none;user-select:none}
.pcard__media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--black-3)}
.pcard__media img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none;pointer-events:none}
/* Hover zoom is a pointer-only affordance — never on touch, where a sticky
   :hover would make the card appear to shift/scale under the finger. */
@media (hover:hover) and (pointer:fine){
  .pcard__media img{transition:transform .7s var(--ease)}
  .pcard:hover .pcard__media img{transform:scale(1.045)}
}
/* auto-rotating card gallery (site/js/card-carousel.js), stacked, crossfaded
   images; only .is-active is visible. A single-image card (imgs.length<2)
   never gets wired up, so this rule is inert for it either way. */
.pcard__media .card-carousel__img{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease),transform .7s var(--ease)}
.pcard__media .card-carousel__img.is-active{opacity:1}
.pcard__body{padding-top:clamp(14px,1.6vw,20px);display:flex;flex-direction:column;flex:1 1 auto}
/* Simplified card: product name then price only, price carrying the strongest
   weight. The name clamps at 2 lines (a long name is truncated with an
   ellipsis rather than pushing the price further down) but does NOT reserve
   height for a 2nd line it isn't using: a min-height here was forcing a dead
   gap under every 1-line name (MONEY FOLLOWS, TRAVIS SCOTT, DELUSIONAL, …)
   while only 2-line names looked right. Price now sits tight under the name
   at every length — the row-to-row alignment that min-height bought is a
   smaller loss than the gap it was creating. */
.pcard__name{font-size:clamp(.98rem,1.5vw,1.32rem);font-weight:600;letter-spacing:-.01em;line-height:1.22;margin:0 0 .32rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard__name a{color:inherit;text-decoration:none}
/* Description reserves 2 lines too; the row of price + CTA that follows is
   pushed to bottom so every card's pricing/info area lines up horizontally. */
.pcard__desc{color:var(--mute);font-size:.86rem;max-width:38ch;margin-bottom:1.1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.pcard__row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:auto}
.pcard__price{font-size:clamp(.92rem,1.2vw,1.05rem);font-weight:600;color:var(--white);display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.15em}
.pcard__price s{color:var(--faint);font-weight:400;margin-right:.5em;font-size:.9em}
/* "+N colours" indicator, aligned in the pricing row beside the price (Part 6). */
.pcard__more-colors{margin-left:.55em;color:var(--mute);font-weight:500;font-size:.82em;letter-spacing:.01em;white-space:nowrap}
.pcard__swatches{display:flex;gap:7px;margin-top:1rem}
.pcard__swatches i{width:14px;height:14px;border-radius:50%;border:1px solid var(--ghost)}

/* ---- Fancy "View More" tile (Parts 10–11) --------------------------------
   A premium collection tile that lives INLINE as the last item of the same
   grid/scroller as the product cards — never a plain button, never a standalone
   band below the section. Desktop: a full-width glass strip on the next grid
   row. Mobile: a card-footprint tile as the 4th horizontal-scroll item (see the
   ≤760px block). */
.pcard--more{grid-column:1 / -1;position:relative;display:flex;text-decoration:none;overflow:hidden;
  border-radius:14px;min-height:clamp(104px,11vw,148px);
  background:linear-gradient(155deg,var(--black-2,#141414),rgba(255,255,255,.015));
  border:1px solid var(--ghost);transition:border-color .4s var(--ease),background .4s var(--ease),transform .5s var(--ease)}
.pcard--more__inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  width:100%;padding:clamp(20px,3vw,34px);text-align:center}
.pcard--more__eyebrow{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);font-weight:600}
.pcard--more__title{display:inline-flex;align-items:center;gap:.5em;font-size:clamp(1.2rem,2.1vw,1.7rem);font-weight:600;letter-spacing:-.01em;line-height:1.02;color:var(--white,#fff)}
.pcard--more__arrow{display:inline-block;transition:transform .4s var(--ease)}
.pcard--more__meta{font-size:.7rem;color:var(--faint);letter-spacing:.04em}
.pcard--more:hover{border-color:var(--orange);background:linear-gradient(155deg,var(--black-3),rgba(255,255,255,.03))}
.pcard--more:hover .pcard--more__arrow{transform:translateX(7px)}
@media (prefers-reduced-motion:reduce){.pcard--more__arrow{transition:none}}

/* =====================================================================
   LOYALTY PROGRAM TEASER (injected by js/core.js, directly above the footer
   on the landing page and every product page)
   -----------------------------------------------------------------------
   Editorial, not a banner: a centred column on the page's own black, a soft
   orange bloom behind an engraved star mark, the site's existing .idx eyebrow,
   an oversized display line with the orange italic emphasis used elsewhere,
   and a hairline rule that resolves into a single quiet "Stay tuned". Only
   site tokens are used — no new colour, font or effect enters the system.
   ===================================================================== */
.loyal{position:relative;overflow:hidden;border-top:1px solid var(--line-2);
  padding:clamp(64px,11vh,132px) var(--pad)}
/* Bloom: one large, very soft orange radial, clipped by the section. Painted
   behind the content and never interactive. */
.loyal::before{content:"";position:absolute;left:50%;top:-38%;width:min(140vw,1180px);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(246,244,240,.10) 0%,rgba(246,244,240,.04) 38%,transparent 68%)}
.loyal__inner{position:relative;max-width:720px;margin:0 auto;text-align:center}
.loyal__mark{width:clamp(46px,6.4vw,60px);height:clamp(46px,6.4vw,60px);margin:0 auto clamp(20px,3vw,30px);
  border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--orange);background:rgba(246,244,240,.04)}
.loyal__mark svg{width:56%;height:56%;display:block}
.loyal__idx{color:var(--orange)}
.loyal__title{margin-top:.85rem;font-size:clamp(1.85rem,4.6vw,3.15rem);font-weight:700;line-height:1.08;
  letter-spacing:-.028em;text-wrap:balance}
.loyal__title em{font-style:italic;font-weight:500;color:var(--orange)}
.loyal__sub{margin:clamp(14px,2vw,20px) auto 0;max-width:52ch;color:var(--mute);
  font-size:clamp(.86rem,1.5vw,.98rem);line-height:1.75}
/* Hairline with a short orange centre segment — the same restrained accent the
   offers box and section eyebrows use, drawn rather than boxed. */
.loyal__rule{margin:clamp(26px,4vw,40px) auto clamp(14px,2vw,18px);max-width:340px;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 22%,var(--line) 78%,transparent);
  position:relative}
.loyal__rule span{position:absolute;left:50%;top:0;width:54px;height:1px;transform:translateX(-50%);
  background:var(--orange);opacity:.85}
.loyal__note{font-size:.7rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--faint)}

/* =====================================================================
   FOOTER
   Logo, then an intentional 3-column layout (Reach Out To Us · Company ·
   Quick Links), a secure-payment row, and the copyright line — same
   structure at every width, just re-flowed (see the ≤760px block for the
   mobile stack). Colours/tokens are unchanged from the previous footer.
   ===================================================================== */
.ft{padding:clamp(60px,9vh,120px) var(--pad) clamp(28px,4vh,46px);border-top:1px solid var(--line);background:var(--black-2)}
.ft__inner{max-width:var(--maxw);margin:0 auto}
.ft__top{display:flex;justify-content:center;align-items:center}
.ft__logo{height:clamp(115px,17vw,264px);width:auto;opacity:.95}
.ft__grid{margin:clamp(40px,6vw,70px) auto 0;display:grid;grid-template-columns:1.1fr 1fr 1fr;
  gap:clamp(28px,4vw,48px);max-width:920px}
.ft__h{font-size:.68rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--orange);margin-bottom:1.1em}
.ft__links{display:flex;flex-direction:column;gap:.85em}
.ft__links a{font-size:.84rem;letter-spacing:.02em;color:var(--mute);transition:color .3s}
.ft__links a:hover{color:var(--orange-soft)}
.ft__contact{display:flex;align-items:center;gap:.65em;font-size:.84rem;letter-spacing:.02em;color:var(--mute);
  transition:color .3s;margin-bottom:.85em}
.ft__contact:last-of-type{margin-bottom:1.3em}
.ft__contact:hover{color:var(--orange-soft)}
.ft__contact svg{flex:none;width:17px;height:17px;color:var(--orange)}
.ft__social{display:flex;gap:10px}
.ft__social a{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--mute);
  transition:border-color .3s,color .3s}
.ft__social a:hover{border-color:var(--orange);color:var(--orange-soft)}
.ft__social svg{width:17px;height:17px}
.ft__secure{margin:clamp(40px,6vw,64px) auto 0;padding-top:clamp(26px,3.6vw,36px);border-top:1px solid var(--line-2);
  max-width:920px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 28px}
.ft__secure-label{display:inline-flex;align-items:center;gap:.6em;font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ft__secure-label svg{width:17px;height:17px;color:var(--orange)}
/* Real payment-brand logo badges. Each brand mark is a genuinely different
   shape (Visa/Mastercard are wide wordmarks, UPI is a near-square icon), so
   forcing every <img> to the same HEIGHT alone (the old approach) made them
   wildly different WIDTHS — a wide logo read as "huge", a square one as
   "tiny". The fix is a uniform BADGE: every payment method gets the exact
   same width×height card (background, radius, padding), and the logo floats
   centred inside it at object-fit:contain — same footprint for every badge,
   each logo kept at its own true aspect ratio, never stretched/cropped. */
.ft__pay{display:flex;gap:10px;flex-wrap:nowrap;align-items:center}
.ft__pay-badge{display:inline-flex;align-items:center;justify-content:center;background:#fff;
  border:1px solid rgba(0,0,0,.08);border-radius:6px;
  width:72px;height:38px;padding:6px 10px;box-sizing:border-box;flex:none;
  /* A flex item's default min-height:auto refuses to shrink below its
     content's "natural" size — without this, a square logo (UPI) forced the
     whole badge taller than Visa/Mastercard's badges, breaking the uniform
     footprint the badge exists to guarantee. */
  min-width:0;min-height:0;overflow:hidden}
/* <picture> is otherwise just an inline wrapper with no size of its own, which
   breaks percentage-height resolution on the <img> inside it (the height:100%
   below would silently fall back to auto — i.e. the image's intrinsic aspect
   ratio at its resolved width — instead of being real fit-to-badge sizing).
   Giving it an explicit block box the same size as the badge's content area
   fixes that percentage chain. */
.ft__pay-badge picture{display:block;width:100%;height:100%}
.ft__pay-badge img{width:100%;height:100%;object-fit:contain;display:block}
.ft__base{margin:clamp(30px,4.4vw,44px) auto 0;padding-top:22px;border-top:1px solid var(--line-2);
  display:flex;justify-content:center;gap:16px;font-size:.74rem;color:var(--faint);text-align:center}
.ft__base p{white-space:nowrap;margin:0}

/* =====================================================================
   BREADCRUMB (inner pages)
   ===================================================================== */
.crumb{display:flex;gap:.55em;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.crumb a:hover{color:var(--orange-soft)}
.crumb span[aria-current]{color:var(--mute)}
.crumb li+li::before{content:"/";margin-right:.55em;color:var(--ghost)}
.crumb ol{display:flex;gap:.55em;list-style:none}

/* =====================================================================
   PAGE SHELLS (inner / editorial / legal)
   ===================================================================== */
.page{padding:calc(var(--top-off) + clamp(40px,7vh,90px)) var(--pad) clamp(70px,12vh,150px);max-width:var(--maxw);margin:0 auto;min-height:70vh}
.page__hero{max-width:900px;margin:0 auto clamp(40px,7vw,80px)}
.page__hero .h-display{margin:1.2rem 0 .6rem}
.legal{max-width:760px;margin:0 auto}
.legal h2{font-size:1.15rem;font-weight:600;margin:2.4rem 0 .8rem;letter-spacing:-.01em}
.legal h2:first-of-type{margin-top:1rem}
.legal p,.legal li{color:var(--mute);font-size:.98rem;line-height:1.8;margin-bottom:.8rem}
.legal ul{padding-left:1.2em;margin-bottom:1rem}
.legal a{color:var(--orange-soft);border-bottom:1px solid var(--line)}
.legal .meta{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* =====================================================================
   COLLECTION LANDING (/collections/), three premium campaign tiles.
   Large full-bleed horizontal tiles stacked vertically. Each is a real
   model/product photograph under a soft left-anchored scrim, with an
   editorial title block and an arrow affordance. Volume Two is an
   intentional, premium disabled "Dropping Soon" state (no arrow).
   ===================================================================== */
/* This page shell overrides .page's own top padding: .page adds a generous
   clamp(40px,7vh,90px) ABOVE the fixed-header offset (--top-off) meant for
   airier editorial pages (legal, contact) — on this landing page, stacked
   with the hero block below, it read as a large dead gap before "Store /
   Collection" ever appears. Cut to a much smaller clamp; --top-off itself
   (the actual header clearance) is untouched, so the header never overlaps. */
.clx-page{padding-top:calc(var(--top-off) + clamp(14px,2.6vh,28px))}
.clx-page__head{margin-bottom:clamp(20px,3.6vw,36px)}
/* One line, "Three chapters · Curated, not catalogued": a plain fluid clamp
   still wraps this at narrow phone widths, so the font shrinks fast enough on
   narrow phones to guarantee a single line, with a hard nowrap+ellipsis
   safety net that never actually triggers at any supported width. */
.clx-tagline{margin-top:.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:clamp(.72rem,3.6vw,1.18rem)}
.ctiles{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:clamp(16px,2.4vw,26px)}
.ctile{position:relative;display:block;overflow:hidden;border-radius:16px;
  min-height:clamp(190px,30vw,300px);border:1px solid var(--line-2);
  background:var(--black-3);isolation:isolate}
.ctile__media{position:absolute;inset:0;z-index:-2}
.ctile__img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;
  transition:transform 1.1s var(--ease)}
@media (hover:hover){.ctile:hover .ctile__img{transform:scale(1.05)}}
/* soft left-anchored scrim so the title block reads without a hard box */
.ctile::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(7,7,7,.86) 0%,rgba(7,7,7,.66) 34%,rgba(7,7,7,.24) 64%,rgba(7,7,7,.05) 100%)}
/* title block sits in the tile's lower portion (site-wide banner rule: copy
   never occupies the upper part of a banner, so the model/garment reads first) */
.ctile__body{position:relative;height:100%;min-height:inherit;display:flex;flex-direction:column;
  justify-content:flex-end;gap:.35rem;padding:clamp(22px,4.4vw,44px)}
.ctile__body .idx{margin-bottom:.15rem}
.ctile__title{font-size:clamp(1.7rem,6.4vw,3rem);font-weight:700;letter-spacing:-.025em;line-height:1}
.ctile__meta{color:var(--mute);font-size:clamp(.82rem,2.4vw,.98rem);max-width:32ch}
/* arrow affordance, subtle glass disc, bottom-right */
.ctile__go{position:absolute;right:clamp(18px,3.4vw,32px);bottom:clamp(18px,3.4vw,32px);z-index:1;
  width:clamp(42px,8vw,52px);height:clamp(42px,8vw,52px);border-radius:50%;
  background:rgba(246,244,240,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--glass-hi);
  transition:background .4s var(--ease),transform .4s var(--ease),border-color .4s}
.ctile__go::after{content:"→";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:var(--white)}
@media (hover:hover){.ctile:hover .ctile__go{background:var(--orange);border-color:var(--orange);transform:translateX(3px)}
  .ctile:hover .ctile__go::after{color:var(--black)}}
/* disabled "Dropping Soon" tile, intentional, not broken */
.ctile--soon{cursor:default}
.ctile--soon .ctile__img{filter:grayscale(.5) brightness(.5);object-position:50% 24%}
.ctile--soon .ctile__title{color:var(--faint)}
.ctile--soon .ctile__meta{color:var(--orange-soft);letter-spacing:.14em;text-transform:uppercase;
  font-size:.68rem;font-weight:600}
.ctile__lock{position:absolute;right:clamp(18px,3.4vw,32px);bottom:clamp(18px,3.4vw,32px);z-index:1;
  font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--line-2);border-radius:20px;padding:.5em .9em}
.ctile__lock::before{content:"Soon"}

/* =====================================================================
   COLLECTION LISTING (/collections/:slug, /collection/) - 2-col vertical
   grid on mobile, 3-col on desktop. Scales to any product count; reuses
   the .rcard card + card-carousel from home/related. No horizontal
   carousel. A gentle column stagger gives an editorial, masonry-like
   rhythm without varying (and therefore never distorting) the 4:5 media.
   ===================================================================== */
.cgrid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(14px,3vw,28px) clamp(12px,2.6vw,24px)}
/* Name clamps at 2 lines (long names truncate rather than pushing price
   down further) but does NOT reserve height for an unused 2nd line — that
   min-height was the cause of the dead title→price gap on every 1-line
   product name in this grid. Tight, consistent title→price rhythm at every
   name length now matters more than forcing every row to the same height. */
.cgrid .rcard__name{font-size:clamp(.86rem,3.2vw,.98rem);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cgrid .rcard__price{font-size:clamp(.8rem,3vw,.9rem)}
@media (min-width:641px){.cgrid{grid-template-columns:repeat(3,1fr)}
  .cgrid .rcard:nth-child(3n+2){margin-top:clamp(20px,3vw,44px)}}
/* Mobile (2-col): a clean, aligned grid — no artificial stagger, so left and
   right cards line up row-for-row (Part: mobile product tile / grid). */

/* =====================================================================
   PRODUCT PAGE (PDP)
   ===================================================================== */
.pdp{padding-top:var(--top-off)}
.pdp__crumb{padding:clamp(16px,2.2vw,26px) var(--pad) 0;max-width:var(--maxw);margin:0 auto}
/* Two capped, centred columns: the gallery beside a readable buy box, so the
   whole purchase decision sits together without stretching the info column on
   wide screens. The gallery column cap IS the rendered product-photo width on
   desktop — 528px is the previous 440px + 20% (product imagery reads too small
   at 440). The buy box is untouched at 540px, and 528 + 540 + a 72px max gap
   (1140px) still sits well inside --maxw, so nothing reflows. */
.pdp__main{max-width:var(--maxw);margin:0 auto;padding:clamp(12px,1.6vw,22px) var(--pad) clamp(60px,10vh,120px);
  display:grid;grid-template-columns:minmax(0,528px) minmax(0,540px);gap:clamp(28px,4vw,72px);
  align-items:start;justify-content:center}
/* gallery — thumbnail strip removed; the peek carousel IS the navigation.
   A native horizontal scroll-snap scroller: the lead image sits flush-left and
   the next image peeks in on the right (no dead black margins), momentum-swipe
   on touch, dots for pointer users. */
.gal{position:sticky;top:calc(var(--top-off) + 20px);display:block}
.gal__thumbs{display:none}
.gal__stage{position:relative}
.gal__scroller{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
.gal__scroller::-webkit-scrollbar{display:none}
/* slide < stage width, so the following slide peeks — the "swipe for more" cue */
.gal__slide{flex:0 0 86%;scroll-snap-align:start;aspect-ratio:4/5;border-radius:3px;overflow:hidden;background:var(--black-3)}
/* object-fit:contain preserves the true 4:5 source with no crop; matching the
   4:5 slide it fills edge to edge, any off-ratio source letterboxes gracefully */
.gal__slide img{width:100%;height:100%;object-fit:contain;display:block;cursor:zoom-in}
.gal__dots{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;display:flex;gap:8px}
.gal__dot{position:relative;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .3s,transform .3s}
.gal__dot::before{content:"";position:absolute;inset:-9px;border-radius:50%}
.gal__dot.is-active{background:var(--orange);transform:scale(1.3)}
/* loading skeleton (shown only in the rare seed-less wait) + not-found/error states */
.pdp-skeleton{position:absolute;inset:0;background:linear-gradient(100deg,var(--black-3) 30%,rgba(255,255,255,.05) 50%,var(--black-3) 70%);
  background-size:200% 100%;animation:pdp-shimmer 1.3s ease-in-out infinite}
@keyframes pdp-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.pdp-skeleton{animation:none}}
.pdp-empty{grid-column:1/-1;text-align:center;padding:clamp(50px,11vh,130px) 0}
.pdp-empty__kicker{font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--orange)}
.pdp-empty__title{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:600;letter-spacing:-.02em;margin:.7rem auto 1rem;max-width:22ch}
.pdp-empty__text{color:var(--mute);max-width:44ch;margin:0 auto 2rem}
.pdp-empty__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* info column */
/* Category/collection eyebrow removed from the PDP (brand + conversion
   decision: the product name leads). Kept in the DOM for any non-visual use,
   just never shown. */
.pinfo__cat{display:none}
.pinfo__name{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:600;letter-spacing:-.02em;line-height:1.04;margin:0 0 .55rem}
.pinfo__price{display:flex;align-items:baseline;gap:.7em;font-size:1.3rem;font-weight:600}
.pinfo__price s{color:var(--faint);font-weight:400;font-size:.8em}
/* compact discount badge, reused on product cards, collection cards and PDP price blocks */
.badge-off{display:inline-block;margin-left:.5em;font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--black);background:var(--orange);border-radius:5px;padding:.3em .55em;line-height:1;white-space:nowrap;vertical-align:middle}
/* Compact, collapsed description at EVERY breakpoint: one-line preview behind a
   Read More/Less toggle, so it costs almost no vertical space above the buy
   controls (helps land Buy Now in the first mobile viewport) while the full
   copy stays one tap away. */
.pinfo__desc{color:var(--mute);margin:.9rem 0 .2rem;max-width:52ch;font-size:.9rem;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pinfo__desc.is-expanded{display:block;-webkit-line-clamp:unset;overflow:visible}
.pinfo__desc-toggle{display:inline-flex;margin-bottom:.4rem;font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-soft)}
.pblock{margin-top:1.3rem}
.pblock__label{display:flex;align-items:center;justify-content:space-between;font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:.6rem}
.pblock__label a{color:var(--orange-soft);letter-spacing:.1em}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatch{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.swatch i{width:30px;height:30px;border-radius:50%;border:1px solid var(--ghost);box-shadow:inset 0 0 0 2px var(--black);
  transition:box-shadow .3s,border-color .3s}
.swatch.is-active i{border-color:var(--orange);box-shadow:inset 0 0 0 2px var(--black),0 0 0 2px var(--orange)}
/* Every size stays on ONE line: buttons flex to share the row evenly, so XS–XXL
   never wrap. min-width:0 lets them shrink on the narrowest phones; the tall
   vertical padding keeps a touch-friendly (~44px) target at every width. */
.sizes{display:flex;gap:8px;flex-wrap:nowrap}
.size{flex:1 1 0;min-width:0;padding:.85em .4em;text-align:center;border:1px solid var(--line);border-radius:2px;
  font-size:clamp(.72rem,2.4vw,.82rem);font-weight:500;letter-spacing:.04em;white-space:nowrap;
  transition:border-color .3s,background .3s,color .3s}
.size:hover{border-color:var(--mute)}
.size.is-active{background:var(--white);color:var(--black);border-color:var(--white)}
.fabrics{display:flex;gap:10px;flex-wrap:wrap}
.fabric{min-width:132px;padding:.85em 1.1em;text-align:center;border:1px solid var(--line);border-radius:2px;
  font-size:.78rem;font-weight:500;letter-spacing:.05em;transition:border-color .3s,background .3s,color .3s}
.fabric:hover{border-color:var(--mute)}
.fabric.is-active{background:var(--white);color:var(--black);border-color:var(--white)}
/* ---- BUY BOX ACTIONS (Buy Now dominant, Add to Bag secondary) ---- */
.pactions{display:flex;flex-direction:column;gap:10px;margin-top:1.4rem}
.pbuy__buy{width:100%;padding:1.2em 1.8em;font-size:.9rem;gap:.85em}
.pbuy__buy-price{position:relative;padding-left:.85em;font-weight:700}
.pbuy__buy-price::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:1.05em;width:1px;background:var(--black);opacity:.32}
.pbuy__add{width:100%;padding:.95em 1.8em}

/* ---- FOUR COMPACT USPs (chips: subtle border, rounded, one scannable line) */
.pdp-usp{display:flex;gap:10px;margin-top:1.1rem}
.pdp-usp__item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:.85em .5em;border:1px solid var(--line-2);border-radius:8px;background:var(--black-2);
  /* text-only refinement: ~20% smaller + one weight lighter for a cleaner,
     more premium label (icons/cards unchanged) */
  font-size:.5rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);text-align:center}
.pdp-usp__item span{line-height:1.2}
.pdp-usp svg{width:24px;height:24px;stroke:var(--orange);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}


/* ---- DELIVERY / COD / RETURNS CARD (prominent trust block) ---- */
.pdp-assure{margin-top:1.4rem;border:1px solid var(--line-2);border-radius:12px;background:var(--black-2);
  padding:6px clamp(16px,2vw,20px)}
.pdp-assure__row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.pdp-assure__row:last-child{border-bottom:none}
.pdp-assure__ico{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;background:var(--black-3)}
.pdp-assure__ico svg{width:18px;height:18px;stroke:var(--orange);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pdp-assure__txt b{display:block;font-size:.86rem;font-weight:600;letter-spacing:-.005em}
.pdp-assure__txt small{display:block;font-size:.74rem;color:var(--faint);margin-top:2px;line-height:1.45}

/* ---- OFFERS BOX (restrained orange accent, not a cheap banner) ---- */
.pdp-offer{margin-top:14px;border:1px solid rgba(246,244,240,.28);border-radius:12px;
  background:linear-gradient(180deg,rgba(246,244,240,.05),rgba(246,244,240,.02));padding:clamp(16px,2vw,20px)}
.pdp-offer__head{display:flex;align-items:center;gap:.6em;font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}
.pdp-offer__head svg{width:18px;height:18px;stroke:var(--orange);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pdp-offer__list{list-style:none;margin:.9rem 0 0;display:flex;flex-direction:column;gap:.55em}
.pdp-offer__list li{position:relative;padding-left:1.3em;font-size:.86rem;color:var(--white);line-height:1.5}
.pdp-offer__list li::before{content:"+";position:absolute;left:0;color:var(--orange);font-weight:700}
.pdp-offer__list b{font-weight:700}
/* The promo code inside an offer line: same restrained orange accent as the
   rest of the box, set apart just enough to be read as something to type. */
.pdp-offer__code{color:var(--orange);letter-spacing:.06em;
  border:1px solid rgba(246,244,240,.30);border-radius:3px;padding:.1em .45em;margin-left:.1em;
  white-space:nowrap}
/* Condition line under an offer (e.g. prepaid-only), quiet and secondary. */
.pdp-offer__list small{display:block;font-size:.7rem;color:var(--faint);margin-top:.3em;line-height:1.5}
.pdp-offer__note{margin-top:.85rem;font-size:.7rem;color:var(--faint);letter-spacing:.02em}

/* ---- SIZE CHART MODAL (opens in place; hides the old inline section) ---- */
.sizechart{display:none}
.scm{position:fixed;inset:0;z-index:1100;visibility:hidden;pointer-events:none}
.scm.is-open{visibility:visible;pointer-events:auto}
.scm__scrim{position:absolute;inset:0;background:rgba(3,3,3,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .4s var(--ease)}
.scm.is-open .scm__scrim{opacity:1}
.scm__panel{position:absolute;top:50%;left:50%;width:min(520px,92vw);max-height:86vh;overflow-y:auto;
  background:var(--glass);-webkit-backdrop-filter:blur(28px) saturate(1.4);backdrop-filter:blur(28px) saturate(1.4);
  border:1px solid var(--line);border-radius:12px;box-shadow:inset 0 1px 0 var(--glass-hi),0 30px 80px -30px rgba(0,0,0,.8);
  padding:clamp(24px,4vw,40px);transform:translate(-50%,-46%);opacity:0;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.scm.is-open .scm__panel{opacity:1;transform:translate(-50%,-50%)}
.scm__close{position:absolute;top:12px;right:14px;font-size:1.5rem;line-height:1;color:var(--mute);
  transition:color .3s,transform .3s var(--ease)}
.scm__close:hover{color:var(--orange);transform:rotate(90deg)}
.scm__body h2{margin-bottom:1.4rem}
.scm__body .sizechart__note{margin-top:1.2rem;font-size:.8rem;color:var(--faint)}
@media (prefers-reduced-motion:reduce){.scm__scrim,.scm__panel,.scm__close{transition:none}.scm__panel{transform:translate(-50%,-50%)}}
.paccord{margin-top:2.4rem;border-top:1px solid var(--line-2)}
.paccord__item{border-bottom:1px solid var(--line-2)}
.paccord__head{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1.15em 0;
  font-size:.82rem;font-weight:600;letter-spacing:.06em;text-align:left;transition:color .3s}
.paccord__head:hover{color:var(--orange-soft)}
.paccord__head i{transition:transform .4s var(--ease);color:var(--orange);font-style:normal}
.paccord__item.open .paccord__head i{transform:rotate(45deg)}
.paccord__panel{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.paccord__inner{padding:0 0 1.3em;color:var(--mute);font-size:.9rem;line-height:1.75}
/* Prose panels (the optional "Description" section) sit on the panel's own
   rhythm — the browser's default <p> margins would open a gap under the head
   and break the max-height animation's measured height. */
.paccord__inner p{margin:0}
.paccord__inner ul{list-style:none;display:flex;flex-direction:column;gap:.5em}
.paccord__inner li{padding-left:1.2em;position:relative}
.paccord__inner li::before{content:"-";position:absolute;left:0;color:var(--orange)}
/* size chart section */
.sizechart{max-width:var(--maxw);margin:0 auto;padding:clamp(50px,9vh,110px) var(--pad);border-top:1px solid var(--line-2);scroll-margin-top:var(--top-off)}
.sizechart h2{margin-bottom:1.6rem}
.sctable{width:100%;border-collapse:collapse;font-size:.86rem}
.sctable th,.sctable td{padding:.95em 1em;text-align:left;border-bottom:1px solid var(--line-2)}
.sctable th{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);font-weight:600}
.sctable tr:hover td{background:rgba(246,244,240,.02)}
.sc-wrap{overflow-x:auto}
.sizechart__note{margin-top:1.2rem;font-size:.8rem;color:var(--faint)}
/* related */
.related{max-width:var(--maxw);margin:0 auto;padding:clamp(60px,10vh,120px) var(--pad);border-top:1px solid var(--line-2)}
.related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px);margin-top:clamp(30px,4vw,50px)}
.rcard__media{position:relative;aspect-ratio:4/5;border-radius:3px;overflow:hidden;background:var(--black-3)}
.rcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.rcard:hover .rcard__media img{transform:scale(1.05)}
.rcard__media .card-carousel__img{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease),transform .8s var(--ease)}
.rcard__media .card-carousel__img.is-active{opacity:1}
.rcard__name{font-size:1rem;font-weight:600;margin-top:1rem}
.rcard__price{font-size:.86rem;color:var(--mute);margin-top:.3rem}
.rcard__price s{color:var(--faint);font-weight:400;margin-right:.5em;font-size:.9em}
/* "+N colours" indicator in the collection-grid pricing line (Part 6). */
.rcard__more-colors{margin-left:.5em;color:var(--mute);font-size:.92em;white-space:nowrap}

/* =====================================================================
   CUSTOMER REVIEWS - editorial, restrained, native to VORÉ. One shared
   component mounted in two places: the PDP (per-product, site/js/reviews.js)
   and the homepage (whole-catalogue showcase between Volume One and the
   Manifesto, site/js/home-reviews.js) - same markup, same styles, same
   /api/reviews backend, just a different fetch and a plain link instead of
   the write-composer. Reuses the same section rhythm as .sizechart
   (border-top separator, max-width container) and the same horizontal
   scroll-snap technique .drop__list already uses on mobile, just applied
   at every width since this is inherently a slider, not a grid that only
   becomes one on small screens.
   ===================================================================== */
.reviews{max-width:var(--maxw);margin:0 auto;padding:clamp(50px,9vh,110px) var(--pad);border-top:1px solid var(--line-2);scroll-margin-top:var(--top-off)}
.reviews__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(24px,4vw,40px)}
/* PDP review section (#reviews, injected by js/reviews.js) ONLY - the
   homepage showcase (#homeReviews/.reviews--home, js/home-reviews.js) has no
   "Write a Review" button at all and is untouched by these id-scoped rules.
   #rvwWriteBtn is a direct child of #reviews (a sibling of .reviews__head,
   not nested inside it), so a CSS Grid with named areas can place it beside
   the heading on wider screens and reflow it below the review list on
   phones - purely declarative, decided by the live viewport on every
   render/resize, with no JS/breakpoint-matching involved. */
/* minmax(0,1fr), not 1fr: an `fr` track's automatic minimum is its items'
   min-content size, and #rvwViewport holds the horizontally scrolling
   .reviews__list whose min-content is the FULL width of every review card
   laid end to end. With a plain 1fr that minimum wins, the track (and with
   it the full-width "Write a Review" button) grows to ~2000px, the page
   gains horizontal overflow and phones zoom out to fit it. minmax(0,1fr)
   replaces that automatic minimum with 0, so the track takes the container
   width and the card strip scrolls inside it, which is the intent. */
#reviews{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head write" "list list";align-items:end;column-gap:20px}
/* Same reason, for the items themselves: a grid item's automatic minimum
   size is content-based, so the scrolling strip must be told it may be
   narrower than its content. */
#reviews>*{min-width:0}
#reviews .reviews__head{grid-area:head;margin-bottom:0}
#reviews #rvwWriteBtn{grid-area:write}
#reviews #rvwEmpty,#reviews #rvwViewport{grid-area:list;margin-top:clamp(24px,4vw,40px)}
.reviews__head .h-mid{margin-top:.5rem}
.reviews__empty{color:var(--faint);font-size:.92rem}
/* Homepage variant: centered, editorial, generously spaced - this section
   carries the page on its own here (no PDP context around it), and reads
   as a curated showcase rather than a raw database dump of rows. */
.reviews--home{padding-top:clamp(70px,11vh,130px);padding-bottom:clamp(70px,11vh,130px)}
.reviews--home .reviews__head{flex-direction:column;justify-content:center;align-items:center;
  text-align:center;gap:24px;margin-bottom:clamp(44px,6vw,68px)}
.reviews--home .reviews__head>div{display:flex;flex-direction:column;align-items:center}
/* This section is the ONLY content when there are no reviews yet (the PDP's
   empty state sits among plenty of other content, this one doesn't), so it
   gets a taller, centered treatment with its own CTA rather than a single
   left-aligned line, matching the site's other centered empty/done states
   (.costate) rather than looking like a bug. */
.reviews--home .reviews__empty{display:flex;flex-direction:column;align-items:center;gap:26px;
  max-width:52ch;margin:0 auto;padding:clamp(30px,5vh,56px) 0;text-align:center}
.reviews__empty-lede{font-size:1.05rem;line-height:1.7;color:var(--mute)}
.reviews__viewport{display:flex;align-items:center;gap:14px}
/* The two rules above set `display` on elements that home-reviews.js/
   reviews.js also toggle via the `hidden` attribute (hidden = "there ARE
   reviews, don't show the empty state" or vice-versa) - an explicit
   `display` always wins over the browser's native `[hidden]{display:none}`,
   so without this, the empty-state block (lede + its own "Write a Review"
   button) rendered AND took up layout height even while genuine reviews
   were showing right below it: the real source of the large gap and
   duplicate CTA between the review heading and the actual review cards.
   Higher specificity than both rules above restores the native behavior. */
.reviews--home .reviews__empty[hidden],.reviews__viewport[hidden]{display:none}
.reviews__nav{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:flex;
  align-items:center;justify-content:center;font-size:1.3rem;line-height:1;color:var(--mute);
  transition:border-color .3s,color .3s}
.reviews__nav:hover{border-color:var(--orange);color:var(--orange-soft)}
.reviews__nav[hidden]{display:none}
.reviews__list{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding-bottom:6px;flex:1;min-width:0}
.reviews__list:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
/* Home variant gets noticeably more air between cards than the PDP's tighter
   strip - "generous" and "not stuck together" per the section brief. */
.reviews--home .reviews__list{gap:26px}
.rvw-card{flex:0 0 min(320px,84vw);scroll-snap-align:start;display:flex;flex-direction:column;
  background:var(--black-2);border:1px solid var(--line-2);border-radius:6px;padding:20px}
.rvw-card__media{display:flex;gap:8px;margin-bottom:14px}
.rvw-card__mediaitem{width:56px;height:56px;border-radius:3px;object-fit:cover;background:var(--black-3)}
/* Product context - small, quiet, not a second CTA. Used by the homepage
   showcase and, on a PDP, by the reviews that belong to a DIFFERENT piece (the
   PDP shows the whole community wall, this product's reviews first). A review
   about the product being viewed carries no label. */
.rvw-card__product{display:block;font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-bottom:10px;transition:color .3s}
a.rvw-card__product:hover{color:var(--orange-soft)}
/* Star rating, card display only (older, pre-rating reviews render none). */
.rvw-card__stars{display:flex;gap:2px;margin-bottom:10px;font-size:.8rem;line-height:1}
.rvw-card__stars .rvw-star{color:var(--line)}
.rvw-card__stars .rvw-star.is-on{color:var(--orange)}
.rvw-card__body{font-size:.92rem;line-height:1.7;color:var(--white);flex:1;margin-bottom:16px;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.rvw-card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--line-2)}
.rvw-card__name{font-size:.78rem;font-weight:600;letter-spacing:.02em}
.rvw-card__verified{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-soft)}
@media (max-width:760px){.reviews__nav{display:none}}

/* =====================================================================
   PDP REVIEW NOTIFICATION (social proof) — MOBILE INTERFACE ONLY
   A compact floating card that surfaces one real review of the product being
   viewed for ~3.5s on every product-page open. Additive to the #reviews
   section, never a replacement for it. See the notification block in
   js/reviews.js.

   Mobile only, twice over: js/reviews.js does not build the element at all
   above 760px (matchMedia, the same breakpoint used here), and every rule
   below lives inside that media query, so even an element injected by hand on
   a desktop viewport has no styling and no fixed positioning to show with.

   Position: floating at the TOP of the viewport, under the fixed header
   (--top-off already accounts for the announcement bar when it is shown), and
   deliberately NOT full-bleed — it is capped in width and left-aligned so it
   reads as a notification rather than a banner or a bottom sheet. Every
   control a shopper touches on a mobile PDP sits below the hero image (title,
   price, colour swatches, size picker, Add to Bag) with the sticky purchase
   bar at the very bottom, so this band is the one part of the screen a
   3.5-second card costs nothing. It was tried at the bottom first and sat
   straight on top of the colour swatches.

   z-index 860 keeps it over ordinary content but UNDER the header (900), so
   it slides out from behind the header, and under the menu (880), cart
   (1000), review overlays (1100+) and toasts (1200).
   ===================================================================== */
@media (max-width:760px){
  /* Horizontally centered in the viewport (was pinned to the left edge —
     the reported "left-aligned" look), still riding just under the header.
     left:50% + translateX(-50%) centers the card itself; the entrance/exit
     transform below adds its own translateY/scale on top of that same
     translateX so the two never fight. */
  .rvwpop{position:fixed;z-index:860;
    left:50%;
    top:calc(var(--top-off) + 10px);
    width:min(330px,calc(100vw - 32px));
    padding:13px 32px 14px 15px;
    background:rgba(10,10,10,.94);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
    border:1px solid var(--line);border-radius:14px;
    box-shadow:inset 0 1px 0 var(--glass-hi),0 22px 55px -22px rgba(0,0,0,.9);
    text-align:center;
    opacity:0;transform:translate(-50%,-12px) scale(.985);pointer-events:none;
    transition:opacity .22s var(--ease),transform .22s var(--ease)}
  .rvwpop.is-on{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto}
  .rvwpop.is-off{opacity:0;transform:translate(-50%,-8px) scale(.99);pointer-events:none}

  .rvwpop__x{position:absolute;top:6px;right:7px;width:26px;height:26px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:1rem;line-height:1;color:var(--faint);
    transition:color .3s,background .3s}
  /* Invisible finger-sized hit area (~42px) without growing the visible dot. */
  .rvwpop__x::after{content:"";position:absolute;inset:-8px}
  .rvwpop__x:hover{color:var(--orange);background:var(--line-2)}

  /* 1. name  2. date  3. verified  4. stars  5. review text — all centered,
     including the meta row and the star row, which are flex rows and need
     justify-content:center (text-align alone only centers inline content,
     not a flex container's items). No avatar/monogram: a made-up initial
     mark adds nothing to a credibility signal and only makes the card taller. */
  .rvwpop__name{font-size:.84rem;font-weight:600;letter-spacing:.01em;line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rvwpop__meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:3px}
  .rvwpop__date{font-size:.66rem;letter-spacing:.05em;color:var(--faint)}
  .rvwpop__verified{display:inline-flex;align-items:center;gap:3px;
    font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-soft)}
  .rvwpop__tick{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .rvwpop__stars{display:flex;justify-content:center;gap:2px;font-size:.74rem;line-height:1;margin:9px 0 6px}
  .rvwpop__stars .rvw-star{color:var(--line)}
  .rvwpop__stars .rvw-star.is-on{color:var(--orange)}
  /* A long review is clamped, never rewritten — the full text stays on the
     card below and in the review viewer. */
  .rvwpop__body{font-size:.78rem;line-height:1.55;color:var(--mute);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  /* Reduced motion drops the slide/scale entrance, but the horizontal
     translateX(-50%) is load-bearing centering, not animation — it must
     survive in every state or the card snaps off-center to the right. */
  .rvwpop,.rvwpop.is-on,.rvwpop.is-off{transition:opacity .18s linear;transform:translateX(-50%)}
}

/* ---- write-review overlay + composer ---- */
.rvw-overlay{position:fixed;inset:0;z-index:1100;visibility:hidden;pointer-events:none}
.rvw-overlay.is-open{visibility:visible;pointer-events:auto}
.rvw-overlay__scrim{position:absolute;inset:0;background:rgba(3,3,3,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .4s var(--ease)}
.rvw-overlay.is-open .rvw-overlay__scrim{opacity:1}
.rvw-modal{position:absolute;top:50%;left:50%;width:min(540px,92vw);max-height:86vh;overflow-y:auto;
  background:var(--glass);-webkit-backdrop-filter:blur(28px) saturate(1.4);backdrop-filter:blur(28px) saturate(1.4);
  border:1px solid var(--line);border-radius:8px;box-shadow:inset 0 1px 0 var(--glass-hi),0 30px 80px -30px rgba(0,0,0,.8);
  padding:clamp(28px,4.4vw,44px);transform:translate(-50%,-46%);opacity:0;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.rvw-overlay.is-open .rvw-modal{opacity:1;transform:translate(-50%,-50%)}
.rvw-modal__close{position:absolute;top:16px;right:18px;font-size:1.5rem;line-height:1;color:var(--mute);
  transition:color .3s,transform .3s var(--ease)}
.rvw-modal__close:hover{color:var(--orange);transform:rotate(90deg)}
.rvw-modal__status{font-size:.84rem;color:var(--mute);line-height:1.65;margin:.7rem 0 1.2rem}
/* Profile-completion step reuses checkout's .cofield styling for inputs; it
   just needs the vertical rhythm .co__form's flex gap normally provides. */
#rvwProfileForm .cofield{margin-bottom:1rem}
/* Email is always shown read-only (the verified Supabase Auth identity, see
   js/reviews.js renderProfileStep) — dimmed + not-allowed cursor so it reads
   as "already set", not a disabled/broken input. */
.cofield input[readonly]{color:var(--mute);cursor:not-allowed}
.cofield__hint{font-size:.66rem;color:var(--faint);margin-top:.3em}
/* Star rating picker, composer only (distinct from the read-only
   .rvw-card__stars display) - larger, interactive, keyboard-focusable. */
.rvw-ratepick{display:flex;gap:10px;margin:.4rem 0 1.2rem}
.rvw-ratepick__star{font-size:1.6rem;line-height:1;color:var(--line);transition:color .2s,transform .2s var(--ease)}
.rvw-ratepick__star:hover,.rvw-ratepick__star:focus-visible{color:var(--orange-soft);transform:scale(1.12)}
.rvw-ratepick__star.is-on{color:var(--orange)}
.rvw-textarea{display:block;width:100%;min-height:130px;resize:vertical;background:transparent;
  border:1px solid var(--line);border-radius:2px;padding:1em 1.1em;color:var(--white);font:inherit;
  font-size:.94rem;line-height:1.6;margin:1.3rem 0 1rem;transition:border-color .3s}
.rvw-textarea:focus{outline:none;border-color:var(--orange)}
.rvw-attach{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:1rem}
.rvw-attach__btn{display:inline-flex;align-items:center;padding:.75em 1.3em;border:1px solid var(--line);
  border-radius:2px;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:border-color .3s,color .3s}
.rvw-attach__btn:hover{border-color:var(--orange);color:var(--orange-soft)}
.rvw-attach__hint{font-size:.66rem;color:var(--faint)}
.rvw-previews{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:1.2rem}
.rvw-preview{position:relative;width:60px;height:60px;border-radius:3px;overflow:hidden;background:var(--black-3)}
.rvw-preview img,.rvw-preview video{width:100%;height:100%;object-fit:cover}
.rvw-preview__state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.62rem;background:rgba(7,7,7,.55);color:var(--white)}
.rvw-preview__state.is-done{color:var(--orange-soft);font-weight:700}
.rvw-preview__err{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.52rem;text-align:center;padding:2px;background:rgba(246,244,240,.25);color:var(--white)}
.rvw-preview__rm{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;
  background:rgba(7,7,7,.8);color:var(--white);font-size:.68rem;line-height:1;display:flex;
  align-items:center;justify-content:center}
@media (prefers-reduced-motion:reduce){
  .rvw-overlay__scrim,.rvw-modal,.rvw-modal__close{transition:none}
}

/* ---- review detail + fullscreen image viewer (shared: PDP + homepage) ----
   Display layer over the SAME review cards, opened by js/review-viewer.js.
   Reuses the store's glass tokens (--glass/--glass-hi/--line/--orange) so it
   reads as one system with the write-composer overlay above, never a second
   visual language. Namespaced .rvdt*/.rvlb* to avoid any .rvw-overlay clash. */
.rvw-card{cursor:pointer;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.rvw-card:hover{border-color:var(--line)}
.rvw-card:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.rvw-card__mediaitem{cursor:zoom-in}

/* Detail overlay */
.rvdt{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.rvdt[hidden]{display:none}
.rvdt__scrim{position:absolute;inset:0;background:rgba(3,3,3,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .4s var(--ease)}
.rvdt.is-open .rvdt__scrim{opacity:1}
.rvdt__panel{position:relative;width:min(560px,100%);max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--glass);-webkit-backdrop-filter:blur(28px) saturate(1.4);backdrop-filter:blur(28px) saturate(1.4);
  border:1px solid var(--line);border-radius:10px;box-shadow:inset 0 1px 0 var(--glass-hi),0 30px 80px -30px rgba(0,0,0,.8);
  padding:clamp(28px,4.4vw,44px);opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.rvdt.is-open .rvdt__panel{opacity:1;transform:none}
.rvdt__close{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;color:var(--mute);
  transition:color .3s,transform .3s var(--ease)}
.rvdt__close:hover,.rvdt__close:focus-visible{color:var(--orange);transform:rotate(90deg);outline:none}
.rvdt__product{display:block;font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin:.4rem 0 12px;transition:color .3s}
a.rvdt__product:hover{color:var(--orange-soft)}
.rvdt__stars{display:flex;gap:3px;margin-bottom:14px;font-size:1rem;line-height:1}
.rvdt__stars .rvw-star{color:var(--line)}
.rvdt__stars .rvw-star.is-on{color:var(--orange)}
.rvdt__body{font-size:1rem;line-height:1.8;color:var(--white);white-space:pre-wrap;overflow-wrap:break-word;margin-bottom:22px}
.rvdt__gallery{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.rvdt__mediabtn{width:88px;height:88px;border-radius:5px;overflow:hidden;background:var(--black-3);
  border:1px solid var(--line-2);padding:0;cursor:zoom-in}
.rvdt__mediabtn--video{cursor:default}
.rvdt__mediabtn img,.rvdt__mediabtn video{width:100%;height:100%;object-fit:cover;display:block}
.rvdt__mediabtn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.rvdt__foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line-2)}
.rvdt__name{font-size:.9rem;font-weight:600;letter-spacing:.02em;overflow-wrap:break-word;min-width:0}
.rvdt__verified{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-soft)}
.rvdt__date{font-size:.72rem;color:var(--faint);margin-left:auto}

/* Fullscreen image viewer */
.rvlb{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;
  background:rgba(3,3,3,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s var(--ease)}
.rvlb[hidden]{display:none}
.rvlb.is-open{opacity:1}
.rvlb__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;
  padding:clamp(48px,10vh,90px) clamp(12px,4vw,64px)}
.rvlb__img,.rvlb__video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:2px;box-shadow:0 20px 60px -20px rgba(0,0,0,.9)}
.rvlb__close{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:2;
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;line-height:1;color:var(--white);background:rgba(7,7,7,.5);border:1px solid var(--line);
  transition:background .3s,transform .3s var(--ease)}
.rvlb__close:hover,.rvlb__close:focus-visible{background:rgba(7,7,7,.85);transform:rotate(90deg);outline:none}
.rvlb__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;line-height:1;color:var(--white);
  background:rgba(7,7,7,.5);border:1px solid var(--line);transition:background .3s,border-color .3s}
.rvlb__nav:hover,.rvlb__nav:focus-visible{background:rgba(7,7,7,.85);border-color:var(--orange);outline:none}
.rvlb__nav--prev{left:max(10px,env(safe-area-inset-left))}
.rvlb__nav--next{right:max(10px,env(safe-area-inset-right))}
.rvlb__nav[hidden]{display:none}
.rvlb__count{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:2;
  font-size:.72rem;letter-spacing:.12em;color:var(--mute);background:rgba(7,7,7,.5);padding:6px 12px;border-radius:100px}
.rvlb__count[hidden]{display:none}
@media (max-width:760px){
  .rvlb__nav{width:42px;height:42px;font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){
  .rvdt__scrim,.rvdt__panel,.rvdt__close,.rvlb,.rvlb__close,.rvlb__nav{transition:none}
  .rvdt__panel{transform:none}
}

/* =====================================================================
   CHECKOUT
   ===================================================================== */
.co{padding:calc(var(--top-off) + clamp(30px,5vh,60px)) var(--pad) clamp(60px,10vh,120px);max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.2fr .8fr;
  grid-template-areas:"head head" "form promo" "form aside";
  gap:clamp(18px,2.4vw,30px) clamp(36px,5vw,90px);align-items:start}
.co__head{grid-area:head;margin-bottom:clamp(6px,1.4vw,18px)}
.co__promo{grid-area:promo}
.co__form{grid-area:form;display:flex;flex-direction:column;gap:clamp(26px,4vw,44px)}
.cofield{display:flex;flex-direction:column;gap:.55em}
.cofield label{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.cofield input,.cofield select{background:transparent;border:1px solid var(--line);border-radius:2px;padding:1em 1.1em;
  color:var(--white);font-size:.98rem;transition:border-color .3s}
.cofield input:focus,.cofield select:focus{outline:none;border-color:var(--orange)}
/* Inline, per-field validation message (checkout). Lives under the input
   it names so a phone buyer sees WHICH field is wrong without hunting for
   a toast at the other end of the screen. Set/cleared by js/checkout.js. */
.cofield__err{font-size:.68rem;line-height:1.4;color:var(--orange);margin-top:.35em;font-weight:500}
.cofield input[aria-invalid="true"]{border-color:var(--orange)}
.cogrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* A .cogrid row that holds a single, full-width field (the street address,
   which is the last field of the address step) — same 16px rhythm as the
   paired rows above it, one column instead of two. */
.cogrid--full{grid-template-columns:1fr}
.cosec__title{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:1.2rem}
.copay{display:flex;flex-direction:column;gap:12px}
.copay__opt{display:flex;align-items:center;gap:14px;padding:1.1em 1.2em;border:1px solid var(--line);border-radius:3px;
  cursor:pointer;transition:border-color .3s,background .3s}
.copay__opt.is-active{border-color:var(--orange);background:rgba(246,244,240,.04)}
.copay__opt i{width:16px;height:16px;border-radius:50%;border:1px solid var(--mute);flex:none;position:relative}
.copay__opt.is-active i{border-color:var(--orange)}
.copay__opt.is-active i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--orange)}
.copay__opt b{font-weight:600;font-size:.92rem}
.copay__opt small{display:block;color:var(--faint);font-size:.72rem;margin-top:2px;letter-spacing:.02em}
.copay__opt small.copay__note{color:var(--faint);font-size:.62rem;margin-top:4px;letter-spacing:.01em}
.copay__opt b.copay__note-accent{color:var(--orange);font-size:inherit;font-weight:600}
.copay__badge{margin-left:auto;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--line);border-radius:20px;padding:.35em .7em}
.co__aside{grid-area:aside;position:sticky;top:calc(var(--top-off) + 20px);background:var(--black-2);border:1px solid var(--line-2);border-radius:4px;padding:clamp(22px,3vw,32px)}
/* standalone promo card (top of the right rail on desktop, first block on mobile) */
.co__promo{background:var(--black-2);border:1px solid var(--line-2);border-radius:4px;padding:clamp(18px,2.4vw,24px)}
.co__promo h2{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:1rem}
.co__promo .co__coupon{margin:0}
/* pay button only appears once a payment method is chosen */
.btn[hidden]{display:none}
.co__aside h2{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:1.4rem}
.coitem{display:grid;grid-template-columns:52px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.coitem img{width:52px;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.coitem__n{font-size:.84rem;font-weight:500}
.coitem__m{font-size:.68rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.coitem__p{font-size:.82rem;font-weight:600}
.co__totals{margin-top:18px}
.co__totals .cart__row--total{margin:14px 0 20px}
.trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:.68rem;color:var(--faint)}
.trust span{display:inline-flex;align-items:center;gap:.5em}
.trust svg{width:14px;height:14px;stroke:var(--orange);fill:none;stroke-width:1.5}

/* =====================================================================
   PDP EDITORIAL SECTIONS (universal)
   Editorial blocks native to VORÉ — same tokens, spacing rhythm (border-top
   separators, --maxw container, --pad), typography (.idx, .h-mid) and .paccord
   components used everywhere else. Rendered on every PDP; the full-width
   Product Details / Shipping sections are phone-only (the in-.pinfo accordion
   carries them on desktop), while the FAQ shows on both.
   ===================================================================== */
@media (min-width:761px){
  /* Desktop shows the FAQ ("Good to Know") section — the one useful mobile
     section it was missing — as a centred editorial accordion below reviews,
     matching the reviews/size-chart section rhythm. The others stay desktop-
     hidden: Shipping & Returns + Product Details are already covered by the
     in-.pinfo accordion (no duplication). */
  .pdetails,.pship{display:none}
}

.pdetails,.pship,.pfaq{max-width:var(--maxw);margin:0 auto;
  padding:clamp(46px,8vh,100px) var(--pad);border-top:1px solid var(--line-2);scroll-margin-top:var(--top-off)}
.pdetails__inner,.pship__inner,.pfaq__inner{margin:0 auto}
.pship__inner{max-width:1080px}
.pdetails__inner,.pfaq__inner{max-width:820px}
.pship__head,.pfaq__head{margin-bottom:clamp(22px,4vw,40px)}
.pship__head .h-mid,.pfaq__head .h-mid,.pdetails__head .h-mid{margin-top:.5rem}

/* PRODUCT DETAILS (relocated material accordion) */
.pdetails__head{margin-bottom:1.4rem}

/* SHIPPING & RETURNS */
.pship__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,28px)}
.pship__row{display:flex;gap:14px;align-items:flex-start}
.pship__ico{flex:none;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.pship__ico svg{width:18px;height:18px;stroke:var(--orange);fill:none;stroke-width:1.5}
.pship__row b{display:block;font-size:.92rem;font-weight:600;margin-bottom:.25rem}
.pship__row p{font-size:.82rem;line-height:1.6;color:var(--mute)}

/* FAQ (reuses .paccord) */
.pfaq__accord{border-top:1px solid var(--line-2)}
.pfaq__accord .paccord__inner p{margin:0}

/* STICKY MOBILE PURCHASE BAR (shown only ≤760px, see responsive block) */
/* z-index sits below the full-screen menu (880) and cart drawer (1000) so
   either overlay always covers the bar, but above ordinary PDP content. */
.pdp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:850;display:none;align-items:center;gap:14px;
  padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom,0px));
  background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-top:1px solid var(--line);transform:translateY(115%);transition:transform .5s var(--ease);will-change:transform}
.pdp-sticky.is-on{transform:none}
.pdp-sticky__info{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.pdp-sticky__name{font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdp-sticky__price{font-size:1.05rem;font-weight:600}
.pdp-sticky__btn{flex:none;margin-left:auto;padding:.95em 1.7em}

/* =====================================================================
   404
   ===================================================================== */
.nf{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--pad)}
.nf__code{font-size:clamp(6rem,22vw,18rem);font-weight:800;line-height:.8;letter-spacing:-.05em;
  background:linear-gradient(180deg,var(--white),rgba(246,244,240,.15));-webkit-background-clip:text;background-clip:text;color:transparent}
.nf__code em{color:var(--orange);-webkit-text-fill-color:var(--orange)}

/* =====================================================================
   TOAST
   ===================================================================== */
/* Base state is fully hidden: opacity + visibility guarantee no sliver of
   the box peeks above the viewport bottom regardless of transform math
   (the old transform-only hide left a ~16px black rectangle on every page). */
.toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translate(-50%,160%);
  z-index:1200;background:var(--black-3);opacity:0;visibility:hidden;pointer-events:none;
  border:1px solid var(--line);border-radius:3px;padding:.9em 1.4em;font-size:.82rem;display:flex;align-items:center;gap:.7em;
  box-shadow:0 20px 60px rgba(0,0,0,.5);transition:transform .55s var(--ease),opacity .4s var(--ease),visibility .55s}
.toast.show{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto}
.toast b{color:var(--orange)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1000px){
  .hd__links{display:none}   /* hamburger is the sole nav entry at tablet/mobile widths */
  .pdp__main{grid-template-columns:1fr;gap:26px}
  /* single column: cap + centre the gallery so the image doesn't dominate the
     fold and the buy box rides up right beneath it. Capped at 624px — the same
     +20% applied to the desktop gallery column above, so the tablet step down
     stays proportional. */
  .gal{position:static;max-width:624px;margin-inline:auto}
  .co{grid-template-columns:1fr;grid-template-areas:"head" "promo" "form" "aside"}
  .co__aside{position:static}
  .related__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  /* Mobile: the ORIGINAL horizontal scroll-snap carousel — all 4 preview
     products swipe sideways (~2 in view + a peek), then the small View More
     button below → next collection. This IS the intended gesture: the
     container scrolls as a carousel, but each card inside it stays fixed —
     see .pcard's -webkit-user-drag:none / pointer-events:none img / the
     draggable="false" markup in home.js, which is what actually stops a
     card from being dragged/repositioned. Do not confuse "the carousel
     scrolls" with "a card can be dragged": only the outer container moves,
     driven by native touch scrolling, never by a drag handler on a tile.
     align-items:start keeps cards top-aligned with no title→price gap. */
  .drop__list{display:flex;grid-template-columns:none;overflow-x:auto;overflow-y:visible;gap:14px;
    scroll-snap-type:x mandatory;align-items:start;padding-bottom:6px;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;overscroll-behavior-x:contain}
  .drop__list::-webkit-scrollbar{display:none}
  .drop__list .pcard{flex:0 0 46%;scroll-snap-align:start}   /* ~2 cards + peek; swipe for the rest */
  .drop__list .pcard:nth-child(n+4){display:flex}            /* keep the 4th visible on mobile */
  /* Tight, intentional rhythm: name follows the image, price follows the name
     immediately — no dead vertical gap. */
  .pcard__body{padding-top:10px}
  .pcard__row{margin-top:6px}
  /* Reduce stacked dead space between sections (was ~180px of doubled padding
     between collections). Symmetric, premium, not cramped. */
  .drop{padding:clamp(40px,8vw,64px) var(--pad)}
  .drop__head{margin-bottom:clamp(16px,4.5vw,26px)}
  .drop__more{margin-top:clamp(20px,5vw,30px)}
  /* ~7% smaller mobile product title, still strong and premium (Part: title size). */
  .pcard__name{font-size:clamp(1rem,3.4vw,1.16rem);margin-bottom:.3rem}
  .link-arrow{font-size:.66rem;letter-spacing:.1em}
  /* Declutter: no description on the mobile tile — image → title → price →
     discount/colour → CTA → swatches. Title still reserves 2 lines for alignment. */
  .pcard__desc{display:none}
  /* Any residual heading sub-label ("(Trending)") shrinks fluidly on narrow
     phones so it never wraps awkwardly under the collection title. */
  .drop__label{font-size:.46em}

  /* ---- PRODUCT SECTIONS (mobile) ----------------------------------------
     Default section rhythm here is clamp()'d vh padding, .drop's bottom
     (~97px) stacked on the next section's top (~81px on .drop, ~146px on
     .mani), leaving ~180-240px of dead space after the cards.

     The gap that replaces it must stay LARGER than the .reveal animation's
     translateY(28px): reveals fire per-element via IntersectionObserver, so
     cards and the next section's heading settle independently, and any gap
     under 28px lets an un-revealed card visually overlap the heading below
     it mid-animation. .drop gives up its bottom padding entirely and the
     following section owns the whole gap: 36px + the list's 8px = 44px of
     real breathing room, comfortably clear of the 28px reveal offset.

     .mani's own padding-top CANNOT own the Volume One -> Manifesto gap:
     .mani__bg is position:absolute;inset:0 on .mani itself, so it fills
     .mani's padding area too, raising .mani's padding-top only pushes
     the manifesto TEXT further down inside its own photo, it adds zero
     black space before that photo starts (confirmed: .mani__bg's top
     equals .mani's top regardless of padding-top). Genuine black space
     can only come from the section BEFORE the photo begins, #volumeOne
     itself has no background image, so its own padding-bottom is real
     black (page background) sitting entirely before .mani's box starts.
     #volumeOne{padding-bottom} is therefore the single, sole owner of
     this transition: 88px (96px total with the list's fixed 8px
     scrollbar clearance) of visible black breathing room, landing in
     the ~80-110px target. .mani's own padding-top then supplies a much
     smaller, deliberate amount of its own photo (40px) before "THE
     MANIFESTO" label, enough for the section to read as a proper
     editorial photo section rather than text sitting flush against the
     black gap, without reintroducing the vh-scaled dead space this
     whole rule exists to avoid.

     .mani's BOTTOM padding has the opposite problem: the shared
     clamp(90px,18vh,220px) is viewport-HEIGHT-scaled, so on a tall
     phone it renders ~150px+ of empty background photo below the last
     principle cell, content finishes well above where the section (and
     its bg image) actually ends. That's real dead space, not breathing
     room, because it tracks screen height rather than the content above
     it. Fixed 64px replaces it: enough room for the section to still
     read as deliberately closed, without dragging the photo out past
     its content. (.ft's own top padding is untouched, it's a shared,
     every-page rule, not part of this homepage-only section.) */
  .drop{padding-bottom:0}
  #volumeOne{padding-top:36px;padding-bottom:88px}
  /* .reviews--home sits between #volumeOne and .mani in the DOM but was
     never brought into the fixed-px rhythm above when it was added: it
     still used its desktop clamp(70px,11vh,130px) on both sides, which
     stacks on top of #volumeOne's own 88px (real, deliberate) bottom
     padding to 170-220px+ before the review heading - exactly the kind of
     dead space the fixed values above exist to avoid. Same fix, same
     reasoning: small fixed padding here, the neighbouring section already
     owns the real transition space. */
  .reviews--home{padding-top:44px;padding-bottom:56px}
  .mani{padding-top:32px;padding-bottom:44px}

  /* ---- FOOTER (mobile): logo stays centred; the 3-column grid becomes one
     compact stacked column, left-aligned per section so it scans quickly
     without huge gaps between blocks. Secure-payment row and copyright stay
     centred, matching the rest of the mobile footer's symmetry. */
  .ft{padding:44px var(--pad) 28px}
  .ft__grid{grid-template-columns:1fr;gap:30px;margin-top:34px;max-width:360px}
  .ft__col--reach{order:-1}
  .ft__social{justify-content:flex-start}
  /* Secure-payment: one line where it comfortably fits; if a phone is too
     narrow for the label + all 4 badges at a legible size, the whole .ft__pay
     GROUP wraps onto its own centred line below the label (flex-wrap:wrap
     here) rather than squeezing badges into illegibility or wrapping them
     individually mid-row. */
  .ft__secure{margin-top:32px;padding-top:24px;flex-direction:row;flex-wrap:wrap;
    align-items:center;justify-content:center;gap:8px}
  .ft__secure-label{font-size:.56rem;letter-spacing:.02em;gap:.4em;white-space:nowrap}
  .ft__secure-label svg{width:14px;height:14px;flex:none}
  .ft__pay{gap:6px}
  .ft__pay-badge{width:44px;height:25px;padding:3px 5px;border-radius:5px}
  .ft__base{margin-top:26px}
  .ft__base p{font-size:.68rem}
  .related__grid{grid-template-columns:1fr;max-width:420px}
  .hd__brand{gap:.4em}
  .hd__mark{height:calc(22px * 1.38)}   /* +20% (previous) then +15% more over the original 22px mobile mark; header height (--hd-h) is fixed so this can't grow the header itself */

  /* ---- CHECKOUT (phones only) ---------------------------------------------
     Mobile-only refinements to the existing checkout. The desktop layout,
     copy, order and business logic are untouched — every rule here lives
     inside this breakpoint.

     1. Every field goes full width (name/email/phone and city/state stop
        sharing a cramped row).
     2. Inputs are 16px. Below 16px iOS Safari ZOOMS the page on focus and
        never zooms back, which is what made the form feel like it drifted
        sideways mid-typing; it is also the single biggest cause of apparent
        horizontal overflow on a checkout. 16px removes both.
     3. Comfortable, thumb-sized targets: ~52px inputs, roomier payment rows,
        a full-width Pay button.
     4. min-width:0 on every flex/grid child that holds text, so a long line
        (a payment method's "UPI · Cards · Net Banking · Wallets", a long
        product name) wraps instead of pushing the page sideways.
     5. Tighter, more deliberate vertical rhythm so the form reads as three
        short steps rather than one long scroll. */
  .cogrid{grid-template-columns:1fr;gap:14px}
  .co{padding-left:var(--pad);padding-right:var(--pad);gap:18px;
      padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
  .co>*{min-width:0}
  .co__head{margin-bottom:2px}
  .co__head .h-big{font-size:clamp(1.9rem,8vw,2.6rem);line-height:1.06}
  .co__form{gap:30px}
  .cosec__title{margin-bottom:.95rem}
  /* 16px exactly — see (2) above. .98rem would be 15.68px and trigger the zoom. */
  .cofield input,.cofield select{font-size:16px;padding:.92em 1em;border-radius:4px}
  .cofield label{font-size:.64rem;letter-spacing:.14em}
  /* Keep a focused field clear of the sticky header when the keyboard opens. */
  .cofield input{scroll-margin-top:calc(var(--top-off) + 16px)}
  .co-pin-hint{margin-top:6px}

  /* Payment rows: bigger hit area, text that wraps instead of overflowing, and
     the country badge dropped (it repeats "India" the whole checkout already
     states, and it is the one element that squeezes the label on a 320px
     screen). */
  .copay{gap:10px}
  .copay__opt{padding:1.05em 1em;gap:12px;border-radius:6px;align-items:flex-start}
  .copay__opt i{margin-top:3px}
  .copay__opt>span{min-width:0;flex:1}
  .copay__opt b{font-size:.95rem}
  .copay__opt small{font-size:.74rem;line-height:1.45}
  .copay__badge{display:none}

  /* Promo + summary cards: same look, more breathing room, and a coupon row
     whose input and button can't be squeezed onto an unusable single line. */
  .co__promo,.co__aside{padding:18px 16px;border-radius:8px}
  .cart__coupon input,.co__coupon input{flex:1 1 100%;font-size:16px;padding:12px 14px}
  .cart__coupon .btn,.co__coupon .btn{flex:1 1 100%;padding:12px 16px;font-size:.72rem}
  .coupon-chip{flex:1 1 100%}

  /* Order summary lines + the Pay button. */
  .coitem{grid-template-columns:56px 1fr auto;gap:12px}
  .coitem img{width:56px}
  .coitem__n{min-width:0;overflow-wrap:anywhere}
  .co__totals .btn--block{padding:1.15em 1.4em;font-size:.8rem}
  .trust{gap:10px 16px;justify-content:space-between;font-size:.66rem}

  /* Empty-bag / order-confirmed states: full-width actions rather than three
     pills wrapping awkwardly on a narrow screen. */
  .costate{min-height:calc(100svh - var(--top-off) - 80px)}
  .costate__actions{flex-direction:column;align-items:stretch;gap:10px}
  .costate__actions .btn{width:100%}

  /* ---- PDP MOBILE SECTION ORDER (phones only) ------------------------------
     Section order is achieved purely with flex `order` on .pdp, so the DOM
     stays in its base sequence and ONLY phones rearrange. On phones the
     material accordion moves into the full-width .pdetails section (the
     in-.pinfo accordion is hidden). */
  .pdp{display:flex;flex-direction:column}
  /* Flex items with margin:0 auto size to their content width, not the
     container — pin them to the viewport width so a wide child can't push
     horizontal overflow. */
  .pdp>*{width:100%;min-width:0}
  .pdp__crumb{order:1}
  .pdp__main{order:2}
  #reviews-mount{order:4}
  .pdetails{order:6}
  .sizechart{order:7}
  .pship{order:8}
  .pfaq{order:9}
  .pinfo__accord{display:none}     /* the material accordion moves to .pdetails on phones */

  .pdp-sticky{display:flex}
  .pship__grid{grid-template-columns:1fr}

  /* ---- STANDARD PDP MOBILE HIERARCHY (phones only, every product page).
     The thumbnail strip is gone site-wide; here the reduced main image is
     capped ~20% narrower and centred so the buy box (title · price · USPs ·
     1-line desc · colour · size · Buy Now) rides into the first viewport. The
     compact 1-line description + Read More toggle are the base rules now, so
     no phone-only override is needed. */
  /* Breadcrumb hidden on phones to lift the purchase area into the first
     viewport (the BreadcrumbList JSON-LD stays in the page for SEO). */
  .pdp__crumb{display:none}
  /* phone: gallery spans the content width (no dead black sides); the peek
     carousel's slide is a touch narrower so the next image peeks and the hero
     height stays compact enough to keep Buy Now near the first viewport */
  .gal{max-width:none;margin-inline:0}
  /* Larger mobile PDP gallery: 88.2% is the previous 84% + 5%. The next slide
     still peeks (~12%) so the swipe affordance, dots and 4:5 ratio are all
     preserved (Part: mobile PDP gallery). object-fit:contain keeps the product
     uncropped, so the taller slide crops nothing. */
  .gal__slide{flex:0 0 88.2%}
  .pdp__main{gap:12px;padding-top:8px}
  .pinfo__name{margin:0 0 .4rem}
  /* tighter buy-box rhythm on phones so Buy Now rides into the first viewport */
  .pdp-usp{margin-top:.75rem}
  .pdp-usp__item{padding:.55em .4em;gap:5px}
  .pdp-usp svg{width:21px;height:21px}
  .pinfo__desc{margin:.7rem 0 .15rem}
  .pblock{margin-top:.85rem}
  .pblock__label{margin-bottom:.5rem}
  .pactions{margin-top:.95rem}
  /* ---- OFFERS BOX (phones only) ------------------------------------------
     The offer lines are set on a desktop rhythm (.55em between offers, 1.5
     line-height) that is too tight once a line wraps on a phone: the
     VOREPREPAID badge is taller than its own line box (it carries a border
     and padding), so on the wrapped second line it sits against the text
     above it, and the prepaid offer reads as glued to the launch offer.
     Vertical rhythm only — wording, colours, type and the desktop layout are
     untouched. inline-block makes the badge size the line box it sits on, so
     it can never overlap the line above whatever the wrap point. */
  .pdp-offer__list{gap:1em}
  .pdp-offer__list li{line-height:1.8}
  .pdp-offer__code{display:inline-block}
  .pdp-offer__list small{margin-top:.55em;line-height:1.6}
  .pdp-offer__note{margin-top:1.05rem}
  /* The buy-box order (name · price · USPs · desc · colour · size · Buy Now ·
     delivery/COD · offers · details) is set by the real DOM sequence now
     (product.js layoutBuyBox), identical on desktop and phone, so no flex
     `order` reshuffling is needed here anymore. */
  /* "Write a Review" reflows from beside the "Customer Reviews" heading to
     after the review list/empty-state - same #reviews grid from the base
     rule above, just a single-column template on phones so "write" drops to
     its own row last, and styled as a standalone full-width CTA there,
     matching Add to Bag/Buy Now. */
  #reviews{order:4;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "list" "write"}
  #rvwWriteBtn{width:100%;margin-top:24px}

  /* ---- HERO (mobile) ---- */
  .scroll-cue{display:none}                                  /* "SCROLL" cue removed, dots only */
  .banner__title{font-size:2.18rem;line-height:1.03}          /* ~10% smaller than 2.42rem */
  .banner__cta{margin-top:2rem}
  .banner__cta .btn{padding:.82em 1.5em;font-size:.72rem}     /* smaller SHOP COLLECTION button */
  .banner__inner{padding-bottom:104px}                        /* clears the indicators, no overlap */
  .hero-slider__dots{bottom:calc(30px + env(safe-area-inset-bottom,0px))}

  /* ---- MOBILE HERO (mobile-only; replaces the hero-slider above) ----
     No top padding: the hero sits flush at the page top, full viewport
     width, exactly where .hero-slider sits on desktop, the fixed .hd
     header overlays it transparently until scroll (see .hd.is-stuck),
     same as the desktop hero. */
  .hero-slider{display:none}
  .mb-hero{display:block}

  /* ---- FULL-SCREEN MENU (mobile: centered, larger, airier) ---- */
  .menu{justify-content:center;padding:calc(var(--top-off) + 24px) var(--pad) calc(40px + env(safe-area-inset-bottom,0px))}
  .menu__list{text-align:center;gap:clamp(.5em,2.6vh,1em)}
  .menu__item{justify-content:center}
  .menu__item a{font-size:clamp(2.1rem,9.5vw,3rem);opacity:.72;line-height:1.05}
  .menu__foot{justify-content:center;text-align:center;gap:14px 22px;margin-top:clamp(44px,8vh,72px);font-size:.72rem}
}
/* Below 360px, shrink the label and badges further — still aiming for one
   line at 320px (the narrowest supported width), with the .ft__secure
   wrap-fallback above as the safety net if a given phone's own font
   rendering ever pushes it over. */
@media (max-width:359px){
  .ft__secure{gap:5px}
  .ft__secure-label{font-size:.46rem;gap:.3em}
  .ft__secure-label svg{width:10px;height:10px}
  .ft__pay{gap:4px}
  .ft__pay-badge{width:36px;height:22px;padding:2px 4px;border-radius:4px}
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .scroll-cue i{animation:none}
  .menu__item a{transform:none;transition:opacity .3s,color .3s}
  .mb-hero__slide{transition:none}
  .ctile__img{transition:none}
  *{scroll-behavior:auto!important}
}

/* =====================================================================
   COUPON / PROMO CODE (cart drawer + checkout order summary)
   ===================================================================== */
/* flex-wrap so a coupon-note (below) can drop onto its own line via
   flex-basis:100% without disturbing the normal input+button / chip+remove
   row, which already fits on one line and never wraps in practice */
.cart__coupon,.co__coupon{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.cart__coupon input,.co__coupon input{flex:1;min-width:0;background:transparent;border:1px solid var(--line);border-radius:4px;
  padding:9px 12px;color:var(--white);font:inherit;font-size:.78rem;letter-spacing:.02em}
.cart__coupon input::placeholder,.co__coupon input::placeholder{color:var(--faint)}
.cart__coupon input:focus,.co__coupon input:focus{border-color:var(--orange)}
.cart__coupon .btn,.co__coupon .btn{padding:9px 16px;font-size:.7rem;white-space:nowrap}
.coupon-chip{flex:1;font-size:.76rem;color:var(--orange-soft);border:1px solid var(--line);border-radius:4px;
  padding:9px 12px;letter-spacing:.03em;text-transform:uppercase}
.coupon-remove{background:none;border:none;color:var(--mute);font-size:.68rem;text-decoration:underline;
  cursor:pointer;padding:0 2px;white-space:nowrap}
.coupon-remove:hover{color:var(--orange)}
/* eligibility note under an applied coupon ("Valid for prepaid orders only")
   - a general property of the coupon row, not styling specific to any one
   code */
.coupon-note{flex-basis:100%;font-size:.68rem;color:var(--faint);letter-spacing:.02em}
/* Bundle offer strip (Part: bundle offers) — a compact premium band above the
   promo box in the cart drawer and checkout that advertises the Buy 2 / Buy 3
   ladder and nudges toward the next tier. Deliberately quiet so it belongs to
   the summary rather than shouting over it. */
.bundle-offer{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:0 0 14px;padding:10px 12px;
  border:1px solid var(--line);border-radius:6px;background:linear-gradient(180deg,rgba(246,244,240,.05),rgba(255,255,255,.01))}
.bundle-offer__tag{flex:0 0 auto;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--black);background:var(--orange);border-radius:4px;padding:.34em .55em;line-height:1}
.bundle-offer__txt{flex:1;min-width:0;font-size:.72rem;font-weight:500;letter-spacing:.01em;color:var(--mute)}

/* =====================================================================
   CHECKOUT STATES: empty bag + order confirmation (luxury, centered)
   ===================================================================== */
.costate{grid-column:1/-1;min-height:calc(100svh - var(--top-off) - 120px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:clamp(30px,8vh,90px) 0}
.costate__art{width:clamp(104px,28vw,168px);margin-bottom:clamp(26px,5vh,48px);color:var(--orange);opacity:.96}
.costate__art svg{width:100%;height:auto;display:block}
.costate__idx{font-size:.68rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--orange);margin-bottom:1.1rem}
.costate__title{font-size:clamp(2.6rem,8vw,4.6rem);font-weight:700;line-height:1;letter-spacing:-.025em}
.costate__sub{color:var(--mute);font-size:clamp(.86rem,2.4vw,.98rem);max-width:38ch;margin:1.1rem auto 0;line-height:1.7}
.costate__sub b{color:var(--white);font-weight:600}
.costate__cta{margin-top:clamp(36px,7vh,64px)}
.costate__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:clamp(36px,7vh,64px)}
@media (max-width:520px){
  .costate__actions{flex-direction:column;align-items:stretch;width:100%;max-width:320px;margin-left:auto;margin-right:auto}
  .costate__actions .btn{width:100%}
}

/* one-time celebration confetti (reduced-motion users never see it) */
.confetti-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1300}
@media (prefers-reduced-motion:reduce){.confetti-canvas{display:none}}


/* =====================================================================
   MONOCHROME PREMIUM LAYER (V3)
   Everything below re-themes and refines the components above into the
   monochrome editorial system. Two parts:
   1. PAPER SCOPE — the commerce canvas (home product sections, PDP,
      collection listings, checkout, legal/contact) flips to off-white
      via token re-declaration; chrome (header, menus, cart, footer,
      overlays, hero/manifesto photography) stays ink.
   2. REFINEMENTS — sharp geometry (no rounded-card aesthetic), Poppins
      typography discipline, restrained hovers, premium payment badges.
   Selectors and layout math above are untouched; this layer only
   re-skins them, so every JS hook and overflow fix keeps working.
   ===================================================================== */

/* ---------------- 1 · PAPER SCOPE ---------------- */
.drop,.reviews--home,main.pdp,main.co,main.page--paper{
  --black:#FAF9F7;
  --black-2:#F1EFEB;
  --black-3:#EAE7E1;
  --white:#0B0B0B;
  --mute:rgba(11,11,11,.62);
  --faint:rgba(11,11,11,.44);
  --ghost:rgba(11,11,11,.18);
  --orange:#0B0B0B;
  --orange-soft:rgba(11,11,11,.78);
  --line:rgba(11,11,11,.16);
  --line-2:rgba(11,11,11,.09);
  --glass:rgba(250,249,247,.88);
  --glass-hi:rgba(255,255,255,.65);
  background:var(--black);
  color:var(--white);
}
/* Page background behind paper shells (progressive enhancement; the shells
   above paint themselves regardless, so browsers without :has() only lose
   the colour of overscroll gutters). */
body:has(main.pdp),body:has(main.co),body:has(main.page--paper){background:#FAF9F7}
/* Selection stays legible on both surfaces. */
.drop ::selection,.reviews--home ::selection,main.pdp ::selection,
main.co ::selection,main.page--paper ::selection{background:#0B0B0B;color:#FAF9F7}
/* Paper checkout: the selected payment option needs an ink-tinted wash (the
   base rule's white wash disappears on paper). */
main.co .copay__opt.is-active{background:rgba(11,11,11,.04)}
/* Paper "View More" hover wash, same reason. */
.drop .drop__viewmore:hover{background:rgba(11,11,11,.04)}
/* The full-catalogue tile builds its panel from washes tuned for ink; on
   either surface the tokenised panel reads correctly. */
.pcard--more{background:var(--black-2)}
.pcard--more:hover{background:var(--black-3)}
/* Offers box: hairline panel on both surfaces instead of a tinted wash. */
.pdp-offer{background:var(--black-2);border-color:var(--line)}
.bundle-offer{background:var(--black-2)}
/* PDP loading shimmer, tokenised for both surfaces. */
.pdp-skeleton{background:linear-gradient(100deg,var(--black-3) 30%,var(--black-2) 50%,var(--black-3) 70%);background-size:200% 100%}

/* ---------------- 2 · ANNOUNCEMENT BAR — paper strip ---------------- */
.ann{background:#F6F4F0;color:#0B0B0B;--orange:#0B0B0B}
.ann__item{font-weight:500;letter-spacing:.22em;font-size:.62rem}

/* ---------------- 3 · TYPOGRAPHY DISCIPLINE ---------------- */
body{letter-spacing:.012em}
.h-display,.h-big,.h-mid,.banner__title,.mani__title,.loyal__title,
.pinfo__name,.costate__title,.ctile__title,.pcard--more__title{font-weight:500}
.h-display{letter-spacing:-.015em}
.h-big{letter-spacing:-.008em}
.banner__title{letter-spacing:-.012em;font-weight:500}
.pinfo__name{letter-spacing:.02em;text-transform:uppercase;font-size:clamp(1.45rem,2.4vw,2.1rem)}
em,.accent{font-weight:400}
.eyebrow,.idx{font-weight:500;letter-spacing:.34em}
.drop__label{font-weight:400;letter-spacing:.02em}
.menu__item a{text-transform:uppercase;font-weight:500;letter-spacing:.06em}

/* ---------------- 4 · SHARP GEOMETRY ---------------- */
.btn,.drop__viewmore,.pcard--more,.pdp-usp__item,.pdp-assure,.pdp-offer,
.rvw-card,.co__aside,.co__promo,.copay__opt,.cofield input,.cofield select,
.coupon-chip,.cart__coupon input,.co__coupon input,.bundle-offer,.toast,
.ctile,.scm__panel,.rvw-modal,.rvdt__panel,.badge-off,.rvwpop,
.pcard__media,.rcard__media,.gal__slide,.citem__img,.coitem img,
.ft__pay-badge,.ctile__lock,.copay__badge,.rvw-textarea,.rvw-attach__btn{border-radius:0}
@media (max-width:760px){
  .cofield input,.cofield select,.copay__opt,.co__promo,.co__aside,.ft__pay-badge{border-radius:0}
}

/* ---------------- 5 · BUTTONS & INTERACTIONS ---------------- */
.btn{font-weight:500;letter-spacing:.18em;font-size:.74rem}
.btn--primary:hover{background:var(--orange-soft);transform:none}
.btn--fill:hover{background:var(--orange-soft);transform:none}
.btn--ghost{border-color:var(--ghost)}
.btn--ghost:hover{border-color:var(--orange);color:var(--orange)}
.link-arrow{color:var(--orange-soft)}
.drop__viewmore{font-weight:500;letter-spacing:.2em}
@media (hover:hover) and (pointer:fine){
  .drop__viewmore:hover{border-color:var(--orange);color:var(--orange)}
  .pcard:hover .pcard__media img{transform:scale(1.03)}
}
.rcard:hover .rcard__media img{transform:scale(1.03)}

/* ---------------- 6 · PRODUCT CARDS — editorial fashion treatment ------
   The photograph is the hero; the caption is a quiet, tracked line of
   uppercase type with the price in plain figures beneath it. */
.pcard__name{font-size:.8rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;line-height:1.45;margin:0 0 .18rem}
.pcard__price{font-size:.8rem;font-weight:400;letter-spacing:.03em}
.pcard__price s{font-size:.92em}
.pcard__more-colors{font-size:.78em;letter-spacing:.04em}
.rcard__name{font-size:.8rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;line-height:1.45;margin-top:.9rem}
.rcard__price{font-size:.8rem;letter-spacing:.03em}
.cgrid .rcard__name{font-size:.72rem;letter-spacing:.08em}
.cgrid .rcard__price{font-size:.74rem}
.badge-off{font-weight:600;letter-spacing:.08em;padding:.34em .6em}
@media (max-width:760px){
  .pcard__name{font-size:.72rem;letter-spacing:.08em;margin-bottom:.14rem}
  .pcard__price{font-size:.74rem}
}

/* ---------------- 7 · HEADER & CHROME ---------------- */
.hd.is-stuck{background:rgba(7,7,7,.88)}
.hd__links a,.hd__act,.hd__menu{font-weight:400;letter-spacing:.18em;font-size:.72rem}
.hd__count{background:var(--white);color:var(--black);font-weight:600}
.cart__head h2{font-weight:500;letter-spacing:.26em}
.citem__name{font-weight:500}
.menu{background:rgba(5,5,5,.94)}

/* ---------------- 8 · PAYMENT BADGES ----------------
   Uniform white cards, hairline border. All four badges carry real brand
   art: the Cashfree badge uses the transparent light-background logo derived
   from the owner-supplied source (see PAY_CASHFREE in js/core.js). */
.ft__pay-badge{border:1px solid rgba(0,0,0,.12)}

/* ---------------- 9 · FOOTER — editorial monochrome ---------------- */
.ft{background:#070707}
.ft__h{letter-spacing:.3em;font-weight:500;color:var(--mute)}
.ft__links a:hover,.ft__contact:hover{color:var(--white)}
.ft__contact svg{color:var(--white)}
.ft__secure-label svg{color:var(--white)}
.menu__foot a:hover{color:var(--white)}

/* ---------------- 10 · FORMS / CHECKOUT POLISH ---------------- */
.cofield label{font-weight:500;letter-spacing:.2em}
.cosec__title{font-weight:500;letter-spacing:.24em;color:var(--white)}
.co__aside h2,.co__promo h2{font-weight:500;letter-spacing:.24em}
.copay__opt.is-active{border-color:var(--orange)}
.sctable th{color:var(--mute);font-weight:500;letter-spacing:.2em}

/* ---------------- 11 · PDP DETAILS ---------------- */
.pdp-usp svg,.pdp-assure__ico svg,.pship__ico svg,.trust svg{stroke:var(--white)}
.pdp-usp__item{background:var(--black-2);border-color:var(--line-2)}
.pdp-assure{background:var(--black-2)}
.pdp-assure__ico{background:var(--black);border-color:var(--line)}
.pdp-offer__head{color:var(--white);letter-spacing:.24em}
.pdp-offer__head svg{stroke:var(--white)}
.pdp-offer__list li::before{color:var(--white)}
.pdp-offer__code{color:var(--white);border-color:var(--ghost)}
.paccord__head i{color:var(--mute)}
.paccord__inner li::before{color:var(--mute)}
.size.is-active,.fabric.is-active{background:var(--white);color:var(--black);border-color:var(--white)}
.swatch.is-active i{border-color:var(--white);box-shadow:inset 0 0 0 2px var(--black),0 0 0 2px var(--white)}
.rvw-card__stars .rvw-star.is-on,.rvdt__stars .rvw-star.is-on,
.rvwpop__stars .rvw-star.is-on,.rvw-ratepick__star.is-on{color:var(--white)}
.rvw-card__verified,.rvdt__verified,.rvwpop__verified{color:var(--mute)}
.gal__dot.is-active{background:#fff}
.hero-slider__dot.is-active{background:var(--white)}

/* ---------------- 12 · MOBILE HERO CTA ---------------- */
.mb-hero__cta-note{font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:.62rem}


/* Collection tiles are photographic components with their own built-in dark
   scrim — their copy stays white on every surface, including the paper hub. */
.ctile{color:#F6F4F0}
.ctile .idx{color:rgba(246,244,240,.85)}
.ctile__meta{color:rgba(246,244,240,.74)}
.ctile--soon .ctile__title{color:rgba(246,244,240,.5)}
.ctile--soon .ctile__meta{color:rgba(246,244,240,.66)}
.ctile__go{background:rgba(7,7,7,.35);border-color:rgba(246,244,240,.3)}
.ctile__go::after{color:#F6F4F0}
@media (hover:hover){.ctile:hover .ctile__go{background:#F6F4F0;border-color:#F6F4F0}
  .ctile:hover .ctile__go::after{color:#0B0B0B}}
.ctile__lock{color:rgba(246,244,240,.6);border-color:rgba(246,244,240,.22)}

/* The loyalty teaser is ink-surface chrome injected at body level; on paper
   pages (PDPs) the body ground is off-white, so the section must paint its
   own ink ground rather than inheriting transparency. */
.loyal{background:var(--black)}

/* =====================================================================
   FINAL REFINEMENT LAYER (V3.1) — SEAMLESS + BLACK BUTTON SYSTEM + POPPINS
   Owner-approved direction locked; this layer finishes it:
   1. SEAMLESS — section separator rules and decorative panel outlines are
      removed; whitespace, tone and typography carry the transitions. Only
      functional boundaries survive (form inputs, accordion rows, table
      cells, selected states, modal/drawer edges, payment badges).
   2. BUTTONS — one system: on the paper canvas every action button is
      SOLID BLACK with WHITE text; on ink chrome the same system inverts
      (solid white on black) so contrast is never sacrificed.
   3. POPPINS — tracking recalibrated for Poppins (no synthetic tracking on
      body copy; labels/buttons keep their editorial letter-spacing).
   ===================================================================== */

/* ---------------- 1 · SEAMLESS: section separators off ---------------- */
.loyal,.ft,.sizechart,.related,.reviews,.pdetails,.pship,.pfaq{border-top:0}
.ft__secure,.ft__base{border-top:0}
.hd.is-stuck,.hd--solid{border-bottom:0}
.rvw-card__foot{border-top:0;padding-top:0}

/* Decorative panel outlines off — tonal grounds do the framing. */
.pdp-assure,.pdp-offer,.pdp-usp__item,.rvw-card,.co__aside,.co__promo,
.pcard--more,.bundle-offer,.ctile{border:0}
/* The offers/assure/USP panels keep their quiet paper-grey ground; rows
   inside the assure card keep their functional hairlines. */

/* Spacing rebalance where a rule used to carry the transition. */
.reviews{padding-top:clamp(56px,10vh,120px)}
.sizechart{padding-top:clamp(56px,10vh,120px)}
.related{padding-top:clamp(64px,11vh,130px)}
.pdetails,.pship,.pfaq{padding-top:clamp(52px,9vh,110px)}

/* ---------------- 2 · BUTTON SYSTEM ----------------
   Paper canvas: every .btn (primary AND ghost) is solid ink with paper
   text — no outlined primaries anywhere on the white site. Ink chrome
   keeps the exact inverse (solid white, black text) for primaries and a
   quiet hairline for true secondaries (e.g. the cart drawer's Apply). */
.drop .btn--ghost,main.pdp .btn--ghost,main.co .btn--ghost,
main.page--paper .btn--ghost,.reviews--home .btn--ghost{
  background:var(--orange);color:var(--black);border-color:var(--orange)}
.drop .btn--ghost:hover,main.pdp .btn--ghost:hover,main.co .btn--ghost:hover,
main.page--paper .btn--ghost:hover,.reviews--home .btn--ghost:hover{
  background:var(--orange-soft);color:var(--black)}
/* View More — solid black pill-free bar, white text, arrow kept, still a
   plain first-tap <a>. */
.drop__viewmore{background:var(--orange);color:var(--black);border:0;
  padding:.95em 2.2em;font-size:.72rem}
@media (hover:hover) and (pointer:fine){
  .drop .drop__viewmore:hover{background:var(--orange-soft);color:var(--black);border-color:transparent}
  .drop__viewmore:hover .drop__viewmore-arrow{transform:translateX(5px)}
}
/* Buy Now + Add to Bag: both solid ink on the PDP; Buy Now stays the lead
   through its size and in-button price. */
main.pdp .pbuy__add{padding:1.05em 1.8em}
main.pdp .pbuy__buy-price::before{background:var(--black);opacity:.28}

/* ---------------- 3 · POPPINS RECALIBRATION ---------------- */
body{letter-spacing:normal}
.pinfo__name{letter-spacing:.04em}
.pcard__name,.rcard__name{letter-spacing:.07em}
.btn{letter-spacing:.14em}
.hd__links a,.hd__act,.hd__menu{letter-spacing:.16em}
.menu__item a{letter-spacing:.04em}
.eyebrow,.idx{letter-spacing:.3em}

/* =====================================================================
   ROUND 1 REFINEMENT LAYER (V3.2)
   Owner-directed refinements on the approved monochrome system:
   1. Collection titles carry more weight; descriptions stay quiet.
   2. Reviews sit closer to the content above them.
   3. Menus are smaller and Title Case — elegant, not a poster.
   4. Italic emphasis is retired site-wide (editorial-purpose only, and
      nothing currently qualifies).
   5. (removed) The Round 1 subtle-radius experiment was REJECTED after
      live review — the sharp-edge system above is the permanent
      baseline. No radius tokens exist any more; do not reintroduce
      them without an owner decision.
   6. Offers and coupon codes read as offers at a glance.
   ===================================================================== */

/* ---------------- 1 · COLLECTION TITLES ---------------- */
.drop__head .h-big{font-weight:600}
.ctile__title{font-weight:600}
main.page--paper .page__hero .h-display,[data-collection-title]{font-weight:600}
.drop__desc{font-weight:300;letter-spacing:.01em}

/* ---------------- 2 · REVIEWS RHYTHM ---------------- */
.reviews--home{padding-top:clamp(34px,6vh,72px);padding-bottom:clamp(56px,9vh,110px)}
.reviews--home .reviews__head{margin-bottom:clamp(30px,4.5vw,48px)}
@media (max-width:760px){
  .reviews--home{padding-top:24px;padding-bottom:48px}
  #volumeOne{padding-bottom:56px}
}

/* ---------------- 3 · MENU — smaller, Title Case, elegant ---------------- */
.menu__item a{text-transform:none;font-size:clamp(1.15rem,2.1vw,1.6rem);font-weight:400;
  letter-spacing:.02em;line-height:1.2;opacity:.68}
.menu__list{gap:clamp(.55em,1.6vh,.95em)}
.menu__item a:hover{opacity:1}
@media (max-width:760px){
  .menu__item a{font-size:clamp(1.25rem,5vw,1.55rem);opacity:.8}
  .menu__list{gap:clamp(.8em,2.4vh,1.2em)}
  .menu__foot{margin-top:clamp(34px,6vh,54px)}
}

/* ---------------- 4 · NO DECORATIVE ITALICS ---------------- */
em,.accent,.loyal__title em{font-style:normal;font-weight:inherit;color:inherit}

/* ---------------- 6 · OFFERS & COUPON CODES ---------------- */
/* A coupon code reads as a chip you could tap: solid accent, clear weight.
   Token-driven, so it is ink-on-paper in the buy box and white-on-ink in
   dark chrome — never a third colour. */
.pdp-offer__code{background:var(--orange);color:var(--black);border:0;
  font-weight:600;letter-spacing:.1em;padding:.3em .75em;white-space:nowrap}
.pdp-offer__list b{font-weight:700}
.pdp-offer__head{font-weight:600}
.coupon-chip{border-color:var(--orange);color:var(--white);font-weight:600}
.bundle-offer__txt{color:var(--white)}