/* Shared card geometry; mirrored in admin_public and equality-checked by tests.
 * Size the image box BEFORE fitting/positioning its content.
 * Along either axis: painted start = position * (frame size - fitted size * zoom).
 * This uses every free pixel at zoom <= 1 and selects the focal crop above 1.
 */
.product-card__image > img.media-presentation,
.media-presentation-preview--card > img.media-presentation {
    position: absolute;
    display: block;
    left: var(--media-position-x, 50%);
    top: var(--media-position-y, 50%);
    width: calc(100% * var(--media-render-zoom, var(--media-zoom, 1)));
    height: calc(100% * var(--media-render-zoom, var(--media-zoom, 1)));
    max-width: none;
    max-height: none;
    object-position: var(--media-position-x, 50%) var(--media-position-y, 50%);
    transform: translate(calc(-1 * var(--media-position-x, 50%)), calc(-1 * var(--media-position-y, 50%)));
}
.product-card__image > img.media-presentation--contain,
.media-presentation-preview--card > img.media-presentation--contain { object-fit: contain; }
.product-card__image > img.media-presentation--cover,
.media-presentation-preview--card > img.media-presentation--cover { object-fit: cover; }
.product-card__image > img.media-presentation { transition: width .3s ease, height .3s ease; }
.product-card:hover .product-card__image > img.media-presentation {
    --media-render-zoom: var(--media-hover-zoom, var(--media-zoom, 1));
}
@media (prefers-reduced-motion: reduce) {
    .product-card__image > img.media-presentation { transition: none; }
}