/* Product Grid Spacing Fix - FORCE OVERRIDE */
/* Ensures proper spacing between product cards in all sections */

/* Latest Arrivals Section - Maximum Specificity */
section#latest-arrivals-section .container-fluid .row.g-4,
#latest-arrivals-section .row.g-4 {
    --bs-gutter-x: 1.5rem !important;
    --bs-gutter-y: 1.5rem !important;
    margin-left: calc(-0.75rem) !important;
    margin-right: calc(-0.75rem) !important;
    gap: 1.5rem !important;
}

section#latest-arrivals-section .container-fluid .row.g-4 > *,
#latest-arrivals-section .row.g-4 > * {
    padding-left: calc(0.75rem) !important;
    padding-right: calc(0.75rem) !important;
    margin-bottom: 1.5rem !important;
    flex: 0 0 auto !important;
}

/* Force spacing with CSS Grid as backup */
#latest-arrivals-section .row.g-4 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

#latest-arrivals-section .row.g-4 > * {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* Products Showcase Section - Force Grid Layout */
section[id*="products"] .row.g-4,
.products-showcase-section .row.g-4,
section[class*="products"] .row.g-4 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

section[id*="products"] .row.g-4 > *,
.products-showcase-section .row.g-4 > *,
section[class*="products"] .row.g-4 > * {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* Custom Product Sections - Force Grid Layout */
.custom-product-section .row.g-4 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.custom-product-section .row.g-4 > * {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* General Product Grid Fix - Apply to ALL .row.g-4 */
.row.g-4 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.row.g-4 > [class*="col-"] {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* Ensure product cards have proper spacing */
.product-card {
    margin: 0 !important;
    width: 100% !important;
    max-width: 350px !important;
}

/* Carousel container width control - Remove width limits */
.carousel.slide {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    margin-bottom: 1rem !important; /* Reduce bottom margin */
}

.carousel-inner {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 0 !important; /* Remove bottom margin from carousel inner */
}

/* Fix carousel indicators spacing */
.carousel-indicators-container {
    margin-top: 0.5rem !important; /* Reduce top margin */
    margin-bottom: 1rem !important; /* Control bottom margin */
    padding: 0 !important;
}

.carousel-indicators-container .carousel-indicators {
    margin: 0 !important;
    padding: 0 !important;
    justify-content: center !important;
}

/* Specific fix for all carousel sections */
#latest-arrivals-section .carousel.slide,
#productsCarousel,
[id*="Carousel"].carousel.slide {
    margin-bottom: 0.5rem !important;
}

#latest-arrivals-section .carousel-indicators-container,
.products-showcase-section .carousel-indicators-container,
.custom-product-section .carousel-indicators-container {
    margin-top: 0.5rem !important;
    margin-bottom: 1rem !important;
}

/* Override any existing carousel margins */
.carousel.slide.mb-2,
.carousel.slide.mb-5 {
    margin-bottom: 0.5rem !important;
}

/* Fix for carousel items - Better space utilization */
.carousel-item .row.g-4 {
    display: flex !important;
    flex-wrap: nowrap !important; /* Prevent wrapping */
    gap: 1.5rem !important; /* Restore proper gap */
    margin: 0 !important;
    padding: 0 4rem !important; /* Reduce side padding */
    justify-content: space-between !important; /* Distribute evenly */
    width: 100% !important;
    max-width: none !important;
}

.carousel-item .row.g-4 > * {
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto !important; /* Allow flexible sizing */
    max-width: 320px !important; /* Slightly larger max width */
    min-width: 250px !important; /* Minimum width */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .row.g-4 {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
        gap: 1rem !important;
    }
    
    .carousel-item .row.g-4 {
        gap: 1rem !important;
        padding: 0 2rem !important;
        justify-content: center !important;
        flex-wrap: wrap !important; /* Allow wrapping on tablets */
    }
    
    .carousel-item .row.g-4 > * {
        flex: 0 0 calc(50% - 0.5rem) !important; /* 2 items per row on tablets */
        max-width: 300px !important;
        min-width: 250px !important;
    }
}

@media (max-width: 576px) {
    .row.g-4 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    .carousel-item .row.g-4 {
        gap: 0.75rem !important;
        padding: 0 1rem !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    
    .carousel-item .row.g-4 > * {
        flex: 0 0 100% !important; /* 1 item per row on mobile */
        max-width: 300px !important;
        min-width: auto !important;
    }
    
    .product-card {
        max-width: 100% !important;
    }
}

/* Custom height utility class */
.h-200 {
    height: 200px !important;
    min-height: 200px !important;
}

/* Hero section height optimization for large screens - Override existing rules */
@media (min-width: 2560px) {
    body .hero-section,
    body .carousel-item,
    .hero-section,
    .carousel-item {
        min-height: 375px !important;
    }
    
    /* Specific override for carousel items in sections */
    section .hero-section,
    section .carousel-item,
    .carousel .carousel-item,
    #heroCarousel .carousel-item,
    [id*="Carousel"] .carousel-item {
        min-height: 375px !important;
    }
}