/* GreenHappy, richting "Handen in de aarde": gedeelde stijl voor de binnenpagina's (11 oktober 2026) */
:root{
  --soil-900:#1F1A15;
  --soil-700:#3F352C;
  --leaf-900:#1E3B2A;
  --leaf-700:#335F30;
  --leaf-500:#6B9B45;
  --sprout-300:#D5E58E;
  --stone-100:#F5F4EE;
  --stone-200:#E6E5DA;
  --label:#FBFAF5;
  --wood:#C9A87C;
  --rule:#1F1A15;
  --font-body:'Familjen Grotesk','Segoe UI',system-ui,sans-serif;
  --font-label:'Familjen Grotesk','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--stone-100);color:var(--soil-900);font:400 18px/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
img{display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--leaf-500);outline-offset:3px}
.wrap{width:min(100% - 32px,1180px);margin-inline:auto}
.narrow{width:min(100% - 32px,760px);margin-inline:auto}
.mono{font-family:var(--font-label);font-size:16px;font-weight:500;letter-spacing:0}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 14px;z-index:99}.skip:focus{left:8px}

/* header op groen */
header.site{background:var(--leaf-900);color:#fff}
.bar{display:flex;justify-content:space-between;align-items:center;min-height:76px}
.logo{display:inline-block;font:700 30px/1 var(--font-body);letter-spacing:-.03em;text-decoration:none;position:relative}
.logo svg{position:absolute;left:0;right:0;bottom:-8px;width:100%;height:10px;overflow:visible}
nav.d{display:none;gap:26px;font-weight:500}
nav.d a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
nav.d a:hover,nav.d a[aria-current]{border-color:var(--sprout-300)}
.menu-btn{background:none;border:0;color:#fff;font:600 17px var(--font-body);padding:10px 0;cursor:pointer}
.menu-btn span{border-bottom:2px solid #fff}
.sheet{display:none;position:fixed;inset:0;background:var(--leaf-900);color:#fff;z-index:30;padding:20px 24px;overflow:auto}
.sheet.open{display:block}
.sheet a{display:block;font:600 34px/1.2 var(--font-body);padding:10px 0;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2)}
.sheet button{background:none;border:0;color:#fff;font:600 17px var(--font-body);float:right;padding:10px 0;cursor:pointer}
@media (min-width:960px){nav.d{display:flex}.menu-btn{display:none}}

/* paginakop */
.pagehead{background:var(--leaf-900);color:#fff;padding-bottom:clamp(40px,6vw,72px)}
.pagehead .grid{display:grid;gap:32px;align-items:end;padding-top:clamp(24px,5vw,56px)}
.crumbs{color:var(--sprout-300);margin-bottom:18px}
.crumbs a{text-decoration:none;border-bottom:1px solid currentColor}
.pagehead h1{font:600 clamp(34px,6.4vw,76px)/1 var(--font-body);letter-spacing:-.035em;margin:0 0 18px;text-wrap:balance}
.pagehead .lead{font-size:clamp(18px,2.1vw,22px);color:#E3EAD8;max-width:34em;margin:0}
.byline{margin-top:22px;color:var(--sprout-300);display:flex;flex-wrap:wrap;gap:4px 18px}
.pagehead figure{margin:0}
.pagehead figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pagehead figcaption{margin-top:8px;color:#C7D3BC}
@media (min-width:960px){.pagehead .grid{grid-template-columns:7fr 5fr;gap:56px}}

/* knoppen en links */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:12px 26px;background:var(--soil-900);color:#fff;font:600 18px var(--font-body);text-decoration:none;border:0;border-radius:3px;cursor:pointer}
.btn:hover{background:var(--soil-700)}
.btn.light{background:var(--label);color:var(--soil-900)}
.btn.light:hover{background:#fff}
.btn.green{background:var(--leaf-700)}
.btn.green:hover{background:var(--leaf-900)}
.link{font-weight:600;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.link:hover{opacity:.8}

/* kop in notitieboekstijl */
.no{display:block;margin-bottom:10px;color:var(--leaf-700)}
h2{font:600 clamp(30px,4.8vw,52px)/1.04 var(--font-body);letter-spacing:-.03em;margin:0 0 18px;text-wrap:balance}
h3{font:600 clamp(21px,2.4vw,26px)/1.2 var(--font-body);letter-spacing:-.015em;margin:28px 0 8px}
.lead2{font-size:clamp(18px,2vw,21px);color:var(--soil-700);max-width:34em}
section.s{padding:clamp(48px,8vw,96px) 0}
.rule{border:0;border-top:2px solid var(--rule);margin:0}

/* plantenlabel */
.tag{position:relative;background:var(--label);color:var(--soil-900);padding:26px 22px 20px;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.tag::before{content:"";position:absolute;top:9px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--stone-200);box-shadow:inset 0 1px 1px rgba(0,0,0,.25)}
.tag h2,.tag h3{margin:0}
.tag .kicker{display:block;margin-bottom:8px;color:var(--leaf-700);font-weight:700}
.tag ul{margin:12px 0 0;padding:0 0 0 20px}
.tag li{margin:6px 0}
.stake{position:relative;padding-bottom:54px}
.stake::after{content:"";position:absolute;left:50%;bottom:0;width:12px;height:56px;margin-left:-6px;background:linear-gradient(90deg,var(--wood),#b99565)}

/* artikel */
.article-grid{display:grid;gap:40px}
.toc{font-family:var(--font-label);font-size:16px}
.toc b{display:block;margin-bottom:10px}
.toc ol{margin:0;padding:0;list-style:none;border-top:2px solid var(--rule)}
.toc li{border-bottom:1px solid var(--rule)}
.toc a{display:block;padding:8px 0;text-decoration:none}
.toc a:hover{color:var(--leaf-700)}
.toc .n{display:inline-block;width:30px;color:var(--leaf-700)}
@media (min-width:1000px){
  .article-grid{grid-template-columns:3fr 8fr;gap:64px;align-items:start}
  .toc{position:sticky;top:20px}
}
.prose{max-width:46em}
.prose p{margin:0 0 1.1em}
.prose figure{margin:32px 0}
.prose figure img{width:100%;max-height:520px;object-fit:cover}
.prose figcaption{margin-top:8px;color:var(--soil-700)}
.prose h2{margin-top:clamp(44px,7vw,80px)}
.prose ul.plain{margin:0 0 1.2em;padding-left:22px}
.prose ul.plain li{margin:6px 0}
.note{border-left:4px solid var(--leaf-500);padding:2px 0 2px 16px;color:var(--soil-700);margin:20px 0}

/* tabellen */
.tablewrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:16px}
table.t caption{text-align:left;font-family:var(--font-label);font-size:14px;padding-bottom:10px;color:var(--soil-700)}
table.t th{font:700 15px var(--font-label);text-align:left;padding:8px 10px 8px 0;border-top:2px solid var(--rule);border-bottom:1px solid var(--rule);white-space:nowrap}
table.t td{padding:16px 12px 16px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.t td.num{font:600 34px/1 var(--font-body);letter-spacing:-.03em;white-space:nowrap}
table.t td.num small{display:block;font:400 13px var(--font-label);letter-spacing:0;margin-top:6px;color:var(--soil-700)}
table.t .prod b{display:block;font-size:18px;line-height:1.25}
table.t .prod span{font-size:15px;color:var(--soil-700)}
.veen{display:flex;align-items:center;gap:8px;font:600 15px var(--font-label);min-width:110px}
.veen i{flex:1;height:8px;background:var(--stone-200);position:relative}
.veen i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v,0%);background:#C99066}
.warn{font:600 15px/1.3 var(--font-label);background:var(--stone-200);display:inline-block;padding:2px 8px;margin-top:6px}
.shopcell .btn{min-height:44px;padding:8px 16px;font-size:16px}
.shopcell .np{font-size:14px;color:var(--soil-700);border-left:3px solid var(--leaf-500);padding-left:10px}
.shopcell .np b{color:var(--soil-900)}
@media (max-width:1099px){
  table.t,table.t tbody,table.t tr,table.t td{display:block;width:100%}
  table.t thead{display:none}
  table.t tr{border-top:2px solid var(--rule);padding:16px 0 6px}
  table.t td{border:0;padding:4px 0}
  table.t td::before{content:attr(data-l);display:block;font:700 14px var(--font-label);color:var(--leaf-700);margin-top:6px}
  table.t td.prod::before,table.t td.num::before{display:none}
  table.t td[data-l="#"]::before{display:none}
  table.t caption{display:block;width:100%}
}

/* schakelaar */
.switch{display:inline-flex;border:2px solid var(--soil-900);margin:6px 0 18px}
.switch button{border:0;background:transparent;font:600 16px var(--font-body);padding:10px 18px;cursor:pointer;color:var(--soil-900)}
.switch button[aria-pressed="true"]{background:var(--soil-900);color:#fff}

/* faq */
details{border-top:1px solid var(--rule);padding:0}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{list-style:none;cursor:pointer;font:600 21px/1.3 var(--font-body);padding:18px 40px 18px 0;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:14px;font:400 30px var(--font-label)}
details[open] summary::after{content:"–"}
details p{margin:0 0 18px;max-width:40em;color:var(--soil-700)}

/* formulier */
.mail{background:var(--leaf-900);color:#fff;padding:clamp(40px,6vw,72px) 0}
.mail .grid{display:grid;gap:28px}
.mail h2{color:#fff}
.mail p{color:#D3DCCB;max-width:34em}
.mail form{display:grid;gap:12px;align-content:start}
.mail label.l{font-weight:600}
.mail input[type=email]{min-height:52px;border:2px solid transparent;border-radius:3px;padding:12px 16px;font:500 18px var(--font-body);width:100%}
.mail .btn{background:var(--sprout-300);color:var(--soil-900);justify-content:center}
.mail .btn:hover{background:#fff}
.mail small{color:#B3C0A9}
@media (min-width:900px){.mail .grid{grid-template-columns:1fr 1fr;align-items:center}}

/* footer */
footer.site{background:var(--leaf-900);color:#D3DCCB;padding:56px 0 32px;border-top:1px solid rgba(255,255,255,.18)}
footer .cols{display:grid;gap:30px}
footer .logo{color:#fff;margin-bottom:14px}
footer a{display:block;text-decoration:none;padding:4px 0}
footer a:hover{color:#fff;text-decoration:underline}
footer h4{font:700 15px var(--font-label);color:#fff;margin:0 0 10px}
footer .fine{font-size:14px;color:#B3C0A9;border-top:1px solid rgba(255,255,255,.2);padding-top:20px;margin-top:34px}
@media (min-width:800px){footer .cols{grid-template-columns:1.4fr 1fr 1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Update 11 okt: rustiger en beter leesbaar. Alle tekst in Familjen Grotesk, minimaal 16px. */
.tag{padding:34px 26px 26px}
.tag .kicker{font:700 15px var(--font-label);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.tag h3{font:600 24px/1.2 var(--font-body);letter-spacing:-.01em}
.tag .price{font:700 clamp(48px,7vw,64px)/1 var(--font-body);letter-spacing:-.03em;margin:14px 0 2px}
.tag .price small{font:500 20px var(--font-body);letter-spacing:0;color:var(--soil-700)}
.tag .where{font:500 19px/1.4 var(--font-body);margin:6px 0 0}
.tag .sub{font:400 17px/1.45 var(--font-body);color:var(--soil-700);margin:12px 0 0}
.tag .btn{margin-top:18px}
.two-labels{display:grid;gap:34px;margin:30px 0 16px}
@media (min-width:800px){.two-labels{grid-template-columns:1fr 1fr;gap:40px}}
.shelf{list-style:none;margin:18px 0 0;padding:0;border-top:2px solid var(--rule)}
.shelf a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.shelf b{display:block;font:600 21px/1.25 var(--font-body)}
.shelf em{display:block;font-style:normal;color:var(--soil-700);font-size:17px}
.shelf .c{color:var(--leaf-700);font-weight:600;white-space:nowrap}
.shelf a:hover b{color:var(--leaf-700)}
.checks{list-style:none;margin:18px 0 0;padding:0;border-top:2px solid var(--rule)}
.checks li{padding:18px 0 18px 46px;border-bottom:1px solid var(--rule);position:relative;font-size:19px}
.checks li::before{content:"";position:absolute;left:6px;top:24px;width:20px;height:11px;border-left:4px solid var(--leaf-700);border-bottom:4px solid var(--leaf-700);transform:rotate(-45deg)}
.checks li.x::before{border:0;transform:none;content:"×";font:700 30px/1 var(--font-body);color:var(--leaf-700);top:14px;left:8px;width:auto;height:auto}
.calc{display:grid;gap:28px;align-items:center}
.calc img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (min-width:900px){.calc{grid-template-columns:5fr 6fr;gap:56px}}
.sec{padding:clamp(44px,7vw,88px) 0}
.sec h2{margin-top:0}

.narrow2{width:min(100% - 32px,760px);margin-inline:auto}

/* MENU-SITE: korte kop met 3 punten, ook op mobiel zichtbaar */
header.site .bar,.top .bar{flex-wrap:wrap;row-gap:0}
header.site nav.d,.top nav.d{gap:22px;font-size:17px}
.top nav.d a{color:#fff}
@media (max-width:640px){
  header.site .bar,.top .bar{padding:12px 0 6px}
  header.site nav.d,.top nav.d{width:100%;gap:18px;font-size:16px;padding-bottom:6px}
}

/* uitgelichte keuze in artikelen */
.pick{display:grid;gap:18px;background:var(--label);border-top:4px solid var(--leaf-700);padding:22px;margin:28px 0;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.pick.has-img{grid-template-columns:auto 1fr;align-items:center}
.pick .kicker{display:block;font:700 15px var(--font-label);letter-spacing:.06em;text-transform:uppercase;color:var(--leaf-700)}
.pick h3{margin:6px 0 8px}
.pick p{margin:0 0 8px}
.pick-img{width:120px;height:120px;object-fit:contain;background:#fff}
.pick-prijs{font-weight:700;font-size:19px}
.pick-prijs:empty{display:none}
.jump{display:inline-block;margin-top:14px}
@media (max-width:520px){.pick.has-img{grid-template-columns:1fr}.pick-img{width:100px;height:100px}}

/* SchoonLeven-opzet: tegels op de voorpagina en productkaarten in plaats van tabellen */
.tiles{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.tile{display:flex;flex-direction:column;height:100%;text-decoration:none;background:var(--label);border-top:4px solid var(--leaf-700);box-shadow:0 2px 0 rgba(0,0,0,.1)}
.tile:hover{box-shadow:0 4px 0 rgba(0,0,0,.14)}
.tile:hover b{color:var(--leaf-700)}
.tile-img{display:flex;align-items:center;justify-content:center;height:170px;background:#fff;border-bottom:1px solid var(--stone-200)}
.tile-img img{max-width:80%;max-height:150px;object-fit:contain}
.tile:not(.has-foto) .tile-img{background:linear-gradient(135deg,var(--stone-200),#E3EED6)}
.tile-txt{padding:14px 16px 18px}
.tile-txt b{display:block;font:600 20px/1.25 var(--font-body)}
.tile-txt em{display:block;font-style:normal;color:var(--soil-700);font-size:16px;margin-top:4px}
table.t.cards,table.t.cards tbody{display:block;width:100%}
table.t.cards thead{display:none}
table.t.cards tbody{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
table.t.cards tr{display:flex;flex-direction:column;background:var(--label);border-top:4px solid var(--leaf-700);padding:16px;box-shadow:0 2px 0 rgba(0,0,0,.1)}
table.t.cards td{display:block;border:0;padding:0;width:auto}
table.t.cards td::before{display:none}
table.t.cards td.prod{order:1}
table.t.cards td.num{order:2;margin-top:12px;font-size:30px}
table.t.cards td.shopcell{order:3;margin-top:12px}
table.t.cards td:not(.prod):not(.num):not(.shopcell){order:2;margin-top:8px;font-size:16px}
table.t.cards .thumb{float:none;display:block;width:100%;height:170px;object-fit:contain;background:#fff;margin:0 0 12px}
table.t.cards .prod:not(:has(.thumb))::before{content:"";display:block;height:170px;margin-bottom:12px;background:linear-gradient(135deg,var(--stone-200),#E3EED6)}
table.t.cards .prod b{font-size:18px}
table.t.cards .shopcell .btn{width:100%;justify-content:center}
@media (max-width:560px){.tiles{grid-template-columns:1fr 1fr;gap:12px}.tile-img{height:120px}.tile-img img{max-height:105px}.tile-txt{padding:10px 12px 14px}.tile-txt b{font-size:17px}}
/* productfoto's van bol: wit laten wegvallen in de kaartkleur */
table.t.cards .thumb,.thumb,.pick-img,.tile-img img{background:transparent;mix-blend-mode:multiply}
.tile-img{background:var(--label)}
.pagehead figure:has(img.packshot){background:var(--label)}
.pagehead figure img.packshot{object-fit:contain;padding:24px;mix-blend-mode:multiply}

/* overzicht "Wij zochten het uit" */
.acards{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.acard{display:flex;flex-direction:column;height:100%;text-decoration:none;background:var(--label);box-shadow:0 2px 0 rgba(0,0,0,.1)}
.acard img{width:100%;aspect-ratio:3/2;object-fit:cover}
.acard-txt{padding:14px 16px 18px}
.acard-cat{display:block;font:700 14px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--leaf-700);margin-bottom:6px}
.acard b{display:block;font:600 20px/1.25 var(--font-body)}
.acard em{display:block;font-style:normal;color:var(--soil-700);font-size:16px;margin-top:6px}
.acard:hover b{color:var(--leaf-700)}
header.site nav.d,.top nav.d{flex-wrap:wrap;row-gap:2px}
header.site nav.d a,.top nav.d a{white-space:nowrap}
/* productkaarten uitlijnen: foto, titel, prijs en knop op dezelfde hoogte per rij */
table.t.cards .prod > span:first-of-type{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@supports (grid-template-rows:subgrid){
  table.t.cards tbody{column-gap:18px;row-gap:0}
  table.t.cards tr{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:12px;margin-bottom:18px}
  table.t.cards td.prod{grid-row:1}
  table.t.cards td.num{grid-row:2;margin-top:0;align-self:end}
  table.t.cards td.shopcell{grid-row:3;margin-top:0;align-self:start}
}
/* vanaf tablet: elk onderdeel van een kaart (foto, label, merk, titel, score, kenmerk, toelichting, prijs, knoppen)
   op een eigen rij, gedeeld met de kaarten ernaast. Zo beginnen titels en teksten overal op dezelfde hoogte. */
@supports (grid-template-rows:subgrid) and selector(:has(+ b)){
  @media (min-width:701px){
    table.t.cards tr{grid-row:span 10;row-gap:0}
    table.t.cards td.prod{display:contents}
    table.t.cards .prod::before,table.t.cards .prod > .thumb{grid-row:1;margin:0 0 12px}
    table.t.cards .prod > .keuze-label{grid-row:2;align-self:start}
    table.t.cards .prod > span:has(+ b){grid-row:3;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    table.t.cards .prod > b{grid-row:4;align-self:start}
    table.t.cards .prod > .rating{grid-row:5;align-self:start}
    table.t.cards .prod > .warn{grid-row:6;align-self:start;justify-self:start;margin-top:8px}
    table.t.cards .prod > span[style]{grid-row:7;align-self:start}
    table.t.cards td:not(.prod):not(.num):not(.shopcell){grid-row:8;align-self:start}
    table.t.cards td.num{grid-row:9;align-self:end;margin-top:14px}
    table.t.cards td.shopcell{grid-row:10;align-self:start;margin-top:12px}
  }
}
table.t.cards .prod:not(:has(.thumb))::before{margin-top:0}

/* kort antwoord, naar het voorbeeld van SchoonLeven: rustig vlak, klein label, gewone tekst */
.answer{background:#EDF3E4;border-left:4px solid var(--leaf-700);padding:20px 24px;margin:8px 0 32px}
.answer p{margin:0}
.answer-label{font:700 14px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--leaf-700);margin-bottom:8px!important}
.answer-main{font:600 21px/1.4 var(--font-body);color:var(--soil-900)}
.answer-sub{margin-top:10px!important;color:var(--soil-700)}
.answer-jump{margin-top:14px!important;font-weight:600}

/* menu: onderwerpen op de computer, menuknop met scherm op telefoon en tablet */
header.site nav.d,.top nav.d{display:none}
header.site .menu-btn,.top .menu-btn{display:inline-block}
@media (min-width:1100px){
  header.site nav.d,.top nav.d{display:flex;flex-wrap:nowrap;gap:20px;font-size:16px;width:auto;padding:0}
  header.site .menu-btn,.top .menu-btn{display:none}
}
.sheet{padding:18px 20px 32px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.sheet .logo{font-size:28px;border:0;padding:0}
.sheet .sheet-close{float:none;font:600 17px var(--font-body);border-bottom:2px solid #fff;padding:4px 0}
.sheet-topics{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sheet-topics a{display:flex;align-items:center;gap:14px;font:600 22px/1.2 var(--font-body);padding:8px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.sheet-topics img{width:64px;height:64px;object-fit:cover;flex:none}
.sheet-more{margin:22px 0 0;display:grid;gap:4px}
.sheet-more a{font:500 18px var(--font-body);border:0;padding:8px 0;color:var(--sprout-300)}

/* productoverzicht op onderwerppagina's */
.hubgroep{margin:0 0 18px}
.hubgroep ~ .hubgroep{margin-top:48px}
.hubgroep-link{margin:4px 0 0;font-weight:600}

/* Fase 1 UI-audit (17 okt 2026) */
/* 1. telefoon: foto bovenaan als smalle band, zodat kort antwoord en Onze keuze sneller in beeld zijn */
@media (max-width:700px){
  .pagehead{padding-bottom:28px}
  .pagehead .grid{gap:20px}
  .pagehead figure img{aspect-ratio:16/6}
}
/* 2. Onze keuze: grotere foto en een tweede link naar de vergelijking */
.pick-img{width:150px;height:150px}
.pick .btn{margin-top:4px}
.pick-alt{display:inline-block;margin:12px 0 0 0;font-weight:600}
@media (max-width:520px){
  .pick.has-img{grid-template-columns:1fr}
  .pick-img{width:100%;height:170px}
  .pick .btn{width:100%;justify-content:center}
}
/* 3. productkaarten: geen grote lege vakken, en compact op de telefoon */
table.t.cards .prod:not(:has(.thumb))::before{background:var(--label);border:1px dashed var(--stone-200)}
@media (max-width:560px){
  table.t.cards tbody{grid-template-columns:1fr;gap:12px}
  table.t.cards tr{padding:14px;margin-bottom:12px}
  table.t.cards .thumb{float:left;width:76px;height:76px;margin:0 12px 6px 0}
  table.t.cards .prod:not(:has(.thumb))::before{display:none}
  table.t.cards .prod > span:first-of-type{white-space:normal}
  table.t.cards td.num{font-size:26px;clear:both}
  table.t.cards .prod .warn{font-size:14px}
}
/* 4. onderwerppagina: productblok verbergen zolang er nog geen prijzen zijn */
section.hubprod:not(:has(table)){display:none}
/* homepage: tegels in rijen van 4 op de computer */
@media (min-width:1000px){.tiles{grid-template-columns:repeat(4,1fr)}}
/* reviewscore van bol */
.rating{display:block;margin-top:4px;font:600 15px/1.3 var(--font-body);color:#8A5A00}
.pick .rating{margin:-2px 0 8px;font-size:16px}

/* i-knop met uitleg bij "Onze keuze" */
.pick{position:relative}
.info{position:relative;display:inline-grid;place-items:center;width:20px;height:20px;margin-left:6px;padding:0;border:1.5px solid currentColor;border-radius:50%;background:none;color:inherit;font:italic 700 13px/1 Georgia,serif;text-transform:none;letter-spacing:0;vertical-align:2px;cursor:pointer}
.info::after{content:"";position:absolute;inset:-12px}
.info[aria-expanded="true"]{background:var(--leaf-700);border-color:var(--leaf-700);color:#fff}
.info:focus-visible{outline:2px solid var(--leaf-700);outline-offset:2px}
.tip{position:absolute;z-index:20;left:12px;right:12px;margin-top:8px;max-width:420px;background:#fff;color:var(--soil-900);border:1px solid rgba(0,0,0,.12);border-top:3px solid var(--leaf-700);box-shadow:0 8px 24px rgba(0,0,0,.16);padding:14px 16px;font:400 15px/1.5 var(--font-body)}
.tip b{display:block;margin-bottom:4px}
.tip[hidden]{display:none}
.nw{white-space:nowrap}
/* "Onze keuze" in de vergelijkingstabel */
table.t .prod .keuze-label,.keuze-label{display:inline-block;width:fit-content;align-self:flex-start;justify-self:start;margin:0 0 6px;padding:3px 9px;background:var(--leaf-700);color:#fff;font:700 12px/1.4 var(--font-label);letter-spacing:.06em;text-transform:uppercase}
/* Coolblue naast bol.com */
.btn.alt{background:#fff;color:var(--leaf-700);box-shadow:inset 0 0 0 2px var(--leaf-700)}
.btn.alt:hover{background:#EDF3E4}
.winkel-aanbod>div{margin:8px 0 0}
.koop .winkel-aanbod>div{margin:10px 0 0}
.pick-cb{margin:-2px 0 10px!important;font-weight:600}
.shopcell .winkel-aanbod:first-child>div:first-child{margin-top:0}
.shopcell .winkel-aanbod+.btn{margin-top:8px}
/* keuzekaart: maar één knop. Gaat de hoofdknop al naar de vergelijking, dan geen tweede link ernaast */
.pick [data-pick-knop][href^="#"] ~ .pick-alt{display:none}
/* stappenplan: genummerd, zonder vinkjes en lijnen */
ol.stappen{list-style:none;counter-reset:stap;margin:16px 0 0;padding:0}
ol.stappen li{counter-increment:stap;position:relative;padding:0 0 0 46px;margin:0 0 18px}
ol.stappen li::before{content:counter(stap);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--leaf-700);color:#fff;font:700 15px/30px var(--font-body);text-align:center}

/* ===== Artikelen en productpagina's: rustige opmaak naar het voorbeeld van SchoonLeven =====
   Lichte kop zonder donkere balk, één smalle kolom, foto met ronde hoeken (niet op mobiel),
   zachte vlakken zonder dikke lijnen, gewone opsommingen. Body krijgt class "artikel". */
.artikel .pagehead{background:transparent;color:var(--soil-900);padding-bottom:8px}
.artikel .pagehead .grid{display:flex;flex-direction:column-reverse;align-items:stretch;gap:28px;max-width:980px;margin-inline:auto;padding-top:20px}
.artikel .pagehead .grid > div{max-width:790px;width:100%;margin-inline:auto}
.artikel .pagehead figure{max-width:980px;width:100%}
.artikel .pagehead figure img{aspect-ratio:21/9;border-radius:16px}
.artikel .pagehead figure figcaption{display:none}
.artikel .crumbs{color:var(--soil-700);font-size:14px;margin-bottom:14px}
.artikel .crumbs a{color:var(--soil-700);border-bottom-color:transparent}
.artikel .pagehead h1{font-size:clamp(32px,5vw,54px);line-height:1.1;letter-spacing:-.03em;margin:0 0 12px;color:var(--soil-900)}
.artikel .pagehead .lead{color:var(--soil-700);font-size:clamp(18px,1.9vw,20px)}
.artikel .byline{margin-top:12px;color:var(--soil-700);font-size:14px;font-weight:400;gap:0}
.artikel .byline a{color:inherit}
.artikel .narrow2{width:min(100% - 32px,790px)}
.artikel .sec{padding-top:24px}
.artikel h2{font-size:clamp(28px,3.4vw,36px);line-height:1.15;margin-bottom:14px}
.artikel .answer{background:#EEF2E8;border:0;border-radius:16px;padding:22px 26px}
.artikel .answer-label{font-size:12px;font-weight:800}
.artikel .answer-main{font-size:19px}
.artikel .checks{border-top:0;margin-top:12px;padding-left:22px;list-style:disc}
.artikel .checks li{padding:0;border:0;margin:0 0 10px;font-size:18px}
.artikel .checks li::before{display:none}
.artikel .checks li::marker{color:var(--leaf-700)}
.artikel .note{border-left:0;padding:0;font-size:15px}
.artikel .pick{background:#FFFBF3;border:1px solid #EADFC8;border-top:1px solid #EADFC8;border-radius:16px;box-shadow:none;padding:24px 26px}
.artikel .pick .pick-img{border-radius:12px;background:#fff;border:1px solid #EADFC8}
.artikel .pick .btn,.artikel .koop .btn{border-radius:999px}
.artikel .pick-alt{font-size:15px}
.artikel table.t.cards tr{border-top:1px solid #E3E0D6;border:1px solid #E3E0D6;border-radius:12px;box-shadow:none}
.artikel table.t.cards .shopcell .btn{border-radius:999px}
.artikel .stake{padding-bottom:0}
.artikel .stake::after,.artikel .tag::before{display:none}
.artikel .tag{border-radius:16px;box-shadow:none;border:1px solid #EADFC8;background:#FFFBF3}
@media (max-width:700px){
  .artikel .pagehead figure{display:none}
  .artikel .pagehead .grid{padding-top:12px}
}
/* productfoto bovenaan een artikel: hele product tonen op een lichte achtergrond */
.artikel .pagehead figure:has(img.packshot){background:#fff;border-radius:16px}
.artikel .pagehead figure img.packshot{object-fit:contain;padding:18px;mix-blend-mode:normal;background:#fff}
@media (max-width:700px){.artikel .pagehead figure:has(img.packshot){display:none}}