.comparator {
	padding: 0 80px 30px;
	margin: 0;
}

@media (max-width: 992px) {
	.comparator {
		padding: 0 20px var(--spacing-mb, 80px);
	}
}

.comparator .component-content {
	max-width: 1200px;
	margin: auto;
}

@media (min-width: 1550px) {
	.comparator .component-content {
		max-width: 1550px;
	}
}

/* hidden: title, blurb and the mobile image-titles row */
.comparator__title,
.comparator__blurb,
.comparator__image-titles {
	display: none;
}

.comparator__wrapper {
	position: relative;
	margin: 0;
	width: 100%;
}

/* ---- image stage ---------------------------------------------------- */
.comparator__images {
	position: relative;
	width: 100%;
	max-width: unset;
	height: 400px;
	margin: unset;
	overflow: hidden;
	/* base hides this until a .animate-in class is added by legacy JS,
	   which the React component never adds — keep it visible */
	opacity: 1;
}

@media (min-width: 769px) {
	.comparator__images {
		height: 700px;
	}
}

.comparator__image-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* the "before" (light) image sits on top and is revealed by the slider */
.comparator__image-wrapper:first-child {
	z-index: 1;
}

.comparator__image {
	position: absolute;
	top: 0;
	left: 0;
	/* base image fills the stage exactly */
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	/* BOTH images must share the same fit + position, otherwise the revealed
	   seam won't line up. evening.png / twilight.png share the same framing. */
	object-position: center;
}

/* the revealed (top) image keeps the FULL stage width regardless of how far
   its wrapper is narrowed, so it is clipped — not squashed — as you drag.
   100vw is the pre-JS fallback; comparator.js sets the exact stage width in px. */
.comparator__image-wrapper.-first .comparator__image {
	width: 100vw;
}

/* ---- slider (drag handle, drag-only) -------------------------------- */
.comparator__slider {
	position: absolute;
	top: 0;
	height: 100%;
	/* zero-width box: the component centres the slider with
	   `left = pixelPos - offsetWidth / 2`. With offsetWidth = 0 that
	   matches the React `left: calc(X% - 0.5px)`, so the divider always
	   lands exactly on the reveal edge (no half-width jump). */
	width: 0;
	z-index: 9;
	cursor: ew-resize;
}

/* white divider line, centred on the slider's left edge */
.comparator__slider::after {
	content: '';
	position: absolute;
	top: 0;
	left: -1px;
	height: 100%;
	width: 2px;
	background: #fff;
}

/* centred drag icon */
.comparator__slider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(-50%, -50%);
	width: 75px;
	height: 75px;
	background-image: url(/harbourside-vip/images/icons/comparator-logo.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 2;
	pointer-events: none;
}

/* On mobile, swap the mouse drag icon for the hand-pointer (tap/drag) variant. */
@media (max-width: 992px) {
	.comparator__slider::before {
		background-image: url(/harbourside-vip/images/icons/comparator-logo-mobile.svg);
	}
}

/* transparent full-height grab band — gives a generous drag target
   without adding to the slider's offsetWidth (it's out of flow) */
.comparator__slider-grabber {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-50%);
	height: 100%;
	width: 60px;
	display: block;
	/* allow touch-drag without the page scrolling */
	touch-action: none;
}

/* hide the click controls: grabber arrow buttons */
.comparator__slider-grabber-left,
.comparator__slider-grabber-right {
	display: none;
}

@media (max-width: 992px) {
	.comparator__slider::before {
		width: 50px;
		height: 50px;
	}

	.comparator__slider-grabber {
		width: 44px;
	}
}

/* ---- selectors: keep the colour-name label, hide the swatches ------- */
.comparator--dark .comparator__selector--dark .comparator__category-color {
	opacity: 0.5;
}

.comparator--dark .comparator__selector--light .comparator__category-color {
	opacity: 1;
}

.comparator__selector--light .comparator__category-color {
	opacity: 0.5;
}

.comparator__category-subtitle {
	color: transparent;
	transition: unset;
	animation: unset;
}

.comparator__category-subtitle .comparator__category-color {
	color: #fff;
	font-size: 16px;
	font-weight: 126;
	line-height: 150%;
	transition: unset;
	animation: unset;
}

@media (max-width: 992px) {
	.comparator__category-subtitle .comparator__category-color {
		font-size: 12px;
	}
}

.comparator__selector > *:nth-child(2) {
	transition: unset;
	animation: unset;
}

.comparator__selector {
	width: 0;
	height: 0;
	margin: 0;
	transition: unset;
	animation: unset;
}

/* hide the clickable colour swatches and the selector heading */
.comparator__selector .comparator__option,
.comparator__selector-title {
	display: none;
}

.comparator__category-color {
	position: absolute;
	left: 25%;
	top: 20px;
	z-index: 2;
}

.comparator__selector--dark .comparator__category-color {
	right: 25%;
	left: unset;
}