/*
 * WooCustom Elementor Product Image (Loop)
 *
 * Structural image sizing is intentionally scoped more strongly than
 * Elementor's generic `.elementor img { height: auto; max-width: 100%; }`
 * rule. object-fit/object-position only behave predictably when the replaced
 * element itself has a definite width AND height.
 */
.woocustom-loop-product-image {
    display: block;
    width: 100%;
    max-width: 100%;
    line-height: 0;
}

.woocustom-loop-product-image__link,
.woocustom-loop-product-image__media {
    display: block;
    width: 100%;
}

.woocustom-loop-product-image__link {
    line-height: 0;
}

.woocustom-loop-product-image__media {
    position: relative;
    overflow: hidden;
    height: 320px;
}

/*
 * Do not reduce this to a single-class selector. Elementor commonly ships a
 * generic `.elementor img { height:auto; max-width:100%; }` rule whose
 * specificity beats `.woocustom-loop-product-image__img` and collapses the
 * image back to its intrinsic aspect-ratio. That makes contain/cover and
 * object-position appear broken.
 *
 * Width/height are structural for this widget, so !important is safe here:
 * user-facing height is controlled on the media wrapper, not on the <img>.
 */
.woocustom-loop-product-image .woocustom-loop-product-image__img {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: center center;
    transform-origin: center center;
    transition-property: opacity, transform;
    transition-duration: .3s;
    transition-timing-function: ease;
    backface-visibility: hidden;
}

.woocustom-loop-product-image .woocustom-loop-product-image__img--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.woocustom-loop-product-image--has-hover:hover .woocustom-loop-product-image__img--primary,
.woocustom-loop-product-image--has-hover:focus-within .woocustom-loop-product-image__img--primary {
    opacity: 0;
}

.woocustom-loop-product-image--has-hover:hover .woocustom-loop-product-image__img--hover,
.woocustom-loop-product-image--has-hover:focus-within .woocustom-loop-product-image__img--hover {
    opacity: 1;
}