.bb-balk { --bb-donkergroen: #1D3C34;
--bb-lichtgroen: #39892F;
--bb-geel: #F1B248;
--bb-geel-hover: #E9A633;
--bb-grijs: #5D5D5D;
--bb-lichtgrijs: #858585;
--bb-wit: #FFFFFF;
--bb-kop: 'Merriweather', Georgia, serif;
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 9990; box-sizing: border-box;
background: #FFFFFF;
box-shadow: 0 -6px 24px rgba(29, 60, 52, .10);
transform: translateY(calc(100% + 24px));
visibility: hidden;
transition: transform .3s ease, visibility 0s linear .3s;
}
.bb-balk.is-zichtbaar {
transform: none;
visibility: visible;
transition: transform .3s ease, visibility 0s;
}
.bb-balk * { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
.bb-balk, .bb-balk.is-zichtbaar { transition: none; }
} body.bb-heeft-balk { padding-bottom: var(--bb-balk-hoogte, 92px) !important; }
.bb-balk-binnen {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
grid-template-areas:
"foto titel prijs knop"
"foto regel prijs knop";
align-items: center;
gap: 2px 24px;
width: 80%;
max-width: 1232px;
margin: 0 auto;
padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
}
.bb-balk-binnen:not(:has(.bb-balk-foto)) {
grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-areas:
"titel prijs knop"
"regel prijs knop";
}
.bb-balk-foto { grid-area: foto; width: 64px; height: 64px; }
.bb-balk-foto img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bb-balk-titel,
.bb-balk-regel,
.bb-balk-prijs { margin: 0 !important; padding: 0 !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bb-balk-titel {
grid-area: titel;
align-self: end;
color: var(--bb-lichtgroen);
font-family: var(--bb-kop);
font-size: 20px;
font-weight: 700;
line-height: 1.3;
}
.bb-balk-regel {
grid-area: regel;
align-self: start;
color: var(--bb-grijs);
font-size: 15px;
font-weight: 300;
line-height: 1.4;
}
.bb-balk-prijs {
grid-area: prijs;
overflow: visible;
color: var(--bb-lichtgroen);
font-family: var(--bb-kop);
font-size: 28px;
font-weight: 800;
line-height: 1.2;
text-align: right;
}
.bb-balk-prijs .price { color: inherit !important; font: inherit !important; }
.bb-balk-prijs .woocommerce-Price-amount { color: inherit; }
.bb-balk-prijs .woocommerce-price-suffix { display: none; } .bb-balk-prijs .bb-balk-va { font-size: 16px; font-weight: 700; }
.bb-balk-prijs del { margin-right: 4px; color: var(--bb-lichtgrijs); font-size: 16px; font-weight: 400; opacity: 1; }
.bb-balk-prijs ins { text-decoration: none; background: none; } .bb-balk .bb-balk-knop.bb-knop {
grid-area: knop;
min-width: 330px;
min-height: 48px;
margin-left: 12px !important;
padding: 12px 32px !important;
border-radius: 8px !important;
font-size: 17px !important;
white-space: nowrap;
}
.bb-balk .bb-balk-knop.bb-knop:hover { padding: 12px 32px !important; }
.bb-balk-knop-kort { display: none; } @media (max-width: 1100px) {
.bb-balk .bb-balk-knop.bb-knop { min-width: 0; }
.bb-balk-knop-lang { display: none; }
.bb-balk-knop-kort { display: inline; }
.bb-balk-prijs { font-size: 24px; }
} @media (max-width: 767px) {
.bb-balk-binnen {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"foto titel knop"
"foto regel knop"
"foto prijs knop";
gap: 1px 12px;
width: auto;
margin: 0 16px;
padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
}
.bb-balk-binnen:not(:has(.bb-balk-foto)) {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"titel knop"
"regel knop"
"prijs knop";
}
.bb-balk-foto { width: 52px; height: 52px; }
.bb-balk-titel { font-size: 15px; }
.bb-balk-regel { align-self: center; font-size: 13px; }
.bb-balk-prijs { align-self: start; font-size: 17px; text-align: left; }
.bb-balk-prijs .bb-balk-va { font-size: 13px; }
.bb-balk-prijs del { font-size: 13px; }
.bb-balk .bb-balk-knop.bb-knop,
.bb-balk .bb-balk-knop.bb-knop:hover { min-height: 44px; margin-left: 0 !important; padding: 10px 18px !important; font-size: 15px !important; }
}
@media (max-width: 380px) {
.bb-balk-foto { display: none; }
.bb-balk-binnen, .bb-balk-binnen:not(:has(.bb-balk-foto)) {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"titel knop"
"regel knop"
"prijs knop";
}
}