body.sbz-cadeau-product .sb-product-buy .summary .sb-buy-label { display: none !important; }
.sbz-cpb {
--cpb-oranje: #f45b16;
--cpb-donker: #be3d0c;
--cpb-groen: #15803d;
position: relative;
margin: 0 0 20px;
padding: 16px 18px 14px;
border: 2px solid #ffc9ad;
border-radius: 18px;
background: radial-gradient(120% 90% at 0% 0%, #ffe9dc 0%, #fff6f0 45%, #fff 100%);
box-shadow: 0 10px 26px rgba(244, 91, 22, .12);
color: #1d1410;
transition: border-color .3s, box-shadow .3s, background .3s;
}
.sbz-cpb.is-binnen {
border-color: #8fd5a8;
background: radial-gradient(120% 90% at 0% 0%, #def6e6 0%, #f3fbf6 45%, #fff 100%);
box-shadow: 0 10px 26px rgba(21, 128, 61, .12);
}
.sbz-cpb__kop { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px; align-items: center; } .sbz-cpb__busje { position: relative; display: block; width: 74px; height: 50px; }
.sbz-cpb__busje img {
position: absolute; right: 0; bottom: 2px; width: 64px; height: auto;
transform-origin: 60% 100%;
animation: sbz-cpb-tril 3.4s ease-in-out infinite;
}
.sbz-cpb__strepen,
.sbz-cpb__strepen::before,
.sbz-cpb__strepen::after {
position: absolute; left: 0; height: 3px; border-radius: 3px; background: var(--cpb-oranje); opacity: 0;
animation: sbz-cpb-streep 3.4s ease-in-out infinite;
}
.sbz-cpb__strepen { top: 22px; width: 14px; }
.sbz-cpb__strepen::before { content: ""; top: -8px; width: 9px; animation-delay: .05s; }
.sbz-cpb__strepen::after { content: ""; top: 8px; width: 11px; animation-delay: .1s; }
@keyframes sbz-cpb-tril {
0%, 70%, 100% { transform: translate(0, 0) rotate(0); }
73% { transform: translate(-1px, -1px) rotate(-3deg); }
76% { transform: translate(1px, 0) rotate(2.5deg); }
79% { transform: translate(-1px, -1px) rotate(-2.5deg); }
82% { transform: translate(1px, 0) rotate(2deg); }
85% { transform: translate(0, -1px) rotate(-1deg); }
88% { transform: translate(0, 0) rotate(0); }
}
@keyframes sbz-cpb-streep {
0%, 70%, 92%, 100% { opacity: 0; transform: translateX(6px); }
76%, 86% { opacity: .55; transform: translateX(-2px); }
}
.sbz-cpb__tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sbz-cpb__eyebrow { margin-bottom: 3px; color: var(--cpb-donker); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sbz-cpb.is-binnen .sbz-cpb__eyebrow { color: var(--cpb-groen); }
.sbz-cpb__titel { font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.sbz-cpb__uitleg { margin-top: 4px; color: #5d4d45; font-size: 13.5px; line-height: 1.45; }
.sbz-cpb__balk { position: relative; height: 9px; margin: 12px 0 0; border-radius: 999px; background: #ffe0cf; overflow: hidden; }
.sbz-cpb__balk[hidden] { display: none; }
.sbz-cpb__vulling {
position: absolute; inset: 0 auto 0 0; border-radius: inherit;
background: var(--cpb-oranje) repeating-linear-gradient(90deg, transparent 0 10px, rgba(255, 255, 255, .28) 10px 16px);
transition: width .5s ease;
}
.sbz-cpb__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sbz-cpb__acties:has(> :not([hidden])) { margin-top: 12px; }
.sbz-cpb__meer {
display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 8px 16px;
border: 0; border-radius: 999px; background: var(--cpb-oranje); color: #fff;
font: inherit; font-size: 13.5px; font-weight: 800; line-height: 1.2; cursor: pointer;
box-shadow: 0 6px 14px rgba(244, 91, 22, .25); transition: transform .15s, box-shadow .15s;
}
.sbz-cpb__meer::before { content: "+"; font-size: 17px; line-height: 1; }
.sbz-cpb__meer:hover, .sbz-cpb__meer:focus-visible { transform: translateY(-1px); box-shadow: 0 9px 18px rgba(244, 91, 22, .32); }
.sbz-cpb__meer[hidden], .sbz-cpb__volgend[hidden] { display: none; }
.sbz-cpb__volgend { color: #5d4d45; font-size: 13px; line-height: 1.4; }
.sbz-cpb__cadeaus {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
margin-top: 14px; padding-top: 12px; border-top: 1px dashed #ffc9ad;
color: inherit; text-decoration: none !important;
}
.sbz-cpb.is-binnen .sbz-cpb__cadeaus { border-top-color: #b5e3c5; }
.sbz-cpb__fotos { display: flex; align-items: center; padding-left: 6px; }
.sbz-cpb__foto {
position: relative; display: grid; place-items: center; width: 46px; height: 46px; margin-left: -6px;
border: 2px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
transition: transform .2s;
}
.sbz-cpb__foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; filter: grayscale(1); opacity: .5; transition: filter .3s, opacity .3s; }
.sbz-cpb__foto.is-open img { filter: none; opacity: 1; }
.sbz-cpb__slot {
position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
padding: 0 5px; border-radius: 999px; background: #6f7278; color: #fff;
font-size: 9.5px; font-weight: 800; line-height: 15px; white-space: nowrap;
}
.sbz-cpb__foto.is-open .sbz-cpb__slot { display: none; }
.sbz-cpb__foto--meer { color: var(--cpb-donker); font-size: 13px; font-weight: 800; }
.sbz-cpb__cadeaus:hover .sbz-cpb__foto { transform: translateY(-2px); }
.sbz-cpb__link { color: var(--cpb-donker); font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.sbz-cpb__cadeaus:hover .sbz-cpb__link { text-decoration: underline; } .sbz-cpb.is-feest .sbz-cpb__busje img { animation: sbz-cpb-hop .9s ease-out 1, sbz-cpb-tril 3.4s ease-in-out .9s infinite; }
.sbz-cpb.is-feest .sbz-cpb__foto.is-open { animation: sbz-cpb-pop .5s ease-out both; }
.sbz-cpb.is-feest .sbz-cpb__foto.is-open:nth-child(2) { animation-delay: .08s; }
.sbz-cpb.is-feest .sbz-cpb__foto.is-open:nth-child(3) { animation-delay: .16s; }
.sbz-cpb.is-feest .sbz-cpb__foto.is-open:nth-child(4) { animation-delay: .24s; }
.sbz-cpb.is-feest .sbz-cpb__foto.is-open:nth-child(5) { animation-delay: .32s; }
@keyframes sbz-cpb-hop {
0% { transform: translate(0, 0) rotate(0); }
25% { transform: translate(4px, -12px) rotate(-6deg); }
50% { transform: translate(6px, 0) rotate(0); }
70% { transform: translate(6px, -5px) rotate(-3deg); }
100% { transform: translate(0, 0) rotate(0); }
}
@keyframes sbz-cpb-pop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } } .single-product form.cart .single_add_to_cart_button.sbz-cpb-wenk { animation: sbz-cpb-wenk 1.2s ease-out 1; }
@keyframes sbz-cpb-wenk {
0% { box-shadow: 0 0 0 0 rgba(244, 91, 22, .55); }
100% { box-shadow: 0 0 0 16px rgba(244, 91, 22, 0); }
}
@media (max-width: 560px) {
.sbz-cpb { padding: 14px 14px 12px; border-radius: 16px; }
.sbz-cpb__kop { grid-template-columns: 60px minmax(0, 1fr); gap: 10px; }
.sbz-cpb__busje { width: 60px; height: 42px; }
.sbz-cpb__busje img { width: 54px; }
.sbz-cpb__titel { font-size: 17px; }
.sbz-cpb__foto { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.sbz-cpb__busje img, .sbz-cpb__strepen, .sbz-cpb__strepen::before, .sbz-cpb__strepen::after,
.sbz-cpb.is-feest .sbz-cpb__busje img, .sbz-cpb.is-feest .sbz-cpb__foto.is-open,
.single-product form.cart .single_add_to_cart_button.sbz-cpb-wenk { animation: none; }
.sbz-cpb__vulling { transition: none; }
}