:root {
            --cream: #FFF6F0;
            --apricot: #FFE3D6;
            --coral: #FF6B6B;
            --slate: #2B2B2B;
            --yellow: #FFD93D;
        }

        body {
            font-family: 'Quicksand', sans-serif;
            background-color: var(--cream);
            color: var(--slate);
            scroll-behavior: smooth;
        }

        /* --- Header Logic --- */
        header {
            transition: all 0.4s ease;
            z-index: 1000;
        }
        header.scrolled {
            background-color: var(--cream);
            padding: 1rem 0;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        }

        /* --- Animations --- */
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-slide-up { animation: slideUp 0.8s ease-out forwards; }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* --- Hero Parallax --- */
        .hero-parallax {
            background-image: url('https://images.unsplash.com/photo-1559594864-4ef309b4893b?auto=format&fit=crop&q=80&w=2000');
            background-attachment: fixed;
            background-position: center;
            background-size: cover;
            height: 90vh;
        }

        /* --- Cart Sidebar --- */
        #cart-sidebar {
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 2000;
        }
        .cart-open #cart-sidebar { transform: translateX(0); }
        #cart-overlay {
            display: none;
            z-index: 1999;
        }
        .cart-open #cart-overlay { display: block; }

        /* --- Custom UI Elements --- */
        .collection-circle {
            width: 180px;
            height: 180px;
            border-radius: 50%;
            margin: -90px auto 20px;
            background: white;
            border: 6px solid var(--apricot);
            overflow: hidden;
            transition: transform 0.3s ease, border-color 0.3s ease;
        }
        .collection-card:hover .collection-circle {
            transform: scale(1.1);
            border-color: var(--coral);
        }

        .page-content { display: none; }
        .page-content.active { display: block; animation: fadeIn 0.5s ease; }

        .btn-coral {
            background-color: var(--coral);
            color: white;
            transition: all 0.3s ease;
        }
        .btn-coral:hover {
            transform: scale(1.05);
            background-color: #ff5252;
        }