/* Force product images to show without cropping */
.product-item img,
.topbar-product-card img,
.product-image,
img.product-image,
.product-item .product-image,
.topbar-product-card .product-image {
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-position: center !important;
}

/* Fix container heights and remove grey background. Default 250px so product images (e.g. "You may also like") are not tiny.
   When a block has a fixed height set in settings, the block's scoped CSS (with data-block-id) overrides this.
   Brand logo blocks reuse .topbar-product-card + .product-image-container but must NOT get 250px — that caused huge gaps on mobile. */
.product-item .position-relative,
.topbar-product-card .position-relative:not(.brand-img-wrap),
.product-image-container:not(.brand-img-wrap) {
    height: 250px !important;
    min-height: 250px !important;
    max-height: none !important;
    background-color: transparent !important;
}

/* ProductList block: default 250px when no custom height. When block has fixed height set, productsList.blade.php injects
   rules with data-block-id that override (no min-height 250px there). */
section[data-block-type="product_list"] .topbar-product-card .product-image-container,
section[data-block-type="product_list"] .topbar-product-card .position-relative.product-image-container,
section[data-block-type="product_list"] .product-image-container {
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
}

/* Category / search with filters: same default cell height as Product List (block inline CSS can override per settings) */
section[data-block-type="productswithfilters"] .topbar-product-card .product-image-container,
section[data-block-type="productswithfilters"] .topbar-product-card .position-relative.product-image-container,
section[data-block-type="productswithfilters"] .product-image-container {
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
}

/* Override any inline styles */
.product-item img[style*="object-fit"],
.topbar-product-card img[style*="object-fit"],
.product-image[style*="object-fit"] {
    object-fit: contain !important;
}

/* Override any width/height inline styles */
.product-item img[style*="width"],
.product-item img[style*="height"],
.topbar-product-card img[style*="width"],
.topbar-product-card img[style*="height"] {
    width: auto !important;
    height: auto !important;
}

/* Remove any grey backgrounds from product containers */
.product-item,
.topbar-product-card,
.product-item .position-relative,
.topbar-product-card .position-relative:not(.brand-img-wrap),
.product-item .product-image-container,
.topbar-product-card .product-image-container:not(.brand-img-wrap),
.brand-img-wrap,
.topbar-product-card .brand-img-wrap {
    background-color: transparent !important;
}

/* Quick view modal: global .product-view-img { height: 660px } and 250px containers must not apply — causes vertical stretch on iPhone */
#quickViewModel .product-image-container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}
#quickViewModel .carousel-inner,
#quickViewModel .carousel-item {
    min-height: 0 !important;
}
#quickViewModel .quickview-product-view-img,
#quickViewModel .product-view-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 75vh !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Product detail page: main image max-width 100%, no stretching */
.product-detail-main-image,
.productMain .thumbnail-container img,
.productMain .product-detail-main-image-wrap img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
}
.productMain .thumbnail-container.product-detail-main-image-wrap {
    display: flex !important;
    align-items: center;
    justify-content: center;
}