/* --- Updated Hero Carousel Styles --- */
        .hero-carousel {
            height: 500px;
        }
        @media (min-width: 768px) {
            .hero-carousel { height: 750px; }
        }

        .carousel-item {
            height: 500px;
            background-color: #333;
        }
        @media (min-width: 768px) {
            .carousel-item { height: 750px; }
        }

        .carousel-item img {
            width: 100%; height: 100%; object-fit: cover;
        }

        .hero-overlay {
            position: absolute; inset: 0;
            background: rgba(0, 0, 0, 0.25);
            z-index: 1;
        }

        .hero-caption {
            position: absolute; inset: 0;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            text-align: center; color: white; z-index: 2;
        }

        .carousel-fade .carousel-item {
            transition-duration: 1.2s;
        }

        .carousel-indicators [data-bs-target] {
            width: 8px; height: 8px; border-radius: 50%; margin: 0 6px;
            background-color: rgba(255,255,255,0.5); border: none;
        }
        .carousel-indicators .active { background-color: #fff; }

        /* Product Cards */
        .product-img-wrapper { overflow: hidden; background-color: #f3f4f6; position: relative; }
        .aspect-square { aspect-ratio: 1 / 1; }
        .aspect-landscape { aspect-ratio: 4 / 3; }
        .product-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
        .product-card:hover .product-img-wrapper img { transform: scale(1.1); }
        .product-title { font-size: 1rem; color: #374151; font-weight: 500; }
        
        
       .banner-strip { 
            position: relative; 
            width: 100%;
            aspect-ratio: 2.35 / 1;
            background-color: #463e36; 
            color: white; 
            text-align: center; 
            overflow: hidden; 
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        @media (max-width: 768px) {
            .banner-strip {
                aspect-ratio: 16 / 9; /* Slightly taller on mobile for better text visibility */
                min-height: 250px;
            }
        }

        .banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
        .banner-content { position: relative; z-index: 10; padding: 1rem; }
        .text-shadow { text-shadow: 0 2px 10px rgba(0,0,0,0.5); }