/* Product Gallery module stylesheet — isolated under .product-gallery, no global selectors */

.product-gallery {
	width: 100%;
	margin: 0 0 20px 0;
}

.product-gallery,
.product-gallery *,
.product-gallery *::before,
.product-gallery *::after {
	box-sizing: border-box;
}

.product-gallery h3 {
	margin: 0 0 15px 0;
}

.product-gallery__thumbs {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0 0 4px 0;
	overflow: hidden;
}

.product-gallery__thumb {
	position: relative;
	flex: 0 0 auto;
	display: block;
	width: 110px;
	height: 110px;
	line-height: 0;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	background: #f2f2f2;
}

.product-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Toggled by product_gallery.js after measuring how many 110px thumbnails actually fit
   in the current container width — items past that count are hidden (but stay in the DOM
   so Magnific Popup's gallery still covers every image/video for prev/next).
   !important is required here: .product-gallery__thumb--video (declared below, same
   specificity) also sets `display`, and being a video thumbnail must never be able to win
   over "this item is hidden" — without it, any hidden video thumbnail stayed visible
   (the exact bug this rule exists to prevent). */
.product-gallery__thumb--hidden {
	display: none !important;
}

.product-gallery__thumb--video {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #222222;
}

/* When a real preview image was resolved (YouTube/Dailymotion/Vimeo thumbnail, or the
   browser's own decoded first frame for an uploaded video), it sits behind the play icon
   rather than in normal flex flow, so the icon stays centered either way. */
.product-gallery__thumb--video img,
.product-gallery__thumb--video video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}

.product-gallery__play-icon {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Appended by product_gallery.js onto exactly one thumbnail (a clone of the hidden template
   below) — its mere presence in a thumbnail is what shows it, so there is never more than one. */
.product-gallery__overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: rgba(0, 0, 0, 0.65);
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}

/* The single source element product_gallery.js clones from — never shown itself. */
.product-gallery__overlay-template {
	display: none;
}

/* Popup content centering — scoped to `.mfp-product-gallery` (set via Magnific Popup's
   `mainClass` option in product_gallery.js) rather than the bare `.mfp-*` classes, since
   Magnific Popup's overlay DOM is a single shared/global instance reused by every popup on
   the page, including the theme's native product-thumbnail lightbox — unscoped rules here
   would leak into that unrelated popup too. */
.mfp-product-gallery .product-gallery__popup-media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

.mfp-product-gallery .product-gallery__popup-media video,
.mfp-product-gallery .product-gallery__popup-media iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 60vh;
	max-height: 80vh;
	border: none;
}

.mfp-product-gallery .mfp-figure {
	text-align: center;
}

.mfp-product-gallery img.mfp-img {
	max-height: 85vh;
	margin: 0 auto;
}

.product_gallery_shortcode {
    display: block;
    float: left;
    width: 100%;
    padding: 20px;
    border: 1px solid #dddddd;
    margin: 20px 0;
}
.product_gallery{
	margin-bottom: 0;
}