/* ============================================
   Aylemu Baby v3 — Premium Design System
   US/UK Market — Inspired by Maisonette, Hanna Andersson
   Color Psychology: Trust (sage) + Warmth (clay/blush)
   ============================================ */

:root {
    /* Primary Palette - Muted & Sophisticated */
    --sage: #7C9A8E;
    --sage-light: #E8F0EC;
    --sage-dark: #5A7568;
    --clay: #C4A882;
    --clay-light: #F5EDE3;
    --clay-dark: #A08B6E;
    --blush: #D4918E;
    --blush-light: #FCEAE9;
    --blush-dark: #B5706D;

    /* Neutrals */
    --bg: #FDFAF7;
    --bg-alt: #F7F3EE;
    --bg-dark: #1A1612;
    --text: #2C2420;
    --text-mid: #6B5E56;
    --text-light: #9B8F87;
    --border: #E8E2DC;
    --white: #FFFFFF;

    /* Accent for CTA */
    --cta: #C4725C;
    --cta-hover: #B0634F;
    --cta-light: rgba(196,114,92,0.1);

    /* Effects */
    --shadow-xs: 0 1px 3px rgba(44,36,32,0.04);
    --shadow-sm: 0 2px 8px rgba(44,36,32,0.06);
    --shadow-md: 0 4px 24px rgba(44,36,32,0.08);
    --shadow-lg: 0 12px 48px rgba(44,36,32,0.12);
    --shadow-xl: 0 24px 64px rgba(44,36,32,0.16);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration: 0.35s;

    --font-display: 'Quicksand', 'Nunito', sans-serif;
    --font-body: 'Nunito', -apple-system, sans-serif;
}

/* === RESET === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; transition: color var(--duration) var(--ease); }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font-body); }
input { font-family: var(--font-body); }
img { max-width: 100%; display: block; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.hidden { display: none !important; }

/* === UTILITY === */
.accent { color: var(--cta); }
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 0.95rem; border-radius: var(--radius-full);
    padding: 12px 28px; transition: all var(--duration) var(--ease);
    cursor: pointer; border: none; text-decoration: none;
}
.btn--primary { background: var(--cta); color: var(--white); box-shadow: 0 4px 16px rgba(196,114,92,0.3); }
.btn--primary:hover { background: var(--cta-hover); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(196,114,92,0.4); }
.btn--ghost { background: transparent; color: var(--text); border: 1.5px solid var(--border); }
.btn--ghost:hover { border-color: var(--cta); color: var(--cta); }
.btn--white { background: var(--white); color: var(--bg-dark); box-shadow: var(--shadow-md); }
.btn--white:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--lg { padding: 15px 36px; font-size: 1rem; }
.btn--full { width: 100%; justify-content: center; }

/* === REVEAL & SKELETON === */
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.reveal-up { opacity: 1; transform: translateY(0); transition: none; }
.reveal-up.visible { opacity: 1; transform: translateY(0); }

/* === SECTION HEADER === */
.section-head { text-align: center; margin-bottom: 48px; }
.section-head__label {
    display: inline-block; font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 2px; color: var(--cta);
    margin-bottom: 12px;
}
.section-head__title { font-family: var(--font-display); font-size: 2.8rem; font-weight: 700; line-height: 1.2; }
.section-head__desc { color: var(--text-mid); font-size: 1.05rem; max-width: 520px; margin: 12px auto 0; }

/* ============================================
   ANNOUNCEMENT BAR
   ============================================ */
.announcement {
    background: var(--bg-dark); color: #ffffff; padding: 10px 24px;
    font-size: 0.82rem; text-align: center; position: relative;
}
.announcement__inner p { margin: 0; }
.announcement__close {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    color: rgba(255,255,255,0.5); font-size: 0.8rem; transition: color var(--duration);
}
.announcement__close:hover { color: var(--white); }

/* ============================================
   HEADER
   ============================================ */
.header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(253,250,247,0.92);
    z-index: 1000; padding: 16px 0; background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(232,226,220,0.6);
    transition: box-shadow var(--duration) var(--ease);
}
.header.scrolled { box-shadow: var(--shadow-md); }
.header__container {
    display: flex; align-items: center; justify-content: flex-start; gap: 32px;
    max-width: 1240px; margin: 0 auto; padding: 0 24px; height: 68px;
}
.header__logo { display: flex; align-items: center; gap: 10px; }
.header__logo-icon { font-size: 1.6rem; }
.header__logo-text { display: flex; flex-direction: column; }
.header__brand { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.header__tagline { font-size: 0.65rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }
.header__nav { margin-right: auto; }
.header__nav-list { display: flex; gap: 32px; }
.header__nav-link {
    font-size: 0.9rem; font-weight: 500; color: var(--text-mid);
    position: relative; padding: 4px 0; white-space: nowrap;
}
.header__nav-link::after {
    content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px;
    background: var(--cta); transition: width var(--duration) var(--ease);
}
.header__nav-link:hover, .header__nav-link.active { color: var(--text); }
.header__nav-link:hover::after, .header__nav-link.active::after { width: 100%; }
.header__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.header__actions-divider { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }
.loyalty-badge {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #333; font-weight: 800; font-size: 0.75rem;
    padding: 6px 12px; border-radius: var(--radius-full);
    display: flex; align-items: center; gap: 4px; cursor: pointer;
    box-shadow: 0 4px 12px rgba(255,165,0,0.2); transition: all 0.2s ease;
}
.loyalty-badge:hover { transform: scale(1.05); }
.header__action-btn {
    position: relative; width: 38px; height: 38px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem; color: var(--text); transition: all var(--duration) var(--ease);
}
.header__action-btn:hover { background: var(--clay-light); }
.header__badge {
    position: absolute; top: -2px; right: -4px; width: 18px; height: 18px;
    background: var(--cta); color: var(--white); font-size: 0.65rem; font-weight: 700;
    border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;
    line-height: 1; border: 2px solid var(--white);
}
.header__hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.header__hamburger span { width: 22px; height: 2px; background: var(--text); transition: all var(--duration); border-radius: 2px; }

/* ============================================
   PREMIUM SEARCH OVERLAY
   ============================================ */
.search-overlay {
    position: fixed; inset: 0; background: rgba(255, 255, 255, 0.98); 
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    z-index: 10000; animation: fadeIn 0.3s var(--ease);
    display: flex; flex-direction: column; overflow-y: auto;
}
.search-overlay__header {
    display: flex; align-items: center; justify-content: space-between;
    max-width: 800px; margin: 40px auto 20px; width: 100%; padding: 0 24px; position: relative;
}
.search-overlay__input-wrapper {
    flex: 1; display: flex; align-items: center; 
    border-bottom: 2px solid var(--text); padding-bottom: 12px;
}
.search-overlay__input-wrapper i { font-size: 1.5rem; color: var(--text-mid); margin-right: 16px; }
.search-overlay__input {
    flex: 1; border: none; font-size: 2rem; outline: none; font-weight: 700; 
    font-family: var(--font-display); background: transparent; color: var(--text);
}
.search-overlay__input::placeholder { color: var(--text-light); font-weight: 500; opacity: 0.6; }
.search-overlay__close { 
    font-size: 2.2rem; color: var(--text); transition: transform 0.2s; 
    padding: 8px; cursor: pointer; margin-left: 24px; border: none; background: transparent; 
}
.search-overlay__close:hover { transform: scale(1.1); color: var(--cta); }
.search-overlay__content { max-width: 800px; width: 100%; margin: 0 auto; padding: 0 24px 60px; }
.search-overlay__results { margin-top: 24px; }
.search-result-item {
    display: flex; align-items: center; gap: 16px; padding: 16px; margin-bottom: 8px;
    border-radius: var(--radius-lg); cursor: pointer; transition: all var(--duration);
    border: 1px solid transparent; background: rgba(0,0,0,0.02);
}
.search-result-item:hover { background: var(--white); border-color: var(--border); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.search-result-item span:first-child { font-size: 2rem; background: var(--bg-alt); padding: 12px; border-radius: 12px; }
.search-result-item strong { font-size: 1.05rem; display: block; font-weight: 700; font-family: var(--font-display); margin-bottom: 4px; }
.search-result-item small { color: var(--text-mid); font-size: 0.85rem; font-weight: 500; }

/* ============================================
   HERO
   ============================================ */
.hero {
    position: relative; min-height: 65vh;
    display: flex; align-items: center; overflow: hidden;
    padding: 80px 0 40px;
}
.hero__bg {
    position: absolute; inset: 0; z-index: 0;
}
.hero__gradient {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--bg) 0%, var(--clay-light) 35%, var(--sage-light) 65%, var(--blush-light) 100%);
}
.hero__pattern {
    position: absolute; inset: 0; opacity: 0.03;
    background-image: radial-gradient(circle at 1px 1px, var(--text) 1px, transparent 0);
    background-size: 40px 40px;
}
.hero__container {
    max-width: 1240px; margin: 0 auto; padding: 0 24px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
    position: relative; z-index: 1;
}
.hero__label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--cta); margin-bottom: 20px;
}
.hero__label-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--cta); animation: pulse 2s infinite; }
.hero__title { font-family: var(--font-display); font-size: 3.8rem; font-weight: 800; line-height: 1.1; margin-bottom: 20px; color: var(--text); }
.hero__title-accent {
    background: linear-gradient(135deg, var(--cta), var(--blush), var(--sage));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero__desc { font-size: 1.1rem; color: var(--text-mid); line-height: 1.8; margin-bottom: 32px; max-width: 480px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.hero__trust { display: flex; gap: 24px; flex-wrap: wrap; }
.hero__trust-item { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--text-mid); }
.hero__trust-item i { color: var(--sage); }

/* Hero Showcase */
.hero__showcase { position: relative; }
.hero__showcase-main { position: relative; z-index: 2; }
.hero__showcase-card {
    background: var(--white); border-radius: var(--radius-xl); padding: 20px;
    box-shadow: var(--shadow-xl); max-width: 380px; margin: 0 auto;
    overflow: hidden; transition: transform var(--duration) var(--ease);
}
.hero__showcase-card:hover { transform: translateY(-8px); }
.hero__showcase-img {
    height: 280px; background: linear-gradient(135deg, var(--clay-light), var(--sage-light));
    border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center;
    font-size: 7rem; margin-bottom: 16px;
}
.hero__showcase-info { padding: 0 4px; }
.hero__showcase-tag {
    display: inline-block; background: var(--cta); color: var(--white);
    padding: 4px 12px; border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}
.hero__showcase-info h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; }
.hero__showcase-price { font-size: 1.2rem; font-weight: 700; color: var(--cta); margin-top: 4px; }

.hero__showcase-floating { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero__float {
    position: absolute; background: var(--white); border-radius: var(--radius-lg);
    padding: 12px 16px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px;
    animation: float 4s ease-in-out infinite; pointer-events: auto;
}
.hero__float span { font-size: 1.6rem; }
.hero__float small { font-size: 0.75rem; color: var(--text-light); display: block; }
.hero__float strong { font-size: 0.95rem; font-weight: 700; color: var(--cta); }
.hero__float--1 { top: 5%; right: -20px; animation-delay: 0s; }
.hero__float--2 { bottom: 15%; left: -30px; animation-delay: 1s; }
.hero__float--3 {
    bottom: 5%; right: 10%;
    flex-direction: column; text-align: center;
    animation-delay: 2s;
}
.hero__float-stars { font-size: 0.7rem; }

.hero__scroll-indicator {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: var(--text-light); font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase;
}
.hero__scroll-mouse {
    width: 24px; height: 38px; border: 2px solid var(--text-light); border-radius: 12px;
    display: flex; justify-content: center; padding-top: 8px;
}
.hero__scroll-wheel {
    width: 3px; height: 8px; background: var(--text-light); border-radius: 3px;
    animation: scrollWheel 2s infinite;
}

/* ============================================
   TRENDING NOW
   ============================================ */
.trending { padding: 50px 0 40px; background: var(--bg); }
.trending__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.trending__cta { text-align: center; margin-top: 32px; }

/* ============================================
   CATEGORIES
   ============================================ */
.categories { padding: 30px 0; }
.categories__grid {
    display: flex; gap: 16px; overflow-x: auto; padding-bottom: 16px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.categories__grid::-webkit-scrollbar { display: none; }
.cat-card {
    flex: 0 0 auto; min-width: 100px; scroll-snap-align: start;
    text-align: center; padding: 18px 8px; border-radius: var(--radius-xl);
    cursor: pointer; transition: all var(--duration) var(--ease-bounce);
    border: 2px solid transparent; position: relative;
}
.cat-card:hover, .cat-card.active { transform: translateY(-6px); box-shadow: var(--shadow-lg); background: var(--white); }
.cat-card.active { border-color: var(--cta); }
.cat-card__icon {
    width: 50px; height: 50px; border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 8px; font-size: 1.6rem;
    transition: transform var(--duration) var(--ease-bounce);
}
.cat-card:hover .cat-card__icon { transform: scale(1.15) rotate(5deg); }
.cat-card__name { font-weight: 700; font-size: 0.78rem; margin-bottom: 2px; }
.cat-card__count { font-size: 0.68rem; color: var(--text-light); }

/* ============================================
   PRODUCTS
   ============================================ */
.products { padding: 50px 0; background: var(--bg-alt); }
.products__tabs {
    display: flex; justify-content: center; gap: 8px; margin-bottom: 40px; flex-wrap: wrap;
}
.tab-btn {
    padding: 9px 24px; border-radius: var(--radius-full); font-weight: 600; font-size: 0.88rem;
    color: var(--text-mid); background: var(--white); border: 1.5px solid var(--border);
    transition: all var(--duration) var(--ease);
}
.tab-btn:hover { border-color: var(--cta); color: var(--cta); }
.tab-btn.active {
    background: var(--cta); color: var(--white); border-color: var(--cta);
    box-shadow: 0 4px 16px rgba(196,114,92,0.3);
}
.products__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}

/* Product Card */
.p-card {
    background: var(--white); border-radius: var(--radius-xl); overflow: hidden;
    border: 1px solid var(--border); transition: all var(--duration) var(--ease-bounce);
    position: relative; cursor: pointer;
}
.p-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: transparent; }
.p-card__media {
    position: relative; height: 220px; display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.p-card__media-bg {
    position: absolute; inset: 0; background: #eef2f3;
    border-radius: var(--radius-lg); z-index: 0;
    transition: transform 0.6s var(--ease);
}
.p-card:hover .p-card__media-bg { transform: scale(1.03); }
.p-card__emoji {
    font-size: 4.5rem; position: relative; z-index: 1;
    transition: transform 0.5s var(--ease-bounce);
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.1));
}
.p-card:hover .p-card__emoji { transform: scale(1.12) rotate(3deg); }
.p-card__badge {
    position: absolute; top: 1rem; left: 1rem; z-index: 2;
    background: var(--sage); color: var(--white);
    padding: 4px 10px; font-size: 0.75rem; font-weight: 700;
    border-radius: 20px; letter-spacing: 0.5px;text-transform: uppercase;
}
.p-card__badge--sale {
    background: #d93025; font-weight: bold; box-shadow: 0 2px 4px rgba(217, 48, 37, 0.3);
}
.p-card__quick {
    display: none;
}
.p-card__quick-btn {
    width: 44px; height: 44px; border-radius: var(--radius-full);
    background: var(--white); color: var(--text); font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: all 0.2s;
}
.p-card__quick-btn:hover { background: var(--cta); color: var(--white); transform: scale(1.1); }
.p-card__body { padding: 16px 14px 14px; display: flex; flex-direction: column; flex: 1; }
/* duplicate removed */
.p-card__cat { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--sage); }
.p-card__name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin: 6px 0; line-height: 1.3; }
.p-card__stars { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; }
.p-card__stars i { color: #E8B931; font-size: 0.7rem; }
.p-card__stars span { font-size: 0.78rem; color: var(--text-light); margin-left: 4px; }
.p-card__bottom { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-light); }
.p-card__price { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--text); }
.p-card__old-price { font-size: 0.9rem; color: var(--text-light); text-decoration: line-through; margin-left: 6px; }
.p-card__cart-btn {
    background: var(--cta); color: var(--white); border-radius: var(--radius-md); box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 8px 24px; font-weight: 700; font-size: 0.85rem; width: 100%; margin-top: 12px; transition: all 0.2s ease;
}
.p-card__cart-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(200, 107, 76, 0.4); }
.p-card__bottom > div:first-child { width: 100%; text-align: center; }
.p-card__price-row {
    display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px;
}
.p-card__price-wrapper {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.p-card__add {
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: var(--cta); color: var(--white); font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s ease;
    flex-shrink: 0; box-shadow: 0 4px 10px rgba(200, 107, 76, 0.2);
}
.p-card__add:hover { transform: scale(1.05); box-shadow: 0 6px 14px rgba(200, 107, 76, 0.4); background: #b85a3c; }

/* ============================================
   PROMO BANNER
   ============================================ */
.promo { padding: 40px 0; }
.promo__card {
    background: linear-gradient(135deg, #3D2E23 0%, #2A2018 60%, #1E1610 100%);
    border-radius: var(--radius-2xl); padding: 36px 48px; display: grid;
    grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: center;
    position: relative; overflow: hidden;
}
.promo__card::before {
    content: ''; position: absolute; width: 300px; height: 300px;
    border-radius: var(--radius-full);
    background: radial-gradient(circle, rgba(196,114,92,0.15), transparent);
    right: -80px; top: -80px;
}
.promo__badge {
    display: inline-block; background: rgba(255,255,255,0.1); color: var(--clay);
    padding: 5px 14px; border-radius: var(--radius-full);
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 10px; border: 1px solid rgba(196,168,130,0.2);
}
.promo__title { color: var(--white); font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; line-height: 1.25; margin-bottom: 8px; }
.promo__discount {
    background: linear-gradient(135deg, var(--clay), var(--cta));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-size: 2.4rem;
}
.promo__text { color: rgba(255,255,255,0.6); margin-bottom: 16px; font-size: 0.85rem; }
.promo__timer { display: flex; gap: 8px; margin-bottom: 18px; }
.promo__time-block {
    text-align: center; background: rgba(255,255,255,0.08);
    padding: 8px 14px; border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.06);
}
.promo__time-block span { display: block; color: var(--white); font-size: 1.3rem; font-weight: 800; font-family: var(--font-display); }
.promo__time-block small { font-size: 0.6rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1px; }
.promo__time-sep { color: rgba(255,255,255,0.3); font-size: 1.3rem; font-weight: 800; display: flex; align-items: center; }
.promo__right { display: flex; align-items: center; justify-content: center; position: relative; }
.promo__visual { font-size: 5rem; animation: float 4s ease-in-out infinite; position: relative; z-index: 1; }

/* ============================================
   STORY
   ============================================ */
.story { padding: 60px 0; }
.story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.story__visual { position: relative; height: 500px; }
.story__img-card {
    position: absolute; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-lg);
}
.story__img-card--1 {
    width: 280px; height: 320px; top: 0; left: 0; font-size: 5rem;
    background: linear-gradient(135deg, var(--sage-light), var(--clay-light));
}
.story__img-card--2 {
    width: 180px; height: 200px; bottom: 40px; right: 20px; font-size: 4rem;
    background: linear-gradient(135deg, var(--blush-light), var(--clay-light));
}
.story__img-card--3 {
    width: 120px; height: 120px; top: 60px; right: 60px; font-size: 3rem;
    background: linear-gradient(135deg, var(--clay-light), var(--sage-light));
}
.story__stats-float {
    position: absolute; bottom: 0; left: 40px;
    background: var(--white); border-radius: var(--radius-xl); padding: 20px 24px;
    box-shadow: var(--shadow-xl); display: flex; gap: 24px;
}
.story__stat { text-align: center; }
.story__stat strong { display: block; font-size: 1.2rem; font-weight: 800; color: var(--cta); font-family: var(--font-display); }
.story__stat span { font-size: 0.72rem; color: var(--text-light); }
.story__content .section-head__label { text-align: left; }
.story__content .section-head__title { text-align: left; font-size: 2.4rem; margin-bottom: 20px; }
.story__text { color: var(--text-mid); margin-bottom: 16px; line-height: 1.8; }
.story__features { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.story__feature { display: flex; gap: 14px; align-items: flex-start; }
.story__feature-icon {
    width: 44px; height: 44px; border-radius: var(--radius-md); flex-shrink: 0;
    background: var(--cta-light); color: var(--cta);
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.story__feature strong { font-size: 0.95rem; display: block; margin-bottom: 2px; }
.story__feature p { font-size: 0.85rem; color: var(--text-light); margin: 0; }

/* ============================================
   TRUST STRIP
   ============================================ */
.trust-strip { padding: 40px 0; background: var(--white); }
.trust-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trust-strip__grid--compact { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.trust-strip__item {
    display: flex; align-items: center; gap: 14px;
    padding: 24px; border-radius: var(--radius-xl);
    background: var(--bg); transition: all var(--duration) var(--ease-bounce);
}
.trust-strip__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.trust-strip__icon {
    width: 48px; height: 48px; border-radius: var(--radius-md); flex-shrink: 0;
    background: var(--sage-light); color: var(--sage);
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
    transition: all var(--duration);
}
.trust-strip__item:hover .trust-strip__icon { background: var(--cta); color: var(--white); }
.trust-strip__item strong { font-size: 0.82rem; display: block; }
.trust-strip__item p { font-size: 0.72rem; color: var(--text-light); margin: 0; }

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials { padding: 60px 0; }
.testimonials__track {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    margin-bottom: 32px;
}
.t-card {
    background: var(--white); border-radius: var(--radius-xl); padding: 32px;
    border: 1px solid var(--border); transition: all var(--duration) var(--ease-bounce);
    position: relative;
}
.t-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.t-card__quote { position: absolute; top: 20px; right: 24px; font-size: 2.5rem; color: var(--border); font-family: var(--font-display); line-height: 1; }
.t-card__stars { display: flex; gap: 3px; margin-bottom: 16px; }
.t-card__stars i { color: #E8B931; font-size: 0.85rem; }
.t-card__text { color: var(--text-mid); font-size: 0.95rem; line-height: 1.75; margin-bottom: 20px; }
.t-card__author { display: flex; align-items: center; gap: 12px; }
.t-card__avatar {
    width: 44px; height: 44px; border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--sage-light), var(--blush-light));
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.82rem; color: var(--cta);
}
.t-card__name { font-weight: 700; font-size: 0.9rem; }
.t-card__role { font-size: 0.78rem; color: var(--text-light); }
.testimonials__nav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.testimonials__arrow {
    width: 40px; height: 40px; border-radius: var(--radius-full);
    border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; color: var(--text-mid); transition: all var(--duration);
}
.testimonials__arrow:hover { border-color: var(--cta); color: var(--cta); background: var(--cta-light); }
.testimonials__dots { display: flex; gap: 6px; }
.testimonials__dot {
    width: 8px; height: 8px; border-radius: var(--radius-full);
    background: var(--border); transition: all var(--duration);
}
.testimonials__dot.active { background: var(--cta); width: 24px; }

/* ============================================
   NEWSLETTER
   ============================================ */
.newsletter { padding: 80px 0; }
.newsletter__card {
    background: linear-gradient(135deg, var(--sage-light), var(--clay-light), var(--blush-light));
    border-radius: var(--radius-2xl); padding: 50px; display: flex;
    align-items: center; justify-content: space-between; gap: 40px;
}
.newsletter__emoji { font-size: 2rem; margin-bottom: 8px; display: block; }
.newsletter__card h2 { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 6px; }
.newsletter__card p { color: var(--text-mid); font-size: 0.9rem; }
.newsletter__form { display: flex; gap: 10px; min-width: 420px; }
.newsletter__form input {
    flex: 1; padding: 14px 20px; border: 1.5px solid var(--border); border-radius: var(--radius-full);
    font-size: 0.92rem; background: var(--white); outline: none;
    transition: border-color var(--duration);
}
.newsletter__form input:focus { border-color: var(--cta); }

/* ============================================
   FOOTER
   ============================================ */
.footer { background: var(--bg-dark); color: var(--white); padding-top: 64px; }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer__logo { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.footer__brand p { color: rgba(255,255,255,0.5); font-size: 0.88rem; line-height: 1.7; margin-bottom: 18px; }
.footer__social { display: flex; gap: 8px; }
.footer__social a {
    width: 36px; height: 36px; border-radius: var(--radius-full);
    background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; transition: all var(--duration);
}
.footer__social a:hover { background: var(--cta); transform: translateY(-2px); }
.footer__col h4 { font-size: 0.92rem; font-weight: 700; margin-bottom: 16px; }
.footer__col a { display: block; color: rgba(255,255,255,0.5); font-size: 0.88rem; margin-bottom: 10px; transition: all var(--duration); }
.footer__col a:hover { color: var(--white); padding-left: 4px; }
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.08); padding: 20px 0;
    display: flex; justify-content: space-between; align-items: center;
    color: rgba(255,255,255,0.3); font-size: 0.82rem;
}
.footer__payments { display: flex; gap: 10px; font-size: 1.4rem; }

/* ============================================
   CART SIDEBAR
   ============================================ */
.overlay {
    position: fixed; inset: 0; background: rgba(44,36,32,0.5);
    z-index: 2000; opacity: 0;
    pointer-events: none; transition: opacity var(--duration);
}
.overlay.active { opacity: 1; pointer-events: all; }
.wishlist-sidebar {
    position: fixed; top: 0; bottom: 0; right: -440px; width: 420px; max-width: 100%;
    background: var(--white); z-index: 2001; display: flex; flex-direction: column;
    transition: right 0.4s var(--ease); box-shadow: -8px 0 40px rgba(0,0,0,0.1);
}
.wishlist-sidebar.active { right: 0; }
.cart {
    position: fixed; top: 0; bottom: 0; right: -440px; width: 420px; max-width: 100%;
    background: var(--white); z-index: 2001; display: flex; flex-direction: column;
    transition: right 0.4s var(--ease); box-shadow: -8px 0 40px rgba(0,0,0,0.1);
}
.cart.active { right: 0; }
.cart__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 24px; border-bottom: 1px solid var(--border);
}
.cart__head h3 { font-family: var(--font-display); font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.cart__head button { font-size: 1.1rem; color: var(--text-light); padding: 6px; transition: color var(--duration); }
.cart__head button:hover { color: var(--text); }
.cart__body { flex: 1 1 auto; overflow-y: auto; padding: 12px 24px; min-height: 0; }
.cart__empty { text-align: center; padding: 60px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; }
.cart__empty-icon { font-size: 3.5rem; display: block; margin-bottom: 16px; opacity: 0.5; }
.cart__empty p { font-weight: 700; color: var(--text); font-size: 1.1rem; margin-bottom: 4px; }
.cart__empty small { color: var(--text-light); font-size: 0.85rem; display: block; margin-bottom: 20px; }
.cart__empty .btn { margin-top: 8px; }
.cart-item {
    display: flex; gap: 14px; padding: 10px 0;
    border-bottom: 1px solid var(--border);
    animation: fadeInUp 0.3s var(--ease);
    /* prevent inner content overflow */
    min-width: 0; overflow: hidden; box-sizing: border-box;
}
.cart-item__img {
    width: 70px; height: 70px; border-radius: var(--radius-md); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
}
.cart-item__info { flex: 1; }
.cart-item__name { font-weight: 600; font-size: 0.9rem; margin-bottom: 3px; }
.cart-item__price { color: var(--cta); font-weight: 700; font-size: 0.88rem; }
.cart-item__actions { 
    display: inline-flex; align-items: center; 
    border: 1px solid var(--border); border-radius: var(--radius-md); 
    background: var(--bg); margin-top: 8px; height: 28px;
}
.cart-item__qty-btn {
    width: 28px; height: 100%; border: none; background: transparent;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 600; color: var(--text-mid); 
    cursor: pointer; transition: background var(--duration), color var(--duration);
}
.cart-item__qty-btn:hover:not(:disabled) { background: var(--bg-alt); color: var(--text); }
.cart-item__qty { 
    font-weight: 600; min-width: 30px; text-align: center; 
    font-size: 0.85rem; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; height: 100%;
}
.cart-item__remove { color: var(--text-light); font-size: 0.8rem; padding: 6px; transition: color var(--duration); align-self: start; margin-left: auto; cursor: pointer; }
.cart-item__remove:hover { color: #dc3545; }

/* Cart Footer — Compact Amazon/Etsy style */
.cart__foot { flex-shrink: 0; max-height: 55vh; overflow-y: auto; padding: 10px 20px; border-top: 1px solid var(--border); }

/* Summary rows */
.cart__summary { margin-bottom: 10px; }
.cart__summary-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.85rem; color: var(--text-mid); padding: 3px 0;
}
.cart__summary-total {
    font-size: 1.05rem; font-weight: 700; color: var(--text);
    padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--border);
}
.cart__summary-total span:last-child { color: var(--cta); font-family: var(--font-display); font-size: 1.2rem; }

/* Promo code — collapsed by default */
.cart__promo-details { margin-bottom: 8px; }
.cart__promo-details summary {
    font-size: 0.78rem; color: var(--sage-dark); cursor: pointer;
    font-weight: 600; padding: 4px 0; list-style: none;
}
.cart__promo-details summary::-webkit-details-marker { display: none; }
.cart__promo-details[open] summary { margin-bottom: 6px; }
.cart__promo-details .promo-form { display: flex; gap: 6px; }
.cart__promo-details .promo-form__input {
    flex: 1; padding: 8px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-md); font-size: 0.8rem; outline: none;
}
.cart__promo-details .promo-form__input:focus { border-color: var(--cta); }
.cart__promo-details .promo-form__btn {
    padding: 8px 14px; background: var(--sage); color: var(--white);
    border-radius: var(--radius-md); font-size: 0.78rem; font-weight: 600;
    transition: background 0.2s;
}
.cart__promo-details .promo-form__btn:hover { background: var(--sage-dark); }

/* Gift wrap section */
.cart__gift-box {
    border: 2px dashed #C4725C;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #fdf2ef 0%, #fef9f7 100%);
}
.cart__giftwrap-inline {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.85rem; color: var(--text); cursor: pointer;
    font-weight: 600; margin-bottom: 0;
}
.cart__giftwrap-inline input { width: 18px; height: 18px; accent-color: var(--cta); }
.cart__giftwrap-price { margin-left: auto; color: var(--sage-dark); font-weight: 700; font-size: 0.82rem; }
.cart__gift-message-area {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(196,114,92,0.2);
}
.cart__gift-message-area.visible { display: block; }
.cart__gift-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #C4725C;
    border-radius: 10px;
    font-size: 0.88rem;
    resize: none;
    font-family: inherit;
    background: #fff;
    color: var(--text);
    line-height: 1.5;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cart__gift-textarea:focus {
    outline: none;
    border-color: #a85a45;
    box-shadow: 0 0 0 3px rgba(196,114,92,0.15);
}
.cart__gift-textarea::placeholder { color: #b8a098; }
.cart__gift-hide-prices {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.78rem; color: var(--text-mid);
    margin-top: 8px; cursor: pointer;
}
.cart__gift-hide-prices input { accent-color: var(--cta); width: 15px; height: 15px; }

/* Delivery estimate inline */
.cart__delivery-inline {
    font-size: 0.78rem; color: var(--text-mid); padding: 4px 0 10px;
}
.cart__delivery-inline strong { color: var(--sage-dark); }

/* Checkout button */
.cart__checkout-btn {
    font-size: 1rem !important; padding: 14px 20px !important;
    font-weight: 700 !important; letter-spacing: 0.3px;
}

/* Trust line */
.cart__trust-line {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 8px; padding-top: 8px;
}
.cart__trust-line > span:first-child { font-size: 0.7rem; color: var(--text-light); }
.cart__trust-payments { display: flex; gap: 6px; font-size: 1.1rem; color: var(--text-light); }

/* Keep old classes for backward compat (JS references) */
.cart__subtotal, .cart__total { display: flex; justify-content: space-between; margin-bottom: 8px; }
.cart__total { font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; }
.cart__total span:last-child { color: var(--cta); font-family: var(--font-display); font-size: 1.3rem; }
.cart__secure { text-align: center; font-size: 0.75rem; color: var(--text-light); margin-top: 10px; }

/* ============================================
   MODAL
   ============================================ */
.modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.92);
    background: var(--white); border-radius: var(--radius-2xl); z-index: 2002;
    max-width: 820px; width: 92%; opacity: 0; pointer-events: none;
    transition: all 0.3s var(--ease-spring);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15); max-height: 90vh; overflow-y: auto;
}
.modal.active { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) scale(1); }
.modal__close {
    position: absolute; top: 16px; right: 16px; z-index: 5;
    width: 40px; height: 40px; border-radius: var(--radius-full);
    background: var(--white); box-shadow: var(--shadow-md);
    display: flex; align-items: center; justify-content: center;
    transition: all var(--duration);
}
.modal__close:hover { background: var(--cta); color: var(--white); }
.modal__grid { display: grid; grid-template-columns: 1fr 1fr; }
.modal__media {
    display: flex; align-items: center; justify-content: center; min-height: 400px;
}
.modal__emoji { font-size: 7rem; filter: drop-shadow(0 12px 24px rgba(0,0,0,0.1)); }
.modal__details { padding: 36px; }
.modal__cat { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--sage); }
.modal__name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; margin: 8px 0 10px; }
.modal__rating { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; }
.modal__rating i { color: #E8B931; font-size: 0.82rem; }
.modal__rating span { font-size: 0.82rem; color: var(--text-light); margin-left: 6px; }
.modal__desc { color: var(--text-mid); font-size: 0.9rem; line-height: 1.7; margin-bottom: 18px; }
.modal__price-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.modal__price { font-size: 1.6rem; font-weight: 700; color: var(--cta); font-family: var(--font-display); }
.modal__old-price { font-size: 1rem; color: var(--text-light); text-decoration: line-through; }
.modal__save { background: #E8F5E9; color: #2E7D32; padding: 3px 10px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 700; }
.modal__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.modal__badges span { background: var(--sage-light); color: var(--sage-dark); padding: 5px 12px; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.modal__row { display: flex; gap: 12px; align-items: center; }
.qty-selector { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: var(--radius-full); overflow: hidden; }
.qty-selector button { width: 40px; height: 44px; font-size: 1.1rem; font-weight: 700; transition: background var(--duration); }
.qty-selector button:hover { background: var(--bg-alt); }
.qty-selector span { min-width: 32px; text-align: center; font-weight: 700; font-size: 1rem; }

/* ============================================
   TOAST & SCROLL-TOP
   ============================================ */
.toast {
    position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%) translateY(100px);
    background: rgba(255, 255, 255, 0.95); color: var(--text); padding: 14px 24px;
    border-radius: 100px; display: flex; align-items: center; gap: 12px;
    font-weight: 600; font-size: 0.95rem; z-index: 99999; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0;
    pointer-events: none;
}
.toast.active { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast i { color: #10B981; font-size: 1.2rem; }
body.dark-mode .toast { background: rgba(30,30,46,0.95); color: #fff; border-color: rgba(255,255,255,0.1); }
.scroll-top {
    position: fixed; bottom: 30px; right: 30px; width: 44px; height: 44px;
    border-radius: var(--radius-full); background: var(--white); color: var(--text);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; z-index: 99; box-shadow: var(--shadow-lg); border: 1px solid var(--border);
    opacity: 0; pointer-events: none; transform: translateY(10px);
    transition: all var(--duration) var(--ease-bounce);
}
.scroll-top.visible { opacity: 1; pointer-events: all; transform: translateY(0); }
.scroll-top:hover { background: var(--cta); color: var(--white); border-color: transparent; transform: translateY(-3px); }

/* ============================================
   QUICK-VIEW POPUP
   ============================================ */
.quickview-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 1099;
    transition: opacity 0.3s ease;
}
.quickview-overlay.hidden { display: none; }
.quickview-popup {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--white); border-radius: var(--radius-2xl);
    width: 90%; max-width: 680px; max-height: 85vh; overflow-y: auto;
    z-index: 1100; box-shadow: var(--shadow-xl);
    animation: popIn 0.3s var(--ease-bounce);
}
.quickview-popup.hidden { display: none; }
@keyframes popIn { from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.quickview-popup__close {
    position: absolute; top: 14px; right: 14px;
    background: rgba(0,0,0,0.06); border: none; border-radius: var(--radius-full);
    width: 36px; height: 36px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; z-index: 2; color: var(--text-mid);
    transition: all 0.2s ease;
}
.quickview-popup__close:hover { background: rgba(0,0,0,0.12); }
.quickview-popup__body {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.quickview-popup__image {
    background: linear-gradient(135deg, var(--sage-light), var(--blush-light));
    display: flex; align-items: center; justify-content: center;
    font-size: 5rem; min-height: 320px;
    border-radius: var(--radius-2xl) 0 0 var(--radius-2xl);
}
.quickview-popup__info {
    padding: 32px; display: flex; flex-direction: column; justify-content: center;
}
.quickview-popup__cat {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--sage-dark); margin-bottom: 6px;
}
.quickview-popup__name {
    font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
    color: var(--text); margin-bottom: 8px;
}
.quickview-popup__rating {
    color: var(--clay); font-size: 0.85rem; margin-bottom: 10px;
}
.quickview-popup__price {
    font-size: 1.4rem; font-weight: 800; color: var(--cta);
    font-family: var(--font-display); margin-bottom: 12px;
}
.quickview-popup__price del { color: var(--text-light); font-size: 0.9rem; font-weight: 400; margin-left: 8px; }
.quickview-popup__desc {
    font-size: 0.85rem; color: var(--text-mid); line-height: 1.6; margin-bottom: 20px;
}
.quickview-popup__actions { display: flex; gap: 10px; }
.quickview-popup__actions .btn { font-size: 0.85rem; padding: 10px 18px; }

/* ============================================
   AGE GROUP LABELS (Müşteri Talebi: Yaş bilgisi)
   ============================================ */
.p-card__age {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.68rem; font-weight: 600; color: var(--sage-dark);
    background: var(--sage-light); padding: 3px 8px; border-radius: var(--radius-full);
    white-space: nowrap;
}
.p-card__age i { font-size: 0.6rem; }

/* Material Badge on card */
.p-card__material {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.66rem; font-weight: 600; color: var(--clay-dark);
    background: var(--clay-light); padding: 3px 8px; border-radius: var(--radius-full);
    white-space: nowrap;
}

.p-card__tags { 
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; 
}

/* ============================================
   STOCK WARNING (Müşteri Talebi: Stok bilgisi)
   ============================================ */
.p-card__stock {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.7rem; font-weight: 700; color: #D84315;
    margin-top: 6px;
}
.p-card__stock i { animation: pulse 1.5s infinite; }

/* ============================================
   SHOP BY BUDGET — Inspired by Carter's "Deals for You"
   ============================================ */
.budget { padding: 40px 0; }
.budget__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.budget__tile {
    background: linear-gradient(145deg, var(--sage-light), #f0ede8);
    border-radius: var(--radius-xl); padding: 30px 24px;
    text-align: center; cursor: pointer; position: relative;
    transition: all var(--duration) var(--ease-bounce); overflow: hidden;
    border: 1px solid transparent;
}
.budget__tile:hover {
    transform: translateY(-8px); box-shadow: var(--shadow-lg);
    border-color: var(--sage);
}
.budget__tile--gift {
    background: linear-gradient(145deg, var(--blush-light), #f8e8e2);
}
.budget__tile--gift:hover { border-color: var(--cta); }
.budget__icon { font-size: 2.5rem; margin-bottom: 14px; }
.budget__label {
    font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
    color: var(--text); margin-bottom: 6px;
}
.budget__desc { font-size: 0.82rem; color: var(--text-mid); margin-bottom: 16px; }
.budget__cta {
    font-size: 0.78rem; font-weight: 700; color: var(--cta);
    display: inline-flex; align-items: center; gap: 6px;
    transition: gap 0.2s ease;
}
.budget__tile:hover .budget__cta { gap: 10px; }

/* ============================================
   WHY MINIDREAM — Inspired by Babylist "Why Shop with Babylist?"
   ============================================ */
.why-us { padding: 50px 0; background: linear-gradient(180deg, #f8f5f2, var(--white)); }
.why-us__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.why-us__card {
    background: var(--white); border-radius: var(--radius-xl);
    padding: 36px 28px; text-align: center;
    border: 1px solid var(--border);
    transition: all var(--duration) var(--ease-bounce);
    position: relative; overflow: hidden;
}
.why-us__card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--sage), var(--cta));
    opacity: 0; transition: opacity 0.3s ease;
}
.why-us__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.why-us__card:hover::before { opacity: 1; }
.why-us__icon {
    width: 64px; height: 64px; border-radius: var(--radius-full);
    background: var(--sage-light); display: flex; align-items: center;
    justify-content: center; font-size: 1.4rem; color: var(--sage-dark);
    margin: 0 auto 20px;
}
.why-us__card h3 {
    font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
    color: var(--text); margin-bottom: 12px;
}
.why-us__card p {
    font-size: 0.88rem; color: var(--text-mid); line-height: 1.7; margin-bottom: 18px;
}
.why-us__badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.75rem; font-weight: 700; color: #2E7D32;
    background: #E8F5E9; padding: 6px 14px; border-radius: var(--radius-full);
}

/* ============================================
   UGC GALLERY — Inspired by Carter's "Mini Moments, Big Style"
   ============================================ */
.ugc { padding: 50px 0; background: var(--white); }
.ugc__grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 30px;
}
.ugc__card {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    aspect-ratio: 1; cursor: pointer; 
}
.ugc__img {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--sage-light), var(--blush-light));
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem; transition: transform 0.4s ease;
}
.ugc__card:hover .ugc__img { transform: scale(1.1); }
.ugc__overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    padding: 40px 14px 14px; color: var(--white);
    opacity: 0; transition: opacity 0.3s ease;
    display: flex; flex-direction: column;
}
.ugc__card:hover .ugc__overlay { opacity: 1; }
.ugc__overlay strong { font-size: 0.82rem; }
.ugc__overlay span { font-size: 0.72rem; opacity: 0.8; }
.ugc__overlay small { font-size: 0.68rem; font-style: italic; margin-top: 2px; opacity: 0.9; }
.ugc__cta { text-align: center; }

/* ============================================
   PARENT TIPS — Inspired by Carter's "Crib Notes" blog
   ============================================ */
.parent-tips { padding: 80px 0; background: #f8f5f2; }
.tips__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.tips__card {
    background: var(--white); border-radius: var(--radius-xl);
    overflow: hidden; transition: all var(--duration) var(--ease-bounce);
    border: 1px solid var(--border); cursor: pointer;
}
.tips__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.tips__img {
    height: 160px;
    background: linear-gradient(135deg, var(--sage-light), var(--clay-light));
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem;
}
.tips__body { padding: 24px; }
.tips__tag {
    display: inline-block; padding: 4px 12px; border-radius: var(--radius-full);
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    background: var(--sage-light); color: var(--sage-dark); margin-bottom: 10px;
}
.tips__title {
    font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
    color: var(--text); margin-bottom: 10px; line-height: 1.4;
}
.tips__excerpt { font-size: 0.85rem; color: var(--text-mid); line-height: 1.7; margin-bottom: 14px; }
.tips__meta { font-size: 0.75rem; color: var(--text-light); display: flex; align-items: center; gap: 6px; }

/* ============================================
   CART ENHANCEMENTS — Delivery Estimate, Duties, BNPL
   ============================================ */
.cart__delivery-estimate {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; margin-bottom: 14px;
    background: #E3F2FD; border-radius: var(--radius-md);
    font-size: 0.82rem; color: #1565C0;
}
.cart__delivery-estimate i { color: #1565C0; }
.cart__duties {
    display: flex; justify-content: space-between; margin-bottom: 8px;
    font-size: 0.85rem; color: #2E7D32; font-weight: 600;
}
.cart__bnpl {
    text-align: center; margin-top: 12px; padding: 10px;
    background: #F3E5F5; border-radius: var(--radius-md);
    font-size: 0.78rem; color: #7B1FA2;
}
.cart__bnpl strong { font-weight: 800; }

/* ============================================
   ALL PRODUCTS PAGE VIEW
   ============================================ */
.all-products-page { padding-top: 80px; padding-bottom: 40px; min-height: 100vh; background: var(--bg-cream); }
.all-products-page .pdp__breadcrumb { margin-bottom: 12px; }
.all-products-page__header {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 16px; gap: 12px;
}
.all-products-page__header .section-head { margin-bottom: 0 !important; }
.all-products-page__header .section-head__title { font-size: 2rem; margin-bottom: 2px; }
.all-products-page__header .section-head__desc { margin-top: 4px; font-size: 0.92rem; }
.all-products-page__title {
    font-family: var(--font-display); font-size: 2rem; font-weight: 700;
    color: var(--text); margin-bottom: 4px;
}
.all-products-page__subtitle {
    font-size: 0.9rem; color: var(--text-mid);
}
.all-products-page__count {
    font-size: 0.85rem; color: var(--text-light);
    white-space: nowrap; font-weight: 600;
}
.all-products-page__filters {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
    background: var(--white); padding: 10px 16px; border-radius: var(--radius-xl);
    border: 1px solid var(--border);
}
.all-products-page__tabs {
    display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px; max-width: 100%;
}
.all-products-page__tabs::-webkit-scrollbar { display: none; }
.all-products-page__tabs .tab-btn {
    padding: 8px 16px; border-radius: var(--radius-full);
    background: transparent; border: 1.5px solid var(--border);
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    color: var(--text-mid); transition: all 0.2s ease;
    font-family: var(--font-body); white-space: nowrap; flex-shrink: 0;
}
.all-products-page__tabs .tab-btn:hover { border-color: var(--sage); color: var(--sage-dark); }
.all-products-page__tabs .tab-btn.active {
    background: var(--sage); color: var(--white); border-color: var(--sage);
}
.all-products-page__age-filters {
    display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px; max-width: 100%;
}
.all-products-page__age-filters::-webkit-scrollbar { display: none; }

/* Products Page Search Bar */
.products-search-bar {
    position: relative; display: flex; align-items: center;
}
.products-search-bar__icon {
    position: absolute; left: 14px; color: var(--text-light);
    font-size: 0.82rem; pointer-events: none;
}
.products-search-bar__input {
    padding: 10px 16px 10px 38px; border: 1.5px solid var(--border);
    border-radius: var(--radius-full); font-size: 0.85rem;
    background: var(--white); color: var(--text); width: 220px;
    font-family: var(--font-body); outline: none;
    transition: all 0.3s ease;
}
.products-search-bar__input:focus {
    border-color: var(--sage); box-shadow: 0 0 0 3px rgba(124,154,142,0.15);
    width: 280px;
}
.products-search-bar__input::placeholder {
    color: var(--text-light); font-size: 0.82rem;
}

/* Search Active Indicator */
.search-active {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px; margin-bottom: 16px;
    background: var(--sage-light); border-radius: var(--radius-md);
    font-size: 0.85rem; color: var(--sage-dark); font-weight: 500;
    animation: fadeInUp 0.3s var(--ease);
}
.search-active.hidden { display: none; }
.search-active i { color: var(--sage); }
.search-active__term { font-weight: 700; color: var(--text); }
.search-active__clear {
    margin-left: auto; background: none; border: 1.5px solid var(--sage);
    color: var(--sage-dark); padding: 4px 12px; border-radius: var(--radius-full);
    font-size: 0.75rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 4px;
}
.search-active__clear:hover {
    background: var(--sage); color: var(--white);
}

/* ============================================
   BUNDLES — Curated Gift Sets
   ============================================ */
.bundles { padding: 50px 0; background: linear-gradient(180deg, var(--white), #f8f5f2); }
.bundles__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.bundle-card {
    background: var(--white); border-radius: var(--radius-xl);
    overflow: hidden; border: 1px solid var(--border);
    transition: all var(--duration) var(--ease-bounce);
    position: relative;
}
.bundle-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.bundle-card__save {
    position: absolute; top: 16px; right: 16px;
    background: #E53935; color: var(--white); padding: 4px 12px;
    border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 800;
    z-index: 2;
}
.bundle-card__preview {
    height: 160px; display: flex; align-items: center; justify-content: center;
    gap: 16px; font-size: 2.8rem;
    background: linear-gradient(135deg, var(--sage-light), var(--blush-light));
    padding: 20px;
}
.bundle-card__emoji {
    width: 64px; height: 64px; border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.8); display: flex; align-items: center;
    justify-content: center; font-size: 2rem;
    transition: transform 0.3s ease;
}
.bundle-card:hover .bundle-card__emoji { transform: scale(1.1); }
.bundle-card__body { padding: 24px; }
.bundle-card__name {
    font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
    color: var(--text); margin-bottom: 8px;
}
.bundle-card__items {
    font-size: 0.82rem; color: var(--text-mid); line-height: 1.8;
    margin-bottom: 16px; list-style: none; padding: 0;
}
.bundle-card__items li::before { content: '\2713 '; color: var(--sage); font-weight: 700; }
.bundle-card__pricing {
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.bundle-card__price {
    font-size: 1.3rem; font-weight: 800; color: var(--cta);
    font-family: var(--font-display);
}
.bundle-card__old-price {
    font-size: 0.9rem; color: var(--text-light);
    text-decoration: line-through;
}
.bundle-card .btn { width: 100%; justify-content: center; }

/* View All Products */
.products__view-all {
    text-align: center; margin-top: 36px;
}
.btn--outline {
    background: transparent; border: 2px solid var(--sage);
    color: var(--sage-dark); padding: 12px 32px; border-radius: var(--radius-full);
    font-weight: 700; cursor: pointer; font-size: 0.9rem;
    font-family: var(--font-body);
    transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px;
}
.btn--outline:hover {
    background: var(--sage); color: var(--white); border-color: var(--sage);
    transform: translateY(-2px); box-shadow: var(--shadow-md);
}

/* ============================================
   AGE FILTER BUTTONS
   ============================================ */
.products__toolbar {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    align-items: center; gap: 14px; margin-bottom: 24px;
}
.products__age-filters { display: flex; gap: 6px; }
.age-filter {
    padding: 6px 16px; border-radius: var(--radius-full); border: 1px solid var(--border);
    background: var(--white); font-size: 0.78rem; font-weight: 600; cursor: pointer;
    transition: all var(--duration) var(--ease); color: var(--text-mid);
    white-space: nowrap; flex-shrink: 0;
}
.age-filter.active, .age-filter:hover {
    background: var(--sage); color: var(--white); border-color: var(--sage);
}

/* Product card clickable */
.p-card { cursor: pointer; transition: transform var(--duration) var(--ease); }
.p-card:hover { transform: translateY(-6px); }

/* ============================================
   PRODUCT DETAIL PAGE (replaces modal)
   Inspired by: Maisonette, Lalo, Monica+Andy
   ============================================ */
.pdp { padding: 80px 0 60px; animation: fadeInUp 0.4s var(--ease); }
.pdp.hidden { display: none; }

.pdp__breadcrumb {
    display: flex; align-items: center; gap: 8px; margin-bottom: 30px;
    font-size: 0.82rem; color: var(--text-light);
}
.pdp__breadcrumb a { color: var(--text-mid); transition: color 0.2s; text-decoration: none; }
.pdp__breadcrumb a:hover { color: var(--cta); }
.pdp__breadcrumb i { font-size: 0.55rem; color: var(--text-light); }
.pdp__breadcrumb span { color: var(--text); font-weight: 600; }

.pdp__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
    margin-bottom: 60px;
}

/* PDP LEFT — Image */
.pdp__media { position: sticky; top: 120px; }
.pdp__image-main {
    width: 100%; aspect-ratio: 1; border-radius: var(--radius-xl);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.pdp__emoji { font-size: 10rem; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.08)); }

.pdp__trust-badges {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px;
    justify-content: center;
}
.pdp__trust-badges span {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: var(--radius-full);
    background: var(--sage-light); color: var(--sage-dark);
    font-size: 0.72rem; font-weight: 600;
}
.pdp__trust-badges span i { font-size: 0.68rem; }

/* PDP RIGHT — Info Panel */
.pdp__info { padding-top: 10px; }
.pdp__cat {
    font-size: 0.78rem; font-weight: 600; color: var(--cta);
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
}
.pdp__name {
    font-family: var(--font-display); font-size: 2.2rem; font-weight: 700;
    color: var(--text); line-height: 1.2; margin-bottom: 10px;
}
.pdp__rating-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 20px;
}
.pdp__rating-row .fa-star, .pdp__rating-row .fa-star-half-alt { color: #E8B931; font-size: 0.85rem; }
.pdp__rating-row .far.fa-star { color: #E0D8D0; font-size: 0.85rem; }
.pdp__review-count { font-size: 0.85rem; color: var(--text-mid); }

.pdp__price-section {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.pdp__price { font-size: 1.8rem; font-weight: 800; color: var(--text); }
.pdp__old-price { font-size: 1.1rem; color: var(--text-light); text-decoration: line-through; }
.pdp__save {
    padding: 4px 12px; border-radius: var(--radius-full);
    background: #E8F5E9; color: #2E7D32; font-size: 0.78rem; font-weight: 700;
}
.pdp__save.hidden { display: none; }

/* PDP Meta Tags */
.pdp__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pdp__meta-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: var(--radius-full);
    font-size: 0.78rem; font-weight: 600;
}
.pdp__meta-tag--age { background: var(--sage-light); color: var(--sage-dark); }
.pdp__meta-tag--material { background: var(--clay-light); color: var(--clay-dark); }
.pdp__meta-tag--cert { background: #E8F5E9; color: #2E7D32; }

/* Stock warning */
.pdp__stock {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.85rem; font-weight: 700; color: #D84315;
    margin-bottom: 14px; padding: 10px 16px;
    background: #FFF3E0; border-radius: var(--radius-md);
}
.pdp__stock i { animation: pulse 1.5s infinite; }
.pdp__stock.hidden { display: none; }

/* Social proof */
.pdp__social-proof {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.78rem; color: var(--text-mid);
    margin-bottom: 20px; padding: 8px 14px;
    background: #F5F5F5; border-radius: var(--radius-md);
}
.pdp__social-proof i { color: var(--sage); }

/* Actions row */
.pdp__actions {
    display: flex; gap: 12px; align-items: center;
    margin-bottom: 30px; padding-bottom: 30px;
    border-bottom: 1px solid var(--border);
}
.pdp__wishlist-btn {
    width: 52px; height: 52px; border-radius: var(--radius-md);
    border: 1.5px solid var(--border); background: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: var(--text-light); cursor: pointer;
    transition: all var(--duration) var(--ease-bounce); flex-shrink: 0;
}
.pdp__wishlist-btn:hover, .pdp__wishlist-btn.active { border-color: #E53935; color: #E53935; }

/* Tabs */
.pdp__tabs {
    display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 24px;
}
.pdp__tab {
    padding: 12px 24px; font-size: 0.88rem; font-weight: 600;
    color: var(--text-light); cursor: pointer; border: none; background: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: all 0.2s ease;
}
.pdp__tab:hover { color: var(--text); }
.pdp__tab.active { color: var(--cta); border-bottom-color: var(--cta); }

/* Tab content */
.pdp__tab-content { animation: fadeInUp 0.3s var(--ease); min-height: 150px; }

.pdp__desc { font-size: 0.95rem; line-height: 1.8; color: var(--text-mid); margin-bottom: 20px; }
.pdp__features { list-style: none; padding: 0; margin: 0; }
.pdp__features li {
    padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 0.9rem; color: var(--text-mid); display: flex; align-items: center; gap: 10px;
}
.pdp__features li i { color: var(--sage); font-size: 0.75rem; }

.pdp__specs-table { width: 100%; border-collapse: collapse; }
.pdp__specs-table tr { border-bottom: 1px solid var(--border); }
.pdp__specs-table td { padding: 12px 0; font-size: 0.88rem; }
.pdp__specs-table td:first-child { color: var(--text-light); width: 40%; }
.pdp__specs-table td:last-child { color: var(--text); font-weight: 500; }

/* Safety tab */
.pdp__safety-badges {
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px;
}
.pdp__safety-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px; border-radius: var(--radius-md);
    background: #E8F5E9; color: #2E7D32; font-size: 0.85rem; font-weight: 700;
}
.pdp__safety-info h4 {
    font-size: 1rem; color: var(--text); margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
}
.pdp__safety-info h4 i { color: #2E7D32; }
.pdp__safety-info ul { list-style: none; padding: 0; }
.pdp__safety-info li {
    padding: 8px 0; font-size: 0.88rem; color: var(--text-mid);
    padding-left: 20px; position: relative;
}
.pdp__safety-info li::before {
    content: '✓'; position: absolute; left: 0; color: #2E7D32; font-weight: 700;
}

/* Reviews tab */
.pdp__reviews-summary {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 24px; padding: 20px; background: var(--sage-light);
    border-radius: var(--radius-md);
}
.pdp__reviews-big {
    font-size: 2.8rem; font-weight: 800; color: var(--text);
    line-height: 1; margin-right: 8px;
}
.pdp__reviews-summary .fa-star { color: #E8B931; }
.pdp__reviews-summary small { color: var(--text-light); font-size: 0.82rem; }

.pdp__review {
    padding: 20px 0; border-bottom: 1px solid var(--border);
}
.pdp__review:last-child { border-bottom: none; }
.pdp__review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pdp__review-avatar {
    width: 40px; height: 40px; border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--sage-light), var(--blush-light));
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 700; color: var(--cta); flex-shrink: 0;
}
.pdp__review-info strong { font-size: 0.9rem; display: block; margin-bottom: 2px; }
.pdp__review-verified {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.7rem; font-weight: 600; color: #2E7D32;
    background: #E8F5E9; padding: 2px 8px; border-radius: var(--radius-full);
}
.pdp__review-meta { font-size: 0.75rem; color: var(--text-light); margin-top: 2px; }
.pdp__review-stars { display: flex; gap: 2px; margin-bottom: 6px; }
.pdp__review-stars i { color: #E8B931; font-size: 0.7rem; }
.pdp__review-text { font-size: 0.9rem; color: var(--text-mid); line-height: 1.7; }
.pdp__no-reviews { color: var(--text-light); font-size: 0.88rem; padding: 20px 0; }

/* Related Products */
.pdp__related { padding-top: 40px; border-top: 1px solid var(--border); }
.pdp__related-title {
    font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
    color: var(--text); margin-bottom: 24px;
}
.pdp__related-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.p-card--mini .p-card__body { padding: 12px; }
.p-card--mini .p-card__name { font-size: 0.88rem; }

/* Sticky Mobile CTA */
.pdp__sticky-cta {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    background: var(--white); border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    transform: translateY(100%); transition: transform 0.3s var(--ease);
    display: none;
}
.pdp__sticky-cta.visible { transform: translateY(0); }
.pdp__sticky-cta.hidden { display: none; }
.pdp__sticky-inner {
    max-width: 1200px; margin: 0 auto; padding: 12px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.pdp__sticky-name { font-weight: 700; font-size: 0.9rem; }
.pdp__sticky-price { font-weight: 800; color: var(--cta); font-size: 1rem; }

.btn--sm { padding: 6px 14px; font-size: 0.78rem; }

/* ============================================
   WISHLIST
   ============================================ */
.p-card__wishlist {
    position: absolute; top: 14px; right: 14px; z-index: 4;
    width: 36px; height: 36px; border-radius: var(--radius-full);
    background: var(--white); display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; color: var(--text-light); cursor: pointer;
    transition: all var(--duration) var(--ease-bounce);
    box-shadow: var(--shadow-sm); border: none;
}
.p-card__wishlist:hover { color: #E53935; transform: scale(1.12); }
.p-card__wishlist.active { color: #E53935; }
.p-card__wishlist.active i { font-weight: 900; }

.wishlist-sidebar .cart__body { padding: 16px 24px; }
.wishlist-item {
    display: flex; gap: 14px; padding: 14px 0;
    border-bottom: 1px solid var(--border);
    animation: fadeInUp 0.3s var(--ease);
}
.wishlist-item__img {
    width: 60px; height: 60px; border-radius: var(--radius-md); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
}
.wishlist-item__info { flex: 1; }
.wishlist-item__name { font-weight: 600; font-size: 0.88rem; margin-bottom: 3px; }
.wishlist-item__price { color: var(--cta); font-weight: 700; font-size: 0.85rem; margin-bottom: 6px; }
.wishlist-item__remove { color: var(--text-light); font-size: 0.78rem; padding: 4px; align-self: start; margin-left: auto; cursor: pointer; border: none; background: none; }
.wishlist-item__remove:hover { color: #dc3545; }
.wishlist__empty { text-align: center; padding: 60px 0; }
.wishlist__empty-icon { font-size: 3rem; display: block; margin-bottom: 12px; opacity: 0.4; }
.wishlist__empty p { font-weight: 600; color: var(--text-mid); }
.wishlist__empty small { color: var(--text-light); }

/* ============================================
   CART SHIPPING PROGRESS
   ============================================ */
.cart__shipping { margin-bottom: 16px; padding: 12px 16px; background: var(--sage-light); border-radius: var(--radius-md); }
.cart__shipping-bar { width: 100%; height: 6px; background: rgba(124,154,142,0.2); border-radius: var(--radius-full); overflow: hidden; margin-bottom: 8px; }
.cart__shipping-fill { height: 100%; background: linear-gradient(90deg, var(--sage), var(--sage-dark)); border-radius: var(--radius-full); transition: width 0.6s var(--ease); }
.cart__shipping p { font-size: 0.78rem; color: var(--sage-dark); font-weight: 600; margin: 0; text-align: center; }
.cart__shipping.free { background: #E8F5E9; }
.cart__shipping.free p { color: #2E7D32; }
.cart__shipping.free .cart__shipping-fill { background: #4CAF50; }
.cart__kargo { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.9rem; color: var(--text-mid); }
.cart__payment-icons { display: flex; justify-content: center; gap: 10px; margin-top: 10px; font-size: 1.4rem; color: var(--text-light); }

/* ============================================
   LIVE CHAT BUTTON
   ============================================ */
.whatsapp-btn {
    position: fixed; bottom: 90px; right: 30px; z-index: 98;
    width: 56px; height: 56px; border-radius: var(--radius-full);
    background: #25D366; color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; box-shadow: 0 4px 20px rgba(37,211,102,0.4);
    transition: all var(--duration) var(--ease-bounce);
    animation: float 3s ease-in-out infinite;
}
.whatsapp-btn:hover { transform: scale(1.1) translateY(-4px); box-shadow: 0 8px 30px rgba(37,211,102,0.5); color: var(--white); }
.whatsapp-btn__tooltip {
    position: absolute; bottom: 100%; right: 0; margin-bottom: 10px;
    background: var(--white); color: var(--text); padding: 8px 16px;
    border-radius: var(--radius-md); font-size: 0.78rem; font-weight: 600;
    white-space: nowrap; box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(4px); pointer-events: none;
    transition: all var(--duration) var(--ease);
}
.whatsapp-btn:hover .whatsapp-btn__tooltip { opacity: 1; transform: translateY(0); }

/* ============================================
   KEYFRAMES
   ============================================ */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }
@keyframes scrollWheel { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(12px); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .hero__container { grid-template-columns: 1fr; text-align: center; }
    .hero__desc { margin: 0 auto 32px; }
    .hero__actions { justify-content: center; }
    .hero__trust { justify-content: center; }
    .hero__showcase { margin-top: 40px; }
    .hero__float--1 { right: 10px; }
    .hero__float--2 { left: 10px; }
    .categories__grid { grid-template-columns: repeat(3, 1fr); }
    .products__grid { grid-template-columns: repeat(3, 1fr); }
    .story__grid { grid-template-columns: 1fr; }
    .story__visual { height: 400px; margin-bottom: 20px; }
    .trust-strip__grid { grid-template-columns: repeat(2, 1fr); }
    .promo__card { grid-template-columns: 1fr; text-align: center; }
    .promo__timer { justify-content: center; }
    .newsletter__card { flex-direction: column; text-align: center; }
    .newsletter__form { min-width: auto; width: 100%; }
    .footer__top { grid-template-columns: repeat(2, 1fr); }
    .pdp__grid { gap: 40px; }
    .pdp__related-grid { grid-template-columns: repeat(3, 1fr); }
}


@media (max-width: 768px) {
    /* === HAMBURGER MENU — Full screen overlay === */
    .header__nav {
        display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background: var(--white); z-index: 9999; flex-direction: column;
        justify-content: center; align-items: center;
        padding: 60px 0;
    }
    .header__nav.active { display: flex; }
    .header__nav-list { flex-direction: column; gap: 28px; text-align: center; }
    .header__nav-link { font-size: 1.3rem; font-weight: 600; }
    .header__hamburger { display: flex; z-index: 10000; }

    /* === HEADER — Compact mobile === */
    .header__container { padding: 0 12px; gap: 10px; height: 60px; }
    .header__logo-text { max-width: 110px; }
    .header__brand { font-size: 0.95rem; }
    .header__tagline { font-size: 0.5rem; letter-spacing: 1px; }
    .header__actions { gap: 0; }
    .header__action-btn { width: 34px; height: 34px; font-size: 0.85rem; }
    .currency-switcher, .lang-switcher, #darkmode-toggle, .desktop-only, .loyalty-badge { display: none !important; }

    /* === HERO === */
    .hero__title { font-size: 2.2rem; }
    .hero { min-height: auto; padding: 70px 0 30px; }
    .hero__container { grid-template-columns: 1fr; text-align: center; gap: 20px; }
    .hero__desc { margin: 0 auto 24px; font-size: 0.88rem; }
    .hero__actions { justify-content: center; flex-wrap: wrap; gap: 10px; }
    .hero__trust { justify-content: center; }
    .hero__showcase { margin-top: 20px; }
    .hero__showcase-card { max-width: 280px; margin: 0 auto; }
    .hero__showcase-img { height: 180px; font-size: 4rem; }
    .hero__float { display: none; }
    .section-head__title { font-size: 1.8rem; }

    /* === GRIDS === */
    .trending__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .categories__grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .cat-card { padding: 16px 8px; }
    .cat-card__icon { width: 44px; height: 44px; font-size: 1.3rem; }
    .cat-card__name { font-size: 0.72rem; }
    .products__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .products__toolbar { flex-direction: column; align-items: flex-start; }

    /* === PRODUCT CARDS — Compact mobile === */
    .p-card__media { height: 140px; }
    .p-card__emoji { font-size: 2.8rem; }
    .p-card__body { padding: 8px 10px 10px; }
    .p-card__name { font-size: 0.82rem; margin-bottom: 2px; }
    .p-card__cat { font-size: 0.6rem; margin-bottom: 2px; }
    .p-card__tags { gap: 2px; margin-bottom: 4px; }
    .p-card__age { font-size: 0.55rem; padding: 2px 4px; }
    .p-card__material { font-size: 0.52rem; padding: 2px 4px; }
    .p-card__price { font-size: 0.95rem; }
    .p-card__old-price { font-size: 0.72rem; }
    .p-card__stock { font-size: 0.6rem; margin-top: 4px; }
    .p-card__bnpl { font-size: 0.6rem; }
    .p-card__viewers { font-size: 0.62rem; padding: 3px 8px; }
    .p-card__rating { font-size: 0.78rem; }
    .p-card__stars { font-size: 0.78rem; margin-bottom: 6px; }

    /* === CART & WISHLIST SIDEBARS — Full width mobile === */
    .cart { width: 100%; right: -100%; }
    .cart.active { right: 0; }
    .wishlist-sidebar { width: 100% !important; right: -100% !important; }
    .wishlist-sidebar.active { right: 0 !important; }

    /* === TESTIMONIALS, FOOTER === */
    .testimonials__track { grid-template-columns: 1fr; }
    .footer__top { grid-template-columns: 1fr; }
    .footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
    .promo__card { padding: 28px 20px; grid-template-columns: 1fr; text-align: center; }
    .promo__timer { justify-content: center; }

    /* === SECTIONS — Responsive grids === */
    .budget__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .why-us__grid { grid-template-columns: 1fr; }
    .ugc__grid { grid-template-columns: repeat(3, 1fr); }
    .tips__grid { grid-template-columns: 1fr; }
    .trust-strip__grid { grid-template-columns: repeat(3, 1fr); }
    .bundles__grid { grid-template-columns: 1fr; }
    .newsletter__card { flex-direction: column; text-align: center; }
    .newsletter__form { min-width: auto; width: 100%; }

    /* === PDP responsive === */
    .pdp__grid { grid-template-columns: 1fr; gap: 30px; }
    .pdp__media { position: static; }
    .pdp__name { font-size: 1.6rem; }
    .pdp__emoji { font-size: 6rem; }
    .pdp__related-grid { grid-template-columns: repeat(2, 1fr); }
    .pdp__sticky-cta { display: block; }
    .pdp__tab { padding: 10px 14px; font-size: 0.8rem; }

    /* === ALL PRODUCTS PAGE === */
    .all-products-page { padding-top: 75px; padding-bottom: 80px; }
    .all-products-page__header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .all-products-page__title { font-size: 1.5rem; }
    .all-products-page__subtitle { font-size: 0.8rem; }
    .all-products-page__filters {
        flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px;
    }
    .all-products-page__tabs { gap: 6px; }
    .all-products-page__tabs .tab-btn { padding: 6px 12px; font-size: 0.72rem; }
    .all-products-page__age-filters { gap: 6px; }
    .all-products-page__sort { width: 100%; }
    .products-search-bar { width: 100%; }
    .products-search-bar__input { width: 100% !important; }
    .search-active { flex-wrap: wrap; font-size: 0.78rem; padding: 8px 12px; }

    /* === QUICKVIEW & MODAL === */
    .quickview-popup__body { grid-template-columns: 1fr; }
    .quickview-popup__image { min-height: 200px; font-size: 3.5rem; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
    .modal__grid { grid-template-columns: 1fr; }
    .modal { width: 96%; max-height: 85vh; }
    .modal__media { min-height: 250px; }

    /* === STORY === */
    .story__grid { grid-template-columns: 1fr; }
    .story__visual { height: 300px; margin-bottom: 20px; }
}

@media (max-width: 480px) {
    .hero__title { font-size: 1.8rem; }
    .hero__actions .btn { font-size: 0.82rem; padding: 12px 20px; }
    .products__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .categories__grid { grid-template-columns: repeat(2, 1fr); }
    .trust-strip__grid { grid-template-columns: 1fr; }
    .products__tabs { gap: 4px; }
    .tab-btn { padding: 6px 12px; font-size: 0.75rem; }
    .newsletter__form { flex-direction: column; }
    .newsletter__form .btn { width: 100%; justify-content: center; }
    .pdp__related-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .pdp__actions { flex-direction: column; }
    .pdp__actions .btn--full { width: 100%; }
    .pdp__tab { padding: 8px 10px; font-size: 0.75rem; }
    .age-filter { padding: 5px 10px; font-size: 0.68rem; }

    /* Product cards */
    .p-card__media { height: 150px; }
    .p-card__emoji { font-size: 3rem; }
    .p-card__body { padding: 8px 10px 10px; }
    .p-card__name { font-size: 0.8rem; }
    .p-card__price { font-size: 0.92rem; }
    .p-card__viewers { font-size: 0.55rem; padding: 2px 6px; }
    .p-card__badge { font-size: 0.62rem; padding: 3px 8px; top: 0.6rem; left: 0.6rem; }

    /* Sections */
    .budget__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ugc__grid { grid-template-columns: repeat(2, 1fr); }
    .trust-strip__grid { grid-template-columns: 1fr 1fr; }
    .bundles__grid { grid-template-columns: 1fr; }
    .section-head__title { font-size: 1.5rem; }

    /* All Products Page */
    .all-products-page__title { font-size: 1.3rem; }
    .all-products-page__tabs .tab-btn { padding: 5px 10px; font-size: 0.68rem; }
    .all-products-page__header > div:last-child { width: 100%; }
}

/* ============================================
   FAQ ACCORDION
   ============================================ */
.faq { padding: 50px 0; background: var(--white); }
.faq__list { max-width: 720px; margin: 0 auto; }
.faq__item {
    border-bottom: 1px solid var(--border); overflow: hidden;
}
.faq__question {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 18px 0; background: none; border: none; cursor: pointer;
    font-family: var(--font-display); font-size: 1rem; font-weight: 600;
    color: var(--text); text-align: left; gap: 12px;
    transition: color 0.2s ease;
}
.faq__question:hover { color: var(--cta); }
.faq__question i {
    font-size: 0.75rem; color: var(--text-light);
    transition: transform 0.3s ease;
}
.faq__item.active .faq__question i { transform: rotate(180deg); }
.faq__answer {
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}
.faq__item.active .faq__answer {
    max-height: 200px; padding-bottom: 18px;
}
.faq__answer p {
    font-size: 0.88rem; color: var(--text-mid); line-height: 1.7;
}

/* ============================================
   LIVE SALES NOTIFICATION
   ============================================ */
.live-sale {
    position: fixed; bottom: 24px; left: 24px; z-index: 900;
    background: var(--white); border-radius: var(--radius-xl);
    padding: 14px 18px; display: flex; align-items: center; gap: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    border: 1px solid var(--border);
    animation: slideInLeft 0.5s var(--ease-bounce);
    max-width: 340px;
}
.live-sale.hidden { display: none; }
@keyframes slideInLeft {
    from { transform: translateX(-120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.live-sale__avatar {
    width: 42px; height: 42px; border-radius: var(--radius-full);
    background: var(--sage-light); display: flex; align-items: center;
    justify-content: center; font-size: 1.2rem; flex-shrink: 0;
    font-weight: 700; color: var(--sage-dark);
}
.live-sale__info { flex: 1; }
.live-sale__text { font-size: 0.78rem; color: var(--text); font-weight: 500; margin: 0 0 2px; line-height: 1.4; }
.live-sale__text strong { color: var(--cta); }
.live-sale__time { font-size: 0.65rem; color: var(--text-light); }
.live-sale__verified { font-size: 0.65rem; color: #2E7D32; font-weight: 600; white-space: nowrap; }

/* ============================================
   UPSELL POPUP
   ============================================ */
.upsell-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    z-index: 1099;
}
.upsell-overlay.hidden { display: none; }
.upsell-popup {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--white); border-radius: var(--radius-2xl);
    width: 90%; max-width: 520px; padding: 28px; z-index: 1100;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: popIn 0.4s var(--ease-bounce);
}
.upsell-popup.hidden { display: none; }
.upsell-popup__close {
    position: absolute; top: 12px; right: 12px;
    background: rgba(0,0,0,0.06); border: none; border-radius: var(--radius-full);
    width: 32px; height: 32px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; font-size: 0.85rem;
    color: var(--text-mid);
}
.upsell-popup__title {
    font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
    color: var(--text); margin-bottom: 4px;
}
.upsell-popup__subtitle { font-size: 0.82rem; color: var(--text-mid); margin-bottom: 16px; }
.upsell-popup__items { display: flex; gap: 12px; margin-bottom: 16px; overflow-x: auto; }
.upsell-item {
    flex: 0 0 140px; background: var(--bg-cream); border-radius: var(--radius-lg);
    padding: 12px; text-align: center; cursor: pointer;
    border: 2px solid transparent; transition: all 0.2s ease;
}
.upsell-item:hover { border-color: var(--sage); }
.upsell-item__emoji { font-size: 2rem; margin-bottom: 6px; }
.upsell-item__name { font-size: 0.72rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.upsell-item__price { font-size: 0.85rem; font-weight: 800; color: var(--cta); margin-bottom: 6px; }
.upsell-item__add {
    font-size: 0.65rem; padding: 4px 10px; border-radius: var(--radius-full);
    border: none; background: var(--cta); color: var(--white); cursor: pointer;
    font-weight: 600;
}
.upsell-popup__skip { font-size: 0.78rem; width: 100%; text-align: center; }

/* ============================================
   MOBILE BOTTOM NAV
   ============================================ */
.mobile-nav {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--white); z-index: 999;
    border-top: 1px solid var(--border);
    padding: 4px 0 env(safe-area-inset-bottom, 4px);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}
@media (max-width: 768px) {
    .mobile-nav { display: none; }
    body { padding-bottom: 0; }
}
.mobile-nav__item {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    background: none; border: none; cursor: pointer;
    color: var(--text-light); font-size: 0.55rem; font-weight: 600;
    padding: 4px 10px; position: relative; transition: color 0.2s ease;
    font-family: var(--font-body);
}
.mobile-nav__item i { font-size: 0.95rem; }
.mobile-nav__item.active { color: var(--cta); }
.mobile-nav__badge {
    position: absolute; top: -2px; right: 2px;
    background: var(--cta); color: var(--white);
    font-size: 0.45rem; font-weight: 800;
    width: 14px; height: 14px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
}
.mobile-nav__badge.hidden { display: none; }

/* ============================================
   SORT DROPDOWN (Products Page)
   ============================================ */
.all-products-page__sort {
    padding: 8px 14px; border-radius: var(--radius-full);
    border: 1.5px solid var(--border); background: var(--white);
    font-size: 0.8rem; font-weight: 600; color: var(--text-mid);
    cursor: pointer; font-family: var(--font-body);
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 30px;
}

/* ============================================
   PEOPLE VIEWING BADGE (product cards)
   ============================================ */
.p-card__viewers {
    position: absolute; bottom: 8px; left: 8px;
    background: rgba(0,0,0,0.65); color: var(--white);
    font-size: 0.62rem; font-weight: 600; padding: 3px 8px;
    border-radius: var(--radius-full); display: flex;
    align-items: center; gap: 4px;
    z-index: 2;
}
.p-card__viewers i { font-size: 0.55rem; color: #4CAF50; }

/* ============================================
   SKELETON LOADING
   ============================================ */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-lg);
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skeleton-card { height: 300px; border-radius: var(--radius-xl); }

/* ============================================
   FREQUENTLY BOUGHT TOGETHER (PDP)
   ============================================ */
.pdp__fbt { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--border); }
.pdp__fbt-title {
    font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
    color: var(--text); margin-bottom: 20px; display: flex; align-items: center; gap: 8px;
}
.pdp__fbt-title i { color: var(--sage); }
.pdp__fbt-grid { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.pdp__fbt-item {
    flex: 0 0 120px; text-align: center; background: var(--bg-cream);
    border-radius: var(--radius-lg); padding: 14px 10px;
    border: 2px solid transparent; transition: border-color 0.2s ease; cursor: pointer;
}
.pdp__fbt-item:hover { border-color: var(--sage); }
.pdp__fbt-item__emoji { font-size: 2rem; margin-bottom: 6px; }
.pdp__fbt-item__name { font-size: 0.68rem; font-weight: 600; color: var(--text); margin-bottom: 4px; line-height: 1.3; }
.pdp__fbt-item__price { font-size: 0.82rem; font-weight: 800; color: var(--cta); }
.pdp__fbt-plus { font-size: 1.2rem; color: var(--text-light); font-weight: 700; }
.pdp__fbt-total {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--bg-cream); padding: 14px 20px; border-radius: var(--radius-lg);
}
.pdp__fbt-total span { font-size: 0.9rem; color: var(--text-mid); }
.pdp__fbt-total strong { font-size: 1.1rem; color: var(--cta); }

/* ============================================
   SIZE GUIDE BUTTON & POPUP
   ============================================ */
.pdp__size-guide-btn {
    background: none; border: 1px dashed var(--border); border-radius: var(--radius-lg);
    padding: 10px 16px; cursor: pointer; font-size: 0.82rem; font-weight: 600;
    color: var(--text-mid); display: flex; align-items: center; gap: 6px;
    transition: all 0.2s ease; width: 100%; justify-content: center;
    font-family: var(--font-body); margin-top: 10px;
}
.pdp__size-guide-btn:hover { border-color: var(--sage); color: var(--sage-dark); background: var(--sage-light); }
.sizeguide-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    z-index: 1099;
}
.sizeguide-overlay.hidden { display: none; }
.sizeguide-popup {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--white); border-radius: var(--radius-2xl);
    width: 90%; max-width: 500px; padding: 28px; z-index: 1100;
    box-shadow: 0 16px 48px rgba(0,0,0,0.15);
}
.sizeguide-popup.hidden { display: none; }
.sizeguide-popup__close {
    position: absolute; top: 12px; right: 12px;
    background: rgba(0,0,0,0.06); border: none; border-radius: var(--radius-full);
    width: 32px; height: 32px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; font-size: 0.85rem; color: var(--text-mid);
}
.sizeguide-popup__title {
    font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
    color: var(--text); margin-bottom: 4px; display: flex; align-items: center; gap: 8px;
}
.sizeguide-popup__title i { color: var(--sage); }
.sizeguide-popup__subtitle { font-size: 0.82rem; color: var(--text-mid); margin-bottom: 16px; }
.sizeguide-popup__table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.sizeguide-popup__table th {
    background: var(--sage); color: var(--white); padding: 10px 12px;
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700;
}
.sizeguide-popup__table td {
    padding: 10px 12px; font-size: 0.82rem; border-bottom: 1px solid var(--border);
    color: var(--text);
}
.sizeguide-popup__table tr:hover td { background: var(--bg-cream); }
.sizeguide-popup__tip {
    font-size: 0.78rem; color: var(--sage-dark); background: var(--sage-light);
    padding: 10px 14px; border-radius: var(--radius-md); display: flex; align-items: center; gap: 8px;
}
.sizeguide-popup__tip i { color: var(--clay); }

/* ============================================
   PHOTO REVIEWS GALLERY
   ============================================ */
.photo-reviews { padding: 50px 0; background: var(--bg-cream); }
.photo-reviews__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.photo-review-card {
    background: var(--white); border-radius: var(--radius-xl); overflow: hidden;
    border: 1px solid var(--border); transition: all 0.3s ease;
}
.photo-review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.photo-review-card__img {
    height: 160px; display: flex; align-items: center; justify-content: center;
    font-size: 3.5rem; position: relative; overflow: hidden;
}
.photo-review-card__body { padding: 14px 16px; }
.photo-review-card__stars { color: #F59E0B; font-size: 0.75rem; margin-bottom: 6px; }
.photo-review-card__text {
    font-size: 0.78rem; color: var(--text-mid); line-height: 1.5;
    margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden; line-clamp: 3;
}
.photo-review-card__author {
    display: flex; align-items: center; gap: 8px;
}
.photo-review-card__avatar {
    width: 28px; height: 28px; border-radius: var(--radius-full);
    background: var(--sage-light); display: flex; align-items: center;
    justify-content: center; font-size: 0.6rem; font-weight: 700; color: var(--sage-dark);
}
.photo-review-card__name { font-size: 0.7rem; font-weight: 600; color: var(--text); }
.photo-review-card__loc { font-size: 0.6rem; color: var(--text-light); }

/* ============================================
   PARALLAX SECTIONS
   ============================================ */
.parallax-bg {
    background-attachment: fixed; background-size: cover; background-position: center;
}

/* ============================================
   STICKY HEADER
   ============================================ */
.header.sticky {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 8px 0; box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.97);
    transition: padding 0.3s ease, box-shadow 0.3s ease;
}
.header.sticky .header__logo { font-size: 1.3rem; }

/* ============================================
   CURRENCY SWITCHER
   ============================================ */
.currency-switcher { position: relative; }
.currency-switcher__btn {
    display: flex; align-items: center; gap: 4px;
    background: none; border: 1px solid var(--border); border-radius: var(--radius-full);
    padding: 5px 10px; cursor: pointer; font-size: 0.72rem; font-weight: 600;
    color: var(--text-mid); font-family: var(--font-body);
    transition: all 0.2s ease;
}
.currency-switcher__btn:hover { border-color: var(--sage); }
.currency-switcher__dropdown {
    position: absolute; top: 100%; right: 0; margin-top: 6px;
    background: var(--white); border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); border: 1px solid var(--border);
    overflow: hidden; z-index: 100; min-width: 120px;
}
.currency-switcher__dropdown.hidden { display: none; }
.currency-switcher__dropdown button {
    display: block; width: 100%; text-align: left; padding: 10px 14px;
    border: none; background: none; cursor: pointer; font-size: 0.78rem;
    font-family: var(--font-body); color: var(--text); transition: background 0.15s ease;
}
.currency-switcher__dropdown button:hover { background: var(--bg-cream); }

/* ============================================
   EXIT-INTENT POPUP
   ============================================ */
.exit-popup-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 1199;
}
.exit-popup-overlay.hidden { display: none; }
.exit-popup {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--white); border-radius: var(--radius-2xl);
    width: 90%; max-width: 400px; padding: 32px; z-index: 1200;
    text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: popIn 0.4s var(--ease-bounce);
}
.exit-popup.hidden { display: none; }
@keyframes popIn { from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.exit-popup__close {
    position: absolute; top: 12px; right: 12px;
    background: rgba(0,0,0,0.06); border: none; border-radius: var(--radius-full);
    width: 32px; height: 32px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; color: var(--text-mid);
}
.exit-popup__emoji { font-size: 3rem; margin-bottom: 12px; }
.exit-popup__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
.exit-popup__text { font-size: 0.88rem; color: var(--text-mid); margin-bottom: 16px; }
.exit-popup__code {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--bg-cream); padding: 12px 20px; border-radius: var(--radius-lg);
    margin-bottom: 16px; border: 2px dashed var(--clay);
}
.exit-popup__code span { font-size: 1.3rem; font-weight: 800; color: var(--cta); letter-spacing: 3px; }
.exit-popup__code button {
    border: none; background: var(--sage); color: var(--white); padding: 5px 12px;
    border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; gap: 4px;
}

/* ============================================
   EMAIL CAPTURE POPUP
   ============================================ */
.email-popup-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 1199;
}
.email-popup-overlay.hidden { display: none; }
.email-popup {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--white); border-radius: var(--radius-2xl);
    width: 90%; max-width: 420px; padding: 32px; z-index: 1200;
    text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: popIn 0.4s var(--ease-bounce);
}
.email-popup.hidden { display: none; }
.email-popup__close {
    position: absolute; top: 12px; right: 12px;
    background: rgba(0,0,0,0.06); border: none; border-radius: var(--radius-full);
    width: 32px; height: 32px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; color: var(--text-mid);
}
.email-popup__visual { font-size: 2.5rem; margin-bottom: 10px; }
.email-popup__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; }
.email-popup__text { font-size: 0.85rem; color: var(--text-mid); margin-bottom: 16px; line-height: 1.5; }
.email-popup__form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.email-popup__form input {
    padding: 12px 16px; border-radius: var(--radius-lg); border: 1.5px solid var(--border);
    font-size: 0.88rem; font-family: var(--font-body); text-align: center;
}
.email-popup__form input:focus { border-color: var(--sage); outline: none; }
.email-popup__privacy { font-size: 0.68rem; color: var(--text-light); }

/* ============================================
   COOKIE CONSENT BANNER
   ============================================ */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 998;
    background: var(--bg-dark); color: var(--white);
    padding: 14px 20px; animation: slideUp 0.5s var(--ease-bounce);
}
.cookie-banner.hidden { display: none; }
.cookie-banner__inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap;
}
.cookie-banner__inner p { font-size: 0.78rem; color: rgba(255,255,255,0.8); margin: 0; flex: 1; }
.cookie-banner__inner a { color: var(--clay); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 8px; }

/* ============================================
   STOCK URGENCY PULSE
   ============================================ */
.p-card__stock { animation: urgencyPulse 2s ease-in-out infinite; }
@keyframes urgencyPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; transform: scale(1.02); }
}

/* ============================================
   INSTAGRAM FEED
   ============================================ */
.insta-feed { padding: 50px 0; }
.insta-feed__grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 20px;
}
.insta-card {
    aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden;
    cursor: pointer; position: relative; display: flex;
    align-items: center; justify-content: center; font-size: 2.5rem;
    transition: transform 0.3s ease;
}
.insta-card:hover { transform: scale(1.05); }
.insta-card::after {
    content: '\f16d'; font-family: 'Font Awesome 6 Brands'; font-weight: 400;
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; background: rgba(0,0,0,0.4); color: white;
    font-size: 1.5rem; opacity: 0; transition: opacity 0.3s ease;
}
.insta-card:hover::after { opacity: 1; }
.insta-feed__follow {
    display: flex; align-items: center; gap: 8px; margin: 0 auto;
}

/* ============================================
   COUNTDOWN DEAL BANNER
   ============================================ */
.countdown-deal { padding: 40px 0; background: var(--bg-cream); }
.countdown-deal__inner {
    background: linear-gradient(135deg, rgba(24, 24, 27, 0.95) 0%, rgba(39, 39, 42, 0.98) 100%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-2xl); padding: 36px 48px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; position: relative; overflow: hidden;
}
.countdown-deal__inner::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,215,0,0.05) 0%, transparent 60%);
    pointer-events: none;
}
.countdown-deal__label {
    display: inline-block; background: rgba(255, 215, 0, 0.15); color: #FFD700;
    padding: 6px 14px; border-radius: var(--radius-full); border: 1px solid rgba(255,215,0,0.3);
    font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px;
}
.countdown-deal__text { position: relative; z-index: 1; }
.countdown-deal__text h3 { color: var(--white); font-family: var(--font-display); font-size: 1.6rem; margin-top: 10px; font-weight: 800; letter-spacing: -0.5px; }
.countdown-deal__timer { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.countdown-deal__block {
    text-align: center; background: rgba(0, 0, 0, 0.3); padding: 12px 18px;
    border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px); min-width: 70px;
}
.countdown-deal__block span { display: block; color: var(--white); font-size: 1.8rem; font-weight: 800; font-family: var(--font-display); line-height: 1; margin-bottom: 4px; }
.countdown-deal__block small { font-size: 0.6rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px; }
.countdown-deal__sep { color: rgba(255,255,255,0.4); font-size: 1.3rem; font-weight: 800; }

/* ============================================
   GIFT WRAP TOGGLE
   ============================================ */
.cart__gift-wrap { padding: 10px 0; border-bottom: 1px solid var(--border); }
.gift-wrap-toggle {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 0.82rem; color: var(--text-mid);
}
.gift-wrap-toggle input { accent-color: var(--sage); width: 16px; height: 16px; }
.gift-wrap-toggle__label { flex: 1; font-weight: 500; }
.gift-wrap-toggle__price { font-weight: 700; color: var(--cta); font-size: 0.78rem; }

/* (Compare feature removed — not relevant for baby products) */

/* ============================================
   WISHLIST SHARE BTN
   ============================================ */
.wishlist-share-btn {
    background: none; border: 1px solid var(--border); border-radius: var(--radius-full);
    width: 32px; height: 32px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; color: var(--text-mid);
    transition: all 0.2s ease; font-size: 0.8rem;
}
.wishlist-share-btn:hover { background: var(--sage-light); color: var(--sage-dark); border-color: var(--sage); }

/* ============================================
   ACCESSIBILITY
   ============================================ */
*:focus-visible {
    outline: 2px solid var(--sage); outline-offset: 2px; border-radius: 4px;
}
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================
   DARK MODE (Unified & Comprehensive)
   ============================================ */
body.dark-mode {
    --bg: #0f0f1a; --bg-alt: #16162a; --bg-cream: #16162a; --bg-dark: #0a0a14;
    --white: #1a1a2e; --text: #e8e8f0; --text-mid: #b0b0cc;
    --text-light: #8080a0; --border: #2a2a4a; --border-light: #2a2a4a;
    --clay-light: #2a2a4a; --sage-light: #1a2e22; --blush-light: #2e1a22;
}
/* Header & Nav */
body.dark-mode .header { background: rgba(15,15,26,0.97); border-bottom-color: #2a2a4a; }
body.dark-mode .header.sticky { background: rgba(15,15,26,0.98); }
body.dark-mode .header__brand { color: #e8e8f0; }
body.dark-mode .header__tagline { color: #8080a0; }
body.dark-mode .header__nav-link { color: #b0b0cc; }
body.dark-mode .header__nav-link:hover,
body.dark-mode .header__nav-link.active { color: #ffffff; }
body.dark-mode .header__action-btn { color: #d0d0e0; }
body.dark-mode .header__action-btn:hover { background: rgba(255,255,255,0.08); }
body.dark-mode .header__hamburger span { background: #e8e8f0; }
/* Announcement */
body.dark-mode .announcement { background: linear-gradient(90deg, #1a1a30, #16162a); color: #ffffff !important; }
body.dark-mode .announcement p, body.dark-mode .announcement strong { color: #ffffff !important; }
body.dark-mode .announcement strong { color: #FFD700 !important; }
/* Hero */
body.dark-mode .hero { background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #16162a 100%); }
body.dark-mode .hero__bg { opacity: 0.3; }
body.dark-mode .hero__title { color: #e8e8f0; }
body.dark-mode .hero__title-accent { color: var(--cta); }
body.dark-mode .hero__desc { color: #b0b0cc; }
body.dark-mode .hero__trust-item { color: #b0b0cc; }
body.dark-mode .hero__showcase-card { background: #1e1e32; border-color: #2a2a4a; }
body.dark-mode .hero__float { background: #1e1e32; border-color: #2a2a4a; }
body.dark-mode .hero__label { background: rgba(255,255,255,0.06); color: #b0b0cc; }
/* Section Heads */
body.dark-mode .section-head__title { color: #e8e8f0; }
body.dark-mode .section-head__desc { color: #b0b0cc; }
body.dark-mode .section-head__label { color: var(--cta); }
/* Product Cards */
body.dark-mode .p-card { background: #1e1e32; border-color: #2a2a4a; }
body.dark-mode .p-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
body.dark-mode .p-card__name { color: #e8e8f0; }
body.dark-mode .p-card__cat { color: #8080a0; }
/* PDP */
body.dark-mode .pdp__name { color: #e8e8f0; }
body.dark-mode .pdp__cat { color: #8080a0; }
body.dark-mode .pdp__installment { background: #2a2a40; color: #FFB74D; }
body.dark-mode .pdp__badges .pdp__badge { opacity: 0.9; }
body.dark-mode .pdp__delivery-date { background: #1a2e1a; color: #81C784; }
body.dark-mode .pdp__promises { background: #1e1e32 !important; border-color: #2a2a4a !important; }
body.dark-mode .pdp__promise { color: #b0b0cc; }
body.dark-mode .pdp__inbox { background: #1e1e32; }
body.dark-mode .pdp__tab { color: #b0b0cc; border-color: #2a2a4a; }
body.dark-mode .pdp__tab.active { color: #e8e8f0; border-color: var(--cta); }
body.dark-mode .pdp__trust-badges span { color: #b0b0cc; background: #1e1e32; }
body.dark-mode .pdp__image-main { background: #16162a; }
/* Tabs & Descriptions */
body.dark-mode .pdp__tab-content { color: #b0b0cc; }
body.dark-mode .pdp__fbt { border-top-color: #2a2a4a; }
body.dark-mode .pdp__fbt-item { background: #1e1e32; }
body.dark-mode .pdp__fbt-total { background: #1e1e32; }
body.dark-mode .pdp__related-title { color: #e8e8f0; }
/* Cart & Wishlist */
body.dark-mode .cart, body.dark-mode .wishlist-sidebar { background: #1a1a2e; }
body.dark-mode .cart__head { border-bottom-color: #2a2a4a; }
body.dark-mode .cart__head h3 { color: #e8e8f0; }
body.dark-mode .cart-item { border-bottom-color: #2a2a4a; }
body.dark-mode .cart-item__name { color: #e8e8f0; }
body.dark-mode .cart__summary { border-top-color: #2a2a4a; }
body.dark-mode .cart__summary-row { color: #b0b0cc; }
body.dark-mode .cart__summary-total { color: #e8e8f0; }
body.dark-mode .cart__trust-line { color: #8080a0; }
body.dark-mode .cart__bundle-alert { background: #1a2e1a !important; color: #81C784 !important; }
/* Footer */
body.dark-mode .footer { background: #0a0a14; color: #b0b0cc; }
body.dark-mode .footer h4 { color: #e8e8f0; }
body.dark-mode .footer a { color: #8080a0; }
body.dark-mode .footer a:hover { color: #e8e8f0; }
body.dark-mode .footer__bottom { border-top-color: #2a2a4a; }
/* Modals & Popups */
body.dark-mode .exit-popup, body.dark-mode .email-popup,
body.dark-mode .sizeguide-popup, body.dark-mode .social-login,
body.dark-mode .account-modal { background: #1a1a2e; }
body.dark-mode .quickview-popup { background: #1a1a2e; }
body.dark-mode .upsell-popup { background: #1a1a2e; }
body.dark-mode .upsell-item { background: #1e1e32; }
/* Notification center */
body.dark-mode .notif-center { background: #1a1a2e; border-color: #2a2a4a; }
body.dark-mode .notif-center__head { border-bottom-color: #2a2a4a; }
body.dark-mode .notif-item { border-bottom-color: #2a2a4a; }
/* Search */
body.dark-mode .search-overlay { background: rgba(15,15,26,0.97); }
body.dark-mode .search-overlay__input { background: #1e1e32; color: #e8e8f0; border-color: #2a2a4a; }
body.dark-mode .search-overlay__popular button { background: #1e1e32; color: #b0b0cc; border-color: #2a2a4a; }
body.dark-mode .search-result-item { color: #e8e8f0; }
body.dark-mode .search-result-item:hover { background: #1e1e32; }
/* Inputs & Forms */
body.dark-mode input, body.dark-mode textarea, body.dark-mode select { background: #1e1e32; color: #e8e8f0; border-color: #2a2a4a; }
body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: #6b6b82; }
/* Cookie */
body.dark-mode .cookie-banner { background: rgba(15,15,26,0.97); }
/* Story highlights */
body.dark-mode .story-item__inner { background: #1e1e32; border-color: #2a2a4a; }
/* Photo reviews */
body.dark-mode .photo-review-card { background: #1e1e32; border-color: #2a2a4a; }
/* Countdown deal */
body.dark-mode .countdown-deal { background: #0f0f1a; }
/* Order history & Chat */
body.dark-mode .order-history { background: #1a1a2e; }
body.dark-mode .order-history__item { border-color: #2a2a40; }
body.dark-mode .giftcard-modal { background: #1a1a2e; }
body.dark-mode .live-chat { background: #1a1a2e; }
body.dark-mode .live-chat__body { background: #16162a; }
body.dark-mode .chat-msg--bot span { background: #2a2a40; color: #e4e4ef; }
body.dark-mode .social-proof-toast { background: #1a1a2e; border-color: #2a2a40; }
body.dark-mode .ai-reco__card { background: #1e1e32; border-color: #2a2a40; }
body.dark-mode .satisfaction-banner { background: linear-gradient(135deg, #1a2e1a, #16162a) !important; }
/* Sections */
body.dark-mode .trending { background: #12121f; }
body.dark-mode .products { background: #0f0f1a; }
body.dark-mode .photo-reviews { background: #16162a; }
body.dark-mode .parent-tips { background: #0f0f1a; }
body.dark-mode .tips__card { background: #1e1e32; }
body.dark-mode .tips__body { color: #b0b0cc; }
body.dark-mode .ugc-section { background: #16162a; }
body.dark-mode .all-products-page { background: #0f0f1a; }
body.dark-mode .all-products-page__title { color: #e8e8f0; }
body.dark-mode .age-filter { background: #1e1e32; color: #b0b0cc; border-color: #2a2a4a; }
body.dark-mode .age-filter.active { background: var(--cta); color: #fff; }
/* Trust badges */
body.dark-mode .trust-badge { color: #b0b0cc; }
body.dark-mode .trust-badge i { background: #1e1e32; color: var(--sage); }
body.dark-mode .us-trust-bar { background: #1a1a2e; border-color: #2a2a4a; }
/* DarkMode Icon toggle */
body.dark-mode #darkmode-toggle .fa-moon::before { content: '\f185'; }
/* Pagination */
body.dark-mode .pagination__btn { background: var(--bg-alt); color: var(--text); border-color: var(--border); }
body.dark-mode .pagination__btn.active { background: var(--cta); color: var(--white); border-color: var(--cta); }
body.dark-mode .pagination__btn:disabled { background: var(--bg); opacity: 0.5; color: var(--text-light); }
body.dark-mode .pagination__dots { color: var(--text-light); }


/* ============================================
   NOTIFICATION CENTER
   ============================================ */
.notif-center {
    position: absolute; top: 100%; right: 0; margin-top: 8px; z-index: 1100;
    background: var(--white); border-radius: var(--radius-xl);
    width: 340px; max-height: 420px;
    overflow-y: auto; overflow-x: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15); border: 1px solid var(--border);
    contain: layout;
    transform-origin: top right;
    animation: notifSlideIn 0.25s ease-out;
}
.notif-center::-webkit-scrollbar { width: 4px; }
.notif-center::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
@keyframes notifSlideIn {
    from { opacity: 0; transform: scale(0.95) translateY(-8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.notif-center.hidden { display: none; }
.notif-center__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: var(--white); z-index: 2;
}
.notif-center__head h4 { font-size: 0.88rem; font-weight: 700; display: flex; align-items: center; gap: 6px; margin: 0; }
.notif-center__head button {
    background: none; border: 1px solid var(--border); color: var(--text-light);
    font-size: 0.68rem; cursor: pointer; font-family: var(--font-body);
    padding: 4px 10px; border-radius: var(--radius-full); font-weight: 600;
    transition: all 0.15s ease;
}
.notif-center__head button:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.notif-center__list { padding: 4px 0; }
.notif-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 2px 8px;
    border-radius: var(--radius-lg);
    transition: background 0.15s ease, opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
    cursor: pointer; position: relative;
    border-bottom: none;
}
.notif-item:hover { background: var(--bg-cream); }
.notif-item--removing {
    opacity: 0; transform: translateX(40px); max-height: 0 !important;
    padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important;
    overflow: hidden;
}
.notif-item__icon {
    width: 36px; height: 36px; min-width: 36px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.notif-item__body { flex: 1; min-width: 0; }
.notif-item__text { font-size: 0.78rem; color: var(--text); line-height: 1.4; white-space: normal; word-break: break-word; }
.notif-item__time { font-size: 0.65rem; color: var(--text-light); margin-top: 2px; }
.notif-item__dismiss {
    width: 24px; height: 24px; min-width: 24px; border-radius: var(--radius-full);
    border: none; background: var(--bg-alt); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-mid); font-size: 0.75rem; flex-shrink: 0;
    transition: all 0.15s ease; opacity: 1; /* Always visible for mobile */
}
.notif-item:hover .notif-item__dismiss { opacity: 1; }
.notif-item__dismiss:hover {
    background: #fee2e2; color: #dc2626;
}
.notif-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 32px 20px; gap: 8px; color: var(--text-light);
}
.notif-empty i { font-size: 1.5rem; opacity: 0.4; }
.notif-empty span { font-size: 0.82rem; }

/* ============================================
   SOCIAL LOGIN POPUP
   ============================================ */
.social-login-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1199; }
.social-login-overlay.hidden { display: none; }
.social-login {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--white); border-radius: var(--radius-2xl);
    width: 90%; max-width: 380px; padding: 32px; z-index: 1200;
    text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: popIn 0.4s var(--ease-bounce);
}
.social-login.hidden { display: none; }
.social-login__close { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.06); border: none; border-radius: var(--radius-full); width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-mid); }
.social-login__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-bottom: 6px; }
.social-login__text { font-size: 0.82rem; color: var(--text-mid); margin-bottom: 20px; }
.social-login__buttons { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.social-login__btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px; border-radius: var(--radius-lg); border: none; cursor: pointer;
    font-size: 0.85rem; font-weight: 600; font-family: var(--font-body); transition: transform 0.15s ease;
}
.social-login__btn:hover { transform: scale(1.02); }
.social-login__btn--google { background: #fff; border: 1.5px solid #ddd; color: #333; }
.social-login__btn--fb { background: #1877F2; color: white; }
.social-login__btn--apple { background: #000; color: white; }
.social-login__privacy { font-size: 0.68rem; color: var(--text-light); }
.social-login__privacy a { color: var(--sage); }

/* ============================================
   RECENTLY VIEWED
   ============================================ */
.recently-viewed { padding: 40px 0; }
.recently-viewed__grid {
    display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.recently-viewed__grid::-webkit-scrollbar { height: 4px; }
.recently-viewed__grid::-webkit-scrollbar-thumb { background: var(--sage); border-radius: 4px; }
.rv-card {
    flex: 0 0 160px; scroll-snap-align: start; cursor: pointer;
    background: var(--white); border-radius: var(--radius-lg);
    border: 1px solid var(--border); overflow: hidden; transition: all 0.2s ease;
}
.rv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.rv-card__img { height: 100px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }
.rv-card__body { padding: 8px 10px; }
.rv-card__name { font-size: 0.7rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-card__price { font-size: 0.78rem; font-weight: 800; color: var(--cta); }

/* ============================================
   LANGUAGE SWITCHER
   ============================================ */
.lang-switcher { position: relative; }
.lang-switcher__btn {
    display: flex; align-items: center; gap: 4px;
    background: none; border: 1px solid var(--border); border-radius: var(--radius-full);
    padding: 5px 10px; cursor: pointer; font-size: 0.72rem; font-weight: 600;
    color: var(--text-mid); font-family: var(--font-body); transition: all 0.2s ease;
}
.lang-switcher__btn:hover { border-color: var(--sage); }
.lang-switcher__dropdown {
    position: absolute; top: 100%; right: 0; margin-top: 6px;
    background: var(--white); border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); border: 1px solid var(--border);
    overflow: hidden; z-index: 100; min-width: 130px;
}
.lang-switcher__dropdown.hidden { display: none; }
.lang-switcher__dropdown button {
    display: block; width: 100%; text-align: left; padding: 10px 14px;
    border: none; background: none; cursor: pointer; font-size: 0.78rem;
    font-family: var(--font-body); color: var(--text); transition: background 0.15s ease;
}
.lang-switcher__dropdown button:hover { background: var(--bg-cream); }

/* ============================================
   PAGE TRANSITIONS
   ============================================ */
.page-transition {
    position: fixed; inset: 0; z-index: 9999; pointer-events: none;
    background: var(--sage); transform: scaleX(0); transform-origin: left;
}
.page-transition.active { animation: pageWipe 0.5s ease-in-out; }
@keyframes pageWipe {
    0% { transform: scaleX(0); transform-origin: left; }
    50% { transform: scaleX(1); transform-origin: left; }
    50.1% { transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
}

/* ============================================
   PRODUCT ZOOM ON HOVER
   ============================================ */
.pdp__image-main { overflow: hidden; position: relative; cursor: zoom-in; }
.pdp__image-main:hover .pdp__emoji { transform: scale(1.8); transition: transform 0.4s ease; }

/* ============================================
   REWARDS POINTS
   ============================================ */
.rewards-bar {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    background: linear-gradient(135deg, #FFD700, #FFA500); border-radius: var(--radius-lg);
    margin-bottom: 12px; color: #333; font-size: 0.78rem; font-weight: 600;
}
.rewards-bar i { font-size: 1rem; }
.rewards-bar__points { font-weight: 800; font-size: 0.88rem; }

/* ============================================
   SPLASH LOADING SCREEN
   ============================================ */
.splash-screen {
    position: fixed; inset: 0; z-index: 99999;
    background: linear-gradient(135deg, #E8F0EC 0%, #F5EDE3 50%, #FCEAE9 100%);
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.splash-screen.hidden { opacity: 0; visibility: hidden; }
.splash-screen__inner { text-align: center; }
.splash-screen__logo { font-size: 3.5rem; margin-bottom: 12px; animation: splashPulse 1.5s ease-in-out infinite; }
.splash-screen__title { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--sage-dark); margin-bottom: 20px; }
.splash-screen__bar { width: 180px; height: 4px; background: rgba(0,0,0,0.08); border-radius: 4px; overflow: hidden; margin: 0 auto; }
.splash-screen__fill { width: 0; height: 100%; background: linear-gradient(90deg, var(--sage), var(--clay)); border-radius: 4px; animation: splashLoad 1.5s ease-in-out forwards; }
@keyframes splashPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes splashLoad { to { width: 100%; } }

/* ============================================
   STORY HIGHLIGHTS
   ============================================ */
.story-highlights { padding: 16px 0 0; }
.story-highlights__scroll {
    display: flex; gap: 16px; overflow-x: auto; padding: 8px 0 12px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.story-highlights__scroll::-webkit-scrollbar { display: none; }
.story-item {
    flex: 0 0 auto; text-align: center; cursor: pointer; scroll-snap-align: start;
}
.story-item__ring {
    width: 68px; height: 68px; border-radius: 50%;
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    padding: 3px; margin-bottom: 6px;
}
.story-item__inner {
    width: 100%; height: 100%; border-radius: 50%;
    background: var(--white); display: flex; align-items: center;
    justify-content: center; font-size: 1.6rem; border: 2px solid var(--white);
}
.story-item__name { font-size: 0.62rem; font-weight: 600; color: var(--text-mid); max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-item:hover .story-item__ring { transform: scale(1.08); transition: transform 0.2s ease; }

/* ============================================
   PROMO CODE FORM
   ============================================ */
.cart__promo { padding: 10px 0; border-bottom: 1px solid var(--border); }
.promo-form { display: flex; gap: 6px; }
.promo-form__input {
    flex: 1; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-md);
    font-size: 0.78rem; font-family: var(--font-body); text-transform: uppercase;
}
.promo-form__input:focus { border-color: var(--sage); outline: none; }
.promo-form__btn {
    padding: 8px 14px; background: var(--sage); color: var(--white); border: none;
    border-radius: var(--radius-md); font-size: 0.72rem; font-weight: 700;
    cursor: pointer; font-family: var(--font-body); white-space: nowrap;
}
.promo-result { padding: 6px 0; font-size: 0.75rem; font-weight: 600; }
.promo-result.hidden { display: none; }
.promo-result.success { color: #22c55e; }
.promo-result.error { color: #ef4444; }

/* ============================================
   SHIPPING CALCULATOR
   ============================================ */
.cart__ship-calc { padding: 8px 0; }
.cart__ship-calc details { font-size: 0.78rem; }
.cart__ship-calc summary {
    cursor: pointer; font-weight: 600; color: var(--text-mid);
    display: flex; align-items: center; gap: 6px;
}
.cart__ship-calc select {
    width: 100%; margin-top: 8px; padding: 8px 10px; border: 1.5px solid var(--border);
    border-radius: var(--radius-md); font-size: 0.78rem; font-family: var(--font-body);
    background: var(--white);
}
.ship-estimate { margin-top: 6px; font-size: 0.75rem; color: var(--text-mid); font-weight: 500; }

/* ============================================
   SKELETON SHIMMER
   ============================================ */
.skeleton-card {
    background: var(--bg-cream); border-radius: var(--radius-xl);
    overflow: hidden; position: relative;
}
.skeleton-card__img { height: 160px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
.skeleton-card__body { padding: 14px; }
.skeleton-card__line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; margin-bottom: 8px; }
.skeleton-card__line--short { width: 60%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ============================================
   Q&A TAB STYLES
   ============================================ */
.qa-section { padding: 8px 0; }
.qa-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.qa-item__question { font-weight: 700; font-size: 0.85rem; color: var(--text); margin-bottom: 6px; display: flex; gap: 6px; }
.qa-item__answer { font-size: 0.8rem; color: var(--text-mid); line-height: 1.5; padding-left: 22px; }
.qa-form { display: flex; gap: 8px; margin-top: 12px; }
.qa-form input { flex: 1; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-md); font-size: 0.78rem; font-family: var(--font-body); }
.qa-form button { padding: 8px 14px; background: var(--sage); color: var(--white); border: none; border-radius: var(--radius-md); font-size: 0.72rem; font-weight: 700; cursor: pointer; }

/* ============================================
   MOBILE RESPONSIVE POLISH R6
   ============================================ */
@media (max-width: 768px) {
    .currency-switcher, .lang-switcher { display: none; }
    .story-highlights__scroll { gap: 12px; padding-left: 4px; }
    .story-item__ring { width: 56px; height: 56px; }
    .story-item__inner { font-size: 1.2rem; }
    .story-item__name { font-size: 0.55rem; }
    .insta-feed__grid { grid-template-columns: repeat(3, 1fr); }
    .countdown-deal__inner { flex-direction: column; text-align: center; padding: 20px; }
    .notif-center { position: fixed; width: 90%; right: 5%; left: 5%; top: 70px; z-index: 10001; }
}

/* ============================================
   TRUST BADGES
   ============================================ */
.trust-badges { padding: 30px 0 10px; }
.trust-badges__grid {
    display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;
}
.trust-badge {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    font-size: 0.7rem; font-weight: 600; color: var(--text-mid); text-align: center;
}
.trust-badge i {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--sage-light); color: var(--sage-dark);
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}

/* ============================================
   ABANDONED CART POPUP
   ============================================ */
.abandon-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1199; }
.abandon-overlay.hidden { display: none; }
.abandon-popup {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--white); border-radius: var(--radius-2xl);
    width: 90%; max-width: 380px; padding: 32px; z-index: 1200;
    text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: popIn 0.4s var(--ease-bounce);
}
.abandon-popup.hidden { display: none; }
.abandon-popup__close { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.06); border: none; border-radius: var(--radius-full); width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.abandon-popup__emoji { font-size: 3rem; margin-bottom: 12px; }
.abandon-popup__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-bottom: 6px; }
.abandon-popup__text { font-size: 0.85rem; color: var(--text-mid); margin-bottom: 16px; }

/* ============================================
   HEATMAP DEBUG OVERLAY
   ============================================ */
.heatmap-canvas {
    position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.4;
}
.heatmap-canvas.hidden { display: none; }

/* ============================================
   SCROLL DEPTH INDICATOR
   ============================================ */
.scroll-depth {
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    z-index: 1001; background: transparent;
}
.scroll-depth__fill {
    height: 100%; width: 0; background: linear-gradient(90deg, var(--sage), var(--clay));
    transition: width 0.1s linear;
}

/* ============================================
   RIPPLE MICRO-INTERACTION (disabled — clean clicks)
   ============================================ */
.btn { position: relative; overflow: hidden; }
.ripple { display: none; }

/* ============================================
   BNPL BADGE ON PRODUCT CARDS
   ============================================ */
.p-card__bnpl {
    font-size: 0.62rem; color: var(--text-light); margin-top: 2px;
}
.p-card__bnpl strong { color: var(--sage-dark); }
.p-card__bnpl .bnpl-brand { font-weight: 700; color: #FFB3C7; font-size: 0.6rem; }

/* ============================================
   SEARCH POPULAR TAGS
   ============================================ */
.search-overlay__popular { margin-top: 16px; }
.search-overlay__label { font-size: 0.85rem; color: var(--text-light); font-weight: 600; margin-bottom: 12px; display: block; text-transform: uppercase; letter-spacing: 1px; }
.search-overlay__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.search-overlay__tags button {
    background: var(--white); border: 1px solid var(--border); color: var(--text-mid);
    padding: 8px 16px; border-radius: var(--radius-full); font-size: 0.85rem;
    font-weight: 500; cursor: pointer; transition: all var(--duration);
}
.search-overlay__tags button:hover { border-color: var(--cta); color: var(--cta); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ============================================
   PDP DELIVERY PROMISE BADGES
   ============================================ */
.pdp__promises { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.pdp__promise {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    background: var(--bg-cream); border-radius: var(--radius-md); font-size: 0.72rem;
    font-weight: 600; color: var(--text-mid);
}
.pdp__promise i { color: var(--sage); font-size: 0.85rem; }

/* ============================================
   SATISFACTION GUARANTEE BANNER
   ============================================ */
.guarantee-banner { padding: 30px 0; }
.guarantee-banner__inner {
    display: flex; align-items: center; gap: 20px; padding: 24px 32px;
    background: linear-gradient(135deg, #E8F0EC, #F5EDE3);
    border-radius: var(--radius-2xl); border: 1px solid rgba(0,0,0,0.04);
}
.guarantee-banner__icon { font-size: 2.5rem; flex-shrink: 0; }
.guarantee-banner__text h3 {
    font-family: var(--font-display); font-size: 1rem; font-weight: 700;
    margin-bottom: 4px; color: var(--sage-dark);
}
.guarantee-banner__text p { font-size: 0.82rem; color: var(--text-mid); line-height: 1.5; }

/* ============================================
   WHATSAPP FLOATING BUTTON
   ============================================ */
.whatsapp-btn {
    position: fixed; bottom: 90px; right: 20px; z-index: 999;
    width: 50px; height: 50px; border-radius: 50%;
    background: #25D366; color: white; display: flex;
    align-items: center; justify-content: center; font-size: 1.4rem;
    box-shadow: 0 4px 15px rgba(37,211,102,0.4); text-decoration: none;
    transition: transform 0.2s ease; animation: whatsappPulse 2s infinite;
}
.whatsapp-btn:hover { transform: scale(1.1); }
.whatsapp-btn:hover .whatsapp-btn__tooltip { opacity: 1; visibility: visible; transform: translateY(0); }
.whatsapp-btn__tooltip {
    position: absolute; right: 58px; top: 50%; transform: translateY(-50%) translateX(5px);
    background: var(--text); color: white; padding: 6px 12px; border-radius: var(--radius-md);
    font-size: 0.7rem; font-weight: 600; white-space: nowrap; pointer-events: none;
    opacity: 0; visibility: hidden; transition: all 0.2s ease;
}
@keyframes whatsappPulse { 0%, 100% { box-shadow: 0 4px 15px rgba(37,211,102,0.4); } 50% { box-shadow: 0 4px 25px rgba(37,211,102,0.6); } }

/* ============================================
   FULLSCREEN LIGHTBOX
   ============================================ */
.lightbox {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.92); display: flex; align-items: center;
    justify-content: center; cursor: pointer;
}
.lightbox.hidden { display: none; }
.lightbox__close {
    position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,0.1);
    border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer;
    color: white; font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
}
.lightbox__content { font-size: 8rem; cursor: default; }

/* ============================================
   PAGINATION
   ============================================ */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 32px; padding-bottom: 20px; }
.pagination__btn {
    padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--white); color: var(--text); cursor: pointer;
    font-size: 0.85rem; font-weight: 500; min-width: 38px; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.pagination__btn:hover:not(:disabled) { border-color: var(--cta); color: var(--cta); }
.pagination__btn.active { background: var(--cta); color: var(--white); border-color: var(--cta); font-weight: 700; }
.pagination__btn:disabled { background: var(--bg-cream); color: var(--text-light); cursor: default; opacity: 0.6; }
.pagination__dots { padding: 0 4px; color: var(--text-light); }

/* ============================================
   HERO TYPING EFFECT
   ============================================ */
.hero__typing-cursor {
    display: inline-block; width: 3px; height: 0.9em; background: var(--sage);
    margin-left: 2px; animation: blink 0.7s step-end infinite;
    vertical-align: baseline;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ============================================
   CART BADGE BOUNCE
   ============================================ */
@keyframes badgeBounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.5); }
    50% { transform: scale(0.9); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.header__badge.bounce { animation: badgeBounce 0.5s ease; }

/* ============================================
   BACK TO TOP WITH PROGRESS
   ============================================ */
#scroll-top { position: relative; }
.scroll-top-pct {
    position: absolute; top: -8px; right: -8px;
    font-size: 0.5rem; font-weight: 800; color: var(--sage);
    background: var(--white); border-radius: 50%; width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--sage);
}

/* ============================================
   COOKIE CONSENT BANNER
   ============================================ */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
    background: rgba(30,30,30,0.95); color: white;
    padding: 14px 20px; animation: slideFromBottom 0.4s ease;
}
.cookie-banner.hidden { display: none; }
.cookie-banner__inner {
    max-width: 1100px; margin: 0 auto; display: flex;
    align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.cookie-banner__inner span { font-size: 0.78rem; }
.cookie-banner__actions { display: flex; gap: 8px; }
.cookie-banner__decline {
    background: none; border: 1px solid rgba(255,255,255,0.3); color: white;
    padding: 6px 14px; border-radius: var(--radius-md); font-size: 0.72rem;
    cursor: pointer; font-family: var(--font-body);
}
.btn--sm { padding: 6px 16px; font-size: 0.72rem; }
.cookie-banner .btn { background: var(--cta); color: #fff !important; }
.cookie-banner .btn:hover { background: var(--cta-hover); }
@keyframes slideFromBottom { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ============================================
   AGE WIZARD POPUP
   ============================================ */
.wizard-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1199; }
.wizard-overlay.hidden { display: none; }
.wizard-popup {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--white); border-radius: var(--radius-2xl);
    width: 90%; max-width: 360px; padding: 32px; z-index: 1200;
    text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: popIn 0.4s var(--ease-bounce);
}
.wizard-popup.hidden { display: none; }
.wizard-popup__close { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.06); border: none; border-radius: var(--radius-full); width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wizard-popup__emoji { font-size: 3rem; margin-bottom: 8px; }
.wizard-popup__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; }
.wizard-popup__text { font-size: 0.82rem; color: var(--text-mid); margin-bottom: 18px; }
.wizard-popup__ages { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wizard-age-btn {
    padding: 14px 16px; border: 2px solid var(--border); border-radius: var(--radius-lg);
    background: none; cursor: pointer; font-size: 0.88rem; font-weight: 700;
    font-family: var(--font-body); color: var(--text); transition: all 0.2s ease;
}
.wizard-age-btn:hover { border-color: var(--sage); background: var(--sage-light); color: var(--sage-dark); }

/* ============================================
   SAFETY CERTIFICATE MODAL
   ============================================ */
.cert-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1199; }
.cert-overlay.hidden { display: none; }
.cert-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--white); border-radius: var(--radius-2xl);
    width: 90%; max-width: 420px; padding: 28px; z-index: 1200;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2); animation: popIn 0.4s var(--ease-bounce);
}
.cert-modal.hidden { display: none; }
.cert-modal__close { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.06); border: none; border-radius: var(--radius-full); width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cert-modal__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.cert-modal__title i { color: var(--sage); }
.cert-modal__item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.cert-modal__icon { width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--sage-light); display: flex; align-items: center; justify-content: center; color: var(--sage-dark); font-size: 0.9rem; flex-shrink: 0; }
.cert-modal__info h4 { font-size: 0.82rem; font-weight: 700; margin-bottom: 2px; }
.cert-modal__info p { font-size: 0.72rem; color: var(--text-mid); line-height: 1.4; }
.cert-modal__footer { margin-top: 16px; padding: 10px 14px; background: var(--sage-light); border-radius: var(--radius-md); font-size: 0.75rem; font-weight: 600; color: var(--sage-dark); display: flex; align-items: center; gap: 6px; }

/* ============================================
   RATING BREAKDOWN BARS
   ============================================ */
.rating-breakdown { margin-bottom: 16px; }
.rating-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rating-bar__label { font-size: 0.7rem; font-weight: 600; color: var(--text-mid); width: 30px; }
.rating-bar__track { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.rating-bar__fill { height: 100%; background: #FFB800; border-radius: 4px; transition: width 0.6s ease; }
.rating-bar__count { font-size: 0.65rem; color: var(--text-light); width: 25px; text-align: right; }

/* ============================================
   BACK-IN-STOCK SIGNUP
   ============================================ */
.back-in-stock { margin-top: 12px; padding: 12px 14px; background: var(--bg-cream); border-radius: var(--radius-md); }
.back-in-stock__label { font-size: 0.72rem; font-weight: 600; color: var(--text-mid); margin-bottom: 6px; }
.back-in-stock__form { display: flex; gap: 6px; }
.back-in-stock__form input { flex: 1; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 0.72rem; font-family: var(--font-body); }
.back-in-stock__form button { padding: 6px 12px; background: var(--sage); color: white; border: none; border-radius: var(--radius-md); font-size: 0.68rem; font-weight: 700; cursor: pointer; }

/* ============================================
   PDP DELIVERY DATE ESTIMATE
   ============================================ */
.pdp__delivery-date {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: linear-gradient(135deg, #E8F5E9, #F1F8E9); border-radius: var(--radius-md);
    font-size: 0.78rem; font-weight: 600; color: #2E7D32; margin: 8px 0;
    border: 1px solid rgba(46,125,50,0.15);
}
.pdp__delivery-date i { font-size: 0.9rem; }
.pdp__delivery-date strong { color: #1B5E20; }

/* ============================================
   WHAT'S IN THE BOX
   ============================================ */
.pdp__inbox { margin: 8px 0; padding: 12px 14px; background: var(--bg-cream); border-radius: var(--radius-md); }
.pdp__inbox-title { font-size: 0.78rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.pdp__inbox-title i { color: var(--sage); }
.pdp__inbox-list { list-style: none; padding: 0; margin: 0; }
.pdp__inbox-list li { font-size: 0.72rem; color: var(--text-mid); padding: 3px 0; display: flex; align-items: center; gap: 6px; }
.pdp__inbox-list li::before { content: '✓'; color: var(--sage); font-weight: 700; font-size: 0.68rem; }

/* ============================================
   GUEST CHECKOUT BUTTON
   ============================================ */
.btn--outline { background: none; border: 1.5px solid var(--border); color: var(--text-mid); }
.btn--outline:hover { border-color: var(--sage); color: var(--sage-dark); }
.cart__guest-btn { margin-top: 6px; font-size: 0.78rem; }

/* ============================================
   ORDER CONFIRMATION MODAL
   ============================================ */
.order-confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 10001; }
.order-confirm-overlay.hidden { display: none; }
.order-confirm {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--white); border-radius: var(--radius-2xl);
    width: 90%; max-width: 460px; padding: 36px; z-index: 10002;
    text-align: center; box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    animation: popIn 0.5s var(--ease-bounce);
}
.order-confirm.hidden { display: none; }
.order-confirm__icon { font-size: 3.5rem; margin-bottom: 12px; }
.order-confirm__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--sage-dark); margin-bottom: 4px; }
.order-confirm__text { font-size: 0.88rem; color: var(--text-mid); margin-bottom: 16px; }
.order-confirm__details { text-align: left; padding: 12px 16px; background: var(--bg-cream); border-radius: var(--radius-md); margin-bottom: 20px; font-size: 0.78rem; }
.order-confirm__details div { display: flex; justify-content: space-between; padding: 4px 0; }
.order-confirm__details strong { color: var(--sage-dark); }

/* ORDER TRACKING TIMELINE */
.order-confirm__track { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 20px; }
.track-step { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.65rem; color: var(--text-light); font-weight: 600; }
.track-step i { font-size: 1.1rem; }
.track-step.active { color: var(--sage); }
.track-step.active i { color: var(--sage); }
.track-line { width: 30px; height: 2px; background: var(--border); margin: 0 2px; margin-bottom: 18px; }

/* ============================================
   REFERRAL PROGRAM POPUP
   ============================================ */
.referral-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1199; }
.referral-overlay.hidden { display: none; }
.referral-popup {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--white); border-radius: var(--radius-2xl);
    width: 90%; max-width: 380px; padding: 32px; z-index: 1200;
    text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: popIn 0.4s var(--ease-bounce);
}
.referral-popup.hidden { display: none; }
.referral-popup__close { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.06); border: none; border-radius: var(--radius-full); width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.referral-popup__emoji { font-size: 3rem; margin-bottom: 8px; }
.referral-popup__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; }
.referral-popup__text { font-size: 0.82rem; color: var(--text-mid); margin-bottom: 16px; line-height: 1.5; }
.referral-popup__code {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--bg-cream); padding: 10px 16px; border-radius: var(--radius-md);
    border: 2px dashed var(--sage); margin-bottom: 16px;
}
.referral-popup__code span { font-size: 0.88rem; font-weight: 800; color: var(--sage-dark); letter-spacing: 1px; }
.referral-popup__code button { background: var(--sage); color: white; border: none; border-radius: var(--radius-md); padding: 6px 10px; cursor: pointer; }
.referral-popup__share { display: flex; justify-content: center; gap: 10px; }
.referral-popup__share button {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
    background: none; cursor: pointer; font-size: 1rem; color: var(--text-mid);
    transition: all 0.2s ease;
}
.referral-popup__share button:hover { background: var(--sage-light); color: var(--sage-dark); border-color: var(--sage); }

/* ============================================
   BIRTHDAY DISCOUNT POPUP
   ============================================ */
.birthday-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1199; }
.birthday-overlay.hidden { display: none; }
.birthday-popup {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--white); border-radius: var(--radius-2xl);
    width: 90%; max-width: 360px; padding: 32px; z-index: 1200;
    text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: popIn 0.4s var(--ease-bounce);
}
.birthday-popup.hidden { display: none; }
.birthday-popup__close { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.06); border: none; border-radius: var(--radius-full); width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.birthday-popup__emoji { font-size: 3rem; margin-bottom: 8px; }
.birthday-popup__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; }
.birthday-popup__text { font-size: 0.82rem; color: var(--text-mid); margin-bottom: 16px; }
.birthday-popup__form { display: flex; flex-direction: column; gap: 10px; }
.birthday-popup__form input[type="date"] {
    padding: 10px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-md);
    font-size: 0.88rem; font-family: var(--font-body); text-align: center;
}

/* ============================================
   RETURN POLICY MODAL
   ============================================ */
.return-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1199; }
.return-overlay.hidden { display: none; }
.return-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--white); border-radius: var(--radius-2xl);
    width: 90%; max-width: 420px; padding: 28px; z-index: 1200;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2); animation: popIn 0.4s var(--ease-bounce);
}
.return-modal.hidden { display: none; }
.return-modal__close { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.06); border: none; border-radius: var(--radius-full); width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.return-modal__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.return-modal__title i { color: var(--sage); }
.return-modal__steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.return-step { display: flex; gap: 12px; align-items: flex-start; }
.return-step__num {
    width: 28px; height: 28px; border-radius: 50%; background: var(--sage);
    color: white; display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 800; flex-shrink: 0;
}
.return-step h4 { font-size: 0.82rem; font-weight: 700; margin-bottom: 2px; }
.return-step p { font-size: 0.72rem; color: var(--text-mid); line-height: 1.4; }
.return-modal__note {
    padding: 10px 14px; background: #FFF8E1; border-radius: var(--radius-md);
    font-size: 0.72rem; color: #795548; display: flex; align-items: center; gap: 6px;
}

/* ============================================
   LIVE CHAT WIDGET
   ============================================ */
.live-chat {
    position: fixed; bottom: 90px; left: 20px; z-index: 9998;
    width: 340px; max-height: 460px; background: var(--white);
    border-radius: var(--radius-2xl); box-shadow: 0 16px 60px rgba(0,0,0,0.2);
    display: flex; flex-direction: column; overflow: hidden;
    animation: popIn 0.3s var(--ease-bounce);
}
.live-chat.hidden { display: none; }
.live-chat__head {
    background: linear-gradient(135deg, #2E7D32, #43A047); color: white;
    padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
}
.live-chat__head-info { display: flex; align-items: center; gap: 10px; }
.live-chat__head-info strong { font-size: 0.82rem; }
.live-chat__avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.live-chat__status { color: #A5D6A7; font-size: 0.65rem; }
.live-chat__head button { background: none; border: none; color: white; cursor: pointer; font-size: 1rem; }
.live-chat__body {
    flex: 1; padding: 14px; overflow-y: auto; min-height: 180px; max-height: 220px;
    display: flex; flex-direction: column; gap: 10px; background: #f5f5f5;
}
.chat-msg { max-width: 85%; }
.chat-msg span {
    display: inline-block; padding: 8px 12px; border-radius: 14px;
    font-size: 0.78rem; line-height: 1.4;
}
.chat-msg--bot { align-self: flex-start; }
.chat-msg--bot span { background: var(--white); color: var(--text); border-bottom-left-radius: 4px; }
.chat-msg--user { align-self: flex-end; }
.chat-msg--user span { background: #2E7D32; color: white; border-bottom-right-radius: 4px; }
.live-chat__quick {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px;
    background: #f5f5f5; border-top: 1px solid var(--border);
}
.live-chat__quick button {
    padding: 5px 10px; border-radius: var(--radius-full); border: 1px solid var(--border);
    background: var(--white); font-size: 0.65rem; cursor: pointer; font-family: var(--font-body);
    color: var(--text-mid); transition: all 0.15s ease;
}
.live-chat__quick button:hover { border-color: #2E7D32; color: #2E7D32; }
.live-chat__input {
    display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--white);
}
.live-chat__input input {
    flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-full);
    font-size: 0.78rem; font-family: var(--font-body); outline: none;
}
.live-chat__input input:focus { border-color: #2E7D32; }
.live-chat__input button {
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: #2E7D32; color: white; cursor: pointer; display: flex;
    align-items: center; justify-content: center; font-size: 0.8rem;
}

/* CHAT TRIGGER BUTTON */
.live-chat-trigger {
    position: fixed; bottom: 24px; left: 20px; z-index: 9997;
    width: 52px; height: 52px; border-radius: 50%; border: none;
    background: linear-gradient(135deg, #2E7D32, #43A047); color: white;
    cursor: pointer; box-shadow: 0 4px 20px rgba(46,125,50,0.4);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; transition: all 0.2s ease;
}
.live-chat-trigger:hover { transform: scale(1.1); }
.live-chat-trigger__badge {
    position: absolute; top: -2px; right: -2px; width: 18px; height: 18px;
    border-radius: 50%; background: var(--cta); color: white; font-size: 0.6rem;
    font-weight: 800; display: flex; align-items: center; justify-content: center;
}
@media (max-width: 768px) {
    .live-chat { width: calc(100% - 20px); left: 10px; right: 10px; bottom: 80px; }
    .live-chat-trigger { bottom: 80px; left: 16px; }
}

/* ============================================
   GIFT CARD MODAL
   ============================================ */
.giftcard-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1199; }
.giftcard-overlay.hidden { display: none; }
.giftcard-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--white); border-radius: var(--radius-2xl);
    width: 90%; max-width: 400px; padding: 32px; z-index: 1200;
    text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: popIn 0.4s var(--ease-bounce);
}
.giftcard-modal.hidden { display: none; }
.giftcard-modal__close { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.06); border: none; border-radius: var(--radius-full); width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.giftcard-modal__emoji { font-size: 3rem; margin-bottom: 8px; }
.giftcard-modal__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; }
.giftcard-modal__text { font-size: 0.82rem; color: var(--text-mid); margin-bottom: 16px; }
.giftcard-modal__amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.giftcard-amt {
    padding: 12px; border: 2px solid var(--border); border-radius: var(--radius-md);
    background: none; cursor: pointer; font-size: 0.88rem; font-weight: 800;
    font-family: var(--font-body); color: var(--text); transition: all 0.2s ease;
}
.giftcard-amt:hover, .giftcard-amt.active { border-color: var(--sage); background: var(--sage-light); color: var(--sage-dark); }
.giftcard-modal__recipient, .giftcard-modal__msg {
    width: 100%; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-md);
    font-size: 0.82rem; font-family: var(--font-body); margin-bottom: 10px; resize: none;
    box-sizing: border-box;
}
.giftcard-modal__recipient:focus, .giftcard-modal__msg:focus { border-color: var(--sage); outline: none; }

/* ============================================
   Q&A ASK MODAL
   ============================================ */
.qa-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1199; }
.qa-overlay.hidden { display: none; }
.qa-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--white); border-radius: var(--radius-2xl);
    width: 90%; max-width: 420px; padding: 28px; z-index: 1200;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2); animation: popIn 0.4s var(--ease-bounce);
}
.qa-modal.hidden { display: none; }
.qa-modal__close { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.06); border: none; border-radius: var(--radius-full); width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qa-modal__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.qa-modal__title i { color: var(--sage); }
.qa-modal__input {
    width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-md);
    font-size: 0.82rem; font-family: var(--font-body); margin-bottom: 12px; resize: none; box-sizing: border-box;
}
.qa-modal__input:focus { border-color: var(--sage); outline: none; }

/* ============================================
   RECENTLY SEARCHED
   ============================================ */
.search-recent { margin-top: 12px; padding: 0 24px; }
.search-recent__title { font-size: 0.72rem; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.search-recent__item {
    display: flex; align-items: center; gap: 8px; padding: 8px 0;
    border-bottom: 1px solid var(--border); cursor: pointer; font-size: 0.82rem;
    color: var(--text); transition: color 0.15s ease;
}
.search-recent__item:hover { color: var(--sage-dark); }
.search-recent__item i { color: var(--text-light); font-size: 0.7rem; }
.search-recent__clear {
    display: inline-block; margin-top: 6px; font-size: 0.68rem; color: var(--cta);
    cursor: pointer; font-weight: 600;
}

/* ============================================
   PROFESSIONAL POLISH
   ============================================ */

/* Product Card Image Zoom on Hover */
.p-card__img-wrap img { transition: transform 0.5s var(--ease); }
.p-card:hover .p-card__img-wrap img { transform: scale(1.06); }

/* Stagger animation for product cards */
.p-card { animation: cardFadeUp 0.5s ease both; }
.p-card:nth-child(1) { animation-delay: 0.05s; }
.p-card:nth-child(2) { animation-delay: 0.1s; }
.p-card:nth-child(3) { animation-delay: 0.15s; }
.p-card:nth-child(4) { animation-delay: 0.2s; }
.p-card:nth-child(5) { animation-delay: 0.25s; }
.p-card:nth-child(6) { animation-delay: 0.3s; }
.p-card:nth-child(7) { animation-delay: 0.35s; }
.p-card:nth-child(8) { animation-delay: 0.4s; }
@keyframes cardFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Skeleton loading shimmer for images */
.p-card__img-wrap { position: relative; overflow: hidden; }
.p-card__img-wrap::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 1.5s infinite; opacity: 0;
    pointer-events: none;
}
.p-card__img-wrap img[loading="lazy"]:not([complete])::before { opacity: 1; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Focus-visible accessibility */
*:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 2px;
    border-radius: 4px;
}
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* Custom global scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124,154,142,0.3); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(124,154,142,0.5); }

/* Selection color */
::selection { background: var(--sage-light); color: var(--sage-dark); }
::-moz-selection { background: var(--sage-light); color: var(--sage-dark); }

/* Smooth scroll snap for category strip */
.categories__grid { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.cat-card { scroll-snap-align: start; }

/* Better text rendering */
h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Toast improvements */
.toast { }

/* Image loading state */
img { transition: opacity 0.3s ease; }
img[loading="lazy"] { opacity: 0; }
img[loading="lazy"].loaded, img:not([loading="lazy"]) { opacity: 1; }

/* Hero parallax hint */
.hero { overflow: hidden; }

/* Satisfaction banner pulse */
.satisfaction-banner { position: relative; overflow: hidden; }
.satisfaction-banner::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: bannerShine 4s infinite;
}
@keyframes bannerShine { 0%, 100% { left: -100%; } 50% { left: 100%; } }

/* Cart item hover state */
.cart-item:hover { background: var(--bg-cream); }
.cart-item { transition: background 0.2s ease; }

/* Footer links hover underline */
.footer__col a { position: relative; display: block; width: fit-content; margin-bottom: 10px; }
.footer__col a::after {
    content: ''; position: absolute; bottom: -1px; left: 0;
    width: 0; height: 1.5px; background: var(--sage);
    transition: width 0.25s ease;
}
.footer__col a:hover::after { width: 100%; }

/* Trust badges pulse on view */
.pdp__promise { transition: transform 0.2s ease; }
.pdp__promise:hover { transform: translateY(-2px); }

/* Price highlight animation */
.p-card__price { transition: color 0.2s ease; }
.p-card:hover .p-card__price { color: var(--sage-dark); }

/* Better disabled state */
button:disabled {
    opacity: 0.5; cursor: not-allowed;
    filter: grayscale(0.3);
}

/* Print styles */
@media print {
    .header, .footer, .mobile-nav, .cookie-banner,
    .whatsapp-float, .scroll-top, .live-chat-trigger,
    .cart, .wishlist-sidebar, .overlay { display: none !important; }
    body { background: white !important; }
    .section-head { page-break-after: avoid; }
}

/* ============================================
   INSTALLMENT PAYMENT INFO
   ============================================ */
.pdp__installment {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; background: #FFF3E0; border-radius: var(--radius-md);
    font-size: 0.75rem; color: #E65100; margin-top: 6px;
}
.pdp__installment img { height: 16px; width: auto; }
.pdp__installment strong { font-weight: 800; }

/* ============================================
   PRODUCT BADGES
   ============================================ */
.pdp__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pdp__badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: var(--radius-full);
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.3px;
}
.pdp__badge--eco { background: #E8F5E9; color: #2E7D32; }
.pdp__badge--award { background: #FFF8E1; color: #F57F17; }
.pdp__badge--doctor { background: #E3F2FD; color: #1565C0; }
.pdp__badge--new { background: #FCE4EC; color: #C62828; }
.pdp__badge--bestseller { background: var(--sage-light); color: var(--sage-dark); }

/* ============================================
   STOCK COUNTER PULSE
   ============================================ */
.pdp__stock { animation: stockPulse 2s ease-in-out infinite; }
@keyframes stockPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(211,47,47,0.2); }
    50% { box-shadow: 0 0 0 8px rgba(211,47,47,0); }
}

/* ============================================
   ORDER HISTORY MODAL
   ============================================ */
.order-history-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1199; }
.order-history-overlay.hidden { display: none; }
.order-history {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--white); border-radius: var(--radius-2xl);
    width: 90%; max-width: 480px; max-height: 80vh; padding: 28px; z-index: 1200;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2); overflow-y: auto;
    animation: popIn 0.4s var(--ease-bounce);
}
.order-history.hidden { display: none; }
.order-history__close { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.06); border: none; border-radius: var(--radius-full); width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.order-history__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.order-history__title i { color: var(--sage); }
.order-history__item {
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 14px; margin-bottom: 10px; transition: box-shadow 0.2s ease;
}
.order-history__item:hover { box-shadow: var(--shadow-md); }
.order-history__item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.order-history__id { font-weight: 800; font-size: 0.82rem; color: var(--text); }
.order-history__status { font-size: 0.65rem; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: 4px; }
.order-history__status--delivered { background: #E8F5E9; color: #2E7D32; }
.order-history__status--shipped { background: #E3F2FD; color: #1565C0; }
.order-history__status--processing { background: #FFF8E1; color: #F57F17; }
.order-history__item-body { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; margin-bottom: 8px; }
.order-history__item-foot { display: flex; justify-content: space-between; align-items: center; }
.order-history__item-foot small { color: var(--text-light); font-size: 0.7rem; }

/* ============================================
   PHOTO REVIEW LIGHTBOX
   ============================================ */
.photo-review-lightbox {
    position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.9);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.photo-review-lightbox.hidden { display: none; }
.photo-review-lightbox img { max-width: 90%; max-height: 85vh; border-radius: var(--radius-lg); object-fit: contain; }
.photo-review-lightbox button {
    position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.15);
    border: none; color: white; font-size: 1.2rem; width: 40px; height: 40px;
    border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.photo-review-lightbox button:hover { background: rgba(255,255,255,0.3); }

/* Photo reviews in PDP tab */
.review-photo-grid { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.review-photo {
    width: 60px; height: 60px; border-radius: var(--radius-md); object-fit: cover;
    cursor: pointer; border: 2px solid transparent; transition: all 0.2s ease;
}
.review-photo:hover { border-color: var(--sage); transform: scale(1.08); }

/* ============================================
   SOCIAL PROOF LIVE TOAST
   ============================================ */
.social-proof-toast {
    position: fixed; bottom: 90px; left: 20px; z-index: 900;
    background: var(--white); border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12); border: 1px solid var(--border);
    padding: 12px 16px; display: flex; align-items: center; gap: 10px;
    max-width: 320px; cursor: pointer;
    opacity: 0; transform: translateY(30px) scale(0.95); pointer-events: none;
    transition: all 0.5s var(--ease-bounce);
}
.social-proof-toast.visible {
    opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.social-proof-toast__avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--sage-light); display: flex; align-items: center;
    justify-content: center; font-size: 0.9rem; flex-shrink: 0;
}
.social-proof-toast__body { flex: 1; }
.social-proof-toast__name { font-size: 0.75rem; font-weight: 700; color: var(--text); }
.social-proof-toast__action { font-size: 0.68rem; color: var(--text-mid); }
.social-proof-toast__time { font-size: 0.6rem; color: var(--text-light); }
.social-proof-toast__verified { font-size: 0.6rem; color: #2E7D32; font-weight: 600; }
@keyframes socialProofIn {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 768px) {
    .social-proof-toast { bottom: 80px; left: 10px; right: 10px; max-width: none; }
}

/* ============================================
   AI RECOMMENDATION CAROUSEL
   ============================================ */
.ai-reco { margin-top: 20px; padding: 16px 0; }
.ai-reco__title {
    font-size: 0.82rem; font-weight: 700; margin-bottom: 12px;
    display: flex; align-items: center; gap: 6px; color: var(--text);
}
.ai-reco__title i { color: var(--sage); }
.ai-reco__track {
    display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.ai-reco__track::-webkit-scrollbar { height: 3px; }
.ai-reco__track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.ai-reco__card {
    flex: 0 0 140px; scroll-snap-align: start; cursor: pointer;
    border-radius: var(--radius-lg); border: 1px solid var(--border);
    padding: 10px; text-align: center; transition: all 0.2s ease;
    background: var(--white);
}
.ai-reco__card:hover { box-shadow: var(--shadow-md); border-color: var(--sage); transform: translateY(-2px); }
.ai-reco__emoji { font-size: 2rem; margin-bottom: 4px; }
.ai-reco__name { font-size: 0.7rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-reco__price { font-size: 0.72rem; font-weight: 800; color: var(--sage-dark); margin-top: 2px; }

/* ============================================
   360° VIEWER INDICATOR
   ============================================ */
.pdp__360-indicator {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.6); color: white; font-size: 0.65rem;
    font-weight: 700; padding: 4px 12px; border-radius: var(--radius-full);
    display: flex; align-items: center; gap: 4px; pointer-events: none;
}
.pdp__360-indicator i { animation: spin360 3s linear infinite; }
@keyframes spin360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* (Dark Mode block 2 removed — unified in main block above) */

/* ============================================
   EXIT INTENT POPUP
   ============================================ */
.exit-intent-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1299; }
.exit-intent-overlay.hidden { display: none; }
.exit-intent {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--white); border-radius: var(--radius-2xl);
    width: 90%; max-width: 420px; padding: 32px; z-index: 1300;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25); text-align: center;
    animation: popIn 0.5s var(--ease-bounce);
}
.exit-intent.hidden { display: none; }
.exit-intent__close { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.06); border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.exit-intent__emoji { font-size: 3rem; margin-bottom: 8px; }
.exit-intent__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; margin-bottom: 6px; }
.exit-intent__text { font-size: 0.85rem; color: var(--text-mid); margin-bottom: 16px; }
.exit-intent__text strong { color: var(--cta); font-size: 1.1rem; }
.exit-intent__form { display: flex; gap: 8px; margin-bottom: 10px; }
.exit-intent__form input {
    flex: 1; padding: 10px 14px; border: 2px solid var(--border);
    border-radius: var(--radius-md); font-size: 0.82rem; font-family: inherit;
    transition: border-color 0.2s;
}
.exit-intent__form input:focus { border-color: var(--sage); outline: none; }
.exit-intent__note { font-size: 0.65rem; color: var(--text-light); }

/* ============================================
   COUNTDOWN TIMER BANNER
   ============================================ */
.countdown-banner {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
    background: linear-gradient(135deg, #1a1a2e, #2d1b4e);
    color: white; padding: 10px 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}
.countdown-banner__inner {
    max-width: 1240px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
}
.countdown-banner__text { font-size: 0.82rem; display: flex; align-items: center; gap: 6px; }
.countdown-banner__text i { color: #FF6B35; }
.countdown-banner__timer { display: flex; align-items: center; gap: 4px; }
.countdown-unit { text-align: center; }
.countdown-unit span {
    display: block; font-size: 1.3rem; font-weight: 800;
    background: rgba(255,255,255,0.12); padding: 4px 10px; border-radius: var(--radius-md);
    min-width: 42px; font-variant-numeric: tabular-nums;
}
.countdown-unit small { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.7; margin-top: 2px; display: block; }
.countdown-sep { font-size: 1.2rem; font-weight: 800; margin: 0 2px; opacity: 0.6; }
@media (max-width: 768px) {
    .countdown-banner__inner { gap: 10px; }
    .countdown-unit span { font-size: 1rem; padding: 3px 8px; min-width: 34px; }
}

/* ============================================
   SATISFACTION SURVEY
   ============================================ */
.survey-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1199; }
.survey-overlay.hidden { display: none; }
.survey {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--white); border-radius: var(--radius-2xl);
    width: 90%; max-width: 380px; padding: 28px; z-index: 1200;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2); text-align: center;
    animation: popIn 0.4s var(--ease-bounce);
}
.survey.hidden { display: none; }
.survey__close { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.06); border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.survey__emoji { font-size: 2.5rem; margin-bottom: 6px; }
.survey__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.survey__text { font-size: 0.78rem; color: var(--text-mid); margin-bottom: 14px; }
.survey__stars { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; }
.survey__stars button {
    background: none; border: none; font-size: 1.6rem; cursor: pointer;
    transition: transform 0.15s ease; opacity: 0.4;
}
.survey__stars button:hover, .survey__stars button.active { opacity: 1; transform: scale(1.25); }
.survey__comment {
    width: 100%; padding: 10px; border: 2px solid var(--border);
    border-radius: var(--radius-md); font-family: inherit; font-size: 0.78rem;
    resize: none; margin-bottom: 12px;
}
.survey__comment:focus { border-color: var(--sage); outline: none; }

/* ============================================
   FLY-TO-CART ANIMATION
   ============================================ */
.fly-cart-item {
    position: fixed; z-index: 9999; pointer-events: none;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--sage-light); display: flex; align-items: center;
    justify-content: center; font-size: 1.2rem;
    opacity: 0; transition: none;
}
.fly-cart-item.flying {
    animation: flyToCart 0.7s var(--ease) forwards;
}
@keyframes flyToCart {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(0.6) translateY(-80px); }
    100% { opacity: 0; transform: scale(0.2) translate(300px, -200px); }
}

/* ============================================
   PRICE DROP ALERT
   ============================================ */
.pdp__price-alert {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border: 1.5px dashed var(--sage);
    border-radius: var(--radius-full); background: transparent;
    font-size: 0.72rem; font-weight: 600; color: var(--sage-dark);
    cursor: pointer; transition: all 0.2s ease; margin-top: 8px;
}
.pdp__price-alert:hover { background: var(--sage-light); border-style: solid; }
.pdp__price-alert.active { background: var(--sage-light); border-color: var(--sage-dark); border-style: solid; }
.pdp__price-alert.active i { color: var(--cta); }

/* ============================================
   BLOG / PARENTING TIPS
   ============================================ */
.blog-tips { padding: 60px 0; }
.blog-tips__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card {
    background: var(--white); border-radius: var(--radius-xl);
    padding: 24px; border: 1px solid var(--border);
    transition: all 0.3s ease; cursor: pointer;
}
.blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.blog-card__emoji { font-size: 2.2rem; margin-bottom: 10px; }
.blog-card__tag {
    display: inline-block; padding: 3px 10px; border-radius: var(--radius-full);
    background: var(--sage-light); color: var(--sage-dark);
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.3px; margin-bottom: 10px;
}
.blog-card__title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; line-height: 1.3; }
.blog-card__excerpt { font-size: 0.75rem; color: var(--text-mid); line-height: 1.5; margin-bottom: 12px; }
.blog-card__foot {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.7rem; color: var(--text-light);
}
.blog-card__foot a { color: var(--sage-dark); font-weight: 700; }
.blog-card__foot a:hover { color: var(--cta); }
@media (max-width: 768px) {
    .blog-tips__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================
   LOYALTY POINTS DISPLAY
   ============================================ */
.loyalty-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--radius-full);
    background: linear-gradient(135deg, #FFD700, #FFA000);
    color: #5D4037; font-size: 0.6rem; font-weight: 800;
    letter-spacing: 0.3px; position: relative; overflow: hidden;
}
.loyalty-badge::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: loyaltyShine 3s infinite;
}
@keyframes loyaltyShine { 0%, 100% { left: -100%; } 50% { left: 100%; } }

/* Dark mode additions */
body.dark-mode .exit-intent { background: #1a1a2e; }
body.dark-mode .survey { background: #1a1a2e; }
body.dark-mode .blog-card { background: #1e1e32; border-color: #2a2a40; }
body.dark-mode .blog-card__tag { background: #2a2a40; }
body.dark-mode .countdown-banner { background: linear-gradient(135deg, #0f0f1a, #1a0a2e); }

/* Mobile: hide countdown on small screens to avoid overlay conflict */
@media (max-width: 480px) {
    .countdown-banner { position: relative; bottom: auto; }
}

/* Cookie banner above countdown timer */
.cookie-banner { z-index: 900 !important; position: relative; }

/* Countdown banner close button */
.countdown-banner__close {
    background: none; border: none; color: rgba(255,255,255,0.7);
    font-size: 1rem; cursor: pointer; padding: 4px 8px;
    transition: color 0.2s, transform 0.2s; margin-left: 8px;
}
.countdown-banner__close:hover { color: #fff; transform: scale(1.2); }
.countdown-banner.hidden { display: none; }

/* Language dropdown wider for more items */
.lang-switcher__dropdown { min-width: 150px; max-height: 300px; overflow-y: auto; }
.lang-switcher__dropdown button { white-space: nowrap; }

/* ============================================
   LAYOUT CONFLICT FIXES (Cart / Compare / Flash Sale)
   ============================================ */

/* Cart and wishlist sidebars must be above everything including flash banner */
.cart { z-index: 2001 !important; }
#cart-overlay, #notif-overlay { z-index: 2000 !important; }
.wishlist-sidebar { z-index: 2001 !important; }
#wishlist-overlay { z-index: 2000 !important; }

/* Flash sale countdown banner — keep z-index below cart */
.countdown-banner { z-index: 900 !important; }

/* Cart sidebar content — add bottom padding so checkout button isn't hidden behind flash sale */
.cart { padding-bottom: 0; }
.cart__footer { padding-bottom: 16px; }

/* Sales popup — position above the flash sale banner */
.sales-popup {
    bottom: 80px !important;
    left: 20px !important;
    z-index: 1050 !important;
}

@media (max-width: 768px) {
    .sales-popup { bottom: 110px !important; left: 10px !important; right: 10px !important; }
}

/* ============================================
   CUSTOMER ACCOUNT MODAL
   ============================================ */
.account-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 10000;
    backdrop-filter: blur(2px); transition: opacity 0.3s ease;
}
.account-modal-overlay.hidden { display: none; }
.account-modal {
    position: fixed; top: 0; right: -480px; width: 460px; max-width: 100%; height: 100%;
    background: var(--white); z-index: 10001; display: flex; flex-direction: column;
    transition: right 0.4s var(--ease); box-shadow: -8px 0 40px rgba(0,0,0,0.1);
}
.account-modal.active { right: 0; }
.account-modal__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 24px; border-bottom: 1px solid var(--border);
}
.account-modal__head h3 { font-family: var(--font-display); font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.account-modal__head button { font-size: 1.1rem; color: var(--text-light); padding: 6px; transition: color var(--duration); }
.account-modal__body { flex: 1; overflow-y: auto; padding: 24px; }
.account-modal__tabs { display: flex; gap: 0; margin-bottom: 24px; }
.account-modal__tab {
    flex: 1; padding: 12px; text-align: center; font-weight: 600; font-size: 0.9rem;
    border-bottom: 2px solid var(--border); cursor: pointer; color: var(--text-light);
    transition: all var(--duration);
}
.account-modal__tab.active { border-color: var(--cta); color: var(--cta); }
.account-modal .form-group { margin-bottom: 16px; }
.account-modal .form-group label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 6px; color: var(--text-mid); }
.account-modal .form-group input {
    width: 100%; padding: 12px 16px; border: 1.5px solid var(--border);
    border-radius: var(--radius-md); font-size: 0.92rem; outline: none;
    transition: border-color var(--duration);
}
.account-modal .form-group input:focus { border-color: var(--cta); }
.account-modal .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.account-modal .form-group select {
    width: 100%; padding: 12px 16px; border: 1.5px solid var(--border);
    border-radius: var(--radius-md); font-size: 0.92rem; outline: none;
    background: var(--white); transition: border-color var(--duration);
}
.account-modal .divider { text-align: center; color: var(--text-light); font-size: 0.82rem; margin: 20px 0; position: relative; }
.account-modal .divider::before, .account-modal .divider::after {
    content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--border);
}
.account-modal .divider::before { left: 0; }
.account-modal .divider::after { right: 0; }

/* Account Dashboard */
.account-dashboard__welcome { margin-bottom: 24px; }
.account-dashboard__welcome h3 { font-family: var(--font-display); font-size: 1.3rem; }
.account-dashboard__welcome p { color: var(--text-mid); font-size: 0.9rem; }
.account-dashboard__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.account-dashboard__stat {
    text-align: center; padding: 16px; background: var(--bg-alt);
    border-radius: var(--radius-lg);
}
.account-dashboard__stat strong { display: block; font-size: 1.3rem; color: var(--cta); font-family: var(--font-display); }
.account-dashboard__stat span { font-size: 0.75rem; color: var(--text-light); }
.account-dashboard__menu a {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    border-radius: var(--radius-md); transition: background var(--duration);
    font-weight: 500; font-size: 0.92rem;
}
.account-dashboard__menu a:hover { background: var(--bg-alt); }
.account-dashboard__menu a i { width: 20px; color: var(--cta); }

/* Referral Section */
.referral-section { padding: 60px 0; background: var(--bg-alt); }
.referral-card {
    background: linear-gradient(135deg, var(--sage-light), var(--clay-light));
    border-radius: var(--radius-2xl); padding: 48px; text-align: center;
    max-width: 700px; margin: 0 auto;
}
.referral-card__emoji { font-size: 3rem; margin-bottom: 16px; }
.referral-card h2 { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: 8px; }
.referral-card p { color: var(--text-mid); font-size: 0.95rem; margin-bottom: 24px; }
.referral-card__code {
    display: inline-flex; align-items: center; gap: 12px;
    background: var(--white); padding: 14px 24px; border-radius: var(--radius-full);
    box-shadow: var(--shadow-md); margin-bottom: 16px;
}
.referral-card__code span { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--cta); letter-spacing: 2px; }
.referral-card__code button { background: var(--cta); color: var(--white); padding: 8px 16px; border-radius: var(--radius-full); font-size: 0.82rem; font-weight: 600; transition: background var(--duration); }
.referral-card__code button:hover { background: var(--cta-hover); }
.referral-card__benefits { display: flex; justify-content: center; gap: 32px; margin-top: 20px; }
.referral-card__benefit { text-align: center; }
.referral-card__benefit strong { display: block; font-size: 1.1rem; color: var(--cta); }
.referral-card__benefit span { font-size: 0.82rem; color: var(--text-mid); }

/* Blog Section */
.blog-section { padding: 60px 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card {
    background: var(--white); border-radius: var(--radius-xl); overflow: hidden;
    border: 1px solid var(--border); transition: all var(--duration) var(--ease-bounce);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: transparent; }
.blog-card__img {
    height: 180px; display: flex; align-items: center; justify-content: center;
    font-size: 4rem; background: linear-gradient(135deg, var(--sage-light), var(--clay-light));
}
.blog-card__body { padding: 20px; }
.blog-card__tag {
    display: inline-block; background: var(--cta-light); color: var(--cta);
    padding: 4px 12px; border-radius: var(--radius-full);
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.blog-card__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; line-height: 1.3; }
.blog-card__excerpt { color: var(--text-mid); font-size: 0.88rem; line-height: 1.6; margin-bottom: 12px; }
.blog-card__meta { display: flex; justify-content: space-between; align-items: center; }
.blog-card__date { font-size: 0.78rem; color: var(--text-light); }
.blog-card__read { font-size: 0.82rem; font-weight: 600; color: var(--cta); transition: color var(--duration); }
.blog-card__read:hover { color: var(--cta-hover); }

/* Wishlist Heart */
.p-card__wishlist {
    position: absolute; top: 14px; right: 14px; z-index: 4;
    width: 36px; height: 36px; border-radius: var(--radius-full);
    background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; color: var(--text-light); transition: all var(--duration);
    box-shadow: var(--shadow-sm); backdrop-filter: blur(4px);
}
.p-card__wishlist:hover { color: #e74c3c; transform: scale(1.1); }
.p-card__wishlist.active { color: #e74c3c; }
.p-card__wishlist.active i { font-weight: 900; }

/* Trust Badges (US-focused) */
.us-trust-bar { padding: 20px 0; background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.us-trust-bar__inner {
    max-width: 1240px; margin: 0 auto; padding: 0 24px;
    display: flex; justify-content: space-between; align-items: center;
}
.us-trust-bar__item { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--text-mid); }
.us-trust-bar__item i { font-size: 1.1rem; }
.us-trust-bar__item .fa-shield-alt { color: #27ae60; }
.us-trust-bar__item .fa-truck { color: #3498db; }
.us-trust-bar__item .fa-undo { color: #e67e22; }
.us-trust-bar__item .fa-headset { color: #9b59b6; }
.us-trust-bar__item .fa-lock { color: #2ecc71; }

/* Gift Finder Bubble */
.gift-finder-bubble {
    position: fixed; bottom: 100px; right: 24px; z-index: 1001;
    display: flex; align-items: center; gap: 8px;
    background: var(--white); color: var(--text); border: 2px solid var(--sage-light);
    padding: 10px 16px; border-radius: var(--radius-full);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08); cursor: pointer;
    transition: all var(--duration) var(--ease-bounce);
    animation: bounceSlow 3s infinite;
}
.gift-finder-bubble:hover {
    transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-color: var(--sage);
}
.gift-finder-bubble__icon { font-size: 1.2rem; }
.gift-finder-bubble__text { font-size: 0.85rem; font-weight: 700; }

/* Live Chat Bubble */
.chat-bubble {
    position: fixed; bottom: 24px; right: 24px; z-index: 1001;
    width: 60px; height: 60px; border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--cta), var(--blush));
    color: var(--white); display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; box-shadow: 0 6px 24px rgba(196,114,92,0.4);
    cursor: pointer; transition: all var(--duration) var(--ease-bounce);
    animation: chatPulse 3s infinite;
}
.chat-bubble:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(196,114,92,0.5); }
@keyframes chatPulse {
    0%, 100% { box-shadow: 0 6px 24px rgba(196,114,92,0.4); }
    50% { box-shadow: 0 6px 24px rgba(196,114,92,0.6), 0 0 0 8px rgba(196,114,92,0.1); }
}
.chat-bubble__badge {
    position: absolute; top: -2px; right: -2px;
    width: 16px; height: 16px; background: #27ae60; border-radius: var(--radius-full);
    border: 2px solid var(--white);
}

/* Chat Panel (Persistent Messenger) */
.aylemu-chat-panel {
    position: fixed;
    bottom: 96px;
    right: 24px;
    width: 360px;
    height: 440px;
    background: #fff;
    border-radius: 16px;
    z-index: 1050;
    box-shadow: 0 12px 48px rgba(0,0,0,0.18);
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: popIn 0.3s ease;
}
.aylemu-chat-panel__header {
    background: linear-gradient(135deg, var(--cta), var(--blush));
    color: white;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.aylemu-chat-panel__header-info { display: flex; align-items: center; gap: 10px; }
.aylemu-chat-panel__avatar {
    width: 36px; height: 36px; background: rgba(255,255,255,0.2);
    border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 1.1rem; flex-shrink: 0;
}
.aylemu-chat-panel__name { font-weight: 700; font-size: 0.95rem; }
.aylemu-chat-panel__status { font-size: 0.72rem; opacity: 0.8; }
.aylemu-chat-panel__close {
    background: none; border: none; color: white;
    font-size: 1.1rem; cursor: pointer; padding: 4px;
}
.aylemu-chat-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: linear-gradient(180deg, #faf8f6, #fff);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.aylemu-chat-panel__footer {
    padding: 12px 16px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 8px;
    background: #fff;
    flex-shrink: 0;
}
.aylemu-chat-panel__input {
    flex: 1;
    padding: 10px 16px;
    border: 1.5px solid var(--border);
    border-radius: 24px;
    outline: none;
    font-size: 0.88rem;
    font-family: var(--font-body);
}
.aylemu-chat-panel__input:focus { border-color: var(--cta); }
.aylemu-chat-panel__send {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--cta); color: white; border: none;
    cursor: pointer; display: flex; align-items: center;
    justify-content: center; font-size: 0.9rem; flex-shrink: 0;
    transition: background 0.2s;
}
.aylemu-chat-panel__send:hover { background: var(--cta-hover); }

.chat-msg { display: flex; flex-direction: column; max-width: 85%; }
.chat-msg--admin { align-self: flex-start; }
.chat-msg--customer { align-self: flex-end; }
.chat-msg__bubble {
    padding: 10px 14px; border-radius: 14px; font-size: 0.88rem; line-height: 1.4;
    word-wrap: break-word;
}
.chat-msg--admin .chat-msg__bubble { background: var(--bg-alt); color: var(--text); border-bottom-left-radius: 4px; }
.chat-msg--customer .chat-msg__bubble { background: var(--cta); color: white; border-bottom-right-radius: 4px; }
.chat-msg__time { font-size: 0.68rem; color: var(--text-light); margin-top: 4px; }
.chat-msg--customer .chat-msg__time { text-align: right; }

/* End Chat Button */
.aylemu-chat-panel__end-btn {
    padding: 6px 12px; border-radius: 20px; height: 36px;
    background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5;
    cursor: pointer; display: flex; align-items: center; gap: 5px;
    justify-content: center; font-size: 0.78rem; font-weight: 600;
    flex-shrink: 0; transition: all 0.2s; white-space: nowrap;
}
.aylemu-chat-panel__end-btn:hover { background: #fecaca; }

@media (max-width: 768px) {
    .aylemu-chat-panel { bottom: 96px; right: 12px; left: 12px; width: auto; height: 380px; }
}

/* Cookie Banner Open Adjustments */
body.cookie-banner-open .chat-bubble { bottom: 100px; }
body.cookie-banner-open .gift-finder-bubble { bottom: 176px; }

/* Product Variant Selector */
.variant-selector { margin: 12px 0; }
.variant-selector__label { font-size: 0.82rem; font-weight: 600; color: var(--text-mid); margin-bottom: 8px; }
.variant-selector__options { display: flex; gap: 8px; flex-wrap: wrap; }
.variant-option {
    padding: 8px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-full);
    font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all var(--duration);
}
.variant-option:hover { border-color: var(--cta); color: var(--cta); }
.variant-option.active { background: var(--cta); color: var(--white); border-color: var(--cta); }
.variant-color {
    width: 32px; height: 32px; border-radius: var(--radius-full);
    border: 2px solid var(--border); cursor: pointer; transition: all var(--duration);
}
.variant-color:hover { transform: scale(1.15); }
.variant-color.active { border-color: var(--cta); box-shadow: 0 0 0 3px var(--cta-light); }

@media (max-width: 768px) {
    .account-modal { width: 100%; right: -100%; }
    .blog-grid { grid-template-columns: 1fr; }
    .referral-card__benefits { flex-direction: column; gap: 12px; }
    .us-trust-bar__inner { flex-wrap: wrap; gap: 12px; justify-content: center; }
    .chat-bubble { bottom: 84px; width: 52px; height: 52px; font-size: 1.3rem; }
    .gift-finder-bubble { bottom: 150px; }
    body.cookie-banner-open .chat-bubble { bottom: 160px; }
    body.cookie-banner-open .gift-finder-bubble { bottom: 226px; }
}

/* ============================================
   MILESTONE SHOPPING
   ============================================ */
.milestone-section { padding: 80px 0; background: var(--bg-alt); }
.milestone__grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.milestone__card {
    background: var(--white); border-radius: var(--radius-xl); padding: 28px 20px;
    text-align: center; cursor: pointer; transition: all 0.3s var(--ease-bounce);
    border: 1.5px solid var(--border); position: relative; overflow: hidden;
}
.milestone__card:hover {
    transform: translateY(-6px); box-shadow: var(--shadow-lg);
    border-color: var(--sage);
}
.milestone__card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--sage), var(--clay)); transform: scaleX(0);
    transition: transform 0.3s ease; transform-origin: left;
}
.milestone__card:hover::after { transform: scaleX(1); }
.milestone__emoji { font-size: 2.5rem; margin-bottom: 12px; }
.milestone__card h3 {
    font-family: var(--font-display); font-size: 1rem; font-weight: 700;
    color: var(--text); margin-bottom: 4px;
}
.milestone__card p { font-size: 0.78rem; color: var(--text-light); margin-bottom: 12px; }
.milestone__cta {
    font-size: 0.78rem; font-weight: 700; color: var(--cta);
    transition: letter-spacing 0.2s ease;
}
.milestone__card:hover .milestone__cta { letter-spacing: 0.5px; }

@media (max-width: 900px) { .milestone__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .milestone__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================
   BABY REGISTRY SECTION
   ============================================ */
.registry-section { padding: 80px 0; }
.registry__inner {
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.registry__badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(196,114,92,0.1); color: var(--cta);
    padding: 6px 14px; border-radius: var(--radius-full);
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 16px;
}
.registry__title {
    font-family: var(--font-display); font-size: 2.2rem; font-weight: 800;
    line-height: 1.2; margin-bottom: 16px; color: var(--text);
}
.registry__desc { font-size: 1rem; color: var(--text-mid); line-height: 1.7; margin-bottom: 24px; }
.registry__perks { list-style: none; margin-bottom: 28px; }
.registry__perks li {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.9rem; color: var(--text); padding: 6px 0;
}
.registry__perks li i { color: #22c55e; font-size: 0.85rem; }
.registry__visual { display: flex; justify-content: center; }
.registry__mockup {
    background: var(--white); border: 1.5px solid var(--border);
    border-radius: var(--radius-xl); padding: 20px; width: 100%;
    max-width: 380px; box-shadow: var(--shadow-lg);
}
.registry__mockup-head {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
    padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 12px;
    color: var(--text);
}
.registry__mockup-head span { font-size: 1.3rem; }
.registry__mockup-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--border);
}
.registry__mockup-item span { font-size: 1.5rem; }
.registry__mockup-item div { flex: 1; }
.registry__mockup-item strong { display: block; font-size: 0.82rem; color: var(--text); }
.registry__mockup-item small { font-size: 0.72rem; color: var(--text-light); }
.registry__mockup-progress { padding-top: 14px; color: var(--text-mid); }

@media (max-width: 768px) {
    .registry__inner { grid-template-columns: 1fr; gap: 32px; }
    .registry__title { font-size: 1.6rem; }
}

/* ============================================
   GIFT CARD SECTION
   ============================================ */
.giftcard-section { padding: 80px 0; background: var(--bg-alt); }
.giftcard__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    max-width: 700px; margin: 0 auto;
}
.giftcard__card {
    background: var(--white); border: 1.5px solid var(--border);
    border-radius: var(--radius-xl); padding: 32px 16px;
    text-align: center; cursor: pointer; transition: all 0.3s var(--ease-bounce);
    position: relative;
}
.giftcard__card:hover {
    transform: translateY(-6px); box-shadow: var(--shadow-lg);
    border-color: var(--cta);
}
.giftcard__card--popular { border-color: var(--cta); border-width: 2px; }
.giftcard__badge {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--cta); color: var(--white); padding: 3px 12px;
    border-radius: var(--radius-full); font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;
}
.giftcard__amount {
    font-family: var(--font-display); font-size: 2rem; font-weight: 800;
    color: var(--text); margin-bottom: 4px;
}
.giftcard__label { font-size: 0.78rem; color: var(--text-light); font-weight: 600; }
.giftcard__note {
    text-align: center; font-size: 0.82rem; color: var(--text-mid);
    margin-top: 24px;
}
@media (max-width: 600px) { .giftcard__grid { grid-template-columns: repeat(2, 1fr); } }

/* Dark Mode support for new sections */
body.dark-mode .milestone__card { background: #1e1e32; border-color: #2a2a4a; }
body.dark-mode .milestone__card h3 { color: #e8e8f0; }
body.dark-mode .milestone__card:hover { border-color: var(--sage); }
body.dark-mode .milestone-section { background: #16162a; }
body.dark-mode .registry-section { background: #0f0f1a; }
body.dark-mode .registry__title { color: #e8e8f0; }
body.dark-mode .registry__desc { color: #b0b0cc; }
body.dark-mode .registry__perks li { color: #b0b0cc; }
body.dark-mode .registry__mockup { background: #1e1e32; border-color: #2a2a4a; }
body.dark-mode .registry__mockup-head { color: #e8e8f0; border-bottom-color: #2a2a4a; }
body.dark-mode .registry__mockup-item { border-bottom-color: #2a2a4a; }
body.dark-mode .registry__mockup-item strong { color: #e8e8f0; }
body.dark-mode .giftcard-section { background: #16162a; }
body.dark-mode .giftcard__card { background: #1e1e32; border-color: #2a2a4a; }
body.dark-mode .giftcard__amount { color: #e8e8f0; }
body.dark-mode .giftcard__card:hover { border-color: var(--cta); }

/* --- EXPRESS CHECKOUT (Cart & Checkout) --- */
.cart__express-checkout {
    display: flex; gap: 10px; margin-bottom: 12px;
}
.btn--express {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; border-radius: 8px; font-weight: 700; font-size: 1.05rem;
    border: none; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
}
.btn--express:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.btn--apple { background: #000; color: #fff; }
.btn--google { background: #fff; color: #3c4043; border: 1px solid #dadce0; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.btn--google:hover { background: #f8f9fa; }
.cart__separator {
    display: flex; align-items: center; text-align: center; margin: 16px 0; color: var(--text-light); font-size: 0.8rem; font-weight: 600;
}
.cart__separator::before, .cart__separator::after { content: ''; flex: 1; border-bottom: 1px solid var(--border); }
.cart__separator span { padding: 0 10px; }
body.dark-mode .btn--google { background: #333; color: #eee; border-color: #444; }

/* --- NEWSLETTER POPUP --- */
.newsletter-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    z-index: 9998; opacity: 1; transition: opacity 0.4s;
}
.newsletter-overlay.hidden { opacity: 0; pointer-events: none; }
.newsletter-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1);
    background: var(--white); width: 90%; max-width: 480px; border-radius: 20px;
    z-index: 9999; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    opacity: 1; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden; text-align: center;
}
.newsletter-modal.hidden { opacity: 0; transform: translate(-50%, -40%) scale(0.9); pointer-events: none; }
.newsletter-modal__close {
    position: absolute; top: 16px; right: 16px; background: rgba(0,0,0,0.05);
    border: none; width: 32px; height: 32px; border-radius: 50%; color: var(--text-mid);
    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s;
}
.newsletter-modal__close:hover { background: rgba(0,0,0,0.1); color: var(--text); }
.newsletter-modal__content { padding: 40px 30px; background: linear-gradient(180deg, #fef9f7 0%, var(--white) 100%); }
.newsletter-modal__emoji { font-size: 3rem; margin-bottom: 16px; animation: float 3s ease-in-out infinite; display: inline-block; }
.newsletter-modal__title { font-family: var(--font-display); font-size: 1.6rem; color: var(--text); margin-bottom: 12px; }
.newsletter-modal__desc { color: var(--text-mid); font-size: 0.95rem; margin-bottom: 24px; line-height: 1.5; }
.newsletter-modal__form { display: flex; flex-direction: column; gap: 12px; }
.newsletter-modal__form input {
    padding: 14px 16px; border: 1.5px solid var(--border); border-radius: 10px;
    font-size: 0.95rem; font-family: var(--font-body); transition: border-color 0.2s;
}
.newsletter-modal__form input:focus { outline: none; border-color: var(--cta); }
.newsletter-modal__form button { padding: 14px; border-radius: 10px; font-weight: 700; font-size: 1rem; }
.newsletter-modal__terms { font-size: 0.75rem; color: var(--text-light); margin-top: 16px; }
body.dark-mode .newsletter-modal { background: #1a1a2e; }
body.dark-mode .newsletter-modal__content { background: linear-gradient(180deg, #222238 0%, #1a1a2e 100%); }

/* ============================================
   EXIT INTENT POPUP & FBT & UPSALES
   ============================================ */
.exit-intent-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    z-index: 10000; transition: all 0.3s ease;
}
.exit-intent-overlay.hidden { opacity: 0; pointer-events: none; }
.exit-intent-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 90%; max-width: 440px; background: var(--white); border-radius: 24px;
    z-index: 10001; text-align: center; overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.exit-intent-modal.hidden { opacity: 0; transform: translate(-50%, -40%) scale(0.9); pointer-events: none; }
.exit-intent-modal__close {
    position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%;
    background: transparent; border: none; font-size: 1.2rem; color: var(--text-light);
    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.exit-intent-modal__close:hover { background: rgba(0,0,0,0.1); color: var(--text); }
.exit-intent-modal__content { padding: 40px 30px; background: linear-gradient(180deg, #fff0f0 0%, var(--white) 100%); }
.exit-intent-modal__emoji { font-size: 4rem; margin-bottom: 16px; animation: float 3s ease-in-out infinite; display: inline-block; }
.exit-intent-modal__title { font-family: var(--font-display); font-size: 1.8rem; color: #d32f2f; margin-bottom: 12px; line-height: 1.2; }
.exit-intent-modal__desc { color: var(--text-mid); font-size: 1rem; margin-bottom: 24px; line-height: 1.5; }
.exit-intent-modal__code { background: #ffebee; border: 2px dashed #ffcdd2; color: #c62828; padding: 12px; font-size: 1.2rem; border-radius: 8px; margin-bottom: 24px; }
body.dark-mode .exit-intent-modal { background: #1a1a2e; }
body.dark-mode .exit-intent-modal__content { background: linear-gradient(180deg, #3a1c1c 0%, #1a1a2e 100%); }
body.dark-mode .exit-intent-modal__code { background: #2a1111; border-color: #5c2020; color: #ff5252; }

/* FBT (Frequently Bought Together) */
.pdp__fbt { margin-top: 30px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-cream); }
.pdp__fbt-title { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 16px; font-weight: 700; }
.pdp__fbt-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.pdp__fbt-item { display: flex; align-items: center; gap: 12px; }
.pdp__fbt-item input { width: 18px; height: 18px; accent-color: var(--cta); cursor: pointer; }
.pdp__fbt-item img { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); }
.pdp__fbt-info { display: flex; flex-direction: column; }
.pdp__fbt-name { font-size: 0.9rem; font-weight: 600; }
.pdp__fbt-price { font-size: 0.85rem; color: var(--text-mid); }
.pdp__fbt-total { font-weight: 800; font-size: 1.1rem; color: var(--cta); margin-bottom: 12px; display: block; }
body.dark-mode .pdp__fbt { background: #1a1a2e; border-color: #2a2a40; }

/* Tiered Volume Table */
.pdp__volume { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.pdp__volume-tier { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border: 2px solid var(--border); border-radius: 12px; cursor: pointer; transition: all 0.2s; background: var(--white); }
.pdp__volume-tier:hover { border-color: var(--cta-hover); }
.pdp__volume-tier.selected { border-color: var(--cta); background: rgba(209,141,119,0.05); }
.pdp__volume-qty { font-weight: 700; font-size: 1rem; }
.pdp__volume-price { font-weight: 800; color: var(--cta); display: flex; flex-direction: column; align-items: flex-end; }
.pdp__volume-badge { font-size: 0.7rem; background: #e8f5e9; color: #2e7d32; padding: 2px 6px; border-radius: 4px; margin-top: 4px; font-weight: 700; }
body.dark-mode .pdp__volume-tier { background: #16162a; border-color: #2a2a40; }
body.dark-mode .pdp__volume-tier.selected { background: rgba(209,141,119,0.1); border-color: var(--cta); }
body.dark-mode .pdp__volume-badge { background: #1b3320; color: #81c784; }

/* ============================================
   SOCIAL SHARE BUTTONS
   ============================================ */
.pdp__share-btn {
    width: 32px; height: 32px; border: none; border-radius: 50%; color: white;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; transition: all 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.pdp__share-btn:hover { transform: scale(1.15); box-shadow: 0 4px 10px rgba(0,0,0,0.25); }

/* ============================================
   SAVE FOR LATER (Cart)
   ============================================ */
.cart__saved-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 20px;
    border-bottom: 1px solid var(--border); font-size: 0.82rem;
}
.cart__saved-item__img { width: 40px; height: 40px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.cart__saved-item__info { flex: 1; }
.cart__saved-item__name { font-weight: 600; font-size: 0.82rem; }
.cart__saved-item__price { color: var(--cta); font-weight: 700; font-size: 0.8rem; }
.cart__saved-item__actions { display: flex; gap: 6px; }
.cart__saved-item__actions button {
    padding: 4px 10px; border: none; border-radius: 6px; font-size: 0.72rem;
    cursor: pointer; font-weight: 600; transition: all 0.2s;
}
.cart__saved-item__move { background: var(--cta); color: white; }
.cart__saved-item__move:hover { background: var(--cta-hover); }
.cart__saved-item__delete { background: #fee2e2; color: #dc2626; }
.cart__saved-item__delete:hover { background: #fecaca; }

.cart-item__save-btn {
    background: none; border: none; color: var(--text-light); cursor: pointer;
    font-size: 0.7rem; padding: 2px 0; transition: color 0.2s;
}
.cart-item__save-btn:hover { color: var(--cta); }

/* ============================================
   CART RECOMMENDATIONS
   ============================================ */
.cart__reco-items { display: flex; gap: 8px; padding: 6px 16px 10px; overflow-x: auto; }
.cart__reco-card {
    min-width: 90px; max-width: 90px; background: var(--white); border: 1px solid var(--border);
    border-radius: 10px; padding: 8px; text-align: center; cursor: pointer; transition: all 0.2s; flex-shrink: 0;
}
.cart__reco-card:hover { border-color: var(--cta); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.cart__reco-card__emoji { font-size: 1.2rem; margin-bottom: 4px; }
.cart__reco-card__name { font-size: 0.65rem; font-weight: 600; line-height: 1.2; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart__reco-card__price { font-size: 0.7rem; font-weight: 800; color: var(--cta); margin-bottom: 4px; }
.cart__reco-card__add { width: 100%; padding: 3px 0; border: none; background: var(--cta); color: white; border-radius: 5px; font-size: 0.62rem; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.cart__reco-card__add:hover { background: var(--cta-hover); }
body.dark-mode .cart__reco-card { background: #16162a; border-color: #2a2a40; }

/* ============================================
   FOOTER TRUST BADGES
   ============================================ */
.footer__trust-badges {
    display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;
    padding: 24px 0; margin-top: 16px; border-top: 1px solid rgba(255,255,255,0.1);
}
.footer__trust-badge {
    display: flex; align-items: center; gap: 8px; font-size: 0.82rem;
    color: rgba(255,255,255,0.7); font-weight: 500;
}
.footer__trust-badge i { font-size: 1.1rem; color: #22c55e; }

/* ============================================
   LOW STOCK URGENCY BADGE
   ============================================ */
.pdp__low-stock {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px;
    margin-bottom: 12px; font-size: 0.85rem; color: #c2410c; font-weight: 600;
    animation: urgencyPulse 2s ease-in-out infinite;
}
.pdp__low-stock i { color: #ea580c; }
@keyframes urgencyPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
body.dark-mode .pdp__low-stock { background: #2a1a0a; border-color: #5c3a1a; color: #fb923c; }

/* ============================================
   SPIN THE WHEEL
   ============================================ */
.spin-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); z-index: 10000; display: flex; align-items: center; justify-content: center; }
.spin-overlay.hidden { display: none; }
.spin-modal {
    background: var(--white); border-radius: 24px; width: 90%; max-width: 400px;
    text-align: center; padding: 40px 30px; position: relative;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}
.spin-modal__close { position: absolute; top: 14px; right: 14px; background: none; border: none; font-size: 1.3rem; color: var(--text-light); cursor: pointer; }
.spin-modal__wheel {
    width: 260px; height: 260px; border-radius: 50%; margin: 0 auto 24px;
    position: relative; border: 6px solid var(--cta);
    transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
    background: conic-gradient(
        #FF6B6B 0deg 60deg, #4ECDC4 60deg 120deg, #FFE66D 120deg 180deg,
        #95E1D3 180deg 240deg, #F38181 240deg 300deg, #AA96DA 300deg 360deg
    );
}
.spin-modal__pointer {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 40px; height: 40px; background: var(--white); border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); display: flex; align-items: center;
    justify-content: center; font-size: 1rem; z-index: 2;
}
.spin-modal__arrow {
    position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0; border-left: 12px solid transparent;
    border-right: 12px solid transparent; border-top: 20px solid var(--cta); z-index: 3;
}
.spin-modal__title { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 8px; }
.spin-modal__desc { color: var(--text-mid); font-size: 0.9rem; margin-bottom: 20px; }
.spin-modal__form { display: flex; gap: 8px; margin-bottom: 16px; }
.spin-modal__form input { flex: 1; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 0.9rem; }
.spin-modal__form button { padding: 12px 20px; background: var(--cta); color: white; border: none; border-radius: 10px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.spin-modal__result { font-size: 1.3rem; font-weight: 800; color: var(--cta); display: none; padding: 20px; background: #fdf2f8; border-radius: 12px; }
body.dark-mode .spin-modal { background: #1a1a2e; }
body.dark-mode .spin-modal__result { background: #2a1a2e; }