/* Houthandel Jan Sok, ontwerp ronde 14 ("de volgende stap"). Eén raster, vaste maten, één knopstijl. */
@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap; src: url("manrope.woff2") format("woff2"); }

:root {
  --groen: #0e7a3a; --groen-d: #0a6631; --groen-l: #e8f3ec; --groen-ll: #f2f8f4;
  --bos: #10241a; --bos-2: #183326; --bos-lijn: rgba(255,255,255,.14);
  --inkt: #1a231d; --sub: #56615a; --zacht: #7d877f;
  --lijn: #e3e6e1; --lijn-2: #d3d8d1;
  --vlak: #f5f6f3; --zand: #f7f0e6; --wit: #fff;
  --hout: #8a5a2c; --let: #8a5300;
  --r: 12px; --r-s: 8px; --r-l: 18px;
  --gat: 24px; --rand: 24px;
  --schaduw: 0 1px 2px rgba(16,36,26,.06), 0 8px 24px rgba(16,36,26,.08);
  --schaduw-l: 0 2px 4px rgba(16,36,26,.06), 0 24px 56px rgba(16,36,26,.16);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 140px; }
body { margin: 0; background: var(--wit); color: var(--inkt); font: 500 16px/1.55 Manrope, system-ui, sans-serif; font-feature-settings: "tnum" 0; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.022em; line-height: 1.12; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
.num { font-variant-numeric: tabular-nums; }
small { font-size: max(13px, .85em); }
.nb { white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- raster ---------- */
.w { width: min(1320px, 100% - 2 * var(--rand)); margin-inline: auto; }
.r12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gat); }
.sec { padding-block: 88px; }
.sec-s { padding-block: 64px; }
.sec + .sec.wit, .sec.wit + .sec.wit { padding-top: 0; }
.vlak { background: var(--vlak); }
.donker { background: var(--bos); color: #fff; }

/* sectiekop */
.skop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.skop > div { max-width: 760px; }
.kick { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--hout); letter-spacing: 0; }
.donker .kick { color: #9fd3b0; }
.h1 { font-size: 48px; }
.h2 { font-size: 36px; }
.h3 { font-size: 22px; letter-spacing: -.015em; }
.lead { margin-top: 12px; font-size: 18px; line-height: 1.55; color: var(--sub); }
.donker .lead { color: rgba(255,255,255,.76); }
.meer { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--groen); white-space: nowrap; }
.meer svg { transition: transform .15s; }
.meer:hover svg { transform: translateX(3px); }
.donker .meer { color: #9fd3b0; }

/* ---------- knoppen: één stijl, twee gewichten ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1.5px solid var(--groen); border-radius: var(--r-s); background: var(--groen); color: #fff; font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.knop:hover { background: var(--groen-d); border-color: var(--groen-d); }
.knop.twee { background: var(--wit); color: var(--inkt); border-color: var(--lijn-2); }
.knop.twee:hover { border-color: var(--inkt); }
.knop.op-donker.twee { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.knop.op-donker.twee:hover { border-color: #fff; }
.knop.klein { min-height: 40px; padding: 0 16px; font-size: 15px; }
.knop.groot { min-height: 56px; padding: 0 28px; font-size: 17px; }
.knop.breed { width: 100%; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- strook + kop ---------- */
.strook { border-bottom: 1px solid var(--lijn); font-size: 13.5px; color: var(--sub); }
.strook .w { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 38px; }
.strook ul { display: flex; gap: 28px; }
.strook li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.strook li svg { color: var(--groen); }
.strook-r { display: flex; align-items: center; gap: 20px; white-space: nowrap; }
.nuopen { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--inkt); }
.nuopen i { width: 8px; height: 8px; border-radius: 50%; background: #1fa34f; box-shadow: 0 0 0 3px rgba(31,163,79,.18); }
.btw { display: inline-flex; padding: 2px; border-radius: 99px; background: var(--vlak); border: 1px solid var(--lijn); }
.btw button { border: 0; background: none; padding: 3px 11px; border-radius: 99px; font-size: 13px; font-weight: 700; color: var(--sub); }
.btw button.aan { background: var(--wit); color: var(--inkt); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.wie a { font-weight: 600; } .wie a.aan { color: var(--inkt); font-weight: 800; } .wie span { color: var(--lijn-2); margin: 0 6px; }

.kop { position: sticky; top: 0; z-index: 40; background: var(--wit); border-bottom: 1px solid var(--lijn); }
.kop-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 28px; height: 84px; }
.logo img { height: 52px; width: auto; }
.zoek { position: relative; }
.zoek input { width: 100%; height: 50px; padding: 0 56px 0 20px; border: 1.5px solid var(--lijn-2); border-radius: 99px; background: var(--vlak); font-size: 16px; font-weight: 500; outline: none; transition: border-color .15s, background .15s; }
.zoek input::placeholder { color: var(--zacht); }
.zoek input:focus { border-color: var(--groen); background: var(--wit); }
.zoek button { position: absolute; right: 5px; top: 5px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--groen); color: #fff; display: grid; place-items: center; }
.ontwerp-knop { display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 18px; border: 1.5px solid var(--lijn-2); border-radius: var(--r-s); font-weight: 700; font-size: 15px; white-space: nowrap; }
.ontwerp-knop svg { color: var(--groen); }
.ontwerp-knop:hover { border-color: var(--groen); }
.acties { display: flex; gap: 6px; }
.actie { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 72px; padding: 6px 4px; border-radius: var(--r-s); font-size: 13px; font-weight: 600; color: var(--sub); }
.actie svg { color: var(--inkt); }
.actie:hover { background: var(--vlak); }
.actie b { position: absolute; top: 0; right: 14px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--groen); color: #fff; font-size: 13px; line-height: 20px; text-align: center; }
.menuknop { display: none; }

.menu { border-top: 1px solid var(--lijn); }
.menu .w { display: flex; align-items: stretch; justify-content: space-between; height: 54px; }
.menu-l, .menu-rr { display: flex; align-items: stretch; }
.menu a, .menu button.mk { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 0; background: none; font-size: 15.5px; font-weight: 600; white-space: nowrap; }
.menu-l > :first-child { padding-left: 0; }
.menu-rr > :last-child { padding-right: 0; }
.menu .mk { font-weight: 800; }
.menu a::after, .menu button.mk::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--groen); transform: scaleX(0); transition: transform .15s; }
.menu-l > :first-child::after { left: 0; }
.menu-rr > :last-child::after { right: 0; }
.menu a:hover::after, .menu a.aan::after, .menu .open-m::after { transform: scaleX(1); }
.menu .groen { color: var(--groen); }

/* megamenu */
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 45; background: var(--wit); border-top: 1px solid var(--lijn); box-shadow: 0 24px 48px rgba(16,36,26,.14); display: none; }
.mega.open { display: block; }
.mega-in { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 440px; }
.mega-afd { padding: 20px 0; border-right: 1px solid var(--lijn); }
.mega-afd a { display: flex; align-items: center; justify-content: space-between; padding: 9px 20px 9px 0; font-size: 15.5px; font-weight: 600; border-radius: 0; }
.mega-afd a::after { display: none; }
.mega-afd a svg { color: var(--zacht); opacity: 0; transition: opacity .1s; }
.mega-afd a.aan { color: var(--groen); }
.mega-afd a.aan svg { opacity: 1; color: var(--groen); }
.mega-paneel { display: none; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; padding: 28px 0 28px 40px; }
.mega-paneel.aan { display: grid; }
.mega-paneel h3 { font-size: 22px; margin-bottom: 4px; }
.mega-paneel .zin { color: var(--sub); font-size: 15px; margin-bottom: 18px; }
.mega-subs { columns: 2; column-gap: 32px; }
.mega-subs a { display: block; padding: 7px 0; font-size: 15.5px; font-weight: 600; break-inside: avoid; }
.mega-subs a:hover { color: var(--groen); }
.mega-subs a::after { display: none; }
.mega-alles { margin-top: 18px; }
.mega-foto { position: relative; display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; }
.mega-foto img { width: 100%; height: 100%; object-fit: cover; }
.mega-foto span { position: absolute; left: 16px; bottom: 14px; right: 16px; color: #fff; font-weight: 800; font-size: 18px; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.mega-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10,22,15,.65)); }
.mega-3d { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: var(--r); font-weight: 700; font-size: 15px; }
.mega-3d svg { flex: none; color: var(--groen); }
.mega-3d small { display: block; font-weight: 500; color: var(--sub); font-size: 13.5px; }
.mega-3d:hover { border-color: var(--groen); }
.sluier { position: fixed; inset: 0; z-index: 30; background: rgba(16,36,26,.28); display: none; }
.sluier.aan { display: block; }

/* kruimel en paginakop */
.kruimel { display: flex; flex-wrap: wrap; gap: 6px; padding: 18px 0 0; font-size: 14px; color: var(--sub); }
.kruimel a:hover { color: var(--inkt); text-decoration: underline; }
.kruimel span { color: var(--lijn-2); }
.pkop { padding: 20px 0 32px; }
.pkop h1 { font-size: 44px; }
.pkop .lead { max-width: 760px; }

/* ---------- held ---------- */
.held { position: relative; height: 640px; overflow: hidden; background: #2b2a25; }
.held > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.held::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,20,14,.78) 0%, rgba(9,20,14,.58) 34%, rgba(9,20,14,.12) 62%, rgba(9,20,14,0) 80%), linear-gradient(0deg, rgba(9,20,14,.35), transparent 30%); }
.held .w { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: 72px; }
.held-tekst { max-width: 780px; color: #fff; }
.held .kick { color: rgba(255,255,255,.82); font-size: 15px; }
.held h1 { font-size: 68px; line-height: 1.02; letter-spacing: -.03em; }
.held p { margin-top: 20px; font-size: 19px; color: rgba(255,255,255,.86); max-width: 540px; }
.held .knoppen { margin-top: 32px; }
.held-tag { position: absolute; z-index: 1; right: var(--rand); bottom: 96px; display: none; }

/* maatzoeker */
.maatzoeker { position: relative; z-index: 2; margin-top: -60px; display: grid; grid-template-columns: 200px 120px 18px 150px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 20px 24px; border-radius: var(--r-l); background: var(--wit); box-shadow: var(--schaduw-l); }
.maatzoeker b { font-size: 18px; display: block; }
.maatzoeker small { color: var(--sub); font-size: 14px; }
.mz-veld { position: relative; }
.mz-veld input, .mz-veld select { width: 100%; height: 52px; padding: 0 14px; border: 1.5px solid var(--lijn); border-radius: var(--r-s); background: var(--vlak); font-size: 17px; font-weight: 600; outline: none; appearance: none; }
.mz-veld select { padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%231a231d' stroke-width='1.8'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.mz-veld input:focus, .mz-veld select:focus { border-color: var(--groen); background-color: var(--wit); }
.mz-veld em { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--zacht); font-size: 14px; }
.mz-x { text-align: center; color: var(--zacht); }
.mz-veel { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--sub); margin-top: -2px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--lijn-2); border-radius: 99px; font-size: 14px; font-weight: 700; white-space: nowrap; background: var(--wit); }
.chip:hover { border-color: var(--inkt); }
.chip.aan { background: var(--inkt); border-color: var(--inkt); color: #fff; }

/* feiten */
.feiten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 44px 0 8px; }
.feit { padding: 0 24px; border-left: 1px solid var(--lijn); }
.feit:first-child { padding-left: 0; border-left: 0; }
.feit b { display: block; font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.feit span { display: block; margin-top: 4px; color: var(--sub); font-size: 15px; }

/* ---------- afdelingen (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 256px; gap: var(--gat); }
.tegel { position: relative; overflow: hidden; border-radius: var(--r); background: #333; color: #fff; grid-column: span 3; }
.tegel.groot { grid-column: span 6; grid-row: span 2; }
.tegel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tegel:hover img { transform: scale(1.035); }
.tegel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,20,14,0) 40%, rgba(9,20,14,.72)); }
.tegel-t { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.tegel-t b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.tegel.groot .tegel-t b { font-size: 36px; }
.tegel-t span { display: block; margin-top: 4px; font-size: 14.5px; color: rgba(255,255,255,.86); }
.tegel-t i { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--inkt); display: grid; place-items: center; }
.tegel .drie { position: absolute; z-index: 1; left: 18px; top: 18px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 99px; background: rgba(255,255,255,.94); color: var(--inkt); font-size: 13px; font-weight: 800; }
.tegel .drie svg { color: var(--groen); }
.afd-lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px var(--gat); margin-top: var(--gat); }
.afd-r { display: flex; align-items: center; gap: 16px; padding: 10px 14px 10px 10px; border: 1px solid var(--lijn); border-radius: var(--r); font-weight: 700; transition: border-color .15s; }
.afd-r:hover { border-color: var(--inkt); }
.afd-r img { flex: none; width: 56px; height: 56px; border-radius: var(--r-s); object-fit: cover; background: var(--zand); }
.afd-r span { flex: 1; min-width: 0; }
.afd-r small { display: block; color: var(--sub); font-weight: 500; font-size: 13.5px; }
.afd-r svg { flex: none; color: var(--zacht); }

/* ---------- 3D-ontwerpers ---------- */
.ontw { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gat); align-items: start; }
.ontw-l { grid-column: span 5; }
.ontw-r { grid-column: 6 / span 7; }
.ontw-tabs { margin-top: 32px; border-top: 1px solid var(--bos-lijn); }
.ontw-tab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; width: 100%; padding: 18px 0; border: 0; border-bottom: 1px solid var(--bos-lijn); background: none; color: rgba(255,255,255,.7); text-align: left; }
.ontw-tab b { font-size: 19px; font-weight: 800; color: #fff; opacity: .72; }
.ontw-tab span { grid-column: 1; font-size: 14.5px; }
.ontw-tab em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; text-align: right; font-size: 13.5px; }
.ontw-tab em strong { display: block; font-size: 17px; color: #fff; }
.ontw-tab.aan b { opacity: 1; }
.ontw-tab.aan { color: rgba(255,255,255,.86); box-shadow: inset 3px 0 0 #6fcf8f; padding-left: 18px; }
.ontw-tab:not(.aan) em { display: none; }
.ontw-l .knoppen { margin-top: 28px; }
.scherm { position: relative; border-radius: var(--r); overflow: hidden; background: #0b1a12; box-shadow: 0 30px 80px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); }
.scherm img { width: 100%; height: auto; aspect-ratio: 1440 / 900; object-fit: cover; object-position: left top; }
.scherm.model img { aspect-ratio: 16 / 10; object-position: center; }
.scherm-prijs { position: absolute; right: 16px; bottom: 16px; padding: 14px 18px; border-radius: var(--r); background: rgba(255,255,255,.97); color: var(--inkt); box-shadow: var(--schaduw); }
.scherm-prijs span { display: block; font-size: 13px; color: var(--sub); }
.scherm-prijs b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.scherm-maat { position: absolute; left: 16px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.scherm-maat span { height: 30px; padding: 0 12px; border-radius: 99px; background: rgba(255,255,255,.95); color: var(--inkt); font-size: 13.5px; font-weight: 800; display: inline-flex; align-items: center; }
.scherm-paneel { display: none; }
.scherm-paneel.aan { display: block; }
.ontw-punten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gat); margin-top: 24px; }
.ontw-punten li { display: flex; gap: 10px; font-size: 14.5px; color: rgba(255,255,255,.82); }
.ontw-punten svg { flex: none; margin-top: 3px; color: #6fcf8f; }
.blijft { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13.5px; color: rgba(255,255,255,.6); }

/* ---------- houtlijst ---------- */
.hl-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.hl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hl { border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; background: var(--wit); }
.hl-rij { display: grid; grid-template-columns: 64px minmax(0, 1fr) 140px 150px 150px 170px 132px; align-items: center; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--lijn); }
.hl-rij:first-child { border-top: 0; }
.hl-kopr { padding-block: 12px; background: var(--vlak); font-size: 13px; font-weight: 700; color: var(--sub); }
.hl-rij img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--zand); }
.hl-naam b { display: block; font-weight: 800; font-size: 16px; }
.hl-naam span { display: block; font-size: 13.5px; color: var(--sub); }
.hl-maat { font-weight: 800; font-size: 18px; white-space: nowrap; }
.hl-maat small { font-size: 13px; color: var(--zacht); font-weight: 600; }
.hl-len { font-size: 14.5px; color: var(--sub); }
.hl-pm { text-align: right; font-weight: 800; font-size: 18px; white-space: nowrap; }
.hl-pm small { display: block; font-weight: 500; font-size: 13px; color: var(--sub); }
.hl-kopr .hl-pm { font-size: 13px; font-weight: 700; }
.vr { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--groen); white-space: nowrap; }
.vr i { width: 8px; height: 8px; border-radius: 50%; background: var(--groen); }
.vr.lev { color: var(--sub); }
.vr.lev i { background: transparent; border: 2px solid var(--zacht); }
.hl-voet { display: flex; justify-content: space-between; gap: 16px; padding: 14px 20px; background: var(--vlak); border-top: 1px solid var(--lijn); font-size: 13.5px; color: var(--sub); }
.hl-rij .knop { min-height: 40px; padding: 0 14px; font-size: 14.5px; }

/* ---------- houtsoorten ---------- */
.soorten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gat); }
.soorten > .soort { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
.soort img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--zand); }
.soort h3 { margin-top: 18px; font-size: 20px; }
.soort .van { margin-top: 4px; font-size: 15px; color: var(--sub); }
.soort .van b { font-size: 20px; color: var(--inkt); }
.soort p { margin-top: 8px; font-size: 14.5px; color: var(--sub); }
.soort .meer { margin-top: 12px; font-size: 14.5px; }

/* ---------- balie / kom langs ---------- */
.balie { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gat); align-items: stretch; }
.balie-foto { grid-column: span 6; position: relative; }
.balie-foto img { width: 100%; height: 100%; min-height: 480px; object-fit: cover; border-radius: var(--r-l); }
.balie-t { grid-column: 8 / span 5; }
.balie-feiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px var(--gat); margin-top: 28px; }
.balie-feiten b { display: block; font-size: 16px; }
.balie-feiten span { display: block; margin-top: 2px; font-size: 14.5px; color: var(--sub); }
.uren { margin-top: 28px; padding: 18px 20px; border-radius: var(--r); background: var(--vlak); font-size: 14.5px; }
.uren-k { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.uren dl { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 4px 24px; margin: 0; }
.uren dt { color: var(--sub); } .uren dd { margin: 0; text-align: right; font-weight: 700; }
.uren .vandaag { color: var(--inkt); font-weight: 800; }
.balie-t .knoppen { margin-top: 24px; }

/* ---------- service ---------- */
.dienst { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gat); }
.kaartje { border: 1px solid var(--lijn); border-radius: var(--r-l); padding: 28px; background: var(--wit); }
.dienst .zl { grid-column: span 6; }
.dienst .rh { grid-column: span 3; }
.dienst .bz { grid-column: span 3; }
.kaartje h3 { font-size: 22px; margin: 2px 0 18px; }
.kaartje .kick { margin-bottom: 4px; }
.zl-art { width: 100%; height: 48px; padding: 0 14px; border: 1.5px solid var(--lijn); border-radius: var(--r-s); background: var(--vlak); font-weight: 700; appearance: none; }
.zl-rij { display: grid; grid-template-columns: 76px 14px 108px auto; align-items: center; gap: 10px; margin-top: 10px; font-size: 14.5px; color: var(--sub); }
.zl-rij input { width: 100%; height: 44px; border: 1.5px solid var(--lijn); border-radius: var(--r-s); background: var(--vlak); text-align: right; padding: 0 12px; font-weight: 700; font-size: 16px; }
.zl-uit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; padding: 16px; border-radius: var(--r); background: var(--groen-l); }
.zl-uit span { display: block; font-size: 13px; color: var(--sub); font-weight: 600; }
.zl-uit b { font-size: 18px; white-space: nowrap; }
.zl-voet { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; }
.lijstje li a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--lijn); font-weight: 700; }
.lijstje li:first-child a { border-top: 0; padding-top: 0; }
.lijstje li a > span { flex: 1; min-width: 0; }
.lijstje small { display: block; font-weight: 500; color: var(--sub); font-size: 13.5px; }
.lijstje svg { flex: none; color: var(--zacht); }
.tarief { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--lijn); }
.tarief:first-of-type { border-top: 0; padding-top: 0; }
.tarief b { font-size: 15px; } .tarief span { grid-row: 2; font-size: 13.5px; color: var(--sub); } .tarief em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-weight: 800; white-space: nowrap; }

/* ---------- kennis ---------- */
.kennis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gat); }
.art img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r); transition: opacity .15s; }
.art:hover img { opacity: .92; }
.art .rub { display: block; margin-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--hout); }
.art h3 { margin-top: 6px; font-size: 20px; letter-spacing: -.015em; }
.art p { margin-top: 8px; color: var(--sub); font-size: 15px; }
.art:hover h3 { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* ---------- voet ---------- */
.voet { background: var(--bos); color: rgba(255,255,255,.78); font-size: 15px; }
.voet a:hover { color: #fff; }
.voet-contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gat); align-items: center; padding: 56px 0 48px; border-bottom: 1px solid var(--bos-lijn); }
.vakman { grid-column: span 4; display: flex; align-items: center; gap: 18px; }
.vakman img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: #fff; }
.vakman b { display: block; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.015em; }
.vk { grid-column: span 2; }
.vk:nth-child(2) { grid-column: 5 / span 2; }
.vk span { display: block; font-size: 13.5px; }
.vk b { display: block; margin-top: 2px; color: #fff; font-weight: 700; white-space: nowrap; }
.voet .knop { grid-column: span 2; justify-self: end; }
.voet-kol { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gat); padding: 48px 0; }
.voet-kol > div { grid-column: span 2; }
.voet-kol > div:first-child { grid-column: span 4; }
.voet-kol h4 { color: #fff; font-size: 15px; letter-spacing: 0; margin-bottom: 14px; }
.voet-kol li { padding: 4px 0; }
.voet-kol .logo img { height: 56px; margin-bottom: 18px; }
.voet-kol p { max-width: 340px; font-size: 14.5px; }
.voet-onder { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0 28px; border-top: 1px solid var(--bos-lijn); font-size: 13.5px; color: rgba(255,255,255,.6); }
.voet-onder ul { display: flex; gap: 20px; flex-wrap: wrap; }
.betaal { display: flex; gap: 8px; }
.betaal span { display: grid; place-items: center; height: 26px; padding: 0 8px; border-radius: 5px; background: #fff; color: var(--inkt); font-size: 13px; font-weight: 800; letter-spacing: .02em; }

/* ---------- productkaarten ---------- */
.kaarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--gat); }
.kaarten.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pk { position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; }
.pk-foto { position: relative; display: block; border-radius: var(--r); overflow: hidden; background: var(--zand); aspect-ratio: 4 / 3; }
.pk-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.pk:hover .pk-foto img { transform: scale(1.04); }
.pk-band { position: absolute; left: 12px; top: 12px; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--wit); font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; }
.pk-maat { margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--sub); }
.pk-naam { margin-top: 3px; font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.pk-naam a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.pk-prijs { margin-top: 10px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.pk-prijs small { font-size: 13.5px; font-weight: 600; color: var(--sub); letter-spacing: 0; }
.pk-per { font-size: 13px; color: var(--sub); }
.pk-vr { margin-top: 10px; align-self: end; }
.pk-vr .vr { white-space: normal; }
.kaarten.met-foto-banner .banner { grid-column: span 2; grid-row: span 6; }

/* ---------- categoriepagina ---------- */
.cat { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; padding-bottom: 88px; }
.filters { position: sticky; top: 156px; }
.fgroep { padding: 18px 0; border-top: 1px solid var(--lijn); }
.fgroep:first-child { border-top: 0; padding-top: 0; }
.fgroep h4 { font-size: 15px; letter-spacing: 0; margin-bottom: 10px; display: flex; justify-content: space-between; }
.vink { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 15px; cursor: pointer; }
.vink input { width: 18px; height: 18px; margin: 0; accent-color: var(--groen); }
.vink span { flex: 1; } .vink small { color: var(--zacht); font-size: 13px; }
.vink-meer { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--groen); background: none; border: 0; padding: 0; }
.maatchips { display: flex; flex-wrap: wrap; gap: 6px; }
.maatchips .chip { height: 32px; padding: 0 11px; font-size: 13.5px; }
.balk { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--lijn); }
.balk-l { display: flex; align-items: center; gap: 16px; font-size: 15px; color: var(--sub); }
.balk-l b { color: var(--inkt); }
.balk-r { display: flex; align-items: center; gap: 12px; }
.wissel { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--vlak); border: 1px solid var(--lijn); }
.wissel button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 99px; background: none; font-size: 14px; font-weight: 700; color: var(--sub); }
.wissel button.aan { background: var(--wit); color: var(--inkt); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.kies { height: 42px; padding: 0 36px 0 14px; border: 1px solid var(--lijn-2); border-radius: var(--r-s); background: var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%231a231d' stroke-width='1.8'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center; font-size: 14.5px; font-weight: 600; appearance: none; }
.actief { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 24px; }
.actief .chip svg { color: var(--zacht); }
.subs { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 4px; margin-bottom: 8px; }
.subs::-webkit-scrollbar { display: none; }
.sub { flex: none; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px 0 6px; border: 1px solid var(--lijn); border-radius: var(--r); font-weight: 700; font-size: 15px; white-space: nowrap; }
.sub img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--zand); }
.sub small { color: var(--zacht); font-weight: 600; }
.sub.aan { border-color: var(--inkt); box-shadow: inset 0 0 0 1px var(--inkt); }
.banner { position: relative; overflow: hidden; border-radius: var(--r); background: var(--bos); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; min-height: 100%; }
.banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.banner > * { position: relative; }
.banner b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.banner p { margin: 8px 0 18px; color: rgba(255,255,255,.86); font-size: 15px; }
.laadmeer { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 48px; font-size: 14px; color: var(--sub); }
.laadmeer .balkje { width: 220px; height: 4px; border-radius: 4px; background: var(--lijn); overflow: hidden; }
.laadmeer .balkje i { display: block; height: 100%; background: var(--inkt); }
.cat-onder { padding: 64px 0 0; border-top: 1px solid var(--lijn); margin-top: 64px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gat); }
.cat-onder .tekst { grid-column: span 6; color: var(--sub); }
.cat-onder .tekst h2 { color: var(--inkt); margin-bottom: 14px; }
.cat-onder .tekst p + p { margin-top: 12px; }
.cat-onder .faq { grid-column: 8 / span 5; }
.faq details { border-top: 1px solid var(--lijn); }
.faq details:last-child { border-bottom: 1px solid var(--lijn); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; transition: transform .15s; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; color: var(--sub); }
.hl-lijst .hl-rij { grid-template-columns: 64px minmax(0, 1fr) 150px 170px 190px 40px; }
.naar { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--lijn-2); display: grid; place-items: center; }
.filterknop { display: none; }

/* afdelingskop met foto (hub) */
.hub-kop { position: relative; height: 380px; border-radius: var(--r-l); overflow: hidden; color: #fff; margin-top: 18px; }
.hub-kop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hub-kop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,20,14,.78), rgba(9,20,14,.2) 70%); }
.hub-kop > div { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 44px 48px; max-width: 720px; }
.hub-kop h1 { font-size: 52px; }
.hub-kop p { margin-top: 12px; font-size: 18px; color: rgba(255,255,255,.86); }
.hub-kop .knoppen { margin-top: 24px; }
.soortrooster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gat); }
.st { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px; border: 1px solid var(--lijn); border-radius: var(--r); }
.st:hover { border-color: var(--inkt); }
.st img { width: 96px; height: 72px; border-radius: 8px; object-fit: cover; background: var(--zand); }
.st b { display: block; font-size: 16.5px; font-weight: 800; }
.st span { display: block; font-size: 13.5px; color: var(--sub); }
.st em { font-style: normal; font-weight: 700; color: var(--inkt); }

/* ---------- productpagina ---------- */
.pdp-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 16px 0 24px; }
.pdp-kop h1 { font-size: 40px; }
.pdp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; font-size: 14.5px; color: var(--sub); }
.pdp-meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--lijn-2); margin-right: 14px; vertical-align: middle; }
.pdp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gat); align-items: start; }
.galerij { grid-column: span 7; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; position: sticky; top: 156px; }
.duimen { display: flex; flex-direction: column; gap: 10px; }
.duim { width: 84px; height: 84px; padding: 0; border: 1.5px solid var(--lijn); border-radius: 10px; overflow: hidden; background: var(--zand); }
.duim img { width: 100%; height: 100%; object-fit: cover; }
.duim.aan { border-color: var(--inkt); box-shadow: inset 0 0 0 1px var(--inkt); }
.duim.maat { display: grid; place-items: center; background: var(--inkt); color: #fff; font-size: 13px; font-weight: 800; line-height: 1.2; text-align: center; }
.hoofdfoto { position: relative; border-radius: var(--r-l); overflow: hidden; background: var(--zand); aspect-ratio: 1 / 1; }
.hoofdfoto img { width: 100%; height: 100%; object-fit: cover; }
.hoofdfoto .pk-band { left: 16px; top: 16px; }
.hf-3d { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 99px; background: rgba(255,255,255,.96); font-size: 14px; font-weight: 800; box-shadow: var(--schaduw); }
.hf-3d svg { color: var(--groen); }
.koop { grid-column: 8 / span 5; position: sticky; top: 156px; }
.koop-prijs { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.koop-prijs b { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.koop-prijs span { font-size: 16px; font-weight: 600; color: var(--sub); }
.koop-sub { margin-top: 8px; font-size: 14.5px; color: var(--sub); }
.koop-sub b { color: var(--inkt); }
.m2 { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 99px; background: var(--groen-l); color: var(--groen-d); font-size: 13.5px; font-weight: 800; margin-left: 6px; }
.blok { margin-top: 20px; padding: 18px 20px; border: 1px solid var(--lijn); border-radius: var(--r); }
.blok-k { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; font-weight: 800; font-size: 15.5px; }
.blok-k small { font-weight: 600; color: var(--sub); font-size: 13.5px; }
.reken { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.reken label { position: relative; }
.reken input { width: 100%; height: 46px; padding: 0 34px 0 14px; border: 1.5px solid var(--lijn); border-radius: var(--r-s); background: var(--vlak); font-weight: 700; font-size: 16px; text-align: right; }
.reken label em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 13.5px; color: var(--zacht); }
.reken-uit { display: none; margin-top: 12px; padding: 10px 14px; border-radius: var(--r-s); background: var(--groen-l); font-size: 14.5px; color: var(--groen-d); font-weight: 700; }
.reken-uit.aan { display: block; }
.lengtes { margin-top: 20px; border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; }
.lr { display: grid; grid-template-columns: 86px minmax(0, 1fr) minmax(0, 1fr) 124px; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--lijn); transition: background .2s; }
.lr:first-child { border-top: 0; }
.lr-k { padding-block: 10px; background: var(--vlak); font-size: 13px; font-weight: 700; color: var(--sub); }
.lr b { font-size: 17px; }
.lr .p b { display: block; font-size: 16.5px; }
.lr .p small { display: block; color: var(--sub); font-size: 13px; }
.lr.licht { background: var(--groen-ll); }
.teller { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; height: 40px; border: 1.5px solid var(--lijn-2); border-radius: var(--r-s); overflow: hidden; }
.teller button { border: 0; background: var(--wit); font-size: 18px; font-weight: 600; color: var(--sub); }
.teller button:hover { background: var(--vlak); color: var(--inkt); }
.teller input { width: 100%; border: 0; text-align: center; font-weight: 800; font-size: 16px; -moz-appearance: textfield; }
.lengtes-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--lijn); background: var(--vlak); font-size: 14px; color: var(--sub); }
.lengtes-voet a { font-weight: 800; color: var(--groen); }
.totaal { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.totaal span { display: block; font-size: 13.5px; color: var(--sub); }
.totaal b { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.totaal .knop { flex: 1; max-width: 260px; }
.knop[disabled] { opacity: .45; pointer-events: none; }
.krijgen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.krijg { padding: 14px 16px; border: 1px solid var(--lijn); border-radius: var(--r); font-size: 14px; color: var(--sub); }
.krijg b { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--inkt); }
.krijg b svg { color: var(--groen); }
.krijg em { display: block; margin-top: 4px; font-style: normal; font-weight: 800; color: var(--groen); }
.zeker { margin-top: 18px; display: grid; gap: 8px; font-size: 14.5px; }
.zeker li { display: flex; gap: 10px; }
.zeker svg { flex: none; margin-top: 3px; color: var(--groen); }
.naar3d { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 20px; padding: 12px; border: 1px solid var(--lijn); border-radius: var(--r); }
.naar3d img { width: 120px; height: 80px; border-radius: 8px; object-fit: cover; object-position: left top; }
.naar3d b { display: block; font-size: 15.5px; }
.naar3d span { display: block; font-size: 13.5px; color: var(--sub); }
.naar3d:hover { border-color: var(--groen); }
.legenda { position: relative; display: inline-block; }
.legenda > button { border: 0; background: none; padding: 0; font-size: 14px; font-weight: 700; color: var(--groen); display: inline-flex; gap: 8px; align-items: center; }
.vraagje { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--lijn-2); font-size: 13px; font-weight: 800; color: var(--sub); background: var(--wit); }
.pop { position: absolute; z-index: 10; top: calc(100% + 10px); left: 0; width: 300px; padding: 14px 16px; border-radius: var(--r); background: var(--wit); box-shadow: var(--schaduw-l); font-size: 13.5px; display: none; }
.legenda.open .pop { display: block; }
.pop li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.pop li b { white-space: nowrap; }
.pop p { margin-top: 8px; color: var(--sub); font-size: 13px; }

.pdp-nav { position: sticky; top: 138px; z-index: 20; margin-top: 72px; background: var(--wit); border-bottom: 1px solid var(--lijn); }
.pdp-nav .w { display: flex; gap: 32px; height: 56px; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.pdp-nav a { display: flex; align-items: center; font-weight: 700; font-size: 15.5px; color: var(--sub); white-space: nowrap; border-bottom: 2px solid transparent; }
.pdp-nav a.aan, .pdp-nav a:hover { color: var(--inkt); border-color: var(--inkt); }
.pdp-sec { padding: 64px 0 0; }
.pdp-twee { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gat); }
.pdp-twee > :first-child { grid-column: span 7; }
.pdp-twee > :last-child { grid-column: 9 / span 4; }
.goed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--gat); margin: 18px 0 32px; }
.goed li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; }
.goed i { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 14px; background: var(--groen); color: #fff; }
.goed i.min { background: var(--lijn); color: var(--sub); }
.leestekst p { font-size: 16.5px; line-height: 1.65; color: #2c3530; }
.leestekst p + p, .leestekst h3 + p { margin-top: 10px; }
.leestekst h3 { margin-top: 28px; font-size: 20px; }
.tip { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; padding: 20px; border-radius: var(--r); background: var(--vlak); }
.tip img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: #fff; }
.tip b { display: block; font-size: 16px; }
.tip p { font-size: 15px; color: var(--sub); margin-top: 2px; }
.compleet { border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; }
.cr { display: grid; grid-template-columns: 22px 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--lijn); }
.cr:first-child { border-top: 0; }
.cr input { width: 20px; height: 20px; accent-color: var(--groen); margin: 0; }
.cr img { width: 64px; height: 48px; border-radius: 6px; object-fit: cover; background: var(--zand); }
.cr small { display: block; font-size: 13px; font-weight: 700; color: var(--hout); }
.cr b { display: block; font-size: 15.5px; }
.cr span { display: block; font-size: 13.5px; color: var(--sub); }
.cr em { font-style: normal; font-weight: 800; white-space: nowrap; }
.cr-voet { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; background: var(--vlak); border-top: 1px solid var(--lijn); }
.verg { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; font-size: 15px; }
.verg th, .verg td { padding: 14px 18px; text-align: left; border-top: 1px solid var(--lijn); vertical-align: top; }
.verg tr:first-child th, .verg tr:first-child td { border-top: 0; }
.verg thead th { background: var(--vlak); font-size: 15.5px; }
.verg thead th small { display: block; font-weight: 600; color: var(--sub); font-size: 13px; }
.verg tbody th { font-weight: 600; color: var(--sub); }
.verg th, .verg td { overflow-wrap: break-word; hyphens: auto; }
.verg .deze { background: var(--groen-ll); }
.verg thead .deze { background: var(--groen-l); }
.deze-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--groen); color: #fff; font-size: 13px; vertical-align: 2px; }
.specs { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.specs th, .specs td { padding: 12px 0; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: top; }
.specs th { width: 42%; padding-right: 12px !important; font-weight: 500; color: var(--sub); overflow-wrap: anywhere; hyphens: auto; }
.specs td { font-weight: 700; }
.vakkaart { padding: 24px; border-radius: var(--r-l); background: var(--bos); color: rgba(255,255,255,.82); }
.vakkaart img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: #fff; }
.vakkaart b { display: block; margin-top: 14px; color: #fff; font-size: 20px; font-weight: 800; }
.vakkaart p { margin-top: 6px; font-size: 15px; }
.vakkaart .knoppen { margin-top: 18px; }
.plakbalk { display: none; }

/* samensteller (bouwpakket) */
.feitjes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.feitjes div { padding: 10px 12px; border-radius: var(--r-s); background: var(--vlak); }
.feitjes span { display: block; font-size: 13px; font-weight: 700; color: var(--sub); }
.feitjes b { font-size: 15.5px; white-space: nowrap; }
.stap { border: 1px solid var(--lijn); border-radius: var(--r); margin-top: 10px; overflow: hidden; }
.stap > button { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; background: var(--wit); text-align: left; }
.stap > button i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13.5px; background: var(--vlak); color: var(--sub); }
.stap.klaar > button i { background: var(--groen); color: #fff; }
.stap > button b { font-size: 15.5px; }
.stap > button small { display: block; font-weight: 600; color: var(--sub); font-size: 13.5px; }
.stap > button em { font-style: normal; font-weight: 800; font-size: 14.5px; white-space: nowrap; }
.stap > button svg { transition: transform .15s; color: var(--zacht); }
.stap.open > button svg { transform: rotate(180deg); }
.stap-in { display: none; padding: 0 16px 16px; }
.stap.open .stap-in { display: block; }
.keuze { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; width: 100%; padding: 11px 14px; margin-top: 8px; border: 1.5px solid var(--lijn); border-radius: var(--r-s); background: var(--wit); text-align: left; }
.keuze b { font-size: 14.5px; }
.keuze small { grid-row: 2; font-size: 13px; color: var(--sub); }
.keuze em { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-weight: 800; font-size: 14px; white-space: nowrap; }
.keuze.aan { border-color: var(--groen); background: var(--groen-ll); box-shadow: inset 0 0 0 1px var(--groen); }
.stalen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.staal { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 700; color: var(--sub); text-align: center; line-height: 1.2; }
.staal i { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--wit); box-shadow: 0 0 0 1.5px var(--lijn-2); }
.staal.aan i { box-shadow: 0 0 0 2px var(--groen); }
.staal.aan { color: var(--inkt); }
.stap-tip { margin-top: 10px; font-size: 13px; color: var(--sub); }
.jouw { margin-top: 20px; padding: 18px 20px; border-radius: var(--r); background: var(--vlak); }
.jouw li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14.5px; }
.jouw li span { color: var(--sub); }
.jouw li b { white-space: nowrap; }
.past { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; }
.plat { position: relative; aspect-ratio: 295 / 200; border: 2px solid var(--inkt); border-radius: 4px; background: var(--zand); }
.plat i { position: absolute; inset: 7% 7%; border: 1.5px dashed var(--hout); border-radius: 2px; }
.plat span { position: absolute; font-size: 13px; font-weight: 800; }
.plat .b { left: 50%; top: -22px; transform: translateX(-50%); }
.plat .h { right: -50px; top: 50%; transform: translateY(-50%); }
.plat .f { left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--hout); font-size: 13px; white-space: nowrap; }

/* ---------- winkelwagen en afrekenen ---------- */
.stappen { display: flex; align-items: center; gap: 0; margin: 24px 0 32px; padding: 0; list-style: none; }
.stappen li { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--zacht); font-size: 15px; white-space: nowrap; }
.stappen li + li::before { content: ""; width: 56px; height: 2px; margin: 0 16px; background: var(--lijn); }
.stappen li i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13.5px; background: var(--vlak); border: 1.5px solid var(--lijn-2); }
.stappen li.klaar { color: var(--inkt); }
.stappen li.klaar i { background: var(--groen); border-color: var(--groen); color: #fff; }
.stappen li.nu { color: var(--inkt); }
.stappen li.nu i { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.wagen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gat); align-items: start; padding-bottom: 88px; }
.wagen-l { grid-column: span 8; }
.wagen-r { grid-column: 9 / span 4; position: sticky; top: 156px; }
.wgroep { border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; }
.wgroep + .wgroep { margin-top: 20px; }
.wgroep-k { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; background: var(--vlak); border-bottom: 1px solid var(--lijn); }
.wgroep-k b { display: flex; align-items: center; gap: 10px; }
.wgroep-k span { font-size: 14px; color: var(--sub); }
.wr { display: grid; grid-template-columns: 96px minmax(0, 1fr) 124px 110px 28px; align-items: center; gap: 18px; padding: 18px 20px; border-top: 1px solid var(--lijn); }
.wgroep-k + .wr { border-top: 0; }
.wr img { width: 96px; height: 72px; border-radius: 8px; object-fit: cover; background: var(--zand); }
.wr b { display: block; font-size: 16px; }
.wr span { display: block; font-size: 13.5px; color: var(--sub); }
.wr .zaag { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 10px; border-radius: 99px; background: var(--zand); color: var(--hout); font-size: 13px; font-weight: 800; }
.wr .som { text-align: right; font-weight: 800; font-size: 16.5px; white-space: nowrap; }
.wr .som small { display: block; font-weight: 500; font-size: 13px; color: var(--sub); }
.weg { width: 28px; height: 28px; border: 0; background: none; color: var(--zacht); display: grid; place-items: center; border-radius: 6px; }
.weg:hover { background: var(--vlak); color: var(--inkt); }
.overzicht { border: 1px solid var(--lijn); border-radius: var(--r-l); padding: 24px; }
.overzicht h2 { font-size: 22px; margin-bottom: 16px; }
.ov { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 15.5px; }
.ov span { color: var(--sub); }
.ov b { white-space: nowrap; }
.ov.tot { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--lijn); font-size: 17px; }
.ov.tot b { font-size: 26px; letter-spacing: -.02em; }
.ov.klein { font-size: 13.5px; padding: 0; }
.keuzes { display: grid; gap: 8px; margin: 8px 0 16px; }
.radio { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--lijn); border-radius: var(--r-s); cursor: pointer; font-size: 14.5px; }
.radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--groen); }
.radio b { display: block; font-size: 15px; }
.radio small { display: block; color: var(--sub); font-size: 13px; }
.radio em { font-style: normal; font-weight: 800; white-space: nowrap; }
.radio:has(input:checked) { border-color: var(--groen); background: var(--groen-ll); }
.postcode { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 8px; }
.veld { display: block; }
.veld > span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.veld > span small { font-weight: 500; color: var(--zacht); }
.veld input, .veld select, .veld textarea { width: 100%; height: 48px; padding: 0 14px; border: 1.5px solid var(--lijn-2); border-radius: var(--r-s); background: var(--wit); font-size: 16px; font-weight: 500; outline: none; }
.veld textarea { height: 120px; padding: 12px 14px; resize: vertical; }
.veld input:focus, .veld textarea:focus, .veld select:focus { border-color: var(--groen); }
.velden { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px var(--gat); }
.velden .v2 { grid-column: span 2; } .velden .v3 { grid-column: span 3; } .velden .v4 { grid-column: span 4; } .velden .v6 { grid-column: span 6; }
.vak { border: 1px solid var(--lijn); border-radius: var(--r-l); padding: 28px; }
.vak + .vak { margin-top: 20px; }
.vak h2 { font-size: 22px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vak h2 small { font-size: 14px; font-weight: 600; color: var(--sub); letter-spacing: 0; }
.gevonden { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-s); background: var(--groen-ll); font-size: 14.5px; }
.gevonden svg { flex: none; color: var(--groen); }
.dagen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dag { padding: 10px 6px; border: 1.5px solid var(--lijn); border-radius: var(--r-s); background: var(--wit); text-align: center; font-size: 13px; color: var(--sub); }
.dag b { display: block; font-size: 15px; color: var(--inkt); }
.dag.aan { border-color: var(--groen); background: var(--groen-ll); box-shadow: inset 0 0 0 1px var(--groen); }
.betaalw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mini { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--lijn); font-size: 14px; }
.mini:first-of-type { border-top: 0; }
.mini img { width: 52px; height: 40px; border-radius: 6px; object-fit: cover; background: var(--zand); }
.mini span { color: var(--sub); display: block; font-size: 13px; }
.mini em { font-style: normal; font-weight: 800; white-space: nowrap; }
.vaak { padding-bottom: 88px; }
.wagen { padding-bottom: 56px; }

/* bedankt */
.bedankt { max-width: 880px; margin: 0 auto; padding: 56px 0 96px; }
.vinkrond { width: 64px; height: 64px; border-radius: 50%; background: var(--groen); color: #fff; display: grid; place-items: center; margin-bottom: 24px; }
.tijdlijn { margin-top: 32px; border-left: 2px solid var(--lijn); padding-left: 28px; }
.tijdlijn li { position: relative; padding-bottom: 24px; }
.tijdlijn li::before { content: ""; position: absolute; left: -36px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--wit); border: 2px solid var(--lijn-2); }
.tijdlijn li.klaar::before { background: var(--groen); border-color: var(--groen); }
.tijdlijn b { display: block; }
.tijdlijn span { color: var(--sub); font-size: 15px; }

/* account */
.acc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; padding-bottom: 88px; }
.acc-nav { position: sticky; top: 156px; }
.acc-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-s); font-weight: 600; font-size: 15.5px; }
.acc-nav a:hover { background: var(--vlak); }
.acc-nav a.aan { background: var(--vlak); font-weight: 800; }
.acc-nav a svg { color: var(--sub); }
.acc-nav a b { margin-left: auto; font-size: 13px; padding: 1px 8px; border-radius: 99px; background: var(--wit); border: 1px solid var(--lijn); }
.acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gat); }
.status { display: flex; align-items: center; gap: 0; margin: 18px 0 8px; }
.status span { flex: 1; height: 6px; border-radius: 3px; background: var(--lijn); margin-right: 6px; }
.status span.klaar { background: var(--groen); }
.status-t { display: flex; justify-content: space-between; font-size: 13px; color: var(--sub); }
.order { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--lijn); font-size: 15px; }
.order:first-of-type { border-top: 0; }
.order > div > span { display: block; font-size: 13.5px; color: var(--sub); }
.ontwerpje { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--lijn); }
.ontwerpje:first-of-type { border-top: 0; }
.ontwerpje img { width: 112px; height: 72px; border-radius: 8px; object-fit: cover; object-position: left top; }
.ontwerpje span { display: block; font-size: 13.5px; color: var(--sub); }

/* ---------- inhoudspagina's ---------- */
.twee-kol { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gat); align-items: start; }
.twee-kol > .hoofd { grid-column: span 7; }
.twee-kol > .zij { grid-column: 9 / span 4; }
.groot-beeld { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-l); }
.vier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gat); }
.punt b { display: block; font-size: 18px; margin-top: 14px; }
.punt p { margin-top: 6px; color: var(--sub); font-size: 15px; }
.punt .ic { width: 48px; height: 48px; border-radius: 12px; background: var(--groen-l); color: var(--groen); display: grid; place-items: center; }
.stapnr { counter-reset: s; }
.stapnr li { counter-increment: s; }
.stapnr .ic::before { content: counter(s); font-weight: 800; font-size: 18px; }
.artikel { max-width: 760px; }
.artikel h2 { font-size: 28px; margin: 40px 0 12px; }
.artikel p, .artikel li { font-size: 17.5px; line-height: 1.7; color: #2c3530; }
.artikel p + p { margin-top: 14px; }
.artikel ul.bol { margin: 10px 0; padding-left: 22px; list-style: disc; }
.artikel ul.bol li + li { margin-top: 6px; }
.inhoud { position: sticky; top: 156px; }
.inhoud a { display: block; padding: 7px 0 7px 14px; border-left: 2px solid var(--lijn); font-size: 15px; color: var(--sub); font-weight: 600; }
.inhoud a.aan { border-color: var(--groen); color: var(--inkt); }
.materiaal { margin-top: 18px; border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; }
.materiaal li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--lijn); font-size: 15.5px !important; align-items: center; }
.materiaal li:first-child { border-top: 0; }
.materiaal li b { font-weight: 800; }
.materiaal li em { font-style: normal; font-weight: 800; white-space: nowrap; }
.materiaal-voet { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; background: var(--vlak); border-top: 1px solid var(--lijn); }
.materiaal-voet b { font-size: 22px; }
.materiaal-voet span { font-size: 13.5px; color: var(--sub); }
.tabel { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tabel th, .tabel td { padding: 14px 16px; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: top; }
.tabel thead th { font-size: 15.5px; background: var(--vlak); }
.tabel tbody th { font-weight: 600; color: var(--sub); width: 24%; }
.kaart-route { position: relative; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 16 / 10; background: var(--vlak); }
.kaart-route img { width: 100%; height: 100%; object-fit: cover; }
.kaart-route div { position: absolute; left: 20px; bottom: 20px; right: 20px; padding: 16px 18px; border-radius: var(--r); background: var(--wit); box-shadow: var(--schaduw); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.uploader { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1.5px dashed var(--lijn-2); border-radius: var(--r); color: var(--sub); font-size: 14.5px; }
.uploader b { color: var(--inkt); display: block; }
.knopkeuze { display: flex; flex-wrap: wrap; gap: 8px; }
.knopkeuze label { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border: 1.5px solid var(--lijn-2); border-radius: 99px; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.knopkeuze input { display: none; }
.knopkeuze label:has(input:checked) { border-color: var(--groen); background: var(--groen-ll); color: var(--groen-d); }

/* zelf ontwerpen hub */
.ontw-rij { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gat); align-items: center; padding: 56px 0; border-top: 1px solid var(--lijn); }
.ontw-rij:first-of-type { border-top: 0; padding-top: 24px; }
.ontw-rij .scherm { grid-column: span 7; box-shadow: var(--schaduw-l); border-color: var(--lijn); }
.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; order: 1; }
.ontw-rij ul { margin: 18px 0 24px; display: grid; gap: 8px; }
.ontw-rij li { display: flex; gap: 10px; font-size: 15.5px; }
.ontw-rij li svg { flex: none; margin-top: 4px; color: var(--groen); }
.ontw-prijs { padding: 14px 16px; border-radius: var(--r); background: var(--vlak); font-size: 14px; color: var(--sub); margin-bottom: 20px; }
.ontw-prijs b { display: block; font-size: 22px; color: var(--inkt); }

/* zoeken */
.zoekkop { padding: 24px 0 28px; }
.zoekkop h1 { font-size: 36px; }
.zoekkop h1 em { font-style: normal; color: var(--groen); }
.herkend { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 18px; border-radius: var(--r); background: var(--groen-ll); font-size: 15px; }
.herkend svg { flex: none; color: var(--groen); }

/* mockup-balk */
.mkbalk { position: fixed; z-index: 90; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: calc(100% - 16px); display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 99px; background: rgba(16,36,26,.94); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.mkbalk span { padding: 0 10px 0 12px; opacity: .7; white-space: nowrap; }
.mkbalk a { padding: 7px 12px; border-radius: 99px; white-space: nowrap; }
.mkbalk a:hover { background: rgba(255,255,255,.12); }
.toast { position: fixed; z-index: 95; left: 50%; bottom: 72px; transform: translateX(-50%) translateY(10px); max-width: min(520px, calc(100% - 32px)); padding: 14px 18px; border-radius: var(--r); background: var(--inkt); color: #fff; font-size: 14.5px; box-shadow: var(--schaduw-l); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.aan { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.toast a { color: #9fd3b0; font-weight: 700; text-decoration: underline; }

/* lade (telefoon) */
.lade { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(420px, 92vw); background: var(--wit); transform: translateX(-100%); transition: transform .25s ease; overflow-y: auto; }
.lade.open { transform: none; }
.lade-k { display: flex; justify-content: space-between; align-items: center; height: 64px; padding: 0 16px; border-bottom: 1px solid var(--lijn); }
.lade-k img { height: 40px; }
.lade-k button { width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center; }
.lade nav { padding: 8px 16px 24px; }
.lade .la { display: grid; grid-template-columns: 52px minmax(0, 1fr) 16px; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--lijn); font-weight: 700; }
.lade .la img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.lade .la small { display: block; color: var(--sub); font-weight: 500; font-size: 13px; }
.lade h4 { margin: 24px 0 8px; font-size: 13px; letter-spacing: 0; color: var(--sub); }
.lade .lb { display: block; padding: 10px 0; font-weight: 600; }
.lade-sluier { position: fixed; inset: 0; z-index: 55; background: rgba(16,36,26,.4); display: none; }
.lade-sluier.aan { display: block; }

/* ---------- tussenmaten ---------- */
@media (max-width: 1280px) {
  .kop-r { gap: 20px; }
  .actie { min-width: 64px; }
  .menu a, .menu button.mk { padding: 0 10px; font-size: 15px; }
  .hl-rij { grid-template-columns: 56px minmax(0, 1fr) 110px 130px 120px 150px 120px; gap: 12px; }
  .strook ul li:nth-child(3) { display: none; }
}
@media (max-width: 1180px) {
  .menu-rr { display: none; }
  .ontwerp-knop span { display: none; }
  .ontwerp-knop { padding: 0 12px; }
  .kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
  .feit b { font-size: 34px; }
  .maatzoeker { grid-template-columns: 170px 104px 14px 130px minmax(0, 1fr) auto; }
  .hl-rij .knop { display: none; }
  .hl-rij { grid-template-columns: 56px minmax(0, 1fr) 110px 130px 120px 150px; }
}
@media (max-width: 1024px) {
  :root { --rand: 24px; }
  .menu { display: none; }
  .strook .wie { display: none; }
  .menuknop { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; margin-left: -10px; }
  .kop-r { grid-template-columns: 44px auto minmax(0, 1fr) auto auto; gap: 16px; }
  html { scroll-padding-top: 110px; }
  .filters, .koop, .wagen-r, .acc-nav, .inhoud { top: 104px; }
  .pdp-nav { top: 85px; }
  .strook ul li:nth-child(2) { display: none; }
  .acties .actie:first-child { display: none; }
  .held { height: 560px; }
  .held h1 { font-size: 56px; }
  .maatzoeker { grid-template-columns: 104px 14px 104px minmax(0, 1fr) auto; }
  .maatzoeker > div:first-child { grid-column: 1 / -1; }
  .mz-veel { grid-column: 1 / -1; }
  .feiten { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .feit:nth-child(4) { padding-left: 0; border-left: 0; }
  .bento { grid-auto-rows: 220px; }
  .tegel { grid-column: span 6; } .tegel.groot { grid-column: span 12; grid-row: span 2; }
  .afd-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ontw-l, .ontw-r { grid-column: 1 / -1; }
  .hl-rij, .hl-lijst .hl-rij { grid-template-columns: 56px minmax(0, 1fr) 100px 120px 150px; }
  .hl-len { display: none; }
  .soorten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .balie-foto, .balie-t { grid-column: 1 / -1; }
  .balie-foto img { min-height: 0; aspect-ratio: 16 / 10; }
  .dienst .zl { grid-column: 1 / -1; } .dienst .rh, .dienst .bz { grid-column: span 6; }
  .kennis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kennis .art:nth-child(3) { display: none; }
  .voet-contact .vakman { grid-column: 1 / -1; }
  .vk, .vk:nth-child(2) { grid-column: span 4; }
  .voet .knop { grid-column: span 12; justify-self: start; }
  .voet-kol > div, .voet-kol > div:first-child { grid-column: span 4; }
  .voet-kol > div:first-child { grid-column: 1 / -1; }
  .cat { grid-template-columns: minmax(0, 1fr); }
  .filters { display: none; }
  .filterknop { display: inline-flex; }
  .galerij, .koop { grid-column: 1 / -1; }
  .koop { position: static; }
  .pdp-twee > :first-child, .pdp-twee > :last-child { grid-column: 1 / -1; }
  .wagen-l, .wagen-r { grid-column: 1 / -1; }
  .wagen-r { position: static; }
  .acc { grid-template-columns: minmax(0, 1fr); }
  .acc-nav { position: static; display: flex; overflow-x: auto; gap: 4px; }
  .acc-nav a { white-space: nowrap; }
  .twee-kol > .hoofd, .twee-kol > .zij { grid-column: 1 / -1; }
  .ontw-rij .scherm, .ontw-rij > div:last-child, .ontw-rij.om .scherm, .ontw-rij.om > div:last-child { grid-column: 1 / -1; order: 0; }
  .vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soortrooster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-onder .tekst, .cat-onder .faq { grid-column: 1 / -1; }
}

/* ---------- telefoon ---------- */
@media (max-width: 760px) {
  :root { --rand: 16px; --gat: 16px; }
  html { scroll-padding-top: 120px; }
  body { font-size: 16px; }
  .sec { padding-block: 56px; }
  .sec-s { padding-block: 40px; }
  .h1 { font-size: 34px; } .h2 { font-size: 28px; } .h3 { font-size: 20px; }
  .lead { font-size: 16.5px; }
  .skop { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
  .strook .w { justify-content: center; height: 34px; }
  .strook ul li:not(:first-child), .strook-r { display: none; }
  .kop-r { grid-template-columns: 44px auto minmax(0, 1fr) auto; grid-template-rows: 64px auto; gap: 0 8px; height: auto; }
  .menuknop { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; margin-left: -10px; }
  .logo img { height: 40px; }
  .kop .zoek { grid-column: 1 / -1; grid-row: 2; margin-bottom: 12px; }
  .filters, .koop, .wagen-r, .acc-nav, .inhoud, .galerij { top: 132px; }
  .zoek input { height: 46px; font-size: 16px; }
  .zoek button { width: 36px; height: 36px; }
  .ontwerp-knop { display: none; }
  .acties { grid-column: 4; gap: 0; }
  .actie { min-width: 44px; padding: 8px; font-size: 0; gap: 0; }
  .actie b { top: 2px; right: 0; font-size: 13px; }
  .acties .actie:first-child { display: none; }
  .menu { display: none; }
  .kruimel { font-size: 13.5px; padding-top: 14px; }
  .pkop h1 { font-size: 32px; }

  .held { height: auto; }
  .held::after { background: linear-gradient(0deg, rgba(9,20,14,.9) 0%, rgba(9,20,14,.62) 55%, rgba(9,20,14,.1) 100%); }
  .held .w { justify-content: flex-end; padding: 210px 0 88px; }
  .held h1 { font-size: 38px; }
  .knop.groot { min-height: 52px; font-size: 16.5px; }
  .held p { font-size: 16.5px; margin-top: 14px; }
  .held .knoppen { margin-top: 22px; }
  .held .knoppen .knop { flex: 1; padding: 0 14px; }
  .maatzoeker { margin-top: -56px; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); gap: 10px; padding: 18px 16px; }
  .maatzoeker > div:first-child { grid-column: 1 / -1; }
  .maatzoeker .mz-soort, .maatzoeker > .knop { grid-column: 1 / -1; }
  .mz-veel { grid-column: 1 / -1; }
  .feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; padding-top: 32px; }
  .feit { padding: 0 0 0 16px; }
  .feit:nth-child(odd) { padding-left: 0; border-left: 0; }
  .feit:nth-child(4) { padding-left: 16px; border-left: 1px solid var(--lijn); }
  .feit:nth-child(5) { display: none; }
  .feit b { font-size: 30px; }
  .feit span { font-size: 14px; }

  .bento { grid-auto-rows: 168px; gap: var(--gat); }
  .tegel, .tegel.groot { grid-column: span 6; grid-row: span 1; }
  .tegel.groot { grid-column: span 12; grid-row: span 1; }
  .tegel-t { left: 14px; right: 14px; bottom: 12px; }
  .tegel-t b, .tegel.groot .tegel-t b { font-size: 19px; }
  .tegel.groot .tegel-t b { font-size: 24px; }
  .tegel-t span { display: none; }
  .tegel.groot .tegel-t span { display: block; }
  .tegel-t i { display: none; }
  .tegel .drie { left: 12px; top: 12px; height: 26px; font-size: 13px; padding: 0 9px; }
  .afd-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gat); margin-top: var(--gat); }
  .afd-r { flex-direction: column; align-items: flex-start; gap: 10px; padding: 10px; font-size: 15px; line-height: 1.25; }
  .afd-r img { width: 100%; height: 88px; }
  .afd-r small, .afd-r > svg { display: none; }

  .ontw-tab em { display: none !important; }
  .ontw-punten { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ontw-l .knoppen .knop { flex: 1; }

  .hl-kop { flex-direction: column; align-items: flex-start; }
  .hl-chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .hl-kopr { display: none !important; }
  .hl-rij, .hl-lijst .hl-rij { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "f n p" "f m v"; gap: 2px 14px; padding: 14px 16px; }
  .hl-rij > img { grid-area: f; align-self: start; }
  .hl-naam { grid-area: n; } .hl-maat { grid-area: m; font-size: 15px; } .hl-pm { grid-area: p; font-size: 16px; } .hl-rij .vr-c { grid-area: v; justify-self: end; } .hl-len, .hl-rij .naar { display: none; }
  .hl-naam span { display: none; }
  .hl-voet { flex-direction: column; }

  .soorten { gap: 24px 16px; }
  .soort h3 { font-size: 17px; margin-top: 12px; } .soort p { display: none; }
  .balie-feiten { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .dienst .rh, .dienst .bz { grid-column: 1 / -1; }
  .kaartje { padding: 20px; }
  .zl-uit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zl-voet { flex-direction: column; align-items: stretch; }
  .kennis { grid-template-columns: minmax(0, 1fr); }
  .kennis .art:nth-child(3) { display: grid; }
  .kennis .art { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 2px 14px; }
  .kennis .art img { grid-row: span 3; aspect-ratio: 4 / 3; }
  .kennis .art .rub { margin-top: 0; } .kennis .art h3 { font-size: 16.5px; margin-top: 2px; } .kennis .art p { display: none; }

  .voet-contact { padding: 40px 0 32px; row-gap: 20px; }
  .vk, .vk:nth-child(2) { grid-column: span 6; }
  .voet .knop { grid-column: 1 / -1; width: 100%; }
  .voet-kol { padding: 32px 0; row-gap: 28px; }
  .voet-kol > div { grid-column: span 6; }
  .voet-onder { flex-direction: column; align-items: flex-start; padding-bottom: 96px; }

  .kaarten, .kaarten.drie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .pk-naam { font-size: 15px; } .pk-prijs { font-size: 19px; } .pk-maat { font-size: 13px; margin-top: 10px; }
  .pk-per { font-size: 13px; }
  .kaarten.met-foto-banner .banner { grid-column: 1 / -1; grid-row: span 1; min-height: 220px; }
  .balk { flex-wrap: wrap; }
  .balk-l .wissel { display: none; }
  .balk-r { width: 100%; justify-content: space-between; }
  .balk-r .kies { flex: 1; min-width: 0; }
  .balk-r .wissel button { padding: 0 10px; }
  .balk-l > span { font-size: 14px; }
  .actief { display: none; }
  .hub-kop { height: 320px; border-radius: var(--r); }
  .hub-kop > div { padding: 24px; }
  .hub-kop h1 { font-size: 34px; }
  .hub-kop p { font-size: 16px; }
  .soortrooster { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .st { grid-template-columns: 72px minmax(0, 1fr); } .st img { width: 72px; height: 56px; }

  .pdp-kop { padding-bottom: 16px; }
  .pdp-kop h1 { font-size: 30px; }
  .galerij { grid-template-columns: minmax(0, 1fr); }
  .duimen { order: 2; flex-direction: row; overflow-x: auto; }
  .duim { flex: none; width: 64px; height: 64px; }
  .hoofdfoto { aspect-ratio: 4 / 3; border-radius: var(--r); }
  .koop-prijs b { font-size: 34px; }
  .lr { grid-template-columns: 62px minmax(0, 1fr) 112px; grid-template-areas: "l p t" "l v t"; padding: 12px; gap: 2px 10px; }
  .lr > b { grid-area: l; } .lr > .p { grid-area: p; } .lr > .vr { grid-area: v; font-size: 13px; } .lr > .teller { grid-area: t; }
  .lr-k { display: none; }
  .lr .p small { display: none; }
  .totaal { display: none; }
  .krijgen { grid-template-columns: minmax(0, 1fr); }
  .pdp-nav { display: none; }
  .galerij { position: static; }
  .reken { grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); }
  .reken .knop { grid-column: 1 / -1; }
  .pdp-meta > * + *::before { margin-right: 8px; }
  .pdp-meta { gap: 4px 8px; font-size: 14px; }
  .pdp-sec { padding-top: 48px; }
  .specs { font-size: 14.5px; }
  .specs th { width: 46%; }
  .pdp-nav .w { gap: 22px; height: 50px; }
  .goed { grid-template-columns: minmax(0, 1fr); }
  .cr { grid-template-columns: 22px 52px minmax(0, 1fr); gap: 12px; padding: 12px 14px; }
  .cr img { width: 52px; height: 40px; }
  .cr em { grid-column: 3; }
  .verg { font-size: 13.5px; }
  .verg tbody th { font-size: 13px; }
  .verg th, .verg td { padding: 10px 12px; }
  .plakbalk { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--wit); border-top: 1px solid var(--lijn); box-shadow: 0 -8px 24px rgba(16,36,26,.08); }
  .plakbalk span { display: block; font-size: 13px; color: var(--sub); }
  .plakbalk b { font-size: 20px; white-space: nowrap; }
  .plakbalk .knop { flex: 1; }
  .feitjes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .past { grid-template-columns: minmax(0, 1fr); }
  .plat { max-width: 240px; margin: 24px 0 0 0; }

  .stappen { margin: 16px 0 24px; overflow-x: auto; }
  .stappen li + li::before { width: 20px; margin: 0 8px; }
  .stappen li { font-size: 13.5px; }
  .wr { position: relative; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "f n n" "f t s"; gap: 10px 14px; padding: 14px 16px; }
  .wr > div:nth-child(2) { padding-right: 30px; }
  .zaagkaart { grid-template-columns: minmax(0, 1fr) !important; }
  .zaagkaart > svg { display: none; }
  .zaagkaart .knop { justify-self: start; }
  .wr img { grid-area: f; width: 72px; height: 54px; align-self: start; }
  .wr > div:nth-child(2) { grid-area: n; } .wr .teller { grid-area: t; width: 112px; } .wr .som { grid-area: s; align-self: center; } .wr .weg { position: absolute; top: 10px; right: 8px; }
  .wgroep-k { flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; }
  .overzicht, .vak { padding: 23px; }
  .velden { grid-template-columns: minmax(0, 1fr); }
  .velden .v2, .velden .v3, .velden .v4, .velden .v6 { grid-column: 1 / -1; }
  .dagen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dagen .dag:nth-child(n+4) { display: none; }
  .betaalw { grid-template-columns: minmax(0, 1fr); }
  .acc-grid { grid-template-columns: minmax(0, 1fr); }
  .vier { grid-template-columns: minmax(0, 1fr); }
  .artikel p, .artikel li { font-size: 16.5px; }
  .artikel h2 { font-size: 24px; }
  .inhoud { display: none; }
  .materiaal li { grid-template-columns: 40px minmax(0, 1fr); }
  .materiaal li em { grid-column: 2; }
  .materiaal-voet { flex-direction: column; align-items: stretch; }
  .tabel { font-size: 14px; }
  .kaart-route div { flex-direction: column; align-items: stretch; }
  .order { grid-template-columns: minmax(0, 1fr) auto; }
  .order > :last-child { grid-column: 1 / -1; justify-content: space-between; }
  .soorten.drie3 { grid-template-columns: minmax(0, 1fr) !important; }
  .vakband { grid-template-columns: 64px minmax(0, 1fr) !important; }
  .vakband .knoppen { grid-column: 1 / -1; }
  .vakband .knoppen .knop { flex: 1; }
  .wagen-r { order: 0; }
  .zl-art { font-size: 14.5px; }
  .tabel th, .tabel td { padding: 10px 12px; }
  .ontw-rij { padding: 40px 0; }
  .zoekkop h1 { font-size: 28px; }
  .mkbalk span { display: none; }
  .mkbalk a { padding: 7px 9px; font-size: 13px; }
  .mkbalk { bottom: 10px; }
  .heeft-plakbalk .mkbalk { bottom: 84px; }
  .heeft-plakbalk .voet-onder { padding-bottom: 150px; }
}
.st span .nb { display: inline; }
.inhoud a.naar3d { display: grid; padding: 12px; border: 1px solid var(--lijn); border-radius: var(--r); grid-template-columns: 96px minmax(0, 1fr); }
.inhoud a.naar3d img { width: 96px; height: 64px; }
.inhoud a.naar3d span { color: var(--sub); }

/* ronde 1: kopteksten zonder labeltje, vakband, bouwpakket */
.zonder-kick .kick { display: none; }
.vakband { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.vakband img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: #fff; }
.vakband b { display: block; color: #fff; font-size: 20px; font-weight: 800; }
.vakband .knoppen { margin: 0; }
.knop.leeg { background: var(--vlak); border-color: var(--lijn); color: var(--sub); }
@media (max-width: 1024px) { .wagen-l { order: 1; } .wagen-r { order: 2; } }