/* ============================================================
BSS huisstijl 2.0 (F0.7): productpagina
Delta op de sitebrede tokenlaag (HUISSTIJL 2.0 L2 in wp-custom-css).
Alles hangt onder body.bss-pdp, dus buiten de productpagina raakt
dit bestand niets.
VIER DINGEN DIE HIER MET OPZET STAAN, elk na een eerdere fout op deze site:
1. Elke color-mix heeft een gewone kleur ervoor. Oudere WebKit kent
color-mix niet en valt anders terug op niets.
2. De onthul-terugval voor browsers zonder scroll-timelines. Zonder deze
regel is de halve pagina onzichtbaar in Firefox onder 144 en Safari
onder 26, precies zoals in juli op 21 categoriepagina's gebeurde.
3. Eigen koppen krijgen minstens twee klassen diep, want Astra zet zelf
een kleur op h1 tot en met h6 en wint anders.
4. De koopknop staat op !important, want de sitebrede regel voor
.single_add_to_cart_button staat dat ook.
============================================================ */
body.bss-pdp{background:#060809;background:var(--void);color:#e9e4d8;color:var(--inkt)}
body.bss-pdp .site-content,
body.bss-pdp .ast-container,
body.bss-pdp #content{background:transparent}
/* DE DONKERE BODY IS NIET GENOEG, en dat is precies de val waar dit blok in liep:
Astra geeft de contentkaart op een productpagina een eigen WITTE achtergrond
(.ast-separate-container .ast-woocommerce-container en .ast-article-single).
De body was dus donker, maar de bezoeker zag een wit vlak met onze lichte
letters erop, dus nagenoeg onleesbaar.
!important is hier geen luiheid: Astra's regel is
`.ast-separate-container .ast-article-single:not(.ast-related-post)`, en die
drie klassen verslaan elke nette klasse-regel die wij ervoor kunnen bedenken.
Zonder !important bleef het vlak wit, gemeten op de echte pagina.
LET OP DE SELECTOR: `.pdp.ast-article-single` en niet `.ast-article-single`.
Astra hangt diezelfde klasse namelijk OOK op elke producttegel in de blokken
onderaan de pagina. Met de brede versie werden die tegels doorzichtig en
verloren ze hun paneel; gemeten op de echte pagina. */
body.bss-pdp .ast-woocommerce-container,
body.bss-pdp .pdp.ast-article-single,
body.bss-pdp .site-main > .ast-container{
background-color:transparent !important;
box-shadow:none !important;
}
/* Tekst die alleen voor een schermlezer bedoeld is. WordPress en Astra leveren
deze regel zelf, maar hij staat hier ook: valt hij ergens weg, dan schreeuwt
"Oorspronkelijke prijs was: 159,00" in koptekstformaat over de pagina. Dat
gebeurde in het eerste renderbewijs, en op een pagina met prijzen wil je die
afhankelijkheid niet. */
body.bss-pdp .screen-reader-text,
body.bss-pdp .sr-only{
position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
}
/* terugval voor browsers zonder scroll-timelines: laat alles gewoon zien */
@supports not (animation-timeline: view()){
body.bss-pdp .onthul.onthul{opacity:1;transform:none}
}
/* Week-1-fix 6 sep 2026 (analyse 5 sep, T1/T2): op telefoons geen scroll-reveal,
de translateY van 34px en de opacity 0 telden mee in de LCP en de CLS. */
@media (max-width:767px){
body.bss-pdp .onthul.onthul{opacity:1;transform:none;animation:none}
}
/* ============================================================
1. RAAMWERK
============================================================ */
body.bss-pdp .pdp{
display:block; /* verslaat de sitebrede flex-regel */
padding:clamp(28px,4vw,54px) 0 clamp(40px,6vw,80px);
}
/* DRIE LAGEN DIE ALLEMAAL DE TWEE KOLOMMEN MOETEN KUNNEN DRAGEN, en dit is de
kern van dit bestand.
Astra doet op deze pagina zelf al iets wat op de canon lijkt: het addon-script
maakt bij het laden een element `.ast-product-img-summary-wrapper`, verhuist de
galerij en het koopblok daarin, zet de galerij op sticky en verplaatst de
actiebadge de galerij in. Daaromheen zit zijn eigen rij `#ast-sticky-row-summary`,
en daaromheen onze `.pdp-split`.
Welke van de drie de twee kolommen draagt, hangt af van of dat script draait
(JavaScript uit, delayed JS, of de instelling ooit uit). Daarom krijgen ze
alle drie hetzelfde raster: welke laag het ook wordt, de bezoeker ziet twee
kolommen. De lagen die geen kolommen dragen hebben elk een kind en vallen dus
vanzelf terug op een kolom. */
body.bss-pdp .pdp-split,
body.bss-pdp .pdp-split > .ast-sticky-row,
body.bss-pdp .ast-product-img-summary-wrapper{
display:grid;
grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
gap:clamp(28px,4vw,64px);
align-items:start;
}
body.bss-pdp .pdp-split > .ast-sticky-row,
body.bss-pdp .ast-product-img-summary-wrapper{grid-column:1 / -1}
/* Onder de breekgrens haalt het Astra-script de actiebadge weer uit de galerij en
hangt hij hem terug in de rij. Alle drie de lagen staan daarom op relative, zodat
die badge waar hij ook belandt een ankerpunt vlakbij heeft en niet naar de
bovenhoek van de pagina vliegt. */
body.bss-pdp .pdp-split,
body.bss-pdp .pdp-split > .ast-sticky-row,
body.bss-pdp .ast-product-img-summary-wrapper{position:relative}
/* Astra zet de hoogte van zijn omhulling als vast aantal pixels, berekend bij het
laden uit de hoogte van het koopblok. Bij ons staat het hele verhaal in die
kolom, dus die maat klopt na elke herberekening van de tekst niet meer en laat
een gat of een afkapping achter. Het raster regelt de hoogte prima zelf. */
body.bss-pdp .ast-product-img-summary-wrapper{height:auto !important}
@media (max-width:920px){
body.bss-pdp .pdp-split,
body.bss-pdp .pdp-split > .ast-sticky-row,
body.bss-pdp .ast-product-img-summary-wrapper{grid-template-columns:minmax(0,1fr)}
}
body.bss-pdp .pdp-split > *,
body.bss-pdp .ast-product-img-summary-wrapper > *{min-width:0}
/* De meetstaat en het verhaal hangen aan woocommerce_after_single_product_summary
en komen daarmee IN de laag hierboven terecht. Zonder deze regel worden het
gewone rasteritems: gemeten op de echte pagina stonden ze naast elkaar in
kolommen van 334 en 318 pixels, met 37 tekens per regel. Ze horen over beide
kolommen te lopen, net als de rij eromheen.
Gemeten op de echte pagina staat de ouder vast: DIV.ast-sticky-row, met
kolommen van 422,1 en 405,5 pixels. De andere twee lagen staan er toch bij,
want welke van de drie het raster draagt hangt af van of het Astra-script
draait, en dat wisselt met delayed JS. */
body.bss-pdp .pdp-split > .pdp-sectie,
body.bss-pdp .ast-sticky-row > .pdp-sectie,
body.bss-pdp .ast-product-img-summary-wrapper > .pdp-sectie{grid-column:1 / -1;width:100%}
/* En de binnenmarge van .wrap hier weghalen, want deze twee secties zitten een
laag dieper dan de FAQ en die marge telt dus dubbel. Gemeten zonder deze regel:
op 390 werden ze 266 breed terwijl de rest 302 is, en op desktop stond hun
linkerrand op 321 tegen 277 voor de galerij en de FAQ. */
body.bss-pdp .pdp-split > .pdp-sectie > .wrap,
body.bss-pdp .ast-sticky-row > .pdp-sectie > .wrap,
body.bss-pdp .ast-product-img-summary-wrapper > .pdp-sectie > .wrap{
padding-left:0;padding-right:0;max-width:none;
}
/* ============================================================
2. DE VITRINE (WooCommerce-galerij in een papieren vak)
============================================================ */
/* De galerij loopt op desktop mee met het lezen. Astra zet daar zelf een
sticky-positie op met een inline stijl en een eigen bovenmarge uit zijn
instellingen; die marge overschrijven we, want onze kopbalk is 64px hoog en
anders schuift de galerij eronder. Inline stijl verslaan vraagt !important:
dat is hier geen luiheid maar de enige route. */
body.bss-pdp .woocommerce-product-gallery{
position:relative;
float:none;width:auto;margin:0;
background:#ffffff;background:var(--papier);
border:1px solid #1c242e;border:1px solid var(--lijn);
border-radius:16px;overflow:hidden;padding:clamp(14px,2vw,26px);
}
body.bss-pdp .ast-product-img-summary-wrapper > .woocommerce-product-gallery{
position:sticky !important;top:84px !important;
}
@media (max-width:920px){
body.bss-pdp .ast-product-img-summary-wrapper > .woocommerce-product-gallery{
position:relative !important;top:auto !important;
}
}
body.bss-pdp .woocommerce-product-gallery img{border-radius:10px}
body.bss-pdp .woocommerce-product-gallery__image img{display:block;width:100%;max-width:100%;height:auto}
body.bss-pdp .woocommerce-product-gallery__wrapper{margin:0}
/* Week-1-fix 6 sep 2026 (analyse 5 sep, T1): CLS 0,65 op mobiel. Voor de
galerij-JS (uitgesteld) draait, stonden alle galerijfoto's gestapeld onder
elkaar en stond de galerij op inline opacity 0; na init bleef er een over en
schoof de hele pagina omhoog. Voor init (figure is dan een direct kind van de
galerij) tonen we alleen de eerste foto en de galerij zelf meteen. Na init zit
de figure in .flex-viewport en matcht deze selector niet meer. */
body.bss-pdp .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+2){display:none}
body.bss-pdp .woocommerce-product-gallery{opacity:1 !important}
/* Trace-fix 7 sep 2026 (CLS 0,65 op mobiel, gemeten met echte throttling): voor de
Astra-init staan galerij en koopblok door WooCommerce's order:1 ONDER de secties in
het grid van .ast-sticky-row; de init verpakt ze in .ast-product-img-summary-wrapper
en tilt ze naar boven, waardoor de meetstaat 681 px zakt. Daarom voor de init:
1. galerij en koopblok bovenaan (order:-1), zoals na de init;
2. het beeldvak op de hoogte van de latere .flex-viewport (260 px) en de Astra-
thumbnails als rij van 80 px, zodat de galerij voor en na de init 387 px is;
3. de koopblok-marge gelijk aan de wrapper-gap na de init (34 px).
Alle selectors werken alleen op de pre-init structuur (directe kinderen); na de
init zit de figure in .flex-viewport en matchen ze niet meer. Gemeten op een
scriptloze kopie: posities voor en na de init gelijk tot op de pixel. */
body.bss-pdp .pdp-split > .ast-sticky-row > .woocommerce-product-gallery,
body.bss-pdp .pdp-split > .ast-sticky-row > .summary{order:-1}
body.bss-pdp .pdp-split > .ast-sticky-row > .summary{margin-top:34px}
body.bss-pdp .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper{height:260px;overflow:hidden;margin-bottom:17px}
body.bss-pdp .ast-single-product-thumbnails > .woocommerce-product-gallery-thumbnails__wrapper{display:flex;gap:10px;height:80px;overflow:hidden}
body.bss-pdp .ast-single-product-thumbnails > .woocommerce-product-gallery-thumbnails__wrapper > .ast-woocommerce-product-gallery__image{width:80px;height:80px;flex:0 0 80px}
body.bss-pdp .ast-single-product-thumbnails > .woocommerce-product-gallery-thumbnails__wrapper img{width:80px;height:80px;object-fit:cover}
body.bss-pdp .woocommerce-product-gallery .flex-control-thumbs{margin-top:12px;gap:8px;display:flex;flex-wrap:wrap;padding:0}
body.bss-pdp .woocommerce-product-gallery .flex-control-thumbs li{list-style:none;width:64px;margin:0}
body.bss-pdp .woocommerce-product-gallery .flex-control-thumbs img{
display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;
border:1px solid #e7e3d9;border:1px solid var(--lijn-licht);border-radius:8px;
cursor:pointer;
}
/* CLS-fix desktop 17 okt 2026 (Search Console: CLS 0,19 op desktop, 35 URL's,
vooral /en_us/product/). De trace-fix hierboven is op 390 px afgesteld en klopt
op desktop niet: daar is het beeldvak na de init 370 px (vierkant) en niet 260,
en staat het koopblok naast de galerij, dus zonder bovenmarge. Daarnaast twee
tussenstanden van de init: de thumbnail-slider start eerder dan de hoofdgalerij
en is dan honderden pixels hoog, en de hoofd-.flex-viewport staat een frame lang
op de hoogte van alle foto's samen tot flexslider zijn inline hoogte zet (die
wint dan van de aspect-ratio). Gemeten op 1024, 1366 en 1920: CLS 0,15 tot 0,52
naar 0,01 tot 0,04, eindweergave gelijk. Mobiel valt buiten deze regels.
Het andere deel van de fix (TranslatePress maakt het koopblok niet meer leeg)
staat in WPCode 16975. */
@media (min-width:921px){
body.bss-pdp .pdp-split > .ast-sticky-row > .summary{margin-top:0}
body.bss-pdp .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper{height:auto;aspect-ratio:1}
body.bss-pdp .woocommerce-product-gallery > .flex-viewport{aspect-ratio:1}
body.bss-pdp .ast-single-product-thumbnails > .flex-viewport{max-height:81px;overflow:hidden}
}
/* De actiepenning. Astra verplaatst zijn eigen badge bij het laden de galerij in
en houdt hem daar ook bij het wisselen van schermbreedte; wij hoeven er alleen
de huisstijl op te zetten. Draait dat script niet, dan staat de badge nog in
het productblok en zetten we hem daar netjes rechtsboven neer. */
/* De penning staat LINKSBOVEN en niet rechtsboven zoals de canon. Rechtsboven zit
namelijk het vergrootglas van de galerij, en die twee liepen door elkaar heen
(gemeten op 390px: de penning liep tot 330, het vergrootglas begon op 292). */
body.bss-pdp .ast-onsale-card,
body.bss-pdp .pdp span.onsale{
position:absolute;top:16px;left:16px;right:auto;bottom:auto;z-index:3;
width:auto;height:auto;min-width:0;min-height:0;
display:inline-block;line-height:1.4;
font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
background:#14181d;background:var(--inkt-donker);
color:#f2aa00;color:var(--amber);
padding:6px 12px;border-radius:999px;
}
/* De eigen objectregel is vervallen; de meta-regel van WooCommerce doet dat werk
nu (zie de toelichting bij .product_meta hieronder). Deze regel blijft staan om
een oude, nog gecachte pagina netjes op te vangen. */
body.bss-pdp .pdp-obj{display:none}
/* ============================================================
3. HET KOOPBLOK
============================================================ */
/* WooCommerce zet zelf `float:left; width:48%` op de galerij en het koopblok, via
een selector met een id erin (`.woocommerce #content div.product div.images`).
Die wint van elke gewone klasse-regel, ook van een lange. Zonder !important
krijgen onze twee kolommen dus wel de juiste breedte, maar vult de inhoud er
nog geen half. Erger: de galerij-slider rekent zijn maten uit bij het starten,
dus dan staat de hele vitrine ook nog eens op halve grootte vast. */
body.bss-pdp .pdp .woocommerce-product-gallery,
body.bss-pdp .pdp .summary.entry-summary{
float:none !important;width:auto !important;clear:none !important;
}
body.bss-pdp .summary.entry-summary{margin:0;display:block}
/* Wat Astra hier dubbel doet: de categorieregel staat al in onze eyebrow en de
voorraadregel in ons lampje. Geen `.summary`-voorvoegsel in de selector: Astra
verhuist elementen bij het laden, en een regel die van een vaste plek in de DOM
uitgaat werkt dan de ene keer wel en de andere keer niet. */
body.bss-pdp .single-product-category,
body.bss-pdp .ast-stock-detail{display:none !important}
body.bss-pdp .woocommerce-breadcrumb{
font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
color:#97a0ac;color:var(--inkt-dim);margin:0 0 18px;
}
body.bss-pdp .woocommerce-breadcrumb a{color:#97a0ac;color:var(--inkt-dim)}
body.bss-pdp .woocommerce-breadcrumb a:hover{color:#f2aa00;color:var(--amber)}
/* DE VOLGORDE IN HET KOOPBLOK STAAT HIER, NIET IN PHP, en dat is een besluit met
een reden. Astra registreert titel, prijs, korte omschrijving, koopformulier en
meta NIET op de haak van WooCommerce (gemeten: has_action geeft voor alle vijf
niets terug), dus met prioriteiten valt er niets te sturen. Wat wel vastligt is
welke elementen er zijn. Die zetten we hier op hun plek.
Alles wat we niet kennen krijgt order 50 en belandt dus onderaan het koopblok,
voor de meta-regel: een plugin die er later iets bij hangt kan de indeling zo
niet overhoop gooien.
Toegankelijkheid: alleen ONZE eigen twee elementen (lampje en chips) schuiven
ten opzichte van de DOM-volgorde, en die bevatten geen links of knoppen. De
focusvolgorde verandert dus niet. */
body.bss-pdp .koopblok{display:flex;flex-direction:column}
body.bss-pdp .koopblok > *{order:50}
body.bss-pdp .koopblok > .woocommerce-breadcrumb{order:10}
body.bss-pdp .koopblok > .eyebrow{order:20}
body.bss-pdp .koopblok > .product_title{order:30}
body.bss-pdp .koopblok > .price{order:40}
body.bss-pdp .koopblok > .lampje{order:42}
body.bss-pdp .koopblok > .woocommerce-product-details__short-description{order:44}
body.bss-pdp .koopblok > form.cart{order:46}
body.bss-pdp .koopblok > .koopchips{order:48}
body.bss-pdp .koopblok > .product_meta{order:60}
/* De meta-regel van WooCommerce is de objectregel uit de canon: artikelnummer,
zaal, tags en merk. Eerst probeerden we die te vervangen door een eigen regel in
de galerij, maar de haak daarvoor zit BINNEN de slider-strook en daar wordt zo'n
regel als extra dia meegesleept. Deze staat al op de goede plek en houdt ook de
merk- en taglinks in stand. */
body.bss-pdp .koopblok > .product_meta{
margin:18px 0 0;padding-top:14px;
border-top:1px dashed #1c242e;border-top:1px dashed var(--lijn);
font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
color:#97a0ac;color:var(--inkt-dim);
display:flex;flex-wrap:wrap;gap:6px 18px;
}
body.bss-pdp .koopblok > .product_meta a{color:#b8bfc9;color:var(--inkt-mono);text-decoration:none}
body.bss-pdp .koopblok > .product_meta a:hover{color:#f2aa00;color:var(--amber)}
body.bss-pdp .koopblok h1.product_title{
color:#e9e4d8;color:var(--inkt);
font-size:clamp(2rem,4.6vw,3.2rem);letter-spacing:-.015em;line-height:1.08;
margin:.22em 0 .18em;
}
/* prijs */
body.bss-pdp .koopblok p.price{
font-family:var(--mono);
display:flex;align-items:baseline;gap:.75em;flex-wrap:wrap;
margin:.5rem 0 .8rem;
color:#e9e4d8;color:var(--inkt);
font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:500;
}
body.bss-pdp .koopblok p.price del{
color:#97a0ac;color:var(--inkt-dim);
font-size:1rem;text-decoration:line-through;opacity:1;
}
body.bss-pdp .koopblok p.price ins{background:transparent;text-decoration:none;color:inherit}
body.bss-pdp .koopblok p.price .woocommerce-Price-currencySymbol{font-size:.7em;margin-right:.12em}
body.bss-pdp .koopblok .lampje{margin:0 0 4px}
body.bss-pdp .koopblok .lampje.uit i{background:#ff5d5d;background:var(--breuk);box-shadow:0 0 8px #ff5d5d}
/* korte omschrijving als lead */
body.bss-pdp .woocommerce-product-details__short-description{
color:#97a0ac;color:var(--inkt-dim);
margin:1.1rem 0 0;max-width:56ch;font-size:1rem;line-height:1.65;
}
body.bss-pdp .woocommerce-product-details__short-description strong{color:#e9e4d8;color:var(--inkt)}
body.bss-pdp .woocommerce-product-details__short-description a{color:#f2aa00;color:var(--amber)}
body.bss-pdp .woocommerce-product-details__short-description ul{margin:.7em 0 0;padding-left:1.1em}
body.bss-pdp .woocommerce-product-details__short-description li{margin:.3em 0}
/* ============================================================
4. HET KOOPFORMULIER
Van WooCommerce, alleen aangekleed. Niets hieronder verandert gedrag.
============================================================ */
body.bss-pdp form.cart{
display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;
margin:1.5rem 0 1.1rem;
}
/* DE AANTALKIEZER IS EEN LICHTE PIL, en dat is een omweg met een reden.
Astra vervangt bij het laden zijn eigen knopjes door en
, en de tekstkleur daarvan is met geen enkele regel te
overrulen: zelfs een inline `color` met !important haalt niets uit (getoetst
op de live pagina, in twee browsers, met en zonder extensies). Ze blijven dus
donkergrijs, en donkergrijs op ons donkere paneel is onleesbaar.
Wat WEL werkt is de achtergrond van de omhulling. Vandaar: lichte pil,
donkere glyphs. `overflow:hidden` knipt de vierkante hoeken van die twee
ankers netjes binnen de ronding. */
body.bss-pdp form.cart .quantity{
display:inline-flex;align-items:center;gap:2px;
background:#b8bfc9;background:var(--inkt-mono);
border:1px solid transparent;
border-radius:999px;padding:0;margin:0;overflow:hidden;
}
body.bss-pdp form.cart .quantity input.qty,
body.bss-pdp form.cart .quantity input[type=number]{
color:#0d1116;color:var(--paneel);
border:0;box-shadow:none;background:transparent;
}
body.bss-pdp form.cart .quantity .ast-qty-placeholder{
width:38px;height:38px;display:inline-grid;place-items:center;
color:#b8bfc9;color:var(--inkt-mono);
font-family:var(--mono);font-size:1.05rem;text-decoration:none;border-radius:50%;
transition:color .2s ease,background .2s ease;
}
body.bss-pdp form.cart .quantity .ast-qty-placeholder:hover{
color:#f2aa00;color:var(--amber);
background:#141312;background:color-mix(in srgb,var(--amber) 10%,transparent);
}
body.bss-pdp form.cart .quantity input.qty{
width:3.2em;min-height:38px;text-align:center;
background:transparent;border:0;box-shadow:none;
font-family:var(--mono);font-size:1rem;
/* donker, want de pil eromheen is licht (zie de toelichting hierboven) */
color:#0d1116;color:var(--paneel);
}
body.bss-pdp form.cart .quantity input.qty::-webkit-outer-spin-button,
body.bss-pdp form.cart .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
body.bss-pdp .koopblok button.single_add_to_cart_button,
body.bss-pdp form.cart button.single_add_to_cart_button{
flex:1;min-width:220px;
display:inline-flex;align-items:center;justify-content:center;gap:.7em;
border:0 !important;border-radius:999px;
padding:15px 30px;min-height:52px;
font-family:var(--sans);font-weight:700;font-size:1.02rem;letter-spacing:0;
background:#f7931a !important;
background:linear-gradient(90deg,var(--oranje),var(--amber)) !important;
color:#160e00 !important;
transition:transform .2s ease,box-shadow .2s ease;
}
body.bss-pdp .koopblok button.single_add_to_cart_button:hover,
body.bss-pdp form.cart button.single_add_to_cart_button:hover{
transform:translateY(-2px);
color:#160e00 !important;
box-shadow:0 10px 34px rgba(247,147,26,.38);
box-shadow:0 10px 34px color-mix(in srgb,var(--oranje) 38%,transparent);
}
/* Varianten. De tabel van WooCommerce zet label en keuzelijst in twee kolommen,
waardoor het label helemaal links tegen de rand plakt met een gat ertussen.
Hier staan ze onder elkaar, in een blok van hoogstens 380px. */
body.bss-pdp table.variations{width:100%;max-width:380px;border:0;margin:0 0 1rem;display:block}
body.bss-pdp table.variations tbody,
body.bss-pdp table.variations tr{display:block;width:100%}
body.bss-pdp table.variations th,
body.bss-pdp table.variations td{display:block;width:100%;border:0;padding:0;background:transparent;text-align:left}
body.bss-pdp table.variations th{padding:10px 0 5px}
body.bss-pdp table.variations th label{
font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
color:#97a0ac;color:var(--inkt-dim);
}
body.bss-pdp table.variations select,
body.bss-pdp .summary select{
background:#0d1116;background:var(--paneel);
border:1px solid #1c242e;border:1px solid var(--lijn);
border-radius:10px;min-height:44px;padding:6px 14px;width:100%;
font-family:var(--mono);font-size:.86rem;
color:#e9e4d8;color:var(--inkt);
}
body.bss-pdp .reset_variations{
font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
color:#97a0ac;color:var(--inkt-dim);
}
body.bss-pdp .woocommerce-variation-price{margin:.4rem 0 .8rem;font-family:var(--mono);color:#e9e4d8;color:var(--inkt)}
body.bss-pdp .woocommerce-variation-availability{margin:0 0 .6rem}
body.bss-pdp .woocommerce-variation-description{color:#97a0ac;color:var(--inkt-dim)}
body.bss-pdp .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;width:100%}
/* chips onder de knop */
body.bss-pdp .koopchips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 .4rem}
body.bss-pdp .koopchips .chip{
font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
color:#b8bfc9;color:var(--inkt-mono);
background:#0d1116;background:color-mix(in srgb,var(--paneel) 70%,transparent);
border:1px solid #1c242e;border:1px solid var(--lijn);
border-radius:999px;padding:7px 13px;
}
/* ============================================================
5. MEETSTAAT
============================================================ */
/* De marge hieronder gold toen dit blok nog in de koopkolom stond. In de brede
band eronder zorgt .pdp-sectie zelf voor de ruimte, dus daar staat hij op nul
(anders telt de afstand dubbel). */
body.bss-pdp .meetstaat{margin-top:clamp(34px,5vw,52px)}
body.bss-pdp .pdp-sectie .meetstaat,
body.bss-pdp .pdp-sectie .verhaal{margin-top:0}
/* De meetstaat leest als sleutel-waarde, dus hij hoeft de volle 885 pixels niet
te vullen: bij een tabel van die breedte staan naam en waarde zover uit elkaar
dat het oog de regel kwijtraakt. Zelfde leesmaat als het verhaal. */
body.bss-pdp .pdp-sectie .meetstaat{max-width:64ch}
body.bss-pdp .meetstaat .tabelvak{border:0;background:none;border-radius:0;margin:14px 0 0;overflow:visible}
body.bss-pdp .meetstaat table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.85rem}
body.bss-pdp .meetstaat caption{
text-align:left;padding:0 0 10px;
font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
color:#97a0ac;color:var(--inkt-dim);
}
body.bss-pdp .meetstaat th{
text-align:left;font-weight:400;padding:12px 0;
color:#97a0ac;color:var(--inkt-dim);
}
body.bss-pdp .meetstaat td{text-align:right;padding:12px 0;color:#e9e4d8;color:var(--inkt)}
body.bss-pdp .meetstaat tr{border-bottom:1px dashed #1c242e;border-bottom:1px dashed var(--lijn)}
body.bss-pdp .meetstaat tr:first-child{border-top:1px dashed #1c242e;border-top:1px dashed var(--lijn)}
@media (max-width:520px){
body.bss-pdp .meetstaat th,
body.bss-pdp .meetstaat td{display:block;text-align:left;padding:6px 0}
body.bss-pdp .meetstaat th{padding-top:12px}
body.bss-pdp .meetstaat td{padding-bottom:12px}
}
/* ============================================================
6. HET VERHAAL (de beschrijving)
============================================================ */
/* 64ch en niet meer. In de brede band meet 68ch met Ubuntu op 17 pixels zo'n 76
tekens per regel, en dat leest voor een lap tekst te lang; 64ch komt uit op
ongeveer 70. Gemeten met measureText op de echte letter, niet geschat. */
body.bss-pdp .verhaal{max-width:64ch;margin-top:clamp(38px,5vw,58px)}
body.bss-pdp .verhaal .eyebrow{margin-bottom:1.1rem}
body.bss-pdp .verhaal h2{color:#e9e4d8;color:var(--inkt);font-size:clamp(1.45rem,2.8vw,2rem);font-weight:700;margin:1.6em 0 .55em;line-height:1.16}
body.bss-pdp .verhaal h2:first-of-type{margin-top:0}
body.bss-pdp .verhaal h3{color:#e9e4d8;color:var(--inkt);font-size:1.16rem;font-weight:500;margin:1.8em 0 .5em}
body.bss-pdp .verhaal h4{color:#e9e4d8;color:var(--inkt);font-size:1.06rem;font-weight:500;margin:1.7em 0 .5em}
body.bss-pdp .verhaal p,
body.bss-pdp .verhaal li{color:#97a0ac;color:var(--inkt-dim)}
body.bss-pdp .verhaal p{margin:0 0 1.05em;line-height:1.68}
body.bss-pdp .verhaal ul,
body.bss-pdp .verhaal ol{margin:0 0 1.05em;padding-left:1.2em}
body.bss-pdp .verhaal li{margin:.35em 0;line-height:1.6}
body.bss-pdp .verhaal strong{color:#e9e4d8;color:var(--inkt)}
body.bss-pdp .verhaal a{
color:#f2aa00;color:var(--amber);
border-bottom:1px dashed rgba(242,170,0,.55);
border-bottom:1px dashed color-mix(in srgb,var(--amber) 55%,transparent);
}
body.bss-pdp .verhaal a:hover{border-bottom-style:solid}
body.bss-pdp .verhaal img{max-width:100%;height:auto;border-radius:12px}
body.bss-pdp .verhaal figure{margin:1.4em 0}
body.bss-pdp .verhaal figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:#97a0ac;color:var(--inkt-dim);margin-top:.5em}
/* eigen lijstopmaak van de site, op wit gemaakt, hier omgezet naar donker */
body.bss-pdp .verhaal .pdp-lijst{
list-style:none;padding:20px 22px;margin:0 0 1.2em;
background:#0d1116;background:var(--paneel);
border-left:3px solid #f2aa00;border-left:3px solid var(--amber);
border-radius:10px;
}
body.bss-pdp .verhaal .pdp-lijst li{margin:.45em 0;padding-left:1.3em;position:relative}
body.bss-pdp .verhaal .pdp-lijst li::before{
content:"+";position:absolute;left:0;top:0;
font-family:var(--mono);color:#f2aa00;color:var(--amber);
}
body.bss-pdp .verhaal .pdp-lijst strong{color:#e9e4d8;color:var(--inkt)}
/* tabellen in een schuifvak */
body.bss-pdp .verhaal .tabelvak{
background:#0d1116;background:var(--paneel);
border:1px solid #1c242e;border:1px solid var(--lijn);
border-radius:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.3em 0;
}
body.bss-pdp .verhaal .tabelvak table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.78rem;margin:0}
body.bss-pdp .verhaal .tabelvak th,
body.bss-pdp .verhaal .tabelvak td{
padding:11px 16px;text-align:left;white-space:nowrap;
border-bottom:1px dashed #1c242e;border-bottom:1px dashed var(--lijn);
color:#b8bfc9;color:var(--inkt-mono);
}
body.bss-pdp .verhaal .tabelvak thead th{
background:#10161d;background:var(--paneel-2);
color:#f2aa00;color:var(--amber);
font-weight:500;letter-spacing:.06em;
}
body.bss-pdp .verhaal .tabelvak tr:last-child th,
body.bss-pdp .verhaal .tabelvak tr:last-child td{border-bottom:0}
body.bss-pdp .verhaal .tabelvak:focus-visible{outline:2px solid #f2aa00;outline:2px solid var(--amber);outline-offset:2px}
/* ============================================================
7. SECTIES ONDER DE VOUW
============================================================ */
body.bss-pdp .pdp-sectie{padding:clamp(46px,6vw,86px) 0 0}
body.bss-pdp .pdp-sectie:last-of-type{padding-bottom:clamp(56px,7vw,100px)}
body.bss-pdp .pdp-sectiekop{
color:#e9e4d8;color:var(--inkt);
font-size:clamp(1.6rem,3.4vw,2.4rem);margin:.5em 0 .3em;
}
body.bss-pdp .pdp-sectie .sectielead{color:#97a0ac;color:var(--inkt-dim)}
/* FAQ als details, dus zonder script */
body.bss-pdp .pdp-faq{max-width:80ch;display:flex;flex-direction:column;gap:10px}
body.bss-pdp .pdp-faq-item{
background:#0d1116;background:var(--paneel);
border:1px solid #1c242e;border:1px solid var(--lijn);
border-radius:12px;overflow:hidden;
}
body.bss-pdp .pdp-faq-item[open]{border-color:#926e15;border-color:color-mix(in srgb,var(--amber) 55%,var(--lijn))}
body.bss-pdp .pdp-faq-item summary{
cursor:pointer;list-style:none;
padding:16px 52px 16px 20px;position:relative;
color:#e9e4d8;color:var(--inkt);
font-weight:500;font-size:1.02rem;line-height:1.45;
}
body.bss-pdp .pdp-faq-item summary::-webkit-details-marker{display:none}
body.bss-pdp .pdp-faq-item summary::after{
content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
font-family:var(--mono);font-size:1.4rem;line-height:1;
color:#f2aa00;color:var(--amber);
}
body.bss-pdp .pdp-faq-item[open] summary::after{content:"\2212"}
body.bss-pdp .pdp-faq-item summary:hover{background:#10161d;background:var(--paneel-2)}
body.bss-pdp .pdp-faq-antwoord{padding:0 20px 18px;color:#97a0ac;color:var(--inkt-dim)}
body.bss-pdp .pdp-faq-antwoord p{margin:0 0 .8em;line-height:1.65}
body.bss-pdp .pdp-faq-antwoord p:last-child{margin-bottom:0}
body.bss-pdp .pdp-faq-antwoord a{color:#f2aa00;color:var(--amber)}
/* logboek: de beoordelingen van WooCommerce */
body.bss-pdp .pdp-logboek{max-width:80ch}
body.bss-pdp .pdp-logboek .comment_container{
background:#0d1116;background:var(--paneel);
border:1px solid #1c242e;border:1px solid var(--lijn);
border-radius:12px;padding:18px 20px;
}
body.bss-pdp .pdp-logboek .commentlist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
body.bss-pdp .pdp-logboek .comment-text p,
body.bss-pdp .pdp-logboek .description p{color:#97a0ac;color:var(--inkt-dim)}
body.bss-pdp .pdp-logboek .woocommerce-review__author{color:#e9e4d8;color:var(--inkt)}
body.bss-pdp .pdp-logboek .woocommerce-review__published-date{font-family:var(--mono);font-size:.68rem;color:#97a0ac;color:var(--inkt-dim)}
body.bss-pdp .pdp-logboek .star-rating span{color:#f2aa00;color:var(--amber)}
body.bss-pdp .pdp-logboek h2,
body.bss-pdp .pdp-logboek h3{color:#e9e4d8;color:var(--inkt);font-size:1.1rem}
body.bss-pdp .pdp-logboek label{color:#97a0ac;color:var(--inkt-dim);font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
body.bss-pdp .pdp-logboek input[type=text],
body.bss-pdp .pdp-logboek input[type=email],
body.bss-pdp .pdp-logboek textarea{
background:#0d1116;background:var(--paneel);
border:1px solid #1c242e;border:1px solid var(--lijn);
border-radius:10px;padding:10px 14px;width:100%;
color:#e9e4d8;color:var(--inkt);
}
body.bss-pdp .pdp-logboek #respond input#submit{
border:0;border-radius:999px;padding:13px 26px;
background:#f7931a;background:linear-gradient(90deg,var(--oranje),var(--amber));
color:#160e00;font-weight:700;
}
/* past hierbij */
body.bss-pdp .verwant-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
@media (max-width:640px){ body.bss-pdp .verwant-grid{grid-template-columns:1fr} }
body.bss-pdp .verwant-grid .kaart{color:#e9e4d8;color:var(--inkt);text-decoration:none}
body.bss-pdp .verwant-grid .kaart .kaart-romp h3{color:#e9e4d8;color:var(--inkt);margin:0}
body.bss-pdp .verwant-grid .kaart .nr{color:#97a0ac;color:var(--inkt-dim)}
body.bss-pdp .verwant-grid .kaart .prijs{color:#e9e4d8;color:var(--inkt);font-family:var(--mono);font-size:.95rem}
body.bss-pdp .verwant-grid .kaart .prijs del{color:#97a0ac;color:var(--inkt-dim);font-size:.8em;margin-right:.4em}
body.bss-pdp .verwant-grid .kaart .prijs ins{background:transparent;text-decoration:none;color:inherit}
body.bss-pdp .verwant-grid .kaart .lampje{color:#97a0ac;color:var(--inkt-dim)}
body.bss-pdp .verwant-grid .kaart .lampje.uit i{background:#ff5d5d;background:var(--breuk);box-shadow:0 0 8px #ff5d5d}
/* ============================================================
7B. DE BLOKKEN DIE WOOCOMMERCE ZELF NOG NEERZET
============================================================ */
/* Onderaan de pagina staat nog een blok "Recent bekeken producten" in de
`.related.products`-opmaak. Dat komt niet uit onze haken (die hebben we
weggehaald) maar van elders, en het stond met ZWARTE letters op onze donkere
pagina: onleesbaar. Verbergen zou verkeerd zijn, want het is echte
winkelinhoud, dus krijgt het hier de huisstijl. */
body.bss-pdp .related.products,
body.bss-pdp .upsells.products,
body.bss-pdp .up-sells.products{padding:clamp(40px,5vw,70px) 0 0;clear:both}
body.bss-pdp .related.products > h2,
body.bss-pdp .upsells.products > h2,
body.bss-pdp .up-sells.products > h2{
color:#e9e4d8;color:var(--inkt);
font-size:clamp(1.4rem,2.8vw,2rem);font-weight:700;margin:0 0 1.1em;
}
body.bss-pdp .related.products ul.products li.product,
body.bss-pdp .upsells.products ul.products li.product,
body.bss-pdp .up-sells.products ul.products li.product{
background:#0d1116;background:var(--paneel);
border:1px solid #1c242e;border:1px solid var(--lijn);
border-radius:14px;overflow:hidden;padding:0 0 16px;
}
body.bss-pdp .related.products li.product .woocommerce-loop-product__title,
body.bss-pdp .upsells.products li.product .woocommerce-loop-product__title,
body.bss-pdp .up-sells.products li.product .woocommerce-loop-product__title{
color:#e9e4d8;color:var(--inkt);font-size:1rem;padding:0 16px;
}
body.bss-pdp .related.products li.product .price,
body.bss-pdp .upsells.products li.product .price,
body.bss-pdp .up-sells.products li.product .price{
color:#e9e4d8;color:var(--inkt);
font-family:var(--mono);font-size:.9rem;padding:0 16px;
}
body.bss-pdp .related.products li.product .price del,
body.bss-pdp .upsells.products li.product .price del{color:#97a0ac;color:var(--inkt-dim)}
body.bss-pdp .related.products li.product .price ins,
body.bss-pdp .upsells.products li.product .price ins{background:transparent;color:inherit;text-decoration:none}
body.bss-pdp .related.products li.product .star-rating,
body.bss-pdp .related.products li.product .ast-woo-product-category{color:#97a0ac;color:var(--inkt-dim);padding:0 16px}
body.bss-pdp .related.products li.product img,
body.bss-pdp .upsells.products li.product img,
body.bss-pdp .up-sells.products li.product img{background:#ffffff;background:var(--papier)}
/* ============================================================
8. WAT NIET MEE MOET
============================================================ */
/* de tabbladen zijn uit elkaar getrokken naar meetstaat, verhaal, FAQ en
logboek; mocht een plugin ze alsnog tekenen, dan blijven ze weg */
body.bss-pdp .woocommerce-tabs{display:none}
/* de losse accordeon-stijl van de site is op wit gemaakt en hoort hier niet meer */
body.bss-pdp .bss-faq,
body.bss-pdp .bss-product-content{color:inherit}
/* ============================================================
9. DE STICKY KOOPBALK (BIT-597)
============================================================ */
/* De sitebrede sticky koopbalk onderaan de telefoon komt uit BIT-597 en is daar
wit (rgba(255,255,255,.96)) met een oranje knop. Op deze pagina is de rest van
het scherm donker, dus die balk was een fel wit vlak over de inhoud.
Stond van 29 augustus 2026 tot deze deploy in WPCode-snippet 16237, omdat
pdp.css toen niet te vervangen was. Hoort hier, want het is een correctie op
hoe een vreemd element zich op DEZE pagina gedraagt.
SPECIFICITEIT IS HIER GEEN SMAAK. Drie regels elders zetten deze knop al met
!important: .bit597-sticky-btn (wp-custom-css), diens :hover, en de sitebrede
mobiele regel .woocommerce button.button uit BIT-601. Daarom staat het id in
de selector: dan wint dit blok op specificiteit en niet op volgorde.
DE DESKTOPKANT IS AL GEREGELD: in wp-custom-css staat een vangregel die de
balk vanaf 768px verbergt. Dit blok gaat daar niet overheen. */
body.bss-pdp #bit597-sticky-cta{
background:#060809;
background:rgba(6,8,9,.96);
border-top:1px solid #1c242e;
border-top:1px solid var(--lijn);
box-shadow:0 -10px 30px rgba(0,0,0,.55);
/* de oorspronkelijke regel zet de onderrand op env(safe-area-inset-bottom),
dus op een telefoon zonder inkeping plakt de knop tegen de rand */
padding:12px 16px;
padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
}
body.bss-pdp #bit597-sticky-cta .bit597-sticky-btn{
background:#f7931a !important;
background:linear-gradient(90deg,var(--oranje),var(--amber)) !important;
color:#160e00 !important;
border:0 !important;
/* GEEN eigen border-radius. De sitebrede mobiele regel uit BIT-601 zet
.woocommerce button.button op 6px met !important, en die geldt OOK voor de
gewone koopknop op deze pagina. Twee koopknoppen met een andere vorm onder
elkaar is erger dan geen pil. Gemeten op 390px: beide 6px. */
min-height:48px;
font-family:var(--sans);
font-weight:700;
letter-spacing:0;
}
body.bss-pdp #bit597-sticky-cta .bit597-sticky-btn:hover,
body.bss-pdp #bit597-sticky-cta .bit597-sticky-btn:focus{
background:#f7931a !important;
background:linear-gradient(90deg,var(--oranje),var(--amber)) !important;
color:#160e00 !important;
box-shadow:0 8px 26px rgba(247,147,26,.34);
}
body.bss-pdp #bit597-sticky-cta .bit597-sticky-btn:focus-visible{
outline:2px solid #e9e4d8;
outline:2px solid var(--inkt);
outline-offset:3px;
}