/* =========================================================
   NIZZFIZZ — v10 beach-apocalypse
   BUILD-TAG: nizzfizz-beach-apocalypse-v10
   Urban-beach post-party vibe. Weathered type, grainy overlays,
   desaturated stormy palette with Celsius-orange + Poppi-pink pops.
   All product imagery now comes from real photos (assets/drinks/*.jpg).
   ========================================================= */

/* ---------- tokens ---------- */
:root {
  --sun-core:#ffd13f;
  --sun-glow:#ff9b4a;
  --coral:#f7764f;
  --horizon:#f97245;
  --rust:#c24a2e;
  --palm:#3c2218;
  --night:#1b384a;
  --sea:#9dc4c6;
  --sand:#eed9c1;
  --paper:#fbf6ef;
  --paper-2:#f6ebd9;
  --ink:#2a1a10;
  --ink-2:#7a5a48;
  --muted:#8b7058;
  --line:#e7d9c4;
  --line-2:#d9c6ac;
  --glass-line: rgba(255,255,255,.55);
  --good:#2cb56c;
  --bad:#e0513a;
  --card:#fffdf7;
  --card-strong:#ffffff;
  --shadow: 0 28px 60px -18px rgba(60,34,24,.28);
  --shadow-hover: 0 40px 90px -20px rgba(60,34,24,.42);

  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-accent: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "Space Grotesk", ui-monospace, monospace;

  --radius: 28px;
  --radius-sm: 18px;
  --radius-xs: 12px;
  --pad-x: clamp(18px, 4vw, 56px);
  --ease-out-soft: cubic-bezier(.22,.9,.22,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  line-height: .92;
  letter-spacing: -.005em;
  color: var(--palm);
  text-transform: uppercase;
}
h1 em, h2 em, h3 em, h4 em, h5 em {
  font-family: var(--font-accent);
  font-weight: 300;
  font-style: italic;
  text-transform: none;
  color: var(--horizon);
  letter-spacing: -.01em;
}
h4 { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
h5 { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(238,217,193,.65); margin-bottom: 10px; }
p { margin: 0; }

.wrap { width: 100%; padding-inline: var(--pad-x); }
.edge { width: 100%; }

/* ---------- selection + focus ---------- */
::selection { background: var(--sun-core); color: var(--palm); }
:focus-visible { outline: 3px solid var(--horizon); outline-offset: 3px; border-radius: 6px; }

/* ---------- eyebrow / stickers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--palm); background: rgba(255,255,255,.7);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--horizon);
  box-shadow: 0 0 8px var(--horizon);
}
.muted { color: var(--muted); }

/* ---------- Reveal classes (visible by default — motion layer is opt-in) ---------- */
.reveal { opacity: 1; transform: none; clip-path: none; transition: none; }
html.js-motion .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out-soft), transform 700ms var(--ease-out-soft); }
html.js-motion .reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 80ms; }
.reveal-d2 { transition-delay: 180ms; }
.reveal-d3 { transition-delay: 280ms; }

/* ---------- cursor glow ---------- */
.cursor-glow {
  position: fixed; pointer-events: none; z-index: 9999;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,209,63,.22), transparent 60%);
  transform: translate(-50%,-50%); mix-blend-mode: plus-lighter;
  opacity: 0; transition: opacity .3s;
}
html.js-motion .cursor-glow { opacity: 1; }
@media (pointer: coarse) { .cursor-glow { display: none !important; } }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--pad-x);
  background: rgba(251,246,239,.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .35s var(--ease-out-soft), border-color .35s;
}
.nav.on-dark { background: rgba(27,56,74,.28); border-bottom-color: rgba(255,255,255,.14); }
.nav.on-dark a, .nav.on-dark .brand, .nav.on-dark .cart-btn { color: #fff; }
.nav.on-dark .brand .mark {
  background: #fff; color: var(--palm);
  box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 10px 30px rgba(0,0,0,.4);
}
.nav.on-dark .cart-btn { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.nav.on-dark .cart-btn .dot { background: var(--sun-core); color: var(--palm); }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 26px;
  letter-spacing: .5px; color: var(--palm);
  text-transform: uppercase;
}
.brand .mark {
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--sun-core) 45%, var(--horizon) 100%);
  color: #fff; font-family: var(--font-display); font-size: 16px;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px -6px rgba(247,118,79,.6), inset 0 -6px 10px rgba(0,0,0,.12);
}
.brand .mark::after { content: "N"; }

.nav .links { display: flex; gap: 28px; }
.nav .links a {
  position: relative; font-family: var(--font-mono); font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
  opacity: .75; padding: 6px 0;
  transition: opacity .2s;
}
.nav .links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out-soft);
}
.nav .links a:hover::after, .nav .links a.active::after { transform: scaleX(1); }
.nav .links a:hover, .nav .links a.active { opacity: 1; }
.nav .right { display: flex; align-items: center; gap: 18px; }

.cart-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--palm); color: var(--paper);
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: all .25s var(--ease-out-soft);
}
.cart-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -10px rgba(60,34,24,.55); }
.cart-btn .dot {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--sun-core); color: var(--palm);
  font-family: var(--font-display); font-size: 13px;
  display: inline-grid; place-items: center;
}

@media (max-width: 720px) {
  .nav .links { display: none; }
}

/* ---------- buttons ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 28px; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  transition: all .35s var(--ease-out-soft);
  cursor: pointer; text-decoration: none;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(var(--shine, -100%));
  transition: transform .9s var(--ease-out-soft);
}
.btn:hover::after { --shine: 100%; }
.btn.primary {
  background: linear-gradient(135deg, var(--horizon), var(--coral));
  color: #fff;
  box-shadow: 0 16px 40px -12px rgba(247,118,79,.55);
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -14px rgba(247,118,79,.7); }
.btn.ghost {
  background: rgba(255,255,255,.45); color: var(--palm);
  border-color: var(--line-2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn.ghost:hover { background: rgba(255,255,255,.75); transform: translateY(-1px); }
.btn.on-dark.ghost { color: #fff; border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.12); }
.btn.on-dark.ghost:hover { background: rgba(255,255,255,.22); }
.btn.block { display: flex; width: 100%; justify-content: center; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- hero video ---------- */
.hero-video {
  position: relative; width: 100%;
  min-height: 100vh; min-height: 100dvh;
  isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(100px, 14vh, 180px) var(--pad-x) clamp(60px, 8vh, 100px);
  color: #fff;
}
.hero-video video,
.hero-video .poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.hero-video .poster {
  background: center/cover no-repeat url("../assets/hero-sunset.jpg");
}
.hero-video .overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(27,56,74,.55), transparent 60%),
    radial-gradient(ellipse at 50% -10%, rgba(255,209,63,.35), transparent 55%),
    linear-gradient(180deg, rgba(27,56,74,.0) 0%, rgba(27,56,74,.15) 40%, rgba(27,56,74,.55) 90%);
}
.hero-video .grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 3px 3px; mix-blend-mode: overlay; opacity: .35;
}

.hero-video .statusline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  margin-bottom: 18px;
}
.hero-video .statusline .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sun-core);
  box-shadow: 0 0 0 0 var(--sun-core);
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,209,63,.7); }
  80% { box-shadow: 0 0 0 14px rgba(255,209,63,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,209,63,0); }
}

.hero-video .content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 8px; width: 100%;
}

/* ============ THE STACKED WORDMARK — the show ============ */
.wordmark {
  display: flex; flex-direction: column; align-items: center;
  line-height: .78;
  margin: 4px 0;
}
.wordmark .row {
  font-family: var(--font-display);
  font-size: clamp(110px, 22vw, 340px);
  letter-spacing: -.01em;
  text-transform: uppercase;
  background-image: linear-gradient(180deg,
    #fff6d6 0%,
    var(--sun-core) 28%,
    var(--sun-glow) 58%,
    var(--horizon) 82%,
    var(--rust) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 245, 210, .55);
  filter:
    drop-shadow(0 4px 0 rgba(0,0,0,.12))
    drop-shadow(0 18px 30px rgba(194, 74, 46, .45))
    drop-shadow(0 34px 60px rgba(0,0,0,.35));
  position: relative;
  animation: wmFloat 7s ease-in-out infinite;
}
.wordmark .row.two {
  margin-top: -.14em;
  animation-delay: .7s;
}
@keyframes wmFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (max-width: 600px) {
  .wordmark .row { font-size: clamp(90px, 28vw, 200px); -webkit-text-stroke-width: 1px; }
}

.hero-video .tagline {
  font-family: var(--font-accent);
  font-style: italic; font-weight: 300;
  font-size: clamp(22px, 3.2vw, 38px);
  color: #fff;
  letter-spacing: -.005em;
  max-width: 22ch;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
  margin: 18px 0 8px;
}
.hero-video .tagline em {
  color: var(--sun-core);
  font-weight: 600;
  font-style: italic;
}

.hero-video .cta-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center;
  margin-top: 14px;
}

.tino-tag {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 26px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.tino-tag::before, .tino-tag::after {
  content: ""; width: 32px; height: 1px;
  background: rgba(255,255,255,.4);
}
.tino-tag em { color: var(--sun-core); font-style: italic; font-family: var(--font-accent); letter-spacing: -.005em; text-transform: none; font-size: 14px; }

.scroll-indicator {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(255,255,255,.65);
  z-index: 2;
}
.scroll-indicator .line {
  width: 1px; height: 48px;
  background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
  animation: scrollDash 2s ease-in-out infinite;
}
@keyframes scrollDash {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.01% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- ambient background for lower page ---------- */
.ambient {
  position: relative; width: 100%; height: 0; isolation: isolate;
}
.ambient::before {
  content: ""; position: absolute; left: 0; right: 0; top: -60px;
  height: 120px; z-index: -1;
  background: linear-gradient(180deg, rgba(27,56,74,.3), transparent);
  filter: blur(20px);
}

/* ---------- section pad ---------- */
.section-pad { padding: clamp(80px, 10vh, 140px) var(--pad-x); position: relative; }
.section-pad.tinted {
  background:
    radial-gradient(ellipse at 10% 0%, rgba(255,209,63,.25), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(157,196,198,.3), transparent 55%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.sec-head { margin-bottom: clamp(28px, 4vh, 56px); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.sec-head h2 { font-size: clamp(56px, 9vw, 140px); max-width: 16ch; }

/* ---------- product grid ---------- */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
}

.prod {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden; isolation: isolate;
  transition: transform .5s var(--ease-out-soft), box-shadow .5s var(--ease-out-soft);
  box-shadow: 0 12px 30px -14px rgba(60,34,24,.18);
  text-decoration: none;
}
.prod:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }

.prod .img {
  position: relative; aspect-ratio: 4 / 5;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(60,34,24,.22), transparent 55%),
    linear-gradient(170deg, #fff4dd 0%, #ffd4b8 55%, #f7a97e 100%);
}
.prod .img::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,209,63,.45), transparent 55%);
  animation: sunPulse 8s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes sunPulse { to { transform: scale(1.1); opacity: .8; } }

.prod .img img {
  position: relative; z-index: 1;
  width: 68%; height: 82%;
  margin: 9% auto 0; object-fit: contain;
  filter: drop-shadow(0 26px 44px rgba(60,34,24,.42));
  transition: transform .6s var(--ease-out-soft);
}
.prod:hover .img img { transform: translateY(-10px) rotate(-2deg) scale(1.06); }

.prod .tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.85);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--palm);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.prod .foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 22px; gap: 14px;
}
.prod .n { font-family: var(--font-display); font-size: 30px; line-height: 1; text-transform: uppercase; letter-spacing: .3px; color: var(--palm); }
.prod .sub { font-size: 12px; color: var(--muted); margin-top: 5px; font-family: var(--font-mono); letter-spacing: .1em; }
.prod .meta { font-size: 11px; color: var(--ink-2); margin-top: 8px; font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.prod .price {
  font-family: var(--font-display); font-size: 30px; color: var(--horizon);
  letter-spacing: .3px; line-height: 1;
}
.prod .plus {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--palm); color: #fff;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 300;
  opacity: 0; transform: translateY(-6px) scale(.85);
  transition: all .35s var(--ease-out-soft);
}
.prod:hover .plus { opacity: 1; transform: translateY(0) scale(1); }
.prod.soldout { filter: grayscale(.35) opacity(.72); }
.prod.soldout .plus { background: var(--ink-2); opacity: 1; transform: none; }

html.js-motion .prod.reveal { transform: translateY(26px); opacity: 0; }
html.js-motion .prod.reveal.in { transform: translateY(0); opacity: 1; transition: all 800ms var(--ease-out-soft); }

/* ---------- chips / filters ---------- */
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.chip {
  padding: 10px 18px; border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1.5px solid var(--line-2);
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--palm); cursor: pointer;
  transition: all .25s var(--ease-out-soft);
}
.chip:hover { background: rgba(255,255,255,.85); border-color: var(--horizon); color: var(--horizon); }
.chip.sel { background: var(--palm); color: var(--paper); border-color: var(--palm); }

/* ---------- marquee ---------- */
.marquee {
  overflow: hidden; padding: 22px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, var(--coral), var(--sun-glow), var(--sun-core), var(--sun-glow), var(--coral));
  background-size: 300% 100%;
  animation: mqGrad 14s ease-in-out infinite alternate;
}
@keyframes mqGrad { to { background-position: 100% 0; } }
.marquee .track {
  display: flex; gap: 48px; align-items: center;
  white-space: nowrap;
  animation: mqScroll 32s linear infinite;
  font-family: var(--font-display); font-size: clamp(28px, 4vw, 54px);
  color: var(--palm);
  text-transform: uppercase; letter-spacing: .01em;
}
.marquee .track em {
  font-family: var(--font-accent); font-style: italic; font-weight: 300;
  color: var(--night); text-transform: none; font-size: .85em;
}
.marquee .track span { flex-shrink: 0; }
@keyframes mqScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(80px, 12vh, 160px) var(--pad-x);
  text-align: center;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255,209,63,.55), transparent 55%),
    radial-gradient(ellipse at 50% 110%, rgba(247,118,79,.55), transparent 55%),
    linear-gradient(180deg, #fff4dd 0%, #ffc9a0 55%, #f7a97e 100%);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.35), transparent 55%);
}
.cta-band .sticker {
  display: inline-block; padding: 10px 18px; border-radius: 999px;
  background: var(--palm); color: var(--paper);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .24em; text-transform: uppercase;
  transform: rotate(-2deg);
}
.cta-band h2 { font-size: clamp(56px, 10vw, 160px); margin-top: 18px; color: var(--palm); }
.cta-band p { color: var(--ink-2); max-width: 540px; margin: 18px auto 28px; font-size: 17px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(28px);
  padding: 14px 22px; border-radius: 999px;
  background: var(--palm); color: var(--paper);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 22px 50px -14px rgba(60,34,24,.55);
  opacity: 0; z-index: 1000;
  transition: all .35s var(--ease-out-soft);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok { background: var(--good); }
.toast.bad { background: var(--bad); }

/* ---------- pills ---------- */
.pill {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; background: rgba(0,0,0,.08); color: var(--palm);
}
.pill.good { background: rgba(44,181,108,.18); color: var(--good); }
.pill.warn { background: rgba(255,176,31,.2); color: #b87700; }

/* ---------- footer ---------- */
footer.site {
  background: linear-gradient(180deg, var(--night) 0%, #0d1e2c 100%);
  color: rgba(238,217,193,.85);
  padding: clamp(60px, 8vh, 100px) var(--pad-x) clamp(28px, 4vh, 40px);
}
footer.site .wrap {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 60px); padding-inline: 0;
}
@media (max-width: 820px) {
  footer.site .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  footer.site .wrap { grid-template-columns: 1fr; }
}
footer.site .big {
  font-family: var(--font-display); font-size: clamp(56px, 8vw, 88px);
  line-height: .9; letter-spacing: -.005em;
  background: linear-gradient(180deg, var(--sun-core) 0%, var(--horizon) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
footer.site .big em { font-family: var(--font-accent); font-style: italic; font-weight: 300; color: var(--sand); -webkit-background-clip: unset; background-clip: unset; }
footer.site a { display: block; padding: 5px 0; color: rgba(238,217,193,.75); font-size: 14px; transition: color .2s; }
footer.site a:hover { color: var(--sun-core); }
footer.site .copyline {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid rgba(238,217,193,.14);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(238,217,193,.5);
}
footer.site .copyline em {
  font-family: var(--font-accent); font-style: italic; text-transform: none;
  color: var(--sun-core); font-size: 13px; letter-spacing: -.005em;
}

/* ---------- forms / inputs ---------- */
label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], textarea, select {
  width: 100%; padding: 14px 16px; border-radius: var(--radius-xs);
  border: 1.5px solid var(--line-2); background: #fff;
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--horizon); box-shadow: 0 0 0 3px rgba(247,118,79,.18); }
.field { margin-bottom: 18px; }
.fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .fieldrow { grid-template-columns: 1fr; } }

/* ---------- glass card ---------- */
.card {
  background: var(--card-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow);
}
.card.glass {
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-color: var(--glass-line);
}

/* ---------- loyalty stamps ---------- */
.punches { display: flex; gap: 6px; }
.punches .p {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,.45);
}
.punches .p.on {
  background: radial-gradient(circle at 35% 30%, #fff, var(--sun-core) 45%, var(--horizon) 100%);
  border-color: transparent;
  box-shadow: 0 0 10px rgba(255,209,63,.6);
}

.reward-banner {
  display: flex; align-items: center; gap: 20px;
  padding: 22px;
  background: linear-gradient(135deg, var(--palm), var(--night));
  color: #fff; border-radius: var(--radius-sm);
}

/* ---------- misc util ---------- */
.hidden { display: none !important; }
.spacer { height: 40px; }

/* =========================================================
   v9 — BEACH APOCALYPSE OVERRIDES
   Layered on top of v7. Cold, stormy, urban-grime palette
   with neon pop accents per drink. Everything below this line
   is additive — remove this block to revert to v7 tranquil.
   ========================================================= */

:root {
  --v8-storm:#0f1519;
  --v8-grit:#1b2328;
  --v8-ash:#2b3339;
  --v8-sand:#b7a992;
  --v8-foam:#d8d2c4;
  --v8-neon-lime:#a8ff2c;
  --v8-neon-pink:#ff2b7a;
  --v8-neon-orange:#ff6a3d;
  --v8-neon-cyan:#22d3ee;
  --v8-neon-sun:#ffd13f;
}

/* Grain overlay baked into body */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1000;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/></svg>");
  opacity:.06; mix-blend-mode:overlay;
}

/* PRODUCT CARD rebuild for photo assets */
.prod-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:18px; padding:0 var(--pad-x);
}
.prod {
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--v8-grit); color:#fff;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  aspect-ratio:3/4;
  transform:translateZ(0);
  transition:transform .35s var(--ease-out-soft), box-shadow .35s;
  isolation:isolate;
}
.prod::before {
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.9) 100%);
  pointer-events:none;
}
.prod .img {
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.prod .img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease-out-soft), filter .6s;
  filter:contrast(1.04) saturate(.92);
}
.prod:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.prod:hover .img img { transform:scale(1.08); filter:contrast(1.08) saturate(1.0); }
.prod .tag {
  position:absolute; top:14px; left:14px; z-index:3;
  background:rgba(15,21,25,.6); backdrop-filter:blur(6px);
  color:#fff; font:600 10px/1 var(--font-mono); letter-spacing:.18em;
  text-transform:uppercase; padding:7px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
}
.prod .foot {
  position:relative; z-index:2; margin-top:auto;
  padding:18px 20px 20px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:12px;
}
.prod .foot .n {
  font-family:var(--font-display); font-size:32px; line-height:.9;
  color:#fff; letter-spacing:.01em; text-transform:uppercase;
}
.prod .foot .sub {
  font:500 11px/1.3 var(--font-mono); letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.62); margin-top:4px;
}
.prod .foot .price {
  font-family:var(--font-display); font-size:26px; line-height:1;
  color:var(--v8-neon-sun);
  text-shadow:0 0 12px rgba(255,209,63,.4);
}
.prod .plus {
  position:absolute; top:14px; right:14px; z-index:3;
  width:38px; height:38px; border-radius:50%;
  background:var(--v8-neon-sun); color:var(--v8-storm);
  font-family:var(--font-display); font-size:22px; line-height:38px; text-align:center;
  box-shadow:0 6px 18px rgba(255,209,63,.35);
  transition:transform .25s var(--ease-out-soft), background .25s;
}
.prod:hover .plus { transform:rotate(90deg) scale(1.08); }
.prod.soldout { opacity:.55; filter:grayscale(.3); }
.prod.soldout .plus { background:#555; color:#fff; }

/* Accent-colored price per drink */
.prod[data-slug="celsius"] .foot .price { color:#ff6a3d; text-shadow:0 0 12px rgba(255,106,61,.45); }
.prod[data-slug="poppi"] .foot .price { color:#ff3c7a; text-shadow:0 0 12px rgba(255,60,122,.45); }
.prod[data-slug="monster"] .foot .price { color:#a8ff2c; text-shadow:0 0 12px rgba(168,255,44,.45); }
.prod[data-slug="sprite"] .foot .price { color:#22c55e; text-shadow:0 0 12px rgba(34,197,94,.45); }
.prod[data-slug="arizona"] .foot .price { color:#f59e0b; text-shadow:0 0 12px rgba(245,158,11,.45); }

/* Stand login — tiny footer link that's still findable */
footer.site .copyline .stand-link {
  opacity:.55; font-size:12px; letter-spacing:.08em;
  border-bottom:1px dashed currentColor; padding-bottom:1px;
  transition:opacity .2s, color .2s;
}
footer.site .copyline .stand-link:hover { opacity:1; color:var(--v8-neon-sun); }

.fp button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.toast.bad {
  background: #8f291e;
}

.hero-video .statusline,
.eyebrow,
.stockline,
.inventory-badge {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Drink detail page hero */
.drink-hero {
  position:relative; min-height:72vh; overflow:hidden; isolation:isolate;
  display:grid; place-items:center; color:#fff;
  padding:clamp(100px,16vh,160px) var(--pad-x) clamp(60px,9vh,120px);
}
.drink-hero .bg {
  position:absolute; inset:0; z-index:-2; overflow:hidden;
}
.drink-hero .bg img {
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.05) saturate(.9) brightness(.78);
  transform:scale(1.04);
  animation:driftBg 18s ease-in-out infinite alternate;
}
.drink-hero::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,14,18,.25) 0%, rgba(10,14,18,.35) 40%, rgba(10,14,18,.85) 100%);
}
@keyframes driftBg {
  from { transform:scale(1.04) translate(0,0); }
  to   { transform:scale(1.08) translate(-10px,-6px); }
}

/* Add-to-cart confetti burst container */
.debris-burst {
  position:fixed; left:0; top:0; width:0; height:0; pointer-events:none; z-index:9999;
}
.debris-burst span {
  position:absolute; left:0; top:0; width:10px; height:10px;
  border-radius:2px;
  animation:debrisFly 900ms cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes debrisFly {
  0%   { transform:translate(0,0) rotate(0) scale(1); opacity:1; }
  100% { transform:translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.4); opacity:0; }
}

/* Glitch flicker on wordmark */
.wordmark .row {
  animation:wmFloat 7s ease-in-out infinite, wmFlicker 9s steps(12) infinite;
}
@keyframes wmFlicker {
  0%, 97%, 100% { opacity:1; filter:none; }
  98% { opacity:.72; filter:hue-rotate(-8deg) saturate(1.3); }
  98.5% { opacity:1; }
  99%  { opacity:.85; transform:translateX(1px); }
}

/* Tilted cards on hover (only if fine pointer) */
@media (hover:hover) and (pointer:fine) {
  .prod { will-change:transform; }
  .prod:hover { transform:translateY(-6px) rotateX(2deg) rotateY(-2deg); }
}

/* Marquee upgrade — scrolls with grit */
.marquee {
  position:relative; overflow:hidden;
  background:linear-gradient(90deg, var(--v8-storm), var(--v8-grit), var(--v8-storm));
  color:var(--v8-foam);
  padding:22px 0;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.marquee .track {
  display:flex; gap:40px; white-space:nowrap;
  font:700 18px/1 var(--font-display); letter-spacing:.12em; text-transform:uppercase;
  animation:marqueeRun 28s linear infinite;
}
.marquee .track em {
  color:var(--v8-neon-sun); font-family:var(--font-accent); font-style:italic;
  text-transform:none; letter-spacing:0;
}
@keyframes marqueeRun { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* Scroll indicator tint for apocalypse */
.scroll-indicator { color:rgba(255,255,255,.55); }
.scroll-indicator .line { background:linear-gradient(180deg, rgba(255,255,255,.6), transparent); }

/* Cursor glow — cooler on apocalypse */
.cursor-glow {
  position:fixed; left:0; top:0; width:340px; height:340px; pointer-events:none; z-index:998;
  border-radius:50%;
  background:radial-gradient(circle at center, rgba(255,106,61,.14), rgba(255,60,122,.08) 40%, transparent 70%);
  transform:translate(-50%,-50%) translate(var(--mx,-500px), var(--my,-500px));
  mix-blend-mode:screen;
}

/* Section-pad tinted → cooler */
.section-pad.tinted {
  background:linear-gradient(180deg, var(--paper) 0%, #f1e5d0 100%);
  position:relative;
}
.section-pad.tinted::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 20% 0%, rgba(255,106,61,.12), transparent 50%);
}

/* Sec-head pops */
.sec-head h2 em { color:var(--v8-neon-orange); }

/* CTA band — stormier */
.cta-band {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,209,63,.25), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(255,60,122,.22), transparent 55%),
    linear-gradient(135deg, var(--v8-storm), var(--v8-grit));
  color:#fff;
}
.cta-band h2 { color:#fff; }
.cta-band h2 em { color:var(--v8-neon-sun); }
.cta-band p { color:rgba(255,255,255,.7); }
.cta-band .sticker { color:var(--v8-neon-sun); border-color:rgba(255,209,63,.4); }

/* Navigation becomes more committed dark */
.nav.on-dark {
  background:rgba(15,21,25,.72);
  border-bottom-color:rgba(255,255,255,.08);
}

/* Toast upgrade */
.toast {
  background:var(--v8-grit); color:#fff;
  border:1px solid rgba(255,255,255,.1);
  font-family:var(--font-mono); font-size:13px; letter-spacing:.04em;
}
.toast.ok::before { content:""; }

/* Can-spin on hover for product hero */
.drink-hero .can {
  animation:canBob 5s ease-in-out infinite;
  transform-origin:center bottom;
}
@keyframes canBob {
  0%,100% { transform:translateY(0) rotate(-1.5deg); }
  50%     { transform:translateY(-8px) rotate(1.5deg); }
}

/* Full rebuild additions */
.stat-ribbon {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:24px 0 28px;
}
.stat-ribbon > div,
.feature-note,
.feature-panel,
.how-card {
  background:rgba(255,255,255,.74);
  border:1px solid rgba(255,255,255,.85);
  border-radius:24px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
}
.stat-ribbon > div { padding:16px; }
.stat-ribbon strong {
  display:block;
  font-family:var(--font-display);
  font-size:clamp(34px,4vw,56px);
  line-height:1;
  color:var(--palm);
}
.stat-ribbon span {
  display:block;
  margin-top:6px;
  color:var(--ink-2);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-family:var(--font-mono);
}
.feature-split {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
  margin-bottom:34px;
}
.feature-note,
.feature-panel,
.how-card { padding:22px; }
.feature-note h3,
.feature-panel h3,
.how-card h3 { font-size:clamp(34px,4vw,52px); line-height:.94; }
.feature-note p,
.feature-panel p,
.how-card p { margin-top:12px; color:var(--ink-2); }
.feature-points,
.spotlight-list,
.how-grid { display:grid; gap:12px; }
.feature-points { margin-top:18px; }
.fp-card {
  border-radius:18px;
  background:rgba(255,248,240,.92);
  border:1px solid var(--line);
  padding:14px 16px;
}
.fp-card strong,
.spot-row strong { display:block; color:var(--palm); }
.fp-card span,
.spot-row span { display:block; margin-top:4px; color:var(--ink-2); font-size:13px; }
.spot-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,243,230,.92));
  border:1px solid var(--line);
  padding:14px 16px;
}
.spot-row b {
  font-family:var(--font-display);
  font-size:34px;
  color:var(--horizon);
  line-height:1;
}
.home-bands { padding-top:0; }
.sec-head.compact { margin-bottom:24px; }
.how-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.how-card > span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--sun-core), var(--coral));
  color:#fff;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  margin-bottom:16px;
}

@media (max-width:960px) {
  .stat-ribbon,
  .how-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feature-split { grid-template-columns:1fr; }
}

@media (max-width:680px) {
  .stat-ribbon,
  .how-grid { grid-template-columns:1fr; }
  .spot-row { flex-direction:column; align-items:flex-start; }
}