/**
 * M8WL product-card image normalizer.
 * Source images remain unchanged; only the catalogue viewport is normalized.
 */
.product_list .wrap {
    background: #fff;
}

.product_list .img.img_ab {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding-bottom: 0 !important;
    overflow: hidden;
    background: #fff;
    isolation: isolate;
}

.product_list .img.img_ab > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    box-sizing: border-box;
    object-fit: contain;
    object-position: 50% 50%;
    transform-origin: 50% 50%;
}

.product_list .img.img_ab > img.m8wl-card-image-normalized {
    transform:
        translate(var(--m8wl-image-x, 0%), var(--m8wl-image-y, 0%))
        scale(var(--m8wl-image-scale, 1)) !important;
    will-change: transform, opacity;
}

.product_list > .active .img.img_ab > .pd_img.m8wl-card-image-normalized,
.product_list > li:hover .img.img_ab > .pd_img.m8wl-card-image-normalized {
    transform:
        translate(var(--m8wl-image-x, 0%), var(--m8wl-image-y, 0%))
        scale(var(--m8wl-image-hover-scale, 1.02)) !important;
}

.product_list > .active .img.img_ab > .pd_bg.m8wl-card-image-normalized,
.product_list > li:hover .img.img_ab > .pd_bg.m8wl-card-image-normalized {
    transform:
        translate(var(--m8wl-image-x, 0%), var(--m8wl-image-y, 0%))
        scale(var(--m8wl-image-hover-scale, 1.02)) !important;
}

/* Keep badges and action icons above the clipped image stage. */
.product_list .wrap .off,
.product_list .wrap .icon_con {
    z-index: 4;
}

@media (max-width: 768px) {
    .product_list .img.img_ab {
        aspect-ratio: 4 / 3;
    }
}