/* Product image sizing: keep every product image inside a stable frame. */
.product-media,
.product-media > a {
    display: block;
}

.product-media > a {
    aspect-ratio: 300 / 338;
    overflow: hidden;
    background: #fff;
}

.product-media > a > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Product listing and home-page cards. */
.product-list .product-media > a {
    aspect-ratio: 330 / 338;
}

.product-simple .product-media > a,
.product-widget .product-media > a,
.product-cart .product-media > a {
    aspect-ratio: 300 / 338;
}

/* Product detail gallery. */
.product-gallery .product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #fff;
}

.product-gallery .product-image > img:not(.zoomImg) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.product-gallery .product-image > img.zoomImg {
    max-width: none !important;
    max-height: none !important;
}

.product-thumbs .product-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #fff;
}

.product-thumbs .product-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Compact product images in cart, wishlist and comparison tables. */
.product-thumbnail figure,
.compare-product .product-media {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
}

.product-thumbnail figure {
    width: 84px;
    height: 94px;
}

.product-thumbnail figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.compare-product .product-media {
    width: 228px;
    height: 257px;
    max-width: 100%;
}

.compare-product .product-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-nav-popup img {
    width: 110px;
    height: 110px;
    object-fit: contain;
}

@media (max-width: 767px) {
    .product-gallery .product-image {
        aspect-ratio: 1 / 1;
    }

    .compare-product .product-media {
        width: 180px;
        height: 203px;
    }
}