/**
 * swapimagesonhover - v1.0.0 - 2018-04-16
 * https://github.com/chigozieorunta/swapimagesonhover
 *
 * Copyright (c) 2018 Chigozie Orunta
 * Licensed MIT <https://github.com/chigozieorunta/swapimagesonhover/blob/master/LICENSE>
**/

/*.swim-container {*/
/*    display: block;*/
/*    position: relative;*/
/*}*/

/*.swim-container img {*/
/*    position: absolute;*/
/*    top: 0; left: 0;*/
/*}*/

/*.swim-container > img:first-child {*/
/*    opacity: 1;*/
/*    transition: all 0.7s;*/
/*    z-index: 100;*/
/*}*/

/*.swim-container:hover > img:first-child {*/
/*    opacity: 0;*/
/*    transition: all 0.7s;*/
/*}*/
/*.swim {*/
/*    transition: opacity 0.3s ease-in-out;*/
/*}*/

.product-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* optional square aspect */
    overflow: hidden;
}

.product-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.product-img.front {
    z-index: 1;
    opacity: 1;
    transform: scale(1);
}

.product-img.back {
    z-index: 2;
    opacity: 0;
    transform: scale(1.05);
    pointer-events: none;
}

/* Only apply hover effect if there's a .back image */
.product-image-wrapper.has-back:hover .front {
    opacity: 0;
    transform: scale(0.97);
}

.product-image-wrapper.has-back:hover .back {
    opacity: 1;
    transform: scale(1);
}