/* One 4:5 stage throughout the catalog. Crops remove empty margins, never garment edges. */
.sac-product-media { --media-bg:#f5f5f3; display:block; position:relative; width:100%; aspect-ratio:4/5; overflow:hidden; background:var(--media-bg); isolation:isolate; }
.sac-media-view { position:absolute; inset:0; display:block; opacity:1; transition:opacity .24s ease; background:var(--media-bg); }
.sac-media-view--back { opacity:0; }
.sac-media-crop { position:absolute; display:block; overflow:hidden; }
.sac-product__image .sac-media-image, .woocommerce ul.products li.product a .sac-media-image, .sac-product-media .sac-media-image { position:absolute; max-width:none; margin:0; padding:0; border:0; border-radius:0; object-fit:fill; aspect-ratio:auto; transform:none; }
.sac-product-media--fallback > img { width:100%; height:100%; object-fit:contain; margin:0; padding:6%; }
.sac-media-hint { position:absolute; z-index:2; right:12px; bottom:12px; max-width:calc(100% - 24px); padding:6px 9px; color:#f5f5f3; background:#111d; font:600 9px/1.4 var(--body,Arial,sans-serif); letter-spacing:.07em; text-transform:uppercase; pointer-events:none; }
.sac-media-hint--back { display:none; }
@media (hover:hover) and (pointer:fine) {
  a:hover .sac-product-media--two-sided .sac-media-view--front { opacity:0; }
  a:hover .sac-product-media--two-sided .sac-media-view--back { opacity:1; }
  a:hover .sac-product-media--two-sided .sac-media-hint--front { display:none; }
  a:hover .sac-product-media--two-sided .sac-media-hint--back { display:inline; }
}
a:focus-visible .sac-product-media--two-sided .sac-media-view--front { opacity:0; }
a:focus-visible .sac-product-media--two-sided .sac-media-view--back { opacity:1; }
a:focus-visible .sac-product-media--two-sided .sac-media-hint--front { display:none; }
a:focus-visible .sac-product-media--two-sided .sac-media-hint--back { display:inline; }
@media (prefers-reduced-motion:reduce) { .sac-media-view { transition:none; } }
/* WooCommerce's zoom image is excluded: the actual slides retain the full product. */
.woocommerce div.product div.images .woocommerce-product-gallery__image > a > img { width:100%; height:auto; aspect-ratio:4/5; object-fit:contain; background:#f5f5f3; }
.woocommerce div.product div.images .flex-control-thumbs li img { width:100%; aspect-ratio:1; object-fit:contain; background:#f5f5f3; }