/* ============================================================
   Freestyle Sports — Master Stylesheet v2
   Theme: Dark luxury · Gold accents · Inter font
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --black:      #080808;
  --panel:      #111111;
  --panel-2:    #181818;
  --panel-3:    #1f1f1f;
  --border:     #222222;
  --border-2:   #2d2d2d;
  --gold:       #FFD700; /* per explicit instruction — htmlcolorcodes.com "Gold" */
  --gold-light: #FFE657;
  --gold-dark:  #BFA100;
  --gold-dim:   #8a6f1a;
  --gold-pale:  #FFF3B0;
  --gold-glow:  rgba(255,215,0,.35);
  --ink:        #F0EFE8;
  --muted:      #888480;
  --faint:      #827F77; /* was #525050 — ~2.5:1 contrast on var(--black), failed WCAG AA; this is ~5:1 */
  --danger:     #e05252;
  --success:    #4caf80;
  --info:       #6ca0f5;
  --radius:     10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --shadow:     0 8px 32px rgba(0,0,0,.55);
  --shadow-sm:  0 2px 12px rgba(0,0,0,.35);
  --shadow-gold:0 4px 24px rgba(212,167,44,.15);
  --trans:      .2s ease;
  --trans-slow: .4s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--black);
  color: var(--ink);
  font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
a  { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }
ul, ol { list-style: none; }

/* ---------- Layout ---------- */
.wrap        { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 760px;  margin: 0 auto; padding: 0 32px; }
.section     { padding: 56px 32px 72px; max-width: 1180px; margin: 0 auto; }
.section:first-of-type { padding-top: 0; }
.section-head {
  display: flex; align-items: baseline;
  justify-content: space-between; margin-bottom: 28px;
}
.section-head h2 { font-size: 15px; font-weight: 600; letter-spacing: .2px; }
.section-head a  {
  font-size: 12px; color: var(--gold);
  display: flex; align-items: center; gap: 4px;
  transition: gap var(--trans);
}
.section-head a:hover { gap: 8px; }

/* ---------- Grids ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.grid-5 { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; }

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gold); font-size: 10.5px; letter-spacing: 2.5px;
  text-transform: uppercase; margin-bottom: 14px;
}
.eyebrow::before, .eyebrow::after {
  content: ''; display: block;
  width: 20px; height: 1px; background: var(--gold-dim);
}
.text-muted   { color: var(--muted); }
.text-gold    { color: var(--gold); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--gold); color: #0f0c02;
  font-size: 13px; font-weight: 700; padding: 13px 28px;
  border-radius: var(--radius); border: none;
  transition: background var(--trans), transform var(--trans),
              box-shadow var(--trans), letter-spacing var(--trans);
  white-space: nowrap; letter-spacing: .1px; position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg,rgba(255,255,255,.12) 0%,transparent 60%);
  opacity: 0; transition: opacity var(--trans);
}
.btn:hover { background: #e2b433; transform: translateY(-2px); box-shadow: var(--shadow-gold); letter-spacing: .3px; }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled { opacity: .4; pointer-events: none; }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; border: 1px solid rgba(212,167,44,.5);
  color: var(--gold); font-size: 13px; font-weight: 600; padding: 12px 28px;
  border-radius: var(--radius);
  transition: background var(--trans), border-color var(--trans),
              color var(--trans), transform var(--trans), box-shadow var(--trans);
}
.btn-outline:hover {
  background: var(--gold); color: #0f0c02;
  border-color: var(--gold); transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--muted); font-size: 13px;
  padding: 10px 16px; border-radius: var(--radius);
  transition: color var(--trans), background var(--trans);
}
.btn-ghost:hover { color: var(--ink); background: var(--panel-2); }

.btn-danger { background: var(--danger); color: #fff; font-weight: 600; border-radius: var(--radius); padding: 11px 22px; font-size: 13px; transition: opacity var(--trans); }
.btn-danger:hover { opacity: .85; }

.btn-sm  { padding: 8px 16px; font-size: 12px; }
.btn-lg  { padding: 15px 36px; font-size: 14px; }
.btn-full { width: 100%; }
.btn-icon {
  width: 38px; height: 38px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); color: var(--muted);
  transition: color var(--trans), background var(--trans), transform var(--trans);
}
.btn-icon:hover { color: var(--ink); background: var(--border-2); transform: scale(1.08); }

/* Pulse animation for CTA */
@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,167,44,.4); }
  50%       { box-shadow: 0 0 0 10px rgba(212,167,44,0); }
}
.btn-pulse { animation: pulse-gold 2.4s infinite; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8,8,8,.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.site-header::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,167,44,.2), transparent);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; height: 64px;
  max-width: 1180px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand img {
  height: 32px; width: 32px; object-fit: cover; border-radius: 7px;
  transition: transform var(--trans);
}
.brand:hover img { transform: rotate(-5deg) scale(1.05); }
.brand-name {
  font-size: 14px; font-weight: 700; letter-spacing: .3px;
  background: linear-gradient(135deg, var(--ink) 0%, var(--gold-pale) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.main-nav { display: flex; gap: 4px; }
.main-nav a {
  font-size: 13px; color: var(--muted); padding: 8px 14px;
  border-radius: 8px; position: relative;
  transition: color var(--trans), background var(--trans);
}
.main-nav a:hover { color: var(--ink); background: var(--panel-2); }
.main-nav a.active { color: var(--gold); }
.main-nav a.active::after {
  content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 2px; background: var(--gold); border-radius: 2px;
}

.header-actions { display: flex; align-items: center; gap: 4px; }
.header-actions .icon-btn {
  position: relative; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 19px; border-radius: 10px;
  transition: color var(--trans), background var(--trans), transform var(--trans);
}
.header-actions .icon-btn:hover {
  color: var(--gold-bright, var(--gold)); background: var(--panel-2); transform: translateY(-1px);
}
.cart-badge {
  position: absolute; top: 5px; right: 5px;
  background: var(--gold); color: #0f0c02;
  font-size: 9px; font-weight: 800;
  min-width: 17px; height: 17px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; line-height: 1;
  animation: badge-pop .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badge-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
.cart-badge:empty { display: none; }

/* Sub nav */
.sub-nav {
  background: rgba(8,8,8,.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.sub-nav-inner {
  display: flex; gap: 0; padding: 0 32px; justify-content: center;
  max-width: 1180px; margin: 0 auto; overflow-x: auto;
}
.sub-nav a {
  font-size: 12.5px; color: var(--faint); white-space: nowrap;
  padding: 14px 16px; border-bottom: 2px solid transparent;
  transition: color var(--trans), border-color var(--trans);
}
.sub-nav a:hover { color: var(--muted); }
.sub-nav a.active { color: var(--gold); border-color: var(--gold); }

/* Breadcrumb */
.crumb {
  font-size: 11.5px; color: var(--faint);
  padding: 20px 32px 0; max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.crumb a { color: var(--faint); transition: color var(--trans); }
.crumb a:hover { color: var(--gold); }
.crumb .sep { color: var(--border-2); font-size: 10px; }
.crumb span { color: var(--muted); }

/* ---------- Hero ---------- */
.hero {
  padding: 100px 32px 80px; text-align: center; position: relative; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(212,167,44,.09) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 80%,  rgba(212,167,44,.04) 0%, transparent 60%);
}
/* Animated floating orbs */
.hero-orb {
  position: absolute; border-radius: 50%; filter: blur(80px);
  opacity: .35; animation: orb-drift 12s ease-in-out infinite alternate;
}
.hero-orb-1 { width: 500px; height: 500px; background: rgba(212,167,44,.12); top: -150px; left: -100px; animation-delay: 0s; }
.hero-orb-2 { width: 350px; height: 350px; background: rgba(212,167,44,.08); bottom: -80px; right: -80px; animation-delay: -6s; }
@keyframes orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.1); }
}
.hero-content { position: relative; z-index: 1; }
.hero h1 {
  font-size: 52px; font-weight: 800; line-height: 1.1; margin-bottom: 20px;
  letter-spacing: -.5px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-pale) 50%, var(--gold) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-text 3s ease infinite;
}
@keyframes shimmer-text {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hero p { color: var(--muted); font-size: 16px; max-width: 460px; margin: 0 auto 34px; line-height: 1.7; }

/* Trust strip */
.trust-strip {
  display: flex; gap: 0; justify-content: center;
  margin-top: 52px; border-top: 1px solid rgba(255,255,255,.05);
  padding-top: 36px; flex-wrap: wrap;
}
.trust-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 28px; border-right: 1px solid rgba(255,255,255,.05);
}
.trust-item:last-child { border-right: none; }
.trust-item i { font-size: 22px; color: var(--gold); }
.trust-item strong { font-size: 13px; font-weight: 600; }
.trust-item span   { font-size: 11px; color: var(--faint); }

/* Hero sport page */
.hero-sport {
  padding: 52px 32px 40px; position: relative; overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.hero-sport::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
}
.hero-sport h1 { font-size: 32px; font-weight: 700; margin-bottom: 10px; }
.hero-sport p  { color: var(--muted); font-size: 14px; max-width: 520px; line-height: 1.7; }

/* ---------- Sport / Category Cards ---------- */
.sport-card, .cat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px 22px;
  text-align: center; position: relative; overflow: hidden;
  transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans);
  cursor: pointer;
}
.sport-card::before, .cat-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(212,167,44,.08) 0%, transparent 65%);
  opacity: 0; transition: opacity var(--trans);
}
.sport-card:hover, .cat-card:hover {
  border-color: rgba(212,167,44,.35); transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(212,167,44,.1);
}
.sport-card:hover::before, .cat-card:hover::before { opacity: 1; }
.sport-card .icon-wrap, .cat-card .icon-wrap {
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(212,167,44,.1); border: 1px solid rgba(212,167,44,.15);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; transition: background var(--trans), transform var(--trans);
}
.sport-card:hover .icon-wrap, .cat-card:hover .icon-wrap {
  background: rgba(212,167,44,.18); transform: scale(1.08) rotate(3deg);
}
.sport-card i, .cat-card i { color: var(--gold); font-size: 26px; }
.sport-card .title, .cat-card .title {
  color: var(--ink); font-size: 14px; font-weight: 600;
  margin-bottom: 5px; letter-spacing: .1px;
}
.sport-card .sub, .cat-card .sub { color: var(--faint); font-size: 12px; }

/* Brand card */
.brand-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 24px; position: relative; overflow: hidden;
  transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans);
}
.brand-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  opacity: 0; transition: opacity var(--trans);
}
.brand-card:hover { border-color: rgba(212,167,44,.3); transform: translateY(-3px); box-shadow: var(--shadow-gold); }
.brand-card:hover::after { opacity: 1; }
.brand-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; letter-spacing: .3px; }
.brand-card p  { color: var(--muted); font-size: 12.5px; margin-bottom: 16px; line-height: 1.6; }
.brand-card .count { color: var(--gold); font-size: 12px; font-weight: 600; }

/* ---------- Cover-image cards (category / brand) ---------- */
.cat-card.has-cover { padding: 0; text-align: left; }
.cat-card.has-cover .cover { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--panel-2); }
.cat-card.has-cover .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cat-card.has-cover:hover .cover img { transform: scale(1.08); }
.cat-card.has-cover .cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,8,0) 42%, rgba(8,8,8,.94) 100%);
}
.cat-card.has-cover .badge {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(8,8,8,.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(212,167,44,.3);
  display: flex; align-items: center; justify-content: center;
}
.cat-card.has-cover .badge i { color: var(--gold); font-size: 15px; }
.cat-card.has-cover .body { position: relative; z-index: 1; margin-top: -46px; padding: 0 18px 18px; }
.cat-card.has-cover .title { margin-bottom: 3px; }

/* Illustrated placeholder for categories without photography yet */
.cat-card.illustrated { position: relative; }
.cat-card.illustrated .bg-icon {
  position: absolute; right: -14px; bottom: -18px; font-size: 100px;
  color: rgba(212,167,44,.05); pointer-events: none; transform: rotate(-8deg);
}

/* Brand card with cover photo */
.brand-card.has-cover { padding: 0; overflow: hidden; }
.brand-card.has-cover .cover { position: relative; height: 148px; overflow: hidden; background: var(--panel-2); }
.brand-card.has-cover .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.brand-card.has-cover:hover .cover img { transform: scale(1.06); }
.brand-card.has-cover .cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,8,.05) 0%, rgba(8,8,8,.9) 100%);
}
.brand-card.has-cover .body { padding: 20px 24px 26px; }

/* ---------- Hero billboard (announcement banner) ---------- */
.hero-billboard {
  position: relative; overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.04);
  background:
    radial-gradient(ellipse 60% 50% at 85% 15%, rgba(212,167,44,.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(212,167,44,.05) 0%, transparent 60%);
}
/* Faint diagonal court-line texture + drifting light orbs for depth */
.hero-billboard::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgba(212,167,44,.035) 0px, rgba(212,167,44,.035) 1px, transparent 1px, transparent 64px);
}
.billboard-orb {
  position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0;
  animation: orb-drift 14s ease-in-out infinite alternate;
}
.billboard-orb-1 { width: 420px; height: 420px; background: rgba(212,167,44,.14); top: -160px; right: -60px; }
.billboard-orb-2 { width: 320px; height: 320px; background: rgba(212,167,44,.09); bottom: -140px; left: -60px; animation-delay: -7s; }

.billboard-grid {
  position: relative; min-height: 500px;
  display: grid; align-items: center;
  grid-template-columns: 1fr 1fr; gap: 40px;
  padding: 68px 56px; max-width: 1220px; margin: 0 auto;
}

/* LEFT: rotating headline/CTA panels, cross-fading in place */
.billboard-content-stack { position: relative; z-index: 1; }
.billboard-content { display: none; }
.billboard-content.active { display: block; animation: billboard-in .7s cubic-bezier(.16,1,.3,1); }
@keyframes billboard-in {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.billboard-tag {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(212,167,44,.12);
  border: 1px solid rgba(212,167,44,.3); color: var(--gold);
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 20px; margin-bottom: 20px;
}
.billboard-tag::before { content: '●'; font-size: 7px; animation: tag-blink 2s ease-in-out infinite; }
@keyframes tag-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.billboard-content h1 { font-size: 48px; font-weight: 800; line-height: 1.1; margin-bottom: 16px; letter-spacing: -.8px; }
.billboard-content h1 em {
  font-style: normal; display: block;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-pale) 45%, var(--gold) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: shimmer-text 3.5s ease infinite;
}
.billboard-content p { color: var(--muted); font-size: 15px; line-height: 1.7; margin-bottom: 28px; max-width: 440px; }

/* Social-proof strip next to the CTA — a small "hook" of trust right where the eye lands */
.billboard-proof { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); }
.billboard-proof strong { color: var(--ink); }
.proof-stars { display: flex; gap: 1px; color: var(--gold); font-size: 12px; }

/* RIGHT: persistent interactive product showcase — three real photos
   in a layered cluster, tilting gently toward the cursor. */
.billboard-showcase { position: relative; z-index: 1; height: 460px; }
.showcase-glow {
  position: absolute; top: 50%; left: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px;
  border-radius: 50%; background: radial-gradient(circle, rgba(212,167,44,.22) 0%, transparent 70%);
  filter: blur(16px); animation: glow-pulse 3.5s ease-in-out infinite; pointer-events: none;
}
@keyframes glow-pulse { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.showcase-ring {
  position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px;
  border-radius: 50%; border: 1px dashed rgba(212,167,44,.28);
  animation: ring-spin 40s linear infinite; pointer-events: none;
}
@keyframes ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.showcase-shadow {
  position: absolute; bottom: 34px; left: 50%; width: 200px; height: 32px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.5) 0%, transparent 72%);
  animation: shadow-breathe 5s ease-in-out infinite; pointer-events: none;
}
@keyframes shadow-breathe {
  0%, 100% { opacity: .55; transform: translateX(-50%) scale(1); }
  50%      { opacity: .35; transform: translateX(-50%) scale(.88); }
}

.showcase-card {
  position: absolute; top: 50%; left: 50%; --px: 0px; --py: 0px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--border-2); border-radius: 22px;
  box-shadow: 0 30px 70px -22px rgba(0,0,0,.65), 0 0 0 1px rgba(212,167,44,.08);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.showcase-card img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(0,0,0,.4)); }
.showcase-card:hover { border-color: rgba(212,167,44,.4); box-shadow: 0 34px 80px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(212,167,44,.25); }

.showcase-card.card-c { width: 150px; height: 190px; transform: translate(calc(-50% - 128px + var(--px)), calc(-50% + 78px + var(--py))) rotate(-7deg); z-index: 1; opacity: .88; }
.showcase-card.card-b { width: 168px; height: 210px; transform: translate(calc(-50% + 120px + var(--px)), calc(-50% - 92px + var(--py))) rotate(6deg); z-index: 2; opacity: .94; }
.showcase-card.card-a {
  width: 250px; height: 310px; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py)));
  z-index: 3; animation: showcase-float 5s ease-in-out infinite;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(212,167,44,.14);
}
@keyframes showcase-float {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -10px; }
}
.showcase-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  background: rgba(212,167,44,.95); color: #141414; font-size: 10.5px; font-weight: 800;
  letter-spacing: .3px; text-transform: uppercase; padding: 5px 10px; border-radius: 20px;
}
.showcase-info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 1px; padding: 12px 14px 11px;
  background: linear-gradient(0deg, rgba(8,8,8,.92) 0%, rgba(8,8,8,.7) 60%, transparent 100%);
}
.showcase-name { font-size: 11.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.showcase-price { font-size: 13px; font-weight: 700; color: var(--gold); }

/* Bouncing scroll cue at the foot of the hero — a small invitation to keep going */
.billboard-scrollcue {
  position: absolute; bottom: 46px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--faint); border: 1px solid var(--border-2); background: rgba(255,255,255,.02);
  animation: scrollcue-bounce 2s ease-in-out infinite; transition: color .2s ease, border-color .2s ease;
}
.billboard-scrollcue:hover { color: var(--gold); border-color: rgba(212,167,44,.35); }
@keyframes scrollcue-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }

.billboard-dots {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 2;
}
.billboard-dots button {
  position: relative; width: 22px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.18);
  border: none; padding: 0; cursor: pointer; overflow: hidden; transition: background .2s;
}
.billboard-dots button::after {
  content: ''; position: absolute; inset: 0; background: var(--gold); border-radius: 3px;
  transform-origin: left; transform: scaleX(0);
}
.billboard-dots button.active::after { animation: dot-progress 6s linear forwards; }
@keyframes dot-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.billboard-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(10,10,10,.55); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.1);
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, color .2s, transform .2s;
}
.billboard-arrow:hover { background: rgba(212,167,44,.18); color: var(--gold); transform: translateY(-50%) scale(1.08); }
.billboard-arrow.prev { left: 18px; }
.billboard-arrow.next { right: 18px; }
@media (max-width: 860px) {
  .billboard-grid { grid-template-columns: 1fr; text-align: center; padding: 44px 24px 60px; gap: 4px; min-height: 0; }
  .billboard-content-stack { order: 1; }
  .billboard-content.active { display: flex; flex-direction: column; align-items: center; }
  .billboard-content p { margin-left: auto; margin-right: auto; }
  .billboard-content h1 { font-size: 30px; }
  .billboard-proof { justify-content: center; }
  .billboard-showcase { order: -1; height: 260px; margin-bottom: 14px; }
  .showcase-glow { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
  .showcase-ring { width: 226px; height: 226px; margin: -113px 0 0 -113px; }
  .showcase-shadow { width: 120px; bottom: 4px; }
  .showcase-card.card-a { width: 156px; height: 194px; border-radius: 16px; }
  .showcase-card.card-b { width: 100px; height: 126px; border-radius: 14px; transform: translate(calc(-50% + 78px + var(--px)), calc(-50% - 58px + var(--py))) rotate(6deg); }
  .showcase-card.card-c { width: 92px; height: 116px; border-radius: 14px; transform: translate(calc(-50% - 82px + var(--px)), calc(-50% + 50px + var(--py))) rotate(-7deg); }
  .showcase-name { font-size: 10px; }
  .showcase-price { font-size: 11.5px; }
  .showcase-badge { font-size: 9px; padding: 4px 8px; }
  .billboard-scrollcue { display: none; }
  .billboard-arrow { display: none; }
}

/* Section kicker — small uppercase label above a section-head h2 */
.section-kicker {
  font-size: 11px; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; display: block;
}

/* ---------- Product Card ---------- */
.product-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column; position: relative;
  transition: border-color var(--trans), transform var(--trans-slow), box-shadow var(--trans-slow);
}
.product-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, rgba(212,167,44,.04) 0%, transparent 50%);
  opacity: 0; transition: opacity var(--trans);
}
.product-card:hover {
  border-color: rgba(212,167,44,.3); transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(212,167,44,.1);
}
.product-card:hover::before { opacity: 1; }
.product-card .thumb {
  aspect-ratio: 1/1; background: var(--panel-2);
  overflow: hidden; position: relative;
}
.product-card .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.product-card:hover .thumb img { transform: scale(1.08); }

/* Quick-add overlay */
.product-card .quick-add {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 12px; background: linear-gradient(0deg, rgba(8,8,8,.9) 0%, transparent 100%);
  transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; gap: 8px;
}
.product-card:hover .quick-add { transform: translateY(0); }
.quick-add .btn { flex: 1; height: 38px; font-size: 12px; padding: 0; }

.product-card .info { padding: 14px 16px 18px; flex: 1; display: flex; flex-direction: column; position: relative; z-index: 1; }
.product-card .brand-tag {
  font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--gold-dim); margin-bottom: 5px; font-weight: 600;
}
.product-card .name { font-size: 13.5px; font-weight: 500; margin-bottom: 8px; line-height: 1.3; }
.product-card .price {
  color: var(--gold); font-size: 14px; font-weight: 700; margin-top: auto;
  display: flex; align-items: center; gap: 8px;
}
.product-card .weight { font-size: 10.5px; color: var(--faint); margin-top: 3px; }

/* Series subgroup label */
.subgroup-label {
  font-size: 11px; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin: 40px 0 20px; padding: 0 0 10px;
  border-bottom: 1px solid rgba(212,167,44,.15);
  display: flex; align-items: center; gap: 12px;
}
.subgroup-label::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(212,167,44,.15), transparent);
}

/* ---------- Product carousel ---------- */
.carousel-wrap { position: relative; }
.carousel-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: 6px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; flex: 0 0 auto; width: 240px; }
/* V1.20 — Two carousels share these class names:
   (a) FLOATING arrows (homepage "New arrivals"): .carousel-arrow.prev/.next,
       absolutely positioned over the track edges.
   (b) INLINE arrows (Brands row, filter pills): plain .carousel-arrow
       sitting beside the track in the flex row — styled further down.
   The absolute positioning used to apply to BOTH, which is why the Brands
   arrow floated on top of the first logo. It is now scoped to (a) only. */
.carousel-arrow.prev, .carousel-arrow.next {
  position: absolute; top: 40%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(8,8,8,.85); border: 1px solid var(--border);
  color: var(--ink); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--trans), border-color var(--trans);
  backdrop-filter: blur(6px);
}
.carousel-arrow.prev:hover, .carousel-arrow.next:hover { background: rgba(212,167,44,.15); border-color: rgba(212,167,44,.35); color: var(--gold); }
.carousel-arrow.prev { left: -8px; }
.carousel-arrow.next { right: -8px; }
/* Floating arrows hide on phones (swipe instead); inline ones stay but shrink. */
@media (max-width: 720px) { .carousel-arrow.prev, .carousel-arrow.next { display: none; } }

/* ---------- Product grid (Featured Products) ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 18px;
}
@media (max-width: 1080px) { .product-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 860px)  { .product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; } }
@media (max-width: 560px)  { .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } }

/* Small corner ribbon — "Featured" / "New" tags on a product thumb */
.ribbon-tag {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; align-items: center; gap: 4px;
  background: rgba(212,167,44,.15); border: 1px solid rgba(212,167,44,.35);
  color: var(--gold); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  padding: 4px 8px; border-radius: 20px; backdrop-filter: blur(6px);
}
.ribbon-tag i { font-size: 10px; }
.ribbon-tag.new { background: rgba(76,175,80,.15); border-color: rgba(76,175,80,.4); color: var(--success); }

/* Wishlist heart — sits opposite the sport-icon badge, hidden until
   hover on desktop (and hidden while the "Featured"/"New" ribbon
   would overlap it), always visible on touch devices. */
.wishlist-btn {
  position: absolute; top: 46px; right: 10px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(8,8,8,.6); border: 1px solid rgba(255,255,255,.08);
  color: var(--ink); display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease;
  backdrop-filter: blur(6px);
}
.wishlist-btn i { font-size: 13px; }
.product-card:hover .wishlist-btn { opacity: 1; transform: translateY(0); }
.wishlist-btn.active { opacity: 1; transform: translateY(0); background: rgba(212,167,44,.18); border-color: rgba(212,167,44,.4); color: var(--gold); }
.wishlist-btn:hover { color: var(--gold); }
@media (hover: none) { .wishlist-btn { opacity: 1; transform: translateY(0); } }

/* Per-product "copy referral link" button — partner catalog only (partner/products.php) */
.pp-card .thumb { position: relative; }
.pp-link-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(8,8,8,.7); border: 1px solid var(--border);
  color: var(--gold); display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
  backdrop-filter: blur(6px);
}
.pp-link-btn i { font-size: 13px; }
.pp-card:hover .pp-link-btn { opacity: 1; transform: translateY(0); }
.pp-link-btn:hover { background: var(--gold); color: #141000; }
@media (hover: none) { .pp-link-btn { opacity: 1; transform: translateY(0); } }

/* ---------- Sport card with brand-logo cover ---------- */
.sport-card.has-logo { padding: 0; overflow: hidden; text-align: left; position: relative; }
.sport-card.has-logo .logo-panel {
  background: #ffffff; height: 118px; display: flex; align-items: center; justify-content: center; padding: 18px;
}
.sport-card.has-logo .logo-panel img { max-height: 56px; max-width: 78%; object-fit: contain; }
.sport-card.has-logo .body { padding: 16px 18px 18px; }
.sport-card.has-logo .title { margin: 0 0 3px; }
.sport-card.has-logo .ribbon {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: rgba(8,8,8,.75); color: var(--gold); font-size: 9.5px; font-weight: 700;
  letter-spacing: .4px; padding: 4px 9px; border-radius: 20px; text-transform: uppercase;
  border: 1px solid rgba(212,167,44,.3);
}

/* Animated entry */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-up { animation: fade-up .5s ease both; }
.animate-up:nth-child(1) { animation-delay: .05s; }
.animate-up:nth-child(2) { animation-delay: .10s; }
.animate-up:nth-child(3) { animation-delay: .15s; }
.animate-up:nth-child(4) { animation-delay: .20s; }
.animate-up:nth-child(5) { animation-delay: .25s; }

/* ---------- Product Detail ---------- */
.product-detail {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; padding: 32px 32px 80px;
  max-width: 1180px; margin: 0 auto;
}
.gallery-main {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-xl); aspect-ratio: 1/1;
  overflow: hidden; margin-bottom: 12px; position: relative; cursor: zoom-in;
}
.gallery-main img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}
.gallery-main:hover img { transform: scale(1.06); }
.gallery-main .zoom-hint {
  position: absolute; bottom: 14px; right: 14px;
  background: rgba(8,8,8,.7); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px; padding: 6px 10px;
  font-size: 10.5px; color: var(--faint);
  display: flex; align-items: center; gap: 5px;
  opacity: 0; transition: opacity var(--trans);
}
.gallery-main:hover .zoom-hint { opacity: 1; }

.gallery-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.gallery-thumbs .thumb-item {
  width: 68px; height: 68px; border-radius: 10px;
  overflow: hidden; background: var(--panel);
  border: 2px solid transparent; cursor: pointer;
  transition: border-color var(--trans), transform var(--trans);
  flex-shrink: 0;
}
.gallery-thumbs .thumb-item:hover   { transform: scale(1.05); border-color: rgba(212,167,44,.4); }
.gallery-thumbs .thumb-item.active  { border-color: var(--gold); }
.gallery-thumbs .thumb-item img { width: 100%; height: 100%; object-fit: cover; }

.pd-brand {
  color: var(--gold); font-size: 10.5px; letter-spacing: 1.5px;
  text-transform: uppercase; font-weight: 700; margin-bottom: 10px;
}
.pd-title { font-size: 28px; font-weight: 800; margin-bottom: 6px; line-height: 1.15; letter-spacing: -.2px; }
.pd-price {
  font-size: 28px; font-weight: 800; margin-bottom: 24px;
  background: linear-gradient(135deg, var(--ink), var(--gold-pale));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Specs accordion */
.specs { border-top: 1px solid var(--border); margin-top: 4px; }
.spec-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.03);
  font-size: 12.5px; transition: background var(--trans);
}
.spec-row:hover { background: var(--panel-2); margin: 0 -16px; padding: 12px 16px; border-radius: 6px; border-color: transparent; }
.spec-row .k { color: var(--faint); }
.spec-row .v { color: var(--ink); font-weight: 500; }

/* Qty control */
.qty-control {
  display: flex; align-items: center;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.qty-control button {
  width: 44px; height: 48px; font-size: 18px; color: var(--muted);
  transition: color var(--trans), background var(--trans);
}
.qty-control button:hover { color: var(--ink); background: var(--panel-3); }
.qty-control span {
  width: 48px; text-align: center; font-size: 15px; font-weight: 600;
  color: var(--ink); border-left: 1px solid var(--border);
  border-right: 1px solid var(--border); line-height: 48px;
}
.pd-cta { display: flex; gap: 12px; margin-top: 26px; }
.pd-cta .btn { flex: 1; height: 52px; font-size: 14px; letter-spacing: .3px; }

.pd-note {
  display: flex; align-items: center; gap: 9px;
  color: var(--faint); font-size: 11.5px; margin-top: 14px;
  padding: 10px 12px; background: var(--panel-2); border-radius: 8px;
}
.pd-note i { color: var(--gold); font-size: 14px; flex-shrink: 0; }

/* ---------- Image Lightbox ---------- */
.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.92);
  z-index: 500; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease; padding: 24px;
}
.lightbox-overlay.open { opacity: 1; pointer-events: all; }
.lightbox-overlay img {
  max-width: 90vw; max-height: 90vh; object-fit: contain;
  border-radius: var(--radius-lg);
  transform: scale(.92); transition: transform .3s ease;
}
.lightbox-overlay.open img { transform: scale(1); }
.lightbox-close {
  position: absolute; top: 20px; right: 24px;
  font-size: 28px; color: var(--muted); cursor: pointer;
  transition: color var(--trans), transform var(--trans);
}
.lightbox-close:hover { color: var(--ink); transform: rotate(90deg); }

/* ---------- Cart Drawer ---------- */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity .25s ease; backdrop-filter: blur(4px);
}
.cart-overlay.open { opacity: 1; pointer-events: all; }

/* ---------- Mobile Nav Drawer ---------- */
.mobile-nav-btn { display: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.header-actions .mobile-nav-btn { display: none; }
.mobile-nav-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity .25s ease; backdrop-filter: blur(4px);
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: all; }
.mobile-nav-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 84vw;
  background: var(--panel); border-right: 1px solid var(--border);
  z-index: 201; display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.mobile-nav-drawer.open { transform: translateX(0); }
.mobile-nav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px; border-bottom: 1px solid var(--border);
  font-size: 15px; font-weight: 700;
}
.mobile-nav-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; }
.mobile-nav-body a {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 600;
  color: var(--muted); transition: background var(--trans), color var(--trans);
}
.mobile-nav-body a:hover, .mobile-nav-body a.active { background: var(--panel-2); color: var(--gold); }
.mobile-nav-body a i { font-size: 16px; width: 18px; text-align: center; }
.mobile-nav-divider { height: 1px; background: var(--border); margin: 10px 4px; }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 430px; max-width: 100vw;
  background: var(--panel); border-left: 1px solid var(--border);
  z-index: 201; display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.cart-drawer.open { transform: translateX(0); }
.cart-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px; border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.cart-drawer-head h2 { font-size: 16px; font-weight: 700; }
.cart-drawer-body { flex: 1; overflow-y: auto; padding: 0; }
.cart-drawer-body::-webkit-scrollbar { width: 4px; }
.cart-drawer-body::-webkit-scrollbar-track { background: transparent; }
.cart-drawer-body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }

.cart-drawer-empty {
  text-align: center; padding: 64px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.cart-drawer-empty i { font-size: 40px; color: var(--border-2); }
.cart-drawer-empty p { color: var(--faint); font-size: 13.5px; }

.cart-item {
  display: flex; gap: 14px; padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background var(--trans);
}
.cart-item:hover { background: rgba(255,255,255,.02); }
.cart-item-img {
  width: 76px; height: 76px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--border);
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cart-item-name { font-size: 13px; font-weight: 600; }
.cart-item-meta { font-size: 11px; color: var(--faint); }
.cart-item-row  { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.cart-item-price { font-size: 13.5px; font-weight: 700; color: var(--gold); }
.cart-item-remove {
  font-size: 11px; color: var(--faint); transition: color var(--trans);
  display: flex; align-items: center; gap: 4px;
}
.cart-item-remove:hover { color: var(--danger); }

.cart-drawer-foot {
  padding: 20px 24px;
  background: var(--panel);
  border-top: 1px solid var(--border);
}
.cart-subtotal {
  display: flex; justify-content: space-between;
  font-size: 14px; margin-bottom: 16px;
}
.cart-subtotal .label { color: var(--muted); }
.cart-subtotal .val   { font-weight: 700; }

/* Qty mini */
.qty-mini {
  display: inline-flex; align-items: center;
  background: var(--panel-3); border: 1px solid var(--border);
  border-radius: 7px; overflow: hidden;
}
.qty-mini button {
  width: 30px; height: 30px; font-size: 14px; color: var(--muted);
  transition: color var(--trans), background var(--trans);
}
.qty-mini button:hover { color: var(--ink); background: var(--border); }
.qty-mini span {
  width: 34px; text-align: center; font-size: 13px;
  font-weight: 600; color: var(--ink);
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  line-height: 30px;
}

/* ---------- Cart Page ---------- */
.cart-page { padding: 36px 32px 80px; max-width: 1180px; margin: 0 auto; }
.cart-page h1 { font-size: 24px; font-weight: 700; margin-bottom: 30px; }
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; }

.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--faint); padding: 0 0 16px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.cart-table td {
  padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: middle;
}
.cart-table tr:last-child td { border-bottom: none; }
.cart-table tr { transition: background var(--trans); }
.cart-table tr:hover td { background: rgba(255,255,255,.01); }

.cart-summary {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 26px;
  position: sticky; top: 80px;
}
.cart-summary h2 { font-size: 15px; font-weight: 700; margin-bottom: 20px; }
.summary-row { display: flex; justify-content: space-between; font-size: 13px; padding: 8px 0; }
.summary-row .label { color: var(--muted); }
.summary-divider { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.summary-total .label { font-weight: 700; color: var(--ink); font-size: 14px; }
.summary-total .val   { font-weight: 800; color: var(--gold); font-size: 18px; }

/* ---------- Checkout ---------- */
.checkout-page { padding: 36px 32px 80px; max-width: 1180px; margin: 0 auto; }
.checkout-page h1 { font-size: 24px; font-weight: 700; margin-bottom: 30px; }
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 36px; align-items: start; }

.checkout-layout > div:first-child { counter-reset: checkout-step; }
.checkout-section {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 28px 26px; margin-bottom: 20px;
  transition: border-color var(--trans);
}
.checkout-section:focus-within { border-color: rgba(212,167,44,.25); }
.checkout-section h2 {
  font-size: 14px; font-weight: 700; margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.checkout-section h2::before {
  counter-increment: checkout-step; content: counter(checkout-step);
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: rgba(212,167,44,.12); border: 1px solid rgba(212,167,44,.3); color: var(--gold);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.checkout-section h2 i { color: var(--gold); font-size: 17px; }

.mpesa-logo {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  padding: 16px 18px; background: rgba(76,175,80,.06);
  border-radius: var(--radius); border: 1px solid rgba(76,175,80,.15);
}
.mpesa-logo .mpesa-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(76,175,80,.1); display: flex; align-items: center; justify-content: center;
}
.mpesa-logo .mpesa-icon i { font-size: 22px; color: #4CAF50; }
.mpesa-logo .label { font-size: 14px; font-weight: 700; color: #4CAF50; }
.mpesa-logo .sub   { font-size: 11px; color: var(--faint); }

/* Fulfillment / payment method radio cards */
.method-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.method-option { display: block; cursor: pointer; position: relative; }
.method-option input { position: absolute; opacity: 0; pointer-events: none; }
.method-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 14px; text-align: center; transition: border-color var(--trans), background var(--trans);
  position: relative;
}
.method-card i { font-size: 22px; color: var(--muted); display: block; margin-bottom: 8px; }
.method-card span { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.method-card small { display: block; font-size: 10.5px; color: var(--faint); }
.method-option input:checked + .method-card {
  border-color: var(--gold); background: rgba(212,167,44,.06);
}
.method-option input:checked + .method-card i { color: var(--gold); }
.method-option input:checked + .method-card::after {
  content: "✓"; font-size: 11px; font-weight: 700;
  position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); color: #1a1405; display: flex; align-items: center; justify-content: center;
}
@media (max-width: 560px) { .method-toggle { grid-template-columns: 1fr; } }

/* Delivery area autocomplete */
.area-results {
  display: none; position: relative; margin-top: 6px; max-height: 260px; overflow-y: auto;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 16px 32px -12px rgba(0,0,0,.5);
}
.area-result {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; cursor: pointer; font-size: 12.5px; border-bottom: 1px solid var(--border);
  transition: background var(--trans);
}
.area-result:last-child { border-bottom: none; }
.area-result:hover { background: rgba(212,167,44,.08); }
.area-result span { color: var(--ink); }
.area-result span small { color: var(--faint); font-size: 10.5px; margin-left: 4px; }
.area-result strong { color: var(--gold); font-weight: 700; white-space: nowrap; margin-left: 12px; }
.area-result-empty { padding: 14px; font-size: 12px; color: var(--faint); text-align: center; }
.area-selected {
  align-items: center; justify-content: space-between; margin-top: 6px;
  background: rgba(212,167,44,.06); border: 1px solid rgba(212,167,44,.25);
  border-radius: 10px; padding: 10px 14px; font-size: 12.5px; color: var(--ink);
}
.area-selected small { color: var(--faint); font-size: 10.5px; }
.area-selected button {
  background: none; border: none; color: var(--gold); font-size: 11.5px; font-weight: 600;
  cursor: pointer; text-decoration: underline;
}

.order-summary-side {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 26px;
  position: sticky; top: 80px;
}
.order-summary-side h2 { font-size: 14px; font-weight: 700; margin-bottom: 20px; }
.checkout-item { display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start; }
.checkout-item-img {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 9px;
  overflow: hidden; background: var(--panel-2); border: 1px solid var(--border);
}
.checkout-item-img img { width: 100%; height: 100%; object-fit: cover; }
.checkout-item-name  { font-size: 12.5px; font-weight: 600; }
.checkout-item-sub   { font-size: 11px; color: var(--faint); }
.checkout-item-price { font-size: 12.5px; font-weight: 700; color: var(--gold); margin-left: auto; flex-shrink: 0; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block; font-size: 11.5px; color: var(--muted);
  margin-bottom: 7px; font-weight: 600; letter-spacing: .2px;
  text-transform: uppercase;
}
.form-control {
  width: 100%; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--ink); font-size: 13.5px; padding: 13px 15px;
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
  outline: none;
}
.form-control::placeholder { color: var(--faint); }
.form-control:focus {
  border-color: rgba(212,167,44,.4); background: var(--panel-3);
  box-shadow: 0 0 0 3px rgba(212,167,44,.08);
}
.form-control:focus::placeholder { opacity: .5; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-hint  { font-size: 11px; color: var(--faint); margin-top: 5px; }

/* ---------- Password strength meter (interactive) ---------- */
.pw-meter {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .28s ease, opacity .2s ease, margin-top .28s ease;
}
.pw-meter.show { max-height: 160px; opacity: 1; margin-top: 12px; }

.pw-segments { display: flex; gap: 4px; }
.pw-segments span {
  flex: 1; height: 4px; border-radius: 3px;
  background: var(--panel-2); border: 1px solid var(--border);
  transition: background .25s ease, border-color .25s ease;
}
.pw-meter[data-level="1"] .pw-segments span:nth-child(1) { background: #d9534f; border-color: #d9534f; }
.pw-meter[data-level="2"] .pw-segments span:nth-child(-n+2) { background: var(--gold-dark); border-color: var(--gold-dark); }
.pw-meter[data-level="3"] .pw-segments span:nth-child(-n+3) { background: var(--gold); border-color: var(--gold); }
.pw-meter[data-level="4"] .pw-segments span:nth-child(-n+4) { background: #4caf80; border-color: #4caf80; }

.pw-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; margin-top: 7px; color: var(--faint);
}
.pw-meter[data-level="1"] .pw-status { color: #d9534f; }
.pw-meter[data-level="2"] .pw-status { color: var(--gold-dark); }
.pw-meter[data-level="3"] .pw-status { color: var(--gold); }
.pw-meter[data-level="4"] .pw-status { color: #4caf80; }
.pw-status svg { width: 12px; height: 12px; display: none; }
.pw-meter.complete .pw-status svg { display: block; }

.pw-checks {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
  transition: max-height .2s ease, opacity .2s ease, margin .2s ease;
}
.pw-meter.complete .pw-checks {
  max-height: 0; opacity: 0; margin: 0; overflow: hidden; pointer-events: none;
}
.pw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 500; color: var(--faint);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 10px 5px 8px;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.pw-chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--faint); transition: background .2s ease, transform .2s ease;
}
.pw-chip.ok {
  color: #bfe8cf; background: rgba(76,175,128,.08); border-color: rgba(76,175,128,.3);
}
.pw-chip.ok::before { background: #4caf80; transform: scale(1.15); }

.pw-match { font-size: 11px; margin-top: 8px; color: var(--faint); display: flex; align-items: center; gap: 6px; }
.pw-match::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.pw-match.ok  { color: #4caf80; }
.pw-match.ok::before { background: #4caf80; }
.pw-match.bad { color: #d9534f; }
.pw-match.bad::before { background: #d9534f; }

/* ── Dynamic spec rows (admin product form) ──────────────── */
.spec-row-edit { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; margin-bottom: 10px; align-items: center; }
.spec-row-edit .btn-icon { flex-shrink: 0; }

/* ── Hero slides admin list ──────────────────────────────── */
.hero-slide-row {
  display: flex; align-items: center; gap: 16px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px;
}
.hero-slide-row.is-inactive { opacity: .5; }
.hero-slide-row .hs-visual {
  width: 84px; height: 54px; border-radius: 7px; overflow: hidden; flex-shrink: 0;
  background: var(--panel-3); display: flex; align-items: center; justify-content: center;
}
.hero-slide-row .hs-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide-row .hs-visual i { font-size: 24px; color: var(--gold); }
.hero-slide-row .hs-body { flex: 1; min-width: 0; }
.hero-slide-row .hs-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--gold-dim); margin-bottom: 2px; }
.hero-slide-row .hs-heading { font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.hero-slide-row .hs-sub { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-slide-row .hs-actions { display: flex; gap: 6px; flex-shrink: 0; }
.hero-slide-row .hs-actions form { display: inline; }
.form-error { font-size: 11.5px; color: var(--danger); margin-top: 5px; }
.field-icon { position: relative; }
.field-icon .form-control { padding-left: 42px; }
.field-icon i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--faint); font-size: 16px; pointer-events: none;
  transition: color var(--trans);
}
.field-icon:focus-within i { color: var(--gold-dim); }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23525050' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

/* ---------- Auth Pages ---------- */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px 20px; position: relative;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212,167,44,.06) 0%, transparent 60%);
}
.auth-card {
  width: 100%; max-width: 460px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 44px 40px;
  box-shadow: var(--shadow);
}
.auth-card .auth-logo { text-align: center; margin-bottom: 32px; }
.auth-card .auth-logo img {
  height: 38px; margin: 0 auto 10px; border-radius: 8px;
  transition: transform var(--trans);
}
.auth-card .auth-logo img:hover { transform: scale(1.05) rotate(-3deg); }
.auth-card .auth-logo span { display: block; font-size: 15px; font-weight: 700; color: var(--muted); }
.auth-card h1 { font-size: 22px; font-weight: 800; margin-bottom: 6px; text-align: center; }
.auth-card .sub { color: var(--muted); font-size: 13px; text-align: center; margin-bottom: 30px; }
.auth-switch { text-align: center; font-size: 13px; color: var(--faint); margin-top: 22px; }
.auth-switch a { color: var(--gold); font-weight: 600; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 4px 0 22px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-divider span { font-size: 11.5px; color: var(--faint); white-space: nowrap; }

/* ---------- Alerts ---------- */
.alert {
  padding: 14px 16px; border-radius: var(--radius); font-size: 13px;
  margin-bottom: 18px; display: flex; align-items: center; gap: 10px;
  animation: fade-up .2s ease;
}
.alert i { font-size: 16px; flex-shrink: 0; }
.alert-success { background: rgba(76,175,128,.1); border: 1px solid rgba(76,175,128,.2); color: var(--success); }
.alert-danger  { background: rgba(224,82,82,.08);  border: 1px solid rgba(224,82,82,.2);  color: var(--danger); }
.alert-info    { background: rgba(212,167,44,.08); border: 1px solid rgba(212,167,44,.18); color: var(--gold); }

/* ---------- Toast ---------- */
.toast-stack { position: fixed; bottom: 28px; right: 28px; z-index: 999; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--panel-2); border: 1px solid var(--border-2);
  border-radius: var(--radius-lg); padding: 14px 18px;
  font-size: 13px; display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow); min-width: 270px; max-width: 360px;
  animation: toast-in .3s cubic-bezier(.34,1.56,.64,1);
}
.toast.removing { animation: toast-out .2s ease forwards; }
.toast i { font-size: 17px; flex-shrink: 0; }
.toast.toast-success i { color: var(--success); }
.toast.toast-danger  i { color: var(--danger); }
.toast.toast-info    i { color: var(--gold); }
@keyframes toast-in  { from { opacity:0; transform: translateX(20px) scale(.9); } to { opacity:1; transform: none; } }
@keyframes toast-out { to   { opacity:0; transform: translateX(20px) scale(.9); } }

/* ---------- M-Pesa Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.8);
  backdrop-filter: blur(8px);
  z-index: 300; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 40px 36px;
  width: 100%; max-width: 460px; text-align: center;
  box-shadow: var(--shadow);
  transform: scale(.92) translateY(16px);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.modal-overlay.open .modal { transform: none; }
.modal-icon { font-size: 44px; margin-bottom: 16px; display: block; animation: bounce-in .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes bounce-in { from { transform: scale(0); } to { transform: scale(1); } }
.modal h2 { font-size: 20px; font-weight: 800; margin-bottom: 10px; }
.modal p  { color: var(--muted); font-size: 14px; line-height: 1.7; margin-bottom: 24px; }
.modal-spinner {
  width: 38px; height: 38px; border: 3px solid var(--border-2);
  border-top-color: var(--gold); border-radius: 50%;
  animation: spin .7s linear infinite; margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Account Pages ---------- */
.account-page { padding: 36px 32px 80px; max-width: 1180px; margin: 0 auto; }
.account-layout { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.account-sidebar {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-xl); overflow: hidden;
  position: sticky; top: 80px;
}
.account-sidebar .user-info {
  padding: 22px 22px 18px; border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--panel-2) 0%, var(--panel) 100%);
}
.account-sidebar .user-info .avatar {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(212,167,44,.12); border: 1px solid rgba(212,167,44,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: var(--gold); margin-bottom: 10px;
}
.account-sidebar .user-info .name  { font-size: 14px; font-weight: 700; }
.account-sidebar .user-info .email { font-size: 11px; color: var(--faint); margin-top: 2px; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 22px; font-size: 13px; color: var(--muted);
  transition: color var(--trans), background var(--trans);
  border-left: 3px solid transparent;
}
.sidebar-nav a i { font-size: 16px; flex-shrink: 0; }
.sidebar-nav a:hover { color: var(--ink); background: rgba(255,255,255,.02); }
.sidebar-nav a.active {
  color: var(--gold); background: rgba(212,167,44,.06);
  border-left-color: var(--gold);
}

.account-content {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 30px;
}
.account-content h2 { font-size: 18px; font-weight: 700; margin-bottom: 24px; }

/* Orders list */
.orders-list { display: flex; flex-direction: column; gap: 10px; }
.order-row {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px;
  display: flex; align-items: center; gap: 16px;
  transition: border-color var(--trans), transform var(--trans);
  cursor: pointer;
}
.order-row:hover { border-color: rgba(212,167,44,.25); transform: translateX(3px); }
.order-row .order-id   { font-size: 11.5px; font-weight: 700; color: var(--gold); min-width: 110px; }
.order-row .order-date { font-size: 12px; color: var(--faint); }
.order-row .order-total{ font-size: 13.5px; font-weight: 700; margin-left: auto; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; padding: 4px 10px;
  border-radius: 20px; text-transform: uppercase; letter-spacing: .4px;
}
.badge-pending   { background: rgba(212,167,44,.12); color: var(--gold); border: 1px solid rgba(212,167,44,.2); }
.badge-paid      { background: rgba(76,175,128,.1);  color: var(--success); border: 1px solid rgba(76,175,128,.2); }
.badge-shipped   { background: rgba(100,160,255,.1); color: #6ca0f5; border: 1px solid rgba(100,160,255,.2); }
.badge-delivered { background: rgba(76,175,128,.15); color: var(--success); border: 1px solid rgba(76,175,128,.25); }
.badge-cancelled,.badge-failed { background: rgba(224,82,82,.1); color: var(--danger); border: 1px solid rgba(224,82,82,.2); }
.badge-processing{ background: rgba(100,200,255,.1); color: #64c8ff; border: 1px solid rgba(100,200,255,.2); }
.badge-expired   { background: rgba(224,82,82,.1);  color: var(--danger);  border: 1px solid rgba(224,82,82,.2); }
.badge-exhausted { background: rgba(212,167,44,.12); color: var(--gold);   border: 1px solid rgba(212,167,44,.2); }
.badge-disabled  { background: rgba(136,132,128,.1); color: var(--muted); border: 1px solid rgba(136,132,128,.2); }
.badge-confirmed,.badge-active { background: rgba(100,160,255,.1); color: #6ca0f5; border: 1px solid rgba(100,160,255,.2); }
.badge-suspended { background: rgba(224,82,82,.1); color: var(--danger); border: 1px solid rgba(224,82,82,.2); }

/* ---------- Admin Dashboard ---------- */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; overflow-y: auto;
}
.admin-sidebar .sidebar-brand {
  position: relative;
  padding: 22px 22px 18px; border-bottom: 1px solid var(--border);
}
.admin-sidebar .sidebar-brand .label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--faint); margin-top: 6px;
}
.admin-sidebar-close { display: none; }
.admin-sidebar .sidebar-brand .admin-sidebar-close {
  position: absolute; top: 18px; right: 16px;
}
.admin-sidebar .sidebar-nav { padding: 8px 0; flex: 1; }
.admin-sidebar .sidebar-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 22px; font-size: 13px; color: var(--muted);
  transition: color var(--trans), background var(--trans);
  border-left: 3px solid transparent;
}
.admin-sidebar .sidebar-nav a i { font-size: 17px; flex-shrink: 0; }
.admin-sidebar .sidebar-nav a:hover { color: var(--ink); background: rgba(255,255,255,.02); }
.admin-sidebar .sidebar-nav a.active { color: var(--gold); background: rgba(212,167,44,.06); border-left-color: var(--gold); }
.admin-sidebar .sidebar-nav .nav-label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--faint); padding: 16px 22px 6px;
}

.admin-sidebar-btn { display: none; }
.admin-sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65);
  z-index: 199; opacity: 0; pointer-events: none;
  transition: opacity .25s ease; backdrop-filter: blur(4px);
}
.admin-sidebar-overlay.open { opacity: 1; pointer-events: all; }

.admin-main { margin-left: 240px; flex: 1; min-width: 0; }
.admin-topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(8,8,8,.95); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 32px; height: 60px;
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
}
.admin-topbar h1 { font-size: 16px; font-weight: 700; flex: 1; }
.admin-body { padding: 28px 32px; }

.stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 28px; }
.stat-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px 22px; position: relative; overflow: hidden;
  transition: border-color var(--trans), transform var(--trans);
}
.stat-card:hover { border-color: rgba(212,167,44,.2); transform: translateY(-2px); }
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212,167,44,.3), transparent);
}
.stat-card .stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); margin-bottom: 12px; }
.stat-card .stat-val   { font-size: 28px; font-weight: 800; margin-bottom: 4px; }
.stat-card .stat-sub   { font-size: 11.5px; color: var(--faint); }
.stat-card .stat-icon  { position: absolute; right: 18px; top: 18px; font-size: 24px; color: var(--gold-dim); opacity: .6; }

/* Stat card color variants — ties each metric's icon, top accent, and
   value color to what kind of number it is, so the dashboard reads at
   a glance instead of everything defaulting to the same gold. */
.stat-card.stat-success::before { background: linear-gradient(90deg, transparent, rgba(76,175,128,.45), transparent); }
.stat-card.stat-success .stat-icon { color: var(--success); }
.stat-card.stat-success .stat-val  { color: var(--success); }

.stat-card.stat-info::before { background: linear-gradient(90deg, transparent, rgba(108,160,245,.45), transparent); }
.stat-card.stat-info .stat-icon { color: var(--info); }
.stat-card.stat-info .stat-val  { color: var(--info); }

.stat-card.stat-warning::before { background: linear-gradient(90deg, transparent, rgba(212,167,44,.5), transparent); }
.stat-card.stat-warning .stat-icon { color: var(--gold); opacity: .85; }
.stat-card.stat-warning .stat-val  { color: var(--gold); }

.stat-card.stat-danger::before { background: linear-gradient(90deg, transparent, rgba(224,82,82,.45), transparent); }
.stat-card.stat-danger .stat-icon { color: var(--danger); }
.stat-card.stat-danger .stat-val  { color: var(--danger); }

/* Trend chip on a stat card — "+12% vs last week" style comparison */
.stat-trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  margin-left: 6px; vertical-align: middle;
}
.stat-trend.up   { color: var(--success); background: rgba(76,175,128,.12); }
.stat-trend.down { color: var(--danger);  background: rgba(224,82,82,.12); }
.stat-trend.flat { color: var(--faint);   background: rgba(255,255,255,.04); }
.stat-trend i { font-size: 12px; }

/* ── Dashboard charts ─────────────────────────────────────── */
.charts-grid {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 20px;
}
.chart-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 22px;
}
.chart-card h2 { font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.chart-card .chart-sub { font-size: 11.5px; color: var(--faint); margin-bottom: 16px; }
.chart-card .chart-canvas-wrap { position: relative; height: 220px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.chart-legend i.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.chart-empty { display: flex; align-items: center; justify-content: center; height: 220px; color: var(--faint); font-size: 12.5px; text-align: center; }

/* ── Sortable table headers ──────────────────────────────── */
.data-table th.sortable { cursor: pointer; user-select: none; transition: color var(--trans); }
.data-table th.sortable:hover { color: var(--muted); }
.data-table th.sortable .sort-arrow { display: inline-block; margin-left: 3px; opacity: .35; font-size: 9px; transition: opacity var(--trans), color var(--trans); }
.data-table th.sortable.sort-active .sort-arrow { opacity: 1; color: var(--gold); }

/* ── Live-region loading state (AJAX search/filter/sort swap) ── */
.live-region { position: relative; transition: opacity .15s ease; }
.live-region.is-loading { opacity: .45; pointer-events: none; }
.live-region-spinner {
  position: absolute; top: 14px; right: 20px; width: 16px; height: 16px;
  border: 2px solid var(--border-2); border-top-color: var(--gold);
  border-radius: 50%; animation: spin .7s linear infinite; display: none; z-index: 2;
}
.live-region.is-loading .live-region-spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Instant toggle switch (replaces plain icon-only active/inactive
   buttons where an action now fires over AJAX instead of a page reload) ── */
.ajax-toggle {
  position: relative; width: 34px; height: 20px; border-radius: 20px;
  background: var(--panel-3); border: 1px solid var(--border-2);
  cursor: pointer; flex-shrink: 0; transition: background var(--trans), border-color var(--trans);
}
.ajax-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--faint); transition: transform var(--trans), background var(--trans);
}
.ajax-toggle.is-on { background: rgba(76,175,128,.15); border-color: rgba(76,175,128,.4); }
.ajax-toggle.is-on::after { transform: translateX(14px); background: var(--success); }
.ajax-toggle.is-busy { opacity: .5; pointer-events: none; }

/* ── Quick-view slide-over panel ─────────────────────────── */
.quickview-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  opacity: 0; pointer-events: none; transition: opacity var(--trans); z-index: 300;
}
.quickview-overlay.open { opacity: 1; pointer-events: all; }
.quickview-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw;
  background: var(--panel); border-left: 1px solid var(--border-2);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  z-index: 301; display: flex; flex-direction: column; box-shadow: var(--shadow);
}
.quickview-overlay.open .quickview-panel { transform: translateX(0); }
.quickview-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.quickview-head h2 { font-size: 15px; font-weight: 700; }
.quickview-body { flex: 1; overflow-y: auto; padding: 20px 22px; }
.quickview-body .qv-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.03); }
.quickview-body .qv-row span:first-child { color: var(--faint); }
.quickview-loading { display: flex; align-items: center; justify-content: center; padding: 60px 0; color: var(--faint); font-size: 12.5px; gap: 8px; }
.quickview-foot { padding: 16px 22px; border-top: 1px solid var(--border); flex-shrink: 0; }

/* Order-status row accents — a thin left border on the first cell of
   each row, using the same colors as the status badges, so a queue of
   orders can be scanned by color before reading a single word. (Set on
   the cell, not the <tr> — border-collapse on .data-table would hide a
   border painted on the row itself.) */
.data-table tbody tr[data-status] td:first-child { border-left: 3px solid transparent; }
.data-table tbody tr[data-status="pending"]    td:first-child { border-left-color: var(--gold); }
.data-table tbody tr[data-status="processing"] td:first-child { border-left-color: #64c8ff; }
.data-table tbody tr[data-status="shipped"]    td:first-child { border-left-color: var(--info); }
.data-table tbody tr[data-status="delivered"]  td:first-child { border-left-color: var(--success); }
.data-table tbody tr[data-status="cancelled"]  td:first-child { border-left-color: var(--danger); }

.data-table-wrap {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.data-table-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--border);
}
.data-table-head h2 { font-size: 14px; font-weight: 700; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--faint); padding: 14px 24px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.data-table td {
  padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,.03);
  font-size: 13px; vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background var(--trans); }
.data-table tbody tr:hover td { background: rgba(255,255,255,.02); }
.data-table .actions { display: flex; align-items: center; gap: 6px; }

/* ── Product admin card grid ─────────────────────────────── */
.product-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.product-admin-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color var(--trans), transform var(--trans);
}
.product-admin-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.product-admin-card.is-inactive { opacity: .55; }
.product-admin-card .thumb { position: relative; aspect-ratio: 1/1; background: #fff; }
.product-admin-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-admin-card .flag { position: absolute; left: 8px; top: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 3px 7px; border-radius: 5px; }
.product-admin-card .flag-inactive { background: rgba(0,0,0,.7); color: #fff; }
.product-admin-card .flag-btn { position: absolute; right: 6px; top: 6px; margin: 0; }
.product-admin-card .flag-btn button {
  background: rgba(0,0,0,.55); border: none; border-radius: 50%;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px; transition: background var(--trans);
}
.product-admin-card .flag-btn button:hover { background: rgba(0,0,0,.75); }
.product-admin-card .body { padding: 12px 13px 13px; }
.product-admin-card .series { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--gold-dim); margin-bottom: 3px; }
.product-admin-card .name { font-size: 13px; font-weight: 600; line-height: 1.3; margin-bottom: 5px; min-height: 34px; }
.product-admin-card .price { font-size: 13px; font-weight: 700; color: var(--gold); }
.product-admin-card .price .weight { font-size: 11px; font-weight: 400; color: var(--faint); margin-left: 4px; }
.product-admin-card .meta { font-size: 10.5px; color: var(--faint); margin-top: 4px; }
.product-admin-card .meta.stock-low { color: #e0a04a; font-weight: 600; }
.product-admin-card .meta.stock-out { color: var(--danger); font-weight: 600; }
.product-admin-card .row-actions { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.product-admin-card .row-actions a,
.product-admin-card .row-actions button {
  flex: 1; display: flex; align-items: center; justify-content: center;
  height: 28px; border-radius: 6px; background: var(--panel-3); border: 1px solid var(--border);
  color: var(--faint); cursor: pointer; transition: color var(--trans), border-color var(--trans);
  font-size: 13px;
}
.product-admin-card .row-actions a:hover,
.product-admin-card .row-actions button:hover { color: var(--gold); border-color: rgba(212,167,44,.3); }

.admin-form {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px;
}
.admin-form h2 { font-size: 16px; font-weight: 700; margin-bottom: 24px; }

.pagination { display: flex; gap: 5px; align-items: center; padding: 16px 24px; }
.page-btn {
  min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--border);
  transition: color var(--trans), border-color var(--trans), background var(--trans);
}
.page-btn:hover { color: var(--ink); border-color: var(--border-2); background: var(--panel-3); }
.page-btn.active { color: var(--gold); border-color: rgba(212,167,44,.4); background: rgba(212,167,44,.06); }

/* ---------- Coming Soon ---------- */
.coming-soon-page {
  min-height: 80vh; display: flex; align-items: center; justify-content: center;
  padding: 60px 32px; text-align: center; position: relative; overflow: hidden;
}
.coming-soon-page .cs-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(212,167,44,.05) 0%, transparent 65%);
}
.coming-soon-page .cs-content { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; }
.coming-soon-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(212,167,44,.1); border: 1px solid rgba(212,167,44,.2);
  border-radius: 20px; padding: 7px 16px; font-size: 11px;
  font-weight: 700; color: var(--gold); letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 24px;
}
.coming-soon-page h1 {
  font-size: 42px; font-weight: 800; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--ink) 0%, var(--muted) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.coming-soon-page p { color: var(--muted); font-size: 15px; line-height: 1.75; margin-bottom: 32px; }

/* Notify form */
.notify-form {
  display: flex; gap: 10px; max-width: 380px; margin: 0 auto 28px;
}
.notify-form input {
  flex: 1; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--ink); font-size: 13.5px;
  padding: 13px 16px; outline: none; font-family: inherit;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.notify-form input:focus { border-color: rgba(212,167,44,.4); box-shadow: 0 0 0 3px rgba(212,167,44,.08); }
.notify-form input::placeholder { color: var(--faint); }

/* Countdown timer */
.countdown { display: flex; gap: 20px; justify-content: center; margin: 32px 0; }
.countdown-item { text-align: center; }
.countdown-num {
  display: block; font-size: 40px; font-weight: 800; color: var(--gold);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.countdown-label { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .8px; margin-top: 4px; }
.countdown-sep { font-size: 32px; font-weight: 700; color: var(--border-2); padding-top: 2px; }

/* Progress bar */
.progress-bar {
  width: 100%; height: 3px; background: var(--border);
  border-radius: 3px; overflow: hidden; margin: 0 0 32px;
}
.progress-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  animation: progress-glow 2s ease-in-out infinite alternate;
}
@keyframes progress-glow {
  from { box-shadow: 0 0 6px rgba(212,167,44,.4); }
  to   { box-shadow: 0 0 14px rgba(212,167,44,.8); }
}

/* ---------- Search Page ---------- */
.search-page { padding: 36px 32px 80px; max-width: 1180px; margin: 0 auto; }
.search-bar {
  position: relative; margin-bottom: 40px;
}
.search-bar input {
  width: 100%; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-xl); color: var(--ink); font-size: 18px;
  padding: 20px 60px 20px 24px; outline: none; font-family: inherit;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.search-bar input:focus { border-color: rgba(212,167,44,.4); box-shadow: 0 0 0 4px rgba(212,167,44,.07); }
.search-bar input::placeholder { color: var(--faint); }
.search-bar button {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-size: 22px; background: none; border: none; cursor: pointer;
  transition: transform var(--trans);
}
.search-bar button:hover { transform: translateY(-50%) scale(1.1); }

/* ---------- Empty State ---------- */
.empty-state { text-align: center; padding: 80px 32px; }
.empty-state i { font-size: 44px; color: var(--border-2); display: block; margin-bottom: 18px; }
.empty-state h2 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.empty-state p  { color: var(--muted); font-size: 14px; max-width: 360px; margin: 0 auto 22px; line-height: 1.6; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid rgba(255,255,255,.04);
  padding: 52px 32px 32px; margin-top: 24px; position: relative;
}
.site-footer::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,167,44,.15), transparent);
}
.footer-inner { max-width: 1180px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer-brand-mark { display: flex; align-items: center; gap: 10px; }
.footer-brand-mark img { height: 32px; width: 32px; object-fit: cover; border-radius: 7px; flex-shrink: 0; }
.footer-brand-mark span {
  font-size: 14px; font-weight: 700; letter-spacing: .3px;
  background: linear-gradient(135deg, var(--ink) 0%, var(--gold-pale) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.footer-brand p { font-size: 12.5px; color: var(--faint); line-height: 1.7; max-width: 240px; margin-top: 12px; }
.footer-col h4 {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); margin-bottom: 16px;
}
.footer-col a {
  display: block; font-size: 12.5px; color: var(--faint);
  margin-bottom: 10px; transition: color var(--trans), transform var(--trans);
}
.footer-col a:hover { color: var(--gold); transform: translateX(3px); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.04);
  flex-wrap: wrap; gap: 14px;
}
.footer-trust { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-trust span {
  color: var(--faint); font-size: 11.5px; display: flex; align-items: center; gap: 6px;
}
.footer-trust i { color: var(--gold); font-size: 13px; }
.footer-copy { color: var(--faint); font-size: 11.5px; }

/* ---------- Dividers & misc ---------- */
.divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.skeleton {
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 6px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .main-nav { display: none; }
  .header-actions .mobile-nav-btn { display: flex; }
  .hero h1  { font-size: 34px; }
  .grid-4   { grid-template-columns: repeat(2,1fr); }
  .grid-3   { grid-template-columns: repeat(2,1fr); }
  .grid-5   { grid-template-columns: repeat(3,1fr); }
  .product-detail  { grid-template-columns: 1fr; gap: 30px; }
  .cart-layout     { grid-template-columns: 1fr; }
  .checkout-layout { grid-template-columns: 1fr; }
  .account-layout  { grid-template-columns: 1fr; }
  .account-sidebar { position: static; }
  .admin-sidebar   { display: flex; transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1); z-index: 201; }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-sidebar-close { display: flex; }
  .admin-sidebar-btn   { display: flex; }
  .admin-sidebar-overlay { display: block; }
  .admin-main      { margin-left: 0; }
  .admin-body      { padding: 20px 16px; }
  .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table      { min-width: 640px; }
  .charts-grid     { grid-template-columns: 1fr; }
  .quickview-panel { width: 100%; max-width: 100vw; }
  .footer-grid     { grid-template-columns: 1fr; gap: 28px; }
  .trust-strip     { gap: 0; }
  .trust-item      { padding: 16px; border-right: none; border-bottom: 1px solid rgba(255,255,255,.05); }

  /* Catch-all for inline `style="grid-template-columns:..."` — used
     throughout admin forms, the partner portal, and a couple of
     storefront pages (About, Contact) for layouts that were only ever
     designed for desktop width. Inline styles always beat a stylesheet
     rule, @media or not, so these were silently ignoring every
     responsive rule above — a fixed 380px sidebar column literally
     cannot fit next to anything on a phone. Forcing every one of them
     to a single column here is correct in every case they're used for
     (a form row, a two-panel layout, a stats strip) and — since this
     targets the attribute rather than a specific page — automatically
     covers any new inline grid added later too, with no CSS edit
     needed. Prefer a real class (.grid-2/3/4, .stats-grid) over an
     inline style for anything new where you actually want deliberate
     control over its mobile behaviour instead of this default.       */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  /* V1.19 — phone header. The 32px side padding + full brand name + four
     42px icons was wider than a ~360px screen, so the burger button was
     pushed past the edge and clipped by body{overflow-x:hidden} — it was
     there but off-screen/untappable. Tighten it so everything fits and let
     the brand name shrink instead of the icons. */
  .header-inner { padding: 0 12px; gap: 6px; }
  .brand { min-width: 0; flex-shrink: 1; gap: 8px; }
  .brand span { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .header-actions { flex-shrink: 0; gap: 0; }
  .header-actions .icon-btn { width: 40px; height: 40px; font-size: 18px; }
  .wrap, .section, .cart-page, .checkout-page, .account-page, .admin-body, .product-detail { padding-left: 18px; padding-right: 18px; }
  .hero { padding: 72px 18px 60px; }
  .hero h1 { font-size: 28px; }
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .mobile-nav-drawer { width: 260px; }
  .cart-drawer { width: 100vw; }
  .auth-card   { padding: 32px 22px; }
  .countdown-num { font-size: 28px; }
}

/* ============================================================
   Admin — bulk-select toolbar + generic form modal
   Shared by customers / orders / shipping / coupons admin pages.
   ============================================================ */
.bulk-row-check, .bulk-select-all { width: 15px; height: 15px; accent-color: var(--gold); cursor: pointer; }
.bulk-bar {
  display: none; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 24px; background: rgba(212,167,44,.07); border-bottom: 1px solid var(--border);
  font-size: 12.5px; color: var(--ink);
}
.bulk-bar .bulk-count { font-weight: 700; color: var(--gold); }
.bulk-bar .btn-sm { padding: 6px 14px; font-size: 12px; }

.admin-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75); backdrop-filter: blur(6px);
  z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.admin-modal-overlay.open { opacity: 1; pointer-events: all; }
.admin-modal {
  position: relative;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 28px 26px; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
  box-shadow: var(--shadow); transform: scale(.95) translateY(10px); transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.admin-modal-overlay.open .admin-modal { transform: none; }
.admin-modal h2 { font-size: 16px; font-weight: 700; margin-bottom: 18px; }
.admin-modal .modal-close {
  position: absolute; top: 18px; right: 22px; background: none; border: none; color: var(--faint);
  cursor: pointer; font-size: 18px;
}

/* ---------- Carousel (filter pills, "Newest Arrivals" rows) ---------- */
.carousel-wrap { position: relative; display: flex; align-items: center; gap: 6px; }
.carousel-track {
  display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none;
  flex: 1; min-width: 0;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; flex-shrink: 0; }
.carousel-arrow {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: color var(--trans), border-color var(--trans), opacity var(--trans);
}
.carousel-arrow:hover:not(:disabled) { color: var(--gold); border-color: rgba(212,167,44,.3); }
.carousel-arrow:disabled { opacity: .3; cursor: default; }
@media (max-width: 560px) { .carousel-wrap { gap: 4px; } .carousel-wrap > .carousel-arrow:not(.prev):not(.next) { width: 30px; height: 30px; } }

.carousel-section { padding: 32px 32px 4px; }
.carousel-section .section-head { max-width: 1180px; margin: 0 auto 16px; }
.carousel-section .carousel-wrap { max-width: 1180px; margin: 0 auto; }
.carousel-product-card { width: 200px; }
@media (max-width: 640px) { .carousel-product-card { width: 158px; } }

/* ---------- Brand logo chips ("Brands We Work With") ---------- */
/* V1.19 — every chip is the same fixed box. The logo is stretched to
   FILL that box's content area (width/height 100%) and object-fit:
   contain keeps its proportions — so a small logo is scaled UP to fit
   and a large one is scaled DOWN, instead of each rendering at its own
   natural pixel size (which is what made some look zoomed out and
   others zoomed in). Never crops, never distorts. */
.brand-chip {
  display: flex; align-items: center; justify-content: center;
  width: 168px; height: 96px; flex-shrink: 0; box-sizing: border-box;
  background: #ffffff; border-radius: 12px; padding: 12px; overflow: hidden;
  transition: transform var(--trans), box-shadow var(--trans);
}
.brand-chip img {
  display: block; width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: contain; object-position: center;
}
a.brand-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
@media (max-width: 640px) { .brand-chip { width: 128px; height: 76px; padding: 9px; } }

@media (max-width: 340px) { .brand span { display: none; } }

/* ============================================================
   V1.20 — Mobile polish
   ============================================================ */
@media (max-width: 860px) {
  /* Sub-nav (Rackets / Bags / Kits ...): centred flex + overflow-x clips
     the FIRST items with no way to scroll back to them. Left-align and
     let it swipe instead. */
  .sub-nav-inner { justify-content: flex-start; padding: 0 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sub-nav-inner::-webkit-scrollbar { display: none; }
  .sub-nav a { padding: 14px 14px; }
  .cart-summary { position: static; }
}
@media (max-width: 640px) {
  /* Cart: the 5-column table cannot fit a phone (columns overlapped and the
     remove button fell off the edge). Turn each row into a compact card:
         [ photo  name / series        🗑 ]
         [ − 1 +               subtotal   ]                                  */
  .cart-table, .cart-table tbody { display: block; width: 100%; }
  .cart-table thead { display: none; }
  .cart-table tr {
    display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 12px;
    grid-template-areas: "prod remove" "qty sub";
    padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.06); align-items: center;
  }
  .cart-table tr:last-child { border-bottom: none; }
  .cart-table td { display: block; padding: 0; border: none; min-width: 0; }
  .cart-table .cart-td-product { grid-area: prod; }
  .cart-table .cart-td-remove  { grid-area: remove; align-self: start; text-align: right !important; }
  .cart-table .cart-td-qty     { grid-area: qty; text-align: left !important; }
  .cart-table .cart-td-sub     { grid-area: sub; text-align: right !important; font-size: 15px !important; }
  .cart-table .cart-td-unit    { display: none; }
  .cart-table .btn-icon        { width: 40px; height: 40px; }
  .cart-page h1 { font-size: 21px; margin-bottom: 20px; }
}
@media (max-width: 560px) {
  /* Sections that used 32px side padding while everything else uses 18px
     (the Brands heading sat visibly to the right of the rest of the page). */
  .carousel-section { padding-left: 18px; padding-right: 18px; }
  .crumb { padding-left: 18px; padding-right: 18px; }
  .section-head { gap: 8px; flex-wrap: wrap; }
}

/* ============================================================
   V1.22 — Order tracker, support tickets, refunds
   ============================================================ */
.badge-refunded { background: rgba(160,120,255,.12); color: #b49cff; border: 1px solid rgba(160,120,255,.25); }
.badge-open     { background: rgba(212,167,44,.12); color: var(--gold); border: 1px solid rgba(212,167,44,.2); }
.badge-answered { background: rgba(100,160,255,.1); color: #6ca0f5; border: 1px solid rgba(100,160,255,.2); }
.badge-resolved { background: rgba(76,175,128,.12); color: var(--success); border: 1px solid rgba(76,175,128,.25); }
.badge-closed   { background: rgba(136,132,128,.1); color: var(--muted); border: 1px solid rgba(136,132,128,.2); }
.badge-approved { background: rgba(100,160,255,.1); color: #6ca0f5; border: 1px solid rgba(100,160,255,.2); }
.badge-rejected { background: rgba(224,82,82,.1); color: var(--danger); border: 1px solid rgba(224,82,82,.2); }

.side-badge { margin-left: auto; background: var(--gold); color: #1a1405; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; }

/* ── Tracker ─────────────────────────────────────────────── */
.trk-panel { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 22px; }
.trk-head { margin-bottom: 18px; }
.trk-pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 20px; background: rgba(212,167,44,.12); color: var(--gold); border: 1px solid rgba(212,167,44,.25); }
.trk-pill-done { background: rgba(76,175,128,.12); color: var(--success); border-color: rgba(76,175,128,.3); }
.trk-pill-bad  { background: rgba(224,82,82,.1); color: var(--danger); border-color: rgba(224,82,82,.25); }
.trk-msg { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 10px; }

.trk-steps { list-style: none; display: flex; margin: 0 0 6px; padding: 0; }
.trk-step { flex: 1; text-align: center; position: relative; min-width: 0; }
.trk-step + .trk-step::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.trk-step.is-done + .trk-step.is-done::before { background: var(--gold); }
.trk-dot { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; background: var(--panel); border: 2px solid var(--border); }
.trk-step.is-done .trk-dot { background: var(--gold); border-color: var(--gold); }
.trk-step.is-now .trk-dot { box-shadow: 0 0 0 4px rgba(255,215,0,.18); }
.trk-dot i { color: #1a1405; font-size: 13px; }
.trk-label { display: block; font-size: 11px; line-height: 1.3; color: var(--faint); padding: 0 2px; }
.trk-step.is-done .trk-label { color: var(--ink); }
.trk-step.is-now .trk-label { font-weight: 700; }

.trk-h { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 24px 0 12px; font-weight: 600; }
.trk-log { list-style: none; margin: 0; padding: 0 0 0 4px; }
.trk-log li { display: flex; gap: 14px; position: relative; padding-bottom: 16px; }
.trk-log li:not(:last-child)::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: -2px; width: 1px; background: var(--border); }
.trk-log-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); margin-top: 5px; flex-shrink: 0; position: relative; z-index: 1; }
.trk-log-title { font-size: 13px; font-weight: 600; }
.trk-log-detail { font-size: 12px; color: var(--muted); margin-top: 1px; }
.trk-log-time { font-size: 11px; color: var(--faint); margin-top: 2px; }

.trk-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 18px; margin-bottom: 14px; }
.trk-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.trk-ref { font-weight: 700; font-size: 14px; color: var(--ink); display: block; }
.trk-date { font-size: 11.5px; color: var(--faint); }
.trk-section { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin: 22px 0 10px; }
.trk-section:first-of-type { margin-top: 6px; }

.help-panel { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-top: 20px; }
.help-title { font-size: 12.5px; font-weight: 600; margin-bottom: 12px; }
.help-note { font-size: 12px; color: var(--faint); margin-top: 10px; line-height: 1.5; }

/* ── Tickets ─────────────────────────────────────────────── */
.tk-row { flex-wrap: wrap; row-gap: 6px; }
.tk-subject { flex: 1 1 200px; min-width: 0; font-size: 13px; }
.tk-subject small { display: block; font-size: 11px; color: var(--faint); margin-top: 2px; }
.tk-needs-you { font-size: 10px; font-weight: 700; color: #1a1405; background: var(--gold); padding: 2px 8px; border-radius: 10px; }
.tk-thread { display: flex; flex-direction: column; gap: 12px; margin: 22px 0; }
.tk-msg { max-width: 86%; border-radius: 12px; padding: 12px 14px; border: 1px solid var(--border); background: var(--panel-2); }
.tk-mine  { align-self: flex-end; background: rgba(212,167,44,.08); border-color: rgba(212,167,44,.22); }
.tk-staff { align-self: flex-start; }
.tk-msg-head { display: flex; gap: 10px; justify-content: space-between; align-items: baseline; font-size: 11.5px; color: var(--faint); margin-bottom: 6px; flex-wrap: wrap; }
.tk-msg-head strong { color: var(--ink); font-size: 12px; }
.tk-msg-body { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.tk-reply { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
@media (max-width: 560px) { .tk-msg { max-width: 100%; } }

/* ── Refunds ─────────────────────────────────────────────── */
.rf-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 18px; margin-bottom: 14px; }
.rf-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.rf-no { font-weight: 700; font-size: 14px; }
.rf-sub { font-size: 12px; color: var(--faint); margin-top: 3px; line-height: 1.5; }
.rf-amt { font-size: 15px; font-weight: 700; color: var(--gold); margin-top: 6px; }
.rf-steps { list-style: none; display: flex; gap: 6px; margin: 16px 0 4px; padding: 0; flex-wrap: wrap; }
.rf-steps li { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--faint); margin-right: 14px; }
.rf-steps li.is-done { color: var(--ink); }
.rf-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center; }
.is-done .rf-dot { background: var(--gold); border-color: var(--gold); }
.rf-dot i { font-size: 10px; color: #1a1405; }
.rf-note { font-size: 12.5px; color: var(--muted); margin-top: 12px; line-height: 1.55; }
.rf-staffnote { margin-top: 12px; font-size: 12.5px; line-height: 1.55; background: var(--panel); border-left: 3px solid var(--gold); border-radius: 4px; padding: 10px 12px; color: var(--muted); }
.rf-staffnote strong { color: var(--ink); font-size: 11.5px; }
.rf-cancelbox { display: flex; gap: 14px; align-items: center; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }
.rf-cancelbox > i { font-size: 24px; color: var(--gold); flex-shrink: 0; }
.rf-items { display: flex; flex-direction: column; gap: 8px; }
.rf-item { display: flex; align-items: center; gap: 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.rf-item.is-off { opacity: .5; }
.rf-item-img { width: 48px; height: 48px; flex-shrink: 0; border-radius: 7px; overflow: hidden; background: var(--panel); border: 1px solid var(--border); }
.rf-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rf-item-info { flex: 1; min-width: 0; font-size: 13px; }
.rf-item-info small { display: block; font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.rf-qty { width: 92px; flex-shrink: 0; padding: 8px 10px; }

@media (max-width: 560px) {
  .trk-panel, .trk-card { padding: 14px; }
  .trk-label { font-size: 10px; }
  .rf-steps li { margin-right: 8px; }
  .rf-item { flex-wrap: wrap; }
  .rf-qty { width: 100%; }
}

/* V1.22 — account menu on phones: one swipeable row instead of a tall stack,
   so forms and trackers are visible without scrolling past 8 links. */
@media (max-width: 860px) {
  .account-sidebar { padding: 0; overflow: hidden; }
  .account-sidebar .user-info { padding: 14px 16px 10px; }
  .account-sidebar .sidebar-nav {
    display: flex; flex-direction: row; gap: 6px; overflow-x: auto; padding: 4px 12px 14px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .account-sidebar .sidebar-nav::-webkit-scrollbar { display: none; }
  .account-sidebar .sidebar-nav a {
    flex: 0 0 auto; white-space: nowrap; padding: 9px 14px; border: 1px solid var(--border);
    border-radius: 20px; font-size: 12.5px; border-left-width: 1px;
  }
  .account-sidebar .sidebar-nav a i { display: none; }
  .account-sidebar .sidebar-nav a.active { border-color: rgba(212,167,44,.4); }
  .account-sidebar .sidebar-nav .nav-divider, .account-sidebar .sidebar-nav hr { display: none; }
}

/* ============================================================
   V1.23 — Product Assistant (admin chat)
   ============================================================ */
.pa { display: flex; flex-direction: column; max-width: 860px; height: calc(100vh - 150px); min-height: 520px; }
.pa-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pa-sub { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 520px; }
.pa-sub strong { color: var(--ink); }
.pa-head-right { display: flex; align-items: center; gap: 10px; }
.pa-usage { font-size: 11px; color: var(--faint); border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px; white-space: nowrap; }
.pa-chat { flex: 1; overflow-y: auto; padding: 4px 2px 12px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }

.pa-intro { background: var(--panel-2); border: 1px dashed var(--border); border-radius: 12px; padding: 18px 20px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.pa-intro-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.pa-intro ul { margin: 10px 0 0 18px; display: flex; flex-direction: column; gap: 4px; }
.pa-intro strong { color: var(--ink); }

.pa-msg { display: flex; gap: 10px; }
.pa-user { justify-content: flex-end; }
.pa-bubble { border-radius: 14px; padding: 10px 14px; font-size: 13.5px; line-height: 1.55; max-width: 100%; overflow-wrap: anywhere; }
.pa-user .pa-bubble { background: rgba(212,167,44,.1); border: 1px solid rgba(212,167,44,.25); max-width: 85%; }
.pa-bot .pa-bubble { background: var(--panel-2); border: 1px solid var(--border); }
.pa-avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--gold); color: #1a1405; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.pa-botcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pa-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pa-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: #fff; }
.pa-notice { font-size: 12px; color: var(--danger); background: rgba(224,82,82,.08); border: 1px solid rgba(224,82,82,.2); border-radius: 8px; padding: 8px 12px; }
.pa-muted { font-size: 12px; color: var(--faint); }
.pa-typing { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; }
.pa-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: paDot 1.2s infinite ease-in-out; }
.pa-typing span:nth-child(2) { animation-delay: .15s; } .pa-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes paDot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

.pa-card { background: var(--panel); border: 1px solid rgba(212,167,44,.3); border-radius: 12px; padding: 14px; }
.pa-card-done { border-color: var(--border); }
.pa-card-done.pa-ok { border-color: rgba(76,175,128,.35); background: rgba(76,175,128,.06); }
.pa-card-done.pa-ok i { color: var(--success); }
.pa-card-done a { color: var(--gold); }
.pa-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pa-pill { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.pa-x { background: none; border: none; color: var(--faint); font-size: 12px; cursor: pointer; padding: 4px 6px; }
.pa-x:hover { color: var(--danger); }
.pa-warn { font-size: 12px; color: #e8b94a; background: rgba(212,167,44,.08); border: 1px solid rgba(212,167,44,.2); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; line-height: 1.5; }
.pa-warn a { color: var(--gold); text-decoration: underline; }
.pa-err { color: var(--danger); background: rgba(224,82,82,.08); border-color: rgba(224,82,82,.25); margin-top: 10px; }
.pa-imgs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pa-img { position: relative; width: 76px; height: 76px; border-radius: 9px; overflow: hidden; border: 2px solid var(--border); background: #fff; }
.pa-img.is-main { border-color: var(--gold); width: 96px; height: 96px; }
.pa-img img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.pa-img span { position: absolute; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,.65); color: var(--gold); font-size: 9.5px; text-align: center; padding: 2px 0; font-weight: 700; }
.pa-img button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; line-height: 18px; border-radius: 50%; border: none; background: rgba(0,0,0,.7); color: #fff; cursor: pointer; font-size: 14px; padding: 0; }
.pa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.pa-wide { grid-column: 1 / -1; }
.pa-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pa-f > span, .pa-label { font-size: 11px; color: var(--faint); font-weight: 600; letter-spacing: .03em; }
.pa-f em { font-weight: 400; font-style: normal; }
.pa-f input, .pa-f select, .pa-f textarea, .pa-spec input { width: 100%; box-sizing: border-box; background: var(--panel-2); border: 1px solid var(--border); color: var(--ink); border-radius: 8px; padding: 9px 10px; font-size: 13px; font-family: inherit; }
.pa-f textarea { resize: vertical; line-height: 1.5; }
.pa-f input:focus, .pa-f select:focus, .pa-f textarea:focus, .pa-spec input:focus { outline: none; border-color: rgba(212,167,44,.5); }
.pa-need input, .pa-need select { border-color: rgba(224,82,82,.55); background: rgba(224,82,82,.05); }
.pa-specs { margin-top: 12px; }
.pa-spec { display: grid; grid-template-columns: 1fr 1.3fr 28px; gap: 6px; margin-top: 6px; }
.pa-spec button { background: none; border: none; color: var(--faint); font-size: 18px; cursor: pointer; }
.pa-spec button:hover { color: var(--danger); }
.pa-link { background: none; border: none; color: var(--gold); font-size: 12px; cursor: pointer; padding: 8px 0 0; }
.pa-note { font-size: 12px; color: var(--muted); background: var(--panel-2); border-left: 3px solid var(--gold); border-radius: 4px; padding: 8px 10px; margin-top: 12px; line-height: 1.5; }
.pa-checks { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.pa-checks label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.pa-checks input { margin-top: 2px; }
.pa-checks em { color: var(--faint); font-style: normal; }
.pa-slug { font-size: 11px; color: var(--faint); margin-top: 10px; }
.pa-slug code { color: var(--muted); }
.pa-actions { margin-top: 14px; }
.pa-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
.pa-all { padding: 4px 0; }

.pa-composer { border: 1px solid var(--border); background: var(--panel); border-radius: 14px; padding: 10px; margin-top: 8px; transition: border-color var(--trans); }
.pa-composer.is-drag { border-color: var(--gold); background: rgba(212,167,44,.05); }
.pa-previews { display: none; gap: 8px; flex-wrap: wrap; padding: 2px 2px 10px; }
.pa-pv { position: relative; width: 58px; height: 58px; }
.pa-pv img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.pa-pv button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: none; background: #333; color: #fff; cursor: pointer; font-size: 13px; line-height: 18px; padding: 0; }
.pa-inputrow { display: flex; gap: 8px; align-items: flex-end; }
.pa-inputrow textarea { flex: 1; resize: none; background: transparent; border: none; color: var(--ink); font-size: 14px; font-family: inherit; line-height: 1.5; padding: 9px 4px; max-height: 160px; outline: none; }
.pa-attach, .pa-send { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel-2); color: var(--ink); font-size: 19px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pa-send { background: var(--gold); border-color: var(--gold); color: #1a1405; }
.pa-send[disabled], .pa-inputrow textarea[disabled] { opacity: .45; cursor: not-allowed; }
.pa-hint { font-size: 11px; color: var(--faint); margin: 8px 4px 0; }

.pa-setup { background: rgba(212,167,44,.07); border: 1px solid rgba(212,167,44,.3); border-radius: 12px; padding: 16px 20px; margin-bottom: 18px; font-size: 13px; line-height: 1.6; max-width: 860px; }
.pa-setup-title { font-weight: 700; color: var(--gold); margin-bottom: 8px; }
.pa-setup ol { margin: 8px 0 8px 20px; display: flex; flex-direction: column; gap: 6px; }
.pa-setup code { background: var(--panel-2); padding: 2px 6px; border-radius: 5px; font-size: 12px; }
.pa-code { display: block; margin-top: 6px; padding: 8px 10px !important; overflow-x: auto; white-space: nowrap; }

@media (max-width: 640px) {
  .pa { height: calc(100vh - 120px); }
  .pa-grid { grid-template-columns: 1fr 1fr; }
  .pa-user .pa-bubble { max-width: 92%; }
  .pa-avatar { display: none; }
  .pa-spec { grid-template-columns: 1fr 1fr 24px; }
}
@media (max-width: 640px) { .pa-hint { display: none; } .pa-composer { margin-top: 4px; } }
.pa-opt-title { font-weight: 700; margin-top: 12px; color: var(--ink); }
.pa-check { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; font-size: 12.5px; }
.pa-check-title { font-weight: 700; margin-bottom: 8px; }
.pa-check-row { display: flex; gap: 8px; align-items: baseline; margin: 5px 0; line-height: 1.5; color: var(--muted); }
.pa-check-row span { width: 16px; text-align: center; font-weight: 700; flex-shrink: 0; }
.pa-check-row strong { color: var(--ink); font-weight: 600; }
.pa-check-row.is-ok span { color: var(--success); }
.pa-check-row.is-bad span { color: var(--danger); }
.pa-check-row.is-bad { color: #e8a0a0; }
.pa-check-row.is-info span { color: var(--faint); }

/* V1.27 — photos upload on attach; Retry + Edit */
.pa-usercol { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 85%; }
.pa-usercol .pa-bubble { max-width: 100%; }
.pa-edit { background: none; border: none; color: var(--faint); font-size: 11.5px; cursor: pointer; padding: 2px 6px; display: inline-flex; gap: 4px; align-items: center; }
.pa-edit:hover { color: var(--gold); }
.pa-upnote { margin: 0 0 8px; }
.pa-pv.is-uploading img { opacity: .45; }
.pa-pv.is-error img { opacity: .5; outline: 2px solid var(--danger); border-radius: 8px; }
.pa-pv-spin { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.3); border-top-color: var(--gold); border-radius: 50%; animation: paSpin .8s linear infinite; }
.pa-pv-err { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; border-radius: 0 0 8px 8px; }
@keyframes paSpin { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .pa-usercol { max-width: 92%; } }

/* ============================================================
   V1.30 — Admin navigation (grouped, searchable, collapsible)
   ============================================================ */
.admin-sidebar.adm { width: 264px; overflow: hidden; background: linear-gradient(180deg, var(--panel) 0%, #0d0d0d 100%); }
.admin-main { margin-left: 264px; }

/* brand */
.adm-brand { display: flex; align-items: center; gap: 8px; padding: 18px 14px 12px 16px; flex-shrink: 0; }
.adm-logo { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; text-decoration: none; }
.adm-logo img { width: 32px; height: 32px; border-radius: 9px; background: #000; flex-shrink: 0; object-fit: contain; }
.adm-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.adm-brand-text b { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-brand-text small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); opacity: .8; margin-top: 2px; }
.adm-rail-btn { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--faint); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; flex-shrink: 0; transition: color var(--trans), border-color var(--trans), background var(--trans); }
.adm-rail-btn:hover { color: var(--ink); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04); }
.admin-sidebar.adm .admin-sidebar-close { margin-left: 4px; }

/* jump box */
.adm-search { position: relative; margin: 2px 14px 10px; flex-shrink: 0; }
.adm-search > i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 15px; pointer-events: none; }
.adm-search input { width: 100%; box-sizing: border-box; background: var(--panel-2); border: 1px solid var(--border); color: var(--ink); border-radius: 10px; padding: 9px 36px 9px 34px; font-size: 13px; font-family: inherit; outline: none; transition: border-color var(--trans), box-shadow var(--trans); -webkit-appearance: none; appearance: none; }
.adm-search input::placeholder { color: var(--faint); }
.adm-search input:focus { border-color: rgba(212,167,44,.55); box-shadow: 0 0 0 3px rgba(212,167,44,.12); }
.adm-search input::-webkit-search-cancel-button { display: none; }
.adm-search kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font: 600 10.5px/1 inherit; font-family: inherit; color: var(--faint); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 3px 6px; pointer-events: none; }
.adm-search:focus-within kbd { opacity: 0; }

/* quick actions */
.adm-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 14px 6px; flex-shrink: 0; }
.adm-qbtn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink); border: 1px solid var(--border); background: var(--panel-2); text-decoration: none; transition: background var(--trans), border-color var(--trans), transform var(--trans); }
.adm-qbtn:hover { border-color: rgba(212,167,44,.4); background: rgba(212,167,44,.07); }
.adm-qbtn i { font-size: 15px; }
.adm-qbtn-primary { background: var(--gold); border-color: var(--gold); color: #1a1405; }
.adm-qbtn-primary:hover { background: #ffdf33; border-color: #ffdf33; }

/* the scrolling menu */
.adm-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 16px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; overscroll-behavior: contain; }
.adm-nav::-webkit-scrollbar { width: 6px; }
.adm-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 6px; }
.adm-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

.adm-link { position: relative; display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 10px; margin: 1px 0; border-radius: 9px; color: var(--muted); font-size: 13px; text-decoration: none; transition: background var(--trans), color var(--trans); }
.adm-link > i { font-size: 17px; flex-shrink: 0; width: 20px; text-align: center; }
.adm-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-link:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.adm-link.active { color: var(--gold); background: rgba(212,167,44,.11); font-weight: 600; }
.adm-link.active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); }
.adm-link:focus-visible, .adm-ghead:focus-visible, .adm-foot-btn:focus-visible, .adm-qbtn:focus-visible, .adm-rail-btn:focus-visible { outline: 2px solid rgba(212,167,44,.7); outline-offset: 1px; }
.adm-link.adm-sel { background: rgba(255,255,255,.09); outline: 1px solid rgba(212,167,44,.5); color: var(--ink); }
.adm-top { margin-top: 6px; }

.adm-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--gold); color: #1a1405; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.adm-tag { margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: var(--gold); border: 1px solid rgba(212,167,44,.45); border-radius: 5px; padding: 2px 5px; flex-shrink: 0; }
.adm-link .adm-tag + .adm-badge { margin-left: 6px; }

/* groups */
.adm-group { margin-top: 4px; }
.adm-ghead { display: flex; align-items: center; gap: 8px; width: 100%; padding: 14px 10px 6px; background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; color: var(--faint); border-radius: 8px; }
.adm-glabel { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; flex: 1; }
.adm-ghead:hover { color: var(--muted); }
.adm-ghead > i { font-size: 14px; transition: transform .2s ease; }
.adm-group:not(.open) .adm-ghead > i { transform: rotate(-90deg); }
.adm-gcount { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgba(212,167,44,.18); color: var(--gold); font-size: 10.5px; font-weight: 700; display: none; align-items: center; justify-content: center; }
.adm-group:not(.open) .adm-gcount { display: inline-flex; }
.adm-items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.adm-items-in { overflow: hidden; min-height: 0; }
.adm-group.open .adm-items, .adm-searching .adm-items { grid-template-rows: 1fr; }
.adm-searching .adm-gcount { display: none !important; }
.adm-searching .adm-group:not(.open) .adm-ghead > i { transform: none; }
.adm-hide { display: none !important; }
.adm-empty { margin: 18px 10px; font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.5; }

/* pinned footer: who you are, view store, log out */
.adm-foot { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--border); background: rgba(0,0,0,.25); flex-shrink: 0; }
.adm-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #1a1405; font-size: 12.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .02em; }
.adm-foot-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.adm-foot-text b { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-foot-text small { font-size: 11px; color: var(--faint); }
.adm-foot-btn { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 17px; flex-shrink: 0; text-decoration: none; transition: background var(--trans), color var(--trans); }
.adm-foot-btn:hover { background: rgba(255,255,255,.07); color: var(--ink); }
.adm-foot-btn[href$="logout"]:hover { color: var(--danger); background: rgba(224,82,82,.1); }

/* top bar breadcrumb */
.adm-title { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; }
.adm-title h1 { flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-crumb { font-size: 12.5px; color: var(--faint); font-weight: 500; white-space: nowrap; }
.adm-crumb-sep { font-size: 12.5px; color: var(--border-2, #333); }

/* icon-only mode (desktop): a slim rail with tooltips */
@media (min-width: 861px) {
  html.adm-rail .admin-sidebar.adm { width: 76px; }
  html.adm-rail .admin-main { margin-left: 76px; }
  html.adm-rail .adm-brand { flex-direction: column; padding: 14px 0 10px; gap: 10px; }
  html.adm-rail .adm-brand-text, html.adm-rail .adm-search, html.adm-rail .adm-label, html.adm-rail .adm-tag, html.adm-rail .adm-foot-text, html.adm-rail .adm-qbtn span, html.adm-rail .adm-glabel, html.adm-rail .adm-ghead > i, html.adm-rail .adm-gcount { display: none !important; }
  html.adm-rail .adm-rail-btn i { transform: rotate(180deg); }
  html.adm-rail .adm-quick { grid-template-columns: 1fr; margin: 0 14px 6px; }
  html.adm-rail .adm-nav { padding: 2px 0 12px; }
  html.adm-rail .adm-link { width: 44px; height: 40px; margin: 2px auto; padding: 0; justify-content: center; }
  html.adm-rail .adm-link.active::before { left: -16px; }
  html.adm-rail .adm-items { grid-template-rows: 1fr !important; }
  html.adm-rail .adm-ghead { display: block; height: 1px; padding: 0; margin: 8px 18px; background: var(--border); border-radius: 0; pointer-events: none; }
  html.adm-rail .adm-badge { position: absolute; top: 3px; right: 2px; min-width: 9px; width: 9px; height: 9px; padding: 0; font-size: 0; border: 2px solid var(--panel); box-sizing: content-box; }
  html.adm-rail .adm-foot { flex-direction: column; padding: 10px 0; gap: 6px; }
}
@media (max-width: 860px) {
  .admin-main { margin-left: 0; }                  /* the sidebar is a slide-over drawer on phones */
  .admin-sidebar.adm { width: 288px; max-width: 86vw; }
  .adm-rail-btn { display: none; }
  .adm-crumb, .adm-crumb-sep { display: none; }
  .adm-link { height: 42px; }                      /* easier to tap */
}
@media (hover: none) { .adm-search kbd { display: none; } .adm-search input { padding-right: 12px; } }   /* no keyboard on a touch screen */
@media (prefers-reduced-motion: reduce) { .adm-items, .adm-ghead > i, .adm-link { transition: none; } }