/*
 * LUMIÈRE — Beauty & Skincare E-Commerce Theme
 * Luxury · Luminous · Editorial
 * Champagne gold + warm pearl white + soft cream.
 * Inspired by: La Mer, Chanel Beauty, Augustinus Bader.
 * Best for: high-end serums, anti-aging, prestige skincare.
 */

@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;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --ec-primary:         #C9A96E;
  --ec-primary-dark:    #A8884E;
  --ec-primary-light:   rgba(201,169,110,0.08);
  --ec-accent:          #E8D5B0;
  --ec-accent-dark:     #C8B090;

  /* ── Surfaces ────────────────────────────────────────────── */
  --ec-bg:              #FDFBF7;
  --ec-surface:         #FFFFFF;
  --ec-surface-2:       #F8F4EE;
  --ec-surface-3:       #F0EAE0;
  --ec-border:          rgba(201,169,110,0.2);
  --ec-border-subtle:   rgba(0,0,0,0.06);
  --ec-divider:         rgba(201,169,110,0.25);

  /* ── Typography ─────────────────────────────────────────── */
  --ec-text-heading:    #1A1208;
  --ec-text-body:       #5C4D3C;
  --ec-text-muted:      #A0907E;
  --ec-font-heading:    'Cormorant Garamond', Georgia, serif;
  --ec-font-body:       'Jost', system-ui, sans-serif;
  --ec-letter-heading:  0.04em;
  --ec-letter-cta:      0.14em;
  --ec-weight-heading:  400;

  /* ── Hero ────────────────────────────────────────────────── */
  --ec-hero-bg:         linear-gradient(160deg, #FDFBF7 0%, #F8F4EE 50%, #F0EAE0 100%);
  --ec-hero-text:       #1A1208;
  --ec-hero-accent:     #C9A96E;

  /* ── Buttons ─────────────────────────────────────────────── */
  --ec-btn-bg:          #1A1208;
  --ec-btn-hover:       #2C2010;
  --ec-btn-text:        #FFFFFF;
  --ec-btn-radius:      2px;
  --ec-btn-transform:   uppercase;
  --ec-btn-weight:      500;
  --ec-btn-letter:      var(--ec-letter-cta);
  --ec-btn-secondary-bg:     transparent;
  --ec-btn-secondary-border: #C9A96E;
  --ec-btn-secondary-text:   #C9A96E;

  /* ── Cards ───────────────────────────────────────────────── */
  --ec-card-bg:         #FFFFFF;
  --ec-card-border:     rgba(201,169,110,0.15);
  --ec-card-shadow:     0 1px 8px rgba(201,169,110,0.06);
  --ec-card-shadow-hover: 0 4px 24px rgba(201,169,110,0.18), 0 0 0 1px rgba(201,169,110,0.35);
  --ec-card-radius:     2px;
  --ec-img-radius:      2px;

  /* ── Badges ──────────────────────────────────────────────── */
  --ec-badge-new:       #C9A96E;
  --ec-badge-sale:      #1A1208;
  --ec-badge-best:      #A8884E;
  --ec-badge-autoship:  #6B6B8A;
  --ec-badge-radius:    0px;

  /* ── Inputs ──────────────────────────────────────────────── */
  --ec-input-bg:        #FFFFFF;
  --ec-input-border:    rgba(201,169,110,0.3);
  --ec-input-border-focus: #C9A96E;
  --ec-input-text:      #1A1208;
  --ec-input-radius:    2px;

  /* ── Category pills ──────────────────────────────────────── */
  --ec-pill-bg:         transparent;
  --ec-pill-border:     rgba(201,169,110,0.3);
  --ec-pill-bg-active:  #1A1208;
  --ec-pill-text:       #5C4D3C;
  --ec-pill-text-active:#FFFFFF;

  /* ── Trust bar ───────────────────────────────────────────── */
  --ec-trust-bg:        #F8F4EE;
  --ec-trust-text:      #5C4D3C;
  --ec-trust-icon:      #C9A96E;

  /* ── Price ───────────────────────────────────────────────── */
  --ec-price-color:     #1A1208;
  --ec-compare-color:   #A0907E;
  --ec-save-color:      #C9A96E;

  /* ── Stars ───────────────────────────────────────────────── */
  --ec-star-filled:     #C9A96E;
  --ec-star-empty:      #E8D5B0;

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

  /* ── Lumière-specific ─────────────────────────────────────── */
  --lm-gold-shimmer:    linear-gradient(90deg, transparent 0%, rgba(201,169,110,0.3) 50%, transparent 100%);
  --lm-thin-divider:    1px solid rgba(201,169,110,0.2);
}

/* ── Base ───────────────────────────────────────────────────── */
.ec-storefront {
  background: var(--ec-bg);
  color: var(--ec-text-body);
  font-family: var(--ec-font-body);
  font-weight: 300;
  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);
}

/* ── Editorial heading style ─────────────────────────────────── */
.ec-storefront h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 300; font-style: italic; }
.ec-storefront h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 400; }

/* ── Gold shimmer separator ──────────────────────────────────── */
.ec-storefront .ec-section-divider {
  height: 1px;
  background: var(--lm-gold-shimmer);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
  margin: 0 auto;
  max-width: 400px;
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Card: editorial minimal hover ──────────────────────────── */
.ec-product-card {
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.ec-product-card:hover {
  border-color: var(--ec-primary);
  box-shadow: var(--ec-card-shadow-hover) !important;
}

/* ── Product image: clean white float ───────────────────────── */
.ec-card-img-wrap {
  background: var(--ec-surface-2) !important;
}

/* ── Category pill: thin bordered style ─────────────────────── */
.ec-pill {
  border: 1px solid var(--ec-pill-border) !important;
  background: var(--ec-pill-bg) !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  font-size: 0.7rem !important;
  letter-spacing: 0.1em !important;
}

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

/* ── Hero: editorial centred layout ──────────────────────────── */
.ec-hero-headline {
  font-style: italic !important;
  font-weight: 300 !important;
}

/* ── Trust strip: thin gold top border ──────────────────────── */
.ec-trust-strip {
  border-top: var(--lm-thin-divider) !important;
  border-bottom: var(--lm-thin-divider) !important;
  letter-spacing: 0.06em;
  font-size: 0.75rem !important;
  text-transform: uppercase;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --ec-hero-py: 5rem;
    --ec-section-py: 3.5rem;
  }
  .ec-hero-headline { font-size: 2.2rem !important; }
  .ec-grid-4        { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .ec-pill          { padding: 6px 12px !important; }
}

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