/*
 * LUXE — Premium Ecommerce Theme
 * Dark, cinematic, sophisticated luxury aesthetic.
 * Near-black surfaces with champagne gold accents.
 * Best for: premium fashion, luxury cosmetics, jewellery, high-end accessories.
 */

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

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --ec-primary:         #B8860B;
  --ec-primary-dark:    #996B09;
  --ec-primary-light:   rgba(184,134,11,0.12);
  --ec-accent:          #D4AF37;
  --ec-accent-dark:     #B8860B;

  /* ── Surface ────────────────────────────────────────────── */
  --ec-bg:              #0A0A0A;
  --ec-surface:         #111010;
  --ec-surface-2:       #181818;
  --ec-surface-3:       #222222;
  --ec-border:          rgba(212,175,55,0.18);
  --ec-border-subtle:   rgba(255,255,255,0.06);

  /* ── Typography ─────────────────────────────────────────── */
  --ec-text-heading:    #F5F0EC;
  --ec-text-body:       #C8C0B8;
  --ec-text-muted:      #8A7F76;
  --ec-font-heading:    'Cormorant Garamond', Georgia, serif;
  --ec-font-body:       'Jost', system-ui, sans-serif;
  --ec-letter-heading:  0.06em;

  /* ── Hero ────────────────────────────────────────────────── */
  --ec-hero-bg:         linear-gradient(135deg, #0A0A0A 0%, #111010 50%, #1A1510 100%);
  --ec-hero-text:       #F5F0EC;
  --ec-hero-accent:     #D4AF37;
  --ec-hero-overlay:    rgba(212,175,55,0.03);

  /* ── Buttons ────────────────────────────────────────────── */
  --ec-btn-bg:          #B8860B;
  --ec-btn-hover:       #D4AF37;
  --ec-btn-text:        #0A0A0A;
  --ec-btn-radius:      0px;
  --ec-btn-transform:   uppercase;
  --ec-btn-weight:      500;
  --ec-btn-letter:      0.14em;
  --ec-btn-secondary-bg:     transparent;
  --ec-btn-secondary-border: #D4AF37;
  --ec-btn-secondary-text:   #D4AF37;

  /* ── Cards ──────────────────────────────────────────────── */
  --ec-card-bg:         #111010;
  --ec-card-border:     rgba(212,175,55,0.12);
  --ec-card-shadow:     0 4px 24px rgba(0,0,0,0.5);
  --ec-card-shadow-hover: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,175,55,0.25);
  --ec-card-radius:     0px;
  --ec-img-radius:      0px;

  /* ── Badges ─────────────────────────────────────────────── */
  --ec-badge-new:       #B8860B;
  --ec-badge-sale:      #8B1A1A;
  --ec-badge-best:      #D4AF37;
  --ec-badge-autoship:  #4A3060;
  --ec-badge-radius:    0px;

  /* ── Inputs ─────────────────────────────────────────────── */
  --ec-input-bg:        #181818;
  --ec-input-border:    rgba(255,255,255,0.1);
  --ec-input-border-focus: #D4AF37;
  --ec-input-text:      #F5F0EC;
  --ec-input-radius:    0px;

  /* ── Category pills ─────────────────────────────────────── */
  --ec-pill-bg:         #181818;
  --ec-pill-bg-active:  #B8860B;
  --ec-pill-text:       #C8C0B8;
  --ec-pill-text-active:#0A0A0A;

  /* ── Trust bar ──────────────────────────────────────────── */
  --ec-trust-bg:        #0A0A0A;
  --ec-trust-text:      #8A7F76;
  --ec-trust-icon:      #D4AF37;

  /* ── Price ──────────────────────────────────────────────── */
  --ec-price-color:     #D4AF37;
  --ec-compare-color:   #5A5248;
  --ec-save-color:      #B8860B;

  /* ── Stars ──────────────────────────────────────────────── */
  --ec-star-filled:     #D4AF37;
  --ec-star-empty:      #2A2520;

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

/* ── Global resets for storefront ─────────────────────────── */
.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);
  letter-spacing: var(--ec-letter-heading);
  color: var(--ec-text-heading);
  font-weight: 400;
}

/* ── Luxe-specific: gold underline on headings ──────────────── */
.ec-storefront .ec-section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--ec-accent);
  margin: 12px auto 0;
}

/* ── Product card: sharp corners, gold hover border ─────────── */
.ec-product-card {
  background: var(--ec-card-bg);
  border: 1px solid var(--ec-card-border);
  border-radius: var(--ec-card-radius);
  box-shadow: var(--ec-card-shadow);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}

.ec-product-card:hover {
  box-shadow: var(--ec-card-shadow-hover) !important;
  border-color: rgba(212,175,55,0.4) !important;
}

.ec-product-card .ec-product-image {
  overflow: hidden;
}

.ec-product-card .ec-product-image img {
  transition: transform 0.6s ease;
}

.ec-product-card:hover .ec-product-image img {
  transform: scale(1.04);
}

/* ── Editorial announcement bar ──────────────────────────────── */
.ec-luxe-announcement {
  background: #0A0A0A;
  color: var(--ec-accent);
  font-family: var(--ec-font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5rem 0;
  text-align: center;
  border-bottom: 1px solid rgba(212,175,55,0.12);
}

/* ── Buttons: sharp, gold, ALL CAPS with wide tracking ─────── */
.ec-btn-cart {
  background: var(--ec-btn-bg);
  color: var(--ec-btn-text);
  text-transform: var(--ec-btn-transform);
  letter-spacing: var(--ec-btn-letter);
  font-weight: var(--ec-btn-weight);
  transition: background 0.2s;
}

.ec-btn-cart:hover {
  background: var(--ec-btn-hover);
}

/* ── Gold separator lines throughout ────────────────────────── */
.ec-luxe-divider {
  border: none;
  border-top: 1px solid rgba(212,175,55,0.15);
  margin: 2rem 0;
}