/* Demo-ontwerp GJ Billiards webshop: lichte productpagina in het navy van het logo, met het geel van de bal als accent. */
:root{
  --navy:#0e3a6b; --navy-diep:#082a4f; --navy-licht:#e6eef8;
  --geel:#f2c230; --geel-diep:#d9a80f; --rood:#d9382b;
  --wit:#ffffff; --grijs:#f3f5f8; --lijn:#e1e6ed; --lijn-fel:#c9d2dd;
  --inkt:#111827; --inkt-2:#5b6675;
  --maat:clamp(1rem,3.5vw,2rem); --breed:1240px; --hoek:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--grijs);color:var(--inkt);
  font-family:Manrope,system-ui,Segoe UI,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:Outfit,Manrope,sans-serif;line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700}
h3{font-size:1.15rem;font-weight:700}
button{font:inherit}
:focus-visible{outline:2.5px solid var(--geel-diep);outline-offset:2px}
.vak{max-width:var(--breed);margin-inline:auto;padding-inline:var(--maat)}
.label{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.prijs{font-variant-numeric:tabular-nums;font-weight:800}
.skip{position:absolute;left:-9999px;background:var(--geel);color:var(--inkt);padding:.6rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
section{scroll-margin-top:130px}

/* ---------- demo-strook ---------- */
.demo{background:var(--inkt);color:#cfd6df;font-size:.8rem;text-align:center;padding:.45rem var(--maat)}
.demo b{color:var(--geel)}

/* ---------- usp-balk ---------- */
.usp{background:var(--navy);color:#dbe6f3;font-size:.8rem;font-weight:600}
.usp-rij{display:flex;flex-wrap:wrap;gap:.3rem 2rem;justify-content:center;padding:.5rem 0}
.usp-rij span::before{content:"✓";color:var(--geel);margin-right:.45rem;font-weight:800}

/* ---------- kop ---------- */
.kop{position:sticky;top:0;z-index:40;background:var(--wit);border-bottom:1px solid var(--lijn)}
.kop-rij{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem 1.6rem;min-height:74px}
.merk{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.merk img{width:46px;height:46px;border-radius:50%}
.merk b{font-family:Outfit,sans-serif;font-weight:800;font-size:1.2rem;letter-spacing:-.01em;line-height:1}
.merk small{display:block;color:var(--inkt-2);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-top:.15rem}
.zoek{position:relative;max-width:520px;justify-self:center;width:100%}
.zoek input{width:100%;border:1.5px solid var(--lijn-fel);border-radius:999px;padding:.62rem 1rem .62rem 2.6rem;
  font:inherit;font-size:.93rem;background:var(--grijs)}
.zoek input:focus{border-color:var(--navy);background:var(--wit);outline:none}
.zoek svg{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);color:var(--inkt-2)}
.kop-acties{display:flex;align-items:center;gap:.5rem}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1.5px solid transparent;
  border-radius:999px;padding:.66rem 1.2rem;font-weight:800;font-size:.9rem;text-decoration:none;cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s,transform .1s}
.knop:active{transform:translateY(1px)}
.knop-geel{background:var(--geel);color:var(--inkt)}
.knop-geel:hover{background:var(--geel-diep)}
.knop-navy{background:var(--navy);color:#fff}
.knop-navy:hover{background:var(--navy-diep)}
.knop-lijn{background:transparent;border-color:var(--lijn-fel);color:var(--inkt)}
.knop-lijn:hover{border-color:var(--navy);color:var(--navy)}
.knop-wit{background:var(--wit);color:var(--navy)}
.knop-wit:hover{background:var(--navy-licht)}
.wagen{position:relative}
.wagen .tel{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:999px;background:var(--rood);
  color:#fff;font-size:.7rem;font-weight:800;display:grid;place-items:center;padding-inline:.35rem}
.wagen .tel[hidden]{display:none}
.hamb{display:none;background:none;border:1.5px solid var(--lijn-fel);border-radius:999px;width:42px;height:42px;
  place-items:center;cursor:pointer;color:var(--inkt)}
.nav{border-top:1px solid var(--lijn)}
.nav-rij{display:flex;gap:1.6rem;overflow-x:auto;scrollbar-width:none}
.nav-rij::-webkit-scrollbar{display:none}
.nav-rij a{text-decoration:none;font-weight:700;font-size:.9rem;color:var(--inkt-2);padding:.75rem 0;white-space:nowrap;
  border-bottom:2px solid transparent}
.nav-rij a:hover{color:var(--navy);border-color:var(--geel)}
.nav-rij a.uit{color:var(--navy)}
@media(max-width:820px){
  .kop-rij{grid-template-columns:auto auto;min-height:64px}
  .zoek{grid-column:1/-1;max-width:none;display:none}
  .zoek.open{display:block;padding-bottom:.7rem}
  .hamb{display:grid}
  .nav[hidden]{display:none}
  .nav-rij{flex-direction:column;gap:0;padding-block:.3rem}
  .nav-rij a{padding:.7rem 0;border-bottom:1px solid var(--lijn)}
  .knop-tekst{display:none}
}
@media(min-width:821px){.nav[hidden]{display:block}}

/* ---------- binnenkomer ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:#fff;
  min-height:min(88vh,760px);display:flex;align-items:flex-end}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(8,42,79,.94) 6%,rgba(8,42,79,.62) 38%,rgba(8,42,79,.1) 72%,rgba(8,42,79,0) 100%),
             linear-gradient(to right,rgba(8,42,79,.72) 0%,rgba(8,42,79,.35) 42%,rgba(8,42,79,0) 68%)}
.hero-inhoud{width:100%;padding-block:clamp(2rem,6vw,3.6rem);display:grid;gap:1.6rem 2.5rem;align-items:end}
@media(min-width:960px){.hero-inhoud{grid-template-columns:minmax(0,1fr) auto}}
.hero-tekst .label{color:var(--geel);display:block;margin-bottom:1rem}
.hero-tekst h1{margin-bottom:1rem;max-width:14ch;font-size:clamp(2.6rem,6vw,4.6rem);text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero-tekst h1 em{font-style:normal;color:var(--geel)}
.hero-tekst p{color:#e2eaf3;max-width:50ch;font-size:1.08rem;margin-bottom:1.6rem;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:.7rem}
/* productkaart als uitgelicht artikel in de hoek */
.hero-kaart{background:var(--wit);color:var(--inkt);border-radius:calc(var(--hoek) * 1.4);padding:.9rem .9rem .9rem 1rem;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem;text-decoration:none;
  box-shadow:0 14px 40px rgba(0,0,0,.28);max-width:420px}
.hero-kaart img{width:88px;height:88px;object-fit:cover;object-position:50% 45%;border-radius:8px;background:var(--grijs)}
.hero-kaart .label{font-size:.62rem}
.hero-kaart b{font-family:Outfit,sans-serif;font-size:1.05rem;display:block;line-height:1.15}
.hero-kaart small{color:var(--inkt-2);font-size:.8rem;display:block;margin-top:.15rem}
.hero-kaart .prijs{color:var(--navy);font-size:1.05rem;white-space:nowrap}
.hero-kaart:hover{box-shadow:0 18px 48px rgba(0,0,0,.34)}
@media(max-width:959px){.hero-kaart{max-width:none}}
@media(max-width:600px){
  .hero{min-height:min(88vh,720px)}
  .hero>img{object-position:62% 0%;transform:none}
  .hero-inhoud{padding-top:clamp(11rem,46vw,16rem)}
  .hero::after{background:linear-gradient(to top,rgba(8,42,79,.96) 10%,rgba(8,42,79,.8) 45%,rgba(8,42,79,.25) 75%,rgba(8,42,79,0) 100%)}
  .hero-knoppen{display:grid;grid-template-columns:1fr}
  .hero-kaart img{width:64px;height:64px}
}

/* ---------- categorieën ---------- */
.cats{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.cats{grid-template-columns:repeat(4,1fr)}}
/* op een breed scherm staan alle categorieen op een rij, hoeveel het er ook zijn */
@media(min-width:1000px){.cats{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.6rem}}
.cat{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--hoek);padding:1rem;text-decoration:none;
  display:grid;gap:.4rem;transition:border-color .15s,box-shadow .15s}
.cat:hover{border-color:var(--navy);box-shadow:0 6px 18px rgba(8,42,79,.08)}
.cat img{height:96px;width:100%;object-fit:contain}
.cat b{font-family:Outfit,sans-serif;font-weight:700;font-size:1rem}
.cat small{color:var(--inkt-2);font-size:.8rem}
.cat b,.cat small{overflow-wrap:break-word;hyphens:auto}
/* smallere tegels als ze met z'n allen op een rij staan */
@media(min-width:1000px){
  .cat{padding:.8rem .7rem;gap:.25rem}
  .cat img{height:74px}
  .cat b{font-size:.92rem;line-height:1.2}
  .cat small{font-size:.72rem;line-height:1.3}
}
@media(min-width:1180px){.cat img{height:82px}.cat b{font-size:1rem}}

/* ---------- gedeelde sectiekop ---------- */
.blok{padding-block:clamp(2.2rem,5vw,3.6rem)}
.sectiekop{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:.6rem 1.5rem;margin-bottom:1.4rem}
.sectiekop p{color:var(--inkt-2);max-width:56ch}

/* ---------- GJ pomerans uitgelicht ---------- */
.uitgelicht{background:var(--wit);border:1px solid var(--lijn);border-radius:calc(var(--hoek) * 2);overflow:hidden;
  display:grid}
@media(min-width:860px){.uitgelicht{grid-template-columns:.9fr 1.1fr}}
.uitgelicht-foto{background:radial-gradient(circle at 50% 45%,#fff 0 55%,#eef2f6 100%);display:grid;place-items:center;padding:1.5rem;min-height:300px}
.uitgelicht-foto img{width:min(100%,420px)}
.uitgelicht-tekst{padding:clamp(1.4rem,3.5vw,2.6rem)}
.uitgelicht-tekst .label{display:block;margin-bottom:.6rem}
.uitgelicht-tekst h2{margin-bottom:.7rem}
.uitgelicht-tekst > p{color:var(--inkt-2);margin-bottom:1.2rem;max-width:52ch}
.hardheden{display:grid;gap:.5rem;margin-bottom:1.3rem}
@media(min-width:560px){.hardheden{grid-template-columns:1fr 1fr}}
.hardheid{border:1.5px solid var(--lijn);border-radius:var(--hoek);padding:.7rem .9rem;cursor:pointer;
  display:grid;gap:.1rem;background:var(--grijs);text-align:left;transition:border-color .15s,background-color .15s}
.hardheid b{font-family:Outfit,sans-serif;font-size:.98rem}
.hardheid small{color:var(--inkt-2);font-size:.8rem;line-height:1.35}
.hardheid[aria-pressed="true"]{border-color:var(--navy);background:var(--navy-licht)}
.uitgelicht-koop{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem}
.uitgelicht-koop .prijs{font-size:1.5rem}
.uitgelicht-koop .prijs small{font-size:.75rem;color:var(--inkt-2);font-weight:600}

/* ---------- productraster ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.3rem}
.filter{border:1.5px solid var(--lijn-fel);background:var(--wit);border-radius:999px;padding:.45rem 1rem;font-weight:700;
  font-size:.86rem;cursor:pointer;color:var(--inkt-2)}
.filter:hover{border-color:var(--navy);color:var(--navy)}
.filter[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.raster{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.raster{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.raster{grid-template-columns:repeat(4,1fr)}}
.product{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--hoek);display:flex;flex-direction:column;
  overflow:hidden;position:relative;transition:box-shadow .15s,border-color .15s}
.product:hover{border-color:var(--lijn-fel);box-shadow:0 10px 26px rgba(8,42,79,.08)}
.product[hidden]{display:none}
.product-foto{background:radial-gradient(circle at 50% 50%,#fff 0 60%,#f0f3f7 100%);aspect-ratio:1/1;display:grid;place-items:center;padding:1rem}
.product-foto img{width:100%;height:100%;object-fit:contain;transition:transform .25s}
.product:hover .product-foto img{transform:scale(1.04)}
.product-tekst{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.product-tekst .merknaam{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--inkt-2)}
.product-tekst h3{font-size:1rem;line-height:1.25}
.product-tekst .omschr{color:var(--inkt-2);font-size:.84rem;line-height:1.45}
.stalen{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.2rem}
.stalen i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.12);display:block}
.stalen small{color:var(--inkt-2);font-size:.75rem;align-self:center}
.product-onder{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.6rem}
.product-onder .prijs{font-size:1.08rem}
.product-onder .prijs small{display:block;font-size:.7rem;color:var(--inkt-2);font-weight:600}
.koop{width:40px;height:40px;border-radius:50%;border:0;background:var(--navy);color:#fff;cursor:pointer;
  display:grid;place-items:center;flex:none;transition:background-color .15s,transform .1s}
.koop:hover{background:var(--navy-diep)}
.koop:active{transform:scale(.94)}
.koop[disabled]{background:var(--lijn-fel);cursor:not-allowed}
.tag{position:absolute;top:.8rem;left:.8rem;border-radius:999px;padding:.25rem .65rem;font-size:.7rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;z-index:1}
.tag-geel{background:var(--geel);color:var(--inkt)}
.tag-rood{background:var(--rood);color:#fff}
.tag-grijs{background:var(--inkt-2);color:#fff}
.tag-navy{background:var(--navy);color:#fff}
.geen{grid-column:1/-1;background:var(--wit);border:1px dashed var(--lijn-fel);border-radius:var(--hoek);padding:2rem;
  text-align:center;color:var(--inkt-2)}

/* ---------- vertrouwen ---------- */
.trust{display:grid;gap:1px;background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--hoek);overflow:hidden}
@media(min-width:700px){.trust{grid-template-columns:repeat(4,1fr)}}
.trust div{background:var(--wit);padding:1.2rem 1.2rem;display:grid;gap:.2rem}
.trust b{font-family:Outfit,sans-serif;font-size:1rem}
.trust span{color:var(--inkt-2);font-size:.86rem}
.trust svg{color:var(--navy);margin-bottom:.4rem}

/* ---------- service + verkooppunten ---------- */
.twee{display:grid;gap:1rem}
@media(min-width:900px){.twee{grid-template-columns:1.1fr .9fr}}
.paneel{background:var(--wit);border:1px solid var(--lijn);border-radius:calc(var(--hoek) * 2);padding:clamp(1.4rem,3.5vw,2.4rem)}
.paneel .label{display:block;margin-bottom:.5rem}
.paneel h2{margin-bottom:.8rem}
.paneel p{color:var(--inkt-2);max-width:56ch}
.paneel p + p{margin-top:.7rem}
.tijden{display:grid;gap:.5rem;margin:1.2rem 0;border-top:1px solid var(--lijn)}
.tijden div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--lijn);font-size:.95rem}
.tijden b{color:var(--inkt)}
.dealers{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.4rem}
.dealers li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .9rem;border:1px solid var(--lijn);
  border-radius:var(--hoek);font-weight:700}
.dealers li small{color:var(--inkt-2);font-weight:600;font-size:.8rem}
.paneel-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.paneel-navy .label{color:var(--geel)}
.paneel-navy p{color:#cfdcec}
.paneel-navy .dealers li{border-color:rgba(255,255,255,.18)}
.paneel-navy .dealers li small{color:#a9bdd3}

/* ---------- welkomstblok ---------- */
.over{background:var(--wit);border-block:1px solid var(--lijn)}
.over-grid{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.over-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:3.5rem}}
.over-logo{background:var(--grijs);border-radius:calc(var(--hoek) * 2);padding:2rem;display:grid;place-items:center;gap:1.2rem}
.over-logo img{width:min(62%,280px);border-radius:50%}
.over-logo .cijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;width:100%}
.over-logo .cijfers div{background:var(--wit);border-radius:var(--hoek);padding:.8rem;text-align:center}
.over-logo .cijfers b{display:block;font-family:Outfit,sans-serif;font-size:1.4rem;color:var(--navy)}
.over-logo .cijfers small{color:var(--inkt-2);font-size:.75rem;line-height:1.3;display:block}
.citaat{font-family:Outfit,sans-serif;font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:600;line-height:1.35;
  margin:1rem 0 1.2rem;color:var(--inkt)}
.over p{color:var(--inkt-2);max-width:60ch}
.over p + p{margin-top:.7rem}
.palmares{margin-top:1.4rem;border-top:1px solid var(--lijn);padding-top:1rem;display:grid;gap:.3rem;font-size:.94rem}
.palmares div{display:grid;grid-template-columns:5.5rem 1fr;gap:.8rem}
.palmares span:first-child{font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}

/* ---------- nieuwsbrief ---------- */
.brief{background:var(--geel);border-radius:calc(var(--hoek) * 2);padding:clamp(1.4rem,3.5vw,2.4rem);display:grid;gap:1rem;align-items:center}
@media(min-width:820px){.brief{grid-template-columns:1fr auto}}
.brief h2{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.brief p{color:#4a3a05;margin-top:.3rem}
.brief form{display:flex;gap:.5rem;flex-wrap:wrap;background:none;border:0;padding:0}
.brief input{flex:1;min-width:220px;border:0;border-radius:999px;padding:.72rem 1.1rem;font:inherit}

/* ---------- voet ---------- */
.voet{background:var(--navy-diep);color:#a9bdd3;padding-block:2.5rem 1.6rem;font-size:.9rem}
.voet-grid{display:grid;gap:1.8rem}
@media(min-width:760px){.voet-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.voet b{color:#fff;font-family:Outfit,sans-serif;font-size:1rem;display:block;margin-bottom:.6rem}
.voet a{text-decoration:none;display:block;padding:.15rem 0}
.voet a:hover{color:#fff}
.voet .merk b{margin:0;display:inline}
.voet .merk small{color:#a9bdd3}
.voet-onder{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1.2rem;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:.5rem 1.5rem;font-size:.8rem}
.voet-maker{opacity:.6;white-space:nowrap;font-size:.68rem;margin-left:auto;align-self:center}.voet-maker a{display:inline;padding:0}   /* rechts in de onderste regel; .voet a zet links op een eigen regel, hier gewoon in de zin */.voet-maker a{color:inherit;text-decoration:none}.voet-maker a:hover{text-decoration:underline;opacity:1}

/* ---------- winkelwagen-lade ---------- */
.sluier{position:fixed;inset:0;background:rgba(8,42,79,.45);z-index:80;backdrop-filter:blur(2px)}
.sluier[hidden]{display:none}
.lade{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--wit);z-index:90;display:flex;flex-direction:column;
  box-shadow:-12px 0 40px rgba(8,42,79,.2);transform:translateX(100%);transition:transform .25s}
.lade.open{transform:none}
.lade-kop{display:flex;align-items:center;justify-content:space-between;padding:1.1rem var(--maat);border-bottom:1px solid var(--lijn)}
.lade-kop h2{font-size:1.3rem}
.lade-sluit{background:none;border:1.5px solid var(--lijn-fel);border-radius:50%;width:38px;height:38px;cursor:pointer;display:grid;place-items:center}
.lade-lijst{flex:1;overflow:auto;padding:.5rem var(--maat)}
.lade-leeg{text-align:center;color:var(--inkt-2);padding:3rem 1rem}
.regel{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--lijn)}
.regel img{width:64px;height:64px;object-fit:contain;background:var(--grijs);border-radius:8px;padding:.3rem}
.regel b{display:block;font-size:.92rem;line-height:1.3}
.regel small{color:var(--inkt-2);font-size:.8rem}
.aantal{display:inline-flex;align-items:center;border:1.5px solid var(--lijn-fel);border-radius:999px;margin-top:.4rem}
.aantal button{background:none;border:0;width:28px;height:28px;cursor:pointer;font-weight:800;color:var(--navy)}
.aantal span{min-width:1.6rem;text-align:center;font-weight:700;font-size:.9rem}
.regel .prijs{font-size:.95rem}
.lade-voet{border-top:1px solid var(--lijn);padding:1rem var(--maat) 1.2rem;display:grid;gap:.6rem;background:var(--grijs)}
.lade-voet .rij{display:flex;justify-content:space-between;font-weight:700}
.lade-voet .rij small{color:var(--inkt-2);font-weight:600}
.lade-voet .totaal{font-size:1.2rem}
.lade-voet .knop{width:100%}
.wagen-let,.inr-noot{margin:0;padding:.6rem .8rem;background:#fff4d6;border-left:3px solid var(--geel);font-size:.85rem;line-height:1.45;color:var(--inkt)}   /* tweedehands en nieuw samen in de wagen */
.overzicht .wagen-let{margin-bottom:.8rem}.inr-noot{margin-bottom:1rem}
#afrekenen.uit{opacity:.45;cursor:not-allowed}
.melding{font-size:.82rem;color:var(--inkt-2);text-align:center}
.melding b{color:var(--rood)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,20px);background:var(--inkt);color:#fff;
  padding:.75rem 1.2rem;border-radius:999px;font-weight:700;font-size:.9rem;z-index:95;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;display:flex;gap:.6rem;align-items:center;max-width:calc(100% - 2rem)}
.toast.zichtbaar{opacity:1;transform:translate(-50%,0)}
.toast i{width:18px;height:18px;border-radius:50%;background:var(--geel);color:var(--inkt);font-style:normal;display:grid;place-items:center;font-size:.7rem;font-weight:800}

/* ---------- landingspagina ---------- */
.pagina-kop{background:var(--navy);color:#fff;padding-block:clamp(1.8rem,4vw,2.8rem)}
.pagina-kop .label{color:var(--geel);display:block;margin-bottom:.5rem}
.pagina-kop h1{font-size:clamp(2rem,4.2vw,3rem);margin-bottom:.4rem}
.pagina-kop p{color:#cfdcec;max-width:56ch}
.hero-embleem{display:grid;justify-items:center;gap:.6rem;text-align:center}
.hero-embleem img{width:clamp(170px,20vw,260px);height:auto;border-radius:50%;box-shadow:0 18px 48px rgba(0,0,0,.4);
  background:#fff}
.mono-klein{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#e2eaf3;
  text-shadow:0 1px 10px rgba(0,0,0,.6)}
@media(max-width:959px){.hero-embleem{justify-items:start;text-align:left}}
.vindt{display:grid;gap:1rem}
@media(min-width:760px){.vindt{grid-template-columns:repeat(3,1fr)}}
.vindt-tegel{background:var(--wit);border:1px solid var(--lijn);border-radius:calc(var(--hoek) * 1.4);padding:1.5rem 1.4rem 1.4rem;
  text-decoration:none;color:inherit;display:grid;gap:.5rem;align-content:start;transition:border-color .15s,box-shadow .15s}
.vindt-tegel:hover{border-color:var(--navy);box-shadow:0 10px 26px rgba(8,42,79,.1)}
.vindt-tegel .nr{font-family:Outfit,sans-serif;font-weight:800;font-size:2rem;line-height:1;color:var(--geel)}
.vindt-tegel h3{font-size:1.25rem}
.vindt-tegel p{color:var(--inkt-2);font-size:.95rem}
.vindt-knop{margin-top:.4rem;font-weight:800;color:var(--navy)}
/* welkomstblok: profielkaart + verhaal */
.intro2{display:grid;gap:2rem}
@media(min-width:900px){.intro2{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:3.5rem;align-items:start}}
.profiel{background:var(--wit);border:1px solid var(--lijn);border-radius:calc(var(--hoek) * 2);overflow:hidden}
@media(min-width:900px){.profiel{position:sticky;top:126px}}
.profiel-kop{background:var(--navy);color:#fff;padding:2rem 1.5rem 1.4rem;text-align:center;display:grid;justify-items:center;gap:.15rem}
.profiel-kop img{width:150px;height:150px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:4px solid var(--geel);
  margin-bottom:.7rem;background:#fff}
.profiel-kop b{font-family:Outfit,sans-serif;font-size:1.3rem;letter-spacing:-.01em}
.profiel-kop span{color:#cfdcec;font-size:.85rem}
.disciplines{list-style:none;margin:0;padding:1rem 1.5rem;display:flex;flex-wrap:wrap;gap:.4rem;border-bottom:1px solid var(--lijn)}
.disciplines li{border:1.5px solid var(--lijn-fel);border-radius:999px;padding:.22rem .75rem;font-size:.82rem;font-weight:700;color:var(--navy)}
.record{padding:1.2rem 1.5rem 1.5rem;display:grid;gap:.1rem}
.record b{font-family:Outfit,sans-serif;font-weight:800;font-size:3.2rem;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.record span:last-child{color:var(--inkt-2);font-size:.88rem;line-height:1.45}
.verhaal .label{display:block;margin-bottom:.4rem}
.verhaal h2{margin-bottom:1rem}
.verhaal > p{color:var(--inkt-2);font-size:1.04rem;max-width:60ch}
.verhaal > p + p{margin-top:.8rem}
.citaat2{margin:1.5rem 0;padding:1.1rem 1.4rem 1.1rem 1.5rem;border-left:4px solid var(--geel);background:var(--navy-licht);
  border-radius:0 12px 12px 0}
.citaat2 p{font-family:Outfit,sans-serif;font-weight:600;font-size:1.22rem;line-height:1.4;color:var(--navy-diep);margin:0;max-width:none}
.citaat2 cite{display:block;margin-top:.5rem;font-style:normal;font-size:.82rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--inkt-2)}
.tijdlijn{list-style:none;margin:1.6rem 0 0;padding:0;border-top:1px solid var(--lijn)}
.tijdlijn-rest{margin-top:0;border-top:0}
.tijdlijn li{display:grid;grid-template-columns:5.2rem minmax(0,1fr) auto 6rem;gap:.8rem;padding:.7rem .4rem;
  border-bottom:1px solid var(--lijn);align-items:center;font-size:.95rem}
.tijdlijn .jaar{font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.tijdlijn .wat{font-weight:600}
.tijdlijn .wat small{display:block;color:var(--inkt-2);font-size:.8rem;font-weight:500}
.plek{justify-self:end;min-width:2.6rem;text-align:center;border-radius:999px;padding:.2rem .55rem;font-size:.78rem;font-weight:800;
  background:var(--grijs);color:var(--inkt-2);border:1px solid var(--lijn)}
.plek-1{background:var(--geel);color:var(--inkt);border-color:var(--geel)}
.plek-2{background:#e9ecef;color:#3c4550;border-color:#d5dae0}
.plek-3{background:#f3e3d3;color:#7a4a1e;border-color:#e6cdb5}
.moy{text-align:right;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.moy::after{content:" moy.";font-size:.7rem;font-weight:600;color:var(--inkt-2)}
.moy-noot{font-weight:600;color:var(--inkt-2)}
.moy-noot::after{content:none}
.tijdlijn-noot{margin-top:.6rem;color:var(--inkt-2);font-size:.82rem}
.record .klein{font-size:1rem;color:var(--navy)}
.verhaal-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
/* telefoon: compactere blokken */
@media(max-width:600px){
  .hero{min-height:min(100vh,820px)}
  .hero>img{object-position:44% 18%;transform:none}
  .hero::after{background:linear-gradient(to top,rgba(8,42,79,.97) 0%,rgba(8,42,79,.9) 30%,rgba(8,42,79,.5) 52%,rgba(8,42,79,.05) 78%,rgba(8,42,79,0) 100%)}
  .hero-inhoud{padding-top:min(38vh,300px)}
  .hero-tekst p{font-size:1rem}
  /* telefoon: alleen het logo, groot en gecentreerd; de regel eronder vervalt */
  .hero-embleem{grid-template-columns:1fr;justify-items:center;text-align:center;margin-top:.4rem}
  .hero-embleem img{width:150px;box-shadow:0 12px 32px rgba(0,0,0,.4)}
  .hero-embleem .mono-klein{display:none}
  .uitgelicht-foto{min-height:0;padding:1rem}
  .uitgelicht-foto img{width:min(100%,240px)}
  .profiel-kop img{width:120px;height:120px}
  .record b{font-size:2.6rem}
  .tijdlijn li{grid-template-columns:4.4rem minmax(0,1fr) auto;gap:.5rem;font-size:.9rem;row-gap:.2rem}
  .tijdlijn .moy{grid-column:2/-1;text-align:left;font-size:.85rem}
  .film.groot .film-titel{font-size:1rem}
  .video-item{grid-template-columns:88px 1fr;font-size:.82rem}
  .video-item img{width:88px}
  .cijferbalk b{font-size:2.2rem}
  /* blauwe balk: op de telefoon alleen de adviesregel */
  .usp-rij span:not(:last-child){display:none}
  /* voettekst: naam en adres bovenaan, de linkkolommen twee naast elkaar */
  .voet-grid{grid-template-columns:1fr 1fr;gap:1.4rem 1rem}
}
.intro-grid{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.intro-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3.5rem}}

.films{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.films{grid-template-columns:repeat(3,1fr)}}
.film{position:relative;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--hoek);overflow:hidden}
.film img{width:100%;aspect-ratio:16/9;object-fit:cover}
.film iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.film-knop{position:absolute;inset:0 0 auto 0;aspect-ratio:16/9;width:100%;border:0;background:linear-gradient(to top,rgba(8,42,79,.55),rgba(8,42,79,0) 60%);
  cursor:pointer;display:grid;place-items:center;color:var(--inkt)}
.speel{width:56px;height:56px;border-radius:50%;background:var(--geel);display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .15s}
.speel svg{margin-left:3px}
.film-knop:hover .speel{transform:scale(1.08)}
.film-titel{padding:.8rem .9rem .9rem;font-weight:700;font-size:.9rem;line-height:1.35}
.film.speelt .film-knop{display:none}
/* één grote video in een box, de andere als lijst ernaast */
.video-box{display:grid;gap:1rem;background:var(--wit);border:1px solid var(--lijn);border-radius:calc(var(--hoek) * 2);
  padding:1rem;box-shadow:0 12px 34px rgba(8,42,79,.08)}
@media(min-width:900px){.video-box{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);padding:1.2rem}}
.film.groot{border:0;border-radius:var(--hoek);background:var(--navy-diep)}
.film.groot .film-titel{font-family:Outfit,sans-serif;font-size:1.15rem;padding:1rem 1.1rem 1.1rem;color:#fff}
.film.groot .speel{width:72px;height:72px}
.film.groot .speel svg{width:24px;height:28px}
.video-lijst{display:grid;gap:.35rem;align-content:start}
.video-lijst .label{padding:.2rem .5rem .4rem}
.video-item{display:grid;grid-template-columns:104px 1fr;gap:.75rem;align-items:center;text-align:left;background:none;
  border:1px solid transparent;border-radius:var(--hoek);padding:.45rem;cursor:pointer;color:var(--inkt);font-weight:600;
  font-size:.86rem;line-height:1.3;transition:background-color .15s,border-color .15s}
.video-item img{width:104px;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.video-item:hover{background:var(--grijs);border-color:var(--lijn)}
.video-item[aria-current="true"]{background:var(--navy-licht);border-color:var(--navy)}
.video-lijst .knop{margin-top:.6rem;justify-self:start}
.kanaal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.5rem;margin-top:1.4rem;
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--hoek);padding:1rem 1.2rem}
.kanaal b{font-family:Outfit,sans-serif}
.kanaal span{color:var(--inkt-2);font-size:.92rem}

.kaart-grid{display:grid;gap:1rem}
@media(min-width:900px){.kaart-grid{grid-template-columns:.8fr 1.2fr}}
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:calc(var(--hoek) * 2);overflow:hidden;min-height:380px;position:relative}
.kaart iframe{width:100%;height:100%;min-height:380px;border:0;display:block}
.kaart-stil{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:2rem;
  background:radial-gradient(circle at 50% 40%,#e6eef8 0 30%,#d3dfee 100%);color:var(--inkt-2)}
.kaart-stil b{display:block;font-family:Outfit,sans-serif;font-size:1.2rem;color:var(--navy);margin-bottom:.4rem}
.kaart-stil .speld{width:54px;height:54px;border-radius:50% 50% 50% 0;background:var(--rood);transform:rotate(-45deg);
  margin:0 auto 1.2rem;display:grid;place-items:center}
.kaart-stil .speld i{width:20px;height:20px;border-radius:50%;background:#fff;display:block}
.adres{display:grid;gap:.9rem;align-content:start}
.adres .paneel{padding:1.4rem}
.adres h3{font-family:Outfit,sans-serif;font-size:1.2rem;margin-bottom:.4rem}
.adres p{color:var(--inkt-2)}
.adres .groot{font-family:Outfit,sans-serif;font-weight:700;font-size:1.15rem;color:var(--inkt)}
.adres a.knop{margin-top:.6rem}

/* ---------- AI-hulpje ---------- */
.hulp-knop{position:fixed;right:1rem;bottom:1rem;z-index:70;display:inline-flex;align-items:center;gap:.5rem;
  background:var(--navy);color:#fff;border:0;border-radius:999px;padding:.8rem 1.15rem .8rem .95rem;font-weight:800;font-size:.92rem;
  cursor:pointer;box-shadow:0 12px 30px rgba(8,42,79,.3);transition:transform .15s,background-color .15s}
.hulp-knop:hover{background:var(--navy-diep);transform:translateY(-1px)}
.hulp-knop[hidden]{display:none}
/* op eigen hosting iets hoger, boven een eventuele hostingbadge */
body.gehost .hulp-knop{bottom:4.4rem}
body.gehost .hulp{bottom:4.4rem;max-height:min(640px,calc(100vh - 5.4rem))}
@media(max-width:600px){.hulp-knop span{display:none}.hulp-knop{padding:.85rem;bottom:.9rem;right:.9rem}}
.hulp{position:fixed;right:1rem;bottom:1rem;z-index:75;width:min(400px,calc(100vw - 2rem));max-height:min(640px,calc(100vh - 2rem));
  background:var(--wit);border:1px solid var(--lijn);border-radius:calc(var(--hoek) * 1.6);box-shadow:0 24px 60px rgba(8,42,79,.28);
  display:flex;flex-direction:column;overflow:hidden}
.hulp[hidden]{display:none}
.hulp-kop{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.8rem .9rem;background:var(--navy);color:#fff}
.hulp-kop img{width:34px;height:34px;border-radius:50%;background:#fff}
.hulp-kop b{font-family:Outfit,sans-serif;font-size:1rem;display:block;line-height:1.15}
.hulp-kop small{color:#cfdcec;font-size:.76rem}
.hulp-sluit{background:rgba(255,255,255,.14);border:0;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.hulp-sluit:hover{background:rgba(255,255,255,.26)}
.hulp-lijst{flex:1;overflow:auto;padding:.9rem;display:flex;flex-direction:column;gap:.55rem;background:var(--grijs)}
.bel{max-width:88%;padding:.6rem .85rem;border-radius:14px;font-size:.93rem;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.bel-ai{background:var(--wit);border:1px solid var(--lijn);border-bottom-left-radius:4px;align-self:flex-start}
.bel-ik{background:var(--navy);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.bel-wacht{color:var(--inkt-2);font-style:italic}
.bel-fout{border-color:#e6b5ad;background:#fff4f2;color:#7a2d22}
.hulp-starters{display:flex;flex-direction:column;gap:.35rem;margin-top:.2rem}
.hulp-starters button{text-align:left;background:var(--wit);border:1.5px solid var(--lijn-fel);border-radius:999px;padding:.45rem .8rem;
  font-weight:700;font-size:.82rem;color:var(--navy);cursor:pointer}
.hulp-starters button:hover{border-color:var(--navy);background:var(--navy-licht)}
.hulp-vorm{display:flex;gap:.4rem;padding:.6rem;border-top:1px solid var(--lijn);background:var(--wit)}
.hulp-vorm input{flex:1;border:1.5px solid var(--lijn-fel);border-radius:999px;padding:.6rem .95rem;font:inherit;font-size:.93rem;min-width:0}
.hulp-vorm input:focus{border-color:var(--navy);outline:none}
.hulp-zend{width:42px;height:42px;border-radius:50%;border:0;background:var(--geel);color:var(--inkt);cursor:pointer;display:grid;place-items:center;flex:none}
.hulp-zend:hover{background:var(--geel-diep)}
.hulp-zend[disabled]{background:var(--lijn-fel);cursor:not-allowed}
.hulp-stop{border:1.5px solid var(--lijn-fel);background:var(--wit);border-radius:999px;padding:0 .8rem;font-weight:700;font-size:.82rem;cursor:pointer}
.hulp-stop[hidden]{display:none}
.hulp-noot{margin:0;padding:.45rem .9rem .6rem;font-size:.72rem;color:var(--inkt-2);background:var(--wit)}
@media(max-width:600px){.hulp{right:.5rem;bottom:.5rem;width:calc(100vw - 1rem);max-height:calc(100dvh - 1rem)}
  .hulp-lijst{min-height:180px}}

/* ---------- Biljartshop: laken-groen in plaats van navy ---------- */
:root{--navy:#155e3b;--navy-diep:#0d4229;--navy-licht:#e6f2ea;--grijs:#f3f6f4;--lijn:#dfe7e2;--lijn-fel:#c5d3ca}
/* binnenkomer: tekst naast een productfoto */
.hero2{padding-block:clamp(1.6rem,4vw,3rem) clamp(2rem,5vw,3.5rem)}
.hero2-grid{display:grid;gap:1.4rem;background:var(--navy);color:#fff;border-radius:calc(var(--hoek) * 2);overflow:hidden}
@media(min-width:900px){.hero2-grid{grid-template-columns:1.05fr .95fr;align-items:center}}
.hero2-tekst{padding:clamp(1.6rem,4vw,3.6rem)}
.hero2-tekst .label{color:var(--geel);display:block;margin-bottom:1rem}
.hero2-tekst h1{margin-bottom:1rem}
.hero2-tekst h1 em{font-style:normal;color:var(--geel)}
.hero2-tekst p{color:#d6e6dc;max-width:48ch;font-size:1.05rem;margin-bottom:1.6rem}
.hero2-foto{position:relative;min-height:320px;background:radial-gradient(circle at 60% 40%,#fff 0 58%,#e9efe9 100%);margin:1rem;
  border-radius:var(--hoek);display:grid;place-items:center;overflow:hidden}
@media(min-width:900px){.hero2-foto{margin:1.2rem 1.2rem 1.2rem 0;min-height:440px}}
.hero2-foto img{width:min(100%,560px);transform:rotate(-8deg) scale(1.15)}
.hero2-chip{position:absolute;left:1rem;bottom:1rem;background:var(--wit);color:var(--inkt);border-radius:999px;
  padding:.5rem .9rem .5rem .6rem;display:flex;align-items:center;gap:.6rem;font-size:.82rem;font-weight:700;box-shadow:0 8px 24px rgba(13,66,41,.18)}
.hero2-chip img{width:26px;height:26px;transform:none}
.hero2-chip .prijs{color:var(--navy)}

/* ===== Eigen thema Biljartshop: laken-groen en geel; Sora + Nunito Sans; rechte hoeken ===== */
:root{--navy:#155e3b;--navy-diep:#0d4229;--navy-licht:#e6f2ea;--geel:#f2c230;--geel-diep:#d9a80f;--rood:#d9382b;
  --wit:#ffffff;--grijs:#f3f6f4;--lijn:#dfe7e2;--lijn-fel:#c5d3ca;--inkt:#14201a;--inkt-2:#5b6a62;--hoek:2px}
body{font-family:"Nunito Sans",system-ui,sans-serif}
h1,h2,h3,h4,.merk b,.cijferbalk b,.hero2-chip .prijs,.product-onder .prijs,.uitgelicht-koop .prijs,.vindt-tegel .nr,.adres h3,.pagina-kop h1,.lade-kop h2{font-family:Sora,system-ui,sans-serif;font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,4.8vw,3.6rem);line-height:1.08}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
h3{font-size:1.2rem}
.label{color:var(--navy);letter-spacing:.18em;font-weight:700}
.knop{border-radius:0;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;padding:.8rem 1.4rem}
.knop-geel{background:var(--geel);color:var(--inkt)}.knop-geel:hover{background:var(--geel-diep)}
.knop-navy{background:var(--inkt);color:#fff}.knop-navy:hover{background:#000}
.knop-wit{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}.knop-wit:hover{background:rgba(255,255,255,.1);border-color:#fff}
.knop-lijn{border-color:var(--inkt)}
/* kop: rustige balk, menu in kapitalen met ruimte */
.usp{background:var(--grijs);color:var(--inkt);border-bottom:1px solid var(--lijn);font-weight:500}
.usp-rij span::before{color:var(--navy)}
.kop{background:var(--wit);border-bottom:1px solid var(--lijn)}
.merk img{border-radius:0}
.merk b{font-size:1.35rem}
.merk small{color:var(--navy);letter-spacing:.16em}
.zoek input{border-radius:0;border-color:var(--lijn-fel);background:var(--wit)}
.zoek input:focus{border-color:var(--navy)}
.hamb{border-radius:0}
.wagen.knop-navy{border-radius:0;background:var(--navy)}
.wagen .tel{background:var(--rood);color:#fff;border-radius:0}
.nav{border-top:1px solid var(--lijn);background:var(--wit)}
.nav-rij{justify-content:center;gap:2.2rem}
.nav-rij a{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt);border-bottom-width:2px;padding:.85rem 0}
.nav-rij a:hover,.nav-rij a.uit{color:var(--navy);border-color:var(--navy)}
@media(max-width:820px){.nav-rij{justify-content:flex-start}}
/* binnenkomer: tekst links, de keu rechts in het groene vlak; rechte hoeken */
.hero2-grid{border-radius:0}
.hero2-tekst .label{color:var(--geel)}
.hero2-tekst h1 em{color:var(--geel);font-style:normal}
.hero2-tekst p{color:#d6e6dc}
.hero2-foto{border-radius:0;background:#fff}
.hero2-chip{border-radius:0;border:1px solid var(--lijn-fel);box-shadow:none;background:var(--wit);white-space:nowrap}
.hero2-chip .prijs{color:var(--navy);white-space:nowrap;font-family:Sora,sans-serif;font-weight:700;font-size:.9rem;padding-right:.2rem}
.hero2-chip{padding:.5rem 1rem .5rem .6rem;overflow:visible}
.cat img{background:transparent}
/* tegels zonder kaders: cijfer in schreef, lijn erboven */
.vindt{gap:0;border-top:1px solid var(--inkt)}
.sectiekop + .vindt{border-top:0}   /* de sectiekop heeft al een streep eronder */
.vindt-tegel{background:transparent;border:0;border-radius:0;padding:1.6rem 1.6rem 1.6rem 0;box-shadow:none !important}
@media(min-width:760px){.vindt-tegel + .vindt-tegel{border-left:1px solid var(--lijn);padding-left:1.6rem}}
.vindt-tegel .nr{color:var(--navy);font-size:2.6rem}
.vindt-tegel:hover h3{color:var(--navy)}
.vindt-knop{color:var(--navy);text-transform:uppercase;font-size:.78rem;letter-spacing:.12em}
.sectiekop{border-bottom:1px solid var(--inkt);padding-bottom:.9rem}
/* producten: zand, geen schaduw, rechte hoeken */
.product,.cat,.uitgelicht,.paneel,.kaart,.trust,.vindt-tegel,form,.lade,.kaartje{border-radius:0}
.product{border-color:var(--lijn);box-shadow:none !important}
.product:hover{border-color:var(--navy)}
.product-foto{background:var(--grijs)}
.product-tekst .merknaam{color:var(--navy)}
.product-onder .prijs{font-size:1.25rem}
.koop{border-radius:0;background:var(--navy)}.koop:hover{background:var(--navy-diep)}
.tag{border-radius:0;letter-spacing:.1em}
.tag-geel{background:var(--geel);color:var(--inkt)}
.tag-navy{background:var(--inkt);color:#fff}
.filter{border-radius:0;letter-spacing:.08em;text-transform:uppercase;font-size:.74rem}
.filter[aria-pressed="true"]{background:var(--navy);border-color:var(--navy)}
.cat{box-shadow:none !important}.cat:hover{border-color:var(--navy)}
.hardheid{border-radius:0;background:var(--grijs)}
.hardheid[aria-pressed="true"]{border-color:var(--navy);background:var(--navy-licht)}
.uitgelicht-foto{background:var(--grijs)}
.uitgelicht-koop .prijs{font-size:1.7rem}
.trust{border-radius:0}.trust svg{color:var(--navy)}
.paneel-navy{background:var(--inkt);border-color:var(--inkt)}
.paneel-navy .label{color:var(--geel)}
.paneel-navy .dealers li{border-color:#3d342f}
.dealers li{border-radius:0}
.brief{background:var(--grijs);border:1px solid var(--lijn);border-radius:0}
.brief p{color:var(--inkt-2)}
.brief input{border:1px solid var(--lijn-fel);border-radius:0}
.brief .knop-navy{background:var(--navy)}
input,select,textarea{border-radius:0}
.pagina-kop{background:var(--navy)}
.pagina-kop .label{color:var(--geel)}
.pagina-kop p{color:#d6e6dc}
.voet{background:var(--inkt)}
.voet b{font-family:Sora,sans-serif;font-weight:700}
.lade-kop{background:var(--navy)}.lade-kop h2{color:#fff}.lade-sluit{color:#fff}
.lade-voet .knop-geel{background:var(--geel);color:var(--inkt)}
.toast{border-radius:0}.toast i{background:var(--geel);border-radius:0}
.hulp-knop{border-radius:0;background:var(--navy)}
.hulp{border-radius:0}.hulp-kop{background:var(--navy)}
.hulp-zend,.hulp-stop{border-radius:0}
/* telefoon: compacte kop, nooit breder dan het scherm */
html,body{max-width:100%;overflow-x:clip}
@media(max-width:820px){
  .kop-rij{grid-template-columns:minmax(0,1fr) auto;gap:.6rem;min-height:60px}
  .merk{min-width:0;gap:.5rem}
  .merk img{width:38px;height:38px;flex:none}
  .merk b{font-size:1rem;line-height:1.1;display:block;white-space:normal}
  .merk small{font-size:.58rem;letter-spacing:.1em;margin-top:.1rem}
  .kop-acties{flex:none;gap:.35rem}
  .hamb{width:38px;height:38px}
  .wagen.knop-navy{padding:.5rem .65rem;min-width:0}
  .hulp-knop{right:.8rem;bottom:.8rem}
}
@media(max-width:400px){
  .merk small{display:none}
  .merk b{font-size:.95rem}
}

/* ---- afrekenen en beheer-koppelingen (aanvulling op het demo-ontwerp, zelfde tokens) ---- */
.afreken{align-items:start}
.velden{display:grid;gap:.7rem;margin-top:.8rem}
.velden label{display:block;font-weight:700;font-size:.9rem}
.velden label input,.velden label select,.velden label textarea{display:block;margin-top:.25rem}
.velden label small{font-weight:400;color:var(--inkt-2)}
.velden input,.velden select,.velden textarea{font:inherit;padding:.65rem .8rem;border:1.5px solid var(--lijn,#d9e2dc);border-radius:var(--hoek,2px);background:#fff;width:100%}
.velden input:focus,.velden select:focus,.velden textarea:focus{outline:2px solid var(--geel,#F2C230);outline-offset:1px}
.rij2{display:grid;grid-template-columns:1fr 2fr;gap:.7rem}
.overzicht .regel{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--lijn,#d9e2dc)}
.overzicht .regel img{width:56px;height:56px;object-fit:cover;border-radius:var(--hoek,2px)}
.overzicht .regel b{display:block}.overzicht .regel small{color:var(--inkt-2)}
.afreken-totaal{margin-top:.8rem}.afreken-totaal .rij{display:flex;justify-content:space-between;padding:.25rem 0}
.afreken-totaal .totaal{font-weight:800;font-size:1.1rem;border-top:2px solid var(--navy,#155E3B);margin-top:.4rem;padding-top:.5rem}
.stalen .keuze{font:inherit;font-size:.82rem;padding:.3rem .4rem;border:1.5px solid var(--lijn,#d9e2dc);border-radius:var(--hoek,2px);background:#fff;max-width:100%}
@media (max-width:600px){.rij2{grid-template-columns:1fr}}

/* productpagina en klikbare kaarten */
.product h3 a{color:inherit;text-decoration:none}.product h3 a:hover{text-decoration:underline}
a.product-foto{display:block}
.detail{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:start}
.detail-foto{background:#fff;border:1px solid var(--lijn,#d9e2dc);padding:1.5rem}.detail-foto img{width:100%;height:auto;display:block}
.detail-tekst h1{margin:.2rem 0 .8rem;font-size:clamp(1.8rem,3vw,2.6rem)}.detail-tekst .stalen{margin:.6rem 0}.detail-tekst .omschr{font-size:1.05rem;line-height:1.6}
.detail-keuzes{margin:1.2rem 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem 1rem}.detail-keuze{margin:0}.detail-keuzes .label{grid-column:1/-1}.detail-keuze label{display:block;font-weight:700;margin-bottom:.4rem}
.detail-keuze select{font:inherit;padding:.6rem .8rem;border:1.5px solid var(--lijn,#d9e2dc);border-radius:var(--hoek,2px);background:#fff;width:100%}
.detail-koop{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;margin-top:1.2rem}
.detail-koop .prijs{font-family:Sora,sans-serif;font-weight:800;font-size:1.8rem}.detail-koop .prijs small{display:block;font-size:.8rem;font-weight:400;color:var(--inkt-2)}
.pom-hulp{margin:1.2rem 0 0;padding:.8rem 1rem;background:var(--grijs,#f4f6f5);border-left:3px solid var(--geel,#F2C230);font-size:.9rem;line-height:1.45}   /* pomerans: hardheid per spelsoort */
.pom-hulp dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;margin:.4rem 0 .5rem}.pom-hulp dt{font-weight:700}.pom-hulp dd{margin:0;color:var(--inkt-2)}
.pom-hulp small{display:block;color:var(--inkt-2)}
@media(max-width:480px){.pom-hulp dl{grid-template-columns:1fr}.pom-hulp dd{margin-bottom:.3rem}}
.detail-punten{margin:1.2rem 0 0;padding:0;list-style:none;color:var(--inkt-2);font-size:.92rem}.detail-punten li{padding:.2rem 0}
@media (max-width:820px){.detail{grid-template-columns:1fr}}

a.koop{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* pagina's, nieuws, reviews, retour */
.tekst{max-width:760px}.tekst h2{margin:1.6rem 0 .5rem}.tekst p,.tekst li{font-size:1.05rem;line-height:1.65}.tekst ul{padding-left:1.2rem}
.sterren{color:#e0a800;letter-spacing:1px}
.prijs s{color:var(--inkt-2);font-weight:400;margin-right:.3rem}
.retour-regel{display:flex;gap:.6rem;align-items:center;padding:.4rem 0}.retour-regel input[type=checkbox]{width:auto}

/* galerij en lichtbak */
.detail-foto a{display:block;cursor:zoom-in}
.galerij{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.galerij a{width:72px;height:72px;border:1.5px solid var(--lijn,#d9e2dc);background:#fff;padding:4px;display:block}.galerij a.uit{border-color:var(--navy,#155E3B)}
.galerij img{width:100%;height:100%;object-fit:contain;display:block}
.lichtbak[hidden]{display:none}
.lichtbak{position:fixed;inset:0;background:rgba(10,20,15,.92);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1.5rem;overflow:hidden}
.lichtbak img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;padding:1rem;cursor:zoom-in;transition:transform .2s}
/* klik op de vergrote foto: nog een stap dichterbij */
.lichtbak.lb-zoom img{cursor:zoom-out;transition:none}
.lichtbak.lb-zoom{padding:0}
.lichtbak button{position:absolute;background:none;border:0;color:#fff;font-size:2.4rem;cursor:pointer;padding:.5rem 1rem;line-height:1}
.lb-sluit{top:.6rem;right:.8rem}.lb-vorige{left:.4rem;top:50%;transform:translateY(-50%)}.lb-volgende{right:.4rem;top:50%;transform:translateY(-50%)}
.tekst h3{margin:1.2rem 0 .4rem}.tekst blockquote{border-left:3px solid var(--geel,#F2C230);margin:1rem 0;padding:.2rem 1rem;color:var(--inkt-2)}
@media (max-width:600px){.lichtbak{padding:2.5rem .5rem}}

/* keuzes die bij elkaar horen (Topeinde 1 en 2) */
.detail-paar{grid-column:1/-1}
.paar-kop{display:block;font-weight:700;margin-bottom:.4rem}
.paar-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1rem}
.paar-grid .detail-keuze label{white-space:nowrap}
.detail-keuze select{white-space:nowrap;text-overflow:ellipsis}
@media (max-width:480px){.paar-grid{grid-template-columns:1fr}}

/* foto en prijskaartje in de kop klikbaar */
.hero2-link{display:block;cursor:pointer}.hero2-link img{transition:transform .25s}.hero2-link:hover img{transform:scale(1.03)}
a.hero2-chip{text-decoration:none;color:var(--inkt);cursor:pointer}a.hero2-chip:hover{box-shadow:0 8px 22px rgba(0,0,0,.18)}

/* reviews onder de foto + popup */
.reviews-knop{display:flex;align-items:center;gap:.5rem;width:100%;margin-top:.8rem;padding:.7rem .9rem;background:#fff;border:1.5px solid var(--lijn,#d9e2dc);border-radius:var(--hoek,2px);font:inherit;cursor:pointer;text-align:left}
.reviews-knop:hover{border-color:var(--navy,#155E3B)}.reviews-knop span{color:var(--inkt-2);font-size:.92rem}.reviews-knop b{font-family:Sora,sans-serif}
.popup[hidden]{display:none}
.popup{position:fixed;inset:0;background:rgba(10,20,15,.6);z-index:900;display:flex;align-items:flex-start;justify-content:center;padding:3rem 1rem;overflow-y:auto}
.popup-vel{background:var(--achtergrond,#f4f7f5);max-width:960px;width:100%;padding:1.6rem;position:relative;border-radius:var(--hoek,2px)}
.popup-sluit{position:absolute;top:.5rem;right:.7rem;background:none;border:0;font-size:2rem;line-height:1;cursor:pointer;color:var(--inkt,#17251d)}
.popup-twee{display:grid;grid-template-columns:1.1fr 1fr;gap:1.4rem;align-items:start}
.review{background:#fff;border:1px solid var(--lijn,#d9e2dc);padding:.8rem 1rem;margin-bottom:.7rem}.review small{color:var(--inkt-2)}.review p{margin:.4rem 0 0}
@media (max-width:760px){.popup{padding:1rem .5rem}.popup-twee{grid-template-columns:1fr}}

.popup-vel h2{font-size:1.5rem;margin:0 2rem 1rem 0}

/* samengestelde keuzes netjes onder elkaar in wagen, afrekenen en bedankpagina */
.regel small{display:block;white-space:pre-line;line-height:1.35;margin-top:.15rem}
.regel .aantal{display:inline-flex}
.regel > div{min-width:0}

.melding-blok{padding-top:1.2rem}.melding-blok .paneel{font-weight:600}

/* bestellingen op Mijn account klikbaar */
a.bestel-link{text-decoration:none;color:inherit;cursor:pointer}a.bestel-link:hover b{text-decoration:underline}a.bestel-link .pijl{color:var(--navy);font-size:1.3rem;margin-left:.3rem}

/* foto's bij nieuws en pagina's */
.nieuws-foto{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;margin-bottom:.8rem;background:#f3f5f4}
.pagina-hoofdfoto{display:block;max-width:760px;margin-bottom:1.6rem}
.pagina-hoofdfoto img{width:100%;max-height:480px;object-fit:cover;display:block}
.pagina-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.6rem;max-width:760px;margin-top:2rem}
.pagina-fotos a{display:block;aspect-ratio:1;background:#f3f5f4;border:1px solid var(--lijn)}
.pagina-fotos img{width:100%;height:100%;object-fit:cover;display:block}

/* ================= kop van de startpagina als carambolebiljart ================= */
.biljart{--rand:clamp(16px,2.6vw,34px);--band:clamp(7px,.9vw,12px)}
/* houten rand met nerf */
.biljart .tafel{position:relative;padding:var(--rand);border-radius:clamp(8px,1.2vw,16px);
  box-shadow:0 30px 60px -20px rgba(20,12,4,.55),0 8px 18px rgba(20,12,4,.25),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 2px 0 rgba(255,255,255,.12)}
/* parelmoer diamanten: 7 op de lange zijden, 3 op de korte zijden */
/* het hout als lijst met een open midden, zodat er een foto doorheen kan vallen */
.biljart .hout{position:absolute;inset:0;z-index:0;border-radius:inherit;padding:var(--rand);
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 18%,rgba(0,0,0,0) 82%,rgba(0,0,0,.25)),
    repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 2px,transparent 2px 9px,rgba(255,255,255,.04) 9px 11px,transparent 11px 23px),
    repeating-linear-gradient(90deg,transparent 0 60px,rgba(0,0,0,.08) 60px 64px,transparent 64px 140px),
    linear-gradient(90deg,#4a2a14,#6e4020 30%,#5b3419 55%,#74462a 80%,#4f2d16);
  -webkit-mask:linear-gradient(#000 0 0) border-box,linear-gradient(#000 0 0) content-box;-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) border-box,linear-gradient(#000 0 0) content-box;mask-composite:exclude}
.biljart .tafel::before,.biljart .tafel::after{content:"";position:absolute;pointer-events:none;z-index:2}
.biljart .tafel::before{top:0;bottom:0;left:calc(var(--rand) + (100% - 2 * var(--rand)) / 16);right:calc(var(--rand) + (100% - 2 * var(--rand)) / 16);
  background:
    radial-gradient(circle,#fbf5e4 0 2.2px,#d9ccaa 2.8px,transparent 3.4px) top/calc(100% / 7) var(--rand) repeat-x,
    radial-gradient(circle,#fbf5e4 0 2.2px,#d9ccaa 2.8px,transparent 3.4px) bottom/calc(100% / 7) var(--rand) repeat-x}
.biljart .tafel::after{left:0;right:0;top:calc(var(--rand) + (100% - 2 * var(--rand)) / 8);bottom:calc(var(--rand) + (100% - 2 * var(--rand)) / 8);
  background:
    radial-gradient(circle,#fbf5e4 0 2.2px,#d9ccaa 2.8px,transparent 3.4px) left/var(--rand) calc(100% / 3) repeat-y,
    radial-gradient(circle,#fbf5e4 0 2.2px,#d9ccaa 2.8px,transparent 3.4px) right/var(--rand) calc(100% / 3) repeat-y}
/* laken met band en licht van de biljartlamp */
.biljart .hero2-grid{position:relative;isolation:isolate;border-radius:2px;
  background:
    radial-gradient(ellipse 70% 80% at 50% 42%,rgba(255,255,240,.14),rgba(255,255,240,0) 70%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0 2px,rgba(0,0,0,.018) 2px 4px),
    radial-gradient(ellipse at 50% 45%,var(--laken-licht,#23804d),var(--laken,#1a6a3f) 55%,var(--laken-diep,#11502f));
  box-shadow:inset 0 0 0 var(--band) var(--laken-band,#0f4a2b),inset 0 0 0 calc(var(--band) + 1px) rgba(0,0,0,.35),inset 0 calc(var(--band) + 6px) 18px -8px rgba(0,0,0,.45),inset 0 0 60px rgba(0,0,0,.28)}
.biljart .hero2-tekst{position:relative;z-index:2;text-shadow:0 1px 10px rgba(0,0,0,.25)}
.biljart .hero2-tekst p{color:#e2f0e7}
/* productfoto als kaartje op het laken, recht */
.biljart .hero2-foto{position:relative;z-index:2;background:#fff;margin:clamp(1.2rem,3vw,2.4rem);
  box-shadow:0 18px 30px -12px rgba(0,0,0,.55),0 3px 8px rgba(0,0,0,.25)}
/* driebandenstoot in krijt */
.biljart .stoot{position:absolute;inset:var(--band);width:calc(100% - 2 * var(--band));height:calc(100% - 2 * var(--band));z-index:1;pointer-events:none;overflow:visible}
.biljart .stoot polyline{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.6;stroke-dasharray:2 7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* ballen */
.biljart .bal{position:absolute;z-index:3;width:clamp(20px,2.3vw,30px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  box-shadow:4px 7px 9px rgba(0,0,0,.45),inset -3px -4px 7px rgba(0,0,0,.28)}
.biljart .bal-wit{left:calc(var(--band) + (100% - 2 * var(--band)) * .15);top:calc(var(--band) + (100% - 2 * var(--band)) * .90);background:radial-gradient(circle at 34% 30%,#fff 0 22%,#f1eee4 48%,#cfc9b8 100%)}
.biljart .bal-rood{left:calc(var(--band) + (100% - 2 * var(--band)) * .50);top:calc(var(--band) + (100% - 2 * var(--band)) * .86);background:radial-gradient(circle at 34% 30%,#ffb3a6 0 12%,#e0301f 45%,#8e140b 100%)}
.biljart .bal-geel{left:calc(var(--band) + (100% - 2 * var(--band)) * .39);top:calc(var(--band) + (100% - 2 * var(--band)) * .93);background:radial-gradient(circle at 34% 30%,#fff6c9 0 12%,#f2c230 45%,#a67a06 100%)}
@media(max-width:959px){.biljart .stoot{opacity:.7}.biljart .bal-wit{left:18%;top:52%}.biljart .bal-rood{left:82%;top:50%}.biljart .bal-geel{left:74%;top:46%}}
@media(prefers-reduced-motion:no-preference){.biljart .bal-wit{animation:bal-rol 1.1s cubic-bezier(.2,.7,.2,1) both .3s}}
@keyframes bal-rol{from{translate:-40px 30px;opacity:0}to{translate:0 0;opacity:1}}

/* demomodus: melding bovenaan */
.demo-balk{background:#17251d;color:#f3f6f4;font-size:.8rem;text-align:center;padding-block:.4rem}
.demo-balk b{color:var(--geel)}


/* Logo in de footer naast de naam, net als in de header: ".voet a" zette elke link op
   display:block en won het van .merk, waardoor het logo boven de naam kwam te staan. */
.voet a.merk{display:flex;align-items:center;padding:0}
.voet .merk b{display:block;line-height:1}

/* Subcategorieen: een tweede, kleinere rij onder de hoofdfilters, alleen zichtbaar bij de gekozen hoofdcategorie. */
.subfilters{margin-top:-.6rem}
.subfilters[hidden]{display:none}
.subfilters .filter{font-size:.68rem;padding:.35rem .8rem}
.subfilters .filter small{opacity:.6;margin-left:.2rem}

/* Merklogo's in het merkenblok: witte tegels, want de meeste logo's zijn voor een lichte achtergrond gemaakt. */
.merklogos{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.merklogos li{background:#fff;color:var(--inkt);display:grid;place-items:center;gap:.3rem;padding:.8rem .6rem .55rem;min-height:92px;text-align:center}
.merklogos img{max-width:100%;height:44px;object-fit:contain}
.merklogos b{font-family:Sora,sans-serif;font-size:1.05rem;line-height:44px}
.merklogos small{color:var(--inkt-2);font-size:.72rem;font-weight:600}

/* Op een telefoon stond de kop met het biljart en het product samen bijna 1000 pixels hoog: je
   moest scrollen voor je de eerste knop zag, en de tafel oogde uitgerekt. Onder de 900 pixels
   krijgen de tekst, de fotolijst en de randen daarom minder ruimte. */
@media(max-width:899px){
  .hero2{padding-block:1rem 1.4rem}
  .hero2-grid{gap:.7rem}
  .hero2-tekst{padding:1.2rem 1.2rem .2rem}
  .hero2-tekst .label{margin-bottom:.5rem}
  .hero2-tekst h1{font-size:clamp(1.7rem,7.5vw,2.3rem);margin-bottom:.6rem}
  .hero2-tekst p{font-size:.95rem;margin-bottom:1rem}
  .hero2-foto,.biljart .hero2-foto{min-height:0;aspect-ratio:16/11;margin:.9rem}
  .hero2-foto img{width:min(86%,320px);transform:rotate(-6deg) scale(1.06)}
  .biljart{--rand:12px;--band:6px}
  .hero-knoppen .knop{padding:.6rem 1rem}
}
/* De ballen lagen na het inkorten over de knop "Naar de webshop": op een telefoon horen ze in de
   smalle strook laken naast de tekst. */
@media(max-width:899px){
  .biljart .bal{width:18px}
  .biljart .bal-wit{left:7%;top:58%}
  .biljart .bal-geel{left:93%;top:40%}
  .biljart .bal-rood{left:90%;top:52%}
}
/* logo in de voet: rond, iets groter en met een dun randje zodat het op de donkere voet uitkomt */
.voet .merk{display:flex;align-items:center;gap:.8rem}   /* .voet a maakt links block; hier weer naast elkaar */
.voet .merk img{width:54px;height:54px;flex:none;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.22);background:rgba(255,255,255,.04)}
.voet .merk span{display:block}
.kop .merk img{border-radius:50%}

/* winkelfoto's van een demo-profiel: eerste foto groot, de rest ernaast */
.winkel-fotos{display:grid;gap:.8rem;grid-template-columns:repeat(2,1fr)}
.winkel-fotos a{display:block;background:var(--grijs);overflow:hidden;border-radius:calc(var(--hoek) * 1.2);aspect-ratio:3/2}
.winkel-fotos img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.winkel-fotos a:hover img{transform:scale(1.03)}
@media(min-width:900px){
  /* vier kleine foto's rechts, samen even hoog als de grote links */
  .winkel-fotos{grid-template-columns:repeat(4,1fr)}
  /* de foto zelf absoluut, zodat hij de rijhoogte niet opduwt: links en rechts precies even hoog */
  .winkel-fotos a:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;height:100%;position:relative}
  .winkel-fotos a:first-child img{position:absolute;inset:0}
}

/* winkelfoto van het bedrijf over de volle breedte achter de kop */
.hero2.met-kopfoto{position:relative;isolation:isolate}
.hero2.met-kopfoto::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;
  background-image:linear-gradient(180deg,rgba(10,14,12,.38),rgba(10,14,12,.14) 45%,rgba(10,14,12,.5)),var(--kopfoto);
  background-size:cover;background-position:center 32%;background-repeat:no-repeat}
.hero2.met-kopfoto{padding-block:clamp(2rem,5vw,3.6rem)}

/* met een winkelfoto achter de kop: geen laken, de houten rand omlijst de winkelfoto */
.biljart.met-kopfoto.door .hero2-grid{
  /* doorzichtig: de winkelfoto achter de kop valt door de open lijst heen */
  background:none;
  box-shadow:inset 0 0 0 var(--band) var(--laken-band-a,rgba(15,74,43,.55)),
    inset 0 0 0 calc(var(--band) + 1px) rgba(0,0,0,.35),
    inset 0 0 70px rgba(0,0,0,.35)}
/* effen kop (zonder biljart) met winkelfoto: het gekleurde vlak half doorzichtig */
.hero2.met-kopfoto.door .hero2-grid{background:
  linear-gradient(100deg,rgba(6,10,9,.72),rgba(6,10,9,.32) 42%,rgba(6,10,9,0) 70%),
  linear-gradient(100deg,var(--kop-a,rgba(18,80,50,.85)) 20%,var(--kop-a2,rgba(18,80,50,.45)))}
.hero2.met-kopfoto.door .hero2-foto{margin:clamp(1rem,2.5vw,2rem);box-shadow:0 18px 30px -12px rgba(0,0,0,.5),0 3px 8px rgba(0,0,0,.25)}
.biljart.met-kopfoto.door .hero2-grid{background:none}
/* tekst iets steviger op de foto */
.hero2.met-kopfoto.door .hero2-tekst{text-shadow:0 1px 14px rgba(0,0,0,.55)}
/* telefoons gaan wisselend om met vastgezette achtergronden: daar gewoon meescrollen */

/* winkelfoto achter de gekleurde kop van webshop-, pagina- en nieuwspagina's */
.pagina-kop{background-image:var(--kopfoto2,none);background-size:cover;background-position:center 62%;background-repeat:no-repeat}
.pagina-kop p{color:#dfe8e3}

/* logo bij het adres in "Kom langs in de winkel" */
.adres-merk{display:flex;align-items:center;gap:.7rem}
.adres-merk img{width:46px;height:46px;flex:none;object-fit:contain;border-radius:50%;background:#fff}
/* paginaknoppen onder lange lijsten */
.paginering{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin-top:1rem;font-weight:600;font-size:.9rem}.paginering a,.paginering span{display:inline-block;min-width:2.1rem;padding:.35rem .6rem;text-align:center;border:1.5px solid var(--lijn,#d9e2dc);border-radius:var(--hoek,4px);text-decoration:none;color:inherit;background:#fff}.paginering a:hover{border-color:var(--navy)}.paginering .nu{background:var(--navy);border-color:var(--navy);color:#fff}.paginering .uit{color:#aaa}.paginering .punt{border:0;background:none;min-width:auto}
/* nieuwsbrief: bevestiging op de plek van het formulier */
.brief-ok{margin:0;padding:.9rem 1.1rem;border-radius:var(--hoek);background:#e6f4ea;border:1px solid #b7dfc2;color:#1e5631;font-size:.95rem;line-height:1.5}

/* ---------- aanbiedingen (modules acties, deal, bundels) ---------- */
.product.actie{border-color:var(--rood);box-shadow:0 10px 26px rgba(217,56,43,.12)}
.tag-actie{background:var(--rood);color:#fff;display:inline-flex;align-items:center;gap:.4rem}
.tag-actie b{background:#fff;color:var(--rood);border-radius:999px;padding:0 .4rem;font-size:.68rem}
.prijs-actie{display:flex;flex-direction:column}
.prijs-actie .oud{font-size:.8rem;font-weight:600;color:var(--inkt-2);text-decoration:line-through}
.prijs-actie .nieuw{color:var(--rood);font-size:1.2rem}
.detail-koop .prijs-actie .nieuw{font-size:1.8rem}.detail-koop .prijs-actie .oud{font-size:1rem}
.bespaar{display:inline-block;margin-top:.35rem;font-size:.7rem;font-weight:800;color:var(--rood);background:#fdecea;border-radius:6px;padding:.15rem .45rem;align-self:flex-start}
.prijs-actie .tot{font-size:.7rem;color:var(--inkt-2);font-weight:600;margin-top:.3rem}
/* combideals */
.bundels{display:grid;gap:1rem}
@media(min-width:900px){.bundels{grid-template-columns:repeat(2,1fr)}.bundels-een{grid-template-columns:1fr}}
/* één combideal: over de volle breedte, met grotere foto's en prijs */
@media(min-width:900px){.bundels-een .bundel-kaart{grid-template-columns:1.3fr 1fr;padding:1.8rem 2rem;gap:2rem}.bundels-een .bundel-fotos figure{min-height:170px}.bundels-een .bundel-fotos img{max-height:150px}
  .bundels-een .bundel-tekst h3{font-size:1.5rem}.bundels-een .bundel-tekst p{font-size:1rem}.bundels-een .bundel-prijs .nu{font-size:2rem}}
.bundel-kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:calc(var(--hoek) * 2);padding:1.3rem;display:grid;gap:1rem;position:relative;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .15s,border-color .15s}
.bundel-kaart:hover{border-color:var(--lijn-fel);box-shadow:0 10px 26px rgba(8,42,79,.08)}
@media(min-width:600px){.bundel-kaart{grid-template-columns:1.1fr 1fr;align-items:center}}
.bundel-fotos{display:flex;align-items:center;gap:.5rem}
.bundel-fotos figure{margin:0;background:#f6f7f9;border-radius:var(--hoek);padding:.6rem;display:grid;place-items:center;flex:1;min-height:110px;position:relative}
.bundel-fotos img{max-width:100%;max-height:100px;object-fit:contain}
.bundel-fotos figure b{position:absolute;top:.3rem;right:.4rem;font-size:.7rem;color:var(--navy)}
.bundel-fotos .plus{font:800 1.3rem Outfit,sans-serif;color:var(--navy)}
.bundel-tekst h3{margin:0 0 .3rem;font-size:1.15rem;padding-right:2.4rem}   /* ruimte voor het hoeklint */
.bundel-tekst p{margin:0 0 .5rem;color:var(--inkt-2);font-size:.9rem}
.bundel-prijs{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.bundel-prijs .los{font-size:.85rem;color:var(--inkt-2)}.bundel-prijs .los s{font-weight:600}
.bundel-prijs .nu{font:800 1.6rem Outfit,sans-serif;color:var(--navy)}
.bundel-knop{display:block;margin-top:.6rem;font-weight:800;color:var(--navy);font-size:.9rem}
.lint{position:absolute;top:18px;right:-38px;transform:rotate(45deg);background:var(--geel);color:var(--inkt);font:800 .72rem Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:.35rem 3rem;box-shadow:0 4px 10px rgba(0,0,0,.12);pointer-events:none}
.cadeau{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:800;color:#1f7a4d;background:#e6f4ea;border-radius:6px;padding:.2rem .5rem;margin-top:.5rem}
/* combideal-pagina */
.bundel-pagina{display:grid;gap:1.2rem;align-items:start}
@media(min-width:900px){.bundel-pagina{grid-template-columns:1.4fr .8fr}}
.bundel-items{display:grid;gap:.6rem}
.bundel-item{display:grid;grid-template-columns:120px 1fr;gap:1.2rem;align-items:start;padding:1.1rem 1.3rem}
.bundel-item-foto{background:#f6f7f9;border-radius:var(--hoek);display:grid;place-items:center;padding:.6rem;min-height:110px}
.bundel-item-foto img{max-width:100%;max-height:110px;object-fit:contain}
.bundel-item h3{margin:.1rem 0 .3rem;font-size:1.1rem}.bundel-item h3 a{color:inherit;text-decoration:none}
.bundel-item .omschr{margin:0 0 .5rem;font-size:.9rem;color:var(--inkt-2)}
.bundel-keuzes{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.6rem;margin:.3rem 0 .5rem}
.bundel-keuzes label{display:grid;gap:.25rem;font-size:.8rem;font-weight:700}
.bundel-keuzes select{font:inherit;padding:.5rem .6rem;border:1.5px solid var(--lijn);border-radius:var(--hoek);background:#fff}
.bundel-plus{text-align:center;font:800 1.4rem Outfit,sans-serif;color:var(--navy);line-height:1}
.bundel-koop{position:relative;overflow:hidden;position:sticky;top:140px}
.bundel-koop .knop{width:100%;margin-top:1rem}
.bundel-koop .detail-punten{font-size:.85rem}
.regel-bundel{background:#fbfcfe}
@media(max-width:600px){.bundel-item{grid-template-columns:80px 1fr;gap:.8rem}}
/* dealerprijs */
.prijs.dealerprijs{color:#c8242b}
.prijs.dealerprijs small{color:var(--inkt-2)}
.dealer-label{display:inline-block;background:#c8242b;color:#fff;font-weight:800;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:.1rem .4rem;border-radius:3px;margin-right:.3rem;vertical-align:middle}
/* taalkeuze in de bovenbalk */
.usp-rij{display:flex;align-items:center;gap:.3rem 1.5rem;flex-wrap:wrap}
.usp-taal{display:flex;gap:.15rem;margin-left:auto;margin-right:.6rem;flex-shrink:0}
.usp-taal a{color:#a9bdd3;text-decoration:none;font-weight:800;font-size:.72rem;letter-spacing:.06em;padding:.3rem .45rem;border-radius:6px}
.usp-taal a:hover{color:#fff}
.usp-taal a.uit{background:rgba(255,255,255,.14);color:#fff}

/* ---------- winkel met de categorieën in een zijbalk ---------- */
.shop-rij{display:grid;gap:1.6rem}
@media(min-width:900px){.shop-rij{grid-template-columns:230px minmax(0,1fr);align-items:start}}
.shop-producten{min-width:0}
/* naast de zijbalk is er minder breedte: hoogstens drie kaarten naast elkaar */
@media(min-width:1000px){.shop-producten .raster{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1400px){.shop-producten .raster{grid-template-columns:repeat(4,1fr)}}
.filterknop{display:block;width:100%;margin-bottom:.9rem;border:1.5px solid var(--lijn-fel);background:var(--wit);border-radius:var(--hoek);padding:.65rem 1rem;font:inherit;font-weight:700;cursor:pointer;text-align:left}
.filterknop::after{content:"▾";float:right;opacity:.6}
@media(min-width:900px){.filterknop{display:none}}
.zijcat{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--hoek);padding:.9rem 0}
@media(min-width:900px){
  /* blijft in beeld tijdens het scrollen; is de lijst langer dan het scherm, dan scrollt hij vanbinnen mee */
  .zijcat{position:sticky;top:120px;max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:var(--lijn) transparent}
  .zijcat::-webkit-scrollbar{width:8px}
  .zijcat::-webkit-scrollbar-thumb{background:var(--lijn);border-radius:8px}
  .zijcat::-webkit-scrollbar-track{background:transparent}
}
@media(max-width:899px){.zijcat{display:none}.zijcat.open{display:block;margin-bottom:1rem}}
.zijcat h3{margin:0 0 .5rem;padding:0 1.1rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-2)}
.zijcat .filters{display:block;margin:0}
.zijcat .filters[hidden]{display:none}   /* merken pas tonen als de categorie gekozen is */
.zijcat .filter{display:flex;width:100%;justify-content:space-between;align-items:center;gap:.5rem;border:0;border-left:3px solid transparent;border-radius:0;background:none;
  padding:.42rem 1.1rem;font-size:.94rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--inkt);text-align:left;cursor:pointer}
.zijcat .filter:hover{background:var(--achtergrond,#f4f7f5)}
.zijcat .filter[aria-pressed="true"]{border-left-color:var(--groen,var(--navy));background:var(--navy-licht,#eef4f0);color:var(--groen,var(--navy));font-weight:800}
.zijcat .filter span{color:var(--inkt-2);font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}
.zijcat .subfilters{border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);margin:.4rem 0;padding:.4rem 0}
.zijcat .subfilters .filter{padding-left:2rem;font-size:.9rem;font-weight:600;color:var(--inkt-2)}
.zijcat .subfilters .filter[aria-pressed="true"]{color:var(--groen,var(--navy));font-weight:800}
.zijcat .filter.verborgen{display:none}
.zijcat .meer{display:block;width:100%;text-align:left;border:0;background:none;padding:.45rem 1.1rem .2rem;font:inherit;font-size:.86rem;font-weight:800;color:var(--groen,var(--navy));cursor:pointer}
.zijcat .meer:hover{text-decoration:underline}

/* ---------- lopende tekst op een productpagina ---------- */
.tekst-kop{font-size:1.35rem;margin-bottom:.9rem}
.tekst p + p,.tekst ul + p,.tekst p + ul{margin-top:.85rem}
.tekst p,.tekst li{overflow-wrap:break-word}
.tekst-noot{max-width:760px;margin-top:1.2rem;padding-top:.8rem;border-top:1px solid var(--lijn);
  color:var(--inkt-2);font-size:.86rem;line-height:1.55}

/* ---------- uitgelicht blok: licht, met een zegel en een aanbiedingsstand ---------- */
.uitgelicht{position:relative;overflow:visible}
.uitgelicht::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--geel)}
.uitgelicht.is-actie::before{background:var(--rood)}
.uitgelicht-foto{position:relative;background:radial-gradient(circle at 50% 42%,#fff 0 54%,var(--grijs) 100%);
  padding:1.6rem 1.2rem 1.1rem;align-content:center;gap:.8rem}
.uitgelicht-foto .uitg-groot{display:block;position:relative;cursor:zoom-in;border-radius:var(--hoek);overflow:hidden}
.uitgelicht-foto .uitg-groot img{width:min(100%,440px);margin-inline:auto;transition:transform .25s}
.uitgelicht-foto .uitg-groot:hover img{transform:scale(1.04)}
.uitg-loep{position:absolute;right:.4rem;bottom:.4rem;width:2.1rem;height:2.1rem;display:grid;place-items:center;
  background:var(--inkt);color:#fff;opacity:.75;transition:opacity .2s}
.uitg-groot:hover .uitg-loep{opacity:1}
/* rond zegel, een tikje scheef zoals een sticker op de doos */
.uitg-zegel{position:absolute;left:1rem;top:1rem;z-index:2;width:74px;height:74px;border-radius:50%;
  display:grid;place-content:center;text-align:center;line-height:1.1;transform:rotate(-11deg);
  background:var(--geel);color:var(--inkt);box-shadow:0 6px 16px rgba(20,32,26,.22)}
.uitg-zegel b{font-family:Sora,sans-serif;font-size:1.25rem;display:block}
.uitg-zegel small{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.uitg-zegel.zegel-actie{background:var(--rood);color:#fff}
.uitg-zegel.zegel-actie small{opacity:.9}
.uitg-mini{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.uitg-mini a{width:58px;height:58px;display:grid;place-items:center;background:var(--wit);padding:.25rem;
  border:1px solid var(--lijn);cursor:pointer}
.uitg-mini a.uit{border-color:var(--navy);border-width:2px}
.uitg-mini img{max-height:100%;width:auto}
.uitg-vlag{display:inline-block;background:var(--navy);color:#fff;font-size:.7rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:.3rem .7rem;margin-bottom:.9rem}
.uitgelicht.is-actie .uitg-vlag{background:var(--rood)}
.uitg-loopt{display:inline-block;margin:0 0 1rem;background:var(--navy-licht);color:var(--navy);
  font-size:.88rem;font-weight:700;padding:.35rem .7rem}
.uitgelicht-koop{row-gap:.5rem}
.uitgelicht-koop .prijs-actie{display:grid;gap:.15rem;justify-items:start}
.uitgelicht-koop .prijs-actie .oud{color:var(--inkt-2);text-decoration:line-through;font-size:1.05rem}
.uitgelicht-koop .prijs-actie .nieuw{font-family:Sora,system-ui,sans-serif;font-weight:700;font-size:1.9rem;color:var(--rood);line-height:1.1}
.uitgelicht-koop .prijs-actie .bespaar{background:var(--rood);color:#fff;font-size:.78rem;font-weight:800;padding:.2rem .5rem;margin-top:.2rem}
.uitgelicht-koop .prijs-actie .tot{display:none}   /* staat al als klokje boven de prijs */
.uitg-meer{color:var(--navy);font-weight:700;font-size:.9rem;text-decoration:none}
.uitg-meer:hover{text-decoration:underline}
@media(max-width:600px){
  .uitg-zegel{width:60px;height:60px;left:.6rem;top:.6rem}
  .uitg-zegel b{font-size:1rem}
  .uitg-mini a{width:48px;height:48px}
}

/* ---------- paginering onder de producten in de winkel ---------- */
.shop-paginering{justify-content:center;gap:.35rem;margin-top:1.6rem}
.shop-paginering[hidden]{display:none}
.shop-paginering button{display:inline-block;min-width:2.1rem;padding:.35rem .6rem;text-align:center;
  border:1.5px solid var(--lijn);background:var(--wit);color:inherit;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;border-radius:var(--hoek)}
.shop-paginering button:hover{border-color:var(--navy);color:var(--navy)}
.shop-paginering .nu{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- aanbiedingsblok compacter: de foto begrensd en de randen smaller ---------- */
.uitgelicht-foto{padding:1rem 1rem .8rem;gap:.55rem}
.uitgelicht-foto .uitg-groot{max-height:250px}
.uitgelicht-foto .uitg-groot img{width:min(100%,360px);max-height:250px;object-fit:contain}
.uitg-zegel{width:62px;height:62px;left:.7rem;top:.7rem}
.uitg-zegel b{font-size:1.05rem}
.uitg-mini a{width:46px;height:46px}
.uitgelicht-tekst{padding:clamp(1.1rem,2.4vw,1.9rem)}
.uitgelicht-tekst h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:.5rem}
.uitgelicht-tekst > p{margin-bottom:.8rem;font-size:.96rem}
.uitg-vlag{margin-bottom:.6rem}
.uitg-loopt{margin-bottom:.8rem;padding:.3rem .6rem;font-size:.84rem}
.uitgelicht-koop .prijs-actie .nieuw{font-size:1.65rem}
@media(max-width:600px){
  .uitg-zegel{width:54px;height:54px}
  .uitg-zegel b{font-size:.92rem}
  .uitgelicht-foto .uitg-groot,.uitgelicht-foto .uitg-groot img{max-height:200px}
}

/* ---------- "vanaf" als klein kopje boven de prijs, zodat het bedrag niet afbreekt ---------- */
.prijs .vanaf{display:block;font-family:"Nunito Sans",system-ui,sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-2);line-height:1.2;margin-bottom:.1rem}

/* ---------- groene kop van de startpagina lager ---------- */
.hero2{padding-block:clamp(1.2rem,2.6vw,2rem) clamp(1.4rem,3vw,2.4rem)}
.hero2-tekst{padding:clamp(1.3rem,2.6vw,2.4rem)}
.hero2-tekst h1{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-bottom:.7rem}
.hero2-tekst .label{margin-bottom:.6rem}
.hero2-tekst p{font-size:1rem;margin-bottom:1.1rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(min-width:900px){
  .hero2-foto{min-height:300px;margin:.9rem .9rem .9rem 0}
  .hero2-foto img{width:min(100%,460px);transform:rotate(-8deg) scale(1.05)}
}
@media(max-width:899px){.hero2-foto{min-height:220px}.hero2-foto img{width:min(100%,380px)}}

/* ---------- minder lucht tussen de onderdelen van een pagina ---------- */
.blok{padding-block:clamp(1.3rem,2.8vw,2.1rem)}
.sectiekop{margin-bottom:1.1rem}
.vindt{padding-top:1.1rem}
@media(max-width:600px){.blok{padding-block:1.1rem}}

/* ---------- kop startpagina: foto recht en het kopje erboven groter ---------- */
.hero2-foto img{transform:none}
@media(min-width:900px){.hero2-foto img{transform:none;width:min(100%,520px)}}
.hero2-tekst .label{font-size:.88rem;letter-spacing:.14em}

/* ---------- bovenbalk: de regels in het midden, de taalkeuze rechts ---------- */
.usp-rij{position:relative;justify-content:center;padding-inline:0}
.usp-tekst{display:flex;flex-wrap:wrap;gap:.3rem 2rem;justify-content:center}
@media(min-width:1000px){
  .usp-rij{padding-inline:7rem}                    /* ruimte vrijhouden voor de taalkeuze */
  .usp-taal{position:absolute;right:0;top:50%;transform:translateY(-50%);margin:0}
}
.usp-taal a{color:var(--navy);opacity:.55;font-weight:800}
.usp-taal a:hover{opacity:1;color:var(--navy)}
.usp-taal a.uit{background:var(--geel);color:var(--inkt);opacity:1;border-radius:3px}

/* ---------- combideal-pagina: keuzelijsten binnen hun kolom houden ---------- */
.bundel-item-tekst{min-width:0}                                  /* anders rekt de tekstkolom mee met de langste optie */
.bundel-keuzes{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.7rem .9rem;margin:.5rem 0 .7rem}
.bundel-keuzes label{min-width:0}
.bundel-keuzes label span{color:var(--inkt-2);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}
.bundel-keuzes select{width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.55rem .7rem}
.bundel-item .stil{display:block;padding-top:.5rem;border-top:1px solid var(--lijn);font-size:.85rem}
.bundel-plus{display:grid;place-items:center;width:34px;height:34px;margin:-.2rem auto;border-radius:50%;
  background:var(--navy);color:#fff;font-size:1.25rem;line-height:1;position:relative;z-index:1}
@media(max-width:600px){.bundel-keuzes{grid-template-columns:1fr}}

/* ---------- combideal: geen schuin lint meer, maar een strak labeltje in de hoek ---------- */
.bundel-koop .lint,.bundel-kaart .lint{position:absolute;top:0;right:0;transform:none;box-shadow:none;
  padding:.3rem .7rem;font-size:.66rem;letter-spacing:.12em;border-radius:0 0 0 var(--hoek)}
.bundel-koop{overflow:hidden}

/* ---------- kop van de startpagina in de stand "alleen de foto": banner vult de kop, tekst links erover ---------- */
.hero2.foto{padding-block:0}
.hero2.foto::before{left:0;width:100%;transform:none;border-radius:calc(var(--hoek) * 2);
  background-image:linear-gradient(100deg,rgba(6,10,9,.82) 0,rgba(6,10,9,.55) 34%,rgba(6,10,9,.08) 62%,rgba(6,10,9,0)),var(--kopfoto);
  background-position:center 22%}   /* de bovenkant van de banner (merknaam) in beeld houden */
.hero2.foto .hero2-grid,.hero2.met-kopfoto.door.foto .hero2-grid{grid-template-columns:1fr;background:none;min-height:clamp(300px,34vw,440px);align-items:center}   /* geen groene waas over de banner */
.hero2.foto .hero2-tekst{max-width:600px;padding:clamp(1.6rem,3.5vw,3rem)}
.hero2.foto .hero2-tekst p{-webkit-line-clamp:3}
@media(max-width:899px){
  .hero2.foto::before{background-position:62% 40%}
  .hero2.foto .hero2-grid{min-height:340px}
}

/* ---------- uitgelichte keuen op de startpagina: brede kaarten, de keu ligt over de breedte ---------- */
.keu-rij{display:grid;gap:1.2rem}
@media(min-width:760px){.keu-rij{grid-template-columns:repeat(2,1fr)}}
.product.keu-kaart{display:grid;gap:.45rem;padding:1.2rem 1.3rem 1.1rem;overflow:visible;position:relative}
.keu-kaart .tag{top:1rem;left:1rem;z-index:2}
/* de foto is vierkant met de keu precies in het midden: het vak is een gewoon blok, zodat 100% echt de vakhoogte is,
   en de uitsnede pakt het midden en zoomt iets in. Zo ligt de keu groot in beeld en valt het logo bovenin weg. */
.keu-kaart .kfoto{display:block;height:110px;overflow:hidden;border-radius:var(--hoek);background:linear-gradient(180deg,#fff,#f1f4f2);margin-bottom:.3rem}
.keu-kaart .kfoto img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .25s}   /* geen inzoomen: de keu in zijn geheel, van top tot bumper */
.keu-kaart:hover .kfoto img{transform:scale(1.03)}
.keu-kaart .merknaam{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-2)}
.keu-kaart h3{font-size:1.25rem;line-height:1.2}
.keu-kaart h3 a{color:inherit;text-decoration:none}
.keu-kaart .omschr{margin:0;color:var(--inkt-2);font-size:.9rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.keu-kaart .konder{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-top:.3rem;padding-top:.7rem;border-top:1px solid var(--lijn)}
.keu-kaart .prijs{font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
.keu-kaart .prijs s{color:var(--inkt-2);font-weight:400;font-size:.9rem;margin-right:.3rem}
.keu-kaart .prijs small{display:block;font-size:.72rem;font-weight:600;color:var(--inkt-2)}
.keu-kaart .koop{width:38px;height:38px;border-radius:50%;border:0;background:var(--navy);color:#fff;font-size:1.35rem;display:grid;place-items:center;cursor:pointer;text-decoration:none;flex:none}
.keu-kaart .koop:hover{background:var(--navy-diep)}
.keu-kaart .koop[disabled]{background:var(--lijn-fel);cursor:default}
@media(max-width:600px){.keu-kaart .kfoto{height:96px}.keu-kaart h3{font-size:1.1rem}}

/* ---------- merkenstrook op de startpagina: de logo's van de keumerken ---------- */
#merken{padding-block:.6rem 1.4rem}
.merken-kop{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.9rem}
.merken-kop a{font-size:.85rem;font-weight:800;color:var(--navy);text-decoration:none}
.merken-kop a:hover{text-decoration:underline}
.merken-rij{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
@media(min-width:700px){.merken-rij{grid-template-columns:repeat(6,1fr)}}
@media(min-width:1000px){.merken-rij{grid-template-columns:repeat(8,1fr)}}
.merk-tegel{display:flex;align-items:center;justify-content:center;height:78px;padding:.7rem .9rem;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--hoek);
  transition:border-color .15s,box-shadow .15s,transform .15s}
/* vaste maximale hoogte in pixels: een percentage rekent in een raster niet tegen de tegelhoogte, waardoor staande logo's uitstaken */
.merk-tegel img{max-width:100%;max-height:54px;width:auto;height:auto;filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s}
.merk-tegel:hover{border-color:var(--navy);box-shadow:0 8px 20px rgba(13,66,41,.1);transform:translateY(-2px)}
.merk-tegel:hover img{filter:none;opacity:1}
@media(max-width:600px){.merk-tegel{height:64px;padding:.5rem .6rem}.merk-tegel img{max-height:44px}}

/* ---------- bovenbalk in dezelfde kleur als de voet ---------- */
.usp{background:var(--navy-diep);color:#c7d9cd;border-bottom:0;font-weight:600}
.usp-rij span::before{color:var(--geel)}
.usp-taal a{color:#a9c4b4;opacity:1}
.usp-taal a:hover{color:#fff;opacity:1}
.usp-taal a.uit{background:var(--geel);color:var(--inkt)}

/* ---------- doorzichtige kop: de foto erachter met een instelbare waas in de huisstijlkleur (Instellingen > Vervaging) ---------- */
.hero2.met-kopfoto.door:not(.biljart):not(.foto)::before{
  background-image:linear-gradient(rgba(18,80,50,var(--kop-waas,.75)),rgba(18,80,50,var(--kop-waas,.75))),var(--kopfoto);
  background-position:center 40%}
/* het vlak zelf hoeft dan geen tweede laag meer: alleen een licht donker verloop links zodat de tekst leesbaar blijft */
.hero2.met-kopfoto.door:not(.biljart):not(.foto) .hero2-grid{background:linear-gradient(100deg,rgba(6,10,9,.28),rgba(6,10,9,0) 55%)}

/* ---------- kop op telefoons: de keu precies in het midden van het witte vlak ----------
   De productfoto is vierkant met de keu in het midden; op een smal scherm is het vlak lager dan
   breed, dus vult de foto het vlak (cover) en pakt de uitsnede het midden. */
@media(max-width:899px){
  .hero2-grid{grid-template-columns:minmax(0,1fr)}   /* de kolom mag nooit breder worden dan het scherm door de grote foto erin */
  /* geen aspect-ratio met een min-hoogte: die combinatie maakte het vlak 320px breed in een kolom van 313px, dus stak het rechts uit */
  .hero2-foto,.hero2.met-kopfoto.door .hero2-foto{display:block;min-width:0;width:auto;aspect-ratio:auto;height:230px;min-height:0}
  .hero2-foto .hero2-link{display:block;width:100%;height:100%}
  .hero2-foto .hero2-link img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
}

/* ---------- prijskaartje in de kop op telefoons: past altijd binnen het witte vlak ----------
   De naam krimpt met puntjes, de prijs blijft heel. */
@media(max-width:899px){
  .hero2-chip{left:.8rem;right:.8rem;max-width:none;min-width:0}
  .hero2-chip > span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hero2-chip .prijs{flex:none}
  /* het logootje in het kaartje kreeg op telefoons de breedte van de productfoto mee (86%) en drukte de naam weg */
  .hero2-foto .hero2-chip img{width:26px;height:26px;flex:none}
}

/* ---------- bovenbalk op telefoons: alleen de taalkeuze, de verzendteksten passen daar toch niet ---------- */
@media(max-width:699px){
  .usp-tekst{display:none}
  .usp-rij{justify-content:center;padding:.15rem 0}
  .usp-taal{position:static;transform:none;margin:0;display:flex;gap:.2rem}
  .usp-taal a{padding:.25rem .6rem}
}

/* ---------- categorietegels op de webshoppagina op telefoons: een rij die je opzij schuift ---------- */
@media(max-width:699px){
  .cats{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(42%,170px);gap:.7rem;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--maat);
    margin-inline:calc(-1 * var(--maat));padding:.2rem var(--maat) .6rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--lijn-fel) transparent}
  .cats > .cat{scroll-snap-align:start;min-width:0}
  .cats::-webkit-scrollbar{height:4px}
  .cats::-webkit-scrollbar-thumb{background:var(--lijn-fel);border-radius:2px}
}

/* ---------- het grote aanbiedingsblok (uitgelicht) niet op telefoons: op de startpagina en op de webshoppagina ---------- */
@media(max-width:699px){
  #pomerans-home,#pomerans{display:none}
}

/* ---------- prijzen in productkaarten op telefoons: kleiner en het euroteken blijft voor het bedrag ---------- */
@media(max-width:699px){
  .product-onder .prijs{font-size:1rem;white-space:nowrap;letter-spacing:-.02em}
  .product-onder .prijs small,.product-onder .prijs .vanaf{white-space:normal}
  .product-onder .koop{flex:none}
}

/* ---------- webshop: balk met sorteren, prijs, voorraad en weergave ---------- */
.shop-balk{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-bottom:1rem;padding:.7rem .9rem;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--hoek)}
.shop-balk label{display:flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--inkt-2)}
.shop-balk select{font:inherit;font-size:.9rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--inkt);padding:.4rem 1.7rem .4rem .6rem;border:1.5px solid var(--lijn-fel);border-radius:var(--hoek);background:var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23155e3b' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .6rem center;-webkit-appearance:none;appearance:none;cursor:pointer}
.shop-balk .shop-vink{text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:600;color:var(--inkt);cursor:pointer}
.shop-balk .shop-vink input{width:16px;height:16px;accent-color:var(--navy);margin:0}
.shop-weergave{margin-left:auto;display:flex;gap:.25rem}
.shop-weergave button{width:34px;height:34px;display:grid;place-items:center;border:1.5px solid var(--lijn-fel);border-radius:var(--hoek);background:var(--wit);color:var(--inkt-2);cursor:pointer}
.shop-weergave button svg{fill:currentColor}
.shop-weergave button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
@media(min-width:1000px){.shop-producten .raster.vier{grid-template-columns:repeat(4,1fr)}}
@media(max-width:699px){.shop-balk{padding:.6rem .7rem;gap:.5rem .7rem}.shop-balk label{font-size:.72rem}.shop-balk select{font-size:.85rem;padding:.35rem 1.5rem .35rem .5rem}.shop-weergave{display:none}}   /* op telefoons blijft het altijd twee naast elkaar */

/* lijstweergave: een product per rij, foto links, tekst en prijs rechts */
.shop-producten .raster.lijst{grid-template-columns:1fr;gap:.7rem}
.raster.lijst .product{flex-direction:row;align-items:stretch}
.raster.lijst .product-foto{width:clamp(120px,22%,200px);flex:none;aspect-ratio:1/1;padding:.7rem}
.raster.lijst .product-tekst{padding:.9rem 1.1rem;justify-content:center}
.raster.lijst .product-tekst h3{font-size:1.1rem}
.raster.lijst .product-tekst .omschr{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.raster.lijst .product-onder{margin-top:.5rem}
.raster.lijst .geen{grid-column:1/-1}

/* ---------- inruilen: formulier en persoonlijke statuspagina ---------- */
.inr-uitleg{display:grid;gap:1.4rem;padding-bottom:0}
@media(min-width:900px){.inr-uitleg{grid-template-columns:2fr 1fr;align-items:start}}
.inr-stappen{list-style:none;counter-reset:st;margin:0;padding:0;display:grid;gap:.8rem}
@media(min-width:700px){.inr-stappen{grid-template-columns:repeat(3,1fr)}}
.inr-stappen li{counter-increment:st;background:var(--wit);border:1px solid var(--lijn);padding:1rem 1.1rem 1.1rem;display:grid;gap:.3rem;align-content:start;font-size:.92rem;color:var(--inkt-2)}
.inr-stappen li::before{content:counter(st);width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:700 .9rem Sora,sans-serif;margin-bottom:.3rem}
.inr-stappen b{color:var(--inkt);font-family:Sora,sans-serif;font-size:1rem}
.inr-zoeken{background:var(--navy-licht,#e6f2ea);padding:1rem 1.2rem;border-left:3px solid var(--navy)}
.inr-zoeken h2{font-size:1.05rem;margin:0 0 .3rem}.inr-zoeken p{margin:0;font-size:.92rem;color:var(--inkt-2)}
.inr-form{display:grid;gap:1rem;max-width:860px}
.inr-form fieldset{margin:0;min-width:0}
.inr-form legend{display:flex;align-items:center;gap:.6rem;font:700 1.15rem Sora,sans-serif;padding:0;margin-bottom:.4rem;float:left;width:100%}
.inr-form legend + *{clear:both}
.inr-form legend span{width:28px;height:28px;border-radius:50%;background:var(--geel);color:var(--inkt);display:grid;place-items:center;font-size:.85rem;flex:none}
.inr-twee{grid-template-columns:1fr}
@media(min-width:640px){.inr-twee{grid-template-columns:1fr 1fr}.inr-twee .vol{grid-column:1/-1}}
.inr-kl{display:block;font-weight:700;font-size:.9rem;margin-bottom:.35rem}
.inr-extra{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-content:start}.inr-extra .inr-kl{width:100%}
.inr-vink{display:flex !important;align-items:center;gap:.45rem;font-weight:600 !important;font-size:.92rem;cursor:pointer}
.inr-vink input{width:auto !important;margin:0 !important;accent-color:var(--navy)}
.inr-hint{font-size:.85rem;color:var(--inkt-2);margin:.3rem 0 .6rem}
.inr-weg{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.inr-drop{display:grid;place-items:center;text-align:center;gap:.2rem;padding:1.6rem 1rem;border:2px dashed var(--lijn-fel);background:var(--grijs,#f3f6f4);cursor:pointer;position:relative;transition:border-color .15s,background .15s}
.inr-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.inr-drop b{font-family:Sora,sans-serif;color:var(--navy)}.inr-drop span{font-size:.85rem;color:var(--inkt-2)}
.inr-drop.sleep,.inr-drop:hover{border-color:var(--navy);background:var(--navy-licht,#e6f2ea)}
.inr-drop.gevuld{border-style:solid;border-color:var(--navy)}
.inr-voorbeeld{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.inr-voorbeeld img{width:84px;height:84px;object-fit:cover;border:1px solid var(--lijn)}
.inr-keus{display:grid;gap:.6rem;margin:.8rem 0 0;border:0;padding:0}
@media(min-width:640px){.inr-keus{grid-template-columns:1fr 1fr}.inr-keus.inr-drie{grid-template-columns:repeat(3,1fr)}}
.inr-keus legend{grid-column:1/-1}
.inr-optie{display:flex;gap:.6rem;align-items:flex-start;padding:.8rem .9rem;border:1.5px solid var(--lijn-fel);background:var(--wit);cursor:pointer;font-size:.88rem;color:var(--inkt-2);transition:border-color .15s}
.spelsoorten{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .9rem}   /* spelsoort-filter boven het raster */
.spelknop{font-family:inherit;font-weight:700;font-size:.85rem;line-height:1;padding:.55rem .95rem;border:1.5px solid var(--lijn-fel,#d9e2dc);background:var(--wit,#fff);color:var(--inkt);border-radius:999px;cursor:pointer;transition:border-color .15s,background .15s}
.spelknop span{font-weight:600;color:var(--inkt-2);margin-left:.2rem}
.spelknop:hover{border-color:var(--inkt)}
.spelknop[aria-pressed="true"]{background:var(--inkt);border-color:var(--inkt);color:#fff}.spelknop[aria-pressed="true"] span{color:rgba(255,255,255,.75)}
.inr-ook{margin-top:.6rem}.inr-prijs{font-style:normal;font-weight:700;color:var(--inkt-2);margin-left:.3rem;white-space:nowrap}   /* ophalen: extra vinkje onder brengen/opsturen */
.inr-optie b{display:block;color:var(--inkt);font-size:.98rem;margin-bottom:.1rem}
.inr-optie input{margin-top:.2rem;accent-color:var(--navy);flex:none}
.inr-optie:has(input:checked){border-color:var(--navy);background:var(--navy-licht,#e6f2ea)}
.inr-ruil{margin-top:1rem;display:grid;gap:.6rem}
.inr-ruil[hidden],#inrOphaal[hidden]{display:none}
.inr-zoekvak{position:relative}
.inr-zoekvak input{width:100%;font:inherit;padding:.65rem .8rem;border:1.5px solid var(--lijn-fel);background:#fff}
.inr-resultaten{position:absolute;z-index:5;left:0;right:0;top:100%;background:#fff;border:1px solid var(--lijn-fel);box-shadow:0 12px 28px rgba(0,0,0,.12);max-height:340px;overflow:auto}
.inr-resultaten button{display:flex;align-items:center;gap:.6rem;width:100%;padding:.5rem .7rem;border:0;border-bottom:1px solid var(--lijn);background:#fff;font:inherit;text-align:left;cursor:pointer}
.inr-resultaten button:hover{background:var(--navy-licht,#e6f2ea)}.inr-resultaten button[disabled]{opacity:.45;cursor:default}
.inr-resultaten img{width:44px;height:44px;object-fit:contain;flex:none}.inr-resultaten span{flex:1;min-width:0;font-size:.9rem}
.inr-resultaten em{font-style:normal;font-weight:700;color:var(--navy);white-space:nowrap}.inr-resultaten p{margin:0;padding:.7rem;font-size:.9rem}
.inr-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.inr-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .3rem .3rem .4rem;border:1.5px solid var(--navy);background:var(--navy-licht,#e6f2ea);font-size:.88rem;font-weight:600}
.inr-chip img{width:32px;height:32px;object-fit:contain;background:#fff}.inr-chip em{font-style:normal;color:var(--navy)}
.inr-chip button{border:0;background:none;font-size:1.2rem;line-height:1;cursor:pointer;padding:0 .3rem;color:var(--inkt-2)}
.inr-verstuur{margin-top:.6rem;width:auto}
.inr-fout{border-color:#c62828;background:#fff5f5}.inr-fout ul{margin:.4rem 0 .4rem 1.2rem}.inr-fout p{margin:0;font-size:.88rem}

.inr-balk{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;counter-reset:b}
.inr-balk li{counter-increment:b;text-align:center;font-size:.8rem;font-weight:700;color:var(--inkt-2);padding-top:.5rem;border-top:4px solid var(--lijn)}
.inr-balk li.klaar{border-color:var(--navy);color:var(--navy)}.inr-balk li.nu{border-color:var(--geel);color:var(--inkt)}
.inr-status{display:grid;gap:1.2rem;align-items:start}
@media(min-width:960px){.inr-status{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.inr-hoofd,.inr-zij{display:grid;gap:1.2rem;min-width:0}
.inr-status h2{font-size:1.2rem;margin:0 0 .6rem}
.inr-actie{border-top:4px solid var(--navy)}
.inr-actie-bod{border-top-color:var(--geel);box-shadow:0 14px 30px rgba(13,66,41,.08)}
.inr-actie-afgewezen,.inr-actie-ingetrokken{border-top-color:var(--lijn-fel)}
.inr-bedrag{font:800 clamp(2rem,5vw,2.8rem) Sora,sans-serif;color:var(--navy);margin:.2rem 0 .6rem;letter-spacing:-.02em}
.inr-akkoord{display:grid;gap:.8rem;margin:.6rem 0}.inr-akkoord .knop{width:auto;justify-self:start}
.inr-anders{border-top:1px solid var(--lijn);padding-top:.7rem;margin-top:.7rem}
.inr-anders summary{cursor:pointer;font-weight:700;color:var(--navy)}
.inr-anders .knop{width:auto}
.inr-knop-rood{background:#fff;color:#b3261e;border:1.5px solid #b3261e}
.inr-code{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin:.3rem 0 .8rem}
.inr-code span{font:800 1.5rem Sora,monospace;letter-spacing:.06em;padding:.5rem .9rem;border:2px dashed var(--navy);background:var(--navy-licht,#e6f2ea)}
.inr-code .knop{width:auto;margin:0}
.inr-gesprek{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.6rem}
.inr-gesprek li{padding:.7rem .9rem;background:var(--grijs,#f3f6f4);max-width:88%;font-size:.93rem}
.inr-gesprek li.van-winkel{background:var(--navy-licht,#e6f2ea);border-left:3px solid var(--navy)}
.inr-gesprek li.van-klant{margin-left:auto}
.inr-wie{font-size:.74rem;color:var(--inkt-2);margin-bottom:.2rem}
.inr-mijl{font-weight:800;color:var(--navy)}
.inr-tekst{margin-top:.15rem}
.inr-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-bottom:.9rem}
.inr-fotos img,.inr-fotos-klein img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--lijn);display:block}
.inr-fotos-klein{display:flex;gap:.3rem;margin-top:.4rem}.inr-fotos-klein a{width:64px}
.inr-dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;margin:0;font-size:.92rem}.inr-dl dt{color:var(--inkt-2)}.inr-dl dd{margin:0;font-weight:600}
.inr-omschr{background:var(--grijs,#f3f6f4);padding:.7rem .8rem;font-size:.9rem;margin:.9rem 0 0}
.inr-prod{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--lijn);text-decoration:none;color:inherit;font-size:.9rem}
.inr-prod img{width:44px;height:44px;object-fit:contain;flex:none}.inr-prod span{flex:1;min-width:0}.inr-prod em{font-style:normal;font-weight:700;color:var(--navy);white-space:nowrap}
.inr-reken{display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;margin:.8rem 0 0;font-size:.92rem}.inr-reken dd{margin:0;text-align:right}
.inr-bericht .knop,.inr-hoofd .knop{width:auto}
.inr-intrek{text-align:right}.inr-intrek button{background:none;border:0;color:var(--inkt-2);text-decoration:underline;cursor:pointer;font:inherit;font-size:.85rem}
/* ---- bieden: "doe een bod" op tweedehands en de bodpagina ---- */
.bod-blok{margin:1rem 0 0;border:1.5px solid var(--lijn-fel);border-radius:var(--hoek);background:var(--wit)}   /* ingeklapt; open na een klik */
.bod-blok>summary{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;cursor:pointer;list-style:none;user-select:none}
.bod-blok>summary::-webkit-details-marker{display:none}
.bod-blok>summary::after{content:"";width:.5rem;height:.5rem;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg);margin:-.2rem .2rem 0 auto;transition:transform .15s}
.bod-blok[open]>summary::after{transform:rotate(-135deg);margin-top:.2rem}
.bod-blok>summary:hover{background:var(--navy-licht,#e6f2ea)}
.bod-kop{font-family:Sora,sans-serif;font-weight:700;color:var(--navy)}.bod-vanaf{font-size:.85rem;color:var(--inkt-2)}
.bod-inhoud{padding:0 1rem .9rem}
.bod-vorm{display:grid;grid-template-columns:1fr auto;gap:.5rem}.bod-vorm label{position:relative;display:block}
.bod-vorm input{width:100%;font:inherit;padding:.6rem .8rem .6rem 1.8rem;border:1.5px solid var(--lijn-fel);border-radius:var(--hoek)}
.bod-euro{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--inkt-2)}
.bod-vorm textarea{grid-column:1/-1;font:inherit;padding:.55rem .8rem;border:1.5px solid var(--lijn-fel);border-radius:var(--hoek);resize:vertical}
.bod-blok small,.bod-klein{display:block;margin-top:.5rem;color:var(--inkt-2);font-size:.85rem;line-height:1.5}
.bod-rij{display:grid;gap:1rem;align-items:start}@media(min-width:800px){.bod-rij{grid-template-columns:320px 1fr}}
.bod-product{display:flex;flex-direction:column;gap:.6rem;text-decoration:none;color:inherit}.bod-product img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--hoek);background:var(--grijs)}
.bod-product span{display:grid}.bod-product small{color:var(--inkt-2)}
.bod-citaat{background:var(--grijs);padding:.6rem .8rem;border-left:3px solid var(--geel)}.bod-citaat small{display:block;color:var(--inkt-2);font-size:.8rem}
.bod-knoppen{display:flex;gap:.5rem;flex-wrap:wrap}
/* ---- veilingen ---- */
.veiling-raster{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.veiling-kaart{display:flex;flex-direction:column;gap:.45rem;text-decoration:none;color:inherit;margin:0}.veiling-kaart img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--hoek);background:var(--grijs)}
.veiling-kaart small{color:var(--inkt-2)}.veiling-stand strong{font-family:Sora,sans-serif;color:var(--navy)}.veiling-klaar .veiling-kaart{opacity:.75}
.veiling-paneel{margin:1.1rem 0 0;padding:1rem 1.1rem;border:1.5px solid var(--lijn-fel);border-radius:var(--hoek);background:var(--wit)}
.veiling-cijfers{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.veiling-cijfers small{display:block;color:var(--inkt-2);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.veiling-cijfers b{display:block;font:800 1.6rem Sora,sans-serif;color:var(--navy);line-height:1.2}.veiling-cijfers span{font-size:.85rem;color:var(--inkt-2)}
.veiling-min{margin:.7rem 0 0;font-weight:600;color:#8a6d1b}.veiling-min.gehaald{color:#1c7c45}
.veiling-jij{margin:.7rem 0 0;padding:.5rem .7rem;background:#e3f3e9;color:#1c7c45;font-weight:600;border-radius:var(--hoek)}.veiling-overboden{background:#fdeceb;color:#b3261e}
.veiling-bied{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:end;margin-top:.9rem}.veiling-bied label{display:grid;gap:.25rem;font-weight:700;font-size:.9rem}
.veiling-bied label small{font-weight:400;color:var(--inkt-2)}.veiling-bied input{font:inherit;padding:.6rem .8rem;border:1.5px solid var(--lijn-fel);border-radius:var(--hoek)}
.veiling-uitleg{display:block;margin-top:.6rem;color:var(--inkt-2);font-size:.85rem;line-height:1.5}
.veiling-geschiedenis{margin-top:1rem}.veiling-geschiedenis summary{cursor:pointer;font-weight:700}.veiling-geschiedenis ol{list-style:none;margin:.5rem 0 0;padding:0}
.veiling-geschiedenis li{display:grid;grid-template-columns:1fr auto auto;gap:.8rem;padding:.35rem 0;border-bottom:1px solid var(--lijn);font-size:.9rem}.veiling-geschiedenis li small{color:var(--inkt-2)}
/* startpagina zonder winkel: inruilvak in plaats van de pomeransservice */
.inr-blok-stappen.home-inruil-stappen{margin:1rem 0 1.3rem;flex-direction:column;gap:.55rem;font-size:.95rem}
.home-inruil-knoppen{display:flex;gap:.6rem;flex-wrap:wrap}
.home-inruil-vorm{display:grid;gap:.75rem;margin:1rem 0 0}
.home-inruil-vorm label{display:grid;gap:.25rem;font-weight:700;font-size:.88rem}.home-inruil-vorm label small{font-weight:400;color:var(--inkt-2)}
.home-inruil-vorm input[type=text],.home-inruil-vorm input:not([type]),.home-inruil-vorm input[type=email]{font:inherit;font-weight:400;padding:.6rem .8rem;border:1.5px solid var(--lijn-fel);border-radius:var(--hoek);background:var(--wit);width:100%;min-width:0}
.home-inruil-fotos{display:grid;gap:.25rem}.home-inruil-kop{font-weight:700;font-size:.88rem}.home-inruil-kop small{font-weight:400;color:var(--inkt-2)}
.foto-kies{position:relative;display:flex!important;align-items:center;gap:.8rem;padding:.5rem;border:1.5px dashed var(--lijn-fel);border-radius:var(--hoek);background:var(--grijs);cursor:pointer}
.foto-kies input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}   /* de echte knop van de browser (Engels) onzichtbaar eroverheen */
.foto-kies .knop{padding:.45rem .9rem;font-size:.8rem;pointer-events:none;background:var(--wit);border:1.5px solid var(--inkt);flex:none}.foto-kies em{font-style:normal;font-weight:400;font-size:.88rem;color:var(--inkt-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foto-kies:focus-within{outline:2px solid var(--geel);outline-offset:1px}
.home-inruil-rij{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}@media(max-width:520px){.home-inruil-rij{grid-template-columns:1fr}}
.home-inruil-keus{display:flex;gap:1.2rem}.home-inruil-keus label{display:flex;align-items:center;gap:.4rem;font-weight:600}
.home-inruil-vorm .knop{justify-self:start}
.home-inruil-klein{margin:1rem 0 0;font-size:.88rem;color:var(--inkt-2)}
/* productpagina: eerst een bod op je oude keu, dan deze kopen */
.inr-blok{display:flex;gap:.9rem 1rem;align-items:center;flex-wrap:wrap;margin:1.2rem 0 0;padding:1rem 1.1rem;background:var(--navy-licht,#e6f2ea);border:1.5px solid var(--navy);border-radius:var(--hoek);line-height:1.45}
.inr-blok-ico{flex:none;width:44px;height:44px;border-radius:50%;background:var(--geel);color:var(--inkt);display:flex;align-items:center;justify-content:center}
.inr-blok-tekst{flex:1 1 230px;min-width:0}
.inr-blok-tekst>b{display:block;font-family:Sora,sans-serif;font-size:1.08rem;color:var(--navy);margin-bottom:.35rem}
.inr-blok-stappen{list-style:none;counter-reset:ib;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.88rem;font-weight:600;color:var(--inkt)}
.inr-blok-stappen li{counter-increment:ib;display:flex;align-items:center;gap:.35rem}
.inr-blok-stappen li::before{content:counter(ib);width:1.35rem;height:1.35rem;border-radius:50%;background:var(--navy);color:#fff;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.inr-blok-tekst small{display:block;margin-top:.4rem;color:var(--inkt-2);font-size:.82rem}
.inr-blok .knop{flex:0 0 auto}
@media(max-width:560px){.inr-blok .knop{width:100%;text-align:center}}
/* inruilpagina: geldigheid van het bod en de nieuwe keu na een akkoord */
.inr-geldig{margin:-.2rem 0 .8rem;font-size:.92rem;color:var(--inkt-2)}.inr-verlopen{text-decoration:line-through;opacity:.6}
.inr-bestel{margin:1rem 0 0;padding:1rem;border:1.5px solid var(--lijn-fel);border-radius:var(--hoek);background:var(--wit)}
.inr-bestel>b{display:block;margin-bottom:.6rem;color:var(--navy)}
.inr-bestel-p{display:flex;align-items:center;gap:.8rem;padding:.5rem 0;color:inherit;text-decoration:none;border-top:1px solid var(--lijn)}
.inr-bestel-p img{width:64px;height:64px;object-fit:cover;border-radius:var(--hoek);background:var(--grijs);flex:none}
.inr-bestel-p>span:first-of-type{flex:1;min-width:0;font-weight:700}.inr-bestel-p em{display:block;font-style:normal;font-weight:600;color:var(--inkt-2)}
.inr-bestel small{display:block;margin-top:.5rem;color:var(--inkt-2);line-height:1.5}
@media(max-width:520px){.inr-bestel-p{flex-wrap:wrap}.inr-bestel-p .knop{width:100%;text-align:center}}
.inr-prodlink{display:block;margin:.9rem 0 0;padding:.7rem .9rem;background:var(--navy-licht,#e6f2ea);border-left:3px solid var(--navy);color:var(--inkt);text-decoration:none;font-size:.9rem}
.inr-prodlink b{color:var(--navy)}.inr-prodlink:hover{background:#d9ecdf}
.inr-drop-klein{padding:1rem;margin-top:.1rem}
.inr-bericht .inr-kl small{font-weight:400;color:var(--inkt-2)}
.inr-bericht .knop{margin-top:1rem}
.velden .inr-drop{display:grid;font-weight:400}   /* de algemene formulierregel maakte er een gewoon blok van */

/* ---------- eigen bevestigingsvenster (in plaats van de melding van de browser) ---------- */
.bev{border:0;padding:0;width:min(440px,calc(100vw - 2rem));box-shadow:0 24px 60px rgba(0,0,0,.28);background:var(--wit);color:var(--inkt)}
.bev::backdrop{background:rgba(8,30,20,.5)}
.bev form{padding:1.5rem 1.5rem 1.3rem;border-top:4px solid var(--navy)}
.bev h3{margin:0 0 .7rem;font:700 1.2rem Sora,sans-serif}
.bev p{margin:0 0 .6rem;line-height:1.55;color:var(--inkt-2)}
.bev-knoppen{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.bev-knoppen .knop{width:auto;margin:0}
.bev .bev-terug{background:var(--wit);color:var(--inkt);border:1.5px solid var(--lijn-fel)}
.bev .inr-knop-rood{background:#b3261e;color:#fff;border-color:#b3261e}

/* ---------- merkenlijst op de startpagina: uit het eigen assortiment, klikbaar naar de webshop ---------- */
.dealers.merk-lijst li{padding:0}
.dealers.merk-lijst a{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:.65rem .9rem;color:inherit;text-decoration:none;transition:background .15s}
.dealers.merk-lijst a span{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.dealers.merk-lijst small{font-weight:600}
.dealers.merk-lijst em{font-style:normal;font:700 .8rem "Nunito Sans",sans-serif;padding:.15rem .5rem;border-radius:999px;background:rgba(255,255,255,.12);white-space:nowrap}
.dealers.merk-lijst em::after{content:" artikelen";font-weight:600;opacity:.75}
.paneel-navy .dealers.merk-lijst a:hover{background:rgba(255,255,255,.08)}
.merk-alle{display:inline-block;margin-top:.9rem;color:var(--geel);font-weight:800;text-decoration:none;font-size:.9rem}
.merk-alle:hover{text-decoration:underline}
.tijden b a{color:var(--navy);text-decoration:none}.tijden b a:hover{text-decoration:underline}

/* ---------- pagina Tweedehands ---------- */
@media(min-width:1000px){.tweedehands-raster{grid-template-columns:repeat(4,1fr)}}
.tweedehands-leeg{max-width:640px}.tweedehands-leeg h2{margin-top:0}.tweedehands-leeg .knop{width:auto}
.tweedehands-zelf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;background:var(--navy-licht,#e6f2ea);border-color:transparent}
.tweedehands-zelf h2{margin:0 0 .3rem}.tweedehands-zelf p{margin:0;color:var(--inkt-2)}.tweedehands-zelf .knop{width:auto;margin:0}

/* ---------- kop met foto, zoals bij de Ludo Kools-demo: de foto rondom vrij, alleen het tekstblok gekleurd ----------
   De instelling "Dekking van het blok" (hero_waas) bepaalt nu hoe dicht het groene blok is, niet meer een waas over de hele foto. */
.hero2.met-kopfoto.door:not(.biljart):not(.foto)::before{
  background-image:linear-gradient(180deg,rgba(10,14,12,.32),rgba(10,14,12,.1) 45%,rgba(10,14,12,.42)),var(--kopfoto);background-position:center 40%}
/* vervaagt vanaf de zijkant: links vol (de ingestelde dekking), naar rechts toe steeds doorzichtiger, zoals bij Kools */
.hero2.met-kopfoto.door:not(.biljart):not(.foto) .hero2-grid{background:
  linear-gradient(100deg,rgba(6,10,9,calc(var(--kop-waas,.75) * .45)),rgba(6,10,9,0) 60%),
  linear-gradient(100deg,rgba(13,66,41,var(--kop-waas,.75)) 22%,rgba(13,66,41,calc(var(--kop-waas,.75) * .35)) 100%)}
/* ---- voorraadmelding op de productpagina: "houd me op de hoogte" ---- */
.wachtvak{margin-top:1.1rem;background:var(--navy-licht);border:1.5px solid var(--lijn-fel);border-radius:var(--hoek);padding:1rem 1.1rem;display:flex;gap:.9rem;align-items:flex-start}
.wachtvak-bel{flex:none;width:40px;height:40px;border-radius:50%;background:var(--geel);color:#1b1b1b;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(21,94,59,.18)}
.wachtvak-inhoud{flex:1;min-width:0}
.wachtvak-inhoud>b{display:block;font-family:Sora,sans-serif;font-size:1.02rem;color:var(--navy)}
.wachtvak-vorm{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.wachtvak-vorm select,.wachtvak-vorm input[type=email]{border:1.5px solid var(--lijn-fel);border-radius:999px;padding:.6rem 1.05rem;font:inherit;background:var(--wit);color:var(--inkt)}
.wachtvak-vorm select:focus,.wachtvak-vorm input[type=email]:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.wachtvak-vorm select{min-width:150px;flex:0 1 auto}
.wachtvak-vorm input[type=email]{flex:1 1 190px;min-width:0}
.wachtvak-vorm .knop{flex:0 0 auto}
.wachtvak small{display:block;margin-top:.55rem;color:var(--inkt-2);line-height:1.5}
.wachtvak-ok{display:flex;align-items:center;gap:.5rem;margin:0;font-weight:600;color:var(--navy)}
.wachtvak-ok i{flex:none;width:22px;height:22px;border-radius:50%;background:#2e8b57;color:#fff;font-style:normal;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.8rem}
.wachtvak-fout{margin:0 0 .4rem;color:var(--rood);font-weight:600}
@media(max-width:520px){.wachtvak{flex-direction:column}.wachtvak-bel{width:34px;height:34px}}

/* leverancier (doorsturen): voettekst, productpagina, winkelwagen, afrekenen, retour */
.voet-partner{display:flex;align-items:center;gap:.6rem 1.2rem;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);padding-top:1.2rem;margin-top:1.4rem;font-size:.85rem}
.voet-partner-kop{font-weight:700;color:#fff;white-space:nowrap}
.voet .voet-partner-logo{display:inline-flex;align-items:center;background:#fff;border-radius:6px;padding:.35rem .7rem;line-height:0}
.voet-partner-logo img{height:26px;width:auto;display:block}.voet-partner-logo b{color:var(--inkt);line-height:1.4}
.voet-partner-tekst{flex:1 1 320px;line-height:1.5}.voet .voet-partner-tekst a{display:inline;text-decoration:underline;padding:0}
.lev-regel{display:flex;align-items:center;gap:.6rem;margin:.8rem 0 0;font-size:.88rem;color:var(--inkt-2);line-height:1.4}
.lev-regel img{height:16px;width:auto;flex:none}
.wagen-lev{margin:0 0 .7rem;font-size:.82rem;color:var(--inkt-2);line-height:1.4;display:flex;align-items:center;gap:.6rem}.wagen-lev[hidden]{display:none}.wagen-lev img{height:18px;width:auto;flex:none}
.lev-blok{margin-top:1.1rem;border:1px solid var(--lijn);border-left:4px solid var(--navy);background:#f7f9fb;border-radius:4px;padding:.9rem 1rem}
.lev-blok-kop{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.5rem}.lev-blok-kop img{height:28px;width:auto}
.lev-blok ul,.lev-retour ul{margin:.3rem 0 .5rem 1.1rem;padding:0;line-height:1.5}.lev-blok li{margin:.15rem 0}
.lev-blok small{display:block;color:var(--inkt-2);line-height:1.45}
.lev-blok[hidden]{display:none}
.lev-retour .lev-blok-kop h2{font-size:1.3rem;line-height:1.3}
@media(max-width:520px){.voet-partner{flex-direction:column;align-items:flex-start}.voet-partner-tekst{flex:none}}
/* voettekst: korte omschrijving, mail en sterke punten onder het logo */
.voet-over{margin:.2rem 0 .6rem;line-height:1.55;max-width:34ch}
.voet .voet-mail a{display:inline-block;color:#fff;font-weight:600}
.voet-punten{list-style:none;margin:.7rem 0 0;padding:0;line-height:1.7}
.voet-punten li::before{content:"✓";color:var(--geel,#f2c230);font-weight:800;margin-right:.45rem}
/* winkelnaam naast het logo in hoofdletters */
.merk b{text-transform:uppercase;letter-spacing:.01em}
/* bondskorting bij afrekenen en op de productpagina */
.bond-vak{border:1px solid var(--lijn);border-radius:4px;padding:.8rem .9rem;background:#fafbfc}
.bond-aan,.velden .bond-aan{display:flex;flex-direction:row;gap:.6rem;align-items:flex-start;font-weight:600;cursor:pointer}.bond-aan input,.velden .bond-aan input{width:auto;margin:.25rem 0 0;flex:none}
.bond-aan small{display:block;font-weight:400;color:var(--inkt-2);margin-top:.1rem}
.bond-velden{margin-top:.7rem}.bond-velden[hidden]{display:none}.bond-velden>small{display:block;color:var(--inkt-2);line-height:1.45;margin-top:.4rem}
.bond-geen{font-size:.85rem;color:var(--inkt-2);margin:.6rem 0 0}
.bond-hint{display:flex;align-items:center;gap:.6rem;margin:.6rem 0 0;font-size:.88rem;color:var(--inkt-2);line-height:1.45}.bond-hint b{color:var(--inkt)}
.bond-hint-pct{flex:none;background:var(--geel);color:var(--inkt);font-weight:800;font-size:.78rem;border-radius:4px;padding:.15rem .4rem}.bond-hint-prijs{white-space:nowrap}
/* winkelwagen: kleur/keuze alsnog kiezen bij een regel */
.regel-keuze{display:block;width:100%;margin:.35rem 0 .1rem;border:1.5px solid var(--geel);border-radius:6px;padding:.4rem .6rem;font:inherit;font-size:.86rem;background:#fffdf5;color:var(--inkt)}
.regel-keuze:focus{outline:2px solid var(--navy);outline-offset:1px}
.regel-kiezen{background:#fffdf5;border-radius:6px}
/* productpagina: voorraad van de gekozen kleur */
.keuze-voorraad{margin:.35rem 0 0;font-size:.88rem;font-weight:700;display:flex;align-items:center;gap:.4rem}
.keuze-voorraad::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.keuze-voorraad.is-op{color:#2e8b57}.keuze-voorraad.is-uit{color:#b3261e}