:root {
            --sunlight: #FEFD99;
            --earth: #F08D39;
            --deep-blue: #28396C;
            --soft-white: #FFFFFF;
        }

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

        /* View Switching Logic */
        .page-view { display: none; opacity: 0; }
        .page-view.active { display: block; opacity: 1; animation: fadeIn 0.8s ease forwards; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Custom Styles */
        .bg-sunlight { background-color: var(--sunlight); }
        .bg-earth { background-color: var(--earth); }
        .bg-deep { background-color: var(--deep-blue); }
        .text-earth { color: var(--earth); }
        .text-deep { color: var(--deep-blue); }

        .hero-zoom {
            background-size: 110% 110%;
            animation: slowZoom 25s infinite alternate;
        }
        @keyframes slowZoom {
            from { background-size: 100% 100%; }
            to { background-size: 120% 120%; }
        }

        /* Cart & Menu Drawer */
        .drawer {
            position: fixed; top: 0; right: 0; width: 100%; max-width: 400px;
            height: 100%; background: white; z-index: 1000;
            transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: -10px 0 30px rgba(0,0,0,0.1);
        }
        .drawer.open { transform: translateX(0); }

        .overlay {
            position: fixed; inset: 0; background: rgba(40, 57, 108, 0.5);
            backdrop-filter: blur(4px); z-index: 999; display: none;
        }
        .overlay.active { display: block; }

        /* Grid Layouts */
        .asym-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
        .asym-item-large { grid-column: span 2; height: 500px; }
        .asym-item-small { height: 350px; }

        .product-scroll::-webkit-scrollbar { display: none; }