/* ============================================================
   CSS/styles.css — Royal Kicks LLC
   Design System: Swiss Minimalism × Dark Neumorphism

   Obsidian vault. Warm gold catching authenticated edges.
   Gallery-quiet with tactile depth.
   Emil Kowalski spring physics throughout.
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Hanken+Grotesk:wght@300;400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* Foundation — cool white */
  --bg:            oklch(1.00 0 0);
  --black:         oklch(0.12 0.010 264);
  --paper:         oklch(1.00 0 0);
  --ink:           oklch(0.12 0.010 264);

  /* Surfaces — light neumorphic layers */
  --surface:       oklch(0.99 0.003 250 / 0.97);
  --surface-2:     oklch(0.97 0.005 250 / 0.97);
  --surface-3:     oklch(0.94 0.007 250 / 0.97);

  /* Text — dark on light */
  --text:          oklch(0.14 0.012 264);
  --text-muted:    oklch(0.42 0.016 250);
  --text-2:        oklch(0.42 0.016 250);
  --text-dim:      oklch(0.46 0.012 264);

  /* Primary — Electric Blue */
  --blue:          oklch(0.62 0.20 250);
  --blue-dk:       oklch(0.50 0.22 252);
  --blue-lt:       oklch(0.74 0.16 248);
  --blue-dim:      oklch(0.62 0.20 250 / 0.12);
  --blue-glass:    oklch(0.62 0.20 250 / 0.10);
  --blue-glow:     oklch(0.62 0.20 250 / 0.30);

  /* Borders */
  --border:        oklch(0.62 0.20 250 / 0.18);
  --border-2:      oklch(0.62 0.20 250 / 0.35);
  --line:          oklch(0.62 0.20 250 / 0.10);

  /* Status */
  --red:           oklch(0.620 0.215 25);
  --red-dim:       oklch(0.620 0.215 25 / 0.14);
  --green:         oklch(0.650 0.175 145);
  --amber:         oklch(0.790 0.155 73);
  --gray:          oklch(0.440 0.012 264);

  /* Typography — Stitch Royal Kicks system */
  --display:       'Playfair Display', Georgia, serif;
  --ui:            'Hanken Grotesk', system-ui, sans-serif;
  --mono:          'Space Mono', monospace;

  /* Neumorphic shadow system — light theme */
  --neu-sm:
    -3px -3px  8px oklch(1.00 0 0 / 0.80),
     3px  3px 10px oklch(0.75 0.008 264 / 0.28);
  --neu-md:
    -5px -5px 14px oklch(1.00 0 0 / 0.85),
     5px  5px 18px oklch(0.72 0.010 264 / 0.32);
  --neu-lg:
    -8px -8px 22px oklch(1.00 0 0 / 0.90),
     8px  8px 28px oklch(0.68 0.012 264 / 0.38);
  --neu-inset:
    inset  3px  3px  8px oklch(0.72 0.010 264 / 0.28),
    inset -3px -3px  8px oklch(1.00 0 0 / 0.80);

  /* Legacy aliases */
  --brutal-shadow:    var(--neu-sm);
  --brutal-shadow-lg: var(--neu-md);

  /* Glass */
  --glass-blur:    16px;

  /* Motion — Emil Kowalski easing curves */
  --ease-strong:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.30, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.50, 1);
  --ease-in-out:    cubic-bezier(0.77, 0, 0.175, 1);

  /* Z-index scale */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-modal-bg:  300;
  --z-modal:     400;
  --z-toast:     500;
  --z-tooltip:   600;
  --z-overlay:   700;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100vw;
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--ui); cursor: pointer; }
input, select, textarea { font-family: var(--ui); }

/* ── Body ──────────────────────────────────────────────────── */
body {
  font-family: var(--ui);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Skip link ─────────────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: -100%;
  left: 16px;
  background: var(--blue);
  color: #fff;
  padding: 12px 20px;
  font: 700 .875rem/1 var(--ui);
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 0 0 8px 8px;
  z-index: 9999;
  transition: top .15s;
  text-decoration: none;
  white-space: nowrap;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 3px solid var(--black);
  outline-offset: 2px;
}

/* ── Promo bar ─────────────────────────────────────────────── */
.promo-bar {
  background: oklch(0.97 0.005 250 / 0.97);
  border-bottom: 1px solid var(--border);
  text-align: center;
  font: 600 .72rem/1 var(--ui);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 9px 16px;
}
.promo-bar strong { color: var(--blue); }
.promo-bar a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: var(--blue-dim);
  transition: color .2s;
}
.promo-bar a:hover { color: var(--blue-lt); }

/* ── Header ────────────────────────────────────────────────── */
header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: oklch(0 0 0 / 0.95);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid oklch(1 0 0 / 0.10);
  transition: background .3s var(--ease-out-quart),
              box-shadow .3s var(--ease-out-quart);
}
header.scrolled {
  background: oklch(0 0 0 / 0.98) !important;
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.10), 0 8px 32px oklch(0 0 0 / 0.60) !important;
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
}
@media (min-width: 768px) { .header-inner { padding: 0 40px; height: 68px; } }

/* ── Logo ──────────────────────────────────────────────────── */
.logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-wrap img { width: 36px; height: 36px; object-fit: contain; }

.site-name {
  font-family: var(--display);
  font-size: clamp(.9rem, 2vw, 1.15rem);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--blue);
  line-height: 1;
  display: flex;
  flex-direction: column;
}
.site-name small {
  font-family: var(--ui);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: oklch(0.70 0.012 250);
  margin-top: 4px;
}

/* ── Main nav ──────────────────────────────────────────────── */
.main-nav {
  display: none;
  gap: 2px;
  margin-left: auto;
  align-items: center;
}
@media (min-width: 768px) { .main-nav { display: flex; } }

.main-nav a {
  font: 500 .78rem/1 var(--ui);
  letter-spacing: .03em;
  color: oklch(0.78 0.012 250);
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: color .2s var(--ease-out-quart),
              border-color .2s,
              background .2s;
}
.main-nav a:hover {
  color: oklch(1 0 0);
  background: var(--blue-dim);
}
.main-nav a.active {
  color: var(--blue);
  border-color: var(--border-2);
  background: var(--blue-dim);
  box-shadow: 0 0 0 1px var(--border-2);
}

/* ── Head right ─────────────────────────────────────────────── */
.head-right,
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
@media (min-width: 768px) { .head-right, .header-right { margin-left: 0; } }

/* Account */
.btn-acct {
  display: none;
  align-items: center;
  font: 500 .76rem/1 var(--ui);
  letter-spacing: .03em;
  color: oklch(0.78 0.012 250);
  padding: 8px 14px;
  border: 1px solid oklch(1 0 0 / 0.18);
  border-radius: 6px;
  background: transparent;
  transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
}
@media (min-width: 860px) { .btn-acct { display: inline-flex; } }

.btn-cart {
  display: inline-flex;
  align-items: center;
  position: relative;
  font: 700 .76rem/1 var(--ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 8px 16px;
  border: 1.5px solid var(--blue);
  border-radius: 6px;
  background: var(--blue);
  transition: background .2s, border-color .2s, box-shadow .2s, transform .15s;
  white-space: nowrap;
}
.btn-cart:hover {
  background: var(--blue-lt, #6bbfe8);
  border-color: var(--blue-lt, #6bbfe8);
  box-shadow: 0 4px 16px rgba(82,176,230,.35);
  transform: translateY(-1px);
}
.btn-cart:active { transform: scale(.97); }
.btn-acct:hover {
  color: var(--blue);
  border-color: var(--border-2);
  background: var(--blue-dim);
  box-shadow: 0 2px 12px var(--blue-glow);
}

/* DM button — primary CTA in header */
.btn-dm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blue);
  color: oklch(0.06 0.008 264);
  font: 700 .76rem/1 var(--ui);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 9px 18px;
  border: 1px solid var(--blue);
  border-radius: 6px;
  box-shadow: var(--neu-sm);
  transition: background .18s var(--ease-out-expo),
              box-shadow .18s var(--ease-out-expo),
              transform .15s var(--ease-out-expo);
  text-decoration: none;
  white-space: nowrap;
}
.btn-dm:hover {
  background: var(--blue-lt);
  border-color: var(--blue-lt);
  box-shadow: var(--neu-md);
  transform: translateY(-1px);
}
.btn-dm:active {
  transform: scale(0.97);
  box-shadow: var(--neu-inset);
}

/* Cart nav */
.cart-nav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 .76rem/1 var(--ui);
  letter-spacing: .03em;
  color: var(--text-muted);
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
  text-decoration: none;
}
.cart-nav-btn:hover {
  color: var(--blue);
  border-color: var(--border-2);
  background: var(--blue-dim);
  box-shadow: var(--neu-sm);
}

/* Cart badge */
.cart-badge {
  background: var(--red);
  color: oklch(0.96 0.008 72);
  font: 700 .60rem/1 var(--ui);
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--bg);
}
.cart-badge.hidden { display: none; }

/* Burger */
.burger {
  background: transparent;
  border: 1px solid oklch(1 0 0 / 0.18);
  border-radius: 6px;
  width: 38px;
  height: 38px;
  color: oklch(0.78 0.012 250);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, color .2s, background .2s, box-shadow .2s;
  cursor: pointer;
}
.burger:hover {
  border-color: var(--border-2);
  color: var(--blue);
  background: var(--blue-dim);
  box-shadow: 0 2px 12px var(--blue-glow);
}
@media (min-width: 768px) { .burger { display: none; } }

/* ── Mobile nav ────────────────────────────────────────────── */
.mob-nav {
  display: none;
  flex-direction: column;
  background: oklch(0 0 0 / 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid oklch(1 0 0 / 0.10);
  padding: 12px 0 20px;
}
.mob-nav.open { display: flex; }

.mob-nav a {
  font: 500 .88rem/1 var(--ui);
  letter-spacing: .02em;
  color: oklch(0.78 0.012 250);
  padding: 13px 20px;
  border: 1px solid transparent;
  margin: 2px 12px;
  border-radius: 8px;
  transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
}
.mob-nav a:hover {
  color: oklch(1 0 0);
  background: var(--blue-dim);
}
.mob-nav a.active {
  color: var(--blue);
  background: var(--blue-dim);
  border-color: var(--border-2);
  box-shadow: 0 0 0 1px var(--border-2);
}

/* ── Footer ─────────────────────────────────────────────────── */
footer {
  background: oklch(0.98 0.004 250);
  border-top: 1px solid var(--border);
  padding: clamp(56px, 8vw, 96px) 0 36px;
}

.foot-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 640px) { .foot-grid { grid-template-columns: repeat(2, 1fr); padding: 0 40px; } }
@media (min-width: 960px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

.foot-brand-col { display: flex; flex-direction: column; gap: 16px; }

.foot-col h4 {
  font: 600 .68rem/1 var(--ui);
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.foot-col a {
  display: block;
  font-size: .85rem;
  color: var(--text-muted);
  padding: 5px 0;
  transition: color .2s var(--ease-out-quart), transform .2s var(--ease-out-quart);
}
.foot-col a:hover { color: var(--blue); transform: translateX(3px); }

/* Footer — shared/other pages */
.foot-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 640px) { .foot-inner { grid-template-columns: repeat(2, 1fr); padding: 0 40px; } }
@media (min-width: 960px) { .foot-inner { grid-template-columns: 2fr 1fr 1fr 1fr; } }

.foot-brand { display: flex; flex-direction: column; gap: 12px; }
.foot-brand-text .name {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--blue);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  display: inline-block;
}
.foot-brand-text p,
.foot-brand-text .tagline {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 28ch;
  margin-top: 8px;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.foot-links a {
  font: 500 .70rem/1 var(--ui);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: color .2s, border-color .2s, background .2s;
}
.foot-links a:hover {
  color: var(--blue);
  border-color: var(--border-2);
  background: var(--blue-dim);
}
.foot-socials {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.foot-socials a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  background: transparent;
  transition: color .2s var(--ease-out-quart),
              border-color .2s,
              background .2s,
              box-shadow .2s,
              transform .18s var(--ease-out-expo);
}
.foot-socials a:hover {
  color: var(--blue);
  border-color: var(--border-2);
  background: var(--blue-dim);
  box-shadow: var(--neu-sm);
  transform: translateY(-2px);
}
.foot-bottom {
  max-width: 1280px;
  margin: 40px auto 0;
  padding: 16px 20px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
@media (min-width: 768px) { .foot-bottom { padding: 16px 40px 0; } }
.foot-bottom p, .foot-bottom span, .foot-bottom a {
  font-size: .78rem;
  color: var(--text-dim);
}
.foot-bottom a:hover { color: var(--text-muted); }

/* ── Shared buttons ─────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--blue);
  color: #fff;
  font: 700 .85rem/1 var(--ui);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 13px 26px;
  border: 1px solid var(--blue);
  border-radius: 8px;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s var(--ease-out-expo),
              box-shadow .18s var(--ease-out-expo),
              transform .15s var(--ease-out-expo);
}
.btn-primary:hover {
  background: var(--blue-lt);
  border-color: var(--blue-lt);
  box-shadow: none;
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: scale(0.97);
  box-shadow: none;
}

.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--text);
  font: 600 .85rem/1 var(--ui);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 13px 26px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  transition: color .18s var(--ease-out-expo),
              border-color .18s,
              box-shadow .18s var(--ease-out-expo),
              transform .15s var(--ease-out-expo);
}
.btn-secondary:hover, .btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: none;
  transform: translateY(-1px);
}
.btn-secondary:active, .btn-ghost:active {
  transform: scale(0.97);
  box-shadow: none;
}

.btn-ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--text-muted);
  font: 600 .85rem/1 var(--ui);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 13px 26px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  box-shadow: var(--neu-sm);
  cursor: pointer;
  text-decoration: none;
  transition: color .18s, border-color .18s, box-shadow .18s, transform .15s var(--ease-out-expo);
}
.btn-ig:hover {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: var(--neu-md);
  transform: translateY(-1px);
}

/* ── Page container / layout utils ─────────────────────────── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) { .container { padding: 0 40px; } }

.sec    { padding: clamp(56px, 9vw, 112px) 0; }
.section  { padding: clamp(56px, 9vw, 112px) 0; }
.section-sm { padding: clamp(36px, 5vw, 64px) 0; }

.sec-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.sec-title {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  line-height: 1.1;
  text-wrap: balance;
}

.sec-label {
  font: 600 .68rem/1 var(--ui);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}

.sec-sub {
  font-size: clamp(.9rem, 1.8vw, 1.05rem);
  color: var(--text-muted);
  line-height: 1.70;
  max-width: 54ch;
  margin-top: 12px;
}

.see-all {
  font: 600 .76rem/1 var(--ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-2);
  padding-bottom: 3px;
  transition: color .2s, border-color .2s;
}
.see-all:hover { color: var(--blue); border-bottom-color: var(--blue); }

.divider { height: 1px; background: var(--line); margin: 0; }

/* ── Page header (shop pages) ───────────────────────────────── */
.page-header {
  background: oklch(0.98 0.004 73 / 0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: clamp(36px, 6vw, 64px) 0 clamp(28px, 4vw, 48px);
}
.page-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) { .page-header-inner { padding: 0 40px; } }

.page-header h1 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  line-height: 1.05;
  text-wrap: balance;
}
.ph-sub {
  font-size: clamp(.85rem, 1.8vw, 1rem);
  color: var(--text-muted);
  margin-top: 12px;
  line-height: 1.65;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 .70rem/1 var(--ui);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.breadcrumb a { color: var(--blue); transition: color .2s; }
.breadcrumb a:hover { color: var(--blue-lt); }

/* ── Cart page ──────────────────────────────────────────────── */
.cart-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px 96px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .cart-layout { grid-template-columns: 1fr 360px; padding: 48px 40px 112px; }
}

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.cart-head h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--text);
}
.cart-head .item-count { font-size: .82rem; color: var(--text-muted); }

.os-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.os-head h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text);
}
.os-body { padding: 24px; }

.pc-img:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Pagination */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 28px 0 8px; font-size: 13px; color: var(--text-muted); }
.pager button { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 9px 16px; font: 700 12px var(--ui); color: var(--text-muted); cursor: pointer; transition: border-color .2s, color .2s; }
.pager button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.pager button:disabled { opacity: .4; cursor: default; }

/* Mobile sticky bar */
.mob-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: oklch(0.97 0.003 264 / 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  gap: 10px;
  z-index: var(--z-sticky);
}
@media (max-width: 899px) { .mob-bar { display: flex; } }

/* ── Mobile global fixes ────────────────────────────────────── */
@media (max-width: 899px) {
  /* Prevent any element from causing horizontal scroll */
  body { padding-bottom: 80px; overflow-x: hidden; width: 100%; max-width: 100vw; }
  * { max-width: 100%; }
  img, video, iframe, svg { max-width: 100%; }

  /* Header */
  .header-inner { gap: 8px; padding: 0 16px; }
  .main-nav { display: none !important; }

  /* Hero: single column */
  .hero-inner { grid-template-columns: 1fr !important; padding: 40px 16px 60px !important; gap: 24px !important; }
  .hero-text h1 { font-size: clamp(26px,7vw,42px) !important; }
  .hero-sub { font-size: 14px !important; }
  .hero-btns { flex-direction: column !important; gap: 10px !important; }
  .btn-primary, .btn-dm { width: 100% !important; text-align: center !important; justify-content: center !important; }

  /* Category tiles */
  .cat-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 0 16px !important; }

  /* Product grids */
  .pcard-grid, .pc-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* Winners circle: fit full width */
  .wgrid { max-width: 100% !important; width: 100% !important; min-height: 0 !important; }
  .wcard-photo { width: 100% !important; max-width: 300px !important; margin: 0 auto !important; }

  /* Store / contact section */
  .store-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .store-map iframe { height: 240px !important; width: 100% !important; }

  /* Promo bar */
  .promo-bar { font-size: 12px !important; padding: 8px 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Page headers on shop pages */
  .page-header-inner { flex-direction: column !important; gap: 8px !important; padding: 20px 16px !important; }
  .page-header h1, .page-header-inner h1 { font-size: clamp(20px,6vw,32px) !important; }

  /* Cart */
  .cart-layout { grid-template-columns: 1fr !important; padding: 16px !important; }

  /* Footer */
  .foot-grid { grid-template-columns: 1fr !important; padding: 32px 16px !important; gap: 28px !important; }
  .rk-spin-wrap { margin: 0 auto !important; }

  /* Section padding */
  .section, .section-sm { padding-left: 16px !important; padding-right: 16px !important; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }
}

@media (max-width: 480px) {
  .pcard-grid, .pc-grid { grid-template-columns: 1fr !important; }
  .cat-grid { grid-template-columns: 1fr !important; }
  .hero-text h1 { font-size: 24px !important; }
}

.mob-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 .82rem/1 var(--ui);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid;
  transition: transform .15s var(--ease-out-expo), box-shadow .18s, background .15s;
}
.mb-home, .mb-sell {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}
.mb-home:hover, .mb-sell:hover { border-color: var(--border-2); color: var(--blue); }
.mb-dm, .mb-shop {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: var(--neu-sm);
}
.mb-dm:hover, .mb-shop:hover {
  background: var(--blue-lt);
  box-shadow: var(--neu-md);
  transform: translateY(-1px);
}
.mb-dm:active, .mb-shop:active { transform: scale(0.97); }
.mb-cart {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue);
  position: relative;
}
.mb-cart:hover { background: var(--blue); color: #fff; }

/* ── Toast ──────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(16px) scale(.96);
  background: oklch(1.00 0 0 / 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 13px 22px;
  color: var(--text);
  font: 500 .88rem/1 var(--ui);
  box-shadow: var(--neu-lg);
  z-index: var(--z-toast);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s var(--ease-out-quart),
              transform .3s var(--ease-strong);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* ── Reveal animations ──────────────────────────────────────── */
.rk-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .60s var(--ease-strong),
              transform .60s var(--ease-strong);
}
.rk-reveal.is-visible { opacity: 1; transform: none; }
.rk-reveal-delay-2 { transition-delay: .12s; }

/* ── Grain overlay ──────────────────────────────────────────── */
.rk-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

/* ── Lazy images ────────────────────────────────────────────── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity .42s var(--ease-out-quart);
}
img[loading="lazy"].loaded { opacity: 1; }

/* ── Spinner ────────────────────────────────────────────────── */
.spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 40px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Accessibility ──────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--blue) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px oklch(0.685 0.133 222 / 0.14) !important;
}
::selection { background: oklch(0.685 0.133 222 / 0.26); color: var(--text); }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: oklch(0.685 0.133 222 / 0.26);
  border-radius: 4px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: oklch(0.685 0.133 222 / 0.44); }

/* ── Utilities ──────────────────────────────────────────────── */
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rk-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Swiss Minimalism × Dark Neumorphism overrides
   body prefix = higher specificity than inline <style> blocks
   ═══════════════════════════════════════════════════════════════ */

/* ── Cards / panels ─────────────────────────────────────────── */
body .cart-items,
body .order-summary,
body .sidebar,
body .account-card,
body .filter-drawer,
body .success-box {
  border-radius: 12px !important;
  border-width: 1px !important;
  border-color: var(--border) !important;
  box-shadow: var(--neu-md) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ── Category tiles ─────────────────────────────────────────── */
body .cat-tile {
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--neu-sm) !important;
  transition: transform .28s var(--ease-out-expo),
              box-shadow .28s var(--ease-out-expo),
              border-color .2s !important;
}
body .cat-tile:hover {
  transform: translateY(-4px) !important;
  border-color: var(--border-2) !important;
  box-shadow: var(--neu-lg) !important;
}
body .cat-tile:active {
  transform: scale(0.98) !important;
  box-shadow: var(--neu-inset) !important;
}

/* ── Winner cards ───────────────────────────────────────────── */
body .wcard {
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--neu-sm) !important;
  transition: transform .28s var(--ease-out-expo),
              box-shadow .28s var(--ease-out-expo),
              border-color .2s !important;
}
body .wcard:hover {
  transform: translateY(-4px) !important;
  border-color: var(--border-2) !important;
  box-shadow: var(--neu-lg) !important;
}

/* ── Product cards ──────────────────────────────────────────── */
body .pcard,
body .pc-card {
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--neu-sm) !important;
  transition: transform .28s var(--ease-out-expo),
              box-shadow .28s var(--ease-out-expo),
              border-color .2s !important;
}
body .pcard:hover,
body .pc-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--border-2) !important;
  box-shadow: var(--neu-lg) !important;
}
body .pcard:active,
body .pc-card:active {
  transform: scale(0.98) !important;
  box-shadow: var(--neu-inset) !important;
}

/* ── Product card CTA buttons ───────────────────────────────── */
body .pcard-cta,
body .pc-cta {
  border-radius: 7px !important;
  border: 1px solid var(--blue) !important;
  box-shadow: var(--neu-sm) !important;
  transition: background .18s var(--ease-out-expo),
              box-shadow .18s,
              transform .15s var(--ease-out-expo) !important;
}
body .pcard-cta:hover,
body .pc-cta:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--neu-md) !important;
  background: var(--blue-lt) !important;
  border-color: var(--blue-lt) !important;
}
body .pcard-cta:active,
body .pc-cta:active {
  transform: scale(0.97) !important;
  box-shadow: var(--neu-inset) !important;
}

/* ── Dual CTA row (Add to Cart + Buy Now) ───────────────────── */
.pc-cta-row, .qv-cta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pc-cta-row .pc-cta,
.pc-cta-row .buy-now-cta,
.qv-cta-row .qv-cta,
.qv-cta-row .buy-now-cta {
  flex: 1;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
}
.buy-now-cta {
  background: transparent !important;
  border-color: var(--border-2) !important;
  color: var(--text-muted) !important;
}
.buy-now-cta:hover {
  border-color: var(--blue) !important;
  color: var(--blue) !important;
  background: transparent !important;
}

/* ── Cart item ──────────────────────────────────────────────── */
body .cart-item {
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--neu-sm) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
body .cart-item:hover {
  border-color: var(--border-2) !important;
  box-shadow: var(--neu-md) !important;
}
body .ci-img { border-radius: 8px !important; }

/* ── Buttons (inline-defined) ───────────────────────────────── */
body .btn-directions,
body .btn-continue,
body .btn-back,
body .btn-checkout { border-radius: 8px !important; }

body .btn-continue,
body .btn-back {
  box-shadow: var(--neu-sm) !important;
  border: 1px solid var(--border-2) !important;
  transition: background .18s var(--ease-out-expo),
              box-shadow .18s,
              transform .15s var(--ease-out-expo) !important;
}
body .btn-continue:hover, body .btn-back:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--neu-md) !important;
}
body .btn-continue:active, body .btn-back:active {
  transform: scale(0.97) !important;
  box-shadow: var(--neu-inset) !important;
}

body .btn-directions {
  box-shadow: var(--neu-md) !important;
  border: 1px solid var(--blue) !important;
  transition: background .18s var(--ease-out-expo),
              box-shadow .18s,
              transform .15s var(--ease-out-expo) !important;
}
body .btn-directions:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--neu-lg) !important;
}
body .btn-directions:active {
  transform: scale(0.97) !important;
  box-shadow: var(--neu-inset) !important;
}

body .btn-checkout {
  border: 1px solid var(--blue) !important;
  box-shadow: var(--neu-md) !important;
  transition: background .18s var(--ease-out-expo),
              box-shadow .18s,
              transform .15s var(--ease-out-expo) !important;
}
body .btn-checkout:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: var(--neu-lg) !important;
}
body .btn-checkout:active:not(:disabled) {
  transform: scale(0.97) !important;
  box-shadow: var(--neu-inset) !important;
}

/* ── Form elements ──────────────────────────────────────────── */
body .auth-form input,
body .field input,
body .field select,
body .field textarea,
body .qty-btn,
body .size-select { border-radius: 7px !important; }
body .qty-btn:first-child { border-radius: 7px 0 0 7px !important; }
body .qty-btn:last-child  { border-radius: 0 7px 7px 0 !important; }

/* ── Info/content boxes ─────────────────────────────────────── */
body .about-img,
body .store-map,
body .mission-box,
body .winners-cta-row,
body .order-id { border-radius: 10px !important; }
body .mission-box {
  border: 1px solid var(--border) !important;
  box-shadow: var(--neu-sm) !important;
}
body .order-id {
  border: 1px solid var(--border) !important;
  box-shadow: var(--neu-sm) !important;
}

/* ── Hours / status ─────────────────────────────────────────── */
body .hours-item {
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--neu-sm) !important;
}
body .order-status { border-radius: 4px !important; }

/* ── Pay icons ──────────────────────────────────────────────── */
body .pay-icon {
  border-radius: 5px !important;
  border: 1px solid var(--border) !important;
}

/* ── Success page ───────────────────────────────────────────── */
body .success-box {
  box-shadow: var(--neu-lg) !important;
  border: 1px solid var(--border) !important;
}
body .check-circle {
  border-radius: 50% !important;
  box-shadow: var(--neu-md) !important;
  border: 1px solid var(--border-2) !important;
}

/* ── Filter chips / brands / sizes ─────────────────────────── */
body .brand-pill,
body .cat-tab,
body .size-lbl,
body .filter-chip,
body .active-tag { border-radius: 6px !important; }

/* ── Section background bands ───────────────────────────────── */
.surface-band,
.winners-bg,
.store-band {
  background: oklch(0.97 0.003 73 / 0.70);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ── Brands strip ───────────────────────────────────────────── */
.brands-strip,
.brands-inner { padding: clamp(24px, 4vw, 40px) 0; }
.brands-label {
  font: 600 .68rem/1 var(--ui);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.brands-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.brand-pill {
  font: 500 .72rem/1 var(--ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
}
.brand-pill:hover,
.brand-pill.on {
  color: var(--blue);
  border-color: var(--border-2);
  background: var(--blue-dim);
  box-shadow: var(--neu-sm);
}

/* ── Store grid (index) ─────────────────────────────────────── */
.store-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 768px) { .store-grid { grid-template-columns: 1fr 1fr; gap: 48px; } }

.store-info,
.about-text { display: flex; flex-direction: column; gap: 20px; }

.info-row { display: flex; gap: 16px; align-items: flex-start; }

/* ── Product grid ───────────────────────────────────────────── */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
@media (min-width: 768px) { .prod-grid { gap: 24px; } }

/* ── Pbadge ─────────────────────────────────────────────────── */
.pbadge {
  border-radius: 4px !important;
  font: 700 .60rem/1 var(--ui) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  border: 1px solid !important;
}

/* ── Product card & quick-view badge colors ─────────────────── */
.pc-badge, .qv-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font: 700 9.5px/1 var(--ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
}
.pc-badge.new,  .qv-badge.new  { background: var(--blue);       color: #000; }
.pc-badge.grail,.qv-badge.grail{ background: #fff;               color: #000; }
.pc-badge.last, .qv-badge.last { background: var(--amber, #f5a623); color: #000; }
.pc-badge.sold, .qv-badge.sold { background: rgba(128,128,128,.25); color: var(--text-muted); }
.pc-badge.used, .qv-badge.used { background: #8b5cf6;            color: #fff; }

/* ── Empty states ───────────────────────────────────────────── */
.shop-empty,
.cart-empty {
  text-align: center;
  padding: clamp(56px, 10vw, 112px) 20px;
  color: var(--text-muted);
}

/* ── About grid ─────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 768px) { .about-grid { grid-template-columns: 1fr 1fr; } }

/* ── Hours grid ─────────────────────────────────────────────── */
.hours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 18px;
}

/* ── Logo / image utils ─────────────────────────────────────── */
.hero-logo img,
.no-photo { border-radius: 8px; }

/* ── Add-to-cart pulse ──────────────────────────────────────── */
@keyframes rk-added {
  0%  { transform: scale(1) }
  40% { transform: scale(1.04) }
  100%{ transform: scale(1) }
}
.pcard-cta.added, .pc-cta.added {
  animation: rk-added .35s var(--ease-strong) both !important;
}

/* ── focus / scroll / header ────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--blue) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px oklch(0.685 0.133 222 / 0.14) !important;
}

/* ── Quick-view modal (shared by shop/category pages) ───────── */
.qv-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: oklch(0.12 0.01 264 / 0.62);
  backdrop-filter: blur(6px);
  z-index: 400;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.qv-overlay.open { display: flex; }
.qv-modal {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%;
  max-width: 880px;
  max-height: 92vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.qv-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.qv-img { background: var(--surface-2); overflow: hidden; border-radius: 12px 0 0 12px; }
.qv-info { padding: 28px 26px; }
.qv-brand {
  font: 800 12px/1 var(--ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.qv-name { font: 800 22px/1.2 var(--ui); margin: 6px 0 2px; color: var(--text); }
.qv-style { font-size: 12.5px; color: var(--text-muted); }
.qv-price { font: 800 20px/1 var(--ui); margin: 14px 0 18px; color: var(--text); }
.qv-sec-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 800 11px/1 var(--ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.qv-sec-label button {
  background: none;
  border: none;
  color: var(--blue-dk);
  font: 700 11px/1 var(--ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.qv-size-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.qv-sz {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 10px;
  font: 700 12.5px/1 var(--ui);
  color: var(--text);
}
@media (max-width: 680px) {
  .qv-modal { grid-template-columns: 1fr; }
  .qv-img { border-radius: 12px 12px 0 0; }
}

/* ── Quick-view photo gallery (GOAT-style) ──────────────────── */
.qv-gallery { display: flex; flex-direction: column; height: 100%; }
.qv-main { position: relative; aspect-ratio: 1/1; background: var(--paper); }
.qv-main img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; touch-action: pan-y; }
.qv-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.45); color: #fff; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2; transition: background .15s;
}
.qv-arrow:hover { background: rgba(0,0,0,.7); }
.qv-arrow.prev { left: 10px; }
.qv-arrow.next { right: 10px; }
.qv-thumbs {
  display: flex;
  gap: 8px;
  padding: 10px;
  overflow-x: auto;
  background: var(--surface-2);
}
.qv-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper);
  cursor: pointer;
}
.qv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qv-thumb.on { border-color: var(--blue); }