@supports (mix-blend-mode: difference) {
    .product__slider_1 .product__slide:has(video) {
        isolation: isolate;
        background: #eee;
    }

    html:has(#mainCssFile[href*="/style.css"]) .product__slider_1 .product__slide:has(video) {
        background: #231f20;
    }

    .product__slider_1 .product__slide:has(video) .product__slide_bg {
        z-index: 0;
    }

    .product__slider_1 .product__slide:has(video) .product__slide_title,
    .product__slider_1 .product__slide:has(video) .product__slide_text {
        position: relative;
        z-index: 1;
        mix-blend-mode: difference;
        color: #fff;
        opacity: 1;
    }

    .product__slider_1 .product__slide:has(video) .product__slide_text p {
        color: #fff;
    }

    .product__slider_2:has(.swiper-slide-active video) {
        isolation: isolate;
        background: #eee;
    }

    html:has(#mainCssFile[href*="/style.css"]) .product__slider_2:has(.swiper-slide-active video) {
        background: #231f20;
    }

    /* Blend the overlay as one layer so its captions see the slide beneath. */
    .product__slider_2:has(.swiper-slide-active video) .product__slider__bottom {
        mix-blend-mode: difference;
        color: #fff;
    }

    .product__slider_2:has(.swiper-slide-active video) .product__slider__bottom .product__slide_title,
    .product__slider_2:has(.swiper-slide-active video) .product__slider__bottom .product__slide_text,
    .product__slider_2:has(.swiper-slide-active video) .product__slider__bottom .product__slide_text p {
        color: #fff;
        opacity: 1;
    }

    .product__slider_2:has(.swiper-slide-active video) .product__slider__bottom_item::before {
        background: #fff;
        opacity: .5;
    }

    .product__slider_2:has(.swiper-slide-active video) .product__slider__bottom_item.active::before {
        opacity: 1;
    }
}