:root {
            --bg-sand: #FDE7B3;
            --accent-clay: #D97D55;
            --clay-dark: #8C4427;
            --clay-deep: #4A2C1D;
            --text-brown: #3d2419;
            --text-light: #fdecc5;
        }


        body {
            background-color: var(--bg-sand);
            color: var(--text-brown);
            margin: 0;
            overflow-x: hidden;
        }

        /* Responsive Sidebar */
        #sidebar {
            background-color: var(--accent-clay);
            color: var(--bg-sand);
            width: 100px;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            overflow-y: auto;
            scrollbar-width: none;
            z-index: 100;
            border-right: 2px solid var(--clay-dark);
        }
        #sidebar::-webkit-scrollbar { display: none; }

        @media (max-width: 768px) {
            #sidebar { width: 70px; }
            main { margin-left: 70px !important; }
            .hero-title { font-size: 3rem !important; }
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1.5rem 0.5rem;
            cursor: pointer;
            transition: 0.3s;
            text-align: center;
        }
        .nav-item:hover { background: var(--clay-dark); transform: translateX(5px); }
        .nav-item span { font-size: 0.6rem; font-weight: 900; text-transform: uppercase; margin-top: 0.5rem; }

        /* Bottom Dock Responsive */
        #bottom-dock {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--clay-deep);
            padding: 12px 25px;
            border-radius: 50px;
            display: flex;
            gap: 1.5rem;
            z-index: 90;
            box-shadow: 0 10px 30px rgba(74, 44, 29, 0.4);
        }

        @media (max-width: 640px) {
            #bottom-dock { width: 90%; justify-content: space-around; gap: 0.5rem; }
        }

        /* Custom UI Elements */
        .glass-card { background: rgba(217, 125, 85, 0.05); border: 2px solid var(--accent-clay); border-radius: 2rem; }
        .btn-clay { background: var(--accent-clay); color: var(--bg-sand); font-weight: 900; text-transform: uppercase; transition: 0.3s; }
        .btn-clay:hover { background: var(--clay-dark); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(140, 68, 39, 0.3); }

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

        .trunk-line {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 6px;
            background: var(--accent-clay);
            transform: translateX(-50%);
            opacity: 0.3;
        }

        /* Cart Badge */
        .cart-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #fde7b3;
            color: #d97d55;
            font-size: 10px;
            font-weight: 900;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }