.fmt-vm {
	--fmt-vm-height: 100svh;
	--fmt-vm-nav-color: #fff;
	--fmt-vm-nav-bg: rgba(20, 20, 20, .45);
	--fmt-vm-nav-bottom: 24px;
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: var(--fmt-vm-height) !important;
	min-height: var(--fmt-vm-height) !important;
	max-height: var(--fmt-vm-height) !important;
	overflow: hidden !important;
	isolation: isolate;
}

/* De bestaande Elementor binnenwrapper blijft op zijn native plek. Zo blijven
   containerhoogte, uitlijning en editorinstellingen intact. */
.fmt-vm > .fmt-vm__track,
.fmt-vm > .fmt-vm__viewport > .fmt-vm__track {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	min-height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: translate3d(0,0,0);
	will-change: transform;
}

.fmt-vm__viewport {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
}

.fmt-vm__track > .fmt-vm__wall {
	position: relative !important;
	--width: 100% !important;
	--min-height: 100% !important;
	--flex-grow: 0 !important;
	--flex-shrink: 0 !important;
	flex: 0 0 100% !important;
	align-self: stretch !important;
	width: 100% !important;
	min-width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
	max-height: 100% !important;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
}

/* Elementor kan nog een eigen binnenwrapper in een wand gebruiken. Laat die
   eveneens de volledige wandhoogte innemen, zodat verticaal centreren werkt. */
.fmt-vm__wall > .e-con-inner {
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	min-height: 100% !important;
}

.fmt-vm__nav {
	position: absolute !important;
	z-index: 100;
	left: 50%;
	bottom: var(--fmt-vm-nav-bottom) !important;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 10px;
	color: var(--fmt-vm-nav-color);
	background: var(--fmt-vm-nav-bg);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 999px;
	box-shadow: 0 8px 28px rgba(0,0,0,.16);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.fmt-vm__button {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: inherit;
	background: transparent;
	cursor: pointer;
	transition: background-color .2s ease, opacity .2s ease;
}

.fmt-vm__button:hover,
.fmt-vm__button:focus-visible { background: rgba(255,255,255,.15); }
.fmt-vm__button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.fmt-vm__button[disabled] { opacity: .3; cursor: default; }
.fmt-vm__button svg { width: 16px; height: 16px; fill: currentColor; }

.fmt-vm__counter {
	min-width: 58px;
	padding: 0 7px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .08em;
	text-align: center;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.fmt-vm__nav { padding: 6px 8px; }
	.fmt-vm__button { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
	.fmt-vm__track { transition-duration: 0.01ms !important; }
}


/* Fade-overgangen: de museumwanden liggen op exact dezelfde plek.
   Alleen de actieve wand is zichtbaar en interactief. */
.fmt-vm--fade > .fmt-vm__track,
.fmt-vm--fade-slide > .fmt-vm__track {
	display: block !important;
	transform: none !important;
}

.fmt-vm--fade .fmt-vm__track > .fmt-vm__wall,
.fmt-vm--fade-slide .fmt-vm__track > .fmt-vm__wall {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	min-width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
	max-height: 100% !important;
	opacity: 0;
	pointer-events: none;
	will-change: opacity, transform;
}

.fmt-vm--fade .fmt-vm__track > .fmt-vm__wall[aria-hidden="false"],
.fmt-vm--fade-slide .fmt-vm__track > .fmt-vm__wall[aria-hidden="false"] {
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.fmt-vm__wall { transition-duration: 0.01ms !important; }
}


/* 0.3.1 — Theme compatibility
   Isolateert de museum-navigatie tegen globale button/link-stijlen
   van o.a. Hello Elementor en site-wide Elementor styles. */
.fmt-vm .fmt-vm__nav button,
.fmt-vm .fmt-vm__nav .fmt-vm__button,
.fmt-vm .fmt-vm__nav a.fmt-vm__button {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	max-width: 40px !important;
	max-height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	background-color: transparent !important;
	color: inherit !important;
	box-shadow: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	font: inherit !important;
	line-height: 1 !important;
	cursor: pointer;
}

.fmt-vm .fmt-vm__nav button:hover,
.fmt-vm .fmt-vm__nav button:focus,
.fmt-vm .fmt-vm__nav button:active,
.fmt-vm .fmt-vm__nav .fmt-vm__button:hover,
.fmt-vm .fmt-vm__nav .fmt-vm__button:focus,
.fmt-vm .fmt-vm__nav .fmt-vm__button:active,
.fmt-vm .fmt-vm__nav a.fmt-vm__button:hover,
.fmt-vm .fmt-vm__nav a.fmt-vm__button:focus,
.fmt-vm .fmt-vm__nav a.fmt-vm__button:active {
	border: 0 !important;
	border-radius: 999px !important;
	background: rgba(255,255,255,.14) !important;
	background-color: rgba(255,255,255,.14) !important;
	color: inherit !important;
	box-shadow: none !important;
	text-decoration: none !important;
	outline-offset: 2px;
}

.fmt-vm .fmt-vm__nav button:disabled,
.fmt-vm .fmt-vm__nav .fmt-vm__button[disabled],
.fmt-vm .fmt-vm__nav .fmt-vm__button.is-disabled {
	background: transparent !important;
	color: inherit !important;
	opacity: .42;
	cursor: default;
}

.fmt-vm .fmt-vm__nav button::before,
.fmt-vm .fmt-vm__nav button::after,
.fmt-vm .fmt-vm__nav .fmt-vm__button::before,
.fmt-vm .fmt-vm__nav .fmt-vm__button::after {
	background: none !important;
	box-shadow: none !important;
}

.fmt-vm .fmt-vm__nav svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	color: inherit !important;
}