/* Product images keep intrinsic proportions inside each theme's stable card frame. */
#products .st-product-card .st-product-media-wrap,
#products .st-product-card .st-product-img-wrap,
#products .product-card .product-media {
  background: var(--theme-surface-soft, #f4f5f7);
}
#products .st-product-card .st-product-img,
#products .product-card .product-image {
  object-fit: contain;
  object-position: center center;
}
#products .st-product-card [data-product-media-smart-fit="cover"] .st-product-img,
#products .product-card [data-product-media-smart-fit="cover"] .product-image {
  object-fit: cover;
}
#products .st-product-card [data-product-media-smart-fit="contain"] .st-product-img,
#products .product-card [data-product-media-smart-fit="contain"] .product-image {
  transform: none;
}

/* Product detail media shows the full image unless the merchant selects cover. */
#productDetails .product-main-media,
#productDetails button.product-thumbnail {
  background: var(--theme-surface-soft, #f5f3f5);
}
#productDetails .product-main-media > #productMainImage,
#productDetails button.product-thumbnail > img {
  object-fit: contain;
  object-position: center center;
}
/* Fill the frame border box so a portrait image cannot size itself taller. */
#productDetails .product-main-media > #productMainImage {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px) !important;
  height: calc(100% + 2px) !important;
  max-width: calc(100% + 2px) !important;
  max-height: calc(100% + 2px) !important;
}
html[data-customizer-image-fit="cover"] #productDetails .product-main-media > #productMainImage {
  object-fit: cover;
}