/* MW Leidingsystemen, ontwerp ronde 6: fijn en strak. Eén letter, één raster van 12 kolommen, dunne lijnen,
   producten los op één tegelkleur, één accent uit het logo. Geen kaders om kaders, geen hoofdletters, geen zware vlakken. */
@font-face { font-family: Geist; src: url(geist.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Geist; src: url(geist-ext.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; src: url(geist-mono.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --w: 1320px; --gut: 40px; --gat: 24px; --r: 6px; --r2: 10px;
  --inkt: #0e2230; --sub: #54646f; --zacht: #667580;
  --lijn: #e7eaed; --lijn2: #d3d9de;
  --vlak: #f4f5f7; --vlak2: #eceff2;
  --blauw: #38b8e8; --blauw2: #1fa9de; --link: #0a6c98;
  --groen: #12845b; --geel: #b4690e; --rood: #bb3a2c;
  --sec: 104px; --sec-s: 72px; --kop1: 72px; --kop2: 45px; --kop-h: 117px;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
body.menu-uit { --kop-h: 72px; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-top: 137px; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: Geist, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.55; color: var(--inkt); background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
main { flex: 1 0 auto; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, 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%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input, textarea, select, button { outline: 0; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; border-radius: 2px; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.naar-inhoud { position: fixed; top: 8px; left: 8px; z-index: 80; padding: 10px 14px; border-radius: var(--r); background: var(--inkt); color: #fff; font-size: 14px; transform: translateY(-200%); }
.naar-inhoud:focus { transform: none; }
.w { width: 100%; max-width: calc(var(--w) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.bezoeker .als-in { display: none !important; }
html:not(.bezoeker) .als-uit { display: none !important; }
.sec { padding-block: var(--sec); }
.sec.klein { padding-block: var(--sec-s); }
.sec + .sec { padding-top: 0; }
.vlak-sec { background: var(--vlak); }
.vlak-sec + .sec, .sec + .vlak-sec { padding-top: var(--sec); }

/* ---------- letters: vaste reeks 13, 14, 15, 16, 18, 22, 28, 40, 60 ---------- */
.h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
.h2 { font-size: 28px; line-height: 1.18; letter-spacing: -.022em; text-wrap: balance; }
.h3 { font-size: 18px; line-height: 1.3; letter-spacing: -.012em; }
.lead { font-size: 16px; line-height: 1.55; color: var(--sub); max-width: 60ch; }
.stil { font-size: 13px; line-height: 1.45; color: var(--sub); }
.tnum, .pr, .t-nr { font-variant-numeric: tabular-nums; }
.meer { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.meer svg { transition: transform .15s; }
.meer:hover svg { transform: translateX(3px); }
.link { color: var(--link); }
.link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.skop { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 32px; margin-bottom: 32px; }
.skop .lead { margin-top: 8px; }

/* ---------- knoppen: 44 hoog, klein 36; één hoofdknop in het merkblauw, de rest licht ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 1px solid var(--blauw); border-radius: var(--r); background: var(--blauw); color: var(--inkt); font-size: 15px; font-weight: 500; white-space: nowrap; transition: background .12s, border-color .12s; }
.knop:hover { background: var(--blauw2); border-color: var(--blauw2); }
.knop.groot { height: 48px; padding: 0 24px; }
.knop.klein { height: 36px; padding: 0 14px; font-size: 14px; }
.knop.breed { width: 100%; }
.knop.twee { background: #fff; border-color: var(--lijn2); }
.knop.twee:hover { background: #fff; border-color: var(--inkt); }
.knop[disabled] { opacity: .45; cursor: default; }
.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 12px; }

/* ---------- velden ---------- */
.veld { display: block; }
.veld > span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.veld small { font-weight: 400; color: var(--sub); }
.inv, .veld input, .veld select, .veld textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--lijn2); border-radius: var(--r); background: #fff; font-size: 15px; line-height: 1.4; appearance: none; transition: border-color .12s; }
.veld select, select.inv { padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2354646f' stroke-width='1.5' 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; }
.inv:focus, .veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--inkt); }
.veld textarea { min-height: 112px; resize: vertical; }
.velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px var(--gat); }
.velden .heel { grid-column: 1 / -1; }
.bestand { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border: 1px dashed var(--lijn2); border-radius: var(--r); font-size: 14px; color: var(--sub); cursor: pointer; }
.bestand:hover { border-color: var(--inkt); }
.bestand input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; }
.keus { display: grid; gap: 8px; }
.keus-k { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 56px; padding: 10px 16px; border: 1px solid var(--lijn2); border-radius: var(--r); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.keus-k:hover { border-color: var(--inkt); }
.keus-k:has(input:checked) { border-color: var(--inkt); box-shadow: inset 0 0 0 .5px var(--inkt); }
.keus-k input { appearance: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--lijn2); border-radius: 50%; background: #fff; }
.keus-k input:checked { border: 5px solid var(--inkt); }
.keus-k small { display: block; font-size: 13px; color: var(--sub); }
.keus-k b { font-size: 15px; font-weight: 500; }
.keus-k em { font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---------- kop ---------- */
.kop { position: sticky; top: 0; z-index: 51; background: #fff; }
.kop-r { display: grid; grid-template-columns: 232px minmax(0, 1fr) auto; column-gap: 24px; align-items: center; height: var(--kop1); }
.logo { display: block; width: 213px; padding-block: 8px; }
.logo img { display: block; width: 100%; height: auto; }
.menuknop { display: none; align-items: center; gap: 6px; height: 44px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; }
.zoek { position: relative; display: flex; align-items: center; height: 44px; max-width: 640px; border-radius: var(--r); background: var(--vlak); transition: background .12s, box-shadow .12s; }
.zoek:hover { background: var(--vlak2); }
.zoek:focus-within, .zoek.open { background: #fff; box-shadow: inset 0 0 0 1px var(--lijn2); }
.zk-i { flex: none; display: grid; place-items: center; width: 44px; color: var(--sub); }
.zoek input { flex: 1; min-width: 0; height: 44px; padding: 0 44px 0 0; border: 0; background: none; font-size: 15px; appearance: none; }
.zoek input::placeholder { color: var(--sub); opacity: 1; }
.zoek input::-webkit-search-cancel-button { display: none; }
.zoek-weg { position: absolute; top: 0; right: 0; display: none; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--sub); }
.zoek.open .zoek-weg { display: grid; }
.zoek-tel { display: none; }
.kop-acties { display: flex; align-items: center; gap: 24px; }
.kop-tel { display: grid; line-height: 1.3; white-space: nowrap; text-align: right; font-size: 13px; }
.kop-tel b { font-size: 15px; font-variant-numeric: tabular-nums; }
.kop-tel:hover b { color: var(--link); }
.nuopen { display: inline-flex; align-items: center; justify-content: inherit; gap: 6px; font-size: 13px; color: var(--sub); white-space: nowrap; }
.nuopen i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lijn2); }
.nuopen.open i { background: var(--groen); }
.kop-tel .nuopen { justify-content: flex-end; }
.actie { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.actie:hover { color: var(--link); }
.zoek-knop, .actie-tel { display: none; }
.actie-wagen b { display: none; }
[data-wagen-tot] { min-width: 44px; font-variant-numeric: tabular-nums; }

.balk { position: sticky; top: var(--kop1); z-index: 50; background: #fff; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); transition: transform .2s ease; }
.menu-uit .balk { transform: translateY(-100%); }
.balk-r { display: grid; grid-template-columns: 232px minmax(0, 1fr) auto; column-gap: 24px; align-items: stretch; height: 43px; }
.balk-m { display: flex; gap: 24px; min-width: 0; }
.balk-rest { display: flex; align-items: stretch; gap: 24px; }
.balk-m > a, .balk-rest > a, .mk { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font-size: 15px; white-space: nowrap; box-shadow: inset 0 0 0 transparent; transition: box-shadow .12s, color .12s; }
.mk { justify-self: start; font-weight: 500; }
.balk-m > a:hover, .balk-m > a.aan, .balk-m > a.open-m, .mk:hover, .mk.open-m, .balk-rest > a:hover { box-shadow: inset 0 -1.5px 0 var(--inkt); }
.balk-rest > a { font-size: 14px; color: var(--sub); }
.balk-rest > a:hover { color: var(--inkt); }
.btw { display: inline-flex; align-self: center; height: 28px; padding: 2px; border-radius: var(--r); background: var(--vlak); }
.btw button { min-width: 44px; padding: 0 8px; border: 0; border-radius: 4px; background: none; font-size: 13px; color: var(--sub); }
.btw button.aan { background: #fff; color: var(--inkt); box-shadow: 0 1px 2px rgba(14,34,48,.14); }

/* paneel onder de menubalk */
.mega { position: absolute; top: 100%; left: 0; right: 0; display: none; max-height: calc(100vh - 124px); overflow-y: auto; background: #fff; border-top: 1px solid var(--lijn); box-shadow: 0 32px 48px -32px rgba(14,34,48,.22); }
.mega.open { display: block; animation: paneel .14s ease-out; }
@keyframes paneel { from { opacity: 0; transform: translateY(-4px); } }
.mega-paneel { display: none; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); padding-block: 28px 36px; }
.mega-paneel.aan { display: grid; }
.mega-l { grid-column: span 9; min-width: 0; }
.mega-kop { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.mega-kop h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.016em; }
.mega-kop h3 a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mega-kol { display: grid; grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); gap: 0 var(--gat); }
.mg { min-width: 0; }
.mg-los { margin-top: 20px; }
.mg-t { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
a.mg-t:hover { color: var(--link); }
.mg-t small { color: var(--sub); font-weight: 400; font-variant-numeric: tabular-nums; }
.ms { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 48px; padding: 4px 8px 4px 4px; margin-left: -4px; border-radius: var(--r); font-size: 14px; line-height: 1.3; }
.ms:hover { background: var(--vlak); }
.ms .tg { width: 40px; height: 40px; border-radius: 4px; }
.ms small { display: block; color: var(--sub); font-variant-numeric: tabular-nums; }
.mega-r { grid-column: 10 / span 3; min-width: 0; }
.mega-r h4 { margin-bottom: 8px; font-size: 14px; }
.mh { display: block; padding: 8px 0; font-size: 14px; line-height: 1.35; color: var(--sub); }
.mh:hover { color: var(--inkt); }
.mega-alles { grid-column: 1 / -1; }
.mega-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gat); }
.mt { display: block; min-width: 0; }
.mt .tg { aspect-ratio: 4 / 3; border-radius: var(--r2); }
.mt b { display: block; margin-top: 10px; font-size: 15px; line-height: 1.3; }
.mt small { color: var(--sub); font-variant-numeric: tabular-nums; }
.mt:hover .tg { background: var(--vlak2); }
.mega-service { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--lijn); font-size: 14px; }
.mega-service a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sluier { position: fixed; inset: 0; z-index: 41; display: none; background: rgba(14,34,48,.28); }
.sluier.aan { display: block; }
@media (min-width: 1025px) { .sluier.boven { z-index: 50; } }

/* zoekpaneel */
.zoek-pan { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; display: none; width: calc(min(100vw - 2 * var(--gut), var(--w)) - 256px); max-height: calc(100vh - 96px); overflow-y: auto; border-radius: var(--r2); background: #fff; box-shadow: 0 0 0 1px var(--lijn), 0 24px 48px -16px rgba(14,34,48,.28); }
.zoek.open .zoek-pan { display: block; animation: paneel .12s ease-out; }
.zs-k { display: grid; grid-template-columns: minmax(0, 1fr); }
.zs-k.twee { grid-template-columns: 300px minmax(0, 1fr); }
.zs-links { padding: 16px; }
.zs-rechts { padding: 16px; }
.zs-k.twee .zs-rechts { border-left: 1px solid var(--lijn); }
.zs-t { margin: 16px 0 6px 8px; font-size: 13px; color: var(--sub); }
.zs-t:first-child { margin-top: 0; }
.zs-rij { display: block; padding: 8px; border-radius: var(--r); font-size: 14px; line-height: 1.35; }
.zs-rij:hover, .zs-rij.act { background: var(--vlak); }
.zs-rij small { display: block; color: var(--sub); }
.zs-rij mark, .zs-a mark { background: none; color: inherit; font-weight: 600; }
.zs-a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 6px 8px; }
.zs-a .tg { width: 56px; height: 56px; border-radius: 4px; }
.zs-a b { display: block; font-weight: 400; }
.zs-a small { display: flex; flex-wrap: wrap; gap: 0 12px; }
.zs-a em { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zs-a em small { display: block; font-weight: 400; text-align: right; }
.zs-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--lijn); font-size: 14px; font-weight: 500; }
.zs-voet:hover, .zs-voet.act { background: var(--vlak); }
.zs-niets { padding: 24px; font-size: 14px; color: var(--sub); }
.zs-niets b { color: var(--inkt); }
.zs-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.zs-tegel { display: block; padding: 4px; }
.zs-tegel .tg { aspect-ratio: 4 / 3; border-radius: var(--r); }
.zs-tegel span:last-child { display: block; margin-top: 6px; line-height: 1.3; }
.zs-laad { padding: 24px; font-size: 14px; color: var(--sub); }

/* telefoonmenu en lade */
.tel-menu { display: none; border-bottom: 1px solid var(--lijn); }
.tel-menu > div { display: flex; justify-content: space-between; padding-inline: var(--gut); }
.tel-menu a, .tm-meer { flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0; border: 0; background: none; font-size: 15px; white-space: nowrap; }
.tel-menu a.aan { box-shadow: inset 0 -1.5px 0 var(--inkt); }
.tm-meer { font-weight: 500; }
.lade-sluier { position: fixed; inset: 0; z-index: 60; display: none; background: rgba(14,34,48,.34); }
.lade-sluier.aan { display: block; }
.lade { position: fixed; top: 0; bottom: 0; left: 0; z-index: 61; width: min(420px, 100vw); overflow: hidden; background: #fff; transform: translateX(-102%); transition: transform .24s ease; }
.lade.open { transform: none; }
html.lade-open { overflow: hidden; }
.lade-k { display: flex; justify-content: space-between; align-items: center; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--lijn); }
.lade-k img { height: 26px; width: auto; }
.lade-k button { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; }
.lade-vel { position: absolute; top: 57px; bottom: 0; left: 0; right: 0; overflow-y: auto; padding: 8px 16px 40px; background: #fff; transform: translateX(100%); visibility: hidden; transition: transform .24s ease, visibility .24s; }
.lade-vel.aan { transform: none; visibility: visible; }
.lade-start { transform: none; visibility: visible; }
.lade-start.weg { transform: translateX(-24%); visibility: hidden; }
.lade h4 { margin: 20px 0 4px; font-size: 13px; font-weight: 400; color: var(--sub); }
.la { display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; align-items: center; column-gap: 12px; width: 100%; min-height: 56px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--lijn); background: none; font-size: 15px; line-height: 1.3; text-align: left; }
.la .tg { width: 44px; height: 44px; border-radius: 4px; }
.la small { display: block; color: var(--sub); font-variant-numeric: tabular-nums; }
.la svg:not(.geen) { color: var(--sub); }
.lb { display: flex; align-items: center; min-height: 44px; font-size: 15px; border-bottom: 1px solid var(--lijn); }
.terug { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0; border: 0; background: none; font-size: 14px; color: var(--sub); }
.lade-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0 12px; border-bottom: 1px solid var(--lijn); }
.lade-kop h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.016em; }
.lade-open-nu { display: flex; padding: 12px 0 0; }

/* ---------- productfoto in een tegel ---------- */
.tg { position: relative; display: block; overflow: hidden; aspect-ratio: 1; background: var(--vlak); isolation: isolate; transition: background .15s; }
.tg img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.tg.vol img { inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; mix-blend-mode: normal; }
.tg.rand img { inset: 0 !important; width: 100% !important; height: 100% !important; object-position: var(--x, center) var(--y, center); }
.r-l { --x: left; } .r-r { --x: right; } .r-t { --y: top; } .r-b { --y: bottom; }
.tg .geen { position: absolute; top: 50%; left: 50%; width: 36%; transform: translate(-50%, -50%); color: var(--lijn2); }

/* ---------- prijs, voorraad, koop ---------- */
.pr { white-space: nowrap; }
.pr b { font-weight: 500; }
.per { font-size: 13px; color: var(--sub); }
.log { font-size: 13px; color: var(--link); white-space: nowrap; }
.log:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.vr { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vr i { flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--lijn2); background: #fff; }
.vr.ja { color: var(--inkt); }
.vr.ja i { border-color: var(--groen); background: var(--groen); }
.kp { display: inline-flex; overflow: hidden; border-radius: var(--r); background: var(--vlak); transition: background .1s, box-shadow .1s; }
.kp:focus-within { box-shadow: inset 0 0 0 1px var(--lijn2); background: #fff; }
.t-rij:not(.t-kop):hover .kp, .t-hier .kp { background: #fff; }
.aantal { width: 44px; height: 32px; padding: 0; border: 0; background: none; font-size: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.in { display: grid; place-items: center; width: 36px; height: 32px; padding: 0; border: 0; box-shadow: inset 1px 0 0 var(--lijn2); background: none; transition: background .12s, box-shadow .12s; }
.in:hover, .in.klaar { box-shadow: none; background: var(--blauw); }

/* ---------- kruimelpad ---------- */
.kruimel { padding-block: 20px 0; font-size: 13px; color: var(--sub); }
.kr-breed { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.kr-breed a:hover { color: var(--inkt); }
.kr-breed span { color: var(--inkt); }
.kr-breed svg { color: var(--lijn2); }
.kr-terug { display: none; align-items: center; gap: 4px; min-height: 40px; font-size: 14px; color: var(--inkt); }

/* ---------- start ---------- */
.open-t { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); align-items: end; padding-block: 64px 48px; }
.open-t h1 { grid-column: 1 / span 8; font-size: 60px; line-height: 1.04; letter-spacing: -.038em; text-wrap: balance; }
.open-r { grid-column: 9 / span 4; }
.open-r p { font-size: 16px; line-height: 1.55; color: var(--sub); }
.open-r .knoppen { margin-top: 20px; }
.open-b { display: block; overflow: hidden; height: clamp(240px, 32.5vw, 620px); background: var(--vlak2); }
.open-b img { width: 100%; height: 100%; object-fit: cover; animation: open-in 1.1s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes open-in { from { transform: scale(1.035); } }
.feiten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gat); padding-block: 40px; }
.feit b { display: block; font-size: 28px; line-height: 1.15; letter-spacing: -.022em; font-variant-numeric: tabular-nums; }
.feit span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--sub); }

.groepen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--gat); }
.gt { display: block; min-width: 0; }
.gt .tg { aspect-ratio: 16 / 10; border-radius: var(--r2); }
.gt .tg img { inset: 8% 20%; width: 60%; height: 84%; }
.gt:hover .tg { background: var(--vlak2); }
.gt:hover .tg img, .sub-t:hover .tg img, .pk:hover .tg img, .art:hover img { transform: scale(1.025); }
.gt-k { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; }
.gt-k b { font-size: 18px; line-height: 1.3; letter-spacing: -.012em; }
.gt-k small { color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gt p { margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--sub); }

.snel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); align-items: center; }
.snel-t { grid-column: 1 / span 4; }
.snel-t .lead { margin-top: 12px; }
.snel-t .knoppen { margin-top: 24px; }
.snel-k { grid-column: 6 / span 7; min-width: 0; }
.sb { --sbr: 64px; border-radius: var(--r2); background: #fff; box-shadow: 0 0 0 1px var(--lijn); overflow: hidden; }
.sb-kop, .sb-romp { display: grid; grid-template-columns: 216px minmax(0, 1fr); }
.sb.groot .sb-kop, .sb.groot .sb-romp { grid-template-columns: 320px minmax(0, 1fr); }
.sb-kop { border-bottom: 1px solid var(--lijn); font-size: 13px; color: var(--sub); }
.sb-kop span { padding: 10px 16px; }
.sb-kop span:first-child, .sb-in { border-right: 1px solid var(--lijn); }
.sb-in { min-width: 0; }
.sb-in textarea { display: block; width: 100%; padding: 0 16px; border: 0; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--sbr) - 1px), var(--lijn) calc(var(--sbr) - 1px), var(--lijn) var(--sbr)); font-family: var(--mono); font-size: 14px; line-height: var(--sbr); resize: none; overflow: hidden; white-space: pre; }
.sb-in textarea::placeholder { color: var(--zacht); opacity: 1; }
.sb-uit { min-width: 0; }
.sb-rij { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; height: var(--sbr); padding: 0 16px; border-bottom: 1px solid var(--lijn); font-size: 14px; line-height: 1.3; }
.sb-rij .tg { width: 44px; height: 44px; border-radius: 4px; }
.sb-rij a:hover { color: var(--link); }
.sb-rij small { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin-top: 2px; color: var(--sub); }
.sb-rij em { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.sb-rij.mis { grid-template-columns: minmax(0, 1fr); color: var(--rood); }
.sb-rij.hint { grid-template-columns: minmax(0, 1fr); color: var(--sub); }
.sb-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; }
.sb-voet b { display: block; font-size: 18px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sb-voet small { color: var(--sub); }

.kaarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--gat); }
.pk { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; min-width: 0; }
.pk-f .tg { border-radius: var(--r2); }
.pk:hover .tg { background: var(--vlak2); }
.pk-n { margin-top: 12px; font-size: 14px; font-weight: 400; line-height: 1.4; }
.pk-n a:hover { color: var(--link); }
.pk-m { margin-top: 8px; }
.pk-o { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 32px; margin-top: 8px; }
.pk-p { font-size: 15px; }

.advies { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); align-items: center; }
.advies-f { grid-column: 1 / span 7; overflow: hidden; border-radius: var(--r2); aspect-ratio: 16 / 10; background: var(--vlak); }
.advies-f img { width: 100%; height: 100%; object-fit: cover; }
.advies-t { grid-column: 9 / span 4; }
.advies-t .lead { margin-top: 12px; }
.stappen { margin-top: 24px; }
.stappen li { padding-block: 12px; border-top: 1px solid var(--lijn); }
.stappen li:last-child { border-bottom: 1px solid var(--lijn); }
.stappen b { display: block; font-size: 15px; }
.stappen span { display: block; font-size: 14px; color: var(--sub); }
.advies-t .knoppen { margin-top: 24px; }

.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gat); }
.tm-f { display: block; overflow: hidden; aspect-ratio: 622 / 457; border-radius: var(--r2); background: var(--vlak); }
.tm-f img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.tm b { display: block; margin-top: 12px; font-size: 15px; }
.tm span { display: block; font-size: 14px; color: var(--sub); }
.tm a { display: inline-block; margin-top: 2px; font-size: 14px; color: var(--link); overflow-wrap: anywhere; }
.tm a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.kennis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--gat); }
.art { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; min-width: 0; }
.art .art-f { display: block; overflow: hidden; aspect-ratio: 1200 / 630; border-radius: var(--r2); background: var(--vlak); }
.art img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.art h3 { margin-top: 14px; font-size: 18px; line-height: 1.3; letter-spacing: -.012em; text-wrap: pretty; }
.art small { display: block; margin-top: 4px; color: var(--sub); }
.art:hover h3 { color: var(--link); }

/* ---------- hoofdgroep ---------- */
.pkop { padding-block: 24px 40px; }
.pkop h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
.pkop .lead { margin-top: 12px; }
.pkop-r { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 40px; }
.hub-b { display: block; overflow: hidden; height: clamp(180px, 20vw, 340px); margin-bottom: 56px; background: var(--vlak2); }
.hub-b img { width: 100%; height: 100%; object-fit: cover; }
.hub-g { padding-bottom: 56px; }
.hub-g h2 { font-size: 22px; line-height: 1.2; letter-spacing: -.016em; }
.hub-g h2 a:hover { color: var(--link); }
.hub-k { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.subs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px var(--gat); }
.sub-t { display: block; min-width: 0; }
.sub-t .tg { border-radius: var(--r2); }
.sub-t:hover .tg { background: var(--vlak2); }
.sub-los { margin-top: 20px; font-size: 14px; color: var(--sub); }
.sub-los a { color: var(--inkt); font-weight: 500; }
.sub-los a:hover { color: var(--link); }
.sub-t b { display: block; margin-top: 10px; font-size: 15px; line-height: 1.3; font-weight: 400; overflow-wrap: anywhere; hyphens: auto; }
.sub-t small { color: var(--sub); font-variant-numeric: tabular-nums; }

/* ---------- categorie ---------- */
.cat-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 40px; padding-block: 16px 32px; }
.cat-kop h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
.cat-kop .lead { margin-top: 10px; }
.cat { display: grid; grid-template-columns: 248px minmax(0, 1fr); column-gap: 56px; align-items: start; padding-bottom: 96px; }
.zij { position: sticky; top: calc(var(--kop-h) + 20px); max-height: calc(100vh - var(--kop-h) - 40px); overflow-y: auto; padding-right: 12px; margin-right: -12px; scrollbar-width: thin; transition: top .2s ease, max-height .2s ease; }
.boom { padding-bottom: 20px; border-bottom: 1px solid var(--lijn); }
.boom a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 5px; font-size: 14px; line-height: 1.35; color: var(--sub); }
.boom a:hover { color: var(--inkt); }
.boom a small { font-variant-numeric: tabular-nums; color: var(--zacht); }
.boom a.aan { color: var(--inkt); font-weight: 500; }
.boom .bm-terug { justify-content: flex-start; align-items: center; gap: 4px; margin-bottom: 4px; color: var(--inkt); }
.boom .bm-in { padding-left: 12px; }
.bmk { margin-top: 2px; }
.flt { padding-block: 16px; border-bottom: 1px solid var(--lijn); }
.flt:last-child { border-bottom: 0; }
.flt h3 { margin-bottom: 8px; font-size: 14px; }
.flt-sw { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; cursor: pointer; }
.sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: var(--lijn2); transition: background .12s; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .12s; }
input:checked + .sw { background: var(--inkt); }
input:checked + .sw::after { transform: translateX(14px); }
.fv { display: flex; align-items: center; gap: 10px; min-height: 30px; font-size: 14px; line-height: 1.3; cursor: pointer; }
.fv input { appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--lijn2); border-radius: 3px; background: #fff; }
.fv input:checked { border-color: var(--inkt); background: var(--inkt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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 17.500 19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.fv span { flex: 1; min-width: 0; }
.fv small { flex: none; color: var(--zacht); font-variant-numeric: tabular-nums; }
.fv.leeg { color: var(--zacht); }
.fm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.fm button { height: 32px; min-width: 0; padding: 0 2px; border: 0; border-radius: 4px; background: var(--vlak); font-size: 13px; font-variant-numeric: tabular-nums; transition: background .12s; }
.fm button:hover { background: var(--vlak2); }
.fm button.aan { background: var(--inkt); color: #fff; }
.fm button:disabled { background: none; color: var(--lijn2); cursor: default; }
.flt-meer { margin-top: 6px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 500; }
.flt-meer:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lijst-balk { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-bottom: 12px; }
.lijst-tel { font-size: 14px; color: var(--sub); }
.lijst-tel b { color: var(--inkt); font-variant-numeric: tabular-nums; }
.lijst-acties { display: flex; align-items: center; gap: 8px; }
.lijst-zoek { width: 220px; height: 36px; min-height: 36px; padding: 0 12px; font-size: 14px; }
select.klein { width: auto; height: 36px; min-height: 36px; padding: 0 30px 0 12px; font-size: 14px; }
.seg { display: inline-flex; height: 36px; padding: 2px; border-radius: var(--r); background: var(--vlak); }
.seg button { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-radius: 4px; background: none; font-size: 13px; color: var(--sub); white-space: nowrap; }
.seg button.aan { background: #fff; color: var(--inkt); box-shadow: 0 1px 2px rgba(14,34,48,.14); }
.filterknop { display: none; }
.actief { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 12px; }
.actief:empty { display: none; }
.af { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border: 0; border-radius: 4px; background: var(--vlak); font-size: 13px; }
.af:hover { background: var(--vlak2); }
.af-wis { padding: 0 4px; border: 0; background: none; font-size: 13px; font-weight: 500; }

/* een reeks: één foto, alle maten eronder */
.rk { display: grid; grid-template-columns: 144px minmax(0, 1fr); column-gap: 32px; align-items: start; padding-block: 28px; border-top: 1px solid var(--lijn); }
.rk-f .tg { border-radius: var(--r2); }
.rk:hover .rk-f .tg { background: var(--vlak2); }
.rk h2 { font-size: 18px; line-height: 1.3; letter-spacing: -.012em; }
.rk h2 a:hover { color: var(--link); }
.rk-z { margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--sub); }
.tabel { margin-top: 12px; }
.t-rij { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(88px, 1fr) minmax(88px, 1fr) minmax(104px, 1fr) 84px; column-gap: 16px; align-items: center; min-height: 44px; border-top: 1px solid var(--lijn); font-size: 14px; line-height: 1.3; transition: background .1s, box-shadow .1s; }
.bezoeker .t-rij { grid-template-columns: minmax(0, 1.5fr) minmax(88px, 1fr) minmax(88px, 1fr) 148px; }
.t-kop { min-height: 28px; border-top: 0; font-size: 13px; color: var(--sub); }
.t-rij:not(.t-kop):hover { background: var(--vlak); box-shadow: -12px 0 0 var(--vlak), 12px 0 0 var(--vlak); }
.t-hier { background: var(--vlak); box-shadow: -12px 0 0 var(--vlak), 12px 0 0 var(--vlak); }
/* bezoeker: één keer de vraag om in te loggen, boven de tabel, niet op elke regel */
.t-rij:not(.t-kop) .t-pr .log { display: none !important; }
.t-maat { padding-block: 8px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.t-maat:hover { color: var(--link); }
.t-nr { font-family: var(--mono); font-size: 13px; color: var(--sub); }
.t-pr { text-align: right; white-space: nowrap; }
.t-kp { justify-self: end; }
.rk-meer { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; }
.rk-meer:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tabel.dicht .t-rij.t-weg { display: none; }
.rk.los { grid-template-columns: 72px minmax(0, 1fr); column-gap: 24px; padding-block: 16px; align-items: center; }
.rk.los .rk-rij { display: grid; grid-template-columns: minmax(0, 3fr) minmax(88px, 1fr) minmax(104px, 1fr) 84px; column-gap: 16px; align-items: center; }
.bezoeker .rk.los .rk-rij { grid-template-columns: minmax(0, 3fr) minmax(88px, 1fr) 148px; }
.rk.los h2 { font-size: 15px; font-weight: 400; line-height: 1.35; letter-spacing: 0; }
.rk.los .rk-z { margin-top: 2px; font-size: 13px; }
.rk.los .t-nr { display: block; margin-top: 2px; }
.lijst-kaarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--gat); border-top: 1px solid var(--lijn); padding-top: 28px; }
.lijst-meer { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 40px; border-top: 1px solid var(--lijn); }
.lijst-meer small { color: var(--sub); font-variant-numeric: tabular-nums; }
.lijst-niets { padding-block: 64px; border-top: 1px solid var(--lijn); text-align: center; color: var(--sub); }
.lijst-niets b { display: block; font-size: 18px; color: var(--inkt); }
.flt-zoek { display: none; }
.flt-klaar { display: none; }
.flt-sluit { display: none; }

/* ---------- productpagina ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 64px; align-items: start; padding-block: 16px 72px; }
.pdp-l { min-width: 0; }
.galerij { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
.gal-h { grid-column: 2; }
.gal-h .tg { aspect-ratio: 16 / 9; border-radius: var(--r2); }
.gal-h .tg img { inset: 6% 20%; width: 60%; height: 88%; }
.galerij.een { grid-template-columns: minmax(0, 1fr); }
.galerij.een .gal-h { grid-column: 1; }
.duimen { grid-column: 1; grid-row: 1; display: grid; align-content: start; gap: 8px; }
.duim { padding: 0; border: 0; border-radius: var(--r); background: none; box-shadow: 0 0 0 0 var(--inkt); }
.duim .tg { border-radius: var(--r); }
.duim.aan { box-shadow: 0 0 0 1.5px var(--inkt); }
.pdp-sec { padding-top: 48px; }
.pdp-sec h2 { margin-bottom: 16px; font-size: 22px; line-height: 1.2; letter-spacing: -.016em; }
.tk { max-width: 68ch; font-size: 15px; line-height: 1.65; color: #24384a; }
.tk p + p, .tk ul, .tk ol, .tk h3 + p, .tk .tk-tabel { margin-top: 12px; }
.tk h3, .tk h4 { margin-top: 24px; font-size: 16px; color: var(--inkt); }
.tk ul li { position: relative; padding-left: 16px; }
.tk ul li::before { content: ""; position: absolute; top: .75em; left: 0; width: 5px; height: 1px; background: var(--sub); }
.tk ol { counter-reset: n; }
.tk ol li { position: relative; padding-left: 24px; counter-increment: n; }
.tk ol li::before { content: counter(n); position: absolute; left: 0; color: var(--sub); font-variant-numeric: tabular-nums; }
.tk a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tk-tabel { overflow-x: auto; }
.tk-tabel table { min-width: 100%; border-collapse: collapse; font-size: 14px; }
.tk-tabel th { padding: 8px 16px 8px 0; font-size: 13px; font-weight: 500; text-align: left; white-space: nowrap; color: var(--sub); }
.tk-tabel td { padding: 10px 16px 10px 0; border-top: 1px solid var(--lijn); font-variant-numeric: tabular-nums; }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.spec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; padding-block: 10px; border-top: 1px solid var(--lijn); font-size: 14px; line-height: 1.4; }
.spec dt { color: var(--sub); }
.koop { position: sticky; top: calc(var(--kop-h) + 20px); transition: top .2s ease; }
.koop h1 { font-size: 26px; line-height: 1.2; letter-spacing: -.022em; text-wrap: pretty; }
.koop-nr { margin-top: 8px; font-size: 13px; color: var(--sub); }
.koop-nr span { font-family: var(--mono); }
.koop-maat { margin-top: 20px; }
.koop-maat > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 14px; }
.koop-maat > div:first-child span { color: var(--sub); }
.koop-maat > div:first-child a { font-size: 13px; font-weight: 500; }
.koop-maat > div:first-child a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.koop-maat select { width: 100%; }
.mt-r { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-k { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 36px; padding: 0 10px; border: 1px solid var(--lijn2); border-radius: var(--r); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; transition: border-color .12s; }
.mt-k:hover { border-color: var(--inkt); }
.mt-k.aan { border-color: var(--inkt); box-shadow: inset 0 0 0 .5px var(--inkt); font-weight: 500; }
.mt-k.nee { color: var(--zacht); border-style: dashed; }
.koop-p { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--lijn); }
.koop-pr { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.koop-pr b { font-size: 28px; line-height: 1.15; letter-spacing: -.022em; font-weight: 500; font-variant-numeric: tabular-nums; }
.koop-pr span { font-size: 14px; color: var(--sub); }
.koop-p .log { display: inline-block; font-size: 15px; font-weight: 500; }
.koop-p .stil { margin-top: 2px; }
.koop-vr { margin-top: 12px; }
.koop-vr .vr { font-size: 14px; white-space: normal; }
.koop-rij { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 8px; margin-top: 16px; }
.teller { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; height: 48px; border: 1px solid var(--lijn2); border-radius: var(--r); transition: border-color .12s; }
.teller:focus-within { border-color: var(--inkt); }
.teller button { display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--sub); }
.teller button:hover { color: var(--inkt); }
.teller input { width: 100%; min-width: 0; padding: 0; border: 0; background: none; font-size: 15px; text-align: center; font-variant-numeric: tabular-nums; }
.koop-rij .knop { height: 48px; }
.koop-som { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; font-size: 14px; color: var(--sub); font-variant-numeric: tabular-nums; }
.koop-som b { font-size: 16px; color: var(--inkt); }
.koop-acties { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 16px; font-size: 14px; }
.koop-acties a, .koop-acties button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--sub); }
.koop-acties a:hover, .koop-acties button:hover { color: var(--inkt); }
.koop-zek { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--lijn); font-size: 14px; line-height: 1.4; }
.koop-zek li { display: flex; align-items: flex-start; gap: 10px; padding-block: 4px; color: var(--sub); }
.koop-zek svg { flex: none; margin-top: 1px; }
.koop-zek a:hover { color: var(--inkt); }
.koop-in { display: grid; gap: 8px; margin-top: 16px; }
.pdp-balk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; }
.ook { padding-bottom: 96px; }
.ook .h2 { margin-bottom: 24px; }

/* ---------- wagen en afrekenen ---------- */
.wagen { display: grid; grid-template-columns: minmax(0, 1fr) 368px; column-gap: 64px; align-items: start; padding-bottom: 96px; }
.wg-rij { display: grid; grid-template-columns: 88px minmax(0, 1fr) 104px 104px 32px; column-gap: 20px; align-items: center; padding-block: 16px; border-top: 1px solid var(--lijn); }
.wg-rij .tg { border-radius: var(--r); }
.wg-n { min-width: 0; font-size: 15px; line-height: 1.35; }
.wg-n a:hover { color: var(--link); }
.wg-n small { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-top: 4px; color: var(--sub); }
.wg-n .t-nr { font-size: 13px; }
.wg-t { text-align: right; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wg-t small { display: block; font-weight: 400; color: var(--sub); }
.wg-weg { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--sub); }
.wg-weg:hover { background: var(--vlak); color: var(--inkt); }
.wg-rij .teller { height: 36px; grid-template-columns: 28px minmax(0, 1fr) 28px; }
.wg-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding-top: 16px; border-top: 1px solid var(--lijn); font-size: 14px; }
.wg-tools > div { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.wg-tools button, .wg-tools a { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--sub); }
.wg-tools button:hover, .wg-tools a:hover { color: var(--inkt); }
.som { position: sticky; top: calc(var(--kop-h) + 20px); padding: 24px; border-radius: var(--r2); background: var(--vlak); transition: top .2s ease; }
.som h2 { margin-bottom: 12px; font-size: 18px; line-height: 1.3; letter-spacing: -.012em; }
.som-r { display: flex; justify-content: space-between; gap: 16px; padding-block: 5px; font-size: 14px; font-variant-numeric: tabular-nums; }
.som-r span:first-child { color: var(--sub); }
.som-t { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--lijn2); font-size: 18px; }
.som-t span:first-child { color: var(--inkt); }
.som-t span:last-child { font-weight: 500; }
.som .knop { margin-top: 16px; }
.som .meer { margin-top: 12px; }
.som-regels { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--lijn2); }
.som-regel { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding-block: 6px; font-size: 13px; line-height: 1.3; }
.som-regel .tg { width: 44px; height: 44px; border-radius: 4px; background: #fff; }
.som-regel em { font-variant-numeric: tabular-nums; white-space: nowrap; }
.leeg-w { padding-block: 64px 120px; text-align: center; }
.leeg-w h1 { font-size: 28px; line-height: 1.18; letter-spacing: -.022em; }
.leeg-w p { margin-top: 8px; color: var(--sub); }
.leeg-w .knoppen { justify-content: center; margin-top: 20px; }
.stap-sec { padding-block: 28px; border-top: 1px solid var(--lijn); }
.stap-sec:first-child { padding-top: 0; border-top: 0; }
.stap-sec h2 { margin-bottom: 16px; font-size: 18px; line-height: 1.3; letter-spacing: -.012em; }
.klaar-v { padding-block: 40px 96px; max-width: 720px; }
.klaar-i { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 50%; background: var(--blauw); }
.klaar-v .lead { margin-top: 12px; }
.klaar-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gat); margin-top: 32px; padding-block: 24px; border-block: 1px solid var(--lijn); font-size: 14px; }
.klaar-g small { display: block; color: var(--sub); }

/* snel bestellen als pagina */
.sb-pagina { padding-bottom: 96px; }
.hulp3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gat); margin-top: 32px; font-size: 14px; }
.hulp3 b { display: block; font-size: 15px; }
.hulp3 span { color: var(--sub); }

/* ---------- account ---------- */
.acc { display: grid; grid-template-columns: 208px minmax(0, 1fr); column-gap: 56px; align-items: start; padding-bottom: 96px; }
.acc-nav { position: sticky; top: calc(var(--kop-h) + 20px); display: grid; gap: 2px; transition: top .2s ease; }
.acc-nav a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; margin-left: -10px; border-radius: var(--r); font-size: 14px; color: var(--sub); }
.acc-nav a:hover { color: var(--inkt); }
.acc-nav a.aan { background: var(--vlak); color: var(--inkt); font-weight: 500; }
.acc-kop { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 24px; }
.acc-kop h1 { font-size: 28px; line-height: 1.18; letter-spacing: -.022em; }
.cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gat); margin-bottom: 40px; }
.cijfer { display: block; padding: 20px; border-radius: var(--r2); background: var(--vlak); }
a.cijfer:hover { background: var(--vlak2); }
.cijfer small { display: block; color: var(--sub); }
.cijfer b { display: block; margin-top: 4px; font-size: 22px; line-height: 1.2; letter-spacing: -.016em; font-variant-numeric: tabular-nums; }
.lr { display: grid; align-items: center; column-gap: 16px; min-height: 52px; padding-block: 8px; border-top: 1px solid var(--lijn); font-size: 14px; line-height: 1.35; }
.lr.kopr { min-height: 28px; padding-block: 0 6px; border-top: 0; font-size: 13px; color: var(--sub); }
.lr:not(.kopr):hover { background: var(--vlak); box-shadow: -12px 0 0 var(--vlak), 12px 0 0 var(--vlak); }
.lr .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lr-bes { grid-template-columns: 130px 104px minmax(0, 1fr) 128px 104px; }
.lr-fac { grid-template-columns: 130px 104px 104px minmax(0, 1fr) 104px 88px; }
.lr-lij { grid-template-columns: minmax(0, 1fr) 96px 104px 104px; }
.lr b { font-weight: 500; }
.lr > * { min-width: 0; overflow-wrap: anywhere; }
.st { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; }
.st i { width: 7px; height: 7px; border-radius: 50%; background: var(--lijn2); }
.st.groen i { background: var(--groen); }
.st.blauw i { background: var(--blauw); }
.st.geel i { background: var(--geel); }
.acc-sec { margin-top: 40px; }
.acc-sec h2 { margin-bottom: 12px; font-size: 18px; line-height: 1.3; letter-spacing: -.012em; }
.acc-vakken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gat); }
.vak { padding: 20px; border-radius: var(--r2); background: var(--vlak); font-size: 14px; line-height: 1.5; }
.vak h3 { margin-bottom: 4px; font-size: 15px; }
.vak p { color: var(--sub); }
.vak .meer { margin-top: 10px; }
.tijdlijn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 32px; }
.tl { padding-top: 12px; border-top: 2px solid var(--lijn); font-size: 14px; line-height: 1.35; }
.tl.aan { border-top-color: var(--blauw); }
.tl small { display: block; color: var(--sub); }

/* ---------- informatie ---------- */
.info { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); padding-bottom: 96px; }
.info-l { grid-column: 1 / span 7; min-width: 0; }
.info-r { grid-column: 9 / span 4; min-width: 0; }
.info-sticky { position: sticky; top: calc(var(--kop-h) + 20px); transition: top .2s ease; }
.paneel { padding: 24px; border-radius: var(--r2); background: var(--vlak); font-size: 14px; line-height: 1.5; }
.paneel + .paneel { margin-top: var(--gat); }
.paneel h2, .paneel h3 { margin-bottom: 8px; font-size: 18px; line-height: 1.3; letter-spacing: -.012em; }
.paneel .knop { margin-top: 12px; }
.uren { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 4px 16px; font-variant-numeric: tabular-nums; }
.uren dt { color: var(--sub); }
.uren .nu { color: var(--inkt); font-weight: 500; }
.groot-b { display: block; overflow: hidden; height: clamp(220px, 28vw, 480px); margin-bottom: 64px; background: var(--vlak2); }
.groot-b img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gat); }
.drie > div { padding-top: 12px; border-top: 1px solid var(--lijn2); }
.drie b { display: block; font-size: 16px; }
.drie span { display: block; margin-top: 2px; font-size: 14px; color: var(--sub); }
.artikel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); padding-bottom: 96px; }
.artikel-h { grid-column: 1 / span 8; }
.artikel-h h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
.artikel-h .stil { margin-top: 12px; }
.artikel-f { margin-top: 24px; overflow: hidden; border-radius: var(--r2); background: var(--vlak); }
.artikel-f img { width: 100%; }
.artikel-t { grid-column: 1 / span 8; margin-top: 32px; }
.artikel-t.tk { max-width: none; }
.artikel-r { grid-column: 10 / span 3; grid-row: 1 / span 2; }
.artikel-r .info-sticky > h3 { margin-bottom: 8px; font-size: 14px; }
.artikel-r a.rl { display: block; padding-block: 8px; border-top: 1px solid var(--lijn); font-size: 14px; line-height: 1.35; color: var(--sub); }
.artikel-r a.rl:hover { color: var(--inkt); }
.inlog { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gat); padding-block: 32px 96px; }
.inlog-l { grid-column: 1 / span 5; }
.inlog-r { grid-column: 7 / span 6; }
.inlog-l h1 { font-size: 28px; line-height: 1.18; letter-spacing: -.022em; }
.inlog-l form { display: grid; gap: 16px; margin-top: 24px; }
.ok-melding { display: none; padding: 12px 16px; border-radius: var(--r); background: var(--vlak); font-size: 14px; }
.ok-melding.aan { display: block; }

/* ---------- voet ---------- */
.voet { flex-shrink: 0; background: var(--inkt); color: rgba(255,255,255,.72); font-size: 14px; }
.voet a { transition: color .12s; }
.voet a:hover { color: #fff; }
.voet-kop { display: flex; justify-content: space-between; align-items: center; gap: 24px 48px; padding-block: 56px 40px; }
.voet-zin { display: flex; align-items: center; gap: 20px; min-width: 0; }
.voet-zin img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 0; background: rgba(255,255,255,.12); }
.voet-zin p { font-size: 28px; line-height: 1.18; letter-spacing: -.022em; font-weight: 500; color: #fff; text-wrap: balance; }
.voet-kop .knop { flex: none; }
.voet-contact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gat); padding-top: 56px; }
.voet-kop + .voet-contact { padding-top: 0; }
.vc { display: block; min-width: 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); }
.vc small { display: block; line-height: 1.4; color: rgba(255,255,255,.62); }
.vc b { display: block; margin-top: 2px; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.3; letter-spacing: -.014em; font-weight: 500; color: #fff; }
.vc > span { display: block; margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.62); }
.vc .nuopen { display: inline-flex; color: rgba(255,255,255,.62); }
.vc .nuopen i { background: rgba(255,255,255,.3); }
.vc .nuopen.open i { background: #3ecf97; }
.voet-kol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gat); padding-block: 48px 40px; }
.voet-logo img { width: 186px; height: auto; }
.voet-groep { min-width: 0; }
.voet-groep h4 { margin-bottom: 10px; font-size: 14px; color: #fff; }
.voet-groep h4 button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0; border: 0; background: none; font-weight: 500; text-align: left; cursor: default; }
.voet-groep h4 svg { display: none; }
.voet-groep li { padding-block: 3px; }
.voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 20px 28px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13px; color: rgba(255,255,255,.62); }
.voet-onder ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* afrekenen: niets dat afleidt */
body.kassa { --kop-h: 72px; }
.kop-kassa { border-bottom: 1px solid var(--lijn); }
.kop-kassa .kop-r { grid-template-columns: auto minmax(0, 1fr) auto; }
.kop-kassa .kop-acties { grid-column: 3; gap: 24px; }
.voet-kaal { flex-shrink: 0; border-top: 1px solid var(--lijn); font-size: 13px; color: var(--sub); }
.voet-kaal > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 20px; }
.voet-kaal a:hover { color: var(--inkt); }
.voet-kaal ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* ---------- mockupbalk en melding ---------- */
.mkbalk { position: fixed; left: 16px; bottom: 16px; z-index: 45; display: flex; align-items: center; gap: 16px; height: 36px; padding: 0 12px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--lijn), 0 8px 24px -8px rgba(14,34,48,.2); font-size: 13px; color: var(--sub); transition: opacity .15s; }
@media (min-width: 1025px) {
  .mkbalk > :not(.mk-t) { display: none; }
  .mkbalk:hover, .mkbalk:focus-within { height: 40px; padding: 0 6px 0 14px; }
  .mkbalk:hover > :not(.mk-t), .mkbalk:focus-within > :not(.mk-t) { display: inline-flex; }
}
.mkbalk.weg { opacity: 0; pointer-events: none; }
.mkbalk a:hover { color: var(--inkt); }
.mk-t { color: var(--inkt); font-weight: 500; }
.mk-stand { display: inline-flex; height: 28px; padding: 2px; border-radius: var(--r); background: var(--vlak); }
.mk-stand button { padding: 0 8px; border: 0; border-radius: 4px; background: none; font-size: 13px; color: var(--sub); }
.mk-stand button.aan { background: #fff; color: var(--inkt); box-shadow: 0 1px 2px rgba(14,34,48,.14); }
.melding { position: fixed; top: 16px; right: 16px; z-index: 70; display: none; width: min(380px, calc(100vw - 32px)); padding: 12px; border-radius: var(--r2); background: #fff; box-shadow: 0 0 0 1px var(--lijn), 0 16px 40px -12px rgba(14,34,48,.28); font-size: 14px; line-height: 1.35; }
.melding.aan { display: block; animation: paneel .14s ease-out; }
.ml { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.ml .tg { width: 52px; height: 52px; border-radius: 4px; }
.ml small { display: block; color: var(--sub); }
.ml-k { display: flex; gap: 8px; grid-column: 1 / -1; margin-top: 10px; }
.ml-k .knop { flex: 1; }

/* ---------- overzichtspagina van het ontwerp ---------- */
.ow-beeld { overflow: hidden; border-radius: var(--r2); box-shadow: 0 0 0 1px var(--lijn); }
.ow-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gat); }
.ow-twee figcaption { margin-bottom: 8px; font-size: 14px; color: var(--sub); }
.ow-sec { padding-bottom: 72px; }
.ow-sec h2 { margin-bottom: 20px; }
.ow-lijst { columns: 3; column-gap: var(--gat); font-size: 14px; }
.ow-lijst a { display: block; padding-block: 5px; break-inside: avoid; color: var(--link); }
.ow-lijst a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ow-lijst b { display: block; margin-top: 16px; font-size: 14px; color: var(--inkt); break-after: avoid; }
.ow-lijst b:first-child { margin-top: 0; }
.ow-rij { display: grid; grid-template-columns: 280px minmax(0, 1fr) 132px; column-gap: var(--gat); padding-block: 12px; border-top: 1px solid var(--lijn); font-size: 14px; line-height: 1.45; }
.ow-rij span:nth-child(2) { color: var(--sub); }
.ow-rij.kopr { padding-block: 0 8px; border-top: 0; font-size: 13px; color: var(--sub); }
.ow-punten li { padding-block: 10px; border-top: 1px solid var(--lijn); font-size: 15px; line-height: 1.5; }
.ow-punten b { display: block; }
.ow-punten span { color: var(--sub); }

/* ---------- tussenmaten ---------- */
@media (max-width: 1360px) {
  .balk-m { gap: 20px; }
  .balk-rest { gap: 16px; }
  .kop-acties { gap: 20px; }
  .open-t h1 { font-size: 56px; }
}
@media (max-width: 1240px) {
  :root { --sec: 88px; --gut: 32px; }
  .kop-r, .balk-r { grid-template-columns: 200px minmax(0, 1fr) auto; }
  .zoek-pan { width: calc(100vw - 2 * var(--gut) - 224px); }
  .logo { width: 186px; }
  .balk-m > a, .balk-rest > a, .mk { font-size: 14px; }
  .balk-m { gap: 16px; }
  .balk-rest > a:nth-child(2) { display: none; }
  .open-t h1 { font-size: 52px; }
  .pdp { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 48px; }
  .wagen { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 40px; }
  .cat { grid-template-columns: 216px minmax(0, 1fr); column-gap: 40px; }
  .subs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lijst-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kop-tel .nuopen { display: none; }
  .t-rij { grid-template-columns: minmax(0, 1.4fr) 88px 80px 100px 80px; column-gap: 12px; }
  .rk { grid-template-columns: 112px minmax(0, 1fr); column-gap: 24px; }
  .wg-rij { grid-template-columns: 72px minmax(0, 1fr) 96px 96px 32px; column-gap: 16px; }
  .acc { grid-template-columns: 180px minmax(0, 1fr); column-gap: 40px; }
  .snel-t { grid-column: 1 / span 5; }
  .snel-k { grid-column: 6 / span 7; }
}
@media (max-width: 1100px) {
  .balk-rest > a { display: none; }
  .t-nr { display: none; }
  .t-rij { grid-template-columns: minmax(0, 1fr) 80px 100px 80px; }
  .bezoeker .t-rij { grid-template-columns: minmax(0, 1fr) 96px 148px; }
  .t-kop > span:nth-child(2) { display: none; }
  .rk.los .t-nr { display: none; }
  .rk.los .rk-rij { grid-template-columns: minmax(0, 1fr) 80px 100px 80px; }
  .lr-fac { grid-template-columns: 112px 96px 96px minmax(0, 1fr) 96px 80px; }
}
/* ---------- tablet: menu in een lade, zoekbalk eronder ---------- */
@media (max-width: 1024px) {
  .kop-kassa .logo { justify-self: start; grid-column: 1; }
  body.kassa { --kop-h: 56px; }
  :root { --kop1: 56px; --kop-h: 56px; --sec: 72px; --sec-s: 56px; --gut: 24px; }
  body.menu-uit { --kop-h: 56px; }
  html { scroll-padding-top: 72px; }
  .balk { display: none; }
  .kop { border-bottom: 1px solid var(--lijn); }
  .kop-r { position: relative; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 8px; height: 56px; }
  .menuknop { display: inline-flex; justify-self: start; margin-left: -4px; }
  .logo { width: 172px; justify-self: center; }
  .kop-r > .zoek { display: none; }
  .kop-acties { justify-self: end; gap: 4px; margin-right: -3px; }
  .kop-tel { display: none; }
  .actie { justify-content: center; width: 40px; }
  .actie span { display: none; }
  .actie-tel { display: inline-flex; }
  .actie-acc { display: none; }
  .actie-wagen b[hidden] { display: none; }
  .actie-wagen b { position: absolute; top: 3px; left: 20px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--blauw); color: var(--inkt); font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums; }
  .zoek-uit .actie-tel { display: none; }
  .zoek-uit .zoek-knop { display: inline-flex; }
  .zoek-tel { display: flex; max-width: none; height: 44px; margin: 12px var(--gut) 8px; }
  .zoek-tel input { font-size: 16px; }
  .zoek-pan { position: fixed; top: 112px; left: var(--gut); right: var(--gut); width: auto; max-height: calc(100vh - 128px); }
  .zs-k.twee { grid-template-columns: minmax(0, 1fr); }
  .zs-k.twee .zs-rechts { order: -1; border-left: 0; border-bottom: 1px solid var(--lijn); }
  .tel-menu { display: block; }
  .tel-menu > div { padding-inline: var(--gut); }
  .aantal, .teller input, .inv, .veld input, .veld select, .veld textarea, select.klein, .lijst-zoek, .sb-in textarea { font-size: 16px; }
  .koop-acties a, .koop-acties button, .koop-zek a, .koop-maat > div:first-child a, .log { display: inline-flex; align-items: center; min-height: 40px; }
  .koop-zek li { align-items: center; padding-block: 0; }
  .wg-tools button, .wg-tools a { min-height: 40px; }
  .mkbalk { position: static; order: 9; justify-content: center; flex-wrap: wrap; height: auto; min-height: 48px; padding: 8px 16px; border-radius: 0; box-shadow: none; border-top: 1px solid var(--lijn); }
  .melding { top: auto; bottom: 16px; right: 16px; }

  .open-t { padding-block: 40px 32px; row-gap: 16px; }
  .open-t h1 { grid-column: 1 / -1; font-size: 44px; }
  .open-r { grid-column: 1 / span 9; }
  .feiten { padding-block: 32px; }
  .feit b { font-size: 22px; }
  .snel-t { grid-column: 1 / -1; margin-bottom: 24px; }
  .snel-k { grid-column: 1 / -1; }
  .kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kaarten > :nth-child(4) { display: none; }
  .advies-f { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
  .advies-t { grid-column: 1 / -1; margin-top: 24px; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kennis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .art h3 { font-size: 16px; }
  .cat { grid-template-columns: minmax(0, 1fr); padding-bottom: 72px; }
  .zij { position: fixed; inset: 0; z-index: 62; display: none; max-height: none; margin: 0; padding: 0 var(--gut) 88px; background: #fff; overflow-y: auto; }
  .zij.open { display: block; }
  .flt-sluit { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 56px; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); background: #fff; border-bottom: 1px solid var(--lijn); font-size: 18px; font-weight: 500; }
  .flt-sluit button { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; }
  .flt-klaar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 63; display: block; padding: 12px var(--gut); background: #fff; border-top: 1px solid var(--lijn); }
  .boom { padding-top: 12px; }
  .filterknop { display: inline-flex; }
  .cat-boom { display: block; margin-bottom: 16px; }
  .pdp { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 32px; padding-block: 12px 56px; }
  .wagen { grid-template-columns: minmax(0, 1fr); }
  .som { position: static; margin-top: 24px; }
  .acc { grid-template-columns: minmax(0, 1fr); padding-bottom: 72px; }
  .acc-nav { position: static; display: flex; gap: 4px; overflow-x: auto; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); margin-bottom: 24px; scrollbar-width: none; }
  .acc-nav a { flex: none; margin: 0; white-space: nowrap; }
  .info-l { grid-column: 1 / -1; }
  .info-r { grid-column: 1 / -1; margin-top: 40px; }
  .info-sticky { position: static; }
  .artikel-h, .artikel-t { grid-column: 1 / -1; }
  .artikel-r { grid-column: 1 / -1; grid-row: auto; margin-top: 40px; }
  .inlog-l { grid-column: 1 / -1; }
  .inlog-r { grid-column: 1 / -1; margin-top: 40px; }
  .voet-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .vc b { font-size: 20px; }
  .voet-kol { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 40px; }
  .voet-merk { grid-column: 1 / -1; margin-bottom: 32px; }
  .ow-lijst { columns: 2; }
}
@media (min-width: 1025px) { .cat-boom { display: none; } }
@media (max-width: 860px) {
  .subs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pdp { display: flex; flex-direction: column; align-items: stretch; }
  .pdp-l { display: contents; }
  .galerij { order: 1; margin-bottom: 20px; }
  .koop { position: static; order: 2; }
  .pdp-onder { order: 3; min-width: 0; }
}
/* ---------- telefoon ---------- */
@media (max-width: 760px) {
  :root { --gut: 16px; --gat: 16px; --sec: 64px; --sec-s: 48px; }
  .h1, .pkop h1, .cat-kop h1, .artikel-h h1 { font-size: 30px; }
  .h2 { font-size: 24px; }
  .skop { margin-bottom: 20px; }
  .kruimel { padding-top: 4px; }
  .kr-breed { display: none; }
  .kr-terug { display: inline-flex; margin-left: -4px; }
  .tel-menu a:nth-child(n+3):not(:nth-child(5)) { display: none; }
  .logo { width: 156px; }
  .open-t { padding-block: 28px 24px; }
  .open-t h1 { font-size: 36px; line-height: 1.08; letter-spacing: -.034em; }
  .open-r { grid-column: 1 / -1; }
  .open-r p { font-size: 15px; }
  .open-r .knoppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .open-r .knoppen .knop { padding: 0 8px; }
  .open-b { height: 210px; }
  .feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding-block: 28px 0; }
  .feit b { font-size: 20px; }
  .feit span { margin-top: 2px; font-size: 13px; }
  .groepen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .gt .tg { aspect-ratio: 4 / 3; }
  .gt .tg img { inset: 8% 14%; width: 72%; height: 84%; }
  .gt-k { margin-top: 10px; display: block; }
  .gt-k b { display: block; font-size: 15px; }
  .gt-k small { display: block; }
  .gt p { display: none; }
  .sb-kop { display: none; }
  .sb-romp, .sb.groot .sb-romp { grid-template-columns: minmax(0, 1fr); }
  .sb-in { border-right: 0; border-bottom: 1px solid var(--lijn); }
  .sb-in textarea { padding-block: 12px; background: none; font-size: 16px; line-height: 28px; }
  .sb-rij { height: auto; min-height: 64px; padding-block: 8px; }
  .sb-rij.leeg { display: none; }
  .kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .kaarten > :nth-child(4) { display: grid; }
  .pk-o { flex-wrap: wrap; }
  .aantal { width: 48px; height: 40px; }
  .in { width: 44px; height: 40px; }
  .team { gap: 16px; }
  .tm b { font-size: 14px; }
  .kennis { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .kennis .art { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .kennis .art .art-f { grid-row: span 2; aspect-ratio: 4 / 3; border-radius: var(--r); }
  .kennis .art h3 { margin-top: 0; font-size: 15px; }
  .subs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .hub-g { padding-bottom: 40px; }
  .hub-b { margin-bottom: 32px; }
  .pkop { padding-block: 12px 24px; }
  .pkop-r, .cat-kop { display: block; }
  .cat-kop { padding-block: 8px 20px; }
  .lijst-balk { gap: 8px; }
  .lijst-tel { width: 100%; order: -1; }
  .lijst-acties { flex-wrap: wrap; width: 100%; }
  .knop.filterknop { flex: 1; height: 44px; }
  .lijst-zoek { display: none; }
  .lead-2 { display: none; }
  select.klein { flex: 1; height: 44px; min-height: 44px; }
  .seg { display: none; }
  .flt-zoek { display: block; padding-block: 16px 0; }
  .flt-zoek input { width: 100%; }
  .rk { grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; padding-block: 20px; }
  .rk h2 { font-size: 15px; line-height: 1.35; letter-spacing: 0; }
  .rk-z { font-size: 13px; }
  .rk .tabel { grid-column: 1 / -1; margin-top: 12px; }
  .rk-b { display: contents; }
  .rk-meer { grid-column: 1 / -1; }
  .rk-koptekst { align-self: center; }
  .t-kop { display: none; }
  .bezoeker .t-kop { display: flex; justify-content: flex-end; min-height: 32px; padding-block: 0; }
  .bezoeker .t-kop > :not(.t-pr) { display: none; }
  .t-rij:not(.t-kop), .bezoeker .t-rij:not(.t-kop) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "m p" "v k"; column-gap: 12px; row-gap: 2px; padding-block: 10px; min-height: 0; }
  .t-maat { grid-area: m; padding-block: 0; }
  .t-pr { grid-area: p; }
  .t-vr { grid-area: v; align-self: center; }
  .t-kp { grid-area: k; }
  .bezoeker .t-kp { display: none; }
  .bezoeker .t-rij:not(.t-kop) { grid-template-areas: "m v"; align-items: center; }
  .t-rij:not(.t-kop):hover { background: none; box-shadow: none; }
  .rk.los { grid-template-columns: 72px minmax(0, 1fr); align-items: start; }
  .rk.los .rk-rij, .bezoeker .rk.los .rk-rij { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n n" "v p" "v k"; row-gap: 6px; }
  .rk.los .rk-n { grid-area: n; }
  .rk.los .t-vr { grid-area: v; align-self: start; }
  .rk.los .t-pr { grid-area: p; }
  .rk.los .t-kp { grid-area: k; }
  .lijst-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .galerij { grid-template-columns: minmax(0, 1fr); }
  .gal-h { grid-column: 1; }
  .gal-h .tg { aspect-ratio: 1; }
  .gal-h .tg img { inset: 7%; width: 86%; height: 86%; }
  .duimen { grid-column: 1; grid-row: 2; grid-auto-flow: column; grid-auto-columns: 56px; justify-content: start; }
  .koop h1 { font-size: 22px; }
  .pdp-sec { padding-top: 36px; }
  .specs { grid-template-columns: minmax(0, 1fr); }
  .pdp-balk { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; background: #fff; border-top: 1px solid var(--lijn); transform: translateY(110%); transition: transform .18s; }
  .pdp-balk.aan { transform: none; }
  .pdp-balk b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
  .pdp-balk small { color: var(--sub); }
  .ook { padding-bottom: 64px; }
  .wg-rij { grid-template-columns: 64px minmax(0, 1fr) 32px; grid-template-areas: "f n x" "f t s"; column-gap: 12px; row-gap: 8px; align-items: start; }
  .wg-f { grid-area: f; }
  .wg-n { grid-area: n; font-size: 14px; }
  .wg-weg { grid-area: x; margin: -6px -6px 0 0; }
  .wg-rij .teller { grid-area: t; width: 124px; height: 40px; grid-template-columns: 36px minmax(0, 1fr) 36px; }
  .wg-t { grid-area: s; grid-column: 2 / span 2; justify-self: end; align-self: center; }
  .klaar-g { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .velden { grid-template-columns: minmax(0, 1fr); }
  .cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cijfer { padding: 16px; }
  .cijfer b { font-size: 20px; }
  .acc-vakken { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lr-bes, .lr-fac, .lr-lij { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .lr.kopr { display: none; }
  .lr .mob-weg { display: none; }
  .tijdlijn { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .drie, .hulp3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .groot-b { margin-bottom: 40px; }
  .voet-kop { display: block; padding-block: 40px 28px; }
  .voet-zin { align-items: flex-start; gap: 14px; }
  .voet-zin img { width: 48px; height: 48px; }
  .voet-zin p { font-size: 22px; }
  .voet-kop .knop { width: 100%; margin-top: 20px; }
  .voet-contact { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding-top: 40px; }
  .voet-kop + .voet-contact { padding-top: 0; }
  .vc b { font-size: 18px; }
  .voet-kol { display: block; padding-block: 32px 16px; }
  .voet-groep { border-top: 1px solid rgba(255,255,255,.14); }
  .voet-groep h4 { margin: 0; }
  .voet-groep h4 button { height: 48px; cursor: pointer; }
  .voet-groep h4 svg { display: block; transition: transform .15s; }
  .voet-groep.open h4 svg { transform: rotate(180deg); }
  .voet-groep ul { display: none; padding-bottom: 12px; }
  .voet-groep.open ul { display: block; }
  .voet-groep li { padding-block: 6px; }
  .voet-onder { flex-direction: column; }
  .ow-twee { grid-template-columns: minmax(0, 1fr); }
  .ow-lijst { columns: 1; }
  .ow-rij { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .ow-rij.kopr { display: none; }
}
@media (max-width: 400px) {
  .logo { width: 140px; }
  .tel-menu a, .tm-meer { font-size: 14px; }
}
@media (hover: none) {
  .t-rij:not(.t-kop):hover, .lr:not(.kopr):hover { background: none; box-shadow: none; }
  .aantal, .teller input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }