.zs-ms-widget {
	--zs-ms-gap: 20px;
	--zs-ms-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	--zs-ms-card-padding: 14px;
	/* --zs-ms-ratio and --zs-ms-per-view are set inline by the shortcode
	   from the admin settings (default 56.25% = 16:9, 3 per view). */
	width: 100%;
	box-sizing: border-box;
}

.zs-ms-widget *,
.zs-ms-widget *::before,
.zs-ms-widget *::after {
	box-sizing: border-box;
}

.zs-ms-carousel {
	position: relative;
	padding: 20px 0;
}

.zs-ms-track {
	display: flex !important;
	/* stretch, not flex-start, so every card is as tall as the tallest
	   one regardless of how many lines its caption runs to. Forced,
	   because themes/Elementor commonly reset align-items on rows. */
	align-items: stretch !important;
	flex-wrap: nowrap !important;
	gap: var(--zs-ms-gap, 20px) !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	/* Breathing room so the card shadows are not clipped by the track's
	   own overflow. */
	padding: 8px 12px 24px !important;
	scroll-padding-inline: 12px;
	margin: 0 !important;
	scrollbar-width: none;
}

.zs-ms-track::-webkit-scrollbar {
	display: none;
}

/*
 * Slides per view is driven by the --zs-ms-per-view custom property set
 * inline by the shortcode. Deliberately verbose selector plus !important
 * on every layout property: this markup renders inside a theme/Elementor
 * section whose own grid and column rules otherwise reset the padding and
 * align-self of any direct child. Custom properties carry literal
 * fallbacks so a wiped variable still leaves a usable card.
 */
.zs-ms-widget .zs-ms-carousel .zs-ms-track > .zs-ms-slide {
	scroll-snap-align: start !important;
	flex: 0 0 calc(
		(100% - (var(--zs-ms-gap, 20px) * (var(--zs-ms-per-view, 3) - 1)))
		/ var(--zs-ms-per-view, 3)
	) !important;
	align-self: stretch !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	text-align: center !important;
	margin: 0 !important;
	padding: var(--zs-ms-card-padding, 14px) !important;
	background-color: #fff !important;
	box-shadow: var(--zs-ms-shadow, 0 2px 10px rgba(0, 0, 0, 0.12)) !important;
}

/*
 * Fixed-ratio media box via the padding-top percentage technique rather
 * than the `aspect-ratio` property -- some theme/global stylesheets reset
 * `aspect-ratio` on nested elements, which silently breaks it and leaves
 * a content-driven box with dead space. Padding-top percentage is not
 * something themes typically touch, so it holds regardless of what else
 * is loaded on the page. Default 56.25% = 16:9, sized for video.
 */
.zs-ms-widget .zs-ms-slide-media {
	position: relative !important;
	width: 100% !important;
	height: 0 !important;
	padding-top: var(--zs-ms-ratio, 56.25%) !important;
	overflow: hidden !important;
	margin: 0 !important;
	background-color: #000 !important;
}

.zs-ms-widget .zs-ms-slide-media img,
.zs-ms-widget .zs-ms-slide-media video.zs-ms-video {
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background-color: #000 !important;
}

/* Images fill the box edge to edge. */
.zs-ms-widget .zs-ms-slide-media img {
	object-fit: cover !important;
}

/*
 * Videos use `contain`, not `cover` -- a video cropped to fill the box
 * would cut off part of the picture, and unlike a photo you cannot
 * reframe it. Letterboxing against the black box keeps the whole frame
 * visible whatever the source dimensions.
 */
.zs-ms-widget .zs-ms-slide-media video.zs-ms-video {
	object-fit: contain !important;
}

.zs-ms-widget .zs-ms-slide p.zs-ms-slide-caption {
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	padding: 12px 0 0 !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	color: #222 !important;
}

/* --------------------------------------------------------------------
   Prev/Next arrow buttons -- overlaid on top of the track (not beside
   it), isolated from theme/Elementor styling.
   -------------------------------------------------------------------- */
.zs-ms-widget .zs-ms-carousel button.zs-ms-nav,
.zs-ms-widget .zs-ms-carousel button.zs-ms-nav:link,
.zs-ms-widget .zs-ms-carousel button.zs-ms-nav:visited {
	all: unset !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 2 !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	background-color: rgba(255, 255, 255, 0.9) !important;
	background-image: none !important;
	border: 1px solid #ddd !important;
	border-radius: 50% !important;
	outline: none !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
	text-shadow: none !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: #333 !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.zs-ms-widget .zs-ms-carousel button.zs-ms-prev {
	left: 12px !important;
}

.zs-ms-widget .zs-ms-carousel button.zs-ms-next {
	right: 12px !important;
}

.zs-ms-widget .zs-ms-carousel button.zs-ms-nav::before,
.zs-ms-widget .zs-ms-carousel button.zs-ms-nav::after {
	content: none !important;
}

.zs-ms-widget .zs-ms-carousel button.zs-ms-nav:hover,
.zs-ms-widget .zs-ms-carousel button.zs-ms-nav:focus,
.zs-ms-widget .zs-ms-carousel button.zs-ms-nav:active {
	background-color: #fff !important;
	border-color: #ccc !important;
	color: #333 !important;
}

/* Tablet: always 2 slides per view */
@media (max-width: 1024px) {
	.zs-ms-widget .zs-ms-carousel .zs-ms-track > .zs-ms-slide {
		flex-basis: calc(50% - (var(--zs-ms-gap, 20px) / 2)) !important;
	}
}

/* Mobile: always 1 slide per view */
@media (max-width: 600px) {
	.zs-ms-widget .zs-ms-carousel .zs-ms-track > .zs-ms-slide {
		flex-basis: 100% !important;
	}

	.zs-ms-widget .zs-ms-carousel button.zs-ms-nav {
		width: 32px !important;
		height: 32px !important;
		min-width: 32px !important;
		min-height: 32px !important;
	}
}