.bb-galerij, .bb-controller, .bb-specs, .bb-blokken, .bb-info, .bb-recent, .bb-badges {
--bb-donkergroen: #1D3C34;
--bb-lichtgroen: #39892F;
--bb-geel: #F1B248;
--bb-geel-hover: #E9A633;
--bb-grijs: #5D5D5D;
--bb-lichtgrijs: #858585;
--bb-beige: #F2F2EE;
--bb-wit: #FFFFFF;
--bb-kop: 'Merriweather', Georgia, serif;
box-sizing: border-box;
}
.bb-galerij *, .bb-controller *, .bb-specs *, .bb-blokken *, .bb-info *, .bb-recent *, .bb-badges * { box-sizing: border-box; }
.bb-icoon { flex: 0 0 auto; display: block; width: 24px; height: 24px; color: var(--bb-lichtgroen); object-fit: contain; } .bb-knop,
.bb-controller .single_add_to_cart_button.bb-knop {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 44px;
margin: 0 !important;
padding: 10px 24px !important;
border: 0 !important;
border-radius: 6px !important;
background: var(--bb-geel) !important;
color: var(--bb-donkergroen) !important;
font-family: var(--bb-kop) !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: 0 !important;
text-align: center;
text-decoration: none !important;
cursor: pointer;
transition: background-color .15s;
}
div.bb-blok-tekst{
display: flex;
flex-direction: column;
gap: 10px!important;
}
.bb-knop:hover, .bb-knop:focus-visible,
.bb-controller .single_add_to_cart_button.bb-knop:hover { background: var(--bb-geel-hover) !important; padding: 10px 24px !important; }
.bb-knop::after, .bb-controller .single_add_to_cart_button.bb-knop::after { display: none !important; }
.bb-knop:focus-visible { outline: 2px solid var(--bb-donkergroen); outline-offset: 2px; }
.bb-controller .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; } .bb-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; cursor: help; border-radius: 50%; }
.bb-tip .bb-icoon { width: 16px; height: 16px; }
.bb-tip:focus-visible { outline: 2px solid var(--bb-lichtgroen); outline-offset: 2px; }
.bb-tip-tekst {
position: absolute;
left: 50%;
bottom: calc(100% + 10px);
z-index: 30;
width: max-content;
max-width: min(260px, calc(100vw - 48px));
padding: 10px 12px;
border-radius: 8px;
background: var(--bb-donkergroen);
color: var(--bb-wit);
font-size: 13px;
font-weight: 400;
line-height: 1.45;
text-align: left;
box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
opacity: 0;
visibility: hidden;
transform: translate(-50%, 4px);
transition: opacity .15s, transform .15s, visibility .15s;
pointer-events: none;
}
.bb-tip:hover .bb-tip-tekst, .bb-tip:focus .bb-tip-tekst,
.bb-badge:hover .bb-tip-tekst, .bb-badge:focus .bb-tip-tekst { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .bb-galerij { display: flex; flex-direction: column; gap: 14px; }
.bb-galerij-hoofd {
aspect-ratio: 1;
overflow: hidden;
border-radius: 10px;
background: var(--bb-wit);
touch-action: pan-y;
}
.bb-galerij-hoofd img { display: block; width: 100%; height: 100%; padding: 6%; object-fit: contain; }
.bb-galerij-strook { position: relative; }
.bb-galerij-duimen {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
.bb-galerij-duimen::-webkit-scrollbar { display: none; }
.bb-galerij-duim {
flex: 0 0 calc((100% - 28px) / 3);
aspect-ratio: 1;
margin: 0;
padding: 0;
overflow: hidden;
border: 0;
border-radius: 8px;
background: var(--bb-wit);
cursor: pointer;
scroll-snap-align: start;
box-shadow: inset 0 0 0 2px transparent;
transition: box-shadow .15s;
}
.bb-galerij-duim img { display: block; width: 100%; height: 100%; padding: 10%; object-fit: contain; pointer-events: none; }
.bb-galerij-duim:hover { box-shadow: inset 0 0 0 2px rgba(29, 60, 52, .15); }
.bb-galerij-duim.is-actief { box-shadow: inset 0 0 0 2px var(--bb-lichtgroen); }
.bb-galerij-duim:focus-visible { outline: 2px solid var(--bb-donkergroen); outline-offset: 2px; }
.bb-galerij-pijl {
position: absolute;
top: 50%;
z-index: 2;
display: grid;
place-items: center;
width: 34px;
height: 34px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--bb-geel);
color: var(--bb-donkergroen);
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
transform: translateY(-50%);
transition: opacity .15s, background-color .15s;
}
.bb-galerij-pijl:hover { background: var(--bb-geel-hover); }
.bb-galerij-pijl.is-vorige { left: 8px; }
.bb-galerij-pijl.is-volgende { right: 8px; }
.bb-galerij-pijl[disabled] { opacity: 0; pointer-events: none; } .bb-controller { container: bb-controller / inline-size;
padding: 32px;
border-radius: 10px;
background: var(--bb-wit);
color: var(--bb-grijs);
font-size: 17px;
}
.bb-controller form.cart { margin: 0 !important; }
.bb-controller-form, .bb-controller .variations, .bb-controller .woocommerce-variation-add-to-cart, .bb-controller .single_variation_wrap {
display: flex;
flex-direction: column;
gap: 14px;
justify-content: flex-start;
flex-wrap: nowrap;
}
.bb-controller-form {gap: 24px;} .bb-controller .bb-controller-form .variations.variations { display: flex !important; margin: 0 !important; }
.bb-controller-rij {display: grid;grid-template-columns: 130px minmax(0, 1fr);align-items: start;gap: 16px;} .bb-controller-label {display: flex;align-items: center;min-height: 44px;color: var(--bb-donkergroen);font-size: 16px;font-weight: 700;line-height: 1.3;}
.bb-controller-kleur .bb-controller-label { min-height: 40px; }
.bb-controller-label label { margin: 0; color: inherit; font: inherit; cursor: pointer; } .bb-controller-labeltekst { display: block; }
.bb-controller-labeltekst label { display: inline; }
.bb-controller-labeltekst .bb-nowrap { white-space: nowrap; }
.bb-controller-labeltekst .bb-tip { vertical-align: -2px; }
.bb-controller-veld { min-width: 0; } .bb-kleurkeuze {display: flex;flex-wrap: wrap;gap: 10px;margin: 0;padding: 0!important;list-style: none;}
.bb-kleurkeuze li { margin: 0; padding: 0; list-style: none; }
.bb-kleurkeuze-optie {
position: relative;
display: grid;
place-items: center;
width: 50px;
height: 50px;
border-radius: 6px;
background: var(--bb-beige);
box-shadow: inset 0 0 0 1px transparent;
transition: box-shadow .15s;
}
a.bb-kleurkeuze-optie:hover { box-shadow: inset 0 0 0 1px rgba(29, 60, 52, .35); }
.bb-kleurkeuze-optie.is-huidig { background: var(--bb-wit); box-shadow: inset 0 0 0 1px var(--bb-grijs); }
.bb-kleurkeuze-optie:focus-visible { outline: 2px solid var(--bb-lichtgroen); outline-offset: 2px; }
.bb-kleurkeuze-vlak {
display: block;
width: 28px;
height: 28px;
border-radius: 3px;
background: var(--bb-kleur, #d6d6d0);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.bb-kleurkeuze-optie::before,
.bb-kleurkeuze-optie::after {
position: absolute;
left: 50%;
z-index: 30;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .15s, transform .15s, visibility .15s;
}
.bb-kleurkeuze-optie::after {
content: attr(data-naam);
bottom: calc(100% + 9px);
padding: 5px 10px;
border-radius: 6px;
background: var(--bb-donkergroen);
color: var(--bb-wit);
font-size: 13px;
line-height: 1.3;
white-space: nowrap;
transform: translate(-50%, 4px);
}
.bb-kleurkeuze-optie::before {
content: '';
bottom: calc(100% + 4px);
border: 5px solid transparent;
border-bottom: 0;
border-top-color: var(--bb-donkergroen);
transform: translate(-50%, 4px);
}
.bb-kleurkeuze-optie:hover::before, .bb-kleurkeuze-optie:hover::after,
.bb-kleurkeuze-optie:focus-visible::before, .bb-kleurkeuze-optie:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }  .bb-controller .bb-controller-veld div.quantity.quantity { display: block !important; float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; }
.bb-controller .bb-controller-veld div.quantity.quantity .qty,
.bb-controller select {
display: block;
width: 100% !important;
height: 44px;
margin: 0;
padding: 0 16px !important;
border: 0 !important;
border-radius: 6px !important;
background-color: var(--bb-beige) !important;
color: var(--bb-grijs) !important;
font-family: inherit;
font-size: 15px !important;
font-weight: 400;
line-height: 44px;
text-align: left !important;
box-shadow: none !important;
}
.bb-controller select {
padding-right: 42px !important;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D3C34' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
background-size: 16px !important;
cursor: pointer;
}
.bb-controller .quantity .qty:focus, .bb-controller select:focus { outline: 2px solid var(--bb-lichtgroen); outline-offset: 0; }
.bb-controller-reset { margin-top: -8px; }
.bb-controller-reset .bb-controller-label { min-height: 0; }
.bb-controller-reset:has(.reset_variations[style*="hidden"]) { display: none; }
.bb-controller .reset_variations { display: inline-block; color: var(--bb-lichtgroen); font-size: 13px; line-height: 1.4; text-decoration: underline; } .bb-controller-variatie:has(.single_variation:empty) { display: none; }
.bb-controller .single_variation { font-size: 14px; }
.bb-controller .single_variation .price { color: var(--bb-donkergroen); font-size: 18px; font-weight: 700; }
.bb-controller .single_variation p { margin: 0; padding: 0; }
.bb-controller .stock { margin: 0 0 10px; padding: 0; font-size: 14px; }
.bb-controller .stock.out-of-stock { color: #B3261E; }
.bb-controller-actie .bb-knop { width: 100%; } @container bb-controller (max-width: 420px) {
.bb-controller-rij { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.bb-controller-label, .bb-controller-kleur .bb-controller-label { min-height: 0; }
.bb-controller-actie .bb-controller-label, .bb-controller-reset .bb-controller-label,
.bb-controller-variatie .bb-controller-label { display: none; }
.bb-controller-reset { margin-top: -6px; }
.bb-controller-form { gap: 20px; }
} @container bb-controller (max-width: 320px) {
.bb-controller button.single_add_to_cart_button.button.alt.bb-knop { font-size: 16px !important; }
.bb-kleurkeuze { gap: 8px; }
.bb-kleurkeuze-optie { width: 46px; height: 46px; }
}
@container bb-controller (max-width: 270px) {
.bb-controller button.single_add_to_cart_button.button.alt.bb-knop { padding: 12px 6px !important; font-size: 15px !important; }
}
@media (max-width: 480px) {
.bb-controller { padding: 22px 18px; }
}  .bb-specs {
--bb-kolommen: 3;
--bb-kolom-min: 230px;
--bb-kolom-gap: 32px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(var(--bb-kolom-min), calc((100% - (var(--bb-kolommen) - 1) * var(--bb-kolom-gap)) / var(--bb-kolommen))), 1fr));
gap: 26px var(--bb-kolom-gap);
margin: 0;
padding: 0;
}
.bb-spec { display: flex; align-items: flex-start; gap: 16px; margin: 0; }
.bb-spec .bb-icoon {width: 32px;height: 32px;margin-top: 2px;}
.bb-spec-tekst { min-width: 0; }
.bb-spec-label, .bb-spec-waarde { margin: 0 !important; padding: 0; line-height: 1.45; }
.bb-spec-label {color: var(--bb-donkergroen);font-size: 16px;font-weight: 300;}
.bb-spec-waarde {color: var(--bb-donkergroen);font-size: 17px;font-weight: 700;text-wrap: pretty;}
@media (max-width: 480px) {
.bb-specs { row-gap: 18px; }
.bb-spec { gap: 14px; }
.bb-spec .bb-icoon { width: 28px; height: 28px; }
}  .bb-blokken {container: bb-blokken / inline-size;display: flex;flex-direction: column;gap: 40px;}
.bb-blok { display: grid; align-items: center; gap: 40px clamp(32px, 5.6cqi, 64px); }
.bb-blok.foto-rechts { grid-template-columns: minmax(0, 11fr) minmax(0, 6fr); }
.bb-blok.foto-links { grid-template-columns: minmax(0, 6fr) minmax(0, 11fr); }
.bb-blok.foto-links .bb-blok-foto { order: -1; }
.bb-blok.volle-breedte .bb-blok-tekst { max-width: 860px; }
.bb-blok-foto img {display: block;width: 100%;height: auto;border-radius: 20px; }
.bb-blok-eyebrow {margin: 0px!important;padding: 0 !important;color: var(--bb-lichtgroen);font-size: 18px;line-height: 1.4;}
.bb-blok-titel {
margin: 0px!important;
padding: 0 !important;
color: var(--bb-donkergroen);
font-family: var(--bb-kop);
font-size: clamp(26px, 4.4cqi, 44px) !important; font-weight: 800;
line-height: 1.3 !important;
text-wrap: balance;
}
.bb-blok-body { color: var(--bb-grijs); font-size: 15px; font-weight: 300; line-height: 1.7; }
.bb-blok-body > :first-child { margin-top: 0; }
.bb-blok-body > :last-child { margin-bottom: 0; padding-bottom: 0; }
.bb-blok-body p {margin: 0 0 1em;padding: 0;font-size: 17px;text-wrap: pretty;}
.bb-blok-body a { color: var(--bb-lichtgroen); text-decoration: underline; }
.bb-blok-body strong { font-weight: 600; color: var(--bb-donkergroen); }
.bb-blok-body ul, .bb-blok-body ol { margin: 0 0 1em; padding-left: 1.2em; } .bb-blok-punten { --bb-kolommen: 2; row-gap: 22px; margin-top: 30px; }
.bb-blok.volle-breedte .bb-blok-punten { --bb-kolommen: 3; }
.bb-blok-knop { align-self: flex-start; margin-top: 28px; } @container bb-blokken (max-width: 560px) {
.bb-blok.foto-rechts, .bb-blok.foto-links { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.bb-blok .bb-blok-foto { order: -1; max-width: 520px; }
.bb-blok-knop { align-self: stretch; }
.bb-blok-punten { row-gap: 18px; }
} .bb-recent[hidden], .et_pb_section:has(.bb-recent[hidden]) { display: none !important; }
.bb-recent-kop {
margin: 0 0 24px !important;
padding: 0 !important;
color: var(--bb-donkergroen);
font-family: var(--bb-kop);
font-size: 28px !important;
font-weight: 700;
line-height: 1.3 !important;
}
.bb-recent-bouwer { margin: 0; padding: 24px; border: 2px dashed rgba(29, 60, 52, .25); border-radius: 10px; color: var(--bb-grijs); } .bb-info-kop {
margin: 0 0 18px !important;
padding: 0 !important;
color: var(--bb-lichtgroen);
font-family: var(--bb-kop);
font-size: 28px !important;
font-weight: 700;
line-height: 1.3 !important;
}
.bb-info-lijst { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.bb-info-lijst li { margin: 0; padding: 0 0 4px; list-style: none; }
.bb-info-lijst li::before { display: none; }
.bb-info-lijst a {
color: var(--bb-donkergroen);
font-size: 16px;
font-weight: 300;
line-height: 1.6;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color .15s;
}
.bb-info-lijst a:hover { color: var(--bb-lichtgroen); } .bb-badges {display: flex;flex-wrap: wrap;gap: 8px;margin: 0 0 16px;padding: 0!important;list-style: none;}
.bb-badge {
position: relative;
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
padding: 6px 12px 6px 9px;
border-radius: 100px;
background: var(--bb-wit);
color: var(--bb-donkergroen);
font-size: 14px;
font-weight: 600;
line-height: 1.2;
list-style: none;
}
.bb-badge .bb-icoon { width: 20px; height: 20px; }
.bb-badge.heeft-uitleg { cursor: help; }
.bb-badge .bb-tip-tekst { left: 0; transform: translate(0, 4px); }
.bb-badge:hover .bb-tip-tekst, .bb-badge:focus .bb-tip-tekst { transform: translate(0, 0); }
button.single_add_to_cart_button.button.alt.bb-knop{
padding: 12px!important;
font-weight:900!important;
font-size: 18px!important;
}
.bb_price > div.et_pb_text_inner > div.woocommerce > p.price > span{
color: #39882F!important;
font-family: var(--et_global_heading_font);
font-weight: 800;
font-size: 42px;
}
.bb_price > div.et_pb_text_inner > div.woocommerce > p.price > small{
color: #1d3b35 !important;
font-family: var(--et_global_body_font);
font-weight: 600;
font-size: 17px;
margin-top: 7px;
}  body.single-product.et-db #et-boc .et-l--body .et_pb_text .et_pb_text_inner h1 {
font-size: clamp(30px, 4vw + 16px, 56px);
-webkit-hyphens: auto;
hyphens: auto;
text-wrap: balance;
} @media (min-width: 768px) and (max-width: 980px) {
.et-l--body .et_pb_row:has(> .et_pb_column .bb-galerij):has(> .et_pb_column .bb-controller) > .et_pb_column:has(.bb-galerij) {
width: calc(41.6667% - var(--horizontal-gap-parent, 5.5%) * 7 / 12) !important;
}
.et-l--body .et_pb_row:has(> .et_pb_column .bb-galerij):has(> .et_pb_column .bb-controller) > .et_pb_column:has(.bb-controller) {
width: calc(58.3333% - var(--horizontal-gap-parent, 5.5%) * 5 / 12) !important;
}
}