/* 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(5,1fr)}}
@media(max-width:699px){.cats .cat:last-child{grid-column:span 2}}
.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}

/* ---------- 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}

/* ---------- 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%}
.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)}
.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:3rem}
.lichtbak img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;padding:1rem}
.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}