/*
 * Kraskaart huisstijl voor de pagina's die niet met Elementor zijn opgemaakt:
 * winkelmand, afrekenen, bedankpagina, Mijn account en gewone pagina's (voorwaarden, privacy, ...).
 * Zelfde lettertypes en kleuren als de header, footer, galerij en editor.
 * Alles hangt onder body.kk-huisstijl, zodat Elementor-pagina's (zoals de homepage) ongemoeid blijven.
 * Kleuren en lettertypes aanpassen? Wijzig alleen de variabelen hieronder.
 */
.kk-huisstijl {
	--kk-h-kop: var(--kk-site-kop, 'KK-site-kop', 'Bricolage Grotesque', Georgia, serif);
	--kk-h-tekst: var(--kk-site-tekst, 'KK-site-tekst', 'Instrument Sans', system-ui, sans-serif);
	--kk-h-inkt: #13233F;          /* tekst en koppen */
	--kk-h-grijs: #3B4A63;         /* rustige tekst */
	--kk-h-accent: #C2410C;        /* knoppen */
	--kk-h-accent-donker: #9A3412; /* knoppen bij hover, links */
	--kk-h-lijn: #C9CFD9;          /* randen van velden */
	--kk-h-zacht: #E3E6EC;         /* lijnen in tabellen */
	--kk-h-vlak: #F4F5F8;          /* achtergrond van blokken */
	--kk-h-rond: 10px;
}

/* ---- Basis ---- */
body.kk-huisstijl {
	font-family: var(--kk-h-tekst);
	color: var(--kk-h-inkt);
	font-size: 16px;
	line-height: 1.6;
}
.kk-huisstijl .site-main,
.kk-huisstijl main#content { padding-top: 40px; padding-bottom: 72px; }

.kk-huisstijl h1, .kk-huisstijl h2, .kk-huisstijl h3, .kk-huisstijl h4, .kk-huisstijl h5, .kk-huisstijl h6,
.kk-huisstijl .entry-title, .kk-huisstijl .page-title {
	font-family: var(--kk-h-kop);
	font-weight: 800;
	color: var(--kk-h-inkt);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin-top: 0;
}
.kk-huisstijl h1, .kk-huisstijl .entry-title, .kk-huisstijl .page-title { font-size: clamp(30px, 4vw, 42px); margin-bottom: 24px; }
.kk-huisstijl h2 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 16px; }
.kk-huisstijl h3 { font-size: 21px; margin-bottom: 12px; }
.kk-huisstijl h4, .kk-huisstijl h5, .kk-huisstijl h6 { font-size: 17px; margin-bottom: 8px; }

.kk-huisstijl a:not(.button):not(.wp-element-button) { color: var(--kk-h-accent-donker); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.kk-huisstijl a:not(.button):not(.wp-element-button):hover { color: var(--kk-h-inkt); }
.kk-huisstijl :focus-visible { outline: 3px solid var(--kk-h-accent-donker); outline-offset: 2px; }

/* De header en footer van de plugin houden hun eigen stijl. */
.kk-huisstijl .kk-site-header a:not(.button):not(.wp-element-button), .kk-huisstijl .kk-site-footer a:not(.button):not(.wp-element-button) { text-decoration: none; }
.kk-huisstijl .kk-site-header a:not(.button):not(.wp-element-button) { color: var(--kk-site-inkt, #13233F); }
.kk-huisstijl .kk-site-header .kk-nav a:not(.button):not(.wp-element-button):hover { color: var(--kk-site-accent-tekst, #9A3412); }
.kk-huisstijl .kk-site-footer a:not(.button):not(.wp-element-button) { color: #E6EBF3; }
.kk-huisstijl .kk-site-footer a:not(.button):not(.wp-element-button):hover { color: #FFFFFF; text-decoration: underline; }

/* ---- Knoppen ---- */
.kk-huisstijl .button,
.kk-huisstijl button.button,
.kk-huisstijl a.button,
.kk-huisstijl input.button,
.kk-huisstijl input[type="submit"],
.kk-huisstijl button[type="submit"],
.kk-huisstijl .wp-element-button,
.kk-huisstijl .woocommerce #place_order,
.kk-huisstijl .woocommerce a.checkout-button,
.kk-huisstijl .wc-block-components-button:not(.is-link),
.kk-huisstijl .wc-block-cart__submit-button,
.kk-huisstijl .wc-block-components-checkout-place-order-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 22px !important;
	border: 1px solid var(--kk-h-accent) !important;
	border-radius: var(--kk-h-rond) !important;
	background: var(--kk-h-accent) !important;
	color: #FFFFFF !important;
	font-family: var(--kk-h-tekst) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	box-sizing: border-box;
	cursor: pointer;
}
.kk-huisstijl .button:hover,
.kk-huisstijl a.button:hover,
.kk-huisstijl input[type="submit"]:hover,
.kk-huisstijl button[type="submit"]:hover,
.kk-huisstijl .wp-element-button:hover,
.kk-huisstijl .woocommerce #place_order:hover,
.kk-huisstijl .woocommerce a.checkout-button:hover,
.kk-huisstijl .wc-block-components-button:not(.is-link):hover,
.kk-huisstijl .wc-block-cart__submit-button:hover {
	background: var(--kk-h-accent-donker) !important;
	border-color: var(--kk-h-accent-donker) !important;
	color: #FFFFFF !important;
}
.kk-huisstijl .button:disabled,
.kk-huisstijl .button.disabled,
.kk-huisstijl button:disabled[type="submit"] {
	background: #9AA4B5 !important;
	border-color: #9AA4B5 !important;
	color: #FFFFFF !important;
	cursor: not-allowed;
	opacity: 1 !important;
}
/* Grote knoppen in het bestelproces over de volle breedte. */
.kk-huisstijl .woocommerce #place_order,
.kk-huisstijl .woocommerce a.checkout-button { width: 100%; min-height: 54px; font-size: 17px !important; }

/* Tweede knop (zoals "Kortingscode toepassen", "Winkelmand bijwerken"): wit met rand. */
.kk-huisstijl .woocommerce-cart-form button[name="update_cart"],
.kk-huisstijl .coupon .button,
.kk-huisstijl .woocommerce-form-coupon .button,
.kk-huisstijl .woocommerce-MyAccount-content .woocommerce-orders-table .button,
.kk-huisstijl .woocommerce-Address .edit {
	background: #FFFFFF !important;
	border-color: var(--kk-h-lijn) !important;
	color: var(--kk-h-inkt) !important;
}
.kk-huisstijl .woocommerce-cart-form button[name="update_cart"]:hover,
.kk-huisstijl .coupon .button:hover,
.kk-huisstijl .woocommerce-form-coupon .button:hover,
.kk-huisstijl .woocommerce-MyAccount-content .woocommerce-orders-table .button:hover {
	background: var(--kk-h-vlak) !important;
	border-color: var(--kk-h-inkt) !important;
	color: var(--kk-h-inkt) !important;
}

/* Losse knoppen van het thema (Hello Elementor kleurt die standaard roze). */
.kk-huisstijl button:not(.button):not([type="submit"]):not(.wc-block-components-button):not(.kk-knop):not(.kk-knop-klein):not(.kk-ikoon):not([class*="kk-"]) {
	border-color: var(--kk-h-lijn);
	color: var(--kk-h-inkt);
	border-radius: 8px;
	font-family: inherit;
}

/* ---- Formulieren ---- */
.kk-huisstijl input[type="text"],
.kk-huisstijl input[type="email"],
.kk-huisstijl input[type="tel"],
.kk-huisstijl input[type="password"],
.kk-huisstijl input[type="number"],
.kk-huisstijl input[type="search"],
.kk-huisstijl input[type="date"],
.kk-huisstijl select,
.kk-huisstijl textarea,
.kk-huisstijl .woocommerce .input-text,
.kk-huisstijl .select2-container .select2-selection--single {
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--kk-h-lijn);
	border-radius: 8px;
	background: #FFFFFF;
	color: var(--kk-h-inkt);
	font-family: var(--kk-h-tekst);
	font-size: 16px;
	line-height: 1.4;
	box-shadow: none;
	box-sizing: border-box;
}
.kk-huisstijl textarea { min-height: 96px; }
.kk-huisstijl input:focus, .kk-huisstijl select:focus, .kk-huisstijl textarea:focus,
.kk-huisstijl .select2-container--focus .select2-selection--single {
	border-color: var(--kk-h-inkt);
	outline: 2px solid var(--kk-h-inkt);
	outline-offset: 0;
}
.kk-huisstijl .select2-container .select2-selection--single { display: flex; align-items: center; }
.kk-huisstijl .select2-container .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.4; color: var(--kk-h-inkt); }
.kk-huisstijl .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; right: 8px; }
.kk-huisstijl .select2-dropdown { border-color: var(--kk-h-lijn); font-family: var(--kk-h-tekst); }
.kk-huisstijl .select2-results__option--highlighted[aria-selected] { background: var(--kk-h-inkt); }

.kk-huisstijl label,
.kk-huisstijl .woocommerce form .form-row label { font-weight: 600; color: var(--kk-h-inkt); margin-bottom: 6px; }
.kk-huisstijl .woocommerce form .form-row .required { color: #B91C1C; text-decoration: none; }
.kk-huisstijl .woocommerce form .form-row { margin-bottom: 16px; }
.kk-huisstijl .woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: #B91C1C; }
.kk-huisstijl input[type="checkbox"], .kk-huisstijl input[type="radio"] { accent-color: var(--kk-h-inkt); width: 18px; height: 18px; }

/* WooCommerce-blokken (winkelmand en afrekenen als blok) */
.kk-huisstijl .wc-block-components-text-input input,
.kk-huisstijl .wc-block-components-combobox .wc-block-components-combobox-control input,
.kk-huisstijl .wc-blocks-components-select .wc-blocks-components-select__select {
	border: 1px solid var(--kk-h-lijn) !important;
	border-radius: 8px !important;
	font-family: var(--kk-h-tekst) !important;
	color: var(--kk-h-inkt) !important;
}
.kk-huisstijl .wc-block-components-title,
.kk-huisstijl .wc-block-components-checkout-step__title,
.kk-huisstijl .wc-block-cart__totals-title {
	font-family: var(--kk-h-kop) !important;
	font-weight: 800 !important;
	color: var(--kk-h-inkt) !important;
	text-transform: none !important;
}
.kk-huisstijl .wc-block-components-checkout-step__heading-content,
.kk-huisstijl .wc-block-components-order-summary,
.kk-huisstijl .wc-block-components-totals-item { font-family: var(--kk-h-tekst); color: var(--kk-h-inkt); }

/* ---- Tabellen (winkelmand, bestelling, bedankpagina) ---- */
.kk-huisstijl .woocommerce table.shop_table {
	border: 1px solid var(--kk-h-zacht);
	border-radius: var(--kk-h-rond);
	border-collapse: separate;
	overflow: hidden;
	background: #FFFFFF;
}
.kk-huisstijl .woocommerce table.shop_table th {
	font-family: var(--kk-h-tekst);
	font-weight: 600;
	color: var(--kk-h-inkt);
	background: var(--kk-h-vlak);
}
.kk-huisstijl .woocommerce table.shop_table th,
.kk-huisstijl .woocommerce table.shop_table td { padding: 14px 16px; border-color: var(--kk-h-zacht); }
.kk-huisstijl .woocommerce table.shop_table td.product-name a { color: var(--kk-h-inkt); font-weight: 600; text-decoration: none; }
.kk-huisstijl .woocommerce table.shop_table .order-total th,
.kk-huisstijl .woocommerce table.shop_table .order-total td { font-size: 18px; font-weight: 700; }
.kk-huisstijl .woocommerce .cart-collaterals .cart_totals h2,
.kk-huisstijl .woocommerce-checkout h3 { font-size: 22px; }
.kk-huisstijl .woocommerce a.remove { color: #B91C1C !important; font-weight: 400; }
.kk-huisstijl .woocommerce a.remove:hover { background: #B91C1C; color: #FFFFFF !important; }

/* Afrekenen: bestel- en betaalblok */
.kk-huisstijl .woocommerce-checkout #payment {
	background: var(--kk-h-vlak);
	border-radius: var(--kk-h-rond);
}
.kk-huisstijl .woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--kk-h-zacht); }
.kk-huisstijl .woocommerce-checkout #payment div.payment_box { background: #FFFFFF; color: var(--kk-h-grijs); border-radius: 8px; }
.kk-huisstijl .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #FFFFFF; }

/* ---- Meldingen ---- */
.kk-huisstijl .woocommerce-message,
.kk-huisstijl .woocommerce-info,
.kk-huisstijl .woocommerce-error,
.kk-huisstijl .woocommerce-notices-wrapper .wc-block-components-notice-banner {
	border-radius: var(--kk-h-rond);
	border: 1px solid var(--kk-h-zacht);
	border-left-width: 4px;
	background: #FFFFFF;
	color: var(--kk-h-inkt);
	font-family: var(--kk-h-tekst);
}
.kk-huisstijl .woocommerce-message { border-left-color: #15803D; }
.kk-huisstijl .woocommerce-info { border-left-color: var(--kk-h-inkt); }
.kk-huisstijl .woocommerce-error { border-left-color: #B91C1C; }
.kk-huisstijl .woocommerce-message::before { color: #15803D; }
.kk-huisstijl .woocommerce-info::before { color: var(--kk-h-inkt); }
.kk-huisstijl .woocommerce-error::before { color: #B91C1C; }

/* ---- Mijn account ---- */
.kk-huisstijl .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kk-huisstijl .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 10px 14px;
	border-radius: 8px;
	color: var(--kk-h-inkt);
	font-weight: 600;
	text-decoration: none;
}
.kk-huisstijl .woocommerce-MyAccount-navigation a:hover { background: var(--kk-h-vlak); color: var(--kk-h-inkt); }
.kk-huisstijl .woocommerce-MyAccount-navigation .is-active a { background: var(--kk-h-inkt); color: #FFFFFF; }

/* Bedankpagina: samenvatting van de bestelling */
.kk-huisstijl .woocommerce-order-overview { padding: 16px 20px; background: var(--kk-h-vlak); border-radius: var(--kk-h-rond); }
.kk-huisstijl .woocommerce-thankyou-order-received { font-family: var(--kk-h-kop); font-weight: 800; font-size: 22px; color: var(--kk-h-inkt); }

/* ---- Mijn account: ontwerpen, logo's en bestellingen (3.8.0) ---- */
/* Knoppen in een ontwerpkaart zijn tweede knoppen; "Nieuw ontwerp" en "Opnieuw bestellen" blijven primair. */
.kk-huisstijl .kk-mijn-ontwerp .button {
	min-height: 40px;
	padding: 0 16px !important;
	font-size: 15px !important;
	background: #FFFFFF !important;
	border-color: var(--kk-h-lijn) !important;
	color: var(--kk-h-inkt) !important;
}
.kk-huisstijl .kk-mijn-ontwerp .button:hover {
	background: var(--kk-h-vlak) !important;
	border-color: var(--kk-h-inkt) !important;
	color: var(--kk-h-inkt) !important;
}
/* Acties die als link worden getoond (Dupliceren, Hernoemen, Verwijderen), ook als het een formulierknop is. */
.kk-huisstijl button.kk-link-knop,
.kk-huisstijl button.kk-link-weg,
.kk-huisstijl .kk-hernoem summary.kk-link-knop {
	display: inline;
	min-height: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: var(--kk-h-inkt) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
	cursor: pointer;
}
.kk-huisstijl button.kk-link-weg { color: #B91C1C !important; }
.kk-huisstijl button.kk-link-knop:hover,
.kk-huisstijl .kk-hernoem summary.kk-link-knop:hover { background: none !important; border: 0 !important; color: var(--kk-h-accent-donker) !important; }
.kk-huisstijl button.kk-link-weg:hover { background: none !important; border: 0 !important; color: #7F1D1D !important; }
.kk-huisstijl .kk-mijn-ontwerp__beeld:focus-visible,
.kk-huisstijl button.kk-link-knop:focus-visible,
.kk-huisstijl button.kk-link-weg:focus-visible { outline: 2px solid var(--kk-h-inkt); outline-offset: 2px; }
.kk-huisstijl .kk-dashboard h2,
.kk-huisstijl .kk-mijn-logos h2,
.kk-huisstijl .kk-opnieuw h2 { font-family: var(--kk-h-kop); font-weight: 800; font-size: 22px; color: var(--kk-h-inkt); }

/* ---- Mijn account (3.8.1) ---- */
/* Actief menu-item: bij aanwijzen iets lichter blauw, tekst blijft wit (net als de oranje knop iets van kleur verandert). */
.kk-huisstijl .woocommerce-MyAccount-navigation li.is-active a:not(.button):not(.wp-element-button),
.kk-huisstijl .woocommerce-MyAccount-navigation li.is-active a:not(.button):not(.wp-element-button):hover,
.kk-huisstijl .woocommerce-MyAccount-navigation li.is-active a:not(.button):not(.wp-element-button):focus-visible { color: #FFFFFF; }
.kk-huisstijl .woocommerce-MyAccount-navigation li.is-active a:not(.button):not(.wp-element-button):hover,
.kk-huisstijl .woocommerce-MyAccount-navigation li.is-active a:not(.button):not(.wp-element-button):focus-visible { background: #2B4170; }

/* Bestellingen: kleinere knoppen naast elkaar, met ruimte ertussen; miniatuur bij het bestelnummer. */
.kk-huisstijl .woocommerce-orders-table__cell-order-actions { white-space: nowrap; }
.kk-huisstijl .woocommerce-MyAccount-content .woocommerce-orders-table .button {
	display: inline-flex !important;
	width: auto !important;
	height: auto !important;
	min-height: 34px;
	padding: 0 12px !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	vertical-align: middle;
	margin: 3px 6px 3px 0 !important;
}
.kk-huisstijl .woocommerce-MyAccount-content .woocommerce-orders-table .button:last-child { margin-right: 0; }
.kk-huisstijl .woocommerce-orders-table__cell-order-number { min-width: 60px; }
.kk-order-nummer { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; white-space: nowrap; }
.kk-order-miniatuur { display: block; width: 52px; height: auto; border: 1px solid #E3E6EC; }

/* Adressen: kop met hoofdletter ("Factuuradres"), link "Bewerk factuuradres". */
.kk-huisstijl .woocommerce-Address-title h2::first-letter,
.kk-huisstijl .woocommerce-Address-title h3::first-letter { text-transform: uppercase; }

/* Accountgegevens en adres bewerken: meer ruimte boven de opslaanknop. */
.kk-huisstijl .woocommerce-EditAccountForm button[name="save_account_details"],
.kk-huisstijl .woocommerce-address-fields button[name="save_address"] { margin-top: 24px; }
.kk-huisstijl .woocommerce-MyAccount-content .woocommerce-orders-table th,
.kk-huisstijl .woocommerce-MyAccount-content .woocommerce-orders-table td { padding-left: 10px !important; padding-right: 10px !important; }

/* Winkelmand en afrekenen als blok: het thema (Hello Elementor) geeft brede blokken (.alignwide) een negatieve
   marge van 80 px, waardoor de winkelmand links buiten de pagina viel. Hier gewoon binnen de pagina houden. */
.kk-huisstijl .alignwide,
.kk-huisstijl .wp-block-woocommerce-cart,
.kk-huisstijl .wp-block-woocommerce-checkout { margin-left: 0; margin-right: 0; margin-inline: 0; max-width: 100%; }
/* Het aantal kraskaarten ligt vast (volgt uit de prijsverdeling): tonen als tekst, niet als invoerveld. */
.kk-huisstijl .wc-block-components-quantity-selector:has(input[readonly]) { border: 0 !important; box-shadow: none !important; background: none !important; width: auto; min-width: 0; }
.kk-huisstijl .wc-block-components-quantity-selector:has(input[readonly])::after { display: none; }
.kk-huisstijl .wc-block-components-quantity-selector input[readonly] { width: auto; min-width: 0; max-width: 90px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; text-align: left; font-weight: 600; pointer-events: none; }

/* Winkelmand (blok): het aantal vóór de productnaam ("300 × Kraskaart A7 ..."), het prullenbakje links van de afbeelding. */
.kk-huisstijl .wc-block-cart-items__row { position: relative; }
.kk-huisstijl .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image,
.kk-huisstijl .wc-block-cart-items__header-image { padding-left: 44px !important; }
.kk-huisstijl .wc-block-cart-item__wrap { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: start; }
.kk-huisstijl .wc-block-cart-item__wrap > :not(.wc-block-cart-item__quantity) { grid-column: 2 !important; }
.kk-huisstijl .wc-block-cart-item__wrap > .wc-block-cart-item__quantity { grid-column: 1 !important; grid-row: 1 !important; align-self: start !important; margin: 0 !important; display: block !important; }
.kk-huisstijl .wc-block-cart-item__wrap > .wc-block-components-product-name { line-height: 1.4; font-size: 15px; }
.kk-huisstijl .wc-block-cart-item__quantity .wc-block-components-quantity-selector { height: auto !important; min-height: 0 !important; line-height: 1.4; }
.kk-huisstijl .wc-block-cart-item__quantity .wc-block-components-quantity-selector:has(input[readonly]) { display: inline-flex; align-items: baseline; margin: 0 !important; }
.kk-huisstijl .wc-block-cart-item__quantity .wc-block-components-quantity-selector:has(input[readonly])::after { display: inline !important; content: "×"; position: static; border: 0; width: auto; height: auto; background: none; font-weight: 600; margin-left: 4px; }
.kk-huisstijl .wc-block-cart-item__quantity .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input[readonly] { field-sizing: content; height: 1.4em !important; min-height: 0 !important; line-height: 1.4 !important; font-size: 15px !important; color: var(--kk-h-inkt, #13233F); }
/* Prullenbak op dezelfde hoogte als het aantal (bovenaan de regel). */
.kk-huisstijl .wc-block-cart-item__remove-link { position: absolute !important; left: 0; top: 20px; transform: none !important; transition: none !important; margin: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; }
.kk-huisstijl .wc-block-cart.is-mobile .wc-block-cart-items__row { grid-template-columns: 100px minmax(0, 1fr) auto !important; }
.kk-huisstijl .wc-block-cart.is-mobile .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image { padding-left: 36px !important; }
.kk-huisstijl .wc-block-cart.is-mobile .wc-block-cart-item__remove-link { top: 15px; }

/* Bedankpagina bij vooruitbetaling per bank */
.kk-huisstijl .kk-bank-uitleg { margin: 24px 0 8px; padding: 20px 24px; border: 1px solid var(--kk-h-zacht); border-radius: var(--kk-h-rond); background: var(--kk-h-vlak); }
.kk-huisstijl .kk-bank-uitleg h2 { margin: 0 0 8px; font-size: 22px; }
.kk-huisstijl .kk-bank-uitleg p { margin: 0; }

/* ---- Doelgroeppagina's (Kraskaarten voor de horeca, winkels, ...) ---- */
.kk-dg-pagina .page-content > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.kk-dg-pagina .page-content > .kk-dg-hero,
.kk-dg-pagina .page-content > .kk-galerij-app,
.kk-dg-pagina .page-content > .kk-dg-links,
.kk-dg-pagina .page-content > .kk-vb-cta { max-width: none; }
.kk-dg-pagina .page-content > p,
.kk-dg-pagina .page-content > ul { font-size: 17px; line-height: 1.65; color: var(--kk-h-grijs); }
.kk-dg-pagina .page-content > h2 { margin-top: 56px; }
.kk-dg-pagina .page-content > h3 { margin-top: 28px; margin-bottom: 6px; font-size: 19px; }
.kk-dg-pagina .page-content > h3 + p { margin-top: 0; }

.kk-dg-pagina .kk-dg-hero {
	position: relative;
	overflow: hidden;
	margin: 8px 0 24px;
	padding: clamp(32px, 6vw, 72px) clamp(24px, 6vw, 72px);
	border-radius: 20px;
	background: radial-gradient(ellipse at 85% 20%, #22355A 0%, #13233F 60%);
	color: #FFFFFF;
}
.kk-dg-pagina .kk-dg-hero > * { max-width: 680px; margin-left: 0 !important; margin-right: 0 !important; }
.kk-dg-pagina .kk-dg-hero::after {
	content: "";
	position: absolute;
	right: -60px;
	bottom: -80px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: #C2410C;
	opacity: 0.9;
	pointer-events: none;
}
@media (max-width: 760px) { .kk-dg-pagina .kk-dg-hero::after { width: 160px; height: 160px; right: -60px; bottom: -70px; } }
.kk-dg-pagina .kk-dg-hero h1 { position: relative; z-index: 1; color: #FFFFFF; font-size: clamp(32px, 5vw, 52px); margin-bottom: 16px; }
.kk-dg-pagina .kk-dg-hero p { position: relative; z-index: 1; color: #E6EBF3; font-size: clamp(17px, 2vw, 20px); line-height: 1.55; margin: 0 0 28px; }
.kk-dg-pagina .kk-dg-hero .wp-block-buttons { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; }
.kk-dg-pagina .kk-dg-hero .is-style-outline .wp-element-button { background: transparent !important; border-color: rgba(255, 255, 255, 0.6) !important; color: #FFFFFF !important; }
.kk-dg-pagina .kk-dg-hero .is-style-outline .wp-element-button:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: #FFFFFF !important; }

/* Ideeën en spelregels: lijst met oranje bolletjes */
.kk-dg-pagina .page-content > ul { list-style: none; padding: 0; }
.kk-dg-pagina .page-content > ul li { position: relative; padding-left: 26px; margin-bottom: 12px; }
.kk-dg-pagina .page-content > ul li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 9px; height: 9px; border-radius: 50%; background: var(--kk-h-accent); }
.kk-dg-pagina .page-content > ul li strong { color: var(--kk-h-inkt); }

/* Voorbeeld van een prijsverdeling */
.kk-dg-pagina .kk-dg-verdeling { margin: 20px auto; }
.kk-dg-pagina .kk-dg-verdeling table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--kk-h-zacht); border-radius: 12px; overflow: hidden; font-size: 16px; table-layout: auto; }
.kk-dg-pagina .kk-dg-verdeling th { background: var(--kk-h-inkt); color: #FFFFFF; font-weight: 600; text-align: left; padding: 12px 18px; border: 0; }
.kk-dg-pagina .kk-dg-verdeling td { padding: 12px 18px; border: 0; border-top: 1px solid var(--kk-h-zacht); color: var(--kk-h-inkt); background: #FFFFFF; }
.kk-dg-pagina .kk-dg-verdeling tr:nth-child(even) td { background: var(--kk-h-vlak); }
.kk-dg-pagina .kk-dg-verdeling th:first-child,
.kk-dg-pagina .kk-dg-verdeling td:first-child { width: 1%; white-space: nowrap; text-align: right; font-family: var(--kk-h-kop); font-weight: 800; }
.kk-dg-pagina .kk-prijs { white-space: nowrap; font-weight: 600; color: var(--kk-h-inkt); }

/* Galerij en calculator */
.kk-dg-pagina .page-content > .kk-galerij-app { margin-top: 24px; }
.kk-dg-pagina .kk-galerij__alle { text-align: center; margin: 24px 0 0; font-weight: 600; }
.kk-dg-pagina .page-content > .kk-calc { margin-top: 16px; }

/* Links naar de andere doelgroepen */
.kk-dg-pagina .kk-dg-links { margin-top: 24px; padding: 32px; border-radius: 16px; background: var(--kk-h-vlak); text-align: center; }
.kk-dg-pagina .kk-dg-links h2 { font-size: 22px; margin: 0 0 16px; }
.kk-dg-pagina .kk-dg-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.kk-dg-pagina .kk-dg-links a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--kk-h-lijn); border-radius: 999px; background: #FFFFFF; color: var(--kk-h-inkt); font-weight: 600; text-decoration: none; }
.kk-dg-pagina .kk-dg-links a:not(.button):hover { border-color: var(--kk-h-inkt); color: var(--kk-h-inkt); }
.kk-dg-pagina .kk-dg-kalender th:first-child,
.kk-dg-pagina .kk-dg-kalender td:first-child { width: auto; white-space: normal; text-align: left; font-family: inherit; font-weight: 600; }
.kk-dg-pagina .kk-dg-kalender td:nth-child(2) { white-space: nowrap; }
.kk-dg-pagina .kk-dg-verdeling table.has-fixed-layout { table-layout: auto !important; }
.kk-dg-pagina .kk-dg-verdeling td, .kk-dg-pagina .kk-dg-verdeling th { word-break: normal; overflow-wrap: normal; }
/* Kalender op de telefoon: elke dag als blokje onder elkaar */
@media (max-width: 600px) {
	.kk-dg-pagina .kk-dg-kalender thead { display: none; }
	.kk-dg-pagina .kk-dg-kalender table, .kk-dg-pagina .kk-dg-kalender tbody, .kk-dg-pagina .kk-dg-kalender tr, .kk-dg-pagina .kk-dg-kalender td { display: block; width: auto; }
	.kk-dg-pagina .kk-dg-kalender tr { padding: 14px 16px; border-top: 1px solid var(--kk-h-zacht); }
	.kk-dg-pagina .kk-dg-kalender tr:first-child { border-top: 0; }
	.kk-dg-pagina .kk-dg-kalender tr:nth-child(even) { background: var(--kk-h-vlak); }
	.kk-dg-pagina .kk-dg-kalender td { padding: 0; border: 0; background: transparent !important; white-space: normal !important; }
	.kk-dg-pagina .kk-dg-kalender td:first-child { font-size: 17px; }
	.kk-dg-pagina .kk-dg-kalender td:nth-child(2) { font-size: 14px; color: var(--kk-h-grijs); margin-bottom: 6px; }
}

/* Pagina Gratis voorbeeldset: kop met de drie kaartjes ernaast */
.kk-dg-pagina .kk-vb-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); column-gap: 48px; align-items: center; }
.kk-dg-pagina .kk-vb-hero::after { display: none; }
.kk-dg-pagina .kk-vb-hero > * { grid-column: 1; max-width: none; }
.kk-dg-pagina .kk-vb-hero { grid-template-rows: 1fr auto auto 1fr; }
.kk-dg-pagina .kk-vb-hero > .kk-vb-kaartjes { grid-column: 2; grid-row: 1 / span 4; }
.kk-dg-pagina .kk-vb-hero > h1 { grid-row: 2; }
.kk-dg-pagina .kk-vb-hero > p { grid-row: 3; }
.kk-dg-pagina .kk-vb-hero > .wp-block-buttons { grid-row: 4; align-self: start; }
@media (max-width: 860px) {
	.kk-dg-pagina .kk-vb-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	.kk-dg-pagina .kk-vb-hero > * { grid-row: auto !important; }
	.kk-dg-pagina .kk-vb-hero > .kk-vb-kaartjes { grid-column: 1; grid-row: auto; max-width: 380px; width: 100%; margin: 28px auto 0 !important; }
}