.cps-wrap {
	position: relative;
	/* Sensible default so the hero already fills the screen on first paint,
	   before JS runs updateSlidesHeight() to fine-tune it. Avoids a layout
	   jump and lets the slider look "ready" immediately.
	   Plain 100vh is unreliable on mobile (it counts the address bar, so the
	   slider can render taller than the real visible area and look broken/
	   cut off until the browser chrome settles). Modern browsers get 100svh
	   ("small viewport height", excludes browser UI) as a mobile-safe value;
	   older browsers ignore that line (invalid) and keep the 100vh fallback. */
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	user-select: none;
}
.cps-bg-fallback {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.cps-bg-wave-canvas {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.cps-banner {
	background-image: none !important;
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	clip-path: inset(0 0 0 100%);
	padding: 0 20px;
}
.cps-banner.is-active {
	z-index: 2;
	clip-path: inset(0 0 0 0%);
}

/* ---------- pure-CSS first-paint entrance (no JS/GSAP dependency) ----------
   These run the instant the browser paints the page, so the first slide's
   content is never blank while waiting for scripts to download/execute.
   IMPORTANT: fill-mode is "backwards", not "both" — it must NOT keep forcing
   opacity:1 after it finishes, or it will fight with GSAP's inline opacity
   toggles once the user moves away from slide 1 (that was the "element
   doesn't disappear" glitch). Once JS initializes (data-cps-initialized is
   set as literally the first thing initCPS() does), the animation is turned
   off entirely so GSAP fully owns these properties from then on. */
@keyframes cpsFadeUp {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes cpsFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.cps-banner.is-active .cps-heading-text,
.cps-banner.is-active .cps-description,
.cps-banner.is-active .ctslider-theme-btn {
	animation: cpsFadeUp 0.6s ease-out backwards;
}
.cps-banner.is-active .cps-gile-image,
.cps-banner.is-active .cps-perfume,
.cps-banner.is-active .cps-elemts {
	animation: cpsFadeIn 0.6s ease-out backwards;
}
.cps-banner.is-active .cps-description { animation-delay: 0.05s; }
.cps-banner.is-active .ctslider-theme-btn { animation-delay: 0.1s; }
.cps-banner.is-active .cps-perfume { animation-delay: 0.05s; }
/* Belt-and-suspenders: the instant JS initializes (data-cps-initialized is
   set as literally the first line of initCPS()), hand full control of
   opacity back to GSAP with no CSS animation involved at all. */
.cps-wrap[data-cps-initialized] .cps-banner.is-active .cps-heading-text,
.cps-wrap[data-cps-initialized] .cps-banner.is-active .cps-description,
.cps-wrap[data-cps-initialized] .cps-banner.is-active .ctslider-theme-btn,
.cps-wrap[data-cps-initialized] .cps-banner.is-active .cps-gile-image,
.cps-wrap[data-cps-initialized] .cps-banner.is-active .cps-perfume,
.cps-wrap[data-cps-initialized] .cps-banner.is-active .cps-elemts {
	animation: none;
}
.cps-banner.is-active .cps-elemts { animation-delay: 0.1s; }
.cps-banner * {
	margin: 0;
}
.cps-container {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 0.6fr 1fr;
	min-height: auto;
	padding: 150px 0 60px 0;
	width: 100%;
}
.cps-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: auto;
	justify-content: flex-end;
	width: 100%;
}
.cps-content img {
	width: 100%;
	height: auto;
}
.cps-description {
	color: #fff;
}
.cps-description p {
	margin: 0;
}
.cps-heading {
	position: relative;
	width: fit-content;
	height: fit-content;
}
.cps-gile-image {
	width: 90px !important;
	position: absolute;
	top: -15px;
	right: 0;
}
.cps-images {
	width: 100%;
	height: 100%;
	position: relative;
}
.cps-perfume {
	width: 170px;
	position: absolute;
	bottom: 149px;
	z-index: 5;
	right: 380px;
	filter: drop-shadow(25px 14px 15px #000) !important;
}
.cps-stone {
	position: absolute;
	width: 450px;
	bottom: 0;
	transform: rotateY(180deg);
	right: 250px;
	filter: drop-shadow(22px 5px 24px #000);
}
.cps-elemts {
	width: 290px;
	position: absolute;
	right: 0;
	mix-blend-mode: screen;
	bottom: 36px;
}
.cps-elemts-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	transition: opacity 0.3s;
	object-fit: contain;
}
.cps-elemts-img {
	transition: opacity 0.3s;
	object-fit: contain;
	width: 100%;
	height: 100%;
}
.cps-global-nav-wrap {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	z-index: 30;
	pointer-events: none;
}
.cps-global-nav-inner {
	position: relative;
	width: 100%;
	max-width: 1400px;
	height: 100%;
	max-height: 100%;
}
.cps-nav {
	position: absolute;
	right: 90px;
	bottom: 50px;
	display: flex;
	gap: 14px;
	pointer-events: auto;
}
.cps-nav-btn {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(14px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.35s, transform 0.35s;
}
.cps-nav-btn:hover {
	background: rgba(255, 255, 255, 0.18);
	transform: translateY(-2px) scale(1.06);
}
.cps-nav-btn:active {
	transform: scale(0.92);
}
.cps-nav-btn svg {
	width: 18px;
	height: 18px;
	display: block;
}

.cps-heading-text.cps-heading-text-desktop {
    width: 350px;
    filter: brightness(0) invert(1);
}

.cps-heading-text.cps-heading-text-mobile {
    display: none;
    width: 85%;
    max-width: 400px;
	filter: brightness(0) invert(1);
}

.ctslider-theme-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff59;
	padding: 18px 50px;
	font-size: 16px;
	line-height: 1.2em;
	color: #fff;
	border-radius: 50px;
	position: relative;
	text-decoration: none;
	backdrop-filter: blur(10px);
	box-shadow: rgb(255 255 255 / 34%) 0 0 22px;
	transition: 0.5s ease-in-out all;
	width: fit-content;
	margin-top: 6px;
}

.ctslider-theme-btn .ctslider-btn-bg {
	/* Default fallback color — overridden per-slide via inline style from the Slides repeater. */
	background: #6a350f;
	position: absolute;
	width: 90%;
	height: 80%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50px;
	box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
	transition: 0.5s ease-in-out all;
}

.ctslider-theme-btn:hover .ctslider-btn-bg {
	background: #000;
}

.ctslider-theme-btn .ctslider-btn-text {
	color: #fff;
	z-index: 3;
	position: relative;
	transition: 0.5s ease-in-out all;
}

.cps-description {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

@media (max-width: 1200px) {
	.cps-perfume { width: 140px; right: 250px; }
	.cps-stone { width: 320px; right: 160px; }
	.cps-elemts { width: 170px; }
	.cps-container { grid-template-columns: 1fr 1fr; }
	.cps-gile-image { width: 60px !important; }
	.cps-description { font-size: 13px; max-width: 80%; }
	.cps-heading-text.cps-heading-text-desktop {
		width: 250px;
	}
}

@media (max-width: 900px) {
	.cps-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40px;
		padding: 120px 0 50px 0;
	}
	.cps-gile-image { position: unset; }
	.cps-heading {
		display: flex;
		flex-direction: column-reverse;
		gap: 10px;
	}
	.cps-content { gap: 12px; justify-content: center; align-items: center; }
	.cps-heading { justify-content: center; align-items: center; }
	.cps-description { text-align: center; display: flex; flex-direction: column; gap: 14px; justify-content: center; align-items: center; }
	.cps-images { height: 450px; }
	.cps-perfume { width: 120px; right: unset; left: 50%; transform: translateX(-50%); }
	.cps-stone { width: 400px; right: unset; left: 50%; transform: translateX(-50%); }
	.cps-heading-text-desktop {
		display: none;
	}
	.cps-heading-text-mobile {
		display: block !important;
	}
}

@media (max-width: 600px) {
	.cps-description { max-width: 100%; }
	.cps-stone { width: 320px; }
	.cps-perfume { width: 100px; }
	.cps-elemts { width: 140px; }
	.cps-images { height: 380px; }
	.cps-nav { right: unset; left: 50%; transform: translateX(-50%); bottom: 30px; }
	.cps-container { padding: 120px 0 100px 0; }
	.ctslider-theme-btn {
		font-size: 14px;
		padding: 15px 40px;
	}
}