/* Upsell-banner bovenin de handleidingen (Site\HandleidingUpsell, templates/site/deel/handleiding-upsell.php), namespace .hu.
   Huisstijl van de productpagina's: Roboto VF, navy #152a80 / #1d65af, tekst #17191c, gedimd #5e636e, randen #e9eaec. */
.hu { font-family: 'Roboto VF', 'Roboto', system-ui, sans-serif; color: #17191c; line-height: 1.5; -webkit-font-smoothing: antialiased; background: #fff; }
.hu p, .hu ul { margin: 0; padding: 0; }
.hu ul { list-style: none; }
.hu-c { max-width: 1288px; margin: 0 auto; padding: 22px 24px 6px; }
.eoh-art .hu-c { padding-bottom: 0; }
.hu-kaart { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 22px; align-items: center;
	padding: 18px 22px; border-radius: 14px; border: 1px solid #dfe5f3; background: linear-gradient(110deg, #f4f7fe 0%, #fff 55%, #f7f9ff 100%);
	box-shadow: 0 6px 24px rgba(21, 42, 128, .07); }
.hu-kaart::after { content: ''; position: absolute; right: -60px; top: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(29, 101, 175, .10), rgba(29, 101, 175, 0)); pointer-events: none; }
.hu-icoon { width: 52px; height: 52px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #fff;
	background: linear-gradient(135deg, #152a80, #1d65af); box-shadow: 0 6px 16px rgba(21, 42, 128, .25); align-self: start; }
.hu-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hu-eyebrow { font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; color: #1062fe; }
.hu-titel { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: #152a80; line-height: 1.25; }
.hu-sub { font-size: 14.5px; color: #4a4f59; max-width: 640px; }
.hu-regel { font-size: 13.5px; color: #3d424b; margin-top: 4px !important; }
.hu-nieuw { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #152a80; background: #ffd166; border-radius: 999px; padding: 1px 8px; margin-right: 4px; vertical-align: 1px; }
.hu-rechts { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.hu-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.hu-chip { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13.5px; background: #fff; border: 1px solid #d6dbe6; border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.hu-chip b { font-weight: 700; color: #152a80; }
.hu-prijs { color: #17191c; font-weight: 600; }
.hu-prijs small { font-size: 12px; color: #5e636e; font-weight: 500; margin-left: 1px; }
.hu-chip-gratis { background: #e9f7ef; border-color: #b9e4c9; }
.hu-chip-gratis .hu-prijs { color: #0b7a3e; font-weight: 800; }
.hu-btw { font-size: 11.5px; color: #8a909b; }
.hu-knoppen { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.hu .hu-knop { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; padding: 10px 16px; border-radius: 8px; border: 1px solid #c9d2e6; color: #152a80; background: #fff; text-decoration: none; white-space: nowrap; }
.hu .hu-knop:hover { border-color: #1d65af; text-decoration: none; }
.hu .hu-knop-primair { background: #152a80; border-color: #152a80; color: #fff; box-shadow: 0 6px 18px rgba(21, 42, 128, .22); }
.hu .hu-knop-primair:hover { background: #1d3aa0; border-color: #1d3aa0; }
.hu .hu-knop:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }

@media (max-width: 1080px) {
	.hu-kaart { grid-template-columns: auto minmax(0, 1fr); }
	.hu-rechts { grid-column: 1 / -1; align-items: flex-start; }
	.hu-chips, .hu-knoppen { justify-content: flex-start; }
}
@media (max-width: 600px) {
	.hu-c { padding: 14px 14px 4px; }
	.hu-kaart { gap: 12px 14px; padding: 16px; }
	.hu-icoon { width: 42px; height: 42px; border-radius: 11px; }
	.hu-icoon svg { width: 22px; height: 22px; }
	.hu-titel { font-size: 17px; }
	.hu-sub { display: none; }   /* mobiel compact: titel, prijzen en knoppen; de handleiding blijft in beeld */
	.hu-knoppen { width: 100%; }
	.hu .hu-knop { flex: 1 1 auto; justify-content: center; white-space: normal; text-align: center; padding: 9px 12px; font-size: 14px; }
}