/*!
 * Center Focus Image Slider for Elementor
 *
 * The whole layout is expressed with CSS custom properties on `.cfs`.
 * Elementor controls only overwrite those properties, and the script only
 * tells each slide how far it is from the centre (--cfs-d / --cfs-sign).
 *
 * No font-family is declared anywhere: text inherits the theme / Elementor
 * typography.
 */

/* ---------------------------------------------------------------------------
 * Tokens (defaults — every one of them has an Elementor control)
 * ------------------------------------------------------------------------- */
.cfs {
	--cfs-accent: #FED650;

	/* Layout */
	--cfs-height: 560px;
	--cfs-spv: 2;
	--cfs-gap: 24px;
	--cfs-origin-y: 0.5;

	/* Motion */
	--cfs-speed: 600ms;
	--cfs-content-speed: 500ms;
	--cfs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Active / inactive slides */
	--cfs-active-scale: 1;
	--cfs-active-opacity: 1;
	--cfs-active-radius: 14px;
	--cfs-inactive-scale: 0.88;
	--cfs-inactive-opacity: 0.6;
	--cfs-inactive-radius: 14px;
	--cfs-inactive-grayscale: 0%;

	/* Image + overlays */
	--cfs-image-position: center center;
	--cfs-zoom: 1.03;
	--cfs-overlay-color: #000;
	--cfs-overlay-opacity: 0.15;
	--cfs-gradient-color: #000;
	--cfs-gradient-opacity: 0.9;
	--cfs-gradient-height: 65%;

	/* Content */
	--cfs-text-align: left;
	--cfs-number-color: #fff;
	--cfs-number-bg: transparent;
	--cfs-number-top: 22px;
	--cfs-number-left: 24px;
	--cfs-label-color: var(--cfs-accent);
	--cfs-label-gap: 8px;
	--cfs-title-color: #fff;
	--cfs-title-gap: 12px;
	--cfs-desc-color: rgba(255, 255, 255, 0.82);
	--cfs-desc-gap: 18px;
	--cfs-desc-width: 460px;

	/* Button */
	--cfs-btn-color: #0b0b0b;
	--cfs-btn-bg: var(--cfs-accent);
	--cfs-btn-hover-color: #0b0b0b;
	--cfs-btn-hover-bg: #fff;

	/* Arrows */
	--cfs-arrow-size: 52px;
	--cfs-arrow-icon: calc(var(--cfs-arrow-size) * 0.42);
	--cfs-arrow-radius: 50%;
	--cfs-arrow-color: #0b0b0b;
	--cfs-arrow-bg: var(--cfs-accent);
	--cfs-arrow-hover-color: #0b0b0b;
	--cfs-arrow-hover-bg: #fff;
	--cfs-arrow-x: 24px;
	--cfs-arrow-y: 0px;

	/* Pagination */
	--cfs-dot-size: 8px;
	--cfs-dot-gap: 10px;
	--cfs-dot-color: rgba(255, 255, 255, 0.4);
	--cfs-dot-active: var(--cfs-accent);
	--cfs-dot-active-width: 28px;
	--cfs-controls-gap: 28px;

	/* Derived — do not override */
	--cfs-max-scale: max(var(--cfs-active-scale), var(--cfs-inactive-scale));
	--cfs-stage-height: calc(var(--cfs-height) * var(--cfs-max-scale));
	--cfs-auto-width: calc(
		(100% - (var(--cfs-spv) - 1) * var(--cfs-gap)) /
		(var(--cfs-active-scale) + (var(--cfs-spv) - 1) * var(--cfs-inactive-scale))
	);

	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Fallback responsive defaults (Elementor's responsive controls override these). */
@media (max-width: 1024px) {
	.cfs {
		--cfs-height: 480px;
		--cfs-spv: 1.6;
		--cfs-gap: 18px;
	}
}

@media (max-width: 767px) {
	.cfs {
		--cfs-height: 440px;
		--cfs-spv: 1.15;
		--cfs-gap: 12px;
		--cfs-arrow-size: 42px;
		--cfs-arrow-x: 10px;
		--cfs-number-top: 16px;
		--cfs-number-left: 18px;
	}
}

.cfs *,
.cfs *::before,
.cfs *::after {
	box-sizing: border-box;
}

/* Slider > Alignment (when Width is below 100%). */
.cfs-align-left .cfs {
	margin-left: 0;
}

.cfs-align-right .cfs {
	margin-right: 0;
}

/* ---------------------------------------------------------------------------
 * Stage, viewport, track
 * ------------------------------------------------------------------------- */
.cfs__stage {
	position: relative;
}

.cfs__viewport {
	position: relative;
	height: var(--cfs-stage-height);
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
}

/* Clip horizontally only, so the active slide's shadow can show above / below. */
@supports (overflow: clip) {
	.cfs__viewport {
		overflow-x: clip;
		overflow-y: visible;
	}
}

.cfs__track {
	position: relative;
	width: 100%;
	height: 100%;
	transition: opacity 180ms ease;
}

.cfs.is-jumping .cfs__track {
	opacity: 0;
}

.cfs__probe {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--cfs-gap);
	height: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Slide — every slide has the same box; the centre one is scale(active),
 * the others scale(inactive). Positions are pure transforms, so changing
 * slide never triggers layout.
 *
 *   --cfs-d     distance from the active slide (…-2, -1, 0, 1, 2…)
 *   --cfs-sign  -1, 0 or 1
 *   --cfs-drag  live drag offset in px
 * ------------------------------------------------------------------------- */
.cfs__slide {
	--cfs-d: 0;
	--cfs-sign: 0;
	--cfs-scale: var(--cfs-inactive-scale);

	position: absolute;
	top: calc((var(--cfs-stage-height) - var(--cfs-height)) * var(--cfs-origin-y));
	left: 50%;
	z-index: 1;
	width: var(--cfs-card-width, var(--cfs-auto-width));
	height: var(--cfs-height);
	margin: 0;
	opacity: var(--cfs-inactive-opacity);
	cursor: pointer;
	transform-origin: 50% calc(100% * var(--cfs-origin-y));
	transform:
		translate3d(
			calc(
				-50% + var(--cfs-drag, 0px) +
				var(--cfs-sign) * 50% * (var(--cfs-active-scale) - var(--cfs-inactive-scale)) +
				var(--cfs-d) * (100% * var(--cfs-inactive-scale) + var(--cfs-gap))
			),
			0,
			0
		)
		scale(var(--cfs-scale));
	transition:
		transform var(--cfs-speed) var(--cfs-ease),
		opacity var(--cfs-speed) var(--cfs-ease),
		visibility 0s;
}

.cfs__slide.is-active {
	--cfs-scale: var(--cfs-active-scale);

	z-index: 2;
	opacity: var(--cfs-active-opacity);
	cursor: default;
}

/* Slides far outside the viewport: skipped by the renderer once they have left. */
.cfs__slide.is-far {
	visibility: hidden;
	transition:
		transform var(--cfs-speed) var(--cfs-ease),
		opacity var(--cfs-speed) var(--cfs-ease),
		visibility 0s linear var(--cfs-speed);
}

.cfs.is-dragging .cfs__slide,
.cfs__track.is-instant .cfs__slide,
.cfs__slide.is-teleport {
	transition: none !important;
}

.cfs--draggable .cfs__viewport {
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.cfs--draggable.is-dragging .cfs__viewport,
.cfs--draggable.is-dragging .cfs__slide {
	cursor: grabbing;
}

/* ---------------------------------------------------------------------------
 * Card
 * ------------------------------------------------------------------------- */
.cfs__card {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: var(--cfs-inactive-radius);
	background-color: #111;
	isolation: isolate;
	transition:
		border-radius var(--cfs-speed) var(--cfs-ease),
		box-shadow var(--cfs-speed) var(--cfs-ease);
}

.cfs__slide.is-active .cfs__card {
	border-radius: var(--cfs-active-radius);
}

.cfs__media,
.cfs__overlay,
.cfs__frame {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.cfs__media {
	z-index: 0;
	overflow: hidden;
}

.cfs .cfs__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: var(--cfs-image-position);
	transform: scale(1);
	transition:
		transform 900ms var(--cfs-ease),
		filter var(--cfs-speed) var(--cfs-ease);
	pointer-events: none;
	-webkit-user-drag: none;
}

/* Optional: desaturate the side slides (class added only when the value is above 0). */
.cfs--gray .cfs__slide:not(.is-active) .cfs__img {
	filter: grayscale(var(--cfs-inactive-grayscale));
}

@media (hover: hover) {
	.cfs--zoom:not(.is-dragging) .cfs__slide:hover .cfs__img {
		transform: scale(var(--cfs-zoom));
	}
}

.cfs__overlay {
	z-index: 1;
	background-color: var(--cfs-overlay-color);
	opacity: var(--cfs-overlay-opacity);
	pointer-events: none;
}

.cfs__gradient {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	height: var(--cfs-gradient-height);
	background-image: linear-gradient(to top, var(--cfs-gradient-color) 0%, transparent 100%);
	opacity: var(--cfs-gradient-opacity);
	pointer-events: none;
}

/* Eased gradient: stronger near the bottom, softer towards the top. */
@supports (color: color-mix(in srgb, #000 50%, transparent)) {
	.cfs__gradient {
		background-image: linear-gradient(
			to top,
			var(--cfs-gradient-color) 0%,
			color-mix(in srgb, var(--cfs-gradient-color) 74%, transparent) 28%,
			color-mix(in srgb, var(--cfs-gradient-color) 32%, transparent) 62%,
			transparent 100%
		);
	}
}

/* Border lives on its own layer so it never shifts the card content. */
.cfs__frame {
	z-index: 4;
	border-radius: inherit;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Number
 * ------------------------------------------------------------------------- */
.cfs .cfs__number {
	position: absolute;
	top: var(--cfs-number-top);
	left: var(--cfs-number-left);
	z-index: 3;
	margin: 0;
	padding: 0;
	background-color: var(--cfs-number-bg);
	color: var(--cfs-number-color);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Content
 * ------------------------------------------------------------------------- */
.cfs .cfs__content {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	padding: 28px 30px 30px;
	text-align: var(--cfs-text-align);
	transition:
		opacity var(--cfs-content-speed) ease,
		transform var(--cfs-content-speed) var(--cfs-ease);
}

@media (max-width: 767px) {
	.cfs .cfs__content {
		padding: 20px 20px 22px;
	}
}

.cfs .cfs__label {
	display: block;
	margin: 0 0 var(--cfs-label-gap);
	color: var(--cfs-label-color);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.cfs .cfs__title {
	margin: 0;
	padding: 0;
	color: var(--cfs-title-color);
	font-size: clamp(22px, 2.3vw, 38px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.cfs .cfs__title::before,
.cfs .cfs__title::after {
	content: none;
}

/* Description + button collapse on side slides and open on the active one. */
.cfs__reveal {
	display: grid;
	grid-template-rows: 1fr;
}

/* line-height: 0 removes the inherited line strut, so the spacing between the
   inline-level description and button is exactly what the controls say. */
.cfs__reveal-inner {
	min-height: 0;
	overflow: hidden;
	line-height: 0;
}

.cfs .cfs__reveal-inner > :first-child {
	margin-top: var(--cfs-title-gap);
}

.cfs .cfs__desc {
	display: inline-block;
	width: 100%;
	max-width: var(--cfs-desc-width);
	margin: 0;
	padding: 0;
	vertical-align: top;
	color: var(--cfs-desc-color);
	font-size: 15px;
	line-height: 1.5;
}

.cfs .cfs__desc + .cfs__actions {
	margin-top: var(--cfs-desc-gap);
}

/* ---------------------------------------------------------------------------
 * Button
 * ------------------------------------------------------------------------- */
.cfs .cfs__btn,
.cfs .cfs__btn:visited {
	display: inline-flex;
	align-items: center;
	vertical-align: top;
	gap: 10px;
	margin: 0;
	padding: 12px 22px;
	border: 0;
	border-radius: 999px;
	background-color: var(--cfs-btn-bg);
	color: var(--cfs-btn-color);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: none;
	cursor: pointer;
	transition:
		background-color 250ms ease,
		color 250ms ease,
		border-color 250ms ease,
		box-shadow 250ms ease;
}

.cfs .cfs__btn:hover,
.cfs .cfs__btn:focus-visible {
	background-color: var(--cfs-btn-hover-bg);
	color: var(--cfs-btn-hover-color);
	text-decoration: none;
}

/* Inset ring: the button sits in a clipped container, so no outer outline. */
.cfs .cfs__btn:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px currentColor;
}

.cfs__btn-icon {
	flex: none;
	width: 1.15em;
	height: 1.15em;
	transition: transform 250ms var(--cfs-ease);
}

.cfs .cfs__btn:hover .cfs__btn-icon {
	transform: translateX(3px);
}

/* ---------------------------------------------------------------------------
 * Content states: side slides vs. active slide
 * ------------------------------------------------------------------------- */

/* "Label + Title" and "Hidden": collapse description + button on side slides. */
.cfs--side-title .cfs__slide:not(.is-active) .cfs__reveal,
.cfs--side-none .cfs__slide:not(.is-active) .cfs__reveal {
	grid-template-rows: 0fr;
}

.cfs--side-title .cfs__slide:not(.is-active) .cfs__desc,
.cfs--side-title .cfs__slide:not(.is-active) .cfs__actions,
.cfs--side-none .cfs__slide:not(.is-active) .cfs__desc,
.cfs--side-none .cfs__slide:not(.is-active) .cfs__actions {
	opacity: 0;
	transform: translate3d(0, 15px, 0);
}

.cfs--side-title .cfs__slide:not(.is-active) .cfs__label {
	opacity: 0.7;
}

/* "Hidden": the whole text block fades away on side slides. */
.cfs--side-none .cfs__slide:not(.is-active) .cfs__content {
	opacity: 0;
	transform: translate3d(0, 15px, 0);
	pointer-events: none;
}

/* Subtle, staggered entrance on the active slide. */
.cfs--animate .cfs__reveal {
	transition: grid-template-rows var(--cfs-content-speed) var(--cfs-ease);
}

.cfs--animate .cfs__label,
.cfs--animate .cfs__desc,
.cfs--animate .cfs__actions {
	transition:
		opacity var(--cfs-content-speed) ease,
		transform var(--cfs-content-speed) var(--cfs-ease);
}

.cfs--animate .cfs__slide.is-active .cfs__desc {
	transition-delay: 90ms;
}

.cfs--animate .cfs__slide.is-active .cfs__actions {
	transition-delay: 170ms;
}

.cfs:not(.cfs--animate) .cfs__content {
	transition: none;
}

/* ---------------------------------------------------------------------------
 * Arrows
 * ------------------------------------------------------------------------- */
.cfs .cfs__arrow,
.cfs .cfs__arrow:hover,
.cfs .cfs__arrow:focus,
.cfs .cfs__arrow:active {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--cfs-arrow-size);
	height: var(--cfs-arrow-size);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--cfs-arrow-radius);
	background: var(--cfs-arrow-bg);
	color: var(--cfs-arrow-color);
	font-size: 0;
	line-height: 0;
	box-shadow: none;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition:
		background-color 250ms ease,
		color 250ms ease,
		border-color 250ms ease,
		opacity 250ms ease,
		transform 250ms var(--cfs-ease);
}

.cfs .cfs__arrow:hover,
.cfs .cfs__arrow:focus-visible {
	background: var(--cfs-arrow-hover-bg);
	color: var(--cfs-arrow-hover-color);
}

.cfs .cfs__arrow:focus {
	outline: none;
}

.cfs .cfs__arrow:focus-visible {
	outline: 2px solid var(--cfs-accent);
	outline-offset: 3px;
}

.cfs .cfs__arrow:active {
	transform: scale(0.94);
}

.cfs .cfs__arrow[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.cfs__arrow-icon {
	display: block;
	width: var(--cfs-arrow-icon);
	height: var(--cfs-arrow-icon);
	pointer-events: none;
}

/* Arrows over the slider. */
.cfs--nav-sides .cfs__stage > .cfs__arrow,
.cfs--nav-sides .cfs__stage > .cfs__arrow:hover,
.cfs--nav-sides .cfs__stage > .cfs__arrow:focus {
	position: absolute;
	top: calc(50% + var(--cfs-arrow-y));
	z-index: 5;
	margin-top: calc(var(--cfs-arrow-size) / -2);
}

.cfs--nav-sides .cfs__stage > .cfs__arrow--prev {
	left: var(--cfs-arrow-x);
}

.cfs--nav-sides .cfs__stage > .cfs__arrow--next {
	right: var(--cfs-arrow-x);
}

/* ---------------------------------------------------------------------------
 * Controls row (pagination + arrows placed below)
 * ------------------------------------------------------------------------- */
.cfs__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 24px;
	margin-top: var(--cfs-controls-gap);
	padding: 0 var(--cfs-arrow-x);
}

.cfs__arrows {
	display: flex;
	flex: none;
	gap: 12px;
}

.cfs__controls .cfs__arrow {
	position: relative;
	top: var(--cfs-arrow-y);
}

/* Below, centred: [prev] dots [next] */
.cfs--nav-bottom-center .cfs__arrows {
	display: contents;
}

.cfs--nav-bottom-center .cfs__arrow--prev {
	order: 1;
}

.cfs--nav-bottom-center .cfs__dots {
	order: 2;
}

.cfs--nav-bottom-center .cfs__arrow--next {
	order: 3;
}

/* Below, right: dots left, arrows right */
.cfs--nav-bottom-right .cfs__controls,
.cfs--nav-bottom-left .cfs__controls {
	justify-content: space-between;
}

.cfs--nav-bottom-right .cfs__dots {
	order: 1;
}

.cfs--nav-bottom-right .cfs__arrows {
	order: 2;
	margin-left: auto;
}

/* Below, left: arrows left, dots right */
.cfs--nav-bottom-left .cfs__arrows {
	order: 1;
}

.cfs--nav-bottom-left .cfs__dots {
	order: 2;
	margin-left: auto;
}

/* ---------------------------------------------------------------------------
 * Pagination
 * ------------------------------------------------------------------------- */
.cfs__dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--cfs-dot-gap);
	min-width: 0;
}

.cfs .cfs__dot,
.cfs .cfs__dot:hover,
.cfs .cfs__dot:focus,
.cfs .cfs__dot:active {
	position: relative;
	display: block;
	flex: none;
	width: var(--cfs-dot-size);
	height: var(--cfs-dot-size);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--cfs-dot-color);
	box-shadow: none;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition:
		width 350ms var(--cfs-ease),
		background-color 250ms ease;
}

/* Larger invisible hit area for touch. */
.cfs .cfs__dot::after {
	content: "";
	position: absolute;
	top: -10px;
	right: -4px;
	bottom: -10px;
	left: -4px;
}

.cfs .cfs__dot:hover {
	background: var(--cfs-dot-active);
}

.cfs .cfs__dot.is-active,
.cfs .cfs__dot.is-active:hover,
.cfs .cfs__dot.is-active:focus {
	width: var(--cfs-dot-active-width);
	background: var(--cfs-dot-active);
}

.cfs .cfs__dot:focus {
	outline: none;
}

.cfs .cfs__dot:focus-visible {
	outline: 2px solid var(--cfs-accent);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Editor empty state
 * ------------------------------------------------------------------------- */
.cfs-empty {
	padding: 32px 20px;
	border: 1px dashed rgba(127, 127, 127, 0.5);
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.cfs .cfs__slide,
	.cfs .cfs__card,
	.cfs .cfs__content,
	.cfs .cfs__reveal,
	.cfs .cfs__label,
	.cfs .cfs__desc,
	.cfs .cfs__actions,
	.cfs .cfs__dot {
		transition-duration: 1ms !important;
		transition-delay: 0s !important;
	}

	.cfs .cfs__img,
	.cfs .cfs__slide:hover .cfs__img {
		transform: none;
		transition: none;
	}
}

/* ===========================================================================
 * v1.1.0 additions — paste at the very end of center-focus-slider.css
 * ========================================================================= */

.cfs {
	/* Pagination: how many dots stay visible (0 = show all). */
	--cfs-dots-visible: 3;

	/* Hover highlight. */
	--cfs-hover-brightness: 1.08;
	--cfs-hover-light: rgba(255, 255, 255, 0.28);
	--cfs-hover-ring: var(--cfs-accent);
	--cfs-hover-ring-width: 0px; /* hover border off; set e.g. 2px to bring it back */
	--cfs-hover-dim: 0.75;
}

/* ---------------------------------------------------------------------------
 * 1. Side cards: keep number + title inside the part that is on screen
 *
 * A side card is partly cut off by the slider edge. --cfs-clip is the width
 * of the hidden part, so the text is pushed in by exactly that much:
 * left cards push from the left, right cards from the right.
 * ------------------------------------------------------------------------- */
@supports (width: 1cqw) {
	.cfs__viewport {
		container-type: inline-size;
	}

	.cfs__slide {
		--cfs-clip: clamp(
			0px,
			(
				50% * var(--cfs-active-scale) +
				var(--cfs-d) * var(--cfs-sign) * (var(--cfs-gap) + 100% * var(--cfs-inactive-scale)) -
				50cqw
			) / var(--cfs-inactive-scale),
			max(0px, 100% - 220px)
		);
	}

	.cfs .cfs__content {
		left: calc(var(--cfs-clip) * max(0, -1 * var(--cfs-sign)));
		right: calc(var(--cfs-clip) * max(0, var(--cfs-sign)));
		transition:
			opacity var(--cfs-content-speed) ease,
			transform var(--cfs-content-speed) var(--cfs-ease),
			left var(--cfs-speed) var(--cfs-ease),
			right var(--cfs-speed) var(--cfs-ease);
	}

	.cfs .cfs__number {
		left: calc(var(--cfs-number-left) + var(--cfs-clip) * max(0, -1 * var(--cfs-sign)));
		transition: left var(--cfs-speed) var(--cfs-ease);
	}

	.cfs.is-dragging .cfs__content,
	.cfs.is-dragging .cfs__number,
	.cfs__track.is-instant .cfs__content,
	.cfs__track.is-instant .cfs__number,
	.cfs__slide.is-teleport .cfs__content,
	.cfs__slide.is-teleport .cfs__number {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * 2. Hover highlight — the card under the cursor lights up
 *
 * Full opacity and colour, a soft light that follows the cursor, an accent
 * ring, and its description opens. Switch off with the class
 * "cfs--no-hover-light" on the slider.
 * ------------------------------------------------------------------------- */
.cfs__media::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background-image: radial-gradient(
		circle at var(--cfs-mx, 30%) var(--cfs-my, 15%),
		var(--cfs-hover-light) 0%,
		transparent 55%
	);
	opacity: 0;
	transition: opacity 350ms ease;
	pointer-events: none;
}

.cfs__frame {
	box-shadow: inset 0 0 0 0 transparent;
	transition: box-shadow 350ms ease;
}

@media (hover: hover) {
	.cfs:not(.cfs--no-hover-light):not(.is-dragging) .cfs__slide:hover {
		opacity: var(--cfs-active-opacity);
	}

	.cfs:not(.cfs--no-hover-light):not(.is-dragging) .cfs__slide:hover .cfs__img {
		filter: brightness(var(--cfs-hover-brightness));
	}

	.cfs:not(.cfs--no-hover-light):not(.is-dragging) .cfs__slide:hover .cfs__media::after {
		opacity: 1;
	}

	.cfs:not(.cfs--no-hover-light):not(.is-dragging) .cfs__slide:hover .cfs__frame {
		box-shadow: inset 0 0 0 var(--cfs-hover-ring-width) var(--cfs-hover-ring);
	}

	/* The hovered card shows its full content, even when it is a side card. */
	.cfs:not(.cfs--no-hover-light):not(.is-dragging) .cfs__slide:hover .cfs__content {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}

	.cfs:not(.cfs--no-hover-light):not(.is-dragging) .cfs__slide:hover .cfs__label {
		opacity: 1;
	}

	.cfs:not(.cfs--no-hover-light):not(.is-dragging) .cfs__slide:hover .cfs__reveal {
		grid-template-rows: 1fr;
	}

	.cfs:not(.cfs--no-hover-light):not(.is-dragging) .cfs__slide:hover .cfs__desc,
	.cfs:not(.cfs--no-hover-light):not(.is-dragging) .cfs__slide:hover .cfs__actions {
		opacity: 1;
		transform: none;
	}

	/* While a side card is hovered, the centre card steps back a little. */
	.cfs:not(.cfs--no-hover-light):not(.is-dragging):has(.cfs__slide:not(.is-active):hover) .cfs__slide.is-active {
		opacity: var(--cfs-hover-dim);
	}
}

/* ---------------------------------------------------------------------------
 * 3. Pagination window — only a few dots are visible and the row slides
 *    along as the active slide changes
 * ------------------------------------------------------------------------- */
.cfs.cfs--dots-window .cfs__dots {
	--cfs-dot-start: 0;
	--cfs-dot-step: calc(var(--cfs-dot-size) + var(--cfs-dot-gap));

	flex: none;
	flex-wrap: nowrap;
	justify-content: flex-start;
	box-sizing: content-box;
	width: calc(var(--cfs-dot-active-width) + (var(--cfs-dots-visible) - 1) * var(--cfs-dot-step));
	padding: 0 6px;
	overflow: hidden;
}

/* Clip sideways only, so the dots keep their tall touch area. */
@supports (overflow: clip) {
	.cfs.cfs--dots-window .cfs__dots {
		overflow-x: clip;
		overflow-y: visible;
	}
}

.cfs.cfs--dots-window .cfs__dots .cfs__dot {
	transform: translateX(calc(var(--cfs-dot-start) * var(--cfs-dot-step) * -1));
	transition:
		transform 400ms var(--cfs-ease),
		width 350ms var(--cfs-ease),
		opacity 250ms ease,
		background-color 250ms ease;
}

.cfs.cfs--dots-window .cfs__dots .cfs__dot.is-out {
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.cfs .cfs__number,
	.cfs .cfs__frame,
	.cfs .cfs__media::after {
		transition-duration: 1ms !important;
	}
}

/* ===========================================================================
 * v1.2.0 additions
 * ========================================================================= */

.cfs {
	/* Equal-height layout: how many cards fit on screen, and how many times
	   wider the centre card is than a side card. */
	--cfs-wide-visible: 3;
	--cfs-wide-ratio: 2;

	/* Bottom gradient strength on the hovered card. */
	--cfs-hover-gradient-opacity: 1;

	/* Width of one side card, measured by the script. */
	--cfs-side-width: calc(var(--cfs-card-width, var(--cfs-auto-width)) * var(--cfs-inactive-scale));
}

@media (max-width: 1024px) {
	.cfs {
		--cfs-wide-ratio: 1.6;
	}
}

@media (max-width: 767px) {
	.cfs {
		--cfs-wide-visible: 1.2;
		--cfs-wide-ratio: 1.5;
	}
}

.cfs__probe--side {
	width: var(--cfs-side-width);
}

/* ---------------------------------------------------------------------------
 * 4. Equal-height layout — every card has the same height, the centre card
 *    is wider, and exactly --cfs-wide-visible cards fill the slider.
 *
 *      side + gap + CENTRE + gap + side = 100% of the slider
 * ------------------------------------------------------------------------- */
@supports (width: 1cqw) {
	.cfs.cfs--layout-wide {
		--cfs-wi: calc(
			(100cqw - (var(--cfs-wide-visible) - 1) * var(--cfs-gap)) /
			(var(--cfs-wide-ratio) + var(--cfs-wide-visible) - 1)
		);
		--cfs-wa: calc(var(--cfs-wi) * var(--cfs-wide-ratio));
		--cfs-side-width: var(--cfs-wi);
	}

	.cfs.cfs--layout-wide .cfs__viewport {
		height: var(--cfs-height);
	}

	.cfs.cfs--layout-wide .cfs__slide {
		--cfs-scale: 1;
		--cfs-clip: 0px;

		top: 0;
		width: var(--cfs-wi);
		transform-origin: 50% 50%;
		transform: translate3d(
			calc(
				-50% + var(--cfs-drag, 0px) +
				var(--cfs-sign) * (var(--cfs-wa) - var(--cfs-wi)) / 2 +
				var(--cfs-d) * (var(--cfs-wi) + var(--cfs-gap))
			),
			0,
			0
		);
		transition:
			transform var(--cfs-speed) var(--cfs-ease),
			width var(--cfs-speed) var(--cfs-ease),
			opacity var(--cfs-speed) var(--cfs-ease),
			visibility 0s;
	}

	.cfs.cfs--layout-wide .cfs__slide.is-active {
		width: var(--cfs-wa);
	}

	.cfs.cfs--layout-wide .cfs__slide.is-far {
		transition:
			transform var(--cfs-speed) var(--cfs-ease),
			width var(--cfs-speed) var(--cfs-ease),
			opacity var(--cfs-speed) var(--cfs-ease),
			visibility 0s linear var(--cfs-speed);
	}
}

/* ---------------------------------------------------------------------------
 * 5. Hover: the bottom gradient of the hovered card comes up to full strength
 * ------------------------------------------------------------------------- */
.cfs__gradient {
	transition: opacity 350ms ease;
}

@media (hover: hover) {
	.cfs:not(.cfs--no-hover-light):not(.is-dragging) .cfs__slide:hover .cfs__gradient {
		opacity: var(--cfs-hover-gradient-opacity);
	}
}