/* ===== sassy-premium-2026.css ===== */
/*
╔══════════════════════════════════════════════════════════════════════════════╗
║  OBSIDIAN — Storefront 2026 Remaster                                         ║
║  Dark luxury: void black · antique gold · glacial silver                     ║
║  Fonts: Cormorant Garamond (display) + Outfit (body)                         ║
╚══════════════════════════════════════════════════════════════════════════════╝
*/

/* ─────────────────────────────────────────────────────────────────────────────
   DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────────── */
:root {

  /* ── Void blacks ─────────────────────────────────────────────────────────── */
  --b0: #020202;
  --b1: #050505;
  --b2: #090909;
  --b3: #0E0E0E;
  --b4: #131313;
  --b5: #1A1A1A;
  --b6: #222222;

  /* ── Antique gold — muted, never brash ──────────────────────────────────── */
  --gold-hi:    #D4C49A;
  --gold-mid:   #B9965A;
  --gold-pure:  #A07C3E;
  --gold-deep:  #745527;
  --gold-lo:    #4A3316;
  --gold-rgb:   185, 150, 90;
  --gold-bright: var(--gold-mid);
  --gold-rich:   var(--gold-pure);
  --gold-dark:   var(--gold-deep);

  /* ── Glacial silver — the new hero accent ───────────────────────────────── */
  --silver-hi:   #ECEEF0;
  --silver-mid:  #C2C8D0;
  --silver-pure: #9AA0AA;
  --silver-deep: #6A7080;
  --silver-lo:   #3E424A;
  --silver-rgb:  194, 200, 208;

  /* ── Text ────────────────────────────────────────────────────────────────── */
  --tx:  rgba(238, 238, 240, 0.94);
  --tx2: rgba(238, 238, 240, 0.60);
  --tx3: rgba(238, 238, 240, 0.36);
  --tx4: rgba(238, 238, 240, 0.20);

  /* ── Semantic ────────────────────────────────────────────────────────────── */
  --tone-good: rgba(90, 195, 140, 0.95);
  --tone-warn: rgba(var(--gold-rgb), 0.95);
  --tone-bad:  rgba(210, 100, 100, 0.95);
  --accent-red: var(--tone-bad);

  /* ── Typography ──────────────────────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-d: var(--font-display);
  --ff-b: var(--font-body);
  --display: var(--font-display);

  --ls-title: 0.18em;
  --ls-ui:    0.12em;
  --ls-body:  0.01em;
  --lh-tight: 1.08;
  --lh-body:  1.60;

  /* ── Spacing ─────────────────────────────────────────────────────────────── */
  --s-1: 6px;  --s-2: 10px; --s-3: 14px;
  --s-4: 18px; --s-5: 26px; --s-6: 36px;
  --space-sm: var(--s-2); --space-md: var(--s-3); --space-lg: var(--s-4);
  --space-xl: var(--s-5); --space-2xl: var(--s-6); --space-3xl: 52px;

  /* ── Radii ───────────────────────────────────────────────────────────────── */
  --r-card:  14px;  --r-panel: 16px;  --r-input:  11px;
  --r-btn:   10px;  --r-pill: 999px;  --r-modal:  18px;
  --radius-sm: 10px; --radius-md: 12px; --radius-xl: 16px; --radius-full: 999px;

  /* ── Chrome surface helpers ──────────────────────────────────────────────── */
  --chrome-hi:  rgba(255, 255, 255, 0.10);
  --chrome-mid: rgba(255, 255, 255, 0.055);
  --chrome-lo:  rgba(255, 255, 255, 0.025);
  --carve:      rgba(0, 0, 0, 0.72);
  --carve-2:    rgba(0, 0, 0, 0.88);
  --edge-hi:    var(--chrome-mid);
  --edge-hi-2:  var(--chrome-hi);

  /* ── Shadow stacks ───────────────────────────────────────────────────────── */
  --sh-flat:
    inset 0 1px 0 var(--chrome-mid),
    inset 0 -1px 0 rgba(0, 0, 0, 0.40);

  --sh-raised:
    inset 0 1px 0 var(--chrome-hi),
    inset 0 -1px 0 var(--carve),
    0 4px 16px rgba(0, 0, 0, 0.60),
    0 12px 36px rgba(0, 0, 0, 0.40);

  --sh-elevated:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 var(--carve-2),
    0 8px 32px rgba(0, 0, 0, 0.72),
    0 24px 60px rgba(0, 0, 0, 0.44);

  --sh-hero:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.92),
    0 16px 56px rgba(0, 0, 0, 0.80),
    0 36px 90px rgba(0, 0, 0, 0.44);

  --sh-modal:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.96),
    0 32px 90px rgba(0, 0, 0, 0.90),
    0 60px 140px rgba(0, 0, 0, 0.55);

  --shadow-panel:       var(--sh-raised);
  --shadow-card:        var(--sh-raised);
  --shadow-card-hover:  var(--sh-elevated);
  --shadow-btn:         inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -1px 0 rgba(0,0,0,0.75), 0 6px 20px rgba(0,0,0,0.65);
  --shadow-btn-primary: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.82), 0 10px 30px rgba(0,0,0,0.72);

  /* ── Glows ───────────────────────────────────────────────────────────────── */
  --glow-faint:        0 0 0 1px rgba(var(--gold-rgb), 0.10), 0 6px 24px rgba(var(--gold-rgb), 0.08);
  --glow-active:       0 0 0 1px rgba(var(--gold-rgb), 0.18), 0 10px 32px rgba(var(--gold-rgb), 0.14);
  --glow-hero:         0 0 0 1px rgba(var(--gold-rgb), 0.22), 0 18px 48px rgba(var(--gold-rgb), 0.16);
  --focus-aura:        0 0 0 2px rgba(var(--silver-rgb), 0.30), 0 0 0 5px rgba(var(--silver-rgb), 0.10);

  /* ── Motion ──────────────────────────────────────────────────────────────── */
  --t:    200ms;
  --t2:   320ms;
  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* ── Layout ──────────────────────────────────────────────────────────────── */
  --nav-h: 60px;
  --mob-h: 72px;

  /* ── Background atmosphere ───────────────────────────────────────────────── */
  --bg-base: var(--b0);
  --bg-primary: var(--b1);
  --bg-atmo-1: radial-gradient(ellipse 900px 600px at 90% -8%, rgba(var(--silver-rgb), 0.045) 0%, transparent 70%);
  --bg-atmo-2: radial-gradient(ellipse 700px 500px at -5% 5%, rgba(var(--gold-rgb), 0.038) 0%, transparent 70%);
  --bg-atmo-3: radial-gradient(ellipse 800px 520px at 50% 115%, rgba(255,255,255,0.025) 0%, transparent 70%);
  --bg-falloff: linear-gradient(180deg, #060606 0%, #030303 50%, #010101 100%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESET
   ───────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  background: var(--b0);
  color: var(--tx);
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  min-height: 100vh;
  background-color: var(--b0);
  background-image:
    radial-gradient(ellipse 900px 600px at 90% -8%,
      rgba(var(--silver-rgb), 0.042) 0%,
      rgba(var(--silver-rgb), 0.010) 40%,
      transparent 70%),
    radial-gradient(ellipse 700px 500px at -5% 5%,
      rgba(var(--gold-rgb), 0.035) 0%,
      rgba(var(--gold-rgb), 0.008) 45%,
      transparent 70%),
    linear-gradient(180deg, #060606 0%, #030303 50%, #010101 100%);
  position: relative;
  overflow-x: hidden;
}

/* Chrome/gold horizon line — the signature */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--silver-rgb), 0.38) 18%,
    rgba(var(--gold-rgb), 0.78) 38%,
    rgba(var(--silver-rgb), 0.88) 50%,
    rgba(var(--gold-rgb), 0.78) 62%,
    rgba(var(--silver-rgb), 0.38) 82%,
    transparent 100%);
  z-index: 999999;
  pointer-events: none;
  animation: horizon-pulse 9s ease-in-out infinite;
}

@keyframes horizon-pulse {
  0%, 100% { opacity: 0.80; }
  50%       { opacity: 1;    }
}

body > * { position: relative; z-index: 1; }

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

hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--silver-rgb), 0.10) 25%,
    rgba(var(--gold-rgb), 0.22) 50%,
    rgba(var(--silver-rgb), 0.10) 75%,
    transparent 100%);
  margin: 24px 0;
}

table { border-collapse: collapse; }
th, td { border: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   TOP NAVIGATION
   ───────────────────────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  height: var(--nav-h);
  align-items: center;
  background: linear-gradient(180deg, rgba(8,8,8,0.96) 0%, rgba(4,4,4,0.90) 100%);
  backdrop-filter: blur(48px) saturate(180%) brightness(0.85);
  -webkit-backdrop-filter: blur(48px) saturate(180%) brightness(0.85);
  border: none;
  box-shadow:
    0 1px 0 rgba(var(--silver-rgb), 0.07),
    0 1px 0 rgba(var(--gold-rgb), 0.04),
    0 4px 32px rgba(0,0,0,0.96);
  transform: translateZ(0);
  will-change: transform;
  contain: paint;
}

.topbarInner {
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.navLink {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  font-family: var(--ff-b);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tx3);
  border: none;
  border-radius: 7px;
  background: transparent;
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.navLink::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--silver-rgb), 0.65) 35%,
    rgba(var(--gold-rgb), 0.88) 50%,
    rgba(var(--silver-rgb), 0.65) 65%,
    transparent);
  opacity: 0;
  transform: scaleX(0.5);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}

.navLink:hover { color: var(--tx2); background: rgba(255,255,255,0.025); }
.navLink.navLinkActive { color: var(--silver-mid); }
.navLink.navLinkActive::after { opacity: 1; transform: scaleX(1); }

/* Cart badge */
.navCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  margin-left: 4px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--b0);
  background: linear-gradient(135deg, var(--silver-mid) 0%, var(--silver-pure) 100%);
  border-radius: var(--r-pill);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.28),
    0 2px 8px rgba(0,0,0,0.60);
}

@media (max-width: 767px) {
  /* Hide the desktop topbar — mobileNav handles navigation on small screens */
  .topbar { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE BOTTOM NAV
   ───────────────────────────────────────────────────────────────────────────── */

.mobileNav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 99999;
  display: none;
  background: rgba(3, 3, 3, 0.97);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: none;
  box-shadow:
    0 -1px 0 rgba(var(--silver-rgb), 0.07),
    0 -1px 0 rgba(var(--gold-rgb), 0.04),
    0 -20px 60px rgba(0,0,0,0.98);
  padding-bottom: env(safe-area-inset-bottom, 0);
  height: calc(var(--mob-h) + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767px) {
  .mobileNav { display: flex; align-items: stretch; }
  body { padding-bottom: calc(var(--mob-h) + env(safe-area-inset-bottom, 0px) + 10px); }
}

.mobileNavInner {
  display: flex;
  width: 100%;
  height: var(--mob-h);
  align-items: center;
}

.mobileNavItem {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: rgba(var(--silver-rgb), 0.22);
  font-family: var(--ff-b);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  position: relative;
  transition: color var(--t) var(--ease);
}

.mobileNavItem::before {
  content: '';
  position: absolute;
  top: 0; left: 25%; right: 25%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--silver-rgb), 0.48) 35%,
    rgba(var(--gold-rgb), 0.78) 50%,
    rgba(var(--silver-rgb), 0.48) 65%,
    transparent);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.mobileNavItem.mobileNavActive::before { opacity: 1; }

.mobileNavIconWrap {
  position: relative;
  width: 40px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: none;
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.mobileNavItem svg { width: 20px; height: 20px; stroke-width: 1.5; }
.mobileNavItem.mobileNavActive { color: var(--silver-mid); }
.mobileNavItem.mobileNavActive .mobileNavIconWrap {
  background: rgba(var(--silver-rgb), 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.60),
    0 8px 24px rgba(0,0,0,0.70),
    0 0 20px rgba(var(--silver-rgb), 0.07);
}
.mobileNavItem.mobileNavActive svg { stroke: var(--silver-mid); }
.mobileNavBadge {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 15px; height: 15px;
  padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-b); font-size: 7px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--b0);
  background: linear-gradient(135deg, var(--silver-mid) 0%, var(--silver-pure) 100%);
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 2px 8px rgba(0,0,0,0.60);
  transition: opacity var(--t) var(--ease);
}
.mobileNavBadge[data-count="0"] { opacity: 0; }
.mobileNavItem:active { transform: translateY(1px); }
.mobileNavItem:active .mobileNavIconWrap {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.85),
    0 4px 14px rgba(0,0,0,0.65);
}

/* ─────────────────────────────────────────────────────────────────────────────
   LAYOUT
   ───────────────────────────────────────────────────────────────────────────── */

main.wrap, .wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 20px 14px 28px;
  position: relative;
}
@media (max-width: 767px)  { main.wrap, .wrap { padding: 28px 14px 28px; } }
@media (min-width: 768px)  { main.wrap, .wrap { padding: 36px 24px 52px; } }
@media (min-width: 1100px) { main.wrap, .wrap { padding: 52px 36px 72px; } }

/* ─────────────────────────────────────────────────────────────────────────────
   STORE HEADER
   ───────────────────────────────────────────────────────────────────────────── */

.storeHead {
  position: relative;
  text-align: center;
  padding: 44px 0 28px;
  margin-bottom: 8px;
}

.storeHeadMascotWrap {
  display: inline-block;
  margin-bottom: 24px;
}

.storeHeadMascot {
  width: 160px; height: 160px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 12px 40px rgba(var(--silver-rgb), 0.09)) drop-shadow(0 4px 16px rgba(0,0,0,0.80));
  animation: none;
  transform: none;
}

@media (max-width: 480px) {
  .storeHeadMascot { width: 110px; height: 110px; }
  .storeHead { padding: 28px 0 20px; }
}

.storeHeadTitle {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 9vw, 5.6rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.0;
  background: linear-gradient(158deg,
    var(--silver-hi)   0%,
    var(--silver-mid)  16%,
    var(--gold-hi)     34%,
    var(--gold-mid)    50%,
    var(--gold-hi)     66%,
    var(--silver-mid)  84%,
    var(--silver-hi)  100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: none;
  text-shadow: none;
  animation: none;
  background-size: 100% 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CATEGORY NAV
   ───────────────────────────────────────────────────────────────────────────── */

.catNav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 8px 22px;
}

.catLink {
  position: relative;
  display: inline-block;
  padding: 6px 16px 10px;
  font-family: var(--ff-b);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tx3);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  -webkit-text-fill-color: unset;
  transition: color var(--t) var(--ease);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.catLink::before { display: none; content: none; }

.catLink::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 10px; right: 10px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--silver-rgb), 0.40) 15%,
    rgba(var(--gold-rgb), 0.80) 40%,
    rgba(var(--silver-rgb), 0.88) 50%,
    rgba(var(--gold-rgb), 0.80) 60%,
    rgba(var(--silver-rgb), 0.40) 85%,
    transparent 100%);
  opacity: 0;
  transform: scaleX(0);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}

.catLink:hover            { color: var(--tx2); -webkit-text-fill-color: unset; transform: none; box-shadow: none; }
.catLink:hover::after     { opacity: 0.35; transform: scaleX(0.70); }
.catLink.isActive         { color: var(--silver-mid); -webkit-text-fill-color: unset; background: transparent; box-shadow: none; }
.catLink.isActive::after  { opacity: 1; transform: scaleX(1); }

@media (max-width: 720px) {
  .catNav {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 0 10px 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .catNav::-webkit-scrollbar { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SEARCH
   ───────────────────────────────────────────────────────────────────────────── */

.searchWrap {
  max-width: 460px;
  margin: 0 auto 22px;
}

.searchForm {
  position: relative;
  display: flex;
}

.searchIco {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(var(--silver-rgb), 0.24);
  pointer-events: none;
  z-index: 1;
}

.searchInput {
  width: 100%;
  padding: 12px 18px 12px 46px;
  font-family: var(--ff-b);
  font-size: 13px;
  font-weight: 400;
  color: var(--tx);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.026) 0%, rgba(255,255,255,0.008) 100%),
    rgba(12, 12, 12, 0.90);
  border: none;
  border-radius: 12px;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.50),
    0 2px 16px rgba(0,0,0,0.55);
  -webkit-appearance: none;
  transition: box-shadow var(--t) var(--ease);
}
.searchInput::placeholder { color: var(--tx3); }
.searchInput:focus {
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(var(--silver-rgb), 0.18),
    0 0 0 4px rgba(var(--silver-rgb), 0.06),
    0 4px 22px rgba(0,0,0,0.60);
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRODUCT GRID
   ───────────────────────────────────────────────────────────────────────────── */

.productGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 64px;
  align-items: stretch;
}

@media (min-width: 900px) {
  .productGrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRODUCT CARDS
   ───────────────────────────────────────────────────────────────────────────── */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  border: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.032) 0%, rgba(255,255,255,0.009) 60%, rgba(0,0,0,0) 100%),
    rgba(13, 13, 13, 0.94);
  box-shadow: var(--shadow-card);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.card::before, .card::after { display: none; content: none; opacity: 0; }

@media (hover: hover) {
  .card:hover {
    transform: translateY(-6px);
    border: none;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      inset 0 -1px 0 rgba(0,0,0,0.90),
      0 0 0 1px rgba(var(--silver-rgb), 0.07),
      0 12px 48px rgba(0,0,0,0.78),
      0 32px 80px rgba(0,0,0,0.44);
  }
}
.card:active { transform: scale(0.976); }

.cardLink { position: absolute; inset: 0; z-index: 1; text-decoration: none; }

.cardMedia {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--b3);
  flex-shrink: 0;
}

.cardMedia::before {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.12) 24%, transparent 44%);
  pointer-events: none;
}

.cardMedia::after {
  content: '';
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(0deg,
    rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.48) 30%, transparent 58%);
  pointer-events: none;
}

.cardMedia img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.6s var(--ease);
}
@media (hover: hover) {
  .card:hover .cardMedia img { transform: scale(1.06); }
}

.cardPh {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: linear-gradient(145deg, rgba(var(--silver-rgb), 0.020) 0%, var(--b3) 60%, var(--b2) 100%);
}
.cardPhMark {
  font-family: var(--ff-d);
  font-size: 72px; font-style: italic; font-weight: 700;
  color: rgba(var(--silver-rgb), 0.09); line-height: 1;
}

.cardBody {
  position: relative; z-index: 4;
  padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 7px; flex: 1;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018) 0%, rgba(255,255,255,0.005) 100%),
    var(--b2);
  border: none;
}

.cardTitle {
  font-family: var(--ff-b);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em;
  line-height: 1.4; color: var(--tx); margin: 0;
}

.cardMeta { flex: 1; }

.price {
  display: flex; align-items: baseline; gap: 7px; margin: 0;
}

.priceNow {
  font-family: var(--ff-b);
  font-size: 16px; font-weight: 600;
  color: var(--gold-mid);
  -webkit-text-fill-color: var(--gold-mid);
  background: none; -webkit-background-clip: unset; background-clip: unset;
  filter: none; text-shadow: none;
}
.priceNowBlank { opacity: 0; }

.priceWas {
  font-family: var(--ff-b);
  font-size: 11px; color: var(--tx3); text-decoration: line-through;
}

/* ── Badges ── */
.badgeRow { display: flex; gap: 5px; flex-wrap: wrap; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  font-family: var(--ff-b); font-size: 7px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 4px; border: none; box-shadow: none;
}
.badge::before {
  content: ''; display: inline-block;
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: 0.70; flex-shrink: 0;
}
.badgeOut       { background: rgba(120,20,20,0.55);  color: rgba(240,120,120,0.90); }
.badgeLow,
.badgeManualLow { background: rgba(100,68,8,0.55);   color: rgba(220,165,70,0.92); }
.badgeSale      { background: rgba(8,80,40,0.55);    color: rgba(70,195,120,0.90); }
.badgeSoon      { background: rgba(20,60,100,0.55);   color: rgba(120,195,255,0.90); }

.cardActions { position: relative; z-index: 5; margin-top: auto; }
.cardInteractive { position: relative; z-index: 5; }

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTON SYSTEM
   ───────────────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px;
  font-family: var(--ff-b); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  color: var(--tx2);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.038) 0%, rgba(255,255,255,0.009) 100%),
    rgba(20, 20, 20, 0.90);
  border: none; border-radius: 10px;
  cursor: pointer; outline: none; position: relative; overflow: hidden;
  -webkit-appearance: none; appearance: none; user-select: none;
  box-shadow: var(--shadow-btn);
  transition:
    background  var(--t) var(--ease),
    box-shadow  var(--t) var(--ease),
    transform   var(--t) var(--ease),
    color       var(--t) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.btn::before { display: none; content: none; }
.btn::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.btn:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.052) 0%, rgba(255,255,255,0.016) 100%),
    rgba(26, 26, 26, 0.94);
  color: var(--tx); border: none; transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.80),
    0 0 0 1px rgba(var(--silver-rgb), 0.05),
    0 10px 36px rgba(0,0,0,0.70);
}
.btn:active { transform: translateY(0) scale(0.975); box-shadow: var(--shadow-btn); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-aura), var(--shadow-btn); }
.btn[disabled], .btn:disabled, .btn.isDisabled {
  opacity: 0.24; cursor: not-allowed; pointer-events: none;
}

/* Primary — chrome metallic */
.btnPrimary {
  background:
    linear-gradient(180deg,
      rgba(var(--silver-rgb), 0.12) 0%,
      rgba(var(--silver-rgb), 0.06) 40%,
      rgba(var(--gold-rgb), 0.07) 100%);
  border: none;
  color: var(--silver-mid);
  -webkit-text-fill-color: var(--silver-mid);
  box-shadow: var(--shadow-btn-primary);
}
.btnPrimary::before { display: none; content: none; }
.btnPrimary .btnText {
  background: none; -webkit-background-clip: unset; background-clip: unset;
  -webkit-text-fill-color: var(--silver-mid); color: var(--silver-mid);
  filter: none; animation: none;
}
.btnPrimary:hover {
  background:
    linear-gradient(180deg,
      rgba(var(--silver-rgb), 0.18) 0%,
      rgba(var(--silver-rgb), 0.09) 40%,
      rgba(var(--gold-rgb), 0.09) 100%);
  border: none; color: var(--silver-hi); -webkit-text-fill-color: var(--silver-hi);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.13),
    inset 0 -1px 0 rgba(0,0,0,0.82),
    0 0 0 1px rgba(var(--silver-rgb), 0.10),
    0 0 28px rgba(var(--silver-rgb), 0.07),
    0 8px 32px rgba(0,0,0,0.70);
}

.btnGhost {
  background: rgba(255,255,255,0.020); border: none; color: var(--tx2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 10px rgba(0,0,0,0.36);
}
.btnGhost:hover { background: rgba(255,255,255,0.042); border: none; color: var(--tx); }

.btnWide  { width: 100%; }
.btnSmall { padding: 9px 18px; font-size: 9px; }

/* Card add-to-cart */
.cardActions .btn,
.cardActions .btnPrimary,
.cardActions button[data-add-to-cart],
body.storeIndex .productGrid .cardActions .btn,
body.storeIndex .productGrid .cardActions .btnPrimary,
body.storeIndex .productGrid .cardActions .btn.btnPrimary,
body.storeIndex .productGrid .cardActions .btn.btnPrimary.btnWide,
body.storeIndex .productGrid article.card.productCard .cardActions .btn.btnPrimary.btnWide {
  all: unset;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 9px;
  font-family: var(--ff-b);
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--silver-mid); -webkit-text-fill-color: var(--silver-mid);
  border: none;
  background:
    linear-gradient(180deg, rgba(var(--silver-rgb), 0.08) 0%, rgba(var(--silver-rgb), 0.035) 100%),
    rgba(10,10,10,0.80);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.65),
    0 2px 12px rgba(0,0,0,0.60);
  cursor: pointer; z-index: 5;
  -webkit-font-smoothing: antialiased;
  transition:
    background var(--t) var(--ease),
    box-shadow  var(--t) var(--ease),
    color       var(--t) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .cardActions .btn:hover,
  .cardActions .btnPrimary:hover,
  .cardActions button[data-add-to-cart]:hover {
    background:
      linear-gradient(180deg, rgba(var(--silver-rgb), 0.14) 0%, rgba(var(--silver-rgb), 0.065) 100%),
      rgba(14,14,14,0.90);
    border: none; color: var(--silver-hi); -webkit-text-fill-color: var(--silver-hi);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.09),
      inset 0 -1px 0 rgba(0,0,0,0.75),
      0 0 20px rgba(var(--silver-rgb), 0.06),
      0 4px 18px rgba(0,0,0,0.70);
  }
}
.cardActions .btn:active,
.cardActions button[data-add-to-cart]:active { transform: scale(0.956); }
.cardActions .btn[disabled],
.cardActions button[data-add-to-cart][disabled] { opacity: 0.24; cursor: not-allowed; pointer-events: none; }

.cardActions .btnText,
.cardActions .btn .btnText {
  background: none; -webkit-background-clip: unset;
  -webkit-text-fill-color: inherit; color: inherit;
  filter: none; animation: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PANELS
   ───────────────────────────────────────────────────────────────────────────── */

.panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.028) 0%, rgba(255,255,255,0.007) 70%, rgba(0,0,0,0) 100%),
    rgba(13, 13, 13, 0.88);
  border: none; border-radius: 16px; padding: 22px;
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.panelTitle {
  font-family: var(--ff-b); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--tx3); margin: 0 0 16px;
}
.panelTitleNoMargin { margin: 0; }

.pageTitle {
  font-family: var(--ff-d);
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  font-weight: 700; font-style: italic; letter-spacing: 0.02em;
  color: var(--tx); -webkit-text-fill-color: var(--tx);
  background: none; -webkit-background-clip: unset;
  margin: 0 0 22px; line-height: 1.0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRODUCT DETAIL
   ───────────────────────────────────────────────────────────────────────────── */

.detailGrid {
  display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 44px;
}
@media (min-width: 960px) {
  .detailGrid { grid-template-columns: 1.05fr 0.95fr; gap: 28px; }
}

.mediaFrame {
  position: relative; aspect-ratio: 1;
  border-radius: 16px; overflow: hidden; background: var(--b2); border: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    0 0 0 1px rgba(var(--silver-rgb), 0.04),
    0 8px 36px rgba(0,0,0,0.80),
    0 24px 70px rgba(0,0,0,0.45);
}
.mediaFrame img { width: 100%; height: 100%; object-fit: cover; }

.mediaGlow {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    0 0 0 1px rgba(var(--silver-rgb), 0.04),
    0 8px 36px rgba(0,0,0,0.80),
    0 24px 70px rgba(0,0,0,0.45);
}

.mediaPlaceholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-family: var(--ff-d); font-size: 90px; font-weight: 700; font-style: italic;
  color: rgba(var(--silver-rgb), 0.07);
  background: linear-gradient(145deg, var(--b3), var(--b2));
}

.detailTitle {
  font-family: var(--ff-d); font-size: clamp(1.5rem, 4.5vw, 2.4rem);
  font-weight: 700; font-style: italic; letter-spacing: 0.02em;
  color: var(--tx); margin: 0 0 12px; line-height: 1.1;
}
.detailPrice { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.detailPrice .priceNow {
  font-family: var(--ff-b); font-size: 28px; font-weight: 600;
  color: var(--gold-mid); -webkit-text-fill-color: var(--gold-mid);
}
.detailDesc { font-size: 13.5px; line-height: 1.80; color: var(--tx2); margin: 0 0 18px; }

.keyRow { margin-bottom: 14px; }
.keyPill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  font-family: var(--ff-b); font-size: 9px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  border-radius: 99px; border: none;
}
.keyPillWarn { background: rgba(var(--gold-rgb), 0.08); color: var(--gold-mid); }

/* Quantity controls */
.qtyRow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: nowrap; }
.qtyRow > div:first-child { flex-shrink: 0; }
.qtyGrow { flex: 1; }

.qtyPill {
  display: inline-flex; align-items: stretch; height: 52px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.026) 0%, rgba(255,255,255,0.007) 100%),
    rgba(12, 12, 12, 0.92);
  border: none; border-radius: 13px; overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 2px 14px rgba(0,0,0,0.55);
}

.qtyBtn {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  font-size: 26px; font-weight: 300; line-height: 1;
  color: rgba(var(--silver-rgb), 0.50);
  background: transparent; border: none; cursor: pointer; padding: 0;
  flex-shrink: 0; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.qtyBtn:hover  { background: rgba(var(--silver-rgb), 0.05); color: var(--silver-mid); }
.qtyBtn:active { background: rgba(var(--silver-rgb), 0.10); }

.qtyInput {
  width: 62px; height: 52px; text-align: center;
  font-family: var(--ff-b); font-size: 15px; font-weight: 500;
  color: var(--tx);
  background: rgba(var(--silver-rgb), 0.016);
  border: none;
  border-left:  1px solid rgba(var(--silver-rgb), 0.06);
  border-right: 1px solid rgba(var(--silver-rgb), 0.06);
  outline: none; -moz-appearance: textfield; appearance: textfield;
  flex: 0 0 62px; padding: 0;
}
.qtyInput::-webkit-outer-spin-button,
.qtyInput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cartRow .qtyPill  { height: 36px; border-radius: 9px; }
.cartRow .qtyBtn   { width: 36px; height: 36px; font-size: 20px; }
.cartRow .qtyInput { width: 44px; height: 36px; font-size: 13px; flex: 0 0 44px; }

.detailAddBtn {
  height: 56px; min-height: 52px; border: none;
  background:
    linear-gradient(180deg,
      rgba(var(--silver-rgb), 0.10) 0%,
      rgba(var(--silver-rgb), 0.05) 50%,
      rgba(var(--gold-rgb), 0.06) 100%),
    rgba(12, 12, 12, 0.80);
  border-radius: 13px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.72),
    0 0 0 1px rgba(var(--silver-rgb), 0.06),
    0 6px 22px rgba(0,0,0,0.55);
  font-size: 10px; letter-spacing: 0.16em; font-weight: 700;
  font-family: var(--ff-b); text-transform: uppercase;
  color: var(--silver-mid); -webkit-text-fill-color: var(--silver-mid);
}
.detailAddBtn:hover {
  background:
    linear-gradient(180deg,
      rgba(var(--silver-rgb), 0.16) 0%,
      rgba(var(--silver-rgb), 0.09) 50%,
      rgba(var(--gold-rgb), 0.08) 100%),
    rgba(14, 14, 14, 0.90);
  border: none; color: var(--silver-hi); -webkit-text-fill-color: var(--silver-hi);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.82),
    0 0 0 1px rgba(var(--silver-rgb), 0.10),
    0 0 26px rgba(var(--silver-rgb), 0.07),
    0 8px 28px rgba(0,0,0,0.65);
}

.detailActions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

@media (max-width: 640px) {
  .detailPrice { flex-direction: column; gap: 4px; align-items: flex-start; }
  .detailGrid  { gap: 20px; }
  .detailDesc  { font-size: 14px; }
  .qtyRow      { flex-direction: column; align-items: stretch; gap: 12px; }
  .qtyGrow     { width: 100%; }
  .qtyPill     { width: 100%; height: 58px; }
  .qtyBtn      { width: 58px; height: 58px; font-size: 30px; }
  .qtyInput    { width: 84px; height: 58px; font-size: 18px; }
  .detailAddBtn { width: 100%; height: 58px; font-size: 10.5px; }
  .detailActions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .detailActions .btn { width: 100%; height: 52px; }
}

@media (max-width: 720px) {
  .qtyRow {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .qtyRow > div:first-child { width: 100% !important; }
  .qtyPill { width: 100% !important; height: 62px !important; border-radius: 16px !important; }
  .qtyBtn  { width: 62px !important; height: 50px !important; border-radius: 12px !important; }
  .qtyInput { flex: 1 !important; width: auto !important; height: 50px !important; }
  .detailAddBtn { width: 100% !important; height: 62px !important; border-radius: 16px !important; }
  .detailActions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-top: 16px !important; }
  .detailActions .btn { width: 100% !important; height: 48px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CART PAGE
   ───────────────────────────────────────────────────────────────────────────── */

.alert {
  padding: 14px 18px; border-radius: 12px; border: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.020) 0%, rgba(255,255,255,0.005) 100%),
    rgba(14, 14, 14, 0.88);
  font-size: 13px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 1px rgba(255,255,255,0.038),
    0 4px 16px rgba(0,0,0,0.50);
  margin-bottom: var(--space-lg);
}

.minOrderBanner {
  border-radius: 13px; border: none;
  background: rgba(var(--gold-rgb), 0.028);
  padding: 15px 18px; margin-bottom: 18px;
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.08), 0 4px 16px rgba(0,0,0,0.40);
}
.minOrderBanner.isFulfilled {
  background: rgba(46, 185, 110, 0.032);
  box-shadow: 0 0 0 1px rgba(46, 185, 110, 0.12), 0 4px 16px rgba(0,0,0,0.40);
}
.minOrderBannerTop {
  display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 13px;
}
.minOrderMeter { height: 1px; background: rgba(255,255,255,0.05); border-radius: 99px; overflow: hidden; }
.minOrderFill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-pure), var(--gold-mid), var(--silver-pure));
  transition: width 0.5s var(--ease);
}
.minOrderFill.isFulfilled { background: linear-gradient(90deg, #2ab870, #5ecb96); }
.minOrderHint { font-size: 11px; color: var(--tx2); margin-top: 4px; }

.cartCard {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.023) 0%, rgba(255,255,255,0.006) 100%),
    rgba(8, 8, 8, 0.90);
  border: none; border-radius: 16px; overflow: hidden; box-shadow: var(--sh-raised);
}

.cartHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border: none;
  border-bottom: 1px solid rgba(255,255,255,0.036);
}

.cartBody { display: flex; flex-direction: column; gap: 0; }

.cartRow {
  display: grid; grid-template-columns: 72px 1fr auto;
  align-items: center; gap: 14px; padding: 16px 20px;
  border: none; border-bottom: 1px solid rgba(255,255,255,0.028);
  transition: background var(--t) var(--ease);
}
.cartRow:hover { background: rgba(255,255,255,0.009); }
.cartRow:last-of-type { border-bottom: none; }

@media (max-width: 560px) {
  .cartRow { grid-template-columns: 64px 1fr; grid-template-rows: auto auto; gap: 12px; }
  .cartRight { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

.cartThumb {
  width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
  background: var(--b3); flex-shrink: 0;
}
.cartThumb img { width: 100%; height: 100%; object-fit: cover; }

.cartName     { font-size: 13px; font-weight: 500; color: var(--tx); margin-bottom: 4px; }
.cartMetaLine { font-size: 11px; color: var(--tx3); }
.cartRight    { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cartQty      { display: flex; }

.cartLineTotal {
  font-family: var(--ff-b); font-size: 14px; font-weight: 600; color: var(--gold-mid);
}

.cartFooterGrid {
  display: flex; flex-direction: column; gap: 16px; padding: 20px;
  border: none; border-top: 1px solid rgba(255,255,255,0.036);
}
@media (min-width: 600px) {
  .cartFooterGrid { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}

.summaryBox { display: flex; flex-direction: column; gap: 10px; min-width: 200px; }
.summaryRow {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; gap: 24px;
}
.summaryTotal {
  padding-top: 10px; border: none;
  border-top: 1px solid rgba(255,255,255,0.042);
  font-size: 15px;
}
.cartActionsRight { display: flex; flex-direction: column; gap: 9px; }

/* ─────────────────────────────────────────────────────────────────────────────
   CHECKOUT — COIN OPTIONS
   ───────────────────────────────────────────────────────────────────────────── */

.coinOption {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border: none; border-radius: 12px; cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.020) 0%, rgba(255,255,255,0.005) 100%),
    rgba(14, 14, 14, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 1px rgba(255,255,255,0.038),
    0 2px 10px rgba(0,0,0,0.45);
  transition: box-shadow var(--t) var(--ease), background var(--t) var(--ease);
  position: relative;
}
.coinOption input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.coinOption:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.030) 0%, rgba(255,255,255,0.009) 100%),
    rgba(18, 18, 18, 0.90);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(var(--silver-rgb), 0.07),
    0 4px 16px rgba(0,0,0,0.50);
}

.coinOption.isSelected {
  background:
    linear-gradient(180deg, rgba(var(--silver-rgb), 0.07) 0%, rgba(var(--silver-rgb), 0.025) 100%),
    rgba(14, 14, 14, 0.90);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(var(--silver-rgb), 0.14),
    0 0 20px rgba(var(--silver-rgb), 0.05),
    0 4px 18px rgba(0,0,0,0.55);
  border: none;
}

.coinIcon { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.coinName { font-family: var(--ff-b); font-size: 12px; font-weight: 600; color: var(--tx); }
.coinCode { font-family: var(--ff-b); font-size: 9px; font-weight: 700; letter-spacing: 0.10em; color: var(--tx3); text-transform: uppercase; }

.coinGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACCOUNT STRIP
   ───────────────────────────────────────────────────────────────────────────── */

.accountStrip {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.accountStripText { font-size: 12px; }
.accountStripActions { display: flex; gap: 8px; }

/* ─────────────────────────────────────────────────────────────────────────────
   FORMS
   ───────────────────────────────────────────────────────────────────────────── */

.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }

.field label,
.fieldLabel {
  font-family: var(--ff-b); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx3);
}

.field input,
.field textarea,
.field select {
  width: 100%; padding: 13px 16px;
  font-family: var(--ff-b); font-size: 13px; font-weight: 400; color: var(--tx);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.020) 0%, rgba(255,255,255,0.005) 100%),
    rgba(10, 10, 10, 0.90);
  border: none; border-radius: 11px; outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.50),
    0 2px 10px rgba(0,0,0,0.40);
  -webkit-appearance: none;
  transition: box-shadow var(--t) var(--ease);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--tx3); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(var(--silver-rgb), 0.18),
    0 0 0 4px rgba(var(--silver-rgb), 0.06),
    0 4px 20px rgba(0,0,0,0.50);
}

.field textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

.field select {
  cursor: pointer;
  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='rgba(200,205,215,0.35)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.field input[type="radio"],
.field input[type="checkbox"] {
  width: auto; padding: 0; background: transparent; box-shadow: none; border: none;
}

.fieldError { font-size: 11px; color: var(--tone-bad); margin-top: 4px; }
.fieldHint { font-size: 11px; color: var(--tx3); margin-top: 4px; line-height: 1.35; }
.field.hasError input,
.field.hasError textarea,
.field.hasError select {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 1px rgba(210,100,100,0.30),
    0 2px 10px rgba(0,0,0,0.40);
}

.grid2 { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .grid2 { grid-template-columns: 1fr 1fr; } }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────────────────────
   INVOICE / ORDER PAGE
   ───────────────────────────────────────────────────────────────────────────── */

.invoiceHeader { text-align: center; padding: 28px 0 20px; margin-bottom: 20px; }
.invoiceRef {
  font-family: var(--ff-b); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--tx3); margin-bottom: 6px;
}
.invoiceStatus {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 16px;
  border-radius: 99px; font-family: var(--ff-b); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; border: none;
}
.invoiceStatusPending {
  background: rgba(var(--gold-rgb), 0.08); color: var(--gold-mid);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.14);
}
.invoiceStatusPaid {
  background: rgba(46,185,110,0.08); color: #5ec888;
  box-shadow: 0 0 0 1px rgba(46,185,110,0.16);
}
.invoiceStatusCancelled {
  background: rgba(210,100,100,0.08); color: rgba(240,130,130,0.90);
  box-shadow: 0 0 0 1px rgba(210,100,100,0.18);
}

.invoiceTable { width: 100%; }
.invoiceRow {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border: none;
  border-bottom: 1px solid rgba(255,255,255,0.042);
}
.invoiceRow:last-child { border-bottom: none; }
.invoiceLabel { font-size: 12px; color: var(--tx2); }
.invoiceValue { font-size: 14px; font-weight: 500; color: var(--tx); }

/* ─────────────────────────────────────────────────────────────────────────────
   RELATED PRODUCTS
   ───────────────────────────────────────────────────────────────────────────── */

.rvGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px; margin-top: 18px;
}

.rvCard {
  display: block; text-decoration: none; border-radius: 12px; border: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022) 0%, rgba(255,255,255,0.005) 100%),
    rgba(10, 10, 10, 0.90);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 1px rgba(255,255,255,0.030),
    0 3px 14px rgba(0,0,0,0.55);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.rvCard:hover {
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(var(--silver-rgb), 0.09),
    0 6px 24px rgba(0,0,0,0.68);
  transform: translateY(-4px);
}

.rvMedia { aspect-ratio: 4/3; overflow: hidden; background: var(--b3); }
.rvMedia img { width: 100%; height: 100%; object-fit: cover; }
.rvBody  { padding: 9px 11px; }
.rvName  { font-size: 10.5px; font-weight: 500; color: var(--tx); margin-bottom: 3px; line-height: 1.35; }
.rvPrice { font-size: 11px; color: var(--gold-mid); }

/* ─────────────────────────────────────────────────────────────────────────────
   ALERTS & BANNERS
   ───────────────────────────────────────────────────────────────────────────── */

.alertWarn {
  background: rgba(var(--gold-rgb), 0.045); color: var(--gold-mid);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.12); border: none;
}
.alertSuccess, .alertGood {
  background: rgba(46,185,110,0.045); color: #5ec888;
  box-shadow: 0 0 0 1px rgba(46,185,110,0.12); border: none;
}
.alertError {
  background: rgba(210,80,80,0.07); color: rgba(240,120,120,0.92);
  box-shadow: 0 0 0 1px rgba(210,80,80,0.16); border: none;
}
.alertTitle { font-weight: 700; margin-bottom: 4px; }
.alertTopSpace { margin-top: 16px; }

.holidayModeBanner {
  border-radius: 12px; border: none;
  background: rgba(var(--gold-rgb), 0.028);
  padding: 12px 16px; margin-bottom: 18px;
  font-size: 13px; color: var(--gold-mid); text-align: center;
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.09);
}
.holidayModeBannerInner { font-size: 15px; font-weight: 500; }

/* ─────────────────────────────────────────────────────────────────────────────
   ACCOUNT PAGES
   ───────────────────────────────────────────────────────────────────────────── */

.accountGrid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .accountGrid { grid-template-columns: 220px 1fr; } }

.accountSidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.020) 0%, rgba(255,255,255,0.005) 100%),
    rgba(10, 10, 10, 0.85);
  border: none; border-radius: 16px; padding: 22px; box-shadow: var(--sh-raised);
}

.accountNav { display: flex; flex-direction: column; gap: 4px; }
.accountNavLink {
  display: block; padding: 11px 14px;
  font-family: var(--ff-b); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(var(--silver-rgb), 0.38);
  text-decoration: none; border-radius: 10px; border: none; background: transparent;
  transition: all var(--t) var(--ease);
}
.accountNavLink:hover    { color: var(--silver-mid); background: rgba(var(--silver-rgb), 0.048); }
.accountNavLink.isActive { color: var(--silver-mid); background: rgba(var(--silver-rgb), 0.058); }

.orderHistory { display: flex; flex-direction: column; gap: 12px; }
.orderCard {
  background: rgba(var(--silver-rgb), 0.016); border: none; border-radius: 12px;
  padding: 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.028), 0 2px 12px rgba(0,0,0,0.42);
  transition: box-shadow var(--t) var(--ease);
}
.orderCard:hover {
  box-shadow: 0 0 0 1px rgba(var(--silver-rgb), 0.08), 0 4px 20px rgba(0,0,0,0.52);
}
.orderHeader  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.orderId      { font-size: 10.5px; font-weight: 700; color: rgba(var(--silver-rgb), 0.55); letter-spacing: 0.09em; text-transform: uppercase; }
.orderDate    { font-size: 11px; color: var(--tx3); }
.orderItems   { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.orderItem    { display: flex; justify-content: space-between; font-size: 13px; color: var(--tx2); }

/* ─────────────────────────────────────────────────────────────────────────────
   FAQ / CONTENT PAGES
   ───────────────────────────────────────────────────────────────────────────── */

.ticketPanel { max-width: 520px; margin: 0 auto; }
.ticketSuccessIcon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(46,185,110,0.07); border: none;
  box-shadow: 0 0 0 1px rgba(46,185,110,0.16); color: #5ec888;
  font-size: 20px; margin-bottom: 14px;
}

.faqHero { text-align: center; padding: 18px 0 24px; }
.faqHeroTitle {
  font-family: var(--ff-d); font-size: clamp(1.8rem, 7vw, 4rem);
  font-weight: 700; font-style: italic; letter-spacing: 0.02em;
  background: linear-gradient(155deg, var(--silver-hi) 0%, var(--silver-mid) 28%, var(--gold-mid) 58%, var(--gold-hi) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.faqHeroSub { font-size: 13px; color: var(--tx2); max-width: 440px; margin: 0 auto; }

.wysiwyg, .faqWysiwyg { font-size: 13.5px; line-height: 1.82; color: var(--tx2); }
.wysiwyg h2, .wysiwyg h3 {
  font-family: var(--ff-d); font-style: italic; font-weight: 700;
  color: var(--tx); margin: 22px 0 9px;
}
.wysiwyg p  { margin: 0 0 12px; }
.wysiwyg a  { color: var(--gold-mid); }
.wysiwyg table { width: 100%; }
.wysiwyg th, .wysiwyg td {
  padding: 11px 13px; font-size: 13px; text-align: left; border: none;
  border-bottom: 1px solid rgba(255,255,255,0.042);
}
.wysiwyg th { font-weight: 700; color: var(--tx); }

/* ─────────────────────────────────────────────────────────────────────────────
   EMPTY STATES / MISC
   ───────────────────────────────────────────────────────────────────────────── */

.panelEmpty { text-align: center; padding: var(--space-3xl) var(--space-xl); }
.panelActionsTop { margin-top: 14px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.panelTopSpace { margin-top: 18px; }
.notifyForm    { margin-top: 14px; }
.notifyField   { margin-bottom: 14px; }
.notifyHint    { margin-bottom: 14px; }

[data-copy] { cursor: pointer; }
[data-copy]:hover { opacity: 0.78; }
[data-skel] { background: var(--b3); }

/* ─────────────────────────────────────────────────────────────────────────────
   TOAST
   ───────────────────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: calc(var(--mob-h) + 16px + env(safe-area-inset-bottom, 0));
  left: 50%; transform: translateX(-50%) translateY(8px);
  z-index: 99998; max-width: 300px; width: max-content;
  padding: 11px 20px; border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.048) 0%, rgba(255,255,255,0.014) 100%),
    rgba(18, 18, 18, 0.96);
  border: none; color: var(--tx);
  font-family: var(--ff-b); font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(var(--silver-rgb), 0.09),
    0 10px 48px rgba(0,0,0,0.95);
  opacity: 0; pointer-events: none;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.toast.isShow, .toast.isVisible {
  opacity: 1; transform: translateX(-50%) translateY(0);
  transition: opacity 0.18s var(--ease), transform 0.20s var(--ease-spring);
}
@media (min-width: 768px) { .toast { bottom: 22px; } }

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────────────────── */

.footer {
  margin-top: 64px; padding: 32px 0 36px;
  border: none; background: transparent; position: relative;
}
.footer::before {
  content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--silver-rgb), 0.09) 20%,
    rgba(var(--gold-rgb), 0.20) 40%,
    rgba(var(--silver-rgb), 0.20) 50%,
    rgba(var(--gold-rgb), 0.20) 60%,
    rgba(var(--silver-rgb), 0.09) 80%,
    transparent);
}
.footerInner {
  max-width: 1360px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.footerCentered { text-align: center; }
.footerLinks { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; }
.footerLinks a {
  font-family: var(--ff-b); font-size: 9px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(var(--silver-rgb), 0.22); text-decoration: none;
  transition: color var(--t) var(--ease);
}
.footerLinks a:hover { color: var(--silver-mid); }
.footerCopy { font-size: 10px; color: var(--tx3); letter-spacing: 0.04em; }

/* ─────────────────────────────────────────────────────────────────────────────
   UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */

.muted     { color: var(--tx2); }
.small     { font-size: 11.5px; }
.mono      { font-family: 'SF Mono', 'Menlo', ui-monospace, monospace; }
.helpText  { font-size: 11px; color: var(--tx3); margin-top: 5px; }
.helpAccent { color: var(--gold-mid); }

/* Surface utility */
.surface {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0.007)),
    rgba(13, 13, 13, 0.90);
  border: none; border-radius: var(--r-card); box-shadow: var(--sh-raised);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.surface--flat     { box-shadow: var(--sh-flat); }
.surface--raised   { box-shadow: var(--sh-raised); }
.surface--elevated { box-shadow: var(--sh-elevated); }
.surface--hero     { box-shadow: var(--sh-hero); }
.surface--modal    { box-shadow: var(--sh-modal); }

/* Separators */
.sep, .hrSoft {
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--silver-rgb), 0.08) 30%,
    rgba(var(--gold-rgb), 0.12) 50%,
    rgba(var(--silver-rgb), 0.08) 70%,
    transparent);
  opacity: 0.60;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SCROLLBAR
   ───────────────────────────────────────────────────────────────────────────── */

* { scrollbar-width: thin; scrollbar-color: rgba(var(--silver-rgb), 0.12) transparent; }
*::-webkit-scrollbar { width: 4px; height: 4px; background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(var(--silver-rgb), 0.14), rgba(var(--silver-rgb), 0.07));
  border-radius: 99px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOCUS / ACCESSIBILITY
   ───────────────────────────────────────────────────────────────────────────── */

:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--silver-rgb), 0.28), 0 0 0 5px rgba(var(--silver-rgb), 0.09) !important;
  border-radius: 10px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ENTRANCE ANIMATIONS
   ───────────────────────────────────────────────────────────────────────────── */

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

.productGrid .card {
  animation: fadeSlideUp 0.44s var(--ease) both;
}
.productGrid .card:nth-child(1)  { animation-delay: 0.02s; }
.productGrid .card:nth-child(2)  { animation-delay: 0.07s; }
.productGrid .card:nth-child(3)  { animation-delay: 0.12s; }
.productGrid .card:nth-child(4)  { animation-delay: 0.17s; }
.productGrid .card:nth-child(5)  { animation-delay: 0.22s; }
.productGrid .card:nth-child(6)  { animation-delay: 0.27s; }
.productGrid .card:nth-child(n+7) { animation-delay: 0.32s; }

/* ─────────────────────────────────────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────────────────────────────────────── */

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

@media (hover: none) {
  .btn { -webkit-tap-highlight-color: transparent; }
  .card:hover { transform: none; }
  .card:active { transform: scale(0.975); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRINT
   ───────────────────────────────────────────────────────────────────────────── */

@media print {
  .topbar, .mobileNav, .footer, .btn, .navLink { display: none !important; }
  body { background: #fff !important; color: #000 !important; padding: 0 !important; }
  .panel { box-shadow: none; border: 1px solid #ddd; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   END — sassy-premium-2026.css  |  OBSIDIAN REMASTER 2026
   ═══════════════════════════════════════════════════════════════════════════════ */


/* ===== store-contract.css ===== */
/*
  STORE_CONTRACT_V1
  Purpose: stop storefront drift by standardising product cards, product detail purchase block,
  cart layout, and checkout form rhythm.
  Loaded after bundle.css and overrides_v146.css.
*/

:root{
  --store-radius: 18px;
  --store-radius-sm: 14px;
  --store-gap: 14px;
  --store-gap-lg: 18px;
  --store-control-h: 46px;
  --store-control-h-sm: 40px;
  --store-ring: 0 0 0 3px rgba(var(--gold-rgb), .16);
  --store-border: 1px solid rgba(255,255,255,.08);
  --store-border-gold: 1px solid rgba(var(--gold-rgb), .18);
  --store-bg: rgba(255,255,255,.03);
  --store-bg-strong: rgba(0,0,0,.55);
}

/* Holiday mode banner, storefront only */
.holidayModeBanner{
  margin: 18px 0 6px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, #141414 0%, #070707 55%, #000000 100%);
  box-shadow:
    0 18px 60px rgba(0,0,0,.70),
    0 0 0 1px rgba(0,0,0,.35),
    0 10px 30px rgba(255,0,0,.10);
}
.holidayModeBannerInner{
  padding: 18px 16px;
  text-align: center;
  color: rgba(255,255,255,.92);
  line-height: 1.65;
  font-weight: 600;
  text-shadow: 0 0 18px rgba(255,0,0,.22);
}

/* Store header spacing polish */
.storeHead{ margin-top: 10px; }
.storeHeadTitle{ letter-spacing: .02em; }

/* Product grid contract */
.productGrid{
  display: grid;
  gap: var(--store-gap);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  align-items: stretch;
}
@media (max-width: 860px){
  .productGrid{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 520px){
  .productGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.card.productCard{
  border-radius: var(--store-radius);
  border: var(--store-border);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:
    0 22px 70px rgba(0,0,0,.60),
    0 0 46px rgba(var(--gold-rgb), .05),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card.productCard .cardMedia{
  aspect-ratio: 4 / 5;
  background: radial-gradient(circle at 30% 10%, rgba(255,255,255,.08), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.25));
}
.card.productCard .cardMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
}

.card.productCard .cardBody{
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card.productCard .cardTitle{
  line-height: 1.2;
}

.card.productCard .cardMeta{
  display: grid;
  gap: 10px;
}

.card.productCard .cardActions{
  margin-top: auto;
}

/* Buttons and inputs, storefront rhythm only */
html body .btn{
  min-height: var(--store-control-h);
  border-radius: var(--store-radius-sm);
}
html body .btn.btnSmall{
  min-height: var(--store-control-h-sm);
  border-radius: 12px;
}

html body .form .input,
html body .form input:not(.qtyInput):not([type="checkbox"]):not([type="radio"]),
html body .form select,
html body .form textarea{
  min-height: var(--store-control-h);
  border-radius: var(--store-radius-sm);
}

html body .form .input:focus,
html body .form input:not(.qtyInput):focus,
html body .form select:focus,
html body .form textarea:focus{
  outline: none;
  box-shadow: var(--store-ring);
}

/* Product detail polish */
.detailGrid{
  gap: 18px;
}
@media (max-width: 980px){
  .detailGrid{ grid-template-columns: 1fr; }
}

.detailTitle{ letter-spacing: .01em; }

.detailAddBtn{
  min-height: 52px;
  border-radius: 16px;
}

.qtyPill{
  border-radius: 16px;
}

/* Cart layout contract */
.cartCard{ overflow: hidden; }

.cartRow{
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.cartRow:first-child{ border-top: 0; }

.cartThumb{
  width: 84px;
  height: 84px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.cartRight{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.cartLineTotal{
  font-weight: 850;
  letter-spacing: .01em;
}

.cartFooterGrid{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 14px;
  margin-top: 10px;
}

@media (max-width: 860px){
  .cartFooterGrid{ grid-template-columns: 1fr; }
  .cartActionsRight{ display: grid; grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 620px){
  .cartRow{
    grid-template-columns: 72px 1fr;
    grid-template-rows: auto auto;
    align-items: start;
  }
  .cartThumb{ width: 72px; height: 72px; border-radius: 16px; }
  .cartRight{ grid-column: 1 / -1; align-items: flex-start; }
  .cartLineTotal{ align-self: flex-end; }
}

/* Checkout layout contract */
.grid2{
  gap: 18px;
}
@media (max-width: 980px){
  .grid2{ grid-template-columns: 1fr; }
}

.row2{
  gap: 12px;
}
@media (max-width: 680px){
  .row2{ grid-template-columns: 1fr; }
}

/* Keep long tables usable on mobile without sideways scroll */
.tableWrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.tableWrap table{ min-width: 680px; }


/* Checkout holiday panel */
.holidayCheckoutPanel{
  margin-top: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, #141414 0%, #070707 55%, #000000 100%);
  padding: 30px 22px;
  text-align: center;
  box-shadow:
    0 20px 70px rgba(0,0,0,.75),
    0 10px 34px rgba(255,0,0,.10);
}
.holidayCheckoutIcon{
  font-size: 38px;
  margin-bottom: 10px;
}
.holidayCheckoutTitle{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(var(--gold-rgb), .92);
  margin-bottom: 10px;
}
.holidayCheckoutMsg{
  line-height: 1.75;
  color: rgba(255,255,255,.86);
  max-width: 560px;
  margin: 0 auto;
  text-shadow: 0 0 18px rgba(255,0,0,.18);
}


/* Checkout order summary contract */
.cartSummaryList{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cartSummaryItem{
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
}
.cartSummaryThumb{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cartSummaryThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cartSummaryDot{
  font-weight: 900;
}
.cartSummaryMeta{
  min-width: 0;
}
.cartSummaryName{
  font-weight: 750;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cartSummarySub{
  margin-top: 2px;
  line-height: 1.35;
}
.cartSummaryLine{
  font-weight: 700;
}

.divider{
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 16px 0;
}

.cartSummaryTotals{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cartSummaryTotalRow{
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.cartSummaryDiscount{
  color: rgba(48,209,88,.92);
  font-weight: 800;
}
.cartSummaryFree{
  color: rgba(48,209,88,.92);
  font-weight: 900;
}
.cartSummaryTotalRowBig{
  align-items: baseline;
  margin-top: 2px;
}
.cartSummaryTotalLabel{
  font-weight: 900;
}
.cartSummaryGrand{
  font-size: 18px;
  font-weight: 950;
  color: rgba(var(--gold-rgb), .92);
}
.cartSummaryHelp{
  margin-top: 2px;
  line-height: 1.55;
}

.cartSummaryNext{
  margin-top: 16px;
  display: grid;
  gap: 10px;
}
.nextCard{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.nextTitle{
  font-weight: 850;
}
.nextText{
  margin-top: 4px;
  line-height: 1.6;
}


/* =========================================================
   STOREFRONT_BILLION_V1 (front-end only)
   Scope: product grid cards, related cards, store hero, polish.
   Loaded via store-contract.css after bundle.css.
   ========================================================= */

:root{
  --store-radius: 20px;
  --store-radius-sm: 14px;
  --store-gap: 16px;
  --store-gap-lg: 20px;

  --store-ease: cubic-bezier(.2,.8,.2,1);
  --store-dur: 180ms;
  --store-dur-slow: 320ms;

  --store-surface: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  --store-surface-2: linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.10));
  --store-border: 1px solid rgba(255,255,255,.10);
  --store-border-soft: 1px solid rgba(255,255,255,.08);
  --store-ring: 0 0 0 3px rgba(var(--gold-rgb), .18);

  --store-shadow: 0 26px 85px rgba(0,0,0,.62);
  --store-shadow-hover: 0 34px 110px rgba(0,0,0,.70);
  --store-glow: 0 0 0 1px rgba(var(--gold-rgb), .14), 0 0 60px rgba(var(--gold-rgb), .08);
}

/* Reduce layout jitter + make hover feel “expensive” */
.productGrid{ gap: var(--store-gap); }
@media (max-width: 520px){ .productGrid{ gap: 12px; } }

.storeHead{
  position: relative;
  padding: 22px 18px 10px;
  margin-top: 6px;
  text-align: center;
}
.storeHeadTitle{
  margin: 0;
  font-family: var(--display);
  font-weight: 1000;
  font-size: clamp(28px, 3.4vw, 58px);
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-shadow: 0 10px 60px rgba(0,0,0,.45);
}
.storeHead::after{
  content:"";
  display:block;
  height: 1px;
  max-width: 980px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .35), rgba(255,255,255,.10), rgba(var(--gold-rgb), .18), transparent);
  opacity: .9;
}

.card.productCard{
  position: relative;
  background: var(--store-surface);
  border: var(--store-border-soft);
  box-shadow: var(--store-shadow), inset 0 1px 0 rgba(255,255,255,.07);
  transform: translateZ(0);
  transition: transform var(--store-dur) var(--store-ease),
              box-shadow var(--store-dur) var(--store-ease),
              border-color var(--store-dur) var(--store-ease),
              filter var(--store-dur) var(--store-ease);
}

/* Premium gradient edge */
.card.productCard::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(var(--gold-rgb), .22), rgba(255,255,255,.10), rgba(var(--gold-rgb), .10));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
  opacity:.55;
  transition: opacity var(--store-dur) var(--store-ease);
}

.card.productCard:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.14);
  box-shadow: var(--store-shadow-hover), var(--store-glow), inset 0 1px 0 rgba(255,255,255,.08);
  filter: saturate(1.03);
}
.card.productCard:hover::before{ opacity: .9; }

.card.productCard:focus-within{
  box-shadow: var(--store-shadow-hover), var(--store-glow), inset 0 1px 0 rgba(255,255,255,.08);
}
.card.productCard .cardLink:focus-visible{
  outline: none;
  box-shadow: var(--store-ring);
  border-radius: calc(var(--store-radius) - 2px);
}

.card.productCard .cardMedia{
  position: relative;
  background: radial-gradient(circle at 30% 12%, rgba(255,255,255,.10), transparent 58%),
              var(--store-surface-2);
}
.card.productCard .cardMedia::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  pointer-events:none;
  opacity:.85;
}
.card.productCard .cardMedia img{
  transition: transform var(--store-dur-slow) var(--store-ease), filter var(--store-dur) var(--store-ease);
  will-change: transform;
}
.card.productCard:hover .cardMedia img{
  transform: scale(1.035);
  filter: contrast(1.02) saturate(1.05);
}

.card.productCard .cardBody{
  padding: 14px 14px 16px;
  gap: 10px;
}
.card.productCard .cardTitle{
  font-family: var(--display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -0.01em;
}
@media (min-width: 860px){
  .card.productCard .cardTitle{ font-size: 17px; }
}

.card.productCard .cardMeta{
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}
.card.productCard .priceNow{
  font-family: var(--display);
  font-weight: 1000;
  letter-spacing: -0.01em;
  font-size: 18px;
}
.card.productCard .priceWas{
  opacity: .65;
  text-decoration-thickness: 2px;
}
.card.productCard .badgeRow{
  justify-content: flex-end;
  gap: 8px;
}
.card.productCard .badge{
  padding: 6px 10px;
  border-color: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}

/* Button polish (storefront only) */
.productCard .btnPrimary{
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .22), rgba(var(--gold-rgb), .12));
  border: 1px solid rgba(var(--gold-rgb), .28);
  box-shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform var(--store-dur) var(--store-ease),
              filter var(--store-dur) var(--store-ease),
              box-shadow var(--store-dur) var(--store-ease);
}
.productCard .btnPrimary:hover{
  filter: saturate(1.05);
  transform: translateY(-1px);
  box-shadow: 0 18px 58px rgba(0,0,0,.55), 0 0 50px rgba(var(--gold-rgb), .10), inset 0 1px 0 rgba(255,255,255,.12);
}
.productCard .btnPrimary:active{ transform: translateY(0); }
.productCard .btnPrimary[disabled]{ filter: grayscale(.2) brightness(.92); transform:none; }

@media (prefers-reduced-motion: reduce){
  .card.productCard,
  .card.productCard::before,
  .card.productCard .cardMedia img,
  .productCard .btnPrimary{ transition: none !important; }
}

/* Related products: match the main cards */
.rvGrid{ gap: 14px; }
.rvCard{
  position: relative;
  background: var(--store-surface);
  border: var(--store-border-soft);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform var(--store-dur) var(--store-ease), box-shadow var(--store-dur) var(--store-ease), border-color var(--store-dur) var(--store-ease);
}
.rvCard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 26px 85px rgba(0,0,0,.65), 0 0 55px rgba(var(--gold-rgb), .08), inset 0 1px 0 rgba(255,255,255,.07);
}
.rvMedia{ background: radial-gradient(circle at 30% 12%, rgba(255,255,255,.10), transparent 58%), rgba(255,255,255,.02); }
.rvName{
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.01em;
}



/* ===== elite-overrides.css ===== */
/*
================================================================================
  OBSIDIAN — elite-overrides.css
  Final-word surgical layer. Load order: 2 of 2 (after sassy-premium-2026.css).
  Small by design. No second theme.
================================================================================
*/

/* ─────────────────────────────────────────────────────────────────────────────
   BORDER ENFORCEMENT — kill stray borders on all surface elements
   ───────────────────────────────────────────────────────────────────────────── */

.panel,
.card,
.summaryBox,
.cartRow,
.rvCard,
.faqCard,
.ticketCard,
.noticeCard,
.detailCard {
  border: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   INPUT BORDER ENFORCEMENT
   ───────────────────────────────────────────────────────────────────────────── */

input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not(.qtyInput),
select,
textarea {
  border: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   QTY INPUT — restore hairline separators as design detail only
   ───────────────────────────────────────────────────────────────────────────── */

.qtyInput {
  border: none !important;
  border-left:  1px solid rgba(194, 200, 208, 0.06) !important;
  border-right: 1px solid rgba(194, 200, 208, 0.06) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CART INTERNAL HAIRLINES
   ───────────────────────────────────────────────────────────────────────────── */

.cartHead       { border: none !important; border-bottom: 1px solid rgba(255,255,255,.036) !important; }
.cartRow        { border: none !important; border-bottom: 1px solid rgba(255,255,255,.028) !important; }
.cartRow:last-of-type { border-bottom: none !important; }
.cartFooterGrid { border: none !important; border-top: 1px solid rgba(255,255,255,.036) !important; }
.summaryTotal   { border: none !important; border-top: 1px solid rgba(255,255,255,.042) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTON TEXT — prevent any gradient text bleed on primary
   ───────────────────────────────────────────────────────────────────────────── */

.btnPrimary,
.btnPrimary:is(a, button, [type="submit"]) {
  -webkit-text-fill-color: var(--silver-mid) !important;
}
.btnPrimary:hover { -webkit-text-fill-color: var(--silver-hi) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   PRICE — force flat gold, no gradients or animations
   ───────────────────────────────────────────────────────────────────────────── */

.priceNow {
  -webkit-text-fill-color: var(--gold-mid) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  filter: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   STORE HEAD TITLE — guarantee chrome gradient, no animation interference
   ───────────────────────────────────────────────────────────────────────────── */

.storeHeadTitle {
  animation: none !important;
  background-size: 100% 100% !important;
}
.storeHeadMascot { animation: none !important; filter: drop-shadow(0 12px 40px rgba(194,200,208,0.09)) drop-shadow(0 4px 16px rgba(0,0,0,0.80)) !important; transform: none !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   TOPBAR — no border-bottom ever
   ───────────────────────────────────────────────────────────────────────────── */

.topbar {
  border: none !important;
  border-bottom: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COIN OPTION — selected ring is box-shadow not border
   ───────────────────────────────────────────────────────────────────────────── */

.coinOption           { border: none !important; }
.coinOption.isSelected { border: none !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   HR / DIVIDERS — consistent gradient fade
   ───────────────────────────────────────────────────────────────────────────── */

hr,
.divider,
.line,
.panelDivider,
.cartDivider {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    rgba(255,255,255,0)         0%,
    rgba(194,200,208,.10)      25%,
    rgba(185,150,90,.22)       50%,
    rgba(194,200,208,.10)      75%,
    rgba(255,255,255,0)       100%) !important;
  opacity: 0.75 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOCUS — unified premium ring
   ───────────────────────────────────────────────────────────────────────────── */

:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(194,200,208,0.28), 0 0 0 5px rgba(194,200,208,0.09) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACCESSIBILITY UTILITY
   ───────────────────────────────────────────────────────────────────────────── */

.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SUPPORT TICKETS — post-submit link + copy UI
   ───────────────────────────────────────────────────────────────────────────── */

.ticketLinkBox{
  width: min(100%, 560px) !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 10px !important;
}

.ticketLinkInput{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(200,210,225,.18) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(240,244,248,.88) !important;
  font-size: 13px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.ticketLinkInput:focus{
  outline: none !important;
  box-shadow:
    0 0 0 2px rgba(194,200,208,0.22),
    0 0 0 5px rgba(194,200,208,0.08),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.ticketCopyBtn{
  white-space: nowrap !important;
}

.ticketCopyOk{
  margin-top: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: rgba(47,226,154,.10) !important;
  border: 1px solid rgba(47,226,154,.22) !important;
  color: rgba(47,226,154,.92) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

@media (max-width: 520px){
  .ticketLinkBox{ flex-direction: column !important; }
  .ticketCopyBtn{ width: 100% !important; }
  .ticketLinkInput{ width: 100% !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   REDUCED MOTION — final authority
   ───────────────────────────────────────────────────────────────────────────── */

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

/* ─────────────────────────────────────────────────────────────────────────────
   PRINT
   ───────────────────────────────────────────────────────────────────────────── */

@media print {
  .topbar, .mobileNav, .footer, .btn { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ================================================================================
   END — elite-overrides.css  |  OBSIDIAN REMASTER 2026
   ================================================================================ */


/* ===== storefront-gold-ascend.css ===== */
/*
 OBSIDIAN ASCEND v5 - Lifted blacks, warmer silver, gold used as accent.
 Loads after elite-overrides.css. Storefront ONLY.

 SILVER chrome → Button surfaces, headings, titles, prices, nav, all surfaces
 GOLD gradient → Button text and active accents
 GREEN → Success states
 NO gold-rgb in any background, box-shadow, or surface anywhere
*/

:root {
  /* Gold is only used where it matters, as accents */
  --gold-btn-text: linear-gradient(135deg,
    #E9DDC0 0%, #D8C49A 18%, #C6AD78 38%,
    #B18E4B 55%, #C6AD78 72%, #D8C49A 88%, #E9DDC0 100%);
  --gold-btn-text-bright: linear-gradient(135deg,
    #F3EAD1 0%, #E9DDC0 25%, #D8C49A 55%, #E9DDC0 100%);

  /* Warmer silver so the UI doesn't read icy or blue */
  --silver-text-gradient: linear-gradient(135deg,
    #F3F2F0 0%, #DED9D2 18%, #C7C0B6 38%,
    #B2ABA0 55%, #C7C0B6 70%, #DED9D2 85%, #F3F2F0 100%);
  --silver-text-gradient-soft: linear-gradient(135deg,
    rgba(243,242,240,0.70) 0%, rgba(199,192,182,0.58) 40%,
    rgba(178,171,160,0.50) 60%, rgba(199,192,182,0.58) 80%,
    rgba(243,242,240,0.70) 100%);

  /* Sizing ladder, tuned for consistent rhythm */
  --fs-nav: clamp(0.62rem, 0.30vw + 0.56rem, 0.78rem);
  --fs-cat: clamp(0.64rem, 0.34vw + 0.58rem, 0.82rem);
  --fs-card-title: clamp(0.78rem, 0.25vw + 0.74rem, 0.90rem);
  --fs-price: clamp(1.05rem, 0.45vw + 0.98rem, 1.26rem);
  --fs-btn: clamp(0.66rem, 0.28vw + 0.62rem, 0.80rem);
  --fs-mob-label: clamp(0.54rem, 0.22vw + 0.52rem, 0.62rem);
  --ico-mob: 23px;
}

 /* TEXT CLIPPING FIX */
.pageTitle, .detailTitle, .storeHeadTitle, .faqHeroTitle {
  padding-bottom: 0.15em !important; overflow: visible !important;
  display: block !important; width: 100% !important;
}
.panelTitle, .panelEmpty .panelTitle, .cardTitle, .rvName, .invoiceRef {
  padding-bottom: 0.10em !important; overflow: visible !important;
}

/* BACKGROUND - Lifted obsidian, no cheap pattern, just atmosphere */
body {
  background-color: #070707 !important;
  background-image:
    radial-gradient(ellipse 140% 58% at 50% -6%,
      rgba(var(--silver-rgb), 0.032) 0%,
      rgba(var(--silver-rgb), 0.010) 44%,
      transparent 72%),
    radial-gradient(ellipse 120% 44% at 50% 112%,
      rgba(var(--silver-rgb), 0.016) 0%,
      transparent 64%),
    radial-gradient(ellipse 120% 52% at 12% 18%,
      rgba(255, 238, 212, 0.014) 0%,
      transparent 70%),
    linear-gradient(180deg,
      #0B0B0B 0%,
      #070707 28%,
      #050505 60%,
      #040404 100%) !important;

  position: relative !important;
  isolation: isolate !important;
}

/* Micro grain, extremely subtle */
body::after {
  content: '' !important;
  position: fixed !important;
  inset: -40% !important;
  pointer-events: none !important;
  z-index: -1 !important;
  opacity: 0.028 !important;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.016) 0,
      rgba(255,255,255,0.016) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 7px
    ),
    repeating-linear-gradient(25deg,
      rgba(0,0,0,0.016) 0,
      rgba(0,0,0,0.016) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 9px
    ) !important;
  mix-blend-mode: overlay !important;
  transform: translateZ(0) !important;
}

/* CARDS - Glass */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.018) 40%, rgba(255,255,255,0.008) 100%), rgba(16,16,16,0.88) !important;
  border: none !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.55), 0 6px 24px rgba(0,0,0,0.75), 0 16px 48px rgba(0,0,0,0.50) !important;
}
@media (hover: hover) {
  .card:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.070) 0%, rgba(255,255,255,0.025) 40%, rgba(255,255,255,0.012) 100%), rgba(18,18,18,0.90) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.90), 0 0 0 1px rgba(var(--silver-rgb), 0.06), 0 16px 56px rgba(0,0,0,0.82), 0 36px 90px rgba(0,0,0,0.48) !important;
  }
}

.cardBody {
  position: static !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.030) 0%, rgba(255,255,255,0.008) 100%), rgba(14,14,14,0.92) !important;
}
.cardTitle, .cardMeta, .cardActions { position: relative !important; z-index: 4 !important; }
.cardActions { z-index: 5 !important; }

.cardPh { background: linear-gradient(145deg, rgba(var(--silver-rgb), 0.022) 0%, #0E0E0E 50%, #090909 100%) !important; }
.cardPhMark { color: rgba(var(--silver-rgb), 0.07) !important; }

/* TITLES - Silver */
.cardTitle {
  text-align: center !important; font-size: var(--fs-card-title) !important; font-weight: 600 !important;
  letter-spacing: 0.012em !important; line-height: 1.45 !important;
  background: var(--silver-text-gradient) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: var(--silver-hi) !important;
}
.cardMeta { text-align: center !important; }
.price { justify-content: center !important; }
.priceNow {
  font-size: var(--fs-price) !important; font-weight: 700 !important;
  background: var(--silver-text-gradient) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: var(--silver-hi) !important;
}
.priceWas { display: none !important; }

/* BADGES - On the image */
.badgeRow {
  position: absolute !important; top: 14px !important; left: 14px !important;
  right: auto !important; z-index: 20 !important;
  justify-content: flex-start !important; gap: 6px !important;
}
.badge {
  padding: 5px 10px 4px !important; font-size: 7.5px !important; font-weight: 700 !important;
  letter-spacing: 0.14em !important; border-radius: 5px !important; border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.60), 0 0 0 1px rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}
.badge::before { display: none !important; }
.badgeOut { background: rgba(0,0,0,0.55) !important; color: rgba(var(--silver-rgb), 0.75) !important; }
.badgeLow, .badgeManualLow { background: rgba(0,0,0,0.55) !important; color: rgba(var(--silver-rgb), 0.75) !important; }
.badgeSale { background: rgba(0,0,0,0.55) !important; color: rgba(var(--silver-rgb), 0.85) !important; }
.badgeSoon { background: rgba(0,0,0,0.55) !important; color: rgba(100,185,255, 0.85) !important; }
.detailBadge, .badge.detailBadge {
  background: rgba(0,0,0,0.55) !important; color: rgba(var(--silver-rgb), 0.75) !important;
  border: none !important; box-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}
.detailBadge::before { display: none !important; }

/* ADD TO CART - Silver chrome surface, GOLD text */
.cardActions .btn,
.cardActions .btnPrimary,
.cardActions button[data-add-to-cart],
body.storeIndex .productGrid .cardActions .btn,
body.storeIndex .productGrid .cardActions .btnPrimary,
body.storeIndex .productGrid .cardActions .btn.btnPrimary,
body.storeIndex .productGrid .cardActions .btn.btnPrimary.btnWide,
body.storeIndex .productGrid article.card.productCard .cardActions .btn.btnPrimary.btnWide {
  min-height: 46px !important; padding: 12px 14px !important;
  font-size: var(--fs-btn) !important; font-weight: 700 !important; letter-spacing: 0.18em !important;
  background: linear-gradient(180deg, rgba(var(--silver-rgb), 0.12) 0%, rgba(var(--silver-rgb), 0.04) 50%, rgba(var(--silver-rgb), 0.06) 100%), rgba(14,14,14,0.88) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.60), 0 3px 14px rgba(0,0,0,0.55) !important;
}
.cardActions .btnText,
.cardActions .btn .btnText,
body.storeIndex .productGrid .cardActions .btnText {
  background: var(--gold-btn-text) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: #D4BC82 !important;
  font-size: var(--fs-btn) !important; font-weight: 700 !important; letter-spacing: 0.18em !important;
  filter: none !important; animation: none !important;
}
@media (hover: hover) {
  .cardActions .btn:hover, .cardActions .btnPrimary:hover, .cardActions button[data-add-to-cart]:hover {
    background: linear-gradient(180deg, rgba(var(--silver-rgb), 0.18) 0%, rgba(var(--silver-rgb), 0.07) 50%, rgba(var(--silver-rgb), 0.09) 100%), rgba(16,16,16,0.92) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.75), 0 0 20px rgba(var(--silver-rgb), 0.06), 0 6px 22px rgba(0,0,0,0.70) !important;
  }
  .cardActions .btn:hover .btnText, .cardActions .btnPrimary:hover .btnText {
    background: var(--gold-btn-text-bright) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
}

.detailAddBtn {
  font-size: calc(var(--fs-btn) + 0.10rem) !important; letter-spacing: 0.18em !important; font-weight: 700 !important;
  background: linear-gradient(180deg, rgba(var(--silver-rgb), 0.14) 0%, rgba(var(--silver-rgb), 0.05) 50%, rgba(var(--silver-rgb), 0.07) 100%), rgba(14,14,14,0.85) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.72), 0 6px 22px rgba(0,0,0,0.55) !important;
}
.detailAddBtn:hover {
  background: linear-gradient(180deg, rgba(var(--silver-rgb), 0.22) 0%, rgba(var(--silver-rgb), 0.10) 50%, rgba(var(--silver-rgb), 0.12) 100%), rgba(14,14,14,0.90) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -1px 0 rgba(0,0,0,0.82), 0 0 28px rgba(var(--silver-rgb), 0.06), 0 8px 28px rgba(0,0,0,0.65) !important;
}
.detailAddBtn .btnText {
  background: var(--gold-btn-text) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: #D4BC82 !important;
  font-size: calc(var(--fs-btn) + 0.10rem) !important; font-weight: 700 !important; letter-spacing: 0.18em !important;
  filter: none !important; animation: none !important;
}
@media (max-width: 767px) {
  .cardActions .btn, .cardActions .btnPrimary, .cardActions button[data-add-to-cart],
  body.storeIndex .productGrid .cardActions .btn.btnPrimary.btnWide {
    min-height: 50px !important; padding: 13px 16px !important; border-radius: 12px !important;
  }
  .cardActions .btnText, .cardActions .btn .btnText { font-size: calc(var(--fs-btn) + 0.05rem) !important; }
  .detailAddBtn { height: 64px !important; font-size: 12px !important; border-radius: 16px !important; }
  .detailAddBtn .btnText { font-size: 12px !important; }
}

/* TOP NAV - Silver, bigger */
.navLink {
  background: var(--silver-text-gradient-soft) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: var(--silver-mid) !important;
  font-weight: 600 !important;
}
.navLink:hover, .navLink.navLinkActive {
  background: var(--silver-text-gradient) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
@media (min-width: 768px) {
  .navLink { font-size: var(--fs-nav) !important; letter-spacing: 0.16em !important; padding: 10px 16px !important; }
}
.topbar { box-shadow: 0 1px 0 rgba(var(--silver-rgb), 0.06), 0 4px 32px rgba(0,0,0,0.96) !important; }
.navCount { background: linear-gradient(135deg, #D7D1C7, #B9B2A7) !important; color: #000 !important; -webkit-text-fill-color: #000 !important; }
.navLink.navLinkActive::after {
  background: linear-gradient(90deg, transparent, rgba(var(--silver-rgb), 0.56) 20%, rgba(var(--silver-rgb), 0.85) 50%, rgba(var(--silver-rgb), 0.56) 80%, transparent) !important;
}
@media (max-width: 767px) {
  .topbar {
    display: flex !important; height: 54px !important; background: rgba(6,6,6,0.97) !important;
    backdrop-filter: blur(48px) saturate(200%) !important; -webkit-backdrop-filter: blur(48px) saturate(200%) !important;
    box-shadow: 0 1px 0 rgba(var(--silver-rgb), 0.05), 0 4px 32px rgba(0,0,0,0.96) !important;
  }
  .topbarInner { justify-content: center !important; padding: 0 12px !important; }
  .nav { gap: 0px !important; justify-content: center !important; }
  .navLink { font-size: calc(var(--fs-nav) - 0.08rem) !important; letter-spacing: 0.14em !important; padding: 6px 11px !important; }
  .navCount { min-width: 17px !important; height: 17px !important; font-size: 8.5px !important; }
  body { padding-top: 0 !important; }
  main.wrap, .wrap { padding-top: 16px !important; }
}

/* BOTTOM NAV - Silver labels, gold on active */
@media (max-width: 767px) {
  .mobileNavLabel {
  background: var(--silver-text-gradient-soft) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: var(--fs-mob-label) !important; font-weight: 700 !important; letter-spacing: 0.13em !important;
  opacity: 0.72 !important;
}
.mobileNavItem.mobileNavActive .mobileNavLabel {
  background: var(--gold-btn-text-bright) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 1 !important;
}
.mobileNavItem svg { width: var(--ico-mob) !important; height: var(--ico-mob) !important; stroke-width: 1.7 !important; stroke: rgba(var(--silver-rgb), 0.34) !important; }
  .mobileNavItem.mobileNavActive svg { stroke: rgba(var(--silver-rgb), 0.70) !important; }
  .mobileNavIconWrap { width: 44px !important; height: 36px !important; }
  .mobileNavItem.mobileNavActive .mobileNavIconWrap {
    background: rgba(var(--silver-rgb), 0.04) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.60), 0 8px 24px rgba(0,0,0,0.70), 0 0 0 1px rgba(255,238,212,0.05) !important;
  }
  .mobileNavItem::before {
    background: linear-gradient(90deg, transparent, rgba(var(--silver-rgb), 0.40) 35%, rgba(var(--silver-rgb), 0.70) 50%, rgba(var(--silver-rgb), 0.40) 65%, transparent) !important;
  }
  .mobileNavBadge { min-width: 17px !important; height: 17px !important; font-size: 8px !important; background: linear-gradient(135deg, #D7D1C7, #B9B2A7) !important; color: #000 !important; }
  body { padding-bottom: calc(var(--mob-h) + env(safe-area-inset-bottom, 0px) + 12px) !important; }
  .mobileNav {
    background: rgba(6,6,6,0.96) !important;
    border-top: 1px solid rgba(var(--silver-rgb), 0.05) !important;
    box-shadow: 0 -1px 0 rgba(var(--silver-rgb), 0.04), 0 -24px 72px rgba(0,0,0,0.98) !important;
  }
}

/* CATEGORY NAV - Gold text */
.catNav { justify-content: center !important; gap: 4px !important; padding-bottom: 24px !important; }
.catLink {
  font-size: var(--fs-cat) !important; font-weight: 600 !important; letter-spacing: 0.15em !important;
  padding: 8px 16px 12px !important;
  background: var(--silver-text-gradient-soft) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: rgba(var(--silver-rgb), 0.55) !important; opacity: 0.78 !important;
}
.catLink:hover { opacity: 0.85 !important; }
.catLink.isActive {
  opacity: 1 !important;
  background: var(--gold-btn-text-bright) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.catLink::after {
  background: linear-gradient(90deg, transparent 0%, rgba(var(--silver-rgb), 0.30) 15%, rgba(var(--silver-rgb), 0.60) 40%, rgba(var(--silver-rgb), 0.70) 50%, rgba(var(--silver-rgb), 0.60) 60%, rgba(var(--silver-rgb), 0.30) 85%, transparent 100%) !important;
}
@media (max-width: 720px) {
  .catNav { justify-content: center !important; flex-wrap: wrap !important; overflow-x: visible !important; white-space: normal !important; padding: 0 12px 20px !important; }
  .catLink { font-size: var(--fs-cat) !important; padding: 7px 14px 11px !important; }
}

/* HEADINGS - Silver */
.pageTitle {
  text-align: center !important;
  background: var(--silver-text-gradient) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: var(--silver-hi) !important; line-height: 1.15 !important;
}
.detailTitle {
  text-align: center !important;
  background: var(--silver-text-gradient) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: var(--silver-hi) !important; line-height: 1.18 !important;
}
.panelTitle {
  text-align: center !important;
  background: var(--silver-text-gradient-soft) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: var(--silver-mid) !important;
  font-size: calc(var(--fs-nav) - 0.08rem) !important; letter-spacing: 0.22em !important; line-height: 1.4 !important;
}
.faqHeroTitle {
  background: var(--silver-text-gradient) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; line-height: 1.15 !important;
}
.storeHeadTitle { animation: none !important; background-size: 100% 100% !important; line-height: 1.12 !important; }
.rvName {
  text-align: center !important;
  background: var(--silver-text-gradient-soft) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: var(--silver-mid) !important;
  font-size: calc(var(--fs-card-title) - 0.03rem) !important; font-weight: 600 !important; line-height: 1.4 !important;
}
.panelEmpty .panelTitle {
  text-align: center !important;
  background: var(--silver-text-gradient) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; font-size: 11px !important; letter-spacing: 0.22em !important;
}
.cartHead .panelTitle { text-align: left !important; }

/* STORE HEADER - Silver glow */
.storeHead { position: relative !important; }
.storeHead::before {
  content: '' !important; position: absolute !important; top: -40px !important;
  left: 50% !important; transform: translateX(-50%) !important; width: 500px !important; height: 400px !important;
  background: radial-gradient(ellipse at center, rgba(var(--silver-rgb), 0.04) 0%, rgba(var(--silver-rgb), 0.01) 40%, transparent 70%) !important;
  pointer-events: none !important; z-index: 0 !important;
}
.storeHead > * { position: relative !important; z-index: 1 !important; }
.storeHeadMascot { filter: drop-shadow(0 8px 32px rgba(var(--silver-rgb), 0.10)) drop-shadow(0 4px 16px rgba(0,0,0,0.80)) !important; }

/* SEARCH */
.searchInput:focus {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(var(--silver-rgb), 0.14), 0 0 0 4px rgba(var(--silver-rgb), 0.04), 0 4px 22px rgba(0,0,0,0.60) !important;
}
.searchIco { color: rgba(var(--silver-rgb), 0.25) !important; }
@media (max-width: 767px) { .searchInput { font-size: 14px !important; padding: 14px 18px 14px 46px !important; } }

/* PANELS */
.panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.038) 0%, rgba(255,255,255,0.012) 70%, rgba(0,0,0,0) 100%), rgba(16,16,16,0.88) !important;
  backdrop-filter: blur(24px) saturate(160%) !important; -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -1px 0 rgba(0,0,0,0.42), 0 6px 24px rgba(0,0,0,0.72), 0 18px 48px rgba(0,0,0,0.44) !important;
}

/* CART */
.cartName { background: var(--silver-text-gradient) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: var(--silver-hi) !important; }
.cartLineTotal { background: var(--silver-text-gradient) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: var(--silver-hi) !important; }
.summaryTotal { background: var(--silver-text-gradient) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
@media (max-width: 767px) {
  .cartName { font-size: 14.5px !important; font-weight: 600 !important; }
  .cartMetaLine { font-size: 12px !important; }
  .cartLineTotal { font-size: 15px !important; font-weight: 700 !important; }
  .summaryRow { font-size: 14px !important; }
  .summaryTotal { font-size: 16px !important; }
  .cartRow .qtyPill { height: 40px !important; border-radius: 11px !important; }
  .cartRow .qtyBtn { width: 40px !important; height: 40px !important; font-size: 22px !important; }
  .cartRow .qtyInput { width: 50px !important; height: 40px !important; font-size: 14px !important; flex: 0 0 50px !important; }
  .minOrderBannerTop { font-size: 14px !important; }
  .minOrderHint { font-size: 12px !important; }
}

/* DETAIL */
.detailPrice { justify-content: center !important; }
.detailPrice .priceNow { font-size: 28px !important; font-weight: 700 !important; background: var(--silver-text-gradient) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
@media (max-width: 767px) {
  .detailTitle { font-size: clamp(1.6rem, 6vw, 2.6rem) !important; }
  .detailDesc { font-size: 14.5px !important; line-height: 1.85 !important; }
  .detailPrice .priceNow { font-size: 32px !important; }
  .detailActions .btn { font-size: 10px !important; letter-spacing: 0.15em !important; }
  .detailActions .btn .btnText, .detailActions .btnGhost { font-size: 10px !important; }
}
.qtyPill { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.60), 0 3px 16px rgba(0,0,0,0.60) !important; }
.qtyBtn { color: rgba(var(--silver-rgb), 0.45) !important; }
.qtyBtnPlus { background: rgba(var(--silver-rgb), 0.03) !important; }
.notifyPanel, .panel.notifyPanel { background: linear-gradient(180deg, rgba(var(--silver-rgb), 0.020) 0%, rgba(0,0,0,0) 100%), rgba(16,16,16,0.88) !important; }
.notifyPanel .panelTitle { background: var(--silver-text-gradient) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.notifyBtn, .notifyPanel .btn { background: linear-gradient(180deg, rgba(var(--silver-rgb), 0.10) 0%, rgba(var(--silver-rgb), 0.04) 100%), rgba(14,14,14,0.85) !important; color: #D4BC82 !important; -webkit-text-fill-color: #D4BC82 !important; }

/* ALL ACTION BUTTONS - Silver surface, gold text */
.panelActionsTop .btn.btnPrimary, .panelEmpty .btn.btnPrimary {
  background: linear-gradient(180deg, rgba(var(--silver-rgb), 0.10) 0%, rgba(var(--silver-rgb), 0.04) 100%), rgba(14,14,14,0.85) !important;
  color: #D4BC82 !important; -webkit-text-fill-color: #D4BC82 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.65), 0 6px 20px rgba(0,0,0,0.60) !important;
}
.panelActionsTop .btn.btnPrimary:hover, .panelEmpty .btn.btnPrimary:hover {
  background: linear-gradient(180deg, rgba(var(--silver-rgb), 0.16) 0%, rgba(var(--silver-rgb), 0.07) 100%), rgba(18,18,18,0.90) !important;
  color: #E8D5A8 !important; -webkit-text-fill-color: #E8D5A8 !important;
}
.cartHead .btn.btnPrimary, .cartActionsRight .btn.btnPrimary {
  color: #D4BC82 !important; -webkit-text-fill-color: #D4BC82 !important;
  background: linear-gradient(180deg, rgba(var(--silver-rgb), 0.12) 0%, rgba(var(--silver-rgb), 0.05) 100%), rgba(14,14,14,0.88) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.72), 0 6px 22px rgba(0,0,0,0.55) !important;
}
.cartHead .btn.btnPrimary:hover, .cartActionsRight .btn.btnPrimary:hover { color: #E8D5A8 !important; -webkit-text-fill-color: #E8D5A8 !important; }
.btnGhost { color: #D4BC82 !important; -webkit-text-fill-color: #D4BC82 !important; }
.btnGhost:hover { color: #E8D5A8 !important; -webkit-text-fill-color: #E8D5A8 !important; }
.btn.btnPrimary[type="submit"], form .btn.btnPrimary {
  background: linear-gradient(180deg, rgba(var(--silver-rgb), 0.12) 0%, rgba(var(--silver-rgb), 0.05) 100%), rgba(14,14,14,0.85) !important;
  color: #D4BC82 !important; -webkit-text-fill-color: #D4BC82 !important;
}

/* FORMS */
.field input, .field textarea, .field select { background: rgba(10,9,8,0.80) !important; }
.field input:focus, .field textarea:focus, .field select:focus { box-shadow: 0 0 0 3px rgba(var(--silver-rgb), 0.05), 0 4px 16px rgba(0,0,0,0.50) !important; }
.field label, .fieldLabel { color: rgba(var(--silver-rgb), 0.56) !important; }

/* MIN ORDER */
.minOrderFill { background: linear-gradient(90deg, var(--silver-mid), var(--silver-hi), var(--silver-mid)) !important; }
.minOrderFill.isFulfilled { background: linear-gradient(90deg, #2ab870, #5ecb96) !important; }
.minOrderBanner.isFulfilled { background: rgba(46,185,110,0.032) !important; box-shadow: 0 0 0 1px rgba(46,185,110,0.12), 0 4px 16px rgba(0,0,0,0.40) !important; }

/* HORIZON LINE - Silver */
body::before {
  background: linear-gradient(90deg, transparent 0%, rgba(var(--silver-rgb), 0.12) 10%, rgba(var(--silver-rgb), 0.40) 28%, rgba(255,244,232,0.55) 50%, rgba(var(--silver-rgb), 0.40) 72%, rgba(var(--silver-rgb), 0.12) 90%, transparent 100%) !important;
}

/* FOOTER */
.footer { margin-top: 80px !important; }
.footer::before { height: 1px !important; background: linear-gradient(90deg, transparent, rgba(var(--silver-rgb), 0.06) 15%, rgba(var(--silver-rgb), 0.18) 35%, rgba(var(--silver-rgb), 0.24) 50%, rgba(var(--silver-rgb), 0.18) 65%, rgba(var(--silver-rgb), 0.06) 85%, transparent) !important; }
.footerLinks a { font-size: 9.5px !important; background: var(--gold-btn-text) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: #C8A96A !important; opacity: 0.65 !important; }
.footerLinks a:hover { opacity: 1 !important; }
.footerCopy { color: rgba(var(--silver-rgb), 0.16) !important; }

/* INVOICE */
.invoiceHeader { text-align: center !important; }
.invoiceRef { background: var(--silver-text-gradient-soft) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; line-height: 1.4 !important; }

/* POLISH */
.productGrid { gap: 14px !important; }
@media (min-width: 900px) { .productGrid { gap: 20px !important; } }
.rvCard { background: linear-gradient(180deg, rgba(255,255,255,0.016) 0%, rgba(255,255,255,0.004) 100%), rgba(10,10,10,0.94) !important; }
.rvCard:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(var(--silver-rgb), 0.06), 0 6px 24px rgba(0,0,0,0.68) !important; }
.rvPrice { background: var(--silver-text-gradient) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.summaryBox { padding: 16px !important; background: rgba(255,255,255,0.012) !important; border-radius: 12px !important; }
.mediaPlaceholder { background: linear-gradient(145deg, #0E0D0C, #080706) !important; color: rgba(var(--silver-rgb), 0.05) !important; }
.alertSuccess, .alertGood { background: rgba(46,185,110,0.04) !important; color: #5ec888 !important; box-shadow: 0 0 0 1px rgba(46,185,110,0.12) !important; }
.coinOption.isSelected { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 20px rgba(var(--silver-rgb), 0.05), 0 4px 18px rgba(0,0,0,0.55) !important; }
.wysiwyg a { color: rgba(var(--silver-rgb), 0.70) !important; }
.accountNavLink.isActive { color: rgba(var(--silver-rgb), 0.80) !important; background: rgba(var(--silver-rgb), 0.03) !important; border-left: 2px solid rgba(var(--silver-rgb), 0.40) !important; }
.accountNavLink:hover { color: rgba(var(--silver-rgb), 0.70) !important; }
.toast { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 52px rgba(0,0,0,0.96) !important; }
.panel p, .panel .panelText { color: rgba(var(--silver-rgb), 0.56) !important; }
.pageTitle[class], .panel > .pageTitle { font-size: clamp(2rem, 5vw, 3.2rem) !important; }
.holidayModeBanner { box-shadow: 0 0 0 1px rgba(var(--silver-rgb), 0.08) !important; }


/* PRODUCT IMAGE STATUS BADGES - Metallic overlay plaques */
.cardMedia,
.mediaFrame {
  position: relative !important;
}

.cardMediaOverlay,
.mediaOverlayBadges {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: 12px !important;
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  pointer-events: none !important;
  z-index: 6 !important;
}

@media (max-width: 767px) {
  .cardMediaOverlay,
  .mediaOverlayBadges {
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    gap: 7px !important;
  }
}

.badge {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  border: none !important;
  background: transparent !important;
  text-decoration: none !important;
  user-select: none !important;
}

.badge::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 999px !important;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0.05) 55%,
      rgba(0,0,0,0.22) 100%),
    linear-gradient(135deg,
      rgba(255,244,232,0.22) 0%,
      rgba(217,207,193,0.12) 35%,
      rgba(0,0,0,0.18) 70%,
      rgba(255,244,232,0.16) 100%),
    rgba(6,6,6,0.62) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.78),
    0 12px 30px rgba(0,0,0,0.72) !important;

  -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
  backdrop-filter: blur(10px) saturate(1.05) !important;
}

.badgeText {
  position: relative !important;
  z-index: 1 !important;
  background: var(--silver-text-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: rgba(var(--silver-rgb), 0.92) !important;
  font-weight: 900 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  font-size: clamp(0.54rem, 0.20vw + 0.50rem, 0.66rem) !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

.badgeSale .badgeText { background: var(--gold-btn-text) !important; }
.badgeOut .badgeText { background: var(--silver-text-gradient-soft) !important; opacity: 0.95 !important; }

.badgeSale::before {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0.05) 55%,
      rgba(0,0,0,0.22) 100%),
    linear-gradient(135deg,
      rgba(233,221,192,0.26) 0%,
      rgba(198,173,120,0.14) 55%,
      rgba(0,0,0,0.22) 100%),
    rgba(6,6,6,0.62) !important;
}

.badgeOut::before {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.03) 55%,
      rgba(0,0,0,0.30) 100%),
    linear-gradient(135deg,
      rgba(210,205,196,0.14) 0%,
      rgba(0,0,0,0.26) 60%,
      rgba(210,205,196,0.10) 100%),
    rgba(5,5,5,0.72) !important;
}

.badgeIco {
  position: relative !important;
  z-index: 1 !important;
  width: 12px !important;
  height: 12px !important;
  display: inline-block !important;
  margin-left: -2px !important;
}

.badgeLow .badgeIco::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 52% !important;
  transform: translate(-50%, -50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-bottom: 11px solid rgba(233,221,192,0.92) !important;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.70)) !important;
}

.badgeLow .badgeIco::after {
  content: '!' !important;
  position: absolute !important;
  left: 50% !important;
  top: 52% !important;
  transform: translate(-50%, -18%) !important;
  font-size: 8px !important;
  font-weight: 950 !important;
  color: #0b0b0c !important;
  letter-spacing: 0 !important;
}

/* Keep badges readable on both photos and placeholders */
.cardPh,
.mediaPlaceholder {
  position: relative !important;
}


/* END v6 */


/* ================================================================
   FULL FRONTEND TYPOGRAPHY ENHANCEMENT — v7
   Covers every visible text surface store-wide.
   Appended to storefront-gold-ascend.css — highest specificity.
   ================================================================ */

/* ─── IMPORT: Richer font weights for Outfit ─────────────────── */
/* (header.php already imports Outfit 300-700; we add 800 here)  */

/* ─── ROOT: Bigger font scale ladder ─────────────────────────── */
:root {
  --fs-nav:        clamp(0.72rem, 0.38vw + 0.66rem, 0.88rem);
  --fs-cat:        clamp(0.74rem, 0.42vw + 0.68rem, 0.92rem);
  --fs-card-title: clamp(0.96rem, 0.40vw + 0.90rem, 1.14rem);
  --fs-price:      clamp(1.26rem, 0.62vw + 1.18rem, 1.58rem);
  --fs-btn:        clamp(0.72rem, 0.34vw + 0.68rem, 0.86rem);
  --fs-mob-label:  clamp(0.62rem, 0.28vw + 0.60rem, 0.72rem);
  --ico-mob:       26px;
  /* Gold text shortcuts */
  --gold-pop: linear-gradient(135deg, #F3EAD1 0%, #E9DDC0 22%, #D4B87A 48%, #C49B50 60%, #D4B87A 72%, #E9DDC0 88%, #F3EAD1 100%);
  --silver-pop: linear-gradient(135deg, #FAFAF8 0%, #EDEBE7 20%, #D9D4CC 42%, #C8C1B6 58%, #D9D4CC 74%, #EDEBE7 90%, #FAFAF8 100%);
}

/* ─────────────────────────────────────────────────────────────────
   STORE HOME — Hero title (Sassy's Pharmaceuticals wordmark)
   ───────────────────────────────────────────────────────────────── */
.storeHeadTitle {
  font-style: italic !important;         /* keep the elegant italic */
  letter-spacing: 0.02em !important;
  background: linear-gradient(148deg,
    #F8F6F3 0%,
    #EBE7E1 14%,
    #EDE0C8 28%,
    #D8C49A 42%,
    #C6AD78 52%,
    #D8C49A 62%,
    #EDE0C8 74%,
    #EBE7E1 88%,
    #F8F6F3 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 24px rgba(200,165,100,0.18)) !important;
}

/* ─────────────────────────────────────────────────────────────────
   PAGE TITLES (Cart, Account, Contact etc.)
   ───────────────────────────────────────────────────────────────── */
.pageTitle {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  font-size: clamp(2.2rem, 6vw, 3.6rem) !important;
  background: var(--silver-pop) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  line-height: 1.12 !important;
  filter: drop-shadow(0 1px 18px rgba(220,215,208,0.12)) !important;
}

/* ─────────────────────────────────────────────────────────────────
   PRODUCT CARD — Title & Price (bold, non-italic, store-grade)
   ───────────────────────────────────────────────────────────────── */
.cardTitle {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: var(--fs-card-title) !important;
  letter-spacing: 0.025em !important;
  line-height: 1.36 !important;
  background: var(--silver-pop) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.priceNow {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-style: normal !important;
  font-weight: 800 !important;
  font-size: var(--fs-price) !important;
  letter-spacing: 0.01em !important;
  background: var(--gold-pop) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 10px rgba(200,165,80,0.15)) !important;
}

/* ─────────────────────────────────────────────────────────────────
   PRODUCT DETAIL — Title, Price, Description, Add to Cart
   ───────────────────────────────────────────────────────────────── */
.detailTitle {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-style: normal !important;
  font-weight: 800 !important;
  font-size: clamp(1.7rem, 5.5vw, 2.8rem) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.12 !important;
  background: var(--silver-pop) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin: 0 0 14px !important;
  filter: drop-shadow(0 1px 20px rgba(220,215,208,0.14)) !important;
}
@media (max-width: 767px) {
  .detailTitle { font-size: clamp(1.75rem, 7vw, 2.4rem) !important; }
}

/* Detail price — bigger, gold, heavy */
.detailPrice .priceNow {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-style: normal !important;
  font-weight: 900 !important;
  font-size: clamp(2.0rem, 6vw, 2.8rem) !important;
  letter-spacing: 0.01em !important;
  background: var(--gold-pop) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 16px rgba(200,165,80,0.22)) !important;
}
@media (max-width: 767px) {
  .detailPrice .priceNow { font-size: clamp(2.1rem, 8vw, 2.6rem) !important; }
}

/* Product description body copy — slightly larger, better readability */
.detailDesc {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.88 !important;
  color: rgba(var(--silver-rgb), 0.60) !important;
  letter-spacing: 0.008em !important;
}
@media (max-width: 767px) {
  .detailDesc { font-size: 15.5px !important; }
}

/* Detail Add to Cart button — gold text, bold */
.detailAddBtn {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.24em !important;
  color: #D4BC82 !important;
  -webkit-text-fill-color: #D4BC82 !important;
}
.detailAddBtn .btnText {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.24em !important;
  background: var(--gold-pop) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
@media (max-width: 767px) {
  .detailAddBtn { font-size: 12px !important; letter-spacing: 0.22em !important; }
  .detailAddBtn .btnText { font-size: 12px !important; letter-spacing: 0.22em !important; }
}

/* Ghost / secondary button on detail */
.btnGhost {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  font-size: 10px !important;
  color: #D4BC82 !important;
  -webkit-text-fill-color: #D4BC82 !important;
}
.btnGhost:hover {
  color: #EAD9AC !important;
  -webkit-text-fill-color: #EAD9AC !important;
}

/* ─────────────────────────────────────────────────────────────────
   ALL CARD ADD-TO-CART BUTTONS
   ───────────────────────────────────────────────────────────────── */
.cardActions .btnText,
.cardActions .btn .btnText,
body.storeIndex .productGrid .cardActions .btnText {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 800 !important;
  font-size: var(--fs-btn) !important;
  letter-spacing: 0.22em !important;
  background: var(--gold-pop) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
}
@media (max-width: 767px) {
  .cardActions .btnText,
  .cardActions .btn .btnText {
    font-size: calc(var(--fs-btn) + 0.06rem) !important;
    letter-spacing: 0.20em !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   TOP NAV LINKS
   ───────────────────────────────────────────────────────────────── */
.navLink {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: var(--fs-nav) !important;
  letter-spacing: 0.22em !important;
  background: linear-gradient(135deg,
    rgba(248,246,243,0.84) 0%,
    rgba(220,215,208,0.70) 38%,
    rgba(196,189,180,0.60) 60%,
    rgba(220,215,208,0.70) 82%,
    rgba(248,246,243,0.84) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  transition: opacity 0.18s ease !important;
}
.navLink:hover,
.navLink.navLinkActive {
  background: var(--silver-pop) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
@media (min-width: 768px) {
  .navLink { padding: 10px 18px !important; }
}
@media (max-width: 767px) {
  .navLink { padding: 7px 12px !important; }
}
.navLink.navLinkActive::after {
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--silver-rgb), 0.62) 20%,
    rgba(255,252,248,0.95) 50%,
    rgba(var(--silver-rgb), 0.62) 80%,
    transparent) !important;
}

/* Cart count badge */
.navCount {
  background: linear-gradient(135deg, #EDEAE5, #D0C9BF) !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 800 !important;
  font-size: 9.5px !important;
  min-width: 19px !important;
  height: 19px !important;
}

/* Topbar glow */
.topbar {
  box-shadow:
    0 1px 0 rgba(var(--silver-rgb), 0.10),
    0 4px 36px rgba(0,0,0,0.98) !important;
}

/* ─────────────────────────────────────────────────────────────────
   CATEGORY NAV TABS
   ───────────────────────────────────────────────────────────────── */
.catLink {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: var(--fs-cat) !important;
  letter-spacing: 0.22em !important;
  opacity: 0.82 !important;
}
.catLink:hover { opacity: 0.93 !important; }
.catLink.isActive {
  font-weight: 800 !important;
  opacity: 1 !important;
  background: var(--gold-pop) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.catLink.isActive::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--silver-rgb), 0.40) 15%,
    rgba(255,244,224,0.90) 50%,
    rgba(var(--silver-rgb), 0.40) 85%,
    transparent 100%) !important;
}

/* ─────────────────────────────────────────────────────────────────
   MOBILE BOTTOM NAV
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .mobileNavLabel {
    font-family: 'Outfit', -apple-system, sans-serif !important;
    font-weight: 700 !important;
    font-size: var(--fs-mob-label) !important;
    letter-spacing: 0.18em !important;
    opacity: 0.82 !important;
    background: linear-gradient(135deg,
      rgba(248,246,243,0.82) 0%,
      rgba(210,205,198,0.66) 45%,
      rgba(185,180,172,0.58) 65%,
      rgba(210,205,198,0.66) 85%,
      rgba(248,246,243,0.82) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
  .mobileNavItem.mobileNavActive .mobileNavLabel {
    font-weight: 800 !important;
    opacity: 1 !important;
    background: var(--gold-pop) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
  .mobileNavItem svg {
    width: var(--ico-mob) !important;
    height: var(--ico-mob) !important;
    stroke-width: 1.85 !important;
    stroke: rgba(var(--silver-rgb), 0.46) !important;
  }
  .mobileNavItem.mobileNavActive svg {
    stroke: rgba(var(--silver-rgb), 0.84) !important;
    filter: drop-shadow(0 0 6px rgba(var(--silver-rgb), 0.20)) !important;
  }
  .mobileNavIconWrap { width: 48px !important; height: 38px !important; }
  .mobileNavItem.mobileNavActive .mobileNavIconWrap {
    background: rgba(var(--silver-rgb), 0.05) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      inset 0 -1px 0 rgba(0,0,0,0.65),
      0 0 0 1px rgba(255,244,212,0.07) !important;
  }
  .mobileNavItem.mobileNavActive::before {
    background: linear-gradient(90deg,
      transparent,
      rgba(var(--silver-rgb), 0.55) 35%,
      rgba(255,252,244,0.92) 50%,
      rgba(var(--silver-rgb), 0.55) 65%,
      transparent) !important;
  }
  .mobileNavBadge {
    min-width: 18px !important;
    height: 18px !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    font-family: 'Outfit', -apple-system, sans-serif !important;
    background: linear-gradient(135deg, #EDEAE5, #D0C9BF) !important;
    color: #000 !important;
  }
  .mobileNav {
    box-shadow: 0 -1px 0 rgba(var(--silver-rgb), 0.05), 0 -28px 80px rgba(0,0,0,0.99) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   PANEL & SECTION TITLES
   ───────────────────────────────────────────────────────────────── */
.panelTitle {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg,
    rgba(248,246,243,0.72) 0%,
    rgba(210,205,198,0.58) 45%,
    rgba(185,180,172,0.50) 65%,
    rgba(210,205,198,0.58) 85%,
    rgba(248,246,243,0.72) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.panelEmpty .panelTitle {
  font-size: 11px !important;
  letter-spacing: 0.24em !important;
  background: var(--silver-pop) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ─────────────────────────────────────────────────────────────────
   CART
   ───────────────────────────────────────────────────────────────── */
.cartName {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.012em !important;
  background: var(--silver-pop) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.cartMetaLine {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: rgba(var(--silver-rgb), 0.42) !important;
  letter-spacing: 0.008em !important;
}
.cartLineTotal {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  background: var(--gold-pop) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.summaryRow {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(var(--silver-rgb), 0.55) !important;
}
.summaryTotal {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 800 !important;
  font-size: 16.5px !important;
  background: var(--gold-pop) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
/* Cart head "Proceed to Checkout" and similar primary buttons */
.cartHead .btn.btnPrimary,
.cartActionsRight .btn.btnPrimary,
.panelActionsTop .btn.btnPrimary,
.panelEmpty .btn.btnPrimary {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.20em !important;
  font-size: 10px !important;
  color: #D4BC82 !important;
  -webkit-text-fill-color: #D4BC82 !important;
}

/* ─────────────────────────────────────────────────────────────────
   CHECKOUT / FORMS
   ───────────────────────────────────────────────────────────────── */
.field label,
.fieldLabel {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: 9.5px !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: rgba(var(--silver-rgb), 0.52) !important;
  -webkit-text-fill-color: rgba(var(--silver-rgb), 0.52) !important;
}
.field input,
.field textarea,
.field select {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(var(--silver-rgb), 0.82) !important;
  -webkit-text-fill-color: rgba(var(--silver-rgb), 0.82) !important;
  letter-spacing: 0.012em !important;
}
/* Generic form submit buttons */
.btn.btnPrimary[type="submit"],
form .btn.btnPrimary {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  font-size: 10px !important;
  color: #D4BC82 !important;
  -webkit-text-fill-color: #D4BC82 !important;
}

/* Coin payment option labels */
.coinName {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
}
.coinCode {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
}

/* Search input */
.searchInput {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}

/* ─────────────────────────────────────────────────────────────────
   ACCOUNT SECTION
   ───────────────────────────────────────────────────────────────── */
.accountNavLink {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.16em !important;
}
.accountNavLink.isActive {
  color: rgba(var(--silver-rgb), 0.84) !important;
  -webkit-text-fill-color: rgba(var(--silver-rgb), 0.84) !important;
  border-left: 2px solid rgba(var(--silver-rgb), 0.44) !important;
}
.orderId {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
}

/* ─────────────────────────────────────────────────────────────────
   INVOICE / ORDER STATUS PAGE
   ───────────────────────────────────────────────────────────────── */
.invoiceRef {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  letter-spacing: 0.26em !important;
  background: linear-gradient(135deg,
    rgba(248,246,243,0.68) 0%,
    rgba(210,205,198,0.52) 50%,
    rgba(248,246,243,0.68) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.invoiceStatus {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 800 !important;
  font-size: 9.5px !important;
  letter-spacing: 0.18em !important;
}

/* ─────────────────────────────────────────────────────────────────
   FAQ PAGE HERO
   ───────────────────────────────────────────────────────────────── */
.faqHeroTitle {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: clamp(2.0rem, 8vw, 4.4rem) !important;
  background: linear-gradient(148deg,
    #F8F6F3 0%, #EBE7E1 16%, #EDE0C8 30%,
    #D8C49A 44%, #C6AD78 54%,
    #D8C49A 64%, #EDE0C8 76%,
    #EBE7E1 88%, #F8F6F3 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  line-height: 1.14 !important;
}
.faqHeroSub {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.80 !important;
  letter-spacing: 0.012em !important;
  color: rgba(var(--silver-rgb), 0.50) !important;
}

/* ─────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────── */
.footerLinks a {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.20em !important;
  background: var(--gold-pop) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 0.62 !important;
}
.footerLinks a:hover { opacity: 1 !important; }
.footerCopy {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  color: rgba(var(--silver-rgb), 0.18) !important;
}

/* ─────────────────────────────────────────────────────────────────
   LOGIN PAGE / SMALL UTILITY BUTTONS
   ───────────────────────────────────────────────────────────────── */
.btn {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
}
.btnPrimary .btnText,
.btn .btnText {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.20em !important;
}

/* ─────────────────────────────────────────────────────────────────
   NOTICE / ANNOUNCEMENT BANNER
   ───────────────────────────────────────────────────────────────── */
.holidayModeBanner,
.holidayModeBannerInner {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
}

/* ─────────────────────────────────────────────────────────────────
   RECENTLY VIEWED
   ───────────────────────────────────────────────────────────────── */
.rvName {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: calc(var(--fs-card-title) - 0.06rem) !important;
  letter-spacing: 0.018em !important;
}
.rvPrice {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 800 !important;
}

/* ─────────────────────────────────────────────────────────────────
   ALERT / TOAST / STATUS MESSAGES
   ───────────────────────────────────────────────────────────────── */
.alertSuccess, .alertGood, .alertError, .alertWarn, .toast {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
}

/* ─────────────────────────────────────────────────────────────────
   NOTIFY ME PANEL (out of stock)
   ───────────────────────────────────────────────────────────────── */
.notifyPanel .panelTitle {
  font-weight: 800 !important;
  letter-spacing: 0.26em !important;
}
.notifyBtn,
.notifyPanel .btn {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.20em !important;
}

/* ─────────────────────────────────────────────────────────────────
   HELP TEXT & WYSIWYG BODY
   ───────────────────────────────────────────────────────────────── */
.helpText {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}
.wysiwyg, .faqWysiwyg {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.90 !important;
  letter-spacing: 0.010em !important;
}
.wysiwyg h2, .wysiwyg h3, .faqWysiwyg h2, .faqWysiwyg h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 1.4em !important;
  letter-spacing: 0.01em !important;
}

/* ─────────────────────────────────────────────────────────────────
   MIN ORDER PROGRESS BANNER
   ───────────────────────────────────────────────────────────────── */
.minOrderBannerTop {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.01em !important;
}
.minOrderHint {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
}

/* ─────────────────────────────────────────────────────────────────
   CONTACT PAGE
   ───────────────────────────────────────────────────────────────── */
.panel p, .panel .panelText {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.82 !important;
  letter-spacing: 0.01em !important;
  color: rgba(var(--silver-rgb), 0.54) !important;
}

/* END FULL ENHANCEMENT LAYER v7 */

/* ================================================================
   BADGE FIX v7.1 — Out of Stock (red glow) + Sale (royal blue glow)
   Low Stock kept as-is (working fine).
   ================================================================ */

/* ── OUT OF STOCK — visible dark pill + red glow ───────────────── */
.badgeOut {
  background: transparent !important;
  filter: drop-shadow(0 0 8px rgba(200, 40, 40, 0.70))
          drop-shadow(0 0 20px rgba(180, 30, 30, 0.45)) !important;
}

.badgeOut::before {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.13) 0%,
      rgba(255,255,255,0.04) 50%,
      rgba(0,0,0,0.28) 100%),
    linear-gradient(135deg,
      rgba(180, 40, 40, 0.38) 0%,
      rgba(120, 20, 20, 0.22) 50%,
      rgba(60,  10, 10, 0.30) 100%),
    rgba(10, 4, 4, 0.82) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 100, 100, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.80),
    0 0 0 1px rgba(200, 50, 50, 0.30),
    0 4px 20px rgba(180, 30, 30, 0.50) !important;
}

.badgeOut .badgeText {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.22em !important;
  background: linear-gradient(135deg,
    #FF9A9A 0%, #F07070 30%, #D94040 55%, #F07070 78%, #FF9A9A 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 1 !important;
}

/* ── SALE — visible dark pill + royal blue glow ─────────────────── */
.badgeSale {
  background: transparent !important;
  filter: drop-shadow(0 0 8px rgba(40, 80, 220, 0.75))
          drop-shadow(0 0 22px rgba(30, 60, 200, 0.48)) !important;
}

.badgeSale::before {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0.05) 50%,
      rgba(0,0,0,0.26) 100%),
    linear-gradient(135deg,
      rgba(60,  100, 255, 0.42) 0%,
      rgba(30,  70,  200, 0.26) 50%,
      rgba(15,  40,  140, 0.32) 100%),
    rgba(4, 6, 18, 0.84) !important;

  box-shadow:
    inset 0 1px 0 rgba(100, 140, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.82),
    0 0 0 1px rgba(50, 90, 230, 0.35),
    0 4px 22px rgba(30, 60, 200, 0.52) !important;
}

.badgeSale .badgeText {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.22em !important;
  background: linear-gradient(135deg,
    #A8C0FF 0%, #7B9EFF 28%, #5578F0 52%, #7B9EFF 76%, #A8C0FF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 1 !important;
}

/* ── LOW STOCK — keep existing look, just polish text weight ─────── */
.badgeLow .badgeText,
.badgeManualLow .badgeText {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.22em !important;
  background: linear-gradient(135deg,
    #F3EAD1 0%, #E9DDC0 25%, #D4B87A 55%, #E9DDC0 80%, #F3EAD1 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── Detail page badges — same treatment ────────────────────────── */
.badge.detailBadge.badgeOut {
  filter: drop-shadow(0 0 8px rgba(200, 40, 40, 0.70))
          drop-shadow(0 0 20px rgba(180, 30, 30, 0.45)) !important;
}
.badge.detailBadge.badgeSale {
  filter: drop-shadow(0 0 8px rgba(40, 80, 220, 0.75))
          drop-shadow(0 0 22px rgba(30, 60, 200, 0.48)) !important;
}

/* END BADGE FIX v7.1 */


/* ===== storefront-luxe-2026.css ===== */
/*
╔══════════════════════════════════════════════════════════════════════════════════╗
║  LUXE ASCENSION — Visual-only enhancement layer + Light theme                  ║
║  RULE: Zero layout changes. Only visual properties.                            ║
║  Load order: LAST — after storefront-gold-ascend.css                           ║
╚══════════════════════════════════════════════════════════════════════════════════╝
*/

/* ═══════════════════════════════════════════════════════════════════════════════
   §1 THEME TRANSITION TIMING
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
  --theme-t: 0.5s cubic-bezier(0.22, 0.68, 0.31, 1.0);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   §2 DARK THEME: BACKGROUND ART — Metallic silver atmosphere
   Using body background-image only. No ::after, no extra DOM.
   ═══════════════════════════════════════════════════════════════════════════════ */

body {
  background-color: #060606 !important;
  background-image:
    /* Diagonal metallic ribbon — top-left to mid-right */
    linear-gradient(155deg,
      transparent 18%,
      rgba(194,200,208,0.022) 22%,
      rgba(194,200,208,0.040) 26%,
      rgba(220,215,205,0.028) 30%,
      rgba(185,150,90,0.018) 33%,
      rgba(194,200,208,0.030) 36%,
      rgba(194,200,208,0.012) 40%,
      transparent 44%
    ),
    /* Second ribbon — lower, crossing */
    linear-gradient(135deg,
      transparent 52%,
      rgba(194,200,208,0.015) 56%,
      rgba(194,200,208,0.030) 60%,
      rgba(220,215,205,0.020) 63%,
      rgba(185,150,90,0.012) 65%,
      rgba(194,200,208,0.020) 68%,
      transparent 72%
    ),
    /* Floating orb — top right */
    radial-gradient(ellipse 600px 500px at 82% 8%,
      rgba(210,205,195,0.035) 0%,
      rgba(194,200,208,0.012) 40%,
      transparent 70%
    ),
    /* Floating orb — left mid */
    radial-gradient(ellipse 500px 600px at 8% 45%,
      rgba(194,200,208,0.022) 0%,
      transparent 65%
    ),
    /* Floating orb — bottom center gold whisper */
    radial-gradient(ellipse 700px 400px at 50% 92%,
      rgba(185,150,90,0.018) 0%,
      transparent 65%
    ),
    /* Base falloff */
    linear-gradient(180deg, #0A0A0A 0%, #070707 25%, #060606 50%, #050505 75%, #040404 100%)
    !important;
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed !important;
  transition: background-color var(--theme-t), background-image var(--theme-t), color var(--theme-t) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   §3 ENHANCED HORIZON LINE
   ═══════════════════════════════════════════════════════════════════════════════ */

body::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--silver-rgb), 0.08) 8%,
    rgba(var(--silver-rgb), 0.28) 22%,
    rgba(255,244,232,0.40) 38%,
    rgba(var(--silver-rgb), 0.55) 50%,
    rgba(255,244,232,0.40) 62%,
    rgba(var(--silver-rgb), 0.28) 78%,
    rgba(var(--silver-rgb), 0.08) 92%,
    transparent 100%) !important;
  animation: horizon-shimmer 8s ease-in-out infinite !important;
}

@keyframes horizon-shimmer {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   §4 STORE HEADER TITLE — Shimmer animation
   ═══════════════════════════════════════════════════════════════════════════════ */

.storeHeadTitle {
  background: linear-gradient(155deg,
    #F8F6F3 0%, #EBE7E1 14%, #EDE0C8 28%,
    #D8C49A 42%, #C6AD78 52%, #D8C49A 62%,
    #EDE0C8 74%, #EBE7E1 88%, #F8F6F3 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: titleShimmer 8s ease-in-out infinite !important;
}

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

.storeHead::after {
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--silver-rgb), 0.10) 15%,
    rgba(185,150,90,0.22) 35%,
    rgba(var(--silver-rgb), 0.30) 50%,
    rgba(185,150,90,0.22) 65%,
    rgba(var(--silver-rgb), 0.10) 85%,
    transparent) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   §5 iOS 26 GLASS CARDS — visual properties only
   ═══════════════════════════════════════════════════════════════════════════════ */

.card,
.card.productCard {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.060) 0%,
      rgba(255,255,255,0.025) 35%,
      rgba(255,255,255,0.010) 70%,
      rgba(255,255,255,0.004) 100%),
    rgba(14,14,14,0.72) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.10),
    0 2px 6px rgba(0,0,0,0.15),
    0 8px 24px rgba(0,0,0,0.35),
    0 16px 48px rgba(0,0,0,0.30) !important;
  transition:
    transform 0.28s cubic-bezier(0.22,0.68,0.31,1),
    box-shadow 0.28s cubic-bezier(0.22,0.68,0.31,1),
    border-color 0.28s cubic-bezier(0.22,0.68,0.31,1),
    background var(--theme-t) !important;
}

/* Disable the mask-based gradient border from store-contract */
.card.productCard::before {
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-composite: initial !important;
  mask-composite: initial !important;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.16) 20%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.16) 80%, transparent) !important;
  opacity: 0.5 !important;
}

@media (hover: hover) {
  .card:hover,
  .card.productCard:hover {
    border-color: rgba(255,255,255,0.14) !important;
    box-shadow:
      inset 0 0.5px 0 rgba(255,255,255,0.14),
      0 4px 10px rgba(0,0,0,0.18),
      0 14px 36px rgba(0,0,0,0.40),
      0 28px 64px rgba(0,0,0,0.30),
      0 0 40px rgba(194,200,208,0.03) !important;
  }
  .card.productCard:hover::before {
    opacity: 0.8 !important;
  }
}

/* Card body — glass continuation */
.cardBody {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.022) 0%,
      rgba(255,255,255,0.006) 100%),
    rgba(12,12,12,0.55) !important;
  transition: background var(--theme-t) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   §6 GLASS PANELS
   ═══════════════════════════════════════════════════════════════════════════════ */

.panel {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.045) 0%,
      rgba(255,255,255,0.015) 50%,
      rgba(255,255,255,0.004) 100%),
    rgba(14,14,14,0.70) !important;
  border: 1px solid rgba(255,255,255,0.065) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.07),
    0 4px 12px rgba(0,0,0,0.18),
    0 12px 36px rgba(0,0,0,0.35),
    0 24px 64px rgba(0,0,0,0.25) !important;
  transition: background var(--theme-t), border-color var(--theme-t), box-shadow var(--theme-t) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   §7 GLASS NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════════ */

.topbar {
  background: linear-gradient(180deg, rgba(10,10,10,0.78) 0%, rgba(6,6,6,0.72) 100%) !important;
  backdrop-filter: blur(40px) saturate(200%) brightness(0.90) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(0.90) !important;
  box-shadow: 0 1px 0 rgba(var(--silver-rgb),0.05), 0 4px 24px rgba(0,0,0,0.75) !important;
  transition: background var(--theme-t), box-shadow var(--theme-t) !important;
}

.mobileNav {
  background: rgba(6,6,6,0.75) !important;
  backdrop-filter: blur(40px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
  box-shadow: 0 -1px 0 rgba(var(--silver-rgb),0.05), 0 -12px 48px rgba(0,0,0,0.75) !important;
  transition: background var(--theme-t), box-shadow var(--theme-t) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   §8 GLASS SEARCH
   ═══════════════════════════════════════════════════════════════════════════════ */

.searchInput {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.010) 100%),
    rgba(12,12,12,0.65) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.06), 0 2px 12px rgba(0,0,0,0.35) !important;
  transition: box-shadow 0.28s ease, border-color 0.28s ease, background var(--theme-t) !important;
}
.searchInput:focus {
  border-color: rgba(var(--silver-rgb), 0.16) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.08), 0 0 0 3px rgba(var(--silver-rgb),0.05), 0 4px 20px rgba(0,0,0,0.45) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   §9 CATEGORY NAV — Glass pills
   ═══════════════════════════════════════════════════════════════════════════════ */

.catLink {
  border-radius: 999px !important;
  transition: background 0.25s ease, box-shadow 0.25s ease !important;
}
.catLink::after { opacity: 0 !important; transform: scaleX(0) !important; }
.catLink:hover {
  background: rgba(255,255,255,0.03) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important;
}
.catLink.isActive {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%),
    rgba(16,16,16,0.65) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--silver-rgb), 0.10), inset 0 0.5px 0 rgba(255,255,255,0.07), 0 2px 8px rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}
.catLink.isActive::after { opacity: 0 !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
   §10 GLASS BUTTONS — Add to cart
   ═══════════════════════════════════════════════════════════════════════════════ */

.cardActions .btn,
.cardActions .btnPrimary,
.cardActions button[data-add-to-cart],
body.storeIndex .productGrid .cardActions .btn.btnPrimary.btnWide,
body.storeIndex .productGrid article.card.productCard .cardActions .btn.btnPrimary.btnWide {
  border: 1px solid rgba(var(--silver-rgb), 0.07) !important;
  background:
    linear-gradient(180deg, rgba(var(--silver-rgb),0.10) 0%, rgba(var(--silver-rgb),0.03) 50%, rgba(var(--silver-rgb),0.05) 100%),
    rgba(12,12,12,0.70) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.10), 0 2px 8px rgba(0,0,0,0.30) !important;
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

@media (hover: hover) {
  .cardActions .btn:hover,
  .cardActions .btnPrimary:hover,
  .cardActions button[data-add-to-cart]:hover {
    border-color: rgba(var(--silver-rgb), 0.12) !important;
    background:
      linear-gradient(180deg, rgba(var(--silver-rgb),0.15) 0%, rgba(var(--silver-rgb),0.06) 50%, rgba(var(--silver-rgb),0.08) 100%),
      rgba(14,14,14,0.76) !important;
    box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.15), 0 0 14px rgba(var(--silver-rgb),0.04), 0 4px 14px rgba(0,0,0,0.40) !important;
  }
}

.detailAddBtn {
  border: 1px solid rgba(var(--silver-rgb), 0.08) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   §11 GLASS: Toast, Alert, RV cards, Media frame, Qty, Coins
   ═══════════════════════════════════════════════════════════════════════════════ */

.toast {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.012) 100%),
    rgba(16,16,16,0.80) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.65) !important;
}

.alert {
  border: 1px solid rgba(255,255,255,0.055) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

.rvCard {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.010) 100%),
    rgba(12,12,12,0.68) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.06), 0 4px 16px rgba(0,0,0,0.40) !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, background var(--theme-t) !important;
}
.rvCard:hover {
  border-color: rgba(255,255,255,0.09) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.08), 0 8px 28px rgba(0,0,0,0.50) !important;
}

.mediaFrame {
  border: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.05), 0 8px 28px rgba(0,0,0,0.50), 0 24px 64px rgba(0,0,0,0.30) !important;
  transition: border-color var(--theme-t), box-shadow var(--theme-t) !important;
}

.qtyPill {
  border: 1px solid rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.coinOption {
  border: 1px solid rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background var(--theme-t) !important;
}
.coinOption.isSelected {
  border-color: rgba(var(--silver-rgb), 0.15) !important;
}

.holidayModeBanner {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.008) 100%),
    rgba(14,14,14,0.72) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.06), 0 8px 28px rgba(0,0,0,0.45) !important;
}

.field input:not(.qtyInput):not([type="checkbox"]):not([type="radio"]),
.field textarea,
.field select {
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background var(--theme-t), color var(--theme-t) !important;
}
.field input:not(.qtyInput):focus,
.field textarea:focus,
.field select:focus {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(var(--silver-rgb), 0.18) !important;
  box-shadow: 0 0 0 3px rgba(var(--silver-rgb),0.06) !important;
  color: rgba(255,255,255,0.95) !important;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(255,255,255,0.28) !important; }
.field select option { background: #1a1a1a !important; color: rgba(255,255,255,0.90) !important; }

/* Autofill override for dark theme */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field select:-webkit-autofill {
  -webkit-text-fill-color: rgba(255,255,255,0.92) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(30,28,24,0.97) inset !important;
  box-shadow: 0 0 0 1000px rgba(30,28,24,0.97) inset !important;
  border-color: rgba(255,255,255,0.08) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Discount code row — input + apply button side by side */
.discountRow {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.discountRow .input {
  flex: 1;
  min-width: 0;
}
.discountRow .btn,
.discountRow .btnSmall {
  flex-shrink: 0;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   §12 ENHANCED ENTRANCE ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

@keyframes luxeFadeIn {
  from { opacity: 0; transform: translateY(18px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

.productGrid .card {
  animation: luxeFadeIn 0.55s cubic-bezier(0.22,0.68,0.31,1) both !important;
}
.productGrid .card:nth-child(1) { animation-delay: 0.02s !important; }
.productGrid .card:nth-child(2) { animation-delay: 0.07s !important; }
.productGrid .card:nth-child(3) { animation-delay: 0.12s !important; }
.productGrid .card:nth-child(4) { animation-delay: 0.17s !important; }
.productGrid .card:nth-child(5) { animation-delay: 0.22s !important; }
.productGrid .card:nth-child(6) { animation-delay: 0.27s !important; }
.productGrid .card:nth-child(n+7) { animation-delay: 0.30s !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
   §13 THEME TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════════════════════════ */

.themeToggle {
  position: fixed;
  z-index: 100001;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%), rgba(12,12,12,0.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.10), 0 4px 16px rgba(0,0,0,0.55);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1), border-color var(--theme-t);
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* Desktop: top-right, offset from edge */
.themeToggle {
  top: 14px;
  right: 18px;
}

/* Mobile: above bottom nav */
@media (max-width: 767px) {
  .themeToggle {
    top: auto;
    bottom: calc(var(--mob-h) + env(safe-area-inset-bottom, 0px) + 16px);
    right: 14px;
    width: 38px;
    height: 38px;
  }
}

.themeToggle:hover {
  transform: scale(1.08);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.14), 0 6px 24px rgba(0,0,0,0.60), 0 0 16px rgba(194,200,208,0.04);
}
.themeToggle:active {
  transform: scale(0.92);
}

.themeToggle .iconSun,
.themeToggle .iconMoon {
  position: absolute;
  width: 18px;
  height: 18px;
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
}

/* Dark mode default: show sun icon */
.themeToggle .iconSun  { opacity: 1; transform: rotate(0deg) scale(1); color: rgba(220,200,160,0.65); }
.themeToggle .iconMoon { opacity: 0; transform: rotate(-90deg) scale(0.5); color: rgba(120,130,160,0.65); }

/* Light mode: show moon icon */
[data-theme="light"] .themeToggle .iconSun  { opacity: 0; transform: rotate(90deg) scale(0.5); }
[data-theme="light"] .themeToggle .iconMoon { opacity: 1; transform: rotate(0deg) scale(1); color: rgba(80,70,120,0.75); }


/* ═══════════════════════════════════════════════════════════════════════════════
   §14 REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .storeHeadTitle { animation: none !important; background-size: 100% 100% !important; }
  body::before { animation: none !important; }
  .productGrid .card { animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   ██████████████████████████████████████████████████████████████████████████████
   ██  LIGHT THEME                                                             ██
   ██████████████████████████████████████████████████████████████████████████████
   ═══════════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  --b0: #F6F4F1; --b1: #F0EDE8; --b2: #E8E4DE;
  --b3: #DDD8D0; --b4: #D0CBC2; --b5: #C4BEB4; --b6: #B8B2A8;

  --tx:  rgba(28,24,20,0.92);
  --tx2: rgba(28,24,20,0.56);
  --tx3: rgba(28,24,20,0.33);
  --tx4: rgba(28,24,20,0.16);

  --gold-hi: #8B7040; --gold-mid: #7A6030; --gold-pure: #6B5228;
  --gold-deep: #5A4420; --gold-lo: #483618; --gold-rgb: 122,96,48;

  --silver-hi: #4A4540; --silver-mid: #6B6560; --silver-pure: #8A8480;
  --silver-deep: #A8A29E; --silver-lo: #C8C4C0; --silver-rgb: 74,69,64;

  --tone-good: rgba(30,140,80,0.95);
  --tone-bad: rgba(180,50,50,0.95);

  --gold-pop: linear-gradient(135deg, #5A4420 0%, #6B5228 22%, #7A6030 48%, #8B7040 60%, #7A6030 72%, #6B5228 88%, #5A4420 100%);
  --silver-pop: linear-gradient(135deg, #3A3530 0%, #4A4540 20%, #5A5550 42%, #4A4540 58%, #5A5550 74%, #4A4540 90%, #3A3530 100%);
  --gold-btn-text: linear-gradient(135deg, #6B5228 0%, #7A6030 30%, #8B7040 55%, #7A6030 100%);
  --gold-btn-text-bright: linear-gradient(135deg, #5A4420 0%, #6B5228 30%, #7A6030 55%, #6B5228 100%);
  --silver-text-gradient: linear-gradient(135deg, #3A3530 0%, #4A4540 20%, #5A5550 42%, #4A4540 60%, #5A5550 80%, #3A3530 100%);
  --silver-text-gradient-soft: linear-gradient(135deg, rgba(58,53,48,0.60) 0%, rgba(74,69,64,0.48) 40%, rgba(90,85,80,0.40) 60%, rgba(74,69,64,0.48) 80%, rgba(58,53,48,0.60) 100%);
}

/* ── Light: Background ───────────────────────────────────────────────────── */
[data-theme="light"] body {
  background-color: #F6F4F1 !important;
  color: var(--tx) !important;
  background-image:
    linear-gradient(155deg, transparent 18%, rgba(185,150,90,0.035) 24%, rgba(185,150,90,0.050) 28%, rgba(220,200,160,0.030) 32%, transparent 40%),
    linear-gradient(135deg, transparent 52%, rgba(140,130,110,0.025) 58%, rgba(185,150,90,0.035) 62%, transparent 70%),
    radial-gradient(ellipse 600px 500px at 80% 6%, rgba(185,150,90,0.035) 0%, transparent 65%),
    radial-gradient(ellipse 500px 600px at 10% 48%, rgba(160,150,130,0.025) 0%, transparent 65%),
    linear-gradient(180deg, #F8F6F2 0%, #F6F4F1 25%, #F4F2EE 50%, #F2F0EB 75%, #F0EDE8 100%) !important;
  background-attachment: fixed, fixed, fixed, fixed, fixed !important;
}

[data-theme="light"] html { background: #F6F4F1 !important; color: var(--tx) !important; }

/* ── Light: Horizon line ─────────────────────────────────────────────────── */
[data-theme="light"] body::before {
  background: linear-gradient(90deg,
    transparent 0%, rgba(122,96,48,0.08) 10%, rgba(122,96,48,0.20) 25%,
    rgba(100,80,40,0.32) 40%, rgba(85,65,30,0.40) 50%, rgba(100,80,40,0.32) 60%,
    rgba(122,96,48,0.20) 75%, rgba(122,96,48,0.08) 90%, transparent 100%) !important;
}

/* ── Light: Store title ──────────────────────────────────────────────────── */
[data-theme="light"] .storeHeadTitle {
  background: linear-gradient(155deg, #4A4540 0%, #5A5550 14%, #7A6030 28%, #8B7040 42%, #7A6030 55%, #5A5550 74%, #4A4540 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 18px rgba(100,80,40,0.12)) !important;
}
[data-theme="light"] .storeHead::after {
  background: linear-gradient(90deg, transparent, rgba(122,96,48,0.08) 15%, rgba(100,80,40,0.18) 35%, rgba(85,65,30,0.25) 50%, rgba(100,80,40,0.18) 65%, rgba(122,96,48,0.08) 85%, transparent) !important;
}
[data-theme="light"] .storeHead::before {
  background: radial-gradient(ellipse at center, rgba(185,150,90,0.05) 0%, transparent 65%) !important;
}

/* ── Light: Cards ────────────────────────────────────────────────────────── */
[data-theme="light"] .card,
[data-theme="light"] .card.productCard {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.50) 40%, rgba(255,255,255,0.40) 100%),
    rgba(248,246,242,0.55) !important;
  border-color: rgba(0,0,0,0.055) !important;
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.50),
    0 1px 3px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.06),
    0 12px 32px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .card.productCard::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.40) 20%, rgba(255,255,255,0.50) 50%, rgba(255,255,255,0.40) 80%, transparent) !important;
}
@media (hover: hover) {
  [data-theme="light"] .card:hover,
  [data-theme="light"] .card.productCard:hover {
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow:
      inset 0 0.5px 0 rgba(255,255,255,0.55),
      0 2px 6px rgba(0,0,0,0.05),
      0 8px 20px rgba(0,0,0,0.07),
      0 20px 48px rgba(0,0,0,0.07),
      0 0 36px rgba(185,150,90,0.03) !important;
  }
}
[data-theme="light"] .cardBody {
  background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.20) 100%), rgba(248,246,242,0.35) !important;
}
[data-theme="light"] .cardPh { background: linear-gradient(145deg, rgba(200,190,175,0.12), #EAE6E0 50%, #E2DED7 100%) !important; }
[data-theme="light"] .cardPhMark { color: rgba(140,130,115,0.12) !important; }

/* ── Light: Topbar ───────────────────────────────────────────────────────── */
[data-theme="light"] .topbar {
  background: linear-gradient(180deg, rgba(248,246,242,0.86) 0%, rgba(244,242,238,0.80) 100%) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.05) !important;
}
[data-theme="light"] .navCount {
  background: linear-gradient(135deg, #5A5550, #4A4540) !important;
  color: #F6F4F1 !important; -webkit-text-fill-color: #F6F4F1 !important;
}

/* ── Light: Mobile nav ───────────────────────────────────────────────────── */
[data-theme="light"] .mobileNav {
  background: rgba(248,246,242,0.82) !important;
  box-shadow: 0 -1px 0 rgba(0,0,0,0.04), 0 -8px 32px rgba(0,0,0,0.05) !important;
}
[data-theme="light"] .mobileNavItem svg { stroke: rgba(74,69,64,0.28) !important; }
[data-theme="light"] .mobileNavItem.mobileNavActive svg { stroke: rgba(74,69,64,0.62) !important; }
[data-theme="light"] .mobileNavItem::before {
  background: linear-gradient(90deg, transparent, rgba(122,96,48,0.22) 35%, rgba(122,96,48,0.38) 50%, rgba(122,96,48,0.22) 65%, transparent) !important;
}
[data-theme="light"] .mobileNavBadge {
  background: linear-gradient(135deg, #5A5550, #4A4540) !important; color: #F6F4F1 !important;
}
[data-theme="light"] .mobileNavItem.mobileNavActive .mobileNavIconWrap {
  background: rgba(74,69,64,0.04) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.45), 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* ── Light: Category pills ───────────────────────────────────────────────── */
[data-theme="light"] .catLink:hover { background: rgba(0,0,0,0.025) !important; border-color: rgba(0,0,0,0.035) !important; }
[data-theme="light"] .catLink.isActive {
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.30) 100%), rgba(248,246,242,0.60) !important;
  border-color: rgba(0,0,0,0.05) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.45), 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* ── Light: Search ───────────────────────────────────────────────────────── */
[data-theme="light"] .searchInput {
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.35) 100%), rgba(248,246,242,0.55) !important;
  border-color: rgba(0,0,0,0.05) !important; color: var(--tx) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.40), 0 1px 4px rgba(0,0,0,0.03) !important;
}
[data-theme="light"] .searchInput::placeholder { color: var(--tx3) !important; }
[data-theme="light"] .searchInput:focus {
  border-color: rgba(122,96,48,0.18) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.45), 0 0 0 3px rgba(122,96,48,0.05), 0 2px 8px rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .searchIco { color: rgba(74,69,64,0.22) !important; }

/* ── Light: Panels ───────────────────────────────────────────────────────── */
[data-theme="light"] .panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.40) 50%, rgba(255,255,255,0.30) 100%), rgba(248,246,242,0.50) !important;
  border-color: rgba(0,0,0,0.045) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.05), 0 16px 40px rgba(0,0,0,0.04) !important;
}

/* ── Light: Buttons ──────────────────────────────────────────────────────── */
[data-theme="light"] .cardActions .btn,
[data-theme="light"] .cardActions .btnPrimary,
[data-theme="light"] .cardActions button[data-add-to-cart],
[data-theme="light"] body.storeIndex .productGrid .cardActions .btn.btnPrimary.btnWide {
  background: linear-gradient(180deg, rgba(255,255,255,0.50) 0%, rgba(245,240,230,0.40) 100%), rgba(248,246,242,0.50) !important;
  border-color: rgba(0,0,0,0.05) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.45), 0 1px 4px rgba(0,0,0,0.04) !important;
}
@media (hover: hover) {
  [data-theme="light"] .cardActions .btn:hover,
  [data-theme="light"] .cardActions .btnPrimary:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.60) 0%, rgba(245,240,230,0.50) 100%), rgba(252,250,246,0.55) !important;
    border-color: rgba(0,0,0,0.07) !important;
    box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.50), 0 2px 8px rgba(0,0,0,0.06), 0 0 10px rgba(122,96,48,0.03) !important;
  }
}

[data-theme="light"] .btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.22) 100%), rgba(248,246,242,0.50) !important;
  border: 1px solid rgba(0,0,0,0.05) !important; color: var(--tx2) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.40), 0 1px 4px rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .btn:hover { color: var(--tx) !important; border-color: rgba(0,0,0,0.07) !important; }
[data-theme="light"] .btnPrimary, [data-theme="light"] .detailAddBtn {
  background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(245,240,230,0.45) 100%), rgba(248,246,242,0.50) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
}
[data-theme="light"] .btnGhost { color: var(--tx2) !important; -webkit-text-fill-color: var(--tx2) !important; }
[data-theme="light"] .btnGhost:hover { color: var(--tx) !important; -webkit-text-fill-color: var(--tx) !important; }

/* ── Light: Theme toggle button ──────────────────────────────────────────── */
[data-theme="light"] .themeToggle {
  background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.50) 100%), rgba(240,237,232,0.88);
  border-color: rgba(0,0,0,0.06);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.55), 0 2px 8px rgba(0,0,0,0.06);
}

/* ── Light: Footer ───────────────────────────────────────────────────────── */
[data-theme="light"] .footer::before {
  background: linear-gradient(90deg, transparent, rgba(122,96,48,0.05) 15%, rgba(100,80,40,0.12) 35%, rgba(85,65,30,0.16) 50%, rgba(100,80,40,0.12) 65%, rgba(122,96,48,0.05) 85%, transparent) !important;
}
[data-theme="light"] .footerCopy { color: var(--tx3) !important; }

/* ── Light: Forms ────────────────────────────────────────────────────────── */
[data-theme="light"] .field input:not(.qtyInput):not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] .field textarea,
[data-theme="light"] .field select {
  background: linear-gradient(180deg, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.35) 100%), rgba(248,246,242,0.50) !important;
  border-color: rgba(0,0,0,0.08) !important; color: var(--tx) !important;
}
[data-theme="light"] .field input:not(.qtyInput):focus,
[data-theme="light"] .field textarea:focus,
[data-theme="light"] .field select:focus {
  background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.50) 100%), rgba(248,246,242,0.60) !important;
  border-color: rgba(122,96,48,0.18) !important;
  box-shadow: 0 0 0 3px rgba(122,96,48,0.05), 0 2px 8px rgba(0,0,0,0.03) !important;
  color: var(--tx) !important;
}
[data-theme="light"] .field input::placeholder,
[data-theme="light"] .field textarea::placeholder { color: var(--tx3) !important; }
[data-theme="light"] .field select option { background: #fff !important; color: var(--tx) !important; }
[data-theme="light"] .field label, [data-theme="light"] .fieldLabel { color: var(--tx2) !important; }

/* Light autofill override */
[data-theme="light"] .field input:-webkit-autofill,
[data-theme="light"] .field input:-webkit-autofill:hover,
[data-theme="light"] .field input:-webkit-autofill:focus,
[data-theme="light"] .field select:-webkit-autofill {
  -webkit-text-fill-color: var(--tx) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(248,246,242,0.97) inset !important;
  box-shadow: 0 0 0 1000px rgba(248,246,242,0.97) inset !important;
  border-color: rgba(0,0,0,0.08) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* ── Light: Qty ──────────────────────────────────────────────────────────── */
[data-theme="light"] .qtyPill {
  background: linear-gradient(180deg, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.28) 100%), rgba(248,246,242,0.50) !important;
  border-color: rgba(0,0,0,0.05) !important;
}
[data-theme="light"] .qtyBtn { color: rgba(74,69,64,0.35) !important; }
[data-theme="light"] .qtyBtn:hover { background: rgba(0,0,0,0.025) !important; color: rgba(74,69,64,0.60) !important; }
[data-theme="light"] .qtyInput { color: var(--tx) !important; background: rgba(0,0,0,0.012) !important; }

/* ── Light: Media, RV, alerts, toast ─────────────────────────────────────── */
[data-theme="light"] .mediaFrame {
  border-color: rgba(0,0,0,0.05) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.35), 0 4px 16px rgba(0,0,0,0.05), 0 12px 36px rgba(0,0,0,0.05) !important;
}
[data-theme="light"] .mediaPlaceholder { background: linear-gradient(145deg, #EAE6E0, #E2DED7) !important; color: rgba(140,130,115,0.10) !important; }
[data-theme="light"] .rvCard {
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.35) 100%), rgba(248,246,242,0.50) !important;
  border-color: rgba(0,0,0,0.04) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.40), 0 2px 8px rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .rvCard:hover { border-color: rgba(0,0,0,0.07) !important; }
[data-theme="light"] .alert {
  background: linear-gradient(180deg, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.30) 100%), rgba(248,246,242,0.50) !important;
  border-color: rgba(0,0,0,0.04) !important; color: var(--tx) !important;
}
[data-theme="light"] .toast {
  background: linear-gradient(180deg, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.50) 100%), rgba(248,246,242,0.82) !important;
  border-color: rgba(0,0,0,0.05) !important; color: var(--tx) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.45), 0 4px 16px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .alertSuccess, [data-theme="light"] .alertGood {
  background: rgba(30,140,80,0.05) !important; color: #1A7A42 !important; box-shadow: 0 0 0 1px rgba(30,140,80,0.12) !important;
}

/* ── Light: Dividers ─────────────────────────────────────────────────────── */
[data-theme="light"] hr, [data-theme="light"] .divider, [data-theme="light"] .sep, [data-theme="light"] .hrSoft {
  background: linear-gradient(90deg, transparent, rgba(74,69,64,0.06) 25%, rgba(122,96,48,0.12) 50%, rgba(74,69,64,0.06) 75%, transparent) !important;
}
[data-theme="light"] .cartRow { border-color: rgba(0,0,0,0.035) !important; }
[data-theme="light"] .cartHead { border-color: rgba(0,0,0,0.035) !important; }
[data-theme="light"] .cartFooterGrid { border-color: rgba(0,0,0,0.035) !important; }
[data-theme="light"] .cartThumb { border-color: rgba(0,0,0,0.05) !important; background: rgba(0,0,0,0.015) !important; }

/* ── Light: Misc ─────────────────────────────────────────────────────────── */
[data-theme="light"] .muted { color: var(--tx2) !important; }
[data-theme="light"] .helpText { color: var(--tx3) !important; }
[data-theme="light"] .panel p, [data-theme="light"] .panel .panelText { color: var(--tx2) !important; }
[data-theme="light"] .detailDesc { color: var(--tx2) !important; }
[data-theme="light"] .holidayModeBanner {
  background: linear-gradient(180deg, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.30) 100%), rgba(248,246,242,0.55) !important;
  border-color: rgba(0,0,0,0.05) !important;
}
[data-theme="light"] .holidayModeBannerInner { color: var(--tx) !important; text-shadow: none !important; }
[data-theme="light"] .minOrderBanner { background: rgba(122,96,48,0.035) !important; box-shadow: 0 0 0 1px rgba(122,96,48,0.08) !important; }
[data-theme="light"] .minOrderFill { background: linear-gradient(90deg, #8B7040, #A08050, #8B7040) !important; }
[data-theme="light"] .coinOption { border-color: rgba(0,0,0,0.05) !important; background: rgba(255,255,255,0.45) !important; }
[data-theme="light"] .coinOption.isSelected { border-color: rgba(122,96,48,0.18) !important; }
[data-theme="light"] .wysiwyg a { color: var(--gold-mid) !important; }

/* ── Light: Scrollbar ────────────────────────────────────────────────────── */
[data-theme="light"] * { scrollbar-color: rgba(74,69,64,0.10) transparent !important; }
[data-theme="light"] *::-webkit-scrollbar-thumb { background: rgba(74,69,64,0.12) !important; }

/* ── Light: Focus ────────────────────────────────────────────────────────── */
[data-theme="light"] :focus-visible {
  box-shadow: 0 0 0 2px rgba(122,96,48,0.22), 0 0 0 5px rgba(122,96,48,0.06) !important;
}

/* ── Light: Badge pills ──────────────────────────────────────────────────── */
[data-theme="light"] .badge::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.35) 55%, rgba(255,255,255,0.20) 100%),
    rgba(248,246,242,0.70) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.45), 0 2px 8px rgba(0,0,0,0.08) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════════════════════ */
@media print { .themeToggle { display: none !important; } }



/* ========================================================================== */
/* Luxe refinement pass v4 - readability, CTA emphasis, dark gold luxury       */
/* ========================================================================== */

/* Dark mode luxury background refinement (restrained gold, no yellow blast) */
html:not([data-theme="light"]) body {
  background-color: #050403 !important;
  background-image:
    radial-gradient(1200px 720px at 84% -8%, rgba(164,122,62,0.085) 0%, rgba(164,122,62,0.040) 28%, rgba(120,92,46,0.018) 44%, transparent 70%),
    radial-gradient(900px 620px at 8% 24%, rgba(255,236,206,0.030) 0%, rgba(208,176,128,0.016) 34%, transparent 68%),
    radial-gradient(1200px 700px at 48% 108%, rgba(126,92,38,0.075) 0%, rgba(126,92,38,0.030) 36%, transparent 72%),
    linear-gradient(145deg,
      rgba(250,235,210,0.020) 0%,
      rgba(176,142,86,0.020) 18%,
      rgba(0,0,0,0.000) 31%,
      rgba(255,245,226,0.010) 44%,
      rgba(163,126,70,0.018) 57%,
      rgba(0,0,0,0.000) 70%,
      rgba(192,155,95,0.015) 84%,
      rgba(255,245,226,0.010) 100%),
    linear-gradient(180deg, #0a0907 0%, #080705 18%, #060504 46%, #050404 70%, #040303 100%) !important;
}

html:not([data-theme="light"]) body::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,240,215,0.04) 10%,
    rgba(181,145,84,0.10) 24%,
    rgba(208,177,120,0.16) 38%,
    rgba(235,219,190,0.20) 50%,
    rgba(208,177,120,0.16) 62%,
    rgba(181,145,84,0.10) 76%,
    rgba(255,240,215,0.04) 90%,
    transparent 100%) !important;
}

html:not([data-theme="light"]) .topbar,
html:not([data-theme="light"]) .mobileNav {
  background:
    linear-gradient(180deg, rgba(17,14,11,0.84) 0%, rgba(10,8,7,0.78) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,235,205,0.03),
    0 1px 0 rgba(173,132,69,0.08),
    0 12px 42px rgba(0,0,0,0.72) !important;
}
html:not([data-theme="light"]) .mobileNav {
  box-shadow:
    0 -1px 0 rgba(255,235,205,0.03),
    0 -1px 0 rgba(173,132,69,0.08),
    0 -12px 42px rgba(0,0,0,0.72) !important;
}

html:not([data-theme="light"]) .card,
html:not([data-theme="light"]) .card.productCard,
html:not([data-theme="light"]) .panel,
html:not([data-theme="light"]) .rvCard,
html:not([data-theme="light"]) .toast,
html:not([data-theme="light"]) .holidayModeBanner {
  background:
    linear-gradient(180deg,
      rgba(255,248,236,0.050) 0%,
      rgba(210,175,118,0.022) 18%,
      rgba(255,255,255,0.010) 52%,
      rgba(255,245,225,0.006) 100%),
    rgba(13,11,10,0.78) !important;
  border-color: rgba(231,200,151,0.07) !important;
}

html:not([data-theme="light"]) .cardBody {
  background:
    linear-gradient(180deg, rgba(255,248,234,0.020) 0%, rgba(255,255,255,0.006) 100%),
    rgba(11,10,9,0.64) !important;
}

/* Category readability and selected state contrast */
.catLink {
  color: rgba(232,224,210,0.68) !important;
  -webkit-text-fill-color: rgba(232,224,210,0.68) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
.catLink:hover {
  color: rgba(244,238,229,0.92) !important;
  -webkit-text-fill-color: rgba(244,238,229,0.92) !important;
}
.catLink.isActive {
  color: rgba(248,239,224,0.98) !important;
  -webkit-text-fill-color: rgba(248,239,224,0.98) !important;
  background:
    linear-gradient(180deg, rgba(255,248,236,0.07) 0%, rgba(214,177,116,0.018) 100%),
    rgba(20,16,13,0.72) !important;
  box-shadow:
    inset 0 0 0 1px rgba(233,205,160,0.12),
    inset 0 0.5px 0 rgba(255,249,236,0.08),
    0 4px 14px rgba(0,0,0,0.32) !important;
}
.catLink.isActive::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232,206,163,0.28) 15%,
    rgba(221,186,125,0.88) 36%,
    rgba(250,239,220,0.95) 50%,
    rgba(221,186,125,0.88) 64%,
    rgba(232,206,163,0.28) 85%,
    transparent 100%) !important;
}

[data-theme="light"] .catLink {
  color: rgba(63,56,49,0.72) !important;
  -webkit-text-fill-color: rgba(63,56,49,0.72) !important;
  text-shadow: none !important;
}
[data-theme="light"] .catLink:hover {
  color: rgba(48,43,38,0.92) !important;
  -webkit-text-fill-color: rgba(48,43,38,0.92) !important;
}
[data-theme="light"] .catLink.isActive {
  color: #2f2923 !important;
  -webkit-text-fill-color: #2f2923 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(250,245,236,0.58) 100%),
    rgba(248,246,242,0.70) !important;
  box-shadow:
    inset 0 0 0 1px rgba(122,96,48,0.11),
    inset 0 0.5px 0 rgba(255,255,255,0.70),
    0 3px 12px rgba(0,0,0,0.05) !important;
}
[data-theme="light"] .catLink.isActive::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(122,96,48,0.18) 18%,
    rgba(122,96,48,0.65) 50%,
    rgba(122,96,48,0.18) 82%,
    transparent 100%) !important;
}

/* Light mode global readability pass for common storefront text */
[data-theme="light"] body,
[data-theme="light"] .shell,
[data-theme="light"] .content,
[data-theme="light"] .page,
[data-theme="light"] .wysiwyg,
[data-theme="light"] .panel,
[data-theme="light"] .card,
[data-theme="light"] .cardBody {
  color: #2f2a25 !important;
}

[data-theme="light"] .navLink,
[data-theme="light"] .mobileNavItem,
[data-theme="light"] .mobileNavItem span,
[data-theme="light"] .mobileNavLabel,
[data-theme="light"] .cardTitle,
[data-theme="light"] .detailTitle,
[data-theme="light"] .pageTitle,
[data-theme="light"] .rvName,
[data-theme="light"] .panelTitle,
[data-theme="light"] .footerLinks a,
[data-theme="light"] .footerCopy,
[data-theme="light"] .qtyBtn,
[data-theme="light"] .qtyInput,
[data-theme="light"] .field label,
[data-theme="light"] .fieldLabel,
[data-theme="light"] .small,
[data-theme="light"] .muted,
[data-theme="light"] .detailDesc,
[data-theme="light"] .notifyHint,
[data-theme="light"] .alert,
[data-theme="light"] .alert *:not(a) {
  color: #3a342e !important;
  -webkit-text-fill-color: #3a342e !important;
}

[data-theme="light"] .navLink:hover,
[data-theme="light"] .navLink.navLinkActive,
[data-theme="light"] .mobileNavItem.mobileNavActive,
[data-theme="light"] .mobileNavItem.mobileNavActive span,
[data-theme="light"] .cardTitle:hover,
[data-theme="light"] .footerLinks a:hover {
  color: #2c2621 !important;
  -webkit-text-fill-color: #2c2621 !important;
}

[data-theme="light"] .priceNow,
[data-theme="light"] .detailPrice .priceNow,
[data-theme="light"] .priceWas,
[data-theme="light"] .rvPrice,
[data-theme="light"] .mono.priceWas {
  color: #4d4030 !important;
  -webkit-text-fill-color: #4d4030 !important;
  text-shadow: none !important;
}

[data-theme="light"] .priceWas,
[data-theme="light"] .mono.priceWas {
  opacity: 0.85;
}

/* Make primary CTA noticeably lighter in both themes */
.cardActions .btn.btnPrimary,
.cardActions button[data-add-to-cart],
body.storeIndex .productGrid .cardActions .btn.btnPrimary.btnWide,
.detailAddBtn.btnPrimary,
button#addBtn.btnPrimary {
  border: 1px solid rgba(235,206,160,0.12) !important;
  background:
    linear-gradient(180deg,
      rgba(255,250,241,0.16) 0%,
      rgba(233,202,154,0.08) 42%,
      rgba(255,248,236,0.10) 100%),
    rgba(30,24,20,0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,251,242,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 0 0 1px rgba(229,191,136,0.05),
    0 8px 22px rgba(0,0,0,0.34) !important;
}

.cardActions .btn.btnPrimary .btnText,
.cardActions button[data-add-to-cart] .btnText,
.detailAddBtn.btnPrimary .btnText,
button#addBtn.btnPrimary .btnText {
  color: rgba(247,238,224,0.95) !important;
  -webkit-text-fill-color: rgba(247,238,224,0.95) !important;
  letter-spacing: 0.12em !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.38), 0 0 10px rgba(214,177,116,0.08);
}

@media (hover: hover) {
  .cardActions .btn.btnPrimary:hover,
  .cardActions button[data-add-to-cart]:hover,
  .detailAddBtn.btnPrimary:hover,
  button#addBtn.btnPrimary:hover {
    border-color: rgba(242,214,170,0.18) !important;
    background:
      linear-gradient(180deg,
        rgba(255,252,245,0.22) 0%,
        rgba(236,205,156,0.11) 42%,
        rgba(255,249,240,0.14) 100%),
      rgba(36,29,24,0.92) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,252,245,0.20),
      inset 0 -1px 0 rgba(0,0,0,0.58),
      0 0 0 1px rgba(236,202,151,0.08),
      0 0 24px rgba(214,177,116,0.06),
      0 12px 28px rgba(0,0,0,0.42) !important;
  }
}

[data-theme="light"] .cardActions .btn.btnPrimary,
[data-theme="light"] .cardActions button[data-add-to-cart],
[data-theme="light"] body.storeIndex .productGrid .cardActions .btn.btnPrimary.btnWide,
[data-theme="light"] .detailAddBtn.btnPrimary,
[data-theme="light"] button#addBtn.btnPrimary {
  border: 1px solid rgba(122,96,48,0.12) !important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.92) 0%,
      rgba(252,246,236,0.76) 42%,
      rgba(247,238,221,0.86) 100%),
    rgba(248,246,242,0.80) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    inset 0 -1px 0 rgba(122,96,48,0.06),
    0 4px 14px rgba(0,0,0,0.06),
    0 0 0 1px rgba(122,96,48,0.03) !important;
}
[data-theme="light"] .cardActions .btn.btnPrimary .btnText,
[data-theme="light"] .cardActions button[data-add-to-cart] .btnText,
[data-theme="light"] .detailAddBtn.btnPrimary .btnText,
[data-theme="light"] button#addBtn.btnPrimary .btnText {
  color: #3d3328 !important;
  -webkit-text-fill-color: #3d3328 !important;
  text-shadow: none !important;
}

/* Keep secondary buttons readable in light mode */
[data-theme="light"] .btn,
[data-theme="light"] .btn .btnText,
[data-theme="light"] .btnGhost,
[data-theme="light"] .btnGhost .btnText {
  color: #4a4138 !important;
  -webkit-text-fill-color: #4a4138 !important;
}

/* Theme toggle should not float sticky/fixed on mobile */
@media (max-width: 767px) {
  .themeToggle {
    position: absolute !important;
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    right: 12px !important;
    bottom: auto !important;
    width: 36px !important;
    height: 36px !important;
    z-index: 60 !important;
  }

  .storeHead {
    padding-top: 10px !important;
  }

  .catNav {
    gap: 6px !important;
    padding: 0 10px 16px !important;
    scroll-padding-inline: 10px;
  }

  .catLink {
    font-size: 10px !important;
    letter-spacing: 0.11em !important;
    padding: 7px 12px 10px !important;
  }

  .cardBody {
    padding: 12px 12px 13px !important;
    gap: 8px !important;
  }

  .cardTitle {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .priceNow {
    font-size: 17px !important;
  }

  .cardActions .btn,
  .cardActions .btnPrimary,
  .detailAddBtn,
  button#addBtn {
    min-height: 46px !important;
    border-radius: 11px !important;
  }

  .cardActions .btn .btnText,
  .cardActions .btnPrimary .btnText,
  .detailAddBtn .btnText,
  button#addBtn .btnText {
    font-size: 10.5px !important;
    letter-spacing: 0.13em !important;
  }

  .qtyRow {
    align-items: stretch !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  .qtyRow > div:first-child {
    width: 100%;
  }
  .qtyPill {
    width: 100%;
    justify-content: space-between;
  }
  .qtyBtn {
    min-width: 46px !important;
    font-size: 22px !important;
  }
  .qtyInput {
    min-width: 0;
    flex: 1;
    text-align: center;
  }
  .qtyGrow {
    width: 100%;
    flex: 1 0 100%;
  }

  .mobileNavItem span,
  .mobileNavLabel {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
  }

  [data-theme="light"] .mobileNavItem,
  [data-theme="light"] .mobileNavLabel,
  [data-theme="light"] .mobileNavItem span {
    color: rgba(66,58,50,0.82) !important;
    -webkit-text-fill-color: rgba(66,58,50,0.82) !important;
  }
  [data-theme="light"] .mobileNavItem.mobileNavActive,
  [data-theme="light"] .mobileNavItem.mobileNavActive span,
  [data-theme="light"] .mobileNavItem.mobileNavActive .mobileNavLabel {
    color: #2f2923 !important;
    -webkit-text-fill-color: #2f2923 !important;
  }
}

/* Small screens that are extra narrow */
@media (max-width: 380px) {
  .catLink {
    padding-inline: 10px !important;
    font-size: 9px !important;
    letter-spacing: 0.10em !important;
  }

  .cardActions .btn .btnText,
  .cardActions .btnPrimary .btnText,
  .detailAddBtn .btnText,
  button#addBtn .btnText {
    font-size: 10px !important;
    letter-spacing: 0.11em !important;
  }
}

/* END — storefront-luxe-2026.css */


/* ═══════════════════════════════════════════════════════════════════════════════
   V5 LUXE OVERHAUL — Premium dark gradient, light theme buttons, footer,
   product detail buttons, mobile theme toggle, Pixel 7 fix
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── V5: PREMIUM DARK GRADIENT — Subtle, sleek, elegant ──────────────────── */
html:not([data-theme="light"]) body {
  background-color: #030303 !important;
  background-image:
    /* Deep corner glow top-right — warm amber */
    radial-gradient(1100px 650px at 88% -6%,
      rgba(140,105,50,0.07) 0%,
      rgba(120,88,38,0.035) 30%,
      rgba(80,60,28,0.012) 50%,
      transparent 72%),
    /* Soft left accent */
    radial-gradient(800px 550px at 6% 22%,
      rgba(180,155,115,0.022) 0%,
      rgba(140,115,75,0.010) 40%,
      transparent 70%),
    /* Bottom center warmth */
    radial-gradient(1000px 500px at 50% 105%,
      rgba(110,82,36,0.055) 0%,
      rgba(90,68,30,0.025) 40%,
      transparent 72%),
    /* Diagonal silk ribbon */
    linear-gradient(152deg,
      rgba(200,175,130,0.012) 0%,
      rgba(160,130,80,0.014) 16%,
      transparent 30%,
      rgba(180,150,100,0.008) 48%,
      transparent 62%,
      rgba(160,130,80,0.010) 78%,
      rgba(200,175,130,0.006) 100%),
    /* Base depth gradient */
    linear-gradient(180deg,
      #080706 0%,
      #060504 15%,
      #050403 35%,
      #040303 55%,
      #030302 75%,
      #020202 100%) !important;
}


/* ── V5: LUXE LIGHT THEME BUTTONS — $50M brand feel ─────────────────────── */

/* Primary CTA buttons in light mode — rich warm cream with gold depth */
[data-theme="light"] .cardActions .btn.btnPrimary,
[data-theme="light"] .cardActions button[data-add-to-cart],
[data-theme="light"] body.storeIndex .productGrid .cardActions .btn.btnPrimary.btnWide,
[data-theme="light"] .detailAddBtn.btnPrimary,
[data-theme="light"] button#addBtn.btnPrimary {
  border: 1px solid rgba(90,72,36,0.14) !important;
  background:
    linear-gradient(180deg,
      #3D3328 0%,
      #4A3D30 48%,
      #36291E 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,245,220,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 2px 4px rgba(0,0,0,0.08),
    0 6px 16px rgba(60,48,28,0.12),
    0 0 0 1px rgba(90,72,36,0.05) !important;
  transition: all 0.3s cubic-bezier(0.22,0.68,0.31,1) !important;
}
[data-theme="light"] .cardActions .btn.btnPrimary .btnText,
[data-theme="light"] .cardActions button[data-add-to-cart] .btnText,
[data-theme="light"] .detailAddBtn.btnPrimary .btnText,
[data-theme="light"] button#addBtn.btnPrimary .btnText {
  color: #F2E8D5 !important;
  -webkit-text-fill-color: #F2E8D5 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
  letter-spacing: 0.14em !important;
}
@media (hover: hover) {
  [data-theme="light"] .cardActions .btn.btnPrimary:hover,
  [data-theme="light"] .cardActions button[data-add-to-cart]:hover,
  [data-theme="light"] .detailAddBtn.btnPrimary:hover,
  [data-theme="light"] button#addBtn.btnPrimary:hover {
    background:
      linear-gradient(180deg,
        #4A3D30 0%,
        #554838 48%,
        #3D3328 100%) !important;
    border-color: rgba(90,72,36,0.20) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,245,220,0.22),
      inset 0 -1px 0 rgba(0,0,0,0.28),
      0 4px 8px rgba(0,0,0,0.10),
      0 10px 24px rgba(60,48,28,0.16),
      0 0 28px rgba(120,96,48,0.06) !important;
    transform: translateY(-1px) !important;
  }
}

/* Secondary buttons in light mode — glass with warm tint */
[data-theme="light"] .btn:not(.btnPrimary):not(.btnGhost):not([data-add-to-cart]) {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.80) 0%,
      rgba(250,246,238,0.65) 50%,
      rgba(245,240,230,0.75) 100%),
    rgba(255,255,255,0.40) !important;
  border: 1px solid rgba(60,48,28,0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    0 1px 3px rgba(0,0,0,0.04),
    0 4px 10px rgba(0,0,0,0.04) !important;
  color: #3D3328 !important;
  -webkit-text-fill-color: #3D3328 !important;
  transition: all 0.25s ease !important;
}
[data-theme="light"] .btn:not(.btnPrimary):not(.btnGhost):not([data-add-to-cart]) .btnText {
  color: #3D3328 !important;
  -webkit-text-fill-color: #3D3328 !important;
}
@media (hover: hover) {
  [data-theme="light"] .btn:not(.btnPrimary):not(.btnGhost):not([data-add-to-cart]):hover {
    border-color: rgba(60,48,28,0.12) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.75),
      0 2px 6px rgba(0,0,0,0.06),
      0 6px 16px rgba(0,0,0,0.05) !important;
    transform: translateY(-0.5px) !important;
  }
}

/* Ghost buttons in light mode */
[data-theme="light"] .btnGhost,
[data-theme="light"] .btnGhost .btnText {
  color: #5A4D40 !important;
  -webkit-text-fill-color: #5A4D40 !important;
}
[data-theme="light"] .btnGhost:hover,
[data-theme="light"] .btnGhost:hover .btnText {
  color: #3D3328 !important;
  -webkit-text-fill-color: #3D3328 !important;
  background: rgba(60,48,28,0.04) !important;
}

/* Card-level secondary buttons in light mode */
[data-theme="light"] .cardActions .btn:not(.btnPrimary),
[data-theme="light"] .cardActions .btn:not(.btnPrimary) .btnText {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.85) 0%,
      rgba(248,244,236,0.70) 100%),
    rgba(252,250,245,0.55) !important;
  border: 1px solid rgba(60,48,28,0.06) !important;
  color: #4A3D30 !important;
  -webkit-text-fill-color: #4A3D30 !important;
}


/* ── V5: PRODUCT DETAIL BUTTONS — Sleeker, matching storefront quality ──── */

.detailActions .btn.btnGhost {
  background:
    linear-gradient(180deg,
      rgba(var(--silver-rgb),0.06) 0%,
      rgba(var(--silver-rgb),0.02) 50%,
      rgba(var(--silver-rgb),0.04) 100%),
    rgba(10,10,10,0.60) !important;
  border: 1px solid rgba(var(--silver-rgb),0.07) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.08),
    0 2px 8px rgba(0,0,0,0.30) !important;
  color: rgba(var(--silver-rgb),0.55) !important;
  -webkit-text-fill-color: rgba(var(--silver-rgb),0.55) !important;
  transition: all 0.25s cubic-bezier(0.22,0.68,0.31,1) !important;
}
.detailActions .btn.btnGhost .btnText {
  color: rgba(var(--silver-rgb),0.55) !important;
  -webkit-text-fill-color: rgba(var(--silver-rgb),0.55) !important;
}
@media (hover: hover) {
  .detailActions .btn.btnGhost:hover {
    border-color: rgba(var(--silver-rgb),0.12) !important;
    background:
      linear-gradient(180deg,
        rgba(var(--silver-rgb),0.10) 0%,
        rgba(var(--silver-rgb),0.04) 50%,
        rgba(var(--silver-rgb),0.06) 100%),
      rgba(14,14,14,0.70) !important;
    box-shadow:
      inset 0 0.5px 0 rgba(255,255,255,0.12),
      0 0 14px rgba(var(--silver-rgb),0.04),
      0 4px 14px rgba(0,0,0,0.40) !important;
    color: rgba(var(--silver-rgb),0.80) !important;
    -webkit-text-fill-color: rgba(var(--silver-rgb),0.80) !important;
  }
  .detailActions .btn.btnGhost:hover .btnText {
    color: rgba(var(--silver-rgb),0.80) !important;
    -webkit-text-fill-color: rgba(var(--silver-rgb),0.80) !important;
  }
}

/* Light mode detail action buttons */
[data-theme="light"] .detailActions .btn.btnGhost {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.80) 0%,
      rgba(248,244,236,0.65) 100%),
    rgba(252,250,245,0.50) !important;
  border: 1px solid rgba(60,48,28,0.07) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 1px 4px rgba(0,0,0,0.04) !important;
  color: #5A4D40 !important;
  -webkit-text-fill-color: #5A4D40 !important;
  backdrop-filter: none !important;
}
[data-theme="light"] .detailActions .btn.btnGhost .btnText {
  color: #5A4D40 !important;
  -webkit-text-fill-color: #5A4D40 !important;
}
@media (hover: hover) {
  [data-theme="light"] .detailActions .btn.btnGhost:hover {
    border-color: rgba(60,48,28,0.12) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.72),
      0 2px 8px rgba(0,0,0,0.06) !important;
    color: #3D3328 !important;
    -webkit-text-fill-color: #3D3328 !important;
    transform: translateY(-0.5px) !important;
  }
  [data-theme="light"] .detailActions .btn.btnGhost:hover .btnText {
    color: #3D3328 !important;
    -webkit-text-fill-color: #3D3328 !important;
  }
}


/* ── V5: FOOTER TEXT SIZE INCREASE ───────────────────────────────────────── */

.footerLinks a {
  font-size: 18px !important;
  letter-spacing: 0.14em !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-family: var(--ff-h, 'Cormorant Garamond', serif) !important;
}
.footerCopy {
  font-size: 13px !important;
  letter-spacing: 0.03em !important;
  line-height: 1.5 !important;
}
@media (max-width: 767px) {
  .footerLinks a { font-size: 16px !important; }
  .footerCopy { font-size: 12px !important; }
}


/* ── V5: THEME TOGGLE IN FOOTER ────────────────────────────────────────── */

/* Hide the old fixed-position toggle entirely — toggle is now in footer */
.themeToggle:not(.themeToggleFooter) {
  display: none !important;
}

/* Also hide old mobile nav toggle class */
.themeToggleMobile {
  display: none !important;
}

.footerThemeWrap {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.themeToggleFooter {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%), rgba(12,12,12,0.70) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.35) !important;
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1), border-color 0.3s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  position: relative !important;
}

.themeToggleFooter:hover {
  border-color: rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%), rgba(12,12,12,0.80) !important;
}

.themeToggleFooter:active {
  transform: scale(0.90) !important;
}

.themeToggleFooter .iconSun,
.themeToggleFooter .iconMoon {
  position: absolute !important;
  width: 20px !important;
  height: 20px !important;
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease !important;
}

.themeToggleFooter .iconSun  { opacity: 1; transform: rotate(0deg) scale(1); color: rgba(220,200,160,0.65); }
.themeToggleFooter .iconMoon { opacity: 0; transform: rotate(-90deg) scale(0.5); color: rgba(120,130,160,0.65); }

[data-theme="light"] .themeToggleFooter .iconSun  { opacity: 0; transform: rotate(90deg) scale(0.5); }
[data-theme="light"] .themeToggleFooter .iconMoon { opacity: 1; transform: rotate(0deg) scale(1); color: rgba(80,70,120,0.75); }

[data-theme="light"] .themeToggleFooter {
  background: linear-gradient(180deg, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.45) 100%), rgba(240,237,232,0.85) !important;
  border-color: rgba(0,0,0,0.06) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.6), 0 2px 8px rgba(0,0,0,0.08) !important;
}

[data-theme="light"] .themeToggleFooter:hover {
  border-color: rgba(0,0,0,0.10) !important;
}


/* ── V5: PIXEL 7 (412px) & GENERAL OVERFLOW FIX ─────────────────────────── */

html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

main.wrap, .wrap {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

@media (max-width: 767px) {
  main.wrap, .wrap {
    max-width: 100vw !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .detailGrid {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .mediaFrame {
    max-width: 100% !important;
  }

  .inv {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .inv-hero {
    flex-direction: column !important;
    max-width: 100% !important;
  }

  .inv-hero-qr {
    max-width: 100% !important;
  }

  .inv-addr {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
  }

  .grid2 {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  .panel {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .row2 {
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Prevent any fixed-width elements from causing horizontal scroll */
  img, video, iframe, table, pre, code {
    max-width: 100% !important;
  }

  .mono {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }

  /* Ensure the checkout shipping help text wraps */
  .cartSummaryHelp {
    word-wrap: break-word !important;
  }
}

/* Extra narrow devices (Pixel 7 at 412px in portrait) */
@media (max-width: 420px) {
  main.wrap, .wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .storeHeadTitle {
    font-size: clamp(22px, 7vw, 32px) !important;
  }

  .productGrid {
    gap: 10px !important;
  }
}


/* ── V5: TEST MODE BANNER on storefront ──────────────────────────────────── */
.testModeBanner {
  background: rgba(212,175,55,.06);
  border: 1px solid rgba(212,175,55,.12);
  border-radius: 12px;
  padding: 10px 16px;
  text-align: center;
  font-size: 12px;
  color: rgba(212,175,55,.8);
  margin-bottom: 12px;
  font-family: var(--ff-b);
  letter-spacing: 0.06em;
}


/* ── V6: FILE INPUT DARK MODE FIX ──────────────────────────────────────── */

input[type="file"] {
  color: var(--tx2, rgba(255,255,255,0.65));
  font-size: 13px;
  font-family: var(--ff-b, 'Outfit', sans-serif);
}

input[type="file"]::file-selector-button {
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%),
              rgba(30,30,30,0.85);
  color: var(--tx, #eee);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-family: var(--ff-b, 'Outfit', sans-serif);
  font-weight: 500;
  cursor: pointer;
  margin-right: 12px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

input[type="file"]::file-selector-button:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%),
              rgba(40,40,40,0.90);
  border-color: rgba(255,255,255,0.16);
}

[data-theme="light"] input[type="file"] {
  color: var(--tx2);
}

[data-theme="light"] input[type="file"]::file-selector-button {
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(245,243,240,0.95) 100%);
  color: var(--tx);
  border-color: rgba(0,0,0,0.10);
}

[data-theme="light"] input[type="file"]::file-selector-button:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,246,243,1) 100%);
  border-color: rgba(0,0,0,0.16);
}


/* ── V6: FOOTER LINKS GAP ─────────────────────────────────────────────── */

.footerLinks {
  gap: 24px !important;
  display: flex !important;
}

/* END — V5 Luxe Overhaul */


/* ═══════════════════════════════════════════════════════════════════════════════
   V6 AMENDMENTS — Bigger title + icon, Light mode gold Add to Cart, Performance
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── BIGGER STORE TITLE ──────────────────────────────────────────────────── */
.storeHeadTitle {
  font-size: clamp(3rem, 11vw, 7rem) !important;
  letter-spacing: 0.03em !important;
  filter: drop-shadow(0 3px 28px rgba(200,165,100,0.22)) !important;
}
@media (max-width: 480px) {
  .storeHeadTitle {
    font-size: clamp(2.6rem, 12vw, 4.2rem) !important;
  }
}

/* ── SLIGHTLY BIGGER ICON / MASCOT ───────────────────────────────────────── */
.storeHeadMascot {
  width: 190px !important;
  height: 190px !important;
}
@media (max-width: 480px) {
  .storeHeadMascot {
    width: 130px !important;
    height: 130px !important;
  }
}

/* ── LIGHT MODE: POTENT GRADIENT GOLD ADD-TO-CART TEXT ────────────────────
   Rich gold gradient text with pop — stands out luxuriously                */

[data-theme="light"] .cardActions .btn.btnPrimary .btnText,
[data-theme="light"] .cardActions button[data-add-to-cart] .btnText,
[data-theme="light"] .detailAddBtn.btnPrimary .btnText,
[data-theme="light"] button#addBtn.btnPrimary .btnText {
  background: linear-gradient(135deg,
    #D4A841 0%,
    #F2D06B 18%,
    #E8C050 35%,
    #C49520 50%,
    #E8C050 65%,
    #F2D06B 82%,
    #D4A841 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  filter: drop-shadow(0 1px 2px rgba(160,120,30,0.28)) drop-shadow(0 0 8px rgba(212,168,65,0.12)) !important;
}

/* Hover: Amplify the gold glow */
@media (hover: hover) {
  [data-theme="light"] .cardActions .btn.btnPrimary:hover .btnText,
  [data-theme="light"] .cardActions button[data-add-to-cart]:hover .btnText,
  [data-theme="light"] .detailAddBtn.btnPrimary:hover .btnText,
  [data-theme="light"] button#addBtn.btnPrimary:hover .btnText {
    background: linear-gradient(135deg,
      #E8C050 0%,
      #FFE082 18%,
      #F2D06B 35%,
      #D4A841 50%,
      #F2D06B 65%,
      #FFE082 82%,
      #E8C050 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 3px rgba(160,120,30,0.35)) drop-shadow(0 0 12px rgba(212,168,65,0.18)) !important;
  }
}

/* ── Campaign Banner — Black/Grey Gradient, Width-Contained ────────────── */
.campaignBanner {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg,
    #0a0a0a 0%,
    #111111 12%,
    #1c1c1c 28%,
    #242424 42%,
    #1a1a1a 56%,
    #111111 72%,
    #0d0d0d 86%,
    #080808 100%) !important;
  border-top: 1px solid rgba(212,175,55,0.20) !important;
  border-bottom: 1px solid rgba(212,175,55,0.20) !important;
  padding: 22px 24px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  text-align: center !important;
  overflow: hidden;
  z-index: 10;
  box-shadow:
    0 -1px 0 rgba(255,255,255,.03),
    0 4px 24px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(0,0,0,.25);
}
.campaignBanner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 150% at 20% 50%, rgba(40,40,40,0.5) 0%, transparent 60%),
    radial-gradient(ellipse 60% 150% at 80% 50%, rgba(40,40,40,0.5) 0%, transparent 60%);
  pointer-events: none;
}
.campaignBannerGlobalTop {
  margin-top: 0 !important;
}

.campaignBanner::after {
  content: '';
  position: absolute;
  bottom: 0; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.30) 25%, rgba(212,175,55,0.50) 50%, rgba(212,175,55,0.30) 75%, transparent);
  pointer-events: none;
}
.campaignBannerInner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
  /* Width-contained to content, not stretched full-page */
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.07) 12%, rgba(255,255,255,.03) 13%, rgba(0,0,0,.14) 100%),
    linear-gradient(135deg, #5d636c 0%, #9ea5ae 18%, #dfe4ea 34%, #a7adb4 50%, #858b93 66%, #cfd5dc 82%, #676d76 100%);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 8px 28px rgba(0,0,0,.34),
    0 1px 0 rgba(255,255,255,.06);
}
/* HTML content inside banner */
.campaignBannerText {
  color: #d9be73 !important;
  text-align: center;
  line-height: 1.4;
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}
.campaignBannerText * {
  -webkit-text-fill-color: inherit !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  background: none !important;
  color: inherit;
  margin: 0;
}
.campaignBannerText strong, .campaignBannerText b {
  color: #F0D060 !important;
  font-weight: 800;
}
.campaignBannerText em, .campaignBannerText i {
  color: rgba(212,175,55,.80) !important;
  font-style: italic;
}
.campaignBannerText p {
  margin: 4px 0;
}
.campaignBannerText .headline {
  display: block;
  font-size: clamp(18px, 3.15vw, 28px);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.03;
  text-transform: uppercase;
  margin-bottom: 8px;
  background: linear-gradient(180deg, #fbefc8 0%, #e6cf95 22%, #cda85a 52%, #f1deaf 76%, #b88c3b 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.08), 0 0 18px rgba(212,175,55,.28), 0 2px 0 rgba(0,0,0,.62);
}
.campaignBannerText .subline {
  display: block;
  font-size: clamp(12px, 1.8vw, 15px);
  font-weight: 700;
  letter-spacing: 0.035em;
  color: rgba(44, 34, 14, .92) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.20);
}
.campaignBannerText .timer {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fff6da !important;
  background: linear-gradient(180deg, rgba(38,40,45,.78) 0%, rgba(16,17,20,.92) 100%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 5px 12px;
  margin-top: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 12px rgba(0,0,0,.26);
}
.campaignBannerText .offerPill {
  display: inline-block;
  margin: 0 0 8px 0;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24);
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.02) 100%);
  color: rgba(28,28,28,.92) !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.campaignBannerBtn {
  display: inline-flex !important;
  align-items: center;
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #0a0a0a !important;
  background: linear-gradient(135deg,
    #b79b64 0%,
    #d4bc82 35%,
    #e8d6a8 50%,
    #d4bc82 65%,
    #b79b64 100%) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 9px 22px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  white-space: nowrap;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(183,155,100,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}
.campaignBannerBtn:hover {
  background: linear-gradient(135deg,
    #d4bc82 0%,
    #e8d6a8 35%,
    #f2e6c4 50%,
    #e8d6a8 65%,
    #d4bc82 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(183,155,100,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
.campaignBannerBtn:disabled {
  opacity: 0.7;
  cursor: wait !important;
}
.campaignBannerForm {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Light mode campaign */
[data-theme="light"] .campaignBanner {
  background: linear-gradient(135deg,
    #f8f6f2 0%,
    #f2ede4 25%,
    #ece5d8 50%,
    #f2ede4 75%,
    #f8f6f2 100%) !important;
  border-top-color: rgba(122,96,48,0.14);
  border-bottom-color: rgba(122,96,48,0.14);
}
[data-theme="light"] .campaignBanner::before {
  background: radial-gradient(ellipse 80% 120% at 50% 50%, rgba(122,96,48,0.04) 0%, transparent 65%);
}
[data-theme="light"] .campaignBanner::after {
  background: linear-gradient(90deg, transparent, rgba(122,96,48,0.12) 30%, rgba(122,96,48,0.16) 50%, rgba(122,96,48,0.12) 70%, transparent);
}
[data-theme="light"] .campaignBannerText {
  background: linear-gradient(135deg,
    #7a6030 0%,
    #98783c 20%,
    #b89848 40%,
    #c8a858 50%,
    #b89848 60%,
    #98783c 80%,
    #7a6030 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 200% 100%;
}
[data-theme="light"] .campaignBannerBtn {
  color: #fff !important;
  background: linear-gradient(135deg,
    #7a6030 0%,
    #98783c 50%,
    #7a6030 100%) !important;
}
[data-theme="light"] .campaignBannerBtn:hover {
  background: linear-gradient(135deg,
    #98783c 0%,
    #b89848 50%,
    #98783c 100%) !important;
}

/* Mobile campaign */
@media (max-width: 767px) {
  .campaignBanner { padding: 14px 16px !important; }
  .campaignBannerInner { gap: 12px; padding: 14px 14px; border-radius: 14px; }
  .campaignBannerText { font-size: 13px !important; letter-spacing: 0.04em !important; }
  .campaignBannerText .headline { font-size: clamp(16px, 6vw, 20px); letter-spacing: 0.05em; margin-bottom: 6px; }
  .campaignBannerText .subline { font-size: 12px; line-height: 1.35; }
  .campaignBannerText .timer { font-size: 10px; padding: 4px 10px; }
  .campaignBannerText .offerPill { font-size: 10px; padding: 4px 10px; }
  .campaignBannerBtn { font-size: 10.5px !important; padding: 8px 16px !important; }
}


/* ── MOBILE STOREFRONT FIXES: banner parity, desc hide, toggle cleanup ── */

@media (max-width: 767px) {
  /* Roll back recent rendering optimizations that can clip/flatten mobile UI */
  .productGrid .productCard,
  .productCard {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
  }

  /* Product spotlight / campaign banner: keep PC styling but use mobile-safe width math */
  .campaignBanner {
    width: calc(100% + 24px) !important;
    max-width: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    text-align: center !important;
    overflow: hidden !important;
    z-index: 10 !important;
    background: linear-gradient(135deg,
      #080808 0%,
      #0e0e0e 15%,
      #151515 35%,
      #1a1a1a 50%,
      #151515 65%,
      #0e0e0e 85%,
      #080808 100%) !important;
    border-top: 1px solid rgba(183,155,100,0.15) !important;
    border-bottom: 1px solid rgba(183,155,100,0.15) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), inset 0 -1px 0 rgba(255,255,255,0.02) !important;
  }

  [data-theme="light"] .campaignBanner {
    background: linear-gradient(135deg,
      #f8f6f2 0%,
      #f2ede4 25%,
      #ece5d8 50%,
      #f2ede4 75%,
      #f8f6f2 100%) !important;
    border-top-color: rgba(122,96,48,0.14) !important;
    border-bottom-color: rgba(122,96,48,0.14) !important;
  }

  .campaignBanner::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(ellipse 80% 120% at 50% 50%, rgba(183,155,100,0.07) 0%, transparent 65%) !important;
    pointer-events: none !important;
  }

  [data-theme="light"] .campaignBanner::before {
    background: radial-gradient(ellipse 80% 120% at 50% 50%, rgba(122,96,48,0.04) 0%, transparent 65%) !important;
  }

  .campaignBanner::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 10% !important;
    right: 10% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(183,155,100,0.18) 30%, rgba(183,155,100,0.22) 50%, rgba(183,155,100,0.18) 70%, transparent) !important;
    pointer-events: none !important;
  }

  [data-theme="light"] .campaignBanner::after {
    background: linear-gradient(90deg, transparent, rgba(122,96,48,0.12) 30%, rgba(122,96,48,0.16) 50%, rgba(122,96,48,0.12) 70%, transparent) !important;
  }

  .campaignBannerInner {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .campaignBannerText {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.25 !important;
    font-family: 'Cormorant Garamond', 'Georgia', serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #d4c098 !important;
    text-shadow: 0 1px 3px rgba(160,120,30,0.18) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    filter: none !important;
    animation: none !important;
  }

  [data-theme="light"] .campaignBannerText {
    color: #98783c !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
  }

  .campaignBannerForm {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }

  .campaignBannerBtn {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    font-family: 'Outfit', -apple-system, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #0a0a0a !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: 0 !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    background: linear-gradient(135deg,
      #b79b64 0%,
      #d4bc82 35%,
      #e8d6a8 50%,
      #d4bc82 65%,
      #b79b64 100%) !important;
    box-shadow: 0 2px 8px rgba(183,155,100,0.2), inset 0 1px 0 rgba(255,255,255,0.15) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  [data-theme="light"] .campaignBannerBtn {
    color: #fff !important;
    background: linear-gradient(135deg,
      #7a6030 0%,
      #98783c 50%,
      #7a6030 100%) !important;
  }

  /* Hide storefront product descriptions on mobile (product page + common storefront desc classes) */
  p.detailDesc,
  .detailDesc,
  body.storeProduct .detailDesc,
  body.storeIndex .detailDesc,
  body.storeIndex .cardDesc,
  body.storeIndex .productDesc,
  body.storeIndex .cardDescription,
  body.storeIndex .productDescription,
  .rvDesc,
  .rvDescription {
    display: none !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Theme toggle: keep it crisp on mobile, remove heavy rendering effects */
  .footerThemeWrap {
    margin-top: 14px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .themeToggleFooter {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.35) !important;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
  }

  [data-theme="light"] .themeToggleFooter {
    box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.6), 0 2px 8px rgba(0,0,0,0.08) !important;
  }

  .themeToggleFooter:active {
    transform: scale(0.94) !important;
  }

  .themeToggleFooter .iconSun,
  .themeToggleFooter .iconMoon {
    width: 20px !important;
    height: 20px !important;
    transform-origin: 50% 50% !important;
  }
}

/* ── V6 HOTFIX: Product detail Add to Cart matches storefront CTA in DARK mode ── */
html:not([data-theme="light"]) body.storeProduct button#addBtn.btnPrimary,
html:not([data-theme="light"]) body.storeProduct .qtyRow button#addBtn.btn.btnPrimary.btnWide {
  border: 1px solid rgba(var(--silver-rgb), 0.07) !important;
  background:
    linear-gradient(180deg,
      rgba(var(--silver-rgb), 0.12) 0%,
      rgba(var(--silver-rgb), 0.04) 50%,
      rgba(var(--silver-rgb), 0.06) 100%),
    rgba(14,14,14,0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.60),
    0 3px 14px rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

html:not([data-theme="light"]) body.storeProduct button#addBtn.btnPrimary .btnText,
html:not([data-theme="light"]) body.storeProduct .qtyRow button#addBtn.btn.btnPrimary.btnWide .btnText {
  background: var(--gold-btn-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #D4BC82 !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-shadow: none !important;
  filter: none !important;
}

@media (hover: hover) {
  html:not([data-theme="light"]) body.storeProduct button#addBtn.btnPrimary:hover,
  html:not([data-theme="light"]) body.storeProduct .qtyRow button#addBtn.btn.btnPrimary.btnWide:hover {
    border-color: rgba(var(--silver-rgb), 0.12) !important;
    background:
      linear-gradient(180deg,
        rgba(var(--silver-rgb), 0.18) 0%,
        rgba(var(--silver-rgb), 0.07) 50%,
        rgba(var(--silver-rgb), 0.09) 100%),
      rgba(16,16,16,0.92) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 -1px 0 rgba(0,0,0,0.75),
      0 0 20px rgba(var(--silver-rgb), 0.06),
      0 6px 22px rgba(0,0,0,0.70) !important;
  }

  html:not([data-theme="light"]) body.storeProduct button#addBtn.btnPrimary:hover .btnText,
  html:not([data-theme="light"]) body.storeProduct .qtyRow button#addBtn.btn.btnPrimary.btnWide:hover .btnText {
    background: var(--gold-btn-text-bright) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
}

/* ── V6 HOTFIX: Bigger storefront orangutan mascot (all themes) ── */
body.storeIndex .storeHeadMascot {
  width: 280px !important;
  height: 280px !important;
}

@media (max-width: 480px) {
  body.storeIndex .storeHeadMascot {
    width: 195px !important;
    height: 195px !important;
  }
}


/* ── V7 PANIC HOTFIX: Restore luxe DARK storefront CTA and match product detail CTA ── */
html:not([data-theme="light"]) body.storeIndex .cardActions .btn.btnPrimary,
html:not([data-theme="light"]) body.storeIndex .cardActions button[data-add-to-cart],
html:not([data-theme="light"]) body.storeIndex .productGrid .cardActions .btn.btnPrimary.btnWide,
html:not([data-theme="light"]) body.storeIndex article.card.productCard .cardActions .btn.btnPrimary.btnWide,
html:not([data-theme="light"]) body.storeProduct button#addBtn.btnPrimary,
html:not([data-theme="light"]) body.storeProduct .qtyRow button#addBtn.btn.btnPrimary.btnWide,
html:not([data-theme="light"]) body.storeProduct .detailAddBtn.btnPrimary {
  border: 1px solid rgba(var(--silver-rgb), 0.07) !important;
  background:
    linear-gradient(180deg,
      rgba(var(--silver-rgb), 0.12) 0%,
      rgba(var(--silver-rgb), 0.04) 50%,
      rgba(var(--silver-rgb), 0.06) 100%),
    rgba(14,14,14,0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.60),
    0 3px 14px rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

html:not([data-theme="light"]) body.storeIndex .cardActions .btn.btnPrimary .btnText,
html:not([data-theme="light"]) body.storeIndex .cardActions button[data-add-to-cart] .btnText,
html:not([data-theme="light"]) body.storeIndex .productGrid .cardActions .btn.btnPrimary.btnWide .btnText,
html:not([data-theme="light"]) body.storeProduct button#addBtn.btnPrimary .btnText,
html:not([data-theme="light"]) body.storeProduct .qtyRow button#addBtn.btn.btnPrimary.btnWide .btnText,
html:not([data-theme="light"]) body.storeProduct .detailAddBtn.btnPrimary .btnText {
  background: var(--gold-btn-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #D4BC82 !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-shadow: none !important;
  filter: none !important;
}

@media (hover: hover) {
  html:not([data-theme="light"]) body.storeIndex .cardActions .btn.btnPrimary:hover,
  html:not([data-theme="light"]) body.storeIndex .cardActions button[data-add-to-cart]:hover,
  html:not([data-theme="light"]) body.storeIndex .productGrid .cardActions .btn.btnPrimary.btnWide:hover,
  html:not([data-theme="light"]) body.storeIndex article.card.productCard .cardActions .btn.btnPrimary.btnWide:hover,
  html:not([data-theme="light"]) body.storeProduct button#addBtn.btnPrimary:hover,
  html:not([data-theme="light"]) body.storeProduct .qtyRow button#addBtn.btn.btnPrimary.btnWide:hover,
  html:not([data-theme="light"]) body.storeProduct .detailAddBtn.btnPrimary:hover {
    border-color: rgba(var(--silver-rgb), 0.12) !important;
    background:
      linear-gradient(180deg,
        rgba(var(--silver-rgb), 0.18) 0%,
        rgba(var(--silver-rgb), 0.07) 50%,
        rgba(var(--silver-rgb), 0.09) 100%),
      rgba(16,16,16,0.92) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 -1px 0 rgba(0,0,0,0.75),
      0 0 20px rgba(var(--silver-rgb), 0.06),
      0 6px 22px rgba(0,0,0,0.70) !important;
  }

  html:not([data-theme="light"]) body.storeIndex .cardActions .btn.btnPrimary:hover .btnText,
  html:not([data-theme="light"]) body.storeIndex .cardActions button[data-add-to-cart]:hover .btnText,
  html:not([data-theme="light"]) body.storeIndex .productGrid .cardActions .btn.btnPrimary.btnWide:hover .btnText,
  html:not([data-theme="light"]) body.storeIndex article.card.productCard .cardActions .btn.btnPrimary.btnWide:hover .btnText,
  html:not([data-theme="light"]) body.storeProduct button#addBtn.btnPrimary:hover .btnText,
  html:not([data-theme="light"]) body.storeProduct .qtyRow button#addBtn.btn.btnPrimary.btnWide:hover .btnText,
  html:not([data-theme="light"]) body.storeProduct .detailAddBtn.btnPrimary:hover .btnText {
    background: var(--gold-btn-text-bright) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
}

/* ── V7 PANIC HOTFIX: Remove campaign banner background/plaque and keep text styling ── */
.campaignBanner,
[data-theme="light"] .campaignBanner {
  background: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.campaignBanner::before,
.campaignBanner::after,
[data-theme="light"] .campaignBanner::before,
[data-theme="light"] .campaignBanner::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.campaignBannerInner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* In Stock Soon badge: black gradient plaque + muted gold gradient text */
.badgeSoon,
.pillSoon,
.badge.badgeSoon,
.pill.pillSoon {
  background: linear-gradient(180deg,
    rgba(24,24,24,0.96) 0%,
    rgba(10,10,10,0.94) 55%,
    rgba(0,0,0,0.96) 100%) !important;
  border: 1px solid rgba(212,188,130,0.26) !important;
  color: #d8c49a !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.72),
    0 6px 18px rgba(0,0,0,0.55),
    0 0 0 1px rgba(212,188,130,0.06) !important;
}

.badgeSoon::before,
.pillSoon::before {
  display: block !important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.12) 0%,
      rgba(255,255,255,0.04) 48%,
      rgba(0,0,0,0.24) 100%),
    linear-gradient(135deg,
      rgba(220,198,145,0.18) 0%,
      rgba(176,145,86,0.10) 42%,
      rgba(0,0,0,0.18) 72%,
      rgba(220,198,145,0.14) 100%),
    linear-gradient(180deg,
      rgba(20,20,20,0.98) 0%,
      rgba(8,8,8,0.96) 58%,
      rgba(0,0,0,0.98) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.72) !important;
}

.badgeSoon .badgeText,
.pillSoon .badgeText,
.badgeSoon .pillText,
.pillSoon .pillText {
  background: linear-gradient(180deg,
    #f6e8c0 0%,
    #ead5a4 18%,
    #d4bc82 42%,
    #bea066 64%,
    #e9d2a0 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #d4bc82 !important;
  text-shadow: 0 0 14px rgba(212,188,130,0.22), 0 1px 1px rgba(0,0,0,0.45) !important;
  font-weight: 900 !important;
  letter-spacing: 0.14em !important;
}



/* ============================================================================
   FEATURED PRODUCTS SHOWCASE - Premium storefront section
   ============================================================================ */

.featuredShowcase {
  position: relative;
  margin: 0 auto 32px;
  max-width: var(--grid-max, 1200px);
  padding: 0 var(--grid-px, 16px);
}

.featuredShowcaseHeader {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
  padding: 16px 0 8px;
}

.featuredShowcaseGlow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 60px;
  background: radial-gradient(ellipse, rgba(212,175,55,.12) 0%, transparent 70%);
  pointer-events: none;
}

.featuredShowcaseTitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-display, 'Cormorant Garamond', serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f6e8c0 0%, #d4af37 50%, #bea066 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #d4af37;
}

.featuredShowcaseTitle svg {
  stroke: #d4af37;
  opacity: .7;
}

.featuredGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

@media (min-width: 640px) {
  .featuredGrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
}

.productCard--featured {
  position: relative;
  border: 1px solid rgba(212,175,55,.18) !important;
  box-shadow:
    0 0 0 1px rgba(212,175,55,.06),
    0 4px 24px rgba(0,0,0,.25),
    0 0 40px rgba(212,175,55,.04) !important;
  transition: box-shadow .3s ease, border-color .3s ease;
}

.productCard--featured:hover {
  border-color: rgba(212,175,55,.30) !important;
  box-shadow:
    0 0 0 1px rgba(212,175,55,.12),
    0 6px 32px rgba(0,0,0,.30),
    0 0 60px rgba(212,175,55,.08) !important;
}


.badgeFeatured {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  background: linear-gradient(180deg,
    rgba(24,24,24,0.97) 0%,
    rgba(10,10,10,0.95) 55%,
    rgba(0,0,0,0.97) 100%) !important;
  border: 1px solid rgba(212,188,130,0.30) !important;
  color: #e6cf98 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.78),
    0 8px 20px rgba(0,0,0,0.55),
    0 0 0 1px rgba(212,188,130,0.08) !important;
  backdrop-filter: blur(10px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
  white-space: nowrap !important;
  animation: featuredPillShimmer 4s ease-in-out infinite !important;
}

.badgeFeatured::before {
  display: block !important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0.05) 48%,
      rgba(0,0,0,0.26) 100%),
    linear-gradient(135deg,
      rgba(220,198,145,0.22) 0%,
      rgba(176,145,86,0.11) 42%,
      rgba(0,0,0,0.20) 72%,
      rgba(220,198,145,0.16) 100%),
    linear-gradient(180deg,
      rgba(20,20,20,0.99) 0%,
      rgba(8,8,8,0.97) 58%,
      rgba(0,0,0,0.99) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.72) !important;
}

.badgeFeatured .badgeText {
  background: linear-gradient(180deg,
    #f7e8bf 0%,
    #eed9ac 18%,
    #dbc185 40%,
    #c39f5e 64%,
    #f0d7a5 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #dbbf84 !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-shadow: 0 0 14px rgba(212,188,130,0.22), 0 1px 1px rgba(0,0,0,0.45) !important;
}

.badgeFeaturedDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff1c9 0%, #e4c77f 35%, #c89f4a 70%, #8b6a2f 100%);
  box-shadow: 0 0 8px rgba(212,175,55,.55), 0 0 14px rgba(212,175,55,.22);
  flex-shrink: 0;
  animation: featuredDotPulse 2s ease-in-out infinite;
}


@keyframes featuredPillShimmer {
  0%, 100% { box-shadow: 0 1px 8px rgba(212,175,55,.15), inset 0 1px 0 rgba(255,255,255,.08); }
  50% { box-shadow: 0 1px 14px rgba(212,175,55,.25), inset 0 1px 0 rgba(255,255,255,.12); }
}

@keyframes featuredDotPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

.featuredShowcase::after {
  content: '';
  display: block;
  margin: 28px auto 0;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.25), transparent);
}

/* ============================================================================
   FEATURED SHOWCASE GRID + CARD BLEND TUNE (Phase 1d)
   Keep featured cards in a tight 2x2 layout and highlight at card level
   ============================================================================ */

.featuredShowcase {
  margin: 0 auto 22px !important;
  padding: 0 var(--grid-px, 16px) !important;
}

.featuredShowcaseHeader {
  margin-bottom: 12px !important;
  padding: 8px 0 4px !important;
}

.featuredShowcaseGlow,
.featuredShowcase::after {
  display: none !important;
}

.featuredShowcaseTitle {
  font-size: 18px !important;
  letter-spacing: 0.10em !important;
  opacity: 0.96;
}

.featuredShowcaseTitle svg {
  opacity: 0.62 !important;
}

.featuredGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  align-items: stretch !important;
}

@media (min-width: 768px) {
  .featuredGrid {
    gap: 14px !important;
    max-width: 660px !important;
  }
}

@media (min-width: 1100px) {
  .featuredGrid {
    gap: 16px !important;
    max-width: 700px !important;
  }
}

/* If there is only one featured item, do not let it stretch obnoxiously */
.featuredGrid > .productCard--featured:only-child {
  grid-column: 1 / span 2;
  max-width: 340px;
  width: 100%;
  justify-self: center;
}

/* Card-level highlight, not section-level */
.productCard--featured {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(212, 175, 55, 0.16) !important;
  background-clip: padding-box !important;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.05),
    0 10px 26px rgba(0, 0, 0, 0.26),
    0 3px 10px rgba(0, 0, 0, 0.20),
    0 0 28px rgba(212, 175, 55, 0.035) !important;
  transition:
    transform .24s cubic-bezier(.22,.68,.31,1),
    box-shadow .24s cubic-bezier(.22,.68,.31,1),
    border-color .24s cubic-bezier(.22,.68,.31,1) !important;
}

.productCard--featured::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 12% 0%,
      rgba(246, 224, 170, 0.10) 0%,
      rgba(212, 175, 55, 0.045) 35%,
      transparent 70%),
    radial-gradient(90% 70% at 100% 100%,
      rgba(212, 175, 55, 0.06) 0%,
      transparent 72%);
  opacity: 0.95;
  mix-blend-mode: screen;
}

.productCard--featured::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.05) 0%,
      rgba(255,255,255,0.015) 36%,
      rgba(0,0,0,0.00) 58%,
      rgba(212,175,55,0.03) 100%);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  opacity: 0.85;
}

@media (hover: hover) {
  .productCard--featured:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(212, 175, 55, 0.24) !important;
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.08),
      0 14px 34px rgba(0, 0, 0, 0.30),
      0 4px 14px rgba(0, 0, 0, 0.22),
      0 0 40px rgba(212, 175, 55, 0.055) !important;
  }
}

.productCard--featured .cardMediaOverlay {
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.05) 0%,
      rgba(0,0,0,0.12) 52%,
      rgba(0,0,0,0.22) 100%);
  backdrop-filter: blur(1.2px) saturate(105%);
  -webkit-backdrop-filter: blur(1.2px) saturate(105%);
}

.badgeFeatured {
  padding: 7px 14px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  border-color: rgba(212, 188, 130, 0.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.75),
    0 7px 16px rgba(0,0,0,0.44),
    0 0 0 1px rgba(212,188,130,0.07) !important;
}

/* Keep pills proportional on small screens */
@media (max-width: 480px) {
  .featuredShowcase {
    margin-bottom: 18px !important;
  }

  .featuredShowcaseTitle {
    font-size: 16px !important;
    letter-spacing: 0.11em !important;
  }

  .featuredGrid {
    gap: 10px !important;
  }

  .badgeFeatured {
    padding: 6px 12px !important;
    font-size: 10px !important;
    gap: 6px !important;
  }

  .badgeFeaturedDot {
    width: 6px !important;
    height: 6px !important;
  }
}


/* ============================================================================
   FEATURED SHOWCASE FINAL GRID/POLISH OVERRIDES (Phase 1e)
   Match main store grid exactly while highlighting featured cards only
   ============================================================================ */

/* Kill section-level effects so the store rhythm stays intact */
.featuredShowcase,
.featuredShowcaseHeader {
  max-width: none !important;
}

.featuredShowcaseGlow,
.featuredShowcase::after {
  display: none !important;
}

.featuredShowcaseTitle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 16px !important;
  letter-spacing: 0.11em !important;
  opacity: 0.95 !important;
  margin: 0 0 2px !important;
}

@media (min-width: 768px) {
  .featuredShowcaseTitle {
    font-size: 17px !important;
    letter-spacing: 0.10em !important;
  }
}

/* Critical: featured grid now uses the SAME grid engine as the main store grid */
body.storeIndex .featuredShowcase .productGrid.featuredGridMatch,
body.storeIndex .featuredShowcase .featuredGridMatch {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-items: stretch !important;
  align-items: stretch !important;
}

/* Nuke old forced sizing from previous passes */
body.storeIndex .featuredShowcase .featuredGridMatch,
body.storeIndex .featuredShowcase .featuredGridMatch > * {
  min-width: 0 !important;
}

body.storeIndex .featuredShowcase .featuredGridMatch > .productCard--featured:only-child {
  grid-column: auto !important;
  max-width: none !important;
  width: auto !important;
  justify-self: stretch !important;
}

/* Card-level premium treatment only (visible, blended, not gaudy) */
body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .productCard--featured {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(212, 175, 55, 0.20) !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,0.28),
    0 2px 10px rgba(0,0,0,0.20),
    0 0 0 1px rgba(212,175,55,0.06),
    0 0 24px rgba(212,175,55,0.07) !important;
  backdrop-filter: blur(2px) saturate(105%) !important;
  -webkit-backdrop-filter: blur(2px) saturate(105%) !important;
  transition:
    transform .22s cubic-bezier(.22,.68,.31,1),
    box-shadow .22s cubic-bezier(.22,.68,.31,1),
    border-color .22s cubic-bezier(.22,.68,.31,1) !important;
}

body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .productCard--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(120% 70% at 10% 0%, rgba(241,224,176,0.11) 0%, rgba(212,175,55,0.05) 36%, transparent 70%),
    radial-gradient(95% 70% at 100% 100%, rgba(212,175,55,0.06) 0%, transparent 74%);
  opacity: 0.95;
}

body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .productCard--featured::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 0 0 1px rgba(212,175,55,0.06),
    0 0 36px rgba(212,175,55,0.06);
  opacity: 1;
}

body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .productCard--featured .cardMediaOverlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.10) 52%, rgba(0,0,0,0.19) 100%) !important;
  backdrop-filter: blur(1.6px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(1.6px) saturate(108%) !important;
}

@media (hover: hover) {
  body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .productCard--featured:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(212, 175, 55, 0.28) !important;
    box-shadow:
      0 14px 34px rgba(0,0,0,0.32),
      0 4px 14px rgba(0,0,0,0.22),
      0 0 0 1px rgba(212,175,55,0.08),
      0 0 40px rgba(212,175,55,0.10) !important;
  }
}

/* Make the featured pill read stronger on same-sized cards */
body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .badgeFeatured {
  padding: 7px 15px !important;
  font-size: 10.75px !important;
  letter-spacing: 0.13em !important;
  border-color: rgba(212,188,130,0.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.11),
    inset 0 -1px 0 rgba(0,0,0,0.78),
    0 8px 18px rgba(0,0,0,0.48),
    0 0 0 1px rgba(212,188,130,0.08),
    0 0 18px rgba(212,175,55,0.08) !important;
}

body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .badgeFeaturedDot {
  width: 7px !important;
  height: 7px !important;
  box-shadow: 0 0 10px rgba(212,175,55,.65), 0 0 18px rgba(212,175,55,.30) !important;
}

/* ============================================================================
   FEATURED SHOWCASE FINAL GOLD MATCH OVERRIDES (Phase 1f)
   Match featured heading + card glow to product price gold and force visibility
   ============================================================================ */

/* Title uses the same muted gold family as product prices, but as a restrained gradient */
body.storeIndex .featuredShowcase .featuredShowcaseTitle {
  color: #C49A2A !important;
  background: linear-gradient(135deg,
    #f0dc9b 0%,
    #e6c877 16%,
    #d8b55a 34%,
    #c49a2a 52%,
    #d8b55a 68%,
    #e6c877 84%,
    #b8861b 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.42)) drop-shadow(0 0 10px rgba(196,154,42,0.14)) !important;
  opacity: 1 !important;
}

body.storeIndex .featuredShowcase .featuredShowcaseTitle svg {
  color: #C49A2A !important;
  opacity: 0.92 !important;
  filter: drop-shadow(0 0 8px rgba(196,154,42,0.18)) !important;
}

[data-theme="light"] body.storeIndex .featuredShowcase .featuredShowcaseTitle,
[data-theme="light"] .featuredShowcase .featuredShowcaseTitle {
  color: #8B6314 !important;
  background: linear-gradient(135deg,
    #b07c1b 0%,
    #9f7017 18%,
    #8b6314 40%,
    #7b560f 58%,
    #8b6314 76%,
    #a87619 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
}

[data-theme="light"] body.storeIndex .featuredShowcase .featuredShowcaseTitle svg,
[data-theme="light"] .featuredShowcase .featuredShowcaseTitle svg {
  color: #8B6314 !important;
  opacity: 0.88 !important;
  filter: none !important;
}

/* Featured cards get an obvious gold glow ring using the same price-gold palette */
body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .productCard--featured {
  border: 1px solid rgba(196,154,42,0.34) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,0.34),
    0 4px 16px rgba(0,0,0,0.24),
    0 0 0 1px rgba(196,154,42,0.16),
    0 0 18px rgba(196,154,42,0.18),
    0 0 36px rgba(196,154,42,0.14),
    0 0 64px rgba(184,134,27,0.10) !important;
  isolation: isolate !important;
}

/* Soft gradient aura hugging the card edges */
body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .productCard--featured::before {
  background:
    radial-gradient(120% 80% at 8% 0%, rgba(240,220,155,0.22) 0%, rgba(230,200,119,0.13) 28%, rgba(196,154,42,0.06) 48%, transparent 72%),
    radial-gradient(110% 78% at 100% 0%, rgba(230,200,119,0.16) 0%, rgba(196,154,42,0.08) 42%, transparent 75%),
    radial-gradient(120% 84% at 50% 100%, rgba(184,134,27,0.12) 0%, rgba(196,154,42,0.07) 38%, transparent 74%) !important;
  opacity: 1 !important;
}

/* Visible gold ring and inner polish */
body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .productCard--featured::after {
  inset: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.42),
    inset 0 0 0 1px rgba(240,220,155,0.08),
    0 0 0 1px rgba(196,154,42,0.14),
    0 0 22px rgba(230,200,119,0.16),
    0 0 44px rgba(196,154,42,0.12) !important;
  background:
    linear-gradient(135deg,
      rgba(240,220,155,0.06) 0%,
      rgba(230,200,119,0.03) 24%,
      rgba(196,154,42,0.00) 52%,
      rgba(230,200,119,0.03) 78%,
      rgba(184,134,27,0.05) 100%) !important;
  opacity: 1 !important;
}

@media (hover: hover) {
  body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .productCard--featured:hover {
    border-color: rgba(230,200,119,0.42) !important;
    box-shadow:
      0 16px 38px rgba(0,0,0,0.36),
      0 6px 18px rgba(0,0,0,0.24),
      0 0 0 1px rgba(230,200,119,0.20),
      0 0 24px rgba(230,200,119,0.22),
      0 0 52px rgba(196,154,42,0.16),
      0 0 86px rgba(184,134,27,0.12) !important;
  }
}

[data-theme="light"] body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .productCard--featured,
[data-theme="light"] .featuredShowcase .productGrid.featuredGridMatch .productCard--featured {
  border-color: rgba(139,99,20,0.18) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,0.08),
    0 3px 10px rgba(0,0,0,0.05),
    0 0 0 1px rgba(139,99,20,0.06),
    0 0 18px rgba(139,99,20,0.05),
    0 0 34px rgba(139,99,20,0.035) !important;
}

[data-theme="light"] body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .productCard--featured::before,
[data-theme="light"] .featuredShowcase .productGrid.featuredGridMatch .productCard--featured::before {
  background:
    radial-gradient(120% 80% at 8% 0%, rgba(176,124,27,0.08) 0%, rgba(159,112,23,0.05) 28%, transparent 72%),
    radial-gradient(120% 84% at 50% 100%, rgba(139,99,20,0.05) 0%, transparent 74%) !important;
}

[data-theme="light"] body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .productCard--featured::after,
[data-theme="light"] .featuredShowcase .productGrid.featuredGridMatch .productCard--featured::after {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    inset 0 0 0 1px rgba(176,124,27,0.04),
    0 0 0 1px rgba(139,99,20,0.07),
    0 0 16px rgba(139,99,20,0.04) !important;
  background:
    linear-gradient(135deg,
      rgba(176,124,27,0.03) 0%,
      rgba(139,99,20,0.00) 55%,
      rgba(159,112,23,0.025) 100%) !important;
}

/* ============================================================================
   FEATURED SHOWCASE HARD OVERRIDE (Phase 1g)
   Fixes low/no visible gold glow by using drop-shadow glow (not clipped by card overflow)
   and matches featured heading gold to the exact product price gradient token.
   ============================================================================ */

/* Exact same gold token family used by product prices */
body.storeIndex .featuredShowcase .featuredShowcaseTitle,
.featuredShowcase .featuredShowcaseTitle {
  color: var(--gold-mid, #c49a2a) !important;
  background: var(--gold-pop) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.42)) drop-shadow(0 0 12px rgba(200,165,80,0.22)) !important;
}

body.storeIndex .featuredShowcase .featuredShowcaseTitle svg,
.featuredShowcase .featuredShowcaseTitle svg {
  color: var(--gold-mid, #c49a2a) !important;
  stroke: currentColor !important;
  opacity: 0.95 !important;
  filter: drop-shadow(0 0 10px rgba(200,165,80,0.20)) !important;
}

/* Make the featured card glow unmistakable.
   Key change: filter drop-shadow adds outer glow that survives overflow:hidden clipping. */
body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .productCard--featured,
.featuredShowcase .productGrid.featuredGridMatch .productCard--featured {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-color: rgba(212, 175, 55, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(212,175,55,0.10),
    0 0 0 1px rgba(212,175,55,0.16),
    0 12px 28px rgba(0,0,0,0.30),
    0 3px 10px rgba(0,0,0,0.20) !important;
  filter:
    drop-shadow(0 0 12px rgba(212,175,55,0.18))
    drop-shadow(0 0 28px rgba(212,175,55,0.16))
    drop-shadow(0 0 48px rgba(184,134,27,0.13)) !important;
  -webkit-filter:
    drop-shadow(0 0 12px rgba(212,175,55,0.18))
    drop-shadow(0 0 28px rgba(212,175,55,0.16))
    drop-shadow(0 0 48px rgba(184,134,27,0.13)) !important;
}

/* Keep content above decorative layers */
body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .productCard--featured > *,
.featuredShowcase .productGrid.featuredGridMatch .productCard--featured > * {
  position: relative;
  z-index: 2;
}

body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .productCard--featured::before,
.featuredShowcase .productGrid.featuredGridMatch .productCard--featured::before {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  background:
    radial-gradient(110% 78% at 10% 2%, rgba(243,234,209,0.20) 0%, rgba(212,184,122,0.12) 26%, rgba(196,155,80,0.05) 48%, transparent 72%),
    radial-gradient(120% 84% at 100% 0%, rgba(212,184,122,0.14) 0%, rgba(196,155,80,0.07) 36%, transparent 72%),
    radial-gradient(120% 88% at 50% 102%, rgba(196,155,80,0.10) 0%, rgba(184,134,27,0.06) 36%, transparent 72%) !important;
}

body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .productCard--featured::after,
.featuredShowcase .productGrid.featuredGridMatch .productCard--featured::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 1 !important;
  background:
    linear-gradient(135deg, rgba(243,234,209,0.055) 0%, rgba(212,184,122,0.020) 32%, rgba(0,0,0,0.00) 58%, rgba(196,155,80,0.030) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(243,234,209,0.05),
    inset 0 0 0 2px rgba(212,175,55,0.06) !important;
}

@media (hover: hover) {
  body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .productCard--featured:hover,
  .featuredShowcase .productGrid.featuredGridMatch .productCard--featured:hover {
    border-color: rgba(232,201,139,0.42) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      inset 0 0 0 1px rgba(232,201,139,0.14),
      0 14px 34px rgba(0,0,0,0.32),
      0 4px 12px rgba(0,0,0,0.22) !important;
    filter:
      drop-shadow(0 0 16px rgba(232,201,139,0.24))
      drop-shadow(0 0 34px rgba(212,175,55,0.20))
      drop-shadow(0 0 58px rgba(184,134,27,0.16)) !important;
    -webkit-filter:
      drop-shadow(0 0 16px rgba(232,201,139,0.24))
      drop-shadow(0 0 34px rgba(212,175,55,0.20))
      drop-shadow(0 0 58px rgba(184,134,27,0.16)) !important;
  }
}

/* Light mode stays cleaner but still distinct */
[data-theme="light"] body.storeIndex .featuredShowcase .featuredShowcaseTitle,
[data-theme="light"] .featuredShowcase .featuredShowcaseTitle {
  background: var(--gold-pop) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
}

[data-theme="light"] body.storeIndex .featuredShowcase .productGrid.featuredGridMatch .productCard--featured,
[data-theme="light"] .featuredShowcase .productGrid.featuredGridMatch .productCard--featured {
  border-color: rgba(139,99,20,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.62),
    inset 0 0 0 1px rgba(139,99,20,0.05),
    0 12px 24px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.05) !important;
  filter:
    drop-shadow(0 0 12px rgba(139,99,20,0.06))
    drop-shadow(0 0 22px rgba(139,99,20,0.05)) !important;
  -webkit-filter:
    drop-shadow(0 0 12px rgba(139,99,20,0.06))
    drop-shadow(0 0 22px rgba(139,99,20,0.05)) !important;
}


/* ============================================================================

/* ============================================================================
   FEATURED CARD GLOW — Final
   Wrapper pseudo-element carries the glow, outside the card's compositing
   layer (which has backdrop-filter and would eat any box-shadow bleed).
   Gold: #c9a84c (201,168,76) — matches Add-to-Cart button text exactly.
   ============================================================================ */

.featuredCardWrap {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Glow pseudo — sits BEHIND the card, never clipped by card overflow */
.featuredCardWrap::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--store-radius, 16px) + 2px);
  pointer-events: none;
  z-index: 0;
  background: transparent;
  box-shadow:
    0 0 0 1px rgba(201, 168, 76, 0.22),
    0 0 8px 2px rgba(201, 168, 76, 0.18);
  transition: box-shadow .28s ease;
}

/* Card sits above glow layer */
.featuredCardWrap > .productCard--featured {
  flex: 1;
  position: relative;
  z-index: 1;
  border-color: rgba(201, 168, 76, 0.28) !important;
  filter: none !important;
  -webkit-filter: none !important;
}

@media (hover: hover) {
  .featuredCardWrap:hover::before {
    box-shadow:
      0 0 0 1px rgba(201, 168, 76, 0.34),
      0 0 12px 3px rgba(201, 168, 76, 0.22);
  }
  .featuredCardWrap:hover > .productCard--featured {
    transform: translateY(-2px) !important;
    border-color: rgba(201, 168, 76, 0.42) !important;
  }
}

/* Mobile: identical — tight shadow only, no bloom */
@media (max-width: 767px) {
  .featuredCardWrap::before {
    inset: -2px;
    box-shadow:
      0 0 0 1px rgba(201, 168, 76, 0.20),
      0 0 6px 1px rgba(201, 168, 76, 0.14);
  }
}

[data-theme="light"] .featuredCardWrap::before {
  box-shadow:
    0 0 0 1px rgba(140, 100, 20, 0.22),
    0 0 8px 2px rgba(140, 100, 20, 0.14);
}

body.storeIndex .featuredShowcase .productGrid.featuredGridMatch,
.featuredShowcase .productGrid.featuredGridMatch {
  overflow: visible !important;
}


body.storeIndex .featuredShowcase .productGrid.featuredGridMatch,
.featuredShowcase .productGrid.featuredGridMatch {
  --featured-grid-gap: 12px;
}

@media (min-width: 768px) {
  body.storeIndex .featuredShowcase .productGrid.featuredGridMatch,
  .featuredShowcase .productGrid.featuredGridMatch {
    --featured-grid-gap: 14px;
  }
}

@media (min-width: 1100px) {
  body.storeIndex .featuredShowcase .productGrid.featuredGridMatch,
  .featuredShowcase .productGrid.featuredGridMatch {
    --featured-grid-gap: 16px;
  }
}

body.storeIndex .featuredShowcase .productGrid.featuredGridMatch > .featuredCardWrap:last-child:nth-child(odd):not(:first-child),
.featuredShowcase .productGrid.featuredGridMatch > .featuredCardWrap:last-child:nth-child(odd):not(:first-child) {
  grid-column: 1 / span 2 !important;
  width: 100% !important;
  max-width: calc((100% - var(--featured-grid-gap, 12px)) / 2) !important;
  justify-self: center !important;
}

/* ── Featured title: left-aligned, bigger ── */
body.storeIndex .featuredShowcase .featuredShowcaseHeader,
.featuredShowcase .featuredShowcaseHeader {
  text-align: left !important;
  padding-left: 0 !important;
}

body.storeIndex .featuredShowcase .featuredShowcaseTitle,
.featuredShowcase .featuredShowcaseTitle {
  font-size: 22px !important;
  letter-spacing: 0.09em !important;
}

@media (min-width: 768px) {
  body.storeIndex .featuredShowcase .featuredShowcaseTitle,
  .featuredShowcase .featuredShowcaseTitle {
    font-size: 25px !important;
    letter-spacing: 0.08em !important;
  }
}

/* Timed featured listing countdown lock */
.timedListingShell {
  width: 100%;
}

.timedListingShell[data-timed-listing] {
  display: block;
}

.timedListingLock {
  width: 100%;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(212, 188, 130, 0.22);
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(212,188,130,.14) 0%, rgba(212,188,130,0) 58%),
    linear-gradient(180deg, rgba(24,24,24,.96), rgba(11,11,11,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 28px rgba(0,0,0,.34),
    0 0 0 1px rgba(212,188,130,.05);
  text-align: center;
}

.timedListingLockText {
  width: 100%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: rgba(247,232,191,.96);
  word-break: break-word;
}

.timedListingLockMeta {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(229,213,171,.64);
}

.timedListingLockCountdown {
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(255,225,154,.98);
}

.timedListingShell--detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timedListingShell--detail .timedListingLock {
  min-height: 78px;
  padding: 16px 18px;
  border-radius: 18px;
}

.timedListingShell--detail .timedListingLockText {
  font-size: 13px;
}

.timedListingShell--detail .timedListingLockCountdown {
  font-size: 21px;
}

[data-timed-listing-reveal][hidden],
.timedListingReveal[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .timedListingLock {
    min-height: 60px;
    padding: 12px;
    border-radius: 14px;
  }

  .timedListingLockText {
    font-size: 11px;
  }

  .timedListingLockMeta {
    letter-spacing: .12em;
  }

  .timedListingLockCountdown {
    font-size: 15px;
  }

  .timedListingShell--detail .timedListingLock {
    min-height: 72px;
    padding: 14px 12px;
  }

  .timedListingShell--detail .timedListingLockCountdown {
    font-size: 18px;
  }
}


/* Purchase timer label under button */
.purchaseTimerUnder {
  margin-top: 6px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 238, 224, 0.9);
  -webkit-text-fill-color: rgba(247, 238, 224, 0.9);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.45),
    0 0 10px rgba(236,166,92,0.18);
}

.purchaseTimerUnder--card {
  font-size: 10px;
}

.purchaseTimerUnder--detail {
  font-size: 11px;
}

.purchaseTimerUnder .purchaseTimerInlineText {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.purchaseTimerUnder .purchaseTimerInlineCountdown {
  font-size: 13px;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .purchaseTimerUnder {
    flex-wrap: wrap;
    gap: 4px;
    font-size: 9px;
  }

  .purchaseTimerUnder--card {
    font-size: 8px;
  }

  .purchaseTimerUnder .purchaseTimerInlineCountdown {
    font-size: 12px;
  }
}

/* ---------- Purchase deadline timer (urgency) ---------- */

.purchaseTimerShell {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.purchaseTimerBanner {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 90, 60, 0.35);
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(255,90,60,.16) 0%, rgba(255,60,30,0) 60%),
    linear-gradient(180deg, rgba(28,14,12,.97), rgba(14,8,6,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 24px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,90,60,.08),
    0 0 32px rgba(255,60,30,.06);
  text-align: center;
  animation: purchaseTimerGlow 2.4s ease-in-out infinite alternate;
}

@keyframes purchaseTimerGlow {
  0% { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.34), 0 0 0 1px rgba(255,90,60,.08), 0 0 20px rgba(255,60,30,.04); }
  100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.34), 0 0 0 1px rgba(255,90,60,.16), 0 0 40px rgba(255,60,30,.10); }
}

.purchaseTimerPulse {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 80, 50, .9);
  animation: purchaseTimerPulseAnim 1.4s ease-in-out infinite;
}

@keyframes purchaseTimerPulseAnim {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,80,50,.5); }
  50% { opacity: .5; box-shadow: 0 0 0 5px rgba(255,80,50,0); }
}

.purchaseTimerLabel {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 180, 140, .88);
  line-height: 1.3;
}

.purchaseTimerCountdown {
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .06em;
  color: rgba(255, 200, 170, .98);
  text-shadow: 0 0 20px rgba(255,80,40,.3);
  transition: color .3s ease;
}

.purchaseTimerBanner.isUrgent {
  border-color: rgba(255, 50, 30, .5);
  animation: purchaseTimerUrgent 0.8s ease-in-out infinite alternate;
}

@keyframes purchaseTimerUrgent {
  0% { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.34), 0 0 0 1px rgba(255,50,30,.2), 0 0 28px rgba(255,30,10,.12); }
  100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.34), 0 0 0 1px rgba(255,50,30,.35), 0 0 44px rgba(255,30,10,.18); }
}

.purchaseTimerBanner.isUrgent .purchaseTimerCountdown {
  color: rgba(255, 120, 80, 1);
  text-shadow: 0 0 14px rgba(255,60,30,.5);
}

.purchaseTimerBanner.isCritical .purchaseTimerCountdown {
  animation: purchaseTimerCriticalPulse 0.6s ease-in-out infinite alternate;
}

@keyframes purchaseTimerCriticalPulse {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: .75; transform: scale(1.04); }
}

.purchaseTimerBtn {
  position: relative;
  overflow: hidden;
}

.purchaseTimerBtn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,200,160,.06) 50%, transparent 100%);
  animation: purchaseTimerBtnShimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes purchaseTimerBtnShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Detail page variant */
.purchaseTimerBanner--detail {
  min-height: 68px;
  padding: 14px 18px;
  border-radius: 16px;
  gap: 4px;
}

.purchaseTimerBanner--detail .purchaseTimerLabel {
  font-size: 11px;
  letter-spacing: .2em;
}

.purchaseTimerCountdown--detail {
  font-size: 24px;
}

/* Expired state */
.purchaseTimerExpired {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 60, 40, .18);
  background:
    linear-gradient(180deg, rgba(28,14,12,.95), rgba(12,6,4,.98));
  text-align: center;
  opacity: .85;
}

.purchaseTimerExpiredIcon {
  font-size: 16px;
  font-weight: 900;
  color: rgba(255, 80, 60, .7);
  line-height: 1;
}

.purchaseTimerExpiredText {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 100, 80, .75);
}

.purchaseTimerExpiredSub {
  font-size: 11px;
  color: rgba(255, 180, 160, .45);
  margin-top: 2px;
}

.purchaseTimerExpired--detail {
  min-height: 68px;
  padding: 18px;
  border-radius: 16px;
  gap: 6px;
}

.purchaseTimerExpired--detail .purchaseTimerExpiredIcon {
  font-size: 20px;
}

.purchaseTimerExpired--detail .purchaseTimerExpiredText {
  font-size: 14px;
}

@media (max-width: 640px) {
  .purchaseTimerBanner {
    padding: 8px 12px;
    border-radius: 12px;
  }

  .purchaseTimerLabel {
    font-size: 9px;
    letter-spacing: .14em;
  }

  .purchaseTimerCountdown {
    font-size: 16px;
  }

  .purchaseTimerBanner--detail {
    padding: 12px 14px;
    min-height: 60px;
  }

  .purchaseTimerCountdown--detail {
    font-size: 20px;
  }

  .purchaseTimerExpired--detail {
    padding: 14px;
    min-height: 60px;
  }
}



/* ---------- Purchase timer CTA integration refresh ---------- */
.purchaseTimerShell {
  width: 100%;
}

.purchaseTimerBtn--live {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  padding: 12px 18px !important;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(244, 194, 128, 0.18) !important;
  background:
    radial-gradient(120% 160% at 50% -30%, rgba(255,210,140,.12) 0%, rgba(255,210,140,0) 58%),
    linear-gradient(180deg, rgba(34,28,22,.96) 0%, rgba(18,14,11,.98) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,248,236,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.52),
    0 0 0 1px rgba(236,194,129,0.04),
    0 12px 28px rgba(0,0,0,0.34),
    0 0 24px rgba(236,166,92,0.05) !important;
}

.purchaseTimerBtn--live .btnText.purchaseTimerBtnText {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  margin: 0 auto;
  line-height: 1.05;
  text-align: center;
}

.purchaseTimerInlineText {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(247,238,224,0.9) !important;
  -webkit-text-fill-color: rgba(247,238,224,0.9) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.5),
    0 0 12px rgba(236,166,92,0.16),
    0 0 22px rgba(120,72,22,0.14);
}

.purchaseTimerInlineCountdown {
  display: block;
  width: 100%;
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  color: rgba(255,220,168,0.98) !important;
  -webkit-text-fill-color: rgba(255,220,168,0.98) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.55),
    0 0 16px rgba(230,156,74,0.28),
    0 0 28px rgba(126,72,24,0.18);
  transition: color .25s ease, transform .25s ease, text-shadow .25s ease;
}

.purchaseTimerBtn--live .purchaseTimerPulse {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 1;
}

.purchaseTimerBtn.isUrgent {
  border-color: rgba(255, 128, 78, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,248,236,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.52),
    0 0 0 1px rgba(255,118,66,0.08),
    0 12px 28px rgba(0,0,0,0.36),
    0 0 34px rgba(255,94,48,0.10) !important;
}

.purchaseTimerBtn.isUrgent .purchaseTimerInlineCountdown {
  color: rgba(255, 172, 124, 1) !important;
  text-shadow: 0 0 16px rgba(255,88,42,0.34);
}

.purchaseTimerBtn.isCritical .purchaseTimerInlineCountdown {
  animation: purchaseTimerCriticalPulse 0.6s ease-in-out infinite alternate;
}

.purchaseTimerBtn[data-add-state="loading"] {
  transform: translateY(-1px);
}

.purchaseTimerBtn[data-add-state="loading"] .purchaseTimerInlineText,
.purchaseTimerBtn[data-add-state="loading"] .purchaseTimerInlineCountdown {
  opacity: .9;
}

.purchaseTimerBtn.isAdded,
.purchaseTimerBtn[data-add-state="added"] {
  border-color: rgba(255, 214, 144, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,248,236,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.52),
    0 0 0 1px rgba(255,214,144,0.08),
    0 12px 30px rgba(0,0,0,0.36),
    0 0 36px rgba(255,196,98,0.12) !important;
}

.purchaseTimerBtn.isAdded .purchaseTimerInlineCountdown,
.purchaseTimerBtn[data-add-state="added"] .purchaseTimerInlineCountdown {
  transform: scale(1.03);
}

.purchaseTimerBtn.isExpired {
  border-color: rgba(255, 92, 64, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(28,14,12,.96) 0%, rgba(12,6,5,.98) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,92,64,0.04),
    0 10px 24px rgba(0,0,0,0.32) !important;
  cursor: not-allowed;
}

.purchaseTimerBtn.isExpired .purchaseTimerPulse {
  display: none;
}

.purchaseTimerBtn.isExpired .purchaseTimerInlineText {
  color: rgba(255, 154, 132, 0.78) !important;
}

.purchaseTimerBtn.isExpired .purchaseTimerInlineCountdown {
  color: rgba(255, 112, 88, 0.66) !important;
  text-shadow: none;
}

.purchaseTimerShell--detail .purchaseTimerBtn--live {
  min-height: 72px;
}

.purchaseTimerShell--detail .purchaseTimerInlineText {
  font-size: 11px;
  letter-spacing: 0.2em;
}

.purchaseTimerShell--detail .purchaseTimerInlineCountdown,
.purchaseTimerInlineCountdown--detail {
  font-size: 24px;
}

@media (max-width: 640px) {
  .purchaseTimerBtn--live {
    min-height: 56px;
    padding: 10px 14px !important;
  }

  .purchaseTimerInlineText {
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .purchaseTimerInlineCountdown {
    font-size: 16px;
  }

  .purchaseTimerShell--detail .purchaseTimerBtn--live {
    min-height: 64px;
  }

  .purchaseTimerShell--detail .purchaseTimerInlineText {
    font-size: 10px;
  }

  .purchaseTimerShell--detail .purchaseTimerInlineCountdown,
  .purchaseTimerInlineCountdown--detail {
    font-size: 20px;
  }
}


/* ---------- Purchase timer CTA layout refinement ---------- */
.purchaseTimerBtn--live {
  min-height: 70px;
  padding: 13px 18px !important;
}

.purchaseTimerBtn--live .btnText.purchaseTimerBtnText {
  gap: 6px;
  line-height: 1;
}

.purchaseTimerMainLabel {
  display: block;
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(247, 238, 224, 0.96) !important;
  -webkit-text-fill-color: rgba(247, 238, 224, 0.96) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.54),
    0 0 12px rgba(236,166,92,0.14),
    0 0 24px rgba(120,72,22,0.12);
}

.purchaseTimerSubline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  width: 100%;
  min-height: 18px;
}

.purchaseTimerInlineText {
  display: inline-block;
  width: auto;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  margin: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.purchaseTimerInlineCountdown {
  display: inline-block;
  width: auto;
  margin: 0;
  line-height: 1;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.purchaseTimerBtn[data-add-state="loading"] .purchaseTimerMainLabel {
  opacity: 0.94;
}

.purchaseTimerBtn[data-add-state="added"] .purchaseTimerMainLabel {
  color: rgba(255, 228, 176, 0.98) !important;
  -webkit-text-fill-color: rgba(255, 228, 176, 0.98) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.5),
    0 0 16px rgba(255,188,92,0.18),
    0 0 30px rgba(146,88,28,0.16);
}

.purchaseTimerBtn.isExpired .purchaseTimerMainLabel {
  color: rgba(255, 154, 132, 0.82) !important;
  -webkit-text-fill-color: rgba(255, 154, 132, 0.82) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.42),
    0 0 14px rgba(255,88,54,0.08);
}

.purchaseTimerShell--detail .purchaseTimerBtn--live {
  min-height: 78px;
}

.purchaseTimerShell--detail .purchaseTimerMainLabel {
  font-size: 14px;
}

.purchaseTimerShell--detail .purchaseTimerInlineText {
  font-size: 10px;
}

.purchaseTimerShell--detail .purchaseTimerInlineCountdown,
.purchaseTimerInlineCountdown--detail {
  font-size: 17px;
}

@media (max-width: 640px) {
  .purchaseTimerBtn--live {
    min-height: 66px;
    padding: 11px 14px !important;
  }

  .purchaseTimerBtn--live .btnText.purchaseTimerBtnText {
    gap: 5px;
  }

  .purchaseTimerMainLabel {
    font-size: 11px;
    letter-spacing: 0.13em;
  }

  .purchaseTimerSubline {
    gap: 4px 6px;
  }

  .purchaseTimerInlineText {
    font-size: 8px;
    letter-spacing: 0.1em;
    white-space: normal;
    text-align: center;
  }

  .purchaseTimerInlineCountdown {
    font-size: 13px;
  }

  .purchaseTimerShell--detail .purchaseTimerBtn--live {
    min-height: 72px;
  }

  .purchaseTimerShell--detail .purchaseTimerMainLabel {
    font-size: 12px;
  }

  .purchaseTimerShell--detail .purchaseTimerInlineText {
    font-size: 9px;
  }

  .purchaseTimerShell--detail .purchaseTimerInlineCountdown,
  .purchaseTimerInlineCountdown--detail {
    font-size: 15px;
  }
}


/* ---------- Purchase timer embedded CTA line alignment ---------- */
.purchaseTimerLineBreak {
  display: block;
  width: 100%;
  height: 0.55em;
  flex: 0 0 0.55em;
}

.purchaseTimerBtn--live .btnText.purchaseTimerBtnText {
  gap: 0;
}

.purchaseTimerSubline {
  display: block;
  width: 100%;
  margin: 0;
  text-align: center;
  line-height: 1.15;
}

.purchaseTimerBtn--live:not(.isExpired) .purchaseTimerSubline {
  display: block;
  width: 100%;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(247,238,224,0.95) !important;
  -webkit-text-fill-color: rgba(247,238,224,0.95) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.38), 0 0 10px rgba(214,177,116,0.08);
}

.purchaseTimerBtn--live:not(.isExpired) .purchaseTimerSubline .purchaseTimerInlineText,
.purchaseTimerBtn--live:not(.isExpired) .purchaseTimerSubline .purchaseTimerInlineCountdown {
  display: inline;
  width: auto;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
  text-align: inherit;
  text-shadow: inherit;
}

.purchaseTimerBtn--live:not(.isExpired) .purchaseTimerSubline .purchaseTimerInlineText {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

.purchaseTimerBtn--live:not(.isExpired) .purchaseTimerSubline .purchaseTimerInlineCountdown {
  font-variant-numeric: tabular-nums;
}

.purchaseTimerBtn.isUrgent .purchaseTimerSubline .purchaseTimerInlineCountdown {
  color: rgba(255, 172, 124, 1) !important;
  -webkit-text-fill-color: rgba(255, 172, 124, 1) !important;
}

.purchaseTimerBtn.isAdded .purchaseTimerSubline,
.purchaseTimerBtn[data-add-state="added"] .purchaseTimerSubline {
  color: rgba(255, 228, 176, 0.98) !important;
  -webkit-text-fill-color: rgba(255, 228, 176, 0.98) !important;
}

.purchaseTimerShell--detail .purchaseTimerBtn--live:not(.isExpired) .purchaseTimerSubline {
  font-size: 12px;
}

@media (max-width: 640px) {
  .purchaseTimerBtn--live .btnText.purchaseTimerBtnText {
    gap: 3px;
  }

  .purchaseTimerBtn--live:not(.isExpired) .purchaseTimerSubline {
    font-size: 9px;
    letter-spacing: 0.12em;
    line-height: 1.2;
  }

  .purchaseTimerShell--detail .purchaseTimerBtn--live:not(.isExpired) .purchaseTimerSubline {
    font-size: 10px;
  }
}


/* --- Featured grid: single card and odd tail alignment --- */
body.storeIndex .featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle,
.featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle {
  display: grid !important;
  justify-items: stretch !important;
  align-items: stretch !important;
}

body.storeIndex .featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle > .featuredCardWrap.featuredCardWrap--single,
.featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle > .featuredCardWrap.featuredCardWrap--single,
body.storeIndex .featuredShowcase .productGrid.featuredGridMatch.featuredGridOdd > .featuredCardWrap.featuredCardWrap--oddTail,
.featuredShowcase .productGrid.featuredGridMatch.featuredGridOdd > .featuredCardWrap.featuredCardWrap--oddTail {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}

body.storeIndex .featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle > .featuredCardWrap.featuredCardWrap--single > .productCard--featured,
.featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle > .featuredCardWrap.featuredCardWrap--single > .productCard--featured,
body.storeIndex .featuredShowcase .productGrid.featuredGridMatch.featuredGridOdd > .featuredCardWrap.featuredCardWrap--oddTail > .productCard--featured,
.featuredShowcase .productGrid.featuredGridMatch.featuredGridOdd > .featuredCardWrap.featuredCardWrap--oddTail > .productCard--featured {
  width: 100% !important;
}

@media (max-width: 899px) {
  body.storeIndex .featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle > .featuredCardWrap.featuredCardWrap--single,
  .featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle > .featuredCardWrap.featuredCardWrap--single {
    width: calc(((100% - var(--featured-grid-gap, 12px)) / 2) * 1.2) !important;
    max-width: calc(((100% - var(--featured-grid-gap, 12px)) / 2) * 1.2) !important;
    min-width: calc(((100% - var(--featured-grid-gap, 12px)) / 2) * 1.2) !important;
  }

  body.storeIndex .featuredShowcase .productGrid.featuredGridMatch.featuredGridOdd > .featuredCardWrap.featuredCardWrap--oddTail,
  .featuredShowcase .productGrid.featuredGridMatch.featuredGridOdd > .featuredCardWrap.featuredCardWrap--oddTail {
    width: calc((100% - var(--featured-grid-gap, 12px)) / 2) !important;
    max-width: calc((100% - var(--featured-grid-gap, 12px)) / 2) !important;
    min-width: calc((100% - var(--featured-grid-gap, 12px)) / 2) !important;
  }
}

@media (min-width: 900px) {
  body.storeIndex .featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle > .featuredCardWrap.featuredCardWrap--single,
  .featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle > .featuredCardWrap.featuredCardWrap--single {
    width: calc(((100% - (var(--featured-grid-gap, 12px) * 2)) / 3) * 1.2) !important;
    max-width: calc(((100% - (var(--featured-grid-gap, 12px) * 2)) / 3) * 1.2) !important;
    min-width: calc(((100% - (var(--featured-grid-gap, 12px) * 2)) / 3) * 1.2) !important;
  }
}

/* --- Purchase deadline timer: text centered and clearly below CTA --- */
.purchaseTimerBtn--live .btnText.purchaseTimerBtnText {
  align-items: center;
  text-align: center;
}

.purchaseTimerLineBreak {
  display: block;
  width: 100%;
  height: 0.8em;
  flex: 0 0 0.8em;
}

.purchaseTimerSubline {
  margin-top: 4px;
  text-align: center;
}

@media (max-width: 640px) {
  .purchaseTimerBtn--live .btnText.purchaseTimerBtnText {
    gap: 4px;
  }
}


/* --- Featured showcase: hard center focus override --- */
body.storeIndex .featuredShowcase.featuredShowcase--centerFocus .featuredShowcaseHeader.featuredShowcaseHeader--center,
.featuredShowcase.featuredShowcase--centerFocus .featuredShowcaseHeader.featuredShowcaseHeader--center {
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
}

body.storeIndex .featuredShowcase.featuredShowcase--centerFocus .featuredShowcaseTitle.featuredShowcaseTitle--center,
.featuredShowcase.featuredShowcase--centerFocus .featuredShowcaseTitle.featuredShowcaseTitle--center {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.storeIndex .featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle,
.featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle {
  justify-content: center !important;
}

@media (max-width: 899px) {
  body.storeIndex .featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle,
  .featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle {
    grid-template-columns: minmax(0, calc(((100% - var(--featured-grid-gap, 12px)) / 2) * 1.2)) !important;
  }

  body.storeIndex .featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle > .featuredCardWrap.featuredCardWrap--single,
  .featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle > .featuredCardWrap.featuredCardWrap--single {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: center !important;
  }
}

@media (min-width: 900px) {
  body.storeIndex .featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle,
  .featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle {
    grid-template-columns: minmax(0, calc(((100% - (var(--featured-grid-gap, 12px) * 2)) / 3) * 1.2)) !important;
  }

  body.storeIndex .featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle > .featuredCardWrap.featuredCardWrap--single,
  .featuredShowcase .productGrid.featuredGridMatch.featuredGridSingle > .featuredCardWrap.featuredCardWrap--single {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: center !important;
  }
}




/* Product gallery containment fix */
body.storeProduct .mediaFrame{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
body.storeProduct .mediaFrame .mainProductPicture,
body.storeProduct .mediaFrame picture{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
body.storeProduct .mediaFrame #mainProductImg{
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  min-width:0;
  min-height:0;
  margin:auto;
  object-fit:contain !important;
  object-position:center !important;
}
body.storeProduct .productGallery{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
body.storeProduct .productGalleryThumb{
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.2);
}
body.storeProduct .productGalleryThumb img{
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center;
  display:block;
  padding:4px;
}


/* ============================================================================
   HOT SELLERS SHOWCASE
   Same storefront rhythm as Featured, but with a red / ember treatment.
   ============================================================================ */

.badgeHotSeller,
.card.productCard .badgeHotSeller,
.card.productCard .badge.badgeHotSeller {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(26,12,10,0.96) 0%, rgba(14,6,6,0.98) 55%, rgba(8,3,3,1) 100%) !important;
  border: 1px solid rgba(255,118,71,0.38) !important;
  color: #ffd2b8 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.72),
    0 10px 24px rgba(0,0,0,0.50),
    0 0 0 1px rgba(255,118,71,0.10),
    0 0 18px rgba(255,82,31,0.20) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
}

.badgeHotSeller::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 42%, rgba(0,0,0,0.22) 100%),
    radial-gradient(120% 90% at 0% 0%, rgba(255,190,130,0.14) 0%, rgba(255,82,31,0.08) 42%, transparent 76%),
    radial-gradient(120% 90% at 100% 100%, rgba(255,103,51,0.10) 0%, transparent 72%) !important;
}

.badgeHotSeller .badgeText {
  position: relative !important;
  z-index: 1 !important;
  background: linear-gradient(180deg, #fff0d8 0%, #ffd7b0 18%, #ffb87a 42%, #ff8f52 68%, #ffd3a3 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #ffbf90 !important;
  text-shadow: 0 0 12px rgba(255,108,49,0.16), 0 1px 1px rgba(0,0,0,0.45) !important;
}

.badgeHotSellerFire,
.card.productCard .badgeHotSellerFire {
  position: relative !important;
  z-index: 1 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 0 8px rgba(255,129,61,0.50)) drop-shadow(0 0 18px rgba(255,62,20,0.28)) !important;
}

.hotSellerBadgeStack {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  max-width: min(100%, 320px) !important;
}

.hotSellerBadgeStack .badgeHotSeller,
.hotSellerBadgeStack .badgeHotSellerLimited {
  max-width: 100% !important;
}

.badgeHotSellerLimited,
.card.productCard .badgeHotSellerLimited,
.card.productCard .badge.badgeHotSellerLimited {
  padding: 7px 15px !important;
}

.badgeHotSellerLimited .badgeText {
  font-size: clamp(0.47rem, 0.16vw + 0.45rem, 0.58rem) !important;
  letter-spacing: 0.13em !important;
}

.hotSellerBadgeStack--hero .badgeHotSellerLimited .badgeText {
  font-size: clamp(0.50rem, 0.18vw + 0.47rem, 0.60rem) !important;
}

@media (max-width: 480px) {
  .badgeHotSeller,
  .card.productCard .badgeHotSeller,
  .card.productCard .badge.badgeHotSeller {
    padding: 7px 15px !important;
    font-size: 10px !important;
    gap: 7px !important;
  }

  .badgeHotSellerFire,
  .card.productCard .badgeHotSellerFire {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .hotSellerBadgeStack {
    gap: 5px !important;
    max-width: min(100%, 250px) !important;
  }

  .badgeHotSellerLimited,
  .card.productCard .badgeHotSellerLimited,
  .card.productCard .badge.badgeHotSellerLimited {
    padding: 6px 12px !important;
  }

  .badgeHotSellerLimited .badgeText {
    font-size: clamp(0.42rem, 0.12vw + 0.41rem, 0.50rem) !important;
    letter-spacing: 0.11em !important;
  }
}

body.storeIndex .hotSellerShowcase,
.hotSellerShowcase {
  margin-top: 6px !important;
}

body.storeIndex .hotSellerShowcase .hotSellerShowcaseHeader,
.hotSellerShowcase .hotSellerShowcaseHeader {
  text-align: left !important;
}

body.storeIndex .hotSellerShowcase .hotSellerShowcaseTitle,
.hotSellerShowcase .hotSellerShowcaseTitle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-size: 22px !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #ffd8b3 0%, #ffb16d 18%, #ff874f 40%, #ff5a2e 58%, #ff7b3f 78%, #ffb86f 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #ff7a42 !important;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.42)) drop-shadow(0 0 12px rgba(255,90,46,0.16)) !important;
}

body.storeIndex .hotSellerShowcase .hotSellerShowcaseTitleFire,
.hotSellerShowcase .hotSellerShowcaseTitleFire {
  font-size: 20px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 0 10px rgba(255,111,56,0.36)) drop-shadow(0 0 22px rgba(255,56,22,0.24)) !important;
}

@media (min-width: 768px) {
  body.storeIndex .hotSellerShowcase .hotSellerShowcaseTitle,
  .hotSellerShowcase .hotSellerShowcaseTitle {
    font-size: 25px !important;
    letter-spacing: 0.08em !important;
  }

  body.storeIndex .hotSellerShowcase .hotSellerShowcaseTitleFire,
  .hotSellerShowcase .hotSellerShowcaseTitleFire {
    font-size: 22px !important;
  }
}

body.storeIndex .hotSellerShowcase .productGrid.hotSellerGridMatch,
.hotSellerShowcase .productGrid.hotSellerGridMatch {
  overflow: visible !important;
}

body.storeIndex .hotSellerShowcase .productGrid.hotSellerGridMatch .productCard--hotSeller,
.hotSellerShowcase .productGrid.hotSellerGridMatch .productCard--hotSeller {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,102,56,0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 14px 34px rgba(0,0,0,0.34),
    0 4px 14px rgba(0,0,0,0.24),
    0 0 0 1px rgba(255,102,56,0.10),
    0 0 18px rgba(255,76,28,0.16),
    0 0 40px rgba(166,36,0,0.12) !important;
  isolation: isolate !important;
}

body.storeIndex .hotSellerShowcase .productGrid.hotSellerGridMatch .productCard--hotSeller::before,
.hotSellerShowcase .productGrid.hotSellerGridMatch .productCard--hotSeller::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  z-index: 0 !important;
  background:
    radial-gradient(125% 82% at 0% 0%, rgba(255,196,145,0.16) 0%, rgba(255,108,49,0.12) 26%, rgba(255,71,19,0.06) 44%, transparent 72%),
    radial-gradient(115% 78% at 100% 0%, rgba(255,120,70,0.14) 0%, rgba(255,68,24,0.07) 40%, transparent 74%),
    radial-gradient(120% 84% at 50% 100%, rgba(161,31,0,0.16) 0%, rgba(255,76,28,0.08) 40%, transparent 74%) !important;
}

body.storeIndex .hotSellerShowcase .productGrid.hotSellerGridMatch .productCard--hotSeller::after,
.hotSellerShowcase .productGrid.hotSellerGridMatch .productCard--hotSeller::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  z-index: 1 !important;
  background: linear-gradient(135deg, rgba(255,231,210,0.05) 0%, rgba(255,124,70,0.024) 30%, rgba(0,0,0,0.00) 58%, rgba(255,86,31,0.035) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.40),
    inset 0 0 0 1px rgba(255,198,166,0.05),
    inset 0 0 0 2px rgba(255,102,56,0.05) !important;
}

body.storeIndex .hotSellerShowcase .productGrid.hotSellerGridMatch .productCard--hotSeller > *,
.hotSellerShowcase .productGrid.hotSellerGridMatch .productCard--hotSeller > * {
  position: relative !important;
  z-index: 2 !important;
}

body.storeIndex .hotSellerShowcase .productGrid.hotSellerGridMatch .productCard--hotSeller .cardMediaOverlay,
.hotSellerShowcase .productGrid.hotSellerGridMatch .productCard--hotSeller .cardMediaOverlay {
  background: linear-gradient(180deg, rgba(28,10,8,0.04) 0%, rgba(18,7,7,0.12) 52%, rgba(12,5,5,0.24) 100%) !important;
  backdrop-filter: blur(1.6px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(1.6px) saturate(108%) !important;
}

body.storeIndex .hotSellerShowcase .hotSellerCardWrap::before,
.hotSellerShowcase .hotSellerCardWrap::before {
  box-shadow:
    0 0 0 1px rgba(255,102,56,0.26),
    0 0 10px 2px rgba(255,76,28,0.18),
    0 0 22px 2px rgba(161,31,0,0.12) !important;
}

@media (hover: hover) {
  body.storeIndex .hotSellerShowcase .hotSellerCardWrap:hover::before,
  .hotSellerShowcase .hotSellerCardWrap:hover::before {
    box-shadow:
      0 0 0 1px rgba(255,130,88,0.34),
      0 0 14px 3px rgba(255,90,34,0.24),
      0 0 28px 4px rgba(166,36,0,0.16) !important;
  }

  body.storeIndex .hotSellerShowcase .hotSellerCardWrap:hover > .productCard--hotSeller,
  .hotSellerShowcase .hotSellerCardWrap:hover > .productCard--hotSeller,
  body.storeIndex .hotSellerShowcase .productGrid.hotSellerGridMatch .productCard--hotSeller:hover,
  .hotSellerShowcase .productGrid.hotSellerGridMatch .productCard--hotSeller:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(255,136,92,0.42) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.09),
      0 16px 38px rgba(0,0,0,0.36),
      0 6px 16px rgba(0,0,0,0.24),
      0 0 0 1px rgba(255,136,92,0.14),
      0 0 24px rgba(255,98,42,0.20),
      0 0 54px rgba(166,36,0,0.14) !important;
  }
}

body.storeIndex .hotSellerShowcase .hotSellerBadgeHero,
.hotSellerShowcase .hotSellerBadgeHero {
  border-color: rgba(255,132,88,0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.74),
    0 10px 24px rgba(0,0,0,0.50),
    0 0 0 1px rgba(255,132,88,0.10),
    0 0 18px rgba(255,88,36,0.22) !important;
}

[data-theme="light"] body.storeIndex .hotSellerShowcase .hotSellerShowcaseTitle,
[data-theme="light"] .hotSellerShowcase .hotSellerShowcaseTitle {
  background: linear-gradient(135deg, #b35b29 0%, #c66b28 18%, #d27425 38%, #bb5a1d 58%, #c66b28 78%, #8f4316 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
}

[data-theme="light"] body.storeIndex .hotSellerShowcase .productGrid.hotSellerGridMatch .productCard--hotSeller,
[data-theme="light"] .hotSellerShowcase .productGrid.hotSellerGridMatch .productCard--hotSeller {
  border-color: rgba(176,86,31,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.62),
    inset 0 0 0 1px rgba(176,86,31,0.05),
    0 12px 24px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.05),
    0 0 18px rgba(176,86,31,0.05) !important;
}

[data-theme="light"] body.storeIndex .hotSellerShowcase .hotSellerCardWrap::before,
[data-theme="light"] .hotSellerShowcase .hotSellerCardWrap::before {
  box-shadow:
    0 0 0 1px rgba(176,86,31,0.20),
    0 0 8px 2px rgba(176,86,31,0.12) !important;
}


/* Hot sellers modal popup */
html.hotSellersModalOpen,
body.hotSellersModalOpen {
  overflow: hidden;
}

.hotSellersModalBackdrop {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  background:
    radial-gradient(circle at top, rgba(255, 80, 80, 0.16), transparent 40%),
    radial-gradient(circle at bottom, rgba(255, 30, 30, 0.14), transparent 42%),
    rgba(5, 5, 6, 0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hotSellersModalCard {
  position: relative;
  width: min(100%, 720px);
  border-radius: 26px;
  padding: 28px 24px 24px;
  color: #fff4f4;
  background:
    linear-gradient(180deg, rgba(25, 25, 28, 0.98), rgba(8, 8, 10, 0.98));
  border: 1px solid rgba(255, 126, 126, 0.48);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 66, 66, 0.30) inset,
    0 0 0 3px rgba(91, 0, 0, 0.88) inset,
    0 1px 0 rgba(255, 205, 205, 0.16) inset,
    0 -10px 24px rgba(0, 0, 0, 0.34) inset,
    0 0 30px rgba(255, 38, 38, 0.22);
  overflow: hidden;
}

.hotSellersModalCard::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 24px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 24%, transparent 76%, rgba(255, 0, 0, 0.08)),
    radial-gradient(circle at top right, rgba(255, 92, 92, 0.16), transparent 32%);
}

.hotSellersModalEyebrow {
  position: relative;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 155, 155, 0.88);
}

.hotSellersModalTitle {
  position: relative;
  margin: 0 34px 12px 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 0.94;
  font-weight: 700;
  color: #fff3f1;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px rgba(161, 9, 9, 0.18);
}

.hotSellersModalBody {
  position: relative;
  font-size: 16px;
  line-height: 1.72;
  color: rgba(255, 232, 232, 0.92);
  text-wrap: pretty;
}

.hotSellersModalActions {
  position: relative;
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
}

.hotSellersModalButton {
  appearance: none;
  border: 1px solid rgba(255, 120, 120, 0.38);
  border-radius: 999px;
  padding: 13px 20px;
  min-width: 148px;
  background:
    linear-gradient(180deg, rgba(78, 7, 7, 0.98), rgba(34, 3, 3, 0.98));
  color: #fff1f1;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow:
    0 1px 0 rgba(255, 208, 208, 0.15) inset,
    0 -3px 12px rgba(0, 0, 0, 0.32) inset,
    0 12px 30px rgba(87, 0, 0, 0.28);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.hotSellersModalButton:hover,
.hotSellersModalButton:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 148, 148, 0.56);
  box-shadow:
    0 1px 0 rgba(255, 225, 225, 0.20) inset,
    0 -3px 12px rgba(0, 0, 0, 0.30) inset,
    0 14px 34px rgba(117, 0, 0, 0.34);
}

.hotSellersModalClose {
  appearance: none;
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 130, 130, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 226, 226, 0.86);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 10px 24px rgba(0, 0, 0, 0.24);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.hotSellersModalClose:hover,
.hotSellersModalClose:focus-visible {
  transform: scale(1.04);
  background: rgba(255, 84, 84, 0.08);
  border-color: rgba(255, 158, 158, 0.38);
}

@media (max-width: 640px) {
  .hotSellersModalBackdrop {
    padding: 16px 12px;
    align-items: flex-end;
  }

  .hotSellersModalCard {
    width: 100%;
    padding: 24px 18px 18px;
    border-radius: 22px;
  }

  .hotSellersModalCard::before {
    border-radius: 20px;
  }

  .hotSellersModalTitle {
    margin-right: 36px;
    font-size: clamp(28px, 10vw, 38px);
  }

  .hotSellersModalBody {
    font-size: 15px;
    line-height: 1.62;
  }

  .hotSellersModalButton {
    width: 100%;
    justify-content: center;
  }
}

/* ── V210 RESTOCK SUBSCRIPTION SHELLS ───────────────────────────────────── */
.restockSubscribeShell{
  position:relative;
  z-index:4;
  width:100%;
  border-radius:18px;
  border:1px solid rgba(208,68,68,.22);
  background:
    radial-gradient(circle at top right, rgba(185,34,34,.16), transparent 44%),
    linear-gradient(180deg, rgba(22,14,14,.98), rgba(10,10,11,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 18px 34px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,86,86,.05);
  padding:14px;
  overflow:hidden;
}
.restockSubscribeShell::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,120,120,.08), transparent 38%, transparent 62%, rgba(255,120,120,.05));
}
.restockSubscribeShell--detail{
  padding:18px;
  border-radius:20px;
}
.restockSubscribeEyebrow{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,175,175,.84);
  font-weight:700;
}
.restockSubscribeTitle{
  position:relative;
  z-index:1;
  margin:0 0 6px;
  font-family:"Cormorant Garamond", serif;
  font-size:24px;
  font-weight:700;
  line-height:1;
  color:#fff2eb;
  text-shadow:0 6px 18px rgba(0,0,0,.34);
}
.restockSubscribeShell--card .restockSubscribeTitle{
  font-size:20px;
}
.restockSubscribeMeta{
  position:relative;
  z-index:1;
  color:rgba(255,235,230,.72);
  font-size:12px;
  line-height:1.55;
  margin-bottom:10px;
}
.restockSubscribeCount{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:28px;
  padding:6px 11px;
  margin-bottom:12px;
  border-radius:999px;
  border:1px solid rgba(255,130,130,.16);
  background:rgba(255,75,75,.06);
  color:rgba(255,214,214,.92);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.restockSubscribeForm{
  position:relative;
  z-index:1;
  display:grid;
  gap:10px;
}
.restockSubscribeForm--card{
  grid-template-columns:minmax(0,1fr);
}
.restockSubscribeField{
  margin:0;
}
.restockSubscribeField--detail label{
  display:block;
  margin-bottom:7px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(255,205,205,.72);
}
.restockSubscribeInput{
  width:100%;
  min-height:46px;
  border-radius:14px;
  border:1px solid rgba(255,145,145,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  color:#fff7f1;
  padding:0 14px;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.restockSubscribeInput::placeholder{
  color:rgba(255,223,223,.34);
}
.restockSubscribeInput:focus{
  border-color:rgba(255,125,125,.34);
  box-shadow:0 0 0 3px rgba(255,92,92,.10), inset 0 1px 0 rgba(255,255,255,.04);
}
.restockSubscribeBtn{
  width:100%;
  min-height:46px;
  border-radius:14px !important;
  background:linear-gradient(180deg, rgba(70,14,14,.98), rgba(30,10,10,.98)) !important;
  border:1px solid rgba(255,120,120,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 18px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,70,70,.05) !important;
}
.restockSubscribeBtn .btnText,
.restockSubscribeBtn--detail .btnText{
  color:#ffe3d8 !important;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.restockSubscribeBtn:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 24px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,78,78,.08) !important;
}
.restockSubscribeFlash{
  position:relative;
  z-index:1;
  margin-bottom:12px;
  padding:10px 12px;
  border-radius:12px;
  font-size:12px;
  line-height:1.45;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#f7f1ed;
}
.restockSubscribeFlash.isSuccess{
  border-color:rgba(102,225,158,.16);
  background:rgba(46,185,110,.09);
  color:#bdf7d3;
}
.restockSubscribeFlash.isError{
  border-color:rgba(255,120,120,.18);
  background:rgba(185,46,46,.10);
  color:#ffc9c9;
}
.card.productCard .restockSubscribeShell{
  margin-top:2px;
}
.card.productCard .restockSubscribeMeta{
  min-height:36px;
}
@media (min-width: 640px){
  .restockSubscribeForm--card{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
  }
  .restockSubscribeBtn{
    width:auto;
    min-width:146px;
    padding-left:18px;
    padding-right:18px;
  }
}
@media (max-width: 639px){
  .restockSubscribeShell{
    padding:12px;
    border-radius:16px;
  }
  .restockSubscribeTitle{
    font-size:18px;
  }
  .restockSubscribeMeta{
    font-size:11.5px;
    min-height:0 !important;
  }
  .restockSubscribeCount{
    font-size:10px;
  }
}


/* ── V211 HOT SELLER + RESTOCK CARD + ANDROID CTA FIXES ─────────────────── */
body.storeIndex .productGrid > .card.productCard,
body.storeIndex .productGrid > article.card.productCard,
body.storeIndex .featuredShowcase .productGrid.featuredGridMatch > .featuredCardWrap,
body.storeIndex .hotSellerShowcase .productGrid.hotSellerGridMatch > .hotSellerCardWrap{
  align-self:start !important;
}

body.storeIndex .productGrid article.card.productCard,
body.storeIndex .featuredShowcase .productCard--featured,
body.storeIndex .hotSellerShowcase .productCard--hotSeller{
  height:auto !important;
}

body.storeIndex .card.productCard .restockSubscribeShell--card{
  padding:12px !important;
  border-radius:16px !important;
}

body.storeIndex .card.productCard .restockSubscribeEyebrow{
  margin-bottom:4px !important;
  font-size:9px !important;
}

body.storeIndex .card.productCard .restockSubscribeTitle{
  font-size:18px !important;
  margin-bottom:4px !important;
}

body.storeIndex .card.productCard .restockSubscribeMeta{
  min-height:0 !important;
  margin-bottom:8px !important;
  font-size:11.5px !important;
  line-height:1.4 !important;
}

body.storeIndex .card.productCard .restockSubscribeCount{
  margin-bottom:8px !important;
  padding:5px 10px !important;
  font-size:10px !important;
}

body.storeIndex .card.productCard .restockSubscribeForm{
  gap:8px !important;
}

body.storeIndex .card.productCard .restockSubscribeInput,
body.storeIndex .card.productCard .restockSubscribeBtn{
  min-height:42px !important;
}

body.storeIndex .productGrid .cardActions .btn,
body.storeIndex .productGrid .cardActions .btnPrimary,
body.storeIndex .productGrid .cardActions button[data-add-to-cart],
body.storeIndex .productGrid article.card.productCard .cardActions .btn.btnPrimary.btnWide{
  display:flex !important;
  display:-webkit-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  -webkit-box-align:center !important;
  -webkit-box-pack:center !important;
}

body.storeIndex .productGrid .cardActions .btn .btnText,
body.storeIndex .productGrid .cardActions .btnPrimary .btnText,
body.storeIndex .productGrid .cardActions button[data-add-to-cart] .btnText,
body.storeIndex .productGrid article.card.productCard .cardActions .btn.btnPrimary.btnWide .btnText{
  display:block !important;
  width:100% !important;
  margin:0 auto !important;
  text-align:center !important;
  line-height:1.15 !important;
}

.badgeHotSellerLimited .badgeText{
  letter-spacing:0.11em !important;
}

@media (max-width: 640px){
  .hotSellerBadgeStack,
  .hotSellerBadgeStack--hero{
    gap:4px !important;
    max-width:84% !important;
  }

  .badgeHotSeller,
  .card.productCard .badgeHotSeller,
  .card.productCard .badge.badgeHotSeller{
    gap:6px !important;
    padding:6px 12px !important;
    font-size:9.5px !important;
    letter-spacing:0.12em !important;
  }

  .badgeHotSellerFire,
  .card.productCard .badgeHotSellerFire{
    font-size:14px !important;
  }

  body.storeIndex .card.productCard .restockSubscribeShell--card{
    padding:11px !important;
  }

  body.storeIndex .card.productCard .restockSubscribeTitle{
    font-size:17px !important;
  }

  body.storeIndex .card.productCard .restockSubscribeMeta{
    font-size:11px !important;
  }
}


/* ── V212 COMPACT RESTOCK + BALANCED PRODUCT CARDS ───────────────────────── */
body.storeIndex .productGrid,
body.storeIndex .featuredShowcase .productGrid,
body.storeIndex .hotSellerShowcase .productGrid{
  align-items:stretch !important;
}

body.storeIndex .productGrid > .card.productCard,
body.storeIndex .productGrid > article.card.productCard,
body.storeIndex .featuredShowcase .productGrid > .featuredCardWrap,
body.storeIndex .hotSellerShowcase .productGrid > .hotSellerCardWrap,
body.storeIndex .featuredShowcase .productCard--featured,
body.storeIndex .hotSellerShowcase .productCard--hotSeller{
  height:100% !important;
}

body.storeIndex .card.productCard .cardMedia,
body.storeIndex .featuredShowcase .productCard--featured .cardMedia,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .cardMedia{
  aspect-ratio:4 / 5 !important;
}

body.storeIndex .card.productCard .cardBody,
body.storeIndex .featuredShowcase .productCard--featured .cardBody,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .cardBody{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  min-height:0 !important;
}

body.storeIndex .card.productCard .cardTitle,
body.storeIndex .featuredShowcase .productCard--featured .cardTitle,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .cardTitle{
  line-height:1.2 !important;
  min-height:2.4em !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
}

body.storeIndex .card.productCard .cardMeta,
body.storeIndex .featuredShowcase .productCard--featured .cardMeta,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .cardMeta{
  min-height:28px !important;
  align-items:center !important;
}

body.storeIndex .card.productCard .cardActions,
body.storeIndex .featuredShowcase .productCard--featured .cardActions,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .cardActions{
  margin-top:auto !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
}

body.storeIndex .card.productCard .cardActions > *,
body.storeIndex .featuredShowcase .productCard--featured .cardActions > *,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .cardActions > *{
  width:100% !important;
}

body.storeIndex .card.productCard .restockSubscribeShell--card,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeShell--card,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeShell--card{
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

body.storeIndex .card.productCard .restockSubscribeShell--card::before,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeShell--card::before,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeShell--card::before{
  display:none !important;
}

body.storeIndex .card.productCard .restockSubscribeFlash,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeFlash,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeFlash{
  margin-bottom:8px !important;
  padding:8px 10px !important;
  border-radius:12px !important;
  font-size:11px !important;
}

body.storeIndex .card.productCard .restockSubscribeForm--cardCompact,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeForm--cardCompact,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeForm--cardCompact{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  align-items:center !important;
  gap:8px !important;
}


body.storeIndex .card.productCard .restockSubscribeInputWrap,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeInputWrap,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeInputWrap{
  position:relative !important;
  width:100% !important;
}

body.storeIndex .card.productCard .restockSubscribeHint,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeHint,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeHint{
  position:absolute !important;
  inset:50% 12px auto 12px !important;
  transform:translateY(-50%) !important;
  display:block !important;
  text-align:center !important;
  color:rgba(224, 186, 112, .78) !important;
  font-size:11px !important;
  line-height:1.08 !important;
  letter-spacing:.01em !important;
  pointer-events:none !important;
  white-space:normal !important;
  text-wrap:balance !important;
}

body.storeIndex .card.productCard .restockSubscribeInputWrap:focus-within .restockSubscribeHint,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeInputWrap:focus-within .restockSubscribeHint,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeInputWrap:focus-within .restockSubscribeHint,
body.storeIndex .card.productCard .restockSubscribeInput:not(:placeholder-shown) + .restockSubscribeHint,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeInput:not(:placeholder-shown) + .restockSubscribeHint,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeInput:not(:placeholder-shown) + .restockSubscribeHint{
  opacity:0 !important;
}

body.storeIndex .card.productCard .restockSubscribeInput,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeInput,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeInput{
  min-height:48px !important;
  border-radius:14px !important;
  padding:0 13px !important;
  text-align:center !important;
  font-size:13px !important;
  box-shadow:0 0 0 1px rgba(210, 166, 84, .18), 0 0 16px rgba(210, 166, 84, .18), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body.storeIndex .card.productCard .restockSubscribeInput::placeholder,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeInput::placeholder,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeInput::placeholder{
  text-align:center !important;
  color:transparent !important;
  font-size:1px !important;
}

body.storeIndex .card.productCard .restockSubscribeInput:focus,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeInput:focus,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeInput:focus{
  border-color:rgba(224, 186, 112, .38) !important;
  box-shadow:0 0 0 1px rgba(224, 186, 112, .28), 0 0 20px rgba(224, 186, 112, .26), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body.storeIndex .card.productCard .restockSubscribeBtn,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeBtn,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeBtn{
  width:auto !important;
  min-width:118px !important;
  min-height:44px !important;
  padding:0 16px !important;
  white-space:nowrap !important;
}

body.storeIndex .card.productCard .restockSubscribeBtn .btnText,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeBtn .btnText,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeBtn .btnText{
  width:auto !important;
}

@media (max-width: 640px){
  body.storeIndex .card.productCard .cardTitle,
  body.storeIndex .featuredShowcase .productCard--featured .cardTitle,
  body.storeIndex .hotSellerShowcase .productCard--hotSeller .cardTitle{
    min-height:2.55em !important;
  }

  body.storeIndex .card.productCard .restockSubscribeForm--cardCompact,
  body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeForm--cardCompact,
  body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeForm--cardCompact{
    grid-template-columns:minmax(0, 1fr) !important;
  }

  body.storeIndex .card.productCard .restockSubscribeInput,
  body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeInput,
  body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeInput,
  body.storeIndex .card.productCard .restockSubscribeBtn,
  body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeBtn,
  body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeBtn{
    min-height:44px !important;
  }

  body.storeIndex .card.productCard .restockSubscribeInput,
  body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeInput,
  body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeInput{
    padding:0 10px !important;
    font-size:12px !important;
  }

  body.storeIndex .card.productCard .restockSubscribeHint,
  body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeHint,
  body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeHint{
    inset:50% 10px auto 10px !important;
    font-size:9.5px !important;
    line-height:1.04 !important;
  }

  body.storeIndex .card.productCard .restockSubscribeInput::placeholder,
  body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeInput::placeholder,
  body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeInput::placeholder{
    font-size:1px !important;
  }

  body.storeIndex .card.productCard .restockSubscribeBtn,
  body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeBtn,
  body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeBtn{
    width:100% !important;
    min-width:0 !important;
  }
}


/* v2026-03-07 unified restock control + balanced storefront cards */
body.storeIndex .card.productCard .cardTitle,
body.storeIndex .featuredShowcase .productCard--featured .cardTitle,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .cardTitle{
  display:block !important;
  overflow:visible !important;
  -webkit-line-clamp:unset !important;
  line-clamp:unset !important;
  min-height:3.55em !important;
  max-height:none !important;
  text-wrap:pretty !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
}

body.storeIndex .card.productCard .cardTitle.isLong,
body.storeIndex .featuredShowcase .productCard--featured .cardTitle.isLong,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .cardTitle.isLong{
  font-size:15px !important;
  line-height:1.18 !important;
}

body.storeIndex .card.productCard .cardTitle.isVeryLong,
body.storeIndex .featuredShowcase .productCard--featured .cardTitle.isVeryLong,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .cardTitle.isVeryLong{
  font-size:14px !important;
  line-height:1.14 !important;
  letter-spacing:-.012em !important;
}

body.storeIndex .card.productCard .cardTitle.isUltraLong,
body.storeIndex .featuredShowcase .productCard--featured .cardTitle.isUltraLong,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .cardTitle.isUltraLong{
  font-size:13px !important;
  line-height:1.12 !important;
  letter-spacing:-.015em !important;
}

body.storeIndex .card.productCard .cardActions,
body.storeIndex .featuredShowcase .productCard--featured .cardActions,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .cardActions{
  gap:0 !important;
}

body.storeIndex .card.productCard .restockSubscribeShell--card,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeShell--card,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeShell--card{
  display:block !important;
}

body.storeIndex .card.productCard .restockSubscribeForm--cardCompact,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeForm--cardCompact,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeForm--cardCompact{
  display:block !important;
}

body.storeIndex .card.productCard .restockSubscribeControl,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeControl,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeControl{
  position:relative !important;
  display:flex !important;
  align-items:stretch !important;
  width:100% !important;
  min-height:50px !important;
  border-radius:14px !important;
  overflow:hidden !important;
  border:1px solid rgba(206, 162, 82, .28) !important;
  background:
    linear-gradient(180deg, rgba(33, 25, 18, .96) 0%, rgba(18, 14, 12, .98) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(206, 162, 82, .06),
    0 10px 24px rgba(0,0,0,.26),
    0 0 18px rgba(179, 49, 49, .12) !important;
}

body.storeIndex .card.productCard .restockSubscribeControl::before,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeControl::before,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeControl::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(90deg, rgba(206, 162, 82, .12), rgba(206, 162, 82, 0) 32%, rgba(206, 162, 82, .08) 100%) !important;
  pointer-events:none !important;
}

body.storeIndex .card.productCard .restockSubscribeControl.isLoading,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeControl.isLoading,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeControl.isLoading{
  opacity:.92 !important;
}

body.storeIndex .card.productCard .restockSubscribeControl.isError,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeControl.isError,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeControl.isError{
  border-color:rgba(208, 88, 88, .56) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(208, 88, 88, .18),
    0 12px 24px rgba(0,0,0,.28),
    0 0 20px rgba(178, 44, 44, .18) !important;
}

body.storeIndex .card.productCard .restockSubscribeControl.isSuccess,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeControl.isSuccess,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeControl.isSuccess{
  border-color:rgba(120, 187, 126, .48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(120, 187, 126, .18),
    0 12px 24px rgba(0,0,0,.28),
    0 0 18px rgba(79, 170, 94, .18) !important;
}

body.storeIndex .card.productCard .restockSubscribeInputWrap,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeInputWrap,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeInputWrap{
  position:relative !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}

body.storeIndex .card.productCard .restockSubscribeInput,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeInput,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeInput{
  width:100% !important;
  min-height:50px !important;
  height:100% !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 14px !important;
  text-align:left !important;
  color:var(--lux-cream) !important;
  font-size:13px !important;
}

body.storeIndex .card.productCard .restockSubscribeInput:focus,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeInput:focus,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeInput:focus{
  border:0 !important;
  box-shadow:none !important;
}

body.storeIndex .card.productCard .restockSubscribeHint,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeHint,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeHint{
  position:absolute !important;
  inset:0 0 0 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 14px !important;
  text-align:center !important;
  color:rgba(224, 186, 112, .86) !important;
  font-size:10.8px !important;
  line-height:1.08 !important;
  letter-spacing:.012em !important;
  pointer-events:none !important;
  white-space:normal !important;
  text-wrap:balance !important;
  transition:opacity .18s ease !important;
}

body.storeIndex .card.productCard .restockSubscribeInputWrap:focus-within .restockSubscribeHint,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeInputWrap:focus-within .restockSubscribeHint,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeInputWrap:focus-within .restockSubscribeHint,
body.storeIndex .card.productCard .restockSubscribeInput:not(:placeholder-shown) + .restockSubscribeHint,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeInput:not(:placeholder-shown) + .restockSubscribeHint,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeInput:not(:placeholder-shown) + .restockSubscribeHint,
body.storeIndex .card.productCard .restockSubscribeControl.isSubmitted .restockSubscribeHint,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeControl.isSubmitted .restockSubscribeHint,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeControl.isSubmitted .restockSubscribeHint{
  opacity:0 !important;
}

body.storeIndex .card.productCard .restockSubscribeBtn.restockSubscribeBtn--inline,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeBtn.restockSubscribeBtn--inline,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeBtn.restockSubscribeBtn--inline{
  position:relative !important;
  z-index:1 !important;
  flex:0 0 46px !important;
  min-width:46px !important;
  width:46px !important;
  min-height:50px !important;
  padding:0 !important;
  border:0 !important;
  border-left:1px solid rgba(206, 162, 82, .18) !important;
  border-radius:0 !important;
  background:linear-gradient(180deg, rgba(28, 23, 19, .98) 0%, rgba(20, 16, 13, .98) 100%) !important;
  box-shadow:none !important;
}

body.storeIndex .card.productCard .restockSubscribeBtn.restockSubscribeBtn--inline .btnText,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeBtn.restockSubscribeBtn--inline .btnText,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeBtn.restockSubscribeBtn--inline .btnText{
  font-size:18px !important;
  line-height:1 !important;
}

body.storeIndex .card.productCard .restockSubscribeControl.isSubmitted .restockSubscribeInputWrap,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeControl.isSubmitted .restockSubscribeInputWrap,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeControl.isSubmitted .restockSubscribeInputWrap,
body.storeIndex .card.productCard .restockSubscribeControl.isSubmitted .restockSubscribeBtn,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeControl.isSubmitted .restockSubscribeBtn,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeControl.isSubmitted .restockSubscribeBtn{
  opacity:0 !important;
  pointer-events:none !important;
}

body.storeIndex .card.productCard .restockSubscribeStatus,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeStatus,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeStatus{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 14px !important;
  text-align:center !important;
  font-size:12px !important;
  line-height:1.06 !important;
  letter-spacing:.02em !important;
  color:#ead39a !important;
  opacity:0 !important;
  pointer-events:none !important;
  z-index:2 !important;
}

body.storeIndex .card.productCard .restockSubscribeControl.isSuccess .restockSubscribeStatus,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeControl.isSuccess .restockSubscribeStatus,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeControl.isSuccess .restockSubscribeStatus,
body.storeIndex .card.productCard .restockSubscribeControl.isError .restockSubscribeStatus,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeControl.isError .restockSubscribeStatus,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeControl.isError .restockSubscribeStatus{
  opacity:1 !important;
}

body.storeIndex .card.productCard .restockSubscribeControl.isError .restockSubscribeStatus,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeControl.isError .restockSubscribeStatus,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeControl.isError .restockSubscribeStatus{
  color:#ffb2b2 !important;
  font-size:11px !important;
}

@media (max-width: 640px){
  body.storeIndex .card.productCard .cardTitle,
  body.storeIndex .featuredShowcase .productCard--featured .cardTitle,
  body.storeIndex .hotSellerShowcase .productCard--hotSeller .cardTitle{
    min-height:3.75em !important;
  }

  body.storeIndex .card.productCard .cardTitle.isLong,
  body.storeIndex .featuredShowcase .productCard--featured .cardTitle.isLong,
  body.storeIndex .hotSellerShowcase .productCard--hotSeller .cardTitle.isLong{
    font-size:13px !important;
  }

  body.storeIndex .card.productCard .cardTitle.isVeryLong,
  body.storeIndex .featuredShowcase .productCard--featured .cardTitle.isVeryLong,
  body.storeIndex .hotSellerShowcase .productCard--hotSeller .cardTitle.isVeryLong{
    font-size:12px !important;
  }

  body.storeIndex .card.productCard .cardTitle.isUltraLong,
  body.storeIndex .featuredShowcase .productCard--featured .cardTitle.isUltraLong,
  body.storeIndex .hotSellerShowcase .productCard--hotSeller .cardTitle.isUltraLong{
    font-size:11.2px !important;
  }

  body.storeIndex .card.productCard .restockSubscribeControl,
  body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeControl,
  body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeControl,
  body.storeIndex .card.productCard .restockSubscribeInput,
  body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeInput,
  body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeInput,
  body.storeIndex .card.productCard .restockSubscribeBtn.restockSubscribeBtn--inline,
  body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeBtn.restockSubscribeBtn--inline,
  body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeBtn.restockSubscribeBtn--inline{
    min-height:48px !important;
  }

  body.storeIndex .card.productCard .restockSubscribeHint,
  body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeHint,
  body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeHint{
    font-size:9.4px !important;
    line-height:1.03 !important;
    padding:0 10px !important;
  }

  body.storeIndex .card.productCard .restockSubscribeInput,
  body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeInput,
  body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeInput{
    padding:0 10px !important;
    font-size:12px !important;
  }

  body.storeIndex .card.productCard .restockSubscribeStatus,
  body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeStatus,
  body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeStatus{
    font-size:11px !important;
    padding:0 12px !important;
  }
}

/* v2026-03-07 restock trigger modal overhaul */
html.restockModalOpen,
body.restockModalOpen{
  overflow:hidden !important;
}

body.storeIndex .card.productCard .restockSubscribeShell--card,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeShell--card,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeShell--card{
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

body.storeIndex .card.productCard .restockSubscribeTrigger,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeTrigger,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeTrigger{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:48px !important;
  padding:12px 16px !important;
  border-radius:15px !important;
  border:1px solid rgba(206, 162, 82, .28) !important;
  background:
    radial-gradient(circle at top, rgba(206, 162, 82, .14) 0%, rgba(206, 162, 82, 0) 38%),
    linear-gradient(180deg, rgba(23, 18, 16, .98) 0%, rgba(12, 10, 9, .99) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(206, 162, 82, .05),
    0 12px 24px rgba(0,0,0,.28),
    0 0 20px rgba(137, 24, 24, .16) !important;
  overflow:hidden !important;
}

body.storeIndex .card.productCard .restockSubscribeTrigger::before,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeTrigger::before,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeTrigger::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(90deg, rgba(206, 162, 82, .14), rgba(206, 162, 82, 0) 42%, rgba(206, 162, 82, .08) 100%) !important;
  pointer-events:none !important;
}

body.storeIndex .card.productCard .restockSubscribeTrigger .btnText,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeTrigger .btnText,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeTrigger .btnText{
  position:relative !important;
  z-index:1 !important;
  width:100% !important;
  text-align:center !important;
  white-space:normal !important;
  line-height:1.15 !important;
  letter-spacing:.11em !important;
  font-size:11px !important;
  font-weight:700 !important;
  background:linear-gradient(180deg, #f3e7bf 0%, #d9be78 52%, #b88d3c 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  text-transform:uppercase !important;
}

body.storeIndex .card.productCard .restockSubscribeTrigger:hover,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeTrigger:hover,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeTrigger:hover,
body.storeIndex .card.productCard .restockSubscribeTrigger:focus-visible,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeTrigger:focus-visible,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeTrigger:focus-visible{
  transform:translateY(-1px) !important;
  border-color:rgba(226, 188, 107, .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(226, 188, 107, .12),
    0 16px 30px rgba(0,0,0,.32),
    0 0 24px rgba(171, 42, 42, .20) !important;
}

body.storeIndex .card.productCard .restockSubscribeTrigger.isLoading,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeTrigger.isLoading,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeTrigger.isLoading{
  opacity:.92 !important;
}

body.storeIndex .card.productCard .restockSubscribeTrigger.isSubscribed,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeTrigger.isSubscribed,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeTrigger.isSubscribed{
  border-color:rgba(103, 185, 113, .48) !important;
  background:linear-gradient(180deg, rgba(28, 79, 40, .98) 0%, rgba(18, 51, 27, .99) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(103, 185, 113, .16),
    0 14px 26px rgba(0,0,0,.30),
    0 0 22px rgba(69, 166, 86, .24) !important;
}

body.storeIndex .card.productCard .restockSubscribeTrigger.isSubscribed .btnText,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeTrigger.isSubscribed .btnText,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeTrigger.isSubscribed .btnText{
  background:none !important;
  -webkit-text-fill-color:#e8ffe6 !important;
  color:#e8ffe6 !important;
}

body.storeIndex .card.productCard .restockSubscribeTrigger.isError,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeTrigger.isError,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeTrigger.isError{
  border-color:rgba(210, 88, 88, .54) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(210, 88, 88, .18),
    0 14px 26px rgba(0,0,0,.30),
    0 0 22px rgba(176, 43, 43, .22) !important;
}

body.storeIndex .card.productCard .restockSubscribeTrigger.isError .btnText,
body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeTrigger.isError .btnText,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeTrigger.isError .btnText{
  background:none !important;
  -webkit-text-fill-color:#ffcccc !important;
  color:#ffcccc !important;
}

.restockModal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  z-index:1600;
}

.restockModal[hidden]{
  display:none !important;
}

.restockModalBackdrop{
  position:absolute;
  inset:0;
  background:rgba(3, 3, 3, .78);
  backdrop-filter:blur(10px);
}

.restockModalDialog{
  position:relative;
  z-index:1;
  width:min(520px, 100%);
  padding:28px 24px 22px;
  border-radius:24px;
  border:1px solid rgba(206, 162, 82, .24);
  background:
    radial-gradient(circle at top, rgba(206, 162, 82, .12) 0%, rgba(206, 162, 82, 0) 34%),
    linear-gradient(180deg, rgba(21, 17, 15, .985) 0%, rgba(9, 8, 7, .995) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 28px 70px rgba(0,0,0,.55),
    0 0 28px rgba(178, 39, 39, .22),
    0 0 0 1px rgba(206, 162, 82, .08);
}

.restockModalClose{
  position:absolute;
  top:14px;
  right:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(206, 162, 82, .18);
  background:rgba(255,255,255,.03);
  color:#e6c980;
  font-size:24px;
  line-height:1;
  box-shadow:none;
}

.restockModalClose:hover,
.restockModalClose:focus-visible{
  border-color:rgba(226, 188, 107, .32);
  background:rgba(255,255,255,.06);
}

.restockModalEyebrow,
.restockModalTitle,
.restockModalProduct{
  background:linear-gradient(180deg, #f3e7bf 0%, #d9be78 52%, #b88d3c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.restockModalEyebrow{
  margin:0 0 10px;
  text-align:center;
  letter-spacing:.22em;
  font-size:11px;
  font-weight:700;
}

.restockModalTitle{
  margin:0;
  text-align:center;
  font-size:30px;
  line-height:1.04;
}

.restockModalCopy{
  margin:14px auto 8px;
  max-width:380px;
  text-align:center;
  color:rgba(239, 226, 194, .82);
  font-size:14px;
  line-height:1.5;
}

.restockModalProduct{
  margin:0 auto 18px;
  max-width:100%;
  text-align:center;
  font-size:19px;
  line-height:1.2;
  font-weight:600;
  overflow-wrap:anywhere;
}

.restockModalForm{
  display:grid;
  gap:12px;
}

.restockModalInput{
  width:100%;
  min-height:54px;
  border-radius:16px;
  border:1px solid rgba(206, 162, 82, .20);
  background:linear-gradient(180deg, rgba(29, 23, 19, .95) 0%, rgba(17, 13, 11, .98) 100%);
  padding:0 16px;
  color:var(--lux-cream);
  text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 0 18px rgba(206, 162, 82, .10);
}

.restockModalInput::placeholder{
  color:rgba(224, 186, 112, .62);
}

.restockModalInput:focus{
  border-color:rgba(226, 188, 107, .36);
  box-shadow:0 0 0 1px rgba(226, 188, 107, .14), 0 0 22px rgba(226, 188, 107, .12), inset 0 1px 0 rgba(255,255,255,.05);
}

.restockModalSubmit{
  min-height:52px;
  border-radius:16px;
  border:1px solid rgba(206, 162, 82, .24) !important;
  background:
    radial-gradient(circle at top, rgba(206, 162, 82, .16) 0%, rgba(206, 162, 82, 0) 38%),
    linear-gradient(180deg, rgba(24, 19, 16, .98) 0%, rgba(12, 10, 8, .99) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 26px rgba(0,0,0,.30),
    0 0 20px rgba(154, 28, 28, .18) !important;
}

.restockModalSubmit .btnText{
  letter-spacing:.15em;
  font-size:12px;
  font-weight:700;
  background:linear-gradient(180deg, #f3e7bf 0%, #d9be78 52%, #b88d3c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.restockModalForm.isLoading .restockModalSubmit,
.restockModalForm.isLoading .restockModalInput{
  opacity:.92;
}

.restockModalMessage{
  min-height:20px;
  text-align:center;
  font-size:12px;
  line-height:1.4;
  color:rgba(239, 226, 194, .78);
}

.restockModalMessage.isError{
  color:#ffb8b8;
}

.restockModalMessage.isSuccess{
  color:#ddffd7;
}


body.storeProduct .restockSubscribeMeta--detail{
  margin-bottom:14px;
}

body.storeProduct .restockSubscribeTrigger--detail{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:52px !important;
  padding:14px 18px !important;
  border-radius:16px !important;
  border:1px solid rgba(206, 162, 82, .28) !important;
  background:
    radial-gradient(circle at top, rgba(206, 162, 82, .14) 0%, rgba(206, 162, 82, 0) 38%),
    linear-gradient(180deg, rgba(23, 18, 16, .98) 0%, rgba(12, 10, 9, .99) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(206, 162, 82, .05),
    0 12px 24px rgba(0,0,0,.28),
    0 0 20px rgba(137, 24, 24, .16) !important;
  overflow:hidden !important;
}

body.storeProduct .restockSubscribeTrigger--detail::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(90deg, rgba(206, 162, 82, .14), rgba(206, 162, 82, 0) 42%, rgba(206, 162, 82, .08) 100%) !important;
  pointer-events:none !important;
}

body.storeProduct .restockSubscribeTrigger--detail .btnText{
  position:relative !important;
  z-index:1 !important;
  width:100% !important;
  text-align:center !important;
  white-space:normal !important;
  line-height:1.15 !important;
  letter-spacing:.11em !important;
  font-size:11px !important;
  font-weight:700 !important;
  background:linear-gradient(180deg, #f3e7bf 0%, #d9be78 52%, #b88d3c 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  text-transform:uppercase !important;
}

body.storeProduct .restockSubscribeTrigger--detail:hover,
body.storeProduct .restockSubscribeTrigger--detail:focus-visible{
  transform:translateY(-1px) !important;
  border-color:rgba(226, 188, 107, .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(226, 188, 107, .12),
    0 16px 30px rgba(0,0,0,.32),
    0 0 24px rgba(171, 42, 42, .20) !important;
}

body.storeProduct .restockSubscribeTrigger--detail.isLoading{
  opacity:.92 !important;
}

body.storeProduct .restockSubscribeTrigger--detail.isSubscribed{
  border-color:rgba(103, 185, 113, .48) !important;
  background:linear-gradient(180deg, rgba(28, 79, 40, .98) 0%, rgba(18, 51, 27, .99) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(103, 185, 113, .16),
    0 14px 26px rgba(0,0,0,.30),
    0 0 22px rgba(69, 166, 86, .24) !important;
}

body.storeProduct .restockSubscribeTrigger--detail.isSubscribed .btnText{
  background:none !important;
  -webkit-text-fill-color:#e8ffe6 !important;
  color:#e8ffe6 !important;
}

body.storeProduct .restockSubscribeTrigger--detail.isError{
  border-color:rgba(210, 88, 88, .54) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(210, 88, 88, .18),
    0 14px 26px rgba(0,0,0,.30),
    0 0 22px rgba(176, 43, 43, .22) !important;
}

body.storeProduct .restockSubscribeTrigger--detail.isError .btnText{
  background:none !important;
  -webkit-text-fill-color:#ffcccc !important;
  color:#ffcccc !important;
}

@media (max-width: 640px){
  .restockModal{
    padding:14px;
  }

  .restockModalDialog{
    padding:24px 16px 18px;
    border-radius:20px;
  }

  .restockModalTitle{
    font-size:24px;
  }

  .restockModalProduct{
    font-size:17px;
  }

  .restockModalCopy{
    font-size:13px;
  }

  .restockModalInput,
  .restockModalSubmit{
    min-height:50px;
  }

  body.storeIndex .card.productCard .restockSubscribeTrigger .btnText,
  body.storeIndex .featuredShowcase .productCard--featured .restockSubscribeTrigger .btnText,
  body.storeIndex .hotSellerShowcase .productCard--hotSeller .restockSubscribeTrigger .btnText,
  body.storeProduct .restockSubscribeTrigger--detail .btnText{
    font-size:10px !important;
    letter-spacing:.09em !important;
  }
}


/* v2026-03-07 restock modal animation + adaptive card title spacing */
body.storeIndex .card.productCard .cardTitle,
body.storeIndex .featuredShowcase .productCard--featured .cardTitle,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .cardTitle{
  min-height:0 !important;
  margin:0 !important;
}

body.storeIndex .card.productCard .cardMeta,
body.storeIndex .featuredShowcase .productCard--featured .cardMeta,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .cardMeta{
  min-height:0 !important;
  margin-top:0 !important;
}

body.storeIndex .card.productCard .cardBody,
body.storeIndex .featuredShowcase .productCard--featured .cardBody,
body.storeIndex .hotSellerShowcase .productCard--hotSeller .cardBody{
  gap:8px !important;
}

.restockModal{
  opacity:0;
  pointer-events:none;
  overscroll-behavior:contain;
  transition:opacity .28s ease;
}

.restockModal.isVisible,
.restockModal.isClosing{
  pointer-events:auto;
}

.restockModal.isVisible{
  opacity:1;
}

.restockModalBackdrop{
  opacity:0;
  transition:opacity .28s ease;
}

.restockModalDialog{
  opacity:0;
  transform:translate3d(0, 26px, 0) scale(.975);
  transform-origin:center center;
  transition:
    opacity .3s ease,
    transform .34s cubic-bezier(.22, 1, .36, 1),
    box-shadow .3s ease,
    border-color .3s ease;
  will-change:transform, opacity;
}

.restockModal.isVisible .restockModalBackdrop,
.restockModal.isClosing .restockModalBackdrop{
  opacity:1;
}

.restockModal.isVisible .restockModalDialog{
  opacity:1;
  transform:translate3d(0, 0, 0) scale(1);
}

.restockModal.isClosing .restockModalBackdrop{
  opacity:0;
}

.restockModal.isClosing .restockModalDialog{
  opacity:0;
  transform:translate3d(0, 16px, 0) scale(.985);
}

.restockModalForm.isSuccess .restockModalInput,
.restockModalForm.isSuccess .restockModalSubmit{
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
}

.restockModalInput,
.restockModalSubmit,
.restockModalMessage{
  transition:opacity .22s ease, transform .22s ease, box-shadow .22s ease, border-color .22s ease, color .22s ease, background .22s ease;
}

.restockModalMessage{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  border-radius:16px;
  border:1px solid transparent;
  background:rgba(255,255,255,.015);
}

.restockModalMessage:empty{
  min-height:18px;
  padding:0;
  border-color:transparent;
  background:transparent;
}

.restockModalMessage.isSuccess{
  border-color:rgba(110, 188, 120, .34);
  background:linear-gradient(180deg, rgba(24, 64, 33, .92) 0%, rgba(17, 42, 23, .98) 100%);
  box-shadow:0 0 0 1px rgba(110, 188, 120, .12), 0 0 22px rgba(73, 168, 88, .18);
  color:#e8ffe6;
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.restockModalMessage.isError{
  border-color:rgba(208, 88, 88, .30);
  background:linear-gradient(180deg, rgba(68, 24, 24, .92) 0%, rgba(48, 17, 17, .98) 100%);
  box-shadow:0 0 0 1px rgba(208, 88, 88, .10), 0 0 22px rgba(178, 44, 44, .12);
}

.restockModalClose,
.restockModalSubmit,
.restockSubscribeTrigger,
body.storeProduct .restockSubscribeTrigger--detail{
  touch-action:manipulation;
}

.restockModalInput{
  font-size:16px !important;
  -webkit-text-size-adjust:100%;
}

@media (prefers-reduced-motion: reduce){
  .restockModal,
  .restockModalBackdrop,
  .restockModalDialog,
  .restockModalInput,
  .restockModalSubmit,
  .restockModalMessage{
    transition:none !important;
  }
}

@media (max-width: 640px){
  .restockModalDialog{
    transform:translate3d(0, 18px, 0) scale(.985);
  }

  .restockModalInput{
    font-size:16px !important;
  }

  .restockModalMessage{
    min-height:46px;
    font-size:12px;
  }
}


/* ── V213 STOCK BADGE POP TUNEUP ───────────────────────────────────────────
   Only Sold out + Low stock pills.
   Roughly 20% larger with stronger contrast so they read faster on product media.
   ------------------------------------------------------------------------- */
body.storeIndex .card.productCard .cardMediaOverlay .badgeOut,
body.storeIndex .card.productCard .cardMediaOverlay .badgeLow,
body.storeIndex .card.productCard .cardMediaOverlay .badgeManualLow,
body.storeProduct .mediaOverlayBadges .badgeOut,
body.storeProduct .mediaOverlayBadges .badgeLow,
body.storeProduct .mediaOverlayBadges .badgeManualLow{
  padding: 8px 14px !important;
  gap: 8px !important;
  min-height: 31px !important;
  transform: translateZ(0) !important;
}

body.storeIndex .card.productCard .cardMediaOverlay .badgeOut .badgeText,
body.storeIndex .card.productCard .cardMediaOverlay .badgeLow .badgeText,
body.storeIndex .card.productCard .cardMediaOverlay .badgeManualLow .badgeText,
body.storeProduct .mediaOverlayBadges .badgeOut .badgeText,
body.storeProduct .mediaOverlayBadges .badgeLow .badgeText,
body.storeProduct .mediaOverlayBadges .badgeManualLow .badgeText{
  font-size: clamp(0.65rem, 0.24vw + 0.57rem, 0.79rem) !important;
  line-height: 1 !important;
}

body.storeIndex .card.productCard .cardMediaOverlay .badgeOut,
body.storeProduct .mediaOverlayBadges .badgeOut{
  filter: drop-shadow(0 0 10px rgba(220, 52, 52, 0.78))
          drop-shadow(0 0 26px rgba(170, 26, 26, 0.52)) !important;
}

body.storeIndex .card.productCard .cardMediaOverlay .badgeOut::before,
body.storeProduct .mediaOverlayBadges .badgeOut::before{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.16) 0%,
      rgba(255,255,255,0.05) 48%,
      rgba(0,0,0,0.30) 100%),
    linear-gradient(135deg,
      rgba(222, 66, 66, 0.44) 0%,
      rgba(148, 26, 26, 0.28) 52%,
      rgba(64, 10, 10, 0.34) 100%),
    rgba(8, 4, 4, 0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 150, 150, 0.18),
    inset 0 -1px 0 rgba(0,0,0,0.84),
    0 0 0 1px rgba(232, 92, 92, 0.34),
    0 8px 24px rgba(150, 18, 18, 0.50) !important;
}

body.storeIndex .card.productCard .cardMediaOverlay .badgeOut .badgeText,
body.storeProduct .mediaOverlayBadges .badgeOut .badgeText{
  letter-spacing: 0.18em !important;
  background: linear-gradient(135deg,
    #FFC0C0 0%, #FF9090 26%, #F05555 52%, #FF8F8F 78%, #FFD2D2 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.storeIndex .card.productCard .cardMediaOverlay .badgeLow,
body.storeIndex .card.productCard .cardMediaOverlay .badgeManualLow,
body.storeProduct .mediaOverlayBadges .badgeLow,
body.storeProduct .mediaOverlayBadges .badgeManualLow{
  filter: drop-shadow(0 0 10px rgba(232, 187, 83, 0.72))
          drop-shadow(0 0 24px rgba(186, 126, 20, 0.42)) !important;
}

body.storeIndex .card.productCard .cardMediaOverlay .badgeLow::before,
body.storeIndex .card.productCard .cardMediaOverlay .badgeManualLow::before,
body.storeProduct .mediaOverlayBadges .badgeLow::before,
body.storeProduct .mediaOverlayBadges .badgeManualLow::before{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.18) 0%,
      rgba(255,255,255,0.06) 50%,
      rgba(0,0,0,0.28) 100%),
    linear-gradient(135deg,
      rgba(247, 216, 141, 0.34) 0%,
      rgba(207, 156, 56, 0.26) 45%,
      rgba(84, 56, 10, 0.30) 100%),
    rgba(8, 7, 4, 0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 196, 0.18),
    inset 0 -1px 0 rgba(0,0,0,0.84),
    0 0 0 1px rgba(232, 194, 112, 0.28),
    0 8px 24px rgba(120, 82, 12, 0.40) !important;
}

body.storeIndex .card.productCard .cardMediaOverlay .badgeLow .badgeText,
body.storeIndex .card.productCard .cardMediaOverlay .badgeManualLow .badgeText,
body.storeProduct .mediaOverlayBadges .badgeLow .badgeText,
body.storeProduct .mediaOverlayBadges .badgeManualLow .badgeText{
  letter-spacing: 0.17em !important;
  background: linear-gradient(135deg,
    #FFF4D6 0%, #F7E7BB 26%, #E6C676 54%, #F2DEAA 80%, #FFF5DA 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.storeIndex .card.productCard .cardMediaOverlay .badgeLow .badgeIco,
body.storeIndex .card.productCard .cardMediaOverlay .badgeManualLow .badgeIco,
body.storeProduct .mediaOverlayBadges .badgeLow .badgeIco,
body.storeProduct .mediaOverlayBadges .badgeManualLow .badgeIco{
  width: 14px !important;
  height: 14px !important;
}

body.storeIndex .card.productCard .cardMediaOverlay .badgeLow .badgeIco::before,
body.storeIndex .card.productCard .cardMediaOverlay .badgeManualLow .badgeIco::before,
body.storeProduct .mediaOverlayBadges .badgeLow .badgeIco::before,
body.storeProduct .mediaOverlayBadges .badgeManualLow .badgeIco::before{
  border-left-width: 7px !important;
  border-right-width: 7px !important;
  border-bottom-width: 13px !important;
  border-bottom-color: rgba(255, 239, 196, 0.98) !important;
}

body.storeIndex .card.productCard .cardMediaOverlay .badgeLow .badgeIco::after,
body.storeIndex .card.productCard .cardMediaOverlay .badgeManualLow .badgeIco::after,
body.storeProduct .mediaOverlayBadges .badgeLow .badgeIco::after,
body.storeProduct .mediaOverlayBadges .badgeManualLow .badgeIco::after{
  font-size: 9px !important;
}

@media (max-width: 640px){
  body.storeIndex .card.productCard .cardMediaOverlay .badgeOut,
  body.storeIndex .card.productCard .cardMediaOverlay .badgeLow,
  body.storeIndex .card.productCard .cardMediaOverlay .badgeManualLow,
  body.storeProduct .mediaOverlayBadges .badgeOut,
  body.storeProduct .mediaOverlayBadges .badgeLow,
  body.storeProduct .mediaOverlayBadges .badgeManualLow{
    padding: 7px 12px !important;
    min-height: 29px !important;
  }

  body.storeIndex .card.productCard .cardMediaOverlay .badgeOut .badgeText,
  body.storeIndex .card.productCard .cardMediaOverlay .badgeLow .badgeText,
  body.storeIndex .card.productCard .cardMediaOverlay .badgeManualLow .badgeText,
  body.storeProduct .mediaOverlayBadges .badgeOut .badgeText,
  body.storeProduct .mediaOverlayBadges .badgeLow .badgeText,
  body.storeProduct .mediaOverlayBadges .badgeManualLow .badgeText{
    font-size: clamp(0.60rem, 0.20vw + 0.56rem, 0.72rem) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE STOREFRONT REFINEMENT 2026-04-10 v2
   Replaces the desktop topbar on the storefront, tightens spacing,
   and removes the boxed active state from the bottom nav.
   ═══════════════════════════════════════════════════════════════════ */

.mobileUtilBar {
  display: none;
}

@media (max-width: 767px) {
  .topbar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.storeIndex .mobileUtilBar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin: 0 0 6px;
    padding: max(8px, env(safe-area-inset-top, 0px)) 10px 6px;
    background: linear-gradient(180deg, rgba(10,10,10,0.985) 0%, rgba(4,4,4,0.995) 100%);
    border-bottom: 1px solid rgba(var(--gold-rgb, 183,155,100), 0.10);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.03),
      0 14px 34px rgba(0,0,0,0.42);
  }

  body.storeIndex .mobileUtilLink {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(0.68rem, 2.8vw, 0.82rem);
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    background: linear-gradient(135deg,
      rgba(247,239,223,0.98) 0%,
      rgba(215,183,121,0.94) 42%,
      rgba(166,132,74,0.92) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  body.storeIndex .mobileUtilLink + .mobileUtilLink {
    border-left: 1px solid rgba(255,255,255,0.05);
  }

  body.storeIndex .mobileUtilLink:active {
    filter: brightness(0.92);
  }

  body.storeIndex main.wrap,
  body.storeIndex .wrap {
    padding-top: 6px !important;
  }

  .mobileNav {
    height: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    background: linear-gradient(180deg, rgba(9,9,9,0.985) 0%, rgba(3,3,3,0.995) 100%) !important;
    border-top: 1px solid rgba(var(--gold-rgb, 183,155,100), 0.10) !important;
    box-shadow: 0 -1px 0 rgba(255,255,255,0.03), 0 -18px 54px rgba(0,0,0,0.94) !important;
  }

  .mobileNavInner {
    height: 68px !important;
  }

  .mobileNavItem {
    gap: 5px !important;
  }

  .mobileNavItem::before {
    top: auto !important;
    bottom: 5px !important;
    left: 26% !important;
    right: 26% !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(var(--gold-rgb, 183,155,100), 0.00) 10%,
      rgba(240,214,160,0.90) 50%,
      rgba(var(--gold-rgb, 183,155,100), 0.00) 90%,
      transparent 100%) !important;
    opacity: 0 !important;
  }

  .mobileNavItem.mobileNavActive::before {
    opacity: 1 !important;
  }

  .mobileNavIconWrap,
  .mobileNavItem.mobileNavActive .mobileNavIconWrap {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .mobileNavLabel {
    font-family: 'Outfit', -apple-system, sans-serif !important;
    font-size: clamp(0.66rem, 2.5vw, 0.76rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    opacity: 0.86 !important;
    background: linear-gradient(135deg,
      rgba(230,225,217,0.78) 0%,
      rgba(195,187,177,0.70) 48%,
      rgba(138,132,125,0.76) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }

  .mobileNavItem.mobileNavActive .mobileNavLabel {
    opacity: 1 !important;
    background: linear-gradient(135deg,
      rgba(250,238,213,0.98) 0%,
      rgba(213,176,108,0.96) 40%,
      rgba(164,128,67,0.92) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }

  .mobileNavItem svg {
    stroke: rgba(198,191,181,0.50) !important;
    filter: none !important;
  }

  .mobileNavItem.mobileNavActive svg {
    stroke: rgba(219,183,119,0.92) !important;
    filter: drop-shadow(0 0 6px rgba(219,183,119,0.18)) !important;
  }

  .mobileNavBadge {
    min-width: 17px !important;
    height: 17px !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #e6ddd2, #c9bca9) !important;
    color: #000 !important;
  }
}