/* Hairtec Blog Detail — frontend.
   Tokens uit de Elementor-kit van hairtec.nl (navy #223558, diep #0a184a,
   zacht #eeeff2); font wordt geërfd van het thema (Europa). Alles is
   gescoped onder body.htbd-on of op eigen .htbd-componentklassen. */

/* --htbd-primary/--htbd-deep/--htbd-soft komen uit de instellingen (inline
   op :root gezet door HTBD_Assets) en worden hier bewust NIET hard
   geherdefinieerd — anders overschaduwt dit blok de ingestelde kleuren. */
body.htbd-on {
	--htbd-ink: #231f20;
	--htbd-muted: #5c5c5c;
	--htbd-meta: #767676;
	--htbd-line: #e3e5eb;
	--htbd-line-soft: #eceef3;
	--htbd-zebra: #f7f8fa;
	--htbd-hoverbg: #f4f5f8;
	--htbd-activebg: #eef1f6;
	--htbd-radius: 20px;
	--htbd-fs: var(--htbd-fs-base, 16px);
}
html[data-htbd-fs="2"] body.htbd-on { --htbd-fs: calc(var(--htbd-fs-base, 16px) + 2px); }
html[data-htbd-fs="3"] body.htbd-on { --htbd-fs: calc(var(--htbd-fs-base, 16px) + 4px); }

/* [hidden] wint altijd van onze display-regels (speler, feedbackrij, knoppen). */
body.htbd-on [hidden],
.htbd-sheet[hidden],
.htbd-overlay[hidden] { display: none !important; }

body.htbd-on .htbd-card {
	background: #fff;
	border: 1px solid var(--htbd-line);
	border-radius: var(--htbd-radius);
	box-sizing: border-box;
}
body.htbd-on .htbd-kicker {
	margin: 0;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--htbd-meta);
}

/* Anker-offset voor TOC-sprongen. */
body.htbd-on h2[id],
body.htbd-on h3[id] { scroll-margin-top: 96px; }

/* ------------------------------------------------- Contenttypografie */

body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) p {
	font-size: var(--htbd-fs);
	line-height: 1.6;
	letter-spacing: normal;
	color: var(--htbd-ink);
	margin-top: 0;
	margin-bottom: 14px;
}
body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) :is(ul, ol) {
	font-size: var(--htbd-fs);
	line-height: 1.6;
	letter-spacing: normal;
	color: var(--htbd-ink);
}
body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) li { margin-bottom: 8px; }

/* Lijsten uit de WP-editor in de huisstijl (design): navy cirkelnummers
   voor ol, navy stippen voor ul, vinkjes voor ul.htbd-checks. Alleen
   lijsten zonder vreemde classes, zodat Medical Citation/Schema Manager-
   markup met rust wordt gelaten. */
body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) :is(ol:not([class]), ol.wp-block-list) {
	list-style: none;
	counter-reset: htbd-step;
	padding-left: 0;
	margin: 4px 0 18px;
}
body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) :is(ol:not([class]), ol.wp-block-list) > li {
	counter-increment: htbd-step;
	position: relative;
	padding-left: 46px;
	margin-bottom: 14px;
	min-height: 30px;
}
body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) :is(ol:not([class]), ol.wp-block-list) > li::before {
	content: counter(htbd-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--htbd-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) :is(ul:not([class]), ul.wp-block-list) {
	list-style: none;
	padding-left: 0;
	margin: 4px 0 18px;
}
body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) :is(ul:not([class]), ul.wp-block-list) > li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 10px;
}
body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) :is(ul:not([class]), ul.wp-block-list) > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--htbd-primary);
}
body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) ul.htbd-checks {
	list-style: none;
	padding-left: 0;
	margin: 4px 0 18px;
}
body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) ul.htbd-checks > li {
	position: relative;
	padding-left: 38px;
	margin-bottom: 12px;
	min-height: 24px;
}
body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) ul.htbd-checks > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .12em;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--htbd-activebg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223558' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* Kopmaten exact van de site-kit: H2 32/1.2, H3 25/1.2 (mobiel kleiner). */
body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) h2 {
	font-size: 32px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: normal;
	color: var(--htbd-primary);
	margin: 1.6em 0 .6em;
}
body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) h3 {
	font-size: 25px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: normal;
	color: var(--htbd-primary);
	margin: 1.4em 0 .5em;
}
@media (max-width: 767px) {
	body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) h2 { font-size: 26px; }
	body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) h3 { font-size: 21px; }
}
body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) a {
	color: var(--htbd-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) a:hover { color: var(--htbd-deep); }
body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) blockquote {
	margin: 1.4em 0;
	padding: 18px 24px;
	background: var(--htbd-soft);
	border-radius: 16px;
	font-style: italic;
	color: var(--htbd-ink);
}
body.htbd-content-styles :is(.elementor-widget-theme-post-content, .htbd-content) img {
	border-radius: 16px;
	height: auto;
	max-width: 100%;
}

/* ------------------------------------------------------------ Tabellen */

body.htbd-on .htbd-tablewrap {
	position: relative;
	border: 1px solid var(--htbd-line);
	border-radius: 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.4em 0;
}
body.htbd-on .htbd-tablewrap:focus-visible { outline: 2px solid var(--htbd-primary); outline-offset: 2px; }
body.htbd-on .htbd-tablewrap table {
	width: 100%;
	min-width: 480px;
	border-collapse: separate;
	border-spacing: 0;
	border: 0;
	margin: 0;
	font-size: calc(var(--htbd-fs) - 2px);
	line-height: 1.5;
}
body.htbd-on .htbd-tablewrap :is(th, td) { border: 0; }
body.htbd-on .htbd-tablewrap thead th,
body.htbd-on .htbd-tablewrap tr:first-child th {
	background: var(--htbd-primary);
	color: #fff;
	font-weight: 600;
	text-align: left;
	padding: 13px 18px;
	font-size: calc(var(--htbd-fs) - 3px);
}
body.htbd-on .htbd-tablewrap td {
	padding: 13px 18px;
	border-top: 1px solid var(--htbd-line-soft);
	color: var(--htbd-ink);
	vertical-align: top;
	background: #fff;
	text-align: left;
}
body.htbd-on .htbd-tablewrap tbody tr:nth-child(even) td { background: var(--htbd-zebra); }
body.htbd-on .htbd-tablewrap td:first-child { font-weight: 600; }

/* Veeg-hint (JS zet .htbd-scroll zodra de tabel breder is dan het kader). */
body.htbd-on .htbd-tablewrap .htbd-swipehint {
	display: none;
	position: sticky;
	left: 0;
	bottom: 10px;
	margin: 0 10px 0 auto;
	width: fit-content;
	align-items: center;
	gap: 6px;
	background: var(--htbd-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
	pointer-events: none;
}
body.htbd-on .htbd-tablewrap.htbd-scroll .htbd-swipehint { display: inline-flex; }
body.htbd-on .htbd-tablewrap.htbd-scrolled .htbd-swipehint { display: none; }

/* ------------------------------------------------------- Leesvoortgang */

.htbd-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--htbd-soft, #eeeff2);
	z-index: 9990;
	pointer-events: none;
}
/* Ingelogd: de WP-adminbalk (32px, z-index 99999) zit óók op top:0 en
   bedekt de balk anders volledig. */
body.admin-bar .htbd-progress { top: 32px; }
.htbd-progress-fill,
.htbd-bar-progress-fill {
	width: 0;
	height: 100%;
	background: var(--htbd-primary, #223558);
	transition: width .1s linear;
}

/* ----------------------------------------------------------------- TOC */

body.htbd-on .htbd-toc { padding: 22px 16px 16px 13px; }
body.htbd-on .htbd-toc-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 0 12px 12px 15px;
}
body.htbd-on .htbd-toc-title { font-size: 16px; font-weight: 700; color: var(--htbd-primary); }
body.htbd-on .htbd-toc-count { font-size: 12px; color: var(--htbd-meta); }
body.htbd-on .htbd-toc-list { display: flex; flex-direction: column; gap: 2px; }
body.htbd-on .htbd-toc-a {
	display: block;
	padding: 8px 12px;
	border-left: 3px solid transparent;
	border-radius: 0 10px 10px 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--htbd-muted);
	text-decoration: none;
}
body.htbd-on .htbd-toc-a:hover { background: var(--htbd-hoverbg); color: var(--htbd-primary); }
body.htbd-on .htbd-toc-a.htbd-active {
	border-left-color: var(--htbd-primary);
	background: var(--htbd-activebg);
	color: var(--htbd-primary);
	font-weight: 600;
}
body.htbd-on .htbd-toc-sub { padding-left: 26px; font-size: 13px; }

/* ------------------------------------------------------------- Toolbar */

body.htbd-on .htbd-toolbar {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 12px 16px;
	border-radius: 18px;
	margin-bottom: 8px;
}
body.htbd-on .htbd-toolbar-sep { width: 1px; height: 26px; background: var(--htbd-line); }
body.htbd-on .htbd-toolbar-spacer { flex: 1 1 auto; }

body.htbd-on .htbd-listen {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--htbd-primary);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 8px 20px 8px 9px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}
body.htbd-on .htbd-listen:hover { background: var(--htbd-deep); }
body.htbd-on .htbd-listen-ic {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

body.htbd-on .htbd-fontsize {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--htbd-line);
	border-radius: 999px;
	overflow: hidden;
}
body.htbd-on .htbd-fnt {
	border: 0;
	background: #fff;
	color: var(--htbd-ink);
	font-family: inherit;
	padding: 8px 14px;
	cursor: pointer;
	line-height: 1;
	min-height: 36px;
}
body.htbd-on .htbd-fnt-1 { font-size: 13px; }
body.htbd-on .htbd-fnt-2 { font-size: 15px; }
body.htbd-on .htbd-fnt-3 { font-size: 17px; }
body.htbd-on .htbd-fnt:hover { background: var(--htbd-hoverbg); }
body.htbd-on .htbd-fnt.htbd-active { background: var(--htbd-activebg); font-weight: 700; color: var(--htbd-primary); }

body.htbd-on .htbd-share { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.htbd-on .htbd-sharebtn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--htbd-line);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--htbd-primary);
	background: #fff;
	text-decoration: none;
	cursor: pointer;
	padding: 0;
	font-family: inherit;
	flex: none;
}
body.htbd-on .htbd-sharebtn:hover { border-color: var(--htbd-primary); }
body.htbd-on .htbd-glyph { font-size: 13px; font-weight: 800; line-height: 1; }

/* ------------------------------------------------------------ Speler */

body.htbd-on .htbd-player {
	background: #fff;
	border: 1px solid var(--htbd-line);
	border-radius: 18px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
}
body.htbd-on .htbd-player-inline { margin-bottom: 8px; }
body.htbd-on .htbd-player-docked {
	position: fixed;
	left: 10px;
	right: 10px;
	bottom: calc(84px + env(safe-area-inset-bottom, 0px));
	z-index: 9996;
	box-shadow: 0 12px 32px rgba(31, 46, 76, .16);
	display: none;
}
body.htbd-on .htbd-player-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.htbd-on .htbd-player-kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--htbd-meta);
}
body.htbd-on .htbd-player-close {
	border: 0;
	background: none;
	color: var(--htbd-muted);
	cursor: pointer;
	padding: 4px;
	line-height: 1;
	font-family: inherit;
}
body.htbd-on .htbd-player-row { display: flex; align-items: center; gap: 14px; }
body.htbd-on .htbd-player-play {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: var(--htbd-primary);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex: none;
	font-family: inherit;
}
body.htbd-on .htbd-player-play:hover { background: var(--htbd-deep); }
/* Icoon-span krijgt anders baseline-ruimte en hangt scheef in de cirkel. */
body.htbd-on .htbd-player-play [data-htbd-tts-icon],
body.htbd-on .htbd-listen-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
body.htbd-on .htbd-player-play svg,
body.htbd-on .htbd-listen-ic svg { display: block; }
body.htbd-on .htbd-player-mid { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; min-width: 0; }
body.htbd-on .htbd-player-track { height: 5px; border-radius: 3px; background: var(--htbd-soft); overflow: hidden; }
body.htbd-on .htbd-player-fill { width: 0; height: 100%; border-radius: 3px; background: var(--htbd-primary); }
body.htbd-on .htbd-player-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 12px;
	color: var(--htbd-muted);
}
body.htbd-on .htbd-player-rate {
	border: 1px solid #d7dae3;
	background: #fff;
	color: var(--htbd-ink);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	border-radius: 999px;
	padding: 7px 12px;
	cursor: pointer;
	flex: none;
}
body.htbd-on .htbd-tts-current { background: var(--htbd-activebg); border-radius: 6px; }

/* ----------------------------------------------------------- Takeaways */

body.htbd-on .htbd-takeaways {
	background: var(--htbd-soft);
	border-radius: var(--htbd-radius);
	padding: 26px 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 8px;
}
body.htbd-on .htbd-takeaways-head { display: flex; align-items: center; gap: 12px; }
body.htbd-on .htbd-takeaways-ic {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--htbd-primary);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
body.htbd-on .htbd-takeaways-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--htbd-primary); }
body.htbd-on .htbd-takeaways-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
body.htbd-on .htbd-takeaways-list li { display: flex; gap: 12px; margin: 0; font-size: calc(var(--htbd-fs) - 1px); line-height: 1.6; color: var(--htbd-ink); }
body.htbd-on .htbd-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--htbd-primary); margin-top: .55em; }

/* ------------------------------------------------------------ Personen */

body.htbd-on .htbd-avatar {
	position: relative;
	width: var(--htbd-av, 56px);
	height: var(--htbd-av, 56px);
	flex: none;
	display: inline-block;
}
body.htbd-on .htbd-avatar img,
body.htbd-on .htbd-avatar-ini {
	width: 100%;
	height: 100%;
	border-radius: 14px;
	object-fit: cover;
	display: block;
}
body.htbd-on .htbd-avatar-ini {
	background: var(--htbd-soft);
	color: var(--htbd-primary);
	font-weight: 700;
	font-size: calc(var(--htbd-av, 56px) * .32);
	display: flex;
	align-items: center;
	justify-content: center;
}
body.htbd-on .htbd-avatar-check {
	position: absolute;
	right: -4px;
	bottom: -4px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--htbd-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px #fff;
}

body.htbd-on .htbd-authorbox {
	display: grid;
	grid-template-columns: 1fr 1px 1fr;
	gap: 28px;
	padding: 24px 28px;
	margin: 0;
}
body.htbd-on .htbd-authorbox-sep { background: var(--htbd-line); }
body.htbd-on .htbd-authorbox-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
body.htbd-on .htbd-authorbox-who { display: flex; align-items: center; gap: 14px; }
body.htbd-on .htbd-authorbox-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.htbd-on .htbd-authorbox-name { font-size: 17px; font-weight: 700; color: var(--htbd-primary); }
body.htbd-on .htbd-authorbox-role { font-size: 13px; color: var(--htbd-muted); }
body.htbd-on .htbd-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--htbd-primary);
	background: var(--htbd-activebg);
	border-radius: 999px;
	padding: 3px 10px;
	width: fit-content;
}
body.htbd-on .htbd-authorbox-bio { margin: 0; font-size: 14px; line-height: 1.6; color: var(--htbd-muted); }
body.htbd-on .htbd-morelink { font-size: 13px; font-weight: 600; color: var(--htbd-primary); text-decoration: none; }
body.htbd-on .htbd-morelink:hover { color: var(--htbd-deep); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767px) {
	body.htbd-on .htbd-authorbox { grid-template-columns: 1fr; }
	body.htbd-on .htbd-authorbox-sep { width: 100%; height: 1px; }
}

/* ----------------------------------------------------------------- CTA */

/* Marges van de slotblokken staan op 0: de Elementor-container bepaalt
   het ritme met zijn eigen gap (zet die op ±20px), anders stapelen de
   afstanden op elkaar. */
body.htbd-on .htbd-cta {
	background: var(--htbd-primary);
	border-radius: var(--htbd-radius);
	padding: 28px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	flex-wrap: wrap;
	margin: 0;
}
body.htbd-on .htbd-cta-copy { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
body.htbd-on .htbd-cta-title { margin: 0; font-size: 21px; line-height: 1.25; font-weight: 700; color: #fff; }
body.htbd-on .htbd-cta-text { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
body.htbd-on .htbd-cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: none; }
body.htbd-on .htbd-cta-btn {
	background: #fff;
	color: var(--htbd-primary);
	font-size: 14px;
	font-weight: 700;
	padding: 14px 26px;
	border-radius: 999px;
	text-decoration: none;
}
body.htbd-on .htbd-cta-btn:hover { color: var(--htbd-deep); }
body.htbd-on .htbd-cta-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
}
body.htbd-on .htbd-cta-phone:hover { color: #fff; }

/* -------------------------------------------------------------- Recent */

/* Kaartengrid in de taal van Hairtec Related Posts. */
body.htbd-on .htbd-recent { margin: 48px 0 8px; }
body.htbd-on .htbd-recent-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}
body.htbd-on .htbd-recent-h {
	margin: 0;
	font-size: 32px;
	line-height: 1.15;
	font-weight: 400;
	color: var(--htbd-primary);
}
/* Zelfde taal als de sitebrede .ht-btn: navy pill, wit, uppercase 12/700,
   radius 100px, pijl rechts. */
body.htbd-on a.htbd-alllink {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	border: 0;
	border-radius: 100px;
	padding: 17px 28px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: uppercase;
	background: var(--htbd-primary);
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
}
body.htbd-on a.htbd-alllink:hover { background: var(--htbd-deep); color: #fff; }
body.htbd-on .htbd-recent-grid {
	display: grid;
	grid-template-columns: repeat(var(--htbd-recent-cols, 4), minmax(0, 1fr));
	gap: 24px 20px;
}
body.htbd-on .htbd-recent-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	min-width: 0;
}
body.htbd-on .htbd-recent-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 20px;
	overflow: hidden;
	background: var(--htbd-soft);
}
body.htbd-on .htbd-recent-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}
body.htbd-on .htbd-recent-ph {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--htbd-meta);
}
body.htbd-on .htbd-recent-title { font-size: 17px; font-weight: 600; color: var(--htbd-primary); line-height: 1.35; }
body.htbd-on .htbd-recent-card:hover .htbd-recent-title { color: var(--htbd-deep); }
body.htbd-on .htbd-recent-date { font-size: 13px; color: var(--htbd-meta); }

@media (max-width: 1024px) {
	body.htbd-on .htbd-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.htbd-on .htbd-recent-h { font-size: 26px; }
}
@media (max-width: 600px) {
	body.htbd-on .htbd-recent-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------- Verder lezen (minimal) */

body.htbd-on .htbd-verder { margin: 0; }
body.htbd-on .htbd-verder-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 56px;
	align-items: start;
}
body.htbd-on .htbd-verder-colh { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--htbd-primary); }
body.htbd-on .htbd-verder-row {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 14px 0;
	text-decoration: none;
	border-top: 1px solid var(--htbd-soft);
}
body.htbd-on .htbd-verder-thumb {
	width: 72px;
	height: 54px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--htbd-soft);
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--htbd-meta);
}
body.htbd-on .htbd-verder-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}
body.htbd-on .htbd-verder-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.htbd-on .htbd-verder-rowtitle { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--htbd-primary); }
body.htbd-on .htbd-verder-row:hover .htbd-verder-rowtitle { color: var(--htbd-deep); }

@media (max-width: 767px) {
	body.htbd-on .htbd-verder-cols { grid-template-columns: 1fr; gap: 24px; }
}

/* ------------------------------------------------------------ Feedback */

body.htbd-on .htbd-feedback { padding: 18px 24px; }
body.htbd-on .htbd-feedback-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
body.htbd-on .htbd-feedback-q { margin: 0; font-size: 16px; font-weight: 600; color: var(--htbd-ink); }
body.htbd-on .htbd-feedback-btns { display: flex; gap: 10px; }
body.htbd-on .htbd-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #d7dae3;
	border-radius: 999px;
	padding: 10px 18px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--htbd-ink);
	cursor: pointer;
	min-height: 42px;
}
body.htbd-on .htbd-pill:hover { border-color: var(--htbd-primary); color: var(--htbd-primary); }
body.htbd-on .htbd-pill-solid { background: var(--htbd-primary); border-color: var(--htbd-primary); color: #fff; }
body.htbd-on .htbd-pill-solid:hover { background: var(--htbd-deep); color: #fff; }
body.htbd-on .htbd-flip { display: inline-flex; transform: rotate(180deg); }
body.htbd-on .htbd-feedback-note { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
body.htbd-on .htbd-feedback-note[hidden] { display: none; }
body.htbd-on .htbd-feedback-notelabel { font-size: 13px; color: var(--htbd-muted); }
body.htbd-on .htbd-feedback-note textarea {
	border: 1px solid var(--htbd-line);
	border-radius: 12px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
}
body.htbd-on .htbd-feedback-note .htbd-pill { align-self: flex-start; }
body.htbd-on .htbd-feedback-thanks {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--htbd-muted);
}
body.htbd-on .htbd-feedback-thanks[hidden] { display: none; }
body.htbd-on .htbd-thanks-ic {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--htbd-primary);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

/* ----------------------------------------------------- FAQ-accordeon */

/* Vraagrij: chevron rechts uitgelijnd, dunne lijn tussen de items. */
body.htbd-on .htbd-faq-item { border-bottom: 1px solid var(--htbd-line); }
body.htbd-on .htbd-faq-item h3 { margin: 0; }
body.htbd-on .htbd-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	background: none;
	border: 0;
	padding: 17px 0;
	margin: 0;
	font-family: inherit;
	font-size: calc(var(--htbd-fs) + 1px);
	font-weight: 600;
	color: var(--htbd-primary);
	text-align: left;
	cursor: pointer;
	line-height: 1.4;
	white-space: normal;
	overflow-wrap: anywhere;
}
body.htbd-on .htbd-faq-q svg { flex: none; width: 16px; height: 16px; transition: transform .18s ease; }
body.htbd-on .htbd-faq-q[aria-expanded="true"] svg { transform: rotate(180deg); }
body.htbd-on .htbd-faq-a { padding: 0 0 18px; }
body.htbd-on .htbd-faq-a[hidden] { display: none; }
body.htbd-on .htbd-faq-a > :first-child { margin-top: 0; }

/* --------------------------- Schema Manager-box in de huisstijl -------- */

/* "Hoe we dit artikel hebben beoordeeld" (hsm-review-box) staat kaal in
   de content; we kleden hem aan als zachte kaart uit het design, zonder
   aan het Schema Manager-plugin zelf te komen. Specifieker dan hun eigen
   !important-regels dankzij de body-prefix. */
body.htbd-on .hsm-review-box {
	background: var(--htbd-soft);
	border-radius: var(--htbd-radius);
	padding: 22px 26px;
	margin: 40px 0 0;
}
body.htbd-on .hsm-review-box .hsm-review-title {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 14px;
	font-size: 20px;
	line-height: 1.3;
}
body.htbd-on .hsm-review-box .hsm-review-title::before {
	content: "";
	flex: none;
	width: 21px;
	height: 21px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223558' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 7.6-7 9-4-1.4-7-4.5-7-9V6z'/%3E%3Cpath d='M9 11.5l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.htbd-on .hsm-review-box .hsm-review-pills button.hsm-pill {
	background: #fff !important;
	border: 1px solid #D7DAE3 !important;
}
body.htbd-on .hsm-review-box .hsm-review-pills button.hsm-pill:hover,
body.htbd-on .hsm-review-box .hsm-review-pills button.hsm-pill[aria-expanded="true"] {
	background: var(--htbd-primary) !important;
	border-color: var(--htbd-primary) !important;
	color: #fff !important;
}
body.htbd-on .hsm-review-box .hsm-review-rule { display: none; }

/* Slotblokken: geen eigen verticale marge (zie de notitie bij .htbd-cta). */
body.htbd-on .htbd-feedback,
body.htbd-on .htbd-authorbox { margin: 0; }

/* -------------------------------------------- Onderbalk + bottom sheets */

.htbd-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9995;
	background: #fff;
	border-top: 1px solid var(--htbd-line, #e3e5eb);
	box-shadow: 0 -8px 24px rgba(31, 46, 76, .08);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	display: none;
}
.htbd-bar-progress { height: 3px; background: var(--htbd-soft, #eeeff2); }
.htbd-bar-row { display: flex; align-items: stretch; padding: 6px 8px 10px; }
.htbd-bar-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	background: none;
	border: 0;
	padding: 7px 0 0;
	font-family: inherit;
	color: var(--htbd-muted, #5c5c5c);
	cursor: pointer;
	min-height: 48px;
}
.htbd-bar-btn span:last-child { font-size: 10px; font-weight: 600; }
.htbd-bar-btn.htbd-active,
.htbd-bar-btn:hover { color: var(--htbd-primary, #223558); }
.htbd-bar-aa { font-size: 19px; font-weight: 700; line-height: 20px; display: block; height: 20px; }

.htbd-overlay {
	position: fixed;
	inset: 0;
	background: rgba(35, 31, 32, .32);
	z-index: 9997;
}
.htbd-overlay[hidden] { display: none; }

.htbd-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	background: #fff;
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -10px 40px rgba(31, 46, 76, .2);
	max-height: 72vh;
	display: flex;
	flex-direction: column;
	padding: 10px 14px calc(24px + env(safe-area-inset-bottom, 0px));
	box-sizing: border-box;
}
.htbd-sheet[hidden] { display: none; }
.htbd-sheet-handle {
	width: 40px;
	height: 4px;
	border-radius: 2px;
	background: #d7dae3;
	margin: 0 auto 6px;
	flex: none;
}
.htbd-sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px 12px;
	flex: none;
}
.htbd-sheet-title { font-size: 18px; font-weight: 700; color: var(--htbd-primary, #223558); }
.htbd-sheet-close {
	width: 32px;
	height: 32px;
	border: 0;
	background: none;
	border-radius: 50%;
	color: var(--htbd-muted, #5c5c5c);
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.htbd-sheet-close:hover { background: var(--htbd-soft, #eeeff2); }
.htbd-sheet-body { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; }
.htbd-sheet-a {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	border-left: 3px solid transparent;
	border-radius: 0 12px 12px 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--htbd-ink, #231f20);
	text-decoration: none;
}
.htbd-sheet-a.htbd-active {
	border-left-color: var(--htbd-primary, #223558);
	background: var(--htbd-activebg, #eef1f6);
	color: var(--htbd-primary, #223558);
	font-weight: 600;
}
.htbd-sheet-a.htbd-toc-sub { padding-left: 42px; font-size: 14px; color: var(--htbd-muted, #5c5c5c); }
.htbd-sheet-num {
	font-size: 13px;
	color: #b9bdc9;
	font-weight: 700;
	min-width: 16px;
	padding-top: 1px;
}
.htbd-sheet-a.htbd-active .htbd-sheet-num { color: var(--htbd-primary, #223558); }
.htbd-sheet-foot {
	flex: none;
	border-top: 1px solid var(--htbd-soft, #eeeff2);
	padding: 12px 10px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 12px;
	color: var(--htbd-meta, #767676);
}
.htbd-sheet-reviewed {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--htbd-primary, #223558);
}
.htbd-sheet-note { flex: none; margin: 10px 10px 0; font-size: 12px; color: var(--htbd-meta, #767676); }

.htbd-fs-options { gap: 8px; padding: 4px 6px; }
.htbd-fs-opt {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid var(--htbd-line, #e3e5eb);
	background: #fff;
	border-radius: 14px;
	padding: 12px 16px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--htbd-ink, #231f20);
	cursor: pointer;
	text-align: left;
}
.htbd-fs-opt.htbd-active { border-color: var(--htbd-primary, #223558); background: var(--htbd-activebg, #eef1f6); color: var(--htbd-primary, #223558); }
.htbd-fs-sample { font-weight: 700; color: var(--htbd-primary, #223558); min-width: 34px; }

.htbd-share-list { gap: 4px; padding: 4px 6px; }
.htbd-share-row {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 0;
	background: none;
	padding: 8px 6px;
	font-family: inherit;
	font-size: 15px;
	color: var(--htbd-ink, #231f20);
	text-decoration: none;
	cursor: pointer;
	text-align: left;
	border-radius: 12px;
}
.htbd-share-row:hover { background: var(--htbd-hoverbg, #f4f5f8); }

body.htbd-locked { overflow: hidden; }

/* Toast ("Link gekopieerd"). */
.htbd-toast {
	position: fixed;
	left: 50%;
	bottom: calc(96px + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	background: var(--htbd-ink, #231f20);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: 999px;
	z-index: 9999;
	pointer-events: none;
}

/* ------------------------------------------------------ Breekpunten */

@media (max-width: 1024px) {
	/* Onderbalk neemt het over; desktopcomponenten weg. Verberg óók de
	   Elementor-WRAPPERS (.elementor-widget-htbd-*): een wrapper met
	   0 hoogte blijft anders een flex-gap van de container opeten en
	   maakt een loos gat tussen de artikelkop en In het kort. */
	body.htbd-on.htbd-has-bar .htbd-bar { display: block; }
	body.htbd-on.htbd-has-bar { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
	body.htbd-on .htbd-toc,
	body.htbd-on .htbd-toolbar,
	body.htbd-on .elementor-widget-htbd-toolbar,
	body.htbd-on .elementor-widget-htbd-toc,
	body.htbd-on .htbd-player-inline,
	body.htbd-on .htbd-progress { display: none; }
	body.htbd-on .htbd-hero--band { margin-bottom: 0; }
	body.htbd-on.htbd-player-open .htbd-player-docked { display: flex; }
	body.htbd-on h2[id],
	body.htbd-on h3[id] { scroll-margin-top: 24px; }
	body.htbd-on .htbd-takeaways { padding: 18px; border-radius: 16px; }
	body.htbd-on .htbd-cta { padding: 24px; }
	body.htbd-on .htbd-authorbox { padding: 20px; gap: 20px; }
}

@media (min-width: 1025px) {
	.htbd-bar,
	.htbd-sheet,
	.htbd-overlay,
	.htbd-player-docked { display: none !important; }
}

/* --------------------------------------------------------------- Print */

@media print {
	.htbd-bar,
	.htbd-sheet,
	.htbd-overlay,
	.htbd-player,
	.htbd-progress,
	.htbd-toolbar,
	.htbd-feedback { display: none !important; }
	body.htbd-on .htbd-tablewrap { overflow: visible; border: 1px solid #999; }
}

/* ---------------------------------------------------- Artikelkop (hero) */

body.htbd-on .htbd-hero { display: flex; flex-direction: column; gap: 16px; margin-bottom: 10px; }
body.htbd-on .htbd-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--htbd-meta);
}
body.htbd-on .htbd-crumbs a { color: var(--htbd-meta); text-decoration: none; }
body.htbd-on .htbd-crumbs a:hover { color: var(--htbd-primary); }
body.htbd-on .htbd-crumbs-cur { color: var(--htbd-ink); }
body.htbd-on h1.htbd-hero-title {
	margin: 0;
	font-size: 40px;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: normal;
	color: var(--htbd-primary);
	max-width: 920px;
}
body.htbd-on .htbd-hero-meta {
	display: flex;
	align-items: center;
	gap: 8px 20px;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--htbd-muted);
}
body.htbd-on .htbd-meta-item { display: inline-flex; align-items: center; gap: 7px; }
body.htbd-on .htbd-meta-reviewed { color: var(--htbd-primary); font-weight: 600; }
body.htbd-on .htbd-hero-img { border-radius: var(--htbd-radius); overflow: hidden; }
body.htbd-on .htbd-hero-img img {
	display: block;
	width: 100%;
	height: var(--htbd-hero-h, 420px);
	object-fit: cover;
	border-radius: 0;
}
@media (max-width: 767px) {
	body.htbd-on h1.htbd-hero-title { font-size: 30px; line-height: 1.15; }
	body.htbd-on .htbd-hero { gap: 12px; }
	body.htbd-on .htbd-hero-meta { font-size: 12px; gap: 6px 14px; }
	body.htbd-on .htbd-hero-img { border-radius: 16px; }
	body.htbd-on .htbd-hero-img img { height: 230px; }
}

/* Minimale band-variant: zachte #EEEFF2-band van rand tot rand, direct
   onder de header (zoals de homepage); tekst links, kleine afbeelding
   rechts. De band loopt via 50%−50vw buiten zijn Elementor-container;
   de zijpadding legt de inhoud weer precies op de containerrand.
   overflow-x: clip (géén scrollcontainer, sticky blijft werken) vangt
   het scrollbalk-restje op. Zet de boven-padding van de container
   waarin de widget staat op 0 zodat de band de header raakt. */
/* 'hidden' en NIET 'clip': clip propageert naar de viewport en zet de
   browser in een niet-standaard scrollmodus — live gemeten: window.scrollTo
   dood, scrollY altijd 0, sticky header jittert op touch (de "schuivende
   thumbnail" op mobiel). Met hidden werkt alles standaard. */
html:has(body.htbd-on) { overflow-x: hidden; }
body.htbd-on { overflow-x: hidden; }
/* Sheet-scrollvergrendeling moet op dezelfde laag zitten als de
   overflow hierboven, anders scrolt de pagina achter een open sheet door. */
html:has(body.htbd-locked) { overflow: hidden; }
body.htbd-on .htbd-hero--band {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	background: var(--htbd-soft);
	border-radius: 0;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 34px max(24px, calc(50vw - 50%)) 34px;
	box-sizing: border-box;
	/* Dicht de Elementor-ruimte boven de band door omhoog te schilderen:
	   puur verf, nul layout-impact, dus scroll-stabiel. Overschot
	   verdwijnt achter de (door JS grijs gemaakte, sticky) header. */
	box-shadow: 0 -160px 0 0 var(--htbd-soft);
}
body.htbd-on .htbd-hero-copy {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	flex: 1 1 auto;
}
body.htbd-on .htbd-hero--band .htbd-crumbs,
body.htbd-on .htbd-hero--band .htbd-crumbs a { color: var(--htbd-muted); }
body.htbd-on .htbd-hero--band .htbd-crumbs a:hover { color: var(--htbd-primary); }
body.htbd-on .htbd-hero--band h1.htbd-hero-title { font-size: 36px; }
body.htbd-on .htbd-hero--band .htbd-hero-img {
	flex: 0 0 360px;
	border-radius: 16px;
}
body.htbd-on .htbd-hero--band .htbd-hero-img img { height: var(--htbd-hero-h, 220px); }
@media (max-width: 1024px) {
	body.htbd-on .htbd-hero--band { gap: 24px; padding-top: 24px; padding-bottom: 24px; }
	body.htbd-on .htbd-hero--band .htbd-hero-img { flex-basis: 300px; }
	body.htbd-on .htbd-hero--band h1.htbd-hero-title { font-size: 32px; }
}
@media (max-width: 767px) {
	body.htbd-on .htbd-hero--band {
		flex-direction: column;
		/* In kolomrichting NIET space-between (geërfd van desktop): als een
		   parent-container de band oprekt, duwt dat de thumbnail naar de
		   bodem en ontstaat een groot gat tussen meta en afbeelding. */
		justify-content: flex-start;
		align-items: stretch;
		gap: 16px;
		height: auto;
		min-height: 0;
		padding: 18px max(18px, calc(50vw - 50%)) 20px;
		border-radius: 0;
	}
	body.htbd-on .htbd-hero--band h1.htbd-hero-title { font-size: 28px; }
	body.htbd-on .htbd-hero--band .htbd-hero-copy { flex: none; }
	body.htbd-on .htbd-hero--band .htbd-hero-img { flex: none; }
	body.htbd-on .htbd-hero--band .htbd-hero-img img { height: 170px; }
}

/* ------------------------------------------------------ Minder beweging */

@media (prefers-reduced-motion: reduce) {
	.htbd-progress-fill,
	.htbd-bar-progress-fill,
	body.htbd-on .htbd-faq-q svg { transition: none; }
}

/* ===================================================================
   Elementor-kit resets — MOET als laatste blijven staan.
   De kit zet generieke regels op `button` (navy achtergrond, pill,
   uppercase, brede padding) die onze knoppen overschrijven; zelfde
   aanpak als Schema Manager 3.1.2: element-gekwalificeerde selectors
   met !important.
   =================================================================== */

body.htbd-on button.htbd-fnt,
body.htbd-on button.htbd-pill,
body.htbd-on button.htbd-listen,
body.htbd-on button.htbd-sharebtn,
body.htbd-on button.htbd-faq-q,
body.htbd-on button.htbd-player-play,
body.htbd-on button.htbd-player-rate,
body.htbd-on button.htbd-player-close,
body.htbd-on button.htbd-sheet-close,
body.htbd-on button.htbd-fs-opt,
body.htbd-on button.htbd-share-row,
body.htbd-on button.htbd-bar-btn {
	font-family: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	min-height: 0 !important;
	width: auto !important;
	line-height: 1.4 !important;
}

body.htbd-on button.htbd-fnt {
	background: #fff !important;
	color: var(--htbd-ink) !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 8px 14px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	min-height: 36px !important;
}
body.htbd-on button.htbd-fnt:hover { background: var(--htbd-hoverbg) !important; }
body.htbd-on button.htbd-fnt.htbd-active {
	background: var(--htbd-activebg) !important;
	color: var(--htbd-primary) !important;
	font-weight: 700 !important;
}
body.htbd-on button.htbd-fnt-1 { font-size: 13px !important; }
body.htbd-on button.htbd-fnt-2 { font-size: 15px !important; }
body.htbd-on button.htbd-fnt-3 { font-size: 17px !important; }

body.htbd-on button.htbd-listen {
	background: var(--htbd-primary) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 8px 20px 8px 9px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
}
body.htbd-on button.htbd-listen:hover { background: var(--htbd-deep) !important; }

body.htbd-on button.htbd-pill {
	background: #fff !important;
	border: 1px solid #d7dae3 !important;
	color: var(--htbd-ink) !important;
	border-radius: 999px !important;
	padding: 10px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	min-height: 42px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}
body.htbd-on button.htbd-pill:hover {
	background: #fff !important;
	border-color: var(--htbd-primary) !important;
	color: var(--htbd-primary) !important;
}
body.htbd-on button.htbd-pill-solid,
body.htbd-on button.htbd-pill-solid:hover {
	background: var(--htbd-primary) !important;
	border-color: var(--htbd-primary) !important;
	color: #fff !important;
}
body.htbd-on button.htbd-pill-solid:hover { background: var(--htbd-deep) !important; }

body.htbd-on button.htbd-sharebtn,
body.htbd-on a.htbd-sharebtn {
	width: 38px !important;
	height: 38px !important;
	padding: 0 !important;
	border: 1px solid var(--htbd-line) !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--htbd-primary) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
body.htbd-on button.htbd-sharebtn:hover,
body.htbd-on a.htbd-sharebtn:hover { border-color: var(--htbd-primary) !important; background: #fff !important; }

body.htbd-on button.htbd-faq-q {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 17px 0 !important;
	margin: 0 !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	color: var(--htbd-primary) !important;
	font-size: calc(var(--htbd-fs) + 1px) !important;
	font-weight: 600 !important;
	text-align: left !important;
	/* Kit-knoppen zetten white-space: nowrap; lange vragen moeten wél
	 * afbreken (anders lopen ze op mobiel buiten beeld). */
	white-space: normal !important;
	line-height: 1.4 !important;
}
body.htbd-on button.htbd-faq-q:hover,
body.htbd-on button.htbd-faq-q:focus {
	background: none !important;
	color: var(--htbd-deep) !important;
}

body.htbd-on button.htbd-player-play {
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--htbd-primary) !important;
	color: #fff !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
body.htbd-on button.htbd-player-play:hover { background: var(--htbd-deep) !important; }
body.htbd-on button.htbd-player-rate {
	background: #fff !important;
	border: 1px solid #d7dae3 !important;
	color: var(--htbd-ink) !important;
	border-radius: 999px !important;
	padding: 7px 12px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
}
body.htbd-on button.htbd-player-close,
body.htbd-on button.htbd-sheet-close {
	background: none !important;
	border: 0 !important;
	border-radius: 50% !important;
	padding: 4px !important;
	color: var(--htbd-muted) !important;
}
body.htbd-on button.htbd-sheet-close {
	width: 32px !important;
	height: 32px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
body.htbd-on button.htbd-sheet-close:hover { background: var(--htbd-soft) !important; }

body.htbd-on button.htbd-fs-opt {
	background: #fff !important;
	border: 1px solid var(--htbd-line) !important;
	border-radius: 14px !important;
	padding: 12px 16px !important;
	color: var(--htbd-ink) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	text-align: left !important;
	width: 100% !important;
}
body.htbd-on button.htbd-fs-opt.htbd-active {
	border-color: var(--htbd-primary) !important;
	background: var(--htbd-activebg) !important;
	color: var(--htbd-primary) !important;
}

body.htbd-on button.htbd-share-row {
	background: none !important;
	border: 0 !important;
	border-radius: 12px !important;
	padding: 8px 6px !important;
	color: var(--htbd-ink) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	text-align: left !important;
	width: 100% !important;
}
body.htbd-on button.htbd-share-row:hover { background: var(--htbd-hoverbg) !important; }

body.htbd-on button.htbd-bar-btn {
	flex: 1 1 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 7px 0 0 !important;
	margin: 0 !important;
	color: var(--htbd-muted) !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 4px !important;
	min-height: 48px !important;
}
body.htbd-on button.htbd-bar-btn:hover,
body.htbd-on button.htbd-bar-btn.htbd-active { color: var(--htbd-primary) !important; background: none !important; }

/* [hidden] moet óók winnen van de display-resets hierboven. */
body.htbd-on button.htbd-listen[hidden],
body.htbd-on button.htbd-bar-btn[hidden] { display: none !important; }

/* Cookiebot-badge: op mobiel boven de onderbalk uit, en helemaal weg
   zolang een bottom sheet of de speler open is. */
@media (max-width: 1024px) {
	body.htbd-on.htbd-has-bar #CookiebotWidget { transform: translateY(calc(-72px - env(safe-area-inset-bottom, 0px))) !important; }
}
body.htbd-locked #CookiebotWidget,
body.htbd-player-open #CookiebotWidget { display: none !important; }