/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║          TORVALI THEME — BLOOMING SPRING                     ║
 * ║  A vibrant spring flower theme with peonies, cherry          ║
 * ║  blossoms, garden greens, and warm golden sunshine.          ║
 * ║                                                              ║
 * ║  HOW IT WORKS                                                ║
 * ║  • This file is loaded AFTER the base storefront styles      ║
 * ║  • Override any variable or class below                      ║
 * ║  • The merchant's chosen accent color is applied via JS      ║
 * ║    and will override --accent at runtime                     ║
 * ║  • See /theme-spec for full documentation                    ║
 * ╚══════════════════════════════════════════════════════════════╝
 */


/* ═══════════════════════════════════════════════════════════════
   GOOGLE FONTS — Playfair Display (headings) + DM Sans (body)
   ═══════════════════════════════════════════════════════════════ */

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

:root {
  --font: 'DM Sans', sans-serif;
}

body {
  font-family: var(--font);
}

h1, h2, h3, h4, .sf-logo, .sf-footer-brand .sf-footer-name {
  font-family: 'Playfair Display', serif;
}


/* ═══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — Spring Flower Palette
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Accent — vibrant peony pink */
  --accent:       #E83E8C;
  --accent-dark:  #C0226E;

  /* Surfaces — warm petal cream */
  --surface:      #FFF5F8;
  --white:        #FFFBFE;

  /* Typography */
  --text:         #2D1A24;   /* deep plum-black */
  --text-muted:   #8B5E74;   /* dusty rose muted */

  /* Borders — soft blossom pink */
  --border:       #F5C6D8;

  /* Rounded — soft petals */
  --radius:       14px;

  /* Elevation — warm, soft bloom shadows */
  --shadow:
    0 2px 6px rgba(232, 62, 140, 0.08),
    0 8px 24px rgba(232, 62, 140, 0.10);

  /* Spring palette extras */
  --spring-green:     #22C55E;
  --spring-green-dk:  #15803D;
  --spring-yellow:    #FBBF24;
  --spring-lavender:  #A78BFA;
  --spring-sky:       #38BDF8;
  --spring-peach:     #FB923C;
  --spring-coral:     #F43F5E;
}


/* ═══════════════════════════════════════════════════════════════
   2. NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.sf-nav {
  background: rgba(255, 251, 254, 0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1.5px solid var(--border);
  /* Subtle blossom shimmer at the bottom */
  box-shadow: 0 2px 12px rgba(232, 62, 140, 0.06);
}

.sf-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.01em;
  /* Gentle gradient for the logo */
  background: linear-gradient(135deg, var(--accent) 0%, var(--spring-peach) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ═══════════════════════════════════════════════════════════════
   3. ANNOUNCEMENT BAR — cherry blossom gradient
   ═══════════════════════════════════════════════════════════════ */

.sf-announcement {
  background: linear-gradient(90deg,
    var(--spring-coral)  0%,
    var(--accent)        40%,
    var(--spring-peach)  75%,
    var(--spring-yellow) 100%);
  color: #ffffff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 11px 24px;
  text-align: center;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.12);
}


/* ═══════════════════════════════════════════════════════════════
   4. HERO SECTION — garden in full bloom
   ═══════════════════════════════════════════════════════════════ */

.sf-hero-bg {
  /* Sunrise-over-garden gradient: warm coral → peony → lavender dusk */
  background: linear-gradient(
    135deg,
    #FF6B9D  0%,
    #E83E8C  25%,
    #C026A0  55%,
    #7C3AED  85%,
    #4F3B6D  100%
  );
  /* Decorative petal pattern overlay */
  position: relative;
}

.sf-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(251, 191, 36, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.06) 0%, transparent 30%);
  pointer-events: none;
}

.sf-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 5.5vw, 3.5rem);
  font-weight: 800;
  font-style: italic;
  color: #ffffff;
  line-height: 1.12;
  margin-bottom: 18px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.18);
  /* Subtle warm shimmer on headline */
  letter-spacing: -0.02em;
}

.sf-hero-desc {
  color: rgba(255, 255, 255, 0.90);
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  max-width: 500px;
  line-height: 1.75;
}

.sf-hero-btn {
  background: #ffffff;
  color: var(--accent);
  padding: 15px 32px;
  border-radius: 50px;           /* pill shape — like a tulip petal */
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  display: inline-block;
  box-shadow: 0 4px 20px rgba(0,0,0,0.16);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sf-hero-btn:hover {
  background: #FFF0F6;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 28px rgba(232, 62, 140, 0.28);
}


/* ═══════════════════════════════════════════════════════════════
   5. CATEGORY BAR — spring stem green underline
   ═══════════════════════════════════════════════════════════════ */

.sf-cats {
  border-bottom: 2px solid var(--border);
  background: var(--white);
}

.sf-cat-btn {
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  border-bottom: 3px solid transparent;
  padding: 14px 18px;
  transition: color 0.15s;
  letter-spacing: 0.01em;
}

.sf-cat-btn:hover {
  color: var(--accent);
}

.sf-cat-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}


/* ═══════════════════════════════════════════════════════════════
   6. PRODUCT CARDS — soft petal surfaces
   ═══════════════════════════════════════════════════════════════ */

.sf-product-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.sf-product-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
  border-color: #F9A8C9;
}

.sf-product-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}

.sf-price {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-dark);
}

/* Sale badge — sunshine yellow-green instead of red */
.sf-discount-badge {
  background: #ECFDF5;
  color: var(--spring-green-dk);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 50px;
  letter-spacing: 0.03em;
}


/* ═══════════════════════════════════════════════════════════════
   7. CART BUTTON & SIDEBAR
   ═══════════════════════════════════════════════════════════════ */

.sf-cart-count {
  background: var(--accent);
  color: #ffffff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
}

.sf-cart-checkout-btn {
  background: linear-gradient(135deg, var(--accent) 0%, var(--spring-peach) 100%);
  color: #ffffff;
  border-radius: 50px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 16px rgba(232, 62, 140, 0.30);
  transition: filter 0.15s ease, transform 0.15s ease;
}

.sf-cart-checkout-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}


/* ═══════════════════════════════════════════════════════════════
   8. FOOTER — deep garden earth tones
   ═══════════════════════════════════════════════════════════════ */

.sf-footer {
  background: linear-gradient(160deg, #2D1A24 0%, #1A1028 100%);
  color: rgba(255, 255, 255, 0.70);
  padding: 64px 24px 36px;
  /* Delicate top border like scattered petals */
  border-top: 3px solid;
  border-image: linear-gradient(90deg,
    var(--spring-coral),
    var(--accent),
    var(--spring-lavender),
    var(--spring-sky)) 1;
}

.sf-footer-brand .sf-footer-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 800;
  font-style: italic;
  background: linear-gradient(135deg, #FF9DC4 0%, var(--spring-peach) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sf-footer-col h4 {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #FFB3D1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.sf-footer-col ul li a {
  color: rgba(255, 255, 255, 0.50);
  font-family: 'DM Sans', sans-serif;
  transition: color 0.15s;
}

.sf-footer-col ul li a:hover {
  color: #FFB3D1;
}


/* ═══════════════════════════════════════════════════════════════
   9. BUTTONS & FORM INPUTS
   ═══════════════════════════════════════════════════════════════ */

.btn-primary,
.cart-checkout-btn,
.checkout-submit {
  background: linear-gradient(135deg, var(--accent) 0%, var(--spring-peach) 100%);
  color: #ffffff;
  border-radius: 50px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(232, 62, 140, 0.28);
  transition: filter 0.15s ease, transform 0.15s ease;
}

.btn-primary:hover,
.cart-checkout-btn:hover,
.checkout-submit:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 62, 140, 0.14);
}


/* ═══════════════════════════════════════════════════════════════
   10. RATINGS & REVIEWS — warm golden sunshine
   ═══════════════════════════════════════════════════════════════ */

.sf-stars {
  color: var(--spring-yellow);
  filter: drop-shadow(0 1px 2px rgba(251, 191, 36, 0.30));
}


/*
 * ─── SPRING FLOWER THEME NOTES ─────────────────────────────────
 *
 *  Palette summary:
 *    Accent      — Peony Pink    #E83E8C
 *    Coral       — Cherry        #F43F5E
 *    Peach       — Tulip         #FB923C
 *    Yellow      — Sunflower     #FBBF24
 *    Lavender    — Wisteria      #A78BFA
 *    Sky         — Hydrangea     #38BDF8
 *    Green       — Stem          #22C55E
 *    Background  — Petal Cream   #FFFBFE
 *    Dark text   — Deep Plum     #2D1A24
 *
 *  Typography:
 *    Headings    — Playfair Display (italic for softness)
 *    Body        — DM Sans (clean, modern legibility)
 *
 *  Special effects:
 *    • Hero uses a peony-to-lavender sunset gradient
 *    • Buttons use pill shapes (tulip petal form)
 *    • Footer border uses a rainbow petal gradient
 *    • Logo uses a peony-to-peach gradient text
 *    • Sale badge uses fresh green instead of harsh red
 *
 * ─── TIPS ──────────────────────────────────────────────────────
 *
 *  • Keep file size under 1 MB
 *  • Avoid JavaScript or <script> tags — CSS only
 *  • Test by uploading to your own merchant store first
 *
 * ─── SUBMIT ────────────────────────────────────────────────────
 *
 *  Ready? Head to /designer → Submit New → Theme
 *
 * ───────────────────────────────────────────────────────────── */