/*
 * MOSS — Eco-Friendly E-Commerce Theme
 * Botanical · Rich · Zero-Waste
 * Deep forest green + warm amber + natural linen.
 * Inspired by: Grove Collaborative, Branch Basics, Supernatural.
 * Best for: plant-based concentrates, zero-waste, refillable products.
 */

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

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --ec-primary:         #3D6B4A;
  --ec-primary-dark:    #2A4F36;
  --ec-primary-light:   rgba(61,107,74,0.1);
  --ec-accent:          #C8962C;
  --ec-accent-dark:     #A87820;
  --ec-accent-light:    rgba(200,150,44,0.1);

  /* ── Surfaces ────────────────────────────────────────────── */
  --ec-bg:              #F4F7F0;
  --ec-surface:         #FFFFFF;
  --ec-surface-2:       #EAF0E4;
  --ec-surface-3:       #DCE8D4;
  --ec-border:          rgba(61,107,74,0.15);
  --ec-border-subtle:   rgba(0,0,0,0.06);

  /* ── Typography ─────────────────────────────────────────── */
  --ec-text-heading:    #1A2E1E;
  --ec-text-body:       #3A5040;
  --ec-text-muted:      #7A9880;
  --ec-font-heading:    'Bitter', Georgia, serif;
  --ec-font-body:       'Nunito Sans', system-ui, sans-serif;
  --ec-letter-heading:  0.01em;
  --ec-letter-cta:      0.05em;
  --ec-weight-heading:  600;

  /* ── Hero ────────────────────────────────────────────────── */
  --ec-hero-bg:         linear-gradient(145deg, #E8F0E0 0%, #F0F5E8 40%, #F4F7F0 100%);
  --ec-hero-text:       #1A2E1E;
  --ec-hero-accent:     #3D6B4A;

  /* ── Buttons ─────────────────────────────────────────────── */
  --ec-btn-bg:          #3D6B4A;
  --ec-btn-hover:       #2A4F36;
  --ec-btn-text:        #FFFFFF;
  --ec-btn-radius:      16px;
  --ec-btn-transform:   none;
  --ec-btn-weight:      600;
  --ec-btn-letter:      0.02em;
  --ec-btn-secondary-bg:     transparent;
  --ec-btn-secondary-border: #3D6B4A;
  --ec-btn-secondary-text:   #3D6B4A;

  /* ── Cards ───────────────────────────────────────────────── */
  --ec-card-bg:         #FFFFFF;
  --ec-card-border:     rgba(61,107,74,0.12);
  --ec-card-shadow:     0 2px 14px rgba(61,107,74,0.07);
  --ec-card-shadow-hover: 0 10px 36px rgba(61,107,74,0.15);
  --ec-card-radius:     16px;
  --ec-img-radius:      12px;

  /* ── Badges ──────────────────────────────────────────────── */
  --ec-badge-new:       #3D6B4A;
  --ec-badge-sale:      #C8962C;
  --ec-badge-best:      #2A4F36;
  --ec-badge-autoship:  #5A6A9A;
  --ec-badge-radius:    6px;

  /* ── Inputs ──────────────────────────────────────────────── */
  --ec-input-bg:        #FFFFFF;
  --ec-input-border:    rgba(61,107,74,0.22);
  --ec-input-border-focus: #3D6B4A;
  --ec-input-text:      #1A2E1E;
  --ec-input-radius:    12px;

  /* ── Category pills ──────────────────────────────────────── */
  --ec-pill-bg:         #EAF0E4;
  --ec-pill-bg-active:  #3D6B4A;
  --ec-pill-text:       #3A5040;
  --ec-pill-text-active:#FFFFFF;

  /* ── Trust bar ───────────────────────────────────────────── */
  --ec-trust-bg:        #EAF0E4;
  --ec-trust-text:      #3A5040;
  --ec-trust-icon:      #3D6B4A;

  /* ── Price ───────────────────────────────────────────────── */
  --ec-price-color:     #1A2E1E;
  --ec-compare-color:   #7A9880;
  --ec-save-color:      #C8962C;

  /* ── Stars ───────────────────────────────────────────────── */
  --ec-star-filled:     #C8962C;
  --ec-star-empty:      #D4E4CC;

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

  /* ── Moss-specific ───────────────────────────────────────── */
  --ms-forest-glow:     0 0 0 1px rgba(61,107,74,0.3), 0 8px 32px rgba(61,107,74,0.15);
  --ms-amber-accent:    rgba(200,150,44,0.12);
  --ms-leaf-border:     1px solid rgba(61,107,74,0.18);
}

/* ── 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: forest gradient with leaf SVG overlay ─────────────── */
.ec-hero {
  background: var(--ec-hero-bg);
  position: relative;
  overflow: hidden;
}

.ec-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 8 Q60 30 40 60 Q20 30 40 8Z' fill='none' stroke='rgba(61,107,74,0.05)' stroke-width='1.5'/%3E%3C/svg%3E");
  pointer-events: none;
}

.ec-hero::after {
  content: '';
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(61,107,74,0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* ── Amber price accent ──────────────────────────────────────── */
.ec-price { color: var(--ec-price-color); }
.ec-save-color { color: var(--ec-accent); }

/* ── Cards: forest hover ─────────────────────────────────────── */
.ec-product-card {
  transition: box-shadow 0.3s ease, transform 0.25s ease;
}

.ec-product-card:hover {
  box-shadow: var(--ms-forest-glow) !important;
  transform: translateY(-3px);
}

.ec-card-img-wrap {
  background: var(--ec-surface-2) !important;
}

/* ── Eco certification chips ─────────────────────────────────── */
.ec-eco-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ms-amber-accent);
  color: var(--ec-accent-dark);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  margin: 2px;
}

/* ── Section title: slab serif authority ────────────────────── */
.ec-section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

/* ── Trust strip: sage green tint ───────────────────────────── */
.ec-trust-strip {
  border-top: var(--ms-leaf-border) !important;
  border-bottom: var(--ms-leaf-border) !important;
}

/* ── Category pills ──────────────────────────────────────────── */
.ec-pill {
  border-radius: var(--ec-btn-radius) !important;
  font-weight: 600;
  font-size: 0.8rem !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; }
}