@font-face{font-family:'Mona Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/mona-sans-600-latin-ext.woff2?v=57283db032) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Mona Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/mona-sans-600-latin.woff2?v=a4a03ba93f) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Mona Sans';font-style:normal;font-weight:650;font-display:swap;src:url(fonts/mona-sans-650-latin-ext.woff2?v=e9bdb9d3d3) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Mona Sans';font-style:normal;font-weight:650;font-display:swap;src:url(fonts/mona-sans-650-latin.woff2?v=d620071a37) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Mona Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/mona-sans-700-latin-ext.woff2?v=b7ef830a16) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Mona Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/mona-sans-700-latin.woff2?v=efe52a0e09) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Mona Sans';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/mona-sans-800-latin-ext.woff2?v=958f3b2061) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Mona Sans';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/mona-sans-800-latin.woff2?v=05b91572f9) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Mona Kop';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/mona-kop-900-latin-ext.woff2?v=0db1dda603) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Mona Kop';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/mona-kop-900-latin.woff2?v=9ca8274009) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Mona Smal';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/mona-smal-800-latin-ext.woff2?v=eef0141009) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Mona Smal';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/mona-smal-800-latin.woff2?v=15e0f0032f) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/geist-400-latin-ext.woff2?v=d36144ed54) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/geist-400-latin.woff2?v=e5c249e615) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/geist-500-latin-ext.woff2?v=189a56ee6c) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/geist-500-latin.woff2?v=ebd7c07ebb) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/geist-600-latin-ext.woff2?v=841e7576db) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/geist-600-latin.woff2?v=0b6aaee47e) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:650;font-display:swap;src:url(fonts/geist-650-latin-ext.woff2?v=1dcc3435c4) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:650;font-display:swap;src:url(fonts/geist-650-latin.woff2?v=ba2bd4c402) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/geist-700-latin-ext.woff2?v=108a468151) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/geist-700-latin.woff2?v=dd33e9f6d8) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/geist-mono-400-latin-ext.woff2?v=7cdafa3b45) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/geist-mono-400-latin.woff2?v=1cb2cef759) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/geist-mono-500-latin-ext.woff2?v=6bd4bf5635) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/geist-mono-500-latin.woff2?v=c0adccc43b) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* pictostickers.nl, richting B: groot en grafisch */
:root{
  --bg:#ffffff; --vlak:#f1f1ee; --ink:#111111; --mut:#5a5a58; --zacht:#dededa; --focus:#005bbb;
  --kop:"Mona Sans",system-ui,sans-serif; --kop75:"Mona Kop","Mona Sans",system-ui,sans-serif; --kop90:"Mona Smal","Mona Sans",system-ui,sans-serif; --tekst:"Geist",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
  --pad:56px; --gap:24px; --topH:76px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#111111; --vlak:#1c1c1b; --ink:#f0f0ec; --mut:#a3a3a0; --zacht:#2e2e2c; --focus:#8cbcff}
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--topH) + 16px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--tekst);font-feature-settings:"ss01";-webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img{max-width:100%;display:block}
main{overflow-x:clip}
a{color:inherit}
p,li,dd{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--pad)}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--bg);padding:10px 14px;z-index:60;font:600 16px/1.55 var(--kop)}
.skip:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* stickers: witte snijrand en schaduw via svg-filters */
.stk{height:auto}
.stk-s{filter:url(#snij-s)}
.stk-m{filter:url(#snij-m)}
.stk-l{filter:url(#snij-l)}
.stk-xl{filter:url(#snij-xl)}

/* ---------------------------------------------------------------- topbalk */
.top{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:2px solid var(--ink)}
.top-in{display:flex;align-items:center;gap:44px;height:var(--topH)}
.top-merk{display:block;color:var(--ink);line-height:0}
.wm{height:30px;width:auto;display:block}
.top-nav{display:flex;gap:30px;flex:1}
.top-nav a,.top-mand{font:600 16px/1 var(--kop);text-decoration:none;padding:8px 0;border-bottom:3px solid transparent}
.top-nav a:hover,.top-mand:hover{border-bottom-color:var(--zacht)}
.top-nav a[aria-current],.top-mand[aria-current]{border-bottom-color:var(--ink)}
.top-mand{display:flex;align-items:center;gap:12px}
.teller{min-width:32px;height:32px;padding:0 8px;display:grid;place-items:center;background:var(--ink);color:var(--bg);font:500 14px/1 var(--mono)}
.teller.nul{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.teller.bump{animation:bump .5s ease}
@keyframes bump{30%{transform:scale(1.25)}}

/* ---------------------------------------------------------------- knoppen */
.knop{display:inline-flex;align-items:center;gap:16px;height:58px;padding:0 26px;background:var(--ink);color:var(--bg);border:0;font:700 17px/1 var(--kop);text-decoration:none;cursor:pointer;transition:background .15s}
.knop svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .2s}
.knop:hover{background:color-mix(in srgb,var(--ink) 80%,var(--bg))}
.knop:hover svg{transform:translateX(4px)}
.link{background:none;border:0;padding:0;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------------------------------------------------------------- home: held */
.held-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;padding-top:64px;padding-bottom:44px}
.held-kop{grid-column:1/9;margin:0;font:900 clamp(54px,10vw,148px)/.84 var(--kop75);letter-spacing:-.025em}
.held-kop span{display:block}
.held-zij{grid-column:9/13;padding-bottom:6px}
.held-zij p{margin:0 0 24px;font-size:18px;line-height:1.45}
.held-zij .klein{margin:16px 0 0;font-size:14px;color:var(--mut)}
.vlakken{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.vlak{position:relative;display:flex;flex-direction:column;background:var(--k);color:var(--i);text-decoration:none;padding:20px 22px 20px;overflow:hidden}
.vlak .stk{width:66%;aspect-ratio:1/1;object-fit:contain;margin:26px auto 34px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.vlak:hover .stk{transform:translateY(-6px) rotate(-2deg)}
.vlak-code{font:500 13px/1 var(--mono);color:var(--i2);min-height:13px}
.vlak-onder{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.vlak-onder b{display:block;font:700 19px/1.15 var(--kop)}
.vlak-onder span{font:500 14px/1 var(--mono);white-space:nowrap}
.vlak[data-papier]{box-shadow:inset 0 0 0 2px var(--ink)}
.soorten ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:24px;border-bottom:2px solid var(--ink)}
.soorten a{display:flex;align-items:center;gap:10px;padding:18px 0 16px;text-decoration:none;font:650 16px/1 var(--kop)}
.soorten a i{width:14px;height:14px;background:var(--k);flex:none}
.soorten a[data-papier] i{box-shadow:inset 0 0 0 2px var(--ink)}
.soorten a span{font:500 13px/1 var(--mono);color:var(--mut)}
.soorten a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

/* ---------------------------------------------------------------- banden */
.band{background:var(--k);color:var(--i);padding:96px 0 88px;scroll-margin-top:var(--topH)}
.band :focus-visible{outline-color:var(--i)}
.band-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.band-titel{grid-column:1/-1;grid-row:1;margin:0 0 40px;font:900 clamp(64px,13.2vw,200px)/.8 var(--kop75);letter-spacing:-.03em}
.band-tekst{grid-column:1/6;grid-row:2}
.band-lead{margin:0;font:500 22px/1.35 var(--tekst);max-width:30ch}
.band-meta{display:flex;flex-wrap:wrap;gap:6px 20px;margin:18px 0 26px;font:500 13px/1.3 var(--mono);color:var(--i2)}
.band-alle{display:inline-flex;align-items:center;gap:10px;font:700 17px/1 var(--kop);text-decoration:none;padding-bottom:6px;border-bottom:2px solid currentColor}
.band-alle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .2s}
.band-alle:hover svg{transform:translateX(4px)}
.band-held{grid-column:8/13;grid-row:2/4;align-self:center;justify-self:center;display:grid;justify-items:center;gap:22px;width:100%;text-decoration:none;color:inherit}
.band-held .stk{width:min(88%,470px);max-height:470px;object-fit:contain;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.band-held:hover .stk{transform:translateY(-6px) rotate(-2deg)}
.band-held-onder{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;align-items:baseline;text-align:center}
.band-held-onder b{display:block;font:700 20px/1.2 var(--kop)}
.band-held-onder span{font:500 14px/1 var(--mono);color:var(--i2)}
.band-rij{grid-column:1/7;grid-row:3;list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);row-gap:28px;align-self:end}
.band-om .band-titel{text-align:right}
.band-om .band-tekst{grid-column:8/13}
.band-om .band-rij{grid-column:7/13}
.band-om .band-held{grid-column:1/6}
.band[data-papier]{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}

/* producttegel (band en raster) */
.pk{display:flex;flex-direction:column;min-width:0;container-type:inline-size}
.pk-a{display:flex;flex-direction:column;gap:3px;flex:1;text-decoration:none;color:inherit}
.pk-beeld{position:relative;aspect-ratio:1/1;margin-bottom:10px}
.pk-beeld .stk{position:absolute;top:13%;left:13%;width:74%;height:74%;object-fit:contain;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.pk-a:hover .stk{transform:translateY(-4px)}
.pk-a:hover .pk-naam{text-decoration:underline;text-underline-offset:3px}
.pk-naam{font:650 16px/1.2 var(--kop);font-size:clamp(12px,10cqi,16px)}
.pk-naam b{display:block;font:inherit;hyphens:manual}
.pk-code{font:500 12px/1.3 var(--mono);color:var(--i2)}
.pk-koop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--i) 32%,transparent)}
.pk-prijs{display:grid;gap:4px;font:650 16px/1 var(--tekst);font-variant-numeric:tabular-nums;white-space:nowrap}
.pk-maat{font:500 12px/1 var(--mono);color:var(--i2)}
.plus{flex:none;width:38px;height:38px;display:grid;place-items:center;padding:0;border:2px solid var(--i);background:transparent;color:var(--i);cursor:pointer;transition:background .15s,color .15s}
.plus svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6}
.plus:hover,.plus.ok{background:var(--i);color:var(--k)}

/* ---------------------------------------------------------------- slot op de home */
.slot{border-top:2px solid var(--ink)}
.slot-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-top:88px;padding-bottom:96px}
.slot-kop{grid-column:1/6;margin:0;font:900 clamp(44px,6vw,88px)/.86 var(--kop75);letter-spacing:-.02em}
.slot-tekst{grid-column:7/13;font-size:18px}
.slot-tekst p{margin:0 0 18px}

/* ---------------------------------------------------------------- collectie */
.coll{display:grid;grid-template-columns:250px minmax(0,1fr);column-gap:56px;padding-top:48px;padding-bottom:96px}
.coll-kop{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;padding-bottom:36px;margin-bottom:40px;border-bottom:2px solid var(--ink)}
.coll-kop h1{grid-column:1/8;margin:0;font:900 clamp(54px,8.4vw,128px)/.84 var(--kop75);letter-spacing:-.025em}
.coll-kop p{grid-column:8/13;margin:0;font-size:17px;color:var(--mut)}
.filter{position:sticky;top:calc(var(--topH) + 24px);align-self:start}
.zoek{display:grid;gap:8px;font:600 14px/1 var(--kop);margin-bottom:26px}
.zoek input{height:50px;border:2px solid var(--ink);background:var(--bg);padding:0 14px;font:400 16px/1 var(--tekst);border-radius:0;-webkit-appearance:none;appearance:none}
.zoek input::placeholder{color:var(--mut)}
.f-lijst{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.f{width:100%;display:grid;grid-template-columns:16px 1fr auto;gap:12px;align-items:center;padding:13px 10px 13px 0;border:0;border-bottom:1px solid var(--zacht);background:none;font:600 17px/1 var(--kop);text-align:left;cursor:pointer;transition:padding .15s,background .15s}
.f i{width:16px;height:16px;background:var(--k,var(--ink))}
.f[data-papier] i{box-shadow:inset 0 0 0 2px var(--ink)}
.f span{font:500 13px/1 var(--mono);color:var(--mut)}
.f:hover{padding-left:6px}
.f[aria-pressed="true"]{background:var(--ink);color:var(--bg);padding-left:12px}
.f[aria-pressed="true"] span{color:inherit}
.f[aria-pressed="true"]:not([style]) i{background:var(--bg)}
.f[aria-pressed="true"][data-papier] i{box-shadow:inset 0 0 0 2px var(--bg)}
.groep{margin-bottom:64px;scroll-margin-top:calc(var(--topH) + 20px)}
.groep-kop{display:grid;grid-template-columns:1fr auto;column-gap:24px;align-items:end;padding:26px 26px 24px;background:var(--k);color:var(--i)}
.groep-kop[data-papier]{box-shadow:inset 0 0 0 2px var(--ink)}
.groep-kop h2{margin:0;font:900 clamp(40px,4.6vw,64px)/.86 var(--kop75);letter-spacing:-.02em}
.groep-kop p{grid-row:2;margin:10px 0 0;color:var(--i2);max-width:58ch}
.groep-n{grid-column:2;grid-row:1/3;font:900 clamp(40px,4.6vw,64px)/.86 var(--kop75)}
.raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--kol,6),minmax(0,1fr));border-left:1px solid var(--zacht);--i:var(--ink);--i2:var(--mut);--k:var(--bg)}
.raster .pk{padding:14px 14px 14px;border-right:1px solid var(--zacht);border-bottom:1px solid var(--zacht)}
.raster .pk-beeld{background:var(--vlak)}
.raster .pk-naam{font-size:clamp(12px,10cqi,15px)}
.raster .pk-naam[style]{font-size:min(clamp(12px,10cqi,15px),calc(100cqi / (var(--lw) * .62)))}
.raster .vul-t,.raster .vul-m{display:none}
.raster .vul{border-right:1px solid var(--zacht);border-bottom:1px solid var(--zacht)}
.leeg{display:flex;align-items:center;gap:40px;padding:40px 0}
.leeg-n,.nf-n{margin:0;font:900 clamp(140px,18vw,260px)/.78 var(--kop75);letter-spacing:-.03em;color:var(--ink)}
.leeg p:not(.leeg-n){font-size:19px;max-width:38ch;margin:0}

/* ---------------------------------------------------------------- product */
.kruimel{display:flex;flex-wrap:wrap;gap:10px;padding:20px 0 22px;font-size:14px;color:var(--mut)}
.kruimel a{color:var(--ink);text-underline-offset:3px}
.prod{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-bottom:80px;align-items:start}
.prod-beeld{grid-column:1/8;position:relative;display:grid;place-items:center;aspect-ratio:1/1;background:var(--k);padding:12%}
.prod-beeld[data-papier]{background:var(--vlak)}
.prod-beeld .stk{position:absolute;top:12%;left:12%;width:76%;height:76%;object-fit:contain}
.prod-code{position:absolute;top:22px;left:24px;font:500 14px/1 var(--mono);color:var(--i2)}
.prod-koop{grid-column:8/13;padding-left:12px}
.prod-naam b{display:block;font:inherit;hyphens:manual}
.prod-naam{margin:0 0 18px;font:900 clamp(44px,5.2vw,78px)/.88 var(--kop75);letter-spacing:-.02em}
.prod-oms{margin:0;font-size:18px;line-height:1.45}
.maten{border:0;padding:0;margin:30px 0 0;min-width:0}
.maten legend{padding:0;margin-bottom:12px;font:700 16px/1.3 var(--kop)}
.maat{position:relative;display:grid;grid-template-columns:72px 1fr 1fr auto;gap:12px;align-items:center;padding:15px 16px;border:2px solid var(--ink);margin-top:-2px;cursor:pointer;transition:background .12s}
.maat:hover{background:var(--vlak)}
.maat input{position:absolute;opacity:0;pointer-events:none}
.maat-cm{font:700 18px/1 var(--kop)}
.maat-afm,.maat-af{font-size:14px;color:var(--mut)}
.maat-p{font:700 17px/1 var(--tekst);font-variant-numeric:tabular-nums}
.maat:has(input:checked){background:var(--ink);color:var(--bg)}
.maat:has(input:checked) .maat-afm,.maat:has(input:checked) .maat-af{color:inherit;opacity:.75}
.maat:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px;z-index:1}
.aantal-rij{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:end;margin-top:26px}
.aantal-l{display:block;font:700 16px/1.3 var(--kop);margin-bottom:12px}
.stap{display:flex;width:max-content;height:54px;border:2px solid var(--ink)}
.stap button{width:46px;border:0;background:none;font:400 22px/1 var(--tekst);cursor:pointer}
.stap button:hover{background:var(--vlak)}
.stap input{width:60px;border:0;border-inline:2px solid var(--ink);background:none;text-align:center;font:700 18px/1 var(--tekst);-moz-appearance:textfield;appearance:textfield;border-radius:0}
.stap input::-webkit-outer-spin-button,.stap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.staffel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-height:54px;border-bottom:2px solid var(--zacht)}
.st{display:grid;align-content:end;gap:3px;padding:0 6px 7px;position:relative}
.st-q{font:500 11px/1 var(--mono);color:var(--mut)}
.st-p{font:650 15px/1 var(--tekst);font-variant-numeric:tabular-nums}
.st-k{font:500 11px/1 var(--mono);color:var(--mut)}
.st.aan::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:4px;background:var(--ink)}
.st.aan .st-p{font-weight:700}
.koop{width:100%;justify-content:space-between;height:66px;margin-top:26px;font-size:19px}
.koop-p{font:700 19px/1 var(--tekst);font-variant-numeric:tabular-nums}
.prod-klein{margin:14px 0 0;font-size:14px;color:var(--mut)}
.prod-meer{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-top:56px;padding-bottom:88px;border-top:2px solid var(--ink)}
.prod-meer-t{grid-column:1/8}
.prod-meer-t h2{margin:0 0 20px;font:900 clamp(36px,4vw,56px)/.9 var(--kop75);letter-spacing:-.015em}
.prod-meer-t p{margin:0 0 16px;font-size:17px;max-width:62ch}
.prod-meer-t a{text-underline-offset:3px}
.specs{grid-column:9/13;display:grid;grid-template-columns:auto 1fr;margin:6px 0 0;border-top:2px solid var(--ink)}
.specs dt,.specs dd{padding:13px 0;border-bottom:1px solid var(--zacht);margin:0}
.specs dt{font:500 13px/1.5 var(--mono);color:var(--mut);padding-right:20px}
.specs dd{font-size:15px}
.band-kort{padding:64px 0 64px}
.band-kort .band-titel-s{grid-column:1/9;margin:0;font-size:clamp(44px,6.4vw,96px);align-self:end}
.band-kort .band-alle{grid-column:9/13;grid-row:1;justify-self:end;align-self:end;margin-bottom:6px}
.band-kort .band-rij{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:40px}

/* ---------------------------------------------------------------- winkelmand */
.mand{padding-top:48px;padding-bottom:104px}
.mand-kop{display:flex;align-items:end;justify-content:space-between;gap:24px;padding-bottom:30px;border-bottom:2px solid var(--ink);margin-bottom:0}
.mand-kop h1{margin:0;font:900 clamp(54px,8.4vw,128px)/.84 var(--kop75);letter-spacing:-.025em}
.mand-sub{margin:0;font:500 15px/1.3 var(--mono);color:var(--mut)}
.mand-leeg{display:flex;align-items:center;gap:56px;padding:64px 0}
.mand-leeg p:not(.leeg-n){font-size:22px;margin:0 0 22px}
.mand-vol{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.mand-lijst{grid-column:1/9;list-style:none;margin:0;padding:0}
.mr{display:grid;grid-template-columns:104px minmax(0,1fr) auto 110px 40px;gap:22px;align-items:center;padding:20px 0;border-bottom:1px solid var(--zacht)}
.mr-beeld{position:relative;aspect-ratio:1/1;background:var(--vlak)}
.mr-beeld .stk{position:absolute;top:14%;left:14%;width:72%;height:72%;object-fit:contain}
.mr-naam{font:700 19px/1.2 var(--kop);text-decoration:none}
.mr-naam:hover{text-decoration:underline;text-underline-offset:3px}
.mr-meta{margin:6px 0 0;font:500 13px/1.45 var(--mono);color:var(--mut)}
.mr-meta b{font-weight:500;color:var(--ink);background:var(--vlak);padding:1px 6px}
.mr .stap{height:44px}
.mr .stap button{width:38px;font-size:19px}
.mr .stap input{width:50px;font-size:16px}
.mr-tot{font:700 18px/1 var(--tekst);text-align:right;font-variant-numeric:tabular-nums}
.weg{width:40px;height:40px;display:grid;place-items:center;border:0;background:none;cursor:pointer;color:var(--mut)}
.weg svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}
.weg:hover{color:var(--ink);background:var(--vlak)}
.mand-som{grid-column:9/13;position:sticky;top:calc(var(--topH) + 24px);margin-top:28px;border:2px solid var(--ink);padding:26px}
.mand-som dl{display:grid;grid-template-columns:1fr auto;gap:10px 0;margin:0}
.mand-som dt,.mand-som dd{margin:0}
.mand-som dd{padding-left:16px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.mand-som .som-tot{font:800 26px/1 var(--kop);padding-top:16px;margin-top:6px;border-top:2px solid var(--ink)}
.som-noot{margin:16px 0 20px;font-size:14px;color:var(--mut)}
.knop-vol{width:100%;justify-content:center}
.som-klein{margin:18px 0 0;font-size:13px;color:var(--mut)}
.preview{margin-top:18px;padding:16px 18px;background:var(--vlak);box-shadow:inset 6px 0 0 var(--ink)}
.preview b{display:block;font:700 16px/1.3 var(--kop);margin-bottom:4px}
.preview p{margin:0;font-size:15px}
.preview:focus{outline:none}

/* ---------------------------------------------------------------- tekstpagina's */
.tekst-wrap{padding-bottom:104px}
.tekst{max-width:780px}
.tekst h1{margin:16px 0 30px;font:900 clamp(40px,7vw,104px)/.86 var(--kop75);font-size:min(13vw,104px,calc(min(780px,100vw - 40px) / (var(--lw,10) * .46)));letter-spacing:-.025em}
.tekst h2{margin:44px 0 12px;font:800 26px/1.15 var(--kop90)}
.tekst p,.tekst li{font-size:17px}
.tekst .lead{font-size:21px;line-height:1.45;margin-top:0}
.tekst ol,.tekst ul{padding-left:22px}
.tekst li{margin-bottom:10px}
.tekst a{text-underline-offset:3px}
.gegevens{display:grid;grid-template-columns:auto 1fr;border-top:2px solid var(--ink);margin:0}
.gegevens dt,.gegevens dd{margin:0;padding:12px 0;border-bottom:1px solid var(--zacht)}
.gegevens dt{font:500 13px/1.6 var(--mono);color:var(--mut);padding-right:28px}
.vragen details{border-bottom:1px solid var(--zacht)}
.vragen details:first-child{border-top:2px solid var(--ink)}
.vragen summary{cursor:pointer;padding:16px 0;font:700 18px/1.3 var(--kop);list-style:none;display:flex;justify-content:space-between;gap:16px}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"+";font:400 24px/1 var(--tekst)}
.vragen details[open] summary::after{content:"\2212"}
.vragen details p{margin:0 0 18px}
.formulier{display:grid;gap:16px;margin:28px 0 34px}
.formulier label{display:grid;gap:7px;font:600 14px/1.2 var(--kop)}
.formulier input,.formulier select,.formulier textarea{border:2px solid var(--ink);background:var(--bg);padding:12px 14px;font:400 16px/1.4 var(--tekst);border-radius:0}
.formulier .twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.formulier .knop{justify-self:start}
.formulier .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.formulier{position:relative}
.formulier .knop[disabled]{opacity:.6;cursor:wait}

/* ---------------------------------------------------------------- 404 */
.nf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:56px;align-items:center;padding-top:88px;padding-bottom:120px}
.nf-t h1{margin:0 0 16px;font:900 clamp(36px,4.4vw,64px)/.92 var(--kop75)}
.nf-t p{font-size:18px;margin:0 0 26px;max-width:40ch}

/* ---------------------------------------------------------------- voet */
.voet{background:#0b0b0b;color:#ededea;padding:64px 0 40px}
.voet-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.voet-merk{grid-column:1/6}
.wm-voet{height:36px;color:#fff}
.voet-merk p{margin:18px 0 0;color:#a9a9a5;max-width:34ch}
.voet-nav{grid-column:7/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px;align-content:start}
.voet-nav a{font:600 16px/1.2 var(--kop);text-decoration:none}
.voet-nav a:hover{text-decoration:underline;text-underline-offset:4px}
.voet-wet{grid-column:1/-1;margin:48px 0 0;padding-top:20px;border-top:1px solid #333;font-size:13px;color:#9a9a96;display:flex;flex-wrap:wrap;gap:4px 18px}
.voet :focus-visible{outline-color:#fff}

/* ---------------------------------------------------------------- melding */
.melding{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:18px;max-width:min(calc(100% - 32px),640px);padding:12px 22px 12px 18px;background:var(--ink);color:var(--bg);font:400 15px/1.35 var(--tekst);box-shadow:0 10px 30px rgb(0 0 0 / .25);animation:in .25s ease}
.melding img{width:34px;height:34px;object-fit:contain;flex:none}
.melding-t{min-width:0}
.melding-t b{display:block;font-weight:700}
.melding a{color:inherit;white-space:nowrap;font-weight:700;text-underline-offset:3px;padding:12px 0}
@keyframes in{from{opacity:0;transform:translate(-50%,10px)}}

/* ---------------------------------------------------------------- tablet */
@media (max-width:1180px){
  :root{--pad:36px}
  .band-tekst,.band-om .band-tekst{grid-column:1/8;grid-row:2}
  .band-held,.band-om .band-held{grid-column:8/13;grid-row:2}
  .band-rij,.band-om .band-rij{grid-column:1/-1;grid-row:3;grid-template-columns:repeat(6,minmax(0,1fr))}
  .band-om .band-titel{text-align:left}
  .coll{grid-template-columns:210px minmax(0,1fr);column-gap:36px}
  .raster:not(#_){--kol:4!important}
  .raster .vul-t{display:block}
  .raster .vul-d{display:none}
  .prod-beeld{grid-column:1/7}
  .prod-koop{grid-column:7/13;padding-left:0}
  .mr{grid-template-columns:84px minmax(0,1fr) auto 90px 40px;gap:16px}
}

/* ---------------------------------------------------------------- mobiel */
@media (max-width:900px){
  :root{--pad:20px;--gap:16px;--topH:62px}
  .wm{height:23px}
  .top-in{gap:4px}
  .top-nav{display:none}
  .top-merk{margin-right:auto;padding-block:12px}
  .top-mand{min-width:44px;justify-content:center}
  .top-mand-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .held-in{grid-template-columns:minmax(0,1fr);padding-top:36px;padding-bottom:28px;row-gap:24px}
  .held-kop,.held-zij{grid-column:1}
  .held-kop{font-size:clamp(50px,15.4vw,120px)}
  .held-zij p{font-size:17px}
  .vlakken{grid-template-columns:repeat(2,minmax(0,1fr));margin-inline:calc(var(--pad) * -1)}
  .vlak{padding:14px 14px 14px}
  .vlak .stk{width:72%;margin:14px auto 18px}
  .vlak-code{font-size:12px}
  .vlak-onder{gap:5px}
  .vlak-onder b{font-size:16px}
  .vlak-onder span{font-size:13px}
  .soorten ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .soorten a{padding:14px 0}
  .band{padding:56px 0 52px}
  .band-in{grid-template-columns:minmax(0,1fr)}
  .band-titel,.band-om .band-titel{grid-column:1;font-size:min(17vw,130px,calc((100vw - 40px) / (var(--lw,8) * .47)));margin-bottom:22px;text-align:left}
  .band-tekst,.band-om .band-tekst,.band-held,.band-om .band-held,.band-rij,.band-om .band-rij{grid-column:1;grid-row:auto}
  .band-held{margin-top:36px}
  .band-held .stk{width:min(76%,360px)}
  .band-lead{font-size:19px}
  .band-rij,.band-om .band-rij,.band-kort .band-rij{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:40px;row-gap:22px}
  .band-kort{padding:48px 0}
  .band-kort .band-titel-s{grid-column:1;font-size:min(12vw,72px,calc((100vw - 40px) / (var(--lw,8) * .47)))}
  .band-kort .band-alle{grid-column:1;grid-row:2;justify-self:start;margin-top:18px}
  .band-kort .band-rij{grid-row:3;margin-top:28px}
  .slot-in{grid-template-columns:minmax(0,1fr);padding-top:56px;padding-bottom:64px}
  .slot-kop,.slot-tekst{grid-column:1}
  .slot-kop{margin-bottom:24px}
  .slot-tekst{font-size:17px}
  .coll{grid-template-columns:minmax(0,1fr);padding-top:30px}
  .coll-kop{grid-template-columns:minmax(0,1fr);row-gap:16px;padding-bottom:24px;margin-bottom:24px}
  .coll-kop h1,.coll-kop p{grid-column:1}
  .filter{position:static;margin-bottom:36px}
  .f-lijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .f{font-size:16px;padding:14px 8px 14px 0}
  .groep-kop{padding:20px 18px}
  .groep-kop p{font-size:15px}
  .raster:not(#_):not(#__){--kol:2!important}
  .raster .vul-t{display:none}
  .raster .vul-m{display:block}
  .raster .pk{padding:12px}
  .leeg{flex-direction:column;align-items:flex-start;gap:16px}
  .prod{grid-template-columns:minmax(0,1fr);padding-bottom:56px}
  .prod-beeld,.prod-koop{grid-column:1}
  .prod-beeld{margin-inline:calc(var(--pad) * -1);aspect-ratio:auto;height:min(52vw,210px);padding:18px;grid-template:minmax(0,1fr) / minmax(0,1fr)}   /* laag beeldvak: naam en maatkeuze in het eerste scherm */
  .prod-beeld .stk{filter:url(#snij-m);top:18px;left:18px;width:calc(100% - 36px);height:calc(100% - 36px)}
  .prod-code{top:14px;left:var(--pad)}
  .prod-koop{padding-top:20px}
  .prod-naam{margin-bottom:12px}
  .prod-oms{font-size:17px}
  .maten{margin-top:20px}
  .prod-naam{font-size:min(12vw,64px,calc((100vw - 40px) / (var(--lw,8) * .47)))}
  .maat{grid-template-columns:58px 1fr auto;row-gap:4px;padding:13px 14px}
  .maat-afm{grid-column:2;grid-row:1}
  .maat-af{grid-column:2;grid-row:2}
  .maat-p{grid-column:3;grid-row:1/3}
  .maat-cm{grid-row:1/3}
  .aantal-rij{grid-template-columns:minmax(0,1fr)}
  .prod-meer{grid-template-columns:minmax(0,1fr);padding-top:40px;padding-bottom:56px}
  .prod-meer-t,.specs{grid-column:1}
  .specs{margin-top:20px}
  .mand{padding-top:30px}
  .mand-kop{flex-direction:column;align-items:flex-start;gap:10px}
  .mand-vol{grid-template-columns:minmax(0,1fr)}
  .mand-lijst,.mand-som{grid-column:1}
  .mand-som{position:static}
  .mr{grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"b n w" "b s t";gap:10px 14px}
  .mr-beeld{grid-area:b;align-self:start}
  .mr-info{grid-area:n}
  .mr .stap{grid-area:s;justify-self:start}
  .mr-tot{grid-area:t;justify-self:end;align-self:center}
  .weg{grid-area:w;align-self:start;justify-self:end;width:44px;height:44px;margin:-8px -10px 0 0}
  .mand-leeg{flex-direction:column;align-items:flex-start;gap:20px;padding:40px 0}
  .formulier .twee{grid-template-columns:minmax(0,1fr)}
  .nf{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:48px;padding-bottom:80px}
  .voet{padding:48px 0 32px}
  .voet-merk,.voet-nav{grid-column:1/-1}
  .voet-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin-top:20px}
  .voet-nav a{padding:13px 0}
  .wm-voet{height:30px}
}
@media (max-width:374px){
  .raster .pk{padding:10px 8px}
  .soorten ul,.f-lijst{grid-template-columns:minmax(0,1fr)}
  .tekst h2{font-size:23px}
}
/* soortpagina's: kop als de band op de home, daaronder het volledige raster */
.band-titel-a{color:inherit;text-decoration:none}
.band-titel-a:hover{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.08em}
.soort-kop{padding-top:72px}
.soort-titel{font-size:min(13.2vw,200px,calc((min(100vw,1440px) - 2 * var(--pad)) / (var(--lw,10) * .47)))}
.soort-extra{margin:18px 0 0;font:400 17px/1.55 var(--tekst);max-width:44ch}
/* lage kop: de eerste rij stickers staat in het eerste scherm (desktop: sticker rechts naast titel en tekst; mobiel: zonder grote sticker) */
.soort-kop .band-titel{margin-bottom:24px}
.soort-kop .band-meta{margin-bottom:0}
@media (min-width:901px){
  .soort-kop{padding:44px 0 46px}
  .soort-kop .soort-titel{grid-column:1/9;font-size:min(128px,calc((min(100vw,1440px) - 2 * var(--pad)) * .64 / (var(--lw,10) * .47)))}
  .soort-kop .band-tekst{grid-column:1/8;grid-row:2}
  .soort-kop .band-held{grid-column:9/13;grid-row:1/3;align-self:center;gap:16px}
  .soort-kop .band-held .stk{width:min(100%,290px);max-height:290px}
}
@media (max-width:900px){
  .soort-kop{padding:30px 0 30px}
  .soort-kop .band-held{display:none}
  .soort-kop .band-titel{margin-bottom:16px}
}
.soort-lijst{padding-top:40px;padding-bottom:72px}
@media (max-width:900px){.soort-lijst{padding-top:24px}}
.soort-verder{margin:32px 0 0}
.soort-verder .band-alle{color:var(--ink)}
/* winkelmand en kassa: de voet niet laten verspringen als het script de inhoud vult (CLS) */
.p-mand main,.p-kassa main{min-height:calc(100svh - var(--topH))}
/* vangnet voor vergrote systeemtekst, browserzoom, terugvalletter en smalle schermen: tekst breekt liever af dan dat hij
   buiten beeld valt of wordt weggeknipt. Bij standaard tekstgrootte verandert hier niets aan het beeld. */
body{overflow-wrap:break-word}
h1,h2,h3,legend,summary,dd,.onder b,.pk-naam,.pk-code,.mr-naam,.mr-meta,.maat>span,.groep-n,.vlak-code,.prod-code,.band-meta span{overflow-wrap:anywhere}
.staffel{grid-template-columns:repeat(auto-fit,minmax(4.4em,1fr))}
.soorten a{min-width:0;flex-wrap:wrap;row-gap:4px;overflow-wrap:anywhere}
.soorten li{min-width:0}
.top-in{flex-wrap:wrap;height:auto;min-height:var(--topH);row-gap:6px;padding-block:6px}   /* 4 naast elkaar; bij vergrote tekst 2 x 2 */
.koop{height:auto;min-height:66px;flex-wrap:wrap;row-gap:4px}
.maat>*,.mr>*,.mr-info,.groep-kop>*,.band-tekst,.held-zij,.slot-tekst{min-width:0}
fieldset{min-width:0}
input,select,textarea{max-width:100%}
.mr .stap{width:auto;max-width:100%}
.mr .stap button{flex:0 1 38px;min-width:28px}
.mr .stap input{flex:0 1 50px;min-width:30px;width:auto}
/* WebKit (ook iOS) tekende bij het snijfilter op de grote stickers een zwart blok linksboven in main; een eigen laag voorkomt dat */
.stk-l,.stk-xl{transform:translateZ(0)}
@media (max-width:480px){.groep-kop h2{font-size:min(40px,calc((100vw - 150px) / 6.1))}}   /* langste soortnaam past op 320 */
@media (max-width:300px){   /* 150% paginazoom op een smalle telefoon */
  .top .wm{height:18px}
  .top-uit summary{width:36px}
  .vlak-onder span{white-space:normal}
  .maat{grid-template-columns:minmax(0,1fr) auto}
  .maat-cm{grid-row:1}
  .maat-p{grid-column:2;grid-row:1}
  .maat-afm,.maat-af{grid-column:1/-1;grid-row:auto}
  .mr{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"b n w" "s s t"}
}
.formulier,.formulier label{grid-template-columns:minmax(0,1fr)}
.formulier,.formulier>*,.formulier input,.formulier select,.formulier textarea{min-width:0}
.formulier input,.formulier select,.formulier textarea{width:100%}
/* landen: de stickers in het heldvak (bij het laden) en de grote sticker per band (bij in beeld scrollen) zakken eenmalig
   zacht op hun plek; alleen transform en opacity, geen layoutverschuiving. Uit bij prefers-reduced-motion. */
@keyframes landen{from{opacity:.01;transform:translateY(-14px) rotate(-2.5deg)}to{opacity:1;transform:none}}
.vlak .stk{animation:landen .6s cubic-bezier(.2,.8,.2,1) backwards}
.vlak:nth-child(2) .stk{animation-delay:.08s}
.vlak:nth-child(3) .stk{animation-delay:.16s}
.vlak:nth-child(4) .stk{animation-delay:.24s}
.band-held .stk.wacht{opacity:0;transform:translateY(-14px) rotate(-2.5deg)}
.band-held .stk.land{animation:landen .65s cubic-bezier(.2,.8,.2,1) backwards}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------------------------------------------------------------- ronde 12 nov: zoeken in de topbalk, compact menu, plakbalk, tikvlakken */
:root{--fout:#b3122b}
@media (prefers-color-scheme:dark){:root{--fout:#ff9c9c}}
/* zoekingang: vanaf 1100 px een vast veld in de balk, daaronder een uitklapper (details) */
.tz{display:flex;height:44px;border:2px solid var(--ink);background:var(--bg)}
.tz input{flex:1;min-width:0;width:200px;border:0;background:none;padding:0 12px;font:400 16px/1 var(--tekst);border-radius:0;-webkit-appearance:none;appearance:none}
.tz input::placeholder{color:var(--mut)}
.tz input:focus-visible{outline-offset:-5px}
.tz button{flex:none;width:44px;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer}
.tz button:hover{background:var(--vlak)}
.tz svg,.top-uit summary svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2}
.top-uit{display:none}
.top-uit summary{list-style:none;width:44px;height:44px;display:grid;place-items:center;cursor:pointer}
.top-uit summary::-webkit-details-marker{display:none}
.top-uit summary:hover{background:var(--vlak)}
.top-uit[open] summary{background:var(--ink);color:var(--bg)}
.top-paneel{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-block:2px solid var(--ink);padding:14px var(--pad) 16px;box-shadow:0 14px 30px rgb(0 0 0 / .12)}
.top-paneel .tz{height:50px;max-width:640px;margin-inline:auto}
.top-menu{display:grid;padding-block:4px}
.top-menu a{padding:16px 0;font:600 18px/1 var(--kop);text-decoration:none;border-bottom:1px solid var(--zacht)}
.top-menu a:last-child{border-bottom:0}
.top-menu a[aria-current]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
@media (max-width:1099px){.tz-vast{display:none}.top-uit-zoek{display:block}}
@media (max-width:900px){.top-uit-menu{display:block}}
@media (max-width:359px){.top .wm{height:20px}}   /* woordmerk, zoeken, menu en mand op een regel bij 320 px */
/* snelkoppelingen naar de acht soorten (404, zoeken zonder resultaat) */
.snel{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;border-top:2px solid var(--ink)}
.snel a{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:48px;padding:8px 0;border-bottom:1px solid var(--zacht);font:600 17px/1.2 var(--kop);text-decoration:none}
.snel a:hover{text-decoration:underline;text-underline-offset:4px}
.snel i{width:16px;height:16px;background:var(--k)}
.snel a[data-papier] i{box-shadow:inset 0 0 0 2px var(--ink)}
.snel span{font:500 13px/1 var(--mono);color:var(--mut)}
.leeg-t{flex:1;min-width:0}
@media (max-width:900px){.coll.zoekt .f-lijst{display:none}.coll.zoekt .filter{margin-bottom:24px}}   /* tijdens zoeken op mobiel de uitkomst direct onder het veld */
.nf-zoek{height:50px;max-width:440px}
.nf .snel{max-width:640px;margin-bottom:30px}
@media (max-width:560px){.snel{grid-template-columns:minmax(0,1fr)}}
/* zoekveld op het overzicht: label boven het veld */
.zoek label{display:block}
/* na toevoegen: blijvende link onder de knop */
.koop.ok,.plak .knop.ok{background:color-mix(in srgb,var(--ink) 80%,var(--bg))}
.koop-na{margin:12px 0 0;padding:10px 14px;background:var(--vlak);box-shadow:inset 4px 0 0 var(--ink);font-size:15px}
.koop-na a{display:inline-block;padding:10px 0;margin:-10px 0;font-weight:700;text-underline-offset:3px}
/* plakbalk op mobiel (alleen als de echte knop buiten beeld is; vaste positie, de voet houdt er ruimte voor vrij) */
.plak{display:none}
@media (max-width:900px){
  .plak{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px var(--pad);background:var(--bg);border-top:2px solid var(--ink)}
  .plak-i{display:grid;gap:4px;min-width:0}
  .plak-i b{font:700 19px/1 var(--tekst);font-variant-numeric:tabular-nums}
  .plak-i span{font:500 12px/1 var(--mono);color:var(--mut)}
  .plak .knop{height:48px;padding:0 22px;font-size:17px;flex:none}
  .p-prod .voet{padding-bottom:104px}
  .plak-aan .melding{bottom:82px}
  .melding{left:12px;right:12px;bottom:12px;transform:none;max-width:none;gap:14px;animation-name:in-m}
  .melding a{margin-left:auto}
}
@media (max-width:560px){
  .melding{display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 14px;padding:12px 18px 6px 14px}
  .melding a{grid-column:2;justify-self:start;margin-left:0}
}
@keyframes in-m{from{opacity:0;transform:translateY(10px)}}
/* winkelmand: verder winkelen */
.som-verder{margin:10px 0 0;text-align:center}
.som-verder a{display:inline-block;padding:14px 10px;font:600 16px/1 var(--kop);text-underline-offset:4px}
/* tikvlakken van minstens 44 px; het zichtbare element blijft zo groot als het was */
.plus,.band-alle,.kruimel a{position:relative}
.plus::after{content:"";position:absolute;inset:-5px}
.band-alle::after{content:"";position:absolute;inset:-9px 0}
.kruimel a::after{content:"";position:absolute;inset:-12px -3px}
/* focusring op de gekleurde groepkoppen */
.groep-kop :focus-visible{outline-color:var(--i)}
/* contactformulier: melding per veld */
.vf{font:400 14px/1.35 var(--tekst);color:var(--fout)}
.formulier [aria-invalid="true"]{border-color:var(--fout)}
/* staffel op heel smalle schermen: twee bij twee */
@media (max-width:340px){
  .staffel{grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:0;row-gap:10px}
  .st{border-bottom:2px solid var(--zacht);padding-top:6px}
}
@media (max-width:359px){.mr{grid-template-columns:56px minmax(0,1fr) auto;gap:10px 12px}}
@media (max-width:900px){.mr .stap{height:48px}.mr .stap button{flex:0 0 44px}}   /* tikvlak 44 px in de mand */
@media (max-width:359px){.mr .stap button{flex:0 1 44px;min-width:40px}}