/* MANA – product gallery for MANA Builder: the gallery with thumbnails (loaded only with that component).
   STRUCTURE ONLY – see product-gallery-builder.css. Position / alignment come as classes per breakpoint. */

.mb-root .mpg-pos-bottom { --mana-thumbs-columns: minmax(0, 1fr); --mana-thumbs-areas: "main" "rail"; --mana-thumbs-flow: row; --mana-thumbs-align: flex-start; --mana-thumbs-contain: none; --mana-thumbs-rotate: 0deg; --mana-thumbs-prev-inset: 50% auto auto 4px; --mana-thumbs-next-inset: 50% 4px auto auto; --mana-thumbs-shift: 0 -50%; --mana-thumbs-fade-dir: var(--mana-thumbs-fade-row, to right); }
.mb-root .mpg-pos-right { --mana-thumbs-columns: minmax(0, 1fr) var(--mana-side-width); --mana-thumbs-areas: "main rail"; --mana-thumbs-flow: column; --mana-thumbs-align: stretch; --mana-thumbs-contain: size; --mana-thumbs-rotate: 90deg; --mana-thumbs-prev-inset: 4px auto auto 50%; --mana-thumbs-next-inset: auto auto 4px 50%; --mana-thumbs-shift: -50% 0; --mana-thumbs-fade-dir: to bottom; }
.mb-root .mpg-pos-left { --mana-thumbs-columns: var(--mana-side-width) minmax(0, 1fr); --mana-thumbs-areas: "rail main"; --mana-thumbs-flow: column; --mana-thumbs-align: stretch; --mana-thumbs-contain: size; --mana-thumbs-rotate: 90deg; --mana-thumbs-prev-inset: 4px auto auto 50%; --mana-thumbs-next-inset: auto auto 4px 50%; --mana-thumbs-shift: -50% 0; --mana-thumbs-fade-dir: to bottom; }
.mb-root .mpg-align-right { --mana-thumbs-dir: rtl; --mana-thumbs-justify: flex-start; --mana-thumbs-fade-row: to left; }
.mb-root .mpg-align-center { --mana-thumbs-dir: rtl; --mana-thumbs-justify: safe center; --mana-thumbs-fade-row: to left; }
.mb-root .mpg-align-left { --mana-thumbs-dir: ltr; --mana-thumbs-justify: flex-start; --mana-thumbs-fade-row: to right; }

@media (max-width: 1024px) {
.mb-root .mpg-pos-t-bottom { --mana-thumbs-columns: minmax(0, 1fr); --mana-thumbs-areas: "main" "rail"; --mana-thumbs-flow: row; --mana-thumbs-align: flex-start; --mana-thumbs-contain: none; --mana-thumbs-rotate: 0deg; --mana-thumbs-prev-inset: 50% auto auto 4px; --mana-thumbs-next-inset: 50% 4px auto auto; --mana-thumbs-shift: 0 -50%; --mana-thumbs-fade-dir: var(--mana-thumbs-fade-row, to right); }
.mb-root .mpg-pos-t-right { --mana-thumbs-columns: minmax(0, 1fr) var(--mana-side-width); --mana-thumbs-areas: "main rail"; --mana-thumbs-flow: column; --mana-thumbs-align: stretch; --mana-thumbs-contain: size; --mana-thumbs-rotate: 90deg; --mana-thumbs-prev-inset: 4px auto auto 50%; --mana-thumbs-next-inset: auto auto 4px 50%; --mana-thumbs-shift: -50% 0; --mana-thumbs-fade-dir: to bottom; }
.mb-root .mpg-pos-t-left { --mana-thumbs-columns: var(--mana-side-width) minmax(0, 1fr); --mana-thumbs-areas: "rail main"; --mana-thumbs-flow: column; --mana-thumbs-align: stretch; --mana-thumbs-contain: size; --mana-thumbs-rotate: 90deg; --mana-thumbs-prev-inset: 4px auto auto 50%; --mana-thumbs-next-inset: auto auto 4px 50%; --mana-thumbs-shift: -50% 0; --mana-thumbs-fade-dir: to bottom; }
.mb-root .mpg-align-t-right { --mana-thumbs-dir: rtl; --mana-thumbs-justify: flex-start; --mana-thumbs-fade-row: to left; }
.mb-root .mpg-align-t-center { --mana-thumbs-dir: rtl; --mana-thumbs-justify: safe center; --mana-thumbs-fade-row: to left; }
.mb-root .mpg-align-t-left { --mana-thumbs-dir: ltr; --mana-thumbs-justify: flex-start; --mana-thumbs-fade-row: to right; }
}

@media (max-width: 767px) {
.mb-root .mpg-pos-m-bottom { --mana-thumbs-columns: minmax(0, 1fr); --mana-thumbs-areas: "main" "rail"; --mana-thumbs-flow: row; --mana-thumbs-align: flex-start; --mana-thumbs-contain: none; --mana-thumbs-rotate: 0deg; --mana-thumbs-prev-inset: 50% auto auto 4px; --mana-thumbs-next-inset: 50% 4px auto auto; --mana-thumbs-shift: 0 -50%; --mana-thumbs-fade-dir: var(--mana-thumbs-fade-row, to right); }
.mb-root .mpg-pos-m-right { --mana-thumbs-columns: minmax(0, 1fr) var(--mana-side-width); --mana-thumbs-areas: "main rail"; --mana-thumbs-flow: column; --mana-thumbs-align: stretch; --mana-thumbs-contain: size; --mana-thumbs-rotate: 90deg; --mana-thumbs-prev-inset: 4px auto auto 50%; --mana-thumbs-next-inset: auto auto 4px 50%; --mana-thumbs-shift: -50% 0; --mana-thumbs-fade-dir: to bottom; }
.mb-root .mpg-pos-m-left { --mana-thumbs-columns: var(--mana-side-width) minmax(0, 1fr); --mana-thumbs-areas: "rail main"; --mana-thumbs-flow: column; --mana-thumbs-align: stretch; --mana-thumbs-contain: size; --mana-thumbs-rotate: 90deg; --mana-thumbs-prev-inset: 4px auto auto 50%; --mana-thumbs-next-inset: auto auto 4px 50%; --mana-thumbs-shift: -50% 0; --mana-thumbs-fade-dir: to bottom; }
.mb-root .mpg-align-m-right { --mana-thumbs-dir: rtl; --mana-thumbs-justify: flex-start; --mana-thumbs-fade-row: to left; }
.mb-root .mpg-align-m-center { --mana-thumbs-dir: rtl; --mana-thumbs-justify: safe center; --mana-thumbs-fade-row: to left; }
.mb-root .mpg-align-m-left { --mana-thumbs-dir: ltr; --mana-thumbs-justify: flex-start; --mana-thumbs-fade-row: to right; }
}

/* ---------- Gallery with thumbnails ---------- */

.mb-root .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-thumbs-count: calc(var(--mana-thumbs-visible) + var(--mana-thumbs-peek, 0));
	--mana-thumbs-gaps: calc(var(--mana-thumbs-visible) - 1 + var(--mana-thumbs-peek-gap, 0));
}

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

.mb-root .mana-thumbnails-gallery__rail {
	position: relative;
	grid-area: rail;
	min-width: 0;
	min-height: 0;
	contain: var(--mana-thumbs-contain, none);
}

.mb-root .mana-thumbnails-gallery__track {
	--mana-fade: calc(var(--mana-thumbs-fade-size, 40px) * var(--mana-thumbs-fade-on, 0));
	--mana-fade-start: 0px;
	--mana-fade-end: clamp(0px, calc((var(--mana-thumbs-n, 0) - var(--mana-thumbs-visible)) * 10000px), var(--mana-fade));
	position: relative;
	display: flex;
	flex-direction: var(--mana-thumbs-flow, row);
	justify-content: var(--mana-thumbs-justify, flex-start);
	align-items: var(--mana-thumbs-align, flex-start);
	direction: var(--mana-thumbs-dir, ltr);
	gap: var(--mana-thumb-gap);
	min-width: 0;
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	scroll-snap-type: both proximity;
	-webkit-mask-image: linear-gradient(var(--mana-thumbs-fade-dir, to right), transparent 0, #000 var(--mana-fade-start), #000 calc(100% - var(--mana-fade-end)), transparent 100%);
	mask-image: linear-gradient(var(--mana-thumbs-fade-dir, to right), transparent 0, #000 var(--mana-fade-start), #000 calc(100% - var(--mana-fade-end)), transparent 100%);
}

.mb-root .mana-thumbnails-gallery__track[data-fade-start] { --mana-fade-start: var(--mana-fade); }
.mb-root .mana-thumbnails-gallery__track[data-fade-end="1"] { --mana-fade-end: var(--mana-fade); }
.mb-root .mana-thumbnails-gallery__track[data-fade-end="0"] { --mana-fade-end: 0px; }
.mb-root .mana-thumbnails-gallery__rail > .mana-thumbnails-gallery__track { width: 100%; height: 100%; }
.mb-root .mana-thumbnails-gallery__track::-webkit-scrollbar { display: none; }

.mb-root .mana-thumb {
	flex: 0 0 calc((100% - var(--mana-thumbs-gaps) * var(--mana-thumb-gap)) / var(--mana-thumbs-count));
	aspect-ratio: var(--mana-gallery-ratio);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	scroll-snap-align: start;
}

:where(.mb-root .mana-thumb) {
	border: 2px solid transparent;
	border-radius: var(--img-radius, 0);
}

:where(.mb-root .mana-thumb[aria-current="true"]) { border-color: var(--color-primary, currentColor); }

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

/* Arrows float over the strip and appear only when there is something to scroll towards them. */
.mb-root .mana-thumb-arrow {
	inset: var(--mana-thumbs-prev-inset, 50% auto auto 4px);
	translate: var(--mana-thumbs-shift, 0 -50%);
	rotate: var(--mana-thumbs-rotate, 0deg);
}

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