/* ==========================================================================
   Series, modellen en het inruilblok
   Gebruikt door [stc_series], [stc_serie_modellen] en [stc_inruil].
   ========================================================================== */

.stc-serie,
.stc-series {
	--h-navy: #00394d;
	--h-teal: #00b7be;
	--h-grijs: #f1f2f4;
	--h-rand: rgba(0, 57, 77, 0.1);
	margin: var(--medium, 28px) 0 var(--mediumlarge, 40px);
}

/* ---------- Kaarten met modellen ---------- */

.stc-serie__grid,
.stc-series {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 18px;
}

.stc-serie__kaart,
.stc-series__kaart {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--h-rand);
	border-radius: 15px;
	background: #ffffff;
	color: var(--h-navy);
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.stc-serie__kaart:hover,
.stc-series__kaart:hover,
.stc-serie__kaart:focus-visible,
.stc-series__kaart:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(0, 22, 30, 0.13);
	border-color: rgba(0, 183, 190, 0.5);
	text-decoration: none;
}

.stc-serie__beeld,
.stc-series__beeld {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--h-grijs);
}

/* Het thema heeft eigen afbeeldingsregels met meer gewicht; vandaar de
   volledige keten. De foto staat vrij in het vak, dus elke kaart is even
   hoog, ongeacht het formaat van het origineel. */
.stc-serie .stc-serie__beeld img,
.stc-series .stc-series__beeld img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	padding: 10px;
	object-fit: contain;
	border-radius: 0;
	mix-blend-mode: multiply;
}

.stc-serie__body,
.stc-series__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 14px 16px 16px;
}

.stc-serie__model,
.stc-series__naam {
	margin: 0 0 8px;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.2;
}

.stc-series__tekst {
	margin: 0 0 12px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(0, 57, 77, 0.72);
}

/* De paar specificaties op de kaart. Het label mag afbreken, de waarde niet:
   "630 x 665 x 1020 mm" over vier regels leest nergens naar. */
.stc-serie__specs {
	display: grid;
	grid-template-columns: minmax(0, auto) 1fr;
	gap: 4px 10px;
	margin: 0 0 12px;
	font-size: 0.78rem;
	line-height: 1.35;
}

.stc-serie__specs dt {
	color: rgba(0, 57, 77, 0.6);
}

.stc-serie__specs dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
	/* Afbreken mag, maar niet midden in een maat: "630 x 665 x 1020 mm" blijft
	   zo bij elkaar en valt hooguit op de spatie voor de eenheid. */
	overflow-wrap: break-word;
}

.stc-serie__link,
.stc-series__aantal {
	margin-top: auto;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--h-teal);
}

/* ---------- De vergelijkingstabel ---------- */

.stc-serie__tabelwrap {
	margin-top: 22px;
	overflow-x: auto;
	border: 1px solid var(--h-rand);
	border-radius: 15px;
}

.stc-serie__tabel {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
	white-space: nowrap;
}

.stc-serie__tabel th,
.stc-serie__tabel td {
	padding: 11px 14px;
	text-align: left;
	border-bottom: 1px solid var(--h-rand);
}

.stc-serie__tabel thead th {
	background: var(--h-grijs);
	font-weight: 700;
	color: var(--h-navy);
}

.stc-serie__tabel tbody th {
	font-weight: 800;
}

.stc-serie__tabel tbody th a {
	color: var(--h-navy);
	text-decoration: none;
}

.stc-serie__tabel tbody th a:hover {
	color: var(--h-teal);
}

.stc-serie__tabel tbody tr:last-child th,
.stc-serie__tabel tbody tr:last-child td {
	border-bottom: 0;
}

.stc-serie__tabel tbody tr:hover th,
.stc-serie__tabel tbody tr:hover td {
	background: rgba(0, 183, 190, 0.06);
}

/* ---------- Het inruilblok ---------- */

.stc-inruil {
	margin: var(--mediumlarge, 40px) 0;
	padding: clamp(22px, 4vw, 40px);
	border-radius: 30px;
	background: #00394d;
	color: #ffffff;
}

.stc-inruil--compact {
	border-radius: 15px;
	padding: clamp(18px, 3vw, 28px);
}

.stc-inruil__body {
	max-width: 62ch;
}

.stc-inruil__label {
	margin: 0 0 6px;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #00b7be;
}

.stc-inruil .stc-inruil__kop {
	margin: 0 0 10px;
	color: #ffffff;
}

.stc-inruil--compact .stc-inruil__kop {
	font-size: 1.35rem;
}

.stc-inruil__tekst {
	margin-bottom: 18px;
	color: rgba(255, 255, 255, 0.85);
}

.stc-inruil__tekst p {
	margin: 0 0 10px;
}

.stc-inruil__tekst p:last-child {
	margin-bottom: 0;
}

.stc-inruil .btn {
	background: #00b7be;
	border-color: #00b7be;
	color: #00394d;
}

/* ---------- Mobiel ---------- */

@media (max-width: 600px) {
	.stc-serie__grid,
	.stc-series {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 12px;
	}

	.stc-serie__body,
	.stc-series__body {
		padding: 12px;
	}

	.stc-serie__model,
	.stc-series__naam {
		font-size: 0.95rem;
	}

	/* Naast elkaar is er geen ruimte voor label en waarde op één regel; onder
	   elkaar leest het rustiger en breekt er niets af. */
	.stc-serie__specs {
		display: block;
		margin-bottom: 10px;
		font-size: 0.75rem;
	}

	.stc-serie__specs dt {
		font-size: 0.7rem;
		line-height: 1.2;
	}

	.stc-serie__specs dd {
		margin: 0 0 7px;
		text-align: left;
		font-size: 0.8rem;
		white-space: normal;
	}

	.stc-serie__specs dd:last-child {
		margin-bottom: 0;
	}

	.stc-serie__link,
	.stc-series__aantal {
		font-size: 0.72rem;
	}
}

/* ==========================================================================
   Het paneel onder aan een modelpagina: technisch blad, prijsvraag en
   doorbladeren binnen de serie. Gebruikt door [stc_modelpaneel].
   ========================================================================== */

.stc-model {
	--h-navy: #00394d;
	--h-teal: #00b7be;
	--h-grijs: #f1f2f4;
	--h-rand: rgba(0, 57, 77, 0.1);
	margin: var(--medium, 28px) 0;
}

.stc-model__acties {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin-bottom: 20px;
}

/* De downloadtegel, met het formaat erbij zodat je weet wat je krijgt. */
.stc-model__download {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px 12px 14px;
	border: 1px solid var(--h-rand);
	border-radius: 12px;
	background: #ffffff;
	color: var(--h-navy);
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.stc-model__download:hover,
.stc-model__download:focus-visible {
	border-color: var(--h-teal);
	box-shadow: 0 4px 16px rgba(0, 22, 30, 0.1);
	text-decoration: none;
}

.stc-model__pijl {
	position: relative;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--h-grijs);
}

/* Een pijl omlaag, met CSS getekend zodat er geen extra bestand bij hoeft. */
.stc-model__pijl::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 50%;
	width: 2px;
	height: 12px;
	margin-left: -1px;
	background: var(--h-navy);
}

.stc-model__pijl::after {
	content: "";
	position: absolute;
	top: 15px;
	left: 50%;
	width: 8px;
	height: 8px;
	margin-left: -4px;
	border-right: 2px solid var(--h-navy);
	border-bottom: 2px solid var(--h-navy);
	transform: rotate(45deg);
}

.stc-model__downloadtekst {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.stc-model__downloadtekst strong {
	font-size: 0.95rem;
}

.stc-model__downloadtekst em {
	font-size: 0.78rem;
	font-style: normal;
	color: rgba(0, 57, 77, 0.6);
}

.stc-model .btn.stc-model__prijs {
	align-self: center;
}

/* ---------- Doorbladeren binnen de serie ---------- */

.stc-model__blader {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
	padding-top: 18px;
	border-top: 1px solid var(--h-rand);
}

.stc-model__stap {
	display: flex;
	flex-direction: column;
	gap: 1px;
	color: var(--h-navy);
	text-decoration: none;
	line-height: 1.25;
}

.stc-model__stap span {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(0, 57, 77, 0.5);
}

.stc-model__stap strong {
	font-size: 1rem;
}

.stc-model__stap:hover strong {
	color: var(--h-teal);
}

.stc-model__stap--vorige strong::before {
	content: "\2190\00a0";
}

.stc-model__stap--volgende {
	text-align: right;
}

.stc-model__stap--volgende strong::after {
	content: "\00a0\2192";
}

.stc-model__alle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--h-rand);
	border-radius: 100px;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--h-navy);
	text-decoration: none;
	white-space: nowrap;
}

.stc-model__alle:hover {
	border-color: var(--h-teal);
	color: var(--h-teal);
}

.stc-model__telling {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 100px;
	background: var(--h-grijs);
	font-size: 0.72rem;
}

@media (max-width: 600px) {
	.stc-model__acties {
		flex-direction: column;
		align-items: stretch;
	}

	.stc-model .btn.stc-model__prijs {
		align-self: stretch;
		text-align: center;
	}

	/* Op een smal scherm is er geen ruimte voor drie kolommen naast elkaar. */
	.stc-model__blader {
		grid-template-columns: 1fr 1fr;
	}

	.stc-model__alle {
		grid-column: 1 / -1;
		order: -1;
		justify-content: center;
		margin-bottom: 4px;
	}

	.stc-model__stap strong {
		font-size: 0.9rem;
	}
}

/* ==========================================================================
   Uitleg over de sealuitvoeringen. Gebruikt door [stc_sealtypes].
   ========================================================================== */

.stc-seal {
	--h-navy: #00394d;
	--h-teal: #00b7be;
	--h-grijs: #f1f2f4;
	--h-rand: rgba(0, 57, 77, 0.1);
	margin: var(--mediumlarge, 40px) 0;
}

.stc-seal .stc-seal__kop {
	margin: 0 0 var(--small, 16px);
}

.stc-seal__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
}

.stc-seal__kaart {
	padding: 16px;
	border: 1px solid var(--h-rand);
	border-radius: 15px;
	background: #ffffff;
}

.stc-seal__beeld {
	margin-bottom: 12px;
	padding: 14px 10px;
	border-radius: 10px;
	background: var(--h-grijs);
}

.stc-seal .stc-seal__svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	border-radius: 0;
}

/* De twee lagen folie van de zak. */
.stc-seal__folie {
	fill: #ffffff;
	stroke: rgba(0, 57, 77, 0.28);
	stroke-width: 1.5;
}

/* De las zelf: waar de folie aan elkaar zit. */
.stc-seal__las {
	fill: var(--h-teal);
}

/* Het restje folie dat bij een cut-off wegvalt. */
.stc-seal__rest {
	fill: rgba(0, 57, 77, 0.08);
	stroke: rgba(0, 57, 77, 0.2);
	stroke-width: 1.5;
	stroke-dasharray: 3 3;
}

/* De snede naast de las. */
.stc-seal__snede {
	stroke: var(--h-navy);
	stroke-width: 1.5;
	stroke-dasharray: 4 4;
}

.stc-seal__naam {
	margin: 0 0 6px;
	font-size: 1rem;
	font-weight: 800;
	color: var(--h-navy);
}

.stc-seal__tekst {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(0, 57, 77, 0.72);
}

.stc-seal__voet {
	margin: 16px 0 0;
	font-size: 0.875rem;
	color: rgba(0, 57, 77, 0.6);
}

@media (max-width: 600px) {
	.stc-seal__grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.stc-seal__kaart {
		padding: 12px;
	}

	.stc-seal__naam {
		font-size: 0.9rem;
	}

	.stc-seal__tekst {
		font-size: 0.8rem;
	}
}

/* ==========================================================================
   Het prijsvenster op een machinepagina.
   ========================================================================== */

.stc-prijs {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.stc-prijs[hidden] {
	display: none;
}

.stc-prijs__scherm {
	position: absolute;
	inset: 0;
	background: rgba(0, 22, 30, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.stc-prijs__venster {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: clamp(20px, 4vw, 32px);
	border-radius: 20px;
	background: #ffffff;
	box-shadow: 0 20px 60px rgba(0, 22, 30, 0.35);
	animation: stc-prijs-in 0.22s ease both;
}

@keyframes stc-prijs-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.stc-prijs__venster {
		animation: none;
	}
}

/* Achter het venster niet meescrollen. */
body.stc-prijs-open {
	overflow: hidden;
}

.stc-prijs__sluit {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f1f2f4;
	color: #00394d;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.stc-prijs__sluit:hover {
	background: #e3e5e8;
}

.stc-prijs__label {
	margin: 0 0 4px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #00b7be;
}

.stc-prijs .stc-prijs__kop {
	margin: 0 0 2px;
	font-size: 1.5rem;
	padding-right: 34px;
}

.stc-prijs__machine {
	margin: 0 0 18px;
	font-size: 0.9rem;
	color: rgba(0, 57, 77, 0.65);
}

/* De twee snelle wegen naast elkaar: appen of mailen. */
.stc-prijs__snel {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	margin-bottom: 4px;
}

.stc-prijs__mail {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 20px;
	border: 1px solid rgba(0, 57, 77, 0.2);
	border-radius: 100px;
	background: #ffffff;
	color: #00394d;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.stc-prijs__mail:hover,
.stc-prijs__mail:focus-visible {
	border-color: #00b7be;
	background: rgba(0, 183, 190, 0.08);
	color: #00394d;
	text-decoration: none;
}

/* Een envelop, met CSS getekend. */
.stc-prijs__mail-icoon {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	height: 15px;
	border: 2px solid currentColor;
	border-radius: 3px;
	overflow: hidden;
}

.stc-prijs__mail-icoon::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 1px;
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

@media (max-width: 420px) {
	/* Ook hier naast elkaar, maar krapper gezet: twee knoppen onder elkaar
	   kosten een regel die het venster niet heeft. */
	.stc-prijs__snel {
		gap: 8px;
	}

	.stc-prijs__wa,
	.stc-prijs__mail {
		gap: 7px;
		padding: 12px 12px;
		font-size: 0.88rem;
	}

	.stc-prijs__wa-icoon {
		width: 19px;
		height: 19px;
	}

	.stc-prijs__mail-icoon {
		width: 18px;
		height: 13px;
	}
}

/* WhatsApp als snelste weg, bovenaan. */
.stc-prijs__wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 18px;
	border-radius: 100px;
	background: #25d366;
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
}

.stc-prijs__wa:hover {
	background: #1fbe5a;
	color: #ffffff;
	text-decoration: none;
}

/* Het telefoontje, met CSS getekend zodat er geen bestand bij hoeft. */
.stc-prijs__wa-icoon {
	position: relative;
	width: 22px;
	height: 22px;
	border: 2px solid #ffffff;
	border-radius: 50% 50% 50% 4px;
}

.stc-prijs__wa-icoon::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 4px;
	width: 9px;
	height: 7px;
	border-radius: 2px;
	background: #ffffff;
}

/* Scheidingsregel met tekst ertussen. */
.stc-prijs__of {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0;
	font-size: 0.82rem;
	color: rgba(0, 57, 77, 0.55);
}

.stc-prijs__of::before,
.stc-prijs__of::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: rgba(0, 57, 77, 0.12);
}

/* Het formulier compacter dan op de contactpagina: in een venster telt elke
   regel, zeker op een telefoon. */
.stc-prijs__formulier .gform_wrapper {
	margin: 0;
}

.stc-prijs__formulier .gform_wrapper .gform_fields {
	grid-row-gap: 10px;
}

.stc-prijs__formulier .gform_wrapper .gfield_label {
	margin-bottom: 3px;
	font-size: 0.78rem;
	line-height: 1.2;
}

.stc-prijs__formulier .gform_wrapper input[type="text"],
.stc-prijs__formulier .gform_wrapper input[type="email"],
.stc-prijs__formulier .gform_wrapper input[type="tel"],
.stc-prijs__formulier .gform_wrapper textarea {
	padding: 9px 13px;
	font-size: 0.92rem;
}

.stc-prijs__formulier .gform_wrapper textarea {
	height: 72px;
}

.stc-prijs__formulier .gform_footer {
	margin: 12px 0 0;
	padding: 0;
}

@media (max-width: 640px) {
	/* Gravity Forms rekent met twaalf kolommen en zet elk veld op een telefoon
	   over de volle breedte. In dit venster houden we de halve velden ook daar
	   naast elkaar; dat scheelt twee regels. */
	.stc-prijs__formulier .gform_wrapper .gform_fields {
		column-gap: 10px;
		row-gap: 10px;
	}

	.stc-prijs__formulier .gform_wrapper .gfield--width-half {
		grid-column: span 6 / span 6 !important;
	}

	.stc-prijs__formulier .gform_wrapper textarea {
		height: 62px;
	}
}

@media (max-width: 600px) {
	.stc-prijs {
		padding: 0;
		align-items: flex-end;
	}

	/* Op een telefoon komt het venster van onderen omhoog, tegen de duim aan. */
	.stc-prijs__venster {
		max-width: none;
		max-height: 92vh;
		padding: 18px 16px 16px;
		border-radius: 20px 20px 0 0;
		animation-name: stc-prijs-omhoog;
	}

	/* De kop mag korter: de machine staat er toch al bij. */
	.stc-prijs__label {
		margin-bottom: 2px;
		font-size: 0.68rem;
	}

	.stc-prijs__machine {
		margin-bottom: 12px;
		font-size: 0.85rem;
	}

	.stc-prijs__wa,
	.stc-prijs__mail {
		padding: 12px 16px;
	}

	.stc-prijs__of {
		margin: 12px 0;
	}

	@keyframes stc-prijs-omhoog {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.stc-prijs .stc-prijs__kop {
		font-size: 1.3rem;
	}
}

/* ==========================================================================
   De knoppen onder een inruilblok.
   Op een telefoon is WhatsApp de weg; daar vult niemand een formulier in.
   Op een breed scherm staat de uitlegpagina er als derde bij.
   ========================================================================== */

.stc-inruil__acties {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.stc-inruil__wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 100px;
	background: #25d366;
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
}

.stc-inruil__wa:hover,
.stc-inruil__wa:focus-visible {
	background: #1fbe5a;
	color: #ffffff;
	text-decoration: none;
}

/* Het telefoontje, met CSS getekend. */
.stc-inruil__wa-icoon {
	position: relative;
	flex: 0 0 auto;
	width: 21px;
	height: 21px;
	border: 2px solid #ffffff;
	border-radius: 50% 50% 50% 4px;
}

.stc-inruil__wa-icoon::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 4px;
	width: 9px;
	height: 6px;
	border-radius: 2px;
	background: #ffffff;
}

.stc-inruil__mail,
.stc-inruil__meer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 22px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 100px;
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
}

.stc-inruil__mail:hover,
.stc-inruil__meer:hover {
	border-color: #ffffff;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	text-decoration: none;
}

/* Los blok zonder de donkere achtergrond: dan zijn de randen navy. */
.stc-inruil--kaal {
	margin: var(--medium, 24px) 0;
	padding: 0;
	background: none;
	color: inherit;
}

.stc-inruil--kaal .stc-inruil__mail,
.stc-inruil--kaal .stc-inruil__meer {
	border-color: rgba(0, 57, 77, 0.25);
	color: #00394d;
}

.stc-inruil--kaal .stc-inruil__mail:hover,
.stc-inruil--kaal .stc-inruil__meer:hover {
	border-color: #00b7be;
	background: rgba(0, 183, 190, 0.08);
	color: #00394d;
}

@media (max-width: 767px) {
	/* Volle breedte, WhatsApp bovenaan en het grootst. */
	.stc-inruil__acties {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.stc-inruil__wa {
		padding: 16px 22px;
		font-size: 1.02rem;
	}

	/* De uitlegpagina is op een telefoon een omweg; die laten we weg. */
	.stc-inruil__meer {
		display: none;
	}
}


/* === Modelpagina op groot scherm === */

/* Staat de prijsknop in de rechterkolom, dan hoeft de contactknop van het
   thema er niet ook nog bij: ze openen hetzelfde venster. */
.stc-modelpagina .product-content:has(.stc-model__info) .product-header > .btn {
	display: none;
}

.stc-model__info {
	--h-navy: #00394d;
	--h-teal: #00b7be;
	--h-grijs: #f1f2f4;
	--h-rand: rgba(0, 57, 77, 0.1);
	margin-top: 20px;
}

.stc-model__info .stc-model__acties {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	margin: 0;
}

.stc-model__info .btn.stc-model__prijs {
	align-self: stretch;
	text-align: center;
}

.stc-model__detail {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-bottom: 26px;
}

/* Blijft er maar een kaart over (bijvoorbeeld bij een traysealer, die geen
   seallengte heeft), dan mag die niet over de hele breedte uitrekken. */
.stc-model__detail > *:only-child {
	max-width: 520px;
}

.stc-model__kaart,
.stc-model__kenmerken {
	padding: 20px;
	border: 1px solid var(--h-rand, rgba(0, 57, 77, 0.1));
	border-radius: 15px;
	background: #ffffff;
}

.stc-model__kenmerken:empty {
	display: none;
}

.stc-model__kaart h4,
.stc-model__kenmerken h3 {
	margin: 0 0 14px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(0, 57, 77, 0.55);
}

.stc-model__kenmerken ul {
	margin: 0;
	padding-left: 18px;
}

.stc-model__kenmerken li {
	margin-bottom: 7px;
	font-size: 0.92rem;
}

.stc-model .stc-model__tekening {
	display: block;
	width: 100%;
	max-width: 240px;
	height: auto;
	margin: 0 0 14px;
	border-radius: 0;
}

.stc-model__kaart p {
	margin: 0 0 12px;
	font-size: 0.85rem;
	line-height: 1.5;
	color: rgba(0, 57, 77, 0.65);
}

.stc-model__link {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--h-teal, #00b7be);
	text-decoration: none;
}

.stc-model__link::after {
	content: "\00a0\2192";
}

.stc-model__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.stc-model__chip {
	display: inline-flex;
	padding: 7px 13px;
	border: 1px solid var(--h-rand, rgba(0, 57, 77, 0.1));
	border-radius: 100px;
	font-size: 0.8rem;
	color: var(--h-navy, #00394d);
	text-decoration: none;
}

a.stc-model__chip:hover,
a.stc-model__chip:focus-visible {
	border-color: var(--h-teal, #00b7be);
	color: var(--h-teal, #00b7be);
	text-decoration: none;
}

/* Vanaf een tablet in liggende stand drie kolommen: specificaties links, de
   foto in het midden en de prijskolom rechts. */
@media (min-width: 992px) {
	body.stc-modelpagina section.product .row {
		display: grid;
		grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(300px, 340px);
		column-gap: 40px;
		align-items: start;
	}

	body.stc-modelpagina section.product .row > div:not(.product-sidebar-col) {
		display: contents;
	}

	body.stc-modelpagina section.product .product-specifications {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
	}

	body.stc-modelpagina .product-gallery {
		grid-column: 2;
		grid-row: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	body.stc-modelpagina .product-sidebar-col {
		grid-column: 3;
		grid-row: 1;
		width: auto;
		max-width: none;
		flex: none;
		padding: 0;
	}

	body.stc-modelpagina .product-sidebar-placeholder {
		display: none;
	}

	body.stc-modelpagina .product-gallery__image img {
		width: 100%;
		height: auto;
		max-height: 500px;
		object-fit: contain;
	}

	/* Specificaties als lijst: het label klein erboven, de waarde eronder. In
	   een smalle kolom leest dat beter dan twee kolommen naast elkaar. */
	body.stc-modelpagina section.product .product-specifications table {
		width: 100%;
		table-layout: auto;
	}

	body.stc-modelpagina section.product .product-specifications tr {
		display: block;
		padding: 9px 0;
	}

	body.stc-modelpagina section.product .product-specifications tr + tr {
		border-top: 1px solid var(--h-rand, rgba(0, 57, 77, 0.1));
	}

	body.stc-modelpagina section.product .product-specifications td,
	body.stc-modelpagina section.product .product-specifications th {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
		text-align: left;
	}

	body.stc-modelpagina section.product .product-specifications td {
		margin-bottom: 3px;
		font-size: 0.82rem;
		font-weight: 400;
		color: rgba(0, 57, 77, 0.55);
	}

	/* Lange labels als "Chamber dimensions" mogen niet afgebroken worden. */
	body.stc-modelpagina section.product .product-specifications td,
	body.stc-modelpagina section.product .product-specifications th {
		hyphens: none !important;
		-webkit-hyphens: none !important;
		overflow-wrap: normal;
		word-break: normal;
	}

	body.stc-modelpagina section.product .product-specifications th {
		font-size: 1rem;
		font-weight: 600;
		color: var(--h-navy, #00394d);
	}
}

/* === Opties en toebehoren bij een model === */

.stc-model__opties {
	margin-bottom: 26px;
	padding: 22px 24px;
	border: 1px solid var(--h-rand, rgba(0, 57, 77, 0.1));
	border-radius: 15px;
	background: #ffffff;
}

.stc-model__opties h4 {
	margin: 0 0 14px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(0, 57, 77, 0.55);
}

.stc-model__optielijst {
	margin: 0 0 14px;
	padding-left: 18px;
	column-gap: 34px;
}

.stc-model__optielijst li {
	margin-bottom: 7px;
	font-size: 0.92rem;
	line-height: 1.4;
	break-inside: avoid;
}

.stc-model__optienoot {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(0, 57, 77, 0.6);
}

@media (min-width: 768px) {
	.stc-model__optielijst {
		columns: 2;
	}
}

@media (min-width: 1200px) {
	.stc-model__optielijst {
		columns: 3;
	}
}


/* === Modelpagina: rustiger raster ===

   Op een breed scherm liep de grijze specificatiekaart honderden pixels door
   onder de foto en de prijskolom uit. Dat trok de pagina scheef. De
   specificaties staan nu gewoon op de pagina, met alleen lijntjes ertussen —
   zoals bij Boss — en het grijs zit in het compacte infoblok rechts, waar het
   de prijsknop juist bij elkaar houdt. De foto is vierkant en daarmee een stuk
   groter, zodat de drie kolommen elkaar in evenwicht houden.
   ==================================================================== */

@media (min-width: 992px) {
	body.stc-modelpagina section.product .product-specifications {
		margin-top: 0;
		padding: 0;
		background: transparent;
		border-radius: 0;
	}

	body.stc-modelpagina section.product .product-specifications h3 {
		margin-bottom: 10px;
		font-size: 1.15rem;
	}

	body.stc-modelpagina section.product .product-specifications hr {
		margin: 0 0 10px;
	}

	body.stc-modelpagina section.product .product-specifications tr {
		padding: 8px 0;
	}

	/* De foto vierkant: de studiofoto's van Henkovac zijn dat vrijwel ook, dus
	   zo wordt de machine groter zonder dat er iets afgesneden wordt. */
	body.stc-modelpagina section.product .product-gallery .product-gallery__image {
		aspect-ratio: 1 / 1;
	}

	body.stc-modelpagina section.product .product-gallery .product-gallery__image img {
		height: 100%;
		max-height: none;
		object-fit: contain;
	}

	/* Het infoblok rechts als kaart, zoals de INFO-kolom bij Boss. */
	body.stc-modelpagina .stc-model__info {
		margin-top: 24px;
		padding: 18px;
		border-radius: 15px;
		background: #f1f2f4;
	}

	body.stc-modelpagina .stc-model__info .stc-model__download {
		border-color: transparent;
	}
}

/* Verzendgegevens in het infoblok: waar de klant ze zoekt als hij naar de
   prijs vraagt, niet tussen de technische specificaties. */
.stc-model__verzending {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 14px;
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--h-rand, rgba(0, 57, 77, 0.12));
	font-size: 0.85rem;
}

.stc-model__verzending dt {
	color: rgba(0, 57, 77, 0.6);
}

.stc-model__verzending dd {
	margin: 0;
	font-weight: 600;
	color: var(--h-navy, #00394d);
}

/* ==========================================================================
   De hele reeks op een rij.

   Onder het modelpaneel staat elk model uit dezelfde serie als een kaartje,
   met de maten die het verschil maken. Het model waar je bent is gemarkeerd,
   dus je ziet meteen wat een maat groter of kleiner je geeft en je klikt er
   rechtstreeks naartoe.
   ========================================================================== */

.stc-model__reeks {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid rgba(0, 57, 77, 0.12);
}

.stc-model__reekskop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	margin-bottom: 14px;
}

.stc-model__reekskop h4 {
	margin: 0 0 2px;
	font-size: 1.1rem;
}

.stc-model__reekskop p {
	margin: 0;
	font-size: 0.86rem;
	color: rgba(0, 57, 77, 0.6);
}

/* De rij zelf. Er wordt niet zijwaarts geschoven: de modellen verdelen de
   breedte en zakken door naar een volgende regel als ze er niet op passen,
   zodat je altijd de hele reeks ziet staan. */
.stc-model__ladder {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stc-model__trede {
	min-width: 0;
}

.stc-model__trede > a {
	display: flex;
	flex-direction: column;
	gap: 5px;
	height: 100%;
	padding: 14px;
	border: 1px solid rgba(0, 57, 77, 0.14);
	border-radius: 15px;
	background: #ffffff;
	color: #00394d;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.stc-model__trede > a:hover,
.stc-model__trede > a:focus-visible {
	border-color: #00b7be;
	background: rgba(0, 183, 190, 0.06);
	color: #00394d;
	text-decoration: none;
}

/* Waar je nu bent: donkere rand en een grijze vulling. De rand is een pixel
   dikker, dus halen we die er aan de binnenkant weer af. */
.stc-model__trede.is-nu > a {
	padding: 13px;
	border: 2px solid #00394d;
	background: #f1f2f4;
}

.stc-model__tredenaam {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
}

.stc-model__tredemaat {
	display: block;
	font-size: 0.78rem;
	line-height: 1.35;
	color: rgba(0, 57, 77, 0.75);
}

.stc-model__tredemaat em {
	display: block;
	font-size: 0.66rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(0, 57, 77, 0.45);
}

.stc-model__tredenu {
	margin-top: auto;
	padding-top: 8px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #00b7be;
}

/* De andere series, als één regel eronder. */
.stc-model__anderereeksen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(0, 57, 77, 0.1);
}

.stc-model__anderereeksen > span {
	font-size: 0.8rem;
	color: rgba(0, 57, 77, 0.55);
}

.stc-model__reekschips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.stc-model__reekschip {
	padding: 6px 14px;
	border: 1px solid rgba(0, 57, 77, 0.15);
	border-radius: 100px;
	color: #00394d;
	font-size: 0.82rem;
	text-decoration: none;
}

.stc-model__reekschip:hover,
.stc-model__reekschip:focus-visible {
	border-color: #00b7be;
	background: rgba(0, 183, 190, 0.08);
	color: #00394d;
	text-decoration: none;
}

@media (max-width: 767px) {
	.stc-model__trede {
		flex: 0 0 64%;
		min-width: 0;
	}

	.stc-model__reekskop {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* ==========================================================================
   Het inruilblok: tekst links, knoppen als nette kolom rechts.

   Op een breed scherm pasten drie knoppen niet naast elkaar op één regel en
   braken ze rommelig af. Nu staan ze onder elkaar, even breed, tegen de
   rechterkant. Op een telefoon blijft het zoals het was: onder elkaar, over
   de volle breedte.
   ========================================================================== */

@media (min-width: 992px) {
	.stc-inruil .stc-inruil__body {
		display: grid;
		grid-template-columns: minmax(0, 62ch) minmax(240px, 290px);
		justify-content: space-between;
		column-gap: 44px;
		align-items: start;
		max-width: none;
	}

	.stc-inruil .stc-inruil__label,
	.stc-inruil .stc-inruil__kop,
	.stc-inruil .stc-inruil__tekst {
		grid-column: 1;
	}

	.stc-inruil .stc-inruil__tekst {
		margin-bottom: 0;
	}

	.stc-inruil .stc-inruil__acties {
		grid-column: 2;
		grid-row: 1 / -1;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		margin: 0;
	}

	/* Even breed en even hoog, zodat het één blok knoppen is. */
	.stc-inruil .stc-inruil__wa,
	.stc-inruil .stc-inruil__mail,
	.stc-inruil .stc-inruil__meer {
		width: 100%;
		padding: 14px 20px;
		text-align: center;
	}
}

/* ==========================================================================
   Tabbladen op een modelpagina.

   De panelen staan gewoon in de pagina; modeltabs.js zet er een rij knoppen
   boven en verbergt de rest. Zonder script staat alles onder elkaar en klopt
   de pagina ook.
   ========================================================================== */

.stc-model__tablijst {
	display: flex;
	gap: 4px;
	margin-bottom: 22px;
	border-bottom: 1px solid rgba(0, 57, 77, 0.14);
	overflow-x: auto;
	scrollbar-width: none;
}

.stc-model__tablijst::-webkit-scrollbar {
	display: none;
}

.stc-model__tab {
	flex: 0 0 auto;
	padding: 12px 18px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	color: rgba(0, 57, 77, 0.6);
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.stc-model__tab:hover {
	color: #00394d;
}

.stc-model__tab[aria-selected="true"] {
	border-bottom-color: #00b7be;
	color: #00394d;
}

/* Zonder script staan de panelen onder elkaar; dan is er ruimte tussen nodig. */
.stc-model__tabs:not([data-stc-tabs-klaar]) .stc-model__paneel + .stc-model__paneel {
	margin-top: 26px;
}

/* ==========================================================================
   Opties als kaartjes.
   ========================================================================== */

.stc-model__optiekaarten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 10px;
	margin-bottom: 16px;
}

.stc-model__optiekaart {
	padding: 14px 16px;
	border: 1px solid rgba(0, 57, 77, 0.12);
	border-radius: 14px;
	background: #ffffff;
}

.stc-model__optienaam {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
	color: #00394d;
}

.stc-model__optieuitleg {
	margin: 6px 0 0;
	font-size: 0.84rem;
	line-height: 1.45;
	color: rgba(0, 57, 77, 0.65);
}

/* Het blok zelf heeft nu kaartjes met een eigen rand; de grijze doos eromheen
   mag dan wat rustiger. */
.stc-model__opties {
	padding: 0;
	border: 0;
	background: none;
}

/* ==========================================================================
   De vergelijkingstabel: modellen als kolommen, specificaties als rijen.
   ========================================================================== */

.stc-model__vergelijk h4 {
	margin: 0 0 4px;
	font-size: 1.1rem;
}

.stc-model__vergelijknoot {
	margin: 0 0 14px;
	font-size: 0.86rem;
	color: rgba(0, 57, 77, 0.6);
}

.stc-model__vergelijkrol {
	overflow-x: auto;
	border: 1px solid rgba(0, 57, 77, 0.12);
	border-radius: 15px;
	-webkit-overflow-scrolling: touch;
}

.stc-model__vergelijktabel {
	width: max-content;
	min-width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.86rem;
}

.stc-model__vergelijktabel th,
.stc-model__vergelijktabel td {
	padding: 11px 16px;
	border: 0;
	border-bottom: 1px solid rgba(0, 57, 77, 0.09);
	text-align: left;
	vertical-align: top;
	line-height: 1.4;
}

.stc-model__vergelijktabel tbody tr:last-child th,
.stc-model__vergelijktabel tbody tr:last-child td {
	border-bottom: 0;
}

/* De eerste kolom blijft staan als je opzij schuift, anders weet je niet meer
   naar welke regel je kijkt. */
.stc-model__vergelijktabel th[scope="row"] {
	position: sticky;
	left: 0;
	z-index: 2;
	min-width: 168px;
	background: #ffffff;
	font-weight: 600;
	color: rgba(0, 57, 77, 0.6);
}

.stc-model__vergelijktabel thead th {
	position: sticky;
	top: 0;
	z-index: 3;
	min-width: 168px;
	background: #f1f2f4;
	border-bottom: 1px solid rgba(0, 57, 77, 0.14);
	font-size: 1rem;
}

.stc-model__vergelijktabel thead th:first-child {
	left: 0;
	z-index: 4;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(0, 57, 77, 0.5);
}

.stc-model__vergelijktabel thead th a {
	color: #00394d;
	font-weight: 700;
	text-decoration: none;
}

.stc-model__vergelijktabel thead th a:hover {
	color: #00b7be;
	text-decoration: none;
}

.stc-model__vergelijktabel thead th span {
	display: block;
	margin-top: 2px;
	font-size: 0.64rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #00b7be;
}

/* De kolom van het model waar je bent. */
.stc-model__vergelijktabel td.is-nu {
	background: rgba(0, 183, 190, 0.07);
	font-weight: 600;
	color: #00394d;
}

.stc-model__vergelijktabel thead th.is-nu {
	background: #e4eef0;
}

.stc-model__leeg {
	color: rgba(0, 57, 77, 0.3);
}

@media (max-width: 767px) {
	.stc-model__vergelijktabel th[scope="row"],
	.stc-model__vergelijktabel thead th {
		min-width: 140px;
	}

	.stc-model__vergelijktabel th,
	.stc-model__vergelijktabel td {
		padding: 10px 12px;
	}

	.stc-model__tab {
		padding: 11px 14px;
		font-size: 0.88rem;
	}
}

/* ==========================================================================
   De reekstabs in de modelkiezer: van de T-serie naar de D-serie zonder het
   menu. Zonder script zijn het gewone links naar de reekspagina.
   ========================================================================== */

.stc-model__serietabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.stc-model__serietab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	padding: 8px 15px;
	border: 1px solid rgba(0, 57, 77, 0.15);
	border-radius: 100px;
	background: #ffffff;
	color: #00394d;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.stc-model__serietab:hover {
	border-color: #00b7be;
	background: rgba(0, 183, 190, 0.08);
	color: #00394d;
	text-decoration: none;
}

.stc-model__serietab.is-nu {
	border-color: #00394d;
	background: #00394d;
	color: #ffffff;
}

.stc-model__serietab span {
	padding: 1px 7px;
	border-radius: 100px;
	background: rgba(0, 57, 77, 0.08);
	font-size: 0.72rem;
	font-weight: 700;
}

.stc-model__serietab.is-nu span {
	background: rgba(255, 255, 255, 0.2);
}

.stc-model__reeksgroep .stc-model__alle {
	margin-top: 14px;
}

/* ==========================================================================
   De opties aanvinken.
   ========================================================================== */

.stc-model__optieintro {
	margin: -6px 0 14px;
	font-size: 0.88rem;
	color: rgba(0, 57, 77, 0.65);
}

label.stc-model__optiekaart {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

label.stc-model__optiekaart:hover {
	border-color: rgba(0, 57, 77, 0.3);
}

label.stc-model__optiekaart.is-gekozen,
label.stc-model__optiekaart:has(input:checked) {
	border-color: #00b7be;
	background: rgba(0, 183, 190, 0.06);
}

.stc-model__optievink {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: #00b7be;
	cursor: pointer;
}

.stc-model__optietekst {
	display: block;
}

.stc-model__optienaam {
	display: block;
}

.stc-model__optieuitleg {
	display: block;
}

/* De balk met wat je gekozen hebt. Op een breed scherm blijft hij onderaan
   het scherm plakken zolang je in het optieblok bezig bent. */
.stc-model__configbalk {
	position: sticky;
	bottom: 14px;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 18px;
	margin: 16px 0;
	padding: 14px 18px;
	border-radius: 15px;
	background: #00394d;
	color: #ffffff;
	box-shadow: 0 10px 30px rgba(0, 22, 30, 0.18);
}

.stc-model__configtelling {
	margin: 0;
	font-weight: 700;
}

.stc-model__configknoppen {
	display: flex;
	align-items: center;
	gap: 14px;
}

.stc-model__configleeg {
	padding: 6px 4px;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.85rem;
	text-decoration: underline;
	cursor: pointer;
}

.stc-model__configleeg:hover {
	color: #ffffff;
}

.stc-model .btn.stc-model__configvraag,
a.btn.stc-model__configvraag {
	background: #00b7be;
	border-color: #00b7be;
	color: #00394d;
	white-space: nowrap;
}

/* De regel in het aanvraagvenster met wat er aangevinkt staat. */
.stc-prijs__gekozen {
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: 10px;
	background: rgba(0, 183, 190, 0.1);
	font-size: 0.85rem;
	line-height: 1.45;
	color: #00394d;
}

@media (max-width: 767px) {
	.stc-model__configbalk {
		bottom: 78px;
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.stc-model__configknoppen {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	a.btn.stc-model__configvraag {
		text-align: center;
		white-space: normal;
	}
}

/* ==========================================================================
   Het grote overzicht met alle modellen, onder de reekskaarten op de
   merkpagina.
   ========================================================================== */

.stc-alle {
	margin: var(--mediumlarge, 40px) 0 0;
}

.stc-alle__kop {
	margin-bottom: 18px;
}

.stc-alle__kop h2 {
	margin: 0 0 6px;
}

.stc-alle__kop p {
	margin: 0;
	max-width: 62ch;
	color: rgba(0, 57, 77, 0.7);
}

/* De ankerbalk: blijft boven in beeld terwijl je door de reeksen scrolt. */
.stc-alle__ankers {
	position: sticky;
	top: 0;
	z-index: 6;
	display: flex;
	gap: 8px;
	margin-bottom: 26px;
	padding: 12px 0;
	overflow-x: auto;
	scrollbar-width: none;
	background: #ffffff;
	border-bottom: 1px solid rgba(0, 57, 77, 0.1);
}

.stc-alle__ankers::-webkit-scrollbar {
	display: none;
}

.stc-alle__anker {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	padding: 8px 15px;
	border: 1px solid rgba(0, 57, 77, 0.15);
	border-radius: 100px;
	color: #00394d;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.stc-alle__anker:hover {
	border-color: #00b7be;
	background: rgba(0, 183, 190, 0.08);
	color: #00394d;
	text-decoration: none;
}

.stc-alle__anker span {
	padding: 1px 7px;
	border-radius: 100px;
	background: rgba(0, 57, 77, 0.08);
	font-size: 0.72rem;
	font-weight: 700;
}

.stc-alle__serie {
	margin-bottom: 44px;
	scroll-margin-top: 90px;
}

.stc-alle__seriekop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 20px;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(0, 57, 77, 0.12);
}

.stc-alle__seriekop h3 {
	margin: 0;
	font-size: 1.45rem;
}

.stc-alle__seriekop p {
	margin: 4px 0 0;
	font-size: 0.9rem;
	color: rgba(0, 57, 77, 0.65);
}

.stc-alle__meer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	padding: 9px 18px;
	border: 1px solid rgba(0, 57, 77, 0.15);
	border-radius: 100px;
	color: #00394d;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
}

.stc-alle__meer:hover {
	border-color: #00b7be;
	background: rgba(0, 183, 190, 0.08);
	color: #00394d;
	text-decoration: none;
}

@media (max-width: 767px) {
	.stc-alle__ankers {
		margin-bottom: 20px;
	}

	.stc-alle__serie {
		margin-bottom: 34px;
		scroll-margin-top: 70px;
	}

	.stc-alle__seriekop h3 {
		font-size: 1.25rem;
	}
}

/* ==========================================================================
   Het optieblok staat nu direct onder de specificaties, met de aanvraagknop
   eronder. Deze regels komen na de eerdere en overschrijven ze waar nodig.
   ========================================================================== */

section.stc-model__opties {
	margin: 0 0 var(--medium, 28px);
	padding: 24px;
	border: 0;
	border-radius: 15px;
	background: #f1f2f4;
}

section.stc-model__opties h4 {
	margin: 0 0 4px;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: #00394d;
}

section.stc-model__opties .stc-model__optieintro {
	margin: 0 0 16px;
	max-width: 62ch;
	font-size: 0.9rem;
	color: rgba(0, 57, 77, 0.65);
}

/* De knop en de regel eronder: geen zwevende balk meer, gewoon een blok onder
   de opties — daar hoort hij. */
.stc-model__configbalk {
	position: static;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 18px 0 0;
	padding: 18px 20px;
	border-radius: 15px;
	background: #00394d;
	color: #ffffff;
	box-shadow: none;
}

.stc-model__configtelling {
	flex: 1 1 240px;
	margin: 0;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.85);
}

.stc-model__configknoppen {
	flex: 0 0 auto;
}

/* De grote knop. */
a.btn.stc-model__configvraag {
	padding: 15px 28px;
	font-size: 1rem;
	font-weight: 700;
}

a.btn.stc-model__configvraag.is-config {
	background: #00b7be;
	border-color: #00b7be;
	color: #00394d;
}

.stc-model__optienoot {
	margin: 14px 0 0;
}

@media (max-width: 767px) {
	section.stc-model__opties {
		padding: 20px 18px;
	}

	.stc-model__configbalk {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 18px;
		text-align: center;
	}

	.stc-model__configknoppen {
		display: flex;
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 10px;
	}


}

/* ==========================================================================
   De aanvraagbalk onder de opties, opnieuw gezet.

   Er stonden nog regels van de eerdere, zwevende versie in dit bestand. Die
   maakten er op een telefoon een torenhoog blok van: de tekstregel kreeg daar
   een vaste hoogte van 240 px mee, en met "space-between" viel de knop
   helemaal onderin. Hieronder staat het één keer goed, en omdat het de laatste
   regels in het bestand zijn winnen ze van de oude.
   ========================================================================== */

.stc-model__configbalk {
	position: static;
	bottom: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 18px 0 0;
	padding: 16px 18px;
	border-radius: 15px;
	background: #00394d;
	color: #ffffff;
	box-shadow: none;
	text-align: left;
}

.stc-model__configtelling {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 0.88rem;
	font-weight: 400;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.85);
	overflow-wrap: anywhere;
}

.stc-model__configknoppen {
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
}

@media (max-width: 767px) {
	/* Geen flexbox meer op de balk zelf: gewoon tekst, dan de knop. */
	.stc-model__configbalk {
		display: block;
		padding: 18px;
		text-align: center;
	}

	.stc-model__configtelling {
		display: block;
		margin: 0 0 14px;
	}

	/* Omgekeerd, want in de opmaak staat Clear vóór de knop. */
	.stc-model__configknoppen {
		display: flex;
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 12px;
	}



	.stc-model__configleeg {
		width: 100%;
		text-align: center;
	}
}

/* ==========================================================================
   Twee knoppen naar het model ernaast in de reeks, boven in het infoblok.

   Op een telefoon staat dit vlak onder de titel, zodat je meteen een maat
   groter of kleiner kunt zonder de hele pagina door te scrollen.
   ========================================================================== */

.stc-model__wissel {
	display: flex;
	gap: 8px;
	margin: 0 0 16px;
}

.stc-model__wisselknop {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 13px;
	border: 1px solid rgba(0, 57, 77, 0.15);
	border-radius: 12px;
	background: #ffffff;
	color: #00394d;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.stc-model__wisselknop:hover,
.stc-model__wisselknop:focus-visible {
	border-color: #00b7be;
	background: rgba(0, 183, 190, 0.06);
	color: #00394d;
	text-decoration: none;
}

.stc-model__wisselknop--volgende {
	text-align: right;
}

.stc-model__wisselrol {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(0, 57, 77, 0.5);
}

.stc-model__wisselknop--vorige .stc-model__wisselrol::before {
	content: "\2190";
	margin-right: 6px;
}

.stc-model__wisselknop--volgende .stc-model__wisselrol::after {
	content: "\2192";
	margin-left: 6px;
}

.stc-model__wisselnaam {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
}

.stc-model__wisselmaat {
	font-size: 0.75rem;
	line-height: 1.35;
	color: rgba(0, 57, 77, 0.6);
	overflow-wrap: anywhere;
}

/* In het grijze infoblok op groot scherm mogen de knoppen wat rustiger. */
@media (min-width: 992px) {
	body.stc-modelpagina .stc-model__info .stc-model__wisselknop {
		border-color: rgba(0, 57, 77, 0.12);
	}
}

@media (max-width: 767px) {
	.stc-model__wissel {
		margin-bottom: 18px;
	}

	.stc-model__wisselknop {
		padding: 11px 12px;
	}
}

/* ==========================================================================
   Terug naar het merkoverzicht, naast de kop van de modelkiezer.
   ========================================================================== */

.stc-model__merklink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	padding: 9px 18px;
	border: 1px solid rgba(0, 57, 77, 0.15);
	border-radius: 100px;
	background: #ffffff;
	color: #00394d;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.stc-model__merklink::after {
	content: "\2192";
	font-weight: 400;
}

.stc-model__merklink:hover,
.stc-model__merklink:focus-visible {
	border-color: #00b7be;
	background: rgba(0, 183, 190, 0.08);
	color: #00394d;
	text-decoration: none;
}

/* ==========================================================================
   Het kruimelpad heeft er stappen bij gekregen; op een smal scherm mag het
   afbreken in plaats van uit beeld lopen.
   ========================================================================== */

body.stc-modelpagina section.breadcrumbs .breadcrumbs {
	display: block;
	overflow-wrap: anywhere;
}

@media (max-width: 767px) {
	.stc-model__merklink {
		white-space: normal;
	}
}

/* ==========================================================================
   Het USP-blok onder de foto.

   Op een breed scherm is de specificatiekolom veel langer dan de foto; onder
   die foto bleef een gat van een paar honderd pixels over. Daar staan nu de
   redenen om bij STC te kopen, met de inruilknop eronder. De punten komen van
   de merkpagina, dus ze staan maar op één plek in WordPress.

   Op een telefoon laten we het weg: die pagina is al lang genoeg en het blok
   staat verderop toch al als inruilblok.
   ========================================================================== */

/* 9 sep 2026: dit blok stond op display:none en werd alleen boven 992px in de
   rechterkolom getoond, dus op een telefoon zag je het nooit. Nu overal
   zichtbaar, met dezelfde kaartopmaak; de plaatsing in het desktopraster staat
   verderop en overschrijft de marge. */
.stc-model__usp {
	display: block;
	margin: 26px 0 0;
	padding: 22px 24px;
	border-radius: 15px;
	background: #f1f2f4;
}

@media (max-width: 640px) {
	.stc-model__usp {
		padding: 18px;
	}

	.stc-model__usplijst {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}

@media (min-width: 992px) {
	/* De specificaties en de prijskolom lopen over twee rijen; de foto staat in
	   de eerste, dit blok in de tweede. */
	body.stc-modelpagina section.product .product-specifications,
	body.stc-modelpagina .product-sidebar-col {
		grid-row: 1 / span 2;
	}

	body.stc-modelpagina .product-gallery {
		grid-row: 1;
	}

	body.stc-modelpagina .stc-model__usp {
		display: block;
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		margin-top: 26px;
		padding: 22px 24px;
		border-radius: 15px;
		background: #f1f2f4;
	}
}

.stc-model__usplabel {
	margin: 0 0 14px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #00b7be;
}

.stc-model__usplijst {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 24px;
}

.stc-model__uspunt strong {
	display: block;
	margin-bottom: 3px;
	font-size: 0.92rem;
	line-height: 1.3;
	color: #00394d;
}

.stc-model__uspunt span {
	display: block;
	font-size: 0.8rem;
	line-height: 1.45;
	color: rgba(0, 57, 77, 0.65);
}

.stc-model__usplink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	padding: 11px 20px;
	border: 1px solid rgba(0, 57, 77, 0.15);
	border-radius: 100px;
	background: #ffffff;
	color: #00394d;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
}

.stc-model__usplink::after {
	content: "\2192";
	font-weight: 400;
}

.stc-model__usplink:hover,
.stc-model__usplink:focus-visible {
	border-color: #00b7be;
	background: rgba(0, 183, 190, 0.08);
	color: #00394d;
	text-decoration: none;
}

@media (min-width: 992px) and (max-width: 1199px) {
	.stc-model__usplijst {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.stc-model__uspunt span {
		display: none;
	}
}

/* ==========================================================================
   Het inruilblok: de knoppen stonden bovenaan terwijl de tekst doorliep, dus
   bleef er rechtsonder een gat. Nu staan ze in het midden en zijn ze even
   hoog.
   ========================================================================== */

@media (min-width: 992px) {
	.stc-inruil .stc-inruil__acties {
		align-self: center;
	}
}

.stc-inruil .stc-inruil__wa,
.stc-inruil .stc-inruil__mail,
.stc-inruil .stc-inruil__meer {
	min-height: 56px;
	border: 1px solid transparent;
	line-height: 1.3;
}

.stc-inruil .stc-inruil__mail,
.stc-inruil .stc-inruil__meer {
	border-color: rgba(255, 255, 255, 0.4);
}

.stc-inruil--kaal .stc-inruil__mail,
.stc-inruil--kaal .stc-inruil__meer {
	border-color: rgba(0, 57, 77, 0.25);
}

/* Zonder expliciete rijen betekent grid-row: 1 / -1 in dit raster gewoon
   "alleen de eerste rij", en dan blijft de knoppenkolom bovenin hangen. Met
   drie benoemde rijen loopt hij wel over de hele hoogte en werkt het
   centreren. */
@media (min-width: 992px) {
	.stc-inruil .stc-inruil__body {
		grid-template-rows: auto auto 1fr;
	}
}

/* ==========================================================================
   De aanvraagknop, netter.

   De knop van het thema is een flexbox met het pijltje in een rondje rechts.
   Door hem op een telefoon op display:block te zetten viel dat rondje op een
   eigen regel eronder. Hij blijft nu gewoon een flexbox: tekst links, pijl
   rechts, over de volle breedte.
   ========================================================================== */

a.btn.stc-model__configvraag {
	font-size: 0.95rem;
	padding: 12.5px 12.5px 12.5px 22.5px;
}

@media (max-width: 767px) {
	.stc-model__configbalk {
		padding: 16px;
		text-align: left;
	}

	.stc-model__configtelling {
		display: block;
		margin: 0 0 12px;
		font-size: 0.85rem;
	}

	.stc-model__configknoppen {
		gap: 10px;
	}

	a.btn.stc-model__configvraag {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		gap: 14px;
		padding: 13px 13px 13px 20px;
		text-align: left;
		white-space: normal;
	}

	.stc-model__configleeg {
		width: 100%;
		padding: 4px 0;
		text-align: center;
		font-size: 0.82rem;
	}
}

/* De optiekaartjes: iets meer verschil tussen de naam en de uitleg. */
.stc-model__optienaam {
	font-size: 1rem;
	font-weight: 700;
}

.stc-model__optieuitleg {
	margin-top: 4px;
	font-size: 0.82rem;
	line-height: 1.45;
	color: rgba(0, 57, 77, 0.6);
}

/* ==========================================================================
   De vergelijkingstabel, bijgesteld.

   De waarden staan in <td>-cellen, en het thema geeft die de opmaak van een
   label: lichtgrijs en dun. In deze tabel is dat precies omgekeerd, dus zetten
   we het hier expliciet recht.

   En op een telefoon toont hij nog maar twee kolommen — dit model en één
   gekozen model — in plaats van zes kolommen om doorheen te schuiven.
   ========================================================================== */

.stc-model__vergelijk .stc-model__vergelijktabel td {
	font-size: 0.88rem;
	font-weight: 500;
	color: #00394d;
}

.stc-model__vergelijk .stc-model__vergelijktabel td.is-nu {
	font-weight: 700;
}

.stc-model__vergelijk .stc-model__vergelijktabel th[scope="row"] {
	font-size: 0.82rem;
	font-weight: 600;
	color: rgba(0, 57, 77, 0.6);
}

.stc-model__vergelijk .stc-model__vergelijktabel .stc-model__leeg {
	color: rgba(0, 57, 77, 0.3);
}

/* ---------- De keuzelijst ---------- */

.stc-model__vergelijkkiezer {
	display: none;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0 0 14px;
}

.stc-model__vergelijkkiezer label {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: rgba(0, 57, 77, 0.7);
}

.stc-model__vergelijkkiezer select {
	flex: 1 1 140px;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid rgba(0, 57, 77, 0.2);
	border-radius: 10px;
	background: #ffffff;
	color: #00394d;
	font-size: 0.95rem;
	font-weight: 700;
}

@media (max-width: 767px) {
	.stc-model__vergelijkkiezer {
		display: flex;
	}

	/* Met twee kolommen hoeft er niets meer te schuiven. */
	.stc-model__vergelijkrol {
		overflow-x: visible;
	}

	.stc-model__vergelijktabel {
		width: 100%;
		min-width: 0;
	}

	.stc-model__vergelijktabel th[scope="row"],
	.stc-model__vergelijktabel thead th {
		position: static;
		min-width: 0;
	}

	.stc-model__vergelijktabel th,
	.stc-model__vergelijktabel td {
		padding: 10px 12px;
		vertical-align: top;
	}

	.stc-model__vergelijktabel thead th {
		font-size: 0.95rem;
	}

	.stc-model__vergelijktabel th[scope="row"] {
		width: 38%;
	}
}

/* ==========================================================================
   De vergelijkingstabel past nu in één beeld.

   Hij stond op width:max-content met een minimumbreedte per kolom, dus bij een
   lange waarde schoof de tabel opzij. Nu verdeelt hij de beschikbare breedte
   gelijk over de modellen en breken lange waarden gewoon af. De regel
   "Versions" is uit de vergelijking gehaald: die zette twee volledige
   modelnamen in één cel.
   ========================================================================== */

.stc-model__vergelijkrol {
	overflow-x: auto;
}

.stc-model__vergelijk .stc-model__vergelijktabel {
	width: 100%;
	min-width: 0;
	table-layout: fixed;
}

.stc-model__vergelijk .stc-model__vergelijktabel th,
.stc-model__vergelijk .stc-model__vergelijktabel td {
	min-width: 0;
	padding: 11px 14px;
	overflow-wrap: anywhere;
	hyphens: none;
}

/* De eerste kolom houdt de specificatienamen bij elkaar; de rest deelt de
   ruimte. */
.stc-model__vergelijk .stc-model__vergelijktabel th[scope="row"],
.stc-model__vergelijk .stc-model__vergelijktabel thead th:first-child {
	width: 22%;
	min-width: 0;
	overflow-wrap: normal;
}

/* Bij een reeks met veel modellen wordt elke kolom smal; dan mag de tekst
   kleiner. */
.stc-model__vergelijk .stc-model__vergelijktabel td {
	font-size: 0.84rem;
	line-height: 1.4;
}

@media (max-width: 767px) {
	.stc-model__vergelijk .stc-model__vergelijktabel th[scope="row"],
	.stc-model__vergelijk .stc-model__vergelijktabel thead th:first-child {
		width: 38%;
	}

	.stc-model__vergelijk .stc-model__vergelijktabel td {
		font-size: 0.88rem;
	}
}

/* Bij een reeks met veel modellen staat de keuzelijst ook op een breed scherm
   aan: veertien kolommen naast elkaar leest niemand. */
.stc-model__vergelijk--veel .stc-model__vergelijkkiezer {
	display: flex;
}

/* ==========================================================================
   Het kopblok boven de modellen op een reekspagina.

   Daar stond alleen een titel en een zin; nu ook hoeveel modellen de reeks
   telt, een weg terug naar het merk, en de andere reeksen als knoppen — zodat
   je van de tafelmodellen zo naar de vloermodellen kunt.
   ========================================================================== */

.stc-seriekop {
	margin: 0 0 var(--medium, 28px);
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(0, 57, 77, 0.12);
}

.stc-seriekop__balk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	margin-bottom: 20px;
}

.stc-seriekop__telling {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #00b7be;
}

.stc-seriekop__knoppen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.stc-seriekop__terug {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border: 1px solid rgba(0, 57, 77, 0.18);
	border-radius: 100px;
	color: #00394d;
	font-size: 0.88rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.stc-seriekop__terug::before {
	content: "\2190";
	font-weight: 400;
}

.stc-seriekop__terug:hover,
.stc-seriekop__terug:focus-visible {
	border-color: #00b7be;
	background: rgba(0, 183, 190, 0.08);
	color: #00394d;
	text-decoration: none;
}

a.btn.stc-seriekop__vraag {
	font-size: 0.88rem;
}

/* ---------- De andere reeksen ---------- */

.stc-seriekop__andere {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}

.stc-seriekop__anderelabel {
	flex: 0 0 auto;
	font-size: 0.85rem;
	color: rgba(0, 57, 77, 0.6);
}

.stc-seriekop__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.stc-seriekop__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	border: 1px solid rgba(0, 57, 77, 0.15);
	border-radius: 100px;
	background: #ffffff;
	color: #00394d;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.stc-seriekop__chip span {
	padding: 1px 7px;
	border-radius: 100px;
	background: rgba(0, 57, 77, 0.08);
	font-size: 0.72rem;
	font-weight: 700;
}

.stc-seriekop__chip:hover,
.stc-seriekop__chip:focus-visible {
	border-color: #00b7be;
	background: rgba(0, 183, 190, 0.08);
	color: #00394d;
	text-decoration: none;
}

@media (max-width: 767px) {
	.stc-seriekop__balk {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.stc-seriekop__knoppen {
		flex-direction: column;
		align-items: stretch;
	}

	.stc-seriekop__terug,
	a.btn.stc-seriekop__vraag {
		justify-content: space-between;
		text-align: left;
		white-space: normal;
	}

	/* De reeksen als strook die je opzij schuift, net als elders. */
	.stc-seriekop__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	.stc-seriekop__chips::-webkit-scrollbar {
		display: none;
	}

	.stc-seriekop__chip {
		flex: 0 0 auto;
	}
}


/* ==========================================================================
   "Why buy from STC" op een gebruikte machinepagina.

   Zelfde uiterlijk als het blok op de modelpagina's, maar in één kolom: de
   rechterkolom van een machinepagina is smal. De inruil staat bovenaan als
   eigen kaartje, want dat is de reden dat dit blok er staat.
   ========================================================================== */

.stc-inruilusp {
	margin: 26px 0 0;
	padding: 22px 24px;
	border-radius: 15px;
	background: #f1f2f4;
}

.stc-inruilusp__label {
	margin: 0 0 14px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #00b7be;
}

.stc-inruilusp__lijst {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

.stc-inruilusp__punt strong {
	display: block;
	margin-bottom: 3px;
	font-size: 0.92rem;
	line-height: 1.3;
	color: #00394d;
}

.stc-inruilusp__punt span {
	display: block;
	font-size: 0.8rem;
	line-height: 1.45;
	color: rgba(0, 57, 77, 0.65);
}

/* De inruil krijgt een eigen kaartje, zodat hij niet wegvalt tussen de rest. */
.stc-inruilusp__punt--eerst {
	padding: 14px 16px;
	border-left: 3px solid #00b7be;
	border-radius: 10px;
	background: #ffffff;
}

.stc-inruilusp__punt--eerst strong {
	font-size: 1rem;
}

.stc-inruilusp__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	padding: 11px 20px;
	border: 1px solid rgba(0, 57, 77, 0.15);
	border-radius: 100px;
	background: #ffffff;
	color: #00394d;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
}

.stc-inruilusp__link::after {
	content: "\2192";
	font-weight: 400;
}

.stc-inruilusp__link:hover,
.stc-inruilusp__link:focus-visible {
	border-color: #00b7be;
	background: rgba(0, 183, 190, 0.08);
	color: #00394d;
	text-decoration: none;
}

@media (max-width: 767px) {
	.stc-inruilusp {
		padding: 18px 18px 20px;
	}
}


/* ==========================================================================
   De blokken op een machinepagina komen rustig in beeld.
   Hoort bij assets/js/machinereveal.js; het kenmerk zet dat script, dus zonder
   JavaScript staat alles gewoon zichtbaar.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	[data-stc-reveal] {
		opacity: 0;
		transform: translateY(10px);
		transition: opacity 0.45s ease, transform 0.45s ease;
		will-change: opacity, transform;
	}

	[data-stc-reveal].is-visible {
		opacity: 1;
		transform: none;
	}
}


/* ==========================================================================
   De aanvraagknop op de donkerblauwe optiebalk: hover andersom.

   Een gewone knop wordt bij hover marineblauw (#00394d). Op deze balk is de
   achtergrond precies diezelfde kleur, dus de knop viel weg zodra je hem
   aanwees. Hier draaien we het om: de knop wordt juist wit, met
   marineblauwe tekst. Het ronde pijltje blijft marineblauw en staat dan
   netjes af tegen het wit.
   ========================================================================== */

.stc-model__configbalk a.btn.stc-model__configvraag:hover,
.stc-model__configbalk a.btn.stc-model__configvraag:focus-visible {
	color: #00394d;
}

.stc-model__configbalk a.btn.stc-model__configvraag:hover::after,
.stc-model__configbalk a.btn.stc-model__configvraag:focus-visible::after {
	box-shadow: 0 0 0 300px #ffffff;
}

/* ---------- Gedraaide vergelijkingstabel (8 sep 2026) ----------
   Modellen naast elkaar, specificaties onder elkaar; cellen breken af, dus
   nooit horizontaal scrollen. Op een telefoon wordt elke specificatie een
   blokje met per model een regel (de modelnaam komt uit data-model). */

.stc-serie__tabelwrap:has(.stc-serie__tabel--gedraaid) {
	overflow-x: visible;
}

.stc-serie__tabelwrap + .stc-serie__tabelwrap {
	margin-top: 14px;
}

.stc-serie__tabel--gedraaid {
	table-layout: fixed;
	white-space: normal;
	font-size: 0.82rem;
}

.stc-serie__tabel--gedraaid th,
.stc-serie__tabel--gedraaid td {
	padding: 10px 12px;
	vertical-align: top;
	overflow-wrap: break-word;
	hyphens: auto;
	line-height: 1.35;
}

.stc-serie__tabel--gedraaid thead th:first-child {
	width: 21%;
}

.stc-serie__tabel--gedraaid thead th a {
	color: var(--h-navy);
	text-decoration: none;
}

.stc-serie__tabel--gedraaid thead th a:hover {
	color: var(--h-teal);
}

.stc-serie__tabel--gedraaid tbody th {
	font-weight: 600;
	color: rgba(0, 57, 77, 0.72);
	background: rgba(0, 57, 77, 0.03);
}

@media (max-width: 767px) {
	.stc-serie__tabel--gedraaid thead {
		display: none;
	}

	.stc-serie__tabel--gedraaid,
	.stc-serie__tabel--gedraaid tbody,
	.stc-serie__tabel--gedraaid tr,
	.stc-serie__tabel--gedraaid th,
	.stc-serie__tabel--gedraaid td {
		display: block;
		width: auto;
	}

	.stc-serie__tabel--gedraaid tbody tr {
		padding-bottom: 8px;
		border-bottom: 1px solid var(--h-rand);
	}

	.stc-serie__tabel--gedraaid tbody tr:last-child {
		border-bottom: 0;
	}

	.stc-serie__tabel--gedraaid tbody th {
		padding: 10px 14px 4px;
		border-bottom: 0;
		background: transparent;
		font-weight: 800;
		color: var(--h-navy);
	}

	.stc-serie__tabel--gedraaid td {
		display: flex;
		justify-content: flex-start;
		gap: 12px;
		padding: 4px 14px;
		text-align: left;
		border-bottom: 0;
	}

	.stc-serie__tabel--gedraaid td::before {
		content: attr(data-model);
		flex: 0 0 44%;
		color: rgba(0, 57, 77, 0.6);
	}

	.stc-serie__tabel--gedraaid tbody tr:hover th,
	.stc-serie__tabel--gedraaid tbody tr:hover td {
		background: transparent;
	}
}


/* 9 sep 2026 — de pdf-lijst van Boss onderaan de machinepagina.
   Zonder opmaak liepen de bestanden als losse tekstregels door de omschrijving
   heen; op een telefoon was niet te zien dat het downloads waren. */
.stc-boss-docs {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.stc-boss-docs li {
	margin: 0;
	padding: 0;
}

.stc-boss-doc {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid rgba(0, 57, 77, .18);
	border-radius: 10px;
	background: #fff;
	color: #00394d;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}

.stc-boss-doc:hover,
.stc-boss-doc:focus {
	border-color: #00b7be;
	background: rgba(0, 183, 190, .07);
	color: #00394d;
	text-decoration: none;
}

.stc-boss-doc::before {
	content: "PDF";
	flex: 0 0 auto;
	padding: 6px 8px;
	border-radius: 6px;
	background: rgba(0, 183, 190, .16);
	color: #00394d;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
}

.stc-boss-doc__naam {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	overflow-wrap: break-word;
}

.stc-boss-doc__maat {
	flex: 0 0 auto;
	font-size: 13px;
	opacity: .6;
	white-space: nowrap;
}

.stc-boss-slot,
.stc-boss-bron {
	font-size: 13px;
	opacity: .7;
}

/* ---------- Specificaties op een productkaartje van het thema ----------
   De kaartjes onder "Gerelateerde machines" tonen de samenvatting van de post.
   Een nieuwe machine heeft die niet, dus stond er alleen de naam. Nu komt daar
   hetzelfde lijstje op als op de reekspagina (stc_kaart_specs). */

.stc-kaartspecs {
	display: grid;
	grid-template-columns: minmax(0, auto) 1fr;
	gap: 4px 10px;
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.35;
}

.stc-kaartspecs dt {
	color: rgba(0, 57, 77, 0.6);
}

.stc-kaartspecs dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
	overflow-wrap: break-word;
}

/* ---------- "Waarom kopen bij STC" onder een reeks ----------
   Op de modelpagina staat dit blok in de rechterkolom van een desktopraster en
   is het daarom onder 992px verborgen. Onder een reeks staat het over de volle
   breedte en hoort het juist in elke schermmaat zichtbaar te zijn. */

.stc-serie__usp {
	display: block;
	margin: 34px 0 0;
	padding: 22px 24px;
	border-radius: 15px;
	background: #f1f2f4;
}

@media (max-width: 640px) {
	.stc-serie__usp {
		padding: 18px;
	}

	.stc-serie__usp .stc-model__usplijst {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}

/* ---------- Het USP-blok op een telefoon en tablet ----------
   Onder 992px valt de modelpagina terug op een enkele kolom. Het USP-blok
   stond dan tussen de foto en de titel; met deze volgorde komt het na de prijs
   en de knoppen te staan. De rij is daar geen raster meer, dus de kolom wordt
   flex gemaakt om order te laten werken. */

@media (max-width: 991.98px) {
	body.stc-modelpagina section.product .row > div:not(.product-sidebar-col) {
		display: flex;
		flex-direction: column;
	}

	body.stc-modelpagina .product-gallery {
		order: 1;
	}

	body.stc-modelpagina .product-sidebar-placeholder {
		order: 2;
	}

	body.stc-modelpagina .product-sticky {
		order: 3;
	}

	body.stc-modelpagina .stc-model__usp {
		order: 4;
	}

	body.stc-modelpagina .product-specifications {
		order: 5;
	}

	body.stc-modelpagina .product-description {
		order: 6;
	}
}

/* Twee kolommen USP-punten passen niet op een telefoon. Deze regel staat
   achteraan omdat de tweekolomsregel verderop in dit bestand anders wint. */

@media (max-width: 640px) {
	.stc-model__usplijst {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}

/* ---------- De PDF's van Boss onder de datablad-knop ----------
   stc-datasheet.php verplaatst de lijst uit de lopende tekst naar de kop,
   direct onder "Datablad downloaden". De kop wordt daar een klein label. */

.stc-blad-docs {
	width: 100%;
	margin-top: 16px;
}

.stc-blad-docs > h1,
.stc-blad-docs > h2,
.stc-blad-docs > h3,
.stc-blad-docs > h4 {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(0, 57, 77, 0.55);
}

.stc-blad-docs .stc-boss-docs {
	margin-top: 10px;
}

.stc-blad-docs .stc-boss-doc {
	padding: 10px 12px;
	gap: 10px;
	font-size: 0.86rem;
}

/* ---------- De modelbalk ----------
   Plakt onder de kop van de site op een modelpagina. Bovenste rij de reeksen
   van het merk, onderste rij de modellen van de reeks. De hoogte van de kop
   verschilt per schermmaat, dus die zet stc-modelbalk.php in --stc-balk-top. */

.stc-modelbalk {
	position: sticky;
	top: var(--stc-balk-top, 97px);
	z-index: 9;
	background: #fff;
	border-bottom: 1px solid rgba(0, 57, 77, 0.12);
	box-shadow: 0 6px 18px -14px rgba(0, 57, 77, 0.55);
}

.stc-modelbalk__binnen {
	max-width: 1240px;
	margin: 0 auto;
	padding: 8px 22.5px 10px;
}

.stc-modelbalk__rij {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.stc-modelbalk__rij + .stc-modelbalk__rij {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid rgba(0, 57, 77, 0.08);
}

.stc-modelbalk__label {
	flex: 0 0 auto;
	width: 46px;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(0, 57, 77, 0.45);
}

.stc-modelbalk__spoor {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.stc-modelbalk__spoor::-webkit-scrollbar {
	display: none;
}

.stc-modelbalk__knop {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid rgba(0, 57, 77, 0.12);
	border-radius: 100px;
	background: #fff;
	font-size: 0.8rem;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--h-navy, #00394d);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

a.stc-modelbalk__knop:hover,
a.stc-modelbalk__knop:focus-visible {
	border-color: var(--h-teal, #00b7be);
	color: var(--h-navy, #00394d);
	text-decoration: none;
}

.stc-modelbalk__knop.is-nu,
a.stc-modelbalk__knop.is-nu:hover {
	border-color: var(--h-teal, #00b7be);
	background: var(--h-teal, #00b7be);
	color: #fff;
	font-weight: 700;
}

.stc-modelbalk__aantal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	padding: 1px 5px;
	border-radius: 100px;
	background: rgba(0, 57, 77, 0.07);
	font-size: 0.68rem;
	font-weight: 700;
}

.stc-modelbalk__knop.is-nu .stc-modelbalk__aantal {
	background: rgba(255, 255, 255, 0.24);
	color: #fff;
}

.stc-modelbalk__rij--model .stc-modelbalk__knop {
	padding: 5px 11px;
	font-size: 0.76rem;
}

@media (max-width: 640px) {
	.stc-modelbalk__binnen {
		padding: 6px 12px 8px;
	}

	.stc-modelbalk__label {
		width: 34px;
		font-size: 0.56rem;
	}

	.stc-modelbalk__knop {
		padding: 5px 10px;
		font-size: 0.74rem;
	}
}

/* De balk terwijl een ander model wordt opgehaald. */
.stc-modelbalk.is-bezig {
	cursor: progress;
}

.stc-modelbalk.is-bezig .stc-modelbalk__rij--model {
	opacity: 0.55;
}

/* Het fotokaartje dat bij het aanwijzen onder de balk valt. */

.stc-modelbalk {
	position: sticky;
}

.stc-modelbalk__kaart {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 168px;
	margin-top: 6px;
	padding: 10px 10px 8px;
	border: 1px solid rgba(0, 57, 77, 0.12);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 16px 34px -20px rgba(0, 57, 77, 0.7);
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease;
}

.stc-modelbalk__kaart.is-open {
	opacity: 1;
	transform: none;
}

.stc-modelbalk__kaart img {
	width: 100%;
	height: 118px;
	object-fit: contain;
	background: #f1f2f4;
	border-radius: 8px;
}

.stc-modelbalk__kaart span {
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: var(--h-navy, #00394d);
}

@media (hover: none) {
	.stc-modelbalk__kaart {
		display: none;
	}
}


/* ======================================================================
   Op de telefoon geen vergelijkingstabel op de reekspagina. De kaartjes
   noemen de belangrijkste maten al; de hele tabel eronder maakt de pagina
   alleen maar lang. Op de desktop blijft hij gewoon staan.
   ====================================================================== */
@media (max-width: 767.98px) {
	.stc-serie__tabelwrap {
		display: none;
	}
}


/* ======================================================================
   De reekskiezer inklappen op de telefoon.

   Op de desktop verandert er niets: de knop staat uit en de inhoud staat er
   gewoon. Onder 768px verschijnt een knop met de naam van de reeks en een
   pijltje, en zit de rest daarachter. De checkbox staat buiten beeld maar
   blijft focusbaar, zodat het ook met het toetsenbord werkt.
   ====================================================================== */
.stc-model__schakel {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.stc-model__inklapknop {
	display: none;
}

@media (max-width: 767.98px) {
	.stc-model__reekskop p {
		display: none;
	}

	.stc-model__inklapknop {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		margin: 6px 0 0;
		padding: 12px 16px;
		border: 1px solid rgba(0, 57, 77, 0.15);
		border-radius: 100px;
		background: #ffffff;
		color: #00394d;
		font-size: 0.92rem;
		font-weight: 700;
		line-height: 1.2;
		cursor: pointer;
	}

	.stc-model__inklapnaam {
		flex: 1 1 auto;
	}

	.stc-model__inklaptel {
		flex: 0 0 auto;
		padding: 2px 9px;
		border-radius: 100px;
		background: rgba(0, 57, 77, 0.08);
		font-size: 0.78rem;
		font-weight: 700;
	}

	.stc-model__inklappijl {
		flex: 0 0 auto;
		width: 9px;
		height: 9px;
		margin-right: 3px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.15s ease;
	}

	.stc-model__schakel:checked ~ .stc-model__inklapknop {
		border-color: #00394d;
	}

	.stc-model__schakel:checked ~ .stc-model__inklapknop .stc-model__inklappijl {
		transform: translateY(2px) rotate(-135deg);
	}

	.stc-model__schakel:focus-visible ~ .stc-model__inklapknop {
		outline: 2px solid #00b7be;
		outline-offset: 2px;
	}

	.stc-model__schakel:not(:checked) ~ .stc-model__inklapinhoud {
		display: none;
	}

	.stc-model__inklapinhoud {
		margin-top: 12px;
	}
}