/* De Loods: opmaak van het hele thema. Tokens bovenaan; geen frameworks. Volgorde: basis, header, blokken, producten, offerte, footer. */

@font-face { font-family: "Chaney"; src: url("../fonts/chaney.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Chaney Extended"; src: url("../fonts/chaney-extended.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Actay"; src: url("../fonts/actay-wide-700.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Proxima Nova"; src: url("../fonts/proxima-nova-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Proxima Nova"; src: url("../fonts/proxima-nova-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
	--donker: #123237;
	--donker-2: #0d272b;
	--donker-3: #1b4148;
	--oranje: #e73e11;
	--oranje-hover: #b42f0c;
	--mist: #b7c9c9;
	--wit: #fff;
	--tekst: #fff;
	--tekst-zacht: #c9d6d6;
	--rand: rgba(255, 255, 255, .14);

	--kop: "Chaney", "Arial Black", sans-serif;
	--tekst-font: "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
	--actay: "Actay", "Proxima Nova", Arial, sans-serif;

	--breed: 1140px;
	--smal: 760px;
	--rand-x: clamp(16px, 4vw, 40px);
	--sectie: clamp(48px, 7vw, 96px);
	--radius: 2px;
	--kop-hoogte: 96px;
	--schaduw: 0 6px 24px rgba(0, 0, 0, .18);
}

/* Basis */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kop-hoogte) + 16px); }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--donker); color: var(--tekst); font: 400 16px/24px var(--tekst-font); -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; }
a:hover { color: var(--oranje); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--kop); font-weight: 400; line-height: 1; text-transform: uppercase; margin: 0 0 .5em; letter-spacing: normal; overflow-wrap: break-word; hyphens: manual; }
h1 { font-size: clamp(30px, 4.2vw, 50px); }
h2 { font-size: clamp(24px, 3vw, 36px); }
h3 { font-size: clamp(18px, 2vw, 24px); }
h4 { font-size: 18px; }
ul, ol { padding-left: 1.2em; }
li { margin-bottom: .3em; }
hr { border: 0; border-top: 1px solid var(--rand); margin: var(--sectie) 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--rand); vertical-align: top; }
:focus-visible { outline: 3px solid var(--oranje); outline-offset: 2px; }

.container { width: 100%; max-width: calc(var(--breed) + 2 * var(--rand-x)); margin-inline: auto; padding-inline: var(--rand-x); }
.smal { max-width: calc(var(--smal) + 2 * var(--rand-x)); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skiplink { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--oranje); color: var(--wit); padding: 10px 16px; }
.skiplink:focus { top: 16px; }
.accent { color: var(--oranje); }
.eyebrow { font: 700 13px/1.2 var(--tekst-font); letter-spacing: .12em; text-transform: uppercase; color: var(--oranje); margin-bottom: .6em; }
.terug a, .product__terug a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; }
.terug .icoon, .product__terug .icoon { width: 18px; height: 18px; }
.terug { margin: 24px 0; }
.icoon { width: 22px; height: 22px; flex: none; }

/* Knoppen: één stijl, oranje; hover = donkerder oranje, geen schaduw */
.knop, .wp-block-button__link, button.button, a.button, .button, input[type="submit"], .frm_button_submit, #place_order {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 12px 24px; border: 0; border-radius: var(--radius);
	background: var(--oranje); color: var(--wit) !important; text-decoration: none;
	font: 700 15px/1.2 var(--tekst-font); cursor: pointer; transition: background-color .15s;
	white-space: nowrap;
}
.knop:hover, .wp-block-button__link:hover, .button:hover, input[type="submit"]:hover, .frm_button_submit:hover, #place_order:hover { background: var(--oranje-hover); color: var(--wit); }
.knop--klein { min-height: 40px; padding: 8px 16px; font-size: 15px; line-height: 15px; }
.knop--blok { display: flex; width: 100%; }
.knop--licht, .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--wit) !important; box-shadow: inset 0 0 0 2px var(--wit); }
.knop--licht:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wit); color: var(--donker) !important; }
.knop--donker { background: var(--donker); }
.knop--donker:hover { background: var(--donker-2); }
.knop .icoon { width: 18px; height: 18px; }

/* Velden: 16px+ zodat iOS niet inzoomt */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="search"], input[type="url"], select, textarea {
	width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #c7d2d2; border-radius: var(--radius);
	background: var(--wit); color: var(--donker); font: 400 16px/1.4 var(--tekst-font);
}
textarea { min-height: 120px; resize: vertical; }
label { display: block; font-weight: 700; margin-bottom: 6px; }

.zoekveld { position: relative; display: flex; }
.zoekveld input { padding-right: 48px; }
.zoekveld button { position: absolute; right: 0; top: 0; height: 100%; width: 48px; border: 0; background: transparent; color: var(--donker); cursor: pointer; display: grid; place-items: center; }
.zoekveld button:hover { color: var(--oranje); }

/* Header: gelijk aan de oude site (Elementor-header 25345). Transparant over de eerste sectie, scrolt mee weg. */
.kop { position: absolute; top: 0; left: 0; right: 0; z-index: 50; background: transparent; }
.kop__balk { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--kop-hoogte); }
.kop__logo { flex: none; display: block; width: 205px; }
.kop__logo svg { width: 100%; height: auto; }
.kop__rechts { display: flex; align-items: center; gap: 46px; }
.kop__lijst { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; }
.kop__lijst li { margin: 0; }
.kop__lijst a { display: block; padding: 13px 0; font: 700 16px/20px var(--tekst-font); color: var(--wit); text-decoration: none; white-space: nowrap; }
.kop__lijst a:hover, .kop__lijst .current-menu-item > a, .kop__lijst .current-menu-ancestor > a { color: var(--oranje); }
.kop__zoek { width: 200px; }
.kop__zoek input { min-height: 42px; height: 42px; padding: 0 14px; border: 0; border-radius: 0; background: var(--wit); color: var(--donker); font: 400 15px/1 var(--tekst-font); }
.kop__offerte { position: relative; display: grid; place-items: center; width: 24px; height: 28px; color: var(--wit); }
.kop__offerte:hover { color: var(--oranje); }
.kop__offerte .icoon { width: 24px; height: 24px; }
.kop__offerte .teller { position: absolute; top: -11px; right: -11px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; font: 400 14px/17px var(--tekst-font); }
.kop__menuknop { display: grid; place-items: center; width: 30px; height: 32px; padding: 0; border: 0; background: none; color: var(--oranje); cursor: pointer; }
.kop__menuknop .icoon { width: 30px; height: 30px; stroke-width: 2.4; }
.kop__menuknop:hover { color: var(--wit); }
.teller { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--oranje); color: var(--wit); font: 700 12px/1 var(--tekst-font); }
.teller[hidden] { display: none; }
.knop .teller { background: var(--wit); color: var(--oranje); }
body:not(.heeft-hero) .inhoud { padding-top: var(--kop-hoogte); }

.menupaneel { position: fixed; inset: 0 0 0 auto; z-index: 60; width: min(420px, 100%); background: var(--donker-2); overflow-y: auto; box-shadow: var(--schaduw); }
.menupaneel__inhoud { padding-block: 16px 40px; display: flex; flex-direction: column; gap: 24px; }
.menupaneel__sluit { align-self: flex-end; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; border: 0; background: none; color: var(--wit); cursor: pointer; }
.menupaneel__sluit .icoon { width: 28px; height: 28px; }
.menupaneel__sluit:hover { color: var(--oranje); }
.menupaneel__lijst { list-style: none; margin: 0; padding: 0; }
.menupaneel__lijst li { margin: 0; border-bottom: 1px solid var(--rand); }
.menupaneel__lijst a { display: block; padding: 14px 0; font: 400 20px/1.2 var(--kop); text-transform: uppercase; text-decoration: none; }
.menupaneel__lijst .sub-menu { list-style: none; padding: 0 0 12px 16px; margin: 0; }
.menupaneel__lijst .sub-menu li { border: 0; }
.menupaneel__lijst .sub-menu a { font: 700 16px/1.3 var(--tekst-font); text-transform: none; padding: 8px 0; }
.menupaneel__contact { display: grid; gap: 12px; }
.menupaneel__mail { text-align: center; color: var(--tekst-zacht); }
body.menu-open { overflow: hidden; }

/* Inhoud en blokken */
.inhoud { min-height: 50vh; }
.paginakop { padding-top: clamp(32px, 6vw, 72px); }
.blokken > * { max-width: calc(var(--breed) + 2 * var(--rand-x)); margin-inline: auto; padding-inline: var(--rand-x); }
.blokken > .wp-block-paragraph, .blokken > p, .blokken > ul, .blokken > ol, .blokken > .wp-block-heading, .blokken > h2, .blokken > h3, .blokken > .wp-block-list, .blokken > .wp-block-quote, .blokken > .wp-block-table { max-width: calc(var(--smal) + 2 * var(--rand-x)); }
.blokken > .wp-block-heading:first-child, .blokken > h2:first-child { margin-top: var(--sectie); }
.blokken > * + .wp-block-heading, .blokken > * + h2 { margin-top: var(--sectie); }
.blokken > :last-child { margin-bottom: var(--sectie); }
.blokken > .hero, .blokken > .alignfull, .blokken > .wp-block-cover.alignfull, .blokken > .wp-block-group.alignfull { max-width: none; padding-inline: 0; }
.blokken > .hero:last-child { margin-bottom: 0; }
.has-text-align-center { text-align: center; }
.blokken > .has-text-align-center { margin-inline: auto; }
.tekst > * { max-width: var(--smal); }
.tekst h2 { margin-top: 1.5em; }

.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 24px; }
.wp-block-buttons.is-content-justification-center { justify-content: center; }
.wp-block-image { margin: 0 0 24px; }
.wp-block-image img { width: 100%; }
.wp-block-image figcaption, .wp-element-caption { font-size: 14px; color: var(--tekst-zacht); margin-top: 8px; }
.wp-block-columns { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); align-items: flex-start; margin-block: var(--sectie); }
.wp-block-columns.are-vertically-aligned-center, .wp-block-columns .is-vertically-aligned-center { align-items: center; align-self: center; }
.wp-block-column { flex: 1 1 0; min-width: 0; }
.wp-block-column > :last-child { margin-bottom: 0; }
@media (max-width: 781px) { .wp-block-columns { flex-direction: column; } .wp-block-column { flex-basis: 100% !important; width: 100%; } }
.wp-block-media-text { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-block: var(--sectie); }
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 2; }
.wp-block-media-text__media img, .wp-block-media-text__media video { width: 100%; height: auto; }
.wp-block-media-text__content > :last-child { margin-bottom: 0; }
@media (max-width: 781px) { .wp-block-media-text { grid-template-columns: 1fr; } .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 0; } }
.wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-block: var(--sectie); }
.wp-block-gallery .wp-block-image { margin: 0; }
.wp-block-gallery img { aspect-ratio: 4 / 3; object-fit: cover; }
.wp-block-video video, .wp-block-embed iframe { width: 100%; }
.wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
.wp-block-embed__wrapper iframe { position: absolute; inset: 0; height: 100%; }
.wp-block-cover { position: relative; display: flex; align-items: center; min-height: 420px; padding: var(--sectie) var(--rand-x); overflow: hidden; margin-block: var(--sectie); }
.wp-block-cover__image-background, .wp-block-cover__video-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wp-block-cover__background { position: absolute; inset: 0; background: var(--donker); opacity: .6; }
.wp-block-cover__inner-container { position: relative; width: 100%; max-width: var(--breed); margin-inline: auto; }
.wp-block-group.has-background { padding: var(--sectie) var(--rand-x); }
.has-oranje-background-color { background-color: var(--oranje); }
.has-donker-background-color { background-color: var(--donker-2); }
.has-mist-background-color { background-color: var(--mist); color: var(--donker); }
.has-wit-background-color { background-color: var(--wit); color: var(--donker); }
.has-oranje-color { color: var(--oranje); }
.has-mist-color { color: var(--mist); }
.has-klein-font-size { font-size: 14px; }
.has-groot-font-size { font-size: 21px; line-height: 1.5; }
/* Kopgroottes zoals op de oude site (36 standaard, 40, 44, 50). */
.has-kop-m-font-size { font-size: clamp(26px, 3.4vw, 40px) !important; }
.has-kop-l-font-size { font-size: clamp(28px, 3.7vw, 44px) !important; line-height: 50px; }
.has-kop-xl-font-size { font-size: clamp(30px, 4.2vw, 50px) !important; }
.has-grijs-color { color: #7a7a7a; }
.wp-block-quote { border-left: 4px solid var(--oranje); padding-left: 20px; margin-inline: 0; font-size: 21px; }
.wp-block-separator { border: 0; border-top: 1px solid var(--rand); }
.blok-leeg { padding: 24px; border: 1px dashed var(--rand); }

/* Hero */
.hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(280px, 22vw, 421px); overflow: hidden; background: var(--donker-2); isolation: isolate; }
.hero__foto { position: absolute; inset: 0; z-index: -2; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Paginahero zoals de oude site (Elementor da2fe38): 500px met 89px onder de header, laag #123237 op 80% met chevronpatroon linksonder,
   titel 50px op 236px, donker blok rechtsonder (helft van de breedte). */
.hero--pagina { align-items: flex-start; min-height: 411px; padding-top: 236px; }
.hero--pagina .hero__inhoud { padding-block: 0 40px; }
.hero--pagina .hero__foto { top: -89px; }
.hero--pagina .hero__foto::after { content: ""; position: absolute; inset: 0; background: #123237 url("../img/patroon-hero.png") no-repeat 0 100% / 12% auto; opacity: .8; }
.hero--pagina::after { content: ""; position: absolute; right: 0; bottom: 0; z-index: -1; width: 50%; height: 132px; background: var(--donker); }
@media (max-width: 767px) { .hero--pagina { min-height: 260px; padding-top: 150px; } .hero--pagina::after { height: 60px; } }
.hero--hoog { min-height: 466px; padding-top: 332px; overflow: visible; }
.hero--hoog .hero__foto { overflow: hidden; }
.hero--pagina.hero--hoog .hero__zijtekst { top: 212px; right: 50px; z-index: 2; }
.hero--pagina .hero__zijtekst { top: 300px; }
@media (max-width: 767px) { .hero--hoog { min-height: 361px; padding-top: 200px; } }
.hero__inhoud { padding-block: clamp(32px, 6vw, 72px); }
.hero__titel { font-size: clamp(32px, 6vw, 72px); max-width: 15ch; margin: 0; }
.hero--pagina .hero__titel { font-size: clamp(32px, 4.2vw, 50px); line-height: 1; max-width: none; }
.hero__regel { margin: 20px 0 0; font-weight: 700; font-size: clamp(16px, 1.6vw, 20px); color: var(--wit); }
.hero__inhoud .knop { margin-top: 24px; }
.hero__logo img { max-height: 80px; width: auto; margin-bottom: 16px; }

/* Hero homepage: gelijk aan de oude site (Elementor-container 9ed7d3b). Volle hoogte, chevronpatroon links, verticale outline-tekst rechts. */
.hero--groot { align-items: flex-start; min-height: 1062px; padding: 273px 0 200px; }  /* 1141px op de oude site, waarvan 79px boven de pagina */
.hero--groot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/patroon.svg") no-repeat -26.6vw 317px / 37.8vw auto; opacity: .8; pointer-events: none; }
.hero--groot .hero__inhoud { padding-block: 0; }
.hero--groot .hero__foto { top: -115px; }  /* oude site: de hero begint 79px boven de pagina, de foto valt dus hoger */
.hero--groot .hero__titel { max-width: none; font: 400 60px/72px var(--kop); letter-spacing: normal; color: var(--wit); }
.hero--groot .hero__vast { display: inline-block; max-width: 12.5em; }
.hero__wissel { display: block; color: var(--wit); white-space: nowrap; transition: opacity .3s, transform .3s; }
.hero__wissel.is-weg { opacity: 0; transform: translateY(.2em); }
.hero--groot .hero__regel { margin-top: 26px; font: 700 20px/30px var(--actay); }
.hero__zijtekst { position: absolute; right: 46px; top: 138px; width: 100px; height: 473px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.hero__zijtekst { font: 400 50px/50px var(--kop); text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: .6px var(--mist); writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; }
@media (max-width: 1366px) { .hero--groot { min-height: 734px; padding: calc(var(--kop-hoogte) + 120px) 0 160px; } }
@media (max-width: 1024px) { .hero--groot { min-height: 660px; } .hero__zijtekst { display: none; } }
@media (max-width: 767px) {
	.hero--groot { min-height: 620px; padding: 120px 0 0; }
	.hero--groot::before { display: none; }
	.hero--groot .hero__titel { font-size: 26px; line-height: 1.2; }
	.hero--groot .hero__regel { font-size: 16px; line-height: 24px; margin-top: 16px; }
}

/* Tekst met beeldvlak (blocks/tekstbeeld), zoals de rijen op de oude pagina Diensten */
.blokken > .tekstbeeld { display: flex; align-items: center; padding: 10px var(--rand-x); margin-block: 0; }
.blokken > .tekstbeeld--links { flex-direction: row-reverse; padding-block: 100px; }
.tekstbeeld__tekst { flex: 0 0 54%; padding: 10px; }
.tekstbeeld__tekst h2 { margin-bottom: 20px; }
.tekstbeeld__tekst > :last-child { margin-bottom: 0; }
.tekstbeeld__beeld { position: relative; flex: 0 0 calc(46% - 26px); min-height: 370px; margin: 0 20px 0 0; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.tekstbeeld--links .tekstbeeld__beeld { margin: 0 0 0 20px; }
.tekstbeeld__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.tekstbeeld__beeld.is-donker::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--donker); opacity: .75; }
.tekstbeeld__icoon { width: 115px; height: auto; }
@media (max-width: 767px) {
	.blokken > .tekstbeeld, .blokken > .tekstbeeld--links { flex-direction: column; align-items: stretch; padding: 40px var(--rand-x); }
	.tekstbeeld__beeld, .tekstbeeld--links .tekstbeeld__beeld { min-height: 230px; margin: 30px 0 0; }
}

/* Transport/Warehousing: foto of video in het midden die half over een lichtere band valt, met daarin drie stappen */
.blokken > .wp-block-image.is-style-midden { position: relative; z-index: 1; max-width: 800px; padding: 0; margin: 60px auto -267px; }
.blokken > .wp-block-image.is-style-midden img { aspect-ratio: 800 / 534; object-fit: cover; }
.blokken > .video.is-style-midden { position: relative; z-index: 1; max-width: var(--breed); padding: 0; margin: 60px auto -321px; }
.video.is-style-midden .video__knop img { filter: grayscale(1); }
.blokken > .iconen--stappen { max-width: none; display: grid; grid-template-columns: repeat(3, 353px); justify-content: center; gap: 40px; margin: 0; padding: 350px var(--rand-x) 150px; background: #1f3e43; }
.blokken > .wp-block-image.is-style-midden + .iconen--stappen { padding-top: 350px; }
.blokken > .video.is-style-midden + .iconen--stappen { padding-top: 400px; }
.iconen--stappen .iconen__item { width: auto; gap: 20px; font: 400 16px/24px var(--actay); }
.iconen--stappen .iconen__item img { width: 133px; height: 133px; object-fit: contain; }
@media (max-width: 900px) { .blokken > .iconen--stappen { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 767px) {
	.blokken > .wp-block-image.is-style-midden, .blokken > .video.is-style-midden { margin: 40px var(--rand-x) -100px; }
	.blokken > .iconen--stappen, .blokken > .wp-block-image.is-style-midden + .iconen--stappen, .blokken > .video.is-style-midden + .iconen--stappen { padding: 140px var(--rand-x) 60px; }
	.iconen--stappen .iconen__item { font-size: 14px; line-height: 21px; }
	.iconen--stappen .iconen__item img { width: 100px; height: 100px; }
}

/* Tekst met beeldvlak: beeld groeit mee met de tekst; met beeld links 50px ruimte voor de tekst (oude site) */
.blokken > .tekstbeeld { align-items: stretch; }
.tekstbeeld__tekst { display: flex; flex-direction: column; justify-content: center; }
.tekstbeeld--links .tekstbeeld__tekst { padding-left: 50px; }

/* Informatievlak (groep met stijl "Vlak"), zoals op de oude site: lichtgrijs vlak binnen de inhoudsbreedte met strepen links */
.blokken > .is-style-vlak { position: relative; max-width: var(--breed); padding: 50px 0; margin: 50px auto 150px; background: var(--mist); color: var(--donker); text-align: center; overflow: hidden; isolation: isolate; }
/* Schuine strepen linksonder zoals live (de strepen.svg uit Elementor is op dit vlak te vaag). */
.blokken > .is-style-vlak::before { content: ""; position: absolute; left: 0; top: 60px; bottom: 0; width: 340px; z-index: -1; background: repeating-linear-gradient(112deg, rgba(255, 255, 255, .16) 0 20px, transparent 20px 54px); -webkit-mask: linear-gradient(to right, #000 55%, transparent); mask: linear-gradient(to right, #000 55%, transparent); }
.blokken > .is-style-vlak > * { max-width: 640px; margin-inline: auto; }
.blokken > .is-style-vlak > h2 { max-width: none; color: var(--wit); margin: 0 0 20px; }
@media (max-width: 767px) { .blokken > .is-style-vlak { margin: 50px var(--rand-x) 0; padding: 40px 20px; } }

/* Iconen direct onder de homepage-hero: donker paneel rechts met schuine bovenrand dat over de foto valt (oude site: 42499ab/00961b0). */
.blokken > .hero--groot + .iconen--beeld { position: relative; z-index: 2; width: 60%; max-width: none; margin: -300px 0 0 auto; padding: 150px 40px 30px 50px; background: var(--donker); clip-path: polygon(0 141px, 100% 0, 100% 100%, 0 100%); justify-content: flex-start; gap: 0; }
.blokken > .hero--groot + .iconen--beeld .iconen__item { flex: 0 0 25%; scroll-snap-align: start; }
.blokken > .hero--groot + .iconen--beeld .iconen__item img { width: 120px; height: auto; max-height: 124px; }
@media (max-width: 767px) {
	.blokken > .hero--groot + .iconen--beeld { width: 100%; margin-top: -180px; padding: 150px 0 20px; scroll-snap-type: x mandatory; }
	.blokken > .hero--groot + .iconen--beeld .iconen__item { flex-basis: 33.333%; }
	.blokken > .hero--groot + .iconen--beeld .iconen__item img { width: 100px; }
}

/* Tegels */
.tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block: var(--sectie); }
.tegel { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(260px, 30vw, 380px); padding: 32px; text-align: center; overflow: hidden; isolation: isolate; background: var(--donker-3); }
.tegel__foto { position: absolute; inset: 0; z-index: -1; }
.tegel__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tegel__foto::after { content: ""; position: absolute; inset: 0; background: rgba(18, 50, 55, .68); }
.tegel:hover .tegel__foto img { transform: scale(1.04); }
.tegel__titel { font-size: clamp(24px, 3vw, 35px); }
.tegel__titel a { text-decoration: none; }
.tegel__titel a::after { content: ""; position: absolute; inset: 0; }
.tegel__inhoud { max-width: 380px; }
.tegel__inhoud p { margin-bottom: 20px; }
.tegel:hover .knop { background: var(--oranje-hover); }
@media (max-width: 700px) { .tegels { grid-template-columns: 1fr; } .tegel { min-height: 220px; } }

/* Iconen */
.iconen { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px clamp(24px, 5vw, 72px); list-style: none; padding: 0; margin-block: var(--sectie); }
.iconen__item { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; width: 180px; text-align: center; font: 400 16px/24px var(--actay); }
.iconen__item img { width: 56px; height: 56px; object-fit: contain; }

/* Rij om te swipen (producten, projecten) */
.rij { margin-block: var(--sectie); }
.rij__kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.rij__kop h2 { margin: 0; }
.rij__pijlen { display: flex; gap: 8px; }
.rij__pijl { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--rand); border-radius: var(--radius); background: none; color: var(--wit); cursor: pointer; }
.rij__pijl:hover { border-color: var(--oranje); color: var(--oranje); }
.rij__pijl:disabled { opacity: .3; cursor: default; }
.rij__spoor { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.rij__spoor::-webkit-scrollbar { display: none; }
.rij__item { scroll-snap-align: start; min-width: 0; }
.rij__knop { margin-top: 24px; text-align: right; }
@media (max-width: 1000px) { .rij__spoor { grid-auto-columns: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 700px) { .rij__spoor { grid-auto-columns: 72%; margin-right: calc(-1 * var(--rand-x)); padding-right: var(--rand-x); } .rij__pijlen { display: none; } .rij__knop { text-align: left; } }

/* Productrij zoals op de oude homepage: 5 kaarten van 216px met 15px tussenruimte, pijlen buiten de rij */
.rij--producten { position: relative; }
.rij--producten .rij__kop h2 { max-width: 524px; }
.rij--producten .rij__spoor { grid-auto-columns: calc((100% - 4 * 15px) / 5); gap: 15px; }
.rij--producten .rij__pijlen, .rij--slider .rij__pijlen { position: absolute; left: -60px; right: -60px; top: 50%; justify-content: space-between; pointer-events: none; z-index: 2; }
.rij--producten .rij__pijl { width: 25px; height: 25px; border: 0; pointer-events: auto; }
.rij--producten .rij__pijl:disabled, .rij--slider .rij__pijl:disabled { visibility: hidden; }
.rij--producten .productkaart { height: 330px; }
@media (max-width: 1000px) { .rij--producten .rij__spoor { grid-auto-columns: calc((100% - 2 * 15px) / 3); } }
@media (max-width: 767px) {
	.rij--producten .rij__spoor { grid-auto-columns: 192px; padding-inline: calc(50% - 96px); scroll-padding-inline: calc(50% - 96px); }
	.rij--producten .rij__item { scroll-snap-align: center; }
	.rij--producten .rij__pijlen { display: flex; left: 0; right: 0; }
	.rij--producten .rij__kop h2 { max-width: 200px; margin-inline: auto; }
}

/* Projectslider zoals op de oude homepage: één slide van 1140x700 */
.rij--slider { position: relative; }
.rij--slider .rij__spoor { grid-auto-columns: 100%; gap: 0; }
.rij--slider .rij__pijlen { left: -50px; right: -50px; }
.rij--slider .rij__pijl { width: 29px; height: 45px; border: 0; border-radius: 0; background: rgba(255, 255, 255, .6); color: var(--donker); pointer-events: auto; }
.rij--slider .rij__pijl:hover { background: var(--wit); color: var(--donker); }
.projectslide { position: relative; height: 700px; overflow: hidden; isolation: isolate; }
.projectslide__foto { position: absolute; inset: 0; z-index: -2; }
.projectslide__foto img { width: 100%; height: 100%; object-fit: cover; }
.projectslide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(18, 50, 55, 0) 59%, #123237 89%); }
.projectslide__onder { position: absolute; left: 50px; right: 50px; bottom: 0; height: 208px; display: grid; grid-template-columns: 280px 500px; justify-content: space-between; }
.projectslide__naam { align-self: end; padding-bottom: 22px; }
.projectslide__logo img { width: 80px; height: 80px; object-fit: contain; margin: 0 0 15px; }
.projectslide__naam h3 { font: 600 23px/23px var(--kop); margin: 0 0 5px; }
.projectslide__naam h3 a { text-decoration: none; }
.projectslide__naam p { font-size: 12px; line-height: 18px; margin: 0; }
.projectslide__producten h4 { font: 600 20px/20px var(--tekst-font); text-transform: none; margin: 0 0 20px; }
.projectslide__producten ul { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; }
.projectslide__producten li { width: 160px; margin: 0; }
.projectslide__producten a { text-decoration: none; }
.projectslide__vak { display: grid; place-items: center; height: 110px; padding: 13px 10px; background: var(--wit); }
.projectslide__vak img { max-width: 100%; max-height: 85px; width: auto; height: auto; object-fit: contain; }
.projectslide__product { display: block; margin-top: 10px; font-size: 16px; line-height: 19px; text-align: center; }
@media (max-width: 767px) {
	.projectslide { height: 445px; }
	.projectslide__onder { left: 20px; right: 20px; height: auto; grid-template-columns: 1fr; gap: 12px; padding-bottom: 20px; }
	.projectslide__naam { padding-bottom: 0; }
	.projectslide__logo img { width: 60px; height: 60px; }
	.projectslide__producten ul { gap: 8px; }
	.projectslide__producten li { width: calc((100% - 16px) / 3); }
	.projectslide__vak { height: 78px; padding: 8px; }
	.projectslide__product { font-size: 13px; line-height: 16px; }
	.rij--slider .rij__pijlen { display: flex; left: 0; right: 0; top: 45%; }
}

/* "De loods" op de homepage: video 35%, tekst 50%, 80px tussenruimte (oude site) */
.wp-block-columns.is-style-deloods { gap: 80px; justify-content: flex-start; align-items: flex-start; }
.wp-block-columns.is-style-deloods > .wp-block-column:first-child { flex: 0 0 35%; }
.wp-block-columns.is-style-deloods > .wp-block-column:last-child { flex: 0 0 50%; }
.wp-block-columns.is-style-deloods .video.is-staand .video__knop { max-width: none; aspect-ratio: 399 / 565; }
@media (max-width: 781px) { .wp-block-columns.is-style-deloods { gap: 40px; } .wp-block-columns.is-style-deloods > .wp-block-column { flex-basis: 100% !important; } }

/* Logo's: lichtere band met een doorlopende rij logo's (oude site: image-carousel, 5 zichtbaar, 200px tussenruimte) */
.blokken > .logos { max-width: none; padding: 100px 0 52px; margin-block: 0; background: #1f3e43; }
.logos h2 { max-width: calc(var(--breed) + 2 * var(--rand-x)); margin: 0 auto 80px; padding-inline: var(--rand-x); }
.logos__rij { display: flex; width: max-content; animation: logos-rol var(--logos-duur, 44s) linear infinite; }
.logos__lijst { display: flex; gap: 200px; padding: 0 200px 0 0; margin: 0; list-style: none; }
.logos__lijst li { flex: 0 0 68px; display: grid; place-items: center; height: 72px; margin: 0; }
.logos__lijst img { max-width: 68px; max-height: 72px; width: auto; height: auto; object-fit: contain; }
.logos { overflow: hidden; }
.logos__venster { max-width: var(--breed); margin-inline: auto; overflow: hidden; }
@keyframes logos-rol { to { transform: translateX(-50%); } }
@media (max-width: 1366px) { .logos__lijst { gap: 150px; padding-right: 150px; } }
@media (max-width: 767px) { .blokken > .logos { padding: 48px 0; } .logos h2 { margin-bottom: 40px; } .logos__lijst { gap: 60px; padding-right: 60px; } }
@media (prefers-reduced-motion: reduce) { .logos__rij { animation: none; } }

/* Projecten */
.projecten { margin-block: var(--sectie); }
.projecten__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.projectkaart { position: relative; background: var(--donker-3); }
.projectkaart__foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--donker-2); }
.projectkaart__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.projectkaart:hover .projectkaart__foto img { transform: scale(1.04); }
.projectkaart__tekst { padding: 16px 20px 20px; }
.projectkaart__logo img { max-height: 40px; width: auto; margin-bottom: 10px; }
.projectkaart__naam { font-size: 23px; margin-bottom: 4px; }
.projectkaart__link { display: block; color: inherit; text-decoration: none; }
.projectkaart__link:hover .projectkaart__naam, .projectkaart__link:focus-visible .projectkaart__naam { color: var(--oranje); }
.projectkaart__link:focus-visible { outline: 3px solid var(--oranje); outline-offset: 3px; }
.projectkaart__naam { transition: color .2s; }
.projectkaart p { margin: 0; color: var(--tekst-zacht); font-size: 12px; line-height: 18px; }

/* Filter per categorie. Projecten: tekstlinks gecentreerd (oude site: PowerPack portfolio). Vacatures: wit vak "Filters". */
.catfilter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-bottom: 30px; grid-column: 1 / -1; }
.catfilter__knop { padding: 0; border: 0; background: none; color: var(--wit); font: 400 24px/1.2 var(--tekst-font); cursor: pointer; }
.catfilter__knop:hover, .catfilter__knop.is-actief { color: var(--oranje); }
.catfilter__knop span { display: none; }
[data-dl-cat][hidden] { display: none !important; }

/* Vacatures (oude site): filterkolom 30% met wit vak, lijst met witte kaarten */
.blokken > .vacatures { display: grid; grid-template-columns: 30% 1fr; gap: 20px; padding: 100px var(--rand-x); margin: 0 auto; }
.vacatures h2 { font-size: 20px; line-height: 20px; margin: 0 0 20px; }
.vacatures__filtervak { min-height: 315px; padding: 30px; background: var(--wit); color: var(--donker); }
.vacatures__filtervak h3 { font: 600 20px/24px var(--tekst-font); text-transform: none; color: #000; margin: 0 0 16px; }
.vacatures .catfilter { flex-direction: column; align-items: flex-start; gap: 0; margin: 0; }
.vacatures .catfilter__knop { padding: 10px 0; font-size: 16px; color: var(--donker); }
.vacatures .catfilter__knop.is-actief, .vacatures .catfilter__knop:hover { color: #c72a00; }
.vacatures__lijst { display: grid; gap: 20px; align-content: start; }
.vacatures__lijst h2 { margin-bottom: 0; }
.vacaturekaart { position: relative; padding: 30px; background: var(--wit); color: var(--donker); }
.vacaturekaart__titel { font: 600 18px/1.3 var(--tekst-font); text-transform: none; margin: 0 0 12px; }
.vacaturekaart__titel a { text-decoration: none; color: var(--donker); }
.vacaturekaart__titel a::after { content: ""; position: absolute; inset: 0; }
.vacaturekaart p { font-size: 15px; line-height: 22px; margin-bottom: 50px; }
.vacaturekaart__meta { display: flex; flex-wrap: wrap; gap: 12px 40px; list-style: none; padding: 0; margin: 0 0 30px; font: 700 18px/22px var(--tekst-font); }
.vacaturekaart__meta li { display: flex; gap: 8px; align-items: flex-start; margin: 0; }
@media (min-width: 768px) { .vacaturekaart__meta { flex-wrap: nowrap; } .vacaturekaart__meta li { white-space: nowrap; } }
.vacaturekaart__meta .icoon { width: 16px; height: 16px; color: var(--oranje); flex: none; margin-top: 2px; }
.vacaturekaart:hover .knop { background: var(--oranje-hover); }
@media (max-width: 767px) { .blokken > .vacatures { grid-template-columns: 1fr; padding: 50px var(--rand-x); } }

/* Projecten-raster (oude site: 3 kolommen, foto met verloop en titel in Actay 28px) */
.projecten__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.projecten--raster .projectkaart { background: none; }
.projecten--raster .projectkaart__foto { aspect-ratio: 384 / 300; }
.projecten--raster .projectkaart__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18, 50, 55, .85) 0%, rgba(18, 50, 55, 0) 25%); }
.projecten--raster .projectkaart__tekst { position: absolute; left: 20px; right: 20px; bottom: 16px; padding: 0; }
.projecten--raster .projectkaart__logo, .projecten--raster .projectkaart p { display: none; }
.projecten--raster .projectkaart__naam { font: 600 28px/1.1 var(--actay); text-transform: none; margin: 0; }
.projecten--raster .projectkaart__foto { position: relative; }
@media (max-width: 767px) { .projecten__grid { grid-template-columns: 1fr; } .projecten--raster .projectkaart__naam { font-size: 20px; } }

.vacature { padding-bottom: var(--sectie); }
.vacature .terug { margin-top: 48px; }
.terug--groot a { font: 500 20px/20px var(--tekst-font); }
.vacature h2 { font: 600 24px/24px var(--tekst-font); text-transform: none; }
.vacature h1 { font-size: 50px; line-height: 50px; }
.vacature__blok { padding: 40px; background: var(--mist); color: var(--donker); }
.vacature__blok h2 { font-size: 28px; line-height: 28px; color: var(--donker); }
.vacature__blok a:not(.knop) { color: var(--donker); }
.vacature__kenmerken { font: 600 20px/24px var(--tekst-font); }
.vacature__blok .knop { font: 500 15px/15px "Roboto", var(--tekst-font); }
@media (max-width: 767px) { .vacature h2, .vacature__blok h2 { font-size: 20px; line-height: 20px; } .vacature__kenmerken { font-size: 14px; line-height: 16.8px; } .vacature__blok { padding: 24px; } .vacature__blok .knop { font-size: 14px; line-height: 14px; } }
.vacature__rij { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-block: var(--sectie); }
.vacature__rij--om .vacature__foto { order: 2; }
.vacature__foto img { width: 100%; height: auto; }
.vacature__kenmerken { display: flex; flex-wrap: wrap; gap: 12px 32px; list-style: none; padding: 0; margin: 0 0 20px; }
.vacature__vast, .vacature__bieden { max-width: var(--smal); }
.vacature__ervaring { display: grid; grid-template-columns: 1fr; gap: 32px; margin-block: var(--sectie); }
.vacature__ervaring.heeft-extra { grid-template-columns: 7fr 3fr; }
.vacature__extra { padding: 28px; background: var(--oranje); }
.hero--vacature .hero__titel { font: 400 clamp(32px, 4.2vw, 50px)/1 var(--kop); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px var(--mist); }
@media (max-width: 800px) { .vacature__rij, .vacature__ervaring.heeft-extra { grid-template-columns: 1fr; } .vacature__rij--om .vacature__foto { order: 0; } }
.vacature__fotos, .project__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-block: 32px; }
.vacature__solliciteren { margin-top: var(--sectie); padding: clamp(24px, 4vw, 40px); background: var(--donker-3); }
.project__tekst { margin-bottom: 32px; }

/* Productoverzicht */
.overzicht { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px 40px; padding-block: clamp(24px, 4vw, 48px) var(--sectie); }
.overzicht__kop { grid-column: 1 / -1; }
.overzicht__kop h1 { font-size: clamp(28px, 4vw, 44px); margin: 0; }
.overzicht__intro { max-width: var(--smal); color: var(--tekst-zacht); margin-top: 12px; }
.filter { display: flex; flex-direction: column; gap: 20px; align-self: start; position: sticky; top: calc(var(--kop-hoogte) + 24px); }
.filter__hoofd, .filter__sub { display: flex; flex-direction: column; }
.filter__chip { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--rand); font: 400 18px/1.2 var(--kop); text-transform: uppercase; text-decoration: none; }
.filter__chip:hover, .filter__chip.is-actief { color: var(--oranje); }
.filter__sub { padding-left: 16px; border-left: 2px solid var(--oranje); margin-top: -12px; }
.filter__sub[hidden] { display: none; }
.filter__chip--sub { font: 700 15px/1.3 var(--tekst-font); text-transform: none; padding: 7px 0; border: 0; }
.filter__catalogus { margin-top: 4px; }
@media (min-width: 901px) { .filter__hoofd { display: contents; } .filter > *, .filter__hoofd > * { order: var(--o, 0); } .filter__catalogus { order: 99; } .filter { gap: 0; } .zoekveld { margin-bottom: 20px; } .filter__sub { margin: 4px 0 8px; } .filter__catalogus { margin-top: 24px; } }
.producten { min-width: 0; }
.producten__aantal { color: var(--tekst-zacht); font-size: 14px; margin-bottom: 12px; }
.producten__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.productkaart { min-width: 0; }
.producten__meer { margin-top: 32px; text-align: center; }
.producten__leeg { padding: 32px; background: var(--donker-3); }
.producten.is-laden { opacity: .5; transition: opacity .2s; pointer-events: none; }
@media (max-width: 900px) {
	.overzicht { grid-template-columns: minmax(0, 1fr); }
	.filter { min-width: 0; }
	.filter { position: static; gap: 12px; }
	.filter__hoofd, .filter__sub { flex-direction: row; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
	.filter__hoofd::-webkit-scrollbar, .filter__sub::-webkit-scrollbar { display: none; }
	.filter__sub { margin-top: 0; padding-left: 0; border: 0; }
	.filter__chip { flex: none; scroll-snap-align: start; padding: 10px 16px; border: 2px solid var(--rand); border-radius: 24px; font: 700 15px/1 var(--tekst-font); text-transform: none; white-space: nowrap; }
	.filter__chip.is-actief { border-color: var(--oranje); background: var(--oranje); color: var(--wit); }
	.filter__chip--sub { padding: 8px 14px; font-size: 14px; }
	.filter__catalogus { order: 9; }
	.producten__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* Productkaart: wit vlak, foto vierkant, titel, knop onderaan (alle kaarten even hoog) */
.productkaart { position: relative; display: flex; flex-direction: column; height: 100%; padding: 12px; background: var(--wit); color: var(--donker); }
.productkaart__foto { display: block; aspect-ratio: 1; margin-bottom: 12px; overflow: hidden; }
.productkaart__foto img { position: relative; max-height: 100%; }
.productkaart__foto img { width: 100%; height: 100% !important; object-fit: contain; }
.productkaart__leeg { display: block; width: 100%; height: 100%; background: #eef2f2; }
.productkaart__titel { flex: 1; font: 700 16px/16px var(--tekst-font); text-transform: none; letter-spacing: 0; margin: 0 0 12px; }
.productkaart__titel a { text-decoration: none; color: var(--donker); }
.productkaart__titel a:hover { color: var(--oranje); }
.productkaart__toevoegen { display: flex; gap: 8px; }
.productkaart__toevoegen .aantal { width: 64px; flex: none; min-height: 40px; padding: 6px 8px; text-align: center; }
.productkaart__toevoegen .knop { flex: 1; }
.productkaart__toevoegen.is-toegevoegd .knop { background: var(--donker); }
.productkaart .knop { font: 500 15px/15px "Roboto", var(--tekst-font); }  /* oude site: Roboto op de productkaarten */
@media (max-width: 420px) { .productkaart { padding: 10px; } .productkaart__toevoegen .aantal { width: 48px; } }

/* Productpagina */
.product { padding-block: 24px var(--sectie); }
.product__terug { margin-bottom: 24px; }
.product__boven { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.product__hoofdfoto { background: var(--wit); aspect-ratio: 1; display: grid; place-items: center; padding: 16px; }
.product__hoofdfoto img { max-height: 100%; width: auto; object-fit: contain; }
.product__duimen { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 8px 0 0; }
.product__duimen li { margin: 0; }
.product__duimen button { display: block; width: 100%; aspect-ratio: 1; padding: 4px; border: 2px solid transparent; background: var(--wit); cursor: pointer; }
.product__duimen button[aria-current="true"], .product__duimen button:hover { border-color: var(--oranje); }
.product__duimen img { width: 100%; height: 100%; object-fit: contain; }
.product__naam { font-size: clamp(26px, 3.4vw, 40px); }
.product__kort { color: var(--tekst-zacht); }
.product__bestellen { margin-block: 24px; }
.product__bestellen form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.product__bestellen .wapf, .product__bestellen .variations, .product__bestellen .single_variation_wrap, .product__bestellen .woocommerce-variation-add-to-cart { width: 100%; }
.product__bestellen .woocommerce-variation-add-to-cart { display: flex; gap: 12px; }
.product__bestellen .quantity input { width: 88px; text-align: center; }
.product__bestellen .single_add_to_cart_button { flex: 1; }
.product__bestellen table.variations { border: 0; }
.product__bestellen table.variations th, .product__bestellen table.variations td { display: block; padding: 0 0 8px; border: 0; }
.product__bestellen .reset_variations { display: inline-block; margin-top: 8px; font-size: 14px; }
.product__bestellen .wapf-field-container { margin-bottom: 12px; }
.product__bestellen .wapf-field-label { font-weight: 700; margin-bottom: 6px; }
.product__omschrijving { margin-top: var(--sectie); }
@media (max-width: 800px) { .product__boven { grid-template-columns: 1fr; } }

/* Meldingen van WooCommerce */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 0 0 24px; padding: 16px 20px; background: var(--wit); color: var(--donker); border-left: 4px solid var(--oranje); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.woocommerce-error { border-color: #c0392b; }
.woocommerce-error li { margin: 0; }
.woocommerce-message .knop { margin-left: auto; }

/* Offertelijst en aanvragen (afrekenen) */
.woocommerce-checkout .blokken > .woocommerce { max-width: calc(var(--breed) + 2 * var(--rand-x)); margin-bottom: var(--sectie); }
form.checkout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px clamp(24px, 4vw, 56px); align-items: start; }
form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
#customer_details { grid-column: 2; grid-row: 1 / span 3; }
#order_review_heading { grid-column: 1; margin: 0; font-size: 24px; }
#order_review { grid-column: 1; position: sticky; top: calc(var(--kop-hoogte) + 24px); }
.woocommerce-billing-fields h3 { font-size: 24px; }
.woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.woocommerce-billing-fields__field-wrapper .form-row { margin: 0 0 16px; }
.woocommerce-billing-fields__field-wrapper .veld--breed { grid-column: 1 / -1; }
.form-row label .required { color: var(--oranje); text-decoration: none; }
.form-row label .optional { font-weight: 400; color: var(--tekst-zacht); }
.offertelijst { background: var(--wit); color: var(--donker); }
.offertelijst td { border-color: #e2e8e8; }
.offertelijst__product { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.offertelijst__foto { width: 56px; height: 56px; object-fit: contain; }
.offertelijst__naam { flex: 1; font-weight: 700; }
.offertelijst__weg { display: grid; place-items: center; width: 36px; height: 36px; color: var(--donker); }
.offertelijst__weg:hover { color: var(--oranje); }
.offertelijst__weg .icoon { width: 18px; height: 18px; }
.offertelijst dl.variation { width: 100%; margin: 0 0 0 68px; font-size: 14px; display: grid; grid-template-columns: auto 1fr; gap: 0 8px; }
.offertelijst dl.variation dd, .offertelijst dl.variation p { margin: 0; }
.offertelijst__aantal { width: 56px; text-align: right; font-weight: 700; white-space: nowrap; }
#payment { margin-top: 24px; }
#payment ul.payment_methods { display: none; }
#payment .place-order { padding: 0; }
#place_order { width: 100%; min-height: 56px; font-size: 17px; }
.woocommerce-terms-and-conditions-wrapper { font-size: 14px; color: var(--tekst-zacht); margin-bottom: 16px; }
.cart-empty, .return-to-shop { text-align: center; }
.woocommerce-order { max-width: var(--smal); margin: var(--sectie) auto; padding-inline: var(--rand-x); }
@media (max-width: 900px) {
	form.checkout { grid-template-columns: 1fr; }
	#customer_details, #order_review_heading, #order_review { grid-column: 1; grid-row: auto; position: static; }
	.woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
}

/* Formidable-formulieren zoals op de oude site (PowerPack): labels Roboto 20px, velden transparant met witte onderstreep. */
.frm_forms { max-width: var(--smal); font-family: "Roboto", var(--tekst-font); }
.frm_forms .frm_form_field { margin-bottom: 28px; }
.frm_forms .frm_primary_label { font: 500 20px/20px "Roboto", var(--tekst-font); color: var(--wit); margin-bottom: 10px; }
.frm_forms .frm_required { color: var(--oranje); }
.frm_forms input[type="text"], .frm_forms input[type="email"], .frm_forms input[type="tel"], .frm_forms input[type="number"], .frm_forms input[type="url"], .frm_forms input[type="date"], .frm_forms select, .frm_forms textarea {
	min-height: 40px; padding: 10px 0; border: 0; border-bottom: 2px solid var(--wit); border-radius: 0; background: transparent; color: var(--wit); font: 500 16px/1.3 "Roboto", var(--tekst-font);
}
.frm_forms textarea { min-height: 127px; }
.frm_forms select option { color: var(--donker); }
.frm_forms ::placeholder { color: var(--wit); opacity: .8; }
.frm_forms .frm_description { font-size: 14px; color: var(--tekst-zacht); margin-top: 4px; }
.frm_forms .frm_error, .frm_forms .frm_error_style { color: #ffb4a2; font-size: 14px; margin-top: 4px; }
.frm_forms .frm_message, .frm_forms .frm_message p { padding: 16px 20px; background: var(--wit); color: var(--donker); border-left: 4px solid var(--oranje); }
.frm_forms .frm_fields_container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 20px; }
.frm_forms .frm_fields_container > * { grid-column: span 12; }
.frm_forms .frm_fields_container > .frm6, .frm_forms .frm_fields_container > .frm_half { grid-column: span 6; }
.frm_forms .frm_fields_container > .frm4, .frm_forms .frm_fields_container > .frm_third { grid-column: span 4; }
.frm_forms .frm_fields_container > .frm3, .frm_forms .frm_fields_container > .frm_fourth { grid-column: span 3; }
.frm_forms .frm_fields_container > .frm8, .frm_forms .frm_fields_container > .frm_two_thirds { grid-column: span 8; }
.frm_forms .frm_checkbox label, .frm_forms .frm_radio label { font-weight: 400; display: flex; gap: 8px; align-items: center; }
.frm_forms .frm_checkbox input, .frm_forms .frm_radio input { width: 20px; height: 20px; accent-color: var(--oranje); }
.frm_forms .frm_none_container .frm_primary_label, .frm_forms .frm_hidden, .frm_forms .frm_screen_reader { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.frm_forms .frm_submit { margin-top: 8px; }
.frm_forms .frm_button_submit { min-height: 38px; padding: 10px 24px; font: 500 15px/1 "Roboto", var(--tekst-font); border-radius: 0; }
.frm_forms .frm_dropzone { padding: 24px; border: 2px dashed var(--rand); text-align: center; }
@media (max-width: 600px) { .frm_forms .frm_fields_container > * { grid-column: span 12 !important; } }

/* Vragen? (boven de footer), zoals de oude Elementor-footer 13099: volle oranje band, foto rechts, schuine overgang naar de footer */
.vragen { position: relative; z-index: 2; height: 350px; margin-top: calc(var(--sectie) + 50px); background: var(--oranje) var(--vragen-foto, none) no-repeat 100% 50% / 50% auto; box-shadow: 0 -40px 25px -5px rgba(0, 0, 0, .25); }
.vragen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #e73e11 48%, rgba(231, 62, 17, .7) 74%); }
.vragen__tekst { position: relative; padding-top: 78px; }
.vragen__tekst h2 { font-size: 40px; margin-bottom: 24px; }
.vragen__tekst p { max-width: 440px; margin-bottom: 30px; }
.vragen__schuin { position: relative; z-index: 3; width: 60%; height: 140px; margin: -140px 0 0 auto; background: var(--donker); clip-path: polygon(0 75px, 100% 0, 100% 100%, 0 100%); }
@media (max-width: 767px) {
	.vragen { height: auto; padding-bottom: 120px; background-size: cover; background-position: center; }
	.vragen::before { background: linear-gradient(180deg, #e73e11 55%, rgba(231, 62, 17, .7) 100%); }
	.vragen__tekst { padding-top: 48px; }
	.vragen__tekst h2 { font-size: 20px; }
	.vragen__schuin { width: 100%; height: 80px; margin-top: -80px; clip-path: polygon(0 60px, 100% 0, 100% 100%, 0 100%); }
}

/* Contactpagina: kaart en drie contactblokken boven de footer (oude site: footer 13508) */
.contactblok { padding-top: var(--sectie); }
.contactblok__kaart { max-width: calc(var(--breed) + 2 * var(--rand-x)); margin-inline: auto; padding-inline: var(--rand-x); }
.contactblok__kaart iframe { display: block; width: 100%; height: 400px; border: 0; }
.contactblok__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-block: 32px 48px; }
.contactblok__kaart + .contactblok__links { margin-top: 48px; background: var(--oranje); max-width: none; padding-inline: max(var(--rand-x), calc((100% - var(--breed)) / 2)); }
.contactblok + .voet { margin-top: 0; }
.contactblok__links a { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; padding: 12px; color: var(--wit); font: 700 18px/1.2 var(--tekst-font); text-decoration: none; }
.contactblok__links a:hover { background: #c72a00; color: var(--wit); }
@media (max-width: 700px) { .contactblok__links { grid-template-columns: 1fr; } }

/* Footer, zoals de oude Elementor-footer: logo links verticaal gecentreerd, twee kolommen rechts (237px), scheidingslijn */
.voet { background: var(--donker); margin-top: var(--sectie); padding-top: 12px; }
.vragen__schuin + .voet { margin-top: 0; }
.voet__kolommen { display: grid; grid-template-columns: 1fr 237px 237px; column-gap: 20px; align-items: start; padding-bottom: 30px; }
.voet__logo { display: block; width: 239px; align-self: center; margin-left: 10px; }
.voet__logo svg { width: 100%; height: auto; }
.voet__kop { font: 700 24px/24px var(--tekst-font); text-transform: none; color: var(--oranje); margin: 0 0 20px; }
.voet__lijst { list-style: none; padding: 0; margin: 0; }
.voet__lijst li { margin: 0; }
.voet__lijst a { display: block; padding: 13px 0; font: 600 15px/20px var(--tekst-font); text-decoration: none; }
.voet address { font-style: normal; font-size: 16px; line-height: 31px; }
.voet address a { text-decoration: underline; font-weight: 400; }
.voet__social { display: flex; list-style: none; padding: 0; margin: 10px 0 0 -10px; }
.voet__social li { margin: 0; }
.voet__social a { display: grid; place-items: center; width: 40px; height: 40px; }
.voet__social .icoon { width: 20px; height: 20px; }
.voet__onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 14px 0; font-size: 16px; line-height: 24px; color: var(--wit); }
.voet__onder::before { content: ""; flex: 0 0 100%; height: 1px; background: var(--mist); opacity: .6; margin-bottom: 0; }
.voet__onder p { margin: 0 0 14px; }
.voet__juridisch { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; }
@media (max-width: 767px) {
	.voet__kolommen { grid-template-columns: 1fr; row-gap: 40px; padding-top: 60px; }
	.voet__logo { width: 145px; margin-left: 0; }
	.voet__kop { margin-bottom: 16px; }
}

/* Korte footer (oude site: vacatures en bedankpagina) en de lichte logostrook op de bedankpagina */
.voet--kort { padding-block: 60px; }
.voet--kort .voet__kolommen { grid-template-columns: 456px repeat(3, 228px); padding-bottom: 0; }
.logostrook { background: var(--mist); }
.logostrook__rij { display: flex; justify-content: space-between; align-items: center; height: 120px; }
.logostrook__rij { overflow: hidden; }
/* Zoals live: één afbeelding met de acht logo's over de volle breedte. */
.logostrook__rij img { width: 100%; height: auto; }
@media (max-width: 767px) { .voet--kort .voet__kolommen { grid-template-columns: 1fr; } }

/* Actiebalk (mobiel) */
.actiebalk { display: none; }

/* Tablet en mobiel: hamburger, actiebalk */
@media (max-width: 1100px) {
	.kop__zoek { display: none; }
	.kop__rechts { gap: 32px; }
}
@media (max-width: 900px) {
	:root { --kop-hoogte: 77px; }
	.kop__menu { display: none; }
	.kop__balk { padding-inline: 20px; }
	.kop__logo { width: 134px; }
	.kop__rechts { gap: 46px; }
	.menupaneel { width: 100%; }
	.actiebalk { display: grid; grid-template-columns: 1fr 1.4fr; position: fixed; left: 0; bottom: 0; width: 100%; z-index: 40; background: var(--donker-2); box-shadow: 0 -2px 16px rgba(0, 0, 0, .3); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); gap: 8px; transition: transform .25s; }
	.actiebalk.is-verborgen { transform: translateY(110%); }
	.actiebalk__knop { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: var(--radius); text-decoration: none; font-weight: 700; box-shadow: inset 0 0 0 2px var(--rand); }
	.actiebalk__knop--hoofd { background: var(--oranje); box-shadow: none; }
	.actiebalk__knop:hover { color: var(--wit); }
	.actiebalk .teller { background: var(--wit); color: var(--oranje); }
	body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
	body.woocommerce-checkout .actiebalk { display: none; }
	body.woocommerce-checkout { padding-bottom: 0; }
}

/* Video: eerst foto met afspeelknop (inc/embeds.php) */
.video { margin-block: var(--sectie); }
.video__knop { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: var(--donker-2); cursor: pointer; overflow: hidden; }
.video.is-staand .video__knop, .video.wp-embed-aspect-9-16 .video__knop { aspect-ratio: 9 / 16; max-width: min(380px, 62vw); margin-inline: auto; }
.video__knop img, .video__knop iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__speel { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--oranje); transition: background-color .15s; }
.video__speel::after { content: ""; position: absolute; left: 31px; top: 24px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--wit); }
.video__knop:hover .video__speel { background: var(--oranje-hover); }
.wp-block-column > .video { margin-block: 0; }

/* Stijlen voor standaardblokken (zie inc/blokken.php) */
.blokken > .is-style-formulier { max-width: calc(var(--smal) + 2 * var(--rand-x)); padding-block: clamp(32px, 6vw, 72px) var(--sectie); }
.wp-block-image.is-style-breed img { aspect-ratio: 21 / 9; object-fit: cover; }
.wp-block-image.is-style-logo { text-align: center; }
.wp-block-image.is-style-logo img { display: inline-block; width: 298px; max-width: 100%; height: auto; }
.wp-block-image.is-style-icoon img { width: 96px; margin-inline: auto; }
.sierregel, .is-style-sierregel { font: 600 60px/60px var(--kop); text-transform: uppercase; text-align: left; color: transparent; -webkit-text-stroke: .6px var(--mist); margin: var(--sectie) 0 0; overflow-wrap: anywhere; }
.blokken > .sierregel { position: relative; z-index: 1; max-width: none; padding-left: 20px; margin-bottom: -64px; }
@media (max-width: 767px) { .sierregel, .is-style-sierregel { font-size: 28px; line-height: 28px; } }
.iconen--beeld { flex-wrap: nowrap; gap: 16px; justify-content: space-between; overflow-x: auto; scrollbar-width: none; }
.iconen--beeld .iconen__item { width: auto; flex: 0 0 auto; }
.iconen--beeld .iconen__tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.iconen--beeld .iconen__item img { width: auto; height: 88px; }
@media (max-width: 700px) { .iconen--beeld { justify-content: flex-start; scroll-snap-type: x mandatory; } .iconen--beeld .iconen__item { scroll-snap-align: start; } .iconen--beeld .iconen__item img { height: 72px; } }

/* Mobiel zoals de oude site: koppen 20px, paginatitels 26px */
@media (max-width: 767px) {
	h2, .blokken h2, .rij__kop h2, .logos h2, .voet__kop { font-size: 20px; line-height: 20px; }
	.has-kop-m-font-size, .has-kop-l-font-size, .has-kop-xl-font-size { font-size: 20px !important; }
	.has-kop-l-font-size { line-height: 30px; }
	h1, .hero--pagina .hero__titel, .overzicht__kop h1, .vacature h1 { font-size: 26px; line-height: 26px; }
	.product__naam { font-size: 20px; line-height: 20px; }
	.tegel__titel, .projectkaart__naam { font-size: 20px; }
	.iconen__item { font-size: 14px; line-height: 21px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Offerteformulier: kop en formulier over de volle breedte (zoals live). */
.blokken > .is-style-offerte { max-width: calc(var(--breed) + 2 * var(--rand-x)); margin-inline: auto; padding: 210px var(--rand-x) var(--sectie); }
.blokken > .is-style-offerte > h2 { margin: 0 0 64px; }
.blokken > .is-style-offerte .frm_forms { max-width: none; }
@media (max-width: 767px) { .blokken > .is-style-offerte { padding-top: 60px; } .blokken > .is-style-offerte > h2 { margin-bottom: 32px; } }
.hero--pagina .hero__titel .hero__vast { display: block; max-width: 620px; }

/* Oranje vlak (bedankpagina): 1140 breed, donkere knop. */
.blokken > .is-style-oranje { max-width: var(--breed); margin: 44px auto 75px; padding: 48px 20px 54px; background: var(--oranje); color: var(--wit); text-align: center; }
.blokken > .is-style-oranje > h2 { color: var(--wit); margin: 0 0 24px; font-size: 50px; line-height: 1; }
.blokken > .is-style-oranje .knop, .blokken > .is-style-oranje .wp-block-button__link { background: var(--donker); color: var(--wit); }
@media (max-width: 767px) { .blokken > .is-style-oranje { margin-inline: var(--rand-x); } .blokken > .is-style-oranje > h2 { font-size: 26px; } }
.bedankt-tekst { max-width: 480px; margin-inline: auto; }

/* Vacaturepagina zoals het Elementor-sjabloon: foto en tekstvak overlappen, mistvakken, compact formulier. */
.hero--vacature { min-height: 506px; padding: 0; }
.hero--vacature { overflow: visible; }
.hero--vacature .hero__foto { overflow: hidden; }
.hero--vacature .hero__foto::after { opacity: .2; }
.hero--vacature::after { height: 164px; clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 100%); }
.hero--pagina.hero--vacature .hero__zijtekst { top: 270px; right: calc((100% - var(--breed)) / 2 - 50px); z-index: 2; }
.vacature .terug { margin-top: 70px; }
.vacature > .tekst { max-width: none; }
.vacature__rij { grid-template-columns: 10px 408px 270px 1fr; gap: 0; align-items: start; margin-block: 90px 100px; }
.vacature__rij > .vacature__foto { grid-column: 2 / 4; grid-row: 1; }
.vacature__rij > .vacature__blok { grid-column: 3 / 5; grid-row: 1; margin-top: 90px; position: relative; z-index: 1; }
.vacature__rij .vacature__foto img { height: 510px; object-fit: cover; }
.vacature__rij--om { grid-template-columns: 710px 1fr; }
.vacature__rij--om > .vacature__blok { grid-column: 1; margin-top: 0; }
.vacature__rij--om > .vacature__foto { grid-column: 2; order: 0; }
.vacature__rij--om .vacature__foto img { height: 600px; }
.vacature__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.vacature__kenmerken { margin: 0; font-size: 16px; line-height: 20px; gap: 12px 24px; }
.vacature__kenmerken li { display: flex; gap: 8px; align-items: flex-start; max-width: 340px; margin: 0; }
.vacature__kenmerken .icoon { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--oranje); }
.vacature__kop .knop { flex: none; }
.vacature__vast, .vacature__bieden { max-width: none; }
.vacature__lijst { padding: 30px; margin-block: 30px; background: var(--mist); color: var(--donker); column-count: 2; column-gap: 40px; font-size: 14px; line-height: 22px; }
.vacature__lijst > * { break-inside: avoid; }
.vacature__solliciteren { margin: 100px -50px 0; padding: 60px 50px; background: var(--mist); color: var(--donker); }
.vacature__solliciteren h2 { font: 400 36px/1.1 var(--kop); text-transform: uppercase; color: var(--wit); margin: 0 0 30px; }
.vacature__solliciteren .frm_forms fieldset { border: 0; padding: 0; margin: 0; }
.vacature__solliciteren .frm_primary_label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vacature__solliciteren .frm_checkbox .frm_primary_label, .vacature__solliciteren .frm_opt_container .frm_primary_label { position: static; width: auto; height: auto; clip: auto; }
.vacature__solliciteren input:not([type=checkbox]):not([type=file]), .vacature__solliciteren textarea { padding: 6px 8px; min-height: 32px; border: 1px solid var(--donker); background: rgba(255, 255, 255, .25); color: var(--donker); font-size: 14px; }
.vacature__solliciteren ::placeholder { color: var(--donker); opacity: 1; }
.vacature__solliciteren .frm_form_field { margin-bottom: 12px; }
.vacature__solliciteren .frm_dropzone { min-height: 0; padding: 8px 12px; border: 0; background: var(--wit); }
.vacature__solliciteren .frm_dropzone .frm_upload_icon, .vacature__solliciteren .frm_dropzone svg { width: 20px; height: 20px; }
.vacature__solliciteren .frm_dropzone .dz-message { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; }
@media (max-width: 1240px) { .vacature__solliciteren { margin-inline: 0; } }
@media (max-width: 800px) {
	.vacature__rij, .vacature__rij--om { grid-template-columns: 1fr; margin-block: 50px; }
	.vacature__rij > .vacature__foto, .vacature__rij > .vacature__blok { grid-column: 1; grid-row: auto; margin-top: 0; }
	.vacature__rij .vacature__foto img { height: auto; aspect-ratio: 4 / 3; }
	.vacature__kop { flex-direction: column; }
	.vacature__lijst { column-count: 1; }
	.vacature__solliciteren { padding: 32px 20px; }
	.vacature__solliciteren h2 { font-size: 22px; }
}

/* Formidable: geen kader om het formulier (de oude site had dat ook niet). */
.frm_forms fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.wp-block-image.is-style-logo { display: flex; justify-content: center; margin-inline: auto; }

/* Contactpagina: hoge oranje band met strepen links, links onderin, schuine onderkant (zoals live). */
.contactblok__kaart + .contactblok__links { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; min-height: 485px; padding-block: 0 150px; }
.contactblok__kaart + .contactblok__links::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; z-index: -1; background: rgba(255, 255, 255, .14); -webkit-mask: url("../img/patroon.svg") no-repeat -8vw 50% / auto 130%; mask: url("../img/patroon.svg") no-repeat -8vw 50% / auto 130%; }
.contactblok__links a { justify-content: flex-start; padding: 12px 0; font-size: 28px; }
.contactblok__links a:hover { background: none; text-decoration: underline; }
.contactblok__links .icoon { width: 26px; height: 26px; }
@media (max-width: 767px) { .contactblok__kaart + .contactblok__links { flex-direction: column; align-items: flex-start; min-height: 0; padding-block: 48px 100px; } .contactblok__links a { font-size: 18px; } }

/* Projectpagina (evenement), zoals live: geen hero, titel boven een fotoslider met onderin de gebruikte producten. */
.project { padding-top: calc(var(--kop-hoogte) + 210px); padding-bottom: var(--sectie); }
.project .terug { margin: 0 0 30px; }
.project__titel { font-size: 50px; line-height: 50px; margin: 0 0 -4px 6px; position: relative; z-index: 3; }
.project__slider { height: 664px; padding: 0; margin: 0; isolation: isolate; }
.project__slider::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(rgba(18, 50, 55, 0) 55%, #123237 88%); }
.project__slider .rij__spoor { height: 100%; }
.project__foto { position: relative; height: 100%; }
.project__foto img { width: 100%; height: 100%; object-fit: cover; }
.project__slider .rij__pijlen { left: 0; right: 0; z-index: 3; }
.project__slider .rij__pijl:disabled { visibility: visible; opacity: .5; }
.project__slider .rij__pijl { width: 25px; height: 25px; background: var(--wit); }
.project__onder { position: absolute; left: 30px; right: 150px; bottom: -55px; z-index: 2; pointer-events: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.project__producten { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; }
.project__producten li { width: 226px; margin: 0; }
.project__producten a { pointer-events: auto; display: block; text-decoration: none; font-size: 14px; line-height: 20px; text-align: center; }
.project__vak { display: grid; place-items: center; height: 142px; margin-bottom: 12px; padding: 15px; background: var(--wit); }
.project__vak { overflow: hidden; }
.project__vak img { max-height: 112px; width: auto; height: auto; object-fit: contain; }
.project__assortiment { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; padding-bottom: 14px; font-size: 16px; text-decoration: none; }
.project__assortiment .icoon { width: 16px; height: 16px; }
.project__tekst { margin-top: 48px; }
@media (max-width: 767px) {
	.project { padding-top: calc(var(--kop-hoogte) + 60px); }
	.project__titel { font-size: 26px; line-height: 26px; margin-bottom: 16px; }
	.project__slider { height: auto; }
	.project__foto { aspect-ratio: 4 / 3; height: auto; }
	.project__onder { position: static; flex-direction: column; align-items: flex-start; margin-top: 16px; }
	.project__producten li { width: 140px; }
	.project__vak { height: 100px; }
}

/* Verhuur & Verkoop zoals live: catalogusknop bovenaan, categorieën met pijltje, geen "Alles", 4 kolommen, geen aantal. */
.filter__chip--alles, .producten__aantal { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.filter__chip .icoon { width: 20px; height: 20px; flex: none; transition: transform .2s; }
.filter__chip.is-actief .icoon { transform: rotate(180deg); }
.producten__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 901px) {
	.overzicht { grid-template-columns: 224px minmax(0, 1fr); gap: 0 20px; padding-top: 76px; }
	.overzicht__kop:not(.sr-only) { margin-bottom: 24px; }
	.filter__catalogus { order: -1; margin: 0 0 24px; }
	.filter .zoekveld { margin-bottom: 40px; }
	.filter .zoekveld input { min-height: 38px; padding: 6px 12px 6px 32px; border: 1px solid var(--wit); background: transparent; color: var(--wit); font-size: 14px; }
	.filter .zoekveld input::placeholder { color: var(--wit); opacity: 1; }
	.filter .zoekveld button { left: 0; right: auto; width: 32px; color: var(--wit); }
	.filter .zoekveld .icoon { width: 14px; height: 14px; }
	.filter__chip { padding: 4px 0; border: 0; font-size: 20px; }
}
@media (max-width: 1100px) { .producten__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .producten__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Productpagina zoals live: foto zonder kader, info in een lichter vak, verwante producten als raster van 5. */
.product { padding-top: 100px; }
.product__boven { grid-template-columns: 544px minmax(0, 1fr); gap: 50px; }
.product__hoofdfoto { aspect-ratio: 4 / 3; padding: 0; background: none; }
.product__hoofdfoto img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.product__duimen { grid-template-columns: repeat(auto-fill, 100px); gap: 12px; margin-top: 12px; }
.product__duimen button { padding: 0; border: 0; background: none; opacity: .7; }
.product__duimen button[aria-current="true"], .product__duimen button:hover { opacity: 1; }
.product__duimen img { object-fit: cover; }
.product__info { padding: 20px; background: #1f3e43; }
.product__naam { font-size: 24px; line-height: 1.2; margin: 0 0 20px; }
.product__bestellen { margin: 0; }
.product__bestellen .single_add_to_cart_button { flex: 0 0 288px; }
.product__bestellen .quantity input { width: 58px; }
.verwant { padding-block: 60px var(--sectie); }
.verwant h2 { margin: 0 0 24px; }
.verwant__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1000px) { .verwant__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .product { padding-top: 24px; } .product__boven { grid-template-columns: 1fr; gap: 24px; } .product__bestellen .single_add_to_cart_button { flex: 1; } }
@media (max-width: 600px) { .verwant__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Mobiel zoals live: iets ruimere zijmarge, paginatitel hoger in de hero, introteksten links uitgelijnd, Vragen-tekst smal. */
@media (max-width: 767px) {
	:root { --rand-x: 20px; }
	.hero--pagina { min-height: 336px; padding-top: 120px; }
	.blokken > .has-text-align-center:not(.bedankt-tekst), .blokken > .intro > .has-text-align-center { text-align: left; }
	.blokken > .intro > .wp-block-buttons { justify-content: flex-start; }
	.vragen__tekst p { max-width: 60%; }
}

/* Contact: ruimte boven het formulier en rond het Mainstage-logo zoals live. */
.blokken > .is-style-formulier .frm_forms { margin-top: 60px; }
.blokken > .wp-block-image.is-style-logo { margin-top: 110px; margin-bottom: 0; }
.blokken > .wp-block-image.is-style-logo + .wp-block-heading { margin-top: 12px; }

/* Productkaarten in het overzicht even hoog als live (330px), knop 40px. */
.producten__grid .productkaart { min-height: 330px; padding: 14px; }
.productkaart .knop { min-height: 40px; }

/* Groep "breed": tekst over de volle 1140px (zoals "Wij hebben de grootste evenementen…" op home). */
.blokken > .breed { max-width: calc(var(--breed) + 2 * var(--rand-x)); }
.blokken > .breed > * { max-width: none; }
.rij--slider .rij__pijl:disabled { visibility: visible; opacity: .5; }

/* Introtekst bovenaan Transport en Warehousing (1040px) en Diensten (900px), zoals live. */
.blokken > .intro { max-width: calc(1040px + 2 * var(--rand-x)); padding-top: 76px; }
.blokken > .intro--900 { max-width: calc(900px + 2 * var(--rand-x)); }
.blokken > .intro > * { max-width: none; }
.blokken > .intro > .wp-block-buttons { margin-top: 40px; }
/* Tekst met beeld zonder donkere laag (Transport, Warehousing): hoger beeld, 504x556 op live. */
.tekstbeeld--links .tekstbeeld__beeld:not(.is-donker) { min-height: 556px; }
.blokken > .intro + .tekstbeeld { margin-top: 110px; }
.blokken > .intro--ruim + .tekstbeeld { margin-top: 150px; }
.blokken > .is-style-formulier:has(> .is-style-icoon:first-child) { padding-top: 26px; }
.blokken > .is-style-vlak > .wp-block-buttons { margin-top: 36px; }

/* Mobiel zoals live: tekst-met-beeld zonder inspringing (rechts wat ruimte bij beeld rechts), beeld 60px onder de tekst; homehero lager. */
@media (max-width: 767px) {
	.tekstbeeld__tekst, .tekstbeeld--links .tekstbeeld__tekst { padding: 0; }
	.blokken > .tekstbeeld:not(.tekstbeeld--links) .tekstbeeld__tekst { padding-right: 60px; }
	.blokken > .tekstbeeld--links .tekstbeeld__tekst { padding-left: 10px; }
	.tekstbeeld__beeld, .tekstbeeld--links .tekstbeeld__beeld { margin-top: 60px; }
	.hero--groot { min-height: 480px; }
}

/* Mobiel Verhuur & Verkoop zoals live: dezelfde filter als op desktop (catalogusknop, omlijnd zoekveld, lijst met pijltjes), geen chips. */
@media (max-width: 900px) {
	.filter { gap: 0; }
	.filter__catalogus { order: -1; align-self: flex-start; width: auto; margin-bottom: 24px; }
	.filter .zoekveld { margin-bottom: 40px; }
	.filter .zoekveld input { min-height: 44px; padding: 6px 12px 6px 34px; border: 2px solid var(--wit); background: transparent; color: var(--wit); }
	.filter .zoekveld input::placeholder { color: var(--wit); opacity: 1; }
	.filter .zoekveld button { left: 0; right: auto; width: 34px; color: var(--wit); }
	.filter__hoofd, .filter__sub { flex-direction: column; gap: 0; overflow: visible; }
	.filter__chip { justify-content: space-between; padding: 4px 0; border: 0; border-radius: 0; font: 400 20px/1.2 var(--kop); text-transform: uppercase; }
	.filter__chip.is-actief { background: none; color: var(--oranje); }
	.filter__chip--sub { font: 700 15px/1.3 var(--tekst-font); text-transform: none; }
	.overzicht { padding-top: 24px; row-gap: 40px; }
}
/* Mobiel vacaturepagina zoals live: lage foto bovenaan, daarna ruimte tot de terug-link. */
@media (max-width: 767px) {
	.hero--vacature { min-height: 140px; }
	.hero--vacature::after { height: 40px; }
	.vacature .terug { margin-top: 130px; }
}

/* Offerte: tweede verstuurknop onder het formulier, zelfde stijl als de knop bij de offertelijst. */
.offerte__knop { width: 100%; min-height: 56px; margin-top: 24px; font-size: 17px; }

/* Bedankpagina na een aanvraag: drie witte kaarten (producten, evenement, contact), op mobiel onder elkaar. */
.blokken > .aanvraag { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: calc(var(--breed) + 2 * var(--rand-x)); margin: 24px auto 0; }
.aanvraag__kaart { padding: 30px; background: var(--wit); color: var(--donker); }
.aanvraag__kaart h2 { font: 600 20px/24px var(--tekst-font); text-transform: none; color: var(--donker); margin: 0 0 16px; }
.aanvraag__kaart dl { display: grid; gap: 4px; margin: 0; }
.aanvraag__kaart dt { font-weight: 700; margin-top: 8px; }
.aanvraag__kaart dd { margin: 0; overflow-wrap: anywhere; }
.aanvraag__producten { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.aanvraag__producten li { display: flex; gap: 10px; margin: 0; }
.aanvraag__aantal { flex: none; min-width: 32px; font-weight: 700; color: var(--oranje); }
.blokken > .aanvraag__melding { text-align: center; }
@media (max-width: 900px) { .blokken > .aanvraag { grid-template-columns: 1fr; } }