body.sb-halloween-background #main {
background-color: #fff;
background-image: url(//www.speelgoedbezorgd.nl/wp-content/themes/speelgoedbezorgd-theme/assets/images/halloween-moon-logo-small-2026.webp);
background-position: center top;
background-size: min(100%, 1920px) auto;
background-repeat: no-repeat;
padding-top: clamp(110px, 22vw, 422px) !important;
} body.sb-halloween-background .sb-halloween-strip { display: none; }
body.sb-halloween-background #main > .container {
background: rgba(255, 255, 255, .97);
border-radius: 20px;
padding: 24px;
}
body.sb-halloween-background .sb-home-quicknav {
background: transparent;
}
body.sb-halloween-background .sb-showcase {
background: transparent;
}
body.sb-halloween-background .sb-checkout-steps {
background: #fff;
border-radius: 14px;
}
@media (max-width: 767px) {
body.sb-halloween-background #main {
padding-top: clamp(100px, 22vw, 169px) !important;
}
body.sb-halloween-background #main > .container {
padding: 14px;
border-radius: 16px;
}
}
@media print {
body.sb-halloween-background #main { background-image: none; padding-top: 0 !important; }
} body.sb-halloween-background .site-header {
background: rgba(252, 247, 255, .86) !important;
border-bottom-color: rgba(119, 73, 145, .2);
box-shadow: 0 8px 28px rgba(44, 20, 65, .12);
}
body.sb-halloween-background .header-main { background: transparent; }
body.sb-halloween-background .sb-nav-row {
background: linear-gradient(110deg, rgba(44, 22, 65, .9), rgba(82, 40, 102, .84)) !important;
border-top-color: rgba(255, 255, 255, .18) !important;
border-bottom-color: rgba(255, 173, 103, .45) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 8px 22px rgba(44, 20, 65, .16);
}
body.sb-halloween-background .sb-nav-categories {
background: linear-gradient(135deg, #ed681e, #bd4210);
box-shadow: 0 0 18px rgba(255, 145, 60, .22);
}
body.sb-halloween-background .sb-nav-categories > svg {
stroke: transparent;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' d='M6 28V14a10 10 0 0 1 20 0v14l-5-3-5 3-5-3Z'/%3E%3Cellipse cx='12' cy='14' rx='2' ry='3' fill='%233e2056'/%3E%3Cellipse cx='20' cy='14' rx='2' ry='3' fill='%233e2056'/%3E%3Cellipse cx='16' cy='21' rx='2' ry='2.5' fill='%233e2056'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.sb-halloween-background .sb-nav-categories > svg path { stroke: transparent; }
body.sb-halloween-background .sb-nav-sale { color: #fff2e6; }
body.sb-halloween-background .sb-nav-row .primary-nav > ul > li > a { color: #fff7ef; }
body.sb-halloween-background .sb-nav-row .primary-nav > ul > li > a:hover,
body.sb-halloween-background .sb-nav-row .primary-nav > ul > .current-menu-item > a {
color: #fff;
background: rgba(255, 174, 103, .18);
}
body.sb-halloween-background .sb-nav-row :is(a, button):focus-visible {
outline: 3px solid #ffd49b;
outline-offset: 3px;
}
body.sb-halloween-background .sb-nav-row .primary-nav .sub-menu,
body.sb-halloween-background .sb-mega-menu {
background: rgba(255, 250, 255, .96);
border-color: #ded0e8;
box-shadow: 0 24px 60px rgba(44, 20, 65, .2);
}
body.sb-halloween-background .sb-mega-menu__top {
background: linear-gradient(110deg, #f0e4f7, #fff0e3);
border-bottom-color: #ded0e8;
}
body.sb-halloween-background .sb-mega-menu__parents { background: rgba(242, 232, 248, .9); }
body.sb-halloween-background .sb-mega-menu__panels { background: rgba(255, 255, 255, .9); }
@media (max-width: 960px) {
body.sb-halloween-background .sb-nav-row .primary-nav { background: rgba(255, 250, 255, .98); }
body.sb-halloween-background .sb-nav-row .primary-nav > ul > li > a { color: #39234b; }
body.sb-halloween-background .sb-nav-row .primary-nav > ul > li > a:hover,
body.sb-halloween-background .sb-nav-row .primary-nav > ul > .current-menu-item > a {
color: #823711;
background: #fff0e3;
}
}
@media (prefers-reduced-transparency: reduce) {
body.sb-halloween-background .site-header { background: #fcf7ff !important; }
body.sb-halloween-background .sb-nav-row { background: #3e2056 !important; }
body.sb-halloween-background .sb-mega-menu { background: #fffaff; }
} body.sb-halloween-background .sb-home-quicknav {
padding: 10px 0;
background: transparent;
}
body.sb-halloween-background .sb-home-quicknav .wide {
display: grid;
grid-template-columns: 1.12fr repeat(4, minmax(0, 1fr));
gap: 8px;
padding: 10px;
border: 1px solid rgba(255, 255, 255, .72);
border-radius: 20px;
background: rgba(255, 250, 255, .45);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 6px 20px rgba(48, 25, 63, .08);
overflow: visible;
}
body.sb-halloween-background .sb-home-quicknav a {
min-width: 0;
min-height: 48px;
padding: 10px 14px;
border: 1px solid rgba(255, 255, 255, .55);
border-radius: 12px;
background: rgba(255, 255, 255, .48);
color: #30243b;
text-align: center;
line-height: 1.3;
white-space: normal;
box-shadow: none;
}
body.sb-halloween-background .sb-home-quicknav .sb-home-quicknav__all {
background: rgba(172, 58, 14, .94);
border-color: rgba(255, 202, 164, .65);
color: #fff;
box-shadow: 0 3px 10px rgba(121, 42, 16, .12);
}
body.sb-halloween-background .sb-home-quicknav a:hover {
background: rgba(255, 247, 237, .9);
color: #763015;
transform: translateY(-1px);
}
body.sb-halloween-background .sb-home-quicknav .sb-home-quicknav__all:hover {
background: #96300b;
color: #fff;
}
body.sb-halloween-background .sb-home-quicknav a:focus-visible {
outline: 3px solid #633b7b;
outline-offset: 2px;
}
@media (max-width: 960px) {
body.sb-halloween-background .sb-home-quicknav .wide {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.sb-halloween-background .sb-home-quicknav .sb-home-quicknav__all {
grid-column: 1 / -1;
}
}
@media (max-width: 600px) {
body.sb-halloween-background .sb-home-quicknav .wide {
gap: 6px;
padding: 8px;
border-radius: 16px;
}
body.sb-halloween-background .sb-home-quicknav a { padding: 9px 10px; }
}
@media (prefers-reduced-transparency: reduce) {
body.sb-halloween-background .sb-home-quicknav .wide { background: #f7effa; }
body.sb-halloween-background .sb-home-quicknav a:not(.sb-home-quicknav__all) { background: #fff; }
} .sb-halloween-offers { display: none; }
body.sb-halloween-background #main { position: relative; }
body.sb-halloween-background #main > .container {
background: linear-gradient(to bottom, rgba(255,255,255,.64), rgba(255,255,255,.97) 110px);
}
body.sb-halloween-background .sb-product-breadcrumbs { background: transparent !important; }
@media (min-width: 1200px) {
body.sb-halloween-background #main > .sb-halloween-offers {
display: flex; justify-content: space-between; align-items: flex-start;
position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
width: min(1040px, calc(100% - 220px)); pointer-events: none;
}
.sb-haunted-frame {
pointer-events: auto; position: relative; display: flex; flex-direction: column;
width: clamp(180px, 14vw, 216px); padding: 10px; gap: 5px;
border: 7px ridge #775436; outline: 1px solid #231428; border-radius: 12px;
background: #fff8ec; color: #301a35;
box-shadow: 0 12px 24px #140d2866, inset 0 0 0 2px #dfb675;
transform: rotate(-3deg); text-align: center;
}
.sb-haunted-frame:nth-child(2) { transform: rotate(3deg); }
.sb-haunted-frame::before {
content: ''; position: absolute; top: -16px; left: calc(50% - 8px);
width: 16px; height: 16px; border: 2px solid #c99d68; border-radius: 50%;
background: #332038; pointer-events: none;
}
.sb-haunted-frame::after {
content: ''; position: absolute; right: -3px; top: -3px; width: 43px; height: 43px;
pointer-events: none; opacity: .8;
background: repeating-radial-gradient(circle at top right, transparent 0 9px, #fff 10px 11px, transparent 12px 16px);
clip-path: polygon(0 0,100% 0,100% 100%);
}
.sb-haunted-frame__badge { font-size: 10px; font-weight: 700; color: #7d3015; }
.sb-haunted-frame__photo { background: #fff; border-radius: 6px; padding: 5px; }
.sb-haunted-frame__photo img { display: block; width: 100%; height: clamp(72px, 7vw, 106px); object-fit: contain; margin: 0; }
.sb-haunted-frame__name { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sb-haunted-frame__price { font-size: 15px; line-height: 1.25; font-weight: 700; }
.sb-haunted-frame__price del { font-size: 11px; color: #70606b; }
.sb-haunted-frame__price ins { text-decoration: none; color: #a53610; }
.sb-haunted-frame__price .woocommerce-price-suffix { font-size: 9px; font-weight: 400; }
.sb-haunted-frame__cta { font-size: 10px; font-weight: 600; }
.sb-haunted-frame:hover { outline: 2px solid #ffc876; }
.sb-haunted-frame:focus-visible { outline: 3px solid #ffc876; outline-offset: 5px; }
}
@media (prefers-reduced-transparency: reduce) {
body.sb-halloween-background #main > .container { background: #fff; }
}
@media print { .sb-halloween-offers { display: none !important; } }
@media (min-width: 1200px) {
body.sb-halloween-background #main.sb-halloween-has-offers {
padding-top: clamp(310px, 22vw, 422px) !important;
}
}