/* ZHANZHENG Product Image Fit V1
   Purpose: show the complete product instead of cropping it.
   Loaded only on Products catalog and Product detail pages. */

/* Products catalog cards
   Keep the full product visible, but let catalog images use the card area more fully.
   The stronger selector also keeps mobile rules consistent without touching other modules. */
.catalog-card-v39 .catalog-image-v36 {
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.catalog-card-v39 .catalog-image-v36 img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain !important;
  object-position: center !important;
  display: block;
  transform: scale(1.08);
  transform-origin: center center;
}

/* Product detail main image */
.zzpd-main-image {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.zzpd-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
}

/* Product detail thumbnails: also avoid cropping product edges */
.zzpd-thumbs button {
  background: #fff;
}
.zzpd-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center !important;
  display: block;
}

/* Related products on detail page */
.zzpd-related-grid img {
  object-fit: contain !important;
  object-position: center !important;
  background: #fff;
}

/* Keep the desktop hero balanced while showing the full product. */
@media (min-width: 901px) {
  .zzpd-main-image {
    aspect-ratio: 1.38/1;
  }
}

/* Mobile keeps the existing responsive proportions; only image fitting changes. */
@media (max-width: 900px) {
  .zzpd-main-image {
    background: #fff;
  }
}