:root {
            --pink: #FF0087;
            --mint: #B0FFFA;
            --dark: #0a0a0a;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #ffffff;
            color: var(--dark);
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        .serif { font-family: 'Marcellus', serif; }

        /* --- Header Animation --- */
        #header {
            transition: transform 0.4s ease, background 0.4s ease, padding 0.4s ease;
        }
        .header-hidden { transform: translateY(-100%); }
        .header-sticky { 
            background: var(--pink) !important; 
            padding-top: 0.75rem !important; 
            padding-bottom: 0.75rem !important;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }

        /* --- Hero Parallax & Layering --- */
        .hero-gradient {
            background: linear-gradient(90deg, rgba(255, 0, 135, 0.7) 0%, rgba(255, 0, 135, 0) 100%);
        }
        .parallax-card {
            transition: transform 0.1s ease-out;
        }

        /* --- 3D Grid --- */
        .card-3d-container { perspective: 1200px; }
        .card-3d {
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            transform: rotateY(-15deg) rotateX(10deg);
            transform-style: preserve-3d;
        }
        .card-3d:hover {
            transform: rotateY(0deg) rotateX(0deg) translateY(-20px);
            box-shadow: 0 30px 60px rgba(255, 0, 135, 0.2);
        }

        /* --- Custom Scrollbar --- */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: var(--pink); border-radius: 10px; }

        /* --- Shop Styling --- */
        .horizontal-scroll {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
        }
        .horizontal-scroll::-webkit-scrollbar { display: none; }
        .product-card { scroll-snap-align: center; min-width: 320px; }

        /* --- Cart Drawer --- */
        #cart-drawer, #side-menu {
            transition: transform 0.5s cubic-bezier(0.85, 0, 0.15, 1);
        }

        /* --- Animations --- */
        .reveal { opacity: 0; transform: translateY(50px); transition: all 0.8s ease; }
        .reveal.active { opacity: 1; transform: translateY(0); }

        .timeline-dot::after {
            content: '';
            position: absolute;
            width: 2px;
            height: 100%;
            background: var(--pink);
            left: 50%;
            top: 100%;
        }