/* Promotion Products Swiper CSS */

/* Mobile: Default no gap */
.swiper-promotion-products {
    flex: 1;
    display: flex;
    gap: 0px;
    overflow: visible;
}

.swiper-promotion-products .swiper-wrapper {
    display: flex;
    width: 100%;
    gap: 0px;
}

.swiper-promotion-products .swiper-slide {
    flex: 0 0 calc(100% / 4);
    width: calc(100% / 4);
    max-width: 250.5px;
    min-width: 0;
    height: auto;
}

.swiper-promotion-products .swiper-slide:last-child {
    /* margin-right: 0 !important; */
}

/* Desktop: Add gap for better spacing (only large screens) */
@media (min-width: 1441px) {
    .swiper-promotion-products {
        gap: 18px;
    }

    .swiper-promotion-products .swiper-wrapper {
        gap: 18px;
        /* padding-right: 48px; */
    }
}

/* Tablet & Medium Desktop: Enable swiper scroll */
@media (min-width: 769px) and (max-width: 1440px) {
    .swiper-promotion-products {
        overflow: hidden;
    }

    .swiper-promotion-products .swiper-wrapper {
        gap: 0px;
        /* padding-right: 64px !important; */
        padding-right: 8px;
    }

    .swiper-promotion-products .swiper-slide {
        /* flex: 0 0 280px;
    width: 280px;
    max-width: 280px; */
    }
}

@media (max-width: 768px) {
    .swiper-promotion-products .swiper-slide {
        /* width: 253px !important; */
    }
}

/* Mobile: Grid layout instead of swiper - See product-showcase-mobile.css */