/* XM Club — design-specific styles.
   Tokens come from theme.json; this file adds rules that the block
   system cannot express cleanly (placeholders, hero overlay, etc.).
*/

:root {
	--xm-paper:     var(--wp--preset--color--paper);
	--xm-paper-2:   var(--wp--preset--color--paper-2);
	--xm-ink:       var(--wp--preset--color--ink);
	--xm-ink-2:     var(--wp--preset--color--ink-2);
	--xm-rule:      var(--wp--preset--color--rule);
	--xm-primary:   var(--wp--preset--color--primary);
	--xm-secondary: var(--wp--preset--color--secondary);
	--xm-accent:    var(--wp--preset--color--accent);
	--xm-pad:       var(--wp--preset--spacing--60);
}

body { -webkit-font-smoothing: antialiased; font-feature-settings: "kern", "ss01"; }

/* ---------- Accessibility: skip link + focus ---------- */
.xm-skip-link {
	position: absolute;
	left: 8px; top: 8px;
	z-index: 1000;
	transform: translateY(-150%);
	transition: transform .12s ease;
	background: var(--xm-primary);
	color: var(--xm-paper);
	padding: 10px 16px;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px; font-weight: 500;
	text-decoration: none;
}
.xm-skip-link:focus { transform: translateY(0); }

/* Visible, branded keyboard focus across all interactive elements.
   :focus-visible only triggers for keyboard/AT, so mouse clicks stay clean. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--xm-primary);
	outline-offset: 2px;
	border-radius: 2px;
	scroll-margin-top: 96px;
}
/* On the dark footer the red outline is hard to see — use paper instead. */
.xm-on-dark :where(a, button, [tabindex]):focus-visible { outline-color: var(--xm-paper); }

@media (prefers-reduced-motion: reduce) {
	.xm-skip-link { transition: none; }
}

/* ---------- Site mark (header logo SVG) ---------- */
.xm-mark { height: 44px; width: auto; display: block; }
.xm-mark .xm-mark-chev { fill: var(--xm-primary); }
.xm-mark .xm-mark-rule { stroke: var(--xm-rule); }
.xm-mark .xm-mark-word { fill: var(--xm-ink); font-family: "Helvetica Neue", "Inter", sans-serif; font-size: 19px; font-weight: 600; letter-spacing: 0.06em; }
.xm-mark .xm-mark-sub  { fill: var(--xm-ink-2); font-family: "Helvetica Neue", "Inter", sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.28em; }

/* Inverted mark (dark backgrounds) */
.has-paper-color .xm-mark .xm-mark-word,
.has-paper-background-color .xm-mark .xm-mark-word,
.xm-on-dark .xm-mark .xm-mark-word { fill: var(--xm-paper); }
.xm-on-dark .xm-mark .xm-mark-sub  { fill: rgba(255,255,255,0.6); }
.xm-on-dark .xm-mark .xm-mark-rule { stroke: rgba(255,255,255,0.2); }

/* ---------- Eyebrow + lede helpers (block style variations) ---------- */
.is-style-eyebrow {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--xm-primary);
	font-weight: 500;
}
.is-style-lede {
	font-size: 16px;
	line-height: 1.55;
	color: var(--xm-ink-2);
	max-width: 640px;
}

/* Italic colored span inside display headings (Bodoni italic accent) */
.xm-display em,
.xm-display .xm-italic {
	font-style: italic;
	color: var(--xm-primary);
}

/* ---------- Photo placeholder (until real images arrive) ---------- */
.xm-ph {
	background:
		repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 8px, transparent 8px 16px),
		var(--xm-paper-2);
	border: 1px solid var(--xm-rule);
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.xm-ph[data-label]::after {
	content: attr(data-label);
	position: absolute;
	left: 12px; bottom: 10px;
	font-family: ui-monospace, "JetBrains Mono", monospace;
	font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--xm-ink-2);
	background: rgba(255,255,255,0.85);
	padding: 4px 8px;
	border-radius: 1px;
}

/* ---------- Hero (photo + paper-gradient overlay) ---------- */
.xm-hero {
	position: relative !important;
	min-height: 480px !important;
	display: block !important;
	/* Core's constrained-layout CSS emits `> *{margin-block-start}` after the
	   `:first-child{margin-block-start:0}` reset; equal (zero) specificity means
	   the later rule wins and the first child gets a stray top margin. Kill it so
	   the full-bleed hero sits flush under the header. */
	margin-block-start: 0 !important;
}
.xm-hero .xm-hero-media {
	position: absolute !important;
	inset: 0 !important;
	margin: 0 !important;
	z-index: 0;
}
.xm-hero .xm-hero-media img,
.xm-hero .xm-hero-media .xm-ph {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	aspect-ratio: auto;
	max-width: none !important;
}
.xm-hero .xm-hero-overlay {
	position: absolute !important;
	inset: 0 !important;
	margin: 0 !important;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--xm-pad);
	background: linear-gradient(
		to right,
		rgba(255,255,255,0.96) 0%,
		rgba(255,255,255,0.92) 40%,
		rgba(255,255,255,0) 75%
	);
}
.xm-hero .xm-hero-text { max-width: 520px; }

/* ---------- Site header ---------- */
.xm-site-header {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding: 18px var(--xm-pad);
	background: var(--xm-paper);
	border-bottom: 1px solid var(--xm-rule);
}
.xm-site-header .wp-block-navigation { justify-content: center; }
.xm-site-header .wp-block-navigation a.wp-block-navigation-item__content {
	padding: 4px 0;
	border-bottom: 1.5px solid transparent;
}
.xm-site-header .wp-block-navigation .current-menu-item > a {
	color: var(--xm-primary);
	border-bottom-color: var(--xm-primary);
}
.xm-lang {
	font-size: 13px;
	color: var(--xm-ink-2);
	display: inline-flex;
	gap: 6px;
}
.xm-lang .on  { color: var(--xm-ink); font-weight: 600; }
.xm-lang .off { opacity: 0.5; }
.xm-lang .sep { opacity: 0.3; }

/* Mobile nav hamburger / overlay */
.xm-site-header .wp-block-navigation__responsive-container-open,
.xm-site-header .wp-block-navigation__responsive-container-close {
	color: var(--xm-ink);
}
.xm-site-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--xm-paper);
	padding-top: 24px;
}
.xm-site-header .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--serif, "Bodoni Moda", serif);
	font-size: 28px;
	color: var(--xm-ink);
}
.xm-site-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a {
	color: var(--xm-primary);
}
/* Core switches to the inline menu at 600px; keep the overlay up to 800px. */
@media (min-width: 600px) and (max-width: 800px) {
	.xm-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.xm-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* ---------- Site footer (dark band) ---------- */
.xm-site-footer {
	background: var(--xm-ink);
	color: rgba(255,255,255,0.7);
	padding: 56px var(--xm-pad) 24px;
}
.xm-site-footer h6,
.xm-site-footer h5 {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--xm-paper);
	margin: 0 0 12px;
	font-weight: 600;
}
.xm-site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14px; }
.xm-site-footer a { color: inherit; }
.xm-foot-bot {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid rgba(255,255,255,0.12);
	display: flex; justify-content: space-between;
	font-size: 12px;
	color: rgba(255,255,255,0.5);
}

/* ---------- Pillars (numbered, ruled-top) ---------- */
.xm-pillar {
	border-top: 1px solid var(--xm-rule);
	padding-top: 20px;
}
.xm-pillar .xm-pillar-num {
	font-family: "Bodoni Moda", serif;
	font-style: italic;
	font-size: 28px;
	color: var(--xm-primary);
	margin: 0 0 8px;
}
.xm-pillar p { color: var(--xm-ink-2); }

/* ---------- Event cards (homepage strip) ---------- */
.xm-event-card {
	background: var(--xm-paper);
	padding: 22px;
	border: 1px solid var(--xm-rule);
	border-radius: 2px;
}
.xm-event-card .xm-event-date {
	font-family: "Bodoni Moda", serif;
	font-style: italic;
	font-size: 22px;
	color: var(--xm-primary);
	margin-bottom: 12px;
}
.xm-event-card .xm-event-loc { font-size: 13px; color: var(--xm-ink-2); }

/* ---------- Event list rows (Agenda page) ---------- */
.xm-event-year {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 56px 0 0;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--xm-ink);
}
.xm-event-list .xm-event-year:first-child { margin-top: 0; }
.xm-event-year .xm-event-year-label {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--xm-primary);
}
.xm-event-year .xm-event-year-num {
	font-family: "Bodoni Moda", serif;
	font-style: italic;
	font-size: 30px;
	line-height: 1;
	color: var(--xm-ink);
}
.xm-event-year.is-past { border-bottom-color: var(--xm-rule); }
.xm-event-year.is-past .xm-event-year-label { color: var(--xm-ink-2); }
.xm-event-year.is-past .xm-event-year-num { color: var(--xm-ink-2); font-size: 24px; }
.xm-event-year + .xm-event-row { border-top: 0; }

/* ---------- Past events block (archive) ---------- */
.xm-event-past {
	margin-top: 80px;
	padding-top: 40px;
	border-top: 3px solid var(--xm-ink);
}
.xm-event-past-head { margin-bottom: 8px; }
.xm-event-past-eyebrow {
	display: block;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--xm-primary);
	margin-bottom: 10px;
}
.xm-event-past-title {
	font-family: "Bodoni Moda", serif;
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1.05;
	margin: 0;
	color: var(--xm-ink);
}
.xm-event-past-note {
	font-size: 13px;
	color: var(--xm-ink-2);
	margin: 10px 0 0;
}
.xm-event-past .xm-event-year { margin-top: 34px; }
.xm-event-past .xm-event-row { padding: 14px 0; gap: 18px; grid-template-columns: 84px 1fr auto; }
.xm-event-row.is-past { opacity: 0.72; }
.xm-event-row.is-past:hover { opacity: 1; }
.xm-event-row.is-past .xm-event-d { color: var(--xm-ink-2); font-size: 30px; }
.xm-event-row.is-past .xm-event-m { font-size: 11px; }
.xm-event-row.is-past .xm-event-y { font-size: 11px; }
.xm-event-row.is-past .xm-event-cat { font-size: 10px; }
.xm-event-row.is-past .xm-event-body h3 { font-size: 17px; }
.xm-event-row.is-past .xm-event-body p { font-size: 13px; color: var(--xm-ink-2); }
.xm-event-row.is-past .xm-event-meta { font-size: 12px; }
.xm-event-row {
	display: grid;
	grid-template-columns: 110px 1fr auto;
	gap: 24px;
	align-items: center;
	padding: 22px 0;
	border-top: 1px solid var(--xm-rule);
}
.xm-event-row:last-child { border-bottom: 1px solid var(--xm-rule); }
.xm-event-row.is-style-featured,
.xm-event-row.is-featured {
	background: var(--xm-paper-2);
	padding: 22px;
	border: 1px solid var(--xm-rule);
	border-radius: 2px;
	margin: 6px 0;
}
.xm-event-row .xm-event-d {
	font-family: "Bodoni Moda", serif;
	font-style: italic;
	font-size: 44px;
	line-height: 1;
	color: var(--xm-primary);
}
.xm-event-row .xm-event-m {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--xm-ink-2);
	margin-left: 6px;
}
.xm-event-row .xm-event-meta { text-align: right; font-size: 13px; color: var(--xm-ink-2); }

/* ---------- Resources grid ---------- */
.xm-resource {
	display: block;
	padding: 26px;
	background: var(--xm-paper);
	border: 1px solid var(--xm-rule);
	border-radius: 2px;
	transition: border-color .12s ease;
	color: inherit;
	text-decoration: none;
}
.xm-resource:hover { border-color: var(--xm-primary); }
.xm-resource.is-style-featured,
.xm-resource.is-featured {
	background: var(--xm-primary);
	color: var(--xm-paper);
	border-color: var(--xm-primary);
}
.xm-resource.is-style-featured :is(h2,h3,h4),
.xm-resource.is-style-featured .xm-resource-meta,
.xm-resource.is-featured h3,
.xm-resource.is-featured .xm-resource-meta { color: var(--xm-paper); }
.xm-resource.is-style-featured p,
.xm-resource.is-featured p { color: rgba(255,255,255,0.85); }
.xm-resource-meta {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--xm-ink-2);
	padding-top: 12px;
	border-top: 1px solid var(--xm-rule);
	margin-top: 16px;
}
.xm-resource.is-style-featured .xm-resource-meta,
.xm-resource.is-featured .xm-resource-meta {
	border-top-color: rgba(255,255,255,0.25);
	color: rgba(255,255,255,0.88);
}

/* ---------- Stats row ---------- */
.xm-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--xm-rule);
	border-bottom: 1px solid var(--xm-rule);
}
.xm-stat { padding: 28px 24px 28px 24px; border-left: 1px solid var(--xm-rule); }
.xm-stat:first-child { border-left: 0; padding-left: 0; }
.xm-stat .n {
	font-family: "Bodoni Moda", serif;
	font-weight: 400;
	font-size: 48px;
	line-height: 1;
	color: var(--xm-primary);
	letter-spacing: -0.01em;
}
.xm-stat .l { font-size: 13px; color: var(--xm-ink-2); margin-top: 6px; }

/* ---------- Tables (specs) ---------- */
.wp-block-table.is-style-xm-specs table { border-collapse: collapse; width: 100%; font-size: 14px; }
.wp-block-table.is-style-xm-specs th {
	text-align: left; padding: 12px 8px;
	font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--xm-ink-2); font-weight: 500;
	border-bottom: 1.5px solid var(--xm-ink);
}
.wp-block-table.is-style-xm-specs td {
	padding: 14px 8px;
	border-bottom: 1px solid var(--xm-rule);
}
.wp-block-table.is-style-xm-specs tbody tr:last-child td {
	border-bottom: 1.5px solid var(--xm-ink);
}
.wp-block-table.is-style-xm-specs td:first-child { font-weight: 600; color: var(--xm-primary); }

/* ---------- Callout ---------- */
.xm-callout {
	background: var(--xm-paper);
	padding: 36px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 28px;
	align-items: center;
	border: 1px solid var(--xm-rule);
	border-radius: 2px;
}

/* ---------- Section padding helper ---------- */
.xm-section { padding: 64px var(--xm-pad); }
.xm-section.is-style-alt,
.xm-section-alt { background: var(--xm-paper-2); }
.xm-page-header {
	padding: 56px var(--xm-pad) 36px;
	border-bottom: 1px solid var(--xm-rule);
}
.xm-page-header .is-style-eyebrow { margin: 0; }
.xm-page-header h1 { margin: 12px 0 0; }
.xm-page-header .is-style-lede { margin: 16px 0 0; font-size: 19px; line-height: 1.5; max-width: 760px; }
.xm-section-head { margin-bottom: 36px; }
.xm-section-head h2 { margin: 8px 0 0; }
.xm-section-head .is-style-eyebrow { margin: 0; }
.xm-section-head > .wp-block-group { flex: 1 1 auto; }

/* ---------- Full-bleed photo break ---------- */
.xm-photo-break {
	margin: 0;
	aspect-ratio: 21/8;
	background:
		repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 8px, transparent 8px 16px),
		var(--xm-paper-2);
	border-top: 1px solid var(--xm-rule);
	border-bottom: 1px solid var(--xm-rule);
}
.xm-photo-break img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}

/* WP image blocks render <img> tags without a src until media is attached.
   Hide the empty img so the figure's placeholder background shows through. */
.xm-hero-media figure { margin: 0; width: 100%; height: 100%; }
.xm-hero-media img:not([src]),
.xm-hero-media img[src=""],
.xm-tiles img:not([src]),
.xm-tiles img[src=""],
.xm-gallery img:not([src]),
.xm-gallery img[src=""],
.xm-board img:not([src]),
.xm-board img[src=""],
.xm-photo-break img:not([src]),
.xm-photo-break img[src=""] { display: none; }

/* ---------- Hero polish ---------- */
.xm-hero-text p { margin-top: 18px; font-size: 16px; color: var(--xm-ink-2); max-width: 460px; }
.xm-hero-text .wp-block-buttons { margin-top: 24px; gap: 14px 24px; align-items: center; }
.xm-hero-text .wp-block-button.is-style-outline a {
	background: transparent; color: var(--xm-primary);
	border: 0; padding: 12px 0; text-decoration: underline; text-underline-offset: 4px;
}

/* ---------- Home: 3-up tiles ---------- */
.xm-tiles { gap: 32px; }
.xm-tiles .wp-block-column { display: flex; flex-direction: column; }
.xm-tiles figure {
	margin: 0 0 18px;
	aspect-ratio: 4/3;
	background:
		repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 8px, transparent 8px 16px),
		var(--xm-paper-2);
	border: 1px solid var(--xm-rule);
}
.xm-tiles figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xm-tiles h3 { margin: 6px 0 8px; font-size: 18px; font-weight: 600; }
.xm-tiles p { color: var(--xm-ink-2); margin: 0 0 14px; }
.xm-tiles p:has(a) a { color: var(--xm-primary); font-weight: 500; border-bottom: 1px solid var(--xm-primary); padding-bottom: 1px; text-decoration: none; }

/* ---------- Home: two-up callouts ---------- */
.xm-twocol-callouts { gap: 24px; align-items: stretch; }
.xm-twocol-callouts > .xm-callout-block-primary { flex-basis: 58%; }
.xm-callout-block {
	padding: 40px; border-radius: 2px;
	display: flex; flex-direction: column; justify-content: center;
}
.xm-callout-block-primary {
	background: var(--xm-primary); color: var(--xm-paper);
}
.xm-callout-block-primary h2,
.xm-callout-block-primary .is-style-eyebrow { color: var(--xm-paper); }
.xm-callout-block-primary .is-style-eyebrow { color: rgba(255,255,255,0.7); }
.xm-callout-block-primary p { color: rgba(255,255,255,0.78); max-width: 420px; margin-top: 16px; }
.xm-callout-block-primary .xm-cta-row { margin-top: 22px; gap: 14px; align-items: center; }
.xm-callout-block-primary .xm-price { color: rgba(255,255,255,0.88); font-size: 13px; margin: 0; }

/* Light button variant (white on red callout) */
.wp-block-button.is-style-light a,
.xm-callout-block-primary .wp-block-button a {
	background: var(--xm-paper); color: var(--xm-primary); font-weight: 600;
}

.xm-mini {
	background: var(--xm-paper); padding: 22px;
	border: 1px solid var(--xm-rule); border-radius: 2px;
	margin-bottom: 16px;
}
.xm-mini:last-child { margin-bottom: 0; }
.xm-mini h3 { font-size: 18px; margin: 4px 0 8px; }
.xm-mini p { color: var(--xm-ink-2); margin: 0 0 12px; font-size: 14px; }
.xm-mini p:has(a) a { color: var(--xm-primary); font-weight: 500; }

/* ---------- Event strip: add category eyebrow ---------- */
.xm-events-strip { gap: 16px; }
.xm-event-card .xm-event-cat {
	font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--xm-primary); margin: 0 0 8px; font-weight: 500;
}
.xm-event-card h4 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.xm-event-card .xm-event-date { margin: 0 0 8px; }

/* ---------- Event list rows (full agenda) — supports nested columns ---------- */
.xm-event-list { display: grid; gap: 0; }
.xm-event-list > .wp-block-columns.xm-event-row {
	margin-bottom: 0;
	padding: 22px 0;
	border-top: 1px solid var(--xm-rule);
	align-items: center;
	gap: 24px;
}
.xm-event-list > .wp-block-columns.xm-event-row:last-child { border-bottom: 1px solid var(--xm-rule); }
.xm-event-list > .wp-block-columns.xm-event-row.featured {
	background: var(--xm-paper-2); padding: 22px;
	border: 1px solid var(--xm-rule); border-radius: 2px; margin: 6px 0;
}
.xm-event-date-block { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.xm-event-date-block .xm-event-y {
	flex-basis: 100%;
	font-family: ui-monospace, "JetBrains Mono", monospace;
	font-size: 11px; letter-spacing: 0.12em;
	color: var(--xm-primary); margin-top: 4px;
}
.xm-event-date-block .d {
	font-family: "Bodoni Moda", serif; font-style: italic; font-weight: 400;
	font-size: 44px; line-height: 1; color: var(--xm-primary);
	margin: 0; letter-spacing: -0.01em;
}
.xm-event-date-block .m {
	font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em;
	color: var(--xm-ink-2); margin: 0;
}
.xm-event-body .xm-event-cat {
	font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--xm-primary); margin: 0 0 6px; font-weight: 500;
}
.xm-event-body h3 { font-size: 19px; font-weight: 600; margin: 0 0 4px; }
.xm-event-body p { margin: 0; color: var(--xm-ink-2); font-size: 14px; }
.xm-event-meta { text-align: right; }
.xm-event-meta .loc { font-size: 13px; color: var(--xm-ink-2); margin: 0 0 6px; }
.xm-event-meta p:has(a) a { color: var(--xm-primary); font-size: 13px; }

/* ---------- Stats row (heading + paragraph variant) ---------- */
.xm-stats {
	gap: 0;
	border-top: 1px solid var(--xm-rule);
	border-bottom: 1px solid var(--xm-rule);
	margin-top: 40px;
}
.xm-stats .wp-block-column { padding: 28px 24px; border-left: 1px solid var(--xm-rule); }
.xm-stats .wp-block-column:first-child { border-left: 0; padding-left: 0; }
.xm-stat-n {
	font-family: "Bodoni Moda", serif; font-weight: 400;
	font-size: 48px; line-height: 1; color: var(--xm-primary);
	letter-spacing: -0.01em; margin: 0;
}
.xm-stat-l { font-size: 13px; color: var(--xm-ink-2); margin: 6px 0 0; }

/* ---------- Board (Commissies) ---------- */
.xm-board { gap: 18px; }
.xm-board .xm-board-card {
	background: var(--xm-paper); border: 1px solid var(--xm-rule);
	padding: 0; border-radius: 2px; overflow: hidden;
}
.xm-board figure {
	margin: 0;
	aspect-ratio: 16/9;
	background:
		repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 8px, transparent 8px 16px),
		var(--xm-paper-2);
}
.xm-board figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xm-board .xm-event-cat { padding: 16px 16px 0; margin: 0; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--xm-primary); font-weight: 500; }
.xm-board h4 { padding: 6px 16px 0; margin: 0; font-size: 16px; font-weight: 600; }
.xm-board .xm-board-card > p:last-child { padding: 4px 16px 16px; margin: 0; font-size: 13px; color: var(--xm-ink-2); }

/* ---------- Commissie cards ---------- */
.xm-commissies { gap: 18px; flex-wrap: wrap; }
.xm-commissies .xm-commissie-card {
	background: var(--xm-paper); border: 1px solid var(--xm-rule); border-radius: 2px;
	padding: 24px; display: flex; flex-direction: column;
}
.xm-commissie-card .is-style-eyebrow { color: var(--xm-ink-2); margin: 0 0 6px; }
.xm-commissie-card h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.xm-commissie-card > p { color: var(--xm-ink-2); margin: 0 0 16px; }
.xm-commissie-leden {
	list-style: none; padding: 14px 0 0; margin: auto 0 14px;
	border-top: 1px dotted var(--xm-rule);
	display: flex; flex-wrap: wrap; gap: 6px;
}
.xm-commissie-leden li {
	font-size: 11px; letter-spacing: 0.04em;
	background: var(--xm-paper-2); color: var(--xm-ink-2);
	padding: 4px 8px; border-radius: 2px;
}
.xm-commissie-email {
	margin: 0; padding-top: 14px; border-top: 1px solid var(--xm-rule);
	font-family: ui-monospace, "JetBrains Mono", monospace;
	font-size: 11px; letter-spacing: 0.04em;
}
.xm-commissie-email a { color: var(--xm-ink-2); }

/* ---------- Benefits (Lidmaatschap) ---------- */
.xm-benefits { gap: 24px; }
.xm-benefits .xm-benefit { border-top: 2px solid var(--xm-ink); padding-top: 18px; }
.xm-benefit-n {
	font-family: "Bodoni Moda", serif; font-style: italic; font-weight: 400;
	font-size: 32px; line-height: 1; color: var(--xm-primary);
	margin: 0 0 14px;
}
.xm-benefit h4 { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.xm-benefit p { font-size: 14px; color: var(--xm-ink-2); margin: 0; line-height: 1.55; }

/* ---------- Timeline (De XM) ---------- */
.xm-timeline { border-top: 1px solid var(--xm-rule); margin-top: 24px; }
.xm-timeline .xm-tl-row {
	gap: 36px; padding: 28px 0;
	border-bottom: 1px solid var(--xm-rule);
	margin-bottom: 0;
	align-items: start;
}
.xm-tl-year-n {
	font-family: "Bodoni Moda", serif; font-weight: 400;
	font-size: 48px; line-height: 1; color: var(--xm-primary);
	letter-spacing: -0.01em; margin: 0;
}
.xm-tl-year-org {
	margin: 8px 0 0;
	font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--xm-ink-2); font-family: ui-monospace, "JetBrains Mono", monospace;
}
.xm-tl-badge {
	display: inline-block; margin-top: 10px;
	background: var(--xm-primary); color: var(--xm-paper);
	font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
	padding: 4px 8px; font-weight: 500;
}
.xm-tl-body p { margin: 0; color: var(--xm-ink); font-size: 15px; line-height: 1.65; }
.xm-tl-body p + p.xm-tl-colors,
.xm-tl-colors {
	margin-top: 14px; padding-top: 14px;
	border-top: 1px dotted var(--xm-rule);
	font-size: 13px; line-height: 1.55; color: var(--xm-ink-2);
}
.xm-tl-colors strong { color: var(--xm-primary); font-weight: 500; letter-spacing: 0.04em; }

/* ---------- Paint swatch catalog ---------- */
.xm-swatches {
	display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
	margin-top: 24px;
}
.xm-swatch {
	background: var(--xm-paper); border: 1px solid var(--xm-rule); border-radius: 2px;
	overflow: hidden;
}
.xm-swatch-chip { height: 64px; width: 100%; border-bottom: 1px solid rgba(0,0,0,0.08); }
.xm-swatch-meta { padding: 8px 10px 10px; }
.xm-swatch-name { font-size: 12px; font-weight: 500; color: var(--xm-ink); line-height: 1.25; }
.xm-swatch-code {
	font-family: ui-monospace, "JetBrains Mono", monospace;
	font-size: 10px; letter-spacing: 0.08em; color: var(--xm-ink-2);
	margin-top: 2px;
}

/* ---------- Signup form (Lidmaatschap) ---------- */
.xm-form {
	display: grid; gap: 14px; margin-top: 24px;
	background: var(--xm-paper); padding: 28px;
	border: 1px solid var(--xm-rule); border-radius: 2px;
}
.xm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.xm-form label {
	display: grid; gap: 6px;
	font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--xm-ink-2); font-weight: 500;
}
.xm-form input,
.xm-form select {
	font: inherit; font-size: 14px; letter-spacing: 0; text-transform: none;
	color: var(--xm-ink); background: var(--xm-paper-2);
	border: 1px solid var(--xm-rule); border-radius: 2px;
	padding: 11px 12px; width: 100%;
	box-sizing: border-box;
}
.xm-form-fieldset {
	border: 1px dotted var(--xm-rule); border-radius: 2px;
	padding: 18px 16px 14px; margin: 4px 0; display: grid; gap: 14px;
}
.xm-form-fieldset > legend {
	padding: 0 8px; font-size: 11px; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--xm-primary); font-weight: 600;
}
.xm-form-radios {
	display: flex; gap: 14px; align-items: center;
	font-size: 14px; letter-spacing: 0; text-transform: none;
	color: var(--xm-ink); padding: 8px 0;
}
.xm-form-radio { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; }
.xm-form-radio input { width: auto; padding: 0; margin: 0; }
/* Radio groups use a fieldset/legend (a11y) but must look like the other
   field labels and sit cleanly in the .xm-form-row grid. */
.xm-form-radiogroup { border: 0; padding: 0; margin: 0; min-width: 0; }
.xm-form-radiogroup > legend {
	padding: 0; margin: 0 0 6px; float: none;
	font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--xm-ink-2); font-weight: 500;
}
.xm-form input:focus,
.xm-form select:focus { outline: 2px solid var(--xm-primary); outline-offset: -1px; border-color: var(--xm-primary); }
.xm-form button {
	margin-top: 8px; width: max-content;
	background: var(--xm-primary); color: var(--xm-paper);
	border: 0; border-radius: 2px;
	padding: 12px 22px; font-size: 14px; font-weight: 500; cursor: pointer;
}
.xm-form-fineprint { font-size: 12px; color: var(--xm-ink-2); margin: 4px 0 0; letter-spacing: 0; text-transform: none; font-weight: 400; }

/* ---------- FAQ (details/summary) ---------- */
.xm-faq { border-top: 1px solid var(--xm-rule); margin-top: 24px; }
.xm-faq .wp-block-details {
	border-bottom: 1px solid var(--xm-rule);
	padding: 0;
}
.xm-faq .wp-block-details summary {
	list-style: none; cursor: pointer;
	padding: 22px 0;
	display: flex; justify-content: space-between; align-items: center;
	font-family: "Bodoni Moda", serif; font-weight: 400;
	font-size: 22px; color: var(--xm-ink); letter-spacing: -0.005em;
}
.xm-faq .wp-block-details summary::-webkit-details-marker,
.xm-faq .wp-block-details summary::marker { display: none; content: ""; }
.xm-faq .wp-block-details summary::after {
	content: "+"; font-size: 24px; color: var(--xm-primary); font-weight: 300;
	transition: transform .15s;
}
.xm-faq .wp-block-details[open] summary::after { transform: rotate(45deg); }
.xm-faq .wp-block-details p {
	margin: 0 0 22px; max-width: 760px;
	font-size: 15px; line-height: 1.65; color: var(--xm-ink-2);
}

/* ---------- Magazijn info cards ---------- */
.xm-magazijn-info { gap: 18px; }
.xm-magazijn-info .xm-info-card {
	background: var(--xm-paper); border: 1px solid var(--xm-rule); border-radius: 2px;
	padding: 26px;
}
.xm-info-card .is-style-eyebrow { margin: 0 0 6px; }
.xm-info-card h3 { font-size: 22px; font-family: "Bodoni Moda", serif; font-weight: 400; margin: 0 0 8px; }
.xm-info-card p { color: var(--xm-ink-2); margin: 0; }

/* ---------- Gallery (4-up) ---------- */
.xm-gallery { gap: 14px; margin-top: 36px; }
.xm-gallery figure {
	margin: 0;
	aspect-ratio: 4/3;
	background:
		repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 8px, transparent 8px 16px),
		var(--xm-paper-2);
	border: 1px solid var(--xm-rule);
}
.xm-gallery figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Italic display heading accent ---------- */
.xm-display em { font-style: italic; color: var(--xm-primary); }

/* ---------- Article max-width wrapper ---------- */
.xm-article { max-width: 1080px; margin: 0 auto; }

/* Hero CTA row spacing */
.xm-cta-row { display: flex; gap: 14px 24px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.xm-price { font-size: 13px; color: var(--xm-ink-2); margin: 0; }

/* ---------- Ambiance Extrême · the magazine page ---------- */
.xm-mag-hero {
	display: grid;
	grid-template-columns: minmax(280px, 380px) 1fr;
	gap: 56px;
	align-items: start;
}
.xm-mag-cover {
	position: relative;
	box-shadow: 0 24px 48px -16px rgba(0,0,0,0.28),
	            0 8px 18px -8px rgba(0,0,0,0.18);
}
.xm-mag-cover .xm-ph { border: 1px solid rgba(0,0,0,0.08); aspect-ratio: 210/297; margin: 0; }
.xm-mag-cover .xm-mag-cover-img img {
	display: block; width: 100%; height: 100%;
	object-fit: cover; aspect-ratio: 210/297;
}
.xm-mag-cover .xm-mag-cover-img img:not([src]),
.xm-mag-cover .xm-mag-cover-img img[src=""] { display: none; }
.xm-mag-cover-stripe {
	position: absolute; left: 0; right: 0; bottom: 0;
	background: var(--xm-primary); color: var(--xm-paper);
	font-family: "Bodoni Moda", serif; font-style: italic;
	font-size: 14px; letter-spacing: 0.04em;
	padding: 10px 16px;
}
.xm-mag-hero-meta { padding-top: 6px; }
.xm-mag-hero-meta h2 { margin-top: 8px; }
.xm-mag-hero-meta > p { margin-top: 18px; }

.xm-mag-toc {
	margin: 28px 0 0;
	border-top: 1px solid var(--xm-rule);
}
.xm-mag-toc-row {
	display: grid; grid-template-columns: 60px 1fr;
	gap: 18px; align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid var(--xm-rule);
	font-size: 14px; color: var(--xm-ink);
}
.xm-mag-toc-row > * { margin: 0; }
.xm-mag-toc-p {
	font-family: "Bodoni Moda", serif; font-style: italic;
	color: var(--xm-primary); font-size: 13px;
}
.xm-mag-toc-t { color: var(--xm-ink-2); font-size: 14px; }

.xm-mag-spec {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 0; margin-top: 24px;
	border-top: 1px solid var(--xm-rule); border-bottom: 1px solid var(--xm-rule);
}
.xm-mag-spec-item {
	padding: 16px 0 16px 18px;
	border-left: 1px solid var(--xm-rule);
	display: flex; flex-direction: column; gap: 4px;
}
.xm-mag-spec-item:first-child { border-left: 0; padding-left: 0; }
.xm-mag-spec-item > * { margin: 0; }
.xm-mag-spec-label {
	font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--xm-ink-2);
}
.xm-mag-spec-value {
	font-family: "Bodoni Moda", serif; font-weight: 400;
	font-size: 20px; color: var(--xm-ink);
}

.xm-mag-rubrieken {
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
}

.xm-mag-section-head { align-items: baseline; }
.xm-mag-section-head > p:last-child a { color: var(--xm-primary); font-size: 13px; }

.xm-mag-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.xm-mag-card .xm-ph {
	border: 1px solid rgba(0,0,0,0.08);
	box-shadow: 0 12px 24px -10px rgba(0,0,0,0.22),
	            0 4px 8px -4px rgba(0,0,0,0.12);
	aspect-ratio: 210/297;
}
.xm-mag-card.featured .xm-ph,
.xm-mag-card.featured .xm-mag-cover-img {
	outline: 2px solid var(--xm-primary); outline-offset: 4px;
}
.xm-mag-card .xm-mag-cover-img {
	width: 100%; height: auto; display: block;
	aspect-ratio: 210/297; object-fit: cover;
	border: 1px solid rgba(0,0,0,0.08);
	box-shadow: 0 12px 24px -10px rgba(0,0,0,0.22),
	            0 4px 8px -4px rgba(0,0,0,0.12);
}
.xm-mag-card-pdf a { color: var(--xm-primary); font-size: 13px; }
.xm-mag-card-meta { padding-top: 16px; }
.xm-mag-card-meta .xm-event-cat {
	font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--xm-primary); font-weight: 500;
}
.xm-mag-card-meta h4 {
	font-family: "Bodoni Moda", serif; font-weight: 400;
	font-size: 20px; margin: 6px 0 4px; letter-spacing: -0.005em;
}
.xm-mag-card-meta p {
	margin: 0; font-size: 13px; color: var(--xm-ink-2); line-height: 1.5;
}

.xm-mag-schedule {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
	border-top: 1px solid var(--xm-rule);
	border-bottom: 1px solid var(--xm-rule);
}
.xm-mag-quarter {
	padding: 28px 24px 28px 24px;
	border-left: 1px solid var(--xm-rule);
}
.xm-mag-quarter:first-child { border-left: 0; padding-left: 0; }
.xm-mag-quarter > * { margin-block-start: 0; margin-block-end: 0; }
.xm-mag-quarter > .xm-mag-quarter-n { margin: 0; }
.xm-mag-quarter h3 {
	font-family: "Bodoni Moda", serif; font-weight: 400;
	font-size: 22px; margin: 4px 0 0;
}
.xm-mag-quarter .xm-event-cat {
	margin-top: 6px;
	font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--xm-primary); font-weight: 500;
}
.xm-mag-quarter p {
	margin-top: 10px; color: var(--xm-ink-2); font-size: 14px; line-height: 1.55;
}
.xm-mag-quarter-n {
	font-family: "Bodoni Moda", serif; font-style: italic;
	font-size: 14px; color: var(--xm-primary);
	letter-spacing: 0.04em;
}

.xm-mag-redactie {
	margin-top: 28px;
	border-top: 1px solid var(--xm-rule);
}
.xm-mag-redactie-row {
	display: grid; grid-template-columns: 1fr 1.4fr;
	gap: 18px; align-items: baseline;
	padding: 14px 0;
	border-bottom: 1px solid var(--xm-rule);
}
.xm-mag-redactie-row > * { margin: 0; }
.xm-mag-redactie-n {
	font-family: "Bodoni Moda", serif; font-weight: 400;
	font-size: 20px; color: var(--xm-ink); letter-spacing: -0.005em;
}
.xm-mag-redactie-r { font-size: 13px; color: var(--xm-ink-2); }

.xm-mag-spread {
	display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.xm-mag-spread .xm-ph { aspect-ratio: 4/3; }
.xm-mag-spread .xm-mag-spread-img { margin: 0; }
.xm-mag-spread .xm-mag-spread-img img {
	display: block; width: 100%; height: 100%;
	object-fit: cover; aspect-ratio: 4/3;
}
.xm-mag-spread .xm-mag-spread-img img:not([src]),
.xm-mag-spread .xm-mag-spread-img img[src=""] { display: none; }

.xm-mag-redactie-cols { gap: 48px; align-items: start; }
.xm-mag-callouts { gap: 24px; }
.xm-mag-callouts .xm-callout { height: 100%; }

/* ---------- Breadcrumb (sub-pages) ---------- */
.xm-breadcrumb {
	padding: 18px var(--xm-pad) 0;
	font-size: 13px; color: var(--xm-ink-2);
}
.xm-breadcrumb p { margin: 0; }
.xm-breadcrumb a {
	color: var(--xm-primary); text-decoration: none;
	border-bottom: 1px solid var(--xm-primary);
}
.xm-breadcrumb a:hover { color: var(--xm-ink); border-bottom-color: var(--xm-ink); }
.xm-breadcrumb span { color: var(--xm-ink); }

/* ---------- Footer Facebook icon link ---------- */
.xm-fb {
	display: inline-flex; align-items: center; gap: 8px;
	color: rgba(255,255,255,0.7); text-decoration: none;
	font-size: 12px;
}
.xm-fb:hover { color: var(--xm-paper); }
.xm-fb svg { display: block; opacity: 0.85; }
.xm-fb:hover svg { opacity: 1; }

/* ---------- Commissie contact button (outline, on alt bg) ---------- */
.xm-commissie-card { gap: 8px; }
.xm-commissie-cta { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--xm-rule); }
.xm-commissie-cta .wp-block-button.is-style-outline a {
	background: transparent; color: var(--xm-primary);
	border: 1px solid var(--xm-primary); border-radius: 2px;
	padding: 8px 14px; font-size: 12px; font-weight: 500;
	letter-spacing: 0.04em;
}
.xm-commissie-cta .wp-block-button.is-style-outline a:hover {
	background: var(--xm-primary); color: var(--xm-paper);
}

/* ---------- Board card placeholder figures ---------- */
.xm-board figure.xm-ph { border: 0; border-radius: 0; }

/* ---------- Ambiance Extrême — nabestelformulier ---------- */
.xm-ae-bestel { max-width: 760px; margin-top: 28px; }
/* wpautop wraps the shortcode output, leaving a stray empty paragraph and a
   <br> inside Forminator's render placeholder. */
.xm-ae-bestel > p:empty { display: none; }
.xm-ae-bestel > .forminator-ui > br { display: none; }

/* ---------- Forminator, skinned to the XM design ----------
   Mirrors `.vc-form` from the Claude Design source: white panel with a rule
   border, grey (paper-2) input fills, sans uppercase labels. Forminator ships
   a base stylesheet at four-class specificity and a per-form generated one at
   `#forminator-module-<id>` strength, so anything the generated file also sets
   (label/input/button typography, radio bullet colours) needs !important, and
   the base rules that use `:not()` need matching specificity. */
.forminator-ui.forminator-custom-form.forminator-design--default {
	background: var(--xm-paper);
	border: 1px solid var(--xm-rule);
	border-radius: 2px;
	padding: 28px;
	font-family: var(--wp--preset--font-family--sans);
}

/* Rows and columns — replace the plugin's gutter padding with a gap. */
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-row {
	display: flex; flex-wrap: wrap;
	gap: 14px; margin: 0 0 14px;
}
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-col {
	flex: 1 1 100%; min-width: 0; padding: 0; margin: 0;
}
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-col-6 {
	flex: 1 1 calc(50% - 7px);
}

/* Labels: plain sentence case. The design's `.vc-form` uses an 11px uppercase
   label, but that reads as a shout at this density — normal case at 13px. */
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-label {
	display: block;
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0;
	line-height: 1.4;
	text-transform: none;
	color: var(--xm-ink-2);
}
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-label .forminator-required {
	color: var(--xm-primary) !important;
}
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-description {
	margin: 6px 0 0;
	font-size: 12.5px; line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--xm-ink-2);
}

/* Text inputs, e-mail, textarea. */
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-input,
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-textarea {
	width: 100%;
	box-sizing: border-box;
	height: auto;
	padding: 11px 12px;
	background: var(--xm-paper-2);
	border: 1px solid var(--xm-rule);
	border-radius: 2px;
	box-shadow: none;
	color: var(--xm-ink);
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 14px !important;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.5;
}
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-textarea {
	min-height: 120px; resize: vertical;
}
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-input::placeholder,
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-textarea::placeholder {
	color: var(--xm-ink-2); opacity: 0.6;
}
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-input:focus,
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-textarea:focus {
	border-color: var(--xm-primary);
	box-shadow: none;
	outline: 2px solid var(--xm-primary);
	outline-offset: -1px;
}

/* Radio group — options render as choice cards sharing the input fill.
   Base CSS gives the first option `:first-of-type{margin-top:10px}` and the
   rest `20px`, which knocks option 1 out of line; it also kills pointer
   events on the label so only the text is clickable. Both undone here. */
.forminator-ui.forminator-custom-form.forminator-design--default [role="radiogroup"] {
	display: flex; flex-wrap: wrap; gap: 10px;
}
.forminator-ui.forminator-custom-form.forminator-design--default [role="radiogroup"] > .forminator-label {
	flex-basis: 100%; margin-bottom: 0;
}
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-radio,
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-radio:not(.forminator-radio-inline),
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-radio:not(.forminator-radio-inline):first-of-type,
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-radio:not(.forminator-radio-inline):last-of-type {
	flex: 1 1 calc(50% - 5px);
	display: flex; align-items: center;
	margin: 0;
	padding: 11px 12px;
	background: var(--xm-paper-2);
	border: 1px solid var(--xm-rule);
	border-radius: 2px;
	cursor: pointer;
	pointer-events: auto;
	transition: border-color .12s ease;
}
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-radio:hover {
	border-color: var(--xm-primary);
}
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-radio:has(input:checked) {
	border-color: var(--xm-primary);
	background: var(--xm-paper);
}
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-radio .forminator-radio-bullet {
	border-color: var(--xm-ink-2) !important;
	background-color: var(--xm-paper) !important;
}
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-radio .forminator-radio-bullet:before {
	background-color: var(--xm-primary) !important;
}
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-radio input:checked + .forminator-radio-bullet {
	border-color: var(--xm-primary) !important;
	background-color: var(--xm-paper) !important;
}
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-radio .forminator-radio-label {
	font-size: 14px; line-height: 1.4; color: var(--xm-ink);
}

/* Section headings (the "Mijn XM" divider on the membership form). */
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-title {
	margin: 10px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--xm-rule);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 22px; font-weight: 400; line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--xm-ink);
}

/* Selects — the native element and the select2 shell Forminator swaps in. */
.forminator-ui.forminator-custom-form.forminator-design--default select.forminator-select--field,
.forminator-ui.forminator-custom-form.forminator-design--default .select2-container--default .select2-selection {
	min-height: 44px;
	padding: 6px 10px;
	background: var(--xm-paper-2);
	border: 1px solid var(--xm-rule);
	border-radius: 2px;
	color: var(--xm-ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
}
.forminator-ui.forminator-custom-form.forminator-design--default .select2-container--default.select2-container--focus .select2-selection,
.forminator-ui.forminator-custom-form.forminator-design--default .select2-container--default.select2-container--open .select2-selection {
	border-color: var(--xm-primary);
}
.forminator-ui.forminator-custom-form.forminator-design--default .select2-container { width: 100% !important; }

/* Submit — same shape as the theme's primary button. */
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-row-last {
	margin: 22px 0 0; padding-top: 20px;
	border-top: 1px solid var(--xm-rule);
}
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-button-submit {
	height: auto;
	padding: 12px 22px;
	background: var(--xm-primary);
	border: 0; border-radius: 2px;
	color: var(--xm-paper);
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color .12s ease;
}
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-button-submit:hover,
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-button-submit:focus {
	background: var(--xm-ink);
	color: var(--xm-paper);
}

/* Validation + response messages. */
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-error-message {
	margin-top: 6px;
	font-size: 12.5px; color: var(--xm-primary);
}
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-has_error .forminator-input,
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-has_error .forminator-textarea {
	border-color: var(--xm-primary);
}
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-response-message {
	border-radius: 2px; margin-bottom: 20px;
}
.forminator-ui.forminator-custom-form.forminator-design--default .forminator-response-message[aria-hidden="true"] {
	display: none;
}

/* ---------- Grid containers on flow-layout groups ----------
   When a core group carries one of our `display: grid` classes it still gets
   core's flow-layout CSS, which emits `<sel><sel> > * + * { margin-block-start:
   <block-gap> }`. In a grid that drops every item except the first by one gap,
   so item 01 sits higher than the rest. The doubled-class selector outranks a
   plain class here, hence !important. Grid `gap` already does the spacing. */
.xm-stats > *,
.xm-swatches > *,
.xm-mag-rubrieken > *,
.xm-mag-schedule > *,
.xm-mag-spread > *,
.xm-mag-redactie > *,
.xm-mag-toc > * {
	margin-block-start: 0 !important;
}

/* Rubrieken sit beside the cover in the magazine hero — five columns is far
   too tight in half the width. */
.xm-mag-hero .xm-mag-rubrieken { grid-template-columns: repeat(2, 1fr); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	:root { --xm-pad: 24px; }
	.xm-site-header { grid-template-columns: 1fr auto auto; }
	.xm-stats { grid-template-columns: repeat(2, 1fr); }
	.xm-stats .wp-block-column:nth-child(odd) { border-left: 0; padding-left: 0; }
	.xm-event-row { grid-template-columns: 1fr; gap: 8px; }
	.xm-event-row .xm-event-meta { text-align: left; }
	.xm-callout { grid-template-columns: 1fr; }
	.xm-swatches { grid-template-columns: repeat(3, 1fr); }
	.xm-benefits, .xm-tiles, .xm-twocol-callouts, .xm-magazijn-info, .xm-commissies, .xm-board { display: flex; flex-direction: column; }
	.xm-mag-hero { grid-template-columns: 1fr; gap: 32px; }
	.xm-mag-rubrieken { grid-template-columns: repeat(2, 1fr); }
	.xm-mag-grid { grid-template-columns: repeat(2, 1fr); }
	.xm-mag-schedule { grid-template-columns: 1fr 1fr; }
	.xm-mag-schedule .xm-mag-quarter:nth-child(odd) { border-left: 0; padding-left: 0; }
	.xm-timeline .xm-tl-row { grid-template-columns: 1fr; gap: 12px; }
	.forminator-ui.forminator-custom-form.forminator-design--default { padding: 22px 20px 20px; }
	.forminator-ui.forminator-custom-form.forminator-design--default .forminator-col-6,
	.forminator-ui.forminator-custom-form.forminator-design--default .forminator-radio { flex: 1 1 100%; }
}

@media (max-width: 600px) {
	.xm-swatches { grid-template-columns: repeat(2, 1fr); }
	.xm-form-row { grid-template-columns: 1fr; }
}

/* ---------- 404 ---------- */
.xm-404 {
	background: var(--xm-paper);
	padding: 80px var(--xm-pad) 96px;
	position: relative;
}
.xm-404::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: var(--xm-rule);
}
.xm-404-inner { position: relative; }
.xm-404-eyebrow { color: var(--xm-primary); }
.xm-404-code {
	font-size: clamp(120px, 22vw, 240px);
	line-height: 0.9;
	letter-spacing: -0.04em;
	margin: 8px 0 24px;
	color: var(--xm-ink);
}
.xm-404-code em {
	font-style: italic;
	color: var(--xm-primary);
}
.xm-404-title {
	font-family: 'Bodoni Moda', Georgia, serif;
	font-size: clamp(28px, 3.6vw, 40px);
	line-height: 1.15;
	margin: 0 0 16px;
	max-width: 520px;
}
.xm-404 .is-style-lede { max-width: 520px; margin-bottom: 28px; }
.xm-404 .wp-block-buttons { gap: 14px 20px; margin-bottom: 32px; }
.xm-404-search-label {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--xm-ink-2);
	margin: 0 0 10px;
}
.xm-404-search { max-width: 440px; }
.xm-404-search .wp-block-search__input {
	border: 1px solid var(--xm-rule);
	border-right: 0;
	padding: 12px 14px;
	font-size: 15px;
}
.xm-404-search .wp-block-search__button {
	background: var(--xm-ink);
	color: var(--xm-paper);
	border: 0;
	padding: 0 20px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.xm-404-search .wp-block-search__button:hover { background: var(--xm-primary); }

.xm-404-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--xm-paper-2);
	border: 1px solid var(--xm-rule);
}
.xm-404-media img,
.xm-404-media .xm-404-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.xm-404-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--xm-primary);
	opacity: 0.55;
}
.xm-404-fallback svg { width: 45%; height: auto; }

@media (max-width: 900px) {
	.xm-404 { padding: 56px var(--xm-pad) 72px; }
	.xm-404-columns { display: flex; flex-direction: column-reverse; gap: 32px; }
	.xm-404-columns .wp-block-column { flex-basis: auto !important; width: 100%; }
	.xm-404-media { aspect-ratio: 16 / 10; }
}

/* ---------- Cijfers (RDW-statistieken, pagina /xm-statistieken) ----------
   Charts are hand-rolled SVG/CSS — no charting library. The markup is built
   by the "XM in NL" Code Snippet on the site; these rules are the design
   contract it renders into. Ported from design/…/pages-c-data.jsx. */

.xm-cijfers {
	--xm-c-gap: 16px;
	font-size: 14px;
}
.xm-cijfers-status {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--xm-ink-2);
	padding: 40px 0;
	margin: 0;
}
.xm-cijfers-status.is-error { color: var(--xm-primary); }

/* Meta strip under the page header */
.xm-cijfers-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 0 0 20px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--xm-ink-2);
}
.xm-cijfers-meta strong { color: var(--xm-ink); font-weight: 600; }

/* ----- kleine schermen: vriendelijke hint boven het dashboard ----- */
.xm-cijfers .xm-screenhint { display: none; }

/* ----- filter bar ----- */
.xm-cijfers .xm-filterbar {
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--xm-paper-2);
	border-top: 1px solid var(--xm-rule);
	border-bottom: 1px solid var(--xm-rule);
	margin: 0 0 28px;
}
.xm-cijfers .xm-filterbar-inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
	gap: 16px 22px;
	padding: 18px 24px;
}
.xm-cijfers .xm-ftoggle { display: none; }
.xm-cijfers .xm-fgroup { display: grid; gap: 7px; }
.xm-cijfers .xm-flabel {
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--xm-ink-2);
	font-weight: 500;
}
.xm-cijfers .xm-fchips { display: flex; gap: 6px; flex-wrap: wrap; }
.xm-cijfers .xm-chip {
	font: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	padding: 6px 11px;
	border-radius: 999px;
	border: 1px solid var(--xm-rule);
	background: var(--xm-paper);
	color: var(--xm-ink-2);
	cursor: pointer;
	white-space: nowrap;
}
.xm-cijfers .xm-chip:hover { border-color: var(--xm-ink-2); }
.xm-cijfers .xm-chip.is-on {
	background: var(--xm-ink);
	border-color: var(--xm-ink);
	color: var(--xm-paper);
}
.xm-cijfers .xm-fselect {
	font: inherit;
	font-size: 12.5px;
	color: var(--xm-ink);
	background: var(--xm-paper);
	border: 1px solid var(--xm-rule);
	border-radius: 999px;
	padding: 6px 12px;
	width: 100%;
	max-width: 100%;
}

/* ----- stat row (reuses .xm-stat, tighter for six cells) ----- */
.xm-cijfers .xm-stats {
	grid-template-columns: repeat(6, 1fr);
	margin: 0 0 28px;
}
.xm-cijfers .xm-stat { padding: 22px 16px; }
.xm-cijfers .xm-stat .n { font-size: 34px; }
.xm-cijfers .xm-stat .n.is-plate {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 19px;
	letter-spacing: 0.06em;
	padding-top: 8px;
}
.xm-cijfers .xm-stat .l { font-size: 12.5px; color: var(--xm-ink-2); margin-top: 6px; }
.xm-cijfers .xm-stat .sub {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.08em;
	color: var(--xm-ink-2);
	margin-top: 4px;
	min-height: 1em;
}

/* ----- cards ----- */
.xm-cijfers .xm-dcard {
	background: var(--xm-paper);
	border: 1px solid var(--xm-rule);
	border-radius: 2px;
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
}
.xm-cijfers .xm-dcard > header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--xm-rule);
}
.xm-cijfers .xm-dcard h3 {
	font-size: 15px;
	font-weight: 600;
	margin: 0;
	letter-spacing: -0.005em;
}
.xm-cijfers .xm-dcard-note {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--xm-ink-2);
	white-space: nowrap;
}
.xm-cijfers .xm-dgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--xm-c-gap);
	margin-top: var(--xm-c-gap);
}
.xm-cijfers .xm-dgrid > .xm-dcard.is-wide { grid-column: span 2; }
.xm-cijfers .xm-dgrid > .xm-dcard.is-full { grid-column: 1 / -1; }
.xm-cijfers .xm-dcard-empty {
	margin: 0;
	font-size: 13px;
	color: var(--xm-ink-2);
}

/* ----- vertical bars -----
   .xm-barchart is a 2×2 grid: rotated y-axis title | plot, x-axis title under
   the plot (mirrors the axis titles on the SVG bubble charts). It grows to fill
   the card so a short series doesn't stop halfway up the frame; the JS sets
   min-height. Value labels sit directly on top of each bar — the 16px
   padding-top on .xm-bars is the headroom for the tallest one. */
.xm-cijfers .xm-barchart {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr) auto;
	gap: 8px 10px;
}
.xm-cijfers .xm-bars-ytitle,
.xm-cijfers .xm-bars-xtitle {
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--xm-ink-2);
}
.xm-cijfers .xm-bars-ytitle {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}
.xm-cijfers .xm-bars-xtitle {
	grid-column: 2;
	grid-row: 2;
	text-align: center;
}
.xm-cijfers .xm-bars {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: stretch;
	gap: 6px;
	height: 100%;
	min-height: 0;
	box-sizing: border-box;
	padding-top: 16px;
}
.xm-cijfers .xm-bar-col {
	flex: 1;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	justify-items: center;
	gap: 6px;
	min-width: 0;
}
.xm-cijfers .xm-bar-plot {
	position: relative;
	width: 100%;
	min-height: 0;
}
.xm-cijfers .xm-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: color-mix(in srgb, var(--xm-primary) 85%, var(--xm-paper));
	min-height: 1px;
}
.xm-cijfers .xm-bar-val,
.xm-cijfers .xm-bar-lab {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	color: var(--xm-ink-2);
	white-space: nowrap;
}
.xm-cijfers .xm-bar-val {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 3px;
	color: var(--xm-ink);
}
.xm-cijfers .xm-bar-lab { font-size: 9.5px; letter-spacing: 0.04em; }

/* ----- horizontal bars ----- */
.xm-cijfers .xm-hbars { display: grid; gap: 9px; }
.xm-cijfers .xm-hbar-row {
	display: grid;
	grid-template-columns: 82px minmax(0, 1fr) max-content;
	align-items: center;
	gap: 10px;
}
.xm-cijfers .xm-hbar-lab {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--xm-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.xm-cijfers .xm-hbar-chip {
	width: 10px; height: 10px;
	border-radius: 999px;
	border: 1px solid var(--xm-rule);
	flex: none;
}
.xm-cijfers .xm-hbar-track {
	height: 8px;
	background: var(--xm-paper-2);
	border-radius: 999px;
	overflow: hidden;
}
.xm-cijfers .xm-hbar-fill { height: 100%; background: var(--xm-primary); opacity: 0.85; }
.xm-cijfers .xm-hbar-val {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px;
	color: var(--xm-ink);
	text-align: right;
	white-space: nowrap;
	display: grid;
	justify-items: end;
	line-height: 1.3;
}
.xm-cijfers .xm-hbar-val span { color: var(--xm-ink-2); }

/* ----- share bars ----- */
.xm-cijfers .xm-share { display: grid; gap: 16px; }
.xm-cijfers .xm-share-track {
	display: flex;
	height: 10px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--xm-paper-2);
}
.xm-cijfers .xm-share-seg { background: currentColor; }
.xm-cijfers .xm-share-legend { display: grid; gap: 8px; }
.xm-cijfers .xm-share-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--xm-ink);
}
.xm-cijfers .xm-share-item em {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-style: normal;
	color: var(--xm-ink-2);
}
.xm-cijfers .xm-share-n {
	margin-left: auto;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	color: var(--xm-ink-2);
}
.xm-cijfers .xm-share-key {
	width: 9px; height: 9px;
	border-radius: 999px;
	background: currentColor;
	flex: none;
}

/* ----- SVG charts: trend line + bubble scatter ----- */
.xm-cijfers .xm-svgchart svg { width: 100%; display: block; overflow: visible; }
.xm-cijfers .xm-trend svg { height: 260px; }
.xm-cijfers .xm-bubble svg { height: 340px; }
.xm-cijfers .xm-grid { stroke: var(--xm-rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.xm-cijfers .xm-axis {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	fill: var(--xm-ink-2);
}
.xm-cijfers .xm-axis-title {
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	fill: var(--xm-ink-2);
}
.xm-cijfers .xm-line {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}
.xm-cijfers .xm-dot { fill: currentColor; stroke: none; }
.xm-cijfers .xm-blob { fill: currentColor; fill-opacity: 0.5; stroke: currentColor; stroke-opacity: 0.9; stroke-width: 1; }
.xm-cijfers .xm-avg {
	stroke: var(--xm-primary);
	stroke-width: 1.5;
	stroke-dasharray: 5 4;
	vector-effect: non-scaling-stroke;
}
.xm-cijfers .xm-avg-lab {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	fill: var(--xm-primary);
}
.xm-cijfers .xm-chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-top: 14px;
}
.xm-cijfers .xm-chart-key {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: var(--xm-ink-2);
}
.xm-cijfers .xm-chart-key i { width: 14px; height: 2px; display: block; background: currentColor; }
.xm-cijfers .xm-chart-key.is-dot i { width: 10px; height: 10px; border-radius: 999px; opacity: 0.65; }

/* Series colours — shapes inherit via currentColor */
.xm-cijfers .xm-s0 { color: var(--xm-primary); }
.xm-cijfers .xm-s1 { color: var(--xm-secondary); }
.xm-cijfers .xm-s2 { color: var(--xm-ink-2); }
.xm-cijfers .xm-s3 { color: #8a6d3b; }
.xm-cijfers .xm-s4 { color: #2f6b4f; }
.xm-cijfers .xm-s5 { color: #6b4a7a; }

.xm-cijfers-foot {
	margin: 24px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--xm-ink-2);
	max-width: 760px;
}

@media (max-width: 1100px) {
	.xm-cijfers .xm-stats { grid-template-columns: repeat(3, 1fr); }
	.xm-cijfers .xm-stat:nth-child(3n + 1) { border-left: 0; }
	.xm-cijfers .xm-dgrid { grid-template-columns: repeat(2, 1fr); }
	.xm-cijfers .xm-dgrid > .xm-dcard.is-wide { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
	.xm-cijfers .xm-stats { grid-template-columns: repeat(2, 1fr); }
	.xm-cijfers .xm-stat { padding: 18px 12px; }
	.xm-cijfers .xm-stat:nth-child(n) { border-left: 1px solid var(--xm-rule); }
	.xm-cijfers .xm-stat:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
	.xm-cijfers .xm-dgrid { grid-template-columns: 1fr; }
	.xm-cijfers .xm-dcard { padding: 18px 16px 20px; }
	.xm-cijfers .xm-trend svg { height: 220px; }
	.xm-cijfers .xm-bubble svg { height: 280px; }
	.xm-cijfers .xm-hbar-row { grid-template-columns: 70px minmax(0, 1fr) max-content; }
	.xm-cijfers .xm-screenhint {
		display: block;
		margin: 0 0 20px;
		padding: 14px 16px;
		background: var(--xm-paper-2);
		border: 1px solid var(--xm-rule);
		border-left: 3px solid var(--xm-primary);
		font-size: 13.5px;
		line-height: 1.5;
		color: var(--xm-ink-2);
	}
	.xm-cijfers .xm-ftoggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		font: inherit;
		font-size: 10px;
		font-weight: 500;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--xm-ink-2);
		background: none;
		border: 0;
		padding: 14px 16px;
		cursor: pointer;
	}
	.xm-cijfers .xm-ftoggle-caret {
		width: 7px;
		height: 7px;
		border-right: 1.5px solid var(--xm-primary);
		border-bottom: 1.5px solid var(--xm-primary);
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.18s ease;
	}
	.xm-cijfers .xm-filterbar.is-open .xm-ftoggle-caret { transform: translateY(1px) rotate(-135deg); }
	.xm-cijfers .xm-filterbar-inner { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 16px; }
	.xm-cijfers .xm-filterbar.is-open .xm-filterbar-inner { display: grid; padding: 2px 16px 16px; }
}