/* ============================================================
   BUILD SUPPLEMENT — design tokens + base
   ============================================================ */

/* Photo-scraping deterrent — block drag / text-select / long-press-save on
   images (right-click "Save image" is blocked in JS). Stops casual copying;
   it cannot stop screenshots or dev-tools — no public site can. */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

:root {
  /* Type scale */
  --fs-hero: clamp(56px, 9vw, 144px);
  --fs-display: clamp(40px, 6vw, 88px);
  --fs-section: clamp(32px, 4.4vw, 64px);
  --fs-headline: clamp(22px, 2.4vw, 32px);
  --fs-subhead: 18px;
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-micro: 11px;

  /* Spacing scale */
  --space-section: clamp(96px, 12vw, 160px);
  --space-band: clamp(64px, 8vw, 112px);

  /* Container */
  --container: 1320px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Heading font (overridable by tweaks) */
  --font-heading: "Archivo", "Inter Tight", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-heading-stretch: 100%;
  --font-heading-tracking: -0.02em;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Motion */
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  /* Gentle ease-out-back: enough life for micro-pops, no tacky overshoot */
  --ease-spring: cubic-bezier(.34, 1.3, .64, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* Colors set per-theme below */
}

/* ===== PRESET: Athletic (default) ===== */
[data-theme="athletic"] {
  --color-bg: #ffffff;
  --color-surface: #f7f8fb;
  --color-surface-2: #eef0f6;
  --color-ink: #0F1E3D;
  --color-ink-soft: #2b3a5a;
  --color-muted: #5a6480;
  --color-accent: #FF6B1A;
  --color-on-accent: #0F1E3D;
  --color-border: #e3e6ef;
  --color-shadow: 15 30 61;
}
[data-theme="athletic"][data-mode="dark"] {
  --color-bg: #0F1E3D;
  --color-surface: #152a52;
  --color-surface-2: #1d3766;
  --color-ink: #ffffff;
  --color-ink-soft: #d8def0;
  --color-muted: #9aa6c4;
  --color-accent: #FF6B1A;
  --color-on-accent: #0F1E3D;
  --color-border: #1f3a6c;
  --color-shadow: 0 0 0;
}

/* ===== PRESET: Volt ===== */
[data-theme="volt"] {
  --color-bg: #ffffff;
  --color-surface: #f5f6f4;
  --color-surface-2: #ebede8;
  --color-ink: #0A0A0A;
  --color-ink-soft: #1f1f1f;
  --color-muted: #5a5a5a;
  --color-accent: #C5FF00;
  --color-on-accent: #0A0A0A;
  --color-border: #e2e3df;
  --color-shadow: 10 10 10;
}
[data-theme="volt"][data-mode="dark"] {
  --color-bg: #0A0A0A;
  --color-surface: #161616;
  --color-surface-2: #232323;
  --color-ink: #ffffff;
  --color-ink-soft: #e6e6e6;
  --color-muted: #9a9a9a;
  --color-accent: #C5FF00;
  --color-on-accent: #0A0A0A;
  --color-border: #2a2a2a;
  --color-shadow: 0 0 0;
}

/* ===== PRESET: Power ===== */
[data-theme="power"] {
  --color-bg: #ffffff;
  --color-surface: #f6f5f5;
  --color-surface-2: #ecebea;
  --color-ink: #1A1A1A;
  --color-ink-soft: #2c2c2c;
  --color-muted: #6a6a6a;
  --color-accent: #E63329;
  --color-on-accent: #0A0A0A;
  --color-border: #e3e0df;
  --color-shadow: 26 26 26;
}
[data-theme="power"][data-mode="dark"] {
  --color-bg: #1A1A1A;
  --color-surface: #252525;
  --color-surface-2: #2f2f2f;
  --color-ink: #ffffff;
  --color-ink-soft: #e8e8e8;
  --color-muted: #a3a3a3;
  --color-accent: #E63329;
  --color-on-accent: #0A0A0A;
  --color-border: #333333;
  --color-shadow: 0 0 0;
}

/* ===== PRESET: Natural ===== */
[data-theme="natural"] {
  --color-bg: #ffffff;
  --color-surface: #f5f8f5;
  --color-surface-2: #eaf0eb;
  --color-ink: #143D2B;
  --color-ink-soft: #1f4a37;
  --color-muted: #59766a;
  --color-accent: #D9A441;
  --color-on-accent: #143D2B;
  --color-border: #dbe6dd;
  --color-shadow: 20 61 43;
}
[data-theme="natural"][data-mode="dark"] {
  --color-bg: #143D2B;
  --color-surface: #1b4d38;
  --color-surface-2: #235e45;
  --color-ink: #ffffff;
  --color-ink-soft: #e5efe8;
  --color-muted: #a8c2b1;
  --color-accent: #D9A441;
  --color-on-accent: #143D2B;
  --color-border: #265c44;
  --color-shadow: 0 0 0;
}

/* ===== PRESET: Green Gold Edition (premium / signature) ===== */
[data-theme="greengold"] {
  --color-bg: #F7F2E4;          /* warm cream */
  --color-surface: #ECE3CC;     /* parchment */
  --color-surface-2: #DFD3B4;
  --color-ink: #0B3023;         /* deep forest */
  --color-ink-soft: #163D2D;
  --color-muted: #5C6857;       /* darkened sage — hits AA (≈5.3:1) on cream for eyebrows/small text */
  --color-accent: #C99B2D;      /* rich gold */
  --color-on-accent: #0B3023;
  --color-border: #D8CCAE;
  --color-shadow: 11 48 35;
}
[data-theme="greengold"][data-mode="dark"] {
  --color-bg: #0B3023;
  --color-surface: #0F3A2B;
  --color-surface-2: #144433;
  --color-ink: #F7F2E4;
  --color-ink-soft: #DCD2B6;
  --color-muted: #9DAA9F;
  --color-accent: #E0B548;
  --color-on-accent: #0B3023;
  --color-border: #1B5340;
  --color-shadow: 0 0 0;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 200ms var(--ease-std), color 200ms var(--ease-std);
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; cursor: pointer; }

::selection { background: var(--color-accent); color: var(--color-on-accent); }

/* Visible keyboard focus for every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Heading utility */
.h-display {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-stretch: var(--font-heading-stretch);
  letter-spacing: var(--font-heading-tracking);
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0;
}
.h-section {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-stretch: var(--font-heading-stretch);
  letter-spacing: var(--font-heading-tracking);
  line-height: 0.96;
  text-transform: uppercase;
  margin: 0;
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Container */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) { .container { padding: 0 40px; } }

/* Mobile-specific */
@media (max-width: 720px) {
  :root {
    --fs-hero: clamp(44px, 14vw, 80px);
    --fs-display: clamp(32px, 11vw, 56px);
    --fs-section: clamp(28px, 10vw, 48px);
    --space-section: clamp(72px, 14vw, 96px);
    --space-band: clamp(48px, 10vw, 64px);
  }
  section { padding: 72px 0; }
  section.tight { padding: 56px 0; }
}

/* ============================================================
   EDITORIAL TEXTURE — break the PowerPoint feel
   ============================================================ */

/* Serif accent for italic moments */
.serif-accent { font-family: "Fraunces", "Times New Roman", serif; font-style: italic; font-weight: 400; }

/* Subtle film grain overlay over the whole page */
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 99999;
  opacity: 0.06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
[data-mode="dark"] body::after { mix-blend-mode: screen; opacity: 0.08; }

/* Editorial blockquote */
.editorial-quote {
  font-family: "Fraunces", "Times New Roman", serif;
  font-style: italic; font-weight: 400;
  letter-spacing: -0.015em; line-height: 1.05;
}

/* Number stamp — small editorial corner mark */
.edition-stamp {
  position: absolute;
  font-family: var(--font-heading);
  font-weight: 900; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-muted);
}
.chapter-break {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; padding: 8px 0;
  color: var(--color-muted);
  margin: 0 auto; max-width: var(--container);
  padding-inline: 24px;
}
.chapter-break::before, .chapter-break::after {
  content: ""; flex: 1; max-width: 200px;
  height: 1px; background: var(--color-border);
}
.chapter-break-num {
  font-family: var(--font-heading);
  font-weight: 900; font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--color-accent);
}
.chapter-break-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-muted);
}

/* ============================================================
   MOBILE COMPATIBILITY PASS
   ============================================================ */

/* Prevent horizontal overflow at any breakpoint */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video { max-width: 100%; height: auto; }

/* Responsive visibility utilities */
@media (max-width: 720px) {
  .hide-mobile { display: none !important; }
}
.bs-show-mobile { display: none; }
@media (max-width: 900px) {
  .bs-show-mobile { display: inline-flex !important; }
}

/* Product grids — two items per row on phones */
@media (max-width: 640px) {
  .product-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}

/* GAINS easter egg — brief screen shake */
@keyframes shakeIt {
  0%, 100% { transform: translate3d(0, 0, 0); }
  15% { transform: translate3d(-7px, 2px, 0); }
  30% { transform: translate3d(7px, -2px, 0); }
  45% { transform: translate3d(-5px, 1px, 0); }
  60% { transform: translate3d(5px, -1px, 0); }
  75% { transform: translate3d(-3px, 0, 0); }
  90% { transform: translate3d(2px, 0, 0); }
}
body.shake-it { animation: shakeIt 600ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  body.shake-it { animation: none !important; }
}

/* Push floating chrome up when compare tray is showing */
body:has(.compare-tray) [class*="theme-popover"] { bottom: 110px !important; }
body:has(.compare-tray) .floating-theme { bottom: 110px !important; }
body:has(.compare-tray) .floating-lang  { bottom: 174px !important; }
/* Lift the bottom-left promo above the compare tray too */
body:has(.compare-tray) .floating-promo { bottom: 104px !important; }

@media (max-width: 720px) {
  body:has(.compare-tray) .floating-theme { bottom: 140px !important; }
  body:has(.compare-tray) .floating-lang  { bottom: 204px !important; }
  body:has(.compare-tray) .floating-promo { bottom: 188px !important; }
}

@media (max-width: 720px) {
  /* Tighter container padding on phones */
  .container { padding: 0 16px; }

  /* Tighter chapter breaks */
  .chapter-break { gap: 10px; padding-inline: 16px; }
  .chapter-break::before, .chapter-break::after { max-width: 60px; }
  .chapter-break-num { font-size: 12px; }
  .chapter-break-label { font-size: 9px; letter-spacing: 0.18em; }

  /* Compare tray — stack tighter, smaller thumbs */
  .compare-tray {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 14px !important;
    gap: 10px !important;
    left: 8px !important; right: 8px !important; bottom: 8px !important;
  }
  .compare-tray .tray-thumbs > div { width: 40px !important; height: 40px !important; }

  /* Larger touch targets for buttons */
  .btn-sm { padding: 12px 16px; font-size: 13px; }
}

@media (max-width: 480px) {
  /* Smaller heading sizes on very small phones */
  :root {
    --fs-hero: clamp(36px, 13vw, 64px);
    --fs-display: clamp(28px, 10vw, 48px);
    --fs-section: clamp(24px, 9vw, 40px);
  }

  /* Marquee items smaller */
  .marquee-item { font-size: clamp(18px, 5vw, 28px) !important; }
  .marquee-track { gap: 24px !important; padding-right: 24px !important; }
}

/* Tap-friendly anywhere */
@media (hover: none) {
  button, a, [role="button"] { min-height: 36px; }
  .btn { padding-block: 14px; }
}

/* Sections */
section { padding: var(--space-section) 0; }
section.tight { padding: var(--space-band) 0; }

/* ============================================================
   Reusable atoms
   ============================================================ */

/* BUTTON */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  transition: transform var(--dur-base) var(--ease-std),
              background-color var(--dur-base) var(--ease-std),
              color var(--dur-base) var(--ease-std),
              box-shadow var(--dur-base) var(--ease-std);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--color-ink); color: var(--color-bg); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgb(var(--color-shadow) / .2); }
.btn-primary:active { transform: translateY(0); }
.btn-accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgb(var(--color-shadow) / .25); }
.btn-ghost { background: transparent; color: var(--color-ink); border: 1.5px solid var(--color-border); }
.btn-ghost:hover { background: var(--color-surface); border-color: var(--color-ink); }
.btn-sm { padding: 10px 16px; font-size: 12px; }
.btn-lg { padding: 18px 32px; font-size: 16px; }
.btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* BADGE */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
}
.badge-accent { background: var(--color-accent); color: var(--color-on-accent); }
.badge-ink { background: var(--color-ink); color: var(--color-bg); }
.badge-soft { background: var(--color-surface-2); color: var(--color-ink); }

/* INPUT */
.input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--fs-body);
  transition: border-color var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std);
}
.input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent); }
.input::placeholder { color: var(--color-muted); }

/* CARD */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  transition: transform var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std);
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 600ms var(--ease-std), transform 600ms var(--ease-std); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 500ms var(--ease-std), transform 500ms var(--ease-std); }
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Marquee */
.marquee { display: flex; overflow: hidden; gap: 0; }
.marquee-track { display: flex; gap: 64px; padding-right: 64px; animation: marquee 32s linear infinite; flex-shrink: 0; }
@keyframes marquee { to { transform: translateX(-100%); } }
.marquee-item { font-family: var(--font-heading); font-weight: 800; font-size: clamp(24px, 3.6vw, 56px); letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; }
.marquee-dot { width: 12px; height: 12px; border-radius: 999px; background: var(--color-accent); flex-shrink: 0; align-self: center; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-muted); }

/* No-scroll for drawer */
body.no-scroll { overflow: hidden; }