/* Houthandel Jan Sok, ontwerp ronde 15: fijn en strak. Eén letter, één raster van 12 kolommen, dunne lijnen, geen kaders om kaders. */
@font-face { font-family: "Instrument Sans"; src: url(instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --w: 1360px; --gut: 40px; --gat: 24px; --r: 4px;
  --inkt: #141a16; --sub: #59625b; --zacht: #6f7771;
  --lijn: #e7e6e1; --lijn2: #cfcec8;
  --vlak: #f5f4f0; --tegel: #f3f2ee;
  --groen: #0e6e37; --groen-d: #0a5a2c; --stip: #1a8a4a; --bos: #11251b;
  --sec: 80px; --sec-s: 56px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.55; color: var(--inkt); background: #fff; -webkit-font-smoothing: antialiased; word-spacing: .05em; overflow-x: clip; }
main { flex: 1 0 auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4, b, strong { font-weight: 500; }
small { font-size: 13px; }
em { font-style: normal; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input, textarea, select { outline: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.w { width: 100%; max-width: calc(var(--w) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.stil { font-size: 13px; color: var(--sub); }

/* sfeerfoto's: het hout iets minder oranje, zodat foto's en merk rustig samengaan */
.held > img, .hub-kop > img, .tegel-foto img, .soort img:not(.vrij), .balie-foto img, .art img, .kaart-route img, .bezorg-twee img, .groot-beeld, .mega-foto img, .banner img { filter: saturate(.86) contrast(1.02); }

/* ---------- letters ---------- */
.h1, .pkop h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.022em; text-wrap: balance; }
.h2 { font-size: 28px; line-height: 1.18; letter-spacing: -.018em; text-wrap: balance; }
.h3 { font-size: 16px; line-height: 1.3; }
.lead { font-size: 16px; line-height: 1.5; color: var(--sub); margin-top: 12px; max-width: 62ch; }
.lead b { color: var(--inkt); }
.kick { display: block; font-size: 13px; color: var(--sub); margin-bottom: 8px; }
.zonder-kick .kick { display: none; }

/* ---------- knoppen ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 1px solid var(--groen); border-radius: var(--r); background: var(--groen); color: #fff; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.knop:hover { background: var(--groen-d); border-color: var(--groen-d); }
.knop.groot { height: 48px; padding: 0 24px; font-size: 15px; }
.knop.klein { height: 36px; padding: 0 14px; font-size: 13px; }
.knop.breed { width: 100%; }
.knop.twee { background: #fff; color: var(--inkt); border-color: var(--lijn2); }
.knop.twee:hover { background: #fff; border-color: var(--inkt); }
.knop.wit { background: #fff; color: var(--inkt); border-color: #fff; }
.knop.wit:hover { background: #ecebe6; border-color: #ecebe6; }
.knop.op-donker { background: rgba(9,16,12,.25); color: #fff; border-color: rgba(255,255,255,.6); }
.knop.op-donker:hover { background: rgba(9,16,12,.4); border-color: #fff; }
.knop.leeg { background: #fff; color: var(--sub); border-color: var(--lijn2); }
.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.meer { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--lijn2); white-space: nowrap; transition: text-decoration-color .15s; }
.meer:hover { text-decoration-color: currentColor; }
.meer svg { width: 14px; height: 14px; }

/* ---------- strook en kop ---------- */
.strook { font-size: 13px; color: var(--sub); border-bottom: 1px solid var(--lijn); }
.strook .w { display: flex; justify-content: space-between; align-items: center; gap: 24px; height: 36px; }
.strook-l, .strook-r { display: flex; align-items: center; gap: 20px; white-space: nowrap; }
.strook a:hover { color: var(--inkt); }
.nuopen { display: inline-flex; align-items: center; gap: 6px; color: var(--inkt); white-space: nowrap; }
.nuopen i { width: 6px; height: 6px; border-radius: 50%; background: var(--stip); }
.btw { display: inline-flex; gap: 8px; padding-left: 20px; border-left: 1px solid var(--lijn); }
.btw button { padding: 0; border: 0; background: none; color: var(--sub); }
.btw button.aan { color: var(--inkt); font-weight: 500; }
.kop { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--lijn); }
.kop-r { display: flex; align-items: center; gap: 32px; height: 68px; }
.logo img { display: block; height: 38px; width: auto; }
.menu { display: flex; align-items: stretch; gap: 22px; height: 68px; }
.menu a, .mk { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 450; white-space: nowrap; box-shadow: inset 0 0 0 transparent; transition: box-shadow .15s; }
.menu a:hover, .menu a.aan, .menu a.open-m, .mk:hover, .mk.open-m { box-shadow: inset 0 -1.5px 0 var(--inkt); }
.zoek { display: flex; align-items: center; gap: 8px; flex: 0 1 256px; min-width: 120px; height: 40px; margin-left: auto; padding: 0 12px 0 10px; border: 1px solid var(--lijn2); border-radius: var(--r); background: #fff; transition: border-color .15s; }
.zoek:focus-within { border-color: var(--inkt); }
.zoek button { display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--sub); }
.zoek input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: 14px; -webkit-appearance: none; appearance: none; }
.zoek input::placeholder { color: var(--zacht); opacity: 1; }
.zoek input::-webkit-search-cancel-button { display: none; }
.zoek-tel { display: none; }
.acties { display: flex; align-items: center; gap: 16px; }
.actie { display: inline-flex; align-items: center; gap: 4px; height: 40px; }
.actie:last-child { min-width: 40px; justify-content: flex-end; }
.actie b { font-size: 13px; }
.menuknop { display: none; padding: 0; border: 0; background: none; }

/* ---------- megamenu ---------- */
.mega { position: absolute; top: 100%; left: 0; right: 0; display: none; background: #fff; border-top: 1px solid var(--lijn); box-shadow: 0 32px 48px -32px rgba(17,37,27,.22); }
.mega.open { display: block; }
.mega-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); padding-block: 32px 40px; }
.mega-afd { grid-column: span 3; display: flex; flex-direction: column; }
.mega-afd a { padding: 4px 0; font-size: 14px; color: var(--sub); }
.mega-afd a.aan, .mega-afd a:hover { color: var(--inkt); font-weight: 500; }
.mega-rest { grid-column: span 9; }
.mega-paneel { display: none; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--gat); }
.mega-paneel.aan { display: grid; }
.mega-t h3 { font-size: 16px; line-height: 1.3; }
.zin { font-size: 14px; color: var(--sub); margin-top: 2px; }
.mega-subs { columns: 2; column-gap: var(--gat); margin-top: 16px; }
.mega-subs a { display: block; padding: 4px 0; font-size: 14px; break-inside: avoid; }
.mega-subs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mega-alles { margin-top: 16px; }
.mega-foto img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--r); }
.mega-3d { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 500; }
.mega-3d:hover { text-decoration: underline; text-underline-offset: 3px; }
.sluier { position: fixed; inset: 0; z-index: 30; display: none; background: rgba(17,37,27,.2); }
.sluier.aan { display: block; }

/* ---------- lade (telefoon) ---------- */
.lade-sluier { position: fixed; inset: 0; z-index: 60; display: none; background: rgba(17,37,27,.35); }
.lade-sluier.aan { display: block; }
.lade { position: fixed; top: 0; bottom: 0; left: 0; z-index: 61; width: min(360px, 90vw); overflow-y: auto; background: #fff; transform: translateX(-102%); transition: transform .22s ease; }
.lade.open { transform: none; }
.lade-k { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; height: 56px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--lijn); }
.lade-k img { height: 32px; width: auto; }
.lade-k button { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; }
.lade nav { padding: 8px 16px 32px; }
.lade h4 { margin: 24px 0 4px; font-size: 13px; font-weight: 400; color: var(--sub); }
.la { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 0; font-size: 15px; font-weight: 500; }
.la img { width: 48px; height: 36px; object-fit: cover; border-radius: 2px; }
.la svg { color: var(--zacht); }
.lb { display: block; padding: 8px 0; font-size: 15px; }

/* ---------- voet ---------- */
.voet { flex-shrink: 0; background: var(--bos); color: rgba(255,255,255,.72); font-size: 14px; }
.voet a:hover { color: #fff; }
.voet-kop { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 48px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.voet-kop p { font-size: 20px; line-height: 1.3; letter-spacing: -.01em; font-weight: 500; color: #fff; }
.voet-kop p a { white-space: nowrap; }
.voet-kol { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); padding: 48px 0; }
.voet-kol > div { grid-column: span 2; }
.voet-merk { grid-column: span 4 !important; display: flex; flex-direction: column; gap: 16px; }
.voet-merk .logo img { height: 40px; }
.voet h4 { margin-bottom: 12px; font-size: 14px; color: #fff; }
.voet li { padding: 3px 0; }
.voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding: 20px 0 88px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13px; }
.voet-onder ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.voet-onder li { padding: 0; }

/* ---------- mockupbalk en melding ---------- */
.mkbalk { position: fixed; z-index: 45; left: 50%; bottom: 12px; transform: translateX(-50%); max-width: calc(100% - 16px); display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--lijn); border-radius: var(--r); background: #fff; font-size: 13px; color: var(--sub); box-shadow: 0 8px 24px rgba(17,37,27,.1); }
.mkbalk span { padding: 0 10px; white-space: nowrap; }
.mkbalk a { padding: 5px 10px; border-radius: 2px; color: var(--inkt); white-space: nowrap; }
.mkbalk a:hover { background: var(--vlak); }
.toast { position: fixed; z-index: 95; left: 50%; bottom: 64px; transform: translateX(-50%) translateY(8px); max-width: min(520px, calc(100% - 32px)); padding: 12px 16px; border-radius: var(--r); background: var(--inkt); color: #fff; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.aan { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.toast a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- secties ---------- */
.sec { padding-block: var(--sec); }
.sec.vlak { background: var(--vlak); }
.sec:not(.vlak) + .sec:not(.vlak) { padding-top: 0; }
.sec-s { padding-block: var(--sec-s); }
.skop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; margin-bottom: 32px; }
.h2.onder { margin-bottom: 32px; }
.kruimel { display: flex; flex-wrap: wrap; gap: 2px 6px; padding-block: 16px; font-size: 13px; color: var(--sub); }
.kruimel a:hover { color: var(--inkt); }
.kruimel b { font-weight: 400; color: var(--inkt); }
.kruimel span { color: var(--lijn2); }
.pkop { padding: 16px 0 32px; }
.pkop .meer { margin-top: 12px; }

/* ---------- start: opening ---------- */
.held { position: relative; overflow: hidden; background: var(--bos); color: #fff; }
.held > img { width: 100%; height: clamp(440px, 42vw, 640px); object-fit: cover; object-position: 50% 40%; }
.held::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,16,12,.72) 0%, rgba(9,16,12,.46) 34%, rgba(9,16,12,0) 62%); }
.held > .w { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; padding-bottom: 56px; }
.held-tekst { max-width: 680px; }
.held h1 { font-size: 52px; line-height: 1.05; letter-spacing: -.026em; text-wrap: balance; }
.held p { max-width: 46ch; margin: 16px 0 24px; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.88); }

.maatbalk { border-bottom: 1px solid var(--lijn); }
.maatzoeker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-block: 16px; }
.mz-titel { margin-right: 12px; font-size: 15px; white-space: nowrap; }
.mz-veld { display: inline-flex; align-items: center; height: 44px; border: 1px solid var(--lijn2); border-radius: var(--r); background: #fff; transition: border-color .15s; }
.mz-veld:focus-within { border-color: var(--inkt); }
.mz-veld input { width: 72px; height: 100%; padding: 0 12px; border: 0; background: none; font-variant-numeric: tabular-nums; }
.mz-x, .mz-mm { font-size: 14px; color: var(--sub); }
.mz-mm { margin-right: 4px; }
.mz-soort select { width: 188px; height: 100%; padding: 0 28px 0 12px; border: 0; background: none; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2359625b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.mz-veel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-left: auto; font-size: 13px; color: var(--sub); }
.mz-veel a { color: var(--inkt); font-size: 14px; text-decoration: underline; text-decoration-color: var(--lijn2); text-underline-offset: 4px; text-decoration-thickness: 1px; white-space: nowrap; }
.mz-veel a:hover { text-decoration-color: currentColor; }

/* ---------- start: afdelingen ---------- */
.tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gat); }
.tegel { display: block; min-width: 0; }
.tegel-foto { display: block; overflow: hidden; margin-bottom: 12px; border-radius: var(--r); background: var(--vlak); }
.tegel-foto img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tegel:hover .tegel-foto img { transform: scale(1.025); }
.tegel b { display: block; font-size: 16px; line-height: 1.3; }
.tegel > span:last-child { display: block; font-size: 14px; color: var(--sub); margin-top: 2px; }
.afd-lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gat); margin-top: 48px; border-top: 1px solid var(--lijn); }
.afd-r { display: block; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.afd-r b { display: block; font-size: 15px; }
.afd-r span { display: block; font-size: 13px; color: var(--sub); }
.afd-r:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- start: 3D ---------- */
.ontw-kop { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); align-items: end; margin-bottom: 40px; }
.ontw-kop .h2 { grid-column: span 8; }
.ontw-kop .lead { grid-column: 9 / span 4; margin: 0; font-size: 15px; }
.ontw { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); align-items: stretch; }
.ontw-l { grid-column: span 4; display: flex; flex-direction: column; }
.ontw-l .knoppen { margin-top: auto; }
.ontw-r { grid-column: 5 / span 8; }
.ontw-tabs { border-top: 1px solid var(--lijn2); margin-bottom: 24px; }
.ontw-tab { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--lijn2); background: none; text-align: left; transition: box-shadow .15s; }
.ontw-tab b { font-size: 15px; font-weight: 400; }
.ontw-tab span { grid-row: 2; font-size: 13px; color: var(--sub); }
.ontw-tab em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ontw-tab:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ontw-tab.aan { box-shadow: inset 0 -1.5px 0 var(--inkt); }
.ontw-tab.aan b, .ontw-tab.aan em { font-weight: 500; }
.scherm-paneel { display: none; }
.scherm-paneel.aan { display: block; }
.scherm { position: relative; overflow: hidden; border-radius: var(--r); background: #e8e8e4; }
.scherm img { width: 100%; height: auto; }

/* ---------- houtlijst ---------- */
.subs { display: flex; flex-wrap: wrap; gap: 0 24px; border-bottom: 1px solid var(--lijn); }
.sub { margin-bottom: -1px; padding: 4px 0 12px; border-bottom: 1.5px solid transparent; font-size: 14px; color: var(--sub); white-space: nowrap; transition: color .15s; }
.sub small { color: var(--zacht); }
.sub:hover { color: var(--inkt); }
.sub.aan { color: var(--inkt); font-weight: 500; border-color: var(--inkt); }
.sub.aan small { font-weight: 400; }
.hl-rij { display: grid; grid-template-columns: 56px minmax(0, 4fr) minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1.3fr) minmax(0, 1.5fr) 96px; column-gap: var(--gat); align-items: center; padding: 8px 0; border-bottom: 1px solid var(--lijn); transition: background .15s; }
a.hl-rij:hover { background: var(--vlak); box-shadow: -12px 0 0 var(--vlak), 12px 0 0 var(--vlak); }
.hl-rij img { width: 56px; height: 44px; object-fit: cover; border-radius: 2px; background: var(--tegel); }
.hl-rij img.vrij { object-fit: contain; padding: 3px; }
.hl-kopr { padding: 12px 0 8px; font-size: 13px; color: var(--sub); }
.hl-naam b { display: block; font-size: 15px; }
.hl-naam span { display: block; font-size: 13px; color: var(--sub); }
.hl-maat { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hl-maat small { color: var(--sub); }
.hl-len { font-size: 14px; color: var(--sub); }
.hl-pm { text-align: right; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hl-kopr .hl-pm { font-size: 13px; font-weight: 400; }
.hl-pm small { display: block; font-size: 13px; font-weight: 400; color: var(--sub); }
.naar { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 14px; white-space: nowrap; }
.hl-voet { margin-top: 12px; font-size: 13px; color: var(--sub); }
.vr { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--inkt); }
.vr i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--stip); }
.vr.lev { color: var(--sub); }
.vr.lev i { background: none; box-shadow: inset 0 0 0 1px var(--zacht); }

/* ---------- houtsoorten ---------- */
.soorten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gat); }
.soorten.drie3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.soort { display: block; min-width: 0; }
.soort img { width: 100%; aspect-ratio: 3/2; object-fit: cover; margin-bottom: 12px; border-radius: var(--r); background: var(--tegel); }
.soort h3 { font-size: 15px; }
.soort:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.van { font-size: 13px; color: var(--sub); }
.van b { color: var(--inkt); }
.soort p { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--sub); }
.soort .meer { margin-top: 8px; }

/* ---------- diensten ---------- */
.dienst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gat); }
.dienst .h3 { margin-bottom: 12px; }
.dienst p { color: var(--sub); margin-bottom: 12px; max-width: 42ch; }
.lijstje a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--lijn2); font-size: 14px; }
.lijstje small { display: block; color: var(--sub); }
.lijstje a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tarieven { margin-bottom: 12px; }
.tarieven li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--lijn2); font-size: 14px; }
.tarieven b { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- balie ---------- */
.balie { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); align-items: center; }
.balie-foto { grid-column: span 8; }
.balie-foto img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--r); }
.balie-t { grid-column: 9 / span 4; }
.feiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px var(--gat); margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--lijn); }
.feit b { display: block; font-size: 28px; line-height: 1.2; letter-spacing: -.018em; font-variant-numeric: tabular-nums; }
.feit span { display: block; font-size: 13px; color: var(--sub); }
.balie-uren { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 24px 0 16px; padding-top: 16px; border-top: 1px solid var(--lijn); font-size: 13px; color: var(--sub); }

/* ---------- kennis ---------- */
.kennis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--gat); }
.art { display: block; min-width: 0; }
.art img { width: 100%; aspect-ratio: 3/2; object-fit: cover; margin-bottom: 12px; border-radius: var(--r); background: var(--tegel); }
.rub { display: block; font-size: 13px; color: var(--sub); }
.art h3 { margin-top: 2px; font-size: 16px; line-height: 1.3; text-wrap: balance; }
.art:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.art p { margin-top: 6px; font-size: 14px; color: var(--sub); }

/* ---------- afdelingskop ---------- */
.hub-kop { position: relative; overflow: hidden; background: var(--bos); color: #fff; }
.hub-kop > img { width: 100%; height: clamp(300px, 30vw, 440px); object-fit: cover; }
.hub-kop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,16,12,.72) 0%, rgba(9,16,12,.46) 36%, rgba(9,16,12,0) 66%); }
.hub-kop > .w { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; padding-bottom: 40px; }
.hub-t { max-width: 620px; }
.hub-t h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.022em; text-wrap: balance; }
.hub-t p { margin-top: 12px; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.9); }
.hub-t .knoppen { margin-top: 20px; }
.soortrooster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--gat); }
.st { display: block; min-width: 0; }
.st img { width: 100%; aspect-ratio: 3/2; object-fit: cover; margin-bottom: 10px; border-radius: var(--r); background: var(--tegel); }
.st img.vrij { object-fit: contain; padding: 6%; }
.st b { display: block; font-size: 15px; line-height: 1.35; }
.st:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.st span { display: block; font-size: 13px; color: var(--sub); }

/* ---------- categorie ---------- */
.cat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); padding-top: 32px; padding-bottom: var(--sec); }
.filters { grid-column: span 3; padding-right: 32px; }
.cat-r { grid-column: span 9; min-width: 0; }
.fgroep { padding: 16px 0; border-bottom: 1px solid var(--lijn); }
.fgroep:first-child { padding-top: 6px; }
.fgroep h4 { margin-bottom: 8px; font-size: 14px; }
.vink { display: flex; align-items: flex-start; gap: 10px; padding: 3px 0; font-size: 14px; cursor: pointer; }
.vink input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; border: 1px solid var(--lijn2); border-radius: 2px; background: #fff; -webkit-appearance: none; appearance: none; cursor: pointer; }
.vink input:checked { border-color: var(--inkt); background: var(--inkt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 18 19 7'/%3E%3C/svg%3E") center no-repeat; }
.vink span { flex: 1; min-width: 0; }
.vink small { color: var(--zacht); }
.vink-meer { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 0; border: 0; background: none; font-size: 13px; color: var(--sub); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.balk { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; min-height: 32px; margin-bottom: 20px; }
.balk-l { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--sub); }
.balk-l b { color: var(--inkt); }
.filterknop { display: none; }
.balk-r { display: flex; align-items: center; gap: 24px; }
.wissel { display: flex; gap: 16px; }
.wissel button { padding: 0; border: 0; background: none; font-size: 14px; color: var(--sub); }
.wissel button.aan { color: var(--inkt); font-weight: 500; }
.kies { height: 32px; padding: 0 22px 0 0; border: 0; background: none; font-size: 14px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2359625b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; cursor: pointer; }
.kaarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gat); }
.kaarten.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pk, .banner { display: grid; grid-row: span 5; grid-template-rows: subgrid; min-width: 0; margin-bottom: 40px; }
.pk-foto { display: block; overflow: hidden; aspect-ratio: 4/3; margin-bottom: 12px; border-radius: var(--r); background: var(--tegel); }
.pk-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.pk-foto img.vrij { object-fit: contain; padding: 7%; }
.pk:hover .pk-foto img, .banner:hover .pk-foto img { transform: scale(1.025); }
.pk-naam { font-size: 15px; line-height: 1.35; }
.pk-naam a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pk-maat { margin-top: 2px; font-size: 13px; color: var(--sub); }
.pk-prijs { margin-top: 8px; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pk-prijs small { font-weight: 400; color: var(--sub); }
.pk-vr { margin-top: 2px; }
.banner b { font-size: 15px; line-height: 1.35; }
.banner p { grid-row: span 3; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--sub); }
.banner:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.laadmeer { display: grid; justify-items: center; gap: 10px; margin-top: 16px; font-size: 13px; color: var(--sub); }
.balkje { width: 160px; height: 1px; background: var(--lijn2); }
.balkje i { display: block; height: 1px; background: var(--inkt); }
.laadmeer .knop { margin-top: 6px; }
.lees { padding-bottom: 0; }
.zoekkop { padding: 32px 0 8px; }
.ook { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 16px; font-size: 13px; color: var(--sub); align-items: baseline; }
.ook a { font-size: 14px; color: var(--inkt); text-decoration: underline; text-decoration-color: var(--lijn2); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.rijkaart { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; margin-top: 24px; padding: 24px; border-radius: var(--r); background: var(--vlak); }
.rijkaart b { font-size: 15px; }
.rijkaart p { font-size: 14px; color: var(--sub); }

/* ---------- productpagina ---------- */
.pdp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gat); padding-top: 8px; padding-bottom: var(--sec); }
.galerij { grid-column: 1 / span 7; grid-row: 1; min-width: 0; }
.pdp-inhoud { grid-column: 1 / span 7; grid-row: 2; min-width: 0; margin-top: 48px; }
.koop { grid-column: 8 / span 5; grid-row: 1 / span 2; align-self: start; position: sticky; top: 88px; min-width: 0; padding-left: 32px; }
.koop.lang { position: static; }
.hoofdfoto { position: relative; overflow: hidden; aspect-ratio: 4/3; border-radius: var(--r); background: var(--tegel); }
.hoofdfoto img { width: 100%; height: 100%; object-fit: cover; }
.hoofdfoto img.vrij { object-fit: contain; padding: 7%; }
.hf-3d { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--r); background: #fff; font-size: 13px; font-weight: 500; }
.hf-3d:hover { background: var(--vlak); }
.duimen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.duim { overflow: hidden; aspect-ratio: 1/1; padding: 0; border: 0; border-radius: 2px; background: var(--tegel); box-shadow: inset 0 0 0 0 var(--inkt); position: relative; }
.duim img { width: 100%; height: 100%; object-fit: cover; }
.duim img.vrij { object-fit: contain; padding: 8%; }
.duim::after { content: ""; position: absolute; inset: 0; border-radius: 2px; box-shadow: inset 0 0 0 0 var(--inkt); transition: box-shadow .15s; }
.duim:hover::after { box-shadow: inset 0 0 0 1px var(--lijn2); }
.duim.aan::after { box-shadow: inset 0 0 0 1.5px var(--inkt); }
.koop h1 { font-size: 28px; line-height: 1.15; letter-spacing: -.018em; text-wrap: balance; }
.pdp-meta { margin-top: 6px; font-size: 14px; color: var(--sub); }
.koop-prijs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 20px; }
.koop-prijs b { font-size: 28px; line-height: 1.15; letter-spacing: -.018em; font-variant-numeric: tabular-nums; }
.koop-prijs span { font-size: 14px; color: var(--sub); }
.koop-prijs .m2 { margin-left: 8px; padding-left: 16px; border-left: 1px solid var(--lijn2); white-space: nowrap; }
.koop-voorraad { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.legenda { position: relative; display: inline-flex; }
.legenda > button { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; }
.vraagje { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--lijn2); border-radius: 50%; font-size: 13px; line-height: 1; color: var(--sub); }
.pop { position: absolute; left: 0; top: calc(100% + 8px); z-index: 5; display: none; width: 280px; padding: 14px 16px; border: 1px solid var(--lijn); border-radius: var(--r); background: #fff; box-shadow: 0 16px 32px -16px rgba(17,37,27,.25); font-size: 13px; }
.legenda.open .pop { display: block; }
.pop li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.pop ul { margin: 6px 0; }
.pop p { color: var(--sub); }
.lengtes { margin-top: 20px; border-top: 1px solid var(--lijn); }
.lr { display: grid; grid-template-columns: 64px minmax(0, .9fr) minmax(0, 1.1fr) 108px; column-gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--lijn); transition: background .3s; }
.lr > b { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lr .p b { font-variant-numeric: tabular-nums; }
.lr.licht { background: var(--vlak); }
.lr-k { padding: 8px 0 6px; font-size: 13px; color: var(--sub); }
.teller { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; height: 36px; border: 1px solid var(--lijn2); border-radius: var(--r); background: #fff; }
.teller button { padding: 0; border: 0; background: none; color: var(--sub); font-size: 16px; line-height: 1; }
.teller button:hover { color: var(--inkt); }
.teller input { width: 100%; min-width: 0; padding: 0; border: 0; background: none; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.rekenhulp { border-bottom: 1px solid var(--lijn); }
.rekenhulp summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; }
.rekenhulp summary::-webkit-details-marker { display: none; }
.rekenhulp summary svg { color: var(--sub); transition: transform .15s; }
.rekenhulp[open] summary svg { transform: rotate(180deg); }
.reken { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; }
.reken label { display: inline-flex; align-items: center; flex: 1; min-width: 0; height: 44px; padding-right: 10px; border: 1px solid var(--lijn2); border-radius: var(--r); }
.reken input { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0 0 0 12px; border: 0; background: none; font-variant-numeric: tabular-nums; }
.reken em { font-size: 13px; color: var(--sub); }
.reken-uit { display: none; padding-bottom: 12px; font-size: 13px; color: var(--sub); }
.reken-uit.aan { display: block; }
.totaal { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; }
.totaal span { display: block; font-size: 13px; color: var(--sub); }
.totaal div > b { display: block; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.totaal .knop { flex: 1; max-width: 300px; }
.totaal .knop span { display: inline; font-size: inherit; color: inherit; }
.op-maat { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; margin-top: 14px; font-size: 13px; color: var(--sub); }
.op-maat .meer { font-size: 13px; color: var(--inkt); }
.krijgen { margin-top: 14px; border-top: 1px solid var(--lijn); }
.krijgen li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--lijn); font-size: 13px; }
.krijgen b { font-size: 14px; }
.krijgen span { grid-row: 2; color: var(--sub); }
.krijgen em { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; color: var(--inkt); }
.pdp-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; padding-bottom: 12px; border-bottom: 1px solid var(--lijn); }
.pdp-nav a { font-size: 14px; color: var(--sub); }
.pdp-nav a:hover, .pdp-nav a.aan { color: var(--inkt); }
.pdp-nav a.aan { font-weight: 500; }
.pdp-sec { padding-block: 40px; border-bottom: 1px solid var(--lijn); }
.pdp-sec:last-child { border-bottom: 0; padding-bottom: 0; }
.pdp-sec h2 { margin-bottom: 14px; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.pdp-zin { margin: -8px 0 16px; color: var(--sub); }
.pdp-zin .meer { color: var(--inkt); }
.leestekst { font-size: 15px; line-height: 1.65; max-width: 66ch; }
.leestekst p + p { margin-top: 12px; }
.goed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--gat); margin-top: 20px; font-size: 14px; }
.goed li { display: flex; gap: 8px; }
.goed i { flex: none; width: 12px; font-style: normal; color: var(--groen); font-weight: 500; }
.goed i.min { color: var(--zacht); }
.tip { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 24px; padding: 16px; border-radius: var(--r); background: var(--vlak); font-size: 14px; }
.tip img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.tip a { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.compleet { border-top: 1px solid var(--lijn); }
.cr { display: grid; grid-template-columns: 16px 48px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--lijn); cursor: pointer; }
.cr input { width: 16px; height: 16px; margin: 0; border: 1px solid var(--lijn2); border-radius: 2px; background: #fff; -webkit-appearance: none; appearance: none; cursor: pointer; }
.cr input:checked { border-color: var(--inkt); background: var(--inkt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 18 19 7'/%3E%3C/svg%3E") center no-repeat; }
.cr img { width: 48px; height: 40px; object-fit: cover; border-radius: 2px; background: var(--tegel); }
.cr img.vrij { object-fit: contain; padding: 2px; }
.cr small { display: block; color: var(--sub); }
.cr b { display: block; font-size: 14px; line-height: 1.35; }
.cr span { display: block; font-size: 13px; color: var(--sub); }
.cr em { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--sub); }
.cr-voet b { font-size: 15px; color: var(--inkt); font-variant-numeric: tabular-nums; }
.verg { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.verg th, .verg td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: top; font-weight: 400; overflow-wrap: anywhere; }
.verg tbody th { color: var(--sub); }
.verg thead th { font-weight: 500; }
.verg thead small { display: block; font-weight: 400; color: var(--sub); }
.verg td.deze b { font-weight: 500; }
.specs { width: 100%; border-collapse: collapse; font-size: 14px; }
.specs th, .specs td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: top; font-weight: 400; }
.specs tr:first-child th, .specs tr:first-child td { border-top: 1px solid var(--lijn); }
.specs th { width: 42%; color: var(--sub); }
.plattegrond { overflow: hidden; max-width: 460px; margin-bottom: 20px; border-radius: var(--r); background: var(--tegel); }
.plattegrond img { width: 100%; aspect-ratio: 4/3; object-fit: contain; padding: 4%; }
.feitjes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px var(--gat); margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--lijn); }
.feitjes span { display: block; font-size: 13px; color: var(--sub); }
.feitjes b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.samen-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--inkt); }
.samen-kop > b { font-size: 16px; }
.samen-kop span { font-size: 14px; color: var(--sub); }
.samen-kop span b { color: var(--inkt); font-variant-numeric: tabular-nums; }
.stap { border-bottom: 1px solid var(--lijn); }
.stap > button { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; column-gap: 12px; align-items: center; width: 100%; padding: 10px 0; border: 0; background: none; text-align: left; }
.stap > button b { display: block; font-size: 14px; }
.stap > button small { display: block; color: var(--sub); }
.stap > button svg { color: var(--sub); transition: transform .15s; }
.stap.open > button svg { transform: rotate(180deg); }
.stap-bedrag { font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stap-in { display: none; padding-bottom: 12px; }
.stap.open .stap-in { display: block; }
.stap-tip { margin-top: 8px; font-size: 13px; color: var(--sub); }
.stalen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.staal { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px 4px 4px; border: 1px solid var(--lijn); border-radius: var(--r); background: #fff; font-size: 13px; text-align: left; }
.staal i { flex: none; width: 30px; height: 30px; border-radius: 2px; }
.staal.aan, .keuze.aan { border-color: var(--inkt); box-shadow: inset 0 0 0 .5px var(--inkt); }
.keuze { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; width: 100%; margin-top: 6px; padding: 8px 12px; border: 1px solid var(--lijn); border-radius: var(--r); background: #fff; text-align: left; }
.keuze:first-child { margin-top: 0; }
.keuze:hover { border-color: var(--lijn2); }
.keuze b { font-size: 14px; }
.keuze small { grid-row: 2; color: var(--sub); }
.keuze em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jouw { margin-top: 24px; padding: 16px; border-radius: var(--r); background: var(--vlak); }
.jouw-t { font-size: 14px; }
.jouw li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; color: var(--sub); }
.jouw li b { color: var(--inkt); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jouw ul { margin-top: 6px; }
.klein-rij { margin-top: 12px; }
.klein-rij .meer { font-size: 13px; }
.plakbalk { display: none; }

/* ---------- winkelwagen en afrekenen ---------- */
.stappen { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 24px 0 8px; font-size: 13px; color: var(--sub); }
.stappen li { display: inline-flex; align-items: center; gap: 6px; }
.stappen i { font-style: normal; }
.stappen .nu { color: var(--inkt); font-weight: 500; }
.stappen .klaar { color: var(--inkt); }
.wagen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gat); align-items: start; padding-bottom: var(--sec); }
.wagen-l { grid-column: span 8; min-width: 0; }
.wagen-r { grid-column: 9 / span 4; grid-row: 1 / span 2; position: sticky; top: 88px; min-width: 0; }
.wgroep-k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding-bottom: 10px; border-bottom: 1px solid var(--lijn); font-size: 13px; color: var(--sub); }
.wgroep-k b { font-size: 14px; color: var(--inkt); display: inline-flex; align-items: center; gap: 0; }
.wr { display: grid; grid-template-columns: 64px minmax(0, 1fr) 108px 120px 24px; column-gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.wr img { width: 64px; height: 52px; object-fit: cover; border-radius: 2px; background: var(--tegel); }
.wr img.vrij { object-fit: contain; padding: 3px; }
.wr b { display: block; font-size: 14px; line-height: 1.35; }
.wr span { display: block; font-size: 13px; color: var(--sub); }
.wr .zaag { display: inline-flex; align-items: center; gap: 6px; color: var(--inkt); }
.som { text-align: right; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.som small { display: block; font-weight: 400; color: var(--sub); }
.weg { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--zacht); }
.weg:hover { color: var(--inkt); }
.zaagkaart { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; padding: 16px; border-radius: var(--r); background: var(--vlak); }
.zaagkaart b { font-size: 14px; }
.zaagkaart p { font-size: 13px; color: var(--sub); max-width: 58ch; }
.overzicht { padding: 24px; border-radius: var(--r); background: var(--vlak); }
.overzicht h2 { margin-bottom: 12px; font-size: 16px; }
.ov { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; }
.keuzes + .ov { margin-top: 12px; }
.ov b { font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov.tot { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--lijn2); font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.ov.tot b { font-weight: 500; }
.ov.klein { padding-top: 0; font-size: 13px; color: var(--sub); }
.ov-kop { margin: 14px 0 6px; font-size: 14px; font-weight: 500; }
.ov-lijn { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--lijn2); }
.keuzes, .betaalw { display: grid; gap: 6px; }
.radio { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--lijn2); border-radius: var(--r); background: #fff; cursor: pointer; }
.radio:has(input:checked) { border-color: var(--inkt); box-shadow: inset 0 0 0 .5px var(--inkt); }
.radio input, .knopkeuze input { width: 16px; height: 16px; margin: 0; accent-color: var(--inkt); }
.radio b { display: block; font-size: 14px; }
.radio small { display: block; color: var(--sub); }
.radio em { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.overzicht .knop.groot { margin-top: 16px; }
.overzicht .meer { margin-top: 12px; }
.zeker { margin-top: 16px; }
.zeker li { display: flex; gap: 8px; padding: 2px 0; font-size: 13px; color: var(--inkt); }
.zeker svg { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--stip); }
.vaak { grid-column: span 8; margin-top: 48px; min-width: 0; }
.vaak .h3 { margin-bottom: 20px; }
.mini { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 6px 0; }
.mini img { width: 44px; height: 36px; object-fit: cover; border-radius: 2px; background: #fff; }
.mini img.vrij { object-fit: contain; padding: 2px; }
.mini b { display: block; font-size: 13px; line-height: 1.35; }
.mini span { display: block; font-size: 13px; color: var(--sub); }
.mini em { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vak { padding-block: 32px; border-top: 1px solid var(--lijn); }
.vak:first-child { border-top: 0; padding-top: 8px; }
.vak h2 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-bottom: 16px; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.vak h2 small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--sub); }
.vak h2 .meer { font-size: 13px; }
.vak-kop { margin: 20px 0 8px; font-size: 14px; font-weight: 500; }
.vak-kop small { font-weight: 400; color: var(--sub); }
.knopkeuze { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.knopkeuze label { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--lijn2); border-radius: var(--r); font-size: 14px; cursor: pointer; }
.knopkeuze label:has(input:checked) { border-color: var(--inkt); box-shadow: inset 0 0 0 .5px var(--inkt); }
.velden { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.veld { display: block; min-width: 0; }
.v2 { grid-column: span 2; }
.v3 { grid-column: span 3; }
.v6 { grid-column: span 6; }
.veld > span { display: block; margin-bottom: 4px; font-size: 13px; color: var(--inkt); }
.veld > span small { color: var(--sub); }
.veld input, .veld textarea, .zl-art { display: block; width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--lijn2); border-radius: var(--r); background: #fff; transition: border-color .15s; }
.veld textarea { height: 104px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.veld input:focus, .veld textarea:focus, .zl-art:focus { border-color: var(--inkt); }
textarea.zl-art { height: 150px; padding: 10px 12px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.gevonden { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--sub); }
.gevonden svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--stip); }
.gevonden b { color: var(--inkt); }
.gevonden .meer { font-size: 13px; color: var(--inkt); }
.dagen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dag { padding: 8px 6px; border: 1px solid var(--lijn2); border-radius: var(--r); background: #fff; font-size: 13px; line-height: 1.35; color: var(--sub); text-align: center; }
.dag b { display: block; font-size: 14px; color: var(--inkt); }
.dag.aan { border-color: var(--inkt); box-shadow: inset 0 0 0 .5px var(--inkt); color: var(--inkt); }
.tussen { margin-top: 20px; }
.vak .vink { margin-top: 16px; }
.vak .vink .meer { font-size: 14px; }
.bedankt { max-width: 680px; margin-inline: auto; padding-block: var(--sec-s) var(--sec); }
.vinkrond { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 50%; background: var(--groen); color: #fff; }
.vinkrond svg { width: 22px; height: 22px; }
.tijdlijn { margin-top: 32px; border-top: 1px solid var(--lijn); }
.tijdlijn li { padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.tijdlijn b { display: block; font-size: 14px; }
.tijdlijn span { display: block; font-size: 14px; color: var(--sub); }
.tijdlijn .klaar b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--stip); vertical-align: 2px; }
.acc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); padding-bottom: var(--sec); }
.acc-nav { grid-column: span 3; padding-right: 32px; }
.acc > div { grid-column: span 9; min-width: 0; }
.acc-nav a { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--sub); }
.acc-nav a svg { width: 18px; height: 18px; }
.acc-nav a:hover, .acc-nav a.aan { color: var(--inkt); }
.acc-nav a.aan { font-weight: 500; }
.acc-nav b { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--sub); }
.acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gat); }
.acc-grid .vak { border-top: 1px solid var(--lijn); }
.status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.status span { height: 2px; background: var(--lijn); }
.status .klaar { background: var(--groen); }
.status-t { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 6px; font-size: 13px; color: var(--sub); }
.vak-zin { margin-top: 12px; font-size: 14px; color: var(--sub); }
.ontwerpje { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.ontwerpje img { width: 96px; height: 64px; object-fit: cover; border-radius: 2px; }
.ontwerpje b { display: block; font-size: 14px; }
.ontwerpje span { display: block; font-size: 13px; color: var(--sub); }
.ontwerpje .meer { margin-top: 2px; font-size: 13px; }
.order { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.order > div:first-child b { display: block; font-size: 14px; }
.order > div:first-child span { display: block; font-size: 13px; color: var(--sub); }
.order-r { display: flex; align-items: center; gap: 12px; font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---------- service en inhoud ---------- */
.twee-kol { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); align-items: start; }
.hoofd { grid-column: span 8; min-width: 0; }
.zij { grid-column: 10 / span 3; min-width: 0; }
.onder-ruim { padding-bottom: var(--sec); }
.kaartje { display: block; padding: 24px; border-radius: var(--r); background: var(--vlak); min-width: 0; }
.kaartje h3 { font-size: 16px; line-height: 1.3; }
.kaartje p { font-size: 14px; color: var(--sub); }
.kaartje svg { color: var(--sub); }
a.kaartje:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.zl-art { margin-top: 8px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2359625b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
textarea.zl-art { background-image: none; }
.zl-rij { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--sub); }
.zl-rij input { width: 72px; height: 40px; padding: 0 10px; border: 1px solid var(--lijn2); border-radius: var(--r); background: #fff; color: var(--inkt); font-variant-numeric: tabular-nums; }
.zl-uit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px var(--gat); margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--lijn2); }
.zl-uit span { display: block; font-size: 13px; color: var(--sub); }
.zl-uit b { display: block; font-size: 20px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zl-voet { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; font-size: 13px; color: var(--sub); }
.vakkaart { padding: 20px; border-radius: var(--r); background: var(--vlak); font-size: 14px; }
.vakkaart img { width: 44px; height: 44px; margin-bottom: 10px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.vakkaart b { display: block; font-size: 15px; }
.vakkaart p { margin-top: 4px; color: var(--sub); }
.vakkaart .knoppen { margin-top: 12px; }
.uren { font-size: 14px; }
.uren-k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--lijn); }
.uren-k b { font-size: 14px; }
.uren-k .nuopen { font-size: 13px; }
.uren dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.uren dt, .uren dd { padding: 6px 0; border-bottom: 1px solid var(--lijn); font-variant-numeric: tabular-nums; }
.uren dt { color: var(--sub); }
.uren .vandaag { color: var(--inkt); font-weight: 500; }
.uren-los { margin-top: 24px; }
.vier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px var(--gat); counter-reset: st; }
.punt { min-width: 0; padding-top: 12px; border-top: 1px solid var(--lijn2); }
.punt .ic { display: none; }
.punt b { display: block; font-size: 15px; }
.punt p { margin-top: 2px; font-size: 14px; color: var(--sub); }
.stapnr .punt { counter-increment: st; }
.stapnr .punt .ic { display: block; font-size: 13px; color: var(--sub); margin-bottom: 4px; }
.stapnr .punt .ic::before { content: counter(st); }
.faq { border-top: 1px solid var(--lijn); }
.faq details { border-bottom: 1px solid var(--lijn); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 16px; height: 16px; color: var(--sub); transition: transform .15s; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq p { padding-bottom: 12px; font-size: 14px; color: var(--sub); max-width: 66ch; }
.ontw-rij { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); align-items: center; padding-block: 48px; border-top: 1px solid var(--lijn); }
.ontw-rij:first-child { border-top: 0; padding-top: 16px; }
.ontw-rij > .scherm { grid-column: span 7; }
.ontw-rij > div:last-child { grid-column: 9 / span 4; }
.ontw-rij.om > .scherm { grid-column: 6 / span 7; order: 2; }
.ontw-rij.om > div:last-child { grid-column: 1 / span 4; }
.ontw-rij .lead { font-size: 15px; }
.ontw-rij ul { margin-top: 12px; }
.ontw-rij li { display: flex; gap: 8px; padding: 2px 0; font-size: 14px; color: var(--sub); }
.ontw-rij li svg { flex: none; width: 14px; height: 14px; margin-top: 4px; color: var(--stip); }
.ontw-prijs { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; margin: 16px 0; padding: 10px 0; border-block: 1px solid var(--lijn); font-size: 13px; color: var(--sub); }
.ontw-prijs b { font-size: 20px; letter-spacing: -.01em; color: var(--inkt); font-variant-numeric: tabular-nums; }
.blijft { display: flex; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--sub); }
.blijft svg { flex: none; margin-top: 4px; color: var(--stip); }
.artikel { font-size: 16px; line-height: 1.65; max-width: 68ch; }
.artikel h2 { margin: 40px 0 8px; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; scroll-margin-top: 88px; }
.artikel h3 { margin: 24px 0 4px; font-size: 16px; line-height: 1.3; }
.artikel p + p { margin-top: 12px; }
.bol { margin: 12px 0; }
.bol li { position: relative; padding-left: 16px; margin-top: 4px; }
.bol li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 1px; background: var(--sub); }
.groot-beeld { width: 100%; object-fit: cover; border-radius: var(--r); }
.door { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 20px; font-size: 13px; color: var(--sub); }
.door img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.door b { display: block; font-size: 14px; color: var(--inkt); }
.artikel-kop { max-width: 900px; }
.artikel-body { padding-block: 56px 24px; }
.materiaal { margin-top: 12px; border-top: 1px solid var(--lijn); font-size: 14px; line-height: 1.45; }
.materiaal li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--lijn); }
.materiaal img { width: 52px; height: 40px; object-fit: cover; border-radius: 2px; background: var(--tegel); }
.materiaal img.vrij { object-fit: contain; padding: 2px; }
.materiaal em { font-variant-numeric: tabular-nums; white-space: nowrap; }
.materiaal-voet { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.materiaal-voet b { font-size: 20px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.materiaal-voet span { font-size: 13px; color: var(--sub); }
.artikel .vakkaart { margin-top: 48px; }
.inhoud { position: sticky; top: 88px; font-size: 14px; }
.inhoud-t { display: block; margin-bottom: 8px; font-size: 14px; }
.inhoud > a:not(.naar3d) { display: block; padding: 4px 0; color: var(--sub); }
.inhoud > a:not(.naar3d):hover, .inhoud > a.aan { color: var(--inkt); }
.inhoud > a.aan { font-weight: 500; }
.naar3d { display: block; margin-top: 24px; font-size: 13px; }
.naar3d img { width: 100%; aspect-ratio: 16/10; object-fit: cover; margin-bottom: 8px; border-radius: var(--r); background: var(--vlak); }
.naar3d b { display: block; font-size: 14px; }
.naar3d span { display: block; color: var(--sub); }
.naar3d:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.uploader { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px dashed var(--lijn2); border-radius: var(--r); font-size: 13px; color: var(--sub); cursor: pointer; }
.uploader svg { flex: none; }
.uploader b { display: block; font-size: 14px; color: var(--inkt); }
.kaart-route img { width: 100%; aspect-ratio: 16/7; object-fit: cover; border-radius: var(--r); }
.kaart-route > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; font-size: 14px; }
.kaart-route span span { color: var(--sub); font-size: 14px; }
.noot { margin-top: 10px; font-size: 13px; color: var(--sub); }
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; border-top: 1px solid var(--lijn); }
.tabel th, .tabel td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--lijn); text-align: left; font-weight: 400; vertical-align: top; }
.tabel th { font-weight: 500; }
.tabel td { color: var(--sub); }
.tabel td:last-child { padding-right: 0; text-align: right; color: var(--inkt); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bezorg-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gat); }
.bezorg-twee img { width: 100%; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 12px; border-radius: var(--r); }
.bezorg-twee p { margin-top: 4px; color: var(--sub); max-width: 54ch; }
.bezorg-twee b { display: block; margin-top: 8px; font-size: 15px; }
.h2-los { margin-top: 48px; margin-bottom: 16px; }
.h2-kort { margin-bottom: 16px; }

/* ---------- breedtes ---------- */
@media (max-width: 1280px) {
  :root { --gut: 32px; }
  .str-adres { display: none; }
  .menu { gap: 18px; }
  .kop-r { gap: 24px; }
  .held h1 { font-size: 44px; }
  .mz-veel { margin-left: 0; width: 100%; }
  .koop { padding-left: 16px; }
}
@media (max-width: 1180px) {
  :root { --sec: 72px; }
  .zoek { flex-basis: 180px; }
  .filters { padding-right: 16px; }
  .kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zij { grid-column: 9 / span 4; }
}
@media (max-width: 1024px) {
  :root { --gut: 24px; --sec: 64px; --sec-s: 48px; }
  .strook-r { display: none; }
  .strook .w { justify-content: flex-start; }
  .kop-r { height: 60px; gap: 12px; }
  .menuknop { display: grid; place-items: center; width: 40px; height: 44px; margin-left: -8px; }
  .menu, .kop-r > .zoek { display: none; }
  .logo img { height: 34px; }
  .acties { margin-left: auto; gap: 12px; }
  .zoek-tel { display: flex; flex: none; width: calc(100% - 2 * var(--gut)); max-width: none; height: 44px; margin: 12px auto 0; }
  .mega { display: none !important; }
  .h1, .pkop h1, .hub-t h1 { font-size: 36px; }
  .tegels, .soorten, .soortrooster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ontw-kop { display: block; }
  .ontw-kop .lead { margin-top: 12px; }
  .ontw { display: flex; flex-direction: column-reverse; gap: 24px; }
  .ontw-r, .ontw-l { width: 100%; }
  .balie { display: block; }
  .balie-t { margin-top: 24px; }
  .voet-kol { row-gap: 32px; }
  .voet-kol > div { grid-column: span 3; }
  .voet-merk { grid-column: span 12 !important; }
  .hl-rij { grid-template-columns: 56px minmax(0, 1fr) auto auto; row-gap: 2px; }
  .hl-kopr { display: none; }
  .hl-rij img { grid-row: span 2; }
  .hl-naam { grid-column: 2; }
  .hl-maat { grid-column: 3; grid-row: 1; }
  .hl-pm { grid-column: 4; grid-row: 1 / span 2; }
  .hl-len { grid-column: 2; grid-row: 2; }
  .vr-c { grid-column: 3; grid-row: 2; }
  .naar { display: none; }
  .cat { display: block; padding-top: 24px; }
  .filterknop { display: inline-flex; }
  .filters { display: none; padding: 0 0 16px; }
  .filters.open { display: block; }
  .balk { position: relative; }
  .pdp { display: block; }
  .koop { position: static; margin-top: 24px; padding-left: 0; }
  .wagen { display: block; }
  .wagen-r { position: static; margin-top: 32px; }
  .acc { display: block; }
  .acc-nav { display: flex; flex-wrap: wrap; gap: 0 20px; margin-bottom: 16px; padding-right: 0; }
  .acc-nav a svg { display: none; }
  .acc-nav b { margin-left: 2px; }
  .twee-kol { display: block; }
  .zij { margin-top: 32px; }
  .inhoud { position: static; }
  .ontw-rij, .ontw-rij.om { display: block; }
  .ontw-rij > div:last-child { margin-top: 20px; }
  .heeft-plakbalk .voet-onder { padding-bottom: 120px; }
  .heeft-plakbalk .mkbalk { display: none; }
  .plakbalk { position: fixed; z-index: 44; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px var(--gut); background: #fff; border-top: 1px solid var(--lijn); }
  .plakbalk span { display: block; font-size: 13px; color: var(--sub); }
  .plakbalk b { display: block; font-size: 18px; line-height: 1.2; letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
  .plakbalk .knop span { display: inline; font-size: inherit; color: inherit; }
}
@media (max-width: 760px) {
  :root { --gut: 16px; --gat: 12px; --sec: 56px; --sec-s: 40px; }
  html { scroll-padding-top: 72px; }
  .strook { display: none; }
  .kop-r { height: 56px; }
  .h1, .pkop h1 { font-size: 30px; }
  .h2 { font-size: 24px; }
  .skop { flex-wrap: wrap; margin-bottom: 20px; }
  .held > img { height: 440px; object-position: 62% 50%; }
  .held::after { background: linear-gradient(180deg, rgba(9,16,12,.1) 20%, rgba(9,16,12,.72) 78%); }
  .held > .w { padding-bottom: 24px; }
  .held h1 { font-size: 34px; }
  .br-g { display: none; }
  .held p { margin: 10px 0 16px; font-size: 15px; }
  .held .knop.groot { height: 44px; padding: 0 16px; font-size: 14px; }
  .maatzoeker { gap: 8px; }
  .mz-titel { width: 100%; }
  .mz-veld input { width: 60px; }
  .mz-soort { flex: 1 1 100%; order: 3; }
  .mz-soort select { width: 100%; }
  .maatzoeker > .knop { order: 4; width: 100%; }
  .mz-veel { order: 5; margin-top: 4px; }
  .tegel > span:last-child { font-size: 13px; }
  .afd-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
  .afd-r:last-child:nth-child(odd) { grid-column: span 2; }
  .ontw-tab { padding: 10px 0; }
  .dienst { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .feit b { font-size: 24px; }
  .kennis { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .art { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; }
  .art img { grid-row: span 3; aspect-ratio: 1/1; margin: 0; }
  .art h3 { font-size: 15px; }
  .art p { font-size: 13px; margin-top: 2px; }
  .soorten.drie3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vier { grid-template-columns: minmax(0, 1fr); }
  .hub-kop > img { height: 340px; }
  .hub-kop::after { background: linear-gradient(180deg, rgba(9,16,12,.1) 10%, rgba(9,16,12,.74) 72%); }
  .hub-kop > .w { padding-bottom: 20px; }
  .hub-t h1 { font-size: 30px; }
  .hub-t p { margin-top: 8px; font-size: 14px; }
  .hub-t .knoppen { margin-top: 12px; gap: 8px; }
  .hub-t .knop.groot { height: 44px; padding: 0 14px; font-size: 14px; }
  .kaarten, .kaarten.drie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk, .banner { margin-bottom: 28px; }
  .pk-naam { font-size: 14px; }
  .balk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .balk-l, .balk-r { display: contents; }
  .filterknop { grid-column: 1; grid-row: 1; justify-self: start; }
  .balk-l > span { grid-column: 1; grid-row: 2; }
  .alleen-groot { display: none; }
  .kies { grid-column: 2; grid-row: 1; justify-self: end; max-width: 100%; min-width: 0; }
  .wissel { grid-column: 2; grid-row: 2; justify-self: end; }
  .hl-rij { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 10px; }
  .hl-rij img { width: 44px; height: 36px; grid-row: span 3; }
  .hl-naam { grid-column: 2; grid-row: 1; }
  .hl-naam b { font-size: 14px; }
  .hl-maat { grid-column: 2; grid-row: 2; font-size: 13px; color: var(--sub); }
  .hl-maat small { font-size: 13px; }
  .hl-len { display: none; }
  .vr-c { grid-column: 2; grid-row: 3; }
  .hl-pm { grid-column: 3; grid-row: 1 / span 3; align-self: center; font-size: 14px; }
  .hoofdfoto { aspect-ratio: 1/1; }
  .duimen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .koop h1 { font-size: 26px; }
  .koop-prijs .m2 { margin-left: 0; padding-left: 0; border-left: 0; width: 100%; }
  .lr { grid-template-columns: 52px minmax(0, 1fr) 108px; row-gap: 0; }
  .lr-k { display: none; }
  .lr > b { grid-row: span 2; }
  .lr .p { grid-column: 2; grid-row: 1; }
  .lr .vr { grid-column: 2; grid-row: 2; }
  .lr .teller { grid-column: 3; grid-row: 1 / span 2; height: 40px; }
  .totaal .knop { max-width: none; }
  .pdp-nav { display: none; }
  .pdp-inhoud { margin-top: 32px; }
  .pdp-sec { padding-block: 32px; }
  .pdp-sec:first-of-type { padding-top: 0; }
  .goed { grid-template-columns: minmax(0, 1fr); }
  .verg { font-size: 13px; }
  .verg th, .verg td { padding-right: 8px; }
  .cr { grid-template-columns: 16px 44px minmax(0, 1fr); row-gap: 2px; }
  .cr img { width: 44px; }
  .cr em { grid-column: 3; }
  .feitjes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stalen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stappen { gap: 4px 14px; }
  .stappen li:not(.nu) span { display: none; }
  .wr { grid-template-columns: 56px minmax(0, 1fr) 24px; row-gap: 8px; column-gap: 10px; }
  .wr img { width: 56px; height: 48px; }
  .wr > div:nth-child(2) { grid-column: 2; }
  .wr .weg { grid-column: 3; grid-row: 1; align-self: start; }
  .wr .teller { grid-column: 1 / span 2; grid-row: 2; width: 108px; }
  .wr .som { grid-column: 2 / span 2; grid-row: 2; }
  .zaagkaart { flex-wrap: wrap; }
  .velden { gap: 10px; }
  .v2, .v3 { grid-column: span 6; }
  .dagen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .order { grid-template-columns: minmax(0, 1fr); }
  .order-r { justify-content: space-between; }
  .status-t { font-size: 13px; }
  .zl-uit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bezorg-twee { grid-template-columns: minmax(0, 1fr); }
  .kaart-route img { aspect-ratio: 16/10; }
  .voet-kop { flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px 0; }
  .voet-kol { padding: 32px 0; }
  .voet-kol > div { grid-column: span 6; }
  .voet-onder { flex-direction: column; align-items: flex-start; }
  .mkbalk span { display: none; }
  .mkbalk a { padding: 5px 8px; }
  .artikel { font-size: 15px; }
  .groot-beeld { aspect-ratio: 3/2 !important; }
}

/* ---------- kleine hulpklassen ---------- */
.tussen { margin-top: 20px; }
.kick.tussen { margin-top: 28px; }
.tussen-k { margin-top: 12px; }
.geen-boven { padding-top: 0; }
.ruim { margin-top: 32px; }
.geen-marge { margin-top: 0; }
.subs-los { margin-bottom: 32px; }
.kennis-eerste { margin-bottom: 56px; }
.verg-los { margin-bottom: var(--sec-s); }
.hub-kop + .w > .sec { padding-top: var(--sec-s); }