/*
 * DEW — Eco-Friendly E-Commerce Theme
 * Pure · Airy · Minimalist
 * Clear sky blue + crisp white + soft sage mint.
 * Inspired by: Seventh Generation, Method, Dropps, Grove.
 * Best for: non-toxic, fragrance-free, baby-safe, hypoallergenic home care.
 */

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

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --ec-primary:         #4A90B8;
  --ec-primary-dark:    #2E6E96;
  --ec-primary-light:   rgba(74,144,184,0.1);
  --ec-accent:          #7DC4A0;
  --ec-accent-dark:     #5AA480;
  --ec-accent-light:    rgba(125,196,160,0.1);

  /* ── Surfaces ────────────────────────────────────────────── */
  --ec-bg:              #F6FBFF;
  --ec-surface:         #FFFFFF;
  --ec-surface-2:       #EBF5FB;
  --ec-surface-3:       #DCF0F7;
  --ec-border:          rgba(74,144,184,0.18);
  --ec-border-subtle:   rgba(0,0,0,0.05);

  /* ── Typography ─────────────────────────────────────────── */
  --ec-text-heading:    #0D2233;
  --ec-text-body:       #2A4A60;
  --ec-text-muted:      #7A9EB8;
  --ec-font-heading:    'Outfit', system-ui, sans-serif;
  --ec-font-body:       'Outfit', system-ui, sans-serif;
  --ec-letter-heading:  -0.02em;
  --ec-letter-cta:      0.01em;
  --ec-weight-heading:  700;

  /* ── Hero ────────────────────────────────────────────────── */
  --ec-hero-bg:         linear-gradient(160deg, #F6FBFF 0%, #EBF5FB 50%, #DFF0F8 100%);
  --ec-hero-text:       #0D2233;
  --ec-hero-accent:     #4A90B8;

  /* ── Buttons ─────────────────────────────────────────────── */
  --ec-btn-bg:          #4A90B8;
  --ec-btn-hover:       #2E6E96;
  --ec-btn-text:        #FFFFFF;
  --ec-btn-radius:      8px;
  --ec-btn-transform:   none;
  --ec-btn-weight:      600;
  --ec-btn-letter:      0.01em;
  --ec-btn-secondary-bg:     transparent;
  --ec-btn-secondary-border: #4A90B8;
  --ec-btn-secondary-text:   #4A90B8;

  /* ── Cards ───────────────────────────────────────────────── */
  --ec-card-bg:         #FFFFFF;
  --ec-card-border:     rgba(74,144,184,0.1);
  --ec-card-shadow:     0 2px 12px rgba(74,144,184,0.08);
  --ec-card-shadow-hover: 0 8px 32px rgba(74,144,184,0.18);
  --ec-card-radius:     12px;
  --ec-img-radius:      10px;

  /* ── Badges ──────────────────────────────────────────────── */
  --ec-badge-new:       #4A90B8;
  --ec-badge-sale:      #E07A5F;
  --ec-badge-best:      #2E6E96;
  --ec-badge-autoship:  #7DC4A0;
  --ec-badge-radius:    6px;

  /* ── Inputs ──────────────────────────────────────────────── */
  --ec-input-bg:        #FFFFFF;
  --ec-input-border:    rgba(74,144,184,0.2);
  --ec-input-border-focus: #4A90B8;
  --ec-input-text:      #0D2233;
  --ec-input-radius:    8px;

  /* ── Category pills ──────────────────────────────────────── */
  --ec-pill-bg:         #EBF5FB;
  --ec-pill-bg-active:  #4A90B8;
  --ec-pill-text:       #2A4A60;
  --ec-pill-text-active:#FFFFFF;

  /* ── Trust bar ───────────────────────────────────────────── */
  --ec-trust-bg:        #EBF5FB;
  --ec-trust-text:      #2A4A60;
  --ec-trust-icon:      #4A90B8;

  /* ── Price ───────────────────────────────────────────────── */
  --ec-price-color:     #0D2233;
  --ec-compare-color:   #7A9EB8;
  --ec-save-color:      #4A90B8;

  /* ── Stars ───────────────────────────────────────────────── */
  --ec-star-filled:     #4A90B8;
  --ec-star-empty:      #C8E4F4;

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

  /* ── Dew-specific ────────────────────────────────────────── */
  --dw-water-glow:      0 4px 24px rgba(74,144,184,0.18);
  --dw-mint-chip-bg:    rgba(125,196,160,0.1);
  --dw-mint-chip-text:  #3A7A58;
  --dw-certif-bg:       rgba(74,144,184,0.07);
  --dw-certif-border:   rgba(74,144,184,0.2);
}

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

/* Water ripple circles */
.ec-hero::before {
  content: '';
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 80px solid rgba(74,144,184,0.05);
  box-shadow:
    0 0 0 40px rgba(74,144,184,0.04),
    0 0 0 80px rgba(74,144,184,0.03);
  pointer-events: none;
}

.ec-hero::after {
  content: '';
  position: absolute;
  left: -5%;
  bottom: -30%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(125,196,160,0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* ── Non-toxic callout strip (dew-specific) ──────────────────── */
.ec-dew-callout {
  background: var(--dw-certif-bg);
  border: 1px solid var(--dw-certif-border);
  border-radius: 8px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ec-primary);
  letter-spacing: 0.02em;
}

/* ── Certification chips (dew-specific) ───────────────────────── */
.ec-eco-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--dw-mint-chip-bg);
  color: var(--dw-mint-chip-text);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  margin: 2px;
}

/* ── Cards: clinical clean hover ─────────────────────────────── */
.ec-product-card {
  transition: box-shadow 0.25s ease, transform 0.2s ease, border-color 0.25s ease;
}

.ec-product-card:hover {
  box-shadow: var(--dw-water-glow), 0 0 0 1px rgba(74,144,184,0.25) !important;
  transform: translateY(-2px);
}

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

/* ── Nav: ultra-clean white ──────────────────────────────────── */
.ec-nav {
  background: rgba(246,251,255,0.96) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(74,144,184,0.1) !important;
}

/* ── Trust strip: sky tint ───────────────────────────────────── */
.ec-trust-strip {
  border-top: 1px solid rgba(74,144,184,0.12) !important;
  border-bottom: 1px solid rgba(74,144,184,0.12) !important;
}

/* ── Sage mint autoship hint ─────────────────────────────────── */
.ec-autoship-hint {
  color: var(--ec-accent) !important;
}

/* ── Stars: sky blue ─────────────────────────────────────────── */
.ec-star-filled { color: var(--ec-star-filled) !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; }
  .ec-hero::before { display: none; }
}

@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; }
}