/* VYE B2 design system — draft theme only */

/* ==========================================================================
   VYE Mist — homepage concept
   Design language lifted from the B2 inner-box and SRP artwork:
   flat neon colour blocks, heavy condensed italic display type, numbered
   steps, strength dots, halftone dots. Inverted to a light paper base.
   ========================================================================== */

:root{
  /* ---- Flavour neons, sampled straight from the packaging artwork --------
     These are FILL colours. On the pack's dark ground they also work as
     type; on a light ground they do not (lemon & lime is 1.24:1 on paper),
     so each one has a --*-deep partner below for type use. */
  --spearmint:  #15C8A0;
  --lemonlime:  #CDE93D;
  --mango:      #FFAA19;
  --watermelon: #F43169;
  --mixedberry: #9947CD;
  --bluerazz:   #3774FF;

  /* Type-safe partners: same hue, darkened until they clear 4.75:1 on both
     candidate paper colours. Use for text, never for large fills. */
  --spearmint-deep:  #00795E;
  --lemonlime-deep:  #607200;
  --mango-deep:      #965E00;
  --watermelon-deep: #D5003D;
  --mixedberry-deep: #9640CD;
  --bluerazz-deep:   #1159FF;

  /* Pack black, sampled from the artwork. Cool and slightly teal-leaning:
     blue runs ~12 points above red. This is the colour the site has to
     either match or deliberately contrast with. */
  --pack-black: #0A1416;

  /* Live accent — repainted by the flavour selector */
  --acc:      var(--spearmint);
  --acc-deep: var(--spearmint-deep);
  --acc-on:   #101010;   /* readable text colour on top of --acc */
  --acc-fade: .16s linear;

  /* Type sitting on a full-bleed colour block runs at 75%, so the fill
     bleeds through the ink. Brand rule from the 2026 brand book.
     * Web accessibility exception: small type on a fill stays at full
       strength, because 75% falls below the 4.5:1 WCAG contrast minimum. */
  --on-fill-alpha: .75;

  --shell: min(1440px, 100% - 3rem);
  --r:     999px;

  /* Digital type is Korolev only, in the three cuts the Adobe project holds:
     Medium 500, Bold Italic 700 and Heavy Italic 900. With synthesis off the
     browser picks the nearest real cut instead of faking bold or italic. */
  --display: "korolev", Arial, Helvetica, sans-serif;
  --body:    "korolev", Arial, Helvetica, sans-serif;
}
html{ font-synthesis:none; }

/* ---- Base A: warm cream (the original direction) ------------------------- */
html[data-base="warm"]{
  --paper:    #F6F3EC;
  --paper-2:  #F6F3EC;   /* cream everywhere; no white sections */
  --ink:      #101010;
  /* Type runs at 75% everywhere, so the ground shows through. */
  --ink-text: color-mix(in srgb, var(--ink) 75%, transparent);
  --ink-60:   #55534E;
  --ink-25:   #C9C4B8;
  --hairline: #DFD9CC;
  --stone:    #D4CFC6;
  --charcoal: #3F3C38;
}

/* ---- Base B: cool white, ink borrowed from the pack ----------------------
   Matches the packaging's colour temperature, so a black packshot reads as
   the same black as the headline type instead of a cool blob on warm cream. */
html[data-base="cool"]{
  --paper:    #EFF2F1;
  --paper-2:  #FAFCFB;
  --ink:      var(--pack-black);
  --ink-text: color-mix(in srgb, var(--ink) 75%, transparent);
  --ink-60:   #4E5A5C;
  --ink-25:   #BCC6C6;
  --hairline: #D5DBDA;
  --stone:    #D2D7D6;
  --charcoal: #3A4041;
}

html[data-flavour="mint"],
html[data-flavour="spearmint"]  { --acc: #29A6A0; --acc-deep: #1E7A75; --acc-on: #062E2C; }
html[data-flavour="citrus"],
html[data-flavour="lemonlime"]  { --acc: #B3C441; --acc-deep: #607200; --acc-on: #2A3305; }
html[data-flavour="berry"],
html[data-flavour="mixedberry"] { --acc: #723996; --acc-deep: #9640CD; --acc-on: #F9F2FF; --acc-on-dark: #B07FD6; }
html[data-flavour="unflavoured"],
html[data-flavour="unflavored"] { --acc: #5E5C5E; --acc-deep: #3F3D3F; --acc-on: #F6F3EC; --acc-on-dark: #939093; }
html[data-flavour="mango"]      { --acc: var(--mango);      --acc-deep: var(--mango-deep);      --acc-on:#33200A; }
html[data-flavour="watermelon"] { --acc: var(--watermelon); --acc-deep: var(--watermelon-deep); --acc-on:#FFF4F7; }
html[data-flavour="bluerazz"]   { --acc: var(--bluerazz);   --acc-deep: var(--bluerazz-deep);   --acc-on:#F1F5FF; }

/* ---- Pack rooms ---------------------------------------------------------
   A section that drops into the packaging's own dark world. It only rebinds
   the local tokens, so every component inside keeps working untouched — and
   --acc-deep reverts to the neon, because on this ground the neon is the
   legible choice (5 of 6 flavours clear 4.5:1 on pack black).

   data-dark="none"  — fully light, the pack is the only dark thing
   data-dark="rooms" — two interior sections go dark
   data-dark="hero"  — the header goes dark, everything below stays light
   data-dark="all"   — dark header and dark interior rooms */
html[data-dark="hero"]  .room--hero,
html[data-dark="all"]   .room--hero{
  --paper:    var(--pack-black);
  --paper-2:  #101B1D;
  --ink:      #F2F5F4;
  --ink-text: color-mix(in srgb, var(--ink) 75%, transparent);
  --ink-60:   #97A3A4;
  --ink-25:   #3A4749;
  --hairline: #263234;
  /* Berry and unflavoured fall below 4.5:1 on pack black, so they swap in a lighter tint. */
  --acc-deep: var(--acc-on-dark, var(--acc));
  background:var(--paper);
  color:var(--ink-text);
}
/* Interior dark rooms sit on pack black with the guide's dark-room neutrals
   and type at 75%. */
html[data-dark="rooms"] .room--room,
html[data-dark="all"]   .room--room{
  --paper:    var(--pack-black);
  --paper-2:  #101B1D;
  --ink:      #F2F5F4;
  --ink-text: color-mix(in srgb, var(--ink) 75%, transparent);
  --ink-60:   #97A3A4;
  --ink-25:   #3A4749;
  --hairline: #263234;
  /* Berry and unflavoured fall below 4.5:1 on pack black, so they swap in a lighter tint. */
  --acc-deep: var(--acc-on-dark, var(--acc));
  background:var(--paper);
  color:var(--ink-text);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body.vye-b2-root{
  margin:0;
  background:var(--paper);
  color:var(--ink-text);
  font-family:var(--body);
  font-size:clamp(16px,0.62vw + 14px,18px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }

.shell{ width:var(--shell); margin-inline:auto; }

/* ---- Type roles ---------------------------------------------------------- */

.display{
  font-family:var(--display);
  font-weight:800;
  font-style:italic;
  text-transform:uppercase;
  line-height:0.84;
  letter-spacing:-0.015em;
  margin:0;
}
.display--upright{ font-style:normal; }

.label{
  font-family:var(--display);
  font-weight:700; font-style:italic; /* Bold Italic: the kit has no upright 700 */
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.9rem;
  line-height:1;
}

.mono-note{
  font-family:var(--body);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.76rem;
}

/* ---- Reusable devices ---------------------------------------------------- */

/* Flat neon colour block sitting behind text, as on the boxes */
.block{
  background:var(--acc);
  color:var(--acc-on);
  transition:background-color var(--acc-fade), color var(--acc-fade);
}
/* Wrap the type inside a colour block to soften it to brand opacity */
.on-fill{ opacity:var(--on-fill-alpha); }

/* Halftone dot field from the top corner of every pack */
.halftone{
  background-image:radial-gradient(currentColor 1.4px, transparent 1.5px);
  background-size:9px 9px;
  opacity:.9;
}

/* Strength dots: ●●●○○ */
.dots{ display:inline-flex; gap:.28em; align-items:center; }
.dots i{
  width:.5em; height:.5em; border-radius:50%;
  border:1.5px solid currentColor; display:block;
}
.dots i.on{ background:currentColor; }
.dots i.half{ position:relative; background:transparent; }
.dots i.half::before{
  content:""; position:absolute; inset:-1.5px; border-radius:inherit;
  background:currentColor; clip-path:inset(0 50% 0 0); pointer-events:none;
}

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--display); font-weight:800; font-style:italic;
  text-transform:uppercase; letter-spacing:0.04em; font-size:1.05rem;
  padding:.85rem 1.6rem; border-radius:var(--r);
  border:2px solid var(--ink); background:var(--ink); color:var(--paper-2);
  text-decoration:none; cursor:pointer;
  transition:transform .18s ease, background-color var(--acc-fade), color var(--acc-fade), border-color var(--acc-fade);
}
.btn:hover{ transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink-text); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper-2); }
.btn--acc{ background:var(--acc); border-color:var(--acc); color:var(--acc-on); }

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

/* ==========================================================================
   Compliance strip + nav
   ========================================================================== */

.compliance-strip{
  background:var(--pack-black); color:#F6F3EC;
  text-align:center; padding:.5rem 1rem;
}
.compliance-strip p{ margin:0; }

.nav{
  position:sticky; top:0; z-index:60;
  /* Solid, not glassy: the design language is flat print blocks, and a
     translucent bar goes muddy where it passes over a dark pack room. */
  background:var(--paper);
  border-bottom:1px solid var(--hairline);
}
.nav__in{
  display:flex; align-items:center; gap:2rem;
  padding:.9rem 0;
}
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand__logo{ height:2.65rem; width:auto; display:block; }
.brand__sub{ color:var(--ink-60); }

.nav__links{
  display:flex; gap:1.6rem; margin-left:auto; align-items:center;
  list-style:none; padding:0; margin-block:0;
}
.nav__links a{ text-decoration:none; }
.nav__links a:hover{ color:var(--acc-deep); }
.nav__cart{
  border:2px solid var(--ink); border-radius:var(--r);
  padding:.5rem 1.15rem;
  background:transparent; color:inherit; font:inherit; cursor:pointer;
}
.nav__cart:hover{ background:var(--acc); color:var(--acc-on); border-color:var(--acc); }

.nav__toggle{
  display:none; margin-left:auto;
  font:inherit; cursor:pointer;
  background:var(--ink); color:var(--paper-2);
  border:2px solid var(--ink); border-radius:var(--r);
  padding:.5rem 1.1rem;
}
.nav__drawer{ display:none; }
.nav__drawer button{
  background:none; border:0; padding:0; color:inherit;
  cursor:pointer; font:inherit; text-align:left;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{ padding:clamp(1.6rem,3.2vw,2.5rem) 0 0; }
.hero__grid{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:1.05fr .95fr;
  align-items:start;
}

.hero__copy{
  display:flex; flex-direction:column;
  min-height:100%;
}

.hero__meta{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding-bottom:.85rem; margin:0;
  border-bottom:2px solid var(--ink);
}
.hero__meta .label{ font-size:.9rem; }

/* One H1 holds both lines so search engines read "Nicotine Mist"; reset it so
   the two spans keep the look the old <p> + <h1> pair had. */
.lockup__h1{ margin:0; font-size:inherit; line-height:inherit; letter-spacing:normal; color:inherit; text-transform:none; }
.lockup__h1 > .lockup__nicotine,
.lockup__h1 > .lockup__word{ display:block; }

.lockup{
  position:relative;
  --mist-size: clamp(7rem, 19vw, 16.5rem);
}
.lockup__nicotine{
  font-family:var(--display); font-weight:800; font-style:italic;
  text-transform:uppercase; letter-spacing:-0.015em;
  font-size:clamp(2.05rem,5.4vw,4.25rem); line-height:.78;
  margin:0;
  /* Italic MIST sits in from the box edge at the cap; nudge Nicotine onto that corner. */
  padding-left: calc(var(--mist-size) * 0.055);
}
.lockup__nic{ color:var(--acc-deep); transition:color var(--acc-fade); }
/* "otine" is 62% of the full ink (not 50% of the 75% body ink), so it clears 4.5:1 on cream and on pack black. */
.lockup__otine{ color:color-mix(in srgb, var(--ink) 62%, transparent); }
.lockup__word{
  font-size:var(--mist-size);
  line-height:.82;
  margin: calc(var(--mist-size) * -0.055) 0 0;
}
.lockup__tail{
  font-size:clamp(1.5rem,3.4vw,2.9rem);
  margin-top:.35rem;
}
.lockup__tail .thin{ font-weight:700; color:var(--ink-60); }

.hero__main{
  flex:1;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(1.15rem,2.2vw,1.65rem);
  padding-top:clamp(.4rem,1vw,.75rem);
  padding-bottom:clamp(1.65rem,3.4vw,2.5rem);
}
.hero__copy:has(.hero__meta) .hero__main{
  padding-top:clamp(.85rem,1.6vw,1.15rem);
}
.hero__lede{
  max-width:38ch; margin:0; font-size:1.12rem; line-height:1.65; color:var(--ink-60);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin:0; }

.hero__trust{
  margin:0; padding-top:.25rem;
  display:flex; gap:1.5rem; flex-wrap:wrap; color:var(--ink-60);
}

/* Photo panel: handheld pack on flavour colour. Horizon also uses
   .hero__media { height:100% }, which stretched this box to the copy
   column and cropped the 3:2 hand photos. Keep the frame on the photo. */
body.vye-b2-root .hero__media{
  position:relative; overflow:hidden; border-radius:2px;
  width:100%; height:auto; min-height:0; max-height:none;
  align-self:start; aspect-ratio:auto;
}
body.vye-b2-root .hero__media img{
  position:relative; inset:auto;
  display:block; width:100%; max-width:100%;
  height:auto; aspect-ratio:3 / 2;
  object-fit:cover; object-position:center;
}
.hero__tab{
  position:absolute; left:0; top:0; z-index:2;
  padding:1.25rem 1.5rem 1.4rem;
  max-width:200px;
  pointer-events:none;
}
.hero__tab .display{ font-size:clamp(1.6rem,3vw,2.4rem); }
.hero__tab .mono-note{
  display:block; margin-top:.5rem; opacity:.75;
  font-size:.65rem; line-height:1.5; max-width:16ch;
}

.hero__halftone{
  position:absolute; right:0; bottom:0; z-index:2;
  width:150px; height:110px; color:var(--paper-2);
  pointer-events:none;
  mask-image:linear-gradient(to top left, #000, transparent 75%);
}

/* ==========================================================================
   Marquee — FRESH SIMPLE FAST
   ========================================================================== */

.marquee{
  margin-top:clamp(2.5rem,4.5vw,3.75rem);
  overflow:hidden; border-block:2px solid var(--ink);
  padding:.65rem 0;
}
.marquee__track{
  display:flex; width:max-content;
  animation:vye-b2-marquee 26s linear infinite;
  will-change:transform;
}
.marquee__group{
  display:flex; gap:2.5rem;
  padding-inline-end:2.5rem;
  flex:none;
}
.marquee__group span{
  font-family:var(--display); font-weight:800; font-style:italic;
  text-transform:uppercase; font-size:clamp(1.5rem,3.6vw,2.9rem);
  line-height:1; white-space:nowrap;
  padding-inline:.08em .16em; /* box covers the italic lean; see vye-b2-home.css */
}
.marquee__group span:nth-child(even){ color:var(--acc-deep); transition:color var(--acc-fade); }
@keyframes vye-b2-marquee{
  to{ transform:translate3d(calc(-1 * var(--marquee-shift, 50%)), 0, 0); }
}

/* ==========================================================================
   Section furniture
   ========================================================================== */

.vye-b2-sec{ padding:clamp(3.5rem,6vw,5.5rem) 0; }
.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
  padding-bottom:1.25rem; margin-bottom:clamp(2rem,3.5vw,2.75rem);
  border-bottom:2px solid var(--ink);
}
.sec-head__index{ color:var(--acc-deep); transition:color var(--acc-fade); margin-bottom:.9rem; font-size:0.98rem; letter-spacing:0.12em; }
.sec-head h2{ font-size:clamp(2.4rem,6vw,4.75rem); margin:0; }
.sec-head > p{ margin:0; max-width:36ch; color:var(--ink-60); }

/* ---- Flavours ------------------------------------------------------------ */

.vye-b2-sec.surface-paper { background: var(--paper); }
.vye-b2-sec.surface-sheet { background: var(--paper-2); }
.flavours{ background:var(--paper-2); }

.rail{
  display:grid; gap:1rem;
  /* Four across, or two by two on narrower screens; never three plus one. */
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.flav{
  --c:var(--spearmint);
  --on:#101010;   /* ink on the fill; set light per card for dark fills */
  position:relative; display:flex; flex-direction:column;
  border:2px solid var(--ink); background:transparent;
  padding:0; text-align:left; cursor:pointer; font:inherit; color:inherit;
  text-decoration:none; overflow:hidden;
  transition:transform .2s ease;
}
.flav:hover{ transform:translateY(-4px); }
.flav{ container-type:inline-size; }
.flav__swatch{
  position:relative;
  background:var(--c); aspect-ratio:3/4;
  display:flex; flex-direction:column;
  padding:.85rem;
}
.flav__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; line-height:1;
}
.flav__swatch .mono-note{ color:var(--on); line-height:1; }
.flav__dots{ color:var(--on); opacity:var(--on-fill-alpha); flex:none; }
.flav__dots i{ width:.42em; height:.42em; }
.flav__desc{
  display:block; margin-top:1rem; max-width:26ch;
  font-size:.95rem; font-weight:500; line-height:1.4;
  color:var(--on);
}
.flav__name{
  margin-top:auto;
  font-family:var(--display); font-weight:800; font-style:italic;
  text-transform:uppercase; font-size:clamp(1.05rem,8cqi,1.9rem); line-height:.95;
  color:var(--on); opacity:var(--on-fill-alpha);
}
/* Echoes the pack lockup: flavour name sitting above a big MIST */
.flav__swatch::after{
  content:"Mist";
  font-family:var(--display); font-weight:800; font-style:italic;
  text-transform:uppercase; font-size:min(9rem, calc((100cqi - 1.7rem) * .49)); line-height:.8;
  letter-spacing:-0.02em; color:var(--on); opacity:var(--on-fill-alpha);
}
.flav__foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem .85rem; border-top:2px solid var(--ink);
}
.flav[aria-pressed="true"]{ background:var(--ink); color:var(--paper-2); }
.flav[aria-pressed="true"] .flav__foot{ border-color:var(--paper-2); }
.flav__pick{ font-size:.72rem; letter-spacing:.12em; }

.field--packs{ margin-top:clamp(1.75rem,3vw,2.25rem); }
.field__head{ display:flex; align-items:baseline; gap:.7rem; margin-bottom:1rem; }
.packs{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:.85rem;
  padding-top:.45rem;
}
.pack{
  position:relative; display:block; text-align:left; text-decoration:none;
  background:transparent; color:inherit;
  border:2px solid var(--ink); padding:.85rem .8rem .75rem;
}
.pack[aria-current="true"]{ background:var(--ink); color:var(--paper-2); }
.pack__n{
  display:block; font-family:var(--display); font-weight:800; font-style:italic;
  text-transform:uppercase; font-size:1.35rem; line-height:1;
}
.pack__save{ display:block; margin-top:.35rem; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
.pack__badge{
  position:absolute; top:-.55rem; right:.5rem;
  background:var(--acc); color:var(--acc-on);
  font-family:var(--display); font-weight:800; font-style:italic;
  text-transform:uppercase; font-size:.62rem; letter-spacing:.04em;
  padding:.18rem .45rem;
  white-space:nowrap;
}

/* ---- How it works -------------------------------------------------------- */

.steps__grid{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:1.1fr .9fr;
  align-items:stretch;
}
.steps__list{ display:grid; gap:0; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:1.25rem;
  align-items:start;
  padding:1.85rem 0; border-top:1px solid var(--hairline);
}
.step:first-child{ border-top:0; padding-top:.35rem; }
.step__n{
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(3rem,6vw,5rem); line-height:.8;
  color:var(--acc-deep);
  transition:color var(--acc-fade);
  min-width:2.2ch;
}
.step h3{
  font-family:var(--display); font-weight:800; font-style:italic;
  text-transform:uppercase; font-size:clamp(1.6rem,3vw,2.3rem);
  line-height:.95; margin:0 0 .35rem;
}
.step p{ margin:0; color:var(--ink-60); max-width:34ch; }

.steps__close{
  margin:0; padding:1.5rem 0 0;
  border-top:1px solid var(--hairline);
}
.steps__close .display{
  display:block; font-size:clamp(1.35rem,2.5vw,1.9rem);
  color:var(--acc-deep); margin:0 0 .4rem;
  transition:color var(--acc-fade);
}
.steps__close p{
  margin:0; color:var(--ink-60); max-width:36ch;
}

.steps__media{
  position:relative; overflow:hidden; min-height:0;
  width:100%; height:auto; align-self:center;
  aspect-ratio:3 / 2;
  background:transparent;
}
.steps__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  opacity:0;
  animation:steps-gif 7.5s infinite;
}
.steps__media img:nth-child(1){ opacity:1; }
.steps__media img:nth-child(1){ animation-delay:0s; }
.steps__media img:nth-child(2){ animation-delay:2.5s; }
.steps__media img:nth-child(3){ animation-delay:5s; }
@keyframes steps-gif{
  0%, 31%{ opacity:1; }
  35%, 100%{ opacity:0; }
}

/* ---- Numbers band -------------------------------------------------------- */

.numbers{ padding:clamp(3.5rem,6vw,5.5rem) 0; }
.numbers__in{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:2px solid var(--ink);
}
.stat{
  padding:clamp(1.5rem,3vw,2.5rem);
  border-left:2px solid var(--ink);
}
.stat:first-child{ border-left:0; }
.stat__v{
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(3rem,7vw,5.5rem); line-height:.82; letter-spacing:-0.02em;
  margin:88px 0;
}
.stat__k{ display:block; margin-top:.6rem; color:var(--ink-60); }
.stat:nth-child(2) .stat__v,
.stat:nth-child(4) .stat__v{ color:var(--acc); transition:color var(--acc-fade); }

/* ---- Mosaic -------------------------------------------------------------- */

.mosaic__grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(0,auto);
}
.tile{ position:relative; overflow:hidden; }
.tile img{ width:100%; height:100%; object-fit:cover; }
.tile--wide{ grid-column:span 2; }
.tile--tall{ grid-row:span 2; }
.tile__cap{
  position:absolute; left:0; bottom:0; z-index:2;
  padding:.75rem 1rem;
}
.tile--quote{
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(1.25rem,2.5vw,2rem); min-height:240px;
}
.tile--quote .display{ font-size:clamp(1.5rem,2.6vw,2.2rem); }
.tile--quote .display{ opacity:var(--on-fill-alpha); }
.tile--review-spearmint,
.tile--mint-review{
  background:var(--spearmint);
  color:#062E25;
}
.tile--review-lemonlime{ background:var(--lemonlime); color:#2A3305; }
.tile--review-mango{ background:var(--mango); color:#33200A; }
.tile--review-watermelon{ background:var(--watermelon); color:#FFF4F7; }
.tile--review-mixedberry{ background:var(--mixedberry); color:#F9F2FF; }
.tile--review-bluerazz{ background:var(--bluerazz); color:#F1F5FF; }
.tile--brief{
  border:2px dashed var(--ink-25);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(1.25rem,2.5vw,2rem); min-height:240px;
  color:var(--ink-60);
}
.tile--brief strong{
  display:block; color:var(--ink-text);
  font-family:var(--display); font-weight:800; font-style:italic;
  text-transform:uppercase; font-size:1.5rem; line-height:1; margin-bottom:.5rem;
}

/* ---- Why mist / Fresh Simple Fast ---------------------------------------- */

.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.trio article{ padding:clamp(1.25rem,2.5vw,2rem); min-height:220px; display:flex; flex-direction:column; justify-content:center; }
.trio h3{ font-size:clamp(2.2rem,4vw,3.4rem); margin-bottom:.6rem; }
.trio p{ margin:0; max-width:28ch; }
.trio article,
.trio h3,
.trio p{ color:#101010; }
.trio article.is-dark,
.trio article.is-dark h3,
.trio article.is-dark p{ color:#E6E2D8; }

.usp-story{ scroll-margin-top:90px; }
.usp-story__grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.usp-story__item{
  position:relative; min-width:0;
  padding:0 clamp(1.25rem,2.5vw,2.25rem) 1.5rem;
  overflow:hidden;
}
.usp-story__item + .usp-story__item{ border-left:1px solid var(--hairline); }
.usp-story__eyebrow{
  font:700 .8rem/1 var(--display);
  letter-spacing:.16em; text-transform:uppercase; margin:0;
}
.usp-story__visual{
  height:220px; display:flex; align-items:center;
  position:relative; margin:1rem 0 1.6rem;
}
.usp-story__visual--ingredients{ justify-content:flex-start; text-align:center; }
.usp-story__visual > .ingredients-scene{
  width:220px; max-width:100%; height:100%; position:relative;
}
/* Square, like the artwork: a stretched box squashed the droplet ring 12%
   (and Lighthouse flags the mismatched aspect ratio). */
.ingredients-scene{ container-type:size; }
.ingredients-scene__graphic{
  display:block; width:min(88cqh, 100cqw); height:auto; aspect-ratio:1; margin-inline:auto; object-fit:contain;
}
.ingredients-scene__number{
  position:absolute; left:50%; top:43%; transform:translate(-50%,-50%);
  color:var(--ink);
}
.usp-story__visual .ingredients-scene .ingredients-scene__number{ font-size:6.5rem; letter-spacing:-.035em; }
.ingredients-scene__caption{
  position:absolute; bottom:9%; left:0; width:100%;
  font:700 .72rem/1.2 var(--display);
  letter-spacing:.06em; text-transform:none; color:var(--ink);
}
.usp-story__item h3{
  font:italic 800 clamp(2rem,3vw,3rem)/.95 var(--display);
  text-transform:uppercase; margin:0 0 .8rem;
}
.usp-story__copy{
  max-width:34ch; margin:0; color:var(--ink-60);
  font-size:1rem; line-height:1.55;
}
.usp-story__big{
  font:italic 800 clamp(6rem,10vw,10rem)/.8 var(--display);
  letter-spacing:-.045em;
}
.usp-story__unit{
  display:block; font:700 .72rem var(--body);
  letter-spacing:.14em; text-transform:uppercase; margin-top:1.3rem;
}
.usp-story__visual > div{ position:relative; z-index:1; }
.usp-story__dial{
  width:218px; height:218px; border-radius:50%;
  border:1px solid var(--ink-25);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.usp-story__dial:before{
  content:"";
  position:absolute; inset:8px;
  border:6px solid var(--acc);
  border-left-color:transparent; border-bottom-color:transparent;
  border-radius:50%; transform:rotate(45deg);
  transition:border-color var(--acc-fade);
}
.usp-story__dial:after{
  content:"";
  position:absolute; width:12px; height:12px;
  background:var(--ink); border:3px solid var(--paper);
  border-radius:50%; bottom:7px; left:50%; transform:translateX(-50%);
}
.usp-story__dial .usp-story__big{ font-size:6.5rem; letter-spacing:-.035em; }
.usp-story__dial small{ font:italic 700 2.8rem var(--display); margin-left:3px; }
.usp-story__visual--flavour{ align-items:stretch; }
.usp-story__visual > .flavour-scene{
  width:auto; aspect-ratio:1; max-width:100%; height:100%;
  background:var(--acc); position:relative; overflow:hidden;
  transition:background-color var(--acc-fade);
}
.flavour-scene__photo{
  position:absolute; left:50%; top:0; height:100%; aspect-ratio:1;
  transform:translateX(-50%);
  background-size:300% 200%;
  background-position:0% 0%;
  background-repeat:no-repeat;
}
html[data-flavour="mint"] .flavour-scene__photo,
html[data-flavour="spearmint"] .flavour-scene__photo{ background-position:0% 0%; }
html[data-flavour="citrus"] .flavour-scene__photo,
html[data-flavour="lemonlime"] .flavour-scene__photo{ background-position:50% 0%; }
html[data-flavour="mango"] .flavour-scene__photo{ background-position:100% 0%; }
html[data-flavour="watermelon"] .flavour-scene__photo{ background-position:0% 100%; }
html[data-flavour="berry"] .flavour-scene__photo,
html[data-flavour="mixedberry"] .flavour-scene__photo{ background-position:50% 100%; }
html[data-flavour="unflavoured"] .flavour-scene__photo,
html[data-flavour="unflavored"] .flavour-scene__photo,
html[data-flavour="bluerazz"] .flavour-scene__photo{ background-position:100% 100%; }
.flavour-scene__photo.is-custom-flavour{
  background-size:cover !important;
  background-position:center !important;
}
@media (max-width:900px){
  .usp-story__item{ padding:0 1.25rem 1.5rem; }
  .usp-story__visual{ height:205px; }
  .usp-story__visual > .ingredients-scene{ width:205px; }
  .usp-story__dial{ width:185px; height:185px; }
  .usp-story__dial .usp-story__big{ font-size:5.5rem; }
  .usp-story__visual .ingredients-scene .ingredients-scene__number{ font-size:5.5rem; }
}
@media (max-width:760px){
  .usp-story__grid{ grid-template-columns:1fr; }
  .usp-story__item,
  .usp-story__item:first-child{
    padding:1.5rem 0; display:grid;
    grid-template-columns:1fr 1fr; column-gap:1rem; align-items:center;
  }
  .usp-story__item + .usp-story__item{ border-left:0; border-top:1px solid var(--hairline); }
  .usp-story__eyebrow{ grid-column:1/-1; }
  .usp-story__visual{ grid-column:1; grid-row:2/4; height:180px; margin:1rem 0 0; }
  .usp-story__visual > .ingredients-scene{ width:180px; height:180px; max-width:100%; }
  .ingredients-scene__caption{ font-size:.6rem; }
  .usp-story__item h3{ grid-column:2; align-self:end; margin-bottom:.65rem; }
  .usp-story__copy{ grid-column:2; align-self:start; font-size:.85rem; }
  .usp-story__dial{ width:155px; height:155px; }
  .usp-story__dial .usp-story__big{ font-size:4.6rem; }
  .usp-story__visual .ingredients-scene .ingredients-scene__number{ font-size:4.6rem; }
  .usp-story__big{ font-size:5.7rem; }
  .usp-story__unit{ font-size:.6rem; }
}

/* ---- Social -------------------------------------------------------------- */

.social__grid{
  display:grid; gap:1rem; grid-template-columns:repeat(4,1fr);
  align-items:stretch;
}
.social__grid > .social__card,
.social__grid > figure.social__card,
.social__grid > a.social__card{
  width:100%; min-width:0; min-height:0;
}
.social__card{
  aspect-ratio:1; position:relative; overflow:hidden;
  border:2px solid var(--ink);
  display:flex; align-items:flex-end; padding:1rem;
  margin:0;
}
.social__card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.social__card .mono-note{
  position:relative; z-index:2;
  /* Fixed values, not --ink: inside a pack room --ink flips light and the
     pill would end up light text on a light pill. */
  background:var(--pack-black); color:#FFFDF8;
  padding:.35rem .7rem; border-radius:var(--r);
}
.social__card-cover{
  position:absolute; inset:0; z-index:3;
  border-radius:inherit;
}
.social__card-cover:focus-visible{
  outline:2px solid var(--acc); outline-offset:-4px;
}
.social__card:has(.social__card-cover:hover){ border-color:var(--acc); }
.social__card--fill{ background:var(--acc); color:var(--acc-on); align-items:center; justify-content:center; transition:background-color var(--acc-fade), color var(--acc-fade); }
.social__card--fill .display{ font-size:clamp(1.4rem,2.4vw,2rem); text-align:center; }
.social__card--review{
  flex-direction:column; align-items:flex-start; justify-content:space-between;
  background:var(--paper-2); color:var(--ink-text); text-decoration:none;
  padding:clamp(1.1rem,2vw,1.5rem);
}
.social__card--review:hover{ border-color:var(--acc); }
.social__card--review .rev-widget__score{
  font-size:clamp(3.2rem,6vw,4.6rem); line-height:.8; margin:0;
}
.social__card--review .stars{
  letter-spacing:.08em; color:var(--acc-deep); font-size:1.15rem; margin:.15rem 0 .4rem;
  transition:color var(--acc-fade);
}
.social__card--review .mono-note{ background:transparent; color:var(--ink-60); padding:0; border-radius:0; }

.rev-scroll-wrap{
  position:relative;
  margin-bottom:1.25rem;
}
.rev-scroll-hint{
  display:none;
  margin:0 0 .75rem;
  color:var(--ink-60);
  font:700 .72rem/1.35 var(--display);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.rev-scroll-hint__arrow{
  font-family:var(--body);
  letter-spacing:0;
  text-transform:none;
  font-weight:400;
}
.rev-scroll-wrap.is-dark .rev-scroll-hint{ color:#97a3a4; }
.rev-scroll-wrap.is-dark::after{
  background:linear-gradient(to left, var(--pack-black) 15%, transparent);
}
.rev-scroll-wrap::after{
  content:"";
  position:absolute;
  top:1.75rem;
  right:0;
  bottom:.65rem;
  width:2.75rem;
  pointer-events:none;
  background:linear-gradient(to left, var(--paper-2) 10%, transparent);
}
.rev-scroll{
  --cols: 4;
  --gap: 1rem;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  gap:var(--gap);
  align-content:start;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:0;
  padding-bottom:.65rem; margin-bottom:0;
  -webkit-overflow-scrolling:touch;
}
.rev-scroll .rev{
  scroll-snap-align:start; scroll-snap-stop:always;
  border:2px solid var(--ink);
  padding:1.25rem 1.2rem;
  display:flex; flex-direction:column; gap:.7rem;
  height:100%;
  background:var(--paper-2); color:var(--ink-text);
}
.rev-scroll .rev .stars{
  flex:none;
  letter-spacing:.08em; color:var(--acc-deep);
}
.rev-scroll .rev blockquote.rev__quote,
.rev-scroll .rev > p:not(.stars, .rev__by){
  margin:0;
  flex:0 1 auto;
}
.rev-scroll .rev__quote p{ margin:0; }
.rev-scroll .rev .rev__by{
  flex:none;
  margin:auto 0 0;
  color:var(--ink-60);
}
.rev-scroll::-webkit-scrollbar{ height:6px; }
.rev-scroll::-webkit-scrollbar-thumb{ background:var(--ink-25); }

/* ---- Footer -------------------------------------------------------------- */

.foot{ background:var(--pack-black); color:#E6E2D8; padding:clamp(3.5rem,6vw,5.5rem) 0 2rem; }
.foot a{ text-decoration:none; color:inherit; }
.foot a:hover{ color:var(--acc-on-dark, var(--acc)); }
.foot__top{
  display:grid; gap:clamp(2rem,5vw,5rem);
  grid-template-columns:1.5fr 1fr 1fr;
  padding-bottom:3rem; border-bottom:1px solid #ffffff30;
}
.foot .foot__shop{
  display:inline-block;
  font-size:clamp(2.5rem,4.7vw,4.5rem);
  line-height:1.05; max-width:8ch;
  color:var(--acc-on-dark, var(--acc));
  transition:color var(--acc-fade);
}
.foot__shop span{
  display:inline-block;
  font-family:var(--body);
  font-size:.6em;
  font-style:normal;
  font-weight:700;
  vertical-align:middle;
}
.foot__mark{
  height: clamp(2.2rem, 5vw, 3.2rem);
  width: auto;
  display: block;
  margin: 0 0 1rem;
}
.foot__brandline{ margin:0 0 1.5rem; color:#8E8A80; }
.foot h3{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; margin:0 0 1.3rem; color:#a8aeac; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }

.warn{
  background:#FFFDF8; color:#101010;
  border:2px solid #FFFDF8;
  padding:1rem 1.15rem;
  font-family:var(--body); font-weight:800; text-transform:uppercase;
  font-size:.82rem; line-height:1.3; letter-spacing:.01em;
}
.foot__policies{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding-top:2rem;
}
.foot__policies .warn{ max-width:430px; margin:0; }
.foot__policies nav{
  display:flex; gap:1rem 1.5rem; flex-wrap:wrap;
  font-size:.8rem; color:#bfc3c0;
}
.foot__legal{
  display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center;
  padding-top:2rem; color:#a8aeac;
}
.foot__copy{ margin-left:auto; }

.foot--simple{ padding-top:clamp(2.75rem,5vw,4rem); }
.foot--simple .foot__simple-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.5rem 2.5rem; padding-bottom:2.25rem; border-bottom:1px solid #ffffff30;
}
.foot--simple .foot__home{ color:inherit; }
.foot--simple .foot__home:hover{ color:var(--acc-on-dark, var(--acc)); }
.foot--simple .foot__wordmark{
  font-size:clamp(2rem,4vw,2.75rem); line-height:1; color:var(--acc-on-dark, var(--acc));
}
.foot--simple .foot__brandline{
  margin:0; max-width:22ch; font-size:.95rem; line-height:1.45; color:#8E8A80;
}
.foot--simple .foot__shop--simple{
  font-size:clamp(1.75rem,3.5vw,2.65rem); max-width:10ch;
}
.foot--simple .foot__policies{ padding-top:1.75rem; }
.foot--simple .foot__legal{ padding-top:1.5rem; }

.badge18{
  width:2.4rem; height:2.4rem; border-radius:50%;
  border:2px solid #FFFDF8; color:#FFFDF8;
  display:grid; place-items:center; flex:none;
  font-family:var(--display); font-weight:800; font-size:.95rem;
}

.vye-b2-page{ padding:clamp(3.5rem,6vw,5.5rem) 0; }
.vye-b2-page__in{ max-width:42rem; }
.vye-b2-page h1{ font-size:clamp(3rem,7vw,5.5rem); line-height:.9; margin:0 0 1.5rem; }
.vye-b2-page__body{ font-size:1.05rem; line-height:1.65; color:var(--ink-60); }
.vye-b2-page__body p{ margin:0 0 1rem; }
.vye-b2-page__body a{ color:var(--ink-text); }

/* ---- Concept note (mockup only, not part of the design) ------------------ */

.concept-note{
  background:#101010; color:#8E8A80; padding:1.25rem 0; font-size:.8rem;
}
.concept-note .shell{ display:flex; gap:1rem; justify-content:space-between; flex-wrap:wrap; }
.concept-note strong{ color:#FFFDF8; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:860px){
  .rail{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:1080px){
  .numbers__in{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3){ border-left:0; }
  .stat:nth-child(n+3){ border-top:2px solid var(--ink); }
}

@media (max-width:860px){
  :root{ --shell: calc(100% - 2rem); }
  .hero__grid, .steps__grid{ grid-template-columns:1fr; }
  .steps__media{ min-height:0; aspect-ratio:3 / 2; width:100%; order:-1; }
  body.vye-b2-root .hero__media{ min-height:0; height:auto; width:100%; }
  .nav__links{ display:none; }
  .nav__toggle{ display:block; }
  .nav__drawer[data-open="true"]{
    display:block; border-top:1px solid var(--hairline);
  }
  .nav__drawer ul{
    list-style:none; margin:0; padding:1rem 0 1.5rem;
    display:grid; gap:1rem;
  }
  .nav__drawer a{ text-decoration:none; font-size:1.1rem; }
  .social__grid{ grid-template-columns:repeat(2,1fr); }
  .rev-scroll{ --cols: 2; }
  .rev-scroll-hint{ display:block; }
  /* Mosaic: single column on small screens — wide/tall desktop spans leave holes in 2-col. */
  .mosaic__grid{
    grid-template-columns:1fr;
    grid-auto-flow:row;
  }
  .mosaic__grid > .tile,
  .mosaic__grid > .tile.tile--wide,
  .mosaic__grid > .tile.tile--tall{
    grid-column:1 / -1;
    grid-row:auto;
    min-width:0;
  }
  .mosaic__grid > .tile:not(.tile--quote){
    aspect-ratio:4 / 5;
    max-height:none;
  }
  .mosaic__grid > .tile > img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .mosaic__grid > .tile--quote{
    min-height:0;
    aspect-ratio:auto;
    gap:1.25rem;
  }

  .trio{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  .rail{ grid-template-columns:repeat(2,1fr); }
  .packs{ grid-template-columns:1fr; }
  .numbers__in{ grid-template-columns:1fr; }
  .stat{ border-left:0; border-top:2px solid var(--ink); }
  .stat:first-child{ border-top:0; }
  .trio{ grid-template-columns:1fr; }
}

@media (max-width:680px){
  .foot__top{ grid-template-columns:1fr 1fr; gap:2.5rem 1.5rem; }
  .foot__invite{ grid-column:1 / -1; }
  .foot__shop{ max-width:none; }
  .foot__policies{ align-items:stretch; flex-direction:column; }
  .foot__policies .warn{ max-width:none; }
  .foot__legal{ gap:1rem; }
  .foot__copy{ margin-left:0; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0s !important; transition-duration:0s !important; }
  .steps__media img{ animation:none !important; opacity:0 !important; }
  .steps__media img:first-child{ opacity:1 !important; }
}


/* ---- PDP extras ---- */
.buy-actions{
  display:grid; grid-template-columns:1fr 1fr; gap:.85rem;
}

.buy-actions .btn{
  width:100%;
  justify-content:space-between;
}
.btn__meta{
  margin-left:auto;
  font-style:italic;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  opacity:.88;
}

.qty{
  display:flex; align-items:stretch; justify-content:space-between;
  max-width:11rem; height:2.6rem;
  border:2px solid var(--ink);
}

.qty__btn{
  width:2.6rem; border:0; background:transparent; color:inherit;
  cursor:pointer; padding:0;
  font-family:var(--display); font-weight:800; font-size:1.45rem; line-height:1;
}

.qty__btn:hover{ background:var(--ink); color:var(--paper-2); }

.qty__btn:disabled{ opacity:.35; cursor:not-allowed; }

.qty__n{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:1.35rem; min-width:1.6ch; line-height:1;
}

/* ---- Buy hero ------------------------------------------------------------ */
.pdp{
  padding:clamp(1.5rem,2.8vw,2.5rem) 0 clamp(3.5rem,6vw,5rem);
  border-bottom:2px solid var(--ink);
}

.pdp__grid{
  display:grid; gap:clamp(1.5rem,3vw,2.75rem);
  grid-template-columns:1.05fr .95fr; align-items:start;
}

.crumb{ display:flex; gap:.6rem; align-items:center; margin:0 0 1.15rem; color:var(--ink-60); }

.crumb a{ text-decoration:none; }

.crumb a:hover{ color:var(--acc); }

.gallery{ display:grid; gap:.75rem; }

.stage{
  position:relative; overflow:hidden; border-radius:2px;
  background:var(--pack-black); aspect-ratio:1;
}

.stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }

.thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem; }

.thumbs button{
  padding:0; border:2px solid transparent; background:var(--pack-black);
  cursor:pointer; overflow:hidden; aspect-ratio:1;
  transition:border-color var(--acc-fade);
}

.thumbs button[aria-pressed="true"]{ border-color:var(--acc); }

.thumbs img{ width:100%; height:100%; object-fit:cover; }

.buy{
  display:flex; flex-direction:column;
  gap:clamp(1.5rem, 2.8vw, 2rem);
}
.buy .lockup{
  --mist-size: clamp(3.4rem, 7.5vw, 5.6rem);
}
.buy .lockup__nicotine{
  font-size:clamp(1.15rem,2.4vw,1.85rem);
}

.buy__meta{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding-bottom:1rem; margin:0;
  border-bottom:2px solid var(--ink);
}

.reviews-link{ color:var(--ink-60); text-decoration:underline; text-underline-offset:3px; }

.lockup .reviews-link{ margin-top:.7rem; }

.price-row{ display:flex; align-items:baseline; gap:1rem; margin:0; }

.price{ font-family:var(--display); font-weight:800; font-style:italic; font-size:clamp(2.1rem,4.2vw,2.8rem); line-height:.9; margin:0; }

.price-note{ color:var(--ink-60); }

/* Horizon base.css also defines `.field { display:flex; width:100%; position:relative }`
   for its form fields. In the buy box that turns every label + control into one row and
   shrinks the bundle grid to content width. Mockup fields are plain block wrappers. */
.pdp .field{ display:block; width:auto; position:static; }

/* Mini versions of the homepage flavour tiles — square, not circles,
   and capped so they stay a picker rather than a second hero. */
.flav-pills{
  display:flex; flex-wrap:wrap; gap:.6rem;
}

/* Horizon base.css also owns a `.swatch` (variant picker): fixed height/width vars and
   `border-radius: var(--variant-picker-swatch-radius)`. Every box property below is set
   explicitly so the mockup square wins regardless of Horizon load order. */
.swatch{
  --c:var(--spearmint);
  display:block; flex:0 0 4.35rem;
  width:4.35rem; height:auto; min-height:0; max-height:none;
  padding:0; text-align:left; line-height:0;
  appearance:none; -webkit-appearance:none;
  border:2px solid var(--ink); border-radius:0; background:transparent;
  color:inherit; cursor:pointer; overflow:hidden;
  transition:transform .18s ease;
}

.swatch:hover{ transform:translateY(-2px); }

.swatch__face{
  background:var(--c); aspect-ratio:1; width:100%; border-radius:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:.28rem .32rem .22rem;
}

.swatch__name{
  font-family:var(--display); font-weight:800; font-style:italic;
  text-transform:uppercase; font-size:.72rem; line-height:.88;
  color:#101010;
}

.swatch[aria-pressed="true"]{ background:var(--ink); color:var(--paper-2); }

.trust{ margin:0; display:grid; gap:1rem; }

.trust__note{ margin:0; color:var(--ink-60); font-size:1rem; max-width:46ch; }

.trust__note strong{
  display:block; font-family:var(--display); font-weight:800; font-style:italic;
  text-transform:uppercase; font-size:1.15rem; margin-bottom:.25rem; color:var(--ink-text);
}

.trust__row{ display:flex; gap:1.25rem; flex-wrap:wrap; color:var(--ink-60); }

.accordion{ margin:.15rem 0 0; border-top:2px solid var(--ink); }

.acc{
  width:100%; text-align:left; cursor:pointer;
  background:none; border:0; border-bottom:1px solid var(--hairline);
  color:inherit; padding:1rem 0;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--display); font-weight:800; font-style:italic;
  text-transform:uppercase; font-size:1.4rem;
}

.acc span{ font-size:1.4rem; line-height:1; }

.acc-panel{ display:none; padding:0 0 1.1rem; color:var(--ink-60); max-width:46ch; }

.acc-panel[data-open="true"]{ display:block; }

.acc-panel--reviews{ max-width:none; }

.acc-panel--reviews .rev-sum{ margin-bottom:.35rem; }

.acc-panel--reviews .rev-sum__n{ font-size:clamp(2.2rem,5vw,3.2rem); }

.acc-panel--reviews a{ color:inherit; }

/* Time-to-feel chart, after the brand book's "Less is more" spread:
   big condensed names on the left, the time sitting inside each bar. */
.race{ display:grid; gap:.45rem; }

.race__row{
  display:grid; grid-template-columns:minmax(6.5rem,13rem) 1fr;
  column-gap:1rem; align-items:center;
}

.race__name{
  grid-column:1; grid-row:1; text-align:right;
  font-family:var(--display); font-weight:800; font-style:italic;
  text-transform:uppercase; font-size:clamp(1.35rem,2.6vw,2.4rem); line-height:1;
}

.race__bar{ grid-column:2; grid-row:1; height:clamp(1.9rem,3vw,2.5rem); }

.race__fill{ height:100%; min-width:6.5rem; max-width:100%; background:var(--stone); }

.race .race__time.mono-note{
  grid-column:2; grid-row:1; z-index:1; justify-self:start;
  padding-inline:.7rem;
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(.95rem,1.4vw,1.2rem); letter-spacing:.02em; line-height:1;
}

.race__row.is-us .race__fill{ background:var(--acc); transition:background-color var(--acc-fade); }

.race .race__row.is-us .race__time.mono-note{ color:var(--acc-on); transition:color var(--acc-fade); }

/* Speed band: the chart on a full-bleed flavour block. Rebinds the local
   tokens, like the pack rooms, so all type takes the on-fill colour. */
.speed{
  --ink:      var(--acc-on);
  --ink-text: var(--acc-on);
  --ink-60:   var(--acc-on);
  --acc-deep: var(--acc-on);
}
.speed .race__fill{ background:color-mix(in srgb, var(--acc-on) 20%, transparent); }
.speed .race__row.is-us .race__fill{ background:var(--acc-on); }
.speed .race .race__row.is-us .race__time.mono-note{ color:var(--acc); }
.speed .race-src{ font-size:.7rem; line-height:1.6; }
.speed .race-src a{ color:inherit; text-decoration:underline; text-underline-offset:.2em; }

/* Speed band layout: a compact band, intro on the left and the chart on the
   right, so it takes about half a desktop screen. */
.speed__in{
  display:grid; grid-template-columns:minmax(0,21rem) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem); align-items:start;
}
/* Spacing steps: label .75rem, title 1.25rem, intro 2rem, chart 1.75rem. The
   doubled class beats the page-wide heading and paragraph resets. */
.vye-b2.speed .speed__intro .label{ margin:0 0 .75rem; }
.vye-b2.speed .speed__intro h2{ font-size:clamp(2.4rem,5vw,4.25rem); line-height:.88; margin:0 0 1.25rem; }
.vye-b2.speed .speed__lede{ margin:0; max-width:34ch; font-size:.9rem; line-height:1.55; }
.vye-b2.speed .race-src{ margin:1.75rem 0 0; }
@media (max-width:860px){
  .speed__in{ grid-template-columns:1fr; gap:2rem; }
}

/* Scroll-driven race. "Less is more" and the speed band share one stage.
   With JS (and motion allowed) the stage pins the moment the band's bottom
   reaches the bottom of the screen, so the page stops while scrolling runs
   the clock: the 30-second bars land in a flick and gum takes a couple of
   scrolls. Then the page carries on. Without JS the bars are simply drawn. */
.speed-scene.is-scrub::after{ content:""; display:block; height:var(--speed-run,130svh); }
.speed-scene.is-scrub .speed-scene__stage{
  position:sticky; top:calc(100svh - var(--stage-h, 100svh));
  background:var(--paper);
}
.speed-scene.is-scrub .race__fill{
  transform:scaleX(var(--s,0)); transform-origin:left center; will-change:transform;
}
.speed-scene.is-scrub .race__time{ opacity:0; transition:opacity .25s ease; }
.speed-scene.is-scrub .race__row.is-done .race__time{ opacity:1; }
@media (max-width:860px){
  }

/* Once the mist bar lands, a light keeps sweeping across it, like a spray. */
.race__row.is-us .race__fill{ position:relative; }
.race__row.is-us .race__fill::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--acc) 55%, transparent) 50%, transparent 80%);
  background-size:250% 100%; background-repeat:no-repeat;
}
.race__row.is-us.is-done .race__fill::after{ animation:race-sweep 2.4s ease-in-out .2s infinite; }
@keyframes race-sweep{
  0%  { opacity:1; background-position:130% 0; }
  55% { opacity:1; background-position:-30% 0; }
  56%, 100% { opacity:0; background-position:-30% 0; }
}
@media (prefers-reduced-motion:reduce){
  .race__row.is-us.is-done .race__fill::after{ animation:none; }
}

.reviews{ background:var(--paper); }

.rev-sum{ display:flex; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; margin-bottom:clamp(1.75rem,3vw,2.25rem); }

.rev-sum__n{ font-family:var(--display); font-weight:800; font-style:italic; font-size:clamp(3.5rem,8vw,6rem); line-height:.8; }

.more{ display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; }

.more a{
  display:flex; flex-direction:column; text-decoration:none;
  border:2px solid var(--ink); overflow:hidden;
}

.more__swatch{ aspect-ratio:1; }

.more__name{ padding:.6rem .7rem; font-family:var(--display); font-weight:800; font-style:italic; text-transform:uppercase; font-size:1rem; }

.sticky-atc{
  display:none; position:sticky; bottom:0; z-index:50;
  background:var(--pack-black); color:#F2F5F4;
  border-top:2px solid #263234; padding:.75rem 0;
}

.sticky-atc .shell{ display:flex; align-items:center; gap:1rem; }

.sticky-atc .btn{ width:auto; margin-left:auto; }

.buy .btn, .buy-actions .btn { width:100%; }
.btn--ghost { width:auto; }
.pdp { padding:clamp(1.5rem,2.8vw,2.5rem) 0 clamp(3.5rem,6vw,5rem); border-bottom:2px solid var(--ink); }
@media (max-width:860px){
  .pdp__grid { grid-template-columns:1fr; }
  .sticky-atc { display:block; }
  .race__row { grid-template-columns:6.5rem 1fr; column-gap:.6rem; }
  .race__fill { min-width:4.4rem; }
  .race .race__time.mono-note { padding-inline:.45rem; }
}
@media (max-width:560px){
  .thumbs, .more { grid-template-columns:repeat(3,1fr); }
}

/* Shopify chrome */
.vye-b2-root .shopify-section-group-header-group,
.vye-b2-root .shopify-section-group-footer-group { margin:0; }
.concept-note { display:none !important; }
body.vye-b2-root .skip-to-content-link:not(:focus) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
body.vye-b2-root .shopify-section { margin: 0; }
.vye-b2-header.shopify-section { margin:0; }

button.pack {
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
}
body.vye-b2-root button.swatch {
  height: auto;
  min-height: 0;
  border-radius: 0;
}
a.btn[aria-disabled="true"] {
  pointer-events: none;
  background: var(--ink-25);
  border-color: var(--ink-25);
  color: var(--ink-60);
}
.shopify-section-group-header-group,
.shopify-section-group-footer-group {
  margin: 0;
}
.vye-b2-root #header-group {
  position: relative;
  z-index: 70;
}

/* Horizon cart drawer: hide the stock trigger, keep the slide-out panel. */
.vye-b2-cart-host {
  position: absolute;
  width: 0;
  height: 0;
  overflow: visible;
}
.vye-b2-cart-host .account-button,
.vye-b2-cart-host [data-testid="cart-drawer-trigger"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}
body.vye-b2-root cart-drawer-component .cart-drawer__dialog {
  z-index: 90;
  /* Original B2 paper: warm cream #F6F3EC / paper-2 #FFFDF8 — not pack-black. */
  --color-background: var(--paper);
  --color-foreground: var(--ink);
  --color-foreground-rgb: 16 16 16;
  --color-border: var(--hairline);
  --color-primary-button-background: var(--ink);
  --color-primary-button-text: var(--paper-2);
  --color-secondary-button-background: var(--paper-2);
  --color-secondary-button-text: var(--ink);
  background: var(--paper);
  color: var(--ink-text);
  border-left: 2px solid var(--ink);
}
html[data-base="cool"] body.vye-b2-root cart-drawer-component .cart-drawer__dialog {
  --color-foreground-rgb: 10 20 22;
}
body.vye-b2-root cart-drawer-component .cart-drawer__inner,
body.vye-b2-root cart-drawer-component .cart-drawer__content,
body.vye-b2-root cart-drawer-component .cart-drawer__summary {
  background: var(--paper);
  color: var(--ink-text);
}
body.vye-b2-root cart-drawer-component .cart-drawer__header {
  background: var(--paper-2);
  color: var(--ink-text);
  border-bottom: 2px solid var(--ink);
}
body.vye-b2-root cart-drawer-component .cart-drawer__heading {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Horizon paragraph margins load after this file; keep mockup stat rhythm. */
body.vye-b2-root .numbers .stat__v {
  margin: 88px 0;
}

/* Footer social row (shared with getvye.com) */
.foot__brand{ display:flex; flex-direction:column; align-items:flex-start; gap:1.1rem; }
.foot .foot__brand .foot__mark{ margin:0; }
.foot__invite .foot__social{ margin-top:1.5rem; }
.foot__social{ display:flex; flex-wrap:wrap; gap:.6rem; }
.foot .foot__social a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.75rem; height:2.75rem; padding:0 .75rem;
  border:1px solid #ffffff30; border-radius:999px; color:#E6E2D8;
  transition:color .2s ease, border-color .2s ease;
}
.foot .foot__social a:has(svg){ padding:0; width:2.75rem; }
.foot .foot__social a:hover,
.foot .foot__social a:focus-visible{ color:var(--acc); border-color:var(--acc); }
.foot__social-label{ font-size:.8rem; }

/* Footnote marks on the speed chart; the notes sit at the foot of the page. */
.race__mark{ font-size:.55em; margin-left:.12em; vertical-align:super; line-height:0; }
.page-notes{
  background:var(--paper); color:var(--ink-60);
  padding:clamp(1.75rem,3vw,2.5rem) 0; border-top:1px solid var(--hairline);
  font-size:.75rem; line-height:1.6;
}
.page-notes p{ margin:0 0 .35rem; max-width:110ch; }
.page-notes p:last-child{ margin-bottom:0; }
.page-notes a{ color:inherit; text-decoration:underline; text-underline-offset:.2em; }

/* Chart notes inside the footer: small, muted, between the policy links and
   the age line. */
.foot__notes{ padding-top:1.5rem; }
.foot__notes .page-notes{ background:none; border:0; padding:0; color:#8E8A80; font-size:.72rem; }

/* ---- Light motion: droplets, 30-second dial, photo parallax ---------------
   Everything rests in its finished state; the page script only adds the motion
   when the visitor allows it. */

/* Six droplets: one clipped copy of the graphic per droplet. */
.ingredients-scene__drops{ position:absolute; left:50%; top:0; width:min(88cqh, 100cqw); aspect-ratio:1; transform:translateX(-50%); pointer-events:none; }
.ingredients-scene__drops .drop{
  position:absolute; inset:0; background:var(--src) 0 0 / 100% 100% no-repeat;
  clip-path:circle(12% at var(--x) var(--y)); transform-origin:var(--x) var(--y);
  opacity:0;
}
.ingredients-scene.has-drops .ingredients-scene__graphic{ visibility:hidden; }
.ingredients-scene.has-drops .drop{
  transform:scale(.35); opacity:0;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  transition-delay:calc(var(--i) * 110ms);
}
.ingredients-scene.has-drops.is-in .drop{ transform:none; opacity:1; }

/* Dial: the arc runs 12 to 6 o'clock (30 s on a minute face). --p is the
   share of a full turn, .5 at rest; scrolling sweeps it from 0. */
.vye-b2 .usp-story__dial[data-vye-dial]::before{
  inset:8px; border:0; border-radius:50%; transform:none;
  background:conic-gradient(var(--acc) calc(var(--p, .5) * 1turn), transparent 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
}
.vye-b2 .usp-story__dial[data-vye-dial]::after{
  inset:0; width:auto; height:auto; border:0; background:
    radial-gradient(circle at 50% 5.2%, var(--ink) 0 5px, var(--paper) 5.5px 8.5px, transparent 9px);
  transform:rotate(calc(var(--p, .5) * 1turn));
}

/* Photo tile drifts gently inside its frame. */
.tile--parallax img{ transform:translate3d(0, var(--py, 0px), 0) scale(1.12); will-change:transform; }

/* Layered photo: each cut-out pack sits on a flat background and drifts at
   its own depth (--d, in % of the tile height). The square stage covers the
   tile like object-fit:cover with 8% to spare top and bottom, so packs cut by
   the photo edge (depth 7 or less) never show that edge. */
.tile--layers{ background:var(--bg); container-type:size; }
.tile--layers::before{ content:""; display:block; aspect-ratio:1; }
.tile__layers{
  position:absolute; left:50%; top:50%; aspect-ratio:1;
  width:116%; width:max(116cqw, 116cqh); transform:translate(-50%, -50%);
}
.tile.tile--layers img.tile__layer{
  position:absolute; left:var(--x); top:var(--y); width:var(--w); height:auto;
  object-fit:fill; transform:translate3d(0, calc(var(--pp, 0) * var(--d) * -1cqh), 0);
  will-change:transform;
}
/* Hero hand: slides in from the left edge on load, the lockup rises after
   it, and the hand sinks behind the ticker as you scroll away (--hy, set by
   script). */
.hero--motion{ overflow:hidden; }
.hero--motion .marquee{ position:relative; z-index:2; }
.hero--motion .hero__media{ animation:vye-hand-in 1.1s cubic-bezier(.2,.7,.2,1) both; }
.hero--motion .hero__copy{ animation:vye-rise .9s .25s cubic-bezier(.2,.7,.2,1) both; }
.hero--motion .hero__media img{ translate:0 var(--hy, 0px); }
@keyframes vye-hand-in{ from{ transform:translateX(-14%); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes vye-rise{ from{ transform:translateY(18px); opacity:0; } to{ transform:none; opacity:1; } }

/* Flavour cards rise in one after another; How it works steps arrive 1, 2,
   3. Hidden only once the script has armed them (is-armed), so without
   script or with reduced motion they simply show. */
.rail--rise.is-armed .flav,
.how--steps-in.is-armed .step,
.how--steps-in.is-armed .steps__close{
  opacity:0; transform:translateY(22px);
  transition:opacity .5s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.how--steps-in.is-armed .step,
.how--steps-in.is-armed .steps__close{ transform:translateX(-14px); }
.rail--rise.is-armed .flav:nth-child(2){ transition-delay:.08s; }
.rail--rise.is-armed .flav:nth-child(3){ transition-delay:.16s; }
.rail--rise.is-armed .flav:nth-child(4){ transition-delay:.24s; }
.how--steps-in.is-armed .step:nth-child(2){ transition-delay:.35s; }
.how--steps-in.is-armed .step:nth-child(3){ transition-delay:.7s; }
.how--steps-in.is-armed .steps__close{ transition-delay:1.05s; }
.rail--rise.is-armed.is-in .flav,
.how--steps-in.is-armed.is-in .step,
.how--steps-in.is-armed.is-in .steps__close{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .hero--motion .hero__media,
  .hero--motion .hero__copy{ animation:none; }
  .hero--motion .hero__media img{ translate:none; }
}


/* External-link arrow. An inline SVG, because iOS draws the ↗ character as a
   colour emoji (Korolev has no arrow glyph). */
.vye-arrow{ display:inline-block; width:.6em; height:.6em; margin-left:.3em; vertical-align:baseline; flex:none; overflow:visible; }
.btn .vye-arrow{ margin-left:0; }