/* =========================================================
   Sportcoachplein — winkelwagen-popup
   ========================================================= */

/* ---------- Winkelwagen-popup ---------- */
.scp-popup { position: fixed; inset: 0; z-index: 200; }
.scp-popup[hidden] { display: none; }
.scp-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(33, 26, 16, 0.55);
}
.scp-popup__venster {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	background: var(--scp-wit);
	border-radius: var(--scp-radius-groot);
	padding: clamp(1.25rem, 3vw, 2rem);
	width: min(560px, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	overflow: auto;
	box-shadow: var(--scp-schaduw);
}
.scp-popup__x {
	position: absolute;
	top: 0.9rem; right: 0.9rem;
	width: 38px; height: 38px;
	border: 0;
	border-radius: 50%;
	background: var(--scp-grijs-licht);
	font-size: 1.1rem;
	cursor: pointer;
}
.scp-popup__titel {
	font-weight: 800;
	font-size: 1.15rem;
	color: #1a7a2e;
	margin-bottom: 1rem;
	padding-right: 2.5rem;
}
.scp-popup__titel i { margin-right: 0.5rem; }
.scp-popup__product { display: flex; gap: 1rem; align-items: center; }
.scp-popup__product img {
	width: 84px; height: 84px;
	border-radius: 12px;
	object-fit: cover;
	background: var(--scp-creme);
	flex: none;
}
.scp-popup__naam { font-weight: 700; margin: 0 0 0.2rem; }
.scp-popup__aantal { color: var(--scp-grijs); font-size: 0.9rem; margin: 0 0 0.2rem; }
.scp-popup__totaal { font-weight: 800; margin: 0; }
.scp-popup hr { border: 0; border-top: 1px solid var(--scp-grijs-border); margin: 1.25rem 0; }
.scp-popup__combineren-kop {
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--scp-grijs);
	margin-bottom: 0.75rem;
}
.scp-popup__slider { position: relative; }
.scp-popup__pijl { display: none; }
.scp-popup__slider.heeft-pijlen .scp-popup__pijl {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	box-shadow: var(--scp-schaduw);
}
.scp-popup__pijl--links { left: -8px; }
.scp-popup__pijl--rechts { right: -8px; }
@media (min-width: 961px) {
	.scp-popup__slider.pijlen-vanaf-4 .scp-popup__pijl { display: grid; }
}
@media (max-width: 960px) {
	.scp-popup__slider.pijlen-vanaf-3 .scp-popup__pijl { display: grid; }
}
.scp-popup__pijl.is-uit,
.scp-populair__pijl.is-uit {
	opacity: 0.35;
	pointer-events: none;
}
.scp-popup__c-track {
	display: flex;
	min-width: 0;
	gap: 12px;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
	flex: 1;
}
.scp-popup__c-track::-webkit-scrollbar { display: none; }
.scp-popup__c-kaart {
	flex: 0 0 calc((100% - 24px) / 3);
	background: var(--scp-grijs-licht);
	border-radius: 12px;
	padding: 0.6rem;
	text-decoration: none;
	text-align: center;
	transition: background var(--scp-overgang);
}
.scp-popup__c-kaart:hover { background: var(--scp-geel-licht); }
.scp-popup__c-kaart img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 8px;
	background: var(--scp-creme);
	margin-bottom: 0.4rem;
}
.scp-popup__c-titel {
	display: block;
	font-weight: 600;
	font-size: 0.82rem;
	line-height: 1.3;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	min-height: 2.6em;
}
.scp-popup__c-prijs { font-size: 0.82rem; display: block; margin-top: 0.25rem; }
.scp-popup__c-prijs del { color: var(--scp-grijs); margin-right: 0.3rem; }
.scp-popup__c-prijs ins { color: var(--scp-rood); font-weight: 700; text-decoration: none; }
.scp-popup__pijl {
	flex: none;
	width: 34px; height: 34px;
	padding: 0;
	line-height: 1;
	border: 2px solid var(--scp-grijs-border);
	border-radius: 50%;
	background: var(--scp-wit);
	cursor: pointer;
	display: grid;
	place-items: center;
	font-size: 0.8rem;
	transition: border-color var(--scp-overgang);
}
.scp-popup__pijl:hover { border-color: var(--scp-geel); }
.scp-popup__pijl i, .scp-populair__pijl i { display: block; line-height: 1; }
.scp-popup__acties {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-top: 1.25rem;
}
.scp-popup__acties .scp-btn { flex: 1; text-align: center; white-space: nowrap; padding-inline: 1rem; }
.scp-btn--wit { background: var(--scp-wit); border: 2px solid var(--scp-grijs-border) !important; color: var(--scp-zwart); }
.scp-btn--wit:hover { border-color: var(--scp-geel) !important; }