/* bl4-start - het goedgekeurde ontwerp voor de zeven soortpagina's, 1 op 1 uit
   de prototypes whiskykelder.html en zes-soorten.html. Alleen geleverd aan
   pagina's met meta _bockje_v4. Raak de drie blokken hierboven niet aan.

   Toegestane afwijkingen, net als bij bl3:
   1. elke selector staat onder .bl4; :root, html en body zijn .bl4 zelf
      geworden, en @keyframes zak heet nu bl4zak.
   2. html.beweegt uit het prototype heet hier html.bl4bw .bl4 ; die klasse
      wordt in wp_head gezet (bl-ontwerp4-js.php).
   3. de vaste balk (.balk) en de toelichting (.notitie) uit het prototype
      staan hier wel in de opmaak maar worden niet getekend: het thema heeft
      zijn eigen kop, en de toelichting hoorde bij de opzet, niet bij de site.
   Verder niets. */
/* ============================================================ tokens ==== */
.bl4{
  --nacht:#0E1109;
  --nacht-2:#171C12;
  --groen:#2A421E;
  /* 16-09-2026: de knop staat op de donkerder tint uit dezelfde reeks.
     Wit op #638351 haalde 4,29:1, wit op #546F42 haalt 5,63:1. De zweefkleur
     schuift mee naar de volgende tint, --groen #2A421E, 11,07:1, zodat de
     zweefstand zichtbaar blijft en zelf ook boven 4,5 uitkomt. */
  --knop:#546F42;
  --knop-h:#2A421E;
  --zand:#C9B98D;
  --zand-diep:#8E7C4E;
  /* 16-09-2026: de kicker op lichte banden haalde de norm niet. #8E7C4E meet
     3,81:1 op --grond en 4,01:1 op --kaart; klein, gespatieerd kapitaal valt
     onder de norm van 4,5. Deze donkerder tint uit dezelfde reeks meet 5,77:1
     op --grond en 6,07:1 op --kaart. --zand-diep blijft staan voor waar die
     verder gebruikt wordt. TERUGWEG: .bl4 .kicker weer op var(--zand-diep). */
  --zand-donker:#6F6033;
  --grond:#F8F7F4;
  --kaart:#FDFDFC;
  --tekst:#22241E;
  --stil:#63645C;
  --rand:#E2DFD7;
  --rand-zacht:#EFECE6;
  --as:#BCBCAE;
  --as-diep:#8B8C81;

  --kop:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --smal:'Archivo Narrow','Archivo','Helvetica Neue',Arial,sans-serif;
  --wrap:1560px;
  --gutter:clamp(22px,5vw,76px);
}

.bl4,.bl4 *,.bl4 *::before,.bl4 *::after{box-sizing:border-box}
.bl4{scroll-behavior:smooth}
.bl4{
  margin:0;background:var(--grond);color:var(--tekst);
  font-family:var(--kop);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.bl4 img{max-width:100%;display:block}
.bl4 a{color:inherit}
.bl4 h1,.bl4 h2,.bl4 h3{margin:0;text-wrap:balance;letter-spacing:-.035em;line-height:1.03;font-weight:800}
.bl4 p{margin:0}

.bl4 .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

.bl4 .kicker{
  font-family:var(--smal);font-size:.74rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--zand-donker);
  margin:0 0 .9em;
}
.bl4 .donker .kicker{color:var(--zand)}

.bl4 .btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.88rem;font-weight:600;letter-spacing:.01em;
  padding:13px 22px;border-radius:2px;text-decoration:none;
  border:1px solid transparent;transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.bl4 .btn--vol{background:var(--knop);color:#fff}
.bl4 .btn--vol:hover{background:var(--knop-h)}
.bl4 .btn--lijn{border-color:currentColor}
.bl4 .btn--lijn:hover{border-color:var(--zand);color:var(--zand)}
.bl4 .donker .btn--lijn{color:#EDEAE0}

/* ============================================== onthullen bij scrollen == */
/* Alles staat standaard zichtbaar. Pas als het script beweging aanzet,
   wordt er iets verborgen. Zo is de pagina bij stilstand compleet. */
html.bl4bw .bl4 .op{opacity:0;transform:translateY(20px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
html.bl4bw .bl4 .op.aan{opacity:1;transform:none}
html.bl4bw .bl4 .op[data-vt="1"]{transition-delay:.08s}
html.bl4bw .bl4 .op[data-vt="2"]{transition-delay:.16s}
html.bl4bw .bl4 .op[data-vt="3"]{transition-delay:.24s}
html.bl4bw .bl4 .op[data-vt="4"]{transition-delay:.32s}

/* ==================================================== kop van de site === */
.bl4 .balk{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:14px var(--gutter);
  background:rgba(14,17,9,0);backdrop-filter:blur(0px);
  transition:background .35s ease,backdrop-filter .35s ease,padding .35s ease,border-color .35s;
  border-bottom:1px solid transparent;
}
.bl4 .balk.vast{
  background:rgba(14,17,9,.82);backdrop-filter:blur(14px);
  padding-block:9px;border-bottom-color:rgba(201,185,141,.18);
}
.bl4 .balk__logo img{height:34px;width:auto;transition:height .35s}
.bl4 .balk.vast .balk__logo img{height:27px}
.bl4 .balk__nav{display:flex;gap:26px;align-items:center}
.bl4 .balk__nav a{
  font-family:var(--smal);font-size:.78rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#E6E3D8;
  text-decoration:none;padding:6px 0;position:relative;
}
.bl4 .balk__nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--zand);transition:right .3s cubic-bezier(.2,.7,.3,1);
}
.bl4 .balk__nav a:hover::after{right:0}
@media(max-width:860px){.bl4 .balk__nav a:not(.balk__nav-hoofd){display:none}}

/* ================================================================ hero == */
.bl4 .hero{
  position:relative;min-height:clamp(560px,88vh,900px);
  display:flex;align-items:flex-end;overflow:hidden;
  background:var(--nacht);color:#F2EFE7;isolation:isolate;
}
.bl4 .hero__doek{position:absolute;inset:-12% 0 -12% 0;z-index:0;will-change:transform}
.bl4 .hero__doek img,.bl4 .hero__doek video{
  width:100%;height:100%;object-fit:cover;object-position:center 48%;
  filter:saturate(.82) contrast(1.04);
}
.bl4 .hero__waas{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(14,17,9,.72) 0%,rgba(14,17,9,.26) 34%,rgba(14,17,9,.88) 82%,var(--nacht) 100%),
    radial-gradient(ellipse 80% 70% at 24% 60%,rgba(14,17,9,.55),transparent 70%);
}
.bl4 .hero__in{position:relative;z-index:2;width:100%;padding-block:clamp(90px,13vh,150px) clamp(46px,7vh,86px)}
.bl4 .hero__rooster{display:grid;gap:clamp(30px,5vw,70px);grid-template-columns:1fr;align-items:end}
@media(min-width:940px){.bl4 .hero__rooster{grid-template-columns:1.35fr .65fr}}

.bl4 .hero h1{
  font-size:clamp(2.7rem,7.4vw,6.2rem);letter-spacing:-.045em;line-height:.95;
  margin:0 0 .42em;color:#fff;
}
.bl4 .hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.bl4 .hero h1 .w i{display:inline-block;font-style:normal}
html.bl4bw .bl4 .hero h1 .w i{transform:translateY(105%);transition:transform .9s cubic-bezier(.16,.84,.26,1)}
html.bl4bw .bl4 .hero h1.aan .w i{transform:none}
html.bl4bw .bl4 .hero h1 .w:nth-child(2) i{transition-delay:.07s}
html.bl4bw .bl4 .hero h1 .w:nth-child(3) i{transition-delay:.14s}
html.bl4bw .bl4 .hero h1 .w:nth-child(4) i{transition-delay:.21s}
html.bl4bw .bl4 .hero h1 .w:nth-child(5) i{transition-delay:.28s}
html.bl4bw .bl4 .hero h1 .w:nth-child(6) i{transition-delay:.35s}

.bl4 .hero__lead{max-width:46ch;color:#D9D6CD;font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.66}
.bl4 .hero__knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.bl4 .hero__zijde{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
@media(min-width:940px){.bl4 .hero__zijde{align-items:flex-end;text-align:right}}

/* het zegel dat met de rol meedraait */
.bl4 .zegel{width:clamp(112px,11vw,150px);height:auto;color:var(--zand);flex:none}
.bl4 .zegel text{font-family:var(--smal);font-size:11.6px;font-weight:700;letter-spacing:.26em;fill:currentColor}
.bl4 .zegel__ring{will-change:transform;transform-origin:60px 60px}
.bl4 .zegel__hart{fill:none;stroke:currentColor;stroke-width:1.1;opacity:.75}

.bl4 .cijferrij{display:flex;gap:clamp(20px,3vw,42px);flex-wrap:wrap}
.bl4 .cijferrij div{min-width:82px}
.bl4 .cijferrij b{
  display:block;font-family:var(--smal);font-weight:700;
  font-size:clamp(1.5rem,2.5vw,2.1rem);letter-spacing:-.01em;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1.05;
}
.bl4 .cijferrij span{font-size:.76rem;color:var(--as-diep);letter-spacing:.02em}

.bl4 .rolhint{
  position:absolute;left:var(--gutter);bottom:20px;z-index:3;
  display:flex;align-items:center;gap:11px;
  font-family:var(--smal);font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--zand);
}
.bl4 .rolhint i{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--zand),transparent);
  animation:bl4zak 2.2s ease-in-out infinite}
@keyframes bl4zak{0%,100%{transform:scaleY(.35);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
@media(max-width:940px){.bl4 .rolhint{display:none}}

/* ====================================== de vastgezette hoofdstukkenrol == */
.bl4 .rol{position:relative;background:var(--nacht);color:#EDEAE0}
.bl4 .rol__kind{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.bl4 .rol__beeld{position:absolute;inset:0;z-index:0}
.bl4 .rol__beeld figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.05s ease}
.bl4 .rol__beeld figure.aan{opacity:1}
.bl4 .rol__beeld img{width:100%;height:100%;object-fit:cover;filter:saturate(.76) contrast(1.05);
  transform:scale(1.09);will-change:transform}
.bl4 .rol__waas{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(94deg,rgba(14,17,9,.95) 0%,rgba(14,17,9,.82) 38%,rgba(14,17,9,.34) 72%,rgba(14,17,9,.6) 100%);
}
.bl4 .rol__in{position:relative;z-index:2;width:100%}
.bl4 .rol__rooster{display:grid;gap:clamp(24px,4vw,64px);grid-template-columns:1fr;align-items:center}
@media(min-width:940px){.bl4 .rol__rooster{grid-template-columns:auto 1fr}}

.bl4 .rol__teller{
  font-family:var(--smal);font-weight:700;line-height:.82;
  font-size:clamp(4.4rem,13vw,11rem);color:transparent;
  -webkit-text-stroke:1.4px rgba(201,185,141,.55);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.bl4 .rol__blad{position:relative;min-height:clamp(300px,42vh,400px)}
.bl4 .rol__hst{
  position:absolute;inset:0;opacity:0;transform:translateY(26px);
  transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.bl4 .rol__hst.aan{opacity:1;transform:none;pointer-events:auto}
.bl4 .rol__hst h2{font-size:clamp(1.75rem,4.1vw,3.2rem);color:#fff;margin:0 0 .5em;max-width:17ch}
.bl4 .rol__hst p{max-width:52ch;color:#C6C3B8;font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.68}
.bl4 .rol__feit{
  display:flex;align-items:baseline;gap:13px;margin-top:26px;
  padding-top:20px;border-top:1px solid rgba(201,185,141,.22);max-width:52ch;
}
.bl4 .rol__feit b{
  font-family:var(--smal);font-weight:700;font-size:clamp(1.7rem,3vw,2.5rem);
  color:var(--zand);font-variant-numeric:tabular-nums;line-height:1;
}
.bl4 .rol__feit span{font-size:.88rem;color:var(--as-diep)}

.bl4 .rol__spoor{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(26px,5vh,52px);
  z-index:3;display:flex;gap:10px;
}
.bl4 .rol__spoor i{flex:1;height:2px;background:rgba(237,234,224,.16);position:relative;overflow:hidden}
.bl4 .rol__spoor i::after{content:"";position:absolute;inset:0;background:var(--zand);
  transform:scaleX(0);transform-origin:left;transition:transform .35s linear}
.bl4 .rol__spoor i.aan::after{transform:scaleX(1)}

/* ================================================= twee flessen, podium = */
.bl4 .podium{background:var(--nacht-2);color:#EDEAE0;padding-block:clamp(74px,10vw,140px);
  border-top:1px solid rgba(201,185,141,.14)}
.bl4 .podium__rooster{display:grid;gap:clamp(34px,5vw,72px);grid-template-columns:1fr;align-items:center}
@media(min-width:940px){.bl4 .podium__rooster{grid-template-columns:1fr 1fr}}
.bl4 .podium h2{font-size:clamp(1.75rem,4vw,3rem);color:#fff;margin:0 0 .5em}
.bl4 .podium p{color:#C6C3B8;max-width:52ch;line-height:1.68}
.bl4 .podium__vak{position:relative;min-height:clamp(330px,44vw,470px);display:flex;align-items:flex-end;
  justify-content:center;gap:clamp(18px,4vw,54px)}
.bl4 .podium__ring{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  width:min(94%,430px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(201,185,141,.26);
  background:radial-gradient(circle at 50% 55%,rgba(201,185,141,.13),transparent 68%);}
.bl4 .podium__fles{position:relative;will-change:transform}
.bl4 .podium__fles img{height:clamp(230px,32vw,400px);width:auto}
.bl4 .prijskaart{
  position:absolute;background:rgba(253,253,252,.96);color:var(--tekst);
  border-radius:2px;padding:10px 15px;box-shadow:0 14px 34px rgba(0,0,0,.34);
  will-change:transform;white-space:nowrap;
}
.bl4 .prijskaart b{display:block;font-size:.85rem;font-weight:700;letter-spacing:-.01em}
.bl4 .prijskaart span{font-size:.76rem;color:var(--stil);font-variant-numeric:tabular-nums}
.bl4 .prijskaart--a{left:2%;top:22%}
.bl4 .prijskaart--b{right:0;bottom:16%}
@media(max-width:600px){.bl4 .prijskaart{position:static;margin-top:10px;box-shadow:none;border:1px solid var(--rand)}
  .bl4 .podium__vak{flex-direction:column;align-items:center}}

/* ====================================================== de naad ========= */
.bl4 .naad{background:var(--nacht-2);padding-block:clamp(40px,6vw,74px)}
.bl4 .naad__in{display:flex;align-items:center;gap:clamp(16px,3vw,32px)}
.bl4 .naad__lijn{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(201,185,141,.5))}
.bl4 .naad__lijn+.naad__lijn{background:linear-gradient(90deg,rgba(201,185,141,.5),transparent)}
.bl4 .naad b{
  font-family:var(--smal);font-size:clamp(.78rem,1.5vw,.95rem);font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--zand);white-space:nowrap;
}

/* =========================================================== het schap == */
.bl4 .schap{background:var(--grond);padding-block:clamp(66px,9vw,124px)}
.bl4 .sectiekop{max-width:58ch;margin-bottom:clamp(34px,5vw,60px)}
.bl4 .sectiekop h2{font-size:clamp(1.7rem,3.6vw,2.8rem);margin:0 0 .45em}
.bl4 .sectiekop p{color:var(--stil);font-size:1.02rem;line-height:1.68;max-width:56ch}

/* streken als gemeten balken */
.bl4 .streken{display:grid;gap:2px;margin-top:8px}
.bl4 .balkje{
  display:grid;grid-template-columns:minmax(96px,150px) 1fr auto;
  gap:clamp(12px,2.4vw,28px);align-items:center;
  padding:15px 18px;background:var(--kaart);border:1px solid var(--rand);
  text-decoration:none;color:inherit;
  transition:border-color .2s,background .2s,transform .25s cubic-bezier(.2,.7,.3,1);
}
.bl4 .balkje:hover{border-color:var(--knop);transform:translateX(4px)}
.bl4 .balkje b{font-size:.95rem;font-weight:700;letter-spacing:-.01em}
.bl4 .balkje__spoor{height:6px;background:var(--rand-zacht);border-radius:1px;overflow:hidden}
.bl4 .balkje__vul{display:block;height:100%;width:0;background:var(--groen);
  transition:width 1.15s cubic-bezier(.2,.7,.3,1)}
.bl4 .balkje:nth-child(2) .balkje__vul{transition-delay:.06s}
.bl4 .balkje:nth-child(3) .balkje__vul{transition-delay:.12s}
.bl4 .balkje:nth-child(4) .balkje__vul{transition-delay:.18s}
.bl4 .balkje:nth-child(5) .balkje__vul{transition-delay:.24s}
.bl4 .balkje:nth-child(6) .balkje__vul{transition-delay:.3s}
.bl4 .balkje__n{font-family:var(--smal);font-weight:700;font-size:.95rem;
  font-variant-numeric:tabular-nums;color:var(--stil);min-width:5.6em;text-align:right}
.bl4 .streken__voet{margin-top:22px;color:var(--stil);font-size:.92rem;max-width:60ch}

/* filter plus lijst */
.bl4 .vinder{display:grid;gap:clamp(28px,4vw,52px);grid-template-columns:1fr;margin-top:clamp(46px,6vw,84px)}
@media(min-width:1040px){.bl4 .vinder{grid-template-columns:310px 1fr;align-items:start}}
.bl4 .filter{background:var(--kaart);border:1px solid var(--rand);padding:22px;border-radius:2px}
@media(min-width:1040px){.bl4 .filter{position:sticky;top:84px}}
.bl4 .filter h3{font-size:1.02rem;margin:0 0 4px;letter-spacing:-.02em}
.bl4 .filter>p{font-size:.85rem;color:var(--stil);margin-bottom:18px}
.bl4 .vak{border-top:1px solid var(--rand-zacht);padding-top:15px;margin-top:15px}
.bl4 .vak:first-of-type{border-top:0;padding-top:0;margin-top:0}
.bl4 .vak>span{display:block;font-family:var(--smal);font-size:.7rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--stil);margin-bottom:10px}
.bl4 .chips{display:flex;flex-wrap:wrap;gap:6px}
.bl4 .chip{position:relative}
.bl4 .chip input{position:absolute;opacity:0;width:0;height:0}
.bl4 .chip span{
  display:inline-flex;align-items:baseline;gap:6px;cursor:pointer;
  font-size:.79rem;line-height:1.2;padding:6px 11px;border-radius:2px;
  border:1px solid var(--rand);background:var(--grond);color:var(--stil);
  transition:border-color .18s,color .18s,background .18s;
}
.bl4 .chip span i{font-style:normal;font-family:var(--smal);font-variant-numeric:tabular-nums;
  font-size:.72rem;opacity:.72}
.bl4 .chip span:hover{border-color:var(--knop);color:var(--knop)}
.bl4 .chip input:checked+span{background:var(--groen);border-color:var(--groen);color:#fff}
.bl4 .chip input:focus-visible+span{outline:2px solid var(--knop);outline-offset:2px}

.bl4 .telling{font-family:var(--smal);font-size:1.08rem;font-weight:700;margin:0 0 16px;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.bl4 .telling em{font-style:normal;font-family:var(--kop);font-weight:400;font-size:.84rem;color:var(--stil)}
.bl4 .lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--rand)}
.bl4 .rij a{
  display:grid;grid-template-columns:minmax(84px,110px) 1fr auto auto;
  gap:clamp(10px,2vw,22px);align-items:baseline;
  padding:13px 4px;border-bottom:1px solid var(--rand-zacht);
  text-decoration:none;color:inherit;transition:background .18s;
}
.bl4 .rij a:hover{background:var(--kaart)}
.bl4 .rij__merk{font-family:var(--smal);font-size:.74rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--stil)}
.bl4 .rij__naam{font-size:.93rem;font-weight:600;letter-spacing:-.01em}
.bl4 .rij__tag{display:inline-block;font-style:normal;font-size:.68rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--zand-donker);
  border:1px solid var(--zand);border-radius:1px;padding:1px 6px;margin-left:8px;vertical-align:1px}
.bl4 .rij__kenm{font-size:.8rem;color:var(--stil);font-variant-numeric:tabular-nums;white-space:nowrap}
.bl4 .rij__prijs{font-family:var(--smal);font-weight:700;font-size:.93rem;
  font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:680px){
  .bl4 .rij a{grid-template-columns:1fr auto;row-gap:3px}
  .bl4 .rij__merk{grid-column:1/-1}
  .bl4 .rij__kenm{grid-column:1}
}
.bl4 .leeg{padding:26px 4px;color:var(--stil);font-size:.93rem}
.bl4 .schap__voet{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}

/* ========================================================= schuifrij ==== */
.bl4 .spoor{background:var(--kaart);border-block:1px solid var(--rand);padding-block:clamp(56px,7vw,96px)}
.bl4 .spoor__kop{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap}
.bl4 .pijlen{display:flex;gap:8px}
.bl4 .pijl{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--rand);
  background:var(--grond);cursor:pointer;display:grid;place-items:center;
  transition:border-color .2s,background .2s,color .2s,opacity .2s;color:var(--tekst);
}
.bl4 .pijl:hover{border-color:var(--knop);color:var(--knop)}
.bl4 .pijl:disabled{opacity:.32;cursor:default;border-color:var(--rand);color:var(--tekst)}
.bl4 .rail{
  display:flex;gap:16px;margin-top:26px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:12px;scrollbar-width:thin;
}
.bl4 .rail::-webkit-scrollbar{height:5px}
.bl4 .rail::-webkit-scrollbar-thumb{background:var(--rand);border-radius:3px}
.bl4 .fkaart{
  flex:0 0 clamp(200px,23vw,248px);scroll-snap-align:start;
  display:flex;flex-direction:column;background:var(--grond);
  border:1px solid var(--rand);border-radius:2px;text-decoration:none;color:inherit;
  overflow:hidden;transition:border-color .2s,transform .3s cubic-bezier(.2,.7,.3,1);
}
.bl4 .fkaart:hover{border-color:var(--knop);transform:translateY(-4px)}
.bl4 .fkaart__beeld{background:#fff;height:186px;display:flex;align-items:center;justify-content:center;padding:14px}
.bl4 .fkaart__beeld img{height:158px;width:auto;max-width:100%;object-fit:contain}
.bl4 .fkaart__tekst{padding:14px 15px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.bl4 .fkaart__tekst b{font-size:.9rem;font-weight:600;line-height:1.32;letter-spacing:-.01em}
.bl4 .fkaart__tekst .note{font-size:.79rem;color:var(--stil);flex:1}
.bl4 .fkaart__tekst .prijs{font-family:var(--smal);font-weight:700;font-size:.93rem;
  font-variant-numeric:tabular-nums;margin-top:auto}

/* ============================================================= muur ===== */
.bl4 .muur{background:var(--grond);padding-block:clamp(56px,7vw,100px)}
.bl4 .kasten{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
.bl4 .kast{background:var(--kaart);border:1px solid var(--rand);border-radius:2px;padding:17px 18px}
.bl4 .kast__kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  text-decoration:none;color:inherit;margin-bottom:12px}
.bl4 .kast__kop b{font-size:1.04rem;font-weight:700;letter-spacing:-.02em}
.bl4 .kast__kop span{font-family:var(--smal);font-size:.75rem;color:var(--stil);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.bl4 .kast__kop:hover b{color:var(--knop)}
.bl4 .kast__namen{display:flex;flex-wrap:wrap;gap:6px}
.bl4 .kast__namen a{font-size:.77rem;line-height:1.2;text-decoration:none;color:var(--stil);
  border:1px solid var(--rand);border-radius:2px;padding:4px 9px;background:var(--grond);
  transition:border-color .15s,color .15s}
.bl4 .kast__namen a:hover{border-color:var(--knop);color:var(--knop)}
.bl4 .kast__meer{border-style:dashed !important}

/* ========================================================== winkelband == */
.bl4 .winkel{background:var(--groen);color:#E9E6DB;padding-block:clamp(56px,7vw,96px)}
.bl4 .winkel__rooster{display:grid;gap:clamp(28px,4vw,60px);grid-template-columns:1fr}
@media(min-width:860px){.bl4 .winkel__rooster{grid-template-columns:1.25fr .75fr}}
.bl4 .winkel__logo{height:56px;width:auto;margin-bottom:22px}
.bl4 .winkel h2{font-size:clamp(1.4rem,2.6vw,2rem);color:#fff;margin:0 0 .5em}
.bl4 .winkel p{color:#C3C6B8;max-width:52ch;line-height:1.68}
.bl4 .winkel a{color:var(--zand)}
.bl4 .nix{margin-top:18px;font-size:.86rem;color:#AEB2A4}
.bl4 .nix b{color:var(--zand);letter-spacing:.08em}
.bl4 .uren{list-style:none;margin:0;padding:0;border:1px solid rgba(201,185,141,.26);border-radius:2px}
.bl4 .uren li{display:flex;justify-content:space-between;gap:14px;padding:11px 16px;font-size:.88rem;
  border-bottom:1px solid rgba(201,185,141,.16)}
.bl4 .uren li:last-child{border-bottom:0}
.bl4 .uren span{color:#B6B9AB;font-variant-numeric:tabular-nums}

/* ========================================================== leeftijd ==== */
.bl4 .poort{
  position:fixed;inset:0;z-index:90;display:none;place-items:center;
  background:rgba(14,17,9,.94);backdrop-filter:blur(8px);padding:24px;
}
.bl4 .poort.open{display:grid}
.bl4 .poort__kaart{
  background:var(--nacht-2);border:1px solid rgba(201,185,141,.3);
  padding:clamp(28px,4vw,44px);max-width:430px;width:100%;text-align:center;color:#EDEAE0;
}
.bl4 .poort__kaart img{height:46px;width:auto;margin:0 auto 22px}
.bl4 .poort__kaart h2{font-size:1.35rem;color:#fff;margin-bottom:.6em}
.bl4 .poort__kaart p{color:#C6C3B8;font-size:.93rem;line-height:1.6}
.bl4 .poort__knoppen{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.bl4 .poort__klein{margin-top:18px;font-size:.76rem;color:var(--as-diep);line-height:1.55}
.bl4 .poort__toon{
  position:fixed;right:16px;bottom:16px;z-index:50;
  font-family:var(--smal);font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:9px 14px;border-radius:2px;cursor:pointer;
  background:rgba(14,17,9,.86);color:var(--zand);border:1px solid rgba(201,185,141,.36);
}
.bl4 .poort__toon:hover{background:var(--nacht-2)}

/* ========================================================== notitie ===== */
.bl4 .notitie{background:var(--nacht);color:var(--as);padding-block:clamp(40px,5vw,66px);
  border-top:1px solid rgba(201,185,141,.16)}
.bl4 .notitie h2{font-size:1.15rem;color:var(--zand);margin-bottom:.7em;letter-spacing:-.01em}
.bl4 .notitie ul{margin:0;padding-left:1.1em;max-width:74ch}
.bl4 .notitie li{margin-bottom:.5em;font-size:.92rem;line-height:1.62}
.bl4 .notitie li b{color:#EDEAE0}

@media (prefers-reduced-motion:reduce){
  .bl4{scroll-behavior:auto}
  .bl4,.bl4 *,.bl4 *::before,.bl4 *::after{transition:none !important;animation:none !important}
  html.bl4bw .bl4 .op{opacity:1;transform:none}
  html.bl4bw .bl4 .hero h1 .w i{transform:none}
  .bl4 .rol__hst{position:relative;opacity:1;transform:none;inset:auto}
  .bl4 .balkje__vul{transition:none}
}

/* ====================================================== bl4, de aansluiting =
   Deze regels staan niet in het prototype. Ze zijn nodig om het ontwerp in het
   thema te laten passen; dezelfde ingrepen die bl3 al doet. */

/* Volle breedte. Het thema zet elke pagina in een kolom; het ontwerp breekt
   daaruit, precies zoals bl3 dat doet, en de inhoud staat daarbinnen weer in
   een gecentreerde kolom. */
.bl4{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw}
.bl4 .wrap,
#main .bl4 .wrap,
.fusion-body .bl4 .wrap{
  max-width:1560px;margin-left:auto;margin-right:auto;
  padding-left:clamp(22px,5vw,76px);padding-right:clamp(22px,5vw,76px);
}
/* De leeftijdscheck hangt los aan het einde van de pagina en mag niet
   meeschuiven met de volle-breedte-ingreep hierboven. */
.bl4--los{margin-left:0;margin-right:0;width:auto;max-width:none}

.bl4 section{position:relative;z-index:1;margin:0}
.bl4 [hidden]{display:none!important}
.bl4 [id]{scroll-margin-top:96px}
.bl4 button{font-family:inherit}
.bl4 .lijst li{margin:0;padding:0;list-style:none}
.bl4 .lijst li::before,.bl4 .uren li::before{content:none}
.bl4 .uren{list-style:none}
.bl4 .chip input{margin:0}
.bl4 .hero__doek video{display:block}

/* Een naam zonder eigen merkpagina staat er als tekst bij, in dezelfde vorm
   als de namen die wel een link hebben. Liever geen link dan een dode link. */
.bl4 .kast__namen span{font-size:.77rem;line-height:1.2;color:var(--stil);
  border:1px solid var(--rand);border-radius:2px;padding:4px 9px;background:var(--grond)}

/* Een fleskaart zonder foto blijft even hoog als zijn buren. Uit bl3_prod_vak;
   het prototype kent geen kaart zonder foto. */
.bl4 .fkaart__beeld--leeg{color:var(--as);display:flex;align-items:center;justify-content:center}
.bl4 .fkaart__omtrek{opacity:.5}

/* ============================================ bl4 - de slijterijpagina ==== *
 * Toegevoegd voor /slijterij/ (pagina 601). Elke regel hieronder staat onder
 * .bl4-slij of onder .balk--wegwijzer. Geen van de zeven soortpagina's draagt
 * die klassen, dus aan die pagina's verandert hier niets. Het hoort bij het
 * bl4-blok hierboven en wordt met dezelfde meta (_bockje_v4) geleverd.
 * ------------------------------------------------------------------------- */

/* position:sticky werkt niet binnen een element dat een scrollvak is. Twee
   voorouders maken er een van: .bl4 met overflow-x:hidden, en #boxed-wrapper
   van het thema met overflow:hidden. Zolang die er staan plakt er niets aan
   het beeld: niet de wegwijzer en niet de vastgezette hoofdstukken.
   overflow:clip snijdt precies even hard af maar is geen scrollvak.
   De klasse bockje-slij zet bl-ontwerp4-slijterij.php op de body; alleen deze
   ene pagina draagt hem, de rest van de site merkt er niets van. */
body.bockje-slij #boxed-wrapper{overflow:clip}

/* Dezelfde ingreep voor de zeven soortpagina's, waar de vastgezette
   hoofdstukkenrol (.rol__kind) en het meeschuivende filter (.filter) wel in
   werking zijn. Daar houden TWEE vakken het plakken tegen: #boxed-wrapper van
   het thema, en .bl4 bovenaan dit blok, dat overflow-x:hidden draagt. Beide
   gaan naar overflow:clip: even hard afgesneden, maar geen scrollvak.
   De klasse bockje-v4 zet bl-ontwerp4.php op de body, alleen op pagina's met
   de meta _bockje_v4. /slijterij/ draagt hem ook, maar staat via .bl4-slij al
   op clip; daar verandert hierdoor niets. */
body.bockje-v4 #boxed-wrapper{overflow:clip}
body.bockje-v4 .bl4{overflow-x:clip}

/* Op telefoons zet het thema er nog een derde vak bij: binnen
   @media (max-device-width:640px) krijgt #wrapper overflow-x:hidden!important.
   De hoofdstukkenrol blijft op de zeven soortpagina's ook op een telefoon
   vastgezet - alleen .bl4-slij zet hem daar op static - dus moet ook dat vak
   naar clip. Zelfde bereik als de twee regels hierboven: alleen bockje-v4, en
   alleen binnen dat ene mediabereik van het thema. */
@media only screen and (max-device-width:640px){
  body.bockje-v4 #wrapper{overflow-x:clip!important}
}
.bl4-slij{overflow-x:clip;--bl4s-top:0px}
.bl4-slij [id]{scroll-margin-top:calc(var(--bl4s-top,0px) + 58px)}

/* --------------------------------------------------------- de wegwijzer --- */
.bl4 .balk--wegwijzer{
  position:sticky;inset:auto;top:var(--bl4s-top,0px);z-index:40;
  display:block;padding:0;gap:0;
  background:rgba(14,17,9,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(201,185,141,.22);
}
.bl4 .balk--wegwijzer .balk__nav{
  display:flex;gap:0;align-items:stretch;flex-wrap:nowrap;
  max-width:var(--wrap);margin-inline:auto;
  padding-inline:max(8px,calc(var(--gutter) - 14px));
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;overscroll-behavior-x:contain;
}
.bl4 .balk--wegwijzer .balk__nav::-webkit-scrollbar{height:3px}
.bl4 .balk--wegwijzer .balk__nav::-webkit-scrollbar-thumb{
  background:rgba(201,185,141,.45);border-radius:2px}
.bl4 .balk--wegwijzer .balk__nav a.balk__ing{
  display:flex;align-items:center;flex:none;white-space:nowrap;
  padding:12px 14px;font-size:.72rem;letter-spacing:.11em;
}
.bl4 .balk--wegwijzer .balk__nav a.balk__ing::after{left:14px;right:calc(100% - 14px)}
.bl4 .balk--wegwijzer .balk__nav a.balk__ing:hover::after{right:14px}
.bl4 .balk--wegwijzer .balk__nav a.balk__ing:focus-visible{
  outline:2px solid var(--zand);outline-offset:-3px}

/* ----------------------------------------------------------------- de kop -- */
/* Het telwoord van de hele voorraad is langer dan dat van een enkele soort;
   op een smal scherm past het pas bij deze maat binnen de kolom. */
@media(max-width:560px){
  .bl4-slij .hero h1{font-size:clamp(1.8rem,8.4vw,2.7rem)}
}

/* ------------------------------------------------- de zes hoofdstukken ---- */
.bl4-slij .rol__mini{display:none;max-width:760px}
.bl4-slij .rol__blad{min-height:clamp(330px,46vh,470px)}
.bl4-slij .rol__knop{margin-top:20px}
.bl4-slij .rol__hst h2{max-width:20ch}

/* Op een smal scherm vallen de hoofdstukken terug op gewone blokken onder
   elkaar, elk met zijn eigen foto. Het script zet de hoogte van de rol met de
   hand (zes keer de hoogte van het beeld); daarom staat hier !important. */
/* De grens ligt op 700px, niet op 939px: een smal of ingezoomd laptopvenster
   houdt daarmee de vastgezette versie, net als de zeven soortpagina's, waar de
   rol op elke breedte vastgezet blijft. Gewijzigd 13-09-2026. */
@media(max-width:700px){
  .bl4-slij .rol{height:auto!important}
  .bl4-slij .rol__kind{position:static;height:auto;display:block;overflow:visible}
  .bl4-slij .rol__beeld,.bl4-slij .rol__waas,
  .bl4-slij .rol__teller,.bl4-slij .rol__spoor{display:none}
  .bl4-slij .rol__in{padding-block:clamp(46px,8vw,74px)}
  .bl4-slij .rol__rooster{display:block}
  .bl4-slij .rol__blad{position:static;min-height:0}
  .bl4-slij .rol__hst{
    position:static;inset:auto;opacity:1;transform:none;pointer-events:auto;
    padding-bottom:32px;margin-bottom:32px;
    border-bottom:1px solid rgba(201,185,141,.2);
  }
  .bl4-slij .rol__hst:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
  .bl4-slij .rol__hst h2{max-width:none}
  .bl4-slij .rol__mini{display:block;margin:0 0 18px}
  .bl4-slij .rol__mini img{
    width:100%;height:auto;aspect-ratio:16/9;max-width:100%;
    object-fit:cover;border-radius:2px;filter:saturate(.84) contrast(1.03);
  }
}

/* Vraagt het apparaat om minder beweging, dan wordt de rol niet vastgezet maar
   gewoon uitgeschreven. Zonder deze regels blijft .rol__kind op 100vh staan en
   valt het zesde hoofdstuk buiten beeld. */
@media (prefers-reduced-motion:reduce){
  .bl4-slij .rol{height:auto!important}
  .bl4-slij .rol__kind{position:static;height:auto;display:block;overflow:visible}
  .bl4-slij .rol__beeld,.bl4-slij .rol__waas,
  .bl4-slij .rol__teller,.bl4-slij .rol__spoor{display:none}
  .bl4-slij .rol__in{padding-block:clamp(46px,8vw,74px)}
  .bl4-slij .rol__rooster{display:block}
  .bl4-slij .rol__blad{position:static;min-height:0}
  .bl4-slij .rol__hst{
    position:static;inset:auto;opacity:1;transform:none;pointer-events:auto;
    padding-bottom:32px;margin-bottom:32px;
    border-bottom:1px solid rgba(201,185,141,.2);
  }
  .bl4-slij .rol__hst:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
  .bl4-slij .rol__hst h2{max-width:none}
  .bl4-slij .rol__mini{display:block;margin:0 0 18px}
  .bl4-slij .rol__mini img{
    width:100%;height:auto;aspect-ratio:16/9;max-width:100%;
    object-fit:cover;border-radius:2px;
  }
}

/* --------------------------------------------- waar wilt u beginnen ------- */
.bl4-slij .slijgroep{
  margin-top:clamp(32px,4.5vw,56px);
  scroll-margin-top:calc(var(--bl4s-top,0px) + 58px);
}
.bl4-slij .slijgroep:first-of-type{margin-top:0}
.bl4-slij .slijgroep__kop{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:8px 18px;flex-wrap:wrap;
  padding-bottom:11px;margin-bottom:16px;border-bottom:1px solid var(--rand);
}
.bl4-slij .slijgroep__kop h3{
  font-size:clamp(1.14rem,2vw,1.5rem);letter-spacing:-.025em;
  font-weight:800;margin:0;line-height:1.1;
}
.bl4-slij .slijgroep__kop span{
  font-family:var(--smal);font-size:.79rem;font-weight:600;color:var(--stil);
  font-variant-numeric:tabular-nums;
}
.bl4-slij .slijtegels{
  display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));
}
.bl4-slij .slijtegel{
  display:flex;flex-direction:column;min-width:0;
  background:var(--kaart);border:1px solid var(--rand);border-radius:2px;
  text-decoration:none;color:inherit;overflow:hidden;
  transition:border-color .2s,transform .3s cubic-bezier(.2,.7,.3,1);
}
.bl4-slij .slijtegel:hover{border-color:var(--knop);transform:translateY(-3px)}
.bl4-slij .slijtegel:focus-visible{outline:2px solid var(--knop);outline-offset:2px}
.bl4-slij .slijtegel__beeld{
  background:#fff;height:138px;padding:12px;
  display:flex;align-items:center;justify-content:center;
}
.bl4-slij .slijtegel__beeld img{height:114px;width:auto;max-width:100%;object-fit:contain}
.bl4-slij .slijtegel__tekst{
  padding:11px 13px 13px;display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;
}
.bl4-slij .slijtegel__tekst b{
  font-size:.86rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;
  overflow-wrap:anywhere;hyphens:auto;
}
.bl4-slij .slijtegel__tekst span{
  font-family:var(--smal);font-size:.78rem;color:var(--stil);
  font-variant-numeric:tabular-nums;margin-top:auto;overflow-wrap:anywhere;
}
/* Een groep met maar één soort (whisky, wijn) zou anders één klein tegeltje in
   een lege rij worden. Die krijgt een liggende kaart, zodat de rij gevuld oogt
   en de grootste soorten van de winkel niet het kleinst op de pagina staan. */
.bl4-slij .slijtegels--een{grid-template-columns:repeat(auto-fill,minmax(296px,1fr))}
.bl4-slij .slijtegels--een .slijtegel{flex-direction:row}
.bl4-slij .slijtegels--een .slijtegel__beeld{width:116px;flex:none;height:auto;min-height:132px}
.bl4-slij .slijtegels--een .slijtegel__beeld img{height:112px}
.bl4-slij .slijtegels--een .slijtegel__tekst{justify-content:center;padding:16px 18px;gap:4px}
.bl4-slij .slijtegels--een .slijtegel__tekst b{font-size:1.02rem}
.bl4-slij .slijtegels--een .slijtegel__tekst span{margin-top:0}

@media(max-width:520px){
  .bl4-slij .slijtegels{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
  .bl4-slij .slijtegel__beeld{height:116px;padding:10px}
  .bl4-slij .slijtegel__beeld img{height:96px}
  .bl4-slij .slijtegels--een{grid-template-columns:1fr}
  .bl4-slij .slijtegels--een .slijtegel__beeld{height:auto;min-height:120px}
  .bl4-slij .slijtegels--een .slijtegel__beeld img{height:100px}
}

/* Draait er geen JavaScript, dan zet niemand de klasse bl4bw op de wortel. De
   rol wordt dan niet vastgezet en niet doorgeschoven; zonder deze regels zou
   alleen hoofdstuk 01 zichtbaar zijn en stonden de andere vijf op opacity 0.
   Dezelfde terugval als op een smal scherm: gewone blokken onder elkaar. */
html:not(.bl4bw) .bl4-slij .rol{height:auto!important}
html:not(.bl4bw) .bl4-slij .rol__kind{position:static;height:auto;display:block;overflow:visible}
html:not(.bl4bw) .bl4-slij .rol__beeld,
html:not(.bl4bw) .bl4-slij .rol__waas,
html:not(.bl4bw) .bl4-slij .rol__teller,
html:not(.bl4bw) .bl4-slij .rol__spoor{display:none}
html:not(.bl4bw) .bl4-slij .rol__in{padding-block:clamp(46px,8vw,74px)}
html:not(.bl4bw) .bl4-slij .rol__rooster{display:block}
html:not(.bl4bw) .bl4-slij .rol__blad{position:static;min-height:0}
html:not(.bl4bw) .bl4-slij .rol__hst{
  position:static;inset:auto;opacity:1;transform:none;pointer-events:auto;
  padding-bottom:32px;margin-bottom:32px;
  border-bottom:1px solid rgba(201,185,141,.2);
}
html:not(.bl4bw) .bl4-slij .rol__hst:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
html:not(.bl4bw) .bl4-slij .rol__hst h2{max-width:none}
html:not(.bl4bw) .bl4-slij .rol__mini{display:block;margin:0 0 18px}
html:not(.bl4bw) .bl4-slij .rol__mini img{
  width:100%;height:auto;aspect-ratio:16/9;max-width:100%;
  object-fit:cover;border-radius:2px;
}

/* ================================ volle breedte zonder vw (13-09-2026) ==== *
 * DE KLACHT. Op een laptop van ongeveer 1330 CSS-pixels, met een verticale
 * schuifbalk en 150% paginazoom, stond het volle-breedte-blok van /slijterij/
 * te ver naar links: van WHISKY in de wegwijzerbalk was alleen ISKY te zien en
 * rechts bleef een witte strook van ongeveer 5% van het venster over.
 *
 * DE OORZAAK. Het blok brak uit de kolom van het thema met
 *   margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw
 * Die rekensom klopt alleen als de ouder precies in het midden van het venster
 * staat, en 100vw telt de schuifbalk mee terwijl 50% van de ouder dat niet
 * doet. Staat de rij van het thema niet exact gecentreerd, dan schuift het hele
 * blok mee naar links en blijft er rechts een strook over.
 *
 * DE OPLOSSING. De beperking wordt weggehaald bij de OUDER in plaats van bij
 * het kind. De rij waarin de pagina-inhoud staat vult op deze ene pagina de
 * volle breedte; daarna is width:100% genoeg en kan het blok per definitie niet
 * meer scheef staan - met of zonder schuifbalk, bij welke paginazoom dan ook.
 *
 * Alles staat achter body.bockje-slij; alleen /slijterij/ draagt die klasse.
 * De kop van het thema, de groene balk, het hoofdmenu en de voettekst staan
 * buiten #main en worden hier niet genoemd.
 * ------------------------------------------------------------------------- */

/* 1. de ouder: geen max-width, geen zijpadding, geen zijmarge. */
body.bockje-slij #main{padding-left:0!important;padding-right:0!important}
body.bockje-slij #main > .fusion-row{
  max-width:none!important;width:100%!important;
  margin-left:0!important;margin-right:0!important;
  padding-left:0!important;padding-right:0!important;
}
body.bockje-slij #main > .fusion-row > #content{
  width:100%!important;max-width:none!important;
  margin-left:0!important;margin-right:0!important;
  padding-left:0!important;padding-right:0!important;
}
body.bockje-slij #content > .hentry,
body.bockje-slij #content > .hentry > .post-content{
  max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0;
}

/* 2. het kind: gewoon de volle breedte van de ouder. Geen negatieve marges en
      geen vw, dus niets meer om scheef te trekken. Geldt voor allebei de
      bl4-blokken op deze pagina: het ontwerp zelf en de winkelband onderaan. */
body.bockje-slij .bl4{margin-left:0;margin-right:0;width:100%;max-width:100%}

/* 3. de binnenmaat blijft ongemoeid. .bl4 .wrap houdt zijn max-width van 1560px
      en zijn zijpadding clamp(22px,5vw,76px); die regels staan hierboven bij
      "bl4, de aansluiting" en worden hier niet aangeraakt. De wegwijzerbalk
      houdt zijn eigen max-width en padding-inline, en blijft op smalle schermen
      binnen zichzelf horizontaal schuiven (overflow-x:auto op .balk__nav), dus
      hij maakt de pagina niet breder. */

/* 4. de oude inhoud achter <!--bl3-oud--> ontleende zijn breedte aan de rij van
      het thema. Nu die rij de volle breedte vult, wordt diezelfde kolom hier
      zelf opgeschreven, zodat er aan dat blok niets verandert. */
body.bockje-slij .post-content > .fusion-fullwidth{
  max-width:1200px;margin-left:auto;margin-right:auto;
}

/* --------------------------- de merkenmuur, de rail en de wegwijzerkaarten --- */
/* Toegevoegd 13-09-2026, bij bl4s_muur(), bl4s_rail() en bl4s_wijzer() in
   bl-ontwerp4-slijterij.php. Het beginnen-blok staat uit; de merkenmuur is
   nu de weg dieper de slijterij in.

   De muur (.muur/.kasten/.kast), de rail (.spoor/.rail/.fkaart/.pijl) en de
   sectiekop gebruiken de bl4-regels die hierboven al staan; daar verandert
   niets aan. Hieronder alleen wat er niet was: het groepslabel in een kast en
   de zes kaartjes boven de winkelband. Alles staat onder .bl4-slij, dus geen
   van de zeven soortpagina's merkt er iets van.

   Geen 100vw en geen negatieve marges: de secties zijn gewone blokken binnen
   .bl4-slij (width:100%) met een .wrap voor de leesbreedte. De rail schuift
   binnen zichzelf, want .bl4 .rail draagt overflow-x:auto.

   TERUGWEG: haal dit blok tot het einde van het bestand weg. */
.bl4-slij .kast__groep{
  display:block;font-style:normal;font-family:var(--smal);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--stil);margin-bottom:7px;
}
.bl4-slij .slijwijzer{background:var(--grond);padding-block:clamp(48px,6vw,84px)}
.bl4-slij .slijkaarten{
  display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.bl4-slij .slijkaart{
  display:block;background:var(--kaart);border:1px solid var(--rand);border-radius:2px;
  padding:16px 18px;text-decoration:none;color:inherit;transition:border-color .15s;
}
.bl4-slij .slijkaart:hover{border-color:var(--knop)}
.bl4-slij .slijkaart b{
  display:block;font-size:1rem;font-weight:700;letter-spacing:-.02em;
  transition:color .15s;
}
.bl4-slij .slijkaart:hover b{color:var(--knop)}
.bl4-slij .slijkaart span{
  display:block;margin-top:5px;font-size:.83rem;line-height:1.42;color:var(--stil);
}

/* Niets mag breder worden dan zijn kast. De kop van een kast zet titel en
   telling naast elkaar; bij een lange titel met een lang stukwoord
   ("Alcoholvrij" met "107 alcoholvrije dranken") past dat op een smal scherm
   niet meer op een regel. Dan gaan ze onder elkaar en mag de telling afbreken.
   Zo blijft scrollWidth gelijk aan clientWidth, ook op 320 px. */
.bl4-slij .kast__kop b{min-width:0;overflow-wrap:anywhere}
.bl4-slij .kast__namen a{overflow-wrap:anywhere}
.bl4-slij .slijkaart b{overflow-wrap:anywhere}
@media (max-width:520px){
  .bl4-slij .kast__kop{flex-wrap:wrap;gap:2px 10px}
  .bl4-slij .kast__kop span{white-space:normal}
}

/* ======================================================== 15-09-2026, bl4 ===
 * Toegevoegd aan het einde van het bl4-blok, op verzoek van de eigenaar: de
 * kop uitgekleed en de wegwijzerbalk groter. Elke regel hieronder staat onder
 * .bl4 of .bl4-slij, dus binnen het slijterijgedeelte. De homepage, de
 * partyservice en de verhuur dragen die klassen niet en merken hier niets van.
 * TERUGWEG: dit hele blok vanaf deze kop tot het einde van het bestand
 * weghalen; dan is de opmaak weer wat hij was.
 * ------------------------------------------------------------------------- */

/* De kop heeft geen rechterkolom meer: het zegel, de cijferrij en de knoppen
   zijn uit bl4_hero() en bl4s_hero() gehaald. Zonder deze regel houdt de
   tweede kolom vanaf 940 px nog altijd ruim een derde van de breedte bezet en
   staat de tekst scheef in het beeld. Nu is er een kolom, op elke maat, ook
   op 390 px. */
.bl4 .hero__rooster{grid-template-columns:minmax(0,1fr)}
@media(min-width:940px){
  .bl4 .hero__rooster{grid-template-columns:minmax(0,1fr)}
}
/* De leadzin loopt anders over de volle breedte van de kolom door. */
.bl4 .hero__lead{max-width:64ch}

/* De wegwijzerbalk groter: grotere letter, meer hoogte en meer ruimte tussen
   de ingangen. De streep onder een ingang staat op dezelfde maat als de
   zijkant van de padding, dus die loopt mee. Op een smal scherm een maat
   kleiner; de rij blijft horizontaal schuiven, er verdwijnt geen ingang. */
.bl4 .balk--wegwijzer .balk__nav a.balk__ing{
  padding:20px 26px;font-size:.95rem;letter-spacing:.06em;
}
.bl4 .balk--wegwijzer .balk__nav a.balk__ing::after{left:26px;right:calc(100% - 26px)}
.bl4 .balk--wegwijzer .balk__nav a.balk__ing:hover::after{right:26px}
@media(max-width:700px){
  .bl4 .balk--wegwijzer .balk__nav a.balk__ing{padding:15px 17px;font-size:.84rem}
  .bl4 .balk--wegwijzer .balk__nav a.balk__ing::after{left:17px;right:calc(100% - 17px)}
  .bl4 .balk--wegwijzer .balk__nav a.balk__ing:hover::after{right:17px}
}

/* De balk is hoger geworden, dus moet een anker verder onder de balk landen
   dan de achtenvijftig pixels die er stonden. */
.bl4-slij [id]{scroll-margin-top:calc(var(--bl4s-top,0px) + 80px)}


/* ===================================================== 15-09-2026, ronde 2 ==
 * Correctie van de eigenaar: hij bedoelde de LINKERkolom van het kopblok. Het
 * ronde zegel en de cijferrij staan weer in beeld; het bovenschrift, de
 * leadzin en de knoppen zijn eruit. De h1 staat er nog, maar alleen voor de
 * zoekmachine en de schermlezer.
 * Alles hieronder staat onder .bl4, dus binnen het slijterijgedeelte.
 * TERUGWEG: dit blok en het blok erboven weghalen tot het einde van het
 * bestand; dan is de opmaak weer wat hij was.
 * ------------------------------------------------------------------------- */

/* De h1 uit beeld, maar niet uit de pagina. Geen display:none en geen
   visibility:hidden: die twee halen hem ook bij een schermlezer weg. Dit is de
   gangbare cliptechniek: een vak van een pixel, buiten de stroom, met de tekst
   ongemoeid. position:absolute haalt hem ook uit het raster, dus hij laat geen
   gat na waar hij stond. */
.bl4 .bl4-stilkop{
  position:absolute!important;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* Er is nog een kolom over. Het zegel en de cijferrij stonden rechts omdat er
   links een tekstkolom tegenover stond; die is er niet meer. Rechts uitlijnen
   laat nu een gat achter van twee derde van de breedte, precies waar de tekst
   stond. Midden botst met Rol verder, dat linksonder vastligt, en met de
   donkere vlek die het waas linksonder legt. Daarom links, op dezelfde rand
   als Rol verder en als de inhoud van elke sectie eronder: een doorlopende
   lijn van boven naar beneden, op elke maat van 390 tot 1920 px. */
.bl4 .hero__zijde{align-items:flex-start;text-align:left}

/* Het zegel en de cijferrij staan nu boven Rol verder in plaats van ernaast.
   Met de oude ondermarge zouden zij elkaar op een laag scherm raken. */
.bl4 .hero__in{padding-block-end:clamp(104px,12vh,138px)}

/* ---------------------------------------------------------------------------
   15-09-2026, /whisky/. Drie toevoegingen, in deze volgorde:
   1. het bewegende kopbeeld, zonder videobestand;
   2. het Smaak-blok op de plek van het oude podium met twee flessen;
   3. het smakenvierkant met een naam bij elk rondje.
   TERUGWEG: alles vanaf deze regel tot het einde van het bestand weghalen. De
   versie van ervoor staat in
   uploads/bockje-seo/bockje-merkpagina-whiskybak-20260915.txt.
   --------------------------------------------------------------------------- */

/* 1. Het bewegende kopbeeld. Drie beelden liggen over elkaar binnen
      .hero__doek. Het parallaxgedrag zit op .hero__doek zelf en blijft dus
      werken: hier bewegen alleen de beelden binnen dat vak. De cadans komt van
      de winkelvideo op /slijterij/: een lus van tien seconden, drie beelden,
      overvloeien in acht tienden van een seconde, en een inzoom van ongeveer
      anderhalf procent per seconde. De drie beelden delen de lus gelijk en het
      derde vloeit terug in het eerste, zodat de lus naadloos sluit. */
.bl4 .hero__film{position:absolute;inset:0}
.bl4 .hero__film img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform-origin:center 55%;will-change:opacity,transform;
}
.bl4 .hero__film-b--1{opacity:1;animation:bl4kop1 10s linear infinite}
.bl4 .hero__film-b--2{opacity:0;animation:bl4kop2 10s linear infinite}
.bl4 .hero__film-b--3{opacity:0;animation:bl4kop3 10s linear infinite}
@keyframes bl4kop1{
  0%{opacity:1;transform:scale(1)}
  33.33%{opacity:1;transform:scale(1.05)}
  41.33%{opacity:0;transform:scale(1.062)}
  41.34%{opacity:0;transform:scale(1)}
  92%{opacity:0;transform:scale(1)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes bl4kop2{
  0%{opacity:0;transform:scale(1)}
  25.33%{opacity:0;transform:scale(1)}
  33.33%{opacity:1;transform:scale(1.01)}
  66.67%{opacity:1;transform:scale(1.052)}
  74.67%{opacity:0;transform:scale(1.062)}
  74.68%{opacity:0;transform:scale(1)}
  100%{opacity:0;transform:scale(1)}
}
@keyframes bl4kop3{
  0%{opacity:0;transform:scale(1)}
  58.67%{opacity:0;transform:scale(1)}
  66.67%{opacity:1;transform:scale(1.01)}
  92%{opacity:1;transform:scale(1.042)}
  100%{opacity:0;transform:scale(1.052)}
}

/* Wie beweging heeft uitgezet houdt het eerste beeld, stil. De algemene regel
   eerder in dit blok zet animation al op none binnen .bl4; deze twee regels
   zorgen dat beeld twee en drie dan ook echt weg blijven. */
@media (prefers-reduced-motion:reduce){
  .bl4 .hero__film-b--1{opacity:1;transform:none}
  .bl4 .hero__film-b--2,.bl4 .hero__film-b--3{opacity:0}
}
/* 2. Het Smaak-blok. De smaakblokjes en het vierkant komen uit de bl2-laag en
      houden hun eigen opmaak; .bl-v2 brengt die mee. Hier staat alleen wat
      nodig is om ze in de bl4-pagina te laten passen. */
.bl4 .bl4-smaakblok{padding-block:clamp(56px,7vw,96px) 0;background:var(--grond)}
.bl4 .bl4-smaakblok__in{background:transparent;margin-top:clamp(22px,3vw,34px);overflow-x:clip}
.bl4 .bl4-smaakblok__in .bl2-sectie{padding-top:clamp(34px,4vw,56px)}
.bl4 .bl4-smaakblok__in .bl2-vk{padding-bottom:0}

/* 3. Het smakenvierkant. Het tekenvlak ging van 720 naar 1180 zodat elk rondje
      zijn naam erbij kan krijgen; zonder die ruimte paste minder dan de helft.
      De lettermaten in de tekening gaan mee omhoog, anders krimpen zij mee.
      Op een smal scherm staat de tekening in een vak dat opzij schuift, met een
      ondergrens van 960 px: onder die maat zijn honderdvierendertig namen niet
      meer te lezen. Wie liever niet schuift leest dezelfde namen in de lijst
      onder de tekening, met het aantal flessen erachter. */
.bl4 .bl4-smaakblok__in .bl2-vk__tekening{max-width:1180px}
.bl4 .bl4-smaakblok__in .bl2-vk__as{font-size:21px}
.bl4 .bl4-smaakblok__in .bl2-vk__naam{font-size:12px;stroke-width:3px}
.bl4 .bl4-smaakblok__in .bl2-vk__draad{stroke-width:1.2}
@media(max-width:1060px){
  .bl4 .bl4-smaakblok__in .bl2-vk__vak{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .bl4 .bl4-smaakblok__in .bl2-vk__tekening{min-width:960px}
}
/* --------------------------------- bl4g-ruimte: de onderste blokken -------
   Alleen voor /gedistilleerd/, /aperitief/ en /overig/. De tegels, de
   merkenmuur en de winkelband stonden te ver uit elkaar. Dat komt doordat elke
   sectie zijn eigen padding draagt: de ruimte tussen twee blokken is de som
   van twee, en die liep op tot 224 px tussen de tegels en de muur en 196 px
   tussen de muur en de winkelband. Ter vergelijking: op /slijterij/ zit tussen
   de muur en de wegwijzerkaarten ongeveer 184 px.

   Hier staan alleen de naar elkaar toe gekeerde kanten korter. Samen komen die
   uit op clamp(72px,9vw,132px): een derde tot ruim veertig procent minder dan
   voorheen, en dat op elk schermformaat. De
   buitenkanten houden meer lucht, zodat het tegelblok niet tegen de naad onder
   de hoofdstukken aan komt en de winkelband niet tegen de voettekst.

   Alles hangt aan body.bockje-v4g. Die klasse zet bl-ontwerp4-groep.php alleen
   op deze drie pagina's, dus /slijterij/, /whisky/ en de andere soortpagina's
   blijven staan zoals zij stonden. De winkelband valt buiten .bl4-groep -
   bl4_onderaan() verplaatst hem naar een eigen .bl4-omhulsel achter de oude
   inhoud - en hangt daarom ook aan de body-klasse.

   De lege alinea's komen van wpautop, dat de shortcode in een alinea zet die
   de browser meteen weer sluit zodra het eerste blokelement komt. Zij stonden
   tussen de merkenmuur en de winkelband en droegen daar hun marge aan bij.

   TERUGWEG: dit blok in zijn geheel weghalen. Er hangt niets anders in dit
   stijlblad van af.                                                          */
body.bockje-v4g .bl4 .schap{padding-block:clamp(48px,6vw,88px) clamp(36px,4.5vw,66px)}
body.bockje-v4g .bl4 .muur{padding-block:clamp(36px,4.5vw,66px)}
body.bockje-v4g .bl4 .winkel{padding-block:clamp(36px,4.5vw,66px) clamp(48px,6vw,88px)}
body.bockje-v4g p:empty{display:none}
/* ------------------- bl4s-ruimte: dezelfde maat op /slijterij/ en de zeven
   soortpagina's ----------------------------------------------------------
   De eigenaar wilde op /slijterij/, /whisky/, /bier/, /wijn/, /gin/,
   /jenever/, /rum/ en /port/ dezelfde krappere afstanden tussen de onderste
   blokken als het blok hierboven op /gedistilleerd/, /aperitief/ en /overig/
   zet.

   Aangetroffen, onder de hoofdstukkenrol:
   * de zeven soortpagina's: het smaakblok (alleen /whisky/), de naad, het
     schap met filter en lijst, de schuifrij (.spoor), de merkenmuur (.muur)
     en de winkelband (.winkel).
   * /slijterij/: de naad, het tegelblok (.schap.beginnen), de merkenmuur,
     de wegwijzerkaarten (.slijwijzer) en de winkelband.
   Elke sectie draagt haar eigen padding, dus de afstand tussen twee blokken
   is de som van twee. Die liep op tot 220 px tussen schap en schuifrij,
   224 px tussen tegelblok en muur op /slijterij/, 196 px tussen schuifrij en
   muur en tussen muur en winkelband, en 184 px tussen muur en
   wegwijzerkaarten.

   Hier staan alleen de naar elkaar toe gekeerde kanten korter. Samen komen
   die overal uit op clamp(72px,9vw,132px), precies de maat van de drie
   groepspagina's. De buitenkanten houden meer lucht: de bovenkant van het
   schap blijft clamp(48px,6vw,88px) onder de naad, en de onderkant van de
   winkelband clamp(48px,6vw,88px) boven de voettekst.

   Het schap op de soortpagina's is een werkblok - het filter staat boven, de
   lijst eronder - en mag van binnen niet krap worden. Daarom is daar
   dezelfde som van clamp(72px,9vw,132px) anders verdeeld: het schap houdt
   clamp(44px,5.5vw,80px) onder de lijst en de schuifrij neemt genoegen met
   clamp(28px,3.5vw,52px). De afstand tussen de twee blokken blijft daarmee
   gelijk aan die tussen alle andere blokken; alleen de ademruimte binnen het
   werkblok is groter.

   Bereik: body.bockje-v4 staat op precies elf pagina's - deze acht plus de
   drie groepspagina's. :not(.bockje-v4g) haalt die drie eruit, zodat zij
   onveranderd blijven. :not(.bockje-slij) scheidt de zeven soortpagina's van
   /slijterij/, dat zowel bockje-slij als bockje-v4 draagt. Het kopblok
   (.hero), de hoofdstukkenrol (.rol), de naad en het smaakblok op /whisky/
   blijven onaangeroerd; het smaakblok sluit met padding-bottom 0 al strak
   op de naad aan.

   De lege alinea's komen van wpautop, dat een shortcode in een alinea zet die
   de browser meteen weer sluit zodra het eerste blokelement komt. Zij staan
   tussen de merkenmuur en de Avada-inhoud eronder en dragen daar hun marge
   aan bij.

   TERUGWEG: dit blok in zijn geheel weghalen. Er hangt niets anders in dit
   stijlblad van af.                                                          */
body.bockje-v4:not(.bockje-v4g) .bl4 .schap{padding-block:clamp(48px,6vw,88px) clamp(36px,4.5vw,66px)}
body.bockje-v4:not(.bockje-v4g):not(.bockje-slij) .bl4 .schap{padding-block:clamp(48px,6vw,88px) clamp(44px,5.5vw,80px)}
body.bockje-v4:not(.bockje-v4g):not(.bockje-slij) .bl4 .spoor{padding-block:clamp(28px,3.5vw,52px) clamp(36px,4.5vw,66px)}
body.bockje-v4:not(.bockje-v4g) .bl4 .muur{padding-block:clamp(36px,4.5vw,66px)}
body.bockje-v4:not(.bockje-v4g) .bl4-slij .slijwijzer{padding-block:clamp(36px,4.5vw,66px)}
body.bockje-v4:not(.bockje-v4g) .bl4 .winkel{padding-block:clamp(36px,4.5vw,66px) clamp(48px,6vw,88px)}
body.bockje-v4:not(.bockje-v4g) p:empty{display:none}