/* Use the same contained photo area in both product-page layouts. */
body.single-product {
  --wg-product-photo-max: 560px;
  --wg-product-photo-padding: clamp(20px, 3vw, 32px);
}
body.single-product :is(.wg-product-page, .wg-sprat-page) .gallery {
  width: 100%;
  max-width: var(--wg-product-photo-max);
  min-width: 0;
  justify-self: center;
}
body.single-product :is(.wg-product-page, .wg-sprat-page) .main-product-image {
  width: 100%;
  aspect-ratio: 1;
}
body.single-product :is(.wg-product-page, .wg-sprat-page) .main-product-image > button {
  box-sizing: border-box;
  padding: var(--wg-product-photo-padding);
}
body.single-product :is(.wg-product-page, .wg-sprat-page) .main-product-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}
body.single-product .woocommerce div.product div.woocommerce-product-gallery {
  max-width: var(--wg-product-photo-max);
}
body.single-product .woocommerce div.product .woocommerce-product-gallery__image > a {
  display: block;
}
/* Leave WooCommerce's full-resolution hover zoom image untouched. */
body.single-product .woocommerce div.product :is(.woocommerce-product-gallery__image, .woocommerce-product-gallery__image--placeholder) img:not(.zoomImg) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  max-width: 100%;
  padding: var(--wg-product-photo-padding);
  object-fit: contain;
  object-position: center;
}
body.single-product :is(.wg-product-page, .wg-sprat-page) .thumbnails,
body.single-product .woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body.single-product :is(.wg-product-page, .wg-sprat-page) .thumbnail,
body.single-product .woocommerce div.product div.images .flex-control-thumbs li {
  box-sizing: border-box;
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  margin: 0;
  float: none;
}
body.single-product :is(.wg-product-page, .wg-sprat-page) .thumbnail {
  padding: 6px;
}
body.single-product :is(.wg-product-page, .wg-sprat-page) .thumbnail img,
body.single-product .woocommerce div.product div.images .flex-control-thumbs img {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
body.single-product .woocommerce div.product div.images .flex-control-thumbs img {
  padding: 6px;
}