/* Both views occupy the same canvas. The primary remains visible until decode succeeds. */
.pld-photo-pair { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; margin-bottom: 12px; isolation: isolate; }
.woocommerce ul.products li.product .pld-photo-pair > img { margin-bottom: 0; }
.pld-photo-pair > img:first-child { position: relative; z-index: 0; }
.pld-photo-pair > .pld-photo-secondary { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; pointer-events: none; object-fit: contain; background: #fff; transition: opacity 180ms ease; }
@media (hover: hover) and (pointer: fine) {
  .pld-photo-pair[data-photo-ready="true"]:hover > .pld-photo-secondary,
  a:focus-visible .pld-photo-pair[data-photo-ready="true"] > .pld-photo-secondary { opacity: 1 !important; }
}
body .woocommerce-product-gallery { container-type: inline-size; }
body .woocommerce-product-gallery .woocommerce-product-gallery__image img:not(.zoomImg) { width: 100%; max-width: 100cqw; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
/* Reserve the canvas before Flexslider measures its slides, including on resize. */
body .woocommerce-product-gallery .flex-viewport { height: 0 !important; padding-bottom: 100%; }
body .woocommerce-product-gallery .flex-viewport > .woocommerce-product-gallery__wrapper { position: absolute; top: 0; left: 0; }
body .woocommerce-product-gallery .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px !important; padding: 0; }
body .woocommerce-product-gallery .flex-control-thumbs li { float: none !important; flex: 0 0 74px; width: 74px !important; margin: 0 !important; }
body .woocommerce-product-gallery .flex-control-thumbs img { display: block; width: 74px; height: 74px; object-fit: contain; border: 2px solid transparent; border-radius: 4px; background: #fff; cursor: pointer; }
body .woocommerce-product-gallery .flex-control-thumbs img.flex-active { border-color: #193e50; }
body .woocommerce-product-gallery .flex-control-thumbs img:focus-visible { outline: 3px solid #a33b60; outline-offset: 3px; }
/* This studio photograph contains a complete chair, so the Story hero must not crop it. */
body .story-hero.pld-interior-banner .pld-interior-scene img { object-fit: contain; object-position: right center; }
@media (prefers-reduced-motion: reduce) { .pld-photo-pair .pld-photo-secondary { transition: none !important; } }

/* Square catalogue frames contain the complete photograph without stretching. */
body.woocommerce ul.products li.product a img { aspect-ratio: 1 / 1; object-fit: contain; padding: 0; border: 0; background: transparent; }