/* Green Pi Interactive City V6.32
   Catalog product image containment fix.
   Applies only to product catalog/archive cards. */

.gp-catalog-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden !important;
}

.gp-catalog-card__media{
  position:relative;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:230px !important;
  min-height:230px !important;
  max-height:230px !important;
  padding:16px !important;
  overflow:hidden !important;
  isolation:isolate;
  background:linear-gradient(145deg,#f9fcfd,#eef7f8) !important;
}

.gp-catalog-card__media img{
  display:block !important;
  position:static !important;
  inset:auto !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 auto !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  translate:none !important;
  scale:none !important;
  filter:none;
}

.gp-catalog-card__body{
  position:relative;
  z-index:2;
  flex:1 1 auto;
  width:100%;
  background:#fff;
}

/* Prevent very tall source images from visually crowding the card. */
.gp-catalog-card__media img[src$=".png"],
.gp-catalog-card__media img[src$=".webp"],
.gp-catalog-card__media img[src$=".jpg"],
.gp-catalog-card__media img[src$=".jpeg"]{
  contain:layout paint;
}

/* A subtle visual frame so different product image ratios still feel consistent. */
.gp-catalog-card__media::after{
  content:'';
  position:absolute;
  inset:12px;
  border:1px solid rgba(8,117,201,.045);
  border-radius:14px;
  pointer-events:none;
  z-index:2;
}

@media(max-width:1100px){
  .gp-catalog-card__media{
    height:220px !important;
    min-height:220px !important;
    max-height:220px !important;
  }
}

@media(max-width:782px){
  .gp-catalog-card__media{
    height:240px !important;
    min-height:240px !important;
    max-height:240px !important;
    padding:18px !important;
  }
}