:root {
            --slate: #2C3947;
            --blush: #FFDBFD;
            --white: #FFFFFF;
            --black: #000000;
        }

        body {
            font-family: 'Quicksand', sans-serif;
            background-color: var(--white);
            color: var(--black);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        h1, h2, h3, h4 {
            font-weight: 700;
            letter-spacing: 0.25em;
            text-transform: uppercase;
        }

        p {
            font-weight: 300;
            line-height: 2;
            letter-spacing: 0.05em;
        }

        /* --- Custom UI Mechanics --- */
        .hero-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: fixed;
            height: 100vh;
            z-index: -1;
            background-image: url('https://i.pinimg.com/736x/30/77/ec/3077ecb2d62c9ab46b7d25d965ca675e.jpg');
            background-size: cover;
            background-position: center;
            transition: transform 0.5s ease-out;
        }

        .horizontal-scroll {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -ms-overflow-style: none;
            scrollbar-width: none;
            cursor: grab;
        }
        .horizontal-scroll::-webkit-scrollbar { display: none; }
        .scroll-card { flex: 0 0 380px; scroll-snap-align: start; }

        .nav-link {
            position: relative;
            padding-bottom: 4px;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px;
            bottom: 0;
            left: 50%;
            background: var(--black);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .nav-link:hover::after {
            width: 100%;
            left: 0;
        }

        /* --- Transitions --- */
        .page-view { display: none; }
        .page-view.active { display: block; animation: pageFade 1.2s ease; }
        @keyframes pageFade {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .reveal { opacity: 0; transform: translateY(40px); transition: 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }

        /* Search Overlay */
        #search-overlay { transform: translateY(-100%); transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1); }
        #search-overlay.open { transform: translateY(0); }

        /* Mobile Menu */
        #mobile-menu { transform: translateX(-100%); transition: 0.5s transform ease-in-out; }
        #mobile-menu.open { transform: translateX(0); }

        /* Cart Sidebar */
        .cart-sidebar { transform: translateX(100%); transition: 0.5s transform cubic-bezier(0.7, 0, 0.3, 1); }
        .cart-sidebar.open { transform: translateX(0); }