/* Photo3s WooCommerce integration styles
   Purpose: Align S3-backed Photo3s images with native WooCommerce behavior while
   preserving original aspect ratio in the primary image and using square thumbs.
   Adjustable via the `photo3s_enable_woocommerce_styles` filter.
*/

/* Primary (active) product image: allow native aspect ratio */
.woocommerce div.product div.images .woocommerce-product-gallery__image.flex-active-slide a img[src*='photo3s-prod-'] {
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

/* Square thumbnails for gallery navigation */
.woocommerce div.product div.images .flex-control-thumbs li img[src*='photo3s-prod-'] {
  aspect-ratio: 1 / 1 !important;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Non-active slides may still inherit square container logic; ensure layout stability */
.woocommerce div.product div.images .woocommerce-product-gallery__image[data-thumb*='photo3s-prod-']:not(.flex-active-slide) a,
.woocommerce div.product div.images .woocommerce-product-gallery__image[data-thumb*='photo3s-prod-']:not(.flex-active-slide) img {
  width: 100%;
}

@supports not (aspect-ratio: 1 / 1) {
  .woocommerce div.product div.images .flex-control-thumbs li img[src*='photo3s-prod-'] {
    position: relative;
    overflow: hidden;
  }
  .woocommerce div.product div.images .flex-control-thumbs li img[src*='photo3s-prod-']::before {
    content: "";
    display: block;
    padding-top: 100%;
  }
}