.product-zoom {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--color-soft, #f9fafb);
}

.product-zoom__image {
    display: block;
    width: 100%;
    height: 100%;
    transform: scale(1);
    transform-origin: center center;
    transition: transform 0.08s ease-out;
    will-change: transform;
}

.product-zoom.is-zooming {
    cursor: crosshair;
}

.product-zoom.is-zooming .product-zoom__image {
    transition: transform 0.04s linear;
}

@media (hover: none) {
    .product-zoom {
        cursor: default;
    }
}