/*
 * Witgoed-Gids centraal layoutcontract.
 * Dit bestand bepaalt uitsluitend de gedeelde buitenmaat, breadcrumbs,
 * overzichtshero en typografische uitlijning van normale websitepagina's.
 * De keuzehulp is bewust volledig uitgesloten.
 */

/* Eén buitenmaat voor alle normale pagina's, header en footer. */
.wg-container,
.wg-apparaten-container,
.wg-problem-page__container,
.wg-problem__container,
.wg-koopgids-shell,
.wg-page__container,
.wg-header__container,
.wg-footer__container,
.wg-footer__bottom-container,
.wg-home-section__container,
.wg-home-hero__container,
.wg-home-cta__container {
	width: min(var(--wg-container-width), calc(100% - (2 * var(--wg-page-gutter))));
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
}

/* Eén breadcrumbcomponent voor alle normale pagina's. */
.wg-breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
	margin: 0 0 var(--wg-page-breadcrumb-gap);
	padding: 0;
	color: var(--wg-color-text-muted);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
}

.wg-breadcrumbs a,
.wg-breadcrumbs span {
	color: inherit;
}

.wg-breadcrumbs a {
	text-decoration: none;
}

.wg-breadcrumbs a:hover,
.wg-breadcrumbs a:focus-visible {
	color: var(--wg-color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wg-breadcrumbs [aria-current="page"] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* De breadcrumb van apparaatdetails staat buiten de eigen producthero. */
.wg-apparaat-page > .wg-container:first-child {
	padding-top: var(--wg-page-hero-top);
}

/* Eén verticale hero-opbouw voor alle normale overzichtspagina's. */
.wg-hub-hero,
.wg-apparaten-hero,
.wg-problem-page__hero,
.wg-guides-hub__hero {
	box-sizing: border-box;
	min-height: var(--wg-overview-hero-min-height);
	padding-top: var(--wg-page-hero-top);
	padding-bottom: var(--wg-page-hero-bottom);
}

.wg-hub-hero h1,
.wg-apparaten-hero h1,
.wg-problem-page__title,
.wg-guides-hub__hero h1,
.wg-problem__title,
.wg-koopgids-hero__title,
.wg-page__title {
	margin: 0;
	color: var(--wg-color-heading);
	font-size: var(--wg-font-size-hero);
	font-weight: 800;
	line-height: var(--wg-line-height-heading);
	letter-spacing: -0.035em;
}

.wg-hub-eyebrow,
.wg-apparaten-eyebrow,
.wg-guides-hub__eyebrow,
.wg-section-heading__eyebrow,
.wg-koopgids-editorial__eyebrow,
.wg-koopgids-faq__eyebrow,
.wg-koopgids-related__eyebrow {
	display: block;
	margin: 0 0 10px;
	color: var(--wg-color-primary);
	font-size: var(--wg-font-size-eyebrow);
	font-weight: 750;
	line-height: 1.3;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.wg-hub-hero h1,
.wg-apparaten-hero h1,
.wg-guides-hub__hero h1 {
	margin-bottom: var(--wg-hero-title-gap);
}

.wg-hub-hero__content > p,
.wg-apparaten-intro,
.wg-problem-page__intro,
.wg-problem__intro,
.wg-guides-hub__hero-content > p,
.wg-koopgids-hero__intro {
	max-width: 720px;
	color: var(--wg-color-text-muted);
	font-size: var(--wg-font-size-intro);
	line-height: var(--wg-line-height-body);
}

.wg-problem-page__intro,
.wg-problem__intro,
.wg-koopgids-hero__intro {
	margin-top: var(--wg-hero-intro-gap);
}

.wg-apparaten-section-header h2,
.wg-section-heading__title,
.wg-guides-hub__section-heading h2,
.wg-guides-hub__structure h2,
.wg-koopgids__section-title {
	color: var(--wg-color-heading);
	font-size: var(--wg-font-size-section);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -0.03em;
}

@media (max-width: 720px) {
	.wg-container,
	.wg-apparaten-container,
	.wg-problem-page__container,
	.wg-problem__container,
	.wg-koopgids-shell,
	.wg-page__container,
	.wg-header__container,
	.wg-footer__container,
	.wg-footer__bottom-container,
	.wg-home-section__container,
	.wg-home-hero__container,
	.wg-home-cta__container {
		width: min(var(--wg-container-width), calc(100% - (2 * var(--wg-page-gutter-mobile))));
	}

	.wg-breadcrumbs {
		gap: 7px;
		margin-bottom: var(--wg-page-breadcrumb-gap-mobile);
		font-size: 13px;
	}

	.wg-apparaat-page > .wg-container:first-child {
		padding-top: var(--wg-page-hero-top-mobile);
	}

	.wg-hub-hero,
	.wg-apparaten-hero,
	.wg-problem-page__hero,
	.wg-guides-hub__hero {
		min-height: 0;
		padding-top: var(--wg-page-hero-top-mobile);
	}
}

/*
 * Globaal breadcrumbcontract.
 *
 * Dit contract staat in het bestaande centrale design-systembestand.
 * De selectors zijn bewust specifieker dan de paginaspecifieke breadcrumbregels.
 * Daardoor blijft het responsive gedrag ook gelden wanneer een paginastylesheet
 * later wordt geladen, terwijl de eigen verticale positionering intact blijft.
 */

body .wg-breadcrumbs[aria-label],
body .wg-choice-breadcrumbs[aria-label] {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	min-width: 0;
	max-width: 100%;
	color: var(--wg-color-text-subtle, #66768a);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
}

body .wg-breadcrumbs[aria-label] > *,
body .wg-choice-breadcrumbs[aria-label] > * {
	flex: 0 0 auto;
}

body .wg-breadcrumbs[aria-label] a,
body .wg-choice-breadcrumbs[aria-label] a {
	color: #4d5f72;
	text-decoration: none;
}

body .wg-breadcrumbs[aria-label] a:hover,
body .wg-breadcrumbs[aria-label] a:focus-visible,
body .wg-choice-breadcrumbs[aria-label] a:hover,
body .wg-choice-breadcrumbs[aria-label] a:focus-visible {
	color: var(--wg-color-primary, #3568df);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body .wg-breadcrumbs[aria-label] [aria-current="page"],
body .wg-choice-breadcrumbs[aria-label] [aria-current="page"] {
	color: var(--wg-color-text-muted, #445466);
}

/*
 * Op mobiel en tablet blijft de volledige breadcrumb op één rustige regel.
 * De browser verzorgt touch- en trackpadscrolling zonder JavaScript.
 */
@media (max-width: 1024px) {
	body .wg-breadcrumbs[aria-label],
	body .wg-choice-breadcrumbs[aria-label] {
		width: 100%;
		flex-flow: row nowrap;
		gap: 7px;
		overflow-x: auto;
		overflow-y: hidden;
		font-size: 12px;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-inline: contain;
		scrollbar-width: none;
	}

	body .wg-breadcrumbs[aria-label]::-webkit-scrollbar,
	body .wg-choice-breadcrumbs[aria-label]::-webkit-scrollbar {
		display: none;
	}

	body .wg-breadcrumbs[aria-label] > *,
	body .wg-choice-breadcrumbs[aria-label] > * {
		flex: 0 0 auto;
		max-width: none;
		white-space: nowrap;
	}

	body .wg-breadcrumbs[aria-label] a,
	body .wg-breadcrumbs[aria-label] span,
	body .wg-choice-breadcrumbs[aria-label] a,
	body .wg-choice-breadcrumbs[aria-label] span {
		white-space: nowrap;
	}

	body .wg-breadcrumbs[aria-label] [aria-current="page"],
	body .wg-choice-breadcrumbs[aria-label] [aria-current="page"] {
		overflow: visible;
		text-overflow: clip;
		white-space: nowrap;
	}
}

/* ========================================================================
 * 3.1.57 — professionele sitebrede typografiepolish
 *
 * De 3.1.56 schaal blijft de basis, maar kleur, leesritme en verticale
 * hiërarchie zijn nu exact afgestemd op de rustige koopgids-uitstraling.
 * Geen component- of templatelogica gewijzigd.
 * ======================================================================== */

/* ========================================================================
 * 3.1.56 — globale redactionele typografie
 *
 * De koopgidsen vormen voortaan de typografische referentie voor de hele
 * publieke site. Alleen de typografische schaal, regelhoogte, gewicht en
 * tekstkleur van redactionele titels/tekst worden gelijkgetrokken. Functionele
 * componenten (tabellen, badges, knoppen, filters, productkaarten) behouden
 * hun eigen compacte typografie en layout.
 *
 * Koopgidsen zelf laden na dit centrale contract hun eigen stylesheet en
 * blijven daardoor visueel exact de referentie.
 * ======================================================================== */
:root {
	--wg-type-page-title-size: clamp(32px, 4vw, 44px);
	--wg-type-page-title-weight: 750;
	--wg-type-page-title-line-height: 1.1;
	--wg-type-page-title-tracking: -0.035em;
	--wg-type-intro-size: 16px;
	--wg-type-intro-line-height: 1.72;
	--wg-type-section-title-size: clamp(25px, 3vw, 32px);
	--wg-type-section-title-weight: 700;
	--wg-type-section-title-line-height: 1.2;
	--wg-type-section-title-tracking: -0.025em;
	--wg-type-subtitle-size: 20px;
	--wg-type-subtitle-weight: 700;
	--wg-type-subtitle-line-height: 1.3;
	--wg-type-copy-size: 15px;
	--wg-type-copy-line-height: 1.74;
	--wg-type-copy-color: var(--wg-color-text-muted, #445466);
	--wg-type-strong-weight: 650;
	--wg-type-heading-color: #0b3a6e;
	--wg-type-paragraph-gap: 18px;
	--wg-type-section-gap: 42px;
	--wg-type-section-title-gap: 16px;
}

/* Eén renderwijze / font-stack op alle publieke onderdelen. */
body {
	font-family: var(--wg-font-family, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Paginatitels: koopgids-schaal. De homepage blijft bewust een grotere
 * landingshero en is daarom niet in deze groep opgenomen. */
.wg-page__title,
.wg-hub-hero h1,
.wg-apparaten-hero h1,
.wg-listing-intro h1,
.wg-index-intro h1,
.wg-knowledge-hub__hero h1,
.wg-problem-page__title,
.wg-problem-brand-hub__hero h1,
.wg-apparaat-title,
body.single-kennis .wg-knowledge-hero h1,
body.single-probleem .wg-problem__title {
	color: var(--wg-type-heading-color);
	font-size: var(--wg-type-page-title-size);
	font-weight: var(--wg-type-page-title-weight);
	line-height: var(--wg-type-page-title-line-height);
	letter-spacing: var(--wg-type-page-title-tracking);
}

/* Intro's onder de hoofdtitle. */
.wg-apparaten-intro,
.wg-listing-intro > p,
.wg-index-intro > p,
.wg-problem-page__intro,
.wg-apparaat-intro,
body.single-kennis .wg-knowledge-hero__intro,
body.single-probleem .wg-problem__intro,
.wg-knowledge-hub__hero > p,
.wg-knowledge-hub__hero p {
	color: var(--wg-type-copy-color);
	font-size: var(--wg-type-intro-size);
	line-height: var(--wg-type-intro-line-height);
}

/* Redactionele H2's: dezelfde schaal als de koopgids-sectiekoppen. */
.wg-page__content h2,
.wg-section-heading h2,
.wg-apparaten-section-header h2,
.wg-listing-related-heading h2,
.wg-listing-bottom .wg-listing-editorial__content h2,
.wg-apparaten-index__heading h2,
body.single-kennis .wg-knowledge-text-block > h2,
body.single-kennis .wg-knowledge-content h2,
body.single-kennis .wg-knowledge-faq h2,
body.single-kennis .wg-knowledge-related header h2,
body.single-kennis .wg-knowledge-crosslinks__heading h2,
body.single-probleem .wg-problem-block__heading h2,
body.single-probleem .wg-problem__section h2,
body.single-probleem .wg-related-problems .wg-problem-block__heading h2,
.wg-review-content h2,
.wg-editorial-key-quality h2,
.wg-editorial-conclusion h2 {
	color: var(--wg-type-heading-color);
	font-size: var(--wg-type-section-title-size);
	font-weight: var(--wg-type-section-title-weight);
	line-height: var(--wg-type-section-title-line-height);
	letter-spacing: var(--wg-type-section-title-tracking);
}

/* H3's in lange redactionele tekst. Kaarttitels blijven buiten dit contract. */
.wg-page__content h3,
.wg-listing-bottom .wg-listing-editorial__content h3,
body.single-kennis .wg-knowledge-content h3,
.wg-review-content h3 {
	color: var(--wg-type-heading-color);
	font-size: var(--wg-type-subtitle-size);
	font-weight: var(--wg-type-subtitle-weight);
	line-height: var(--wg-type-subtitle-line-height);
	letter-spacing: -0.015em;
}

/* Lange leestekst. Dit raakt geen producttabellen, badges, filters of CTA's. */
.wg-page__content,
.wg-page__content p,
.wg-page__content li,
.wg-listing-bottom .wg-listing-editorial__content,
.wg-listing-bottom .wg-listing-editorial__content p,
.wg-listing-bottom .wg-listing-editorial__content li,
body.single-kennis .wg-knowledge-content,
body.single-kennis .wg-knowledge-content p,
body.single-kennis .wg-knowledge-content li,
.wg-review-content,
.wg-review-content p,
.wg-review-content li {
	color: var(--wg-type-copy-color);
	font-size: var(--wg-type-copy-size);
	line-height: var(--wg-type-copy-line-height);
}

/* Single Probleem gebruikt veel functionele diagnosekaarten. De uitlegtekst
 * blijft compact, maar krijgt dezelfde basisgrootte en leesritme als een
 * koopgids zonder de kaartkoppen en badges te vergroten. */
body.single-probleem .wg-problem-causes__item p,
body.single-probleem .wg-problem-steps__content p,
body.single-probleem .wg-problem-parts__content p,
body.single-probleem .wg-problem-faq__item > div,
body.single-probleem .wg-problem-block__heading p {
	color: var(--wg-type-copy-color);
	font-size: var(--wg-type-copy-size);
	line-height: 1.72;
}

/* Kennis/probleem samenvattingen sluiten qua schaal aan op de compacte
 * koopgids-intro, zonder de in 3.1.55 gemaakte brede desktoplayout te wijzigen. */
body.single-kennis .wg-knowledge-answer p,
body.single-kennis .wg-knowledge-answer li,
body.single-probleem .wg-problem__summary .wg-problem-answer__text p,
body.single-probleem .wg-problem__summary .wg-problem-answer__text li {
	font-size: 15px;
	line-height: 1.68;
}

body.single-kennis .wg-knowledge-answer h2,
body.single-probleem .wg-problem__summary .wg-problem-answer h2 {
	font-size: 20px;
	font-weight: 750;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

@media (max-width: 720px) {
	:root {
		--wg-type-page-title-size: clamp(29px, 9vw, 36px);
		--wg-type-page-title-line-height: 1.12;
		--wg-type-intro-size: 15px;
		--wg-type-intro-line-height: 1.65;
		--wg-type-section-title-size: 25px;
		--wg-type-copy-size: 15px;
		--wg-type-copy-line-height: 1.70;
	}
}


/* ========================================================================
 * 3.1.57 — leesritme en visuele consistentie
 *
 * Alleen redactionele tekstzones. Tabellen, filters, productkaarten, badges,
 * diagnosekaarten en CTA-componenten behouden hun eigen compacte maatvoering.
 * ======================================================================== */

/* Algemeen: dezelfde koopgids-kleuren voor redactionele tekst. */
.wg-page__content,
.wg-listing-bottom .wg-listing-editorial__content,
body.single-kennis .wg-knowledge-content,
body.single-probleem .wg-problem__section,
.wg-review-content {
	color: var(--wg-type-copy-color);
}

/* Kennis: rustig, voorspelbaar leesritme zonder opnieuw kaarten te maken. */
body.single-kennis .wg-knowledge-text-block,
body.single-kennis .wg-knowledge-text-block:last-child {
	padding-bottom: var(--wg-type-section-gap);
	border-bottom-color: var(--wg-color-border);
}

body.single-kennis .wg-knowledge-text-block + .wg-knowledge-text-block {
	padding-top: var(--wg-type-section-gap);
}

body.single-kennis .wg-knowledge-text-block:last-child {
	padding-bottom: 0;
}

body.single-kennis .wg-knowledge-text-block > h2 {
	margin: 0 0 var(--wg-type-section-title-gap);
	color: var(--wg-type-heading-color);
	font-size: var(--wg-type-section-title-size);
	font-weight: var(--wg-type-section-title-weight);
	line-height: var(--wg-type-section-title-line-height);
	letter-spacing: var(--wg-type-section-title-tracking);
}

body.single-kennis .wg-knowledge-content,
body.single-kennis .wg-knowledge-content p,
body.single-kennis .wg-knowledge-content li {
	color: var(--wg-type-copy-color);
	font-size: var(--wg-type-copy-size);
	line-height: var(--wg-type-copy-line-height);
}

body.single-kennis .wg-knowledge-content p,
body.single-kennis .wg-knowledge-content ul,
body.single-kennis .wg-knowledge-content ol {
	margin-bottom: var(--wg-type-paragraph-gap);
}

body.single-kennis .wg-knowledge-content h3 {
	margin: 30px 0 12px;
	color: var(--wg-type-heading-color);
	font-size: var(--wg-type-subtitle-size);
	font-weight: var(--wg-type-subtitle-weight);
	line-height: var(--wg-type-subtitle-line-height);
	letter-spacing: -0.015em;
}

/* Probleem: gewone uitleg krijgt hetzelfde tekstbeeld; functionele kaarten
 * houden hun bestaande hiërarchie en compacte labels. */
body.single-probleem .wg-problem__section > p,
body.single-probleem .wg-problem__section > ul,
body.single-probleem .wg-problem__section > ol,
body.single-probleem .wg-problem__section > ul li,
body.single-probleem .wg-problem__section > ol li {
	color: var(--wg-type-copy-color);
	font-size: var(--wg-type-copy-size);
	line-height: var(--wg-type-copy-line-height);
}

body.single-probleem .wg-problem__section > h2 {
	margin-top: var(--wg-type-section-gap);
	margin-bottom: var(--wg-type-section-title-gap);
}

body.single-probleem .wg-problem__section > h2:first-child {
	margin-top: 0;
}

/* Intro's en hoofdtitels delen exact dezelfde koopgids-achtige tinten. */
.wg-page__title,
.wg-hub-hero h1,
.wg-apparaten-hero h1,
.wg-listing-intro h1,
.wg-index-intro h1,
.wg-knowledge-hub__hero h1,
.wg-problem-page__title,
.wg-problem-brand-hub__hero h1,
.wg-apparaat-title,
body.single-kennis .wg-knowledge-hero h1,
body.single-probleem .wg-problem__title {
	color: var(--wg-type-heading-color);
}

.wg-apparaten-intro,
.wg-listing-intro > p,
.wg-index-intro > p,
.wg-problem-page__intro,
.wg-apparaat-intro,
body.single-kennis .wg-knowledge-hero__intro,
body.single-probleem .wg-problem__intro,
.wg-knowledge-hub__hero > p,
.wg-knowledge-hub__hero p {
	color: var(--wg-type-copy-color);
}

@media (max-width: 720px) {
	:root {
		--wg-type-paragraph-gap: 17px;
		--wg-type-section-gap: 30px;
		--wg-type-section-title-gap: 14px;
	}

	body.single-kennis .wg-knowledge-content,
	body.single-kennis .wg-knowledge-content p,
	body.single-kennis .wg-knowledge-content li,
	body.single-probleem .wg-problem__section > p,
	body.single-probleem .wg-problem__section > ul li,
	body.single-probleem .wg-problem__section > ol li {
		font-size: var(--wg-type-copy-size);
		line-height: var(--wg-type-copy-line-height);
	}
}

/* ================================================================
   3.1.83 — Mobiel: H2 zichtbaar dichter op bijbehorende tekst
   Dit staat bewust in het centrale design-system, omdat dat bestand ná
   kennis.css en 02-problem.css wordt geladen. Alleen single Kennis en
   single Probleem op mobiel; de ruimte bóven secties blijft ongemoeid.
   ================================================================ */
@media (max-width: 720px) {
    /* Kennis: H2 -> contentwrapper -> eerste tekst. */
    body.single-kennis .wg-knowledge-text-block > h2 {
        margin-bottom: 6px;
    }

    body.single-kennis .wg-knowledge-text-block > h2 + .wg-knowledge-content {
        margin-top: 0;
    }

    body.single-kennis .wg-knowledge-text-block > h2 + .wg-knowledge-content > :first-child {
        margin-top: 0;
    }

    /* Probleem: zowel gewone sectiekoppen als de aparte headingwrappers. */
    body.single-probleem .wg-problem__section > h2,
    body.single-probleem .wg-problem-block__heading h2,
    body.single-probleem .wg-problem-steps__heading h2,
    body.single-probleem .wg-problem-parts__heading h2,
    body.single-probleem .wg-problem-faq__heading h2 {
        margin-bottom: 6px;
    }

    body.single-probleem .wg-problem-block__heading,
    body.single-probleem .wg-problem-steps__heading,
    body.single-probleem .wg-problem-parts__heading,
    body.single-probleem .wg-problem-faq__heading {
        margin-bottom: 6px;
    }

    body.single-probleem .wg-problem-block__heading h2 + p,
    body.single-probleem .wg-problem-steps__heading h2 + p,
    body.single-probleem .wg-problem-parts__heading h2 + p,
    body.single-probleem .wg-problem-faq__heading h2 + p {
        margin-top: 0;
    }
}


/* ================================================================
   3.1.85 — Mobiel: Direct antwoord compacter kopritme
   Alleen single Kennis en single Probleem. Label dichter op H2 en
   H2 dichter op de antwoordtekst; overige spacing blijft behouden.
   ================================================================ */
@media (max-width: 720px) {
    body.single-kennis .wg-knowledge-answer__body > span,
    body.single-probleem .wg-problem-answer__label {
        margin-bottom: 1px;
        line-height: 1.15;
    }

    body.single-kennis .wg-knowledge-answer h2,
    body.single-probleem .wg-problem__summary .wg-problem-answer h2 {
        margin-top: 0;
        margin-bottom: 3px;
    }

    body.single-kennis .wg-knowledge-answer__text,
    body.single-probleem .wg-problem__summary .wg-problem-answer__text {
        margin-top: 8px;
    }

    body.single-kennis .wg-knowledge-answer__text > :first-child,
    body.single-probleem .wg-problem__summary .wg-problem-answer__text > :first-child {
        margin-top: 0;
    }
}


/* ================================================================
   3.1.88 — Mobiel: echte buitenruimte rond BOVENSTE Direct antwoord
   De zichtbare afstand wordt bij Kennis niet door margin op de kaart,
   maar door .wg-knowledge-summary (boven) en .wg-knowledge-layout
   (onder) bepaald. Bij Problemen wordt de summary-wrapper gebruikt.
   Alleen mobiel; desktop en het grote keuzehulpblok verderop blijven
   volledig ongemoeid.
   ================================================================ */
@media (max-width: 720px) {
    /* KENNIS
       Boven: hero -> Direct antwoord.
       Onder: Direct antwoord -> eerste inhoudssectie. */
    body.single-kennis .wg-knowledge-container.wg-knowledge-summary {
        padding-top: 40px !important;
    }

    body.single-kennis .wg-knowledge-container.wg-knowledge-layout {
        padding-top: 38px !important;
    }

    /* PROBLEMEN
       Extra ruimte rondom de summary-wrapper, niet in de kaart zelf. */
    body.single-probleem .wg-problem__container.wg-problem__summary {
        padding-top: 24px !important;
        margin-bottom: 34px !important;
    }

    /* Voorkom dat een margin op de kaart zelf de ruimte weer laat
       samenvallen/collapsen; de wrapper bepaalt hem nu volledig. */
    body.single-kennis .wg-knowledge-summary > .wg-knowledge-answer,
    body.single-probleem .wg-problem__summary > .wg-problem-answer {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}


/* ================================================================
   3.1.89 — Mobiel H1 Kennis & Problemen 30px
   Alleen single kennispagina's en single probleempagina's.
   Desktop, koopgidsen en andere templates blijven ongemoeid.
   ================================================================ */
@media (max-width: 720px) {
    body.single-kennis .wg-knowledge-hero h1,
    body.single-kennis .wg-knowledge-title,
    body.single-probleem .wg-problem-hero h1,
    body.single-probleem .wg-problem__title {
        font-size: 30px !important;
        line-height: 1.12 !important;
    }
}


/* ================================================================
   3.1.90 — Desktop hero-copy iets verder naar links
   Alleen Kennis- en Probleempagina's op desktop.
   De linker hero-copy krijgt 36px extra ruimte aan de linkerkant,
   terwijl de rechterrand van de copy gelijk blijft. Daardoor blijft
   de hero-afbeelding exact op zijn bestaande positie.
   ================================================================ */
@media (min-width: 1100px) {
    /* Kennis: chips + H1 + intro breder naar links, afbeelding ongemoeid. */
    body.single-kennis .wg-knowledge-hero__content {
        margin-left: -36px;
        width: calc(100% + 36px);
        max-width: calc(650px + 36px);
    }

    /* Bij niet-featured kennishero's mag dezelfde redactionele breedte
       gelden zonder de rechterkolom/visual te verplaatsen. */
    body.single-kennis .wg-knowledge-hero__grid:not(.wg-knowledge-hero__grid--featured) .wg-knowledge-hero__content {
        max-width: calc(780px + 36px);
    }

    /* Problemen: alleen de copy-kolom groeit naar links.
       Grid en visual-kolom blijven exact staan. */
    body.single-probleem .wg-problem__hero-content {
        margin-left: -36px;
        width: calc(100% + 36px);
    }
}


/* ================================================================
   3.1.91 — Desktop hero-copy alleen naar RECHTS verbreden
   Correctie op 3.1.90:
   - linker uitlijning blijft exact zoals origineel;
   - alleen de rechterkant van het tekstblok wordt breder;
   - hero-afbeelding/rechterkolom blijft exact staan.
   ================================================================ */
@media (min-width: 1100px) {
    body.single-kennis .wg-knowledge-hero__content {
        margin-left: 0 !important;
        width: calc(100% + 120px) !important;
        max-width: 770px !important;
    }

    body.single-kennis .wg-knowledge-hero__grid:not(.wg-knowledge-hero__grid--featured) .wg-knowledge-hero__content {
        margin-left: 0 !important;
        width: calc(100% + 120px) !important;
        max-width: 900px !important;
    }

    body.single-probleem .wg-problem__hero-content {
        margin-left: 0 !important;
        width: calc(100% + 120px) !important;
        max-width: 770px !important;
    }
}


/* ================================================================
   3.1.92 — Desktop hero: wazige beeldfade verwijderen
   Alleen Kennis- en Probleempagina's op desktop.
   De brede mist/gradient over de linkerkant en onderkant van de
   hero-afbeelding wordt uitgeschakeld. De afbeelding, tekstpositie
   en kolombreedtes blijven exact staan. Mobiel blijft ongewijzigd.
   ================================================================ */
@media (min-width: 981px) {
    body.single-kennis .wg-editorial-hero-media--featured::before,
    body.single-kennis .wg-editorial-hero-media--featured::after,
    body.single-probleem .wg-editorial-hero-media--featured::before,
    body.single-probleem .wg-editorial-hero-media--featured::after,
    body.single-probleem .wg-editorial-hero-media--faultcode-default::before,
    body.single-probleem .wg-editorial-hero-media--faultcode-default::after {
        content: none !important;
        display: none !important;
        background: none !important;
    }
}


/* ================================================================
   3.1.93 — Desktop hero: smalle subtiele overgang 24px
   Alleen Kennis- en Probleempagina's op desktop.
   Mobiel blijft volledig ongewijzigd.
   ================================================================ */
@media (min-width: 981px) {

    /* KENNISPAGINA'S */
    body.single-kennis .wg-editorial-hero-media--featured {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        --wg-hero-fade-width: 24px;
    }

    body.single-kennis .wg-editorial-hero-media--featured > img {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: none !important;
    }

    /* Geen brede oude fade; alleen deze smalle overgang */
    body.single-kennis .wg-editorial-hero-media--featured::after {
        content: none !important;
        display: none !important;
        background: none !important;
    }

    body.single-kennis .wg-editorial-hero-media--featured::before {
        content: "" !important;
        display: block !important;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--wg-hero-fade-width);
        z-index: 3;
        pointer-events: none;
        background: linear-gradient(
            to right,
            rgba(239, 246, 249, 1) 0%,
            rgba(239, 246, 249, 0.82) 32%,
            rgba(239, 246, 249, 0.48) 62%,
            rgba(239, 246, 249, 0) 100%
        ) !important;
    }

    /* PROBLEEMPAGINA'S + FOUTCODES */
    body.single-probleem .wg-editorial-hero-media--featured,
    body.single-probleem .wg-editorial-hero-media--faultcode-default {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        --wg-hero-fade-width: 24px;
    }

    body.single-probleem .wg-editorial-hero-media--featured > img,
    body.single-probleem .wg-editorial-hero-media--faultcode-default > img {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: none !important;
    }

    body.single-probleem .wg-editorial-hero-media--featured::after,
    body.single-probleem .wg-editorial-hero-media--faultcode-default::after {
        content: none !important;
        display: none !important;
        background: none !important;
    }

    body.single-probleem .wg-editorial-hero-media--featured::before,
    body.single-probleem .wg-editorial-hero-media--faultcode-default::before {
        content: "" !important;
        display: block !important;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--wg-hero-fade-width);
        z-index: 3;
        pointer-events: none;
        background: linear-gradient(
            to right,
            rgba(239, 246, 249, 1) 0%,
            rgba(239, 246, 249, 0.82) 32%,
            rgba(239, 246, 249, 0.48) 62%,
            rgba(239, 246, 249, 0) 100%
        ) !important;
    }
}


/* ================================================================
   3.1.95 — Desktop featured hero: echte 62/38-verhouding
   Belangrijk: deze hero gebruikt op desktop GEEN CSS-gridverdeling.
   De afbeelding staat absoluut rechts. Daarom sturen we hier de echte
   beeldbreedte + gereserveerde tekstruimte aan, zonder de hero hoger
   te maken. Mobiel blijft volledig ongewijzigd.
   ================================================================ */
@media (min-width: 1100px) {

    /* ---------------- KENNISPAGINA'S ---------------- */

    /* Reserveer rechts ca. 38% van de viewport voor het beeld.
       De linkerpositie van de content blijft exact gelijk. */
    body.single-kennis .wg-knowledge-hero__grid--featured {
        display: block !important;
        padding-right: min(38vw, 720px) !important;
    }

    /* De foto zelf wordt echt smaller; hij blijft aan de rechterrand staan. */
    body.single-kennis .wg-knowledge-hero__visual--featured {
        width: min(38vw, 720px) !important;
        left: auto !important;
        right: 0 !important;
    }

    /* Laat de bestaande 3.1.91 tekstbreedte intact.
       Dit voorkomt de extra regelafbreking / hogere hero uit 3.1.94. */
    body.single-kennis .wg-knowledge-hero__grid--featured .wg-knowledge-hero__content {
        width: calc(100% + 120px) !important;
        max-width: 770px !important;
        margin-left: 0 !important;
    }


    /* ---------------- PROBLEEMPAGINA'S ---------------- */

    body.single-probleem .wg-problem__hero-grid--featured,
    body.single-probleem .wg-problem__hero-grid--washer.wg-problem__hero-grid--featured,
    body.single-probleem .wg-problem__hero-grid--washer.wg-problem__hero-grid--faultcode.wg-problem__hero-grid--featured {
        display: block !important;
        padding-right: min(38vw, 720px) !important;
    }

    body.single-probleem .wg-problem__visual--featured,
    body.single-probleem .wg-problem__hero-grid--faultcode .wg-problem__visual--featured {
        width: min(38vw, 720px) !important;
        left: auto !important;
        right: 0 !important;
    }

    body.single-probleem .wg-problem__hero-grid--featured .wg-problem__hero-content {
        width: calc(100% + 120px) !important;
        max-width: 770px !important;
        margin-left: 0 !important;
    }
}


/* ========================================================================
 * 3.1.97 — globale typografie- en contrastpolish
 *
 * Rustigere redactionele hiërarchie over de volledige publieke site:
 * - bodycopy iets donkerder en neutraler;
 * - secundaire tekst/breadcrumbs beter leesbaar;
 * - H2/H3 in lange redactionele zones iets minder zwaar dan H1;
 * - nadruk in lopende tekst op 650 i.p.v. een harde 700.
 *
 * H1, CTA's, badges, productlabels, prijzen en functionele kaarttitels
 * blijven bewust buiten deze polish.
 * ======================================================================== */

/* Paginaspecifieke teksttokens aansluiten op het centrale palet. */
body.single-koopgids,
body.post-type-archive-koopgids {
    --wg-guide-copy: var(--wg-color-text-muted, #445466);
    --wg-guide-muted: var(--wg-color-text-subtle, #66768a);
}

body.wg-problem-hub-layout .wg-problem-page {
    --wg-problem-muted: var(--wg-color-text-muted, #445466);
}

.wg-apparaat-page {
    --wg-muted: var(--wg-color-text-subtle, #66768a);
}

/* Homepage: alleen beschrijvende copy, nooit CTA- of kaartkopkleuren. */
body.home .wg-home-hero__text,
body.home .wg-section-heading__text,
body.home .wg-home-direction-card p,
body.home .wg-home-empty-message {
    color: var(--wg-color-text-muted, #445466);
}

/* Apparaten: intro en lange redactionele tekst volgen dezelfde leestoon. */
body.single-apparaat .wg-apparaat-intro,
body.single-apparaat .wg-review-content,
body.single-apparaat .wg-editorial-intro,
body.single-apparaat .wg-editorial-key-quality__text,
body.single-apparaat .wg-editorial-conclusion p {
    color: var(--wg-color-text-muted, #445466);
}

/* H2: duidelijk onder H1, zonder de functionele kaartkoppen lichter te maken. */
.wg-page__content h2,
.wg-section-heading__title,
.wg-apparaten-section-header h2,
.wg-listing-related-heading h2,
.wg-listing-bottom .wg-listing-editorial__content h2,
.wg-apparaten-index__heading h2,
.wg-problem-section-heading h2,
.wg-problem-process__intro h2,
.wg-problem-device-next__content h2,
.wg-knowledge-hub__section > header h2,
.wg-guides-hub__section-heading h2,
.wg-guides-hub__structure h2,
body.single-kennis .wg-knowledge-text-block > h2,
body.single-kennis .wg-knowledge-content h2,
body.single-kennis .wg-knowledge-faq h2,
body.single-kennis .wg-knowledge-related header h2,
body.single-kennis .wg-knowledge-crosslinks__heading h2,
body.single-probleem .wg-problem-block__heading h2,
body.single-probleem .wg-problem__section h2,
body.single-probleem .wg-related-problems .wg-problem-block__heading h2,
body.single-koopgids .wg-koopgids__section-title,
body.single-koopgids .wg-koopgids-editorial__title,
body.single-koopgids .wg-koopgids-comparison__title,
body.single-koopgids .wg-koopgids-conclusion__title,
body.single-koopgids .wg-koopgids-faq h2,
body.single-koopgids .wg-koopgids-related h2,
body.single-koopgids .wg-koopgids-author h2,
body.single-koopgids .wg-koopgids-auto-related h2,
body.single-apparaat .wg-review-content h2,
body.single-apparaat .wg-editorial-key-quality h2,
body.single-apparaat .wg-editorial-conclusion h2 {
    color: var(--wg-type-heading-color, #0b3a6e);
    font-weight: var(--wg-type-section-title-weight, 700);
}

/* H3 alleen in echte leestekst; product- en diagnosekaarttitels blijven staan. */
.wg-page__content h3,
.wg-listing-bottom .wg-listing-editorial__content h3,
body.single-kennis .wg-knowledge-content h3,
body.single-probleem .wg-problem__section > h3,
body.single-apparaat .wg-review-content h3 {
    color: var(--wg-type-heading-color, #0b3a6e);
    font-weight: var(--wg-type-subtitle-weight, 700);
}

/* Nadruk in lopende tekst: zichtbaar, maar minder zwart/zwaar. */
.wg-page__content :is(p, li) :is(strong, b),
.wg-listing-bottom .wg-listing-editorial__content :is(p, li) :is(strong, b),
body.single-kennis .wg-knowledge-content :is(p, li) :is(strong, b),
body.single-kennis .wg-knowledge-answer :is(p, li) :is(strong, b),
body.single-probleem .wg-problem__section :is(p, li) :is(strong, b),
body.single-probleem .wg-problem-answer__text :is(p, li) :is(strong, b),
body.single-probleem .wg-problem-causes__item p :is(strong, b),
body.single-probleem .wg-problem-steps__content p :is(strong, b),
body.single-koopgids .wg-koopgids__intro-text :is(p, li) :is(strong, b),
body.single-koopgids .wg-koopgids__method-text :is(p, li) :is(strong, b),
body.single-koopgids .wg-koopgids-editorial__text :is(p, li) :is(strong, b),
body.single-koopgids .wg-koopgids-conclusion__text :is(p, li) :is(strong, b),
body.single-koopgids .wg-koopgids-page__editor-content :is(p, li) :is(strong, b),
body.single-apparaat .wg-review-content :is(p, li) :is(strong, b),
body.single-apparaat .wg-editorial-intro :is(p, li) :is(strong, b),
body.single-apparaat .wg-editorial-key-quality__text :is(p, li) :is(strong, b),
body.single-apparaat .wg-editorial-conclusion :is(p, li) :is(strong, b) {
    font-weight: var(--wg-type-strong-weight, 650);
}