/* ═══════════════════════════════════════════════════════════
   DIE HARD ADDICTS, Brand Design System v1
   Streetwear / moto / extreme. Built to dominate.
   ═══════════════════════════════════════════════════════════ */

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

:root {
  /* ─── Brand palette ─── */
  --black: #000000;
  --ink: #0a0a0a;
  --coal: #141414;
  --carbon: #1a1a1a;
  --steel: #2a2a2a;
  --asphalt: #3d3d3d;
  --ash: #6b6b6b;
  --smoke: #9a9a9a;
  --concrete: #b8b8b8;
  --bone: #ebe6dd;
  --paper: #f5f1eb;
  --white: #ffffff;
  --pure: #ffffff;

  /* Accent. Blood / brake-light red */
  --blood: #e31837;
  --blood-dark: #b50e2a;
  --blood-light: #ff2a4a;
  --blood-pale: rgba(227, 24, 55, 0.08);

  /* Status */
  --success: #2ecc71;
  --warning: #f5a623;
  --danger: #e31837;

  /* ─── Typography ─── */
  --font-display: 'Anton', 'Oswald', 'Impact', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ─── Spacing scale ─── */
  --gutter: 24px;
  --gutter-lg: 48px;

  /* ─── Container ─── */
  --max-w: 1440px;

  /* ─── Motion ─── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--ink);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.theme-dark {
  background: var(--black);
  color: var(--white);
}

a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }

::selection { background: var(--blood); color: var(--white); }

/* ─── Utility text ─── */
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; line-height: 0.95; text-transform: uppercase; }
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum' on; }
.eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); font-weight: 500; }
.eyebrow.red { color: var(--blood); }
.h1 { font-family: var(--font-display); font-size: clamp(56px, 9vw, 156px); line-height: 0.9; text-transform: uppercase; letter-spacing: -0.01em; }
.h2 { font-family: var(--font-display); font-size: clamp(40px, 6vw, 88px); line-height: 0.92; text-transform: uppercase; letter-spacing: -0.005em; }
.h3 { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 48px); line-height: 1; text-transform: uppercase; }
.lead { font-size: 18px; line-height: 1.6; color: var(--asphalt); max-width: 56ch; }

/* ═══════════════ NAVIGATION ═══════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 64px; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--white);
  transition: all 0.3s var(--ease);
}
.nav.is-light { background: rgba(255, 255, 255, 0.92); border-bottom-color: rgba(0, 0, 0, 0.06); color: var(--ink); }
.nav-marquee {
  height: 32px;
  background: var(--blood);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex; align-items: center;
  overflow: hidden;
  position: fixed; top: 0; left: 0; right: 0; z-index: 101;
}
.nav-marquee-track { display: flex; gap: 60px; white-space: nowrap; animation: marquee 32s linear infinite; padding-left: 100%; }
.nav-marquee-track span::before { content: '◆'; margin-right: 14px; opacity: 0.6; }
@keyframes marquee { to { transform: translateX(-100%); } }
body.has-marquee .nav { top: 32px; }
body.has-marquee { padding-top: 96px; }
body:not(.has-marquee) { padding-top: 64px; }

.nav-logo { display: flex; align-items: center; line-height: 0; }
.nav-logo-img { display: block; height: 42px; width: auto; max-width: 150px; transition: opacity 0.2s; }
.nav-logo:hover .nav-logo-img { opacity: 0.85; }
@media (max-width: 700px) { .nav-logo-img { height: 34px; max-width: 120px; } }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  position: relative; padding: 4px 0; opacity: 0.85; transition: opacity 0.2s;
}
.nav-links a:hover, .nav-links a.active { opacity: 1; }
.nav-links a.active::after { content: ''; position: absolute; bottom: -6px; left: 0; right: 0; height: 1px; background: var(--blood); }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-icon-btn {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background 0.2s;
}
.nav-icon-btn:hover { background: rgba(255, 255, 255, 0.1); }
.nav.is-light .nav-icon-btn:hover { background: rgba(0, 0, 0, 0.06); }
.nav-cart { position: relative; }
.nav-cart-count {
  position: absolute; top: -2px; right: -2px;
  background: var(--blood); color: var(--white);
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 900px) {
  .nav-links { display: none; }
}
.nav-burger {
  width: 36px; height: 36px; display: none; flex-direction: column; gap: 5px; align-items: center; justify-content: center;
}
.nav-burger span { width: 18px; height: 1.5px; background: currentColor; transition: transform 0.3s, opacity 0.3s; }
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 900px) { .nav-burger { display: flex; } }

.menu-overlay {
  position: fixed; inset: 0; z-index: 99;
  background: var(--black); color: var(--white);
  transform: translateY(-100%); transition: transform 0.5s var(--ease-out);
  display: flex; flex-direction: column; padding: 100px var(--gutter) var(--gutter);
}
.menu-overlay.open { transform: translateY(0); }
.menu-overlay nav { display: flex; flex-direction: column; gap: 4px; }
.menu-overlay nav a { font-family: var(--font-display); font-size: clamp(40px, 9vw, 80px); line-height: 1; text-transform: uppercase; padding: 8px 0; transition: color 0.2s; }
.menu-overlay nav a:hover { color: var(--blood); }
.menu-overlay-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 24px; }
.menu-overlay-foot .eyebrow { color: var(--smoke); }
.menu-overlay-foot a { color: var(--smoke); transition: color 0.2s; }
.menu-overlay-foot a:hover { color: var(--white); }

/* ═══════════════ BUTTONS ═══════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 32px; min-height: 52px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 0; cursor: pointer; transition: all 0.25s var(--ease);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary { background: var(--blood); color: var(--white); border-color: var(--blood); }
.btn-primary:hover { background: var(--blood-dark); border-color: var(--blood-dark); transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-dark:hover { background: var(--blood); border-color: var(--blood); }
.btn-light { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-light:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.3); }
.btn-outline-light:hover { border-color: var(--white); background: var(--white); color: var(--ink); }
.btn-outline-dark { background: transparent; color: var(--ink); border-color: rgba(0, 0, 0, 0.2); }
.btn-outline-dark:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-block { width: 100%; }
.btn-sm { min-height: 40px; padding: 10px 20px; font-size: 11px; }

/* ═══════════════ FORMS ═══════════════ */
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); margin-bottom: 8px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; font-size: 15px;
  background: var(--paper); border: 1px solid transparent; border-radius: 0;
  color: var(--ink); transition: border-color 0.2s, background 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: var(--white); }
.field-help { font-size: 12px; color: var(--ash); margin-top: 6px; }
.field-error { font-size: 12px; color: var(--blood); margin-top: 6px; font-family: var(--font-mono); }
.dark .field input, .dark .field select, .dark .field textarea { background: var(--coal); color: var(--white); }
.dark .field label { color: var(--smoke); }

/* ═══════════════ HERO ═══════════════ */
.hero {
  min-height: 100vh; position: relative; overflow: hidden;
  background: var(--black); color: var(--white);
  display: flex; align-items: flex-end;
  padding: var(--gutter-lg) var(--gutter);
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(227, 24, 55, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, #050505 0%, #0d0d0d 60%, #1a1a1a 100%);
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 80px);
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
}
.hero-content { position: relative; z-index: 2; max-width: var(--max-w); width: 100%; margin: 0 auto; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.hero-eyebrow .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blood); box-shadow: 0 0 0 0 var(--blood); animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(227, 24, 55, 0.6); } 70% { box-shadow: 0 0 0 14px rgba(227, 24, 55, 0); } }
.hero h1.display { font-size: clamp(72px, 13vw, 220px); margin-bottom: 24px; }
.hero h1 .stroke { -webkit-text-stroke: 1.5px var(--white); color: transparent; }
.hero-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  margin-top: 64px; padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-meta .label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--smoke); margin-bottom: 8px; }
.hero-meta .value { font-family: var(--font-display); font-size: 32px; line-height: 1; }
.hero-meta .value-mono { font-family: var(--font-mono); font-size: 16px; }
@media (max-width: 700px) {
  .hero-meta { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .hero-meta .value { font-size: 24px; }
}

/* ═══════════════ SECTIONS ═══════════════ */
.section { padding: var(--gutter-lg) var(--gutter); max-width: var(--max-w); margin: 0 auto; }
.section-tight { padding: 60px var(--gutter); }
.section-dark { background: var(--black); color: var(--white); padding: var(--gutter-lg) var(--gutter); }
.section-dark > .inner, .section > .inner { max-width: var(--max-w); margin: 0 auto; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; flex-wrap: wrap; gap: 20px; }
.section-head h2 { max-width: 14ch; }
.section-head a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; transition: opacity 0.2s; }
.section-head a:hover { opacity: 1; }

/* ═══════════════ PRODUCT CARD ═══════════════ */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }

.product-card { position: relative; background: var(--paper); cursor: pointer; overflow: hidden; }
.product-card-img {
  aspect-ratio: 4 / 5; background: var(--bone); position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.product-card-img img, .product-card-img .placeholder-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out), opacity 0.4s; }
.product-card:hover .product-card-img img, .product-card:hover .placeholder-img { transform: scale(1.04); }
.product-card-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 10px; background: var(--ink); color: var(--white);
}
.product-card-tag.new { background: var(--blood); }
.product-card-tag.vip { background: var(--white); color: var(--ink); border: 1px solid var(--ink); }
.product-card-quickadd {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  background: var(--ink); color: var(--white);
  padding: 12px; text-align: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px); transition: all 0.3s var(--ease-out);
}
.product-card:hover .product-card-quickadd { opacity: 1; transform: translateY(0); }
.product-card-info { padding: 16px 4px 24px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.product-card-name { font-family: var(--font-display); font-size: 18px; line-height: 1; text-transform: uppercase; }
.product-card-price { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }

/* placeholder gradient images for demo */
.placeholder-img {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 30%, #444 70%, #1a1a1a 100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.18); font-family: var(--font-display); font-size: 80px;
  text-transform: uppercase;
}
.placeholder-img.red { background: linear-gradient(135deg, #1a0a0d 0%, #4a0e1a 50%, #e31837 130%); color: rgba(255,255,255,0.22); }
.placeholder-img.bone { background: linear-gradient(135deg, #ebe6dd 0%, #d8d1c4 100%); color: rgba(0,0,0,0.18); }
.placeholder-img.split { background: linear-gradient(110deg, #000 0% 50%, #e31837 50% 100%); color: rgba(255,255,255,0.3); }

/* ═══════════════ CART DRAWER ═══════════════ */
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 92vw; z-index: 200;
  background: var(--white); color: var(--ink);
  transform: translateX(100%); transition: transform 0.45s var(--ease-out);
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.2);
}
.cart-drawer.open { transform: translateX(0); }
.cart-backdrop {
  position: fixed; inset: 0; z-index: 199; background: rgba(0, 0, 0, 0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.cart-backdrop.open { opacity: 1; pointer-events: all; }
.cart-head { padding: 24px var(--gutter); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bone); }
.cart-head h3 { font-family: var(--font-display); font-size: 24px; text-transform: uppercase; letter-spacing: 0.02em; }
.cart-close { font-size: 28px; line-height: 1; padding: 4px 8px; }
.cart-body { flex: 1; overflow-y: auto; padding: 0 var(--gutter); }
.cart-empty { padding: 80px 0; text-align: center; color: var(--ash); }
.cart-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--bone); }
.cart-item-img { width: 80px; height: 100px; background: var(--bone); }
.cart-item-name { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; margin-bottom: 4px; }
.cart-item-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ash); letter-spacing: 0.08em; }
.cart-item-price { font-family: var(--font-mono); font-weight: 600; }
.cart-foot { padding: 24px var(--gutter); border-top: 1px solid var(--bone); background: var(--paper); }
.cart-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.cart-row .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }
.cart-row.total { padding-top: 12px; border-top: 1px solid var(--bone); }
.cart-row.total .label { color: var(--ink); font-weight: 600; }
.cart-row.total .val { font-family: var(--font-display); font-size: 28px; }

/* ═══════════════ FOOTER ═══════════════ */
.footer { background: var(--black); color: var(--white); padding: 80px var(--gutter) 32px; }
.footer-inner { max-width: var(--max-w); margin: 0 auto; }
.footer-monogram {
  font-family: var(--font-display); font-size: clamp(80px, 22vw, 360px); line-height: 0.85; text-transform: uppercase;
  margin-bottom: 60px; letter-spacing: -0.02em;
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap;
}
.footer-monogram .blood { color: var(--blood); }
.footer-logo { display: inline-flex; margin-bottom: 56px; }
.footer-logo img { width: clamp(220px, 26vw, 320px); height: auto; display: block; }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 80px; padding-top: 60px; border-top: 1px solid rgba(255,255,255,0.1); }
@media (max-width: 800px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 40px; } }
.footer-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--smoke); margin-bottom: 18px; font-weight: 600; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--concrete); transition: color 0.2s; font-size: 14px; }
.footer-col a:hover { color: var(--white); }
.footer-newsletter input {
  width: 100%; padding: 14px 0; background: transparent;
  border: none; border-bottom: 1px solid rgba(255,255,255,0.2); color: var(--white);
  font-size: 14px;
}
.footer-newsletter input:focus { outline: none; border-bottom-color: var(--blood); }
.footer-newsletter button { margin-top: 12px; padding: 12px 24px; background: var(--blood); color: var(--white); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.footer-bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); }
.footer-bot p, .footer-bot a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--smoke); }
.footer-bot a:hover { color: var(--white); }
.footer-socials { display: flex; gap: 18px; }

/* ═══════════════ MISC PATTERNS ═══════════════ */
.tag-pill { display: inline-block; padding: 6px 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 99px; }
.divider { height: 1px; background: rgba(0,0,0,0.08); margin: 60px 0; }
.dark .divider { background: rgba(255,255,255,0.08); }

/* Countdown */
.countdown { display: inline-flex; gap: 16px; font-family: var(--font-mono); }
.countdown .unit { text-align: center; }
.countdown .num { font-family: var(--font-display); font-size: 56px; line-height: 1; display: block; }
.countdown .lbl { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--smoke); margin-top: 6px; }

/* Scroll-reveal helper */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: translateY(0); }

/* Auth split layout */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } }
.auth-art { background: var(--black); color: var(--white); padding: var(--gutter-lg); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.auth-art::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 70%, rgba(227,24,55,0.3) 0%, transparent 70%);
}
.auth-art > * { position: relative; z-index: 1; }
.auth-art h1 { font-family: var(--font-display); font-size: clamp(48px, 7vw, 96px); line-height: 0.92; text-transform: uppercase; }
.auth-form-wrap { padding: 80px var(--gutter); display: flex; align-items: center; justify-content: center; }
.auth-form { width: 100%; max-width: 380px; }
.auth-form h2 { font-family: var(--font-display); font-size: 36px; text-transform: uppercase; margin-bottom: 8px; }
.auth-form .lead { font-size: 14px; margin-bottom: 32px; }
.auth-toggle { margin-top: 24px; text-align: center; font-size: 13px; color: var(--ash); }
.auth-toggle a { color: var(--blood); font-weight: 600; }

/* Toast / notification */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120%);
  background: var(--ink); color: var(--white); padding: 14px 24px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  z-index: 300; transition: transform 0.4s var(--ease-out);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* Badge */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--blood); color: var(--white); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.badge.gold { background: linear-gradient(135deg, #d4a73c, #f0c14b); color: var(--ink); }
.badge.dark { background: var(--ink); color: var(--white); }
.badge.outline { background: transparent; color: currentColor; border: 1px solid currentColor; }

/* ═══════════════════════════════════════════════════════════
   v2 POLISH, Mitchell & Ness × Nike
   Cinematic hero, tee zoom-on-hover, mobile bottom nav
   ═══════════════════════════════════════════════════════════ */

/* ─── Mobile bottom nav (app-bar) ─── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  display: none;
  height: 72px;
  background: rgba(0,0,0,0.96);
  backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 0 8px env(safe-area-inset-bottom);
  align-items: center;
  justify-content: space-around;
}
@media (max-width: 900px) { .bottom-nav { display: flex; } body.has-bottom-nav { padding-bottom: 80px; } body.has-bottom-nav .footer { padding-bottom: 100px; } }

.bn-tab {
  flex: 1; max-width: 20%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 10px 4px;
  color: var(--smoke); font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  position: relative;
  background: none; border: none;
  text-decoration: none;
  transition: color 0.15s;
}
.bn-tab:hover, .bn-tab.active { color: var(--white); }
.bn-tab.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 2px; background: var(--blood); }
.bn-tab svg { display: block; }

.bn-cart-count {
  position: absolute; top: 6px; right: 50%; margin-right: -22px;
  background: var(--blood); color: var(--white);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* Center FAB. Live drop countdown */
.bn-fab {
  flex: 0 0 80px; max-width: 80px;
  width: 80px; height: 80px; margin-top: -28px;
  border-radius: 50%; background: var(--blood);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  box-shadow: 0 12px 32px rgba(227, 24, 55, 0.4), 0 0 0 4px var(--ink);
  text-decoration: none;
  transition: transform 0.18s var(--ease-out);
}
.bn-fab:hover { transform: scale(1.04); }
.bn-fab-pulse {
  position: absolute; inset: -4px;
  border-radius: 50%; background: var(--blood);
  opacity: 0.5; animation: bnPulse 2.4s ease-out infinite;
}
@keyframes bnPulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.5); opacity: 0; } }
.bn-fab-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--white); }
.bn-fab-eyebrow { font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; }
.bn-fab-time { font-family: var(--font-display); font-size: 14px; line-height: 1; letter-spacing: 0.04em; }

/* Hide desktop nav-burger when bottom-nav is visible */
@media (max-width: 900px) {
  .nav-burger { display: none; }
  .nav-actions .nav-icon-btn[data-cart-toggle] { display: none; } /* cart now in bottom nav */
}

/* ─── Tee zoom-on-hover (Mitchell & Ness move) ─── */
.product-card {
  transition: transform 0.4s var(--ease-out);
}
.product-card-img {
  overflow: hidden;
  cursor: zoom-in;
}
.product-card-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.04) 60%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.product-card:hover .product-card-img::after { opacity: 1; }
.product-card:hover .product-card-img img,
.product-card:hover .product-card-img .placeholder-img,
.product-card:hover .product-card-img video {
  transform: scale(1.08);
}
.product-card-img img,
.product-card-img .placeholder-img,
.product-card-img video {
  transition: transform 0.7s var(--ease-out);
  width: 100%; height: 100%; object-fit: cover;
}
/* Optional zoom-tee video poster. Auto plays on hover */
.product-card-img video.tee-zoom {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}
.product-card:hover .product-card-img video.tee-zoom { opacity: 1; }

/* Product card "tag" pill upgrade, VIP ribbon */
.product-card-tag.vip,
.product-card-tag.club {
  background: linear-gradient(135deg, #d4a73c 0%, #f0c14b 50%, #d4a73c 100%);
  color: #000;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 6px 12px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow: 0 4px 12px rgba(212, 167, 60, 0.3);
}
.product-card-tag.early {
  background: var(--blood);
  color: #fff;
  animation: earlyPulse 2.4s ease-in-out infinite;
}
@keyframes earlyPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(227,24,55,0.5); } 50% { box-shadow: 0 0 0 8px rgba(227,24,55,0); } }

/* ─── Cinematic hero (M&N × Nike) ─── */
.hero-cinema {
  min-height: 100vh; position: relative; overflow: hidden;
  background: var(--black); color: var(--white);
}
.hero-cinema-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; filter: brightness(0.55) saturate(1.15);
}
.hero-cinema-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.6) 80%, var(--black) 100%),
    radial-gradient(ellipse at 30% 70%, rgba(227, 24, 55, 0.22) 0%, transparent 60%);
}
.hero-cinema-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: end;
  min-height: 100vh; padding: 120px var(--gutter) 60px;
  max-width: var(--max-w); margin: 0 auto;
}
.hero-cinema h1 {
  font-family: var(--font-display);
  font-size: clamp(72px, 14vw, 240px);
  line-height: 0.86; text-transform: uppercase;
  letter-spacing: -0.02em; margin: 0;
}
.hero-cinema h1 .row { display: block; overflow: hidden; }
.hero-cinema h1 .row > span { display: inline-block; transform: translateY(110%); animation: heroSlideUp 1.1s var(--ease-out) forwards; }
.hero-cinema h1 .row:nth-child(2) > span { animation-delay: 0.1s; }
.hero-cinema h1 .row:nth-child(3) > span { animation-delay: 0.2s; }
@keyframes heroSlideUp { to { transform: translateY(0); } }

.hero-cinema-meta {
  margin-top: 40px;
  display: flex; gap: 32px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}
.hero-cinema-meta > span { color: var(--concrete); display: flex; gap: 8px; align-items: center; }
.hero-cinema-meta strong { color: var(--white); font-weight: 600; }

/* Live indicator (red dot) */
.live-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--blood); position: relative; }
.live-pulse::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: var(--blood); animation: livePulse 1.6s ease-out infinite; }
@keyframes livePulse { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }

/* ─── PDP sticky add-to-cart (mobile) ─── */
@media (max-width: 900px) {
  .pdp-sticky-cta {
    position: fixed; bottom: 80px; left: 0; right: 0; z-index: 80;
    padding: 12px var(--gutter);
    background: var(--white);
    border-top: 1px solid var(--bone);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.08);
    display: flex; gap: 10px; align-items: center;
  }
  .pdp-sticky-cta .price { font-family: var(--font-display); font-size: 20px; }
  .pdp-sticky-cta .btn { flex: 1; }
}
@media (min-width: 901px) { .pdp-sticky-cta { display: none; } }

/* ─── Scroll-triggered fade up (data-reveal upgrade) ─── */
[data-reveal] { transform: translateY(40px); }
[data-reveal].in { transform: translateY(0); }

/* ─── VIP / Club lockout overlay on cards ─── */
.product-card.vip-locked .product-card-img::before {
  content: '🔒 CLUB ONLY';
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  color: linear-gradient(135deg, #d4a73c, #f0c14b);
  color: #f0c14b;
  font-family: var(--font-display); font-size: 22px; letter-spacing: 0.12em;
  opacity: 0;
  transition: opacity 0.25s;
}
.product-card.vip-locked:hover .product-card-img::before { opacity: 1; }

/* ─── Search slide-in panel ─── */
.search-panel {
  position: fixed; top: 0; left: 0; right: 0; z-index: 105;
  background: rgba(0,0,0,0.98); color: #fff;
  padding: 32px var(--gutter);
  transform: translateY(-100%);
  transition: transform 0.4s var(--ease-out);
}
.search-panel.open { transform: translateY(0); }
.search-panel input { width: 100%; background: transparent; border: none; border-bottom: 2px solid rgba(255,255,255,0.2); color: #fff; font-family: var(--font-display); font-size: 36px; padding: 16px 0; outline: none; text-transform: uppercase; }
.search-panel input::placeholder { color: var(--smoke); }

/* ─── Cart upgrades. Confetti on add ─── */
@keyframes confettiPop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); opacity: 0; }
}
.confetti {
  position: fixed; top: 50%; left: 50%; z-index: 999; pointer-events: none;
  width: 8px; height: 14px; background: var(--blood);
  animation: confettiPop 0.9s ease-out forwards;
}

/* ─── Toast upgrade ─── */
.toast {
  background: linear-gradient(135deg, var(--ink) 0%, #1a1a1a 100%);
  border-left: 3px solid var(--blood);
}

/* ─── Form upgrades ─── */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blood);
  box-shadow: 0 0 0 3px rgba(227, 24, 55, 0.12);
}

/* Fix menu overlay overflow leak (content taller than viewport bleeds through translateY) */
.menu-overlay { overflow: hidden; }
.menu-overlay:not(.open) { visibility: hidden; pointer-events: none; }
.menu-overlay.open { visibility: visible; pointer-events: all; }

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIXES (≤700px)
   - Fix horizontal overflow (sections, marquees, gap:80px grids)
   - Compress reviews into a horizontal snap-carousel (don't stack
     huge-text cards into a long scroll wall)
   - Instagram grid 6→3 cols
   - Two-col feature sections collapse with reasonable gap
   ═══════════════════════════════════════════════════════════ */

/* ─── Default reviews-grid (desktop): 3 cols, generous padding ─── */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.review-card {
  padding: 32px;
  background: var(--paper);
  border-left: 3px solid var(--blood);
}
.review-quote {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.3;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* ─── Default ig-grid (desktop): 6 cols ─── */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

/* ─── Default two-col feature (desktop): side-by-side w/ generous gap ─── */
.two-col-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.kids-grid.two-col-feature { grid-template-columns: 1fr 1.2fr; }

/* ─── MOBILE (≤700px) ─── */
@media (max-width: 700px) {
  /* Defensive: kill horizontal scroll across the entire site */
  html, body { overflow-x: hidden; max-width: 100vw; }
  .section, .section-dark { max-width: 100vw; overflow-x: hidden; }

  /* Reviews. Horizontal snap carousel instead of vertical wall.
     Each card sits side-by-side, swipe to advance. Compact text. */
  .reviews-grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 16px;
    margin: 0 calc(var(--gutter) * -1);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    scrollbar-width: none;
  }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .review-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
    padding: 22px 20px;
    min-height: 0;
  }
  .review-quote {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 14px;
    /* Cap to ~4 lines. Keeps cards uniform + scannable */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Instagram grid: 6 cols → 3 cols on mobile */
  .ig-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  /* Two-col feature sections: collapse to single column with sane gap */
  .two-col-feature,
  .kids-grid.two-col-feature,
  .club-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Trim the 120px CTA section padding on mobile */
  .section-dark { padding: 60px var(--gutter) !important; }
  /* Trim oversized hero / kids sections paddings to 56px vertical */
  section[style*="padding:80px"], section[style*="padding: 80px"] {
    padding: 56px var(--gutter) !important;
  }
  section[style*="padding:120px"], section[style*="padding: 120px"] {
    padding: 60px var(--gutter) !important;
  }

  /* Marquee text, 80px is too big for narrow phones */
  section[style*="overflow:hidden"] > div[style*="animation:marquee"] {
    font-size: 36px !important;
    gap: 36px !important;
  }

  /* Section heads. Let them stack instead of side-by-side title + read-all link */
  .section-head {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* Generic. Any inline grid with repeat(3,1fr) inside a pane should drop to 2 cols */
  div[style*="repeat(3,1fr)"]:not(.reviews-grid) { grid-template-columns: repeat(2, 1fr) !important; }
  div[style*="repeat(3, 1fr)"]:not(.reviews-grid) { grid-template-columns: repeat(2, 1fr) !important; }
  div[style*="grid-template-columns:1fr 1fr;gap:80px"] { grid-template-columns: 1fr !important; gap: 28px !important; }
  div[style*="grid-template-columns:1fr 1.2fr;gap:80px"] { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* ─── EXTRA SMALL (≤420px) ─── tighten typography one more notch */
@media (max-width: 420px) {
  .review-card { flex-basis: 84%; }
  .review-quote { font-size: 15px; }
  .h2 { font-size: clamp(28px, 8vw, 40px) !important; }
  .h1 { font-size: clamp(40px, 12vw, 64px) !important; }
}

/* ═══════════ AS SEEN ON / PARTNERS ═══════════ */
.partners-section { padding-top: 40px; padding-bottom: 40px; }
.partners-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.partner-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 22px;
  background: var(--paper);
  border: 1px solid var(--bone);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s, transform 0.2s;
}
.partner-card:hover { border-color: var(--blood); transform: translateY(-2px); }
.partner-logo {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: var(--ink);
  color: var(--white);
  border-radius: 4px;
  flex-shrink: 0;
}
.partner-meta { min-width: 0; flex: 1; }
.partner-name {
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 0.02em;
  word-break: break-word;
}
.partner-role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ash);
  text-transform: uppercase;
  margin-top: 4px;
}
.partner-cta { background: var(--ink); color: var(--white); border-color: var(--ink); }
.partner-cta .partner-name { color: var(--white); }
.partner-cta .partner-role { color: var(--blood); }

/* ═══════════ UGC GRID (Made by us, Worn by you) ═══════════ */
.ugc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.ugc-tile {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background: #000;
  transition: transform 0.2s;
}
.ugc-tile:hover { transform: scale(1.02); z-index: 2; }
.ugc-tile img,
.ugc-tile video,
.ugc-tile iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

/* ═══════════ MISSION & VISION ═══════════ */
.mission-section { padding-top: 60px; padding-bottom: 60px; }
.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.mission-block { padding: 32px; background: var(--paper); border-left: 3px solid var(--blood); }
.mission-text {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* ═══════════ MOBILE OVERRIDES for the new sections ═══════════ */
@media (max-width: 700px) {
  .partners-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .partner-card { padding: 18px 16px; }
  .partner-logo { width: 44px; height: 44px; font-size: 22px; }
  .partner-name { font-size: 14px; }

  .ugc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .mission-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .mission-block { padding: 22px 18px; }
  .mission-text { font-size: 17px; line-height: 1.4; }

  /* Membership EARLY ACCESS / EXCLUSIVES cards being cut off. Make sure they fit
     within the parent's padding and never overflow horizontally */
  .club-grid > div[data-reveal] > div,
  div[style*="border:1px solid rgba(255,255,255,0.12)"] {
    padding: 22px 18px !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  /* The 1fr 1fr inner grid for EARLY ACCESS / EXCLUSIVES collapses to 1 col */
  .club-grid div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Big buttons inside hero/CTA shouldn't extend past viewport */
  .btn { max-width: 100%; }
}


/* ─── Hover-to-show-back on product cards ─── */
.product-card-img { position: relative; }
.product-card-img .card-back {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.45s var(--ease-out, ease);
  pointer-events: none; z-index: 1;
}
.product-card:hover .product-card-img .card-back { opacity: 1; }

/* Cart drawer upsell ("Complete the Look") hover-flip */
.upsell-card:hover .upsell-back { opacity: 1 !important; }

/* Portal rewards card hover-flip */
.reward-card:hover .reward-back { opacity: 1 !important; }