:root {
            --burnt-earth: #4A2C2A;
            --canyon-rust: #A45D41;
            --sky-blue: #A3C1AD;
            --forest-shadow: #1B2624;
            --warm-sand: #E5D3B3;
            --bone: #F5F2ED;
        }

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

        .serif { font-family: 'Playfair Display', serif; }
        .cursive { font-family: 'Cedarville Cursive', cursive; }
        
        /* Cinematic Animations */
        .reveal { opacity: 0; transform: translateY(40px); transition: all 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }

        .grain::after {
            content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: url('https://grainy-gradients.vercel.app/noise.svg');
            opacity: 0.05; pointer-events: none; z-index: 9999;
        }

        /* Hero Parallax */
        .hero-zoom { transition: transform 15s ease-out; transform: scale(1); }
        .active-hero .hero-zoom { transform: scale(1.15); }

        /* Navigation Styles */
        nav { transition: all 0.6s ease; }
        .nav-scrolled { background: rgba(245, 242, 237, 0.9); backdrop-filter: blur(15px); padding: 0.8rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); }

        /* Page Handling */
        .page { display: none; }
        .page.active { display: block; animation: pageFade 1s ease forwards; }
        @keyframes pageFade { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } }

        /* Custom Buttons */
        .btn-take {
            position: relative; padding: 1.2rem 3rem; border: 1px solid var(--forest-shadow);
            overflow: hidden; transition: all 0.5s ease; cursor: pointer; background: transparent;
            text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.75rem;
        }
        .btn-take:hover { background: var(--forest-shadow); color: var(--bone); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
        
        /* Sidebar & Modals */
        .drawer { 
            position: fixed; top: 0; right: 0; height: 100%; width: 100%; max-width: 450px;
            background: var(--bone); z-index: 10000; transform: translateX(100%);
            transition: transform 0.7s cubic-bezier(0.82, 0.01, 0.21, 1);
            box-shadow: -20px 0 60px rgba(0,0,0,0.1);
        }
        .drawer.open { transform: translateX(0); }

        .fullscreen-modal {
            position: fixed; inset: 0; background: var(--bone); z-index: 11000;
            display: none; overflow-y: auto;
        }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--bone); }
        ::-webkit-scrollbar-thumb { background: var(--canyon-rust); }

        .cart-dot {
            position: absolute; top: -5px; right: -8px; width: 18px; height: 18px;
            background: var(--canyon-rust); border-radius: 50%; color: white;
            font-size: 10px; display: flex; align-items: center; justify-content: center;
        }

        .search-input {
            border: none; border-bottom: 1px solid rgba(0,0,0,0.1); background: transparent;
            padding: 1rem 0; font-size: 2rem; width: 100%; font-family: 'Playfair Display';
            outline: none; transition: border-color 0.3s;
        }
        .search-input:focus { border-color: var(--canyon-rust); }