/* * Samengevoegd door wt_css_bundel(). Niet met de hand aanpassen: dit bestand wordt * opnieuw gemaakt zodra een van de bronbestanden verandert. Pas de bron aan in * wp-content/themes/weltechniek.nl/css/. */ /* ==================== /css/header.css ==================== */ /* ============================================================ * Weltechniek Nieuwe Header — production CSS * * Bevat: * - Design tokens (CSS-variabelen) * - Minimal utility-classes (Tailwind-compatible namen, handgeschreven) * - Header-specifieke styling * - Mega-menu (desktop + mobiel) * * Alles gescoped onder body.nieuwe-header-actief voor coexistence met * de oude header van Shoptimizer. * ============================================================ */ /* ---------- 1. DESIGN TOKENS ---------- */ :root { --wrapper-max: 1301px; --wrapper-padding: 1rem; --hdr-utility: 40px; --hdr-main: 64px; --hdr-nav: 70px; --mm-tabs-width: 240px; --mm-panel-max-h: min(70vh, 600px); --wt-blue: #1E3A6D; --wt-blue-soft: #eef2f9; --wt-green: #00bb00; --wt-green-hover: #008d00; } @media (min-width: 640px) { :root { --wrapper-padding: 1.5rem; } } @media (min-width: 1024px) { :root { --wrapper-padding: 2rem; --hdr-main: 80px; } } /* ---------- 2. SCOPED RESET ---------- */ body.nieuwe-header-actief #masthead, body.nieuwe-header-actief #mm-mobile, body.nieuwe-header-actief #mm-backdrop { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } body.nieuwe-header-actief #masthead *, body.nieuwe-header-actief #mm-mobile *, body.nieuwe-header-actief #mm-desktop * { box-sizing: border-box; } /* ---------- 3. WRAPPER ---------- */ body.nieuwe-header-actief .wrapper { width: 100%; max-width: calc(var(--wrapper-max) + 2 * var(--wrapper-padding)); margin-inline: auto; padding-inline: var(--wrapper-padding); box-sizing: border-box; } /* ---------- 4. UTILITIES (Tailwind-compatible) ---------- * Gescoped via :where(#masthead, #mm-mobile, #mm-backdrop) zodat onze * utility-classes alleen binnen het header-domein matchen. Voorkomt * conflicten met Shoptimizer/FiboSearch elders op de pagina die * toevallig dezelfde class-namen gebruiken (mini-cart, filter-drawer). * :where() heeft specificity 0 — plugins/parent theme winnen daar- * buiten netjes vanzelf. * --------------------------------------------------------- */ :where(#masthead, #mm-mobile, #mm-backdrop) .flex { display: flex; } :where(#masthead, #mm-mobile, #mm-backdrop) .inline-flex { display: inline-flex; } :where(#masthead, #mm-mobile, #mm-backdrop) .block { display: block; } :where(#masthead, #mm-mobile, #mm-backdrop) .hidden { display: none; } :where(#masthead, #mm-mobile, #mm-backdrop) .items-center { align-items: center; } :where(#masthead, #mm-mobile, #mm-backdrop) .items-baseline { align-items: baseline; } :where(#masthead, #mm-mobile, #mm-backdrop) .justify-between { justify-content: space-between; } :where(#masthead, #mm-mobile, #mm-backdrop) .justify-center { justify-content: center; } :where(#masthead, #mm-mobile, #mm-backdrop) .flex-1 { flex: 1 1 0%; } :where(#masthead, #mm-mobile, #mm-backdrop) .flex-shrink-0, :where(#masthead, #mm-mobile, #mm-backdrop) .shrink-0 { flex-shrink: 0; } :where(#masthead, #mm-mobile, #mm-backdrop) .flex-col { flex-direction: column; } :where(#masthead, #mm-mobile, #mm-backdrop) .relative { position: relative; } :where(#masthead, #mm-mobile, #mm-backdrop) .absolute { position: absolute; } :where(#masthead, #mm-mobile, #mm-backdrop) .fixed { position: fixed; } :where(#masthead, #mm-mobile, #mm-backdrop) .inset-0 { inset: 0; } :where(#masthead, #mm-mobile, #mm-backdrop) .top-0 { top: 0; } :where(#masthead, #mm-mobile, #mm-backdrop) .right-0 { right: 0; } :where(#masthead, #mm-mobile, #mm-backdrop) .-top-2 { top: -8px; } :where(#masthead, #mm-mobile, #mm-backdrop) .-right-2 { right: -8px; } :where(#masthead, #mm-mobile, #mm-backdrop) .gap-0\.5 { gap: 2px; } :where(#masthead, #mm-mobile, #mm-backdrop) .gap-1 { gap: 4px; } :where(#masthead, #mm-mobile, #mm-backdrop) .gap-1\.5 { gap: 6px; } :where(#masthead, #mm-mobile, #mm-backdrop) .gap-2 { gap: 8px; } :where(#masthead, #mm-mobile, #mm-backdrop) .gap-3 { gap: 12px; } :where(#masthead, #mm-mobile, #mm-backdrop) .gap-4 { gap: 16px; } :where(#masthead, #mm-mobile, #mm-backdrop) .gap-6 { gap: 24px; } :where(#masthead, #mm-mobile, #mm-backdrop) .lg-gap-10 { gap: 40px; } :where(#masthead, #mm-mobile, #mm-backdrop) .p-2 { padding: 8px; } :where(#masthead, #mm-mobile, #mm-backdrop) .py-2 { padding-top: 8px; padding-bottom: 8px; } :where(#masthead, #mm-mobile, #mm-backdrop) .py-3 { padding-top: 12px; padding-bottom: 12px; } :where(#masthead, #mm-mobile, #mm-backdrop) .py-8 { padding-top: 32px; padding-bottom: 32px; } :where(#masthead, #mm-mobile, #mm-backdrop) .px-3 { padding-left: 12px; padding-right: 12px; } :where(#masthead, #mm-mobile, #mm-backdrop) .px-4 { padding-left: 16px; padding-right: 16px; } :where(#masthead, #mm-mobile, #mm-backdrop) .pl-10 { padding-left: 40px; } :where(#masthead, #mm-mobile, #mm-backdrop) .pl-11 { padding-left: 44px; } :where(#masthead, #mm-mobile, #mm-backdrop) .pr-4 { padding-right: 16px; } :where(#masthead, #mm-mobile, #mm-backdrop) .px-1 { padding-left: 4px; padding-right: 4px; } :where(#masthead, #mm-mobile, #mm-backdrop) .-ml-2 { margin-left: -8px; } :where(#masthead, #mm-mobile, #mm-backdrop) .ml-auto { margin-left: auto; } :where(#masthead, #mm-mobile, #mm-backdrop) .ml-1 { margin-left: 4px; } :where(#masthead, #mm-mobile, #mm-backdrop) .h-4 { height: 16px; } :where(#masthead, #mm-mobile, #mm-backdrop) .h-5 { height: 20px; } :where(#masthead, #mm-mobile, #mm-backdrop) .h-6 { height: 24px; } :where(#masthead, #mm-mobile, #mm-backdrop) .h-8 { height: 32px; } :where(#masthead, #mm-mobile, #mm-backdrop) .h-\[18px\] { height: 18px; } :where(#masthead, #mm-mobile, #mm-backdrop) .w-4 { width: 16px; } :where(#masthead, #mm-mobile, #mm-backdrop) .w-5 { width: 20px; } :where(#masthead, #mm-mobile, #mm-backdrop) .w-6 { width: 24px; } :where(#masthead, #mm-mobile, #mm-backdrop) .w-full { width: 100%; } :where(#masthead, #mm-mobile, #mm-backdrop) .w-auto { width: auto; } :where(#masthead, #mm-mobile, #mm-backdrop) .min-w-\[18px\] { min-width: 18px; } :where(#masthead, #mm-mobile, #mm-backdrop) .max-w-2xl { max-width: 42rem; } :where(#masthead, #mm-mobile, #mm-backdrop) .text-xs { font-size: 12px; line-height: 1.4; } :where(#masthead, #mm-mobile, #mm-backdrop) .text-sm { font-size: 14px; line-height: 1.4; } :where(#masthead, #mm-mobile, #mm-backdrop) .text-base { font-size: 16px; line-height: 1.5; } :where(#masthead, #mm-mobile, #mm-backdrop) .font-medium { font-weight: 500; } :where(#masthead, #mm-mobile, #mm-backdrop) .font-semibold { font-weight: 600; } :where(#masthead, #mm-mobile, #mm-backdrop) .font-bold { font-weight: 700; } :where(#masthead, #mm-mobile, #mm-backdrop) .rounded-md { border-radius: 6px; } :where(#masthead, #mm-mobile, #mm-backdrop) .rounded-full { border-radius: 9999px; } :where(#masthead, #mm-mobile, #mm-backdrop) .text-white { color: #fff; } :where(#masthead, #mm-mobile, #mm-backdrop) .text-gray-400 { color: #9ca3af; } :where(#masthead, #mm-mobile, #mm-backdrop) .text-gray-700 { color: #374151; } :where(#masthead, #mm-mobile, #mm-backdrop) .text-yellow-400 { color: #facc15; } :where(#masthead, #mm-mobile, #mm-backdrop) .border { border-width: 1px; border-style: solid; } :where(#masthead, #mm-mobile, #mm-backdrop) .border-b { border-bottom-width: 1px; border-bottom-style: solid; } /* Alle hairlines in de header gebruiken sinds 18-09-2026 hetzelfde grijs als de rest van de winkel (`--wt-border`, #e1eaf2). Ze stonden op #e5e7eb, het grijs van Tailwind, nog uit de tijd dat de header met die klassen werd opgebouwd. Verschil is vier punten in rgb en dus nauwelijks te zien, maar twee soorten grijs voor dezelfde soort lijn is precies wat op een lange horizontale streep opvalt: de lijn onder de kruimels en onder de beoordelingen stonden al op de token. */ :where(#masthead, #mm-mobile, #mm-backdrop) .border-gray-200 { border-color: var(--wt-border); } :where(#masthead, #mm-mobile, #mm-backdrop) .border-gray-300 { border-color: #d2d6dc; } :where(#masthead, #mm-mobile, #mm-backdrop) .overflow-hidden { overflow: hidden; } :where(#masthead, #mm-mobile, #mm-backdrop) .pointer-events-none { pointer-events: none; } :where(#masthead, #mm-mobile, #mm-backdrop) .transition { transition: all 150ms ease; } :where(#masthead, #mm-mobile, #mm-backdrop) .tracking-tight { letter-spacing: -0.025em; } :where(#masthead, #mm-mobile, #mm-backdrop) .opacity-90 { opacity: 0.9; } :where(#masthead, #mm-mobile, #mm-backdrop) .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Responsive utilities */ @media (max-width: 1023px) { :where(#masthead, #mm-mobile, #mm-backdrop) .lg\:flex, :where(#masthead, #mm-mobile, #mm-backdrop) .lg\:block, :where(#masthead, #mm-mobile, #mm-backdrop) .lg\:gap-10 { display: none; } } @media (min-width: 1024px) { :where(#masthead, #mm-mobile, #mm-backdrop) .lg\:hidden { display: none; } :where(#masthead, #mm-mobile, #mm-backdrop) .lg\:flex { display: flex; } :where(#masthead, #mm-mobile, #mm-backdrop) .lg\:block { display: block; } :where(#masthead, #mm-mobile, #mm-backdrop) .lg\:gap-10 { gap: 40px; } :where(#masthead, #mm-mobile, #mm-backdrop) .lg\:h-10 { height: 40px; } } @media (min-width: 640px) { :where(#masthead, #mm-mobile, #mm-backdrop) .sm\:inline { display: inline; } } /* ---------- 5. HEADER STRUCTUUR ---------- */ body.nieuwe-header-actief #masthead { width: 100%; position: relative; z-index: 50; } /* Rij 1: topbar */ body.nieuwe-header-actief .wt-topbar { background: var(--wt-blue); color: #fff; font-size: 14px; } body.nieuwe-header-actief .wt-topbar .wrapper { display: flex; align-items: center; height: var(--hdr-utility); gap: 16px; } body.nieuwe-header-actief .wt-topbar-usps-mobile { flex: 1; height: var(--hdr-utility); overflow: hidden; } @media (min-width: 1024px) { body.nieuwe-header-actief .wt-topbar-usps-mobile { display: none; } } body.nieuwe-header-actief .wt-topbar-usps-desktop { display: none; align-items: center; gap: 24px; flex: 1; } @media (min-width: 1024px) { body.nieuwe-header-actief .wt-topbar-usps-desktop { display: flex; } } body.nieuwe-header-actief .wt-topbar-usps-desktop > span { display: inline-flex; align-items: center; gap: 8px; } body.nieuwe-header-actief .wt-topbar-reviews { display: none; align-items: center; gap: 6px; flex-shrink: 0; color: inherit; text-decoration: none; transition: opacity 120ms; } @media (min-width: 1024px) { body.nieuwe-header-actief .wt-topbar-reviews { display: flex; } } body.nieuwe-header-actief .wt-topbar-reviews:hover { opacity: 0.8; } body.nieuwe-header-actief .wt-topbar-icon { color: var(--wt-green); width: 16px; height: 16px; } /* USP-slider */ @keyframes wt-usp-slide { 0%, 29% { transform: translateY(0); } 33%, 62% { transform: translateY(calc(-1 * var(--hdr-utility))); } 67%, 96% { transform: translateY(calc(-2 * var(--hdr-utility))); } 100% { transform: translateY(calc(-3 * var(--hdr-utility))); } } body.nieuwe-header-actief .usp-slider { display: flex; flex-direction: column; animation: wt-usp-slide 12s ease-in-out infinite; list-style: none; margin: 0; padding: 0; } body.nieuwe-header-actief .usp-slider li { height: var(--hdr-utility); flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 6px; } @media (prefers-reduced-motion: reduce) { body.nieuwe-header-actief .usp-slider { animation: none; } } /* Rij 2: hoofdrij */ body.nieuwe-header-actief .wt-mainrow { background: var(--wt-blue-soft); border-bottom: 1px solid var(--wt-border); } body.nieuwe-header-actief .wt-mainrow .wrapper > div { display: flex; align-items: center; justify-content: space-between; height: var(--hdr-main); gap: 16px; } @media (min-width: 1024px) { body.nieuwe-header-actief .wt-mainrow .wrapper > div { gap: 40px; } } body.nieuwe-header-actief .wt-mainrow-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } body.nieuwe-header-actief .wt-mainrow-logo img { height: 28px; width: auto; /* Full-color huisstijl-logo (Weltechniek-logo.png) → geen herkleur-filter meer nodig (was: wit logo + filter naar navy). */ } @media (min-width: 1024px) { body.nieuwe-header-actief .wt-mainrow-logo img { height: 40px; } } /* Hamburger button (mobiel) */ body.nieuwe-header-actief #mm-mobile-trigger { background: transparent; border: 0; color: #374151; padding: 8px; margin-left: -8px; cursor: pointer; border-radius: 6px; align-items: center; justify-content: center; transition: background 120ms; } body.nieuwe-header-actief #mm-mobile-trigger:hover { background: #fff; } /* Geen size-override hier — hamburger gebruikt de standaard w-6 h-6 (24px), consistent met de account/cart icoontjes rechts in de mainrow. */ @media (max-width: 1023px) { body.nieuwe-header-actief #mm-mobile-trigger { display: inline-flex; } } @media (min-width: 1024px) { body.nieuwe-header-actief #mm-mobile-trigger { display: none; } } /* Account/cart iconen mobiel */ body.nieuwe-header-actief .wt-mainrow-icons-mobile { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } @media (min-width: 1024px) { body.nieuwe-header-actief .wt-mainrow-icons-mobile { display: none; } } body.nieuwe-header-actief .wt-mainrow-icons-mobile a, body.nieuwe-header-actief .wt-mainrow-icons-mobile button { padding: 8px; color: #374151; background: transparent; border: 0; border-radius: 6px; font-family: inherit; cursor: pointer; transition: background 120ms; text-decoration: none; display: inline-flex; align-items: center; } body.nieuwe-header-actief .wt-mainrow-icons-mobile a:hover, body.nieuwe-header-actief .wt-mainrow-icons-mobile button:hover { background: #fff; } /* Account/klantenservice/kluslijst desktop */ body.nieuwe-header-actief .wt-mainrow-icons-desktop { display: none; align-items: center; gap: 16px; flex-shrink: 0; } @media (min-width: 1024px) { body.nieuwe-header-actief .wt-mainrow-icons-desktop { display: flex; } } body.nieuwe-header-actief .wt-mainrow-icons-desktop > a, body.nieuwe-header-actief .wt-mainrow-icons-desktop > button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; border-radius: 6px; border: 0; background: transparent; font-family: inherit; cursor: pointer; text-decoration: none; color: var(--wt-blue); transition: background 120ms; } body.nieuwe-header-actief .wt-mainrow-icons-desktop > a:hover, body.nieuwe-header-actief .wt-mainrow-icons-desktop > button:hover { background: rgba(30, 58, 109, 0.1); } body.nieuwe-header-actief .wt-mainrow-icons-desktop > a span, body.nieuwe-header-actief .wt-mainrow-icons-desktop > button span { font-size: 16px; font-weight: 500; color: var(--wt-blue); } /* Zoekbalk desktop */ body.nieuwe-header-actief .wt-search-desktop { display: none; flex: 1; max-width: 42rem; } @media (min-width: 1024px) { body.nieuwe-header-actief .wt-search-desktop { display: flex; } } /* Rij 3 (mobiel): zoekbalk */ body.nieuwe-header-actief .wt-search-mobile { background: #fff; border-bottom: 1px solid var(--wt-border); } @media (min-width: 1024px) { body.nieuwe-header-actief .wt-search-mobile { display: none; } } body.nieuwe-header-actief .wt-search-mobile .wrapper { padding-top: 12px; padding-bottom: 12px; } /* FIBO Search styling override */ body.nieuwe-header-actief .dgwt-wcas-search-wrapp, body.nieuwe-header-actief .dgwt-wcas-search-form, body.nieuwe-header-actief .dgwt-wcas-sf-wrapp { max-width: 100%; width: 100%; margin: 0; padding: 0; background: transparent; border: 0; } body.nieuwe-header-actief .dgwt-wcas-sf-wrapp { position: relative; } body.nieuwe-header-actief .dgwt-wcas-search-input { border: 1px solid #d2d6dc !important; border-radius: 9999px !important; background: #fff !important; background-color: #fff !important; font-size: 16px !important; font-family: inherit !important; font-weight: 400 !important; padding: 12px 16px 12px 44px !important; box-shadow: none !important; height: auto !important; color: #111827 !important; width: 100% !important; } body.nieuwe-header-actief .dgwt-wcas-search-input:focus { border-color: var(--wt-blue) !important; outline: none !important; box-shadow: 0 0 0 2px rgba(30, 58, 109, 0.2) !important; } body.nieuwe-header-actief .dgwt-wcas-search-input::placeholder { color: #9ca3af !important; opacity: 1 !important; } body.nieuwe-header-actief .dgwt-wcas-search-submit { position: absolute !important; left: 8px !important; top: 50% !important; transform: translateY(-50%) !important; width: 32px !important; height: 32px !important; background: transparent !important; background-color: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; color: #9ca3af !important; z-index: 2 !important; } /* FiboSearch magnifier-icoon is een gevuld vector-icoon, geen line-icon. Fill (geen stroke) toepassen om het juiste rendering te krijgen. */ body.nieuwe-header-actief .dgwt-wcas-search-submit svg, body.nieuwe-header-actief .dgwt-wcas-search-submit svg path { fill: #9ca3af !important; stroke: none !important; } /* FiboSearch suggesties: "Toon alle resultaten"-knop onderaan de dropdown. Verplaatst vanuit style.css (2026-05-12) — alle search-styling op één plek. */ body.nieuwe-header-actief .dgwt-wcas-suggestion.dgwt-wcas-suggestion-more .dgwt-wcas-st-more { text-align: center; font-size: 16px; font-weight: 700; text-transform: none; color: #fff; background: var(--wt-green); border-radius: 3px; width: 100%; padding: 15px; } body.nieuwe-header-actief .dgwt-wcas-suggestion.dgwt-wcas-suggestion-more .dgwt-wcas-st-more:hover { background: var(--wt-green-hover); } body.nieuwe-header-actief span.dgwt-wcas-st-more-total { color: #fff; } @media (max-width: 1023px) { body.nieuwe-header-actief .dgwt-wcas-search-input { border-radius: 6px !important; background: #ffffff !important; background-color: #ffffff !important; padding: 10px 12px 10px 40px !important; } body.nieuwe-header-actief .dgwt-wcas-search-input:focus { background: #fff !important; background-color: #fff !important; } } /* Rij 4: nav-rij (desktop) */ body.nieuwe-header-actief nav.wt-navrow { display: none; background: #fff; border-bottom: 1px solid var(--wt-border); } @media (min-width: 1024px) { body.nieuwe-header-actief nav.wt-navrow { display: block; } } body.nieuwe-header-actief nav.wt-navrow .wrapper { position: relative; } body.nieuwe-header-actief nav.wt-navrow .wrapper > .wt-navrow-inner { display: flex; align-items: center; height: var(--hdr-nav); gap: 8px; } /* Kies je categorie button */ body.nieuwe-header-actief #mm-desktop-trigger { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--wt-blue); border: 1px solid #d2d6dc; padding: 8px 16px; border-radius: 6px; font-family: inherit; font-weight: 500; font-size: 16px; cursor: pointer; transition: background 120ms, border-color 120ms; } body.nieuwe-header-actief #mm-desktop-trigger:hover { background: #ffffff; border-color: var(--wt-blue); } /* Nav-links */ body.nieuwe-header-actief .wt-navrow a.wt-navlink { padding: 8px calc(var(--wt-nav-ruimte) - 8px); font-size: 16px; font-weight: 500; color: var(--wt-blue); text-decoration: none; border-radius: 6px; transition: background 120ms; } body.nieuwe-header-actief .wt-navrow a.wt-navlink:hover { background: rgba(30, 58, 109, 0.1); } /* Gelijke zichtbare afstand in de hele rij, van knoprand tot woord én van woord tot woord (gevraagd door Tijn 17-09-2026). Eén knop: --wt-nav-ruimte. Rekensom met rij-gap 8 en padding (ruimte - 8): aan de randen 8 + (ruimte - 8) = ruimte; tussen twee woorden (ruimte - 8) + 8 - (ruimte - 8) + (ruimte - 8) = ruimte. Het schuifje (css/btw-weergave.css) gebruikt dezelfde variabele. Smaller scherm: zie hieronder. */ body.nieuwe-header-actief .wt-navrow { --wt-nav-ruimte: 30px; } /* Met 30px heeft de rij 1029px nodig (gemeten 17-09-2026, inclusief btw-schuifje), plus lucht voor de winkelwagen. Tot 1100px scherm dus 20px; onder 1024px verdwijnt deze rij en neemt het tabletmenu over. */ @media (max-width: 1099px) { body.nieuwe-header-actief .wt-navrow { --wt-nav-ruimte: 20px; } } body.nieuwe-header-actief .wt-navrow a.wt-navlink + a.wt-navlink { margin-left: calc(8px - var(--wt-nav-ruimte)); } /* Zakelijke klant CTA */ body.nieuwe-header-actief a.wt-zakelijk-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--wt-green); color: #fff; padding: 8px 16px; border-radius: 6px; font-weight: 600; font-size: 16px; text-decoration: none; transition: background 120ms; } body.nieuwe-header-actief a.wt-zakelijk-cta:hover { background: var(--wt-green-hover); color: #fff; } /* Cart shortcode wrapper */ body.nieuwe-header-actief .wt-cart-shortcode-wrap { margin-left: auto; } /* ---------- 5b. CART-BUTTON ---------- Vervangt Shoptimizer's [shoptimizer_cart] shortcode-output met eigen inline-SVG icoon + count-badge + prijs. De wrappers .wt-header-cart + .wt-header-cart__knop staan in header.php zelf — die zijn nodig voor Shoptimizer's cart-drawer.js om de klik te herkennen en de drawer/flyout te openen. ------------------------------------------------------------------- */ body.nieuwe-header-actief .wt-cart-btn { display: inline-flex; align-items: center; gap: 10px; color: var(--wt-blue); text-decoration: none; padding: 8px 10px; border-radius: 6px; transition: background 120ms; /* Override Shoptimizer's .cart-contents { width: 49px; height: 44px; } */ width: auto; height: auto; } body.nieuwe-header-actief .wt-cart-btn:hover { background: rgba(30, 58, 109, 0.1); color: var(--wt-blue); } body.nieuwe-header-actief .wt-cart-price { font-size: 16px; font-weight: 600; color: var(--wt-blue); line-height: 1; white-space: nowrap; } body.nieuwe-header-actief .wt-cart-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; } body.nieuwe-header-actief .wt-cart-svg { width: 24px; height: 24px; color: var(--wt-blue); } body.nieuwe-header-actief .wt-cart-count { position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--wt-green); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; border-radius: 9999px; pointer-events: none; box-sizing: border-box; } /* Count is altijd zichtbaar, ook bij 0 — modifier wordt nog wel gerenderd in HTML maar verbergt het badge niet meer. */ body.nieuwe-header-actief .wt-cart-count--empty { /* display: none; — uitgezet, count altijd zichtbaar */ } /* Mobiel: alleen icoon + badge tonen, prijs verbergen om ruimte te besparen */ @media (max-width: 1023px) { body.nieuwe-header-actief .wt-cart-price { display: none; } body.nieuwe-header-actief .wt-cart-btn { padding: 8px; } } /* ---------- 6. MEGA-MENU DESKTOP ---------- */ body.nieuwe-header-actief .mm-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.2); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 200ms ease; z-index: 40; } body.mm-desktop-active .mm-backdrop { opacity: 1; pointer-events: auto; } body.nieuwe-header-actief .mm-desktop { position: absolute; top: 100%; left: var(--wrapper-padding); right: var(--wrapper-padding); background: #fff; border-top: 1px solid var(--wt-border); box-shadow: 0 12px 24px -8px rgba(0,0,0,0.15); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 180ms ease, transform 200ms ease, visibility 200ms; z-index: 50; } body.mm-desktop-active .mm-desktop { opacity: 1; visibility: visible; transform: translateY(0); } body.nieuwe-header-actief .mm-desktop__inner { display: flex; max-height: var(--mm-panel-max-h); position: relative; } body.nieuwe-header-actief .mm-desktop__inner::after { content: ''; position: absolute; left: var(--mm-tabs-width); right: 0; bottom: 0; height: 56px; background: linear-gradient(to top, #fff 30%, rgba(255,255,255,0)); pointer-events: none; z-index: 3; border-bottom-right-radius: 8px; opacity: 0; transition: opacity 180ms ease; } body.nieuwe-header-actief .mm-desktop__inner.has-scroll-down::after { opacity: 1; } body.nieuwe-header-actief .mm-desktop__tabs { background: #ffffff; border-right: 1px solid var(--wt-border); padding: 0; overflow-y: auto; flex: 0 0 var(--mm-tabs-width); min-height: 0; } body.nieuwe-header-actief .mm-desktop__tab { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 20px; background: transparent; border: 0; border-left: 3px solid transparent; color: var(--wt-blue); font-family: inherit; font-weight: 500; font-size: 16px; text-align: left; text-decoration: none; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; border-radius: 0; transition: background 120ms, border-color 120ms; } body.nieuwe-header-actief .mm-desktop__tab:hover { background: #fff; color: var(--wt-blue); } body.nieuwe-header-actief .mm-desktop__tab[aria-selected="true"] { background: #fff; border-left-color: var(--wt-blue); font-weight: 600; } body.nieuwe-header-actief .mm-desktop__tab svg { color: #9ca3af; flex-shrink: 0; } body.nieuwe-header-actief .mm-desktop__content { padding: 24px 28px; overflow-y: auto; flex: 1 1 0; min-height: 0; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } body.nieuwe-header-actief .mm-desktop__content::-webkit-scrollbar { width: 10px; } body.nieuwe-header-actief .mm-desktop__content::-webkit-scrollbar-track { background: transparent; } body.nieuwe-header-actief .mm-desktop__content::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; border: 2px solid #fff; } body.nieuwe-header-actief .mm-desktop__content::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Eén paneel per afdeling, sinds 26-09-2026 server-side in de HTML (niveau 2). Het script wisselt met het `hidden`-attribuut; deze regel staat erbij omdat een `display`-regel op een div die van de browser zelf zou overrulen. */ body.nieuwe-header-actief .mm-desktop__paneel[hidden] { display: none; } body.nieuwe-header-actief .mm-desktop__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #f7f8fa; } body.nieuwe-header-actief .mm-desktop__head-title { font-size: 20px; font-weight: 700; color: var(--wt-blue); margin: 0; } body.nieuwe-header-actief .mm-view-all { display: inline-flex; align-items: center; gap: 4px; color: var(--wt-green); font-size: 14px; font-weight: 500; text-decoration: none; } body.nieuwe-header-actief .mm-view-all:hover { color: var(--wt-green-hover); text-decoration: underline; } body.nieuwe-header-actief .mm-desktop__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; } @media (max-width: 1200px) { body.nieuwe-header-actief .mm-desktop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body.nieuwe-header-actief .mm-sub__title { display: block; color: var(--wt-blue); font-weight: 600; font-size: 15px; text-decoration: none; margin-bottom: 8px; } body.nieuwe-header-actief .mm-sub__title:hover { text-decoration: underline; } body.nieuwe-header-actief .mm-sub__items { list-style: none; margin: 0; padding: 0; } body.nieuwe-header-actief .mm-sub__items li { margin: 0; padding: 0; } body.nieuwe-header-actief .mm-sub__item { display: block; color: #374151; font-size: 14px; line-height: 1.6; text-decoration: none; padding: 1px 0; } body.nieuwe-header-actief .mm-sub__item:hover { color: var(--wt-blue); text-decoration: underline; } body.nieuwe-header-actief .mm-sub__view-all { display: inline-flex; align-items: center; gap: 4px; color: var(--wt-green); font-size: 14px; font-weight: 500; text-decoration: none; margin-top: 6px; } body.nieuwe-header-actief .mm-sub__view-all:hover { color: var(--wt-green-hover); text-decoration: underline; } body.nieuwe-header-actief .mm-sub__item.mm-sub__item--accent { color: var(--wt-green); font-weight: 500; } body.nieuwe-header-actief .mm-sub__item.mm-sub__item--accent:hover { color: var(--wt-green-hover); } /* ---------- 7. MEGA-MENU MOBIEL ---------- */ body.nieuwe-header-actief .mm-mobile { position: fixed; inset: 0; z-index: 99999; /* bovenop alles, inclusief Shoptimizer's filter-knop + chat-widgets */ visibility: hidden; /* Dynamic viewport height — past zich aan iOS Safari's veranderende UI */ height: 100vh; height: 100dvh; } @media (min-width: 1024px) { body.nieuwe-header-actief .mm-mobile { display: none; } } body.nieuwe-header-actief .mm-mobile.is-open { visibility: visible; } body.nieuwe-header-actief .mm-mobile__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 200ms ease; } body.nieuwe-header-actief .mm-mobile.is-open .mm-mobile__backdrop { opacity: 1; } body.nieuwe-header-actief .mm-mobile__drawer { position: absolute; inset: 0; width: 100%; max-width: none; background: #fff; box-shadow: 0 0 24px rgba(0,0,0,0.2); transform: translateX(-100%); transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1); display: flex; flex-direction: column; /* TOP: padding-top safe-area maakt witte strook bovenaan, iOS frosted glass UI tinten daar wit. Coolblue-style. BOTTOM: geen padding — content extends tot scherm-onderrand, iOS frosted glass toont content erachter. Consistent met cart drawer. */ padding-top: env(safe-area-inset-top); } body.nieuwe-header-actief .mm-mobile.is-open .mm-mobile__drawer { transform: translateX(0); } body.nieuwe-header-actief .mm-mobile__stage { flex: 1; position: relative; overflow: hidden; } body.nieuwe-header-actief .mm-mobile__panel { position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1); } body.nieuwe-header-actief .mm-mobile__panel[data-state="active"] { transform: translateX(0); } body.nieuwe-header-actief .mm-mobile__panel[data-state="previous"] { transform: translateX(-30%); } body.nieuwe-header-actief .mm-mobile__header { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; background: var(--wt-blue); border-bottom: 0; flex-shrink: 0; } body.nieuwe-header-actief .mm-mobile__back, body.nieuwe-header-actief .mm-mobile__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; border-radius: 6px; padding: 0; box-shadow: none; font-family: inherit; color: #fff; transition: background 120ms; } body.nieuwe-header-actief .mm-mobile__back:hover, body.nieuwe-header-actief .mm-mobile__back:active, body.nieuwe-header-actief .mm-mobile__close:hover, body.nieuwe-header-actief .mm-mobile__close:active { background: rgba(255, 255, 255, 0.15); } /* Kruis-icoontje rechts uitlijnen — visueel op één lijn met de chevrons rechts van de rows eronder (allebei 16px van de rechterrand). De negatieve margin-right schuift de hele knop 8px naar rechts, zodat én de icoon op 16px van rechts staat én de hover-achtergrond keurig centraal om de X. */ body.nieuwe-header-actief .mm-mobile__close { margin-right: -8px; } body.nieuwe-header-actief .mm-mobile__title { flex: 1; font-size: 17px; font-weight: 600; color: #fff; margin: 0; line-height: 1.3; font-family: inherit; text-transform: none; letter-spacing: normal; } body.nieuwe-header-actief .mm-mobile__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } body.nieuwe-header-actief .mm-mobile__list { list-style: none; margin: 0; padding: 0; } body.nieuwe-header-actief .mm-mobile__list li { margin: 0; padding: 0; } body.nieuwe-header-actief .mm-mobile__row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; color: var(--wt-blue); text-decoration: none; border: 0; border-bottom: 1px solid #f7f8fa; font-size: 16px; font-family: inherit; font-weight: 500; background: transparent; width: 100%; text-align: left; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; border-radius: 0; } body.nieuwe-header-actief .mm-mobile__row:hover, body.nieuwe-header-actief .mm-mobile__row:active { background: #ffffff; color: var(--wt-blue); } body.nieuwe-header-actief .mm-mobile__row svg { color: #9ca3af; flex-shrink: 0; } body.nieuwe-header-actief .mm-mobile__row.mm-mobile__row--accent { color: var(--wt-green); font-weight: 500; } body.nieuwe-header-actief .mm-mobile__row.mm-mobile__row--accent svg { color: var(--wt-green); } /* Subs + super-subs houden de default weight 500 (was 400). */ body.nieuwe-header-actief .mm-mobile__view-all-wrap { padding: 16px; background: #fff; border-bottom: 1px solid var(--wt-border); } body.nieuwe-header-actief .mm-mobile__view-all { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; background: #fff; border: 1px solid var(--wt-green); border-radius: 8px; color: var(--wt-green); font-size: 15px; font-weight: 500; font-family: inherit; text-decoration: none; transition: background 120ms; } body.nieuwe-header-actief .mm-mobile__view-all:hover { background: #f0fdf4; color: var(--wt-green); } body.nieuwe-header-actief .mm-mobile__section-title { padding: 14px 16px; font-size: 14px; font-weight: 600; color: #374151; background: #ffffff; border-top: 1px solid var(--wt-border); border-bottom: 1px solid var(--wt-border); } body.nieuwe-header-actief .mm-mobile__services .mm-mobile__row { color: #4b5563; font-weight: 400; font-size: 15px; padding: 12px 16px; } body.nieuwe-header-actief .mm-mobile__services .mm-mobile__row svg { width: 18px; height: 18px; } body.nieuwe-header-actief .mm-mobile__services .mm-mobile__row > svg:last-child { display: none; } /* Drill-down items op alle niveaus (level 1 hoofdcats + level 2 subs + level 3 super-subs): zelfde tab-patroon als de desktop tabs — transparante linker-border standaard (zodat de breedte niet schuift bij hover), en bij hover/focus/active een lichte grijze achtergrond + blauwe linker-border. Services krijgen deze styling NIET (zitten genest onder .mm-mobile__services). padding-left: 13px compenseert de 3px border-left, zodat de tekst op exact 16px van de linkerrand begint — gelijk uitgelijnd met de "Menu" header en de "Ga snel naar" sectie-titel. */ body.nieuwe-header-actief .mm-mobile__body > .mm-mobile__list .mm-mobile__row { border-left: 3px solid transparent; padding-left: 13px; transition: background 120ms, border-color 120ms; } body.nieuwe-header-actief .mm-mobile__body > .mm-mobile__list .mm-mobile__row:hover, body.nieuwe-header-actief .mm-mobile__body > .mm-mobile__list .mm-mobile__row:focus, body.nieuwe-header-actief .mm-mobile__body > .mm-mobile__list .mm-mobile__row:active { background: #ffffff; border-left-color: var(--wt-blue); } /* Alle drill-down items op 17px voor consistente leesbaarheid op mobiel (geldt voor level 1 hoofdcats én level 2/3 subs/super-subs). */ body.nieuwe-header-actief .mm-mobile__body > .mm-mobile__list .mm-mobile__row { font-size: 17px; } /* Zakelijke klant CTA — prominent groene knop onderaan het mobiele menu */ body.nieuwe-header-actief .mm-mobile__zakelijk-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px 16px; padding: 14px 20px; background: var(--wt-green); color: #fff; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; border-radius: 8px; transition: background 120ms; } body.nieuwe-header-actief .mm-mobile__zakelijk-cta:hover, body.nieuwe-header-actief .mm-mobile__zakelijk-cta:active { background: var(--wt-green-hover); color: #fff; text-decoration: none; } body.nieuwe-header-actief .mm-mobile__zakelijk-cta svg { width: 20px; height: 20px; flex-shrink: 0; } /* Body scroll-lock */ body.mm-locked { overflow: hidden; } /* Verberg oude shoptimizer-nav onder nieuwe header */ body.nieuwe-header-actief > #page > .col-full-nav { display: none; } /* ============================================================ * 8. CART DRAWER POLISH * Shoptimizer's drawer-logica (qty updates, voucher, fragments, * click-handler) blijft volledig intact. We restylen alleen de * "chrome" zodat hij visueel consistent is met onze mobile menu: * - Blauwe header-balk + witte titel + witte X * - Full-width op mobiel (was 420px vast) * - iOS safe-area top/bottom + 100dvh * ============================================================ */ /* ===== iOS 26 SAFE-AREA WORKAROUND ===== Op iOS 26 is er een bekende WebKit-bug waardoor fixed-positioned drawers (zoals Shoptimizer's cart) niet altijd tot de safe-area zones reiken — homepage erachter wordt zichtbaar door iOS' frosted- glass UI. Apple heeft fix toegezegd voor iOS 26.2. Workaround: zet body-bg naar wit wanneer ANY drawer open is, zodat iOS' translucent UI altijd wit ziet (consistent met Coolblue's "top is wit"-pattern). Geldt voor menu, recent én cart voor consistentie en future-proof gedrag. Refs: - https://github.com/mui/material-ui/issues/46953 - https://benfrain.com/ios26-safari-theme-color-tab-tinting-with-fixed-position-elements/ */ body.nieuwe-header-actief.mm-locked, body.nieuwe-header-actief.wt-recent-open, body.nieuwe-header-actief.filter-open { background: #fff; /* Scroll-lock: voorkomt dat page-content achter een open drawer/flyout meebeweegt bij scrollen. */ overflow: hidden; } /* Cart wrap: simpele full-viewport positioning. - padding-top: env safe-area = witte strook bovenaan (iOS) - padding-bottom: env safe-area = content blijft boven iOS Safari's bottom UI zichtbaar (betaalmethode-iconen, knoppen, etc.) */ /* Verkleinen Shoptimizer's 50px margin-top op de widget-container. Die 50px was bedoeld voor ruimte onder de oude absolute-positioned heading. Onze heading is nu static (in document flow) — 16px is een nette adempauze tussen header en progress bar zonder overbodig gat. */ /* Full-width op mobiel */ /* Header-balk: blauw met witte tekst, zelfde patroon als mobile menu. Position static (override Shoptimizer's absolute) zodat de balk 100% breed wordt en de cart-widget eronder netjes meeschuift. */ /* X-knop: wit, 40x40 met margin-right -8 patroon (zoals onze menu), hover semi-transparant wit zoals onze menu close. `top` met safe-area zodat de knop binnen het BLAUWE header-vlak valt, niet in de iOS safe-area zone erboven (waar 'ie als witte X op witte wrap-padding niet meer goed contrasteert). */ /* ============================================================ * 9. RECENT BEKEKEN FLYOUT * Rechts inschuivende drawer, zelfde design language als mobile menu * + cart drawer (blauwe header, witte X, iOS safe-area, 100dvh). * Vervangt de "Kluslijst" feature in de desktop header. * ============================================================ */ body.nieuwe-header-actief .wt-recent { position: fixed; inset: 0; z-index: 99998; visibility: hidden; pointer-events: none; } body.nieuwe-header-actief .wt-recent.is-open { visibility: visible; pointer-events: auto; } body.nieuwe-header-actief .wt-recent__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 200ms ease; } body.nieuwe-header-actief .wt-recent.is-open .wt-recent__backdrop { opacity: 1; } body.nieuwe-header-actief .wt-recent__drawer { position: absolute; top: 0; right: 0; width: 420px; max-width: 100%; height: 100vh; height: 100dvh; background: #fff; box-shadow: 0 0 24px rgba(0, 0, 0, 0.2); transform: translateX(100%); transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1); display: flex; flex-direction: column; /* TOP padding-safe-area = witte strook (iOS frosted glass = wit). BOTTOM geen padding — content extends, iOS toont content er- achter. Coolblue-style, consistent met menu + cart. */ padding-top: env(safe-area-inset-top); } body.nieuwe-header-actief .wt-recent.is-open .wt-recent__drawer { transform: translateX(0); } /* Full-width op mobiel */ @media (max-width: 767px) { body.nieuwe-header-actief .wt-recent__drawer { width: 100%; } } /* Header-balk: zelfde patroon als mobile menu + cart drawer */ body.nieuwe-header-actief .wt-recent__header { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; background: var(--wt-blue); flex-shrink: 0; } body.nieuwe-header-actief .wt-recent__title { flex: 1; font-size: 17px; font-weight: 600; color: #fff; margin: 0; line-height: 1.3; font-family: inherit; text-transform: none; letter-spacing: normal; } body.nieuwe-header-actief .wt-recent__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; border-radius: 6px; padding: 0; box-shadow: none; font-family: inherit; color: #fff; margin-right: -8px; transition: background 120ms; } body.nieuwe-header-actief .wt-recent__close:hover, body.nieuwe-header-actief .wt-recent__close:active { background: rgba(255, 255, 255, 0.15); } body.nieuwe-header-actief .wt-recent__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; } /* Empty state + loading */ body.nieuwe-header-actief .wt-recent__loading, body.nieuwe-header-actief .wt-recent__empty { text-align: center; padding: 40px 24px; color: #6b7280; font-size: 15px; line-height: 1.5; } body.nieuwe-header-actief .wt-recent__empty p { margin: 0 0 8px; } body.nieuwe-header-actief .wt-recent__empty p:last-child { margin-bottom: 0; } /* Product-lijst */ body.nieuwe-header-actief .wt-recent__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } body.nieuwe-header-actief .wt-recent__item { margin: 0; padding: 0; } body.nieuwe-header-actief .wt-recent__link { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px solid #f7f8fa; color: inherit; text-decoration: none; transition: background 120ms; } body.nieuwe-header-actief .wt-recent__link:hover { background: #ffffff; } body.nieuwe-header-actief .wt-recent__item:last-child .wt-recent__link { border-bottom: 0; } body.nieuwe-header-actief .wt-recent__img { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; background: #ffffff; border-radius: 4px; } body.nieuwe-header-actief .wt-recent__img--placeholder { background: #f7f8fa; } body.nieuwe-header-actief .wt-recent__info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; } body.nieuwe-header-actief .wt-recent__name { font-size: 14px; font-weight: 400; color: #2c2d33; /* zelfde donkergrijs als Shoptimizer's mini-cart productnamen */ line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.nieuwe-header-actief .wt-recent__price { font-size: 14px; font-weight: 700; color: #d12e37; } body.nieuwe-header-actief .wt-recent__price del { color: #9ca3af; font-weight: 400; font-size: 12px; margin-right: 4px; } body.nieuwe-header-actief .wt-recent__stock { font-size: 12px; color: #9ca3af; font-style: italic; } /* Hier stonden twee reparaties op Shoptimizers winkelwagen-flyout: de "80px sliver"-bug en het doorlopen tot in de iOS safe-area. Verwijderd 27-08-2026. Die flyout bestaat niet meer; hij hing aan body.drawer-open, een klasse die Shoptimizers JavaScript zette. Geteld over 32 live pagina's: nul keer aanwezig, en geen enkel eigen script zet hem. Onze eigen laden (mm-open, wt-recent-open, filter-open) regelen dit zelf. */ /* ============================================================ Overgenomen uit de opgevangen Kirki-laag, 27-08-2026 ============================================================ Van de 106 regels in `basislaag-kirki.css` deden er nog zeven echt werk. Twee daarvan horen hier thuis. De rest was opmaak voor een thema en plugins die er niet meer zijn. Gemeten op tien paginatypes, op 1280px en op 375px. */ /* De achtergrond van de kop. Zonder deze regel wordt de kopbalk doorzichtig: geen enkel ander stijlblad zet hier een achtergrond. */ .site-header { background-color: #eef2f9; } /* De winkelwagenknop rechtsboven. Zonder deze regel valt hij terug op de geerfde 15px/400 en wordt hij lichter en kleiner dan de rest van de kop. */ .wt-header-cart__knop .cart-contents { font-size: 16px; font-weight: 700; } /* Navigatielink die alleen op een breed scherm past. De rij in de kop is krap: op 1024px is er 58px vrij van de 992. "Aanbiedingen" kost er 128, en ook na het inkorten van "Onze merken" naar "Merken" (44px winst) komt het 27px tekort; dan valt het winkelwagenicoon van de rij af. Vanaf 1200px is er ruimte zat (gemeten: 19px over op 1150, 149px op 1280). Daaronder is de pagina bereikbaar via het mobiele menu en de footer. */ .wt-navlink--breed { display: none; } @media (min-width: 1200px) { .wt-navlink--breed { display: inline-flex; } } /* ==================== /css/filter-flyout.css ==================== */ /** * Weltechniek — Filter-flyout * * Alle filter-gerelateerde styling op één plek. * Wordt alleen geladen op product-archief / categorie-pagina's * (zie functions.php → bv_filter_ux_enqueue). * * Brand-tokens (--wt-blue, --wt-green) komen uit header.css. * * Versie 1.1.1 — + breakpoint-gat 993–1023px gedicht, incl. open-state (blok 2b) */ /* ============================================================ */ /* 1. WIS-FILTER KNOP (verschijnt in actieve filters widget) */ /* ============================================================ */ .widget_layered_nav_filters a.bv-clear-all-filters, .widget_layered_nav_filters a.bv-clear-all-filters:link, .widget_layered_nav_filters a.bv-clear-all-filters:visited { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 14px; background: #f7f8fa; border: 1px solid #cbd5e1; border-radius: 6px; color: #1e3a6d !important; font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none !important; transition: background .15s ease, border-color .15s ease; } .widget_layered_nav_filters a.bv-clear-all-filters:hover, .widget_layered_nav_filters a.bv-clear-all-filters:focus { background: #e1eaf2; border-color: #1e3a6d; color: #1e3a6d !important; text-decoration: none !important; } .widget_layered_nav_filters a.bv-clear-all-filters:hover *, .widget_layered_nav_filters a.bv-clear-all-filters:focus * { text-decoration: none !important; } .widget_layered_nav_filters a.bv-clear-all-filters::before { content: none !important; display: none !important; } .widget_layered_nav_filters a.bv-clear-all-filters .bv-clear-all-filters__icon { display: inline-block; font-size: 16px; font-weight: 700; line-height: 1; color: inherit; text-decoration: none !important; transform: translateY(-1px); } /* ============================================================ */ /* 2. TELLER (X) IN MOBIELE FILTER-KNOP */ /* ============================================================ */ .mobile-filter.wt-filterknop .bv-filter-count { margin-left: 2px; font-weight: 600; } /* ============================================================ */ /* 2b. BREAKPOINT-GAT 993–1023px */ /* ============================================================ */ /* Shoptimizer schakelt de sidebar pas op ≤992px naar off-canvas, terwijl onze flyout-knop (blok 3 hieronder) al vanaf ≤1023px verschijnt. In de band ertussen stond de sidebar dus als smalle kolom ín de pagina én zweefde de Filteren-knop erover: twee filter-UI's tegelijk. Hier trekken we Shoptimizers eigen off-canvas basis-state door tot 1023px, zodat de flyout in die band de enige filter-UI is. De declaraties zijn 1-op-1 overgenomen van Shoptimizers ≤992px-regel, zodat `body.filter-open` (blok 4) precies hetzelfde gedrag krijgt als op mobiel. */ @media (min-width: 993px) and (max-width: 1023px) { .woocommerce.archive #secondary, .wc-active.search-results #secondary, .page-template-template-woocommerce-archives #secondary { visibility: hidden; overflow-y: auto; position: fixed; z-index: 102; top: 0; left: -300px; height: 100%; padding: 1.5rem; opacity: 0; background: #fff; transition: .35s .1s; width: 300px !important; } /* Open-state. Shoptimizer levert die op ≤992px zelf (visibility/left/opacity), maar die regel bestaat in deze band niet. Blok 4 hieronder zet alleen afmetingen en positie, géén visibility/opacity — zonder onderstaande regel kreeg je dus een "dode" toestand: body.filter-open aan, Filteren-knop weg, maar geen zichtbare drawer. Declaraties 1-op-1 gelijk aan Shoptimizers ≤992px open-regel. */ .woocommerce.archive.filter-open #secondary, .wc-active.search-results.filter-open #secondary, .page-template-template-woocommerce-archives.filter-open #secondary { visibility: visible; left: 0; opacity: 1; } /* De vrijgekomen kolom opvullen: zonder dit blijft de content op ~77% hangen met een gat links waar de sidebar stond. */ .woocommerce.archive .content-area, .woocommerce.archive #primary, .wc-active.search-results .content-area, .page-template-template-woocommerce-archives .content-area { width: 100% !important; float: none !important; } } /* ============================================================ */ /* 3. FLOATING FILTER-KNOP (mobiel & tablet ≤1023px) */ /* ============================================================ */ @media (max-width: 1023px) { .site-main > .mobile-filter.wt-filterknop { position: fixed; left: 50%; right: auto; bottom: 20px; top: auto; transform: translateX(-50%); margin: 0; width: auto; max-width: calc(100vw - 32px); height: auto; min-height: 0; line-height: 1; padding: 10px 22px; background: #1e3a6d; color: #fff; border: none; border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: 0 6px 20px rgba(30, 58, 109, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12); z-index: 9999; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; opacity: 1; visibility: visible; transition: opacity 0.2s ease, visibility 0.2s ease; } .site-main > .mobile-filter.wt-filterknop svg { stroke: #fff; width: 18px; height: 18px; flex-shrink: 0; margin: 0; padding: 0; top: auto; left: auto; transform: none; position: static; vertical-align: middle; display: block; align-self: center; } .site-main > .mobile-filter.wt-filterknop:hover, .site-main > .mobile-filter.wt-filterknop:focus-visible { background: #14284F; box-shadow: 0 8px 24px rgba(30, 58, 109, 0.45), 0 3px 8px rgba(0, 0, 0, 0.15); } /* Verberg de knop wanneer de filterlade open is. Hier stonden ook body.mobile-toggled (Shoptimizers hamburgermenu) en body.drawer-open (zijn winkelwagen-flyout). Verwijderd 27-08-2026: beide klassen worden nergens meer gezet, niet door ons en niet door een plugin, en komen op geen van de 32 gemeten pagina's voor. Ons eigen menu gebruikt mm-open en mm-locked; die zitten in header.css. */ body.filter-open .site-main > .mobile-filter.wt-filterknop { opacity: 0; visibility: hidden; pointer-events: none; } /* Extra ruimte onderaan zodat de laatste productrij niet onder de knop verdwijnt */ body.archive .site-main, body.tax-product_cat .site-main { padding-bottom: 80px; } } /* ============================================================ */ /* 4. UNIFORME FILTER-FLYOUT (full-width, blauwe header) */ /* Consistency met cart-drawer / recent-bekeken / mega-menu */ /* ============================================================ */ /* CTA standaard verborgen (alle viewports). Wordt zichtbaar gemaakt binnen mobile @media wanneer body.filter-open actief is. */ .wt-filter-cta { display: none; } @media (max-width: 1023px) { /* Drawer: full-width op mobiel. Shoptimizer heeft right:200px + max-width:500px op #secondary; we forceren echte 100vw door left/right/max-width te overruled. Dubbele .filter-open class voor specificity-boost tegen Shoptimizer's body.left-woocommerce-sidebar regel. */ /* iOS Safari safe-area zone: vul met wit via een pseudo-element. `height: 100dvh` op de drawer reikt NIET tot ONDER Safari's frosted-glass toolbar — er blijft een doorzichtige zone over waar page-content doorschijnt. Een fixed ::after dat exact `env(safe-area-inset-bottom)` hoog is, dekt die af. */ body.filter-open { background: #fff; } body.filter-open::after { content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: env(safe-area-inset-bottom); background: #fff; z-index: 9999; pointer-events: none; } /* Het sluitkruisje rechtsboven in de blauwe balk. Zelfde verhaal als de lade zelf: de basislaag heeft alleen de dichte toestand (visibility: hidden op ≤992px), de bijbehorende open-toestand kwam uit Shoptimizers eigen CSS en is bij het opvangen niet meegekomen. Zonder deze regel staat het kruisje er wel (40x40, rechtsboven) maar zie je het niet, en kun je de lade alleen nog sluiten via de groene knop onderin of de Escape-toets. */ body.filter-open.filter-open .filters.close-drawer { visibility: visible; } body.filter-open.filter-open #secondary { /* Zichtbaarheid. Deze twee kwamen op telefoons uit Shoptimizers eigen ≤992px open-regel. Bij het opvangen van de basislaag (25-08) is die regel niet meegekomen: er werd gemeten in de dichte toestand, en een regel die alleen bij body.filter-open geldt komt dan niet in beeld. Gevolg: de lade schoof wel op zijn plek maar bleef onzichtbaar. Geen !important nodig, dit is specifieker (121) dan de dichte regel (120). */ visibility: visible; opacity: 1; width: 100vw !important; max-width: none !important; left: 0 !important; right: 0 !important; /* Dynamic viewport height: drawer reikt tot écht onderaan iOS scherm (incl. safe-area zone). Witte bg schijnt door Safari's frosted-glass toolbar heen — geen content meer doorzichtig. Zelfde truc als #mm-mobile en #wt-recent. */ top: 0 !important; bottom: 0 !important; height: 100vh !important; height: 100dvh !important; padding-top: 80px; /* Plek vrij voor floating CTA + iOS safe-area */ padding-bottom: calc(96px + env(safe-area-inset-bottom)); background: #fff; } /* Brand-blauwe header met "Filters" titel — sticky bovenaan */ body.filter-open.filter-open #secondary::before { content: 'Filters'; position: fixed; top: 0; left: 0; right: 0; height: 56px; background: #1E3A6D; color: #fff; font-size: 17px; font-weight: 600; display: flex; align-items: center; padding: 0 20px; z-index: 1001; } /* Shoptimizer's bestaande .filters.close-drawer (X-knop) herpositioneren naar binnen de drawer, top-right — wit gestyled. We hergebruiken zijn click-handler (geen JS-rewrite nodig). Specifiek scope op .filters.close-drawer (niet de hamburger of cart variant). */ body.filter-open.filter-open .filters.close-drawer { position: fixed !important; top: 8px !important; right: 8px !important; left: auto !important; width: 40px !important; height: 40px !important; background: transparent !important; border: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 1002 !important; cursor: pointer !important; border-radius: 4px !important; transition: background 0.15s ease !important; } body.filter-open.filter-open .filters.close-drawer:hover { background: rgba(255, 255, 255, 0.15) !important; } /* Shoptimizer's close-X is een inline SVG met stroke="currentColor". Forceer witte stroke + expliciete grootte (anders krimpt SVG tot 0x0). */ body.filter-open.filter-open .filters.close-drawer, body.filter-open.filter-open .filters.close-drawer * { color: #fff !important; } body.filter-open.filter-open .filters.close-drawer span, body.filter-open.filter-open .filters.close-drawer svg { display: inline-flex !important; align-items: center !important; justify-content: center !important; } body.filter-open.filter-open .filters.close-drawer svg { width: 24px !important; height: 24px !important; stroke: #fff !important; fill: none !important; } /* "Toon X resultaten" floating CTA — drijvende knop boven witte safe-area zone. Patroon: zelfde als mega-menu's "Zakelijke klant worden" knop. Margin + radius + shadow geven button-look; bottom inclusief safe-area houdt 'm boven iOS Safari's frosted-glass toolbar. */ #secondary .wt-filter-cta { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); left: 16px; right: 16px; width: auto; background: #00bb00; color: #fff; font-size: 16px; font-weight: 600; padding: 16px 20px; text-align: center; cursor: pointer; z-index: 10000; border: 0; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.08); font-family: inherit; display: none; transition: background 0.15s ease, transform 0.1s ease; /* iOS tap-events */ -webkit-tap-highlight-color: transparent; touch-action: manipulation; } #secondary .wt-filter-cta:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.08); } body.filter-open.filter-open #secondary .wt-filter-cta { display: block; } #secondary .wt-filter-cta:hover, #secondary .wt-filter-cta:focus-visible { background: #008d00; outline: none; } } /* ==================== /css/global.css ==================== */ /* ============================================================ * Weltechniek — GLOBAL CSS * * Site-brede, thema-onafhankelijke presentatielaag. Hierin hoort * alles wat OVERAL geldt en nergens specifiek thuishoort: * - Design tokens (merkkleuren + status) — canonieke bron, brug * naar theme.json bij de latere block-theme-migratie. * - WC-meldingen (notices) in block-banner-stijl. * - Checkboxen in huisstijl (native, site-breed). * * Geenqueued via wt_global_css() in functions.php met filemtime() * -> automatische cache-busting, geen handmatige versie-bump. * * NB: header.css definieert (voorlopig) dezelfde merk-tokens nog in * z'n eigen :root. Bewust gedupliceerd tijdens de overgang; bij de * opruim-/migratieronde verdwijnt de kopie daar en wordt dit de enige * bron. Identieke waarden -> geen conflict in de tussentijd. * ============================================================ */ :root { /* ---- Merk ---- */ --wt-blue: #1e3a6d; /* navy - primair */ --wt-blue-soft: #eef2f9; --wt-green: #00bb00; --wt-green-hover: #008d00; /* De gewone tekstkleur. Bestond nog niet, terwijl `plp.css` er op twee plekken al naar verwees: de filterlinks in de zijbalk en het SEO-tekstblok onder een categorie. Een var() naar een token dat niet bestaat geeft geen foutmelding, de eigenschap valt stil terug op overerven. Dat viel niet op omdat de geërfde kleur toevallig dezelfde zwarte is. Nu bestaat het token, en gebruiken de drie plekken hieronder in dit bestand hem ook, zodat de tekstkleur van de site op één plek staat. */ --wt-text: #000; /* ---- UI: vlakken, randen, radius ---- * Verhuisd uit plp.css (2026-08-03). Daar stonden ze onder `body.wt-plp-preview`, dus ALLEEN op de * categoriepagina. Zodra de productkaart ook buiten de shop gebruikt werd (homepage-secties), waren * deze variabelen daar niet gedefinieerd en viel bv. de prijskleur terug op zwart. Hier horen ze: * global.css is de canonieke tokenbron. */ --wt-muted: #8a97a8; /* labels, tellingen, secundair */ /* Eén stap donkerder dan --wt-muted, voor gedempte tekst die wél gelezen moet worden. * #8a97a8 haalt op wit maar 2,97:1 en zakt daarmee onder de WCAG AA-norm van 4,5:1; * #66748a haalt 4,74:1. Gebruik deze zodra gedempte tekst inhoud draagt (merknaam op de * productkaart), en --wt-muted voor puur bijkomstige tekst (aantallen achter een filter). */ --wt-muted-strong: #64748b; /* Nóg lichter dan --wt-muted, bewust onder de contrastnorm (2,25:1). Alleen voor tekst die * duidelijk ondergeschikt MAG ogen naast iets ernaast, zoals het artikelnummer naast de merknaam * op de productkaart. Nooit gebruiken voor tekst die op zichzelf staat. */ --wt-muted-soft: #a3aebd; --wt-border: #e1eaf2; --wt-border-strong:#d3dfec; --wt-border-input: #c5d2e2; --wt-bg: #f7f8fa; --wt-tint: #eef2f9; --wt-error: #d12d2d; /* afgeprijsde prijzen */ --wt-amber: #f5a623; /* accentvlak / reviewsterren - NIET voor tekst (2,03:1 op wit) */ --wt-amber-text: #b45309; /* leesbare amber: levertijd bij nabestelling (5,02:1 op wit) */ --wt-radius-sm: 6px; --wt-radius: 8px; --wt-radius-lg: 10px; /* ---- Status (notices) ---- */ --wt-notice-text: #1e2733; --wt-notice-error-bg: #fdecec; --wt-notice-error-border: #e0413d; --wt-notice-ok-bg: #edf7ee; --wt-notice-ok-border: #2e9a44; --wt-notice-info-bg: #eef2f9; --wt-notice-info-border: var(--wt-blue); } /* ============================================================ * WC-meldingen (notices) - block-banner-stijl * (lichte bg, gekleurde rand, icoon links, donkere tekst) i.p.v. de * classic massieve stijl. Geldt voor fout/succes/info op alle pagina's * (checkout, winkelwagen, account, shop...). Knoppen (.button) ongemoeid. * ============================================================ */ .woocommerce-error, .woocommerce-message, .woocommerce-info { list-style: none; /* !important: WC-core + Shoptimizer zetten hun eigen notice-stijl (massief gekleurde bg, witte tekst, radius) op dezelfde selector, later geladen -> anders winnen die. */ margin: 0 0 16px !important; padding: 14px 18px 14px 52px !important; border: 1px solid !important; border-radius: 8px !important; color: var(--wt-notice-text) !important; font-size: 15px; font-weight: 400; line-height: 1.5; background-repeat: no-repeat !important; background-position: 18px center !important; background-size: 22px 22px !important; box-shadow: none !important; text-shadow: none !important; } .woocommerce-error li, .woocommerce-message li, .woocommerce-info li { list-style: none; margin: 0; padding: 0; } .woocommerce-error::before, .woocommerce-message::before, .woocommerce-info::before { content: none !important; } .woocommerce-error { background-color: var(--wt-notice-error-bg) !important; border-color: var(--wt-notice-error-border) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23dc2626'/%3E%3Cpath d='M11 7h2v6h-2zm0 8h2v2h-2z' fill='%23fff'/%3E%3C/svg%3E") !important; } .woocommerce-message { background-color: var(--wt-notice-ok-bg) !important; border-color: var(--wt-notice-ok-border) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%2300871f'/%3E%3Cpath d='M7.5 12.5l3 3 6-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .woocommerce-info { background-color: var(--wt-notice-info-bg) !important; border-color: var(--wt-notice-info-border) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%231e3a6d'/%3E%3Cpath d='M11 10h2v7h-2zm0-3h2v2h-2z' fill='%23fff'/%3E%3C/svg%3E") !important; } .woocommerce-error a:not(.button), .woocommerce-message a:not(.button), .woocommerce-info a:not(.button) { color: inherit; font-weight: 600; text-decoration: underline; } /* ============================================================ * Checkboxen in huisstijl - site-breed * Native checkboxen (cookie-banner, formulieren, plugins...) navy * aangevinkt i.p.v. browser-default. `accent-color` raakt alleen native * gerenderde checkboxen; WC-block-checkboxen (appearance:none, op * checkout/winkelwagen) houden hun styling in block-checkout.css. * ============================================================ */ input[type="checkbox"] { accent-color: var(--wt-blue); } /* ============================================================ * PAGINACONTAINER — één goot voor header, content en footer * ============================================================ * De site had drie eigen containers naast elkaar. Ze deelden wel dezelfde * inhoudsbreedte (1301px), maar niet de goot ernaast: * * header .wrapper 1301px + --wrapper-padding (16 / 24 / 32px) * content .col-full 1301px + 2.61792em (41,9px) vanaf 993px * footer .wt-footer__inner 1301px + 16px * * Gevolg: de linkerlijn viel alleen samen bóven ~1350px, waar alle max-widths * klemmen. Daaronder liep het uiteen tot 26px verschil — het duidelijkst rond * 1000–1200px, waar de content zichtbaar smaller stond dan header en footer. * * Norm = de footer (keuze Tijn 2026-08-01): inhoud max 1301px, goot 16px. * De header leest zijn goot uit --wrapper-padding, dus die zetten we hier vast * in plaats van de regel zelf te overschrijven. * * `body`-prefix geeft net genoeg specificiteit om Shoptimizers eigen * .col-full-regels te verslaan zonder !important. Varianten die bewust * padding 0 hebben (.top-bar .col-full, canvas-templates) zijn specifieker * en blijven dus gewoon werken. */ :root { --wt-container-max: 1301px; --wt-container-gutter: 16px; } /* Header: goot gelijktrekken op elke breedte (was 1rem/1.5rem/2rem). */ body.nieuwe-header-actief { --wrapper-padding: var(--wt-container-gutter); } /* Content + footer: identieke container. * De productpagina heeft twee éigen wrappers met een eigen goot (.product-details-wrapper 41,9px, * de breadcrumb 40,3px) omdat Shoptimizer daar de padding van .col-full op 0 zet. Die doen mee, * anders staat de PDP als enige weer 26px naar binnen. */ body .col-full, body .wt-footer__inner, body .product-details-wrapper, body .wt-pdp, body.single-product .archive-header .woocommerce-breadcrumb { box-sizing: border-box; max-width: calc(var(--wt-container-max) + 2 * var(--wt-container-gutter)); padding-left: var(--wt-container-gutter); padding-right: var(--wt-container-gutter); margin-left: auto; margin-right: auto; } /* Tot en met 992px heeft de .col-full rond het kruimelpad op de productpagina zélf al de goot * (productpagina-basis.css zet die pas vanaf 993px op 0). Dan kreeg het kruimelpad hem dubbel en begon * "Home" op 32px terwijl titel, zoekveld en de categoriepagina op 16px staan (melding Tijn 17-09-2026). */ @media (max-width: 992px) { body.single-product .archive-header .col-full .woocommerce-breadcrumb { padding-left: 0; padding-right: 0; } } /* ============================================================================ * LEVERTIJDREGEL (gedeeld: productkaart, koopblok PDP, sticky balk) * ============================================================================ * Bijbehorende PHP: inc/levertijd.php (`wt_levertijd_html()`). Bewust hier en niet in * product-card.css of pdp.css: de regel moet op elke plek woordelijk én visueel gelijk zijn. * Wie hem op één plek anders maakt, maakt de belofte ongeloofwaardig. * * Nabestelling is amber en niet groen: het duurt aantoonbaar langer dan voorraad, en dat mag de * bezoeker zien vóór hij bestelt in plaats van erna. `--wt-amber-text` (#b45309) en niet * `--wt-amber` (#f5a623): die laatste haalt op wit maar 2,03:1 en is onleesbaar als tekst. * ============================================================================ */ .wt-levertijd { margin: 8px 0 0; font-size: 13px; font-weight: 700; line-height: 1.35; } /* Nabestelling is GROEN, gelijk aan op voorraad. Het PDP-ontwerp stelde amber voor omdat het langer * duurt, maar dit is de regel die op elke categoriepagina staat en die is niet in dit traject * gewijzigd. Wil je hem alsnog onderscheiden, dan is dat één regel — maar als besluit, niet als * bijvangst. */ .wt-levertijd--op { color: var(--wt-green-hover); } .wt-levertijd--na { color: var(--wt-green-hover); } .wt-levertijd--uit { color: var(--wt-muted); } /* In het koopblok op de productpagina staat de regel op zichzelf en mag hij een punt groter. */ .wt-levertijd--pdp { font-size: 13.5px; margin: 14px 0; } /* Uitverkochte kaart is als geheel gedempt; de levertijdregel mag daar niet uit springen. */ li.wt-card--soldout .wt-levertijd { color: var(--wt-muted); } /* ============================================================================ * BREADCRUMB (overal identiek) * ============================================================================ * Stond tot 14-08-2026 gescoped op `body.wt-plp` in plp.css en gold dus alleen op de * categoriepagina. De productpagina hield daardoor Shoptimizers eigen kruimels (13,5px, #666, * 16px padding boven én onder), waardoor twee pagina's naast elkaar niet dezelfde site leken. * * Bewust ontscoped: overal waar WooCommerce of het thema een breadcrumb rendert, hoort hij er * hetzelfde uit te zien. De onderlijn scheidt de kruimels van de pagina-inhoud en loopt mee met * de contentcontainer, net als de scheidingslijnen bij SEO-tekst, FAQ en kennisbank. * * `body` ervoor is nodig, geen sierletter: Shoptimizer gebruikt in main.css exact dezelfde selector * `.woocommerce-breadcrumb` en laadt ná ons. Bij gelijke specificiteit wint de laatste, dus zonder * die extra `body` bleef de kruimel 13,5px en #666. * ============================================================================ */ /* De lijn hoort NIET op de breadcrumb zelf: die staat binnen de contentcontainer (max 1301px) en * dan stopt de streep halverwege het scherm. Hij staat daarom op `.archive-header`, de wrapper die * wél de volle breedte pakt. `:has()` erbij zodat een archive-header zonder kruimels geen losse * streep krijgt. Gecontroleerd: die wrapper zit om de breadcrumb op categorie-, product-, merk- én * blogpagina's. */ body .archive-header:has(.woocommerce-breadcrumb) { border-bottom: 1px solid var(--wt-border); /* Lucht ónder de lijn. Zonder deze marge plakt de paginatitel tegen de streep: de breadcrumb * geeft zijn ruimte namelijk aan de lijn (padding-bottom), niet aan wat erna komt. 28px is * dezelfde orde als de 32px die SEO-tekst, FAQ en kennisbank na hún scheidingslijn krijgen, * iets krapper omdat een kruimelpad lichter weegt dan een sectie. */ margin-bottom: 28px; } /* Horizontaal schuifbaar, want een kruimelpad is op een telefoon vrijwel altijd breder dan het * scherm: op 418px is "Home | Luchtbehandeling | Mechanische ventilatiebox | Vent-Axia * ventilatiebox | " 945px lang in 386px ruimte. Zonder dit werd de laatste kruimel * halverwege afgekapt en leek het pad niet uit te lijnen met de rest van de pagina. * * De scrollbalk staat uit: een dun grijs streepje onder een kruimelpad leest als een storing, en de * afgesneden tekst aan de rand laat zelf al zien dat er meer is. `overscroll-behavior-x: contain` * voorkomt dat een veeg over het pad de hele pagina meesleept. * * `padding-right` even groot als de goot van de container: zonder dat plakt de laatste kruimel * tegen de schermrand zodra je helemaal doorschuift. */ body .woocommerce-breadcrumb { margin: 20px 0 0; padding: 0 var(--wt-container-gutter, 16px) 14px 0; font-size: 12.5px; color: var(--wt-muted); overflow-x: auto; overscroll-behavior-x: contain; white-space: nowrap; scrollbar-width: none; -ms-overflow-style: none; } body .woocommerce-breadcrumb::-webkit-scrollbar { display: none; } /* WooCommerce wikkelt de kruimels soms in een

; die eigen marge stapelde op de onze. */ body .woocommerce-breadcrumb p { margin: 0; } body .woocommerce-breadcrumb a { color: var(--wt-muted); text-decoration: none; } body .woocommerce-breadcrumb a:hover { color: var(--wt-blue); } body .woocommerce-breadcrumb .separator { color: var(--wt-border-input); } /* Huidige pagina donker en vet: dat is waar je bent, de rest is waar je vandaan komt. */ body .woocommerce-breadcrumb .last { color: var(--wt-blue); font-weight: 700; } /* ============================================================================ * STERREN (gedeeld: productpagina en productkaart) * ============================================================================ * Eén rij van vijf sterren, met een gele laag eroverheen die op `--wt-ster` procent wordt * afgekapt. Zo geeft 4,6 een vijfde ster die voor 60% vol staat, in plaats van afronden naar * boven of beneden. * * Getekend met een herhalende achtergrond en niet met vijf losse tekens: het teken ★ ziet er in * elk lettertype anders uit en lijnt niet betrouwbaar uit. Twee variabelen sturen alles: * `--ster-maat` voor de grootte, `--wt-ster` voor hoeveel er gevuld is. * * **14px is de standaard en overal de enige maat.** Er stonden eerder vijf verschillende maten in * drie bestanden (13 op de kaart, 17 en 14 in de kopregel, 15 in de beoordelingslijst, 19 in de * samenvatting). Die verschillen zag niemand, maar ze moesten alle vijf onderhouden worden en * liepen bij elke aanpassing verder uiteen. Alleen het samenvattingsblok zet nog een eigen maat, * omdat de sterren daar naast een cijfer van 44px staan en anders wegvallen. Elders: geen eigen * waarde zetten. * ========================================================================= */ /* De tegel is 1px smáller dan hoog (`--ster-maat - 1px`), niet 1px breder. De ster in de SVG heeft * links en rechts wat lucht binnen zijn viewBox; met een bredere tegel kwam daar nog eens ruimte bij * en dreven de vijf sterren uit elkaar. Nu staan ze strak tegen elkaar, en de hele rij is 9px smaller * — precies de ruimte die de metaregel op een telefoon nodig had. */ .wt-stars { position: relative; display: inline-block; width: calc((var(--ster-maat, 14px) - 1px) * 5); height: var(--ster-maat, 14px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e1eaf2'%3E%3Cpath d='M12 2 15 9l7 .5-5.5 4.5 1.8 7L12 17l-6.3 4 1.8-7L2 9.5 9 9z'/%3E%3C/svg%3E") repeat-x left center / calc(var(--ster-maat, 14px) - 1px) var(--ster-maat, 14px); } .wt-stars::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--wt-ster, 0%); overflow: hidden; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f5a623'%3E%3Cpath d='M12 2 15 9l7 .5-5.5 4.5 1.8 7L12 17l-6.3 4 1.8-7L2 9.5 9 9z'/%3E%3C/svg%3E") repeat-x left center / calc(var(--ster-maat, 14px) - 1px) var(--ster-maat, 14px); } /* ============================================================================ * PRODUCTBADGES * ============================================================================ * "ISDE subsidie mogelijk", "Bezorgtoeslag", "Aan 1 stuk geleverd". Staan linksboven op de * productfoto, op de productpagina en straks ook op de kaart in het overzicht. Daarom hier en niet * in pdp.css: één component, twee plekken. * * De beheerkant leeft nog in CommerceKit (zie inc/badges.php), maar de vormgeving niet: de plugin * zet er lichtblauw op met donkerblauwe tekst, en dat komt in geen enkel ontwerp voor. Groen met * wit, zoals de knoppen en de vinkjes, plus een donkere variant voor actiebadges. * ========================================================================= */ .wt-badges { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: calc(100% - 28px); } /* Een badge is een label, geen knop. Daarom een zachte vulling met een rand die op diezelfde kleur is afgestemd, en donkere tekst; niet het volle merkgroen, want dat is de kleur van de koopknop en die hoort harder te roepen dan een label. Alle tekstkleuren zijn doorgerekend op de eigen achtergrond: 5,9:1 tot 9,8:1. */ .wt-badge { display: inline-block; padding: 5px 11px; border: 1px solid var(--badge-rand, #d3dfec); border-radius: 20px; background: var(--badge-bg, #eef2f9); color: var(--badge-tekst, #334155); font-size: 11px; font-weight: 700; line-height: 1.2; } .wt-badge--groen { --badge-bg: #e7f6e7; --badge-rand: #b0dfb0; --badge-tekst: #146c14; } .wt-badge--blauw { --badge-bg: #e6ecf7; --badge-rand: #bcd6ef; --badge-tekst: #1e3a6d; } .wt-badge--rood { --badge-bg: #fdecec; --badge-rand: #f5c3ca; --badge-tekst: #a8202f; } .wt-badge--amber { --badge-bg: #fdf3e2; --badge-rand: #f0d8a8; --badge-tekst: #8a4c07; } .wt-badge--grijs { --badge-bg: #eef2f9; --badge-rand: #d3dfec; --badge-tekst: #334155; } /* De aanbiedingsbadge komt automatisch en is altijd rood: dat is de enige badge die over de prijs gaat. `--sale` blijft bestaan als eigen naam, zodat de code niet hoeft te weten welke kleur eraan hangt. */ .wt-badge--sale { --badge-bg: #fdecec; --badge-rand: #f5c3ca; --badge-tekst: #a8202f; } /* Oude naam uit de CommerceKit-tijd; nog aanwezig omdat er badges kunnen zijn die 'donker' als stijl hebben staan. Wordt getoond als grijs. */ .wt-badge--donker { --badge-bg: #eef2f9; --badge-rand: #d3dfec; --badge-tekst: #334155; } /* ============================================================================ * Gratis-verzendbalk (.wt-fsn) — winkelwagen en winkelwagen-flyout * * Markup in inc/gratis-verzending.php. Staat in global.css en niet in cart.css, * omdat de flyout op elke pagina open kan. * * De maatvoering is een-op-een overgenomen van de CommerceKit-module die dit * verving (8px balk, radius 5px, 12px tekst in de flyout en 13px in de * winkelwagen), zodat de overstap visueel niets verandert. * ========================================================================= */ .wt-fsn { width: 100%; text-align: center; } .wt-fsn--cart { margin: 20px 0 10px; } .wt-fsn--mini { margin-bottom: 10px; } /* Het grijze spoor. */ .wt-fsn__balk { height: 8px; background: #e2e2e2; border-radius: 5px; margin-bottom: 3px; } .wt-fsn--cart .wt-fsn__balk { margin-bottom: 6px; } /* Het gevulde deel; de breedte komt als inline style uit PHP. */ .wt-fsn__vulling { display: block; height: 8px; background: var(--wt-green, #00bb00); border-radius: 5px; } /* In de flyout een inline-block met eigen regelhoogte; in de winkelwagen een gewone inline-span, precies zoals de module die dit verving. */ .wt-fsn--mini .wt-fsn__tekst { display: inline-block; font-size: 12px; line-height: 1.4; } .wt-fsn--cart .wt-fsn__tekst { font-size: 13px; } /* Het bedrag dat wc_price() teruggeeft, in de merkkleur. */ .wt-fsn__tekst .amount { color: var(--wt-green, #00bb00); font-weight: 700; } .wt-fsn__link { margin-left: 5px; color: #111; font-weight: 700; text-decoration: underline; } /* Drempel gehaald: vinkje vóór de tekst. Een mask in plaats van een gekleurde SVG, zodat het vinkje dezelfde variabele volgt als de balk. */ .wt-fsn--gehaald .wt-fsn__tekst { position: relative; padding-left: 23px; } .wt-fsn--gehaald .wt-fsn__tekst::before { content: ""; position: absolute; top: 50%; left: 0; margin-top: -9px; display: block; width: 18px; height: 18px; background: var(--wt-green, #00bb00); -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } /* ============================================================================ * Lettertype Inter, zelf geladen * * Tot 23-08-2026 kwam Inter binnen via Kirki, de customizer-laag die in het * Shoptimizer-thema is ingebakken. Dat betekende: parent theme weg is lettertype * weg. Daarom staan de declaraties nu hier, wijzend naar dezelfde bestanden die * al in wp-content/fonts/inter/ staan. * * Kirki genereerde 42 regels: zeven tekensets (latijn, latijn-uitgebreid, * cyrillisch, cyrillisch-uitgebreid, Grieks, Grieks-archaisch en Vietnamees) maal * twee gewichten, en dat hele blok drie keer omdat er drie typografie-instellingen * op Inter stonden. Hier staan er vier: een Nederlandse installatieshop heeft aan * latijn en latijn-uitgebreid genoeg. Het bereik is letterlijk overgenomen, zodat * accenten en het euroteken blijven werken. * * Zolang Shoptimizer nog draait staat Kirki's versie er ook nog; die vervalt bij * de themawissel. Dubbele declaraties zijn onschadelijk: de browser kiest per * teken de eerste passende en het gaat om dezelfde bestanden. * * Padden zijn relatief aan het domein (/wp-content/...), niet absoluut met * https://weltechniek.nl ervoor zoals Kirki deed. Dat scheelt gedoe op een * staging- of testomgeving. * ========================================================================= */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/wp-content/fonts/inter/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/wp-content/fonts/inter/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/wp-content/fonts/inter/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/wp-content/fonts/inter/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ============================================================================ * Basistypografie * * Kwam tot 23-08-2026 van Kirki, de customizer-laag in het Shoptimizer-thema. * * LET OP als je dit ooit opnieuw moet afleiden: Kirki levert TWEE sets die elkaar * tegenspreken. De optie `shoptimizer_dynamic_css_output` zegt bij de koppen * gewicht 600, het inline blok `kirki-inline-styles` zegt 700, en dat laatste is * wat de browser gebruikt. De waarden hieronder komen uit het inline blok. Parent theme weg betekende * dus: alle lettergroottes, kleuren en gewichten weg. Nu staat het hier, met de * waarden letterlijk overgenomen zodat er niets verschuift. * * Van de achttien regels die Shoptimizer genereerde zijn er vijf niet * overgenomen, omdat ze markup opmaken die wij zelf niet meer renderen. Gemeten * op blog, productpagina en categoriepagina: nul treffers. * - `.main-navigation …` en `.menu-primary-menu-container …` (eigen header) * - `.site .widget .widget-title` (geen widgets meer) * - `.content-area ul.products li.product …` (eigen .wt-card) * - `.shoptimizer-category-banner …` (eigen PLP-kop) * * Zolang Shoptimizer nog draait staat zijn versie er ook; de waarden zijn gelijk, * dus dat maakt visueel niets uit. Bij de themawissel blijft alleen dit over. * ========================================================================= */ /* ---- Links ---- * Stond tot 27-08-2026 in de opgevangen Kirki-laag. Daar hing de hele linkkleur van de site aan, * inclusief de kaarten op de homepage en de subcategorie-tegels. */ a { color: var(--wt-green); } a:hover { color: var(--wt-green-hover); } /* `option` staat er bewust bij: keuzelijsten erven hun opmaak niet van hun `select`, en zonder deze regel vielen ze terug op de standaard van de browser. Kwam ook uit de Kirki-laag. */ body, button, input, select, option, textarea, h6 { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; color: var(--wt-text); letter-spacing: 0; } .wp-block-button__link, figcaption, .wp-block-table, .wp-block-pullquote__citation { font-size: 16px; } .entry-content { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--wt-text); letter-spacing: 0; text-transform: none; } /* Koppen: allemaal 600 en navy. h1 is 30px, h2 25px, h3 tot en met h5 20px. */ h1, h2, .wp-block-heading h2, h3, .wp-block-heading h3, h4, .wp-block-heading h4, h5, .wp-block-heading h5 { font-family: 'Inter', sans-serif; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--wt-blue, #1e3a6d); } h1 { font-size: 30px; } h2, .wp-block-heading h2 { font-size: 25px; } h3, .wp-block-heading h3, h4, .wp-block-heading h4, h5, .wp-block-heading h5 { font-size: 20px; } /* Blogtitel en productpaginatitel volgen de gewone h1 (30px/700/navy). Ze stonden apart in de customizer met dezelfde waarden, dus hier hoeft niets extra's. */ /* Op de productpagina juist kleiner, vanaf tablet. */ @media (min-width: 770px) { .single-product h1 { font-size: 25px; } } blockquote p, .edit-post-visual-editor.editor-styles-wrapper .wp-block-quote p, .edit-post-visual-editor.editor-styles-wrapper .wp-block-quote { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 600; line-height: 1.45; letter-spacing: 0; text-transform: none; color: #222; } /* De categorie-intro boven een productoverzicht. */ .term-description { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--wt-text); } /* WooCommerce-knoppen die niet door onze eigen componenten worden gerenderd. */ body .woocommerce #respond input#submit.alt, body .woocommerce a.button.alt, body .woocommerce button.button.alt, body .woocommerce input.button.alt, .product .cart .single_add_to_cart_button, .widget_shopping_cart a.button.checkout { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; } /* ============================================================================ * Bevestiging na toevoegen aan de winkelwagen (.wt-toegevoegd) * * Vervangt de winkelwagen-la van Shoptimizer. Markup wordt gemaakt door * js/toevoegmelding.js. * * Rechtsonder en niet middenin: de klant is aan het bladeren en moet dat kunnen * blijven doen. De melding bevestigt en biedt een weg vooruit, maar houdt niets * tegen. Na vijf seconden verdwijnt hij vanzelf. * ========================================================================= */ .wt-toegevoegd { position: fixed; /* Bovenin en niet onderin. Onderin is bezet: rechtsonder het chatballonnetje, en de cookiebanner staat op desktop rechtsonder en op mobiel over de volle breedte onderaan, met een hogere z-index. Juist een nieuwe bezoeker zou de bevestiging daar dus niet zien. */ top: 16px; right: 16px; z-index: 9999; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 12px 16px; border: 1px solid var(--wt-border, #e1eaf2); border-radius: var(--wt-radius, 8px); background: #fff; box-shadow: 0 8px 24px rgba(30, 58, 109, 0.16); font-size: 14px; color: var(--wt-blue, #1e3a6d); /* Buiten beeld tot hij nodig is; geen display:none, want dan is er niets om te animeren. */ opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .wt-toegevoegd.is-zichtbaar { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Groen vinkje, dezelfde taal als de vinkjes bij de USP's. */ .wt-toegevoegd__vink { flex: none; width: 20px; height: 20px; background: var(--wt-green, #00bb00); -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .wt-toegevoegd__tekst { font-weight: 600; } .wt-toegevoegd__link { flex: none; margin-left: 4px; padding: 7px 14px; border-radius: var(--wt-radius-sm, 6px); background: var(--wt-green, #00bb00); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; } .wt-toegevoegd__link:hover, .wt-toegevoegd__link:focus { background: var(--wt-green-hover, #008d00); color: #fff; } @media (max-width: 480px) { /* Op mobiel over de volle breedte. */ .wt-toegevoegd { left: 16px; right: 16px; justify-content: space-between; } } /* Ingelogd: onder de adminbalk door. Bezoekers merken hier niets van, die hebben geen balk. De hoogte is 32px, en 46px onder de 782px-grens die WordPress zelf aanhoudt. */ body.admin-bar .wt-toegevoegd { top: 48px; } @media screen and (min-width: 601px) and (max-width: 782px) { body.admin-bar .wt-toegevoegd { top: 62px; } } /* Onder de 600px zet WordPress de balk op `position: absolute`: hij staat bovenaan het document en scrolt mee weg. Ruimte reserveren laat daar dus een leeg gat van 46px achter zodra je een stukje gescrold hebt. Terug naar dezelfde 16px als voor een bezoeker. De balk overlapt de melding dan alleen zolang je minder dan 30px gescrold bent, en op een telefoon voeg je vrijwel nooit iets toe terwijl je nog helemaal bovenaan staat. */ @media screen and (max-width: 600px) { body.admin-bar .wt-toegevoegd { top: 16px; } } /* --------------------------------------------------------------------------- * Draaiende ring voor laadstaten * --------------------------------------------------------------------------- * Gebruikt door de koopknop op de productpagina (css/pdp.css) en door de knop op de productkaart * (css/product-card.css). Staat hier en niet in een van die twee, omdat die bestanden nooit samen * geladen worden: de kaartknop kreeg wel de animatie mee maar niet de keyframes, en stond dus * stil. */ @keyframes wt-draai { to { transform: rotate(360deg); } } /* ==================== /css/reset.css ==================== */ /* * reset.css - de nulstand van de HTML-elementen * * 56 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026. Het is de laag die zegt hoe een * `p`, een `ul`, een `table` of een `input` eruitziet voordat er ook maar een eigen klasse aan te * pas komt: box-sizing, marges op nul, lijsten zonder bolletjes, knoppen zonder systeemuiterlijk, * afbeeldingen die niet buiten hun kader vallen. Shoptimizer leverde dit; wij leveren het nu zelf. * * DIT BESTAND LAADT VOOR `basislaag.css`, niet erna. Dat is het verschil met de eerder gelichte * onderdelen (categorietegel, zoekresultaten, beoordelingen). Die hebben eigen klassenamen en * winnen op specificiteit, dus daar maakt de volgorde niets uit. Hier wel: dit zijn kale * element-selectors met de laagste specificiteit die er bestaat, en ze stonden vooraan in de * basislaag juist omdat alles wat erna komt ze hoort te overschrijven. Laadt dit bestand na de * basislaag, dan gaat de reset winnen van regels die hem eerst overstemden. * * Vandaar in `inc/assets.php`: `wt-basislaag` is afhankelijk van `wt-reset`, niet andersom. * * Gemeten voor en na de verhuizing over vijftien paginaladingen (negen paginatypes op 1280px, zes * op 375px), met de telling per waarde uit `verify/css-histogram.md`. Verwachting en uitkomst: * nul verschil. * * Nog niet opgeruimd. De regels spreken elkaar op een paar plekken tegen (`small` staat er twee * keer, `table` drie keer, `mark` twee keer) omdat ze uit verschillende stylesheets van het oude * thema komen. Dat samenvoegen is een volgende stap, en dan opnieuw meten. */ *, ::before, ::after { box-sizing: border-box; } html { font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; } body { margin: 0; } b, strong { font-weight: bolder; } small { font-size: 80%; } table { text-indent: 0; border-color: inherit; } button, select { text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } legend { padding: 0; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } summary { display: list-item; } .is-layout-flow summary + * { margin-top: 0; } html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overflow-wrap: break-word; scrollbar-gutter: stable; } img, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video, canvas { display: block; max-width: 100%; height: auto; } /* ShortPixel verpakt sinds 01-09-2026 elke met een JPG-origineel in een met * AVIF- en WebP-bronnen. Stond `picture` op `display: block`, dan is dat een extra doos in de * opmaak en valt `height: 100%` op de afbeelding terug op die picture in plaats van op de kaart * eromheen. Gemeten 09-09-2026 op /advies/: container 180,6 px hoog, afbeelding 161,4 px, * dus 19,2 px wit onder elke kennisbankkaart. `display: contents` laat de picture uit de opmaak * verdwijnen, zodat elke bestaande regel voor `img` blijft werken zoals vóór ShortPixel. * Niet terugzetten naar block zolang ShortPixel picture-markup levert. */ picture { display: contents; } h1, h2, h3, h4 { text-wrap: pretty; } body, button, input, textarea { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } textarea { resize: vertical; } [hidden] { display: none; } table { border-spacing: 0; border-collapse: collapse; } button, [role="button"] { cursor: pointer; } button::-moz-focus-inner,input::-moz-focus-inner { padding: 0; border: 0 } button,input:where([type='button']),input:where([type='reset']),input:where([type='submit']) { -webkit-appearance: button; background-color: transparent; background-image: none; } mark { background-color: transparent; } address { font-style: normal; } article,aside,figcaption,figure,footer,header,hgroup,main,menu,nav,section { display: block; } /* De kleur stond hier op #2c2d33, de linkkleur van Shoptimizer. Die werd sinds jaar en dag overschreven door de Kirki-laag met ons groen. Op 27-08-2026 is die laag opgeruimd, en toen bleek deze regel eronder te liggen. Weggehaald in plaats van er nog een override overheen te leggen; de linkkleur staat nu in global.css. */ a { background-color: transparent; text-decoration: none; transition: color 0.2s ease; } a:active, a:hover { outline: 0; } a, button, input { touch-action: manipulation; } mark { color: #000; background: #ff0; } small { font-size: 75%; } img { max-width: 100%; height: auto; border: 0; border-radius: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } input[type=checkbox],input[type=radio] { box-sizing: border-box; } input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button { height: auto; } input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } legend { border: 0; } table { width: 100%; border-spacing: 0; border-collapse: separate; font-size: 15px; } legend, ol, td, th, ul { padding: 0; } address,p,table { margin: 0 0 1.21575rem; } p:empty { margin: 0; } ol, ul { margin: 0 0 1.41575em 20px; } ul { list-style: disc; } ol { list-style: decimal; } li > ol, li > ul { margin-bottom: 0; margin-left: 1em; } b,dt,strong { font-weight: 600; } ins,mark { background: 0 0; font-weight: 400; text-decoration: none; } table td, table th { text-align: left; vertical-align: middle; } table caption, table th { font-weight: 600; } select, embed, iframe, object, video { max-width: 100%; } button, input, select { vertical-align: baseline; } button { border: none; } input[type="number"] { -webkit-appearance: none; border-radius: 0; } /* * Respecteer de systeemvoorkeur "beperk beweging". Stond tot 27-08-2026 als laatste regel in * `basislaag.css`; hij hoort bij de nulstand van de browser en dus hier. */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-delay: -1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; background-attachment: initial !important; scroll-behavior: auto !important; transition-delay: 0s !important; transition-duration: 0s !important; } } /* ==================== /css/hulpklassen.css ==================== */ /* * hulpklassen.css - twee klassen die overal gebruikt mogen worden * * `.sr-only` en `.screen-reader-text` verbergen tekst voor het oog maar houden hem beschikbaar voor * een schermlezer. `.clear` maakt een zwevende kolom weer recht. Meer is het niet. * * Ze stonden tot 27-08-2026 in `basislaag.css`. Dat bestand is die dag opgehouden te bestaan: van * 655 regels via zeventien benoemde onderdelen naar niets. Deze twee hoorden bij geen enkel * onderdeel, dus kregen ze hun eigen plek. * * DIT BESTAND LAADT OP DE PLEK WAAR `basislaag.css` STOND, als eerste van de onderdelen. Dat is * bewust: zo houden deze twee regels exact de positie in de cascade die ze hadden. */ .sr-only, .screen-reader-text { position: absolute; /* Geen visibility:hidden hier: dat verbergt de tekst ook voor schermlezers, en deze klasse bestaat juist om tekst alléén visueel te verbergen. Gevonden 31-08-2026 bij de toegankelijkheidsronde; de clip-techniek hieronder is het standaardpatroon. */ width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .clear { clear: both; } /* ==================== /css/blog-basis.css ==================== */ /* * blog-basis.css - de nulstand van een blogbericht * * 6 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: de breedte van de inhoud van een * bericht, de uitgelichte afbeelding, en de marges eromheen. De eigen opmaak van de blog staat in * `css/blog.css`, dat later laadt en hier overheen gaat. */ @media (min-width: 993px) { .blog .site-content, .archive .site-content { padding-bottom: 3rem; } } .post .wp-post-image { margin-bottom: 1.618em; } article.post .entry-content { font-size: clamp(0.875rem, 0.8115rem + 0.2033vw, 0.9375rem); } article.post .entry-content p:last-child { margin-bottom: 0; } .site-main:not(.grid) article.post { margin: 0 0 2.25rem; padding-bottom: 2rem; border-bottom: 1px solid #eee; } @media (max-width: 768px) { .single-post .entry-content { font-size: 15px; } } /* ==================== /css/productpagina-basis.css ==================== */ /* * productpagina-basis.css - de nulstand van een productpagina * * 17 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: de breedte van de kolommen, de * knop 'in winkelwagen' met zijn laadanimatie, en de plek van meldingen op een productpagina. * * Er stonden nog twee regels over PhotoSwipe (`.pswp`), de fotoviewer van het oude thema. Die * scripts zijn er op 27-08-2026 uitgehaald; nagemeten in de echte DOM op de productpagina en de * winkelwagen: nul elementen met een `pswp`-klasse, nul PhotoSwipe-scripts. Regels verwijderd. * * De eigen productpagina staat in `css/pdp.css`, dat later laadt en hier overheen gaat. */ .single-product:not(.pdp-ajax) .woocommerce:has(ul.woocommerce-error) { padding-bottom: 30px; } .single-product:has(.archive-header .woocommerce-message) .content-area { padding-top: 2rem; } .single-product .woocommerce:has(.woocommerce-message) { margin-left: auto; margin-right: auto; } @media (min-width: 993px) { .single-product .woocommerce:has(.woocommerce-message) { padding-right: 2.617924em; padding-left: 2.617924em; } } @media only screen and (min-width: 1070px) { .single-product .site-content .col-full { max-width: inherit; margin: 0; padding: 0; } } .single-product .content-area { width: 100%; } @media (max-width: 992px) { .single-product .content-area { width: calc(100% + 2em); margin-left: -1em; } } @media (min-width: 993px) and (max-width: 1199px ) { .single-product .site-content .col-full { padding: 0; } } .product { position: relative; } .product form.cart .quantity { float: left; } .cart .single_add_to_cart_button { float: left; width: calc(100% - 90px); height: 52px; margin-left: 40px; padding-top: 0; padding-bottom: 0; border-radius: 4px; background: #3bb54a; font-size: 18px; font-weight: 400; line-height: 52px; text-align: center; transition: all 0.2s; } .product form.cart .quantity:has(input[type=hidden]) + button.single_add_to_cart_button { margin-left: 0px; width: 100%; } .product form.cart .button, .ajax_add_to_cart.add_to_cart_button { position: relative; } .product form.cart .single_add_to_cart_button:after, .ajax_add_to_cart.add_to_cart_button:after { position: absolute; top: 50%; left: 50%; margin-top: -9px; margin-left: -9px; opacity: 0; transition: opacity 0s ease; content: ""; display: inline-block; width: 18px; height: 18px; border: 1px solid rgba(255, 255, 255, 0.3); border-left-color: #fff; border-radius: 50%; vertical-align: middle; } .product .variations_button:after, .product .variations_button:before, .product form.cart:after, .product form.cart:before { display: table; content: ""; clear: both; } .product-widget p, .product-widget ul li, .product-widget fieldset legend { font-size: clamp(0.8125rem, 0.749rem + 0.2033vw, 0.875rem); } .product-widget fieldset legend { display: block; margin: 0 auto; width: inherit; padding: 10px; color: #111; font-weight: 600; text-align: center; } /* ==================== /css/formulier-basis.css ==================== */ /* * formulier-basis.css - de nulstand van invoervelden * * 22 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: tekstvelden, keuzelijsten, * vinkjes, tekstvlakken, labels, het rode sterretje bij een verplicht veld, en de tweekoloms * indeling van `.form-row` op desktop. Ook de basisknop staat hier (`.button` en de drie * `input`-varianten), omdat die in het oude thema in hetzelfde blok stond. * * De eigen formulieropmaak staat in `css/forms.css`, dat later laadt en hier overheen gaat. */ .form-row input, .form-row select, .form-row textarea { width: 100%; } .form-row label { display: block; margin-bottom: 5px; color: #111; font-size: 14px; font-weight: 600; } .form-row .button, .form-row input[type="checkbox"], .form-row input[type="radio"] { width: auto; } .form-row-last { margin-right: 0!important; } @media (min-width:993px) { .form-row-first { float: left; clear: both; width: 47.0588235294%; margin-right: 5.8823529412%; } .form-row-last { float: right; width: 47.0588235294%; margin-right: 0; } } .required { border-bottom: 0; color: #df0202; text-decoration: none; } fieldset legend { width: calc(100% + 60px); margin-left: -30px; padding: 10px 30px 10px; color: #111; font-size: 20px; font-weight: 600; } select { width: 100%; padding: 0 40px 0 0.7em; padding-right: 40px; background: url("data:image/svg+xml;charset=utf8,%3Csvg width='1792' height='1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Ctitle%3Ebackground%3C/title%3E%3Crect fill='none' id='canvas_background' height='402' width='582' y='-1' x='-1'/%3E%3C/g%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cpath fill='%23888' id='svg_1' d='m1408,704q0,26 -19,45l-448,448q-19,19 -45,19t-45,-19l-448,-448q-19,-19 -19,-45t19,-45t45,-19l896,0q26,0 45,19t19,45z'/%3E%3C/g%3E%3C/svg%3E") calc(100% - 12px) 12px no-repeat; margin: 0; background-size: 15px 15px; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border: 1px solid #d2d6dc; border-radius: 0.3rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); height: 40px; } select:focus { outline: 0; } @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) { select { padding-right: 0; background-image: none; } } .button, input[type="button"], input[type="reset"], input[type="submit"] { display: inline-block; padding: 0.8180469716em 1.41575em; border: 0; border-color: #43454b; border-radius: 4px; font-size: clamp(0.875rem, 0.8115rem + 0.2033vw, 0.9375rem); outline: 0; background: 0 0; background-color: #43454b; font-weight: 600; text-shadow: none; text-decoration: none; cursor: pointer; -webkit-appearance: none; transition: 0.2s all; } input[type="button"], input[type="reset"], input[type="submit"] { color: #fff; font-weight: 600; } input[type="checkbox"], input[type="radio"] { padding: 0; } input[type="tel"], input[type="text"], input[type="url"] { width: 100%; } input[type="password"], input[type="search"], input[type="email"], input[type="text"], input[type="number"], input[type="tel"] { outline: 0; margin-bottom: 0; border: 1px solid #d2d6dc; border-radius: 0.3rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); height: 40px; padding: 0 0.7em; } input[type="search"] { padding-left: 43px; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } input[type="search"]::-moz-placeholder { color: #555; } input[type="search"]::placeholder { color: #555; } textarea { overflow: auto; border: 1px solid #d2d6dc; border-radius: 0.25rem; padding: 0.8em; outline: 0; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); width: 100%; padding-left: 0.875em; vertical-align: top; height: 150px; } .input-text:focus, input[type=email]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus, textarea:focus { border-color: #9c9c9c; } /* ==================== /css/typografie-basis.css ==================== */ /* * typografie-basis.css - koppen en tekstblokken * * 9 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: de regelafstand van h1 tot h6, * de extra ruimte boven een kop die op een lijst of formulier volgt, geneste lijsten in de * inhoud, en de breedte van `.site`. * * De eigen typografie staat in `css/global.css`, dat eerder laadt maar met eigen klassen werkt. */ h1,h2 { margin: 0 0 1rem; } h3,h4,h5,h6 { margin: 0 0 0.5rem; } blockquote+h2,blockquote+h3,blockquote+h4,blockquote+header h2,form+h2,form+h3,form+h4,form+header h2,ol+h2,ol+h3,ol+h4,ol+header h2,p+h2,p+h3,p+h4,p+header h2,table+h2,table+h3,table+h4,table+header h2,ul+h2,ul+h3,ul+h4,ul+header h2 { margin-top: 1.2906835em; } .entry-content ol ol, .entry-content ul ul { margin: 1em 0 1em 2em; } @media (max-width: 768px) { .site { font-size: 15px; } input, select, textarea { font-size: 16px; } .entry-content:not(.wc-tab) p.form-row { font-size: 14px; } .site h1 { font-size: 30px; letter-spacing: -0.01em; } .site h2 { font-size: clamp(1.375rem, 0.9939rem + 1.2195vw, 1.75rem); letter-spacing: -0.01em; } } /* * Drie regels die tot 27-08-2026 als restje in `basislaag.css` stonden en hier thuishoren: de ruimte * onder een paginakop, de ruimte onder de kop van een 404-pagina, en de onderstreping van links in * lopende tekst (categorietekst, productmeta, reacties). * * `:not(.stars)` is er op 27-08 bij gekomen. De onderstrepingsregel raakte namelijk ook de * sterlinks in het beoordelingsformulier (`p.stars a`, die WooCommerce met JavaScript in de plaats * van de keuzelijst zet). Dat viel niet op zolang de regel vooraan in `basislaag.css` stond en dus * verloor van `beoordelingen.css`. Toen hij hierheen verhuisde en later kwam te staan, kregen die * sterren ineens een streep eronder. De regel is bedoeld voor links in lopende tekst; sterren zijn * dat niet. */ .page-header { margin-bottom: 1.5rem; } body.error404 h1 { margin-bottom: 0.5rem; } .below-woocommerce-category a, .product-widget a, .post-meta a, .comment-text a, .comment-respond p:not(.stars) a, .product_meta a, .woocommerce-tabs table.woocommerce-product-attributes a, .entry-content article a:not(.elementor-button), a.reset_variations, body:not(.elementor-page):not(.woocommerce-account):not(.woocommerce-order-received) .entry-content p:not(.product__categories) a:not(.button) { text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 0.75px; } /* ==================== /css/header-basis.css ==================== */ /* * header-basis.css - wat het oude thema aan de bovenbalk gaf * * 2 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026. Meer was het niet: de eigen * bovenbalk staat in `css/header.css` en doet vrijwel alles zelf. * * Er stond een derde regel, over `.commercekit-waitlist-popup--active`. CommerceKit is op 23-08-2026 * uit de site gehaald; nagemeten in de echte DOM op 27-08: nul elementen met die klasse, nul scripts * van die plugin. Regel verwijderd. */ @media (min-width: 993px) { .site-header { position: relative; z-index: 20; } } @media (max-width: 992px) { .site-header .wt-header-cart__knop a.cart-contents .amount { display: none; } } /* ==================== /css/footer-basis.css ==================== */ /* * footer-basis.css - wat het oude thema aan de voettekst gaf * * 3 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026. De eigen voettekst staat in * `css/footer.css` en doet de rest. */ footer { clear: both; } footer a:not(.button):hover { color: #fff; } footer:last-child:not(:only-of-type) { margin-top: -3rem; } /* ==================== /css/layout-basis.css ==================== */ /* * layout-basis.css - de kolombreedtes van het oude thema * * 15 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: `.col-full` (de buitenste * container met zijn maximale breedte), `.content-area` per paginasoort, en `.site-content`. * * Dit is de laag waar bijna elke pagina op staat, en tegelijk de laag die het meest naar het oude * thema ruikt: klassenamen als `.right-post-sidebar` en `.left-woocommerce-sidebar` komen uit * instellingen die niet meer bestaan. Kandidaat voor opruimen, maar alleen met een meting erbij. */ @media (min-width: 993px) { .col-full { box-sizing: content-box; margin-right: auto; margin-left: auto; max-width: 1170px; padding-right: 2.617924em; padding-left: 2.617924em; } .col-full:after { display: block; clear: both; content: ""; } } @media (max-width: 992px) { .col-full { padding-right: 1em; padding-left: 1em; } } @media (min-width: 993px) { .right-page-sidebar .content-area, .right-post-sidebar .content-area, .right-sidebar .content-area { float: left; } .search .content-area { float: right; } } .page-template-default:not(.woocommerce-page) .entry-header { margin-bottom: 1.5rem; } @media (min-width: 993px) { .page-template-default .site-content { padding-bottom: 3rem; } } @media (max-width: 992px) { .page-template-default .site-content { padding-bottom: 1.5rem; } } .page-template-template-fullwidth-php .content-area { width: 100%; } @media (min-width: 993px) { .left-woocommerce-sidebar #secondary { float: left; } .left-woocommerce-sidebar .content-area { float: right; } } .site-content { position: relative; } .site-content:focus { outline: none; } @media (min-width: 993px) { .site-content:after { display: block; visibility: hidden; position: absolute; z-index: 5; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: rgba(0, 0, 0, 0.7); content: ""; transition: opacity 0.3s, visibility 0.3s; pointer-events: none; } } .woocommerce.archive .site-content { padding-bottom: 3rem; } /* * Het wachtwoordformulier van een beveiligde pagina. Stond tot 27-08-2026 als restje in * `basislaag.css`; het is een breedte-regel en hoort dus bij de indeling. */ .site-main:has(form.post-password-form) { max-width: 750px; margin: 0 auto; padding: 1em 1em 3rem 1em; font-size: 15px; } /* ==================== /css/archiefkop.css ==================== */ /* * archiefkop.css - de kop van een categoriepagina * * 37 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026. Alles boven de productenrij op * een categorie-, merk-, tag- of zoekpagina: de titel, het beige tekstvlak met de categorietekst, * de sorteerbalk met resultaattelling en sorteerkeuze, het blok onder de producten * (`below-woocommerce-category`), en de filterknop met de lade die op mobiel openschuift. * * De filterlade hoort hier omdat hij bij de sorteerbalk hoort, niet bij de zijbalk: `.mobile-filter` * is de knop, `.close-drawer` de sluitknop en `#secondary` de lade zelf. De open-stand staat * ergens anders, in `css/filter-flyout.css`; dit is alleen de dichte stand. * * Laadt direct na `basislaag.css`, dus de regels houden exact de plek in de cascade die ze hadden. * Gemeten over vijftien paginaladingen: nul verschil. */ .shop header.woocommerce-products-header { margin: 0; background-color: transparent; } h1.woocommerce-products-header__title { margin-bottom: 1.5rem; } .shop.shop-heading .woocommerce-products-header { align-items: flex-start; } .shop:not(.shop-heading) .woocommerce-products-header__title { display: none; } .wt-sorteerbalk { width: 100%; margin-bottom: 1.5rem; display: flex; align-items: center; } .wt-sorteerbalk .woocommerce-notices-wrapper { order: 1; } .wt-sorteerbalk .woocommerce-ordering { margin-bottom: 0; display: inline-flex; order: 2; } .wt-sorteerbalk .woocommerce-result-count { order: 3; } .wt-sorteerbalk .woocommerce-pagination { order: 4; } .wt-sorteerbalk.wt-sorteerbalk--onder { margin-top: 2em; margin-bottom: 0; } @media (min-width: 993px) { .wt-sorteerbalk.wt-sorteerbalk--onder { margin-top: 1em; } } .wt-sorteerbalk.wt-sorteerbalk--onder:empty { margin: 0; } .woocommerce-result-count { margin: 0; color: #111; font-size: 14px; } select.orderby { position: relative; height: auto; line-height: inherit; margin-bottom: 0; padding-left: 0; border: 0; color: #111; font-size: 14px; box-shadow: none; background-position: center right; } @media (min-width: 993px) { .woocommerce-ordering { margin-right: 1.5em; } } header.woocommerce-products-header { display: flex; background-color: #efeee3; align-items: center; overflow: hidden; margin-bottom: 2em; } header.woocommerce-products-header .term-description { padding: 2em; } header.woocommerce-products-header .term-description p:last-child{ margin: 0; } @media (min-width: 993px) { .term-description { min-width: 50%; } } @media (max-width: 992px) { header.woocommerce-products-header { flex-direction: column; } .wt-sorteerbalk .woocommerce-result-count { order: 1; clear: both; font-size: 12px; } form.woocommerce-ordering { margin: 0; width: 100%; } .wt-sorteerbalk { clear: both; display: grid; grid-template-columns: auto auto; gap: 0 20px; align-items: baseline; margin-top: 15px; margin-bottom: 15px; font-size: 12px; } select.orderby { font-size: 12px; width: 100%; } .archive .woocommerce-notices-wrapper { grid-column: 1/-1; } .term-description { order: 2; } header.woocommerce-products-header .term-description{ font-size: clamp(0.875rem, 0.8115rem + 0.2033vw, 0.9375rem); } header.woocommerce-products-header .term-description { padding: 1.25rem; letter-spacing: 0; } } .below-woocommerce-category { clear: both; margin: 2rem 0 0 0; font-size: clamp(0.875rem, 0.8115rem + 0.2033vw, 0.9375rem); border: 1px solid #eee; padding: 1.5rem; } .below-woocommerce-category p:last-child { margin: 0; } .below-woocommerce-category a,.term-description a{ text-decoration: underline; text-decoration-thickness: 0.75px; text-underline-offset: 0.18em; } @media (min-width: 993px) { .mobile-filter { display: none; } } @media (max-width: 992px) { .mobile-filter { display: block; position: sticky; z-index: 3; top: 0px; width: 100%; height: 40px; padding-left: 40px; background-color: #fff; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.06); text-transform: uppercase; color: #111; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; line-height: 36px; text-align: left; margin-left: -1.3em; width: calc(100% + 2.6em); } .mobile-filter svg { position: absolute; left: 20px; width: 18px; height: 18px; top: 50%; transform: translate(-50%, -50%); } .close-drawer { color: #fff; } .filters.close-drawer { top: 40px; visibility: hidden; display: none; } .woocommerce.archive #secondary, .wc-active.search-results #secondary, .page-template-template-woocommerce-archives #secondary { visibility: hidden; overflow-y: auto; position: fixed; z-index: 102; top: 0; left: -300px; width: 300px !important; height: 100%; padding: 1.5rem; opacity: 0; background: #fff; -webkit-overflow-scrolling: touch; transition: all 0.35s; transition-delay: 0.1s; } } /* ==================== /css/kruimelpad.css ==================== */ /* * kruimelpad.css - het kruimelpad en de ruimte eronder * * 15 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026. * * Waarom er meer in staat dan alleen kruimels: vijf van de vijftien regels gaan over de * bovenmarge van `.site-content` en `.site-main`, en die hangt af van of er wel of geen kruimelpad * op de pagina staat (`body:has(.woocommerce-breadcrumb)`). Weghalen bij het kruimelpad zou die * regels onbegrijpelijk maken, dus ze verhuizen mee. * * Op de winkelwagen, de afrekenpagina en de bedankpagina staat het kruimelpad bewust uit. * * Laadt direct na `basislaag.css`, dus de regels houden exact de plek in de cascade die ze hadden. * Gemeten over vijftien paginaladingen: nul verschil. */ .woocommerce-breadcrumb { padding-top: 0.75rem; padding-bottom: 0.75rem; font-size: clamp(0.75rem, 0.6547rem + 0.3049vw, 0.84375rem); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #666; } @media (min-width: 993px) { .woocommerce-breadcrumb { padding-top: 1rem; padding-bottom: 1rem; } } .woocommerce-breadcrumb p { margin: 0; } .woocommerce-breadcrumb a, .woocommerce-breadcrumb a:hover { color: #111; } .woocommerce-breadcrumb a:hover { text-decoration: underline; text-decoration-thickness: .5px; text-decoration-color: #111; text-underline-offset: 0.18em; } .woocommerce-breadcrumb a:first-of-type:before { display: none; } .single-product .woocommerce-breadcrumb { max-width: 1170px; margin-right: auto; margin-left: auto; padding-right: 2.617924em; padding-left: 2.617924em; } @media (min-width: 993px) and (max-width: 1480px) { .single-product .woocommerce-breadcrumb { padding-left: calc(2.617924em + 5px); } } @media (max-width: 992px) { .single-product .woocommerce-breadcrumb { padding-right: 0; padding-left: 0; } } body:has(:not(.woocommerce-breadcrumb)) .site-content, body.single-product:has(:not(.woocommerce-breadcrumb)) .site-main { padding-top: 2rem; } body:has(.woocommerce-breadcrumb) .site-content, body.page-template-template-fullwidth-no-heading .site-content, body.page-template-elementor_header_footer .site-content { padding-top: 0; } body.page-template-template-canvas:has(:not(.woocommerce-breadcrumb)) .site-content, body.woocommerce-cart:has(:not(.woocommerce-breadcrumb)) .site-content, body.woocommerce-checkout.min-ck:has(:not(.woocommerce-breadcrumb)) .site-content, body.single-product:has(:not(.woocommerce-breadcrumb)) .site-content { padding-top: 0; } body.single-product:has(.woocommerce-breadcrumb) .site-main { padding-top: 0; } @media (max-width: 992px) { .single-product:has(:not(.woocommerce-breadcrumb)) .site-main { padding-top: 1em; } } .woocommerce-cart .woocommerce-breadcrumb, .woocommerce-checkout .woocommerce-breadcrumb, .single-ckit_size_guide .woocommerce-breadcrumb, .single-post.post-l2 .woocommerce-breadcrumb { display: none; } /* ==================== /css/knoppen-basis.css ==================== */ /* * knoppen-basis.css - uitgeschakelde knoppen en de laadanimatie * * 7 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: hoe een knop eruitziet als hij * niet aanklikbaar is, het draaiende rondje tijdens het toevoegen aan de winkelwagen, en de * winkelwagenknop in de bovenbalk. * * De basisknop zelf staat in `css/formulier-basis.css`; de eigen knoppen in `css/global.css`. */ .added_to_cart.disabled, .added_to_cart:disabled, .button.disabled, .button:disabled, button.disabled, button:disabled, input[type=button].disabled ,input[type=button]:disabled, input[type=reset].disabled, input[type=reset]:disabled, input[type=submit].disabled, input[type=submit]:disabled { opacity: 0.3; cursor: not-allowed; } .added_to_cart.disabled:hover, .added_to_cart:disabled:hover, .button.disabled:hover, .button:disabled:hover, button.disabled:hover, button:disabled:hover, input[type=button].disabled:hover, input[type=button]:disabled:hover, input[type=reset].disabled:hover, input[type=reset]:disabled:hover, input[type=submit].disabled:hover, input[type=submit]:disabled:hover { opacity: 0.35; } .single-product .product form.cart .single_add_to_cart_button:after, .ajax_add_to_cart.add_to_cart_button:after { position: absolute; top: 50%; left: 50%; margin-top: -9px; margin-left: -9px; opacity: 0; transition: opacity 0s ease; content: ""; display: inline-block; width: 18px; height: 18px; border: 1px solid rgba(255, 255, 255, 0.3); border-left-color: #fff; border-radius: 50%; vertical-align: middle; } #payment .place-order .button:before, .cart-collaterals .checkout-button:before, .widget_shopping_cart .buttons .checkout:before, .wp-element-button.wc-block-cart__submit-button:before, .wp-element-button.wc-block-components-button.wc-block-components-checkout-place-order-button:before { content: ""; display: inline-flex; width: 18px; height: 18px; margin-right: 8px; background-color: #fff; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M20 12c0-1.103-.897-2-2-2h-1V7c0-2.757-2.243-5-5-5S7 4.243 7 7v3H6c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-8zM9 7c0-1.654 1.346-3 3-3s3 1.346 3 3v3H9V7z'%3E%3C/path%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M20 12c0-1.103-.897-2-2-2h-1V7c0-2.757-2.243-5-5-5S7 4.243 7 7v3H6c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-8zM9 7c0-1.654 1.346-3 3-3s3 1.346 3 3v3H9V7z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } @media (min-width: 993px) { .wt-header-cart__knop .cart-contents { padding: 0; color: #fff; } } .wt-header-cart__knop .cart-contents:after { margin-left: 10px; } .wt-header-cart__knop .cart-contents { display: block; text-decoration: none; } /* ==================== /css/meldingen.css ==================== */ /* * meldingen.css - de gekleurde balken van WooCommerce * * 9 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026. 'Product toegevoegd aan je * winkelwagen', foutmeldingen bij het inloggen, de blauwe informatiebalk. Let op: dit gaat over de * oude meldingen (`.woocommerce-message` en familie), niet over die van de blok-winkelwagen en * blok-checkout (`.wc-block-components-notice-banner`). Die staan nog in de basislaag, bij de rest * van het blok-spul, tot de checkout-verbouwing klaar is. */ .woocommerce-error, .woocommerce-info, .woocommerce-message, .woocommerce-noreviews, p.no-comments { clear: both; margin-bottom: 2rem; margin-left: 0; padding: 1em 1.618em; border-left: 0.4180469716em solid rgba(0, 0, 0, 0.15); border-radius: 4px; font-size: clamp(0.8125rem, 0.749rem + 0.2033vw, 0.875rem); color: #fff; outline: 0; } .woocommerce-error a, .woocommerce-info a, .woocommerce-message a, .woocommerce-noreviews a, p.no-comments a { color: #fff; transition: 0.2s all; } .woocommerce-error a:hover, .woocommerce-info a:hover, .woocommerce-message a:hover, .woocommerce-noreviews a:hover, p.no-comments a:hover { opacity: 0.7; color: #fff; } .woocommerce-error a.button:hover, .woocommerce-info a.button:hover, .woocommerce-noreviews a.button:hover, p.no-comments a.button:hover { opacity: 1; } .woocommerce-error .button,.woocommerce-info .button, .woocommerce-message .button, .woocommerce-noreviews .button, p.no-comments .button { float: right; padding: 0 0 0 1em; border-width: 0 0 0 1px; border-left-style: solid; border-left-color: rgba(255, 255, 255, 0.25)!important; border-radius: 0; color: #fff; background: 0 0; box-shadow: none; line-height: 1.618; font-weight: 600; } .woocommerce-error .button:hover, .woocommerce-info .button:hover, .woocommerce-message .button:hover, .woocommerce-noreviews .button:hover, p.no-comments .button:hover { opacity: 0.7; color: #fff; background: 0 0; } .woocommerce-info, .woocommerce-noreviews, p.no-comments { background-color: #3d9cd2; } .woocommerce-cart .woocommerce-notices-wrapper { margin-bottom: 2rem; } .woocommerce-cart .woocommerce-notices-wrapper:empty { margin: 0; } /* ==================== /css/paginering.css ==================== */ /* * paginering.css - de pagina-nummers onder een productenrij of bloglijst * * 22 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026. Twee stelsels door elkaar: * `.woocommerce-pagination` onder producten en `.pagination`/`.nav-links` onder blogberichten. * Ze zijn hier bij elkaar gezet omdat ze hetzelfde doen en dezelfde opmaak delen. * * Laadt direct na `basislaag.css`, dus de regels houden exact de plek in de cascade die ze hadden. * Gemeten over vijftien paginaladingen: nul verschil. */ .pagination .page-numbers { text-align: center; font-size: clamp(0.875rem, 0.8115rem + 0.2033vw, 0.9375rem); } .woocommerce-pagination .page-numbers li { display: inline-block; margin: 0 2px; } .pagination span.page-numbers, .pagination a.page-numbers { padding: 10px; } .nav-links { display: flex; width: 100%; justify-content: center; align-items: center; } .nav-links:has(.prev):before, .nav-links:has(.next):after { display: none; } .nav-links a.next { display: flex; justify-content: flex-end; flex: 1; padding-right: 0; } .woocommerce-pagination .page-numbers { margin: 0; } .woocommerce-pagination { font-size: 14px; } .woocommerce-pagination a, .woocommerce-pagination a:hover { color: #111; } .woocommerce-pagination .next, .woocommerce-pagination .prev { display: inline-block; position: relative; text-indent: -9999px; } .woocommerce-pagination .page-numbers.next, .woocommerce-pagination .page-numbers.prev { padding-left: 0.6em; padding-right: 0.5em; } .page-numbers .next:after, .page-numbers .prev:after, .woocommerce-pagination .next:after, .woocommerce-pagination .prev:after { display: inline-block; position: absolute; top: 50%; left: 50%; width: 1em; height: 1em; content: ""; background-color: #111; transform: translateX(-50%) translateY(-50%); text-rendering: auto; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .page-numbers .next:after, .woocommerce-pagination .next:after { -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5L16 12L9 19' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5L16 12L9 19' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } @media (min-width: 993px) { .woocommerce-pagination { margin-left: auto; } .woocommerce-pagination .page-numbers { padding: 0px 5px; } } @media (max-width: 992px) { .archive .woocommerce-pagination, .search-results .woocommerce-pagination { grid-column: 1/-1; } .archive .woocommerce-pagination, .search-results .woocommerce-pagination { order: 3; } .woocommerce-pagination { clear: both; text-align: center; margin-top: 20px; } .woocommerce-pagination ul.page-numbers { margin-bottom: 10px; } .woocommerce-pagination .page-numbers li { margin: 0 3px 6px 3px; } .woocommerce-pagination .page-numbers li .page-numbers { display: inline-block; width: 36px; height: 36px; font-size: 13px; margin: 0; padding: 0; border: 1px solid #e2e2e2; border-radius: 3px; box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.06); line-height: 36px; } .wt-sorteerbalk .woocommerce-pagination { grid-column: span 2; } } /* ==================== /css/aantalkiezer.css ==================== */ /* * aantalkiezer.css - het veld waarin je een aantal invult * * 6 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: het aantal-veld met de pijltjes * van de browser eraf. Staat op de productpagina en in de winkelwagen. */ .quantity { position: relative; } .quantity .qty { text-align: center; } .quantity input::-webkit-outer-spin-button, .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quantity input[type=number] { -moz-appearance: textfield; } .product .cart .quantity .input-text { width: 50px; height: 52px; padding: 0 0.4em; border: 1px solid #e2e2e2; background-color: #fff; outline-offset: -3px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; } .product .cart .quantity .input-text:focus { border-color: #ccc; } /* ==================== /css/widgets.css ==================== */ /* * widgets.css - de blokken in de zijbalk * * 13 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: de kop van een zijbalkblok, de * lijsten erin, en de filterlijsten van WooCommerce (`.widget_layered_nav`) met hun aantallen. * Dit is wat er in de filterlade op een categoriepagina staat. */ .widget .widget-title { display: block; margin-bottom: 0.65em; color: #111; } .widget ul { margin-bottom: 0; margin-left: 0; list-style: none; } @media (min-width: 993px) { .widget-area { padding-bottom: 2rem; } } @media (max-width: 992px) { .widget-area { padding-top: 2rem; padding-bottom: 1rem; } } #secondary .widget { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #e2e2e2; display: flex; flex-direction: column; } #secondary .widget:last-child { padding-bottom: 0; border: none; } .widget li, .site-content .widget li { margin-bottom: 0.4em; font-size: 14px; line-height: 1.45; } .widget-area .widget a { color: #222; } .widget-area .widget a:not(.button):hover { text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 0.18em; } .widget_layered_nav li { margin-bottom: 0.6180469716em; } .widget_layered_nav ul li { position: relative; padding-left: 20px; } .widget_layered_nav ul li:before { display: block; content: ""; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0px 0px 2px 0px #555; position: absolute; left: 0px; margin-top: 6px; background: #fff; border: 2px solid #fff; } .widget.woocommerce li .count { font-size: 12px; position: absolute; top: 2px; right: 0px; opacity: 0.75; } /* ==================== /css/winkelwagen-basis.css ==================== */ /* * winkelwagen-basis.css - de nulstand van de winkelwagenpagina * * 8 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: de breedte van de pagina, de * paginatitel, en het veld met de productafbeelding per regel. * * De eigen winkelwagen staat in `css/cart.css`, dat later laadt en hier overheen gaat. */ .woocommerce-cart .site-main { padding-top: 2rem; } .woocommerce-cart .content-area { width: 100%; padding-bottom: 2rem; } .woocommerce-cart h1.entry-title { display: none; } .woocommerce-cart-form { float: left; width: 62%; margin-bottom: 0; } @media (max-width: 992px) { .woocommerce-cart-form, .cart-collaterals { float: none; width: 100%; } } .cart-custom-field { font-size: clamp(0.875rem, 0.8115rem + 0.2033vw, 0.9375rem); } .cart-custom-field img { margin: 0 auto 20px auto; display: block; } @media (max-width: 992px) { .cart-custom-field img { width: 100%; max-width: 400px; } } /* ==================== /css/blok-checkout-basis.css ==================== */ /* * blok-checkout-basis.css - de nulstand van de blok-winkelwagen en blok-checkout * * 30 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026. Alles wat het oude thema onder * de blokken van WooCommerce legde: de breedte van de afrekenpagina, de meldingsbalken * (`.wc-block-components-notice-banner`), de bestelknop, de koppen in het besteloverzicht, en het * inlogformulier op de afrekenpagina. * * LET OP: de checkout wordt op dit moment verbouwd, van een MutationObserver die de React-DOM * aanpast naar de officiele WooCommerce-extensibility. Deze 30 regels zijn ongewijzigd verhuisd en * mogen pas herschreven worden als die verbouwing klaar is. Het inlogformulier * (`.woocommerce-form-login`) blijft daarbij expliciet met rust. */ .woocommerce-checkout.min-ck:not(.woocommerce-order-received) .site-header { border-bottom: 1px solid #eee; } .woocommerce-checkout .content-area { width: 100%; } .woocommerce-checkout:not(.woocommerce-order-received) .site-main { padding-top: 1.5rem; padding-bottom: 1.5rem; } .woocommerce-form__label-for-checkbox { display: block; cursor: pointer; } #ship-to-different-address .woocommerce-form__input-checkbox { position: relative; top: 1px; margin-right: 10px; transform: none; } .woocommerce-form-login { margin: 20px 0; padding: 1.5em; border: 2px dashed #eee; } @media (min-width: 993px) { .woocommerce-form-login { width: 57%; padding: 2rem; } } .woocommerce-form-login .form-row { width: 100%; } .woocommerce-form__label-for-checkbox .woocommerce-form__input-checkbox { position: relative; top: 1px; margin-right: 0.5rem; } .woocommerce-form-login p { font-size: clamp(0.8125rem, 0.749rem + 0.2033vw, 0.875rem); } .woocommerce-form-login .button { margin-top: 15px; } .woocommerce-form-login .lost_password { margin-top: 1rem; margin-bottom: 0; } .woocommerce-form-login .lost_password a { color: #333; } .wc-block-grid__product-add-to-cart.wp-block-button a.wp-block-button__link, .wc-block-grid__product-add-to-cart.wp-block-button .wc-block-components-product-button__button { display: block; width: 100%; height: 40px; padding: 0; border-radius: 4px; font-size: 14px; font-weight: 600; line-height: 40px; text-align: center; transition: all 0.1s; } .wp-block-columns p a, .wp-block-columns p a:hover { text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 0.16em; } .woocommerce:has(.wc-block-components-notice-banner) { padding-bottom: 30px; } .wc-block-components-notice-banner__content .buttons-wrapper { margin-top: 10px; } .is-large.wc-block-cart, .wp-block-woocommerce-checkout.wc-block-checkout { margin-top: 2em; } .wp-element-button.wc-block-components-button.wc-block-cart__submit-button, .wp-element-button.wc-block-components-button.wc-block-components-checkout-place-order-button { border-radius: 6px; font-weight: bold; transition: background 0.2s ease; } .wc-block-components-notice-banner .message-inner { padding: 5px; } .wc-block-components-notice-banner .buttons-wrapper { margin-top: 10px; } @media (min-width: 993px) { .site .wc-block-components-notice-banner { margin-right: auto; margin-left: auto; } .single-product .site .wc-block-components-notice-banner { margin-top: 0; margin-bottom: 0; } } @media (max-width: 992px) { .wc-block-components-notice-banner { padding-right: 1em; padding-left: 1em; } } .wc-block-product .wc-block-components-product-sale-badge { font-size: 11px; } .wp-block-woocommerce-cart .wp-block-woocommerce-product-collection h2.wp-block-heading { letter-spacing: 0; font-size: 20px; } .wp-block-woocommerce-cart .wp-block-woocommerce-product-collection h2.wp-block-post-title { letter-spacing: 0; } .wp-block-woocommerce-checkout .wc-block-components-title.wc-block-components-title { font-size: 22px; font-weight: bold; letter-spacing: 0; } .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text { font-weight: bold; } .wp-block-woocommerce-checkout .wp-element-button.wc-block-components-button.wc-block-components-checkout-place-order-button { font-size: 16px; padding: 14px 30px; } /* ==================== /css/account-basis.css ==================== */ /* * account-basis.css - de nulstand van Mijn account * * 7 regels, woordelijk gelicht uit `basislaag.css` op 27-08-2026: de breedte van de kolommen, de * lettergrootte van de inhoud, het vinkje in een formulierrij, en de kopgrootte. * * WAT HIER STOND EN WEG IS (27-08-2026): veertien regels die het menu van Mijn account opmaakten, * uit de tijd van Shoptimizer. Een zwevende kolom van 17,6% breed, randjes onder de items, en zeven * regels die per menu-item een icoon als `mask-image` op `a:before` zetten. * * Die deden allang niets meer. `css/account.css` bouwt het menu helemaal zelf, met eigen * icoon-elementen (`.wt-account-nav__icon`), en had zelfs een aparte regel om die `:before` van * hierboven uit te zetten. Twee bestanden die elkaar bevochten, met dertien keer `!important` als * scheidsrechter. * * Waarom ze zo lang wonnen: `.woocommerce-MyAccount-navigation ul li a` heeft specificiteit 0,1,3 en * dat wint van `.woocommerce-MyAccount-navigation li > a` (0,1,2) in `account.css`, ongeacht welk * bestand later laadt. * * Gemeten na het weghalen: alle berekende eigenschappen van elk element op de vijf accountpagina's, * op 1280px en 375px. Zie `verify/README.md` voor hoe je ingelogde pagina's meet zonder in te loggen. */ @media (min-width: 993px) { .woocommerce-account .content-area { width: 100%; } .woocommerce-MyAccount-content { float: right; width: 76.4705882353%; padding-top: 0.7rem; } } .woocommerce-MyAccount-content { font-size: clamp(0.875rem, 0.8115rem + 0.2033vw, 0.9375rem); } .form-row input.woocommerce-form__input-checkbox { float: left; margin: 5px 2px 0 0; } .woocommerce-account h2 { font-size: clamp(1.375rem, 1.1209rem + 0.813vw, 1.625rem); } .woocommerce-account .woocommerce-info .button { font-size: 14px; } @media screen and (max-width: 992px) { .woocommerce-account .site-content { padding-bottom: 3rem; } } /* ==================== /css/forms.css ==================== */ /** * Weltechniek — forms styling. * * Geladen via `wt_forms_page_has_form()`-check in inc/forms.php: alleen op * pages die daadwerkelijk een `[wt_form_*]`-shortcode bevatten. * * Tokens 1-op-1 met homepage.css / header.css / account.css / keuzehulp.css: * navy: #1e3a6d * navy-hover: #14284f * groen: #00bb00 (CTA + success) * groen-hover: #008d00 * rood-error: #d12d2d * tekst-grijs: #4a5868 * border: #e1eaf2 * bg-licht: #f7f8fa * * Mobile-first; desktop-tweaks via @media (min-width: 700px). * BEM-style classes met prefix `wt-form*`. Geen Shoptimizer-class-dependencies. */ /* ============================================================ */ /* === Form container === */ /* ============================================================ */ .wt-form { background: #fff; border: 1px solid #e1eaf2; border-radius: 8px; padding: 24px; max-width: 640px; margin: 0 0 32px; box-shadow: 0 2px 6px rgba(0, 0, 0, .04); } @media (min-width: 700px) { .wt-form { padding: 32px; } } /* ============================================================ */ /* === Field === */ /* ============================================================ */ .wt-form__field { margin-bottom: 18px; } .wt-form__field:last-of-type { margin-bottom: 22px; } .wt-form__label { display: block; font-size: 14px; font-weight: 600; color: #1e3a6d; margin: 0 0 6px; } .wt-form__required { color: #d12d2d; margin-left: 2px; } .wt-form__help { margin: 0 0 8px; font-size: 13px; color: #4a5868; line-height: 1.45; } .wt-form__input { width: 100%; box-sizing: border-box; padding: 11px 14px; font-size: 15px; line-height: 1.4; color: #2c3e50; background: #fff; border: 1px solid #d6dde6; border-radius: 5px; transition: border-color .15s ease, box-shadow .15s ease; font-family: inherit; } .wt-form__input::placeholder { color: #98a2b3; } .wt-form__input:focus { outline: none; border-color: #1e3a6d; box-shadow: 0 0 0 3px rgba(30, 58, 109, .12); } .wt-form__textarea { min-height: 120px; resize: vertical; line-height: 1.5; } .wt-form__select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } /* Error-state per veld */ .wt-form__field--has-error .wt-form__input { border-color: #d12d2d; box-shadow: 0 0 0 3px rgba(209, 45, 45, .1); } .wt-form__error { display: none; margin: 4px 0 0; font-size: 13px; color: #d12d2d; font-weight: 500; } .wt-form__error.is-visible { display: block; } /* ============================================================ */ /* === Honeypot — verborgen voor mensen, zichtbaar voor bots === */ /* ============================================================ */ .wt-form__honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ============================================================ */ /* === Submit + loading === */ /* ============================================================ */ .wt-form__actions { display: flex; align-items: center; gap: 14px; margin-top: 6px; } .wt-form__submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #00bb00; color: #fff; border: 0; border-radius: 5px; padding: 13px 26px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color .15s ease, transform .05s ease; font-family: inherit; } .wt-form__submit:hover, .wt-form__submit:focus-visible { background: #008d00; outline: none; } .wt-form__submit:active { transform: translateY(1px); } .wt-form__submit:disabled, .wt-form__submit.is-loading { background: #98c098; cursor: progress; } .wt-form__loading { display: none; width: 18px; height: 18px; border: 2px solid #d6dde6; border-top-color: #1e3a6d; border-radius: 50%; animation: wt-form-spin .8s linear infinite; } .wt-form.is-submitting .wt-form__loading { display: inline-block; } @keyframes wt-form-spin { to { transform: rotate(360deg); } } /* ============================================================ */ /* === Global messages onder de submit === */ /* ============================================================ */ .wt-form__messages { margin-top: 14px; padding: 0; font-size: 14px; line-height: 1.45; } .wt-form__messages--error { padding: 12px 14px; background: #fef2f2; border-left: 3px solid #d12d2d; border-radius: 4px; color: #8a1c1c; } /* ============================================================ */ /* === Success state (vervangt form-content na submit) === */ /* ============================================================ */ .wt-form--success { background: #fff; border-color: #c8e6c8; } .wt-form__success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 0; } .wt-form__success-icon { color: #00bb00; margin-bottom: 12px; } .wt-form__success-text { margin: 0 0 18px; font-size: 16px; line-height: 1.5; color: #2c3e50; max-width: 460px; } .wt-form__again { background: transparent; color: #1e3a6d; border: 1px solid #1e3a6d; border-radius: 5px; padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .15s ease, color .15s ease; font-family: inherit; } .wt-form__again:hover, .wt-form__again:focus-visible { background: #1e3a6d; color: #fff; outline: none; } /* ============================================================ */ /* === Extra veld-types (B2B-form): sectie-kop, half, radio, checkbox === */ /* ============================================================ */ /* Sectie-kop binnen het formulier */ .wt-form__section { font-size: 16px; font-weight: 700; color: #1e3a6d; margin: 26px 0 14px; padding-bottom: 8px; border-bottom: 1px solid #e1eaf2; } .wt-form__section:first-child { margin-top: 0; } /* Half-width velden naast elkaar (desktop). Form wordt flex-wrap; alle directe children vullen standaard de volle breedte, alleen --half wordt 50%. Single-column forms blijven identiek. */ @media (min-width: 560px) { .wt-form { display: flex; flex-wrap: wrap; gap: 0 18px; align-content: flex-start; } .wt-form > * { flex: 0 0 100%; } .wt-form__field { flex: 0 0 100%; } .wt-form__field--half { flex: 1 1 calc(50% - 9px); } } /* Radio-groep (aanhef) */ .wt-form__radio-group { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 2px; } .wt-form__radio { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: #2c3e50; cursor: pointer; font-weight: 400; } .wt-form__radio input { margin: 0; width: 16px; height: 16px; accent-color: #1e3a6d; cursor: pointer; } /* Enkele checkbox (nieuwsbrief-consent) */ .wt-form__field--checkbox { margin-top: 4px; } .wt-form__checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #4a5868; line-height: 1.45; cursor: pointer; font-weight: 400; } .wt-form__checkbox input { margin: 2px 0 0; width: 17px; height: 17px; flex: 0 0 auto; accent-color: #1e3a6d; cursor: pointer; } /* ============================================================ */ /* === Checkbox met info-tooltip (1:1 als account-registratie) === */ /* ============================================================ */ .wt-form__field--checkbox{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:4px} .wt-form__field--checkbox .wt-form__checkbox{align-items:center} .wt-form__field--checkbox .wt-form__error{flex-basis:100%} .wt-form__field--checkbox .wt-tooltip{transform:none} /* wt-tooltip (gekopieerd uit account.css zodat het ook op form-pagina's werkt) */ .wt-tooltip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0 0 0 4px;padding:0;background:transparent;border:0;cursor:help;color:#9ca3af;vertical-align:middle;transition:color .15s ease;-webkit-tap-highlight-color:transparent} .wt-tooltip:hover,.wt-tooltip:focus-visible{color:#1e3a6d;outline:none} .wt-tooltip svg{width:16px;height:16px;pointer-events:none} .wt-tooltip__bubble{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:12px 14px;font-size:13px;font-weight:400;color:#4b5563;width:280px;max-width:calc(100vw - 32px);line-height:1.45;box-shadow:0 10px 28px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.06);opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease;pointer-events:none;z-index:100;text-align:left} .wt-tooltip__bubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#fff;filter:drop-shadow(0 1px 0 #e5e7eb)} .wt-tooltip:hover .wt-tooltip__bubble,.wt-tooltip:focus-visible .wt-tooltip__bubble,.wt-tooltip.is-active .wt-tooltip__bubble{opacity:1;visibility:visible} /* nieuwsbrief-checkbox: tekst minimaal omlaag voor perfecte uitlijning met checkbox */ .wt-form__field--checkbox .wt-form__checkbox span{position:relative;top:1px} /* ============================================================ */ /* === Variant: inline (compact, voor smalle kolommen) === */ /* Gebruikt door het nieuwsbriefformulier in de footer. Het kale */ /* kaartje van .wt-form (wit vlak, rand, schaduw, padding) hoort */ /* daar niet, want het staat al in een gekleurde kolom. */ /* ============================================================ */ .wt-form--inline { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; max-width: 100%; } .wt-form--inline .wt-form__field, .wt-form--inline .wt-form__field:last-of-type { margin-bottom: 10px; } .wt-form--inline .wt-form__actions { margin-top: 0; } .wt-form--inline .wt-form__submit { width: 100%; padding: 12px 20px; } .wt-form--inline .wt-form__messages { margin-top: 10px; } /* Bevestiging is hier één regel tekst; het grote vinkje en de "nog een bericht"-knop van de paginaformulieren passen niet in een footerkolom. */ .wt-form--inline .wt-form__success { padding: 0; text-align: left; } .wt-form--inline .wt-form__success-icon { display: none; } .wt-form--inline .wt-form__again { display: none; } /* Na een geslaagde submit krijgt het form er .wt-form--success bij, dat verderop een wit vlak met groene rand tekent. Hier expliciet terugdraaien, anders verschijnt dat vlak alsnog in de footerkolom. */ .wt-form--inline.wt-form--success { background: none; border: 0; } /* Label alleen voor schermlezers (visueel weg, wel voorleesbaar). */ .wt-form__label--sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ==================== /css/product-card.css ==================== */ /* * OVER `!important` IN DIT BESTAND: die zijn er niet meer. * * Hier stond tot 27-08-2026 dat er 41 moesten blijven staan omdat ze vochten tegen * `css/basislaag.css`, dat de WooCommerce-productlus ook stylet. Die tekst klopte niet meer: de * betreffende basislaag-regels zijn op 26-08 afgebakend met `:not(.wt-card)` en raken onze kaart * dus niet langer, en de laatste `!important` zijn daarna weggehaald. Nageteld op 27-08: nul. * * Er is nog een reden waarom het kan: **elk echt product op de site draait inmiddels op deze * kaart.** Gemeten over 32 paginatypes. Wat er nog als standaard WooCommerce-kaart uitziet, zijn * `li.product-category`: de categorietegels. Die hebben ook de klasse `product`, en dáárom raakt * `ul.products li.product` uit de basislaag ze nog. Dat is een eigen onderdeel dat nog wacht op * zijn eigen klasse en zijn eigen bestand. * * Zet er geen nieuwe `!important` bij zonder eerst te kijken WAT er wint. Kijk of de tegenstander * een basislaag-regel is, en of die nog een echte gebruiker heeft. */ li.wt-card { /* `min-height` kwam van `ul.products li.product:not(.product-category)` in style.css, een regel uit de tijd van het oude thema. Die is op 26-08-2026 beperkt tot de categorie-tegels, dus staat de ondergrens nu hier. Hij doet niets bij een gevulde kaart (die is ruim 500px hoog) maar houdt een kaart met weinig inhoud op gelijke hoogte met zijn buren. */ min-height:380px; position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--wt-border); border-radius:var(--wt-radius); padding:14px; overflow:hidden; transition:border-color .15s ease, box-shadow .15s ease; /* Shoptimizer zette padding-bottom:0 → knop plakte onderaan; overflow:hidden tegen hover-paint-glitch */ } /* Shoptimizer toont op hover een ::before-overlay (visibility/opacity) die met onze kaart-markup een witte tegel over de content legt (content blijft in de DOM, alleen visueel afgedekt). Op onze kaart uitzetten. */ li.wt-card::before { content:none; display:none; } li.wt-card:hover { border-color:var(--wt-border-input); box-shadow:0 10px 26px -16px rgba(30,58,109,.45); } .wt-card__media { position:relative; display:block; aspect-ratio:1/1; border-radius:var(--wt-radius-sm); overflow:hidden; background:var(--wt-bg); margin-bottom:14px; } .wt-card__media img { width:100%; height:100%; object-fit:contain; display:block; } /* `li.product` in de selector puur voor het gewicht: Shoptimizers main.css zet * `li.product .onsale { border-radius: 3px }` (0-2-1) en wint daarmee van een selector met twee * klassen. Daardoor bleef deze badge hoekig terwijl dezelfde badge op de productpagina al rond was. * Zelfde pilvorm als `.wt-badge`, zodat een aanbieding er overal hetzelfde uitziet. */ li.product .wt-card__media .onsale, .wt-card__media .onsale { position:absolute; top:10px; left:10px; margin:0; min-width:0; min-height:0; background:var(--wt-error); color:#fff; font-size:11px; font-weight:800; line-height:1.2; padding:6px 12px; border-radius:20px; } /* Badges op de kaart: kleiner dan op de productpagina. De badge zelf is gedeeld (`.wt-badge` in global.css) en dat blijft zo: dezelfde vorm, dezelfde kleuren. Alleen de maat verschilt, en dat komt door de context. "ISDE subsidie mogelijk" is 145px breed; op een productfoto van 600px valt dat weg, maar op een kaart van 180px is het vier vijfde van de breedte en breekt hij over twee regels. Dan kijk je naar labels in plaats van naar het product (Tijn 30-09-2026). Kleiner betekent hier écht kleiner, niet alleen minder padding: 10px tekst in plaats van 11, krappere pil, en de rij begint dichter bij de hoek. De contrastwaarden uit global.css blijven gelden, want alleen de maatvoering verandert. */ /* Geen eigen inspringing op de kaart: die zat er al. ⚠️ De kaart heeft 14px padding plus 1px rand, dus de fotocontainer begint al 15px van de hoek. Daar kwam hier nog eens 10px bovenop, waardoor de labels 25px van de kaarthoek stonden terwijl ze op de productpagina op 15px van de fotohoek staan. Dat is wat je ziet als "te veel padding in de hoek" (Tijn 30-09-2026): niet de pil zelf, maar de afstand tot de hoek. Op nul gaan geeft precies dezelfde 15px als de productpagina, want de kaartpadding doet daar het werk. Verander je ooit die padding, dan schuift dit vanzelf mee. */ .wt-card .wt-badges { top: 0; left: 0; gap: 4px; max-width: 100%; } .wt-card .wt-badge { padding: 2px 7px; font-size: 10px; line-height: 1.1; border-radius: 10px; } /* Op een telefoon staan er twee kaarten naast elkaar en is de fotokolom nog maar 136px breed. "ISDE subsidie mogelijk" heeft daar 129px nodig en er is 116px, dus brak hij alsnog over twee regels. Eén stap kleiner lost dat op: gemeten past hij dan op één regel met een paar pixels over. Kleiner dan dit gaan we niet; een badge moet leesbaar blijven. */ @media (max-width: 768px) { .wt-card .wt-badges { gap: 3px; } .wt-card .wt-badge { padding: 1px 6px; font-size: 9px; } } /* Meta-regel: merk links, artikelnummer rechts. `min-width:0` op de flex-container is nodig, * anders kan het merk niet krimpen en duwt een lange naam het artikelnummer uit de kaart. */ /* Merk en nummer als ÉÉN leesbare regel, links gegroepeerd — niet space-between. Bij een kort merk * ("Itho") gaf dat een gat van 80px met het nummer eenzaam rechts; naast elkaar lezen ze als één * eenheid: "merk + nummer". Het merk krimpt als eerste (min-width:0 + ellipsis), het nummer staat * vast, dus juist datgene waar op gezocht wordt valt nooit weg. */ .wt-card__meta { display:flex; align-items:baseline; gap:7px; min-width:0; margin-bottom:5px; } .wt-card__brand { font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--wt-muted-strong); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Zelfde typografie als het merk: één meta-regel hoort er ook als één regel uit te zien. * Stond eerst op `--wt-border-input` (#c3d0e0) — dat is een RANDkleur, en als tekst op wit haalt die * maar 1,56:1 contrast: praktisch onleesbaar. Nu `--wt-muted`, gelijk aan het merk. * Zelfde grootte en kleur als het merk; het verschil zit in gewicht (500 vs 700) en kapitalen (het * merk wel, het nummer niet). Genoeg om het merk dominant te houden, te weinig om de regel te laten * uiteenvallen. `flex:none` zodat het nummer nooit afbreekt of wegvalt. */ .wt-card__sku { flex:none; font-size:11px; font-weight:400; color:var(--wt-muted-soft); white-space:nowrap; } /* Titel over maximaal drie regels, met een minimumhoogte van twee. * * Stond op twee regels, en dat sneed bij 68% van de producten de titel af. Bij ons staat het * onderscheidende deel achteraan (merk → serie → type → variant → artikelnummer), dus juist het * informatieve stuk verdween: "Vent-Axia Multihome draadloze 4-…" laat in het midden of je naar een * schakelaar of een sensor kijkt, en op een categoriepagina lezen tien kaarten dan hetzelfde. * Met drie regels zakt dat naar 14%, voor 19px extra hoogte. * * De `min-height` blijft op twee regels staan en groeit niet mee. Zou hij op 57px staan, dan kregen * korte titels 38px loze ruimte onder zich; nu lijnen die gewoon uit en mogen alleen de lange * doorlopen. */ .wt-card__title { font-size:14px; font-weight:600; line-height:1.35; color:var(--wt-blue); text-decoration:none; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:10px; /* min-height (38px, twee regels) verwijderd 2026-08-21 op verzoek Tijn: bij korte * eenregelige titels stond er een lege band onder de titel. Trade-off: in een rij met * gemengde titel-lengtes kan de sterrenregel een regelhoogte verspringen; prijs en knop * blijven onderaan verankerd via .wt-card__foot { margin-top:auto }. */ } .wt-card__title:hover { text-decoration:underline; } /* Beoordeling onder de titel: sterren, cijfer, aantal. Klikt door naar de beoordelingen op de * productpagina, want dat is wat je wilt als je hierop klikt. * Geen eigen `--ster-maat`: 14px is de standaard van het component en overal dezelfde. */ .wt-card__rating { display:flex; align-items:center; gap:6px; margin:-4px 0 8px; min-height:19px; } /* Spacer voor producten zonder beoordelingen: zelfde hoogte, niets zichtbaar, zodat * USP's/prijs/knop over alle kaarten in de rij gelijk uitlijnen. (2026-08-21) */ .wt-card__rating--leeg { visibility:hidden; text-decoration:none; } .wt-card__rating:hover .wt-card__rating-cijfer { text-decoration:underline; } .wt-card__rating-cijfer { font-size:12.5px; font-weight:700; color:var(--wt-blue); font-variant-numeric:tabular-nums; } .wt-card__rating-n { font-size:11px; color:var(--wt-muted-soft); font-variant-numeric:tabular-nums; } /* USP's onder de titel. Een vinkje via ::before in plaats van een lijst-bolletje, want dat leest als * "dit heeft het product" in plaats van als opsomming. Getekend met een border, niet met een teken uit * het lettertype: dat schaalt mee en staat altijd exact goed, ongeacht font. * `align-items:start` met een kleine margin-top houdt het vinkje bij de EERSTE regel als de tekst * afbreekt, in plaats van dat het in het midden gaat zweven. */ .wt-card__usps { list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:3px; } .wt-card__usps li { position:relative; display:flex; align-items:flex-start; gap:6px; /* Deze grijstint stond hier als terugval achter `var(--wt-text, #4a5868)`. Zolang dat token niet bestond gold de terugval, en dat was precies wat je zag. Op 27-08-2026 is --wt-text wél gedefinieerd (zwart, de gewone tekstkleur), waardoor deze regels stilletjes zwart werden op elke productkaart. Daarom nu expliciet. NB voor de paletronde: #4a5868 is een vierde grijs naast --wt-muted (#8a97a8), --wt-muted-strong (#66748a) en --wt-muted-soft (#a3aebd). Kandidaat om samen te voegen. */ font-size:12px; line-height:1.35; color:#4a5868; margin:0; } .wt-card__usps li::before { content:""; flex:none; width:9px; height:5px; margin-top:4px; border-left:1.5px solid var(--wt-green); border-bottom:1.5px solid var(--wt-green); transform:rotate(-45deg); } .wt-card__foot { margin-top:auto; } .wt-card__price { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; min-height:26px; } /* prijs in rood (ontwerp-keuze); doorgestreepte oude prijs muted */ .wt-card__price .woocommerce-Price-amount, .wt-card__price ins .woocommerce-Price-amount, .wt-card__price ins { font-size:17px; font-weight:800; color:var(--wt-error); font-variant-numeric:tabular-nums; letter-spacing:-.3px; text-decoration:none; } .wt-card__price del, .wt-card__price del .woocommerce-Price-amount { font-size:12px; font-weight:400; color:var(--wt-muted); text-decoration:line-through; } .wt-card__price .woocommerce-price-suffix { font-size:11px; font-weight:600; color:var(--wt-muted); margin-left:1px; } /* levertijd = platte groene tekst (geen pill, geen icoon) */ .loop-stock-status { margin:8px 0 0; font-size:11.5px; font-weight:700; line-height:1.35; } .loop-stock-status span { color:var(--wt-green-hover); font-family:inherit; font-size:11.5px; } .loop-stock-status.out-of-stock, li.wt-card--soldout .loop-stock-status span { color:var(--wt-muted); } /* CTA-knop: volle breedte, groen, met winkelwagen-icoon */ .wt-card__cta { /* `text-align` en `z-index` stonden hier niet: die kwamen van een regel uit het oude thema (`ul.products li.product .button`). Die is op 26-08-2026 beperkt tot de categorie-tegels, dus nu staan ze hier waar ze horen. De tekst wordt al gecentreerd door flexbox; text-align is er voor het geval de knop ooit geen flex meer is. */ position:relative; z-index:1; text-align:center; margin-top:12px; width:100%; display:flex; align-items:center; justify-content:center; gap:9px; background:var(--wt-green); color:#fff; border:0; border-radius:7px; padding:11px; font-size:14px; font-weight:800; line-height:1; cursor:pointer; } .wt-card__cta::before { content:""; width:18px; height:18px; flex:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1.4'/%3E%3Ccircle cx='18' cy='21' r='1.4'/%3E%3Cpath d='M2 3h2.2l2.5 12.5a2 2 0 0 0 2 1.5h8.6a2 2 0 0 0 2-1.6L22 7H6'/%3E%3C/svg%3E") no-repeat center/contain; } /* Op een telefoon in portret past het icoon er niet meer bij en brak "In winkelwagen" over twee * regels. Gemeten op 375px: de knop is 135,5px breed, waarvan 22px padding, 18px icoon en 9px gap. * Er blijft 86,5px voor de tekst over terwijl die er 106,2 nodig heeft, dus ruim 19px tekort. * * Alleen het icoon of alleen de tekst verkleinen lost dat niet op: icoon naar 14px met gap 6 komt * nog 12,7px tekort, tekst naar 13px 12,1px en zelfs 12px nog 4,5px. Alles tegelijk verkleinen * (icoon 14, gap 6, padding 8, tekst 13px) haalt het met 0,9px, en dat is geen marge maar toeval. * Het icoon weglaten geeft 7,3px lucht met de tekst op de normale 14px, en scheelt bovendien 14px * kaarthoogte omdat de knop van 50px terug naar 36px gaat. * * De grens ligt op 480px en niet op de 1000px van de rest van de kaart: de knop groeit mee met de * viewport (breedte ≈ viewport/2 − 52), dus vanaf ongeveer 415px past het icoon weer, en op een * tablet van 768px is de knop 332px breed en houdt hij 177px over. Daar zou weglaten zonde zijn. * 480px legt de grens net boven de breedste telefoon in portret (440px), zodat álle telefoons * dezelfde knop tonen in plaats van de ene wel en de andere niet. * * Geen `gap:0` nodig: met `display:none` is het pseudo-element geen flex-item meer, en de knop * bevat verder alleen een tekstnode, dus er valt geen gat. */ @media (max-width:480px){ .wt-card__cta::before { display:none; } } .wt-card__cta:hover { background:var(--wt-green-hover); } /* Laadstaat, dezelfde ring als op de productpagina; de uitleg staat daar, in css/pdp.css. * * De knop op de kaart gaf tot nu toe geen enkel teken tijdens het toevoegen: Shoptimizers eigen * ring staat hier op `opacity: 0`. In een lijst met tientallen producten is dat juist hinderlijk, * want dan weet je niet welke knop je nou geraakt hebt. * * De keyframes `wt-draai` staan in css/global.css. Dat moet ook wel: op een categoriepagina wordt * pdp.css niet geladen, dus daar hoorde de ring wel bij de knop maar draaide hij niet. */ .wt-card__cta.loading { color: transparent; } .wt-card__cta.loading::before { visibility: hidden; } .wt-card__cta.loading::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; background: none; border: 2px solid rgba(255, 255, 255, 0.35); border-left-color: #fff; border-radius: 50%; opacity: 1; animation: wt-draai 0.6s linear infinite; } .wt-card__cta--disabled { background:var(--wt-border-input); cursor:not-allowed; } .wt-card__cta--disabled::before { display:none; } /* De link "Bekijk winkelwagen" die WooCommerce na het toevoegen achter de knop plakt. * * Shoptimizer zet die absoluut, bedoeld om precies over zijn eigen koopknop te vallen. Over de * onze valt hij 14px te laag: twee groene blokken over elkaar, met van de knoptekst alleen nog een * streepje bovenaan. Uitlijnen heeft geen zin, want de bevestiging is de melding rechtsboven en * daar staat al een knop "Naar winkelwagen" in. Op de productpagina is deze link om dezelfde reden * ook verborgen. */ .wt-card .added_to_cart { display:none; } /* ============================================================================ * PRODUCTGRID * ============================================================================ * Hoort bij de kaart: overal waar `.wt-card` staat, hoort hetzelfde grid. * Gescoped met `:has(.wt-card)` zodat het precies de lijsten raakt waar ONZE kaart * in zit, en niets anders (Shoptimizers eigen lijsten op bv. de PDP blijven ongemoeid * tot die pagina aan de beurt is). * * Waarom nodig: Shoptimizer zet op desktop `ul.products{display:flex}` zonder gap, * waardoor de kaarten op de homepage tegen elkaar aan plakten. Op mobiel won toevallig * wél een grid-regel mét gap — vandaar dat het daar al goed leek. * * `!important` op display/margin/padding/width: Shoptimizer zet die met hoge * specificiteit (en `width:calc(100% + 30px)`, wat rechts uitliep). * ============================================================================ */ ul.products:has(.wt-card) { display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:18px; margin:0; padding:0; width:auto; list-style:none; } ul.products:has(.wt-card) li.product { width:auto; margin:0; float:none; } /* Blokken die expliciet om een vast aantal kolommen vragen (homepage "Populaire producten" / * "Recent toegevoegd", shortcode `columns="5"`) houden dat aantal op ruime schermen; auto-fill zou * daar een losse wees op een tweede rij van maken. Was 6: bij die breedte kapten "ITHO DAALDEROP" en * "WASKÖNIG + WALTER" af op de meta-regel. Met 5 is de kaart ~245px en passen ze wel. Het aantal * producten in de shortcode moet gelijk blijven aan het aantal kolommen, anders ontstaat die wees * alsnog. */ @media (min-width:1200px){ ul.products.columns-5:has(.wt-card) { grid-template-columns:repeat(5,minmax(0,1fr)); } } @media (max-width:1199px) and (min-width:1001px){ ul.products.columns-5:has(.wt-card) { grid-template-columns:repeat(4,minmax(0,1fr)); } } /* Blog-/paginashortcodes met columns="4": vier gelijke kolommen die de contentbreedte exact * vullen (kaart ~250px, gelijk aan de PLP). Zonder deze regel maakte auto-fill er in een smallere * contentkolom drie van, met een wees op een nieuwe rij. (2026-08-21) */ @media (min-width:1001px){ ul.products.columns-4:has(.wt-card) { grid-template-columns:repeat(4,minmax(0,1fr)); } } @media (max-width:1000px) and (min-width:701px){ ul.products.columns-4:has(.wt-card) { grid-template-columns:repeat(3,minmax(0,1fr)); } } /* Op mobiel is de kaart ~143px breed en past "ITHO DAALDEROP" + "Art. W07419" niet naast elkaar: * het merk zou afkappen tot "ITHO DAALD…". Liever laten terugvallen op een tweede regel. `wrap` doet * dat alleen wanneer het nodig is, dus korte merken (Duco, Zehnder, Vent-Axia) blijven op één regel * en kosten geen kaarthoogte. Het merk mag hier dus de volle breedte pakken. */ @media (max-width:1000px){ .wt-card__meta { flex-wrap:wrap; row-gap:1px; } /* USP's een punt kleiner op mobiel. Daar is maar 128px tekstruimte, goed voor ongeveer 20 tekens, * en zelfs de korte variant van 30 tekens past daar niet op één regel. Gemeten met de echte teksten: * op 12px loopt 84% door naar een tweede regel, op 11px nog 57%, en het blok wordt 23px lager. * 11px is bovendien geen nieuwe maat op deze kaart: merk en artikelnummer staan er al op. * Verder omlaag (10px) zou 25% halen maar wordt kleiner dan al het andere op de kaart. */ .wt-card__usps li { font-size:11px; } /* Merk blijft nowrap: het mag zakken naar zijn eigen regel, maar niet binnen zichzelf afbreken. * Zonder dit werd "Fränkische Rohrwerke" drie regels hoog (merk over 2 regels + nummer eronder). * `flex-basis:auto` + `flex-grow:1` laat het de volle kaartbreedte pakken zodra het zakt, waardoor * de ellipsis in de praktijk nooit meer aanslaat: alleen 20 tekens komt nog 5px tekort. */ .wt-card__brand { flex:1 1 auto; } } @media (max-width:1000px){ ul.products:has(.wt-card) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } } /* ============================================================================ * Harnas tegen de content-context (2026-08-21). * In blogteksten stylen entry-content-regels links (groen) en lijsten * (inspringing, markers). De kaart hoort er OVERAL identiek uit te zien, dus * hier zetten we die overerving expliciet terug. Specificiteit bewust hoog. * ============================================================================ */ li.wt-card { text-align:left; } li.wt-card a.wt-card__title, li.wt-card .wt-card__title { color:var(--wt-blue); } li.wt-card a.wt-card__rating { color:inherit; } li.wt-card .wt-card__usps { margin:0 0 10px; padding:0; list-style:none; } li.wt-card .wt-card__usps li { margin:0; padding:0; list-style:none; text-indent:0; } li.wt-card .wt-card__usps li::marker { content:none; } /* ==================== /css/blog.css ==================== */ /** * blog.css — Weltechniek blog-cluster (Elementor-vrij) * Geladen op: 404, single post, blog-index (/blog/), categorie/tag/auteur-archieven. * Cachebust via filemtime() (geen handmatige Version-bump nodig). * * Tokens (zie Documenten/design-system.md): * navy #1e3a6d · navy-hover #14284f · groen #00bb00 · groen-hover #008d00 * tekst-grijs #4a5868 · border #e1eaf2 · bg-licht #f7f8fa · navy-tint #eef2f9 */ /* ============================================================ Herbruikbare blog-knoppen ============================================================ */ .wt-blog-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 6px; font-weight: 700; font-size: 15px; line-height: 1; text-decoration: none; border: 1px solid transparent; transition: background-color .15s ease, color .15s ease, border-color .15s ease; cursor: pointer; } .wt-blog-btn--primary { background: #00bb00; color: #fff; border-color: #00bb00; } .wt-blog-btn--primary:hover { background: #008d00; border-color: #008d00; color: #fff; } .wt-blog-btn--ghost { background: transparent; color: #1e3a6d; border-color: #cdd9e8; } .wt-blog-btn--ghost:hover { background: #eef2f9; border-color: #1e3a6d; color: #1e3a6d; } /* ============================================================ 404 — kop ============================================================ */ /* Gecentreerde kolom, geen illustratie meer (Tijn 30-09-2026). De tekening stond rechts naast de tekst en duwde alles naar links; ze voegde niets toe aan wat iemand op dit moment nodig heeft. Zonder plaatje is dit een rustig blok: foutcode, kop, uitleg, zoekbalk, twee knoppen, alles onder elkaar en gecentreerd. Zelfde opzet als de 404 van dutchbalance.com. `--wt-404-ruimte` is de enige verticale maat op deze pagina. Hij staat tussen elk blok, zodat de afstanden niet per sectie verschillen. Stond eerst op 64px onder de kop en 40px tussen de blokken, waardoor rij 2 en 3 dicht op elkaar leken te staan. */ .wt-404, .wt-404-blok, .wt-404-hulp { --wt-404-ruimte: 56px; } .wt-404 { /* De lucht direct boven en onder de zoekbalk. Eén waarde, zodat die twee niet uit elkaar kunnen lopen zoals eerder gebeurde. */ --wt-404-zoekruimte: 32px; } /* De 28px lucht onder het kruimelpad weg. `.archive-header` (basislaag, archiefkop) houdt sitebreed 28px marge plus een randlijn om de kop van de inhoud te scheiden. Op elke andere pagina klopt dat, maar hier begint de inhoud met een gekleurde band en dan is die witte strook een gat (Tijn 30-09-2026). De lijn blijft staan: de band sluit er nu strak op aan. Alleen op de 404, dus geen gevolgen voor categorie- of merkpagina's. */ /* ⚠️ De selector spiegelt die in global.css, inclusief `:has()`. Met alleen `body.error404 .archive-header` is de specificiteit exact gelijk (0,2,1) en wint global.css omdat die later in de cascade staat. Gemeten: de marge bleef dan gewoon 28px. */ body.error404 .archive-header:has(.woocommerce-breadcrumb) { margin-bottom: 0; } /* Band van schermrand tot schermrand, met de tekst gecentreerd in het midden. Zelfde formule als de footer (css/footer.css): breek uit de inhoudskolom met 100vw en negatieve zijmarges. De achtergrond maakt van de kop een eigen blok, zodat de pagina begint met een duidelijke boodschap en daarna pas de hulpmiddelen toont. `--wt-bg` en niet `--wt-tint`: dat laatste heeft het hulpblok onderaan al, en twee identieke vlakken op één pagina maken het beeld onrustig. */ .wt-404 { width: 100vw; margin: 0 calc(50% - 50vw) var(--wt-404-ruimte); max-width: none; background: var(--wt-bg, #f7f8fa); padding: 56px 1rem; text-align: center; } .wt-404__text { max-width: 680px; margin: 0 auto; } .wt-404__code { color: var(--wt-muted-strong, #64748b); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 10px; } .wt-404__title { color: #1e3a6d; font-size: 38px; line-height: 1.15; margin: 0 0 16px; } .wt-404__intro { color: #4a5868; font-size: 17px; line-height: 1.65; /* Even veel lucht boven als onder de zoekbalk: allebei --wt-404-zoekruimte. Stond op 28 boven en 24 onder, en dat zag je (Tijn 30-09-2026). */ margin: 0 auto var(--wt-404-zoekruimte, 32px); max-width: 52ch; } /* Zoekbalk: het belangrijkste element op deze pagina, dus vóór de knoppen. Wie op een 404 landt was ergens naar op zoek. Het veld zelf is FiboSearch, hetzelfde als in de header. */ .wt-404__zoek { max-width: 520px; margin: 0 auto var(--wt-404-zoekruimte, 32px); } .wt-404__zoek .dgwt-wcas-search-wrapp { max-width: none; width: 100%; } .wt-404__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } @media (max-width: 768px) { .wt-404 { padding: 32px 1rem; } .wt-404, .wt-404-blok, .wt-404-hulp { --wt-404-ruimte: 40px; } .wt-404__title { font-size: 27px; } .wt-404__intro { font-size: 16px; } .wt-404__buttons { width: 100%; } .wt-404__buttons .wt-blog-btn { flex: 1 1 auto; } } /* ============================================================ Blog-archief (blog-index /blog/ + categorie/tag/auteur) ============================================================ */ .wt-blog-archive { padding: 8px 0 56px; } .wt-blog-archive__header { margin-bottom: 36px; } .wt-blog-archive__title { color: #1e3a6d; font-size: 32px; line-height: 1.2; margin: 0 0 16px; } .wt-blog-archive__intro { color: #4a5868; font-size: 17px; line-height: 1.65; max-width: 70ch; } .wt-blog-archive__intro p { margin: 0 0 12px; } .wt-blog-archive__intro p:last-child { margin-bottom: 0; } /* Grid */ .wt-blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } @media (max-width: 1100px) { .wt-blog-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { .wt-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (max-width: 540px) { .wt-blog-grid { grid-template-columns: 1fr; gap: 22px; } } /* Card — hele kaart klikbaar via stretched link (.wt-blog-card__title a::after) */ .wt-blog-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #e1eaf2; border-radius: 8px; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .wt-blog-card:hover { box-shadow: 0 8px 24px rgba(30, 58, 109, .10); border-color: #cdd9e8; transform: translateY(-2px); } /* Stretched link: titel-link dekt de hele kaart af */ .wt-blog-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .wt-blog-card__thumb { display: block; aspect-ratio: 16 / 10; background: #eef2f9; overflow: hidden; } .wt-blog-card__thumb img, .wt-blog-card__thumb--empty { display: block; width: 100%; height: 100%; object-fit: cover; } .wt-blog-card__thumb--empty { background: linear-gradient(135deg, #eef2f9, #e1eaf2); } .wt-blog-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px 18px 20px; } .wt-blog-card__title { font-size: 18px; line-height: 1.3; margin: 0 0 10px; } .wt-blog-card__title a { color: #1e3a6d; text-decoration: none; } .wt-blog-card__title a:hover { color: #14284f; text-decoration: underline; } .wt-blog-card__excerpt { color: #4a5868; font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; } .wt-blog-card__more { margin-top: auto; align-self: flex-start; padding: 9px 16px; font-size: 14px; pointer-events: none; /* decoratief; de stretched titel-link vangt de klik */ } /* Geen aparte hover op "Bekijk artikel": de hele kaart heeft al een hover-effect (lift + shadow). De knop blijft een rustige, statische label. */ /* ============================================================ Paginatie — KANONIEK herbruikbaar component (.wt-pagination) Markup: