/* ═══════════════════════════════════════════════════════════════════════════
   PALETTE 3 — OBSIDIAN TECH (Dark + Electric Blue)
   Source: design-mockups/final-design-master-palette3.html
   Loaded LAST in index.html — overrides theme-overrides.css and main.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───── 0. PALETTE 3 RAW TOKENS ───── */
:root {
  --p3-bg:        #060810 !important;   /* main background */
  --p3-surface:   #0c1020 !important;   /* card / surface */
  --p3-surface-2: #0f1430 !important;   /* elevated surface */
  --p3-surface-3: #1a2240 !important;   /* deepest surface (header etc) */
  --p3-soft-black:#020409 !important;   /* page body */
  --p3-ink:       #ffffff !important;
  --p3-ink-2:     #c8d0e0 !important;
  --p3-ink-3:     #6a7080 !important;
  --p3-blue:      #38B6FF !important;   /* electric blue accent */
  --p3-blue-2:    #5cc8ff !important;
  --p3-blue-glow: rgba(56,182,255,0.25) !important;
  --p3-line:      #1a2238 !important;
  --p3-line-2:    #2a3450 !important;
  --p3-shadow:    0 8px 24px rgba(0,0,0,0.4) !important;
  --p3-glow:      0 0 24px rgba(56,182,255,0.3) !important;
}

/* Google fonts — Inter + DM Mono + Playfair italic */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=DM+Mono:wght@400;500&family=Playfair+Display:ital@1&display=swap');

/* ───── 1. MAP THEME VARIABLES → PALETTE 3 ───── */
:root,
[data-theme="dark"],
[data-theme="light"],
[data-theme="palette3"],
[data-theme="obsidian"],
html {
  /* Backgrounds */
  --bg-primary:          #060810 !important;
  --bg-secondary:        #0c1020 !important;
  --bg-tertiary:         #0f1430 !important;
  --bg-elevated:         #1a2240 !important;
  --bg-dark:             #060810 !important;
  --bg-gradient-start:   #060810 !important;
  --bg-gradient-mid:     #0c1020 !important;
  --bg-gradient-end:     #060810 !important;
  --bg-gradient-accent:  #0f1430 !important;
  --bg-gradient:         #0c1020 !important;

  /* Text */
  --text-primary:        #ffffff !important;
  --text-secondary:      #c8d0e0 !important;
  --text-tertiary:       #6a7080 !important;
  --text-on-accent:      #000000 !important;

  /* Accents */
  --accent-gold:         #38B6FF !important;
  --accent-gold-2:       #5cc8ff !important;
  --accent-primary:      #38B6FF !important;
  --accent-blue:         #38B6FF !important;
  --accent-glow:         rgba(56,182,255,0.30) !important;

  /* Glass */
  --glass-bg:            rgba(56,182,255,0.04) !important;
  --glass-border:        #1a2238 !important;
  --glass-border-hover:  #38B6FF !important;
  --glass-blur:          12px !important;
  --glass-saturate:      140% !important;

  /* Borders */
  --border-subtle:       1px solid #1a2238 !important;
  --border-default:      1px solid #2a3450 !important;
  --border-accent:       1px solid #38B6FF !important;

  /* Shadows */
  --shadow-sm:           0 2px 8px rgba(0,0,0,0.4) !important;
  --shadow-md:           0 8px 24px rgba(0,0,0,0.4) !important;
  --shadow-lg:           0 0 24px rgba(56,182,255,0.3) !important;

  /* Cards */
  --card-bg:             #0c1020 !important;
  --card-border:         #2a3450 !important;
  --card-border-hover:   #38B6FF !important;

  /* Header */
  --header-bg:           rgba(6,8,16,0.92) !important;
  --header-border:       #2a3450 !important;

  /* Inputs */
  --input-bg:            #0c1020 !important;
  --input-border:        #2a3450 !important;
  --input-border-focus:  #38B6FF !important;
  --input-text:          #ffffff !important;
  --input-placeholder:   #6a7080 !important;

  /* Body fonts */
  --font-body:           'Inter', system-ui, sans-serif !important;
  --font-display:        'Inter', system-ui, sans-serif !important;
  --font-mono:           'DM Mono', 'Menlo', monospace !important;
  --font-italic:         'Playfair Display', serif !important;
}

/* ───── 2. BASE BODY ───── */
html, body {
  background: #020409 !important;
  color: #ffffff !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}
#app, main, .home-page, .brand-page, .category-page, .product-page, .search-page, .trust-page {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}
* { box-sizing: border-box; }

/* ───── 3. HEADER (top live feed bar + main nav) ───── */
.lx-wa-announce {
  background: linear-gradient(90deg, #060810 0%, #0c1020 50%, #060810 100%) !important;
  border-bottom: 1px solid #1a2238 !important;
  color: #c8d0e0 !important;
  font-family: 'DM Mono', monospace !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 9px 14px !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Subtle blue gradient overlay sweeping right */
.lx-wa-announce::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 120px !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(56,182,255,0.12)) !important;
  pointer-events: none !important;
}
/* Pulsing live indicator dot prepended to whole bar */
.lx-wa-announce::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 14px !important;
  transform: translateY(-50%) !important;
  width: 6px !important;
  height: 6px !important;
  background: #38B6FF !important;
  border-radius: 50% !important;
  box-shadow: 0 0 6px #38B6FF, 0 0 12px rgba(56,182,255,0.6) !important;
  animation: lwa-pulse 1.6s infinite !important;
  z-index: 2 !important;
}
@keyframes lwa-pulse {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50% { opacity: 0.5; transform: translateY(-50%) scale(0.7); }
}
.lx-wa-announce-text {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #c8d0e0 !important;
  position: relative !important;
  z-index: 1 !important;
  padding-left: 14px !important;
}
.lx-wa-announce-text svg {
  color: #38B6FF !important;
  fill: #38B6FF !important;
}
.lx-wa-announce-cta {
  background: rgba(56,182,255,0.10) !important;
  border: 1px solid #38B6FF !important;
  color: #38B6FF !important;
  border-radius: 4px !important;
  font-family: 'DM Mono', monospace !important;
  letter-spacing: 1.4px !important;
  font-weight: 700 !important;
  font-size: 0.62rem !important;
  padding: 4px 10px !important;
  white-space: nowrap !important;
  position: relative !important;
  z-index: 1 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 8px rgba(56,182,255,0.2) !important;
  transition: all 0.2s !important;
}
.lx-wa-announce-cta:hover,
.lx-wa-announce:hover .lx-wa-announce-cta {
  background: #38B6FF !important;
  color: #000 !important;
  box-shadow: 0 0 16px rgba(56,182,255,0.5) !important;
}

.site-header,
header.site-header {
  background: rgba(6,8,16,0.92) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  border-bottom: 1px solid #2a3450 !important;
}
.header-brand .brand-name-white { color: #ffffff !important; font-weight: 900 !important; letter-spacing: -0.5px !important; text-transform: uppercase !important; }
.header-brand .brand-name-gold { color: #38B6FF !important; font-weight: 900 !important; letter-spacing: -0.5px !important; text-transform: uppercase !important; }
.menu-toggle, .search-toggle, .theme-toggle {
  background: transparent !important;
  border: 1px solid #2a3450 !important;
  border-radius: 4px !important;
  color: #c8d0e0 !important;
}
.menu-toggle:hover, .search-toggle:hover {
  border-color: #38B6FF !important;
  color: #38B6FF !important;
  box-shadow: 0 0 12px rgba(56,182,255,0.3) !important;
}

/* Trust ribbon ticker — electric blue, NOT gold */
.trust-ribbon, [class*="trust-ribbon"], #trust-ribbon-container {
  background: #0c1020 !important;
  border-top: 1px solid #1a2238 !important;
  border-bottom: 1px solid #1a2238 !important;
}
:root .ri-icon,
[data-theme="dark"] .ri-icon,
[data-theme="light"] .ri-icon,
.ri-icon {
  stroke: #38B6FF !important;
  color: #38B6FF !important;
}
:root .ri-text,
[data-theme="dark"] .ri-text,
[data-theme="light"] .ri-text,
.ri-text {
  color: #c8d0e0 !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 0.62rem !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
:root .ri-dot,
[data-theme="dark"] .ri-dot,
[data-theme="light"] .ri-dot,
.ri-dot {
  background: #38B6FF !important;
  box-shadow:
    0 0 5px #38B6FF,
    0 0 10px rgba(56,182,255,0.5) !important;
}

/* ───── 4. HERO ───── */
.home-hero {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(56,182,255,0.12), transparent 60%),
    radial-gradient(circle at 20% 80%, rgba(56,182,255,0.06), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(56,182,255,0.08), transparent 40%),
    #060810 !important;
  border-bottom: 1px solid #1a2238 !important;
  text-align: center !important;
  padding: 56px 22px 40px !important;
  position: relative !important;
  overflow: hidden !important;
}
.home-hero::before { display: none !important; }
.home-hero::after { display: none !important; }

.hero-eyebrow {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.62rem !important;
  color: #38B6FF !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
  display: block !important;
}
.hero-eyebrow::before, .hero-eyebrow::after { display: none !important; }
.hero-eyebrow::before {
  content: '// ' !important;
  display: inline !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
}

.hero-headline {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(28px, 6vw, 42px) !important;
  line-height: 1.05 !important;
  letter-spacing: -1.2px !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}
.hero-headline em {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: none !important;
  font-size: 0.7em !important;
  color: #c8d0e0 !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  margin-top: 4px !important;
}

.hero-subline {
  color: #c8d0e0 !important;
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-size: 0.85rem !important;
  line-height: 1.55 !important;
  margin: 14px auto 22px !important;
  max-width: 320px !important;
  padding-top: 0 !important;
}
.hero-subline::before { display: none !important; }

/* Hero brand chips → spec-sheet style */
.hero-brands-strip {
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 0 20px !important;
}
.hero-brand-chip {
  flex-direction: row !important;
  background: #0c1020 !important;
  border: 1px solid #2a3450 !important;
  border-radius: 4px !important;
  padding: 8px 14px !important;
  gap: 8px !important;
  transition: all 0.25s !important;
}
.hero-brand-chip:hover {
  border-color: #38B6FF !important;
  box-shadow: 0 0 12px rgba(56,182,255,0.3) !important;
  background: #0f1430 !important;
}
.hero-brand-chip img {
  filter: brightness(0) invert(1) !important;
  width: 18px !important;
  height: 18px !important;
}
.hero-brand-chip span {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.66rem !important;
  color: #c8d0e0 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* Hero CTA — electric blue framed */
.hero-cta-wa {
  background: linear-gradient(135deg, #0c1020 0%, #0f1430 100%) !important;
  border: 1px solid #38B6FF !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  font-size: 0.82rem !important;
  padding: 14px 24px !important;
  box-shadow: 0 0 24px rgba(56,182,255,0.18), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.hero-cta-wa:hover {
  box-shadow: 0 0 32px rgba(56,182,255,0.4) !important;
  background: linear-gradient(135deg, #0f1430 0%, #1a2240 100%) !important;
}
.hero-cta-divider {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.66rem !important;
  color: #6a7080 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  font-style: normal !important;
}
.hero-cta-divider::before { content: '// ' !important; color: #38B6FF !important; }

/* Hide social row in hero (kept consistent with v2) */
.hero-social-row, .hero-social, .profile-social, #profile-social { display: none !important; }

/* ───── 5. TRUST STATS BAR ───── */
.trust-stats-bar {
  background: #0c1020 !important;
  border-top: 1px solid #1a2238 !important;
  border-bottom: 1px solid #1a2238 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 18px 22px !important;
  box-shadow: none !important;
}
.trust-stat-text {
  color: #c8d0e0 !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.trust-stat-text strong {
  color: #38B6FF !important;
  font-weight: 500 !important;
  font-size: 1.05em !important;
}
.trust-stat-icon, .trust-stat-icon svg, .trust-stat-icon--star {
  color: #38B6FF !important;
  stroke: #38B6FF !important;
}
.trust-stat-divider {
  background: #2a3450 !important;
}
.trust-stats-cta-row {
  background: #0c1020 !important;
  border-top: 1px solid #1a2238 !important;
}
.trust-stats-cta-link {
  font-family: 'DM Mono', monospace !important;
  color: #38B6FF !important;
  border: 1px solid #2a3450 !important;
  border-radius: 4px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}
.trust-stats-cta-link:hover {
  border-color: #38B6FF !important;
  box-shadow: 0 0 12px rgba(56,182,255,0.3) !important;
  color: #5cc8ff !important;
}

/* ───── 6. SEARCH BAR ───── */
.home-search-section { padding: 18px 16px !important; background: #060810 !important; }
.search-trigger-bar {
  background: #0c1020 !important;
  border: 1px solid #2a3450 !important;
  border-radius: 4px !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
}
.search-trigger-bar:hover {
  border-color: #38B6FF !important;
  box-shadow: 0 0 16px rgba(56,182,255,0.25) !important;
}
.search-placeholder-text {
  color: #6a7080 !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}
.search-icon-svg, .search-icon-btn { color: #38B6FF !important; }

/* ───── 7. LIVE FEED BAR ───── */
.live-feed-bar {
  background: #0c1020 !important;
  border: 1px solid #1a2238 !important;
  border-radius: 4px !important;
  color: #c8d0e0 !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.5px !important;
}
.live-feed-bar > span:first-child,
[style*="background:#25D366"],
[style*="background: #25D366"] {
  background: #38B6FF !important;
  box-shadow: 0 0 8px #38B6FF !important;
  animation: p3-pulse 2s infinite !important;
}
@keyframes p3-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ───── 8. SECTION HEADERS (everywhere) ───── */
.section-header h2,
.home-page h2,
.cs-title,
.home-guarantees-section h2,
section h2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.5rem !important;
  text-transform: uppercase !important;
  letter-spacing: -0.3px !important;
  color: #ffffff !important;
  padding-left: 12px !important;
  text-align: left !important;
}
.section-subtitle, .desc, .section-header p {
  color: #6a7080 !important;
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-size: 0.78rem !important;
  margin-top: 4px !important;
}

/* Customer Stories title — mono eyebrow style */
.cs-title {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 1.5px !important;
  color: #38B6FF !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  border-left: none !important;
  padding-left: 0 !important;
}
.cs-title::before { content: '// ' !important; color: #38B6FF !important; }
.cs-verified-check { display: none !important; }

/* See All link */
.cs-see-all, [class*="view-all"], [class*="see-all"] {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.66rem !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: #38B6FF !important;
  border: 1px solid #2a3450 !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  background: transparent !important;
  text-decoration: none !important;
}
.cs-see-all:hover, [class*="view-all"]:hover {
  border-color: #38B6FF !important;
  background: rgba(56,182,255,0.10) !important;
  box-shadow: 0 0 10px rgba(56,182,255,0.3) !important;
}

/* ───── 9. CUSTOMER STORIES (RECEIPTS) ───── */
/* Filter pills now ENABLED (Obsidian Tech receipt design uses them) */
.cs-gallery { padding: 0 16px !important; }
.cs-track {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  grid-auto-rows: 130px !important;
  gap: 10px !important;
}
.cs-track .cs-card:nth-child(1)  { grid-column: span 3 !important; grid-row: span 2 !important; }
.cs-track .cs-card:nth-child(2)  { grid-column: span 2 !important; }
.cs-track .cs-card:nth-child(3)  { grid-column: span 3 !important; }
.cs-track .cs-card:nth-child(4)  { grid-column: span 2 !important; }
.cs-track .cs-card:nth-child(5)  { grid-column: span 3 !important; }
.cs-track .cs-card:nth-child(6)  { grid-column: span 2 !important; grid-row: span 2 !important; }
.cs-track .cs-card:nth-child(7)  { grid-column: span 2 !important; }
.cs-track .cs-card:nth-child(8)  { grid-column: span 2 !important; }
.cs-track .cs-card:nth-child(9)  { grid-column: span 2 !important; }
.cs-track .cs-card:nth-child(10) { grid-column: span 2 !important; }
.cs-track .cs-card:nth-child(11) { grid-column: span 2 !important; }
.cs-track .cs-card:nth-child(12) { grid-column: span 2 !important; }
.cs-track .cs-card:nth-child(13) { grid-column: span 4 !important; }
.cs-track .cs-card:nth-child(14) { grid-column: span 2 !important; }
.cs-track .cs-card:nth-child(15) { grid-column: span 2 !important; }
.cs-track .cs-card:nth-child(16) { grid-column: span 2 !important; }
.cs-track .cs-card:nth-child(n+17) { display: none !important; }
@media (max-width: 768px) {
  .cs-track {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 130px !important;
  }
  .cs-track .cs-card { grid-column: span 1 !important; grid-row: span 1 !important; }
  .cs-track .cs-card:nth-child(1) { grid-column: span 2 !important; }
}

.cs-card {
  background: #fafafa !important;
  border: 1px solid #2a3450 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
}
.cs-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 2px !important;
  background: #38B6FF !important;
  z-index: 2 !important;
}
.cs-card:hover {
  border-color: #38B6FF !important;
  box-shadow: 0 0 20px rgba(56,182,255,0.25) !important;
  transform: translateY(-2px) !important;
}
.cs-card img, .cs-card video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Receipt badges */
.cs-badge-tl {
  background: #3a7a4a !important;        /* PAID green */
  color: #ffffff !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  border-radius: 2px !important;
  padding: 2px 6px !important;
}
.cs-badge-tl.cs-badge-purple {
  background: #1a3a5a !important;        /* DELIVERED deep blue */
}
.cs-badge-bl {
  background: #38B6FF !important;        /* LOVED IT electric blue */
  color: #000000 !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  border-radius: 2px !important;
  padding: 2px 6px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CATEGORIES — Number-first stat tiles (DISTINCT from footer)
   Big mono numbers as primary visual, small uppercase category name below
   ═══════════════════════════════════════════════════════════════════════════ */
.cat-section {
  background: #060810 !important;
  border-top: 1px solid #1a2238 !important;
  border-bottom: 1px solid #1a2238 !important;
  padding: 36px 18px 36px !important;
}
.cat-header {
  margin-bottom: 18px !important;
  text-align: left !important;
}
.cat-eyebrow {
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  color: #38B6FF !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  display: block !important;
  margin-bottom: 6px !important;
}
.cat-h2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(20px, 4.5vw, 28px) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.4px !important;
  color: #ffffff !important;
  border-left: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
.cat-desc {
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  color: #6a7080 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
}

/* Tile grid — 5 tiles desktop, 2 mobile (last spans full) */
.cat-tiles {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 10px !important;
}
@media (max-width: 900px) {
  .cat-tiles { grid-template-columns: repeat(2, 1fr) !important; }
  .cat-tile--cta { grid-column: 1 / -1 !important; }
}

/* The tile itself */
.cat-tile {
  background: #0c1020 !important;
  border: 1px solid #2a3450 !important;
  border-radius: 4px !important;
  padding: 18px 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 0 !important;
  text-decoration: none !important;
  position: relative !important;
  transition: all 0.3s !important;
  overflow: hidden !important;
  min-height: 110px !important;
}
.cat-tile:hover {
  border-color: #38B6FF !important;
  background: #0f1430 !important;
  box-shadow: 0 0 24px rgba(56,182,255,0.3) !important;
}

/* // 01 mono prefix — top */
.ct-num {
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  color: #38B6FF !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  display: block !important;
}

/* Hide the unused stat / unit elements (in case any older HTML still has them) */
.ct-stat, .ct-unit { display: none !important; }

/* Divider line — between // num and name */
.ct-divider {
  display: block !important;
  width: 32px !important;
  height: 1px !important;
  background: #38B6FF !important;
  margin: 10px 0 !important;
  opacity: 0.6 !important;
  transition: width 0.3s !important;
}
.cat-tile:hover .ct-divider {
  width: 48px !important;
  opacity: 1 !important;
}

/* Category name — now the primary visual */
.ct-name {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: #ffffff !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  display: block !important;
  line-height: 1.1 !important;
}
.cat-tile--cta .ct-name {
  font-size: 18px !important;
}

/* Arrow — bottom-right corner */
.ct-arrow {
  position: absolute !important;
  bottom: 12px !important;
  right: 14px !important;
  font-family: 'DM Mono', monospace !important;
  color: #38B6FF !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  transition: transform 0.3s !important;
}
.cat-tile:hover .ct-arrow {
  transform: translateX(4px) !important;
}

/* "Search All" CTA tile */
.cat-tile--cta {
  background: linear-gradient(135deg, rgba(56,182,255,0.10) 0%, rgba(56,182,255,0.02) 100%) !important;
  border-color: #38B6FF !important;
}
.cat-tile--cta::before { width: 4px !important; }
.cat-tile--cta .ct-stat { color: #38B6FF !important; }
.cat-tile--cta .ct-name { color: #38B6FF !important; }
.cat-tile--cta:hover {
  background: linear-gradient(135deg, rgba(56,182,255,0.20) 0%, rgba(56,182,255,0.06) 100%) !important;
  box-shadow: 0 0 32px rgba(56,182,255,0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BENTO CATEGORIES SECTION — (no longer used — kept for compatibility)
   ═══════════════════════════════════════════════════════════════════════════ */
.bnt-section {
  background: #060810 !important;
  border-top: 1px solid #1a2238 !important;
  border-bottom: 1px solid #1a2238 !important;
  padding: 36px 18px 36px !important;
  position: relative !important;
}
.bnt-section-header {
  margin-bottom: 18px !important;
  text-align: left !important;
}
.bnt-eyebrow {
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  color: #38B6FF !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  display: block !important;
}
.bnt-h2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(20px, 4.5vw, 28px) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.4px !important;
  color: #ffffff !important;
  border-left: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
.bnt-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: #6a7080 !important;
  margin-top: 4px !important;
}

/* Bento grid — 2-col on mobile, 4-col on desktop, no empty cells */
.bnt-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-auto-rows: 130px !important;
  gap: 8px !important;
  margin-top: 12px !important;
}
@media (min-width: 768px) {
  .bnt-grid { grid-template-columns: repeat(4, 1fr) !important; grid-auto-rows: 150px !important; }
}

/* Single cell */
.bnt-cell {
  background: #0c1020 !important;
  border: 1px solid #2a3450 !important;
  border-radius: 4px !important;
  padding: 36px 14px 14px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  text-decoration: none !important;
  transition: all 0.3s !important;
  min-height: 110px !important;
}
.bnt-cell:hover {
  border-color: #38B6FF !important;
  box-shadow: 0 0 24px rgba(56,182,255,0.3) !important;
  transform: translateY(-2px) !important;
}

/* Variants */
.bnt-cell.bnt-full { grid-column: 1 / -1 !important; min-height: 110px !important; }
.bnt-cell.bnt-dark { background: linear-gradient(135deg, #0f1430, #1a2240) !important; }
.bnt-cell.bnt-cta {
  background: linear-gradient(135deg, rgba(56,182,255,0.12) 0%, rgba(56,182,255,0.04) 100%) !important;
  border-color: #38B6FF !important;
  box-shadow: inset 0 0 20px rgba(56,182,255,0.10) !important;
}
.bnt-cell.bnt-cta:hover {
  background: linear-gradient(135deg, rgba(56,182,255,0.22) 0%, rgba(56,182,255,0.08) 100%) !important;
  box-shadow: 0 0 32px rgba(56,182,255,0.4) !important;
}

/* Top-right corner bracket */
.bnt-corner {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 10px !important;
  height: 10px !important;
  border-top: 1px solid #38B6FF !important;
  border-right: 1px solid #38B6FF !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
}
.bnt-cell:hover .bnt-corner { opacity: 1 !important; width: 14px !important; height: 14px !important; transition: all 0.3s; }

/* Mono number prefix */
.bnt-num {
  font-family: 'DM Mono', monospace !important;
  font-size: 9px !important;
  color: #38B6FF !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  margin-bottom: auto !important;  /* push to top */
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  font-weight: 500 !important;
}

/* Optional icon (only on tall cells) */
.bnt-icon {
  position: absolute !important;
  top: 14px !important;
  right: 28px !important;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid #38B6FF !important;
  border-radius: 4px !important;
  background: rgba(56,182,255,0.08) !important;
  color: #38B6FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 12px rgba(56,182,255,0.2) !important;
}
.bnt-icon svg { width: 20px !important; height: 20px !important; }
.bnt-cell:hover .bnt-icon { background: #38B6FF !important; color: #000 !important; }

/* Title — bottom of cell */
.bnt-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  margin-top: 8px !important;
}
.bnt-tall .bnt-title { font-size: 16px !important; }
.bnt-full .bnt-title { font-size: 16px !important; }
.bnt-cta .bnt-title { color: #38B6FF !important; }

.bnt-count {
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  color: #6a7080 !important;
  letter-spacing: 0.6px !important;
  margin-top: 4px !important;
  text-transform: uppercase !important;
}
.bnt-meta {
  font-family: 'DM Mono', monospace !important;
  font-size: 9px !important;
  color: #38B6FF !important;
  letter-spacing: 1px !important;
  margin-top: 4px !important;
  text-transform: uppercase !important;
  opacity: 0.7 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RECEIPTS, NOT REVIEWS — Customer Stories redesigned
   ═══════════════════════════════════════════════════════════════════════════ */
.obs-receipts {
  background: #060810 !important;
  padding: 36px 16px !important;
  border-top: 1px solid #1a2238 !important;
}
.obs-receipts-header {
  position: relative !important;
  margin-bottom: 18px !important;
  padding-right: 90px !important;  /* space for See All */
}
.obs-receipts-eyebrow {
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  color: #38B6FF !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  display: block !important;
}
.obs-receipts-h2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(22px, 5vw, 30px) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.4px !important;
  color: #ffffff !important;
  border-left: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  line-height: 1.05 !important;
}
.obs-receipts-desc {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-size: 13px !important;
  color: #c8d0e0 !important;
  margin-top: 6px !important;
}
.obs-receipts-seeall {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
}

/* Filter pills — show, mono style */
.obs-receipts .cs-filter-pills,
.home-customer-stories .cs-filter-pills {
  display: flex !important;
  gap: 6px !important;
  padding: 0 0 14px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.obs-receipts .cs-filter-pills::-webkit-scrollbar,
.home-customer-stories .cs-filter-pills::-webkit-scrollbar { display: none !important; }
.cs-pill {
  padding: 6px 12px !important;
  background: transparent !important;
  border: 1px solid #2a3450 !important;
  border-radius: 3px !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  color: #c8d0e0 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.cs-pill:hover { border-color: #38B6FF !important; color: #38B6FF !important; }
.cs-pill.active {
  background: #38B6FF !important;
  color: #000 !important;
  border-color: #38B6FF !important;
  font-weight: 700 !important;
}

/* Receipt cards — tighter uniform grid (no asymmetric magazine) */
.obs-receipts .cs-track,
.home-customer-stories .cs-track {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-auto-rows: 220px !important;
  gap: 8px !important;
}
@media (min-width: 600px) {
  .obs-receipts .cs-track,
  .home-customer-stories .cs-track {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (min-width: 1024px) {
  .obs-receipts .cs-track,
  .home-customer-stories .cs-track {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
.obs-receipts .cs-track .cs-card,
.home-customer-stories .cs-track .cs-card {
  grid-column: auto !important;
  grid-row: auto !important;
}
.obs-receipts .cs-track .cs-card:nth-child(n+13),
.home-customer-stories .cs-track .cs-card:nth-child(n+13) {
  display: none !important;
}

/* ── Big stats strip ABOVE the cards ── */
.obs-receipts-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  padding: 14px 0 16px !important;
  margin-bottom: 14px !important;
  border-top: 1px solid #1a2238 !important;
  border-bottom: 1px solid #1a2238 !important;
}
@media (max-width: 600px) {
  .obs-receipts-stats { grid-template-columns: repeat(2, 1fr) !important; }
}
.orst-cell {
  background: transparent !important;
  border: 1px solid #2a3450 !important;
  border-radius: 4px !important;
  padding: 12px 10px !important;
  position: relative !important;
  text-align: left !important;
}
.orst-num {
  font-family: 'DM Mono', monospace !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  color: #38B6FF !important;
  letter-spacing: -0.3px !important;
  display: block !important;
  margin-bottom: 4px !important;
}
.orst-lbl {
  font-family: 'DM Mono', monospace !important;
  font-size: 9px !important;
  color: #6a7080 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
.orst-dot {
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  background: #38B6FF !important;
  border-radius: 50% !important;
  margin-right: 6px !important;
  box-shadow: 0 0 8px #38B6FF !important;
  animation: orst-pulse 2s infinite !important;
  vertical-align: middle !important;
}
@keyframes orst-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Receipt card — clean lab-specimen style ── */
.cs-card {
  background: #0c1020 !important;
  border: 1px solid #2a3450 !important;
  border-radius: 4px !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
  height: 100% !important;
  width: 100% !important;
}

/* Top blue scan stripe */
.cs-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: linear-gradient(90deg, #38B6FF 0%, #5cc8ff 50%, #38B6FF 100%) !important;
  z-index: 5 !important;
  pointer-events: none !important;
  box-shadow: 0 0 8px rgba(56,182,255,0.5) !important;
}

/* Auto-incrementing reference number — top left */
.cs-card::after {
  content: '#LW-' counter(card-counter) !important;
  counter-increment: card-counter !important;
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  background: rgba(6,8,16,0.92) !important;
  border: 1px solid #38B6FF !important;
  color: #38B6FF !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.8px !important;
  padding: 3px 7px !important;
  border-radius: 2px !important;
  z-index: 5 !important;
  pointer-events: none !important;
  box-shadow: 0 0 6px rgba(56,182,255,0.4) !important;
}
.cs-track { counter-reset: card-counter 22847 !important; }

/* Image fills card */
.cs-card img,
.cs-card video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  filter: brightness(0.94) saturate(0.88) !important;
  transition: filter 0.3s, transform 0.5s !important;
}
.cs-card:hover img,
.cs-card:hover video {
  filter: brightness(1.05) saturate(1) !important;
}

/* Hover */
.cs-card:hover {
  border-color: #38B6FF !important;
  box-shadow: 0 0 28px rgba(56,182,255,0.4) !important;
  transform: translateY(-3px) !important;
}

/* Status badge — top right (PAID / DELIVERED / LOVED IT) */
.cs-badge-tl {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 5 !important;
  background: #3a7a4a !important;
  color: #ffffff !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 3px 7px !important;
  border-radius: 2px !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  box-shadow: 0 0 6px rgba(58,122,74,0.5) !important;
}
.cs-badge-tl.cs-badge-purple {
  background: #1a3a5a !important;
  box-shadow: 0 0 6px rgba(26,58,90,0.6) !important;
}

/* Bottom badge — LOVED IT or status */
.cs-badge-bl {
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  background: #38B6FF !important;
  color: #000000 !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 3px 7px !important;
  border-radius: 2px !important;
  border-radius: 2px !important;
  z-index: 4 !important;
  box-shadow: 0 0 8px rgba(56,182,255,0.5) !important;
}
.home-quick-categories {
  background: #060810 !important;
  border-top: 1px solid #1a2238 !important;
  border-bottom: 1px solid #1a2238 !important;
  padding: 36px 16px 32px !important;
}
.hqc-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin-bottom: 22px !important;
}
.hqc-eyebrow {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.66rem !important;
  font-weight: 500 !important;
  color: #38B6FF !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.hqc-eyebrow::before { content: '// ' !important; }
.hqc-rule {
  height: 1px !important;
  width: 80px !important;
  background: linear-gradient(to right, #38B6FF, transparent) !important;
  display: inline-block !important;
}

/* Grid layout */
.hqc-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 10px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}
@media (max-width: 900px) {
  .hqc-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .hqc-card--all { grid-column: 1 / -1 !important; }
}
@media (max-width: 480px) {
  .hqc-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .hqc-card--all { grid-column: 1 / -1 !important; }
}

/* The category card */
.hqc-card {
  background: #0c1020 !important;
  border: 1px solid #2a3450 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 18px 10px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  position: relative !important;
  transition: all 0.3s !important;
  min-height: 100px !important;
  overflow: visible !important;
}
.hqc-card::before {
  content: '' !important;
  position: absolute !important;
  top: -1px !important;
  left: -1px !important;
  width: 10px !important;
  height: 10px !important;
  border-top: 1px solid #38B6FF !important;
  border-left: 1px solid #38B6FF !important;
  pointer-events: none !important;
  transition: width 0.3s ease, height 0.3s ease !important;
}
.hqc-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  right: -1px !important;
  width: 10px !important;
  height: 10px !important;
  border-bottom: 1px solid #38B6FF !important;
  border-right: 1px solid #38B6FF !important;
  pointer-events: none !important;
  transition: width 0.3s ease, height 0.3s ease !important;
}
.hqc-card:hover {
  background: #0f1430 !important;
  border-color: #38B6FF !important;
  box-shadow: 0 0 24px rgba(56,182,255,0.3) !important;
  transform: translateY(-4px) !important;
}
.hqc-card:hover::before, .hqc-card:hover::after {
  width: 16px !important;
  height: 16px !important;
}

/* Icon — proper size (was missing!) */
.hqc-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 4px !important;
  background: rgba(56,182,255,0.10) !important;
  border: 1px solid #38B6FF !important;
  color: #38B6FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 12px rgba(56,182,255,0.2) !important;
  transition: all 0.3s !important;
}
.hqc-icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}
.hqc-card:hover .hqc-icon {
  background: #38B6FF !important;
  color: #000000 !important;
  box-shadow: 0 0 16px rgba(56,182,255,0.5) !important;
}

/* Label */
.hqc-label {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.72rem !important;
  color: #ffffff !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}
.hqc-card:hover .hqc-label { color: #38B6FF !important; }

/* Special "Search All" card */
.hqc-card--all { background: rgba(56,182,255,0.06) !important; border-color: #38B6FF !important; }
.hqc-card--all .hqc-icon { background: #38B6FF !important; color: #000 !important; }
.hqc-card--all .hqc-label { color: #38B6FF !important; }

/* ───── 11. CATEGORY SECTIONS (Bags / Watches / Shoes / Jewelry) ───── */
.home-category-section {
  padding: 30px 18px !important;
  background: #060810 !important;
  border-bottom: 1px solid #1a2238 !important;
  overflow: visible !important;
}

/* Mobile: shorten the top WhatsApp announce bar text + nowrap */
@media (max-width: 768px) {
  .lx-wa-announce {
    padding: 7px 10px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    gap: 8px !important;
  }
  .lx-wa-announce-text {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }
  .lx-wa-announce-text > span:not(:first-child) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0 !important;
  }
  .lx-wa-announce-text > span:not(:first-child)::after {
    content: 'CHAT WITH US ON WHATSAPP' !important;
    font-size: 0.65rem !important;
    color: inherit !important;
    font-family: 'DM Mono', monospace !important;
    letter-spacing: 1px !important;
  }
  .lx-wa-announce-cta {
    flex-shrink: 0 !important;
  }
}
@media (max-width: 420px) {
  .lx-wa-announce-text > span:not(:first-child)::after {
    content: 'WHATSAPP US' !important;
  }
}
.home-category-section .section-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 18px !important;
  gap: 16px !important;
}
.home-category-section .section-header h2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(20px, 4vw, 28px) !important;
  letter-spacing: -0.5px !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
  border-left: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
.home-category-section .section-subtitle {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-size: 13px !important;
  color: #c8d0e0 !important;
  margin-top: 6px !important;
  letter-spacing: 0.2px !important;
  font-weight: 400 !important;
}
.home-category-section .view-all-link {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: #38B6FF !important;
  border: 1px solid #2a3450 !important;
  border-radius: 4px !important;
  padding: 8px 14px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  transition: all 0.25s !important;
}
.home-category-section .view-all-link:hover {
  border-color: #38B6FF !important;
  background: rgba(56,182,255,0.10) !important;
  box-shadow: 0 0 12px rgba(56,182,255,0.3) !important;
}
/* Mobile: clean 2-column grid (no horizontal scroll/clipping) */
.brand-links-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.brand-links-grid > .brand-link-card {
  flex: 0 0 130px !important;
}
.brand-links-grid::-webkit-scrollbar { display: none !important; }

/* Hide cards beyond 6 on mobile (3 rows max) */
@media (max-width: 767px) {
  .brand-links-grid > .brand-link-card:nth-child(n+7) {
    display: none !important;
  }
}

/* Tablet: 3 columns */
@media (min-width: 600px) and (max-width: 1023px) {
  .brand-links-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .brand-links-grid > .brand-link-card:nth-child(n+7) { display: flex !important; }
  .brand-links-grid > .brand-link-card:nth-child(n+10) { display: none !important; }
}

/* Desktop: auto-fill grid */
@media (min-width: 1024px) {
  .brand-links-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  }
  .brand-links-grid > .brand-link-card { display: flex !important; }
}

/* Force dark obsidian background on brand cards (override any leftover light styles) */
.brand-link-card,
[data-theme="dark"] .brand-link-card,
[data-theme="light"] .brand-link-card {
  background: #0c1020 !important;
  border: 1px solid #2a3450 !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  padding: 14px 8px 12px !important;
  text-align: center !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 130px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.brand-link-card span {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.7rem !important;
}
.brand-link-card:hover {
  background: #0f1430 !important;
  border-color: #38B6FF !important;
  box-shadow: 0 0 20px rgba(56,182,255,0.3) !important;
}
.brand-link-card .new-badge {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
}
.brand-link-card span:last-child,
.brand-link-card span {
  color: #ffffff !important;
  background: transparent !important;
}
.brand-link-card {
  background: #0c1020 !important;
  border: 1px solid #2a3450 !important;
  border-radius: 4px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s !important;
  padding: 14px !important;
}
.brand-link-card .new-badge {
  background: #38B6FF !important;
  color: #000 !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 0.55rem !important;
  letter-spacing: 1.2px !important;
  font-weight: 700 !important;
  border-radius: 2px !important;
  padding: 2px 6px !important;
}
.brand-link-card:hover {
  border-color: #38B6FF !important;
  box-shadow: 0 0 24px rgba(56,182,255,0.3) !important;
  transform: translateY(-2px) !important;
}
.brand-link-logo {
  width: 100% !important;
  height: 80px !important;
  overflow: hidden !important;
}
.brand-link-logo img {
  filter: brightness(0) invert(1) !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
.brand-link-card:hover .brand-link-logo img { /* no zoom */ }
.brand-link-card span {
  font-family: 'Inter', sans-serif !important;
  color: #ffffff !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  display: block !important;
  margin-top: 8px !important;
}

/* ───── 12. PRODUCT / BRAND LISTING CARDS ───── */
/* Reset CSS counter for product grids */
.products-grid, .related-grid { counter-reset: lot-counter 22847 !important; }

.brand-page .product-card,
.category-page .product-card,
.search-page .product-card,
.related-products .product-card {
  background: #0c1020 !important;
  border: 1px solid #2a3450 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: all 0.3s !important;
  counter-increment: lot-counter !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Top blue scan stripe with glow */
.brand-page .product-card::before,
.category-page .product-card::before,
.search-page .product-card::before,
.related-products .product-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: linear-gradient(90deg, #38B6FF, #5cc8ff, #38B6FF) !important;
  z-index: 4 !important;
  box-shadow: 0 0 8px rgba(56,182,255,0.5) !important;
  pointer-events: none !important;
  display: block !important;
}

/* Top-right corner bracket */
.brand-page .product-card::after,
.category-page .product-card::after,
.search-page .product-card::after,
.related-products .product-card::after {
  content: '' !important;
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 10px !important;
  height: 10px !important;
  border-top: 1px solid #38B6FF !important;
  border-right: 1px solid #38B6FF !important;
  z-index: 4 !important;
  pointer-events: none !important;
  opacity: 0.7 !important;
  transition: width 0.3s, height 0.3s, opacity 0.3s !important;
  display: block !important;
}

.brand-page .product-card:hover,
.category-page .product-card:hover,
.search-page .product-card:hover,
.related-products .product-card:hover {
  border-color: #38B6FF !important;
  box-shadow: 0 0 24px rgba(56,182,255,0.3) !important;
  transform: translateY(-3px) !important;
}
.brand-page .product-card:hover::after,
.category-page .product-card:hover::after,
.search-page .product-card:hover::after,
.related-products .product-card:hover::after {
  width: 14px !important;
  height: 14px !important;
  opacity: 1 !important;
}

/* Image area with REF badge overlay */
.product-image {
  background: linear-gradient(135deg, #0f1430, #1a2240) !important;
  border-bottom: 1px solid #2a3450 !important;
  aspect-ratio: 1 !important;
  position: relative !important;
}
.product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Lot reference number badge — REMOVED per user request */
.product-image::before { display: none !important; }

/* "// LIVE" status indicator — bottom-left of image with pulsing dot */
.product-image::after {
  content: '' !important;
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  width: 7px !important;
  height: 7px !important;
  background: #38B6FF !important;
  border-radius: 50% !important;
  box-shadow: 0 0 6px #38B6FF, 0 0 12px rgba(56,182,255,0.6) !important;
  animation: prod-live-pulse 1.6s infinite !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
@keyframes prod-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* Info section */
.product-info {
  background: #0c1020 !important;
  padding: 12px 12px 0 !important;
  border-top: 1px solid #1a2238 !important;
  text-align: left !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}
.product-info::before { display: none !important; }

/* "REF · " mono prefix — REMOVED per user request */
.product-info h3::before { display: none !important; }

.product-info h3 {
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  line-height: 1.2 !important;
  margin: 0 0 10px !important;
  text-align: left !important;
}

/* "VIEW LOT →" footer bar with chevron + spec dots */
.product-info::after {
  content: '◆  VIEW LOT  ››' !important;
  display: block !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  color: #38B6FF !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  border-top: 1px solid #1a2238 !important;
  padding: 8px 0 10px !important;
  margin-top: auto !important;
  text-align: left !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  transition: color 0.2s, letter-spacing 0.2s !important;
}
.brand-page .product-card:hover .product-info::after,
.category-page .product-card:hover .product-info::after,
.search-page .product-card:hover .product-info::after,
.related-products .product-card:hover .product-info::after {
  color: #5cc8ff !important;
  letter-spacing: 1.6px !important;
}

/* ─── ADDED GRAPHICS ─── */

/* Left vertical blue stripe on every product card */
.brand-page .product-card,
.category-page .product-card,
.search-page .product-card,
.related-products .product-card {
}

/* AUTHENTICATED checkmark badge — top-right of image (above corner bracket) */
.product-image {
  background-image: linear-gradient(135deg, transparent 92%, rgba(56,182,255,0.4) 92%, rgba(56,182,255,0.4) 100%) !important;
  background-color: #0f1430 !important;
}

/* Hover scan-line animation overlay */
.product-image {
  position: relative !important;
}
.brand-page .product-card .product-image,
.category-page .product-card .product-image,
.search-page .product-card .product-image,
.related-products .product-card .product-image {
  /* keep as-is, scan line below */
}
/* Use ::before of card itself for scan-line effect on hover */
.brand-page .product-card,
.category-page .product-card,
.search-page .product-card,
.related-products .product-card {
  position: relative !important;
}

/* Add a hover scan-line via a wrapper trick — use background animation */
.brand-page .product-card:hover .product-image,
.category-page .product-card:hover .product-image,
.search-page .product-card:hover .product-image,
.related-products .product-card:hover .product-image {
  box-shadow: inset 0 0 0 1px rgba(56,182,255,0.4), inset 0 60% 0 -40% rgba(56,182,255,0.25) !important;
}

/* Product name — add letter-spacing hover */
.brand-page .product-card:hover .product-info h3,
.category-page .product-card:hover .product-info h3,
.search-page .product-card:hover .product-info h3,
.related-products .product-card:hover .product-info h3 {
  letter-spacing: 0.6px !important;
  color: #ffffff !important;
  transition: letter-spacing 0.3s !important;
}

/* Spec dots: tiny ▸ ▸ ▸ between title and footer (using a pseudo on h3) */
.product-info h3 {
  position: relative !important;
}
.product-info h3::after {
  content: '· · ·' !important;
  display: block !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  color: rgba(56,182,255,0.5) !important;
  letter-spacing: 4px !important;
  margin-top: 8px !important;
  text-align: left !important;
}

/* Top-left "// LOT · LIVE" mini chip */
.product-image {
  position: relative !important;
}

/* Category page brand cards */
.category-page .brand-card-minimal,
.brands-grid .brand-card-minimal,
a.brand-card-minimal {
  background: #0c1020 !important;
  border: 1px solid #2a3450 !important;
  border-radius: 4px !important;
  padding: 18px 14px !important;
  position: relative !important;
  box-shadow: none !important;
}
.category-page .brand-card-minimal::before,
.brands-grid .brand-card-minimal::before {
  border-top: 1px solid #38B6FF !important;
  border-left: 1px solid #38B6FF !important;
  width: 10px !important; height: 10px !important;
}
.category-page .brand-card-minimal::after,
.brands-grid .brand-card-minimal::after {
  border-bottom: 1px solid #38B6FF !important;
  border-right: 1px solid #38B6FF !important;
  width: 10px !important; height: 10px !important;
}
.category-page .brand-card-minimal:hover,
.brands-grid .brand-card-minimal:hover {
  border-color: #38B6FF !important;
  box-shadow: 0 0 24px rgba(56,182,255,0.3) !important;
}
.category-page .brand-card-info h3,
.brands-grid .brand-card-info h3 {
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: -0.2px !important;
}
.category-page .brand-card-info p,
.brands-grid .brand-card-info p {
  color: #6a7080 !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.5px !important;
  font-style: normal !important;
}
.brand-logo-container img,
[data-theme="dark"] .brand-logo-container img,
[data-theme="light"] .brand-logo-container img,
[data-theme="dark"] .brand-link-logo img,
[data-theme="light"] .brand-link-logo img {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

/* ───── 13. GRID CONTROLS ───── */
.grid-controls { display: flex !important; gap: 6px !important; }
.grid-btn {
  width: 40px !important; height: 40px !important;
  background: transparent !important;
  border: 1px solid #2a3450 !important;
  border-radius: 4px !important;
  color: #6a7080 !important;
}
.grid-btn:hover { border-color: #38B6FF !important; color: #38B6FF !important; box-shadow: 0 0 12px rgba(56,182,255,0.3) !important; }
.grid-btn.active {
  background: rgba(56,182,255,0.12) !important;
  border-color: #38B6FF !important;
  color: #38B6FF !important;
  box-shadow: 0 0 12px rgba(56,182,255,0.3) !important;
}
.mini-grid-toggle {
  display: inline-flex !important;
  background: transparent !important;
  border: 1px solid #2a3450 !important;
  border-radius: 4px !important;
  color: #c8d0e0 !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
  gap: 6px !important;
}
.mini-grid-toggle:hover { border-color: #38B6FF !important; color: #38B6FF !important; }
.mini-grid-toggle.active { background: #38B6FF !important; border-color: #38B6FF !important; color: #000 !important; }
.mini-grid-toggle.active .mini-icon { display: none !important; }
.mini-grid-toggle:not(.active) .normal-icon { display: none !important; }

/* Per-page select */
.per-page-selector {
  font-family: 'DM Mono', monospace !important;
  color: #6a7080 !important;
  font-size: 0.65rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.per-page-select {
  background: #0c1020 !important;
  border: 1px solid #2a3450 !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 0.7rem !important;
  padding: 8px 12px !important;
}

/* Respect grid-cols choice on all screens */
.products-grid.grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.products-grid.grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.products-grid.grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
.products-grid.mini-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
@media (min-width: 600px) { .products-grid.mini-grid { grid-template-columns: repeat(6, 1fr) !important; } }
@media (min-width: 1024px) { .products-grid.mini-grid { grid-template-columns: repeat(8, 1fr) !important; } }

/* ───── 14. BREADCRUMBS ───── */
.breadcrumbs, nav.breadcrumbs {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.66rem !important;
  letter-spacing: 1px !important;
  color: #6a7080 !important;
  text-transform: uppercase !important;
  padding: 16px 18px !important;
}
.breadcrumbs a { color: #c8d0e0 !important; text-decoration: none !important; }
.breadcrumbs a:hover { color: #38B6FF !important; }
.breadcrumbs .current, .breadcrumbs span.current { color: #38B6FF !important; }
.breadcrumbs .separator { color: #2a3450 !important; }
@media (max-width: 768px) {
  .breadcrumbs, nav.breadcrumbs, #breadcrumbs-container { display: none !important; }
}

/* ───── 15. PRODUCT DETAIL PAGE ───── */
.product-page .product-title,
h1.product-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: -0.4px !important;
  line-height: 1.05 !important;
}
.product-page .product-title em {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #38B6FF !important;
  text-transform: none !important;
}
.product-category {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.7rem !important;
  color: #6a7080 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
}

.related-products {
  background: #0c1020 !important;
  border-top: 1px solid #1a2238 !important;
  padding: 40px 16px 32px !important;
}
.related-products::before {
  content: '// MORE LOTS' !important;
  display: block !important;
  text-align: center !important;
  color: #38B6FF !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 12px !important;
}
.related-products h2 {
  color: #ffffff !important;
  text-align: center !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  border-left: none !important;
  padding-left: 0 !important;
}
.related-products .product-image { background: linear-gradient(135deg, #0f1430, #1a2240) !important; }

/* ───── 16. FOOTER (Obsidian Tech footer is rendered inline by footer.js) ───── */
#footer-container { background: #060810 !important; }
/* Hide any old palette-12 footer styles if they leak through */
.p12-site-footer, footer.p12-site-footer { background: transparent !important; }

/* ───── 17. WHATSAPP FAB → Electric blue ───── */
.whatsapp-fab {
  background: #060810 !important;
  border: 1px solid #38B6FF !important;
  color: #38B6FF !important;
  box-shadow: 0 0 0 0 rgba(56,182,255,0.5), 0 8px 24px rgba(0,0,0,0.4) !important;
  animation: p3-wa-pulse 4s infinite !important;
}
@keyframes p3-wa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56,182,255,0.5), 0 8px 24px rgba(0,0,0,0.4); }
  50% { box-shadow: 0 0 0 12px rgba(56,182,255,0), 0 8px 24px rgba(0,0,0,0.4); }
}
.whatsapp-fab:hover {
  background: #38B6FF !important;
  border-color: #38B6FF !important;
  color: #000 !important;
  box-shadow: 0 0 32px rgba(56,182,255,0.6) !important;
  transform: translateY(-2px) !important;
}
.whatsapp-fab svg { fill: currentColor !important; }
.wa-fab-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: inherit !important;
  font-weight: 700 !important;
}
.whatsapp-chat-bubble, #whatsapp-chat-bubble { display: none !important; }
#whatsapp-fab-container, #whatsapp-fab-wrapper, .whatsapp-fab-wrapper {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Hide gift promo + the floating "1" badge on FAB */
#lx-gift-card, #lx-gift-banner, .lx-gift-card, .lx-gift-banner, .lx-fab-badge { display: none !important; }

/* ───── 18. RECENTLY VIEWED BANNER (sticky bottom Order Now) ───── */
#rv-banner {
  background: linear-gradient(135deg, #0a1830 0%, #1a2c50 100%) !important;
  border: 1px solid #38B6FF !important;
  border-radius: 4px !important;
  box-shadow: 0 0 24px rgba(56,182,255,0.25), 0 8px 24px rgba(0,0,0,0.5) !important;
  color: #ffffff !important;
  padding: 12px 14px !important;
}
#rv-banner-thumb {
  background: rgba(56,182,255,0.10) !important;
  border: 1px solid #38B6FF !important;
  border-radius: 4px !important;
}
#rv-banner-thumb svg.rv-lock { color: #38B6FF !important; }
#rv-banner-name {
  font-family: 'Inter', sans-serif !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  font-size: 0.82rem !important;
}
#rv-banner-status {
  font-family: 'DM Mono', monospace !important;
  color: #6a7080 !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}
.rv-status-dot { background: #38B6FF !important; box-shadow: 0 0 6px #38B6FF !important; }
@keyframes rv-pulse {
  0% { box-shadow: 0 0 0 0 rgba(56,182,255,0.7); }
  70% { box-shadow: 0 0 0 8px rgba(56,182,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(56,182,255,0); }
}
#rv-banner-cta {
  background: #38B6FF !important;
  color: #000000 !important;
  border-radius: 4px !important;
  font-family: 'DM Mono', monospace !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  border: none !important;
}
#rv-banner-cta:hover {
  background: #5cc8ff !important;
  box-shadow: 0 0 16px rgba(56,182,255,0.6) !important;
}
#rv-banner-close { color: #6a7080 !important; }
#rv-banner-close:hover { color: #38B6FF !important; background: rgba(56,182,255,0.10) !important; }

/* ───── 19. REVIEW BADGE (redesigned) ───── */
.tb-badge {
  background: linear-gradient(160deg, #0a0e1c 0%, #0d1428 60%, #0f1a35 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(56,182,255,0.45) !important;
  border-left: 3px solid #38B6FF !important;
  border-radius: 0 10px 10px 0 !important;
  box-shadow: 0 4px 24px rgba(56,182,255,0.18), 0 1px 6px rgba(0,0,0,0.6), inset 0 0 20px rgba(56,182,255,0.04) !important;
  padding: 12px 14px 10px 12px !important;
  min-width: 58px !important;
  align-items: center !important;
}
.tb-badge::after {
  display: none !important;
}
.tb-star {
  color: #38B6FF !important;
  font-size: 15px !important;
  filter: drop-shadow(0 0 5px rgba(56,182,255,0.9)) !important;
}
.tb-rating {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  letter-spacing: -0.5px !important;
}
.tb-count {
  font-family: 'DM Mono', monospace !important;
  color: #38B6FF !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  font-style: normal !important;
  opacity: 0.85 !important;
}
.tb-wrap:hover .tb-badge {
  border-color: #5cc8ff !important;
  border-left-color: #5cc8ff !important;
  box-shadow: 0 4px 32px rgba(56,182,255,0.4), 0 1px 6px rgba(0,0,0,0.6), inset 0 0 24px rgba(56,182,255,0.08) !important;
}
.tb-peek {
  background: #060810 !important;
  border: 1px solid #38B6FF !important;
  border-left: none !important;
  border-radius: 0 4px 4px 0 !important;
  color: #c8d0e0 !important;
  font-family: 'DM Mono', monospace !important;
}

/* ───── 20. EMAIL CAPTURE / OTHER SECTIONS ───── */
.email-capture-section, .home-email-section, [class*="email-capture"] {
  background: #0c1020 !important;
  border-top: 1px solid #1a2238 !important;
  border-bottom: 1px solid #1a2238 !important;
}
[class*="email-capture"] input,
.home-email-section input {
  background: #060810 !important;
  border: 1px solid #2a3450 !important;
  color: #ffffff !important;
  font-family: 'DM Mono', monospace !important;
}

/* ───── 21. GENERIC TYPOGRAPHY OVERRIDES ───── */
.brand-name-white, .brand-name-gold { font-family: 'Inter', sans-serif !important; }
.brand-name-gold, [style*="color:#D4AF37"], [style*="color: #D4AF37"], [style*="color:gold"] { color: #38B6FF !important; }
[style*="background:#25D366"], [style*="background: #25D366"], [style*="background-color:#25D366"] { background: #38B6FF !important; }
[style*="border-color:#25D366"] { border-color: #38B6FF !important; }

/* ───── 22. KILL ANY WHITE/IVORY BACKGROUNDS ANYWHERE ───── */
[style*="background:#f7f1ec"],
[style*="background: #f7f1ec"],
[style*="background:#fbf6f1"],
[style*="background: #fbf6f1"],
[style*="background-color:#f7f1ec"],
[style*="background-color: #f7f1ec"] {
  background: #060810 !important;
  background-color: #060810 !important;
}

/* ───── 23. MOBILE-SPECIFIC FIXES ───── */
@media (max-width: 768px) {
  .home-hero { padding: 32px 18px 24px !important; }
  .home-category-section { padding: 24px 14px !important; }
  .home-category-section .section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .home-category-section .view-all-link {
    align-self: flex-start !important;
  }
  .cat-section { padding: 24px 14px !important; }
  .cat-tile { min-height: 100px !important; padding: 14px 12px !important; }
  .ct-name { font-size: 16px !important; }

  /* Page-wide background on mobile (eliminates any stray ivory) */
  body, html, main, .home-page {
    background: #060810 !important;
  }
}