/* ============================================================
   WOW.TACTICAL — NICHE THEME
   Mood: Industrial Military Grade
   Ref:  5.11 Tactical · Magpul · GORUCK · Arc'teryx LEAF
   ============================================================ */

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

:root {
  --bg:        #060a05;
  --bg2:       #0b0f08;
  --bg3:       #10140c;
  --bg4:       #161a10;
  --bg5:       #1c2015;
  --bg-glass:  rgba(6,10,5,0.95);
  --bg-card:   #0d1009;

  --text:       #dde2d0;
  --text-dim:   rgba(221,226,208,0.58);
  --text-muted: rgba(221,226,208,0.30);

  --accent:      #6aaa62;
  --accent-inv:  #060a05;
  --red:         #6aaa62;
  --red-dim:     rgba(106,170,98,0.10);
  --red-glow:    rgba(106,170,98,0.22);
  --orange:      #e8723a;
  --green:       #6aaa62;
  --gold:        #c8a84a;

  --border:        rgba(221,226,208,0.07);
  --border-hover:  rgba(221,226,208,0.14);
  --border-accent: rgba(106,170,98,0.22);

  --shadow-sm:   0 1px 6px  rgba(0,0,0,0.65);
  --shadow:      0 4px 24px rgba(0,0,0,0.75);
  --shadow-lg:   0 8px 56px rgba(0,0,0,0.85);
  --shadow-red:  0 6px 28px rgba(106,170,98,0.20);
  --shadow-card: 0 2px 14px rgba(0,0,0,0.70);
  --shadow-card-hover: 0 8px 40px rgba(0,0,0,0.85), 0 0 0 1px rgba(106,170,98,0.12);

  --niche-font:      'Barlow Condensed', sans-serif;
  --niche-font-body: 'Barlow', sans-serif;
  --grain-opacity: 0.038;
}

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

@media (min-width: 481px) {
  body::before {
    background:
      radial-gradient(ellipse 50% 55% at 15% 25%, rgba(106,170,98,0.06) 0%, transparent 58%),
      radial-gradient(ellipse 45% 45% at 85% 75%, rgba(106,170,98,0.03) 0%, transparent 55%),
      #040703 !important;
    background-color: #040703 !important;
  }
  #app-root {
    background: var(--bg) !important;
    box-shadow: 0 0 0 1px rgba(221,226,208,0.04), 0 40px 120px rgba(0,0,0,0.80) !important;
  }
}

/* ── HERO ─────────────────────────────────────────────────── */
.home-hero {
  background: linear-gradient(170deg,
    rgba(106,170,98,0.06) 0%,
    rgba(106,170,98,0.02) 50%,
    transparent 100%) !important;
  padding: 28px 16px 20px !important;
}
.home-hero::before {
  background: radial-gradient(circle, rgba(106,170,98,0.10) 0%, transparent 65%) !important;
}
.home-hero::after {
  background: radial-gradient(circle, rgba(106,170,98,0.05) 0%, transparent 60%) !important;
}

.home-greeting {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3.5px !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  opacity: 0.9 !important;
}

.home-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-size: clamp(30px, 9vw, 46px) !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
  background: linear-gradient(135deg, #dde2d0 0%, #6aaa62 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.home-counter-chip {
  background: rgba(106,170,98,0.08) !important;
  border-color: rgba(106,170,98,0.18) !important;
  font-family: 'Barlow', sans-serif !important;
  font-weight: 600 !important;
}
.live-dot { background: var(--accent) !important; }

/* ── SECTION TITLES ───────────────────────────────────────── */
.sec-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ── HEADER/NAV ───────────────────────────────────────────── */
#header {
  background: rgba(6,10,5,0.96) !important;
  border-bottom: 1px solid rgba(106,170,98,0.10) !important;
}
.header-logo {
  font-family: 'Barlow Condensed', sans-serif !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.header-logo .dot { color: var(--accent) !important; }

#bottom-nav {
  background: rgba(6,10,5,0.96) !important;
  border-top: 1px solid rgba(106,170,98,0.10) !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(221,226,208,0.05) !important;
  border-radius: 10px !important;
}
.product-card:hover {
  box-shadow: var(--shadow-card-hover) !important;
  border-color: rgba(106,170,98,0.15) !important;
}
.card-img-wrap { background: #0a0d07 !important; }

/* ── CHIPS ────────────────────────────────────────────────── */
.niche-fam-chip {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background: rgba(221,226,208,0.04) !important;
  border-color: rgba(221,226,208,0.08) !important;
}
.niche-fam-chip.active {
  background: rgba(106,170,98,0.12) !important;
  border-color: rgba(106,170,98,0.32) !important;
  color: var(--accent) !important;
}

/* ── CHECKOUT / CART ──────────────────────────────────────── */
.cart-checkout-btn {
  background: linear-gradient(135deg, #6aaa62, #4a8a42) !important;
  color: #fff !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
#cart-sticky-bar {
  background: linear-gradient(135deg, #6aaa62, #4a8a42) !important;
  color: #fff !important;
}

.cod-banner {
  background: rgba(106,170,98,0.08) !important;
  border-color: rgba(106,170,98,0.20) !important;
  color: var(--accent) !important;
}

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

/* ── BADGES ───────────────────────────────────────────────── */
.badge-hot  { background: #e8723a !important; color: #fff !important; }
.badge-new  { background: rgba(106,170,98,0.20) !important; color: var(--accent) !important; }
.badge-sale { background: rgba(200,168,74,0.20) !important; color: #c8a84a !important; }

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

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

/* ── INPUTS ───────────────────────────────────────────────── */
.form-inp, .checkout-input {
  background: var(--bg3) !important;
  border-color: rgba(221,226,208,0.08) !important;
  color: var(--text) !important;
  font-family: 'Barlow', sans-serif !important;
}
.form-inp:focus, .checkout-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(106,170,98,0.14) !important;
}

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

/* ── BRAND CHIP ───────────────────────────────────────────── */
.brand-chip {
  background: var(--bg3) !important;
  border-color: rgba(221,226,208,0.05) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* ── MARQUEE ──────────────────────────────────────────────── */
.wow-marquee-item {
  color: rgba(106,170,98,0.35) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  letter-spacing: 2px !important;
}