/* ============================================================
   SPEED SQUAD — Design System
   Dark premium streetwear • Gold accents • Sharp typography
   ============================================================ */

:root {
  /* — Surfaces — */
  --bg-primary:   #050505;
  --bg-secondary: #0a0a0a;
  --bg-tertiary:  #111111;
  --bg-card:      #0d0d0d;
  --bg-elevated:  #161616;

  /* — Text — */
  --text-primary:   #ffffff;
  --text-secondary: #a8a8a8;
  --text-muted:     #6b6b6b;
  --text-faint:     #404040;

  /* — Gold accent system — */
  --gold:         #d4a437;
  --gold-light:   #f2c649;
  --gold-bright:  #ffd86b;
  --gold-dark:    #a68229;
  --gold-deeper:  #6b541a;

  /* — Borders — */
  --border-faint:  rgba(255, 255, 255, 0.06);
  --border-light:  rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.15);
  --border-gold:   rgba(212, 164, 55, 0.3);

  /* — Effects — */
  --gold-glow:     0 0 40px -8px rgba(212, 164, 55, 0.55);
  --gold-glow-lg:  0 0 80px -10px rgba(212, 164, 55, 0.5);
  --shadow-card:   0 20px 50px -12px rgba(0, 0, 0, 0.7);

  /* — Layout — */
  --container: 1280px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
}

/* ----- Reset & base ----- */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;   /* fallback for older Safari */
  overflow-x: clip;     /* clips horizontally WITHOUT breaking position:sticky */
}
body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Bricolage Grotesque', -apple-system, system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  position: relative;
}
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: var(--bg-primary); }
body::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 10px; }
body::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }

::selection { background: rgba(212, 164, 55, 0.3); color: white; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ----- Typography ----- */
.font-display  { font-family: 'Anton', 'Bricolage Grotesque', sans-serif; letter-spacing: 0.02em; }
.font-bricolage{ font-family: 'Bricolage Grotesque', sans-serif; }
.font-mono     { font-family: 'JetBrains Mono', monospace; }

h1, h2, h3, h4 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Massive display heading */
.display-xl {
  font-family: 'Anton', sans-serif;
  font-size: clamp(3.5rem, 11vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-weight: 400;
}
.display-lg {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 0.95;
  text-transform: uppercase;
  font-weight: 400;
}

/* ----- Atmospheric background ----- */
.bg-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-atmosphere::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(212, 164, 55, 0.12) 0%, transparent 70%);
  filter: blur(120px);
}
.bg-atmosphere::after {
  content: '';
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(212, 164, 55, 0.06) 0%, transparent 70%);
  filter: blur(100px);
}

/* Subtle grain overlay */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Stars / racing dots */
.stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(212, 164, 55, 0.3), transparent),
    radial-gradient(1px 1px at 60px 70px, rgba(255, 255, 255, 0.15), transparent),
    radial-gradient(1px 1px at 100px 40px, rgba(212, 164, 55, 0.2), transparent),
    radial-gradient(1px 1px at 140px 90px, rgba(255, 255, 255, 0.1), transparent);
  background-size: 200px 120px;
  background-repeat: repeat;
  opacity: 0.6;
}

/* ----- Navigation ----- */
.nav-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(5, 5, 5, 0.85);
  border-bottom: 1px solid var(--border-faint);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.nav-wrapper.scrolled {
  background: rgba(5, 5, 5, 0.96);
  border-bottom-color: var(--border-light);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
}
/* Body offset to clear the fixed nav */
body { padding-top: 72px; }
@media (max-width: 640px) {
  body { padding-top: 64px; }
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.logo-mark {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.logo-icon {
  height: var(--logo-h, 30px);
  width: auto;
  display: grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
}
.logo-icon svg,
.logo-icon img {
  height: 100%;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 12px rgba(212, 164, 55, 0.5));
  transition: filter 0.25s ease, transform 0.25s ease;
}
.logo-mark:hover .logo-icon img,
.logo-mark:hover .logo-icon svg {
  filter: drop-shadow(0 0 18px rgba(255, 216, 107, 0.65));
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .logo-icon { height: var(--logo-h-mobile, 26px); }
}
.logo-text {
  font-family: 'Anton', sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 400;
}
.logo-text span { color: var(--gold); }

.nav-pill {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-faint);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.nav-pill a {
  padding: 0.5rem 1rem;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-secondary);
  border-radius: 999px;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0.02em;
}
.nav-pill a:hover { color: white; }
.nav-pill a.active {
  background: rgba(255, 255, 255, 0.06);
  color: white;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.nav-pill a.active::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--gold);
}

.nav-actions {
  display: flex; align-items: center; gap: 0.5rem;
}
.icon-btn {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  position: relative;
}
.icon-btn:hover { color: white; background: rgba(255, 255, 255, 0.06); }
.icon-btn .badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--gold);
  color: #1a1208;
  font-size: 0.65rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 2px solid var(--bg-primary);
}

.mobile-toggle {
  display: none;
  width: 38px; height: 38px;
  align-items: center;
  justify-content: center;
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 2rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Bricolage Grotesque', sans-serif;
}
.btn-gold {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  color: #1a1208;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 12px 35px -10px rgba(212, 164, 55, 0.6);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 18px 50px -10px rgba(212, 164, 55, 0.8);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-light);
  color: white;
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
}
.btn-outline-gold {
  background: transparent;
  border: 1px solid var(--border-gold);
  color: var(--gold-light);
}
.btn-outline-gold:hover {
  background: rgba(212, 164, 55, 0.08);
  border-color: var(--gold);
  color: var(--gold-bright);
}
.btn-block { width: 100%; }
.btn-sm { padding: 0.6rem 1.4rem; font-size: 0.75rem; }
.btn-lg { padding: 1.15rem 2.5rem; font-size: 0.95rem; }

/* ----- Sections ----- */
.section {
  position: relative;
  z-index: 2;
  padding: 6rem 1.5rem;
}
.container {
  max-width: var(--container);
  margin: 0 auto;
}

.section-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border-light);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  backdrop-filter: blur(10px);
}
.section-eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--gold);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.section-number {
  font-family: 'Anton', sans-serif;
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 0.85;
  color: rgba(255, 255, 255, 0.04);
  font-weight: 400;
  letter-spacing: 0;
}
.gold-text {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold), var(--gold-dark));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* ----- Hero ----- */
.hero {
  position: relative;
  z-index: 2;
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: 4rem 1.5rem 3rem;
  overflow: hidden;
}
.hero-grid {
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
}
.hero-img-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
}
.hero-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
  z-index: 2;
  pointer-events: none;
}
.hero-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  pointer-events: none;
}
.hero-img-wrap img,
.hero-img-wrap video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 8s ease;
}
.hero-img-wrap:hover img { transform: scale(1.06); }

.hero-tag {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 3;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-light);
  backdrop-filter: blur(10px);
}

/* Marquee ticker */
.marquee {
  position: relative;
  z-index: 2;
  background: var(--gold);
  color: #1a1208;
  overflow: hidden;
  padding: 0.85rem 0;
  border-top: 1px solid var(--gold-dark);
  border-bottom: 1px solid var(--gold-dark);
}
.marquee-track {
  display: flex;
  gap: 4rem;
  animation: marquee 35s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.marquee-item {
  font-family: 'Anton', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 4rem;
}
.marquee-item::after {
  content: '';
  width: 8px; height: 8px;
  background: #1a1208;
  border-radius: 50%;
  display: inline-block;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ----- Product cards ----- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
.product-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--border-gold);
}
.product-thumb {
  position: relative;
  aspect-ratio: 1/1.15;
  overflow: hidden;
  background: var(--bg-elevated);
}
.product-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card:hover .product-thumb img { transform: scale(1.07); }
.product-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.4));
  pointer-events: none;
}
.product-badge {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  padding: 0.3rem 0.7rem;
  background: var(--gold);
  color: #1a1208;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
  font-family: 'Bricolage Grotesque', sans-serif;
}
.product-quick-add {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  padding: 0.85rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  justify-content: center;
}
.product-card:hover .product-quick-add { transform: translateY(0); }
.product-quick-add button {
  width: 100%;
  padding: 0.75rem;
  background: var(--gold);
  color: #1a1208;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: filter 0.2s ease;
}
.product-quick-add button:hover { filter: brightness(1.1); }

.product-info {
  padding: 1.1rem 1.25rem 1.4rem;
}
.product-cat {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
  display: block;
}
.product-name {
  font-family: 'Anton', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: white;
}
.product-price {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.product-price-current {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gold-light);
}
.product-price-was {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

/* ----- Card / panel patterns ----- */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.panel-glow::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse, rgba(212, 164, 55, 0.12) 0%, transparent 60%);
  pointer-events: none;
}
.panel-bordered-grad {
  position: relative;
  background: linear-gradient(135deg, rgba(212, 164, 55, 0.4), transparent 50%, rgba(212, 164, 55, 0.2));
  padding: 1px;
  border-radius: var(--radius-lg);
  border: none;
}
.panel-bordered-grad > .inner {
  background: var(--bg-card);
  border-radius: calc(var(--radius-lg) - 1px);
  padding: 2rem;
  height: 100%;
}

/* ----- Forms ----- */
.input {
  width: 100%;
  padding: 0.95rem 1.1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: white;
  font-family: inherit;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}
.input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(212, 164, 55, 0.12);
}
.input::placeholder { color: var(--text-muted); }

/* Native dropdown option list — dark bg + light text (fixes white-on-white).
   Applies on mobile and as a fallback everywhere. */
select option,
select optgroup {
  background-color: #0d0d0d;
  color: #ffffff;
}
.label {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

/* ----- Variant selector chips ----- */
.chip-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.chip {
  padding: 0.55rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.04em;
}
.chip:hover { border-color: var(--border-strong); color: white; }
.chip.active {
  background: rgba(212, 164, 55, 0.1);
  border-color: var(--gold);
  color: var(--gold-light);
}

/* ----- Slide-out cart ----- */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.cart-overlay.open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 100%;
  max-width: 440px;
  height: 100vh;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-light);
  z-index: 110;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }

.cart-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}
.cart-line {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-faint);
}
.cart-line-img {
  width: 80px; height: 90px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-elevated);
  flex-shrink: 0;
}
.cart-line-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-info { flex: 1; min-width: 0; }
.cart-footer {
  padding: 1.5rem;
  padding-bottom: calc(1.5rem + 5vh + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-faint);
  background: var(--bg-card);
}
.cart-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--border-faint);
}
.cart-total .label-l {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.cart-total .value {
  font-family: 'Anton', sans-serif;
  font-size: 1.5rem;
  color: var(--gold-light);
}

.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}
.qty-control button {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--text-secondary);
  font-size: 1rem;
  transition: color 0.15s ease;
}
.qty-control button:hover { color: white; }
.qty-control span {
  min-width: 30px;
  text-align: center;
  font-size: 0.85rem;
  color: white;
}

/* ----- Reveal animations ----- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
.reveal.delay-4 { transition-delay: 0.4s; }

/* Initial entry animation */
@keyframes entryUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.entry { animation: entryUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.entry-d1 { animation-delay: 0.1s; }
.entry-d2 { animation-delay: 0.2s; }
.entry-d3 { animation-delay: 0.3s; }
.entry-d4 { animation-delay: 0.4s; }
.entry-d5 { animation-delay: 0.5s; }

/* ----- Footer ----- */
.footer-wrap {
  position: relative;
  z-index: 2;
  padding: 5rem 1.5rem 2rem;
  border-top: 1px solid var(--border-faint);
  background: linear-gradient(180deg, transparent, rgba(212, 164, 55, 0.03));
}
.footer-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 3rem;
  margin-bottom: 4rem;
}
.footer-bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid var(--border-faint);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.footer-link-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.footer-link-list a { color: var(--text-secondary); font-size: 0.88rem; transition: color 0.2s ease; }
.footer-link-list a:hover { color: var(--gold-light); }
.footer-heading {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2rem;
  font-weight: 500;
}
.social-row { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.social-row a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  color: var(--text-secondary);
  transition: all 0.25s ease;
}
.social-row a:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212, 164, 55, 0.08);
}

/* ----- Mobile menu (full-screen drawer) ----- */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  /* Side drawer — leaves a gap on the left so user sees the page behind */
  width: 88%;
  max-width: 380px;
  z-index: 90;
  background: #050505;
  background-image:
    radial-gradient(ellipse at top right, rgba(212, 164, 55, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(212, 164, 55, 0.04) 0%, transparent 60%);
  border-left: 1px solid rgba(212, 164, 55, 0.15);
  box-shadow:
    -20px 0 60px -10px rgba(0, 0, 0, 0.7),
    -1px 0 0 rgba(255, 255, 255, 0.02);
  transform: translateX(100%);
  opacity: 0;
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.35s ease;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.25rem 1.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { transform: translateX(0); opacity: 1; }

/* Backdrop — dims the visible page behind/beside the drawer; tap to close */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-menu.open ~ .mobile-menu-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Top bar */
.mm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0 1.25rem;
  border-bottom: 1px solid var(--border-faint);
}
.mm-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: 'Anton', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: white;
}
.mm-logo .slash { color: var(--gold); margin: 0 1px; }
.mm-logo img {
  height: var(--logo-h, 30px);
  width: auto;
  display: block;
  filter: drop-shadow(0 0 8px rgba(212, 164, 55, 0.45));
}
.mm-close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-light);
  color: white;
  transition: all 0.2s ease;
}
.mm-close:hover, .mm-close:active {
  background: rgba(212, 164, 55, 0.15);
  border-color: var(--gold);
  color: var(--gold-light);
}

/* Eyebrow */
.mm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 1.5rem 0 1rem;
}
.mm-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

/* Main nav */
.mm-nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-faint);
}
.mm-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 0.25rem;
  font-family: 'Anton', sans-serif;
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: white;
  border-bottom: 1px solid var(--border-faint);
  position: relative;
  transition: color 0.2s ease, padding 0.25s ease;
}
.mm-nav a svg {
  color: var(--text-muted);
  transition: transform 0.25s ease, color 0.2s ease;
}
.mm-nav a:active,
.mm-nav a.is-active {
  color: var(--gold-light);
  padding-left: 0.75rem;
}
.mm-nav a:active svg,
.mm-nav a.is-active svg {
  color: var(--gold);
  transform: translateX(4px);
}
.mm-nav a.is-active::before {
  content: '';
  position: absolute;
  left: -1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background: var(--gold);
  border-radius: 0 3px 3px 0;
}

/* Quick links row */
.mm-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin-top: 1.5rem;
}
.mm-quick-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s ease;
}
.mm-quick-item:active {
  background: rgba(212, 164, 55, 0.08);
  border-color: var(--gold);
  color: var(--gold-light);
}

/* CTA button at bottom */
.mm-cta { margin-top: 1rem; }

/* Footer area */
.mm-footer {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-faint);
}
.mm-socials { display: flex; gap: 0.5rem; }
.mm-socials a {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  transition: all 0.2s ease;
}
.mm-socials a:active {
  background: rgba(212, 164, 55, 0.1);
  border-color: var(--gold);
  color: var(--gold-light);
}
.mm-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* ----- Newsletter section ----- */
.newsletter-card {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 4rem auto;
  padding: 4rem 2rem;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(212, 164, 55, 0.08) 0%, transparent 60%),
    var(--bg-card);
  border: 1px solid var(--border-faint);
  text-align: center;
  overflow: hidden;
}
.newsletter-card::before {
  content: '';
  position: absolute;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 200px;
  background: radial-gradient(ellipse, rgba(212, 164, 55, 0.2), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

/* ----- Instagram / social grid ----- */

/* ----- Stats / metric cards ----- */
.stat-card {
  padding: 1.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--gold);
}
.stat-value {
  font-family: 'Anton', sans-serif;
  font-size: 2.5rem;
  color: var(--gold-light);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ----- Diagonal divider ----- */
.diagonal-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
  margin: 0;
  position: relative;
}

/* ============================================================
   ANIMATED HAMBURGER (morphs to X)
   ============================================================ */
.hamburger {
  width: 22px;
  height: 16px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  color: currentColor;
}
.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition:
    top 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0.15s,
    bottom 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0.15s,
    transform 0.3s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.2s ease;
  transform-origin: center;
}
.hamburger span:nth-child(1) { top: 1px; }
.hamburger span:nth-child(2) { top: 50%; margin-top: -1px; }
.hamburger span:nth-child(3) { bottom: 1px; }

/* Open state — morph to X */
.mobile-toggle.is-open .hamburger span:nth-child(1),
.hamburger.is-open span:nth-child(1) {
  top: 50%;
  margin-top: -1px;
  transform: rotate(45deg);
  transition:
    top 0.3s cubic-bezier(0.65, 0, 0.35, 1),
    transform 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}
.mobile-toggle.is-open .hamburger span:nth-child(2),
.hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
  transition: transform 0.2s ease, opacity 0.15s ease;
}
.mobile-toggle.is-open .hamburger span:nth-child(3),
.hamburger.is-open span:nth-child(3) {
  bottom: 50%;
  margin-bottom: -1px;
  transform: rotate(-45deg);
  transition:
    bottom 0.3s cubic-bezier(0.65, 0, 0.35, 1),
    transform 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}

/* X close button — animate rotation on tap */
.mm-close { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.mm-close:active { transform: rotate(90deg) scale(0.92); }
.mm-close.is-closing .hamburger.is-open span:nth-child(1) {
  top: 1px;
  margin-top: 0;
  transform: rotate(0deg);
  transition:
    transform 0.3s cubic-bezier(0.65, 0, 0.35, 1),
    top 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}
.mm-close.is-closing .hamburger.is-open span:nth-child(2) {
  opacity: 1;
  transform: scaleX(1);
  transition: transform 0.2s ease 0.1s, opacity 0.15s ease 0.1s;
}
.mm-close.is-closing .hamburger.is-open span:nth-child(3) {
  bottom: 1px;
  margin-bottom: 0;
  transform: rotate(0deg);
  transition:
    transform 0.3s cubic-bezier(0.65, 0, 0.35, 1),
    bottom 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}

/* ============================================================
   DEV BANNER MODAL
   ============================================================ */
.dev-banner {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.dev-banner.show {
  display: flex;
  opacity: 1;
}
.dev-banner-card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(212, 164, 55, 0.06) 0%, transparent 50%),
    var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  padding: 2.25rem 1.75rem 1.75rem;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: var(--gold-glow-lg), 0 30px 80px -20px rgba(0, 0, 0, 0.9);
  animation: devBannerIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes devBannerIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dev-banner-x {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  transition: all 0.2s ease;
}
.dev-banner-x:hover, .dev-banner-x:active {
  background: rgba(212, 164, 55, 0.1);
  border-color: var(--gold);
  color: var(--gold-light);
}
.dev-banner-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.dev-banner-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: pulse 2s infinite;
}
.dev-banner-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.5rem, 6vw, 2rem);
  letter-spacing: 0.04em;
  margin: 1rem 0 0.75rem;
  color: white;
}
.dev-banner-text {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.dev-banner-text strong {
  color: var(--gold-light);
  font-weight: 600;
}
.dev-banner-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 1rem;
}

/* ============================================================
   CATEGORY SHOWCASE GRID — responsive, no text overflow
   ============================================================ */
.cat-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1rem;
}
.cat-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.cat-card--big {
  grid-row: span 2;
  min-height: 480px;
}
.cat-thumb {
  position: relative;
  aspect-ratio: 1 / 1.1;
  overflow: hidden;
  width: 100%;
}
.cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.cat-card:hover .cat-thumb img { transform: scale(1.05); }
.cat-thumb--big {
  aspect-ratio: auto;
  height: 100%;
}
.cat-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.9));
}
.cat-info--big { padding: 1.5rem; }
.cat-name {
  font-family: 'Anton', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: white;
  margin: 0;
  line-height: 1.1;
  word-break: break-word;
}
.cat-info--big .cat-name {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.cat-shop {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gold-light);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

/* Mobile: stack big card on top, 2x2 below */
@media (max-width: 768px) {
  .cat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }
  .cat-card--big {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .cat-thumb--big {
    aspect-ratio: 16 / 9;
    height: auto;
  }
  .cat-name { font-size: 0.95rem; }
  .cat-info--big .cat-name { font-size: 1.5rem; }
  .cat-info { padding: 0.85rem 1rem; }
  .cat-info--big { padding: 1.25rem; }
  .cat-shop { font-size: 0.8rem; }
}

/* ============================================================
   ACCOUNT PAGE — order rows + settings responsive
   ============================================================ */
.order-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 1rem;
}
.order-row__info { min-width: 0; }
.order-row__id {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary);
  font-size: 0.9rem;
}
.order-row__meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}
.order-row__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.order-row__price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
}
.chip--success {
  background: rgba(76, 175, 80, 0.1) !important;
  color: #7fd095 !important;
  border-color: rgba(76, 175, 80, 0.25) !important;
}
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px) {
  .order-row {
    padding: 1.1rem 1.25rem;
    gap: 0.75rem;
  }
  .order-row__actions {
    width: 100%;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .settings-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   iOS — Prevent zoom on input focus (font-size must be ≥16px)
   ============================================================ */
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  font-size: 16px;
}

/* ============================================================
   DEFENSIVE — stack inline multi-column grids on phones so form
   fields and content splits get full width (no cramped columns).
   Pixel-based item rows (e.g. "120px 1fr auto") are left intact.
   ============================================================ */
@media (max-width: 640px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns:1.5fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns:1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns:1fr 1.5fr"],
  [style*="grid-template-columns: 1fr 1.5fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns: 1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   RESPONSIVE + MOBILE SAFARI CRASH FIXES
   ============================================================ */

@media (max-width: 968px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: 3rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 640px) {
  .nav-pill, .nav-actions .desktop-only { display: none; }
  .mobile-toggle { display: flex; }
  .section { padding: 4rem 1rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .display-xl { font-size: clamp(2.75rem, 13vw, 4.25rem); }
  .display-lg { font-size: clamp(2rem, 9vw, 3rem); }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
  .newsletter-card { padding: 3rem 1.5rem; margin: 2rem 1rem; }
  .container { padding-left: 1rem; padding-right: 1rem; }
  .nav-inner { padding: 0.75rem 1rem; }
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

@media (max-width: 640px) {
  .panel { padding: 1.5rem !important; }
}
@media (max-width: 420px) {
  .stat-card { padding: 1rem; }
  .panel { padding: 1.25rem !important; }
}

/* ============================================================
   iOS SAFARI MEMORY/CRASH PREVENTION
   Disables heavy GPU effects on mobile that cause
   "A problem repeatedly occurred" page reload errors.
   ============================================================ */
@media (max-width: 900px) {
  /* Remove fixed-position blurred atmospheres (huge GPU cost) */
  .bg-atmosphere {
    position: absolute;
    height: 100vh;
    top: 0;
  }
  .bg-atmosphere::before {
    width: 100%;
    max-width: 500px;
    height: 300px;
    filter: blur(60px);
    opacity: 0.7;
  }
  .bg-atmosphere::after {
    width: 400px;
    height: 400px;
    filter: blur(50px);
    opacity: 0.5;
  }

  /* Disable mix-blend-mode grain — known Safari mobile bug */
  .grain {
    mix-blend-mode: normal;
    opacity: 0.025;
  }

  /* Strip backdrop-filter from EVERY element on mobile.
     This is the #1 cause of iOS Safari page crashes. */
  .nav-wrapper,
  .nav-wrapper.scrolled,
  .nav-pill,
  .mobile-menu,
  .cart-drawer,
  .cart-overlay,
  .panel,
  .panel-glow,
  .panel-bordered-grad,
  .stat-card,
  .product-card,
  .quick-add,
  .chip,
  .input,
  .newsletter-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Solid-bg nav (since we removed the glass blur) */
  .nav-wrapper {
    background: rgba(5, 5, 5, 0.94);
    border-bottom: 1px solid var(--border-light);
  }

  /* Reduce huge box-shadow blurs that also cost GPU */
  .panel,
  .product-card,
  .newsletter-card {
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Utility */
.text-center { text-align: center; }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-gold { color: var(--gold-light); }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.uppercase { text-transform: uppercase; letter-spacing: 0.08em; }
.hidden { display: none; }
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
}

/* ============================================================
   AMBASSADOR / ADMIN — Forms, alerts, data tables, admin tabs
   ============================================================ */

/* Alert callouts (login errors, save confirmations) */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  line-height: 1.5;
  border: 1px solid;
}
.alert-error {
  background: rgba(220, 60, 60, 0.08);
  border-color: rgba(220, 60, 60, 0.35);
  color: #ff8a8a;
}
.alert-success {
  background: rgba(76, 175, 80, 0.08);
  border-color: rgba(76, 175, 80, 0.35);
  color: #7fd095;
}
.alert i, .alert svg { flex-shrink: 0; margin-top: 1px; }

/* Chip variants (status pills) */
.chip--warning {
  background: rgba(212, 164, 55, 0.12) !important;
  color: var(--gold-light) !important;
  border-color: rgba(212, 164, 55, 0.32) !important;
}
.chip--error {
  background: rgba(220, 60, 60, 0.10) !important;
  color: #ff8a8a !important;
  border-color: rgba(220, 60, 60, 0.32) !important;
}

/* Shared stat-card mono label */
.stat-label-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ----- Data table (ambassadors, orders, payouts) ----- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}
.data-table thead tr {
  background: rgba(255, 255, 255, 0.02);
}
.data-table th {
  padding: 1rem 1.25rem;
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}
.data-table td {
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  color: var(--text);
  border-bottom: 1px solid var(--border-faint);
  vertical-align: middle;
}
.data-table tbody tr:hover { background: rgba(212, 164, 55, 0.025); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* ----- Edit-row collapsible (admin ambassadors) ----- */
.edit-row { display: none; }
.edit-row.is-open { display: table-row; }
.edit-row td { padding: 0 !important; }

/* ----- Admin tab nav ----- */
.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.admin-tab:hover { color: var(--text); }
/* Tabs bar — sticky translucent strip on desktop */
.admin-tabs-bar {
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 72px;
  background: rgba(5,5,5,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10;
}
.admin-tabs-select-wrap { display: none; }
/* Keep the tab row scrollable on small screens but hide the ugly scrollbar */
.admin-tabs-scroll {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge/IE */
}
.admin-tabs-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Chrome/Safari */
.admin-tab.is-active {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
}
.admin-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 0.4rem;
  margin-left: 0.25rem;
  background: var(--gold);
  color: #000;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* Tighten data-table on small viewports */
@media (max-width: 640px) {
  .data-table th, .data-table td {
    padding: 0.75rem 0.85rem;
    font-size: 0.78rem;
  }
  .admin-tab { padding: 0.85rem 0.9rem; font-size: 0.7rem; }
}

/* "details" disclosure used in admin (payout creation) */
details summary { list-style: none; outline: none; }
details summary::-webkit-details-marker { display: none; }
details[open] summary i[data-lucide="plus-circle"] {
  transform: rotate(45deg);
  transition: transform 0.2s;
}

/* ============================================================
   ANNOUNCEMENT BAR — top strip, owner-managed
   ============================================================ */
.announcement-bar {
  background: linear-gradient(90deg, rgba(212,164,55,0.16) 0%, rgba(255,216,107,0.10) 50%, rgba(212,164,55,0.16) 100%);
  border-bottom: 1px solid rgba(212,164,55,0.32);
  position: relative;
  z-index: 60;
  overflow: hidden;
}
.announcement-bar::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg,
      transparent 0 8px,
      rgba(212,164,55,0.04) 8px 16px
    );
  pointer-events: none;
}
.announcement-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.55rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: relative;
}
.announcement-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--gold-light);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  line-height: 1.4;
  transition: color 0.2s;
}
a.announcement-text:hover { color: #fff; }
.announcement-close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--gold-light);
  opacity: 0.6;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  transition: opacity 0.2s;
}
.announcement-close:hover { opacity: 1; }
@media (max-width: 640px) {
  .announcement-inner { padding: 0.5rem 2.5rem 0.5rem 1rem; }
  .announcement-text  { font-size: 0.62rem; letter-spacing: 0.12em; }
}

/* ============================================================
   OWNER PANEL — toggle switch + code textareas
   ============================================================ */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border-faint);
  border-radius: 6px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border-faint);
  border-radius: 999px;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.switch-track::before {
  content: '';
  position: absolute;
  left: 3px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.65,0,0.35,1), background 0.2s;
}
.switch input:checked + .switch-track {
  background: rgba(212,164,55,0.2);
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(212,164,55,0.25);
}
.switch input:checked + .switch-track::before {
  transform: translateY(-50%) translateX(24px);
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

.code-textarea {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  min-height: 120px;
  resize: vertical;
  background: #000;
  color: #e8d99a;
  border-color: var(--border-light);
}
.code-textarea::placeholder {
  color: rgba(255,255,255,0.2);
  font-style: italic;
}

/* "OFF" state visually dims the SEO code section */
.seo-codeblock.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.6);
}


/* Shared admin/inline form helpers (used by admin panel) */
.mono-input { font-family: 'JetBrains Mono', monospace; font-size: 0.88rem; }
.code-input {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.8rem;
  letter-spacing: 0.6em;
  padding: 1rem 0.5rem;
  font-weight: 600;
  color: var(--gold-light);
}
.code-input::placeholder { color: rgba(255,255,255,0.15); letter-spacing: 0.5em; }

/* ============================================================
   DEV UNLOCK PILL — admin panel only
   ============================================================ */
.dev-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: rgba(255,255,255,0.02);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.dev-pill:hover { color: var(--text); border-color: var(--border-strong); }
.dev-pill summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.dev-pill summary::-webkit-details-marker { display: none; }
.dev-pill.is-unlocked {
  background: rgba(212,164,55,0.08);
  border-color: rgba(212,164,55,0.4);
  color: var(--gold-light);
}
.dev-pill.is-unlocked:hover {
  background: rgba(212,164,55,0.14);
}
.dev-pill.is-unlocked button {
  background: none;
  border: none;
  color: var(--gold-light);
  cursor: pointer;
  padding: 0;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
}
.dev-pill.is-unlocked button:hover { opacity: 1; }

/* Inline passkey form revealed when summary is clicked */
.dev-pill[open] {
  flex-direction: column;
  align-items: stretch;
  border-radius: 8px;
  padding: 0.75rem;
  min-width: 220px;
}
.dev-pill-form {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.dev-pill-form input {
  flex: 1;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--border-faint);
  color: var(--gold-light);
  padding: 0.4rem 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  border-radius: 4px;
  letter-spacing: 0.1em;
  outline: none;
}
.dev-pill-form input:focus { border-color: var(--gold); }
.dev-pill-form button {
  background: var(--gold);
  color: #000;
  border: none;
  padding: 0.4rem 0.7rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.dev-pill-form button:hover { background: var(--gold-light); }

/* Range slider styled in the SpeedSquad palette */
.dev-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(to right, var(--gold) 0%, var(--gold) var(--filled, 0%), rgba(255,255,255,0.08) var(--filled, 0%), rgba(255,255,255,0.08) 100%);
  border-radius: 999px;
  outline: none;
  margin-top: 0.5rem;
}
.dev-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold-light);
  border: 2px solid #050505;
  box-shadow: 0 0 8px rgba(212,164,55,0.6);
  cursor: grab;
  transition: transform 0.1s;
}
.dev-slider::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.dev-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold-light);
  border: 2px solid #050505;
  box-shadow: 0 0 8px rgba(212,164,55,0.6);
  cursor: grab;
}


/* ============================================================
   MOBILE MENU — DESIGN 2 · REFINED DRAWER
   Same side-drawer shell as Design 1, with editorial polish:
   - Display-font (Anton) nav links with numbered index
   - Subtle gold accent throughout
   - Stagger fade-in entrance on each link
   - 450ms slide + fade animation
   ============================================================ */
.mobile-menu--design-2 {
  /* Exact same drawer as the original (Design 1) — just a smoother
     400ms fade and a quick one-by-one slide-in of the nav links. */
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease !important;
}

/* Nav links slide in one by one — slower & smoother so each is clearly visible */
.mobile-menu--design-2 .mm-nav a {
  opacity: 0;
  transform: translateX(26px);
  will-change: opacity, transform;
}
.mobile-menu--design-2.open .mm-nav a {
  animation: mm2LinkIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.mobile-menu--design-2.open .mm-nav a:nth-child(1) { animation-delay: 0.12s; }
.mobile-menu--design-2.open .mm-nav a:nth-child(2) { animation-delay: 0.24s; }
.mobile-menu--design-2.open .mm-nav a:nth-child(3) { animation-delay: 0.36s; }
.mobile-menu--design-2.open .mm-nav a:nth-child(4) { animation-delay: 0.48s; }
.mobile-menu--design-2.open .mm-nav a:nth-child(5) { animation-delay: 0.60s; }
.mobile-menu--design-2.open .mm-nav a:nth-child(6) { animation-delay: 0.72s; }
@keyframes mm2LinkIn {
  to { opacity: 1; transform: translateX(0); }
}

/* Close (X) button spins into place when the Design 2 menu opens */
.mobile-menu--design-2 .mm-close {
  opacity: 0;
  will-change: transform, opacity;
}
.mobile-menu--design-2.open .mm-close {
  animation: mm2CloseSpin 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}
@keyframes mm2CloseSpin {
  0%   { opacity: 0; transform: rotate(-220deg) scale(0.3); }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu--design-2.open .mm-nav a,
  .mobile-menu--design-2.open .mm-close { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   ADMIN MOBILE MENU DESIGN PICKER (Site tab)
   ============================================================ */
.mm-design-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 640px) {
  .mm-design-picker { grid-template-columns: 1fr; }
}
.mm-design-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border-faint);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}
.mm-design-card:hover { border-color: rgba(212,164,55,0.3); }
.mm-design-card.is-selected {
  border-color: var(--gold);
  background: rgba(212,164,55,0.05);
  box-shadow: 0 0 0 1px var(--gold), 0 0 24px -8px rgba(212,164,55,0.35);
}
.mm-design-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mm-design-preview {
  background: #0a0a0a;
  border-radius: 4px;
  padding: 1rem;
  display: flex;
  justify-content: center;
}
.mm-design-phone {
  width: 130px;
  height: 220px;
  background: #050505;
  border: 1.5px solid #222;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.mm-design-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #0d0d0d 0%, #050505 100%);
  opacity: 0.6;
}
.mm-design-drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 72%;
  background: #0a0a0a;
  border-left: 1px solid rgba(212,164,55,0.25);
  box-shadow: -8px 0 20px rgba(0,0,0,0.5);
  padding: 10px;
}
.mm-design-line {
  height: 6px;
  background: rgba(212,164,55,0.4);
  border-radius: 2px;
  margin-bottom: 8px;
}
.mm-design-fs {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top right, rgba(212,164,55,0.18) 0%, transparent 60%),
    #050505;
  padding: 18px 10px;
}
.mm-design-fs-eyebrow {
  width: 30px;
  height: 3px;
  background: var(--gold);
  margin-bottom: 12px;
  border-radius: 1px;
}
.mm-design-fs-link {
  height: 10px;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
  margin-bottom: 8px;
}
.mm-design-meta {
  padding: 0 0.25rem;
}
.mm-design-name {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mm-design-tag {
  font-size: 0.6rem;
  padding: 2px 6px;
  background: var(--gold);
  color: #000;
  border-radius: 3px;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.mm-design-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Picker preview — refined drawer variant (for D2) */
.mm-design-drawer--refined {
  background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%) !important;
  border-left: 1px solid rgba(212,164,55,0.4) !important;
  padding: 14px 10px !important;
}
.mm-design-eyebrow {
  width: 26px;
  height: 3px;
  background: var(--gold);
  margin-bottom: 12px;
  border-radius: 1px;
}
.mm-design-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 9px;
}
.mm-design-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  color: var(--gold);
  letter-spacing: 0.1em;
  font-weight: 600;
}
.mm-design-line--big {
  height: 8px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 1px;
  margin-bottom: 0;
}

/* ============================================================
   ADMIN — CONTENT/MEDIA WIDGETS (homepage image manager)
   ============================================================ */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.25rem;
}
@media (max-width: 720px) {
  .media-row { grid-template-columns: 1fr !important; }
}
.media-widget { display: flex; flex-direction: column; gap: 0.5rem; }
.media-preview {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid var(--border-faint);
}
.media-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-badge {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.12em;
  padding: 2px 6px; border-radius: 3px;
  background: rgba(212,164,55,0.85); color: #1a1208; font-weight: 700;
}
.media-label {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  color: #fff; text-transform: uppercase;
}
.media-note { font-size: 0.72rem; color: var(--text-muted); line-height: 1.4; margin-top: -0.25rem; }
.media-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.media-clear {
  font-size: 0.68rem; color: var(--text-muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.media-clear input { accent-color: var(--gold); }

/* ===== Admin — video widgets in Content tab ===== */
.video-block { margin-top: 0.5rem; }
.video-widget {
  border: 1px dashed var(--border-light);
  border-radius: 8px;
  padding: 0.9rem;
  margin-top: 0.75rem;
  background: rgba(0,0,0,0.25);
}
.video-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.65rem; }
.video-prev {
  width: 100%; max-height: 180px; border-radius: 6px;
  background: #000; margin-bottom: 0.65rem; display: block;
}
.video-fname {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--gold-light);
  margin-top: 0.4rem; word-break: break-all;
}
.av-toggles { display: flex; gap: 1.25rem; margin-top: 0.75rem; flex-wrap: wrap; }
.av-toggle {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-secondary); cursor: pointer;
}
.av-toggle input { accent-color: var(--gold); width: 15px; height: 15px; }
.av-hint { color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.feed-slot {
  display: flex; flex-direction: column; gap: 0;
  padding: 0.75rem; border: 1px solid var(--border-faint); border-radius: 8px;
  background: rgba(0,0,0,0.2);
}
.feed-slot .video-widget { margin-top: 0.5rem; padding: 0.6rem; }

/* ============================================================
   ADMIN — MOBILE OPTIMISATION
   Tabs wrap into a tap grid (no sideways scroll); data tables
   become stacked cards with inline labels (no sideways scroll).
   ============================================================ */
@media (max-width: 768px) {

  /* ---- Tab nav → clean dropdown on mobile (no grid, no scroll) ---- */
  .admin-tabs-bar {
    position: static !important;
    top: auto !important;
    background: var(--bg-primary) !important;   /* fully opaque — no page bleed-through */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--border-light);
  }
  .admin-tabs-scroll { display: none !important; }
  .admin-tabs-select-wrap {
    display: block;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  /* Tighten the big section padding so content isn't pushed way down */
  .admin-head { padding-top: 1.75rem !important; padding-bottom: 1rem !important; }
  .admin-content { padding-top: 1.25rem !important; padding-bottom: 110px !important; }
  .admin-tabs-select-label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
  }
  .admin-tabs-select-shell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.9rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-gold, rgba(212,164,55,0.4));
    border-radius: 10px;
    color: var(--gold-light);
  }
  .admin-tabs-select {
    flex: 1;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    padding: 0.95rem 0;
    cursor: pointer;
  }
  .admin-tabs-select option { background: #0d0d0d; color: #fff; }
  .admin-tabs-select-chev { pointer-events: none; color: var(--gold-light); }

  /* ---- Data tables → stacked cards ---- */
  .data-table { min-width: 0 !important; display: block; width: 100%; }
  .data-table thead { display: none; }
  .data-table tbody { display: block; width: 100%; }
  .data-table tr {
    display: block;
    width: 100%;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--border-light);
  }
  .data-table tr:nth-child(odd) { background: rgba(255,255,255,0.015); }
  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    text-align: left !important;
    padding: 0.4rem 0 !important;
    border: none !important;
    white-space: normal !important;
  }
  .data-table td::before {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex-shrink: 0;
  }
  /* Bigger tap targets for action buttons inside cards */
  .data-table td .btn { padding: 0.5rem 0.8rem; }

  /* Collapsible edit row (ambassadors) → full-width block, no label */
  .data-table tr.edit-row { padding: 0; }
  .data-table tr.edit-row td { display: block; padding: 0 !important; }
  .data-table tr.edit-row td::before { content: none; }

  /* ---- Per-column labels ---- */
  /* Ambassadors */
  .tbl-amb tr:not(.edit-row) td:nth-of-type(1)::before { content: "Name"; }
  .tbl-amb tr:not(.edit-row) td:nth-of-type(2)::before { content: "Email"; }
  .tbl-amb tr:not(.edit-row) td:nth-of-type(3)::before { content: "Code"; }
  .tbl-amb tr:not(.edit-row) td:nth-of-type(4)::before { content: "Disc / Comm"; }
  .tbl-amb tr:not(.edit-row) td:nth-of-type(5)::before { content: "Sales"; }
  .tbl-amb tr:not(.edit-row) td:nth-of-type(6)::before { content: "Status"; }
  .tbl-amb tr:not(.edit-row) td:nth-of-type(7) { display: block; padding-top: 0.6rem !important; }

  /* Orders */
  .tbl-ord td:nth-of-type(1)::before { content: "Order"; }
  .tbl-ord td:nth-of-type(2)::before { content: "Date"; }
  .tbl-ord td:nth-of-type(3)::before { content: "Customer"; }
  .tbl-ord td:nth-of-type(4)::before { content: "Code"; }
  .tbl-ord td:nth-of-type(5)::before { content: "Ambassador"; }
  .tbl-ord td:nth-of-type(6)::before { content: "Subtotal"; }
  .tbl-ord td:nth-of-type(7)::before { content: "Discount"; }
  .tbl-ord td:nth-of-type(8)::before { content: "Commission"; }
  .tbl-ord td:nth-of-type(9)::before { content: "Status"; }

  /* Payouts */
  .tbl-pay td:nth-of-type(1)::before { content: "Ambassador"; }
  .tbl-pay td:nth-of-type(2)::before { content: "Period"; }
  .tbl-pay td:nth-of-type(3)::before { content: "Method"; }
  .tbl-pay td:nth-of-type(4)::before { content: "Amount"; }
  .tbl-pay td:nth-of-type(5)::before { content: "Status"; }
  .tbl-pay td:nth-of-type(6)::before { content: "Date"; }
  .tbl-pay td:nth-of-type(7) { display: block; padding-top: 0.6rem !important; }

  /* Products */
  .tbl-prod td:nth-of-type(1)::before { content: "Image"; }
  .tbl-prod td:nth-of-type(2)::before { content: "Product"; }
  .tbl-prod td:nth-of-type(3)::before { content: "Category"; }
  .tbl-prod td:nth-of-type(4)::before { content: "Price"; }
  .tbl-prod td:nth-of-type(5)::before { content: "Featured"; }
  .tbl-prod td:nth-of-type(6) { display: block; padding-top: 0.6rem !important; }

  /* Admin header bits don't overflow */
  .admin-tab-badge { margin-left: 0.35rem; }
}

@media (max-width: 420px) {
  .admin-tabs-scroll { grid-template-columns: repeat(2, 1fr); }
  .data-table tr { padding: 0.9rem 0.9rem; }
}

/* ============================================================
   ADMIN — SAVE / ACTION DOCK
   Keeps the primary action (Save / Add / Update) reachable
   without scrolling to the very bottom of long forms.
   Desktop: pinned to viewport bottom while scrolling (sticky).
   Mobile:  fixed bottom bar, always visible.
   ============================================================ */
.save-dock {
  position: sticky;
  bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.5rem;
  background: rgba(15,15,15,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 12px 40px -12px rgba(0,0,0,0.6);
  z-index: 20;
}

@media (max-width: 768px) {
  .save-dock {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    margin: 0 !important;
    padding: 0.8rem 1rem;
    border-radius: 0;
    border-left: none; border-right: none; border-bottom: none;
    box-shadow: 0 -8px 30px -8px rgba(0,0,0,0.7);
  }
  .save-dock .btn { flex: 1; justify-content: center; }
  /* Clearance so the fixed dock never covers the last fields */
  .admin-content { padding-bottom: 110px; }
}

/* ============================================================
   HERO SECTION — full-bleed slider (desktop + mobile media)
   ============================================================ */
.hero-full {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-slides { position: absolute; inset: 0; }
.hero-slides--mobile { display: none; }

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity var(--fade-dur, 1.2s) ease;
  will-change: opacity, transform;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide--video { background: #000; }
.hero-slide--video video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Slide transition variant */
[data-hero-transition="slide"] .hero-slide {
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1);
  transform: translateX(40px);
}
[data-hero-transition="slide"] .hero-slide.is-active { transform: translateX(0); }

/* Ken Burns animations (only on active image slides) */
.hero-slide.anim-kenburns.is-active { animation: ssKenIn var(--ken-dur, 7s) ease-out forwards; }
.hero-slide.anim-kenburns-out.is-active { animation: ssKenOut var(--ken-dur, 7s) ease-out forwards; }
@keyframes ssKenIn  { from { transform: scale(1); }                   to { transform: scale(var(--ken-scale, 1.06)); } }
@keyframes ssKenOut { from { transform: scale(var(--ken-scale, 1.06)); } to { transform: scale(1); } }

.hero-overlay { position: absolute; inset: 0; z-index: 1; opacity: var(--ov-op, 0.55); }
.hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 40%, transparent 35%, rgba(0,0,0,0.45) 100%),
    linear-gradient(90deg, rgba(5,5,5,0.55) 0%, transparent 55%);
}

.hero-inner { position: relative; z-index: 3; width: 100%; padding-top: 80px; padding-bottom: 60px; }
.hero-copy { max-width: 620px; }
.hero-sub {
  font-size: 1.1rem; color: var(--text-secondary); max-width: 480px;
  line-height: 1.65; margin-bottom: 2.25rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}
.hero-full .display-xl { text-shadow: 0 4px 40px rgba(0,0,0,0.5); }

.hero-btns { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 3rem; }

.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 460px; }
.hero-stat-num { font-family: 'Anton', sans-serif; font-size: 1.6rem; color: var(--gold-light); line-height: 1; }
.hero-stat-lbl { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-secondary); margin-top: 6px; }

/* Dots */
.hero-dots {
  position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%);
  z-index: 4; display: flex; gap: 0.55rem;
}
.hero-dot {
  width: 9px; height: 9px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,0.35); border: none; padding: 0;
  transition: background 0.25s, width 0.25s;
}
.hero-dot.is-active { background: var(--gold); width: 26px; border-radius: 5px; }

/* Arrows */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; display: grid; place-items: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 0.2s, border-color 0.2s;
}
.hero-arrow:hover { background: rgba(212,164,55,0.25); border-color: var(--gold); }
.hero-arrow--prev { left: 1.25rem; }
.hero-arrow--next { right: 1.25rem; }

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .hero-slides--desktop { display: none; }
  .hero-slides--mobile { display: block; }
  .hero-overlay { opacity: var(--ov-op-m, var(--ov-op, 0.55)); }

  .hero-full { min-height: 90vh; min-height: 90svh; }
  .hero-inner { padding-top: 96px; padding-bottom: 90px; }
  .hero-copy { max-width: 100%; }
  .hero-sub { font-size: 0.98rem; margin-bottom: 1.5rem; max-width: 100%; }

  /* Buttons side by side, smaller */
  .hero-btns {
    display: flex; flex-wrap: nowrap; gap: 0.6rem; margin-bottom: 2rem;
  }
  .hero-btns .btn {
    flex: 1; min-width: 0;
    padding: 1.05rem 0.5rem;
    min-height: 50px;
    align-items: center;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
  }
  .hero-btns .btn svg { display: none; }
  .hero-btns .hero-btn-secondary { white-space: normal; line-height: 1.15; }

  .hero-stats { gap: 0.5rem; max-width: 100%; }
  .hero-stat-num { font-size: 1.25rem; }
  .hero-stat-lbl { font-size: 0.6rem; letter-spacing: 0.1em; }

  .hero-arrow { width: 38px; height: 38px; }
  .hero-arrow--prev { left: 0.5rem; }
  .hero-arrow--next { right: 0.5rem; }
}

@media (max-width: 380px) {
  .hero-btns .btn { font-size: 0.66rem; padding: 1rem 0.35rem; }
}

/* ============================================================
   HERO — desktop spacing (more breathing room)
   ============================================================ */
@media (min-width: 769px) {
  .hero-full { min-height: 100vh; }
  .hero-inner { padding-top: 120px; padding-bottom: 100px; }
  .hero-copy { max-width: 680px; }
  .hero-copy .section-eyebrow { margin-bottom: 0.5rem; }
  .hero-full .display-xl {
    margin: 1.75rem 0 2rem !important;
    line-height: 1.02;
    letter-spacing: 0.01em;
  }
  .hero-sub {
    font-size: 1.2rem;
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: 2.75rem;
  }
  .hero-btns { gap: 1rem; margin-bottom: 3.5rem; }
  .hero-stats { gap: 1.5rem; max-width: 500px; }
  .hero-stat-num { font-size: 1.85rem; }
  .hero-stat-lbl { margin-top: 9px; }
}

@media (min-width: 1100px) {
  .hero-inner { padding-top: 140px; }
  .hero-sub { font-size: 1.25rem; margin-bottom: 3rem; }
  .hero-btns { margin-bottom: 4rem; }
}

/* ============================================================
   Tighter section spacing on mobile (storefront) — less dead space
   ============================================================ */
@media (max-width: 768px) {
  .section { padding: 3.25rem 1.25rem; }
  /* hero manages its own padding; never touch it here */
  .hero-full.section { padding: 0; }
}

/* ============================================================
   CUSTOM SELECT — fancy themed dropdown (desktop only)
   Built by JS over native <select>; native stays hidden but
   still submits. Mobile keeps native selects (good native UX).
   ============================================================ */
.ss-select { position: relative; width: 100%; }
.ss-select.ss-select--auto { display: inline-block; width: auto; vertical-align: middle; }
.ss-select__native { display: none !important; }

.ss-select__trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.95rem 1.1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: inherit; font-size: 0.9rem; line-height: 1.2;
  cursor: pointer; text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.ss-select--auto .ss-select__trigger { padding: 0.55rem 0.85rem; font-size: 0.85rem; gap: 1rem; }
.ss-select__trigger:hover { border-color: rgba(212,164,55,0.45); background: rgba(255,255,255,0.05); }
.ss-select.is-open .ss-select__trigger {
  border-color: var(--gold);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 3px rgba(212,164,55,0.12);
}
.ss-select__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ss-select__chev { flex-shrink: 0; color: var(--gold-light); transition: transform 0.25s ease; }
.ss-select.is-open .ss-select__chev { transform: rotate(180deg); }

.ss-select__menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 80;
  min-width: 100%;
  background: #0d0d0d;
  border: 1px solid rgba(212,164,55,0.3);
  border-radius: 11px;
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.85);
  padding: 0.35rem;
  max-height: 300px; overflow-y: auto;
  opacity: 0; transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.ss-select.is-open .ss-select__menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.ss-select.ss-select--up .ss-select__menu {
  top: auto; bottom: calc(100% + 6px); transform-origin: bottom center;
  transform: translateY(6px) scale(0.98);
}
.ss-select.ss-select--up.is-open .ss-select__menu { transform: translateY(0) scale(1); }

.ss-select__option {
  padding: 0.62rem 0.8rem; border-radius: 7px; cursor: pointer;
  font-size: 0.88rem; color: var(--text-secondary);
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.ss-select__option:hover,
.ss-select__option.is-active { background: rgba(212,164,55,0.12); color: #fff; }
.ss-select__option.is-selected { color: var(--gold-light); }
.ss-select__option.is-selected::after { content: '✓'; color: var(--gold); font-size: 0.8rem; flex-shrink: 0; }

/* Scrollbar for the menu */
.ss-select__menu::-webkit-scrollbar { width: 8px; }
.ss-select__menu::-webkit-scrollbar-thumb { background: rgba(212,164,55,0.3); border-radius: 4px; }

/* Commission owed cards (admin payouts) */
.owed-card { transition: background 0.15s ease; }
.owed-card:hover { background: rgba(212,164,55,0.06); }
.owed-card + .owed-card { border-top: 1px solid var(--border-faint); }

/* ============================================================
   RUN WITH THE SQUAD — story section responsive
   ============================================================ */
@media (max-width: 768px) {
  .story-grid { grid-template-columns: 1fr !important; }
  .story-copy { padding: 2.5rem 1.5rem !important; }
  /* media below the copy, full width, fully visible (not cropped on the side) */
  .story-media { min-height: 280px !important; order: 2; }
  .story-media img,
  .story-media video { object-position: center center; }
}
@media (max-width: 420px) {
  .story-media { min-height: 230px !important; }
}

/* ============================================================
   HERO — POLICE EMERGENCY LIGHT EFFECT (slide 3 only)
   GPU-accelerated (opacity only). Fires only when JS adds
   .police-firing to the hero; removing it stops instantly.
   ============================================================ */
.hero-police {
  position: absolute;
  inset: 0;
  z-index: 2;                 /* above slides + overlay, below content */
  pointer-events: none;
  opacity: 0;
  /* Desktop light positions (over the cruiser's light bar) */
  --pl-blue-x: 41%;  --pl-blue-y: 52%;
  --pl-red-x:  51%;  --pl-red-y:  53%;
  --pl-size: 30vw;
  /* Brightness (set inline from admin) — peak opacity of glows + washes */
  --pl-peak: 0.88;
  --pl-wash-peak: 0.30;
}
.hero.police-firing .hero-police { opacity: 1; }

/* Point glows — bleed onto body panels / road via screen blend */
.pl {
  position: absolute;
  width: var(--pl-size);
  height: var(--pl-size);
  border-radius: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  filter: blur(34px);
  mix-blend-mode: screen;
  opacity: 0;
  will-change: opacity;
  backface-visibility: hidden;
}
.pl--blue {
  left: var(--pl-blue-x); top: var(--pl-blue-y);
  background: radial-gradient(circle, rgba(60,110,255,0.95) 0%, rgba(30,70,255,0.45) 34%, rgba(20,50,200,0.12) 60%, transparent 72%);
}
.pl--red {
  left: var(--pl-red-x); top: var(--pl-red-y);
  background: radial-gradient(circle, rgba(255,55,60,0.95) 0%, rgba(255,30,45,0.45) 34%, rgba(200,20,30,0.12) 60%, transparent 72%);
}

/* Ambient wash — soft environmental bleed across the scene (subtle) */
.pl-wash {
  position: absolute;
  width: 80%;
  height: 70%;
  bottom: 0;
  transform: translateZ(0);
  filter: blur(60px);
  mix-blend-mode: screen;
  opacity: 0;
  will-change: opacity;
}
.pl-wash--blue { left: -10%;  background: radial-gradient(ellipse at 40% 80%, rgba(40,90,255,0.5) 0%, transparent 65%); }
.pl-wash--red  { right: -10%; background: radial-gradient(ellipse at 60% 80%, rgba(255,40,55,0.5) 0%, transparent 65%); }

/* ---- Realistic emergency strobe (alternating triple-bursts) ---- */
.hero.police-firing .pl--blue,
.hero.police-firing .pl-wash--blue { animation: plBlue 1.35s linear infinite; }
.hero.police-firing .pl--red,
.hero.police-firing .pl-wash--red  { animation: plRed 1.35s linear infinite; }
.hero.police-firing .pl-wash--blue,
.hero.police-firing .pl-wash--red  { animation-name: plBlueWash; }
.hero.police-firing .pl-wash--red  { animation-name: plRedWash; }

/* Blue: rapid triple burst in the first half, then dark */
@keyframes plBlue {
  0%,3%   { opacity: var(--pl-peak,0.88); }
  3.5%,7% { opacity: 0; }
  7.5%,10%{ opacity: var(--pl-peak,0.88); }
  10.5%,14%{ opacity: 0; }
  14.5%,17%{ opacity: var(--pl-peak,0.88); }
  17.5%,100%{ opacity: 0; }
}
@keyframes plRed {
  0%,49.5%   { opacity: 0; }
  50%,53%    { opacity: var(--pl-peak,0.88); }
  53.5%,57%  { opacity: 0; }
  57.5%,60%  { opacity: var(--pl-peak,0.88); }
  60.5%,64%  { opacity: 0; }
  64.5%,67%  { opacity: var(--pl-peak,0.88); }
  67.5%,100% { opacity: 0; }
}
/* Washes peak lower for subtle environmental bleed */
@keyframes plBlueWash {
  0%,3%   { opacity: var(--pl-wash-peak,0.3); }
  3.5%,7% { opacity: 0; }
  7.5%,10%{ opacity: var(--pl-wash-peak,0.3); }
  10.5%,14%{ opacity: 0; }
  14.5%,17%{ opacity: var(--pl-wash-peak,0.3); }
  17.5%,100%{ opacity: 0; }
}
@keyframes plRedWash {
  0%,49.5%   { opacity: 0; }
  50%,53%    { opacity: var(--pl-wash-peak,0.3); }
  53.5%,57%  { opacity: 0; }
  57.5%,60%  { opacity: var(--pl-wash-peak,0.3); }
  60.5%,64%  { opacity: 0; }
  64.5%,67%  { opacity: var(--pl-wash-peak,0.3); }
  67.5%,100% { opacity: 0; }
}

/* Mobile — reposition over the cruiser in the portrait slide */
@media (max-width: 768px) {
  .hero-police {
    --pl-blue-x: 10%; --pl-blue-y: 59%;
    --pl-red-x:  23%; --pl-red-y:  57%;
    --pl-size: 50vw;
  }
}

/* Respect reduced-motion — hold a soft steady glow instead of strobing */
@media (prefers-reduced-motion: reduce) {
  .hero.police-firing .pl--blue,
  .hero.police-firing .pl--red { animation: none; opacity: 0.35; }
  .hero.police-firing .pl-wash--blue,
  .hero.police-firing .pl-wash--red { animation: none; opacity: 0.12; }
}


/* ============================================================
   TRANSPARENT BUTTON LEVELS (admin: branding.ghost_level 0/1/2)
   Secondary outline CTAs (e.g. "More on the brand") adopt the
   frosted look of the hero "Become an ambassador" button.
   Primary gold buttons (Shop the drop, Subscribe, Add to cart)
   are never touched.
     Level 1 = frosted glass (clean).
     Level 2 = frosted + soft glow + hover lift + shine sweep,
               and also enhances the hero ghost button.
   ============================================================ */

/* ---------- Level 1: clean frosted ---------- */
body.ghost-l1 .btn-outline-gold {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-light);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body.ghost-l1 .btn-outline-gold:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ---------- Level 2: premium — glow, lift, shine sweep ---------- */
body.ghost-l2 .btn-outline-gold,
body.ghost-l2 .btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  position: relative;
  overflow: hidden;
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform .35s cubic-bezier(0.22,1,0.36,1), box-shadow .35s ease, background .35s ease, border-color .35s ease;
}
/* diagonal shine that sweeps across on hover */
body.ghost-l2 .btn-outline-gold::after,
body.ghost-l2 .btn-ghost::after {
  content: '';
  position: absolute;
  top: 0; left: -130%;
  width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .6s ease;
}
body.ghost-l2 .btn-outline-gold:hover,
body.ghost-l2 .btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
body.ghost-l2 .btn-outline-gold:hover::after,
body.ghost-l2 .btn-ghost:hover::after { left: 140%; }

@media (prefers-reduced-motion: reduce) {
  body.ghost-l2 .btn-outline-gold,
  body.ghost-l2 .btn-ghost { transition: none; }
  body.ghost-l2 .btn-outline-gold::after,
  body.ghost-l2 .btn-ghost::after { display: none; }
  body.ghost-l2 .btn-outline-gold:hover,
  body.ghost-l2 .btn-ghost:hover { transform: none; }
}

/* ---------- Admin: transparent-level picker ---------- */
.ghost-level-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 720px) { .ghost-level-picker { grid-template-columns: 1fr; } }
.ghost-level-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.1rem;
  border: 1px solid var(--border-faint);
  border-radius: 14px;
  background: rgba(0,0,0,0.3);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.ghost-level-card:hover { border-color: var(--border-light); }
.ghost-level-card.is-selected { border-color: var(--gold); background: rgba(212,164,55,0.08); }
.ghost-level-card input { position: absolute; opacity: 0; pointer-events: none; }
.ghost-level-name { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.ghost-level-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; }
/* Mini live previews of the button look at each level */
.ghost-level-demo {
  width: 100%;
  text-align: center;
  padding: 0.6rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(5,5,5,0.55), rgba(5,5,5,0.55)),
    url('../img/content/hero_d2-e1c2722c.jpg');
  background-size: cover;
  background-position: center;
}
.ghost-demo-l0 { color: var(--gold-light); box-shadow: inset 0 0 0 1px var(--border-gold); }
.ghost-demo-l1 {
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--border-light);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ghost-demo-l2 {
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3), 0 4px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
}
.ghost-demo-l2::after {
  content: '';
  position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-18deg);
  animation: ghostDemoShine 2.6s ease-in-out infinite;
}
@keyframes ghostDemoShine {
  0%, 60% { left: -130%; }
  100% { left: 150%; }
}