/* KF Native 0.1.1: native Woo gallery presentation only.
 * Keep every slide, thumbnail, link and Woo slider/zoom/variation handler intact.
 */
body.kfn-storefront.single-product .woocommerce-product-gallery {
  --kfn-gallery-thumb-size: 80px;
  --kfn-gallery-main-height: clamp(340px, 42vw, 620px);
  min-width: 0;
  max-width: 100%;
}

/* FlexSlider retains its native wrapper widths, transforms and slide positions. */
body.kfn-storefront.single-product .woocommerce-product-gallery .flex-viewport {
  height: var(--kfn-gallery-main-height) !important;
  max-height: var(--kfn-gallery-main-height);
}
body.kfn-storefront.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image > a {
  display: block;
  height: var(--kfn-gallery-main-height);
}
body.kfn-storefront.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img:not(.zoomImg) {
  display: block;
  width: 100% !important;
  height: var(--kfn-gallery-main-height) !important;
  max-height: var(--kfn-gallery-main-height);
  aspect-ratio: auto !important;
  object-fit: var(--kfn-image-fit, contain);
}

/* Never constrain the zoom overlay's native, JS-authored intrinsic dimensions. */
body.kfn-storefront.single-product .woocommerce-product-gallery img.zoomImg {
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}

/* One bounded, keyboard/touch-scrollable thumbnail row, regardless of image count. */
body.kfn-storefront.single-product .woocommerce-product-gallery .flex-control-thumbs {
  box-sizing: border-box;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: flex-start;
  gap: 8px;
  width: 100% !important;
  max-width: 100%;
  height: calc(var(--kfn-gallery-thumb-size) + 32px);
  max-height: calc(var(--kfn-gallery-thumb-size) + 32px);
  margin: 12px 0 0 !important;
  padding: 4px 0 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  list-style: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
body.kfn-storefront.single-product .woocommerce-product-gallery .flex-control-thumbs > li {
  float: none !important;
  clear: none !important;
  flex: 0 0 var(--kfn-gallery-thumb-size) !important;
  width: var(--kfn-gallery-thumb-size) !important;
  min-width: var(--kfn-gallery-thumb-size);
  max-width: var(--kfn-gallery-thumb-size);
  height: var(--kfn-gallery-thumb-size);
  margin: 0 !important;
  padding: 0;
  list-style: none;
  scroll-snap-align: start;
}
body.kfn-storefront.single-product .woocommerce-product-gallery .flex-control-thumbs > li > img {
  display: block;
  width: 100% !important;
  height: var(--kfn-gallery-thumb-size) !important;
  max-height: var(--kfn-gallery-thumb-size);
  aspect-ratio: 1 !important;
  object-fit: contain;
}

@media (max-width: 781px) {
  body.kfn-storefront.single-product .woocommerce-product-gallery {
    --kfn-gallery-thumb-size: 64px;
    --kfn-gallery-main-height: clamp(220px, 64vw, 300px);
    margin-bottom: 1.25rem;
  }
}
