/* Single-product gallery only. WooCommerce retains slides, touch and lightbox. */
body.mg-site.single-product .mg-product-media .woocommerce-product-gallery { max-width: 450px; margin-inline: auto !important; position: relative; }
body.mg-site.single-product .mg-product-media a.woocommerce-product-gallery__trigger { display: none; }
body.mg-site.single-product .mg-product-media .flex-viewport { aspect-ratio: 3 / 4; height: auto !important; background: var(--mg-warm, #F4EDE3); }
body.mg-site.single-product .mg-product-media .woocommerce-product-gallery__image > a { aspect-ratio: 3 / 4; display: block; }
body.mg-site.single-product .mg-product-media .woocommerce-product-gallery__image img:not(.zoomImg) { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
body.mg-site.single-product .mg-product-media .flex-control-thumbs { display: flex; gap: 8px; list-style: none; padding: 2px; margin: 12px 0 0 !important; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: thin; }
body.mg-site.single-product .mg-product-media .flex-control-thumbs li { list-style: none; flex: 0 0 calc((100% - 32px) / 5); width: auto !important; scroll-snap-align: start; }
body.mg-site.single-product .mg-product-media .flex-control-thumbs li::marker { content: ''; }
body.mg-site.single-product .mg-product-media .flex-control-thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; background: var(--mg-warm, #F4EDE3); border: 1px solid transparent; padding: 3px; opacity: .65; cursor: pointer; transition: opacity 200ms, border-color 200ms; }
body.mg-site.single-product .mg-product-media .flex-control-thumbs img:hover,
body.mg-site.single-product .mg-product-media .flex-control-thumbs img.flex-active { opacity: 1; border-color: #A48976; }
body.mg-site.single-product .mg-product-media .flex-direction-nav { list-style: none; padding: 0; margin: 0; }
body.mg-site.single-product .mg-product-media .flex-direction-nav li { list-style: none; }
/* Keep the 44px touch target; draw a smaller 36px visual button inside it. */
body.mg-site.single-product .mg-product-media .flex-direction-nav a { position: absolute; top: calc((100% - 124px) / 2); z-index: 4; display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #665044; font-size: 0; text-decoration: none; }
body.mg-site.single-product .mg-product-media .flex-direction-nav a::before { content: ''; position: absolute; inset: 4px; box-sizing: border-box; border: 1px solid #D8CCC1; border-radius: 50%; background: rgba(244,237,227,.88); transition: background-color 160ms, border-color 160ms; }
body.mg-site.single-product .mg-product-media .flex-direction-nav a::after { content: ''; position: absolute; top: 18px; left: 18px; box-sizing: border-box; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transition: color 160ms; }
body.mg-site.single-product .mg-product-media .flex-prev { left: 10px; }
body.mg-site.single-product .mg-product-media .flex-next { right: 10px; }
body.mg-site.single-product .mg-product-media .flex-prev::after { transform: translateX(2px) rotate(-135deg); }
body.mg-site.single-product .mg-product-media .flex-next::after { transform: translateX(-2px) rotate(45deg); }
@media (hover: hover) {
body.mg-site.single-product .mg-product-media .flex-direction-nav a:not(.flex-disabled):hover { color: #fff; }
body.mg-site.single-product .mg-product-media .flex-direction-nav a:not(.flex-disabled):hover::before { background: #665044; border-color: #665044; }
}
body.mg-site.single-product .mg-product-media .flex-direction-nav a.flex-disabled { opacity: .3; cursor: default; }
body.mg-site.single-product .mg-product-media .flex-control-thumbs img:focus-visible,
body.mg-site.single-product .mg-product-media .flex-direction-nav a:focus-visible { outline: 2px solid #665044; outline-offset: 2px; }
@media (max-width: 820px) { body.mg-site.single-product .mg-product-media .woocommerce-product-gallery { max-width: 420px; } }
@media (prefers-reduced-motion: reduce) { body.mg-site.single-product .mg-product-media .flex-control-thumbs img,
body.mg-site.single-product .mg-product-media .flex-direction-nav a::before,
body.mg-site.single-product .mg-product-media .flex-direction-nav a::after { transition: none; } }

/* Touch retains native page pinch and vertical scroll; FlexSlider owns swipes. */
body.mg-site.single-product .mg-product-media .flex-viewport { touch-action: pan-y pinch-zoom; }
body.mg-site.single-product .mg-product-media .woocommerce-product-gallery__image { overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  body.mg-site.single-product .mg-product-media .woocommerce-product-gallery__image img:not(.zoomImg) {
    transform-origin: center;
    transition: transform 240ms ease-out;
  }
  body.mg-site.single-product .mg-product-media .woocommerce-product-gallery__image:hover img:not(.zoomImg) { transform: scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  body.mg-site.single-product .mg-product-media .woocommerce-product-gallery__image img:not(.zoomImg) { transition: none; }
}