@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Sora:wght@300;400;500;600;700&display=swap');

:root {
    /* Warm editorial neutrals */
    --color-bg: #faf7f3;
    --color-bg-2: #f3ede6;
    --color-bg-white: #ffffff;
    --color-bg-rgb: 250, 247, 243;
    --color-bg-white-rgb: 255, 255, 255;
    --color-surface: rgba(28, 20, 12, 0.02);
    --color-surface-hover: rgba(28, 20, 12, 0.045);
    --color-text: #1f1a15;
    --color-text-secondary: #5c5248;
    --color-text-muted: #a89e93;
    --color-border: #ece4d9;
    --color-border-light: #f4efe8;

    /* Mandated multi-hue palette */
    --color-accent: #ac0eeb;
    --color-accent-2: #e7752b;
    --color-accent-3: #20ea23;
    --color-accent-warm: #e6960a;
    --color-accent-soft: #ede3f1;
    --color-accent-2-soft: #f1e9e4;
    --color-accent-3-soft: #e3f1e4;
    --color-accent-warm-soft: #f2ece3;

    --color-star: #e6960a;
    --color-success: #1f9d3f;
    --color-badge: #ac0eeb;
    --color-info: #e7752b;

    /* Editorial footer */
    --color-footer-bg: #17110c;
    --color-footer-text: #f4efe8;
    --color-footer-muted: #a89e93;
    --color-footer-link: #cfc6ba;
    --color-footer-border: rgba(255,255,255,0.09);
    --color-footer-social-bg: rgba(255,255,255,0.07);
    --color-footer-social-border: rgba(255,255,255,0.12);

    --font-heading: 'Cormorant Garamond', 'Georgia', serif;
    --font-body: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --shadow-xs: 0 1px 2px rgba(31,26,21,0.04);
    --shadow-sm: 0 2px 8px rgba(31,26,21,0.05), 0 1px 2px rgba(31,26,21,0.03);
    --shadow-md: 0 8px 20px rgba(31,26,21,0.07), 0 2px 6px rgba(31,26,21,0.04);
    --shadow-lg: 0 16px 40px rgba(31,26,21,0.09), 0 6px 14px rgba(31,26,21,0.05);
    --shadow-xl: 0 28px 60px rgba(31,26,21,0.12), 0 10px 24px rgba(31,26,21,0.06);
}

/* Editorial heading polish */
.hero-title,
.section-title,
.product-title,
.page-title {
    font-weight: 600;
    letter-spacing: -0.5px;
}
.hero-title { font-weight: 700; letter-spacing: -1.5px; }

/* ── HERO — centered editorial stack with airy layered background ─────────── */
.hero {
    text-align: center;
    background:
        linear-gradient(180deg, #ffffff 0%, var(--color-bg) 100%);
}
.hero::before {
    content: '';
    position: absolute;
    top: -40%; left: -20%;
    width: 140%; height: 120%;
    background:
        radial-gradient(ellipse 40% 50% at 30% 20%, rgba(172,14,235,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 72% 30%, rgba(231,117,43,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 90%, rgba(230,150,10,0.06) 0%, transparent 60%);
    pointer-events: none;
}
.hero-content { text-align: center; margin-left: auto; margin-right: auto; }
.hero-actions { justify-content: center; }
.hero-subtitle { max-width: 520px; margin-left: auto; margin-right: auto; }

.hero-badge {
    text-transform: uppercase;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(172,14,235,0.22);
    color: var(--color-accent);
    box-shadow: var(--shadow-xs);
}

/* ── Gradient-tinted CTA buttons ─────────────────────────────────────────── */
.btn-primary {
    background: linear-gradient(135deg, var(--color-accent) 0%, #7c1fd6 55%, var(--color-accent-2) 130%);
    box-shadow: 0 6px 18px rgba(172,14,235,0.28);
}
.btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 10px 26px rgba(172,14,235,0.34);
}
.btn-outline {
    border: 1.5px solid var(--color-accent-2);
    color: var(--color-accent-2);
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(8px);
}
.btn-cta {
    background: linear-gradient(135deg, var(--color-accent) 0%, #8a1fd9 60%, var(--color-accent-warm) 140%);
    box-shadow: 0 4px 12px rgba(172,14,235,0.22);
}
.btn-cta:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* ── Glassy translucent product cards with soft blur ─────────────────────── */
.product-card {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.62);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: var(--shadow-sm);
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(172,14,235,0.28);
}
.card-body { flex: 1; display: flex; flex-direction: column; }
.card-body .btn-cta { margin-top: auto; }
.card-badge {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    padding: 5px 14px;
    letter-spacing: 0.4px;
}

/* Glass surface for header + category cards */
.site-header {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 1px solid var(--color-border);
}
.category-card {
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.65);
}
.category-card:hover { border-color: var(--color-accent-2); }

/* Pill badges everywhere */
.hero-badge, .card-badge, .top-pick-tag, .trending-hot, .price-save { border-radius: 999px; }

/* ── Section accents ─────────────────────────────────────────────────────── */
.faq-section { background: var(--color-accent-2-soft); }
.faq-item[open] { border-color: var(--color-accent-2); }
.faq-item[open] .faq-question::after { color: var(--color-accent-2); }
.testimonials-section { background: var(--color-accent-3-soft); }
.top-picks-section { background: var(--color-accent-warm-soft); }
.stats-section {
    background: linear-gradient(135deg, var(--color-accent) 0%, #7c1fd6 45%, var(--color-accent-warm) 120%);
}
.newsletter-form button { background: var(--color-accent-2); }
.newsletter-form button:hover { background: #cf631f; transform: translateY(-1px); }

/* ── New widgets — glassy editorial cards ────────────────────────────────── */
.price-history-section,
.user-reviews-section {
    background: rgba(255,255,255,0.66);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: var(--shadow-md);
}
.chart-bar {
    background: linear-gradient(180deg, var(--color-accent-soft) 0%, var(--color-accent) 100%);
}
.chart-bar-current {
    background: linear-gradient(180deg, #6fe875 0%, var(--color-success) 100%);
    box-shadow: 0 0 12px rgba(31,157,63,0.28);
}
.review-avatar {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
}
.review-bar-fill { background: var(--color-star); }

.pros-cons-widget,
.delivery-widget {
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(255,255,255,0.65);
    box-shadow: var(--shadow-sm);
}
.delivery-item svg { color: var(--color-accent); }

.social-proof-popup {
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    border: 1px solid rgba(255,255,255,0.75);
    box-shadow: var(--shadow-lg);
}
.popup-icon {
    background: linear-gradient(135deg, var(--color-success), #16833a);
}

/* Brand showcase gradient initials */
.brand-initial {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-warm));
}
.trending-rank { color: var(--color-accent); }

/* ── Decorative animated accent line under section titles ─────────────────── */
.section-header .section-title::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2), var(--color-accent-warm));
    background-size: 200% 100%;
    animation: verano-shimmer 4s ease-in-out infinite;
}
@keyframes verano-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@media (max-width: 768px) {
    .hero::before { opacity: 0.7; }
}