.bb-mand {
--bb-donker: #1D3C34;
--bb-donker-2: #25403A;
--bb-groen: #39892F;
--bb-geel: #F1B248;
--bb-geel-licht: #F6C66E;
--bb-creme: #F2F2EE;
--bb-tekst: #5D5D5D;
--bb-grijs: #858585;
--bb-lijn: #E4E4DD;
--bb-fout: #A4262C;
--bb-kop: 'Merriweather', Georgia, serif;
--bb-body: 'Heebo', Helvetica, Arial, sans-serif;
--bb-ease: cubic-bezier(.22, 1, .36, 1);
position: fixed;
inset: 0;
z-index: 2147483000;
font-family: var(--bb-body);
font-size: 15px;
line-height: 1.45;
color: var(--bb-tekst);
}
.bb-mand[hidden],
.bb-mand [hidden] {
display: none !important;
}
.bb-mand *,
.bb-mand *::before,
.bb-mand *::after {
box-sizing: border-box;
} .bb-mand :where(h2, h3, p, ul, li) {
margin: 0;
padding: 0;
list-style: none;
}
.bb-mand :where(h2, h3) {
font-family: var(--bb-kop);
color: var(--bb-donker);
font-weight: 900;
line-height: 1.2;
padding: 0;
}
.bb-mand button {
font-family: inherit;
cursor: pointer;
}
.bb-mand :is(a, button, input):focus-visible {
outline: 3px solid var(--bb-geel);
outline-offset: 2px;
}
.bb-mand__sr {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
html.bb-mand-scrollslot {
overflow: hidden;
padding-right: var(--bb-schuifbalk, 0);
} .bb-mand__achtergrond {
position: absolute;
inset: 0;
background: rgba(29, 60, 52, .45);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
opacity: 0;
transition: opacity .3s ease;
}
.bb-mand__paneel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
width: min(460px, 100%);
height: 100%;
background: var(--bb-creme);
box-shadow: -16px 0 48px rgba(0, 0, 0, .18);
transform: translateX(100%);
transition: transform .34s var(--bb-ease);
overscroll-behavior: contain;
outline: none;
}
.bb-mand.is-open .bb-mand__achtergrond {
opacity: 1;
}
.bb-mand.is-open .bb-mand__paneel {
transform: none;
}
.bb-mand__paneel.is-vegen {
transition: none;
} .bb-mand__kop {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 22px 20px 22px 24px;
background: var(--bb-donker);
overflow: hidden;
} .bb-mand__kop::before {
content: '';
position: absolute;
top: -150px;
right: -70px;
width: 230px;
height: 230px;
border-radius: 50%;
background: var(--bb-donker-2);
pointer-events: none;
} .bb-mand__kop::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 35%;
height: 3px;
background: var(--bb-geel);
opacity: 0;
transform: translateX(-100%);
}
.bb-mand.is-bezig .bb-mand__kop::after {
opacity: 1;
animation: bb-voortgang 1.1s ease-in-out infinite;
}
@keyframes bb-voortgang {
from { transform: translateX(-100%); }
to { transform: translateX(300%); }
}
.bb-mand .bb-mand__titel {
position: relative;
display: flex;
align-items: center;
gap: 10px;
color: #fff;
font-size: 24px;
}
.bb-mand__aantal {
display: inline-block;
padding: 3px 10px;
border-radius: 100px;
background: var(--bb-geel);
color: var(--bb-donker);
font-family: var(--bb-body);
font-size: 13px;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
}
.bb-mand .bb-mand__sluit {
position: relative;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .1);
color: #fff;
transition: background-color .2s, transform .2s var(--bb-ease);
}
.bb-mand .bb-mand__sluit:hover {
background: rgba(255, 255, 255, .2);
transform: rotate(90deg);
} .bb-mand__toegevoegd {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
background: var(--bb-groen);
color: #fff;
font-weight: 500;
opacity: 0;
transform: translateY(-6px);
transition: opacity .25s ease, transform .25s var(--bb-ease);
}
.bb-mand__toegevoegd.is-zichtbaar {
opacity: 1;
transform: none;
}
.bb-mand__toegevoegd svg {
flex: 0 0 auto;
padding: 3px;
border-radius: 50%;
background: rgba(255, 255, 255, .18);
width: 26px;
height: 26px;
} .bb-mand__inhoud {
flex: 1;
min-height: 0;
padding: 16px;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.bb-mand__regels {
display: flex;
flex-direction: column;
gap: 12px;
}
.bb-mand__regel {
display: grid;
grid-template-columns: 72px 1fr auto;
gap: 14px;
padding: 14px;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
transition: opacity .22s ease, transform .22s var(--bb-ease), height .22s ease, padding .22s ease, margin .22s ease;
}
.bb-mand__regel.is-nieuw {
animation: bb-nieuw 1.8s var(--bb-ease);
}
@keyframes bb-nieuw {
0% { opacity: 0; transform: translateX(24px); box-shadow: 0 0 0 3px var(--bb-geel); background: #FFF8EA; }
20% { opacity: 1; transform: none; }
70% { box-shadow: 0 0 0 3px var(--bb-geel); background: #FFF8EA; }
100% { box-shadow: 0 2px 10px rgba(0, 0, 0, .05); background: #fff; }
}
.bb-mand__regel.is-weg {
height: 0 !important;
padding-top: 0;
padding-bottom: 0;
margin-bottom: -12px;
opacity: 0;
transform: translateX(40px);
overflow: hidden;
}
.bb-mand__foto {
display: block;
width: 72px;
height: 72px;
border: 1px solid var(--bb-lijn);
border-radius: 10px;
background: #fff;
overflow: hidden;
}
.bb-mand__foto img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.bb-mand__foto-leeg {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--bb-groen);
background: var(--bb-creme);
}
.bb-mand__info {
min-width: 0;
}
.bb-mand a.bb-mand__naam {
display: block;
font-family: var(--bb-kop);
font-size: 15px;
font-weight: 700;
line-height: 1.3;
color: var(--bb-donker);
text-decoration: none;
}
.bb-mand a.bb-mand__naam:hover {
color: var(--bb-groen);
text-decoration: underline;
text-underline-offset: 3px;
}
.bb-mand__variatie,
.bb-mand__stukprijs {
margin-top: 3px !important;
font-size: 13px;
color: var(--bb-grijs);
}
.bb-mand__variatie > span {
display: block;
}
.bb-mand__variatie-naam {
color: var(--bb-tekst);
font-weight: 500;
}
.bb-mand__acties {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.bb-mand__stapper {
display: inline-flex;
align-items: center;
height: 38px;
padding: 0 2px;
border: 1.5px solid var(--bb-lijn);
border-radius: 100px;
background: #fff;
transition: border-color .2s;
}
.bb-mand__stapper:focus-within {
border-color: var(--bb-donker);
}
.bb-mand .bb-mand__stap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--bb-donker);
transition: background-color .15s;
}
.bb-mand .bb-mand__stap:hover {
background: var(--bb-creme);
}
.bb-mand .bb-mand__stap[aria-disabled='true'] {
color: #C9C9C2;
cursor: default;
background: transparent;
}
.bb-mand .bb-mand__aantal-invoer {
width: 34px;
height: 32px;
padding: 0;
border: 0;
background: transparent;
color: var(--bb-donker);
font-family: var(--bb-body);
font-size: 15px;
font-weight: 600;
text-align: center;
-moz-appearance: textfield;
appearance: textfield;
box-shadow: none;
}
.bb-mand .bb-mand__aantal-invoer::-webkit-outer-spin-button,
.bb-mand .bb-mand__aantal-invoer::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.bb-mand__vast-aantal {
font-weight: 600;
color: var(--bb-donker);
}
.bb-mand .bb-mand__verwijder {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--bb-grijs);
transition: background-color .15s, color .15s;
}
.bb-mand .bb-mand__verwijder:hover {
background: #FBEAEA;
color: var(--bb-fout);
}
.bb-mand__voorraad {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px !important;
font-size: 12px;
font-weight: 500;
color: #8A5300;
}
.bb-mand__voorraad::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--bb-geel);
}
.bb-mand__regeltotaal {
text-align: right;
white-space: nowrap;
transition: opacity .2s;
}
.bb-mand__regeltotaal strong {
display: block;
font-size: 15px;
font-weight: 700;
color: var(--bb-donker);
}
.bb-mand__regeltotaal small {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--bb-grijs);
}
.bb-mand__regel.is-bezig .bb-mand__regeltotaal {
opacity: .4;
} .bb-mand__leeg {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 48px 16px 24px;
text-align: center;
}
.bb-mand__leeg-icoon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 104px;
height: 104px;
margin-bottom: 8px;
border-radius: 50%;
background: var(--bb-donker);
color: var(--bb-geel);
}
.bb-mand__leeg-icoon::after {
content: '';
position: absolute;
right: -6px;
bottom: 2px;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--bb-geel);
}
.bb-mand .bb-mand__leeg-titel {
font-family: var(--bb-kop);
font-size: 20px;
font-weight: 900;
color: var(--bb-donker);
}
.bb-mand__leeg-tekst {
max-width: 320px;
color: var(--bb-tekst);
}
.bb-mand__leeg-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 12px;
}
.bb-mand__laden {
display: flex;
justify-content: center;
padding: 64px 0;
}
.bb-mand__spinner {
width: 34px;
height: 34px;
border: 3px solid var(--bb-lijn);
border-top-color: var(--bb-groen);
border-radius: 50%;
animation: bb-draai .8s linear infinite;
}
@keyframes bb-draai {
to { transform: rotate(360deg); }
}
.bb-mand__fout {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
padding: 16px;
border-left: 4px solid var(--bb-fout);
border-radius: 8px;
background: #fff;
color: var(--bb-donker);
} .bb-mand__aanbevolen {
margin-top: 24px;
}
.bb-mand .bb-mand__aanbevolen-titel {
margin-bottom: 12px;
font-size: 18px;
}
.bb-mand__aanbevolen-lijst {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 150px;
gap: 12px;
margin: 0 -16px !important;
padding: 0 16px 8px !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 0 16px;
scrollbar-width: thin;
}
.bb-mand__tip {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
scroll-snap-align: start;
}
.bb-mand__tip-foto {
display: block;
aspect-ratio: 1;
border-radius: 8px;
overflow: hidden;
background: #fff;
}
.bb-mand__tip-foto img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
transition: transform .4s var(--bb-ease);
}
.bb-mand__tip:hover .bb-mand__tip-foto img {
transform: scale(1.05);
}
.bb-mand a.bb-mand__tip-naam {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
min-height: 2.6em;
font-family: var(--bb-kop);
font-size: 13px;
font-weight: 700;
line-height: 1.3;
color: var(--bb-donker);
text-decoration: none;
}
.bb-mand__tip-prijs {
font-size: 14px;
font-weight: 600;
color: var(--bb-donker);
}
.bb-mand .bb-mand__tip-knop {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-top: auto;
padding: 7px 10px;
border: 0;
border-radius: 100px;
background: var(--bb-geel);
color: var(--bb-donker);
font-family: var(--bb-kop);
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: background-color .2s, transform .15s;
}
.bb-mand .bb-mand__tip-knop:hover {
background: var(--bb-geel-licht);
transform: translateY(-1px);
}
.bb-mand .bb-mand__tip-knop.is-bezig {
opacity: .6;
cursor: progress;
}
.bb-mand__tip-knop span {
display: inline-flex;
} .bb-mand__snackbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 20px;
background: var(--bb-donker);
color: #fff;
font-size: 14px;
opacity: 0;
transform: translateY(8px);
transition: opacity .25s ease, transform .25s var(--bb-ease);
}
.bb-mand__snackbar.is-zichtbaar {
opacity: 1;
transform: none;
}
.bb-mand__snackbar button {
flex: 0 0 auto;
padding: 6px 4px;
border: 0;
background: transparent;
color: var(--bb-geel);
font-family: var(--bb-kop);
font-size: 14px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
} .bb-mand__voet {
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px 24px calc(18px + env(safe-area-inset-bottom, 0px));
background: #fff;
box-shadow: 0 -8px 24px rgba(0, 0, 0, .06);
}
.bb-mand__subtotaal {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.bb-mand__subtotaal-label {
font-family: var(--bb-kop);
font-size: 18px;
font-weight: 900;
color: var(--bb-donker);
}
.bb-mand__subtotaal-bedrag {
text-align: right;
}
.bb-mand__subtotaal-bedrag strong {
display: block;
font-family: var(--bb-kop);
font-size: 22px;
font-weight: 900;
line-height: 1.1;
color: var(--bb-donker);
}
.bb-mand__subtotaal-bedrag small {
display: block;
margin-top: 3px;
font-size: 12px;
color: var(--bb-grijs);
}
.bb-mand__notitie {
font-size: 13px;
color: var(--bb-tekst);
}
.bb-mand .bb-mand__knop {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 20px;
border-radius: 100px;
font-family: var(--bb-kop);
font-size: 15px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
transition: background-color .2s, color .2s, transform .15s, box-shadow .2s;
}
.bb-mand .bb-mand__knop--primair {
width: 100%;
padding: 15px 24px;
border: 0;
background: var(--bb-geel);
color: var(--bb-donker);
font-size: 18px;
}
.bb-mand .bb-mand__knop--primair:hover {
background: var(--bb-geel-licht);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(241, 178, 72, .35);
}
.bb-mand .bb-mand__knop--primair svg {
transition: transform .2s var(--bb-ease);
}
.bb-mand .bb-mand__knop--primair:hover svg {
transform: translateX(4px);
}
.bb-mand .bb-mand__knop--secundair {
border: 2px solid var(--bb-donker);
background: transparent;
color: var(--bb-donker);
}
.bb-mand .bb-mand__knop--secundair:hover {
background: var(--bb-donker);
color: #fff;
}
.bb-mand__links {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.bb-mand__links a,
.bb-mand__links button {
padding: 4px 0;
border: 0;
background: transparent;
color: var(--bb-groen);
font-family: var(--bb-body);
font-size: 14px;
font-weight: 500;
text-decoration: underline;
text-underline-offset: 3px;
}
.bb-mand__links a:hover,
.bb-mand__links button:hover {
color: var(--bb-donker);
}
.bb-mand__betalen {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding-top: 10px !important;
border-top: 1px solid var(--bb-lijn);
font-size: 12px;
color: var(--bb-grijs);
text-align: center;
} @media (max-width: 600px) {
.bb-mand__paneel {
width: 100%;
}
.bb-mand__kop {
padding: 16px 16px 16px 20px;
}
.bb-mand .bb-mand__titel {
font-size: 21px;
}
.bb-mand__regel {
grid-template-columns: 64px 1fr auto;
gap: 12px;
padding: 12px;
}
.bb-mand__foto {
width: 64px;
height: 64px;
}
.bb-mand__voet {
padding-left: 16px;
padding-right: 16px;
}
} .bb-teller-hup {
display: inline-block;
animation: bb-hup .55s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes bb-hup {
0% { transform: scale(1); }
40% { transform: scale(1.3); color: #39892F; }
100% { transform: scale(1); }
}
.single_add_to_cart_button.bb-knop-bezig {
opacity: .75;
cursor: progress;
}
.single_add_to_cart_button.bb-knop-klaar {
background-color: #39892F !important;
border-color: #39892F !important;
color: #fff !important;
}
.bb-mand-formfout {
margin: 12px 0 0;
padding: 12px 16px;
border-left: 4px solid #A4262C;
border-radius: 6px;
background: #fff;
color: #1D3C34;
font-size: 15px;
}
@media (prefers-reduced-motion: reduce) {
.bb-mand__paneel,
.bb-mand__achtergrond,
.bb-mand__regel,
.bb-mand__toegevoegd,
.bb-mand__snackbar,
.bb-mand .bb-mand__sluit,
.bb-mand .bb-mand__knop,
.bb-mand__tip-foto img {
transition: none !important;
}
.bb-mand__regel.is-nieuw,
.bb-teller-hup,
.bb-mand.is-bezig .bb-mand__kop::after {
animation: none !important;
}
}