:root {
            --cream: #FAF3E1;
            --orange: #E2852E;
            --dark: #2A2A2A;
        }

        body {
            background-color: var(--cream);
            color: var(--dark);
            font-family: 'Montserrat', sans-serif;
            margin: 0;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .shadows-font { font-family: "Shadows Into Light", cursive; }
        .playwrite-font { font-family: "Playwrite NZ Basic Guides", cursive; }
        .serif-font { font-family: 'Playfair Display', serif; }

        h1, h2, h3 { font-family: 'Playfair Display', serif; font-weight: 700; }

        /* Animation Backgrounds */
        .hero-bg {
            background: linear-gradient(rgba(250, 243, 225, 0.8), rgba(250, 243, 225, 0.8)), 
                        url('https://images.unsplash.com/photo-1547517023-7ca0c162f816?auto=format&fit=crop&q=80&w=2000');
            background-size: cover;
            background-attachment: fixed;
            animation: slowZoom 30s infinite alternate;
        }

        @keyframes slowZoom {
            from { background-position: center; transform: scale(1); }
            to { background-position: top; transform: scale(1.1); }
        }

        /* UI Elements */
        .btn-orange { 
            background: var(--orange); 
            color: var(--cream); 
            padding: 12px 32px; 
            border-radius: 50px; 
            transition: 0.3s; 
            font-weight: 600;
        }
        .btn-orange:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(226, 133, 46, 0.3); }

        .btn-outline { 
            border: 2px solid var(--orange); 
            color: var(--orange); 
            padding: 10px 30px; 
            border-radius: 50px; 
            transition: 0.3s; 
            font-weight: 600;
        }
        .btn-outline:hover { background: var(--orange); color: var(--cream); }

        .card { 
            background: var(--cream); 
            border: 1px solid rgba(42, 42, 42, 0.05); 
            transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
        }
        .card:hover { transform: translateY(-10px); }

        /* Page Layout */
        .page { display: none; min-height: 100vh; }
        .page.active { display: block; animation: fadeIn 0.8s ease; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* Circular Text Button */
        .circle-btn {
            position: relative; width: 120px; height: 120px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
        }
        .circle-text {
            position: absolute; width: 100%; height: 100%;
            animation: rotateText 10s linear infinite;
            font-family: 'Shadows Into Light'; color: var(--orange); font-weight: bold;
        }
        @keyframes rotateText { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

        /* Modals */
        .fs-overlay {
            position: fixed; inset: 0; background: rgba(42, 42, 42, 0.95);
            z-index: 9999; display: none; align-items: center; justify-content: center;
            padding: 20px; backdrop-filter: blur(8px);
        }
        .modal-body {
            background: var(--cream); width: 100%; max-width: 900px;
            max-height: 90vh; overflow-y: auto; border-radius: 30px; padding: 40px; position: relative;
        }

        /* Cart */
        .cart-drawer {
            position: fixed; top: 0; right: 0; height: 100vh; width: 450px; max-width: 90vw;
            background: var(--cream); z-index: 10000; transform: translateX(100%);
            transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1); padding: 40px;
            border-left: 1px solid var(--orange);
        }
        .cart-drawer.open { transform: translateX(0); }

        /* Badge */
        .badge { position: absolute; top: -8px; right: -8px; background: var(--orange); color: white; font-size: 10px; padding: 2px 6px; border-radius: 50%; }

        /* Marquee */
        .marquee { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--orange); border-bottom: 1px solid var(--orange); padding: 15px 0; }
        .marquee-inner { display: inline-block; animation: scroll 20s linear infinite; }
        @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: var(--cream); }
        ::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 5px; }