/* Custom Tailwind Configuration */
        :root {
            --color-sand: #E5DCCF; /* Warm Beige */
            --color-dark: #1A1A1A; /* Near Black */
            --color-light: #FAFAFA; /* Off White */
        }
        .font-editorial { font-family: 'Playfair Display', serif; }
        .font-cursive { font-family: 'Playfair Display', serif; font-style: italic; }
        .font-body { font-family: 'Inter', sans-serif; }

        /* Custom scroll-based animation */
        .animate-fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        .hover-lift:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        /* Parallax effect on Hero Image */
        #hero-image-container {
            background-image: url('https://placehold.co/1920x1080/000000/ffffff?text=Elegance+Redefined');
            background-size: cover;
            background-position: center 50%; /* Start center */
            background-repeat: no-repeat;
            transition: background-position 0.1s linear;
        }

        /* Utility for Cursive Accent Labels */
        .cursive-label {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%) rotate(-5deg);
            z-index: 10;
            white-space: nowrap;
            letter-spacing: 0.1em;
            text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
        }

        /* Modal/Drawer Styles */
        .drawer-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 40;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .drawer {
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            max-width: 400px;
            height: 100%;
            background: var(--color-light);
            z-index: 50;
            transform: translateX(100%);
            transition: transform 0.4s ease-out;
            box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
        }
        .drawer.active, .drawer-overlay.active {
            visibility: visible;
            opacity: 1;
        }
        .drawer.active {
            transform: translateX(0);
        }

        /* Subtle grain texture for background */
        body {
            background-color: var(--color-light);
        }
        /* Disabled as it can impact performance/readability, but kept the concept in mind for the light bg.
        body::before {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: -1;
        }
        */
        /* Hide all dynamic content sections by default */
        .dynamic-content-section {
            display: none;
        }
        /* Ensure responsive grid layout for mobile */
        @media (max-width: 768px) {
            .collection-grid {
                grid-template-columns: 1fr;
            }
        }
        @keyframes marqueeSlow {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-50%); }
        }

        @keyframes marqueeFast {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-60%); }
        }

        .animate-marquee-slow {
        animation: marqueeSlow 40s linear infinite;
        }

        .animate-marquee-fast {
        animation: marqueeFast 30s linear infinite;
        }

        .reverse {
        animation-direction: reverse;
        }