/* ---- Woo gallery thumbs: make them flex, not floats ---- */
.woocommerce div.product .flex-control-thumbs{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 28px;   /* space above tabs */
  padding: 0;
}
.woocommerce div.product .flex-control-thumbs li{
  list-style: none;
  margin: 0;
  float: none;           /* kill floats that cause overlap */
}

/* Ensure the tabs always start below any media rows */
.woocommerce div.product .woocommerce-tabs{
  clear: both;
  position: relative;    /* create a stacking context below */
  z-index: 2;
}

/* Keep our custom variation-thumbs block tidy too (if you use it) */
.wc-variation-thumbs{ 
  clear: both;
  margin: 12px 0 28px;
  position: relative;
  z-index: 1;
}
.wc-variation-thumbs__grid{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* (Optional) cap thumbnail image height for neat rows */
.woocommerce div.product .flex-control-thumbs li img,
.wc-variation-thumb__img{
  display: block;
  height: auto;
  max-height: 84px;
  width: auto;
  max-width: 100%;
  object-fit: cover;
}

/* REMOVE any earlier rules that set max-height/overflow on:
   .woocommerce-product-gallery,
   .woocommerce-product-gallery__wrapper,
   .woocommerce-product-gallery__image
*/

/* ---- Cap only the actual image element ---- */
:root{
  --product-media-max-h-desktop: 560px;   /* tweak to taste */
  --product-media-max-h-tablet:  440px;
  --product-media-max-h-mobile:  320px;
}

.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery__image a img{
  display: block;
  max-height: var(--product-media-max-h-desktop);
  width: auto;              /* avoid stretching */
  max-width: 100%;
  height: auto;
  object-fit: contain;      /* letterbox inside its box */
  margin: 0 auto;
}

/* Optional: keep thumbnails tidy (doesn't affect variation swapping) */
.woocommerce div.product .flex-control-thumbs li img{
  max-height: 84px;
  width: auto;
  max-width: 100%;
  object-fit: cover;
}

/* Responsive caps */
@media (max-width: 980px){
  .woocommerce div.product .woocommerce-product-gallery__image img,
  .woocommerce div.product .woocommerce-product-gallery__image a img{
    max-height: var(--product-media-max-h-tablet);
  }
}
@media (max-width: 640px){
  .woocommerce div.product .woocommerce-product-gallery__image img,
  .woocommerce div.product .woocommerce-product-gallery__image a img{
    max-height: var(--product-media-max-h-mobile);
  }
}