/* ═══════════════════════════════════════════════════════════════
   A7B Jerseys — Aurora Theme
   Canvas #a7b-space renders the Aurora Borealis scene (js/aurora-bg.js)
   All sections semi-transparent so the scene shows through
═══════════════════════════════════════════════════════════════ */

/* ── Body fallback ── */
body {
  background: #080d1c !important;
}

/* ── Aurora canvas — fixed, behind everything ── */
#a7b-space {
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ════════════════════════════════════════
   HEADER & ANNOUNCE BAR
════════════════════════════════════════ */
.announce-bar {
  position: relative;
  z-index: 20;
  background: rgba(4, 16, 28, 0.88) !important;
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid rgba(0, 220, 160, 0.08);
}

.site-header {
  position: relative;
  z-index: 100;
  background: rgba(4, 14, 26, 0.86) !important;
  backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid rgba(0, 220, 160, 0.10);
}

/* ════════════════════════════════════════
   HERO SLIDER — fully transparent
════════════════════════════════════════ */
.hero-slider {
  position: relative;
  z-index: 2;
  background: transparent !important;
}

/* ════════════════════════════════════════
   SECTIONS — semi-transparent
════════════════════════════════════════ */
.pick-section {
  position: relative;
  z-index: 1;
  background: rgba(4, 18, 30, 0.68) !important;
  backdrop-filter: blur(6px);
}

.trust-bar {
  position: relative;
  z-index: 1;
  background: rgba(4, 16, 28, 0.70) !important;
}

.products-carousel-section,
.new-arrivals-section,
.retro-jerseys-section,
.featured-section,
.reveal {
  position: relative;
  z-index: 1;
  background: rgba(4, 16, 28, 0.68) !important;
}

/* Blanket for any other section */
section:not(.team-hero):not(.hero-slider) {
  background: rgba(4, 16, 28, 0.68) !important;
}

/* ════════════════════════════════════════
   CARDS — glassmorphism (Aurora palette)
════════════════════════════════════════ */
.product-card {
  background: rgba(5, 20, 36, 0.80) !important;
  backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid rgba(0, 220, 160, 0.10) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(212, 175, 55, 0.06),
    inset 0 1px 0 rgba(0, 220, 160, 0.07) !important;
}

.trust-card {
  background: rgba(5, 20, 36, 0.76) !important;
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(0, 220, 160, 0.08) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.42) !important;
}

/* ════════════════════════════════════════
   TEAM PAGES
════════════════════════════════════════ */
.team-hero {
  position: relative;
  z-index: 2;
}

.team-info-wrap {
  position: relative;
  z-index: 3;
  background: transparent !important;
}

.team-stats-section,
.team-jerseys-section,
.related-clubs,
.section-jerseys,
[id*="jersey"],
[id*="Jersey"] {
  position: relative;
  z-index: 1;
  background: rgba(4, 16, 28, 0.70) !important;
}

/* ════════════════════════════════════════
   DRAWERS & OVERLAYS
════════════════════════════════════════ */
.backdrop,
.cart-drawer,
.offcanvas,
.search-overlay {
  z-index: 200;
}

.cart-drawer,
.offcanvas {
  background: rgba(4, 16, 28, 0.96) !important;
  backdrop-filter: blur(24px);
  border-left: 1px solid rgba(0, 220, 160, 0.10);
}

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.site-footer,
footer {
  position: relative;
  z-index: 1;
  background: rgba(2, 10, 18, 0.94) !important;
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0, 220, 160, 0.08);
}

/* ════════════════════════════════════════
   MOBILE — lighter overlay, canvas stays
════════════════════════════════════════ */
@media (max-width: 767px) {
  .product-card,
  .trust-card {
    backdrop-filter: none;
    background: rgba(5, 18, 32, 0.90) !important;
  }

  .site-header {
    backdrop-filter: none;
    background: rgba(4, 14, 24, 0.95) !important;
  }
}

/* ════════════════════════════════════════
   REDUCED MOTION — hide canvas
════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #a7b-space { display: none !important; }
  body { background: #08131e !important; }
}