/* Easy Car Care – thema-stijlen
   Zwart met logo-blauw. Kleuren komen uit theme.json (Stijlen > Kleuren). */

:root {
	--ecc-bg: var(--wp--preset--color--bg, #0A0B0E);
	--ecc-paper: var(--wp--preset--color--paper, #13151A);
	--ecc-board: var(--wp--preset--color--board, #050609);
	--ecc-ink: var(--wp--preset--color--ink, #F1F3F7);
	--ecc-soft: var(--wp--preset--color--soft, #9CA3AF);
	--ecc-rule: var(--wp--preset--color--rule, #272B34);
	--ecc-blue: var(--wp--preset--color--blue, #2D7FF9);
	--ecc-blue-light: var(--wp--preset--color--blue-light, #8EC2FF);
	--ecc-display: var(--wp--preset--font-family--display);
	--ecc-mono: var(--wp--preset--font-family--mono);
	color-scheme: dark;
}

body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .wp-block-site-title { font-stretch: 118%; text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: manual; }

/* Volle breedte: secties van een pagina lopen altijd van rand tot rand,
   welk paginasjabloon WordPress ook kiest. */
.wp-block-post-content.alignfull { max-width: none; }
.ecc-has-sections .ecc-page-titlebar { display: none; }
.ecc-page-content:not(:has(> .alignfull)) { padding-block: clamp(40px, 6vw, 80px); }
.ecc-page-content > .alignfull:first-child { margin-top: 0 !important; }
main > .wp-block-post-content.alignfull { margin-top: 0; }
:where(.wp-site-blocks) :focus-visible { outline: 3px solid var(--ecc-blue); outline-offset: 3px; }
::selection { background: var(--ecc-blue); color: #fff; }

/* ---------- knoppen ---------- */
.wp-element-button, .wp-block-button__link { transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.wp-element-button:hover, .wp-block-button__link:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ecc-ink); }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; color: var(--ecc-ink); border: 2px solid var(--ecc-ink);
	padding: .9em 1.4em;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--ecc-ink); color: var(--ecc-bg); }
@media (prefers-reduced-motion: reduce) { .wp-element-button, .wp-block-button__link { transition: none; } }

/* ---------- algemene bouwstenen ---------- */
.ecc-tag, .is-style-ecc-label {
	font-family: var(--ecc-mono); font-size: .74rem; letter-spacing: .12em;
	text-transform: uppercase; font-weight: 600; color: var(--ecc-blue);
}
.ecc-lede { font-size: 1.18rem; color: var(--ecc-soft); max-width: 58ch; }
.ecc-soft { color: var(--ecc-soft); }
.ecc-note {
	font-family: var(--ecc-mono); font-size: .76rem; color: var(--ecc-soft);
	border-left: 4px solid var(--ecc-blue); padding: 8px 12px; background: var(--ecc-paper);
}
mark.ecc-hl { background: var(--ecc-blue); color: #fff; padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ecc-big { font-family: var(--ecc-mono); font-weight: 600; font-size: 1.25rem; }

.ecc-ticks, .is-style-ecc-ticks { list-style: none; padding-left: 0; display: grid; gap: 9px; }
.ecc-ticks li, .is-style-ecc-ticks li { padding-left: 30px; position: relative; }
.ecc-ticks li::before, .is-style-ecc-ticks li::before {
	content: "✓"; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%;
	background: var(--ecc-blue); color: #fff; font-weight: 800; font-size: .78rem; display: grid; place-items: center;
}

.ecc-box, .is-style-ecc-box, .is-style-ecc-box-blue {
	background: var(--ecc-paper); border: 2px solid var(--ecc-rule); padding: 26px; box-sizing: border-box;
}
.ecc-box > *, .is-style-ecc-box > * { margin-block: 0; }
.ecc-box > * + *, .is-style-ecc-box > * + *, .is-style-ecc-box-blue > * + * { margin-top: 12px; }
.ecc-box.is-blue, .is-style-ecc-box-blue { background: var(--ecc-blue); border-color: var(--ecc-blue); color: #fff; }
.ecc-box.is-blue .ecc-tag, .ecc-box.is-blue .ecc-soft, .ecc-box.is-blue a { color: #fff; }
.ecc-box.is-blue .ecc-note { background: rgba(0,0,0,.18); color: #fff; border-color: #fff; }
.ecc-box.is-blue .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; border-color: #fff; }
.ecc-box.is-blue .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #fff; color: var(--ecc-blue); }
.wp-block-column > .ecc-box + .ecc-box, .wp-block-column > .ecc-box + .ecc-photo { margin-top: 16px; }
.wp-block-column > .ecc-box:only-child { height: 100%; }
/* Meerdere kaders onder elkaar (bijv. naast een formulier): samen precies zo hoog als de kolom ernaast. */
.wp-block-column:has(> .ecc-box + .ecc-box) { display: flex; flex-direction: column; gap: 16px; }
.wp-block-column:has(> .ecc-box + .ecc-box) > * { margin: 0 !important; }
/* Alleen naast een formulier groeien de kaders mee tot de hoogte van het formulier. */
.wp-block-columns:has(.ecc-jpform, .ecc-form, .wp-block-jetpack-contact-form) > .wp-block-column:has(> .ecc-box + .ecc-box) > .ecc-box { flex: 1 1 auto; }
.ecc-side .ecc-box, .ecc-side > * { flex: 0 0 auto !important; }
.ecc-box a { overflow-wrap: anywhere; }
@media (max-width: 781px) { .wp-block-column:has(> .ecc-box + .ecc-box) > .ecc-box { flex: 0 0 auto !important; } }

/* fotovakken */
.ecc-photo { margin: 0; }
.ecc-photo img { width: 100%; height: auto; display: block; border: 1px solid var(--ecc-rule); }

/* ---------- secties ---------- */
.ecc-sec { padding-block: clamp(48px, 6vw, 88px); }
.ecc-sec.is-sm { padding-block: clamp(32px, 4vw, 52px); }
.ecc-paper { background: var(--ecc-paper); border-block: 1px solid var(--ecc-rule); }
.ecc-board { background: var(--ecc-board); border-block: 1px solid #1E222A; }
.ecc-wrap > * + * { margin-top: 32px; }
.wp-block-group.alignfull + .wp-block-group.alignfull { margin-top: 0; }
.wp-block-post-content > .alignfull:first-child { margin-top: 0; }

.ecc-sechead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 12px 48px; align-items: end; margin-bottom: 36px !important; }
.ecc-sechead > * { margin: 0 !important; }
.ecc-sechead .ecc-tag { grid-column: 1 / -1; }
@media (max-width: 820px) { .ecc-sechead { grid-template-columns: 1fr; } }

/* subpagina-kop */
.ecc-phero {
	padding-block: clamp(40px, 6vw, 80px) clamp(28px, 4vw, 48px);
	border-bottom: 1px solid var(--ecc-rule);
	background: radial-gradient(ellipse 70% 120% at 85% 0%, rgba(45,127,249,.18), transparent 60%);
}
.ecc-phero .ecc-wrap > * + * { margin-top: 18px; }
.ecc-crumbs { font-family: var(--ecc-mono); font-size: .75rem; color: var(--ecc-soft); }
.ecc-crumbs a { color: var(--ecc-soft); text-decoration: none; border-bottom: 1px solid var(--ecc-rule); }

/* home-hero */
.ecc-hero { background: radial-gradient(ellipse 60% 90% at 80% 10%, rgba(45,127,249,.2), transparent 60%); padding-bottom: 0 !important; }
.ecc-hero { padding-top: clamp(32px, 4.5vw, 64px) !important; }
.ecc-hero-copy { container-type: inline-size; }
.ecc-hero h1 { font-size: clamp(2rem, 10.5cqi, 4.4rem); }
/* Hoofdfoto nooit hoger dan het scherm, zodat de hero op een laptop in beeld past. */
.ecc-hero-visual .ecc-photo { text-align: right; }
@media (min-width: 782px) { .ecc-hero-visual .ecc-sticker { left: max(-18px, calc(100% - min(560px, 68vh) * .8 - 18px)); } }
.ecc-hero-visual .ecc-photo img { aspect-ratio: 4 / 5; width: auto; max-width: 100%; max-height: min(560px, 68vh); object-fit: cover; margin-left: auto; }
@media (max-width: 781px) { .ecc-hero-visual .ecc-photo img { width: 100%; max-height: 60vh; } }
.ecc-hero-copy > * + * { margin-top: 18px; }
.ecc-hero-copy { padding-bottom: clamp(24px, 3.5vw, 48px); max-width: 680px; }
.ecc-hero-visual { position: relative; }
.ecc-sticker {
	position: absolute; left: -18px; top: 24px; z-index: 2; margin: 0 !important;
	background: var(--ecc-blue); color: #fff; border: 2px solid #fff; padding: 12px 16px;
	transform: rotate(-4deg); font-family: var(--ecc-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; max-width: 150px;
}
.ecc-sticker strong { display: block; font: 850 1.9rem/1 var(--ecc-display); font-stretch: 118%; letter-spacing: 0; }
@media (max-width: 781px) { .ecc-sticker { left: 12px; } }
.ecc-facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ecc-facts li { border: 1px solid var(--ecc-rule); background: var(--ecc-paper); padding: .3em .7em; font-weight: 600; font-size: .9rem; }
.ecc-stripe { height: 4px; background: linear-gradient(90deg, transparent, var(--ecc-blue) 20%, var(--ecc-blue-light) 50%, var(--ecc-blue) 80%, transparent); margin: 0 !important; padding: 0 !important; }

/* kies je route */
.ecc-routes { gap: 0 !important; border: 2px solid var(--ecc-rule); }
.ecc-route {
	position: relative; padding: 32px 28px 28px; background: var(--ecc-paper);
	border-left: 2px solid var(--ecc-rule); display: flex; flex-direction: column; gap: 12px; min-height: 230px;
	transition: background-color .15s ease;
}
.ecc-route > * { margin: 0 !important; }
.ecc-route:first-child { border-left: 0; }
.ecc-route h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.ecc-route .ecc-go { margin-top: auto !important; font: 850 1.3rem/1 var(--ecc-display); font-stretch: 118%; text-transform: uppercase; }
.ecc-route .ecc-go a { color: inherit; text-decoration: none; }
.ecc-route .ecc-go a::after { content: ""; position: absolute; inset: 0; }
.ecc-route:hover { background: #1A1D24; }
.ecc-route.is-main { background: var(--ecc-blue); color: #fff; }
.ecc-route.is-main .ecc-tag, .ecc-route.is-main .ecc-soft { color: rgba(255,255,255,.85); }
.ecc-route.is-main:hover { background: #1F6BE0; }
@media (max-width: 781px) {
	.ecc-route { border-left: 0; border-top: 2px solid var(--ecc-rule); min-height: 0; }
	.ecc-route:first-child { border-top: 0; }
}

/* werkplaatskaart */
.ecc-board-box { background: var(--ecc-board); padding: clamp(20px, 4vw, 40px); border: 1px solid #1E222A; }
.ecc-board-box > * + * { margin-top: 24px; }
.ecc-mb { border-top: 2px solid var(--ecc-ink); }
.ecc-mb-row {
	display: grid; grid-template-columns: 64px minmax(0, 1fr) 140px 150px; gap: 20px; align-items: baseline;
	padding: 22px 0; border-bottom: 1px solid #1E222A; margin: 0 !important; scroll-margin-top: 100px;
}
.ecc-mb-row > * { margin: 0 !important; }
.ecc-mb-n { font-family: var(--ecc-mono); color: var(--ecc-blue); font-size: .85rem; }
.ecc-mb-main h3 { font-size: clamp(1.2rem, 2.3vw, 1.7rem); }
.ecc-mb-main h3 a { color: inherit; text-decoration: none; }
.ecc-mb-main h3 a:hover { color: var(--ecc-blue-light); }
.ecc-mb-main p { margin-top: 6px !important; }
.ecc-mb-d, .ecc-mb-p { font-family: var(--ecc-mono); font-size: .88rem; font-variant-numeric: tabular-nums; }
.ecc-mb-p { text-align: right; color: var(--ecc-blue-light); }
@media (max-width: 760px) {
	.ecc-mb-row { grid-template-columns: 40px minmax(0, 1fr); }
	.ecc-mb-d, .ecc-mb-p { grid-column: 2; text-align: left; }
}

/* voor/na */
.ecc-ba-item > * + * { margin-top: 12px; }
.ecc-ba { position: relative; }
.ecc-ba > figure { margin: 0 !important; }
.ecc-ba > figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ecc-ba.is-ready > figure img { height: 100%; aspect-ratio: auto; }
.ecc-ba > figure + figure { margin-top: 8px !important; }
.ecc-ba.is-ready { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--ecc-rule); user-select: none; }
.ecc-ba.is-ready > figure { position: absolute; inset: 0; margin: 0 !important; }
.ecc-ba.is-ready > figure + figure { clip-path: inset(0 0 0 50%); }
.ecc-ba-lbl { position: absolute; top: 14px; z-index: 2; font: 850 .95rem/1 var(--ecc-display); font-stretch: 118%; text-transform: uppercase; padding: 7px 10px; pointer-events: none; }
.ecc-ba-lbl.is-l { left: 14px; background: #000; color: #fff; }
.ecc-ba-lbl.is-r { right: 14px; background: var(--ecc-blue); color: #fff; }
.ecc-ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; will-change: left; background: var(--ecc-blue); transform: translateX(-50%); z-index: 3; pointer-events: none; }
.ecc-ba-handle::after {
	content: "◀ ▶"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	background: var(--ecc-blue); color: #fff; font-size: .7rem; padding: 10px 8px; border: 2px solid #fff; white-space: nowrap;
}
.ecc-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; z-index: 4; pointer-events: none; }
/* Slepen gaat over het hele vlak, ook met een vinger. Verticaal scrollen blijft werken. */
.ecc-ba.is-ready { cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.ecc-ba.is-ready img { pointer-events: none; -webkit-user-drag: none; user-drag: none; }
.ecc-ba.is-ready .lightbox-trigger, .ecc-ba.is-ready .wp-lightbox-overlay { display: none !important; }
.ecc-ba-handle::after { pointer-events: none; }
.ecc-ba-range:focus-visible + .ecc-ba-handle { box-shadow: 0 0 0 3px #fff; }
.ecc-ba-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; color: var(--ecc-soft); }
.ecc-ba-cap strong { color: var(--ecc-ink); font: 850 1.02rem var(--ecc-display); font-stretch: 118%; text-transform: uppercase; }

/* collage */
.ecc-collage { gap: 16px !important; }
.ecc-collage .ecc-offset { margin-top: 48px; }
.ecc-collage .ecc-photo img { max-height: 58vh; object-fit: cover; }
@media (max-width: 781px) { .ecc-collage { flex-wrap: nowrap !important; } .ecc-collage .ecc-offset { margin-top: 40px; } }

/* cijfers */
.ecc-numbers { border-top: 2px solid var(--ecc-ink); gap: 16px !important; }
.ecc-numbers .wp-block-column { padding-top: 20px; }
.ecc-numbers .wp-block-column > * { margin: 0; }
.ecc-num { font: 850 clamp(2rem, 4vw, 3.1rem)/1 var(--ecc-display); font-stretch: 118%; font-variant-numeric: tabular-nums; }
@media (max-width: 781px) { .ecc-numbers { flex-wrap: wrap !important; } .ecc-numbers .wp-block-column { flex-basis: calc(50% - 8px) !important; } }

/* stappen */
.ecc-steps { border-top: 2px solid currentColor; gap: 20px !important; }
.ecc-steps .wp-block-column { padding-top: 20px; }
.ecc-steps .wp-block-column > * { margin: 0; }
.ecc-steps .wp-block-column > * + * { margin-top: 8px; }
.ecc-step-split + .ecc-step-split { margin-top: clamp(40px, 6vw, 72px) !important; }

/* reviews */
.ecc-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.ecc-reviews > * { margin: 0 !important; }
.ecc-review { background: var(--ecc-paper); border: 2px solid var(--ecc-rule); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.ecc-review > * { margin: 0 !important; }
.ecc-ex { align-self: flex-start; font-family: var(--ecc-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; background: var(--ecc-bg); border: 1px solid var(--ecc-rule); padding: 3px 7px; color: var(--ecc-soft); }
.ecc-stars { color: var(--ecc-blue); font-size: 1.2rem; letter-spacing: 2px; }
.ecc-who { margin-top: auto !important; border-top: 1px solid var(--ecc-rule); padding-top: 12px; font-size: .9rem; color: var(--ecc-soft); }
.ecc-who strong { color: var(--ecc-ink); }

/* blog-lijst */
.ecc-postlist .wp-block-post-template { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--ecc-ink); }
.ecc-postlist .wp-block-post-template > li { margin: 0; }
.ecc-postrow { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--ecc-rule); }
.ecc-postrow > * { margin: 0 !important; }
.ecc-postrow .ecc-thumb { margin: 0; }
.ecc-postrow .ecc-thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.ecc-postrow-text > * { margin: 0 !important; }
.ecc-postrow-text > * + * { margin-top: 6px !important; }
.ecc-postrow .wp-block-post-title { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.ecc-postrow .wp-block-post-title a { color: var(--ecc-ink); text-decoration: none; }
.ecc-postrow:hover .wp-block-post-title a { color: var(--ecc-blue-light); }
.ecc-meta, .ecc-meta a { font-family: var(--ecc-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ecc-blue); text-decoration: none; }
.ecc-postrow .wp-block-post-excerpt__more-text { display: none; }
@media (max-width: 640px) { .ecc-postrow { grid-template-columns: 1fr; } }
.wp-block-query-pagination { margin-top: 28px; font-family: var(--ecc-mono); }

/* vergelijken */
.ecc-cmp { border: 2px solid var(--ecc-rule); background: var(--ecc-paper); overflow-x: auto; }
.ecc-cmp-row { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; min-width: 540px; border-bottom: 1px solid var(--ecc-rule); margin: 0 !important; }
.ecc-cmp-row:last-child { border-bottom: 0; }
.ecc-cmp-row > p { margin: 0 !important; padding: 14px 16px; }
.ecc-cmp-row.is-head { background: var(--ecc-board); font-family: var(--ecc-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ecc-blue); }
/* Telefoon: alle drie de kolommen in beeld, zonder zijwaarts schuiven. */
@media (max-width: 640px) {
	.ecc-cmp-row { min-width: 0; grid-template-columns: .85fr 1fr 1fr; font-size: .86rem; line-height: 1.45; }
	.ecc-cmp-row > p { padding: 10px 8px; overflow-wrap: anywhere; }
	.ecc-cmp-row.is-head { font-size: .62rem; letter-spacing: .04em; }
}

/* merken */
.ecc-brands { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ecc-brands li { font: 800 1rem/1 var(--ecc-display); font-stretch: 115%; text-transform: uppercase; border: 2px solid var(--ecc-rule); background: var(--ecc-paper); padding: .6em .9em; }

/* galerij */
.ecc-grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.ecc-grid4 > * { margin: 0 !important; }

/* faq */
.ecc-faq .wp-block-details { border-bottom: 2px solid var(--ecc-rule); margin: 0; padding: 0; }
.ecc-faq .wp-block-details summary {
	cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0;
	font: 850 1.12rem/1.2 var(--ecc-display); font-stretch: 115%; text-transform: uppercase;
}
.ecc-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.ecc-faq .wp-block-details summary::after { content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center; background: var(--ecc-blue); color: #fff; font-family: var(--wp--preset--font-family--body); }
.ecc-faq .wp-block-details[open] summary::after { content: "–"; }
.ecc-faq .wp-block-details > p { color: var(--ecc-soft); padding-bottom: 20px; margin: 0; max-width: 70ch; }

/* blauwe afsluiter */
.ecc-cta { background: linear-gradient(120deg, #1F5FD6, var(--ecc-blue) 60%, #5A9BFF); color: #fff; }
.ecc-cta .ecc-tag { color: #fff; }
.ecc-cta h2 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); }
.ecc-cta .wp-block-column > * { margin-block: 0; }
.ecc-cta .wp-block-column > * + * { margin-top: 14px; }
.ecc-cta-phone { font: 850 clamp(1.5rem, 3.2vw, 2.2rem)/1 var(--ecc-display); font-stretch: 118%; }
.ecc-cta .wp-block-button:not(.is-style-outline) > .wp-block-button__link { background: #fff; color: #0A0B0E; border-color: #fff; }
.ecc-cta .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; border-color: #fff; }
.ecc-cta .wp-element-button:hover { box-shadow: 4px 4px 0 #0A0B0E; }

/* ---------- header ---------- */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } }
.ecc-top { background: rgba(10,11,14,.97); border-bottom: 1px solid var(--ecc-rule); }
/* Geen backdrop-filter op de kopbalk: die sloot het open menu op in de balk. */
header .ecc-top, header .ecc-top-inner { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; filter: none !important; }
html.has-modal-open .wp-site-blocks > header.wp-block-template-part { z-index: 100000; }
.ecc-top-inner { min-height: 72px; gap: 16px; }
.ecc-brand { gap: 10px !important; }
.ecc-brand a { text-decoration: none; }
.ecc-brand .wp-block-site-logo img { width: 56px !important; height: 56px !important; object-fit: contain; border-radius: 50%; }
.ecc-foot-brand { gap: 14px !important; align-items: center; margin-bottom: 14px; }
.ecc-foot-brand .wp-block-site-logo img { width: 64px !important; height: 64px !important; object-fit: contain; border-radius: 50%; }
.ecc-logo-fallback svg { display: block; }
.ecc-brand-text { gap: 3px !important; }
.ecc-brand .wp-block-site-title { margin: 0; font: italic 850 1.15rem/1 var(--ecc-display); font-stretch: 125%; text-transform: uppercase; }
.ecc-brand .wp-block-site-title a { color: var(--ecc-ink); text-decoration: none; }
.ecc-brand-sub { margin: 0; font-family: var(--ecc-mono); font-size: .64rem; letter-spacing: .18em; color: var(--ecc-blue); }
.ecc-top-actions { gap: 12px !important; }
.ecc-top-phone { margin: 0; font-family: var(--ecc-mono); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.ecc-top-phone span { color: var(--ecc-soft); font-weight: 500; margin-right: 4px; }
.ecc-top-cta .wp-block-button__link { padding: .7em 1.1em; }
@media (max-width: 900px) { .ecc-top-phone, .ecc-top-cta { display: none !important; } }

/* ---------- menu als schuifpaneel ----------
   Desktop: paneel schuift van rechts in beeld, pagina blijft half zichtbaar.
   Telefoon: paneel vult het hele scherm. Werkt ook met een in de editor opgeslagen header. */
header .wp-block-navigation .wp-block-navigation__responsive-container-open {
	display: inline-flex; align-items: center; gap: 10px;
	font: 700 1rem var(--wp--preset--font-family--body); background: var(--ecc-paper); color: var(--ecc-ink);
	border: 1px solid var(--ecc-rule); padding: .7em 1.1em; cursor: pointer;
}
header .wp-block-navigation .wp-block-navigation__responsive-container-open:hover { border-color: var(--ecc-blue); }
header .wp-block-navigation .wp-block-navigation__responsive-container-open svg { width: 22px; height: 22px; }

header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	left: auto !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
	width: min(420px, 100vw) !important; max-width: 100vw;
	padding: 0 !important;
	background: var(--ecc-board) !important; color: var(--ecc-ink) !important;
	border-left: 1px solid var(--ecc-rule);
	box-shadow: -24px 0 60px rgba(0, 0, 0, .55);
	animation: ecc-menu-in .28s cubic-bezier(.2, .8, .2, 1) both !important;
	overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
.admin-bar header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open { top: var(--wp-admin--admin-bar--height, 32px) !important; }
/* Inschuiven met clip-path: niets komt buiten beeld, dus telefoons zoomen niet uit. */
@keyframes ecc-menu-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes ecc-menu-content { from { opacity: 0; } to { opacity: 1; } }
header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-dialog { animation: ecc-menu-content .3s ease .08s both; }
@media (prefers-reduced-motion: reduce) { header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open { animation: none !important; } }

/* donkere laag over de rest van de pagina (klik erop = menu dicht) */
.ecc-menu-backdrop {
	position: fixed; inset: 0; z-index: 99999; background: rgba(5, 6, 9, .6);
	backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
	opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.ecc-menu-backdrop.is-on { opacity: 1; pointer-events: auto; }

header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-close,
header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-dialog { max-width: none !important; width: 100%; height: auto; margin: 0 !important; }
header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-dialog { padding: 20px 28px 40px; position: relative; }
header .wp-block-navigation .is-menu-open,
header .wp-block-navigation .is-menu-open * { box-sizing: border-box; }
header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content,
header .wp-block-navigation .is-menu-open .wp-block-navigation__container,
header .wp-block-navigation .is-menu-open .wp-block-navigation-item { max-width: 100% !important; min-width: 0; }
header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-dialog::before {
	content: "Menu"; display: block; font-family: var(--ecc-mono); font-size: .74rem; letter-spacing: .14em;
	text-transform: uppercase; color: var(--ecc-blue); font-weight: 600; padding: 14px 0 18px; border-bottom: 1px solid var(--ecc-rule);
}
header .wp-block-navigation .wp-block-navigation__responsive-container-close {
	position: absolute !important; top: 20px !important; right: 24px !important;
	width: 40px; height: 40px; display: grid; place-items: center;
	background: var(--ecc-blue) !important; color: #fff !important; padding: 0 !important; border: 0; cursor: pointer;
}
header .wp-block-navigation .wp-block-navigation__responsive-container-close svg { width: 22px; height: 22px; fill: currentColor; }
header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 8px !important; align-items: stretch !important; gap: 0 !important;
}
header .wp-block-navigation .is-menu-open .wp-block-navigation__container {
	width: 100%; max-width: none; gap: 0 !important; align-items: stretch !important; flex-direction: column;
}
header .wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%; border-bottom: 1px solid var(--ecc-rule); display: block !important;
}
header .wp-block-navigation .is-menu-open .wp-block-navigation-item__content {
	display: flex !important; align-items: center; justify-content: space-between; width: 100%;
	font: 850 1.12rem/1.2 var(--ecc-display); font-stretch: 115%; text-transform: uppercase; letter-spacing: .01em;
	color: var(--ecc-ink) !important; text-decoration: none; padding: 16px 0 !important;
}
header .wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "→"; font-family: var(--wp--preset--font-family--body); color: var(--ecc-blue); font-weight: 700; transition: transform .15s ease;
}
header .wp-block-navigation .is-menu-open .wp-block-navigation-item__content:hover { color: var(--ecc-blue-light) !important; }
header .wp-block-navigation .is-menu-open .wp-block-navigation-item__content:hover::after { transform: translateX(4px); }
header .wp-block-navigation .is-menu-open .current-menu-item > .wp-block-navigation-item__content,
header .wp-block-navigation .is-menu-open .wp-block-navigation-item__content[aria-current="page"] { color: var(--ecc-blue) !important; }

/* submenu "Wat kunnen we" netjes ingesprongen */
header .wp-block-navigation .is-menu-open .wp-block-navigation-submenu { padding: 0 !important; }
header .wp-block-navigation .is-menu-open .wp-block-navigation-submenu__toggle,
header .wp-block-navigation .is-menu-open .wp-block-navigation__submenu-icon { display: none !important; }
header .wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container {
	position: static !important; opacity: 1 !important; visibility: visible !important; height: auto !important; width: 100% !important;
	padding: 0 0 12px 14px !important; margin: -6px 0 0 !important; border: 0 !important; border-left: 2px solid var(--ecc-blue) !important;
	background: transparent !important; gap: 0 !important; display: flex !important; flex-direction: column;
}
header .wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font: 600 1rem/1.35 var(--wp--preset--font-family--body); text-transform: none; color: var(--ecc-soft) !important; padding: 8px 0 !important;
}
header .wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { content: none; }
header .wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--ecc-ink) !important; }

/* telefoon: paneel over het hele scherm */
@media (max-width: 600px) {
	header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open { width: 100vw !important; border-left: 0; box-shadow: none; }
	header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-dialog { padding: 16px 20px calc(32px + env(safe-area-inset-bottom, 0px)); }
	header .wp-block-navigation .wp-block-navigation__responsive-container-close { top: 16px !important; right: 18px !important; }
	header .wp-block-navigation .is-menu-open .wp-block-navigation-item__content { font-size: 1.2rem; padding: 17px 0 !important; }
}

/* ---------- footer ---------- */
.ecc-foot { background: var(--ecc-board); color: var(--ecc-soft); border-top: 1px solid #1E222A; font-size: .94rem; padding-block: 56px 28px; }
.ecc-foot h4 { color: var(--ecc-ink); font-size: 1rem; margin-bottom: 12px; }
.ecc-foot a { color: var(--ecc-ink); text-decoration: none; }
.ecc-foot a:hover { color: var(--ecc-blue-light); }
.ecc-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.ecc-foot .wp-block-site-title { font: italic 850 1.15rem/1 var(--ecc-display); font-stretch: 125%; text-transform: uppercase; margin: 0; }
.ecc-foot-base { border-top: 1px solid #1E222A; margin-top: 40px !important; padding-top: 20px; font-size: .82rem; }
.ecc-foot-base p { margin: 0; }

/* vaste actiebalk op mobiel */
.ecc-actionbar { display: none; }
@media (max-width: 860px) {
	.ecc-actionbar {
		display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; margin: 0 !important;
		border-top: 1px solid var(--ecc-rule); background: var(--ecc-paper); padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
	}
	.ecc-actionbar a { display: flex; align-items: center; justify-content: center; padding: 15px 12px; font-weight: 700; text-decoration: none; color: var(--ecc-ink); }
	.ecc-actionbar a:last-child { background: var(--ecc-blue); color: #fff; }
	.ecc-actionbar p { display: contents; }
	body { padding-bottom: 56px; }
}

/* ---------- blogbericht ---------- */
.ecc-article { gap: 56px !important; }
.ecc-article .wp-block-post-featured-image img { border: 1px solid var(--ecc-rule); }
.ecc-article aside, .ecc-side > * + * { margin-top: 16px; }
.ecc-side { position: sticky; top: 110px; }
@media (max-width: 781px) { .ecc-side { position: static; } }
.ecc-related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ecc-related li { margin: 0; }
.ecc-related .wp-block-post-title { margin: 0; }
.ecc-related .wp-block-post-title { font: 600 1rem/1.35 var(--wp--preset--font-family--body); text-transform: none; font-stretch: 100%; }
.ecc-prose:not(:has(> .alignfull)) > * + * { margin-top: 1.1em; }
.ecc-prose:not(:has(> .alignfull)) h2 { margin-top: 1.6em; font-size: 1.7rem; }
.ecc-prose h3 { margin-top: 1.3em; }

/* ---------- formulieren ---------- */
.ecc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.ecc-field { grid-column: 1 / -1; display: grid; gap: 6px; min-width: 0; }
.ecc-field.is-half { grid-column: span 1; }
@media (max-width: 620px) { .ecc-field.is-half { grid-column: 1 / -1; } }
.ecc-field > label, .ecc-field legend { font-weight: 700; font-size: .95rem; }
.ecc-field fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.ecc-req { color: var(--ecc-blue-light); }
.ecc-form input[type=text], .ecc-form input[type=email], .ecc-form input[type=tel], .ecc-form input[type=date], .ecc-form select, .ecc-form textarea {
	width: 100%; font: inherit; font-size: 1rem; color: var(--ecc-ink); background: var(--ecc-bg);
	border: 2px solid var(--ecc-rule); border-radius: 0; padding: .75em .9em;
}
.ecc-form input:focus, .ecc-form select:focus, .ecc-form textarea:focus { outline: 2px solid var(--ecc-blue); outline-offset: 0; border-color: var(--ecc-blue); }
.ecc-form textarea { resize: vertical; }
.ecc-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; }
.ecc-pick label { display: flex; gap: 10px; align-items: flex-start; border: 2px solid var(--ecc-rule); background: var(--ecc-bg); padding: 12px 14px; cursor: pointer; font-weight: 600; }
.ecc-pick label:has(input:checked) { border-color: var(--ecc-blue); background: rgba(45,127,249,.15); }
.ecc-pick input, .ecc-consent input { accent-color: var(--ecc-blue); margin-top: .3em; }
.ecc-consent label { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: .92rem; color: var(--ecc-soft); }
.ecc-form button.wp-element-button { cursor: pointer; justify-self: start; }
.ecc-hp { position: absolute !important; left: -9999px !important; }
.ecc-form-msg { padding: 18px; border: 2px solid; margin-bottom: 18px; }
.ecc-form-msg.is-ok { border-color: #3FC07A; background: rgba(63,192,122,.1); }
.ecc-form-msg.is-err { border-color: #FF7A66; background: rgba(255,122,102,.1); }

/* ---------- editor ---------- */
.editor-styles-wrapper .ecc-ba > figure + figure { margin-top: 8px !important; }
.editor-styles-wrapper .ecc-actionbar { display: none; }

/* ---------- WordPress.com-formulier (Jetpack) in de huisstijl ---------- */
.ecc-jpform { margin-top: 18px; }
.ecc-jpform label, .ecc-jpform legend, .ecc-jpform .grunion-field-label { color: var(--ecc-ink); font-weight: 700; font-size: .95rem; }
.ecc-jpform input[type=text], .ecc-jpform input[type=email], .ecc-jpform input[type=tel], .ecc-jpform input[type=date],
.ecc-jpform input[type=number], .ecc-jpform input[type=url], .ecc-jpform select, .ecc-jpform textarea {
	background: var(--ecc-bg) !important; color: var(--ecc-ink) !important; border: 2px solid var(--ecc-rule) !important;
	border-radius: 0 !important; padding: .75em .9em !important; font: inherit; font-size: 1rem;
}
.ecc-jpform input:focus, .ecc-jpform select:focus, .ecc-jpform textarea:focus { outline: 2px solid var(--ecc-blue) !important; border-color: var(--ecc-blue) !important; }
.ecc-jpform input[type=radio], .ecc-jpform input[type=checkbox] { accent-color: var(--ecc-blue); }
.ecc-jpform .wp-block-jetpack-dropzone, .ecc-jpform .jetpack-form-file-field__dropzone {
	border: 2px dashed var(--ecc-blue) !important; background: rgba(45,127,249,.08) !important; color: var(--ecc-soft); border-radius: 0 !important;
}
.ecc-jpform .wp-block-button__link, .ecc-jpform button[type=submit] {
	background: var(--ecc-blue) !important; color: #fff !important; border: 2px solid var(--ecc-blue) !important; border-radius: 0 !important;
	font-weight: 700; padding: .9em 1.4em; cursor: pointer;
}
.ecc-jpform .contact-form__input-error, .ecc-jpform .contact-form__error { color: #FF7A66; }

/* ---------- video's ----------
   Klein, ronde hoeken, spelen af bij muis erop (computer) of als je erlangs scrolt (telefoon). */
.wp-block-video { margin: 0; position: relative; }
.wp-block-video video { display: block; width: 100%; height: auto; background: #000; border-radius: 18px; border: 1px solid var(--ecc-rule); }
.wp-block-columns > .wp-block-column > .wp-block-video,
.ecc-videos .wp-block-video { max-width: 260px; margin-left: auto; margin-right: auto; }
.wp-block-columns > .wp-block-column > .wp-block-video video,
.ecc-videos .wp-block-video video { aspect-ratio: 9 / 16; object-fit: cover; }
.wp-block-video figcaption { color: var(--ecc-soft); font-size: .88rem; margin-top: 10px; text-align: center; }
/* afspeelknop zolang de video stilstaat */
.wp-block-video.ecc-vid { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wp-block-video.ecc-vid::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px;
	border-radius: 50%; background: rgba(45,127,249,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50% / 26px no-repeat;
	box-shadow: 0 8px 24px rgba(0,0,0,.45); pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.wp-block-video.ecc-vid:has(figcaption)::after { top: calc(50% - 18px); }
.wp-block-video.ecc-vid.is-playing::after { opacity: 0; transform: scale(.8); }
.wp-block-video.ecc-vid:hover video { border-color: var(--ecc-blue); }
@media (max-width: 781px) {
	.ecc-videos .wp-block-video, .wp-block-columns > .wp-block-column > .wp-block-video { max-width: 240px; }
}

/* ---------- telefoonnummers ---------- */
a.ecc-tel { color: inherit; text-decoration: none; white-space: nowrap; }
a.ecc-tel:hover { color: var(--ecc-blue-light); text-decoration: underline; }
.ecc-cta a.ecc-tel:hover { color: #fff; }
.ecc-top-phone { line-height: 1.25; font-size: .82rem !important; }
.ecc-top-phone { position: relative; padding-left: 38px; }
.ecc-top-phone span { position: absolute; left: 0; top: 0; }
.ecc-cta-phone { line-height: 1.15 !important; }

/* merk-knoppen naar de webshop */
.ecc-brand-links a { color: inherit; text-decoration: none; }
.ecc-brand-links li:hover { border-color: var(--ecc-blue); }
.ecc-brand-links li:hover a { color: var(--ecc-blue-light); }
/* 4 kaarten naast elkaar: op tablet 2 per rij */
@media (min-width: 782px) and (max-width: 1100px) {
	.wp-block-columns:has(> .wp-block-column:nth-child(4)) { flex-wrap: wrap !important; }
	.wp-block-columns:has(> .wp-block-column:nth-child(4)) > .wp-block-column { flex-basis: calc(50% - 1em) !important; }
}
.ecc-box:has(> .wp-block-buttons) { display: flex; flex-direction: column; }
.ecc-box > .wp-block-buttons { margin-top: auto !important; padding-top: 12px; }
.ecc-box .wp-block-button__link { white-space: nowrap; }

/* ---------- telefoonveld met landkeuze (WordPress.com-formulier) ----------
   Eén vak in de huisstijl: landkeuze links, nummer rechts. */
.wp-block-jetpack-contact-form .jetpack-field__input-phone-wrapper {
	display: flex !important; align-items: center; gap: 10px;
	background: var(--ecc-bg) !important; color: var(--ecc-ink) !important;
	border: 2px solid var(--ecc-rule) !important; border-radius: 0 !important;
	padding: .55em .9em !important; min-height: 52px; box-sizing: border-box;
	backdrop-filter: none !important; filter: none !important; position: relative;
}
.wp-block-jetpack-contact-form .jetpack-field__input-phone-wrapper:has(.jetpack-field__input-element:focus) {
	border-color: var(--ecc-blue) !important; outline: 2px solid var(--ecc-blue) !important; outline-offset: 0;
}
.wp-block-jetpack-contact-form .jetpack-field__input-phone-wrapper input.jetpack-field__input-element,
.ecc-jpform .jetpack-field__input-phone-wrapper input[type=tel] {
	flex: 1 1 auto; min-width: 0; width: auto !important;
	background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important;
	padding: 0 !important; margin: 0 !important; height: auto !important; color: var(--ecc-ink) !important; font: inherit; font-size: 1rem;
	position: static !important;
}
.wp-block-jetpack-contact-form .jetpack-field__input-prefix:not([hidden]) {
	flex: 0 0 auto; background: transparent !important; border-right: 1px solid var(--ecc-rule); padding-right: 10px; position: relative;
}
.wp-block-jetpack-contact-form .jetpack-combobox-trigger {
	display: inline-flex; align-items: center; gap: 6px; background: transparent !important; color: var(--ecc-ink) !important;
	border: 0 !important; padding: 0 !important; font: 600 1rem var(--wp--preset--font-family--body); cursor: pointer; box-shadow: none !important;
}
.wp-block-jetpack-contact-form .jetpack-combobox-trigger:hover { color: var(--ecc-blue-light) !important; }
.wp-block-jetpack-contact-form .jetpack-combobox-dropdown {
	position: absolute; left: -12px; top: calc(100% + 12px); z-index: 50; width: min(320px, 80vw);
	background: var(--ecc-paper) !important; color: var(--ecc-ink) !important; border: 2px solid var(--ecc-rule) !important;
	border-radius: 0 !important; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); padding: 8px !important;
}
.wp-block-jetpack-contact-form .jetpack-combobox-dropdown input.jetpack-combobox-search {
	width: 100% !important; background: var(--ecc-bg) !important; color: var(--ecc-ink) !important;
	border: 2px solid var(--ecc-rule) !important; padding: .6em .8em !important; margin-bottom: 6px;
}
.wp-block-jetpack-contact-form .jetpack-combobox-options { max-height: 260px; overflow-y: auto; }
.wp-block-jetpack-contact-form .jetpack-combobox-option { display: flex; gap: 10px; align-items: center; padding: 8px 10px; cursor: pointer; color: var(--ecc-ink); }
.wp-block-jetpack-contact-form .jetpack-combobox-option:hover,
.wp-block-jetpack-contact-form .jetpack-combobox-option-selected { background: rgba(45, 127, 249, .18); }
.wp-block-jetpack-contact-form .jetpack-combobox-option-description { color: var(--ecc-soft); font-size: .9rem; }

/* ---------- sectiekop met lange tekst ---------- */
.ecc-sechead.is-long { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: 14px clamp(28px, 5vw, 64px); }
.ecc-sechead.is-long > .ecc-tag { grid-column: 1; grid-row: 1; }
.ecc-sechead.is-long > h2, .ecc-sechead.is-long > .wp-block-heading { grid-column: 1; grid-row: 2; align-self: start; }
.ecc-sechead.is-long > h2::after, .ecc-sechead.is-long > .wp-block-heading::after {
	content: ""; display: block; width: 64px; height: 4px; margin-top: 22px; background: var(--ecc-blue);
}
.ecc-sechead.is-long > p:not(.ecc-tag) {
	grid-column: 2; grid-row: 1 / span 3; max-width: none;
	background: var(--ecc-paper); border: 1px solid var(--ecc-rule); border-left: 4px solid var(--ecc-blue);
	padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.8vw, 34px);
	color: #C9CED6; font-size: 1.08rem; line-height: 1.75;
}
.ecc-sechead.is-long > p:not(.ecc-tag) + p:not(.ecc-tag) { grid-row: auto; }
@media (max-width: 820px) {
	.ecc-sechead.is-long { grid-template-columns: 1fr; }
	.ecc-sechead.is-long > * { grid-column: 1 !important; grid-row: auto !important; }
}

/* ---------- blogfotootjes in overzichten ---------- */
.ecc-thumb { position: relative; overflow: hidden; }
.ecc-thumb > a:not(.ecc-thumb-edit) { display: block; }

/* geen foto: donkere tegel met het logo in het midden */
.ecc-thumb-empty > a.ecc-thumb-link {
	display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; box-sizing: border-box;
	background: radial-gradient(ellipse at 70% 20%, rgba(45,127,249,.22), transparent 65%), var(--ecc-paper);
	border: 1px solid var(--ecc-rule);
}
.ecc-thumb-empty > a.ecc-thumb-link img {
	width: 34% !important; max-width: 96px; height: auto !important; aspect-ratio: 1 / 1 !important;
	object-fit: contain !important; border: 0 !important; opacity: .9;
}



/* De bovenste foto van een blogartikel is de blogfoto voor de overzichten
   (homepage en blogpagina). In het geopende artikel wordt hij niet nog eens getoond. */
.single-post .wp-block-post-content > .wp-block-image:first-child { display: none !important; }
.single-post .wp-block-post-content > .wp-block-image:first-child + * { margin-top: 0 !important; }

/* ---------- Google-reviews ---------- */
.ecc-greview {
	background: var(--ecc-paper); border: 2px solid var(--ecc-rule); border-top: 4px solid var(--ecc-blue);
	padding: clamp(22px, 3vw, 34px); display: grid; gap: 12px; align-content: start; max-width: 720px;
}
.ecc-greview > * { margin: 0 !important; }
.ecc-greview-head { display: flex; align-items: center; gap: 10px; font-family: var(--ecc-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ecc-soft); }
.ecc-greview-head .ecc-g { width: 22px; height: 22px; flex: none; }
.ecc-greview-stars { color: #FBBC04; font-size: 1.5rem; letter-spacing: 3px; line-height: 1; }
.ecc-greview-title { font: 850 clamp(1.3rem, 2.4vw, 1.7rem)/1.1 var(--ecc-display); font-stretch: 118%; text-transform: uppercase; color: var(--ecc-ink); }
.ecc-greview-text { color: var(--ecc-soft); max-width: 52ch; }
.ecc-greview-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px !important; }
.ecc-greview-btn {
	display: inline-block; background: var(--ecc-blue); color: #fff !important; text-decoration: none !important;
	font-weight: 700; padding: .9em 1.3em; border: 2px solid var(--ecc-blue); transition: transform .12s ease, box-shadow .12s ease;
}
.ecc-greview-btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ecc-ink); }
.ecc-greview-link { color: var(--ecc-blue-light); font-weight: 600; }
.ecc-greview.is-compact { max-width: none; }
.wp-block-column > .ecc-greview { max-width: none; height: 100%; }
.ecc-google-widget { width: 100%; }
.ecc-box > .ecc-greview, .ecc-box .ecc-form-wrap .ecc-greview { border: 0; padding: 0; background: none; }
.ecc-greview.is-teaser { max-width: none; grid-template-columns: 1fr; }

/* ---------- "Meer projecten": foto's en video's in één strak raster ----------
   Elke tegel is vierkant, ook video's. Telefoon: 2 tegels naast elkaar. */
.ecc-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .ecc-grid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ecc-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.ecc-grid4 > .wp-block-image,
.ecc-grid4 > .wp-block-video { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; border: 1px solid var(--ecc-rule); background: #000; max-width: none !important; }
.ecc-grid4 > .wp-block-image img,
.ecc-grid4 > .wp-block-video video {
	width: 100% !important; height: 100% !important; aspect-ratio: auto !important;
	object-fit: cover; display: block; border: 0 !important; border-radius: 0 !important;
}
.ecc-grid4 > .wp-block-image figcaption,
.ecc-grid4 > .wp-block-video figcaption {
	position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 18px 10px 8px;
	background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-size: .82rem; text-align: left;
}
/* afspeelknop iets kleiner in de tegels */
.ecc-grid4 > .wp-block-video.ecc-vid::after { width: 46px; height: 46px; margin: -23px 0 0 -23px; background-size: 20px; }
@media (max-width: 640px) { .ecc-grid4 > .wp-block-video.ecc-vid::after { width: 38px; height: 38px; margin: -19px 0 0 -19px; background-size: 16px; } }
.ecc-grid4 > .wp-block-video.ecc-vid:has(figcaption)::after { top: 50%; }

/* ---------- menu: hoofdpunten eerst (1.2.8) ----------
   Afspraak maken als blauwe knop, daarna Voor & na, Reviews, Informatie vragen.
   De rest staat kleiner onder het kopje "Meer". */
header .wp-block-navigation .is-menu-open .wp-block-navigation__container > .ecc-nav-cta {
	border-bottom: 0 !important; margin: 14px 0 10px;
}
header .wp-block-navigation .is-menu-open .wp-block-navigation__container > .ecc-nav-cta > .wp-block-navigation-item__content {
	background: var(--ecc-blue); color: #fff !important; padding: 18px 20px !important; font-size: 1.2rem;
	box-shadow: 0 10px 30px rgba(45, 127, 249, .35);
}
header .wp-block-navigation .is-menu-open .wp-block-navigation__container > .ecc-nav-cta > .wp-block-navigation-item__content::after { color: #fff; }
header .wp-block-navigation .is-menu-open .wp-block-navigation__container > .ecc-nav-cta > .wp-block-navigation-item__content:hover { background: var(--ecc-blue-light, #5B9BFF); color: #fff !important; }
header .wp-block-navigation .is-menu-open .wp-block-navigation__container > .ecc-nav-prio:not(.ecc-nav-cta) > .wp-block-navigation-item__content { font-size: 1.22rem; padding: 18px 0 !important; }
/* kopje "Meer" boven de overige pagina's */
header .wp-block-navigation .is-menu-open .wp-block-navigation__container > .ecc-nav-prio + .wp-block-navigation-item:not(.ecc-nav-prio) {
	margin-top: 26px; border-top: 0;
}
header .wp-block-navigation .is-menu-open .wp-block-navigation__container > .ecc-nav-prio + .wp-block-navigation-item:not(.ecc-nav-prio)::before {
	content: "Meer"; display: block; font-family: var(--ecc-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ecc-soft); font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--ecc-rule);
}
header .wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.ecc-nav-prio) > .wp-block-navigation-item__content {
	font-size: .98rem; padding: 12px 0 !important; color: #D6DAE1 !important;
}
header .wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.ecc-nav-prio) > .wp-block-navigation-item__content:hover { color: var(--ecc-blue-light, #5B9BFF) !important; }
header .wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.ecc-nav-prio) > .wp-block-navigation-item__content[aria-current="page"] { color: var(--ecc-blue) !important; }

/* Afspraak-knop in de kopbalk valt meer op */
.ecc-top-cta .wp-block-button__link {
	padding: .8em 1.3em; box-shadow: 0 0 0 0 rgba(45, 127, 249, .55); animation: ecc-cta-pulse 2.8s ease-out 1.2s 3;
}
@keyframes ecc-cta-pulse { 0% { box-shadow: 0 0 0 0 rgba(45, 127, 249, .55); } 70% { box-shadow: 0 0 0 12px rgba(45, 127, 249, 0); } 100% { box-shadow: 0 0 0 0 rgba(45, 127, 249, 0); } }
@media (prefers-reduced-motion: reduce) { .ecc-top-cta .wp-block-button__link { animation: none; } }

/* ---------- WhatsApp + afspraakbalk (1.2.8) ---------- */
.ecc-actionbar { display: none !important; } /* vervangen door de balk hieronder */
.ecc-wa { --wa: #25D366; --wa-dark: #128C4A; }
.ecc-wa-bar { position: fixed; right: 22px; bottom: 22px; z-index: 46; display: flex; gap: 10px; align-items: center; }
.ecc-wa-book { display: none; }
.ecc-wa-btn {
	display: inline-flex; align-items: center; gap: 9px; border: 0; cursor: pointer;
	background: var(--wa); color: #06210F; font: 700 1rem var(--wp--preset--font-family--body);
	padding: 14px 20px 14px 16px; border-radius: 999px; box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
	transition: transform .15s ease, background .15s ease;
}
.ecc-wa-btn:hover { transform: translateY(-2px); background: #3BE07A; }
.ecc-wa-btn:focus-visible, .ecc-wa-nr:focus-visible, .ecc-wa-book:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ecc-wa-card {
	position: fixed; right: 22px; bottom: 88px; z-index: 47; width: min(320px, calc(100vw - 32px));
	background: var(--ecc-paper); border: 1px solid var(--ecc-rule); border-radius: 14px; padding: 18px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .6); animation: ecc-wa-in .18s ease both;
}
.ecc-wa-card[hidden] { display: none; }
@keyframes ecc-wa-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ecc-wa-title { margin: 0 0 4px; font: italic 850 1.05rem/1.1 var(--ecc-display); font-stretch: 120%; text-transform: uppercase; color: var(--ecc-ink); }
.ecc-wa-sub { margin: 0 0 14px; font-size: .88rem; color: var(--ecc-soft); }
.ecc-wa-nr {
	display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-top: 8px; border-radius: 10px;
	background: var(--wa); color: #06210F !important; font-weight: 700; text-decoration: none; font-family: var(--ecc-mono);
}
.ecc-wa-nr:hover { background: #3BE07A; }
html.has-modal-open .ecc-wa { display: none; }

@media (max-width: 860px) {
	body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
	.ecc-wa-bar {
		left: 0; right: 0; bottom: 0; gap: 0; display: grid; grid-template-columns: 1fr auto;
		background: var(--ecc-paper); border-top: 1px solid var(--ecc-rule); padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.ecc-wa-book {
		display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 60px;
		background: var(--ecc-blue); color: #fff !important; font-weight: 800; font-size: 1.05rem; text-decoration: none;
	}
	.ecc-wa-btn { border-radius: 0; box-shadow: none; min-height: 60px; padding: 0 20px; }
	.ecc-wa-btn:hover { transform: none; }
	.ecc-wa-card { right: 12px; left: auto; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 360px) { .ecc-wa-btn span { display: none; } }

/* ---------- "Meer projecten": videoraster (1.2.9) ----------
   Staande tegels (9:16), 5 naast elkaar, op telefoon 2. Klik = groot afspelen. */
.ecc-vgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; max-width: 1080px; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 900px) { .ecc-vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ecc-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.ecc-vgrid > * { margin: 0 !important; }
.ecc-vgrid > .wp-block-image { display: none !important; } /* eigen foto's staan nog in de editor, niet op de site */
.ecc-vgrid > .wp-block-video {
	position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 14px; border: 1px solid var(--ecc-rule);
	background: #000; max-width: none !important; cursor: zoom-in; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ecc-vgrid > .wp-block-video:hover { transform: translateY(-3px); border-color: var(--ecc-blue); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
.ecc-vgrid > .wp-block-video video {
	width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; display: block;
	border: 0 !important; border-radius: 0 !important; pointer-events: none;
}
.ecc-vgrid > .wp-block-video figcaption {
	position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 22px 10px 9px;
	background: linear-gradient(transparent, rgba(0, 0, 0, .8)); color: #fff; font-size: .8rem; text-align: left;
}
.ecc-vgrid > .wp-block-video.ecc-vid::after {
	width: 44px; height: 44px; margin: -22px 0 0 -22px; background-size: 19px; top: 50% !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
.ecc-vgrid > .wp-block-video.ecc-vid.is-playing::after { opacity: 0; }
@media (max-width: 600px) { .ecc-vgrid > .wp-block-video.ecc-vid::after { width: 38px; height: 38px; margin: -19px 0 0 -19px; background-size: 16px; } }

/* groot afspelen */
.ecc-lb {
	position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; padding: 56px 64px;
	background: rgba(3, 4, 6, .92); animation: ecc-lb-in .2s ease both;
}
.ecc-lb[hidden] { display: none; }
@keyframes ecc-lb-in { from { opacity: 0; } to { opacity: 1; } }
.ecc-lb video {
	display: block; height: min(86vh, 900px); width: auto; max-width: 100%; aspect-ratio: 9 / 16; object-fit: contain;
	background: #000; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); animation: ecc-lb-zoom .25s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes ecc-lb-zoom { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.ecc-lb button {
	position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; font: 700 1.5rem/1 var(--wp--preset--font-family--body);
}
.ecc-lb button:hover { background: var(--ecc-blue); }
.ecc-lb button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ecc-lb-close { top: 16px; right: 16px; background: var(--ecc-blue) !important; }
.ecc-lb-prev { left: 16px; top: 50%; margin-top: -24px; }
.ecc-lb-next { right: 16px; top: 50%; margin-top: -24px; }
.ecc-lb-count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); pointer-events: none; text-align: center; color: var(--ecc-soft); font: 600 .8rem var(--ecc-mono); letter-spacing: .1em; margin: 0; }
html.ecc-lb-open { overflow: hidden; }
html.ecc-lb-open .ecc-wa { display: none; }
@media (max-width: 600px) {
	.ecc-lb { padding: 64px 12px 56px; }
	.ecc-lb video { height: auto; max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); width: 100%; }
	.ecc-lb-prev, .ecc-lb-next { top: auto; bottom: 8px; margin: 0; width: 44px; height: 44px; }
	.ecc-lb-count { bottom: 20px; }
	.ecc-lb-prev { left: 12px; } .ecc-lb-next { right: 12px; }
}

/* Sluitknop menu: altijd een kruisje, ook als WordPress er het woord "Sluiten" in zet (1.3.0) */
header .wp-block-navigation .wp-block-navigation__responsive-container-close { font-size: 0 !important; line-height: 0; overflow: hidden; }
header .wp-block-navigation .wp-block-navigation__responsive-container-close:not(:has(svg))::before {
	content: ""; width: 20px; height: 20px; display: block;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6.4 5 5 6.4 10.6 12 5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6L19 6.4 17.6 5 12 10.6z'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* Lange woorden (bijv. "Achteruitrijcamera") netjes afbreken op smalle telefoons, nooit opzij schuiven (1.3.0) */
h1, h2, h3, h4, .wp-block-heading { overflow-wrap: break-word; }
@media (max-width: 600px) {
	h1, h2, h3, h4, .wp-block-heading { -webkit-hyphens: auto; hyphens: auto; }
}
.wp-site-blocks { overflow-x: clip; }

/* ---------- 1.4.0 ---------- */

/* Telefoonnummers: altijd onderstreept, zodat je ziet dat je erop kunt tikken om te bellen */
a.ecc-tel[href], a.ecc-tel[href]:visited {
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
	text-decoration-color: currentColor; text-decoration-skip-ink: auto;
}
a.ecc-tel[href]:hover, a.ecc-tel[href]:focus-visible { text-decoration-thickness: 2px; }

/* Werkplaatskaart: nummers 01, 02, 03 … lopen altijd netjes door, ook als je een dienst weghaalt */
.ecc-mb { counter-reset: ecc-mb; }
.ecc-mb > .ecc-mb-row { counter-increment: ecc-mb; }
.ecc-mb-row > .ecc-mb-n { font-size: 0 !important; line-height: 0; }
.ecc-mb-row > .ecc-mb-n::before { content: counter(ecc-mb, decimal-leading-zero); font-size: .85rem; line-height: 1.5; }

/* Gratis advies: "Inbouw alleen op afspraak" duidelijk in beeld */
.ecc-appt {
	margin: 6px 0 12px !important; padding: 9px 12px;
	border-left: 3px solid var(--ecc-blue); background: rgba(45, 127, 249, .12); color: var(--ecc-ink);
}
.ecc-appt strong { font-weight: 700; }

/* Zelf installeren: knop "Kies je automerk" schuift netjes naar de merkenlijst */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
#merken { scroll-margin-top: 96px; }