/* MANA – product gallery widgets */

:where(.elementor-widget-mana-product-featured-image, .elementor-widget-mana-product-slider, .elementor-widget-mana-product-thumbnails, .elementor-widget-mana-product-stacked-gallery) {
	--mana-gallery-ratio: 1 / 1;
	--mana-gallery-fit: cover;
	--mana-gallery-gap: 10px;
	--mana-gallery-columns: 1;
	--mana-thumb-gap: 8px;
	--mana-thumbs-visible: 5;
	--mana-side-width: 90px;
	--mana-arrow-size: 42px;
	--mana-slide-peek: 0px;
	--mana-video-button-size: 88px;
	min-width: 0;
}

/* ---------- Image frame (shared) ---------- */

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

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

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

.mana-product-media img { transition: transform 180ms ease; }

@media (hover: hover) and (pointer: fine) {
	[data-zoom="true"] .mana-product-media:hover img,
	.mana-product-media[data-zoom="true"]:hover img {
		transform: scale(1.65);
	}
}

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

.mana-gallery-lightbox-icon,
.mana-gallery-lightbox-button {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: rgb(255 255 255 / 82%);
	box-shadow: none;
	z-index: 3;
}

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

.mana-gallery-lightbox-icon svg,
.mana-gallery-lightbox-button svg,
.mana-gallery-arrow svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.mana-product-video-trigger {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	display: grid;
	place-items: center;
	width: var(--mana-video-button-size);
	height: var(--mana-video-button-size);
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #111;
	box-shadow: none;
	cursor: pointer;
	z-index: 5;
}

.mana-product-video-trigger svg { width: 100%; height: 100%; fill: currentColor; }

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

.mana-product-video-dialog {
	width: min(920px, calc(100vw - 32px));
	padding: 0;
	border: 0;
	background: #000;
	overflow: visible;
}

.mana-product-video-dialog::backdrop { background: rgb(0 0 0 / 75%); }

.mana-product-video-dialog > iframe,
.mana-product-video-dialog > video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}

.mana-product-video-dialog > button {
	position: absolute;
	top: -42px;
	right: 0;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}

.mana-gallery-arrow {
	position: absolute;
	display: grid;
	place-items: center;
	width: var(--mana-arrow-size);
	height: var(--mana-arrow-size);
	padding: 0;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
	z-index: 4;
}

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

/* ---------- Gallery with thumbnails ----------
   Layout per breakpoint comes from CSS variables that Elementor writes for the
   "thumbnail position" control (see the widget's selectors_dictionary). */

.mana-thumbnails-gallery {
	display: grid;
	grid-template-columns: var(--mana-thumbs-columns, minmax(0, 1fr));
	grid-template-areas: var(--mana-thumbs-areas, "main" "rail");
	gap: var(--mana-gallery-gap);
	min-width: 0;
	max-width: 100%;
	direction: ltr;
}

.mana-thumbnails-gallery__main { grid-area: main; }
.mana-thumbnails-gallery[data-lightbox="true"] .mana-thumbnails-gallery__main:not(.is-video-playing) { cursor: zoom-in; }

.mana-thumbnails-gallery__rail {
	position: relative;
	grid-area: rail;
	min-width: 0;
	min-height: 0;
	contain: var(--mana-thumbs-contain, none); /* "size" on the sides: the rail never grows taller than the main image */
}

.mana-thumbnails-gallery__track {
	position: relative;
	display: flex;
	flex-direction: var(--mana-thumbs-flow, row);
	gap: var(--mana-thumb-gap);
	min-width: 0;
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	scroll-snap-type: both proximity;
}

.mana-thumbnails-gallery__rail > .mana-thumbnails-gallery__track { height: 100%; }
.mana-thumbnails-gallery__track::-webkit-scrollbar { display: none; }

.mana-thumb {
	flex: 0 0 calc((100% - ((var(--mana-thumbs-visible) - 1) * var(--mana-thumb-gap))) / var(--mana-thumbs-visible));
	aspect-ratio: var(--mana-gallery-ratio);
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 2px solid transparent;
	background: transparent;
	box-shadow: none;
	overflow: hidden;
	cursor: pointer;
	scroll-snap-align: start;
}

.mana-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: var(--mana-gallery-fit);
}

.mana-thumb-arrow {
	inset: var(--mana-thumbs-prev, 50% auto auto 6px);
	translate: var(--mana-thumbs-shift, 0 -50%);
	rotate: var(--mana-thumbs-rotate, 0deg);
}

.mana-thumb-arrow.mana-gallery-arrow--next { inset: var(--mana-thumbs-next, 50% 6px auto auto); }

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

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

.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;
}

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

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

.mana-product-slider > .mana-gallery-arrow { top: 50%; translate: 0 -50%; }
.mana-product-slider > .mana-gallery-arrow--previous { left: 6px; }
.mana-product-slider > .mana-gallery-arrow--next { right: 6px; }

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

.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%;
}

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

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

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

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

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