/**
 * Opt-in: render Minimog's `tm-product-list-carousel` (which uses Swiper
 * under the hood — NOT Slick) as a 2-column CSS grid showing 6 products on
 * mobile, while leaving the desktop carousel alone.
 *
 * Activation: add the class `pl-carousel-mobile-grid` to the widget's
 * Advanced → CSS Classes field in Elementor. Without that class the widget
 * keeps its default Swiper behavior on every breakpoint.
 *
 * Why this works:
 *   Swiper paints inline `transform` on `.swiper-wrapper` and inline `width`
 *   on each `.swiper-slide` every layout pass. We override those with
 *   !important and switch the wrapper to `display: grid` only at the mobile
 *   breakpoint, so the same DOM renders as a static grid without
 *   re-initializing the slider. We also disable transitions so any in-flight
 *   slide animation can't shift the grid.
 *
 * Note on the 6-product cap:
 *   The `nth-child(n+7)` rule assumes loop mode is OFF (the widget setting
 *   that prepends/appends duplicate slides). If loop is on, Swiper inserts
 *   `.swiper-slide-duplicate` siblings that throw off the count. We also
 *   hide duplicates below, but the cleanest path is to set the widget's
 *   product count to 6 in Elementor and leave loop off.
 */

@media (max-width: 767px) {

    .pl-carousel-mobile-grid .swiper,
    .pl-carousel-mobile-grid .swiper-inner {
        overflow: visible !important;
    }

    .pl-carousel-mobile-grid .swiper-wrapper {
        transform: none !important;
        transition: none !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        width: 100% !important;
        /* Vertically center each slide's content within its row track so short
           cards (no caption wrap) align with taller siblings. */
        align-items: center !important;
    }

    .pl-carousel-mobile-grid .swiper-slide {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        height: auto !important;
        transform: none !important;
        transition: none !important;
        /* Grid items default to `min-width: auto` (their content's intrinsic
           min-width), which lets an `<img width=...>` push the cell wider than
           1fr and overflow the right edge. Zero lets the cell honor its track. */
        min-width: 0 !important;
    }

    /* Make images fluid inside the grid cell. WP often emits explicit
       width/height attributes on category thumbnails — without this they'd
       render at their natural pixel size and bleed past the cell. */
    .pl-carousel-mobile-grid .swiper-slide img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Swiper clones the first/last slides when loop mode is on — those would
       duplicate products in the grid. */
    .pl-carousel-mobile-grid .swiper-slide-duplicate {
        display: none !important;
    }

    /* Cap visible products at 8 (2 cols × 4 rows).
       :nth-child counts ALL siblings including .swiper-slide-duplicate, which
       Swiper prepends/appends when loop mode is on — that would silently
       reduce the visible count. The `~` chain instead means "a non-duplicate
       slide that has at least 8 non-duplicate siblings before it," so we hit
       exactly the 9th original regardless of how many duplicates Swiper added. */
    .pl-carousel-mobile-grid .swiper-slide:not(.swiper-slide-duplicate)
        ~ .swiper-slide:not(.swiper-slide-duplicate)
        ~ .swiper-slide:not(.swiper-slide-duplicate)
        ~ .swiper-slide:not(.swiper-slide-duplicate)
        ~ .swiper-slide:not(.swiper-slide-duplicate)
        ~ .swiper-slide:not(.swiper-slide-duplicate)
        ~ .swiper-slide:not(.swiper-slide-duplicate)
        ~ .swiper-slide:not(.swiper-slide-duplicate)
        ~ .swiper-slide:not(.swiper-slide-duplicate) {
        display: none !important;
    }

    /* No arrows, pagination, or scrollbar when the carousel is acting as a grid. */
    .pl-carousel-mobile-grid .swiper-button-prev,
    .pl-carousel-mobile-grid .swiper-button-next,
    .pl-carousel-mobile-grid .swiper-pagination,
    .pl-carousel-mobile-grid .swiper-scrollbar {
        display: none !important;
    }
}