/**
* WizAtom ProductMainImage — v2 CSS
*
* PDP / QuickView hero image with:
* - Primary media slide (image OR video) with slide-switch display
* - Hover magnifier lens (desktop only, gated by container :hover)
* - Mobile swipe + dot indicators
* - Overlay slots for tags + wishlist (same pattern as WizAtom_ProductImage)
*
* Layout-only CSS lives on the widget (widgets/v2/WizProductMainImage/style.css);
* this file owns the atom surface — slides, images, magnifier, dots, overlays.
*/
/* ----------------------------------------------------------------
Container
---------------------------------------------------------------- */
.wiz-main-image {
--wiz-main-image-magnifier-size: 400px;
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
display: block;
}
.wiz-main-image__stage {
position: relative;
width: 100%;
height: 100%;
}
/* ----------------------------------------------------------------
Slides (image + video)
---------------------------------------------------------------- */
.wiz-main-image__slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Active slide flips to position:relative so it sits in normal flow inside
the stage — same contract images and videos have always relied on. The
base position:absolute is for inactive slides (stacked, hidden via inline
display:none). DO NOT change this back to absolute — image rendering
depends on the slide being in flow so the
inside it gets a measurable height to fill via height: 100%. */
.wiz-main-image__slide--active {
position: relative;
display: block !important;
}
.wiz-main-image__media {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
cursor: zoom-in;
}
.wiz-main-image__img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
user-select: none;
-webkit-user-drag: none;
}
/* When lightbox is disabled, no zoom-in cursor */
.wiz-main-image[data-context="preview"] .wiz-main-image__media,
.wiz-main-image__media:not(.glightbox) {
cursor: default;
}
/* ----------------------------------------------------------------
Video slide
Architecture mirrors the image slide exactly:
.wiz-main-image__video-wrap = block container in normal flow
(parallel to .wiz-main-image__media `` link for images)
.wiz-main-image__video = absolute-positioned media that fills
the wrap exactly via inset:0
(parallel to .wiz-main-image__img inside the link)
Why position:absolute on the