/* Eva Last Colours Designed (Slider)
 * Ported verbatim from the source markup. Selectors are namespaced with
 * .elcd- and the reset/vars are scoped to .elcd-hero so nothing leaks
 * into the host theme. Visual output is unchanged.
 */

.elcd-hero *,
.elcd-hero *::before,
.elcd-hero *::after { box-sizing: border-box; margin: 0; padding: 0; }

.elcd-hero {
	--navy: #464861;
	--navy-deep: #3c3d57;
	--ink: #3d3e5b;
	--ink-soft: #9fa1b5;
	--page: #ffffff;
	position: relative;
	overflow: hidden;
	background: var(--page);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}

.elcd-hero__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 28px 64px;
}

.elcd-copy { max-width: 808px; position: relative; z-index: 2; }

.elcd-headline {
	font-weight: 800;
	line-height: 1.02;
	font-size: 60px;
	color: #474963;
	margin-bottom: 34px;
	font-family: "Barlow", Sans-serif;
}
.elcd-headline .elcd-soft { color: #9597a6; }

.elcd-card {
	background: var(--navy);
	border-radius: 26px;
	padding: 30px 34px 34px;
	color: #fff;
}
.elcd-card__lead {
	font-size: clamp(15px, 1.5vw, 19px);
	line-height: 1.55;
	font-weight: 400;
	color: #ececf3;
	margin-bottom: 26px;
}

.elcd-swatches { display: flex; gap: clamp(50px, 2.4vw, 26px); }

.elcd-swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 21px;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	color: #cdcedd;
	transition: color .2s ease;
	padding: 0;
}
.elcd-swatch:hover { background-color: transparent; }
.elcd-swatch.active .elcd-swatch__chip { width: 100px; height: 100px; }
.elcd-swatch:focus { background-color: transparent; }

.elcd-swatch__label {
	font-size: clamp(13px, 1.4vw, 18px);
	font-weight: 500;
	transition: font-weight .15s ease, color .2s ease;
}

.elcd-swatch__chip {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--chip);
	box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0);
	outline: 3px solid transparent;
	outline-offset: 0;
	transition: outline-color .2s ease, transform .2s ease;
}
.elcd-swatch__chip img { width: 100%; border-radius: 100%; }

.elcd-swatch:hover .elcd-swatch__chip { transform: translateY(-3px); }
.elcd-swatch:hover .elcd-swatch__label { color: #fff; }
.elcd-swatch.active .elcd-swatch__label { color: #fff; font-weight: 700; }
.elcd-swatch.active .elcd-swatch__chip { outline-color: #fff; }
.elcd-swatch:focus-visible { outline: none; }
.elcd-swatch:focus-visible .elcd-swatch__chip { outline-color: #bcd; }

.elcd-stage {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 54vw;
	pointer-events: none;
}
.elcd-beam {
	position: absolute;
	top: 50%;
	right: -2%;
	transform: translateY(-50%) scale(.985);
	width: 100%;
	max-width: none;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	object-position: right center;
	opacity: 0;
	transition: opacity .45s ease, transform .55s ease;
}
.elcd-beam.active { opacity: 1; transform: translateY(-50%) scale(1); }


@media (min-width: 1921px) and (max-width:3000px) {
	.elcd-beam {
	position: absolute;
	top: 56%;
	right: 39%;
	transform: translateY(-50%) scale(.985);
	width: 100%;
	max-width: none;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	object-position: right center;
	opacity: 0;
	transition: opacity .45s ease, transform .55s ease;
}
}


@media (max-width: 860px) {
	.elcd-hero { overflow: visible; }
	.elcd-hero__inner { padding: 0px 22px 46px; }
	.elcd-stage { position: relative; width: 100%; height: 270px; margin-bottom: 6px; }
	.elcd-beam {
		right: auto;
		left: 50%;
		transform: translate(-50%, -50%) scale(.985);
		width: auto;
		max-width: 100%;
		max-height: 260px;
	}
	.elcd-beam.active { transform: translate(-50%, -50%) scale(1); }
	.elcd-headline { margin-bottom: 26px; font-size: 30px; text-align: center; }
	.elcd-swatch.active .elcd-swatch__chip { width: 50px; height: 50px; }
	.elcd-swatch__chip {
	width: 50px;
	height: 50px;
}
.elcd-swatches { display: flex; gap: clamp(10px, 2.4vw, 26px); }
}