/*
 * 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/block-checkout.css ==================== */
/**
 * block-checkout.css — Weltechniek huisstijl voor de WooCommerce block-cart + block-checkout.
 * Geladen op is_cart() || is_checkout(). Tokens: navy #1e3a6d, groen #00bb00, border #e1eaf2,
 * navy-tint #eef2f9, bg-licht #f7f8fa.
 */

/*
 * ⚠️ HIER STOND DRIE KEER `.wt-stacked`, EEN KLASSE DIE JAVASCRIPT ZETTE.
 *
 * Die klasse werd door `js/checkout-trust.js` op het checkout-blok gezet zodra
 * `matchMedia('(max-width: 1023.98px)')` aansloeg — dus precies wat een mediaquery zelf al weet.
 * CSS had daar nooit JavaScript voor nodig. Omgezet op 29-08-2026.
 *
 * Let op bij het lezen: de klasse weglaten VERLAAGT de specificiteit van 0,4,0 naar 0,3,0. Vooraf
 * nagekeken dat dat mag: de enige concurrerende regel voor `.wt-checkout-usp` is 0,1,0, en de andere
 * twee gebruiken `!important`.
 */


/* ── Verzend-/betaalopties als losse cards mét tussenruimte (zoals winkelwagen) ──
   Verzenden: de optie is direct .__option.
   Betalen: de optie is .accordion-option (omvat label + uitgeklapte inhoud); het
   __option dáárbinnen krijgt GEEN eigen rand (anders geneste/dubbele rand). */
.woocommerce-checkout .wc-block-components-radio-control__option,
.woocommerce-checkout .wc-block-components-radio-control-accordion-option {
	border: 1px solid #e1eaf2 !important;
	border-radius: 8px !important;
	margin-bottom: 10px !important;
	background: #fff !important;
	overflow: hidden; /* geneste vierkante achtergrond niet over de afgeronde hoeken laten steken */
}
.woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	border: 0 !important;
	border-radius: 0 !important;
	margin-bottom: 0 !important;
}
.woocommerce-checkout .wc-block-components-radio-control__option:last-child,
.woocommerce-checkout .wc-block-components-radio-control-accordion-option:last-child {
	margin-bottom: 0;
}
/* WC tekent standaard scheidingslijntjes tussen opties + een kader om de hele
   radio-groep (via ::before/::after op de wrapper) — alles uit, we hebben nu cards. */
.woocommerce-checkout .wc-block-components-radio-control__option::before,
.woocommerce-checkout .wc-block-components-radio-control__option::after,
.woocommerce-checkout .wc-block-components-radio-control-accordion-option::before,
.woocommerce-checkout .wc-block-components-radio-control-accordion-option::after,
.woocommerce-checkout .wc-block-components-radio-control::before,
.woocommerce-checkout .wc-block-components-radio-control::after,
.woocommerce-checkout .wc-block-components-radio-control-accordion::before,
.woocommerce-checkout .wc-block-components-radio-control-accordion::after {
	display: none !important;
}

/* ── Gekozen optie: navy rand + navy-getinte achtergrond (duidelijke selectie-
   affordance, zoals XXL Nutrition). Tint = kanonieke navy-tint #eef2f9 uit het
   design-system; was #f7f9fc (bijna wit, nauwelijks zichtbaar). Geldt voor
   verzend- (__option) én betaalmethode (accordion-option). ── */
.woocommerce-checkout .wc-block-components-radio-control__option--checked-option-highlighted,
.woocommerce-checkout .wc-block-components-radio-control-accordion-option:has(input:checked),
.woocommerce-checkout .wc-block-components-radio-control-accordion-option:has(input:checked) .wc-block-components-radio-control__option {
	box-shadow: none !important;
	border-color: #aac3e6 !important; /* zacht blauw i.p.v. donkere navy #1e3a6d →
	   minder "hard"; de navy radio-dot draagt het geselecteerd-signaal. */
	background: #f7f8fa !important; /* lichtere tint dan #eef2f9 (subtieler, Tijn).
	   !important nodig: basis-optie (regel 16) is background:#fff !important. 3e
	   selector tint de binnenste betaalrij (anders dekt die witte rij de getinte
	   accordion-wrapper af). */
}

/* "Meest gebruikt"-nudge bij iDEAL (JS-geïnjecteerd, hardcoded). Groen tekstje
   naast de methodenaam — zoals XXL. Niet-klikbaar onderscheid, puur presentatie. */
.woocommerce-checkout .wt-pay-badge {
	margin-left: 20px; /* ruimte naast de "iDEAL"-titel (Tijn) */
	color: #00871f;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

/* Uitleg-note onder het telefoonveld: waarom we het nummer vragen (veel mensen
   geven 't anno 2026 liever niet). Via ::after (statische tekst) i.p.v. JS — het
   adresformulier her-rendert per toetsaanslag, JS-injectie zou daar flikkeren. */
.woocommerce-checkout .wc-block-components-address-form__phone::after {
	content: "We gebruiken je telefoonnummer alleen als er dringende vragen zijn over je bestelling.";
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.4;
	color: #64748b;
	/* WC's text-input zet `white-space: nowrap` (voor het zwevende label); de
	   ::after erft dat → de uitleg-regel bleef op één regel en liep op smal scherm
	   buiten beeld. Terugzetten naar normaal zodat 'ie netjes wrapt. */
	white-space: normal;
	overflow-wrap: break-word;
}

/* Radio-bolletje gelijk aan de winkelwagen (.wt-ship-option): wit cirkeltje,
   zachte navy-200 rand; navy rand + navy dot als gekozen. Geen harde zwarte
   default-rand meer. Dot via radial-gradient (betrouwbaarder dan ::after op input). */
.wc-block-components-radio-control__input {
	width: 20px !important;
	height: 20px !important;
	border: 2px solid #cdd9e8 !important;
	background: #fff !important;
	box-shadow: none !important;
}
.wc-block-components-radio-control__input:checked,
.wc-block-components-radio-control__option--checked .wc-block-components-radio-control__input {
	border-color: #1e3a6d !important;
	background: radial-gradient(#1e3a6d 0 38%, #fff 44% 100%) !important;
}
.wc-block-components-radio-control__input::after,
.wc-block-components-radio-control__input:checked::after {
	content: none !important;
}
/* WC tekent het radio-bolletje als ::before met background:#000 (zwart) → over
   onze navy gradient heen. Bolletje navy maken, gelijk aan de winkelwagen. */
.wc-block-components-radio-control__input::before {
	background-color: #1e3a6d !important;
}

/* ── Inputs: zachte merk-rand + navy focus, radius gelijk aan de rest ── */
.wc-block-components-text-input input.input-text,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-combobox-control input {
	border-color: #e1eaf2 !important; /* land-select gebruikte nog WC's donkere
	   default-rand (#2b2d2f @ .8) → gelijkgetrokken met de tekstvelden (Tijn:
	   viel af, vooringevuld NL). */
	border-radius: 6px !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wc-block-components-combobox-control input:focus {
	border-color: #1e3a6d !important;
	box-shadow: 0 0 0 1px #1e3a6d !important;
}
/* Placeholder (rust-staat van het zwevende label) subtieler/lichter.
   `:not(.is-active)` is nodig: een zwarter WC/Shoptimizer-regel met (0,2,1)
   overschreef de oude (0,2,1)-versie -> label werd zwart i.p.v. grijs. Met
   :not erbij = (0,3,1) -> wint zonder !important. Zwevend label (gevuld/focus)
   krijgt navy via .is-active hieronder. */
.woocommerce-checkout .wc-block-components-text-input:not(.is-active) label,
.woocommerce-checkout .wc-block-components-combobox-control:not(.is-active) label {
	color: #9ca3af;
}
/* Zwevend label in navy bij focus/gevuld (specifieker → wint van de regel hierboven) */
.woocommerce-checkout .wc-block-components-text-input.is-active label {
	color: #1e3a6d;
}

/* ── Koppen consistent navy (zeker stellen) ── */
.wc-block-components-checkout-step__title,
.wc-block-components-title {
	color: #1e3a6d;
}

/* ── Plaats-bestelling-knop: groene CTA, ruim + volledige breedte ── */
.wc-block-components-checkout-place-order-button {
	background: #00bb00 !important;
	border-radius: 6px !important;
	font-weight: 700 !important;
	min-height: 62px !important;
	font-size: 19px !important;
	width: 100% !important;
}
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
	font-size: 19px;
}
.wc-block-components-checkout-place-order-button:hover {
	background: #008d00 !important;
}
/* Actie-rij: knop vult de breedte (terug-naar-winkelwagen weg, zie onder) */
.woocommerce-checkout .wc-block-checkout__actions,
.woocommerce-checkout .wc-block-checkout__actions_row {
	display: block;
}

/* ── Terug-naar-winkelwagen weg (conversie: minder exits) ── */
.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
	display: none !important;
}

/* ── USP onder de plaats-bestelling-knop (geruststelling) ── */
.wt-checkout-usp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 24px 0 0;
	font-size: 14px;
	color: #4a5868;
}
.wt-checkout-usp svg {
	width: 18px;
	height: 18px;
	color: #00bb00;
	flex: 0 0 auto;
}
.wt-checkout-usp strong {
	color: inherit;
	font-weight: 400;
}
/* Op mobiel staat de trust-kaart (met dezelfde "Gratis retourneren") direct onder
   de knop → de losse USP daar verbergen om dubbeling te voorkomen. Desktop houdt 'm
   (trust-kaart staat daar in de sidebar). */
@media (max-width: 1023.98px) {
	.woocommerce-checkout .wc-block-checkout .wt-checkout-usp {
		display: none;
	}
}

/* ── Verplichte velden: rode asterisk (was geen indicatie) ── */
.woocommerce-checkout .wc-block-components-text-input:has(input:required) label::after,
.woocommerce-checkout .wc-block-components-checkout-step__content .wc-blocks-components-select:has(select:required) .wc-blocks-components-select__label::after {
	content: " *";
	color: #d12d2d;
}

/* ── Block-"Inloggen"-link weg: vervangen door de inline login bovenaan (navigeert niet weg) ── */
.woocommerce-checkout .wc-block-checkout__login-prompt {
	display: none;
}

/* ── WC-meldingen: container-marge. De banner-styling (lichte bg, icoon, rand)
   staat nu SITE-BREED in header.css (`.woocommerce-error/-message/-info`), dus
   geldt overal — niet alleen checkout. Hier alleen nog de container-spacing. ── */
.wt-checkout-notices {
	margin-bottom: 18px;
}

/* ── Inline "Terugkerende klant?"-login (boven het checkout-block) in huisstijl ── */
.wt-checkout-login {
	margin-bottom: 18px;
}
/* Uitlijnen met de linker (form-)kolom: zelfde ~65% breedte + rechter-padding als .wc-block-checkout__main */
@media (min-width: 1024px) {
	.wt-checkout-login {
		max-width: 65%;
		padding-right: 24px;
		box-sizing: border-box;
	}
}
/* Form vult het blok (Shoptimizer zet er standaard width:57% op) */
.wt-checkout-login form.woocommerce-form-login {
	width: 100%;
	box-sizing: border-box;
}
.wt-checkout-login .woocommerce-form-login-toggle .woocommerce-info {
	/* !important: global.css geeft .woocommerce-info site-breed een block-banner-stijl
	   met !important. De inline login-prompt sluiten we daar bewust van uit -> subtiel
	   (geen box/rand/icoon), zoals 't hoort. */
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	color: #2b3340;
	font-size: 15px;
}
.wt-checkout-login .woocommerce-info::before {
	display: none; /* WC-info-icoon weg */
}
.wt-checkout-login a.showlogin,
.wt-checkout-login .lost_password a {
	color: #00bb00 !important;
	font-weight: 600;
	text-decoration: none;
}
.wt-checkout-login a.showlogin:hover,
.wt-checkout-login .lost_password a:hover {
	color: #008d00 !important;
	text-decoration: underline;
}
.wt-checkout-login form.woocommerce-form-login {
	background: #fff;
	border: 1px solid #e1eaf2;
	border-radius: 14px;
	padding: 20px 22px;
	margin-top: 12px;
	box-shadow: 0 1px 2px rgba(11, 31, 61, .06);
}
.wt-checkout-login form .form-row {
	margin: 0 0 14px;
}
.wt-checkout-login form label {
	display: block;
	font-size: 13px;
	color: #1e3a6d;
	margin-bottom: 4px;
}
.wt-checkout-login form input.input-text {
	width: 100%;
	background: #eef2f9;
	border: 1px solid #e1eaf2;
	border-radius: 6px;
	padding: 12px 14px;
	font-size: 15px;
}
.wt-checkout-login form input.input-text:focus {
	border-color: #1e3a6d;
	box-shadow: 0 0 0 1px #1e3a6d;
	outline: none;
}
.wt-checkout-login form .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #2b3340;
}
.wt-checkout-login form button[name="login"] {
	display: block;
	width: 100%;
	background: #00bb00;
	color: #fff;
	border: 0;
	border-radius: 6px;
	font-weight: 700;
	font-size: 16px;
	min-height: 50px;
	margin-top: 6px;
	cursor: pointer;
}
.wt-checkout-login form button[name="login"]:hover {
	background: #008d00;
}

/* ── Geen icoon-slot in de plaats-bestelling-knop (overbodig) ── */
.woocommerce-checkout .wc-block-components-checkout-place-order-button::before,
.woocommerce-checkout .wc-block-components-checkout-place-order-button::after {
	display: none !important;
}

/* ── Scheidingslijn bóven de privacy/voorwaarden-tekst weg + gelijke ruimte erboven (24px, = tekst→knop) ── */
.woocommerce-checkout .wc-block-checkout__terms--with-separator {
	border-top: none;
	padding-top: 0;
	margin-top: 24px;
}

/* ── Bestelnotitie-optie verbergen (Tijn) ── */
.woocommerce-checkout .wp-block-woocommerce-checkout-order-note-block {
	display: none;
}

/* ── "Je rekent momenteel af als gast." verbergen (overbodige ruis) ── */
.woocommerce-checkout .wc-block-checkout__guest-checkout-notice {
	display: none;
}

/* ── Uitgeklapte Pay.nl-beschrijving (logo links + "Betaal met iDEAL") weg ──
   De afbeelding rechts in de optie toont de methode al. Alleen verbergen als
   de uitgeklapte inhoud géén invoervelden bevat (redirect-methodes); methodes
   met inline velden behouden hun inhoud. */
.woocommerce-checkout .wc-block-components-radio-control-accordion-content:not(:has(input, select, textarea)) {
	display: none !important;
}

/* ── Fieldsets mogen krimpen tot de container (mobiel-overflow-fix) ──
   Een <fieldset> heeft standaard `min-inline-size: min-content` en weigert dus
   smaller te worden dan z'n inhoud → op smalle schermen stak `.wc-block-checkout__
   shipping-fields` (de adres-fieldset) ~63px buiten de formulier-kolom, waardoor
   de velden rechts buiten beeld vielen (2026-06-21, Tijn, mobiel). `min-width:0`
   heft dat op; desktop ongemoeid (fieldset past daar toch al). */
.woocommerce-checkout .wc-block-checkout fieldset {
	min-width: 0;
}

/* Native checkbox-styling staat site-breed in global.css. */
/* WC-block-checkboxen (nieuwsbrief, zelfde-adres, account, notitie, zakelijk) zijn
   `appearance:none` → accent-color pakt ze NIET; ze stonden wit aangevinkt (witte
   bg + navy vinkje). Navy GEVULD maken (navy bg + wit vinkje) zodat ze matchen met
   de huisstijl + duidelijke aan/uit-feedback geven. Het vinkje is een losse SVG. */
.woocommerce-checkout .wc-block-components-checkbox__input:checked {
	background-color: #1e3a6d;
	border-color: #1e3a6d;
}
.woocommerce-checkout .wc-block-components-checkbox:has( .wc-block-components-checkbox__input:checked ) .wc-block-components-checkbox__mark {
	fill: #fff;
	color: #fff;
	/* WC plaatst het vinkje-SVG ~1px rechts-onder het midden van het vakje
	   (top:2px/left:0 in een 20px-vakje met 15px-SVG). Recht zetten → exact midden. */
	top: 1.5px;
	left: -0.5px;
	right: auto;
	/* En dan de tekening zelf. Het kader van de SVG is 24×20, maar het vinkje loopt daarin van 5,6 tot
	   19 verticaal: zijn midden ligt 2,3 eenheden onder het midden van het kader. Bij deze maat is dat
	   1,4px, en precies dat zag je als "hangt te laag" (gemeten 17-09-2026). Horizontaal is het 0,13px. */
	transform: translate(-0.13px, -1.44px);
}
/* Idem voor de flex-items IN het adresformulier (`display:flex; flex-wrap`):
   flex-items hebben standaard `min-width:auto` (= min-content) en weigeren te
   krimpen. Het telefoonveld (met de uitleg-`::after` eronder) kreeg zo een
   min-content breder dan de container → veld viel rechts buiten beeld op mobiel.
   `min-width:0` laat de velden netjes tot de kolombreedte krimpen. */
.woocommerce-checkout .wc-block-components-address-form > * {
	min-width: 0;
}

/* ── Kolom-tussenruimte (form ↔ besteloverzicht) kleiner, alleen desktop ── */
.woocommerce-checkout .wc-block-components-sidebar-layout:not(.is-mobile) .wc-block-checkout__main {
	padding-right: 24px;
}
.woocommerce-checkout .wc-block-components-sidebar-layout:not(.is-mobile) .wc-block-checkout__sidebar {
	padding-left: 0;
}

/* ── MyParcel-bezorgopties ALTIJD onder de Bezorgen/Afhalen-radio's ──
   De shipping-rates-control heeft 2 kinderen: de radio's (`__package`) en het
   MyParcel-widget-blok (naamloze div). MyParcel injecteert z'n blok soms vóór de
   radio's → op first load stond 't dan bovenaan, ná een refresh eronder. Flex +
   `order` forceert de visuele volgorde, onafhankelijk van de DOM-injectievolgorde
   (geen JS-race nodig). */
.woocommerce-checkout .wc-block-components-shipping-rates-control {
	display: flex;
	flex-direction: column;
}
.woocommerce-checkout .wc-block-components-shipping-rates-control > .wc-block-components-shipping-rates-control__package {
	order: 0;
}
.woocommerce-checkout .wc-block-components-shipping-rates-control > *:not( .wc-block-components-shipping-rates-control__package ) {
	order: 1;
}

/* ── Verzendoptie-prijs ("Gratis") niet de halve regel laten claimen ──
   De radio-rij is `display:flex; justify-content:space-between` met het label
   links en `__secondary-label` (prijs-wrap) rechts. Die prijs-wrap stond default
   op ~50% breedte (122px) terwijl "Gratis" maar ~36px is → het label hield te
   weinig ruimte over en "Afhalen in Assendelft (NH)" wrapte onnodig naar 2 regels
   op smal scherm (2026-06-21, Tijn). Tot inhoud laten krimpen → label houdt de
   ruimte, blijft op 1 regel voor zo goed als alle telefoons. */
/* (specificiteit: WC-core zet flex:0 0 50% via `.__label-group .__secondary-label`
   = (0,2,0); onze `.__label-group` ervoor maakt 't (0,3,0) -> wint zonder !important.) */
.woocommerce-checkout .wc-block-components-radio-control__label-group .wc-block-components-radio-control__secondary-label {
	flex: 0 0 auto;
}

/* Verzendoptie-label even dik als de betaalmethoden (400 i.p.v. WC's 500).
   WC-core zet 500 via (0,2,1) (later geladen); `.__option` ervoor maakt 't
   (0,3,1) -> wint zonder !important. */
.woocommerce-checkout .wc-block-components-radio-control__option .wc-block-components-radio-control__label {
	font-weight: 400;
}

/* ── "Gratis" net als de winkelwagen: groen, weight 500, normaal geschreven (geen GRATIS) ── */
.woocommerce-checkout .wc-block-checkout__shipping-option--free,
.woocommerce-checkout .wt-free-shipping {
	color: #00bb00;
	font-weight: 500;
	text-transform: none;
}
/* uppercase weg op de verzend-totaalregel (ook de <strong> erin); kleur via .wt-free-shipping als gratis */
.woocommerce-checkout .wc-block-components-totals-shipping .wc-block-components-totals-item__value,
.woocommerce-checkout .wc-block-components-totals-shipping .wc-block-components-totals-item__value strong {
	text-transform: none !important;
}
.woocommerce-checkout .wt-free-shipping strong {
	color: #00bb00 !important;
	font-weight: 500 !important;
}

/* ── Order-summary: licht kader, navy totaal ── */
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: #1e3a6d;
}
.wc-block-components-product-name {
	color: #1e3a6d !important;
}

/* ── Stappen-divider iets rustiger ── */
.wc-block-checkout__form .wc-block-components-checkout-step {
	border-color: #e1eaf2;
}

/* ============================================================
   Afleidingsvrije checkout — alleen logo in de header,
   geen topbar/zoek/menu/cart/account (focus op afronden).
   ============================================================ */
.woocommerce-checkout .wt-topbar,
.woocommerce-checkout .wt-navrow,
.woocommerce-checkout .wt-search-desktop,
.woocommerce-checkout .wt-search-mobile,
.woocommerce-checkout .wt-mainrow-icons-desktop,
.woocommerce-checkout .wt-mainrow-icons-mobile,
.woocommerce-checkout #mm-mobile-trigger {
	display: none !important;
}
/* Checkout-header consistent met de site-header (Tijn 2026-06-13): zelfde
   licht-blauwe achtergrond (#f2f7fc / --wt-blue-soft), rij-hoogte (64/80px via
   --hdr-main) en logo-hoogte (28/40px). Geen eigen achtergrond-/hoogte-/logo-
   overrides meer — alleen topbar/nav/zoek/iconen verborgen (hierboven) +
   secure-indicator (hieronder). */
/* Logo links, "Afrekenen 🔒"-indicator rechts */
.woocommerce-checkout .wt-mainrow .wrapper > div {
	display: flex;
	align-items: center;
}
.wt-checkout-secure {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #6b7280; /* subtiel grijs, zoals de "veilige verbinding"-microcopy op dutchbalance */
	font-weight: 500;
	font-size: 14px;
	white-space: nowrap;
}
.wt-checkout-secure svg {
	width: 16px;
	height: 16px;
	color: currentColor; /* grijs slotje, erft de tekstkleur */
}
.wt-checkout-secure-sep {
	color: #9ca3af;
}
/* Mobiel: alleen het slotje + "SSL-versleuteld" tonen (zoals dutchbalance) */
@media (max-width: 600px) {
	.wt-checkout-secure-full,
	.wt-checkout-secure-sep {
		display: none;
	}
}

/* ── Afleidingsvrije footer: legal-links + copyright (zoals live checkout) ── */
.woocommerce-checkout .wt-footer__main {
	display: none;
}
.woocommerce-checkout .wt-footer__bottom {
	border-top: none;
}
/* Specificiteit gelijk aan `.woocommerce-checkout .wt-footer__bottom`
   (border-top:none hierboven) + later in bron → border wint en rendert. */
.woocommerce-checkout .wt-footer__bottom--checkout {
	background: #fff;
	border-top: 1px solid #e1eaf2; /* = card-rand, consistent met account .wt-section */
	color: #4a5868;
}
.wt-footer__bottom--checkout .wt-footer__copyright {
	color: #4a5868;
}
.wt-footer__bottom--checkout .wt-footer__inner {
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 20px;
}
.wt-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}
/* Gescoped onder .woocommerce-checkout zodat we Shoptimizer's
   `footer a:not(.button):hover {color:#fff}` (main.css, spec 0,2,2) verslaan —
   op de witte balk zou wit = onzichtbaar. */
.woocommerce-checkout .wt-footer__legal a {
	color: #4a5868;
	font-size: 13px;
	text-decoration: none;
}
.woocommerce-checkout .wt-footer__legal a:hover {
	color: #1e3a6d;
	text-decoration: underline;
}
/* op mobiel netjes gecentreerd onder elkaar, zoals live (mobile-align-center) */
@media (max-width: 600px) {
	.wt-footer__bottom--checkout .wt-footer__inner {
		justify-content: center;
		text-align: center;
	}
	.wt-footer__legal {
		justify-content: center;
	}
}

/* ============================================================
   Particulier / Zakelijk — Bedrijf, BTW én EORI verborgen
   tenzij "Ik bestel zakelijk" aanstaat. De checkbox staat nu
   in het adres-blok (location 'address') → id shipping/billing-
   wt-business. Pure CSS via :has() → overleeft React-re-renders.
   ============================================================ */
.wc-block-checkout:not(:has(#shipping-wt-business:checked, #billing-wt-business:checked)) .wc-block-components-text-input:has(#shipping-company),
.wc-block-checkout:not(:has(#shipping-wt-business:checked, #billing-wt-business:checked)) .wc-block-components-text-input:has(#billing-company),
.wc-block-checkout:not(:has(#shipping-wt-business:checked, #billing-wt-business:checked)) .wc-block-components-text-input:has(#shipping-myparcelnl-vat_number),
.wc-block-checkout:not(:has(#shipping-wt-business:checked, #billing-wt-business:checked)) .wc-block-components-text-input:has(#billing-myparcelnl-vat_number),
.wc-block-checkout:not(:has(#shipping-wt-business:checked, #billing-wt-business:checked)) .wc-block-components-text-input:has(#shipping-myparcelnl-eori_number),
.wc-block-checkout:not(:has(#shipping-wt-business:checked, #billing-wt-business:checked)) .wc-block-components-text-input:has(#billing-myparcelnl-eori_number),
.wc-block-checkout:not(:has(#shipping-wt-business:checked, #billing-wt-business:checked)) .wc-block-components-text-input:has(#billing_vat_number) {
	display: none !important;
}

/* Betaalmethode-rij (Pay.nl .PPMFWC_method): tekst links, icoon flush rechts,
   verticaal gecentreerd t.o.v. de radio. Pay.nl rendert dit block zonder flex →
   tekst stond top-aligned (te hoog) en het icoon niet tegen de rechterrand. */
.woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	position: relative;
}
.woocommerce-checkout .PPMFWC_method img {
	position: absolute !important;
	top: 50% !important;
	right: 16px !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
}
.woocommerce-checkout .PPMFWC_method {
	padding-top: 3px !important;
}

/* De aparte EU-VAT-stap ("BTW-gegevens" / #billing_vat_number) als hele
   stap verbergen tenzij zakelijk — zoals live (zit daar onder Zakelijk). */
.wc-block-checkout:not(:has(#shipping-wt-business:checked, #billing-wt-business:checked)) .wc-block-components-checkout-step:has(#billing_vat_number) {
	display: none !important;
}
/* Ruimte tussen de "BTW-gegevens"-titel en het veld, consistent met de andere stappen.
   De EU-VAT-block heeft 0px tussen __heading en __container (afwijkende structuur). */
.woocommerce-checkout .wc-block-components-checkout-step:has(#billing_vat_number) .wc-block-components-checkout-step__heading {
	margin-bottom: 16px;
}

/* ── "Ik bestel zakelijk" staat bovenaan het adresblok → ruimte onder de checkbox
   zodat 'ie niet tegen het Land/regio-veld plakt ── */
.woocommerce-checkout .wc-block-components-checkbox:has(#shipping-wt-business),
.woocommerce-checkout .wc-block-components-checkbox:has(#billing-wt-business) {
	margin-bottom: 16px;
}

/* ── Checkboxes in huisstijl (Zakelijk-toggle, nieuwsbrief, account) ── */
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border: 1.5px solid #cdd9e8;
	border-radius: 4px;
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: #1e3a6d;
	border-color: #1e3a6d;
}
.wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: #fff;
}
.wc-block-components-checkbox__label {
	color: #2b3340;
}

/* ============================================================
   CONVERSIE-LAYOUT (Optie A): licht canvas + witte step-cards
   + sticky besteloverzicht-card + trust-kaart. Erft het site-
   brede card-systeem (wit blok, rand #e1eaf2, navy-tint accent).
   ============================================================ */

/* Witte canvas — consistent met winkelwagen/account/content-pagina's (Tijn
   2026-06-13). De witte step-cards halen hun scheiding nu volledig uit rand +
   shadow (zie card-styling, gelijk aan account .wt-section). */
body.woocommerce-checkout #content,
body.woocommerce-checkout .col-full {
	background: #fff;
}
/* Footer flush onderaan: .site-content heeft padding-bottom:48px (ruimte tussen
   content en de gewone footer). Onder de minimale checkout-footer is dat een
   zichtbaar gat → op de checkout weg. */
body.woocommerce-checkout .site-content {
	padding-bottom: 0;
}
/* Compacte boven-/onderruimte: het checkout-blok had margin-top:32 + padding-top:24
   (idem onder). Terugbrengen naar ~20px boven én onder (Tijn). */
body.woocommerce-checkout .site-main {
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* Elke checkout-stap → witte card */
.woocommerce-checkout .wc-block-checkout__main .wc-block-components-checkout-step {
	background: #fff;
	border: 1px solid #e1eaf2; /* = account .wt-section --line */
	border-radius: 14px;       /* = account --r-card */
	padding: 22px 24px;
	margin-bottom: 16px;
	box-shadow: 0 1px 2px rgba(11, 31, 61, .06); /* = account --shadow-sm */
}
/* dubbele divider-rand binnen de card weg */
.woocommerce-checkout .wc-block-checkout__main .wc-block-components-checkout-step::after {
	display: none;
}

/* Checkout-breakpoint op 1024px VIEWPORT (gelijk aan header + footer op de live
   site). WC schakelt standaard op 700px CONTAINERbreedte (≈784px viewport) via een
   @container-query → daartussen (784–1024) zag je een geknepen sidebar met afgekapte
   titels. Onder 1024px forceren we daarom WC's gestapelde mobiele layout: kolommen
   full-width (wrappen) + besteloverzicht (sidebar) bovenaan, formulier eronder.
   Boven 1024px blijft WC's 2-koloms intact (deze regels gelden dan niet). */
@media (max-width: 1023.98px) {
	.woocommerce-checkout .wc-block-checkout__main,
	.woocommerce-checkout .wc-block-checkout__sidebar {
		flex: 1 1 100%;
		max-width: 100%;
	}
	.woocommerce-checkout .wc-block-components-sidebar-layout:not(.is-mobile) .wc-block-checkout__main {
		order: 1;
		padding-right: 0; /* matcht spec van regel 295 (:not(.is-mobile)
		   telt mee) + later in bron → wint. Gestapeld geen gutter nodig, anders is de
		   form-card 24px smaller dan het besteloverzicht. */
	}
	.woocommerce-checkout .wc-block-checkout__sidebar {
		order: 0;
		margin-bottom: 24px; /* lucht tussen besteloverzicht en formulier */
	}
}

/* Besteloverzicht-zijbalk: bewust NIET sticky (Tijn 2026-06-21). De zijbalk is
   langer dan de viewport (productlijst + besparing + totalen + trust/hulp-kaart)
   → sticky houdt het totaal tóch niet in beeld, én de plaats-bestelling-knop zit
   in de formulier-kolom (links), niet hier. Sticky gaf bovendien een springende
   zijbalk tijdens het laden (hoogte verandert → sticky-herberekening bij scrollen).
   Conversiewinst marginaal → weggehaald voor stabiliteit. */
.woocommerce-checkout .wc-block-checkout__sidebar {
	align-self: flex-start;
}
/* Op mobiel (gestapeld, class via checkout-trust.js) niet sticky — anders
   "zweeft" het besteloverzicht mee. */
@media (max-width: 1023.98px) {
	.woocommerce-checkout .wc-block-checkout .wc-block-checkout__sidebar {
		position: static;
	}
}
/* WC rendert op mobiel het besteloverzicht dubbel: ingeklapt bovenaan (sidebar)
   + volledig onderaan (in de form-kolom). De onderste weg — de uitklapbare
   ingeklapte bovenaan volstaat. */
@media (max-width: 1023.98px) {
	.woocommerce-checkout .wc-block-checkout .wc-block-checkout__main .wp-block-woocommerce-checkout-order-summary-block {
		display: none !important;
	}
}
/* WC zet bij de (mobiele) uitklap een 0.2-zwart border-top op de titel
   ("helemaal bovenaan") + border-bottom op de content ("onder het totaal").
   Onze card heeft al een eigen rand → die WC-borders weg. */
.woocommerce-checkout .wc-block-components-checkout-order-summary__title,
.woocommerce-checkout .wc-block-components-checkout-order-summary__content {
	border-top: none;
	border-bottom: none;
}
/* WC zet 20px padding boven+onder op de titelbalk → ingeklapt te hoog + uitgeklapt
   top-zwaar (boven titel = card-pad + titel-pad, onder = alleen card-pad). Weg →
   de card-padding (22px) verzorgt de ruimte: symmetrisch + compactere ingeklapte balk. */
.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
	padding-top: 0;
	padding-bottom: 0;
}
/* Ingeklapte balk: totaalbedrag + chevron in dezelfde navy als de titel (was zwart,
   12,9px) → cohesief. Bedrag iets lichter dan de titel zodat 't de waarde is, niet de kop. */
.woocommerce-checkout .wc-block-components-checkout-order-summary__title-price {
	color: #1e3a6d;
	font-weight: 600;
	font-size: 15px;
}
.woocommerce-checkout .wc-block-components-checkout-order-summary__title-icon,
.woocommerce-checkout .wc-block-components-checkout-order-summary__title-icon svg {
	color: #1e3a6d;
	stroke: #1e3a6d;
}
/* Besteloverzicht = navy-getinte samenvattings-panel, identiek aan de
   winkelwagen .wt-cart-totals (navy-50 fill + navy-100 rand). Onderscheidt
   zich zo van de witte formulier-cards — zelfde hiërarchie als de cart. */
.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
	background: #eef2f9; /* navy-50 */
	border: 1px solid #e1eaf2; /* navy-100 */
	border-radius: 14px;
	padding: 22px 24px;
	box-shadow: 0 1px 2px rgba(11, 31, 61, .06);
}
/* Totaal-regel: géén eigen fill meer (card is al getint → geen tint-op-tint).
   Scheidingslijn erboven + navy bold, zoals de winkelwagen incl.-BTW-regel. */
.woocommerce-checkout .wc-block-components-totals-footer-item {
	background: transparent;
	border-top: 1px solid #e1eaf2;
	border-radius: 0;
	padding: 14px 0 0;
	margin-top: 8px;
}
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: #1e3a6d !important;
	font-weight: 700 !important;
	font-size: 16px !important;
}
/* Totaal-bedrag groter dan het label, = winkelwagen (label 16 / bedrag 18). */
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 18px !important;
}
/* "Inclusief €X BTW"-subtekst onder het totaal: rustig grijs, klein. */
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__description {
	color: #64748b;
	font-weight: 400;
	font-size: 12.5px;
}

/* ── Trust-kaart in de sidebar (USP's + reviews) — conversie ── */
.wt-checkout-trust {
	background: #fff;
	border: 1px solid #e1eaf2;
	border-radius: 14px;
	padding: 20px 22px;
	margin-top: 16px;
	box-shadow: 0 1px 2px rgba(11, 31, 61, .06);
}
.wt-checkout-trust__title {
	color: #1e3a6d;
	font-weight: 700;
	font-size: 15px;
	margin: 0 0 14px;
}
.wt-checkout-trust .wt-usp-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 14px;
	color: #2b3340;
}
.wt-checkout-trust .wt-usp-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}
.wt-checkout-trust .wt-usp-list svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}
.wt-checkout-trust .wt-usp-list strong {
	color: #1e3a6d;
}
.wt-checkout-trust__reviews {
	display: block;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #e1eaf2;
	font-size: 13px;
	line-height: 1.5;
	color: #4a5868;
	text-decoration: none;
}
.wt-checkout-trust__reviews:hover {
	color: #1e3a6d;
}
.wt-checkout-trust__reviews svg {
	width: 18px;
	height: 18px;
	color: #f5a623;
	flex: 0 0 auto;
}
.wt-checkout-trust__reviews strong {
	color: #1e3a6d;
	font-weight: 700;
}
.wt-checkout-trust__stars {
	color: #facc15;
	letter-spacing: -.025em;
}
/* "Hulp nodig?" = eigen support-kaart onder de trust-kaart (Tijn-mockup): kop met
   titel + open/gesloten-status rechtsboven, openingstijden eronder, dan 2 actie-
   rijen (bellen + bericht) gescheiden door dividers. Aparte kaart = duidelijker
   vindbaar dan een regeltje in de trust-kaart (support-affordance op betaalmoment).
   Kaart-look = identiek aan .wt-checkout-trust. */
.wt-checkout-help {
	margin-top: 16px;
	background: #fff;
	border: 1px solid #e1eaf2;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba( 11, 31, 61, .06 );
	overflow: hidden; /* dividers vol-breed binnen de afgeronde hoeken */
}
.wt-checkout-help__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px 0;
}
.wt-checkout-help__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #1e3a6d;
}
/* open/gesloten-status rechtsboven, met groen/grijs bolletje */
.wt-checkout-help__status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: #64748b;
	flex: 0 0 auto;
}
.wt-checkout-help__status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: #94a3b8; /* gesloten = grijs */
}
.wt-checkout-help__status--open::before {
	background: #00bb00; /* geopend = groen */
}
.wt-checkout-help__hours {
	margin: 3px 0 0;
	padding: 0 20px 16px;
	font-size: 12.5px;
	color: #64748b;
}
.wt-checkout-help__actions {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wt-checkout-help__actions li {
	border-top: 1px solid #e1eaf2; /* divider boven elke rij (ook scheiding van de kop) */
}
.wt-checkout-help__actions a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 20px;
	font-size: 14px;
	font-weight: 600;
	color: #1e3a6d;
	text-decoration: none;
}
.wt-checkout-help__actions a:hover {
	background: #f7f8fa;
	color: #008d00;
}
.wt-checkout-help__actions svg {
	width: 18px;
	height: 18px;
	color: #1e3a6d;
	flex: 0 0 auto;
}
.wt-checkout-help__actions a:hover svg {
	color: #008d00;
}

/* ============================================================
   Consistentie-ronde (Tijn 2026-06-12): koppen + tekstgroottes
   gelijk, productbeschrijving weg uit overzicht.
   ============================================================ */
/* Alle card-koppen: navy, 20px, 700 (step-titels + "Besteloverzicht") */
.woocommerce-checkout .wc-block-components-checkout-step__title,
.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
	color: #1e3a6d !important;
	font-size: 17px !important; /* = winkelwagen .wt-cart-totals__title */
	font-weight: 700 !important;
	margin-left: 0 !important; /* WC zet margin-left:16px → titel stak in t.o.v. de rij-labels */
}
/* WC zet margin-top:16px op de titel-wrapper bovenop de 22px card-padding →
   ~39px boven, scheef t.o.v. de ~24px zijkant. Weg → boven in balans. */
.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
	margin-top: 0;
	display: flex; /* zodat prijs+chevron op mobiel netjes rechts naast titel staan */
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: 14px; /* overschrijft de border/padding-reset hierboven */
	margin-bottom: 14px;
	border-bottom: 1px solid #e1eaf2; /* subtiele scheiding kop ↔ items (Tijn) */
}
/* Collapsible-kop op smal scherm (<1024px viewport — WC toont dan de totaalprijs
   + chevron in de titel-rij): "N artikelen" weg (totaalprijs zegt al genoeg) +
   divider onder de kop weg (bij ingeklapt staat er niets onder; bij uitgeklapt-
   smal sluit het visueel aan op de items eronder). Gescoped op de mobiele media-
   query: de title-price-node bestaat ook op desktop maar is daar verborgen, dus
   `:has()` alleen is niet voldoende. */
@media (max-width: 1023.98px) {
	.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
		gap: 8px; /* lucht tussen titel · prijs · chevron */
		align-items: center; /* chevron-SVG heeft geen tekst-baseline →
		   met align-items:baseline (desktop-default) zou 'ie ~6px omhoog springen.
		   Center op de hele rij houdt alles netjes verticaal gecentreerd. */
	}
	/* De titel-text mag krimpen zodat de prijs+chevron rustig rechts kunnen
	   staan (anders pakt de title alle ruimte, prijs/chevron geknepen rechts). */
	.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
		flex: 1 1 auto;
		min-width: 0;
	}
	/* Chevron-wrapper is een gewone span met line-height → SVG zit aan de top
	   met 5px lucht eronder → optisch hoger dan tekst. Flex-center fixt het. */
	.woocommerce-checkout .wc-block-components-checkout-order-summary__title-icon {
		display: inline-flex;
		align-items: center;
		line-height: 1;
	}
	/* Divider tussen kop en items op mobiel — Tijn: niet op de kop (zou ook bij
	   ingeklapt zichtbaar zijn), maar op de items-block. Die zit in __content
	   dat bij ingeklapt display:none krijgt → divider verschijnt automatisch
	   alleen als de samenvatting uitgeklapt is. Spiegelt de desktop-kop-divider. */
	.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-cart-items-block.wc-block-components-totals-wrapper[class] {
		border-top: 1px solid #e1eaf2; /* spec (0,4,1) — wint van regel
		   899 (border-top:none, (0,3,0)) + de [class] tilt boven regel 905. */
		margin-top: 14px; /* lucht BOVEN de border (kop ↔ border).
		   GEEN padding-top: regel 905 zet padding:0 !important op deze wrapper
		   en Safari rekent :not(:has()) specificity anders dan Chrome →
		   padding-top verliest in Safari. Margin-top heeft geen concurrent. */
	}
	/* Lucht ONDER de border (border ↔ eerste product) — zelfde 14px → optisch
	   gelijke afstand boven én onder de border. Op het eerste item zelf zodat we
	   de wrapper-padding (=0) niet hoeven te bestrijden. */
	.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-cart-items-block .wc-block-components-order-summary-item:first-child {
		margin-top: 14px;
	}
}
/* Overzicht-tekst leesbaar (was ~12.8px) → consistent met de rest */
.woocommerce-checkout .wc-block-components-product-name,
.woocommerce-checkout .wc-block-components-totals-item__label,
.woocommerce-checkout .wc-block-components-totals-item__value,
.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
	font-size: 14px !important;
}
.woocommerce-checkout .wc-block-components-product-name {
	font-weight: 500;
}
/* Productrij (afbeelding + naam + prijs) flush links/rechts, gelijk aan de
   totaal-rijen (WC zet padding:0 16px op de order-summary → 16px ingesprongen). */
.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary {
	padding-left: 0;
	padding-right: 0;
}
/* Geen voorraadstatus in cart/checkout (Tijn): "Beschikbaar via nabestelling"
   (backorder-badge) verbergen. De sale-badge "Bespaar €X" blijft staan. */
.wc-block-components-product-backorder-badge {
	display: none !important;
}
/* Subtiele rand + kleine radius op de productfoto in het besteloverzicht (Tijn). */
.woocommerce-checkout .wc-block-components-order-summary-item__image img {
	border: 1px solid #e1eaf2;
	border-radius: 6px;
}
/* Aantal-badge op de productfoto verborgen: het aantal staat nu expliciet als
   tekst onder de titel ("3 stuks · €X per stuk") → badge zou dubbelop zijn. */
.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
	display: none !important;
}
/* Productregel-totaalprijs (rechts) in huisstijl-navy i.p.v. zwart. */
.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price {
	color: #1e3a6d;
}
/* === Besteloverzicht-redesign (Tijn-mockup) ===
   Meta-regel onder de titel ("1 stuk · Art. X" / "3 × € 52,50 · Art. X"): de
   native stukprijs-node (incl. doorgestreepte prijs) wordt verborgen; onze
   .wt-meta neemt het over. De doorgestreepte oude prijs verhuist naar de
   rechter kolom (regel-totaal). */
.woocommerce-checkout .wc-block-cart-item__prices {
	margin-top: -2px; /* meta strak onder de titel (Tijn) — compenseert de
	   regelhoogte-naloop van de titel die anders ~6px wit gaf */
}
/* Beschrijvingskolom (titel + meta) hard bovenaan pinnen, niet uitrekken naar de
   rij-hoogte — zo staat de meta-regel ALTIJD op dezelfde vaste afstand onder de
   titel, ook als de rechter kolom (prijs + doorgestreept) de rij hoger maakt (Tijn). */
.woocommerce-checkout .wc-block-components-order-summary-item__description {
	justify-content: flex-start;
	align-self: flex-start;
}
/* Native stukprijs-blok in de meta-regel verbergen — wij tonen .wt-meta. */
.woocommerce-checkout .wc-block-cart-item__prices .wc-block-components-order-summary-item__individual-prices {
	display: none !important;
}
.woocommerce-checkout .wt-meta {
	color: #64748b;
	font-size: 12.8px;
}
/* Rechter kolom: prijs (navy bold) · doorgestreepte regel-totaalprijs ·
   "Bespaar €X"-badge — verticaal gestapeld, rechts uitgelijnd. */
.woocommerce-checkout .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}
.woocommerce-checkout .wt-line-regular {
	color: #94a3b8;
	font-size: 12.8px;
	text-decoration: line-through;
}
/* Per-regel "Bespaar €X"-badge verborgen (Tijn): de besparing staat nu
   gebundeld in één groene "Je bespaart vandaag"-rij onder de items. */
.woocommerce-checkout .wc-block-components-sale-badge {
	display: none !important;
}
/* Groene besparingsrij tussen items en totalen (Tijn-mockup): zachte groene
   pill, label links + bedrag rechts, beide groen. */
.woocommerce-checkout .wt-savings-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin: 14px 0 22px; /* iets meer onder → ruimte boven de divider optisch gelijk aan onder (Tijn) */
	padding: 12px 16px;
	background: #e7f6e7;
	border: 1px solid #bfe3bf;
	border-radius: 10px;
}
.woocommerce-checkout .wt-savings-row__label {
	color: #1e7a3c;
	font-size: 14px;
	font-weight: 600;
}
.woocommerce-checkout .wt-savings-row__amount {
	color: #00871f;
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
/* Overzicht-rijen (Subtotaal/Bezorgen/BTW-uitsplitsing): labels rustig grijs,
   bedragen navy + tabular-nums — zoals winkelwagen .wt-cart-totals__row.
   (Groene "Gratis" wint via .wt-free-shipping !important hierboven.) */
.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__label {
	color: #64748b;
	font-weight: 500;
}
.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__value {
	color: #64748b; /* grijs, gelijk aan het label — zoals winkelwagen (incl.-totaal krijgt navy via de footer-regel) */
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
/* WC zet 16px padding-right op .totals-item → bedragen springen 16px in, terwijl
   het totaal (footer, padding 0) flush staat → scheve rechter-uitlijning. Overal
   weg → alle bedragen flush rechts, recht onder elkaar (= winkelwagen). */
.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item {
	padding-right: 0;
	padding-left: 0; /* WC zet padding-left:16px → flush met de titel + content-rand */
}
/* Coupon-veld op de checkout verbergen — de winkelwagen heeft de kortingscode
   al; een couponveld op het betaalmoment is een bekend conversie-lek (Tijn akkoord). */
.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
	display: none;
}
/* WC zet op ELKE totals-wrapper een 0.2-zwart lijntje + 16px padding → stapel
   rommelige dividers + groot gat boven de BTW-groep. Alles uit + compact, daarna
   bewust 2 dividers terug (zoals winkelwagen): ná de producten + boven de BTW-groep. */
.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper {
	border-top: none;
	padding-top: 5px; /* 5+5 = 10px tussen rijen, = winkelwagen .wt-cart-totals__rows gap */
	padding-bottom: 5px;
}
/* WC rendert altijd lege fee-/discount-wrappers (zonder rij) → die namen toch
   2×5px ruimte in → Subtotaal en Bezorgen stonden te ver uit elkaar. Lege
   wrappers (geen totals-item erin) inklappen naar 0. */
.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper:not(:has(.wc-block-components-totals-item)) {
	padding: 0;
}
/* BTW-uitsplitsing (JS-geïnjecteerd, = winkelwagen): "excl. BTW" + "BTW" als
   eigen rijen. Labels grijs / bedragen navy erven van de summary-rij-regels. */
.woocommerce-checkout .wt-vat-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-top: 10px; /* = winkelwagen breakdown-gap */
}
/* Scheidingslijn boven de uitsplitsings-groep. padding-top 17 zodat de ruimte
   ónder de lijn (tot de excl-tekst) gelijk is aan die erboven (~18px). */
.woocommerce-checkout .wt-vat-row--first {
	border-top: 1px solid #e1eaf2;
	padding-top: 17px;
	margin-top: 4px;
}
/* Totaal staat ná de uitsplitsing → eigen scheidingslijn vervalt (anders dubbel) */
.woocommerce-checkout .wc-block-components-totals-footer-item.wt-has-breakdown {
	border-top: none;
	padding-top: 0;
	margin-top: 10px;
}
/* Divider 1 — tussen de producten en de totalen. (Ancestor .summary-block erbij
   zodat deze regel de wrapper-reset hierboven verslaat: gelijke spec + later in bron.) */
.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-subtotal-block {
	border-top: 1px solid #e1eaf2;
	padding-top: 14px;
	margin-top: 8px;
}
/* Divider 2 (boven het Totaal) = de border-top op .wc-block-components-totals-footer-item. */
/* Productbeschrijving in het overzicht weg (overbodig) — NIET de
   __description-wrapper verbergen, want daar zit de productnaam in;
   alleen de short-description (__metadata__description). */
.woocommerce-checkout .wc-block-components-product-metadata__description {
	display: none !important;
}

/* Nieuwsbrief-label-rij: gecentreerd + 12px gap = consistent met de andere checkout-checkboxes
   (account/zakelijk/facturering); tooltip volgt dezelfde gap (margin-left 0). */
.woocommerce-checkout .wt-nl-label {
	align-items: center;
	gap: 12px;
	color: #2b3340; /* gelijk aan .wc-block-components-checkbox__label (was zwart) */
}
.woocommerce-checkout .wt-nl-label .wt-tooltip {
	margin-left: 0;
}
/* ── Info-tooltip (kanoniek, voor de nieuwsbrief-checkbox) ── */
.woocommerce-checkout .wt-tooltip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin: 0 0 0 6px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: help;
	color: #9ca3af;
	vertical-align: middle;
	transition: color .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.woocommerce-checkout .wt-tooltip:hover,
.woocommerce-checkout .wt-tooltip:focus-visible {
	color: #1e3a6d;
	outline: none;
}
.woocommerce-checkout .wt-tooltip svg {
	width: 16px;
	height: 16px;
	pointer-events: none;
}
.woocommerce-checkout .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;
}
.woocommerce-checkout .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);
}
.woocommerce-checkout .wt-tooltip:hover .wt-tooltip__bubble,
.woocommerce-checkout .wt-tooltip:focus-visible .wt-tooltip__bubble,
.woocommerce-checkout .wt-tooltip.is-active .wt-tooltip__bubble {
	opacity: 1;
	visibility: visible;
}


/* ============================================================
 * MyParcel delivery-options widget — in huisstijl (kleur, font, uitlijning, rust)
 * Gescoped op #myparcel-delivery-options. Functionaliteit (kaart staat uit via
 * plugin-setting; openingstijden, meer locaties) blijft intact; alleen styling
 * in lijn met de checkout.
 * FRAGIEL: overrides op MyParcel's prefixed-Tailwind `mp-*`-utilities -> bij een
 *   grote plugin-update visueel checken (classes kunnen wijzigen).
 * ============================================================ */
#myparcel-delivery-options { font-size: 14px; color: #1e2733; }

/* Sectie-koppen navy */
#myparcel-delivery-options b { color: #1e3a6d; font-size: 15px; font-weight: 600; }

/* Radio's navy i.p.v. browser-blauw */
#myparcel-delivery-options input[type="radio"] { accent-color: #1e3a6d; }

/* "DPD"-carrier-kop (icoon + titel) verbergen -- alleen DPD in gebruik. NB: bij
   een 2e vervoerder worden deze koppen weer betekenisvol -> dan terugzetten. */
#myparcel-delivery-options div.mp-pb-2:has(img[alt="DPD"]) { display: none; }

/* "Meest duurzaam"-eco-badge verbergen. Verplaatst uit de MyParcel-plugin
   (deliveryOptionsCustomCss-veld) -> hier gebundeld zodat alle MyParcel-CSS
   op een plek staat. NB: deze verborgen badge-rij laat nog wat ruimte boven de
   bezorgkaart -> dat wordt apart aangepakt. */
#myparcel-delivery-options .mp-text-green-700 { display: none; }

/* DPD-logo rechts op de bezorgoptie (zelfde effect als de betaalmethoden) */
#myparcel-delivery-options label.mp-py-1:has(input[type="radio"]:not(.mp-sr-only)):not(:has(.mp-flex-grow)):not(:has(b))::after {
	content: ""; margin-left: auto; width: 34px; height: 18px; flex: 0 0 auto;
	background: url("https://assets.myparcel.nl/skin/general-images/carrier-logos/svg/dpd.svg") no-repeat right center;
	background-size: contain;
}

/* Afhaalpunt-rij: naam navy/600, adres grijs, afstand grijs ONDER het adres */
#myparcel-delivery-options .mp-flex-grow > p:first-child { color: #1e3a6d; font-weight: 600; font-size: 14px; line-height: 1.3; }
#myparcel-delivery-options .mp-flex-grow > p.mp-opacity-60 { opacity: 1; color: #64748b; font-size: 13px; line-height: 1.3; }
#myparcel-delivery-options label.mp-py-1:has(.mp-flex-grow) { flex-wrap: wrap; row-gap: 0; }
#myparcel-delivery-options .mp-flex-grow + span {
	order: 99; flex-basis: 100%; margin: 2px 0 10px 28px;
	color: #64748b; font-weight: 400; font-size: 13px; white-space: nowrap;
}

/* Kaders rustig + openingstijden + vervoerderslogo */
#myparcel-delivery-options .mp-border { border-color: #e1eaf2 !important; }
#myparcel-delivery-options .mp-rounded-xl { border-radius: 10px; }
#myparcel-delivery-options img[alt="DPD"] { max-height: 18px; width: auto; }
#myparcel-delivery-options .mp-h-8.mp-w-8 { height: auto; width: auto; }
#myparcel-delivery-options table,
#myparcel-delivery-options dl { font-size: 13px; color: #475569; }

/* Chevron -> onze Lucide-chevron (dicht = rechts, open = omlaag), rustig grijs.
   MyParcel's eigen (gevulde) svg verbergen, onze als ::before erin. */
#myparcel-delivery-options label:has(b) span:has(> svg.mp-transition-transform) > svg.mp-transition-transform { display: none !important; }
#myparcel-delivery-options label:has(b) span:has(> svg.mp-transition-transform)::before {
	content: ""; display: block; width: 18px; height: 18px;
	background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat center / contain;
	transform: rotate(-90deg); transition: transform .2s;
}
#myparcel-delivery-options label:has(b):has(svg.mp-rotate-90) span:has(> svg.mp-transition-transform)::before { transform: rotate(0deg); }

/* "Toon meer locaties"-knop als nette navy-link (hover groen). */
#myparcel-delivery-options button.mp-text-gray-500 {
	color: #1e3a6d !important;
	font-weight: 500;
}
#myparcel-delivery-options button.mp-text-gray-500:hover {
	color: #008d00 !important;
}

/* "Toon meer locaties"-chevron: MyParcel gebruikt hier een tekst-teken (∨), niet
   de svg van de sectiekoppen -> vervangen door dezelfde Lucide-chevron (grijs),
   anders twee verschillende chevron-stijlen in de widget. */
#myparcel-delivery-options button.mp-text-gray-500 span.mp-not-sr-only {
	font-size: 0 !important;
	margin-left: 4px;
}
#myparcel-delivery-options button.mp-text-gray-500 span.mp-not-sr-only::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	position: relative;
	top: -3px;
	background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat center / contain;
}

/* ── Postcode.eu ──────────────────────────────────────────────────────────────
 * Verhuisd uit mu-plugins/wt-postcode-eu-nl.php (inline op de checkout) op 31-08-2026:
 * opmaak met huisstijlkleuren hoort in het thema. De elementen verschijnen pas met JS;
 * de RUCSS-safelist in die mu-plugin houdt deze regels daarom uit de unused-CSS-stripper. */
.postcode-eu-autofill-address{
	font-size:15px;font-style:normal;line-height:1.5;
	padding:14px 16px;margin-top:8px;
	background-color:#f6f9fc;border:1px solid #e1eaf2;border-radius:6px;
	color:#2b2d2f;
}
label[for*="postcode-eu-postcode"]::after,
label[for*="postcode-eu-house_number"]::after{
	content:" *";color:#d12d2d;
}
/* Adres-autocomplete-veld (BE/internationaal) volledige breedte in de flex-form,
   zodat Telefoonnummer eronder komt i.p.v. ernaast (voorkomt logo-overlap in smal veld). */
.wc-block-components-address-form .postcode-eu-autofill-container{
	flex:1 1 100% !important; max-width:100% !important; width:100% !important;
}
/* En het invoerveld ZELF de volle breedte van de container laten vullen
   (default input-breedte is ~206px door size=20, anders half veld). */
.postcode-eu-autofill-container .wc-block-components-text-input,
.postcode-eu-autofill-container .wc-block-components-text-input > input{
	width:100% !important; max-width:100% !important; flex:1 1 100% !important;
}
/* Postcode.eu-logo overal verbergen (keuze Tijn 2026-07-07). */
input.postcodenl-autocomplete-logo{ background-image:none !important; padding-right:12px !important; }
/* Mobiel: alle adres-formuliervelden volledige breedte (ook voor-/achternaam stapelen). */
@media (max-width:768px){
	.wc-block-components-address-form > *{ flex:1 1 100% !important; max-width:100% !important; width:100% !important; }
}
/* "Vul een adres in"-link in huisstijl (navy i.p.v. groen) */
.postcode-eu-autofill-intl-bypass,
.postcode-eu-autofill-intl-bypass *{ color:#1e3a6d !important; }
.postcode-eu-autofill-intl-bypass svg{ stroke:#1e3a6d !important; }


/* ==================== /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 | <productnaam>" 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 <p>; 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 <img> met een JPG-origineel in een <picture> 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,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231e3a6d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
	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/cart.css ==================== */
/**
 * Weltechniek — Winkelwagen (preview v1.0.0)
 *
 * Geladen alleen op cart-pagina én alleen als wt_show_new_cart() === true.
 * Templates: theme/woocommerce-preview/cart/{cart,cart-totals,cart-empty}.php
 *
 * Hergebruikt design-tokens van account.css (--wt-blue, --navy-*, --line-*,
 * --paper-*, --r-card, --r-btn, --ink-*). Account.css is altijd geladen
 * (via Shoptimizer scope? nope — even verifieren). Voor zekerheid herhalen
 * we de kern-tokens hier zodat cart-styling ook werkt zonder account.css. *
 * GEEN !important MEER. Er stonden er 84 in dit bestand, allemaal om Shoptimizer te overstemmen.
 * Dat thema is op 26-08-2026 uit de site gegaan, dus ze deden niets meer. Op 27-08 nagemeten: alle
 * berekende eigenschappen van elk element in de winkelwagen, in vier toestanden (gevuld met de
 * kortingscode open, en leeg, allebei op 1280px en 375px). 2.503 waarden, nul verschil. Weg.
 *
 * Zet er niet zomaar een terug. Als een regel het verliest, kijk eerst wie hem overstemt: dat is nu
 * bijna altijd een eigen regel die je kunt aanpassen, niet een thema waar je geen grip op had.
 */

/* ============================================================ */
/* TOKENS (subset, fallback als account.css niet geladen is)    */
/* ============================================================ */
.wt-cart-grid, .wt-cart-empty, .wt-coupon, .wt-share-modal, .wt-shared-prompt {
	--wt-blue:   #1E3A6D;
	--navy-50:   #eef2f9;
	--navy-100:  #e1eaf2;
	--navy-200:  #cdd9e8;
	--navy-700:  #2f4f8a;
	--navy-800:  #1E3A6D;

	--ink-900:   #0f172a;
	--ink-700:   #334155;
	--ink-500:   #64748b;
	--ink-300:   #b6c0d2;

	--line:      #e1eaf2;
	--line-2:    #eef2f9;
	--line-3:    #cbd5e1;

	--paper:     #ffffff;
	--paper-2:   #ffffff;

	--r-card:    8px;
	--r-btn:     6px;

	--green-600: #15803d;
}

/* ============================================================ */
/* CART TITLE — eigen H1, independent van Shoptimizer            */
/* (matched met entry-title look elders op de site)             */
/* ============================================================ */
.wt-cart-title {
	font-size: 30px;
	font-weight: 700;
	color: var(--wt-blue);
	line-height: 1.2;
	letter-spacing: 0;
	margin: 0 0 24px;
}

/* Verberg Shoptimizer's H1 (entry-title) op preview-pagina, anders dubbel.
   Alleen actief bij preview body class — echte klanten zien Shoptimizer's H1
   gewoon zoals normaal. */
body.wt-cart-pagina .entry-title,
body.wt-cart-pagina .entry-header {
	display: none;
}

/* Compact top-spacing tussen "Kies je categorie" navbar en H1 "Winkelwagen".
   Shoptimizer stapelt padding-top op .entry-content (50px) + main (20px) +
   wt-cart-sectie (~30px) → ~100px witruimte. Alle 3 op 0,
   de gewenste spacing zit dan in margin-top van de H1 zelf. */
body.wt-cart-pagina .entry-content,
body.wt-cart-pagina .wt-cart-sectie,
body.wt-cart-pagina main#main {
	padding-top: 0;
}

body.wt-cart-pagina .wt-cart-title {
	margin-top: 24px;
}

/* WC notices ("X verwijderd. Ongedaan maken?") plakken default tegen de
   header aan. Geef 'em ademruimte boven én onder, alleen op preview-cart. */
body.wt-cart-pagina .woocommerce-message,
body.wt-cart-pagina .woocommerce-info,
body.wt-cart-pagina .woocommerce-error,
body.wt-cart-pagina .woocommerce-notices-wrapper {
	margin-top: 28px;
	margin-bottom: 20px;
}

/* Als er meerdere notices na elkaar zitten, hoeven de volgende geen
   extra top-margin meer (alleen de eerste). */
body.wt-cart-pagina .woocommerce-message + .woocommerce-message,
body.wt-cart-pagina .woocommerce-message + .woocommerce-info,
body.wt-cart-pagina .woocommerce-info + .woocommerce-message,
body.wt-cart-pagina .woocommerce-info + .woocommerce-info {
	margin-top: 8px;
}

/* ============================================================ */
/* OVERRIDE Shoptimizer cart-form layout — kill float + width    */
/* (Shoptimizer geeft .woocommerce-cart-form { float:left; width:62% }
   waardoor onze grid maar 807px breed wordt op een 1301px container.) */
body.woocommerce-cart .woocommerce-cart-form {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
}
/* Plus: Shoptimizer's cart-collaterals (zou rechts naast form floaten) — wij
   renderen totals binnen onze grid, dus losse collaterals niet meer nodig */
body.woocommerce-cart .wt-cart-sectie > .cart-collaterals,
body.woocommerce-cart .wt-cart-sectie > .cross-sells {
	display: none;
}

/* ============================================================ */
/* LAYOUT — 2-kolom grid op desktop, stack op mobile            */
/* ============================================================ */
.wt-cart-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: start;
}

@media (min-width: 1200px) {
	.wt-cart-grid {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 24px;
	}
}

/* ============================================================ */
/* SECTION-WRAPPER (matched met .wt-section van account.css)    */
/* ============================================================ */
.wt-section {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	padding: 24px;
}

@media (max-width: 1199px) {
	.wt-section {
		padding: 18px 16px;
	}
}

/* ============================================================ */
/* CART TABLE — eigen layout, independent van Shoptimizer       */
/* ============================================================ */
/* Hide WC's default coupon-area + update-button die binnen .wt-cart-tbody
   verschijnen via woocommerce_after_cart_contents. Onze eigen Bijwerken-knop
   (.wt-cart-update) blijft zichtbaar via :not() exception. */
.wt-cart-form .actions,
.wt-cart-form input[name="apply_coupon"],
.wt-cart-form button[name="update_cart"]:not(.wt-cart-update) {
	display: none;
}

.wt-cart-table {
	width: 100%;
}

/* TABLE HEADER (kolomtitels) */
.wt-cart-thead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 110px 130px 110px 40px;
	gap: 16px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--line-2);
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-500);
}

.wt-cart-th--price,
.wt-cart-th--subtotal {
	text-align: right;
}

.wt-cart-th--qty {
	text-align: center;
}

/* TABLE BODY */
.wt-cart-tbody {
	display: flex;
	flex-direction: column;
}

/* ROW */
.wt-cart-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 110px 130px 110px 40px;
	gap: 16px;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--line-2);
}

.wt-cart-row:last-child {
	border-bottom: 0;
}

.wt-cart-cell {
	min-width: 0;
}

.wt-cart-cell--price,
.wt-cart-cell--subtotal {
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--ink-900);
	font-weight: 500;
	font-size: 14px;
}

.wt-cart-cell--qty {
	display: flex;
	justify-content: center;
}

.wt-cart-cell--remove {
	display: flex;
	justify-content: center;
}

/* PRODUCT cell (thumbnail + naam + sku) */
.wt-cart-product {
	display: flex;
	align-items: center; /* Titel/SKU vertikaal gecentreerd t.o.v. afbeelding */
	gap: 14px;
	min-width: 0;
}

.wt-cart-product__thumb {
	width: 72px;
	height: 72px;
	background: var(--navy-50);
	border-radius: var(--r-card);
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wt-cart-product__thumb a,
.wt-cart-product__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.wt-cart-product__thumb a {
	display: flex;
	align-items: center;
	justify-content: center;
}

.wt-cart-product__info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.wt-cart-product__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-900);
	text-decoration: none;
	line-height: 1.4;
}

.wt-cart-product__title:hover {
	color: var(--wt-blue);
}

.wt-cart-product__sku {
	font-size: 12px;
	color: var(--ink-500);
}

.wt-cart-product__meta {
	font-size: 12px;
	color: var(--ink-700);
}
.wt-cart-product__meta p { margin: 0; }

.wt-cart-product__backorder {
	font-size: 12px;
	color: #b45309;
	margin: 4px 0 0;
}

/* REMOVE button */
.wt-cart-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	color: var(--ink-500);
	background: transparent;
	text-decoration: none;
	transition: all 0.15s ease;
}

.wt-cart-remove:hover {
	background: #fef2f2;
	color: #b91c1c;
}

/* ============================================================ */
/* QUANTITY COMPONENT — eigen, geen Shoptimizer dependency       */
/* ============================================================ */
.wt-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--line);
	border-radius: var(--r-btn);
	background: #fff;
	overflow: hidden;
	height: 38px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wt-qty:focus-within {
	border-color: var(--wt-blue);
	box-shadow: 0 0 0 3px rgba(30, 58, 109, 0.12);
}

.wt-qty__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: var(--paper-2);
	color: var(--wt-blue);
	font-size: 18px;
	line-height: 1;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	margin: 0;
	transition: background 0.1s ease, color 0.1s ease;
	user-select: none;
	-webkit-appearance: none;
	appearance: none;
}

.wt-qty__btn:hover {
	background: var(--navy-100);
	color: var(--navy-700);
}

.wt-qty__btn:active {
	background: var(--navy-200);
}

.wt-qty__btn:focus-visible {
	outline: 2px solid var(--wt-blue);
	outline-offset: -2px;
}

.wt-qty__minus { border-right: 1px solid var(--line); }
.wt-qty__plus  { border-left: 1px solid var(--line); }

.wt-qty__input {
	width: 48px;
	height: 100%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: #fff;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-900);
	-moz-appearance: textfield;
	padding: 0;
	margin: 0;
	outline: none;
}

.wt-qty__input::-webkit-outer-spin-button,
.wt-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wt-qty__input:focus {
	outline: none;
	background: var(--navy-50);
}

/* ============================================================ */
/* MOBILE — herschreven layout (v1.1.38)                         */
/* ============================================================ */
/* Doel-layout per item:                                          */
/*   ┌──────────────────────────────────────────┐                 */
/*   │ [img]  Productnaam              [🗑]    │                 */
/*   │        Artikelnr.                        │                 */
/*   │                                          │                 */
/*   │ [- 2 +]                       € 17,50    │                 */
/*   └──────────────────────────────────────────┘                 */
/* Prijs/stuk op mobile verbergen — subtotaal is wat klant boeit.
   Breakpoint 1199 zodat tablet + klein-laptop ook deze layout krijgen
   (op 1024-1199 was de productnaam-cel te smal voor lange titels). */
@media (max-width: 1199px) {
	.wt-cart-thead {
		display: none;
	}

	.wt-cart-row {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"product remove"
			"qty     subtotal";
		gap: 14px 12px;
		padding: 18px 0;
		align-items: start;
	}

	.wt-cart-cell--product { grid-area: product; }
	.wt-cart-cell--remove  { grid-area: remove; justify-self: end; }
	.wt-cart-cell--qty     { grid-area: qty; justify-self: start; }
	.wt-cart-cell--subtotal{ grid-area: subtotal; justify-self: end; align-self: center; }

	/* Prijs per stuk — niet relevant op mobile (klant ziet 'em op PDP). */
	.wt-cart-cell--price {
		display: none;
	}

	/* Product-cell: thumb + info side-by-side */
	.wt-cart-product {
		display: flex;
		gap: 12px;
		align-items: flex-start;
	}

	.wt-cart-product__thumb {
		display: flex;
		width: 60px;
		height: 60px;
		flex-shrink: 0;
	}

	.wt-cart-product__info {
		flex: 1;
		min-width: 0;
	}

	.wt-cart-product__title {
		font-size: 14px;
		line-height: 1.35;
	}

	/* Subtotaal-rij: prominent, bold */
	.wt-cart-cell--subtotal {
		font-size: 15px;
		font-weight: 600;
		color: var(--ink-900);
	}

	/* Verberg de actions-row "Verder winkelen | Deel winkelwagen" labels niet,
	   alleen iets compacter laten stacken */
	.wt-cart-actions-row {
		gap: 14px;
	}
}

/* ============================================================ */
/* CART ACTIONS ROW (Verder winkelen + Deel winkelwagen)        */
/* ============================================================ */
.wt-cart-actions-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--line-2);
	flex-wrap: wrap;
}

.wt-cart-link,
.wt-cart-link:link,
.wt-cart-link:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wt-blue);
	background: transparent;
	border: 0;
	border-radius: var(--r-btn);
	padding: 8px 10px;
	margin: -8px -10px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.wt-cart-link:hover,
.wt-cart-link:focus-visible {
	color: var(--wt-blue);
	background: var(--navy-100);
	outline: none;
}

.wt-cart-link svg {
	flex-shrink: 0;
}

/* Rechter groep in actions-row: Bijwerken + Deel winkelwagen */
.wt-cart-actions-row__right {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* "Winkelwagen bijwerken" — no-JS fallback.
   Default zichtbaar; JS verbergt de knop via .wt-cart-form--auto omdat
   wijzigingen automatisch worden gesubmit (600ms debounce). */
.wt-cart-update {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	background: var(--wt-blue);
	border: 1px solid var(--wt-blue);
	border-radius: var(--r-btn);
	padding: 8px 14px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

/* (v1.1.39: .wt-cart-form--auto regel verwijderd. Bijwerken-knop zit nu
   alleen in <noscript> van cart.php, dus bestaat niet in JS-DOM → geen
   FOUC en geen verberg-trick meer nodig.) */

.wt-cart-update:hover,
.wt-cart-update:focus-visible {
	background: var(--navy-700);
	border-color: var(--navy-700);
	outline: none;
}

.wt-cart-update:active {
	transform: translateY(1px);
}

.wt-cart-update svg {
	flex-shrink: 0;
}

/* Subtle visuele feedback tijdens auto-update window: quantity-cellen iets
   minder opaque, hint dat er iets gaat gebeuren. */
.wt-cart-form--pending .wt-qty {
	transition: opacity 0.15s ease;
	opacity: 0.7;
}

/* Bij daadwerkelijke submit: form lock + dim alle controls. Browser-native
   loading bar bovenaan neemt verder visuele feedback over. */
.wt-cart-form--submitting {
	pointer-events: none;
	opacity: 0.65;
	transition: opacity 0.15s ease;
}

/* ============================================================ */
/* CART TOTALS (sidebar) — eigen accent-styling                 */
/* ============================================================ */
.wt-cart-totals-wrap {
	position: sticky;
	top: 20px;
}

/* Override wt-section default voor totals + shipping: navy-50 accent ipv wit */
.wt-cart-totals,
.wt-cart-shipping-card {
	background: var(--navy-50);
	border: 1px solid var(--navy-100);
}

/* Bezorgmethode-card boven het Overzicht — gap ertussen */
.wt-cart-shipping-card {
	margin-bottom: 16px;
}

@media (max-width: 1199px) {
	.wt-cart-totals-wrap {
		position: static;
	}
}

.wt-cart-totals__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--wt-blue);
	margin: 0 0 16px;
}

.wt-cart-totals__rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 16px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--navy-100);
}

/* ============================================================ */
/* SHIPPING COUNTRY — accordion (default dicht, klik om te openen) */
/* Pattern matched met .wt-coupon                                  */
/* ============================================================ */
.wt-country-toggle {
	margin: 0 0 12px;
	background: transparent;
	border: 0;
	padding: 0;
}

.wt-country-toggle__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px;
	margin: -8px -10px;
	border-radius: var(--r-btn);
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-500);
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.wt-country-toggle__summary:hover,
.wt-country-toggle__summary:focus-visible {
	background: var(--navy-100);
	color: var(--wt-blue);
	outline: none;
}

.wt-country-toggle__summary::-webkit-details-marker { display: none; }

.wt-country-toggle__summary strong {
	font-weight: 600;
	color: var(--ink-700); /* Subtle accent — niet pure zwart */
}

.wt-country-toggle__chevron {
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.wt-country-toggle[open] .wt-country-toggle__chevron {
	transform: rotate(180deg);
}

.wt-country-toggle__body {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}

.wt-country-toggle__label {
	font-size: 13px;
	color: var(--ink-700);
	white-space: nowrap;
}

.wt-country-toggle__select {
	flex: 1;
	min-width: 0;
	padding: 7px 30px 7px 10px;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-900);
	background: #fff;
	border: 1px solid var(--navy-200);
	border-radius: 6px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231E3A6D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.wt-country-toggle__select:hover {
	border-color: var(--wt-blue);
}

.wt-country-toggle__select:focus-visible {
	border-color: var(--wt-blue);
	outline: none;
	box-shadow: 0 0 0 3px rgba(30, 58, 109, 0.12);
}

/* ============================================================ */
/* SHIPPING METHOD — bezorgen / afhalen radio's                  */
/* ============================================================ */
.wt-cart-shipping {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Compact 1-rij layout: radio | (label + (!) inline) | prijs RECHTS.
   Warning krijgt grid-area op rij 2 als 'em er is.
   row-gap: 0 zodat lege warning-rij geen ruimte reserveert; warning krijgt
   zelf margin-top als 'ie wel zichtbaar is. */
.wt-ship-option {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "radio main price";
	align-items: center;
	column-gap: 10px;
	padding: 10px 12px;
	background: var(--paper-2); /* subtle tint — lichter dan card-bg, niet wit */
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}

/* Label + (i) inline, naast elkaar binnen één grid-cel.
   Uniform line-height met price zodat ze exact op zelfde hoogte lijnen. */
.wt-ship-option__main {
	grid-area: main;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	line-height: 1.3;
}

.wt-ship-option:hover {
	border-color: var(--line-3);
}

/* Geselecteerd: subtiele navy border (1px, geen inset shadow).
   Onderscheid komt vooral uit witte bg + filled radio-dot. */
.wt-ship-option.is-active {
	border-color: var(--wt-blue);
	background: #fff;
}

/* Hide native radio, gebruik onze eigen styled cirkel */
.wt-ship-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

.wt-ship-option__radio {
	grid-area: radio;
	display: inline-flex;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--navy-200);
	background: #fff;
	transition: border-color 0.12s ease, background 0.12s ease;
	position: relative;
}

.wt-ship-option.is-active .wt-ship-option__radio {
	border-color: var(--wt-blue);
}

.wt-ship-option.is-active .wt-ship-option__radio::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wt-blue);
}

.wt-ship-option__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-900);
	line-height: 1.3;
}

/* (i) info-icoon — eigen CSS-tooltip via data-tip + ::after.
   Native title heeft 1-2s delay; deze toont direct op hover/focus.
   Position relative voor de tooltip absolute child. */
.wt-ship-option__info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--ink-500);
	background: transparent;
	border: 0;
	cursor: help;
	border-radius: 50%;
	transition: color 0.12s ease, background 0.12s ease;
	flex-shrink: 0;
	position: relative;
}

.wt-ship-option__info:hover,
.wt-ship-option__info:focus-visible {
	color: var(--navy-700);
	background: var(--navy-100);
	outline: none;
}

/* Tooltip bubble — wit, light border, soft shadow.
   Matched met .wt-tooltip__bubble pattern uit account.css (newsletter-tooltip). */
.wt-ship-option__tooltip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	color: #4b5563;
	width: 240px;
	max-width: calc(100vw - 32px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.06);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	pointer-events: none;
	z-index: 100;
	text-align: left;
	white-space: normal;
}

/* Wit pijltje onderaan tooltip — driehoek met border-stroke voor de border-look. */
.wt-ship-option__tooltip::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #e5e7eb;
}

.wt-ship-option__tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: -1px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #fff;
}

.wt-ship-option__info:hover .wt-ship-option__tooltip,
.wt-ship-option__info:focus-visible .wt-ship-option__tooltip {
	opacity: 1;
	visibility: visible;
}

.wt-ship-option__price {
	grid-area: price;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ink-900);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wt-ship-option__free {
	color: #00bb00;
	font-weight: 500;
}

.wt-cart-totals__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: 14px;
	color: var(--ink-500); /* Mid-grey — secundaire info, rustig blok. Incl-rij krijgt eigen wt-blue. */
}

.wt-cart-totals__label {
	font-weight: 500;
}

.wt-cart-totals__value {
	font-variant-numeric: tabular-nums;
	color: var(--ink-500);
	font-weight: 500;
}

/* Coupon-row: label + code monospace-pill, value met bedrag + × */
.wt-cart-totals__row--coupon {
	align-items: center;
}

.wt-cart-totals__row--coupon .wt-cart-totals__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	min-width: 0;
}

.wt-cart-coupon__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	font-weight: 500;
	background: var(--paper-2);
	color: var(--ink-700);
	padding: 2px 7px;
	border-radius: 4px;
	word-break: break-all; /* lange codes wrappen netjes */
	letter-spacing: 0;
}

/* Kortingsbedrag in huisstijl-groen #00bb00 (zelfde groen als
   "Zakelijke klant" CTA en "Verder naar bestellen" knop). */
.wt-cart-totals__row--coupon .wt-cart-totals__value {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #00bb00;
	white-space: nowrap;
}

.wt-cart-totals__row--coupon .wt-cart-totals__value .woocommerce-Price-amount,
.wt-cart-totals__row--coupon .wt-cart-totals__value bdi {
	color: #00bb00;
}

/* WC's default "[Remove]"-link verbergen — wij hebben onze eigen × icoon */
.wt-cart-totals__row--coupon .woocommerce-remove-coupon,
.wt-cart-totals__row--coupon a[href*="remove_coupon"]:not(.wt-cart-coupon__remove) {
	display: none;
}

.wt-cart-coupon__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--navy-100);
	color: var(--navy-800);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background 0.12s ease, color 0.12s ease;
	flex-shrink: 0;
}

.wt-cart-coupon__remove:hover,
.wt-cart-coupon__remove:focus-visible {
	background: #fee2e2;
	color: #b91c1c;
	outline: none;
}

.wt-cart-totals__free {
	color: #00bb00;
	font-weight: 500;
}

/* BTW-breakdown blok: Totaalprijs excl. BTW + BTW + Totaalprijs incl. BTW.
   Border-top markeert het einde van het "wat je koopt" blok (subtotaal +
   verzending + evt. fees) en het begin van het "wat ga je betalen" blok. */
.wt-cart-totals__breakdown {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 12px;
	margin-top: 4px;
	border-top: 1px solid var(--navy-100);
}

/* Excl. BTW + BTW: zelfde styling als Subtotaal/Verzending (14px, ink-700/900).
   Class .wt-cart-totals__row--sub blijft voor markup-semantiek, geen extra style. */

/* Totaalprijs incl. BTW: dominant, navy accent, bold. Geen eigen border-top
   meer (zit op de wrapper .wt-cart-totals__breakdown). */
.wt-cart-totals__row--total {
	font-size: 16px;
	margin-top: 2px;
}

.wt-cart-totals__row--total .wt-cart-totals__label {
	font-weight: 700;
	color: var(--wt-blue);
}

.wt-cart-totals__row--total .wt-cart-totals__value {
	font-size: 18px;
	font-weight: 700;
	color: var(--wt-blue);
}

/* WC's "(inclusief X BTW)" tekst in totaal-rij verbergen — we hebben BTW
   al apart getoond als eigen rij, dus deze info is dubbel + breekt uitlijning.
   WC kan dit in <small> renderen met verschillende class-varianten. */
.wt-cart-totals__row--total small,
.wt-cart-totals__row--total .includes_tax,
.wt-cart-totals__row--total .woocommerce-Price-includes_tax {
	display: none;
}

/* ============================================================ */
/* COUPON — als link, geen button-look                          */
/* ============================================================ */
.wt-coupon {
	margin: 0 0 16px;
	background: transparent;
	border: 0;
	padding: 0;
}

.wt-coupon__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	padding: 8px 10px;
	margin: -8px -10px;
	border-radius: var(--r-btn);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-500);
	cursor: pointer;
	list-style: none;
	user-select: none;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.wt-coupon__summary:hover,
.wt-coupon__summary:focus-visible {
	background: var(--navy-100);
	color: var(--wt-blue);
	outline: none;
}

.wt-coupon__summary::-webkit-details-marker { display: none; }

.wt-coupon__chevron {
	transition: transform 0.2s ease;
}

.wt-coupon[open] .wt-coupon__chevron {
	transform: rotate(180deg);
}

.wt-coupon__form {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.wt-coupon__input {
	flex: 1;
	min-width: 0;
	padding: 9px 12px;
	font-size: 14px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-btn);
	color: var(--ink-900);
}

.wt-coupon__input:focus {
	border-color: var(--wt-blue);
	box-shadow: 0 0 0 3px rgba(30, 58, 109, 0.12);
	outline: none;
}

.wt-coupon__apply {
	flex-shrink: 0;
}

/* Shoptimizer geeft <button> elementen eigen hover-styling (groen bg) die
   onze .wt-btn-ghost hover overrult. Forceer ghost-hover op de Toepassen-
   knop specifiek. Cart-totals card heeft navy-50 als bg, dus hover moet
   donkerder zijn (navy-100) anders is 't onzichtbaar. */
button.wt-btn-ghost.wt-coupon__apply:hover,
button.wt-btn-ghost.wt-coupon__apply:focus-visible {
	background: var(--navy-100);
	border-color: var(--navy-200);
	color: var(--navy-800);
	outline: none;
}

/* ============================================================ */
/* CART ACTIONS (rechts onder totals)                           */
/* ============================================================ */
.wt-cart-totals__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* "Veilig betalen via" trust-strip onder de checkout-knop */
.wt-cart-payment-trust {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--navy-100);
	text-align: center;
}

.wt-cart-payment-trust__label {
	font-size: 12px;
	font-weight: 400;
	color: var(--ink-500); /* Consistent met rest van secundaire tekst */
	margin: 0 0 18px;
	text-transform: none;
	letter-spacing: 0;
}

/* Payment-method strip (single image): full-width binnen sidebar, behoud
   natuurlijke aspect-ratio (height schaalt automatisch mee). */
/* ============================================================ */
/* SHARED-CART CONFLICT-PROMPT (na ?shared=UUID restore)         */
/* ============================================================ */
.wt-shared-prompt {
	background: var(--navy-50);
	border: 1px solid var(--line);
	margin-bottom: 20px;
}

.wt-shared-prompt__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--wt-blue);
	margin: 0 0 8px;
}

.wt-shared-prompt__intro {
	font-size: 14px;
	color: var(--ink-700);
	margin: 0 0 14px;
	line-height: 1.5;
}

.wt-shared-prompt__items {
	list-style: none;
	padding: 12px 16px;
	margin: 0 0 18px;
	background: #fff;
	border: 1px solid var(--navy-100);
	border-radius: 8px;
	font-size: 13px;
}

.wt-shared-prompt__items li {
	padding: 4px 0;
	color: var(--ink-700);
}

.wt-shared-prompt__name {
	font-weight: 500;
	color: var(--ink-900);
}

.wt-shared-prompt__qty {
	color: var(--ink-500);
	margin-left: 4px;
}

.wt-shared-prompt__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* Alle 3 buttons binnen prompt-actions even groot (matched padding + font) */
.wt-shared-prompt__actions .wt-btn-primary,
.wt-shared-prompt__actions .wt-btn-ghost,
.wt-shared-prompt__cancel {
	padding: 11px 18px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	height: auto;
}

/* Ghost-hover binnen prompt: geen Shoptimizer-groen, juist navy-50 bg + navy text */
.wt-shared-prompt__actions button.wt-btn-ghost:hover,
.wt-shared-prompt__actions button.wt-btn-ghost:focus-visible {
	background: var(--navy-100);
	background-color: var(--navy-100);
	border-color: var(--navy-200);
	color: var(--navy-800);
}

.wt-shared-prompt__cancel {
	background: transparent;
	border: 1px solid transparent;
	color: var(--ink-500);
	cursor: pointer;
	transition: color 0.12s ease, background 0.12s ease;
}

.wt-shared-prompt__cancel:hover,
.wt-shared-prompt__cancel:focus-visible {
	background: transparent;
	color: var(--wt-blue);
	border-color: transparent;
	outline: none;
}

@media (max-width: 600px) {
	.wt-shared-prompt__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.wt-shared-prompt__actions .wt-btn-primary,
	.wt-shared-prompt__actions .wt-btn-ghost {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================================ */
/* SHARE-CART MODAL — backdrop + panel                          */
/* ============================================================ */
body.wt-modal-open {
	overflow: hidden;
}

.wt-share-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.wt-share-modal[hidden] {
	display: none;
}

.wt-share-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	cursor: pointer;
	animation: wt-modal-fade 0.18s ease;
}

@keyframes wt-modal-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.wt-share-modal__panel {
	position: relative;
	background: #fff;
	border-radius: 12px;
	padding: 28px;
	max-width: 460px;
	width: 100%;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	animation: wt-modal-pop 0.2s ease;
}

@keyframes wt-modal-pop {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Close-button — uniform met mega-menu mobile + recent-bekeken close.
   40x40 / radius 6px / transparant default + subtle hover-bg.
   Kleur-variant: donker (ink-500) ipv wit, omdat modal-bg licht is. */
.wt-share-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: var(--ink-500);
	cursor: pointer;
	padding: 0;
	font-family: inherit;
	box-shadow: none;
	transition: background 120ms ease, color 120ms ease;
}

.wt-share-modal__close:hover,
.wt-share-modal__close:active,
.wt-share-modal__close:focus-visible {
	background: rgba(0, 0, 0, 0.06);
	color: var(--wt-blue);
	outline: none;
}

.wt-share-modal__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--wt-blue);
	margin: 0 0 10px;
	padding-right: 36px; /* ruimte voor close-knop */
}

.wt-share-modal__intro {
	font-size: 13px;
	color: var(--ink-500);
	margin: 0 0 20px;
	line-height: 1.5;
}

/* Tabs binnen modal — pill-stijl (matched met account-nav pattern) */
.wt-share-tabs {
	display: flex;
	gap: 6px;
	padding: 4px;
	background: var(--paper-2);
	border-radius: 8px;
	margin: 0 0 22px;
}

.wt-share-tab {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 12px;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: var(--ink-700);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.wt-share-tab:hover {
	color: var(--wt-blue);
}

.wt-share-tab[aria-selected="true"] {
	background: #fff;
	color: var(--wt-blue);
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.wt-share-tab svg {
	flex-shrink: 0;
}

.wt-share-panel[hidden] {
	display: none;
}

.wt-share-panel__intro {
	font-size: 13px;
	color: var(--ink-500);
	margin: 0 0 14px;
	line-height: 1.5;
}

/* Form layout (email tab) */
.wt-share-form {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.wt-share-form .wt-share-modal__label {
	margin-top: 14px;
}

.wt-share-form .wt-share-modal__label:first-child {
	margin-top: 0;
}

.wt-share-form .wt-share-modal__input,
.wt-share-form .wt-share-modal__textarea {
	width: 100%;
	margin: 0;
}

/* Textarea krijgt .wt-form-input styling + extra: resize + min-height */
textarea.wt-form-input.wt-share-modal__textarea {
	resize: vertical;
	min-height: 80px;
	font-family: inherit;
	line-height: 1.5;
}

/* Alle primary buttons binnen share-modal = huisstijl-groen
   (matched met "Verder naar bestellen" CTA). */
.wt-share-modal .wt-btn-primary,
.wt-share-modal button.wt-btn-primary {
	background: #00bb00;
	background-color: #00bb00;
	border-color: #00bb00;
	color: #fff;
}

.wt-share-modal .wt-btn-primary:hover,
.wt-share-modal .wt-btn-primary:focus-visible,
.wt-share-modal button.wt-btn-primary:hover {
	background: #009900;
	background-color: #009900;
	border-color: #009900;
}

/* Email submit: extra spacing + full-width */
.wt-share-form__submit {
	width: 100%;
	justify-content: center;
	margin-top: 20px;
	gap: 8px;
	padding: 12px 16px;
	font-size: 14px;
}

.wt-share-form__submit svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.wt-share-modal__loading {
	padding: 24px 0;
	text-align: center;
	font-size: 14px;
	color: var(--ink-500);
}

.wt-share-modal__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-700);
	margin: 16px 0 8px;
}

.wt-share-modal__label:first-of-type {
	margin-top: 0;
}

.wt-share-modal__row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

/* .wt-form-input styling — gekopieerd uit account.css zodat de modal-form
   visueel identiek voelt aan Mijn-account adres-formulieren. account.css
   wordt niet op de cart-pagina geladen, dus hier gerepliceerd (scoped op modal). */
.wt-share-modal .wt-form-input {
	display: block;
	width: 100%;
	font: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: #111827;
	background: var(--navy-50);
	border: 1px solid var(--line);
	border-radius: 5px;
	padding: 11px 14px;
	box-shadow: none;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.wt-share-modal .wt-form-input:hover {
	border-color: var(--line-3);
}

.wt-share-modal .wt-form-input:focus,
.wt-share-modal .wt-form-input:focus-visible {
	border-color: var(--wt-blue);
	box-shadow: 0 0 0 3px rgba(30, 58, 109, 0.12);
	outline: none;
}

.wt-share-modal .wt-form-input::placeholder {
	color: #9ca3af;
}

/* Chrome autofill-bescherming — anders krijgt input lichtblauwe bg */
.wt-share-modal .wt-form-input:-webkit-autofill,
.wt-share-modal .wt-form-input:-webkit-autofill:hover,
.wt-share-modal .wt-form-input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--navy-50) inset;
	box-shadow: 0 0 0 1000px var(--navy-50) inset;
	-webkit-text-fill-color: #111827;
}

/* URL-input naast Kopieer-knop: flex:1 zodat 'em de overgebleven ruimte vult */
.wt-share-modal__input {
	flex: 1;
	min-width: 0;
}

/* Readonly URL-input: subtiel verschil — paper-2 ipv navy-50 */
.wt-share-modal .wt-form-input[readonly] {
	background: var(--paper-2);
	color: var(--ink-700);
	cursor: text;
}

.wt-share-modal__row .wt-btn-primary,
.wt-share-modal__row .wt-btn-ghost {
	flex-shrink: 0;
	font-size: 13px;
	padding: 9px 16px;
}

.wt-share-modal__message {
	margin: 14px 0 0;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.4;
}

.wt-share-modal__message[data-type="success"] {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #15803d;
}

.wt-share-modal__message[data-type="error"] {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
}

@media (max-width: 600px) {
	.wt-share-modal__panel {
		padding: 22px 20px;
	}
	.wt-share-modal__row {
		flex-direction: column;
	}
	.wt-share-modal__row .wt-btn-primary,
	.wt-share-modal__row .wt-btn-ghost {
		width: 100%;
		justify-content: center;
	}
}

.wt-cart-payment-trust img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.wt-btn--full {
	width: 100%;
	justify-content: center;
}

/* Checkout-knop: groen ipv navy (CTA accent, matched met "Zakelijke klant"
   en "Inschrijven" knoppen elders op de site). Specificity-boost via beide
   classes om .wt-btn-primary:link te overrulen. */
.wt-btn-primary.wt-cart-checkout,
.wt-btn-primary.wt-cart-checkout:link,
.wt-btn-primary.wt-cart-checkout:visited {
	background: #00bb00;
	background-color: #00bb00;
	font-size: 15px;
	padding: 13px 18px;
}

.wt-btn-primary.wt-cart-checkout:hover,
.wt-btn-primary.wt-cart-checkout:focus-visible {
	background: #009900;
	background-color: #009900;
}

/* ============================================================ */
/* BUTTONS (matched met account.css patronen — herhaal)         */
/* ============================================================ */
.wt-btn-primary,
.wt-btn-primary:link,
.wt-btn-primary:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 11px 18px;
	border: 0;
	border-radius: var(--r-btn);
	background: var(--navy-800);
	background-color: var(--navy-800);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.wt-btn-primary:hover,
.wt-btn-primary:focus-visible {
	background: var(--navy-700);
	background-color: var(--navy-700);
	outline: none;
}

.wt-btn-primary svg {
	width: 14px;
	height: 14px;
}

.wt-btn-ghost,
.wt-btn-ghost:link,
.wt-btn-ghost:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 14px;
	background: transparent;
	color: var(--navy-800);
	border: 1px solid var(--line-3);
	border-radius: var(--r-btn);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.wt-btn-ghost:hover,
.wt-btn-ghost:focus-visible {
	background: var(--navy-50);
	border-color: var(--navy-200);
	outline: none;
}

.wt-btn-ghost svg {
	width: 14px;
	height: 14px;
}

/* ============================================================ */
/* EMPTY STATE                                                  */
/* ============================================================ */
.wt-cart-empty {
	text-align: center;
	padding: 48px 24px;
}

.wt-cart-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: var(--navy-50);
	color: var(--wt-blue);
	border-radius: 50%;
	margin: 0 0 16px;
}

.wt-cart-empty__icon svg {
	width: 28px;
	height: 28px;
}

.wt-cart-empty__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--ink-900);
	margin: 0 0 6px;
}

.wt-cart-empty__body {
	font-size: 14px;
	color: var(--ink-700);
	margin: 0 0 20px;
	line-height: 1.5;
}

/* ============================================================ */
/* SCREEN READER                                                */
/* ============================================================ */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* ─── Vaak samen gekocht (cross-sells, eigen kaartenrij; 2026-08-21) ───
 * Horizontale schuif-rij, zelfde patroon als de PDP-kaartenrijen (zie pdp.css,
 * sectie KAARTENRIJEN): grid-auto-flow column + scroll-snap, :has() in de selector
 * om te winnen van ul.products:has(.wt-card) in product-card.css. */
.wt-cart-crosssells {
	margin: 40px 0 8px;
}
.wt-cart-crosssells__title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 16px;
}
.wt-cart-crosssells ul.products:has(.wt-card) {
	display: grid;
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 4 * 16px) / 5);
	gap: 16px;
	margin: 0;
	padding: 4px 0 14px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--wt-border-input) transparent;
}
.wt-cart-crosssells ul.products:has(.wt-card) > li { scroll-snap-align: start; margin: 0; width: auto; }
.wt-cart-crosssells ul.products:has(.wt-card)::-webkit-scrollbar { height: 8px; }
.wt-cart-crosssells ul.products:has(.wt-card)::-webkit-scrollbar-track { background: transparent; }
.wt-cart-crosssells ul.products:has(.wt-card)::-webkit-scrollbar-thumb {
	background: var(--wt-border-input); border-radius: 4px;
}
.wt-cart-crosssells ul.products:has(.wt-card)::-webkit-scrollbar-thumb:hover { background: var(--wt-muted); }
@media (max-width: 1024px) {
	.wt-cart-crosssells ul.products:has(.wt-card) { grid-auto-columns: calc((100% - 2 * 14px) / 3); gap: 14px; }
}
@media (max-width: 700px) {
	.wt-cart-crosssells ul.products:has(.wt-card) { grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; }
}
@media (max-width: 480px) {
	/* 1,15 kaart in beeld: de rand van de tweede laat zien dat er meer volgt. */
	.wt-cart-crosssells ul.products:has(.wt-card) { grid-auto-columns: 76%; gap: 12px; }
}

/* Verzendklasse-notice onder de productnaam (uit inc/shipping.php; tot 31-08-2026 inline in wp_head).
   Kleuren bewust als losse hexcodes gelaten, identiek aan de oude inline-variant; de tokenronde is
   een aparte klus (UX-lijst, kleurenbesluit). */
.wel-shipping-notice {
	margin-top: 6px;
	max-width: 420px;
	font-size: 12px;
	line-height: 1.45;
	color: #4b5563; /* ink-700, consistent met cart-meta tekst */
}
.wel-shipping-notice strong {
	color: #1E3A6D; /* huisstijl-navy */
	font-weight: 600;
}
@media (max-width: 1023px) {
	.wel-shipping-notice { margin-bottom: 6px; }
}


/* ==================== /css/zijbalk-filters.css ==================== */
/*
 * Filters in de zijbalk van het productarchief.
 *
 * De actieve-filter-chips, de lijstjes met aantallen en de vinkjes. Het uiterlijk van de filterLADE
 * (de knop en het paneel op mobiel) staat NIET hier maar in `filter-flyout.css`; dat is op 13-05-2026
 * gesplitst omdat het twee verschillende dingen zijn: dit is de inhoud, dat is de verpakking.
 *
 * Was onderdeel van style.css tot 28-08-2026.
 */

/* === 2. SIDEBAR FILTERS                                    === */
/* ============================================================ */

/*** Active filters ***/
.widget_layered_nav_filters .chosen a {
  align-items: center;
  color: inherit !important;
  display: flex;
}

.widget_layered_nav_filters .chosen a::before {
    background: #1e3a6d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' fill='%23FFFFFF' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E") no-repeat center center;
    background-size: 9px;
    border: 1px solid #1e3a6d;
    border-radius: 2px;
    content: "";
    display: flex;
    flex-shrink: 0;
    height: 12px;
    width: 12px;
    margin-right: 8px;
    margin-top: 0px;
}

/*** Widget container ***/
.woocommerce-widget-layered-nav .show-more {
  cursor: pointer;
  color: #1e3a6d;
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: 500;
}

/*** Not selected ***/
li.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term a {
  color: inherit !important;
  display: flex;
}

.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term a::before {
  border: 1px solid #E2E2E2;
  border-radius: 2px;
  content: "";
  display: flex;
  float: left;
  height: 12px;
  margin-right: 8px;
  margin-top: 4px;
  max-width: 12px;
  min-width: 12px;
  width: 12px;
}

@media all and (min-width: 768px) {
  .woocommerce-widget-layered-nav-list__item.wc-layered-nav-term a:hover::before {
    background: #1e3a6d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' fill='%23FFFFFF' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E");
    border-color: #1e3a6d;
  }
}

/*** Selected ***/
.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term.chosen a::before {
  background: #1e3a6d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' fill='%23FFFFFF' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E");
  background-size: 9px;
  background-position: center center;
  background-repeat: no-repeat;
  border-color: #1e3a6d;
}

/* Remove icon in li nav */
.widget_layered_nav ul li {
	padding-left: 0px;
}
.widget_layered_nav ul li:before {
	content: none;
}

/* Filter UX styling is verhuisd naar /css/filter-flyout.css (2026-05-13) */


/* ==================== /css/merkenpagina.css ==================== */
/*
 * De merkenoverzichtspagina: het alfabet-navigatiebalkje en het raster met logo's.
 *
 * Alleen de overzichtspagina /merken/. Een losse merkpagina (/merk/<naam>/) is een gewoon
 * productarchief en gebruikt `plp.css`.
 *
 * Was onderdeel van style.css tot 28-08-2026.
 */

/* === 13. MERKENPAGINA                                      === */
/* ============================================================ */

.brand-grid-wrapper {
  margin: 0 auto;
}
.brand-nav {
  text-align: left;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.brand-nav a {
  display: inline-block;
  margin: 4px 4px 4px 0;
  padding: 8px 12px;
  background: #f7f8fa;
  color: #1e3a6d;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s ease;
}
.brand-nav a:hover {
  background: #1a325e;
  color: #fff;
}
.brand-grid-wrapper h2 {
  font-size: 25px;
  padding-bottom: 6px;
  margin-top: 50px;
  margin-bottom: 10px;
  text-transform: uppercase;
  color: #1a325e;
}
.brand-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
  justify-content: flex-start;
}
a.brand-item {
  display: block;
  flex: 0 0 calc(20% - 20px);
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  text-align: center;
  padding: 25px 15px;
  transition: box-shadow 0.2s ease;
  text-decoration: none;
  min-height: 160px;
}
a.brand-item:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.brand-thumb {
  aspect-ratio: 8 / 3;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
}
.brand-thumb img {
  width: 100% !important;
  height: auto !important;
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  display: block;
}
.brand-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin: 0;
}
@media (max-width: 1024px) {
  a.brand-item {
    flex: 0 0 calc(33.333% - 20px);
  }
}
@media (max-width: 600px) {
  a.brand-item {
    flex: 0 0 calc(50% - 20px);
  }
}


/* ==================== /css/keuzehulp-banner.css ==================== */
/*
 * De keuzehulp-banner: het blok "Niet zeker welke ... je nodig hebt?" op categorie- en
 * productpagina's.
 *
 * ⚠️ Niet te verwarren met `keuzehulp.css`, dat is de opmaak van de keuzehulp-pagina's zelf. Deze
 * banner verwijst er alleen naar.
 *
 * Was onderdeel van style.css tot 28-08-2026.
 */

/* === 15. KEUZEHULPEN                                       === */
/* ============================================================ */
/* Banner bovenaan categoriepagina (link naar de keuzehulp-pagina) */
.wel-keuzehulp-banner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 18px 0 28px;
	padding: 18px 22px;
	background: #1e3a6d;
	border-radius: 5px;
	color: #fff;
	text-decoration: none !important;
	transition: background .15s ease;
}
.wel-keuzehulp-banner:hover,
.wel-keuzehulp-banner:focus-visible {
	background: #14284f;
	color: #fff;
	text-decoration: none !important;
}
/* Sterretje voor de knoptekst (Lucide sparkles uit inc/icons.php). De set levert SVG's van 24px;
 * hier 18px, gelijk aan het winkelwagen-icoon op de koopknoppen. `flex:none` zodat het nooit
 * meekrimpt als de knoptekst lang is. */
.wel-keuzehulp-banner__icoon {
	flex: none;
	display: inline-flex;
	align-items: center;
}
/* 16px: naast tekst van 14,5px is 18px net te veel — dan leest het sterretje als het onderwerp en de
 * tekst als bijschrift. De ruimte ernaast komt van de `gap` op de knop, niet van een marge hier. */
.wel-keuzehulp-banner__icoon svg {
	display: block;
	width: 16px;
	height: 16px;
	stroke-width: 1.9;
}

.wel-keuzehulp-banner__text {
	flex: 1 1 auto;
	min-width: 0;
}
.wel-keuzehulp-banner__title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}
.wel-keuzehulp-banner__subtitle {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #ffffffcc;
}
/* Wit met navy tekst, niet groen (ontwerp).
 *
 * Groen is op deze site de kleur van de koopactie: "In winkelwagen" op de productpagina, op elke
 * kaart en in de zwevende balk. De keuzehulp is geen koopactie maar hulp bij twijfel, en een groene
 * knop zet die twee naast elkaar alsof ze hetzelfde gewicht hebben. Op de productpagina zouden er
 * bovendien vijf groene dingen tegelijk staan — vinkjes, levertijd, koopknop, zwevende balk én deze
 * knop — en dan zegt groen niets meer.
 *
 * Wit werkt hier ook zonder tweede kleur: de band is al navy, dus een wit vlak springt er vanzelf
 * uit. Bij hover keert hij om naar een lege knop met witte rand, zoals het ontwerp.
 *
 * `inline-flex` is nodig voor het sterretje: als blok-span staat dat niet op de tekstregel maar
 * eroverheen. Met `align-items: center` en een gap staat het altijd netjes naast de tekst. */
.wel-keuzehulp-banner__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 20px;
	background: #fff;
	border: 1.5px solid #fff;
	border-radius: 8px;
	font-size: 14.5px;
	font-weight: 800;
	line-height: 1;
	color: #1e3a6d;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
.wel-keuzehulp-banner:hover .wel-keuzehulp-banner__cta,
.wel-keuzehulp-banner:focus-visible .wel-keuzehulp-banner__cta {
	background: transparent;
	color: #fff;
}
/* Mobiel & tablet */
@media (max-width: 1023px) {
	.wel-keuzehulp-banner {
		flex-wrap: wrap;
		margin: 18px 0 32px;
		padding: 16px 18px;
		gap: 12px;
	}
	.wel-keuzehulp-banner__title {
		font-size: 15px;
	}
	.wel-keuzehulp-banner__subtitle {
		font-size: 13px;
	}
	.wel-keuzehulp-banner__cta {
		width: 100%;
		text-align: center;
	}
}
/* Modifier voor de banner op productpagina's. Twee dingen specifiek voor
   de productcontext:
   1) `max-width: 1301px` matcht de echte content-breedte (H2 "Anderen
      bekeken ook" en de tabs zitten op 1301px). De hook
      `woocommerce_after_single_product_summary` plaatst 'm in een
      full-width `.related-wrapper` (1512px); zonder constraint zou 'ie
      edge-to-edge gaan.
   2) `margin-top: 0` voorkomt margin-collapse-through: de standaard
      18px top-margin van de banner bubbelt anders door de `<section>`
      heen en maakt een grijze gap zichtbaar (col-full's `#F7F8FA` bg
      tussen de tabs-wrapper en de related-wrapper). */
.wel-keuzehulp-banner--product {
	max-width: 1301px;
	margin: 0 auto 28px;
}


/* ==================== /css/faq-accordeon.css ==================== */
/*
 * Uitklapblokken op inhoudspagina's, gebouwd op het native `<details>`-element.
 *
 * Geen JavaScript: openen en sluiten doet de browser zelf. Dat is de reden dat de oude
 * `.faq-question`/`.faq-answer`-opmaak op 28-08-2026 kon vervallen; die had wel een script nodig.
 * Het grootste onderdeel van wat ooit `style.css` was.
 *
 * Was onderdeel van style.css tot 28-08-2026.
 */

/* === 16. FAQ-ACCORDEON (native <details>, geen JS)         === */
/* Vervangt de oude Elementor toggle-widget op klantenservice- */
/* pages (Bestellen/Contact/Retourneren). Native, geen JS.     */
/* ============================================================ */
.wp-block-details {
	border: 1px solid #e1eaf2;
	border-radius: 8px;
	margin: 0 0 12px;
	background: #fff;
	overflow: hidden;
}
.wp-block-details > summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 48px 16px 18px;
	position: relative;
	font-size: 17px;
	font-weight: 700;
	color: #1e3a6d;
	background: #f7f8fa;
	transition: background-color .15s ease;
	user-select: none;
}
.wp-block-details > summary:hover,
.wp-block-details > summary:focus-visible {
	background: #eef2f9;
	outline: none;
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
/* +/- indicator rechts */
.wp-block-details > summary::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -6px;
	border-right: 2px solid #1e3a6d;
	border-bottom: 2px solid #1e3a6d;
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.wp-block-details[open] > summary::after {
	transform: rotate(-135deg);
}
.wp-block-details[open] > summary {
	border-bottom: 1px solid #e1eaf2;
}
/* Content-padding (alles behalve de summary) */
.wp-block-details > :not(summary) {
	padding-left: 18px;
	padding-right: 18px;
}
.wp-block-details > :not(summary):first-of-type { padding-top: 16px; }
.wp-block-details > :not(summary):last-child { padding-bottom: 18px; }
@media (prefers-reduced-motion: reduce) {
	.wp-block-details > summary::after { transition: none; }
}

/* Fix: ruimte onder laatste accordion-item vóór de footer */
.entry-content > .wp-block-details:last-child { margin-bottom: 48px; }

/* Fix: formulier ín een accordion-item heeft geen eigen card-styling nodig
   (de accordion levert al border + padding) */
.wp-block-details .wt-form {
	border: 0;
	box-shadow: none;
	margin: 0;
	max-width: none;
	background: transparent;
	/* Lijn het formulier uit met de tekst in het accordion-item (18px),
	   alleen de card-styling (border/shadow/bg) is weg. */
	padding: 4px 18px 12px;
}

/* ============================================================ */
/* === Klantenservice-hub (overzichtspagina 1002)          === */
/* ============================================================ */
.wt-ks-hub {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 8px 0 48px;
}
.wt-ks-hub > * { max-width: none; margin-block: 0; }
.wt-ks-hub__card {
	border: 1px solid #e1eaf2;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}
.wt-ks-hub__card > .wp-block-heading {
	background: #f7f8fa;
	margin: 0;
	padding: 15px 18px;
	font-size: 18px;
	font-weight: 700;
	color: #1e3a6d;
	border-bottom: 1px solid #e1eaf2;
}
.wt-ks-hub__card ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wt-ks-hub__card li {
	margin: 0;
	border-bottom: 1px solid #eef2f9;
}
.wt-ks-hub__card li:last-child { border-bottom: 0; }
.wt-ks-hub__card li a {
	display: block;
	padding: 11px 18px;
	color: #2c3e50;
	text-decoration: none;
	font-size: 15px;
	transition: background-color .12s ease, color .12s ease;
}
.wt-ks-hub__card li a:hover,
.wt-ks-hub__card li a:focus-visible {
	background: #f7f8fa;
	color: #1e3a6d;
}
@media (max-width: 1024px) { .wt-ks-hub { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .wt-ks-hub { grid-template-columns: 1fr; } }
/* Deeplink-doelen (accordion-items) niet onder de sticky header */
.wp-block-details[id] { scroll-margin-top: 100px; }


/* ===== Content-pages (Elementor-vrij, fullwidth-template) — 2026-06-04 ===== */
/* Ruimte boven de footer (geldt ook voor klantenservice-pages) */
.page-template-template-fullwidth .site-main{padding-bottom:40px}
/* Juridische pages (AV 33761, Disclaimer 69363): navy koppen + kop-spacing */
.page-id-33761 .entry-content h3,
.page-id-69363 .entry-content h3{color:#1e3a6d;margin-top:1.8em;margin-bottom:.5em}
/* laatste content-element: eigen marge weg, zodat de footer-ruimte overal gelijk is (alleen de site-main padding telt) */
.page-template-template-fullwidth .entry-content>*:last-child{margin-bottom:0}






/* ===== Over ons (69226) — Elementor-vrij 2026-06-05 ===== */
/* Belofte-blok in huisstijl (navy-tint i.p.v. oude Bootstrap-alert) */
.wt-belofte{background:#eef2f9;border-left:4px solid #1e3a6d;padding:24px 28px;margin:40px 0;border-radius:6px}
.wt-belofte h3{color:#1e3a6d;margin:0 0 8px}
.wt-belofte p:last-child{margin-bottom:0}
/* Team zig-zag */
.wt-team-lid{padding:60px 0;border-top:1px solid #eee;margin:0}
.wt-team-lid:first-of-type{border-top:0;padding-top:10px}
.wt-team-lid:last-of-type{padding-bottom:0}
.wt-team-lid .wp-block-media-text__media img{border-radius:50%;max-width:170px;width:100%;height:auto;display:block;margin:0 auto}
.wt-team-naam{display:inline-block;background:#1e3a6d;color:#fff;font-weight:600;padding:8px 16px;border-radius:4px;margin:0 0 12px}
.wt-team-lid h3{color:#1e3a6d;margin:0 0 10px}
/* tekst uitlijnen met wrapper-rand (WP media-text 8% padding overrulen), gap naar foto behouden */
.wt-team-lid .wp-block-media-text__content{padding:0 0 0 40px}
.wt-team-lid.has-media-on-the-right .wp-block-media-text__content{padding:0 40px 0 0}
/* mobiel (gestapeld): tekst links uitlijnen, foto links + ruimte tot de naam */
@media (max-width:600px){
.wt-team-lid .wp-block-media-text__content,.wt-team-lid.has-media-on-the-right .wp-block-media-text__content{padding:0}
.wt-team-lid .wp-block-media-text__media img{margin:0 0 18px}
}

/* ===== Zakelijke klant worden (49556) — Elementor-vrij 2026-06-05 ===== */
/* Hero-knoppen */
.wt-zk-hero-btns{margin:18px 0 8px;gap:10px 18px;align-items:center}
.wt-zk-btn-primary .wp-block-button__link{color:#fff;font-weight:700;padding:13px 26px;border-radius:5px}
.wt-zk-btn-ghost .wp-block-button__link{background:transparent;color:#00bb00;font-weight:600;padding:13px 8px}
.wt-zk-btn-ghost .wp-block-button__link:hover{color:#008d00;text-decoration:underline}

/* 2-koloms: gap + sidebar bovenaan uitlijnen */
.wt-zk-cols{gap:48px;align-items:flex-start}
@media(max-width:781px){.wt-zk-cols{gap:40px}}

/* 3 stappen */
.wt-zk-steps{margin:0 0 28px}
.wt-zk-step{display:flex;gap:14px;align-items:flex-start;margin:0 0 18px}
.wt-zk-step__num{flex:0 0 auto;width:28px;height:28px;line-height:28px;text-align:center;border-radius:50%;background:#00bb00;color:#fff;font-weight:700;font-size:14px}
.wt-zk-step__body h3{margin:2px 0 4px;font-size:17px;color:#1e3a6d}
.wt-zk-step__body p{margin:0;color:#4a5868}

/* Mike-blok (card) */
.wt-zk-mike{display:flex;gap:20px;align-items:flex-start;background:#f7f8fa;border:1px solid #e1eaf2;border-radius:10px;padding:22px;margin:8px 0 36px}
.wt-zk-mike__img{flex:0 0 auto;width:96px;height:96px;border-radius:50%;object-fit:cover}
.wt-zk-mike__text h3{margin:0 0 8px;color:#1e3a6d;font-size:17px}
.wt-zk-mike__text p{margin:0 0 10px;color:#4a5868}
.wt-zk-mike__text p:last-child{margin-bottom:0}
@media(max-width:480px){.wt-zk-mike{flex-direction:column;align-items:center;text-align:center}}

/* Voordelen-sidebar (card) */
.wt-zk-voordelen{background:#f7f8fa;border:1px solid #e1eaf2;border-radius:10px;padding:24px 26px;scroll-margin-top:100px}
.wt-zk-voordelen > h2:first-child{margin-top:0;color:#1e3a6d}
.wt-zk-usps{list-style:none;margin:18px 0 0;padding:0}
.wt-zk-usps li{display:flex;gap:11px;align-items:flex-start;margin:0 0 16px;line-height:1.45}
.wt-zk-usps li:last-child{margin-bottom:0}
.wt-zk-usp__icon{flex:0 0 auto;margin-top:1px}
.wt-zk-usps strong{color:#1e3a6d}
.wt-zk-reviews{margin-top:22px;padding-top:20px;border-top:1px solid #e1eaf2}

/* ZK fijnafstelling 5 juni */
.wt-zk-cols .wt-form{max-width:none}                                  /* form vult de kolom (lijnt uit met rest) */
.wt-zk-cols .wp-block-column:first-child > h2:first-of-type{margin-top:36px;margin-bottom:24px}  /* lucht rond "3 stappen" */

/* ZK fijnafstelling 2 (5 juni) */
/* 1. Intro net zo breed als de linkerkolom (62% van columns minus gap) op desktop */
@media(min-width:782px){
.page-id-49556 .entry-content > p:first-of-type{max-width:calc((100% - 48px) * 0.62)}
}
/* 3. Koppen in hoofdkolom: genoeg ruimte onder de titel (niet op de tekst plakken) */
.wt-zk-cols .wp-block-column:first-child > h2{margin-bottom:24px}

/* ZK fijnafstelling 3 (5 juni) */
.wt-zk-btn-primary .wp-block-button__link{transition:background-color .15s ease}
.wt-zk-btn-primary .wp-block-button__link:hover,.wt-zk-btn-primary .wp-block-button__link:focus-visible{background-color:#008d00 !important}


/* ==================== /css/artikeltabellen.css ==================== */
/*
 * Tabellen in blogartikelen.
 *
 * Inclusief de mobiele weergave, waarbij elke cel zijn kolomnaam ervoor krijgt via
 * `td[data-label]::before`. Vandaar dat die regel er alleen uitziet alsof hij ongebruikt is: hij werkt
 * alleen op smalle schermen.
 *
 * Was onderdeel van style.css tot 28-08-2026.
 */

/* === 17. TABELLEN IN ARTIKELEN                             === */
/* Globale opmaak voor <table> binnen een blogbericht.         */
/*                                                             */
/* Vervangt de losse <style>-blokken die eerder per bericht in */
/* de tekst stonden. Die gebruikten kale selectors (table, th, */
/* td) en raakten daardoor ELKE tabel op de pagina, inclusief  */
/* het lettertype (Arial). Bewust gescoped op                  */
/* `.wt-single__content` (alleen single.php) en niet op        */
/* `.entry-content`: dat laatste staat ook op product- en      */
/* klantenservicepagina's, waar WooCommerce z'n eigen tabellen */
/* heeft.                                                      */
/*                                                             */
/* Mobiel (<=768px): elke rij wordt een kaartje. Het kolomkopje*/
/* komt uit `data-label` op de cel, dus elke <td> hoort die te */
/* hebben. Ontbreekt hij, dan valt alleen het label weg en     */
/* blijft de waarde gewoon leesbaar.                           */
/* ============================================================ */
.wt-single__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 28px;
	background: #fff;
	font-size: 15.5px;
	line-height: 1.5;
}
.wt-single__content table th,
.wt-single__content table td {
	padding: 11px 14px;
	border: 1px solid #e1eaf2;
	text-align: left;
	vertical-align: top;
}
.wt-single__content table th {
	background: #f7f8fa;
	color: #1e3a6d;
	font-weight: 700;
}
.wt-single__content table tbody tr:nth-child(even) td {
	background: #ffffff;
}
.wt-single__content table a {
	color: #1e3a6d;
	font-weight: 600;
}

@media (max-width: 768px) {
	.wt-single__content table,
	.wt-single__content table tbody,
	.wt-single__content table tr,
	.wt-single__content table td {
		display: block;
		width: 100%;
	}
	/* Koprij verbergen: de kopjes komen terug via data-label. */
	.wt-single__content table thead {
		display: none;
	}
	.wt-single__content table tr {
		margin-bottom: 12px;
		border: 1px solid #e1eaf2;
		border-radius: 8px;
		overflow: hidden;
		background: #fff;
	}
	.wt-single__content table td {
		border: none;
		border-bottom: 1px solid #eef2f9;
		padding: 10px 14px;
	}
	.wt-single__content table tr td:last-child {
		border-bottom: none;
	}
	/* Zebra uit op mobiel: de kaartjes doen het scheidingswerk al. */
	.wt-single__content table tbody tr:nth-child(even) td {
		background: #fff;
	}
	.wt-single__content table td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 3px;
		font-size: 13px;
		font-weight: 700;
		color: #1e3a6d;
	}
}

/* --- Tabel als Gutenberg-blok ---------------------------------------------
 * Een tabel die als blok is geplaatst zit in <figure class="wp-block-table">.
 * Core levert daar eigen CSS bij: een lijn van 3px onder de koprij, en randen
 * en padding op de cellen. Onze eigen regels hierboven winnen op de cellen
 * (hogere specificiteit), maar die 3px-lijn zit op <thead> en zou een tabel in
 * blokvorm er anders uit laten zien dan een kale <table>. Daarom hier
 * neutraliseren, zodat beide vormen identiek zijn.
 * -------------------------------------------------------------------------- */
.wt-single__content .wp-block-table {
	margin: 0 0 28px;
}
.wt-single__content .wp-block-table thead {
	border-bottom: 0;
}
.wt-single__content .wp-block-table tfoot {
	border-top: 0;
}
.wt-single__content .wp-block-table table {
	margin-bottom: 0;
}


/* ==================== /css/winkel-overig.css ==================== */
/*
 * Wat er van `style.css` overbleef: losse regels die nergens een eigen plek hebben.
 *
 * Dit is bewust één bestand en geen negen bestandjes van één regel. Elke regel hoort op termijn naar
 * de stylesheet van zijn eigen pagina te verhuizen (de kopjes hieronder zeggen welke), maar dat
 * verandert óók op welke pagina's hij laadt, en dat moet per regel gemeten worden. Zolang dat niet is
 * gebeurd staat het hier, en laadt het net als voorheen overal.
 *
 * Er stond veel meer in: op 28-08-2026 zijn 63 dode regels verwijderd, restanten van Shoptimizer en
 * CommerceKit. Wat hier staat is nagemeten en wordt echt gebruikt.
 *
 * Was onderdeel van style.css tot 28-08-2026.
 */

/* === 1. GLOBAAL                                            === */
/* ============================================================ */

/* Voorkom horizontale scroll */
.site {
    overflow-x: clip;
}

/* strange cross under categories */
@media (min-width: 993px) {
    .close-drawer {
        display: none;
    }
}

/* Badges styling */

/* === 6. PRODUCT ARCHIEF                                    === */
/* ============================================================ */

/* --- Prijzen --- */
.woocommerce-price-suffix {
	color: #747474;
	font-weight: 400;
	font-size: 10px;
}

/* Prijzen op homepage */

/* --- Productkaart --- */

/* Flexbox layout */

   
   

/* Titel */
   

/* Rating */
  
   

/* Prijs */
   

/* Levertijdtekst */
  
   

/* Uitverkocht */
   

/* Knop volledige breedte */


/* Discount label */
   

/* Categorie button */



/* --- Kennisbank slider --- */

/* Subcategorie-carrousel: CSS VERWIJDERD 2026-08-23 samen met de PHP die de markup
   .bv-subcat-carousel rendeerde. De huidige carrousel is .wt-subcat, opgemaakt in
   css/plp.css. */

/* Floating filterknop styling is verhuisd naar /css/filter-flyout.css (2026-05-13) */

/* === 7. ENKEL PRODUCT                                      === */
/* ============================================================ */

/* Prijs aanbiedingsbadge verbergen */

/* Prijs doorgestreept */

/* Discount label */

/* Stock */

/* USP fieldset */

/* Notitie in product */
.productnotitie {
	background-color: #d9edf7;
	padding: 15px;
	border-left: solid 5px #bcdff1;
	color: #31708f;
}

/* --- Tabs: Specificaties --- */

/* --- Tabs: Documentatie --- */

/* --- Tabs: FAQ --- */

/* --- Reviews --- */

/* === 8. UPSELLS & CROSS-SELLS                              === */
/* ============================================================ */

/* Verberg schaduw */
   
    

/* Cross-sells op mobiel */

/* === 9. WINKELWAGEN PAGINA                                 === */
/* ============================================================ */

/* Producttitels in winkelwagen */
.woocommerce-cart-form a {
	color: inherit;
	font-weight: 400;
}

/* Verberg slotje-icoon */

/* Toeslag kleur */
.fee {
	background: #def5e0;
}

/* === 10. AFREKENEN PAGINA                                  === */
/* ============================================================ */

/* Verzendadres label */

/* Verberg backorder notificatie */
.backorder_notification {
	display: none;
}

/* Checkout progress bar */

/* === 11. MIJN ACCOUNT                                      === */
/* ============================================================ */

.woocommerce-account .woocommerce-info .button {
	background: none!important;
}
.woocommerce-account .woocommerce-info .button:hover {
	background: none!important;
	transform: scale(1.1);
	transition: transform 0.3s ease;
}

@media (max-width: 736px) {
	.woocommerce-account .woocommerce-info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
		padding: 1em;
	}
	.woocommerce-account .woocommerce-info .button {
		align-self: flex-start;
		width: auto;
		border: none;
		padding: 0em;
	}
	.woocommerce-account .woocommerce-info .button:hover {
		align-self: flex-start;
		width: auto;
		border: none;
		padding: 0em;
	}
}

/* === 12. FOOTER                                            === */
/* ============================================================ */

/* === 14. WIDGETS & OVERIG                                  === */
/* ============================================================ */

/* Snellinks (mobiel) */


/* ==================== /css/btw-weergave.css ==================== */
/* ==========================================================================
   Btw-weergave: incl./excl. btw en klanttype. Uitleg: inc/btw-weergave.php.
   ========================================================================== */

/* ---- Prijs twee keer in de HTML, één zichtbaar ----
   `display: contents` laat de wrapper uit de opmaak verdwijnen: de bestaande regels voor
   .wt-card__price, .wt-pdp__price en de rest blijven precies zo werken als zonder wrapper. */
.wt-btw { display: contents; }
.wt-btw--excl { display: none; }
html.wt-btw-excl .wt-btw--incl { display: none; }
html.wt-btw-excl .wt-btw--excl { display: contents; }

/* ---- Schuifje "Incl. btw" ----
   Aan (particulier) oogt aan zolang <html> géén .wt-btw-excl heeft. Die klasse staat er vóór de eerste
   paint (head-script), dus er schuift niets om als de JavaScript later laadt. */
.wt-weergave {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.wt-weergave__tekst { font-size: 15px; color: var(--wt-muted-strong); white-space: nowrap; }

/* Het echte vakje ligt onzichtbaar over het geheel: klikbaar, en bereikbaar met toetsenbord en schermlezer. */
.wt-weergave__invoer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.wt-weergave__baan {
	position: relative;
	flex-shrink: 0;
	width: 48px;
	height: 28px;
	border-radius: 999px;
	background: var(--wt-blue-soft); /* zelfde kleur als de header (Tijn 17-09-2026) */
}
.wt-weergave__bol {
	position: absolute;
	top: 3px;
	left: 3px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	/* Dun randje in de uit-stand: wit op de lichte baan was net te weinig contrast (Tijn 17-09-2026). */
	box-shadow: 0 0 0 1px var(--wt-border-input), 0 1px 3px rgba(30, 58, 109, 0.3);
	transition: transform 160ms, background 160ms;
}
.wt-weergave__vink { width: 13px; height: 13px; color: #fff; stroke-width: 3; opacity: 0; transition: opacity 120ms; }

/* Aan: incl. btw */
/* Baan blijft in beide standen dezelfde kleur; alleen het bolletje wisselt (Tijn 17-09-2026). */
html:not(.wt-btw-excl) .wt-weergave__bol { transform: translateX(20px); background: var(--wt-blue); box-shadow: none; }
html:not(.wt-btw-excl) .wt-weergave__vink { opacity: 1; }

.wt-weergave:hover .wt-weergave__tekst { color: var(--wt-blue); }
.wt-weergave:has(.wt-weergave__invoer:focus-visible) .wt-weergave__baan { outline: 2px solid var(--wt-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.wt-weergave__baan, .wt-weergave__bol, .wt-weergave__vink { transition: none; }
}

/* ---- Plek in de header (desktop) ----
   Direct rechts naast het menu, na "Zakelijke klant" (keuze Tijn 17-09-2026). De winkelwagen houdt
   zijn `margin-left: auto` en blijft dus helemaal rechts. */
body.nieuwe-header-actief .wt-navrow .wt-weergave--desktop { margin-left: calc(var(--wt-nav-ruimte, 20px) - 8px); flex-shrink: 0; } /* gap 8 + dit = de afstand van de rest van de rij (header.css) */
/* Op 1024px is het krap (151px vrij zonder schuifje, 134px nodig). Laat de menu-items dan niet
   inkrimpen: anders breekt "Onze merken" af voordat de ruimte echt op is (gemeten 17-09-2026). */
body.nieuwe-header-actief nav.wt-navrow .wrapper > .wt-navrow-inner:has(.wt-weergave) > * { flex-shrink: 0; white-space: nowrap; }


/* ---- Plek in het mobiele menu ----
   Een gewone menuregel op wit, zelfde tekstkleur en schuifje als desktop. Het grijze vlak eromheen is
   weggehaald (Tijn 17-09-2026): de lichte baan van het schuifje verdween erin. */
/* Lijn boven én onder, even zwaar: zonder de bovenste leek de regel bij de categorieën te horen. */
.mm-mobile__weergave { margin: 0; border-top: 1px solid var(--wt-border); border-bottom: 1px solid var(--wt-border); }
.wt-weergave--mobiel {
	display: flex;
	justify-content: space-between;
	padding: 14px 16px;
}
.wt-weergave--mobiel .wt-weergave__tekst { font-size: 16px; }


/* ==================== /css/categorie-tegel.css ==================== */
/*
 * De categorietegel.
 * =========================================================================
 * De tegels op de homepage, op `/webshop/` en op elke hoofdcategoriepagina: een foto met daaronder
 * een groene knop met de categorienaam en het aantal producten.
 *
 * GESCHIEDENIS. Dit bestand is op 27-08-2026 in twee stappen ontstaan. Eerst zijn 30 regels uit
 * `basislaag.css` en 4 uit `style.css` hierheen verhuisd, woordelijk en in dezelfde volgorde, zodat
 * de verhuizing zelf meetbaar was: 513 gemeten waarden voor en na, nul verschil. Daarna, in een
 * tweede stap, zijn ze herschreven naar wat ze bedoelen. Dat is deze versie.
 *
 * WAT ERUIT KON, EN WAAROM. De oude selectors heetten `ul.products li.product:not(.wt-card)`. Ze
 * zeiden dus wat ze NIET waren. Ze kwamen uit de opmaak voor de standaardkaart van WooCommerce, en
 * die bestaat op deze site niet meer: elk product draait op `.wt-card`, ook de producten die een
 * `[products]`-shortcode in een blogartikel oplevert. Wat er als enige overbleef was de
 * categorietegel, die toevallig ook de klasse `product` draagt.
 *
 * Van de 34 regels zijn er 20 weg. Ze konden een tegel nooit raken:
 *
 *   - alles voor `.button` en `.added_to_cart`: een tegel heeft geen knop (7 regels)
 *   - het zweefvlak `::before` met zijn schaduw, dat stond al op `:not(.product-category)` (2)
 *   - `:hover img { transform: scale(0.98) }`, ook al uitgesloten voor tegels (1)
 *   - de `.static-cta-buttons`-marges, allemaal `:not(.product-category)` (3)
 *   - `.cgkit-swatch-hover`, van een plugin die er niet meer is (1)
 *   - `min-height: 380px` op de productkaart, `:not(.product-category)` (1)
 *   - `padding-bottom: 40px`, idem (1)
 *   - de `.columns-4`-variant: die kon nooit aanslaan. De `ul` draagt zelf `columns-4`, maar de
 *     selector vroeg om een voorouder met die klasse. Onze eigen wikkel uit `inc/plp.php` is bij
 *     tegels altijd `columns-5`, en dat is de regel die het werk deed (1)
 *   - de `.upsells`/`.related`/`.cross-sells`-varianten: die lijsten bestaan wel, maar met `.wt-card`
 *
 * De tegel heeft nu een eigen klasse `wt-tegel`, gezet in `inc/woocommerce-basis.php`.
 *
 * Dit bestand laadt op prioriteit 120, dus als laatste.
 * =========================================================================
 */

/* ---- De lijst ---- */

ul.products:has(.wt-tegel) {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% + 30px);
	margin-left: -15px;
	margin-bottom: 0;
	clear: both;
}

/* ---- De tegel ---- */

.wt-tegel {
	position: relative;
	padding-right: 15px;
	padding-left: 15px;
	list-style: none;
}

/* Boven de buren tijdens het zweven, zodat de opschalende foto er niet achter verdwijnt. */
.wt-tegel:hover,
.wt-tegel:focus-within {
	z-index: 2;
}

@media (min-width: 993px) {
	.wt-tegel {
		margin-bottom: 2.5rem;
	}

	/* Vijf op een rij. De wikkel `div.columns-5` komt uit `wt_kolommen_open()` in inc/plp.php en
	   staat op elke pagina met tegels. */
	.columns-5 .wt-tegel {
		width: 19.98%;
	}
}

@media (max-width: 992px) {
	ul.products:has(.wt-tegel) {
		display: grid;
		grid-template-columns: repeat(2, minmax(10px, 1fr));
		column-gap: 20px;
		row-gap: 30px;
		width: 100%;
		margin-left: 0;
	}

	.wt-tegel {
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;
		padding: 0;
		margin-bottom: 0;
	}

	.archive ul.products:has(.wt-tegel) {
		margin-bottom: 2rem;
	}
}

/* ---- De foto ---- */

/* Het omhulsel komt uit `wt_tegel_omhulsel_open()`; het snijdt de opschalende foto af bij de rand. */
.wt-tegel .wt-tegel-foto {
	overflow: hidden;
	display: block;
	position: relative;
}

.wt-tegel img {
	display: block;
	width: 100%;
	margin: 0;
	transform: scale(1);
	transition: transform 0.36s ease-out;
}

.wt-tegel a:hover img {
	transform: scale(1.05);
}

/* ---- De link en de titel ---- */

.wt-tegel a {
	display: block;
	color: #111;
}

/* De titel is vormgegeven als knop, met de categorienaam erop. */
.wt-tegel h2 {
	margin: 0.75em 0 0 0;
	padding: 10px;
	border-radius: 3px;
	background: var(--wt-green);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	text-align: center;
}

.wt-tegel h2:hover {
	background: var(--wt-green-hover);
}

/* WooCommerce zet het aantal producten in een `<mark>` achter de naam. Dat tonen we niet. */
.wt-tegel h2 mark {
	display: none;
}


/* ==================== /css/footer.css ==================== */
/*
 * OVER `!important` IN DIT BESTAND: die zijn er niet meer.
 *
 * Op 27-08-2026 stonden er 24, samen goed voor 85 eigenschappen. Per stuk nagemeten in de browser:
 * voor elke eigenschap gekeken of er in een ander stijlblad een regel bestaat die dezelfde
 * eigenschap op hetzelfde element zet en die zonder de `!important` zou winnen op specificiteit of
 * volgorde. Uitkomst: **nul**. Er was geen enkele tegenstander; ze waren allemaal overbodig.
 *
 * Gemeten voor en na op 126 elementen in de voettekst, inclusief ::before en ::after, over drie
 * pagina's en twee schermbreedtes: 1.890 waarden, geen verschil.
 *
 * Zet er geen nieuwe bij zonder eerst te kijken WAT er wint. Meestal is het antwoord: niets, en
 * dan is een `!important` een pleister op een wond die er niet is.
 */

/**
 * Weltechniek custom footer — versie 1.1.0
 *
 * Desktop: 5 kolommen op brand-blue achtergrond, witte tekst.
 * Mobiel: nieuwsbrief bovenaan (order -1), contact open, 3 accordeons dicht.
 */

/* Tokens-fallback (worden ook door header.css gezet) */
.wt-footer {
	--wt-blue: var(--wt-blue, #1E3A6D);
	--wt-blue-dark: #14284f;
	--wt-green: var(--wt-green, #00bb00);
	--wt-green-hover: var(--wt-green-hover, #008d00);
	--wt-text-on-blue: rgba(255, 255, 255, 0.85);
	--wt-border-on-blue: rgba(255, 255, 255, 0.15);
}

/* ─── WRAPPER — alles op blauwe achtergrond, full-width breakout ─── */
.wt-footer {
	background: #1E3A6D;
	background: var(--wt-blue, #1E3A6D);
	color: #fff;
	font-family: inherit;
	/* Breek uit Shoptimizer's .col-full wrapper (max-width 1301px) — footer reikt van schermrand tot schermrand */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: none;
}

.wt-footer__inner {
	max-width: 1301px;
	margin: 0 auto;
	padding: 0 16px;
}

/* Boven 1301px: padding weg zodat content op X=70 begint, gelijk met main.site-main */
@media (min-width: 1301px) {
	.wt-footer__inner {
		padding: 0;
	}
}

/* ─── MAIN — 5 kolommen op desktop, stack op mobiel ─── */
.wt-footer__main {
	/* Mobile: gelijke padding boven en onder zodat de ruimte boven Nieuwsbrief
	   matched met de ruimte onder Populair (voor de copyright-strip). */
	padding: 20px 0;
}

/* Mobile: flex column zodat 'order: -1' op nieuwsbrief werkt */
.wt-footer__main .wt-footer__inner {
	display: flex;
	flex-direction: column;
}

/* ─── KOLOM (mobile-first: gestapeld, accordeon op de links-kolommen) ─── */
.wt-footer-col {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	border-bottom: 1px solid var(--wt-border-on-blue, rgba(255, 255, 255, 0.15));
}

.wt-footer-col:last-child {
	border-bottom: 0;
}

/* Op mobiel staat Newsletter via order:-1 visueel bovenaan, dus DOM-laatste != visueel-laatste.
   Visueel laatste = Populair = :nth-last-child(2). Onderste lijntje weg zodat 't niet op de copyright-strip plakt. */
.wt-footer-col:nth-last-child(2) {
	border-bottom: 0;
}

/* Newsletter op mobiel bovenaan via flex/grid order */
.wt-footer-col--newsletter {
	order: -1;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* ─── TITELS ─── */
.wt-footer-col__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	margin: 0;
	padding: 18px 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: transparent;
	background-color: transparent;
	border: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: 0;
	border-radius: 0;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	min-height: auto;
	height: auto;
}

.wt-footer-col__title--static {
	justify-content: flex-start;
	gap: 10px;
	cursor: default;
}

/* Override Shoptimizer's button hover/focus */
.wt-footer-col__title:hover,
.wt-footer-col__title:focus,
.wt-footer-col__title:active,
.wt-footer-col__title:focus-visible {
	background: transparent;
	background-color: transparent;
	color: #fff;
	box-shadow: none;
	outline: none;
}

/* Mail-icoon naast Nieuwsbrief-titel */
.wt-footer-col__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	flex-shrink: 0;
	margin-right: 4px;
}

.wt-footer-col__icon svg {
	width: 16px;
	height: 16px;
	color: #fff;
}

/* Chevron */
.wt-footer-col__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.wt-footer-col__chevron svg {
	width: 20px;
	height: 20px;
	color: rgba(255, 255, 255, 0.7);
}

.wt-footer-col__title[aria-expanded="true"] .wt-footer-col__chevron {
	transform: rotate(180deg);
}

/* ─── BODY (mobile: dicht voor accordeon-items) ─── */
.wt-footer-col__body {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
	margin: 0;
	padding: 0;
}

.wt-footer-col__body--open,
.wt-footer-col__title[aria-expanded="true"] + .wt-footer-col__body {
	max-height: 1500px;
	padding-bottom: 20px;
}

/* Contact-tekst */
.wt-footer-col--contact .wt-footer-col__body p {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
}

.wt-footer-col--contact .wt-footer-col__body p:last-child {
	margin-bottom: 0;
}

.wt-footer-col--contact .wt-footer-col__body strong {
	color: #fff;
	font-weight: 600;
}

.wt-footer-col--contact .wt-footer-col__body a {
	color: #fff;
	text-decoration: none;
	transition: color 0.15s ease;
}

.wt-footer-col--contact .wt-footer-col__body a:hover {
	text-decoration: underline;
}

/* Waarschuwingsblok — subtiel op blauwe achtergrond */
.wt-footer-col__melding {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.92);
	background: rgba(255, 255, 255, 0.08);
	padding: 10px 12px;
	border-radius: 5px;
	border-left: 3px solid var(--wt-green, #00bb00);
	margin-top: 12px;
}

.wt-footer-col__melding strong {
	color: #fff;
}

/* Link-kolommen */
.wt-footer-col__body--links {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wt-footer-col__body--links li {
	margin: 0;
}

.wt-footer-col__body--links a {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
	text-decoration: none;
	display: inline-block;
	padding: 4px 0;
	transition: color 0.15s ease;
}

.wt-footer-col__body--links a:hover {
	color: #fff;
	text-decoration: underline;
}

/* Newsletter kolom-inhoud */
.wt-footer-col__newsletter-text {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
	margin: 0 0 14px;
}

/* ─── DESKTOP: 5 kolommen, alle open ─── */
@media (min-width: 1024px) {
	.wt-footer__main {
		padding: 64px 0 48px;
	}
	.wt-footer__main .wt-footer__inner {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1.2fr;
		gap: 24px;
	}
	/* Contact-kolom: extra padding-right zodat content niet visueel op kolom 2 plakt
	   (waarschuwingsblok + adresregels vullen anders de volle kolombreedte) */
	.wt-footer__main .wt-footer-col--contact {
		padding-right: 40px;
	}
	.wt-footer-col {
		border-bottom: 0;
	}
	.wt-footer-col--newsletter {
		order: 5;
		border-bottom: 0;
	}
	.wt-footer-col__title {
		padding: 0 0 16px;
		cursor: default;
		font-size: 17px;
	}
	.wt-footer-col__chevron {
		display: none;
	}
	.wt-footer-col__body {
		max-height: none;
		overflow: visible;
		padding-bottom: 0;
	}
}

/* ─── COPYRIGHT (donkerder strip) ─── */
.wt-footer__bottom {
	background: #14284f;
	background: var(--wt-blue-dark, #14284f);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding: 18px 0;
}

/* 10px tussen de regel en de betaallogo's (Tijn 18-09-2026). Gemeten stond het op 14, met 19px boven
   de tekst en 18 onder de logo's; daardoor oogde de ruimte onder de tekst het grootst, ook omdat een
   tekstregel onderaan nog staartruimte heeft die je meetelt als lucht. De afbeelding zelf heeft geen
   loze rand, dat is nagemeten op de pixels. */
.wt-footer__bottom .wt-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.wt-footer__copyright {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
	text-align: center;
}

.wt-footer__payment {
	max-width: 100%;
	height: auto;
	width: auto;
	max-height: 30px;
	filter: brightness(1.05);
}

@media (min-width: 768px) {
	.wt-footer__bottom .wt-footer__inner {
		flex-direction: row;
		justify-content: space-between;
		gap: 24px;
	}
	.wt-footer__copyright {
		text-align: left;
	}
	.wt-footer__payment {
		max-height: 34px;
	}
}
/* ─── Nieuwsbriefformulier in de footerkolom (eigen form sinds 21-08-2026) ───
   Verving de Klaviyo-embed UuNhfH, die alleen verscheen na marketing-consent.
   De basisstijlen komen uit forms.css (.wt-form--inline); hier alleen wat op
   een donkerblauwe ondergrond anders moet dan op een witte pagina. */
.wt-footer-col--newsletter .wt-form {
	max-width: 100%;
}
/* Rand iets zichtbaarder dan de standaard #d6dde6, die op donkerblauw wegvalt. */
.wt-footer-col--newsletter .wt-form__input {
	border-color: transparent;
}
.wt-footer-col--newsletter .wt-form__input:focus {
	border-color: #fff;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
/* Foutmeldingen: het donkerrood uit forms.css is hier onleesbaar. */
.wt-footer-col--newsletter .wt-form__error {
	color: #ffc2c2;
}
.wt-footer-col--newsletter .wt-form__messages--error {
	background: rgba(255, 255, 255, .1);
	border-left-color: #ffc2c2;
	color: #ffd9d9;
}
/* Bevestiging: klein kaartje met een groen vinkje ervoor, in plaats van
   losse witte regels die net zo hard schreeuwen als de introtekst erboven.
   De selectors staan bewust op drie klassen, want .wt-form--inline verbergt
   het icoon en heeft dezelfde specificiteit als een gewone footer-override. */
.wt-footer-col--newsletter .wt-form--inline .wt-form__success {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 6px;
	padding: 12px 14px;
}
.wt-footer-col--newsletter .wt-form--inline .wt-form__success-icon {
	display: block;
	color: #6ee06e;
	margin: 0;
	flex: 0 0 auto;
}
.wt-footer-col--newsletter .wt-form--inline .wt-form__success-icon svg {
	display: block;
	width: 17px;
	height: 17px;
}
.wt-footer-col--newsletter .wt-form__success-text {
	color: rgba(255, 255, 255, .92);
	font-size: 13.5px;
	line-height: 1.45;
	margin: 0;
	text-align: left;
}
/* Tekst en placeholder gecentreerd, zoals in het oude Klaviyo-formulier dat hier
   stond. In een smalle kolom oogt links uitgelijnde tekst in een breed veld scheef. */
.wt-footer-col--newsletter .wt-form__input {
	text-align: center;
}