/* ==========================================================================
   Fizz — site-wide custom styles (loaded after the Webflow stylesheet).
   State classes on <html> are set before first paint by js/fizz-head.js:
     .fizz-motion    motion allowed (no prefers-reduced-motion)
     .fizz-loading   page not revealed yet (removed by fizz.js)
     .fizz-intro     homepage intro is about to play
     .fizz-tx-cover  arrived via a page transition; keep the page covered
   ========================================================================== */

/* ---------- "Fizz Deep" palette (see style-guide.html) ---------- */
:root {
  /* Surfaces, darkest → lightest */
  --fizz-abyss: #070e12;
  --fizz-deep: #0c171d;
  --fizz-surface: #12222a;
  --fizz-raised: #193039;
  --fizz-line: rgba(214, 238, 248, 0.12);
  /* Text */
  --fizz-mist: #eef6f9;
  --fizz-fog: #a7bac3;
  --fizz-haze: #6f8792;
  /* Accents */
  --fizz-ice: #c4e3fd;     /* primary CTA */
  --fizz-spark: #5fd8ff;   /* progress, focus, live states */
  --fizz-lagoon: #17607a;  /* water fills, depth */
  --fizz-cobalt: #3554e0;  /* bottle blue, sparing highlights */
  /* Flavors + status */
  --fizz-berry: #d2508f;
  --fizz-cherry: #e5484d;
  --fizz-citrus: #ff9a3d;
  --fizz-fresh: #4fe0a6;
  --fizz-glow: linear-gradient(135deg, var(--fizz-lagoon) 0%, var(--fizz-surface) 62%);

  /* Webflow's own variables now point at the palette, so every section follows it */
  --fizz-navy: var(--fizz-deep);
  --fizz-blue-1: var(--fizz-ice);

  --fizz-ink: #191919;
  --fizz-tx-color: var(--fizz-deep);
  --fizz-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Page transition cover (pre-paint, swapped for #fizz-tx by JS) ---------- */

html.fizz-tx-cover::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: var(--fizz-tx-color);
}

/* ---------- Page transition: deep-water veil + fine bubbles ---------- */

#fizz-tx {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  contain: strict;
}
#fizz-tx.is-active {
  visibility: visible;
  pointer-events: auto;
}
.fizz-tx-liquid {
  position: absolute;
  inset: 0;
  background: var(--fizz-tx-color);
  transform: translate3d(0, 115%, 0);
  will-change: transform;
}
/* Soft surface above and below the rising water: a gradient veil, not a cartoon wave */
.fizz-tx-edge {
  position: absolute;
  left: 0;
  right: 0;
  height: 35vh;
  pointer-events: none;
}
.fizz-tx-edge.is-top {
  bottom: calc(100% - 1px);
  background: linear-gradient(to top, var(--fizz-tx-color) 0%, rgba(12, 23, 29, 0.6) 45%, rgba(12, 23, 29, 0) 100%);
}
.fizz-tx-edge.is-top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  height: 1px;
  background: linear-gradient(90deg, rgba(196, 227, 253, 0) 0%, rgba(196, 227, 253, 0.35) 50%, rgba(196, 227, 253, 0) 100%);
  filter: blur(0.5px);
}
.fizz-tx-edge.is-bottom {
  top: calc(100% - 1px);
  background: linear-gradient(to bottom, var(--fizz-tx-color) 0%, rgba(12, 23, 29, 0.6) 45%, rgba(12, 23, 29, 0) 100%);
}
.fizz-tx-bubbles { position: absolute; inset: 0; }
.fizz-tx-bubble {
  position: absolute;
  top: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95) 0 18%, rgba(214, 238, 248, 0.45) 45%, rgba(214, 238, 248, 0.08) 75%, transparent 100%);
  box-shadow: 0 0 4px rgba(196, 227, 253, 0.25);
}
.fizz-tx-bubble.is-tiny { background: rgba(240, 251, 255, 0.85); box-shadow: 0 0 3px rgba(196, 227, 253, 0.4); }

/* Flavor animation stage (sits inside #fizz-tx, above the liquid) */
.fizz-tx-flavor {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.fizz-tx-flavor::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 40% at 38% 42%, rgba(194, 58, 122, 0.45), transparent 70%),
    radial-gradient(35% 35% at 64% 38%, rgba(226, 59, 59, 0.35), transparent 70%),
    radial-gradient(35% 35% at 40% 66%, rgba(143, 191, 58, 0.3), transparent 70%),
    radial-gradient(38% 38% at 62% 64%, rgba(255, 179, 71, 0.4), transparent 70%);
  animation: fizz-flavor-glow 3s ease-in-out infinite alternate;
}
@keyframes fizz-flavor-glow {
  from { transform: scale(0.85) rotate(0deg); opacity: 0.7; }
  to { transform: scale(1.1) rotate(8deg); opacity: 1; }
}
.fizz-tx-flavor canvas {
  position: relative;
  width: min(92vw, 92vh, 900px);
  height: min(92vw, 92vh, 900px);
}
.fizz-tx-skip {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  appearance: none;
  border: 1px solid rgba(221, 246, 255, 0.45);
  background: rgba(22, 38, 46, 0.55);
  color: var(--fizz-mist);
  font: 600 12px/1.2 var(--_fizz-typography---fizz-font-family, system-ui), sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: 999px;
  cursor: pointer;
}
.fizz-tx-skip:hover { background: rgba(22, 38, 46, 0.85); }

/* ---------- Homepage intro: FIZZ rises from the water → I splits → fly through ---------- */

:root { --fizz-intro-bg: #0d0c0f; }
.loading-intro-section { pointer-events: none; }
.letter-i-video { display: none !important; }

html.fizz-intro .loading-intro-section {
  display: flex;
  z-index: 2147483000;
  background: var(--fizz-intro-bg);
}
/* White logo; letters stay hidden until the intro script raises them out of the water */
html.fizz-intro .intro-logo-wrapper {
  z-index: 5;
  clip-path: inset(-500% -500% 0 -500%); /* the waterline: nothing shows below the logo's bottom edge */
}
html.fizz-intro .intro-logo-wrapper > * { opacity: 0; }
html.fizz-intro .intro-logo-wrapper img { filter: invert(1); }
html.fizz-intro .intro-logo-wrapper .letter-i { background-color: #fff; }
@media (max-width: 479px) {
  html.fizz-intro .intro-logo-wrapper { transform: scale(0.8); }
}

/* Mirrored logo floating on the water */
.intro-logo-wrapper.is-reflection {
  position: fixed;
  max-width: none;
  margin: 0;
  filter: blur(2px);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent 70%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent 70%);
  pointer-events: none;
}

.fizz-intro-water {
  position: absolute;
  left: 50%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  /* Feather the top edge so the video's black melts into the stage */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 32%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 32%);
}
.fizz-intro-water video { display: block; width: 100%; height: 100%; object-fit: cover; }
.fizz-intro-ripple {
  position: fixed;
  z-index: 4;
  height: 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.25);
  opacity: 0;
  pointer-events: none;
}

/* Bar + doors are injected into .loading-intro-section, so these z-indexes are local to it. */
.fizz-intro-bar,
.fizz-intro-door {
  position: fixed;
  pointer-events: none;
  will-change: transform;
}
.fizz-intro-backdrop { position: absolute; inset: 0; z-index: 0; background: var(--fizz-intro-bg); }
.fizz-intro-bar { z-index: 6; background: #fff; box-shadow: 0 0 28px 4px rgba(255, 255, 255, 0.45); transform-origin: 50% 0; opacity: 0; }
.fizz-intro-door { z-index: 2; top: 0; bottom: 0; background: var(--fizz-intro-bg); opacity: 0; }
.fizz-intro-door::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--fizz-seam, 23px);
  background: #fff;
  box-shadow: 0 0 32px 6px rgba(255, 255, 255, 0.5);
}
.fizz-intro-door.is-left { left: 0; }
.fizz-intro-door.is-left::after { right: 0; }
.fizz-intro-door.is-right { right: 0; }
.fizz-intro-door.is-right::after { left: 0; }

/* ---------- Text reveals ---------- */

html.fizz-motion .fizz-reveal-mask > * {
  transform: translate3d(0, 110%, 0);
  transition: transform 0.9s var(--fizz-ease-out);
}
html.fizz-motion .fizz-reveal-mask.is-in > * { transform: none; }
html.fizz-motion .fizz-hero .fizz-reveal-mask:nth-of-type(2) > * { transition-delay: 0.08s; }
html.fizz-motion .fizz-hero .is-hero-second .fizz-reveal-mask > * { transition-delay: 0.16s; }

/* ---------- CTA hover: water fills the button from the bottom ---------- */

a.button,
.pdp-add-btn,
.fizz-shop-cta,
.fizz-kit-add,
.fizz-kit-checkout,
.shop-card-cta,
.auto-tabs-tutorial-desktop,
.auto-tabs-tutorial-mobile {
  --fizz-fill: var(--fizz-tx-color);
  --fizz-fill-text: var(--fizz-blue-1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.35s ease 0.1s, transform 0.15s ease, border-color 0.35s ease;
}
a.button.is-outline,
.pdp-add-btn:not(.pdp-xsell-cta) {
  --fizz-fill: var(--fizz-blue-1);
  --fizz-fill-text: var(--fizz-tx-color);
}
.fizz-kit-add,
.fizz-kit-checkout { --fizz-fill: var(--fizz-lagoon); --fizz-fill-text: #fff; }

/* The water: a wavy-topped block that rises on hover and drains on leave */
a.button::before,
.pdp-add-btn::before,
.fizz-shop-cta::before,
.fizz-kit-add::before,
.fizz-kit-checkout::before,
.shop-card-cta::before,
.auto-tabs-tutorial-desktop::before,
.auto-tabs-tutorial-mobile::before {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 0;
  z-index: -1;
  height: calc(100% + 14px);
  background: var(--fizz-fill);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6Q14 0 28 6T56 6V12H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 56px 12px, linear-gradient(#000 0 0) no-repeat 0 11px / 100% calc(100% - 11px);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6Q14 0 28 6T56 6V12H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 56px 12px, linear-gradient(#000 0 0) no-repeat 0 11px / 100% calc(100% - 11px);
  transform: translate3d(0, 100%, 0);
  transition: transform 0.75s cubic-bezier(0.2, 0.75, 0.25, 1);
  animation: fizz-btn-wave 1.1s linear infinite paused;
}
/* A few bubbles rise through the water while it's full */
a.button::after,
.pdp-add-btn::after,
.fizz-shop-cta::after,
.fizz-kit-add::after,
.fizz-kit-checkout::after,
.shop-card-cta::after,
.auto-tabs-tutorial-desktop::after,
.auto-tabs-tutorial-mobile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle, transparent 0 2px, rgba(255,255,255,0.85) 2.4px 3.1px, transparent 3.5px) 14% 120% / 9px 9px no-repeat,
    radial-gradient(circle, transparent 0 1.4px, rgba(255,255,255,0.8) 1.8px 2.4px, transparent 2.8px) 38% 135% / 7px 7px no-repeat,
    radial-gradient(circle, transparent 0 2.6px, rgba(255,255,255,0.85) 3px 3.7px, transparent 4.1px) 63% 125% / 10px 10px no-repeat,
    radial-gradient(circle, transparent 0 1.2px, rgba(255,255,255,0.8) 1.6px 2.2px, transparent 2.6px) 86% 140% / 6px 6px no-repeat;
  opacity: 0;
  pointer-events: none;
}
@keyframes fizz-btn-wave {
  to { -webkit-mask-position: 56px 0, 0 11px; mask-position: 56px 0, 0 11px; }
}
@keyframes fizz-btn-bubbles {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, -130%, 0); }
}
@media (hover: hover) {
  a.button:hover,
  .pdp-add-btn:not(:disabled):hover,
  .fizz-shop-cta:hover,
  .fizz-kit-add:hover,
  .fizz-kit-checkout:hover,
  .shop-card-cta:hover,
  .auto-tabs-tutorial-desktop:hover,
  .auto-tabs-tutorial-mobile:hover { color: var(--fizz-fill-text); }
  .auto-tabs-tutorial-desktop:hover,
  .auto-tabs-tutorial-mobile:hover { border-color: var(--fizz-fill); }
  a.button:hover::before,
  .pdp-add-btn:not(:disabled):hover::before,
  .fizz-shop-cta:hover::before,
  .fizz-kit-add:hover::before,
  .fizz-kit-checkout:hover::before,
  .shop-card-cta:hover::before,
  .auto-tabs-tutorial-desktop:hover::before,
  .auto-tabs-tutorial-mobile:hover::before { transform: translate3d(0, 0, 0); animation-play-state: running; }
  a.button:hover::after,
  .pdp-add-btn:not(:disabled):hover::after,
  .fizz-shop-cta:hover::after,
  .fizz-kit-add:hover::after,
  .fizz-kit-checkout:hover::after,
  .shop-card-cta:hover::after,
  .auto-tabs-tutorial-desktop:hover::after,
  .auto-tabs-tutorial-mobile:hover::after { animation: fizz-btn-bubbles 1.5s ease-in 0.35s infinite; }
}
a.button:active,
.pdp-add-btn:active,
.fizz-shop-cta:active,
.fizz-kit-add:active,
.fizz-kit-checkout:active,
.shop-card-cta:active,
.auto-tabs-tutorial-desktop:active,
.auto-tabs-tutorial-mobile:active { transform: scale(0.96); }

/* ---------- Small interactions ---------- */

@keyframes fizz-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.pdp-swatch.is-active,
.fizz-kit-swatch.is-active,
.fizz-kit-chip.is-active { animation: fizz-pop 0.35s var(--fizz-ease-out); }
.fizz-nav-cart-count.is-bump { animation: fizz-pop 0.45s var(--fizz-ease-out); }
.pdp-qty-btn,
.fizz-kit-chip,
.fizz-kit-swatch,
.pdp-swatch { transition: transform 0.15s ease, border-color 0.2s, background-color 0.2s, box-shadow 0.2s; }
.pdp-qty-btn:active,
.fizz-kit-chip:active,
.fizz-kit-swatch:active { transform: scale(0.9); }


/* Bubble burst after "Add to cart" (js/fizz.js → Fizz.burst) */
.fizz-burst {
  position: fixed;
  z-index: 10200;
  border: 1.5px solid rgba(221, 246, 255, 0.85);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9) 0 12%, rgba(196, 227, 253, 0.15) 40%, transparent 72%);
  pointer-events: none;
}

/* ---------- Nav menu ---------- */

.fizz-nav-menu-inner { gap: 1.25em; padding: 1em clamp(1em, 3vw, 1.5em) 1.5em; }
.fizz-nav-list a,
.fizz-nav-nav a { position: relative; display: inline-block; }
.fizz-nav-list a::after,
.fizz-nav-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.35s var(--fizz-ease-out);
}
.fizz-nav-list a:hover::after,
.fizz-nav-nav a:hover::after,
.fizz-nav-list a:focus-visible::after { transform: scaleX(1); }

.fizz-nav-social { gap: 0.75em; }
.fizz-nav-social .fizz-nav-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  color: #fff !important;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s var(--fizz-ease-out);
}
.fizz-nav-social .fizz-nav-social-link svg { display: block; flex: none; width: 20px; height: 20px; margin: 0; }
.fizz-nav-social-link:hover,
.fizz-nav-social-link:focus-visible {
  border-color: var(--fizz-blue-1);
  background: var(--fizz-blue-1);
  color: var(--fizz-navy) !important;
  transform: translateY(-2px);
}

/* Menu photo: landscape bottles shot, centred on the three bottles at any crop */
.fizz-nav-menu-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 52vh;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease 0.25s;
}
.fizz-nav-menu.is-open .fizz-nav-menu-image { opacity: 1; }
.fizz-nav-menu-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}
/* Desktop: a wide frame that narrows (rather than crops harder) on short
   screens, so the whole dropdown still fits the viewport */
@media (min-width: 1025px) {
  .fizz-nav-menu-image {
    aspect-ratio: 11 / 5;
    width: min(100%, calc((min(96vh, 880px) - 15em) * 2.2));
    max-height: none;
  }
  .fizz-nav-menu-image img { object-position: 50% 66%; }
}

/* ---------- Bottle page: key-features scroll (js/fizz-bottle-scroll.js) ---------- */

.pdp-kf-lottie canvas { display: block; width: 100%; height: 100%; }
/* A live backdrop blur over a canvas that redraws every frame was the main source of
   scroll jank; a solid tint reads the same and costs nothing. */
.pdp-card-overlay {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: rgba(10, 26, 34, 0.82);
  transition: none;
  will-change: transform, opacity;
  pointer-events: none;
}

/* ---------- Marquees (CSS only, paused while off-screen) ---------- */

@keyframes fizz-marquee-x-reverse { from { transform: translate3d(-100%, 0, 0); } to { transform: none; } }
@keyframes fizz-marquee-y { to { transform: translate3d(0, -50%, 0); } }
@keyframes fizz-crossfade {
  0% { opacity: 0; }
  5%, 25% { opacity: 1; }
  30%, 100% { opacity: 0; }
}

.marquee-vertical_panel { transform: none !important; }
.marquee-vertical_track .marquee-vertical_panel + .marquee-vertical_panel,
.marquee-vertical_track .marquee-vertical_panel + .marquee-vertical_panel .marquee-vertical_img_wrapper:first-child { margin-top: 0; }

/* Footer gallery: just the slow crossfade with the copy + CTA centred over it */
.action-section {
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
}
.action-section .stacked-content { align-content: center; }
.action-section .stacked-intro.centered { align-items: center; }

@media (prefers-reduced-motion: no-preference) {
  .social-media-marquee .marquee-horizontal_panel { animation: fizz-marquee-x-reverse 40s linear infinite; }
  .marquee-vertical_track { animation: fizz-marquee-y 28s linear infinite; }
  .marquee-vertical_wrapper.is-2 .marquee-vertical_track { animation-direction: reverse; }

  .action-background .action-bg-slide { opacity: 0; animation: fizz-crossfade 30s linear infinite; }
  .action-background .action-bg-slide.is-1 { animation-delay: -1.5s; }
  .action-background .action-bg-slide.is-2 { animation-delay: 4.5s; }
  .action-background .action-bg-slide.is-3 { animation-delay: 10.5s; }
  .action-background .action-bg-slide.is-4 { animation-delay: 16.5s; }
  .action-background .action-bg-slide.is-5 { animation-delay: 22.5s; }

  [data-fizz-marquee]:not(.is-in-view) .marquee-horizontal_panel,
  [data-fizz-marquee]:not(.is-in-view) .marquee-vertical_track,
  [data-fizz-marquee]:not(.is-in-view) .action-bg-slide { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .action-background .action-bg-slide { opacity: 0; }
  .action-background .action-bg-slide.is-1 { opacity: 1; }
}

@media (min-width: 768px) {
  .home-intro_visual-content .marquee-vertical_wrapper { flex: 1 1 0; min-width: 0; width: auto; max-width: none; }
}
@media (max-width: 767px) {
  .home-intro_section { min-height: 100svh; overflow: hidden; background-color: #000; isolation: isolate; }
  .marquee-vertical_gradient { inset: 0 0 calc(32vh + 12px) 0; height: auto; }
  .marquee-vertical_wrapper.is-mobile-hidden { display: none !important; }
  .home-intro_visual-content .marquee-vertical_wrapper:not(.is-mobile-hidden) { width: 50% !important; }
}

/* ---------- Performance fixes ---------- */

/* .glass sits below the fixed bubble video, so its blur filters never showed —
   they only cost a full-screen repaint every frame. */
.glass { filter: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Product pages (bottle / flavors / charge) ---------- */

:root {
  --pdp-text: var(--fizz-mist);
  --pdp-muted: var(--fizz-fog);
  --pdp-line: var(--fizz-line);
  --pdp-ice: var(--fizz-ice);
}

/* Layout: photo stays put while the buy box scrolls (desktop); stacked on tablets/phones. */
.pdp-hero,
.pdp-hero.is-flavors {
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, 0.85fr);
  align-items: start;
  height: auto;
  min-height: 100vh;
}
.pdp-gallery { position: sticky; top: 0; height: 100vh; }
.pdp-buybox {
  position: static;
  height: auto;
  overflow: visible;
  justify-content: flex-start;
  gap: 1.25rem;
  width: 100%;
  max-width: 600px;
  padding: 7.5rem clamp(2rem, 4vw, 4rem) 4rem;
}
.pdp-gallery-slide[data-media-type="lifestyle"] { padding: 0; }
.pdp-gallery-slide[data-media-type="lifestyle"] .w-embed { width: 100%; height: 100%; }
/* Temporary label on AI-generated product shots until real photography lands.
   Remove the data-ai-placeholder attribute (or this block) to drop it. */
.pdp-gallery-slide[data-ai-placeholder],
.shop-card-media[data-ai-placeholder] { position: relative; }
[data-ai-placeholder]::after {
  content: "AI Placeholder";
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  z-index: 3;
  padding: 0.35em 0.75em;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(3, 9, 13, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  pointer-events: none;
}
.pdp-thumb-strip::-webkit-scrollbar { height: 4px; }
.pdp-thumb-strip::-webkit-scrollbar-thumb { background: rgba(178, 245, 255, 0.35); border-radius: 4px; }
.pdp-thumb.is-active,
.pdp-thumb-embed.is-active { opacity: 1 !important; border-color: hsla(195.78, 100%, 85%, 1) !important; }

/* Type */
.pdp-crumbs {
  display: flex;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pdp-muted);
}
.pdp-crumbs a { color: inherit; text-decoration: none; }
.pdp-crumbs a:hover { color: var(--pdp-text); text-decoration: underline; }
.pdp-crumbs [aria-current] { color: var(--pdp-text); }
.pdp-product-title { margin: 0; font-size: clamp(2rem, 3.2vw, 2.9rem); letter-spacing: -0.02em; }
.pdp-price { margin: 0; color: #fff; font-size: 1.4rem; font-weight: 600; }
.pdp-price-unit { color: var(--pdp-muted); font-size: 0.85rem; font-weight: 400; }
.pdp-description { margin: 0; max-width: 46ch; color: var(--pdp-muted); font-size: 1rem; line-height: 1.6; }
.pdp-option-label {
  margin: 0 0 0.75rem;
  padding: 0;
  color: var(--pdp-muted);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pdp-option-label span { color: var(--pdp-text); letter-spacing: 0.02em; text-transform: none; font-size: 0.9rem; font-weight: 600; }

/* Swatches (44px tap targets) */
.pdp-swatches { position: relative; z-index: 5; gap: 0.75rem; }
.pdp-swatch {
  position: relative;
  z-index: 5;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid rgba(221, 246, 255, 0.25);
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.pdp-swatch:hover { transform: scale(1.06); }
.pdp-swatch.is-active { border-color: var(--pdp-text) !important; box-shadow: inset 0 0 0 3px var(--fizz-navy); transform: none; }
.pdp-swatch:focus-visible,
.pdp-qty-btn:focus-visible,
.pdp-add-btn:focus-visible,
.pdp-plan:focus-within,
.pdp-accordion summary:focus-visible { outline: 2px solid var(--pdp-ice); outline-offset: 3px; }

/* One-time vs. subscribe */
.pdp-plans { display: grid; gap: 0.6rem; margin: 0; padding: 0; border: 0; }
.pdp-plan {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.75rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--pdp-line);
  border-radius: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.pdp-plan input { width: 18px; height: 18px; margin: 0; accent-color: var(--pdp-ice); }
.pdp-plan-main { display: flex; justify-content: space-between; gap: 1rem; color: var(--pdp-text); font-weight: 600; }
.pdp-plan-note { grid-column: 2; color: var(--pdp-muted); font-size: 0.85rem; line-height: 1.45; }
.pdp-plan:hover { border-color: rgba(196, 227, 253, 0.5); }
.pdp-plan:has(input:checked) { border-color: var(--pdp-ice); background: rgba(196, 227, 253, 0.08); }

/* Quantity + add to cart */
.pdp-buy-row { display: flex; gap: 0.75rem; margin-top: 0.25rem; }
.pdp-qty {
  display: flex;
  flex: none;
  align-items: center;
  height: 56px;
  border: 1.5px solid rgba(221, 246, 255, 0.28);
  border-radius: 999px;
}
.pdp-qty-btn {
  width: 44px;
  height: 100%;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--pdp-text);
  font-size: 1.3rem;
  cursor: pointer;
}
.pdp-qty-input {
  width: 2.25rem;
  border: 0;
  background: transparent;
  color: #fff;
  font: 600 1rem/1 inherit;
  text-align: center;
  -moz-appearance: textfield;
}
.pdp-qty-input::-webkit-outer-spin-button,
.pdp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp-buybox .pdp-add-btn,
.pdp-sticky-btn {
  --fizz-fill: var(--fizz-lagoon);
  --fizz-fill-text: #fff;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 56px;
  padding: 0 1.5rem;
  border-radius: 999px;
  background: var(--pdp-ice);
  color: var(--fizz-navy);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.pdp-add-total { letter-spacing: 0.02em; font-size: 0.95rem; }
.pdp-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pdp-add-btn.is-busy { cursor: progress; }
.pdp-buy-status { min-height: 1.2em; margin: -0.5rem 0 0; color: var(--fizz-ice); font-size: 0.85rem; }

.pdp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--pdp-muted);
  font-size: 0.82rem;
}
.pdp-trust li::before { content: "\2713"; margin-right: 0.4rem; color: var(--pdp-ice); }

/* Collapsible details */
.pdp-details { border-bottom: 1px solid var(--pdp-line); }
.pdp-accordion { padding: 0; border-top: 1px solid var(--pdp-line); }
.pdp-accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.05rem 0;
  list-style: none;
  cursor: pointer;
}
.pdp-accordion summary::-webkit-details-marker { display: none; }
.pdp-accordion summary::after { content: "+"; color: var(--pdp-muted); font-size: 1.3rem; font-weight: 300; line-height: 1; }
.pdp-accordion[open] summary::after { content: "\2212"; }
.pdp-accordion-body { margin: 0 0 1.1rem; font-size: 0.9rem; }

/* Sticky add-to-cart bar (shown by js/fizz-shop.js on tablets and phones) */
.pdp-sticky-buy { display: none; }

@media (max-width: 991px) {
  .pdp-hero,
  .pdp-hero.is-flavors { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pdp-gallery { position: relative; height: auto; }
  .pdp-gallery-stage { flex: none; min-height: 0; aspect-ratio: 1 / 1; max-height: 72vh; }
  .pdp-gallery-slide { padding: 0; }
  .pdp-gallery-img { max-height: none; }
  .pdp-buybox { max-width: 640px; margin: 0 auto; padding: 2rem 1.25rem 3rem; gap: 1.1rem; }

  .pdp-sticky-buy {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(221, 246, 255, 0.12);
    background: rgba(7, 14, 18, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transform: translate3d(0, 110%, 0);
    transition: transform 0.35s var(--fizz-ease-out);
  }
  .pdp-sticky-buy.is-visible { transform: none; }
  .pdp-sticky-thumb { flex: none; width: 44px; height: 44px; border-radius: 10px; background: #d4d3cc; object-fit: contain; }
  .pdp-sticky-info { flex: 1; min-width: 0; }
  .pdp-sticky-title,
  .pdp-sticky-meta { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .pdp-sticky-title { color: #fff; font-size: 0.9rem; font-weight: 600; }
  .pdp-sticky-meta { color: var(--pdp-muted); font-size: 0.8rem; }
  .pdp-sticky-btn { flex: none; width: auto; height: 48px; padding: 0 1.25rem; }
  /* Keep Webflow's badge clear of the bar */
  html.pdp-sticky-on .w-webflow-badge { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 479px) {
  .pdp-buy-row { gap: 0.5rem; }
  .pdp-buybox .pdp-add-btn { padding: 0 1.1rem; letter-spacing: 0.06em; }
}

/* ---------- "Complete your Fizz kit" pop-up ---------- */

html.fizz-kit-open { overflow: hidden; }
/* Keep Webflow's badge out of the pop-up's buttons */
html.fizz-kit-open .w-webflow-badge { top: 12px !important; bottom: auto !important; }
.fizz-kit {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}
.fizz-kit.is-open { pointer-events: auto; }
.fizz-kit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 14, 18, 0.65);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fizz-kit-panel {
  position: relative;
  width: min(580px, 100%);
  max-height: min(90vh, 780px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.75rem;
  border: 1px solid rgba(221, 246, 255, 0.12);
  border-radius: 22px;
  background: var(--fizz-navy);
  color: var(--pdp-text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.98);
  transition: opacity 0.3s ease, transform 0.4s var(--fizz-ease-out);
}
.fizz-kit.is-open .fizz-kit-backdrop,
.fizz-kit.is-open .fizz-kit-panel { opacity: 1; }
.fizz-kit.is-open .fizz-kit-panel { transform: none; }
.fizz-kit-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(221, 246, 255, 0.08);
  color: var(--pdp-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.fizz-kit-close:hover { background: rgba(221, 246, 255, 0.16); }
.fizz-kit-added { display: flex; align-items: center; gap: 0.5rem; margin: 0 2.5rem 0 0; color: var(--fizz-ice); font-size: 0.85rem; }
.fizz-kit-check {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pdp-ice);
  color: var(--fizz-navy);
  font-size: 0.75rem;
  font-weight: 700;
}
.fizz-kit-heading { margin: 1rem 0 0.3rem; color: #fff; font-size: 1.6rem; line-height: 1.2; }
.fizz-kit-sub { margin: 0; color: var(--pdp-muted); font-size: 0.92rem; }
.fizz-kit-list { display: grid; gap: 0.75rem; margin: 1.25rem 0; padding: 0; list-style: none; }
.fizz-kit-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.9rem;
  border: 1px solid rgba(221, 246, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}
.fizz-kit-media { width: 76px; height: 76px; overflow: hidden; border-radius: 12px; background: var(--fizz-abyss); }
.fizz-kit-media img { width: 100%; height: 100%; object-fit: cover; }
.fizz-kit-media.is-product { background: #d4d3cc; }
.fizz-kit-media.is-product img { object-fit: contain; }
.fizz-kit-title { margin: 0; color: #fff; font-size: 0.95rem; font-weight: 600; }
.fizz-kit-pitch { margin: 0.15rem 0 0; color: var(--pdp-muted); font-size: 0.8rem; line-height: 1.4; }
.fizz-kit-options { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.fizz-kit-swatch {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid rgba(221, 246, 255, 0.3);
  border-radius: 50%;
  background: var(--swatch);
  cursor: pointer;
}
.fizz-kit-swatch.is-active { border-color: #fff; box-shadow: inset 0 0 0 2px var(--fizz-navy); }
.fizz-kit-chip {
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(221, 246, 255, 0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--pdp-text);
  font-size: 0.75rem;
  cursor: pointer;
}
.fizz-kit-chip:hover { border-color: var(--pdp-ice); }
.fizz-kit-chip.is-active { border-color: var(--pdp-ice); background: var(--pdp-ice); color: var(--fizz-navy); font-weight: 600; }
.fizz-kit-note { margin: 0.4rem 0 0; color: var(--pdp-muted); font-size: 0.75rem; }
.fizz-kit-add {
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--pdp-ice);
  border-radius: 999px;
  background: var(--pdp-ice);
  color: var(--fizz-navy);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.fizz-kit-add.is-added { background: transparent; color: var(--pdp-ice); }
.fizz-kit-add.is-added .fizz-kit-price { display: none; }
.fizz-kit-add.is-busy { cursor: progress; opacity: 0.7; }
.fizz-kit-footer { display: grid; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--pdp-line); }
.fizz-kit-subtotal { margin: 0; color: var(--pdp-muted); font-size: 0.85rem; }
.fizz-kit-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.fizz-kit-secondary,
.fizz-kit-checkout {
  display: grid;
  place-items: center;
  height: 52px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.fizz-kit-secondary { border: 1.5px solid rgba(221, 246, 255, 0.35); background: transparent; color: var(--pdp-text); }
.fizz-kit-secondary:hover { border-color: var(--pdp-text); }
.fizz-kit-checkout { border: 0; background: #fff; color: var(--fizz-navy); }
.fizz-kit-link {
  justify-self: center;
  padding: 0.4rem;
  border: 0;
  background: none;
  color: var(--pdp-muted);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}
.fizz-kit button:focus-visible,
.fizz-kit a:focus-visible { outline: 2px solid var(--pdp-ice); outline-offset: 2px; }

/* Bottom sheet on phones */
@media (max-width: 600px) {
  .fizz-kit { align-items: flex-end; padding: 0; }
  .fizz-kit-panel {
    width: 100%;
    max-height: 92vh;
    padding: 1.5rem 1.1rem calc(1.25rem + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    transform: translate3d(0, 100%, 0);
  }
  .fizz-kit-card { grid-template-columns: 64px minmax(0, 1fr); }
  .fizz-kit-media { width: 64px; height: 64px; }
  .fizz-kit-add { grid-column: 1 / -1; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fizz-kit-panel,
  .fizz-kit-backdrop,
  .pdp-sticky-buy { transition: none; }
}

/* ---------- Homepage "How it works" autoplay tabs ---------- */

.auto-tabs-component .w-tab-pane {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.auto-tabs-component .w--tab-active {
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 2;
}
.auto-tabs-description {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.8s ease, opacity 1s ease;
}
[data-auto-tabs="link"].w--current .auto-tabs-description { grid-template-rows: 1fr; opacity: 1; }

[data-auto-tabs-button="play-icon"],
[data-auto-tabs-button="pause-icon"] {
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(0.6rem);
  opacity: 0;
}
[data-auto-tabs-button="play"] [data-auto-tabs-button="pause-icon"],
[data-auto-tabs-button="pause"] [data-auto-tabs-button="play-icon"] { opacity: 1; transform: none; }
.auto-tabs-controls { z-index: 3; }

.auto-tabs-tutorial-desktop,
.auto-tabs-tutorial-mobile {
  display: inline-flex;
  cursor: pointer;
  text-decoration: none;
  --fizz-fill: var(--fizz-ice);
  --fizz-fill-text: var(--fizz-deep);
}
.auto-tabs-tutorial-mobile { display: none; }
.auto-tabs-tutorial-actions .w-embed,
.auto-tabs-tutorial-actions script.w-json,
.auto-tabs-tutorial-actions img { display: none; }

html.auto-tabs-tutorial-open,
html.auto-tabs-tutorial-open body { overflow: hidden; }
.auto-tabs-tutorial-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.auto-tabs-tutorial-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.auto-tabs-tutorial-modal__backdrop { position: absolute; inset: 0; background: rgba(22, 38, 46, 0.92); }
.auto-tabs-tutorial-modal__dialog { position: relative; z-index: 1; width: min(940px, 92vw); max-height: 92vh; }
.auto-tabs-tutorial-modal__close {
  position: absolute;
  top: -2.75rem;
  right: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.auto-tabs-tutorial-modal__ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  background: #000;
  border-radius: 0.5rem;
  overflow: hidden;
}
.auto-tabs-tutorial-modal__ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.auto-tabs-animate-from-right,
.auto-tabs-animate-from-left {
  opacity: 0;
  transition: transform 1.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s ease;
}
.auto-tabs-animate-from-right { transform: translateX(40%); }
.auto-tabs-animate-from-left { transform: translateX(-40%); }
.w-tab-pane.w--tab-active .auto-tabs-animate-from-right,
.w-tab-pane.w--tab-active .auto-tabs-animate-from-left { transform: none; opacity: 1; }

#how-it-works.section-tabs-autoplay { scroll-margin-top: 4.5rem; }
.section-tabs-autoplay .auto-tabs-component.is-swipeable {
  touch-action: pan-y;
}

/* Phone landscape */
@media screen and (max-width: 991px) and (max-height: 500px) and (orientation: landscape) {
  .section-tabs-autoplay { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .section-tabs-autoplay .page-padding { padding-right: 3vw; padding-left: 3vw; }
  .auto-tabs-wrapper {
    display: grid;
    grid-template-columns: minmax(17rem, 0.85fr) minmax(0, 1.15fr);
    column-gap: clamp(1rem, 3vw, 2.5rem);
    align-items: stretch;
  }
  .auto-tabs-controls { inset: 0 auto auto 0; }
  .auto-tabs-menu {
    position: relative;
    grid-column: 1;
    display: flex;
    column-gap: 0.75rem;
    align-self: start;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 3rem 0 0;
    padding-right: 0;
    border-left: 0;
  }
  .auto-tabs-link {
    position: static !important;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    margin-left: 0;
    padding: 0;
    border-top: 0.3rem solid #8f8f8f80;
    border-left: 0;
  }
  .auto-tabs-link-titel { padding-top: 0.75rem; }
  .auto-tabs-content {
    grid-column: 2;
    width: 100%;
    height: calc(100svh - 3rem);
    min-height: 18rem;
    max-height: 30rem;
    margin: 0;
    aspect-ratio: auto;
    border-radius: 0.75rem;
  }
  .auto-tabs-content-inner,
  .auto-tabs-content-inner.is-right-align { padding: 1.25rem !important; }
}

@media screen and (max-width: 767px) {
  .auto-tabs-menu { position: relative; display: flex; column-gap: 15px; }
  .auto-tabs-link {
    position: static !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
  }
  .auto-tabs-link-titel { padding-top: 1rem; }
  .auto-tabs-tutorial-desktop { display: none !important; }
  .auto-tabs-tutorial-mobile { display: inline-flex !important; }
  .auto-tabs-tutorial-modal__close { top: -2.25rem; font-size: 2rem; }
}

/* Shared by phone-landscape and phone-portrait layouts */
@media screen and (max-width: 767px), screen and (max-width: 991px) and (max-height: 500px) and (orientation: landscape) {
  .auto-tabs-description,
  .auto-tabs-description._2,
  .auto-tabs-description._3 {
    position: absolute;
    inset: calc(100% + 0.75rem) auto auto 0 !important;
    width: 100% !important;
    max-width: none;
    margin-top: 0;
  }
  .auto-tabs-progress-bar {
    position: relative !important;
    inset: auto !important;
    order: -1;
    align-self: flex-start;
    height: 0.3rem !important;
    margin-top: -0.3rem;
    margin-left: 0;
    transform-origin: left center;
  }
}

/* ---------- Homepage canister refill subscription loop (js/fizz-refill.js) ---------- */
/* Without JS or with reduced motion: all four steps sit on the line at once.
   With .is-live the stage pins and the steps ride the line one at a time, left to right. */

.fizz-refill {
  --refill-steps: 4;
  --refill-name: clamp(2.25rem, 4.6vw, 4rem);
  --refill-gap: clamp(1rem, 2.4vw, 1.75rem);
  --refill-dot: 10px;
  position: relative;
  color: #fff;
  background: var(--fizz-deep);
}
.fizz-refill-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2.5rem, 6vh, 4.5rem);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(5rem, 12vh, 7rem) 0 clamp(4rem, 10vh, 6rem);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(60% 55% at 8% 22%, #1d4d68 0%, rgba(29, 77, 104, 0) 100%),
    radial-gradient(50% 45% at 94% 6%, #ebe8d9 0%, rgba(235, 232, 217, 0) 100%),
    radial-gradient(55% 55% at 96% 100%, #0b3553 0%, rgba(11, 53, 83, 0) 100%),
    radial-gradient(45% 50% at 10% 100%, #a8b9b0 0%, rgba(168, 185, 176, 0) 100%),
    #6f8c97;
}

/* Film grain + soft edges into the dark sections above and below */
.fizz-refill-stage::before,
.fizz-refill-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.fizz-refill-stage::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.22;
  mix-blend-mode: overlay;
}
.fizz-refill-stage::after {
  background: linear-gradient(to bottom, var(--fizz-deep) 0, rgba(12, 23, 29, 0) 72px, rgba(12, 23, 29, 0) calc(100% - 72px), var(--fizz-deep) 100%);
}

/* The frosted orb and the broken ring around it */
.fizz-refill-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.fizz-refill-orb,
.fizz-refill-ring {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(var(--refill-orb-scale, 1));
}
.fizz-refill-orb {
  top: 55%;
  width: min(100vh, 92vw);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 48% 52%, #4f8199 0%, rgba(79, 129, 153, 0) 62%),
    radial-gradient(circle at 50% 50%, #8db1bf 0%, #a6c4cd 62%, #b3cfd6 100%);
  opacity: 0.88;
  filter: blur(2px);
  box-shadow: 0 0 120px rgba(179, 207, 214, 0.35);
}
.fizz-refill-ring {
  top: 50%;
  width: min(116vh, 108vw);
  aspect-ratio: 1;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  /* Open on both sides where the timeline crosses */
  -webkit-mask: linear-gradient(to bottom, #000 0 42%, transparent 42% 76%, #000 76%);
  mask: linear-gradient(to bottom, #000 0 42%, transparent 42% 76%, #000 76%);
  transform: translate(-50%, -50%) rotate(var(--refill-ring-turn, 0deg));
}

.fizz-refill-head {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
  text-shadow: 0 1px 24px rgba(12, 23, 29, 0.25);
}
.fizz-refill-head .fizz-heading-eyebrow {
  margin: 0 0 1rem;
  justify-content: center;
  color: rgba(238, 246, 249, 0.78);
}
.fizz-refill-title {
  margin: 0;
  font-family: var(--_fizz-typography---fizz-font-family);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.fizz-refill-lead {
  max-width: 28rem;
  margin: 1rem auto 0;
  font-family: var(--_fizz-typography---fizz-font-family);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 300;
  line-height: 1.4;
}
.fizz-refill-actions {
  justify-content: center;
  margin-top: 1.5rem;
}
.fizz-refill-actions .button.dark {
  --fizz-fill: #fff;
  --fizz-fill-text: var(--fizz-deep);
  border-color: #fff;
  color: var(--fizz-deep);
}

/* ---------- Homepage featured Bottle PDP (premium stage, seamless with story) ---------- */
.fizz-featured {
  position: relative;
  scroll-margin-top: 4.5rem;
  --featured-pad: clamp(1.75rem, 4.5vw, 4rem);
  --pdp-text: #fff;
  --pdp-muted: var(--fizz-fog);
  --pdp-ice: var(--fizz-ice);
  --pdp-line: var(--fizz-line);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(0.5rem, 2vw, 2rem);
  align-items: center;
  margin-top: clamp(-2.5rem, -4vw, -1.25rem);
  padding: clamp(1rem, 3vw, 2rem) 0 clamp(3.5rem, 8vw, 5.5rem);
  color: var(--fizz-mist);
  overflow: hidden;
  background:
    radial-gradient(55% 70% at 22% 48%, rgba(95, 216, 255, 0.12), transparent 62%),
    radial-gradient(40% 55% at 78% 42%, rgba(23, 96, 122, 0.18), transparent 70%),
    linear-gradient(180deg, var(--fizz-deep) 0%, #0a141a 42%, var(--fizz-deep) 100%);
}
.fizz-featured::before,
.fizz-featured::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
}
.fizz-featured::before {
  top: 0;
  height: clamp(4rem, 10vw, 7rem);
  background: linear-gradient(180deg, var(--fizz-deep) 0%, transparent 100%);
}
.fizz-featured::after {
  bottom: 0;
  height: clamp(3.5rem, 8vw, 6rem);
  background: linear-gradient(180deg, transparent 0%, var(--fizz-navy) 100%);
}
.fizz-featured-media,
.fizz-featured-copy {
  position: relative;
  z-index: 2;
}
.fizz-featured-media {
  min-height: min(72vh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
  background: transparent;
}
.fizz-featured-glow {
  position: absolute;
  width: min(78%, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(196, 227, 253, 0.28) 0%, rgba(95, 216, 255, 0.14) 28%, transparent 68%);
  filter: blur(2px);
  opacity: 0.95;
  pointer-events: none;
  animation: fizz-featured-breathe 7s ease-in-out infinite;
}
.fizz-featured-img {
  position: relative;
  z-index: 1;
  width: min(78%, 460px);
  height: auto;
  max-height: min(66vh, 680px);
  object-fit: contain;
  filter:
    drop-shadow(0 36px 56px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 42px rgba(95, 216, 255, 0.18));
  transition: opacity 0.3s ease, transform 0.45s var(--fizz-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.fizz-featured-badge {
  position: absolute;
  top: clamp(1.25rem, 3.5vw, 2.5rem);
  right: clamp(1.25rem, 4vw, 3rem);
  width: clamp(7rem, 12vw, 9rem);
  height: clamp(7rem, 12vw, 9rem);
  color: var(--fizz-ice);
  pointer-events: none;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.35));
}
.fizz-featured-badge-svg {
  width: 100%;
  height: 100%;
  display: block;
  animation: fizz-featured-spin 18s linear infinite;
}
.fizz-featured-badge-text {
  fill: var(--fizz-ice);
  font-family: var(--_fizz-typography---fizz-font-family, "Satoshi", sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.fizz-featured-badge-core {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: rgba(18, 34, 42, 0.88);
  border: 1px solid rgba(196, 227, 253, 0.4);
  box-shadow: inset 0 0 18px rgba(95, 216, 255, 0.12);
  display: grid;
  place-items: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.fizz-featured-badge-mark {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0%, var(--fizz-spark) 55%, var(--fizz-lagoon) 100%);
  box-shadow: 0 0 16px rgba(95, 216, 255, 0.65);
}
@keyframes fizz-featured-spin {
  to { transform: rotate(360deg); }
}
@keyframes fizz-featured-breathe {
  0%, 100% { transform: scale(1); opacity: 0.88; }
  50% { transform: scale(1.06); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fizz-featured-badge-svg,
  .fizz-featured-glow { animation: none; }
}

.fizz-featured-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.15rem;
  padding: var(--featured-pad) clamp(1.5rem, 5vw, 4.5rem) var(--featured-pad) clamp(1rem, 3vw, 2rem);
  background: transparent;
  border: 0;
}
.fizz-featured-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fizz-spark);
  text-shadow: 0 0 24px rgba(95, 216, 255, 0.35);
}
.fizz-featured-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.fizz-featured-title {
  margin: 0;
  font-family: var(--_fizz-typography---fizz-font-family, "Satoshi", sans-serif);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.fizz-featured-price {
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 600;
  color: var(--fizz-ice);
  letter-spacing: -0.02em;
}
.fizz-featured-pay {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--fizz-fog);
}
.fizz-featured-desc {
  display: grid;
  gap: 0.9rem;
  max-width: 34rem;
}
.fizz-featured-desc p {
  margin: 0;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(238, 246, 249, 0.9);
}
.fizz-featured-option { margin-top: 0.45rem; }
.fizz-featured-copy.pdp-buybox {
  max-width: none;
  width: auto;
  margin: 0;
  padding: var(--featured-pad) clamp(1.5rem, 5vw, 4.5rem) var(--featured-pad) clamp(1rem, 3vw, 2rem);
  gap: 1.15rem;
}
.fizz-featured-copy .pdp-option-label {
  color: var(--fizz-mist);
  margin-bottom: 0.7rem;
}
.fizz-featured-copy .pdp-swatch {
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.fizz-featured-copy .pdp-swatch.is-active {
  border-color: #fff !important;
  box-shadow: inset 0 0 0 3px var(--fizz-deep), 0 0 0 1px rgba(196, 227, 253, 0.45);
}
.fizz-featured-buy-row {
  margin-top: 0.65rem;
  max-width: 28rem;
}
.fizz-featured-copy .pdp-qty {
  border-color: rgba(196, 227, 253, 0.28);
  background: rgba(7, 14, 18, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.fizz-featured-copy .pdp-add-btn {
  flex: 1;
  border: 1.5px solid rgba(196, 227, 253, 0.65);
  background: linear-gradient(180deg, rgba(196, 227, 253, 0.14), rgba(196, 227, 253, 0.04));
  color: var(--fizz-ice);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.fizz-featured-copy .pdp-add-btn:hover {
  background: var(--fizz-ice);
  border-color: var(--fizz-ice);
  color: var(--fizz-deep);
  box-shadow: 0 16px 40px rgba(95, 216, 255, 0.22);
  transform: translateY(-1px);
}
.fizz-featured-copy .pdp-buy-status {
  min-height: 1.25em;
  margin: 0;
  font-size: 0.85rem;
  color: var(--fizz-fog);
}
.fizz-featured-more {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 0.35rem;
  color: var(--fizz-ice);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(196, 227, 253, 0.35);
  padding-bottom: 0.2rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.fizz-featured-more:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 991px) {
  .fizz-featured {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: -1.5rem;
    padding-bottom: clamp(3rem, 10vw, 4.5rem);
  }
  .fizz-featured-media {
    min-height: min(52vh, 480px);
    padding-bottom: 0.5rem;
  }
  .fizz-featured-copy.pdp-buybox {
    border: 0;
    padding: clamp(1.25rem, 5vw, 2rem) clamp(1.25rem, 5vw, 2rem) clamp(2rem, 7vw, 3.25rem);
  }
  .fizz-featured-badge {
    width: 6rem;
    height: 6rem;
    top: 1rem;
    right: 1rem;
  }
}

/* Static subscription explainer on Charge + How it works (no sticky scroll theater) */
.fizz-refill.is-static .fizz-refill-stage {
  min-height: 0;
  padding: clamp(4rem, 8vh, 5.5rem) 0;
}
.fizz-refill.is-static .fizz-refill-pips { display: none; }
.auto-tabs-tutorial-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.auto-tabs-tutorial-actions .button.dark {
  margin-right: 0.25rem;
}

/* Timeline: name, dot on the line, description */
.fizz-refill-track {
  position: relative;
  width: 100%;
}
.fizz-refill-line {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--refill-name) + var(--refill-gap) + var(--refill-dot) / 2);
  height: 1.5px;
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-50%);
}
.fizz-refill-line-fill {
  display: none;
}
.fizz-refill-steps {
  display: grid;
  grid-template-columns: repeat(var(--refill-steps), minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  list-style: none;
}
.fizz-refill-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-shadow: 0 1px 24px rgba(12, 23, 29, 0.3);
}
.fizz-refill-name {
  margin: 0;
  font-family: var(--_fizz-typography---fizz-font-family);
  font-size: var(--refill-name);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fizz-refill-dot {
  width: var(--refill-dot);
  height: var(--refill-dot);
  margin: var(--refill-gap) 0 1.25rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}
.fizz-refill-copy {
  max-width: 17rem;
  margin: 0;
  font-family: var(--_fizz-typography---fizz-font-family);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  font-weight: 300;
  line-height: 1.35;
}
.fizz-refill-copy strong { font-weight: 600; }

.fizz-refill-pips { display: none; }
/* All four names share one row when static, so they run smaller than the live one */
.fizz-refill:not(.is-live) { --refill-name: clamp(2rem, 3.3vw, 3.25rem); }

/* ---- Live: pinned stage, one step at a time ---- */

.fizz-refill.is-live {
  /* One screen to pin + about 80% of a screen of scroll per step */
  height: calc(100vh + var(--refill-steps) * 80vh);
  height: calc(100svh + var(--refill-steps) * 80svh);
}
.fizz-refill.is-live .fizz-refill-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}
.fizz-refill.is-live .fizz-refill-line { background: rgba(255, 255, 255, 0.4); }
.fizz-refill.is-live .fizz-refill-line-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
  transform-origin: left center;
  transform: scaleX(var(--refill-progress, 0));
}
.fizz-refill.is-live .fizz-refill-steps {
  display: block;
  position: relative;
  max-width: none;
  padding: 0;
  /* Height of one step, so the absolutely placed steps don't collapse the track */
  min-height: calc(var(--refill-name) + var(--refill-gap) + var(--refill-dot) + 1.25rem + 4.2em);
}
.fizz-refill.is-live .fizz-refill-step {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(24rem, 84vw);
  opacity: var(--refill-opacity, 0);
  transform: translate3d(calc(-50% + var(--refill-x, 0px)), 0, 0);
  will-change: transform, opacity;
}
.fizz-refill.is-live .fizz-refill-step:not(.is-active) { pointer-events: none; }
.fizz-refill.is-live .fizz-refill-copy { max-width: 20rem; font-size: clamp(1rem, 1.35vw, 1.2rem); }

.fizz-refill.is-live .fizz-refill-pips {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0 1rem;
  list-style: none;
}
.fizz-refill-pip {
  padding: 0.6rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(12, 23, 29, 0.12);
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--_fizz-typography---fizz-font-family);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.fizz-refill-pip:hover { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.fizz-refill-pip[aria-current="step"] {
  border-color: #fff;
  background: #fff;
  color: var(--fizz-deep);
}
.fizz-refill-pip:focus-visible { outline: 2px solid var(--fizz-spark); outline-offset: 3px; }

@media (max-width: 767px) {
  .fizz-refill { --refill-name: clamp(2rem, 11vw, 2.75rem); }
  .fizz-refill-ring { width: 128vw; }
  .fizz-refill-orb { width: 112vw; }
  /* Static fallback on phones: stack the steps, drop the line */
  .fizz-refill:not(.is-live) .fizz-refill-line { display: none; }
  .fizz-refill:not(.is-live) .fizz-refill-steps { grid-template-columns: 1fr; gap: 2.5rem; }
  .fizz-refill-pip { padding: 0.55rem 0.7rem; font-size: 0.625rem; letter-spacing: 0.12em; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  #fizz-tx,
  .fizz-intro-bar,
  .fizz-intro-door { display: none !important; }
}

/* ---------- Scroll-in reveals for any [data-reveal] element (js/fizz.js) ---------- */

html.fizz-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity 0.9s ease, transform 1.1s var(--fizz-ease-out);
}
html.fizz-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- "More from Fizz" product slideshow (product pages) ---------- */

.fizz-more {
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--fizz-navy);
  color: var(--pdp-text);
}
.fizz-more-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}
.fizz-more-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 82vh;
  overflow: hidden;
  border-radius: 24px;
  background: var(--fizz-abyss);
  touch-action: pan-y;
}
.fizz-more-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}
.fizz-more-slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.8s ease; }
.fizz-more-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.08);
  transition: transform 7s linear;
}
.fizz-more-slide.is-active img { transform: scale(1); }
/* Arrows match the homepage carousels' (.dark-slide-arrow): see "Slideshow arrows" below */
.fizz-more-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  translate: 0 -50%;
}
.fizz-more-arrow.is-prev { left: 16px; }
.fizz-more-arrow.is-next { right: 16px; }
.fizz-more-arrow.is-next svg { transform: scaleX(-1); }

.fizz-more-eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 1.5rem;
  color: var(--pdp-muted);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fizz-more-count { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.fizz-more-panels { display: grid; }
.fizz-more-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.45s ease, transform 0.6s var(--fizz-ease-out), visibility 0s linear 0.45s;
}
.fizz-more-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s ease 0.15s, transform 0.8s var(--fizz-ease-out) 0.15s, visibility 0s;
}
.fizz-more-title { margin: 0; color: #fff; font-size: clamp(2.2rem, 4.5vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em; }
.fizz-more-variant { margin: 0.5rem 0 0; color: var(--pdp-ice); font-size: 1.05rem; font-weight: 600; }
.fizz-more-desc { max-width: 40ch; margin: 1.25rem 0 0; color: var(--pdp-muted); font-size: 1.05rem; line-height: 1.6; }
.fizz-more-price { margin: 1.5rem 0 0; color: #fff; font-size: 1.5rem; font-weight: 600; }
.fizz-more-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.5rem; }
.fizz-more .fizz-more-add {
  --fizz-fill: var(--fizz-lagoon);
  --fizz-fill-text: #fff;
  display: inline-flex;
  align-items: center;
  width: auto;
  height: 54px;
  padding: 0 2rem;
  border-radius: 999px;
  background: var(--pdp-ice);
  color: var(--fizz-navy);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.fizz-more-learn {
  padding-bottom: 2px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.25s;
}
.fizz-more-learn:hover { border-color: #fff; }

.fizz-more-dots { display: flex; gap: 0.5rem; margin-top: 2.5rem; }
.fizz-more-dot {
  display: flex;
  flex: 1;
  align-items: center;
  max-width: 72px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.fizz-more-dot span {
  position: relative;
  display: block;
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(221, 246, 255, 0.2);
}
.fizz-more-dot span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pdp-ice);
  transform: scaleX(0);
  transform-origin: left center;
}
.fizz-more-dot.is-active span::after { animation: fizz-more-progress var(--more-duration, 6s) linear forwards; }
.fizz-more.is-paused .fizz-more-dot.is-active span::after { animation-play-state: paused; }
@keyframes fizz-more-progress { to { transform: scaleX(1); } }
.fizz-more-arrow:focus-visible,
.fizz-more-dot:focus-visible,
.fizz-more-learn:focus-visible { outline: 2px solid var(--pdp-ice); outline-offset: 3px; }

@media (max-width: 767px) {
  .fizz-more-inner { grid-template-columns: minmax(0, 1fr); }
  .fizz-more-media { max-height: 72vh; border-radius: 20px; }
  .fizz-more-arrow.is-prev { left: 10px; }
  .fizz-more-arrow.is-next { right: 10px; }
  .fizz-more-eyebrow { margin-bottom: 1rem; }
  .fizz-more-dots { margin-top: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fizz-more-dot.is-active span::after { animation: none; transform: scaleX(1); }
  .fizz-more-slide img { transition: none; transform: none; }
}

/* ---------- Shop page ---------- */

.shop {
  overflow: hidden;
  padding: 0 clamp(1rem, 4vw, 3rem) clamp(4rem, 8vw, 7rem);
  background: transparent;
  color: var(--pdp-text);
}
.shop-hero {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(8rem, 14vw, 11rem) 0 clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.shop-eyebrow { margin: 0; color: var(--pdp-ice); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.shop-title { margin: 0.75rem 0 0; color: #fff; font-size: clamp(2.6rem, 7vw, 5.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
.shop-lead { max-width: 52ch; margin: 1.25rem auto 0; color: var(--pdp-muted); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.6; }
.shop-perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  color: rgba(238, 246, 249, 0.72);
  font-size: 0.875rem;
}
.shop-perks li {
  position: relative;
  padding: 0.2rem 0.85rem;
  border: 0;
  background: none;
}
.shop-perks li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(238, 246, 249, 0.45);
  transform: translate(-50%, -50%);
}
.shop-hero [data-reveal]:nth-child(2) { transition-delay: 0.08s; }
.shop-hero [data-reveal]:nth-child(3) { transition-delay: 0.16s; }
.shop-hero [data-reveal]:nth-child(4) { transition-delay: 0.24s; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 1200px;
  margin: 0 auto;
}
.shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.25rem;
  background: rgba(12, 23, 29, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.9s ease, transform 0.6s var(--fizz-ease-out), box-shadow 0.6s, border-color 0.6s;
}
.shop-grid .shop-card:nth-child(2) { transition-delay: 0.08s; }
.shop-grid .shop-card:nth-child(3) { transition-delay: 0.16s; }
.shop-card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.shop-card-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--fizz-ease-out); }
.shop-card-body { display: flex; flex: 1; flex-direction: column; gap: 0.75rem; padding: clamp(1.25rem, 2.5vw, 2rem); }
.shop-card-tag { margin: 0; color: var(--pdp-ice); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.shop-card-name { margin: 0; color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.1; letter-spacing: -0.01em; }
.shop-card-name a { color: inherit; text-decoration: none; }
/* The whole card is clickable through the product name link */
.shop-card-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.shop-card-desc { max-width: 42ch; margin: 0; color: var(--pdp-muted); line-height: 1.55; }
.shop-dots { display: flex; gap: 0.4rem; }
.shop-dot { width: 18px; height: 18px; border: 2px solid rgba(221, 246, 255, 0.35); border-radius: 50%; background: var(--c); }
.shop-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 0.75rem; }
.shop-card-price { color: #fff; font-size: 1.35rem; font-weight: 600; }
.shop-card-price small { color: var(--pdp-muted); font-size: 0.8rem; font-weight: 400; }
.shop-card-cta {
  --fizz-fill: var(--fizz-lagoon);
  --fizz-fill-text: #fff;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 1.4rem;
  border-radius: 999px;
  background: var(--pdp-ice);
  color: var(--fizz-navy);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}
@media (hover: hover) {
  html .shop-grid .shop-card.is-in:not(.is-kit):hover {
    transform: translate3d(0, -4px, 0);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28);
  }
  .shop-card:hover .shop-card-img { transform: scale(1.04); }
}

/* Featured bottle card spans the row */
.shop-card.is-feature { grid-column: 1 / -1; flex-direction: row; min-height: 520px; }
.shop-card.is-feature .shop-card-media { flex: 0 0 58%; aspect-ratio: auto; }
.shop-card.is-feature .shop-card-body { justify-content: center; padding: clamp(2rem, 4vw, 3.5rem); }
.shop-card.is-feature .shop-card-name { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.shop-card.is-feature .shop-card-foot { margin-top: 1rem; }

/* Starter kit */
.shop-card.is-kit {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  background:
    radial-gradient(80% 90% at 0% 0%, rgba(23, 96, 122, 0.45) 0%, rgba(23, 96, 122, 0) 70%),
    rgba(12, 23, 29, 0.5);
}
.shop-kit-copy { display: flex; flex-direction: column; gap: 0.75rem; }
.shop-kit-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.shop-kit-list li { padding: 0.45rem 0.9rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 0.82rem; }
.shop-kit-buy {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.5rem;
  border: 1px solid rgba(221, 246, 255, 0.12);
  border-radius: 20px;
  background: rgba(10, 26, 34, 0.45);
}
.shop-kit-label { margin: 0; color: var(--pdp-muted); font-size: 0.85rem; }
.shop-kit-label span { color: #fff; font-weight: 600; }
.shop-kit-swatches { display: flex; gap: 0.6rem; }
.shop-kit-swatch {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid rgba(221, 246, 255, 0.3);
  border-radius: 50%;
  background: var(--c);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.shop-kit-swatch:active { transform: scale(0.9); }
.shop-kit-swatch.is-active { border-color: #fff; box-shadow: inset 0 0 0 3px var(--fizz-deep); animation: fizz-pop 0.35s var(--fizz-ease-out); }
.shop-card .shop-kit-add {
  --fizz-fill: var(--fizz-lagoon);
  --fizz-fill-text: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 56px;
  padding: 0 1.5rem;
  border-radius: 999px;
  background: var(--pdp-ice);
  color: var(--fizz-navy);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.shop-kit-status { min-height: 1.2em; margin: 0; color: var(--fizz-ice); font-size: 0.85rem; }

@media (max-width: 767px) {
  .shop-grid { grid-template-columns: minmax(0, 1fr); }
  .shop-card.is-feature { flex-direction: column; min-height: 0; }
  .shop-card.is-feature .shop-card-media { flex: none; aspect-ratio: 4 / 3; }
  .shop-card.is-kit { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Content pages: How it works (.hiw) + About (.about)
   ========================================================================== */

.hiw,
.about {
  overflow: hidden;
  background: var(--fizz-navy);
  color: var(--pdp-text);
}
.hiw-section { max-width: 1200px; margin: 0 auto; padding: clamp(4rem, 9vw, 8rem) clamp(1.25rem, 5vw, 3rem); }
.hiw-head { max-width: 720px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.hiw-eyebrow { margin: 0; color: var(--pdp-ice); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.hiw-h2 { margin: 0.7rem 0 0; color: #fff; font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.025em; }
.hiw-sub { margin: 1rem auto 0; max-width: 56ch; color: var(--pdp-muted); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6; }
.hiw-sub a { color: var(--pdp-ice); }
.hiw-footnote { margin: 1.5rem auto 0; color: rgba(221, 246, 255, 0.5); font-size: 0.8rem; text-align: center; }
.fizz-icon { display: block; flex: none; }

.hiw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.hiw-actions.is-center { justify-content: center; }
.hiw-btn {
  --fizz-fill: var(--fizz-lagoon);
  --fizz-fill-text: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  height: 54px;
  padding: 0 1.9rem;
  border-radius: 999px;
  background: var(--pdp-ice);
  color: var(--fizz-navy);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.35s ease 0.1s, transform 0.15s ease;
}
.hiw-btn::before {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 0;
  z-index: -1;
  height: calc(100% + 14px);
  background: var(--fizz-fill);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6Q14 0 28 6T56 6V12H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 56px 12px, linear-gradient(#000 0 0) no-repeat 0 11px / 100% calc(100% - 11px);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6Q14 0 28 6T56 6V12H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 56px 12px, linear-gradient(#000 0 0) no-repeat 0 11px / 100% calc(100% - 11px);
  transform: translate3d(0, 100%, 0);
  transition: transform 0.75s cubic-bezier(0.2, 0.75, 0.25, 1);
  animation: fizz-btn-wave 1.1s linear infinite paused;
}
@media (hover: hover) {
  .hiw-btn:hover { color: #fff; }
  .hiw-btn:hover::before { transform: none; animation-play-state: running; }
}
.hiw-btn:active { transform: scale(0.96); }
.hiw-link { padding-bottom: 2px; border-bottom: 1.5px solid rgba(255, 255, 255, 0.35); color: #fff; font-weight: 600; text-decoration: none; transition: border-color 0.25s; }
.hiw-link:hover { border-color: #fff; }

/* ---------- How it works: hero ---------- */

.hiw-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(7.5rem, 13vw, 10rem) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 6vw, 5rem);
}
.hiw-title { margin: 0.8rem 0 0; color: #fff; font-size: clamp(2.8rem, 6.5vw, 5.4rem); line-height: 1; letter-spacing: -0.035em; }
.hiw-lead { max-width: 46ch; margin: 1.4rem 0 0; color: var(--pdp-muted); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; }
.hiw-hero-copy [data-reveal]:nth-child(2) { transition-delay: 0.08s; }
.hiw-hero-copy [data-reveal]:nth-child(3) { transition-delay: 0.16s; }
.hiw-hero-copy [data-reveal]:nth-child(4) { transition-delay: 0.24s; }
.hiw-hero-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 28px; }
.hiw-hero-img { width: 100%; height: 100%; object-fit: cover; }
.hiw-hero-stat {
  position: absolute;
  left: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(16, 29, 35, 0.75);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hiw-hero-stat strong { color: var(--pdp-ice); font-size: 2.6rem; line-height: 1; }
.hiw-hero-stat span { color: #fff; font-size: 0.85rem; line-height: 1.3; }

/* ---------- How it works: steps ---------- */

.hiw-steps { position: relative; }
.hiw-step-list { position: relative; display: grid; gap: clamp(3.5rem, 8vw, 7rem); margin: 0; padding: 0; list-style: none; }
.hiw-rail {
  position: absolute;
  top: clamp(14rem, 22vw, 18rem);
  bottom: clamp(8rem, 12vw, 10rem);
  left: 50%;
  width: 2px;
  border-radius: 2px;
  background: rgba(221, 246, 255, 0.12);
  translate: -1px 0;
}
.hiw-rail-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(var(--pdp-ice), var(--fizz-spark)); transform: scaleY(0); transform-origin: top; }
.hiw-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 8vw, 8rem);
  align-items: center;
}
.hiw-step:nth-child(even) .hiw-step-media { order: 2; }
.hiw-step-media { position: relative; aspect-ratio: 4 / 5; max-height: 640px; overflow: hidden; border-radius: 26px; background: var(--fizz-abyss); }
.hiw-step-video,
.hiw-step-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hiw-step-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pdp-ice);
  color: var(--fizz-navy);
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.5s var(--fizz-ease-out);
}
.hiw-step.is-current .hiw-step-badge { transform: scale(1.12); }
.hiw-step-num { margin: 0; color: var(--pdp-ice); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.hiw-step-title { margin: 0.6rem 0 0; color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -0.02em; }
.hiw-step-text { margin: 1rem 0 0; color: var(--pdp-muted); font-size: 1.08rem; line-height: 1.65; }
.hiw-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.hiw-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem 0.55rem 0.7rem;
  border: 1px solid rgba(221, 246, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 0.85rem;
}
.hiw-chips .fizz-icon { width: 20px; height: 20px; color: var(--pdp-ice); }
.hiw-tip {
  margin: 1.5rem 0 0;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--pdp-ice);
  border-radius: 0 14px 14px 0;
  background: rgba(196, 227, 253, 0.06);
  color: var(--pdp-text);
  font-size: 0.95rem;
  line-height: 1.55;
}
.hiw-tip span { display: block; margin-bottom: 0.25rem; color: var(--pdp-ice); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.hiw-steps-cta { margin-top: clamp(3rem, 6vw, 5rem); text-align: center; }

/* ---------- How it works: flow infographic ---------- */

.hiw-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: flow;
}
.hiw-flow li {
  position: relative;
  padding: 1.75rem 1.5rem;
  border: 1px solid rgba(221, 246, 255, 0.1);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(196, 227, 253, 0.07), rgba(196, 227, 253, 0.02));
  counter-increment: flow;
}
.hiw-flow li:nth-child(2) { transition-delay: 0.1s; }
.hiw-flow li:nth-child(3) { transition-delay: 0.2s; }
.hiw-flow li:nth-child(4) { transition-delay: 0.3s; }
.hiw-flow li::before { content: "0" counter(flow); position: absolute; top: 1.4rem; right: 1.5rem; color: rgba(221, 246, 255, 0.25); font-size: 0.85rem; font-weight: 600; }
.hiw-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.85rem;
  z-index: 1;
  width: 0.7rem;
  height: 0.7rem;
  border-top: 2px solid var(--pdp-ice);
  border-right: 2px solid var(--pdp-ice);
  transform: translateY(-50%) rotate(45deg);
}
.hiw-flow-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(196, 227, 253, 0.12); color: var(--pdp-ice); }
.hiw-flow-icon .fizz-icon { width: 32px; height: 32px; }
.hiw-flow h3 { margin: 1.25rem 0 0; color: #fff; font-size: 1.2rem; }
.hiw-flow p { margin: 0.5rem 0 0; color: var(--pdp-muted); font-size: 0.95rem; line-height: 1.55; }

/* ---------- How it works: parts diagram ---------- */

.hiw-anatomy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.hiw-anatomy .hiw-sub { margin-left: 0; }
.hiw-parts { display: grid; gap: 0.5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.hiw-parts li {
  display: flex;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid transparent;
  border-radius: 16px;
  cursor: default;
  transition: background-color 0.25s, border-color 0.25s;
}
.hiw-parts li.is-active { border-color: rgba(196, 227, 253, 0.3); background: rgba(196, 227, 253, 0.07); }
.hiw-parts h3 { margin: 0; color: #fff; font-size: 1.05rem; }
.hiw-parts p { margin: 0.25rem 0 0; color: var(--pdp-muted); font-size: 0.92rem; line-height: 1.5; }
.hiw-part-dot,
.hiw-marker {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pdp-ice);
  color: var(--fizz-navy);
  font-size: 0.85rem;
  font-weight: 700;
}
.hiw-figure {
  position: relative;
  width: min(100%, 520px);
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  border-radius: 28px;
  background: radial-gradient(60% 60% at 50% 45%, var(--fizz-raised) 0%, var(--fizz-abyss) 70%);
}
.hiw-figure-img { width: 100%; height: 100%; object-fit: cover; }
.hiw-marker {
  position: absolute;
  padding: 0;
  border: 0;
  cursor: pointer;
  translate: -50% -50%;
  box-shadow: 0 0 0 0 rgba(196, 227, 253, 0.6);
  animation: hiw-ping 2.4s ease-out infinite;
  transition: scale 0.25s var(--fizz-ease-out), background-color 0.25s;
}
.hiw-marker:nth-of-type(2) { animation-delay: 0.4s; }
.hiw-marker:nth-of-type(3) { animation-delay: 0.8s; }
.hiw-marker:nth-of-type(4) { animation-delay: 1.2s; }
.hiw-marker:nth-of-type(5) { animation-delay: 1.6s; }
.hiw-marker.is-active,
.hiw-marker:hover { background: #fff; scale: 1.2; }
.hiw-marker:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes hiw-ping {
  0% { box-shadow: 0 0 0 0 rgba(196, 227, 253, 0.55); }
  70%, 100% { box-shadow: 0 0 0 14px rgba(196, 227, 253, 0); }
}

/* ---------- How it works: numbers ---------- */

.hiw-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.hiw-stats div {
  padding: clamp(1.5rem, 3vw, 2.25rem) 1.25rem;
  border: 1px solid rgba(221, 246, 255, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}
.hiw-stats dt { color: #fff; font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hiw-stats dd { margin: 0.6rem 0 0; color: var(--pdp-muted); font-size: 0.92rem; line-height: 1.45; }

/* ---------- How it works: tutorial, FAQ, CTA ---------- */

.hiw-video { overflow: hidden; border: 1px solid rgba(221, 246, 255, 0.12); border-radius: 26px; background: #000; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35); }
.hiw-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.hiw-video.is-desktop { aspect-ratio: 16 / 9; }
.hiw-video.is-mobile { display: none; max-width: 480px; margin: 0 auto; aspect-ratio: 4 / 5; }
.hiw-faq-list { max-width: 820px; margin: 0 auto; }
.hiw-faq-list .pdp-accordion summary { font-size: 1rem; letter-spacing: 0.02em; text-transform: none; }
.hiw-faq-list .pdp-accordion-body { color: var(--pdp-muted); font-size: 1rem; line-height: 1.6; }
.hiw-cta {
  max-width: 1200px;
  margin: 0 auto clamp(4rem, 8vw, 6rem);
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 3rem);
  border-radius: 32px;
  background: linear-gradient(135deg, var(--fizz-lagoon) 0%, var(--fizz-raised) 60%, var(--fizz-surface) 100%);
  text-align: center;
}

/* Bottle PDP: guide CTA after Inside the bottle — quiet glass, not a solid card wash */
.bottle-guide-cta {
  max-width: 48rem;
  margin: 0 auto clamp(3rem, 7vw, 5rem);
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5rem;
  background: rgba(12, 23, 29, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: center;
}
.bottle-guide-cta .hiw-head { margin-bottom: 0; }
.bottle-guide-cta .hiw-actions { margin-top: 1.75rem; }
@media (max-width: 767px) {
  .bottle-guide-cta { margin-left: 1rem; margin-right: 1rem; }
  .bottle-guide-cta .hiw-actions { flex-direction: column; }
}

@media (max-width: 991px) {
  .hiw-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hiw-flow li:nth-child(2)::after { display: none; }
  .hiw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hiw-hero,
  .hiw-anatomy,
  .hiw-step { grid-template-columns: minmax(0, 1fr); }
  .hiw-hero { padding-top: 6.5rem; }
  .hiw-step:nth-child(even) .hiw-step-media { order: 0; }
  .hiw-step-media { aspect-ratio: 1 / 1; }
  .hiw-rail { display: none; }
  .hiw-flow { grid-template-columns: minmax(0, 1fr); }
  .hiw-flow li::after { display: none; }
  .hiw-anatomy .hiw-figure { order: -1; }
  .hiw-video.is-desktop { display: none; }
  .hiw-video.is-mobile { display: block; }
  .hiw-cta { margin-left: 1rem; margin-right: 1rem; }
}

/* ---------- About ---------- */

.about-hero { position: relative; display: flex; align-items: flex-end; min-height: min(92vh, 860px); }
.about-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 38, 46, 0.15) 0%, rgba(22, 38, 46, 0.35) 45%, var(--fizz-navy) 100%); }
.about-hero-copy { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem) clamp(3rem, 7vw, 5rem); }
.about-title { margin: 0.8rem 0 0; color: #fff; font-size: clamp(2.8rem, 7.5vw, 6rem); line-height: 0.98; letter-spacing: -0.035em; }
.about-lead { max-width: 48ch; margin: 1.25rem 0 0; color: rgba(255, 255, 255, 0.85); font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; }
.about-hero-copy [data-reveal]:nth-child(2) { transition-delay: 0.1s; }
.about-hero-copy [data-reveal]:nth-child(3) { transition-delay: 0.2s; }

.about-mission { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.about-mission-copy p { margin: 0 0 1.25rem; color: var(--pdp-muted); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.7; }
.about-mission-copy p:first-child { color: #fff; }

/* 1 charge = 33 cans */
.about-cans-graphic { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); }
.about-cans-charge {
  display: grid;
  flex: none;
  justify-items: center;
  gap: 0.6rem;
  padding: 1.5rem 1.75rem;
  border-radius: 24px;
  background: rgba(196, 227, 253, 0.1);
  color: var(--pdp-ice);
  font-weight: 600;
}
.about-cans-equals { color: rgba(221, 246, 255, 0.4); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 300; }
.about-cans-grid { display: grid; grid-template-columns: repeat(11, 1fr); gap: clamp(0.35rem, 1vw, 0.7rem); max-width: 560px; margin: 0; padding: 0; list-style: none; }
.can-icon { display: block; width: clamp(18px, 3.2vw, 34px); height: auto; color: var(--pdp-ice); }
.about-cans-grid li { opacity: 1; transform: none; }
html.fizz-motion .about-cans-grid li { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.6); transition: opacity 0.35s ease, transform 0.5s var(--fizz-ease-out); transition-delay: calc(var(--i) * 30ms); }
html.fizz-motion .about-cans.is-filled .about-cans-grid li { opacity: 1; transform: none; }

/* Calculator */
.about-calc-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.75rem, 5vw, 3.5rem);
  border: 1px solid rgba(221, 246, 255, 0.12);
  border-radius: 32px;
  background: linear-gradient(135deg, var(--fizz-lagoon) 0%, var(--fizz-raised) 65%);
}
.about-calc-input .hiw-h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.about-calc-label { display: block; margin: 2rem 0 1rem; color: var(--pdp-text); font-size: 1rem; }
.about-calc-label output { display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.2rem; margin-left: 0.35rem; padding: 0 0.6rem; border-radius: 999px; background: var(--pdp-ice); color: var(--fizz-navy); font-weight: 700; }
.about-calc-range {
  width: 100%;
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--pdp-ice) var(--fill, 15%), rgba(221, 246, 255, 0.18) var(--fill, 15%));
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.about-calc-range::-webkit-slider-thumb { width: 28px; height: 28px; border: 4px solid var(--fizz-navy); border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); -webkit-appearance: none; appearance: none; }
.about-calc-range::-moz-range-thumb { width: 22px; height: 22px; border: 4px solid var(--fizz-navy); border-radius: 50%; background: #fff; }
.about-calc-range:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.about-calc-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0; }
.about-calc-results div { padding: 1.25rem; border-radius: 18px; background: rgba(10, 26, 34, 0.45); }
.about-calc-results dt { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.about-calc-results dd { margin: 0.5rem 0 0; color: var(--pdp-muted); font-size: 0.88rem; line-height: 1.4; }
.about-calc-results div:first-child dt { color: var(--pdp-ice); }
.about-calc-note { grid-column: 1 / -1; margin: 0; text-align: left; }

/* Pillars */
.about-pillar-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.about-pillar-list li { padding: 1.75rem 1.5rem; border: 1px solid rgba(221, 246, 255, 0.1); border-radius: 22px; background: rgba(255, 255, 255, 0.03); transition: border-color 0.3s, transform 0.5s var(--fizz-ease-out); }
.about-pillar-list li:nth-child(2) { transition-delay: 0.08s; }
.about-pillar-list li:nth-child(3) { transition-delay: 0.16s; }
.about-pillar-list li:nth-child(4) { transition-delay: 0.24s; }
.about-pillar-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(196, 227, 253, 0.12); color: var(--pdp-ice); }
.about-pillar-list h3 { margin: 1.25rem 0 0; color: #fff; font-size: 1.2rem; }
.about-pillar-list p { margin: 0.5rem 0 0; color: var(--pdp-muted); font-size: 0.95rem; line-height: 1.55; }

/* Photo strip */
.about-gallery { overflow: hidden; padding: 1rem 0 clamp(3rem, 6vw, 5rem); }
.about-gallery-track { display: flex; gap: 1rem; width: max-content; margin: 0; padding: 0; list-style: none; animation: about-scroll 60s linear infinite; }
.about-gallery:hover .about-gallery-track { animation-play-state: paused; }
.about-gallery-track li { flex: none; width: clamp(200px, 24vw, 320px); aspect-ratio: 3 / 4; overflow: hidden; border-radius: 22px; }
.about-gallery-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--fizz-ease-out); }
.about-gallery-track li:hover .about-gallery-img { transform: scale(1.05); }
@keyframes about-scroll { to { transform: translate3d(calc(-50% - 0.5rem), 0, 0); } }

/* Values */
.about-value-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); margin: 0; padding: 0; list-style: none; }
.about-value-list li { padding-top: 1.5rem; border-top: 1px solid rgba(221, 246, 255, 0.2); }
.about-value-list li:nth-child(2) { transition-delay: 0.1s; }
.about-value-list li:nth-child(3) { transition-delay: 0.2s; }
.about-value-list span { color: var(--pdp-ice); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.12em; }
.about-value-list h3 { margin: 0.75rem 0 0; color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.about-value-list p { margin: 0.6rem 0 0; color: var(--pdp-muted); font-size: 1rem; line-height: 1.6; }

@media (max-width: 991px) {
  .about-pillar-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-calc-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .about-mission,
  .about-value-list,
  .about-pillar-list { grid-template-columns: minmax(0, 1fr); }
  .about-cans-graphic { flex-direction: column; }
  .about-cans-grid { grid-template-columns: repeat(11, 1fr); }
  .about-calc-results dt { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .about-gallery-track { animation: none; }
  .hiw-marker { animation: none; }
}

/* ---------- Dark theme details ---------- */

/* The fixed bubble background reads as deep water instead of bright sky */
.fizz-bg-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 14, 18, 0.45) 0%, rgba(12, 23, 29, 0.72) 100%);
  pointer-events: none;
}

/* Keep Just Fizz + explore carousel on the coded water field (no video) */
.fizz-just,
.fizz-just + .slider-section {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: transparent;
}

/* "How it works" autoplay tabs: Spark fill + kinetic labels + bubble shimmer */
.auto-tabs-link { color: var(--fizz-haze); }
.auto-tabs-link .fizz-heading-tab {
  color: inherit;
  opacity: 0.55;
  letter-spacing: 0.04em;
  transition: color 0.4s ease, opacity 0.4s ease, letter-spacing 0.4s ease;
}
.auto-tabs-link.is-complete:not(.w--current) { color: var(--fizz-fog); }
.auto-tabs-link.is-complete:not(.w--current) .fizz-heading-tab { opacity: 0.78; }
.auto-tabs-link.w--current {
  color: #fff;
  border-left-color: var(--fizz-line);
}
.auto-tabs-link.w--current .fizz-heading-tab {
  color: #fff;
  opacity: 1;
  letter-spacing: 0.02em;
  animation: fizz-tab-settle 0.4s var(--fizz-ease-out);
}
@keyframes fizz-tab-settle {
  0% { transform: scale(0.96); }
  40% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

.auto-tabs-progress-bar {
  overflow: hidden;
  background-color: var(--fizz-spark);
  background-image: linear-gradient(180deg, var(--fizz-ice) 0%, var(--fizz-spark) 55%, #3ab8e8 100%);
  box-shadow: 0 0 14px rgba(95, 216, 255, 0.55), 0 0 28px rgba(95, 216, 255, 0.2);
}
.auto-tabs-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1.1px, transparent 1.6px) 30% 110% / 5px 5px no-repeat,
    radial-gradient(circle, rgba(196, 227, 253, 0.9) 0 1.4px, transparent 2px) 70% 130% / 6px 6px no-repeat,
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 0.9px, transparent 1.4px) 45% 150% / 4px 4px no-repeat;
}
.auto-tabs-link.w--current .auto-tabs-progress-bar::after {
  opacity: 1;
  animation: fizz-bar-bubbles-y 2.2s ease-in infinite;
}
.auto-tabs-link.is-complete:not(.w--current) .auto-tabs-progress-bar {
  background-color: rgba(196, 227, 253, 0.4);
  background-image: none;
  box-shadow: none;
}
.auto-tabs-link.is-complete:not(.w--current) .auto-tabs-progress-bar::after { display: none; }

@keyframes fizz-bar-bubbles-y {
  0% { transform: translate3d(0, 20%, 0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate3d(0, -120%, 0); opacity: 0; }
}
@keyframes fizz-bar-bubbles-x {
  0% { transform: translate3d(-20%, 0, 0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate3d(120%, 0, 0); opacity: 0; }
}

@media (min-width: 768px) {
  .auto-tabs-link { position: relative; }
}
@media screen and (max-width: 767px), screen and (max-width: 991px) and (max-height: 500px) and (orientation: landscape) {
  .auto-tabs-progress-bar {
    background-image: linear-gradient(90deg, var(--fizz-ice) 0%, var(--fizz-spark) 55%, #3ab8e8 100%);
  }
  .auto-tabs-link.w--current .auto-tabs-progress-bar::after {
    animation-name: fizz-bar-bubbles-x;
  }
}
@media (prefers-reduced-motion: reduce) {
  .auto-tabs-link.w--current .fizz-heading-tab { animation: none; }
  .auto-tabs-progress-bar::after,
  .auto-tabs-link.w--current .auto-tabs-progress-bar::after {
    display: none;
    animation: none;
  }
}

/* Slideshow progress + focus in Spark */
.fizz-more-dot span::after { background: linear-gradient(90deg, var(--fizz-ice), var(--fizz-spark)); }

/* Hero card (js/fizz-home.js): video + text layers scale + float up together on first scroll,
   as if the sparkling bubble field is carrying the card away. Shrink spans the pinned stretch
   and hands off to the next section rising over it. */
.fizz-hero { height: 230vh; }
@media (max-width: 767px) { .fizz-hero { height: 200vh; } }
/* The hero gradient overlays are decorative; on mobile they sat over the CTAs and ate taps */
.background-image-overlay { pointer-events: none; }
.fizz-hero .hero-video_container,
.fizz-hero .fizz-hero-content {
  overflow: hidden;
  /* Anchor low so scale itself reads as a lift; JS adds translateY on top. */
  transform-origin: 50% 82%;
  will-change: transform, opacity;
  transition: box-shadow 0.45s ease;
}
/* Keep the hero copy and CTAs clear of the browser's bottom bar and the fixed "Scroll to explore"
   cue (about 7rem tall, pinned to the bottom): svh is the visible height with toolbars shown, and the
   bottom padding lifts the centred block above the cue so everything shows before the first scroll. */
.fizz-hero .hero-content_container {
  height: 100vh;
  height: 100svh;
}
.fizz-hero .fizz-section.is-hero {
  box-sizing: border-box;
  padding-top: 5rem;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 9.5rem);
}
.fizz-hero.is-carded .hero-video_container {
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.4),
    0 0 60px rgba(95, 216, 255, 0.12);
}

/* ==========================================================================
   Style guide (style-guide.html)
   ========================================================================== */

.sg-hero { max-width: 1200px; margin: 0 auto; padding: clamp(7.5rem, 13vw, 10rem) clamp(1.25rem, 5vw, 3rem) clamp(2rem, 4vw, 3rem); }
.sg-toc { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.sg-toc a {
  padding: 0.55rem 1rem;
  border: 1px solid var(--fizz-line);
  border-radius: 999px;
  color: var(--fizz-mist);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.sg-toc a:hover { border-color: var(--fizz-ice); background: var(--fizz-ice); color: var(--fizz-deep); }
.sg-section { max-width: 1200px; margin: 0 auto; padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 5vw, 3rem); border-top: 1px solid var(--fizz-line); scroll-margin-top: 90px; }
.sg-section-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sg-section-head .hiw-sub { margin-left: 0; }
.sg h3 { margin: 0; color: #fff; font-size: 1.05rem; }
.sg code { padding: 0.1em 0.4em; border-radius: 6px; background: rgba(214, 238, 248, 0.08); color: var(--fizz-ice); font-size: 0.82em; font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* Swatches */
.sg-group { display: grid; grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; padding: 1.75rem 0; border-top: 1px solid var(--fizz-line); }
.sg-group:first-of-type { border-top: 0; padding-top: 0; }
.sg-group-head p { margin: 0.5rem 0 0; color: var(--fizz-fog); font-size: 0.9rem; line-height: 1.55; }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.sg-swatch { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--fizz-line); border-radius: 18px; background: var(--fizz-surface); cursor: pointer; transition: transform 0.35s var(--fizz-ease-out), border-color 0.25s; }
.sg-swatch:hover,
.sg-swatch:focus-visible { transform: translateY(-3px); border-color: var(--fizz-spark); outline: none; }
.sg-swatch-chip { position: relative; display: flex; align-items: flex-end; height: 104px; padding: 0.6rem 0.75rem; color: #fff; font-size: 0.75rem; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.sg-swatch-chip.is-light { color: var(--fizz-deep); }
.sg-swatch-meta { display: grid; gap: 0.25rem; padding: 0.85rem 0.9rem 1rem; }
.sg-swatch-meta strong { color: #fff; font-size: 0.95rem; }
.sg-swatch-meta code { justify-self: start; }
.sg-swatch-meta span { color: var(--fizz-fog); font-size: 0.8rem; line-height: 1.45; }
.sg-gradients { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.sg-gradient { display: grid; align-content: end; gap: 0.3rem; min-height: 150px; padding: 1.1rem; border: 1px solid var(--fizz-line); border-radius: 18px; }
.sg-gradient strong { color: #fff; }
.sg-gradient span { color: var(--fizz-fog); font-size: 0.8rem; }
.sg-pairs { margin-top: 3rem; }
.sg-pairs > p { max-width: 62ch; margin: 0.6rem 0 1.5rem; color: var(--fizz-fog); line-height: 1.6; }
.sg-pair-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sg-pair-row figure { margin: 0; overflow: hidden; border-radius: 18px; background: var(--fizz-surface); }
.sg-pair-row img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sg-pair-row figcaption { display: flex; align-items: center; gap: 0.35rem; padding: 0.85rem 1rem; color: var(--fizz-fog); font-size: 0.82rem; }
.sg-pair-row figcaption span { width: 18px; height: 18px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; }
.sg-pair-row figcaption span:last-of-type { margin-right: 0.4rem; }

/* Type */
.sg-type { border-top: 1px solid var(--fizz-line); }
.sg-type-row { display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr); gap: 1rem 2.5rem; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--fizz-line); }
.sg-type-meta { display: grid; gap: 0.35rem; }
.sg-type-meta strong { color: #fff; }
.sg-type-meta code { justify-self: start; white-space: normal; }
.sg-type-meta span { color: var(--fizz-haze); font-size: 0.82rem; }
.sg-type-row p { margin: 0; color: var(--fizz-mist); }
.sg-t-display { font-size: clamp(2.8rem, 6.5vw, 5.4rem); font-weight: 700; line-height: 1; letter-spacing: -0.035em; color: #fff !important; }
.sg-t-h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; color: #fff !important; }
.sg-t-h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.1; color: #fff !important; }
.sg-t-eyebrow { color: var(--fizz-ice) !important; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.sg-t-lead { color: var(--fizz-fog) !important; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; }
.sg-t-body { color: var(--fizz-fog) !important; line-height: 1.6; }
.sg-t-small { color: var(--fizz-haze) !important; font-size: 0.82rem; line-height: 1.5; }
.sg-t-button { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.sg-rules { display: grid; gap: 0.6rem; margin: 1.75rem 0 0; padding: 0; list-style: none; color: var(--fizz-fog); }
.sg-rules strong { display: inline-block; min-width: 3.4rem; color: var(--fizz-ice); }

/* Demos */
.sg-demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sg-demo { padding: 1.25rem; border: 1px solid var(--fizz-line); border-radius: 22px; background: var(--fizz-surface); }
.sg-demo.sg-span-2 { grid-column: span 2; }
.sg-demo-stage { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; min-height: 150px; margin-bottom: 1.1rem; padding: 1.25rem; border-radius: 16px; background: var(--fizz-deep); }
.sg-demo p { margin: 0.4rem 0 0; color: var(--fizz-fog); font-size: 0.88rem; line-height: 1.5; }
.sg .sg-wide-btn { max-width: 320px; }
.sg .sg-outline { width: 180px; }
.sg-static-arrow { position: static; translate: none; }
.sg .sg-mini-btn { display: inline-flex; align-items: center; width: auto; height: 44px; padding: 0 1.1rem; border-radius: 999px; background: var(--fizz-ice); color: var(--fizz-deep); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; }
.sg-plans { width: 100%; max-width: 460px; }
.sg-accordion { display: block; text-align: left; }
.sg-accordion .pdp-accordion { width: 100%; }
.sg-toast { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.8rem 1.1rem; border: 1px solid var(--fizz-line); border-radius: 999px; background: var(--fizz-surface); color: #fff; }
.sg-loaders { gap: 2rem; }
.sg-loader { position: relative; display: block; width: 160px; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(214, 238, 248, 0.15); }
.sg-loader.is-vertical { width: 4px; height: 110px; }
.sg-loader i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--fizz-ice), var(--fizz-spark)); box-shadow: 0 0 12px rgba(95, 216, 255, 0.5); transform-origin: left; animation: sg-load 3s linear infinite; }
.sg-loader.is-vertical i { background: linear-gradient(180deg, var(--fizz-ice), var(--fizz-spark)); transform-origin: top; animation-name: sg-load-y; }
@keyframes sg-load { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sg-load-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.sg-play { padding: 0.5rem 1rem; border: 1px solid var(--fizz-line); border-radius: 999px; background: transparent; color: var(--fizz-mist); font-size: 0.8rem; cursor: pointer; }
.sg-play:hover { border-color: var(--fizz-spark); color: var(--fizz-spark); }
.sg-reveal-demo { display: flex; gap: 0.5rem; width: 100%; justify-content: center; }
.sg-reveal-demo span { width: 46px; height: 46px; border-radius: 12px; background: var(--fizz-glow); }
.sg-reveal-demo.is-playing span { animation: sg-rise 1s var(--fizz-ease-out) backwards; }
.sg-reveal-demo.is-playing span:nth-child(2) { animation-delay: 0.09s; }
.sg-reveal-demo.is-playing span:nth-child(3) { animation-delay: 0.18s; }
@keyframes sg-rise { from { opacity: 0; transform: translate3d(0, 40px, 0); } }

/* Layout, icons, voice, a11y */
.sg-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sg-voice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sg-card { padding: 1.5rem; border: 1px solid var(--fizz-line); border-radius: 22px; background: var(--fizz-surface); }
.sg-card h3 { margin-bottom: 1rem; }
.sg-card.is-do { box-shadow: inset 3px 0 0 var(--fizz-fresh); }
.sg-card.is-dont { box-shadow: inset 3px 0 0 var(--fizz-cherry); }
.sg-list { display: grid; gap: 0.55rem; margin: 0; padding-left: 1.1rem; color: var(--fizz-fog); line-height: 1.5; }
.sg-list strong { color: #fff; }
.sg-space { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.sg-space li { display: flex; align-items: center; gap: 0.75rem; }
.sg-space span { height: 12px; border-radius: 3px; background: var(--fizz-spark); }
.sg-radii { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; color: var(--fizz-fog); font-size: 0.9rem; }
.sg-radii li { display: flex; align-items: center; gap: 0.75rem; }
.sg-radii span { width: 56px; height: 40px; border: 2px solid var(--fizz-ice); }
.sg-table { width: 100%; border-collapse: collapse; color: var(--fizz-fog); font-size: 0.9rem; }
.sg-table th,
.sg-table td { padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--fizz-line); text-align: left; vertical-align: top; }
.sg-table th { color: #fff; font-weight: 600; white-space: nowrap; }
.sg-motion-table { margin-top: 1.5rem; }
.sg-dot { display: inline-block; width: 12px; height: 12px; margin-right: 0.5rem; border-radius: 50%; vertical-align: -1px; }
.sg-icons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.sg-icons li { display: grid; justify-items: center; gap: 0.5rem; padding: 1rem 0.5rem; border-radius: 14px; background: var(--fizz-deep); color: var(--fizz-ice); font-size: 0.8rem; }
.sg-icons li span { color: var(--fizz-fog); }
.sg-logo-stage { display: grid; place-items: center; margin-bottom: 1rem; padding: 2.5rem; border-radius: 16px; background: var(--fizz-abyss); }
.sg-logo-stage img { width: min(220px, 70%); }
.sg-imagery { display: grid; grid-template-columns: 0.8fr 1.07fr 0.8fr; gap: 1rem; align-items: end; }
.sg-imagery figure { margin: 0; overflow: hidden; border-radius: 18px; background: var(--fizz-surface); }
.sg-imagery img { display: block; width: 100%; object-fit: cover; }
.sg-imagery .is-45 img { aspect-ratio: 4 / 5; }
.sg-imagery .is-43 img { aspect-ratio: 4 / 3; }
.sg-imagery .is-11 img { aspect-ratio: 1 / 1; background: #d4d3cc; object-fit: contain; }
.sg-imagery figcaption { padding: 0.75rem 1rem; color: var(--fizz-fog); font-size: 0.82rem; }
.sg-copied {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 10000;
  margin: 0;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  background: var(--fizz-ice);
  color: var(--fizz-deep);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, 20px, 0);
  transition: opacity 0.3s, transform 0.4s var(--fizz-ease-out);
}
.sg-copied.is-on { opacity: 1; transform: translate3d(-50%, 0, 0); }

@media (max-width: 991px) {
  .sg-demo-grid,
  .sg-voice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-gradients,
  .sg-pair-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .sg-group,
  .sg-type-row,
  .sg-layout,
  .sg-voice,
  .sg-demo-grid,
  .sg-gradients,
  .sg-pair-row,
  .sg-imagery { grid-template-columns: minmax(0, 1fr); }
  .sg-demo.sg-span-2 { grid-column: auto; }
  .sg-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Sizing pass: sections and media use the screen on every device
   ========================================================================== */

/* Homepage story ("Turn boring flat water…") — don't force a full viewport of empty navy under the copy */
.about-section { display: flex; align-items: flex-start; min-height: 0; }
.story-image { width: clamp(220px, 24vw, 440px); max-height: 80svh; }

/* Homepage sliders — fixed heights by viewport height (not % of screen) */
.basic-slide-wrapper,
.product-slide-card {
  height: 420px;
  min-height: 420px;
}
@media (min-height: 700px) {
  .basic-slide-wrapper,
  .product-slide-card { height: 520px; min-height: 520px; }
}
@media (min-height: 850px) {
  .basic-slide-wrapper,
  .product-slide-card { height: 620px; min-height: 620px; }
}
@media (min-height: 1000px) {
  .basic-slide-wrapper,
  .product-slide-card { height: 720px; min-height: 720px; }
}
@media (min-height: 1200px) {
  .basic-slide-wrapper,
  .product-slide-card { height: 800px; min-height: 800px; }
}
/* Narrow slide masks so cards read portrait (~2:3) vs the height ladder */
.basic-mask,
.product-mask { width: 30%; max-width: 420px; }
@media (max-width: 991px) {
  .basic-mask,
  .product-mask { width: 38%; max-width: 380px; }
}
@media (max-width: 767px) {
  .basic-mask,
  .product-mask { width: 62%; max-width: 340px; }
}
.slider-section { padding-top: clamp(2rem, 5vw, 4.5rem); padding-bottom: clamp(2rem, 5vw, 4.5rem); }

/* Homepage infinite-loop carousels (driven by js/fizz-loop-slider.js) */
.full-width-slider-wrapper,
.product-slider-wrapper {
  perspective: 1200px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  /* Soft bow on the band — center dips slightly vs the edges */
  -webkit-mask-image: radial-gradient(140% 120% at 50% 50%, #000 62%, transparent 88%);
  mask-image: radial-gradient(140% 120% at 50% 50%, #000 62%, transparent 88%);
}
/* Stands in for Webflow's .w-slider now that the class is gone */
[data-fizz-loop] {
  position: relative;
  text-align: center;
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
[data-fizz-loop].is-dragging,
[data-fizz-loop].is-dragging * { cursor: grabbing; }
[data-fizz-loop] .card-hit-link { cursor: inherit; }
/* Every slide sits on the mask's box; JS moves each one by translateX. A one-cell grid
   (rather than position: absolute) lets the mask keep the card height from the ladder above.
   The mask owns the 3D scene so the root stays flat and the arrows' z-index still beats
   the edge of a rotated card poking forward. */
[data-fizz-loop] .w-slider-mask {
  display: grid;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}
[data-fizz-loop] .w-slide {
  grid-area: 1 / 1;
  transform-style: preserve-3d;
  will-change: transform;
}
[data-fizz-loop]:not(.is-loop-ready) .w-slide:not(:first-child) { visibility: hidden; }
.basic-slide-wrapper,
.product-slide-card {
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}
[data-fizz-loop] .feature-background,
[data-fizz-loop] .product-image { will-change: transform; }
/* Depth dim: side cards darken as --loop-depth (0 centre → 1 one card out) rises */
[data-fizz-loop] .basic-slide-wrapper::after,
[data-fizz-loop] .product-slide-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: inherit;
  background-color: #07090c;
  opacity: calc(var(--loop-depth, 0) * 0.5);
  pointer-events: none;
}
/* Menu cards: title + CTA centered in the card (no trailing arrow) */
[data-fizz-loop] .basic-slide-wrapper {
  align-items: center;
}
[data-fizz-loop] .basic-slide-content {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  text-align: center;
  display: flex;
  justify-content: center;
}
[data-fizz-loop] .stacked-intro {
  width: 100%;
  align-items: center;
  place-items: center;
  text-align: center;
}
[data-fizz-loop] .stacked-intro .fizz-heading-lg {
  text-align: center;
  width: 100%;
}
[data-fizz-loop] .underline-link-2 {
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  width: auto;
  margin-inline: auto;
  grid-column-gap: 0;
}
[data-fizz-loop] .link-arrow-wrapper,
[data-fizz-loop] .arrow-icon {
  display: none !important;
}
/* Active reveal: the centred card's heading and CTA rise in; side cards stay muted */
[data-fizz-loop] .stacked-intro > * {
  opacity: 0.35;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-fizz-loop] .w-slide.is-active .stacked-intro > * {
  opacity: 1;
  transform: none;
}
[data-fizz-loop] .w-slide.is-active .stacked-intro > :nth-child(2) { transition-delay: 0.08s; }
/* Dots: the active one stretches into a pill */
[data-fizz-loop] .w-slider-nav.w-round > .w-slider-dot {
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease;
}
[data-fizz-loop] .w-slider-nav.w-round > .w-slider-dot.w-active { width: 3em; }
[data-fizz-loop] .w-slider-dot:focus-visible { box-shadow: 0 0 0 2px #fff; }
.dark-slide-arrow {
  z-index: 30;
}
/* Webflow's interaction fades the arrows in on hover; keyboard focus shows them too */
[data-fizz-loop] .dark-slide-arrow:focus-visible {
  opacity: 1 !important;
  transform: none !important;
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .full-width-slider-wrapper,
  .product-slider-wrapper {
    perspective: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .basic-slide-wrapper,
  .product-slide-card {
    transform: none !important;
    will-change: auto;
  }
  [data-fizz-loop] .stacked-intro > *,
  [data-fizz-loop] .w-slider-nav.w-round > .w-slider-dot { transition: none; }
  [data-fizz-loop] .stacked-intro > * { transform: none; }
}

/* Dark theme: the bottle page's feature scroll sits on deep water, not bright sky */
.pdp-kf-video-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 14, 18, 0.55) 0%, rgba(12, 23, 29, 0.8) 100%);
  pointer-events: none;
}

/* "More from Fizz" sizing is defined with the shared chrome rules below. */

/* Content pages: steps + parts diagram scale with the viewport height */
.hiw-step-media { max-height: min(80svh, 760px); }

@media (max-width: 991px) {
  .story-image { width: 44vw; }
  .auto-tabs-content { aspect-ratio: auto; height: min(56svh, 90vw); }
  /* Stack the slideshow on tablets too, so the photo can be big */
  .fizz-more-inner { grid-template-columns: minmax(0, 1fr); }
  .fizz-more-media { aspect-ratio: auto; height: min(68svh, 110vw); max-height: none; }
  .hiw-hero,
  .hiw-anatomy { grid-template-columns: minmax(0, 1fr); }
  .hiw-hero-media { aspect-ratio: auto; height: min(56svh, 90vw); }
}
@media (max-width: 767px) {
  .about-section { min-height: 0; }
  .hiw-step-media { aspect-ratio: auto; height: min(70svh, 110vw); }
  .fizz-more { min-height: 0; }
}
@media (max-width: 479px) {
  .story-image { width: 42vw; height: 63vw; }
  .shop-card-media { aspect-ratio: 4 / 5; }
}

/* ==========================================================================
   Homepage story: photos floating in seltzer (motion, bubbles, gallery: js/fizz-seltzer.js)
   Stack, back to front: deep bubbles (1) → far photos (2) → nearer bubbles (3)
   → mid photos (4) → copy + hero photos (.grid-wrapper, 25) → front bubbles (26)
   ========================================================================== */

/* The section rises over the end of the hero: its top is clear water that deepens, so the
   bubble video and the hero card sink into it as you scroll. --dive is the overlap. */
.about-section[data-fizz-seltzer] {
  --dive: min(32svh, 300px);
  isolation: isolate;
  overflow-x: clip; /* photos can drift past the edges without a sideways scroll */
  margin-top: calc(-1 * var(--dive));
  padding-top: calc(70px + var(--dive));
  /* Extra bottom pad + solid deep tail so the featured stage continues without a seam */
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  background: linear-gradient(180deg,
    rgba(12, 23, 29, 0) 0,
    rgba(12, 23, 29, 0.55) calc(var(--dive) * 0.55),
    var(--fizz-deep) calc(var(--dive) * 1.25),
    var(--fizz-deep) 100%);
  pointer-events: none; /* the clear top must not block the hero underneath */
}
@media (min-width: 768px) {
  /* Enough water for floaters around the copy, without a full extra viewport before FYC */
  .about-section[data-fizz-seltzer] {
    min-height: calc(max(72svh, 560px) + var(--dive));
    align-items: flex-start;
  }
}
/* Light filtering down from the surface, depth pooling lower down. Both fade out before
   the edges, so there is no seam with the sections around it. */
.about-section[data-fizz-seltzer]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 38% at 50% 30%, rgba(95, 216, 255, 0.06), transparent 70%),
    radial-gradient(60% 26% at 50% 76%, rgba(23, 96, 122, 0.22), transparent 72%);
}
.fizz-seltzer-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Bubbles fade in from below and out toward the top, no hard edges between sections */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 82%, transparent 100%);
}
.fizz-seltzer-layer.is-deep { z-index: 1; }
.fizz-seltzer-layer.is-mid { z-index: 3; }
.fizz-seltzer-layer.is-front { z-index: 26; }
/* Only the copy and the photos take taps (the full-width grid would swallow them) */
.about-section[data-fizz-seltzer] .grid-wrapper { pointer-events: none; }
.about-section[data-fizz-seltzer] .story-content,
.about-section[data-fizz-seltzer] .story-image,
.about-section[data-fizz-seltzer] .fizz-floater { pointer-events: auto; }
.about-section[data-fizz-seltzer] .story-content { will-change: opacity, transform; }

/* Hero photos */
.about-section[data-fizz-seltzer] .story-image {
  cursor: zoom-in;
  transform-origin: 50% 60%;
  will-change: transform, opacity;
  box-shadow: 0 36px 70px -28px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(214, 238, 248, 0.06);
  -webkit-tap-highlight-color: transparent;
}
/* A glassy sheen, like a photo seen through the side of a glass */
.about-section[data-fizz-seltzer] .story-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 26%, transparent 45%, transparent 72%, rgba(95, 216, 255, 0.08) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(214, 238, 248, 0.08);
  transition: box-shadow 0.4s ease, background-color 0.4s ease;
}
.about-section[data-fizz-seltzer] .story-image:hover::after {
  background-color: rgba(196, 227, 253, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 0 0 1px rgba(196, 227, 253, 0.28);
}
.about-section[data-fizz-seltzer] .story-image:focus-visible {
  outline: 2px solid var(--fizz-spark);
  outline-offset: 4px;
}
.about-section[data-fizz-seltzer] .story-background-wrapper { will-change: transform; }

/* Floating photos at depth */
.fizz-floater {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  border: 0;
  border-radius: 0.6rem;
  background: none;
  cursor: zoom-in;
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}
.fizz-floater.is-far { z-index: 2; filter: blur(var(--blur, 0px)) saturate(0.75); }
.fizz-floater.is-mid { z-index: 4; filter: blur(var(--blur, 0px)) saturate(0.9); }
.fizz-floater-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: var(--fizz-surface);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(214, 238, 248, 0.08);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.fizz-floater-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Water between the viewer and the photo: farther photos sit behind more of it */
.fizz-floater-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.1), transparent 40%),
    rgba(12, 23, 29, var(--tint, 0.2));
  transition: background-color 0.4s ease;
}
.fizz-floater:hover .fizz-floater-media { transform: scale(1.05); }
.fizz-floater:hover .fizz-floater-media::after { background-color: rgba(12, 23, 29, 0.05); }
.fizz-floater:focus-visible { outline: 2px solid var(--fizz-spark); outline-offset: 4px; }

/* Phones: the hero photos float as an overlapping, staggered pair under the copy,
   with room above and below for the photos in the distance */
@media (max-width: 767px) {
  .about-section[data-fizz-seltzer] {
    --dive: min(24svh, 200px);
    padding-top: calc(22vw + var(--dive));
    padding-bottom: 14vw;
  }
  .about-section[data-fizz-seltzer] .story-wrapper { grid-row-gap: 40px; }
  .about-section[data-fizz-seltzer] .story-image {
    width: 47vw;
    height: auto;
    max-height: none;
    aspect-ratio: 2 / 3;
  }
  .about-section[data-fizz-seltzer] .story-image:first-child { z-index: 2; margin: 16vw -5vw 0 0; }
  .about-section[data-fizz-seltzer] .story-image:last-child { z-index: 1; margin: 0 0 16vw -5vw; }
}

/* ---------- Photo lightbox: the tapped photo + "Shop the bottle" ---------- */

html.fizz-lb-open,
html.fizz-lb-open body { overflow: hidden; }
.fizz-lb {
  position: fixed;
  inset: 0;
  z-index: 100000; /* above the nav and cart, below page transitions */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  color: var(--fizz-mist);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.fizz-lb.is-open { visibility: visible; opacity: 1; transition: opacity 0.35s ease; }
.fizz-lb-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(23, 96, 122, 0.25), transparent 70%),
    rgba(7, 14, 18, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.fizz-lb-top,
.fizz-lb-stage,
.fizz-lb-bottom { position: relative; }
.fizz-lb-top {
  display: flex;
  justify-content: flex-end;
  padding: max(16px, env(safe-area-inset-top)) 20px 12px;
}
.fizz-lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--fizz-line);
  border-radius: 50%;
  background: rgba(18, 34, 42, 0.72);
  color: var(--fizz-mist);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.fizz-lb-btn:hover { background: var(--fizz-raised); border-color: rgba(196, 227, 253, 0.4); }
.fizz-lb-btn:active { transform: scale(0.94); }
.fizz-lb-btn:focus-visible { outline: 2px solid var(--fizz-spark); outline-offset: 3px; }
.fizz-lb-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 24px;
  cursor: zoom-out;
}
.fizz-lb-figure {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
}
.fizz-lb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.97);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.fizz-lb-img.is-active { opacity: 1; transform: none; }
.fizz-lb-bottom {
  display: flex;
  justify-content: center;
  padding: 18px 20px max(22px, env(safe-area-inset-bottom));
}
.fizz-lb-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 10px 10px 22px;
  border: 1px solid var(--fizz-line);
  border-radius: 999px;
  background: rgba(18, 34, 42, 0.72);
}
.fizz-lb-cta-text p { margin: 0; line-height: 1.3; }
.fizz-lb-cta-name { font-weight: 600; font-size: 15px; }
.fizz-lb-cta-meta { color: var(--fizz-fog); font-size: 13px; white-space: nowrap; }
.fizz-lb-shop { white-space: nowrap; }

@media (max-width: 767px) {
  .fizz-lb-stage { padding: 0 12px; }
  .fizz-lb-bottom { padding-left: 16px; padding-right: 16px; }
  .fizz-lb-cta { width: 100%; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 22px; }
  .fizz-lb-shop { padding: 13px 16px 13px 19px; letter-spacing: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .fizz-floater-media,
  .fizz-lb,
  .fizz-lb-img { transition: none; }
}

/* ==========================================================================
   Slideshow arrows: every carousel uses the "Find Your Color" arrow — a navy circle with a
   thin white arrow, a light ring on hover and a blue press. Webflow's interactions still fade
   the homepage ones in and out, so only colours and the ring transition here.
   ========================================================================== */

.dark-slide-arrow,
.fizz-more-arrow,
.fizz-story-arrow {
  width: 48px;
  height: 48px;
  border: 1px solid transparent;
  border-radius: 50%;
  background-color: var(--fizz-navy);
  color: #fff;
  transition: border-color 0.3s ease, background-color 0.3s ease, scale 0.2s ease;
}
.dark-slide-arrow:hover,
.dark-slide-arrow.left:hover,
.dark-slide-arrow.right:hover,
.fizz-more-arrow:hover,
.fizz-story-arrow:hover { border-color: #e4e9ec; border-style: solid; }
.dark-slide-arrow:active,
.dark-slide-arrow.left:active,
.dark-slide-arrow.right:active,
.fizz-more-arrow:active,
.fizz-story-arrow:active { background-color: var(--fizz-blue-1); }
.fizz-more-arrow:active,
.fizz-story-arrow:active { scale: 0.94; }
.fizz-more-arrow svg,
.fizz-story-arrow svg { width: 16px; height: 16px; }
@media (max-width: 479px) {
  .dark-slide-arrow,
  .fizz-more-arrow,
  .fizz-story-arrow { width: 40px; height: 40px; }
}

/* Intro "No cans" — dedicated centered block (avoids Webflow story-grid scrunch) */
.fizz-just {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 5vw, 3rem) clamp(0.75rem, 2vw, 1.25rem);
  text-align: center;
  background: transparent;
}
.fizz-just-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 54rem);
  margin: 0 auto;
  text-align: center;
}
.fizz-just-title {
  margin: 0;
  max-width: 100%;
  color: var(--fizz-mist, #ddf6ff);
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(2.75rem, 6.2vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.fizz-just-title em {
  font-style: italic;
  font-weight: 400;
}
.fizz-just-copy {
  margin: 1rem 0 0;
  max-width: 34rem;
  color: var(--fizz-fog, rgba(221, 246, 255, 0.78));
  font-family: "Satoshi", system-ui, sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 400;
  line-height: 1.55;
  text-wrap: pretty;
}
/* Pull the explore carousel up under the intro copy */
.fizz-just + .slider-section {
  margin-top: 0;
  padding-top: 0 !important;
  padding-bottom: clamp(1.5rem, 4vw, 3rem) !important;
}
.fizz-just + .slider-section > .section,
.fizz-just + .slider-section > .section.clip,
.fizz-just + .slider-section > .section.no-padding {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.fizz-just + .slider-section .basic-slide-wrapper,
.fizz-just + .slider-section .product-slide-card {
  padding-top: 1rem;
  padding-bottom: 1rem;
  min-height: min(58vh, 520px);
  height: min(58vh, 520px);
}
@media (max-width: 767px) {
  .fizz-just + .slider-section .basic-slide-wrapper,
  .fizz-just + .slider-section .product-slide-card {
    min-height: min(62vh, 480px);
    height: auto;
    padding-top: 0.5rem;
  }
}

/* Bottle PDP: keep bubble video inside the sticky feature reveal only */
.pdp-key-features {
  margin-top: 0 !important;
  position: relative;
  z-index: 1;
}
.pdp-hero {
  position: relative;
  z-index: 2;
  isolation: isolate;
  background-color: var(--fizz-navy);
}

/* "More from Fizz": secondary strip, heading above the grid */
.fizz-more {
  display: block;
  min-height: 0;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4rem);
}
.fizz-more-heading {
  max-width: 1280px;
  margin: 0 auto 1.5rem;
  color: var(--pdp-text);
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.fizz-more-heading .fizz-more-count {
  margin-left: 0.65rem;
  color: var(--pdp-muted);
  font-family: "Satoshi", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: middle;
}
.fizz-more-inner { width: 100%; }
.fizz-more-media {
  aspect-ratio: 4 / 5;
  max-height: 52vh;
  border-radius: 18px;
}
.fizz-more-title { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.fizz-more-copy .fizz-more-eyebrow { display: none; }
@media (max-width: 991px) {
  .fizz-more-media { height: min(48svh, 90vw); max-height: none; }
}

/* ---------- Button legibility: every label clears WCAG AAA (7:1) ---------- */
/* Refill step pills sit on a light, moving gradient: give them a solid dark chip */
.fizz-refill-pip {
  background: rgba(3, 9, 13, 0.62);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.fizz-refill-pip[aria-current="step"] { background: #fff; color: var(--fizz-deep); }
/* Tabs autoplay toggle label */
.auto-tabs-button { color: rgba(255, 255, 255, 0.88); }
/* Nav "Shop" floats over any page content, so it carries its own dark backing */
.fizz-nav-shop { background: rgba(3, 9, 13, 0.75); }
/* Product gallery arrows over light photos */
.pdp-gallery-nav { background-color: rgba(0, 0, 0, 0.65); }

/* ---------- Nav entrance after the homepage intro (js/fizz-intro.js) ----------
   Hidden while the intro plays; then a logo-sized pill appears in the centre,
   stretches out to full width, and the Shop / cart / menu controls fade in. */
html.fizz-intro .fizz-nav-bar { opacity: 0; }
html.fizz-nav-enter .fizz-nav-bar {
  animation:
    fizz-nav-pill-in 0.35s ease-out both,
    fizz-nav-expand 0.8s var(--fizz-ease-out) 0.3s both;
}
html.fizz-nav-enter .fizz-nav-shop,
html.fizz-nav-enter .fizz-nav-actions {
  animation: fizz-nav-content-in 0.45s ease-out 0.95s both;
}
@keyframes fizz-nav-pill-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fizz-nav-expand {
  from { clip-path: inset(0 calc(50% - 4.5em) round 0.375em); }
  to { clip-path: inset(0 0 round 0.375em); }
}
@keyframes fizz-nav-content-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.fizz-nav-enter .fizz-nav-bar,
  html.fizz-nav-enter .fizz-nav-shop,
  html.fizz-nav-enter .fizz-nav-actions { animation: none; }
}