.eshop-ad-banner {
    position: relative;
    width: 100%;
    margin-inline: auto;
}

.eshop-ad-banner__viewport {
    position: relative;
    width: 100%;
    margin-inline: auto;
    overflow: hidden;
    aspect-ratio: 17 / 5;
    border-radius: 0.9rem;
    background: #f5f1f3;
    isolation: isolate;
}

.eshop-ad-banner__slide {
    position: absolute;
    z-index: 0;
    inset: 0;
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    backface-visibility: hidden;
    will-change: opacity, transform, filter;
}

.eshop-ad-banner__slide.is-active,
.eshop-ad-banner__slide.is-entering,
.eshop-ad-banner__slide.is-leaving {
    visibility: visible;
}

.eshop-ad-banner__slide.is-active {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
}

.eshop-ad-banner__slide.is-entering {
    z-index: 3;
    pointer-events: auto;
}

.eshop-ad-banner__slide.is-leaving {
    z-index: 2;
}

.eshop-ad-banner__link,
.eshop-ad-banner__creative {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
}

.eshop-ad-banner__link {
    color: inherit;
    text-decoration: none;
}

.eshop-ad-banner__image {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    transform: translate(-50%, -50%);
    object-fit: cover;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
}

/* The entering and leaving slides share one group-level transition duration. */
.eshop-ad-banner[data-animation="fade"] .is-entering {
    animation: eshopBannerFadeIn var(--eshop-banner-transition, 1500ms) ease both;
}
.eshop-ad-banner[data-animation="fade"] .is-leaving {
    animation: eshopBannerFadeOut var(--eshop-banner-transition, 1500ms) ease both;
}

.eshop-ad-banner[data-animation="slide-left"] .is-entering {
    animation: eshopBannerEnterRight var(--eshop-banner-transition, 1500ms) cubic-bezier(.22,.61,.36,1) both;
}
.eshop-ad-banner[data-animation="slide-left"] .is-leaving {
    animation: eshopBannerLeaveLeft var(--eshop-banner-transition, 1500ms) cubic-bezier(.22,.61,.36,1) both;
}

.eshop-ad-banner[data-animation="slide-right"] .is-entering {
    animation: eshopBannerEnterLeft var(--eshop-banner-transition, 1500ms) cubic-bezier(.22,.61,.36,1) both;
}
.eshop-ad-banner[data-animation="slide-right"] .is-leaving {
    animation: eshopBannerLeaveRight var(--eshop-banner-transition, 1500ms) cubic-bezier(.22,.61,.36,1) both;
}

.eshop-ad-banner[data-animation="slide-up"] .is-entering {
    animation: eshopBannerEnterBottom var(--eshop-banner-transition, 1500ms) cubic-bezier(.22,.61,.36,1) both;
}
.eshop-ad-banner[data-animation="slide-up"] .is-leaving {
    animation: eshopBannerLeaveTop var(--eshop-banner-transition, 1500ms) cubic-bezier(.22,.61,.36,1) both;
}

.eshop-ad-banner[data-animation="slide-down"] .is-entering {
    animation: eshopBannerEnterTop var(--eshop-banner-transition, 1500ms) cubic-bezier(.22,.61,.36,1) both;
}
.eshop-ad-banner[data-animation="slide-down"] .is-leaving {
    animation: eshopBannerLeaveBottom var(--eshop-banner-transition, 1500ms) cubic-bezier(.22,.61,.36,1) both;
}

.eshop-ad-banner[data-animation="fade-scale"] .is-entering {
    animation: eshopBannerFadeScaleIn var(--eshop-banner-transition, 1500ms) ease both;
}
.eshop-ad-banner[data-animation="fade-scale"] .is-leaving {
    animation: eshopBannerFadeScaleOut var(--eshop-banner-transition, 1500ms) ease both;
}

.eshop-ad-banner[data-animation="zoom-in"] .is-entering {
    animation: eshopBannerZoomIn var(--eshop-banner-transition, 1500ms) ease both;
}
.eshop-ad-banner[data-animation="zoom-in"] .is-leaving {
    animation: eshopBannerFadeOut var(--eshop-banner-transition, 1500ms) ease both;
}

.eshop-ad-banner[data-animation="zoom-out"] .is-entering {
    animation: eshopBannerZoomOut var(--eshop-banner-transition, 1500ms) ease both;
}
.eshop-ad-banner[data-animation="zoom-out"] .is-leaving {
    animation: eshopBannerFadeOut var(--eshop-banner-transition, 1500ms) ease both;
}

.eshop-ad-banner[data-animation="cross-slide"] .is-entering {
    animation: eshopBannerCrossIn var(--eshop-banner-transition, 1500ms) ease both;
}
.eshop-ad-banner[data-animation="cross-slide"] .is-leaving {
    animation: eshopBannerCrossOut var(--eshop-banner-transition, 1500ms) ease both;
}

.eshop-ad-banner[data-animation="cross-fade"] .is-entering {
    animation: eshopBannerCrossFadeIn var(--eshop-banner-transition, 1500ms) ease both;
}
.eshop-ad-banner[data-animation="cross-fade"] .is-leaving {
    animation: eshopBannerCrossFadeOut var(--eshop-banner-transition, 1500ms) ease both;
}

@keyframes eshopBannerFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes eshopBannerFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes eshopBannerEnterRight { from { opacity: .92; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes eshopBannerLeaveLeft { from { opacity: 1; transform: translateX(0); } to { opacity: .92; transform: translateX(-100%); } }
@keyframes eshopBannerEnterLeft { from { opacity: .92; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes eshopBannerLeaveRight { from { opacity: 1; transform: translateX(0); } to { opacity: .92; transform: translateX(100%); } }
@keyframes eshopBannerEnterBottom { from { opacity: .92; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes eshopBannerLeaveTop { from { opacity: 1; transform: translateY(0); } to { opacity: .92; transform: translateY(-100%); } }
@keyframes eshopBannerEnterTop { from { opacity: .92; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes eshopBannerLeaveBottom { from { opacity: 1; transform: translateY(0); } to { opacity: .92; transform: translateY(100%); } }
@keyframes eshopBannerFadeScaleIn { from { opacity: 0; transform: scale(.975); } to { opacity: 1; transform: scale(1); } }
@keyframes eshopBannerFadeScaleOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.025); } }
@keyframes eshopBannerZoomIn { from { opacity: 0; transform: scale(1.055); } to { opacity: 1; transform: scale(1); } }
@keyframes eshopBannerZoomOut { from { opacity: 0; transform: scale(.945); } to { opacity: 1; transform: scale(1); } }
@keyframes eshopBannerCrossIn { from { opacity: 0; transform: translateX(8%) scale(.99); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes eshopBannerCrossOut { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(-8%) scale(1.01); } }
@keyframes eshopBannerCrossFadeIn { from { opacity: 0; filter: blur(.4rem); } to { opacity: 1; filter: blur(0); } }
@keyframes eshopBannerCrossFadeOut { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(.35rem); } }

.eshop-ad-banner__controls {
    position: absolute;
    z-index: 8;
    inset: 0;
    pointer-events: none;
}

.eshop-ad-banner .eshop-ad-banner__arrow,
.eshop-ad-banner .eshop-ad-banner__dot {
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    border: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit;
    cursor: pointer;
}

.eshop-ad-banner .eshop-ad-banner__arrow {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.5rem !important;
    height: 2.5rem !important;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    color: #381326;
    text-shadow: 0 1px 3px rgba(255,255,255,0.72);
    box-shadow: 0 0.45rem 1.2rem rgba(35, 12, 28, 0.18);
    font-size: 1.45rem;
    line-height: 1;
    pointer-events: auto;
    transform: translateY(-50%);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.eshop-ad-banner__arrow--prev {
    left: 0.8rem;
}

.eshop-ad-banner__arrow--next {
    right: 0.8rem;
}

.eshop-ad-banner .eshop-ad-banner__arrow:hover,
.eshop-ad-banner .eshop-ad-banner__arrow:focus-visible {
    background: rgba(255, 255, 255, 0.40);
    transform: translateY(calc(-50% - 1px));
    box-shadow: 0 0.55rem 1.4rem rgba(67, 20, 48, 0.12);
}

.eshop-ad-banner__dots {
    position: absolute;
    left: 50%;
    bottom: 0.65rem;
    display: flex;
    gap: 0.18rem;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0.35rem 1rem rgba(35, 12, 28, 0.12);
    -webkit-backdrop-filter: blur(0.45rem);
    backdrop-filter: blur(0.45rem);
    pointer-events: auto;
    transform: translateX(-50%);
}

.eshop-ad-banner .eshop-ad-banner__dot {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 999px;
    background: transparent !important;
}

.eshop-ad-banner .eshop-ad-banner__dot::before {
    content: "";
    display: block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: rgba(75, 26, 62, 0.22);
    transition: width 180ms ease, background 180ms ease, transform 180ms ease;
}

.eshop-ad-banner .eshop-ad-banner__dot:hover::before,
.eshop-ad-banner .eshop-ad-banner__dot:focus-visible::before {
    background: rgba(75, 26, 62, 0.46);
    transform: scale(1.08);
}

.eshop-ad-banner .eshop-ad-banner__dot.is-active::before {
    width: 1.55rem;
    background: #c43f79;
}

@media (max-width: 48rem) {
    .eshop-ad-banner__viewport {
        aspect-ratio: 51 / 25;
        border-radius: 0.65rem;
    }

    /* Mobile deliberately shows the centered 60% of a standard 17:5 creative.
       That removes 20% from each horizontal side and gives the banner useful
       height without stretching the artwork. */
    .eshop-ad-banner__image {
        width: 166.6667%;
        height: auto;
        min-height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .eshop-ad-banner .eshop-ad-banner__arrow {
        width: 2.75rem !important;
        height: 2.75rem !important;
        font-size: 1.45rem;
    }

    .eshop-ad-banner__arrow--prev {
        left: 0.45rem;
    }

    .eshop-ad-banner__arrow--next {
        right: 0.45rem;
    }

    .eshop-ad-banner__dots {
        bottom: 0.42rem;
        gap: 0.02rem;
        max-width: calc(100% - 7rem);
        height: 1.05rem;
        min-height: 0;
        padding: 0 0.18rem;
        overflow-x: auto;
        overflow-y: hidden;
        line-height: 0;
        scrollbar-width: none;
    }

    .eshop-ad-banner__dots::-webkit-scrollbar {
        display: none;
    }

    .eshop-ad-banner .eshop-ad-banner__dot {
        width: 0.58rem !important;
        height: 0.72rem !important;
    }

    .eshop-ad-banner .eshop-ad-banner__dot::before {
        width: 0.18rem;
        height: 0.18rem;
    }

    .eshop-ad-banner .eshop-ad-banner__dot.is-active::before {
        width: 0.42rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eshop-ad-banner__slide.is-entering,
    .eshop-ad-banner__slide.is-leaving {
        animation-duration: 1ms !important;
    }
}