/* 
   =========================================
   BIGCARTEL SETTINGS & VARIABLES
   =========================================
*/
:root {
    /* --- MAIN COLORS --- */
    --bg-color: #FFF8F0;
    --text-color: #4A4A4A;
    --text-muted: color-mix(in srgb, var(--text-color), transparent 40%);
    
    /* --- ACCENT / LINKS (The Core Brand Color) --- */
    --accent-color: #7EC560;
    --accent-hover: #4E4E4E;
    
    /* Dynamic Pastel Variations (Auto-calculated from Accent) */
    --accent-50:  color-mix(in srgb, var(--accent-color), white 95%);
    --accent-100: color-mix(in srgb, var(--accent-color), white 85%);
    --accent-200: color-mix(in srgb, var(--accent-color), white 70%);
    --accent-shadow: color-mix(in srgb, var(--accent-color), transparent 80%);
    
    /* --- HEADER & BRANDING --- */
    --shop-name-color: #4A4A4A;
    --header-text-color: #4A4A4A;
    --border-color: #FFDDE5;
    
    /* --- BUTTONS --- */
    --button-bg: #FF959F;
    --button-hover-bg: #FF959F;
    --button-text: #FFFFFF;
    
    /* --- ANNOUNCEMENT BANNER --- */
    /* STRICTLY mapped to Accent/Link Color as requested */
    --announcement-bg: var(--accent-color); 
    --announcement-text: var(--button-text);
    
    /* --- STATUS BADGES --- */
    --status-primary-bg: #86EFAC;
    --status-primary-text: #064E3B;
    --status-secondary-bg: #F3F4F6;
    --status-secondary-text: #9CA3AF;
    
    /* --- HERO / WELCOME SECTION --- */
    --welcome-overlay: #FFFFFF;
    --welcome-text: Everyday | Luxury | Essentials;
    
    --welcome-btn-bg: transparent;
    --welcome-btn-text: #FFFBF5;
    --welcome-btn-border: #FFFBF5;
    --welcome-btn-hover-bg: #FFFBF5;
    --welcome-btn-hover-text: #4E4E4E;
    
    /* --- FONTS --- */
    --header-font: 'Fredoka', sans-serif;
    --body-font: 'Quicksand', sans-serif;
}

/* 
   =========================================
   BASE STYLES
   =========================================
*/
html { scroll-behavior: smooth; }

body { 
    font-family: var(--body-font);
    background-color: var(--bg-color); 
    color: var(--text-color); 
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-heading { 
    font-family: var(--header-font);
    color: var(--header-text-color);
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { color: var(--accent-hover); }

/* --- UTILITY CLASSES FOR DYNAMIC COLORS --- */
.text-accent { color: var(--accent-color) !important; }
.bg-accent { background-color: var(--accent-color) !important; }
.border-accent { border-color: var(--accent-color) !important; }

/* Dynamic Pastels */
.bg-accent-50 { background-color: var(--accent-50) !important; }
.bg-accent-100 { background-color: var(--accent-100) !important; }
.bg-accent-200 { background-color: var(--accent-200) !important; }
.border-accent-100 { border-color: var(--accent-100) !important; }
.border-accent-200 { border-color: var(--accent-200) !important; }
.shadow-accent { box-shadow: 0 10px 15px -3px var(--accent-shadow) !important; }

/* Logo */
.store-logo { max-height: 60px; width: auto; }

/* Buttons */
.btn-theme {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: none;
}
.btn-theme:hover {
    background-color: var(--button-hover-bg);
    transform: scale(1.05) rotate(-1deg);
}

.btn-outline {
    background-color: transparent;
    color: var(--button-bg);
    border: 2px solid var(--button-bg);
}
.btn-outline:hover {
    background-color: var(--button-bg);
    color: var(--button-text);
}

/* Announcement */
.bg-announcement {
    background-color: var(--announcement-bg);
    color: var(--announcement-text);
}

/* Status */
.status-primary {
    background-color: var(--status-primary-bg);
    color: var(--status-primary-text);
}
.status-secondary {
    background-color: var(--status-secondary-bg);
    color: var(--status-secondary-text);
}

/* Animations */
.btn-bubbly { transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.btn-bubbly:hover { transform: scale(1.05) rotate(-1deg); }
.btn-bubbly:active { transform: scale(0.95); }

.animate-float { animation: float 4s ease-in-out infinite; }
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    display: flex;
    width: fit-content;
    animation: marquee 30s linear infinite;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-color); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-color); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Video */
.video-embed-container {
    width: 100%; margin: 2rem auto; border-radius: 1.5rem; overflow: hidden; background: #000;
}
.video-embed-container iframe { width: 100% !important; height: auto !important; aspect-ratio: 16/9; }

/* Page Content */
.page-content { max-width: 720px; margin: 0 auto; white-space: pre-line; }
.page-content h1, .page-content h2 { font-family: var(--header-font); color: var(--header-text-color); text-align: center; }
.page-content a { color: var(--accent-color); text-decoration: underline; text-decoration-style: wavy; }
.page-content li {
    background: #FFFFFF; border-radius: 1.5rem; padding: 1.25rem 1.5rem 1.25rem 3.5rem; position: relative;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.page-content li:hover { border: 1px solid var(--border-color); transform: translateY(-2px); }
.page-content li::before { content: '🐾'; position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); opacity: 0.6; }

/* Product Description */
.product-description { font-size: 1.05rem; line-height: 1.7; white-space: pre-line; }
.product-description strong { color: var(--accent-color); font-weight: 800; }
.product-description li { position: relative; padding-left: 2.5rem; display: flex; align-items: flex-start; margin-bottom: 0.75rem; }
.product-description li::before {
    content: '✓'; position: absolute; left: 0; top: 2px; width: 24px; height: 24px;
    background: var(--accent-100); color: var(--accent-color); border-radius: 50%;
    font-size: 14px; display: flex; align-items: center; justify-content: center; font-weight: 900;
}