/* One media presentation, two existing adapters: native Woo gallery and core Gallery.
   Never replace Woo's track transform/width: its slider and variation updates own them. */
.sf-ui-gallery,
.wp-block-gallery.is-style-sf-media-slider{
  --sf-gallery-height:min(125vw,82svh);
  --sf-gallery-radius:var(--sf-ui-control-radius);
  --sf-gallery-surface:var(--sf-ui-surface-muted);
  position:relative;
  min-width:0;
  /* Reserve the initial slide before WooCommerce constructs FlexSlider. */
  min-height:var(--sf-gallery-height);
  background:var(--sf-gallery-surface);
}
/* Woo initially lays later slides on a second row, then floats the track.
   Keep that transient track inside the same viewport without hiding slides
   or changing the native slider's sizing/selection lifecycle. */
.woocommerce div.product .sf-ui-gallery{
  height:var(--sf-gallery-height);
  overflow:hidden;
}
.sf-ui-gallery--hero{--sf-gallery-radius:0;--sf-gallery-fit:cover}
.woocommerce div.product .sf-ui-gallery .woocommerce-product-gallery__wrapper{margin:0}
.woocommerce div.product .sf-ui-gallery .flex-viewport{min-height:var(--sf-gallery-height)}
.woocommerce div.product .sf-ui-gallery :is(.woocommerce-product-gallery__image,.woocommerce-product-gallery__image--placeholder){
  height:var(--sf-gallery-height);
  overflow:hidden;
  background:var(--sf-gallery-surface);
  border-radius:var(--sf-gallery-radius);
}
.woocommerce div.product .sf-ui-gallery .woocommerce-product-gallery__image>a{display:block;height:100%}
.woocommerce div.product .sf-ui-gallery :is(.woocommerce-product-gallery__image,.woocommerce-product-gallery__image--placeholder) img:not(.zoomImg){
  display:block;width:100%;height:100%;max-height:none;object-fit:var(--sf-gallery-fit,contain);
}
/* Compact navigation rail; native Woo still owns selection and image changes.
   The original image control requests inline zoom; no separate popup. */
.sf-ui-gallery-nav,
.woocommerce div.product div.sf-ui-gallery .flex-control-thumbs{
  --sf-gallery-thumb-size:54px;
  position:absolute;z-index:3;bottom:16px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px;width:max-content;
  max-width:min(504px,calc(100% - 40px));
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:none;scroll-padding-inline:6px;
  margin:0;padding:6px;list-style:none;
}
.sf-ui-gallery-nav::-webkit-scrollbar,
.woocommerce div.product div.sf-ui-gallery .flex-control-thumbs::-webkit-scrollbar{display:none}
.sf-ui-gallery-nav:has(> :only-child),
.woocommerce div.product div.sf-ui-gallery .flex-control-thumbs:has(> :only-child){display:none}
.woocommerce div.product div.sf-ui-gallery .flex-control-thumbs li{
  flex:0 0 var(--sf-gallery-thumb-size);float:none;
  width:var(--sf-gallery-thumb-size);min-width:var(--sf-gallery-thumb-size);
  height:var(--sf-gallery-thumb-size);margin:0;padding:3px;
  overflow:hidden;scroll-snap-align:center;
  border:1px solid transparent;border-radius:var(--sf-ui-pill);
}
.woocommerce div.product div.sf-ui-gallery .flex-control-thumbs li:has(img.flex-active){
  border-color:var(--sf-ui-glass-ink);
}
.woocommerce div.product div.sf-ui-gallery .flex-control-thumbs li img{
  display:block;width:100%;height:100%;object-fit:contain;
  border-radius:var(--sf-ui-pill);
  background:var(--sf-gallery-surface);opacity:1;cursor:pointer;
}
.woocommerce div.product div.sf-ui-gallery .flex-control-thumbs li img:is(.flex-active,:hover,:focus-visible){opacity:1}
.woocommerce div.product div.sf-ui-gallery .flex-control-thumbs li img:focus-visible{
  outline:2px solid var(--sf-ui-accent);outline-offset:-2px;
}
@media(min-width:701px){
  .sf-ui-gallery-nav,
  .woocommerce div.product div.sf-ui-gallery .flex-control-thumbs{--sf-gallery-thumb-size:56px}
}
/* Core block adapter uses native scrolling; no carousel library or autoplay. */
.wp-block-gallery.is-style-sf-media-slider{
  display:flex;flex-wrap:nowrap;gap:0;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:thin;border-radius:var(--sf-gallery-radius);
}
.wp-block-gallery.is-style-sf-media-slider>.wp-block-image{
  flex:0 0 100%;width:100%!important;max-width:none;margin:0!important;
  height:var(--sf-gallery-height);scroll-snap-align:start;
}
.wp-block-gallery.is-style-sf-media-slider>.wp-block-image>a{display:block;width:100%;height:100%}
.wp-block-gallery.is-style-sf-media-slider>.wp-block-image img{
  width:100%!important;height:100%!important;object-fit:contain!important;
}
.wp-block-gallery.is-style-sf-media-slider:focus-visible,
.sf-ui-gallery a:focus-visible{outline:2px solid var(--sf-ui-accent);outline-offset:-3px}
@media(prefers-reduced-motion:reduce){
  .sf-ui-gallery :is(.woocommerce-product-gallery__wrapper,.flex-viewport){transition-duration:0ms!important}
  .wp-block-gallery.is-style-sf-media-slider{scroll-behavior:auto}
}

/* Native Woo may still create its optional trigger; the image link is the control. */
.woocommerce div.product div.sf-ui-gallery .woocommerce-product-gallery__trigger{display:none}

/* Native scroll adapter: the original Woo image links remain the lightbox. */
.sf-ui-gallery-track,
.woocommerce div.product .sf-ui-gallery--scroll .woocommerce-product-gallery__wrapper{
  display:flex;flex-wrap:nowrap;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none;
}
.sf-ui-gallery-track::-webkit-scrollbar,
.woocommerce div.product .sf-ui-gallery--scroll .woocommerce-product-gallery__wrapper::-webkit-scrollbar{display:none}
.sf-ui-gallery-slide,
.woocommerce div.product .sf-ui-gallery--scroll .woocommerce-product-gallery__wrapper > :is(.woocommerce-product-gallery__image,.woocommerce-product-gallery__image--placeholder){
  flex:0 0 100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;
}
.sf-product-gallery-thumb.sf-ui-icon-button{flex:none;padding:0;width:48px;height:48px;overflow:hidden}
.sf-product-gallery-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* The same three preview IconButtons become true circles in the mobile
   vertical rail. Clip the original image inside its existing hit target;
   do not add a second thumbnail layer or change gallery navigation. */
@media(max-width:700px){
  body.single-product.sf-product-sheet-ready div.product .sf-ui-gallery .sf-product-gallery-thumb.sf-ui-icon-button{
    border-radius:50%;
    aspect-ratio:1;
  }
}
.sf-product-gallery-thumb[hidden]{display:none!important}
/* Centered mobile/tablet product photos. Woo's intrinsic
   image height must not undo the existing full-height gallery frame. */
@media(max-width:900px){
  body.single-product .sf-product-media .sf-ui-gallery .woocommerce-product-gallery__image > a img:not(.zoomImg){
    width:100%!important;height:100%!important;max-height:none;
    object-fit:cover!important;
    object-position:50% 50%;
  }
}
.sf-ui-gallery--scroll .woocommerce-product-gallery__image > a{cursor:zoom-in}
.sf-ui-gallery--scroll .woocommerce-product-gallery__image.is-zoomed > a{cursor:zoom-out}
.sf-ui-gallery--scroll .zoomImg{pointer-events:none}
.sf-product-gallery-count{
  position:absolute;z-index:4;bottom:20px;left:20px;font-size:12px;line-height:1.5;
  color:var(--sf-ui-ink);pointer-events:none;
}


/* Page sliders allow vertical gestures to continue down the document. */
[data-sf-gallery] .sf-ui-gallery-track{overscroll-behavior-y:auto}

/* One gallery track, with native responsive art direction. */
.sf-ui-gallery .woocommerce-product-gallery__image picture{display:block;width:100%;height:100%}
@media(max-width:900px){.sf-ui-gallery [data-sf-gallery-device="desktop"]{display:none!important}}
@media(min-width:901px){.sf-ui-gallery [data-sf-gallery-device="mobile"]{display:none!important}}

.sf-ui-gallery-nav[hidden],.sf-product-gallery-arrows[hidden]{display:none!important}