/* CSS Reset and Basic Setup */
        :root {
            --lime: #D7F205;
            --olive: #7D8C07;
            --deepolive: #394009;
            --yellow: #F2E205;
            --charcoal: #0D0D0D;
            --white: #FFFFFF;
            --gray-100: #f7fafc;
            --gray-200: #edf2f7;
            --gray-300: #e2e8f0;
            --gray-400: #cbd5e0;
            --gray-500: #a0aec0;
            --gray-600: #718096;
            --gray-800: #2d3748;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: 'Manrope', 'Inter', sans-serif; background-color: var(--white); color: var(--charcoal); line-height: 1.6; }
        ::-webkit-scrollbar { display: none; }
        
        /* Utility Classes */
        .container { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
        .font-playfair { font-family: 'Playfair Display', serif; }

        /* Announcement Bar */
        #announcement { background-color: var(--lime); padding: 0.5rem 0; color: var(--deepolive); text-align: center; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.025em; }
        #announcement .md-inline { display: none; }

        /* Header */
        #header { position: sticky; top: 0; z-index: 50; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--gray-100); }
        #header .header-container { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; padding-bottom: 1rem; }
        #header .logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; cursor: pointer; color:#000000;}
        #header nav { display: none; }
        #header nav span { color: var(--charcoal); transition: color 0.3s; cursor: pointer; margin: 0 1rem; font-weight:600; }
        #header nav span:hover { color: var(--olive); }
        #header .header-icons { display: flex; align-items: center; gap: 1.25rem; }
        #header .header-icons button { background: none; border: none; font-size: 1rem; cursor: pointer; color: var(--charcoal); transition: color 0.3s; position: relative; }
        #header .header-icons button:hover { color: var(--olive); }
        #header .cart-count { position: absolute; top: -0.5rem; right: -0.5rem; background-color: var(--lime); color: var(--deepolive); font-size: 0.75rem; font-weight: 700; border-radius: 9999px; height: 1.25rem; width: 1.25rem; display: flex; align-items: center; justify-content: center; }
        #header .menu-toggle { display: block; }
        .font-playfair a {
            color:#333 !important;
        }
        /*
================================================
Header User Dropdown Styles (UPDATED)
================================================
*/
.header-icon-item.user-dropdown {
    position: relative;
}

.user-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; /* Position it right below the icon's container */
    right: -15px; /* Adjust to align the menu better with the icon */
    
    /* === FIX: Remove margin-top and add padding-top to the container === */
    margin-top: 0; 
    
    background-color: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    min-width: 180px;
    z-index: 1001;
    list-style: none;
    padding: 0.5rem 0;
    text-align: left;
    
    /* === FIX: Add opacity and visibility for a smoother transition === */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* === FIX: Use a larger hover area and show the menu on hover === */
.user-dropdown:hover .dropdown-menu {
    display: block; /* We still need this for initial show */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* === FIX: Add a pseudo-element to create a "bridge" for the mouse === */
.user-dropdown::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px; /* Adjust this value to control the hover area */
    height: 20px; /* This creates an invisible bridge */
    background-color: transparent;
}


/* Dropdown content styles remain the same */
.user-dropdown .dropdown-menu li {
    margin: 0;
}

.user-dropdown .dropdown-menu a {
    display: block;
    padding: 0.6rem 1.2rem;
    color: var(--charcoal);
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background-color 0.2s ease-in-out;
}

.user-dropdown .dropdown-menu a:hover {
    background-color: var(--gray-100);
    color: var(--olive);
}

.user-dropdown .dropdown-greeting {
    display: block;
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-600);
    border-bottom: 1px solid var(--gray-300);
    margin-bottom: 0.5rem;
}



.header-icon-item.search-dropdown {
    position: relative;
}

.search-dropdown .dropdown-search-form {
    display: none; /* Hide by default */
    position: absolute;
    top: 100%;
    right: -15px; /* Adjust alignment */
    margin-top: 10px;
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 1002; /* Higher than user dropdown */
    padding: 1rem;
    width: 280px;
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

/* Show search form when active */
.search-dropdown.is-active .dropdown-search-form {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-dropdown .search-form {
    display: flex;
    align-items: center;
}

.search-dropdown .search-field {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--gray-300);
    border-radius: 5px 0 0 5px;
    font-size: 0.9rem;
    outline: none;
}
.search-dropdown .search-field:focus {
    border-color: var(--lime);
}

.search-dropdown .search-submit {
    background-color: var(--charcoal);
    color: var(--white);
    border: 1px solid var(--charcoal);
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
    margin-left: -1px; /* Overlap border */
}

.search-dropdown .search-submit:hover {
    background-color: var(--olive);
    border-color: var(--olive);
}

        /* Hero Carousel */
        #hero-carousel { position: relative; height: 550px !important; overflow: hidden; background-color: var(--charcoal); }
        .hero-swiper { position: relative; width: 100%; height: 100%; }
        
        .carousel-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    visibility: hidden;

    /* Styles for background image */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center; /* Default position for desktop */
}

.carousel-slide.active {
    opacity: 1;
    visibility: visible;
}
        .carousel-slide .gradient-overlay { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(13, 13, 13, 0.7), transparent); z-index: 10; }
        .carousel-slide .slide-content { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; padding: 0 1.5rem; }
        .slide-content .content-wrapper { max-width: 36rem; }
        .slide-content h1 { color: var(--white); font-family: 'Playfair Display', serif; font-size: 2.25rem; font-weight: 700; margin-bottom: 1rem; }
        .slide-content p { color: var(--gray-200); font-size: 1.125rem; margin-bottom: 2rem; }
        .slide-content .buttons { display: flex; flex-direction: column; gap: 1rem; }
        .button { display: inline-block; padding: 0.75rem 2rem; border-radius: 9999px; font-weight: 600; transition: all 0.3s; transform: translateY(0); cursor: pointer; text-align: center; }
        .button:hover { transform: translateY(-4px); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); }
        .button-primary { background-color: var(--lime); color: var(--deepolive); }
        .button-secondary { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(4px); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.3); }
        .button-secondary:hover { background-color: rgba(255, 255, 255, 0.2); }
        .carousel-pagination { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; gap: 0.5rem; }
        .carousel-dot { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); cursor: pointer; transition: background-color 0.3s; }
        .carousel-dot.active { background-color: var(--white); }
        .carousel-button { position: absolute; top: 50%; transform: translateY(-50%); z-index: 30; color: var(--white); font-size: 1.5rem; cursor: pointer; padding: 1rem; transition: opacity 0.3s; background: none; border: none; }
        .carousel-button:hover { opacity: 0.7; }
        .carousel-button.prev { left: 1rem; }
        .carousel-button.next { right: 1rem; }
        .slider-container {
            padding-left: 3rem;
            padding-right: 3rem;
        }
        #newsletter .button {
            display: inline-block !important;
            padding: 0.75rem 2rem !important;
            border-radius: 9999px !important;
            font-weight: 600 !important;
            transition: all 0.3s !important;
            transform: translateY(0) !important;
            cursor: pointer !important;
            text-align: center !important;
        }
        /* General Section Styling */
        /* section { padding: 5rem 0; } */
        #featured-category,#product-2,#testimonials,#newsletter,#coming-soon,#footer {
            padding: 5rem 0;
        }
        .product-section {
            padding: 5rem 0;
        }
        .section-title { text-align: center; margin-bottom: 4rem; }
        .section-title h2 { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; }
        .section-title p { color: var(--gray-600); max-width: 42rem; margin: 0 auto; }
        
        /* Featured Category */
        #featured-category { background-color: var(--white); }
        .category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
        .category-item { position: relative; overflow: hidden; border-radius: 1rem; height: 10rem; cursor: pointer; }
        .category-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
        .category-item:hover img { transform: scale(1.1); }
        .category-item .overlay { position: absolute; inset: 0; background-image: linear-gradient(to top, rgba(13, 13, 13, 0.8), transparent); }
        .category-item .category-name { position: absolute; bottom: 0; left: 0; padding: 1rem; }
        .category-name h3 { color: var(--white); font-weight: 600; font-size: 1.125rem; }

        /* Product Sections */
        .product-section { background-color: var(--gray-50); }
        #product-2, #product-4 { background-color: var(--white); }
        .product-layout { display: flex; flex-direction: column; align-items: center; gap: 3rem; }
        .product-image-wrapper { width: 100%; position: relative; }
        .product-image-wrapper .image-bg-glow { position: absolute; inset: -4px; background-image: linear-gradient(to right, var(--lime), var(--yellow)); border-radius: 1rem; filter: blur(25px); opacity: 0.25; transition: opacity 1s; }
        .product-image-wrapper:hover .image-bg-glow { opacity: 0.5; }
        .product-image { position: relative; background-color: var(--white); border-radius: 1rem; overflow: hidden; }
        .product-image img { width: 100%; height: auto; display: block; }
        .badge { position: absolute; top: 1rem; right: 1rem; color: var(--deepolive); font-size: 0.875rem; font-weight: 700; padding: 0.25rem 1rem; border-radius: 9999px; }
        .badge.lime { background-color: var(--lime); }
        .badge.yellow { background-color: var(--yellow); }
        .product-details { width: 100%; }
        .product-details .category { display: inline-block; color: var(--olive); font-weight: 600; margin-bottom: 0.5rem; }
        .product-details h2 { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
        .reviews { display: flex; align-items: center; margin-bottom: 1rem; }
        .stars { color: var(--yellow); }
        .reviews .review-count { margin-left: 0.5rem; color: var(--gray-600); }
        .product-details > p { color: var(--gray-600); margin-bottom: 1.5rem; }
        .pricing { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
        .price { display: flex; align-items: baseline; }
        .price .current-price { font-size: 2rem; font-weight: 700; }
        .price .original-price { margin-left: 0.5rem; color: var(--gray-500); text-decoration: line-through; }
        .save-badge { background-color: rgba(215, 242, 5, 0.2); color: var(--deepolive); font-size: 0.875rem; padding: 0.25rem 0.75rem; border-radius: 9999px; }
        .variant-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
        .variant-buttons button { padding: 0.5rem 1rem; border: 2px solid var(--gray-200); border-radius: 9999px; font-size: 0.875rem; cursor: pointer; background-color: var(--white); transition: border-color 0.3s; color:black; }
        .variant-buttons button:hover { border-color: var(--olive); }
        .product-actions { display: flex; flex-direction: column; gap: 1rem; }
        .product-features { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; font-size: 0.875rem; color: var(--gray-600); }
        .feature-item { display: flex; align-items: center; }
        .feature-item i { margin-right: 0.5rem; color: var(--olive); }
        .buy-now-btn { background-color: var(--white); border: 2px solid var(--lime); color: var(--deepolive); }
        #product-2 .buy-now-btn, #product-4 .buy-now-btn { border-color: var(--yellow); }
        #product-2 .buy-now-btn:hover, #product-4 .buy-now-btn:hover { background-color: rgba(242, 226, 5, 0.1); }
        .button-add-to-cart { background-color: var(--lime); color: var(--deepolive); }
        #product-2 .button-add-to-cart, #product-4 .button-add-to-cart { background-color: var(--yellow); }

        /* Testimonials */
        #testimonials { background-color: var(--deepolive); color: var(--white); }
        #testimonials .section-title p { color: var(--gray-300); }
        .testimonial-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
        .testimonial-card { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(4px); padding: 2rem; border-radius: 1rem; }
        .testimonial-card .stars { margin-bottom: 1rem; }
        .testimonial-card > p { margin-bottom: 1.5rem; }
        .customer { display: flex; align-items: center; }
        .customer img { width: 3rem !important; height: 3rem !important; border-radius: 50% !important; margin-right: 1rem; }
        .customer-info h4 { font-weight: 600; margin-bottom:0;}
        .customer-info p { font-size: 0.875rem; color: var(--gray-300); }

       /* --- COMING SOON SECTION (UPDATED) --- */
#coming-soon { 
    background-color: var(--deepolive); 
    color: var(--white); 
}
#coming-soon .section-title p { 
    color: var(--gray-300); 
}

.footer-links li a {
   color:#cbd5e0 !important;
}
.social-icons a {
    color:#cbd5e0 !important;
}
.footer-legal-links a {
    color:#cbd5e0 !important;
}

/* Changed from Grid to Flexbox for better alignment */
.coming-soon-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* This is the key to centering the rows */
    gap: 2rem;
}

.coming-soon-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    height: 20rem;
    background-color: rgba(255, 255, 255, 0.1);
    
    /* Set a base width for flex items to control wrapping */
    flex-grow: 1; /* Allow items to grow if space is available */
    flex-shrink: 1; /* Allow items to shrink if needed */
    flex-basis: 100%; /* Default for mobile (1 column) */
    max-width: 400px; /* Optional: Prevents cards from getting too wide on very large screens */
}

/* Responsive adjustments for the card width */
@media (min-width: 768px) { /* md breakpoint: 2 columns */
    .coming-soon-card {
        flex-basis: calc(50% - 1rem);
    }
}
@media (min-width: 1024px) { /* lg breakpoint: 3 columns */
    .coming-soon-card {
        flex-basis: calc(33.333% - 2rem);
    }
}


.coming-soon-card img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; transition: opacity 0.5s; }
.coming-soon-card:hover img { opacity: 0.8; }
.coming-soon-card .overlay { position: absolute; inset: 0; background: linear-gradient(to top, var(--deepolive), transparent); }
.coming-soon-card .content { position: absolute; bottom: 0; left: 0; padding: 1.5rem; z-index: 2; }
.coming-soon-card h3 { font-weight: 600; font-size: 1.25rem; margin-bottom: 0.5rem; }
.coming-soon-card p { color: var(--gray-300); font-size: 0.875rem; }
#coming-soon .notify-button-wrapper { text-align: center; margin-top: 3rem; }

        /* Newsletter */
        #newsletter { background-color: var(--charcoal); color: var(--white); }
        #newsletter form { display: flex; flex-direction: column; gap: 1rem; max-width: 36rem; margin: 0 auto; }
        #newsletter input[type="email"] { flex: 1; padding: 1rem 1.5rem; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--white); }
        #newsletter input::placeholder { color: var(--gray-400); }
        #newsletter button { background-color: var(--lime); color: var(--deepolive); }
        #newsletter .disclaimer { color: var(--gray-400); font-size: 0.875rem; margin-top: 1rem; }

        /* Footer */
        #footer { background-color: var(--charcoal); color: var(--white); padding-top: 4rem; padding-bottom: 2rem; }
        .footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3rem; }
        .footer-grid h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
        .footer-grid p { color: var(--gray-400); margin-bottom: 1.5rem; }
        .social-icons { display: flex; gap: 1rem; }
        .social-icons span { color: var(--gray-400); cursor: pointer; transition: color 0.3s; }
        .social-icons span:hover { color: var(--lime); }
        .footer-grid h4 { font-weight: 600; font-size: 1.125rem; margin-bottom: 1rem; }
        .footer-links { list-style: none; }
        .footer-links li { margin-bottom: 0.5rem; }
        .footer-links span { color: var(--gray-400); cursor: pointer; transition: color 0.3s; }
        .footer-links span:hover { color: var(--white); }
        .footer-bottom { padding-top: 2rem; border-top: 1px solid var(--gray-800); display: flex; flex-direction: column; align-items: center; text-align: center; }
        .footer-bottom p { color: var(--gray-500); font-size: 0.875rem; margin-bottom: 1rem; }
        .footer-legal-links { display: flex; gap: 1.5rem; }
        .footer-legal-links span { color: var(--gray-500); font-size: 0.875rem; cursor: pointer; transition: color 0.3s; }
        .footer-legal-links span:hover { color: var(--white); }

        /* Responsive Styles */
        @media (min-width: 640px) { /* sm */
            .slide-content .buttons, .product-actions, #newsletter form { flex-direction: row; }
        }

        @media (min-width: 768px) { /* md */
            #announcement .md-inline { display: inline; }
            #header nav { display: flex; }
            #header .menu-toggle { display: none; }
            #hero-carousel { height: 650px; }
            .slide-content h1 { font-size: 3rem; }
            .section-title h2 { font-size: 3rem; }
            .category-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
            .category-item { height: 15rem; }
            .product-layout { flex-direction: row; gap: 4rem; }
            .product-layout.reverse { flex-direction: row-reverse; }
            .product-image-wrapper, .product-details { width: 50%; }
            .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
            .coming-soon-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: repeat(4, 1fr); }
            .footer-bottom { flex-direction: row; justify-content: space-between; }
            .footer-bottom p { margin-bottom: 0; }
        }
        
        @media (min-width: 1024px) { /* lg */
            .slide-content h1 { font-size: 3.75rem; }
            .coming-soon-grid { grid-template-columns: repeat(3, 1fr); }
        }

        @media (min-width: 1280px) { /* xl */
            .coming-soon-grid { grid-template-columns: repeat(5, 1fr); }
        }
        
        
        /*
================================================
Mobile Responsive Overrides (Max-width: 767px)
================================================
* This block contains styles ONLY for mobile devices.
* It overrides the default desktop styles.
*/

@media (max-width: 767px) {

    /* --- General Layout & Typography --- */
    section {
        padding: 3rem 0; /* Reducing top/bottom padding for smaller screens */
    }
    .section-title {
        margin-bottom: 2.5rem; /* Less space below titles */
    }
    .section-title h2 {
        font-size: 2rem; /* Smaller headings on mobile */
    }

    /* --- Hero Carousel --- */
    #hero-carousel, .yova-hero-section {
        height: 500px;
        padding:0 !important;
    }
    .slide-content h1 {
        font-size: 2.25rem; /* Smaller title text in slides */
    }
    .slide-content .buttons {
        flex-direction: column; /* Stacking buttons vertically */
    }
    .yova-button, .button {
        padding: 0.75rem 1.5rem; /* Slightly smaller buttons */
        width: 100%; /* Make buttons full width in their column */
    }
    /* Making carousel navigation buttons smaller and closer to the edge */
    .carousel-button, .yova-carousel-button {
        padding: 0.5rem;
    }

    /* --- Featured Category --- */
    .category-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for mobile */
        gap: 1rem;
    }
    .category-item {
        height: 10rem;
    }

    /* --- Product Section --- */
    .product-layout, .product-layout.reverse {
        flex-direction: column; /* Stack image and details vertically */
        gap: 2rem;
    }
    .product-image-wrapper, .product-details {
        width: 100%; /* Make both parts full width */
    }
    .product-actions {
        flex-direction: column; /* Stack "Add to Cart" and "Buy Now" */
    }
    .product-details h2 {
        font-size: 1.75rem; /* Smaller product titles */
    }
    .product-features {
        justify-content: center; /* Center feature items */
        gap: 1rem 1.5rem;
    }

    /* --- Testimonials --- */
    .testimonial-grid {
        grid-template-columns: 1fr; /* Single column for testimonials */
        gap: 1.5rem;
    }
    .testimonial-card {
        padding: 1.5rem;
    }

    /* --- Coming Soon Section --- */
    .coming-soon-grid {
        gap: 1.5rem;
    }
    .coming-soon-card {
        flex-basis: 100%; /* Each card takes full width */
        height: 18rem;
    }

    /* --- Newsletter Section --- */
    #newsletter form {
        flex-direction: column; /* Stack input and button vertically */
    }

    /* --- Footer --- */
    .footer-grid {
        grid-template-columns: 1fr; /* Single column for all footer widgets */
        text-align: center;
        gap: 2rem;
    }
    .social-icons {
        justify-content: center; /* Center social icons */
    }
    .footer-bottom {
        flex-direction: column; /* Stack copyright and legal links */
        text-align: center;
    }
    .footer-bottom p {
        margin-bottom: 1rem;
    }

}

@media (max-width: 991px) {

    /* --- Header Widget --- */
    .yova-header-widget .menu-toggle {
        display: block; /* Show hamburger icon */
    }

    .yova-header-widget nav {
        display: none; /* Hide nav menu by default on mobile */
        position: absolute;
        top: 100%; /* Position it right below the header */
        left: 0;
        right: 0;
        width: 100%;
        background-color: var(--white);
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        flex-direction: column;
        align-items: center;
        padding: 1.5rem 0;
        gap: 1.5rem;
        z-index: 1000;
    }
    
    /* When body has 'mobile-menu-active' class, show the nav */
    body.mobile-menu-active .yova-header-widget nav {
        display: flex !important; 
    }

    /* Logic to switch between hamburger and close icon */
    .yova-header-widget .menu-toggle .fa-times {
        display: none; /* Hide close icon by default */
    }

    body.mobile-menu-active .yova-header-widget .menu-toggle .fa-bars {
        display: none; /* Hide hamburger icon when menu is active */
    }

    body.mobile-menu-active .yova-header-widget .menu-toggle .fa-times {
        display: block; /* Show close icon when menu is active */
    }


    /* --- Other Sections (Copied from previous answer for completeness) --- */
    section {
        padding: 3rem 0;
    }
    .section-title {
        margin-bottom: 2.5rem;
    }
    .section-title h2 {
        font-size: 2rem;
    }

    #hero-carousel, .yova-hero-section {
        height: 550px;
    }
    .slide-content h1 {
        font-size: 2.25rem;
    }
    .slide-content .buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .product-layout, .product-layout.reverse {
        flex-direction: column;
        gap: 2rem;
    }
    .product-image-wrapper, .product-details {
        width: 100%;
    }
    .product-actions {
        flex-direction: column;
    }
    .testimonial-grid {
        grid-template-columns: 1fr;
    }
    .coming-soon-card {
        flex-basis: 100%;
    }
    #newsletter form {
        flex-direction: column;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-bottom {
        flex-direction: column;
    }
    .footer-bottom p {
        margin-bottom: 1rem;
    }
}

@media (max-width: 991px) {
    /* ... other mobile styles ... */
    
    /* --- Hero Carousel Image Position --- */
    .carousel-slide {
        /*
         * For mobile screens, we change the focus to the top center of the image.
         * This prevents the main subject from being cut off on portrait screens.
         * You can adjust this value to 'center top', '20% 50%', etc.
        */
        background-position: center top; 
    }

    /* ... other mobile styles ... */
}