/**
 * Product Carousel - Initial Layout Styles
 * These styles ensure a proper grid layout before Swiper initializes
 */

/* Container for pre-initialized carousel */
.product-carousel:not(.carousel-initialized) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* Default 2 columns for mobile */
    gap: 16px;
    overflow: hidden;
}

/* Adjust grid for tablet devices */
@media (min-width: 768px) {
    .product-carousel:not(.carousel-initialized) {
        grid-template-columns: repeat(3, 1fr);  /* 3 columns for tablet */
        gap: 20px;
    }
}

/* Adjust grid for desktop devices */
@media (min-width: 1024px) {
    .product-carousel:not(.carousel-initialized) {
        grid-template-columns: repeat(4, 1fr);  /* 4 columns for desktop */
        gap: 24px;
    }
}

/* Hide overflow wrapper when not initialized */
.product-carousel:not(.carousel-initialized) .swiper-wrapper {
    display: contents; /* Makes wrapper children part of the grid layout */
}

/* Style slides before initialization */
.product-carousel:not(.carousel-initialized) .swiper-slide {
    height: 100%;
    width: 100% !important; /* Override any inline styles Swiper might add */
}

/* Hide navigation arrows until initialized */
.product-carousel:not(.carousel-initialized) + .product-carousel-prev,
.product-carousel:not(.carousel-initialized) + .product-carousel-next {
    display: none !important;
}

/* Hide items beyond visible count to avoid layout shift */
.product-carousel:not(.carousel-initialized) .swiper-slide:nth-child(n+5) {
    display: none;
}

@media (max-width: 1023px) {
    .product-carousel:not(.carousel-initialized) .swiper-slide:nth-child(n+4) {
        display: none;
    }
}

@media (max-width: 767px) {
    .product-carousel:not(.carousel-initialized) .swiper-slide:nth-child(n+3) {
        display: none;
    }
}