/*
 * OBSIDIAN — Beauty & Skincare E-Commerce Theme
 * Bold · Prestige · Intense
 * Deep onyx + rose gold + platinum.
 * Inspired by: NARS, Tom Ford Beauty, Pat McGrath Labs.
 * Best for: luxury cosmetics, professional skincare, prestige beauty.
 */

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

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --ec-primary:         #C8A882;
  --ec-primary-dark:    #A08060;
  --ec-primary-light:   rgba(200,168,130,0.1);
  --ec-accent:          #E8D0B8;
  --ec-accent-dark:     #C8B098;

  /* ── Surfaces ────────────────────────────────────────────── */
  --ec-bg:              #0A0908;
  --ec-surface:         #111010;
  --ec-surface-2:       #1C1A19;
  --ec-surface-3:       #252220;
  --ec-border:          rgba(200,168,130,0.15);
  --ec-border-subtle:   rgba(255,255,255,0.05);
  --ec-divider:         rgba(200,168,130,0.2);

  /* ── Typography ─────────────────────────────────────────── */
  --ec-text-heading:    #F5F0EC;
  --ec-text-body:       #B8AFA6;
  --ec-text-muted:      #706860;
  --ec-font-heading:    'Cinzel', Georgia, serif;
  --ec-font-body:       'Inter', system-ui, sans-serif;
  --ec-letter-heading:  0.08em;
  --ec-letter-cta:      0.16em;
  --ec-weight-heading:  400;

  /* ── Hero ────────────────────────────────────────────────── */
  --ec-hero-bg:         linear-gradient(135deg, #050403 0%, #0A0908 40%, #141210 100%);
  --ec-hero-text:       #F5F0EC;
  --ec-hero-accent:     #C8A882;

  /* ── Buttons ─────────────────────────────────────────────── */
  --ec-btn-bg:          #C8A882;
  --ec-btn-hover:       #A08060;
  --ec-btn-text:        #0A0908;
  --ec-btn-radius:      0px;
  --ec-btn-transform:   uppercase;
  --ec-btn-weight:      500;
  --ec-btn-letter:      var(--ec-letter-cta);
  --ec-btn-secondary-bg:     transparent;
  --ec-btn-secondary-border: #C8A882;
  --ec-btn-secondary-text:   #C8A882;

  /* ── Cards ───────────────────────────────────────────────── */
  --ec-card-bg:         #141312;
  --ec-card-border:     rgba(200,168,130,0.12);
  --ec-card-shadow:     0 2px 20px rgba(0,0,0,0.5);
  --ec-card-shadow-hover: 0 8px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(200,168,130,0.4);
  --ec-card-radius:     0px;
  --ec-img-radius:      0px;

  /* ── Badges ──────────────────────────────────────────────── */
  --ec-badge-new:       #C8A882;
  --ec-badge-sale:      #8B0000;
  --ec-badge-best:      #A08060;
  --ec-badge-autoship:  #5A4A7A;
  --ec-badge-radius:    0px;

  /* ── Inputs ──────────────────────────────────────────────── */
  --ec-input-bg:        #1C1A19;
  --ec-input-border:    rgba(200,168,130,0.2);
  --ec-input-border-focus: #C8A882;
  --ec-input-text:      #F5F0EC;
  --ec-input-radius:    0px;

  /* ── Category pills ──────────────────────────────────────── */
  --ec-pill-bg:         transparent;
  --ec-pill-border:     rgba(200,168,130,0.2);
  --ec-pill-bg-active:  #C8A882;
  --ec-pill-text:       #B8AFA6;
  --ec-pill-text-active:#0A0908;

  /* ── Trust bar ───────────────────────────────────────────── */
  --ec-trust-bg:        #111010;
  --ec-trust-text:      #B8AFA6;
  --ec-trust-icon:      #C8A882;

  /* ── Price ───────────────────────────────────────────────── */
  --ec-price-color:     #F5F0EC;
  --ec-compare-color:   #706860;
  --ec-save-color:      #C8A882;

  /* ── Stars ───────────────────────────────────────────────── */
  --ec-star-filled:     #C8A882;
  --ec-star-empty:      #2C2A28;

  /* ── Spacing ─────────────────────────────────────────────── */
  --ec-section-py:      6rem;
  --ec-hero-py:         10rem;

  /* ── Obsidian-specific ────────────────────────────────────── */
  --ob-glow:            0 0 30px rgba(200,168,130,0.15), 0 0 60px rgba(200,168,130,0.05);
  --ob-rose-line:       1px solid rgba(200,168,130,0.2);
}

/* ── Base ───────────────────────────────────────────────────── */
.ec-storefront {
  background: var(--ec-bg);
  color: var(--ec-text-body);
  font-family: var(--ec-font-body);
  min-height: 100vh;
}

.ec-storefront h1,
.ec-storefront h2,
.ec-storefront h3,
.ec-storefront h4 {
  font-family: var(--ec-font-heading);
  font-weight: var(--ec-weight-heading);
  letter-spacing: var(--ec-letter-heading);
  color: var(--ec-text-heading);
  text-transform: uppercase;
}

/* ── Hero: dramatic dark layout ──────────────────────────────── */
.ec-hero {
  background: var(--ec-hero-bg);
  position: relative;
}

/* Rose gold geometric accent lines */
.ec-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #C8A882 40%, #E8D0B8 50%, #C8A882 60%, transparent 100%);
}
.ec-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #C8A882 40%, #E8D0B8 50%, #C8A882 60%, transparent 100%);
}

/* ── Card: dramatic dark hover ───────────────────────────────── */
.ec-product-card {
  background: var(--ec-card-bg) !important;
  transition: box-shadow 0.4s ease, transform 0.3s ease;
}
.ec-product-card:hover {
  box-shadow: var(--ec-card-shadow-hover), var(--ob-glow) !important;
  transform: translateY(-2px);
}

/* ── Product image: dark background float ────────────────────── */
.ec-card-img-wrap {
  background: #0D0B0A !important;
}

/* ── Category pills ──────────────────────────────────────────── */
.ec-pill {
  border: 1px solid var(--ec-pill-border) !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  font-size: 0.68rem !important;
  letter-spacing: 0.12em !important;
}

/* ── Trust strip: dark with rose gold accent ─────────────────── */
.ec-trust-strip {
  border-top: var(--ob-rose-line) !important;
  border-bottom: var(--ob-rose-line) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem !important;
}

/* ── Nav: full dark with rose gold accent ────────────────────── */
.ec-nav {
  background: rgba(10,9,8,0.95) !important;
  backdrop-filter: blur(20px);
  border-bottom: var(--ob-rose-line) !important;
}

/* ── Price ───────────────────────────────────────────────────── */
.ec-product-card:hover .ec-price {
  color: var(--ec-primary);
  transition: color 0.2s;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --ec-hero-py: 5rem;
    --ec-section-py: 3.5rem;
  }
  .ec-grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .ec-hero-headline { font-size: 1.8rem !important; letter-spacing: 0.06em !important; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  :root { --ec-hero-py: 7rem; }
  .ec-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}