/* Native PDP gallery (inc/product/gallery.php, assets/js/gallery.js).
   The stage is the full width of the gallery column. On a computer the gallery
   is sticky, so the stage height is capped to what fits under the header with
   the thumbnail strip below it; the photo is contained and centered inside. */

.mwp-wrap .mwp-gallery.mwp-gallery--native { max-width: none !important; justify-self: stretch !important; }

.mwg { --mwg-thumb: 88px; --mwg-gap: 10px; display: flex; flex-direction: column; gap: 12px; width: 100%; }

/* ---- Stage ---- */
.mwg__stage { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
@media (min-width: 1101px) {
	/* Square at the column width, but never taller than what fits under the
	   174px sticky header with the strip below (100cqw = the column width). */
	.mwg { container-type: inline-size; }
	.mwg__stage { aspect-ratio: auto; height: min(100cqw, calc(100vh - 174px - var(--mwg-thumb) - 56px)); min-height: 360px; }
}
.mwg__track {
	display: flex; width: 100%; height: 100%;
	overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
	scrollbar-width: none; -ms-overflow-style: none; outline: none;
}
.mwg__track::-webkit-scrollbar { display: none; }
.mwg__slide {
	flex: 0 0 100%; width: 100%; height: 100%; margin: 0;
	scroll-snap-align: start; scroll-snap-stop: always;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; cursor: zoom-in;
}
.mwg__slide img {
	width: 100%; height: 100%; object-fit: contain; display: block;
	user-select: none; -webkit-user-drag: none;
	transition: transform .15s ease-out; transform-origin: 50% 50%;
}
.mwg__slide.is-zoomed img { transition: none; }

/* ---- Stage controls ---- */
.mwg__nav, .mwg__full, .mwg__tnav {
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--mwp-border, rgba(20,20,22,.1)); background: rgba(255,255,255,.94);
	color: var(--mwp-fg, #141416); padding: 0; margin: 0; cursor: pointer; border-radius: 0;
	box-shadow: none; line-height: 1;
}
.mwg__nav svg, .mwg__full svg, .mwg__tnav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; }
.mwg__nav:hover, .mwg__full:hover, .mwg__tnav:hover { background: #fff; border-color: var(--mwp-fg, #141416); color: var(--mwp-fg, #141416); }
.mwg__nav:focus-visible, .mwg__full:focus-visible, .mwg__tnav:focus-visible, .mwg__thumb:focus-visible { outline: 2px solid var(--mwp-fg, #141416); outline-offset: 2px; }
.mwg__nav { position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; z-index: 3; opacity: 0; transition: opacity .15s; }
.mwg__nav--prev { left: 12px; }
.mwg__nav--next { right: 12px; }
.mwg__stage:hover .mwg__nav, .mwg__nav:focus-visible { opacity: 1; }
.mwg__nav[disabled] { opacity: 0 !important; pointer-events: none; }
@media (hover: none) { .mwg__nav { display: none; } }
.mwg__full { position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; z-index: 3; }
.mwg__count {
	position: absolute; left: 12px; bottom: 12px; z-index: 3; pointer-events: none;
	font-family: var(--mwp-mono, monospace); font-size: 11px; letter-spacing: 1px;
	color: var(--mwp-muted, rgba(20,20,22,.55)); background: rgba(255,255,255,.9); padding: 4px 7px;
}

/* ---- Thumbnail strip ---- */
.mwg__thumbs { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.mwg__strip {
	/* Only as wide as its thumbnails (centered by .mwg__thumbs); a long row fills
	   the width and scrolls. */
	flex: 0 1 auto; min-width: 0; display: flex; gap: var(--mwg-gap);
	overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
	scrollbar-width: none; -ms-overflow-style: none;
}
.mwg__strip::-webkit-scrollbar { display: none; }
.mwg__thumb {
	flex: 0 0 var(--mwg-thumb); width: var(--mwg-thumb); height: var(--mwg-thumb);
	padding: 4px; margin: 0; background: #fff; cursor: pointer; scroll-snap-align: start;
	border: 1px solid var(--mwp-border, rgba(20,20,22,.1)); border-radius: 0; box-shadow: none;
}
.mwg__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mwg__thumb:hover { border-color: rgba(20,20,22,.35); }
.mwg__thumb.is-active { border-color: var(--mwp-fg, #141416); }
.mwg__tnav { flex: 0 0 32px; width: 32px; height: var(--mwg-thumb); }
.mwg__tnav[hidden] { display: none; }
.mwg__tnav[disabled] { opacity: .35; cursor: default; }
@media (min-width: 1500px) { .mwg { --mwg-thumb: 100px; } }
/* Desktop: four thumbnails at a time, centered under the photo; the arrows page
   through the rest. Phones and tablets keep the full-width scrolling row. */
@media (min-width: 1101px) {
	.mwg__thumbs { justify-content: center; }
	/* As wide as its thumbnails up to four, so two or three sit centered too. */
	.mwg__strip { flex: 0 1 auto; width: auto; max-width: calc(4 * var(--mwg-thumb) + 3 * var(--mwg-gap)); scroll-snap-type: x mandatory; }
}
@media (max-width: 640px) { .mwg { --mwg-thumb: 64px; --mwg-gap: 8px; } .mwg__tnav { display: none !important; } }

/* ---- Fullscreen viewer ---- */
.mwg-lb { position: fixed; inset: 0; z-index: 100000; background: rgba(12,12,14,.96); display: flex; flex-direction: column; }
.mwg-lb[hidden] { display: none; }
.mwg-lb__track { flex: 1 1 auto; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mwg-lb__track::-webkit-scrollbar { display: none; }
.mwg-lb__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; padding: 56px 72px; margin: 0; }
.mwg-lb__slide img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; }
.mwg-lb__btn {
	position: absolute; display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; cursor: pointer; padding: 0; border-radius: 0;
}
.mwg-lb__btn:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.mwg-lb__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; }
.mwg-lb__close { top: 12px; right: 12px; }
.mwg-lb__prev { left: 12px; top: 50%; margin-top: -22px; }
.mwg-lb__next { right: 12px; top: 50%; margin-top: -22px; }
.mwg-lb__count { position: absolute; top: 24px; left: 20px; color: rgba(255,255,255,.7); font-family: var(--mwp-mono, monospace); font-size: 12px; letter-spacing: 1px; }
@media (max-width: 640px) { .mwg-lb__slide { padding: 56px 0; } .mwg-lb__prev, .mwg-lb__next { display: none; } }
body.mwg-lb-open { overflow: hidden; }