/**
 * "Andere kochten ook..." — kaartbreedte behouden bij weinig items
 * ================================================================
 * De Loop Carousel toont upsells (of gerelateerde items als fallback). Heeft een
 * product minder items dan er per view passen (bv. 1 upsell), dan initialiseert
 * Swiper NIET en valt de wrapper terug op een grid met één kolom van volledige
 * breedte → de kaart rekt uit tot 100%.
 *
 * Deze regels dwingen de niet-geinitialiseerde staat naar hetzelfde stramien als
 * de volle slider: 4 kolommen desktop / 3 laptop / 2 tablet / 1 mobiel, 10px gap,
 * links uitgelijnd. Een enkel item is daardoor precies even breed als een kaart in
 * de volledig gevulde slider (desktop 345px @ container 1410px).
 *
 * Alleen actief bij `.swiper:not(.swiper-initialized)` -> de werkende (volle)
 * slider blijft volledig ongemoeid.
 */

body.single-product .elementor-widget-loop-carousel .swiper:not(.swiper-initialized) {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(4, 1fr) !important;
    column-gap: 10px !important;
    justify-content: start !important;
}

/* Laptop: 3 per view */
@media (max-width: 1365px) {
    body.single-product .elementor-widget-loop-carousel .swiper:not(.swiper-initialized) {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Tablet: 2 per view */
@media (max-width: 1024px) {
    body.single-product .elementor-widget-loop-carousel .swiper:not(.swiper-initialized) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobiel: 1 per view */
@media (max-width: 767px) {
    body.single-product .elementor-widget-loop-carousel .swiper:not(.swiper-initialized) {
        grid-template-columns: 1fr !important;
    }
}

/**
 * Slider-knoppen + paginatie verbergen als er niets te sliden valt.
 * Swiper initialiseert alleen wanneer er meer items zijn dan er per view passen;
 * bij <= per-view items (1/2/3/4 op desktop) blijft `.swiper` un-initialized, dus
 * dan zijn de pijlen en bolletjes overbodig. `:has()` selecteert de widget die zo'n
 * niet-geinitialiseerde slider bevat. De pijlen/paginatie staan als sibling van
 * `.swiper` binnen de widget.
 */
body.single-product .elementor-widget-loop-carousel:has(.swiper:not(.swiper-initialized)) .elementor-swiper-button,
body.single-product .elementor-widget-loop-carousel:has(.swiper:not(.swiper-initialized)) .swiper-pagination {
    display: none !important;
}