/*
 * BK Video Slider - public styles.
 * No framework dependency. Colors/spacing are exposed as CSS custom
 * properties on .bkvs-slider so a theme can override them without
 * touching this file - see the --bkvs-* variables below.
 */

.bkvs-slider {
	--bkvs-arrow-bg: rgba(0, 0, 0, 0.35);
	--bkvs-arrow-bg-hover: rgba(0, 0, 0, 0.6);
	--bkvs-arrow-color: #fff;
	--bkvs-dot-color: rgba(255, 255, 255, 0.5);
	--bkvs-dot-color-active: #fff;
	--bkvs-heading-color: #fff;
	--bkvs-body-color: #f1f1f1;
	--bkvs-cta-bg: #fff;
	--bkvs-cta-color: #1f1f1f;
	--bkvs-progress-track: rgba(255, 255, 255, 0.25);
	--bkvs-progress-fill: #fff;
	--bkvs-aspect-ratio: 16 / 9;
	--bkvs-height: 500px;
	--bkvs-transition-speed: 600ms;

	position: relative;
	/* overflow/box-sizing hardened with !important: flexbox-heavy themes
	   (Flatsome's UX Builder grid, in particular) ship broad resets that
	   can otherwise strip the clipping this slider's whole slide-transition
	   mechanism depends on - see the .bkvs-track/.bkvs-slide hardening
	   below for the full explanation. */
	overflow: hidden !important;
	width: 100%;
	min-width: 0;
	background: #111;
	box-sizing: border-box !important;
}

/*
 * Flex/Grid item hardening for placements with no intermediate wrapper to
 * target (unlike Elementor's .elementor-widget-bkvs-slider below) - the
 * block editor's core Group block set to Flex or Grid layout
 * (.wp-block-group.is-layout-flex/is-layout-grid, WP 6.x+) renders
 * .bkvs-slider as a *direct* flex/grid item, since BKVS_Block::render()
 * returns this element with no wrapper div. Unconfirmed as an actual bug
 * (WordPress core's flex/grid layout CSS is far less involved than
 * Elementor's custom-property-driven system below, so the exact zero-width
 * collapse described there may not occur here) - added as a precaution
 * since these properties are inert wherever .bkvs-slider's parent doesn't
 * actually lay it out as a flex/grid item, so they cannot regress any other
 * placement (normal block flow, inside Elementor's own wrapper, etc.). No
 * !important: nothing here is fighting a confirmed specificity conflict the
 * way the Elementor-specific rule below is, so ordinary specificity is
 * enough until real-world testing says otherwise.
 */
.bkvs-slider {
	flex-grow: 1;
	flex-basis: 100%;
	justify-self: stretch;
	align-self: stretch;
}

/*
 * Elementor's newer "Atomic Widgets"/flexbox container system (e-flexbox/
 * e-atomic-element classes) can leave this widget's wrapper at zero width.
 * Root cause (confirmed via elementor/assets/css/frontend.min.css): every
 * .elementor-element gets `flex-grow:var(--flex-grow)` where --flex-grow
 * defaults to `initial` (0) unless Elementor's own container/column controls
 * set it. With flex-grow:0 the wrapper is never told to grow and fill its
 * row, flex-basis:auto falls back to a `width` the wrapper doesn't have, and
 * since every descendant (including .bkvs-slider's own width:100% above) is
 * percentage-based with nothing absolute to anchor to, the browser can't
 * resolve a definite size and collapses toward 0 - a missing flex-grow, not
 * a min-width floor (Elementor already sets .elementor-widget{min-width:0}
 * itself, so adding that again changes nothing).
 * !important because Elementor's own rule reads from a custom property
 * rather than being !important itself, and both selectors tie at one class
 * of specificity - relying on stylesheet load order to win would be fragile.
 * Scoped to this widget's own wrapper class only, never touches Elementor's
 * generic .elementor-element/.elementor-widget styling for any other widget.
 */
.elementor-widget-bkvs-slider {
	flex-grow: 1 !important;
	flex-basis: 100% !important;
	width: 100% !important;
	min-width: 0 !important;
}

.bkvs-slider *,
.bkvs-slider *::before,
.bkvs-slider *::after {
	box-sizing: inherit;
}

.bkvs-slider.bkvs-height-mode-aspect-ratio {
	aspect-ratio: var(--bkvs-aspect-ratio);
}

.bkvs-slider.bkvs-height-mode-viewport {
	/* iOS Safari's 100vh includes the collapsing address-bar area, causing
	   an oversized/jumpy hero. 100dvh (dynamic viewport height) fixes this;
	   browsers that don't understand the unit simply keep the 100vh above. */
	height: 100vh;
	height: 100dvh;
}

@supports not (aspect-ratio: 1 / 1) {
	.bkvs-slider.bkvs-height-mode-aspect-ratio {
		min-height: 300px;
	}
}

.bkvs-slider.bkvs-height-mode-fixed-px {
	height: var(--bkvs-height);
}

.bkvs-track {
	--bkvs-slides-per-view: 1;
	--bkvs-slide-count: 1;

	/* !important from here down through .bkvs-slide: a flexbox-heavy theme
	   (observed with Flatsome) can ship broad resets on display/flex/
	   position/overflow that, combined, silently turn this into a
	   side-by-side 2-up layout instead of one full-width slide with the
	   rest clipped off-screen. Every property below is structural to how
	   the slide-transition math works, not a look-and-feel choice, so
	   hardening it doesn't get in the way of the slider's own theming/
	   customization system (which works through --bkvs-* custom property
	   *values*, not through fighting property-level !important). */
	display: flex !important;
	height: 100%;
	will-change: transform;
	/* Let vertical page scroll through untouched; JS owns horizontal swipe.
	   Without this, iOS Safari's own gesture recognizer fights our swipe
	   handling. The user-select/touch-callout resets stop iOS from showing
	   a text-selection callout or image drag-ghost mid-swipe. */
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.bkvs-slider.bkvs-transition-slide .bkvs-track {
	transition: transform var(--bkvs-transition-speed) ease;
	/* A flex container left at its default width:auto only fills its own
	   parent (.bkvs-slider) - it does NOT grow to accommodate flex-shrink:0
	   children that overflow it. Without this, .bkvs-track stayed exactly
	   one slide wide no matter how many slides it held, so every .bkvs-slide
	   (each 100% of that too-small box) overflowed and got clipped by
	   .bkvs-slider's overflow:hidden, and translateX() (a percentage of the
	   track's own, wrong-sized box) landed at the wrong fraction of the
	   actual content - the "each slide sliced in half" symptom. Sizing the
	   track to slide-count/perView viewport-widths makes its box match what
	   the children actually occupy, so translateX(-(index/total)*100%)
	   below finally moves through the right amount of real content.
	   Pre-JS-init (or no-JS) this still resolves to 100% via both custom
	   properties' 1/1 defaults, matching the existing no-JS fallback. */
	width: calc(100% * var(--bkvs-slide-count) / var(--bkvs-slides-per-view));
}

.bkvs-slide {
	position: relative !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	/* Fraction of the TRACK's own width (see .bkvs-track's explicit width
	   above), not of slidesPerView directly - with N total slides and the
	   track sized to N/perView viewport-widths, each slide needs to be 1/N
	   of the track to end up exactly 1/perView of the actual viewport. */
	flex-basis: calc(100% / var(--bkvs-slide-count)) !important;
	max-width: calc(100% / var(--bkvs-slide-count)) !important;
	height: 100% !important;
	overflow: hidden;
}

/* Fade and Zoom transitions: slides stack in place instead of sitting side
   by side - Zoom reuses the same stacking rules and adds its own media
   scale transform below. */
.bkvs-slider.bkvs-transition-fade .bkvs-track,
.bkvs-slider.bkvs-transition-zoom .bkvs-track {
	display: block !important;
}

.bkvs-slider.bkvs-transition-fade .bkvs-slide,
.bkvs-slider.bkvs-transition-zoom .bkvs-slide {
	position: absolute !important;
	inset: 0;
	flex-basis: auto !important;
	max-width: none !important;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--bkvs-transition-speed) ease;
}

.bkvs-slider.bkvs-transition-fade .bkvs-slide.is-active,
.bkvs-slider.bkvs-transition-zoom .bkvs-slide.is-active {
	position: relative !important;
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

.bkvs-slider.bkvs-transition-zoom .bkvs-slide-media .bkvs-video,
.bkvs-slider.bkvs-transition-zoom .bkvs-slide-media .bkvs-image,
.bkvs-slider.bkvs-transition-zoom .bkvs-slide-media .bkvs-facade-poster {
	transform: scale(1.08);
	transition: transform calc(var(--bkvs-transition-speed) * 1.8) ease;
}

.bkvs-slider.bkvs-transition-zoom .bkvs-slide.is-active .bkvs-slide-media .bkvs-video,
.bkvs-slider.bkvs-transition-zoom .bkvs-slide.is-active .bkvs-slide-media .bkvs-image,
.bkvs-slider.bkvs-transition-zoom .bkvs-slide.is-active .bkvs-slide-media .bkvs-facade-poster {
	transform: scale(1);
}

/* No-JS / JS-not-yet-initialized fallback: stack every slide visibly so
   content stays readable and crawlable without the slider engine. */
.bkvs-slider:not(.bkvs-is-initialized) .bkvs-track {
	display: block !important;
	height: auto;
}

.bkvs-slider:not(.bkvs-is-initialized) .bkvs-slide {
	position: relative !important;
	flex-basis: auto !important;
	max-width: none !important;
	height: auto !important;
	min-height: 240px;
}

.bkvs-slide-media {
	position: absolute;
	inset: 0;
}

.bkvs-slider:not(.bkvs-is-initialized) .bkvs-slide-media {
	position: relative;
	inset: auto;
}

.bkvs-video,
.bkvs-image,
.bkvs-facade-poster {
	display: block;
	/* !important on these specific, structurally-required properties only:
	   Elementor (and many themes) ship a broad "img { max-width:100%;
	   height:auto; }"-style reset with higher selector specificity than a
	   single class, which would otherwise silently break the cover-fit
	   layout once the slider is nested inside a page builder's markup. */
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	-webkit-user-drag: none;
	user-drag: none;
}

/*
 * Image slides only get a configurable object-fit/object-position (per-slide
 * Image "Fit"/"Focal point" fields, admin/views/metabox-slides.php) - video
 * and the YouTube/Vimeo facade poster stay hardcoded to `cover` above, since
 * that ask was specific to Images. '' (unset) falls through to the same
 * `cover`/`center` default the shared rule above already used, so an image
 * slide with no override renders byte-identical to before this field existed.
 */
.bkvs-image {
	object-fit: var(--bkvs-image-object-fit, cover) !important;
	object-position: var(--bkvs-image-object-position, center);
}

.bkvs-slider:not(.bkvs-is-initialized) .bkvs-video,
.bkvs-slider:not(.bkvs-is-initialized) .bkvs-image,
.bkvs-slider:not(.bkvs-is-initialized) .bkvs-facade-poster {
	height: auto !important;
}

.bkvs-video-facade {
	position: relative;
	width: 100%;
	height: 100%;
	background: #000;
}

.bkvs-facade-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 22px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.2s ease;
	z-index: 2;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/*
 * :hover and :focus-visible are kept as separate rules, not a combined
 * comma-selector-list: in engines that don't recognize :focus-visible, an
 * unforgiving selector list drops the *entire* rule, silently killing the
 * :hover styling too. Applies to .bkvs-arrow and .bkvs-cta below as well.
 */
.bkvs-facade-play:hover {
	background: rgba(0, 0, 0, 0.8);
	transform: translate(-50%, -50%) scale(1.08);
}

.bkvs-facade-play:focus-visible {
	background: rgba(0, 0, 0, 0.8);
	transform: translate(-50%, -50%) scale(1.08);
}

.bkvs-video-facade iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.bkvs-video-facade.bkvs-facade-activated .bkvs-facade-poster,
.bkvs-video-facade.bkvs-facade-activated .bkvs-facade-play {
	display: none;
}

.bkvs-logo-strip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bkvs-logo-gap, clamp(16px, 4vw, 48px));
	flex-wrap: wrap;
	height: 100%;
	background: var(--bkvs-logo-bg, #fff);
	padding: 24px;
}

.bkvs-logo {
	max-height: var(--bkvs-logo-max-height, 72px);
	max-width: 180px;
	width: auto;
	height: auto;
	object-fit: contain;
	-webkit-user-drag: none;
	user-drag: none;
}

@supports not (gap: 1px) {
	.bkvs-logo-strip > * {
		margin: 12px;
	}

	.bkvs-dots > * {
		margin: 0 4px;
	}
}

.bkvs-slide-type-text .bkvs-slide-media {
	display: none;
}

.bkvs-slide-type-text {
	background: #1f1f1f;
}

.bkvs-slide-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	background-color: rgba(0, 0, 0, var(--bkvs-overlay, 0.4));
	pointer-events: none;
}

.bkvs-slide-type-logo .bkvs-slide-overlay {
	background-color: transparent;
}

/*
 * Alternate overlay shapes (Style field: Overlay style). The default
 * ("flat") stays a plain rgba() wash, set above. These reuse the exact
 * same --bkvs-overlay opacity value as gradient stops instead of adding a
 * second intensity field - one opacity, three shapes.
 */
.bkvs-slide-overlay.bkvs-overlay-gradient-bottom {
	background-color: transparent;
	background-image: linear-gradient(to top, rgba(0, 0, 0, var(--bkvs-overlay, 0.6)) 0%, rgba(0, 0, 0, 0) 50%);
}

.bkvs-slide-overlay.bkvs-overlay-gradient-top-bottom {
	background-color: transparent;
	background-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, var(--bkvs-overlay, 0.5)) 0%,
		rgba(0, 0, 0, 0) 30%,
		rgba(0, 0, 0, 0) 70%,
		rgba(0, 0, 0, var(--bkvs-overlay, 0.5)) 100%
	);
}

.bkvs-slider:not(.bkvs-is-initialized) .bkvs-slide-overlay {
	position: relative;
}

.bkvs-slide-content {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	width: 100%;
	max-width: var(--bkvs-content-max-width, 720px);
	padding: var(--bkvs-content-padding, clamp(20px, 5vw, 64px));
	pointer-events: auto;
	/* .bkvs-track disables selection to keep swipe gestures clean; restore
	   it here so real slide copy stays selectable/accessible. */
	-webkit-user-select: text;
	user-select: text;
}

/*
 * bkvs-align-h-*/bkvs-align-v-* are set on .bkvs-slide-overlay - the actual
 * flex parent of .bkvs-slide-content (row direction, one child) - as
 * justify-content (main axis = horizontal)/align-items (cross axis =
 * vertical). This is genuine flexbox centering: it positions the content
 * block correctly regardless of whether that block has an explicit width,
 * unlike the margin:auto/align-self approach this replaced, which only
 * visibly centered when the block's own width was already narrower than
 * the available row space (margin:auto has nothing to distribute otherwise).
 *
 * --bkvs-h-align-items is still set here (custom property, not the
 * align-items property itself) so the Module Layout Display feature (a
 * Flex/Grid Container option for .bkvs-slide-content's OWN children, see
 * the --bkvs-ml-content-align-items* consumer below) can still use the Text
 * Horizontal Position choice as ITS default cross-axis alignment when
 * Display's own Align Items is left unset - custom properties inherit
 * downward through any number of descendant levels, so declaring it here
 * (on the parent) still reaches .bkvs-slide-content (the child) correctly.
 */
.bkvs-align-h-left { justify-content: flex-start; text-align: left; --bkvs-h-align-items: flex-start; }
.bkvs-align-h-center { justify-content: center; text-align: center; --bkvs-h-align-items: center; }
.bkvs-align-h-right { justify-content: flex-end; text-align: right; --bkvs-h-align-items: flex-end; }

.bkvs-align-v-top { align-items: flex-start; }
.bkvs-align-v-middle { align-items: center; }
.bkvs-align-v-bottom { align-items: flex-end; }

.bkvs-category {
	margin: 0;
	color: var(--bkvs-category-color, rgba(255, 255, 255, 0.7));
	font-size: var(--bkvs-category-size, 0.875rem);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bkvs-heading {
	margin: 0;
	color: var(--bkvs-heading-color);
	font-size: var(--bkvs-heading-size, clamp(1.5rem, 4vw, 3rem));
	font-weight: var(--bkvs-heading-weight, 700);
	line-height: 1.15;
}

.bkvs-subheading {
	margin: 0;
	/* Falls through to the heading color when not set independently, same
	   as the plugin's pre-existing default look. */
	color: var(--bkvs-subheading-color, var(--bkvs-heading-color));
	font-size: var(--bkvs-subheading-size, clamp(1rem, 2vw, 1.375rem));
	font-weight: 400;
}

.bkvs-body {
	margin: 0;
	color: var(--bkvs-body-color);
	font-size: var(--bkvs-body-size, 1rem);
	line-height: 1.5;
}

.bkvs-cta {
	display: inline-block;
	width: fit-content;
	margin-top: 0.5em;
	padding: 0.75em 1.75em;
	background: var(--bkvs-cta-bg);
	color: var(--bkvs-cta-color);
	text-decoration: none;
	font-weight: 600;
	border-radius: var(--bkvs-cta-radius, 2px);
	transition: opacity 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.bkvs-cta:hover {
	opacity: 0.85;
	color: var(--bkvs-cta-color);
}

.bkvs-cta:focus-visible {
	opacity: 0.85;
	color: var(--bkvs-cta-color);
}

.bkvs-slide-link {
	position: absolute;
	inset: 0;
	display: block;
	color: inherit;
	text-decoration: none;
}

.bkvs-arrow {
	/* !important: themes with their own aggressive button/anchor resets
	   (Flatsome in particular strips background/border-radius/appearance
	   from buttons site-wide) can otherwise leave this rendering as a bare,
	   unstyled glyph with no visible circular button at all. */
	position: absolute !important;
	top: 50%;
	transform: translateY(-50%);
	width: var(--bkvs-arrow-size, 44px) !important;
	height: var(--bkvs-arrow-size, 44px) !important;
	border: none !important;
	border-radius: 50% !important;
	background: var(--bkvs-arrow-bg) !important;
	color: var(--bkvs-arrow-color) !important;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	z-index: 3;
	transition: background 0.2s ease, opacity 0.2s ease;
	-webkit-appearance: none !important;
	appearance: none !important;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	box-shadow: none;
	margin: 0;
	padding: 0;
}

.bkvs-arrow span {
	display: block;
	transition: transform 0.2s ease;
}

.bkvs-arrow:hover {
	background: var(--bkvs-arrow-bg-hover);
}

.bkvs-arrow:focus-visible {
	background: var(--bkvs-arrow-bg-hover);
}

.bkvs-arrow:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* Icon-nudge micro-interaction: the glyph shifts toward the direction it
   points, the button itself stays put so the hit-area doesn't move. Kept
   as separate rules per :focus-visible, same reasoning as noted above. */
.bkvs-arrow-prev:hover span {
	transform: translateX(-3px);
}

.bkvs-arrow-prev:focus-visible span {
	transform: translateX(-3px);
}

.bkvs-arrow-next:hover span {
	transform: translateX(3px);
}

.bkvs-arrow-next:focus-visible span {
	transform: translateX(3px);
}

.bkvs-arrow-prev { left: var(--bkvs-arrow-offset, 16px); }
.bkvs-arrow-next { right: var(--bkvs-arrow-offset, 16px); }

/* Arrow style: Flat (Slider Settings > Arrows > Style) - a bare glyph with
   no circular button background, sized to its own content instead of the
   fixed --bkvs-arrow-size square. The hover-nudge (.bkvs-arrow-prev/next
   :hover span above), color, and :disabled opacity are all inherited
   unchanged from .bkvs-arrow - only the button-chrome properties differ. */
.bkvs-slider.bkvs-arrow-style-flat .bkvs-arrow {
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none;
	width: auto !important;
	height: auto !important;
	padding: 8px !important;
}

.bkvs-dots {
	position: absolute;
	left: 50%;
	bottom: 16px;
	bottom: max(16px, env(safe-area-inset-bottom));
	transform: translateX(-50%);
	display: flex;
	gap: var(--bkvs-dot-gap, 8px);
	z-index: 3;
}

.bkvs-dot {
	/* !important: same theme-button-reset problem as .bkvs-arrow above -
	   without it, a theme's own button box-sizing/appearance defaults can
	   turn these into stretched ovals instead of round dots. */
	width: var(--bkvs-dot-size, 10px) !important;
	height: var(--bkvs-dot-size, 10px) !important;
	min-width: var(--bkvs-dot-size, 10px);
	min-height: var(--bkvs-dot-size, 10px);
	border-radius: 50% !important;
	border: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	padding: 0 !important;
	margin: 0;
	background: var(--bkvs-dot-color) !important;
	box-shadow: none;
	cursor: pointer;
	flex-shrink: 0;
}

.bkvs-dot.is-active {
	background: var(--bkvs-dot-color-active);
}

/* Lift the dots clear of the progress bar pinned to the very bottom edge
   when both are present, so they don't overlap. */
.bkvs-slider.bkvs-has-progressbar .bkvs-dots {
	bottom: 28px;
	bottom: max(28px, calc(env(safe-area-inset-bottom) + 12px));
}

.bkvs-progressbar {
	position: absolute !important;
	left: 0;
	right: 0;
	bottom: 0;
	width: var(--bkvs-progress-width, 100%);
	height: var(--bkvs-progress-height, 3px) !important;
	border-radius: var(--bkvs-progress-radius, 0);
	box-shadow: var(--bkvs-progress-shadow, none);
	background: var(--bkvs-progress-track);
	z-index: 3;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

/* "Layout placement" option (Slider Settings > Progress Bar Style >
   Position): relative sits the bar in normal document flow directly after
   the track/controls instead of overlaying the bottom edge. */
.bkvs-progressbar.bkvs-progressbar-relative {
	position: relative !important;
}

.bkvs-progressbar .fill {
	height: 100% !important;
	width: 100%;
	background: var(--bkvs-progress-fill);
	transform-origin: left center;
	transform: scaleX(0);
	/* animation-duration/animation-play-state are set per-slide by JS
	   (public/js/bkvs-slider.js), reusing the exact same pause/resume
	   triggers already driving autoplay (hover, focus, tab visibility,
	   IntersectionObserver) instead of duplicating that logic. */
	animation-name: bkvs-progress-fill;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-play-state: paused;
}

@keyframes bkvs-progress-fill {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

/*
 * Controls Layout: Grouped (Slider Settings > Controls Layout). Default is
 * 'split' - arrows pinned to the slider's left/right edges, progress bar
 * spanning full width - and .bkvs-controls-group stays `display:contents`
 * so the wrapper is invisible to layout and prev-arrow/progress-bar/
 * next-arrow render exactly as if it didn't exist, byte-identical to before
 * this feature existed. Choosing 'grouped' turns the same wrapper into a
 * real flex row anchored at one corner (controls_position), pulling the
 * arrows and progress bar into one inline cluster instead.
 */
.bkvs-controls-group {
	display: contents;
}

.bkvs-slider.bkvs-controls-grouped .bkvs-controls-group {
	position: absolute !important;
	display: flex;
	align-items: center;
	gap: 16px;
	z-index: 3;
}

/* Strip each control's own independent split-mode positioning so it behaves
   as an ordinary flex item of the group instead - the group wrapper above
   now owns the actual corner placement. Width/height/color/etc. (all driven
   by the existing --bkvs-arrow-*/--bkvs-progress-* variables) are untouched. */
.bkvs-slider.bkvs-controls-grouped .bkvs-arrow {
	position: static !important;
	top: auto;
	left: auto !important;
	right: auto !important;
	transform: none;
}

.bkvs-slider.bkvs-controls-grouped .bkvs-progressbar {
	position: static !important;
	left: auto;
	right: auto;
	bottom: auto;
}

.bkvs-slider.bkvs-controls-pos-bottom-left .bkvs-controls-group {
	left: 20px;
	bottom: 20px;
}

.bkvs-slider.bkvs-controls-pos-bottom-center .bkvs-controls-group {
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
}

.bkvs-slider.bkvs-controls-pos-bottom-right .bkvs-controls-group {
	right: 20px;
	bottom: 20px;
}

.bkvs-slider.bkvs-controls-pos-top-left .bkvs-controls-group {
	left: 20px;
	top: 20px;
}

.bkvs-slider.bkvs-controls-pos-top-right .bkvs-controls-group {
	right: 20px;
	top: 20px;
}

@media (max-width: 599px) {
	/* Grouped cluster corner offset tightens on small screens, matching the
	   plugin's existing single mobile breakpoint rather than a new one. */
	.bkvs-slider.bkvs-controls-pos-bottom-left .bkvs-controls-group,
	.bkvs-slider.bkvs-controls-pos-top-left .bkvs-controls-group {
		left: 12px;
	}

	.bkvs-slider.bkvs-controls-pos-bottom-right .bkvs-controls-group,
	.bkvs-slider.bkvs-controls-pos-top-right .bkvs-controls-group {
		right: 12px;
	}

	.bkvs-slider.bkvs-controls-pos-bottom-left .bkvs-controls-group,
	.bkvs-slider.bkvs-controls-pos-bottom-center .bkvs-controls-group,
	.bkvs-slider.bkvs-controls-pos-bottom-right .bkvs-controls-group {
		bottom: 12px;
	}

	.bkvs-slider.bkvs-controls-pos-top-left .bkvs-controls-group,
	.bkvs-slider.bkvs-controls-pos-top-right .bkvs-controls-group {
		top: 12px;
	}
}

.bkvs-slider:not(.bkvs-is-initialized) .bkvs-arrow,
.bkvs-slider:not(.bkvs-is-initialized) .bkvs-dots,
.bkvs-slider:not(.bkvs-is-initialized) .bkvs-progressbar {
	display: none;
}

/* Staggered content entrance, opt-out via the "Content animations" slider
   setting (adds/omits the bkvs-content-animate modifier class - see
   includes/class-bkvs-render.php), or per-slide via the "Animation style"
   Style field (bkvs-anim-<style> modifier, independent of the slider-wide
   setting - a slide can opt in or out on its own). Re-triggers naturally
   every time .is-active is (re)added to a slide, since the animation only
   exists in the cascade while that class is present - no JS re-trigger
   needed. Duration is overridable per-slide via --bkvs-anim-duration. */
@keyframes bkvs-fade-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes bkvs-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes bkvs-zoom-in {
	from { opacity: 0; transform: scale(0.92); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes bkvs-slide-left {
	from { opacity: 0; transform: translateX(32px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes bkvs-slide-right {
	from { opacity: 0; transform: translateX(-32px); }
	to   { opacity: 1; transform: translateX(0); }
}

.bkvs-content-animate .bkvs-slide.is-active .bkvs-category,
.bkvs-content-animate .bkvs-slide.is-active .bkvs-heading,
.bkvs-content-animate .bkvs-slide.is-active .bkvs-subheading,
.bkvs-content-animate .bkvs-slide.is-active .bkvs-body,
.bkvs-content-animate .bkvs-slide.is-active .bkvs-cta {
	animation-name: bkvs-fade-up;
	animation-duration: var(--bkvs-anim-duration, 0.6s);
	animation-timing-function: ease;
	animation-fill-mode: both;
}

/* Category is now the first element in stagger order; heading through cta
   each shift back by one step (was 0/0.09/0.18/0.27s). */
.bkvs-content-animate .bkvs-slide.is-active .bkvs-heading {
	animation-delay: 0.09s;
}

.bkvs-content-animate .bkvs-slide.is-active .bkvs-subheading {
	animation-delay: 0.18s;
}

.bkvs-content-animate .bkvs-slide.is-active .bkvs-body {
	animation-delay: 0.27s;
}

.bkvs-content-animate .bkvs-slide.is-active .bkvs-cta {
	animation-delay: 0.36s;
}

/*
 * Per-slide animation-style override. Qualified with the extra .bkvs-slider
 * ancestor so these are always more specific than the slider-wide rule
 * above regardless of stylesheet order (both selectors would otherwise tie
 * at 4 classes each, making the winner order-dependent and fragile).
 */
.bkvs-slider .bkvs-slide.bkvs-anim-fade-up.is-active .bkvs-category,
.bkvs-slider .bkvs-slide.bkvs-anim-fade-up.is-active .bkvs-heading,
.bkvs-slider .bkvs-slide.bkvs-anim-fade-up.is-active .bkvs-subheading,
.bkvs-slider .bkvs-slide.bkvs-anim-fade-up.is-active .bkvs-body,
.bkvs-slider .bkvs-slide.bkvs-anim-fade-up.is-active .bkvs-cta {
	animation-name: bkvs-fade-up;
}

.bkvs-slider .bkvs-slide.bkvs-anim-fade-in.is-active .bkvs-category,
.bkvs-slider .bkvs-slide.bkvs-anim-fade-in.is-active .bkvs-heading,
.bkvs-slider .bkvs-slide.bkvs-anim-fade-in.is-active .bkvs-subheading,
.bkvs-slider .bkvs-slide.bkvs-anim-fade-in.is-active .bkvs-body,
.bkvs-slider .bkvs-slide.bkvs-anim-fade-in.is-active .bkvs-cta {
	animation-name: bkvs-fade-in;
}

.bkvs-slider .bkvs-slide.bkvs-anim-zoom-in.is-active .bkvs-category,
.bkvs-slider .bkvs-slide.bkvs-anim-zoom-in.is-active .bkvs-heading,
.bkvs-slider .bkvs-slide.bkvs-anim-zoom-in.is-active .bkvs-subheading,
.bkvs-slider .bkvs-slide.bkvs-anim-zoom-in.is-active .bkvs-body,
.bkvs-slider .bkvs-slide.bkvs-anim-zoom-in.is-active .bkvs-cta {
	animation-name: bkvs-zoom-in;
}

.bkvs-slider .bkvs-slide.bkvs-anim-slide-left.is-active .bkvs-category,
.bkvs-slider .bkvs-slide.bkvs-anim-slide-left.is-active .bkvs-heading,
.bkvs-slider .bkvs-slide.bkvs-anim-slide-left.is-active .bkvs-subheading,
.bkvs-slider .bkvs-slide.bkvs-anim-slide-left.is-active .bkvs-body,
.bkvs-slider .bkvs-slide.bkvs-anim-slide-left.is-active .bkvs-cta {
	animation-name: bkvs-slide-left;
}

.bkvs-slider .bkvs-slide.bkvs-anim-slide-right.is-active .bkvs-category,
.bkvs-slider .bkvs-slide.bkvs-anim-slide-right.is-active .bkvs-heading,
.bkvs-slider .bkvs-slide.bkvs-anim-slide-right.is-active .bkvs-subheading,
.bkvs-slider .bkvs-slide.bkvs-anim-slide-right.is-active .bkvs-body,
.bkvs-slider .bkvs-slide.bkvs-anim-slide-right.is-active .bkvs-cta {
	animation-name: bkvs-slide-right;
}

/* Per-slide options that need to win even against the slider-wide default
   (an explicit opt-out, or a plain reveal with no stagger) - !important
   here is us overriding our own more general rule on purpose, not fighting
   external CSS. */
.bkvs-slider .bkvs-slide.bkvs-anim-none.is-active .bkvs-category,
.bkvs-slider .bkvs-slide.bkvs-anim-none.is-active .bkvs-heading,
.bkvs-slider .bkvs-slide.bkvs-anim-none.is-active .bkvs-subheading,
.bkvs-slider .bkvs-slide.bkvs-anim-none.is-active .bkvs-body,
.bkvs-slider .bkvs-slide.bkvs-anim-none.is-active .bkvs-cta {
	animation: none !important;
}

.bkvs-slider .bkvs-slide.bkvs-anim-no-stagger.is-active .bkvs-category,
.bkvs-slider .bkvs-slide.bkvs-anim-no-stagger.is-active .bkvs-heading,
.bkvs-slider .bkvs-slide.bkvs-anim-no-stagger.is-active .bkvs-subheading,
.bkvs-slider .bkvs-slide.bkvs-anim-no-stagger.is-active .bkvs-body,
.bkvs-slider .bkvs-slide.bkvs-anim-no-stagger.is-active .bkvs-cta {
	animation-delay: 0s !important;
}

/*
 * Per-device visibility (Style field: Hide on mobile/tablet/desktop).
 * Uses visibility+opacity rather than display:none deliberately: the slide
 * transition math (see .bkvs-slide above) assumes every slide keeps
 * occupying its 1/total share of the track's width, so removing one from
 * layout would desync the translateX percentages and the slide count for
 * every other slide. A "hidden" slide still takes its turn in the
 * rotation, just with nothing visible/clickable in it.
 */
@media (max-width: 599px) {
	.bkvs-slide.bkvs-hide-mobile {
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}
}

@media (min-width: 600px) and (max-width: 1023px) {
	.bkvs-slide.bkvs-hide-tablet {
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	/* Only relevant in 'custom' progress-bar width mode - falls back to the
	   desktop custom width (or 100%) when no tablet-specific value is set. */
	.bkvs-progressbar {
		width: var(--bkvs-progress-width-tablet, var(--bkvs-progress-width, 100%));
	}
}

@media (min-width: 1024px) {
	.bkvs-slide.bkvs-hide-desktop {
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}
}

/*
 * Mobile tier (matches the plugin's existing 599px breakpoint, the same one
 * used above and by public/js/bkvs-slider.js's slidesPerView() logic - kept
 * a single source of truth rather than introducing a second breakpoint).
 * Previously this arrow-shrink rule used 782px, which is WordPress admin's
 * own mobile breakpoint and unrelated to this plugin's actual mobile tier -
 * a real inconsistency, fixed here alongside the new mobile-specific
 * customization fields that plug into this same block.
 */
@media (max-width: 599px) {
	.bkvs-arrow {
		width: var(--bkvs-arrow-size-mobile, var(--bkvs-arrow-size, 36px)) !important;
		height: var(--bkvs-arrow-size-mobile, var(--bkvs-arrow-size, 36px)) !important;
		font-size: 18px;
		background: var(--bkvs-arrow-bg-mobile, var(--bkvs-arrow-bg)) !important;
		color: var(--bkvs-arrow-color-mobile, var(--bkvs-arrow-color)) !important;
	}

	.bkvs-arrow-prev { left: var(--bkvs-arrow-offset-mobile, var(--bkvs-arrow-offset, 16px)); }
	.bkvs-arrow-next { right: var(--bkvs-arrow-offset-mobile, var(--bkvs-arrow-offset, 16px)); }

	.bkvs-dot {
		width: var(--bkvs-dot-size-mobile, var(--bkvs-dot-size, 10px)) !important;
		height: var(--bkvs-dot-size-mobile, var(--bkvs-dot-size, 10px)) !important;
		background: var(--bkvs-dot-color-mobile, var(--bkvs-dot-color)) !important;
	}

	.bkvs-dot.is-active {
		background: var(--bkvs-dot-color-active-mobile, var(--bkvs-dot-color-active));
	}

	.bkvs-dots {
		gap: var(--bkvs-dot-gap-mobile, var(--bkvs-dot-gap, 8px));
	}

	.bkvs-progressbar {
		/* Mobile always defaults to full width regardless of any desktop
		   custom width - a fixed px sized for a wide screen is usually wrong
		   on a narrow one. */
		width: var(--bkvs-progress-width-mobile, 100%);
		height: var(--bkvs-progress-height-mobile, var(--bkvs-progress-height, 3px)) !important;
		border-radius: var(--bkvs-progress-radius-mobile, var(--bkvs-progress-radius, 0));
		box-shadow: var(--bkvs-progress-shadow-mobile, var(--bkvs-progress-shadow, none));
	}

	.bkvs-image {
		object-fit: var(--bkvs-image-object-fit-mobile, var(--bkvs-image-object-fit, cover)) !important;
		object-position: var(--bkvs-image-object-position-mobile, var(--bkvs-image-object-position, center));
	}

	.bkvs-heading {
		font-size: var(--bkvs-heading-size-mobile, var(--bkvs-heading-size, clamp(1.5rem, 4vw, 3rem)));
		color: var(--bkvs-heading-color-mobile, var(--bkvs-heading-color));
	}

	.bkvs-subheading {
		font-size: var(--bkvs-subheading-size-mobile, var(--bkvs-subheading-size, clamp(1rem, 2vw, 1.375rem)));
		color: var(--bkvs-subheading-color-mobile, var(--bkvs-subheading-color, var(--bkvs-heading-color-mobile, var(--bkvs-heading-color))));
	}

	.bkvs-category {
		font-size: var(--bkvs-category-size-mobile, var(--bkvs-category-size, 0.875rem));
		color: var(--bkvs-category-color-mobile, var(--bkvs-category-color, rgba(255, 255, 255, 0.7)));
	}

	.bkvs-body {
		font-size: var(--bkvs-body-size-mobile, var(--bkvs-body-size, 1rem));
		color: var(--bkvs-body-color-mobile, var(--bkvs-body-color));
	}

	.bkvs-cta {
		background: var(--bkvs-cta-bg-mobile, var(--bkvs-cta-bg));
		color: var(--bkvs-cta-color-mobile, var(--bkvs-cta-color));
		border-radius: var(--bkvs-cta-radius-mobile, var(--bkvs-cta-radius, 2px));
	}

	.bkvs-cta:hover,
	.bkvs-cta:focus-visible {
		color: var(--bkvs-cta-color-mobile, var(--bkvs-cta-color));
	}

	.bkvs-logo-strip {
		gap: var(--bkvs-logo-gap-mobile, var(--bkvs-logo-gap, clamp(16px, 4vw, 48px)));
		background: var(--bkvs-logo-bg-mobile, var(--bkvs-logo-bg, #fff));
	}

	.bkvs-logo {
		max-height: var(--bkvs-logo-max-height-mobile, var(--bkvs-logo-max-height, 72px));
	}

	.bkvs-slide-content {
		padding: var(--bkvs-content-padding-mobile, var(--bkvs-content-padding, clamp(20px, 5vw, 64px)));
		max-width: var(--bkvs-content-max-width-mobile, var(--bkvs-content-max-width, 720px));
	}

	/* Arrow Shape / Controls Layout Mobile overrides - discrete choices, so
	   these swap in a different rule set entirely rather than a var(). */
	.bkvs-slider.bkvs-arrow-style-mobile-flat .bkvs-arrow {
		background: transparent !important;
		border-radius: 0 !important;
		box-shadow: none;
		width: auto !important;
		height: auto !important;
		padding: 8px !important;
	}

	.bkvs-slider.bkvs-arrow-style-mobile-circular .bkvs-arrow {
		background: var(--bkvs-arrow-bg-mobile, var(--bkvs-arrow-bg)) !important;
		border-radius: 50% !important;
		width: var(--bkvs-arrow-size-mobile, var(--bkvs-arrow-size, 36px)) !important;
		height: var(--bkvs-arrow-size-mobile, var(--bkvs-arrow-size, 36px)) !important;
		padding: 0 !important;
	}

	.bkvs-slider.bkvs-controls-mobile-split .bkvs-controls-group {
		display: contents;
		position: static !important;
	}

	.bkvs-slider.bkvs-controls-mobile-split .bkvs-arrow {
		position: absolute !important;
		top: 50%;
		left: auto;
		right: auto;
		transform: translateY(-50%);
	}

	.bkvs-slider.bkvs-controls-mobile-split .bkvs-progressbar {
		position: absolute !important;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.bkvs-slider.bkvs-controls-mobile-grouped .bkvs-controls-group {
		position: absolute !important;
		display: flex;
		align-items: center;
		gap: 16px;
		z-index: 3;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
	}

	.bkvs-slider.bkvs-controls-mobile-grouped .bkvs-arrow {
		position: static !important;
		top: auto;
		left: auto !important;
		right: auto !important;
		transform: none;
	}

	.bkvs-slider.bkvs-controls-mobile-grouped .bkvs-progressbar {
		position: static !important;
		left: auto;
		right: auto;
		bottom: auto;
	}

	.bkvs-slider.bkvs-controls-mobile-pos-bottom-left .bkvs-controls-group { left: 12px; bottom: 12px; }
	.bkvs-slider.bkvs-controls-mobile-pos-bottom-center .bkvs-controls-group { left: 50%; bottom: 12px; transform: translateX(-50%); }
	.bkvs-slider.bkvs-controls-mobile-pos-bottom-right .bkvs-controls-group { right: 12px; bottom: 12px; }
	.bkvs-slider.bkvs-controls-mobile-pos-top-left .bkvs-controls-group { left: 12px; top: 12px; }
	.bkvs-slider.bkvs-controls-mobile-pos-top-right .bkvs-controls-group { right: 12px; top: 12px; }

	/* Arrows/Dots/Progress-bar hidden on Mobile (Desktop shown, Mobile
	   override explicitly off) - see class-bkvs-render.php for when each
	   class is added; the element still renders server-side (Desktop needs
	   it) and is hidden here purely visually. */
	.bkvs-slider.bkvs-arrows-hide-mobile .bkvs-arrow,
	.bkvs-slider.bkvs-dots-hide-mobile .bkvs-dots,
	.bkvs-slider.bkvs-progressbar-hide-mobile .bkvs-progressbar {
		display: none !important;
	}
}

/* Arrows/Dots/Progress-bar hidden on Desktop (Desktop off, Mobile override
   explicitly on) - the complement of the Mobile-hide rules above. Uses the
   same 600px boundary as BREAKPOINT_MOBILE in bkvs-slider.js, so "Desktop"
   here means "not Mobile" rather than the 1024px tablet/desktop split used
   elsewhere - consistent with how slidesPerView() draws that same line. */
@media (min-width: 600px) {
	.bkvs-slider.bkvs-arrows-hide-desktop .bkvs-arrow,
	.bkvs-slider.bkvs-dots-hide-desktop .bkvs-dots,
	.bkvs-slider.bkvs-progressbar-hide-desktop .bkvs-progressbar {
		display: none !important;
	}
}

/* Small-phone floor: clamp()'s own minimums already prevent most cramping,
   but on very narrow phones the content block's padding can still eat too
   much of the available width - cap it lower here specifically. */
@media (max-width: 400px) {
	.bkvs-slide-content {
		padding: var(--bkvs-content-padding-mobile, var(--bkvs-content-padding, 16px));
	}
}

/* Ultra-wide desktop safeguard: an unbounded aspect-ratio box gets very
   tall on ultra-wide/large monitors (the reference site's own breakpoint
   scale goes up to 1850px) and can end up dominating the viewport. */
@media (min-width: 1920px) {
	.bkvs-slider.bkvs-height-mode-aspect-ratio {
		max-height: 90vh;
	}
}

/*
 * Module Layout overrides - generic Margin/Padding/Position/Width/Height
 * controls per module, set via the Slider Settings > Module Layout panel
 * (see bkvs_module_layout_schema() in includes/helpers.php for the module/
 * property list this mirrors). Every declaration falls back through
 * --bkvs-ml-<module>-<prop> to that module's own pre-existing default (a
 * literal value, an existing --bkvs-* custom property, or CSS `unset`) so
 * untouched sliders render byte-for-byte identical to before this system
 * existed - only whichever specific fields an admin actually sets change
 * anything. Desktop tier below; mobile tier (falling through to these same
 * desktop values when no mobile-specific override is set) follows in its
 * own @media (max-width: 599px) block, matching the plugin's existing
 * mobile-tier breakpoint.
 */
.bkvs-slide {
	margin-top: var(--bkvs-ml-slide-margin-top, unset);
	margin-right: var(--bkvs-ml-slide-margin-right, unset);
	margin-bottom: var(--bkvs-ml-slide-margin-bottom, unset);
	margin-left: var(--bkvs-ml-slide-margin-left, unset);
	padding-top: var(--bkvs-ml-slide-padding-top, unset);
	padding-right: var(--bkvs-ml-slide-padding-right, unset);
	padding-bottom: var(--bkvs-ml-slide-padding-bottom, unset);
	padding-left: var(--bkvs-ml-slide-padding-left, unset);
	/* !important to have any effect against this module's own structural
	   position:relative!important above (.bkvs-slide-media's inset:0 depends
	   on it) - falls back to that exact same value. */
	position: var(--bkvs-ml-slide-position, relative) !important;
	top: var(--bkvs-ml-slide-top, unset);
	right: var(--bkvs-ml-slide-right, unset);
	bottom: var(--bkvs-ml-slide-bottom, unset);
	left: var(--bkvs-ml-slide-left, unset);
}

.bkvs-slide-content {
	/*
	 * Display (Container): turns the Content block into a configurable Flex
	 * or Grid container for its own children (Category/Heading/Subheading/
	 * Body/CTA) - see the Module Layout > Content block > Display card.
	 * Every property falls back to this element's own pre-existing hardcoded
	 * default (flex/column/nowrap/0.5em gap, set above) so an untouched
	 * slider renders byte-identical to before this feature existed.
	 * align-items specifically falls through an extra --bkvs-h-align-items
	 * layer first (set by .bkvs-align-h-* above) so the existing Text
	 * Horizontal Position field keeps working as today's alignment default
	 * even once Display is switched to an explicit Flex/Grid mode - only an
	 * explicit Align Items choice below overrides it.
	 */
	display: var(--bkvs-ml-content-display, flex);
	flex-direction: var(--bkvs-ml-content-direction, column);
	flex-wrap: var(--bkvs-ml-content-wrap, nowrap);
	grid-template-columns: var(--bkvs-ml-content-grid-columns, unset);
	grid-template-rows: var(--bkvs-ml-content-grid-rows, unset);
	justify-items: var(--bkvs-ml-content-justify-items, unset);
	justify-content: var(--bkvs-ml-content-justify-content, unset);
	align-items: var(--bkvs-ml-content-align-items, var(--bkvs-h-align-items, stretch));
	align-content: var(--bkvs-ml-content-align-content, unset);
	gap: var(--bkvs-ml-content-gap, 0.5em);

	margin-top: var(--bkvs-ml-content-margin-top, unset);
	margin-right: var(--bkvs-ml-content-margin-right, unset);
	margin-bottom: var(--bkvs-ml-content-margin-bottom, unset);
	margin-left: var(--bkvs-ml-content-margin-left, unset);
	/* Falls through to the existing --bkvs-content-padding field/default (one
	   value applied to all four sides) so untouched sliders are unaffected;
	   setting any one of these new per-side fields overrides just that side. */
	padding-top: var(--bkvs-ml-content-padding-top, var(--bkvs-content-padding, clamp(20px, 5vw, 64px)));
	padding-right: var(--bkvs-ml-content-padding-right, var(--bkvs-content-padding, clamp(20px, 5vw, 64px)));
	padding-bottom: var(--bkvs-ml-content-padding-bottom, var(--bkvs-content-padding, clamp(20px, 5vw, 64px)));
	padding-left: var(--bkvs-ml-content-padding-left, var(--bkvs-content-padding, clamp(20px, 5vw, 64px)));
	position: var(--bkvs-ml-content-position, relative);
	top: var(--bkvs-ml-content-top, unset);
	right: var(--bkvs-ml-content-right, unset);
	bottom: var(--bkvs-ml-content-bottom, unset);
	left: var(--bkvs-ml-content-left, unset);
	width: var(--bkvs-ml-content-width, unset);
	height: var(--bkvs-ml-content-height, unset);
	min-width: var(--bkvs-ml-content-min-width, unset);
	/* Falls through to the Content tab's own pre-existing Max Width field
	   (--bkvs-content-max-width, 720px default) so a slider that never
	   touches this new field keeps its exact current cap - but a Max Width
	   set HERE, in the Content block's own Size card, now genuinely wins:
	   before this field existed, that 720px default silently clamped any
	   Width set above regardless of what Width asked for, since nothing
	   in this rule overrode max-width at all. */
	max-width: var(--bkvs-ml-content-max-width, var(--bkvs-content-max-width, 720px));
	min-height: var(--bkvs-ml-content-min-height, unset);
	max-height: var(--bkvs-ml-content-max-height, unset);
}

.bkvs-category {
	margin-top: var(--bkvs-ml-category-margin-top, unset);
	margin-right: var(--bkvs-ml-category-margin-right, unset);
	margin-bottom: var(--bkvs-ml-category-margin-bottom, unset);
	margin-left: var(--bkvs-ml-category-margin-left, unset);
	padding-top: var(--bkvs-ml-category-padding-top, unset);
	padding-right: var(--bkvs-ml-category-padding-right, unset);
	padding-bottom: var(--bkvs-ml-category-padding-bottom, unset);
	padding-left: var(--bkvs-ml-category-padding-left, unset);
	position: var(--bkvs-ml-category-position, unset);
	top: var(--bkvs-ml-category-top, unset);
	right: var(--bkvs-ml-category-right, unset);
	bottom: var(--bkvs-ml-category-bottom, unset);
	left: var(--bkvs-ml-category-left, unset);
	width: var(--bkvs-ml-category-width, unset);
	height: var(--bkvs-ml-category-height, unset);
}

.bkvs-heading {
	margin-top: var(--bkvs-ml-heading-margin-top, unset);
	margin-right: var(--bkvs-ml-heading-margin-right, unset);
	margin-bottom: var(--bkvs-ml-heading-margin-bottom, unset);
	margin-left: var(--bkvs-ml-heading-margin-left, unset);
	padding-top: var(--bkvs-ml-heading-padding-top, unset);
	padding-right: var(--bkvs-ml-heading-padding-right, unset);
	padding-bottom: var(--bkvs-ml-heading-padding-bottom, unset);
	padding-left: var(--bkvs-ml-heading-padding-left, unset);
	position: var(--bkvs-ml-heading-position, unset);
	top: var(--bkvs-ml-heading-top, unset);
	right: var(--bkvs-ml-heading-right, unset);
	bottom: var(--bkvs-ml-heading-bottom, unset);
	left: var(--bkvs-ml-heading-left, unset);
	width: var(--bkvs-ml-heading-width, unset);
	height: var(--bkvs-ml-heading-height, unset);
}

.bkvs-subheading {
	margin-top: var(--bkvs-ml-subheading-margin-top, unset);
	margin-right: var(--bkvs-ml-subheading-margin-right, unset);
	margin-bottom: var(--bkvs-ml-subheading-margin-bottom, unset);
	margin-left: var(--bkvs-ml-subheading-margin-left, unset);
	padding-top: var(--bkvs-ml-subheading-padding-top, unset);
	padding-right: var(--bkvs-ml-subheading-padding-right, unset);
	padding-bottom: var(--bkvs-ml-subheading-padding-bottom, unset);
	padding-left: var(--bkvs-ml-subheading-padding-left, unset);
	position: var(--bkvs-ml-subheading-position, unset);
	top: var(--bkvs-ml-subheading-top, unset);
	right: var(--bkvs-ml-subheading-right, unset);
	bottom: var(--bkvs-ml-subheading-bottom, unset);
	left: var(--bkvs-ml-subheading-left, unset);
	width: var(--bkvs-ml-subheading-width, unset);
	height: var(--bkvs-ml-subheading-height, unset);
}

.bkvs-body {
	margin-top: var(--bkvs-ml-body-margin-top, unset);
	margin-right: var(--bkvs-ml-body-margin-right, unset);
	margin-bottom: var(--bkvs-ml-body-margin-bottom, unset);
	margin-left: var(--bkvs-ml-body-margin-left, unset);
	padding-top: var(--bkvs-ml-body-padding-top, unset);
	padding-right: var(--bkvs-ml-body-padding-right, unset);
	padding-bottom: var(--bkvs-ml-body-padding-bottom, unset);
	padding-left: var(--bkvs-ml-body-padding-left, unset);
	position: var(--bkvs-ml-body-position, unset);
	top: var(--bkvs-ml-body-top, unset);
	right: var(--bkvs-ml-body-right, unset);
	bottom: var(--bkvs-ml-body-bottom, unset);
	left: var(--bkvs-ml-body-left, unset);
	width: var(--bkvs-ml-body-width, unset);
	height: var(--bkvs-ml-body-height, unset);
}

.bkvs-cta {
	/* Falls through to this element's own existing literal defaults
	   (margin-top:0.5em, padding:0.75em 1.75em, width:fit-content above) so
	   untouched sliders keep today's exact button spacing/sizing. */
	margin-top: var(--bkvs-ml-cta-margin-top, 0.5em);
	margin-right: var(--bkvs-ml-cta-margin-right, unset);
	margin-bottom: var(--bkvs-ml-cta-margin-bottom, unset);
	margin-left: var(--bkvs-ml-cta-margin-left, unset);
	padding-top: var(--bkvs-ml-cta-padding-top, 0.75em);
	padding-right: var(--bkvs-ml-cta-padding-right, 1.75em);
	padding-bottom: var(--bkvs-ml-cta-padding-bottom, 0.75em);
	padding-left: var(--bkvs-ml-cta-padding-left, 1.75em);
	position: var(--bkvs-ml-cta-position, unset);
	top: var(--bkvs-ml-cta-top, unset);
	right: var(--bkvs-ml-cta-right, unset);
	bottom: var(--bkvs-ml-cta-bottom, unset);
	left: var(--bkvs-ml-cta-left, unset);
	width: var(--bkvs-ml-cta-width, fit-content);
	height: var(--bkvs-ml-cta-height, unset);
}

.bkvs-arrow {
	/* !important: matches this module's own existing margin:0/padding:0
	   !important hardening above (see the theme-reset comment there) - falls
	   back to those exact same values. */
	margin-top: var(--bkvs-ml-arrows-margin-top, unset) !important;
	margin-right: var(--bkvs-ml-arrows-margin-right, unset) !important;
	margin-bottom: var(--bkvs-ml-arrows-margin-bottom, unset) !important;
	margin-left: var(--bkvs-ml-arrows-margin-left, unset) !important;
	padding-top: var(--bkvs-ml-arrows-padding-top, unset) !important;
	padding-right: var(--bkvs-ml-arrows-padding-right, unset) !important;
	padding-bottom: var(--bkvs-ml-arrows-padding-bottom, unset) !important;
	padding-left: var(--bkvs-ml-arrows-padding-left, unset) !important;
}

.bkvs-dots {
	margin-top: var(--bkvs-ml-dots-margin-top, unset);
	margin-right: var(--bkvs-ml-dots-margin-right, unset);
	margin-bottom: var(--bkvs-ml-dots-margin-bottom, unset);
	margin-left: var(--bkvs-ml-dots-margin-left, unset);
	padding-top: var(--bkvs-ml-dots-padding-top, unset);
	padding-right: var(--bkvs-ml-dots-padding-right, unset);
	padding-bottom: var(--bkvs-ml-dots-padding-bottom, unset);
	padding-left: var(--bkvs-ml-dots-padding-left, unset);
}

.bkvs-progressbar {
	margin-top: var(--bkvs-ml-progressbar-margin-top, unset);
	margin-right: var(--bkvs-ml-progressbar-margin-right, unset);
	margin-bottom: var(--bkvs-ml-progressbar-margin-bottom, unset);
	margin-left: var(--bkvs-ml-progressbar-margin-left, unset);
	padding-top: var(--bkvs-ml-progressbar-padding-top, unset);
	padding-right: var(--bkvs-ml-progressbar-padding-right, unset);
	padding-bottom: var(--bkvs-ml-progressbar-padding-bottom, unset);
	padding-left: var(--bkvs-ml-progressbar-padding-left, unset);
}

@media (max-width: 599px) {
	.bkvs-slide {
		margin-top: var(--bkvs-ml-slide-margin-top-mobile, var(--bkvs-ml-slide-margin-top, unset));
		margin-right: var(--bkvs-ml-slide-margin-right-mobile, var(--bkvs-ml-slide-margin-right, unset));
		margin-bottom: var(--bkvs-ml-slide-margin-bottom-mobile, var(--bkvs-ml-slide-margin-bottom, unset));
		margin-left: var(--bkvs-ml-slide-margin-left-mobile, var(--bkvs-ml-slide-margin-left, unset));
		padding-top: var(--bkvs-ml-slide-padding-top-mobile, var(--bkvs-ml-slide-padding-top, unset));
		padding-right: var(--bkvs-ml-slide-padding-right-mobile, var(--bkvs-ml-slide-padding-right, unset));
		padding-bottom: var(--bkvs-ml-slide-padding-bottom-mobile, var(--bkvs-ml-slide-padding-bottom, unset));
		padding-left: var(--bkvs-ml-slide-padding-left-mobile, var(--bkvs-ml-slide-padding-left, unset));
		position: var(--bkvs-ml-slide-position-mobile, var(--bkvs-ml-slide-position, relative)) !important;
		top: var(--bkvs-ml-slide-top-mobile, var(--bkvs-ml-slide-top, unset));
		right: var(--bkvs-ml-slide-right-mobile, var(--bkvs-ml-slide-right, unset));
		bottom: var(--bkvs-ml-slide-bottom-mobile, var(--bkvs-ml-slide-bottom, unset));
		left: var(--bkvs-ml-slide-left-mobile, var(--bkvs-ml-slide-left, unset));
	}

	.bkvs-slide-content {
		display: var(--bkvs-ml-content-display-mobile, var(--bkvs-ml-content-display, flex));
		flex-direction: var(--bkvs-ml-content-direction-mobile, var(--bkvs-ml-content-direction, column));
		flex-wrap: var(--bkvs-ml-content-wrap-mobile, var(--bkvs-ml-content-wrap, nowrap));
		grid-template-columns: var(--bkvs-ml-content-grid-columns-mobile, var(--bkvs-ml-content-grid-columns, unset));
		grid-template-rows: var(--bkvs-ml-content-grid-rows-mobile, var(--bkvs-ml-content-grid-rows, unset));
		justify-items: var(--bkvs-ml-content-justify-items-mobile, var(--bkvs-ml-content-justify-items, unset));
		justify-content: var(--bkvs-ml-content-justify-content-mobile, var(--bkvs-ml-content-justify-content, unset));
		align-items: var(--bkvs-ml-content-align-items-mobile, var(--bkvs-ml-content-align-items, var(--bkvs-h-align-items, stretch)));
		align-content: var(--bkvs-ml-content-align-content-mobile, var(--bkvs-ml-content-align-content, unset));
		gap: var(--bkvs-ml-content-gap-mobile, var(--bkvs-ml-content-gap, 0.5em));

		margin-top: var(--bkvs-ml-content-margin-top-mobile, var(--bkvs-ml-content-margin-top, unset));
		margin-right: var(--bkvs-ml-content-margin-right-mobile, var(--bkvs-ml-content-margin-right, unset));
		margin-bottom: var(--bkvs-ml-content-margin-bottom-mobile, var(--bkvs-ml-content-margin-bottom, unset));
		margin-left: var(--bkvs-ml-content-margin-left-mobile, var(--bkvs-ml-content-margin-left, unset));
		padding-top: var(--bkvs-ml-content-padding-top-mobile, var(--bkvs-ml-content-padding-top, var(--bkvs-content-padding-mobile, var(--bkvs-content-padding, clamp(20px, 5vw, 64px)))));
		padding-right: var(--bkvs-ml-content-padding-right-mobile, var(--bkvs-ml-content-padding-right, var(--bkvs-content-padding-mobile, var(--bkvs-content-padding, clamp(20px, 5vw, 64px)))));
		padding-bottom: var(--bkvs-ml-content-padding-bottom-mobile, var(--bkvs-ml-content-padding-bottom, var(--bkvs-content-padding-mobile, var(--bkvs-content-padding, clamp(20px, 5vw, 64px)))));
		padding-left: var(--bkvs-ml-content-padding-left-mobile, var(--bkvs-ml-content-padding-left, var(--bkvs-content-padding-mobile, var(--bkvs-content-padding, clamp(20px, 5vw, 64px)))));
		position: var(--bkvs-ml-content-position-mobile, var(--bkvs-ml-content-position, relative));
		top: var(--bkvs-ml-content-top-mobile, var(--bkvs-ml-content-top, unset));
		right: var(--bkvs-ml-content-right-mobile, var(--bkvs-ml-content-right, unset));
		bottom: var(--bkvs-ml-content-bottom-mobile, var(--bkvs-ml-content-bottom, unset));
		left: var(--bkvs-ml-content-left-mobile, var(--bkvs-ml-content-left, unset));
		width: var(--bkvs-ml-content-width-mobile, var(--bkvs-ml-content-width, unset));
		height: var(--bkvs-ml-content-height-mobile, var(--bkvs-ml-content-height, unset));
		min-width: var(--bkvs-ml-content-min-width-mobile, var(--bkvs-ml-content-min-width, unset));
		max-width: var(--bkvs-ml-content-max-width-mobile, var(--bkvs-ml-content-max-width, var(--bkvs-content-max-width-mobile, var(--bkvs-content-max-width, 720px))));
		min-height: var(--bkvs-ml-content-min-height-mobile, var(--bkvs-ml-content-min-height, unset));
		max-height: var(--bkvs-ml-content-max-height-mobile, var(--bkvs-ml-content-max-height, unset));
	}

	.bkvs-category {
		margin-top: var(--bkvs-ml-category-margin-top-mobile, var(--bkvs-ml-category-margin-top, unset));
		margin-right: var(--bkvs-ml-category-margin-right-mobile, var(--bkvs-ml-category-margin-right, unset));
		margin-bottom: var(--bkvs-ml-category-margin-bottom-mobile, var(--bkvs-ml-category-margin-bottom, unset));
		margin-left: var(--bkvs-ml-category-margin-left-mobile, var(--bkvs-ml-category-margin-left, unset));
		padding-top: var(--bkvs-ml-category-padding-top-mobile, var(--bkvs-ml-category-padding-top, unset));
		padding-right: var(--bkvs-ml-category-padding-right-mobile, var(--bkvs-ml-category-padding-right, unset));
		padding-bottom: var(--bkvs-ml-category-padding-bottom-mobile, var(--bkvs-ml-category-padding-bottom, unset));
		padding-left: var(--bkvs-ml-category-padding-left-mobile, var(--bkvs-ml-category-padding-left, unset));
		position: var(--bkvs-ml-category-position-mobile, var(--bkvs-ml-category-position, unset));
		top: var(--bkvs-ml-category-top-mobile, var(--bkvs-ml-category-top, unset));
		right: var(--bkvs-ml-category-right-mobile, var(--bkvs-ml-category-right, unset));
		bottom: var(--bkvs-ml-category-bottom-mobile, var(--bkvs-ml-category-bottom, unset));
		left: var(--bkvs-ml-category-left-mobile, var(--bkvs-ml-category-left, unset));
		width: var(--bkvs-ml-category-width-mobile, var(--bkvs-ml-category-width, unset));
		height: var(--bkvs-ml-category-height-mobile, var(--bkvs-ml-category-height, unset));
	}

	.bkvs-heading {
		margin-top: var(--bkvs-ml-heading-margin-top-mobile, var(--bkvs-ml-heading-margin-top, unset));
		margin-right: var(--bkvs-ml-heading-margin-right-mobile, var(--bkvs-ml-heading-margin-right, unset));
		margin-bottom: var(--bkvs-ml-heading-margin-bottom-mobile, var(--bkvs-ml-heading-margin-bottom, unset));
		margin-left: var(--bkvs-ml-heading-margin-left-mobile, var(--bkvs-ml-heading-margin-left, unset));
		padding-top: var(--bkvs-ml-heading-padding-top-mobile, var(--bkvs-ml-heading-padding-top, unset));
		padding-right: var(--bkvs-ml-heading-padding-right-mobile, var(--bkvs-ml-heading-padding-right, unset));
		padding-bottom: var(--bkvs-ml-heading-padding-bottom-mobile, var(--bkvs-ml-heading-padding-bottom, unset));
		padding-left: var(--bkvs-ml-heading-padding-left-mobile, var(--bkvs-ml-heading-padding-left, unset));
		position: var(--bkvs-ml-heading-position-mobile, var(--bkvs-ml-heading-position, unset));
		top: var(--bkvs-ml-heading-top-mobile, var(--bkvs-ml-heading-top, unset));
		right: var(--bkvs-ml-heading-right-mobile, var(--bkvs-ml-heading-right, unset));
		bottom: var(--bkvs-ml-heading-bottom-mobile, var(--bkvs-ml-heading-bottom, unset));
		left: var(--bkvs-ml-heading-left-mobile, var(--bkvs-ml-heading-left, unset));
		width: var(--bkvs-ml-heading-width-mobile, var(--bkvs-ml-heading-width, unset));
		height: var(--bkvs-ml-heading-height-mobile, var(--bkvs-ml-heading-height, unset));
	}

	.bkvs-subheading {
		margin-top: var(--bkvs-ml-subheading-margin-top-mobile, var(--bkvs-ml-subheading-margin-top, unset));
		margin-right: var(--bkvs-ml-subheading-margin-right-mobile, var(--bkvs-ml-subheading-margin-right, unset));
		margin-bottom: var(--bkvs-ml-subheading-margin-bottom-mobile, var(--bkvs-ml-subheading-margin-bottom, unset));
		margin-left: var(--bkvs-ml-subheading-margin-left-mobile, var(--bkvs-ml-subheading-margin-left, unset));
		padding-top: var(--bkvs-ml-subheading-padding-top-mobile, var(--bkvs-ml-subheading-padding-top, unset));
		padding-right: var(--bkvs-ml-subheading-padding-right-mobile, var(--bkvs-ml-subheading-padding-right, unset));
		padding-bottom: var(--bkvs-ml-subheading-padding-bottom-mobile, var(--bkvs-ml-subheading-padding-bottom, unset));
		padding-left: var(--bkvs-ml-subheading-padding-left-mobile, var(--bkvs-ml-subheading-padding-left, unset));
		position: var(--bkvs-ml-subheading-position-mobile, var(--bkvs-ml-subheading-position, unset));
		top: var(--bkvs-ml-subheading-top-mobile, var(--bkvs-ml-subheading-top, unset));
		right: var(--bkvs-ml-subheading-right-mobile, var(--bkvs-ml-subheading-right, unset));
		bottom: var(--bkvs-ml-subheading-bottom-mobile, var(--bkvs-ml-subheading-bottom, unset));
		left: var(--bkvs-ml-subheading-left-mobile, var(--bkvs-ml-subheading-left, unset));
		width: var(--bkvs-ml-subheading-width-mobile, var(--bkvs-ml-subheading-width, unset));
		height: var(--bkvs-ml-subheading-height-mobile, var(--bkvs-ml-subheading-height, unset));
	}

	.bkvs-body {
		margin-top: var(--bkvs-ml-body-margin-top-mobile, var(--bkvs-ml-body-margin-top, unset));
		margin-right: var(--bkvs-ml-body-margin-right-mobile, var(--bkvs-ml-body-margin-right, unset));
		margin-bottom: var(--bkvs-ml-body-margin-bottom-mobile, var(--bkvs-ml-body-margin-bottom, unset));
		margin-left: var(--bkvs-ml-body-margin-left-mobile, var(--bkvs-ml-body-margin-left, unset));
		padding-top: var(--bkvs-ml-body-padding-top-mobile, var(--bkvs-ml-body-padding-top, unset));
		padding-right: var(--bkvs-ml-body-padding-right-mobile, var(--bkvs-ml-body-padding-right, unset));
		padding-bottom: var(--bkvs-ml-body-padding-bottom-mobile, var(--bkvs-ml-body-padding-bottom, unset));
		padding-left: var(--bkvs-ml-body-padding-left-mobile, var(--bkvs-ml-body-padding-left, unset));
		position: var(--bkvs-ml-body-position-mobile, var(--bkvs-ml-body-position, unset));
		top: var(--bkvs-ml-body-top-mobile, var(--bkvs-ml-body-top, unset));
		right: var(--bkvs-ml-body-right-mobile, var(--bkvs-ml-body-right, unset));
		bottom: var(--bkvs-ml-body-bottom-mobile, var(--bkvs-ml-body-bottom, unset));
		left: var(--bkvs-ml-body-left-mobile, var(--bkvs-ml-body-left, unset));
		width: var(--bkvs-ml-body-width-mobile, var(--bkvs-ml-body-width, unset));
		height: var(--bkvs-ml-body-height-mobile, var(--bkvs-ml-body-height, unset));
	}

	.bkvs-cta {
		margin-top: var(--bkvs-ml-cta-margin-top-mobile, var(--bkvs-ml-cta-margin-top, 0.5em));
		margin-right: var(--bkvs-ml-cta-margin-right-mobile, var(--bkvs-ml-cta-margin-right, unset));
		margin-bottom: var(--bkvs-ml-cta-margin-bottom-mobile, var(--bkvs-ml-cta-margin-bottom, unset));
		margin-left: var(--bkvs-ml-cta-margin-left-mobile, var(--bkvs-ml-cta-margin-left, unset));
		padding-top: var(--bkvs-ml-cta-padding-top-mobile, var(--bkvs-ml-cta-padding-top, 0.75em));
		padding-right: var(--bkvs-ml-cta-padding-right-mobile, var(--bkvs-ml-cta-padding-right, 1.75em));
		padding-bottom: var(--bkvs-ml-cta-padding-bottom-mobile, var(--bkvs-ml-cta-padding-bottom, 0.75em));
		padding-left: var(--bkvs-ml-cta-padding-left-mobile, var(--bkvs-ml-cta-padding-left, 1.75em));
		position: var(--bkvs-ml-cta-position-mobile, var(--bkvs-ml-cta-position, unset));
		top: var(--bkvs-ml-cta-top-mobile, var(--bkvs-ml-cta-top, unset));
		right: var(--bkvs-ml-cta-right-mobile, var(--bkvs-ml-cta-right, unset));
		bottom: var(--bkvs-ml-cta-bottom-mobile, var(--bkvs-ml-cta-bottom, unset));
		left: var(--bkvs-ml-cta-left-mobile, var(--bkvs-ml-cta-left, unset));
		width: var(--bkvs-ml-cta-width-mobile, var(--bkvs-ml-cta-width, fit-content));
		height: var(--bkvs-ml-cta-height-mobile, var(--bkvs-ml-cta-height, unset));
	}

	.bkvs-arrow {
		margin-top: var(--bkvs-ml-arrows-margin-top-mobile, var(--bkvs-ml-arrows-margin-top, unset)) !important;
		margin-right: var(--bkvs-ml-arrows-margin-right-mobile, var(--bkvs-ml-arrows-margin-right, unset)) !important;
		margin-bottom: var(--bkvs-ml-arrows-margin-bottom-mobile, var(--bkvs-ml-arrows-margin-bottom, unset)) !important;
		margin-left: var(--bkvs-ml-arrows-margin-left-mobile, var(--bkvs-ml-arrows-margin-left, unset)) !important;
		padding-top: var(--bkvs-ml-arrows-padding-top-mobile, var(--bkvs-ml-arrows-padding-top, unset)) !important;
		padding-right: var(--bkvs-ml-arrows-padding-right-mobile, var(--bkvs-ml-arrows-padding-right, unset)) !important;
		padding-bottom: var(--bkvs-ml-arrows-padding-bottom-mobile, var(--bkvs-ml-arrows-padding-bottom, unset)) !important;
		padding-left: var(--bkvs-ml-arrows-padding-left-mobile, var(--bkvs-ml-arrows-padding-left, unset)) !important;
	}

	.bkvs-dots {
		margin-top: var(--bkvs-ml-dots-margin-top-mobile, var(--bkvs-ml-dots-margin-top, unset));
		margin-right: var(--bkvs-ml-dots-margin-right-mobile, var(--bkvs-ml-dots-margin-right, unset));
		margin-bottom: var(--bkvs-ml-dots-margin-bottom-mobile, var(--bkvs-ml-dots-margin-bottom, unset));
		margin-left: var(--bkvs-ml-dots-margin-left-mobile, var(--bkvs-ml-dots-margin-left, unset));
		padding-top: var(--bkvs-ml-dots-padding-top-mobile, var(--bkvs-ml-dots-padding-top, unset));
		padding-right: var(--bkvs-ml-dots-padding-right-mobile, var(--bkvs-ml-dots-padding-right, unset));
		padding-bottom: var(--bkvs-ml-dots-padding-bottom-mobile, var(--bkvs-ml-dots-padding-bottom, unset));
		padding-left: var(--bkvs-ml-dots-padding-left-mobile, var(--bkvs-ml-dots-padding-left, unset));
	}

	.bkvs-progressbar {
		margin-top: var(--bkvs-ml-progressbar-margin-top-mobile, var(--bkvs-ml-progressbar-margin-top, unset));
		margin-right: var(--bkvs-ml-progressbar-margin-right-mobile, var(--bkvs-ml-progressbar-margin-right, unset));
		margin-bottom: var(--bkvs-ml-progressbar-margin-bottom-mobile, var(--bkvs-ml-progressbar-margin-bottom, unset));
		margin-left: var(--bkvs-ml-progressbar-margin-left-mobile, var(--bkvs-ml-progressbar-margin-left, unset));
		padding-top: var(--bkvs-ml-progressbar-padding-top-mobile, var(--bkvs-ml-progressbar-padding-top, unset));
		padding-right: var(--bkvs-ml-progressbar-padding-right-mobile, var(--bkvs-ml-progressbar-padding-right, unset));
		padding-bottom: var(--bkvs-ml-progressbar-padding-bottom-mobile, var(--bkvs-ml-progressbar-padding-bottom, unset));
		padding-left: var(--bkvs-ml-progressbar-padding-left-mobile, var(--bkvs-ml-progressbar-padding-left, unset));
	}
}

@media (prefers-reduced-motion: reduce) {
	.bkvs-track,
	.bkvs-slide,
	.bkvs-facade-play,
	.bkvs-cta {
		transition-duration: 0.01ms !important;
	}

	.bkvs-progressbar .fill {
		animation: none !important;
	}

	.bkvs-content-animate .bkvs-slide.is-active .bkvs-category,
	.bkvs-content-animate .bkvs-slide.is-active .bkvs-heading,
	.bkvs-content-animate .bkvs-slide.is-active .bkvs-subheading,
	.bkvs-content-animate .bkvs-slide.is-active .bkvs-body,
	.bkvs-content-animate .bkvs-slide.is-active .bkvs-cta,
	.bkvs-slider .bkvs-slide[class*="bkvs-anim-"].is-active .bkvs-category,
	.bkvs-slider .bkvs-slide[class*="bkvs-anim-"].is-active .bkvs-heading,
	.bkvs-slider .bkvs-slide[class*="bkvs-anim-"].is-active .bkvs-subheading,
	.bkvs-slider .bkvs-slide[class*="bkvs-anim-"].is-active .bkvs-body,
	.bkvs-slider .bkvs-slide[class*="bkvs-anim-"].is-active .bkvs-cta {
		animation: none !important;
	}
}