/* Amerce's standard product slider: reserve its native geometry before window.load.
 * Keep image aspect ratios/object-fit from the theme. Swiper owns all geometry once
 * initialized. This deliberately excludes galleries, other slider types, multirow
 * grids and custom data contracts; no JavaScript or second initializer is needed.
 */
.ecommerce-products__slider > .tf-swiper {
    --upv-preload-count: 2;
    --upv-preload-gap: 10px;
}

.ecommerce-products__slider > .tf-swiper[data-preview="1"] { --upv-preload-desktop: 1; }
.ecommerce-products__slider > .tf-swiper[data-preview="2"] { --upv-preload-desktop: 2; }
.ecommerce-products__slider > .tf-swiper[data-preview="3"] { --upv-preload-desktop: 3; }
.ecommerce-products__slider > .tf-swiper[data-preview="4"] { --upv-preload-desktop: 4; }
.ecommerce-products__slider > .tf-swiper[data-preview="5"] { --upv-preload-desktop: 5; }
.ecommerce-products__slider > .tf-swiper[data-preview="6"] { --upv-preload-desktop: 6; }

@media (min-width: 768px) {
    .ecommerce-products__slider > .tf-swiper {
        --upv-preload-count: 3;
        --upv-preload-gap: 20px;
    }
}

@media (min-width: 1200px) {
    .ecommerce-products__slider > .tf-swiper {
        --upv-preload-count: var(--upv-preload-desktop);
        --upv-preload-gap: 30px;
    }
}

/* These attributes are emitted by style-slider and style-slider-countdown. Fail
 * open to the theme if a future template changes the contract instead of imposing
 * guessed widths. Percentages use the content box, preserving wrap-sw-over padding.
 */
.ecommerce-products__slider > .tf-swiper:not(.swiper-initialized):where([dir="ltr"][data-mobile="2"][data-mobile-sm="2"][data-tablet="3"][data-space="10"][data-space-md="20"][data-space-lg="30"]):is([data-preview="1"], [data-preview="2"], [data-preview="3"], [data-preview="4"], [data-preview="5"], [data-preview="6"]):not([data-grid]:not([data-grid="1"])):not([data-direction]:not([data-direction="horizontal"])):not([data-laptop]):not([data-space-xxl]):not([data-center="true"]):not([data-effect]:not([data-effect="slide"])) > .swiper-wrapper > .swiper-slide {
    width: calc((100% - (var(--upv-preload-count) - 1) * var(--upv-preload-gap)) / var(--upv-preload-count));
    margin-right: var(--upv-preload-gap);
}