/* Custom styles for elegance and animations */
        @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

        body {
            font-family: 'Inter', sans-serif;
            color: var(--charcoal);
            background-color: var(--ivory-bg);
            scroll-behavior: smooth;
        }

        h1, h2, h3, h4, .serif-heading {
            font-family: 'Cormorant Garamond', serif;
            color: var(--midnight-blue);
        }

        .product-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            overflow: hidden;
            background-color: white;
        }

        .product-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 20px rgba(31, 36, 48, 0.08); /* Soft, midnight-blue shadow */
        }

        .product-image {
            transition: transform 0.5s ease;
        }

        .product-card:hover .product-image {
            transform: scale(1.05);
        }

        .cta-button {
            transition: background-color 0.3s ease, transform 0.1s ease;
            box-shadow: 0 4px 6px rgba(216, 184, 176, 0.4);
        }

        .cta-button:hover {
            background-color: #c9a69d; /* Slightly darker dusty rose */
            transform: translateY(-1px);
            box-shadow: 0 6px 10px rgba(216, 184, 176, 0.6);
        }

        /* Responsive Hero Banner Background */
        .hero-banner {
            background-image: url('https://i.pinimg.com/1200x/b7/70/6f/b7706ffd609d9d5e44805831580511a9.jpg');
            background-size: cover;
            background-position: center;
            height: 100vh; /* Full viewport height on large screens */
        }

        @media (max-width: 768px) {
            .hero-banner {
                height: 60vh;
            }
        }

        /* Custom Scroll/Section Reveal */
        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Product Detail Image Gallery */
        .product-gallery-main {
            aspect-ratio: 3/4; /* Consistent aspect ratio for fashion */
            object-fit: cover;
        }

        .product-thumbnail {
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.2s;
        }
        .product-thumbnail.active {
            opacity: 1;
            border: 2px solid #D8B8B0;
        }