/*
 * Content pages: posts, pages, blog archives.
 *
 * Everything blog-specific is scoped to .single-post / .hs-blog-index so it can
 * never reach the header, footer or another template (CLAUDE.md).
 */

/* -------------------------------------------------------------------------
 * Blog listing (/blog/, category and search archives) and the related
 * articles under a post.
 *
 * Redesign 27-10-2026 (Janyar). Typographic on purpose: none of the 47
 * imported articles has a picture (no featured image, no image in the text),
 * so the type and the rhythm carry the page. The newest article opens the
 * first page as a lead panel (template-parts/blog/feature.php) with its own
 * section headings where a photo would be; the rest are cards on a hairline
 * with date and reading time on top, the title, a three-line excerpt and
 * "Lees verder" on the bottom edge. A featured image, once set, sits on top of
 * its card. A card left alone on the last row takes the whole row.
 *
 * Before: the old blog's Elementor "cards" skin, measured 11-10-2026 — three
 * columns, white cards with a 10px shadow, Poppins 20 teal titles, a 50-word
 * excerpt cut without an ellipsis, "LEES VERDER »", the date in a footer strip.
 *
 * Everything is scoped to .hs-blog-index / .hs-related / .hs-post-card /
 * .hs-post-lead, names no other stylesheet uses, so nothing here can reach the
 * global chrome.
 * ---------------------------------------------------------------------- */
.hs-blog-index {
	/* Flush with the band's title, not the 10px-inset product column .wrap
	 * gives on desktop. */
	padding-inline: var(--hs-gutter);
	padding-top: var(--sp-6);
	padding-bottom: var(--sp-16);
}

.hs-blog-index__intro {
	max-width: 68ch;
	margin-bottom: var(--sp-10);
	color: var(--fg-2);
}

/* --- shared meta line: date, then the reading time with a clock --- */
.hs-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-1) var(--sp-4);
	margin: 0;
	color: var(--fg-3);
	font-size: var(--fs-14);
	line-height: var(--lh-snug);
}

.hs-post-card__time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.hs-post-card__time .hs-icon {
	width: 14px;
	height: 14px;
	color: var(--accent);
}

/* --- the lead story --- */
.hs-post-lead {
	position: relative;
	display: grid;
	gap: var(--sp-8);
	margin-bottom: clamp(var(--sp-10), 5vw, var(--sp-16));
	padding: clamp(var(--sp-6), 4vw, var(--sp-12));
	overflow: hidden;
	border-radius: var(--r-xl);
	background: var(--hs-mint);
	box-shadow: var(--shadow-2);
	transition: box-shadow var(--dur-base) var(--ease-out);
}

@media (min-width: 62em) {
	.hs-post-lead {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: clamp(var(--sp-10), 5vw, var(--sp-20));
		align-items: center;
	}

	/* With a photo: photo left, half the card, edge to edge; text right. */
	.hs-post-lead--media {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}
}

.hs-post-lead--media {
	gap: 0;
	padding: 0;
}

.hs-post-lead--media .hs-post-lead__body {
	align-content: center;
	padding: clamp(var(--sp-6), 4vw, var(--sp-12));
}

.hs-post-lead:hover {
	box-shadow: 0 24px 48px -32px rgba(1, 82, 97, .55);
}

.hs-post-lead__body {
	display: grid;
	justify-items: start;
	gap: var(--sp-4);
}

.hs-post-lead .hs-post-card__meta {
	color: var(--fg-2);
}

.hs-post-lead__title {
	margin: 0;
	max-width: 22ch;
	font-family: var(--font-display);
	font-size: clamp(var(--fs-24), 2.6vw, var(--fs-38));
	font-weight: var(--fw-bold);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* Teal on mint is 3,68:1: large text only, which a 28px+ bold title is. */
.hs-post-lead__title a {
	color: var(--heading-color);
	text-decoration: none;
}

.hs-post-lead__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.hs-post-lead:has(.hs-post-lead__title a:focus-visible) {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
}

.hs-post-lead__excerpt {
	max-width: 58ch;
	margin: 0;
	color: var(--fg-1);
	font-size: var(--fs-18);
	line-height: 1.6;
	text-wrap: pretty;
}

.hs-post-lead__more,
.hs-post-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--accent-text);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	letter-spacing: normal;
}

.hs-post-lead__more {
	margin-top: var(--sp-2);
	padding: 12px var(--sp-5);
	border-radius: var(--r-lg);
	background: var(--accent-fill);
	color: var(--fg-on-brand);
	font-family: var(--font-sans);
	transition: background var(--dur-base) var(--ease-standard);
}

.hs-post-lead:hover .hs-post-lead__more {
	background: var(--accent-fill-hover);
}

.hs-post-lead__more .hs-icon,
.hs-post-card__more .hs-icon {
	width: 14px;
	height: 14px;
	transition: transform var(--dur-base) var(--ease-out);
}

.hs-post-lead:hover .hs-post-lead__more .hs-icon,
.hs-post-card:hover .hs-post-card__more .hs-icon {
	transform: translateX(3px);
}

/* "In dit artikel": the article's own first section headings, on white. */
.hs-post-lead__points {
	padding: clamp(var(--sp-5), 2.5vw, var(--sp-8));
	border-radius: var(--r-xl);
	background: var(--bg-1);
	box-shadow: 0 1px 2px rgba(1, 82, 97, .06);
}

.hs-post-lead__points-title {
	margin: 0 0 var(--sp-3);
	color: var(--heading-color-sm);
	font-family: var(--font-display);
	font-size: var(--fs-16);
	font-weight: var(--fw-bold);
}

.hs-post-lead__points ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: hs-lead;
}

.hs-post-lead__points li {
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr);
	gap: var(--sp-2);
	padding: var(--sp-3) 0;
	border-top: 1px solid var(--border-2);
	color: var(--fg-1);
	font-size: var(--fs-15);
	line-height: 1.45;
	counter-increment: hs-lead;
}

/* The numbers are real: these are the article's sections in reading order. */
.hs-post-lead__points li::before {
	content: counter(hs-lead);
	display: inline-grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--r-pill);
	background: var(--hs-mint);
	color: var(--accent-text);
	font-size: var(--fs-12);
	font-weight: var(--fw-bold);
}

.hs-post-lead__media {
	margin: 0;
}

.hs-post-lead__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 16rem;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* --- topic chips + blog search, under the lead story --- */
.hs-blog-toolbar {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-8);
}

.hs-blog-topics {
	flex: 1;
	min-width: 0;
}

/* One row that scrolls sideways on a phone rather than wrapping into a block. */
.hs-blog-topics ul {
	display: flex;
	gap: var(--sp-2);
	margin: 0;
	padding: 2px;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.hs-blog-topics a {
	display: block;
	padding: 8px var(--sp-4);
	border: 1px solid var(--border-1);
	border-radius: var(--r-pill);
	color: var(--fg-2);
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	white-space: nowrap;
	text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

.hs-blog-topics a:hover {
	border-color: var(--hs-teal-200);
	color: var(--accent-text);
}

.hs-blog-topics a[aria-current] {
	border-color: var(--accent-fill);
	background: var(--accent-fill);
	color: var(--fg-on-brand);
}

.hs-blog-search {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	margin-left: auto;
	border: 1px solid var(--border-1);
	border-radius: var(--r-pill);
	background: var(--bg-1);
}

.hs-blog-search__input {
	width: min(16rem, 50vw);
	padding: 8px 0 8px var(--sp-4);
	border: 0;
	background: none;
	font-size: var(--fs-14);
	transition: width var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out);
}

.hs-blog-search__input:focus {
	outline: none;
}

.hs-blog-search:focus-within {
	border-color: var(--accent-fill);
}

/* Folded behind its icon until clicked (main.js adds the class, so without
 * JavaScript the field simply stays open). */
.hs-blog-search.is-folded .hs-blog-search__input {
	width: 0;
	padding-inline: 0;
}

.hs-blog-search__btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: none;
	color: var(--fg-1);
	cursor: pointer;
}

.hs-blog-search__btn .hs-icon {
	width: 18px;
	height: 18px;
}

.hs-blog-search__btn:hover {
	color: var(--accent-text);
}

/* --- the card grid --- */
.hs-post-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-5);
}

@media (min-width: 768px) {
	.hs-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-6);
	}
}

/* A strict grid: a short last row stays short, no card stretches over it. */
@media (min-width: 1025px) {
	.hs-blog-index {
		padding-top: var(--sp-8);
	}

	.hs-post-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.hs-post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--border-1);
	border-radius: var(--r-xl);
	background: var(--bg-1);
	box-shadow: var(--shadow-1);
	transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

/* Topic label, on the right of the meta line. */
.hs-post-card__topic {
	margin-left: auto;
	padding: 2px var(--sp-2);
	border-radius: var(--r-sm);
	background: var(--accent-soft);
	color: var(--accent-text);
	font-size: var(--fs-12);
	font-weight: var(--fw-bold);
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* On the lead story the label follows the reading time instead (Janyar, 29-10-2026). */
.hs-post-lead .hs-post-card__topic {
	margin-left: 0;
	background: var(--bg-1);
}

.hs-post-card:hover {
	border-color: var(--hs-teal-200);
	box-shadow: 0 18px 36px -28px rgba(1, 82, 97, .55);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.hs-post-card:hover {
		transform: translateY(-2px);
	}
}

.hs-post-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.hs-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-6);
}

.hs-post-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-20);
	font-weight: var(--fw-bold);
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.hs-post-card__title a {
	color: var(--fg-1);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-standard);
}

.hs-post-card:hover .hs-post-card__title a {
	color: var(--accent-text);
}

.hs-post-card__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--fg-2);
	font-size: var(--fs-15);
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.hs-post-card__more {
	margin-top: auto;
	padding-top: var(--sp-2);
	font-size: var(--fs-15);
}

/* The whole card is the title link's hit area. The media link above it stays
 * (keyboard-skipped, aria-hidden) but is covered, so one click target remains. */
.hs-post-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.hs-post-card:has(.hs-post-card__title a:focus-visible) {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* "Vorige / Volgende" under the grid, as buttons. */
.hs-blog-pager {
	display: flex;
	justify-content: center;
	gap: var(--sp-3);
	margin-top: var(--sp-10);
	color: var(--fg-3);
}

.hs-blog-pager a,
.hs-blog-pager span {
	padding: 10px var(--sp-5);
	border: 1px solid var(--border-1);
	border-radius: var(--r-lg);
	font-weight: var(--fw-bold);
}

.hs-blog-pager a {
	color: var(--accent-text);
	text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}

.hs-blog-pager a:hover {
	border-color: var(--accent);
	background: var(--hs-teal-50);
}

.hs-blog-pager span {
	opacity: .55;
}

/* -------------------------------------------------------------------------
 * Single article. Redesign 27-10-2026 (Janyar): a reading page. Breadcrumb,
 * then date and reading time above the title; the text at a reading measure in
 * Lato 18/1.75; the table of contents in its own sticky column on the left
 * from 75em (above the text below that); the side blocks on the right from
 * 62em. Before: the old Elementor article template — a 980px column, a TOC box
 * above the text, the 400px sidebar of tinted blocks.
 * ---------------------------------------------------------------------- */
.single-post .hs-article-wrap {
	padding-top: var(--sp-6);
	padding-bottom: var(--sp-12);
}

/* Room between the breadcrumb and the article (Janyar, 29-10-2026). */
.single-post .hs-article-wrap > .hs-crumbs {
	margin-bottom: clamp(var(--sp-8), 4vw, var(--sp-12));
}

.single-post .hs-article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-12);
	align-items: start;
}

.single-post .hs-article {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: 46rem;
}

.single-post .hs-article__head {
	display: grid;
	gap: var(--sp-4);
	margin-bottom: var(--sp-8);
}

.single-post .hs-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-5);
	margin: 0;
	color: var(--fg-3);
	font-size: var(--fs-14);
}

.single-post .hs-article__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.single-post .hs-article__meta .hs-icon {
	width: 16px;
	height: 16px;
	color: var(--accent);
}

.single-post .hs-article__title {
	margin: 0;
	max-width: 24ch;
	font-family: var(--font-display);
	font-size: clamp(var(--fs-28), 2.6vw, var(--fs-38)); /* was up to 48px; Janyar 29-10-2026 */
	font-weight: var(--fw-bold);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--heading-color);
	text-wrap: balance;
}

.single-post .hs-article__media {
	margin: 0 0 var(--sp-8);
}

.single-post .hs-article__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-xl);
}

/* The text. */
.single-post .hs-article .entry-content {
	max-width: 68ch;
	color: var(--fg-1);
	font-size: var(--fs-18);
	line-height: 1.75;
}

.single-post .hs-article .entry-content > :first-child {
	margin-top: 0;
}

.single-post .hs-article .entry-content p,
.single-post .hs-article .entry-content ul,
.single-post .hs-article .entry-content ol {
	margin: 0 0 var(--sp-5);
}

.single-post .hs-article .entry-content ul,
.single-post .hs-article .entry-content ol {
	padding-left: 1.25em;
}

.single-post .hs-article .entry-content li {
	margin-bottom: var(--sp-2);
	padding-left: var(--sp-1);
}

.single-post .hs-article .entry-content li::marker {
	color: var(--accent);
	font-weight: var(--fw-bold);
}

.single-post .hs-article .entry-content h2 {
	margin: var(--sp-12) 0 var(--sp-4);
	font-family: var(--font-display);
	font-size: clamp(var(--fs-24), 2.4vw, var(--fs-32));
	font-weight: var(--fw-bold);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--heading-color);
	text-wrap: balance;
	scroll-margin-top: calc(var(--hs-topbar-h) + var(--hs-header-h) + var(--sp-6));
}

.single-post .hs-article .entry-content h3 {
	margin: var(--sp-8) 0 var(--sp-3);
	font-family: var(--font-display);
	font-size: var(--fs-20);
	font-weight: var(--fw-bold);
	line-height: 1.3;
	color: var(--heading-color-sm);
	scroll-margin-top: calc(var(--hs-topbar-h) + var(--hs-header-h) + var(--sp-6));
}

.single-post .hs-article .entry-content a {
	color: var(--accent-text);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.single-post .hs-article .entry-content a:hover {
	color: var(--accent-press);
}

.single-post .hs-article .entry-content strong {
	color: var(--hs-ink);
}

.single-post .hs-article .entry-content blockquote {
	margin: var(--sp-8) 0;
	padding: var(--sp-5) var(--sp-6);
	border-radius: var(--r-xl);
	background: var(--hs-mint);
	font-size: var(--fs-18);
}

/* Desktop: the TOC in a sticky column left of the text, the side blocks on
 * the right. */
@media (min-width: 62em) {
	.single-post .hs-article-layout {
		grid-template-columns: minmax(0, 1fr) 18.75rem;
		column-gap: clamp(var(--sp-10), 4vw, var(--sp-16));
	}

	.single-post .hs-article {
		max-width: none;
	}
}

@media (min-width: 75em) {
	.single-post .hs-article {
		grid-template-columns: 13.75rem minmax(0, 1fr);
		column-gap: clamp(var(--sp-10), 3.5vw, var(--sp-16));
	}

	.single-post .hs-article > * {
		grid-column: 2;
	}

	.single-post .hs-article > .hs-toc {
		grid-column: 1;
		grid-row: 1 / span 3;
		position: sticky;
		top: calc(var(--hs-topbar-h) + var(--hs-header-h) + var(--sp-6));
		align-self: start;
	}
}

/* -------------------------------------------------------------------------
 * Article side blocks ("Is jouw device defect?", the orange trade-in block,
 * "Op zoek naar een nieuw device?"), from Site-instellingen → Blog — zijbalk.
 * 27-10-2026: rounded surface cards with the links as ruled rows.
 * ---------------------------------------------------------------------- */
.single-post .hs-article-aside {
	display: grid;
	gap: var(--sp-5);
}

@media (min-width: 62em) {
	.single-post .hs-article-aside {
		position: sticky;
		top: calc(var(--hs-topbar-h) + var(--hs-header-h) + var(--sp-6));
	}
}

.single-post .hs-article-aside__block {
	display: grid;
	gap: var(--sp-3);
	padding: var(--sp-6);
	border-radius: var(--r-xl);
	background: var(--hs-mint);
}

.single-post .hs-article-aside__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-20);
	font-weight: var(--fw-bold);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--heading-color);
}

.single-post .hs-article-aside__text {
	margin: 0;
	color: var(--fg-1);
	font-size: var(--fs-15);
	line-height: 1.6;
}

.single-post .hs-article-aside__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-post .hs-article-aside__links a {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: 10px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--hs-teal) 18%, transparent);
	color: var(--fg-1);
	font-weight: var(--fw-bold);
	text-decoration: none;
}

.single-post .hs-article-aside__links li:last-child a {
	border-bottom: 0;
}

.single-post .hs-article-aside__links a::after {
	content: "";
	flex: 0 0 auto;
	align-self: center;
	width: 12px;
	height: 12px;
	background: var(--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform var(--dur-fast) var(--ease-out);
}

.single-post .hs-article-aside__links a:hover {
	color: var(--accent-text);
}

.single-post .hs-article-aside__links a:hover::after {
	transform: translateX(3px);
}

.single-post .hs-article-aside__button {
	justify-self: start;
	margin-top: var(--sp-1);
}

/* The orange block: white title and text (Janyar, 27-10-2026), the same call
 * the client made for the trade-in band on the homepage. White on this orange
 * is ~2,3:1, under WCAG AA — a known, accepted trade-off, as there. The button
 * is deep teal with white (8,82:1). */
.single-post .hs-article-aside__block--oranje {
	--focus-ring: var(--focus-ring-on-light);
	background: var(--hs-orange);
}

.single-post .hs-article-aside__block--oranje .hs-article-aside__title,
.single-post .hs-article-aside__block--oranje .hs-article-aside__text {
	color: var(--fg-on-brand);
}

.single-post .hs-article-aside__block--oranje .hs-article-aside__button {
	background: var(--hs-teal-800);
	color: var(--fg-on-brand);
}

.single-post .hs-article-aside__block--oranje .hs-article-aside__button:hover {
	background: var(--hs-teal-900);
}

.single-post .hs-article-aside__unset {
	margin: 0;
	padding: var(--sp-4);
	border: 1px dashed var(--hs-orange-700);
	border-radius: var(--r-lg);
	color: var(--fg-1);
	font-size: var(--fs-14);
}

/* -------------------------------------------------------------------------
 * Table of contents ("Inhoudsopgave") — the old Elementor TOC box: 1px grey
 * border, 3px radius, a 20px header strip with a 24px teal title, then a
 * numbered list ("1.", "1.1.") in Lato 16/24 with 8px between entries.
 * Shared by the article and the long legal documents.
 * ---------------------------------------------------------------------- */
.single-post .hs-toc,
.hs-doc .hs-toc {
	margin: 0 0 var(--sp-5);
	border: 1px solid var(--hs-ink-4);
	border-radius: var(--r-sm);
}

.single-post .hs-toc__title,
.hs-doc .hs-toc__title {
	margin: 0;
	padding: var(--sp-5);
	border-bottom: 1px solid var(--hs-ink-4);
	font-family: var(--font-display);
	font-size: var(--fs-24);
	font-weight: var(--fw-bold);
	line-height: 1.5;
	color: var(--heading-color);
}

.single-post .hs-toc__list,
.hs-doc .hs-toc__list,
.single-post .hs-toc__list ol,
.hs-doc .hs-toc__list ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: hs-toc;
}

.single-post .hs-toc__list,
.hs-doc .hs-toc__list {
	/* The old list started 51px inside the 20px box padding, its numbers inside
	 * the item. */
	padding: var(--sp-5) var(--sp-5) var(--sp-5) calc(var(--sp-16) + var(--sp-2));
	color: var(--fg-1);
	font-size: var(--fs-16);
	line-height: var(--lh-copy);
}

.single-post .hs-toc__list ol,
.hs-doc .hs-toc__list ol {
	margin-top: var(--sp-2);
	padding-left: var(--sp-4);
}

.single-post .hs-toc li,
.hs-doc .hs-toc li {
	margin-bottom: var(--sp-2);
	counter-increment: hs-toc;
}

.single-post .hs-toc li::before,
.hs-doc .hs-toc li::before {
	content: counters(hs-toc, ".") ". ";
	margin-right: var(--sp-1);
}

.single-post .hs-toc a,
.hs-doc .hs-toc a {
	color: var(--fg-1);
	text-decoration: none;
}

.single-post .hs-toc a:hover,
.hs-doc .hs-toc a:hover {
	color: var(--accent-text);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * The article's table of contents (27-10-2026). The box above was shared with
 * the legal documents (.hs-doc); since 29-10-2026 those use this look too (the
 * box rules stay above as the base). On an article the
 * TOC is a quiet list instead — a hairline on the left, the current reading
 * order as plain links, no numbering box — in its own sticky column from 75em.
 * ---------------------------------------------------------------------- */
:is(.single-post, .hs-doc--single) .hs-toc {
	margin: 0 0 var(--sp-8);
	padding: var(--sp-5);
	border: 0;
	border-radius: var(--r-xl);
	background: var(--bg-2);
}

:is(.single-post, .hs-doc--single) .hs-toc__title {
	margin: 0 0 var(--sp-3);
	padding: 0;
	border: 0;
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	line-height: 1.4;
	color: var(--fg-1);
}

:is(.single-post, .hs-doc--single) .hs-toc__list {
	padding: 0;
	font-size: var(--fs-14);
	line-height: 1.45;
}

/* Every entry the same (Janyar, 27-10-2026: "gelijk aan elkaar"): sub-headings
 * sit on the same line as the headings, no extra indent, one rhythm. */
:is(.single-post, .hs-doc--single) .hs-toc__list ol {
	margin: 0;
	padding: 0;
}

:is(.single-post, .hs-doc--single) .hs-toc li {
	margin: 0;
}

:is(.single-post, .hs-doc--single) .hs-toc li::before {
	content: none;
}

:is(.single-post, .hs-doc--single) .hs-toc a {
	display: block;
	padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
	border-left: 2px solid var(--border-1);
	color: var(--fg-2);
	transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

:is(.single-post, .hs-doc--single) .hs-toc a:hover {
	border-left-color: var(--hs-teal-200);
	color: var(--accent-text);
	text-decoration: none;
}

/* The section being read, set by main.js as the page scrolls. */
:is(.single-post, .hs-doc--single) .hs-toc a.is-current {
	border-left-color: var(--accent);
	color: var(--accent-text);
	font-weight: var(--fw-bold);
}

/* From 75em the TOC is its own column and travels with the reader; a list
 * taller than the screen scrolls on its own instead of running off it. */
@media (min-width: 75em) {
	:is(.single-post, .hs-doc--single) .hs-toc {
		max-height: calc(100vh - var(--hs-topbar-h) - var(--hs-header-h) - var(--sp-12));
		/* A scroll box clips at its padding edge, which cut the "I" of
		 * "Inhoudsopgave" (29-10-2026): a little padding, pulled back by the same
		 * margin so the column still lines up. */
		margin: calc(-1 * var(--sp-1)) 0 0 calc(-1 * var(--sp-1));
		padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		background: none;
	}
}

/* Below 75em (Janyar, 29-10-2026): the TOC folds into a bar and opens as
 * a full-screen panel (main.js adds the bar, the × and .is-collapsible; without
 * JavaScript the list above simply stays open). */
.hs-toc-bar,
.hs-toc__close {
	display: none;
}

@media (max-width: 74.99em) {
	/* Stays where it is above the text, not sticky (Janyar, 29-10-2026). */
	:is(.single-post, .hs-doc--single) .hs-toc-bar {
		display: block;
		width: 100%;
		margin: 0 0 var(--sp-8);
		padding: 12px var(--sp-5);
		border: 1px solid var(--border-1);
		border-radius: var(--r-pill);
		background: var(--bg-1);
		box-shadow: var(--shadow-2);
		color: var(--fg-1);
		font-family: var(--font-display);
		font-size: var(--fs-14);
		font-weight: var(--fw-bold);
		letter-spacing: .04em;
		text-transform: uppercase;
		cursor: pointer;
	}

	:is(.single-post, .hs-doc--single) .hs-toc.is-collapsible {
		display: none;
	}

	:is(.single-post, .hs-doc--single) .hs-toc.is-collapsible.is-open {
		position: fixed;
		inset: 0;
		z-index: 1000;
		display: block;
		margin: 0;
		padding: var(--sp-16) var(--hs-gutter) var(--sp-8);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: 0;
		background: var(--bg-1);
	}

	:is(.single-post, .hs-doc--single) .hs-toc.is-open .hs-toc__title {
		font-size: var(--fs-24);
		color: var(--heading-color);
	}

	:is(.single-post, .hs-doc--single) .hs-toc.is-open .hs-toc__list {
		font-size: var(--fs-16);
	}

	:is(.single-post, .hs-doc--single) .hs-toc.is-open .hs-toc__close {
		position: absolute;
		top: var(--sp-4);
		right: var(--sp-4);
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: var(--r-pill);
		background: var(--bg-2);
		color: var(--fg-1);
		cursor: pointer;
	}

	.hs-toc__close svg {
		width: 20px;
		height: 20px;
	}

	.hs-toc-locked,
	.hs-toc-locked body {
		overflow: hidden;
	}
}

/* -------------------------------------------------------------------------
 * "Relevante artikelen" — the listing's cards under the article.
 * ---------------------------------------------------------------------- */
.single-post .hs-related {
	padding-inline: var(--hs-gutter);
	padding-top: clamp(var(--sp-10), 5vw, var(--sp-16));
	padding-bottom: var(--sp-16);
}

.single-post .hs-related__title {
	margin: 0 0 var(--sp-6);
	font-size: clamp(var(--fs-24), 2.6vw, var(--fs-32));
	line-height: 1.15;
	letter-spacing: -0.015em;
	scroll-margin-top: calc(var(--hs-topbar-h) + var(--hs-header-h) + var(--sp-6));
}

/* -------------------------------------------------------------------------
 * Title band — the mint strip with the breadcrumb and the <h1> that opens every
 * document page, the blog index and the blog archives on the old site.
 *
 * Measured on the old site (Elementor container 1970cb6), 11-10-2026:
 *   ≥768px  220px high at a 48px <h1>: 64px above the crumb, 20px crumb → title,
 *           64px below the title.
 *   <768px  140px high at a 32px <h1>: 32px / 18px / 32px.
 * The band sits outside the page's <article>, as a sibling directly under
 * .site-main, so it runs full width without any viewport-width trick.
 *
 * 27-10-2026 (Janyar): no background colour any more — the mint strip is gone
 * on every page that uses it (document pages, blog, search, Winkelimpressie),
 * the way cart and checkout already had it since 24-10-2026. Without a colour
 * to fill, the old 64px above and below read as a hole, so the band is now
 * 40px over the crumb and 24px under the title.
 * ---------------------------------------------------------------------- */
.hs-titleband {
	padding-block: var(--sp-6) var(--sp-4);
}

.hs-titleband__inner {
	max-width: var(--hs-wide-width);
	margin-inline: auto;
	padding-inline: var(--hs-gutter);
}

.hs-titleband .hs-crumbs {
	margin-bottom: var(--sp-4);
}

.hs-titleband .hs-page-header {
	margin: 0;
}

/* Teal on white is 4,16:1: enough for large text (≥24px bold), which a 32–48px
 * title always is. */
.hs-titleband .hs-page-header__title {
	font-size: var(--fs-32);
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

@media (min-width: 768px) {
	.hs-titleband {
		padding-block: var(--sp-10) var(--sp-6);
	}

	.hs-titleband .hs-crumbs {
		margin-bottom: var(--sp-5);
	}

	.hs-titleband .hs-page-header__title {
		font-size: var(--fs-48);
	}
}

/* -------------------------------------------------------------------------
 * Document pages — the service and legal texts (/garantie/,
 * /levering-en-retourneren/, /algemene-voorwaarden/, /privacybeleid/, …).
 *
 * The old site's layouts, measured 11-10-2026. Shared: Lato 16/24 copy with
 * 24px after each paragraph, teal Poppins headings with a line-height of 1,
 * 16px from a heading to its text. Then per arrangement (inc/content-pages.php
 * puts the modifier on the <article>):
 *   --single   h2 24px, 40px from one section's text to the next heading;
 *              with an "Inhoudsopgave" (the long legal texts) 64px, and h3
 *              sub-sections at 20px (/algemene-voorwaarden/).
 *   --columns  h2 32px, 32px between sections, two 684px columns with a 32px
 *              gap from 768px up (/garantie/, /levering-en-retourneren/).
 *   --cards    one white card per h2 (16px padding, 8px radius, soft shadow),
 *              three across, the first h2 as the title above them
 *              (/kwaliteitsgarantie/).
 *
 * Everything is scoped under .hs-doc, which only document.php puts on its
 * <article>, so nothing here can reach the header or footer (CLAUDE.md).
 * ---------------------------------------------------------------------- */

.site-main > .hs-doc {
	/* The old document column starts flush with the band's title (x=160 at
	 * 1720px), not 10px further in like the product column .wrap gives. */
	padding-inline: var(--hs-gutter);
	padding-bottom: var(--sp-16);
}

.hs-doc .entry-content {
	color: var(--fg-1);
	font-size: var(--fs-16);
	line-height: var(--lh-copy);
}

.hs-doc .entry-content p,
.hs-doc .entry-content ul,
.hs-doc .entry-content ol {
	margin: 0 0 var(--sp-6);
	color: var(--fg-1);
}

.hs-doc .entry-content ul,
.hs-doc .entry-content ol {
	padding-left: var(--sp-12);
}

.hs-doc .entry-content h2 {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-24);
	line-height: 1;
	/* The old site's 0.5px. */
	letter-spacing: calc(var(--tracking-body) / 2);
	scroll-margin-top: calc(var(--hs-header-h) + var(--sp-6));
}

.hs-doc .entry-content h3 {
	margin: var(--sp-10) 0 var(--sp-4);
	font-size: var(--fs-20);
	line-height: 1;
	letter-spacing: calc(var(--tracking-body) / 2);
	scroll-margin-top: calc(var(--hs-header-h) + var(--sp-6));
}

.hs-doc .entry-content h2 + h3 {
	margin-top: var(--sp-8);
}

.hs-doc .entry-content h4 {
	margin: var(--sp-6) 0 var(--sp-3);
	font-size: var(--fs-18);
}

.hs-doc__section {
	/* flow-root: the last paragraph's 24px adds to the gap below, as on the old
	 * site, instead of collapsing into it. */
	display: flow-root;
	margin-bottom: var(--sp-4);
}

/* The legal texts' table of contents is the same list without the box: no
 * border, no padding, the title at 24/29 (measured on /algemene-voorwaarden/). */
.hs-doc .hs-toc {
	display: flow-root; /* keep the list's 24px inside, on top of the 64px gap */
	margin-bottom: var(--sp-16);
	border: 0;
}

.hs-doc .hs-toc__title {
	padding: 0;
	border: 0;
	line-height: var(--lh-snug);
}

.hs-doc .hs-toc__list {
	margin-bottom: var(--sp-6);
	padding: 0 0 0 var(--sp-12);
}

.hs-doc--single .entry-content h2 {
	margin-bottom: var(--sp-5);
}

/* A text that opens with its own heading (/privacybeleid/, /verzekering/) set
 * that one at 32px on the old site, as a title over the rest. */
.hs-doc--single > .entry-content:first-child > .hs-doc__section:first-child > h2:first-child {
	font-size: var(--fs-32);
}

.hs-doc .hs-toc ~ .entry-content .hs-doc__section {
	margin-bottom: var(--sp-10);
}

/* The old box indented its list 48px; in the blog look the list sits flush
 * under the "Inhoudsopgave" title (Janyar, 29-10-2026). Placed after the
 * `.hs-doc .hs-toc__list` rule above so it wins at equal specificity. */
.hs-doc--single .hs-toc__list {
	margin-bottom: 0;
	padding: 0;
}

/* A document with an Inhoudsopgave (Algemene voorwaarden, Privacybeleid,
* Cookiebeleid; 29-10-2026): from 75em the TOC is its own sticky column on the
* left, like on an article; below that it folds into a bar (main.js). */
@media (min-width: 75em) {
	.hs-doc--single:has(> .hs-toc) {
		display: grid;
		grid-template-columns: 13.75rem minmax(0, 1fr);
		column-gap: clamp(var(--sp-10), 3.5vw, var(--sp-16));
		align-items: start;
	}

	.hs-doc--single > .hs-toc {
		grid-column: 1;
		position: sticky;
		top: calc(var(--hs-topbar-h) + var(--hs-header-h) + var(--sp-6));
	}

	.hs-doc--single > .entry-content {
		grid-column: 2;
	}
}

/* Imported tables are authored at desktop width; let them scroll rather than
 * push the page sideways. */
.hs-doc .entry-content table {
	display: block;
	width: max-content;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: var(--fs-15);
}

.hs-doc .entry-content th,
.hs-doc .entry-content td {
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--border-1);
	text-align: left;
	vertical-align: top;
}

/* Accordions — <details> in the text (the tips on /waterschade-behandeling/),
 * the old Elementor accordion: 1px bordered title row and panel, 10px padding,
 * dark-teal title with a chevron (up when open). No JavaScript; the closed text
 * stays in the document for crawlers. */
.hs-doc:not(.hs-doc--landing) .entry-content details {
	margin: 0;
}

.hs-doc:not(.hs-doc--landing) .entry-content details + :not(details) {
	margin-top: var(--sp-5);
}

.hs-doc:not(.hs-doc--landing) .entry-content summary {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--border-1);
	color: var(--accent-press);
	line-height: var(--lh-copy);
	cursor: pointer;
	list-style: none;
}

.hs-doc:not(.hs-doc--landing) .entry-content summary::-webkit-details-marker {
	display: none;
}

/* Chevron drawn with two borders: down when closed, up when open. */
.hs-doc:not(.hs-doc--landing) .entry-content summary::before {
	content: "";
	flex: none;
	width: 0.5em;
	height: 0.5em;
	margin-top: -0.25em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.hs-doc:not(.hs-doc--landing) .entry-content details[open] > summary::before {
	margin-top: 0.25em;
	transform: rotate(-135deg);
}

.hs-doc:not(.hs-doc--landing) .entry-content details > :not(summary) {
	margin: 0;
	padding: var(--sp-3) var(--sp-3) var(--sp-8);
	border: 1px solid var(--border-1);
	border-top: 0;
}

/* --columns */
.hs-doc--columns .entry-content h2 {
	font-size: var(--fs-24);
	overflow-wrap: anywhere; /* one long Dutch compound overflowed a 375px screen by 26px */
}

@media (min-width: 768px) {
	.hs-doc--columns .entry-content h2 {
		font-size: var(--fs-32);
	}
}

.hs-doc--columns .hs-doc__section {
	margin-bottom: var(--sp-8);
	break-inside: avoid;
}

/* --cards */
.hs-doc--cards .entry-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-5);
}

.hs-doc--cards .hs-doc__section {
	margin: 0;
	padding: var(--sp-4);
	border-radius: var(--r-lg);
	background: var(--bg-1);
	/* The old cards' shadow, as on the blog cards (see .hs-post-grid). */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.hs-doc--cards .hs-doc__section:first-child {
	grid-column: 1 / -1;
	padding: 0;
	box-shadow: none;
}

.hs-doc--cards .hs-doc__section:first-child h2 {
	margin: 0;
	font-size: var(--fs-32);
}

.hs-doc--cards .entry-content ul {
	padding-left: var(--sp-6);
}

/* A product photo at the foot of a card, right-aligned, as on the old page. */
.hs-doc--cards .hs-doc__card-photo {
	margin: var(--sp-4) 0 0;
	text-align: right;
}

.hs-doc--cards .hs-doc__card-photo img {
	display: inline-block;
	width: auto;
	max-width: 60%;
	height: auto;
	max-height: 230px;
	border-radius: var(--r-md);
}

@media (min-width: 768px) {
	.hs-doc--columns .entry-content {
		column-count: 2;
		column-gap: var(--sp-8);
	}

	.hs-doc--cards .entry-content {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.site-main > .hs-doc:not(.hs-doc--landing) {
		padding-top: var(--sp-16);
	}

	.hs-doc--cards .entry-content {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Button rows — paragraphs that held nothing but a link (Elementor buttons on
 * the old site). Colours per band are set in the landing section below.
 * ---------------------------------------------------------------------- */
.hs-doc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin: var(--sp-8) 0 0;
}

.hs-doc__actions .hs-btn {
	line-height: var(--lh-snug);
}


/* -------------------------------------------------------------------------
 * Landing pages — the old Elementor pages rebuilt as plain HTML
 * (/telefoonwinkel-uitgeest/, /telefoonwinkel-wormerveer/,
 * /telefoon-wereld-krommenie/, /telefoonwinkel-in-de-buurt/, /wertgarantie/).
 *
 * post_content marks its own bands with these classes (seed commands in
 * docs/SEEDING.md); the template only adds the breadcrumb. Measured on the old
 * pages 11-10-2026 at 1720 and 375:
 *   hero       teal band, 100px (60px mobile) top and bottom; photo left
 *              (522px, 15px radius, hidden on phones), text right: a pill
 *              label, the <h1> white 40/50 (24px mobile), 17/24 copy, an
 *              orange and a white button.
 *   band       mint (or teal) band, 100px (60px mobile), centred 32px title
 *              (24px mobile); the feature row is four 300px columns, 20px
 *              apart, with a 40px check, a 25px teal title and 15px text.
 *   text       white, a 673px column starting at x=220, h2/h3 Poppins 30/40.
 *   split      white, text left and photos right (Krommenie, In de buurt).
 *   cta        mint, centred title, text and two buttons (orange, teal).
 *
 * Contrast, where the old colours fail WCAG AA (variables.css decisions):
 * the hero is --hs-teal-aa under white text (#008999 is 4,17:1), the pill is
 * teal-700, white-button and feature text use --accent-text, and the orange
 * buttons carry dark text (--cta-2-fg).
 *
 * The bands run full width: on a landing page the <article> drops the page
 * column (.hs-doc--landing below) and every band re-centres its own content.
 * ---------------------------------------------------------------------- */
.site-main > .hs-doc--landing {
	/* Old-page measurements with no site-wide token; local to these bands. */
	--hs-lp-photo-w: 522px;     /* hero photo */
	--hs-lp-photo-r: var(--r-xl);      /* hero photo radius */
	--hs-lp-text-w: 673px;      /* white text column */
	--hs-lp-text-inset: 60px;   /* text column starts 60px in from the page column */
	--hs-lp-cta-w: 923px;       /* closing paragraph */
	--hs-lp-feature-w: 300px;   /* one feature column */
	--hs-lp-title: 30px;        /* h2/h3 in the white sections, 40px line */
	--hs-lp-title-lh: 40px;
	--hs-lp-hero-copy: 17px;    /* hero paragraphs on desktop */
	--hs-lp-hero-title-lh: 50px;
	--hs-lp-split-photo-w: 390px; /* shop photos beside the text */
	--hs-lp-card-w: 380px;      /* one white card on a band */
	--hs-lp-faq-w: 896px;       /* FAQ accordion column */
	--hs-lp-box-w: 384px;       /* "Wat wordt gedekt?" box */
	--hs-lp-split-photo-r: var(--r-xl);

	max-width: none;
	padding: 0;
}

.hs-doc--landing .hs-doc__inner,
.hs-doc--landing .hs-crumbs {
	max-width: var(--hs-wide-width);
	margin-inline: auto;
	padding-inline: var(--hs-gutter);
}

.hs-doc--landing .hs-doc__inner {
	padding-block: var(--sp-5);
}

.hs-doc--landing .hs-doc__inner .hs-crumbs {
	margin: 0;
	padding: 0;
}

.hs-doc--landing .entry-content {
	color: var(--fg-1);
	font-size: var(--fs-16);
	line-height: var(--lh-copy);
}

.hs-doc--landing .entry-content p,
.hs-doc--landing .entry-content ul,
.hs-doc--landing .entry-content ol {
	margin: 0 0 var(--sp-6);
}

.hs-doc--landing .entry-content ul,
.hs-doc--landing .entry-content ol {
	padding-left: var(--sp-6);
}

.hs-doc--landing .entry-content h1,
.hs-doc--landing .entry-content h2,
.hs-doc--landing .entry-content h3 {
	letter-spacing: var(--tracking-snug);
	scroll-margin-top: calc(var(--hs-header-h) + var(--sp-6));
}

/* Every band centres a 1400px column inside a full-width background. */
.hs-lp-hero,
.hs-lp-band,
.hs-lp-text,
.hs-lp-split,
.hs-lp-cta {
	--hs-lp-pad: 60px;

	padding: var(--hs-lp-pad) max(var(--hs-gutter), (100% - var(--hs-wide-width)) / 2 + var(--hs-gutter));
}

/* --- Buttons inside the bands (rows built by hs_doc_group_actions()) --- */
.hs-doc--landing .hs-doc__actions .hs-btn {
	padding: var(--sp-4);
	border-radius: var(--r-lg);
	box-shadow: none;
	line-height: 1;
}

.hs-doc--landing .hs-doc__actions .hs-btn--primary {
	background: var(--cta-2);
	color: var(--cta-2-fg);
}

.hs-doc--landing .hs-doc__actions .hs-btn--primary:hover {
	background: var(--cta-2-hover);
	color: var(--cta-2-fg);
}

.hs-doc--landing .hs-doc__actions .hs-btn--ghost {
	border: 0;
	background: var(--accent-fill);
	color: var(--fg-on-brand);
}

.hs-doc--landing .hs-doc__actions .hs-btn--ghost:hover {
	background: var(--accent-fill-hover);
	color: var(--fg-on-brand);
}

/* A single button in a white text section is teal, as on the old pages; only
 * the hero and the closing band lead with orange. */
.hs-doc--landing .hs-lp-text .hs-doc__actions .hs-btn--primary,
.hs-doc--landing .hs-lp-split .hs-doc__actions .hs-btn--primary {
	background: var(--accent-fill);
	color: var(--fg-on-brand);
}

.hs-doc--landing .hs-lp-text .hs-doc__actions .hs-btn--primary:hover,
.hs-doc--landing .hs-lp-split .hs-doc__actions .hs-btn--primary:hover {
	background: var(--accent-fill-hover);
	color: var(--fg-on-brand);
}

/* --- Hero --- */
.hs-lp-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-8);
	align-items: center;
	background: var(--hs-teal-aa);
	color: var(--fg-on-brand);
}

.hs-lp-hero__media {
	display: none;
	margin: 0;
}

.hs-lp-hero__media img {
	display: block;
	width: 100%;
	max-width: var(--hs-lp-photo-w);
	height: auto;
	/* The old hero cropped the shop photo to a wide strip (522 x 275). */
	aspect-ratio: 522 / 275;
	object-fit: cover;
	margin-inline: auto;
	border-radius: var(--hs-lp-photo-r);
}

.hs-doc--landing .hs-lp-hero p {
	color: var(--fg-on-brand);
}

.hs-doc--landing .hs-lp-hero .hs-lp-eyebrow {
	display: inline-block;
	margin-bottom: var(--sp-8);
	padding: var(--sp-3) var(--sp-6);
	border-radius: var(--r-pill);
	background: var(--hs-teal-700);
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	line-height: 1;
	text-align: center;
}

.hs-doc--landing .hs-lp-hero h1 {
	margin: 0 0 var(--sp-5);
	color: var(--fg-on-brand);
	font-size: var(--fs-24);
	line-height: var(--lh-snug);
}

.hs-lp-hero .hs-doc__actions,
.hs-lp-cta .hs-doc__actions {
	/* Padding, not margin: the 32px comes on top of the last paragraph's own
	 * margin, as on the old pages, instead of collapsing into it. */
	margin-top: 0;
	padding-top: var(--sp-8);
}

.hs-doc--landing .hs-lp-hero p {
	margin-bottom: 1.5em;
}

.hs-doc--landing .hs-lp-hero .hs-doc__actions .hs-btn--ghost {
	background: var(--bg-1);
	color: var(--accent-text);
}

.hs-doc--landing .hs-lp-hero .hs-doc__actions .hs-btn--ghost:hover {
	background: var(--hs-mint);
	color: var(--accent-press);
}

.hs-lp-hero .hs-btn:focus-visible {
	outline-color: var(--focus-ring-on-dark);
}

/* --- Bands --- */
.hs-lp-band {
	background: var(--hs-mint);
	text-align: center;
}

.hs-lp-band--teal {
	background: var(--hs-teal-aa);
	color: var(--fg-on-brand);
}

.hs-doc--landing .hs-lp-band > h2,
.hs-doc--landing .hs-lp-cta > h2 {
	margin: 0 0 var(--sp-6);
	font-size: var(--fs-24);
	line-height: 1;
}

.hs-doc--landing .hs-lp-band--teal > h2,
.hs-doc--landing .hs-lp-band--teal p {
	color: var(--fg-on-brand);
}

.hs-lp-features {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-5);
	justify-content: center;
}

.hs-lp-features > * {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* The old check-circle, drawn from Phosphor's CheckCircle (bold) as a mask so it
 * takes the text colour. */
.hs-lp-features > *::before {
	content: "";
	width: 40px;
	height: 40px;
	margin-bottom: var(--sp-4);
	background: currentColor;
	color: var(--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M176.49,95.51a12,12,0,0,1,0,17l-56,56a12,12,0,0,1-17,0l-24-24a12,12,0,1,1,17-17L112,143l47.51-47.52A12,12,0,0,1,176.49,95.51ZM236,128A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M176.49,95.51a12,12,0,0,1,0,17l-56,56a12,12,0,0,1-17,0l-24-24a12,12,0,1,1,17-17L112,143l47.51-47.52A12,12,0,0,1,176.49,95.51ZM236,128A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hs-doc--landing .hs-lp-features h3 {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-24);
	line-height: var(--lh-snug);
}

.hs-doc--landing .hs-lp-features p {
	margin: 0;
	color: var(--accent-text);
	font-size: var(--fs-15);
}

/* Step / benefit cards (Wertgarantie): white cards on the band, centred in a
 * row of up to four. */
.hs-lp-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-5);
	margin-top: var(--sp-8);
}

.hs-lp-cards > * {
	flex: 1 1 var(--hs-lp-feature-w);
	max-width: var(--hs-lp-card-w);
	padding: var(--sp-6);
	border-radius: var(--hs-lp-photo-r);
	background: var(--bg-1);
	box-shadow: var(--shadow-card);
}

/* Teal band: white type throughout (the feature icon included). */
.hs-doc--landing .hs-lp-band--teal h3,
.hs-doc--landing .hs-lp-band--teal .hs-lp-features p,
.hs-lp-band--teal .hs-lp-features > *::before {
	color: var(--fg-on-brand);
}

/* The orange word in the Wertgarantie title. The old #ff8d3d is 2,30:1 on the
 * teal band, under the 3:1 even a 40px title needs; the pale orange keeps the
 * accent at 3,8:1. */
.hs-doc--landing .hs-lp-accent {
	color: var(--hs-orange-100);
}

/* Text left, picture right (Wertgarantie); the logo sits on a white tile. */
.hs-lp-hero--reverse .hs-lp-hero__media {
	order: 2;
}

.hs-lp-hero__media--logo img {
	object-fit: contain;
	background: var(--bg-1);
}

/* "Wat wordt gedekt?" — the mint box beside the text, with check marks. */
.hs-lp-box {
	align-self: start;
	padding: var(--sp-8) var(--sp-8) var(--sp-10);
	border-radius: var(--hs-lp-photo-r);
	background: var(--hs-mint);
}

.hs-doc--landing .hs-lp-box h3 {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-24);
	line-height: var(--hs-lp-title-lh);
}

.hs-doc--landing .hs-lp-box ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hs-lp-box li {
	display: flex;
	gap: var(--sp-2);
}

.hs-lp-box li::before {
	content: "\2713"; /* ✓ */
	color: var(--accent-text);
	font-weight: var(--fw-bold);
}

/* FAQ accordion on a mint band: white rounded rows. */
.hs-lp-faq > details {
	max-width: var(--hs-lp-faq-w);
	margin: 0 auto var(--sp-3);
	border-radius: var(--r-card);
	background: var(--bg-1);
	text-align: start;
}

.hs-lp-faq summary {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	color: var(--accent-text);
	cursor: pointer;
	list-style: none;
}

.hs-lp-faq summary::-webkit-details-marker {
	display: none;
}

.hs-lp-faq summary::after {
	content: "";
	flex: none;
	width: 0.5em;
	height: 0.5em;
	margin: -0.25em 0 0 auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.hs-lp-faq details[open] > summary::after {
	margin-top: 0.25em;
	transform: rotate(-135deg);
}

.hs-doc--landing .hs-lp-faq summary h3 {
	margin: 0;
	color: inherit;
	font-family: var(--font-sans);
	font-size: var(--fs-16);
	font-weight: var(--fw-bold);
	line-height: var(--lh-copy);
}

.hs-lp-faq details > :not(summary) {
	margin: 0;
	padding: 0 var(--sp-4) var(--sp-4);
}

.hs-lp-faq details > ul {
	padding-left: var(--sp-10);
}

.hs-lp-cta.hs-lp-cta--white {
	background: var(--bg-1);
}

.hs-doc--landing .hs-lp-cards h3 {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-20);
	line-height: var(--lh-snug);
}

.hs-doc--landing .hs-lp-cards p {
	margin: 0;
	font-size: var(--fs-15);
}

/* --- Text columns --- */
.hs-lp-text > * {
	max-width: var(--hs-lp-text-w);
}

.hs-doc--landing .hs-lp-text h2,
.hs-doc--landing .hs-lp-text h3,
.hs-doc--landing .hs-lp-split h1,
.hs-doc--landing .hs-lp-split h2 {
	margin: 0 0 var(--sp-5);
	font-size: var(--hs-lp-title);
	line-height: var(--hs-lp-title-lh);
}

.hs-doc--landing .hs-lp-text * + h2,
.hs-doc--landing .hs-lp-text * + h3,
.hs-doc--landing .hs-lp-split * + h2 {
	margin-top: var(--sp-10);
}

.hs-lp-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-8);
}

.hs-lp-split__media {
	display: grid;
	gap: var(--sp-8);
	align-content: start;
}

.hs-lp-split__media figure {
	margin: 0;
}

.hs-lp-split__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--hs-lp-split-photo-r);
}

/* --- Product rows (Krommenie, In de buurt) ---
 * Title left, "Bekijk alle … producten ↗" right, intro under it, then live
 * product cards ([hs_producten]; the card itself is styled in sections.css). */
.hs-lp-products {
	text-align: start;
}

.hs-lp-products__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-2) var(--sp-6);
	margin-bottom: var(--sp-4);
}

.hs-lp-products .hs-home-products__grid + .hs-lp-products__head {
	margin-top: var(--sp-12);
}

.hs-doc--landing .hs-lp-products__head h2 {
	margin: 0;
	font-size: var(--fs-24);
	line-height: 1;
}

.hs-doc--landing .hs-lp-products__head h3 {
	margin: 0;
	font-size: var(--fs-16);
	line-height: 1;
}

.hs-lp-products__head h3 a {
	color: var(--accent-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hs-lp-products__head h3 a::after {
	content: " \2197"; /* ↗, the old link's arrow */
}

.hs-lp-products__head h3 a:hover {
	color: var(--accent-press);
}

.hs-doc--landing .hs-lp-products > p {
	margin-bottom: var(--sp-6);
}

/* Photos beside the text, staggered as on the old page: the first right, the
 * second left and lower. */
.hs-lp-split__media img {
	max-width: var(--hs-lp-split-photo-w);
}

.hs-lp-split__media figure:nth-child(odd) img {
	margin-left: auto;
}

/* --- Closing call to action --- */
.hs-lp-cta {
	background: var(--hs-mint);
	text-align: center;
}

.hs-doc--landing .hs-lp-cta > p {
	max-width: var(--hs-lp-cta-w);
	margin-inline: auto;
}

.hs-lp-cta .hs-doc__actions,
.hs-lp-band .hs-doc__actions {
	justify-content: center;
}

/* Phones: full-width stacked buttons, and the feature band left-aligned with
 * small icons, as on the old pages. */
@media (max-width: 767px) {
	.hs-doc--landing .hs-doc__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hs-lp-band:has(.hs-lp-features) {
		text-align: start;
	}

	.hs-lp-features > * {
		align-items: flex-start;
	}

	.hs-lp-features > *::before {
		width: 24px;
		height: 24px;
		margin-bottom: var(--sp-2);
	}

	/* 20px, not smaller: teal on mint (3,68:1) only passes as large text. */
	.hs-doc--landing .hs-lp-features h3 {
		margin-bottom: var(--sp-2);
		font-size: var(--fs-20);
	}
}

@media (min-width: 768px) {
	.hs-lp-hero,
	.hs-lp-band,
	.hs-lp-text,
	.hs-lp-split,
	.hs-lp-cta {
		--hs-lp-pad: 100px;
	}

	.hs-lp-features {
		grid-template-columns: repeat(2, minmax(0, var(--hs-lp-feature-w)));
	}

	.hs-lp-features > * {
		padding: var(--sp-6);
	}

	.hs-lp-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hs-doc--landing .hs-lp-band > h2,
	.hs-doc--landing .hs-lp-cta > h2,
	.hs-doc--landing .hs-lp-products__head h2 {
		font-size: var(--fs-32);
	}
}

@media (min-width: 1025px) {
	.hs-lp-hero {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hs-lp-hero__media {
		display: block;
	}

	.hs-doc--landing .hs-lp-hero h1 {
		font-size: var(--fs-40);
		line-height: var(--hs-lp-hero-title-lh);
	}

	.hs-doc--landing .hs-lp-hero p {
		font-size: var(--hs-lp-hero-copy);
	}

	.hs-lp-features {
		grid-template-columns: repeat(4, minmax(0, var(--hs-lp-feature-w)));
	}

	.hs-lp-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* The old text column starts 60px further in than the page column, and
	 * 10px lower than the other bands (an inner Elementor padding). */
	.hs-lp-text {
		padding-top: calc(var(--hs-lp-pad) + var(--hs-content-inset));
		padding-left: max(var(--hs-gutter), (100% - var(--hs-wide-width)) / 2 + var(--hs-gutter) + var(--hs-lp-text-inset));
	}

	.hs-lp-split {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		gap: var(--sp-16);
		padding-top: calc(var(--sp-16) + var(--hs-content-inset));
	}

	/* Wertgarantie: text column with the "Wat wordt gedekt?" box beside it,
	 * centred against the text. */
	.hs-lp-split--aside {
		grid-template-columns: minmax(0, 1fr) var(--hs-lp-box-w);
		padding-top: var(--hs-lp-pad);
	}

	.hs-lp-split--aside .hs-lp-box {
		align-self: center;
	}
}


/* -------------------------------------------------------------------------
 * /reparaties/ funnel host pages (root + device/brand/model tree).
 * The label + heading use the shared .hs-page-header / .hs-eyebrow component
 * (components.css); only the funnel-specific bits live here: the section
 * spacing, the centred + width-constrained hero title, and — because the root
 * page ships its own <h1> inside the content — an override so that content
 * heading matches the shared centred page-header title. Scoped to
 * .hs-page--reparaties (set in page.php) so it never reaches other pages.
 * ---------------------------------------------------------------------- */
/* This class sits on page.php's <article>, which already picks up the shared
 * page-edge padding from layout.css, so only the bottom is declared here. */
.hs-page--reparaties {
	padding-bottom: var(--sp-12);
}

/* The eyebrow sits directly above the heading; the heading (root) or the funnel
 * (child pages) provides the spacing below, so drop the header's own margin. */
.hs-page--reparaties .hs-page-header {
	margin-bottom: 0;
}

.hs-page--reparaties .hs-page-header__title,
.hs-page--reparaties > .entry-content > h1 {
	max-width: 24ch;
	margin: 0 auto var(--sp-8);
	text-align: center;
	font-size: clamp(var(--fs-28), 3.4vw, var(--fs-40));
	line-height: var(--lh-snug);
	text-wrap: balance;
}

/* ---------- 404 ----------
 * Scoped under .error-404 so nothing here can reach the global chrome
 * (CLAUDE.md, "Global chrome is sacred"). The pillar card deliberately mirrors
 * .hs-intent__card from sections.css rather than importing it: sections.css
 * does not load on a 404, and duplicating ~10 declarations beats enqueueing a
 * whole stylesheet for one component.
 */
.error-404 { padding-bottom: var(--sp-16); }
.error-404 .hs-page-header { margin-bottom: var(--sp-6); }

/* The search pill is white-on-white here (the topbar gives it a teal ground),
 * so it needs its own edge. */
.error-404 .hs-404__search { max-width: 460px; margin: 0 auto var(--sp-12); }
.error-404 .hs-404__search .hs-search { flex: 1 1 auto; height: 48px; border: 1px solid var(--border-1); box-shadow: var(--shadow-1); }

.error-404 .hs-404__pillars { list-style: none; margin: 0 0 var(--sp-12); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.error-404 .hs-404__card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-5); border: 1px solid var(--border-1); border-radius: var(--r-lg); background: var(--bg-1); text-decoration: none; color: var(--fg-1); transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.error-404 .hs-404__card:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.error-404 .hs-404__icon { grid-column: 1; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--hs-teal-50); color: var(--accent); }
.error-404 .hs-404__icon .hs-icon { width: 22px; height: 22px; }
.error-404 .hs-404__label { grid-column: 2; font-weight: var(--fw-bold); }
.error-404 .hs-404__text { grid-column: 2; font-size: var(--fs-14); color: var(--fg-2); line-height: var(--lh-base); }
.error-404 .hs-404__arrow { grid-column: 3; grid-row: 1 / span 2; display: inline-flex; color: var(--fg-3); transition: color var(--dur-base) var(--ease-standard); }
.error-404 .hs-404__card:hover .hs-404__arrow { color: var(--accent); }
.error-404 .hs-404__arrow .hs-icon { width: 18px; height: 18px; }

.error-404 .hs-404__subtitle { font-size: var(--fs-18); margin: 0 0 var(--sp-4); color: var(--heading-color-sm); }
.error-404 .hs-404__cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.error-404 .hs-404__cats .hs-chip { text-decoration: none; color: var(--fg-1); }
.error-404 .hs-404__cats .hs-chip:hover { color: #fff; }
.error-404 .hs-404__cats .hs-icon { width: 18px; height: 18px; }

@media (max-width: 600px) {
	.error-404 { padding-bottom: var(--sp-12); }
	.error-404 .hs-404__card { padding: var(--sp-4); gap: var(--sp-1) var(--sp-3); }
}