/* ============================================
   THREAD ARENA — ENHANCED DESIGN SYSTEM
   ============================================ */

:root {
  color-scheme: light;

  /* Heat Check — sleek, minimal, warm neutral base with a vivid "heat"
     accent for CTAs and a punchy multi-color palette for product cards. */
  --bg: #fbfaf7;
  --bg-soft: #f3f1ec;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-solid: #ffffff;
  --surface-2: #f5f3ee;
  --surface-glass: rgba(255, 255, 255, 0.72);
  --text: #14141a;
  --text-secondary: #3a3a42;
  --muted: #74747c;
  --muted-light: #a9a9b0;

  /* "Gold" tokens repurposed as the Heat Check primary accent (vivid orange-red) */
  --gold: #ff4d2e;
  --gold-bright: #ff7a4d;
  --gold-soft: #ffb199;
  --gold-muted: #ffd4c4;
  --gold-glow: rgba(255, 77, 46, 0.16);
  --gold-glow-strong: rgba(255, 77, 46, 0.28);

  --black: #14141a;
  --line: rgba(20, 20, 26, 0.08);
  --line-strong: rgba(20, 20, 26, 0.14);

  /* Card color-block palette — cycled per product, punchier than the jersey site */
  --accent-1: #ff5c8a;
  --accent-2: #3ddc97;
  --accent-3: #ffb703;
  --accent-4: #4cc9f0;
  --accent-5: #a685e2;
  --accent-6: #ff8a3d;
  --accent-7: #06d6a0;
  --accent-8: #ef476f;

  /* Shadows */
  --shadow-xs: 0 2px 8px rgba(20, 20, 26, 0.05);
  --shadow-sm: 0 4px 16px rgba(20, 20, 26, 0.07);
  --shadow-md: 0 8px 32px rgba(20, 20, 26, 0.1);
  --shadow-lg: 0 16px 48px rgba(20, 20, 26, 0.14);
  --shadow-xl: 0 24px 80px rgba(20, 20, 26, 0.18);
  --shadow-gold: 0 8px 32px rgba(255, 77, 46, 0.22);
  --shadow-gold-lg: 0 16px 48px rgba(255, 77, 46, 0.32);

  /* Radii — soft and rounded, sleeker/friendlier than the jersey site's sharp graphic look */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-2xl: 40px;
  --radius-full: 999px;

  /* Layout */
  --container: 1280px;
  --container-narrow: 960px;

  /* Transitions — smoother easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s var(--ease-out-quart);
  --transition-base: 0.35s var(--ease-out-expo);
  --transition-slow: 0.5s var(--ease-out-expo);
  --transition-bounce: 0.5s var(--ease-out-back);

  --font-display: "Space Grotesk", "Poppins", system-ui, sans-serif;
}

body.dark {
  color-scheme: dark;

  --bg: #121212;
  --bg-soft: #1a1a1a;
  --surface: rgba(24, 24, 24, 0.9);
  --surface-solid: #181818;
  --surface-2: #202020;
  --surface-glass: rgba(24, 24, 24, 0.72);
  --text: #f5f5f2;
  --text-secondary: #d8d8d4;
  --muted: #9d9d9d;
  --muted-light: #6f6f6f;

  --gold: #ff6b45;
  --gold-bright: #ff8763;
  --gold-soft: #ffb199;
  --gold-muted: #5c3327;
  --gold-glow: rgba(255, 107, 69, 0.18);
  --gold-glow-strong: rgba(255, 107, 69, 0.3);

  --black: #f5f5f2;
  --line: rgba(245, 245, 242, 0.1);
  --line-strong: rgba(245, 245, 242, 0.16);

  --accent-1: #e0527a;
  --accent-2: #33c084;
  --accent-3: #e0a300;
  --accent-4: #3fb0d6;
  --accent-5: #9270cf;
  --accent-6: #e07730;
  --accent-7: #05b98a;
  --accent-8: #d43e60;

  --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 8px 32px rgba(255, 107, 69, 0.22);
  --shadow-gold-lg: 0 16px 48px rgba(255, 107, 69, 0.32);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  transition: background-color 0.5s var(--ease-out-expo), color 0.5s var(--ease-out-expo);
  line-height: 1.6;
}

body.modal-open {
  overflow: hidden;
}

/* Subtle animated grain texture overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Warm, colorful ambient wash — subtle heat + a hint of the card palette */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 15% 0%, rgba(255, 77, 46, 0.06), transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 100%, rgba(76, 201, 240, 0.06), transparent 50%);
  transition: opacity 0.5s ease;
}

body.dark::after {
  background:
    radial-gradient(ellipse 80% 50% at 15% 0%, rgba(255, 107, 69, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 100%, rgba(63, 176, 214, 0.07), transparent 50%);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

[hidden] {
  display: none !important;
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */

/* Reveal animations — hidden only when JS is active */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.stagger-children > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}

.js-loaded .reveal {
  opacity: 0;
  transform: translateY(30px);
}

.js-loaded .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.js-loaded .reveal-left {
  opacity: 0;
  transform: translateX(-40px);
}

.js-loaded .reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.js-loaded .reveal-right {
  opacity: 0;
  transform: translateX(40px);
}

.js-loaded .reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.js-loaded .reveal-scale {
  opacity: 0;
  transform: scale(0.92);
}

.js-loaded .reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

.js-loaded .stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}

.js-loaded .stagger-children.visible > *:nth-child(1) { transition-delay: 0s; }
.js-loaded .stagger-children.visible > *:nth-child(2) { transition-delay: 0.08s; }
.js-loaded .stagger-children.visible > *:nth-child(3) { transition-delay: 0.16s; }
.js-loaded .stagger-children.visible > *:nth-child(4) { transition-delay: 0.24s; }
.js-loaded .stagger-children.visible > *:nth-child(5) { transition-delay: 0.32s; }
.js-loaded .stagger-children.visible > *:nth-child(6) { transition-delay: 0.40s; }
.js-loaded .stagger-children.visible > *:nth-child(7) { transition-delay: 0.48s; }
.js-loaded .stagger-children.visible > *:nth-child(8) { transition-delay: 0.56s; }

.js-loaded .stagger-children.visible > * {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale,
  .stagger-children > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================
   NAVIGATION — GLASSMORPHISM TOPBAR
   ============================================ */

/* ============================================
   INFO TICKER — scrolling marquee bar
   ============================================ */
.info-ticker {
  position: relative;
  z-index: 101;
  overflow: hidden;
  background: var(--text);
  color: var(--bg);
  padding: 8px 0;
  white-space: nowrap;
}

.info-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  animation: tickerScroll 88s linear infinite;
  will-change: transform;
}

.info-ticker-track span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 4px;
}

.info-ticker-track .dot {
  font-size: 0.5rem;
  opacity: 0.6;
}

@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .info-ticker-track { animation: none; }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(20px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(40px) saturate(1.2);
  -webkit-backdrop-filter: blur(40px) saturate(1.2);
  transition: all 0.4s var(--ease-out-expo);
}

.topbar.scrolled {
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: var(--shadow-sm);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: 1.15rem;
  transition: transform 0.3s var(--ease-out-back);
}

.brand:hover {
  transform: scale(1.02);
}

.brand-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 50%;
  background: var(--surface-solid);
  border: 1.5px solid var(--gold-muted);
  box-shadow: 0 6px 20px var(--gold-glow);
  padding: 4px;
  transition: all 0.4s var(--ease-out-back);
}

.brand:hover .brand-logo {
  transform: rotate(-12deg) scale(1.08);
  box-shadow: 0 8px 24px var(--gold-glow-strong);
  border-color: var(--gold);
}

.footer-brand .brand-logo {
  width: 52px;
  height: 52px;
}

.brand-fallback {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--black);
  color: var(--gold);
  border: 1.5px solid var(--gold-muted);
  box-shadow: 0 6px 20px var(--gold-glow);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  transition: all 0.4s var(--ease-out-back);
}

.brand:hover .brand-fallback {
  transform: rotate(-12deg) scale(1.08);
  box-shadow: 0 8px 24px var(--gold-glow-strong);
}

.footer-brand .brand-fallback {
  width: 52px;
  height: 52px;
}

.brand-name {
  background: linear-gradient(135deg, var(--text) 0%, var(--muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.dark .brand-name {
  background: linear-gradient(135deg, var(--text) 0%, var(--gold-muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* House-of-Heat pattern: hamburger is the single nav trigger at every breakpoint */
.nav-links {
  display: none !important;
}

.nav-links--legacy {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  padding: 5px;
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
  transition: all 0.3s var(--ease-out-expo);
  max-width: 56vw;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-links::-webkit-scrollbar {
  display: none;
}

.nav-links:hover {
  border-color: var(--line-strong);
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px 9px 13px;
  border-radius: var(--radius-full);
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 600;
  transition: color 0.3s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  z-index: 1;
}

.nav-links a svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out-back);
}

.nav-links a:hover svg {
  opacity: 1;
  transform: scale(1.1);
}

.nav-links a.active svg {
  opacity: 1;
}

.nav-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: var(--surface-solid);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s var(--ease-out-back);
  z-index: -1;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-links a:hover::before {
  opacity: 1;
  transform: scale(1);
  box-shadow: var(--shadow-xs);
}

.nav-links a:active {
  transform: scale(0.96);
}

.nav-links a.active {
  color: #0a0908;
  font-weight: 700;
}

/* Sliding gold pill that tracks the active section — the unique nav signature */
.nav-pill-indicator {
  position: absolute;
  top: 5px;
  left: 0;
  height: calc(100% - 10px);
  width: 0;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  box-shadow: var(--shadow-gold);
  opacity: 0;
  transition: transform 0.45s var(--ease-out-expo), width 0.45s var(--ease-out-expo), opacity 0.3s ease;
  z-index: 0;
  pointer-events: none;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Hamburger — the universal nav trigger (desktop + mobile) in the new design */
.nav-burger {
  display: flex;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.3s var(--ease-out-expo);
}

.nav-burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: all 0.35s var(--ease-out-back);
}

.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 9, 8, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out-expo);
  display: flex;
  justify-content: flex-end;
}

.mobile-nav-sheet.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-links {
  width: min(320px, 82vw);
  height: 100%;
  background: var(--surface-solid);
  border-left: 1px solid var(--line);
  padding: 100px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-out-expo);
  overflow-y: auto;
}

.mobile-nav-sheet.open .mobile-nav-links {
  transform: translateX(0);
}

.mobile-nav-links a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text);
  transition: all 0.25s var(--ease-out-expo);
}

.mobile-nav-links a svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--gold);
}

.mobile-nav-links a:hover,
.mobile-nav-links a:active {
  background: var(--surface-2);
  color: var(--gold);
  padding-left: 22px;
}

body.nav-sheet-open {
  overflow: hidden;
}

.theme-toggle {
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  display: grid;
  place-items: center;
  transition: all 0.4s var(--ease-out-back);
  position: relative;
  overflow: hidden;
}

.theme-toggle:hover {
  transform: scale(1.1) rotate(15deg);
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-toggle span {
  position: absolute;
  transition: all 0.4s var(--ease-out-expo);
  font-size: 1.1rem;
}

.theme-toggle span:first-child {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-toggle span:last-child {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

body.dark .theme-toggle span:first-child {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

body.dark .theme-toggle span:last-child {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* ============================================
   BUTTONS — ENHANCED WITH MICRO-INTERACTIONS
   ============================================ */

.btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 28px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease-out-expo);
  isolation: isolate;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.15) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.btn:hover::before {
  opacity: 1;
}

.btn:active {
  transform: scale(0.97);
}

.btn-gold {
  background: linear-gradient(135deg, var(--text) 0%, var(--text-secondary) 100%);
  color: var(--bg);
  box-shadow: 0 4px 20px rgba(15, 14, 12, 0.15);
}

body.dark .btn-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  color: #0a0908;
  box-shadow: 0 4px 20px var(--gold-glow);
}

.btn-gold:hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  color: #0a0908;
  transform: translateY(-3px);
  box-shadow: var(--shadow-gold-lg);
}

body.dark .btn-gold:hover {
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-soft) 100%);
  box-shadow: 0 8px 30px var(--gold-glow-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}

.btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--text);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.btn-gold::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.6s var(--ease-out-expo);
  z-index: -1;
}

.btn-gold:hover::after {
  left: 100%;
}

/* ============================================
   HERO SECTION — DRAMATIC ENTRANCE
   ============================================ */

.hero {
  position: relative;
  min-height: calc(100vh - 80px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 64px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 60px 24px 100px;
  overflow: hidden;
}

/* Animated site-wide background (heatcheck-gradient.js — vanilla WebGL2
   port of Watermelon UI's "AnimatedGradient" shader). Fixed behind the
   ENTIRE page, not scoped to the hero — Heat Check now runs permanently
   dark (see body.dark hardcoded in heatcheck.html, no light/dark toggle)
   specifically so this gradient is always what visitors see as the page
   backdrop. Sits below the existing body::before grain texture (z-index
   -1) and body::after ambient glow (z-index -2) so those still layer on
   top for extra depth — see those rules near the top of this file.
   Individual cards/panels keep their own solid var(--surface-solid)
   background and read as opaque content floating over this. */
.hero-gradient-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: #0a0603;
}

.hero-gradient-bg canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Shown instead of the canvas if WebGL2 isn't supported, the shader
   fails to compile, or the visitor has prefers-reduced-motion set (see
   initHeroGradient() in heatcheck-gradient.js) — a slow, static-feeling
   CSS gradient so the page never just goes flat black. */
.hero-gradient-fallback {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 20%, #ff5a1f 0%, #2a0f05 45%, #0a0603 80%);
  background-size: 180% 180%;
  animation: heroGradientFallbackDrift 18s ease-in-out infinite;
}

@keyframes heroGradientFallbackDrift {
  0%, 100% { background-position: 20% 20%; }
  50% { background-position: 70% 60%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-gradient-fallback {
    animation: none;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
}

.kicker {
  margin: 0 0 20px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  display: flex;
  align-items: center;
  gap: 12px;
}

.kicker::before {
  content: "";
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: 2px;
}

.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(4.2rem, 11vw, 9rem);
  line-height: 0.85;
  letter-spacing: -0.045em;
  font-weight: 700;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--text) 0%, var(--muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: heroTitleReveal 1s var(--ease-out-expo) 0.2s both;
}

body.dark .hero h1 {
  background: linear-gradient(135deg, var(--text) 0%, var(--gold-muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes heroTitleReveal {
  from {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.hero-subtitle {
  max-width: 520px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.65;
  animation: heroFadeUp 0.8s var(--ease-out-expo) 0.5s both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
  animation: heroFadeUp 0.8s var(--ease-out-expo) 0.7s both;
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-visual {
  position: relative;
  width: 100%;
  height: 540px;
  z-index: 1;
  animation: heroFadeUp 1s var(--ease-out-expo) 0.4s both;
}

.visual-card {
  position: absolute;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  box-shadow: var(--shadow-lg);
  transition: all 0.5s var(--ease-out-expo);
  border-radius: var(--radius-xl);
}

.main-visual {
  inset: 0px 40px 60px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: linear-gradient(180deg, var(--surface-solid) 0%, var(--surface-2) 100%);
  animation: floatMain 6s ease-in-out infinite;
}

@keyframes floatMain {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.kit-mock {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 0.85;
  display: grid;
  place-items: center;
  border-radius: 30% 30% 40% 40%;
  background: linear-gradient(135deg, var(--surface-solid) 0%, var(--bg-soft) 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(10, 10, 10, 0.12),
    0 20px 50px rgba(0, 0, 0, 0.06);
  position: relative;
  transition: all 0.5s var(--ease-out-expo);
}

.kit-mock:hover {
  box-shadow:
    inset 0 0 0 1.5px rgba(10, 10, 10, 0.25),
    0 24px 60px rgba(10, 10, 10, 0.1);
}

.kit-logo {
  width: 60%;
  height: auto;
  object-fit: contain;
  transition: transform 0.6s var(--ease-out-back);
}

.kit-mock:hover .kit-logo {
  transform: scale(1.08);
}

.kit-fallback {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(4rem, 7vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  opacity: 0.85;
}

.small-card {
  width: 170px;
  padding: 20px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(10px);
  background: var(--surface-glass);
}

.small-card span {
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.small-card strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}

.small-card.one {
  right: 0;
  top: 30px;
  transform: rotate(5deg);
  animation: floatSmall1 5s ease-in-out infinite;
}

.small-card.two {
  left: 0;
  bottom: 10px;
  transform: rotate(-5deg);
  animation: floatSmall2 5.5s ease-in-out infinite 0.5s;
}

@keyframes floatSmall1 {
  0%, 100% { transform: rotate(5deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(-8px); }
}

@keyframes floatSmall2 {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50% { transform: rotate(-5deg) translateY(-8px); }
}

.hero-visual:hover .small-card.one { 
  transform: rotate(0deg) translateY(-5px) scale(1.05);
  box-shadow: var(--shadow-xl);
}
.hero-visual:hover .small-card.two { 
  transform: rotate(0deg) translateY(5px) scale(1.05);
  box-shadow: var(--shadow-xl);
}

.mobile-section-switcher {
  display: none;
}

/* ============================================
   SECTIONS — CONSISTENT SPACING
   ============================================ */

.section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 100px 24px;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 52px;
}

.section-heading h2,
.story-card h2,
.catalogue-head h2,
.category-title h2,
.admin-section h2,
.login-card h1,
.modal-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.5vw, 5.4rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-transform: uppercase;
}

.section-heading p:not(.kicker),
.catalogue-head p:not(.kicker),
.category-copy,
.panel-copy {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 580px;
}

/* ============================================
   SITE INDEX — hover-to-reveal-color jump list
   ============================================ */
.site-index-list {
  display: flex;
  flex-direction: column;
  border-top: 1.5px solid var(--line-strong);
  /* Opaque backdrop so each row's colored hover/in-view sweep (see
     .site-index-row::before) reads as a clean accent color instead of
     blending with the animated gradient behind it. */
  background: var(--surface-solid);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.site-index-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 6px;
  border-bottom: 1.5px solid var(--line-strong);
  overflow: hidden;
  isolation: isolate;
  transition: padding 0.35s var(--ease-out-expo);
}

.site-index-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, transparent, var(--row-accent, var(--accent-1)), transparent);
  opacity: 0;
  transform: translateX(-100%);
  transition: transform 0.5s var(--ease-out-expo), opacity 0.4s ease;
}

.site-index-row:hover::before,
.site-index-row:focus-visible::before,
.site-index-row.in-view::before {
  opacity: 0.55;
  transform: translateX(0);
}

.site-index-row:hover,
.site-index-row:focus-visible,
.site-index-row.in-view {
  padding-left: 20px;
}

.site-index-row:nth-child(8n+1) { --row-accent: var(--accent-1); }
.site-index-row:nth-child(8n+2) { --row-accent: var(--accent-2); }
.site-index-row:nth-child(8n+3) { --row-accent: var(--accent-3); }
.site-index-row:nth-child(8n+4) { --row-accent: var(--accent-4); }
.site-index-row:nth-child(8n+5) { --row-accent: var(--accent-5); }
.site-index-row:nth-child(8n+6) { --row-accent: var(--accent-6); }
.site-index-row:nth-child(8n+7) { --row-accent: var(--accent-7); }
.site-index-row:nth-child(8n+8) { --row-accent: var(--accent-8); }

.site-index-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--line-strong);
  transition: all 0.3s var(--ease-out-back);
}

.site-index-row:hover .site-index-dot,
.site-index-row:focus-visible .site-index-dot,
.site-index-row.in-view .site-index-dot {
  background: var(--text);
  transform: scale(1.3);
}

.site-index-tag {
  flex: 0 0 auto;
  width: 110px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.site-index-label {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.site-index-arrow {
  flex: 0 0 auto;
  font-size: 1.3rem;
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.35s var(--ease-out-expo);
}

.site-index-row:hover .site-index-arrow,
.site-index-row:focus-visible .site-index-arrow,
.site-index-row.in-view .site-index-arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 640px) {
  .site-index-row {
    gap: 12px;
    padding: 14px 4px;
  }

  /* No real hover on touch devices — colour is driven primarily by scroll
     position (.in-view, toggled in app.js as each row passes through the
     viewport), with a press state as a secondary trigger. Not permanently
     lit either way. */
  .site-index-row::before {
    opacity: 0;
    transform: translateX(0);
    transition: opacity 0.3s ease;
  }

  .site-index-row:active::before,
  .site-index-row.in-view::before {
    opacity: 0.55;
  }

  .site-index-row:active,
  .site-index-row.in-view {
    padding-left: 10px;
  }

  .site-index-row:active .site-index-dot,
  .site-index-row.in-view .site-index-dot {
    background: var(--text);
    transform: scale(1.3);
  }

  .site-index-tag {
    width: 64px;
    font-size: 0.6rem;
  }

  .site-index-label {
    font-size: 1rem;
  }

  .site-index-arrow {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   BRAND SCALE — wordmark grows to fill the screen as you scroll past it
   ============================================ */
.brand-scale-section {
  position: relative;
  height: 220vh;
}

.brand-scale-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
}

.brand-scale-text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  white-space: nowrap;
  font-size: 11vw;
  color: var(--text);
  transform: scale(var(--brand-scale, 0.4));
  will-change: transform;
}

.brand-scale-text span {
  font-size: 0.5em;
  vertical-align: super;
}

@media (prefers-reduced-motion: reduce) {
  .brand-scale-section {
    height: auto;
  }

  .brand-scale-sticky {
    position: relative;
    height: auto;
    padding: 80px 24px;
  }

  .brand-scale-text {
    transform: none;
    font-size: clamp(2.4rem, 8vw, 5rem);
  }
}

@media (max-width: 640px) {
  /* Much shorter on mobile — the full 180vh scroll range left a long
     dead-feeling empty gap between the hero and the banner carousel. */
  .brand-scale-section {
    height: 130vh;
  }

  .brand-scale-text {
    font-size: 16vw;
  }
}

/* ============================================
   HERO BANNER CAROUSEL — ENHANCED
   ============================================ */

.hero-banner-section {
  padding-top: 0;
}

/* When the banner carousel is the very first section on the page
   (above the THREAD ARENA hero), give it breathing room under the
   sticky header instead of sitting flush against it. */
.hero-banner-section-first {
  padding-top: 40px;
}

@media (max-width: 1024px) {
  .hero-banner-section-first {
    padding-top: 32px;
  }
}

@media (max-width: 640px) {
  .hero-banner-section-first {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.hero-banner-carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 2px solid var(--text);
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.4s var(--ease-out-expo);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.hero-banner-carousel.is-dragging {
  cursor: grabbing;
}

.hero-banner-carousel.is-dragging .hero-banner-track {
  transition: none;
}

.hero-banner-slide img {
  -webkit-user-drag: none;
  user-drag: none;
}

.hero-banner-carousel:hover {
  box-shadow: var(--shadow-lg);
}

/* Uploaded banner photos can arrive in any colour palette — nudge every
   one toward the site's black & white system with a light desaturation
   instead of leaving them fully saturated against the mono UI around
   them. Subtle, not a full grayscale kill, so a bright promo shot still
   reads as a promo shot. */
.hero-banner-slide img {
  filter: saturate(0.82) contrast(1.06);
}

.hero-banner-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.12) 0%, transparent 30%, transparent 70%, rgba(10, 10, 10, 0.28) 100%);
  pointer-events: none;
}

.hero-banner-index {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.hero-banner-track {
  display: flex;
  width: 100%;
  transition: transform 0.7s var(--ease-out-expo);
}

.hero-banner-track:empty {
  aspect-ratio: 16 / 7;
  background: linear-gradient(90deg, var(--surface-2) 25%, rgba(10, 10, 10, 0.1) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
}

@keyframes skeletonShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.hero-banner-slide {
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 16 / 7;
  background: var(--surface-2);
  overflow: hidden;
}

.hero-banner-slide.is-clickable {
  cursor: pointer;
}

.hero-banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out-expo);
}

.hero-banner-slide:hover img {
  transform: scale(1.03);
}

.hero-banner-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 32px 36px;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.78), transparent);
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  transform: translateY(0);
  transition: transform 0.4s var(--ease-out-expo);
}

.hero-banner-slide:hover .hero-banner-caption {
  transform: translateY(-4px);
}

.hero-banner-dots {
  /* Dot pagination removed per request — drag/swipe and autoplay remain
     the only navigation for the carousel. Kept in the DOM (app.js still
     renders into it harmlessly) so nothing else has to change. */
  display: none;
}

.hero-banner-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  transition: all 0.3s var(--ease-out-back);
  position: relative;
}

.hero-banner-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.hero-banner-dot:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: scale(1.2);
}

.hero-banner-dot.active {
  background: var(--gold);
  transform: scale(1.3);
  box-shadow: 0 0 12px var(--gold-glow-strong);
}

.hero-banner-dot.active::after {
  border-color: var(--gold);
}

/* ============================================
   BRAND STORY — GLASS CARDS
   ============================================ */

.story-section {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: stretch;
}

.story-card,
.story-stat,
.stat-card,
.category-block,
.editor-card,
.panel,
.dashboard-card,
.login-card {
  border: 1px solid var(--line);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-xl);
  transition: all 0.4s var(--ease-out-expo);
}

.story-card {
  padding: clamp(32px, 5vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.story-card::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -30%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--gold-glow), transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}

.story-card blockquote {
  margin: 28px 0 0;
  padding: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.65;
  font-style: italic;
  border: 0;
  position: relative;
}

.story-card blockquote::before {
  content: """;
  position: absolute;
  top: -20px;
  left: -10px;
  font-size: 4rem;
  color: var(--gold);
  opacity: 0.2;
  font-family: var(--font-display);
  line-height: 1;
}

.story-stat-grid {
  display: grid;
  gap: 18px;
}

.story-stat {
  padding: 28px;
  border-radius: var(--radius-lg);
  transition: all 0.4s var(--ease-out-expo);
  cursor: default;
}

.story-stat:hover {
  transform: translateX(8px) translateY(-2px);
  border-color: rgba(10, 10, 10, 0.25);
  box-shadow: var(--shadow-md);
}

.story-stat span {
  color: var(--gold);
  font-weight: 800;
  font-size: 0.88rem;
}

.story-stat strong {
  display: block;
  margin-top: 8px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.story-stat p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ============================================
   STATS — NUMBER COUNTERS
   ============================================ */

.stats-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.stat-card {
  padding: 40px 28px;
  border-radius: var(--radius-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.stat-card strong {
  display: block;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  transition: color 0.3s ease;
}

.stat-card:hover strong {
  color: var(--gold);
}

.stat-card span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ============================================
   CATALOGUE & FILTERS
   ============================================ */

.catalogue-head {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 52px;
}

.filters {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 14px;
  width: 100%;
  background: var(--surface-2);
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.filters:hover {
  border-color: var(--line-strong);
}

.filters label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

input, select, textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  background: var(--surface-solid);
  color: var(--text);
  outline: none;
  font-size: 0.94rem;
  transition: all 0.3s var(--ease-out-expo);
}

textarea {
  min-height: 130px;
  resize: vertical;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-glow), var(--shadow-xs);
  background: var(--surface-solid);
}

input:hover, select:hover, textarea:hover {
  border-color: var(--line-strong);
}

select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237a7266'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}

/* ============================================
   CATEGORY BLOCKS
   ============================================ */

.category-block {
  margin-top: 60px;
  padding: clamp(24px, 3.5vw, 44px);
  transition: all 0.4s var(--ease-out-expo);
}

.category-block:hover {
  box-shadow: var(--shadow-md);
}

.category-title {
  display: flex;
  align-items: center;
  gap: 18px;
}

.category-number {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--gold);
  font-weight: 850;
  font-family: var(--font-display);
  font-size: 1.1rem;
  border: 1.5px solid var(--line);
  transition: all 0.4s var(--ease-out-back);
  flex-shrink: 0;
}

.category-block:hover .category-number {
  background: var(--gold);
  color: var(--surface-solid);
  border-color: var(--gold);
  transform: scale(1.1) rotate(-5deg);
  box-shadow: var(--shadow-gold);
}

/* ============================================
   PRODUCT GRID & CARDS — ENHANCED
   ============================================ */

/* ============================================
   REVIEWS — "Wall of Love" swipeable image gallery
   ============================================ */
.reviews-carousel {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.reviews-track-viewport {
  flex: 1;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* No touch-action override here on purpose — pan-x would block the
     page's vertical scroll for any touch that starts on this strip. */
}

.reviews-track-viewport::-webkit-scrollbar {
  display: none;
}

.reviews-track {
  display: flex;
  gap: 20px;
  padding: 4px 4px 10px;
}

.review-card {
  position: relative;
  flex: 0 0 clamp(220px, 26vw, 300px);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 5;
  transition: all 0.4s var(--ease-out-expo);
}

.review-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(10, 10, 10, 0.25);
}

.review-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg-soft);
  cursor: zoom-in;
}

.review-card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 18px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, transparent 100%);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
}

.reviews-arrow {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--surface-solid);
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all 0.3s var(--ease-out-back);
}

.reviews-arrow:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: scale(1.08);
  box-shadow: var(--shadow-gold);
}

.reviews-arrow:active {
  transform: scale(0.94);
}

.reviews-swipe-meta {
  display: flex;
  margin-top: 18px;
}

@media (max-width: 768px) {
  .reviews-arrow {
    display: none;
  }
}

@media (max-width: 640px) {
  .review-card {
    flex: 0 0 74vw;
  }
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 36px;
}

.product-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: all 0.5s var(--ease-out-expo);
  position: relative;
}

.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, transparent 60%, rgba(10, 10, 10, 0.03) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.product-card:hover::before {
  opacity: 1;
}

.product-card:hover {
  transform: translateY(-10px);
  border-color: var(--text);
  box-shadow: var(--shadow-lg);
}

/* Color-block behind each product photo (House-of-Heat style). The exact
   color comes from an inline --card-accent custom property set in app.js —
   either an admin-picked hex (product.accentColor) or a stable hash-based
   default from the --accent-1..8 palette. See getProductAccent() in app.js. */
.product-card .product-media {
  background: var(--card-accent, var(--bg-soft));
}

.skeleton-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-solid);
}

.skeleton-card::before {
  content: "";
  display: block;
  aspect-ratio: 0.82;
  background: linear-gradient(90deg, var(--surface-2) 25%, rgba(10, 10, 10, 0.1) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
}

.skeleton-card::after {
  content: "";
  display: block;
  height: 140px;
  margin: 20px;
  width: calc(100% - 40px);
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--surface-2) 25%, rgba(10, 10, 10, 0.1) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
}

.product-media {
  position: relative;
  aspect-ratio: 0.82;
  overflow: hidden;
  background: var(--bg-soft);
  padding: 22px;
}

.product-img {
  position: absolute;
  inset: 22px;
  width: calc(100% - 44px);
  height: calc(100% - 44px);
  object-fit: contain;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.5s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.18));
}

.product-img.active {
  opacity: 1;
  transform: scale(1);
}

.product-card:hover .product-img.active {
  transform: scale(1.05);
}

.product-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge, .mini-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--surface-solid);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  transition: all 0.3s var(--ease-out-expo);
}

.badge:hover, .mini-badge:hover {
  transform: translateY(-1px);
}

.badge.sold-out, .mini-badge.sold-out {
  border-color: rgba(180, 35, 24, 0.2);
  background: #fdf2f2;
  color: #b42318;
}

body.dark .badge.sold-out {
  background: #2a1414;
  color: #fca5a5;
}

/* Heat Check card badge — compact flame + rating, top-right of the
   product image. The quick-glance counterpart to the full gauge+streak
   widget shown in the order modal (see .heat-check-panel below). */
.heat-check-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-full);
  background: var(--surface-solid);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(8px);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: transform 0.3s var(--ease-out-expo), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.heat-check-badge-flame {
  font-size: 0.9rem;
  line-height: 1;
  display: inline-block;
  transform-origin: 50% 85%;
  animation: heatCheckFlameFlicker 1.6s ease-in-out infinite;
  transition: filter 0.3s ease;
}

.heat-check-badge-value {
  color: var(--text);
}

.heat-check-badge[data-heat-level="on-fire"],
.heat-check-badge[data-heat-level="nuclear"] {
  border-color: rgba(255, 107, 53, 0.4);
  animation: heatCheckBadgeGlow 1.8s ease-in-out infinite;
}

/* Subtle idle flicker on the flame emoji — slight scale/rotate wobble,
   never fully still, so the badge reads as "live" at a glance across the
   whole product grid. */
@keyframes heatCheckFlameFlicker {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.08) rotate(-4deg); }
  50% { transform: scale(0.96) rotate(3deg); }
  75% { transform: scale(1.05) rotate(-2deg); }
}

/* Extra pulsing glow ring for the hottest tiers only (On Fire / Nuclear)
   so the highest-rated drops visually stand out in the grid. */
@keyframes heatCheckBadgeGlow {
  0%, 100% { box-shadow: var(--shadow-xs), 0 0 0 0 rgba(255, 90, 31, 0.35); }
  50% { box-shadow: var(--shadow-xs), 0 0 0 5px rgba(255, 90, 31, 0); }
}

/* Hover "re-heat" flourish — House of Heat's fire-meter card does the
   same thing: hovering the card snaps its rating back to 0 and counts it
   back up. bindHeatCheckBadges()/playHeatCheckCountUp() in heatcheck.js
   drive the actual counting; this class just carries the visual flare
   for the ~650ms the count-up runs (see the setTimeout there). */
.heat-check-badge.is-hot {
  transform: scale(1.12);
  border-color: rgba(255, 90, 31, 0.55);
  background: linear-gradient(135deg, rgba(255, 183, 3, 0.18), rgba(255, 90, 31, 0.18)), var(--surface-solid);
  box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.16), 0 6px 18px rgba(255, 90, 31, 0.25);
}

.heat-check-badge.is-hot .heat-check-badge-flame {
  animation: heatCheckFlameBurn 0.65s ease-out;
  filter: drop-shadow(0 0 6px rgba(255, 138, 61, 0.9));
}

@keyframes heatCheckFlameBurn {
  0% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1.3) rotate(-8deg); }
  45% { transform: scale(0.85) rotate(6deg); }
  70% { transform: scale(1.2) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.product-card:hover .heat-check-badge {
  transform: translateY(-1px);
}

.product-card:hover .heat-check-badge.is-hot {
  transform: translateY(-1px) scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .heat-check-badge-flame,
  .heat-check-badge[data-heat-level="on-fire"],
  .heat-check-badge[data-heat-level="nuclear"],
  .heat-check-badge.is-hot,
  .heat-check-badge.is-hot .heat-check-badge-flame {
    animation: none;
  }
}

.product-thumbs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: linear-gradient(0deg, rgba(0,0,0,0.35) 0%, transparent 100%);
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.4s var(--ease-out-expo);
}

.product-card:hover .product-thumbs {
  opacity: 1;
  transform: translateY(0);
}

.image-dot {
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  object-fit: cover;
  cursor: pointer;
  transition: all 0.25s var(--ease-out-back);
}

.image-dot:hover, .image-dot.active {
  border-color: #ffffff;
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.product-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  z-index: 2;
}

.product-topline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.product-topline strong {
  color: var(--text);
  font-size: 1.05rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  transition: color 0.3s ease;
}

.price-compact {
  display: none;
}

.product-card:hover .product-topline strong {
  color: var(--gold);
}

.product-body h3 {
  margin: 10px 0 6px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.product-card:hover .product-body h3 {
  color: var(--text-secondary);
}

.product-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.size-group {
  margin-top: 14px;
}

.size-group > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.size-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.size-pill {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid var(--line);
  transition: all 0.25s var(--ease-out-expo);
}

.size-pill:hover {
  background: var(--gold);
  color: var(--surface-solid);
  border-color: var(--gold);
  transform: translateY(-1px);
}

.product-meta-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  margin-top: auto;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
  transition: border-color 0.3s ease;
}

.product-card:hover .product-meta-line {
  border-color: rgba(10, 10, 10, 0.15);
}

.product-meta-line strong.success { color: #10b981; }
.product-meta-line strong.danger { color: #ef4444; }

.archive-note {
  display: inline-flex;
  justify-content: center;
  margin-top: 14px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  transition: all 0.3s ease;
}

.product-card:hover .archive-note {
  background: var(--bg-soft);
}

.product-cta {
  width: 100%;
  margin-top: 14px;
}

/* Swipe meta (dots + counter) is a mobile-only affordance for the
   product decks — hidden by default, shown by the max-width:640px
   block. The reviews gallery is swipeable at every breakpoint, so
   .reviews-swipe-meta is excluded and stays visible by default. */
.swipe-meta:not(.reviews-swipe-meta) {
  display: none;
}

.swipe-meta {
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 4px;
}

.swipe-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.swipe-dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s var(--ease-out-back);
}

.swipe-dots .dot:hover {
  background: var(--gold-muted);
}

.swipe-dots .dot.active {
  width: 22px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
}

.swipe-counter {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.03em;
  min-width: 44px;
  text-align: center;
}

.empty-state {
  margin-top: 24px;
  padding: 48px;
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  color: var(--muted);
  text-align: center;
  font-weight: 600;
  transition: all 0.3s ease;
}

.empty-state:hover {
  border-color: var(--gold-muted);
  background: rgba(10, 10, 10, 0.02);
}

/* ============================================
   REQUEST SECTION
   ============================================ */

.request-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.request-card {
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--surface-solid);
  transition: all 0.5s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}

.request-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--gold-glow), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.request-card:hover::before {
  opacity: 1;
}

.request-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(10, 10, 10, 0.15);
}

.request-icon {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--gold);
  font-size: 1.4rem;
  margin-bottom: 22px;
  border: 1.5px solid var(--line);
  transition: all 0.4s var(--ease-out-back);
}

.request-card:hover .request-icon {
  transform: scale(1.1) rotate(-5deg);
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}

.request-card h3 {
  margin: 0 0 10px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.request-card p {
  margin: 0 0 24px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.95rem;
}

.request-card .btn {
  margin-top: auto;
}

/* ============================================
   SIZE CHART
   ============================================ */

.size-chart-card {
  padding: 16px;
  border-radius: var(--radius-xl);
  background: var(--surface-solid);
  border: 1px solid var(--line);
}

.size-chart-note {
  margin: 20px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  transition: box-shadow 0.3s ease;
}

.table-wrap:hover {
  box-shadow: var(--shadow-sm);
}

.size-chart-table {
  width: 100%;
  border-collapse: collapse;
}

.size-chart-table th, .size-chart-table td {
  padding: 16px 24px;
  text-align: left;
  transition: background-color 0.2s ease;
}

.size-chart-table th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1.5px solid var(--line);
}

.size-chart-table td {
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 0.95rem;
}

.size-chart-table tbody tr {
  transition: background-color 0.2s ease;
}

.size-chart-table tbody tr:hover {
  background: rgba(10, 10, 10, 0.04);
}

.size-chart-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ============================================
   TERMS
   ============================================ */

.terms-card {
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--radius-xl);
  /* Opaque card so the fine-print text doesn't sit directly on the
     animated gradient background — same solid-card treatment as every
     other content block on the site (.panel, product cards, etc.). */
  background: var(--surface-solid);
  border: 1px solid var(--line);
}

.terms-card pre {
  margin: 0;
  white-space: pre-wrap;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.8;
}

/* ============================================
   FOOTER — ENHANCED
   ============================================ */

.footer {
  max-width: var(--container);
  margin: 0 auto;
  padding: 80px 24px 60px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  border-top: 1px solid var(--line);
  position: relative;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.footer p {
  margin: 16px 0 0;
  color: var(--muted);
  line-height: 1.65;
  max-width: 380px;
  font-size: 0.95rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  align-content: flex-start;
}

.footer-links a {
  padding: 12px 24px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-solid);
  font-weight: 700;
  font-size: 0.88rem;
  transition: all 0.35s var(--ease-out-expo);
  display: inline-flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.footer-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(10, 10, 10, 0.08));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.footer-links a:hover {
  border-color: var(--text);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.footer-links a:hover::before {
  opacity: 1;
}

.footer-links .social-link.instagram {
  background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af);
  color: #ffffff;
  border: 0;
  transition: all 0.35s var(--ease-out-expo);
}

.footer-links .social-link.instagram:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 24px rgba(221, 42, 123, 0.3);
}

.footer-links .social-link.tiktok {
  background: #000000;
  color: #ffffff;
  border: 0;
  transition: all 0.35s var(--ease-out-expo);
}

body.dark .footer-links .social-link.tiktok {
  background: #ffffff;
  color: #000000;
}

.footer-links .social-link.tiktok:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

body.dark .footer-links .social-link.tiktok:hover {
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
}

.copyright {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--muted);
  text-align: center;
}

/* ============================================
   TOASTS — ENHANCED
   ============================================ */

.toast-container {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 300;
  display: grid;
  gap: 10px;
}

.toast {
  min-width: 300px;
  max-width: min(420px, calc(100vw - 48px));
  padding: 16px 22px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-md);
  background: var(--surface-solid);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(16px) translateX(20px);
  transition: all 0.5s var(--ease-out-expo);
  font-weight: 600;
  font-size: 0.9rem;
  backdrop-filter: blur(12px);
}

.toast.show {
  opacity: 1;
  transform: translateY(0) translateX(0);
}

.toast.error { border-left-color: #ef4444; }
.toast.warning { border-left-color: #f59e0b; }

/* ============================================
   MODALS — GLASSMORPHISM ENHANCED
   ============================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: fadeIn 0.4s var(--ease-out-expo) both;
}

.modal-card {
  position: relative;
  width: min(660px, 100%);
  max-height: min(90vh, 850px);
  overflow-y: auto;
  padding: clamp(28px, 4vw, 44px);
  border: 2px solid var(--text);
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
  color: var(--text);
  box-shadow: var(--shadow-xl);
  animation: modalIn 0.5s var(--ease-out-expo) both;
}

.modal-card::-webkit-scrollbar {
  width: 6px;
}

.modal-card::-webkit-scrollbar-track {
  background: transparent;
}

.modal-card::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--radius-full);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.3rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.3s var(--ease-out-back);
}

.modal-close:hover {
  background: var(--text);
  color: var(--bg);
  transform: rotate(90deg) scale(1.1);
  border-color: var(--text);
}

.modal-close:active {
  transform: rotate(90deg) scale(0.95);
}

/* Review image lightbox — click a review card to see the full image */
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 24px;
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s var(--ease-out-expo) both;
}

.lightbox-backdrop img {
  max-width: min(92vw, 640px);
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
}

.lightbox-backdrop p {
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  max-width: 640px;
}

.lightbox-backdrop p:empty {
  display: none;
}

.lightbox-close {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.lightbox-close:hover {
  background: #fff;
  color: var(--black);
}

.modal-subtitle {
  margin: 12px 0 24px;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.order-kit-preview {
  margin: 20px 0;
}

.order-kit-image-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1.4;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}

.order-kit-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.order-kit-tabs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.kit-tab {
  flex: 1;
  min-height: 42px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-solid);
  color: var(--text);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
}

.kit-tab:hover {
  border-color: var(--gold-muted);
  transform: translateY(-1px);
}

.kit-tab.active {
  border-color: var(--gold);
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  color: #0a0908;
  box-shadow: var(--shadow-gold);
}

/* Heat Check gauge + streak dots (order modal) — admin-set rating
   (product.heatRating), animated in on modal open via renderHeatCheckGauge
   in heatcheck.js. Needle rotation and gauge-fill dash-offset are both
   driven by inline styles set from JS; this block only carries the static
   shape, resting state, and transition timing. */
.heat-check-panel {
  position: relative;
  margin: 20px 0 24px;
  padding: 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  transition: border-color 0.5s ease;
}

/* Ambient heat glow behind the gauge — a soft pulsing radial blob whose
   color follows the current tier (cold blue → nuclear red-orange). Only
   pulses once .is-live is set (i.e. after the sweep-in has a real rating
   to represent), so it stays inert during the reset-to-Cold flash. */
.heat-check-panel::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 35%, var(--heat-glow-color, transparent) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 0;
}

.heat-check-panel.is-live::before {
  opacity: 0.5;
  animation: heatCheckAmbientPulse 2.6s ease-in-out infinite;
}

.heat-check-panel > * {
  position: relative;
  z-index: 1;
}

.heat-check-panel[data-heat-level="cold"] { --heat-glow-color: rgba(76, 201, 240, 0.35); }
.heat-check-panel[data-heat-level="lukewarm"] { --heat-glow-color: rgba(255, 214, 102, 0.3); }
.heat-check-panel[data-heat-level="heating-up"] { --heat-glow-color: rgba(255, 183, 3, 0.32); }
.heat-check-panel[data-heat-level="on-fire"] { --heat-glow-color: rgba(255, 90, 31, 0.38); }
.heat-check-panel[data-heat-level="nuclear"] { --heat-glow-color: rgba(255, 45, 45, 0.45); }

@keyframes heatCheckAmbientPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.12); opacity: 0.65; }
}

.heat-check-gauge-wrap {
  position: relative;
  width: 100%;
  max-width: 220px;
}

.heat-check-gauge {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.heat-check-gauge-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 12;
  stroke-linecap: round;
}

/* The needle and arc share the same "spring" timing curve — it overshoots
   past the target then eases back, like a physical dial actually slamming
   into place instead of gliding to a stop. */
.heat-check-gauge-fill {
  fill: none;
  stroke: #ffb703;
  stroke-width: 12;
  stroke-linecap: round;
  filter: drop-shadow(0 0 0 transparent);
  transition: stroke-dashoffset 1.1s cubic-bezier(0.3, 1.6, 0.4, 1), stroke 0.4s ease, filter 0.6s ease;
}

.heat-check-gauge-needle {
  stroke: var(--text);
  stroke-width: 3;
  stroke-linecap: round;
  transform-origin: 100px 108px;
  transform: rotate(-90deg);
  transition: transform 1.1s cubic-bezier(0.3, 1.6, 0.4, 1);
}

.heat-check-gauge-needle.is-settling {
  animation: heatCheckNeedleFlash 0.45s ease-out;
}

@keyframes heatCheckNeedleFlash {
  0% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
  35% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.85)); }
  100% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
}

.heat-check-gauge-pivot {
  fill: var(--text);
  transition: filter 0.3s ease;
}

.heat-check-gauge-needle.is-settling + .heat-check-gauge-pivot,
.heat-check-gauge-needle.is-settling ~ .heat-check-gauge-pivot {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7));
}

.heat-check-gauge-readout {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  text-align: center;
}

.heat-check-gauge-readout strong {
  display: block;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: text-shadow 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.heat-check-gauge-readout.is-settled strong {
  transform: scale(1.12);
  text-shadow: 0 0 14px var(--heat-glow-color, rgba(255, 183, 3, 0.6));
}

.heat-check-gauge-readout span {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.heat-check-panel[data-heat-level="on-fire"] .heat-check-gauge-fill,
.heat-check-panel[data-heat-level="nuclear"] .heat-check-gauge-fill {
  stroke: #ff5a1f;
  filter: drop-shadow(0 0 6px rgba(255, 90, 31, 0.65));
}

.heat-check-panel[data-heat-level="cold"] .heat-check-gauge-fill {
  stroke: #4cc9f0;
}

.heat-check-streak {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.heat-check-dot {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--surface-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, border-color 0.3s ease;
}

.heat-check-dot::before {
  content: "🔥";
  font-size: 0.85rem;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.heat-check-dot.lit {
  border-color: transparent;
  background: linear-gradient(135deg, #ffb703, #ff5a1f);
  transform: scale(1.1);
}

.heat-check-dot.lit::before {
  opacity: 1;
  transform: scale(1);
}

/* One-shot ignition burst — a ring that flashes and expands outward the
   instant a dot lights up, like a match catching. */
.heat-check-dot.igniting::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #ffb703;
  opacity: 0.9;
  animation: heatCheckDotIgnite 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes heatCheckDotIgnite {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .heat-check-panel.is-live::before,
  .heat-check-gauge-needle.is-settling,
  .heat-check-dot.igniting::after {
    animation: none;
  }
}

/* Fit Vote — Hot/Not community vote (order modal). Locked per-device via
   localStorage (heatcheck_vote_<productId>) once a customer votes; see
   castFitVote()/renderFitVotePanel() in heatcheck.js. */
.fit-vote-panel {
  margin: 0 0 24px;
  padding: 16px 18px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-lg);
}

.fit-vote-question {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fit-vote-buttons {
  display: flex;
  gap: 10px;
}

.fit-vote-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-solid);
  color: var(--text);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
  position: relative;
  overflow: visible;
}

.fit-vote-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xs);
}

.fit-vote-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.fit-vote-btn.fit-vote-hot.is-selected {
  border-color: #ff5a1f;
  background: rgba(255, 90, 31, 0.1);
}

.fit-vote-btn.fit-vote-not.is-selected {
  border-color: #4cc9f0;
  background: rgba(76, 201, 240, 0.1);
}

.fit-vote-icon {
  font-size: 1.1rem;
}

/* Vote burst — 6 flame/snowflake particles flying outward from the
   clicked button, spawned by spawnVoteBurst() in heatcheck.js. Each
   particle gets its own --dx/--dy end-point set inline so a single
   @keyframes rule covers all of them at random angles/distances. */
.fit-vote-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.fit-vote-burst i {
  position: absolute;
  left: 50%;
  top: 20%;
  font-size: 16px;
  font-style: normal;
  opacity: 0;
  animation: fitVoteParticle 0.65s ease-out forwards;
}

@keyframes fitVoteParticle {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); }
}

.fit-vote-results-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 700;
}

.fit-vote-bar {
  height: 12px;
  border-radius: var(--radius-full);
  background: rgba(76, 201, 240, 0.25);
  overflow: hidden;
}

.fit-vote-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffb703, #ff5a1f);
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.fit-vote-thanks {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.order-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 24px 0;
}

.order-summary div {
  padding: 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  transition: all 0.3s var(--ease-out-expo);
}

.order-summary div:hover {
  border-color: var(--gold-muted);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xs);
}

.order-summary span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.order-summary strong {
  display: block;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
}

.order-summary-discount-row {
  grid-column: 1 / -1;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  border-style: dashed !important;
}

.order-summary-discount-row span {
  margin-bottom: 0;
}

.order-summary-discount-row strong {
  color: var(--text);
}

.discount-code-group {
  margin: 0 0 24px;
}

.discount-input-row {
  display: flex;
  gap: 10px;
}

.discount-input-row input {
  flex: 1;
  text-transform: uppercase;
}

.discount-input-row .btn {
  flex: 0 0 auto;
  min-height: auto;
  padding: 0 20px;
}

.discount-feedback {
  margin: 10px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
}

.discount-feedback.is-success {
  color: #16794f;
}

body.dark .discount-feedback.is-success {
  color: #4ade80;
}

.discount-feedback.is-error {
  color: #b42318;
}

body.dark .discount-feedback.is-error {
  color: #fca5a5;
}

.selector-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.selector-group label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.option-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.option-btn {
  min-height: 42px;
  padding: 0 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-solid);
  color: var(--text);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}

.option-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--text);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.option-btn:hover {
  border-color: var(--text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xs);
}

.option-btn.active {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
  box-shadow: var(--shadow-sm);
}

.option-btn.active::before {
  opacity: 1;
}

.full-width-button {
  width: 100%;
  margin-top: 24px;
}

/* ============================================
   REQUEST MODAL — LUXURY STYLING
   ============================================ */

.luxury-request-modal {
  width: min(840px, 100%);
  background:
    radial-gradient(circle at 100% 0%, rgba(241, 217, 147, 0.12), transparent 40%),
    var(--surface-solid);
}

.request-form-intro {
  margin-bottom: 28px;
  padding: 24px;
  border: 1.5px solid rgba(10, 10, 10, 0.15);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(241, 217, 147, 0.08), transparent);
  transition: all 0.3s ease;
}

.request-form-intro:hover {
  border-color: rgba(10, 10, 10, 0.25);
  box-shadow: var(--shadow-gold);
}

.request-form-intro strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.request-form-intro p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.request-form-body {
  display: grid;
  gap: 20px;
}

.luxury-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.luxury-field > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.luxury-field input, .luxury-field select, .luxury-field textarea {
  padding: 16px;
}

.luxury-field textarea {
  min-height: 120px;
}

.request-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.request-choice {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-solid);
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
  position: relative;
}

.request-choice:hover {
  border-color: var(--text);
  background: var(--surface-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xs);
}

.request-choice.active {
  border-color: var(--gold);
  background: rgba(10, 10, 10, 0.08);
  box-shadow: var(--shadow-gold);
}

.choice-radio {
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--line);
  border-radius: 50%;
  transition: all 0.25s var(--ease-out-back);
  position: relative;
  flex-shrink: 0;
}

.request-choice.active .choice-radio {
  border-color: var(--gold);
  transform: scale(1.1);
}

.request-choice.active .choice-radio::before {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--gold);
  border-radius: 50%;
  animation: radioPop 0.3s var(--ease-out-back);
}

@keyframes radioPop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.request-size-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.request-size-option {
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-solid);
  color: var(--text);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.25s var(--ease-out-expo);
}

.request-size-option:hover {
  border-color: var(--text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xs);
}

.request-size-option.active {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--surface-solid);
  box-shadow: var(--shadow-gold);
}

.request-total-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px;
  border: 1.5px solid rgba(10, 10, 10, 0.15);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  transition: all 0.3s ease;
}

.request-total-card:hover {
  border-color: rgba(10, 10, 10, 0.3);
  box-shadow: var(--shadow-gold);
}

.request-total-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.request-total-card strong {
  color: var(--text);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  transition: color 0.3s ease;
}

.request-total-card:hover strong {
  color: var(--gold);
}

.request-total-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.quantity-stepper {
  width: 160px;
  height: 48px;
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-solid);
  transition: box-shadow 0.3s ease;
}

.quantity-stepper:focus-within {
  box-shadow: 0 0 0 3px var(--gold-glow);
  border-color: var(--gold);
}

.quantity-stepper button, .quantity-stepper input {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0;
}

.quantity-stepper button {
  background: var(--surface-2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.quantity-stepper button:hover {
  background: var(--gold);
  color: var(--surface-solid);
}

.quantity-stepper button:active {
  transform: scale(0.95);
}

.quantity-stepper input {
  font-size: 1rem;
  appearance: textfield;
}

.quantity-stepper input::-webkit-outer-spin-button,
.quantity-stepper input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.request-whatsapp-button {
  min-height: 56px;
  margin-top: 12px;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { 
  from { opacity: 0; transform: translateY(20px) scale(0.98); } 
  to { opacity: 1; transform: translateY(0) scale(1); } 
}

/* ============================================
   TEAM SELECT SECTION — ENHANCED MARQUEE
   ============================================ */

.team-select-section {
  padding-top: 60px;
  padding-bottom: 60px;
}

.team-select-board {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  transition: all 0.4s var(--ease-out-expo);
}

.team-select-board:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.team-icon-marquee-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
}

.team-icon-marquee-track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: teamIconMarquee 30s linear infinite;
}

.team-select-board:hover .team-icon-marquee-track,
.team-icon-marquee-track.paused {
  animation-play-state: paused;
}

.team-icon-marquee-track:empty {
  min-height: 106px;
  width: 100%;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--surface-2) 25%, rgba(10, 10, 10, 0.12) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
}

@keyframes teamIconMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.team-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  width: 84px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s var(--ease-out-back);
}

.team-icon-item:hover {
  transform: translateY(-4px);
}

.team-icon-all {
  flex: 0 0 auto;
}

.team-icon-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-solid);
  transition: all 0.35s var(--ease-out-back);
  position: relative;
}

.team-icon-item:hover .team-icon-avatar,
.team-icon-item.active .team-icon-avatar {
  border-color: var(--gold);
  transform: scale(1.08);
  box-shadow: var(--shadow-gold);
}

.team-icon-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-out-expo);
}

.team-icon-item:hover .team-icon-avatar img {
  transform: scale(1.1);
}

.team-icon-avatar-all {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 800;
  color: var(--muted);
  font-size: 0.75rem;
  background: var(--surface-solid);
  transition: all 0.3s ease;
}

.team-icon-item.active .team-icon-avatar-all {
  color: var(--gold);
  background: rgba(10, 10, 10, 0.1);
}

.team-icon-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.team-icon-item:hover .team-icon-name,
.team-icon-item.active .team-icon-name {
  color: var(--gold);
}

.clear-team-filter-btn {
  margin-top: 10px;
  border: 1.5px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--radius-full);
  padding: 6px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
}

.clear-team-filter-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(10, 10, 10, 0.08);
  transform: translateY(-1px);
}

/* ============================================
   ADMIN PANEL STYLES
   ============================================ */

.admin-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: min(440px, 100%);
  padding: 40px;
}

.login-card h1 {
  margin: 0 0 8px;
  font-size: 2.2rem;
}

.login-card p {
  margin: 0 0 24px;
  color: var(--muted);
  line-height: 1.6;
}

.login-button {
  width: 100%;
  margin-top: 16px;
}

.form-message {
  margin: 12px 0 0 !important;
  color: var(--muted);
  font-size: 0.9rem;
}

.form-message.error { color: #ef4444; }

.admin-shell {
  min-height: 100vh;
  background: var(--bg-soft);
}

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px clamp(24px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

body.dark .admin-topbar {
  background: rgba(8, 8, 8, 0.8);
}

.admin-user {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.95rem;
}

.admin-container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 40px 24px;
}

.admin-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
  padding: 12px;
}

.admin-sidebar a {
  display: block;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  color: var(--muted);
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.25s var(--ease-out-expo);
  position: relative;
}

.admin-sidebar a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: var(--gold);
  border-radius: var(--radius-full);
  transition: transform 0.3s var(--ease-out-back);
}

.admin-sidebar a:hover {
  color: var(--text);
  background: var(--surface-solid);
}

.admin-sidebar a:hover::before {
  transform: translateY(-50%) scaleY(1);
}

.admin-main {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.admin-section {
  scroll-margin-top: 100px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.section-subtitle {
  margin: 32px 0 12px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.dashboard-card {
  padding: 24px;
  transition: all 0.4s var(--ease-out-expo);
}

.dashboard-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.dashboard-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--text);
  transition: color 0.3s ease;
}

.dashboard-card:hover strong {
  color: var(--gold);
}

.dashboard-card span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.85rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 24px;
}

.panel, .editor-card {
  padding: 32px;
  transition: all 0.4s var(--ease-out-expo);
}

.panel:hover, .editor-card:hover {
  box-shadow: var(--shadow-md);
}

.editor-card h3, .panel h3 {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.color-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.color-picker-row input[type="color"] {
  width: 52px;
  height: 42px;
  padding: 2px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
  cursor: pointer;
}

.color-picker-row .btn {
  min-height: 42px;
  padding: 0 16px;
  font-size: 0.8rem;
}

/* Admin product form — Heat Rating slider (admin-heatcheck.html), reused
   by the "productHeatRatingValue" live readout in admin-heatcheck.js. */
.heat-rating-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.heat-rating-input-row input[type="range"] {
  flex: 1;
  accent-color: #ff5a1f;
  padding: 0;
  border: none;
  background: none;
}

.heat-rating-value {
  flex: 0 0 auto;
  min-width: 130px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

.check-title {
  margin: 20px 0 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.check-grid label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-solid);
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.check-grid label:hover {
  background: var(--bg-soft);
  transform: translateX(2px);
}

.check-grid input {
  width: auto;
  accent-color: var(--gold);
}

.single-check {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.single-check input {
  width: auto;
  accent-color: var(--gold);
}

.hint {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.table-wrap {
  background: var(--surface-solid);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* The size-chart card reuses the .table-wrap class, but its later
   `overflow: hidden` above was clipping the table on mobile instead of
   letting it scroll — nothing past the first column was reachable.
   Scope a horizontal-scroll override back on for just the size chart. */
.size-chart-card .table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
}

th, td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 1.5px solid var(--line);
  transition: all 0.3s ease;
}

.table-thumb:hover {
  transform: scale(1.1);
  border-color: var(--gold);
}

.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.kit-variant-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 16px;
}

.kit-variant-slot {
  padding: 16px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.kit-variant-slot .image-preview-grid {
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}

@media (max-width: 900px) {
  .kit-variant-grid {
    grid-template-columns: 1fr;
  }
}

.image-preview-item {
  position: relative;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 1 / 1;
  transition: all 0.3s var(--ease-out-expo);
}

.image-preview-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
  border-color: var(--gold-muted);
}

.image-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease-out-expo);
}

.image-preview-item:hover img {
  transform: scale(1.05);
}

.image-preview-item .preview-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.image-preview-item .preview-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s var(--ease-out-back);
}

.image-preview-item .preview-remove:hover {
  background: var(--gold);
  color: #1a1a1a;
  transform: scale(1.15);
}

.upload-progress {
  margin-top: 14px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  overflow: hidden;
  position: relative;
}

.upload-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transition: width 0.3s ease;
  border-radius: var(--radius-full);
}

.upload-progress span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.8rem;
}

.logo-upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 14px;
  margin-bottom: 22px;
}

.logo-upload-slot {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.logo-upload-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.logo-preview {
  height: 110px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 12px;
  transition: all 0.3s ease;
}

.logo-preview:hover {
  border-color: var(--gold-muted);
  box-shadow: var(--shadow-xs);
}

.logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-preview-light {
  background: #f4f2ec;
}

.logo-preview-dark {
  background: #16161a;
}

.logo-preview-empty {
  color: var(--muted);
  font-size: 0.8rem;
}

.logo-preview-dark .logo-preview-empty {
  color: #8a8a90;
}

.team-icon-preview {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  margin-top: 14px;
  margin-bottom: 14px;
}

.icon-btn {
  padding: 8px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.25s var(--ease-out-expo);
}

.icon-btn:hover {
  border-color: var(--text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xs);
}

.icon-btn.danger {
  background: #fdf2f2;
  color: #b42318;
  border: 0;
}

body.dark .icon-btn.danger {
  background: #2a1414;
  color: #fca5a5;
}

.icon-btn.danger:hover {
  background: #b42318;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(180, 35, 24, 0.2);
}

.mini-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.category-row, .recent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  transition: all 0.2s ease;
}

.category-row:hover, .recent-item:hover {
  background: rgba(10, 10, 10, 0.02);
  padding-left: 8px;
  padding-right: 8px;
  margin: 0 -8px;
  border-radius: var(--radius-sm);
}

.recent-item {
  justify-content: flex-start;
}

.recent-item img {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 1.5px solid var(--line);
  transition: all 0.3s ease;
}

.recent-item:hover img {
  border-color: var(--gold);
  transform: scale(1.05);
}

.recent-item div {
  min-width: 0;
}

.recent-item strong {
  display: block;
  font-size: 0.95rem;
}

.recent-item span {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
}

.empty-table {
  color: var(--muted);
  text-align: center;
  padding: 40px !important;
  font-weight: 600;
}

/* ============================================
   RESPONSIVE — PREMIUM ADAPTIVE
   ============================================ */

@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 40px;
    text-align: center;
  }

  .kicker {
    justify-content: center;
  }

  .hero-subtitle {
    margin: 20px auto 0;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-visual {
    height: 48px;
    min-height: 480px;
  }

  .main-visual {
    inset: 0 20px;
  }

  .story-section, .footer {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer {
    text-align: center;
  }

  .footer-links {
    justify-content: center;
  }

  .footer p {
    margin: 16px auto 0;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .filters {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .admin-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .hero-banner-caption {
    padding: 18px 20px;
    font-size: 1rem;
  }

  .hero-banner-index {
    top: 12px;
    right: 12px;
    padding: 4px 9px;
    font-size: 0.62rem;
  }

  .team-select-board {
    gap: 14px;
    padding: 16px 14px;
  }

  .team-icon-avatar {
    width: 54px;
    height: 54px;
  }

  .team-icon-item {
    width: 68px;
  }

  .team-icon-name {
    max-width: 68px;
    font-size: 0.72rem;
  }

  .request-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
  }

  main {
    padding-top: 164px;
  }

  .team-icon-marquee-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .team-icon-marquee-viewport::-webkit-scrollbar {
    display: none;
  }

  .team-icon-marquee-track {
    animation: none;
  }

  .nav-links {
    display: none;
  }

  .nav-burger {
    display: flex;
  }

  /* Ticker stays visible on mobile, slotted between the fixed topbar and
     the mobile-section-switcher icon row rather than hidden. */
  .info-ticker {
    display: flex;
    align-items: center;
    position: fixed;
    top: 74px;
    left: 0;
    right: 0;
    z-index: 95;
    height: 30px;
    padding: 0;
  }

  .info-ticker-track span {
    font-size: 0.6rem;
    padding: 0 3px;
  }

  .topbar-actions {
    gap: 8px;
  }

  .theme-toggle,
  .nav-burger {
    width: 42px;
    height: 42px;
  }

  .mobile-section-switcher {
    position: fixed;
    top: 104px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 90;
    display: flex;
    gap: 8px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
  }

  .mobile-section-switcher::-webkit-scrollbar {
    display: none;
  }

  body.dark .mobile-section-switcher {
    background: rgba(8, 8, 8, 0.85);
  }

  .mobile-section-switcher button {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--line);
    border-radius: 50%;
    background: var(--surface-solid);
    color: var(--text);
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
  }

  .mobile-section-switcher button svg {
    width: 18px;
    height: 18px;
  }

  .mobile-section-switcher button:hover {
    transform: translateY(-1px);
  }

  .mobile-section-switcher button.active {
    border-color: var(--gold);
    color: #0a0908;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
    box-shadow: var(--shadow-gold);
  }

  .hero h1 {
    font-size: clamp(3rem, 12vw, 4.8rem);
  }

  .filters, .form-grid, .check-grid, .order-summary, .request-choice-grid, .dashboard-cards {
    grid-template-columns: 1fr;
  }

  /* --- Compact "zoomed out" 2-column grid on mobile. Pure vertical
     page scroll only — no horizontal swipe, so it never fights the
     page scroll gesture like the old swipe-deck did. --- */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
  }

  .product-card {
    border-radius: var(--radius-md);
  }

  .product-media {
    aspect-ratio: 0.72;
    padding: 12px;
  }

  .product-img {
    inset: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
  }

  .product-body {
    padding: 12px;
  }

  .product-topline {
    font-size: 0.58rem;
    flex-wrap: nowrap;
  }

  .product-topline span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 52%;
  }

  .product-topline strong {
    font-size: 0.8rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .price-full {
    display: none;
  }

  .price-compact {
    display: inline;
  }

  .product-body h3 {
    margin: 6px 0 4px;
    font-size: 0.88rem;
    line-height: 1.25;
  }

  .product-body p {
    display: none;
  }

  .size-group {
    margin-top: 8px;
  }

  .size-group > span {
    font-size: 0.58rem;
    margin-bottom: 4px;
  }

  .size-pill {
    padding: 2px 7px;
    font-size: 0.62rem;
  }

  .product-badges {
    top: 8px;
    left: 8px;
    right: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 4px;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 20px), transparent);
    padding-right: 20px;
  }

  .product-badges::-webkit-scrollbar {
    display: none;
  }

  .badge, .mini-badge {
    min-height: 18px;
    padding: 2px 7px;
    font-size: 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.03em;
  }

  .product-thumbs {
    padding: 8px;
    gap: 4px;
  }

  .image-dot {
    width: 24px;
    height: 24px;
  }

  .product-meta-line {
    margin-top: 10px;
    padding: 8px 0;
    font-size: 0.72rem;
  }

  .archive-note {
    margin-top: auto;
    padding: 8px;
    font-size: 0.7rem;
  }

  .product-cta {
    min-height: 40px;
    padding: 0 12px;
    font-size: 0.72rem;
    margin-top: auto;
  }

  /* Pins the CTA/archive-note to the bottom of every card regardless of
     how much text/badges/sizes sit above it, so buttons line up across
     a row instead of sitting at different heights per card. */
  .product-body {
    padding-bottom: 16px;
  }

  .stats-section {
    gap: 10px;
  }

  .stat-card {
    min-width: 0;
    padding: 18px 8px;
  }

  .stat-card strong {
    font-size: clamp(1.3rem, 7vw, 1.9rem);
  }

  .stat-card span {
    font-size: 0.68rem;
    line-height: 1.3;
  }

  .modal-backdrop {
    padding: 0;
    place-items: end center;
  }

  .modal-card {
    max-height: 88vh;
    max-height: 88dvh; /* dvh accounts for mobile browser chrome/keyboard; vh above is the fallback for browsers that don't support it */
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 22px 18px;
    animation: modalInMobile 0.4s var(--ease-out-expo) both;
  }

  @keyframes modalInMobile {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Compact everything inside the order / request bottom sheets so the
     whole form comfortably fits the screen instead of looking "zoomed
     in" and needing heavy scrolling to reach the send button. */
  .modal-card .kicker {
    margin-bottom: 4px;
    font-size: 0.68rem;
  }

  .modal-card h2 {
    font-size: 1.3rem;
    line-height: 1.2;
    margin-bottom: 4px;
  }

  .modal-subtitle {
    margin: 4px 0 14px;
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .order-kit-preview {
    margin: 12px 0;
  }

  .order-kit-image-wrap {
    aspect-ratio: 2.1;
  }

  .order-kit-tabs {
    margin-top: 8px;
    gap: 6px;
  }

  .kit-tab {
    min-height: 36px;
    font-size: 0.76rem;
  }

  .order-summary {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 14px 0;
  }

  .order-summary div {
    padding: 10px 8px;
  }

  .order-summary span {
    margin-bottom: 3px;
    font-size: 0.56rem;
  }

  .order-summary strong {
    font-size: 0.86rem;
  }

  .form-grid {
    gap: 10px;
    margin-bottom: 10px;
  }

  .selector-group {
    gap: 6px;
  }

  .selector-group label {
    font-size: 0.64rem;
  }

  .option-grid {
    gap: 6px;
  }

  .option-btn {
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.78rem;
  }

  .modal-card label {
    font-size: 0.85rem;
  }

  .modal-card input,
  .modal-card select,
  .modal-card textarea {
    padding: 10px 14px;
    font-size: 0.88rem;
    margin-top: 4px;
  }

  .modal-card textarea {
    min-height: 70px;
  }

  .full-width-button {
    min-height: 48px;
    margin-top: 6px;
  }

  /* Request / Kids Jersey modal uses its own field markup (.luxury-field
     etc.) — compact that too so it matches the order modal's fit. */
  .request-form-intro {
    padding: 14px;
    margin-bottom: 14px;
  }

  .request-form-body {
    gap: 12px;
  }

  .luxury-field {
    gap: 5px;
  }

  .luxury-field > span {
    font-size: 0.64rem;
  }

  .luxury-field input,
  .luxury-field select,
  .luxury-field textarea {
    padding: 10px 14px;
    font-size: 0.88rem;
  }

  .luxury-field textarea {
    min-height: 64px;
  }

  .request-choice-grid {
    gap: 8px;
  }

  .request-choice {
    min-height: 42px;
    padding: 0 14px;
    font-size: 0.82rem;
    gap: 8px;
  }

  .choice-radio {
    width: 16px;
    height: 16px;
  }

  .request-size-buttons {
    gap: 6px;
  }

  .request-size-option {
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.78rem;
  }

  .request-total-card {
    padding: 14px;
    gap: 2px;
  }

  .request-total-card strong {
    font-size: 1.5rem;
  }

  .request-total-card p {
    font-size: 0.78rem;
  }

  .quantity-stepper {
    height: 42px;
  }

  .request-size-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .quantity-stepper {
    width: 100%;
  }

  .hero {
    min-height: auto;
    padding: 40px 20px 56px;
    gap: 32px;
    overflow: hidden;
  }

  .hero-visual {
    height: auto;
    min-height: 320px;
  }

  .section {
    padding: 56px 20px;
  }

  .footer {
    padding: 48px 20px 32px;
  }

  .category-block {
    margin-top: 40px;
    padding: 20px;
  }

  .catalogue-head {
    margin-bottom: 32px;
  }

  .section-heading {
    margin-bottom: 28px;
  }

  /* Shrink the size chart so all columns fit without needing to scroll
     right at all — 2-3 short columns should never require a swipe. */
  .size-chart-card {
    padding: 10px;
  }

  .size-chart-note {
    margin: 10px;
    font-size: 0.82rem;
  }

  .size-chart-table th,
  .size-chart-table td {
    padding: 10px 8px;
    font-size: 0.78rem;
  }

  .size-chart-table th {
    font-size: 0.6rem;
    letter-spacing: 0.04em;
  }
}

/* ============================================
   LOADING STATES & SPECIAL EFFECTS
   ============================================ */

.loading-shimmer {
  background: linear-gradient(90deg, var(--surface-2) 25%, rgba(10, 10, 10, 0.1) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
}

.pulse-gold {
  animation: pulseGold 2s ease-in-out infinite;
}

@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 var(--gold-glow); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

/* Smooth scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted-light);
}


/* Firebase Status Banner */
.firebase-status-banner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.12), rgba(10, 10, 10, 0.04));
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-lg);
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
}

.firebase-status-banner .btn {
  min-height: 40px;
  padding: 0 20px;
  font-size: 0.85rem;
}

body.dark .firebase-status-banner {
  background: linear-gradient(135deg, rgba(250, 250, 250, 0.15), rgba(250, 250, 250, 0.05));
}

@media (max-width: 640px) {
  .firebase-status-banner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

/* Selection color */
::selection {
  background: rgba(10, 10, 10, 0.25);
  color: var(--text);
}

body.dark ::selection {
  background: rgba(250, 250, 250, 0.3);
}