.bdec {
	--bdec-height: 360px;
	--bdec-gap: 14px;
	--bdec-items-visible: 4;
	--bdec-active-ratio: 3.6;
	--bdec-inactive-ratio: 1;
	--bdec-active-width: 50%;
	--bdec-inactive-width: 16%;
	--bdec-duration: 500ms;
	--bdec-easing: cubic-bezier(0.22, 1, 0.36, 1);
	--bdec-inactive-opacity: 1;
	--bdec-inactive-scale: 1;
	--bdec-arrow-size: 38px;
	--bdec-arrow-icon-size: 16px;
	--bdec-arrow-offset: -18px;

	position: relative;
	width: 100%;
	min-width: 0;
}

.bdec__viewport {
	position: relative;
	width: 100%;
	min-width: 0;
	overflow: hidden;
}

/*
 * Clip slides at the left and right edges only, so slide shadows aren't cut off
 * at the top and bottom. The clip margin lets side shadows show without
 * revealing an off-screen slide, which always sits at least one gap away.
 * Browsers without overflow: clip keep the plain overflow: hidden above.
 */
@supports (overflow-x: clip) {
	.bdec__viewport {
		overflow-x: clip;
		overflow-y: visible;
		overflow-clip-margin: var(--bdec-gap);
	}
}

.bdec__track {
	display: flex;
	align-items: stretch;
	gap: var(--bdec-gap);
	width: max-content;
	min-width: 100%;
	height: var(--bdec-height);
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

/*
 * The nested Elementor containers are the slides. The second selector pair is
 * important inside the editor before our runtime JS has attached bdec__slide.
 */
.bdec__slide,
.bdec__track > .e-con,
.bdec__track > .elementor-element {
	position: relative;
	flex: 0 0 var(--bdec-inactive-width);
	width: var(--bdec-inactive-width);
	max-width: none !important;
	height: var(--bdec-height) !important;
	min-height: var(--bdec-height) !important;
	min-width: 0;
	/* Keeps the Active Background layer (z-index: -1 below) inside the slide. */
	isolation: isolate;
	opacity: var(--bdec-inactive-opacity);
	transform: translate3d(var(--bdec-slide-shift, 0px), 0, 0) scale(var(--bdec-inactive-scale));
	transform-origin: center center;
	transition:
		flex-basis var(--bdec-duration) var(--bdec-easing),
		width var(--bdec-duration) var(--bdec-easing),
		transform var(--bdec-duration) var(--bdec-easing),
		opacity var(--bdec-duration) var(--bdec-easing),
		box-shadow var(--bdec-duration) var(--bdec-easing),
		border-color var(--bdec-duration) var(--bdec-easing);
}

/*
 * The track-scoped selectors match the specificity of `.bdec__track > .e-con`
 * above; without them the collapsed width always wins on Elementor containers.
 */
.bdec__slide--active,
.bdec__slide--preview,
.bdec__track > .bdec__slide--active,
.bdec__track > .bdec__slide--preview {
	flex-basis: var(--bdec-active-width);
	width: var(--bdec-active-width);
	opacity: 1;
	transform: translate3d(var(--bdec-slide-shift, 0px), 0, 0) scale(1);
	z-index: 2;
}

.bdec-clip-yes .bdec__slide,
.bdec-clip-yes .bdec__track > .e-con,
.bdec-clip-yes .bdec__track > .elementor-element {
	overflow: hidden;
}

/*
 * Slide container Style > "Background (Active Slide)". Elementor paints it on
 * this ::after, which only exists once that option is set (--bdec-active-bg),
 * behind the slide's content and above its normal (collapsed) background, and
 * it cross-fades in while the slide is expanded.
 */
.bdec__track > .bdec__slide::after {
	content: var(--bdec-active-bg);
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--bdec-duration) var(--bdec-easing);
}

.bdec__track > .bdec__slide--active::after {
	opacity: 1;
}

.bdec--clickable .bdec__slide:not(.bdec__slide--active) {
	cursor: pointer;
}

.bdec--dragging,
.bdec--dragging .bdec__slide {
	cursor: grabbing !important;
}

/*
 * Prevent the DOM recycle at the end of an infinite-loop step from animating,
 * including active/inactive-only content when a real slide replaces its copy.
 */
.bdec--settling .bdec__slide,
.bdec--settling .bdec__slide::after,
.bdec--settling .bdec-visibility-active,
.bdec--settling .bdec-visibility-inactive {
	transition: none !important;
}

/* Stand-in copies that fill the loop's incoming slots (see makeClone in the JS). */
.bdec__slide--clone {
	pointer-events: none;
}

/* Auto Scroll: the runtime sets slide widths and the track position every frame. */
.bdec--flow .bdec__track > .bdec__slide {
	transition-property: transform, opacity, box-shadow, border-color;
}

.bdec--flow .bdec__track {
	will-change: transform;
}

/* =========================================================
   PER-ELEMENT ACTIVE / INACTIVE VISIBILITY
   These classes are injected by Elementor controls on inner widgets/containers.
========================================================= */

.bdec .bdec-visibility-active,
.bdec .bdec-visibility-inactive {
	transition:
		opacity var(--bdec-duration) var(--bdec-easing),
		visibility var(--bdec-duration) var(--bdec-easing),
		transform var(--bdec-duration) var(--bdec-easing);
}

/*
 * These apply in the Elementor editor too, so the canvas matches the live page.
 * The element currently being edited (.elementor-element-editable, editor only)
 * is never hidden.
 */

/* Active-only element while its slide is collapsed. */
.bdec .bdec__slide:not(.bdec__slide--active):not(.bdec__slide--preview) .bdec-visibility-active:not(.bdec-hidden-fade):not(.elementor-element-editable) {
	display: none !important;
}

.bdec .bdec__slide:not(.bdec__slide--active):not(.bdec__slide--preview) .bdec-visibility-active.bdec-hidden-fade:not(.elementor-element-editable) {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Inactive-only element while its slide is active/previewed. */
.bdec .bdec__slide--active .bdec-visibility-inactive:not(.bdec-hidden-fade):not(.elementor-element-editable),
.bdec .bdec__slide--preview .bdec-visibility-inactive:not(.bdec-hidden-fade):not(.elementor-element-editable) {
	display: none !important;
}

.bdec .bdec__slide--active .bdec-visibility-inactive.bdec-hidden-fade:not(.elementor-element-editable),
.bdec .bdec__slide--preview .bdec-visibility-inactive.bdec-hidden-fade:not(.elementor-element-editable) {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* =========================================================
   NAVIGATION
========================================================= */

.bdec__arrow {
	position: absolute;
	top: 50%;
	z-index: 15;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--bdec-arrow-size);
	height: var(--bdec-arrow-size);
	padding: 0;
	margin: 0;
	border: 0;
	line-height: 1;
	font-size: var(--bdec-arrow-icon-size);
	transform: translateY(-50%);
	cursor: pointer;
	transition:
		color 180ms ease,
		background-color 180ms ease,
		border-color 180ms ease,
		box-shadow 180ms ease,
		transform 180ms ease;
}

.bdec__arrow svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.bdec__arrow--prev {
	left: var(--bdec-arrow-offset);
}

.bdec__arrow--next {
	right: var(--bdec-arrow-offset);
}

.bdec__arrow:hover,
.bdec__arrow:focus-visible {
	transform: translateY(-50%) scale(1.04);
}

.bdec__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.bdec__empty {
	padding: 20px;
	border: 1px dashed #c8c8c8;
	text-align: center;
}

/* On one-item layouts the active slide naturally occupies the whole viewport. */
@media (max-width: 767px) {
	.bdec__arrow--prev {
		left: max(4px, var(--bdec-arrow-offset));
	}

	.bdec__arrow--next {
		right: max(4px, var(--bdec-arrow-offset));
	}
}

@media (prefers-reduced-motion: reduce) {
	.bdec[data-editor="yes"] .bdec__track,
	.bdec__slide,
	.bdec__slide::after,
	.bdec__track > .e-con,
	.bdec__track > .elementor-element,
	.bdec .bdec-visibility-active,
	.bdec .bdec-visibility-inactive {
		transition-duration: 0.01ms !important;
	}
}

/* =========================================================
   ELEMENTOR EDITOR CANVAS
   The editor previews the same expand/collapse sizing as the frontend. Instead
   of looping by moving DOM nodes, the track slides to the active slide, so
   Elementor's element order (and the Navigator) is never changed while building.
   Hover preview, autoplay and drag are frontend-only.
========================================================= */
.bdec[data-editor="yes"] .bdec__track {
	transform: translate3d(var(--bdec-editor-offset, 0px), 0, 0);
	transition: transform var(--bdec-duration) var(--bdec-easing);
	touch-action: auto;
	user-select: auto;
	-webkit-user-select: auto;
}

.bdec[data-editor="yes"] .bdec__slide:not(.bdec__slide--active) {
	cursor: pointer;
}

.bdec[data-editor="yes"] .bdec__arrow {
	z-index: 50;
}

/*
 * The editor template always prints the arrows so toggling Navigation Arrows only
 * swaps the wrapper's bdec-arrows-yes class instead of re-rendering the widget.
 * (On the live page the arrows aren't printed at all when they're off.)
 */
.elementor-widget-bd-expand-carousel:not(.bdec-arrows-yes) > .bdec[data-editor="yes"] > .bdec__arrow,
.elementor-widget-bd-expand-carousel:not(.bdec-arrows-yes) > .elementor-widget-container > .bdec[data-editor="yes"] > .bdec__arrow {
	display: none;
}

/* v1.0.2 editor authoring helpers. These styles are editor-only because the
   data-editor attribute is never "yes" on the live frontend. */
.bdec[data-editor="yes"] .bdec__track:empty::before {
	content: "Loading slide containers…";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 160px;
	padding: 24px;
	border: 1px dashed #a7a7a7;
	color: #666;
	font-size: 13px;
	text-align: center;
}

.bdec[data-editor="yes"] .bdec__slide,
.bdec[data-editor="yes"] .bdec__track > .e-con,
.bdec[data-editor="yes"] .bdec__track > .elementor-element {
	outline: 1px dashed rgba(145, 36, 71, 0.25);
	outline-offset: -1px;
}

.bdec[data-editor="yes"] .bdec__slide:hover,
.bdec[data-editor="yes"] .bdec__track > .e-con:hover,
.bdec[data-editor="yes"] .bdec__track > .elementor-element:hover {
	outline-color: rgba(145, 36, 71, 0.7);
}