/* xl - DESKTOP STYLES */
/* === EvoPeps Part G: Product Media Aspect-Ratio Fix ===
   Fixes "beige-square-in-box" letterboxing: product photos are square (1254x1254 or 500x500)
   but were rendered inside non-square widget boxes via object-fit:contain, leaving visible
   blank letterbox gaps (top/bottom on catalogue cards, left/right on the single product page).
   Fix: force the image containers to a 1:1 aspect ratio and use object-fit:cover so the
   (already-square) source photos fill their box edge-to-edge with zero cropping. */

/* Catalogue / related-products / upsell loop card images (Loop Grid widget 2447c04) */
.e-loop-item .elementor-element-2447c04 {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}
.e-loop-item .elementor-element-2447c04 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Catalogue media wrapper flush-fit (Part H): removes Elementor's auto-generated
   vertical padding on the outer media container so the square image runs flush
   from the card's rounded top edge straight to the white info section below,
   with no visible beige band above/below it. */
.e-loop-item .elementor-element-7f1a3c1 {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  --padding-top: 0px !important;
  --padding-bottom: 0px !important;
  overflow: hidden !important;
}

/* Single product page - main gallery image (Part I): the .ngp-main-box
   wrapper ships with its own 60px padding on all sides, which insets the
   square product photo inside a larger cream box, creating a visible
   "box inside a box" effect. Zeroing that padding lets the image run
   flush edge-to-edge inside the rounded gallery card. */
.ngp-main-box {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.ngp-main-box img.ngp-main-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Single product page - thumbnail strip */
.ngp-thumb {
  aspect-ratio: 1 / 1 !important;
}
.ngp-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}