/* Product-image deployment overrides. The versioned filename prevents stale
   storefront CSS from hiding asynchronously injected PDP media. */
/* Height follows the width/height attributes (auto ratio): when max-width
   narrows a frame (148 px column at 360, 218 px at 768) the box stays square
   instead of keeping the profile height and showing empty contain bands. */
img.product-responsive-image[data-product-image] {
    width: var(--pi-desktop-width) !important;
    height: auto !important;
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 767px) {
    img.product-responsive-image[data-product-image] {
        width: var(--pi-mobile-width) !important;
    }
}

/* Category/search card: main and hover photo share one image frame. The rule
   above gives the .hidden frame a real size, so it is layered over the visible
   one instead of stacking below it. toggleImages() only swaps the classes. */
a.category-list-images-hover {
    position: relative;
}

a.category-list-images-hover > picture {
    display: block;
}

a.category-list-images-hover img.product-responsive-image.hidden {
    position: absolute;
    top: 0;
    left: 0;
}

.product-view .product-img-box #main_img_gal.owl-carousel {
    display: block;
}

.product-view .product-img-box #main_img_gal.owl-carousel > .item:not(:first-child) {
    display: none;
}

.product-view .product-no-image-zoom,
.product-view .product-no-image-zoom picture,
.product-view .product-no-image-zoom img[data-product-image="pdp_main"] {
    display: block;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* The main photo fills its frame; the generic profile width (360 px on
   mobile) must not shrink it. */
.product-view .product-no-image-zoom img[data-product-image="pdp_main"] {
    width: 100% !important;
    height: auto !important;
}

@media (max-width: 767px) {
    .product-view .product-no-image-zoom,
    .product-view .product-no-image-zoom picture,
    .product-view .product-no-image-zoom img[data-product-image="pdp_main"] {
        max-width: none;
    }
}

.cart-table img[data-product-image="cart_item"] {
    display: block;
    width: var(--pi-desktop-width) !important;
    height: var(--pi-desktop-height) !important;
    object-fit: contain;
}

.mini-products-list .product-image,
.mini-products-list .product-image picture,
.mini-products-list img[data-product-image="mini_cart"] {
    width: var(--pi-desktop-width);
    height: var(--pi-desktop-height);
    max-width: var(--pi-desktop-width);
    object-fit: contain;
}

.mini-products-list .product-details {
    margin-left: calc(var(--pi-desktop-width) + 10px);
}

@media (max-width: 767px) {
    .cart-table img[data-product-image="cart_item"] {
        width: var(--pi-mobile-width) !important;
        height: var(--pi-mobile-height) !important;
        max-width: 100%;
        aspect-ratio: 1 / 1;
    }

    .mini-products-list .product-image,
    .mini-products-list .product-image picture,
    .mini-products-list img[data-product-image="mini_cart"] {
        width: var(--pi-mobile-width);
        height: var(--pi-mobile-height);
        max-width: var(--pi-mobile-width);
    }

    .mini-products-list .product-details {
        margin-left: calc(var(--pi-mobile-width) + 10px);
    }
}