/* Product thumbnail container */
.woocommerce-js ul.products li.product .astra-shop-thumbnail-wrap {
    position: relative;
}

/* Both images transition only through opacity */
.woocommerce-js ul.products li.product .astra-shop-thumbnail-wrap img {
    transition: opacity 0.5s ease;
    transform: none !important;
    transform-origin: center center;
}

/* Secondary image: permanently occupies the same area */
.woocommerce-js ul.products li.product .astra-shop-thumbnail-wrap img.show-on-hover {
    position: absolute;
    inset: 0 ;
    width: 100% ;
    height: 100%;
    margin: 0;
    object-fit: contain;
    opacity: 0 ;
    z-index: 2;
    pointer-events: none;    
}
/* Crossfade — desktop */
@media (hover: hover) {
    .woocommerce-js ul.products li.product:hover
    .astra-shop-thumbnail-wrap img:not(.show-on-hover) {
        opacity: 0;
    }

    .woocommerce-js ul.products li.product:hover
    .astra-shop-thumbnail-wrap img.show-on-hover {
        opacity: 1;
    }
}

/* Crossfade — touch devices */
@media (hover: none) and (pointer: coarse) {
    .woocommerce-js ul.products li.product:active
    .astra-shop-thumbnail-wrap img:not(.show-on-hover) {
        opacity: 0;
    }

    .woocommerce-js ul.products li.product:active
    .astra-shop-thumbnail-wrap img.show-on-hover {
        opacity: 1;
    }
}


/* handling the display of the cover on the left and summary on the right */

/* Single product: gallery left, summary right */
.single-product div.product {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    direction: rtl;
    align-items: flex-start;
    gap: 2%;
}

.single-product div.product .woocommerce-product-gallery {
    float: none;
    width: 49%;
    margin: 0;
    direction: rtl;
}

.single-product div.product .summary {
    float: none;
    width: 49%;
    margin: 0;
    direction: rtl;
}

/* Mobile: stack columns */
@media (max-width: 768px) {
    .single-product div.product {
        display: block;
    }

    .single-product div.product .woocommerce-product-gallery,
    .single-product div.product .summary {
        width: 100%;
    }
}