/* ==========================================================================
   InkluVisie — productfoto in A4-liggend kader (geen crop)
   ALLEEN de productpagina (single product gallery).
   Shop-grid, winkelmand, cart-drawer en checkout blijven ongewijzigd.
   Overschrijft de 1/1 + object-fit:cover regels uit inkluvisie-woo.css
   en de WooCommerce-CSS van Breakdance.
   ========================================================================== */

.woocommerce div.product {
  --iv-product-ratio: 1.4142 / 1;
}

/* ── Hoofdfoto ────────────────────────────────────────────────────────── */
/* LET OP: hier stond een `width: 100% !important` op de wrapper en de slides.
   FlexSlider (de gallery-slider van WooCommerce) zet daar zelf inline breedtes
   op — de wrapper krijgt bijv. width:400% en elke slide de breedte van de
   viewport. Ons !important overrulede die inline stijl, waardoor de slides niet
   naast elkaar pasten en onder elkaar kwamen te staan: bij een product met twee
   foto's zag je ze allebei, met een groot leeg vlak eronder.
   De breedtes laten we nu aan FlexSlider over. */

.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery__image a img,
.woocommerce div.product .woocommerce-product-gallery img.wp-post-image {
  aspect-ratio: var(--iv-product-ratio) !important;
  object-fit: contain !important;
  object-position: center !important;
  width: 100% !important;
  height: auto !important;
  background: #fff;
  /* geen arched top-radius meer: die sneed de bovenkant van de foto visueel af */
  border-radius: 18px !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
}

/* Flexslider-viewport mag niet naar vierkant klemmen */
.woocommerce div.product .flex-viewport,
.woocommerce div.product .woocommerce-product-gallery .flex-viewport {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

/* Zoom-overlay exact over de foto laten vallen */
.woocommerce div.product .woocommerce-product-gallery__image img.zoomImg {
  aspect-ratio: auto !important;
  object-fit: contain !important;
  border-radius: 18px !important;
}

/* ── Gallery-thumbnails onder de hoofdfoto ────────────────────────────── */
.woocommerce div.product .flex-control-thumbs img,
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li img {
  aspect-ratio: var(--iv-product-ratio) !important;
  object-fit: contain !important;
  object-position: center !important;
  width: 100% !important;
  height: auto !important;
  background: #fff;
}