/* Independent image effects: wrappers isolate image transforms from cards and carousel slides. */
.merchant-site[data-site-image-animation] .site-image-motion-frame {
    overflow: hidden;
}
.merchant-site[data-site-image-animation] .site-image-motion-viewport {
    display: block;
    min-width: 0;
    line-height: 0;
    border-radius: inherit;
}
.merchant-site[data-site-image-animation] .site-image-motion-about {
    width: min(100%, 520px);
    margin: clamp(30px, 5vw, 54px) auto 0;
    border-radius: var(--site-card-radius, 12px);
}
.merchant-site[data-site-image-animation] .site-image-motion-about > .merchant-about-image {
    width: 100%;
    margin: 0;
}
.merchant-site[data-site-image-animation] .site-image-motion-carousel {
    width: 100%;
    height: 100%;
}
.merchant-site[data-site-image-animation] .merchant-photo-carousel[data-carousel-style="cards"] .site-image-motion-carousel {
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: max(4px, calc(var(--site-card-radius) * .55));
}
.merchant-site[data-site-image-animation] .site-image-motion-editorial {
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    border-radius: var(--site-card-radius, 12px);
}
.merchant-site[data-site-image-animation] img.site-image-motion-image {
    --site-image-scale: 1;
    transform: translate3d(0, var(--site-image-shift, 0px), 0) scale(var(--site-image-scale)) !important;
    transform-origin: center;
    transition: transform 2s cubic-bezier(.19, 1, .22, 1) !important;
}
.merchant-site[data-site-image-animation] .site-image-motion-parallax > img.site-image-motion-image {
    --site-image-scale: 1.09;
}
.merchant-site[data-site-image-animation] img.site-image-motion-image.site-image-motion-visible {
    will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
    .merchant-site[data-site-image-animation] .site-image-motion-zoom:hover > img.site-image-motion-image {
        --site-image-scale: 1.045;
    }
    .merchant-site[data-site-image-animation] .site-image-motion-parallax.site-image-motion-zoom:hover > img.site-image-motion-image {
        --site-image-scale: 1.13;
    }
}
@media (prefers-reduced-motion: reduce) {
    .merchant-site[data-site-image-animation] img.site-image-motion-image {
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}