/* 1. Custom Colors and Fonts */
        :root {
            --bg-ivory: #FAF9F7;
            --primary-crimson: #C21807;
            --secondary-charcoal: #333333;
            --highlight-gold: #FFD700;
        }

        /* Set base styles using the specified fonts and background */
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-ivory);
            color: var(--secondary-charcoal);
            scroll-behavior: smooth;
        }

        /* Playfair Display for Headings - Mimics Cursive/Elegant Style */
        .font-playfair {
            font-family: 'Playfair Display', serif;
        }
    
    /* 3. Global Reusable Classes */
        .btn-primary {
            @apply px-8 py-3 font-semibold text-lg uppercase transition-all duration-300 rounded-lg shadow-xl;
            background-color: var(--primary-crimson);
            color: white;
            position: relative;
            overflow: hidden;
            transform: scale(1);
        }

        .btn-primary:hover {
            background-color: var(--highlight-gold);
            color: var(--secondary-charcoal);
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(240, 215, 0, 0.5);
        }

        .btn-secondary {
            @apply px-8 py-3 font-semibold text-lg uppercase transition-all duration-300 rounded-lg border-2 border-charcoal bg-white;
        }

        .btn-secondary:hover {
            @apply bg-charcoal text-white shadow-xl;
        }

        /* Staggered Fade In for Cards */
        .stagger-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .stagger-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Product Card Hover Effect */
        .product-card-inner {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .product-card-inner:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

        /* Hero Image Overlay */
        .hero-overlay {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(240, 240, 240, 0.1) 100%);
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
        }

        @keyframes scaleIn {
    from { transform: scale(.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.animate-scaleIn { animation: scaleIn .35s ease; }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-fadeIn { animation: fadeIn .3s ease-out; }