/*
 * 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: 6px;
		margin-bottom: var(--wg-page-breadcrumb-gap-mobile);
		font-size: 12px;
	}

	.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, #7a8598);
	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: #536176;
	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, #647084);
}

/*
 * 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: 6px;
		overflow-x: auto;
		overflow-y: hidden;
		font-size: 11.5px;
		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;
	}
}

/* v123 — compact visueel energielabel voor apparaatpagina's. */
.wdg-energy-label{--wdg-energy-color:#008c4a;display:inline-flex;align-items:center;vertical-align:middle;min-width:0;line-height:1;white-space:nowrap;filter:drop-shadow(0 1px 1px rgba(7,29,23,.12))}
.wdg-energy-label__scale{position:relative;box-sizing:border-box;display:block;width:10px;height:24px;border:1px solid #9eaaa5;border-right:0;border-radius:2px 0 0 2px;background:#fff;color:#14241f}
.wdg-energy-label__scale::before,.wdg-energy-label__scale::after{position:absolute;left:0;width:100%;text-align:center;font-size:5px;font-weight:800;line-height:1}
.wdg-energy-label__scale::before{content:"A";top:3px}.wdg-energy-label__scale::after{content:"G";bottom:3px}
.wdg-energy-label__arrow{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:2px;width:29px;height:24px;padding:2px 3px 2px 5px;border:1px solid rgba(6,33,24,.38);border-right:0;background:var(--wdg-energy-color);color:#fff;font-weight:900}
.wdg-energy-label--extended .wdg-energy-label__arrow{width:39px}
.wdg-energy-label__arrow::after{content:"";position:absolute;z-index:-1;top:2px;right:-9px;width:18px;height:18px;border-top:1px solid rgba(6,33,24,.38);border-right:1px solid rgba(6,33,24,.38);border-radius:1px;background:var(--wdg-energy-color);transform:rotate(45deg)}
.wdg-energy-label__arrow b{position:relative;z-index:1;font-size:13px;line-height:1;color:inherit}.wdg-energy-label__arrow small{position:relative;z-index:1;font-size:6px;font-weight:900;line-height:1;color:inherit}
.wdg-energy-label--a{--wdg-energy-color:#008c4a}.wdg-energy-label--b{--wdg-energy-color:#56aa39}.wdg-energy-label--c{--wdg-energy-color:#c7d72c}.wdg-energy-label--d{--wdg-energy-color:#f1d42b}.wdg-energy-label--e{--wdg-energy-color:#f5a623}.wdg-energy-label--f{--wdg-energy-color:#ed6a2c}.wdg-energy-label--g{--wdg-energy-color:#d43c2f}
.wdg-energy-label--c .wdg-energy-label__arrow,.wdg-energy-label--d .wdg-energy-label__arrow,.wdg-energy-label--e .wdg-energy-label__arrow{color:#13251f}
.wdg-energy-label--small{transform:scale(.88);transform-origin:left center;margin:-2px 2px -2px 0}.wdg-energy-label--large{transform:scale(1.08);transform-origin:left center;margin:1px 6px 1px 0}
.wg-hero-spec__value .wdg-energy-label,.wg-specification-row strong .wdg-energy-label,.wg-comparison-table td .wdg-energy-label{margin-right:10px}
@media(max-width:767px){.wdg-energy-label--small{transform:scale(.92)}.wdg-energy-label--large{transform:scale(1)}}