:root {
            --primary: #FDB5CE;
            --secondary: #132440;
            --highlight: #FFC50F;
            --footer: #D1D3D4;
        }

        body {
            font-family: 'Rubik', sans-serif;
            color: var(--secondary);
            font-size: 14px;
            overflow-x: hidden;
            background: #fff;
        }

        /* Announcement Bar Animations */
        @keyframes fadeInSides {
            from { opacity: 0; transform: translateX(-20px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .animate-side { animation: fadeInSides 0.8s ease forwards; }

        /* Header Transitions */
        header { transition: all 0.4s ease; }
        .scrolled #header-logo, .scrolled #header-cart {
            opacity: 0; transform: translateY(-10px); pointer-events: none;
        }

        /* Sidebar Menu */
        #side-menu {
            transform: translateX(-100%);
            transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        }
        #side-menu.open { transform: translateX(0); }

        /* Hero Parallax Text */
        .vertical-text {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            font-size: 20px;
            letter-spacing: 0.3em;
            text-transform: uppercase;
        }

        /* Product Card Quick View */
        .quick-view {
            transform: translateY(105%);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .product-card:hover .quick-view { transform: translateY(0); }

        /* Cart Drawer */
        #cart-drawer {
            transform: translateX(100%);
            transition: transform 0.4s ease;
        }
        #cart-drawer.active { transform: translateX(0); }

        /* Custom Scroll Reveal */
        .reveal { opacity: 0; transform: translateY(20px); transition: all 0.8s ease; }
        .reveal.visible { opacity: 1; transform: translateY(0); }

        /* Utility */
        .small-caps { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
        .page-content { display: none; min-height: 100vh; }
        .page-content.active { display: block; }
        
        .hero-bg-anim {
            background:white;
        }
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }