/**
 * Product grid: featured image with optional gallery image on hover.
 * Works with WooCommerce loops and Elementor “Products” (Classic skin).
 */

.sp-loop-product-thumb {
    position: relative;
    overflow: hidden;
    display: block;
    line-height: 0;
    background: #f5f5f5;
}

.sp-loop-product-thumb__primary {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
    transition: opacity 0.35s ease;
}

.sp-loop-product-thumb__hover {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Only devices with real hover (avoids sticky “stuck” hover on touch). */
@media (hover: hover) and (pointer: fine) {
    .sp-loop-product-thumb--has-hover:hover .sp-loop-product-thumb__hover {
        opacity: 1;
    }
}

/* Elementor / WooCommerce product cards: keep link focus visible */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link:focus-visible .sp-loop-product-thumb__hover,
.woocommerce ul.products li.product a.woocommerce-loop-product__link:focus-visible .sp-loop-product-thumb__hover {
    opacity: 1;
}