/* ─── Balk ─────────────────────────────────────────────────────────────────── */
.kik-usp-marquee {
	position: relative;
	overflow: hidden;
	border-top: 1px solid #e8e8e6;
	border-bottom: 1px solid #e8e8e6;
	padding: 22px 0;
	background-color: #ffffff;
}

/* Vloeiende fade aan de zijkanten */
.kik-usp-marquee::before,
.kik-usp-marquee::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 80px;
	z-index: 2;
	pointer-events: none;
}
.kik-usp-marquee::before {
	left: 0;
	background: linear-gradient(to right, #ffffff, transparent);
}
.kik-usp-marquee::after {
	right: 0;
	background: linear-gradient(to left, #ffffff, transparent);
}

/* ─── Track ─────────────────────────────────────────────────────────────────── */
/*
 * display: flex + width: max-content — identiek aan de werkende example.html.
 * Als block-level flex container met expliciete max-content breedte gedraagt
 * de track zich correct: de ouder (.kik-usp-marquee) krijgt zijn hoogte via de
 * normale block-flow en knipt alleen horizontaal af via overflow: hidden.
 *
 * will-change: transform → GPU compositor-laag, los van Elementor's JS.
 * transition: none       → voorkomt dat Elementor transitions de rAF-transform
 *                          vertraagt of interpoleert.
 */
.kik-usp-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
	transition: none !important;
}

/* ─── Item ──────────────────────────────────────────────────────────────────── */
.kik-usp-item {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	gap: 10px;
	padding: 0 28px;
	white-space: nowrap;
	color: #666666;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Verticaal scheidingsstreepje na elk item */
.kik-usp-item::after {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1px;
	height: 16px;
	background-color: #e8e8e6;
	margin-left: 28px;
}

/* ─── Icoon ─────────────────────────────────────────────────────────────────── */
.kik-usp-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

.kik-usp-icon i {
	font-size: 14px;
	line-height: 1;
	color: #ccd500;
}

.kik-usp-icon svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: #ccd500;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
