/* bucomat-2027.css: gedeeld stijlbestand voor www.bucomat.be (huisstijl 2027, v1.2).
   Bevat wat op elke pagina gelijk is: kleuren, topbalk, kop met menu, knoppen, kleurband en voettekst.
   Wordt NA de eigen <style> van een pagina geladen. Een wijziging hier geldt meteen voor alle pagina's. */
:root{--teal:#006E5D;--teal-d:#00543F;--gras:#3FA457;--lime:#A5C957;--lime-l:#C9E96A;--inkt:#12281F;--grijs:#5B6A5E;--fond:#F2F8EE;--wit:#FFFFFF;--lijn:#E2EAD9;
  --grad:linear-gradient(120deg,#006e5d 0%,#00806a 55%,#3fa457 100%);--ease:cubic-bezier(.22,1,.36,1)}

/* het uitschuifmenu op gsm staat naast het scherm klaar: de pagina mag daardoor niet breder worden dan het scherm */
html,body{overflow-x:clip}

/* knoppen: strak limoen, hoeken 3 px, geen zweefeffect */
.btn{display:inline-block;border-radius:3px;padding:14px 24px;font-weight:700;text-decoration:none;font-size:15px;transition:background .2s,color .2s,border-color .2s}
.btn:hover{transform:none;box-shadow:none}
.btn-lime{background:var(--lime);color:var(--inkt)}.btn-lime:hover{background:#93B845}
.btn-teal{background:var(--grad);color:#fff}.btn-teal:hover{background:var(--teal-d)}
.btn-lijn{border:1.5px solid var(--inkt);color:var(--inkt);padding:12.5px 22.5px}.btn-lijn:hover{background:var(--inkt);color:#fff}
.btn-klein{background:transparent;border:1.5px solid var(--inkt);color:var(--inkt);height:38px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.btn-klein:hover{background:var(--inkt);color:#fff}
/* kaarten vertegenwoordigers: alles in het midden, knoppen op één lijn onderaan */
.rep{text-align:center;align-items:center;position:relative}
.rep .tag-key{position:absolute;top:-12px;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap}
.rep .foto{margin:0 auto 18px}
.rep .btn-klein{margin:auto 0 0}
.rep>:nth-last-child(2){margin-bottom:20px}
.btn-witlijn,.btn-ghost{background:transparent;border:1.5px solid #fff;color:#fff;padding:12.5px 22.5px;backdrop-filter:none}
.btn-witlijn:hover,.btn-ghost:hover{background:#fff;color:var(--inkt)}
a:focus-visible,button:focus-visible{outline:3px solid var(--gras);outline-offset:2px}

/* topbalk */
.topbar{background:var(--teal-d);color:#d9e8d9;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:8px 28px;gap:12px}
.topbar a{color:var(--lime-l);font-weight:700}
.topbar .taal a{color:#d9e8d9;text-decoration:none;font-weight:400}

/* kop: alles op het midden van de logoletters (de kiemplant telt niet mee, vandaar margin-top op het menu) */
#prog{display:none}
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--lijn);transition:box-shadow .3s}
header.scrolled{box-shadow:0 6px 24px rgba(0,60,45,.08)}
header .wrap{display:flex;align-items:center;justify-content:flex-start;gap:22px;padding-top:8px;padding-bottom:12px}
.logo{display:block}.logo img{height:52px;display:block}
header nav{display:flex;align-items:center;gap:22px;margin-left:auto;margin-top:16px}
header nav a{margin:0;text-decoration:none;color:var(--inkt);font-size:15px;font-weight:600;white-space:nowrap;position:static}
header nav a:after{display:none}
header nav a.actief{color:var(--teal)}
header nav a.aan{border:1.5px solid var(--inkt);border-radius:3px;height:38px;padding:0 14px;display:flex;align-items:center;margin:0 -10px 0 12px;font-weight:700;transition:background .2s,color .2s}
header nav a.aan:hover{background:var(--inkt);color:#fff}
header nav a.cta{background:var(--lime);color:var(--inkt);border-radius:3px;height:38px;padding:0 16px;display:flex;align-items:center;font-weight:700;transition:background .2s}
header nav a.cta:hover{background:#93B845}
.mnav{display:none;background:none;border:0;cursor:pointer;padding:6px 6px 0;z-index:70;position:relative;margin-left:auto;margin-top:16px}
.mnav span{display:block;width:24px;height:2.5px;background:var(--inkt);margin:5px 0;border-radius:2px;transition:transform .3s,opacity .3s}
.mnav.x span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}.mnav.x span:nth-child(2){opacity:0}.mnav.x span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* stippenvak en kleurband uit de huisstijl */
.stip{background-color:var(--teal-d);background-image:radial-gradient(circle,var(--lime-l) 5px,transparent 5.6px);background-size:30px 30px;background-position:9px 9px;border-radius:3px}
/* boven de kleurband blijft een witte strook van dezelfde hoogte als de balkjes (20 px) */
.band5{display:grid;grid-template-columns:2fr 1fr 3fr 1fr 2fr;gap:8px;height:20px;margin-top:20px}
.band5 i{border-radius:3px;display:block}

/* voettekst */
footer{background:var(--wit);color:var(--grijs);padding:36px 0 26px;font-size:14px}
footer .wrap{display:block}
footer .kol{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
footer h4{color:var(--inkt);margin-bottom:8px;font-size:14px}
footer a{color:var(--grijs);text-decoration:none;display:inline;margin:0;transition:color .2s}
footer .kol div+div a,footer .kol>div>a{display:block;margin-bottom:5px}
footer a:hover{color:var(--inkt)}
footer .soc{display:flex;gap:10px;margin-top:10px}footer .soc a{display:inline-flex}
footer .onder{margin-top:26px;padding-top:16px;border-top:1px solid var(--lijn);font-size:13px}
footer .onder a{color:inherit;text-decoration:underline}

@media (max-width:1180px){
  .mnav{display:block}
  header nav{margin-top:0;position:fixed;top:0;right:0;height:100dvh;width:min(82vw,340px);background:#fff;box-shadow:-18px 0 42px rgba(0,40,30,.2);flex-direction:column;align-items:stretch;gap:0;padding:78px 26px 26px;transform:translateX(105%);transition:transform .35s,visibility .35s;visibility:hidden;z-index:60;margin-left:0}
  header nav.open{transform:none;visibility:visible}
  header nav a{padding:12px 0;border-bottom:1px solid var(--lijn);white-space:normal;font-size:15px}
  header nav a.aan{margin:18px 0 0;justify-content:center;height:auto;padding:12px 16px;border:1.5px solid var(--inkt)}
  header nav a.cta{margin-top:10px;justify-content:center;border-bottom:0;height:auto;padding:13px 16px}
}
@media (max-width:920px){
  .topbar .wrap{flex-direction:column;gap:3px;text-align:center}
  footer .kol{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){footer .kol{grid-template-columns:1fr}}

/* "Voor uw winkel": uitklapmenu in de kop (tuincentra, bouwmarkten, supermarkten) */
header nav .sub{position:relative;display:flex;align-items:center}
header nav .sub>a:after{content:"";display:inline-block;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 0 3px 8px;position:static;background:none}
header nav .sub .uit{position:absolute;top:100%;left:-14px;padding-top:14px;display:none;z-index:30}
header nav .sub:hover .uit,header nav .sub:focus-within .uit{display:block}
header nav .sub .uit div{background:#fff;border:1px solid var(--lijn);border-radius:3px;box-shadow:0 12px 24px rgba(0,70,50,.12);padding:6px 0;min-width:220px}
header nav .sub .uit a{display:block;padding:9px 16px;font-weight:600}
header nav .sub .uit a:hover{background:var(--fond)}
@media (max-width:1180px){
  header nav .sub{display:block}
  header nav .sub>a{display:block}
  header nav .sub>a:after{display:none}
  header nav .sub .uit{display:block;position:static;padding:0}
  header nav .sub .uit div{border:0;box-shadow:none;padding:0;min-width:0}
  header nav .sub .uit a{padding:10px 0 10px 18px;font-weight:400;border-bottom:1px solid var(--lijn)}
}

/* privacy- en cookiepagina: leesbare tekstkolom */
.jur{min-height:46vh}
.jur h1{font-size:clamp(30px,3.6vw,44px)}
.jur .tekst{max-width:760px;margin-top:22px;font-size:15.5px;color:var(--grijs);line-height:1.7}
.jur .tekst h2{font-size:19px;color:var(--inkt);margin:30px 0 8px}
.jur .tekst p{margin-top:10px}
.jur .tekst b{color:var(--inkt)}
.jur .tekst a{color:var(--teal)}
.jur .tekst small{font-size:13px}