/* Munchkins Shirt Preview – frontend */
.msp-stage { position: relative; margin: 0 0 1em; }
.msp-stage[hidden], .msp-sides[hidden], .msp-return[hidden] { display: none !important; }
.msp-canvas { position: relative; line-height: 0; overflow: hidden; }
.msp-stage img.msp-blank {
	display: block; width: 100%; height: auto; max-width: none; margin: 0; padding: 0;
	border: 0; box-shadow: none; border-radius: 0;
}
.msp-stage img.msp-overlay {
	position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;
	max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; border-radius: 0;
	object-fit: contain; object-position: 50% 50%; pointer-events: none; z-index: 2;
}
.msp-stage img.msp-overlay[hidden] { display: none !important; }
.msp-print { position: absolute; pointer-events: none; z-index: 1; }
.msp-stage img.msp-design {
	position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;
	max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; border-radius: 0;
	object-fit: contain; object-position: 50% 0;
}
.msp-stage.msp-align-center img.msp-design { object-position: 50% 50%; }
.msp-outline .msp-print { outline: 2px dashed rgba(255, 0, 128, .9); background: rgba(255, 0, 128, .08); }

.msp-sides { display: flex; justify-content: center; gap: .5em; margin-top: .75em; line-height: normal; }
.msp-stage .msp-side {
	appearance: none; cursor: pointer; padding: .45em 1.2em; border-radius: 999px;
	border: 1px solid currentColor; background: transparent; color: inherit;
	font: inherit; font-size: .9em; line-height: 1.2; opacity: .7;
}
.msp-stage .msp-side.is-active { opacity: 1; background: #222; border-color: #222; color: #fff; }
.msp-stage .msp-side:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }

.msp-return {
	position: absolute; top: .75em; left: .75em; z-index: 10; cursor: pointer;
	padding: .35em .8em; border-radius: 999px; border: 0; font-size: .85em; line-height: 1.2;
	background: rgba(0, 0, 0, .7); color: #fff;
}

/* While the preview is showing, park the main image area (kept measurable so FlexSlider/zoom don't break). */
.woocommerce-product-gallery.msp-active > .flex-viewport,
.woocommerce-product-gallery.msp-active > .woocommerce-product-gallery__wrapper,
.msp-generic.msp-active > :not(.msp-stage):not(.msp-return) {
	position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important;
	height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
	overflow: hidden !important; visibility: hidden !important; pointer-events: none !important;
}
.woocommerce-product-gallery.msp-active > .woocommerce-product-gallery__trigger { display: none !important; }
.msp-generic { position: relative; }