/* Soft crossfade for advertising banner zones with multiple creatives */
.shop-adv-rotate {
    --shop-adv-fade-ms: 700ms;
}

.shop-adv-rotate__viewport {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
}

.shop-adv-rotate__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--shop-adv-fade-ms) ease, visibility 0s linear var(--shop-adv-fade-ms);
}

.shop-adv-rotate__slide.is-active {
    position: relative;
    inset: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--shop-adv-fade-ms) ease, visibility 0s linear 0s;
}

.shop-adv-rotate__slide img {
    max-width: 100%;
    height: auto;
    display: block;
}

.shop-ad-rail .shop-adv-rotate,
.shop-ad-rail .shop-adv-rotate__viewport {
    display: block;
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .shop-adv-rotate {
        --shop-adv-fade-ms: 1ms;
    }
}