/*
 * TERRA — Eco-Friendly E-Commerce Theme
 * Grounded · Warm · Artisan
 * Terracotta + warm olive + natural cream.
 * Inspired by: Package Free Shop, Meliora, Earthley.
 * Best for: organic home cleaners, clay products, sustainable artisan goods.
 */

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

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --ec-primary:         #C4703A;
  --ec-primary-dark:    #A05828;
  --ec-primary-light:   rgba(196,112,58,0.1);
  --ec-accent:          #7A8C5A;
  --ec-accent-dark:     #5A6C3A;
  --ec-accent-light:    rgba(122,140,90,0.1);

  /* ── Surfaces ────────────────────────────────────────────── */
  --ec-bg:              #FAF6F0;
  --ec-surface:         #FFFFFF;
  --ec-surface-2:       #F0E8DC;
  --ec-surface-3:       #E8DCC8;
  --ec-border:          rgba(196,112,58,0.2);
  --ec-border-subtle:   rgba(0,0,0,0.07);

  /* ── Typography ─────────────────────────────────────────── */
  --ec-text-heading:    #2C1F0E;
  --ec-text-body:       #5C4830;
  --ec-text-muted:      #A8906C;
  --ec-font-heading:    'Playfair Display', Georgia, serif;
  --ec-font-body:       'Source Sans 3', system-ui, sans-serif;
  --ec-letter-heading:  0.01em;
  --ec-letter-cta:      0.04em;
  --ec-weight-heading:  500;

  /* ── Hero ────────────────────────────────────────────────── */
  --ec-hero-bg:         linear-gradient(150deg, #FAF6F0 0%, #F5EDE0 40%, #EDE0CC 100%);
  --ec-hero-text:       #2C1F0E;
  --ec-hero-accent:     #C4703A;

  /* ── Buttons ─────────────────────────────────────────────── */
  --ec-btn-bg:          #C4703A;
  --ec-btn-hover:       #A05828;
  --ec-btn-text:        #FFFFFF;
  --ec-btn-radius:      8px;
  --ec-btn-transform:   none;
  --ec-btn-weight:      600;
  --ec-btn-letter:      0.02em;
  --ec-btn-secondary-bg:     transparent;
  --ec-btn-secondary-border: #C4703A;
  --ec-btn-secondary-text:   #C4703A;

  /* ── Cards ───────────────────────────────────────────────── */
  --ec-card-bg:         #FFFFFF;
  --ec-card-border:     rgba(196,112,58,0.12);
  --ec-card-shadow:     0 2px 12px rgba(196,112,58,0.07);
  --ec-card-shadow-hover: 0 8px 32px rgba(196,112,58,0.16);
  --ec-card-radius:     12px;
  --ec-img-radius:      10px;

  /* ── Badges ──────────────────────────────────────────────── */
  --ec-badge-new:       #7A8C5A;
  --ec-badge-sale:      #C4703A;
  --ec-badge-best:      #8C6A3A;
  --ec-badge-autoship:  #6A7A9C;
  --ec-badge-radius:    4px;

  /* ── Inputs ──────────────────────────────────────────────── */
  --ec-input-bg:        #FFFFFF;
  --ec-input-border:    rgba(196,112,58,0.25);
  --ec-input-border-focus: #C4703A;
  --ec-input-text:      #2C1F0E;
  --ec-input-radius:    8px;

  /* ── Category pills ──────────────────────────────────────── */
  --ec-pill-bg:         #F0E8DC;
  --ec-pill-bg-active:  #C4703A;
  --ec-pill-text:       #5C4830;
  --ec-pill-text-active:#FFFFFF;

  /* ── Trust bar ───────────────────────────────────────────── */
  --ec-trust-bg:        #F0E8DC;
  --ec-trust-text:      #5C4830;
  --ec-trust-icon:      #C4703A;

  /* ── Price ───────────────────────────────────────────────── */
  --ec-price-color:     #2C1F0E;
  --ec-compare-color:   #A8906C;
  --ec-save-color:      #C4703A;

  /* ── Stars ───────────────────────────────────────────────── */
  --ec-star-filled:     #C4703A;
  --ec-star-empty:      #E8DCC8;

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

  /* ── Terra-specific ──────────────────────────────────────── */
  --tr-earth-shadow:    0 4px 20px rgba(196,112,58,0.15);
  --tr-olive-accent:    rgba(122,140,90,0.12);
  --tr-warm-divider:    1px solid rgba(196,112,58,0.15);
}

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

/* ── Hero: warm earth gradient ────────────────────────────────── */
.ec-hero {
  background: var(--ec-hero-bg);
  position: relative;
  overflow: hidden;
}

/* Earth circle decoration */
.ec-hero::before {
  content: '';
  position: absolute;
  bottom: -30%;
  right: -5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(196,112,58,0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Olive green accent blob */
.ec-hero::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -5%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(122,140,90,0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* ── Cards: warm handcrafted feel ────────────────────────────── */
.ec-product-card {
  transition: box-shadow 0.3s ease, transform 0.25s ease, border-color 0.3s ease;
}

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

/* Product images on cream background */
.ec-card-img-wrap {
  background: var(--ec-surface-2) !important;
}

/* ── Ingredient/eco chips (terra-specific) ───────────────────── */
.ec-eco-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--tr-olive-accent);
  color: var(--ec-accent-dark);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  margin: 2px;
  border: 1px solid rgba(122,140,90,0.2);
}

/* ── Category pills ──────────────────────────────────────────── */
.ec-pill {
  border-radius: var(--ec-btn-radius) !important;
  font-weight: 500;
}

/* ── Trust strip: warm linen border ──────────────────────────── */
.ec-trust-strip {
  background: var(--ec-trust-bg) !important;
  border-top: var(--tr-warm-divider) !important;
  border-bottom: var(--tr-warm-divider) !important;
}

/* ── Accent olive on autoship hint ───────────────────────────── */
.ec-autoship-hint {
  color: var(--ec-accent) !important;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --ec-hero-py: 4.5rem;
    --ec-section-py: 3rem;
  }
  .ec-grid-4   { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .ec-btn      { min-height: 44px; }
  .ec-pill     { min-height: 38px; }
}

@media (max-width: 380px) {
  .ec-grid-4 { grid-template-columns: 1fr !important; }
}

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