/* Biofitea Website — DTC homepage (Goli × Goodies blend, brand palette). Requires colors_and_type.css */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bf-cream);color:var(--bf-text);font:var(--bf-body)}
img{display:block;max-width:100%}
a{color:var(--bf-orange-text);text-decoration:none}
a:hover{color:var(--bf-orange-text);text-decoration:underline}
:focus-visible{outline:2px solid var(--bf-ink);outline-offset:2px}
.kol :focus-visible,.foot :focus-visible,.strip :focus-visible,.nav__cta:focus-visible{outline-color:var(--bf-cream)}
/* Skip link: off-screen until focused, then parks under the announce bar */
.skip{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--bf-ink);color:var(--bf-cream);padding:10px 14px;border-radius:var(--bf-radius-pill);font:700 13px/1 var(--bf-font-display)}
.skip:focus{top:12px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.eyebrow{font:var(--bf-eyebrow);letter-spacing:var(--bf-track-eyebrow);text-transform:uppercase;color:var(--bf-orange-text);display:inline-block}
.rule{width:44px;height:4px;background:var(--bf-orange);border:0;margin:14px 0 0}
h1,h2,h3{color:var(--bf-heading);letter-spacing:var(--bf-track-display)}
h1{font:var(--bf-display-2)}
h2{font:var(--bf-h1)}
h3{font:var(--bf-h3)}
.sec{padding:96px 0}
.sec-head{max-width:640px;margin-bottom:48px}
.sec-head p{font:var(--bf-body-lg);color:var(--bf-text-muted);margin-top:16px}
.sec-head--row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.sec-head--row>div:first-child{max-width:640px}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font:700 15px/1 var(--bf-font-display);padding:16px 28px;border-radius:var(--bf-radius-pill);transition:all var(--bf-dur) var(--bf-ease);cursor:pointer}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:scale(0.98)}
.btn--orange{background:var(--bf-orange);color:var(--bf-teal-700)}
.btn--orange:hover{background:var(--bf-orange-700);color:var(--bf-teal-700)}
.btn--cream{background:var(--bf-cream);color:var(--bf-ink)}
.btn--cream:hover{background:var(--bf-white);color:var(--bf-ink)}
.btn--ghost{border:1.5px solid var(--bf-border-dark);color:var(--bf-cream)}
.btn--ghost:hover{border-color:var(--bf-cream);color:var(--bf-white)}
/* shop pills (Shopee/Lazada/TikTok) */
.shops{display:flex;gap:10px;flex-wrap:wrap}
/* Buy targets share one feel: a 1px lift on hover and a quick squash on press.
   Transform runs faster than the colour swap so the press reads as a tap. */
.shop-pill{display:inline-flex;align-items:center;font:700 13px/1 var(--bf-font-display);letter-spacing:0.04em;padding:11px 18px;border-radius:var(--bf-radius-pill);border:1.5px solid var(--bf-border);color:var(--bf-ink);background:var(--bf-white);transition:transform 120ms var(--bf-ease),background-color var(--bf-dur) var(--bf-ease),border-color var(--bf-dur) var(--bf-ease),color var(--bf-dur) var(--bf-ease)}
.shop-pill:hover{background:var(--bf-ink);border-color:var(--bf-ink);color:var(--bf-cream);text-decoration:none;transform:translateY(-1px)}
.shop-pill:active{transform:scale(.96)}
/* Platform glyph inside a buy pill (injected by JS) */
.pill-ico{width:14px;height:14px;flex:none;margin-right:6px;opacity:.85}
.shops--dark .shop-pill{background:transparent;border-color:var(--bf-border-dark);color:var(--bf-cream)}
.shops--dark .shop-pill:hover{background:var(--bf-cream);border-color:var(--bf-cream);color:var(--bf-teal)}
/* announcement + nav */
.announce{background:var(--bf-orange);color:var(--bf-teal-700);font:700 12px/1 var(--bf-font-display);letter-spacing:0.12em;text-transform:uppercase;text-align:center;padding:10px 16px}
.nav{position:sticky;top:0;z-index:50;background:rgba(246,244,223,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--bf-border)}
.nav__inner{max-width:1180px;margin:0 auto;padding:14px 28px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.nav__links{display:flex;gap:26px}
.nav__links a,.nav__right a{font:700 13px/1 var(--bf-font-display);letter-spacing:0.06em;color:var(--bf-ink)}
.nav__links a:hover,.nav__right a:hover{color:var(--bf-orange);text-decoration:none}
.nav__logo img{height:34px;width:auto}
.nav__right{display:flex;gap:22px;justify-content:flex-end;align-items:center}
.nav__cta{background:var(--bf-orange);color:var(--bf-teal-700) !important;padding:11px 20px;border-radius:var(--bf-radius-pill);display:inline-flex;align-items:center;gap:8px}
.nav__cta-icon{display:none;flex:none}
.nav__cta:hover{background:var(--bf-orange-700)}
/* Read-progress hairline riding the header's bottom border (sticky = containing block) */
.nav__progress{position:absolute;left:0;bottom:-1px;height:3px;width:0;background:var(--bf-orange);transition:width 80ms linear}
/* hamburger — hidden until 960px */
.nav__burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:-10px;padding:0 10px;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nav__burger span{display:block;height:2px;width:22px;background:var(--bf-ink);border-radius:2px;transition:transform var(--bf-dur) var(--bf-ease),opacity var(--bf-dur) var(--bf-ease)}
.nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* slide-down mobile panel */
.nav__panel{display:none;border-top:1px solid var(--bf-border);background:var(--bf-cream);padding:8px 20px 24px;max-height:calc(100dvh - 120px);overflow-y:auto;box-shadow:var(--bf-shadow)}
.nav__panel-links{display:flex;flex-direction:column}
.nav__panel-links a{font:800 17px/1 var(--bf-font-display);color:var(--bf-ink);padding:16px 0;border-bottom:1px solid var(--bf-border)}
.nav__panel-links a:hover{color:var(--bf-orange);text-decoration:none}
.nav__panel small{display:block;font:700 11px/1 var(--bf-font-display);letter-spacing:0.16em;text-transform:uppercase;color:var(--bf-text-muted);margin:22px 0 12px}
/* hero carousel */
.hero{background:var(--bf-teal);color:var(--bf-cream);overflow:hidden;position:relative}
/* Every slide occupies the same grid cell, so the hero is always as tall as the
   tallest slide and the page never jumps as the carousel rotates. */
.hero__slides{display:grid}
.hslide{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity 420ms var(--bf-ease),visibility 0s linear 420ms}
.hslide.is-on{visibility:visible;opacity:1;z-index:1;transition:opacity 420ms var(--bf-ease),visibility 0s}
.hslide>.hero__grid,.hslide--full .hslide__overlay{height:100%}
.hero__grid{max-width:1180px;margin:0 auto;padding:72px 28px 0;display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;min-height:620px}
.hero h1,.hero .hslide__title{color:var(--bf-cream);margin:18px 0 22px}
.hero h1 em,.hero .hslide__title em{font-style:normal;color:var(--bf-yellow)}
/* Slides 2-3 are <p>, not <h1> (one h1 per page) — mirror the h1 typography */
.hslide__title{font:var(--bf-display-2);color:var(--bf-heading);letter-spacing:var(--bf-track-display);margin:18px 0 22px}
.hero__sub{font:var(--bf-body-lg);color:rgba(246,244,223,0.85);max-width:46ch;margin-bottom:30px}
.hero__proof{display:flex;align-items:center;gap:12px;margin-bottom:34px;font:700 14px/1 var(--bf-font-display)}
.stars{color:var(--bf-yellow);letter-spacing:2px;font-size:16px}
.hero__buy{margin-bottom:64px}
.hero__buy small{display:block;font:700 11px/1 var(--bf-font-display);letter-spacing:0.16em;text-transform:uppercase;color:rgba(246,244,223,0.6);margin-bottom:12px}
.hero__media{position:relative;align-self:end}
.hero__aura{position:absolute;inset:-12% -18% -10%;background:radial-gradient(60% 55% at 50% 45%, rgba(245,135,11,0.55), rgba(255,212,0,0.25) 55%, transparent 75%);filter:blur(6px)}
.hero__photo{position:relative;border-radius:var(--bf-radius-lg) var(--bf-radius-lg) 0 0;overflow:hidden;box-shadow:var(--bf-shadow-lg)}
.hero__photo img{width:100%;height:520px;object-fit:cover;object-position:50% 18%}
.hero__photo--product{border-radius:var(--bf-radius-lg);margin-bottom:56px}
.hero__photo--product img{height:440px;object-position:50% 50%}
/* 1080x1080 source — pin the frame to 1:1 so the photo can never crop portrait */
.hero__photo--square{border-radius:var(--bf-radius-lg);margin-bottom:56px}
.hero__photo.hero__photo--square img{height:auto;aspect-ratio:1;object-position:50% 42%}
.hero__badge{position:absolute;left:24px;bottom:24px;background:var(--bf-cream);color:var(--bf-ink);border-radius:var(--bf-radius);padding:12px 16px;font:700 13px/1.4 var(--bf-font-display);box-shadow:var(--bf-shadow)}
.hero__badge span{display:block;font:400 12px/1.4 var(--bf-font-body);color:var(--bf-text-muted)}
/* The tea loop fills the same 1:1 frame as the still it replaced. The .hero__photo img
   height overrides in the media queries below only match <img>, so the video needs no
   breakpoint of its own — aspect-ratio holds the frame at every width. */
.hero__photo--square .hero__loop{width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 45%;display:block}
.hero__watch{position:absolute;right:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:var(--bf-radius-pill);background:rgba(20,56,56,0.78);color:var(--bf-cream);font:700 13px/1 var(--bf-font-display);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color var(--bf-dur) var(--bf-ease),transform 120ms var(--bf-ease)}
.hero__watch:hover{background:rgba(20,56,56,0.92)}
.hero__watch:active{transform:scale(0.98)}
.hero__watch svg{flex:none}
/* Yellow section: the ghost button needs the dark-green ink, not cream. */
.btn--tvc{color:#014634;border-color:#014634;background:transparent;margin:6px 0 10px}
.btn--tvc:hover{color:#014634;border-color:#014634;background:rgba(1,70,52,0.08)}
/* ── TVC lightbox ─────────────────────────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 200ms var(--bf-ease)}
/* A class beats the UA's [hidden] rule, so display:none has to be restated here —
   without it the closed dialog stays laid out over the page and eats every click. */
.lb[hidden]{display:none}
.lb.is-open{opacity:1;pointer-events:auto}
.lb__backdrop{position:absolute;inset:0;background:rgba(10,30,30,0.82)}
.lb__panel{position:relative;max-width:92vw}
/* The 92vw cap has to feed the height too, or a narrow phone clamps the width and
   letterboxes the 9:16 master inside a taller black box. */
.lb__video{display:block;height:min(86vh,calc(92vw * 16 / 9),1280px);width:auto;max-width:92vw;aspect-ratio:9/16;border-radius:var(--bf-radius-lg);background:#000}
.lb__close{position:absolute;top:-10px;right:-10px;width:44px;height:44px;border-radius:50%;background:var(--bf-teal);color:var(--bf-cream);font:400 26px/1 var(--bf-font-body);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--bf-shadow)}
.lb__close:hover{background:var(--bf-teal-700);color:var(--bf-white)}
/* full-frame video slide */
.hslide--full{position:relative;min-height:620px}
.hslide__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hslide__fallback{z-index:0}
video.hslide__video{z-index:1;background:transparent}
.hslide__scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(96deg,rgba(20,56,56,0.92) 0%,rgba(20,56,56,0.72) 38%,rgba(20,56,56,0.28) 68%,rgba(20,56,56,0.16) 100%)}
.hslide__overlay{position:relative;z-index:3;max-width:1180px;margin:0 auto;padding:96px 28px;min-height:620px;display:flex;flex-direction:column;justify-content:center}
.hslide__overlay .hero__buy{margin-bottom:0}
.hslide__overlay h1,.hslide__overlay p{max-width:20ch}
.hslide__overlay p{max-width:46ch}
/* light-backdrop slides — a full-bleed brand gradient replaces the dark hero
   ground for one slide, so type, stars and pills all flip to dark-on-light.
   Scoped to the slide so the video slide keeps the dark treatment. */
.hslide--light{background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
.hslide--omni{background-image:url(assets/lifestyle/gradient-omni.jpg)}
.hslide--pause{background-image:url(assets/lifestyle/gradient-yellow.jpg)}
.hslide--light .hero__aura{display:none}
.hslide--light .hero__sub,.hslide--light .hero__proof{color:#014634}
.hslide--light .stars{color:var(--bf-orange-text)}
.hslide--light .hero__buy small{color:#014634}
.hslide--light .shops--dark .shop-pill{background:var(--bf-white);border-color:var(--bf-border);color:var(--bf-ink)}
.hslide--light .shops--dark .shop-pill:hover{background:var(--bf-ink);border-color:var(--bf-ink);color:var(--bf-cream)}
/* Slides 2-3 set their headline as .hslide__title (a <p>), so every rule below
   has to name it as well as h1 or it never lands and the title stays cream. */
.hslide--omni h1,.hslide--omni .hslide__title{color:#014634}
/* "free carabiner." keeps the carabiner's own yellow, but that yellow has almost
   no contrast on the gradient — a dark-green outline carries the legibility. */
.hslide--omni h1 em,.hslide--omni .hslide__title em{color:var(--bf-yellow);white-space:nowrap;
 text-shadow:2px 0 0 #014634,-2px 0 0 #014634,0 2px 0 #014634,0 -2px 0 #014634,
 2px 2px 0 #014634,-2px 2px 0 #014634,2px -2px 0 #014634,-2px -2px 0 #014634,
 0 10px 26px rgba(1,70,52,0.22)}
.hslide--pause h1,.hslide--pause .hslide__title{color:#000000}
/* "muna." keeps the vivid brand orange; same dark-green outline does the work. */
.hslide--pause h1 em,.hslide--pause .hslide__title em{color:#f7860b;
 text-shadow:2px 0 0 #014634,-2px 0 0 #014634,0 2px 0 #014634,0 -2px 0 #014634,
 2px 2px 0 #014634,-2px 2px 0 #014634,2px -2px 0 #014634,-2px -2px 0 #014634,
 0 10px 26px rgba(1,70,52,0.22)}
/* Arrows and dots live on .hero, not on a slide, so JS flags which backdrop is
   showing and they flip with it — cream controls vanish on the light gradients. */
.hero.is-light .hero__arrow{background:rgba(255,255,255,0.75);border-color:rgba(1,70,52,0.2);color:#014634}
.hero.is-light .hero__arrow:hover{background:#014634;border-color:#014634;color:var(--bf-white)}
.hero.is-light .hero__dots button{background:rgba(1,70,52,0.28)}
.hero.is-light .hero__dots button.is-on{background:#014634}
/* carousel controls */
.hero__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--bf-border-dark);background:rgba(20,56,56,0.45);color:var(--bf-cream);font:400 26px/1 var(--bf-font-display);cursor:pointer;backdrop-filter:blur(6px);transition:all var(--bf-dur) var(--bf-ease)}
.hero__arrow:hover{background:var(--bf-cream);color:var(--bf-teal);border-color:var(--bf-cream)}
.hero__arrow--prev{left:20px}
.hero__arrow--next{right:20px}
.hero__dots{position:absolute;left:0;right:0;bottom:22px;z-index:6;display:flex;gap:9px;justify-content:center}
.hero__dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;background:rgba(246,244,223,0.4);transition:all var(--bf-dur) var(--bf-ease)}
.hero__dots button.is-on{background:var(--bf-yellow);width:26px;border-radius:var(--bf-radius-pill)}
/* electrolytes — banner + baked-in ingredients art + store strip */
/* Doubled class so the phone override of .sec's padding can't reopen a gap
   above the full-bleed banner. */
.sec.elec{padding:0;background:var(--bf-white)}
.elec__hero{position:relative;background:url(assets/lifestyle/electro-hero-desktop.jpg) 50% 50%/cover no-repeat}
/* The tube sits right of centre; this scrim only warms the left third so the
   white headline holds up where the gradient turns pale yellow. */
.elec__hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(120,45,0,0.30) 0%,rgba(120,45,0,0.10) 42%,transparent 62%)}
.elec__hero-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:72px 28px;min-height:clamp(520px,72vh,700px);display:flex;flex-direction:column;justify-content:center}
.elec__hero h2{color:var(--bf-white);max-width:17ch;text-shadow:0 2px 14px rgba(90,35,0,0.45)}
.elec__sub{font:var(--bf-body-lg);color:var(--bf-white);max-width:46ch;margin-top:18px;text-shadow:0 1px 10px rgba(90,35,0,0.45)}
/* The hand starts at the horizontal midpoint of the banner art, and `cover`
   crops symmetrically, so its left edge lands at ~50vw at every width. Capping
   the steps at 47vw (less the leading gutter) keeps step 3 off it, always. */
.elec__steps{list-style:none;padding:0;margin:36px 0 0;max-width:min(480px,calc(47vw - 28px));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.elec__steps li{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.elec__steps .num{flex:none;width:40px;height:40px;border-radius:50%;background:#014634;color:var(--bf-white);font:800 16px/40px var(--bf-font-display);text-align:center}
.elec__steps h3{font:800 18px/1.2 var(--bf-font-display);color:#014634;margin-bottom:5px}
.elec__steps p{font:var(--bf-body-sm);color:#161616}
/* The <picture> art-directs between a 1200x1500 mobile crop and a 3200x1000 desktop
   banner, so the <img>'s width/height attributes can only describe the mobile one.
   height:auto keeps the height attribute from being taken literally, and the desktop
   ratio is pinned here so the wide banner reserves the right box before it loads. */
.elec__ingr{position:relative}
.elec__ingr img{width:100%;height:auto;display:block}
@media (min-width:700px){.elec__ingr img{aspect-ratio:3200/856}}
/* The "Ingredients" band was baked into the old art and got cropped out of both
   banners; it's real text now, overlaid on the orange top-left corner of the banner
   (a white strip above the art read as dead space). The figure is full-bleed, so the
   padding tracks the .wrap column and the label lines up with the rest of the page. */
.elec__ingr-label{position:absolute;top:0;left:0;z-index:2;background:none;color:#014634;padding:22px 28px;padding-left:max(28px,calc((100% - 1180px)/2 + 28px));font:800 20px/1 var(--bf-font-display);letter-spacing:-0.01em;text-shadow:0 1px 0 rgba(255,255,255,0.35)}
/* The five ingredient balls are baked into the banner JPEGs, so the life is added on
   top: one .orb per ball holding a coloured inner light (::before) that drifts around
   inside the ball and a small white specular sheen (::after) that oscillates across
   its upper half. The client asked for no halo outside the printed ball, so .orb is
   the clip: overflow:hidden + border-radius:50%, scaled in a touch so no blur leaks
   past the outline. --x/--y are percentages of the art box and --d a percentage of
   its width, measured off each crop (the crops lay the balls out differently). */
.elec__art{position:relative;overflow:hidden;isolation:isolate}
/* Desktop: the art is capped at 1320px and centred inside a taller band. The band's gradient is sampled from the art's own top row (11 stops) and sized to the art width so the top/bottom seams vanish; the flat left/right fills are the art's edge colours. The label lives in the band above the balls. */
@media (min-width:1200px){.elec__art{max-width:1320px;margin:0 auto}.elec__ingr{padding:78px 0 46px;background:linear-gradient(90deg,#FFF003 0%,#FFEB03 10%,#FFE403 20%,#FFDC02 30%,#FFD302 40%,#FFCA02 50%,#FFC001 60%,#FFB602 70%,#FFAB01 80%,#FFA002 90%,#FF9601 100%) center top/1320px 100% no-repeat,linear-gradient(90deg,#FEF203 50%,#FF9101 50%)}.elec__ingr-label{padding-top:30px;font-size:22px}.elec__art{-webkit-mask:linear-gradient(#0000,#000 56px,#000 calc(100% - 56px),#0000);mask:linear-gradient(#0000,#000 56px,#000 calc(100% - 56px),#0000)}.elec__art picture{display:block;-webkit-mask:linear-gradient(90deg,#0000,#000 90px,#000 calc(100% - 90px),#0000);mask:linear-gradient(90deg,#0000,#000 90px,#000 calc(100% - 90px),#0000)}}
/* --o0/--o1 are the inner light's drift floor and ceiling, --os the still
   (reduced-motion) value. The screen blend lives on .orb, not on the pseudo-elements:
   .orb already makes a stacking context (transform), so a blend mode set inside it
   would be isolated from the banner and just paint flat colour over the printed
   labels. On .orb it screens against the artwork, which leaves white type white.
   Green is the only ball whose colour really contrasts with the warm banner, so it
   reads louder than the rest — it gets its own, lower set. */
.orb{position:absolute;left:var(--x);top:var(--y);width:var(--d);aspect-ratio:1;transform:translate(-50%,-50%) scale(.94);overflow:hidden;border-radius:50%;mix-blend-mode:screen;pointer-events:none;--o0:.34;--o1:.6;--os:.46}
.orb::before{content:"";position:absolute;inset:-40%;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0.22) 0%,var(--c) 22%,rgba(255,255,255,0) 70%);background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0.22) 0%,color-mix(in srgb,var(--c) 88%,white) 22%,color-mix(in srgb,var(--c) 45%,transparent) 48%,transparent 70%);filter:blur(8px);opacity:var(--os);animation:orbDrift 6.5s ease-in-out infinite alternate;animation-delay:var(--t)}
.orb::after{content:"";position:absolute;left:50%;top:50%;width:24%;height:13%;margin:-38.5% 0 0 -12%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,0.9),rgba(255,255,255,0.32) 45%,rgba(255,255,255,0) 72%);filter:blur(2px);opacity:.6;transform-origin:50% 296%;animation:orbSheen 7s ease-in-out infinite;animation-delay:var(--t)}
@keyframes orbDrift{0%{transform:translate(-18%,-14%);opacity:var(--o0)}33%{transform:translate(16%,-6%);opacity:var(--o1)}66%{transform:translate(8%,18%);opacity:var(--o0)}100%{transform:translate(-12%,10%);opacity:var(--o1)}}
@keyframes orbSheen{0%,100%{transform:rotate(-40deg)}50%{transform:rotate(40deg)}}
.orb-1{--c:#FFE24A;--t:0s}
.orb-2{--c:#3BC24A;--t:-0.6s;--o0:.26;--o1:.56;--os:.38}
.orb-3{--c:#F5A11B;--t:-1.2s}
.orb-4{--c:#E8323C;--t:-1.8s}
.orb-5{--c:#D5DE2A;--t:-2.4s}
/* Desktop crop (3200x856): one row of five, all on the same baseline. */
@media (min-width:700px){
.orb{--d:13.5%;--y:36.2%}
.orb-1{--x:15.4%}.orb-2{--x:33.2%}.orb-3{--x:50.8%}.orb-4{--x:67.4%}.orb-5{--x:84.1%}
}
/* Mobile crop (1200x1448): 3 on top, 2 below. */
@media (max-width:699px){
.orb{--d:23.9%}
.orb-1{--x:18.7%;--y:31.2%}.orb-2{--x:50.6%;--y:31.2%}.orb-3{--x:81.8%;--y:31.2%}
.orb-4{--x:36.0%;--y:62.6%}.orb-5{--x:65.7%;--y:62.6%}
/* Mobile balls are physically smaller, so the inner light wants a tighter blur. */
.orb::before{filter:blur(6px)}
}
/* Ignition: the five lights fade up in sequence the first time the banner is seen
   (.lit comes from an observer). This is the orb group's own opacity, so the inner
   light keeps its --os/--o0/--o1 values untouched — the two don't fight. */
.elec__art .orb{opacity:0;transition:opacity 700ms var(--bf-ease)}
.elec__art .orb-2{transition-delay:.15s}
.elec__art .orb-3{transition-delay:.3s}
.elec__art .orb-4{transition-delay:.45s}
.elec__art .orb-5{transition-delay:.6s}
.elec__art.lit .orb{opacity:1}
/* No motion: the light sits centred at the mid opacity instead of drifting. */
@media (prefers-reduced-motion:reduce){.orb::before,.orb::after{animation:none}.orb::before{transform:none;opacity:var(--os)}
.elec__art .orb{opacity:1;transition:none}}
.elec__stores{border-top:1px solid var(--bf-border);border-bottom:1px solid var(--bf-border);padding:44px 0}
/* marquee */
.strip{background:var(--bf-teal-700);color:var(--bf-cream);overflow:hidden;padding:14px 0;border-top:1px solid var(--bf-border-dark)}
.strip__track{display:flex;gap:0;white-space:nowrap;width:max-content;animation:marquee 28s linear infinite}
.strip__track span{font:700 13px/1 var(--bf-font-display);letter-spacing:0.14em;text-transform:uppercase}
.strip__track b{color:var(--bf-orange);font-weight:700;margin-right:48px}
@keyframes marquee{to{transform:translateX(-50%)}}
/* product carousel */
/* Carousel arrows ride the left/right edges of the card row itself.
   --rail-edge matches the row's own gutter so each arrow straddles the first
   and last card rather than floating out in the page margin. */
.carousel{position:relative}
.carousel{--rail-edge:max(28px,calc((100vw - 1180px)/2 + 28px))}
.rail{position:absolute;z-index:5;top:var(--rail-top,50%);transform:translateY(-50%);
 width:44px;height:44px;border-radius:50%;border:1.5px solid var(--bf-border);
 background:var(--bf-white);color:var(--bf-ink);font:400 24px/1 var(--bf-font-display);
 cursor:pointer;box-shadow:var(--bf-shadow);transition:all var(--bf-dur) var(--bf-ease)}
.rail:hover{background:var(--bf-ink);color:var(--bf-cream);border-color:var(--bf-ink)}
.rail:active{transform:translateY(-50%) scale(0.94)}
.rail[hidden]{display:none}
.rail--prev{left:calc(var(--rail-edge) - 22px)}
/* The row is left-aligned and runs off the right edge, so `next` hugs the visible
   right edge (over the last card in view) rather than the content-column inset. */
.rail--next{right:6px}
.rail--dark{background:var(--bf-teal-700);border-color:var(--bf-border-dark);color:var(--bf-cream)}
.rail--dark:hover{background:var(--bf-cream);color:var(--bf-teal);border-color:var(--bf-cream)}
/* scroll-padding must mirror the row's leading gutter, otherwise the first card's
   snap point sits past max-scroll and mandatory snapping pins the row to its end. */
.shelf__scroller,.kol__scroller{scroll-padding-left:28px}
.shelf__scroller{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}
.shelf__scroller::-webkit-scrollbar{display:none}
/* Gutters MUST be symmetric. `margin-inline:auto` centres the row's whole border
   box, padding included, so a wide viewport-derived left gutter shoved the cards
   right of centre and inflated the row until it stopped fitting — the row then
   read as neither centred nor scrollable. Equal 28px gutters mean auto margins
   centre the cards exactly when they fit, and collapse to 0 (start-aligned, fully
   scrollable) the moment they don't. */
.shelf{display:flex;gap:20px;width:max-content;margin-inline:auto;padding-inline:28px}
/* While dragging, mandatory snapping fights the pointer — release it until drop. */
.can-scroll{cursor:grab}
.is-dragging{scroll-snap-type:none !important;scroll-behavior:auto !important;cursor:grabbing}
.is-dragging *{pointer-events:none}
.card{background:var(--bf-white);border-radius:var(--bf-radius-lg);overflow:hidden;box-shadow:var(--bf-shadow-sm);transition:transform var(--bf-dur) var(--bf-ease),box-shadow var(--bf-dur) var(--bf-ease);display:flex;flex-direction:column;width:284px;flex:none;scroll-snap-align:start}
.card:hover{transform:translateY(-2px);box-shadow:var(--bf-shadow-lg)}
.card__img{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.card__img img{width:100%;height:100%;object-fit:cover}
/* The whole packshot links to the product page. The benefits panel sits on top
   of it, so it lets clicks through; only the touch-only "Details" link inside
   takes pointer events back. */
.card__imglink{display:block;width:100%;height:100%}
.card__flag{position:absolute;top:14px;left:14px;z-index:2;background:var(--bf-ink);color:var(--bf-cream);font:700 11px/1 var(--bf-font-display);letter-spacing:0.1em;text-transform:uppercase;padding:8px 12px;border-radius:var(--bf-radius-pill)}
.card__flag--promo{background:var(--bf-orange);color:var(--bf-teal-700)}
/* second layer: benefits on hover */
.card__back{pointer-events:none;position:absolute;inset:0;background:var(--bf-teal);color:var(--bf-cream);padding:26px 24px;display:flex;flex-direction:column;justify-content:center;gap:14px;opacity:0;transition:opacity var(--bf-dur) var(--bf-ease)}
.card:hover .card__back,.card:focus-within .card__back,.card__img.show-back .card__back{opacity:1}
.card__back span{font:700 11px/1 var(--bf-font-display);letter-spacing:0.14em;text-transform:uppercase;color:var(--bf-yellow)}
.card__back ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.card__back li{font:var(--bf-body-sm);color:rgba(246,244,223,0.92);padding-left:18px;position:relative;line-height:1.4}
.card__back li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--bf-orange)}
.card__body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card__tag{font:700 11px/1 var(--bf-font-display);letter-spacing:0.14em;text-transform:uppercase;color:var(--bf-orange-text)}
.card__body h3{font:800 20px/1.15 var(--bf-font-display);min-height:2.3em}
.card__body h3 a{color:inherit}
.card__body h3 a:hover{color:inherit;text-decoration:underline}
/* Touch has no hover, so the flipped panel carries its own way through to the
   product page — the image link underneath is swallowed by the tap-to-flip. */
.card__more{display:none;pointer-events:auto;align-self:flex-start;font:700 12px/1 var(--bf-font-display);letter-spacing:0.06em;color:var(--bf-yellow);padding:10px 0 2px}
.card__more:hover{color:var(--bf-yellow)}
@media (hover:none){.card__more{display:inline-block}}
.card__body p{font:var(--bf-body-sm);flex:1}
.card__rate{font:700 12px/1 var(--bf-font-display);color:var(--bf-ink);display:flex;align-items:center;gap:8px}
.card__rate .stars{font-size:13px;color:var(--bf-orange)}
.card__buy{display:flex;gap:6px;flex-wrap:wrap;padding-top:4px;border-top:1px solid var(--bf-border);margin-top:2px}
.card__buy span{font:700 10px/1 var(--bf-font-display);letter-spacing:0.12em;text-transform:uppercase;color:var(--bf-text-muted);width:100%;padding:8px 0 2px}
.card__buy a{display:inline-flex;align-items:center;font:700 12px/1 var(--bf-font-display);padding:8px 13px;border-radius:var(--bf-radius-pill);border:1px solid var(--bf-border);color:var(--bf-ink);transition:transform 120ms var(--bf-ease),background-color var(--bf-dur) var(--bf-ease),border-color var(--bf-dur) var(--bf-ease),color var(--bf-dur) var(--bf-ease)}
.card__buy a:hover{background:var(--bf-ink);color:var(--bf-cream);border-color:var(--bf-ink);text-decoration:none;transform:translateY(-1px)}
.card__buy a:active{transform:scale(.96)}
/* benefits */
.bene{background:var(--bf-white)}
.bene__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.bene__tile{background:var(--bf-cream);border-radius:var(--bf-radius-lg);padding:28px 26px}
.bene__tile .num{width:40px;height:40px;border-radius:50%;background:var(--bf-orange);color:var(--bf-ink);font:800 16px/40px var(--bf-font-display);text-align:center;margin-bottom:18px}
.bene__tile h3{font:800 18px/1.2 var(--bf-font-display);margin-bottom:8px}
.bene__tile p{font:var(--bf-body-sm)}
/* merged ritual + ingredients (yellow gradient) */
/* Sampled off the feedback deck's peg (p5): horizontal and symmetric — darker at
   both edges, brightest through the middle. Flat vertically, so no vertical axis. */
.merged{background:linear-gradient(90deg,#F6DC4D 0%,#F8E97A 25%,#FAF391 50%,#F9EE85 75%,#F6E261 100%)}
.merged h2{color:var(--bf-orange-text)}
.merged .eyebrow{color:var(--bf-orange-text)}
.merged .sec-head p{color:rgba(1,70,52,0.82)}
.ritual__grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:64px;align-items:center}
.ritual__photo{border-radius:var(--bf-radius-lg);overflow:hidden;box-shadow:var(--bf-shadow-lg);position:relative}
.ritual__photo img{width:100%;height:560px;object-fit:cover}
.step{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid rgba(1,70,52,0.18)}
.step:last-of-type{border-bottom:0}
.step .num{flex:none;width:44px;height:44px;border-radius:50%;background:#014634;color:var(--bf-yellow);font:800 17px/44px var(--bf-font-display);text-align:center}
.step h3{font:800 19px/1.2 var(--bf-font-display);color:#014634;margin-bottom:6px}
.step p{font:var(--bf-body);color:rgba(1,70,52,0.82);max-width:52ch}
.ingr{margin-top:96px}
.ingr .eyebrow{color:#014634}
.ingr .sec-head{max-width:none}
.merged .ingr__h{color:#014634;white-space:nowrap;font-size:clamp(20px,6.2vw,56px)}
.ingr__sub{font:var(--bf-body-lg);color:rgba(1,70,52,0.85);margin-top:16px;max-width:none;white-space:nowrap}
.ingr__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ingr__cell{border:1px solid rgba(1,70,52,0.22);background:rgba(255,255,255,0.32);border-radius:var(--bf-radius-lg);padding:30px 28px}
/* The three cells rise in sequence rather than as one block (reveal only — .rise
   is the sole transition on the cell, so the delay can't leak anywhere else). */
.ingr__grid .ingr__cell.rise:nth-child(2){transition-delay:120ms}
.ingr__grid .ingr__cell.rise:nth-child(3){transition-delay:240ms}
.ingr__cell .amt{font:800 clamp(30px,3vw,42px)/1 var(--bf-font-display);color:#014634;letter-spacing:var(--bf-track-display)}
.ingr__cell h3{font:800 13px/1 var(--bf-font-display);letter-spacing:0.12em;text-transform:uppercase;color:var(--bf-orange-text);margin:10px 0 12px}
.ingr__cell p{font:var(--bf-body-sm);color:rgba(1,70,52,0.8)}
.ingr__note{margin-top:36px;font:700 12px/1.6 var(--bf-font-display);letter-spacing:0.04em;color:#014634;max-width:72ch}
/* community / KOL videos */
.kol{background:var(--bf-teal);color:var(--bf-cream);padding:96px 0}
.kol h2{color:var(--bf-cream)}
/* Community block is centred as a whole — heading and tile row — matching the
   deck's Sunnies "our community" peg. Symmetric gutters so the row centres on the
   viewport instead of being pushed right by the content-column left gutter. */
.kol .sec-head--row{margin-bottom:40px;justify-content:center;text-align:center}
.kol .sec-head--row>div:first-child{max-width:720px}
.kol .carousel{--rail-edge:28px}
.kol__scroller{scroll-padding-left:28px}
.kol__scroller{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.kol__scroller::-webkit-scrollbar{display:none}
.kol__row{display:flex;gap:16px;width:max-content;margin-inline:auto;padding-left:28px;padding-right:28px}
.kol__tile{position:relative;width:272px;flex:none;border-radius:var(--bf-radius-lg);overflow:hidden;scroll-snap-align:start;box-shadow:var(--bf-shadow-lg);background:var(--bf-teal-700)}
.kol__tile video,.kol__tile>img{width:100%;height:484px;object-fit:cover;display:block}
.kol__fallback{position:absolute;inset:0;z-index:0;transition:opacity var(--bf-dur) var(--bf-ease)}
.kol__tile video{position:relative;z-index:1;background:transparent}
.kol__tile figcaption{position:absolute;z-index:2;left:16px;bottom:16px;background:rgba(20,56,56,0.72);backdrop-filter:blur(6px);color:var(--bf-cream);font:700 12px/1 var(--bf-font-display);letter-spacing:0.06em;padding:9px 13px;border-radius:var(--bf-radius-pill)}
/* reviews */
.reviews{background:var(--aura-biofitea)}
.reviews h2,.reviews .eyebrow{color:var(--bf-teal-700)}
/* auto-fit + a max track keeps the row centred and sanely wide while the ACV
   quote is commented out; it goes back to a full row if a third card returns. */
.rev__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,380px));justify-content:center;gap:20px}
.rev{background:var(--bf-white);border-radius:var(--bf-radius-lg);padding:30px 28px;box-shadow:var(--bf-shadow-sm)}
.rev .stars{color:var(--bf-orange);font-size:15px;display:block;margin-bottom:16px}
.rev p{font:var(--bf-body);color:var(--bf-text);margin-bottom:20px}
.rev footer{display:flex;align-items:center;gap:14px;border-top:1px solid var(--bf-border);padding-top:18px}
.rev footer img{width:52px;height:52px;flex:none;border-radius:var(--bf-radius);object-fit:cover}
.rev .who{font:700 13px/1.4 var(--bf-font-display);color:var(--bf-ink)}
.rev .who span{display:block;font:400 12px/1.4 var(--bf-font-body);color:var(--bf-text-muted);margin-top:3px}
/* Dots belong to the phone swipe row below; they stay out of the way on desktop. */
.rev__dots{display:none;gap:9px;justify-content:center;margin-top:18px}
.rev__dots span{width:9px;height:9px;border-radius:50%;background:rgba(20,56,56,0.28);transition:all var(--bf-dur) var(--bf-ease)}
.rev__dots span.is-on{background:var(--bf-teal-700);width:26px;border-radius:var(--bf-radius-pill)}
/* retailer name row (shared by the Electrolytes stores block) */
.retail__row{display:flex;gap:16px 48px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:28px}
/* The retailer names are Google My Maps links (branch finders) — they must read
   exactly like the plain <span>s they replaced: same face, same weight, no rule. */
.retail__row span,.retail__row a{font:700 17px/1 var(--bf-font-display);letter-spacing:0.04em;color:var(--bf-ink);opacity:0.55;transition:opacity var(--bf-dur) var(--bf-ease)}
.retail__row a{display:inline-flex;align-items:center;text-decoration:none}
.retail__row a::after{content:"\2197";font-size:0.7em;margin-left:5px;opacity:0.75}
.retail__row span:hover,.retail__row a:hover,.retail__row a:focus-visible{opacity:1;text-decoration:none}
.retail__hint{font:700 12px/1.4 var(--bf-font-display);letter-spacing:0.04em;color:var(--bf-text-muted);text-align:center;margin-top:12px}
.elec__links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 10px;margin-top:32px}
.elec__links-label{font:700 12px/1 var(--bf-font-display);letter-spacing:0.16em;text-transform:uppercase;color:var(--bf-text-muted);flex-basis:100%;text-align:center;margin-right:0;margin-bottom:4px}
.elec__links a{display:inline-flex;align-items:center;font:700 13px/1 var(--bf-font-display);letter-spacing:0.04em;padding:11px 20px;border-radius:var(--bf-radius-pill);border:1.5px solid var(--bf-teal-700);color:var(--bf-teal-700);background:transparent;transition:transform 120ms var(--bf-ease),background-color var(--bf-dur) var(--bf-ease),border-color var(--bf-dur) var(--bf-ease),color var(--bf-dur) var(--bf-ease)}
.elec__links a:hover,.elec__links a:focus-visible{background:var(--bf-teal-700);color:var(--bf-cream);text-decoration:none}
.elec__links a:hover{transform:translateY(-1px)}
.elec__links a:active{transform:scale(.96)}
.elec__stores p.center{font:700 12px/1 var(--bf-font-display);letter-spacing:0.16em;text-transform:uppercase;color:var(--bf-text-muted);text-align:center}
/* faq */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--bf-border)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:800 17px/1.3 var(--bf-font-display);color:var(--bf-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 26px/1 var(--bf-font-display);color:var(--bf-orange-text);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{font:var(--bf-body);color:var(--bf-text-muted);padding:0 0 24px;max-width:64ch}
/* cta band */
.cta{background:var(--aura-biofitea);padding:88px 0}
.cta__inner{text-align:center;max-width:680px;margin:0 auto;padding:0 28px}
.cta h2{color:var(--bf-teal-700);font:var(--bf-display-2);letter-spacing:var(--bf-track-display)}
.cta p{font:var(--bf-body-lg);color:var(--bf-teal-700);margin:16px 0 32px}
.cta .btn{background:var(--bf-teal);color:var(--bf-cream);transition:transform 120ms var(--bf-ease),background-color var(--bf-dur) var(--bf-ease),color var(--bf-dur) var(--bf-ease)}
.cta .btn:hover{background:var(--bf-teal-700);color:var(--bf-white);transform:translateY(-1px)}
.cta .btn:active{transform:scale(.96)}
/* footer */
.foot{background:var(--bf-teal-700);color:var(--bf-cream);padding:72px 0 40px}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid var(--bf-border-dark)}
.foot__grid img{height:40px;width:auto;filter:brightness(0) saturate(100%) invert(96%) sepia(9%) saturate(408%) hue-rotate(11deg) brightness(102%) contrast(93%)}
.foot__grid p{font:var(--bf-body-sm);color:rgba(246,244,223,0.7);margin-top:18px;max-width:40ch}
.foot h4{font:700 12px/1 var(--bf-font-display);letter-spacing:0.16em;text-transform:uppercase;color:var(--bf-orange);margin-bottom:18px}
.foot ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.foot ul a{color:var(--bf-cream);font:var(--bf-body-sm)}
.foot ul a:hover{color:var(--bf-yellow)}
.foot__legal{padding-top:32px}
.foot__legal .disc{font:700 12px/1.6 var(--bf-font-display);letter-spacing:0.04em;color:var(--bf-yellow);text-transform:uppercase;max-width:88ch}
.foot__legal .cc{font:var(--bf-body-sm);color:rgba(246,244,223,0.55);margin-top:16px;display:flex;gap:24px;flex-wrap:wrap}
/* reveal */
/* reveal — hiding is gated on html.js, which JS adds once and never removes. A 1.5s
   (plus pageshow / visibilitychange) failsafe marks every .rise at or near the
   viewport as .in, so nothing on screen can stay stuck behind a throttled clock. */
.js .rise{opacity:0;transform:translateY(16px);transition:opacity 500ms var(--bf-ease),transform 500ms var(--bf-ease)}
.js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rise{opacity:1;transform:none;transition:none}.hslide,.hslide.is-on{transition:none}.strip__track{animation:none}html{scroll-behavior:auto}}
/* Centre the product arrows on the square image, not the taller whole card */
#shop .carousel{--rail-top:142px}
@media (max-width:1240px){.shelf,.kol__row{padding:0 28px}.carousel{--rail-edge:28px}}
/* The desktop bar carries four left links (Shop / Senna Tea / Electrolytes /
   The Ritual), so tighten the gap before the centred logo gets squeezed. */
@media (max-width:1100px){.nav__links{gap:18px}}
@media (max-width:960px){
.hero__grid{grid-template-columns:1fr;padding-top:56px;min-height:0}
.hslide--full,.hslide__overlay{min-height:520px}
.hero__photo img{height:420px}
/* The banner keeps the horizontal master down to 700px, and its tube creeps
   further left as the frame narrows — so the steps stack and stay well clear. */
.elec__steps{grid-template-columns:1fr;max-width:min(58%,420px);gap:14px;margin-top:28px}
.elec__steps li{flex-direction:row;gap:14px}
.elec__steps .num{width:36px;height:36px;font:800 15px/36px var(--bf-font-display)}
.hero__arrow{display:none}
.bene__grid{grid-template-columns:repeat(2,1fr)}
.ritual__grid{grid-template-columns:1fr;gap:40px}
.ingr__grid,.rev__grid{grid-template-columns:1fr}
.ingr__sub{white-space:normal}
.foot__grid{grid-template-columns:1fr;gap:36px}
.sec-head--row{flex-direction:column;align-items:flex-start;gap:20px}
/* nav switches to hamburger */
.nav__links{display:none}
.nav__burger{display:flex}
.nav__inner{grid-template-columns:1fr auto 1fr;gap:12px;padding:12px 20px}
.nav__logo{justify-self:center;display:flex}
.nav__burger{justify-self:start}
.nav__right{justify-self:end}
.nav__right a:not(.nav__cta){display:none}
.nav__right{gap:0}
/* The panel stays rendered so it can fade; it's absolute so the closed one costs
   no header height, and it drops over the page instead of growing the bar. */
.nav__panel{display:block;position:absolute;left:0;right:0;top:100%;
 visibility:hidden;opacity:0;transform:translateY(-8px);
 transition:opacity 220ms var(--bf-ease),transform 220ms var(--bf-ease),visibility 0s 220ms}
.nav__panel.is-open{visibility:visible;opacity:1;transform:none;
 transition:opacity 220ms var(--bf-ease),transform 220ms var(--bf-ease),visibility 0s}
.nav__panel-links a{opacity:0;transform:translateY(-6px);transition:opacity 200ms var(--bf-ease),transform 200ms var(--bf-ease)}
.nav__panel.is-open .nav__panel-links a{opacity:1;transform:none}
.nav__panel.is-open .nav__panel-links a:nth-child(1){transition-delay:30ms}
.nav__panel.is-open .nav__panel-links a:nth-child(2){transition-delay:60ms}
.nav__panel.is-open .nav__panel-links a:nth-child(3){transition-delay:90ms}
.nav__panel.is-open .nav__panel-links a:nth-child(4){transition-delay:120ms}
.nav__panel.is-open .nav__panel-links a:nth-child(5){transition-delay:150ms}
.nav__panel.is-open .nav__panel-links a:nth-child(6){transition-delay:180ms}
.nav__panel.is-open .nav__panel-links a:nth-child(7){transition-delay:210ms}
.nav__panel.is-open .nav__panel-links a:nth-child(8){transition-delay:240ms}
.nav__panel.is-open .nav__panel-links a:nth-child(9){transition-delay:270ms}
}
@media (max-width:960px) and (prefers-reduced-motion:reduce){
.nav__panel,.nav__panel.is-open{transition:none}
.nav__panel-links a,.nav__panel.is-open .nav__panel-links a{transition:none;transition-delay:0s}
}
/* Electrolytes banner flips to the vertical master; its tube sits in the lower
   half, so the copy stacks into the clean gradient at the top. */
@media (max-width:699px){
.elec__hero{background-image:url(assets/lifestyle/electro-hero-mobile.jpg)}
.elec__hero::before{background:linear-gradient(180deg,rgba(120,45,0,0.32) 0%,rgba(120,45,0,0.08) 40%,transparent 58%)}
/* Tall enough that `cover` is driven by height: the whole frame shows and the
   tube lands below the copy instead of behind it. */
.elec__hero-inner{min-height:800px;justify-content:flex-start;padding:44px 20px}
.elec__hero h2{max-width:none}
.elec__steps{max-width:none;margin-top:26px}
.elec__steps .num{width:34px;height:34px;font:800 14px/34px var(--bf-font-display)}
.elec__steps h3{font-size:16px}
.elec__stores{padding:36px 0}
}
/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width:600px){
.wrap{padding:0 20px}
.sec{padding:64px 0}
.sec-head{margin-bottom:34px}
.bene__grid{grid-template-columns:1fr}
.ingr{margin-top:64px}
.kol{padding:64px 0}
.announce{font-size:11px;letter-spacing:0.08em;line-height:1.5;padding:9px 16px}
.nav__logo img{height:28px}
.nav__cta{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
.nav__cta-icon{display:block}
.nav__cta-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hslide--full,.hslide__overlay{min-height:460px}
.hslide__overlay{padding:64px 20px}
.hero__grid{padding:44px 20px 0;gap:32px}
.hero h1,.hero .hslide__title{margin:14px 0 18px}
.hero__sub{font:var(--bf-body);margin-bottom:24px}
.hero__proof{margin-bottom:26px;font-size:13px}
.hero__buy{margin-bottom:40px}
.hero__photo img{height:360px}
.hero__photo--product img{height:320px}
.hero__badge{left:14px;bottom:14px;right:14px;padding:11px 14px;font-size:12px}
/* The badge goes full-width here, so the watch pill can't share the bottom edge —
   it stacks above it, pinned to the top-right of the frame. */
.hero__watch{top:14px;right:14px;bottom:auto;padding:10px 14px;font-size:12px}
.hero__dots{bottom:16px}
.strip__track{gap:0}
.strip__track b{margin-right:30px}
.shelf,.kol__row{padding:0 20px}
.rail{display:none}
.card__body{padding:20px 20px 22px}
.bene__tile{padding:24px 22px}
.ritual__photo img{height:320px}
.step{gap:16px;padding:20px 0}
.step .num{width:38px;height:38px;font:800 15px/38px var(--bf-font-display)}
.ingr__cell{padding:26px 22px}
.elec__ingr-label{padding:16px 20px;font-size:16px}
/* Reviews become a snap row like the community tiles — the negative margin lets it
   bleed to both screen edges while keeping the .wrap 20px gutter as scroll padding. */
/* justify-content:flex-start is load-bearing: the desktop rule centres the track,
   and a centred flex row that overflows spills equally off BOTH ends — the left
   half is then unreachable (scrollLeft can't go negative) and card one starts
   half off-screen. */
.rev__grid{display:flex;justify-content:flex-start;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:20px;padding:0 20px 8px;margin:0 -20px;scrollbar-width:none}
.rev__grid::-webkit-scrollbar{display:none}
.rev{flex:0 0 86%;scroll-snap-align:start;padding:26px 22px}
.rev__dots{display:flex}
.retail__row{gap:14px 28px;margin-top:22px}
.retail__row span,.retail__row a{font-size:15px}
.retail__hint{font-size:12px;margin-top:10px}
.faq summary{font-size:16px;padding:20px 0;gap:14px}
.cta{padding:64px 0}
.cta__inner{padding:0 20px}
.cta p{margin:14px 0 26px}
.cta .shops{flex-direction:column;align-items:stretch}
.cta .btn{justify-content:center;width:100%}
.foot{padding:56px 0 32px}
.foot__grid{padding-bottom:36px}
.foot__legal .cc{gap:8px 20px}
}
/* ── Cross-cutting mobile hygiene ──────────────────────────────────────── */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip}
[id]{scroll-margin-top:84px}
a,button,summary{-webkit-tap-highlight-color:rgba(245,135,11,0.15)}
[data-placeholder]{cursor:default}
/* Comfortable touch targets wherever the mobile layout is active */
@media (max-width:960px),(pointer:coarse){
.shop-pill{min-height:44px}
.card__buy a{display:inline-flex;align-items:center;min-height:42px;padding:0 15px}
.nav__cta{min-height:42px}
.faq summary{min-height:56px}
.retail__row span{padding:4px 0}
.retail__row a{min-height:44px;padding:4px 6px}
}