/* ==========================================================================
   GharKart — design system
   Warm ivory · charcoal · controlled orange. Motion is restrained and always
   optional: every animated element is readable with JS off or motion reduced.
   ========================================================================== */

/* Fonts are self-hosted rather than pulled from Google. On a Pakistani mobile
   connection that removes two extra DNS + TLS handshakes from the critical
   path, and lets the files be preloaded from our own origin. Both are variable
   fonts, so one file covers the whole weight range. */
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/jakarta-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand — orange is an ACCENT, never a surface */
  --brand: #ea580c;
  --brand-600: #d4500b;
  --brand-700: #b8440a;
  --brand-soft: #fff2e8;
  --brand-line: #fadcc6;

  /* Warm neutral ground */
  --ivory: #fbf8f3;
  --cream: #f6f1e8;
  --sand: #efe7d9;
  --white: #ffffff;

  /* Ink */
  --char: #1a1714;
  --ink: #100e0c;
  --ink-2: #1c1916;
  --text: #4a443d;
  --muted: #7c736a;
  --faint: #a89f94;
  --line: #e6ded1;
  --line-soft: #f0e9de;

  --ok: #15803d;
  --ok-bg: #f1faf3;
  --ok-line: #c4e8cd;
  --err: #b42318;
  --err-bg: #fef4f2;
  --err-line: #fbd3cd;

  --r-xs: 6px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;

  /* Warm shadows, never grey */
  --sh-sm: 0 1px 2px rgba(60, 42, 24, .05);
  --sh: 0 2px 10px rgba(60, 42, 24, .05), 0 1px 3px rgba(60, 42, 24, .04);
  --sh-md: 0 10px 34px rgba(60, 42, 24, .08), 0 2px 8px rgba(60, 42, 24, .04);
  --sh-lg: 0 26px 70px rgba(60, 42, 24, .13), 0 6px 18px rgba(60, 42, 24, .06);

  --wrap: 1280px;
  --wrap-wide: 1520px;
  --gut: 22px;

  --ff-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --nav-h: 74px;
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-io: cubic-bezier(.65, .05, .36, 1);
}

@media (min-width: 900px) { :root { --gut: 40px; } }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ff);
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--text);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, video, svg { max-width: 100%; display: block; }
img, video { height: auto; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--brand-700); text-underline-offset: 3px; }
ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }
strong { color: var(--char); font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
button { font-family: inherit; }

/* ---------- type scale ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--ff-display);
  color: var(--char);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.03em;
  margin: 0 0 .4em;
  text-wrap: balance;
}
h1, .h1 { font-size: clamp(2.65rem, 7.2vw, 5.6rem); font-weight: 900; letter-spacing: -.042em; }
h2, .h2 { font-size: clamp(2rem, 4.8vw, 3.6rem); letter-spacing: -.035em; }
h3, .h3 { font-size: clamp(1.2rem, 1.9vw, 1.6rem); font-weight: 700; line-height: 1.16; letter-spacing: -.02em; }
h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }

.eyebrow {
  font-family: var(--ff);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1.5px; background: var(--brand); flex-shrink: 0;
}
.eyebrow--plain::before { display: none; }
.eyebrow--light { color: rgba(255, 255, 255, .62); }
.eyebrow--light::before { background: var(--brand); }

.lead { font-size: clamp(1.02rem, 1.3vw, 1.16rem); color: var(--text); max-width: 56ch; }
.meta { font-size: .84rem; color: var(--muted); }

/* ---------- a11y ---------- */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.skip-link {
  position: fixed; left: -9999px; top: 0; z-index: 9999;
  background: var(--ink); color: #fff; padding: 14px 22px; font-weight: 700; border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--wide { max-width: var(--wrap-wide); }
.section { padding: clamp(64px, 9vw, 140px) 0; position: relative; }
.section--sm { padding: clamp(44px, 6vw, 84px) 0; }
.bg-ivory { background: var(--ivory); }
.bg-white { background: var(--white); }
.bg-cream { background: var(--cream); }
.bg-sand { background: var(--sand); }
.bg-ink { background: var(--ink); color: #cfc7bd; }
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4 { color: #fff; }
.bg-ink strong { color: #fff; }

.sec-head { max-width: 720px; margin-bottom: clamp(34px, 4.5vw, 64px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head p { color: var(--muted); font-size: clamp(1rem, 1.2vw, 1.1rem); margin-bottom: 0; }
.bg-ink .sec-head p { color: #a49a90; }

/* ==========================================================================
   MOTION PRIMITIVES
   Elements start hidden ONLY when JS is available (html.js), so the page is
   fully readable without scripts.
   ========================================================================== */
.js [data-anim="rise"] > *,
.js [data-anim="fade"],
.js [data-anim="mask"] .line__inner { will-change: transform, opacity; }

.js [data-anim="fade"] { opacity: 0; }
.js [data-anim="scale"] { opacity: 0; }

/* Split text: each line sits in an overflow-hidden mask.
   The starting offset is deliberately NOT set here. GSAP must be the only
   thing writing `transform` on .line__inner — a CSS transform is computed to a
   matrix, which GSAP then reads back as a pixel `y`, leaving a later
   `yPercent` tween with nothing to animate. */
.line { display: block; overflow: hidden; }
.line__inner { display: block; will-change: transform; }
.line__inner em { font-style: normal; color: var(--brand); }

.js [data-anim="stagger"] > * { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .js [data-anim] , .js [data-anim] > *, .js .line__inner { opacity: 1 !important; transform: none !important; filter: none !important; }
}
html.no-motion [data-anim], html.no-motion [data-anim] > *, html.no-motion .line__inner {
  opacity: 1 !important; transform: none !important; filter: none !important;
}

/* ==========================================================================
   ENTRANCE LOADER
   ========================================================================== */
/* Hidden until JS explicitly arms it. If motion.js never runs, fails, or the
   visitor prefers reduced motion, the page must still be visible — a loader
   that can trap someone behind a black screen is worse than no loader. */
.loader, .loader__curtain { display: none; }
.loader {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--ink);
  place-items: center;
  pointer-events: none;
}
.loader.is-armed { display: grid; }
.loader__curtain.is-armed { display: block; }
@media (prefers-reduced-motion: reduce) {
  .loader, .loader__curtain { display: none !important; }
}
.loader__in { text-align: center; padding: 20px; }
.loader__mark {
  width: 54px; height: 54px; border-radius: 15px; margin: 0 auto 22px;
  opacity: 0; transform: scale(.86);
}
.loader__rule {
  width: 0; height: 1.5px; background: var(--brand); margin: 0 auto 20px;
}
.loader__word {
  font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(2.1rem, 7vw, 4rem); letter-spacing: -.045em; line-height: 1;
  color: #fff; display: flex; justify-content: center; gap: .04em;
}
.loader__word span { display: inline-block; opacity: 0; transform: translateY(18px); }
.loader__tag {
  margin-top: 16px; font-size: .78rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .5);
  opacity: 0;
}
.loader__curtain { position: fixed; inset: 0; z-index: 8999; background: var(--ink); transform: translateY(0); pointer-events: none; }

/* ==========================================================================
   CUSTOM CURSOR — pointer-fine devices only
   ========================================================================== */
.cursor, .cursor-dot { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: grid; place-items: center;
    position: fixed; top: 0; left: 0; z-index: 8000;
    width: 38px; height: 38px; margin: -19px 0 0 -19px;
    border: 1.5px solid rgba(26, 23, 20, .3); border-radius: 50%;
    pointer-events: none;
    transition: width .3s var(--e-out), height .3s var(--e-out),
                margin .3s var(--e-out), background-color .3s var(--e-out),
                border-color .3s var(--e-out), opacity .25s;
    opacity: 0;
  }
  .cursor.is-on { opacity: 1; }
  .cursor__label {
    font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: #fff; opacity: 0; transform: scale(.7); transition: opacity .22s, transform .22s var(--e-out);
    white-space: nowrap;
  }
  .cursor.is-hot {
    width: 78px; height: 78px; margin: -39px 0 0 -39px;
    background: var(--brand); border-color: var(--brand);
  }
  .cursor.is-hot .cursor__label { opacity: 1; transform: none; }
  .cursor.is-link { width: 62px; height: 62px; margin: -31px 0 0 -31px; background: rgba(234, 88, 12, .1); border-color: var(--brand); }
  .cursor-dot {
    display: block; position: fixed; top: 0; left: 0; z-index: 8001;
    width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
    background: var(--brand); border-radius: 50%; pointer-events: none; opacity: 0;
    transition: opacity .25s, transform .3s var(--e-out);
  }
  .cursor-dot.is-on { opacity: 1; }
  .cursor.is-hot ~ .cursor-dot { transform: scale(0); }
  html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
}
@media (prefers-reduced-motion: reduce) { .cursor, .cursor-dot { display: none !important; } }

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */
.announce {
  background: var(--ink); color: #b9b0a6;
  font-size: .76rem; font-weight: 600; letter-spacing: .01em;
  padding: 10px var(--gut); text-align: center;
  position: relative; z-index: 60;
}
.announce ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 26px; }
.announce li { margin: 0; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.announce b { color: #fff; font-weight: 700; }
.announce svg { opacity: .55; flex-shrink: 0; }
@media (max-width: 700px) {
  .announce { padding-inline: 12px; font-size: .72rem; }
  .announce ul { gap: 16px; }
  .announce li:nth-child(n+3) { display: none; }
  .announce svg { display: none; }
}

.hdr {
  position: sticky; top: 0; z-index: 70;
  padding: 14px var(--gut);
  transition: padding .45s var(--e-out);
}
.hdr__bar {
  max-width: var(--wrap-wide); margin-inline: auto;
  display: flex; align-items: center; gap: 20px;
  min-height: var(--nav-h);
  padding: 0 8px 0 4px;
  border: 1px solid transparent;
  border-radius: 100px;
  background: transparent;
  transition: background-color .45s var(--e-out), border-color .45s var(--e-out),
              box-shadow .45s var(--e-out), max-width .55s var(--e-out),
              min-height .45s var(--e-out), padding .45s var(--e-out),
              backdrop-filter .45s var(--e-out);
}
/* Compressed floating pill once the page is scrolled */
.hdr.is-stuck { padding-top: 10px; padding-bottom: 10px; }
.hdr.is-stuck .hdr__bar {
  max-width: 1020px;
  min-height: 58px;
  padding: 0 8px 0 14px;
  background: rgba(251, 248, 243, .82);
  backdrop-filter: blur(16px) saturate(1.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  border-color: rgba(230, 222, 209, .9);
  box-shadow: 0 8px 30px rgba(60, 42, 24, .09);
}
/* Slide the whole header away on fast downward scroll, bring it back on up */
.hdr { transform: translateY(0); transition: transform .5s var(--e-out), padding .45s var(--e-out); }
.hdr.is-hidden { transform: translateY(calc(-100% - 14px)); }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; padding: 6px; border-radius: 100px; }
.brand__mark { width: 40px; height: 40px; border-radius: 12px; transition: width .45s var(--e-out), height .45s var(--e-out); }
.hdr.is-stuck .brand__mark { width: 32px; height: 32px; border-radius: 10px; }
.brand__name {
  font-family: var(--ff-display); font-weight: 900; font-size: 1.32rem;
  letter-spacing: -.035em; color: var(--char);
  transition: font-size .45s var(--e-out);
}
.hdr.is-stuck .brand__name { font-size: 1.14rem; }

/* --- desktop nav with a gliding indicator --- */
.nav { display: none; position: relative; margin-inline: auto; }
@media (min-width: 1000px) { .nav { display: flex; align-items: center; gap: 2px; } }
.nav__pill {
  position: absolute; left: 0; top: 50%; height: 36px; margin-top: -18px;
  border-radius: 100px; background: rgba(234, 88, 12, .09);
  opacity: 0; pointer-events: none;
  transition: transform .42s var(--e-out), width .42s var(--e-out), opacity .28s;
}
.nav__link {
  position: relative; z-index: 1;
  display: block; padding: 10px 16px; border-radius: 100px;
  font-size: .93rem; font-weight: 600; color: var(--text);
  text-decoration: none; white-space: nowrap;
  transition: color .28s var(--e-out);
}
.nav__link:hover, .nav__link.is-active { color: var(--brand-700); }
/* Rolling text: original clips up, duplicate rises from below.
   Same rule as the buttons — mask height must equal the span line box exactly,
   or the duplicate peeks through as a stray line. */
.nav__roll {
  --roll-lh: 1.45em;
  display: block; overflow: hidden;
  height: var(--roll-lh);
}
.nav__roll span {
  display: block;
  height: var(--roll-lh);
  line-height: var(--roll-lh);
  transition: transform .42s var(--e-out);
}
.nav__link:hover .nav__roll span, .nav__link:focus-visible .nav__roll span { transform: translateY(-100%); }
.nav__dot {
  position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px;
  background: var(--brand); border-radius: 50%;
  opacity: 0; transform: scale(0); transition: opacity .3s, transform .3s var(--e-out);
}
.nav__link.is-active .nav__dot { opacity: 1; transform: scale(1); }

.hdr__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
@media (min-width: 1000px) { .hdr__actions { margin-left: 0; } }

.iconbtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 100px;
  background: transparent; border: 0; cursor: pointer; color: var(--char);
  transition: background-color .28s var(--e-out), color .28s;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
.iconbtn:hover { background: rgba(26, 23, 20, .055); }
.cart-count {
  position: absolute; top: 5px; right: 4px;
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--brand); color: #fff;
  font-size: .66rem; font-weight: 800; line-height: 19px; text-align: center;
  border-radius: 100px; border: 2px solid var(--ivory);
  transform: scale(0); transition: transform .34s var(--e-out);
}
.hdr.is-stuck .cart-count { border-color: #fbf8f3; }
.cart-count.is-on { transform: scale(1); }
.iconbtn.is-bump { animation: bump .45s var(--e-out); }
@keyframes bump { 0%, 100% { transform: scale(1); } 32% { transform: scale(1.18); } }

.burger { display: inline-flex; }
@media (min-width: 1000px) { .burger { display: none; } }
.burger__box { width: 20px; height: 14px; position: relative; }
.burger__box i {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--char); transition: transform .4s var(--e-out), opacity .25s;
}
.burger__box i:nth-child(1) { top: 0; }
.burger__box i:nth-child(2) { top: 6px; }
.burger__box i:nth-child(3) { top: 12px; }
.burger[aria-expanded="true"] .burger__box i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box i:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.burger[aria-expanded="true"] .burger__box i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- full-screen mobile navigation --- */
.mnav {
  position: fixed; inset: 0; z-index: 68;
  background: var(--ink);
  clip-path: circle(0% at calc(100% - 46px) 46px);
  transition: clip-path .72s var(--e-io);
  overflow-y: auto;
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + 44px) var(--gut) 40px;
  visibility: hidden;
}
.mnav.is-open { clip-path: circle(150% at calc(100% - 46px) 46px); visibility: visible; }
.mnav__links { list-style: none; margin: 0 0 auto; padding: 0; }
.mnav__links li { margin: 0; overflow: hidden; }
.mnav__links a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 11px 0;
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(2rem, 11vw, 3.1rem); letter-spacing: -.04em; line-height: 1.06;
  color: #fff; text-decoration: none;
  transform: translateY(105%);
  transition: color .3s;
}
.mnav.is-open .mnav__links a { transform: translateY(0); transition: transform .68s var(--e-out); }
.mnav__links a:active { color: var(--brand); }
.mnav__links a i {
  font-style: normal; font-family: var(--ff); font-size: .68rem; font-weight: 800;
  letter-spacing: .14em; color: rgba(255, 255, 255, .32);
}
.mnav__foot { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 22px; margin-top: 30px; opacity: 0; transition: opacity .5s .3s; }
.mnav.is-open .mnav__foot { opacity: 1; }
.mnav__cod {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(234, 88, 12, .14); color: #ffb98a;
  border: 1px solid rgba(234, 88, 12, .3);
  font-size: .8rem; font-weight: 700; padding: 9px 15px; border-radius: 100px;
}
.mnav__prods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.mnav__prods a {
  font-size: .82rem; font-weight: 600; color: rgba(255, 255, 255, .62);
  text-decoration: none; padding: 7px 13px; border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .13);
}
body.nav-open { overflow: hidden; }

/* The full-screen nav sits under the header, so the header's dark-on-light
   treatment has to invert or it disappears against the panel. */
body.nav-open .brand__name { color: #fff; }
body.nav-open .iconbtn { color: #fff; }
body.nav-open .iconbtn:hover { background: rgba(255, 255, 255, .1); }
body.nav-open .burger__box i { background: #fff; }
body.nav-open .cart-count { border-color: var(--ink); }
body.nav-open .hdr__bar { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--ff); font-size: .97rem; font-weight: 700; line-height: 1;
  padding: 18px 30px; min-height: 56px;
  border-radius: 100px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; text-align: center;
  isolation: isolate;
  transition: color .3s var(--e-out), border-color .3s var(--e-out),
              background-color .3s var(--e-out), transform .18s var(--e-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.985); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn svg { flex-shrink: 0; transition: transform .34s var(--e-out); }
.btn:hover svg { transform: translateX(5px); }

/* wipe fill */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: translateX(-101%);
  transition: transform .48s var(--e-out);
}
.btn:hover::before { transform: translateX(0); }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary::before { background: var(--char); }
.btn--primary:hover { color: #fff; }

.btn--dark { background: var(--char); color: #fff; }
.btn--dark::before { background: var(--brand); }

.btn--light { background: #fff; color: var(--char); }
.btn--light::before { background: var(--brand); }
.btn--light:hover { color: #fff; }

.btn--outline { background: transparent; color: var(--char); border-color: var(--line); }
.btn--outline::before { background: var(--char); }
.btn--outline:hover { color: #fff; border-color: var(--char); }

.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .26); }
.btn--ghost-light::before { background: #fff; }
.btn--ghost-light:hover { color: var(--ink); border-color: #fff; }

.btn--sm { padding: 12px 20px; min-height: 44px; font-size: .87rem; }
.btn--lg { padding: 21px 38px; min-height: 62px; font-size: 1.03rem; }
.btn--block { width: 100%; }

/* Rolling label.
   The mask height and each span's line box must be IDENTICAL. If the mask is
   even a couple of pixels taller than one line, the top of the duplicate text
   shows through underneath the visible label as a stray line. --roll-lh is set
   generously enough that descenders (the y in "Buy") are never clipped. */
.btn__roll {
  --roll-lh: 1.35em;
  display: block; overflow: hidden;
  height: var(--roll-lh);
}
.btn__roll span {
  display: block;
  height: var(--roll-lh);
  line-height: var(--roll-lh);
  transition: transform .42s var(--e-out);
}
.btn:hover .btn__roll span,
.btn:focus-visible .btn__roll span { transform: translateY(-100%); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: .95rem; color: var(--char); text-decoration: none;
  padding-bottom: 3px; border-bottom: 1.5px solid var(--line);
  transition: border-color .3s, color .3s, gap .3s var(--e-out);
}
.link-arrow:hover { border-color: var(--brand); color: var(--brand-700); gap: 14px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  padding: clamp(26px, 3vw, 44px) 0 clamp(50px, 7vw, 96px);
  background:
    radial-gradient(120% 82% at 78% 12%, #fff5ec 0%, rgba(255, 245, 236, 0) 62%),
    var(--ivory);
  overflow: clip;
}
/* Mobile order is deliberate: headline, then the product, then price and CTA.
   A visitor arriving from an ad should see the item before they scroll. */
.hero__grid { display: grid; gap: clamp(24px, 4vw, 40px); align-items: center; }
@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: 1.02fr 1fr;
    grid-template-areas: "intro media" "buy media";
    align-items: start;
    column-gap: clamp(40px, 5vw, 80px);
    row-gap: 26px;
  }
  .hero__intro { grid-area: intro; }
  .hero__media { grid-area: media; align-self: center; }
  .hero__buy { grid-area: buy; }
}

.hero h1 { margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero__lead { font-size: clamp(1.02rem, 1.35vw, 1.18rem); color: var(--text); max-width: 46ch; margin-bottom: 28px; }

.hero__facts { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 11px; }
.hero__facts li { display: flex; align-items: flex-start; gap: 11px; margin: 0; font-weight: 600; color: var(--char); font-size: .97rem; }
.hero__facts svg { flex-shrink: 0; margin-top: 4px; color: var(--brand); }

.pricebar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.price-xl {
  font-family: var(--ff-display); font-size: clamp(2.3rem, 4.4vw, 3.1rem);
  font-weight: 900; letter-spacing: -.045em; line-height: 1; color: var(--char);
}
.cod-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ok-bg); border: 1px solid var(--ok-line); color: #14532d;
  font-size: .82rem; font-weight: 700; padding: 9px 15px; border-radius: 100px;
}
.cod-chip svg { flex-shrink: 0; color: var(--ok); }

/* hero media */
.hero__media { position: relative; }
.hero__frame {
  position: relative; border-radius: var(--r-2xl); overflow: hidden;
  background: linear-gradient(160deg, #fff 0%, var(--cream) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg);
}
.hero__frame img { width: 100%; aspect-ratio: 1 / .94; object-fit: contain; padding: clamp(14px, 2.4vw, 34px); }
.hero__badge {
  position: absolute; left: 20px; top: 20px; z-index: 2;
  background: rgba(16, 14, 12, .82); backdrop-filter: blur(8px);
  color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 15px; border-radius: 100px;
}
.hero__note {
  position: absolute; right: -6px; bottom: 22px; z-index: 3;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-md);
  border-radius: var(--r-lg); padding: 14px 18px; max-width: 210px;
}
@media (max-width: 620px) { .hero__note { position: static; margin-top: 14px; max-width: none; } }
.hero__note b { display: block; font-family: var(--ff-display); font-size: 1.5rem; font-weight: 900; letter-spacing: -.04em; color: var(--char); line-height: 1; }
.hero__note span { font-size: .8rem; color: var(--muted); }

/* marquee strip */
.strip { background: var(--ink); color: #fff; padding: 16px 0; overflow: hidden; }
.strip__track { display: flex; gap: 46px; width: max-content; animation: slide 34s linear infinite; }
.strip:hover .strip__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.strip__item {
  display: inline-flex; align-items: center; gap: 11px; white-space: nowrap;
  font-family: var(--ff-display); font-size: .92rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .82);
}
.strip__item i { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .strip__track { animation: none; } }

/* ==========================================================================
   TRUST ROW
   ========================================================================== */
.trust { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust__i { background: var(--ivory); padding: clamp(24px, 3vw, 38px) clamp(18px, 2vw, 28px); }
.trust__i b { display: block; font-family: var(--ff-display); font-size: 1.02rem; font-weight: 800; color: var(--char); margin-bottom: 5px; letter-spacing: -.015em; }
.trust__i span { font-size: .86rem; color: var(--muted); line-height: 1.5; }
.trust__n { font-family: var(--ff-display); font-size: .72rem; font-weight: 800; color: var(--brand); letter-spacing: .12em; display: block; margin-bottom: 12px; }

/* ==========================================================================
   DEMO / VIDEO
   ========================================================================== */
.demo { display: grid; gap: clamp(28px, 4vw, 60px); align-items: center; }
@media (min-width: 960px) { .demo { grid-template-columns: 1.15fr .85fr; } }
.demo__media { position: relative; border-radius: var(--r-2xl); overflow: hidden; background: var(--char); box-shadow: var(--sh-lg); }
.demo__media video { width: 100%; aspect-ratio: 1; object-fit: cover; }
.demo__ctrl {
  position: absolute; right: 16px; bottom: 16px; z-index: 3;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px);
  color: var(--char); display: grid; place-items: center;
  transition: transform .3s var(--e-out), background-color .3s;
}
.demo__ctrl:hover { transform: scale(1.08); background: #fff; }
.demo__tag {
  position: absolute; left: 16px; bottom: 16px; z-index: 3;
  background: rgba(16, 14, 12, .72); backdrop-filter: blur(8px); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 100px;
}

/* ==========================================================================
   IN THE BOX
   ========================================================================== */
.box-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 960px) { .box-grid { grid-template-columns: .9fr 1.1fr; } }
.box-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.box-list li {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline;
  padding: 17px 0; border-bottom: 1px solid var(--line);
  transition: padding-left .34s var(--e-out);
}
.box-list li:first-child { border-top: 1px solid var(--line); }
.box-list li:hover { padding-left: 10px; }
.box-list b { font-family: var(--ff-display); font-size: .78rem; font-weight: 800; color: var(--brand); letter-spacing: .06em; }
.box-list span { font-size: .99rem; font-weight: 600; color: var(--char); }

/* ==========================================================================
   BLADES — sticky heading + revealing rows
   ========================================================================== */
.blades { display: grid; gap: clamp(24px, 3vw, 56px); }
@media (min-width: 960px) { .blades { grid-template-columns: .82fr 1.18fr; align-items: start; } }
@media (min-width: 960px) { .blades__head { position: sticky; top: 120px; } }
.blades__rows { display: grid; }
.blade {
  display: grid; grid-template-columns: 46px 1fr; gap: 8px 20px;
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.blade:first-child { border-top: 1px solid var(--line); }
@media (min-width: 620px) { .blade { grid-template-columns: 52px 1.05fr 1fr; align-items: baseline; } }
.blade__n { font-family: var(--ff-display); font-size: .78rem; font-weight: 800; color: var(--brand); letter-spacing: .05em; }
.blade__name { font-family: var(--ff-display); font-size: clamp(1.05rem, 1.5vw, 1.28rem); font-weight: 800; color: var(--char); letter-spacing: -.02em; }
.blade__use { font-size: .93rem; color: var(--muted); grid-column: 2 / -1; }
@media (min-width: 620px) { .blade__use { grid-column: auto; } }
.blade::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--brand); transition: width .5s var(--e-out);
}
.blade:hover::after { width: 100%; }

/* ==========================================================================
   PRODUCT CARDS
   ========================================================================== */
.pgrid { display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 780px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1120px) { .pgrid { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .48s var(--e-out), box-shadow .48s var(--e-out), border-color .4s;
}
@media (hover: hover) { .card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--sand); } }

.card__media { position: relative; display: block; background: var(--cream); aspect-ratio: 1; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: contain; padding: 9%; transition: transform .8s var(--e-out); }
@media (hover: hover) { .card:hover .card__media img { transform: scale(1.055); } }
.card__flag {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  background: var(--char); color: #fff;
  font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 100px;
}
.card__body { padding: 17px 17px 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card__name { font-family: var(--ff-display); font-size: 1rem; font-weight: 800; line-height: 1.24; letter-spacing: -.02em; margin: 0; }
.card__name a { color: var(--char); text-decoration: none; }
.card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__desc { font-size: .855rem; color: var(--muted); line-height: 1.5; margin: 0; flex: 1; }
/* Two-up cards on a 360px phone leave too little room for price and label on
   one line — the price was wrapping mid-number. Stack until there is space. */
.card__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 6px; }
@media (min-width: 560px) { .card__foot { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; } }
.card__price { font-family: var(--ff-display); font-size: 1.2rem; font-weight: 900; letter-spacing: -.032em; color: var(--char); white-space: nowrap; }
.card__cod { font-size: .7rem; font-weight: 700; color: var(--ok); letter-spacing: .01em; white-space: nowrap; }
.card__add {
  position: relative; z-index: 2;
  width: 100%; margin-top: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 16px;
  border-radius: 100px; border: 1.5px solid var(--line); background: transparent;
  font-size: .87rem; font-weight: 700; color: var(--char); cursor: pointer;
  overflow: hidden; isolation: isolate;
  transition: color .3s, border-color .3s;
}
.card__add::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--char);
  transform: translateY(101%); transition: transform .44s var(--e-out);
}
.card__add:hover { color: #fff; border-color: var(--char); }
.card__add:hover::before { transform: translateY(0); }

/* editorial feature tile */
.feature-tile {
  grid-column: 1 / -1;
  display: grid; gap: 0;
  background: var(--char); color: #cfc7bd;
  border-radius: var(--r-xl); overflow: hidden; position: relative;
}
@media (min-width: 780px) { .feature-tile { grid-column: span 2; grid-row: span 2; } }
.feature-tile__media { position: relative; background: linear-gradient(165deg, #fff 0%, var(--cream) 100%); aspect-ratio: 1.35; overflow: hidden; }
@media (min-width: 780px) { .feature-tile__media { aspect-ratio: auto; min-height: 300px; } }
.feature-tile__media img { width: 100%; height: 100%; object-fit: contain; padding: 7%; transition: transform .9s var(--e-out); }
@media (hover: hover) { .feature-tile:hover .feature-tile__media img { transform: scale(1.05); } }
.feature-tile__body { padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 10px; }
.feature-tile h3 { color: #fff; font-size: clamp(1.3rem, 2.1vw, 1.85rem); margin: 0; }
.feature-tile p { color: #a49a90; font-size: .95rem; margin: 0; max-width: 44ch; }
.feature-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.feature-tile__price { font-family: var(--ff-display); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 900; letter-spacing: -.04em; color: #fff; }
.feature-tile__flag {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  background: var(--brand); color: #fff;
  font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 100px;
}

/* ==========================================================================
   TRUST STORY (dark)
   ========================================================================== */
.story { display: grid; gap: clamp(30px, 4vw, 64px); }
@media (min-width: 960px) { .story { grid-template-columns: .95fr 1.05fr; align-items: start; } }
.story h2 { font-size: clamp(2.3rem, 5.6vw, 4.2rem); color: #fff; }
.story__list { list-style: none; margin: 0; padding: 0; }
.story__list li { margin: 0; padding: clamp(20px, 2.4vw, 28px) 0; border-bottom: 1px solid rgba(255, 255, 255, .1); display: grid; grid-template-columns: auto 1fr; gap: 20px; }
.story__list li:first-child { border-top: 1px solid rgba(255, 255, 255, .1); }
.story__list b { font-family: var(--ff-display); font-size: .76rem; font-weight: 800; color: var(--brand); letter-spacing: .08em; padding-top: 4px; }
.story__list h3 { color: #fff; font-size: 1.12rem; margin: 0 0 5px; }
.story__list p { color: #a49a90; font-size: .93rem; margin: 0; }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.rev-empty {
  border: 1px dashed var(--line); border-radius: var(--r-xl);
  padding: clamp(30px, 4vw, 52px); background: var(--white);
  display: grid; gap: clamp(20px, 3vw, 34px);
}
@media (min-width: 860px) { .rev-empty { grid-template-columns: .9fr 1.1fr; align-items: center; } }
.rev-empty h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 10px; }
.rev-expect { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rev-expect li { display: grid; grid-template-columns: auto 1fr; gap: 14px; margin: 0; align-items: start; }
.rev-expect b { font-family: var(--ff-display); font-size: .74rem; font-weight: 800; color: var(--brand); letter-spacing: .07em; padding-top: 4px; }
.rev-expect span { font-size: .95rem; color: var(--text); }
.rev-expect strong { display: block; color: var(--char); font-size: .99rem; margin-bottom: 2px; }

.rev-rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; }
.rev-rail::-webkit-scrollbar { display: none; }
.rev-card {
  flex: 0 0 min(420px, 84vw); scroll-snap-align: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; gap: 14px;
}
.rev-card__stars { color: var(--brand); font-size: .95rem; letter-spacing: .12em; }
.rev-card blockquote { margin: 0; font-family: var(--ff-display); font-size: clamp(1.1rem, 1.7vw, 1.32rem); font-weight: 700; line-height: 1.34; letter-spacing: -.02em; color: var(--char); }
.rev-card__who { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.rev-card__who b { font-size: .92rem; color: var(--char); display: block; }
.rev-card__who span { font-size: .82rem; color: var(--muted); }
.rev-ctrl { display: flex; gap: 8px; margin-top: 20px; }

/* ==========================================================================
   TIMELINE
   ========================================================================== */
.tl { position: relative; }
.tl__track { display: grid; gap: 26px; }
@media (min-width: 900px) { .tl__track { grid-template-columns: repeat(4, 1fr); gap: 30px; } }
.tl__line { position: absolute; left: 0; top: 26px; height: 2px; background: var(--line); width: 100%; display: none; }
@media (min-width: 900px) { .tl__line { display: block; } }
.tl__fill { height: 100%; width: 0; background: var(--brand); }
.tl__step { position: relative; }
.tl__dot {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--ivory); border: 2px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--ff-display); font-size: .84rem; font-weight: 800; color: var(--muted);
  margin-bottom: 18px; position: relative; z-index: 1;
  transition: border-color .5s var(--e-out), color .5s, background-color .5s;
}
.tl__step.is-on .tl__dot { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.tl__step h3 { font-size: 1.06rem; margin-bottom: 6px; }
.tl__step p { font-size: .91rem; color: var(--muted); margin: 0; }
@media (max-width: 899px) {
  .tl__track { position: relative; padding-left: 0; }
  .tl__step { display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: start; }
  .tl__dot { margin-bottom: 0; }
  .tl__step::before {
    content: ""; position: absolute; left: 26px; top: 54px; bottom: -26px; width: 2px; background: var(--line);
  }
  .tl__step:last-child::before { display: none; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-layout { display: grid; gap: clamp(24px, 3vw, 56px); }
@media (min-width: 960px) { .faq-layout { grid-template-columns: .8fr 1.2fr; align-items: start; } }
@media (min-width: 960px) { .faq-layout__head { position: sticky; top: 130px; } }
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 22px;
  padding: clamp(22px, 2.6vw, 30px) 0; text-align: left;
  font-family: var(--ff-display); font-size: clamp(1.05rem, 1.85vw, 1.42rem);
  font-weight: 700; letter-spacing: -.022em; color: var(--char); line-height: 1.26;
  transition: color .3s;
}
.faq__q:hover { color: var(--brand-700); }
.faq__ico { position: relative; flex-shrink: 0; width: 22px; height: 22px; margin-top: 4px; }
.faq__ico::before, .faq__ico::after {
  content: ""; position: absolute; background: var(--brand); border-radius: 2px;
  transition: transform .45s var(--e-out), opacity .3s;
}
.faq__ico::before { left: 0; top: 10px; width: 22px; height: 2px; }
.faq__ico::after { left: 10px; top: 0; width: 2px; height: 22px; }
.faq__item.is-open .faq__ico::after { transform: rotate(90deg); opacity: 0; }
.faq__item.is-open .faq__ico::before { transform: rotate(180deg); }
.faq__a { overflow: hidden; height: 0; }
.faq__a > div { padding: 0 0 clamp(22px, 2.6vw, 30px); max-width: 66ch; color: var(--text); font-size: 1rem; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.cta { position: relative; overflow: clip; background: var(--ink); }
.cta__grid { display: grid; gap: clamp(28px, 4vw, 40px); align-items: center; position: relative; z-index: 2; }
@media (min-width: 900px) { .cta__grid { grid-template-columns: 1.1fr .9fr; } }
.cta h2 { font-size: clamp(2.4rem, 6.2vw, 4.6rem); color: #fff; margin-bottom: 20px; }
.cta p { color: #a49a90; max-width: 42ch; font-size: 1.04rem; }
.cta__media { position: relative; }
.cta__media {
  border-radius: var(--r-2xl); overflow: hidden;
  background: linear-gradient(165deg, #fff 0%, var(--cream) 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  max-width: 480px; margin-inline: auto;
}
.cta__media img { width: 100%; padding: 8%; }
.cta__glow {
  position: absolute; inset: auto -10% -30% auto; width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(234, 88, 12, .26) 0%, rgba(234, 88, 12, 0) 68%);
  pointer-events: none; z-index: 1;
}
.cta__rule { height: 1px; background: rgba(255, 255, 255, .12); margin: clamp(30px, 4vw, 44px) 0; position: relative; }
.cta__rule i { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--brand); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr { background: var(--ink); color: #8f8579; padding: clamp(56px, 7vw, 90px) 0 0; }
.ftr__top { display: grid; gap: 36px; padding-bottom: clamp(40px, 5vw, 60px); }
@media (min-width: 780px) { .ftr__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; } }
.ftr h3 { font-family: var(--ff); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 18px; font-weight: 800; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ftr li { margin: 0; }
.ftr a { color: #8f8579; text-decoration: none; font-size: .92rem; position: relative; display: inline-block; transition: color .3s; }
.ftr a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--brand); transition: width .38s var(--e-out); }
.ftr a:hover { color: #fff; }
.ftr a:hover::after { width: 100%; }
.ftr__blurb { color: #8f8579; font-size: .93rem; max-width: 34ch; }
.ftr__cod { display: inline-flex; align-items: center; gap: 9px; background: rgba(234, 88, 12, .12); border: 1px solid rgba(234, 88, 12, .26); color: #ffb98a; font-size: .8rem; font-weight: 700; padding: 9px 15px; border-radius: 100px; margin-top: 18px; }
.ftr__word {
  font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(3.4rem, 15.5vw, 15rem); line-height: .84; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .17);
  text-align: center; padding: clamp(16px, 2vw, 30px) 0 0; user-select: none;
  overflow: clip;
}
.ftr__bar {
  border-top: 1px solid rgba(255, 255, 255, .09); margin-top: clamp(18px, 2vw, 28px);
  padding: 22px 0 28px; display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between; align-items: center; font-size: .82rem;
}
.ftr__social { display: flex; gap: 8px; }
.ftr__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); }
.ftr__social a::after { display: none; }
.ftr__social a:hover { border-color: var(--brand); }

/* ==========================================================================
   CART DRAWER
   ========================================================================== */
.drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__scrim {
  position: absolute; inset: 0; background: rgba(16, 14, 12, .42);
  backdrop-filter: blur(3px); opacity: 0; transition: opacity .45s var(--e-out);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(430px, 100%);
  background: var(--ivory); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .58s var(--e-out);
  box-shadow: -20px 0 60px rgba(60, 42, 24, .18);
}
.drawer.is-open .drawer__panel { transform: none; }
@media (max-width: 620px) {
  .drawer__panel {
    right: 0; left: 0; top: auto; width: auto; height: min(88vh, 780px);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    transform: translateY(100%);
  }
  .drawer.is-open .drawer__panel { transform: none; }
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px var(--gut) 16px; border-bottom: 1px solid var(--line); }
.drawer__head h2 { font-size: 1.2rem; margin: 0; }
.drawer__body { flex: 1; overflow-y: auto; padding: 18px var(--gut); }
.drawer__foot { border-top: 1px solid var(--line); padding: 18px var(--gut) calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--white); }
.drawer__row { display: flex; justify-content: space-between; gap: 16px; font-size: .93rem; padding: 5px 0; }
.drawer__row b { color: var(--char); }
.drawer__total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 13px; margin-top: 8px; border-top: 1px solid var(--line); }
.drawer__total span { font-weight: 700; color: var(--char); }
.drawer__total b { font-family: var(--ff-display); font-size: 1.6rem; font-weight: 900; letter-spacing: -.04em; color: var(--char); }
.drawer__empty { text-align: center; padding: 50px 10px; }
.drawer__empty p { color: var(--muted); margin-bottom: 20px; }

.ci { display: grid; grid-template-columns: 74px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.ci:last-child { border-bottom: 0; }
.ci__img { background: var(--cream); border-radius: var(--r-sm); aspect-ratio: 1; overflow: hidden; }
.ci__img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.ci__name { font-size: .92rem; font-weight: 700; color: var(--char); line-height: 1.3; margin: 0 0 3px; }
.ci__name a { color: inherit; text-decoration: none; }
.ci__unit { font-size: .81rem; color: var(--muted); margin: 0 0 9px; }
.ci__ctl { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ci__line { font-weight: 800; color: var(--char); font-size: .96rem; }

.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 100px; background: var(--white); overflow: hidden; }
.qty button { width: 38px; height: 40px; border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; color: var(--char); display: grid; place-items: center; transition: background-color .22s; }
.qty button:hover:not([disabled]) { background: var(--cream); }
.qty button[disabled] { color: var(--faint); cursor: not-allowed; }
.qty input { width: 40px; height: 40px; border: 0; text-align: center; font-family: inherit; font-size: .93rem; font-weight: 700; color: var(--char); background: transparent; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--lg button { width: 48px; height: 52px; font-size: 1.25rem; }
.qty--lg input { width: 52px; height: 52px; font-size: 1rem; }

.link-remove { background: none; border: 0; padding: 3px 0; cursor: pointer; color: var(--muted); font-family: inherit; font-size: .83rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.link-remove:hover { color: var(--err); }

/* ==========================================================================
   STICKY BUY BAR
   ========================================================================== */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 66;
  background: rgba(251, 248, 243, .94);
  backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-top: 1px solid var(--line);
  padding: 11px var(--gut); padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 14px;
  transform: translateY(115%); transition: transform .5s var(--e-out);
  box-shadow: 0 -8px 30px rgba(60, 42, 24, .08);
}
.buybar.is-on { transform: none; }
@media (min-width: 1000px) { .buybar { display: none; } }
.buybar__i { flex: 1; min-width: 0; }
.buybar__n { font-size: .74rem; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__p { font-family: var(--ff-display); font-size: 1.22rem; font-weight: 900; letter-spacing: -.035em; color: var(--char); line-height: 1.15; }
.buybar .btn { flex: 0 0 auto; }
body.has-buybar { padding-bottom: 84px; }
@media (min-width: 1000px) { body.has-buybar { padding-bottom: 0; } }

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */
.crumbs { font-size: .84rem; color: var(--muted); padding: 20px 0 4px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.crumbs li { margin: 0; display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand-700); }
.crumbs [aria-current] { color: var(--char); font-weight: 600; }

.pdp { display: grid; gap: clamp(28px, 4vw, 58px); padding: clamp(18px, 2.4vw, 30px) 0 clamp(50px, 6vw, 84px); }
@media (min-width: 1000px) { .pdp { grid-template-columns: 1.06fr .94fr; align-items: start; } }

.gal__main { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-2xl); overflow: hidden; margin-bottom: 12px; }
.gal__main img, .gal__main video { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; padding: 3%; }
.gal__main video { padding: 0; object-fit: cover; }
/* auto-fill rather than a fixed column count: products carry anywhere from two
   to ten images, and a fixed grid leaves one orphan thumbnail on a second row. */
.gal__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 9px; }
@media (min-width: 520px) { .gal__thumbs { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); } }
.gal__thumb { background: var(--cream); border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden; cursor: pointer; padding: 0; aspect-ratio: 1; transition: border-color .25s; }
.gal__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gal__thumb[aria-selected="true"] { border-color: var(--brand); }
.gal__thumb:hover { border-color: var(--faint); }
.gal__thumb--video { position: relative; }
.gal__thumb--video::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(16, 14, 12, .38) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/18px no-repeat;
}

.pdp h1 { font-size: clamp(1.85rem, 3.5vw, 2.75rem); margin-bottom: 14px; }
.pdp__lead { color: var(--text); font-size: 1.03rem; margin-bottom: 22px; max-width: 46ch; }
.pdp__buyrow { display: flex; gap: 11px; align-items: stretch; flex-wrap: wrap; margin: 22px 0 11px; }
.pdp__buyrow .btn { flex: 1 1 170px; }

.speclist { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.speclist li { display: flex; gap: 11px; align-items: flex-start; margin: 0; font-size: .95rem; }
.speclist svg { flex-shrink: 0; margin-top: 4px; color: var(--brand); }
.speclist--light li { color: #a49a90; }
.speclist--light strong { color: #fff; }

.note {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 18px; font-size: .89rem; color: var(--muted); margin-top: 20px;
}
.note strong { color: var(--char); }

/* ==========================================================================
   FORMS / CHECKOUT / CART PAGES
   ========================================================================== */
.page-head { background: var(--cream); border-bottom: 1px solid var(--line); padding: clamp(34px, 5vw, 66px) 0; }
.page-head h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-bottom: 10px; }
.page-head p { color: var(--muted); margin: 0; max-width: 58ch; }

.cart-layout { display: grid; gap: 26px; align-items: start; }
@media (min-width: 960px) { .cart-layout { grid-template-columns: minmax(0, 1.6fr) minmax(320px, .9fr); gap: 40px; } }

.cart-list { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.cart-item { display: grid; grid-template-columns: 90px 1fr; gap: 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
@media (min-width: 640px) { .cart-item { grid-template-columns: 100px 1fr auto; align-items: center; gap: 20px; } }
.cart-item__img { background: var(--cream); border-radius: var(--r-sm); aspect-ratio: 1; overflow: hidden; }
.cart-item__img img { width: 100%; height: 100%; object-fit: contain; padding: 7%; }
.cart-item__name { font-family: var(--ff-display); font-weight: 800; color: var(--char); font-size: 1rem; line-height: 1.28; margin: 0 0 3px; letter-spacing: -.02em; }
.cart-item__name a { color: inherit; text-decoration: none; }
.cart-item__unit { font-size: .85rem; color: var(--muted); margin: 0 0 12px; }
.cart-item__ctl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cart-item__line { font-family: var(--ff-display); font-weight: 900; color: var(--char); font-size: 1.12rem; letter-spacing: -.03em; white-space: nowrap; }
@media (min-width: 640px) { .cart-item__line { text-align: right; min-width: 106px; } }

.summary { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(22px, 2.6vw, 30px); }
@media (min-width: 960px) { .summary { position: sticky; top: 118px; } }
.summary h2 { font-size: 1.18rem; margin-bottom: 18px; }
.summary__row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: .94rem; }
.summary__row span:last-child { font-weight: 700; color: var(--char); white-space: nowrap; }
.summary__row--free span:last-child { color: var(--ok); }
.summary__total { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding-top: 16px; margin-top: 10px; border-top: 2px solid var(--line); font-weight: 700; color: var(--char); }
.summary__total b { font-family: var(--ff-display); font-size: 1.7rem; font-weight: 900; letter-spacing: -.04em; }
.summary .btn { margin-top: 20px; }
.summary__pay { display: flex; align-items: center; gap: 10px; margin-top: 15px; padding: 13px 15px; background: var(--ok-bg); border: 1px solid var(--ok-line); border-radius: var(--r); font-size: .86rem; color: #14532d; font-weight: 600; }
.summary__pay svg { flex-shrink: 0; color: var(--ok); }

.empty { text-align: center; padding: clamp(50px, 9vw, 96px) 20px; max-width: 480px; margin-inline: auto; }
.empty__ico { width: 74px; height: 74px; border-radius: 50%; background: var(--cream); color: var(--faint); display: grid; place-items: center; margin: 0 auto 22px; }
.empty h2 { font-size: 1.5rem; }
.empty p { color: var(--muted); margin-bottom: 24px; }

.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(22px, 2.8vw, 32px); margin-bottom: 16px; }
.form-card > h2 { font-size: 1.16rem; margin-bottom: 4px; }
.form-card__hint { color: var(--muted); font-size: .89rem; margin-bottom: 20px; }

.fields { display: grid; gap: 16px; }
@media (min-width: 640px) { .fields--2 { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: .88rem; color: var(--char); }
.field .opt { font-weight: 500; color: var(--faint); font-size: .83rem; }
.field .help { font-size: .81rem; color: var(--muted); }

.input, .select, .textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--char);
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r);
  padding: 14px 16px; min-height: 54px; appearance: none;
  transition: border-color .24s, box-shadow .24s;
}
.textarea { min-height: 98px; resize: vertical; line-height: 1.55; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237c736a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3.5px rgba(234, 88, 12, .12); }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--err); }
.err-msg { color: var(--err); font-size: .83rem; font-weight: 600; display: none; }
.err-msg.is-on { display: block; }

.pay-lock { display: flex; align-items: flex-start; gap: 14px; padding: 18px; background: var(--ok-bg); border: 1.5px solid var(--ok-line); border-radius: var(--r); }
.pay-lock svg { flex-shrink: 0; color: var(--ok); margin-top: 1px; }
.pay-lock strong { display: block; color: #14532d; margin-bottom: 3px; }
.pay-lock span { font-size: .88rem; color: #166534; }

.mini-items { display: grid; gap: 12px; margin-bottom: 18px; }
.mini-item { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; }
.mini-item__img { background: var(--cream); border-radius: var(--r-xs); aspect-ratio: 1; overflow: hidden; }
.mini-item__img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.mini-item__n { font-size: .88rem; font-weight: 600; color: var(--char); line-height: 1.32; }
.mini-item__q { font-size: .8rem; color: var(--muted); }
.mini-item__p { font-weight: 700; font-size: .91rem; white-space: nowrap; }

.alert { display: flex; gap: 13px; padding: 16px 18px; border-radius: var(--r); margin-bottom: 20px; font-size: .93rem; }
.alert svg { flex-shrink: 0; margin-top: 2px; }
.alert--err { background: var(--err-bg); border: 1.5px solid var(--err-line); color: #7a271a; }
.alert--err svg { color: var(--err); }
.alert strong { display: block; margin-bottom: 3px; color: inherit; }

.spinner { width: 17px; height: 17px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- confirmation ---------- */
.confirm { max-width: 700px; margin-inline: auto; padding: clamp(34px, 6vw, 66px) 0; }
.confirm__tick { width: 72px; height: 72px; border-radius: 50%; background: var(--ok-bg); border: 2px solid var(--ok-line); color: var(--ok); display: grid; place-items: center; margin: 0 auto 24px; }
.confirm h1 { text-align: center; font-size: clamp(1.9rem, 4.4vw, 2.8rem); margin-bottom: 12px; }
.confirm__lead { text-align: center; color: var(--muted); font-size: 1.04rem; max-width: 46ch; margin: 0 auto 32px; }
.oid { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: var(--ink); color: #fff; border-radius: var(--r-xl); padding: 22px 26px; margin-bottom: 20px; }
.oid span { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; opacity: .58; font-weight: 700; display: block; margin-bottom: 4px; color: #fff; }
.oid strong { font-family: var(--ff-display); font-size: 1.6rem; font-weight: 900; letter-spacing: -.03em; color: #fff; }
.oid__total { text-align: right; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(22px, 2.6vw, 28px); margin-bottom: 16px; }
.panel h2 { font-size: 1.08rem; margin-bottom: 16px; }
.kv { display: grid; gap: 10px; font-size: .94rem; }
.kv__row { display: grid; grid-template-columns: 132px 1fr; gap: 12px; }
@media (max-width: 540px) { .kv__row { grid-template-columns: 1fr; gap: 2px; } }
.kv__k { color: var(--muted); font-weight: 600; }
.kv__v { color: var(--char); font-weight: 600; }
.steps-next { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; }
.steps-next li { display: flex; gap: 14px; margin: 0; font-size: .94rem; }
.steps-next .n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-700); font-family: var(--ff-display); font-size: .78rem; font-weight: 800; display: grid; place-items: center; }

/* ---------- policy pages ---------- */
.prose { max-width: 780px; padding: clamp(34px, 5vw, 62px) 0; }
.prose h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-top: 2.1em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.08rem; margin-top: 1.7em; }
.prose__meta { font-size: .87rem; color: var(--muted); padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.cfg-note { background: #fffbeb; border: 1px solid #fde68a; border-left: 3px solid #f59e0b; border-radius: var(--r-sm); padding: 15px 18px; margin: 20px 0; font-size: .89rem; color: #78350f; }
.cfg-note strong { color: #78350f; }

/* ---------- toasts ---------- */
.toast-host { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 200; display: grid; gap: 9px; width: min(430px, calc(100vw - 32px)); pointer-events: none; }
@media (max-width: 999px) { .toast-host { bottom: 96px; } }
.toast {
  background: var(--ink); color: #fff; border-radius: 100px;
  padding: 14px 22px; font-size: .91rem; font-weight: 600;
  display: flex; align-items: center; gap: 11px; box-shadow: var(--sh-lg);
  animation: toast-in .42s var(--e-out) both;
}
.toast svg { flex-shrink: 0; color: #7ee2a8; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.toast.is-out { animation: toast-out .3s var(--e-out) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } .toast.is-out { opacity: 0; animation: none; } }

/* ---------- utilities ---------- */
.page { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
.center { text-align: center; }
.muted { color: var(--muted); }
.mt-3 { margin-top: 26px; }
.mt-4 { margin-top: 38px; }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   V4 — EDITORIAL MEASURE
   The biggest fix from the audit: stop stretching copy across the full width.
   Body text is capped at a comfortable line length and headings are given room
   to break naturally rather than being forced onto one very wide line.
   ========================================================================== */
.measure { max-width: 62ch; }
.measure-sm { max-width: 46ch; }
.measure-xs { max-width: 34ch; }
.sec-head p, .lead { max-width: 58ch; }
.sec-head--center p { margin-inline: auto; }
p { max-width: 74ch; }
.pdp__lead, .hero__lead { max-width: 46ch; }
/* Components that set their own width opt out. */
.card p, .feat p, .prose p, .rev-card p, .trust__i span, .story__list p,
.tl__step p, .ftr p, .bundle__items, .srch__none { max-width: none; }

/* Headings break instead of shrinking onto one line. */
h1, h2 { max-width: 20ch; }
.sec-head--center h2 { margin-inline: auto; }
.hero h1 { max-width: 15ch; }
.cta h2, .story h2 { max-width: 12ch; }
.u-wide { max-width: none !important; }

/* ==========================================================================
   PROMOTION PRICING — only rendered when a real campaign is running
   ========================================================================== */
.pricebar--promo { align-items: baseline; }
.price-was s { color: var(--muted); font-size: 1.05rem; font-weight: 600; text-decoration-thickness: 1.5px; }
.save-chip {
  display: inline-flex; align-items: center;
  background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand-700);
  font-size: .8rem; font-weight: 800; padding: 7px 13px; border-radius: 100px;
}

.countdown {
  display: inline-flex; flex-direction: column; gap: 10px;
  background: var(--char); color: #fff;
  border-radius: var(--r-lg); padding: 16px 20px; margin-bottom: 22px;
}
.countdown__label {
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.countdown__grid { display: flex; gap: 18px; }
.countdown__grid span { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 42px; }
.countdown__grid b {
  font-family: var(--ff-display); font-size: 1.5rem; font-weight: 900;
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: #fff;
}
.countdown__grid i {
  font-style: normal; font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .45);
}

/* ==========================================================================
   STAR RATING — only when genuine reviews exist to average
   ========================================================================== */
.stars { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; margin-bottom: 14px; }
.stars__glyphs { color: var(--brand); font-size: 1rem; letter-spacing: .1em; }
.stars b { font-family: var(--ff-display); font-size: 1rem; font-weight: 800; color: var(--char); }
.stars__count { font-size: .85rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.stars:hover .stars__count { color: var(--brand-700); border-color: var(--brand); }


.verified {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  background: var(--ok-bg); border: 1px solid var(--ok-line); color: #14532d;
  font-size: .72rem; font-weight: 700; padding: 6px 11px; border-radius: 100px; white-space: nowrap;
}
.verified svg { color: var(--ok); flex-shrink: 0; }

.rev-empty__lead h3 { max-width: 18ch; }
.rev-ctrl { display: flex; gap: 9px; margin-top: 24px; }
.iconbtn--ring { border: 1.5px solid var(--line); }
.iconbtn--ring:hover { border-color: var(--char); background: transparent; }
.rev-rail { cursor: grab; }
.rev-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rev-rail.is-dragging * { pointer-events: none; }

/* ==========================================================================
   TRUST LAYER — beside the buying decision on every product page
   ========================================================================== */
.trustlist {
  list-style: none; margin: 24px 0 0; padding: 20px 22px;
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg);
  display: grid; gap: 14px;
}
.trustlist li { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin: 0; align-items: start; }
.trustlist > li > svg { color: var(--ok); margin-top: 4px; }
.trustlist strong { display: block; font-size: .94rem; color: var(--char); margin-bottom: 2px; }
.trustlist li > span { font-size: .87rem; color: var(--muted); line-height: 1.5; }

/* ==========================================================================
   BUNDLES
   ========================================================================== */
.bundle-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .bundle-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.bundle { position: relative; display: block; cursor: pointer; }
.bundle input { position: absolute; opacity: 0; pointer-events: none; }
.bundle__body {
  display: flex; flex-direction: column; gap: 9px; height: 100%;
  background: var(--white); border: 2px solid var(--line); border-radius: var(--r-xl);
  padding: 22px; position: relative;
  transition: border-color .3s var(--e-out), transform .3s var(--e-out), box-shadow .3s var(--e-out);
}
.bundle input:checked + .bundle__body { border-color: var(--brand); transform: scale(1.015); box-shadow: var(--sh-md); }
.bundle input:focus-visible + .bundle__body { outline: 3px solid var(--brand); outline-offset: 3px; }
.bundle__badge {
  position: absolute; top: -11px; left: 20px;
  background: var(--brand); color: #fff;
  font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 100px;
}
.bundle__thumbs { display: flex; margin-bottom: 4px; }
.bundle__thumbs img {
  width: 62px; height: 62px; object-fit: contain;
  background: var(--cream); border-radius: 12px; border: 2px solid #fff; padding: 5px;
}
.bundle__thumbs img + img { margin-left: -14px; }
.bundle__title { font-family: var(--ff-display); font-size: 1.08rem; font-weight: 800; color: var(--char); letter-spacing: -.02em; }
.bundle__items { font-size: .84rem; color: var(--muted); line-height: 1.45; }
.bundle__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }
.bundle__price b { font-family: var(--ff-display); font-size: 1.4rem; font-weight: 900; letter-spacing: -.035em; color: var(--char); }
.bundle__price s { color: var(--muted); font-size: .9rem; }
.bundle__price i { font-style: normal; font-size: .78rem; font-weight: 800; color: var(--brand-700); }
.bundle__tick {
  position: absolute; top: 18px; right: 18px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff; color: #fff;
  display: grid; place-items: center; transform: scale(.8);
  transition: background-color .3s var(--e-out), border-color .3s var(--e-out), transform .3s var(--e-out);
}
.bundle input:checked + .bundle__body .bundle__tick { background: var(--brand); border-color: var(--brand); transform: scale(1); }
.bundle-cta { margin-top: 28px; }

/* ==========================================================================
   SCROLL TYPOGRAPHY — a deliberate design moment, used twice
   ========================================================================== */
.scrolltype { overflow: hidden; padding: clamp(26px, 4vw, 52px) 0; background: var(--ivory); }
.scrolltype--dark { background: var(--ink); }
.scrolltype__track { display: flex; width: max-content; will-change: transform; }
.scrolltype__set { display: flex; align-items: center; flex-shrink: 0; }
.scrolltype__set span {
  font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(2.2rem, 7vw, 5.5rem); letter-spacing: -.04em; line-height: 1.1;
  color: var(--char); white-space: nowrap; padding: 0 .16em;
}
.scrolltype--dark .scrolltype__set span { color: #fff; }
.scrolltype__set i {
  font-style: normal; color: var(--brand);
  font-size: clamp(1.1rem, 2.6vw, 2rem); line-height: 1; flex-shrink: 0;
}

/* ==========================================================================
   SEARCH
   ========================================================================== */
.srch { position: fixed; inset: 0; z-index: 95; visibility: hidden; }
.srch.is-open { visibility: visible; }
.srch__scrim {
  position: absolute; inset: 0; background: rgba(16, 14, 12, .5);
  backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s var(--e-out);
}
.srch.is-open .srch__scrim { opacity: 1; }
.srch__panel {
  position: relative; margin: 0 auto; max-width: 680px; width: calc(100% - 28px);
  top: clamp(60px, 9vh, 110px);
  background: var(--ivory); border-radius: var(--r-xl);
  box-shadow: var(--sh-lg); overflow: hidden;
  opacity: 0; transform: translateY(-14px) scale(.98);
  transition: opacity .38s var(--e-out), transform .38s var(--e-out);
  max-height: min(70vh, 620px); display: flex; flex-direction: column;
}
.srch.is-open .srch__panel { opacity: 1; transform: none; }
.srch__bar { display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 20px; border-bottom: 1px solid var(--line); }
.srch__bar > svg { color: var(--muted); flex-shrink: 0; }
.srch__bar input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: var(--ff-display); font-size: 1.15rem; font-weight: 700;
  color: var(--char); letter-spacing: -.02em;
}
.srch__bar input::placeholder { color: var(--faint); font-weight: 600; }
.srch__results { overflow-y: auto; padding: 8px; }
.srch__hit {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center;
  padding: 11px 12px; border-radius: var(--r); text-decoration: none;
  transition: background-color .2s;
}
.srch__hit:hover, .srch__hit:focus-visible { background: var(--cream); }
.srch__hit img { width: 56px; height: 56px; object-fit: contain; background: var(--cream); border-radius: 10px; padding: 5px; }
.srch__hit b { display: block; font-size: .94rem; color: var(--char); line-height: 1.3; }
.srch__hit i { font-style: normal; font-size: .82rem; color: var(--muted); }
.srch__hit em {
  font-style: normal; font-family: var(--ff-display); font-weight: 900;
  font-size: 1rem; color: var(--char); letter-spacing: -.03em; white-space: nowrap;
}
.srch__none { padding: 26px 20px; color: var(--muted); font-size: .95rem; text-align: center; }
body.srch-open { overflow: hidden; }

/* ==========================================================================
   RECENT ORDER POPUP — driven by real orders only
   ========================================================================== */
.sproof {
  position: fixed; left: 20px; bottom: 20px; z-index: 64;
  width: min(330px, calc(100vw - 40px)); pointer-events: none;
}
@media (max-width: 999px) { .sproof { bottom: 96px; left: 14px; } }
.sproof__card {
  display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center;
  background: var(--ivory); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 12px 14px; box-shadow: var(--sh-md);
  opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity .45s var(--e-out), transform .45s var(--e-out);
}
.sproof__card.is-in { opacity: 1; transform: none; }
.sproof__card img { width: 46px; height: 46px; object-fit: contain; background: var(--cream); border-radius: 10px; padding: 4px; }
.sproof__who { font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.sproof__who::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }
.sproof__what { font-size: .88rem; font-weight: 700; color: var(--char); line-height: 1.3; }
.sproof__when { font-size: .74rem; color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .sproof__card { transition: opacity .2s; transform: none; } }

/* ==========================================================================
   Small-screen safety — nothing may touch or cross the viewport edge
   ========================================================================== */
@media (max-width: 380px) {
  :root { --gut: 16px; }
  .countdown__grid { gap: 12px; }
  .countdown__grid span { min-width: 36px; }
  .srch__hit { grid-template-columns: 46px 1fr; }
  .srch__hit em { grid-column: 2; }
}

/* ==========================================================================
   320px — the narrowest phone still in real use.
   Logo + wordmark + search + cart + burger will not fit at full size, so the
   header scales down rather than pushing the page into horizontal scroll.
   ========================================================================== */
@media (max-width: 380px) {
  .hdr { padding-inline: 12px; }
  .hdr__bar { gap: 6px; padding: 0 4px 0 2px; }
  .brand { gap: 8px; padding: 4px; }
  .brand__mark { width: 32px; height: 32px; border-radius: 9px; }
  .brand__name { font-size: 1.04rem; }
  .hdr.is-stuck .brand__mark { width: 28px; height: 28px; }
  .hdr.is-stuck .brand__name { font-size: .96rem; }
  .iconbtn { width: 40px; height: 40px; }
  .hdr__actions { gap: 0; }
  .cart-count { top: 2px; right: 1px; }
}
@media (max-width: 330px) {
  /* Below this the wordmark genuinely has nowhere to go — the mark carries it,
     and the accessible name is still on the link. */
  .brand__name { display: none; }
}

/* ==========================================================================
   Trust block — heading left, 2x2 grid right. Replaces four thin equal
   columns of small text, which read as a spreadsheet rather than a design.
   ========================================================================== */
.trust-block { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 960px) { .trust-block { grid-template-columns: .78fr 1.22fr; align-items: start; } }
@media (min-width: 960px) { .trust-block__head { position: sticky; top: 130px; } }

.trust {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .trust { grid-template-columns: repeat(2, 1fr); } }
.trust__i { background: var(--ivory); padding: clamp(24px, 2.8vw, 34px); }
.trust__i b { display: block; font-family: var(--ff-display); font-size: 1.12rem; font-weight: 800; color: var(--char); margin-bottom: 7px; letter-spacing: -.02em; }
.trust__i span { font-size: .92rem; color: var(--muted); line-height: 1.6; }
.trust__n { font-family: var(--ff-display); font-size: .74rem; font-weight: 800; color: var(--brand); letter-spacing: .12em; display: block; margin-bottom: 14px; }

/* Ordering timeline — bigger type, more room. */
.tl__dot { width: 60px; height: 60px; font-size: .9rem; }
.tl__line { top: 29px; }
.tl__step h3 { font-size: clamp(1.1rem, 1.6vw, 1.28rem); margin-bottom: 8px; }
.tl__step p { font-size: .96rem; line-height: 1.6; max-width: 30ch; }
@media (min-width: 900px) { .tl__track { gap: 40px; } }

/* Reviews fallback — give the statement column room to breathe. */
@media (min-width: 860px) { .rev-empty { grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 56px); } }
.rev-empty__lead h3 { font-size: clamp(1.5rem, 2.4vw, 2.05rem); max-width: 22ch; }
.rev-expect strong { font-size: 1rem; }
.rev-expect span { font-size: .93rem; line-height: 1.6; }

/* The connecting line must stop at the last dot, not run to the section edge.
   With a 4-column grid of gap g, the last dot centre sits at 0.75(W + g) from
   the first, so the track length is exactly 75% + 0.75g. */
@media (min-width: 900px) {
  .tl__line {
    left: 30px; right: auto;
    width: calc(75% + 30px);   /* 30px = 0.75 x the 40px grid gap */
  }
}

/* The browser's own search-clear control duplicates our close button. */
.srch__bar input::-webkit-search-cancel-button,
.srch__bar input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* ==========================================================================
   FINAL CONVERSION LAYER
   Offer module, review summary, live viewers, confidence ticks.
   Restrained on purpose: charcoal / cream / orange, no red, no flashing.
   ========================================================================== */

/* ---- Offer module -------------------------------------------------------- */
.offer {
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r);
  padding: 16px 18px;
  margin-bottom: 20px;
  max-width: 46ch;
}
.offer__head { display: flex; align-items: center; gap: 9px; }
.offer__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex-shrink: 0;
  animation: offer-pulse 2.6s ease-in-out infinite;
}
@keyframes offer-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, .38); }
  55%      { box-shadow: 0 0 0 7px rgba(234, 88, 12, 0); }
}
@media (prefers-reduced-motion: reduce) { .offer__dot { animation: none; } }
.offer__name {
  font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-700);
}
.offer__copy { font-size: .92rem; color: var(--text); margin: 9px 0 0; max-width: none; }
.offer .countdown { margin: 14px 0 0; background: var(--char); }
.offer--compact .countdown { margin-top: 12px; }

/* Countdown digits change without jumping. */
.countdown__grid b { transition: opacity .18s ease; }
.countdown__grid b.is-tick { opacity: .55; }

/* ---- Offer badge on cards ------------------------------------------------ */
.card__offer, .feature-tile .card__offer {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  background: rgba(255, 247, 240, .95);
  border: 1px solid var(--brand-line);
  color: var(--brand-700);
  font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 100px;
  backdrop-filter: blur(6px);
}
.feature-tile .card__offer { left: 16px; bottom: 16px; }

/* ---- Compact rating on a card -------------------------------------------- */
.card__rating { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; }
.card__rating > span { color: var(--brand); letter-spacing: .06em; }
.card__rating b { color: var(--char); font-weight: 800; }
.card__rating i { font-style: normal; color: var(--muted); }

/* ---- Review summary beside the buy decision ------------------------------ */
.rsum {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 16px 0; margin-bottom: 20px; max-width: 46ch;
}
.rsum__top { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-wrap: wrap; }
.rsum__stars { color: var(--brand); font-size: 1rem; letter-spacing: .1em; }
.rsum__top b { font-family: var(--ff-display); font-size: 1.05rem; font-weight: 800; color: var(--char); }
.rsum__count { font-size: .86rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.rsum__top:hover .rsum__count { color: var(--brand-700); border-color: var(--brand); }
.rsum__quote {
  margin: 11px 0 0; font-size: .93rem; line-height: 1.55; color: var(--text);
  font-style: italic; max-width: none;
}
.rsum__quote cite { display: block; font-style: normal; font-size: .82rem; color: var(--muted); margin-top: 6px; }

/* ---- Live viewer activity ------------------------------------------------ */
.viewers {
  display: flex; align-items: center; gap: 9px;
  font-size: .87rem; font-weight: 600; color: var(--text);
  margin: 0 0 20px; max-width: none;
}
.viewers__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0;
  animation: view-pulse 2.8s ease-in-out infinite;
}
@keyframes view-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, .35); }
  55%      { box-shadow: 0 0 0 6px rgba(21, 128, 61, 0); }
}
@media (prefers-reduced-motion: reduce) { .viewers__dot { animation: none; } }

/* ---- Confidence ticks under the CTA -------------------------------------- */
.confidence {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
}
.confidence li {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  font-size: .84rem; font-weight: 600; color: var(--text);
}
.confidence svg { color: var(--ok); flex-shrink: 0; }

/* ---- Sticky bar offer chip ----------------------------------------------- */
.buybar__p { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.buybar__offer {
  font-family: var(--ff); font-size: .62rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-700); background: var(--brand-soft);
  border: 1px solid var(--brand-line); padding: 4px 9px; border-radius: 100px;
}

/* ---- Mobile: keep the buy area tight ------------------------------------- */
@media (max-width: 620px) {
  .offer { padding: 14px 15px; margin-bottom: 16px; }
  .offer__copy { font-size: .88rem; }
  .offer .countdown { padding: 13px 15px; }
  .countdown__grid { gap: 14px; }
  .countdown__grid span { min-width: 38px; }
  .countdown__grid b { font-size: 1.3rem; }
  .rsum { padding: 14px 0; margin-bottom: 16px; }
  .rsum__quote { font-size: .89rem; }
  .viewers { margin-bottom: 16px; font-size: .84rem; }
  .confidence { gap: 7px 14px; }
  .confidence li { font-size: .8rem; }
}
@media (max-width: 380px) {
  .countdown__grid { gap: 10px; }
  .countdown__grid span { min-width: 34px; }
  .countdown__grid b { font-size: 1.18rem; }
  .card__offer { left: 8px; bottom: 8px; font-size: .55rem; padding: 5px 9px; }
}

/* Countdown numerals in brand orange on the charcoal surface, per spec. */
.countdown__grid b { color: var(--brand); }

/* Rating reads on the dark featured tile. */
.feature-tile .card__rating b { color: #fff; }
.feature-tile .card__rating i { color: #a49a90; }

/* ==========================================================================
   FINAL PATCH — EDITORIAL CONTAINERS
   The site was reading as one long horizontal strip on wide screens. Primary
   content now sits in a narrower measure; only media and grids use the wide
   container. Copy stays inside a comfortable line length everywhere.
   ========================================================================== */
:root {
  --wrap: 1180px;        /* primary editorial content */
  --wrap-wide: 1360px;   /* media, grids, carousels */
}

.sec-head p, .lead { max-width: 54ch; }
p { max-width: 68ch; }
.measure { max-width: 58ch; }
.measure-sm { max-width: 44ch; }

/* Headings break rather than stretching across the whole screen. */
h2 { max-width: 17ch; }
.hero h1 { max-width: 14ch; }

/* Product cards: fewer per row so images can breathe. */
@media (min-width: 780px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 780px) { .feature-tile { grid-column: span 2; grid-row: span 2; } }
.card__media img { padding: 11%; }

/* ==========================================================================
   PREMIUM TRUST TAGS
   Replaces plain ticks with compact assurance pills.
   ========================================================================== */
.tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0 0; padding: 0; list-style: none; }
.tags li {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 100px; padding: 9px 15px 9px 11px;
  transition: border-color .3s var(--e-out), transform .3s var(--e-out);
}
.tags li:hover { border-color: var(--sand); transform: translateY(-1px); }
.tags__ico {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-700);
}
.tags li[data-tone="ok"] .tags__ico { background: var(--ok-bg); color: var(--ok); }
.tags__t {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); display: block; line-height: 1.2;
}
.tags__v { font-size: .86rem; font-weight: 700; color: var(--char); display: block; line-height: 1.3; }

/* ==========================================================================
   FEATURE STATS — the verified facts, made impossible to overlook
   ========================================================================== */
.stats {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  grid-template-columns: repeat(2, 1fr); margin-top: 24px;
}
@media (min-width: 620px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats__i { background: var(--white); padding: 18px 16px; text-align: center; }
.stats__n {
  font-family: var(--ff-display); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 900;
  letter-spacing: -.04em; color: var(--brand); line-height: 1; display: block; margin-bottom: 6px;
}
.stats__l {
  font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); line-height: 1.35; display: block;
}

/* ==========================================================================
   COMPARE-AT PRICE
   ========================================================================== */
.compare { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.compare__l {
  font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.compare s { color: var(--muted); font-size: 1.02rem; font-weight: 600; text-decoration-thickness: 1.5px; }

/* ==========================================================================
   LIVE ACTIVITY — animated eye, animated number
   ========================================================================== */
.live {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 100px; padding: 8px 16px 8px 12px;
  margin: 0 0 20px; max-width: none;
}
.live__eye { width: 20px; height: 14px; flex-shrink: 0; overflow: visible; }
.live__eye .lid { transform-origin: center; animation: blink 6.5s infinite; }
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(0); }
  94%, 97%      { transform: scaleY(1); }
}
.live__eye .pupil { animation: glance 9s ease-in-out infinite; }
@keyframes glance {
  0%, 40%, 100% { transform: translateX(0); }
  50%, 60%      { transform: translateX(1.6px); }
  75%, 82%      { transform: translateX(-1.4px); }
}
.live__n {
  font-family: var(--ff-display); font-weight: 800; color: var(--char);
  font-variant-numeric: tabular-nums; display: inline-block;
  transition: transform .34s var(--e-out), opacity .34s var(--e-out);
}
.live__n.is-out { transform: translateY(-4px); opacity: 0; }
.live__t { font-size: .85rem; font-weight: 600; color: var(--text); }
.live__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0;
  animation: live-pulse 2.8s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, .34); }
  55%      { box-shadow: 0 0 0 6px rgba(21, 128, 61, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .live__eye .lid, .live__eye .pupil, .live__dot { animation: none; }
  .live__n { transition: none; }
}

/* ==========================================================================
   FOUR-STEP — noticeably shorter, line draws slowly
   ========================================================================== */
.tl--compact { padding-block: 0; }
.tl--compact .tl__dot { width: 46px; height: 46px; font-size: .78rem; margin-bottom: 14px; }
.tl--compact .tl__line { top: 22px; }
.tl--compact .tl__step h3 { font-size: 1rem; margin-bottom: 5px; }
.tl--compact .tl__step p { font-size: .89rem; line-height: 1.5; max-width: 26ch; }
@media (min-width: 900px) { .tl--compact .tl__track { gap: 28px; } }
@media (min-width: 900px) {
  .tl--compact .tl__line { left: 23px; width: calc(75% + 21px); }
}
.section--squeeze { padding-block: clamp(40px, 5vw, 72px); }
.section--squeeze .sec-head { margin-bottom: clamp(24px, 3vw, 36px); }
.section--squeeze .sec-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }

/* ==========================================================================
   MARQUEE — no cropped letters, slower, seamless
   ========================================================================== */
.scrolltype { padding: clamp(30px, 4.2vw, 56px) 0; }
.scrolltype__set span {
  /* Generous line-height so ascenders and descenders are never sliced by the
     band, and padding so the first and last glyph never touch the edge. */
  line-height: 1.24;
  padding: 0 .2em;
}
.scrolltype__track { align-items: center; }

/* ==========================================================================
   FOOTER WORDMARK — cursor flashlight
   ========================================================================== */
.ftr__word { position: relative; isolation: isolate; }

/* A warm wash behind the letters, so the light appears to come from somewhere
   rather than the strokes simply changing colour. */
.ftr__word::before {
  content: ""; position: absolute; inset: -8% -4%; z-index: -1;
  background: radial-gradient(circle calc(var(--lit-r, 240px) * 1.15) at var(--lit-x, 50%) var(--lit-y, 50%),
    rgba(234, 88, 12, .16) 0%, rgba(234, 88, 12, .05) 45%, transparent 72%);
  opacity: 0; transition: opacity .55s var(--e-out); pointer-events: none;
}
.ftr__word.is-lit::before { opacity: 1; }

.ftr__word .ftr__word-base,
.ftr__word .ftr__word-lit,
.ftr__word .ftr__word-glow {
  display: block; line-height: .84;
  font-family: inherit; font-weight: inherit; font-size: inherit; letter-spacing: inherit;
}
.ftr__word .ftr__word-base { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .15); }

/* The lit layer carries a faint fill as well as a brighter stroke: an outline
   that merely brightens reads as a colour change, whereas a little light
   inside the letterform reads as illumination. */
.ftr__word .ftr__word-lit {
  position: absolute; inset: 0;
  color: rgba(255, 255, 255, .06);
  -webkit-text-stroke: 1.15px rgba(255, 255, 255, .92);
  opacity: 0; transition: opacity .5s var(--e-out);
  -webkit-mask-image: radial-gradient(circle var(--lit-r, 240px) at var(--lit-x, 50%) var(--lit-y, 50%), #000 0%, rgba(0,0,0,.72) 34%, rgba(0,0,0,.28) 58%, transparent 78%);
          mask-image: radial-gradient(circle var(--lit-r, 240px) at var(--lit-x, 50%) var(--lit-y, 50%), #000 0%, rgba(0,0,0,.72) 34%, rgba(0,0,0,.28) 58%, transparent 78%);
  pointer-events: none;
}
.ftr__word.is-lit .ftr__word-lit { opacity: 1; }

/* A tighter warm core, blurred just enough to bloom at the cursor. */
.ftr__word .ftr__word-glow {
  position: absolute; inset: 0;
  color: transparent; -webkit-text-stroke: 1.6px rgba(234, 88, 12, .85);
  filter: blur(1.5px);
  opacity: 0; transition: opacity .5s var(--e-out);
  -webkit-mask-image: radial-gradient(circle calc(var(--lit-r, 240px) * .45) at var(--lit-x, 50%) var(--lit-y, 50%), #000 0%, rgba(0,0,0,.4) 45%, transparent 75%);
          mask-image: radial-gradient(circle calc(var(--lit-r, 240px) * .45) at var(--lit-x, 50%) var(--lit-y, 50%), #000 0%, rgba(0,0,0,.4) 45%, transparent 75%);
  pointer-events: none;
}
.ftr__word.is-lit .ftr__word-glow { opacity: 1; }

/* A wider beam on a big screen, where the word itself is far wider. */
@media (min-width: 1200px) { .ftr__word { --lit-r: 300px; } }

/* Touch and reduced-motion get the plain outline. Nothing is lost: the
   wordmark is decorative and aria-hidden. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .ftr__word .ftr__word-lit, .ftr__word .ftr__word-glow { display: none; }
  .ftr__word::before { display: none; }
  .ftr__word .ftr__word-base { -webkit-text-stroke-color: rgba(255, 255, 255, .22); }
}
/* ==========================================================================
   GOOD TO KNOW  /  CUSTOMERS ALSO ASK
   ========================================================================== */
.gtk { display: grid; gap: clamp(24px, 3vw, 48px); }
@media (min-width: 900px) { .gtk { grid-template-columns: .85fr 1.15fr; align-items: start; } }
@media (min-width: 900px) { .gtk__head { position: sticky; top: 130px; } }
.gtk__list { list-style: none; margin: 0; padding: 0; }
.gtk__list li {
  margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
}
.gtk__list li:first-child { border-top: 1px solid var(--line); }
.gtk__list svg { color: var(--brand); margin-top: 4px; flex-shrink: 0; }
.gtk__list strong { display: block; color: var(--char); font-size: .99rem; margin-bottom: 2px; }
.gtk__list span span { font-size: .91rem; color: var(--muted); line-height: 1.55; }

/* ==========================================================================
   ADD-TO-CART FEEDBACK
   ========================================================================== */
.card__add.is-added, .btn.is-added { pointer-events: none; }
.card__add.is-added { color: #fff; border-color: var(--ok); background: var(--ok); }
.card__add.is-added::before { transform: translateY(101%); }
.btn.is-added { background: var(--ok); }
.btn.is-added::before { transform: translateX(-101%); }

/* ==========================================================================
   Small-screen guards for the new pieces
   ========================================================================== */
@media (max-width: 620px) {
  .tags li { padding: 8px 13px 8px 9px; }
  .tags__v { font-size: .82rem; }
  .stats__i { padding: 15px 10px; }
  .live { padding: 7px 14px 7px 10px; }
  .live__t { font-size: .81rem; }
}

/* ==========================================================================
   REVIEW SYSTEM — production
   ========================================================================== */

/* ---- Summary actions ----------------------------------------------------- */
.rsum__acts { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; }
.rsum__acts button.link-arrow { background: none; cursor: pointer; font: inherit; font-weight: 700; }

/* ---- No reviews yet ------------------------------------------------------ */
/* Two columns from tablet up: without this the copy sits in the left half and
   the card reads as half-empty, which looks like a rendering fault rather than
   a deliberate blank state. */
.rev-none {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(30px, 4vw, 52px); margin-bottom: 20px;
  display: grid; gap: clamp(20px, 3vw, 44px); align-items: center;
}
@media (min-width: 860px) { .rev-none { grid-template-columns: 1fr auto; } }
.rev-none h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); max-width: 16ch; margin-bottom: 12px; }
.rev-none .btn-row { margin: 0; }

/* ---- Score + distribution ------------------------------------------------ */
.rev-top {
  display: grid; gap: clamp(24px, 3vw, 44px); align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(22px, 3vw, 34px); margin-bottom: 22px;
}
@media (min-width: 720px) { .rev-top { grid-template-columns: auto 1fr; } }
.rev-score { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rev-score b {
  font-family: var(--ff-display); font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 900;
  letter-spacing: -.05em; line-height: 1; color: var(--char);
}
.rev-score__stars { color: var(--brand); font-size: 1.05rem; letter-spacing: .1em; }
.rev-score__c { font-size: .86rem; color: var(--muted); margin-bottom: 10px; }

.rev-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rev-dist li { display: grid; grid-template-columns: 30px 1fr 30px; gap: 12px; align-items: center; margin: 0; }
.rev-dist span { font-size: .8rem; font-weight: 700; color: var(--muted); }
.rev-dist i { display: block; height: 8px; background: var(--cream); border-radius: 100px; overflow: hidden; }
.rev-dist i b { display: block; height: 100%; background: var(--brand); border-radius: 100px; min-width: 0; }
.rev-dist em { font-style: normal; font-size: .8rem; color: var(--muted); text-align: right; }

/* ---- Filters ------------------------------------------------------------- */
.rev-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.rev-filters button {
  font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
  background: var(--white); border: 1.5px solid var(--line); color: var(--text);
  padding: 9px 16px; border-radius: 100px;
  transition: border-color .25s, background-color .25s, color .25s;
}
.rev-filters button:hover { border-color: var(--faint); }
.rev-filters button[aria-pressed="true"] { background: var(--char); border-color: var(--char); color: #fff; }
.rev-empty-filter { color: var(--muted); padding: 20px 2px; }
.rev-card[hidden] { display: none; }
.rev-card__photo { border-radius: var(--r); margin-top: 4px; max-height: 220px; object-fit: cover; width: 100%; }

/* ==========================================================================
   WRITE A REVIEW — modal
   ========================================================================== */
.rmodal { position: fixed; inset: 0; z-index: 96; visibility: hidden; }
.rmodal.is-open { visibility: visible; }
.rmodal__scrim {
  position: absolute; inset: 0; background: rgba(16, 14, 12, .5);
  backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s var(--e-out);
}
.rmodal.is-open .rmodal__scrim { opacity: 1; }
.rmodal__panel {
  position: relative; margin: 0 auto; width: calc(100% - 28px); max-width: 620px;
  top: clamp(30px, 6vh, 80px); max-height: min(84vh, 820px);
  background: var(--ivory); border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-lg); display: flex; flex-direction: column;
  opacity: 0; transform: translateY(-14px) scale(.98);
  transition: opacity .38s var(--e-out), transform .38s var(--e-out);
}
.rmodal.is-open .rmodal__panel { opacity: 1; transform: none; }
.rmodal__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px var(--gut) 16px; border-bottom: 1px solid var(--line);
}
.rmodal__head h2 { font-size: 1.3rem; margin: 0 0 3px; }
.rmodal__for { font-size: .87rem; color: var(--muted); margin: 0; max-width: none; }
.rmodal__body { padding: 22px var(--gut); overflow-y: auto; display: grid; gap: 16px; }
.rmodal__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 18px; margin-top: 2px;
}
.rmodal__foot .meta { max-width: 34ch; }
.rmodal__done { padding: clamp(34px, 5vw, 54px) var(--gut); text-align: center; }
.rmodal__done h3 { font-size: 1.5rem; margin-bottom: 10px; }
.rmodal__done p { margin-inline: auto; margin-bottom: 22px; }

/* ---- Star input ---------------------------------------------------------- */
.rate { display: flex; align-items: center; gap: 4px; }
.rate__s {
  background: none; border: 0; cursor: pointer; padding: 2px 3px;
  font-size: 1.85rem; line-height: 1; color: var(--line);
  transition: color .18s, transform .18s var(--e-out);
}
.rate__s:hover { transform: scale(1.1); }
.rate__s.is-on { color: var(--brand); }
.rate__t { margin-left: 10px; font-size: .87rem; font-weight: 700; color: var(--muted); }

/* ---- Social proof: truthful fact card ------------------------------------ */
.sproof__card--fact { grid-template-columns: auto 1fr; }
.sproof__mark {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  position: relative;
}
.sproof__mark::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
}

@media (max-width: 620px) {
  .rmodal__panel { top: 16px; max-height: calc(100vh - 32px); }
  .rev-top { padding: 20px; }
  .rate__s { font-size: 1.65rem; }
}

/* ==========================================================================
   WHY SHOPPERS LIKE THIS PRODUCT
   GharKart's own notes about the item. Deliberately styled so it cannot be
   mistaken for the review rail: no stars, no avatar, no name — a brand mark
   and an index number instead.
   ========================================================================== */
.note-lead {
  position: relative;
  background: var(--char); color: var(--ivory);
  border-radius: var(--r-xl);
  padding: clamp(30px, 4.5vw, 62px) clamp(26px, 4vw, 68px);
  margin-bottom: clamp(18px, 2.5vw, 28px);
  overflow: hidden;
}
.note-lead::after {
  content: ""; position: absolute; right: -12%; top: -40%;
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(234, 88, 12, .28), transparent 66%);
  pointer-events: none;
}
.note-lead__mark {
  display: inline-flex; width: 42px; height: 42px; border-radius: 12px;
  align-items: center; justify-content: center; margin-bottom: 20px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
}
.note-lead__mark img { width: 24px; height: 24px; }
.note-lead blockquote {
  position: relative; margin: 0 0 18px; max-width: 26ch;
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.16; letter-spacing: -.035em;
}
.note-lead__by {
  position: relative; display: inline-block;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

/* ---- Supporting notes, in the same draggable rail as the reviews --------- */
.note-rail {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
  scrollbar-width: none;
}
.note-rail::-webkit-scrollbar { display: none; }
.note {
  scroll-snap-align: start; flex: 0 0 clamp(258px, 30vw, 340px);
  display: flex; flex-direction: column; gap: 14px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(22px, 2.4vw, 30px);
  transition: border-color .3s var(--e-out), transform .3s var(--e-out);
}
.note:hover { border-color: var(--faint); transform: translateY(-3px); }
.note__n {
  font-family: var(--ff-display); font-size: .78rem; font-weight: 900;
  letter-spacing: .08em; color: var(--brand);
}
.note p { margin: 0; font-size: 1.01rem; line-height: 1.55; color: var(--text); max-width: none; }
.note__lang {
  margin-top: auto; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

@media (max-width: 620px) {
  .note-lead blockquote { max-width: none; }
  .note { flex-basis: 82%; }
}

/* ---- Optional review photo ----------------------------------------------- */
.filepick { position: relative; }
.filepick__in {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.filepick__face {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px dashed var(--line); border-radius: 10px;
  padding: 12px 14px; font-size: .93rem; color: var(--muted);
  transition: border-color .25s, color .25s, background-color .25s;
}
.filepick__in:hover + .filepick__face,
.filepick__in:focus-visible + .filepick__face { border-color: var(--brand); color: var(--text); }
.filepick__prev {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  font-size: .86rem; color: var(--muted);
}
.filepick__prev[hidden] { display: none; }
/* A span, not an <img>: an image element with no src counts as a broken image
   on every page this modal ships with. */
.filepick__thumb {
  width: 54px; height: 54px; border-radius: 7px; flex-shrink: 0;
  background: var(--cream) center / cover no-repeat; border: 1px solid var(--line);
}
.filepick__prev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filepick__x {
  margin-left: auto; flex-shrink: 0; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 50%;
  width: 26px; height: 26px; line-height: 1; font-size: 1rem; color: var(--muted);
  transition: border-color .2s, color .2s;
}
.filepick__x:hover { border-color: var(--brand); color: var(--brand); }

/* ==========================================================================
   INITIAL AVATARS
   One letter, one colour, chosen by a stable hash of the name — so the same
   person carries the same disc on a review card and in the purchase popup.
   ========================================================================== */
.av {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  font-family: var(--ff-display); font-weight: 800; font-size: 1.05rem; line-height: 1;
  letter-spacing: 0; user-select: none;
}
.av--sm { width: 24px; height: 24px; font-size: .74rem; }

/* Tints are deliberately muted: the disc identifies a person, it should not
   out-shout the review text sitting next to it. */
.av[data-tint="0"] { background: #fdece0; color: #9a4409; }
.av[data-tint="1"] { background: #e6efe8; color: #2f5d3c; }
.av[data-tint="2"] { background: #e9ecf5; color: #33406b; }
.av[data-tint="3"] { background: #f6e9ef; color: #7a3350; }
.av[data-tint="4"] { background: #efeae2; color: #5c4a33; }
.av[data-tint="5"] { background: #e4eff1; color: #23545c; }

.rev-card__who { display: flex; align-items: center; gap: 12px; }

/* ---- Popup: product shot with the buyer's initial tucked into the corner -- */
.sproof__mug { position: relative; flex-shrink: 0; display: block; width: 46px; height: 46px; }
.sproof__mug img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; display: block; }
.sproof__mug .av {
  position: absolute; left: -7px; bottom: -5px;
  box-shadow: 0 0 0 2.5px var(--white);
}

/* ==========================================================================
   PRICE HIERARCHY — Regular / Today / Save
   The order of the eye is what it costs today, then what it used to cost, then
   the saving. So "today" gets the size and the other two stay quiet.
   ========================================================================== */
.pricebar--save {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas: "was now save" "cod cod cod";
  align-items: end;
  gap: 4px clamp(18px, 2.6vw, 30px);
}
.pricebar--save > .cod-chip { grid-area: cod; justify-self: start; margin-top: 12px; }
.pricebar__was { grid-area: was; }
.pricebar__now { grid-area: now; }
.pricebar__save { grid-area: save; justify-self: start; align-self: center; }

.pricebar__lbl {
  display: block;
  font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.pricebar__was s {
  font-family: var(--ff-display); font-size: clamp(1.05rem, 1.9vw, 1.35rem); font-weight: 700;
  color: var(--muted); text-decoration: none; position: relative; letter-spacing: -.02em;
}
/* A drawn rule rather than text-decoration: it sits on the optical centre of
   the digits instead of the font's metric middle, which reads cleaner. */
.pricebar__was s::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 52%;
  height: 1.5px; background: currentColor; opacity: .75; transform: rotate(-6deg);
}
.pricebar__now .price-xl { display: block; }

.pricebar__save {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 13px; border-radius: 10px;
  background: var(--brand-soft, #fff5ed); border: 1px solid var(--brand-line, #f6d3b8);
}
.pricebar__save b {
  font-family: var(--ff-display); font-size: .95rem; font-weight: 900;
  letter-spacing: -.02em; color: var(--brand); line-height: 1;
}
.pricebar__save i {
  font-style: normal; font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand);
  opacity: .8;
}

@media (max-width: 560px) {
  .pricebar--save {
    grid-template-columns: auto 1fr;
    grid-template-areas: "now save" "was save" "cod cod";
    align-items: center; gap: 2px 16px;
  }
  .pricebar__was { align-self: start; }
  .pricebar__was .pricebar__lbl { display: inline; margin-right: 6px; }
  .pricebar__now .pricebar__lbl { display: none; }
}

/* ==========================================================================
   ASSURANCE BENTO
   Replaces the old pill row. Asymmetric on purpose: Cash on Delivery is the
   promise that removes the risk of buying, so it takes the full top row and
   the others step down from there. Hairline rules, no capsules, no shadows.
   ========================================================================== */
.bento {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line);                 /* the gap becomes the rule */
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
.bento__i {
  position: relative; margin: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  background: var(--white); padding: 15px 16px 16px;
  transition: background-color .3s var(--e-out);
}
.bento__i--lead, .bento__i--wide { grid-column: 1 / -1; }

.bento__n {
  font-family: var(--ff-display); font-size: .62rem; font-weight: 900;
  letter-spacing: .16em; color: var(--brand);
}
/* The rule under the number is the only thing that moves on hover. */
.bento__n::after {
  content: ""; display: block; width: 14px; height: 1.5px; margin-top: 5px;
  background: var(--brand); opacity: .45;
  transition: width .32s var(--e-out), opacity .32s var(--e-out);
}
.bento__ico { position: absolute; top: 15px; right: 15px; color: var(--faint); transition: color .3s var(--e-out), transform .3s var(--e-out); }
.bento__t {
  font-family: var(--ff-display); font-weight: 800; letter-spacing: -.02em;
  font-size: .95rem; color: var(--char); margin-top: 5px; padding-right: 22px;
}
.bento__c { font-size: .82rem; line-height: 1.45; color: var(--muted); max-width: 34ch; transition: color .3s var(--e-out); }

.bento__i--lead .bento__t { font-size: clamp(1.05rem, 1.6vw, 1.22rem); }
.bento__i--lead .bento__c { font-size: .87rem; }

@media (hover: hover) {
  .bento__i:hover { background: var(--ivory); }
  .bento__i:hover .bento__n::after { width: 30px; opacity: 1; }
  .bento__i:hover .bento__ico { color: var(--brand); transform: translateX(2px); }
  .bento__i:hover .bento__c { color: var(--text); }
}

/* Wider hosts (the homepage hero column) can carry three across. */
@media (min-width: 1200px) {
  .hero .bento { grid-template-columns: repeat(3, 1fr); }
  .hero .bento__i--lead { grid-column: span 2; }
  .hero .bento__i--wide { grid-column: span 3; }
}

/* Two columns hold down to small phones; the copy is what has to stay legible. */
@media (max-width: 400px) {
  .bento__i { padding: 13px 13px 14px; }
  .bento__c { font-size: .78rem; }
  .bento__ico { display: none; }
}

/* ==========================================================================
   PRODUCT PAGE COMPOSITION
   The media column used to end at the thumbnails while the buy column kept
   going, leaving a tall empty band on desktop. Now the media stage sticks
   while the purchase information scrolls past it, and proof stacks underneath.
   ========================================================================== */
@media (min-width: 1000px) {
  /* The media column stretches to the row height so its sticky stage can
     travel the whole way down; without that it ends at its own content height
     and the empty band reappears under it. Proof cards live BELOW the grid,
     not in this column — inside it they scrolled over the pinned stage. */
  .pdp { grid-template-columns: 1.14fr .86fr; align-items: stretch; }
  .pdp__buy { align-self: start; }
  .pdp__media > [data-gallery-stage] { position: sticky; top: 104px; }
}

/* Proof sits full-width beneath the buy grid. */
.pdp__proof {
  display: grid; gap: 14px;
  margin: 0 0 clamp(40px, 5vw, 70px);
}
@media (min-width: 900px) { .pdp__proof { grid-template-columns: 1.14fr .86fr; align-items: start; } }


.proof {
  margin: 0; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: clamp(18px, 2.2vw, 26px);
}
.proof__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.proof__n {
  flex-shrink: 0; font-family: var(--ff-display); font-size: .64rem; font-weight: 900;
  letter-spacing: .16em; color: var(--brand); padding-top: 4px;
}
.proof__head h3 {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem); letter-spacing: -.025em; margin: 0 0 3px;
}
.proof__head p { margin: 0; font-size: .84rem; color: var(--muted); max-width: 44ch; }

/* ---- Video ---------------------------------------------------------------- */
.proof__stage {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: var(--cream); aspect-ratio: 1;
}
.proof__stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.proof__play {
  position: absolute; inset: 0; margin: auto; width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 0; border-radius: 50%; color: var(--char);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 26px rgba(16, 14, 12, .18);
  transition: transform .3s var(--e-out), opacity .3s var(--e-out);
}
.proof__play:hover { transform: scale(1.07); }
.proof__stage.is-playing .proof__play { opacity: 0; pointer-events: none; }

/* ---- What comes with it --------------------------------------------------- */
.proof__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.proof__list li {
  margin: 0; display: flex; gap: 14px; align-items: baseline;
  background: var(--white); padding: 12px 2px;
}
.proof__list b {
  font-family: var(--ff-display); font-size: .68rem; font-weight: 900;
  letter-spacing: .12em; color: var(--brand); flex-shrink: 0; min-width: 22px;
}
.proof__list span { font-size: .93rem; color: var(--text); }

@media (max-width: 620px) {
  .proof__stage { aspect-ratio: 4 / 5; }
  .proof__play { width: 54px; height: 54px; }
}

/* ==========================================================================
   VERIFIED PRODUCT DETAILS
   Replaces a section that listed what the product was NOT claimed to do. The
   facts are the same set; the framing is what the shopper actually needs.
   ========================================================================== */
.vd { display: grid; gap: clamp(26px, 4vw, 56px); }
@media (min-width: 900px) { .vd { grid-template-columns: .8fr 1.2fr; align-items: start; } }
.vd__head h2 { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.04em; line-height: 1.04; }
.vd__policy { margin-top: 18px; font-size: .86rem; color: var(--muted); }
.vd__policy a { color: var(--brand); text-underline-offset: 3px; }

.vd__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
}
.vd__list li {
  margin: 0; display: flex; gap: 16px; align-items: baseline;
  background: var(--white); padding: 16px clamp(16px, 2vw, 22px);
}
.vd__list b {
  flex-shrink: 0; min-width: 24px;
  font-family: var(--ff-display); font-size: .68rem; font-weight: 900;
  letter-spacing: .12em; color: var(--brand);
}
.vd__list span { font-size: clamp(.95rem, 1.4vw, 1.03rem); color: var(--text); }

.vd__care {
  margin-top: 14px; padding: clamp(18px, 2.2vw, 24px);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl);
  border-left: 3px solid var(--brand);
}
.vd__care-k {
  display: block; font-size: .66rem; font-weight: 900; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 7px;
}
.vd__care p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--text); max-width: 62ch; }

/* ==========================================================================
   CARD PRICE — was / now / off
   A tile cannot carry the full Regular/Today/Save stack, so the struck figure
   sits above the price and the saving rides beside it as one small chip.
   ========================================================================== */
.cprice { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 10px; }
.cprice s {
  grid-column: 1 / -1;
  font-size: .82rem; font-weight: 600; color: var(--muted);
  text-decoration: none; position: relative; width: fit-content;
}
.cprice s::after {
  content: ""; position: absolute; left: -1px; right: -1px; top: 53%;
  height: 1.3px; background: currentColor; opacity: .7; transform: rotate(-5deg);
}
.cprice i {
  font-style: normal; font-size: .64rem; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-soft, #fff5ed);
  border: 1px solid var(--brand-line, #f6d3b8);
  padding: 3px 7px; border-radius: 100px; white-space: nowrap;
}
.feature-tile .cprice i { font-size: .68rem; padding: 4px 9px; }

/* ==========================================================================
   FAQ — indexed accordion
   The icon is two rules that cross, so it rotates to an × with no font swap
   and no layout shift.
   ========================================================================== */
.faq__q { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: baseline; }
.faq__n {
  font-family: var(--ff-display); font-size: .68rem; font-weight: 900;
  letter-spacing: .12em; color: var(--brand); opacity: .7;
  transition: opacity .3s var(--e-out);
}
.faq__qt { text-align: left; }
.faq__ico {
  position: relative; width: 15px; height: 15px; flex-shrink: 0; align-self: center;
  transition: transform .42s var(--e-out);
}
.faq__ico i {
  position: absolute; inset: 0; margin: auto; display: block;
  background: var(--char); border-radius: 2px;
}
.faq__ico i:first-child { width: 15px; height: 1.6px; }
.faq__ico i:last-child { width: 1.6px; height: 15px; transition: transform .42s var(--e-out); }

.faq__item.is-open .faq__ico { transform: rotate(180deg); }
.faq__item.is-open .faq__ico i:last-child { transform: scaleY(0); }
.faq__item.is-open .faq__n { opacity: 1; }
.faq__q[aria-expanded="true"] .faq__ico { transform: rotate(180deg); }
.faq__q[aria-expanded="true"] .faq__ico i:last-child { transform: scaleY(0); }
.faq__q[aria-expanded="true"] .faq__n { opacity: 1; }

/* ==========================================================================
   A6 — SIGNATURE SCROLL MOMENT
   The product is pinned with native sticky and explained by four annotations
   arriving one at a time. No JS pinning, no scroll hijacking: position:sticky
   plus one scrollFx entry writing two custom properties.
   ========================================================================== */
.story6 {
  background: var(--ivory);
  padding: clamp(60px, 9vw, 130px) 0 clamp(70px, 10vw, 150px);
  position: relative;
}
/* A hairline seam so the section joins the one above rather than butting it. */
.story6::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}

.story6__grid { display: grid; gap: clamp(34px, 5vw, 70px); }
@media (min-width: 940px) {
  .story6__grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ---- The pinned stage ---------------------------------------------------- */
.story6__stage { position: relative; }
@media (min-width: 940px) {
  .story6__stage {
    position: sticky; top: 108px;
    height: min(74vh, 640px);
    display: flex; align-items: center; justify-content: center;
  }
}
.story6__frame {
  position: relative; width: 100%; max-width: 620px; margin-inline: auto;
  /* scrollFx writes these; the browser composites the rest. */
  transform: scale(var(--s6-scale, 1)) translate3d(0, var(--s6-y, 0px), 0);
  transform-origin: 50% 45%;
  will-change: transform;
}
.story6__frame img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 26px 60px rgba(16, 14, 12, .13));
}
/* A soft ring behind the product, so it sits in space rather than on flat cream. */
.story6__ring {
  position: absolute; inset: 8% 4% 12%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(234, 88, 12, .10), transparent 62%);
  opacity: var(--s6-ring, 0); transition: opacity .6s var(--e-out);
}

/* ---- The annotations ----------------------------------------------------- */
.story6__head { margin-bottom: clamp(26px, 3.5vw, 44px); }
.story6__head h2 {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem); letter-spacing: -.042em; line-height: 1.04;
}

.js .s6 { opacity: 0; transform: translateY(22px); }
.s6 {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2vw, 26px);
  padding: clamp(22px, 2.6vw, 32px) 0;
  border-top: 1px solid var(--line);
  /* Rest state below is guarded by .js: with no scripts there is nothing to
     reveal these, so they must simply be readable. */
  transition: opacity .7s var(--e-out), transform .7s var(--e-out);
}
.s6:last-child { border-bottom: 1px solid var(--line); }
.s6.is-in { opacity: 1; transform: none; }

.s6__n {
  font-family: var(--ff-display); font-size: .68rem; font-weight: 900;
  letter-spacing: .14em; color: var(--brand); padding-top: 9px;
}
.s6__big { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.s6__big b {
  font-family: var(--ff-display); font-weight: 900; letter-spacing: -.05em;
  font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: .9; color: var(--char);
}
.s6__big span {
  font-size: .7rem; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted);
}
.s6__copy { margin: 0; font-size: clamp(.92rem, 1.3vw, 1rem); line-height: 1.6; color: var(--muted); max-width: 46ch; }

/* ---- Phone: no pinning ---------------------------------------------------
   A sticky product over a short viewport fights the scroll and eats the screen.
   The stage scrolls normally and the annotations become a clean stacked list,
   which says the same thing in the space available. */
@media (max-width: 939px) {
  .story6__frame { transform: none; max-width: 420px; }
  .story6__ring { opacity: 1; }
  .s6 { padding: 20px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .s6 { opacity: 1; transform: none; transition: none; }
  .story6__frame { transform: none; }
}

/* ==========================================================================
   A8 — EDITORIAL STORYTELLING
   Three deliberately different compositions. Four identical 50/50 rows is what
   makes a page read as a template, so no two of these share a layout.
   ========================================================================== */
.ed { padding: clamp(58px, 8vw, 120px) 0; position: relative; }
.ed__idx {
  display: block; font-family: var(--ff-display); font-size: .68rem; font-weight: 900;
  letter-spacing: .16em; color: var(--brand); margin-bottom: 16px;
}
.ed__note { font-size: .85rem; line-height: 1.6; color: var(--muted); max-width: 44ch; }

/* ---- 01 · a claim, against the evidence for it --------------------------- */
.ed--split { background: var(--white); }
.ed__split { display: grid; gap: clamp(28px, 4vw, 60px); }
@media (min-width: 900px) { .ed__split { grid-template-columns: 1.1fr .9fr; align-items: end; } }
.ed__lead h2 {
  font-size: clamp(2.1rem, 5.4vw, 4rem); line-height: 1.02; letter-spacing: -.045em; margin: 0;
}
.ed__lead h2 em { font-style: normal; color: var(--brand); }
.ed__aside p { font-size: clamp(1rem, 1.5vw, 1.1rem); line-height: 1.65; color: var(--text); max-width: 46ch; }
.ed__aside p + p { margin-top: 16px; }

/* ---- 02 · one line, full bleed, a beat between denser sections ----------- */
.ed--wide { background: var(--char); color: var(--ivory); text-align: center; }
.ed__kicker {
  font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 18px;
}
.ed__huge {
  font-size: clamp(2.3rem, 7vw, 5.4rem); line-height: .98; letter-spacing: -.05em;
  margin: 0 auto; max-width: 16ch; color: var(--ivory);
}
.ed__sub {
  margin: clamp(20px, 3vw, 30px) auto 0; max-width: 52ch;
  font-size: clamp(.95rem, 1.4vw, 1.05rem); line-height: 1.6;
  color: rgba(255, 255, 255, .62);
}

/* ---- 03 · a cropped detail with its technical annotation ----------------- */
.ed--figure { background: var(--ivory); }
.ed__fig { display: grid; gap: clamp(30px, 4vw, 64px); align-items: center; }
@media (min-width: 900px) { .ed__fig { grid-template-columns: .95fr 1.05fr; } }
.ed__media {
  margin: 0; border-radius: var(--r-2xl); overflow: hidden;
  background: var(--white); border: 1px solid var(--line);
}
.ed__media img { width: 100%; height: auto; display: block; }
.ed__spec h2 {
  font-size: clamp(1.8rem, 3.8vw, 2.9rem); line-height: 1.05; letter-spacing: -.04em; margin: 0 0 26px;
}
.ed__ann {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
@media (min-width: 560px) { .ed__ann { grid-template-columns: repeat(3, 1fr); } }
.ed__ann li {
  margin: 0; background: var(--ivory); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.ed__ann b {
  font-family: var(--ff-display); font-weight: 900; letter-spacing: -.03em;
  font-size: 1.05rem; color: var(--char);
}
.ed__ann span {
  font-size: .66rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}

/* ==========================================================================
   A10 — THE COLLECTION
   Arranged, not gridded: tile size follows what each product is worth to the
   shopper. Every tile keeps image, name, price, discount and a way to act.
   ========================================================================== */
.coll { display: grid; gap: clamp(14px, 1.8vw, 22px); }
.coll__row { display: grid; gap: clamp(14px, 1.8vw, 22px); }
@media (min-width: 760px) {
  .coll__row--pair { grid-template-columns: 1fr 1fr; }
  .coll__row--trio { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 759px) {
  .coll__row--trio { grid-template-columns: 1fr 1fr; }
  .coll__row--trio .ct:last-child { grid-column: 1 / -1; }
}

.ct {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl);
  overflow: hidden;
  transition: border-color .35s var(--e-out), transform .35s var(--e-out);
}
.ct__media {
  position: relative; display: block; overflow: hidden;
  background: var(--cream); aspect-ratio: 1;
}
.ct__media img {
  width: 100%; height: 100%; object-fit: contain; padding: 6%;
  transition: transform .6s var(--e-out);
}
.ct__idx {
  position: absolute; top: 14px; left: 15px; z-index: 2;
  font-family: var(--ff-display); font-size: .64rem; font-weight: 900;
  letter-spacing: .14em; color: var(--muted);
}
.ct__body { padding: clamp(16px, 1.8vw, 22px); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ct__name { font-size: clamp(.98rem, 1.4vw, 1.1rem); letter-spacing: -.02em; margin: 0; line-height: 1.25; }
.ct__name a { color: inherit; text-decoration: none; }
.ct__desc { margin: 0; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.ct__foot { margin-top: auto; padding-top: 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ct__price { font-family: var(--ff-display); font-weight: 900; letter-spacing: -.03em; font-size: clamp(1.1rem, 1.7vw, 1.35rem); color: var(--char); }
.ct__cod { font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

.ct__act { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ct__view { font-size: .84rem; font-weight: 700; color: var(--char); display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.ct__view svg { transition: transform .3s var(--e-out); }
.ct__add {
  font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 100px;
  padding: 7px 15px; color: var(--char);
  transition: background-color .28s, border-color .28s, color .28s;
}
.ct__add:hover { background: var(--char); border-color: var(--char); color: #fff; }

@media (hover: hover) {
  .ct:hover { border-color: var(--faint); transform: translateY(-3px); }
  .ct:hover .ct__media img { transform: scale(1.035); }
  .ct:hover .ct__view svg { transform: translateX(4px); }
}

/* ---- the wide feature row ------------------------------------------------ */
@media (min-width: 760px) {
  .ct--wide { flex-direction: row; align-items: stretch; }
  .ct--wide .ct__media { flex: 0 0 46%; aspect-ratio: auto; }
  .ct--wide .ct__body { justify-content: center; padding: clamp(24px, 3vw, 44px); gap: 10px; }
  .ct--wide .ct__name { font-size: clamp(1.2rem, 2.1vw, 1.7rem); }
  .ct--wide .ct__desc { font-size: .95rem; max-width: 46ch; }
  .ct--wide .ct__price { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
}
.ct--compact .ct__body { padding: 14px 16px 16px; }
.ct--compact .ct__name { font-size: .94rem; }

/* ==========================================================================
   A26 — RELATED PRODUCTS
   Its own component. Reusing the homepage card here made the foot of a product
   page feel like the homepage had been pasted in.
   ========================================================================== */
.rel__head { display: grid; gap: 18px; margin-bottom: clamp(28px, 3.5vw, 44px); }
@media (min-width: 860px) { .rel__head { grid-template-columns: 1fr auto; align-items: end; } }
.rel__head h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); letter-spacing: -.04em; margin: 0; }
.rel__note { margin: 0; font-size: .88rem; color: var(--muted); max-width: 40ch; }

.rel { display: grid; gap: clamp(18px, 2.4vw, 30px); }
@media (min-width: 720px) { .rel { grid-template-columns: repeat(3, 1fr); } }

.rel__i { display: flex; flex-direction: column; }
.rel__media {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-xl); background: var(--white);
  border: 1px solid var(--line); aspect-ratio: 1; margin-bottom: 16px;
}
.rel__media img { width: 100%; height: 100%; object-fit: contain; padding: 7%; transition: transform .65s var(--e-out); }
.rel__idx {
  position: absolute; top: 14px; left: 16px; z-index: 2;
  font-family: var(--ff-display); font-size: .64rem; font-weight: 900;
  letter-spacing: .14em; color: var(--muted);
}
.rel__name { font-size: clamp(1rem, 1.5vw, 1.14rem); letter-spacing: -.025em; margin: 0 0 5px; line-height: 1.28; }
.rel__name a { color: inherit; text-decoration: none; }
.rel__desc { margin: 0 0 14px; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.rel__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.rel__price { font-family: var(--ff-display); font-weight: 900; letter-spacing: -.03em; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--char); }
.rel__cta { font-size: .82rem; font-weight: 800; color: var(--brand); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.rel__cta svg { transition: transform .3s var(--e-out); }

@media (hover: hover) {
  .rel__i:hover .rel__media img { transform: scale(1.04); }
  .rel__i:hover .rel__media { border-color: var(--faint); }
  .rel__i:hover .rel__cta svg { transform: translateX(4px); }
}

/* ---- Flagship tile inside the arranged collection ------------------------
   .feature-tile was written for a 2x2 cell in the old grid, where the
   surrounding cards bounded its height. In the collection it spans the full
   width with nothing to bound it, so the image grew to fill the viewport.
   Here it becomes a proper two-column feature with a capped media height. */
.coll > .feature-tile { grid-column: auto; grid-row: auto; }
@media (min-width: 780px) {
  .coll > .feature-tile {
    grid-template-columns: 1.05fr .95fr;
    align-items: stretch;
  }
  .coll > .feature-tile .feature-tile__media {
    aspect-ratio: auto; min-height: 0; height: 100%;
    max-height: clamp(360px, 42vw, 520px);
  }
  .coll > .feature-tile .feature-tile__body {
    justify-content: center; padding: clamp(30px, 3.6vw, 54px);
  }
}
@media (max-width: 779px) {
  .coll > .feature-tile .feature-tile__media { aspect-ratio: 1.2; }
}
/* The wide rows sit beside the flagship in weight, not above it. */
.coll .ct--wide .ct__media { max-height: clamp(300px, 34vw, 420px); }

/* ---- Collection tile proportions ----------------------------------------
   A 1:1 media on a 640px column made every paired row a full screen tall, so
   the collection read as a slideshow rather than a range you can scan. */
.coll .ct__media { aspect-ratio: 1.12; }
.coll .ct--compact .ct__media { aspect-ratio: 1; }
.rel__media { aspect-ratio: 1.08; }

/* The offer badge was colliding with the tile index in the same corner. */
.ct__media .card__offer, .rel__media .card__offer { left: auto; right: 14px; }

/* Tiles in a row match height so a short name never leaves a ragged edge. */
.coll__row--pair .ct, .coll__row--trio .ct, .rel__i { height: 100%; }

/* ==========================================================================
   STEP TIMELINES — one motion language for both journeys
   "How you use it" (4 steps) and "What happens after you order" (5 steps) now
   animate identically: the orange rule draws with scroll progress, then each
   step fades up in turn and its number lights. Driven by scrollFx and
   IntersectionObserver — no animation library, no ScrollTrigger.
   ========================================================================== */

/* ---- Shared rest state ---------------------------------------------------
   Held in CSS rather than set by JS so nothing flashes before the script runs,
   and so reduced-motion can opt out cleanly below. */
.js .tl__step,
.js .ao__i {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s var(--e-out), transform .62s var(--e-out);
}
.js .tl__step.is-on,
.js .ao__i.is-on { opacity: 1; transform: none; }

/* ---- How you use it ------------------------------------------------------ */
.tl__line { overflow: hidden; border-radius: 2px; }
.tl__fill {
  height: 100%; width: 0; background: var(--brand);
  /* No transition: scrollFx writes the width every frame, so a transition
     would fight the scroll and lag behind the pointer. */
}
.tl__dot {
  transition: border-color .45s var(--e-out), color .45s var(--e-out),
              background-color .45s var(--e-out), transform .45s var(--e-out);
}
.tl__step.is-on .tl__dot { transform: scale(1.06); }
/* The dot sits on the rule, so it needs the section ground behind it. */
.bg-ivory .tl__dot { background: var(--ivory); }
.bg-white .tl__dot { background: var(--white); }
.tl__step h3 { transition: color .45s var(--e-out); }
.tl__step.is-on h3 { color: var(--char); }

.ao__n {
  transition: color .45s var(--e-out), transform .45s var(--e-out);
}
.ao__i.is-on .ao__n { transform: translateY(-1px); }
.ao__t { transition: color .45s var(--e-out); }

/* A step that has been reached reads darker than one still ahead. */
.ao__i:not(.is-on) .ao__n { color: var(--faint); }

@media (prefers-reduced-motion: reduce) {
  .js .tl__step, .js .ao__i { opacity: 1; transform: none; transition: none; }
  .tl__fill { width: 100% !important; }
  .ao { --ao-fill: 100%; }
}

/* ==========================================================================
   MULTI-BUY SELECTOR
   Two options, weighted so the better one looks better because it is better —
   not because it is shouting. Radio inputs, so it is keyboard operable and the
   selected state is the browser's, not a class we have to keep in sync.
   ========================================================================== */
.mb { margin: clamp(20px, 2.6vw, 28px) 0 0; display: grid; gap: 10px; }
.mb__k {
  margin: 0 0 2px; font-size: .66rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.mb__o { display: block; cursor: pointer; margin: 0; }
.mb__o input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.mb__box {
  position: relative; display: grid;
  grid-template-columns: 1fr auto; grid-template-areas: "top price" "meta price";
  gap: 3px 16px; align-items: center;
  padding: 15px 52px 15px 18px;
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r);
  transition: border-color .3s var(--e-out), background-color .3s var(--e-out);
}
.mb__top { grid-area: top; display: flex; align-items: center; gap: 10px; }
.mb__top b {
  font-family: var(--ff-display); font-weight: 800; letter-spacing: -.02em;
  font-size: 1rem; color: var(--char);
}
.mb__flag {
  font-style: normal; font-size: .6rem; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; background: var(--brand);
  padding: 3px 8px; border-radius: 100px;
}
.mb__price {
  grid-area: price; font-family: var(--ff-display); font-weight: 900;
  letter-spacing: -.035em; font-size: clamp(1.15rem, 1.9vw, 1.4rem); color: var(--char);
  text-align: right; white-space: nowrap;
}
.mb__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8rem; color: var(--muted); }
.mb__save { color: var(--brand); font-weight: 700; }

/* The tick is the selected state; the border only supports it. */
.mb__tick {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%) scale(.6);
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  opacity: 0; transition: opacity .28s var(--e-out), transform .28s var(--e-out);
}
.mb__o input:checked ~ .mb__box { border-color: var(--brand); background: var(--brand-soft, #fff5ed); }
.mb__o input:checked ~ .mb__box .mb__tick { opacity: 1; transform: translateY(-50%) scale(1); }
.mb__o input:focus-visible ~ .mb__box { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (hover: hover) { .mb__o:hover .mb__box { border-color: var(--faint); } }

/* Best value carries a little more weight at rest, so the eye finds it first. */
.mb__o--best .mb__box { border-color: var(--brand-line, #f6d3b8); }
.mb__note { margin: 4px 0 0; font-size: .78rem; color: var(--muted); }

@media (max-width: 420px) {
  .mb__box { grid-template-columns: 1fr; grid-template-areas: "top" "price" "meta"; padding: 14px 46px 14px 15px; gap: 4px; }
  .mb__price { text-align: left; }
}

/* ==========================================================================
   ASSURANCE — refined
   The six promises were six rectangles of equal weight, which reads as a badge
   strip. Now: a hairline lattice with no card edges of its own, the lead
   promise given room, and depth from a single soft ground rather than borders
   on everything.
   ========================================================================== */
.bento {
  background: transparent; border: 0; border-radius: 0;
  gap: 0; overflow: visible;
  position: relative;
  border-top: 1px solid var(--line);
}
.bento__i {
  background: transparent;
  padding: 17px 18px 18px 0;
  border-bottom: 1px solid var(--line);
}
/* Vertical hairlines only between columns, never at the outer edge. */
.bento__i:nth-child(odd):not(.bento__i--lead):not(.bento__i--wide) { padding-right: 22px; }
.bento__i:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--line); }
.bento__i--lead, .bento__i--wide { padding-left: 0; border-left: 0; }

/* The lead promise gets a warm ground, so the eye lands on the one that
   actually removes the risk of buying. */
.bento__i--lead {
  background: linear-gradient(100deg, var(--brand-soft, #fff5ed), transparent 72%);
  padding-left: 18px; margin-left: -18px;
  border-radius: var(--r) var(--r) 0 0;
}
.bento__i--lead .bento__t { font-size: clamp(1.08rem, 1.7vw, 1.28rem); }
.bento__ico { top: 17px; right: 4px; }
.bento__i:nth-child(even) .bento__ico { right: 0; }
.bento__i--lead .bento__ico { right: 14px; }

@media (hover: hover) {
  .bento__i:hover { background-color: transparent; }
  .bento__i--lead:hover { background: linear-gradient(100deg, var(--brand-soft, #fff5ed), transparent 60%); }
}

@media (min-width: 1200px) {
  .hero .bento__i:nth-child(even) { border-left: 1px solid var(--line); }
  .hero .bento__i--lead, .hero .bento__i--wide { border-left: 0; }
}

/* The icon of a left-column cell was landing against the right column's number.
   Give every cell its own right gutter and sit the icon inside it. */
.bento__i { padding-right: 34px; }
.bento__i:nth-child(odd):not(.bento__i--lead):not(.bento__i--wide) { padding-right: 40px; }
.bento__ico { right: 12px; }
.bento__i:nth-child(odd):not(.bento__i--lead):not(.bento__i--wide) .bento__ico { right: 18px; }
.bento__i:nth-child(even) .bento__ico { right: 12px; }
.bento__i--lead .bento__ico { right: 16px; }
.bento__t { padding-right: 0; }

/* ==========================================================================
   AFTER YOU ORDER — rebuilt
   The five steps were invisible: the generic [data-anim="stagger"] pass set
   them to opacity 0 and its reveal was overwritten by the timeline's own, so
   nothing ever animated them back. What a shopper saw was a display heading
   over a rule over 250px of nothing. The reveal collision is fixed in
   motion.js; this is the composition around it.

   The head now reads across rather than down, so the heading and the lead
   share one band instead of stacking to 418px, and the journey below gets the
   room. Five columns at >=1000px, a vertical rail below that — 5 columns at
   768 would give each step 130px, which is narrower than its own sentence.
   ========================================================================== */
.aohead {
  display: grid; gap: clamp(14px, 2vw, 40px);
  margin-bottom: clamp(30px, 3.6vw, 52px);
}
.aohead__l { min-width: 0; }
.aohead__l h2 { margin-bottom: 0; }
.aohead__r {
  color: var(--muted); font-size: clamp(1rem, 1.15vw, 1.08rem);
  line-height: 1.62; max-width: 46ch; margin: 0;
}
@media (min-width: 900px) {
  .aohead { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; }
  /* Optically level with the heading's last baseline rather than its box. */
  .aohead__r { padding-bottom: .5em; }
}

.ao {
  list-style: none; margin: 0; padding: clamp(26px, 2.6vw, 34px) 0 0;
  display: grid; gap: clamp(26px, 3vw, 34px); position: relative;
}

/* --- The rule ------------------------------------------------------------
   One hairline across the top of the row with the progress rule drawn over
   it. It sits above the numbers rather than through them, so it no longer
   needs each number to knock out the section background to stay legible. */
.ao::before,
.ao::after {
  content: ""; position: absolute; left: 0; top: 0; height: 1px;
}
.ao::before { right: 0; background: var(--line); }
.ao::after {
  width: var(--ao-fill, 0%);
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand) 62%, var(--brand-line, #f6d3b8) 100%);
}

.ao__i {
  margin: 0; position: relative; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}
/* A short stub dropping from the rule marks where each step begins. */
.ao__tick {
  position: absolute; left: 0; top: calc(clamp(26px, 2.6vw, 34px) * -1);
  width: 1px; height: clamp(14px, 1.5vw, 20px);
  background: var(--line);
  transition: background-color .5s var(--e-out), height .5s var(--e-out);
}
.ao__i.is-on .ao__tick { background: var(--brand); }
.ao__n {
  font-family: var(--ff-display); font-size: .68rem; font-weight: 900;
  letter-spacing: .16em; color: var(--brand);
}
.ao__t {
  font-family: var(--ff-display); font-weight: 800; letter-spacing: -.022em;
  font-size: clamp(1.02rem, 1.35vw, 1.16rem); line-height: 1.25;
  color: var(--char); margin: 0;
}
.ao__c { font-size: .89rem; line-height: 1.6; color: var(--muted); max-width: 32ch; }

@media (min-width: 1000px) {
  .ao { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 34px); }
  /* A hairline between columns, never at the outer edge. */
  .ao__i + .ao__i { padding-left: clamp(18px, 1.8vw, 28px); border-left: 1px solid var(--line); }
  .ao__i + .ao__i .ao__tick { left: clamp(18px, 1.8vw, 28px); }
}

/* --- Below 1000px: a vertical rail --------------------------------------- */
@media (max-width: 999px) {
  .ao { padding: 0 0 0 clamp(26px, 5vw, 34px); gap: clamp(26px, 4vw, 36px); }
  .ao::before, .ao::after {
    top: 8px; bottom: 8px; left: 0; right: auto; width: 1px; height: auto;
  }
  .ao::before { background: var(--line); }
  .ao::after { height: var(--ao-fill, 0%); bottom: auto;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand) 62%, var(--brand-line, #f6d3b8) 100%); }
  .ao__tick {
    left: calc(clamp(26px, 5vw, 34px) * -1); top: 8px;
    width: clamp(14px, 3vw, 20px); height: 1px;
  }
  .ao__c { max-width: 52ch; }
}

/* ==========================================================================
   PROOF COLUMN — the side rail
   The video holds its place while the evidence beside it scrolls, so a height
   difference between the two columns can never read as an unfinished corner.
   ========================================================================== */
.proof__side {
  display: flex; flex-direction: column;
  gap: clamp(24px, 2.6vw, 36px); min-width: 0;
}
@media (min-width: 900px) {
  .pdp__proof { align-items: start; }
  .proof--video { position: sticky; top: 96px; }
}

.proof--trust .proof__head { margin-bottom: 0; }
.bento--panel {
  grid-template-columns: 1fr;
  background: transparent; border: 0; border-radius: 0; overflow: visible;
  border-top: 1px solid var(--line);
  margin-top: 16px; gap: 0;
}
.bento--panel .bento__i {
  background: transparent; border-bottom: 1px solid var(--line);
  border-left: 0; padding: 15px 46px 16px 0;
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n t" "n c";
  column-gap: 16px; row-gap: 3px; align-items: baseline;
}
.bento--panel .bento__n { grid-area: n; padding-top: 3px; }
.bento--panel .bento__t { grid-area: t; margin-top: 0; padding-right: 0; }
.bento--panel .bento__c { grid-area: c; max-width: 44ch; }
.bento--panel .bento__ico { top: 16px; right: 2px; }

/* The one that actually removes the risk of ordering carries a warm ground. */
.bento--panel .bento__i--lead {
  background: linear-gradient(100deg, var(--brand-soft, #fff5ed), transparent 76%);
  padding-left: 16px; margin-left: -16px; border-radius: var(--r) var(--r) 0 0;
}
.bento--panel .bento__i--lead .bento__t { font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
@media (hover: hover) {
  .bento--panel .bento__i:hover { background: transparent; }
  .bento--panel .bento__i:hover .bento__t { color: var(--brand); }
  .bento--panel .bento__i--lead:hover {
    background: linear-gradient(100deg, var(--brand-soft, #fff5ed), transparent 62%);
  }
}

/* ==========================================================================
   ASSURANCE ROW — the three lines that stay with the buttons
   ========================================================================== */
.assure {
  list-style: none; margin: clamp(20px, 2.4vw, 26px) 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
@media (min-width: 560px) { .assure { grid-template-columns: repeat(3, 1fr); } }
.assure__i {
  margin: 0; background: var(--white); padding: 14px 15px 15px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  transition: background-color .3s var(--e-out);
}
.assure__ico { color: var(--brand); line-height: 0; margin-bottom: 5px; }
.assure__i b {
  font-family: var(--ff-display); font-weight: 800; letter-spacing: -.02em;
  font-size: .92rem; color: var(--char);
}
.assure__i span:last-child { font-size: .8rem; line-height: 1.45; color: var(--muted); }
@media (hover: hover) { .assure__i:hover { background: var(--ivory); } }

/* ==========================================================================
   POLISH — live count, assurance row, trust panel
   ========================================================================== */

/* The eye gives one pulse when the real count moves, so a change registers
   without anything blinking for attention on a loop. */
.live.is-beat .live__eye { animation: eye-beat .5s var(--e-out); }
@keyframes eye-beat {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}
.live.is-beat .live__dot { animation: live-pulse 2.8s ease-in-out infinite, dot-beat .5s var(--e-out); }
@keyframes dot-beat {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .live.is-beat .live__eye, .live.is-beat .live__dot { animation: none; }
}

/* Three stacked cards cost 290px on a 390px screen for three short lines.
   Laid out as rows they cost 180px and read faster. */
@media (max-width: 559px) {
  .assure__i {
    display: grid; grid-template-columns: auto 1fr;
    grid-template-areas: "ico t" "ico c";
    column-gap: 13px; row-gap: 2px; align-items: baseline;
    padding: 13px 15px;
  }
  .assure__ico { grid-area: ico; margin: 0; align-self: center; }
  .assure__i b { grid-area: t; }
  .assure__i span:last-child { grid-area: c; }
}

/* The final row closes nothing, so it needs no rule under it. */
.bento--panel .bento__i:last-child { border-bottom: 0; padding-bottom: 2px; }

/* No icon column to reserve on a narrow screen. */
@media (max-width: 560px) {
  .bento--panel .bento__i { padding-right: 34px; }
  .bento--panel .bento__ico { right: 0; }
}

/* --- Products with no video: full-width bands that split internally ------ */
@media (min-width: 900px) {
  .pdp__proof--wide { grid-template-columns: 1fr; gap: clamp(26px, 3vw, 40px); }
  .pdp__proof--wide .proof__list { grid-template-columns: 1fr 1fr; column-gap: 1px; }
  .pdp__proof--wide .bento--panel { grid-template-columns: 1fr 1fr; column-gap: clamp(26px, 3vw, 44px); }
  /* Six items divide into two columns exactly, so nothing spans and no row
     is left with an empty half. */
  .pdp__proof--wide .bento--panel .bento__i--lead,
  .pdp__proof--wide .bento--panel .bento__i--wide { grid-column: auto; }
  .pdp__proof--wide .bento--panel .bento__i:nth-child(5),
  .pdp__proof--wide .bento--panel .bento__i:nth-child(6) { border-bottom: 0; padding-bottom: 2px; }
}

/* The percentage a tier takes off, stated on the option itself so the offer
   is legible without reading the small print under it. */
.mb__off {
  font-style: normal; font-size: .62rem; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand);
  border: 1px solid var(--brand-line, #f6d3b8); background: var(--brand-soft, #fff5ed);
  padding: 3px 8px; border-radius: 100px; white-space: nowrap;
}
.mb__k { text-transform: none; letter-spacing: .04em; font-size: .78rem; font-weight: 600; }
@media (max-width: 420px) { .mb__top { flex-wrap: wrap; gap: 6px; } }

/* ==========================================================================
   MOBILE TOUCH TARGETS
   A 22px link is a comfortable click and an uncomfortable tap. These are the
   controls a thumb is actually aimed at — footer navigation, the tile and
   related-product actions — so on a touch screen they get the vertical room
   to be hit reliably. Nothing moves visually: the padding grows the hit area,
   and a negative margin keeps the text where the design put it.
   ========================================================================== */
@media (hover: none) and (max-width: 900px) {
  .ftr a {
    padding-block: 9px;
    margin-block: -9px;          /* the rhythm of the list is unchanged */
  }
  .ftr a::after { bottom: 7px; }  /* the rule follows the text, not the box */

  .ct__view, .rel__cta {
    padding-block: 10px;
    margin-block: -10px;
  }

  /* The quantity stepper is the control people miss most often. */
  .qty button { min-width: 44px; min-height: 44px; }

  /* A real button with visible bounds, so it grows rather than being padded. */
  .ct__add { min-height: 44px; }
}

/* The asterisk on a required checkout field. Small, orange, and announced
   to screen readers by the input’s own required attribute rather than by
   reading out a punctuation mark. */
.req { color: var(--brand); font-weight: 800; margin-left: 2px; }