/*
 * VITALITY — Health & Wellness E-Commerce Theme
 * Bold, energetic, performance-focused.
 * Flame orange + deep charcoal + gold.
 * Best for: supplements, protein, sports nutrition, fitness.
 */

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

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --ec-primary:         #F97316;
  --ec-primary-dark:    #EA580C;
  --ec-primary-light:   rgba(249,115,22,0.12);
  --ec-accent:          #EAB308;
  --ec-accent-dark:     #CA8A04;

  /* ── Surface ────────────────────────────────────────────── */
  --ec-bg:              #0C0A09;
  --ec-surface:         #1C1917;
  --ec-surface-2:       #292524;
  --ec-surface-3:       #3A3330;
  --ec-border:          rgba(249,115,22,0.15);
  --ec-border-subtle:   rgba(255,255,255,0.06);

  /* ── Typography ─────────────────────────────────────────── */
  --ec-text-heading:    #FAFAF9;
  --ec-text-body:       #D6D3D1;
  --ec-text-muted:      #78716C;
  --ec-font-heading:    'Bebas Neue', Impact, sans-serif;
  --ec-font-body:       'Inter', system-ui, sans-serif;
  --ec-letter-heading:  0.04em;

  /* ── Hero ────────────────────────────────────────────────── */
  --ec-hero-bg:         linear-gradient(135deg, #0C0A09 0%, #1C1917 50%, #292524 100%);
  --ec-hero-text:       #FAFAF9;
  --ec-hero-accent:     #F97316;
  --ec-hero-overlay:    rgba(249,115,22,0.05);

  /* ── Buttons ────────────────────────────────────────────── */
  --ec-btn-bg:          #F97316;
  --ec-btn-hover:       #EA580C;
  --ec-btn-text:        #FFFFFF;
  --ec-btn-radius:      6px;
  --ec-btn-transform:   uppercase;
  --ec-btn-weight:      700;
  --ec-btn-letter:      0.08em;
  --ec-btn-secondary-bg: transparent;
  --ec-btn-secondary-border: #F97316;
  --ec-btn-secondary-text:   #F97316;

  /* ── Cards ──────────────────────────────────────────────── */
  --ec-card-bg:         #1C1917;
  --ec-card-border:     rgba(249,115,22,0.12);
  --ec-card-shadow:     0 4px 24px rgba(0,0,0,0.4);
  --ec-card-shadow-hover: 0 8px 32px rgba(249,115,22,0.2);
  --ec-card-radius:     10px;
  --ec-img-radius:      8px;

  /* ── Badges ─────────────────────────────────────────────── */
  --ec-badge-new:       #F97316;
  --ec-badge-sale:      #EAB308;
  --ec-badge-best:      #DC2626;
  --ec-badge-autoship:  #7C3AED;
  --ec-badge-radius:    4px;

  /* ── Inputs ─────────────────────────────────────────────── */
  --ec-input-bg:        #292524;
  --ec-input-border:    rgba(255,255,255,0.1);
  --ec-input-border-focus: #F97316;
  --ec-input-text:      #FAFAF9;
  --ec-input-radius:    6px;

  /* ── Category pills ─────────────────────────────────────── */
  --ec-pill-bg:         #292524;
  --ec-pill-bg-active:  #F97316;
  --ec-pill-text:       #D6D3D1;
  --ec-pill-text-active:#FFFFFF;

  /* ── Trust bar ──────────────────────────────────────────── */
  --ec-trust-bg:        #292524;
  --ec-trust-text:      #D6D3D1;
  --ec-trust-icon:      #F97316;

  /* ── Price ──────────────────────────────────────────────── */
  --ec-price-color:     #F97316;
  --ec-compare-color:   #78716C;
  --ec-save-color:      #EAB308;

  /* ── Stars ──────────────────────────────────────────────── */
  --ec-star-filled:     #EAB308;
  --ec-star-empty:      #3A3330;

  /* ── Spacing ─────────────────────────────────────────────── */
  --ec-section-py:      5rem;
  --ec-hero-py:         7rem;
}

/* ── 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);
}

/* ── Vitality-specific: glowing orange border on hover ────── */
.ec-product-card:hover {
  border-color: var(--ec-primary) !important;
  box-shadow: var(--ec-card-shadow-hover), 0 0 0 1px rgba(249,115,22,0.3) !important;
}

/* ── Performance badge strip ─────────────────────────────── */
.ec-vitality-strip {
  background: linear-gradient(90deg, var(--ec-primary) 0%, var(--ec-accent) 100%);
  color: #000;
  font-family: var(--ec-font-heading);
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  padding: 0.4rem 0;
  text-align: center;
  text-transform: uppercase;
}