/* Canonical shared gallery: stage, frame, controls and mobile shell.
 * Product-specific adapters may set background colour only.
 */
/* Stable stage for the site's existing Woo Variation Gallery.
 * No image URLs, per-image rules, thumbnail sizing, transforms or new scripts.
 * !important on stage height overrides the gallery's inline adaptive height.
 * Leave generated zoom overlays to the existing gallery extension.
 */
body.mdx-product-page { --mdx-gallery-stage-height:clamp(360px,42vw,560px); }
body.mdx-product-page .woo-variation-gallery-wrapper { min-height:0 !important; min-width:0 !important; }
body.mdx-product-page .woo-variation-gallery-slider .slick-list,
body.mdx-product-page .woo-variation-gallery-slider .wvg-single-gallery-image-container {
 height:var(--mdx-gallery-stage-height) !important;
 min-height:0 !important;
 max-height:var(--mdx-gallery-stage-height);
}
body.mdx-product-page .woo-variation-gallery-slider .wvg-single-gallery-image-container {
 display:flex;
 align-items:center;
 justify-content:center;
 background:#f3f6f8;
}
body.mdx-product-page .woo-variation-gallery-slider .wvg-single-gallery-image-container img:not(.zoomImg) {
 display:block;
 width:100% !important;
 height:100% !important;
 max-width:100% !important;
 max-height:100% !important;
 object-fit:contain !important;
 object-position:center;
}
@media(max-width:767px) {
 body.mdx-product-page { --mdx-gallery-stage-height:clamp(260px,92vw,400px); }
}

/* A continuous rim belongs to the persistent stage, not the changing photo.
 * Keep Slick's tracks, slide widths, thumbnail visibility and transforms intact.
 * White pixels within an original product photo remain white.
 */
body.mdx-product-page .woo-variation-gallery-slider-wrapper {
 box-sizing:border-box; width:100% !important; min-width:0;
 height:calc(var(--mdx-gallery-stage-height) + 24px);
 background:#f3f6f8; border:12px solid #f3f6f8;
}
body.mdx-product-page .woo-variation-gallery-slider {
 height:var(--mdx-gallery-stage-height); min-width:0; background:#f3f6f8;
}
body.mdx-product-page .woo-variation-gallery-slider .slick-list {
 background:#f3f6f8;
}


/* v0.11.1: approved native controls, shared by all opted-in product designs.
 * Icons and controls only: gallery/image geometry and native handlers unchanged. */
body.mdx-product-page .woo-variation-product-gallery .dashicons,
body.mdx-product-page .woo-variation-product-gallery .dashicons::before {
  font-family: dashicons !important;
}
body.mdx-product-page .woo-variation-product-gallery :is(.woo-variation-gallery-trigger,.wvg-slider-prev-arrow,.wvg-slider-next-arrow,.wvg-thumbnail-prev-arrow,.wvg-thumbnail-next-arrow) {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  line-height: 44px;
  border: 1px solid rgba(74,85,104,.22);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #334155;
  opacity: 1;
  box-shadow: 0 1px 5px rgba(0,0,0,.12);
  cursor: pointer;
}
body.mdx-product-page .woo-variation-product-gallery :is(.woo-variation-gallery-trigger,.wvg-slider-prev-arrow,.wvg-slider-next-arrow,.wvg-thumbnail-prev-arrow,.wvg-thumbnail-next-arrow):hover {
  background: #fff;
  color: #111827;
}
body.mdx-product-page .woo-variation-product-gallery :is(.woo-variation-gallery-trigger,.wvg-slider-prev-arrow,.wvg-slider-next-arrow,.wvg-thumbnail-prev-arrow,.wvg-thumbnail-next-arrow):focus-visible {
  outline: 2px solid #475569;
  outline-offset: 2px;
}
body.mdx-product-page .woo-variation-product-gallery .woo-variation-gallery-trigger .dashicons {
  width: 22px;
  height: 22px;
  font-size: 22px;
  line-height: 1;
}
body.mdx-product-page .woo-variation-product-gallery .woo-variation-gallery-trigger .dashicons-search::before {
  content: "\f211"; /* Native Dashicons editor-expand. */
}
body.mdx-product-page .woo-variation-product-gallery :is(.wvg-slider-prev-arrow,.wvg-slider-next-arrow,.wvg-thumbnail-prev-arrow,.wvg-thumbnail-next-arrow) {
  top: 50%;
  margin-top: -22px;
}
body.mdx-product-page .woo-variation-product-gallery :is(.wvg-slider-prev-arrow,.wvg-slider-next-arrow,.wvg-thumbnail-prev-arrow,.wvg-thumbnail-next-arrow)::before {
  font-size: 22px;
  line-height: inherit;
  color: currentColor;
}
body.mdx-product-page .woo-variation-product-gallery :is(.wvg-slider-prev-arrow,.wvg-thumbnail-prev-arrow) {
  left: 8px;
}
body.mdx-product-page .woo-variation-product-gallery :is(.wvg-slider-next-arrow,.wvg-thumbnail-next-arrow) {
  right: 8px;
}


/* Shared mobile shell. The gallery extension otherwise emits 320px at <=480px
 * and 720px at <=768px, without centering the outer block. Own this geometry
 * here for every opted-in product; never change Slick track/slide transforms.
 */
@media(max-width:767px) {
 body.mdx-product-page .woo-variation-product-gallery {
  display:block !important; float:none !important;
  box-sizing:border-box; width:100% !important; max-width:100% !important;
  min-width:0; margin-inline:auto !important;
 }
 body.mdx-product-page .woo-variation-gallery-wrapper,
 body.mdx-product-page .woo-variation-gallery-container {
  box-sizing:border-box; width:100%; max-width:100%; min-width:0;
  margin-inline:auto;
 }
 body.mdx-product-page .woo-variation-gallery-thumbnail-wrapper {
  box-sizing:border-box; max-width:100%; min-width:0;
  margin-inline:auto;
 }
}