/* ============================================================
   WOW.BEAUTY — NICHE THEME
   Mood: Editorial Glam Dark
   Ref:  Charlotte Tilbury · Hourglass · Pat McGrath · Rare Beauty
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');

:root {
  --bg:        #110810;
  --bg2:       #180c17;
  --bg3:       #1e101d;
  --bg4:       #261528;
  --bg5:       #2d1a30;
  --bg-glass:  rgba(17,8,16,0.93);
  --bg-card:   #150a14;

  --text:       #f5e8f2;
  --text-dim:   rgba(245,232,242,0.58);
  --text-muted: rgba(245,232,242,0.30);

  --accent:      #e8638a;
  --accent-inv:  #110810;
  --red:         #e8638a;
  --red-dim:     rgba(232,99,138,0.10);
  --red-glow:    rgba(232,99,138,0.25);
  --orange:      #f0a060;
  --green:       #7fc8a0;
  --gold:        #f0c890;

  --border:        rgba(255,255,255,0.06);
  --border-hover:  rgba(255,255,255,0.12);
  --border-accent: rgba(232,99,138,0.22);

  --shadow-sm:   0 1px 6px  rgba(0,0,0,0.55);
  --shadow:      0 4px 24px rgba(0,0,0,0.65);
  --shadow-lg:   0 8px 56px rgba(0,0,0,0.75);
  --shadow-red:  0 6px 28px rgba(232,99,138,0.25);
  --shadow-card: 0 2px 14px rgba(0,0,0,0.60);
  --shadow-card-hover: 0 8px 40px rgba(0,0,0,0.75), 0 0 0 1px rgba(232,99,138,0.14);

  --niche-font:      'Cormorant Garamond', Georgia, serif;
  --niche-font-body: 'DM Sans', -apple-system, sans-serif;
  --grain-opacity: 0.032;
}

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

@media (min-width: 481px) {
  body::before {
    background:
      radial-gradient(ellipse 55% 60% at 18% 28%, rgba(232,99,138,0.08) 0%, transparent 58%),
      radial-gradient(ellipse 45% 50% at 82% 80%, rgba(155,80,180,0.05) 0%, transparent 55%),
      #0a0509 !important;
    background-color: #0a0509 !important;
  }
  #app-root {
    background: var(--bg) !important;
    box-shadow: 0 0 0 1px rgba(232,99,138,0.06), 0 40px 120px rgba(0,0,0,0.70) !important;
  }
}

/* ── HERO ─────────────────────────────────────────────────── */
.home-hero {
  background: linear-gradient(165deg,
    rgba(232,99,138,0.08) 0%,
    rgba(232,99,138,0.02) 50%,
    transparent 100%) !important;
  padding: 28px 16px 22px !important;
}
.home-hero::before {
  background: radial-gradient(circle, rgba(232,99,138,0.14) 0%, transparent 68%) !important;
}
.home-hero::after {
  background: radial-gradient(circle, rgba(155,80,180,0.07) 0%, transparent 62%) !important;
}

.home-greeting {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  opacity: 0.85 !important;
}

.home-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: clamp(30px, 8.5vw, 44px) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.1 !important;
  background: linear-gradient(135deg, #f5e8f2 30%, #e8638a 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.home-counter-chip {
  background: rgba(232,99,138,0.08) !important;
  border-color: rgba(232,99,138,0.18) !important;
  font-family: 'DM Sans', sans-serif !important;
}
.live-dot { background: var(--accent) !important; }

/* ── SECTION TITLES ───────────────────────────────────────── */
.sec-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: italic !important;
  font-size: 22px !important;
  letter-spacing: 0.01em !important;
}

/* ── HEADER/NAV ───────────────────────────────────────────── */
#header {
  background: rgba(17,8,16,0.93) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.header-logo .dot { color: var(--accent) !important; }

#bottom-nav {
  background: rgba(17,8,16,0.93) !important;
  border-top: 1px solid rgba(255,255,255,0.05) !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.05) !important;
}
.product-card:hover {
  box-shadow: var(--shadow-card-hover) !important;
  border-color: rgba(232,99,138,0.16) !important;
}
.card-img-wrap { background: #160810 !important; }
.card-brand { color: var(--accent) !important; font-weight: 500 !important; }
.card-price {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}

/* ── CHIPS ────────────────────────────────────────────────── */
.niche-fam-chip {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.07) !important;
}
.niche-fam-chip.active {
  background: rgba(232,99,138,0.12) !important;
  border-color: rgba(232,99,138,0.32) !important;
  color: var(--accent) !important;
}

/* ── CHECKOUT / CART ──────────────────────────────────────── */
.cart-checkout-btn {
  background: linear-gradient(135deg, #e8638a, #c4426a) !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
}
#cart-sticky-bar { background: linear-gradient(135deg, #e8638a, #c4426a) !important; color: #fff !important; }

.cod-banner {
  background: rgba(127,200,160,0.08) !important;
  border-color: rgba(127,200,160,0.20) !important;
  color: #7fc8a0 !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: var(--accent) !important; color: #fff !important; }
.badge-new  { background: rgba(127,200,160,0.20) !important; color: #7fc8a0 !important; }
.badge-sale { background: rgba(240,160,96,0.20) !important; color: #f0a060 !important; }

/* ── SHEETS ───────────────────────────────────────────────── */
.sheet { background: var(--bg2) !important; border-top-color: rgba(255,255,255,0.06) !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(232,99,138,0.15) !important;
}

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

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

/* ── REVIEW CARDS ─────────────────────────────────────────── */
.review-card {
  background: var(--bg2) !important;
  border-color: rgba(255,255,255,0.05) !important;
}

/* ── MARQUEE ──────────────────────────────────────────────── */
.wow-marquee-item { color: rgba(232,99,138,0.35) !important; }