/* BF26 Black Week-laag voor akustikpaneeleoutlet.de. Alles onder html.bf26: klasse weg = oude site. */ html:not(.bf26) .bf26-bar, html:not(.bf26) .bf26-hero, html:not(.bf26) .bf26-deals, html:not(.bf26) .bf26-catbanner, html:not(.bf26) .bf26-kaart, html:not(.bf26) .bf26-badge, html:not(.bf26) .bf26-pblok, html:not(.bf26) .bf26-fassaderegel, html:not(.bf26) .bf26-wbanner, html:not(.bf26) .bf26-sticky, html:not(.bf26) .bf26-exit { display: none !important; } html.bf26 { --bf26-zwart: #0a0a0b; --bf26-zwart-2: #121214; --bf26-zwart-3: #1b1b1f; --bf26-geel: #ffe500; --bf26-geel-zacht: rgba(255, 229, 0, .14); --bf26-geel-gloed: rgba(255, 229, 0, .45); --bf26-wit: #fff; --bf26-wit-70: rgba(255, 255, 255, .72); --bf26-wit-50: rgba(255, 255, 255, .5); --bf26-lijn: rgba(255, 255, 255, .12); --bf26-rood: #ff2d2d; --bf26-bar-h: 44px; --bf26-display: "BF26 Archivo", "Archivo", "Inter", "Helvetica Neue", Arial, sans-serif; --bf26-onder: 0px; } @property --bf26-hoek { syntax: ""; inherits: false; initial-value: 0deg; } /* ---------------------------------------------------------------- bestaande sale-elementen verbergen */ /* SALE10-actiebalk met weekklok (Code Snippet 19). */ html.bf26 a.lc-countdown { display: none !important; } /* SALE10-kaart onder de bestelknop (zz-leno-look) en "Du sparst" bij de prijs: alleen op BF26-producten. */ html.bf26 body.bf26-actie .lla-sale { display: none !important; } html.bf26 body.bf26-actie .product-price-container .lla-bespaar { display: none !important; } /* Leno-look-hero op home: vervangen door de Black Week-hero. */ /* Productkaart met BF26: oude prijs en '-€ X'-badge maken plaats voor de BF26-prijs en -X %-badge. */ html.bf26 .price-wrapper:has(.bf26-kaart) > .price { display: none !important; } html.bf26 .col-inner:has(.bf26-kaart) .lla-badge { display: none !important; } html.bf26 .is-bf26-kaart .lla-badge { display: none !important; } html.bf26 .is-bf26-kaart .price-wrapper > .price { display: none !important; } /* ---------------------------------------------------------------- basis */ html.bf26 .bf26-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } html.bf26:not(.bf26-lk) .bf26-alleen-lk { display: none !important; } html.bf26.bf26-lk .bf26-alleen-normaal { display: none !important; } html.bf26 .bf26-puls { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bf26-geel); box-shadow: 0 0 0 0 var(--bf26-geel-gloed); animation: bf26-puls 1.8s ease-out infinite; flex: none; } html.bf26 .bf26-puls--rood { background: var(--bf26-rood); box-shadow: 0 0 0 0 rgba(255, 45, 45, .5); animation-name: bf26-puls-rood; } @keyframes bf26-puls { 0% { box-shadow: 0 0 0 0 rgba(255, 229, 0, .6); } 70% { box-shadow: 0 0 0 10px rgba(255, 229, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 229, 0, 0); } } @keyframes bf26-puls-rood { 0% { box-shadow: 0 0 0 0 rgba(255, 45, 45, .6); } 70% { box-shadow: 0 0 0 10px rgba(255, 45, 45, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 45, 45, 0); } } html.bf26 .bf26-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 2px; padding: 3px 10px; min-height: 0; border: 1.5px dashed var(--bf26-geel); border-radius: 8px; background: var(--bf26-geel-zacht); color: var(--bf26-geel); font: 800 1em/1.2 var(--bf26-display); letter-spacing: .06em; text-transform: none; cursor: pointer; vertical-align: baseline; transition: background .2s, transform .2s; } html.bf26 .bf26-chip:hover { background: rgba(255, 229, 0, .25); transform: translateY(-1px); } html.bf26 .bf26-chip--klein { padding: 1px 7px; font-size: 12px; cursor: default; } html.bf26 .bf26-chip.is-gekopieerd, html.bf26 [data-bf26-kopieer].is-gekopieerd { border-style: solid; } html.bf26 .bf26-knop { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; margin: 0; padding: 0 26px; border: 0; border-radius: 999px; font: 700 16px/1 "Inter", sans-serif; letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; white-space: nowrap; transition: box-shadow .25s ease, background .25s ease, color .25s ease, transform .25s ease; } html.bf26 .bf26-knop--primair { background: var(--bf26-geel); color: #0a0a0b !important; box-shadow: 0 0 0 0 var(--bf26-geel-gloed), 0 10px 30px -10px var(--bf26-geel-gloed); } html.bf26 .bf26-knop--primair::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .65), transparent 60%); opacity: 0; transition: opacity .25s; pointer-events: none; } html.bf26 .bf26-knop--primair:hover { box-shadow: 0 0 0 6px rgba(255, 229, 0, .18), 0 16px 50px -8px var(--bf26-geel-gloed); color: #0a0a0b !important; } html.bf26 .bf26-knop--primair:hover::after { opacity: 1; } html.bf26 .bf26-knop--rand { background: transparent; color: var(--bf26-wit) !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); } html.bf26 .bf26-knop--rand:hover { box-shadow: inset 0 0 0 1.5px var(--bf26-geel); color: var(--bf26-geel) !important; } html.bf26 .bf26-knop--vol { width: 100%; } html.bf26 .bf26-knop > span { position: relative; z-index: 1; } html.bf26 .bf26-link { color: var(--bf26-geel) !important; font-weight: 700; text-decoration: none; } html.bf26 .bf26-link:hover { text-decoration: underline; } /* ---------------------------------------------------------------- klok */ html.bf26 .bf26-klok { display: inline-flex; align-items: flex-start; gap: 4px; font-variant-numeric: tabular-nums; color: var(--bf26-wit); } html.bf26 .bf26-klok__deel { display: inline-flex; flex-direction: column; align-items: center; } html.bf26 .bf26-klok__getal { display: inline-flex; font: 800 16px/1 var(--bf26-display); font-stretch: 100%; } html.bf26 .bf26-klok__cijfer { position: relative; display: inline-block; width: .64em; height: 1em; overflow: hidden; text-align: center; } html.bf26 .bf26-klok__cijfer > span { position: absolute; left: 0; right: 0; top: 0; } html.bf26 .bf26-klok__cijfer > .is-in { animation: bf26-cijfer-in .45s cubic-bezier(.2, .9, .25, 1.15) both; } html.bf26 .bf26-klok__cijfer > .is-uit { animation: bf26-cijfer-uit .45s cubic-bezier(.55, 0, .7, .3) both; } @keyframes bf26-cijfer-in { from { transform: translateY(-105%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes bf26-cijfer-uit { from { transform: translateY(0); opacity: 1; } to { transform: translateY(105%); opacity: 0; } } html.bf26 .bf26-klok__eenheid { margin-top: 3px; font: 600 9px/1 "Inter", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--bf26-wit-50); } html.bf26 .bf26-klok__sep { font: 800 16px/1 var(--bf26-display); color: var(--bf26-geel); opacity: .8; animation: bf26-knipper 1s steps(1) infinite; } @keyframes bf26-knipper { 50% { opacity: .25; } } html.bf26 .bf26-klok--mini { gap: 3px; } html.bf26 .bf26-klok--mini .bf26-klok__getal { font-size: 15px; } html.bf26 .bf26-klok--mini .bf26-klok__sep { font-size: 14px; } html.bf26 .bf26-klok--mini .bf26-klok__eenheid { font-size: 8px; margin-top: 2px; } html.bf26 .bf26-klok--mid { gap: 6px; } html.bf26 .bf26-klok--mid .bf26-klok__deel { min-width: 52px; padding: 8px 6px 6px; border-radius: 10px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--bf26-lijn); } html.bf26 .bf26-klok--mid .bf26-klok__getal { font-size: 24px; } html.bf26 .bf26-klok--mid .bf26-klok__sep { font-size: 22px; padding-top: 8px; } html.bf26 .bf26-klok--groot { gap: 10px; } html.bf26 .bf26-klok--groot .bf26-klok__deel { min-width: 84px; padding: 14px 10px 10px; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 20px 40px -24px rgba(0, 0, 0, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } html.bf26 .bf26-klok--groot .bf26-klok__getal { font-size: 46px; font-stretch: 112%; } html.bf26 .bf26-klok--groot .bf26-klok__eenheid { margin-top: 8px; font-size: 11px; } html.bf26 .bf26-klok--groot .bf26-klok__sep { font-size: 40px; padding-top: 16px; } /* ---------------------------------------------------------------- topbalk */ html.bf26 .bf26-bar { position: sticky; top: 0; z-index: 1002; display: flex; align-items: center; gap: 16px; height: var(--bf26-bar-h); padding: 0 16px; overflow: hidden; background: var(--bf26-zwart); color: var(--bf26-wit); font: 500 13px/1 "Inter", sans-serif; border-bottom: 1px solid rgba(255, 229, 0, .25); box-shadow: 0 1px 0 rgba(0, 0, 0, .4); } html.bf26 .bf26-bar::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 80px at 12% 0%, rgba(255, 229, 0, .16), transparent 70%), radial-gradient(500px 80px at 88% 100%, rgba(255, 229, 0, .1), transparent 70%); pointer-events: none; } html.bf26 .bf26-bar a, html.bf26 .bf26-bar button { position: relative; } html.bf26 .bf26-bar__merk { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--bf26-geel) !important; font: 900 15px/1 var(--bf26-display); font-stretch: 125%; letter-spacing: .02em; text-decoration: none; } html.bf26 .bf26-bar__stip { width: 8px; height: 8px; border-radius: 50%; background: var(--bf26-geel); animation: bf26-puls 1.8s ease-out infinite; } html.bf26 .bf26-bar__ticker { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } html.bf26 .bf26-bar__spoor { display: flex; width: max-content; animation: bf26-ticker 42s linear infinite; } html.bf26 .bf26-bar:hover .bf26-bar__spoor { animation-play-state: paused; } html.bf26 .bf26-bar__reeks { display: flex; align-items: center; flex: none; } html.bf26 .bf26-bar__item { padding: 0 18px; white-space: nowrap; color: var(--bf26-wit-70); } html.bf26 .bf26-bar__item b { color: var(--bf26-geel); font-weight: 700; } html.bf26 .bf26-bar__item s { color: var(--bf26-wit-50); } html.bf26 .bf26-bar__ster { color: var(--bf26-geel); font-size: 10px; opacity: .8; } @keyframes bf26-ticker { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } html.bf26 .bf26-bar__rechts { display: flex; align-items: center; gap: 12px; flex: none; } html.bf26 .bf26-bar__label { color: var(--bf26-wit-50); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } html.bf26 .bf26-bar__code { display: inline-flex; align-items: center; gap: 6px; height: 28px; min-height: 0; margin: 0; padding: 0 12px; border: 1.5px dashed var(--bf26-geel); border-radius: 999px; background: var(--bf26-geel-zacht); color: var(--bf26-wit); font: 600 12px/1 "Inter", sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; } html.bf26 .bf26-bar__code b { color: var(--bf26-geel); font: 800 13px/1 var(--bf26-display); letter-spacing: .06em; } html.bf26 .bf26-bar__code:hover { background: var(--bf26-geel); color: #0a0a0b; } html.bf26 .bf26-bar__code:hover b { color: #0a0a0b; } html.bf26 .bf26-bar__lk { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; font: 800 14px/1 var(--bf26-display); font-stretch: 110%; letter-spacing: .03em; text-align: center; } html.bf26 .bf26-bar__lk-spoor > span + span { display: none; } /* Laatste kans: rood pulserend. */ html.bf26.bf26-lk .bf26-bar { background: #b80000; border-bottom-color: rgba(255, 255, 255, .25); animation: bf26-lk-balk 2.4s ease-in-out infinite; } html.bf26.bf26-lk .bf26-bar::before { background: radial-gradient(500px 80px at 50% 0%, rgba(255, 120, 120, .45), transparent 70%); } html.bf26.bf26-lk .bf26-bar__merk { color: #fff !important; } html.bf26.bf26-lk .bf26-bar__stip { background: #fff; } html.bf26.bf26-lk .bf26-bar__label { color: rgba(255, 255, 255, .75); } html.bf26.bf26-lk .bf26-bar .bf26-klok__sep { color: #fff; } html.bf26.bf26-lk .bf26-bar .bf26-klok__eenheid { color: rgba(255, 255, 255, .7); } html.bf26.bf26-lk .bf26-bar__code { border-color: #fff; background: rgba(255, 255, 255, .14); } html.bf26.bf26-lk .bf26-bar__code b { color: #fff; } @keyframes bf26-lk-balk { 0%, 100% { background-color: #b80000; } 50% { background-color: #e10600; } } /* Flatsome-kop schuift onder de balk als hij 'stuck' is. */ html.bf26 #header .header-wrapper.stuck { top: var(--bf26-bar-h) !important; } @media (min-width: 850px) { html.bf26 body.leno-look .custom-product-page .col:has(> .col-inner > .product-images) > .col-inner { top: calc(92px + var(--bf26-bar-h)); } } /* ---------------------------------------------------------------- homepage-hero */ html.bf26 .bf26-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--bf26-zwart); color: var(--bf26-wit); padding: 72px 0 0; } html.bf26 .bf26-hero__glow { position: absolute; inset: -20% -10%; z-index: -3; pointer-events: none; } html.bf26 .bf26-hero__glow span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; mix-blend-mode: screen; } html.bf26 .bf26-hero__glow span:nth-child(1) { width: 46vw; height: 46vw; left: 48%; top: 6%; background: radial-gradient(circle, rgba(255, 229, 0, .75), rgba(255, 229, 0, 0) 65%); animation: bf26-zweef-a 14s ease-in-out infinite alternate; } html.bf26 .bf26-hero__glow span:nth-child(2) { width: 34vw; height: 34vw; left: -6%; top: 40%; background: radial-gradient(circle, rgba(255, 170, 0, .5), rgba(255, 170, 0, 0) 65%); animation: bf26-zweef-b 18s ease-in-out infinite alternate; } html.bf26 .bf26-hero__glow span:nth-child(3) { width: 26vw; height: 26vw; left: 30%; top: 60%; background: radial-gradient(circle, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 65%); animation: bf26-zweef-a 22s ease-in-out infinite alternate-reverse; } @keyframes bf26-zweef-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-8vw, 6vh, 0) scale(1.15); } } @keyframes bf26-zweef-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(10vw, -8vh, 0) scale(.9); } } html.bf26 .bf26-hero__raster { position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 60% 40%, #000 0%, transparent 70%); } html.bf26 .bf26-hero__ruis { position: absolute; inset: 0; z-index: -1; opacity: .09; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } html.bf26 .bf26-hero__binnen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 48px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 0 32px 72px; } html.bf26 .bf26-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--bf26-lijn); color: var(--bf26-wit); font: 600 13px/1 "Inter", sans-serif; letter-spacing: .06em; text-transform: uppercase; } html.bf26 .bf26-hero__kop { display: flex; flex-direction: column; margin: 0 0 22px; color: var(--bf26-wit); font: 900 clamp(64px, 11.5vw, 184px)/.84 var(--bf26-display); font-stretch: 125%; letter-spacing: -.035em; text-transform: uppercase; } html.bf26 .bf26-hero__regel { display: block; } html.bf26 .bf26-hero__regel--rand { color: var(--bf26-geel); text-shadow: 0 0 60px rgba(255, 229, 0, .35); } html.bf26 .bf26-hero__deal { margin: 0 0 6px; color: var(--bf26-wit); font: 700 clamp(22px, 2.6vw, 34px)/1.15 "Inter", sans-serif; letter-spacing: -.01em; } html.bf26 .bf26-hero__deal strong { color: var(--bf26-geel); font: 900 1.25em/1 var(--bf26-display); font-stretch: 112%; white-space: nowrap; } html.bf26 .bf26-hero__vanaf { margin: 0 0 28px; color: var(--bf26-wit-70); font: 500 18px/1.4 "Inter", sans-serif; } html.bf26 .bf26-hero__vanaf b { color: var(--bf26-wit); font-weight: 800; } html.bf26 .bf26-hero__klok { display: flex; flex-direction: column; gap: 10px; margin: 0 0 30px; } html.bf26 .bf26-hero__klok-label { color: var(--bf26-wit-50); font: 600 12px/1 "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; } html.bf26 .bf26-hero__knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; } html.bf26 .bf26-hero__knoppen .bf26-knop { min-height: 58px; padding: 0 30px; font-size: 17px; } html.bf26 .bf26-hero__code { margin: 0; color: var(--bf26-wit-70); font: 500 15px/1.6 "Inter", sans-serif; } html.bf26 .bf26-held { position: relative; display: block; padding: 2px; border-radius: 26px; color: var(--bf26-wit) !important; text-decoration: none; transform-style: preserve-3d; will-change: transform; } html.bf26 .bf26-held__rand { position: absolute; inset: 0; border-radius: inherit; background: conic-gradient(from var(--bf26-hoek), rgba(255, 229, 0, .05), var(--bf26-geel) 18%, rgba(255, 229, 0, .05) 36%, rgba(255, 255, 255, .5) 52%, rgba(255, 229, 0, .05) 70%, var(--bf26-geel) 88%, rgba(255, 229, 0, .05)); animation: bf26-draai 6s linear infinite; } html.bf26 .bf26-held::after { content: ""; position: absolute; inset: 10%; z-index: -1; border-radius: 50%; background: rgba(255, 229, 0, .35); filter: blur(70px); } @keyframes bf26-draai { to { --bf26-hoek: 360deg; } } html.bf26 .bf26-held__binnen { position: relative; display: block; overflow: hidden; border-radius: 24px; background: linear-gradient(160deg, rgba(30, 30, 34, .92), rgba(10, 10, 11, .96)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } html.bf26 .bf26-held__foto { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; transition: transform .6s ease; } html.bf26 .bf26-held:hover .bf26-held__foto { transform: scale(1.04); } html.bf26 .bf26-held__badge { position: absolute; top: 18px; right: 18px; z-index: 2; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--bf26-geel); color: #0a0a0b; font: 900 26px/1 var(--bf26-display); font-stretch: 110%; letter-spacing: -.02em; transform: rotate(-12deg); box-shadow: 0 12px 40px -8px rgba(255, 229, 0, .6); animation: bf26-wiebel 4s ease-in-out infinite; } @keyframes bf26-wiebel { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(-6deg) scale(1.06); } } html.bf26 .bf26-held__info { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px 24px; } html.bf26 .bf26-held__eyebrow { color: var(--bf26-geel); font: 700 12px/1 "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; } html.bf26 .bf26-held__naam { font: 900 30px/1.05 var(--bf26-display); font-stretch: 112%; letter-spacing: -.01em; } html.bf26 .bf26-held__prijs { color: var(--bf26-wit-70); font: 500 17px/1.35 "Inter", sans-serif; } html.bf26 .bf26-held__prijs s { color: var(--bf26-wit-50); } html.bf26 .bf26-held__prijs b { color: var(--bf26-wit); font: 900 26px/1 var(--bf26-display); } html.bf26 .bf26-held__spaar { align-self: flex-start; margin-top: 4px; padding: 6px 12px; border-radius: 999px; background: var(--bf26-geel); color: #0a0a0b; font: 800 14px/1 "Inter", sans-serif; } html.bf26 .bf26-hero__band { position: relative; z-index: 1; margin: 0 -2%; padding: 14px 0; overflow: hidden; background: var(--bf26-geel); color: #0a0a0b; transform: rotate(-1.6deg) translateY(-6px); box-shadow: 0 10px 40px -10px rgba(255, 229, 0, .55); } html.bf26 .bf26-hero__band-spoor { display: flex; width: max-content; animation: bf26-ticker 36s linear infinite; } html.bf26 .bf26-hero__band span { padding: 0 22px; font: 900 22px/1 var(--bf26-display); font-stretch: 120%; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; } html.bf26 .bf26-hero__band i { font-style: normal; font-size: 16px; line-height: 22px; } /* Deals onder de hero */ html.bf26 .bf26-deals { position: relative; padding: 64px 0 56px; background: linear-gradient(180deg, var(--bf26-zwart) 0%, #141416 100%); color: var(--bf26-wit); } html.bf26 .bf26-deals__binnen { max-width: 1280px; margin: 0 auto; padding: 0 32px; } html.bf26 .bf26-deals__kop { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 24px; margin-bottom: 28px; } html.bf26 .bf26-deals__eyebrow { grid-column: 1 / -1; margin: 0; color: var(--bf26-geel); font: 700 12px/1 "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; } html.bf26 .bf26-deals__kop h2 { margin: 0; color: var(--bf26-wit); font: 900 clamp(28px, 3.6vw, 44px)/1.05 var(--bf26-display); font-stretch: 110%; letter-spacing: -.02em; } html.bf26 .bf26-deals .lla-grid, html.bf26 .bf26-deals .row { margin-bottom: 0; } /* ---------------------------------------------------------------- categoriebanner */ html.bf26 .bf26-catbanner { position: relative; isolation: isolate; overflow: hidden; background: var(--bf26-zwart); color: var(--bf26-wit); } html.bf26 .bf26-catbanner__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 200px at 15% 0%, rgba(255, 229, 0, .22), transparent 70%), radial-gradient(500px 160px at 90% 100%, rgba(255, 229, 0, .12), transparent 70%); } html.bf26 .bf26-catbanner__binnen { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1280px; margin: 0 auto; padding: 26px 32px; } html.bf26 .bf26-catbanner__kop { margin: 0 0 6px; color: var(--bf26-geel); font: 900 44px/.9 var(--bf26-display); font-stretch: 125%; letter-spacing: -.02em; } html.bf26 .bf26-catbanner__sub { margin: 0; color: var(--bf26-wit-70); font: 500 16px/1.4 "Inter", sans-serif; } html.bf26 .bf26-catbanner__sub b { color: var(--bf26-wit); } html.bf26 .bf26-catbanner__rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } html.bf26 .bf26-catbanner__code { margin: 0; color: var(--bf26-wit-70); font: 500 14px/1.4 "Inter", sans-serif; } html.bf26 .bf26-fassaderegel { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; color: #141211; font: 600 14px/1.3 "Inter", sans-serif; } html.bf26 .bf26-fassaderegel .bf26-chip { color: #141211; border-color: #141211; background: #ffe500; } html.bf26 .bf26-fassaderegel--strook { justify-content: center; margin: 0; padding: 10px 16px; background: #f4f1ec; } /* ---------------------------------------------------------------- productkaarten */ html.bf26 .bf26-kaart { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 2px; } html.bf26 .bf26-kaart__prijs { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 8px; } html.bf26 .bf26-kaart__prijs s { color: #8a847b; font-size: 14px; font-weight: 500; } html.bf26 .bf26-kaart__prijs b { position: relative; color: #0a0a0b; font: 900 22px/1.1 var(--bf26-display); font-stretch: 105%; letter-spacing: -.01em; background: linear-gradient(transparent 58%, var(--bf26-geel) 58%, var(--bf26-geel) 92%, transparent 92%); padding: 0 2px; } html.bf26 .bf26-kaart__sub { color: #4a453e; font-size: 12.5px; font-weight: 600; line-height: 1.3; } html.bf26 .bf26-kaart .bf26-badge { display: none; } html.bf26 .bf26-badge.is-geplaatst { position: absolute; top: 12px; left: 12px; z-index: 5; display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 999px; background: #0a0a0b; color: var(--bf26-geel); font: 900 15px/1 var(--bf26-display); font-stretch: 110%; letter-spacing: -.01em; box-shadow: 0 0 0 2px var(--bf26-geel), 0 8px 24px -6px rgba(0, 0, 0, .5); transform: rotate(-4deg); pointer-events: none; } html.bf26 .is-bf26-kaart, html.bf26 .col-inner:has(.bf26-kaart) { transition: box-shadow .35s ease, transform .35s ease; border-radius: 14px; } html.bf26 .is-bf26-kaart:hover, html.bf26 .col-inner:has(.bf26-kaart):hover { box-shadow: 0 0 0 2px var(--bf26-geel), 0 22px 60px -18px rgba(255, 200, 0, .65) !important; transform: translateY(-3px); } /* ---------------------------------------------------------------- productpagina */ html.bf26 .bf26-pblok { position: relative; margin: 14px 0 18px; padding: 2px; border-radius: 20px; isolation: isolate; } html.bf26 .bf26-pblok__rand { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--bf26-hoek), #2a2a2e, var(--bf26-geel) 15%, #2a2a2e 32%, #2a2a2e 60%, rgba(255, 229, 0, .7) 78%, #2a2a2e); animation: bf26-draai 5s linear infinite; } html.bf26 .bf26-pblok::after { content: ""; position: absolute; inset: 12px; z-index: -2; border-radius: 20px; background: rgba(255, 229, 0, .3); filter: blur(28px); opacity: .7; } html.bf26 .bf26-pblok__binnen { position: relative; overflow: hidden; padding: 20px 22px 18px; border-radius: 18px; background: radial-gradient(420px 160px at 100% 0%, rgba(255, 229, 0, .14), transparent 70%), linear-gradient(170deg, #17171a, #0a0a0b 70%); color: var(--bf26-wit); } html.bf26 .bf26-pblok__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } html.bf26 .bf26-pblok__titel { display: inline-flex; align-items: center; gap: 9px; color: var(--bf26-geel); font: 800 13px/1 "Inter", sans-serif; letter-spacing: .14em; } html.bf26 .bf26-pblok__pct { padding: 7px 12px; border-radius: 999px; background: var(--bf26-geel); color: #0a0a0b; font: 900 17px/1 var(--bf26-display); font-stretch: 110%; } html.bf26 .bf26-pblok__prijzen { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin-bottom: 4px; } html.bf26 .bf26-pblok__van { color: var(--bf26-wit-50); font: 500 20px/1 "Inter", sans-serif; text-decoration-thickness: 2px; text-decoration-color: rgba(255, 45, 45, .85); } html.bf26 .bf26-pblok__bf { color: var(--bf26-wit-70); font: 600 18px/1 "Inter", sans-serif; } html.bf26 .bf26-pblok__bf b { color: var(--bf26-wit); font: 900 50px/1 var(--bf26-display); font-stretch: 108%; letter-spacing: -.03em; text-shadow: 0 0 40px rgba(255, 229, 0, .25); } html.bf26 .bf26-pblok__spaar { margin: 6px 0 16px; color: var(--bf26-wit-70); font: 500 15px/1.4 "Inter", sans-serif; } html.bf26 .bf26-pblok__spaar b { color: var(--bf26-geel); font: 900 19px/1 var(--bf26-display); font-variant-numeric: tabular-nums; } html.bf26 .bf26-pblok__spaar span { white-space: nowrap; } html.bf26 .bf26-pblok__klok { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; padding-top: 14px; border-top: 1px solid var(--bf26-lijn); } html.bf26 .bf26-pblok__klok > span { color: var(--bf26-wit-50); font: 600 12px/1 "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; } html.bf26 .bf26-pblok__acties { display: flex; flex-direction: column; gap: 8px; } html.bf26 .bf26-pblok__acties .bf26-knop { min-height: 54px; font-size: 17px; } html.bf26 .bf26-pblok__acties .bf26-knop.is-actief { background: #1f3d17; color: #c8ff9e !important; box-shadow: inset 0 0 0 1.5px #6bd34a; } html.bf26 .bf26-pblok__kopieer { align-self: center; min-height: 0; margin: 0; padding: 6px 10px; border: 0; background: none; color: var(--bf26-wit-70); font: 500 13.5px/1.2 "Inter", sans-serif; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } html.bf26 .bf26-pblok__kopieer b { color: var(--bf26-geel); letter-spacing: .05em; } html.bf26 .bf26-pblok__status { margin: 4px 0 0; color: #c8ff9e; font: 500 13.5px/1.4 "Inter", sans-serif; text-align: center; } html.bf26 .bf26-pblok__regels { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; padding: 0; list-style: none; } html.bf26 .bf26-pblok__regels li { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--bf26-wit-70); font: 500 13.5px/1.3 "Inter", sans-serif; } html.bf26 .bf26-pblok__voorraad { color: #ff8a8a !important; font-weight: 700 !important; } html.bf26 .bf26-vink { width: 16px; height: 16px; border-radius: 50%; background: var(--bf26-geel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%230a0a0b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; flex: none; } /* Mobiel: sticky onderbalk (door JS opgebouwd) */ html.bf26 .bf26-sticky { position: fixed; left: 0; right: 0; bottom: var(--bf26-onder); z-index: 998; display: none; align-items: center; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(10, 10, 11, .96); color: var(--bf26-wit); border-top: 1px solid rgba(255, 229, 0, .35); box-shadow: 0 -12px 30px -12px rgba(0, 0, 0, .6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translateY(110%); transition: transform .35s cubic-bezier(.2, .8, .2, 1), bottom .2s ease; } html.bf26 .bf26-sticky.is-zichtbaar { transform: translateY(0); } html.bf26 .bf26-sticky.is-boven-flatsome { padding-bottom: 8px; } html.bf26 .bf26-sticky__prijs { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: none; } html.bf26 .bf26-sticky__boven { display: inline-flex; align-items: center; gap: 6px; } html.bf26 .bf26-sticky__prijs s { color: var(--bf26-wit-50); font-size: 11.5px; line-height: 1; } html.bf26 .bf26-sticky__prijs b { color: var(--bf26-wit); font: 900 21px/1 var(--bf26-display); white-space: nowrap; } html.bf26 .bf26-sticky__pct { padding: 3px 6px; border-radius: 999px; background: var(--bf26-geel); color: #0a0a0b; font: 900 11px/1 var(--bf26-display); flex: none; } html.bf26 .bf26-sticky .bf26-klok { margin-left: auto; flex: none; } html.bf26 .bf26-sticky .bf26-klok--mini .bf26-klok__getal { font-size: 14px; } html.bf26 .bf26-sticky .bf26-klok--mini .bf26-klok__sep { font-size: 12px; } html.bf26 .bf26-sticky .bf26-knop { min-height: 44px; padding: 0 14px; font-size: 14px; flex: none; } @media (max-width: 360px) { html.bf26 .bf26-sticky .bf26-klok { display: none; } html.bf26 .bf26-sticky .bf26-knop { margin-left: auto; } } html.bf26 .bf26-sticky.is-boven-flatsome .bf26-knop { display: none; } @media (max-width: 849px) { html.bf26 body.bf26-actie .bf26-sticky { display: flex; } } /* ---------------------------------------------------------------- winkelwagen */ html.bf26 .bf26-wbanner { position: relative; display: flex; align-items: center; gap: 18px; margin: 0 0 24px; padding: 18px 20px; overflow: hidden; border-radius: 16px; background: radial-gradient(500px 140px at 0% 0%, rgba(255, 229, 0, .2), transparent 70%), #0a0a0b; color: var(--bf26-wit); box-shadow: 0 0 0 1px rgba(255, 229, 0, .35), 0 18px 40px -20px rgba(0, 0, 0, .6); } html.bf26 .bf26-wbanner__tekst { flex: 1 1 auto; min-width: 0; } html.bf26 .bf26-wbanner__tekst p { margin: 0; color: var(--bf26-wit-70); font: 500 14.5px/1.45 "Inter", sans-serif; } html.bf26 .bf26-wbanner__tekst p b { color: var(--bf26-geel); } html.bf26 .bf26-wbanner .bf26-wbanner__kop { margin-bottom: 4px; color: var(--bf26-wit); font: 900 22px/1.1 var(--bf26-display); font-stretch: 108%; } html.bf26 .bf26-wbanner .bf26-wbanner__kop b { color: var(--bf26-geel); } html.bf26 .bf26-wbanner .bf26-klok { flex: none; } html.bf26 .bf26-wbanner .bf26-knop { flex: none; min-height: 48px; } html.bf26 .bf26-wbanner--actief { box-shadow: 0 0 0 1.5px #6bd34a, 0 18px 40px -20px rgba(0, 0, 0, .6); } html.bf26 .bf26-wbanner__vink { width: 40px; height: 40px; border-radius: 50%; flex: none; background: #6bd34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%230a0a0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat; } /* ---------------------------------------------------------------- exit-intent */ html.bf26 .bf26-exit { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 24px; background: rgba(5, 5, 6, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease; } html.bf26 .bf26-exit.is-open { opacity: 1; } html.bf26 .bf26-exit__dialoog { position: relative; width: min(540px, 100%); padding: 2px; border-radius: 26px; transform: translateY(20px) scale(.96); transition: transform .45s cubic-bezier(.2, .9, .25, 1.1); } html.bf26 .bf26-exit.is-open .bf26-exit__dialoog { transform: none; } html.bf26 .bf26-exit__rand { position: absolute; inset: 0; border-radius: inherit; background: conic-gradient(from var(--bf26-hoek), #222, var(--bf26-geel) 20%, #222 40%, #222 60%, var(--bf26-geel) 80%, #222); animation: bf26-draai 5s linear infinite; } html.bf26 .bf26-exit__binnen { position: relative; padding: 34px 32px 28px; border-radius: 24px; background: radial-gradient(500px 220px at 50% 0%, rgba(255, 229, 0, .2), transparent 70%), #0b0b0c; color: var(--bf26-wit); text-align: center; } html.bf26 .bf26-exit__sluit { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 38px; height: 38px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--bf26-wit); font-size: 22px; line-height: 1; cursor: pointer; } html.bf26 .bf26-exit__sluit:hover { background: rgba(255, 255, 255, .16); } html.bf26 .bf26-exit__eyebrow { margin: 0 0 8px; color: var(--bf26-wit-70); font: 600 13px/1 "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; } html.bf26 .bf26-exit__kop { margin: 0 0 10px; color: var(--bf26-geel); font: 900 54px/.9 var(--bf26-display); font-stretch: 125%; letter-spacing: -.03em; } html.bf26 .bf26-exit__deal { margin: 0 0 20px; color: var(--bf26-wit); font: 600 18px/1.4 "Inter", sans-serif; } html.bf26 .bf26-exit__deal b { color: var(--bf26-geel); } html.bf26 .bf26-exit .bf26-klok { margin: 0 auto 22px; } html.bf26 .bf26-exit__code { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 10px 10px 10px 20px; border: 2px dashed var(--bf26-geel); border-radius: 14px; background: var(--bf26-geel-zacht); } html.bf26 .bf26-exit__code b { color: var(--bf26-geel); font: 900 28px/1 var(--bf26-display); font-stretch: 115%; letter-spacing: .08em; } html.bf26 .bf26-exit__code .bf26-knop { min-height: 44px; padding: 0 18px; font-size: 14.5px; } html.bf26 .bf26-exit__verder { display: inline-block; margin-top: 4px; color: var(--bf26-wit-70) !important; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; background: none; border: 0; min-height: 0; padding: 4px; text-transform: none; letter-spacing: 0; font-weight: 500; } /* ---------------------------------------------------------------- reveal */ html.bf26.bf26-js [data-bf26-reveal] { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); } html.bf26.bf26-js [data-bf26-reveal]:not(.is-zichtbaar) { opacity: 0; transform: translateY(26px); } /* ---------------------------------------------------------------- responsive */ @media (max-width: 1100px) { html.bf26 .bf26-bar__label { display: none; } } @media (max-width: 960px) { html.bf26 .bf26-hero { padding-top: 48px; } html.bf26 .bf26-hero__binnen { grid-template-columns: 1fr; gap: 36px; padding: 0 20px 56px; } html.bf26 .bf26-held { max-width: 460px; } html.bf26 .bf26-catbanner__binnen { flex-direction: column; align-items: flex-start; padding: 22px 20px; } html.bf26 .bf26-catbanner__rechts { align-items: flex-start; } html.bf26 .bf26-deals__binnen { padding: 0 20px; } } @media (max-width: 640px) { html.bf26 { --bf26-bar-h: 42px; } html.bf26 .bf26-bar { gap: 10px; padding: 0 10px; font-size: 12.5px; } html.bf26 .bf26-bar__merk { display: none; } html.bf26.bf26-lk .bf26-bar__merk { display: none; } html.bf26 .bf26-bar__item { padding: 0 12px; } html.bf26 .bf26-bar__rechts { gap: 8px; } html.bf26 .bf26-bar__code { height: 26px; padding: 0 9px; } html.bf26 .bf26-bar__code span { display: none; } html.bf26 .bf26-bar__lk { font-size: 12px; text-align: left; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } html.bf26 .bf26-bar__lk-spoor { display: flex; width: max-content; animation: bf26-ticker 16s linear infinite; } html.bf26 .bf26-bar__lk-spoor > span { padding-right: 40px; } html.bf26 .bf26-bar__lk-spoor > span + span { display: inline; } html.bf26 .bf26-klok--mini .bf26-klok__getal { font-size: 14px; } html.bf26 .bf26-hero { padding-top: 36px; } html.bf26 .bf26-hero__binnen { padding: 0 16px 48px; gap: 30px; } html.bf26 .bf26-hero__kop { font-size: clamp(60px, 21vw, 96px); margin-bottom: 18px; } html.bf26 .bf26-hero__deal { font-size: 22px; } html.bf26 .bf26-hero__vanaf { font-size: 16px; margin-bottom: 22px; } html.bf26 .bf26-klok--groot { gap: 6px; } html.bf26 .bf26-klok--groot .bf26-klok__deel { min-width: 0; flex: 1 1 0; padding: 12px 4px 9px; border-radius: 12px; } html.bf26 .bf26-klok--groot .bf26-klok__getal { font-size: 32px; } html.bf26 .bf26-klok--groot .bf26-klok__sep { font-size: 26px; padding-top: 12px; } html.bf26 .bf26-hero__klok .bf26-klok { display: flex; width: 100%; } html.bf26 .bf26-hero__knoppen { flex-direction: column; } html.bf26 .bf26-hero__knoppen .bf26-knop { width: 100%; } html.bf26 .bf26-held__badge { width: 78px; height: 78px; font-size: 21px; top: 12px; right: 12px; } html.bf26 .bf26-held__naam { font-size: 26px; } html.bf26 .bf26-hero__band span { font-size: 17px; padding: 0 14px; } html.bf26 .bf26-deals { padding: 44px 0 36px; } html.bf26 .bf26-deals__binnen { padding: 0 16px; } html.bf26 .bf26-deals__kop { grid-template-columns: 1fr; } html.bf26 .bf26-catbanner__binnen { padding: 18px 16px; gap: 14px; } html.bf26 .bf26-catbanner__kop { font-size: 34px; } html.bf26 .bf26-catbanner__sub { font-size: 14.5px; } html.bf26 .bf26-klok--mid .bf26-klok__deel { min-width: 46px; } html.bf26 .bf26-klok--mid .bf26-klok__getal { font-size: 21px; } html.bf26 .bf26-pblok__binnen { padding: 18px 16px 16px; } html.bf26 .bf26-pblok__bf b { font-size: 44px; } html.bf26 .bf26-pblok__klok { justify-content: flex-start; } html.bf26 .bf26-kaart__prijs b { font-size: 19px; } html.bf26 .bf26-kaart__prijs s { font-size: 12.5px; } html.bf26 .bf26-kaart__sub { font-size: 11.5px; } html.bf26 .bf26-badge.is-geplaatst { top: 8px; left: 8px; padding: 6px 9px; font-size: 13px; } html.bf26 .bf26-wbanner { flex-wrap: wrap; gap: 12px; padding: 16px; } html.bf26 .bf26-wbanner .bf26-knop { width: 100%; } html.bf26 .bf26-wbanner__vink { width: 32px; height: 32px; background-size: 20px; } } /* Beweging beperken: geen parallax, zweven, tilt of confetti. Klok en ticker blijven lopen. */ @media (prefers-reduced-motion: reduce) { html.bf26 .bf26-hero__glow span, html.bf26 .bf26-held__badge, html.bf26 .bf26-held__rand, html.bf26 .bf26-pblok__rand, html.bf26 .bf26-exit__rand { animation: none !important; } html.bf26.bf26-js [data-bf26-reveal] { opacity: 1 !important; transform: none !important; transition: none; } html.bf26 .bf26-held:hover .bf26-held__foto { transform: none; } } /* [hidden] mag niet door display-regels hierboven overschreven worden. */ html.bf26 .bf26-pblok [hidden], html.bf26 .bf26-sticky [hidden], html.bf26 .bf26-wbanner [hidden] { display: none !important; } /* ================================================================================================= DONKER THEMA: de hele site zwart zolang de laag actief is (html.bf26). Alleen kleuren, geen layout. Merkkleuren blijven: goud #ca9f62 voor de leno-look-knoppen en sterren, geel #ffe500 voor accenten. ================================================================================================= */ html.bf26 { --bf26-d-bg: #0a0a0b; --bf26-d-bg2: #111113; --bf26-d-kaart: #16161a; --bf26-d-kaart2: #1c1c21; --bf26-d-rand: rgba(255, 255, 255, .08); --bf26-d-rand2: rgba(255, 255, 255, .14); --bf26-d-tekst: #d4d4d8; --bf26-d-kop: #f4f4f5; --bf26-d-grijs: #a1a1aa; --bf26-d-foto: #f1f1f3; background: #0a0a0b; color-scheme: dark; } /* Leno-look-variabelen omzetten: alles wat var(--lla-*) gebruikt wordt vanzelf donker. */ html.bf26 body.leno-look { --lla-goud-zacht: rgba(202, 159, 98, .12); --lla-inkt: #f4f4f5; --lla-tekst: #d4d4d8; --lla-grijs: #a1a1aa; --lla-lijn: rgba(255, 255, 255, .08); --lla-lijn-sterk: rgba(255, 255, 255, .14); --lla-creme: #111113; --lla-groen: #7ddc94; --lla-groen-bg: rgba(74, 190, 110, .12); --lla-blauw: #9dbcff; --lla-blauw-bg: rgba(80, 130, 255, .12); --lla-rood: #ff8a80; background: #0a0a0b !important; color: var(--bf26-d-tekst); } /* Basisvlakken */ html.bf26 body, html.bf26 #wrapper, html.bf26 #main, html.bf26 .page-wrapper, html.bf26 .shop-container, html.bf26 .product-container, html.bf26 .product-main, html.bf26 .product-footer, html.bf26 .content-area, html.bf26 .woocommerce-cart .cart-container, html.bf26 .checkout-page-title, html.bf26 .page-title { background-color: transparent; } html.bf26 #wrapper, html.bf26 #main { background-color: #0a0a0b !important; } html.bf26 .section-bg.fill, html.bf26 .section .section-bg { background-color: transparent !important; } html.bf26 .section:not(.dark), html.bf26 .row-box-shadow-1 .col-inner, html.bf26 .box-text { color: inherit; } html.bf26 [style*="background-color: rgb(255, 255, 255)"], html.bf26 [style*="background-color:#fff"], html.bf26 [style*="background-color: #fff"], html.bf26 [style*="background-color: #ffffff"], html.bf26 [style*="background-color:#ffffff"], html.bf26 [style*="background-color: rgb(247, 247, 247)"], html.bf26 [style*="background-color: rgb(250, 248, 245)"] { background-color: var(--bf26-d-kaart) !important; } html.bf26 body.leno-look [style*="color: #000"], html.bf26 body.leno-look [style*="color: rgb(0, 0, 0)"], html.bf26 body.leno-look [style*="color: #333"], html.bf26 body.leno-look [style*="color: #141211"], html.bf26 body.leno-look [style*="color: #222"], html.bf26 body.leno-look [style*="color: #555"] { color: var(--bf26-d-tekst) !important; } /* Tekst */ html.bf26 body.leno-look :where(h1, h2, h3, h4, h5, h6, .heading-font, .product-title, .product_title, .section-title, .page-title, .entry-title, .widget-title, th, dt, legend) { color: var(--bf26-d-kop); } html.bf26 body.leno-look .product-small .category, html.bf26 body.leno-look .product-cat { color: var(--bf26-d-grijs) !important; } html.bf26 body.leno-look :where(.amount, .price, .price ins, .woocommerce-Price-amount) { color: var(--bf26-d-kop); } html.bf26 body.leno-look :is(del, del .amount, .price del) { color: var(--bf26-d-grijs) !important; } html.bf26 body.leno-look a:not(.button):not([class*="bf26-"]):not(.lla-knop):hover { color: var(--bf26-geel) !important; } html.bf26 body.leno-look hr, html.bf26 body.leno-look .is-divider { border-color: var(--bf26-d-rand2); background-color: var(--bf26-d-rand2); } html.bf26 body.leno-look ::selection { background: var(--bf26-geel); color: #0a0a0b; } /* Kop (logo-balk, menu, sticky kop) */ html.bf26 #header, html.bf26 #header .header-wrapper, html.bf26 #header .header-main, html.bf26 #header .header-bottom, html.bf26 #header .header-bg-color, html.bf26 #header .header-bg-image, html.bf26 #header .header-wrapper.stuck .header-main { background-color: #0a0a0b !important; background-image: none !important; } html.bf26 #header .header-main { border-bottom: 1px solid var(--bf26-d-rand); } html.bf26 #header .header-wrapper.stuck { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8) !important; } html.bf26 body.leno-look #top-bar { background: #050506 !important; border-bottom: 1px solid var(--bf26-d-rand); } /* Zwart logo op witte achtergrond: inverteren en met 'screen' mengen = wit logo zonder vlak. */ html.bf26 #logo img, html.bf26 .lla-voet img[src*="logo"] { filter: invert(1) brightness(1.15); mix-blend-mode: screen; } html.bf26 body.leno-look #header .header-nav > li > a, html.bf26 body.leno-look #header .header-wrapper .header-main .header-nav li a, html.bf26 body.leno-look #header .nav > li > a { color: var(--bf26-d-kop) !important; } html.bf26 body.leno-look #header .header-nav > li > a:hover, html.bf26 body.leno-look #header .header-nav > li.active > a, html.bf26 body.leno-look #header .header-nav > li.current-menu-item > a, html.bf26 body.leno-look #header .header-nav > li.current-menu-ancestor > a { color: var(--bf26-geel) !important; } html.bf26 body.leno-look #header :is(.icon-search, .cart-icon, .icon-shopping-basket, .icon-shopping-cart, .icon-shopping-bag, .icon-menu, .icon-user, .icon-angle-down) { color: var(--bf26-d-kop) !important; } html.bf26 body.leno-look #header .cart-icon strong, html.bf26 body.leno-look #header .cart-icon strong:after { border-color: var(--bf26-d-kop) !important; color: var(--bf26-d-kop) !important; } /* Uitklapmenu's en mega-menu */ html.bf26 body.leno-look .nav-dropdown, html.bf26 body.leno-look .header-nav > li.lla-mega > .nav-dropdown { background: #111113 !important; border-color: var(--bf26-d-rand) !important; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9) !important; color: var(--bf26-d-tekst); } html.bf26 body.leno-look .nav-dropdown li a { color: var(--bf26-d-tekst) !important; } html.bf26 body.leno-look .nav-dropdown li a:hover { color: var(--bf26-geel) !important; background: transparent !important; } html.bf26 body.leno-look .nav-dropdown-has-arrow li.has-dropdown:after, html.bf26 body.leno-look .nav-dropdown-has-arrow li.has-dropdown:before { border-bottom-color: #111113 !important; } html.bf26 body.leno-look .lla-mega-tegel__foto { background: var(--bf26-d-foto) !important; } /* Leno-look-elementen die var(--lla-inkt) als donkere achtergrond gebruikten weer donker maken */ html.bf26 body.leno-look .product-short-description { background: var(--bf26-d-kaart) !important; color: var(--bf26-d-kop) !important; box-shadow: inset 0 0 0 1px var(--bf26-d-rand); } html.bf26 body.leno-look .lla-rest__kop { background: #111113 !important; color: #fff; } html.bf26 body.leno-look .button.success, html.bf26 body.leno-look a.button.success { background-color: var(--bf26-d-kaart2) !important; border-color: var(--bf26-d-rand2) !important; color: #fff !important; } /* Footer */ html.bf26 body.leno-look .footer-wrapper, html.bf26 body.leno-look .lla-voet, html.bf26 body.leno-look .footer-wrapper .footer-1, html.bf26 body.leno-look .footer-wrapper .footer-2, html.bf26 body.leno-look .absolute-footer, html.bf26 #footer { background: #050506 !important; } html.bf26 body.leno-look .lla-voet { border-top: 1px solid var(--bf26-d-rand); } html.bf26 body.leno-look .footer-wrapper a:hover { color: var(--bf26-geel) !important; } /* Kaarten: donker glas */ html.bf26 body.leno-look :is( .product-small.box, .lla-review, .lla-rest-tegel, .lla-pd-voordeel, .lla-pd-kaart, .lla-mu-kassa, .lla-musterkaart, .lla-varvoorraad, .woocommerce-Tabs-panel table, .woocommerce-Tabs-panel .accordion-item, .woocommerce-Tabs-panel .text:has(> hr), .klantfoto-review, .woocommerce-Tabs-panel .row.align-middle.align-center > .col.large-3 > .col-inner, .woocommerce-Tabs-panel > .row > .col.large-6 > .col-inner:not(.dark), .woocommerce-Tabs-panel .col-inner .col-inner[style*="background-color"], .lla-spec-tabel, .woobt-product, .woobt-wrap, .fkk-m-rij, .fkk-rij, .fkk-kaart, .lla-koop-aanbevolen .fkk-aanbevolen, .fkk-aanbevolen, .aku-kleur-switch__optie, .aku-kleur-switch__optie.is-active, .lla-reken__paneel, .lla-reken__vorm, .lla-reken__chip, .lla-reken__sluit, .icon-box, .message-box, .lla-seite-kaart, .cart_totals, .cart-sidebar .cart_totals, .woocommerce-checkout-review-order, .lla-pil--laatste, .custom-product-page p.stock.out-of-stock ) { background: var(--bf26-d-kaart) !important; border-color: var(--bf26-d-rand) !important; color: var(--bf26-d-tekst); } html.bf26 body.leno-look .product-small.box:hover { border-color: rgba(255, 229, 0, .35) !important; } html.bf26 body.leno-look .fkk-m-rij.is-gekozen, html.bf26 body.leno-look .aku-kleur-switch__optie.is-active { background: rgba(202, 159, 98, .14) !important; border-color: var(--lla-goud) !important; } html.bf26 body.leno-look .fkk-trigger, html.bf26 body.leno-look .fkk-trigger:hover, html.bf26 body.leno-look .fkk-toon, html.bf26 body.leno-look .fkk-toon:hover { background: var(--bf26-d-kaart) !important; border-color: var(--bf26-d-rand2) !important; color: var(--bf26-d-kop) !important; } html.bf26 body.leno-look .fkk-trigger .fkk-chevron { color: var(--bf26-d-kop); } html.bf26 body.leno-look .fkk-sheet, html.bf26 body.leno-look .fkk-sheet__voet { background: #111113 !important; color: var(--bf26-d-tekst); border-color: var(--bf26-d-rand) !important; } html.bf26 body.leno-look :is(.fkk-sheet__titel, .fkk-sectie__titel, .fkk-kaart__naam, .fkk-sheet__huidig-naam, .fkk-rij__naam, .fkk-m-naam, .fkk-m-totaal, .aku-kleur-switch__naam, .aku-kleur-switch__label) { color: var(--bf26-d-kop) !important; } html.bf26 body.leno-look :is(.fkk-opties button, .fkk-m-qty button, .fkk-rij__aantal button, .fkk-rij__aantal input.fkk-rij__qty, .fkk-sluit) { background: var(--bf26-d-kaart2) !important; color: var(--bf26-d-kop) !important; border-color: var(--bf26-d-rand2) !important; } html.bf26 body.leno-look .lla-sale { background: var(--bf26-d-kaart) !important; border-color: rgba(202, 159, 98, .35) !important; color: var(--bf26-d-tekst); } html.bf26 body.leno-look .lla-sale__code { background: transparent !important; color: var(--lla-goud) !important; } html.bf26 body.leno-look .lla-sale__tekst b { color: var(--bf26-d-kop); } /* Productfoto's met witte achtergrond: lichte, afgeronde fotovlakken; 'multiply' laat het wit opgaan in het vlak. */ html.bf26 body.leno-look .product-small .box-image { background: var(--bf26-d-foto) !important; } html.bf26 body.leno-look .product-small .box-image img, html.bf26 body.leno-look .woocommerce-product-gallery__image img, html.bf26 body.leno-look .product-gallery img, html.bf26 body.leno-look .product-thumbnails img, html.bf26 body.leno-look .fkk-kaart__img img, html.bf26 body.leno-look .fkk-m-img img, html.bf26 body.leno-look .aku-kleur-switch__img img, html.bf26 body.leno-look .woobt-thumb img, html.bf26 body.leno-look .fkk-rij__img img, html.bf26 body.leno-look .shop_table .product-thumbnail img, html.bf26 .bf26-held__foto, html.bf26 body.leno-look .lla-reken__regel img, html.bf26 body.leno-look .fkk-trigger img, html.bf26 body.leno-look .sticky-add-to-cart-img { mix-blend-mode: multiply; } html.bf26 body.leno-look :is(.woocommerce-product-gallery__image, .product-gallery-slider .slide, .product-thumbnails .col a, .fkk-kaart__img, .fkk-m-img, .aku-kleur-switch__img, .woobt-thumb, .fkk-rij__img, .shop_table .product-thumbnail a, .lla-reken__regel img, .fkk-trigger img) { background-color: var(--bf26-d-foto) !important; } html.bf26 body.leno-look .woocommerce-product-gallery__image, html.bf26 body.leno-look .product-gallery-slider .slide { border-radius: 18px; overflow: hidden; } html.bf26 body.leno-look .shop_table .product-thumbnail a { display: inline-block; border-radius: 10px; overflow: hidden; } html.bf26 body.leno-look .fkk-trigger img { border-radius: 8px; } html.bf26 .bf26-held__binnen { background: var(--bf26-d-foto); } html.bf26 .bf26-held__info { background: linear-gradient(160deg, #1e1e22, #0a0a0b); } /* Productpagina */ html.bf26 body.leno-look .product-info .product-page-price, html.bf26 body.leno-look .product-page-price .amount { color: var(--bf26-d-kop) !important; } html.bf26 body.leno-look .breadcrumbs, html.bf26 body.leno-look .breadcrumbs a, html.bf26 body.leno-look .woocommerce-breadcrumb { color: var(--bf26-d-grijs) !important; } html.bf26 body.leno-look .breadcrumbs a:hover { color: var(--bf26-geel) !important; } html.bf26 body.leno-look .lla-bespaar { border-color: rgba(125, 220, 148, .3) !important; } html.bf26 body.leno-look :is(.tabbed-content .nav > li > a, .nav-tabs > li > a, .woocommerce-tabs .tabs li a) { color: var(--bf26-d-grijs) !important; background: transparent !important; border-color: var(--bf26-d-rand) !important; } html.bf26 body.leno-look :is(.tabbed-content .nav > li.active > a, .nav-tabs > li.active > a, .woocommerce-tabs .tabs li.active a) { color: var(--bf26-d-kop) !important; border-color: var(--bf26-geel) !important; } html.bf26 body.leno-look .nav-line > li > a::before, html.bf26 body.leno-look .nav-line-bottom > li > a::before { background-color: var(--bf26-geel) !important; } html.bf26 body.leno-look .tab-panels, html.bf26 body.leno-look .woocommerce-Tabs-panel { background: transparent !important; color: var(--bf26-d-tekst); } html.bf26 body.leno-look .accordion-title { color: var(--bf26-d-kop) !important; border-color: var(--bf26-d-rand) !important; background: transparent !important; } html.bf26 body.leno-look .accordion-title.active { color: var(--bf26-geel) !important; } html.bf26 body.leno-look .woocommerce-Tabs-panel a.button.white, html.bf26 body.leno-look .woocommerce-Tabs-panel a.button.is-underline { background: var(--bf26-d-kaart2) !important; color: var(--bf26-d-kop) !important; } html.bf26 body.leno-look table td, html.bf26 body.leno-look table th { border-color: var(--bf26-d-rand) !important; } html.bf26 body.leno-look .sticky-add-to-cart--active, html.bf26 body.leno-look .sticky-add-to-cart-wrapper .sticky-add-to-cart.sticky-add-to-cart--active { background: rgba(10, 10, 11, .96) !important; border-top-color: var(--bf26-d-rand2) !important; color: var(--bf26-d-kop); } html.bf26 body.leno-look .add-to-cart-container .ux-quantity .button, html.bf26 body.leno-look .ux-quantity .button { background: var(--bf26-d-kaart2) !important; color: var(--bf26-d-kop) !important; } html.bf26 body.leno-look .ux-quantity, html.bf26 body.leno-look .add-to-cart-container .ux-quantity { background: var(--bf26-d-kaart2) !important; border-color: var(--bf26-d-rand2) !important; } html.bf26 body.leno-look .lla-reken-link, html.bf26 body.leno-look .lla-reken-open { color: var(--bf26-d-tekst); } html.bf26 body.leno-look .lla-reken-open { color: var(--bf26-geel) !important; } /* Reviews (Customer Reviews / WooCommerce) */ html.bf26 body.leno-look :is(#reviews, .cr-reviews-grid, .cr-review-card, .cr-summaryBox-wrap, .cr-ajax-reviews-review, .commentlist li .comment-text, .cr-all-reviews-shortcode, .ivole-reviews-grid) { background: transparent !important; color: var(--bf26-d-tekst); } html.bf26 body.leno-look :is(.cr-review-card, .cr-summaryBox-wrap, .commentlist li .comment-text, .cr-ajax-reviews-review, .cr-qna-block) { background: var(--bf26-d-kaart) !important; border-color: var(--bf26-d-rand) !important; } html.bf26 body.leno-look :is(.cr-review-card .cr-review-card-content, .cr-reviewer-name, .cr-summaryBox-wrap *, .comment-text .meta, .cr-ajax-reviews-review *) { color: var(--bf26-d-tekst) !important; } /* Categorie / shop */ html.bf26 body.leno-look .shop-page-title, html.bf26 body.leno-look .category-page-title, html.bf26 body.leno-look .page-title-inner { background: #111113 !important; color: var(--bf26-d-kop); } html.bf26 body.leno-look .shop-page-title .filter-button { background: var(--bf26-d-kaart) !important; color: var(--bf26-d-kop) !important; border-color: var(--bf26-d-rand2) !important; } html.bf26 body.leno-look .widget a, html.bf26 body.leno-look .product-categories a { color: var(--bf26-d-tekst); } html.bf26 body.leno-look .widget .current-cat > a, html.bf26 body.leno-look .product-categories .current-cat > a { color: var(--bf26-geel) !important; } html.bf26 body.leno-look .widget-title, html.bf26 body.leno-look .widget .is-divider { color: var(--bf26-d-kop); } html.bf26 body.leno-look .product-small .name a, html.bf26 body.leno-look .product-small .product-title a { color: var(--bf26-d-kop) !important; } html.bf26 body.leno-look .product-small .add-to-cart-button .button:not(.primary) { background: var(--bf26-d-kaart2) !important; color: var(--bf26-d-kop) !important; } html.bf26 body.leno-look .page-numbers a, html.bf26 body.leno-look .page-numbers span { color: var(--bf26-d-tekst) !important; border-color: var(--bf26-d-rand2) !important; background: transparent !important; } html.bf26 body.leno-look .page-numbers .current { background: var(--bf26-geel) !important; color: #0a0a0b !important; border-color: var(--bf26-geel) !important; } /* Formulieren */ html.bf26 body.leno-look :is(input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="tel"], input[type="password"], input[type="url"], input[type="date"], input.qty, textarea, select), html.bf26 body.leno-look .shop-page-title select.orderby, html.bf26 body.leno-look .lla-reken__invoer input, html.bf26 .select2-container .select2-selection, html.bf26 .select2-dropdown { background-color: var(--bf26-d-kaart) !important; color: var(--bf26-d-kop) !important; border-color: var(--bf26-d-rand2) !important; box-shadow: none !important; } html.bf26 body.leno-look :is(input, textarea)::placeholder { color: #8b8b94 !important; opacity: 1; } html.bf26 body.leno-look :is(input, textarea, select):focus { border-color: var(--bf26-geel) !important; outline: 0; box-shadow: 0 0 0 3px rgba(255, 229, 0, .18) !important; } html.bf26 body.leno-look select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px !important; } html.bf26 .select2-results__option, html.bf26 .select2-container .select2-selection__rendered { color: var(--bf26-d-kop) !important; } html.bf26 .select2-results__option--highlighted { background: rgba(255, 229, 0, .18) !important; } html.bf26 body.leno-look input[type="checkbox"], html.bf26 body.leno-look input[type="radio"] { accent-color: var(--bf26-geel); } /* Flatsome-knoppen */ html.bf26 body.leno-look :is(.button.white, .button.is-outline:not(.primary), .button.secondary.is-outline, .lla-knop--rand-donker, button[name="apply_coupon"], button[name="update_cart"], .button.is-form, .woocommerce-mini-cart__buttons .button:not(.checkout)) { background: transparent !important; color: var(--bf26-d-kop) !important; border: 1px solid var(--bf26-d-rand2) !important; box-shadow: none !important; } html.bf26 body.leno-look :is(.button.white, .button.is-outline:not(.primary), .button.secondary.is-outline, .lla-knop--rand-donker, button[name="apply_coupon"], button[name="update_cart"], .woocommerce-mini-cart__buttons .button:not(.checkout)):hover { border-color: var(--bf26-geel) !important; color: var(--bf26-geel) !important; } html.bf26 body.leno-look .button.primary.is-outline, html.bf26 body.leno-look .wc-backward { color: var(--lla-goud) !important; border-color: var(--lla-goud) !important; background: transparent !important; } html.bf26 body.leno-look .button:disabled, html.bf26 body.leno-look .button.disabled { opacity: .55; } /* Winkelwagen en kassa (alleen kleuren) */ html.bf26 body.leno-look :is(.shop_table, .shop_table th, .shop_table td, .cart_totals table, .woocommerce-cart-form, .cart-collaterals, .checkout_coupon, .woocommerce-checkout-review-order-table) { color: var(--bf26-d-tekst) !important; border-color: var(--bf26-d-rand) !important; background-color: transparent; } html.bf26 body.leno-look .shop_table thead th, html.bf26 body.leno-look .cart_totals th, html.bf26 body.leno-look .shop_table .product-name a { color: var(--bf26-d-kop) !important; } html.bf26 body.leno-look .shop_table tr.order-total .amount, html.bf26 body.leno-look .cart_totals .order-total .amount { color: #fff !important; } html.bf26 body.leno-look .cart-discount, html.bf26 body.leno-look .cart-discount th, html.bf26 body.leno-look .cart-discount td, html.bf26 body.leno-look .cart-discount .amount { color: #9cf2b0 !important; } html.bf26 body.leno-look .remove, html.bf26 body.leno-look a.remove { color: var(--bf26-d-grijs) !important; border-color: var(--bf26-d-rand2) !important; } html.bf26 body.leno-look a.remove:hover { color: #ff8a80 !important; border-color: #ff8a80 !important; } html.bf26 body.leno-look .cart-sidebar, html.bf26 body.leno-look .col.large-5 .is-well, html.bf26 body.leno-look .is-well { background: var(--bf26-d-kaart) !important; border-color: var(--bf26-d-rand) !important; color: var(--bf26-d-tekst); } html.bf26 body.leno-look .woocommerce-shipping-destination, html.bf26 body.leno-look .woocommerce-shipping-calculator, html.bf26 body.leno-look .includes_tax, html.bf26 body.leno-look small { color: var(--bf26-d-grijs); } html.bf26 body.leno-look :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .message-wrapper, .message-container) { background: var(--bf26-d-kaart) !important; color: var(--bf26-d-kop) !important; border-color: var(--bf26-d-rand2) !important; } html.bf26 body.leno-look .woocommerce-message .message-container, html.bf26 body.leno-look .message-wrapper { border-left-color: var(--bf26-geel) !important; } html.bf26 body.leno-look .woocommerce-billing-fields label, html.bf26 body.leno-look .woocommerce-checkout label, html.bf26 body.leno-look .form-row label { color: var(--bf26-d-tekst) !important; } html.bf26 body.leno-look .wc_payment_methods, html.bf26 body.leno-look #payment, html.bf26 body.leno-look .payment_box { background: var(--bf26-d-kaart) !important; color: var(--bf26-d-tekst) !important; border-color: var(--bf26-d-rand) !important; } html.bf26 body.leno-look .payment_box::before { border-bottom-color: var(--bf26-d-kaart) !important; } /* Mobiel menu (zijbalk), mini-cart (off-canvas) en zoeken */ html.bf26 .mfp-bg { background: #000 !important; opacity: .8 !important; } html.bf26 body .off-canvas .mfp-content, html.bf26 body.leno-look .off-canvas .mfp-content, html.bf26 .off-canvas-left .mfp-content, html.bf26 .off-canvas-right .mfp-content, html.bf26 #main-menu, html.bf26 .off-canvas-cart, html.bf26 #cart-popup .inner-padding, html.bf26 #cart-popup { background: #0f0f11 !important; color: var(--bf26-d-tekst) !important; } html.bf26 body.leno-look #main-menu .nav-sidebar > li > a, html.bf26 body.leno-look .nav-sidebar li a, html.bf26 body.leno-look .nav-vertical li a { color: var(--bf26-d-kop) !important; } html.bf26 body.leno-look .nav-sidebar li a:hover, html.bf26 body.leno-look .nav-sidebar li.active > a { color: var(--bf26-geel) !important; } html.bf26 body.leno-look .nav-sidebar li, html.bf26 body.leno-look .nav-sidebar > li + li, html.bf26 body.leno-look .nav-sidebar .children li, html.bf26 body.leno-look .nav-vertical li { border-color: var(--bf26-d-rand) !important; } html.bf26 body.leno-look .nav-sidebar .toggle, html.bf26 body.leno-look .nav-sidebar .toggle i, html.bf26 .mfp-close { color: var(--bf26-d-kop) !important; opacity: .9; } html.bf26 body.leno-look .nav-sidebar .sub-menu, html.bf26 body.leno-look .nav-sidebar .children { background: transparent !important; } html.bf26 body.leno-look .widget_shopping_cart, html.bf26 body.leno-look .widget_shopping_cart_content, html.bf26 body.leno-look .cart-popup-title { color: var(--bf26-d-tekst); background: transparent !important; } html.bf26 body.leno-look .widget_shopping_cart .total, html.bf26 body.leno-look .woocommerce-mini-cart__total { border-color: var(--bf26-d-rand2) !important; color: var(--bf26-d-kop); } html.bf26 body.leno-look .woocommerce-mini-cart-item, html.bf26 body.leno-look .mini_cart_item { border-color: var(--bf26-d-rand) !important; } html.bf26 body.leno-look .woocommerce-mini-cart-item a:not(.remove), html.bf26 body.leno-look .mini_cart_item a:not(.remove) { color: var(--bf26-d-kop) !important; } html.bf26 body.leno-look .woocommerce-mini-cart-item .quantity, html.bf26 body.leno-look .mini_cart_item .quantity { color: var(--bf26-d-grijs) !important; } html.bf26 body.leno-look .searchform .button, html.bf26 body.leno-look .search-field + .button, html.bf26 body.leno-look .header-search-form .button.icon { background: var(--bf26-d-kaart2) !important; color: var(--bf26-d-kop) !important; } html.bf26 body.leno-look .live-search-results, html.bf26 body.leno-look .autocomplete-suggestions { background: #111113 !important; color: var(--bf26-d-tekst) !important; } html.bf26 body.leno-look .autocomplete-suggestion:hover, html.bf26 body.leno-look .autocomplete-selected { background: rgba(255, 229, 0, .1) !important; } /* Leno-look-homepage en overige secties */ html.bf26 body.leno-look :is(.lla-sectie, .lla-tegels, .lla-usp, .lla-reviews, .lla-muster, .lla-home, .lla-restposten-teaser, .lla-rest) { background-color: transparent !important; } html.bf26 body.leno-look .lla-usp { border-color: var(--bf26-d-rand) !important; } html.bf26 body.leno-look .lla-usp__item .lla-ico::before { background: rgba(202, 159, 98, .16) !important; } html.bf26 body.leno-look .lla-reviews { background: #111113 !important; } html.bf26 body.leno-look .lla-muster { background: #111113 !important; } html.bf26 body.leno-look .lla-knop--rand-donker { color: var(--bf26-d-kop) !important; } /* BF26-elementen die eerst voor een witte omgeving waren gestyled */ html.bf26 .bf26-kaart__prijs s { color: #8b8b94; } html.bf26 .bf26-kaart__prijs b { color: var(--bf26-geel); background: none; padding: 0; } html.bf26 .bf26-kaart__sub { color: var(--bf26-d-grijs); } html.bf26 .bf26-fassaderegel { color: var(--bf26-d-kop); } html.bf26 .bf26-fassaderegel .bf26-chip { color: #0a0a0b; border-color: var(--bf26-geel); background: var(--bf26-geel); } html.bf26 .bf26-fassaderegel--strook { background: #111113; border-bottom: 1px solid var(--bf26-d-rand); } html.bf26 .bf26-deals { background: linear-gradient(180deg, var(--bf26-zwart) 0%, #0d0d0f 100%); } /* Goudknoppen: donkere tekst op goud (contrast 8:1 i.p.v. wit 2,4:1) */ html.bf26 body.leno-look :is(.button.primary:not(.is-outline), .button.alt, button.single_add_to_cart_button, .checkout-button, .wc-proceed-to-checkout .button, .woocommerce-mini-cart__buttons .checkout, #header .header-button .button, .lla-knop--goud, .fkk-m-knop:not(:disabled), .fkk-m-plus, .fkk-rij__knop, #main-menu .nav-sidebar .button, .lla-koop-aanbevolen .fkk-rij__knop, .product-small .add-to-cart-button .button.primary), html.bf26 body.leno-look :is(.button.primary:not(.is-outline), .button.alt, #header .header-button .button, .lla-knop--goud) :is(span, i), html.bf26 body.leno-look .footer-wrapper a.lla-knop--goud, html.bf26 body.leno-look .lla-voet a.lla-knop--goud { color: #0a0a0b !important; } html.bf26 body.leno-look .badge-inner.on-sale, html.bf26 body.leno-look .badge-inner.on-sale .onsale, html.bf26 body.leno-look .lla-badge .onsale { color: #0a0a0b !important; } html.bf26 body.leno-look .fkk-m-knop:disabled, html.bf26 body.leno-look .lla-mu-kassa .fkk-m-knop:disabled { background: var(--bf26-d-kaart2) !important; color: #8b8b94 !important; } html.bf26 body.leno-look :is(.fkk-m-som, .fkk-m-som span, .fkk-m-teller, .fkk-sheet__huidig-prijs) { color: var(--bf26-d-kop) !important; } html.bf26 body.leno-look .aku-kleur-switch__prijs, html.bf26 body.leno-look .aku-kleur-switch__prijs .amount, html.bf26 body.leno-look .fkk-kaart__prijs, html.bf26 body.leno-look .fkk-kaart__meer { color: var(--bf26-d-grijs) !important; } html.bf26 body.leno-look .product-small .col-inner, html.bf26 body.leno-look .has-shadow .product-small .col-inner, html.bf26 body.leno-look .row-box-shadow-1 .product-small .col-inner { background: transparent !important; box-shadow: none !important; } html.bf26 body.leno-look .product-small .add-to-cart-button .button, html.bf26 body.leno-look .product-small .add-to-cart-button a.button.is-outline { background: var(--lla-goud) !important; border-color: var(--lla-goud) !important; color: #0a0a0b !important; } html.bf26 body.leno-look .product-small .add-to-cart-button .button:hover { background: #d9b27f !important; } html.bf26 body.leno-look .product-small .add-to-cart-button .button i { color: #0a0a0b !important; } html.bf26 body.leno-look .lla-review__foto { background: var(--bf26-d-kaart2) !important; } html.bf26 body.leno-look .woocommerce-Tabs-panel .lla-pd-voordeel__nr.lla-pd-voordeel__nr.lla-pd-voordeel__nr.lla-pd-voordeel__nr.lla-pd-voordeel__nr, html.bf26 body.leno-look .lla-pd-voordeel__nr { color: #0a0a0b !important; } html.bf26 body.leno-look :is(.custom-product-page p.stock, .woocommerce-variation-availability p.stock, p.stock) { background: rgba(255, 255, 255, .06) !important; border-color: var(--bf26-d-rand2) !important; } html.bf26 body.leno-look p.stock.in-stock[class], html.bf26 body.leno-look .lla-pil--laatste { color: #ff9b93 !important; } html.bf26 body.leno-look .woocommerce-mini-cart-item img { border-radius: 8px; } html.bf26 body.leno-look .ux-mini-cart-footer, html.bf26 body.leno-look .cart-popup-inner--sticky .ux-mini-cart-footer { background: #0f0f11 !important; border-top: 1px solid var(--bf26-d-rand2) !important; box-shadow: none !important; } html.bf26 .nav-sidebar .ti-widget, html.bf26 pre.ti-widget { background: transparent !important; } /* Google-score (Trustindex) in het donkere mobiele menu: de widget zet tekst zwart (2-11). */ html.bf26 .nav-sidebar .ti-widget .ti-header :is(span, strong), html.bf26 #main-menu .ti-widget .ti-header :is(span, strong) { color: var(--bf26-d-tekst) !important; } /* ---------------------------------------------------------------- ronde 2: BF-prijs overal, activeren, heldere uit-stand */ html.bf26 .bf26-prijs { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; } html.bf26 .bf26-prijs del { color: #8b8b94 !important; font-weight: 400; font-size: .85em; text-decoration-color: rgba(255, 45, 45, .8); } html.bf26 .bf26-prijs ins, html.bf26 .bf26-prijs .bf26-prijs__bf { color: var(--bf26-geel) !important; font: 900 1.15em/1.1 var(--bf26-display); text-decoration: none; } html.bf26 .bf26-prijs__pct { padding: 3px 7px; border-radius: 999px; background: var(--bf26-geel); color: #0a0a0b !important; font: 900 11px/1 var(--bf26-display); align-self: center; } /* Zubehör-rij (.fkk-rij) kleurt alle [class*=prijs] goud met !important: label hier sterker, anders goud op geel (2-11). */ html.bf26 .bf26-prijs__pct:not(#bf26-sterker) { color: #0a0a0b !important; } html.bf26 .bf26-prijs--klein ins { font-size: 1em; } html.bf26 .bf26-prijs--wagen ins { font-size: 1em; } html.bf26 body.leno-look .woocommerce-mini-cart-item .quantity .bf26-prijs, html.bf26 body.leno-look .shop_table .bf26-prijs { vertical-align: baseline; } html.bf26 body.leno-look .aku-kleur-switch__prijs .bf26-prijs, html.bf26 body.leno-look .fkk-kaart__prijs .bf26-prijs { justify-content: flex-end; } html.bf26 body.leno-look .fkk-kaart__prijs .bf26-prijs { justify-content: flex-start; } /* Productblok in de uit-stand: helder, met duidelijk klikbare knop */ html.bf26 .bf26-pblok__binnen { background: radial-gradient(520px 200px at 100% 0%, rgba(255, 229, 0, .2), transparent 70%), linear-gradient(170deg, #222228, #131316 75%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } html.bf26 .bf26-pblok__rand { background: conic-gradient(from var(--bf26-hoek), rgba(255, 229, 0, .55), var(--bf26-geel) 15%, rgba(255, 229, 0, .55) 32%, rgba(255, 229, 0, .35) 60%, var(--bf26-geel) 78%, rgba(255, 229, 0, .55)); } html.bf26 .bf26-pblok::after { opacity: 1; background: rgba(255, 229, 0, .38); } html.bf26 .bf26-pblok__acties .bf26-knop--primair { min-height: 58px; font-size: 18px; font-weight: 800; box-shadow: 0 0 0 0 rgba(255, 229, 0, .5), 0 12px 34px -8px rgba(255, 229, 0, .7); animation: bf26-knop-puls 2.4s ease-in-out infinite; } @keyframes bf26-knop-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 229, 0, .45), 0 12px 34px -8px rgba(255, 229, 0, .7); } 50% { box-shadow: 0 0 0 8px rgba(255, 229, 0, 0), 0 12px 34px -8px rgba(255, 229, 0, .7); } } html.bf26 .bf26-pblok__acties .bf26-knop--primair[aria-busy="true"] { opacity: .75; cursor: progress; } html.bf26 .bf26-pblok__acties .bf26-knop.is-actief { background: #1d6b34 !important; color: #fff !important; box-shadow: inset 0 0 0 2px #7ddc94, 0 10px 30px -10px rgba(125, 220, 148, .6) !important; animation: none; } html.bf26 .bf26-pblok__status { color: #9cf2b0; font-weight: 600; font-size: 14.5px; } html.bf26 .bf26-pblok__status.is-fout { color: #ffb4ad; } html.bf26 .bf26-pblok__spaar { color: #e4e4e7; } html.bf26 .bf26-pblok__van { color: #a1a1aa; } html.bf26 .bf26-pblok__klok > span { color: #a1a1aa; } html.bf26 .bf26-pblok__regels li { color: #e4e4e7; } /* Activeren-chips (topbalk, hero, categoriebanner, exit-venster) */ html.bf26 [data-bf26-activeer="code"].is-actief, html.bf26 .bf26-bar__code.is-actief { background: #1d6b34 !important; border: 1.5px solid #7ddc94 !important; color: #fff !important; } html.bf26 .bf26-bar__code.is-actief b, html.bf26 .bf26-chip.is-actief, html.bf26 .bf26-chip.is-actief * { color: #fff !important; } html.bf26 .bf26-bar__code [data-bf26-activeer-tekst] { display: inline-flex; align-items: center; gap: 6px; } html.bf26 .bf26-wbanner__noch { flex: none; color: var(--bf26-d-grijs); font-size: 13.5px; } html.bf26 body.leno-look .bf26-mini-korting { border-top: 0 !important; padding-top: 0 !important; color: #9cf2b0 !important; } html.bf26 body.leno-look .bf26-mini-korting strong, html.bf26 body.leno-look .bf26-mini-korting span { color: #9cf2b0 !important; } html.bf26 body.leno-look .bf26-mini-totaal { border-top: 0 !important; padding-top: 0 !important; } html.bf26 body.leno-look .bf26-mini-totaal span { color: #fff !important; font-weight: 800; } @media (prefers-reduced-motion: reduce) { html.bf26 .bf26-pblok__acties .bf26-knop--primair { animation: none; } } /* ---------------------------------------------------------------- ronde 3: activeer-kaart in mini-cart en winkelwagen */ html.bf26 .bf26-wk { margin: 14px 0 12px; } html.bf26 .bf26-wk__kaart { display: flex; align-items: center; gap: 12px; padding: 14px 14px 13px; border-radius: 14px; background: radial-gradient(360px 120px at 0% 0%, rgba(255, 229, 0, .16), transparent 70%), #17171b; box-shadow: inset 0 0 0 1px rgba(255, 229, 0, .35); } html.bf26 .bf26-wk__tekst { flex: 1 1 auto; min-width: 0; } html.bf26 .bf26-wk__label { margin: 0 0 4px; color: var(--bf26-geel); font: 800 10.5px/1 "Inter", sans-serif; letter-spacing: .16em; } html.bf26 .bf26-wk__kop { display: flex; align-items: center; gap: 6px; margin: 0 0 5px; color: #fff; font: 800 15.5px/1.25 "Inter", sans-serif; } html.bf26 .bf26-wk__regel { color: #c4c4cc; font: 500 12.5px/1.45 "Inter", sans-serif; } html.bf26 .bf26-wk__regel b { color: #fff; } html.bf26 .bf26-wk__klok { display: inline-block; white-space: nowrap; } html.bf26 .bf26-wk .bf26-klok--tekst { display: inline-flex; gap: 2px; vertical-align: baseline; } html.bf26 .bf26-wk .bf26-klok--tekst .bf26-klok__deel { flex-direction: row; align-items: baseline; gap: 1px; } html.bf26 .bf26-wk .bf26-klok--tekst .bf26-klok__getal { font-size: 12.5px; color: #fff; } html.bf26 .bf26-wk .bf26-klok--tekst .bf26-klok__eenheid { margin: 0 3px 0 0; font-size: 10px; letter-spacing: 0; text-transform: none; color: #a1a1aa; } html.bf26 .bf26-wk .bf26-klok--tekst .bf26-klok__sep { display: none; } html.bf26 .bf26-wk__knop { flex: none; min-height: 40px; margin: 0; padding: 0 18px; border: 0; border-radius: 999px; background: var(--bf26-geel); color: #0a0a0b; font: 800 14px/1 "Inter", sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; box-shadow: 0 8px 24px -8px rgba(255, 229, 0, .7); } html.bf26 .bf26-wk__knop:hover { background: #fff27a; } html.bf26 .bf26-wk__knop[aria-busy="true"] { opacity: .7; } html.bf26 .bf26-wk.is-actief .bf26-wk__kaart { box-shadow: inset 0 0 0 1px rgba(125, 220, 148, .45); background: radial-gradient(360px 120px at 0% 0%, rgba(125, 220, 148, .14), transparent 70%), #17171b; } html.bf26 .bf26-wk.is-actief .bf26-wk__kop { color: #9cf2b0; } html.bf26 .bf26-wk__vink { width: 16px; height: 16px; flex: none; border-radius: 50%; background: #7ddc94 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%230a0a0b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; } html.bf26 .bf26-wk__code { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 10px 12px; border: 1.5px dashed rgba(255, 229, 0, .5); border-radius: 12px; color: #e4e4e7; font: 500 13.5px/1.3 "Inter", sans-serif; } html.bf26 .bf26-wk__code b { color: var(--bf26-geel); letter-spacing: .06em; } html.bf26 .bf26-wk__min { color: #9cf2b0; font-weight: 800; white-space: nowrap; } html.bf26 body.leno-look .woocommerce-mini-cart__total:empty, html.bf26 .bf26-leeg-p:empty { display: none !important; } html.bf26 .bf26-wt { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 10px; margin: 6px 0 12px; } html.bf26 .bf26-wt__label { color: #e4e4e7; font-weight: 600; } html.bf26 .bf26-wt__bedragen { justify-self: end; white-space: nowrap; } html.bf26 .bf26-wt__bedragen del { color: #8b8b94; font-size: 14px; } html.bf26 .bf26-wt__bedragen b { color: #fff; font: 900 22px/1 var(--bf26-display); } html.bf26 .bf26-wt__spaar { grid-column: 1 / -1; justify-self: end; color: #7ddc94; font-weight: 700; font-size: 14px; } html.bf26 body.leno-look .bf26-spaar-rij th, html.bf26 body.leno-look .bf26-spaar-rij td { color: #7ddc94 !important; } html.bf26 body.leno-look .bf26-spaar-rij del { color: #8b8b94 !important; margin-right: 6px; } @media (max-width: 400px) { html.bf26 .bf26-wk__kaart { flex-wrap: wrap; } html.bf26 .bf26-wk__knop { width: 100%; } } /* ronde 4: euro-besparing prominent */ html.bf26 .bf26-spaarpil { display: inline-flex; align-items: center; align-self: flex-start; margin-top: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(74, 190, 110, .16); box-shadow: inset 0 0 0 1px rgba(125, 220, 148, .45); color: #9cf2b0 !important; font: 800 13px/1.2 "Inter", sans-serif; white-space: nowrap; } html.bf26 .bf26-spaarpil--klein { display: flex; width: max-content; margin-top: 5px; font-size: 11.5px; padding: 3px 8px; } html.bf26 .bf26-prijs .bf26-spaarpil { flex-basis: auto; } html.bf26 .bf26-badge.is-geplaatst { white-space: nowrap; } @media (max-width: 640px) { html.bf26 .bf26-spaarpil { font-size: 12px; padding: 3px 8px; } html.bf26 .bf26-badge.is-geplaatst { font-size: 12px; } } /* ronde 5: hoofdprijs met BF-prijs, bestelknop met BF-prijs */ html.bf26 .bf26-hoofdprijs { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; } html.bf26 .bf26-hoofdprijs del { color: #8b8b94 !important; font-size: .55em; font-weight: 400; } html.bf26 .bf26-hoofdprijs ins { color: var(--bf26-geel) !important; text-decoration: none; font-weight: 800; } html.bf26 .bf26-hoofdprijs .bf26-spaarpil { align-self: center; font-size: 14px; } html.bf26 .bf26-hoofdprijs__code { flex-basis: 100%; color: #a1a1aa !important; font-size: 13px !important; font-weight: 500; } html.bf26 .bf26-knopprijs { font-weight: 800; } @media (max-width: 520px) { html.bf26 .bf26-knopprijs { display: none; } } html.bf26 .sticky-add-to-cart .bf26-knopprijs { display: none; } /* ronde 6: één prijs bovenaan, actiekaart zonder prijzen met grotere klok en knop */ html.bf26 .bf26-hoofdprijs__pct { align-self: center; font-size: 15px; padding: 5px 10px; } html.bf26 .bf26-hoofdprijs__code { color: #a1a1aa !important; } html.bf26 body.bf26-actie .product-price-container .woocommerce-price-suffix { display: none; } html.bf26 .bf26-pblok__kop { margin-bottom: 14px; } html.bf26 .bf26-pblok__chip { background: var(--bf26-geel) !important; color: #0a0a0b !important; border-color: var(--bf26-geel) !important; font-size: 13px; padding: 4px 10px; } html.bf26 .bf26-pblok__klok { border-top: 0; padding-top: 0; justify-content: flex-start; } html.bf26 .bf26-pblok__klok > span { display: none; } html.bf26 .bf26-pblok__klok .bf26-klok--mid { width: 100%; justify-content: space-between; } html.bf26 .bf26-pblok__klok .bf26-klok--mid .bf26-klok__deel { flex: 1 1 0; padding: 12px 6px 9px; } html.bf26 .bf26-pblok__klok .bf26-klok--mid .bf26-klok__getal { font-size: 34px; } html.bf26 .bf26-pblok__klok .bf26-klok--mid .bf26-klok__eenheid { font-size: 11px; margin-top: 6px; } html.bf26 .bf26-pblok__klok .bf26-klok--mid .bf26-klok__sep { font-size: 28px; padding-top: 12px; } html.bf26 .bf26-pblok__acties .bf26-knop--primair { min-height: 64px; font-size: 20px; } /* ronde 7: de BF-kaart is de prijs; de prijs bovenaan weg op BF26-producten */ html.bf26 body.bf26-actie .product-info .product-price-container, html.bf26 body.bf26-actie .custom-product-page .product-price-container:not(.sticky-add-to-cart *) { display: none !important; } html.bf26 .bf26-pblok { margin-top: 10px; } html.bf26 .bf26-pblok__pillen { display: inline-flex; align-items: center; gap: 8px; } html.bf26 .bf26-pblok__btw { color: #a1a1aa; font: 500 12.5px/1 "Inter", sans-serif; } html.bf26 .bf26-pblok__spaar { margin: 8px 0 4px; } html.bf26 .bf26-pblok__spaar b { display: inline-flex; padding: 4px 12px; border-radius: 999px; background: rgba(74, 190, 110, .18); box-shadow: inset 0 0 0 1px rgba(125, 220, 148, .5); color: #9cf2b0; font: 900 20px/1.1 var(--bf26-display); } html.bf26 .bf26-pblok__reken { margin: 0 0 16px; color: #a1a1aa; font: 500 13px/1.4 "Inter", sans-serif; } /* ronde 8: categorietegels en mega-menu-tegels */ html.bf26 .bf26-tegel { box-shadow: 0 0 0 1.5px rgba(255, 229, 0, .55), 0 14px 40px -16px rgba(255, 229, 0, .45) !important; } html.bf26 .bf26-tegel:hover { box-shadow: 0 0 0 2px var(--bf26-geel), 0 18px 50px -14px rgba(255, 229, 0, .6) !important; } html.bf26 .lla-mega-tegel.bf26-tegel { border-radius: 12px; } html.bf26 .lla-mega-tegel__foto { position: relative; } html.bf26 .bf26-tegel__badge { position: absolute; top: 10px; left: 10px; z-index: 3; padding: 6px 10px; border-radius: 999px; background: #0a0a0b; color: var(--bf26-geel) !important; box-shadow: 0 0 0 1.5px var(--bf26-geel); font: 900 13px/1 var(--bf26-display); white-space: nowrap; pointer-events: none; } html.bf26 .lla-mega-tegel .bf26-tegel__badge { top: 6px; left: 6px; padding: 4px 7px; font-size: 10.5px; } html.bf26 .bf26-tegel__vanaf { display: block; margin-top: 4px; color: #fff !important; font: 600 14px/1.3 "Inter", sans-serif; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); } html.bf26 .bf26-tegel__vanaf b { color: var(--bf26-geel); font-weight: 900; } html.bf26 .bf26-tegel__vanaf small { color: #d4d4d8; font-size: 11.5px; font-weight: 500; } html.bf26 .lla-mega-tegel .bf26-tegel__vanaf { font-size: 12px; text-shadow: none; } html.bf26 .bf26-wk__weg { display: inline-block; min-height: 0; margin: 6px 0 0; padding: 2px 0; border: 0; background: none; color: #a1a1aa; font: 500 12px/1.3 "Inter", sans-serif; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } html.bf26 .bf26-wk__weg:hover { color: #ff9b93; } /* Hero-band loopt schuin over het volgende blok heen, zonder afknippen */ html.bf26 .bf26-hero { overflow: visible; overflow-x: clip; overflow-y: visible; z-index: 3; } html.bf26 .bf26-hero__band { z-index: 6; margin: 0 -4% -34px; transform: rotate(-1.6deg) translateY(8px); } html.bf26 .bf26-hero + * { position: relative; z-index: 1; margin-top: 40px !important; } /* ---------------------------------------------------------------- skincheck 30-10: nieuwe basis-elementen onder de laag */ /* Levertijdregel op de productpagina (lla_lever_regel, 28-10) is een groene statusregel, geen donker kader met witte tekst. */ html.bf26 body.leno-look .product-short-description { background: none !important; box-shadow: none !important; color: var(--lla-groen) !important; } html.bf26 body.leno-look .product-short-description [style*="color"] { color: inherit !important; } html.bf26 body.leno-look .product-short-description.is-later { color: #f0b35e !important; } html.bf26 body.leno-look .product-short-description.is-later::before { box-shadow: 0 0 0 4px rgba(240, 179, 94, .14); } /* "Muster bestellen" onder de koopknop (300 cm-panelen): basis zet wit vlak + var(--lla-inkt), op zwart = witte tekst op wit. */ html.bf26 body.leno-look .custom-product-page a.button.secondary.is-outline.expand { background: transparent !important; color: var(--bf26-d-kop) !important; border-color: var(--bf26-d-rand2) !important; } html.bf26 body.leno-look .custom-product-page a.button.secondary.is-outline.expand:hover { border-color: var(--lla-goud) !important; color: var(--lla-goud) !important; } /* Muster-kiezer: de "+"-knop werd donker op donker (onzichtbaar); goud met donkere "+" zoals de andere goudknoppen. */ html.bf26 body.leno-look .fkk-m-qty button.fkk-m-plus:not(:disabled) { background: var(--lla-goud) !important; border-color: var(--lla-goud) !important; color: #0a0a0b !important; } /* Uitklapwagen: "Zur Kasse" bij hover geel op geel (algemene link-hover van de laag); tekst blijft zwart. */ html.bf26 body.leno-look .lla-wg .lla-wg__voet a.lla-wg__kassa.lla-wg__kassa, html.bf26 body.leno-look .lla-wg .lla-wg__voet a.lla-wg__kassa.lla-wg__kassa:hover { color: #0a0a0b !important; } /* Uitklapwagen: de basis toont per regel al "Spare € X"; geen tweede besparingslabel van de laag. */ html.bf26 .lla-wg__regel .bf26-spaarpil--klein { display: none !important; } /* Uitklapwagen: coderegel (Rabattcode BF26) leesbaar op zwart; basisgoud #9a7140 haalt geen 4,5:1. */ html.bf26 body.leno-look .lla-wg__som-rij--code { color: var(--lla-goud, #ca9f62); } /* Uitklapwagen: "Mit BF26: X € pro Stück" onder de regel zolang BF26 niet op de wagen staat (Leon 1-11-2026). */ html.bf26 .bf26-mc-hint { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--bf26-geel); } html:not(.bf26) .bf26-mc-hint { display: none !important; }