/* ============================================================
   WOW.TECH — NICHE THEME
   Mood: Precision Minimalism
   Ref:  Apple.com · Linear · Vercel · Raycast
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg:        #000000;
  --bg2:       #0a0a0a;
  --bg3:       #111111;
  --bg4:       #1a1a1a;
  --bg5:       #222222;
  --bg-glass:  rgba(0,0,0,0.95);
  --bg-card:   #0d0d0d;

  --text:       #f5f5f7;
  --text-dim:   rgba(245,245,247,0.58);
  --text-muted: rgba(245,245,247,0.30);

  --accent:      #0A84FF;
  --accent-inv:  #000000;
  --red:         #0A84FF;
  --red-dim:     rgba(10,132,255,0.10);
  --red-glow:    rgba(10,132,255,0.22);
  --orange:      #ff9f0a;
  --green:       #30d158;
  --gold:        #ffd60a;

  --border:        rgba(255,255,255,0.08);
  --border-hover:  rgba(255,255,255,0.15);
  --border-accent: rgba(10,132,255,0.25);

  --shadow-sm:   0 1px 6px  rgba(0,0,0,0.60);
  --shadow:      0 4px 24px rgba(0,0,0,0.70);
  --shadow-lg:   0 8px 56px rgba(0,0,0,0.80);
  --shadow-red:  0 6px 28px rgba(10,132,255,0.22);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.60);
  --shadow-card-hover: 0 8px 40px rgba(0,0,0,0.75), 0 0 0 1px rgba(10,132,255,0.14);

  /* Tighter corners — more tech feel */
  --r:      10px;
  --r-lg:   14px;
  --r-xl:   18px;

  --niche-font:      'Inter', -apple-system, sans-serif;
  --niche-font-body: 'Inter', -apple-system, sans-serif;
  --grain-opacity: 0.020;
}

body {
  background: var(--bg) !important;
  font-family: var(--niche-font-body);
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 481px) {
  body::before {
    background:
      radial-gradient(ellipse 55% 55% at 22% 28%, rgba(10,132,255,0.07) 0%, transparent 58%),
      radial-gradient(ellipse 40% 40% at 80% 78%, rgba(10,132,255,0.04) 0%, transparent 55%),
      #000 !important;
    background-color: #000 !important;
  }
  #app-root {
    background: var(--bg) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 40px 120px rgba(0,0,0,0.70) !important;
  }
}

/* ── HERO ─────────────────────────────────────────────────── */
.home-hero {
  background: linear-gradient(180deg,
    rgba(10,132,255,0.05) 0%,
    transparent 100%) !important;
  padding: 28px 16px 20px !important;
}
.home-hero::before {
  background: radial-gradient(circle, rgba(10,132,255,0.10) 0%, transparent 65%) !important;
}
.home-hero::after {
  background: radial-gradient(circle, rgba(10,132,255,0.05) 0%, transparent 60%) !important;
}

.home-greeting {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  opacity: 0.8 !important;
}

.home-title {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: clamp(26px, 7.5vw, 40px) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.14 !important;
  background: linear-gradient(135deg, #f5f5f7 30%, #0A84FF 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.home-counter-chip {
  background: rgba(10,132,255,0.08) !important;
  border-color: rgba(10,132,255,0.18) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
}
.live-dot { background: var(--accent) !important; }

/* ── SECTION TITLES ───────────────────────────────────────── */
.sec-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  letter-spacing: -0.02em !important;
}

/* ── HEADER/NAV ───────────────────────────────────────────── */
#header {
  background: rgba(0,0,0,0.96) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
#bottom-nav {
  background: rgba(0,0,0,0.96) !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}
.nav-item.active { color: var(--accent) !important; }
.nav-item.active .nav-icon::after { background: var(--accent) !important; }

/* ── CARDS ────────────────────────────────────────────────── */
.product-card {
  background: var(--bg-card) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: var(--r-lg) !important;
}
.product-card:hover {
  box-shadow: var(--shadow-card-hover) !important;
  border-color: rgba(10,132,255,0.16) !important;
}
.card-img-wrap { background: #080808 !important; }
.card-brand { font-weight: 500 !important; font-size: 10px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; }

/* ── CHIPS ────────────────────────────────────────────────── */
.niche-fam-chip {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.niche-fam-chip.active {
  background: rgba(10,132,255,0.12) !important;
  border-color: rgba(10,132,255,0.32) !important;
  color: var(--accent) !important;
}

/* ── CHECKOUT / CART ──────────────────────────────────────── */
.cart-checkout-btn {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
#cart-sticky-bar { background: var(--accent) !important; color: #fff !important; }

.cod-banner {
  background: rgba(48,209,88,0.08) !important;
  border-color: rgba(48,209,88,0.22) !important;
  color: #30d158 !important;
}

/* ── SIZE/PRICE ───────────────────────────────────────────── */
.size-chip.active  { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.range-track-fill  { background: var(--accent) !important; }
.price-range-thumb { background: var(--accent) !important; }

/* ── BADGES ───────────────────────────────────────────────── */
.badge-hot  { background: rgba(10,132,255,0.20) !important; color: var(--accent) !important; }
.badge-new  { background: rgba(48,209,88,0.18) !important;  color: #30d158 !important; }
.badge-sale { background: rgba(255,159,10,0.18) !important; color: #ff9f0a !important; }

/* ── SHEETS ───────────────────────────────────────────────── */
.sheet { background: var(--bg2) !important; border-top-color: rgba(255,255,255,0.07) !important; }
.sh-handle { background: rgba(255,255,255,0.10) !important; }

/* ── INPUTS ───────────────────────────────────────────────── */
.form-inp, .checkout-input {
  background: var(--bg3) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: var(--text) !important;
}
.form-inp:focus, .checkout-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(10,132,255,0.16) !important;
}

/* ── SIZE BTN ─────────────────────────────────────────────── */
.size-btn.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* ── SPLASH ───────────────────────────────────────────────── */
#splash { background: #000 !important; }

/* ── BRAND CHIP ───────────────────────────────────────────── */
.brand-chip { background: var(--bg3) !important; border-color: rgba(255,255,255,0.06) !important; }

/* ── MARQUEE ──────────────────────────────────────────────── */
.wow-marquee-item { color: rgba(10,132,255,0.30) !important; font-weight: 500 !important; }