/* Glasontwerp in de stijl van tralert.com (20-10-2026). Komt na stijl.css (de schermen van het voorbeeld) en sis.css.
   Drie standen, net als op tralert.com:
   - donker (start, uitleg, aanmelden, inloggen, TRALERT-beheer): zwart met de rode lijntekening, donker glas;
   - licht (partnerbeheer en stappenplan): het lichte doek van Mijn account, kaarten in licht glas;
   - winkel: licht glas met de kleur van de partner als accent, kop in glas, megamenu in donker glas.
   Vaste regels uit tralert.com: blur op ::before (nooit op een balk of ouder, anders vervaagt een menu erin alleen de
   balk), geen blur op herhaalde tegels (scrollen), hover alleen bij een muis, en beweging uit bij reduced motion. */

:root{
  --trl-rood:#EC4642; --trl-rood-h:#ff6156; --trl-rood-tekst:#d63a36; --trl-groen:#8EB171; --trl-groen-d:#7EA461;
  --inkt:#1f1d1d; --tekst:#3b3636; --grijs:#6e6868; --licht:#767070;
  --rand:rgba(20,24,31,.09); --rand-h:rgba(236,70,66,.45); --lijn:rgba(20,24,31,.075); --tint:rgba(20,24,31,.045); --veld:rgba(20,24,31,.16);
  --wash:linear-gradient(158deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.86) 44%,rgba(247,248,250,.78) 100%);
  --schaduw:inset 1px 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(20,24,31,.035),0 14px 30px -20px rgba(20,24,31,.38);
  --schaduw-h:inset 1px 1px 0 rgba(255,255,255,.95),0 2px 5px rgba(20,24,31,.05),0 22px 40px -22px rgba(20,24,31,.42),0 12px 30px -24px rgba(236,70,66,.55);
  --schaduw-klein:inset 1px 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(20,24,31,.05),0 6px 14px -10px rgba(20,24,31,.35);
  --dk-kaart:rgba(255,255,255,.042); --dk-wash:linear-gradient(150deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.042) 36%,rgba(255,255,255,.018) 64%,rgba(236,70,66,.05) 100%);
  --dk-rand:rgba(255,255,255,.11); --dk-schaduw:inset 1px 1px 0 rgba(255,255,255,.12),0 18px 34px -20px rgba(0,0,0,.95);
  --veer:cubic-bezier(.2,.8,.2,1);
  --r-btn:8px; --r-card:10px;
  --f-display:"Titillium Web",Arial,Helvetica,sans-serif; --f-body:"Titillium Web",Arial,Helvetica,sans-serif;
  --trl:#EC4642;
}
body{font-family:var(--f-body);font-size:15.5px;line-height:1.55}
.knop,.link,.chip,.tab,.navitem,.status,.kopknop{font-family:inherit}

/* ── knoppen (overal) ─────────────────────────────────────────────────────────────────────────── */
.knop{min-height:42px;border-radius:8px;font-weight:600;font-size:14px;letter-spacing:.02em;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,color .25s ease,transform .35s var(--veer)}
.knop.klein{min-height:34px;padding:6px 12px;font-size:13px}
.knop.trlrood{background:linear-gradient(180deg,#ee4f4b,#e8443f);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 6px -3px rgba(236,70,66,.35);color:#fff}
.knop.trlrood:is(:hover,:focus-visible){background:linear-gradient(180deg,#e2413d,#da3935);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 10px -5px rgba(236,70,66,.45)}
.knop.stil{background:#fff var(--wash);border-color:var(--rand);box-shadow:var(--schaduw-klein);color:var(--inkt)}
.knop.stil:is(:hover,:focus-visible){border-color:var(--rand-h);color:#cf3531;box-shadow:0 3px 8px -5px rgba(236,70,66,.35)}
.knop.donker{background:#3d3d3d;border-color:transparent;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.knop.donker:is(:hover,:focus-visible){background:var(--trl-groen);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 10px -6px rgba(126,164,97,.55)}
.knop[disabled]{opacity:.6;cursor:default}
:focus-visible{outline:2px solid var(--trl-rood);outline-offset:2px}

/* ── kop van de app (alle pagina's behalve de winkel): donker glas, logo van TRALERT ─────────────── */
header.demo{position:sticky;top:0;z-index:30;background:rgba(14,14,17,.95);border-bottom:0;box-shadow:inset 0 -1px 0 rgba(255,255,255,.1),0 18px 34px -26px rgba(0,0,0,.9)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  header.demo{background:rgba(14,14,17,.64)}
  header.demo::before{content:"";position:absolute;inset:0;z-index:-1;-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
  body[data-view=partner] header.demo,body[data-view=inrichten] header.demo{background:rgba(18,18,22,.86)}
}
header.demo .rij{padding-block:12px;gap:16px}
header.demo a.mark{display:inline-flex;align-items:center;line-height:0;position:relative;isolation:isolate}
header.demo a.mark img{height:32px;width:auto}
header.demo a.mark::before{content:"";position:absolute;z-index:-1;left:12%;top:50%;width:50%;aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(236,70,66,.48),rgba(236,70,66,.27) 40%,rgba(236,70,66,.08) 72%,rgba(236,70,66,0));opacity:0;transform:translate(-50%,-50%) scale(.55);transition:opacity .3s ease-out,transform .55s var(--veer)}
@media (hover:hover){header.demo a.mark:hover::before{opacity:1;transform:translate(-50%,-50%) scale(1)}}
header.demo .sub{font-family:var(--f-body);font-weight:600;font-size:12.5px;letter-spacing:.14em;color:rgba(255,255,255,.62);padding-left:14px;border-left:1px solid rgba(255,255,255,.14)}
header.demo .pil{border-color:rgba(236,70,66,.85);background:rgba(236,70,66,.12);color:#fff;box-shadow:0 0 14px -4px rgba(236,70,66,.6);font-size:10.5px;letter-spacing:.1em}
.kopLink{color:rgba(255,255,255,.84);font-size:14px;font-weight:600;padding:7px 10px;border-radius:8px;border:1px solid transparent}
.kopLink:hover{color:#fff;text-decoration:none;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14)}
.kopTaal{color:rgba(255,255,255,.62)}
.kopTaal select{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;border-radius:8px;padding:5px 8px}
header.demo .knop.trlrood.klein{border-radius:30px;padding:7px 16px;min-height:36px;text-transform:uppercase;letter-spacing:1.2px;font-size:12px;background:rgba(236,70,66,.12);border:1px solid rgba(236,70,66,.85);box-shadow:inset 1px 1px 0 rgba(255,255,255,.14),0 0 14px -2px rgba(236,70,66,.55)}
header.demo .knop.trlrood.klein:hover{background:rgba(236,70,66,.26);border-color:#EC4642;box-shadow:inset 1px 1px 0 rgba(255,255,255,.18),0 0 22px 0 rgba(236,70,66,.6)}
.kopUit{display:inline-flex;align-items:center;gap:7px;border-radius:8px;padding:7px 12px;border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.84)}
.kopUit:hover{border-color:rgba(236,70,66,.75);color:#fff;background:rgba(236,70,66,.14)}

/* ── donkere pagina's: zwart met de rode lijntekening van tralert.com ─────────────────────────── */
body:is([data-view=start],[data-view=uitleg],[data-view=aanmelden],[data-view=inloggen],[data-view=connect],[data-view=tralert],[data-view=laden]){
  background:#000 url("img/trl/Achtergrond-tralert-v2.svg") center top/cover no-repeat;color:rgba(255,255,255,.8);min-height:100vh}
body:is([data-view=start],[data-view=uitleg],[data-view=aanmelden],[data-view=inloggen],[data-view=connect]) #app .muted{color:rgba(255,255,255,.66)}
body:is([data-view=start],[data-view=uitleg],[data-view=aanmelden],[data-view=inloggen],[data-view=connect]) #app :is(.vak,.kpi){background-color:var(--dk-kaart);background-image:var(--dk-wash);border:1px solid var(--dk-rand);box-shadow:var(--dk-schaduw);color:rgba(255,255,255,.84);border-radius:12px}
body:is([data-view=start],[data-view=uitleg],[data-view=aanmelden],[data-view=inloggen],[data-view=connect]) #app :is(h1,h2,h3,.paginatitel,b){color:#fff}
body:is([data-view=start],[data-view=uitleg],[data-view=aanmelden],[data-view=inloggen],[data-view=connect]) #app a:not(.knop){color:#ff5f5a}
body:is([data-view=start],[data-view=uitleg],[data-view=aanmelden],[data-view=inloggen],[data-view=connect]) #app .regels-lijst svg{color:var(--trl-rood)}
body:is([data-view=start],[data-view=uitleg],[data-view=aanmelden],[data-view=inloggen],[data-view=connect]) #app .regels-lijst li{color:rgba(255,255,255,.84)}
body:is([data-view=start],[data-view=uitleg],[data-view=aanmelden],[data-view=inloggen],[data-view=connect]) #app .knop.stil{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.35);color:#fff;box-shadow:inset 1px 1px 0 rgba(255,255,255,.2),0 0 14px -4px rgba(255,255,255,.35)}
/* knoppen op donker: rood glas en wit glas, als pil (marketingknoppen van tralert.com) */
body:is([data-view=start],[data-view=uitleg],[data-view=aanmelden],[data-view=inloggen],[data-view=connect]) #app .knop{border-radius:30px;text-transform:uppercase;letter-spacing:1.6px;font-size:13px;font-weight:600;min-height:46px;padding:12px 24px}
body:is([data-view=start],[data-view=uitleg],[data-view=aanmelden],[data-view=inloggen],[data-view=connect]) #app .knop.trlrood{background:rgba(236,70,66,.12);border:1px solid rgba(236,70,66,.85);box-shadow:inset 1px 1px 0 rgba(255,255,255,.14),0 0 14px -2px rgba(236,70,66,.55);-webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%)}
body:is([data-view=start],[data-view=uitleg],[data-view=aanmelden],[data-view=inloggen],[data-view=connect]) #app .knop.trlrood:is(:hover,:focus-visible){background:rgba(236,70,66,.26);border-color:#EC4642;box-shadow:inset 1px 1px 0 rgba(255,255,255,.18),0 0 22px 0 rgba(236,70,66,.6)}
body:is([data-view=start],[data-view=uitleg],[data-view=aanmelden],[data-view=inloggen],[data-view=connect]) #app .knop.rand{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.35);color:#fff;box-shadow:inset 1px 1px 0 rgba(255,255,255,.2),0 0 14px -4px rgba(255,255,255,.35);-webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%)}
body:is([data-view=start],[data-view=uitleg],[data-view=aanmelden],[data-view=inloggen],[data-view=connect]) #app .knop.rand:is(:hover,:focus-visible){background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6)}

/* startpagina */
.startheld{background:transparent;padding-block:clamp(40px,7vw,96px) clamp(30px,5vw,64px)}
.startraster{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,56px);align-items:center}
.startheld .eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--f-body);color:#ff7b76;font-size:12.5px;font-weight:600;letter-spacing:.16em;opacity:1}
.startheld .eyebrow::before{content:"";flex:0 0 22px;height:2px;border-radius:2px;background:#EC4642}
.startheld h1{font-family:var(--f-body);font-weight:600;font-size:clamp(32px,4.2vw,54px);line-height:1;letter-spacing:.01em;text-transform:uppercase;max-width:16ch;color:#fff}
.startheld .lead{color:rgba(255,255,255,.8);font-size:16.5px;line-height:1.65;max-width:56ch}
.startheld .knoppen{gap:12px}
.testregel{color:rgba(255,255,255,.6)}
.startbeeld{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;border:1px solid rgba(255,255,255,.12);background:#111215;box-shadow:inset 1px 1px 0 rgba(255,255,255,.12),0 30px 60px -30px rgba(0,0,0,.95),0 0 60px -30px rgba(236,70,66,.55);background-clip:padding-box}
.startbeeld img{width:100%;height:100%;object-fit:cover;filter:brightness(.82) saturate(1.05)}
.startbeeld::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%);pointer-events:none}
.stapkaart{padding:22px 20px 20px}
.stapkaart .stapicoon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(236,70,66,.12);border:1px solid rgba(236,70,66,.4);color:#ff6b66;box-shadow:0 0 18px -6px rgba(236,70,66,.6)}
.stapkaart .stapnr{color:rgba(255,255,255,.14);font-family:var(--f-body);font-weight:600;font-size:34px;top:12px}
.stapkaart h2{font-size:18px;font-weight:600}
@media (hover:hover){body[data-view=start] .stapkaart{transition:transform .45s var(--veer),border-color .3s ease,box-shadow .3s ease}
  body[data-view=start] .stapkaart:hover{transform:translateY(-3px);border-color:rgba(236,70,66,.45);box-shadow:inset 1px 1px 0 rgba(255,255,255,.16),0 22px 38px -20px rgba(0,0,0,.95),0 12px 34px -22px rgba(236,70,66,.55)}}
.paginatitel,.ptitel{font-family:var(--f-body);font-weight:600;letter-spacing:.005em}
body:is([data-view=uitleg]) .paginatitel{text-transform:uppercase;font-size:clamp(28px,3.4vw,40px)}
.uitlegstappen li span{color:rgba(255,255,255,.7)}
.sblok{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.sblok small,.spijl{color:rgba(255,255,255,.55)}
.sblok b svg{color:#ff6b66}

/* aanvragen, inloggen, inloggen via tralert.com: een glaskaart zoals de inlogkaart van tralert.com */
.authvak{padding:30px 30px 26px;gap:16px}
.authvak .okicoon{width:56px;height:56px;background:rgba(236,70,66,.12);color:#ff6b66;box-shadow:inset 0 0 0 1px rgba(236,70,66,.4),0 0 24px -8px rgba(236,70,66,.6)}
.authvak .paginatitel{font-size:28px;text-transform:uppercase}
.authvak .uitlegstappen{counter-reset:s;list-style:none;padding:0;gap:10px}
.authvak .uitlegstappen li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}
.authvak .uitlegstappen li::before{content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(236,70,66,.14);color:#ff7b76;font-weight:600;font-size:13px;box-shadow:inset 0 0 0 1px rgba(236,70,66,.4)}
.authvak .uitlegstappen li span{color:rgba(255,255,255,.86)}
.okicoon.draait svg{animation:draai 1.4s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}
.melding{border-radius:10px}

/* ── licht beheer (partner en stappenplan): het doek van Mijn account op tralert.com ───────────── */
body:is([data-view=partner],[data-view=inrichten]){background-color:#F4F5F8;background-image:radial-gradient(ellipse 70% 100% at 8% 0%,rgba(236,70,66,.07),rgba(236,70,66,0) 62%),radial-gradient(ellipse 60% 90% at 92% 12%,rgba(58,94,158,.06),rgba(58,94,158,0) 64%);background-repeat:no-repeat;background-size:100% 1500px;color:var(--tekst)}
.beheer{padding-block:26px 56px;gap:26px}
.beheer .zijbalk{top:84px;padding:10px 8px;border:1px solid var(--rand);border-radius:10px;background:#fff var(--wash);box-shadow:var(--schaduw)}
.beheer .zijbalk .wie{padding:8px 10px 14px;border-bottom-color:var(--lijn)}
.beheer .zijbalk .wie .logo{flex-wrap:wrap;row-gap:0;max-width:100%}
.beheer .zijbalk .wie .logo b{font-size:22px}
.beheer .zijbalk .wie .logo span{font-size:13px;letter-spacing:.08em}
.beheer .zijbalk .wie small{font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--grijs)}
.beheer .zijbalk .tab{border-radius:6px;padding:10px 12px;color:var(--grijs);font-weight:500;font-size:15px;box-shadow:inset 2px 0 0 transparent;transition:background-color .2s ease,box-shadow .2s ease,color .2s ease}
.beheer .zijbalk .tab svg{color:var(--licht);transition:color .2s ease}
.beheer .zijbalk .tab[aria-current="true"]{background:rgba(236,70,66,.07);box-shadow:inset 2px 0 0 var(--trl-rood-tekst);color:var(--inkt);font-weight:600}
.beheer .zijbalk .tab[aria-current="true"] svg{color:var(--trl-rood-tekst)}
@media (hover:hover){.beheer .zijbalk .tab:not([aria-current="true"]):hover{background:rgba(20,24,31,.04);color:var(--inkt)}}
.beheer .zijbalk .btaal{border-top-color:var(--lijn);color:var(--grijs)}
.beheer :is(.vak,.kpi,.tabelvak,.samenvatting){border:1px solid var(--rand);border-radius:10px;background-color:#fff;background-image:var(--wash);box-shadow:var(--schaduw)}
.beheer .vak{padding:20px 22px}
.beheer .vak h2,.beheer h2{font-family:var(--f-body);font-weight:600;color:var(--inkt);font-size:19px}
.beheer .ptitel{color:var(--inkt);font-size:clamp(26px,2.3vw,32px);font-weight:600}
.beheer .kpi{padding:16px 18px}
.beheer .kpi small{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--grijs)}
.beheer .kpi b{font-family:var(--f-body);font-weight:600;color:var(--inkt);font-size:28px}
.beheer .lijst th{background:transparent;font-size:12px;letter-spacing:.07em;color:var(--grijs);font-weight:600;border-bottom-color:var(--lijn)}
.beheer .lijst td{border-bottom-color:var(--lijn)}
.beheer .lijst tr.klik:hover td{background:rgba(236,70,66,.035)}
.beheer .knop.merk{background:linear-gradient(180deg,#ee4f4b,#e8443f);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 6px -3px rgba(236,70,66,.35)}
.beheer .knop.merk:is(:hover,:focus-visible){background:linear-gradient(180deg,#e2413d,#da3935);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 10px -5px rgba(236,70,66,.45)}
.beheer .link,.beheer .inhoud a:not(.knop):not(.tab){color:var(--trl-rood-tekst)}
.beheer .tabelvak table.lijst td:not(:has(.prodcel)){white-space:nowrap}
.beheer .link:hover{color:#cf3531;text-decoration:underline;text-underline-offset:3px}
.beheer .actiebalk{background:#fff var(--wash);border:1px solid var(--rand);box-shadow:var(--schaduw);border-left:3px solid var(--trl-rood)}
.beheer .actiebalk b{color:var(--inkt)}
.beheer .merkrij{border-top-color:var(--lijn)}
.beheer .schakel input:checked{background:var(--trl-rood)}
.beheer .tijdlijn div{border-top-color:rgba(20,24,31,.12)}
.beheer .tijdlijn div.ja{border-top-color:var(--trl-rood)}
.beheer :is(input[type=text],input[type=email],input[type=number],input[type=url],select){min-height:42px;border:1px solid var(--veld);border-radius:8px;background:#fff;color:var(--inkt);box-shadow:none}
.beheer :is(input,select):focus{border-color:#3E3E3E;outline:0;box-shadow:0 0 0 3px rgba(62,62,62,.08)}
.beheer .optie[aria-pressed="true"]{border-color:var(--trl-rood);box-shadow:inset 0 0 0 1px var(--trl-rood)}
.beheer .groeplijst label,.beheer .optie{border-color:var(--rand);background:#fff;border-radius:8px}
.melding.info{background:rgba(58,94,158,.07);border-color:rgba(58,94,158,.2);color:#2b4d82}
.melding.ok{background:rgba(142,177,113,.16);border-color:rgba(126,164,113,.45);color:#3f6a2e}
.melding.fout{background:rgba(236,70,66,.08);border-color:rgba(236,70,66,.3);color:#a3221d}
.status{font-weight:600;font-size:12px;padding:4px 10px}
.status.weg{background:rgba(142,177,113,.22);color:#467531}
.status.door{background:rgba(230,184,0,.18);color:#8a5a00}
.status.nieuw{background:rgba(20,24,31,.06);color:var(--grijs)}
.inrichten .stapbol.klaar{background:rgba(142,177,113,.22);color:#467531}
.inrichten .tab[aria-current="true"] .stapbol{background:var(--trl-rood);color:#fff;box-shadow:0 0 12px -2px rgba(236,70,66,.6)}
.stapteller{font-family:var(--f-body);color:var(--trl-rood-tekst);letter-spacing:.16em}
.stapknoppen{border-top-color:var(--lijn);padding-top:14px}
.slugveld{border-color:var(--veld);border-radius:8px}
.slugveld .mono{background:var(--tint);border-right-color:var(--veld)}
.dnstabel td.breek{word-break:break-all}
.domeinnaam{font-size:18px}
.prijslabel{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:rgba(236,70,66,.08);color:var(--trl-rood-tekst);font-weight:600;font-size:13px}

/* ── TRALERT-beheer: donker glas op de lijntekening ─────────────────────────────────────────── */
.trl-beheer{background:transparent;color:rgba(255,255,255,.84)}
.trl-beheer h1{font-family:var(--f-body);font-weight:600;text-transform:uppercase;letter-spacing:.01em}
.trl-beheer .krumel{color:rgba(255,255,255,.55)}
.trl-beheer .tabs{border-bottom-color:rgba(255,255,255,.1);gap:6px}
.trl-beheer .tabs button{border-radius:8px 8px 0 0;font-weight:600}
.trl-beheer .tabs button:hover{background:rgba(255,255,255,.06);color:#fff}
.trl-beheer .tabs button[aria-selected="true"]{border-bottom-color:var(--trl-rood);background:rgba(236,70,66,.08)}
.trl-beheer :is(.kpi,.vak,.tabelvak){background-color:var(--dk-kaart);background-image:var(--dk-wash);border:1px solid var(--dk-rand);box-shadow:var(--dk-schaduw);border-radius:12px}
.trl-beheer .kpi b{font-family:var(--f-body);font-weight:600}
.trl-beheer .vak h2{font-family:var(--f-body);font-weight:600}
.trl-beheer .lijst th{background:rgba(255,255,255,.03);font-weight:600;letter-spacing:.07em}
.trl-beheer .knop.donker{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.3);color:#fff;box-shadow:inset 1px 1px 0 rgba(255,255,255,.16)}
.trl-beheer .knop.donker:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55)}
.trl-beheer .aanvraag{padding:16px 0;border-top:1px solid rgba(255,255,255,.08)}
.trl-beheer .vak > .aanvraag:first-of-type{border-top:0}
.trl-beheer .melding.info{background:rgba(110,160,230,.12);border-color:rgba(110,160,230,.3);color:#b9d3f7}
.trl-beheer :is(input[type=number],input[type=text]){border-radius:8px;min-height:40px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.trl-beheer .status.weg{background:rgba(142,177,113,.2);color:#b6dc97}
.trl-beheer .status.door{background:rgba(230,184,0,.16);color:#f3cf6b}
.trl-beheer .status.nieuw{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7)}
.trl-beheer .schakel input:checked{background:var(--trl-rood)}
.trl-beheer .regels-lijst svg,.trl-beheer .check svg{color:var(--trl-rood)}
.trl-beheer .merktag{border-color:rgba(255,255,255,.14);border-radius:999px;padding:1px 8px}

/* ── toast ──────────────────────────────────────────────────────────────────────────────────── */
#toast{z-index:80;border-radius:999px;padding:11px 18px;background:rgba(18,18,22,.9);border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 36px -14px rgba(0,0,0,.8);font-family:var(--f-body)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){#toast{background:rgba(18,18,22,.78);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%)}}

/* ══ de winkel ══════════════════════════════════════════════════════════════════════════════════
   Licht glas zoals de winkelpagina's van tralert.com, met de kleur van de partner (--brand) waar tralert.com rood
   gebruikt. Letter en hoeken volgen de keuze van de partner (shopStijl zet ze op .winkel). */
body[data-view=winkel]{background:var(--paper)}
.winkel{--brand-glans:color-mix(in srgb,var(--brand) 55%,transparent);--brand-zacht:color-mix(in srgb,var(--brand) 12%,transparent);
  background-color:var(--paper);background-image:radial-gradient(ellipse 70% 900px at 6% 0%,color-mix(in srgb,var(--brand) 7%,transparent),transparent 62%),radial-gradient(ellipse 60% 800px at 94% 8%,rgba(58,94,158,.05),transparent 64%);background-repeat:no-repeat;color:var(--tekst)}
.winkel :is(h1,h2,h3){color:var(--inkt)}
.testbalk{background:rgba(255,244,214,.92);border-bottom:1px solid rgba(214,160,0,.35)}

/* kop: drie balken in licht glas, op de computer meelopend */
.glaskop{position:relative;z-index:22;background:transparent;border:0}
@media (min-width:1025px){.glaskop{position:sticky;top:0}}
.glaskop > div,.glaskop > nav{position:relative}
.glaskop .kop-top{background:rgba(214,215,219,.9);border-bottom:1px solid rgba(255,255,255,.35)}
.glaskop .kop-hoofd{background:rgba(247,247,248,.95);box-shadow:inset 0 -1px 0 rgba(20,24,31,.06)}
.glaskop .shop-nav{background:rgba(222,223,227,.94);border-bottom:0;box-shadow:0 18px 34px -28px rgba(20,24,31,.55)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glaskop .kop-top{background:rgba(214,215,219,.66)}
  .glaskop .kop-hoofd{background:rgba(247,247,248,.74)}
  .glaskop .shop-nav{background:rgba(222,223,227,.7)}
  .glaskop > :is(div,nav)::before{content:"";position:absolute;inset:0;z-index:-1;-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
}
.glaskop .kop-top .rij{display:flex;align-items:center;gap:12px;min-height:32px;padding-block:2px}
.glaskop .partnerlabel{font-size:13px;font-weight:600;color:#2c2a2a}
.glaskop .partnerlabel svg{color:var(--trl-rood)}
.glaskop .taalkeuze{gap:5px;border:0;background:rgba(255,255,255,.42);border-radius:999px;padding:0 4px 0 9px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);color:#3b3636}
.winkel .glaskop .taalkeuze select{width:auto;padding:3px 2px;font-size:12.5px;background:transparent;border:0;min-height:0;box-shadow:none}
.glaskop .kop-hoofd .rij{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(16px,3vw,36px);padding-block:18px}
.glaskop .logo{position:relative;isolation:isolate;min-width:0;max-width:100%;justify-self:start}
.glaskop .zoek{position:relative;max-width:none;justify-self:stretch;height:48px;padding:0 6px 0 20px;border:2px solid rgba(102,102,102,.42);border-radius:35px;background:rgba(255,255,255,.72);color:#555;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.glaskop .zoek:focus-within{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px var(--brand-zacht)}
.glaskop .zoek input{font-size:15px;padding:0}
.glaskop .zoek input::placeholder{color:#7a7a7a}
.glaskop .zoekicoon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#333;flex:none}
.kop-acties{gap:10px}
.kopknop{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 16px 0 5px;border:0;border-radius:42px;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);cursor:pointer;color:#111;font-weight:600;font-size:14px;transition:box-shadow .2s ease,background .2s ease}
.kopknop .rondje{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);color:#222;transition:color .2s ease}
.kopknop .tel{position:absolute;top:-4px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--brand);color:var(--brand-ink);font-style:normal;font-size:11px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.kopknop .tel[hidden]{display:none}
.kopknop-tekst{white-space:nowrap}
@media (hover:hover){.kopknop:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--brand-glans),0 6px 16px -10px var(--brand-glans)}.kopknop:hover .rondje{color:var(--brand)}}
/* menubalk */
.glaskop .shop-nav .rij{display:flex;align-items:center;gap:0;overflow:visible;min-height:50px}
.navitem{position:relative;isolation:isolate;border:0;border-bottom:0!important;background:none;padding:14px 13px;cursor:pointer;font-weight:600;font-size:14px;color:#2a2828;white-space:nowrap}
.navitem + .navitem::after,.nav-mega + .navitem::after{content:"";position:absolute;left:0;top:50%;height:16px;margin-top:-8px;border-left:1px solid rgba(0,0,0,.14)}
.navitem::before{content:"";position:absolute;inset:7px 2px;z-index:-1;border:1px solid rgba(0,0,0,.07);border-radius:8px;background:rgba(255,255,255,.62);opacity:0}
.navitem:is(:hover,:focus-visible)::before,.nav-mega:is(:hover,:focus-within) > .navitem::before{opacity:1}
.navitem[aria-current="true"]{color:var(--brand)}
.navitem.metpijl{padding-right:26px}
.navitem.metpijl::after{content:"";position:absolute;right:11px;top:50%;width:6px;height:6px;margin-top:-5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);border-left:0;height:6px}
.groeplink:nth-of-type(n+7){display:none}
@media (min-width:1360px){.groeplink:nth-of-type(n+7){display:inline-block}.groeplink:nth-of-type(n+9){display:none}}
/* megamenu: donker glas op elke pagina (keuze Lars op tralert.com) */
.nav-mega{position:static}
.megamenu{position:absolute;left:50%;top:100%;width:min(1200px,calc(100vw - 48px));transform:translateX(-50%);margin-top:-4px;padding:22px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(18,18,22,.97);box-shadow:0 30px 60px -28px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);color:#fff;opacity:0;visibility:hidden;transition:opacity 0s,visibility 0s;z-index:40}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.megamenu{background:rgba(18,18,22,.8);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}}
.nav-mega:is(:hover,:focus-within) .megamenu{opacity:1;visibility:visible;transition:opacity .16s ease-out,visibility .16s ease-out}
.nav-mega::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.mega-binnen{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.mega-binnen:not(:has(.mega-lijst)){grid-template-columns:minmax(0,1fr)}
.mega-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px}
.mega-lijst{display:grid;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.03);overflow:hidden}
.glaskop .mega-lijst button{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:46px;padding:5px 14px 5px 8px;border:0;border-top:1px solid rgba(255,255,255,.08);background:none;color:#fff;font-size:14px;font-weight:600;text-align:left;cursor:pointer}
.mega-lijst button:first-child{border-top:0}
.mega-lijst img{width:34px;height:34px;border-radius:6px;background:#fff;object-fit:contain;padding:2px}
.mega-lijst small{min-width:24px;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.75);font-size:11.5px;text-align:center}
.mega-lijst button:is(:hover,:focus-visible){background:rgba(255,255,255,.09)}
.glaskop .megamenu button{white-space:normal;border-bottom-width:1px;font-size:inherit}
.glaskop .megategel{padding:0;border-bottom-color:rgba(255,255,255,.12)}
.glaskop .mega-lijst button{border-bottom:0;font-size:14px;color:#fff}
.glaskop .mega-voet .link{padding:6px 0;border-bottom:0;font-size:14px;color:#fff}
.megategel{position:relative;display:grid;align-content:end;min-height:112px;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden;background:#141417;cursor:pointer;text-align:left;color:#fff;background-clip:padding-box;transition:border-color .2s ease,box-shadow .2s ease}
.megategel .beeld{position:absolute;inset:0}
.megategel .beeld img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--veer)}
.megategel::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(8,8,10,.88) 0%,rgba(8,8,10,.4) 52%,rgba(8,8,10,0) 100%)}
.megategel .naam{position:relative;z-index:2;display:grid;gap:1px;padding:12px 12px 10px}
.megategel .naam b{font-size:13.5px;font-weight:700;text-transform:uppercase;line-height:1.08;letter-spacing:.01em;color:#fff;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.megategel .naam small{font-size:12px;color:rgba(255,255,255,.72)}
@media (hover:hover){.megategel:hover{border-color:color-mix(in srgb,var(--brand) 75%,#fff 10%);box-shadow:0 0 0 1px var(--brand-glans),0 10px 28px -10px var(--brand-glans)}.megategel:hover .beeld img{transform:scale(1.05)}}
.mega-voet{display:flex;justify-content:flex-end;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.mega-voet .link{color:#fff}
.mega-voet .link:hover{color:color-mix(in srgb,var(--brand) 40%,#fff)}

/* held op de homepagina: foto met donkere verloop, kop in hoofdletters, pilknoppen in glas */
.winkel .held{background-color:#0d0d0f}
.winkel .held.metfoto::before{background:linear-gradient(90deg,rgba(8,8,10,.92) 0%,rgba(8,8,10,.78) 34%,color-mix(in srgb,var(--kop) 22%,rgba(8,8,10,.25)) 70%,rgba(8,8,10,.05) 100%)}
.winkel .held .eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--f-body);font-size:12.5px;letter-spacing:.16em;color:#fff;opacity:.85}
.winkel .held .eyebrow::before{content:"";flex:0 0 22px;height:2px;border-radius:2px;background:var(--brand);box-shadow:0 0 10px var(--brand-glans)}
.winkel .held h1{color:#fff;text-transform:uppercase;font-weight:600;letter-spacing:.01em;line-height:1.02;font-size:clamp(30px,4vw,52px)}
.winkel .held p.lead{color:rgba(255,255,255,.82)}
.winkel .held .knop{border-radius:30px;min-height:46px;padding:12px 24px;text-transform:uppercase;letter-spacing:1.6px;font-size:13px}
.winkel .held .knop.licht{background:color-mix(in srgb,var(--brand) 22%,transparent);border:1px solid color-mix(in srgb,var(--brand) 85%,#fff 10%);color:#fff;box-shadow:inset 1px 1px 0 rgba(255,255,255,.16),0 0 16px -2px var(--brand-glans);-webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%)}
.winkel .held .knop.licht:hover{background:color-mix(in srgb,var(--brand) 38%,transparent);box-shadow:inset 1px 1px 0 rgba(255,255,255,.2),0 0 24px 0 var(--brand-glans)}
.winkel .held .knop.rand{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.35);color:#fff;box-shadow:inset 1px 1px 0 rgba(255,255,255,.2),0 0 14px -4px rgba(255,255,255,.35);-webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%)}
.winkel .held .knop.rand:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6)}
/* voordelen als zwevende glaskaart over de onderrand van de held */
.winkel .usp{position:relative;z-index:3;background:transparent;border:0;margin-top:-34px}
.winkel .usp .rij{border:1px solid rgba(255,255,255,.7);border-radius:14px;background:rgba(255,255,255,.9);box-shadow:0 22px 44px -28px rgba(20,24,31,.55),inset 0 1px 0 rgba(255,255,255,.9);padding:16px 22px}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.winkel .usp .rij{background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)}}
.winkel .usp .item svg{color:var(--brand)}
.winkel .usp b{color:var(--inkt)}
.winkel .sectie h2,.winkel .ppsectie h2,.winkel .ppextra h2{font-family:var(--f-display);font-weight:600;color:var(--inkt)}
/* productgroepen als fototegels */
.winkel .tegel{border:1px solid var(--rand);border-radius:14px;background:#fff var(--wash);box-shadow:0 1px 2px rgba(20,24,31,.04),0 8px 16px -10px rgba(20,24,31,.28);transition:transform .45s var(--veer),border-color .3s ease,box-shadow .3s ease}
.winkel .tegel.sfeer{border-color:rgba(255,255,255,.12);background:#111215;background-clip:padding-box}
.winkel .tegels.groot .tegel:not(.sfeer){aspect-ratio:4/3;grid-template-rows:minmax(0,1fr) auto auto;padding:12px 14px;align-content:stretch}
.winkel .tegels.groot .tegel:not(.sfeer) .beeld{aspect-ratio:auto;height:100%;min-height:0}
.winkel .tegels.groot .tegel:not(.sfeer) b{font-size:15px;color:var(--inkt);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.winkel .tegel.sfeer .tegelnaam{background:linear-gradient(0deg,rgba(8,8,10,.86) 0%,rgba(8,8,10,.52) 50%,rgba(8,8,10,0) 100%)}
.winkel .tegel.sfeer .tegelnaam b{text-transform:uppercase;font-weight:700;font-size:17px;letter-spacing:.01em;line-height:1.05;color:#fff}
.winkel .tegel.sfeer .bg{transition:transform .6s var(--veer)}
@media (hover:hover){.winkel .tegel:hover{transform:translateY(-4px);border-color:var(--brand-glans);box-shadow:0 2px 5px rgba(20,24,31,.05),0 22px 40px -22px rgba(20,24,31,.42),0 12px 30px -24px var(--brand-glans)}
  .winkel .tegel.sfeer:hover .bg{transform:scale(1.05)}}

/* titelband: donker met een gloed in de kleur van de partner, terugknop in glas */
.titelband::before{content:"";position:absolute;inset:0;z-index:-1;background:url("img/trl/Achtergrond-tralert-v2.svg") center 35%/cover no-repeat;filter:grayscale(1) brightness(2.2);opacity:.16;pointer-events:none}
.titelband{position:relative;isolation:isolate;overflow:hidden;background-color:#060607;background-image:radial-gradient(120% 160% at 100% 0%,color-mix(in srgb,var(--brand) 48%,transparent) 0%,transparent 58%),radial-gradient(80% 120% at 0% 100%,color-mix(in srgb,var(--brand) 22%,transparent) 0%,transparent 60%),linear-gradient(90deg,#000 0%,#0b0b0d 55%,color-mix(in srgb,var(--brand) 30%,#0b0b0d) 100%);color:#fff}
.titelband .rij{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 18px;padding-block:22px}
.titelband h1{margin:0;color:#fff;font-family:var(--f-body);font-size:28px;font-weight:600;line-height:1.15;text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere}
.titelband .kruimel{padding:0;color:rgba(255,255,255,.6)}
.winkel .titelband .kruimel button{color:rgba(255,255,255,.82);text-decoration:none;font-size:13px}
.winkel .titelband .kruimel button:hover{color:#fff;text-decoration:underline}
.terugrond{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:rgba(255,255,255,.06);box-shadow:inset 1px 1px 0 rgba(255,255,255,.12);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
.terugrond svg{transition:transform .2s ease}
@media (hover:hover){.terugrond:hover{border-color:var(--brand-glans);background-color:color-mix(in srgb,var(--brand) 18%,transparent);box-shadow:0 0 0 1px var(--brand-zacht),0 10px 28px -10px var(--brand-glans)}.terugrond:hover svg{transform:translateX(-2px)}}
.titelband .telling{align-self:center;padding:5px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:rgba(255,255,255,.84);font-size:13px;font-weight:600;white-space:nowrap}
.groeppagina{padding-block:28px 48px;display:grid;gap:22px}
.groeppagina > .raster{margin-top:4px}
/* series in een glaskaart, ingeklapt met een pil op de onderrand */
.seriekaart{position:relative;padding:20px 20px 30px;border:1px solid var(--rand);border-radius:14px;background:#fff var(--wash);box-shadow:var(--schaduw);margin-bottom:14px}
.seriekaart h2{font-family:var(--f-body);font-weight:600;font-size:16px;color:var(--inkt);margin-bottom:12px}
.seriekaart .series{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:14px 12px;overflow:hidden;max-height:none;padding:6px 2px 2px;margin:0}
.seriekaart:not(.open) .series{max-height:330px;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.serieknop{position:relative;display:grid;justify-items:center;gap:5px;min-width:0;max-width:none;padding:0;border:0;background:none;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--tekst);text-align:center}
.serieknop .beeld{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px var(--rand);overflow:hidden;transition:box-shadow .2s ease}
.serieknop .beeld img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--veer)}
.serieknop .naam{line-height:1.2}
.serieknop small{min-width:24px;padding:1px 7px;border-radius:999px;background:var(--tint);color:var(--grijs);font-size:11.5px;font-weight:600}
.serieknop[aria-pressed="true"]{border:0;box-shadow:none}
.serieknop[aria-pressed="true"] .beeld{box-shadow:inset 0 0 0 2px var(--brand),0 0 0 3px var(--brand-zacht)}
.serieknop[aria-pressed="true"] small{background:var(--brand);color:var(--brand-ink)}
@media (hover:hover){.serieknop:hover .beeld img{transform:scale(1.05)}.serieknop:hover .beeld{box-shadow:inset 0 0 0 1px var(--brand-glans)}}
.seriepil{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px 0 8px;border:1px solid #dcdcdc;border-radius:999px;background:#fff;color:#181818;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.1);transition:border-color .2s ease,box-shadow .2s ease,color .2s ease}
.seriepil .pijlrond{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brand);color:var(--brand-ink)}
.seriepil .pijlrond svg{transform:rotate(90deg);transition:transform .3s ease}
.seriekaart.open .seriepil .pijlrond svg{transform:rotate(-90deg)}
.seriepil small{min-width:24px;padding:1px 7px;border-radius:999px;background:#f1f1f1;color:#7a7a7a;font-size:12px;font-weight:600}
@media (hover:hover){.seriepil:hover{border-color:var(--brand);color:var(--brand);box-shadow:0 4px 16px var(--brand-zacht)}}
/* filterbalk als glaskaart */
.winkel .filters{margin:0;padding:12px 14px;border:1px solid var(--rand);border-radius:14px;background:#fff var(--wash);box-shadow:var(--schaduw-klein)}
.winkel .chip{min-height:34px;border:1px solid var(--rand);background:#fff;color:var(--tekst);font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.winkel .chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);box-shadow:0 4px 12px -6px var(--brand-glans)}
@media (hover:hover){.winkel .chip:not([aria-pressed="true"]):hover{border-color:var(--brand-glans);color:var(--brand)}}
.winkel .filters select{width:auto;border-radius:999px;min-height:36px;padding:6px 34px 6px 14px;border:1px solid var(--rand);background-color:#fff;font-weight:600}
.winkel .filters .rechts{flex-wrap:nowrap}
.winkel .schakel input:checked{background:var(--brand)}

/* producttegels: glaskaart, hover tilt ze op met een gloed in de kleur van de partner */
.winkel .raster{grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:18px}
.winkel .kaart{position:relative;border:1px solid var(--rand);border-radius:14px;background:#fff var(--wash);box-shadow:0 1px 2px rgba(20,24,31,.04),0 8px 16px -10px rgba(20,24,31,.28);overflow:visible;transition:transform .45s var(--veer),border-color .3s ease,box-shadow .3s ease}
.winkel .kaart .foto{border-radius:13px 13px 0 0;background:#fff;padding:18px}
.winkel .kaart .foto img{transition:transform .6s var(--veer)}
.winkel .kaart .body{border-top:1px solid var(--lijn);padding:13px 15px 15px;gap:6px}
.winkel .kaart .naam{font-size:15.5px;font-weight:600;color:var(--inkt);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.winkel .kaart .meta{color:var(--licht);font-size:12.5px}
.winkel .merkchip{font-size:11px;letter-spacing:.09em;color:var(--licht);font-weight:600}
@media (hover:hover){.winkel .kaart:hover{transform:translateY(-4px);border-color:var(--brand-glans);box-shadow:0 2px 4px rgba(20,24,31,.05),0 26px 44px -24px rgba(20,24,31,.5),0 12px 30px -24px var(--brand-glans)}
  .winkel .kaart:hover .foto img{transform:scale(1.04)}}
.winkel .prijs{font-weight:700;color:var(--inkt);letter-spacing:-.01em}
.winkel .prijs small{color:var(--licht)}
.winkel .voorraad{font-size:12.5px;font-weight:500;color:var(--tekst);gap:8px}
.winkel .voorraad::before{width:8px;height:8px;background:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.18)}
.winkel .voorraad.nee::before{background:#f39c12;box-shadow:0 0 0 3px rgba(243,156,18,.2)}
.winkel .plus{width:42px;height:42px;border-radius:8px;background:rgba(61,61,61,.82);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);transition:background .25s ease,box-shadow .25s ease,transform .2s ease}
.winkel .plus.klein{width:34px;height:34px}
@media (hover:hover){.winkel .plus:hover{background:var(--brand);color:var(--brand-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 12px -6px var(--brand-glans)}}
.winkel .plus:active{transform:scale(.94)}
/* labels in glas, zoals op tralert.com */
.winkel .labels{top:10px;left:10px;gap:6px}
.winkel .lbl{font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:.04em;padding:4px 9px;border-radius:6px;border:1px solid rgba(255,255,255,.28);box-shadow:0 2px 10px rgba(0,0,0,.16);color:#fff;-webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%)}
.winkel .lbl.nieuw{background:rgba(237,3,0,.7)}
.winkel .lbl.adr{background:rgba(204,69,69,.7)}
.winkel .zijde{border:1px solid rgba(255,255,255,.28);box-shadow:0 2px 10px rgba(0,0,0,.16);-webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);border-radius:6px}
.winkel .zijde.links{background:rgba(31,31,31,.7)}.winkel .zijde.rechts{background:rgba(92,92,92,.7)}.winkel .zijde.set{background:rgba(61,61,61,.7)}
/* specificaties bij aanwijzen: een glaspaneel dat over de foto schuift */
.winkel .hspecs{left:8px;right:8px;bottom:8px;border:1px solid rgba(255,255,255,.7);border-radius:10px;background:rgba(255,255,255,.9);box-shadow:0 10px 24px -14px rgba(20,24,31,.5);padding:10px 12px;font-size:12.5px;transform:translateY(calc(100% + 12px));opacity:0;transition:transform .35s var(--veer),opacity .2s ease}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.winkel .hspecs{background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}}
.winkel .hspecs b{color:var(--inkt)}
@media (hover:hover){.winkel .kaart:hover .hspecs,.winkel .kaart .foto:focus-visible .hspecs{transform:none;opacity:1}}
.winkel .leeg{border:1px solid var(--rand);border-radius:14px;background:#fff var(--wash);box-shadow:var(--schaduw)}

/* productpagina */
.winkel .kruimel{color:var(--licht)}
.winkel .kruimel button{color:var(--tekst);text-decoration:none}
.winkel .kruimel button:hover{color:var(--brand);text-decoration:underline}
.winkel .hoofdfoto{border:1px solid var(--rand);border-radius:16px;background:#fff;box-shadow:var(--schaduw)}
.winkel .duim{border-radius:10px;border:0;outline:1px solid var(--rand);outline-offset:-1px;background:#fff}
.winkel .duim[aria-pressed="true"]{outline:2px solid var(--brand);outline-offset:-2px}
.winkel .samenvatting{border:1px solid var(--rand);border-radius:16px;background:#fff var(--wash);box-shadow:var(--schaduw);padding:24px}
.winkel .samenvatting h1{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.2vw,28px);line-height:1.25;letter-spacing:-.005em;color:var(--inkt)}
.winkel .feiten{border-top-color:var(--lijn)}
.winkel .feiten div{border-bottom-color:var(--lijn);font-size:13.5px}
.winkel .feiten dt{color:var(--licht);font-weight:500}
.winkel .feiten dd{color:var(--tekst);font-weight:500}
.winkel .koopblok{border-top:1px solid var(--lijn);padding-top:16px}
.winkel .prijs.xl{font-size:30px;font-weight:600}
.winkel .aantal{border:0;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.winkel .aantal button{background:transparent;color:var(--tekst)}
.winkel .aantal button:hover{color:var(--brand)}
.winkel .knop.merk{border-radius:8px;background:var(--brand);color:var(--brand-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 8px -4px var(--brand-glans);text-transform:uppercase;letter-spacing:.04em;font-size:13.5px}
.winkel .knop.merk:is(:hover,:focus-visible){background:var(--brand-deep);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px -6px var(--brand-glans)}
.winkel .omdoos{border-radius:8px;background:var(--brand-zacht)}
.winkel .seriebadge img{border-radius:10px;border:0;box-shadow:inset 0 0 0 1px var(--rand)}
.winkel .set{border:1px solid var(--rand);border-radius:14px;background:#fff var(--wash);box-shadow:var(--schaduw-klein)}
.winkel .vak{border:1px solid var(--rand);border-radius:14px;background:#fff var(--wash);box-shadow:var(--schaduw)}
.winkel .eig h3 svg{color:var(--brand)}
.winkel .eigrij{border-bottom-color:var(--lijn)}
.winkel .docs a{border-color:var(--rand);border-radius:10px;background:#fff}
.winkel .docs a:hover{border-color:var(--brand-glans);color:var(--brand)}
.winkel .alternatieven{border-radius:14px}
.winkel .mini,.winkel .acckaart{border:1px solid var(--rand);border-radius:12px;background:#fff var(--wash);box-shadow:0 1px 2px rgba(20,24,31,.04),0 8px 16px -12px rgba(20,24,31,.28)}
.koopbalk{background:rgba(255,255,255,.96);border-top:0;box-shadow:0 -1px 0 var(--rand),0 -14px 30px -24px rgba(20,24,31,.45)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.koopbalk{background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}}

/* winkelwagen, afrekenen, bedankt en volgen: glaskaarten op het doek */
.winkel .pagina > .paginatitel,.winkel .pagina .kopregel .paginatitel{font-family:var(--f-display);font-weight:600;color:var(--inkt)}
.winkel .regelblok{border-top-color:var(--lijn)}
.winkel .regel img{border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px rgba(20,24,31,.07);padding:3px}
.winkel .som .tot{border-top-color:var(--lijn);color:var(--inkt)}
.winkel .betaal label{border-color:rgba(20,24,31,.12);border-radius:8px;background:rgba(255,255,255,.85)}
.winkel .betaal label:has(input:checked){border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:#fff}
.winkel :is(input[type=text],input[type=email],input[type=number],select){min-height:44px;border:1px solid var(--veld);border-radius:8px;background:#fff;color:var(--inkt)}
.winkel :is(input,select):focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-zacht)}
.winkel .notitie{border-radius:8px;background:rgba(58,94,158,.07);color:#2b4d82;box-shadow:inset 0 0 0 1px rgba(58,94,158,.16)}
.winkel .okicoon{background:rgba(142,177,113,.22);color:#467531}
.winkel .tijdlijn div.ja{border-top-color:var(--brand)}
.winkel .zending{border-top-color:var(--lijn)}
/* balk tot gratis verzending: rood naar oranje, groen als hij vol is */
.gratisbalk{display:grid;gap:7px;padding:12px 14px;border-radius:10px;background:var(--tint)}
.gratisbalk p{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--grijs)}
.gratisbalk .baan{height:6px;border-radius:99px;background:rgba(20,24,31,.08);overflow:hidden}
.gratisbalk .baan i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#EC4642 0%,#F59E1B 100%);transition:width .5s var(--veer)}
.gratisbalk.vol p{color:#467531;font-weight:600}
.gratisbalk.vol .baan i{background:#37B73E}

/* zijpanelen (winkelwagen rechts, menu links) en het scherm erachter */
.zijscherm{position:fixed;inset:0;z-index:60;background:rgba(12,12,14,.32)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.zijscherm{-webkit-backdrop-filter:blur(6px) saturate(115%);backdrop-filter:blur(6px) saturate(115%)}}
.zijpaneel{position:fixed;top:0;bottom:0;z-index:61;width:min(400px,calc(100vw - 36px));display:flex;flex-direction:column;background:rgba(255,255,255,.97);color:var(--tekst);font-family:var(--f-body)}
.zijpaneel.rechts{right:0;box-shadow:inset 1px 0 0 rgba(255,255,255,.7),-30px 0 60px -30px rgba(0,0,0,.45)}
.zijpaneel.links{left:0;width:min(320px,calc(100vw - 36px));box-shadow:inset -1px 0 0 rgba(255,255,255,.7),30px 0 60px -30px rgba(0,0,0,.45)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.zijpaneel{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(30px) saturate(150%);backdrop-filter:blur(30px) saturate(150%)}}
.zijpaneel.rechts.in{animation:inRechts .38s var(--veer)}
.zijpaneel.links.in{animation:inLinks .38s var(--veer)}
@keyframes inRechts{from{transform:translateX(100%)}}
@keyframes inLinks{from{transform:translateX(-100%)}}
.paneelkop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid rgba(0,0,0,.08)}
.paneelkop b{font-size:19px;font-weight:600;color:var(--inkt)}
.paneelkop .sluit{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:rgba(0,0,0,.05);color:var(--tekst);cursor:pointer}
.paneelkop .sluit svg{transform:rotate(45deg)}
.paneelkop .sluit:hover{background:rgba(0,0,0,.09);color:var(--brand)}
.paneelinhoud{flex:1;overflow-y:auto;overscroll-behavior:contain}
.minicart .gratisbalk{margin:12px 20px 4px;background:transparent;padding:0}
.mcregel{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;padding:16px 46px 16px 20px;border-bottom:1px solid rgba(0,0,0,.08)}
.mcregel:hover{background:rgba(0,0,0,.025)}
.mcfoto{width:64px;height:64px;border:0;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);padding:4px;cursor:pointer}
.mcfoto img{width:100%;height:100%;object-fit:contain}
.mcregel .naam{border:0;background:none;padding:0;text-align:left;cursor:pointer;font-size:14px;font-weight:600;line-height:1.35;color:var(--inkt);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcregel .naam:hover{color:var(--brand)}
.mconder{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.mconder .aantal{background:rgba(0,0,0,.05);box-shadow:none;border-radius:8px}
.mconder .num{font-size:15px;color:var(--inkt)}
.mcweg{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:none;color:#6b6b6b;cursor:pointer}
.mcweg svg{transform:rotate(45deg)}
.mcweg:hover{background:rgba(0,0,0,.05);color:#EC4642}
.paneelvoet{display:grid;gap:10px;padding:14px 20px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.55)}
.paneelvoet .som{font-size:14px}
.paneelvoet .knop{min-height:46px}
.mcleeg{display:grid;place-content:center;justify-items:center;gap:14px;padding:30px;text-align:center}
.mcleeg .leegicoon{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--brand-zacht);color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand-glans)}
.menulijst{padding:8px}
.menulijst button{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:54px;padding:6px 10px;border:0;border-bottom:1px solid rgba(0,0,0,.07);background:none;text-align:left;cursor:pointer;color:var(--inkt);font-weight:600;font-size:14.5px}
.menulijst button > svg{justify-self:center;color:var(--brand)}
.menulijst img{width:44px;height:44px;border-radius:8px;object-fit:cover;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.menulijst small{min-width:26px;padding:1px 8px;border-radius:999px;background:var(--tint);color:var(--grijs);font-size:12px;text-align:center}
.menulijst button:hover{background:rgba(0,0,0,.03);color:var(--brand)}
body:has(.zijpaneel){overflow:hidden}
body:has(.zijpaneel) #toast{display:none}   /* het paneel zelf laat al zien wat er in de winkelwagen kwam */

/* werkbalk onderin op telefoon en tablet: zwevende pil in licht glas */
.werkbalk{display:none}
@media (max-width:1024px){
  .werkbalk{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:50;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:520px;height:58px;margin-inline:auto;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 0 0 1px rgba(0,0,0,.07),0 14px 34px -14px rgba(0,0,0,.45)}
  .werkbalk button{position:relative;display:grid;justify-items:center;align-content:center;gap:2px;border:0;background:none;color:#2b2b2b;font-size:11.5px;font-weight:600;cursor:pointer;min-width:0}
  .werkbalk button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .werkbalk button:active{color:var(--brand)}
  .werkbalk .tel{position:absolute;top:5px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--brand);color:var(--brand-ink);font-style:normal;font-size:10.5px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
  .werkbalk .tel[hidden]{display:none}
  body[data-view=winkel]{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .koopbalk{bottom:calc(84px + env(safe-area-inset-bottom,0px));left:12px;right:12px;border-radius:14px;box-shadow:0 0 0 1px var(--rand),0 14px 30px -20px rgba(20,24,31,.5);padding-bottom:0}
  .koopbalk .rij{padding-inline:12px}
  body:has(.koopbalk.zicht) #toast{bottom:calc(160px + env(safe-area-inset-bottom,0px))}
  #toast{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .glaskop .shop-nav{display:none}
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){@media (max-width:1024px){.werkbalk{background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%)}}}

/* voet van de winkel: wit, kolommen met een streepje in de kleur van de partner */
.winkel .shop-voet{background:rgba(255,255,255,.82);border-top:1px solid var(--rand);margin-top:36px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.winkel .shop-voet .kol > div > b{display:flex;align-items:center;gap:8px;color:var(--inkt);font-weight:600}
.winkel .shop-voet .kol > div > b::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--brand)}
.winkel .shop-voet ul button:hover{color:var(--brand)}
.winkel .shop-voet .onder{border-top-color:var(--lijn)}

/* ── betalen, kortingen, afhalen, gratis maand en feedback (20-10, middag) ─────────────────────── */
/* velden die er later bij kwamen: telefoon, datum en tekstvakken */
.winkel input[type=tel]{min-height:44px;border:1px solid var(--veld);border-radius:8px;background:#fff;color:var(--inkt)}
.beheer :is(input[type=date],input[type=tel],textarea){min-height:42px;border:1px solid var(--veld);border-radius:8px;background:#fff;color:var(--inkt);box-shadow:none;font:inherit;padding:8px 12px;width:100%}
.beheer textarea{min-height:120px;resize:vertical;line-height:1.5}
.beheer :is(input[type=date],input[type=tel],textarea):focus{border-color:#3E3E3E;outline:0;box-shadow:0 0 0 3px rgba(62,62,62,.08)}

/* drie geldstromen: licht in het beheer, donker glas op de startpagina en de uitleg */
.geldstroom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:4px}
.geldkaart{display:grid;gap:8px;align-content:start;padding:18px 18px 16px;border:1px solid var(--rand);border-radius:10px;background:#fff var(--wash);box-shadow:var(--schaduw-klein)}
.geldkaart h3{margin:0;font-family:var(--f-body);font-size:16px;font-weight:600;line-height:1.3;color:var(--inkt)}
.geldkaart p{margin:0;font-size:14px;line-height:1.55;color:var(--tekst)}
.geldicoon{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(236,70,66,.08);color:var(--trl-rood-tekst);box-shadow:inset 0 0 0 1px rgba(236,70,66,.25)}
.geldstroom.donker .geldkaart{background-color:var(--dk-kaart);background-image:var(--dk-wash);border-color:var(--dk-rand);box-shadow:var(--dk-schaduw)}
.geldstroom.donker .geldkaart h3{color:#fff}
.geldstroom.donker .geldkaart p{color:rgba(255,255,255,.78)}
.geldstroom.donker .geldicoon{background:rgba(236,70,66,.14);color:#ff6b66;box-shadow:inset 0 0 0 1px rgba(236,70,66,.4),0 0 22px -8px rgba(236,70,66,.6)}
.geldvak .vakkop{gap:12px;flex-wrap:wrap}

/* rekenvoorbeeld */
.rekenvb{display:grid;font-variant-numeric:tabular-nums}
.rekenvb .rv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:baseline;padding:11px 0;border-top:1px solid var(--lijn)}
.rekenvb .rv:first-child{border-top:0}
.rekenvb .rv span{color:var(--inkt);font-weight:500}
.rekenvb .rv b{font-weight:600;color:var(--inkt);white-space:nowrap}
.rekenvb .rv small{grid-column:1/-1;color:var(--grijs);font-size:12.5px}
.rekenvb .rv.min b{color:#a3221d}
.rekenvb .rv.tot{border-top:2px solid rgba(20,24,31,.14)}
.rekenvb .rv.tot b{color:#3f6a2e;font-size:18px}

/* eerste maand gratis */
.gratispil{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:rgba(142,177,113,.16);color:#3f6a2e;font-weight:600;font-size:13px;letter-spacing:.02em;box-shadow:inset 0 0 0 1px rgba(126,164,113,.42);white-space:nowrap}
.gratispil svg{color:#5d8a45}
.geldstroom.donker ~ .gratispil,.geldvak .gratispil{background:rgba(142,177,113,.14);color:#b6dc97;box-shadow:inset 0 0 0 1px rgba(142,177,113,.42),0 0 18px -8px rgba(142,177,113,.6)}
.geldvak .gratispil svg{color:#b6dc97}
.som .gratislijn span:last-child{color:#3f6a2e;font-weight:600}
.gratisregel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.gratisregel > span:last-child{color:var(--tekst)}

/* schakelaar die (nog) niet kan */
.merkrij.schakel.uit{opacity:.55;cursor:default}

/* kortingscodes in het beheer */
.beheer .form [hidden]{display:none!important}   /* een label met display:grid wint anders van het hidden-attribuut */
.beheer .form label{align-content:start}          /* een veld rekt niet uit naast een veld met een uitlegregel */
.kortingform h3{margin:0;font-family:var(--f-body);font-weight:600;font-size:16px;color:var(--inkt)}
.kortingwaarde{display:flex;gap:8px}
.kortingwaarde input{flex:0 1 110px;min-width:0}
.kortingwaarde select{flex:1 1 auto;min-width:0}
.kortingtip{display:flex;gap:8px;align-items:flex-start;margin:0}
.kortingtip svg{flex:none;margin-top:3px;color:var(--trl-rood-tekst)}
.beheer .vak .tabelvak table.lijst.kortinglijst td{white-space:normal}   /* wint van de nowrap-regel voor tabellen in het beheer */
.kortinglijst .omschr{display:block;color:var(--grijs);font-size:12.5px}
.kortinglijst .waarsch{display:block;margin-top:3px;color:#a3221d;font-size:12.5px;line-height:1.35}
.kortinglijst .schakel input{width:38px;height:22px}
.kortinglijst .schakel input::after{width:16px;height:16px}
.kortinglijst .schakel input:checked::after{transform:translateX(16px)}
.lijst tr.kortingrij td{color:#2f7a3a;font-weight:600}
.lijst tr.kortingrij svg{vertical-align:-2px}

/* winkel: kortingscode, bezorgen of afhalen */
.kortingvak{display:grid;gap:6px}
.kortingvak .inline input{text-transform:uppercase;letter-spacing:.05em;flex:1 1 140px}
.kortingvak .inline .knop{flex:0 0 auto}
.kortingchip{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:10px 12px;border-radius:8px;background:var(--brand-zacht,rgba(236,70,66,.06));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand,#EC4642) 35%,transparent)}
.kortingchip .kc-tekst{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;font-size:14px}
.kortingchip svg{color:var(--brand,#EC4642)}
.som .kortinglijn span:last-child{color:#2f7a3a;font-weight:600}
.leverkeuze{display:grid;gap:8px}
.leveroptie{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:start;padding:12px;border:1px solid rgba(20,24,31,.12);border-radius:8px;background:rgba(255,255,255,.85);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}
.leveroptie:has(input:checked){border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:#fff}
.leveroptie input{margin:3px 0 0;accent-color:var(--brand)}
.leveroptie .lo-tekst{display:grid;gap:2px;min-width:0}
.leveroptie .lo-tekst b{font-weight:600;color:var(--inkt);font-size:14.5px}
.leveroptie .lo-tekst small{color:var(--grijs);font-size:13px;line-height:1.4}
.leveroptie .lo-prijs{font-weight:600;white-space:nowrap;color:var(--inkt)}
.wagenaside h2{font-size:17px}
.afhaalvak .afhaaladres{display:flex;gap:10px;align-items:flex-start;margin:0}
.afhaalvak .afhaaladres svg{flex:none;margin-top:2px;color:var(--brand)}

/* feedback */
.fbitem{display:grid;gap:6px;padding:14px 0;border-top:1px solid var(--lijn)}
.vak > .fbitem:first-of-type,.vak > h2 + .fbitem{border-top:0}
.fbitem .kop{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fbitem .kop > b{margin-right:auto;color:var(--inkt)}
.fbitem p{margin:0}
.fbbericht{white-space:pre-line;color:var(--tekst)}
.fbantwoord{display:grid;gap:3px;padding:10px 12px;border-radius:8px;background:rgba(236,70,66,.05);box-shadow:inset 3px 0 0 var(--trl-rood)}
.fbantwoord p{white-space:pre-line}
.fbitem.nieuw .fbantwoord{background:rgba(236,70,66,.1)}
.fbhint{display:flex;gap:8px;align-items:flex-start;margin:4px 0 0}
.fbhint svg{flex:none;margin-top:2px;color:var(--trl-rood-tekst)}
.tabtel{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:auto;padding:0 6px;border-radius:999px;background:var(--trl-rood);color:#fff;font-size:11.5px;font-weight:700;line-height:1}
.trl-beheer .tabs .tabtel{margin-left:6px;vertical-align:1px}
.trl-beheer .fbitem{border-top-color:rgba(255,255,255,.08)}
.trl-beheer .fbitem .kop > span:first-child{margin-right:auto}
.trl-beheer .fbbericht{color:rgba(255,255,255,.86)}
.trl-beheer .fbantwoord{background:rgba(236,70,66,.1)}
.trl-beheer .fbform{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) auto;gap:8px;align-items:start;margin-top:4px}
.trl-beheer .fbform :is(select,textarea){min-height:40px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;font:inherit;padding:8px 10px}
.trl-beheer .fbform select option{color:#111}
.trl-beheer .fbform textarea{resize:vertical;line-height:1.45}
.trl-beheer .knop.donker[aria-pressed="true"]{border-color:var(--trl-rood);background:rgba(236,70,66,.16)}

@media (max-width:900px){
  .geldstroom{grid-template-columns:minmax(0,1fr)}
  .trl-beheer .fbform{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  /* kortingscodes als kaartjes, zoals de voorraadlijst */
  table.kortinglijst{min-width:0}
  table.kortinglijst thead{display:none}
  table.kortinglijst tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;padding:12px 14px;border-bottom:1px solid var(--lijn)}
  table.kortinglijst tbody tr:last-child{border-bottom:0}
  table.kortinglijst td,table.kortinglijst td.r{padding:0;border:0;text-align:left;min-width:0}
  table.kortinglijst td:first-child,table.kortinglijst td:last-child{grid-column:1/-1}
  table.kortinglijst td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
}
@media (max-width:640px){
  .leveroptie{grid-template-columns:auto minmax(0,1fr)}
  .leveroptie .lo-prijs{grid-column:2}
  .kortingwaarde{flex-wrap:wrap}
  .kortingwaarde input{flex:1 1 90px}
}

/* ── telefoon en tablet ─────────────────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .glaskop .kop-hoofd .rij{grid-template-columns:minmax(0,1fr) auto;padding-block:12px;gap:10px 14px}
  .glaskop .zoek{grid-column:1/-1;order:3;height:42px}
  .glaskop .logo img{max-height:36px}
  .kopknop-tekst{display:none}
  .kopknop{padding:0 5px;height:46px}
}
@media (max-width:980px){
  .startraster{grid-template-columns:minmax(0,1fr)}
  .startbeeld{max-width:620px;aspect-ratio:16/9}
  .beheer .zijbalk{position:static;padding:6px}
  .inrichten .zijbalk .zijnoot{display:none}
}
@media (max-width:760px){
  .titelband .rij{grid-template-columns:auto minmax(0,1fr);padding-block:16px}
  .titelband h1{font-size:20px}
  .titelband .telling{grid-column:2;justify-self:start;padding:3px 10px;font-size:12px}
  .terugrond{width:38px;height:38px}
  .seriekaart{padding:16px 14px 28px}
  .seriekaart .series{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .seriekaart:not(.open) .series{max-height:208px}
  .serieknop{grid-template-columns:52px minmax(0,1fr) auto;justify-items:start;align-items:center;text-align:left;gap:8px;padding:4px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--rand)}
  .serieknop .beeld{width:52px}
  .serieknop[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--brand)}
  .serieknop[aria-pressed="true"] .beeld{box-shadow:none}
  .seriepil{font-size:13px;gap:8px;padding:0 14px 0 8px}
  .winkel .usp{margin-top:-24px}
  .winkel .usp .rij{padding:12px 16px}
  .winkel .raster{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .authvak{padding:22px 18px}
  .startheld h1{font-size:clamp(28px,8vw,36px)}
  header.demo .sub{display:none}
  .winkel .filters .rechts{flex-wrap:wrap;width:100%;justify-content:space-between;gap:10px}
}
@media (max-width:640px){
  header.demo .rij{flex-wrap:nowrap;gap:8px;padding-block:10px}
  header.demo a.mark img{height:28px}
  header.demo .kopLink,header.demo .kopTaal svg{display:none}
  header.demo .kopUit{padding:7px 9px}
  header.demo .kopUit span{display:none}
  header.demo .knop.trlrood.klein{padding:6px 12px;letter-spacing:.6px;font-size:11px;min-height:34px}
}
@media (max-width:440px){
  .winkel .raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .winkel .kaart .foto{padding:10px}
  .winkel .kaart .body{padding:10px 11px 12px}
  .winkel .kaart .naam{font-size:14px}
  .winkel .plus{width:38px;height:38px}
  .glaskop .partnerlabel span{max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .glaskop .logo{flex-wrap:wrap;white-space:normal;row-gap:0;text-align:left}
  .glaskop .logo b{font-size:25px}
  .glaskop .logo span{font-size:14px;letter-spacing:.08em}
  .megategel .naam b{font-size:12.5px}
  .winkel .samenvatting{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .winkel .kaart,.winkel .tegel,.stapkaart,.zijpaneel{transition:none!important;animation:none!important;transform:none!important}
}