/*
 * PETAL — Beauty & Skincare E-Commerce Theme
 * Fresh · Clean · Youthful
 * Soft coral + warm ivory + sage mint.
 * Inspired by: Glow Recipe, Tatcha, Fenty Skin, K-Beauty brands.
 * Best for: clean beauty, K-beauty, natural skincare, everyday routines.
 */

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

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --ec-primary:         #E8847A;
  --ec-primary-dark:    #C86460;
  --ec-primary-light:   rgba(232,132,122,0.1);
  --ec-accent:          #8DB89A;
  --ec-accent-dark:     #6D9878;
  --ec-accent-2:        #F4C5B8;

  /* ── Surfaces ────────────────────────────────────────────── */
  --ec-bg:              #FEFCFB;
  --ec-surface:         #FFFFFF;
  --ec-surface-2:       #FFF0EE;
  --ec-surface-3:       #FFE4E0;
  --ec-border:          rgba(232,132,122,0.2);
  --ec-border-subtle:   rgba(0,0,0,0.06);
  --ec-mint-surface:    rgba(141,184,154,0.08);

  /* ── Typography ─────────────────────────────────────────── */
  --ec-text-heading:    #2C1810;
  --ec-text-body:       #6B4E46;
  --ec-text-muted:      #B09088;
  --ec-font-heading:    'DM Serif Display', Georgia, serif;
  --ec-font-body:       'DM Sans', system-ui, sans-serif;
  --ec-letter-heading:  -0.01em;
  --ec-letter-cta:      0.02em;
  --ec-weight-heading:  400;

  /* ── Hero ────────────────────────────────────────────────── */
  --ec-hero-bg:         linear-gradient(135deg, #FEFCFB 0%, #FFF5F3 40%, #FFF0EE 100%);
  --ec-hero-text:       #2C1810;
  --ec-hero-accent:     #E8847A;

  /* ── Buttons ─────────────────────────────────────────────── */
  --ec-btn-bg:          #E8847A;
  --ec-btn-hover:       #C86460;
  --ec-btn-text:        #FFFFFF;
  --ec-btn-radius:      50px;
  --ec-btn-transform:   none;
  --ec-btn-weight:      600;
  --ec-btn-letter:      0.01em;
  --ec-btn-secondary-bg:     transparent;
  --ec-btn-secondary-border: #E8847A;
  --ec-btn-secondary-text:   #E8847A;

  /* ── Cards ───────────────────────────────────────────────── */
  --ec-card-bg:         #FFFFFF;
  --ec-card-border:     rgba(232,132,122,0.12);
  --ec-card-shadow:     0 2px 16px rgba(232,132,122,0.08);
  --ec-card-shadow-hover: 0 12px 40px rgba(232,132,122,0.16);
  --ec-card-radius:     24px;
  --ec-img-radius:      20px;

  /* ── Badges ──────────────────────────────────────────────── */
  --ec-badge-new:       #8DB89A;
  --ec-badge-sale:      #E8847A;
  --ec-badge-best:      #C86460;
  --ec-badge-autoship:  #A088C8;
  --ec-badge-radius:    50px;

  /* ── Inputs ──────────────────────────────────────────────── */
  --ec-input-bg:        #FFFFFF;
  --ec-input-border:    rgba(232,132,122,0.25);
  --ec-input-border-focus: #E8847A;
  --ec-input-text:      #2C1810;
  --ec-input-radius:    50px;

  /* ── Category pills ──────────────────────────────────────── */
  --ec-pill-bg:         #FFF0EE;
  --ec-pill-bg-active:  #E8847A;
  --ec-pill-text:       #6B4E46;
  --ec-pill-text-active:#FFFFFF;

  /* ── Trust bar ───────────────────────────────────────────── */
  --ec-trust-bg:        #FFF5F3;
  --ec-trust-text:      #6B4E46;
  --ec-trust-icon:      #E8847A;

  /* ── Price ───────────────────────────────────────────────── */
  --ec-price-color:     #2C1810;
  --ec-compare-color:   #B09088;
  --ec-save-color:      #E8847A;

  /* ── Stars ───────────────────────────────────────────────── */
  --ec-star-filled:     #E8847A;
  --ec-star-empty:      #F4C5B8;

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

  /* ── Petal-specific ──────────────────────────────────────── */
  --pt-blush-glow:      0 8px 32px rgba(232,132,122,0.2);
  --pt-mint-accent:     rgba(141,184,154,0.15);
  --pt-ingredient-bg:   rgba(141,184,154,0.1);
  --pt-ingredient-text: #4A8060;
}

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

/* Blush circle background element */
.ec-hero::before {
  content: '';
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  width: 55vw;
  max-width: 700px;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(244,197,184,0.4) 0%, rgba(255,240,238,0.2) 60%, transparent 80%);
  border-radius: 50%;
  pointer-events: none;
}

/* Sage mint accent blob */
.ec-hero::after {
  content: '';
  position: absolute;
  left: -10%;
  bottom: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(141,184,154,0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* ── Card: bouncy lift hover ─────────────────────────────────── */
.ec-product-card {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
}

.ec-product-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--pt-blush-glow) !important;
}

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

/* ── Ingredient badges (petal-specific): shown on product cards */
.ec-ingredient-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--pt-ingredient-bg);
  color: var(--pt-ingredient-text);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 50px;
  margin: 2px;
}

/* ── Category pill: pill shape ───────────────────────────────── */
.ec-pill {
  border-radius: 50px !important;
  font-weight: 500;
}

/* ── Trust strip: blush tint ─────────────────────────────────── */
.ec-trust-strip {
  background: var(--ec-trust-bg) !important;
}

/* ── Nav: clean white ────────────────────────────────────────── */
.ec-nav {
  background: rgba(254,252,251,0.95) !important;
  backdrop-filter: blur(16px);
}

/* ── Section titles: serif warmth ────────────────────────────── */
.ec-section-title {
  font-style: italic;
}

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

/* ── Stars: coral ────────────────────────────────────────────── */
.ec-star-filled { color: var(--ec-star-filled) !important; }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --ec-hero-py: 4.5rem;
    --ec-section-py: 3rem;
  }
  /* Single column on small mobile, 2-col on regular mobile */
  .ec-grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .ec-hero::before { width: 80vw; top: auto; bottom: -10%; right: -20%; transform: none; }
  .ec-hero::after  { display: none; }
  .ec-hero-headline { font-size: 2rem !important; }

  /* Touch-friendly 44px minimum tap targets */
  .ec-btn, .ec-pill, .ec-qty-btn { min-height: 44px; }
}

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

/* ── Very small screens: single column ───────────────────────── */
@media (max-width: 380px) {
  .ec-grid-4 { grid-template-columns: 1fr !important; }
}