/* MANA – product gallery for MANA Builder: STRUCTURE ONLY.
   The look comes from the site: tokens (--color-*, --space-*, --img-radius…), global classes, the node's style and
   the document CSS. Visual defaults use :where() (zero specificity) so any site rule wins; structural rules
   (frame, aspect ratio, layout, scrolling) start with .mb-root. Same HTML / JS as the Elementor widgets. */

/* ---------- Settings → variables (written on the root by the component) ---------- */

:where(.mb-root) :where(.mb-mana-product-featured-image, .mb-mana-product-slider, .mb-mana-product-thumbnails, .mb-mana-product-stacked-gallery) {
	--mana-gallery-gap: var(--space-sm, 10px);
	--mana-thumb-gap: var(--space-xs, 8px);
	--mana-side-width: 90px;
	--mana-arrow-size: 2.5em;
	--mana-slide-peek: 0px;
	--mana-video-button-size: 4.5rem;
	min-width: 0;
}

.mb-root :is(.mb-mana-product-featured-image, .mb-mana-product-slider, .mb-mana-product-thumbnails, .mb-mana-product-stacked-gallery) { --mana-gallery-ratio: var(--mpg-ratio, 1 / 1); --mana-gallery-fit: var(--mpg-fit, cover); --mana-thumbs-visible: var(--mpg-visible, 5); --mana-gallery-columns: var(--mpg-cols, 1); }

@media (max-width: 1024px) {
.mb-root :is(.mb-mana-product-featured-image, .mb-mana-product-slider, .mb-mana-product-thumbnails, .mb-mana-product-stacked-gallery) { --mana-gallery-ratio: var(--mpg-ratio-t, var(--mpg-ratio, 1 / 1)); --mana-gallery-fit: var(--mpg-fit-t, var(--mpg-fit, cover)); --mana-thumbs-visible: var(--mpg-visible-t, var(--mpg-visible, 5)); --mana-gallery-columns: var(--mpg-cols-t, var(--mpg-cols, 1)); }
}

@media (max-width: 767px) {
.mb-root :is(.mb-mana-product-featured-image, .mb-mana-product-slider, .mb-mana-product-thumbnails, .mb-mana-product-stacked-gallery) { --mana-gallery-ratio: var(--mpg-ratio-m, var(--mpg-ratio-t, var(--mpg-ratio, 1 / 1))); --mana-gallery-fit: var(--mpg-fit-m, var(--mpg-fit-t, var(--mpg-fit, cover))); --mana-thumbs-visible: var(--mpg-visible-m, var(--mpg-visible-t, var(--mpg-visible, 5))); --mana-gallery-columns: var(--mpg-cols-m, var(--mpg-cols-t, var(--mpg-cols, 1))); }
}

/* ---------- Image frame ---------- */

.mb-root .mana-product-media {
	position: relative;
	min-width: 0;
	margin: 0;
	aspect-ratio: var(--mana-gallery-ratio) !important;
	overflow: hidden !important;
}

:where(.mb-root .mana-product-media) { border-radius: var(--img-radius, 0); }

.mb-root .mana-product-media > a,
.mb-root .mana-product-media > img,
.mb-root .mana-product-media > picture,
.mb-root .mana-product-media > a > img,
.mb-root .mana-product-media > a > picture,
.mb-root .mana-product-media picture > img,
.mb-root .mana-product-media > video,
.mb-root .mana-product-media > iframe {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0;
	border: 0;
}

.mb-root .mana-product-media img,
.mb-root .mana-product-media video {
	object-fit: var(--mana-gallery-fit) !important;
	object-position: center;
}

/* Zoom: mouse only; the script moves transform-origin to the pointer. */
@media (hover: hover) and (pointer: fine) {
	.mb-root [data-zoom="true"] .mana-product-media img,
	.mb-root .mana-product-media[data-zoom="true"] img {
		transform-origin: var(--mana-zoom-x, 50%) var(--mana-zoom-y, 50%);
		transition: transform 200ms ease;
	}

	.mb-root [data-zoom="true"] .mana-product-media:hover img,
	.mb-root .mana-product-media[data-zoom="true"]:hover img {
		transform: scale(var(--mana-zoom, 2));
		cursor: zoom-in;
	}
}

/* ---------- Icons & buttons ---------- */

.mb-root :is(.mana-gallery-lightbox-icon, .mana-gallery-lightbox-button, .mana-product-video-trigger, .mana-gallery-arrow) {
	position: absolute;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	line-height: 1;
}

.mb-root :is(.mana-gallery-lightbox-icon, .mana-gallery-lightbox-button) {
	top: var(--space-sm, 12px);
	inset-inline-end: var(--space-sm, 12px);
	width: 2.4em;
	height: 2.4em;
	z-index: 3;
}

:where(.mb-root) :where(.mana-gallery-lightbox-icon, .mana-gallery-lightbox-button) {
	background: transparent;
	color: var(--color-bg, #fff);
}

/* Controls never get a background of their own (theme / browser button styles); a site that wants one sets it
   in its CSS with a stronger selector. */
.mb-root :is(.mana-gallery-lightbox-icon, .mana-gallery-lightbox-button, .mana-gallery-arrow, .mana-thumb):is(*, :hover, :focus, :active) {
	background-color: transparent;
	box-shadow: none;
}

.mb-root .mana-gallery-lightbox-icon { pointer-events: none; }
.mb-root .mana-gallery-lightbox-button { cursor: pointer; }

.mb-root :is(.mana-gallery-lightbox-icon, .mana-gallery-lightbox-button, .mana-gallery-arrow) svg {
	display: block;
	width: 1.2em;
	height: 1.2em;
}

.mb-root .mana-product-video-trigger {
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: var(--mana-video-button-size);
	height: var(--mana-video-button-size);
	border-radius: 50%;
	cursor: pointer;
	z-index: 5;
}

:where(.mb-root .mana-product-video-trigger) {
	background: var(--color-bg, #fff);
	color: var(--color-text, #111);
	opacity: .85;
}

.mb-root .mana-product-video-trigger svg { width: 40%; height: 40%; }

.mb-root :is(.mana-product-video-trigger, .mana-gallery-lightbox-icon, .mana-gallery-lightbox-button, .mana-gallery-arrow)[hidden],
.mb-root .is-video-playing > :is(.mana-gallery-lightbox-icon, .mana-gallery-lightbox-button) { display: none !important; }

.mb-root .mana-gallery-arrow {
	width: var(--mana-arrow-size);
	height: var(--mana-arrow-size);
	cursor: pointer;
	z-index: 4;
}

:where(.mb-root .mana-gallery-arrow) {
	background: transparent;
	color: var(--color-text, inherit);
	border-radius: 50%;
}

/* Links that feed the lightbox – visually hidden. */
.mb-root .mana-gallery-lightbox-links {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
}

/* ---------- Slider ---------- */

.mb-root .mana-product-slider {
	position: relative;
	min-width: 0;
	max-width: 100%;
	direction: ltr;
}

.mb-root .mana-product-slider__track {
	display: flex;
	gap: var(--mana-gallery-gap);
	padding-inline: var(--mana-slide-peek);
	scroll-padding-inline: var(--mana-slide-peek);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	touch-action: pan-x pan-y;
}

.mb-root .mana-product-slider__track::-webkit-scrollbar { display: none; }

.mb-root .mana-product-slider__slide {
	flex: 0 0 calc(100% - (2 * var(--mana-slide-peek)));
	scroll-snap-align: center;
}

.mb-root .mana-product-slider > .mana-gallery-arrow { top: 50%; translate: 0 -50%; }
.mb-root .mana-product-slider > .mana-gallery-arrow--previous { left: var(--space-xs, 6px); }
.mb-root .mana-product-slider > .mana-gallery-arrow--next { right: var(--space-xs, 6px); }

/* ---------- Full gallery ---------- */

.mb-root .mana-stacked-gallery {
	display: grid;
	grid-template-columns: repeat(var(--mana-gallery-columns, 1), minmax(0, 1fr));
	gap: var(--mana-gallery-gap);
	min-width: 0;
	max-width: 100%;
}

.mb-root .mana-stacked-gallery[data-layout="masonry"] {
	display: block;
	columns: var(--mana-gallery-columns, 1);
	column-gap: var(--mana-gallery-gap);
}

.mb-root .mana-stacked-gallery[data-layout="masonry"] > .mana-stacked-gallery__item {
	break-inside: avoid;
	margin: 0 0 var(--mana-gallery-gap);
	aspect-ratio: auto !important;
}

.mb-root .mana-stacked-gallery[data-layout="masonry"] > .mana-stacked-gallery__item > a,
.mb-root .mana-stacked-gallery[data-layout="masonry"] > .mana-stacked-gallery__item img {
	height: auto !important;
}

.mb-root .mana-stacked-gallery[data-layout="masonry"] > .is-video-playing { aspect-ratio: 16 / 9 !important; }

.mb-root :is(.mana-gallery-arrow, .mana-thumb, .mana-gallery-lightbox-button, .mana-product-video-trigger):focus-visible {
	outline: 2px solid var(--color-primary, currentColor);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mb-root :is(.mana-thumbnails-gallery__track, .mana-product-slider__track) { scroll-behavior: auto !important; }
	.mb-root .mana-product-media img { transition: none !important; }
}