/* ==========================================================================
   DRINK FLW — styles.css
   نظام تصميم واحد يغذي كل صفحات الموقع (لا يوجد build step).
   ========================================================================== */

/* -------------------------------- Reset -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
img, picture, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

/* ------------------------------ Design tokens --------------------------- */
:root {
  /* ألوان أساسية — الوضع الغامق (الافتراضي/fallback). --color-ink و
     --color-paper احتفظا بأسمائهما الأصلية (نص أساسي / خلفية الصفحة) —
     هذه الستة توكنز (ink, ink-soft, paper, paper-deep, line, muted) هي
     التي تنعكس فعلياً بين الوضعين (انظر :root[data-theme="light"] تحتها)،
     وتُطبَّق على كل الصفحة تقريباً — الهيدر والفوتر والـ footer
     وسلايدر اللحظات كلها تتبدّل معها الآن أيضاً.
     --color-white و --color-black تبقيان ثابتتين حرفياً في كل الأحوال —
     تُستخدمان فقط في: (أ) الهيرو وقسم الكان المتحرك، اللذان يبقيان غامقين
     دائماً بلا استثناء (انظر كتلة "Permanently-dark" تحت الجدول الآخر)،
     و(ب) نص/عناصر تجلس فوق صورة أو تدرّج ألوان النكهات الثابت (لا فوق
     خلفية الصفحة) مثل عناوين Lifeslider، وأقسام Pillars/CTA اللي تحتفظ
     بتدرّج النكهات كهوية بصرية بغض النظر عن الثيم. */
  --color-ink: #F5F5F3;
  --color-ink-soft: #BFBFBF;
  --color-paper: #1B1B1B;
  --color-paper-deep: #242424;
  --color-white: #FFFFFF;
  --color-black: #101010;
  --color-line: #404040;
  --color-muted: #969696;
  /* Header glass background — its own token (not --color-paper) because it's
     always translucent-over-content, in both themes, unlike a flat surface. */
  --color-chrome-bg: rgba(16, 16, 16, 0.85);

  /* ألوان النكهات — تبقى كما هي تقريباً (قرار الهوية)، فقط تدرّجات الـtint
     رُفعت قليلاً (0.12→0.22 تقريباً) لتبقى مرئية فوق خلفية داكنة بدل أن تغرق فيها */
  --color-passion: #8E2A6B;
  --color-passion-dark: #6E1F52;
  --color-passion-tint: rgba(142, 42, 107, 0.22);
  --color-passion-rgb: 142, 42, 107;
  --color-colada: #2F8F86;
  --color-colada-dark: #216A63;
  --color-colada-tint: rgba(47, 143, 134, 0.22);
  --color-colada-rgb: 47, 143, 134;
  --color-citrus: #D9772A;
  --color-citrus-dark: #AD5C1D;
  --color-citrus-tint: rgba(217, 119, 42, 0.24);
  --color-citrus-rgb: 217, 119, 42;

  /* تدرّج يجمع النكهات الثلاث — للأقسام التي لا ترتبط بنكهة واحدة (بدل الاعتماد على الأسود) */
  --gradient-flavors: linear-gradient(135deg, var(--color-passion) 0%, var(--color-colada) 52%, var(--color-citrus) 100%);

  /* خطوط — English is primary for now; --font-body is the token to swap
     when Arabic is added later (e.g. a parallel 'Tajawal' stack under [lang="ar"]) */
  /* Figtree is a variable font — unlike Archivo Black (single black-by-definition
     weight), every --font-display consumer must now state font-weight: 900
     explicitly or it will render far lighter than the site's established look. */
  --font-display: 'Figtree', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* مقياس النصوص (سائل) */
  --fs-display: clamp(2.75rem, 2rem + 3.6vw, 6rem);
  --fs-h1: clamp(2.25rem, 1.75rem + 2.2vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
  --fs-body-lg: clamp(1.05rem, 1rem + 0.25vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  /* مسافات */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* شكل */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-full: 999px;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* حركة */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;

  --container-w: 1280px;
  --header-h: 96px;
}

/* ---- Light mode ----
   Manual toggle only (see .theme-toggle / script.js) — the six page-content
   tokens above are reversed here. Everything else (flavor colors, --color-white,
   --color-black, gradients) is intentionally untouched: brand identity doesn't
   change with the theme, only the paper/ink pairing content sits on. */
:root[data-theme="light"] {
  --color-ink: #17140F;
  --color-ink-soft: #4A4A4A;
  --color-paper: #FFFFFF;
  --color-paper-deep: #F5F5F3;
  --color-line: #E0E0E0;
  --color-muted: #767676;
  --color-chrome-bg: rgba(255, 255, 255, 0.82);
}

/* ---- Permanently-dark: Hero + the benefits marquee band ----
   Narrow on purpose — every other section (header, footer, lifestyle slider,
   the .section-dark family, stat band, CTA banners) DOES follow the toggle.
   .hero's own rules are already 100%
   built on --color-white/--color-black/the flavor colors, none of which ever
   move between themes, so it needs no pin at all — it's dark by construction;
   this block exists mainly so it has somewhere to opt back in explicitly if
   that ever changes. .theme-locked-dark is the same pin, reusable on any
   future block that needs to opt out the same way (e.g. a promo video wrapper). */
.hero,
.theme-locked-dark {
  --color-ink: #F5F5F3;
  --color-ink-soft: #BFBFBF;
  --color-paper: #1B1B1B;
  --color-paper-deep: #242424;
  --color-line: #404040;
  --color-muted: #969696;
}

/* ------------------------------- Base ------------------------------------ */
/* min-height (not height) — height:100% on both html and body clips the box
   used as the containing block for position:sticky descendants to exactly one
   viewport tall, so any sticky element (e.g. the header)
   detaches as soon as the page scrolls past that point. min-height keeps the
   "at least one viewport tall" behavior for short pages without that ceiling. */
html, body { min-height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Smooths the light/dark toggle itself — background/text/border colors
     across the page fade instead of snapping, without touching every
     component's own transition list one by one. */
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

h1, h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { color: var(--color-ink-soft); }
p + p { margin-top: var(--space-sm); }

.lede { font-size: var(--fs-body-lg); color: var(--color-ink-soft); }

/* Brand/flavor-name emphasis (uppercase display font) — e.g. "DRINK FLW", "Passion Mist".
   Keeps direction:ltr + unicode-bidi:isolate so these names stay stable once an Arabic
   parallel version is added later and surrounds them with RTL body text. */
.latin {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  display: inline-block;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  /* A small recurring brand touch: the tick mark carries the flavor gradient
     instead of a flat gray, so every section heading — not just the hero —
     reads as DRINK FLW. Elements that sit on photos (hero__eyebrow) override
     this back to currentColor for contrast. */
  background: var(--gradient-flavors);
  border-radius: var(--radius-full);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

/* ---- Spacing utilities ----
   Single-purpose margin-top helpers that map 1:1 onto the --space-* scale.
   They replace repeated inline style="margin-top:var(--space-*)" attributes
   in the markup, so vertical rhythm stays inside the design system instead
   of drifting into per-element style attributes. Only the steps actually in
   use are defined; add further steps here rather than inline. */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-sm);
  top: -100px;
  background: var(--color-white);
  color: var(--color-black);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--space-sm); }

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

/* ------------------------------ Layout ----------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 1rem + 2vw, 3rem);
}

section { padding-block: var(--space-3xl); }
.section-tight { padding-block: var(--space-2xl); }

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-xl);
}
.section-head.center { margin-inline: auto; text-align: center; }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ------------------------------ Buttons ----------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.95rem 1.75rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--fs-body);
  border: 2px solid transparent;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--color-ink);
  color: var(--color-paper);
}
.btn-primary:hover { background: var(--color-passion); color: var(--color-white); }

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--color-ink);
}
.btn-outline:hover { background: var(--color-ink); color: var(--color-paper); }

/* Constant colors, not the flippable --color-paper/-paper-deep: .btn-light is
   only ever used inside .lifeslider (over a photo) or .cta-banner (over the
   flavor gradient), never on plain page background — both stay a fixed white
   pill regardless of theme, so its own colors have to stay fixed too, or it'd
   go dark-pill-on-dark-photo in light mode. */
.btn-light {
  background: var(--color-white);
  color: var(--color-black);
}
.btn-light:hover { background: var(--color-black); color: var(--color-white); }

.btn-sm { padding: 0.6rem 1.25rem; font-size: var(--fs-small); }

/* اللون حسب النكهة عبر data-attribute على أي عنصر سلف */
[data-flavor="passion"] { --flavor-color: var(--color-passion); --flavor-rgb: var(--color-passion-rgb); }
[data-flavor="colada"] { --flavor-color: var(--color-colada); --flavor-rgb: var(--color-colada-rgb); }
[data-flavor="citrus"] { --flavor-color: var(--color-citrus); --flavor-rgb: var(--color-citrus-rgb); }

[data-flavor="passion"] .btn-primary,
.btn-primary--passion { background: var(--color-passion); color: var(--color-white); }
[data-flavor="passion"] .btn-primary:hover { background: var(--color-passion-dark); }
[data-flavor="colada"] .btn-primary,
.btn-primary--colada { background: var(--color-colada); color: var(--color-white); }
[data-flavor="colada"] .btn-primary:hover { background: var(--color-colada-dark); }
[data-flavor="citrus"] .btn-primary,
.btn-primary--citrus { background: var(--color-citrus); color: var(--color-white); }
[data-flavor="citrus"] .btn-primary:hover { background: var(--color-citrus-dark); }

/* Secondary buttons pick up the same flavor accent on hover, wherever they
   sit inside a flavor-scoped card (e.g. a Passion Mist card's "Discover" link
   goes purple on hover instead of the generic ink-on-hover treatment). */
[data-flavor] .btn-outline:hover {
  background: var(--flavor-color);
  border-color: var(--flavor-color);
  color: var(--color-white);
}

/* ------------------------------- Badge ------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-small);
  font-weight: 700;
  background: var(--color-ink);
  color: var(--color-paper);
}
.badge-outline {
  background: transparent;
  border: 1.5px solid var(--color-ink);
  color: var(--color-ink);
}
/* Wrapping row of badges under a flavor page's intro paragraph. */
.badge-row { display: flex; gap: var(--space-2xs); flex-wrap: wrap; margin-top: var(--space-md); }

/* -------------------------------- Header ----------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--color-chrome-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--color-line);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
}
.brand__mark {
  height: 76px;
  width: auto;
  flex: none;
  display: block;
  object-fit: contain;
}
/* Two logo files swap by theme instead of one asset moving between two
   backgrounds: flw-logo-full-white.png reads on the dark header/footer,
   flw-logo-full.png (dark wordmark) reads on the light one. Both <img>
   tags share .brand__mark's sizing; only one is ever visible. */
.brand__mark--light { display: none; }
:root[data-theme="light"] .brand__mark--dark { display: none; }
:root[data-theme="light"] .brand__mark--light { display: block; }
@media (max-width: 480px) {
  .brand__mark { height: 56px; }
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.nav__link {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-ink-soft);
  padding-block: var(--space-2xs);
  position: relative;
}
.nav__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -4px;
  height: 2px;
  background: var(--color-ink);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--color-ink); }

.nav__actions { display: flex; align-items: center; gap: var(--space-sm); }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: var(--space-2xs);
}
.nav__toggle span { width: 24px; height: 2px; background: var(--color-ink); border-radius: var(--radius-full); }

/* ---- Light/dark toggle ----
   Lives in .nav__actions (not .nav__list), so unlike the nav links it never
   goes into the mobile dropdown and is never hidden by the 900px breakpoint
   below. .site-header now flips with the theme like everything else, so this
   uses the same --color-ink/--color-line tokens as the hamburger lines next
   to it (var(--color-ink) glass-tint via color-mix) instead of a fixed white
   glass look — dark icon on a light glass circle in light mode, light icon
   on dark glass in dark mode. */
/* Pill shape (icon + label) instead of the old icon-only circle: the icon
   crossfade lives in a small fixed-size .theme-toggle__icon-wrap so it never
   reflows the label next to it, and .theme-toggle__label is plain text that
   JS keeps in sync with the icon (see setupThemeToggle() in script.js). Sizing
   steps down at the two nav breakpoints below instead of ever hiding the
   label — see the size audit in the 480px block for why those numbers. */
.theme-toggle {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem 0.5rem 0.65rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-ink) 10%, transparent);
  border: 1.5px solid var(--color-line);
  color: var(--color-ink);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.theme-toggle:hover { background: color-mix(in srgb, var(--color-ink) 18%, transparent); border-color: var(--color-muted); }
.theme-toggle__icon-wrap {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}
.theme-toggle__icon {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
/* Dark mode (default): moon shown = "currently dark". Light mode swaps to sun. */
.theme-toggle__icon--sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
.theme-toggle__icon--moon { opacity: 1; transform: rotate(0deg) scale(1); }
:root[data-theme="light"] .theme-toggle__icon--sun { opacity: 1; transform: rotate(0deg) scale(1); }
:root[data-theme="light"] .theme-toggle__icon--moon { opacity: 0; transform: rotate(90deg) scale(.6); }
/* Always follows --color-ink (flips with the theme already), never a fixed
   color, so the label stays readable in both light and dark. */
.theme-toggle__label {
  color: var(--color-ink);
  font-size: var(--fs-small);
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .nav__list { display: none; }
  .nav__toggle { display: inline-flex; }
  .site-header.is-open .nav__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: var(--header-h);
    inset-inline: 0;
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-line);
    padding: var(--space-sm) clamp(1.25rem, 1rem + 2vw, 3rem) var(--space-lg);
  }
  .site-header.is-open .nav__link {
    padding-block: var(--space-sm);
    border-bottom: 1px solid var(--color-line);
  }
  .nav__actions .btn { padding: 0.7rem 1.1rem; font-size: var(--fs-small); }
  /* nav__list just left the row (replaced by the hamburger), but Shop Now +
     the pill toggle + hamburger still share it — trim the pill a touch so
     the row has breathing room on tablet-width viewports. */
  .theme-toggle { gap: 0.35rem; padding: 0.5rem 0.8rem 0.5rem 0.6rem; }
  .theme-toggle__label { font-size: 0.8rem; }
}
/* Smallest phones: brand mark + "Shop Now" pill + this pill + hamburger all
   have to fit one row with ~320-375px of usable width after container
   padding. Shrinking font/padding here (not hiding the label) keeps "Light
   Mode"/"Dark Mode" on one line without wrapping or overlapping neighbors —
   verified by rendering the header at 320-480px viewports. */
@media (max-width: 480px) {
  .theme-toggle { gap: 0.3rem; padding: 0.4rem 0.65rem 0.4rem 0.5rem; }
  .theme-toggle__icon-wrap { width: 15px; height: 15px; }
  .theme-toggle__icon { width: 15px; height: 15px; }
  .theme-toggle__label { font-size: 0.7rem; }
}
@media (max-width: 360px) {
  .nav__actions { gap: 0.5rem; }
  .nav__actions .btn { padding: 0.6rem 0.85rem; }
  .theme-toggle { gap: 0.25rem; padding: 0.38rem 0.55rem 0.38rem 0.45rem; }
  .theme-toggle__label { font-size: 0.65rem; }
}

/* -------------------------------- Hero -------------------------------------- */
/* Fills the first viewport on load: header + hero frame (media, copy, tab
   dock, playpause) all fit within one screen, no scroll required to see the
   controls. 100vh is declared first as a fallback, then overridden by 100dvh
   where supported (avoids the mobile browser-chrome jump you get with plain
   100vh).
   No .container here and deliberately no radius/shadow/padding on the frame —
   the media has to touch all four edges of the browser window (edge-to-edge,
   like the reference sites) instead of sitting inset as a rounded card. The
   tab dock is an absolutely-positioned overlay *inside* the frame (see
   .hero__dock below) rather than a sibling section, so it's covered by the
   same 100dvh box instead of adding extra height below it. */
.hero {
  /* Cancels the generic `section { padding-block: var(--space-3xl) }` base rule —
     the frame below has to reach the section's own top/bottom edge exactly. */
  padding-block: 0;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  display: flex;
  flex-direction: column;
}
.hero__frame {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 340px;
  background: var(--color-black);
}
.hero__slides { position: relative; width: 100%; height: 100%; }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
  display: flex;
  align-items: flex-end;
  /* Reserves room above the glass tab dock (~130px tall, see .hero__dock) so
     hero__body's text never sits underneath it. Stepped down at the same
     breakpoints that shrink the dock itself. */
  padding-bottom: var(--hero-dock-space, 132px);
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--dur-slow) var(--ease);
  z-index: 2;
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* الفيديو 16:9 داخل إطار أقرب للمربع/الطولي، فـ cover يقصّ رأسياً. نرفع
     نقطة القص نحو الأعلى قليلاً ونميلها يميناً حتى يبقى الشخص (يمين-وسط
     الكادر) والعلبة وشعار FLW على القميص ظاهرين بالكامل بدل قصّ الرأس. */
  object-position: 58% 38%;
}
.hero__slide video.hero__media { background: var(--gradient-flavors); }

.hero__scrim {
  position: absolute;
  inset: 0;
  /* Text sits at the flex-start edge (left, in LTR) — darken that side so it
     stays legible over the photo, fading out toward the product on the right. */
  background:
    linear-gradient(to right, rgba(0,0,0,.58) 0%, rgba(0,0,0,.22) 42%, rgba(0,0,0,0) 65%),
    linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.5) 52%, rgba(0,0,0,.15) 78%, rgba(0,0,0,0) 100%);
}

.hero__body {
  position: relative;
  z-index: 3;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  color: var(--color-white);
  max-width: 640px;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  /* Width AND height aware: min() picks whichever axis is tighter, so a
     wide-but-short window (common with laptop browser chrome / OS display
     scaling) shrinks the title instead of letting it overflow the frame. */
  font-size: clamp(1.75rem, min(1.5rem + 2.6vw, 8dvh), 3.75rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  margin-bottom: var(--space-sm);
  color: var(--color-white);
}
.hero__desc { color: rgba(255,255,255,.86); font-size: var(--fs-body-lg); margin-bottom: var(--space-md); max-width: 46ch; }
.hero__desc + p { margin-top: 0; }
/* Slide 0 only: a punchy one-liner above the fuller description. Full-white and
   bolder than .hero__desc so the two read as headline/sub-copy, not two paragraphs. */
.hero__subline {
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--fs-body-lg);
  margin-bottom: var(--space-2xs);
  max-width: 46ch;
}
.hero__eyebrow { color: rgba(255,255,255,.8); }

/* Backstop for short viewports: laptops at 125%/150% OS scaling, external
   monitors, or a browser with visible bookmarks/tab bars routinely present
   less height than their nominal resolution suggests. Rather than trust the
   fluid clamp() alone, step the whole hero__body down explicitly so the
   title can never clip against hero__frame's top edge. */
@media (max-height: 840px) {
  .hero__body { padding: clamp(1.1rem, 0.85rem + 1.8vw, 2.25rem); }
  .hero__eyebrow { margin-bottom: var(--space-3xs); }
  .hero__title { font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.5rem); margin-bottom: var(--space-2xs); }
  .hero__subline { font-size: var(--fs-body); margin-bottom: var(--space-3xs); }
  .hero__desc { font-size: var(--fs-body); margin-bottom: var(--space-sm); }
  .hero__slide { --hero-dock-space: 112px; }
  .hero__dock { padding-block: var(--space-2xs) var(--space-sm); }
  .hero__tab { padding: var(--space-2xs) var(--space-xs); gap: 4px; }
  .hero__playpause { width: 40px; height: 40px; }
  .hero__playpause svg { width: 16px; height: 16px; }
}
@media (max-height: 660px) {
  .hero__eyebrow { display: none; }
  .hero__title { font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.9rem); margin-bottom: var(--space-3xs); }
  .hero__subline {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin-bottom: var(--space-3xs);
  }
  .hero__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: var(--space-2xs);
  }
  .hero__slide { --hero-dock-space: 92px; }
  .hero__tab-label { font-size: 0.75rem; }
}
.hero__eyebrow::before { background: currentColor; }

/* Lightweight secondary link band between the hero frame and the next section —
   deliberately not a second CTA button; it's a one-line text link + chevron. */
.hero-shopband {
  padding-block: var(--space-sm);
  text-align: center;
  border-bottom: 1px solid var(--color-line);
}
.hero-shopband__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink);
}
/* #icon-chevron points left; -90deg turns it into a downward "keep scrolling" cue. */
.hero-shopband__link svg {
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
  transition: transform var(--dur-fast) var(--ease);
}
.hero-shopband__link:hover svg {
  transform: rotate(-90deg) translateX(-2px);
}

/* شريحة placeholder ملونة (بلا صورة حقيقية بعد) */
.hero__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline: 6%;
  /* Fallback (unflavored slides) stays a fixed dark tone, not the themed
     --color-ink token — this feeds the can icon's currentColor label band,
     which has hardcoded white "FLW/DRINK" text painted on top of it; that
     text needs a dark band under it regardless of the page's own theme. */
  color: var(--flavor-color, var(--color-black));
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.16), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(0,0,0,.22), transparent 55%),
    var(--flavor-color, var(--gradient-flavors));
}
.hero__placeholder .can-illustration { width: min(46%, 320px); filter: drop-shadow(0 24px 40px rgba(0,0,0,.35)); }
.hero__placeholder img.js-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--img-pos, 50% 28%);
}
@media (max-width: 720px) {
  .hero__placeholder { align-items: flex-start; justify-content: center; padding-inline: 0; padding-top: 6%; }
  .hero__placeholder .can-illustration { width: 30%; opacity: .38; }
  .hero__scrim { background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.1) 68%); }
  /* على الموبايل الطويل يقصّ cover الأطراف الجانبية بشدة أكبر — نُبقي نقطة
     القص أقرب لوسط الكادر أفقياً كي لا يخرج الشخص/العلبة من الإطار. */
  .hero__slide video.hero__media { object-position: 54% 36%; }
}

/* Glass dock: floats over the frame's own bottom edge (see .hero__slide's
   padding-bottom above, which reserves clearance for it) instead of sitting
   in a separate section below the frame. The gradient underneath the blur
   keeps the tabs readable no matter how bright the active slide's photo is;
   the blur itself is what gives the strip its frosted-glass read regardless
   of the image/video colors behind it. */
.hero__dock {
  position: absolute;
  z-index: 5;
  inset-inline: 0;
  bottom: 0;
  padding-block: var(--space-sm) var(--space-md);
  background: linear-gradient(0deg, rgba(10,9,6,.7) 0%, rgba(10,9,6,.4) 65%, rgba(10,9,6,0) 100%);
}
.hero__dock-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.hero__playpause {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: var(--color-white);
  border: 1.5px solid rgba(255,255,255,.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero__playpause:hover { background: rgba(255,255,255,.24); }
.hero__playpause svg { width: 18px; height: 18px; }
.hero__playpause .icon-pause { display: none; }
.hero__playpause[aria-pressed="true"] .icon-play { display: none; }
.hero__playpause[aria-pressed="true"] .icon-pause { display: block; }

.hero__tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-xs);
}
.hero__tab {
  min-width: 0;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.hero__tab:hover { transform: translateY(-3px); border-color: var(--flavor-color, rgba(255,255,255,.55)); background: rgba(255,255,255,.18); }
/* nowrap + ellipsis: keeps every tab card a single predictable line height,
   so the dock's total height (and the clearance reserved for it via
   hero__slide's padding-bottom) never grows unexpectedly on narrow screens. */
.hero__tab-label { font-size: var(--fs-small); font-weight: 700; color: rgba(255,255,255,.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The three flavor tabs carry .latin (display font). This rule sits later in the
   file than .latin at equal specificity, so its 700 would win and render them far
   lighter than Archivo Black did — pin them back to Black. */
.hero__tab-label.latin { font-weight: 900; }
.hero__tab-progress {
  height: 3px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.26);
  overflow: hidden;
}
.hero__tab-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--flavor-color, var(--color-white));
}
.hero__tab.is-active { border-color: var(--flavor-color, var(--color-white)); background: rgba(255,255,255,.2); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.hero__tab.is-active .hero__tab-label { color: var(--color-white); }

@media (max-width: 720px) {
  .hero__tabs { grid-template-columns: repeat(3, 1fr); gap: var(--space-2xs); }
  .hero__tab:nth-child(4), .hero__tab:nth-child(5) { display: none; }
  .hero__tab { padding: var(--space-2xs) var(--space-xs); }
  .hero__tab-label { font-size: 0.75rem; }
  .hero__dock-inner { gap: var(--space-sm); }
  .hero__playpause { width: 38px; height: 38px; }
  .hero__playpause svg { width: 15px; height: 15px; }
}

/* --------------------------- Benefits marquee (home) ---------------------------- */
/* Replaces the retired scroll-driven can section: a permanently-dark band of proof
   points scrolling horizontally forever. Two identical __group children sit side by
   side inside the track, so translating the track by exactly -50% of its own width
   lands group 2 precisely where group 1 started — the loop restarts with no gap or
   jump. The section carries .theme-locked-dark in the markup so --color-line (which
   does flip with the theme) stays dark here like the rest of the band. */
.benefits-marquee {
  --marquee-speed: 32s;
  position: relative;
  overflow: hidden;
  background: var(--color-black);
  border-block: 1px solid var(--color-line);
  padding-block: var(--space-sm);
}
.benefits-marquee__track {
  display: flex;
  width: max-content;
  animation: benefits-marquee-scroll var(--marquee-speed) linear infinite;
}
.benefits-marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.benefits-marquee__item {
  font-family: var(--font-display, inherit);
  /* Was 700, which Archivo Black ignored (single weight) — under Figtree that
     would render visibly lighter than the band does today, so 900 to match. */
  font-weight: 900;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
  padding-inline: var(--space-sm);
  white-space: nowrap;
}
/* Neutral white separator rather than one flavor's color — the band speaks for all
   three flavors, and #8E2A6B on black would barely register anyway. */
.benefits-marquee__dot {
  color: rgba(255, 255, 255, .35);
  font-size: 0.5rem;
}
@keyframes benefits-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .benefits-marquee__track { animation: none; }
}
@media (max-width: 480px) {
  .benefits-marquee { --marquee-speed: 22s; }
  .benefits-marquee__item { font-size: var(--fs-tiny, 0.75rem); padding-inline: var(--space-xs); }
}

/* -------------------------------- Cards ------------------------------------- */
.flavor-card {
  position: relative;
  background: var(--color-paper-deep);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--color-line);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
  display: flex;
  flex-direction: column;
}
.flavor-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--flavor-color);
}
.flavor-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  color: var(--flavor-color);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 45%),
    var(--flavor-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flavor-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--img-pos, 50% 50%);
  transition: transform var(--dur-slow) var(--ease);
}
.flavor-card:hover .flavor-card__media img { transform: scale(1.07); }
.flavor-card__media .can-illustration { width: 42%; filter: drop-shadow(0 18px 30px rgba(0,0,0,.28)); }
.flavor-card__badge {
  position: absolute;
  top: var(--space-sm);
  inset-inline-start: var(--space-sm);
  background: rgba(255,255,255,.92);
  /* Constant near-black, not the flippable --color-paper: this badge's own
     background is a fixed near-white regardless of theme, so its text has
     to stay fixed-dark too or it disappears in light mode (paper flips light). */
  color: var(--color-black);
}
/* Second, smaller "detail" photo tucked into the corner of the main lifestyle
   shot — a tight macro crop of the can's own splash artwork, pairing the
   product shot with lifestyle context the way competitor product cards do
   instead of relying on a single lonely photo. */
.flavor-card__detail {
  position: absolute;
  z-index: 2;
  inset-inline-start: var(--space-sm);
  bottom: var(--space-sm);
  width: clamp(56px, 8vw, 88px);
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transition: transform var(--dur-base) var(--ease);
}
.flavor-card__detail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flavor-card:hover .flavor-card__detail { transform: translateY(-5px) scale(1.05); }
.flavor-card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1; }
.flavor-card__name { font-size: var(--fs-h3); }
.flavor-card__tag { color: var(--color-muted); font-size: var(--fs-small); }
.flavor-card__desc { font-size: var(--fs-small); flex: 1; }
.flavor-card__cta { margin-top: var(--space-sm); }

.pillar-card {
  background: var(--color-paper-deep);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-line);
  /* Falls back to the page's flavor color (set on <body data-flavor="...">
     on flavor pages) when no explicit --pillar-color variant is set, so
     e.g. tasting-note cards on flavor-passion-mist.html pick up purple
     automatically instead of the neutral gray. */
  border-top: 3px solid var(--pillar-color, var(--flavor-color, var(--color-line)));
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.pillar-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.pillar-card__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Radial wash from a lighter core to the full pillar color at the rim,
     plus a soft glow shadow in the same hue — depth instead of a flat tint
     disc, and each pillar reads as its own color instead of one gray set. */
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--pillar-color) 35%, white) 0%, var(--pillar-color) 78%);
  box-shadow: 0 8px 20px -6px var(--pillar-color);
  color: var(--color-white);
  margin-bottom: var(--space-md);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.pillar-card:hover .pillar-card__icon { transform: scale(1.08); box-shadow: 0 10px 26px -4px var(--pillar-color); }
.pillar-card__icon svg { width: 30px; height: 30px; }
.pillar-card h3 { margin-bottom: var(--space-2xs); }
.pillar-card p { font-size: var(--fs-small); }
.pillar-card--electrolytes { --pillar-color: var(--color-colada); --pillar-tint: var(--color-colada-tint); }
.pillar-card--vitamins { --pillar-color: var(--color-citrus); --pillar-tint: var(--color-citrus-tint); }
.pillar-card--collagen { --pillar-color: var(--color-passion); --pillar-tint: var(--color-passion-tint); }
.pillar-card--prebiotics { --pillar-color: #9AD17E; --pillar-tint: rgba(154,209,126,.22); }

/* Blog preview cards reuse .pillar-card but cap it with a real macro photo of
   the matching can's own artwork, tinted with a flavor-colored scrim, instead
   of a flat color block + generic icon — the photo carries the visual weight. */
.pillar-card.blog-card { padding-top: 0; }
.blog-card__visual {
  position: relative;
  display: block;
  margin-inline: calc(-1 * var(--space-lg));
  margin-bottom: var(--space-md);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--flavor-color, var(--gradient-flavors));
}
.blog-card__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The source photos are near-square macro shots with a sliver of nutrition-
     label text down their left edge — object-position alone can't crop that
     out here (cover only has room to crop vertically once a square image
     fills a 16:9 box), so a baseline zoom biased toward the artwork does the
     horizontal cropping instead. --img-pos re-centers that zoom per photo. */
  transform: scale(1.45);
  transform-origin: var(--img-pos, 50% 50%);
  transition: transform var(--dur-slow) var(--ease);
}
.blog-card__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg,
    rgba(var(--flavor-rgb, 23,20,15), .18) 0%,
    rgba(var(--flavor-rgb, 23,20,15), .75) 100%);
}
.pillar-card.blog-card:hover .blog-card__visual img { transform: scale(1.56); }

/* ------------------------------ Splash blobs -------------------------------- */
.splash-bg { position: relative; isolation: isolate; overflow: hidden; }
.splash-bg::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -10%;
  background:
    radial-gradient(38% 45% at 25% 30%, var(--splash-color, var(--color-passion-tint)), transparent 70%),
    radial-gradient(30% 35% at 78% 68%, var(--splash-color, var(--color-passion-tint)), transparent 70%);
  filter: blur(6px);
}
.splash-bg--passion { --splash-color: var(--color-passion-tint); }
.splash-bg--colada { --splash-color: var(--color-colada-tint); }
.splash-bg--citrus { --splash-color: var(--color-citrus-tint); }

/* Tri-flavor wash: three faint tints instead of one — for sections that
   represent all three flavors together rather than a single one. */
.splash-bg--tri::before {
  background:
    radial-gradient(34% 42% at 12% 18%, var(--color-passion-tint), transparent 70%),
    radial-gradient(30% 38% at 88% 28%, var(--color-colada-tint), transparent 70%),
    radial-gradient(36% 44% at 50% 92%, var(--color-citrus-tint), transparent 70%);
}

/* Small gradient rule marking a section boundary — a deliberate accent in
   place of a plain gap, used sparingly at a couple of major transitions. */
.section-divider {
  width: 72px;
  height: 3px;
  margin: 0 auto;
  border-radius: var(--radius-full);
  background: var(--gradient-flavors);
  opacity: 0.6;
}

/* ------------------------------ Scroll reveal -------------------------------- */
/* Lightweight one-shot entrance for content below the fold — CSS transition
   only (no animation loop), triggered by IntersectionObserver in script.js.
   Fully disabled under prefers-reduced-motion (see base reset at the top). */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* Explicit safety net: don't rely on the transition-duration:0.01ms trick
   above to make reduced-motion "instant" — guarantee full visibility outright,
   independent of whether/when IntersectionObserver fires. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
/* Staggered entrance for card grids — small, capped delay so it never reads as sluggish */
.grid-3 .reveal:nth-child(2), .grid-4 .reveal:nth-child(2) { transition-delay: 90ms; }
.grid-3 .reveal:nth-child(3), .grid-4 .reveal:nth-child(3) { transition-delay: 180ms; }
.grid-4 .reveal:nth-child(4) { transition-delay: 270ms; }

/* --------------------------------- Stat band -------------------------------- */
/* Standalone use (e.g. about.html): its own background is the flavor
   gradient under a fixed dark overlay tint, not page content — brand
   identity, not "dark mode" — so it keeps constant white text in both
   themes, same reasoning as text over a photo. */
.stat-band {
  background: linear-gradient(rgba(23,20,15,.45), rgba(23,20,15,.45)), var(--gradient-flavors);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  text-align: center;
}
.stat-band__item strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  margin-bottom: var(--space-3xs);
}
.stat-band__item span { font-size: var(--fs-small); color: rgba(255,255,255,.72); }
@media (max-width: 720px) { .stat-band { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------- Footer ------------------------------------ */
/* Flips fully with the theme now — a shade off from the page's own --color-paper
   (via --color-paper-deep) so it still reads as its own "band" the way the pure
   #101010 did against the old #1B1B1B page, in both themes. */
.site-footer {
  background: var(--color-paper-deep);
  color: var(--color-ink);
  padding-block: var(--space-2xl) var(--space-lg);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-line);
}
.footer__brand p { color: var(--color-ink-soft); margin-top: var(--space-sm); max-width: 32ch; }
.footer__brand .brand__mark { height: 76px; }
.footer__heading { font-size: var(--fs-small); font-weight: 700; letter-spacing: .03em; color: var(--color-muted); margin-bottom: var(--space-sm); }
.footer__list { display: flex; flex-direction: column; gap: var(--space-xs); }
.footer__list a { color: var(--color-ink-soft); font-size: var(--fs-small); }
.footer__list a:hover { color: var(--color-ink); text-decoration: underline; }
.footer__social { display: flex; gap: var(--space-xs); margin-top: var(--space-md); }
.footer__social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  display: inline-flex; align-items: center; justify-content: center;
}
.footer__social a:hover { background: color-mix(in srgb, var(--color-ink) 12%, transparent); }
.footer__social svg { width: 16px; height: 16px; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  font-size: var(--fs-small);
  color: var(--color-muted);
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* --------------------------------- Nutrition table --------------------------- */
/* Sensitive content — kept on its own elevated, clearly-bordered surface
   rather than sitting flush with the page background, so rows stay easy to
   scan. Row dividers use --color-line (theme-aware, calibrated alongside
   --color-paper-deep in both modes) instead of a fixed white-alpha overlay,
   which would nearly vanish once the table's own background flips light. */
.nutri-table { background: var(--color-paper-deep); border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; }
/* The primary per-can nutrition table is a centered summary block; the
   secondary tables inside .nutri-detail stay full-width in their columns. */
.nutri-table--primary { max-width: 640px; margin-inline: auto; }
.nutri-table th, .nutri-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: start;
  font-size: var(--fs-small);
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
}
.nutri-table th { background: rgba(255,255,255,.07); font-weight: 700; }
.nutri-table tr:last-child td { border-bottom: none; }

/* ------------------------------ Split / CTA / rows ----------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* Secondary nutrition breakdown below the main table — a two-column split
   whose columns are top-aligned rather than centered, since the two tables
   have different heights. Must stay after .split: same specificity (0,1,0),
   so source order is what lets align-items win. */
.nutri-detail { align-items: start; margin-top: var(--space-2xl); }
.nutri-detail__title { font-size: var(--fs-body-lg); margin-bottom: var(--space-sm); }

/* Collapsible full-ingredients disclosure below the nutrition tables. */
.disclosure {
  max-width: 760px;
  margin: var(--space-xl) auto 0;
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}
.disclosure__summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-ink);
}

.split-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--color-paper);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 45%),
    var(--gradient-flavors);
  display: flex;
  align-items: center;
  justify-content: center;
}
.split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--img-pos, 50% 50%); }
.split-media .can-illustration { width: 34%; }
.split-media[data-flavor] {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(0,0,0,.18), transparent 55%),
    var(--flavor-color);
}

.row-between {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.cta-banner {
  background: linear-gradient(rgba(23,20,15,.45), rgba(23,20,15,.45)), var(--gradient-flavors);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
}
.cta-banner h2 { color: inherit; }
.cta-banner p { color: rgba(255,255,255,.8); max-width: 52ch; margin-inline: auto; }
.cta-banner .btn { margin-top: var(--space-md); }

/* ------------------------- Dark / strong sections (page rhythm) ------------------------- */
/* A handful of homepage sections swap the default paper background for a full-bleed
   dark or saturated background — deliberate alternation with the light sections
   around them (the "dark block / light block" pacing reference sites like Whoop and
   Celsius use), instead of one flat background running top to bottom. Everything
   here is scoped under .section-dark so the shared components it re-skins
   (.pillar-card, .cta-banner, .btn-outline) keep their normal
   light-page look on every other page that still uses them as-is.
   These now flip with the theme like the rest of the page (base rules below
   use the ink tokens) — EXCEPT --pillars and --cta, whose own background stays
   the flavor gradient under a dark overlay regardless of theme (brand identity,
   not "dark mode"); their text-color override sits right after the pillars-
   specific background rules further down, forcing white back for those
   two variants only. */
.section-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-ink);
}
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--color-ink); }
.section-dark p { color: var(--color-ink-soft); }
.section-dark .eyebrow { color: var(--color-muted); }
.section-dark .eyebrow::before { background: currentColor; }
.section-dark .btn-outline { border-color: var(--color-line); color: var(--color-ink); }
.section-dark .btn-outline:hover { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.section-dark .container { position: relative; z-index: 1; }

/* Oversized watermark of the can's own splash icon — a "concrete visual" for
   sections with no photography of their own, per the brand's splash motif
   rather than a generic decorative shape. */
.section-dark__watermark {
  position: absolute;
  z-index: 0;
  width: min(60vw, 720px);
  height: auto;
  color: var(--color-ink);
  opacity: 0.05;
  top: -14%;
  inset-inline-end: -10%;
  pointer-events: none;
}
.section-dark__watermark--center {
  inset-inline-end: 50%;
  top: 50%;
  transform: translate(50%, -50%);
  width: min(50vw, 640px);
}

/* ---- Four Pillars: colorful gradient wash, cards become frosted glass panels ---- */
.section-dark--pillars {
  background:
    radial-gradient(ellipse 80% 60% at 12% -10%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(rgba(23,20,15,.72), rgba(23,20,15,.82)), var(--gradient-flavors);
}
.section-dark--pillars .pillar-card {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.section-dark--pillars .pillar-card:hover {
  background: rgba(255,255,255,.13);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.section-dark--pillars .pillar-card p { color: rgba(255,255,255,.76); }
/* Same colorful gradient badge as the light-page pillar cards (not the flat
   translucent-gray disc this used to be) — each of the four keeps its own
   hue instead of all four reading as one neutral gray set on the dark wash. */
.section-dark--pillars .pillar-card__icon {
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--pillar-color) 40%, white) 0%, var(--pillar-color) 78%);
  box-shadow: 0 8px 20px -6px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.12) inset;
  color: var(--color-white);
}
.section-dark--pillars .pillar-card--electrolytes { --pillar-color: var(--color-colada); }
.section-dark--pillars .pillar-card--vitamins { --pillar-color: var(--color-citrus); }
.section-dark--pillars .pillar-card--collagen { --pillar-color: var(--color-passion); }
.section-dark--pillars .pillar-card--prebiotics { --pillar-color: #9AD17E; }

/* ---- Pillars & closing CTA: exempt from the flip above ----
   Both keep the flavor gradient under a fixed dark overlay tint as their own
   background regardless of theme (brand identity, not page content) — same
   text-over-colorful-artwork reasoning as the lifestyle slider's photos —
   so their text stays constant white in both themes. Declared after the
   base .section-dark rules above (equal specificity, later wins). */
.section-dark--pillars,
.section-dark--pillars h2, .section-dark--pillars h3, .section-dark--pillars h4,
.section-dark--cta,
.section-dark--cta h2, .section-dark--cta h3, .section-dark--cta h4 {
  color: var(--color-white);
}
.section-dark--pillars p, .section-dark--cta p { color: rgba(255,255,255,.78); }
.section-dark--pillars .eyebrow, .section-dark--cta .eyebrow { color: rgba(255,255,255,.85); }
.section-dark--pillars .btn-outline, .section-dark--cta .btn-outline {
  border-color: rgba(255,255,255,.55);
  color: var(--color-white);
}
.section-dark--pillars .btn-outline:hover, .section-dark--cta .btn-outline:hover {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}
.section-dark--pillars .section-dark__watermark, .section-dark--cta .section-dark__watermark { color: var(--color-white); }

/* -------------------------------- Lifestyle moments slider ------------------------- */
/* Deliberately the photography's own opposite number to the hero: no brand
   gradient anywhere here, no video, no autoplay — three real photos carry the
   whole section, each with its own corner-anchored scrim instead of one
   uniform darken-the-whole-image treatment. Manual nav only (arrows/dots/
   swipe/keyboard) since there's no product-per-slide reason to autoplay. */
.lifeslider { position: relative; background: var(--color-paper); }
.lifeslider .section-head { margin-bottom: var(--space-lg); }

.lifeslider__frame {
  position: relative;
  overflow: hidden;
  height: clamp(480px, 78vh, 820px);
  background: var(--color-black);
}
.lifeslider__slides { position: relative; width: 100%; height: 100%; }

.lifeslider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.045);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease), visibility 0s linear 900ms;
}
.lifeslider__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  z-index: 2;
}
.lifeslider__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lifeslider__scrim { position: absolute; inset: 0; }

/* Each slide's scrim is a corner wash pointed at wherever its own copy sits —
   set per composition (see the HTML comment on each slide) — rather than one
   flat gradient reused everywhere. */
.lifeslider__slide--br .lifeslider__scrim { background: linear-gradient(135deg, rgba(10,9,6,0) 28%, rgba(10,9,6,.42) 55%, rgba(10,9,6,.82) 100%); }
.lifeslider__slide--bl .lifeslider__scrim { background: linear-gradient(225deg, rgba(10,9,6,0) 28%, rgba(10,9,6,.42) 55%, rgba(10,9,6,.82) 100%); }
.lifeslider__slide--tc .lifeslider__scrim { background: linear-gradient(0deg, rgba(10,9,6,0) 45%, rgba(10,9,6,.4) 72%, rgba(10,9,6,.8) 100%); }

.lifeslider__body {
  position: absolute;
  z-index: 3;
  max-width: 460px;
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
  color: var(--color-white);
}
.lifeslider__slide--br .lifeslider__body { inset-inline-end: 0; bottom: 0; }
.lifeslider__slide--bl .lifeslider__body { inset-inline-start: 0; bottom: 0; }
.lifeslider__slide--tc .lifeslider__body { top: 0; left: 50%; transform: translateX(-50%); max-width: 620px; text-align: center; }

.lifeslider__eyebrow { color: rgba(255,255,255,.85); }
.lifeslider__eyebrow::before { background: currentColor; }
.lifeslider__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.85rem, 1.35rem + 2.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  margin-bottom: var(--space-sm);
  color: var(--color-white);
}
.lifeslider__desc { color: rgba(255,255,255,.88); font-size: var(--fs-body-lg); margin-bottom: 0; max-width: 42ch; }
/* The gap below the copy exists only to separate it from a following CTA.
   Slides that end at the description (no button) must not keep that trailing
   space, so reserve it only when a sibling actually follows. */
.lifeslider__desc:not(:last-child) { margin-bottom: var(--space-md); }
.lifeslider__slide--tc .lifeslider__desc { margin-inline: auto; }

.lifeslider__arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(23,20,15,.4);
  border: 1.5px solid rgba(255,255,255,.5);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--dur-fast) var(--ease);
}
.lifeslider__arrow:hover { background: rgba(23,20,15,.68); }
.lifeslider__arrow svg { width: 20px; height: 20px; }
.lifeslider__arrow--prev { inset-inline-start: var(--space-md); }
.lifeslider__arrow--next { inset-inline-end: var(--space-md); }
.lifeslider__arrow--next svg { transform: scaleX(-1); }

/* Dots default to the bottom edge, but flip to the top edge whenever the
   active slide's own copy lives at the bottom (br/bl) — set via
   .lifeslider__frame[data-text-pos] in script.js — so the two never overlap
   regardless of viewport size, instead of guessing a fixed clearance. */
.lifeslider__dots {
  position: absolute;
  z-index: 4;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2xs);
  transition: bottom var(--dur-base) var(--ease), top var(--dur-base) var(--ease);
}
.lifeslider__frame[data-text-pos="br"] .lifeslider__dots,
.lifeslider__frame[data-text-pos="bl"] .lifeslider__dots {
  top: var(--space-md);
  bottom: auto;
}
.lifeslider__dot {
  width: 9px; height: 9px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: none;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.lifeslider__dot:hover { background: rgba(255,255,255,.72); }
.lifeslider__dot.is-active { background: var(--color-white); transform: scale(1.3); }

@media (max-width: 720px) {
  .lifeslider__arrow { display: none; }
  .lifeslider__body { max-width: 100%; inset-inline: 0; padding: clamp(1.25rem, 1rem + 3vw, 2rem); }
  .lifeslider__slide--tc .lifeslider__body { max-width: 100%; left: 0; transform: none; text-align: left; }
  .lifeslider__title { font-size: clamp(1.6rem, 1.3rem + 2vw, 2.25rem); }
  .lifeslider__desc { font-size: var(--fs-body); margin-inline: 0; }
}

/* ---- Closing CTA: mirrors the hero's colorful full-bleed treatment, bookending
   the page in the same saturated brand gradient it opened on. ---- */
.section-dark--cta {
  background:
    radial-gradient(ellipse 70% 60% at 50% 130%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(rgba(23,20,15,.5), rgba(23,20,15,.62)), var(--gradient-flavors);
}
.section-dark--cta .cta-banner { background: none; padding-block: var(--space-lg); }

/* --------------------------------- Utility ------------------------------------ */
.flow { display: flex; flex-direction: column; gap: var(--space-md); }
.center-copy { text-align: center; margin-inline: auto; }
.can-illustration { display: block; }

/* بديل الصورة/الفيديو الأنيق: يُخفى العنصر عند فشل التحميل ليظهر التدرج خلفه */
.js-fallback.is-broken { display: none; }

/* ------------------------------ تنقّل بين النكهات ------------------------------- */
.flavor-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.flavor-nav__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm) var(--space-lg);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-md);
  font-weight: 700;
  transition: border-color var(--dur-fast) var(--ease);
}
.flavor-nav__link:hover { border-color: var(--color-ink); }
.flavor-nav__link small { color: var(--color-muted); font-weight: 500; font-size: var(--fs-small); }
.flavor-nav__link--next { text-align: end; align-items: flex-end; }

/* ---------------------------------- تنبيه/Callout -------------------------------- */
.callout {
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-paper-deep);
  border-inline-start: 4px solid var(--color-ink);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}
.callout strong { display: block; margin-bottom: var(--space-3xs); color: var(--color-ink); }
.callout--warn { border-inline-start-color: var(--color-citrus); }

/* --------------------------------- مقالة المدوّنة -------------------------------- */
.article-meta {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
  color: var(--color-muted);
  font-size: var(--fs-small);
  margin-bottom: var(--space-lg);
}
.article-meta span:not(:last-child)::after { content: '·'; margin-inline-start: var(--space-sm); }
.article-body { max-width: 72ch; margin-inline: auto; }
.article-body h2 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); font-size: var(--fs-h3); }
.article-body p { margin-bottom: var(--space-sm); }
.article-body ul { padding-inline-start: 1.25rem; list-style: disc; margin-bottom: var(--space-md); }
.article-body ul li { margin-bottom: var(--space-2xs); color: var(--color-ink-soft); }
.article-body .lede { font-size: var(--fs-body-lg); margin-bottom: var(--space-md); }

/* ------------------------------------ الأسئلة الشائعة (Accordion) ------------------------------------ */
.accordion { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 780px; margin-inline: auto; }
.accordion-item {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-paper-deep);
  overflow: hidden;
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: none;
  border: none;
  text-align: start;
  font-weight: 700;
  font-size: var(--fs-body-lg);
  color: var(--color-ink);
}
.accordion-trigger svg { flex: none; width: 20px; height: 20px; color: var(--color-muted); transition: transform var(--dur-base) var(--ease); }
.accordion-item.is-open .accordion-trigger svg { transform: rotate(180deg); }
.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease);
}
.accordion-panel > div { overflow: hidden; }
.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel p { padding: 0 var(--space-lg) var(--space-md); }

/* -------------------------------------- نموذج التواصل -------------------------------------- */
.form-grid { display: flex; flex-direction: column; gap: var(--space-md); max-width: 640px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: var(--space-3xs); }
.form-field label { font-size: var(--fs-small); font-weight: 700; }
.form-field input, .form-field select, .form-field textarea {
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: var(--fs-body);
  font-family: inherit;
  background: var(--color-paper-deep);
  color: var(--color-ink);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--color-ink); outline: none; }
.form-field textarea { resize: vertical; min-height: 130px; }
.form-note {
  font-size: var(--fs-small);
  color: var(--color-muted);
  background: var(--color-paper-deep);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
}
.contact-info { display: flex; flex-direction: column; gap: var(--space-md); }
.contact-info__item { display: flex; gap: var(--space-sm); align-items: flex-start; }
.contact-info__item svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--color-passion); }
.contact-info__item strong { display: block; }