/* ============================================================
Kamagrabestellen theme — main.css
Design-bron: kamagra-ds.invoker.nl (tokens.css = kb-tokens)
============================================================ */
/* ====== Base ====== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink-soft); font-family: var(--font-sans); font-size: 15px; line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--color-brand-blue); text-decoration: none; }
a:hover { color: var(--color-brand-blue-deep); }
h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: 34px; } h2 { font-size: 28px; } h3 { font-size: 21px; } h4 { font-size: 17px; }
.kb-container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.kb-content { padding: 34px 28px 60px; }
/* Contentpagina's hebben een leesmaat van 68ch; in een container van 1180px
bleef daarnaast ruim 500px over die als lege sidebar oogde. Nu een echte
zijkolom met de andere servicepagina's. */
/* Tekst tegen de linkerrand van de container, zijkolom tegen de rechterrand,
zodat beide precies uitlijnen met het menu, de header en de footer. De
overgebleven ruimte valt als gootbreedte tússen de kolommen; dat is rustiger
dan het blok centreren, want dan loopt de hele pagina uit de pas met de rest
van de site. */
.kb-content.heeft-zijkolom {
display: grid; grid-template-columns: minmax(0, 68ch) 280px;
justify-content: space-between; gap: 48px; align-items: start;
}
.kb-content-side { position: sticky; top: 20px; }
.kb-content-side h2 {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin: 0 0 10px;
}
.kb-content-side nav ul { list-style: none; margin: 0 0 26px; padding: 0; }
.kb-content-side nav li { margin: 0 -10px; }
.kb-content-side nav a {
display: block; padding: 8px 10px; border-radius: 8px;
font-size: 14px; color: var(--ink-soft); line-height: 1.4;
transition: background .15s ease;
}
.kb-content-side nav a:hover { background: var(--surface); color: var(--color-brand-blue); }
.kb-content-side nav a.is-actief { background: var(--color-brand-blue-tint); color: var(--color-brand-blue); font-weight: 700; }
.kb-page-title { margin-bottom: 20px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* ====== Formuliervelden (DS: forms.html) ====== */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="search"], input[type="number"], textarea, select {
width: 100%; padding: 11px 14px;
border: 1px solid var(--line); border-radius: var(--radius-input);
font: inherit; font-size: 14.5px; color: var(--ink); background: var(--surface);
box-shadow: inset 0 1px 2px rgba(11,30,51,.04);
transition: border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }
input:hover, textarea:hover, select:hover { border-color: #b9c9dd; }
input:focus, textarea:focus, select:focus {
outline: 0; border-color: var(--color-brand-blue);
box-shadow: inset 0 1px 2px rgba(11,30,51,.02), var(--shadow-focus);
}
select {
appearance: none; -webkit-appearance: none; padding-right: 40px;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235e7189' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 15px center;
}
/* Select2 (Woo's "selectWoo") vervangt op de hele frontend precies twee velden:
billing_country en shipping_country. Het brengt z'n eigen stylesheet mee —
28px hoog, 4px radius, #aaa rand — en viel daarmee zichtbaar uit de pas met
de velden ernaast. Hier volledig op de DS-velden afgestemd.
Bewust NIET uitgezet: country-select.js heeft selectWoo als dependency, dus
deregistreren breekt de land/provincie-logica in de checkout. */
.select2-container--default .select2-selection--single {
/* min-height gelijk aan de andere velden: select2 rekent zijn hoogte uit de
regelhoogte van een span, een input uit line-height:normal — dat scheelt
een paar pixels die je in een kolom formulier direct ziet */
min-height: 49px; display: flex; align-items: center;
height: auto; padding: 11px 40px 11px 14px; font-size: 14.5px;
border: 1px solid var(--line); border-radius: var(--radius-input);
background: var(--surface); box-shadow: inset 0 1px 2px rgba(11,30,51,.04);
transition: border-color .12s, box-shadow .12s;
}
.select2-container--default .select2-selection--single:hover { border-color: #b9c9dd; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
padding: 0; line-height: 1.5; font-size: 14.5px; color: var(--ink);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted); }
/* eigen chevron i.p.v. het driehoekje van select2 — zelfde svg als de selects */
.select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }
.select2-container--default .select2-selection--single {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235e7189' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 15px center;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
border-color: var(--color-brand-blue);
box-shadow: inset 0 1px 2px rgba(11,30,51,.02), var(--shadow-focus);
}
/* het uitklappaneel */
.select2-container--default .select2-dropdown {
border: 1px solid var(--line); border-radius: var(--radius-input);
background: var(--surface); box-shadow: var(--shadow-lift); overflow: hidden;
}
.select2-container--default .select2-search--dropdown { padding: 10px 10px 6px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
}
.select2-container--default .select2-results__option {
padding: 9px 14px; font-size: 14px; color: var(--ink-soft);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
background: var(--color-brand-blue-tint); color: var(--color-brand-blue);
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
background: var(--paper-alt); color: var(--ink); font-weight: 600;
}
input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; accent-color: var(--color-brand-blue); box-shadow: none; }
label { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.required { color: var(--danger); text-decoration: none; }
/* ====== Knoppen (DS: buttons.html v2.2) ====== */
button, .button, input[type="submit"] { font: inherit; cursor: pointer; }
.kb-btn, .button, button[type="submit"], input[type="submit"],
.single_add_to_cart_button, .checkout-button, #place_order,
.woocommerce-message .button, .return-to-shop .button {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 26px; border: 0; border-radius: var(--radius-button);
background: var(--grad-button); color: #fff;
font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .01em;
text-decoration: none; line-height: 1.4;
box-shadow: var(--shadow-button);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.kb-btn:hover, .button:hover, button[type="submit"]:hover, input[type="submit"]:hover,
.single_add_to_cart_button:hover, .checkout-button:hover, #place_order:hover {
background: var(--grad-button-hover); color: #fff;
transform: translateY(-1px); box-shadow: var(--shadow-button-hover);
}
.kb-btn:active, .button:active { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(21,84,176,.3); }
.kb-btn:focus-visible, .button:focus-visible { outline: 0; box-shadow: var(--shadow-button), var(--shadow-focus); }
.kb-btn.lg { padding: 15px 32px; font-size: 16px; }
.kb-btn .arr { font-family: var(--font-sans); transition: transform .15s; }
.kb-btn:hover .arr { transform: translateX(3px); }
button:disabled, .button:disabled { background: var(--line); color: var(--muted); box-shadow: none; transform: none; cursor: not-allowed; }
/* secundair: outline (nooit tweede gevulde knop) */
.kb-btn-ghost, .button.kb-ghost, .woocommerce-cart .button[name="update_cart"],
.button-continue-shopping, .woocommerce-privacy-policy-link {
display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px;
border-radius: var(--radius-button); border: 1.5px solid var(--line);
background: var(--surface); color: var(--ink);
font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
box-shadow: none; text-decoration: none; transition: all .15s ease;
}
.kb-btn-ghost:hover, .woocommerce-cart .button[name="update_cart"]:hover {
border-color: var(--color-brand-blue); color: var(--color-brand-blue);
background: var(--color-brand-blue-tint); transform: none; box-shadow: none;
}
.kb-btn-white {
display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px;
border-radius: var(--radius-button); border: 0;
background: linear-gradient(180deg, #ffffff 0%, #eef3fa 100%); color: var(--color-brand-navy);
font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(0,0,0,.25);
transition: transform .15s ease, box-shadow .15s ease;
}
.kb-btn-white:hover { transform: translateY(-1px); color: var(--color-brand-navy); box-shadow: inset 0 1px 0 #fff, 0 5px 14px rgba(0,0,0,.3); }
/* ====== Header (DS: navigation.html) ====== */
.kb-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.kb-header-main { display: flex; align-items: center; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.kb-logo img { height: 44px; width: auto; display: block; }
.kb-search { flex: 1; display: flex; align-items: center; position: relative; max-width: 560px; }
.kb-search input[type="search"] { border-radius: 999px; padding: 10px 44px 10px 18px; background: var(--paper); }
.kb-search button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); padding: 8px; box-shadow: none; }
.kb-search button:hover { color: var(--color-brand-blue); background: none; transform: translateY(-50%); box-shadow: none; }
.kb-header-icons { display: flex; align-items: center; gap: 18px; margin-left: auto; color: var(--ink-soft); }
.kb-header-icons a { color: var(--ink-soft); display: inline-flex; }
.kb-header-icons a:hover { color: var(--color-brand-blue); }
.kb-cart-link { position: relative; }
.kb-cart-count {
position: absolute; top: -8px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px;
border-radius: 999px; background: var(--color-brand-cyan); color: #fff;
font-size: 10.5px; font-weight: 700; display: grid; place-items: center; line-height: 1;
}
.kb-cart-count.is-empty { display: none; }
.kb-burger { display: none; flex-direction: column; gap: 4px; background: none; border: 0; padding: 6px; box-shadow: none; }
.kb-burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; }
.kb-burger:hover { background: none; transform: none; box-shadow: none; }
.kb-nav-bar { background: var(--color-brand-navy); }
.kb-nav-inner { display: flex; align-items: center; }
.kb-nav { display: flex; list-style: none; margin: 0; padding: 0; }
.kb-nav a { position: relative; display: block; color: #c9d7e8; font-size: 14px; font-weight: 600; padding: 15px 14px; }
.kb-nav a::before {
content: ""; position: absolute; left: 14px; right: 14px; bottom: 9px; height: 2px; border-radius: 2px;
background: var(--color-brand-blue-bright); transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
.kb-nav a:hover, .kb-nav .current-menu-item a { color: #fff; }
.kb-nav a:hover::before, .kb-nav .current-menu-item a::before { transform: scaleX(1); }
/* Dropdowns: bovenliggende items hebben subcategorieën (depth 2). Op hover én
op focus-within, zodat het ook met het toetsenbord bereikbaar is. */
.kb-nav > li { position: relative; }
.kb-nav .menu-item-has-children > a { padding-right: 26px; }
.kb-nav .menu-item-has-children > a::after {
content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px;
border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
transform: translateY(-70%) rotate(45deg); transition: transform .18s ease;
}
.kb-nav .menu-item-has-children:hover > a::after,
.kb-nav .menu-item-has-children:focus-within > a::after { transform: translateY(-25%) rotate(225deg); }
.kb-nav .sub-menu {
position: absolute; top: 100%; left: 4px; z-index: 70; min-width: 232px;
list-style: none; margin: 0; padding: 6px;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-card); box-shadow: var(--shadow-lift);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.kb-nav > li:hover > .sub-menu,
.kb-nav > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.kb-nav .sub-menu a {
color: var(--ink-soft); font-size: 13.5px; font-weight: 600;
padding: 9px 12px; border-radius: 8px; white-space: nowrap;
}
/* de onderstreep-animatie van de hoofdbalk hoort niet in het uitklappaneel */
.kb-nav .sub-menu a::before { display: none; }
.kb-nav .sub-menu a:hover,
.kb-nav .sub-menu .current-menu-item > a { background: var(--color-brand-blue-tint); color: var(--color-brand-blue); }
/* Mega-menu: één knop in de balk, paneel over de volle breedte eronder.
De navy balk is de positioneringscontext, zodat het paneel netjes onder de
hele balk hangt en niet onder de knop. */
.kb-nav-bar { position: relative; }
.kb-mega-knop {
display: inline-flex; align-items: center; gap: 9px;
background: none; border: 0; box-shadow: none; border-radius: 0;
font-family: var(--font-display); font-weight: 700; font-size: 14px;
color: #c9d7e8; padding: 15px 14px; cursor: pointer;
}
.kb-mega-knop:hover, .kb-mega-knop[aria-expanded="true"] { background: none; color: #fff; transform: none; box-shadow: none; }
.kb-mega-knop .pijl {
width: 7px; height: 7px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
transform: translateY(-2px) rotate(45deg); transition: transform .18s ease;
}
.kb-mega-knop[aria-expanded="true"] .pijl { transform: translateY(1px) rotate(225deg); }
.kb-mega-paneel {
position: absolute; left: 0; right: 0; top: 100%; z-index: 70;
background: var(--surface); border-bottom: 1px solid var(--line);
box-shadow: var(--shadow-lift); padding: 26px 0 30px;
}
/* CSS-kolommen i.p.v. grid: bij een grid legt de hoogste groep van een rij de
rijhoogte vast en laat de rest van die rij een gat vallen. Kolommen laten de
groepen doorstromen en vullen zich gelijkmatig. */
.kb-mega-kolommen { columns: 4; column-gap: 32px; }
.kb-mega-groep { break-inside: avoid; padding-bottom: 14px; }
.kb-mega-groep .kop {
display: block; font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
color: var(--ink); padding: 7px 0;
}
.kb-mega-groep .kop:hover, .kb-mega-groep .kop.is-actief { color: var(--color-brand-blue); }
.kb-mega-groep ul { list-style: none; margin: 2px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--color-brand-blue-tint); }
.kb-mega-groep li a { display: block; font-size: 13.5px; color: var(--muted); padding: 5px 0; }
.kb-mega-groep li a:hover { color: var(--color-brand-blue); }
/* huisje naar home, links in de navy balk */
.kb-nav-home {
display: inline-flex; align-items: center; color: #c9d7e8;
padding: 15px 14px 15px 0; margin-right: 4px;
}
.kb-nav-home:hover, .kb-nav-home.is-actief { color: #fff; }
.kb-nav-home svg { display: block; }
/* losse pagina's naast de mega-knop */
.kb-nav.kb-nav-extra { display: flex; list-style: none; margin: 0; padding: 0; }
/* labels nooit over twee regels: dan wordt de balk 52px hoog i.p.v. 75px */
.kb-nav a, .kb-mega-knop, .kb-nav-mail { white-space: nowrap; }
.kb-nav-spacer { flex: 1; }
.kb-nav-mail { display: inline-flex; align-items: center; gap: 7px; color: #c9d7e8; font-size: 13.5px; font-weight: 600; padding: 15px 0; }
.kb-nav-mail:hover { color: #fff; }
/* mobiel menu-panel */
.kb-mobile-panel {
position: fixed; inset: 0 25% 0 0; z-index: 60; background: var(--surface);
padding: 22px 18px; overflow-y: auto; box-shadow: var(--shadow-lift);
}
/* De WP-adminbalk staat fixed bovenaan; zonder deze correctie schoof het paneel
eronder en was de bovenkant onbereikbaar. 46px op mobiel, 32px vanaf 783px. */
body.admin-bar .kb-mobile-panel { top: 46px; }
@media screen and (min-width: 783px) { body.admin-bar .kb-mobile-panel { top: 32px; } }
/* kop van het paneel: logo links, sluitknop rechts */
.kb-mobile-kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.kb-mobile-logo img { height: 34px; width: auto; display: block; }
.kb-mobile-sluit {
flex: none; background: none; border: 0; box-shadow: none; padding: 2px 6px;
font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer;
}
.kb-mobile-sluit:hover { background: none; color: var(--ink); transform: none; box-shadow: none; }
.kb-mobile-panel .kb-search { max-width: none; margin-bottom: 12px; }
.kb-mobile-nav { list-style: none; margin: 0; padding: 0; }
.kb-mobile-nav a {
display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px;
color: var(--ink); padding: 14px 4px;
}
/* alleen de hoofditems krijgen een scheidingslijn, niet de subitems */
.kb-mobile-nav > li > a { border-bottom: 1px solid var(--line); }
.kb-mobile-nav > li:last-child > a { border-bottom: 0; }
.kb-mobile-nav > li.menu-item-has-children > a { border-bottom: 0; }
.kb-mobile-nav a:hover, .kb-mobile-nav .current-menu-item > a { color: var(--color-brand-blue); }
/* subcategorieën ingesprongen achter een streep, zodat de hiërarchie leesbaar
is zonder dat je eerst iets moet openklappen */
.kb-mobile-nav .sub-menu {
list-style: none; margin: 0 0 0 6px; padding: 2px 0 10px;
border-left: 2px solid var(--color-brand-blue-tint);
border-bottom: 1px solid var(--line);
}
.kb-mobile-nav > li:last-child > .sub-menu { border-bottom: 0; }
.kb-mobile-nav .sub-menu a {
font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
padding: 9px 4px 9px 14px;
}
.kb-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(11,30,51,.4); }
body.kb-menu-open { overflow: hidden; }
/* ====== Footer ====== */
.kb-footer { background: var(--surface); border-top: 1px solid var(--line); margin-top: 60px; }
.kb-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; padding-top: 56px; padding-bottom: 44px; }
.kb-footer h5 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 16px; }
.kb-footer a, .kb-footer p { display: block; font-size: 14px; color: var(--ink-soft); line-height: 1.8; margin: 0; }
.kb-footer a:hover { color: var(--color-brand-blue); }
.kb-footer-logo { height: 30px; width: auto; margin-bottom: 12px; }
.kb-footer-about { max-width: 34ch; }
.kb-footer-badges { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.kb-mini-badge {
display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
color: var(--ink-soft); border: 1px solid var(--line); padding: 6px 11px; border-radius: 999px;
}
.kb-footer-note { font-size: 13px; color: var(--muted); margin-top: 14px; }
.kb-footer-bar { background: var(--color-brand-navy); color: #aebdd0; font-size: 13.5px; padding: 16px 0; }
.kb-footer-bar strong { color: #e8eef6; }
/* ====== Homepage ====== */
.kb-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-brand-blue); font-weight: 500; margin: 0 0 10px; }
.kb-section-head { max-width: 640px; margin-bottom: 26px; }
.kb-section-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.kb-section-head--row > div { max-width: 640px; }
.kb-more { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--color-brand-blue); white-space: nowrap; padding-bottom: 4px; }
.kb-more .arr { display: inline-block; transition: transform .15s; }
.kb-more:hover .arr { transform: translateX(3px); }
.kb-section-head h2 { margin: 0 0 10px; font-size: clamp(26px, 3vw, 32px); }
.kb-section-desc { color: var(--muted); font-size: 15.5px; line-height: 1.65; margin: 0; }
.kb-hero { padding: 64px 0 56px; background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 70%); overflow: hidden; }
.kb-hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.kb-hero h1 { font-size: clamp(34px, 4.5vw, 50px); line-height: 1.08; margin: 0 0 18px; }
.kb-hero h1 em { font-style: normal; color: var(--color-brand-blue); }
.kb-hero-lead { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; margin: 0 0 26px; }
.kb-hero-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
/* collage: brede tegel boven (past bij de 1400x800-packshots), twee eronder */
/* De tegelhoogtes stonden op fr-rijen en werden in de praktijk bepaald door de
beeldverhouding van de packshot (1400x800). Zodra we een kleiner, vierkant
formaat serveren rekt de collage dus uit. De verhoudingen staan nu vast in
de CSS, zodat de compositie hetzelfde blijft ongeacht wat er geüpload is. */
.kb-hero-media { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-self: center; }
.kb-hero-media::before {
content: ""; position: absolute; inset: -40px -60px; z-index: -1; border-radius: 50%;
background: radial-gradient(closest-side, rgba(47,127,242,.10), transparent 70%);
}
/* De tegels zijn links naar de PDP. Naam verschijnt bij hover/focus als
affordance; hij staat altijd in de DOM zodat screenreaders hem voorlezen. */
.kb-hero-tile {
position: relative; background: var(--paper-alt); border-radius: 14px; padding: 18px;
display: grid; place-items: center; overflow: hidden;
transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s;
/* De rijhoogtes van de collage moeten leidend zijn, niet de bronverhouding
van de packshot. Zonder min-height:0 is de automatische minimumhoogte van
een grid-item min-content, en dan rekt een vierkante bron de tegel op. */
min-height: 0;
}
.kb-hero-tile.t1 { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.kb-hero-tile.t2, .kb-hero-tile.t3 { aspect-ratio: 11 / 8; }
/* Absoluut i.p.v. in de flow: een percentage-hoogte op een grid-item waarvan
de rij door de inhoud wordt bepaald is niet definiet, dus viel height:100%
op de ![]()
terug op auto en liep het beeld buiten de tegel (die het dan
afsneed). Met inset staat de beeldlaag vast en klopt object-fit weer. */
.kb-hero-shot { position: absolute; inset: 18px; }
.kb-hero-tile img { mix-blend-mode: multiply; width: 100%; height: 100%; object-fit: contain; display: block; }
.kb-hero-tile.t2 img, .kb-hero-tile.t3 img { object-fit: cover; }
.kb-hero-tile:hover, .kb-hero-tile:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.kb-hero-tile:focus-visible { outline: 2px solid var(--color-brand-blue); outline-offset: 2px; }
.kb-hero-name {
position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px);
background: var(--surface); color: var(--ink);
font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
padding: 6px 13px; border-radius: 999px; box-shadow: 0 1px 4px rgba(11,30,51,.14);
/* één regel: een pil van twee regels dekt de halve packshot af. De volledige
naam blijft beschikbaar voor screenreaders. */
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s;
}
.kb-hero-tile:hover .kb-hero-name, .kb-hero-tile:focus-visible .kb-hero-name { opacity: 1; transform: none; }
/* zonder muis (touch) heeft hover geen betekenis: naam dan altijd tonen */
@media (hover: none) {
.kb-hero-name { opacity: 1; transform: none; }
}
/* trustbar: hairline-strip, géén kaarten. Vier witte cards was dezelfde
laag-familie als het productgrid en het stappenblok; lijnen groeperen
net zo goed en kosten geen elevatie die niets betekent. */
.kb-trustbar { padding-bottom: 52px; }
.kb-trustbar-strip {
display: grid; grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.kb-tb-item {
display: flex; gap: 12px; align-items: flex-start;
padding: 20px 24px; border-right: 1px solid var(--line);
}
.kb-tb-item:first-child { padding-left: 0; }
.kb-tb-item:last-child { border-right: 0; padding-right: 0; }
.kb-tb-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--color-brand-blue-tint); color: var(--color-brand-blue); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.kb-tb-item strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); line-height: 1.3; }
.kb-tb-item small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.kb-original { background: var(--paper-alt); padding: 56px 0; }
.kb-original-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: start; }
.kb-original-copy p:not(.kb-eyebrow) { font-size: 15.5px; line-height: 1.7; }
.kb-warn-card {
background: var(--surface); border: 1px solid var(--line);
border-radius: 16px; padding: 26px 28px; box-shadow: var(--shadow-soft);
}
.kb-warn-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.kb-warn-head img { width: 38px; height: 38px; }
.kb-warn-card h3 { font-size: 19px; margin: 0; }
.kb-warn-card p { font-size: 14.5px; line-height: 1.65; margin: 0 0 12px; }
.kb-warn-card ul { list-style: none; margin: 0; padding: 0; }
.kb-warn-card li { display: flex; gap: 10px; font-size: 14px; padding: 5px 0; align-items: baseline; }
.kb-warn-card li b { color: var(--success); font-weight: 800; }
.kb-bestsellers { padding: 56px 0 34px; }
.kb-how { background: var(--paper-alt); padding: 56px 0 54px; }
/* bestelproces als flow op één verbindingslijn. Drie gelijke feature-kaarten
is het meest herkenbare template-patroon dat er is; de lijn vertelt bovendien
wat de kaarten niet vertelden: dat dit een volgorde is. */
.kb-flow {
list-style: none; margin: 0; padding: 0; position: relative;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.kb-flow-step { position: relative; padding-right: 22px; }
/* Connector per stap i.p.v. één lijn over de hele rij: die liep zichtbaar
door voorbij de laatste stap. Nu loopt hij van het eigen nummer naar het
volgende (kolombreedte valt weg, blijft over: gap 30px + 23px middelpunt). */
.kb-flow-step:not(:last-child)::before {
content: ""; position: absolute; left: 23px; right: -53px; top: 23px; height: 1px;
background: var(--line);
}
.kb-flow-step .num {
position: relative; display: grid; place-items: center;
width: 46px; height: 46px; margin: 0 0 18px; border-radius: 50%;
background: var(--color-brand-blue); color: #fff;
font-family: var(--font-display); font-weight: 800; font-size: 18px;
box-shadow: 0 2px 6px rgba(21,84,176,.22);
}
.kb-flow-step h3 { font-size: 17.5px; margin: 0 0 7px; }
.kb-flow-step p { font-size: 14.5px; color: var(--muted); line-height: 1.65; margin: 0; }
.kb-banner-wrap { padding: 40px 0 10px; }
.kb-navy-banner { background: var(--color-brand-navy); color: #e8eef6; border-radius: 20px; padding: 44px 46px; }
.kb-navy-banner h3 { color: #fff; font-size: 24px; margin: 0 0 10px; }
.kb-navy-banner > p { color: #aebdd0; font-size: 15px; line-height: 1.6; margin: 0 0 22px; max-width: 52ch; }
.kb-navy-banner ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; }
.kb-navy-banner li { display: flex; gap: 11px; font-size: 14.5px; align-items: baseline; line-height: 1.45; }
.kb-navy-banner li b { color: #7fb7ff; font-weight: 800; }
.kb-cats { padding: 50px 0 30px; }
/* Kaartenraster i.p.v. de scroll-rij: 15 categorieën delen precies door 5 en
door 3, dus geen gaten in de laatste rij. Naam en aantal staan onder het
beeld i.p.v. als pil eróver — dezelfde opbouw als de productkaarten. */
.kb-cats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.kb-ccard {
display: flex; flex-direction: column; overflow: hidden;
border: 1px solid var(--line); border-radius: var(--radius-card);
background: var(--surface); color: inherit;
transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s, border-color .18s;
}
.kb-ccard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--color-brand-blue-tint); }
.kb-ccard .media {
display: grid; place-items: center; aspect-ratio: 1 / 1;
background: var(--paper-alt); padding: 12px;
/* zie .kb-media: als flexitem wint min-content anders van aspect-ratio */
flex: none; min-height: 0; overflow: hidden;
}
.kb-ccard .media img { mix-blend-mode: multiply; width: 100%; height: 100%; object-fit: contain; }
.kb-ccard .body { padding: 12px 14px 14px; }
.kb-ccard strong {
display: block; font-family: var(--font-display); font-weight: 700;
font-size: 14px; line-height: 1.3; color: var(--ink);
/* twee regels reserveren zodat de aantallen over een rij op één lijn liggen */
min-height: 2.6em;
}
.kb-ccard:hover strong { color: var(--color-brand-blue); }
.kb-ccard small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
/* ====== Shop: lichte titelkop + layout (navy alleen nog in de menubalk) ====== */
.kb-shop-toolbar select {
border-radius: 999px; background-color: var(--surface); color: var(--ink);
border-color: var(--line); box-shadow: var(--shadow-soft); width: auto; padding: 10px 40px 10px 16px; font-size: 13.5px;
}
.kb-shop-toolbar select:focus { border-color: var(--color-brand-blue); }
.kb-shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 40px; padding-top: 34px; padding-bottom: 50px; }
.kb-shop-main { min-width: 0; }
.kb-pdp-crumbs { padding-top: 14px; }
.kb-pdp-main { padding: 20px 0 50px; }
/* sidebar-widgets */
/* de sidebar begint gelijk met de titelband ernaast */
.kb-shop-sidebar { padding-top: 4px; }
/* De kolom is een korte categorielijst naast een lang grid: zonder sticky
scrollt hij weg en blijft er honderden pixels wit over. */
.kb-sidebar-inner { position: sticky; top: 20px; }
/* Sinds de dropdown "Alle producten" een gewone link is, is dit dé plek voor de
volledige categorielijst. Een sticky kolom die hoger is dan het scherm krijg je
nooit tot onderaan in beeld (hulpkaart valt weg op een laptop van 768px), dus
de kolom scrolt zelf binnen de schermhoogte. overscroll-behavior houdt de
pagina stil als je onderaan de lijst doorscrollt. */
@media (min-width: 1025px) {
.kb-sidebar-inner {
max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: var(--line) transparent;
padding-right: 6px; margin-right: -6px;
}
body.admin-bar .kb-sidebar-inner { max-height: calc(100vh - 72px); }
}
/* hulpkaart onderaan de sidebar */
.kb-side-help {
background: var(--color-brand-blue-tint); border-radius: var(--radius-card);
padding: 18px 18px 20px;
}
.kb-side-help h3 { font-size: 15px; margin: 0 0 7px; }
.kb-side-help p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 14px; }
.kb-side-help small { display: block; margin-top: 10px; font-size: 12.5px; color: var(--muted); word-break: break-all; }
.kb-btn.sm { padding: 9px 18px; font-size: 13.5px; }
.kb-shop-sidebar .widget { border-bottom: 1px solid var(--line); padding: 0 0 18px; margin: 0 0 18px; }
.kb-shop-sidebar .widget-title {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin: 0 0 10px;
}
.kb-shop-sidebar ul { list-style: none; margin: 0; padding: 0; }
/* Rijen i.p.v. losse regels: naam links, aantal rechts als mono-getal, en de
categorie waar je nú bent is zichtbaar. Veertien identieke regels zonder
actieve staat is een muur waarin je jezelf niet terugvindt. */
.kb-shop-sidebar .product-categories li {
display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
font-size: 14px; padding: 7px 10px; margin: 0 -10px; border-radius: 8px;
transition: background .15s ease;
}
.kb-shop-sidebar .product-categories li:hover { background: var(--surface); }
/* Subcategorieën: de is een kind van de - , dus zonder
deze regel belandt hij als derde kolom náást de naam en het aantal. */
.kb-shop-sidebar .product-categories li { flex-wrap: wrap; }
.kb-shop-sidebar .product-categories li > a { flex: 1; min-width: 0; }
.kb-shop-sidebar .product-categories .children {
flex: 0 0 100%; margin: 6px 0 0; padding: 0 0 0 12px;
border-left: 2px solid var(--color-brand-blue-tint);
}
.kb-shop-sidebar .product-categories .children li { padding: 6px 10px 6px 0; margin: 0; font-size: 13.5px; }
.kb-shop-sidebar .product-categories .children li:hover { background: none; }
.kb-shop-sidebar .product-categories .children a { color: var(--muted); }
.kb-shop-sidebar .product-categories .children a:hover { color: var(--color-brand-blue); }
/* een ouder met kinderen krijgt geen gevuld vlak — dat zou het hele blok
inclusief de kinderen tinten; alleen de tekst markeert de huidige plek */
.kb-shop-sidebar .product-categories li.current-cat:has(.children) { background: none; }
.kb-shop-sidebar li a { color: var(--ink-soft); }
.kb-shop-sidebar li a:hover { color: var(--color-brand-blue); }
.kb-shop-sidebar .count { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); flex: none; }
.kb-shop-sidebar .product-categories li.current-cat { background: var(--color-brand-blue-tint); }
.kb-shop-sidebar .product-categories li.current-cat > a { color: var(--color-brand-blue); font-weight: 700; }
.kb-shop-sidebar .product-categories li.current-cat .count { color: var(--color-brand-blue); }
/* overige widgets (bv. prijsfilter) houden de eenvoudige regelopmaak */
.kb-shop-sidebar li { padding: 4px 0; font-size: 14px; display: flex; justify-content: space-between; }
/* mini-productwidget: thumb links, titel + prijs er netjes naast/onder */
.kb-shop-sidebar .product_list_widget li { display: block; position: relative; padding: 8px 0 8px 56px; min-height: 56px; font-size: 12.5px; color: var(--color-brand-blue); font-weight: 700; }
.kb-shop-sidebar .product_list_widget img { position: absolute; left: 0; top: 8px; width: 44px; height: 44px; object-fit: contain; background: var(--paper-alt); border-radius: 8px; mix-blend-mode: multiply; padding: 3px; }
.kb-shop-sidebar .product_list_widget .product-title { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ink); display: block; line-height: 1.35; }
.kb-shop-sidebar .product_list_widget .kb-price-unit { font-weight: 600; }
/* Kopblok van een shop-archief: kruimelpad, label, naam en omschrijving als
één geheel, met de packshot ernaast over de volle hoogte. Geen kaart, wel
een afsluitende hairline zodat het blok van het grid gescheiden blijft. */
.kb-cat-header {
display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 40px;
align-items: start; padding: 0 0 24px; margin: 0 0 22px;
border-bottom: 1px solid var(--line);
}
.kb-cat-header.is-solo { grid-template-columns: minmax(0, 1fr); }
.kb-cat-header .kb-breadcrumbs { margin-bottom: 14px; }
.kb-cat-header .kb-eyebrow { margin: 0 0 6px; }
.kb-cat-header h1 { color: var(--ink); font-size: clamp(28px, 3vw, 34px); margin: 0; }
.kb-cat-header-tekst { margin-top: 16px; }
.kb-cat-header-tekst p { font-size: 15px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 12px; max-width: 64ch; }
/* eerste alinea draagt de belofte van de categorie: iets groter en donkerder */
.kb-cat-header-tekst p:first-child { font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.kb-cat-header-tekst p:last-child { margin-bottom: 0; }
.kb-cat-header-media {
background: var(--paper-alt); border-radius: var(--radius-card);
aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 14px;
overflow: hidden; min-height: 0;
}
.kb-cat-header-media img { mix-blend-mode: multiply; width: 100%; height: 100%; object-fit: contain; }
/* werkbalk boven het grid: aantal links, sorteren rechts */
.kb-shop-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin: 0 0 18px;
}
.kb-toolbar-aantal { font-size: 13.5px; color: var(--muted); }
.kb-shop-toolbar .woocommerce-ordering { margin: 0; }
/* fallback voor archieven zonder eigen intro (bv. tags) */
.kb-shop-main .term-description { font-size: 15px; line-height: 1.75; color: var(--ink-soft); max-width: 64ch; margin: 0 0 24px; }
/* categorie-chips */
.kb-cat-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 18px 0 8px; margin-bottom: 8px; }
.kb-cat-chips a {
padding: 8px 15px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface);
font-size: 13px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; line-height: 1.2;
}
.kb-cat-chips a:hover { border-color: var(--color-brand-blue); color: var(--color-brand-blue); }
.kb-cat-chips a.active { background: var(--color-brand-blue); border-color: var(--color-brand-blue); color: #fff; }
/* Subcategorieën staan in hetzelfde grid als de producten maar dragen de
.product-class; de kaart komt van .kb-ccard, dus de product-chrome eraf. */
ul.products li.product-category { background: none; border: 0; box-shadow: none; overflow: visible; }
ul.products li.product-category:hover { transform: none; box-shadow: none; }
ul.products li.product-category > .kb-ccard { height: 100%; }
/* ====== Productgrid (DS: product-card.html) ====== */
ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kb-woo ul.products.columns-4, .columns-4 ul.products, ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
ul.products li.product {
position: relative; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-soft);
transition: transform .2s, box-shadow .2s; text-align: center; margin: 0; padding: 0;
/* woo-core geeft li's float+percentage-breedtes — neutraliseren voor het grid */
float: none !important; width: auto !important; max-width: none;
}
ul.products::before, ul.products::after { display: none; }
ul.products li.product:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
/* De kaartinhoud zit volledig in de ; die moet de kaart vullen zodat de
prijsregel op de voet kan worden vastgepind. Anders schuiven voorraad en
prijs mee met de titellengte en liggen ze niet op één lijn over een rij. */
ul.products li.product { display: flex; flex-direction: column; }
ul.products li.product > a.woocommerce-LoopProduct-link {
display: flex; flex-direction: column; flex: 1 1 auto; color: inherit; min-width: 0;
}
ul.products li.product .price { margin-top: auto; }
ul.products li.product .kb-media {
display: block; aspect-ratio: 1 / 1; background: var(--paper-alt); padding: 6px;
/* Als flexitem is de automatische minimumhoogte min-content — dat is de
natuurlijke beeldhoogte, en die wint van aspect-ratio waardoor het vak
niet meer 1:1 is. min-height: 0 geeft aspect-ratio het laatste woord. */
flex: none; min-height: 0; overflow: hidden;
}
ul.products li.product img.attachment-woocommerce_thumbnail, ul.products li.product img {
width: 100%; height: 100%; object-fit: contain;
mix-blend-mode: multiply; display: block;
}
/* kaart-body volgens DS components.html: links uitgelijnd, eyebrow/titel/voorraad/prijs+plus */
ul.products li.product { text-align: left; }
.kb-card-cat {
display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
text-transform: uppercase; color: var(--color-brand-blue); padding: 14px 16px 0;
}
ul.products li.product .woocommerce-loop-product__title {
font-family: var(--font-display); font-weight: 700; font-size: 15.5px; line-height: 1.35;
color: var(--ink); margin: 0; padding: 5px 16px 0;
/* border-box: de 5px padding-top telt mee in min-height, dus twee regels
(2 × 1.35em) passen er niet in en een 2-regelige titel duwde de
voorraadregel 5px omlaag. Padding meerekenen. */
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
min-height: calc(2.7em + 5px);
}
.kb-card-stock { display: block; font-size: 12px; font-weight: 500; color: var(--success); padding: 2px 16px 0; }
.kb-card-stock.is-out { color: var(--danger); }
ul.products li.product .price {
display: block; font-family: var(--font-display); font-weight: 800; font-size: 16.5px;
color: var(--ink); padding: 8px 62px 16px 16px; margin: 0;
}
.kb-add {
position: absolute; right: 14px; bottom: 14px; z-index: 2;
width: 38px; height: 38px; border-radius: var(--radius-button);
background: var(--grad-button); color: #fff !important;
display: grid; place-items: center;
box-shadow: var(--shadow-button); transition: transform .15s ease, box-shadow .15s ease;
}
.kb-add svg { display: block; }
.kb-add:hover { transform: translateY(-1px); box-shadow: var(--shadow-button-hover); }
ul.products li.product .price del { color: var(--muted); font-weight: 600; margin-right: 6px; }
.kb-price-unit { color: var(--muted); font-weight: 600; font-size: .92em; }
/* hover-pill "Snel bekijken" midden op de foto (DS: product-card.html) */
ul.products li.product .kb-quick {
position: absolute; left: 50%; top: 38%; transform: translate(-50%, 4px);
background: var(--color-brand-navy); color: #fff; font-size: 12.5px; font-weight: 600;
padding: 8px 16px; border-radius: 999px; white-space: nowrap; pointer-events: none;
opacity: 0; transition: opacity .18s ease, transform .18s ease; z-index: 2;
}
ul.products li.product:hover .kb-quick { opacity: 1; transform: translate(-50%, 0); }
ul.products li.product .price ins { text-decoration: none; color: var(--color-brand-cyan); }
/* uitverkocht / sale badges als pill linksboven */
ul.products li.product .kb-out-badge, ul.products li.product .onsale {
position: absolute; top: 10px; left: 10px; z-index: 2;
background: var(--color-brand-cyan); color: #fff; font-size: 11px; font-weight: 700;
padding: 5px 11px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4;
}
ul.products li.product.outofstock .kb-out-badge { background: var(--color-brand-navy); }
ul.products li.product.outofstock img { opacity: .45; }
/* ====== PDP (DS: pdp.html) ====== */
div.product { display: block; }
div.product .kb-pdp-grid, div.product.type-product { position: relative; }
.single-product div.product { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 40px; align-items: start; }
.single-product div.product .woocommerce-product-gallery { margin: 0; position: relative; }
.woocommerce-product-gallery { opacity: 1 !important; }
.woocommerce-product-gallery .flex-viewport { border-radius: 16px; }
.woocommerce-product-gallery__trigger {
position: absolute; top: 12px; right: 12px; z-index: 5;
width: 36px; height: 36px; border-radius: 50%; background: var(--surface);
box-shadow: var(--shadow-soft); display: grid; place-items: center; font-size: 15px; text-decoration: none;
}
.woocommerce-product-gallery__image a { display: block; }
/* zoom-overlay: dekkend, niet mee-blenden (anders schijnen klein+groot door elkaar) */
.woocommerce-product-gallery__image .zoomImg {
mix-blend-mode: normal !important; background: #fff; padding: 0;
}
.single-product div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.single-product div.product .woocommerce-product-gallery__image { background: var(--paper-alt); border-radius: 16px; overflow: hidden; }
.single-product div.product .woocommerce-product-gallery__image img { mix-blend-mode: multiply; padding: 18px; }
.single-product div.product .flex-control-thumbs { list-style: none; display: flex; gap: 10px; margin: 12px 0 0; padding: 0; }
.single-product div.product .flex-control-thumbs img { background: var(--paper-alt); border-radius: 10px; mix-blend-mode: multiply; width: 72px; cursor: pointer; }
.single-product div.product .summary { min-width: 0; }
.single-product .product_title { font-size: 30px; margin-bottom: 6px; }
.single-product .summary > .price { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--ink); display: block; margin: 0 0 16px; }
.single-product .summary .woocommerce-product-details__short-description { color: var(--ink-soft); }
/* variaties: label bóven het select, volle breedte (DS: pdp.html) */
.single-product table.variations, .single-product table.variations tbody,
.single-product table.variations tr, .single-product table.variations th,
.single-product table.variations td { display: block; width: 100%; border: 0; padding: 0; text-align: left; }
.single-product table.variations { margin: 0 0 6px; }
.single-product table.variations th { margin-bottom: 6px; }
.single-product table.variations td { margin-bottom: 8px; }
.single-product table.variations label { font-size: 13px; }
.kb-stock { font-size: 13.5px; color: var(--success); font-weight: 500; margin: 6px 0 12px; }
.single-product .woocommerce-variation-price .price { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--ink); }
.single-product .woocommerce-variation-availability { font-size: 13.5px; }
.single-product .stock.in-stock { color: var(--success); }
.single-product .stock.out-of-stock { color: var(--danger); }
.single-product .reset_variations { font-size: 12px; color: var(--muted); }
.single-product form.cart { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.single-product form.cart.variations_form { display: block; }
.single-product form.cart .woocommerce-variation-add-to-cart { display: flex; gap: 10px; align-items: stretch; }
.single-product .single_add_to_cart_button { flex: 1; padding: 13px 30px; }
.kb-trust-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
margin: 20px 0 4px; padding: 16px; background: var(--color-brand-blue-tint); border-radius: 12px;
}
/* In de checkout-sidebar: één kolom (de kolom is te smal voor twee — "Voor
16:00 besteld, morgen in huis" brak daar over drie regels) én zonder eigen
vlak, want een getinte doos ín een witte kaart is doos-in-doos. */
#order_review .kb-trust-grid {
grid-template-columns: 1fr; gap: 9px;
background: none; padding: 16px 0 0; margin: 16px 0 0;
border-top: 1px solid var(--line); border-radius: 0;
}
.kb-trust-grid span { font-size: 12.5px; color: var(--ink-soft); display: flex; gap: 7px; align-items: center; line-height: 1.35; }
.kb-trust-grid b { color: var(--color-brand-blue); font-weight: 800; }
/* beschrijving links op leesmaat, specificaties in de kolom die daarnaast
toch leeg bleef staan */
.kb-pdp-detail {
grid-column: 1 / -1; margin-top: 34px;
display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start;
}
.single-product .woocommerce-tabs { grid-column: 1; margin-top: 0; min-width: 0; }
.kb-pdp-specs {
grid-column: 2; position: sticky; top: 20px;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-card); padding: 20px 22px 18px;
}
.kb-pdp-specs h2 { font-size: 16px; margin: 0 0 12px; }
.kb-pdp-specs table { width: 100%; border-collapse: collapse; }
.kb-pdp-specs th, .kb-pdp-specs td { text-align: left; padding: 8px 0; font-size: 13.5px; vertical-align: top; border-bottom: 1px solid var(--line); }
.kb-pdp-specs th { font-weight: 600; color: var(--muted); width: 42%; }
.kb-pdp-specs td { color: var(--ink-soft); }
.kb-pdp-specs td p { margin: 0; }
.kb-pdp-specs tr:last-child th, .kb-pdp-specs tr:last-child td { border-bottom: 0; }
.kb-specs-note { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
/* vulkaarten voor een halflege productrij — bewust géén productkaart-uiterlijk,
zodat niemand ze voor een product aanziet */
li.product.kb-fill-card {
background: var(--paper-alt); border: 1px dashed var(--line); box-shadow: none;
display: flex; align-items: stretch;
/* niet uitrekken tot productkaarthoogte: het zijn geen producten, en een
leeg vak van 400px leest als een ontbrekende kaart */
align-self: start;
}
li.product.kb-fill-card:hover { transform: none; box-shadow: none; border-color: var(--color-brand-blue); }
.kb-fill-card > a { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 24px 44px 24px 22px; width: 100%; color: inherit; }
.kb-fill-kop { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kb-fill-card strong { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); line-height: 1.3; }
.kb-fill-aantal { font-size: 13px; color: var(--muted); }
.kb-fill-arr { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--color-brand-blue); font-size: 17px; transition: transform .18s; }
.kb-fill-card:hover .kb-fill-arr { transform: translateY(-50%) translateX(3px); }
.woocommerce-tabs ul.tabs { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.woocommerce-tabs ul.tabs a { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--muted); padding: 10px 0; }
.woocommerce-tabs ul.tabs li.active a { color: var(--color-brand-blue); box-shadow: inset 0 -2px 0 var(--color-brand-blue); }
.woocommerce-tabs .panel { max-width: 68ch; padding-top: 20px; }
/* de automatische panel-kop is dubbelop met de tab zelf */
.woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce-tabs .panel h2 { font-size: 19px; margin: 28px 0 12px; }
.woocommerce-tabs .panel p { font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 14px; }
/* De legacy-copy opent met een cursieve pay-off tussen aanhalingstekens; als
cursief blok op leesgrootte leest dat als een fout, als lead als een intro. */
.woocommerce-tabs .panel > p:first-of-type em {
display: block; font-style: normal;
font-family: var(--font-display); font-weight: 700;
font-size: 19px; line-height: 1.45; color: var(--ink);
}
/* "Eigenschappen" is een lijst van tien korte regels. Onder elkaar met bullets
is dat een kolom van tien; in twee kolommen met het DS-vinkje is het een
scanbaar blok. */
.woocommerce-tabs .panel ul {
list-style: none; margin: 4px 0 22px; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; gap: 4px 30px;
}
.woocommerce-tabs .panel li {
display: flex; gap: 11px; align-items: flex-start;
padding: 8px 0; font-size: 14.5px; line-height: 1.5; color: var(--ink);
}
/* Het vinkje in een getint vierkantje i.p.v. een los groen teken: zelfde
bouwsteen als de trustbar-iconen, waardoor de lijst bij de rest hoort en
niet als een kale opsomming leest. */
.woocommerce-tabs .panel li::before {
content: "\2713"; flex: none;
width: 20px; height: 20px; border-radius: 6px; margin-top: -1px;
background: var(--color-brand-blue-tint); color: var(--color-brand-blue);
display: grid; place-items: center; font-size: 11px; font-weight: 800;
}
/* galerij: vierkant vak bij één afbeelding */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:only-child { aspect-ratio: 1 / 1; }
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:only-child img { width: 100%; height: 100%; object-fit: contain; }
.woocommerce-tabs .panel p { line-height: 1.75; }
.woocommerce-tabs .panel ul { list-style: none; margin: 12px 0 18px; padding: 0; }
.woocommerce-tabs .panel ul li { position: relative; padding: 4px 0 4px 28px; line-height: 1.55; }
.woocommerce-tabs .panel ul li::before { content: "\2713"; position: absolute; left: 2px; top: 4px; color: var(--success); font-weight: 800; }
.woocommerce-tabs table.shop_attributes { border-collapse: collapse; }
.woocommerce-tabs table.shop_attributes th, .woocommerce-tabs table.shop_attributes td { border: 0; border-bottom: 1px solid var(--line); padding: 8px 14px 8px 0; text-align: left; }
/* uitgelicht product (theme-optie) — brede card tussen tabs en related */
.kb-pdp-featured {
grid-column: 1 / -1; display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: center;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
box-shadow: var(--shadow-soft); padding: 26px; margin-top: 34px;
}
.kb-pdp-featured .media { display: grid; place-items: center; background: var(--paper-alt); border-radius: 12px; aspect-ratio: 4 / 3; padding: 14px; overflow: hidden; }
.kb-pdp-featured .media img { mix-blend-mode: multiply; width: 100%; height: 100%; object-fit: contain; }
.kb-pdp-featured .body h3 { font-size: 22px; margin: 6px 0 8px; }
.kb-pdp-featured .body h3 a { color: var(--ink); }
.kb-pdp-featured .body h3 a:hover { color: var(--color-brand-blue); }
.kb-pdp-featured .desc { color: var(--muted); font-size: 14.5px; line-height: 1.65; max-width: 64ch; margin: 0 0 16px; }
.kb-pdp-featured .foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.kb-pdp-featured .foot .price { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink); }
/* navy banner als afsluiter van de PDP */
.kb-pdp-banner { grid-column: 1 / -1; margin-top: 34px; }
.kb-pdp-banner .kb-navy-banner { padding: 34px 38px; }
.kb-pdp-banner .kb-navy-banner p { margin-bottom: 20px; }
/* related */
.single-product .related.products, .single-product .up-sells { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 34px; padding-top: 28px; }
.related.products > h2, .up-sells > h2 { font-size: 22px; margin-bottom: 18px; }
.related.products ul.products, .up-sells ul.products { grid-template-columns: repeat(4, 1fr); }
/* ====== Qty (DS: pdp/cart) ====== */
.quantity { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-input); overflow: hidden; background: var(--surface); }
.quantity .qty {
width: 48px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
border-radius: 0; text-align: center; box-shadow: none; -moz-appearance: textfield;
}
.quantity .qty::-webkit-outer-spin-button, .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; }
.kb-qty-btn { width: 36px; border: 0; background: var(--surface); color: var(--ink-soft); font-size: 16px; box-shadow: none; border-radius: 0; padding: 0; }
.kb-qty-btn:hover { background: var(--color-brand-blue-tint); color: var(--color-brand-blue); transform: none; box-shadow: none; }
/* ====== Stappenbalk: volle breedte, 3 gelijke segmenten ====== */
.kb-steps {
display: grid; grid-template-columns: repeat(3, 1fr); margin: 10px 0 26px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
box-shadow: var(--shadow-soft); overflow: hidden;
}
.kb-steps .sep { display: none; }
.kb-steps a { text-decoration: none; }
.kb-steps a:hover { background: var(--color-brand-blue-tint); }
.kb-steps span, .kb-steps a {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
font-size: 14px; font-weight: 600; color: var(--muted);
padding: 14px 10px; border-right: 1px solid var(--line);
}
.kb-steps span:last-of-type, .kb-steps > *:nth-last-child(1) { border-right: 0; }
.kb-steps .active { background: var(--color-brand-blue-tint); }
.kb-steps .num {
font-style: normal; width: 26px; height: 26px; border-radius: 50%;
border: 1.5px solid var(--line); background: var(--surface);
display: grid; place-items: center; font-size: 12.5px; font-weight: 800;
font-family: var(--font-display); color: var(--muted);
}
.kb-steps .active { color: var(--ink); }
.kb-steps .active .num { background: var(--color-brand-blue); border-color: var(--color-brand-blue); color: #fff; }
.kb-steps .done { color: var(--success); }
.kb-steps .done .num { border-color: var(--success); color: var(--success); }
.kb-steps .sep { font-style: normal; color: var(--line); font-size: 18px; line-height: 1; }
/* ====== Winkelwagen (DS: cart.html) ====== */
/* productlijst in een witte card */
.woocommerce-cart-form {
margin-bottom: 10px; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 8px 24px 20px;
}
.woocommerce-cart .kb-wc-page, .woocommerce-checkout .kb-wc-page { padding-top: 26px; }
.woocommerce-cart .woocommerce { display: block; }
table.shop_table { width: 100%; border-collapse: collapse; border: 0; }
table.shop_table th { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); text-align: left; border-bottom: 2px solid var(--line); padding: 0 10px 10px; }
/* bon-stijl cart: kolomkoppen overbodig, eerste rij zonder toplijn */
.woocommerce-cart-form table.shop_table thead { display: none; }
.woocommerce-cart-form table.shop_table tbody tr:first-child td { border-top: 0; }
table.shop_table td { border-bottom: 1px solid var(--line); padding: 16px 10px; vertical-align: middle; }
.woocommerce-cart-form .product-remove { width: 36px; }
.woocommerce-cart-form .product-remove a {
display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
border: 1px solid var(--line); background: var(--surface); color: var(--muted) !important; font-size: 14px; line-height: 1;
}
.woocommerce-cart-form .product-remove a:hover { color: var(--danger) !important; border-color: var(--danger); }
.woocommerce-cart-form .product-thumbnail { width: 76px; }
.woocommerce-cart-form .product-thumbnail img { width: 64px; height: 64px; object-fit: contain; background: var(--paper-alt); border-radius: 10px; mix-blend-mode: multiply; padding: 5px; display: block; }
.woocommerce-cart-form .product-name a { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.woocommerce-cart-form .product-name a:hover { color: var(--color-brand-blue); }
.woocommerce-cart-form .product-name .variation { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; display: flex; gap: 6px; }
.woocommerce-cart-form .product-name .variation dt, .woocommerce-cart-form .product-name .variation dd { margin: 0; display: inline; }
.woocommerce-cart-form .product-subtotal { font-family: var(--font-display); font-weight: 800; color: var(--ink); text-align: right; }
/* losse prijs-kolom is dubbelop met de staffel-dropdown en het subtotaal */
.woocommerce-cart-form th.product-price, .woocommerce-cart-form td.product-price { display: none; }
.woocommerce-cart-form td.actions { display: none; }
.woocommerce-cart-form td.actions .coupon { display: inline-flex; gap: 8px; margin-right: 12px; }
.woocommerce-cart-form td.actions .coupon input { width: 160px; }
/* horizontale afrekenbalk over de volle breedte */
.cart-collaterals { margin-top: 18px; }
/* Geen kaart meer: de totalen-tabel erin staat uit (het totaal staat in het
productenblok), dus bleef er een witte kaart over die voor tweederde leeg
was. Knoppen en trust-strip staan nu gewoon op de pagina. */
.cart-collaterals .cart_totals {
background: none; border: 0; box-shadow: none; padding: 0;
display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
}
.cart_totals h2 { display: none; }
/* totalen-tabel niet meer in de balk: het totaal staat in het productenblok */
.cart_totals table.shop_table { display: none !important; }
/* kassabon-totaal rechtsonder in het productenblok */
.kb-cart-total {
display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
margin-top: 2px; padding: 10px 10px 6px;
}
.kb-cart-total .lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.kb-cart-total .amt { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--ink); }
.kb-cart-total small { font-size: 12px; color: var(--muted); }
/* rijen als inline stat-blokken in de balk */
.cart_totals table.shop_table, .cart_totals table.shop_table tbody { display: contents; }
.cart_totals table.shop_table tr { display: block; border: 0; padding: 0; }
.cart_totals table.shop_table th, .cart_totals table.shop_table td { display: block; border: 0; padding: 0; }
.cart_totals table.shop_table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.cart_totals table.shop_table td { text-align: left; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--ink); }
.cart_totals .order-total td { font-size: 19px; }
.cart_totals .includes_tax, #order_review .includes_tax { display: block; font-family: var(--font-sans); font-size: 12px; font-weight: 400; color: var(--muted); }
/* verzending op de cart: alleen de gekozen methode compact tonen (kiezen doe je bij afrekenen) */
.woocommerce-cart tr.shipping ul.woocommerce-shipping-methods li { display: none; }
.woocommerce-cart tr.shipping li:has(.shipping_method:checked) { display: block; border: 0; background: none; padding: 0; margin: 0; }
.woocommerce-cart tr.shipping li:has(.shipping_method:checked) input { display: none; }
.woocommerce-cart tr.shipping li:has(.shipping_method:checked) label { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--ink); cursor: default; display: inline; }
.woocommerce-cart tr.shipping li:has(.shipping_method:checked) label .amount { margin-left: 4px; font-size: 16px; }
.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .woocommerce-shipping-calculator,
.woocommerce-cart .kb-pickup-hint { display: none; }
.woocommerce-shipping-methods { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; }
.woocommerce-shipping-methods li {
display: flex; align-items: center; gap: 10px;
border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
padding: 9px 12px; margin: 0 0 6px;
}
.woocommerce-shipping-methods li:has(.shipping_method:checked) {
border-color: var(--color-brand-blue); background: var(--color-brand-blue-tint);
}
.woocommerce-shipping-methods input.shipping_method { flex: none; margin: 0; }
.woocommerce-shipping-methods label {
display: flex; align-items: center; gap: 8px; flex: 1; margin: 0;
font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; line-height: 1.35;
}
.woocommerce-shipping-methods li:has(.shipping_method:checked) label { color: var(--ink); }
.woocommerce-shipping-methods label .amount { margin-left: auto; font-family: var(--font-display); font-weight: 800; font-size: 13.5px; color: var(--ink); white-space: nowrap; }
/* PostNL-logootje netjes klein vóór de methodenaam */
.postnl_shipping_method_icon {
display: inline-block; height: 18px; width: auto; flex: none;
margin: 0; vertical-align: middle;
}
.kb-pickup-hint { flex-basis: 100%; font-size: 12px; color: var(--muted); padding: 2px 0 0 27px; }
.woocommerce-shipping-methods li { flex-wrap: wrap; }
.woocommerce-shipping-destination { font-size: 12.5px; color: var(--muted); margin: 10px 0 2px; line-height: 1.5; }
.cart_totals .woocommerce-shipping-destination, .cart_totals .woocommerce-shipping-calculator { font-size: 12.5px; }
.shipping-calculator-button { font-size: 13px; font-weight: 600; }
.woocommerce-cart .button[name="update_cart"] { display: none !important; }
.wc-proceed-to-checkout { margin: 0 0 0 auto; display: flex; gap: 12px; align-items: center; }
.wc-proceed-to-checkout .checkout-button { display: inline-flex; width: auto; font-size: 15px; padding: 14px 36px; }
/* USP's onder de afrekenbalk: hairline-strip, dezelfde taal als de trustbar op
de homepage (die is van kaarten naar lijnen gegaan) */
.cart-collaterals .kb-trust-grid {
flex-basis: 100%; order: 10; margin: 18px 0 0;
grid-template-columns: repeat(4, 1fr); gap: 0;
background: none; padding: 0;
border-top: 1px solid var(--line);
}
.cart-collaterals .kb-trust-grid span {
background: none; border: 0; border-right: 1px solid var(--line);
border-radius: 0; padding: 16px 20px; font-size: 13px; align-items: flex-start;
}
.cart-collaterals .kb-trust-grid span:first-child { padding-left: 0; }
.cart-collaterals .kb-trust-grid span:last-child { border-right: 0; padding-right: 0; }
/* empty-state: card met icoon, titel en CTA */
.kb-empty-cart {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
box-shadow: var(--shadow-soft); text-align: center;
padding: 48px 24px 44px; max-width: 520px; margin: 14px auto 40px;
}
.kb-empty-cart .ic {
width: 64px; height: 64px; border-radius: 18px;
background: var(--color-brand-blue-tint); color: var(--color-brand-blue);
display: grid; place-items: center; margin: 0 auto 18px;
}
.kb-empty-cart h2 { font-size: 22px; margin: 0 0 8px; }
.kb-empty-cart p { color: var(--muted); font-size: 14.5px; line-height: 1.6; max-width: 40ch; margin: 0 auto 22px; }
.return-to-shop { display: none; }
.cart-empty.woocommerce-info { display: none; }
/* ====== Checkout (DS: checkout.html) ====== */
form.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; }
/* De samenvatting rechts is een witte kaart, het formulier links stond kaal op
de achtergrond. Die asymmetrie liet de hoofdkolom onaf ogen; nu zijn het
twee gestapelde kaarten met dezelfde oppervlaktetaal als de kolom ernaast. */
#customer_details, .kb-shipping-section {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-card); box-shadow: var(--shadow-soft);
padding: 24px 26px 26px;
}
/* :not() is hier geen finesse maar noodzaak: Woo zet de checkbox "Verzenden
naar een ander adres?" in een
, die anders in mono-kapitalen met brede
letterspatiëring zou staan. */
#customer_details h3:not(#ship-to-different-address),
#order_review_heading, .kb-shipping-section h3 {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin: 0 0 16px;
}
#ship-to-different-address { margin: 0 0 14px; font-size: inherit; font-weight: inherit; }
/* de kop van de samenvatting staat buiten de kaart en houdt dus wat lucht */
#order_review_heading { margin-bottom: 10px; }
/* verzendsectie in de hoofdkolom */
.kb-shipping-section { grid-column: 1; margin-top: 18px; }
.kb-shipping-section .woocommerce-shipping-methods li { padding: 12px 14px; }
.kb-shipping-section .woocommerce-shipping-methods label { font-size: 14px; }
.kb-shipping-section .postnl_checkout_container { margin-top: 10px; width: 100%; }
/* lege staat verzendopties: een blok dat aangeeft dát hier straks iets komt
en wat de bezoeker daarvoor moet doen (was één losse grijze zin) */
.kb-shipping-empty {
display: flex; gap: 14px; align-items: flex-start;
background: var(--paper-alt); border: 1px dashed var(--line);
border-radius: var(--radius-card); padding: 18px 20px;
}
.kb-shipping-empty .ic {
flex: none; width: 30px; height: 30px; border-radius: 9px;
background: var(--surface); border: 1px solid var(--line);
display: grid; place-items: center; color: var(--muted);
font-size: 15px; letter-spacing: 2px; transform: rotate(90deg);
}
.kb-shipping-empty strong { display: block; font-family: var(--font-display); font-size: 14.5px; color: var(--ink); margin-bottom: 3px; }
.kb-shipping-empty span:not(.ic) { display: block; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 56ch; }
/* samenvattingsregel in de sidebar */
#order_review .kb-shipping-summary td { font-weight: 600; }
form.woocommerce-checkout .form-row { margin: 0 0 12px; padding: 0; display: block; }
form.woocommerce-checkout .form-row-first, form.woocommerce-checkout .form-row-last {
width: calc(50% - 6px) !important; display: inline-block !important; vertical-align: top; float: none !important;
}
form.woocommerce-checkout .form-row-first { margin-right: 8px !important; }
/* de PostNL-plugin herschrijft classes client-side (postcode/straat → wide);
op ID vastpinnen zodat de NL-indeling altijd 2-koloms blijft */
#billing_postcode_field, #billing_house_number_field, #billing_address_1_field, #billing_city_field,
#billing_phone_field, #billing_email_field,
#shipping_postcode_field, #shipping_house_number_field, #shipping_address_1_field, #shipping_city_field {
width: calc(50% - 6px) !important; display: inline-block !important; vertical-align: top; float: none !important;
}
#billing_postcode_field, #billing_address_1_field, #billing_phone_field,
#shipping_postcode_field, #shipping_address_1_field { margin-right: 8px !important; }
form.woocommerce-checkout .form-row label { display: block; margin-bottom: 6px; }
form.woocommerce-checkout .form-row .woocommerce-input-wrapper { display: block; }
.woocommerce-account-fields label.checkbox, #ship-to-different-address label {
display: inline-flex; gap: 9px; align-items: center; font-size: 14px; font-weight: 600; cursor: pointer;
}
#ship-to-different-address { font-size: 14px; margin: 6px 0; }
#order_review_heading { display: none; }
#ship-to-different-address label { text-transform: none; letter-spacing: 0; font-size: 14px; }
#order_review {
grid-column: 2; grid-row: 1 / span 3;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
box-shadow: var(--shadow-soft); padding: 20px 24px 24px; position: sticky; top: 20px;
}
#order_review::before { content: "Je bestelling"; display: block; font-family: var(--font-display); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink); margin-bottom: 8px; }
/* zelfde flex-rijen als de cart-totalen: geen tabel-krimp, verzendopties vol breed */
#order_review table.shop_table, #order_review table.shop_table thead,
#order_review table.shop_table tbody, #order_review table.shop_table tfoot { display: block; width: 100%; border: 0; }
#order_review table.shop_table tr {
display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
padding: 9px 0; border-bottom: 1px solid var(--line);
}
#order_review table.shop_table th, #order_review table.shop_table td { display: block; border: 0; padding: 0; }
#order_review table.shop_table thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
#order_review table.shop_table td, #order_review table.shop_table tfoot th { font-size: 14px; }
#order_review table.shop_table tfoot th { color: var(--ink-soft); font-weight: 600; flex: none; }
#order_review table.shop_table .product-name { flex: 1; text-align: left; min-width: 0; }
.kb-review-var { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); margin-top: 1px; }
#order_review table.shop_table td:last-child { text-align: right; font-weight: 700; }
#order_review .order-total th, #order_review .order-total td { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ink); }
#order_review table.shop_table tr.cart-subtotal { display: none; }
#order_review tr.shipping, #order_review tr.woocommerce-shipping-totals { flex-direction: column; align-items: stretch; gap: 4px; }
#order_review tr.shipping td, #order_review tr.woocommerce-shipping-totals td { text-align: left; width: 100%; font-weight: 400; }
/* PostNL-widget opent alleen nog voor de afhaal-methode (kb.js) — de tabs en de
"Zending thuis ontvangen?"-tekst zijn dan ruis: verbergen */
.postnl_checkout_tab_container { display: none !important; }
.postnl_content_desc { display: none !important; }
/* PostNL bezorgmoment-widget in huisstijl (bezorgdagen uit; afhaalpunten-picker
blijft nodig voor de "Kies je Afhaallocatie zelf"-methode) */
.postnl_checkout_container { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 8px; }
.postnl_checkout_tab_list { display: flex; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.postnl_checkout_tab_list li { flex: 1; }
.postnl_checkout_tab {
display: block; text-align: center; padding: 10px 8px; margin: 0; cursor: pointer;
background: var(--paper) !important; color: var(--ink-soft) !important;
font-family: var(--font-display); font-weight: 700; font-size: 13px; border: 0 !important;
}
.postnl_checkout_tab_list li.active .postnl_checkout_tab { background: var(--color-brand-blue) !important; color: #fff !important; }
.postnl_checkout_tab input { display: none; }
.postnl_list { list-style: none; margin: 0; padding: 0; }
/* afhaalpunten: kaartje per locatie — naam + afstand als kop, adres links, tijd rechts */
.kb-shipping-section .postnl_checkout_container { border: 0; border-radius: 0; overflow: visible; }
.postnl_dropoff_points_list > li {
border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
overflow: hidden; margin: 0 0 8px;
}
.postnl_dropoff_points_list .list_title {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
background: var(--paper) !important; padding: 9px 14px; border-bottom: 1px solid var(--line);
}
.postnl_dropoff_points_list .list_title .company { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ink); }
.postnl_dropoff_points_list .list_title .distance { font-size: 12px; color: var(--muted); margin-left: auto; text-align: right; }
.postnl_sub_list { list-style: none; margin: 0; padding: 0; }
.postnl_sub_list li { background: var(--surface) !important; }
.postnl_sub_list li.active { background: var(--color-brand-blue-tint) !important; }
.postnl_sub_radio_label {
display: flex; align-items: center; gap: 12px; padding: 11px 14px; margin: 0; cursor: pointer;
}
.postnl_sub_radio_label input { flex: none; margin: 0; }
.postnl_sub_radio_label span { flex: 1; text-align: left; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); line-height: 1.45; }
.postnl_sub_radio_label i {
order: 3; margin-left: auto; flex: none; font-style: normal; text-align: right;
font-size: 12px; color: var(--muted); line-height: 1.4; white-space: nowrap;
}
.postnl_sub_list li.active .postnl_sub_radio_label span { color: var(--ink); font-weight: 600; }
#payment { background: none; margin-top: 14px; }
#payment ul.payment_methods { list-style: none; margin: 0; padding: 0; }
/* betaalmethodes als keuzerijen (zelfde patroon als verzending) — klaar voor iDEAL erbij */
#payment .wc_payment_method {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
padding: 10px 12px; margin: 0 0 6px;
}
#payment .wc_payment_method:has(input:checked) { border-color: var(--color-brand-blue); background: var(--color-brand-blue-tint); }
#payment .wc_payment_method input[name="payment_method"] { flex: none; margin: 0; }
#payment .wc_payment_method > label { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 14px; margin: 0; cursor: pointer; flex: 1; display: flex; align-items: center; gap: 8px; }
#payment .wc_payment_method > label img { max-height: 22px; width: auto; }
#payment .payment_box { flex-basis: 100%; }
/* De uitleg zat als getinte kaart ín een al getinte gekozen methode: tint op
tint, met een gat van veertig pixels tussen de naam en de tekst. Nu een
toelichting onder een hairline binnen dezelfde rij. */
#payment div.payment_box {
background: none; border-radius: 0; padding: 10px 0 2px;
font-size: 13.5px; line-height: 1.6; color: var(--ink-soft);
margin: 10px 0 0; border-top: 1px solid rgba(21,84,176,.16);
}
#payment div.payment_box p { margin: 0; }
#payment .place-order { padding: 0; margin-top: 8px; }
#place_order { width: 100%; padding: 15px; }
.woocommerce-terms-and-conditions-wrapper { font-size: 13px; margin-bottom: 10px; }
.woocommerce-form-login-toggle .woocommerce-info, .woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 18px; }
form.checkout_coupon, form.woocommerce-form-login { max-width: 560px; margin-bottom: 20px; }
/* ====== Bevestigingspagina (order received) ====== */
.woocommerce-thankyou-order-received {
position: relative; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-card); box-shadow: var(--shadow-soft);
font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--ink);
padding: 22px 24px 22px 66px; margin: 0 0 18px;
}
.woocommerce-thankyou-order-received::before {
content: "\2713"; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
width: 32px; height: 32px; border-radius: 10px; background: var(--success); color: #fff;
font-size: 16px; display: grid; place-items: center;
}
/* Vier losse kaarten met bestelnummer/datum/totaal/methode waren dezelfde
laag-familie als het productgrid; als hairline-strip (zelfde taal als de
trustbar op de homepage) leest het als één samenvattingsregel. */
.woocommerce-thankyou-order-details {
list-style: none; margin: 0 0 30px; padding: 0;
display: grid; grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.woocommerce-thankyou-order-details li {
background: transparent; border: 0; border-radius: 0;
padding: 16px 22px; font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
color: var(--muted); line-height: 1.5; margin: 0;
border-right: 1px solid var(--line) !important;
}
.woocommerce-thankyou-order-details li:first-child { padding-left: 0; }
.woocommerce-thankyou-order-details li:last-child { border-right: 0 !important; padding-right: 0; }
.woocommerce-thankyou-order-details li strong {
display: block; font-family: var(--font-display); font-size: 16px; font-weight: 800;
color: var(--ink); text-transform: none; letter-spacing: 0; margin-top: 2px;
}
.woocommerce-order section { margin-bottom: 26px; }
/* "wat gebeurt er nu": hergebruikt de flow van de homepage, zodat het
bestelproces er vóór en ná het afrekenen hetzelfde uitziet */
.kb-thankyou-next { padding: 26px 0 4px; border-top: 1px solid var(--line); }
.kb-thankyou-next h2 { margin-bottom: 22px; }
.woocommerce-order h2 { font-size: 18px; margin: 0 0 12px; }
/* betaalinstructies + bankgegevens als tint-card */
.woocommerce-bacs-bank-details, .wc-bacs-bank-details-heading + ul { margin: 0; }
.woocommerce-order > p, .woocommerce-order .woocommerce-info {
font-size: 14.5px; line-height: 1.65;
}
.wc-bacs-bank-details {
list-style: none; margin: 0 0 10px; padding: 16px 18px;
background: var(--color-brand-blue-tint); border-radius: 12px;
}
.wc-bacs-bank-details li { font-size: 14px; color: var(--ink-soft); padding: 3px 0; }
.wc-bacs-bank-details li strong { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); }
.wc-bacs-bank-details-heading { font-size: 15px !important; margin: 0 0 2px; }
/* de rekeninghouder is een bijschrift bij de gegevens, geen tweede kop */
.wc-bacs-bank-details-account-name {
font-size: 13.5px !important; font-family: var(--font-sans); font-weight: 500;
color: var(--muted); margin: 0 0 8px;
}
/* besteldetails-tabel als card */
.woocommerce-table--order-details {
width: 100%; border-collapse: collapse;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
box-shadow: var(--shadow-soft); overflow: hidden;
}
table.woocommerce-table--order-details th, table.woocommerce-table--order-details td {
text-align: left; padding: 12px 18px; border: 0 !important; font-size: 14px; vertical-align: middle;
}
/* rand op de rij i.p.v. per cel — geen hakkelige lijnen meer */
.woocommerce-table--order-details tr { border-bottom: 1px solid var(--line); }
.woocommerce-table--order-details tfoot th { font-weight: 600; color: var(--ink-soft); text-transform: uppercase; font-size: 11.5px; letter-spacing: .07em; }
.woocommerce-table--order-details thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.woocommerce-table--order-details td:last-child, .woocommerce-table--order-details th:last-child { text-align: right; }
.woocommerce-table--order-details tfoot tr:last-child { border-bottom: 0; }
.woocommerce-table--order-details tfoot tr:last-child th, .woocommerce-table--order-details tfoot tr:last-child td {
font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink); text-transform: none; letter-spacing: 0;
}
.woocommerce-table--order-details .woocommerce-table__product-name a { font-weight: 600; }
/* adresblokken naast elkaar als cards */
.woocommerce-customer-details .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.woocommerce-customer-details address {
font-style: normal; background: var(--surface); border: 1px solid var(--line);
border-radius: 12px; padding: 16px 18px; font-size: 14px; line-height: 1.7; color: var(--ink-soft);
}
.woocommerce-customer-details .woocommerce-column__title { font-size: 15px; margin-bottom: 8px; }
@media (max-width: 760px) {
/* 2x2: verticale lijn tussen de kolommen, horizontale tussen de rijen */
.woocommerce-thankyou-order-details { grid-template-columns: 1fr 1fr; }
.woocommerce-thankyou-order-details li { padding: 14px 18px; }
.woocommerce-thankyou-order-details li:nth-child(odd) { padding-left: 0; }
.woocommerce-thankyou-order-details li:nth-child(even) { border-right: 0 !important; padding-right: 0; }
.woocommerce-thankyou-order-details li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.woocommerce-customer-details .col2-set { grid-template-columns: 1fr; }
}
/* ====== Account ====== */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line); }
.woocommerce-MyAccount-navigation a { display: block; padding: 11px 4px; font-weight: 600; color: var(--ink-soft); }
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation a:hover { color: var(--color-brand-blue); }
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: start; }
/* Uitgelogd: formulier links, uitleg rechts. Het formulier alléén stond als
smalle kaart in een leeg vlak van bijna de hele paginabreedte. */
.woocommerce-account:not(.logged-in) .woocommerce {
display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
grid-template-rows: auto auto; gap: 0 44px; align-items: start; max-width: none;
}
/* Zonder registratie rendert Woo het formulier zónder #customer_login-wrapper,
waardoor de losse een eigen gridcel pakte en formulier én uitleg een
plek opschoven. Daarom expliciet geplaatst i.p.v. op auto-placement leunen. */
.woocommerce-account:not(.logged-in) .woocommerce > h2 { grid-column: 1; grid-row: 1; font-size: 20px; margin: 0 0 14px; }
.woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-form-login { grid-column: 1; grid-row: 2; }
.woocommerce-account:not(.logged-in) .woocommerce > .kb-login-side { grid-column: 2; grid-row: 1 / span 2; }
.kb-login-side { padding-top: 4px; }
.kb-login-side p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 16px; max-width: 52ch; }
.kb-login-side ul { list-style: none; margin: 0 0 20px; padding: 0; }
.kb-login-side li { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; padding: 4px 0; color: var(--ink-soft); }
.kb-login-side li b { color: var(--success); font-weight: 800; }
/* ingelogd: welkomblok + bestemmingstegels (zie woocommerce/myaccount/dashboard.php) */
.kb-acc-welkom h2 { font-size: 22px; margin: 0 0 6px; }
.kb-acc-welkom p { font-size: 14.5px; color: var(--muted); margin: 0 0 22px; }
.kb-acc-tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kb-acc-tegel {
position: relative; display: block; background: var(--surface);
border: 1px solid var(--line); border-radius: var(--radius-card);
padding: 18px 44px 18px 18px; color: inherit;
transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s, border-color .18s;
}
.kb-acc-tegel:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--color-brand-blue-tint); }
.kb-acc-tegel strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15.5px; margin-bottom: 5px; }
.kb-acc-tegel span { display: block; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.kb-acc-tegel em {
position: absolute; right: 16px; top: 18px; font-style: normal;
color: var(--color-brand-blue); font-size: 17px; transition: transform .18s;
}
.kb-acc-tegel:hover em { transform: translateX(3px); }
.kb-acc-hulp { margin-top: 22px; font-size: 14px; color: var(--muted); }
/* adressen: Woo geeft hier kale h2/h3 met een cursief en een losse
"Bewerken"-link erboven. Als twee kaarten met de knop rechtsboven leest het
als wat het is: twee gegevensblokken die je kunt wijzigen. */
.woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.woocommerce-Address {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-card); padding: 18px 20px 20px;
}
.woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.woocommerce-Address-title h2, .woocommerce-Address-title h3 { font-size: 16px; margin: 0; }
.woocommerce-Address-title .edit {
font-family: var(--font-display); font-weight: 700; font-size: 13px;
color: var(--color-brand-blue); white-space: nowrap;
}
.woocommerce-Address address {
font-style: normal; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft);
}
.woocommerce-MyAccount-content > p:first-child { font-size: 14.5px; color: var(--muted); margin: 0 0 18px; }
/* bestellingen-tabel */
.woocommerce-orders-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.woocommerce-orders-table th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.woocommerce-orders-table td { padding: 14px 16px; font-size: 14px; border-bottom: 1px solid var(--line); }
.woocommerce-orders-table tr:last-child td { border-bottom: 0; }
form.woocommerce-form-login, form.woocommerce-form-register {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
box-shadow: var(--shadow-soft); padding: 24px 26px;
}
form.woocommerce-form-login .form-row, form.woocommerce-form-register .form-row { margin-bottom: 14px; }
form.woocommerce-form-login .woocommerce-form-login__rememberme { display: inline-flex; gap: 8px; align-items: center; margin-right: 16px; }
.woocommerce-LostPassword { font-size: 13.5px; }
/* wachtwoord-toon-knopje netjes ín het veld */
.password-input { position: relative; display: block; }
.show-password-input {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
width: 22px; height: 22px; cursor: pointer; opacity: .55;
}
.show-password-input::after { content: "\1F441"; font-size: 15px; line-height: 22px; }
.show-password-input:hover { opacity: 1; }
.show-password-input.display-password::after { opacity: .4; }
/* ====== Meldingen (DS: forms.html) ====== */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
position: relative; list-style: none;
background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
box-shadow: var(--shadow-soft); padding: 13px 16px 13px 58px;
font-size: 14px; line-height: 1.5; margin: 0 0 14px; color: var(--ink-soft);
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before, .woocommerce-error li::before {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
width: 30px; height: 30px; border-radius: 9px; color: #fff; font-weight: 800; font-size: 14px;
display: grid; place-items: center;
}
.woocommerce-message::before { content: "\2713"; background: var(--success); }
.woocommerce-info::before { content: "i"; background: var(--color-brand-blue); }
.woocommerce-error { padding-left: 16px; }
.woocommerce-error li { position: relative; padding: 2px 0 2px 42px; margin: 0; }
.woocommerce-error li::before { content: "\2715"; background: var(--danger); left: 0; }
/* melding als flex-regel: tekst links, actieknop (outline) rechts */
.woocommerce-message, .woocommerce-info { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.woocommerce-message .button, .woocommerce-info .button {
float: none; order: 2; margin-left: auto; flex: none;
padding: 8px 16px; font-size: 13px;
background: var(--surface); color: var(--color-brand-blue);
border: 1.5px solid var(--line); box-shadow: none;
}
.woocommerce-message .button:hover, .woocommerce-info .button:hover {
background: var(--color-brand-blue-tint); border-color: var(--color-brand-blue);
color: var(--color-brand-blue-deep); transform: none; box-shadow: none;
}
/* ====== Breadcrumbs generiek ====== */
.kb-breadcrumbs { font-size: 12.5px; color: var(--muted); letter-spacing: .01em; }
.kb-breadcrumbs a { color: var(--muted); font-weight: 500; }
.kb-breadcrumbs a:hover { color: var(--color-brand-blue); }
.kb-bc-sep { color: var(--line); padding: 0 2px; }
.kb-pdp-crumbs { padding-top: 16px; }
.kb-cat-header .kb-bc-sep { color: var(--line); }
/* ====== Entry-content ======
Contentpagina's (Verzending & betalen, Contact) hadden alleen een regelhoogte.
Leesmaat, koppenritme en een tarieventabel die op mobiel niet omvalt. */
/* ⚠️ Winkelwagen, afrekenen en mijn-account zijn óók gewone WP-pagina's en lopen
dus door dezelfde .kb-entry. Daar is dit geen leesmaat maar een keurslijf: de
cart-tabel en het checkoutformulier werden op 68ch geknepen, en `.kb-entry a`
kleurde de knoplabels brandblauw op een blauwe knop ("Doorgaan naar afrekenen"
was onleesbaar). De leestypografie geldt daarom alleen buiten de WC-pagina's;
page.php zet daar `.kb-wc-page` op de container. */
.kb-content:not(.kb-wc-page) .kb-entry { max-width: 68ch; }
.kb-content:not(.kb-wc-page) .kb-entry p { font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 15px; }
.kb-content:not(.kb-wc-page) .kb-entry a { font-weight: 600; color: var(--color-brand-blue); }
.kb-content:not(.kb-wc-page) .kb-entry a:hover { text-decoration: underline; }
.kb-content:not(.kb-wc-page) .kb-entry > p.kb-lead { font-size: 17.5px; line-height: 1.65; color: var(--ink); margin-bottom: 26px; }
.kb-content:not(.kb-wc-page) .kb-entry h2 { font-size: 20px; margin: 34px 0 12px; }
.kb-content:not(.kb-wc-page) .kb-entry h3 { font-size: 16.5px; margin: 24px 0 8px; }
.kb-entry > *:first-child { margin-top: 0; }
/* opsomming met het DS-vinkje, zelfde bouwsteen als op de productpagina */
.kb-entry ul.kb-vinkjes { list-style: none; margin: 0 0 18px; padding: 0; }
/* Bewust géén flex op de
- : dan worden een en de tekst erachter
twee losse flexitems náást elkaar, en begint elke regel op een andere plek
zodra de vetgedrukte aanhef afbreekt. Het vinkje staat daarom absoluut. */
.kb-entry ul.kb-vinkjes li {
position: relative; padding: 7px 0 7px 31px;
font-size: 15px; line-height: 1.6; color: var(--ink-soft);
}
.kb-entry ul.kb-vinkjes li::before {
content: "\2713"; position: absolute; left: 0; top: 9px;
width: 20px; height: 20px; border-radius: 6px;
background: var(--color-brand-blue-tint); color: var(--color-brand-blue);
display: grid; place-items: center; font-size: 11px; font-weight: 800;
}
/* een vetgedrukte aanhef wordt een eigen regel boven de uitleg */
.kb-entry ul.kb-vinkjes li > strong {
display: block; font-family: var(--font-display); font-size: 15px;
color: var(--ink); margin-bottom: 1px;
}
/* FAQ-accordeon met
: werkt zonder JS, is toetsenbord- en
schermlezertoegankelijk, en de browser regelt het openklappen zelf. */
.kb-entry details.kb-faq {
border-bottom: 1px solid var(--line);
}
.kb-entry details.kb-faq:first-of-type { border-top: 1px solid var(--line); }
.kb-entry details.kb-faq > summary {
position: relative; list-style: none; cursor: pointer;
padding: 15px 40px 15px 0;
font-family: var(--font-display); font-weight: 700; font-size: 15.5px;
color: var(--ink); line-height: 1.4;
}
.kb-entry details.kb-faq > summary::-webkit-details-marker { display: none; }
.kb-entry details.kb-faq > summary:hover { color: var(--color-brand-blue); }
.kb-entry details.kb-faq > summary:focus-visible { outline: 2px solid var(--color-brand-blue); outline-offset: 2px; border-radius: 4px; }
/* eigen chevron i.p.v. het driehoekje van de browser */
.kb-entry details.kb-faq > summary::after {
content: ""; position: absolute; right: 8px; top: 21px;
width: 8px; height: 8px; border-right: 2px solid var(--color-brand-blue); border-bottom: 2px solid var(--color-brand-blue);
transform: rotate(45deg); transition: transform .18s ease;
}
.kb-entry details.kb-faq[open] > summary::after { transform: translateY(3px) rotate(225deg); }
.kb-entry details.kb-faq > p { margin: 0 0 16px; padding-right: 40px; font-size: 15px; }
/* tarieventabel: breekt bewust uit de leesmaat, want die is voor lopende tekst */
.kb-entry .kb-tarieven {
width: 100%; max-width: 780px; border-collapse: collapse; margin: 4px 0 22px;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-card); overflow: hidden;
}
.kb-entry .kb-tarieven th {
text-align: left; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.kb-entry .kb-tarieven td { padding: 14px 16px; font-size: 14.5px; vertical-align: top; border-bottom: 1px solid var(--line); }
.kb-entry .kb-tarieven tr:last-child td { border-bottom: 0; }
.kb-entry .kb-tarieven td strong { display: block; font-family: var(--font-display); font-size: 14.5px; color: var(--ink); }
.kb-entry .kb-tarieven td span { display: block; font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.kb-entry .kb-tarieven td:last-child, .kb-entry .kb-tarieven th:last-child { text-align: right; white-space: nowrap; }
.kb-entry .kb-tarieven td:nth-child(2) { color: var(--muted); white-space: nowrap; }
/* ============================================================
Motion (MOTION_INTENSITY 4) — twee bewegingen, allebei met een reden:
.kb-enter = hero bouwt zich bij het laden in leesvolgorde op (hiërarchie)
[data-reveal] = sectie-inhoud komt binnen als je hem bereikt (volgorde)
Geen parallax, geen scroll-hijack: dit is een bestelflow, geen showreel.
Gate op .kb-js zodat alles zichtbaar is als JS faalt, en volledig uit
onder prefers-reduced-motion.
============================================================ */
@media (prefers-reduced-motion: no-preference) {
.kb-js .kb-motion-vol [data-reveal] {
opacity: 0; transform: translateY(20px);
transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
transition-delay: calc(var(--rd, 0) * 70ms);
}
.kb-js .kb-motion-vol [data-reveal].is-in { opacity: 1; transform: none; }
.kb-js [data-reveal-delay="1"] { --rd: 1; }
.kb-js [data-reveal-delay="2"] { --rd: 2; }
.kb-js [data-reveal-delay="3"] { --rd: 3; }
.kb-js :is(.kb-motion-vol, .kb-motion-subtiel) .kb-enter {
opacity: 0; transform: translateY(14px);
animation: kb-enter .6s cubic-bezier(.16,1,.3,1) forwards;
animation-delay: calc(var(--d, 0) * 80ms);
}
@keyframes kb-enter { to { opacity: 1; transform: none; } }
}
/* ====== Responsief ====== */
@media (max-width: 1024px) {
/* 15 categorieën: 3 per rij gaat precies op, net als 5 op desktop */
.kb-cats-grid { grid-template-columns: repeat(3, 1fr); }
.kb-shop-layout { grid-template-columns: 1fr; }
.kb-shop-sidebar { display: none; }
.single-product div.product { grid-template-columns: 1fr; gap: 24px; }
.woocommerce-cart .woocommerce, form.woocommerce-checkout { grid-template-columns: 1fr; }
#order_review { grid-column: 1; grid-row: auto; position: static; }
#order_review_heading { grid-column: 1; display: none; }
.kb-hero-inner, .kb-original-grid { grid-template-columns: 1fr; gap: 32px; }
/* trustbar 2x2: verticale lijn alleen tussen de kolommen, horizontale tussen de rijen */
.kb-trustbar-strip { grid-template-columns: 1fr 1fr; }
.kb-tb-item { padding: 16px 18px; }
.kb-tb-item:nth-child(odd) { padding-left: 0; }
.kb-tb-item:nth-child(even) { border-right: 0; padding-right: 0; }
.kb-tb-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
ul.products, .related.products ul.products { grid-template-columns: repeat(3, 1fr) !important; }
.kb-footer-grid { grid-template-columns: 1fr 1fr; }
}
/* account-onderdelen stapelen; drie tegels naast elkaar worden te smal en
twee adreskaarten passen niet meer naast elkaar */
@media (max-width: 1024px) {
/* categorie-intro: packshot onder de tekst, niet ernaast persen */
.kb-cat-intro { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.kb-cat-intro-media { max-width: 200px; }
/* specificaties onder de beschrijving i.p.v. ernaast */
.kb-pdp-detail { grid-template-columns: 1fr; gap: 26px; }
.single-product .woocommerce-tabs, .kb-pdp-specs { grid-column: 1; }
.kb-pdp-specs { position: static; }
}
@media (max-width: 900px) {
.kb-acc-tegels { grid-template-columns: 1fr; }
.woocommerce-Addresses { grid-template-columns: 1fr; }
.woocommerce-account:not(.logged-in) .woocommerce { grid-template-columns: 1fr; gap: 28px; }
}
/* bestelproces kantelt naar een verticale flow: drie stappen naast elkaar
persen op tablet geeft weeskolommen, de lijn loopt nu langs de nummers */
@media (max-width: 900px) {
.kb-flow { grid-template-columns: 1fr; gap: 0; }
/* verticaal: van de onderkant van het eigen nummer naar het midden van het volgende */
.kb-flow-step:not(:last-child)::before {
left: 23px; right: auto; top: 46px; bottom: -23px; width: 1px; height: auto;
}
.kb-flow-step {
display: grid; grid-template-columns: 46px 1fr;
column-gap: 18px; padding: 0 0 26px;
}
.kb-flow-step:last-child { padding-bottom: 0; }
.kb-flow-step .num { grid-column: 1; grid-row: 1; margin: 0; }
.kb-flow-step h3 { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
.kb-flow-step p { grid-column: 2; grid-row: 2; padding-top: 6px; }
}
@media (max-width: 760px) {
.kb-container { padding-left: 18px; padding-right: 18px; }
.kb-pdp-featured { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
/* zijkolom onder de tekst i.p.v. ernaast */
.kb-content.heeft-zijkolom { grid-template-columns: 1fr; gap: 34px; }
.kb-content-side { position: static; }
/* eigenschappen in twee kolommen is op 390px onleesbaar smal */
.woocommerce-tabs .panel ul { grid-template-columns: 1fr; gap: 0; }
/* tarieventabel: de kolom "waar" valt weg, die staat al in de bezorgwijze */
.kb-entry .kb-tarieven th:nth-child(2), .kb-entry .kb-tarieven td:nth-child(2) { display: none; }
.kb-entry .kb-tarieven th, .kb-entry .kb-tarieven td { padding: 12px 12px; }
.kb-entry .kb-tarieven td span { font-size: 12.5px; }
.kb-search { display: none; }
.kb-mobile-panel .kb-search { display: flex; }
.kb-burger { display: inline-flex; }
.kb-nav-bar { display: none; }
.kb-logo img { height: 36px; }
h1 { font-size: 27px; }
.kb-hero { padding: 36px 0 30px; }
/* kopblok mobiel: packshot onder de tekst, werkbalk gestapeld */
.kb-cat-header { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.kb-cat-header-media { max-width: 170px; }
.kb-shop-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
ul.products, .related.products ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
ul.products li.product .woocommerce-loop-product__title { font-size: 13.5px; padding: 10px 12px 2px; }
ul.products li.product .price { font-size: 13px; padding-bottom: 14px; }
.kb-navy-banner { padding: 30px 24px; }
.kb-navy-banner ul { grid-template-columns: 1fr; }
.kb-cats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.kb-ccard .body { padding: 10px 12px 12px; }
.kb-ccard strong { font-size: 13.5px; }
/* Het aantal vulkaarten is berekend op de desktopkolommen; in een 2-koloms
grid zou dat opnieuw een gat opleveren. Vol breed stapelen kan nooit een
gat geven, ongeacht hoeveel producten de categorie heeft. */
li.product.kb-fill-card { grid-column: 1 / -1; }
.kb-fill-card > a { padding: 18px 44px 18px 18px; }
.kb-footer-grid { grid-template-columns: 1fr; gap: 28px; }
.kb-steps { gap: 8px; }
.kb-steps span { font-size: 12.5px; gap: 6px; }
.kb-steps .num { width: 22px; height: 22px; font-size: 11px; }
.kb-steps .sep { font-size: 14px; }
form.woocommerce-checkout .form-row-first, form.woocommerce-checkout .form-row-last { width: 100%; margin-right: 0; }
table.shop_table thead { display: none; }
.woocommerce-cart-form table.shop_table, .woocommerce-cart-form tbody { display: block; }
.woocommerce-cart-form tr.cart_item {
display: grid; grid-template-columns: 60px minmax(0, 1fr) 30px;
gap: 6px 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line);
}
.woocommerce-cart-form tr.cart_item td { border: 0; padding: 0; }
.woocommerce-cart-form td.product-thumbnail { grid-column: 1; grid-row: 1 / span 3; width: auto; }
.woocommerce-cart-form td.product-thumbnail img { width: 60px; height: 60px; }
.woocommerce-cart-form td.product-name { grid-column: 2; grid-row: 1; align-self: center; }
.woocommerce-cart-form td.product-remove { grid-column: 3; grid-row: 1; justify-self: end; width: auto; }
.woocommerce-cart-form td.product-price { display: none; }
.woocommerce-cart-form td.product-quantity { grid-column: 2 / 4; grid-row: 2; }
.woocommerce-cart-form td.product-quantity .kb-cart-variation { width: 100%; min-width: 0; }
.woocommerce-cart-form td.product-subtotal { grid-column: 2 / 4; grid-row: 3; text-align: right; }
.woocommerce-cart-form tr:last-child { display: block; border: 0; }
.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
}
/* ============================================================
Mobiel-fixes (overflow-scan 390px) — onderaan zodat ze winnen
============================================================ */
@media (max-width: 560px) {
/* stappenbalk mobiel: cirkel boven, label eronder — alle drie zichtbaar */
.kb-steps { display: flex; }
.kb-steps span, .kb-steps a {
flex: 1; flex-direction: column; gap: 5px;
padding: 11px 4px 9px; font-size: 10.5px; letter-spacing: .01em;
border-right: 1px solid var(--line);
}
.kb-steps .lbl { display: inline; white-space: nowrap; }
.kb-steps .num { width: 24px; height: 24px; font-size: 11.5px; flex: none; }
/* cart-knoppen gestapeld en vol breed (CTA bovenop) */
.wc-proceed-to-checkout { flex-direction: column-reverse; align-items: stretch; width: 100%; margin: 0; gap: 10px; }
.wc-proceed-to-checkout .checkout-button { width: 100%; }
.wc-proceed-to-checkout .kb-continue { justify-content: center; }
/* trustbar volledig gestapeld: alleen nog horizontale scheidingslijnen */
.kb-trustbar-strip { grid-template-columns: 1fr; }
.kb-tb-item { min-width: 0; padding: 14px 0; gap: 10px; border-right: 0; }
.kb-tb-item:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
.kb-tb-item:last-child { border-bottom: 0; }
.kb-tb-item > div { min-width: 0; }
.kb-tb-item strong, .kb-tb-item small { overflow-wrap: break-word; }
.cart-collaterals .kb-trust-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.cart-collaterals .kb-trust-grid span { align-items: flex-start; text-align: left; padding: 12px 14px; }
.cart-collaterals .kb-trust-grid b { margin-top: 1px; flex: none; }
.kb-trust-grid span { min-width: 0; overflow-wrap: break-word; }
}