/* Ileana Product Image Fit 1.3.3 - opt-in only; None is completely unchanged. */
/* Standard WooCommerce grids. */
.woocommerce ul.products li.product.ileana-fit-small,
.woocommerce ul.products li.product.ileana-fit-medium,
.woocommerce ul.products li.product.ileana-fit-large,
/* Elementor Loop Grid product wrappers and image widgets. */
.e-loop-item.ileana-fit-small,
.e-loop-item.ileana-fit-medium,
.e-loop-item.ileana-fit-large,
.ileana-elementor-fit.ileana-fit-small,
.ileana-elementor-fit.ileana-fit-medium,
.ileana-elementor-fit.ileana-fit-large { --ileana-padding: 9%; }
.woocommerce ul.products li.product.ileana-fit-small,
.e-loop-item.ileana-fit-small,
.ileana-elementor-fit.ileana-fit-small { --ileana-padding: 17%; }
.woocommerce ul.products li.product.ileana-fit-medium,
.e-loop-item.ileana-fit-medium,
.ileana-elementor-fit.ileana-fit-medium { --ileana-padding: 9%; }
.woocommerce ul.products li.product.ileana-fit-large,
.e-loop-item.ileana-fit-large,
.ileana-elementor-fit.ileana-fit-large { --ileana-padding: 2%; }

/* Square canvas from a regular <img>, without changing the source image. */
.woocommerce ul.products li.product[class*="ileana-fit-"] img.wp-post-image,
.woocommerce ul.products li.product[class*="ileana-fit-"] img.attachment-woocommerce_thumbnail,
.e-loop-item[class*="ileana-fit-"] .elementor-widget-theme-post-featured-image .elementor-widget-container img,
.e-loop-item[class*="ileana-fit-"] .elementor-widget-image .elementor-widget-container img,
.ileana-elementor-fit .elementor-widget-container img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    padding: var(--ileana-padding);
    object-fit: contain !important;
    object-position: center;
    background-color: #fff;
    max-width: 100%;
}

/* 1.2.0: clip zoom/hover frames inside the square tile.
   Keep Elementor's existing transition and hover styling intact. */
.e-loop-item[class*="ileana-fit-"] .elementor-widget-image .elementor-widget-container,
.e-loop-item[class*="ileana-fit-"] .elementor-widget-theme-post-featured-image .elementor-widget-container,
.ileana-elementor-fit .elementor-widget-container {
    overflow: hidden;
    background: #fff;
}
.e-loop-item[class*="ileana-fit-"] .elementor-widget-image .elementor-widget-container > a,
.e-loop-item[class*="ileana-fit-"] .elementor-widget-theme-post-featured-image .elementor-widget-container > a,
.ileana-elementor-fit .elementor-widget-container > a {
    display: block;
    overflow: hidden;
    background: #fff;
}
/* Some Elementor effects apply transforms on the image itself;
   enforce a painted white square in both normal and hover states. */
.e-loop-item[class*="ileana-fit-"] .elementor-widget-image .elementor-widget-container img,
.e-loop-item[class*="ileana-fit-"] .elementor-widget-theme-post-featured-image .elementor-widget-container img,
.ileana-elementor-fit .elementor-widget-container img {
    background-color: #fff !important;
    backface-visibility: hidden;
}

/* 1.3.3: Secondary image uses the same visual frame and padding as primary. */
.ileana-hover-enabled .ileana-hover-stage {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: #fff;
    isolation: isolate;
}
.ileana-hover-enabled .ileana-hover-stage > img.ileana-hover-secondary {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: block;
    opacity: 0;
    pointer-events: none;
    object-fit: contain !important;
    object-position: center;
    box-sizing: border-box;
    padding: var(--ileana-padding, 0px);
    background-color: #fff;
    transition: opacity 600ms ease-in-out;
    z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
    .ileana-hover-enabled .ileana-hover-stage:hover > img.ileana-hover-secondary,
    .ileana-hover-enabled:hover .ileana-hover-stage > img.ileana-hover-secondary {
        opacity: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ileana-hover-enabled .ileana-hover-stage > img.ileana-hover-secondary { transition: none; }
}

/* Match the primary image footprint even when Elementor animates images. */
.ileana-hover-enabled .ileana-hover-stage > img.ileana-hover-secondary {
    max-width: none !important;
    transform-origin: center center;
}