/**
 * Load more onder de productlijst (vervangt de paginatie).
 */

.scp-meer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin: 2.5rem auto 1rem;
	max-width: 420px;
	text-align: center;
}

.scp-meer__teller {
	margin: 0;
	font-size: 0.95rem;
	color: var(--scp-grijs, #6B6256);
}

.scp-meer__teller strong {
	color: var(--scp-zwart, #211A11);
}

.scp-meer__balk {
	width: 100%;
	max-width: 260px;
	height: 6px;
	border-radius: 999px;
	background: var(--scp-grijs-licht, #F4F4F6);
	overflow: hidden;
}

.scp-meer__balk span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--scp-geel, #FDC514);
	transition: width var(--scp-overgang, 0.25s ease);
}

.scp-meer__knop {
	min-width: 260px;
}

.scp-meer__status {
	margin: 0;
	min-height: 1.25rem;
	font-size: 0.9rem;
	color: var(--scp-grijs, #6B6256);
}

/* Laadstand: knop toont dat er gewerkt wordt. */
.scp-meer--bezig .scp-meer__knop {
	opacity: 0.65;
	pointer-events: none;
}

.scp-meer--bezig .scp-meer__balk span {
	animation: scp-meer-puls 1s ease-in-out infinite;
}

.scp-meer--klaar .scp-meer__balk span {
	background: var(--scp-groen, #52B04B);
}

@keyframes scp-meer-puls {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
	.scp-meer__balk span,
	.scp-meer--bezig .scp-meer__balk span {
		transition: none;
		animation: none;
	}
}