/* Merkpagina's bockje.nl - donker/redactioneel. Scope: .bl */
html{overflow-x:hidden}
.bl{--ink:#22241e;--muted:#63645c;--green:#2a421e;--green-d:#18240f;--nacht:#0e1109;--btn:#638351;--btn-h:#4c6a3d;--line:#e2dfd7;--line-s:#efece6;--soft:#f8f7f4;--sand:#c9b98d;color:var(--ink);line-height:1.7;font-size:17px;overflow-x:clip}
.bl *{box-sizing:border-box}
.bl p{margin:0 0 1.05em}
.bl h2{color:var(--green);font-size:clamp(1.62rem,2.55vw,2.15rem);line-height:1.12;margin:0 0 .5em;letter-spacing:-.022em;font-weight:700;text-wrap:balance}
.bl h3{color:var(--green);font-size:1.08rem;line-height:1.3;margin:0 0 .4em;font-weight:700;letter-spacing:-.008em}
.bl-section{margin:clamp(3.4rem,6vw,5.6rem) 0}
.bl-section--first{margin-top:2rem}
.bl-intro{max-width:62ch;color:var(--muted);font-size:1.04rem;line-height:1.65}
.bl-kicker{display:block;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--btn);margin:0 0 .8em}
.bl-kop{position:relative;border-top:1px solid var(--line);padding-top:1.75rem;margin-bottom:2.1rem}
.bl-kop::before{content:"";position:absolute;top:-1px;left:0;width:54px;height:2px;background:var(--btn)}

/* Volle breedte banden */
.bl-bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw}
.bl-bleed__inner{max-width:1160px;margin:0 auto;padding:0 26px}

/* ---------- Hero ---------- */
.bl-hero{position:relative;color:#fff;background:var(--nacht);overflow:hidden}
.bl-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%;opacity:.55}
.bl-hero--vlak{background:linear-gradient(160deg,#1d2b12 0%,#131a0d 45%,#0b0e07 100%)}
.bl-hero--vlak::after{background:radial-gradient(90% 120% at 15% 0%,rgba(201,185,141,.13) 0%,rgba(11,14,7,0) 60%)}
.bl-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,12,6,.5) 0%,rgba(9,12,6,.74) 60%,rgba(9,12,6,.95) 100%)}
.bl-hero__inner{position:relative;z-index:2;max-width:1160px;margin:0 auto;padding:clamp(1.5rem,2.6vw,2.1rem) 26px clamp(1.2rem,1.8vw,1.6rem)}
.bl-hero__kicker{display:block;font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--sand);margin-bottom:.4rem}
.bl-hero h1{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.08;margin:0 0 .34em;letter-spacing:-.03em;font-weight:700;max-width:16em;text-wrap:balance}
.bl-hero__lead{font-size:clamp(.94rem,1.05vw,1.01rem);line-height:1.55;max-width:62ch;color:#d9d6cd;margin:0 0 1em}
.bl-hero__lead strong{color:#fff;font-weight:600}
.bl-hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:1rem}
.bl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:0;list-style:none;margin:0;padding:.75rem 0 0;border-top:1px solid rgba(255,255,255,.16)}
.bl-stats li{padding:0 20px 0 0;margin:0}
.bl-stats li+li{border-left:1px solid rgba(255,255,255,.14);padding-left:20px}
.bl-stats b{display:block;font-size:1.22rem;line-height:1;color:#fff;letter-spacing:-.02em;font-weight:700}
.bl-stats span{display:block;font-size:.72rem;color:#b9b6ad;margin-top:.3em;line-height:1.3}

/* ---------- Knoppen ---------- */
.bl-btn{display:inline-block;background:var(--btn);color:#fff!important;text-decoration:none;font-weight:600;font-size:.9rem;padding:11px 22px;border-radius:2px;line-height:1.2;border:1px solid var(--btn);transition:background .15s,border-color .15s}
.bl-btn:hover{background:var(--btn-h);border-color:var(--btn-h);color:#fff!important}
.bl-btn--groot{font-size:.92rem;padding:11px 26px}
.bl-btn--licht{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.4)}
.bl-btn--licht:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7);color:#fff!important}
.bl-btn--ghost{background:transparent;color:var(--green)!important;border-color:var(--line)}
.bl-btn--ghost:hover{background:var(--soft);border-color:var(--green);color:var(--green)!important}
.bl-btn--blok{display:block;text-align:center;width:100%;padding:10px 12px;font-size:.85rem}

/* ---------- Reeksenband ---------- */
.bl-reeksen{background:var(--green-d);color:#e6e3db;padding:3.4rem 0}
.bl-reeksen h2{color:#fff}
.bl-reeksen .bl-kicker{color:var(--sand)}
.bl-reeksen .bl-kop{border-top-color:rgba(255,255,255,.16)}
.bl-reeksen__intro{max-width:56ch;margin-bottom:2.2rem;color:#b9b6ad}
.bl-reeks{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.bl-reeks figure{margin:0;display:flex;flex-direction:column}
.bl-reeks img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:2px}
.bl-reeks h3{color:#fff;font-size:1.22rem;margin:1rem 0 .3rem}
.bl-reeks p{font-size:.93rem;color:#b9b6ad;margin:0 0 .9rem;flex:1}
.bl-reeks .bl-ppm{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);border:1px solid rgba(201,185,141,.4);border-radius:2px;padding:4px 10px}

/* ---------- Fleskaarten ---------- */
.bl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin:0}
.bl-grid--4{grid-template-columns:repeat(4,1fr)}
.bl-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:2px;background:#fff;overflow:hidden;transition:border-color .18s,box-shadow .18s}
.bl-card:hover{border-color:var(--btn);box-shadow:0 10px 30px rgba(42,66,30,.11)}
.bl-card__img{display:flex;align-items:center;justify-content:center;height:252px;padding:22px;background:linear-gradient(180deg,#fdfdfc 0%,var(--soft) 100%);border-bottom:1px solid var(--line-s)}
.bl-card__img img{max-height:208px;max-width:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.bl-card__body{display:flex;flex-direction:column;flex:1;padding:15px 16px 16px}
.bl-badge{align-self:flex-start;font-size:.63rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--btn);border:1px solid var(--line);border-radius:2px;padding:3px 7px;margin:0 0 9px}
.bl-card__title{font-size:.93rem;line-height:1.35;margin:0 0 7px;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-card__title a{text-decoration:none;color:var(--green)!important}
.bl-card__title a:hover{text-decoration:underline}
.bl-card__note{font-size:.8rem;line-height:1.5;color:var(--muted);margin:0 0 12px;min-height:3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-price{font-size:1.02rem;font-weight:700;color:var(--ink);margin:auto 0 11px;padding-top:11px;border-top:1px solid var(--line-s)}

/* ---------- CTA-band ---------- */
.bl-cta-band{background:var(--green-d);color:#fff;padding:3.2rem 0;text-align:center}
.bl-cta-band h2{color:#fff;margin-bottom:.35em}
.bl-cta-band p{color:#b9b6ad;max-width:44ch;margin:0 auto 1.6em}

/* ---------- Donkere verhaalband ---------- */
.bl-nachtband{position:relative;background:var(--nacht);color:#ddd9d0;padding:4rem 0 4.2rem;overflow:hidden}
.bl-nachtband__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;opacity:.28}
.bl-nachtband::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,rgba(14,17,9,.55) 0%,rgba(14,17,9,.9) 60%,rgba(14,17,9,.99) 100%)}
.bl-nachtband .bl-bleed__inner{position:relative;z-index:2}
.bl-nachtband h2{color:#fff}
.bl-nachtband h3{color:#fff}
.bl-nachtband .bl-kicker{color:var(--sand)}
.bl-nachtband .bl-kop{border-top-color:rgba(255,255,255,.18)}
.bl-nachtband p{color:#c2beb4}
.bl-nacht-grid{display:grid;grid-template-columns:1fr;gap:2.4rem}
@media(min-width:900px){.bl-nacht-grid{grid-template-columns:1.05fr .95fr;gap:3.2rem}}
.bl-nacht-grid p{max-width:58ch}
.bl-nachtband .bl-quote{border-left:2px solid var(--sand);padding:.1rem 0 .1rem 22px;margin:1.8rem 0 0;font-size:1.12rem;line-height:1.55;color:#efece4;font-style:normal}
.bl-nachtfig{margin:0 0 1.6rem;padding:0;background:none;border:0;border-radius:2px;overflow:hidden}
.bl-nachtfig img{display:block;width:100%;height:auto;border-radius:2px}
.bl-nachtfig img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:1px}
.bl-nachtfig figcaption{font-size:.8rem;color:#a09d95;margin:.7rem 2px 2px;line-height:1.5}
.bl-nachtband .bl-tijdlijn{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14)}
.bl-nachtband .bl-tijdlijn li{border-bottom-color:rgba(255,255,255,.12)}
.bl-nachtband .bl-tijdlijn__kop{background:rgba(255,255,255,.06);color:var(--sand);border-bottom-color:rgba(255,255,255,.14)}
.bl-nachtband .bl-tijdlijn b{color:#fff}
.bl-nachtband .bl-tijdlijn span{color:#b0ada4}
.bl-nachtband .bl-box{background:none;border:0;border-left:2px solid var(--sand);border-radius:0;padding:0 0 0 22px;margin:1.9rem 0 0}
.bl-nachtband .bl-box h3{color:#fff}
.bl-nachtband .bl-box p{color:#c2beb4}

/* ---------- Donkere verhaalband: leesbaarheid en rust ---------- */
/* De uitgelichte zin. Het thema geeft elke blockquote een lichte ondergrond;
   op deze donkere band stond daardoor lichte tekst op een licht vlak en was
   hij niet te lezen. Hier zetten we hem expliciet. */
.bl-nachtband blockquote.bl-quote,
#main .bl-nachtband blockquote.bl-quote,
.fusion-body .bl-nachtband blockquote.bl-quote{
  background:rgba(255,255,255,.055);
  border:0;border-left:2px solid var(--sand);border-radius:0 2px 2px 0;
  padding:18px 24px;margin:2.1rem 0 0;
  font-size:1.08rem;line-height:1.6;color:#f2efe7;font-style:normal;
  box-shadow:none;quotes:none;
}
.bl-nachtband blockquote.bl-quote p,
#main .bl-nachtband blockquote.bl-quote p{
  color:#f2efe7;margin:0;max-width:54ch;font-size:inherit;line-height:inherit;
}
.bl-nachtband blockquote.bl-quote p + p{margin-top:.65em}
.bl-nachtband blockquote.bl-quote::before,
.bl-nachtband blockquote.bl-quote::after,
.bl-nachtband blockquote.bl-quote p::before,
.bl-nachtband blockquote.bl-quote p::after{content:none;display:none}

/* Het kaartje 'In het kort': één ritme, cijfers die onder elkaar uitlijnen. */
.bl-nachtband .bl-tijdlijn{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
.bl-nachtband .bl-tijdlijn__kop{
  display:block;padding:13px 20px;font-size:.72rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
}
.bl-nachtband .bl-tijdlijn li{grid-template-columns:6.4rem 1fr;align-items:baseline;padding:14px 20px}
.bl-nachtband .bl-tijdlijn b{
  font-size:1.04rem;font-weight:700;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;color:#fff;
}
.bl-nachtband .bl-tijdlijn span{font-size:.86rem;line-height:1.5;color:#a9a69d}

/* De twee kolommen beginnen bovenaan; het kaartje loopt mee bij het lezen. */
.bl-nacht-grid{align-items:start}
@media(min-width:900px){
  .bl-nachtband .bl-nacht-media{position:sticky;top:1.6rem}
  .bl-nacht-grid{grid-template-columns:.86fr 1.14fr;gap:3.4rem}
}
/* De donkere band leest nu mee met het nieuwe ontwerp: grotere kop, iets meer
   contrast in de lopende tekst, en het accentstreepje in zand in plaats van
   groen (groen op nacht is bijna niet te zien). */
.bl-nachtband h2,
#main .bl-nachtband .bl-kop h2,
.fusion-body .bl-nachtband .bl-kop h2{font-family:Archivo,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.03em;line-height:1.08;font-size:clamp(1.55rem,3vw,2.15rem);text-wrap:balance;margin:0}
.bl-nachtband .bl-kop{padding-top:1.9rem;margin-bottom:2.4rem}
.bl-nachtband .bl-kop::before{background:var(--sand)}
.bl-nachtband p{color:#c8c4ba}
.bl-nachtband .bl-nacht-tekst>p{font-size:1.02rem;line-height:1.68}
.bl-nachtband .bl-nacht-tekst>p+p{margin-top:1.05em}
.bl-nachtband strong{color:#f2efe7;font-weight:700}
.bl-nachtband em{color:#e2ded4}
@media(min-width:900px){
}


/* ---------- Tijdlijn ---------- */
.bl-tijdlijn{list-style:none;margin:0;padding:0;background:var(--soft);border:1px solid var(--line);border-radius:2px}
.bl-tijdlijn li{display:grid;grid-template-columns:5.5rem 1fr;gap:14px;margin:0;padding:15px 20px;border-bottom:1px solid var(--line)}
.bl-tijdlijn li:last-child{border-bottom:0}
.bl-tijdlijn b{font-size:.93rem;color:var(--green);font-weight:700;line-height:1.5}
.bl-tijdlijn span{font-size:.9rem;color:var(--muted);line-height:1.55}
.bl-tijdlijn__kop{display:block!important;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);background:#fff;padding:12px 20px;border-bottom:1px solid var(--line)}

/* ---------- Blokken ---------- */
.bl-box{background:var(--soft);border:1px solid var(--line);border-left:3px solid var(--btn);border-radius:2px;padding:22px 26px;margin:2rem 0}
.bl-box h3{margin-top:0}
.bl-box ul{margin:0;padding-left:1.15em}
.bl-box li{margin:.3em 0}
.bl-knoppen{display:flex;flex-wrap:wrap;gap:11px;margin-top:18px}
.bl-quote{border:0;border-left:2px solid var(--btn);padding:.1rem 0 .1rem 22px;margin:1.8rem 0 0;font-size:1.14rem;line-height:1.55;color:var(--green);font-style:normal}

/* ---------- FAQ ---------- */
.bl-faqlijst{display:grid;grid-template-columns:1fr;gap:14px;margin:0}
@media(min-width:900px){.bl-faqlijst{grid-template-columns:1fr 1fr;gap:16px}}
.bl-faq{border:1px solid var(--line);border-radius:2px;background:#fff;overflow:hidden;margin:0;padding:0}
.bl-faq h3{margin:0;padding:15px 20px;background:var(--soft);border-bottom:1px solid var(--line);font-size:.98rem;line-height:1.4;color:var(--green);display:flex;gap:11px;align-items:flex-start}
.bl-faq h3::before{content:"?";flex:0 0 auto;width:21px;height:21px;margin-top:1px;border-radius:50%;background:var(--btn);color:#fff;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.bl-faq p{margin:0;padding:16px 20px 18px 51px;font-size:.93rem;line-height:1.65;color:var(--muted)}

/* ---------- Overig ---------- */
.bl-nix{font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);padding-top:1.1em;margin-top:2.2em}
.bl-credit{font-size:.78rem;color:#8d8b83;margin-top:2.2em}
.bl-verder{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--line-s)}
.bl-verder li{margin:0;display:flex}
.bl-verder a{display:flex;flex-direction:column;justify-content:center;gap:3px;flex:1;text-decoration:none;color:var(--green);font-weight:700;font-size:.95rem;border:0;padding:15px 18px;background:#fff;transition:background .15s}
.bl-verder a:hover{background:var(--soft)}
.bl-verder small{display:block;font-weight:400;font-size:.82rem;line-height:1.45;color:var(--muted)}
@media(max-width:820px){.bl-verder{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.bl-verder{grid-template-columns:1fr}}

/* ---------- Merkenregister ---------- */
.bl-zoek{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 1.2rem}
.bl-zoek input{flex:1 1 260px;min-width:0;font-size:1rem;padding:13px 16px;border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--ink);font-family:inherit}
.bl-zoek input:focus{outline:2px solid var(--btn);outline-offset:-2px;border-color:var(--btn)}
.bl-zoek__telling{font-size:.88rem;color:var(--muted);white-space:nowrap}
.bl-letters{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 1.8rem;padding:0;list-style:none}
.bl-letters li{margin:0}
.bl-letters a{display:flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 8px;font-size:.86rem;font-weight:700;text-decoration:none;color:var(--green)!important;background:#fff;border:1px solid var(--line);border-radius:2px}
.bl-letters a:hover{background:var(--green);border-color:var(--green);color:#fff!important}
.bl-letters span{display:flex;align-items:center;justify-content:center;min-width:34px;height:34px;font-size:.86rem;font-weight:700;color:#c2c0b8;border:1px solid var(--line-s);border-radius:2px}
.bl-letterblok{border:1px solid var(--line);border-radius:2px;margin:0 0 10px;background:#fff;scroll-margin-top:110px}
.bl-letterblok>summary{cursor:pointer;list-style:none;padding:14px 20px;background:var(--soft);font-weight:700;color:var(--green);font-size:1.02rem;display:flex;align-items:center;justify-content:space-between;gap:12px}
.bl-letterblok>summary::-webkit-details-marker{display:none}
.bl-letterblok>summary::after{content:"+";font-size:1.15rem;line-height:1;color:var(--btn);font-weight:700}
.bl-letterblok[open]>summary{border-bottom:1px solid var(--line)}
.bl-letterblok[open]>summary::after{content:"\2212"}
.bl-letterblok>summary small{font-weight:400;font-size:.8rem;color:var(--muted);margin-left:auto;margin-right:8px}
.bl-merken{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1px;background:var(--line-s);margin:0;padding:0;list-style:none}
.bl-merken li{margin:0;background:#fff}
.bl-merken a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;text-decoration:none;padding:11px 16px;color:var(--green)!important;font-size:.93rem;font-weight:600}
.bl-merken a:hover{background:var(--soft)}
.bl-merken .bl-aantal{font-size:.78rem;font-weight:400;color:var(--muted);white-space:nowrap}
.bl-merken .bl-eigen{display:inline-block;margin-left:6px;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--btn);border-radius:2px;padding:2px 5px;vertical-align:middle}
.bl-geenresultaat{display:none;padding:18px 20px;border:1px solid var(--line);border-radius:2px;background:var(--soft);color:var(--muted);font-size:.95rem}

/* ---------- Responsief ---------- */
@media(max-width:1080px){.bl-grid{grid-template-columns:repeat(3,1fr)}.bl-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.bl-hero__inner{padding:1.4rem 22px 1.1rem}.bl-hero__lead{font-size:.94rem;margin-bottom:1em}.bl-hero__cta{margin-bottom:1.1rem}.bl-stats b{font-size:1.3rem}.bl h2{font-size:1.55rem}.bl-section{margin:3rem 0}.bl-card__img{height:200px}.bl-card__img img{max-height:165px}.bl-nachtband{padding:3rem 0 3.2rem}}
@media(max-width:680px){.bl-hero h1{font-size:1.38rem;max-width:none}.bl-hero__inner{padding:1.15rem 20px 1rem}.bl-hero__lead{font-size:.89rem;margin-bottom:.8em}.bl-hero__bg{opacity:.42}.bl-stats{grid-template-columns:1fr 1fr;gap:10px 0;padding-top:.9rem}.bl-stats b{font-size:1.15rem}.bl-stats span{font-size:.7rem}.bl-btn--groot{font-size:.85rem;padding:11px 18px}.bl-grid,.bl-grid--4{grid-template-columns:repeat(2,1fr);gap:12px}.bl-card__img{height:160px;padding:14px}.bl-card__img img{max-height:132px}.bl-card__note{display:none}.bl-card__title{font-size:.86rem;min-height:2.6em}.bl-tijdlijn li{grid-template-columns:1fr;gap:2px}}

/* ---------- Liggende kaarten: voor twee of drie flessen, zodat er geen half leeg raster ontstaat ---------- */
.bl-duo{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:0}
.bl-duo .bl-card{flex-direction:row;align-items:stretch}
.bl-duo .bl-card__img{flex:0 0 172px;width:172px;height:auto;padding:20px;border-bottom:0;border-right:1px solid var(--line-s)}
.bl-duo .bl-card__img img{max-height:200px}
.bl-duo .bl-card__body{padding:20px 22px}
.bl-duo .bl-card__title{min-height:0;font-size:1rem;-webkit-line-clamp:3}
.bl-duo .bl-card__note{min-height:0;display:block;font-size:.86rem}
.bl-duo .bl-btn--blok{display:inline-block;width:auto;padding:10px 20px}
.bl-grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.bl-duo{grid-template-columns:1fr}}
@media(max-width:680px){.bl-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bl-duo .bl-card{flex-direction:column}.bl-duo .bl-card__img{flex:0 0 auto;width:100%;height:200px;border-right:0;border-bottom:1px solid var(--line-s)}.bl-duo .bl-btn--blok{display:block;width:100%;text-align:center}}

/* ---------- Waarom hier: verhaal links, feiten rechts ---------- */
.bl-waarom{display:grid;grid-template-columns:1fr;gap:2.2rem;align-items:start}
@media(min-width:900px){.bl-waarom{grid-template-columns:1.08fr .92fr;gap:3.4rem}}
.bl-waarom__tekst>p{max-width:58ch}
.bl-waarom__tekst>p:first-child{font-size:1.16rem;line-height:1.5;color:var(--ink);letter-spacing:-.008em}
.bl-waarom__tekst>p:last-child{margin-bottom:0;color:var(--muted)}
.bl-paneel{border:1px solid var(--line);border-radius:2px;background:var(--soft);overflow:hidden}
.bl-paneel h3{margin:0;padding:12px 20px;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);background:#fff;border-bottom:1px solid var(--line)}
.bl-paneel ul{list-style:none;margin:0;padding:0}
.bl-paneel li{margin:0;padding:14px 20px;border-bottom:1px solid var(--line);font-size:.89rem;line-height:1.55;color:var(--muted)}
.bl-paneel li:last-child{border-bottom:0}
.bl-paneel li b{display:block;color:var(--green);font-size:.95rem;font-weight:700;letter-spacing:-.005em;margin-bottom:2px}

/* ---------- Beeld boven de pagina ---------- */
/* Het thema herhaalt de uitgelichte afbeelding boven de inhoud, op de eigen maat van het bestand.
   Bij een staande foto vult die maar de halve breedte. De hero eronder toont hetzelfde beeld al
   over de volle breedte, dus dit blok gaat op merkpagina's uit. */
#content .post-slideshow,#content .fusion-flexslider.post-slideshow{display:none!important}
/* Elk beeld in een volle-breedte band vult die band altijd, ongeacht de verhouding van het bestand. */
.bl-hero__bg,.bl-nachtband__bg{width:100%!important;height:100%!important;object-fit:cover;object-position:center 52%}

/* ---------- Over de distilleerderij: beeld links, verhaal rechts ---------- */
.bl-nacht-grid{align-items:start}
@media(min-width:900px){.bl-nacht-grid{grid-template-columns:.82fr 1.18fr;gap:3.2rem}}
.bl-nacht-media{position:sticky;top:1.5rem}
@media(max-width:899px){.bl-nacht-media{position:static}}
.bl-nachtfig figcaption{margin-top:.55rem;font-size:.8rem;line-height:1.45;color:#a09d95}
.bl-nachtband .bl-nacht-tekst>p:first-child{font-size:1.08rem;line-height:1.6;color:#d9d6cd}

/* ================================================================
   Filter- en categoriepagina - uitbreiding op .bl, voorvoegsel .blf-
   Gebouwd 18-08-2026 naar het ontwerp Filterontwerp.dc.html (S1-S5).
   Geen nieuwe kleuren, geen tweede radius, geen animatie behalve
   het in- en uitschuiven van het filterpaneel (200ms, afgesproken
   uitzondering op motion 0.1).
   ================================================================ */

.blf{--vak:#c2c0b8}
.blf-kop{padding:0 0 4px}
.blf-kop h1{color:var(--green);font-size:clamp(1.5rem,3vw,2.15rem);line-height:1.1;letter-spacing:-.03em;font-weight:700;margin:0 0 8px}
.blf-kop p{font-size:1.02rem;line-height:1.6;color:var(--muted);max-width:62ch;margin:0}
.blf-kruimel{font-size:.81rem;color:var(--muted);margin:0 0 14px}
.blf-kruimel a{color:var(--muted)}

/* ---------- Raamwerk ---------- */
.blf-raam{display:grid;grid-template-columns:1fr;gap:0;align-items:start;margin-top:26px}
@media(min-width:900px){.blf-raam{grid-template-columns:280px 1fr;gap:36px}}
.blf-lijst{min-width:0}

/* ---------- Balk telefoon ---------- */
.blf-balk{position:sticky;top:0;z-index:40;display:flex;gap:10px;background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin:0 0 12px}
.blf-balk::before{content:"";position:absolute;top:-1px;left:0;width:54px;height:2px;background:var(--btn)}
.blf-balk .bl-btn{flex:1;text-align:center;min-height:48px;line-height:26px}
@media(min-width:900px){.blf-balk{display:none}}

/* ---------- Chips ---------- */
.blf-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:0 0 14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.blf-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--btn);color:var(--green);background:#fff;border-radius:2px;padding:7px 11px;font-size:.81rem;font-weight:600;text-decoration:none;white-space:nowrap}
.blf-chip:hover{background:var(--btn-h);border-color:var(--btn-h);color:#fff}
.blf-chip:hover .blf-chip__x{color:#fff}
.blf-chip__x{color:var(--muted);font-weight:400}
.blf-chip--vast{border-color:var(--line);background:var(--soft);color:var(--muted);cursor:default}
.blf-chip--vast:hover{background:var(--soft);border-color:var(--line);color:var(--muted)}
.blf-wis{font-size:.81rem;font-weight:600;text-decoration:underline;color:var(--green)}
@media(max-width:899px){.blf-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--line-s)}
 .blf-chip,.blf-wis{flex:0 0 auto}}

/* ---------- Kop boven de lijst ---------- */
.blf-lijstkop{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px}
.blf-telling{padding:14px 0 18px;font-size:.95rem;color:var(--muted)}
.blf-sorteer{display:flex;gap:10px;align-items:center;font-size:.83rem;color:var(--muted);flex:0 0 auto}
.blf-sorteer select{font-family:inherit;font-size:.83rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px;padding:9px 11px;min-height:40px}
.blf-sorteer select:focus-visible{outline:2px solid var(--btn);outline-offset:2px}
.blf-sorteer button{font-family:inherit;font-size:.8rem;font-weight:600;color:var(--green);background:transparent;border:1px solid var(--line);border-radius:2px;padding:9px 12px;min-height:40px;cursor:pointer}
.blf-sorteer button:hover{background:var(--soft);border-color:var(--green)}

/* ---------- Filterpaneel ---------- */
.blf-paneel{border:1px solid var(--line);border-radius:2px;background:#fff}
.blf-paneel__kop{padding:14px 18px;border-bottom:2px solid var(--green);display:flex;justify-content:space-between;align-items:center;gap:12px}
.blf-paneel__kop b{font-size:1.02rem;font-weight:700;color:var(--green)}
.blf-groep{border-bottom:1px solid var(--line)}
.blf-groep:last-child{border-bottom:0}
.blf-groep>summary{list-style:none;cursor:pointer;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:48px;font-size:.92rem;font-weight:700;color:var(--ink)}
.blf-groep>summary::-webkit-details-marker{display:none}
.blf-groep>summary:hover{background:var(--soft)}
.blf-groep>summary:focus-visible{outline:2px solid var(--btn);outline-offset:-2px}
.blf-groep__tel{font-weight:400;color:var(--muted)}
.blf-groep__teken{color:var(--muted);font-weight:400;font-size:1.05rem;line-height:1}
.blf-groep[open]>summary .blf-groep__teken::after{content:"\2212"}
.blf-groep:not([open])>summary .blf-groep__teken::after{content:"+"}
.blf-groep__body{padding:0 18px 16px}

/* ---------- Aanvinkvakje, vijf staten ---------- */
.blf-keuze{display:flex;align-items:center;gap:11px;font-size:.92rem;line-height:1.35;color:var(--ink);text-decoration:none;padding:5px 0;min-height:34px}
.blf-keuze:hover{background:var(--soft);color:var(--ink)}
.blf-keuze:hover .blf-vak{border-color:var(--btn)}
.blf-keuze:focus-visible{outline:2px solid var(--btn);outline-offset:2px}
.blf-vak{flex:0 0 18px;width:18px;height:18px;border:1px solid var(--vak);border-radius:2px;background:#fff;display:block}
.blf-keuze__naam{flex:1}
.blf-keuze__n{color:var(--muted);font-size:.85rem}
.blf-keuze--aan{font-weight:600}
.blf-keuze--aan .blf-vak{border-color:var(--btn);background:var(--btn);color:#fff;font-size:12px;line-height:16px;text-align:center;font-weight:700}
.blf-keuze--uit0{color:var(--vak);pointer-events:none}
.blf-keuze--uit0 .blf-vak{border-color:var(--line-s);background:var(--soft)}
.blf-keuze--uit0 .blf-keuze__n{color:var(--vak)}
@media(max-width:899px){.blf-keuze{min-height:44px;font-size:.95rem}}

/* ---------- Velden ---------- */
.blf-veld{width:100%;font-family:inherit;font-size:.9rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px;padding:9px 11px;min-height:40px}
.blf-veld:focus-visible{outline:2px solid var(--btn);outline-offset:2px}
@media(max-width:899px){.blf-veld{min-height:44px;font-size:.95rem}}
.blf-duo{display:flex;gap:8px;margin-top:10px}
.blf-duo .blf-veld{width:50%;min-width:0}
.blf-hint{font-size:.78rem;line-height:1.5;color:var(--muted);margin:8px 0 0}
.blf-meer{display:inline-block;margin-top:10px;font-size:.88rem;font-weight:600;text-decoration:underline;color:var(--green)}

/* ---------- Filterpaneel op de telefoon ---------- */
@media(max-width:899px){
 .blf-zij{position:fixed;inset:0;z-index:60;background:rgba(14,17,9,.55);display:none}
 .blf-zij:target{display:block}
 .blf-zij__doos{position:absolute;left:0;right:0;bottom:0;top:6%;background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:2px 2px 0 0;transform:translateY(100%);animation:blf-in .2s ease-out forwards}
 .blf-paneel{border:0}
 .blf-paneel__kop{position:sticky;top:0;background:#fff;z-index:2}
 .blf-voet{position:sticky;bottom:0;border-top:2px solid var(--green);background:var(--soft);padding:12px 16px;display:flex;gap:10px;align-items:center}
 .blf-voet .bl-btn{flex:1;text-align:center;min-height:48px;line-height:26px}
}
@keyframes blf-in{to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.blf-zij__doos{animation:none!important;transform:none!important}}
.blf-sluit{font-size:1.25rem;color:var(--muted);width:44px;height:44px;display:flex;align-items:center;justify-content:center;text-decoration:none;margin:-10px -10px -10px 0}
@media(min-width:900px){.blf-zij{display:block!important;position:sticky;top:20px}.blf-zij__doos{position:static;transform:none;animation:none}.blf-sluit,.blf-voet{display:none}}

/* ---------- Lijstkaart ---------- */
.blf-raster{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:600px){.blf-raster{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(min-width:900px){.blf-raster{grid-template-columns:repeat(4,1fr);gap:18px}}
.bl-card--lijst .bl-card__img{height:150px;padding:12px}
.bl-card--lijst .bl-card__img img{max-height:126px}
@media(min-width:900px){.bl-card--lijst .bl-card__img{height:200px;padding:16px}.bl-card--lijst .bl-card__img img{max-height:168px}}
.bl-card--lijst .bl-card__body{padding:11px 12px 12px}
@media(min-width:900px){.bl-card--lijst .bl-card__body{padding:12px 14px 14px}}
.bl-card--lijst .bl-card__title{font-size:.82rem;line-height:1.28;min-height:2.56em}
@media(min-width:900px){.bl-card--lijst .bl-card__title{font-size:.88rem;line-height:1.3}}
.bl-card--lijst .bl-price{font-size:.98rem}
@media(min-width:900px){.bl-card--lijst .bl-price{font-size:1.05rem}}
.bl-card--lijst .bl-btn--blok{min-height:44px;line-height:24px;font-size:.84rem}
.blf-geenfoto{flex-direction:column;gap:8px}
.blf-geenfoto b{font-size:.8rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--vak)}
.blf-geenfoto span{font-size:.78rem;line-height:1.45;color:var(--muted);text-align:center}
.bl-card--uit{border-color:var(--line-s)}
.bl-card--uit .bl-card__img{opacity:.45}
.bl-card--uit .bl-card__title a{color:var(--muted)!important}
.bl-card--uit .bl-price{color:var(--muted)}
.bl-card--uit .bl-badge{color:var(--muted);border-color:var(--line-s)}
.blf-oud{font-size:.85rem;font-weight:400;color:var(--muted);text-decoration:line-through;margin-left:6px}
.bl-badge--op{background:var(--green);color:#fff;border-color:var(--green)}

/* ---------- Lege staat ---------- */
.blf-leeg{padding:8px 0 0}
.blf-leeg h2{margin-bottom:.5em}
.blf-leeg__rij{display:grid;grid-template-columns:1fr;gap:12px;margin:22px 0 24px}
@media(min-width:700px){.blf-leeg__rij{grid-template-columns:1fr 1fr}}
.blf-los{border:1px solid var(--line);border-radius:2px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.blf-los b{display:block;font-size:.95rem;font-weight:700;color:var(--ink)}
.blf-los span{display:block;font-size:.88rem;color:var(--muted);margin-top:2px}

/* ---------- Overgang naar de webshop ---------- */
.blf-overstap{border:1px solid var(--line);border-left:3px solid var(--btn);background:var(--soft);border-radius:2px;padding:14px 18px;margin:26px 0 0;font-size:.88rem;line-height:1.6;color:var(--muted)}
.blf-overstap b{color:var(--ink)}

/* ---------- Paginering, raakvlak 44px ---------- */
.blf-pag .bl-letters li a{min-width:44px;min-height:44px;line-height:44px}

/* correcties na de eerste browsercontrole 18-08-2026 */
.blf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:899px){.blf-lijstkop{padding-bottom:12px}.blf-sorteer{flex-wrap:wrap;width:100%;gap:8px}.blf-sorteer label{flex:0 0 auto}.blf-sorteer select{flex:1 1 130px;min-width:0;max-width:100%}.blf-sorteer button{flex:0 0 auto}}
.blf-raam,.blf-lijst,.blf-raster{max-width:100%}
@media(max-width:899px){.blf-sorteer select,.blf-sorteer button{min-height:44px}}
@media(max-width:899px){.blf-sorteer{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 10px;width:100%}.blf-sorteer select{width:100%}.blf-sorteer button{grid-column:1/-1;justify-self:start;padding:10px 18px}}

/* Whiskysectie: subnavigatie, keuzeblok en zoekveld in de hero (18-08-2026) */
.blf-nav{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--soft);margin:0 0 6px;position:relative}
.blf-nav::before{content:'';position:absolute;top:-1px;left:0;width:54px;height:2px;background:var(--btn)}
.blf-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.blf-nav li{margin:0}
.blf-nav a{display:block;padding:12px 18px;font-size:.92rem;font-weight:600;color:var(--green);text-decoration:none;min-height:44px}
.blf-nav a:hover{background:#fff}
.blf-nav a:focus-visible{outline:2px solid var(--btn);outline-offset:-2px}
.blf-nav a[aria-current="page"]{background:#fff;box-shadow:inset 0 -2px 0 var(--btn)}
.blf-nav small{display:block;font-size:.76rem;font-weight:400;color:var(--muted);margin-top:2px}
@media(max-width:700px){.blf-nav ul{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}.blf-nav a{white-space:nowrap}}
.blf-keuze2{display:grid;grid-template-columns:1fr;gap:18px;margin:0 0 1.4rem}
@media(min-width:760px){.blf-keuze2{grid-template-columns:1fr 1fr}}
.blf-keuzevak{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:2px;background:#fff;padding:22px 24px}
.blf-keuzevak--nadruk{border-left:3px solid var(--btn);background:var(--soft)}
.blf-keuzevak h3{margin-top:0}
.blf-keuzevak p{font-size:.93rem;line-height:1.6;color:var(--muted);flex:1;margin-bottom:1.1em}
.blf-keuzevak .bl-btn{align-self:flex-start}
.bl-hero .bl-zoek{max-width:600px;margin:0 0 1rem}
.bl-hero .bl-zoek input{padding:12px 15px;font-size:.98rem}
.bl-hero .bl-zoek button{font-family:inherit;cursor:pointer}


/* slijterij 2026-08-21 */

/* Slijterij-ingang: fototegels, kleine tegels, smaakvakken en streekraster */
.slij-raster{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:18px}
@media(min-width:900px){.slij-raster{grid-template-columns:1.35fr 1fr 1fr}}
.slij-tegel{position:relative;display:block;border-radius:2px;overflow:hidden;min-height:240px;color:#fff;text-decoration:none}
@media(min-width:900px){.slij-tegel{min-height:340px}}
.slij-tegel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%}
.slij-tegel--vlak{background:linear-gradient(160deg,var(--green) 0%,var(--nacht) 100%)}
.slij-tegel__waas{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,12,6,.15) 30%,rgba(9,12,6,.88) 100%)}
.slij-tegel__tekst{position:absolute;left:24px;right:24px;bottom:22px}
.slij-tegel__kicker{display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sand)}
.slij-tegel__naam{display:block;font-size:1.7rem;font-weight:700;letter-spacing:-.03em;line-height:1.05;margin-top:6px}
@media(min-width:900px){.slij-tegel--groot .slij-tegel__naam{font-size:2.1rem}}
.slij-tegel__regel{display:block;font-size:.92rem;color:#d9d6cd;margin-top:6px}
.slij-tegel:hover .slij-tegel__waas{background:linear-gradient(180deg,rgba(9,12,6,.25) 20%,rgba(9,12,6,.93) 100%)}
.slij-tegel:focus-visible{outline:2px solid var(--btn);outline-offset:2px}
.slij-raster3{display:grid;grid-template-columns:1fr;gap:1px;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--line-s)}
@media(min-width:700px){.slij-raster3{grid-template-columns:repeat(3,1fr)}}
.slij-klein{display:block;background:#fff;padding:18px 20px;text-decoration:none;min-height:44px}
.slij-klein:hover{background:var(--soft)}
.slij-klein__kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.slij-klein__kop b{font-size:1.12rem;font-weight:700;color:var(--green);letter-spacing:-.02em}
.slij-klein__kop span{font-size:.86rem;color:var(--muted)}
.slij-klein__regel{display:block;font-size:.88rem;line-height:1.5;color:var(--muted);margin-top:4px}
.slij-smaak{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.slij-smaak{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.slij-smaak{grid-template-columns:repeat(4,1fr);gap:18px}}
.slij-smaakvak{display:block;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#fff;text-decoration:none}
.slij-smaakvak:hover{border-color:var(--btn);box-shadow:0 10px 30px rgba(42,66,30,.11)}
.slij-smaakvak:focus-visible{outline:2px solid var(--btn);outline-offset:2px}
.slij-smaakvak__beeld{display:block;position:relative;height:168px;background:linear-gradient(160deg,#1d2b12 0%,#131a0d 45%,#0b0e07 100%)}
.slij-smaakvak__beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.slij-smaakvak__tag{position:absolute;left:18px;bottom:16px;color:var(--sand);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.slij-smaakvak__body{display:block;padding:16px 18px 18px}
.slij-smaakvak__naam{display:block;font-size:1.1rem;font-weight:700;color:var(--green);letter-spacing:-.02em}
.slij-smaakvak__naam em{font-style:normal;font-weight:400;font-size:.86rem;color:var(--muted);margin-left:6px}
.slij-smaakvak__uitleg{display:block;font-size:.88rem;line-height:1.5;color:var(--muted);margin-top:5px}
.slij-streek{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--line-s)}
@media(min-width:700px){.slij-streek{grid-template-columns:repeat(4,1fr)}}
.slij-streek a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:#fff;padding:15px 18px;font-weight:700;font-size:.96rem;color:var(--green);text-decoration:none;min-height:44px}
.slij-streek a:hover{background:var(--soft)}
.slij-streek a:focus-visible{outline:2px solid var(--btn);outline-offset:-2px}
.slij-streek__n{font-weight:400;font-size:.86rem;color:var(--muted)}
.blf-register{margin:0}
.blf-voetnoot{font-size:.86rem;line-height:1.55;color:var(--muted);margin:1.6rem 0 0}

.slij-drie{display:grid;grid-template-columns:1fr;gap:1.8rem}
@media(min-width:760px){.slij-drie{grid-template-columns:repeat(3,1fr);gap:1.6rem}}
.slij-drie .bl-nachtfig{margin:0}
.slij-drie figcaption b{color:#fff;font-size:1.02rem}
.slij-drie figcaption a{color:var(--sand)}

.blf-voetnoot a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.blf-voetnoot a:hover{color:var(--btn)}

/* wereldbol */
.blw-regio{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:.95rem;font-weight:700;color:var(--green);margin:1.6rem 0 .6rem;padding-bottom:.4rem;border-bottom:1px solid var(--line-s)}
.blw-regio span{font-weight:400;font-size:.85rem;color:var(--muted)}
.bl-merken small{display:inline-block;margin-left:6px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* de oude .blw-bol-plaatshouder is vervallen; zie "Whiskywereldbol" verderop */
.blw-bol[hidden]{display:none}

/* ---------- Whiskywereldbol ---------- */
.blw-bol{margin:0 0 .4rem}
.blw-bol__kader{position:relative;max-width:640px;margin:0 auto;background:var(--nacht);border:1px solid rgba(201,185,141,.22);border-radius:2px}
.blw-bol__doek{display:block;width:100%;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.blw-knoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.blw-knop{font:inherit;font-size:.82rem;font-weight:700;color:var(--green);background:#fff;border:1px solid var(--line);border-radius:2px;padding:8px 14px;cursor:pointer}
.blw-knop:hover{border-color:var(--btn);color:var(--btn)}
.blw-knop[aria-pressed="true"]{background:var(--soft)}
.blw-tip{position:absolute;z-index:3;max-width:260px;background:#fff;border:1px solid var(--line);border-radius:2px;padding:12px 14px;box-shadow:0 6px 24px rgba(9,12,6,.4);font-size:.86rem;line-height:1.45}
.blw-tip b{display:block;color:var(--green);font-size:.95rem;margin-bottom:2px;line-height:1.25}
.blw-tip span{display:block;color:var(--muted);font-size:.8rem}
.blw-tip__vraag{color:#8a7a4a!important}
.blw-tip__lijst{list-style:none;margin:.55rem 0 .1rem;padding:0}
.blw-tip__lijst li{margin:0 0 3px}
.blw-tip a{display:inline-block;margin-top:.5rem;font-weight:700;color:var(--btn);text-decoration:none}
.blw-tip a:hover{text-decoration:underline}
.blw-tip__lijst a{margin-top:0;font-weight:400;color:var(--ink)}
.blw-legenda{font-size:.82rem;color:var(--muted);margin:1rem 0 0;max-width:70ch;line-height:1.6}
.blw-legenda i{font-style:normal;display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--sand);margin:0 4px 0 2px;vertical-align:0}
.blw-legenda i.leeg{background:none;border:1.5px solid var(--sand)}
@media(max-width:680px){.blw-tip{max-width:210px;font-size:.8rem}.blw-knop{font-size:.78rem;padding:7px 11px}}

/* ---------- Bol met de merken ernaast ---------- */
.blw-vlak{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:26px;align-items:start}
.blw-vlak__bol{min-width:0}
.blw-vlak .blw-bol__kader{max-width:none}
.blw-zij{min-width:0;border:1px solid var(--line);background:#fff;border-radius:2px;padding:18px 18px 10px;position:sticky;top:20px;max-height:calc(100vh - 40px);display:flex;flex-direction:column}
.blw-zij__kop{border-bottom:1px solid var(--line);padding-bottom:.9rem;margin-bottom:.2rem}
.blw-zij__kop h3{margin:.1em 0 .35em;font-size:1.24rem}
.blw-zij__kop p{font-size:.88rem;color:var(--muted);margin:0 0 .7em;line-height:1.5}
.blw-zij__links{display:flex;flex-wrap:wrap;gap:6px;margin:0!important}
.blw-zij__lijst{overflow-y:auto;overscroll-behavior:contain;margin:0 -18px;padding:0 18px;flex:1 1 auto;min-height:120px}
.blw-zij .bl-merken{grid-template-columns:1fr;margin:.5rem 0 .9rem;background:var(--line-s)}
.blw-zij .bl-merken a{padding:9px 12px;font-size:.9rem}
.blw-zij .blw-regio{margin:1.1rem 0 .5rem;font-size:.86rem}
.blw-zij__leeg{font-size:.9rem;color:var(--muted);padding:1.2rem 0}
@media (max-width:1024px){
  .blw-vlak{grid-template-columns:1fr;gap:18px}
  .blw-zij{position:static;max-height:none}
  .blw-zij__lijst{max-height:62vh}
}


/* actieve tab duidelijker: wit vlak alleen is te subtiel naast --soft */
.blf-nav a[aria-current="page"]{background:#fff;box-shadow:inset 0 -3px 0 var(--btn);color:var(--green-d)}
.blf-nav a[aria-current="page"] small{color:var(--green)}


/* Uitleg per Schotse whiskyregio in het zijpaneel van de bol */
.blw-streek{border-top:1px solid var(--line);padding:14px 0 4px;margin-top:4px}
.blw-streek__lead{margin:0 0 10px;font-size:.95rem;line-height:1.55}
.blw-streek__feiten{margin:0;padding:0}
.blw-streek__feiten>div{padding:9px 0;border-top:1px solid var(--line-s)}
.blw-streek__feiten dt{margin:0;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--btn)}
.blw-streek__feiten dd{margin:3px 0 0;font-size:.88rem;line-height:1.5;color:var(--ink)}
.blw-streek__voet{margin:10px 0 0;font-size:.76rem;line-height:1.45;color:var(--muted)}


/* ==========================================================================
   Systeem 7.0 — de fundering
   --------------------------------------------------------------------------
   Uit het ontwerp "Systeem 7.0 · Het systeem zelf". Drie dingen:
   de vloeiende tekstschaal met opgetilde ondergrenzen, de drie afstanden,
   en het kleurrantsoen.

   Deze laag verandert in zijn eentje NIETS aan het uiterlijk: de tokens staan
   los en de regels gelden pas binnen .bl-s7. Een pagina stapt er zelf in door
   die klasse naast .bl te zetten. Zo kan het per pagina aan, en per pagina uit.

   Geen nieuwe kleuren: grond #fff, paneel #F8F7F4, inkt #22241E,
   bijtekst #63645C, lijn #E2DFD7, accent #638351, green #2A421E,
   nacht #0E1109 en zand #C9B98D staan alle negen al in dit stijlblad.

   De bewegingslaag uit deel 3 van het ontwerp is hier BEWUST niet gebouwd.
   Die schrapt de staande regel "geen animatie, geen parallax" en dat is een
   besluit van 't Bockje, geen keuze van de bouwer.
   ========================================================================== */

.bl {
  /* De vloeiende schaal. De onderste acht treden zijn opgetild omdat de
     oorspronkelijke schaal lopende tekst op 11,0 px zette op een telefoon.
     Elke trede staat als clamp(ondergrens, ondergrens + vw, bovengrens);
     de bovenste zes zijn onveranderd overgenomen. */
  --tekst-2xs:  clamp(0.727rem, calc(0.727rem + 0.095vw), 0.81rem);
  --tekst-xs:   clamp(0.789rem, calc(0.789rem + 0.095vw), 0.88rem);
  --tekst-sm:   clamp(0.914rem, calc(0.914rem + 0.095vw), 1.00rem);
  --tekst-base: clamp(1.016rem, calc(1.016rem + 0.190vw), 1.19rem);
  --tekst-lg:   clamp(1.056rem, calc(1.056rem + 0.286vw), 1.31rem);
  --tekst-xl:   clamp(1.181rem, calc(1.181rem + 0.286vw), 1.44rem);
  --tekst-2xl:  clamp(1.306rem, calc(1.306rem + 0.286vw), 1.56rem);
  --tekst-3xl:  clamp(1.407rem, calc(1.407rem + 0.381vw), 1.75rem);
  --tekst-4xl:  clamp(1.500rem, 2.20vw, 2.21rem);
  --tekst-5xl:  clamp(2.025rem, 3.03vw, 3.05rem);
  --tekst-6xl:  clamp(2.475rem, 3.65vw, 3.73rem);
  --tekst-7xl:  clamp(3.000rem, 4.41vw, 4.52rem);
  --tekst-8xl:  clamp(3.500rem, 4.97vw, 5.09rem);
  --tekst-9xl:  clamp(5.250rem, 7.73vw, 7.92rem);

  /* Drie afstanden in plaats van vaste marges. De afstand zegt of twee
     blokken bij elkaar horen; daarom zijn het er drie en niet zeven. */
  --ruimte-nabij: 8px;    /* kop en tekst die bij elkaar horen */
  --ruimte-in:    18px;   /* binnen een blok */
  --ruimte-blok:  36px;   /* tussen twee blokken in dezelfde sectie */
  --ruimte-sectie: 72px;  /* tussen secties, en dan maar aan één kant */
}

/* -- Tekst ---------------------------------------------------------------- */
.bl-s7 { font-size: var(--tekst-base); line-height: 1.68; }
.bl-s7 p, .bl-s7 li { max-width: 66ch; }
.bl-s7 h1 { font-size: var(--tekst-4xl); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; color: var(--green); }
.bl-s7 h2 { font-size: var(--tekst-2xl); line-height: 1.12; letter-spacing: -.022em; font-weight: 700; color: var(--ink); }
.bl-s7 h3 { font-size: var(--tekst-xl); line-height: 1.2; letter-spacing: -.01em; font-weight: 700; color: var(--ink); }
.bl-s7 .bl-intro, .bl-s7 .bl-hero__lead { font-size: var(--tekst-lg); line-height: 1.55; }
.bl-s7 small, .bl-s7 .bl-bijtekst { font-size: var(--tekst-sm); color: var(--muted); }
.bl-s7 .bl-credit, .bl-s7 .bl-peildatum { font-size: var(--tekst-2xs); color: var(--muted); }
/* Cijfers even breed, zodat een getal in een tabel niet danst. */
.bl-s7 table, .bl-s7 .bl-aantal, .bl-s7 .bl-stats b, .bl-s7 .bl-prijs { font-variant-numeric: tabular-nums; }

/* -- Ruimte --------------------------------------------------------------- */
/* De sectiemarge stond boven en onder; met de kop erbij liep dat op tot 242 px
   tussen twee secties. Nu staat hij één keer, alleen bovenaan. */
.bl-s7 .bl-section { margin: var(--ruimte-sectie) 0 0; }
.bl-s7 .bl-section:first-child { margin-top: 0; }
.bl-s7 .bl-kop { padding-top: 0; margin-bottom: var(--ruimte-in); }
.bl-s7 .bl-kop h2 { margin-bottom: var(--ruimte-nabij); }
.bl-s7 .bl-kop .bl-intro { margin-top: var(--ruimte-nabij); }

/* -- Het kleurrantsoen ----------------------------------------------------- */
/* Accentgroen mag op drie soorten plekken staan: de knop, de kicker en de
   badge. Hiërarchie in koppen komt van gewicht en grootte, niet van kleur;
   daarom is alleen de H1 groen en zijn H2 en H3 inkt. */
.bl-s7 .bl-kicker { color: var(--btn); }
.bl-s7 .bl-badge { color: var(--btn); border: 1px solid var(--btn); background: transparent;
  display: inline-block; font-size: var(--tekst-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 2px; }
/* Op donkere grond haalt accentgroen de contrastdrempel niet; daar is zand de
   kicker. De twee komen elkaar dus nooit tegen. */
.bl-s7 .bl-hero .bl-kicker, .bl-s7 .bl-reeksen .bl-kicker,
.bl-s7 .bl-band .bl-kicker { color: var(--sand); }
.bl-s7 .bl-hero .bl-badge, .bl-s7 .bl-band .bl-badge { color: var(--sand); border-color: rgba(201,185,141,.55); }

/* Op donkere grond wint de ondergrond. Het rantsoen zegt dat de H1 groen is en
   H2 en H3 inkt, maar op de nachtband en de hero haalt geen van beide de
   contrastdrempel. Daar is de kop wit en de kicker zand. Dit stond niet in het
   ontwerp; het kwam eruit bij het bekijken van de eerste pagina. */
.bl-s7 .bl-hero h1, .bl-s7 .bl-hero h2, .bl-s7 .bl-hero h3,
.bl-s7 .bl-reeksen h2, .bl-s7 .bl-reeksen h3,
.bl-s7 .bl-band h2, .bl-s7 .bl-cta-band h2, .bl-s7 .bl-cta-band h3 { color: #fff; }
.bl-s7 .bl-cta-band p, .bl-s7 .bl-reeksen p { color: #d9d6cd; }

/* -- Het raster telt zijn kaarten ------------------------------------------ */
/* Vijf vaste kolommen met drie kaarten erin levert twee lege plekken op. */
.bl-s7 .bl-grid { grid-template-columns: repeat(5, 1fr); }
.bl-s7 .bl-grid--4 { grid-template-columns: repeat(4, 1fr); }
.bl-s7 .bl-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bl-s7 .bl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.bl-s7 .bl-grid--1 { grid-template-columns: 1fr; }
@media (max-width: 900px) { .bl-s7 .bl-grid, .bl-s7 .bl-grid--4, .bl-s7 .bl-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 430px) { .bl-s7 .bl-grid--lang { grid-template-columns: 1fr; } }


/* Kruimelpad en voetnoot: twee onderdelen die het regio-ontwerp vraagt en
   die in de v1-helft nog niet bestonden. */
.bl-kruimel{font-size:var(--tekst-sm,.9rem);color:var(--muted);margin:18px 0 0;max-width:1160px;padding:0 26px}
.bl-kruimel a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.bl-kruimel a:hover{color:var(--btn)}
.bl-voetnoot{margin-top:18px;font-size:var(--tekst-sm,.9rem);line-height:1.55;color:var(--muted);max-width:74ch}
.bl-s7 .bl-verder li>span{display:block;background:#fff;border:1px solid var(--line);padding:14px 16px}
.bl-s7 .bl-verder li>span small{display:block;font-weight:400;font-size:var(--tekst-sm);color:var(--muted);margin-top:4px;line-height:1.5}


/* -- Maten en uitvoeringen ------------------------------------------------- */
/* Dezelfde drank in 20, 35, 70 en 100 cl is een reeks artikelen in de webshop
   maar een bladzijde hier. Deze tabel zet ze naast elkaar. */
.bl-matenwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bl-maten{width:100%;border-collapse:collapse;font-size:.95rem;min-width:34rem}
.bl-maten th,.bl-maten td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:middle}
.bl-maten th{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom-width:2px}
.bl-maten th:last-child,.bl-maten td:last-child{text-align:right;white-space:nowrap}
.bl-maten__dit td{background:rgba(0,0,0,.035)}
.bl-maten__hier{display:inline-block;margin-left:.55em;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--btn)}
.bl-noot{margin-top:1rem;font-size:.85rem;color:var(--muted)}
@media(max-width:680px){.bl-maten{min-width:29rem;font-size:.9rem}.bl-maten th,.bl-maten td{padding:.7rem .55rem}}


/* -- Register van alle flespagina's ---------------------------------------- */
.bl-flesindex__letters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 1.6rem}
.bl-flesindex__letters a{display:inline-block;min-width:2.1em;text-align:center;padding:.35em .5em;border:1px solid var(--line);text-decoration:none;font-weight:700;font-size:.85rem}
.bl-flesindex__letters a:hover{border-color:var(--btn);color:var(--btn)}
.bl-flesindex__groep{border-bottom:1px solid var(--line)}
.bl-flesindex__groep>summary{cursor:pointer;padding:.85rem .2rem;font-weight:700;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;align-items:baseline}
.bl-flesindex__groep>summary::-webkit-details-marker{display:none}
.bl-flesindex__groep>summary span{font-weight:400;font-size:.85rem;color:var(--muted)}
.bl-flesindex__groep>summary:hover{color:var(--btn)}
.bl-flesindex__lijst{list-style:none;margin:0 0 1.2rem;padding:0;columns:3;column-gap:2rem}
.bl-flesindex__lijst li{break-inside:avoid;margin:0 0 .38em;font-size:.92rem;line-height:1.45}
@media(max-width:900px){.bl-flesindex__lijst{columns:2}}
@media(max-width:620px){.bl-flesindex__lijst{columns:1}}

/* Brede nachtband en merkenknop, toegevoegd 01-09-2026 voor de claimpagina.
   Terugweg: dit blok verwijderen of uploads/bockje-seo/backup-bockje-merkpagina-20260901b.css terugzetten. */
.bl .bl-nachtfig--panorama{margin:0}
.bl .bl-nachtfig--panorama img{aspect-ratio:21/9;object-position:center 55%}
.bl .bl-nacht-feiten{display:grid;grid-template-columns:1fr;gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:2px;margin:1.9rem 0 0;padding:0;list-style:none}
@media(min-width:700px){.bl .bl-nacht-feiten{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.bl .bl-nacht-feiten{grid-template-columns:repeat(4,1fr)}}
.bl .bl-nacht-feiten li{background:rgba(14,17,9,.6);margin:0;padding:16px 18px;font-size:.9rem;line-height:1.55;color:#b0ada4}
.bl .bl-nacht-feiten b{display:block;color:#fff;font-size:.97rem;margin-bottom:5px;font-weight:700}
.bl .bl-merkenknop{margin:0 0 10px}
.bl .bl-merkenknop>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:baseline;gap:10px;background:var(--btn);color:#fff;padding:13px 22px;border-radius:2px;font-weight:700;font-size:1rem}
.bl .bl-merkenknop>summary::-webkit-details-marker{display:none}
.bl .bl-merkenknop>summary small{font-weight:400;font-size:.85rem;opacity:.85}
.bl .bl-merkenknop>summary:hover{background:var(--btn-hover,#4C6A3D)}
.bl .bl-merkenknop[open]>summary{margin-bottom:20px}


/* Fotoband: horizontaal schuivende strook winkelfoto's (toegevoegd 01-09-2026).
   Werkt zonder JavaScript; op de telefoon schuift hij, op de laptop staan alle foto's naast elkaar. */
.bl .bl-fotoband{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:0 0 12px;margin:0;scrollbar-width:thin}
@media(min-width:700px){.bl .bl-fotoband{grid-auto-columns:42%}}
@media(min-width:1000px){.bl .bl-fotoband{grid-auto-columns:1fr;overflow-x:visible;scroll-snap-type:none;grid-auto-flow:column}}
.bl .bl-fotoband>figure{scroll-snap-align:start;margin:0;min-width:0}
.bl .bl-fotoband img{display:block;width:100%;height:300px;object-fit:cover;border-radius:2px}
@media(min-width:1000px){.bl .bl-fotoband img{height:340px}}
.bl .bl-fotoband figcaption{margin:.55rem 2px 0;font-size:.8rem;line-height:1.45;color:var(--muted)}
.bl .bl-fotoband__hint{margin:.4rem 0 0;font-size:.78rem;color:var(--muted)}
@media(min-width:1000px){.bl .bl-fotoband__hint{display:none}}


/* Cijfertabel op de claimpagina's (bl-claim-getallen-1.php), 09-09-2026 */
.bl .bl-tabelwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.2rem 0 .6rem}
.bl table.bl-cijfers{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
.bl table.bl-cijfers caption{caption-side:bottom;margin-top:.7rem;font-size:.8rem;line-height:1.5;color:var(--muted);text-align:left}
.bl table.bl-cijfers th,.bl table.bl-cijfers td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--line-s);vertical-align:baseline}
.bl table.bl-cijfers thead th{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.bl table.bl-cijfers tbody th{font-weight:600}
.bl table.bl-cijfers tbody th a{color:var(--green);text-decoration:none}
.bl table.bl-cijfers tbody th a:hover{text-decoration:underline}
.bl table.bl-cijfers tbody tr:hover{background:var(--soft)}
.bl table.bl-cijfers .bl-getal{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.bl .bl-positie{font-size:.78rem;color:var(--muted);white-space:nowrap}
.bl .bl-positie--eerste{color:var(--green);font-weight:600}
@media(max-width:640px){.bl table.bl-cijfers{font-size:.86rem}.bl table.bl-cijfers th,.bl table.bl-cijfers td{padding:8px 10px}}

/* Cadeau- en geschenkpaginas (bl-geschenk-1.php en bl-geschenk-2.php), 10-09-2026 */
.bl .bl-routes{display:grid;gap:1.1rem;margin:1.2rem 0 0}
@media(min-width:860px){.bl .bl-routes{grid-template-columns:repeat(3,1fr)}}
.bl .bl-route{background:var(--soft);border:1px solid var(--line-s);border-radius:3px;padding:1.15rem 1.25rem}
.bl .bl-route h3{margin:0 0 .5rem;font-size:1.02rem;line-height:1.35;color:var(--green)}
.bl .bl-route p{margin:0;font-size:.93rem;line-height:1.65}
.bl .bl-band{margin:1.7rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line-s)}
.bl .bl-band:first-child{border-top:0;padding-top:0;margin-top:1.1rem}
.bl .bl-band h3{margin:0;font-size:1.05rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem}
.bl .bl-band__tel{font-size:.76rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.bl .bl-band__zin{margin:.3rem 0 0;font-size:.9rem;color:var(--muted)}
.bl .bl-rij{position:relative}
.bl .bl-cadeaus{list-style:none;margin:.95rem 0 0;padding:0;display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.bl .bl-rij__hint{display:none}
.bl .bl-cadeau{background:#fff;border:1px solid var(--line-s);border-radius:3px;padding:.8rem;display:flex;flex-direction:column;min-width:0}
.bl .bl-cadeau__img{display:block;margin:0 0 .65rem}
.bl .bl-cadeau__img img{display:block;width:100%;height:150px;object-fit:contain}
.bl .bl-cadeau__tekst{margin-top:auto}
.bl .bl-cadeau__naam{display:block;font-size:.88rem;line-height:1.45;font-weight:600;color:var(--green);text-decoration:none;overflow-wrap:anywhere}
.bl .bl-cadeau__naam:hover{text-decoration:underline}
.bl .bl-cadeau__prijs{display:block;margin-top:.3rem;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.bl .bl-kop--klein{margin:2.1rem 0 0}
.bl .bl-kop--klein h3{margin:0;font-size:1.05rem;line-height:1.35}
.bl .bl-verder--prijs{margin-top:.85rem}
.bl .bl-band__meer{margin:.7rem 0 0;font-size:.86rem}
.bl .bl-band__meer a{color:var(--green);font-weight:600}
.bl .bl-geschenkbeeld{margin:1.25rem 0 0}
.bl .bl-geschenkbeeld img{display:block;width:100%;height:auto;border-radius:2px}
@media(max-width:780px){
.bl .bl-cadeaus{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(142px,43%);overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-left:2px;padding:2px 2px .7rem;gap:.7rem}
.bl .bl-cadeaus>.bl-cadeau{scroll-snap-align:start}
.bl .bl-cadeau__img img{height:128px}
.bl .bl-rij__hint{display:block;margin:.1rem 0 0;font-size:.78rem;color:var(--muted)}
}
@media(max-width:400px){.bl .bl-cadeaus{grid-auto-columns:minmax(134px,54%)}}

/* Telefoon: de volle-breedte-band uitzetten, 15-09-2026.
   De band rekent met calc(50% - 50vw) terwijl .bl overflow-x:clip heeft. Op een
   smal scherm is de zijmarge van het thema zo groot ten opzichte van het scherm
   dat de band buiten .bl valt en de tekst links en rechts wordt afgesneden.
   Onder de 900 pixels staat de band daarom gewoon in de kolom. */
@media(max-width:900px){
.bl .bl-bleed{margin-left:0;margin-right:0;width:auto;max-width:100%}
.bl .bl-hero{border-radius:3px}
}