:root {
            --sand-bg: #fdfbf7;
            --luxury-black: #121212;
            --warm-coral: #e27d60;
            --muted-gold: #c5a059;
            --soft-white: #ffffff;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--sand-bg);
            color: var(--luxury-black);
            overflow-x: hidden;
            line-height: 1.6;
        }

        .serif { font-family: 'Playfair Display', serif; }
        .cursive { font-family: 'Birthstone Bounce', cursive; }

        /* Smooth Transitions */
        .page-view { display: none; opacity: 0; transform: translateY(10px); transition: all 0.8s ease; }
        .page-view.active { display: block; opacity: 1; transform: translateY(0); }

        /* Animations */
        @keyframes strokeAnimation { to { stroke-dashoffset: 0; } }
        .logo-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: strokeAnimation 4s forwards cubic-bezier(0.45, 0, 0.55, 1); }

        .reveal { opacity: 0; transform: translateY(30px); transition: all 1s cubic-bezier(0.22, 1, 0.36, 1); }
        .reveal.visible { opacity: 1; transform: translateY(0); }

        /* Custom UI Components */
        .btn-editorial {
            position: relative; padding: 1rem 2rem; border: 1px solid var(--luxury-black);
            text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.3em;
            transition: all 0.4s; overflow: hidden; background: transparent;
        }
        .btn-editorial:hover { background: var(--luxury-black); color: white; transform: scale(1.05); }

        .image-container { overflow: hidden; position: relative; }
        .image-container img { transition: transform 2s cubic-bezier(0.19, 1, 0.22, 1); }
        .image-container:hover img { transform: scale(1.1); }

        /* Cart & Search Overlays */
        .overlay {
            position: fixed; inset: 0; background: rgba(255,255,255,0.98);
            z-index: 2000; display: none; opacity: 0; transition: opacity 0.5s;
        }
        .overlay.active { display: flex; opacity: 1; }

        .side-panel {
            position: fixed; top: 0; right: -400px; width: 100%; max-width: 400px;
            height: 100vh; background: white; z-index: 2100; transition: right 0.6s cubic-bezier(0.77, 0, 0.175, 1);
            box-shadow: -10px 0 30px rgba(0,0,0,0.05);
        }
        .side-panel.active { right: 0; }

        /* Responsive Fixes */
        @media (max-width: 768px) {
            .hero-title { font-size: 4rem !important; }
            .section-padding { padding: 4rem 1.5rem !important; }
        }