/* Section + frame */
.cf-carouselSection {
	margin: 1rem 0;
}

.cf-carouselFrame {
	position: relative; /* <— chevrons are absolutely positioned here */
	padding-inline: 0.25rem; /* room so first/last items don’t touch edges */

}

/* The horizontal rail itself */
.cf-rails.cf-carousel {
	display: flex;
	gap: var(--space-3, .75rem);
	overflow-x: auto; /* horizontal scroll */
	overflow-y: hidden;
	scroll-snap-type: x proximity; /* nice snap feel */
	scrollbar-gutter: stable both-edges;
	-webkit-overflow-scrolling: touch;
	padding: 10px;
}

	.cf-rails.cf-carousel > * {
		scroll-snap-align: start;
		flex: 0 0 auto; /* items don’t shrink */
	}

/* Chevron buttons (visible, centered, clickable) */
.cf-carouselFrame .cf-chevron {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	display: inline-flex; /* visible by default; JS may hide/show */
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	border: 0;
	cursor: pointer;
	background: color-mix(in oklab, #fff 12%, transparent);
	color: #E5E7EB;
	box-shadow: 0 2px 10px rgba(0,0,0,.35);
	z-index: 2;
}

.cf-chevron {
	display: none;
}

	.cf-chevron[style*="display:"] {
		display: block; /* let JS override */
	}

	.cf-carouselFrame .cf-chevron.left {
		left: 4px;
	}

	.cf-carouselFrame .cf-chevron.right {
		right: 4px;
	}

	.cf-carouselFrame .cf-chevron:hover {
		background: color-mix(in oklab, #fff 18%, transparent);
	}

/* Subtle horizontal scrollbar cue on the rails */
.cf-rails.cf-carousel::-webkit-scrollbar {
	height: 6px;
}

.cf-rails.cf-carousel::-webkit-scrollbar-track {
	background: rgba(255,255,255,.06);
	border-radius: 4px;
}

.cf-rails.cf-carousel::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,.18);
	border-radius: 4px;
}

.cf-sectionTitle {
font-weight:600;
font-size:1.1rem;
}