/* style.css | Locatie: /css/style.css | Bijgewerkt op 28-10-2026. */

	/* === Reset. === */
	*, *::before, *::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	html {
		font-size: 16px;
		scroll-behavior: smooth;
	}

	body {
		font-family: 'Poppins', sans-serif;
		color: #222222;
		background-color: #FFFFFF;
		line-height: 1.6;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	img {
		max-width: 100%;
		display: block;
	}

	ul {
		list-style: none;
	}

	/* === Hulpklassen. === */
	.container {
		max-width: 1280px;
		margin-top: 0;
		margin-right: auto;
		margin-bottom: 0;
		margin-left: auto;
		padding-top: 0;
		padding-right: 24px;
		padding-bottom: 0;
		padding-left: 24px;
	}

	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0,0,0,0);
	}

/* =================================== Header =================================== */

	.site-header {
		background-color: #000000;
		color: #FFFFFF;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2px 12px rgba(0,0,0,0.18);
	}

	.header-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 70px;
		gap: 24px;
	}

	/* Logo. */
	.site-logo {
		font-family: 'Poppins', sans-serif;
		font-size: 25.6px;
		font-weight: 800;
		letter-spacing: -0.5px;
		color: #FFFFFF;
		flex-shrink: 0;
	}

	.site-logo span:nth-child(1) { color: #ED228B; }
	.site-logo span:nth-child(2) { color: #3CC0F0; }
	.site-logo span:nth-child(3) { color: #95C740; }

/* =================================== Navigatie =================================== */

	.hoofd-nav ul {
		display: flex;
		gap: 8px;
	}

	.hoofd-nav a {
		font-family: 'Poppins', sans-serif;
		font-size: 14.72px;
		font-weight: 600;
		color: rgba(255,255,255,0.78);
		padding-top: 8px;
		padding-right: 14px;
		padding-bottom: 8px;
		padding-left: 14px;
		border-radius: 8px;
		transition: background 0.22s ease, color 0.22s ease;
		white-space: nowrap;
	}

	.hoofd-nav a:hover,
	.hoofd-nav a.actief {
		background-color: #ED228B;
		color: #FFFFFF;
	}

/* =================================== Zoekbalk =================================== */

	.header-zoek {
		display: flex;
		align-items: center;
		background: rgba(255,255,255,0.09);
		border: 1.5px solid rgba(255,255,255,0.13);
		border-radius: 8px;
		overflow: hidden;
		flex: 1;
		max-width: 320px;
	}

	.header-zoek input {
		background: transparent;
		border: none;
		outline: none;
		color: #FFFFFF;
		font-family: 'Poppins', sans-serif;
		font-size: 14.4px;
		padding-top: 0;
		padding-right: 12px;
		padding-bottom: 0;
		padding-left: 12px;
		flex: 1;
		height: 40px;
	}

	.header-zoek input::placeholder { color: rgba(255,255,255,0.38); }

	.header-zoek button {
		background: transparent;
		border: none;
		cursor: pointer;
		color: #3CC0F0;
		padding-top: 0;
		padding-right: 14px;
		padding-bottom: 0;
		padding-left: 14px;
		height: 40px;
		font-size: 17.6px;
		transition: color 0.22s ease;
	}

	.header-zoek button:hover { color: #ED228B; }

/* =================================== Taalnavigatie =================================== */

	.taal-nav ul {
		display: flex;
		gap: 2px;
		align-items: center;
	}

	.taal-knop {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		font-size: 17.6px;
		text-decoration: none;
		opacity: 0.45;
		transition: opacity 0.22s ease, transform 0.22s ease, background 0.22s ease;
		border: 2px solid transparent;
	}

	.taal-knop:hover {
		opacity: 0.9;
		transform: scale(1.15);
		background: rgba(255,255,255,0.08);
	}

	.taal-knop.actief {
		opacity: 1;
		border-color: #ED228B;
		background: rgba(237,34,139,0.12);
		transform: scale(1.1);
	}

/* =================================== Hero sectie =================================== */

	.hero {
		background: #000000;
		color: #FFFFFF;
		padding-top: 80px;
		padding-right: 0;
		padding-bottom: 72px;
		padding-left: 0;
		text-align: center;
		position: relative;
		overflow: hidden;
	}

	.hero::before {
		content: '';
		position: absolute;
		inset: 0;
		background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(237,34,139,0.18) 0%, transparent 70%),
		                  radial-gradient(ellipse 60% 50% at 20% 80%, rgba(60,192,240,0.13) 0%, transparent 60%);
		pointer-events: none;
	}

	.hero-titel {
		font-family: 'Poppins', sans-serif;
		font-size: clamp(32px, 5vw, 54.4px);
		font-weight: 800;
		letter-spacing: -1.5px;
		line-height: 1.1;
		margin-bottom: 18px;
		position: relative;
	}

	.hero-titel em {
		font-style: normal;
		color: #ED228B;
	}

	.hero-subtitel {
		font-size: 17.6px;
		color: rgba(255,255,255,0.62);
		max-width: 860px;
		margin-top: 0;
		margin-right: auto;
		margin-bottom: 32px;
		margin-left: auto;
		position: relative;
	}

	.hero-badges {
		display: flex;
		gap: 10px;
		justify-content: center;
		flex-wrap: wrap;
		position: relative;
	}

	.badge {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-family: 'Poppins', sans-serif;
		font-size: 12.8px;
		font-weight: 700;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		padding-top: 6px;
		padding-right: 14px;
		padding-bottom: 6px;
		padding-left: 14px;
		border-radius: 100px;
		border: 1.5px solid currentColor;
	}

	.badge--roze  { color: #ED228B; }
	.badge--blauw { color: #3CC0F0; }
	.badge--groen { color: #95C740; }

	/* === Modules pagina layout. === */
	.pagina-modules {
		flex: 1;
		padding-top: 48px;
		padding-right: 0;
		padding-bottom: 80px;
		padding-left: 0;
		background: #F9F9F9;
	}

	.modules-layout {
		display: grid;
		grid-template-columns: 260px 1fr;
		gap: 36px;
		align-items: start;
	}

	/* === Zijbalk filters. === */
	.filter-zijbalk {
		background: #FFFFFF;
		border-radius: 8px;
		box-shadow: 0 4px 24px rgba(0,0,0,0.07);
		padding-top: 28px;
		padding-right: 22px;
		padding-bottom: 28px;
		padding-left: 22px;
		position: sticky;
		top: 86px;
	}

	.filter-sectie {
		margin-bottom: 28px;
	}

	.filter-sectie:last-child { margin-bottom: 0; }

	.filter-titel {
		font-family: 'Poppins', sans-serif;
		font-size: 12.48px;
		font-weight: 700;
		letter-spacing: 1.2px;
		text-transform: uppercase;
		color: rgba(0,0,0,0.38);
		margin-bottom: 12px;
	}

	.filter-lijst li {
		margin-bottom: 4px;
	}

	.filter-lijst a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 7px;
		padding-right: 10px;
		padding-bottom: 7px;
		padding-left: 10px;
		border-radius: 6px;
		font-size: 14.4px;
		color: #222222;
		transition: background 0.22s ease, color 0.22s ease;
	}

	.filter-lijst a:hover {
		background: #F4F4F4;
		color: #ED228B;
	}

	.filter-lijst a.actief {
		background: rgba(237,34,139,0.1);
		color: #ED228B;
		font-weight: 600;
	}

	.filter-count {
		font-size: 12px;
		background: #E0E0E0;
		color: rgba(0,0,0,0.5);
		border-radius: 100px;
		padding-top: 1px;
		padding-right: 7px;
		padding-bottom: 1px;
		padding-left: 7px;
		font-weight: 600;
	}

	.filter-lijst a.actief .filter-count {
		background: rgba(237,34,139,0.18);
		color: #ED228B;
	}

/* =================================== Modules hoofd content =================================== */

	.modules-hoofd {}

	.modules-topbalk {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24px;
		flex-wrap: wrap;
		gap: 12px;
	}

	.modules-teller {
		font-family: 'Poppins', sans-serif;
		font-size: 24px;
		font-weight: 800;
		letter-spacing: -0.5px;
	}

	.modules-teller span {
		color: #ED228B;
		margin-right: 6px;
	}

	.sorteer-select {
		font-family: 'Poppins', sans-serif;
		font-size: 14.08px;
		padding-top: 8px;
		padding-right: 14px;
		padding-bottom: 8px;
		padding-left: 14px;
		border: 1.5px solid #E0E0E0;
		border-radius: 8px;
		background: #FFFFFF;
		cursor: pointer;
		outline: none;
		color: #222222;
		transition: border-color 0.22s ease;
	}

	.sorteer-select:focus { border-color: #ED228B; }

	/* === Product grid. === */
	.product-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		gap: 24px;
	}

/* =================================== Productkaart =================================== */

	.product-kaart {
		background: #FFFFFF;
		border-radius: 12px;
		box-shadow: 0 4px 24px rgba(0,0,0,0.07);
		overflow: hidden;
		display: flex;
		flex-direction: column;
		transition: transform 0.22s ease, box-shadow 0.22s ease;
		position: relative;
	}

	.product-kaart:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 36px rgba(0,0,0,0.12);
	}

	.kaart-label {
		position: absolute;
		top: 12px;
		left: 12px;
		font-family: 'Poppins', sans-serif;
		font-size: 11.2px;
		font-weight: 700;
		letter-spacing: 0.8px;
		text-transform: uppercase;
		padding-top: 4px;
		padding-right: 10px;
		padding-bottom: 4px;
		padding-left: 10px;
		border-radius: 100px;
		z-index: 1;
	}

	.kaart-label--new { background: #3CC0F0; color: #FFFFFF; }
	.kaart-label--bestseller { background: #ED228B; color: #FFFFFF; }
	.kaart-label--sale { background: #95C740; color: #FFFFFF; }
	.kaart-label--popular { background : #333333; color : #FFFFFF; }

	.kaart-afbeelding-link {
		display: block;
		cursor: pointer;
	}

	.kaart-afbeelding {
		width: 100%;
		aspect-ratio: 4/3;
		object-fit: scale-down;
		background: #FFFFFF;
		margin-top: 35px;
		padding-top: 15px;
		display: block;
	}

	.kaart-body {
		padding-top: 16px;
		padding-right: 18px;
		padding-bottom: 20px;
		padding-left: 18px;
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.kaart-categorie {
		font-size: 11.52px;
		font-weight: 700;
		letter-spacing: 1px;
		text-transform: uppercase;
		color: #3CC0F0;
	}

	.kaart-naam {
		font-family: 'Poppins', sans-serif;
		font-size: 15.52px;
		font-weight: 700;
		line-height: 1.3;
		color: #000000;
	}

	.kaart-beschrijving {
		font-size: 13.28px;
		color: rgba(0,0,0,0.52);
		flex: 1;
	}

	/* Kenmerken met groen vinkje. */
	.kaart-kenmerken {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 8px;
		flex: 1;
	}

	.kaart-kenmerken li {
		position: relative;
		padding-left: 28px;
		font-size: 13.28px;
		line-height: 1.45;
		color: rgba(0,0,0,0.72);
	}

	.kaart-kenmerken li::before {
		content: '';
		position: absolute;
		top: 1px;
		left: 0;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: #95C740;
	}

	.kaart-kenmerken li::after {
		content: '';
		position: absolute;
		top: 4px;
		left: 6px;
		width: 4px;
		height: 8px;
		border-right: 2px solid #FFFFFF;
		border-bottom: 2px solid #FFFFFF;
		transform: rotate(45deg);
	}

	.kaart-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1.5px solid #E0E0E0;
	}

	.kaart-prijs {
		font-family: 'Poppins', sans-serif;
		font-size: 18.4px;
		font-weight: 800;
		color: #000000;
	}

	.kaart-prijs-oud {
		font-size: 12.48px;
		color: rgba(0,0,0,0.35);
		text-decoration: line-through;
		margin-left: 4px;
	}

	.kaart-knop {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		font-family: 'Poppins', sans-serif;
		font-size: 12.48px;
		font-weight: 700;
		padding-top: 7px;
		padding-right: 14px;
		padding-bottom: 7px;
		padding-left: 14px;
		background: #ED228B;
		color: #FFFFFF;
		border: none;
		border-radius: 6px;
		cursor: pointer;
		transition: background 0.22s ease, transform 0.22s ease;
		text-decoration: none;
	}

	.kaart-knop:hover {
		background: #C4136E;
		transform: scale(1.04);
	}

	/* === Footer. === */
	.site-footer {
		background: #000000;
		color: rgba(255,255,255,0.62);
		padding-top: 56px;
		padding-right: 0;
		padding-bottom: 28px;
		padding-left: 0;
		margin-top: auto;
	}

	.footer-grid {
		display: grid;
		grid-template-columns: 2fr 1fr 1fr 1fr;
		gap: 40px;
		margin-bottom: 48px;
	}

	.footer-kolom-titel {
		font-family: 'Poppins', sans-serif;
		font-size: 12.48px;
		font-weight: 700;
		letter-spacing: 1.2px;
		text-transform: uppercase;
		color: #FFFFFF;
		margin-bottom: 16px;
	}

	.footer-logo {
		font-family: 'Poppins', sans-serif;
		font-size: 22.4px;
		font-weight: 800;
		color: #FFFFFF;
		margin-bottom: 12px;
		display: block;
	}

	.footer-omschrijving {
		font-size: 14.08px;
		line-height: 1.7;
		margin-bottom: 20px;
	}

	.footer-kleurbalk {
		display: flex;
		gap: 6px;
	}

	.footer-kleurbalk span {
		width: 28px;
		height: 4px;
		border-radius: 2px;
	}

	.footer-kleurbalk span:nth-child(1) { background: #ED228B; }
	.footer-kleurbalk span:nth-child(2) { background: #3CC0F0; }
	.footer-kleurbalk span:nth-child(3) { background: #95C740; }

	.footer-nav li {
		margin-bottom: 8px;
	}

	.footer-nav a {
		font-size: 14.08px;
		color: rgba(255,255,255,0.55);
		transition: color 0.22s ease;
	}

	.footer-nav a:hover { color: #ED228B; }

	.footer-bottom {
		border-top: 1px solid rgba(255,255,255,0.09);
		padding-top: 24px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 12px;
		font-size: 13.12px;
	}

	.footer-bottom-links {
		display: flex;
		gap: 20px;
	}

	.footer-bottom-links a {
		color: rgba(255,255,255,0.4);
		transition: color 0.22s ease;
	}

	.footer-bottom-links a:hover { color: #FFFFFF; }

	/* Intro tekst sectie. */
	.intro-tekst {
		background-color: #FFFFFF;
		text-align: center;
	}

	.intro-tekst h2 {
		font-size: 25.6px;
		font-weight: 700;
		color: #ED228B;
		margin-bottom: 8px;
	}

	.intro-tekst p,
	.intro-tekst p:last-of-type {
		font-size: 16px;
		color: #333333;
		width: 100%;
		text-align: center !important;
	}

	.intro-tekst p:last-of-type {
		margin-bottom: 0;
	}

	.intro-tekst p.intro-sluitzin {
		font-size: 16.8px;
		font-weight: 600;
		color: #95C740;
		margin-top: 8px;
	}

	/* === Responsive. === */
	@media (max-width: 1024px) {
		.modules-layout {
			grid-template-columns: 1fr;
		}

		.filter-zijbalk {
			position: static;
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
			gap: 20px;
		}

		.footer-grid {
			grid-template-columns: 1fr 1fr;
		}
	}

	@media (max-width: 768px) {
		.hoofd-nav { display: none; }

		.hero {
			padding-top: 56px;
			padding-right: 0;
			padding-bottom: 48px;
			padding-left: 0;
		}

		.footer-grid {
			grid-template-columns: 1fr;
		}

		.footer-bottom {
			flex-direction: column;
			text-align: center;
		}
	}

	@media (max-width: 480px) {
		.product-grid {
			grid-template-columns: 1fr;
		}

		.header-zoek {
			display: none;
		}
	}

	/* ============================================================
	   Forum stijlen.
	   ============================================================ */

/* =================================== Header =================================== */

	.forum-header {
		background: #000000;
		color: #FFFFFF;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2px 12px rgba(0,0,0,0.18);
	}

	.forum-header-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 64px;
		gap: 20px;
	}

	.forum-logo {
		font-size: 19.2px;
		font-weight: 800;
		color: #FFFFFF;
		letter-spacing: -0.5px;
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.forum-logo span:nth-child(1) { color: #ED228B; }
	.forum-logo span:nth-child(2) { color: #3CC0F0; }
	.forum-logo span:nth-child(3) { color: #95C740; }

	.forum-logo-terug {
		font-size: 12px;
		font-weight: 500;
		color: rgba(255,255,255,0.45);
		border-left: 1px solid rgba(255,255,255,0.15);
		padding-left: 10px;
		transition: color 0.22s ease;
	}

	.forum-logo-terug:hover { color: #ED228B; }

	.forum-nav {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.forum-nav a {
		font-size: 13.6px;
		font-weight: 600;
		color: rgba(255,255,255,0.65);
		padding-top: 7px;
		padding-right: 14px;
		padding-bottom: 7px;
		padding-left: 14px;
		border-radius: 6px;
		transition: background 0.22s ease, color 0.22s ease;
	}

	.forum-nav a:hover {
		background: rgba(255,255,255,0.08);
		color: #FFFFFF;
	}

	.forum-nav a.btn-primair {
		background: #ED228B;
		color: #FFFFFF;
	}

	.forum-nav a.btn-primair:hover { background: #C4136E; }

/* =================================== Hero band =================================== */

	.forum-hero {
		background: #000000;
		padding-top: 36px;
		padding-right: 0;
		padding-bottom: 32px;
		padding-left: 0;
		border-bottom: 3px solid #ED228B;
	}

	.forum-hero h1 {
		font-size: 25.6px;
		font-weight: 800;
		color: #FFFFFF;
		letter-spacing: -0.5px;
		margin-bottom: 6px;
	}

	.forum-hero h1 em {
		font-style: normal;
		color: #ED228B;
	}

	.forum-hero p {
		font-size: 14.4px;
		color: rgba(255,255,255,0.5);
	}

	/* === Main. === */
	.forum-main {
		flex: 1;
		padding-top: 40px;
		padding-right: 0;
		padding-bottom: 60px;
		padding-left: 0;
	}

/* =================================== Vraag kaarten =================================== */

	.vragen-lijst {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.vraag-kaart {
		background: #FFFFFF;
		border-radius: 10px;
		border: 1.5px solid #E0E0E0;
		padding-top: 20px;
		padding-right: 24px;
		padding-bottom: 20px;
		padding-left: 24px;
		display: flex;
		align-items: flex-start;
		gap: 16px;
		transition: border-color 0.22s ease, box-shadow 0.22s ease;
	}

	.vraag-kaart:hover {
		border-color: #ED228B;
		box-shadow: 0 4px 20px rgba(237,34,139,0.08);
	}

	.vraag-kaart.beantwoord { border-left: 4px solid #95C740; }
	.vraag-kaart.onbeantwoord { border-left: 4px solid #3CC0F0; }

	.vraag-status-icon {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		flex-shrink: 0;
		margin-top: 2px;
	}

	.vraag-status-icon.beantwoord { background: rgba(149,199,64,0.12); }
	.vraag-status-icon.onbeantwoord { background: rgba(60,192,240,0.12); }

	.vraag-inhoud { flex: 1; }

	.vraag-titel {
		font-size: 16px;
		font-weight: 700;
		color: #000000;
		margin-bottom: 4px;
		transition: color 0.22s ease;
	}

	.vraag-kaart:hover .vraag-titel { color: #ED228B; }

	.vraag-meta {
		font-size: 12.48px;
		color: rgba(0,0,0,0.45);
		display: flex;
		gap: 14px;
		flex-wrap: wrap;
	}

	.vraag-badge {
		display: inline-block;
		font-size: 11.2px;
		font-weight: 700;
		padding-top: 2px;
		padding-right: 8px;
		padding-bottom: 2px;
		padding-left: 8px;
		border-radius: 100px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.vraag-badge.beantwoord { background: rgba(149,199,64,0.15); color: #5A8A00; }
	.vraag-badge.onbeantwoord { background: rgba(60,192,240,0.15); color: #0080A8; }

/* =================================== Formulieren =================================== */

	.forum-form-wrap {
		background: #FFFFFF;
		border-radius: 12px;
		border: 1.5px solid #E0E0E0;
		padding-top: 36px;
		padding-right: 40px;
		padding-bottom: 36px;
		padding-left: 40px;
		max-width: 520px;
		margin-top: 0;
		margin-right: auto;
		margin-bottom: 0;
		margin-left: auto;
	}

	.forum-form-wrap h2 {
		font-size: 20.8px;
		font-weight: 800;
		color: #000000;
		margin-bottom: 6px;
		letter-spacing: -0.3px;
	}

	.forum-form-wrap .subtitel {
		font-size: 13.6px;
		color: rgba(0,0,0,0.45);
		margin-bottom: 28px;
	}

	.form-groep { margin-bottom: 18px; }

	.form-groep label {
		display: block;
		font-size: 13.12px;
		font-weight: 600;
		color: #222222;
		margin-bottom: 6px;
	}

	.form-groep input,
	.form-groep textarea {
		width: 100%;
		padding-top: 10px;
		padding-right: 14px;
		padding-bottom: 10px;
		padding-left: 14px;
		border: 1.5px solid #E0E0E0;
		border-radius: 7px;
		font-family: 'Poppins', sans-serif;
		font-size: 14.4px;
		color: #222222;
		background: #FFFFFF;
		outline: none;
		transition: border-color 0.22s ease;
		resize: vertical;
	}

	.form-groep input:focus,
	.form-groep textarea:focus { border-color: #ED228B; }

	.form-groep textarea { min-height: 120px; }

	.form-fout {
		font-size: 12.48px;
		color: #C0392B;
		margin-top: 4px;
	}

	.form-info {
		font-size: 12.48px;
		color: rgba(0,0,0,0.45);
		margin-top: 4px;
	}

/* =================================== Knoppen =================================== */

	.btn {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-family: 'Poppins', sans-serif;
		font-size: 14.08px;
		font-weight: 700;
		padding-top: 10px;
		padding-right: 22px;
		padding-bottom: 10px;
		padding-left: 22px;
		border-radius: 7px;
		border: none;
		cursor: pointer;
		transition: background 0.22s ease, transform 0.22s ease;
		text-decoration: none;
	}

	.btn-primair { background: #ED228B; color: #FFFFFF; }
	.btn-primair:hover { background: #C4136E; transform: scale(1.02); }
	.btn-secundair { background: #F4F4F4; color: #222222; }
	.btn-secundair:hover { background: #E0E0E0; }
	.btn-vol { width: 100%; justify-content: center; }

/* =================================== Meldingen =================================== */

	.melding {
		padding-top: 12px;
		padding-right: 18px;
		padding-bottom: 12px;
		padding-left: 18px;
		border-radius: 7px;
		font-size: 14.08px;
		font-weight: 500;
		margin-bottom: 20px;
	}

	.melding-fout { background: rgba(192,57,43,0.1); color: #C0392B; border: 1px solid rgba(192,57,43,0.2); }
	.melding-ok { background: rgba(149,199,64,0.12); color: #4A7A00; border: 1px solid rgba(149,199,64,0.3); }
	.melding-info { background: rgba(60,192,240,0.1); color: #0080A8; border: 1px solid rgba(60,192,240,0.2); }

/* =================================== Vraag detail =================================== */

	.vraag-detail {
		background: #FFFFFF;
		border-radius: 12px;
		border: 1.5px solid #E0E0E0;
		padding-top: 32px;
		padding-right: 36px;
		padding-bottom: 32px;
		padding-left: 36px;
		margin-bottom: 24px;
	}

	.vraag-detail h1 {
		font-size: 22.4px;
		font-weight: 800;
		color: #000000;
		letter-spacing: -0.3px;
		margin-bottom: 10px;
	}

	.vraag-detail-meta {
		font-size: 12.8px;
		color: rgba(0,0,0,0.4);
		margin-bottom: 20px;
		display: flex;
		gap: 16px;
		flex-wrap: wrap;
	}

	.vraag-detail-tekst {
		font-size: 15.2px;
		line-height: 1.75;
		color: #333333;
	}

	.antwoord-blok {
		background: #000000;
		border-radius: 12px;
		padding-top: 32px;
		padding-right: 36px;
		padding-bottom: 32px;
		padding-left: 36px;
		margin-bottom: 24px;
		border-left: 4px solid #95C740;
	}

	.antwoord-blok h3 {
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 1.2px;
		text-transform: uppercase;
		color: #95C740;
		margin-bottom: 14px;
	}

	.antwoord-blok p {
		font-size: 15.2px;
		line-height: 1.75;
		color: rgba(255,255,255,0.85);
	}

	.antwoord-form {
		background: #FFFFFF;
		border-radius: 12px;
		border: 1.5px solid #E0E0E0;
		padding-top: 28px;
		padding-right: 36px;
		padding-bottom: 28px;
		padding-left: 36px;
	}

	.antwoord-form h3 {
		font-size: 16px;
		font-weight: 700;
		margin-bottom: 16px;
		color: #000000;
	}

/* =================================== Topbalk =================================== */

	.forum-topbalk {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24px;
		flex-wrap: wrap;
		gap: 12px;
	}

	.forum-topbalk h2 {
		font-size: 17.6px;
		font-weight: 700;
		color: #000000;
	}

	.forum-topbalk h2 span { color: #ED228B; margin-right: 4px; }

	/* === Lege staat. === */
	.leeg-staat {
		text-align: center;
		padding-top: 60px;
		padding-right: 20px;
		padding-bottom: 60px;
		padding-left: 20px;
		color: rgba(0,0,0,0.35);
	}

	.leeg-staat p {
		font-size: 15.2px;
		margin-bottom: 20px;
	}

	/* === Form link. === */
	.form-link {
		text-align: center;
		font-size: 13.6px;
		color: rgba(0,0,0,0.45);
		margin-top: 20px;
	}

	.form-link a { color: #ED228B; font-weight: 600; }
	.form-link a:hover { text-decoration: underline; }

	/* === Responsive. === */
	@media (max-width: 600px) {
		.forum-form-wrap {
			padding-top: 24px;
			padding-right: 20px;
			padding-bottom: 24px;
			padding-left: 20px;
		}
		.vraag-detail, .antwoord-blok, .antwoord-form { padding: 20px; }
		.forum-hero h1 { font-size: 20.8px; }
	}

/* =================================== Start Privacy =================================== */

	.container--smal {
		max-width: 760px;
	}

	.pagina-tekst {
		padding-top: 48px;
		padding-right: 0;
		padding-bottom: 80px;
		padding-left: 0;
	}

	.tekst-artikel {
		background: #111111;
		border-radius: 16px;
		padding: 40px;
	}

	/* Intro boven de secties. */
	.tekst-intro {
		color: #FFFFFF;
		font-size: 16.8px;
		line-height: 1.7;
		margin-bottom: 40px;
		padding-bottom: 32px;
		border-bottom: 1px solid rgba(255,255,255,0.1);
	}

	.tekst-sectie {
		margin-bottom: 32px;
	}

	.tekst-sectie h2 {
		font-size: 16px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 1px;
		color: #ED228B;
		margin-bottom: 8px;
	}

	.tekst-sectie p {
		color: #DDDDDD;
		line-height: 1.7;
		margin: 0;
	}

	/* Opsommingen binnen een sectie. */
	.tekst-lijst {
		list-style: disc;
		padding-left: 20px;
		margin-top: 12px;
		margin-right: 0;
		margin-bottom: 0;
		margin-left: 0;
	}

	.tekst-lijst li {
		color: #DDDDDD;
		line-height: 1.7;
		margin-bottom: 8px;
	}

	.tekst-lijst li:last-child { margin-bottom: 0; }

	.tekst-lijst li::marker {
		color: #ED228B;
	}

	/* Alinea na een opsomming. */
	.tekst-lijst + p {
		margin-top: 12px;
	}

	.tekst-bijgewerkt {
		margin-top: 40px;
		font-size: 12.8px;
		color: #888888;
	}

/* =================================== Start module-single.php =================================== */

	/* ── Algemeen ── */
	.pagina-single {
		padding-bottom: 80px;
	}

	.single-sectie-titel {
		font-size: 27.2px;
		font-weight: 800;
		color: #000000;
		margin-bottom: 8px;
		text-align: center;
	}

	.single-sectie-subtitel {
		text-align: center;
		color: #666666;
		margin-bottom: 40px;
		font-size: 16px;
	}

	/* ── Hero ── */
	.single-hero {
		background: #F8F8F8;
		padding-top: 64px;
		padding-right: 0;
		padding-bottom: 48px;
		padding-left: 0;
		border-bottom: 1px solid #EEEEEE;
	}

	.single-hero-inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 48px;
		align-items: center;
	}

	.single-module-id {
		font-size: 12px;
		font-weight: 700;
		color: #3CC0F0;
		text-transform: uppercase;
		letter-spacing: 1.2px;
		display: block;
		margin-bottom: 8px;
	}

	.single-titel {
		font-size: 38.4px;
		font-weight: 800;
		color: #000000;
		line-height: 1.2;
		margin-bottom: 16px;
	}

	.single-subtitel {
		font-size: 17.6px;
		color: #555555;
		line-height: 1.65;
		margin-bottom: 24px;
	}

	.single-badges {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 28px;
	}

	.single-cta-knop {
		display: inline-block;
		background: #ED228B;
		color: #FFFFFF;
		padding-top: 13.6px;
		padding-right: 32px;
		padding-bottom: 13.6px;
		padding-left: 32px;
		border-radius: 10px;
		font-weight: 700;
		font-size: 16px;
		text-decoration: none;
		transition: background .15s, transform .1s;
	}

	.single-cta-knop:hover {
		background: #C9007A;
		transform: translateY(-2px);
	}

	.single-hero-afbeelding img {
		width: 250px;
		padding-top: 30px;
		padding-right: 20px;
		padding-bottom: 30px;
		padding-left: 20px;
		border-radius: 16px;
		box-shadow: 0 8px 40px rgba(0, 0, 0, .12);
	}

	/* ── Beschrijving ── */
	.single-beschrijving {
		padding-top: 64px;
		padding-right: 0;
		padding-bottom: 64px;
		padding-left: 0;
		border-bottom: 1px solid #EEEEEE;
	}

	.single-beschrijving-inner {
		max-width: 820px;
		margin-top: 0;
		margin-right: auto;
		margin-bottom: 0;
		margin-left: auto;
	}

	.single-beschrijving-inner .single-sectie-titel {
		text-align: left;
	}

	.single-beschrijving-tekst {
		font-size: 16px;
		color: #444444;
		line-height: 1.8;
		margin-top: 20px;
	}

	.single-beschrijving-tekst h2,
	.single-beschrijving-tekst h3 {
		color: #000000;
		line-height: 1.3;
		margin-top: 18px;
		margin-right: 0;
		margin-bottom: 12px;
		margin-left: 0;
	}

	.single-beschrijving-tekst h2 {
		font-size: 22.4px;
	}

	.single-beschrijving-tekst h3 {
		font-size: 18.4px;
	}

	.single-beschrijving-tekst p {
		margin-top: 0;
		margin-right: 0;
		margin-bottom: 14px;
		margin-left: 0;
	}

	/* Let op: de editor (Quill) gebruikt <ol> voor ALLE lijsttypes, ook bullets — het
	   type zit in het data-list attribuut op elk <li>. Daarom hier list-style: none op
	   de <ol> zelf, en de bullet-marker losstaand op de <li>'s ingesteld. */
	.single-beschrijving-tekst ul,
	.single-beschrijving-tekst ol {
		margin-top: 0;
		margin-right: 0;
		margin-bottom: 16px;
		margin-left: 0;
		padding-left: 22.4px;
		list-style: none;
	}

	.single-beschrijving-tekst li {
		margin-bottom: 6.4px;
	}

	.single-beschrijving-tekst ul li,
	.single-beschrijving-tekst li[data-list="bullet"] {
		list-style: disc;
	}

	.single-beschrijving-tekst li::marker {
		color: #ED228B;
	}

	.single-beschrijving-tekst strong {
		color: #000000;
	}

	/* ── Video ── */
	.single-video {
		padding-top: 64px;
		padding-right: 0;
		padding-bottom: 64px;
		padding-left: 0;
		background: #F8F8F8;
		border-bottom: 1px solid #EEEEEE;
	}

	.single-video-wrapper {
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
		border-radius: 16px;
		box-shadow: 0 8px 40px rgba(0, 0, 0, .1);
		margin-top: 32px;
	}

	.single-video-wrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

	/* Click-to-load: plaatshouder tot de bezoeker op afspelen klikt. */
	.video-laden {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;
		padding: 24px;
		border: 0;
		background: linear-gradient(135deg, #000000 0%, #333333 100%);
		color: #FFFFFF;
		font-family: 'Poppins', sans-serif;
		text-align: center;
		cursor: pointer;
	}

	.video-laden-knop {
		position: relative;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background: #ED228B;
		transition: transform .2s, background .2s;
	}

	/* Afspeeldriehoek. */
	.video-laden-knop::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 54%;
		transform: translate(-50%, -50%);
		border-top: 16px solid transparent;
		border-bottom: 16px solid transparent;
		border-left: 26px solid #FFFFFF;
	}

	.video-laden:hover .video-laden-knop,
	.video-laden:focus-visible .video-laden-knop {
		transform: scale(1.08);
		background: #3CC0F0;
	}

	.video-laden-tekst {
		font-size: 18px;
		font-weight: 600;
	}

	.video-laden-melding {
		max-width: 420px;
		font-size: 13px;
		line-height: 1.5;
		color: #BBBBBB;
	}

	/* ── Screenshots attentieblok ── */
	.single-ss-blok {
		padding-top: 48px;
		padding-right: 0;
		padding-bottom: 48px;
		padding-left: 0;
		border-bottom: 1px solid #EEEEEE;
	}

	.single-ss-kaart {
		display: flex;
		align-items: center;
		gap: 24px;
		max-width: 900px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 24px;
		padding-right: 28px;
		padding-bottom: 24px;
		padding-left: 28px;
		background: #FFFFFF;
		border: 2px solid #3CC0F0;
		border-radius: 16px;
		box-shadow: 0 8px 32px rgba(60, 192, 240, .15);
		text-decoration: none;
		color: #000000;
		transition: transform .15s, box-shadow .15s;
	}

	.single-ss-kaart:hover {
		transform: translateY(-3px);
		box-shadow: 0 12px 40px rgba(60, 192, 240, .25);
	}

	.single-ss-icoon {
		flex-shrink: 0;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background: #3CC0F0;
		font-size: 26px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.single-ss-tekst {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.single-ss-tekst strong {
		font-size: 19.2px;
		font-weight: 800;
	}

	.single-ss-tekst span {
		font-size: 15px;
		color: #555555;
	}

	.single-ss-kaart-knop {
		flex-shrink: 0;
		background: #ED228B;
		color: #FFFFFF;
		font-weight: 700;
		font-size: 15px;
		padding-top: 12px;
		padding-right: 24px;
		padding-bottom: 12px;
		padding-left: 24px;
		border-radius: 10px;
		transition: background .15s;
	}

	.single-ss-kaart:hover .single-ss-kaart-knop {
		background: #C9007A;
	}

	/* Knoppen in de hero: prijzen en screenshots naast elkaar. */
	.single-hero-knoppen {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px;
	}

	.single-ss-knop {
		display: inline-block;
		background: #FFFFFF;
		color: #000000;
		border: 2px solid #000000;
		padding-top: 11.6px;
		padding-right: 24px;
		padding-bottom: 11.6px;
		padding-left: 24px;
		border-radius: 10px;
		font-weight: 700;
		font-size: 16px;
		text-decoration: none;
		transition: background .15s, color .15s, transform .1s;
	}

	.single-ss-knop:hover {
		background: #000000;
		color: #FFFFFF;
		transform: translateY(-2px);
	}

	/* ── Prijzen ── */
	.single-prijzen {
		padding-top: 64px;
		padding-right: 0;
		padding-bottom: 64px;
		padding-left: 0;
		background: #F8F8F8;
		border-bottom: 1px solid #EEEEEE;
	}

	.single-prijzen-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
		margin-top: 40px;
		align-items: start;
	}

	.single-tier {
		background: #FFFFFF;
		border: 2px solid #E8E8E8;
		border-radius: 16px;
		padding-top: 32px;
		padding-right: 28px;
		padding-bottom: 32px;
		padding-left: 28px;
		position: relative;
		transition: box-shadow .2s;
	}

	.single-tier:hover {
		box-shadow: 0 8px 32px rgba(0, 0, 0, .08);
	}

	.single-tier--highlight {
		border-color: #ED228B;
		box-shadow: 0 8px 32px rgba(237, 34, 139, .12);
	}

	.single-tier-populair {
		position: absolute;
		top: -14px;
		left: 50%;
		transform: translateX(-50%);
		background: #ED228B;
		color: #FFFFFF;
		font-size: 11.2px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.9px;
		padding-top: 4.8px;
		padding-right: 14.4px;
		padding-bottom: 4.8px;
		padding-left: 14.4px;
		border-radius: 20px;
		white-space: nowrap;
	}

	.single-tier-label {
		font-size: 17.6px;
		font-weight: 700;
		color: #000000;
		margin-bottom: 16px;
	}

	.single-tier-prijs {
		display: flex;
		align-items: baseline;
		gap: 3.2px;
		margin-bottom: 4px;
	}

	.single-tier-euro {
		font-size: 20.8px;
		font-weight: 700;
		color: #ED228B;
	}

	.single-tier-bedrag {
		font-size: 38.4px;
		font-weight: 800;
		color: #ED228B;
		line-height: 1;
	}

	.single-tier-btw {
		font-size: 12.48px;
		color: #999999;
		margin-bottom: 20px;
	}

	.single-tier-features {
		list-style: none;
		padding: 0;
		margin-top: 0;
		margin-right: 0;
		margin-bottom: 24px;
		margin-left: 0;
		display: flex;
		flex-direction: column;
		gap: 8px;
		border-top: 1px solid #F0F0F0;
		padding-top: 20px;
	}

	.single-tier-features li {
		font-size: 14px;
		color: #444444;
		line-height: 1.4;
	}

	.single-tier-knop {
		display: block;
		text-align: center;
		background: #000000;
		color: #FFFFFF;
		padding: 13.6px;
		border-radius: 10px;
		font-weight: 700;
		font-size: 15.2px;
		text-decoration: none;
		transition: background .15s, transform .1s;
	}

	.single-tier-knop:hover {
		background: #222222;
		transform: translateY(-1px);
	}

	.single-tier-knop--highlight {
		background: #ED228B;
	}

	.single-tier-knop--highlight:hover {
		background: #C9007A;
	}

	/* ── FAQ ── */
	.single-faq {
		padding-top: 64px;
		padding-right: 0;
		padding-bottom: 64px;
		padding-left: 0;
		border-bottom: 1px solid #EEEEEE;
	}

	.single-faq-lijst {
		max-width: 780px;
		margin-top: 32px;
		margin-right: auto;
		margin-bottom: 0;
		margin-left: auto;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.single-faq-item {
		border: 1.5px solid #E8E8E8;
		border-radius: 12px;
		overflow: hidden;
		background: #FFFFFF;
	}

	.single-faq-vraag {
		width: 100%;
		background: none;
		border: none;
		padding-top: 17.6px;
		padding-right: 22.4px;
		padding-bottom: 17.6px;
		padding-left: 22.4px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
		cursor: pointer;
		font-family: inherit;
		font-size: 15.6px;
		font-weight: 600;
		color: #000000;
		text-align: left;
		transition: background .15s;
	}

	.single-faq-vraag:hover {
		background: #FAFAFA;
	}

	.single-faq-vraag[aria-expanded="true"] {
		color: #ED228B;
		background: #FFF8FB;
	}

	.single-faq-icoon {
		font-size: 20.8px;
		font-weight: 400;
		color: #ED228B;
		flex-shrink: 0;
		transition: transform .2s;
	}

	.single-faq-vraag[aria-expanded="true"] .single-faq-icoon {
		transform: rotate(45deg);
	}

	.single-faq-antwoord {
		margin-top: 0;
		margin-right: 22.4px;
		margin-bottom: 19.2px;
		margin-left: 22.4px;
		padding-top: 14.4px;
		padding-right: 17.6px;
		padding-bottom: 14.4px;
		padding-left: 17.6px;
		font-size: 14.8px;
		color: #1A1A1A;
		line-height: 1.7;
		background: #EAF9FF;
		border-left: 3px solid #3CC0F0;
		border-radius: 6px;
	}

	.single-faq-antwoord[hidden] {
		display: none;
	}

	/* ── Naar boven knop ── */
	.naar-boven {
		position: fixed;
		bottom: 32px;
		right: 32px;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background: #ED228B;
		color: #FFFFFF;
		border: none;
		font-size: 25.6px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		pointer-events: none;
		transition: opacity .25s, transform .2s, bottom .25s;
		box-shadow: 0 4px 16px rgba(237, 34, 139, .35);
		z-index: 900;
	}

	.naar-boven.zichtbaar {
		opacity: 1;
		pointer-events: auto;
	}

	.naar-boven:hover {
		transform: translateY(-3px);
		background: #C9007A;
	}

	/* ── Responsive ── */
	@media (max-width: 900px) {
		.single-hero-inner {
			grid-template-columns: 1fr;
		}

		.single-hero-afbeelding {
			order: -1;
		}

		.single-prijzen-grid {
			grid-template-columns: 1fr;
			max-width: 420px;
			margin-left: auto;
			margin-right: auto;
		}

		.single-titel {
			font-size: 28.8px;
		}
	}

	@media (max-width: 600px) {
		.single-ss-kaart {
			flex-direction: column;
			text-align: center;
		}
	}

/* =================================== Checkout =================================== */

	.pagina-checkout {
		padding-top: 48px;
		padding-right: 0;
		padding-bottom: 80px;
		padding-left: 0;
		min-height: 70vh;
	}

	.checkout-fout {
		background: #FFF0F0;
		border-left: 4px solid #ED228B;
		color: #7A0030;
		padding-top: 13.6px;
		padding-right: 19.2px;
		padding-bottom: 13.6px;
		padding-left: 19.2px;
		border-radius: 6px;
		margin-bottom: 32px;
		font-weight: 500;
	}

	.checkout-grid {
		display: grid;
		grid-template-columns: 380px 1fr;
		gap: 40px;
		align-items: start;
	}

	/* ── Productkaart ── */
	.checkout-product-kaart {
		background: #FFFFFF;
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
		position: sticky;
		top: 100px;
	}

	/* Doos altijd volledig zichtbaar binnen dezelfde hoogte (31-10-2026). */
	.checkout-product-afbeelding {
		width: 100%;
		aspect-ratio: 16/9;
		object-fit: contain;
		box-sizing: border-box;
		padding-top: 16px;
		padding-bottom: 8px;
		background: #FFFFFF;
		display: block;
	}

	.checkout-product-info {
		padding-top: 24px;
		padding-right: 24px;
		padding-bottom: 0;
		padding-left: 24px;
	}

	.checkout-product-id {
		font-size: 12px;
		font-weight: 600;
		color: #3CC0F0;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	.checkout-product-naam {
		font-size: 21.6px;
		font-weight: 700;
		color: #000000;
		margin-top: 5.6px;
		margin-right: 0;
		margin-bottom: 12px;
		margin-left: 0;
		line-height: 1.3;
	}

	.checkout-product-omschrijving {
		font-size: 14.4px;
		color: #555555;
		line-height: 1.6;
		margin-bottom: 16px;
	}

	.checkout-product-prijs-blok {
		display: flex;
		align-items: baseline;
		gap: 8px;
		padding-top: 16px;
		padding-right: 0;
		padding-bottom: 16px;
		padding-left: 0;
		border-top: 1px solid #F0F0F0;
	}

	.checkout-product-prijs {
		font-size: 30.4px;
		font-weight: 800;
		color: #ED228B;
	}

	.checkout-product-btw {
		font-size: 12.8px;
		color: #888888;
	}

	.checkout-voordelen {
		list-style: none;
		padding-top: 16px;
		padding-right: 24px;
		padding-bottom: 24px;
		padding-left: 24px;
		margin: 0;
		border-top: 1px solid #F0F0F0;
		display: flex;
		flex-direction: column;
		gap: 7.2px;
	}

	.checkout-voordelen li {
		font-size: 14px;
		color: #444444;
		font-weight: 500;
	}

	/* ── Formulier ── */
	.checkout-titel {
		font-size: 25.6px;
		font-weight: 800;
		color: #000000;
		margin-bottom: 28px;
	}

	.checkout-formulier {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.checkout-fieldset {
		border: 1.5px solid #E8E8E8;
		border-radius: 12px;
		padding: 24px;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.checkout-legend {
		font-size: 12.48px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 1px;
		color: #3CC0F0;
		padding-top: 0;
		padding-right: 8px;
		padding-bottom: 0;
		padding-left: 8px;
	}

	.checkout-legend--toggle {
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 8px;
		user-select: none;
		width: 100%;
		justify-content: space-between;
	}

	.checkout-legend--toggle:hover {
		color: #ED228B;
	}

	.toggle-icoon {
		font-size: 17.6px;
		font-weight: 400;
		transition: transform .2s;
	}

	.toggle-icoon.open {
		transform: rotate(45deg);
	}

	.checkout-bedrijf-velden {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.checkout-bedrijf-velden[hidden] {
		display: none;
	}

	.checkout-rij {
		display: grid;
		gap: 16px;
	}

	.checkout-rij--2 {
		grid-template-columns: 1fr 1fr;
	}

	.checkout-rij--3 {
		grid-template-columns: 1fr 100px 80px;
	}

	.checkout-veld {
		display: flex;
		flex-direction: column;
		gap: 5.6px;
	}

	.checkout-veld label {
		font-size: 12.8px;
		font-weight: 600;
		color: #333333;
	}

	.verplicht {
		color: #ED228B;
	}

	.checkout-veld input,
	.checkout-veld select {
		border: 1.5px solid #DDDDDD;
		border-radius: 8px;
		padding-top: 10.4px;
		padding-right: 14.4px;
		padding-bottom: 10.4px;
		padding-left: 14.4px;
		font-size: 15.2px;
		font-family: inherit;
		color: #000000;
		background: #FAFAFA;
		transition: border-color .15s, box-shadow .15s;
		outline: none;
		width: 100%;
		box-sizing: border-box;
	}

	.checkout-veld input:focus,
	.checkout-veld select:focus {
		border-color: #3CC0F0;
		box-shadow: 0 0 0 3px rgba(60, 192, 240, .15);
		background: #FFFFFF;
	}

	/* ── Samenvatting ── */
	.checkout-samenvatting {
		background: #F8F8F8;
		border-radius: 12px;
		padding-top: 20px;
		padding-right: 24px;
		padding-bottom: 20px;
		padding-left: 24px;
		display: flex;
		flex-direction: column;
		gap: 9.6px;
	}

	.checkout-samenvatting-rij {
		display: flex;
		justify-content: space-between;
		font-size: 15.2px;
		color: #555555;
	}

	.checkout-samenvatting-rij--totaal {
		border-top: 1px solid #E0E0E0;
		padding-top: 9.6px;
		font-weight: 700;
		font-size: 16.8px;
		color: #000000;
	}

	/* ── Akkoord ── */
	.checkout-akkoord {
		font-size: 14px;
	}

	.checkout-checkbox {
		display: flex;
		align-items: flex-start;
		gap: 9.6px;
		cursor: pointer;
		color: #444444;
		line-height: 1.5;
	}

	.checkout-checkbox input {
		margin-top: 3.2px;
		accent-color: #ED228B;
		flex-shrink: 0;
	}

	.checkout-checkbox a {
		color: #3CC0F0;
		text-decoration: underline;
	}

	/* ── Betaalknop ── */
	.checkout-knop {
		background: #ED228B;
		color: #FFFFFF;
		border: none;
		border-radius: 10px;
		padding-top: 16px;
		padding-right: 24px;
		padding-bottom: 16px;
		padding-left: 24px;
		font-size: 16.8px;
		font-weight: 700;
		font-family: inherit;
		cursor: pointer;
		width: 100%;
		transition: background .15s, transform .1s;
		letter-spacing: 0.3px;
	}

	.checkout-knop:hover {
		background: #C9007A;
		transform: translateY(-1px);
	}

	.checkout-knop:active {
		transform: translateY(0);
	}

	/* ── Mollie-vermelding ── */
	.checkout-mollie-tekst {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		font-size: 12.8px;
		color: #888888;
		text-align: center;
	}

	.checkout-mollie-logo {
		height: 18px;
		opacity: .7;
	}

	/* ── Betaalmethodes uit het Mollie-account (31-10-2026). ── */
	.checkout-betaalmethoden {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 8px;
		list-style: none;
		padding: 0;
		margin-top: 16px;
		margin-bottom: 12px;
	}

	.checkout-betaalmethode {
		display: flex;
		align-items: center;
		gap: 10px;
		padding-top: 8px;
		padding-right: 10px;
		padding-bottom: 8px;
		padding-left: 10px;
		border: 1px solid #E5E5E5;
		border-radius: 8px;
		background: #FFFFFF;
	}

	.checkout-betaalmethode-icoon {
		width: 32px;
		height: 24px;
		flex-shrink: 0;
		object-fit: contain;
	}

	.checkout-betaalmethode-naam {
		display: flex;
		flex-direction: column;
		font-size: 13.6px;
		line-height: 1.3;
		color: #333333;
	}

	.checkout-betaalmethode-merken {
		font-size: 11.2px;
		color: #888888;
	}

	/* ── Responsive ── */
	@media (max-width: 900px) {
		.checkout-grid {
			grid-template-columns: 1fr;
		}

		.checkout-product-kaart {
			position: static;
		}

		.checkout-rij--3 {
			grid-template-columns: 1fr 90px 70px;
		}
	}

	@media (max-width: 560px) {
		.checkout-rij--2 {
			grid-template-columns: 1fr;
		}

		.checkout-rij--3 {
			grid-template-columns: 1fr 80px;
		}
	}
/* =================================== Status pagina's (succes, pending, sorry) =================================== */

	.pagina-status {
		padding-top: 64px;
		padding-right: 0;
		padding-bottom: 96px;
		padding-left: 0;
		min-height: 70vh;
		display: flex;
		align-items: center;
	}

	.status-kaart {
		max-width: 560px;
		margin-top: 0;
		margin-right: auto;
		margin-bottom: 0;
		margin-left: auto;
		background: #FFFFFF;
		border-radius: 20px;
		padding-top: 48px;
		padding-right: 40px;
		padding-bottom: 48px;
		padding-left: 40px;
		text-align: center;
		box-shadow: 0 8px 40px rgba(0, 0, 0, .08);
	}

	/* ── Icoon ── */
	.status-icoon {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 35.2px;
		margin-top: 0;
		margin-right: auto;
		margin-bottom: 24px;
		margin-left: auto;
		font-weight: 700;
	}

	.status-icoon--succes {
		background: #EDFBF0;
		color: #95C740;
		border: 3px solid #95C740;
	}

	.status-icoon--pending {
		background: #FFF8EC;
		color: #F0A500;
		border: 3px solid #F0A500;
	}

	.status-icoon--sorry {
		background: #FFF0F0;
		color: #ED228B;
		border: 3px solid #ED228B;
	}

	/* ── Tekst ── */
	.status-titel {
		font-size: 27.2px;
		font-weight: 800;
		color: #000000;
		margin-bottom: 16px;
	}

	.status-intro {
		font-size: 16px;
		color: #555555;
		line-height: 1.65;
		margin-bottom: 12px;
	}

	/* ── Besteloverzicht ── */
	.status-details {
		background: #F8F8F8;
		border-radius: 12px;
		padding-top: 20px;
		padding-right: 24px;
		padding-bottom: 20px;
		padding-left: 24px;
		margin-top: 28px;
		margin-right: 0;
		margin-bottom: 28px;
		margin-left: 0;
		text-align: left;
		display: flex;
		flex-direction: column;
		gap: 9.6px;
	}

	.status-details-rij {
		display: flex;
		justify-content: space-between;
		font-size: 14.4px;
		color: #555555;
		gap: 16px;
	}

	.status-details-rij span:first-child {
		font-weight: 600;
		color: #333333;
		flex-shrink: 0;
	}

	.status-details-rij span:last-child {
		text-align: right;
		word-break: break-word;
	}

	/* ── Knoppen ── */
	.status-knoppen {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-top: 28px;
	}

	.status-knop {
		display: block;
		padding-top: 14.4px;
		padding-right: 24px;
		padding-bottom: 14.4px;
		padding-left: 24px;
		border-radius: 10px;
		font-weight: 700;
		font-size: 16px;
		text-decoration: none;
		transition: background .15s, transform .1s;
		text-align: center;
	}

	.status-knop--primair {
		background: #ED228B;
		color: #FFFFFF;
	}

	.status-knop--primair:hover {
		background: #C9007A;
		transform: translateY(-1px);
	}

	.status-knop--secundair {
		background: #F0F0F0;
		color: #333333;
	}

	.status-knop--secundair:hover {
		background: #E0E0E0;
		transform: translateY(-1px);
	}

	/* Enkelvoudige knop ook wat marge geven. */
	.status-kaart > .status-knop {
		margin-top: 28px;
	}
/* =================================== Contact =================================== */

	/* Contact pagina lay-out. */
	.pagina-contact {
		padding-top: 48px;
		padding-right: 0;
		padding-bottom: 80px;
		padding-left: 0;
	}



	/* Formulier wrapper. */
	.contact-formulier-wrap {
		background: #111111;
		border-radius: 16px;
		padding: 40px;
	}

	/* Succes bericht. */
	.contact-succes {
		text-align: center;
		padding-top: 48px;
		padding-right: 32px;
		padding-bottom: 48px;
		padding-left: 32px;
	}

	.succes-icoon {
		width: 70px;
		height: 70px;
		background: #95C740;
		color: #000000;
		font-size: 32px;
		font-weight: 700;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 0;
		margin-right: auto;
		margin-bottom: 24px;
		margin-left: auto;
	}

	.contact-succes h2 {
		font-size: 25.6px;
		margin-bottom: 12px;
	}

	.contact-succes p {
		color: #AAAAAA;
		margin-bottom: 32px;
	}

	/* Fout alert. */
	.contact-alert {
		border-radius: 10px;
		padding-top: 14.4px;
		padding-right: 19.2px;
		padding-bottom: 14.4px;
		padding-left: 19.2px;
		margin-bottom: 24px;
		font-size: 14.4px;
	}

	.contact-alert--fout {
		background: rgba(237, 34, 139, .12);
		border: 1px solid rgba(237, 34, 139, .4);
		color: #ED228B;
	}

	/* Formulier rijen. */
	.formulier-rij {
		display: grid;
		gap: 20px;
		margin-bottom: 20px;
	}

	.formulier-rij--twee {
		grid-template-columns: 1fr 1fr;
	}

	.formulier-groep {
		display: flex;
		flex-direction: column;
		gap: 6.4px;
		margin-bottom: 20px;
	}

	.formulier-rij .formulier-groep {
		margin-bottom: 0;
	}

	.formulier-groep label {
		font-size: 13.6px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.8px;
		color: #AAAAAA;
	}

	.formulier-groep input,
	.formulier-groep textarea {
		background: rgba(255, 255, 255, .05);
		border: 1.5px solid rgba(255, 255, 255, .1);
		border-radius: 8px;
		padding-top: 12px;
		padding-right: 16px;
		padding-bottom: 12px;
		padding-left: 16px;
		color: #FFFFFF;
		font-size: 15.2px;
		font-family: inherit;
		transition: border-color .2s, background .2s;
		resize: vertical;
		width: 100%;
		box-sizing: border-box;
	}

	.formulier-groep input:focus,
	.formulier-groep textarea:focus {
		outline: none;
		border-color: #3CC0F0;
		background: rgba(60, 192, 240, .06);
	}

	.formulier-groep.heeft-fout input,
	.formulier-groep.heeft-fout textarea {
		border-color: #ED228B;
		background: rgba(237, 34, 139, .05);
	}

	.veld-fout {
		color: #ED228B;
		font-size: 12.8px;
	}

	.verplicht {
		color: #ED228B;
	}

	/* Teken teller. */
	.bericht-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.teken-teller {
		font-size: 12.48px;
		color: #888888;
		text-align: right;
	}

	/* Checkbox. */
	.formulier-groep--checkbox {
		margin-bottom: 24px;
	}

	.checkbox-label {
		display: flex;
		align-items: flex-start;
		gap: 9.6px;
		cursor: pointer;
		font-size: 14.08px;
		color: #AAAAAA;
		text-transform: none;
		letter-spacing: 0;
		font-weight: 400;
	}

	.checkbox-label input[type="checkbox"] {
		width: auto;
		margin-top: 2.4px;
		accent-color: #ED228B;
		flex-shrink: 0;
	}

	/* Privacymelding onder het contactformulier. */
	.formulier-privacy {
		font-size: 14.08px;
		color: #AAAAAA;
		margin-bottom: 24px;
	}

	/* Footer formulier. */
	.formulier-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 8px;
	}

	.verplicht-uitleg {
		font-size: 12.8px;
		color: #888888;
	}

	.contact-verstuur {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding-top: 12px;
		padding-right: 32px;
		padding-bottom: 12px;
		padding-left: 32px;
	}

	.verstuur-icoon {
		transition: transform .2s;
	}

	.contact-verstuur:hover .verstuur-icoon {
		transform: translateX(4px);
	}

	/* Responsive. */
	@media (max-width: 900px) {
		.contact-layout {
			grid-template-columns: 1fr;
		}

		.formulier-rij--twee {
			grid-template-columns: 1fr;
		}

		.contact-formulier-wrap {
			padding: 24px;
		}

		.formulier-footer {
			flex-direction: column;
			gap: 16px;
			align-items: flex-start;
		}

		.contact-verstuur {
			width: 100%;
			justify-content: center;
		}
	}

/* =================================== Screenshotpagina =================================== */

	.pagina-screenshots {
		padding-bottom: 0;
	}

	/* ── Hero ── */
	.ss-hero {
		background: #F8F8F8;
		padding-top: 56px;
		padding-right: 0;
		padding-bottom: 48px;
		padding-left: 0;
		border-bottom: 1px solid #EEEEEE;
		text-align: center;
	}

	.ss-hero-label {
		display: inline-block;
		background: #3CC0F0;
		color: #FFFFFF;
		font-size: 11.2px;
		font-weight: 700;
		letter-spacing: 1px;
		text-transform: uppercase;
		padding-top: 4px;
		padding-right: 12px;
		padding-bottom: 4px;
		padding-left: 12px;
		border-radius: 100px;
		margin-bottom: 16px;
	}

	.ss-hero-titel {
		font-size: 38.4px;
		font-weight: 800;
		color: #000000;
		line-height: 1.2;
		margin-bottom: 12px;
	}

	.ss-hero-intro {
		font-size: 17.6px;
		color: #555555;
		margin-bottom: 28px;
	}

	.ss-hero-knoppen {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 12px;
	}

	.ss-knop-leeg {
		color: #000000;
		font-weight: 600;
		text-decoration: none;
		padding-top: 13.6px;
		padding-right: 16px;
		padding-bottom: 13.6px;
		padding-left: 16px;
	}

	.ss-knop-leeg:hover {
		color: #ED228B;
	}

	/* ── Thumbnail-overzicht ── */
	.ss-overzicht {
		background: #FFFFFF;
		border-bottom: 1px solid #EEEEEE;
		padding-top: 20px;
		padding-right: 0;
		padding-bottom: 20px;
		padding-left: 0;
	}

	.ss-overzicht-lijst {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scrollbar-width: thin;
		padding-bottom: 6px;
	}

	/* Thumbnails gecentreerd. Met auto-marges in plaats van justify-content: center blijft
	   de eerste thumbnail bereikbaar als de rij breder is dan het scherm en gaat scrollen. */
	.ss-overzicht-lijst > li:first-child {
		margin-left: auto;
	}

	.ss-overzicht-lijst > li:last-child {
		margin-right: auto;
	}

	.ss-overzicht-link {
		position: relative;
		display: block;
		width: 120px;
		height: 75px;
		border-radius: 0;
		overflow: hidden;
		border: 2px solid #E0E0E0;
		transition: border-color .15s, transform .15s;
	}

	.ss-overzicht-link:hover,
	.ss-overzicht-link.actief {
		border-color: #ED228B;
		transform: translateY(-2px);
	}

	.ss-overzicht-link img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top left;
		display: block;
	}

	.ss-overzicht-nummer {
		position: absolute;
		top: 4px;
		left: 4px;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: #000000;
		color: #FFFFFF;
		font-size: 11px;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ss-overzicht-link.actief .ss-overzicht-nummer {
		background: #ED228B;
	}

	/* ── Screenshots ── */
	.ss-lijst {
		padding-top: 64px;
		padding-right: 0;
		padding-bottom: 32px;
		padding-left: 0;
	}

	/* Alle screenshots gecentreerd onder elkaar in hun originele formaat, tekst eronder.
	   De breedte volgt de afbeelding, zodat de tekst eronder binnen de randen van de foto blijft. */
	.ss-stap {
		width: fit-content;
		max-width: 100%;
		margin-top: 0;
		margin-right: auto;
		margin-bottom: 72px;
		margin-left: auto;
		scroll-margin-top: 120px;
	}

	/* De knop krimpt mee met de afbeelding; alleen op smalle schermen wordt die kleiner geschaald. */
	.ss-afbeelding-knop {
		position: relative;
		display: block;
		width: fit-content;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
		border: 1px solid #EEEEEE;
		border-radius: 0;
		background: #FFFFFF;
		overflow: hidden;
		cursor: zoom-in;
		box-shadow: 0 8px 40px rgba(0, 0, 0, .08);
		transition: box-shadow .2s, transform .2s;
	}

	.ss-afbeelding-knop:hover {
		box-shadow: 0 12px 48px rgba(0, 0, 0, .14);
		transform: translateY(-3px);
	}

	.ss-afbeelding-knop:focus-visible {
		outline: 3px solid #3CC0F0;
		outline-offset: 3px;
	}

	.ss-afbeelding-knop img {
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
	}

	.ss-zoom-icoon {
		position: absolute;
		right: 12px;
		bottom: 12px;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: rgba(0, 0, 0, .65);
		color: #FFFFFF;
		font-size: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity .2s;
	}

	.ss-afbeelding-knop:hover .ss-zoom-icoon,
	.ss-afbeelding-knop:focus-visible .ss-zoom-icoon {
		opacity: 1;
	}

	/* Stapnummer gecentreerd boven de afbeelding. */
	.ss-stap-nummer {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: #ED228B;
		color: #FFFFFF;
		font-size: 16px;
		font-weight: 800;
		margin-top: 0;
		margin-right: auto;
		margin-bottom: 16px;
		margin-left: auto;
	}

	.ss-stap-titel {
		font-size: 22.4px;
		font-weight: 800;
		color: #000000;
		line-height: 1.3;
		margin-bottom: 8px;
	}

	.ss-stap-uitleg {
		font-size: 16px;
		color: #555555;
		line-height: 1.7;
	}

	/* Opmaak uit de editor (vet, H2, H3, bullets). Quill zet bullets in een <ol> met data-list="bullet". */
	.ss-stap-uitleg p {
		margin: 0;
	}

	.ss-stap-uitleg p + p,
	.ss-stap-uitleg ul,
	.ss-stap-uitleg ol {
		margin-top: 10px;
	}

	.ss-stap-uitleg h2,
	.ss-stap-uitleg h3 {
		color: #000000;
		line-height: 1.3;
		margin-top: 14px;
		margin-bottom: 6px;
	}

	.ss-stap-uitleg h2 {
		font-size: 19.2px;
	}

	.ss-stap-uitleg h3 {
		font-size: 17.6px;
	}

	.ss-stap-uitleg h2:first-child,
	.ss-stap-uitleg h3:first-child {
		margin-top: 0;
	}

	.ss-stap-uitleg ul,
	.ss-stap-uitleg ol,
	.ss-lightbox-uitleg ul,
	.ss-lightbox-uitleg ol {
		margin-bottom: 0;
		padding-left: 22px;
		list-style: none;
	}

	.ss-stap-uitleg ul li,
	.ss-stap-uitleg li[data-list="bullet"],
	.ss-lightbox-uitleg ul li,
	.ss-lightbox-uitleg li[data-list="bullet"] {
		list-style: disc;
		margin-bottom: 4px;
	}

	.ss-stap-uitleg li::marker,
	.ss-lightbox-uitleg li::marker {
		color: #ED228B;
	}

	.ss-stap-uitleg strong {
		color: #000000;
	}

	/* Tekst links uitgelijnd, binnen de breedte van de afbeelding met een marge links en rechts.
	   Met width 0 en min-width 100% bepaalt alleen de afbeelding de breedte van de stap. */
	.ss-tekst {
		width: 0;
		min-width: 100%;
		margin-top: 24px;
		padding-left: 24px;
		padding-right: 24px;
		text-align: left;
	}

	/* ── Afsluiting ── */
	.ss-afsluiting {
		background: #F8F8F8;
		border-top: 1px solid #EEEEEE;
		padding-top: 64px;
		padding-right: 0;
		padding-bottom: 72px;
		padding-left: 0;
		text-align: center;
	}

	.ss-afsluiting .single-sectie-subtitel {
		margin-bottom: 28px;
	}

	/* ── Lightbox ── */
	.ss-geen-scroll {
		overflow: hidden;
	}

	.ss-lightbox {
		width: 100vw;
		height: 100vh;
		max-width: 100vw;
		max-height: 100vh;
		margin: 0;
		padding: 0;
		border: none;
		background: rgba(0, 0, 0, .92);
		color: #FFFFFF;
	}

	.ss-lightbox[open] {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ss-lightbox::backdrop {
		background: rgba(0, 0, 0, .92);
	}

	.ss-lightbox-figuur {
		margin: 0;
		max-width: calc(100vw - 160px);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}

	.ss-lightbox-figuur img {
		display: block;
		max-width: 100%;
		max-height: calc(100vh - 180px);
		width: auto;
		height: auto;
		border-radius: 0;
		background: #FFFFFF;
	}

	.ss-lightbox-tekst {
		max-width: 760px;
		text-align: center;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.ss-lightbox-teller {
		font-size: 12px;
		font-weight: 700;
		color: #3CC0F0;
		letter-spacing: 1px;
	}

	.ss-lightbox-tekst strong {
		font-size: 17.6px;
	}

	.ss-lightbox-uitleg {
		font-size: 14px;
		color: rgba(255, 255, 255, .78);
	}

	.ss-lightbox-uitleg p,
	.ss-lightbox-uitleg h2,
	.ss-lightbox-uitleg h3 {
		margin: 0;
	}

	.ss-lightbox-uitleg h2,
	.ss-lightbox-uitleg h3 {
		font-size: 15px;
		color: #FFFFFF;
		margin-top: 6px;
	}

	.ss-lightbox-uitleg ul,
	.ss-lightbox-uitleg ol {
		margin-top: 4px;
		display: inline-block;
		text-align: left;
	}

	.ss-lightbox-uitleg strong {
		color: #FFFFFF;
	}

	.ss-lightbox-sluit,
	.ss-lightbox-pijl {
		position: absolute;
		border: none;
		background: rgba(255, 255, 255, .12);
		color: #FFFFFF;
		cursor: pointer;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background .15s;
	}

	.ss-lightbox-sluit:hover,
	.ss-lightbox-pijl:hover {
		background: #ED228B;
	}

	.ss-lightbox-sluit {
		top: 20px;
		right: 20px;
		width: 44px;
		height: 44px;
		font-size: 28px;
	}

	.ss-lightbox-pijl {
		top: 50%;
		width: 52px;
		height: 52px;
		font-size: 36px;
		transform: translateY(-50%);
	}

	.ss-lightbox-pijl--vorige {
		left: 20px;
	}

	.ss-lightbox-pijl--volgende {
		right: 20px;
	}

	.ss-lightbox-pijl[hidden] {
		display: none;
	}

	@media (max-width: 900px) {
		.ss-hero-titel {
			font-size: 28.8px;
		}
	}

	@media (max-width: 600px) {
		.ss-stap {
			margin-bottom: 48px;
		}

		.ss-lightbox-figuur {
			max-width: calc(100vw - 24px);
		}

		.ss-lightbox-pijl {
			top: auto;
			bottom: 16px;
			transform: none;
			width: 44px;
			height: 44px;
			font-size: 30px;
		}
	}

/* =================================== Diensten =================================== */

	/* Diensten pagina lay-out. */
	.pagina-diensten {
		padding-top: 64px;
		padding-bottom: 80px;
	}

	/* Intro. */
	.diensten-intro {
		max-width: 760px;
		margin-top: 0;
		margin-right: auto;
		margin-bottom: 72px;
		margin-left: auto;
		text-align: center;
	}

	.diensten-intro h2 {
		font-size: 28.8px;
		font-weight: 800;
		letter-spacing: -0.5px;
		line-height: 1.25;
		color: #000000;
		margin-bottom: 16px;
	}

	.diensten-intro p {
		font-size: 17.6px;
		color: #333333;
	}

	/* Blokken en koppen. */
	.diensten-blok {
		margin-bottom: 80px;
	}

	.diensten-kop {
		max-width: 800px;
		margin-bottom: 36px;
	}

	.diensten-kicker {
		display: inline-block;
		font-size: 12.48px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 1.2px;
		color: #ED228B;
		margin-bottom: 8px;
	}

	.diensten-kicker--blauw {
		color: #3CC0F0;
	}

	.diensten-kicker--groen {
		color: #95C740;
	}

	.diensten-kop h2,
	.diensten-waarom-tekst h2 {
		font-size: 32px;
		font-weight: 800;
		letter-spacing: -1px;
		line-height: 1.2;
		color: #000000;
		margin-bottom: 12px;
	}

	.diensten-kop p,
	.diensten-waarom-tekst p {
		font-size: 16px;
		color: #333333;
	}

	/* Kaarten. */
	.diensten-grid {
		display: grid;
		gap: 24px;
	}

	.diensten-grid--vier {
		grid-template-columns: repeat(4, 1fr);
	}

	.diensten-grid--drie {
		grid-template-columns: repeat(3, 1fr);
	}

	.dienst-kaart {
		background: #FFFFFF;
		border: 1.5px solid #E0E0E0;
		border-radius: 16px;
		padding: 28px;
		transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
	}

	.dienst-kaart:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 32px rgba(0,0,0,0.08);
	}

	.dienst-kaart--roze:hover {
		border-color: #ED228B;
	}

	.dienst-kaart--blauw:hover {
		border-color: #3CC0F0;
	}

	.dienst-kaart--groen:hover {
		border-color: #95C740;
	}

	.dienst-icoon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		border-radius: 14px;
		margin-bottom: 20px;
	}

	.dienst-icoon svg {
		width: 26px;
		height: 26px;
	}

	.dienst-kaart--roze .dienst-icoon {
		background: rgba(237,34,139,0.1);
		color: #ED228B;
	}

	.dienst-kaart--blauw .dienst-icoon {
		background: rgba(60,192,240,0.12);
		color: #3CC0F0;
	}

	.dienst-kaart--groen .dienst-icoon {
		background: rgba(149,199,64,0.14);
		color: #95C740;
	}

	.dienst-kaart h3 {
		font-size: 17.6px;
		font-weight: 700;
		line-height: 1.3;
		color: #000000;
		margin-bottom: 8px;
	}

	.dienst-kaart p {
		font-size: 14.4px;
		color: #333333;
	}

	/* Donker paneel, zelfde basis als het contactformulier. */
	.diensten-paneel {
		background: #111111;
		border-radius: 16px;
		padding: 56px;
		position: relative;
		overflow: hidden;
	}

	.diensten-paneel::before {
		content: '';
		position: absolute;
		inset: 0;
		background: radial-gradient(ellipse 70% 60% at 85% 10%, rgba(237,34,139,0.16) 0%, transparent 70%),
		            radial-gradient(ellipse 60% 50% at 10% 95%, rgba(60,192,240,0.12) 0%, transparent 60%);
		pointer-events: none;
	}

	.diensten-paneel > * {
		position: relative;
	}

	.diensten-paneel .diensten-kop h2,
	.diensten-paneel .dienst-kaart h3 {
		color: #FFFFFF;
	}

	.diensten-paneel .diensten-kop p,
	.diensten-paneel .dienst-kaart p {
		color: #AAAAAA;
	}

	.diensten-paneel .dienst-kaart {
		background: rgba(255,255,255,0.04);
		border-color: rgba(255,255,255,0.1);
	}

	.diensten-paneel .dienst-kaart:hover {
		background: rgba(255,255,255,0.07);
		box-shadow: none;
	}

	/* Werkwijze in stappen. */
	.diensten-stappen {
		list-style: none;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 32px;
	}

	.dienst-stap {
		padding-top: 20px;
		border-top: 3px solid #E0E0E0;
	}

	.stap-nummer {
		display: block;
		font-size: 40px;
		font-weight: 800;
		letter-spacing: -1.5px;
		line-height: 1;
		margin-bottom: 14px;
	}

	.dienst-stap:nth-child(1) { border-top-color: #ED228B; }
	.dienst-stap:nth-child(2) { border-top-color: #3CC0F0; }
	.dienst-stap:nth-child(3) { border-top-color: #95C740; }
	.dienst-stap:nth-child(4) { border-top-color: #000000; }

	.dienst-stap:nth-child(1) .stap-nummer { color: #ED228B; }
	.dienst-stap:nth-child(2) .stap-nummer { color: #3CC0F0; }
	.dienst-stap:nth-child(3) .stap-nummer { color: #95C740; }
	.dienst-stap:nth-child(4) .stap-nummer { color: #000000; }

	.dienst-stap h3 {
		font-size: 17.6px;
		font-weight: 700;
		color: #000000;
		margin-bottom: 6px;
	}

	.dienst-stap p {
		font-size: 14.4px;
		color: #333333;
	}

	/* Waarom, met groene vinkjes zoals op de productkaart. */
	.diensten-waarom {
		display: grid;
		grid-template-columns: 5fr 7fr;
		gap: 56px;
		align-items: center;
		background: #F8F8F8;
		border-radius: 16px;
		padding: 56px;
	}

	.diensten-vinkjes {
		list-style: none;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		row-gap: 18px;
		column-gap: 28px;
	}

	.diensten-vinkjes li {
		position: relative;
		padding-left: 34px;
		font-size: 15.2px;
		font-weight: 500;
		line-height: 1.5;
		color: #222222;
	}

	.diensten-vinkjes li::before {
		content: '';
		position: absolute;
		top: 1px;
		left: 0;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: #95C740;
	}

	.diensten-vinkjes li::after {
		content: '';
		position: absolute;
		top: 5px;
		left: 8px;
		width: 5px;
		height: 10px;
		border-right: 2px solid #FFFFFF;
		border-bottom: 2px solid #FFFFFF;
		transform: rotate(45deg);
	}

	/* Call to action. */
	.diensten-cta {
		background: #000000;
		color: #FFFFFF;
		border-radius: 16px;
		padding: 64px;
		text-align: center;
		position: relative;
		overflow: hidden;
	}

	.diensten-cta::before {
		content: '';
		position: absolute;
		inset: 0;
		background: radial-gradient(ellipse 80% 70% at 70% 20%, rgba(237,34,139,0.2) 0%, transparent 70%),
		            radial-gradient(ellipse 60% 60% at 15% 90%, rgba(149,199,64,0.14) 0%, transparent 60%);
		pointer-events: none;
	}

	.diensten-cta > * {
		position: relative;
	}

	.diensten-cta h2 {
		font-size: 32px;
		font-weight: 800;
		letter-spacing: -1px;
		line-height: 1.2;
		margin-bottom: 12px;
	}

	.diensten-cta h2 em {
		font-style: normal;
		color: #ED228B;
	}

	.diensten-cta p {
		font-size: 16.8px;
		color: rgba(255,255,255,0.62);
		max-width: 620px;
		margin-top: 0;
		margin-right: auto;
		margin-bottom: 28px;
		margin-left: auto;
	}

	.diensten-cta-knoppen {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 24px;
	}

	.diensten-cta-knop {
		gap: 8px;
		font-size: 15.2px;
		padding-top: 14px;
		padding-right: 32px;
		padding-bottom: 14px;
		padding-left: 32px;
	}

	.diensten-cta-knop:hover .verstuur-icoon {
		transform: translateX(4px);
	}

	.diensten-cta-link {
		font-size: 14.4px;
		font-weight: 600;
		color: rgba(255,255,255,0.75);
		border-bottom: 1.5px solid rgba(255,255,255,0.3);
		transition: color 0.22s ease, border-color 0.22s ease;
	}

	.diensten-cta-link:hover {
		color: #3CC0F0;
		border-color: #3CC0F0;
	}

	/* Responsive. */
	@media (max-width: 1024px) {
		.diensten-grid--vier,
		.diensten-grid--drie,
		.diensten-stappen {
			grid-template-columns: repeat(2, 1fr);
		}

		.diensten-waarom {
			grid-template-columns: 1fr;
			gap: 32px;
		}
	}

	@media (max-width: 600px) {
		.pagina-diensten {
			padding-top: 40px;
			padding-bottom: 56px;
		}

		.diensten-intro {
			margin-bottom: 48px;
		}

		.diensten-intro h2 {
			font-size: 24px;
		}

		.diensten-blok {
			margin-bottom: 56px;
		}

		.diensten-kop h2,
		.diensten-waarom-tekst h2,
		.diensten-cta h2 {
			font-size: 25.6px;
		}

		.diensten-grid--vier,
		.diensten-grid--drie,
		.diensten-stappen,
		.diensten-vinkjes {
			grid-template-columns: 1fr;
		}

		.diensten-paneel,
		.diensten-waarom,
		.diensten-cta {
			padding: 24px;
		}

		.diensten-cta-knop {
			width: 100%;
			justify-content: center;
		}
	}

/* =================================== Kortingen =================================== */

	/* Bouwt voort op de diensten-classes. */
	.diensten-grid--twee {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Kortingskaart met groot percentage. */
	.korting-kaart {
		background: #FFFFFF;
		border: 1.5px solid #E0E0E0;
		border-top-width: 4px;
		border-radius: 16px;
		padding: 28px;
		transition: transform 0.22s ease, box-shadow 0.22s ease;
	}

	.korting-kaart:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 32px rgba(0,0,0,0.08);
	}

	.korting-kaart--roze  { border-top-color: #ED228B; }
	.korting-kaart--blauw { border-top-color: #3CC0F0; }
	.korting-kaart--groen { border-top-color: #95C740; }

	.korting-label {
		display: block;
		font-size: 13.6px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.8px;
		color: #333333;
		margin-bottom: 6px;
	}

	.korting-waarde {
		display: block;
		font-size: 40px;
		font-weight: 800;
		letter-spacing: -1.5px;
		line-height: 1.1;
		margin-bottom: 12px;
	}

	.korting-waarde--tekst {
		font-size: 28px;
		letter-spacing: -0.8px;
	}

	.korting-kaart--roze .korting-waarde  { color: #ED228B; }
	.korting-kaart--blauw .korting-waarde { color: #3CC0F0; }
	.korting-kaart--groen .korting-waarde { color: #95C740; }

	.korting-kaart p {
		font-size: 14.4px;
		color: #333333;
	}

	/* Toelichting met knop onder de staffel. */
	.korting-voet {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
		margin-top: 24px;
		background: #F8F8F8;
		border-radius: 16px;
		padding: 28px;
	}

	.korting-voet p {
		font-size: 14.4px;
		color: #333333;
		max-width: 760px;
	}

	.korting-voet .kaart-knop {
		flex-shrink: 0;
	}

	/* Geen lopende acties. */
	.korting-leeg {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		border: 1.5px dashed #E0E0E0;
		border-radius: 16px;
		padding: 28px;
	}

	.korting-leeg p {
		font-size: 15.2px;
		color: #333333;
	}

	.korting-leeg .kaart-knop {
		flex-shrink: 0;
	}

	/* Bundels en trouwe klanten naast elkaar. */
	.korting-duo {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 48px;
	}

	.korting-link {
		display: inline-block;
		margin-top: 20px;
		font-size: 14.4px;
		font-weight: 700;
		color: #ED228B;
		border-bottom: 1.5px solid rgba(237,34,139,0.3);
		transition: color 0.22s ease, border-color 0.22s ease;
	}

	.korting-link:hover {
		color: #C4136E;
		border-color: #C4136E;
	}

	/* Partnerprogramma in het donkere paneel. */
	.korting-partners {
		margin-bottom: 0;
		display: grid;
		grid-template-columns: 5fr 7fr;
		gap: 56px;
		align-items: center;
	}

	.korting-partners .diensten-waarom-tekst h2 {
		color: #FFFFFF;
	}

	.korting-partners .diensten-waarom-tekst p {
		color: #AAAAAA;
		margin-bottom: 24px;
	}

	.korting-partners .diensten-vinkjes li {
		color: #FFFFFF;
	}

	/* Responsive. */
	@media (max-width: 1024px) {
		.korting-duo,
		.korting-partners {
			grid-template-columns: 1fr;
			gap: 32px;
		}

		.korting-duo {
			gap: 0;
		}
	}

	@media (max-width: 600px) {
		.diensten-grid--twee {
			grid-template-columns: 1fr;
		}

		.korting-voet,
		.korting-leeg {
			flex-direction: column;
			align-items: flex-start;
			padding: 24px;
		}

		.korting-voet .kaart-knop,
		.korting-leeg .kaart-knop {
			width: 100%;
			justify-content: center;
		}

		.korting-waarde {
			font-size: 32px;
		}

		.korting-waarde--tekst {
			font-size: 24px;
		}
	}

/* =================================== Over ons =================================== */

	/* Verhaal naast de cijfers. */
	.over-verhaal {
		display: grid;
		grid-template-columns: 7fr 5fr;
		gap: 64px;
		align-items: center;
	}

	.over-verhaal-tekst h2 {
		font-size: 32px;
		font-weight: 800;
		letter-spacing: -1px;
		line-height: 1.2;
		color: #000000;
		margin-bottom: 20px;
	}

	.over-verhaal-tekst p {
		font-size: 16px;
		color: #333333;
		margin-bottom: 16px;
	}

	.over-verhaal-tekst p:last-child {
		margin-bottom: 0;
	}

	/* Cijfertegels. */
	.over-cijfers {
		list-style: none;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.over-cijfer {
		background: #F8F8F8;
		border-radius: 16px;
		padding: 28px;
		border-left: 4px solid #E0E0E0;
	}

	.over-cijfer--roze  { border-left-color: #ED228B; }
	.over-cijfer--blauw { border-left-color: #3CC0F0; }
	.over-cijfer--groen { border-left-color: #95C740; }
	.over-cijfer--zwart { border-left-color: #000000; }

	.over-cijfer-waarde {
		display: block;
		font-size: 44px;
		font-weight: 800;
		letter-spacing: -1.5px;
		line-height: 1;
		margin-bottom: 8px;
	}

	.over-cijfer--roze .over-cijfer-waarde  { color: #ED228B; }
	.over-cijfer--blauw .over-cijfer-waarde { color: #3CC0F0; }
	.over-cijfer--groen .over-cijfer-waarde { color: #95C740; }
	.over-cijfer--zwart .over-cijfer-waarde { color: #000000; }

	.over-cijfer-label {
		display: block;
		font-size: 13.6px;
		font-weight: 600;
		line-height: 1.35;
		color: #333333;
	}

	/* Team in het donkere paneel. */
	.over-team {
		display: grid;
		grid-template-columns: 5fr 7fr;
		gap: 56px;
		align-items: center;
	}

	.over-team .diensten-waarom-tekst h2 {
		color: #FFFFFF;
	}

	.over-team .diensten-waarom-tekst p {
		color: #AAAAAA;
	}

	.over-team .diensten-vinkjes li {
		color: #FFFFFF;
	}

	/* Mailadres naast de knop. */
	.over-mail {
		font-size: 14.4px;
		color: rgba(255,255,255,0.62);
	}

	/* Responsive. */
	@media (max-width: 1024px) {
		.over-verhaal,
		.over-team {
			grid-template-columns: 1fr;
			gap: 32px;
		}
	}

	@media (max-width: 600px) {
		.over-verhaal-tekst h2 {
			font-size: 25.6px;
		}

		.over-cijfer {
			padding: 20px;
		}

		.over-cijfer-waarde {
			font-size: 34px;
		}
	}

/* =================================== Support =================================== */

	/* Contactkanalen als klikbare kaarten. */
	.support-kanaal {
		display: flex;
		flex-direction: column;
	}

	.support-kanaal p {
		flex: 1;
	}

	.support-kanaal-link {
		display: inline-block;
		margin-top: 16px;
		font-size: 14.4px;
		font-weight: 700;
		word-break: break-word;
	}

	.dienst-kaart--roze .support-kanaal-link  { color: #ED228B; }
	.dienst-kaart--blauw .support-kanaal-link { color: #3CC0F0; }
	.dienst-kaart--groen .support-kanaal-link { color: #95C740; }

	.support-tijden {
		margin-top: 24px;
		font-size: 14.4px;
		color: #333333;
	}

	/* Veelgestelde vragen: kop links, vragen rechts. */
	.support-faq {
		display: grid;
		grid-template-columns: 4fr 8fr;
		gap: 56px;
		align-items: start;
	}

	.support-faq .diensten-kop {
		position: sticky;
		top: 24px;
	}

	.support-faq .single-faq-lijst {
		max-width: none;
		margin: 0;
	}

	.support-faq .single-faq-antwoord p {
		margin: 0;
	}

	.support-faq .single-faq-antwoord a {
		color: #ED228B;
		font-weight: 600;
		border-bottom: 1.5px solid rgba(237,34,139,0.3);
	}

	.support-faq .single-faq-antwoord a:hover {
		border-color: #ED228B;
	}

	/* Responsive. */
	@media (max-width: 1024px) {
		.support-faq {
			grid-template-columns: 1fr;
			gap: 0;
		}

		.support-faq .diensten-kop {
			position: static;
		}
	}

/* =================================== Supportlinks =================================== */

	/* Hero-badge als link naar de supportpagina. */
	.badge--link {
		transition: background 0.22s ease, color 0.22s ease;
	}

	.badge--blauw.badge--link:hover {
		background: #3CC0F0;
		color: #000000;
	}

	/* Kleine supportlink op de productkaart. */
	.kaart-support {
		align-self: flex-start;
		margin-top: 4px;
		font-size: 12.48px;
		font-weight: 700;
		color: #3CC0F0;
		border-bottom: 1.5px solid rgba(60,192,240,0.3);
		transition: border-color 0.22s ease;
	}

	.kaart-support:hover {
		border-color: #3CC0F0;
	}

	/* Link in de tekstblokken op de homepage. */
	.intro-tekst p a {
		color: #ED228B;
		font-weight: 600;
		border-bottom: 1.5px solid rgba(237,34,139,0.3);
		transition: border-color 0.22s ease;
	}

	.intro-tekst p a:hover {
		border-color: #ED228B;
	}

/* =================================== Honeypot =================================== */

	/* Onzichtbaar veld in formulieren tegen spambots. */
	.hp-veld {
		position: absolute;
		left: -9999px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	/* Contactlink in de forum-hero. */
	.forum-hero p a { color: #3CC0F0; font-weight: 600; }
	.forum-hero p a:hover { color: #ED228B; }

/* =================================== Accountmenu =================================== */

	.account-menu {
		position: relative;
		flex-shrink: 0;
	}

	.account-knop {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border-radius: 50%;
		background: rgba(255,255,255,0.09);
		border: 1.5px solid rgba(255,255,255,0.13);
		color: rgba(255,255,255,0.78);
		cursor: pointer;
		list-style: none;
		transition: border-color 0.22s ease, color 0.22s ease;
	}

	/* Standaard pijltje van details/summary in alle browsers verbergen. */
	.account-knop::-webkit-details-marker { display: none; }
	.account-knop::marker { content: ''; font-size: 0; }
	.account-knop svg { width: 20px; height: 20px; }

	.account-knop:hover,
	.account-menu[open] .account-knop {
		border-color: #ED228B;
		color: #FFFFFF;
	}

	/* Groene rand als de bezoeker is ingelogd. */
	.account-menu.ingelogd .account-knop {
		border-color: #95C740;
		color: #95C740;
	}

	.account-dropdown {
		position: absolute;
		top: 48px;
		right: 0;
		min-width: 200px;
		background: #FFFFFF;
		border-radius: 10px;
		box-shadow: 0 8px 24px rgba(0,0,0,0.18);
		padding: 8px;
		z-index: 200;
	}

	.account-dropdown-naam {
		font-size: 12.8px;
		color: #888888;
		padding-top: 6px;
		padding-right: 12px;
		padding-bottom: 10px;
		padding-left: 12px;
		margin-bottom: 6px;
		border-bottom: 1px solid #EEEEEE;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.account-dropdown a,
	.account-dropdown button {
		display: block;
		width: 100%;
		text-align: left;
		font-family: 'Poppins', sans-serif;
		font-size: 14.08px;
		font-weight: 600;
		color: #333333;
		background: none;
		border: none;
		border-radius: 6px;
		padding-top: 9px;
		padding-right: 12px;
		padding-bottom: 9px;
		padding-left: 12px;
		cursor: pointer;
		text-decoration: none;
		white-space: nowrap;
	}

	.account-dropdown a:hover,
	.account-dropdown button:hover {
		background: #F4F4F4;
		color: #ED228B;
	}

/* =================================== Accountpagina =================================== */

	.account-wrap {
		max-width: 760px;
		margin-top: 0;
		margin-right: auto;
		margin-bottom: 0;
		margin-left: auto;
	}

	.account-titel {
		font-size: 25.6px;
		font-weight: 800;
		color: #000000;
		margin-bottom: 24px;
	}

	.account-blok {
		background: #FFFFFF;
		border: 1.5px solid #E0E0E0;
		border-radius: 12px;
		padding: 28px;
		margin-bottom: 24px;
	}

	.account-blok h2 {
		font-size: 17.6px;
		font-weight: 700;
		color: #000000;
		margin-bottom: 16px;
	}

	.account-lijst { margin-bottom: 16px; }

	.account-lijst li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding-top: 12px;
		padding-right: 0;
		padding-bottom: 12px;
		padding-left: 0;
		border-bottom: 1px solid #EEEEEE;
	}

	.account-lijst li:last-child { border-bottom: none; }
	.account-lijst a strong { color: #333333; }
	.account-lijst a:hover strong { color: #ED228B; }

	.account-meta {
		display: block;
		font-size: 12.8px;
		color: #888888;
		margin-top: 2px;
	}

	.account-leeg {
		font-size: 14.4px;
		color: #888888;
		margin-bottom: 16px;
	}

	.account-label {
		flex-shrink: 0;
		font-size: 12.8px;
		font-weight: 600;
		color: #ED228B;
		background: rgba(237,34,139,0.08);
		border-radius: 20px;
		padding-top: 4px;
		padding-right: 12px;
		padding-bottom: 4px;
		padding-left: 12px;
		white-space: nowrap;
	}

	.account-label.af { background: rgba(149,199,64,0.15); color: #5A8A00; }
	.account-label.open { background: rgba(60,192,240,0.15); color: #0080A8; }

	.account-instelling { max-width: 320px; }

	.form-groep select {
		width: 100%;
		padding-top: 10px;
		padding-right: 14px;
		padding-bottom: 10px;
		padding-left: 14px;
		border: 1.5px solid #E0E0E0;
		border-radius: 7px;
		font-family: 'Poppins', sans-serif;
		font-size: 14.4px;
		color: #222222;
		background: #FFFFFF;
	}

	.account-blok > .account-lijst:last-child { margin-bottom: 0; }
	.account-instelling + .account-meta { margin-top: 16px; }

	@media (max-width: 600px) {
		.account-blok { padding: 20px; }

		.account-lijst li {
			flex-direction: column;
			align-items: flex-start;
		}
	}

	/* Smalle schermen: header compacter zodat vlaggen en accounticoon passen. */
	@media (max-width: 480px) {
		.header-inner { gap: 10px; }

		.taal-knop {
			width: 24px;
			height: 24px;
			font-size: 14px;
		}

		.account-knop {
			width: 34px;
			height: 34px;
		}
	}

	/* === Vaste koopbalk op de modulepagina (13-10-2026). === */
	.koopbalk {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #FFFFFF;
		border-top: 3px solid #ED228B;
		box-shadow: 0 -6px 24px rgba(0, 0, 0, .10);
		padding-top: 12px;
		padding-bottom: 12px;
		transform: translateY(110%);
		transition: transform .25s ease;
		z-index: 850;
	}

	.koopbalk.zichtbaar {
		transform: translateY(0);
	}

	.koopbalk-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

	.koopbalk-info {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.koopbalk-naam {
		color: #000000;
		font-size: 16px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.koopbalk-prijs {
		color: #333333;
		font-size: 14px;
	}

	.koopbalk-knop {
		flex-shrink: 0;
		background: #ED228B;
		color: #FFFFFF;
		padding-top: 12px;
		padding-right: 28px;
		padding-bottom: 12px;
		padding-left: 28px;
		border-radius: 10px;
		font-weight: 700;
		font-size: 16px;
		text-decoration: none;
		transition: background .15s;
	}

	.koopbalk-knop:hover {
		background: #C9007A;
	}

	/* Naar boven knop schuift mee omhoog als de koopbalk zichtbaar is. */
	body.koopbalk-actief .naar-boven {
		bottom: 96px;
	}

	@media (max-width: 600px) {
		.naar-boven {
			bottom: 20px;
			right: 20px;
		}

		body.koopbalk-actief .naar-boven {
			bottom: 88px;
		}

		.koopbalk-knop {
			padding-right: 20px;
			padding-left: 20px;
		}
	}

	/* Tip om ook in de spammap te kijken, onder succesmeldingen (13-10-2026). */
	.mail-spam-tip {
		font-size: 14px;
		color: #888888;
		margin-top: 12px;
	}

/* =================================== Blog (31-10-2026) =================================== */

	.pagina-blog {
		padding-top: 56px;
		padding-right: 0;
		padding-bottom: 80px;
		padding-left: 0;
	}

	.blog-leeg {
		text-align: center;
		color: #333333;
		font-size: 16px;
	}

	.blog-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
		gap: 28px;
	}

	.blog-kaart {
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
		transition: transform .2s ease, box-shadow .2s ease;
	}

	.blog-kaart:hover {
		transform: translateY(-3px);
		box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
	}

	.blog-kaart-beeld {
		display: block;
		background: #FFFFFF;
		border-bottom: 1px solid #F0F0F0;
	}

	.blog-kaart-beeld img {
		display: block;
		width: 100%;
		aspect-ratio: 16/9;
		object-fit: contain;
		box-sizing: border-box;
		padding: 16px;
	}

	.blog-kaart-tekst {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		padding-top: 22px;
		padding-right: 24px;
		padding-bottom: 24px;
		padding-left: 24px;
	}

	.blog-datum {
		display: block;
		font-size: 12.8px;
		font-weight: 600;
		color: #3CC0F0;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	.blog-kaart-titel {
		font-size: 20px;
		line-height: 1.3;
		margin-top: 8px;
		margin-right: 0;
		margin-bottom: 10px;
		margin-left: 0;
	}

	.blog-kaart-titel a {
		color: #000000;
		text-decoration: none;
	}

	.blog-kaart-titel a:hover {
		color: #ED228B;
	}

	.blog-kaart-intro {
		font-size: 15px;
		line-height: 1.6;
		color: #333333;
		margin-top: 0;
		margin-right: 0;
		margin-bottom: 18px;
		margin-left: 0;
		flex-grow: 1;
	}

	.blog-kaart-knop {
		align-self: flex-start;
	}

	/* ── Artikelpagina ── */
	.pagina-blog-artikel {
		padding-top: 48px;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0;
	}

	.blog-artikel {
		max-width: 820px;
	}

	.blog-terug {
		display: inline-block;
		font-size: 14px;
		font-weight: 600;
		color: #ED228B;
		text-decoration: none;
		margin-bottom: 20px;
	}

	.blog-terug:hover {
		text-decoration: underline;
	}

	.blog-artikel-titel {
		font-size: clamp(28px, 4vw, 42px);
		font-weight: 800;
		line-height: 1.15;
		letter-spacing: -1px;
		color: #000000;
		margin-top: 0;
		margin-right: 0;
		margin-bottom: 14px;
		margin-left: 0;
	}

	.blog-artikel-intro {
		font-size: 18.4px;
		line-height: 1.6;
		color: #333333;
		margin-top: 18px;
		margin-right: 0;
		margin-bottom: 0;
		margin-left: 0;
		padding-left: 18px;
		border-left: 4px solid #95C740;
	}

	.blog-artikel-tekst {
		margin-top: 32px;
		color: #333333;
	}

	.blog-artikel-tekst a {
		color: #ED228B;
		font-weight: 600;
	}

	.blog-artikel-tekst a:hover {
		color: #C4136E;
	}

	.blog-artikel-tekst li[data-list="ordered"] {
		list-style: decimal;
	}

	/* Modulekaart onder het artikel. */
	.blog-module {
		display: flex;
		align-items: center;
		gap: 28px;
		margin-top: 40px;
		margin-bottom: 64px;
		padding: 28px;
		background: #FFFFFF;
		border: 2px solid #3CC0F0;
		border-radius: 16px;
		box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
	}

	.blog-module-beeld {
		flex-shrink: 0;
		width: 180px;
	}

	.blog-module-beeld img {
		display: block;
		width: 100%;
		height: auto;
	}

	.blog-module-kicker {
		display: block;
		font-size: 12.8px;
		font-weight: 700;
		color: #3CC0F0;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	.blog-module-naam {
		font-size: 22.4px;
		line-height: 1.25;
		margin-top: 6px;
		margin-right: 0;
		margin-bottom: 8px;
		margin-left: 0;
	}

	.blog-module-naam a {
		color: #000000;
		text-decoration: none;
	}

	.blog-module-intro {
		font-size: 15px;
		line-height: 1.6;
		color: #333333;
		margin-top: 0;
		margin-right: 0;
		margin-bottom: 16px;
		margin-left: 0;
	}

	.blog-module-actie {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 16px;
	}

	.blog-module-prijs {
		font-size: 16px;
		font-weight: 700;
		color: #000000;
	}

	.blog-module-knop {
		display: inline-block;
		background: #ED228B;
		color: #FFFFFF;
		font-weight: 700;
		font-size: 15px;
		text-decoration: none;
		border-radius: 8px;
		padding-top: 12px;
		padding-right: 22px;
		padding-bottom: 12px;
		padding-left: 22px;
		transition: background .2s ease;
	}

	.blog-module-knop:hover {
		background: #C4136E;
	}

	/* Meer artikelen. */
	.blog-meer {
		background: #F7F7F7;
		padding-top: 48px;
		padding-right: 0;
		padding-bottom: 56px;
		padding-left: 0;
	}

	.blog-meer .container {
		max-width: 820px;
	}

	.blog-meer-titel {
		font-size: 22.4px;
		color: #000000;
		margin-top: 0;
		margin-right: 0;
		margin-bottom: 16px;
		margin-left: 0;
	}

	.blog-meer-lijst {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.blog-meer-lijst li {
		border-bottom: 1px solid #E5E5E5;
	}

	.blog-meer-lijst a {
		display: block;
		padding-top: 14px;
		padding-right: 0;
		padding-bottom: 14px;
		padding-left: 0;
		color: #000000;
		font-weight: 600;
		text-decoration: none;
	}

	.blog-meer-lijst a:hover {
		color: #ED228B;
	}

	@media (max-width: 640px) {
		.blog-module {
			flex-direction: column;
			align-items: flex-start;
		}

		.blog-module-beeld {
			width: 140px;
		}
	}