:root {
            --maroon: #703B3B;
            --beige: #ECD5BC;
            --gold: #ECD58C;
        }

        body {
            background-color: var(--maroon);
            color: var(--beige);
            font-family: 'Dancing Script', cursive;
            margin: 0;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .jim-font { font-family: 'Jim Nightshade', serif; }
        .text-gold { color: var(--gold); }
        .border-gold { border-color: var(--gold); }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: var(--maroon); }
        ::-webkit-scrollbar-thumb { background: var(--gold); }

        /* Navigation Style */
        .nav-box {
            border: 1px solid var(--gold);
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            background: rgba(112, 59, 59, 0.9);
            backdrop-filter: blur(10px);
        }

        .nav-item {
            border: 1px solid transparent;
            padding: 5px 15px;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .nav-item:hover {
            border-color: var(--gold);
            background: rgba(236, 213, 140, 0.05);
        }

        /* Hero Animation */
        .hero-bg-anim {
            position: absolute;
            inset: 0;
            background: linear-gradient(rgba(112, 59, 59, 0.6), rgba(112, 59, 59, 0.8)), 
                        url('https://i.pinimg.com/1200x/81/40/6a/81406af4f9ff9d1dd1a79b0aebff9c77.jpg');
            background-size: cover;
            background-position: center;
            animation: slowPan 40s infinite alternate ease-in-out;
            z-index: -1;
        }
        @keyframes slowPan {
            from { transform: scale(1) translate(0, 0); }
            to { transform: scale(1.1) translate(-2%, -2%); }
        }

        /* Asymmetrical Layouts */
        .asym-stack { position: relative; width: 100%; height: 600px; }
        .card-front {
            position: absolute;
            top: 15%; left: 0;
            width: 85%; height: 350px;
            z-index: 10;
            border: 1px solid var(--gold);
            overflow: hidden;
            transition: 0.6s;
        }
        .card-behind {
            position: absolute;
            top: 0; right: 0;
            width: 60%; height: 550px;
            z-index: 5;
            border: 1px solid var(--gold);
            opacity: 0.7;
            overflow: hidden;
            transition: 0.6s;
        }
        .asym-stack:hover .card-front { transform: translateX(20px); }
        .asym-stack:hover .card-behind { transform: translateX(-20px); opacity: 1; }

        /* UI Elements */
        .btn-gold {
            border: 1px solid var(--gold);
            padding: 10px 25px;
            transition: 0.4s;
            background: transparent;
            color: var(--beige);
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .btn-gold:hover {
            background: var(--gold);
            color: var(--maroon);
            box-shadow: 0 0 15px var(--gold);
        }

        .reveal { opacity: 0; transform: translateY(30px); transition: 1s ease-out; }
        .reveal.active { opacity: 1; transform: translateY(0); }

        .page-section { display: none; }
        .page-section.active { display: block; }

        input, textarea {
            background: transparent;
            border-bottom: 1px solid var(--gold);
            padding: 10px;
            outline: none;
            color: var(--beige);
            width: 100%;
        }

        /* Cart & Search Drawers */
        .drawer {
            position: fixed;
            top: 0; right: -100%;
            width: 400px; height: 100%;
            background: var(--maroon);
            border-left: 1px solid var(--gold);
            z-index: 1000;
            transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 40px;
            box-shadow: -20px 0 50px rgba(0,0,0,0.5);
        }
        .drawer.open { right: 0; }
        .overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            display: none;
            z-index: 999;
        }