.cps-slider {
	position: relative;
	width: 100%;
	height: 600px;                 /* fixed height — never changes during transitions */
	overflow: hidden;
	background: #f4f4f4;
	margin-bottom: 1.5em;
}

@media (max-width: 600px) {
	.cps-slider { height: 320px; }
}

.cps-track {
	position: relative;
	height: 100%;
	display: flex;                 /* slides sit side by side in a row */
	transition: transform .6s cubic-bezier(.65,0,.35,1);
	will-change: transform;
}

.cps-slide {
	flex-shrink: 0;                /* never let flex override our explicit widths */
	height: 100%;
	overflow: hidden;
	position: relative;
	background: #f4f4f4;
	transition: width .6s cubic-bezier(.65,0,.35,1);
}

.cps-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;              /* fills the box, cropping as needed — never stretched */
	object-position: center;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

.cps-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(0,0,0,0.45);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, opacity .2s ease;
	z-index: 5;
	padding: 0;
}
.cps-nav:hover { background: rgba(0,0,0,0.65); }
.cps-nav:disabled { opacity: 0; pointer-events: none; }
.cps-nav.cps-prev { left: 14px; }
.cps-nav.cps-next { right: 14px; }

.cps-thumbs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	display: flex;
	gap: 8px;
	justify-content: center;
	z-index: 5;
	padding: 0 12px;
}
.cps-thumb {
	width: 48px;
	height: 48px;
	border-radius: 6px;
	border: 2px solid rgba(255,255,255,0.85);
	padding: 0;
	cursor: pointer;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.25);
	transition: border-color .2s ease, transform .2s ease;
	flex-shrink: 0;
}
.cps-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cps-thumb:hover {
	transform: translateY(-2px);
}
.cps-thumb.cps-active {
	border-color: #333;
}

@media (max-width: 600px) {
	.cps-thumb { width: 36px; height: 36px; }
}

/* ------------------------------------------------------------------ *
 * In-box zoom (click a slide image to enlarge it within its own frame)
 * ------------------------------------------------------------------ */
.cps-slide img.cps-zoomable {
	cursor: zoom-in;
	transition: transform .3s ease, width .6s cubic-bezier(.65,0,.35,1);
	transform: scale(1);
	transform-origin: center center;
}

.cps-slide img.cps-zoomable.cps-zoomed {
	cursor: zoom-out;
	transform: scale(2.2);
	transition: transform .15s ease;
}