/* ==========================================================================
   TKM Core — blocks.css
   Per-block styles. Gebruikt tokens uit brand.css.
   ========================================================================== */

/* Salient/fullPage.js override — fullPage.js injecteert #fp-nav en zet
   html/body op overflow:hidden + height:100vh. Op onze eigen template-pages
   dequeuen we het script (zie Enqueue.php), maar als het toch doorkomt
   neutraliseren we de schade hier. */
#fp-nav { display: none !important; }
.fp-enabled html,
.fp-enabled body { overflow: auto !important; height: auto !important; }
.fp-enabled #fp-nav { display: none !important; }

/* Voorkom horizontale scroll door uitstekende elementen (SVG's zonder vaste
   breedte, sliders buiten container, etc.) */
body.tkm-body { overflow-x: hidden !important; }

/* Verberg footer op listing-detail pagina's — gebruiker wil clean view zonder
   site-footer onder de RTCL listing-layout (sticky action-bar onderaan is
   genoeg navigatie op die pagina's). */
body.single-rtcl_listing .tkm-footer { display: none !important; }

/* Header ------------------------------------------------------------------ */
.tkm-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--tkm-color-paper-bright);
  border-bottom: 1px solid var(--tkm-color-line);
  /* NB: géén backdrop-filter / filter / transform hier — die maken van
     .tkm-header een containing block voor position:fixed descendants en
     zouden de drawer insluiten. */
}
.tkm-header.is-scrolled { box-shadow: var(--tkm-shadow-sm); }
.tkm-header__top { background: var(--tkm-color-paper-bright); }

.tkm-header__row {
  display: flex;
  align-items: center;
  gap: var(--tkm-space-5);
  min-height: 72px;
}
@media (max-width: 640px) {
  .tkm-header__row { min-height: 64px; gap: var(--tkm-space-3); }
}
.tkm-header__logo { text-decoration: none; flex-shrink: 0; margin-right: auto; }

@media (max-width: 420px) {
  .tkm-logo__mark { width: 30px; height: 30px; }
  .tkm-logo__word { font-size: 1rem; }
}

.tkm-header__nav {
  display: none;
  gap: var(--tkm-space-6);
  align-items: center;
  font-family: var(--tkm-font-display);
  font-weight: 500;
  font-size: 0.95rem;
}
.tkm-header__nav a {
  padding: 8px 2px;
  color: var(--tkm-color-ink);
  border-bottom: 2px solid transparent;
  transition: border-color 160ms ease, color 160ms ease;
}
.tkm-header__nav a:hover,
.tkm-header__nav a:focus-visible {
  color: var(--tkm-color-primary);
  border-bottom-color: var(--tkm-color-primary);
}
@media (min-width: 960px) { .tkm-header__nav { display: flex; margin-right: auto; } }

.tkm-header__actions {
  display: flex;
  align-items: center;
  gap: var(--tkm-space-2);
  flex-shrink: 0;
}

.tkm-header__account {
  display: inline-flex; /* altijd zichtbaar — op mobiel toont dit alleen het icoon */
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--tkm-color-ink);
  padding: 8px 12px;
  border-radius: var(--tkm-radius-md);
  transition: background 160ms ease, color 160ms ease;
}
.tkm-header__account:hover,
.tkm-header__account:focus-visible { background: var(--tkm-color-line); color: var(--tkm-color-primary); }

/* Mobile (<960px): CTA verdwijnt uit top-row — die staat nu in de action-row
   onder de top-header. Account-link wordt icon-only (user-icoon vervangt
   het plus-icoon in het rechter-hoekje). */
@media (max-width: 959.98px) {
  .tkm-header__cta { display: none; }
  .tkm-header__account { padding: 9px; gap: 0; }
  .tkm-header__account-label { display: none; }
  .tkm-header__account svg { width: 22px; height: 22px; }
}

.tkm-header__burger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border-radius: var(--tkm-radius-sm);
  transition: background 160ms ease;
}
.tkm-header__burger:hover { background: var(--tkm-color-line); }
.tkm-header__burger span {
  width: 22px; height: 2px;
  background: var(--tkm-color-ink);
  border-radius: 2px;
  transition: transform 220ms ease, opacity 180ms ease;
  transform-origin: center;
}
@media (min-width: 960px) { .tkm-header__burger { display: none; } }

/* Burger → cross animation when drawer open */
body.tkm-menu-open .tkm-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.tkm-menu-open .tkm-header__burger span:nth-child(2) { opacity: 0; }
body.tkm-menu-open .tkm-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile action row — twee prominente knoppen bovenaan de secondary header.
   Alleen zichtbaar <960px (default: hidden). Op desktop zijn deze acties
   al aanwezig in de top-nav en de "Advertentie plaatsen" CTA. */
.tkm-header__action-row {
  display: none;
  background: var(--tkm-color-paper-bright);
  border-bottom: 1px solid var(--tkm-color-line);
}
.tkm-header__action-row-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tkm-space-2);
  padding: 10px 0 12px;
}
.tkm-header__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: var(--tkm-radius-md);
  font-family: var(--tkm-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  border: 1.5px solid transparent;
  text-align: center;
  white-space: nowrap;
  min-width: 0;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.tkm-header__action-btn svg { flex-shrink: 0; }
.tkm-header__action-btn span { overflow: hidden; text-overflow: ellipsis; }

.tkm-header__action-btn--buy {
  background: var(--tkm-color-paper-bright);
  color: var(--tkm-color-ink);
  border-color: var(--tkm-color-line);
}
.tkm-header__action-btn--buy:hover,
.tkm-header__action-btn--buy:focus-visible {
  background: var(--tkm-color-paper);
  border-color: var(--tkm-color-ink);
}

.tkm-header__action-btn--sell {
  background: var(--tkm-color-primary);
  color: #fff !important;
  box-shadow: 0 8px 20px -14px rgba(232, 93, 26, .55);
}
.tkm-header__action-btn--sell span,
.tkm-header__action-btn--sell svg {
  color: #fff !important;
  stroke: currentColor;
}
.tkm-header__action-btn--sell:hover,
.tkm-header__action-btn--sell:focus-visible,
.tkm-header__action-btn--sell:visited,
.tkm-header__action-btn--sell:active {
  background: var(--tkm-color-primary-hover);
  color: #fff !important;
}
.tkm-header__action-btn--sell:hover span,
.tkm-header__action-btn--sell:focus-visible span {
  color: #fff !important;
}

@media (max-width: 959.98px) {
  .tkm-header__action-row { display: block; }
}

/* v0.23.89: action-row staat ALLEEN op homepage (verplaatst uit SiteHeader naar
   Voordelen-block tussen Hero en Voordelen). Op homepage tonen op ALLE
   schermgroottes — niet meer mobile-only. */
body.home .tkm-header__action-row,
body.front-page .tkm-header__action-row {
  display: block !important;
  margin: 0 auto;
  padding: 16px 0;
}

/* v0.23.90: navigation-loading-bar bovenaan na drawer-leaf click.
   Filter-TTFB voor logged-in is 8-15s; zonder visuele feedback lijkt 't
   alsof er niks gebeurt nadat user een categorie kiest. */
body.tkm-nav-loading::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #E85D1A 0%, #ffb787 50%, #E85D1A 100%);
  background-size: 200% 100%;
  z-index: 99999;
  animation: tkm-nav-loading-bar 1.2s linear infinite;
  pointer-events: none;
}
@keyframes tkm-nav-loading-bar {
  0%   { background-position: 0% 50%; }
  100% { background-position: -200% 50%; }
}

/* v0.23.90: hero + carousel ECHT verbergen wanneer categorie actief.
   JS in render.php zet `hidden` attr op `[data-tkm-welcome]`; deze CSS
   zorgt dat 't display:none wint van CSS `display:` regels eerder. */
[data-tkm-welcome][hidden] {
  display: none !important;
}
/* Smallere telefoons: iets compactere knoppen zodat twee labels blijven passen */
@media (max-width: 380px) {
  .tkm-header__action-btn {
    padding: 10px 10px;
    font-size: 0.88rem;
    gap: 6px;
  }
  .tkm-header__action-btn svg { width: 16px; height: 16px; }
}

/* Secondary header — category bar met hover-dropdowns */
/* ╭──────────────────────────────────────────────────────────────────────╮
   │ Header secondary categorie-bar (v0.23.1) — moderne shop-stijl       │
   │ horizontaal scrollbare lijst met fade-edges. Vervangt de oude       │
   │ orange-band met hover-mega-dropdowns. Werkt naadloos met 16+ items: │
   │ overflowt niet, scrollt horizontaal met snap, fade-gradients tonen  │
   │ aan dat er meer is. Sub-categorieën zitten in de drawer + filterbar.│
   │ Verbergt automatisch op <960px (mobile gebruikt drawer).            │
   ╰──────────────────────────────────────────────────────────────────────╯ */
.tkm-header__categories {
  position: relative;
  background: var(--tkm-color-paper-bright);
  border-top: 1px solid var(--tkm-color-line);
  border-bottom: 1px solid var(--tkm-color-line);
}
.tkm-header__categories > .tkm-container {
  position: relative;
  padding: 0 !important;
  overflow: hidden; /* fade-edges via mask-image vereist hidden parent */
}

/* Fade-gradients aan beide zijkanten — geven aan dat er meer items zijn. */
.tkm-header__categories > .tkm-container::before,
.tkm-header__categories > .tkm-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  z-index: 2;
  pointer-events: none;
}
.tkm-header__categories > .tkm-container::before {
  left: 0;
  background: linear-gradient(to right, var(--tkm-color-paper-bright) 0%, transparent 100%);
}
.tkm-header__categories > .tkm-container::after {
  right: 0;
  background: linear-gradient(to left, var(--tkm-color-paper-bright) 0%, transparent 100%);
}

.tkm-header__cat-list {
  display: flex;
  gap: 2px;
  padding: 4px 24px !important;
  margin: 0 !important;
  list-style: none !important;
  font-family: var(--tkm-font-display);
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tkm-header__cat-list::-webkit-scrollbar { display: none; }

.tkm-header__cat-item {
  list-style: none;
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.tkm-header__cat-item::before { content: none !important; display: none !important; }

.tkm-header__cat-link {
  display: inline-flex;
  align-items: center;
  padding: 11px 14px;
  color: var(--tkm-color-ink);
  border-radius: var(--tkm-radius-md);
  transition: background 140ms ease, color 140ms ease;
  border-bottom: none;
  white-space: nowrap;
}
.tkm-header__cat-link:hover,
.tkm-header__cat-link:focus-visible {
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
}

/* Dropdowns (mega-menu hover) zijn weggehaald in v0.23.1 — sub-categorieën
   zitten nu volledig in de drawer-stack en de filterbar-CTA. De header is
   alleen een snelkoppeling naar listing-type-archives. */
.tkm-header__cat-drop {
  display: none !important;
}

/* Mobile: categorie-nav (secondary header) volledig verbergen — categorie-
   keuze loopt via de drawer-stack + de "Categorie kiezen"-CTA in de filterbar.
   Voorkomt ook horizontale overflow op smalle schermen (16 items met
   dropdowns past niet in viewport). */
@media (max-width: 960px) {
  .tkm-header__categories { display: none !important; }
}

/* Safety-net: voorkom body-overflow op mobiel ongeacht binnen-content. */
@media (max-width: 960px) {
  html, body { overflow-x: hidden; }
}

/* Mobile drawer + backdrop */
.tkm-header__backdrop {
  position: fixed; inset: 0;
  background: rgba(14, 20, 16, .55);
  opacity: 0; visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
  z-index: 59;
}
body.tkm-menu-open .tkm-header__backdrop { opacity: 1; visibility: visible; }

.tkm-header__drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(100%, 400px);
  background: var(--tkm-color-paper-bright);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(.22, .8, .26, 1);
  z-index: 60;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--tkm-space-5) var(--tkm-space-5) var(--tkm-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-5);
  box-shadow: var(--tkm-shadow-lg);
}
body.tkm-menu-open { overflow: hidden; }
body.tkm-menu-open .tkm-header__drawer { transform: translateX(0); }

.tkm-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--tkm-space-3);
  border-bottom: 1px solid var(--tkm-color-line);
}
.tkm-drawer__close {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: var(--tkm-radius-sm);
  color: var(--tkm-color-ink);
  transition: background 160ms ease;
}
.tkm-drawer__close:hover { background: var(--tkm-color-line); }

.tkm-drawer__cta {
  width: 100%;
  justify-content: center;
  padding: 16px;
  font-size: 1rem;
}

.tkm-drawer__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--tkm-color-paper);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  color: var(--tkm-color-muted);
}
.tkm-drawer__search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 1rem;
  color: var(--tkm-color-ink);
  min-width: 0;
}

.tkm-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tkm-drawer__nav a {
  display: block;
  padding: 14px 12px;
  border-radius: var(--tkm-radius-md);
  font-family: var(--tkm-font-display);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--tkm-color-ink);
  transition: background 160ms ease, color 160ms ease;
}
.tkm-drawer__nav a:hover,
.tkm-drawer__nav a:focus-visible {
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
}

.tkm-drawer__section { display: flex; flex-direction: column; gap: var(--tkm-space-2); }
.tkm-drawer__label {
  font-family: var(--tkm-font-display);
  font-size: var(--tkm-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--tkm-color-muted);
  padding: 0 12px;
}

/* Drawer categories — accordion met alle materialen per categorie */
.tkm-drawer__cat-accordion {
  display: flex;
  flex-direction: column;
  border-radius: var(--tkm-radius-md);
  overflow: hidden;
  border: 1px solid var(--tkm-color-line);
}

.tkm-drawer__cat {
  border-bottom: 1px solid var(--tkm-color-line);
  background: var(--tkm-color-paper-bright);
  transition: background 160ms ease;
}
.tkm-drawer__cat:last-child { border-bottom: 0; }
.tkm-drawer__cat.is-open { background: var(--tkm-color-paper); }

.tkm-drawer__cat-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--tkm-space-3);
  padding: 14px 14px;
  text-align: left;
  font-family: var(--tkm-font-display);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--tkm-color-ink);
  transition: background 140ms ease, color 140ms ease;
}
.tkm-drawer__cat-trigger:hover,
.tkm-drawer__cat-trigger:focus-visible { background: var(--tkm-color-primary-soft); color: var(--tkm-color-primary); }

.tkm-drawer__cat-name { flex: 1; }

.tkm-drawer__cat-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 7px;
  background: var(--tkm-color-accent-soft);
  color: var(--tkm-color-accent);
  border-radius: var(--tkm-radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  flex-shrink: 0;
}

.tkm-drawer__cat-chevron {
  flex-shrink: 0;
  color: var(--tkm-color-muted);
  transition: transform 240ms ease, color 140ms ease;
}
.tkm-drawer__cat.is-open .tkm-drawer__cat-chevron {
  transform: rotate(180deg);
  color: var(--tkm-color-primary);
}

.tkm-drawer__cat-mats {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms cubic-bezier(.22,.8,.26,1);
  background: var(--tkm-color-paper);
}
.tkm-drawer__cat.is-open .tkm-drawer__cat-mats {
  max-height: 1200px;
  padding-bottom: 6px;
}
.tkm-drawer__cat-mats a {
  display: block;
  padding: 9px 14px 9px 32px;
  font-size: 0.92rem;
  color: var(--tkm-color-muted);
  transition: color 140ms ease, background 140ms ease;
}
.tkm-drawer__cat-mats a:hover,
.tkm-drawer__cat-mats a:focus-visible {
  color: var(--tkm-color-primary);
  background: var(--tkm-color-primary-soft);
}

.tkm-drawer__cat-mats-all {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 10px 32px !important;
  font-family: var(--tkm-font-display) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  color: var(--tkm-color-accent) !important;
  border-bottom: 1px solid var(--tkm-color-line);
  margin-bottom: 4px;
  width: 100%;
}
.tkm-drawer__cat-mats-all:hover,
.tkm-drawer__cat-mats-all:focus-visible {
  background: var(--tkm-color-accent-soft) !important;
  color: var(--tkm-color-accent) !important;
}
.tkm-drawer__cat-mats-all svg { transition: transform 200ms ease; }
.tkm-drawer__cat-mats-all:hover svg { transform: translateX(2px); }

.tkm-drawer__footer {
  margin-top: auto;
  padding-top: var(--tkm-space-4);
  border-top: 1px solid var(--tkm-color-line);
  color: var(--tkm-color-muted);
  font-size: var(--tkm-text-sm);
}

/* Hero -------------------------------------------------------------------- */
.tkm-hero {
  position: relative;
  overflow: hidden;
  background: var(--tkm-color-surface-deep);
  color: var(--tkm-color-paper);
  padding: var(--tkm-space-9) 0 var(--tkm-space-8);
  isolation: isolate;
}
.tkm-hero__bg {
  position: absolute; inset: 0;
  z-index: -1;
  overflow: hidden;
}
.tkm-hero__glow {
  position: absolute;
  width: 900px; height: 900px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.55;
  pointer-events: none;
}
.tkm-hero__glow--a {
  background: radial-gradient(closest-side, rgba(232, 93, 26, 0.55), transparent 70%);
  top: -400px; left: -200px;
}
.tkm-hero__glow--b {
  background: radial-gradient(closest-side, rgba(47, 125, 59, 0.38), transparent 70%);
  bottom: -360px; right: -220px;
}
.tkm-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(246, 243, 238, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 243, 238, .04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 85%);
}

.tkm-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-8);
  align-items: center;
}
@media (min-width: 960px) {
  .tkm-hero__inner { grid-template-columns: 1.15fr 1fr; gap: var(--tkm-space-9); }
}

.tkm-hero__content { max-width: 640px; }
.tkm-hero__title {
  color: var(--tkm-color-paper);
  margin-top: var(--tkm-space-4);
  font-size: clamp(2.5rem, 4.2vw + 1rem, 4.5rem);
  letter-spacing: -0.028em;
}
.tkm-hero__subtitle {
  color: rgba(246, 243, 238, .82);
  font-size: var(--tkm-text-lg);
  margin-top: var(--tkm-space-4);
  max-width: 52ch;
}

.tkm-hero__search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tkm-space-2);
  margin-top: var(--tkm-space-6);
  padding: 10px;
  background: rgba(246, 243, 238, .07);
  border: 1px solid rgba(246, 243, 238, .16);
  border-radius: var(--tkm-radius-xl);
  backdrop-filter: blur(8px);
  max-width: 660px;
}
.tkm-hero__search-field {
  position: relative;
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  background: rgba(14, 20, 16, .25);
  border-radius: calc(var(--tkm-radius-xl) - 6px);
  padding: 0 var(--tkm-space-4) 0 46px;
  min-height: 52px;
}
.tkm-hero__search-field--narrow { flex: 0 1 200px; }
.tkm-hero__search-icon {
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%);
  color: rgba(246, 243, 238, .7);
}
.tkm-hero__search input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--tkm-color-paper);
  font-size: 0.95rem;
}
.tkm-hero__search input::placeholder { color: rgba(246, 243, 238, .5); }
.tkm-hero__search-btn { min-height: 52px; padding: 0 24px; }

.tkm-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tkm-space-3);
  align-items: center;
  margin-top: var(--tkm-space-5);
  font-size: var(--tkm-text-sm);
  color: rgba(246, 243, 238, .65);
}
.tkm-hero__meta-label { color: rgba(246, 243, 238, .5); }
.tkm-hero__meta a {
  padding: 6px 12px;
  background: rgba(246, 243, 238, .07);
  border-radius: var(--tkm-radius-full);
  color: var(--tkm-color-paper);
  border: 1px solid rgba(246, 243, 238, .12);
  transition: background 160ms ease, border-color 160ms ease;
}
.tkm-hero__meta a:hover { background: rgba(232, 93, 26, .2); border-color: rgba(232, 93, 26, .5); }

.tkm-hero__aside {
  position: relative;
  display: none;
}
@media (min-width: 960px) { .tkm-hero__aside { display: block; } }
.tkm-hero__card {
  background: var(--tkm-color-paper-bright);
  color: var(--tkm-color-ink);
  border-radius: var(--tkm-radius-lg);
  padding: var(--tkm-space-5);
  box-shadow: var(--tkm-shadow-lg);
  transform: rotate(-1.2deg);
  max-width: 380px;
}
.tkm-hero__card--offset {
  margin-top: -20px;
  margin-left: auto;
  transform: rotate(1.4deg) translateX(10%);
}
.tkm-hero__card-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--tkm-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tkm-color-muted);
  margin-bottom: 10px;
}
.tkm-hero__card-label--accent { color: var(--tkm-color-accent); }
.tkm-hero__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tkm-color-primary);
  animation: tkm-pulse 2s ease-in-out infinite;
}
.tkm-hero__dot--accent { background: var(--tkm-color-accent); }
@keyframes tkm-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(0.85); }
}
.tkm-hero__card-title {
  font-family: var(--tkm-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.tkm-hero__card-meta {
  color: var(--tkm-color-muted);
  font-size: var(--tkm-text-sm);
  margin-bottom: 12px;
}
.tkm-hero__card-price {
  font-family: var(--tkm-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--tkm-color-primary);
}
.tkm-hero__card-price span {
  font-size: var(--tkm-text-sm);
  color: var(--tkm-color-muted);
  font-weight: 500;
  margin-left: 4px;
}

/* ═══ Hero Phone Mockup v5 ═══════════════════════════════════════════════ */
/* Vervangt de 2 losse hero-cards in .tkm-hero__aside met een phone-mockup */

@media (min-width: 960px) {
  .tkm-hero__aside {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.tkm-hero__showcase {
  position: relative;
  /* padding zodat floats buiten phone ruimte hebben */
  padding: 2.5rem 3rem 2.5rem 2rem;
  flex-shrink: 0;
}

/* Telefoon-frame */
.tkm-hero__phone {
  width: 228px;
  background: #0F1211;
  border-radius: 36px;
  padding: 10px 6px 0;
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,.6),
    0 0 0 1.5px rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.04);
  transform: rotate(-2.5deg);
  transition: transform 420ms cubic-bezier(.34,1.56,.64,1);
}
.tkm-hero__phone:hover { transform: rotate(-0.5deg) scale(1.015); }

/* Statusbalk */
.tkm-hero__phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 12px 4px;
  color: rgba(255,255,255,.65);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.tkm-hero__phone-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Scherm */
.tkm-hero__phone-screen {
  background: var(--tkm-color-paper);
  border-radius: 28px 28px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* App-header (groen) */
.tkm-hero__app-bar {
  background: var(--tkm-color-accent);
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.tkm-hero__app-brand {
  display: flex;
  align-items: center;
  gap: 5px;
  color: white;
  font-family: var(--tkm-font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Categorie-chips */
.tkm-hero__app-cats {
  display: flex;
  gap: 5px;
  padding: 7px 9px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tkm-color-paper);
}
.tkm-hero__app-cats span {
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.58rem;
  font-weight: 600;
  background: var(--tkm-color-line);
  color: var(--tkm-color-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.tkm-hero__app-cats span.is-active {
  background: var(--tkm-color-primary);
  color: white;
}

/* 2×2 listing-grid in scherm */
.tkm-hero__app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 0 8px 8px;
  overflow: hidden;
}
.tkm-hero__app-card {
  background: var(--tkm-color-paper-bright);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--tkm-color-line);
}
.tkm-hero__app-card-img {
  width: 100%;
  height: 60px;
  background: var(--tkm-color-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.tkm-hero__app-card-img img { width: 100%; height: 100%; object-fit: cover; }
.tkm-hero__app-card-img--placeholder { color: var(--tkm-color-primary); opacity: 0.55; }
.tkm-hero__app-card-body { padding: 5px 7px 6px; }
.tkm-hero__app-card-title {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--tkm-color-ink);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 3px;
}
.tkm-hero__app-card-price {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--tkm-color-primary);
}

/* Home indicator */
.tkm-hero__phone-home {
  height: 26px;
  background: #0F1211;
  border-radius: 0 0 32px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tkm-hero__phone-home::after {
  content: '';
  width: 72px; height: 3px;
  background: rgba(255,255,255,.22);
  border-radius: 2px;
}

/* Floating badges */
@keyframes tkm-hero-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}

.tkm-hero__float {
  position: absolute;
  background: var(--tkm-color-paper-bright);
  border-radius: var(--tkm-radius-lg);
  box-shadow: 0 8px 32px -8px rgba(14,20,16,.28), 0 0 0 1px rgba(14,20,16,.07);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Float 1: Zojuist geplaatst — rechtsboven naast telefoon */
.tkm-hero__float--1 {
  top: 22%;
  right: 0;
  padding: 10px 14px;
  border-left: 3px solid var(--tkm-color-primary);
  max-width: 175px;
  animation: tkm-hero-float 3.8s ease-in-out infinite;
}

/* Float 2: Counter — linksonder */
.tkm-hero__float--2 {
  bottom: 26%;
  left: 0;
  padding: 10px 14px;
  animation: tkm-hero-float 3.8s ease-in-out 1.4s infinite;
}

/* Float 3: Gratis badge — rechtsmidden */
.tkm-hero__float--3 {
  bottom: 10%;
  right: 0;
  padding: 8px 14px;
  font-family: var(--tkm-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--tkm-color-accent);
  gap: 6px;
  animation: tkm-hero-float 3.8s ease-in-out 2.6s infinite;
}
.tkm-hero__float--3 svg { color: var(--tkm-color-accent); flex-shrink: 0; }

.tkm-hero__float-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tkm-color-primary);
  flex-shrink: 0;
  animation: tkm-pulse 2s ease-in-out infinite;
}
.tkm-hero__float-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tkm-hero__float-sup {
  font-size: 0.6rem;
  color: var(--tkm-color-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
}
.tkm-hero__float-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--tkm-color-ink);
  font-family: var(--tkm-font-display);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.tkm-hero__float-price {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--tkm-color-primary);
}
.tkm-hero__float-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--tkm-color-accent-soft);
  color: var(--tkm-color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tkm-hero__float-count {
  font-family: var(--tkm-font-display);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--tkm-color-ink);
}

@media (prefers-reduced-motion: reduce) {
  .tkm-hero__float { animation: none; }
  .tkm-hero__phone { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* Hero LIGHT v6 — 1:1 redesign naar referentie (cream bg, groen scherm,    */
/* één grote CTA, side-cards rechts naast telefoon).                        */
/* ═══════════════════════════════════════════════════════════════════════ */

.tkm-hero--light {
  background: linear-gradient(180deg, #FFF9F2 0%, #FFEEDC 60%, #FFE6CC 100%);
  padding-block: var(--tkm-space-9) var(--tkm-space-10);
  /* Z-index fix — dropdown moet over volgende secties heen vallen.
     overflow:visible op hero zelf zodat dropdown niet wordt afgeknipt;
     blobs blijven door .tkm-hero__bg's eigen overflow:hidden contained. */
  overflow: visible;
  position: relative;
  z-index: 30;
}

/* Bg-laag (met blobs) blijft binnen hero geclipt */
.tkm-hero--light .tkm-hero__bg {
  overflow: hidden;
  border-radius: inherit;
}

/* Verberg oude dark glows op light hero */
.tkm-hero--light .tkm-hero__glow,
.tkm-hero--light .tkm-hero__grid,
.tkm-hero--light .tkm-hero__decor { display: none; }

/* Decoratieve organische blob-vormen */
.tkm-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
.tkm-hero__blob--orange {
  width: 360px; height: 360px;
  background: rgba(255, 175, 130, 0.5);
  top: -80px; right: 5%;
}
.tkm-hero__blob--green {
  width: 280px; height: 280px;
  background: rgba(160, 200, 175, 0.4);
  bottom: -60px; left: 3%;
}
.tkm-hero__blob--peach {
  width: 220px; height: 220px;
  background: rgba(255, 200, 215, 0.4);
  top: 30%; left: 38%;
}

/* Subtiele dot-pattern overlay */
.tkm-hero__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(232, 93, 26, 0.08) 1.2px, transparent 1.5px);
  background-size: 26px 26px;
  opacity: 0.5;
}

/* Inner grid moet boven blobs staan */
.tkm-hero--light .tkm-hero__inner { position: relative; z-index: 1; }

/* ─── Tekst-kleuren voor light bg ─── */
.tkm-hero--light .tkm-hero__title {
  color: var(--tkm-color-ink);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-weight: 800;
  margin-top: 1.25rem;
}
.tkm-hero--light .tkm-hero__subtitle {
  color: var(--tkm-color-muted);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 520px;
  margin-top: 1rem;
}

/* Eyebrow met streepje ervoor */
.tkm-hero--light .tkm-eyebrow--accent {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--tkm-color-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
}
.tkm-eyebrow__line {
  display: inline-block;
  width: 28px;
  height: 2.5px;
  background: var(--tkm-color-primary);
  border-radius: 2px;
}

/* Counter chip (groen pill) */
.tkm-hero--light .tkm-hero__count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 1.4rem;
  padding: 8px 16px;
  background: rgba(47, 125, 59, 0.08);
  border: 1px solid rgba(47, 125, 59, 0.22);
  color: var(--tkm-color-accent);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
}
.tkm-hero__count-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tkm-color-accent);
  animation: tkm-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.tkm-hero--light .tkm-hero__count strong {
  color: var(--tkm-color-ink);
  font-weight: 800;
}
.tkm-hero--light .tkm-hero__count span {
  color: var(--tkm-color-muted);
  font-weight: 500;
}

/* ─── Zoekbalk in light hero ─── */
.tkm-hero--light .tkm-hero__search-wrap {
  margin-top: 1.75rem;
  position: relative;
  max-width: 580px;
  z-index: 50;  /* dropdown stack above page content below */
}
.tkm-hero--light .tkm-hero__search {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 50px;
  padding: 6px 6px 6px 22px;
  box-shadow: 0 12px 36px -10px rgba(14,20,16,.18), 0 0 0 1px rgba(14,20,16,.05);
  gap: 8px;
  flex-wrap: nowrap;
  max-width: none;
  border: none;
}
.tkm-hero--light .tkm-hero__search-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  background: transparent;
  padding: 0;
  border: none;
  position: relative;
}
.tkm-hero--light .tkm-hero__search-icon {
  color: var(--tkm-color-muted);
  flex-shrink: 0;
  position: static;
  transform: none;
  left: auto; top: auto;
}
.tkm-hero--light .tkm-hero__search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1rem;
  color: var(--tkm-color-ink);
  min-width: 0;
  padding: 0;
}
.tkm-hero--light .tkm-hero__search input::placeholder {
  color: rgba(14, 20, 16, 0.45);
}
.tkm-hero--light .tkm-hero__search-btn {
  background: var(--tkm-color-primary);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 13px 24px;
  font-family: var(--tkm-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  cursor: pointer;
  min-height: auto;
  transition: background 180ms ease, transform 180ms ease;
}
.tkm-hero--light .tkm-hero__search-btn:hover {
  background: #C44E12;
  color: white;
  transform: translateY(-1px);
}
.tkm-hero--light .tkm-hero__suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: white;
  border-radius: 18px;
  box-shadow: 0 20px 50px -10px rgba(14,20,16,.28), 0 0 0 1px rgba(14,20,16,.07);
  max-height: 380px;
  overflow-y: auto;
  list-style: none;
  padding: 6px;
  margin: 0;
  z-index: 100;  /* boven volgende secties */
}

/* Section-header in dropdown ("Categorieën" / "Zoektermen") */
.tkm-suggest-section {
  display: block;
  padding: 12px 14px 6px;
  font-family: var(--tkm-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tkm-color-muted);
  cursor: default;
  pointer-events: none;
  list-style: none;
}
.tkm-suggest-section:not(:first-child) {
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--tkm-color-line);
}

/* Suggest-items basis */
.tkm-hero--light .tkm-suggest-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.94rem;
  color: var(--tkm-color-ink);
  cursor: pointer;
  transition: background 140ms ease;
  list-style: none;
}
.tkm-hero--light .tkm-suggest-item:hover,
.tkm-hero--light .tkm-suggest-item:focus {
  background: var(--tkm-color-paper);
  outline: none;
}
.tkm-hero--light .tkm-suggest-item svg {
  flex-shrink: 0;
}
.tkm-hero--light .tkm-suggest-item span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Categorie-items: groen folder-icoon + count-badge rechts */
.tkm-hero--light .tkm-suggest-item--cat svg {
  color: var(--tkm-color-accent);
}
.tkm-hero--light .tkm-suggest-item--cat span {
  font-weight: 600;
}
.tkm-hero--light .tkm-suggest-item small {
  margin-left: auto;
  color: var(--tkm-color-muted);
  font-family: var(--tkm-font-display);
  font-size: 0.74rem;
  font-weight: 700;
  background: var(--tkm-color-paper);
  padding: 2px 9px;
  border-radius: 12px;
  flex-shrink: 0;
}
.tkm-hero--light .tkm-suggest-item--cat:hover small {
  background: rgba(47, 125, 59, 0.12);
  color: var(--tkm-color-accent);
}

/* Zoekterm-items: muted search-icoon */
.tkm-hero--light .tkm-suggest-item--search svg {
  color: var(--tkm-color-muted);
}
.tkm-hero--light .tkm-suggest-item--search:hover svg {
  color: var(--tkm-color-primary);
}

/* Quick-links onder zoekbalk */
.tkm-hero__quick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1.1rem;
  font-size: 0.88rem;
}
.tkm-hero__quick-label {
  color: var(--tkm-color-muted);
  font-weight: 600;
  margin-right: 4px;
}
.tkm-hero__quick a {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(14, 20, 16, 0.08);
  border-radius: 50px;
  color: var(--tkm-color-ink);
  text-decoration: none;
  font-weight: 500;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.tkm-hero__quick a:hover {
  background: white;
  border-color: var(--tkm-color-primary);
  color: var(--tkm-color-primary);
  transform: translateY(-1px);
}

/* Sell-link onderaan content */
.tkm-hero__sell-link {
  display: inline-block;
  margin-top: 1.25rem;
  color: var(--tkm-color-muted);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
.tkm-hero__sell-link:hover {
  color: var(--tkm-color-primary);
  border-bottom-color: var(--tkm-color-primary);
}
.tkm-hero__sell-link span {
  transition: transform 180ms ease;
  display: inline-block;
}
.tkm-hero__sell-link:hover span {
  transform: translateX(3px);
}

/* ─── Showcase: phone + side-cards horizontaal ─── */
.tkm-hero--light .tkm-hero__showcase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 1rem;
}

/* Mobiel: aside zichtbaar (telefoon + sidecards eronder) */
/* v0.19.x: showcase stacked op mobile — telefoon boven, sidecards-row eronder
   ipv naast elkaar (overflowde de viewport). Telefoon gecentreerd, sidecards
   als horizontale scroll-strip onderaan zodat ze allemaal te zien zijn zonder
   uit het scherm te vallen. */
@media (max-width: 959.98px) {
  .tkm-hero__aside {
    display: block !important;
    margin-top: 2rem;
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* schermrand-bescherming voor de roterende phone */
  }
  .tkm-hero--light .tkm-hero__showcase {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 0.5rem 0;
    width: 100%;
    max-width: 100%;
  }
  .tkm-hero__sidecards {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    padding: 4px 12px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tkm-hero__sidecards::-webkit-scrollbar { display: none; }
  .tkm-hero__sidecard {
    flex: 0 0 auto;
    width: 156px;
    scroll-snap-align: start;
    /* Reset desktop-rotaties zodat ze in een nette rij staan */
    transform: none !important;
    animation: none !important;
  }
  .tkm-hero__sidecard:hover,
  .tkm-hero__sidecard:focus-visible {
    transform: translateY(-3px) !important;
  }
  .tkm-hero--light .tkm-hero__phone {
    transform: rotate(-1.5deg);
    /* Voorkom dat de roterende phone breder oogt dan de viewport */
    max-width: calc(100vw - 32px);
  }
}
@media (max-width: 480px) {
  .tkm-hero--light .tkm-hero__phone {
    width: 220px;
    transform: rotate(-1deg);
  }
}

/* v0.19.x: hero-content overflow-fixes voor smalle viewports — eerder
   liep titel/eyebrow voorbij de schermrand en zat de Zoeken-knop deels
   buiten beeld omdat het zoekveld een min-width van 240px had. */
@media (max-width: 720px) {
  .tkm-hero__content { max-width: 100%; }
  .tkm-hero__title {
    font-size: clamp(1.85rem, 6.5vw + 0.4rem, 2.6rem);
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .tkm-hero__title br { display: none; } /* laat 'm natuurlijk wrappen ipv hardcoded breaks */
  .tkm-hero__subtitle { font-size: 0.95rem; }
  .tkm-eyebrow--accent {
    flex-wrap: wrap;
    font-size: 0.65rem;
    line-height: 1.3;
  }
  .tkm-hero__search-wrap { width: 100%; }
  .tkm-hero__search {
    flex-direction: column;
    padding: 8px;
    gap: 8px;
  }
  .tkm-hero__search-field {
    flex: 1 1 100%;
    width: 100%;
    min-height: 48px;
  }
  .tkm-hero__search-btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }
  .tkm-hero__quick {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}
@media (max-width: 480px) {
  .tkm-hero__title {
    font-size: clamp(1.6rem, 7.5vw, 2.1rem);
  }
}

/* Phone frame */
.tkm-hero--light .tkm-hero__phone {
  width: 248px;
  background: #0F1211;
  border-radius: 40px;
  padding: 10px 6px 0;
  box-shadow:
    0 36px 72px -16px rgba(14,20,16,.32),
    0 0 0 1.5px rgba(14,20,16,.08),
    inset 0 0 0 1px rgba(255,255,255,.04);
  transform: rotate(-3deg);
  transition: transform 420ms cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}
.tkm-hero--light .tkm-hero__phone:hover { transform: rotate(-1deg) scale(1.015); }

/* Statusbalk wit */
.tkm-hero--light .tkm-hero__phone-status {
  color: white;
  padding: 2px 12px 4px;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Scherm — CREAM met groene header (catalogus-UI) */
.tkm-hero--light .tkm-hero__phone-screen {
  background: #FAF7EE;
  border-radius: 30px 30px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

/* App-header (groen) */
.tkm-hero__app-header {
  background: var(--tkm-color-accent);
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.tkm-hero__app-brand {
  display: flex;
  align-items: center;
  gap: 5px;
  color: white;
  font-family: var(--tkm-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Trust-strip onder header */
.tkm-hero__app-trust {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: rgba(47, 125, 59, 0.07);
  border-bottom: 1px solid rgba(47, 125, 59, 0.15);
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--tkm-color-accent);
  flex-shrink: 0;
}
.tkm-hero__app-trust strong {
  color: var(--tkm-color-ink);
  font-weight: 800;
  font-size: 0.6rem;
}
.tkm-hero__app-trust-flag {
  display: inline-flex;
  flex-direction: column;
  width: 10px;
  height: 7px;
  border-radius: 1px;
  overflow: hidden;
  border: 0.5px solid rgba(0,0,0,.1);
  margin-left: auto;
  margin-right: 2px;
}
.tkm-hero__app-trust-flag span {
  flex: 1;
  display: block;
}

/* Mock zoekbalk in app */
.tkm-hero__app-searchbar {
  margin: 8px 10px 6px;
  background: white;
  border: 1px solid rgba(14, 20, 16, .08);
  border-radius: 14px;
  padding: 5px 10px;
  font-size: 0.55rem;
  color: var(--tkm-color-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

/* Categorie-chips — override v5 voor v7 light catalog */
.tkm-hero--light .tkm-hero__app-cats {
  display: flex;
  gap: 4px;
  padding: 2px 10px 6px;
  flex-shrink: 0;
  background: transparent;
}
.tkm-hero--light .tkm-hero__app-cats span {
  padding: 2.5px 8px;
  border-radius: 12px;
  font-size: 0.52rem;
  font-weight: 700;
  background: white;
  color: var(--tkm-color-muted);
  white-space: nowrap;
  border: 1px solid rgba(14, 20, 16, .07);
}
.tkm-hero--light .tkm-hero__app-cats .is-active {
  background: var(--tkm-color-primary);
  color: white;
  border-color: var(--tkm-color-primary);
}

/* Section-header */
.tkm-hero__app-sechead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 4px;
  flex-shrink: 0;
}
.tkm-hero__app-sechead-title {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--tkm-font-display);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--tkm-color-ink);
}
.tkm-hero__app-sechead-fire { font-size: 0.65rem; }
.tkm-hero__app-sechead-more {
  font-size: 0.52rem;
  font-weight: 700;
  color: var(--tkm-color-primary);
}

/* Catalogus-grid 2×2 — gepolijst met betere spacing en fonts */
.tkm-hero__app-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 4px 9px 10px;
  flex: 1;
  overflow: hidden;
}
.tkm-hero__app-item {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(14, 20, 16, .05);
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 10px -3px rgba(14, 20, 16, .1);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.tkm-hero__app-item-img {
  position: relative;
  width: 100%;
  height: 64px;
  background: linear-gradient(135deg, rgba(232,93,26,.14), rgba(47,125,59,.1));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tkm-hero__app-item-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.tkm-hero__app-item-img svg {
  color: var(--tkm-color-primary);
  opacity: 0.45;
}
.tkm-hero__app-item-badge {
  position: absolute;
  top: 4px; left: 4px;
  background: var(--tkm-color-primary);
  color: white;
  padding: 2px 6px;
  border-radius: 5px;
  font-family: var(--tkm-font-display);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 6px -1px rgba(232, 93, 26, .4);
}
.tkm-hero__app-item-badge--new {
  background: var(--tkm-color-accent);
  box-shadow: 0 2px 6px -1px rgba(47, 125, 59, .4);
}
/* Heart-icoontje rechts boven (favoriet) — marketplace-touch */
.tkm-hero__app-item-img::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 18px; height: 18px;
  background-color: rgba(255, 255, 255, 0.92);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  box-shadow: 0 2px 6px -2px rgba(14, 20, 16, .25);
}
.tkm-hero__app-item-body {
  padding: 5px 7px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tkm-hero__app-item-title {
  font-family: var(--tkm-font-display);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--tkm-color-ink);
  line-height: 1.25;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.tkm-hero__app-item-prices {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-height: 12px;
}
.tkm-hero__app-item-old {
  font-size: 0.55rem;
  color: var(--tkm-color-muted);
  text-decoration: line-through;
}
.tkm-hero__app-item-new {
  font-family: var(--tkm-font-display);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--tkm-color-primary);
  letter-spacing: -0.01em;
}
.tkm-hero__app-item-meta {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.55rem;
  color: var(--tkm-color-muted);
  font-weight: 600;
}
.tkm-hero__app-item-meta svg {
  flex-shrink: 0;
  color: var(--tkm-color-accent);
}

/* Home indicator */
.tkm-hero--light .tkm-hero__phone-home {
  height: 22px;
  background: #0F1211;
  border-radius: 0 0 34px 34px;
}

/* ─── Side-cards stack (rechts naast telefoon) ─── */
.tkm-hero__sidecards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: -10px;
  flex-shrink: 0;
}
.tkm-hero__sidecard {
  background: white;
  border-radius: 18px;
  padding: 9px;
  width: 144px;
  box-shadow: 0 14px 36px -10px rgba(14,20,16,.18), 0 0 0 1px rgba(14,20,16,.04);
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 240ms ease, box-shadow 240ms ease, background 240ms ease;
}
.tkm-hero__sidecard:hover,
.tkm-hero__sidecard:focus-visible {
  transform: translateY(-5px) rotate(0deg) !important;
  box-shadow: 0 24px 50px -12px rgba(14,20,16,.25);
  outline: none;
  color: inherit;
}
.tkm-hero__sidecard--1 {
  transform: rotate(2.5deg);
  animation: tkm-hero-float 4s ease-in-out infinite;
}
.tkm-hero__sidecard--2 {
  transform: translateX(10px);
  animation: tkm-hero-float 4s ease-in-out 1.3s infinite;
  z-index: 2;
}
.tkm-hero__sidecard--3 {
  transform: rotate(-2.5deg);
  animation: tkm-hero-float 4s ease-in-out 2.6s infinite;
}
.tkm-hero__sidecard-img {
  position: relative;
  width: 100%;
  height: 80px;
  background: linear-gradient(135deg, rgba(232,93,26,.12), rgba(47,125,59,.08));
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tkm-color-primary);
}
.tkm-hero__sidecard-img img { width: 100%; height: 100%; object-fit: cover; }
.tkm-hero__sidecard-img svg { opacity: 0.5; }
.tkm-hero__sidecard-badge {
  position: absolute;
  top: 5px; left: 5px;
  background: var(--tkm-color-primary);
  color: white;
  padding: 2px 7px;
  border-radius: 5px;
  font-family: var(--tkm-font-display);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 3px 10px -2px rgba(232, 93, 26, .4);
}
.tkm-hero__sidecard-body {
  padding: 2px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tkm-hero__sidecard-title {
  font-family: var(--tkm-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--tkm-color-ink);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tkm-hero__sidecard-prices {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.tkm-hero__sidecard-old {
  font-size: 0.65rem;
  color: var(--tkm-color-muted);
  text-decoration: line-through;
}
.tkm-hero__sidecard-new {
  font-family: var(--tkm-font-display);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--tkm-color-primary);
}
.tkm-hero__sidecard-btn {
  display: inline-flex;
  align-items: center;
  background: var(--tkm-color-accent);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-family: var(--tkm-font-display);
  font-size: 0.62rem;
  font-weight: 700;
  align-self: flex-start;
  margin-top: 2px;
  transition: background 180ms ease;
}
.tkm-hero__sidecard:hover .tkm-hero__sidecard-btn {
  background: #235D2D;
}

@media (prefers-reduced-motion: reduce) {
  .tkm-hero__sidecard,
  .tkm-hero--light .tkm-hero__phone {
    animation: none;
    transition: none;
  }
}

/* Trust strip ------------------------------------------------------------- */
.tkm-trust {
  background: var(--tkm-color-paper-bright);
  border-bottom: 1px solid var(--tkm-color-line);
  padding: var(--tkm-space-5) 0;
}
.tkm-trust__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tkm-space-5);
}
@media (min-width: 768px) {
  .tkm-trust__list { grid-template-columns: repeat(4, 1fr); }
}
.tkm-trust__item {
  display: flex;
  gap: var(--tkm-space-3);
  align-items: flex-start;
}
.tkm-trust__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--tkm-color-accent-soft);
  color: var(--tkm-color-accent);
  border-radius: var(--tkm-radius-md);
}
.tkm-trust__item:first-child .tkm-trust__icon { background: var(--tkm-color-primary-soft); color: var(--tkm-color-primary); }
.tkm-trust__title {
  display: block;
  font-family: var(--tkm-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.tkm-trust__text {
  font-size: var(--tkm-text-sm);
  color: var(--tkm-color-muted);
}

/* Category grid ----------------------------------------------------------- */
/* Category grid (Uber-stijl featured cards) -------------------------------- */
.tkm-catgrid { background: #ffffff; }

/* Uber-stijl featured category cards (.tkm-catfeat__*) */
.tkm-catfeat__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 600px) { .tkm-catfeat__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tkm-catfeat__grid { grid-template-columns: repeat(3, 1fr); } }

.tkm-catfeat__card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 1.25rem;
  background: var(--tkm-color-paper);
  border: 1px solid var(--tkm-color-line);
  border-top: 3px solid var(--cat-hex, var(--tkm-color-primary));
  border-radius: var(--tkm-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
  min-height: 120px;
}
.tkm-catfeat__card:hover {
  background: var(--tkm-color-paper-bright);
  box-shadow: 0 8px 28px rgba(14,20,16,.12);
  transform: translateY(-3px);
}
.tkm-catfeat__text { flex: 1; min-width: 0; }
.tkm-catfeat__name {
  font-family: var(--tkm-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--tkm-color-ink);
  margin: 0 0 .35rem;
  line-height: 1.25;
}
.tkm-catfeat__desc {
  font-size: .83rem;
  color: var(--tkm-color-muted);
  margin: 0 0 .8rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: none;
}
.tkm-catfeat__cta {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--tkm-color-primary);
  border: 1.5px solid var(--tkm-color-primary);
  border-radius: var(--tkm-radius-sm);
  padding: .3rem .65rem;
  transition: background .18s ease, color .18s ease;
  white-space: nowrap;
}
.tkm-catfeat__card:hover .tkm-catfeat__cta {
  background: var(--tkm-color-primary);
  color: #fff;
}
.tkm-catfeat__emoji {
  font-size: 2.8rem;
  line-height: 1;
  flex-shrink: 0;
  width: 60px;
  text-align: center;
  filter: drop-shadow(0 2px 6px rgba(14,20,16,.12));
}
.tkm-catfeat__count {
  display: block;
  font-size: .73rem;
  color: var(--tkm-color-muted);
  margin-top: .2rem;
}

.tkm-catfeat__foot {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
/* Illustratie-container: vaste 80x80, voorkomt dat een inline SVG zonder
   width/height-attribuut de kaart uitrekt en de pagina horizontaal doet schuiven */
.tkm-catfeat__visual {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tkm-radius-md);
  background: var(--cat-soft, rgba(232,93,26,.1));
  transition: transform 280ms ease, background 200ms ease;
}
.tkm-catfeat__visual svg {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  transition: transform 320ms cubic-bezier(.34,1.56,.64,1);
}
.tkm-catfeat__card:hover .tkm-catfeat__visual {
  background: var(--cat-hex, var(--tkm-color-primary));
}
.tkm-catfeat__card:hover .tkm-catfeat__visual svg {
  transform: scale(1.12) rotate(4deg);
}

/* Legacy catgrid__list hidden when new markup is used */
.tkm-catgrid__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tkm-space-4);
}
@media (min-width: 768px) { .tkm-catgrid__list { grid-template-columns: repeat(4, 1fr); } }

.tkm-catgrid__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--tkm-space-5);
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  position: relative;
  overflow: hidden;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  min-height: 170px;
}
.tkm-catgrid__card:hover {
  transform: translateY(-3px);
  border-color: var(--tkm-color-primary);
  box-shadow: var(--tkm-shadow-md);
}
.tkm-catgrid__card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 140px; height: 140px;
  background: radial-gradient(circle at top right, var(--tkm-color-primary-soft), transparent 70%);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.tkm-catgrid__card:hover::before { opacity: 1; }

.tkm-catgrid__icon {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  border-radius: var(--tkm-radius-md);
}
.tkm-catgrid__label {
  font-family: var(--tkm-font-display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--tkm-color-ink);
  margin-top: auto;
}
.tkm-catgrid__examples {
  font-size: var(--tkm-text-xs);
  color: var(--tkm-color-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tkm-catgrid__count {
  font-size: var(--tkm-text-sm);
  color: var(--tkm-color-accent);
  font-weight: 500;
}
.tkm-catgrid__arrow {
  position: absolute;
  top: var(--tkm-space-5);
  right: var(--tkm-space-5);
  color: var(--tkm-color-muted);
  transition: color 200ms ease, transform 200ms ease;
}
.tkm-catgrid__card:hover .tkm-catgrid__arrow {
  color: var(--tkm-color-primary);
  transform: translate(2px, -2px);
}

/* USP grid ---------------------------------------------------------------- */
/* v2: kaarten op warme papierkleur, per-kaart kleur via CSS custom property --usp-hex */
.tkm-usp { background: var(--tkm-color-paper); position: relative; }

.tkm-usp__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) { .tkm-usp__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tkm-usp__list { grid-template-columns: repeat(5, 1fr); } }
.tkm-usp__list > li { display: flex; }

.tkm-usp__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  padding: 1.75rem 1.5rem;
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-top: 3px solid var(--usp-hex, #E85D1A);
  border-radius: 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.tkm-usp__card:hover {
  background: var(--tkm-color-paper-bright);
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(14,20,16,.1);
}
/* Shimmer-streak bij hover over USP-kaart */
@keyframes tkm-usp-shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}
.tkm-usp__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg,
    transparent 40%,
    rgba(255,255,255,.22) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  background-position: -200% center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}
.tkm-usp__card:hover::after {
  opacity: 1;
  animation: tkm-usp-shimmer 0.6s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
  .tkm-usp__card::after { display: none; }
}
.tkm-usp__arrow {
  display: inline-flex;
  margin-top: auto;
  padding-top: var(--tkm-space-3);
  color: var(--usp-hex, #07a8a8);
  transition: transform 180ms ease;
}
.tkm-usp__card:hover .tkm-usp__arrow {
  transform: translate(3px, -3px);
}
.tkm-usp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--usp-soft, rgba(7,168,168,.13));
  color: var(--usp-hex, #07a8a8);
  border-radius: 50%;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 6px 20px -8px var(--usp-hex, #07a8a8);
}
.tkm-usp__icon svg { width: 28px; height: 28px; stroke-width: 1.85; transition: transform 280ms cubic-bezier(.34,1.56,.64,1); }
.tkm-usp__card:hover .tkm-usp__icon svg { transform: scale(1.2) rotate(8deg); }
/* Per-kaart kleur via inline CSS custom props — reset old nth-child rule */
.tkm-usp__card:nth-child(odd) .tkm-usp__icon {
  background: var(--usp-soft, rgba(7,168,168,.13));
  color: var(--usp-hex, #07a8a8);
}
.tkm-usp__title {
  font-family: var(--tkm-font-display);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 .5rem;
  color: var(--tkm-color-ink);
  line-height: 1.3;
}
.tkm-usp__text {
  font-size: .88rem;
  color: var(--tkm-color-muted);
  line-height: 1.6;
  flex: 1;
}

/* USP Features v4 — drie geïllustreerde feature-kaarten (vervangt 5-kolomgrid) */
.tkm-usp__features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .tkm-usp__features { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .tkm-usp__features { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
.tkm-usp__feat {
  background: var(--tkm-color-paper-bright);
  border-radius: var(--tkm-radius-xl);
  padding: 2rem 1.75rem 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  border: 1.5px solid var(--tkm-color-line);
  box-shadow: 0 2px 14px rgba(14,20,16,.04);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.tkm-usp__feat:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px -14px rgba(14,20,16,.12);
  border-color: var(--feat-hex, var(--tkm-color-primary));
}
.tkm-usp__scene {
  width: 180px;
  height: 140px;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 18px rgba(14,20,16,.07));
  transition: transform 280ms cubic-bezier(.34,1.56,.64,1);
}
.tkm-usp__feat:hover .tkm-usp__scene { transform: translateY(-4px) scale(1.03); }
.tkm-usp__feat-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}
.tkm-usp__feat-title {
  font-family: var(--tkm-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tkm-color-ink);
  line-height: 1.3;
}
.tkm-usp__feat-text {
  font-size: 0.9rem;
  color: var(--tkm-color-muted);
  line-height: 1.65;
  max-width: 30ch;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .tkm-usp__feat, .tkm-usp__scene { transition: none; }
}

/* How it works ------------------------------------------------------------ */
/* v3: donkere bosgroene achtergrond (brand), gekleurde iconen, witte kaarten */
.tkm-how {
  background: var(--tkm-color-surface-dark);
  color: var(--tkm-color-paper);
  position: relative;
  overflow: hidden;
}
.tkm-how::before { display: none; }
.tkm-how .tkm-eyebrow--accent { color: var(--tkm-color-primary); }
.tkm-how h2                   { color: var(--tkm-color-paper); }
.tkm-how .tkm-section__lead   { color: rgba(246,243,238,.72); }
.tkm-how .tkm-link            { color: var(--tkm-color-paper); border-bottom-color: rgba(246,243,238,.35); }

/* Gestippelde connector tussen stappen (desktop) */
.tkm-how__track { position: relative; }
@media (min-width: 768px) {
  .tkm-how__track::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 20%;
    right: 20%;
    height: 2px;
    background: repeating-linear-gradient(
      to right,
      rgba(246,243,238,.2) 0px, rgba(246,243,238,.2) 10px,
      transparent 10px, transparent 22px
    );
    pointer-events: none;
    z-index: 0;
  }
}

.tkm-how__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) { .tkm-how__list { grid-template-columns: repeat(3, 1fr); } }

/* v0.23.140: bij 4 items → 2x2 grid op tablet, 4 cols op desktop.
   Voorheen bleef 4e item alleen op een nieuwe rij staan (3+1) wat
   visueel verwarrend was. CSS :has() detecteert nu of de laatste
   list-item de 4e is en past de columns aan. */
@media (min-width: 768px) {
  .tkm-how__list:has(.tkm-how__step:nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .tkm-how__list:has(.tkm-how__step:nth-child(4):last-child) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tkm-how__step {
  padding: 2rem 1.75rem;
  background: rgba(246,243,238,.05);
  border: 1px solid rgba(246,243,238,.1);
  border-radius: 1.25rem;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: background .2s ease, transform .2s ease;
}
.tkm-how__step:hover {
  background: rgba(246,243,238,.09);
  transform: translateY(-3px);
}
@media (min-width: 768px) {
  .tkm-how__step { align-items: center; text-align: center; }
}

/* Oud: verborgen — nieuwe markup gebruikt .tkm-how__visual */
.tkm-how__num  { display: none; }
.tkm-how__icon { display: none; }

/* Stap-visueel: gekleurd icoon-cirkel + getal-badge */
.tkm-how__visual {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}
.tkm-how__icon-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px -8px currentcolor;
}
.tkm-how__icon-ring svg { width: 34px; height: 34px; stroke-width: 1.85; }
/* Icon-animaties ----------------------------------------------------------- */
@keyframes tkm-icon-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}
@keyframes tkm-icon-sonar {
  0%   { box-shadow: 0 0 0 0 var(--ring-color, rgba(232,93,26,.5)),
                     0 8px 24px -8px currentcolor; }
  65%  { box-shadow: 0 0 0 18px rgba(232,93,26,0),
                     0 8px 24px -8px currentcolor; }
  100% { box-shadow: 0 0 0 0 rgba(232,93,26,0),
                     0 8px 24px -8px currentcolor; }
}
@keyframes tkm-icon-sonar-green {
  0%   { box-shadow: 0 0 0 0 rgba(47,125,59,.5),
                     0 8px 24px -8px currentcolor; }
  65%  { box-shadow: 0 0 0 18px rgba(47,125,59,0),
                     0 8px 24px -8px currentcolor; }
  100% { box-shadow: 0 0 0 0 rgba(47,125,59,0),
                     0 8px 24px -8px currentcolor; }
}
@keyframes tkm-badge-pop {
  0%, 80%, 100% { transform: scale(1) rotate(0deg); }
  40%            { transform: scale(1.4) rotate(15deg); }
}

/* Stap 1 (oranje): float + sonar-ring */
.tkm-how__step:nth-child(1) .tkm-how__icon-ring {
  animation: tkm-icon-float 3.8s ease-in-out infinite,
             tkm-icon-sonar 3s ease-out infinite;
}
/* Stap 2 (groen): float met 1s delay + groene sonar */
.tkm-how__step:nth-child(2) .tkm-how__icon-ring {
  animation: tkm-icon-float 3.8s ease-in-out infinite 1.2s,
             tkm-icon-sonar-green 3s ease-out infinite 1s;
}
/* Stap 3 (oranje): float met 2s delay + sonar */
.tkm-how__step:nth-child(3) .tkm-how__icon-ring {
  animation: tkm-icon-float 3.8s ease-in-out infinite 2.4s,
             tkm-icon-sonar 3s ease-out infinite 2s;
}
/* Badge knippert/poppt op hover van de stap */
.tkm-how__step:hover .tkm-how__badge {
  animation: tkm-badge-pop 0.5s ease;
}
/* Reduce motion: schakel animaties uit voor gebruikers die dat prefereren */
@media (prefers-reduced-motion: reduce) {
  .tkm-how__icon-ring { animation: none !important; }
  .tkm-how__badge     { animation: none !important; }
}

.tkm-how__badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  color: #fff;
  border: 2.5px solid var(--tkm-color-surface-dark);
  font-family: var(--tkm-font-display, system-ui, sans-serif);
  line-height: 1;
}

.tkm-how__title {
  font-family: var(--tkm-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--tkm-color-paper);
  margin: 0 0 .65rem;
  line-height: 1.3;
}
.tkm-how__text {
  color: rgba(246,243,238,.72);
  font-size: .94rem;
  line-height: 1.65;
  margin: 0;
}

/* Voet-link onder de drie stappen */
.tkm-how__foot {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
.tkm-how__foot a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--tkm-color-paper);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(246,243,238,.3);
  padding-bottom: .15rem;
  transition: border-color .2s;
}
.tkm-how__foot a:hover { border-color: var(--tkm-color-paper); }
.tkm-how__foot a svg   { transition: transform .2s; }
.tkm-how__foot a:hover svg { transform: translateX(3px); }

/* FAQ accordion ----------------------------------------------------------- */
.tkm-faq { background: var(--tkm-color-paper); }
.tkm-faq__inner {
  max-width: 800px;
  margin: 0 auto;
}
.tkm-faq__item {
  border-bottom: 1px solid var(--tkm-color-line);
}
.tkm-faq__item:first-child { border-top: 1px solid var(--tkm-color-line); }
.tkm-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.25rem 1.5rem;
  font-family: var(--tkm-font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--tkm-color-ink);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 1rem;
  transition: color .15s;
}
.tkm-faq__q:hover { color: var(--tkm-color-primary); }
.tkm-faq__icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease, background .15s;
  font-style: normal;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1;
}
.tkm-faq__item.is-open .tkm-faq__icon {
  transform: rotate(45deg);
  background: var(--tkm-color-primary);
  color: #fff;
}
.tkm-faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease, padding .3s ease;
}
.tkm-faq__item.is-open .tkm-faq__a {
  max-height: 600px;
}
.tkm-faq__a-inner {
  padding: 0 1.5rem 1.25rem;
}
.tkm-faq__a-inner p {
  color: var(--tkm-color-muted);
  line-height: 1.7;
  max-width: none;
  font-size: var(--tkm-text-base);
}
.tkm-faq__a-inner a {
  color: var(--tkm-color-primary);
  border-bottom: 1.5px solid transparent;
  transition: border-color .15s;
}
.tkm-faq__a-inner a:hover { border-bottom-color: currentColor; }
.tkm-faq__foot {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
.tkm-faq__foot a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--tkm-color-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color .15s;
}
.tkm-faq__foot a:hover { border-bottom-color: currentColor; }

/* Featured listings ------------------------------------------------------- */
.tkm-featured { background: var(--tkm-color-paper); }
.tkm-featured__grid {
  /* v0.23.97: <ul> reset — default padding-left:40px duwde de grid op mobiel
     buiten viewport. Plus list-style off, geen bullets. */
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tkm-space-4);
  /* Voorkom horizontale overflow op smalle schermen */
  width: 100%;
  min-width: 0;
}
.tkm-featured__grid > li {
  /* List-items zijn grid-cells; min-width:0 zorgt dat lange titels niet de
     hele cel breder dan 1fr maken. */
  min-width: 0;
  list-style: none;
}
@media (min-width: 768px) { .tkm-featured__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .tkm-featured__grid { grid-template-columns: repeat(4, 1fr); } }

/* v0.23.84 — clean product cards (Nike Dunk reference style)
   - Wit card met subtle shadow + rounded corners
   - Image bovenin met VASTE 4:3 aspect-ratio (geen scheve cards meer)
   - Heart-icon top-right
   - Badge top-left (Tweedekans / Nieuw)
   - Body: cat → title → meta → bottom (price + CTA)
*/
.tkm-listing {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #ececec;
  box-shadow: 0 2px 8px rgba(14, 20, 16, 0.04);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  /* v0.23.97: container-bound — geen overflow naar rechts op mobiel */
  min-width: 0;
  max-width: 100%;
}
.tkm-listing:hover {
  transform: translateY(-4px);
  border-color: #f3a26d;
  box-shadow: 0 12px 32px rgba(232, 93, 26, 0.12), 0 4px 12px rgba(14, 20, 16, 0.08);
}

.tkm-listing__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f3f0eb;
}
.tkm-listing__media-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.tkm-listing__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}
.tkm-listing:hover .tkm-listing__media img {
  transform: scale(1.04);
}
.tkm-listing__media[data-hue="0"] { background: linear-gradient(135deg, #f4e6d2 0%, #e9d2b1 100%); }
.tkm-listing__media[data-hue="1"] { background: linear-gradient(135deg, #e2e8d6 0%, #c5d3b8 100%); }
.tkm-listing__media[data-hue="2"] { background: linear-gradient(135deg, #f0e0d2 0%, #dcc1a4 100%); }
.tkm-listing__media[data-hue="3"] { background: linear-gradient(135deg, #e8e4dc 0%, #d0cabd 100%); }
.tkm-listing__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(14, 20, 16, 0.2);
}
.tkm-listing__placeholder svg {
  width: 50%;
  max-width: 80px;
}

/* Badge (Tweedekans / Nieuw) — top-left */
.tkm-listing__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #0E1410;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(14, 20, 16, 0.08);
  z-index: 2;
}
.tkm-listing__badge--new {
  background: #E85D1A;
  color: #ffffff;
}

/* v0.23.98 — favourites button styling ALLEEN voor onze homepage cards
   (.tkm-listing__media). Archive cards (.rtcl-listing-card) krijgen
   GEEN overrides meer — RTCL's eigen hover-only-gedrag blijft daar
   intact, zoals user gevraagd heeft. */

/* Position van de meta-buttons container (homepage cards) */
.tkm-listing__media .rtcl-meta-buttons {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Tooltip-wrapper reset binnen onze homepage cards */
.tkm-listing__media .rtcl-meta-buttons .rtcl-tooltip-wrapper {
  display: inline-block;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* De favourites-knop = wit cirkeltje met heart-icoon (homepage cards only) */
.tkm-listing__media .rtcl-favourites {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  color: #6a6a6a !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(14, 20, 16, 0.14);
  transition: color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  cursor: pointer;
  /* GEEN font-size: 0 hier — dat collapse de icon-font glyph waardoor 'ie
     onzichtbaar werd. Label-text wordt apart verborgen via display:none. */
}
.tkm-listing__media .rtcl-favourites:hover {
  color: #ff3b30 !important;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.25);
}

/* Verberg de tekst-label "Toevoegen aan Favorieten" — alleen icon op cards */
.tkm-listing__media .rtcl-favourites .favourite-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* Heart-icon (RTCL @font-face) — expliciet size/color zodat 'ie zichtbaar
   tegen witte cirkel-achtergrond. */
.tkm-listing__media .rtcl-favourites .rtcl-icon-heart,
.tkm-listing__media .rtcl-favourites .rtcl-icon-heart-empty {
  font-size: 18px !important;
  line-height: 1 !important;
  color: inherit;
}

/* Active state — toegevoegd aan favorieten */
.tkm-listing__media .rtcl-favourites.rtcl-added-favourite {
  color: #ff3b30 !important;
}

/* Body */
.tkm-listing__body {
  padding: 14px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  /* v0.23.97: voorkom dat body de card breder maakt dan de grid-cell */
  min-width: 0;
}
.tkm-listing__cat {
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #E85D1A;
  line-height: 1;
}
.tkm-listing__title {
  margin: 0;
  font-family: var(--tkm-font-display, inherit);
  font-weight: 600;
  font-size: 0.98rem;
  color: #0E1410;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.01em;
  /* v0.23.97: lange woorden zonder spatie breken op mobiel ipv overflow */
  word-break: break-word;
  overflow-wrap: anywhere;
}
.tkm-listing__title a {
  color: inherit;
  text-decoration: none;
  transition: color 140ms ease;
}
.tkm-listing__title a:hover {
  color: #E85D1A;
}
.tkm-listing__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
  color: #8a8a8a;
  flex-wrap: wrap;
}
.tkm-listing__meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tkm-listing__meta svg {
  flex-shrink: 0;
}
.tkm-listing__date {
  margin-left: auto;
}

/* Bottom row: price + CTA-button (zoals "Buy Now" referentie) */
.tkm-listing__bottom {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tkm-listing__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}
.tkm-listing__price-value {
  font-family: var(--tkm-font-display, inherit);
  font-weight: 700;
  font-size: 1.1rem;
  color: #0E1410;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tkm-listing__price-value--muted {
  color: #8a8a8a !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
}
.tkm-listing__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: #0E1410;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 140ms ease, transform 140ms ease;
  flex-shrink: 0;
}
.tkm-listing__cta:hover {
  background: #E85D1A;
  transform: translateX(2px);
}
.tkm-listing__cta svg {
  margin-top: 1px;
  transition: transform 140ms ease;
}
.tkm-listing__cta:hover svg {
  transform: translateX(2px);
}

/* Mobile responsive */
@media (max-width: 720px) {
  .tkm-featured__grid {
    /* Iets kleinere gap op mobiel zodat 2-koloms cards meer ruimte krijgen */
    gap: 10px;
  }
  .tkm-listing {
    border-radius: 14px;
  }
  .tkm-listing__body {
    padding: 10px 10px;
    gap: 4px;
  }
  .tkm-listing__title {
    font-size: 0.88rem;
  }
  .tkm-listing__price-value {
    font-size: 0.95rem;
  }
  .tkm-listing__cta {
    padding: 6px 10px;
    font-size: 0.74rem;
  }
  .tkm-listing__cta svg {
    display: none;
  }
  .tkm-listing__bottom {
    gap: 6px;
  }
  .tkm-listing__cat {
    font-size: 0.62rem;
  }
}
/* Smalle telefoons (< 380px): nog compactere padding en CTA */
@media (max-width: 380px) {
  .tkm-listing__body {
    padding: 8px 8px;
  }
  .tkm-listing__cta {
    padding: 5px 8px;
    font-size: 0.7rem;
  }
}

/* Featured listings empty-state ------------------------------------------ */
.tkm-featured__empty {
  display: flex;
  justify-content: center;
  margin-top: var(--tkm-space-5);
}
.tkm-listing__price-value--muted {
  color: var(--tkm-color-muted) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
}

/* Hero without cards — content krijgt meer ruimte */
.tkm-hero--nowide .tkm-hero__inner { grid-template-columns: 1fr !important; }
.tkm-hero--nowide .tkm-hero__content { max-width: 720px; }

/* CTA band ---------------------------------------------------------------- */
.tkm-ctaband { padding: var(--tkm-space-7) 0; }
@media (min-width: 768px) { .tkm-ctaband { padding: var(--tkm-space-8) 0; } }

.tkm-ctaband__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tkm-space-5);
  align-items: center;
  justify-content: space-between;
  padding: var(--tkm-space-6);
  border-radius: var(--tkm-radius-xl);
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) { .tkm-ctaband__inner { padding: var(--tkm-space-7); } }

/* Orange band — donkere tekst voor AAA-contrast (5.9:1 ipv 2.9:1) */
.tkm-ctaband--primary .tkm-ctaband__inner {
  background: var(--tkm-color-primary);
  color: #fff;
}
.tkm-ctaband--primary .tkm-ctaband__inner::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(to right, black 20%, transparent 70%);
  mask-image: linear-gradient(to right, black 20%, transparent 70%);
  pointer-events: none;
}
.tkm-ctaband__content { flex: 1 1 400px; position: relative; z-index: 1; }
/* v0.23.21: tekst WIT op oranje (was zwart, slecht contrast) */
.tkm-ctaband--primary .tkm-ctaband__heading { color: #fff; }
.tkm-ctaband__heading {
  font-size: clamp(1.75rem, 2.4vw + 1rem, 2.5rem);
  line-height: 1.1;
  margin-bottom: var(--tkm-space-3);
}
.tkm-ctaband--primary .tkm-ctaband__text { color: rgba(255, 255, 255, .92); }
.tkm-ctaband__text {
  font-size: var(--tkm-text-lg);
  max-width: 52ch;
}
.tkm-ctaband__actions {
  display: flex;
  align-items: center;
  gap: var(--tkm-space-4);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* On-primary button + link — v0.23.21: button blijft donker (sterk contrast),
   link wordt wit met underline zodat hij leesbaar is op oranje. */
.tkm-ctaband--primary .tkm-btn--on-primary { background: var(--tkm-color-ink); color: #fff; }
.tkm-ctaband--primary .tkm-btn--on-primary:hover { background: var(--tkm-color-surface-dark); }
.tkm-ctaband--primary .tkm-link--on-primary { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.tkm-ctaband--primary .tkm-link--on-primary:hover { opacity: 0.85; }

/* Footer v0.23.141 — Untitled UI stijl ------------------------------------
   Eén consistente donker-warm achtergrond (#1f1c17) door de hele footer.
   Subtle groen-gradient accent rechts-bovenaan in newsletter-strip.
   Layout: newsletter-top → brand-col + 5 link-cols → cities → bottom-bar.
   --------------------------------------------------------------------- */
.tkm-footer {
  background: #1f1c17;
  color: rgba(246, 243, 238, 0.78);
  position: relative;
}
.tkm-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;
}

/* Achtergrond-decoratie: scattered line-art figuren ---------------------
   v0.23.145: verspreid op absolute pos door de hele footer, heel laag
   opacity zodat ze sfeer geven zonder de inhoud te overstemmen. Geen
   animaties (rustig). Pointer-events none zodat ze klikbaar gedrag
   van de content niet blokkeren. Content krijgt position: relative +
   z-index: 1 om er bovenop te liggen. */
.tkm-footer__bg-figures {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.06);
}
.tkm-footer__bg-fig {
  position: absolute;
}
/* Verspreid over de hoogte: hoofdgrid + cities + bottom-bar */
.tkm-footer__bg-fig--1 { top: 4%;  left: 3%;   width: 90px; height: 90px; transform: rotate(-8deg); }
.tkm-footer__bg-fig--2 { top: 12%; right: 6%;  width: 110px; height: 110px; transform: rotate(12deg); }
.tkm-footer__bg-fig--3 { top: 38%; left: 24%;  width: 72px; height: 72px; transform: rotate(-4deg); }
.tkm-footer__bg-fig--4 { top: 46%; right: 18%; width: 80px; height: 80px; transform: rotate(6deg); }
.tkm-footer__bg-fig--5 { top: 28%; left: 50%;  width: 100px; height: 100px; transform: rotate(-3deg) translateX(-50%); }
.tkm-footer__bg-fig--6 { bottom: 16%; left: 6%;  width: 86px; height: 86px; transform: rotate(4deg); }
.tkm-footer__bg-fig--7 { bottom: 8%; right: 4%;  width: 70px; height: 70px; transform: rotate(-10deg); }

@media (max-width: 900px) {
  /* Op mobile: minder figuren tonen om visuele rust te houden */
  .tkm-footer__bg-fig--3,
  .tkm-footer__bg-fig--4,
  .tkm-footer__bg-fig--5 { display: none; }
  .tkm-footer__bg-fig--1 { width: 64px; height: 64px; }
  .tkm-footer__bg-fig--2 { width: 70px; height: 70px; }
  .tkm-footer__bg-fig--6 { width: 60px; height: 60px; }
  .tkm-footer__bg-fig--7 { width: 56px; height: 56px; }
}

/* Zorg dat content boven de achtergrond-figuren ligt */
.tkm-footer__main,
.tkm-footer__cities,
.tkm-footer__bottom { position: relative; z-index: 1; }

/* Hoofdgrid: brand + 5 link-kolommen ------------------------------------ */
.tkm-footer__main {
  padding: var(--tkm-space-7, 4rem) 0 var(--tkm-space-6, 3rem);
}
.tkm-footer__main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-6, 3rem) var(--tkm-space-5, 2.5rem);
}
@media (min-width: 720px) {
  .tkm-footer__main-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--tkm-space-6, 3rem) var(--tkm-space-5, 2.5rem);
  }
}
@media (min-width: 1100px) {
  .tkm-footer__main-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  }
}

.tkm-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 360px;
}
.tkm-footer__brand-desc {
  color: rgba(246, 243, 238, 0.62);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}

.tkm-footer__nav {
  display: contents;
}
@media (max-width: 1099px) {
  .tkm-footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tkm-space-5, 2rem);
    grid-column: 1 / -1;
  }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .tkm-footer__nav {
    grid-template-columns: 1fr 1fr 1fr;
    grid-column: 2 / -1;
  }
}

.tkm-footer__col h4 {
  font-family: var(--tkm-font-display);
  font-size: 0.78rem;
  color: rgba(246, 243, 238, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 1rem;
  font-weight: 600;
}
.tkm-footer__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
}
.tkm-footer__col a {
  color: rgba(246, 243, 238, 0.82);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 160ms ease;
}
.tkm-footer__col a:hover,
.tkm-footer__col a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* v0.23.146: /kennisbank/{slug}/ article-page ----------------------- */
.tkm-kb-article { display: block; }

/* Hero met cream-gradient en breadcrumb */
.tkm-kb-article__hero {
  position: relative;
  background: linear-gradient(180deg, #faf7f1 0%, #f5efe4 100%);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.tkm-kb-article__hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.tkm-kb-article__hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
}
.tkm-kb-article__hero-blob--orange {
  width: 420px; height: 420px;
  top: -160px; left: -100px;
  background: radial-gradient(circle, rgba(234, 91, 29, 0.18) 0%, transparent 70%);
}
.tkm-kb-article__hero-blob--green {
  width: 460px; height: 460px;
  bottom: -200px; right: -130px;
  background: radial-gradient(circle, rgba(47, 125, 59, 0.14) 0%, transparent 70%);
}
.tkm-kb-article__hero-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.tkm-kb-article__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  font-size: 0.85rem;
  color: #8a8478;
  margin-bottom: 0.4rem;
}
.tkm-kb-article__breadcrumb a {
  color: #5a554c;
  text-decoration: none;
  transition: color 160ms ease;
}
.tkm-kb-article__breadcrumb a:hover { color: var(--tkm-color-primary, #ea5b1d); text-decoration: underline; }
.tkm-kb-article__breadcrumb-current { color: #2a2620; font-weight: 500; }

.tkm-kb-article__tag {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3rem 0.7rem;
  background: rgba(234, 91, 29, 0.1);
  color: var(--tkm-color-primary, #ea5b1d);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
}
.tkm-kb-article__title {
  font-family: var(--tkm-font-display);
  font-size: clamp(1.85rem, 4vw, 2.8rem);
  line-height: 1.15;
  color: #1a1612;
  margin: 0.2rem 0 0.4rem;
  letter-spacing: -0.015em;
}
.tkm-kb-article__meta {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  color: #5a554c;
  font-size: 0.9rem;
}
.tkm-kb-article__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Body */
.tkm-kb-article__body-wrap { max-width: 760px; }
.tkm-kb-article__body {
  background: #fff;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 24px -12px rgba(0, 0, 0, 0.06);
}
.tkm-kb-article__intro {
  font-size: 1.15rem;
  line-height: 1.6;
  color: #2a2620;
  margin: 0 0 1.8rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-weight: 500;
}
.tkm-kb-article__h2 {
  font-family: var(--tkm-font-display);
  font-size: 1.45rem;
  line-height: 1.3;
  color: #1a1612;
  margin: 2rem 0 0.8rem;
  letter-spacing: -0.01em;
}
.tkm-kb-article__h2:first-of-type { margin-top: 0.5rem; }
.tkm-kb-article__p {
  font-size: 1rem;
  line-height: 1.7;
  color: #2a2620;
  margin: 0 0 1rem;
}
.tkm-kb-article__list {
  margin: 0.4rem 0 1.4rem;
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.tkm-kb-article__list li {
  color: #2a2620;
  line-height: 1.6;
  padding-left: 0.3rem;
}
.tkm-kb-article__list li::marker {
  color: var(--tkm-color-primary, #ea5b1d);
  font-weight: 700;
}

/* Prev/Next navigation */
.tkm-kb-article__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2rem 0 1.5rem;
}
@media (max-width: 600px) {
  .tkm-kb-article__nav { grid-template-columns: 1fr; }
}
.tkm-kb-article__nav-link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  color: #2a2620;
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.tkm-kb-article__nav-link:hover {
  border-color: var(--tkm-color-primary, #ea5b1d);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -16px rgba(234, 91, 29, 0.25);
}
.tkm-kb-article__nav-link--next {
  grid-column: 2 / 3;
  text-align: right;
  flex-direction: row;
  justify-content: flex-end;
}
@media (max-width: 600px) {
  .tkm-kb-article__nav-link--next { grid-column: 1; }
}
.tkm-kb-article__nav-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(234, 91, 29, 0.1);
  color: var(--tkm-color-primary, #ea5b1d);
  transition: background 200ms ease, color 200ms ease;
}
.tkm-kb-article__nav-link:hover .tkm-kb-article__nav-arrow {
  background: var(--tkm-color-primary, #ea5b1d);
  color: #fff;
}
.tkm-kb-article__nav-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tkm-kb-article__nav-label {
  font-size: 0.75rem;
  color: #8a8478;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.tkm-kb-article__nav-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #2a2620;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tkm-kb-article__back {
  text-align: center;
  margin-top: 1rem;
}

/* v0.23.142: /hoe-het-werkt/ — light hero met phone-mockup -----------
   Vervangt de oude tkm-hero--with-figures (te donker, conflict met de
   donkere RTCL category-nav er direct boven). Nu cream-licht zodat er
   visueel onderscheid is. Phone mockup rechts geeft visueel gewicht. */

.tkm-hiw-hero {
  position: relative;
  background: linear-gradient(180deg, #faf7f1 0%, #f5efe4 100%);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.tkm-hiw-hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.tkm-hiw-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
}
.tkm-hiw-hero__blob--orange {
  width: 480px; height: 480px;
  top: -180px; left: -120px;
  background: radial-gradient(circle, rgba(234, 91, 29, 0.22) 0%, transparent 70%);
}
.tkm-hiw-hero__blob--green {
  width: 520px; height: 520px;
  bottom: -200px; right: -150px;
  background: radial-gradient(circle, rgba(47, 125, 59, 0.18) 0%, transparent 70%);
}
.tkm-hiw-hero__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0,0,0,0.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,0,0,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.6;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.tkm-hiw-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 980px) {
  .tkm-hiw-hero__inner {
    grid-template-columns: 1.15fr 1fr;
    gap: 4rem;
  }
}

.tkm-hiw-hero__copy { display: flex; flex-direction: column; gap: 1.1rem; }
.tkm-hiw-hero__copy .tkm-eyebrow {
  color: var(--tkm-color-primary, #ea5b1d);
  font-weight: 700;
}
.tkm-hiw-hero__title {
  font-family: var(--tkm-font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.08;
  color: #1a1612;
  letter-spacing: -0.02em;
  margin: 0;
}
.tkm-hiw-hero__title-accent { color: var(--tkm-color-primary, #ea5b1d); }
.tkm-hiw-hero__lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.6;
  color: #5a554c;
  margin: 0;
  max-width: 56ch;
}
.tkm-hiw-hero__ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.4rem; }
.tkm-hiw-hero__ctas .tkm-btn { display: inline-flex; align-items: center; gap: 0.5rem; }

.tkm-hiw-hero__bullets {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.tkm-hiw-hero__bullets li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: #2a2620;
  font-size: 0.95rem;
}
.tkm-hiw-hero__bullets strong { font-weight: 600; }
.tkm-hiw-hero__bullet-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(47, 125, 59, 0.12);
  color: #2f7d3b;
}

/* Phone mockup --------------------------------------------------------- */
.tkm-hiw-hero__phone {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 9 / 18;
}
.tkm-hiw-hero__phone-frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: #1a1612;
  border-radius: 38px;
  padding: 12px;
  box-shadow:
    0 30px 80px -30px rgba(0, 0, 0, 0.4),
    0 10px 30px -15px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.tkm-hiw-hero__phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background: #1a1612;
  border-radius: 999px;
  z-index: 2;
}
.tkm-hiw-hero__phone-screen {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #faf7f1 0%, #ffffff 100%);
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 40px 14px 14px;
}
.tkm-hiw-hero__phone-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.tkm-hiw-hero__phone-avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ea5b1d, #c93f08);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  position: relative;
}
.tkm-hiw-hero__phone-online {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 10px; height: 10px;
  background: #2ecc71;
  border: 2px solid #fff;
  border-radius: 999px;
}
.tkm-hiw-hero__phone-who { display: flex; flex-direction: column; line-height: 1.2; }
.tkm-hiw-hero__phone-who strong { font-size: 0.88rem; color: #2a2620; }
.tkm-hiw-hero__phone-who span { font-size: 0.72rem; color: #2f7d3b; font-weight: 500; }

.tkm-hiw-hero__phone-listing {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  margin-top: 8px;
  background: rgba(0,0,0,0.025);
  border-radius: 10px;
}
.tkm-hiw-hero__phone-listing-thumb {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: #f0e7d8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tkm-hiw-hero__phone-listing-thumb svg { width: 32px; height: 32px; }
.tkm-hiw-hero__phone-listing-info { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.tkm-hiw-hero__phone-listing-info strong { font-size: 0.82rem; color: #2a2620; }
.tkm-hiw-hero__phone-listing-info span { font-size: 0.7rem; color: #8a8478; }
.tkm-hiw-hero__phone-price {
  font-weight: 700;
  color: #ea5b1d;
  font-size: 0.95rem;
}

.tkm-hiw-hero__phone-chat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding: 0 4px;
}
.tkm-hiw-hero__phone-msg {
  font-size: 0.78rem;
  padding: 8px 12px;
  border-radius: 14px;
  max-width: 85%;
  line-height: 1.35;
}
.tkm-hiw-hero__phone-msg--mine {
  background: #ea5b1d;
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.tkm-hiw-hero__phone-msg--theirs {
  background: rgba(0,0,0,0.06);
  color: #2a2620;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.tkm-hiw-hero__phone-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.06);
  padding: 10px 14px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  margin-top: 2px;
}
.tkm-hiw-hero__phone-typing span {
  width: 5px; height: 5px;
  background: rgba(0,0,0,0.4);
  border-radius: 999px;
  animation: tkm-hiw-typing 1.4s infinite ease-in-out;
}
.tkm-hiw-hero__phone-typing span:nth-child(2) { animation-delay: 0.2s; }
.tkm-hiw-hero__phone-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes tkm-hiw-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* Floating badges naast de phone */
.tkm-hiw-hero__phone-badge {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow:
    0 12px 30px -10px rgba(0,0,0,0.18),
    0 4px 10px -4px rgba(0,0,0,0.08);
  font-size: 0.82rem;
  color: #2a2620;
  white-space: nowrap;
  animation: tkm-hiw-float 5s ease-in-out infinite;
}
.tkm-hiw-hero__phone-badge strong { font-weight: 700; color: #1a1612; }
.tkm-hiw-hero__phone-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 999px;
}
.tkm-hiw-hero__phone-badge--save { top: 12%; left: -40px; }
.tkm-hiw-hero__phone-badge--save .tkm-hiw-hero__phone-badge-icon {
  background: rgba(234, 91, 29, 0.12);
  color: #ea5b1d;
}
.tkm-hiw-hero__phone-badge--co2 { bottom: 18%; right: -50px; animation-delay: 1.5s; }
.tkm-hiw-hero__phone-badge--co2 .tkm-hiw-hero__phone-badge-icon {
  background: rgba(47, 125, 59, 0.14);
  color: #2f7d3b;
}
@keyframes tkm-hiw-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (max-width: 700px) {
  .tkm-hiw-hero__phone-badge--save { left: -10px; }
  .tkm-hiw-hero__phone-badge--co2 { right: -10px; }
}

/* FAQ accordion -------------------------------------------------------- */
.tkm-faq-acc__wrap { max-width: 820px; }
.tkm-faq-acc {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 2rem;
}
.tkm-faq-acc__item {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.tkm-faq-acc__item[open] {
  border-color: rgba(234, 91, 29, 0.25);
  box-shadow: 0 6px 20px -10px rgba(234, 91, 29, 0.18);
}
.tkm-faq-acc__q {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.02rem;
  color: #2a2620;
  user-select: none;
}
.tkm-faq-acc__q::-webkit-details-marker { display: none; }
.tkm-faq-acc__q-text { flex: 1; }
.tkm-faq-acc__q-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  color: #5a554c;
  transition: transform 240ms ease, background 200ms ease, color 200ms ease;
}
.tkm-faq-acc__item[open] .tkm-faq-acc__q-toggle {
  transform: rotate(180deg);
  background: rgba(234, 91, 29, 0.1);
  color: #ea5b1d;
}
.tkm-faq-acc__a {
  padding: 0 1.4rem 1.2rem;
  color: #5a554c;
  line-height: 1.6;
  animation: tkm-faq-fade 280ms ease;
}
.tkm-faq-acc__a p { margin: 0; }
.tkm-faq-acc__a a { color: var(--tkm-color-primary, #ea5b1d); text-decoration: underline; }
@keyframes tkm-faq-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Light "surface" sectie-variant — vervangt de zware tkm-deep/tkm-how
   afwisseling. Eén egale achtergrond met subtle accent. */
.tkm-section--surface {
  background: var(--tkm-color-surface-soft, #faf7f1);
  padding-block: var(--tkm-space-6, 4rem);
}

/* tkm-hiw-split: 2-koloms koper/verkoper splitsing */
.tkm-hiw-split { padding-block: var(--tkm-space-6, 4rem); }
.tkm-hiw-split__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .tkm-hiw-split__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.tkm-hiw-split__col {
  /* v0.23.144: cream bg i.p.v. wit, zodat cards contrasteren met de
     witte body achtergrond van /hoe-het-werkt/. Past bij de hero-
     gradient (zelfde cream-tint) en de footer's warm-bruin lijn. */
  background: #faf5ea;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1.25rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.06);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.tkm-hiw-split__col:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.14);
  border-color: rgba(0, 0, 0, 0.12);
}
/* Buy-card krijgt subtle orange tint, sell-card subtle groen tint
   zodat ze ook visueel onderscheidbaar zijn van elkaar */
.tkm-hiw-split__col--buy {
  background: linear-gradient(180deg, #fdf6ec 0%, #faf3e3 100%);
}
.tkm-hiw-split__col--sell {
  background: linear-gradient(180deg, #f4f9f0 0%, #ecf4e6 100%);
}
.tkm-hiw-split__col h3 {
  margin: 0.2rem 0 0.6rem;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--tkm-color-text, #2a2620);
}
.tkm-hiw-split__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(234, 91, 29, 0.08);
  color: var(--tkm-color-brand-primary, #ea5b1d);
}
.tkm-hiw-split__col--sell .tkm-hiw-split__icon {
  background: rgba(47, 125, 59, 0.08);
  color: #2f7d3b;
}
.tkm-hiw-split__list {
  margin: 0.4rem 0 1.4rem;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.tkm-hiw-split__list li {
  color: var(--tkm-color-text-muted, #5a554c);
  line-height: 1.55;
}
.tkm-hiw-split__list li strong {
  color: var(--tkm-color-text, #2a2620);
  font-weight: 600;
}
.tkm-hiw-split__col .tkm-btn { align-self: flex-start; margin-top: auto; }

/* v0.23.139: Visible breadcrumbs (Breadcrumbs.php) ----------------------
   v0.23.156: uitlijning gefixt. De breadcrumb rendert op wp_body_open
   (full-width body-context), dus margin-inline:auto op de <ol> centreerde
   niet betrouwbaar — Salient's `ol { margin: 0 }` overschreef het en op
   sidebar-templates klopte de centrering helemaal niet. Oplossing:
   centreer via PADDING op de wrapper met calc() i.p.v. margin op de list.
   (100% - 1240px)/2 = exact de marge die .tkm-container ook aanhoudt, dus
   de breadcrumb-tekst lijnt nu overal uit met de site-content. */
.tkm-breadcrumbs {
  padding-top: var(--tkm-space-3);
  padding-bottom: var(--tkm-space-3);
  padding-left: max(var(--tkm-space-4, 20px), calc((100% - 1240px) / 2));
  padding-right: max(var(--tkm-space-4, 20px), calc((100% - 1240px) / 2));
  box-sizing: border-box;
  /* v0.23.157: witte achtergrond i.p.v. transparent — de body-bg op de
     shop is blauwgrijs (#F0F5FA), waardoor de breadcrumb-strook als een
     opvallende losse balk tussen header en hero verscheen ("te breed").
     Wit sluit naadloos aan bij de (altijd witte) header erboven. */
  background: #fff;
}
.tkm-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  font-size: var(--tkm-text-sm, 0.875rem);
  color: var(--tkm-color-text-muted, #6b6760);
}
.tkm-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.tkm-breadcrumbs__link {
  color: var(--tkm-color-text-muted, #6b6760);
  text-decoration: none;
  transition: color 160ms ease;
}
.tkm-breadcrumbs__link:hover,
.tkm-breadcrumbs__link:focus-visible {
  color: var(--tkm-color-brand-primary, #ea5b1d);
  text-decoration: underline;
}
.tkm-breadcrumbs__sep {
  color: var(--tkm-color-text-muted, #a7a39a);
  font-weight: 300;
  user-select: none;
}
.tkm-breadcrumbs__current {
  color: var(--tkm-color-text, #2a2620);
  font-weight: 500;
  /* Truncate lange titels op mobile */
  max-width: 60ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .tkm-breadcrumbs__current {
    max-width: 22ch;
  }
}

/* v0.23.137: Stedelijke SEO-strip --------------------------------------- */
/* Cities-strip ---------------------------------------------------------- */
.tkm-footer__cities {
  border-top: 1px solid rgba(246, 243, 238, 0.06);
  padding: var(--tkm-space-4, 1.25rem) 0;
}
.tkm-footer__cities .tkm-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.tkm-footer__cities-label {
  color: rgba(246, 243, 238, 0.5);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tkm-footer__cities-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tkm-footer__cities-list a {
  color: rgba(246, 243, 238, 0.78);
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 160ms ease;
}
.tkm-footer__cities-list a:hover,
.tkm-footer__cities-list a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Bottom bar: copyright + legal links + (geen social, die staat boven) -- */
.tkm-footer__bottom {
  border-top: 1px solid rgba(246, 243, 238, 0.08);
  padding: var(--tkm-space-4, 1.25rem) 0;
}
.tkm-footer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
}
.tkm-footer__copyright {
  color: rgba(246, 243, 238, 0.5);
  font-size: 0.82rem;
}
.tkm-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tkm-footer__legal a {
  color: rgba(246, 243, 238, 0.62);
  font-size: 0.82rem;
  text-decoration: none;
  transition: color 160ms ease;
}
.tkm-footer__legal a:hover,
.tkm-footer__legal a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Social icons (brand-col bottom) --------------------------------------- */
.tkm-footer__social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}
.tkm-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: rgba(246, 243, 238, 0.7);
  background: rgba(246, 243, 238, 0.06);
  border-radius: 10px;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.tkm-footer__social a:hover {
  background: var(--tkm-color-primary, #ea5b1d);
  color: #fff;
  transform: translateY(-1px);
}

/* Hero decoratief SVG-element (homepage) ---------------------------------- */
.tkm-hero__decor {
  position: absolute;
  pointer-events: none;
  opacity: 0.5;
}
.tkm-hero__decor--a {
  top: 12%;
  left: 6%;
  width: 110px; height: 110px;
  transform: rotate(-12deg);
  animation: tkm-float-slow 12s ease-in-out infinite;
}
@keyframes tkm-float-slow {
  0%, 100% { transform: rotate(-12deg) translateY(0); }
  50%      { transform: rotate(-9deg) translateY(-8px); }
}
@media (max-width: 960px) { .tkm-hero__decor { display: none; } }

/* Hero compact variant (voor /hoe-het-werkt/, /over-ons/ etc) ------------- */
.tkm-hero--compact { padding: var(--tkm-space-8) 0 var(--tkm-space-7); position: relative; }
.tkm-hero--compact .tkm-hero__title { font-size: clamp(2rem, 3vw + 1rem, 3.5rem); max-width: 20ch; }
.tkm-hero--compact .tkm-hero__subtitle { max-width: 52ch; }

/* Compact-hero krijgt 2 zwevende geometrische accenten rechts.
   CSS-only — werkt op elke compact-hero zonder PHP-aanpassing. */
.tkm-hero--compact .tkm-hero__bg::before,
.tkm-hero--compact .tkm-hero__bg::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: var(--tkm-radius-lg);
  backdrop-filter: blur(2px);
}
.tkm-hero--compact .tkm-hero__bg::before {
  top: 18%;
  right: 8%;
  width: 160px; height: 100px;
  background: linear-gradient(135deg, rgba(232,93,26,.12), rgba(232,93,26,0) 70%);
  border: 1px solid rgba(232,93,26,.28);
  transform: rotate(-6deg);
  animation: tkm-drift-a 14s ease-in-out infinite;
}
.tkm-hero--compact .tkm-hero__bg::after {
  bottom: 14%;
  right: 18%;
  width: 110px; height: 110px;
  background: linear-gradient(135deg, rgba(47,125,59,.14), rgba(47,125,59,0) 70%);
  border: 1px solid rgba(47,125,59,.3);
  border-radius: 50%;
  transform: rotate(10deg);
  animation: tkm-drift-b 16s ease-in-out infinite;
}
@keyframes tkm-drift-a {
  0%, 100% { transform: rotate(-6deg) translate(0, 0); }
  50%      { transform: rotate(-3deg) translate(-8px, -4px); }
}
@keyframes tkm-drift-b {
  0%, 100% { transform: rotate(10deg) translate(0, 0); }
  50%      { transform: rotate(14deg) translate(6px, 8px); }
}
@media (max-width: 900px) {
  .tkm-hero--compact .tkm-hero__bg::before,
  .tkm-hero--compact .tkm-hero__bg::after { display: none; }
}

/* Optionele stat-pills zwevend in compact hero (use in PHP als aside) ----- */
.tkm-hero__pills {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-3);
  pointer-events: none;
}
.tkm-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(246, 243, 238, .07);
  border: 1px solid rgba(246, 243, 238, .18);
  border-radius: var(--tkm-radius-full);
  color: var(--tkm-color-paper);
  font-family: var(--tkm-font-display);
  font-weight: 500;
  font-size: 0.88rem;
  backdrop-filter: blur(8px);
  white-space: nowrap;
  box-shadow: var(--tkm-shadow-md);
}
.tkm-hero__pill--1 { transform: rotate(-4deg); animation: tkm-pill-float 7s ease-in-out infinite; }
.tkm-hero__pill--2 { transform: rotate(3deg) translateX(-12px); animation: tkm-pill-float 9s ease-in-out infinite 0.5s; }
.tkm-hero__pill--3 { transform: rotate(-2deg) translateX(6px); animation: tkm-pill-float 8s ease-in-out infinite 1s; }
@keyframes tkm-pill-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}
@media (max-width: 960px) { .tkm-hero__pills { display: none; } }

/* Deep-dive (hoe-het-werkt) ----------------------------------------------- */
.tkm-deep { background: var(--tkm-color-paper-bright); }
.tkm-deep__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-5);
}
@media (min-width: 960px) { .tkm-deep__list { grid-template-columns: repeat(3, 1fr); } }

.tkm-deep__item {
  padding: var(--tkm-space-6);
  background: var(--tkm-color-paper);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-3);
}
.tkm-deep__badge {
  align-self: flex-start;
  padding: 4px 10px;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  border-radius: var(--tkm-radius-full);
  font-family: var(--tkm-font-display);
  font-size: var(--tkm-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.tkm-deep__badge--accent { background: var(--tkm-color-accent-soft); color: var(--tkm-color-accent); }
.tkm-deep__item h3 {
  font-family: var(--tkm-font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--tkm-color-ink);
  margin: 0;
}
.tkm-deep__item p { color: var(--tkm-color-muted); line-height: 1.6; margin: 0; }
.tkm-deep__bullets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--tkm-text-sm);
  color: var(--tkm-color-ink);
}
.tkm-deep__bullets li {
  position: relative;
  padding-left: 24px;
  list-style: none;
}
.tkm-deep__bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 14px; height: 14px;
  background:
    linear-gradient(var(--tkm-color-accent), var(--tkm-color-accent)) 50% 50%/8px 2px no-repeat,
    linear-gradient(var(--tkm-color-accent), var(--tkm-color-accent)) 50% 50%/2px 8px no-repeat,
    var(--tkm-color-accent-soft);
  background: var(--tkm-color-accent-soft);
  border-radius: 50%;
  border: 2px solid var(--tkm-color-accent);
}
.tkm-deep__bullets li::after {
  content: '';
  position: absolute;
  left: 4px; top: 11px;
  width: 6px; height: 3px;
  border-left: 2px solid var(--tkm-color-accent);
  border-bottom: 2px solid var(--tkm-color-accent);
  transform: rotate(-45deg);
  transform-origin: top left;
}

/* Page-wrapper (RTCL + other wrapped pages) ------------------------------- */
.tkm-body--wrapped .tkm-main--page {
  min-height: 60vh;
  background: var(--tkm-color-paper);
}
.tkm-page__head {
  padding: var(--tkm-space-7) 0 var(--tkm-space-5);
  background: var(--tkm-color-paper-bright);
  border-bottom: 1px solid var(--tkm-color-line);
}
.tkm-page__title {
  margin: 0;
  font-size: clamp(1.875rem, 2vw + 1rem, 2.75rem);
}
.tkm-page__body {
  padding: var(--tkm-space-7) 0 var(--tkm-space-8);
  background: var(--tkm-color-paper);
}
.tkm-page__body > :not(.tkm-container):not(.tkm-section):not(section):not(.rtcl):not([class*="rtcl"]) {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--tkm-space-5);
  padding-right: var(--tkm-space-5);
}
@media (min-width: 768px) {
  .tkm-page__body > :not(.tkm-container):not(.tkm-section):not(section):not(.rtcl):not([class*="rtcl"]) {
    padding-left: var(--tkm-space-6);
    padding-right: var(--tkm-space-6);
  }
}

/* Header & footer overlay — alle Salient-chrome verbergen ─────────────────
   Van toepassing op listing-detail, RTCL-archieven, verkoperspagina's en
   elke andere pagina die wél door Salient gerenderd wordt maar via
   HeaderOverlay onze eigen header+footer krijgt (body.tkm-overlay).
   Selectors zijn Salient-specifiek; als Salient ze hernoemt valt het terug
   naar "dubbele header/footer" — zichtbare bug, makkelijk te fixen.       */

/* ── Salient header (alle varianten) ─────────────────────────────────── */
body.tkm-overlay #header-outer,
body.tkm-overlay #header-space,
body.tkm-overlay #page-header-bg,
body.tkm-overlay .page-submenu-wrap,
body.tkm-overlay .page-header-bg-image-wrap,
body.tkm-overlay .page-submenu,
body.tkm-overlay #ascrail2000,
body.tkm-overlay .nectar_top_bar,
body.tkm-overlay #sticky-nav,
body.tkm-overlay .sticky-wrapper,
body.tkm-overlay .mobile-header-tab-bar-wrap,
body.tkm-overlay .nectar-mobile-header,
body.tkm-overlay #mobile-header { display: none !important; }

/* ── Salient footer (alle varianten) ─────────────────────────────────── */
body.tkm-overlay #footer-outer,
body.tkm-overlay #footer-widgets,
body.tkm-overlay #copyright,
body.tkm-overlay .footer-outer,
body.tkm-overlay #footer-bar { display: none !important; }

body.tkm-overlay #ajax-content-wrap,
body.tkm-overlay #ajax-loading-screen { margin-top: 0 !important; padding-top: 0 !important; }
body.tkm-overlay.material { padding-top: 0 !important; }

/* Onze header zit nu in document-flow, niet sticky/floating over Salient-layout */
body.tkm-overlay > .tkm-header { position: relative; }

/* Mobile spacing refinement — tighter sections on small screens ---------- */
@media (max-width: 640px) {
  .tkm-section { padding: var(--tkm-space-7) 0; }
  .tkm-hero { padding: var(--tkm-space-7) 0 var(--tkm-space-6); }
  .tkm-hero--compact { padding: var(--tkm-space-6) 0 var(--tkm-space-5); }
  .tkm-section__head { margin-bottom: var(--tkm-space-5); }
}

/* Consistent block-afstand op desktop tussen opeenvolgende witte secties */
.tkm-usp + .tkm-how,
.tkm-trust + .tkm-catgrid,
.tkm-featured + .tkm-usp { padding-top: var(--tkm-space-8); }

/* Helpcentrum — 4 quick-routes ------------------------------------------- */
.tkm-help-quick { padding: var(--tkm-space-7) 0 var(--tkm-space-6); background: var(--tkm-color-paper); }
.tkm-help-quick__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tkm-space-4);
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 768px) { .tkm-help-quick__grid { grid-template-columns: repeat(4, 1fr); } }
.tkm-help-quick__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--tkm-space-5);
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  height: 100%;
  text-align: center;
  align-items: center;
}
.tkm-help-quick__card:hover { transform: translateY(-3px); border-color: var(--tkm-color-primary); box-shadow: var(--tkm-shadow-md); }
.tkm-help-quick__icon {
  width: 52px; height: 52px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  border-radius: var(--tkm-radius-md);
  margin-bottom: var(--tkm-space-3);
}
.tkm-help-quick__icon--accent { background: var(--tkm-color-accent-soft); color: var(--tkm-color-accent); }
.tkm-help-quick__card strong { font-family: var(--tkm-font-display); font-size: 1.05rem; color: var(--tkm-color-ink); }
.tkm-help-quick__card span { font-size: var(--tkm-text-sm); color: var(--tkm-color-muted); }

/* Helpcentrum — 9 topic-tiles -------------------------------------------- */
.tkm-help-topics { background: var(--tkm-color-paper-bright); padding-top: var(--tkm-space-7); }
.tkm-help-topics__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-4);
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 640px) { .tkm-help-topics__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tkm-help-topics__grid { grid-template-columns: repeat(3, 1fr); } }

.tkm-help-topics__card {
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-2);
  padding: var(--tkm-space-5);
  background: var(--tkm-color-paper);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  height: 100%;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.tkm-help-topics__card:hover { transform: translateY(-3px); border-color: var(--tkm-color-primary); box-shadow: var(--tkm-shadow-sm); }
.tkm-help-topics__tag {
  align-self: flex-start;
  padding: 3px 10px;
  font-family: var(--tkm-font-display);
  font-size: var(--tkm-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--tkm-color-accent-soft);
  color: var(--tkm-color-accent);
  border-radius: var(--tkm-radius-full);
}
.tkm-help-topics__card strong {
  font-family: var(--tkm-font-display);
  font-size: 1.08rem;
  color: var(--tkm-color-ink);
  line-height: 1.3;
}
.tkm-help-topics__card p { color: var(--tkm-color-muted); font-size: 0.92rem; line-height: 1.55; flex-grow: 1; margin: 0; }
.tkm-help-topics__more {
  font-family: var(--tkm-font-display);
  font-size: var(--tkm-text-sm);
  font-weight: 600;
  color: var(--tkm-color-primary);
  margin-top: auto;
  padding-top: 4px;
}

/* Helpcentrum — contact fallback ----------------------------------------- */
.tkm-help-contact { background: var(--tkm-color-paper); }
.tkm-help-contact__box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tkm-space-5);
  align-items: center;
  justify-content: space-between;
  padding: var(--tkm-space-6);
  background: var(--tkm-color-surface-dark);
  color: var(--tkm-color-paper);
  border-radius: var(--tkm-radius-xl);
}
body.tkm-body .tkm-help-contact__box h2 { color: var(--tkm-color-paper); margin: var(--tkm-space-2) 0 var(--tkm-space-2); font-size: 1.5rem; }
.tkm-help-contact__box p { color: rgba(246,243,238,.78); margin: 0; }
.tkm-help-contact__box .tkm-eyebrow { color: var(--tkm-color-primary); }
.tkm-help-contact__actions { display: flex; align-items: center; gap: var(--tkm-space-4); flex-wrap: wrap; }
.tkm-help-contact__actions .tkm-link { color: var(--tkm-color-paper); border-bottom-color: rgba(246,243,238,.5); }

/* FAQ — sticky topic tabs ------------------------------------------------ */
.tkm-faq-tabs {
  background: var(--tkm-color-paper-bright);
  border-bottom: 1px solid var(--tkm-color-line);
  position: sticky;
  top: 72px;
  z-index: 40;
  overflow-x: auto;
  scrollbar-width: none;
}
.tkm-faq-tabs::-webkit-scrollbar { display: none; }
.tkm-faq-tabs ul {
  display: flex;
  gap: var(--tkm-space-2);
  padding: var(--tkm-space-3) 0;
  list-style: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  white-space: nowrap;
}
.tkm-faq-tabs li { list-style: none; }
.tkm-faq-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--tkm-radius-full);
  font-family: var(--tkm-font-display);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--tkm-color-ink);
  background: var(--tkm-color-paper);
  border: 1px solid var(--tkm-color-line);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.tkm-faq-tabs a:hover,
.tkm-faq-tabs a:focus-visible {
  background: var(--tkm-color-primary-soft);
  border-color: var(--tkm-color-primary);
  color: var(--tkm-color-primary);
}
.tkm-faq-tabs small { color: var(--tkm-color-muted); font-weight: 500; }
.tkm-faq-tabs a:hover small { color: var(--tkm-color-primary); opacity: 0.8; }

/* FAQ — sections --------------------------------------------------------- */
.tkm-faq__main { display: flex; flex-direction: column; gap: var(--tkm-space-8); }
.tkm-faq__section { scroll-margin-top: 140px; }
.tkm-faq__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tkm-space-3);
  margin-bottom: var(--tkm-space-4);
  padding-bottom: var(--tkm-space-3);
  border-bottom: 2px solid var(--tkm-color-sand);
}
body.tkm-body .tkm-faq__section-head h2 { margin: 0; font-size: 1.75rem; }
.tkm-faq__section-count {
  font-size: var(--tkm-text-sm);
  color: var(--tkm-color-muted);
  font-weight: 500;
}

/* Helpcentrum grid -------------------------------------------------------- */
.tkm-help { background: var(--tkm-color-paper); }
.tkm-help__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-4);
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 640px) { .tkm-help__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tkm-help__grid { grid-template-columns: repeat(3, 1fr); } }
.tkm-help__card {
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-3);
  padding: var(--tkm-space-6);
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  height: 100%;
}
.tkm-help__card:hover {
  transform: translateY(-3px);
  border-color: var(--tkm-color-primary);
  box-shadow: var(--tkm-shadow-md);
}
.tkm-help__icon {
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  border-radius: var(--tkm-radius-md);
}
.tkm-help__icon--accent { background: var(--tkm-color-accent-soft); color: var(--tkm-color-accent); }
body.tkm-body .tkm-help__card h3 { font-size: 1.15rem; margin: 0; }
.tkm-help__card p { color: var(--tkm-color-muted); font-size: 0.95rem; flex-grow: 1; margin: 0; }
.tkm-help__more {
  font-family: var(--tkm-font-display);
  font-size: var(--tkm-text-sm);
  font-weight: 600;
  color: var(--tkm-color-primary);
  margin-top: auto;
}

/* Kennisbank grid --------------------------------------------------------- */
.tkm-kb { background: var(--tkm-color-paper-bright); }
.tkm-kb__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-4);
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 640px) { .tkm-kb__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tkm-kb__grid { grid-template-columns: repeat(3, 1fr); } }
.tkm-kb__card {
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-3);
  padding: var(--tkm-space-5);
  background: var(--tkm-color-paper);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  height: 100%;
  transition: transform 200ms ease, border-color 200ms ease;
}
.tkm-kb__card:hover { transform: translateY(-3px); border-color: var(--tkm-color-accent); }
.tkm-kb__tag {
  align-self: flex-start;
  padding: 3px 10px;
  font-family: var(--tkm-font-display);
  font-size: var(--tkm-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--tkm-color-accent-soft);
  color: var(--tkm-color-accent);
  border-radius: var(--tkm-radius-full);
}
body.tkm-body .tkm-kb__card h3 { font-size: 1.1rem; margin: 0; line-height: 1.3; }
.tkm-kb__card p { color: var(--tkm-color-muted); font-size: 0.92rem; margin: 0; flex-grow: 1; }
.tkm-kb__meta { color: var(--tkm-color-muted); font-size: var(--tkm-text-xs); }
.tkm-kb__empty { margin-top: var(--tkm-space-6); text-align: center; color: var(--tkm-color-muted); }

/* Veilig handelen --------------------------------------------------------- */
.tkm-safety { background: var(--tkm-color-paper); }
.tkm-safety__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-5);
}
@media (min-width: 768px) { .tkm-safety__grid { grid-template-columns: repeat(2, 1fr); } }
.tkm-safety__col {
  padding: var(--tkm-space-6);
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
}
body.tkm-body .tkm-safety__col h2 { font-size: 1.5rem; margin: var(--tkm-space-3) 0; }

.tkm-safety-signals { background: var(--tkm-color-paper-bright); }

.tkm-report { background: var(--tkm-color-paper); }
.tkm-report__box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tkm-space-5);
  align-items: center;
  justify-content: space-between;
  padding: var(--tkm-space-6) var(--tkm-space-7);
  background: var(--tkm-color-surface-dark);
  color: var(--tkm-color-paper);
  border-radius: var(--tkm-radius-xl);
}
body.tkm-body .tkm-report__box h2 { color: var(--tkm-color-paper); margin: 0 0 var(--tkm-space-2); font-size: 1.5rem; }
.tkm-report__box p { color: rgba(246,243,238,.78); margin: 0; }
.tkm-report__actions { display: flex; align-items: center; gap: var(--tkm-space-4); flex-wrap: wrap; }
.tkm-report__actions .tkm-link { color: var(--tkm-color-paper); border-bottom-color: rgba(246,243,238,.5); }

/* FAQ accordion ----------------------------------------------------------- */
.tkm-faq { background: var(--tkm-color-paper); }
.tkm-faq__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-7);
}
@media (min-width: 960px) { .tkm-faq__container { grid-template-columns: 2fr 1fr; align-items: start; } }

.tkm-faq__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-3);
}
.tkm-faq__item {
  list-style: none;
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  overflow: hidden;
  transition: border-color 200ms ease;
}
.tkm-faq__item:hover { border-color: var(--tkm-color-sand); }
.tkm-faq__item.is-open { border-color: var(--tkm-color-primary); }

.tkm-faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: var(--tkm-space-5) var(--tkm-space-5);
  font-family: var(--tkm-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--tkm-color-ink);
  gap: var(--tkm-space-4);
  transition: background 160ms ease;
}
.tkm-faq__trigger:hover { background: var(--tkm-color-paper); }
.tkm-faq__q { flex-grow: 1; }

.tkm-faq__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  border-radius: var(--tkm-radius-full);
  transition: transform 240ms ease, background 160ms ease;
}
.tkm-faq__item.is-open .tkm-faq__icon { transform: rotate(45deg); background: var(--tkm-color-primary); color: var(--tkm-color-paper); }

.tkm-faq__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 240ms ease;
  padding: 0 var(--tkm-space-5);
}
.tkm-faq__item.is-open .tkm-faq__panel { max-height: 600px; padding: 0 var(--tkm-space-5) var(--tkm-space-5); }
.tkm-faq__panel p { color: var(--tkm-color-ink); line-height: 1.65; margin: 0; }
.tkm-faq__panel a { color: var(--tkm-color-primary); border-bottom: 1.5px solid transparent; }
.tkm-faq__panel a:hover { border-bottom-color: currentColor; }

.tkm-faq__aside {
  padding: var(--tkm-space-6);
  background: var(--tkm-color-surface-dark);
  color: var(--tkm-color-paper);
  border-radius: var(--tkm-radius-lg);
  position: sticky;
  top: 100px;
}
body.tkm-body .tkm-faq__aside h2 { color: var(--tkm-color-paper); font-size: 1.35rem; margin: 0 0 var(--tkm-space-3); }
.tkm-faq__aside p { color: rgba(246,243,238,.78); margin-bottom: var(--tkm-space-4); }

/* Contact ----------------------------------------------------------------- */
.tkm-contact { background: var(--tkm-color-paper); }
.tkm-contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-7);
}
@media (min-width: 900px) { .tkm-contact__grid { grid-template-columns: 1fr 1.2fr; } }

.tkm-contact__info h2 { margin-bottom: var(--tkm-space-5); }

.tkm-contact__list {
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-4);
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 var(--tkm-space-5) !important;
}
.tkm-contact__list li { display: flex; gap: var(--tkm-space-3); align-items: flex-start; }
.tkm-contact__list strong { display: block; font-family: var(--tkm-font-display); font-size: 1rem; margin-bottom: 2px; }
.tkm-contact__list a { color: var(--tkm-color-primary); }
.tkm-contact__list a:hover { text-decoration: underline; text-underline-offset: 3px; }

.tkm-contact__icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  border-radius: var(--tkm-radius-md);
}
.tkm-contact__icon--accent { background: var(--tkm-color-accent-soft); color: var(--tkm-color-accent); }

.tkm-contact__links { display: flex; flex-direction: column; gap: 6px; margin-top: var(--tkm-space-5); }

.tkm-contact__form-wrap {
  padding: var(--tkm-space-6);
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
}

/* Form base --------------------------------------------------------------- */
.tkm-form { display: flex; flex-direction: column; gap: var(--tkm-space-4); }
.tkm-form__field { display: flex; flex-direction: column; gap: 6px; }
.tkm-form__field > span {
  font-family: var(--tkm-font-display);
  font-size: var(--tkm-text-sm);
  font-weight: 600;
  color: var(--tkm-color-ink);
}
.tkm-form__field input,
.tkm-form__field textarea,
.tkm-form__field select,
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 textarea,
.wpcf7 select {
  padding: 12px 14px;
  border: 1.5px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  background: var(--tkm-color-paper);
  font-size: 1rem;
  color: var(--tkm-color-ink);
  transition: border-color 160ms ease, background 160ms ease;
}
.tkm-form__field input:focus,
.tkm-form__field textarea:focus,
.tkm-form__field select:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  outline: 0;
  border-color: var(--tkm-color-primary);
  background: var(--tkm-color-paper-bright);
}

/* About ------------------------------------------------------------------- */
.tkm-about { background: var(--tkm-color-paper-bright); }
.tkm-about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-6);
  align-items: start;
}
@media (min-width: 900px) { .tkm-about__grid { grid-template-columns: 1fr 1.6fr; gap: var(--tkm-space-7); } }
.tkm-about__lead .tkm-eyebrow { margin-bottom: var(--tkm-space-3); }
.tkm-about__body p { max-width: 62ch; color: var(--tkm-color-ink); font-size: 1.0625rem; line-height: 1.7; margin-bottom: var(--tkm-space-4); }
.tkm-about__body p:last-child { margin-bottom: 0; }

/* Stats strip ------------------------------------------------------------- */
.tkm-stats { background: var(--tkm-color-paper); }
.tkm-stats__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tkm-space-5);
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 768px) { .tkm-stats__list { grid-template-columns: repeat(4, 1fr); } }
.tkm-stats__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--tkm-space-5);
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  text-align: center;
}
.tkm-stats__value {
  font-family: var(--tkm-font-display);
  font-weight: 700;
  font-size: 2.25rem;
  color: var(--tkm-color-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.tkm-stats__label { color: var(--tkm-color-muted); font-size: var(--tkm-text-sm); }

/* 404 --------------------------------------------------------------------- */
.tkm-404 { padding: var(--tkm-space-9) 0 var(--tkm-space-8); }
.tkm-404__inner { text-align: center; max-width: 640px; margin: 0 auto; }
.tkm-404__code {
  display: inline-block;
  font-family: var(--tkm-font-display);
  font-weight: 700;
  font-size: 5rem;
  line-height: 1;
  color: var(--tkm-color-primary);
  letter-spacing: -0.04em;
  margin-bottom: var(--tkm-space-4);
}
.tkm-404 .tkm-hero__search { margin-left: auto; margin-right: auto; }

/* Utility spacing --------------------------------------------------------- */
.tkm-mt-2 { margin-top: var(--tkm-space-2) !important; }
.tkm-mt-3 { margin-top: var(--tkm-space-3) !important; }
.tkm-mt-4 { margin-top: var(--tkm-space-4) !important; }
.tkm-mt-5 { margin-top: var(--tkm-space-5) !important; }
.tkm-mt-6 { margin-top: var(--tkm-space-6) !important; }

/* Legal pages (AV / privacy / cookies) ------------------------------------ */
.tkm-legal { background: var(--tkm-color-paper); }
.tkm-legal__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-6);
  align-items: start;
}
@media (min-width: 960px) { .tkm-legal__layout { grid-template-columns: 260px 1fr; gap: var(--tkm-space-7); } }

.tkm-legal__toc {
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  padding: var(--tkm-space-5);
  position: sticky;
  top: 100px;
}
.tkm-legal__toc strong {
  display: block;
  font-family: var(--tkm-font-display);
  font-size: var(--tkm-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tkm-color-muted);
  margin-bottom: var(--tkm-space-3);
}
.tkm-legal__toc ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: tkm-toc;
}
.tkm-legal__toc li { counter-increment: tkm-toc; }
.tkm-legal__toc a {
  display: block;
  padding: 4px 0;
  font-size: 0.92rem;
  color: var(--tkm-color-ink);
  transition: color 160ms ease;
}
.tkm-legal__toc a:hover { color: var(--tkm-color-primary); }

.tkm-legal__body {
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  padding: var(--tkm-space-6) var(--tkm-space-6);
}
@media (min-width: 768px) { .tkm-legal__body { padding: var(--tkm-space-7); } }

.tkm-legal__body section { margin-bottom: var(--tkm-space-6); scroll-margin-top: 120px; }
.tkm-legal__body section:last-child { margin-bottom: 0; }
body.tkm-body .tkm-legal__body h2 { font-size: 1.4rem; margin: 0 0 var(--tkm-space-3); }
.tkm-legal__body p { color: var(--tkm-color-ink); line-height: 1.7; margin-bottom: var(--tkm-space-3); }
.tkm-legal__body p:last-child { margin-bottom: 0; }
.tkm-legal__body a { color: var(--tkm-color-primary); border-bottom: 1.5px solid transparent; transition: border-color 160ms ease; }
.tkm-legal__body a:hover { border-bottom-color: currentColor; }

.tkm-legal__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 var(--tkm-space-4) !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tkm-legal__list li {
  position: relative;
  padding-left: 20px;
  line-height: 1.6;
}
.tkm-legal__list li::before {
  content: '';
  position: absolute;
  left: 4px; top: 10px;
  width: 6px; height: 6px;
  background: var(--tkm-color-primary);
  border-radius: 50%;
}

.tkm-legal__table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--tkm-space-4) 0;
  font-size: 0.92rem;
}
.tkm-legal__table th,
.tkm-legal__table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--tkm-color-line);
  vertical-align: top;
}
.tkm-legal__table th {
  font-family: var(--tkm-font-display);
  font-weight: 600;
  font-size: var(--tkm-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tkm-color-muted);
  background: var(--tkm-color-paper);
}
.tkm-legal__table code {
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  padding: 2px 6px;
  border-radius: var(--tkm-radius-sm);
  font-size: 0.85em;
}

.tkm-legal__note {
  margin-top: var(--tkm-space-5);
  padding: var(--tkm-space-4);
  background: var(--tkm-color-accent-soft);
  border-left: 3px solid var(--tkm-color-accent);
  border-radius: var(--tkm-radius-sm);
}
.tkm-legal__note small { color: var(--tkm-color-ink); }

/* Meld misbruik — report form -------------------------------------------- */
.tkm-report-form { background: var(--tkm-color-paper); }
.tkm-report-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-6);
  align-items: start;
}
@media (min-width: 900px) { .tkm-report-form__grid { grid-template-columns: 1fr 1.2fr; gap: var(--tkm-space-7); } }

.tkm-report-form__info { padding-right: 0; }
body.tkm-body .tkm-report-form__info h2 { font-size: 1.3rem; margin-bottom: var(--tkm-space-3); }

.tkm-report-form__steps {
  list-style: none !important;
  padding: 0 !important;
  margin: var(--tkm-space-3) 0 !important;
  counter-reset: tkm-step;
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-3);
}
.tkm-report-form__steps li {
  counter-increment: tkm-step;
  position: relative;
  padding-left: 42px;
  line-height: 1.6;
}
.tkm-report-form__steps li::before {
  content: counter(tkm-step);
  position: absolute;
  left: 0; top: 0;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tkm-color-primary);
  color: var(--tkm-color-paper);
  border-radius: 50%;
  font-family: var(--tkm-font-display);
  font-weight: 700;
  font-size: 0.88rem;
}

.tkm-report-form__form {
  padding: var(--tkm-space-6);
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
}

.tkm-form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--tkm-text-sm);
  color: var(--tkm-color-muted);
  cursor: pointer;
}
.tkm-form__checkbox input[type="checkbox"] { margin-top: 3px; }

/* Partners --------------------------------------------------------------- */
.tkm-partners { background: var(--tkm-color-paper-bright); }
.tkm-partners__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-5);
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 768px) { .tkm-partners__grid { grid-template-columns: repeat(3, 1fr); } }

.tkm-partners__card {
  padding: var(--tkm-space-6);
  background: var(--tkm-color-paper);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
}
.tkm-partners__icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  border-radius: var(--tkm-radius-md);
  margin-bottom: var(--tkm-space-4);
}
.tkm-partners__icon--accent { background: var(--tkm-color-accent-soft); color: var(--tkm-color-accent); }
body.tkm-body .tkm-partners__card h3 { font-size: 1.2rem; margin: 0 0 var(--tkm-space-3); }
.tkm-partners__card p { color: var(--tkm-color-ink); line-height: 1.6; margin: 0; }

.tkm-partners-stats { background: var(--tkm-color-paper); }

/* Pers / Press kit ------------------------------------------------------- */
.tkm-press { background: var(--tkm-color-paper); }
.tkm-press__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-5);
}
@media (min-width: 768px) { .tkm-press__grid { grid-template-columns: repeat(2, 1fr); } }

.tkm-press__block {
  padding: var(--tkm-space-6);
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
}
body.tkm-body .tkm-press__block h2 { font-size: 1.25rem; margin: 0 0 var(--tkm-space-3); }
.tkm-press__block p { color: var(--tkm-color-ink); line-height: 1.65; margin: 0 0 var(--tkm-space-3); }
.tkm-press__block p:last-of-type { margin-bottom: 0; }

.tkm-press__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-2);
  margin: 0;
}
.tkm-press__facts > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--tkm-space-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--tkm-color-line);
}
.tkm-press__facts > div:last-child { border-bottom: 0; }
.tkm-press__facts dt {
  font-family: var(--tkm-font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--tkm-color-muted);
}
.tkm-press__facts dd { margin: 0; font-weight: 500; color: var(--tkm-color-ink); }

.tkm-press__downloads {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tkm-press__dl {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  color: var(--tkm-color-ink);
  font-size: 0.95rem;
  transition: background 160ms ease, border-color 160ms ease;
}
.tkm-press__dl:hover { background: var(--tkm-color-primary-soft); border-color: var(--tkm-color-primary); color: var(--tkm-color-primary); }

/* Vacatures / Careers ---------------------------------------------------- */
.tkm-careers { background: var(--tkm-color-paper); }
.tkm-careers__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--tkm-space-7) var(--tkm-space-5);
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  margin-bottom: var(--tkm-space-6);
}
.tkm-careers__empty-icon {
  width: 80px; height: 80px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  border-radius: 50%;
  margin-bottom: var(--tkm-space-4);
}
body.tkm-body .tkm-careers__empty h2 { font-size: 1.5rem; margin-bottom: var(--tkm-space-2); }
.tkm-careers__empty p { max-width: 50ch; color: var(--tkm-color-muted); margin: 0; }

.tkm-careers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-5);
  margin-bottom: var(--tkm-space-6);
}
@media (min-width: 768px) { .tkm-careers__grid { grid-template-columns: repeat(3, 1fr); } }
.tkm-careers__block {
  padding: var(--tkm-space-5);
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
}
body.tkm-body .tkm-careers__block h3 { font-size: 1.1rem; margin: 0 0 var(--tkm-space-3); }

.tkm-careers__cta {
  padding: var(--tkm-space-6);
  background: var(--tkm-color-surface-dark);
  color: var(--tkm-color-paper);
  border-radius: var(--tkm-radius-xl);
  text-align: center;
}
body.tkm-body .tkm-careers__cta h2 { color: var(--tkm-color-paper); font-size: 1.6rem; margin-bottom: var(--tkm-space-3); }
.tkm-careers__cta p { max-width: 58ch; margin-left: auto; margin-right: auto; color: rgba(246,243,238,.8); margin-bottom: var(--tkm-space-4); }

/* Sitemap ---------------------------------------------------------------- */
.tkm-sitemap { background: var(--tkm-color-paper); }
.tkm-sitemap__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-6);
}
@media (min-width: 768px) { .tkm-sitemap__grid { grid-template-columns: repeat(3, 1fr); gap: var(--tkm-space-7); } }
body.tkm-body .tkm-sitemap__col h2 { font-size: 1.1rem; margin: 0 0 var(--tkm-space-3); padding-bottom: var(--tkm-space-2); border-bottom: 2px solid var(--tkm-color-primary); display: inline-block; }
.tkm-sitemap__sub {
  font-family: var(--tkm-font-display);
  font-size: 0.88rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tkm-color-muted);
  margin: var(--tkm-space-4) 0 var(--tkm-space-2);
}
.tkm-sitemap__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tkm-sitemap__list a {
  color: var(--tkm-color-ink);
  padding: 6px 0;
  font-size: 0.95rem;
  display: inline-block;
  transition: color 160ms ease;
}
.tkm-sitemap__list a:hover { color: var(--tkm-color-primary); }
.tkm-sitemap__list small { color: var(--tkm-color-muted); font-size: var(--tkm-text-xs); }

/* Enhanced card-hover — warme "glow" op primary-accented cards ------------ */
.tkm-catgrid__card,
.tkm-help-quick__card,
.tkm-help-topics__card,
.tkm-kb__card,
.tkm-partners__card,
.tkm-press__block,
.tkm-careers__block {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.tkm-catgrid__card::after,
.tkm-help-quick__card::after,
.tkm-help-topics__card::after,
.tkm-kb__card::after,
.tkm-partners__card::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 50% 0%, rgba(232,93,26,.12), transparent 50%);
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
  z-index: -1;
}
.tkm-catgrid__card:hover::after,
.tkm-help-quick__card:hover::after,
.tkm-help-topics__card:hover::after,
.tkm-kb__card:hover::after,
.tkm-partners__card:hover::after { opacity: 1; }

/* Accent-kleur variant (groen) voor cards die secundair zijn */
.tkm-kb__card::after { background: radial-gradient(circle at 50% 0%, rgba(47,125,59,.15), transparent 50%); }

/* Section-scheiders — subtiele decoratie tussen opeenvolgende secties ----- */
.tkm-catgrid,
.tkm-featured,
.tkm-usp,
.tkm-help-topics,
.tkm-kb,
.tkm-partners,
.tkm-press,
.tkm-deep {
  position: relative;
}
/* Diagonale "stitched" border top op witte secties */
.tkm-featured::before,
.tkm-help-topics::before,
.tkm-kb::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 3px;
  background: linear-gradient(90deg, var(--tkm-color-primary) 50%, var(--tkm-color-accent) 50%);
  border-radius: 2px;
}

/* Subtiel stip-patroon op witte USP-achtergrond */
.tkm-usp::before {
  content: '';
  position: absolute;
  top: 40px; right: 5%;
  width: 160px; height: 120px;
  background-image: radial-gradient(rgba(7,168,168,.18) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: 1;
  pointer-events: none;
}
.tkm-usp::after {
  content: '';
  position: absolute;
  bottom: 40px; left: 5%;
  width: 140px; height: 100px;
  background-image: radial-gradient(rgba(7,168,168,.12) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: 1;
  pointer-events: none;
}
@media (max-width: 768px) {
  .tkm-usp::before, .tkm-usp::after { display: none; }
}

/* Featured listing card — stronger hover lift */
.tkm-listing {
  position: relative;
  isolation: isolate;
}
.tkm-listing::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--tkm-color-primary), var(--tkm-color-accent));
  border-radius: inherit;
  opacity: 0;
  transition: opacity 240ms ease;
  z-index: -1;
}
.tkm-listing:hover::before { opacity: 0.6; }
.tkm-listing:hover { transform: translateY(-4px) !important; box-shadow: 0 20px 40px -18px rgba(232,93,26,.45) !important; }

/* Button ripple accent on primary */
.tkm-btn--primary { position: relative; overflow: hidden; }
.tkm-btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 50%);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.tkm-btn--primary:hover::before { opacity: 1; }

/* Hero meta-chips krijgen subtle hover-scale */
.tkm-hero__meta a { transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; }
.tkm-hero__meta a:hover { transform: translateY(-1px); }

/* TrustSignals — 4 vertrouwens-cards (E-E-A-T) --------------------------- */
.tkm-trust-signals { background: var(--tkm-color-paper-bright); }
.tkm-trust-signals__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-4);
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 640px) { .tkm-trust-signals__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tkm-trust-signals__grid { grid-template-columns: repeat(4, 1fr); } }

.tkm-trust-signals__card {
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-3);
  padding: var(--tkm-space-5);
  background: var(--tkm-color-paper);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.tkm-trust-signals__card:hover { transform: translateY(-3px); border-color: var(--tkm-color-primary); box-shadow: var(--tkm-shadow-md); }
.tkm-trust-signals__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  border-radius: var(--tkm-radius-lg);
  flex-shrink: 0;
}
.tkm-trust-signals__icon--accent { background: var(--tkm-color-accent-soft); color: var(--tkm-color-accent); }
.tkm-trust-signals__card strong {
  font-family: var(--tkm-font-display);
  font-size: 1.05rem;
  color: var(--tkm-color-ink);
}
.tkm-trust-signals__card p {
  color: var(--tkm-color-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}
.tkm-trust-signals__card a {
  color: var(--tkm-color-primary);
  border-bottom: 1.5px solid transparent;
  transition: border-color 140ms ease;
}
.tkm-trust-signals__card a:hover { border-bottom-color: currentColor; }

/* Community — testimonials met geïllustreerde avatars -------------------- */
.tkm-community { background: var(--tkm-color-paper); }
.tkm-community__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 640px) {
  .tkm-community__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .tkm-community__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
.tkm-community__card {
  background: var(--tkm-color-paper-bright);
  border-radius: var(--tkm-radius-xl);
  padding: 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  border: 1.5px solid var(--tkm-color-line);
  box-shadow: 0 2px 14px rgba(14,20,16,.04);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.tkm-community__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px -12px rgba(14,20,16,.11);
  border-color: var(--comm-hex, var(--tkm-color-primary));
}
.tkm-community__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 20px -6px rgba(14,20,16,.18);
  transition: transform 280ms cubic-bezier(.34,1.56,.64,1);
}
.tkm-community__card:hover .tkm-community__avatar { transform: scale(1.06); }
.tkm-community__avatar svg { width: 100%; height: 100%; display: block; }
.tkm-community__stars {
  display: flex;
  gap: 3px;
  justify-content: center;
  color: #F0B429;
}
.tkm-community__stars svg { width: 16px; height: 16px; flex-shrink: 0; }
.tkm-community__quote {
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--tkm-color-ink);
  font-style: italic;
  max-width: 28ch;
  margin: 0;
  quotes: none;
}
.tkm-community__byline {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: var(--tkm-space-3);
  border-top: 1px solid var(--tkm-color-line);
  width: 100%;
  align-items: center;
}
.tkm-community__name {
  font-family: var(--tkm-font-display);
  font-weight: 700;
  font-size: 0.93rem;
  color: var(--tkm-color-ink);
}
.tkm-community__role {
  font-size: 0.82rem;
  color: var(--tkm-color-muted);
  font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
  .tkm-community__card, .tkm-community__avatar { transition: none; }
}

/* RelatedPages — 3 context-gebonden linkcards onderaan content-pages ----- */
.tkm-related { background: var(--tkm-color-paper); padding: var(--tkm-space-7) 0 var(--tkm-space-8); }
.tkm-related__head {
  text-align: center;
  margin-bottom: var(--tkm-space-6);
}
.tkm-related__head .tkm-eyebrow { justify-content: center; margin-bottom: var(--tkm-space-2); }
body.tkm-body .tkm-related__head h2 { font-size: 1.6rem; margin: 0; }

.tkm-related__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-4);
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 768px) { .tkm-related__list { grid-template-columns: repeat(3, 1fr); } }

.tkm-related__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--tkm-space-5);
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  height: 100%;
  position: relative;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.tkm-related__card:hover {
  transform: translateY(-3px);
  border-color: var(--tkm-color-primary);
  box-shadow: var(--tkm-shadow-md);
}
.tkm-related__label {
  font-family: var(--tkm-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--tkm-color-ink);
}
.tkm-related__blurb {
  color: var(--tkm-color-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}
.tkm-related__arrow {
  position: absolute;
  top: var(--tkm-space-5);
  right: var(--tkm-space-5);
  color: var(--tkm-color-muted);
  transition: color 200ms ease, transform 200ms ease;
}
.tkm-related__card:hover .tkm-related__arrow {
  color: var(--tkm-color-primary);
  transform: translate(2px, -2px);
}
.tkm-related__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  border-radius: var(--tkm-radius-md);
  margin-bottom: var(--tkm-space-3);
  flex-shrink: 0;
  transition: background 200ms ease, color 200ms ease;
}
.tkm-related__card:hover .tkm-related__icon {
  background: var(--tkm-color-primary);
  color: var(--tkm-color-paper);
}

/* Legal single-column variant (disclaimer — geen TOC) + meta-info --------- */
.tkm-legal__single {
  max-width: 820px;
  margin: 0 auto;
}
.tkm-legal__meta {
  display: flex;
  align-items: center;
  gap: var(--tkm-space-2);
  flex-wrap: wrap;
  padding: 8px 14px;
  margin-bottom: var(--tkm-space-5) !important;
  background: var(--tkm-color-accent-soft);
  color: var(--tkm-color-accent);
  border-radius: var(--tkm-radius-md);
  font-size: var(--tkm-text-sm);
  font-weight: 500;
  max-width: 100% !important;
}
.tkm-legal__meta time { font-weight: 600; }

/* Blog archive + LatestPosts shared card -------------------------------- */
.tkm-blog-archive, .tkm-latest-posts { background: var(--tkm-color-paper); }
.tkm-blog-archive__grid,
.tkm-latest-posts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-5);
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 640px) { .tkm-blog-archive__grid, .tkm-latest-posts__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tkm-blog-archive__grid, .tkm-latest-posts__grid { grid-template-columns: repeat(3, 1fr); } }

.tkm-blog-card {
  display: flex;
  flex-direction: column;
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  overflow: hidden;
  height: 100%;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.tkm-blog-card:hover {
  transform: translateY(-3px);
  border-color: var(--tkm-color-primary);
  box-shadow: var(--tkm-shadow-md);
}
.tkm-blog-card__media {
  aspect-ratio: 16/9;
  background: var(--tkm-color-sand);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tkm-blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tkm-blog-card__placeholder { color: rgba(14,20,16,.2); width: 44%; }

.tkm-blog-card__body {
  padding: var(--tkm-space-5);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}
.tkm-blog-card__cat {
  align-self: flex-start;
  padding: 3px 10px;
  font-family: var(--tkm-font-display);
  font-size: var(--tkm-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--tkm-color-accent-soft);
  color: var(--tkm-color-accent);
  border-radius: var(--tkm-radius-full);
}
body.tkm-body .tkm-blog-card__title {
  font-family: var(--tkm-font-display);
  font-size: 1.15rem;
  color: var(--tkm-color-ink);
  line-height: 1.3;
  margin: 0;
}
.tkm-blog-card__excerpt {
  color: var(--tkm-color-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
  flex-grow: 1;
}
.tkm-blog-card__meta,
.tkm-blog-card__date {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--tkm-color-muted);
  font-size: var(--tkm-text-xs);
  margin-top: auto;
}

/* Blog pagination -------------------------------------------------------- */
.tkm-blog-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--tkm-space-7);
  flex-wrap: wrap;
}
.tkm-blog-pagination__item a,
.tkm-blog-pagination__item span {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  font-family: var(--tkm-font-display);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--tkm-color-ink);
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease;
}
.tkm-blog-pagination__item a:hover {
  background: var(--tkm-color-primary-soft);
  border-color: var(--tkm-color-primary);
  color: var(--tkm-color-primary);
}
.tkm-blog-pagination__item .current {
  background: var(--tkm-color-primary);
  border-color: var(--tkm-color-primary);
  color: var(--tkm-color-paper);
}

/* Blog empty-state ------------------------------------------------------- */
.tkm-blog-empty { background: var(--tkm-color-paper); }
.tkm-blog-empty__box {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--tkm-space-7) var(--tkm-space-5);
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
}
.tkm-blog-empty__icon {
  display: inline-flex;
  width: 72px; height: 72px;
  align-items: center; justify-content: center;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  border-radius: 50%;
  margin-bottom: var(--tkm-space-4);
}
body.tkm-body .tkm-blog-empty__box h2 { font-size: 1.4rem; margin-bottom: var(--tkm-space-3); }
.tkm-blog-empty__box p { max-width: 48ch; margin: 0 auto var(--tkm-space-5); color: var(--tkm-color-muted); }
.tkm-blog-empty__actions { display: flex; gap: var(--tkm-space-3); justify-content: center; flex-wrap: wrap; }

/* Single post ------------------------------------------------------------ */
.tkm-post__hero {
  position: relative;
  padding: var(--tkm-space-8) 0 var(--tkm-space-7);
  background: var(--tkm-color-surface-deep);
  color: var(--tkm-color-paper);
  overflow: hidden;
  isolation: isolate;
}
.tkm-post__hero-inner { position: relative; z-index: 1; }
.tkm-post__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--tkm-text-sm);
  color: rgba(246,243,238,.55);
  margin-bottom: var(--tkm-space-4);
}
.tkm-post__breadcrumb a {
  color: rgba(246,243,238,.8);
  transition: color 160ms ease;
}
.tkm-post__breadcrumb a:hover { color: var(--tkm-color-primary); }

body.tkm-body .tkm-post__title {
  color: var(--tkm-color-paper);
  font-size: clamp(1.875rem, 3vw + 1rem, 3rem);
  margin: var(--tkm-space-3) 0;
  max-width: 20ch;
}
.tkm-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: rgba(246,243,238,.68);
  font-size: 0.95rem;
}
.tkm-post__meta strong { color: var(--tkm-color-paper); }

.tkm-post__feature {
  max-width: 1040px;
  margin: calc(-1 * var(--tkm-space-6)) auto 0;
  padding: 0 var(--tkm-space-5);
  position: relative;
  z-index: 2;
}
.tkm-post__feature img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--tkm-radius-xl);
  box-shadow: var(--tkm-shadow-lg);
}

.tkm-post__body-wrap { background: var(--tkm-color-paper); padding-top: var(--tkm-space-7); }
.tkm-post__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-7);
}
@media (min-width: 960px) { .tkm-post__layout { grid-template-columns: 2fr 1fr; } }

.tkm-post__content.tkm-prose {
  font-size: 1.075rem;
  line-height: 1.8;
  color: var(--tkm-color-ink);
  max-width: 68ch;
}
body.tkm-body .tkm-post__content h2 { font-size: 1.75rem; margin: var(--tkm-space-6) 0 var(--tkm-space-3); }
body.tkm-body .tkm-post__content h3 { font-size: 1.35rem; margin: var(--tkm-space-5) 0 var(--tkm-space-3); }
.tkm-post__content p { margin-bottom: var(--tkm-space-4); max-width: 68ch; }
.tkm-post__content ul, .tkm-post__content ol { margin: 0 0 var(--tkm-space-4) 24px !important; padding: 0 !important; }
.tkm-post__content ul { list-style: disc !important; }
.tkm-post__content ol { list-style: decimal !important; }
.tkm-post__content li { list-style: inherit !important; padding-left: 4px; margin-bottom: 6px; }
.tkm-post__content a { color: var(--tkm-color-primary); border-bottom: 1.5px solid transparent; transition: border-color 140ms ease; }
.tkm-post__content a:hover { border-bottom-color: currentColor; }
.tkm-post__content blockquote {
  margin: var(--tkm-space-5) 0;
  padding: var(--tkm-space-4) var(--tkm-space-5);
  border-left: 3px solid var(--tkm-color-primary);
  background: var(--tkm-color-primary-soft);
  font-size: 1.05rem;
  font-style: italic;
  border-radius: 0 var(--tkm-radius-md) var(--tkm-radius-md) 0;
}
.tkm-post__content code {
  background: var(--tkm-color-sand);
  padding: 2px 6px;
  border-radius: var(--tkm-radius-sm);
  font-size: 0.92em;
}
.tkm-post__content img { border-radius: var(--tkm-radius-md); margin: var(--tkm-space-5) 0; }

.tkm-post__aside {
  position: sticky;
  top: 100px;
  align-self: flex-start;
  padding: var(--tkm-space-5);
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
}
body.tkm-body .tkm-post__aside h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tkm-color-muted);
  margin: 0 0 var(--tkm-space-3);
}
.tkm-post__share,
.tkm-post__related {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tkm-post__share a,
.tkm-post__related a {
  padding: 6px 0;
  color: var(--tkm-color-ink);
  font-size: 0.95rem;
  transition: color 140ms ease;
}
.tkm-post__share a:hover,
.tkm-post__related a:hover { color: var(--tkm-color-primary); }

/* Zakelijk hub ----------------------------------------------------------- */
.tkm-b2b-hub, .tkm-b2b-shared { background: var(--tkm-color-paper); }
.tkm-b2b-hub__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-5);
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 768px) { .tkm-b2b-hub__grid { grid-template-columns: repeat(3, 1fr); } }

.tkm-b2b-hub__card {
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-3);
  padding: var(--tkm-space-6);
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  height: 100%;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.tkm-b2b-hub__card:hover { transform: translateY(-4px); border-color: var(--tkm-color-primary); box-shadow: var(--tkm-shadow-md); }

.tkm-b2b-hub__icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 64px; height: 64px;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  border-radius: var(--tkm-radius-md);
}
.tkm-b2b-hub__icon--accent { background: var(--tkm-color-accent-soft); color: var(--tkm-color-accent); }

.tkm-b2b-hub__tag {
  align-self: flex-start;
  padding: 3px 10px;
  font-family: var(--tkm-font-display);
  font-size: var(--tkm-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  border-radius: var(--tkm-radius-full);
}
.tkm-b2b-hub__tag--accent { background: var(--tkm-color-accent-soft); color: var(--tkm-color-accent); }

body.tkm-body .tkm-b2b-hub__card h2 { font-size: 1.3rem; margin: 0; }
.tkm-b2b-hub__card p { color: var(--tkm-color-muted); line-height: 1.5; margin: 0; }
.tkm-b2b-hub__card .tkm-deep__bullets { margin: var(--tkm-space-2) 0 !important; }
.tkm-b2b-hub__card .tkm-btn { align-self: flex-start; margin-top: auto; }

/* HeaderOverlay page — Salient-CSS overrides voor /bouwmaterialen-kopen/ -- */
/* Salient injecteert eigen link/button-styles op <a>-elementen van hoofdnav
   en kan onze brand-kleuren overschrijven. Forceer met body.tkm-overlay. */

body.tkm-overlay .tkm-header__nav a,
body.tkm-overlay .tkm-header__nav a:hover,
body.tkm-overlay .tkm-header__nav a:focus,
body.tkm-overlay .tkm-header__nav a:visited {
  color: var(--tkm-color-ink) !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

body.tkm-overlay .tkm-header__account,
body.tkm-overlay .tkm-header__account:hover,
body.tkm-overlay .tkm-header__account:focus,
body.tkm-overlay .tkm-header__account:visited,
body.tkm-overlay .tkm-header__account span {
  color: var(--tkm-color-ink) !important;
  text-decoration: none !important;
}
body.tkm-overlay .tkm-header__account svg { color: var(--tkm-color-ink) !important; }

body.tkm-overlay a.tkm-btn--primary,
body.tkm-overlay a.tkm-btn--primary:hover,
body.tkm-overlay a.tkm-btn--primary:focus,
body.tkm-overlay a.tkm-btn--primary:visited,
body.tkm-overlay a.tkm-btn--primary span {
  color: #fff !important;
  background: var(--tkm-color-primary) !important;
  text-decoration: none !important;
  border-color: transparent !important;
}
body.tkm-overlay a.tkm-btn--primary:hover { background: var(--tkm-color-primary-hover) !important; }
body.tkm-overlay a.tkm-btn--primary svg { color: #fff !important; }

/* v0.23.20: cat-link tekst nu DONKER (ink) op tkm-overlay pages.
   Reden: in v0.23.1 is de cat-bar achtergrond gewijzigd van orange-accent
   naar paper-bright (wit). Witte tekst op witte achtergrond was onleesbaar
   op verkoper-profielen / listing-detail / RTCL-archief pagina's. */
body.tkm-overlay .tkm-header__cat-list a,
body.tkm-overlay .tkm-header__cat-link,
body.tkm-overlay .tkm-header__cat-list a:visited,
body.tkm-overlay .tkm-header__cat-link:visited {
  color: var(--tkm-color-ink) !important;
  text-decoration: none !important;
  opacity: 1 !important;
}
body.tkm-overlay .tkm-header__cat-list a:hover,
body.tkm-overlay .tkm-header__cat-link:hover {
  color: var(--tkm-color-primary) !important;
  background: var(--tkm-color-primary-soft) !important;
}

body.tkm-overlay .tkm-logo__first { color: var(--tkm-color-ink) !important; }
body.tkm-overlay .tkm-logo__second { color: var(--tkm-color-primary) !important; }
body.tkm-overlay .tkm-logo__mark { color: var(--tkm-color-primary) !important; }
body.tkm-overlay .tkm-logo__mark svg { color: var(--tkm-color-primary) !important; }

/* Dropdown text op HeaderOverlay-page */
body.tkm-overlay .tkm-header__cat-drop-list a {
  color: var(--tkm-color-ink) !important;
  opacity: 1 !important;
}
body.tkm-overlay .tkm-header__cat-drop-all {
  color: var(--tkm-color-accent) !important;
  opacity: 1 !important;
}

/* Sitemap v2 — uitgebreid overzicht met materialen-accordion ------------ */
.tkm-sitemap__section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--tkm-space-6);
}
body.tkm-body .tkm-sitemap__section-head h2 { font-size: 1.5rem; margin: var(--tkm-space-2) 0 0; }
.tkm-sitemap__section-head p { margin: var(--tkm-space-2) auto 0; color: var(--tkm-color-muted); max-width: 60ch; }

body.tkm-body .tkm-sitemap__col h3 {
  font-family: var(--tkm-font-display);
  font-size: 1.05rem;
  color: var(--tkm-color-ink);
  margin: 0 0 var(--tkm-space-3);
  padding-bottom: var(--tkm-space-2);
  border-bottom: 2px solid var(--tkm-color-primary);
  display: inline-block;
}

.tkm-sitemap--materials { background: var(--tkm-color-paper); }
.tkm-sitemap__materials {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-3);
}
@media (min-width: 640px) { .tkm-sitemap__materials { grid-template-columns: repeat(2, 1fr); } }

.tkm-sitemap__mat-group {
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  overflow: hidden;
  transition: border-color 200ms ease;
}
.tkm-sitemap__mat-group.is-open { border-color: var(--tkm-color-primary); }

.tkm-sitemap__mat-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--tkm-space-3);
  padding: 14px 16px;
  text-align: left;
  font-family: var(--tkm-font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--tkm-color-ink);
  transition: background 140ms ease;
  cursor: pointer;
}
.tkm-sitemap__mat-trigger:hover,
.tkm-sitemap__mat-trigger:focus-visible {
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
}
.tkm-sitemap__mat-title { flex: 1; }
.tkm-sitemap__mat-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  background: var(--tkm-color-accent-soft);
  color: var(--tkm-color-accent);
  border-radius: var(--tkm-radius-full);
  font-size: 0.78rem;
  font-weight: 600;
}
.tkm-sitemap__mat-chevron {
  flex-shrink: 0;
  color: var(--tkm-color-muted);
  transition: transform 240ms ease, color 140ms ease;
}
.tkm-sitemap__mat-group.is-open .tkm-sitemap__mat-chevron {
  transform: rotate(180deg);
  color: var(--tkm-color-primary);
}

.tkm-sitemap__mat-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms cubic-bezier(.22,.8,.26,1);
  background: var(--tkm-color-paper);
}
.tkm-sitemap__mat-group.is-open .tkm-sitemap__mat-list {
  max-height: 2000px;
  padding: var(--tkm-space-3) var(--tkm-space-4);
}
.tkm-sitemap__mat-all {
  display: inline-block !important;
  padding: 8px 0;
  font-family: var(--tkm-font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tkm-color-accent);
  border-bottom: 1px solid var(--tkm-color-line);
  margin-bottom: 8px;
  width: 100%;
}
.tkm-sitemap__mat-all:hover { color: var(--tkm-color-primary); }
.tkm-sitemap__mat-list ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
@media (min-width: 420px) { .tkm-sitemap__mat-list ul { grid-template-columns: repeat(2, 1fr); } }
.tkm-sitemap__mat-list li { list-style: none; }
.tkm-sitemap__mat-list a {
  display: block;
  padding: 5px 0;
  font-size: 0.9rem;
  color: var(--tkm-color-muted);
  transition: color 140ms ease, padding-left 140ms ease;
}
.tkm-sitemap__mat-list a:hover { color: var(--tkm-color-primary); padding-left: 4px; }

.tkm-sitemap__contact-list a { display: block; padding: 6px 0; line-height: 1.4; }
.tkm-sitemap__contact-list small { display: block; color: var(--tkm-color-muted); font-size: 0.78rem; margin-top: 2px; }

.tkm-sitemap__posts {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
@media (min-width: 640px) { .tkm-sitemap__posts { grid-template-columns: repeat(2, 1fr); } }
.tkm-sitemap__posts a {
  display: flex;
  justify-content: space-between;
  gap: var(--tkm-space-3);
  padding: 10px 14px;
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  color: var(--tkm-color-ink);
  transition: background 140ms ease, border-color 140ms ease;
}
.tkm-sitemap__posts a:hover { background: var(--tkm-color-primary-soft); border-color: var(--tkm-color-primary); }
.tkm-sitemap__posts strong { font-weight: 500; font-size: 0.95rem; }
.tkm-sitemap__posts span { color: var(--tkm-color-muted); font-size: var(--tkm-text-xs); flex-shrink: 0; }

.tkm-sitemap__rtcl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 768px) { .tkm-sitemap__rtcl { grid-template-columns: repeat(4, 1fr); } }
.tkm-sitemap__rtcl a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  background: var(--tkm-color-paper);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-sm);
  font-size: 0.88rem;
  color: var(--tkm-color-ink);
  transition: background 140ms ease, border-color 140ms ease;
}
.tkm-sitemap__rtcl a:hover { background: var(--tkm-color-accent-soft); border-color: var(--tkm-color-accent); color: var(--tkm-color-accent); }
.tkm-sitemap__rtcl-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  border-radius: var(--tkm-radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  flex-shrink: 0;
}

.tkm-sitemap--footer { padding-bottom: var(--tkm-space-7) !important; }
.tkm-sitemap__xml-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tkm-space-5);
  justify-content: space-between;
  align-items: center;
  padding: var(--tkm-space-6);
  background: var(--tkm-color-surface-dark);
  color: var(--tkm-color-paper);
  border-radius: var(--tkm-radius-xl);
}
.tkm-sitemap__xml-box strong {
  display: block;
  font-family: var(--tkm-font-display);
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.tkm-sitemap__xml-box p { margin: 0; color: rgba(246,243,238,.78); max-width: 52ch; font-size: 0.92rem; }

/* RTCL filter-widget polish — "ZOEKEN" h2 was reusachtig groot via
   body.tkm-body h2 clamp-rule. Hier forceren we klein + consistent met
   hoogste specificity + !important. Werkt op álle pages met RTCL-widgets. */
body.tkm-body .rtcl-widget h2,
body.tkm-body .rtcl-widget h3,
body.tkm-body .widget_rtcl h2,
body.tkm-body .widget_rtcl h3,
body.tkm-body .rtcl-search-widget h2,
body.tkm-body .rtcl-search-widget h3,
body.tkm-body aside .widget h2,
body.tkm-body aside .widget h3,
body.tkm-body .widgettitle,
body.tkm-body .widget-title,
body.tkm-overlay .rtcl-widget h2,
body.tkm-overlay .rtcl-widget h3,
body.tkm-overlay .widget h2,
body.tkm-overlay .widget h3,
body.tkm-overlay .widgettitle,
body.tkm-overlay .widget-title {
  font-family: var(--tkm-font-display) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--tkm-color-muted) !important;
  line-height: 1.4 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  max-width: 100% !important;
  text-align: left !important;
}

/* RTCL filter widget containers: card-stijl consistent met onze brand */
body.tkm-body .rtcl-widget,
body.tkm-body .widget_rtcl,
body.tkm-overlay .rtcl-widget,
body.tkm-overlay .widget_rtcl,
body.tkm-overlay aside .widget {
  background: var(--tkm-color-paper-bright) !important;
  border: 1px solid var(--tkm-color-line) !important;
  border-radius: var(--tkm-radius-lg) !important;
  padding: var(--tkm-space-4) !important;
  margin-bottom: var(--tkm-space-3) !important;
  box-shadow: var(--tkm-shadow-sm);
}

/* RTCL widget checkboxes + labels: brand-kleur accent */
body.tkm-body .rtcl-widget input[type="checkbox"],
body.tkm-overlay .rtcl-widget input[type="checkbox"],
body.tkm-body .widget input[type="checkbox"],
body.tkm-overlay .widget input[type="checkbox"],
body.tkm-body .rtcl-widget input[type="radio"],
body.tkm-overlay .rtcl-widget input[type="radio"] {
  accent-color: var(--tkm-color-primary);
  width: 18px;
  height: 18px;
  margin-right: 8px;
  cursor: pointer;
}

body.tkm-body .rtcl-widget label,
body.tkm-overlay .rtcl-widget label,
body.tkm-body .widget_rtcl label,
body.tkm-overlay .widget_rtcl label {
  display: flex !important;
  align-items: center;
  gap: 4px;
  padding: 7px 4px !important;
  font-size: 0.95rem !important;
  color: var(--tkm-color-ink) !important;
  cursor: pointer;
  transition: color 140ms ease;
  line-height: 1.4;
}
body.tkm-body .rtcl-widget label:hover,
body.tkm-overlay .rtcl-widget label:hover {
  color: var(--tkm-color-primary) !important;
}

/* RTCL "Meer" / "Toon meer" toggle links in widgets */
body.tkm-body .rtcl-widget .show-more,
body.tkm-body .rtcl-widget .rtcl-show-more,
body.tkm-overlay .rtcl-widget .show-more,
body.tkm-overlay .rtcl-widget .rtcl-show-more,
body.tkm-body a[href*="#more"] {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 0 !important;
  font-family: var(--tkm-font-display) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--tkm-color-primary) !important;
  text-decoration: none !important;
}

/* ========================================================================
   Notifications — activity-log met thumb-left rows
   ======================================================================== */
.tkm-notif__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tkm-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--tkm-space-4);
  padding-bottom: var(--tkm-space-3);
  border-bottom: 1px solid var(--tkm-color-line);
}
.tkm-notif__sub {
  font-size: 0.85rem;
  color: var(--tkm-color-muted);
  margin: 2px 0 0;
}
.tkm-notif__sub strong {
  color: var(--tkm-color-primary);
  font-weight: 700;
}
.tkm-notif__markall { margin: 0; }

.tkm-notif__empty {
  text-align: center;
  padding: var(--tkm-space-7) var(--tkm-space-4);
  background: var(--tkm-color-paper);
  border: 1px dashed var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
}
.tkm-notif__empty-icon {
  display: inline-flex;
  width: 72px; height: 72px;
  border-radius: var(--tkm-radius-full);
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  align-items: center; justify-content: center;
  margin-bottom: var(--tkm-space-3);
}
body.tkm-body .tkm-notif__empty h3 {
  font-family: var(--tkm-font-display);
  font-size: 1.1rem;
  margin: 0 0 var(--tkm-space-2);
  color: var(--tkm-color-ink);
}
.tkm-notif__empty p {
  max-width: 44ch;
  margin: 0 auto var(--tkm-space-4);
  color: var(--tkm-color-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.tkm-notif__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tkm-notif__item { list-style: none; }
.tkm-notif__item::before { content: none !important; }

.tkm-notif__row {
  display: flex;
  align-items: flex-start;
  gap: var(--tkm-space-3);
  padding: var(--tkm-space-3) var(--tkm-space-3);
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  color: var(--tkm-color-ink);
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.tkm-notif__row:hover {
  background: var(--tkm-color-primary-soft);
  border-color: var(--tkm-color-primary);
  transform: translateY(-1px);
}
.tkm-notif__item.is-unread .tkm-notif__row {
  background: rgba(232, 93, 26, 0.04);
  border-color: var(--tkm-color-primary-soft);
}

.tkm-notif__media {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--tkm-radius-md);
  overflow: hidden;
  background: var(--tkm-color-paper);
}
.tkm-notif__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tkm-notif__media-icon {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tkm-color-primary);
  background: var(--tkm-color-primary-soft);
}
.tkm-notif__media-icon--chat    { color: var(--tkm-color-accent); background: var(--tkm-color-accent-soft); }
.tkm-notif__media-icon--listing { color: var(--tkm-color-primary); background: var(--tkm-color-primary-soft); }
.tkm-notif__media-icon--account { color: #275D8C; background: rgba(39, 93, 140, 0.12); }
.tkm-notif__media-icon--system  { color: var(--tkm-color-muted); background: var(--tkm-color-paper); }

.tkm-notif__media-badge {
  position: absolute;
  right: -4px; bottom: -4px;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tkm-color-primary);
  color: var(--tkm-color-paper-bright);
  border: 2px solid var(--tkm-color-paper-bright);
  border-radius: var(--tkm-radius-full);
}

.tkm-notif__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tkm-notif__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tkm-notif__label {
  font-family: var(--tkm-font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tkm-color-ink);
  line-height: 1.3;
}
.tkm-notif__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--tkm-color-primary);
  border-radius: var(--tkm-radius-full);
  flex-shrink: 0;
}
.tkm-notif__msg {
  font-size: 0.88rem;
  color: var(--tkm-color-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tkm-notif__time {
  font-size: 0.75rem;
  color: var(--tkm-color-muted);
  margin-top: 2px;
}
.tkm-notif__chevron {
  flex-shrink: 0;
  align-self: center;
  color: var(--tkm-color-muted);
  transition: transform 160ms ease, color 160ms ease;
}
.tkm-notif__row:hover .tkm-notif__chevron {
  color: var(--tkm-color-primary);
  transform: translateX(2px);
}

@media (max-width: 420px) {
  .tkm-notif__media { width: 48px; height: 48px; }
  .tkm-notif__label { font-size: 0.92rem; }
  .tkm-notif__msg { font-size: 0.85rem; }
}

/* ========================================================================
   Drawer v2 — full-screen mobile slide + profile-block + grouped sections
   ======================================================================== */
.tkm-drawer--v2 {
  display: flex;
  flex-direction: column;
  padding: 0; /* content krijgt eigen padding binnen __scroll */
}

.tkm-drawer--v2 .tkm-drawer__head {
  flex-shrink: 0;
  padding: var(--tkm-space-4) var(--tkm-space-4);
  margin: 0;
  border-bottom: 1px solid var(--tkm-color-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--tkm-color-paper-bright);
  position: sticky;
  top: 0;
  z-index: 2;
}

.tkm-drawer--v2 .tkm-drawer__scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--tkm-space-4) var(--tkm-space-4) var(--tkm-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-4);
}

/* Profile-block */
.tkm-drawer__profile,
.tkm-drawer__login-cta {
  display: flex;
  align-items: center;
  gap: var(--tkm-space-3);
  padding: var(--tkm-space-3) var(--tkm-space-3);
  background: var(--tkm-color-paper);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  text-decoration: none;
  color: var(--tkm-color-ink);
  transition: background 160ms ease, border-color 160ms ease;
}
.tkm-drawer__profile:hover,
.tkm-drawer__login-cta:hover {
  background: var(--tkm-color-primary-soft);
  border-color: var(--tkm-color-primary);
}
.tkm-drawer__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--tkm-radius-full);
  overflow: hidden;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tkm-drawer__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.tkm-drawer__avatar--guest { background: var(--tkm-color-accent-soft); color: var(--tkm-color-accent); }

.tkm-drawer__profile-text,
.tkm-drawer__login-cta > span:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.tkm-drawer__profile-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tkm-color-muted);
  font-weight: 600;
}
.tkm-drawer__profile-name {
  font-family: var(--tkm-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--tkm-color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tkm-drawer__profile-arrow { color: var(--tkm-color-muted); flex-shrink: 0; }
.tkm-drawer__profile:hover .tkm-drawer__profile-arrow { color: var(--tkm-color-primary); }

.tkm-drawer__login-cta > span:last-child strong {
  font-family: var(--tkm-font-display);
  font-size: 0.98rem;
  color: var(--tkm-color-ink);
  display: block;
}
.tkm-drawer__login-cta > span:last-child small {
  font-size: 0.78rem;
  color: var(--tkm-color-muted);
  line-height: 1.3;
}

/* Primary actions — 2 fat buttons naast elkaar */
.tkm-drawer__primary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tkm-drawer__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  border-radius: var(--tkm-radius-md);
  font-family: var(--tkm-font-display);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.tkm-drawer__action--buy {
  background: var(--tkm-color-paper);
  color: var(--tkm-color-ink);
  border: 1.5px solid var(--tkm-color-ink);
}
.tkm-drawer__action--buy:hover {
  background: var(--tkm-color-ink);
  color: var(--tkm-color-paper);
}
.tkm-drawer__action--sell {
  background: var(--tkm-color-primary);
  color: var(--tkm-color-paper-bright);
}
.tkm-drawer__action--sell:hover {
  background: var(--tkm-color-primary-hover);
  transform: translateY(-1px);
}

/* Sections */
.tkm-drawer__section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: var(--tkm-space-2);
  border-top: 1px solid var(--tkm-color-line);
  margin-top: 4px;
}
.tkm-drawer__label {
  display: block;
  font-family: var(--tkm-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tkm-color-muted);
  padding: var(--tkm-space-2) 0;
}

.tkm-drawer__list-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tkm-drawer__item {
  display: flex;
  align-items: center;
  gap: var(--tkm-space-3);
  padding: 12px;
  border-radius: var(--tkm-radius-md);
  color: var(--tkm-color-ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 140ms ease, color 140ms ease;
  position: relative;
}
.tkm-drawer__item:hover,
.tkm-drawer__item:focus-visible {
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
}
.tkm-drawer__item-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.8;
}
.tkm-drawer__item-label { flex: 1; }
.tkm-drawer__item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--tkm-color-primary);
  color: var(--tkm-color-paper-bright);
  border-radius: var(--tkm-radius-full);
  font-size: 0.72rem;
  font-weight: 700;
}
.tkm-drawer__item-badge--accent { background: var(--tkm-color-accent); }

.tkm-drawer__item--logout {
  color: var(--tkm-color-danger);
  border: 1px dashed var(--tkm-color-line);
}
.tkm-drawer__item--logout:hover {
  background: rgba(179, 38, 30, 0.08);
  color: var(--tkm-color-danger);
  border-color: var(--tkm-color-danger);
}

.tkm-drawer__logout {
  margin-top: var(--tkm-space-3);
  padding-top: var(--tkm-space-3);
  border-top: 1px solid var(--tkm-color-line);
}

/* Reduce motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .tkm-hero__card, .tkm-hero__card--offset { transform: none !important; }
}

/* =========================================================================
   v0.15.0 — Account dashboard, mobile tab-bar, klus wizard, RTCL restyle,
   responsive-safety for /bouwmaterialen-kopen/ overlay.
   ========================================================================= */

/* --- Mobile bottom tab-bar ----------------------------------------------- */

.tkm-tabbar {
  display: none; /* mobiel-only, desktop hidden */
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--tkm-color-paper-bright);
  border-top: 1px solid var(--tkm-color-line);
  z-index: 55; /* boven content, onder drawer (z:60) */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (max-width: 759.98px) {
  .tkm-tabbar { display: block; }
  body.tkm-has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); }
}
.tkm-tabbar__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.tkm-tabbar__list li::before { content: none !important; }
.tkm-tabbar__item { list-style: none; }
.tkm-tabbar__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 6px 10px;
  color: var(--tkm-color-muted);
  font-family: var(--tkm-font-display);
  font-size: 0.7rem;
  font-weight: 500;
  text-decoration: none;
  min-height: 58px;
  transition: color 160ms ease, background 160ms ease;
  border: 0;
}
.tkm-tabbar__link:hover,
.tkm-tabbar__link:focus-visible {
  color: #000;
  background: var(--tkm-color-paper);
}
.tkm-tabbar__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
}
.tkm-tabbar__badge {
  position: absolute;
  top: -4px; right: -8px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--tkm-color-primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 999px;
  border: 2px solid var(--tkm-color-paper-bright);
  box-sizing: content-box;
}
.tkm-tabbar__label { letter-spacing: -0.01em; }
.tkm-tabbar__item.is-active .tkm-tabbar__link { color: var(--tkm-color-primary); }
.tkm-tabbar__item.is-active .tkm-tabbar__label { font-weight: 600; }
.tkm-tabbar__item.is-active .tkm-tabbar__icon::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 3px;
  background: var(--tkm-color-primary);
  border-radius: 0 0 3px 3px;
}

/* Tabbar 5-variant + "Plaatsen" FAB — MOET in blocks.css (altijd geladen)
   want de tabbar rendert op álle wrapped pages, niet alleen /mijn-account/.
   Eerder zaten deze rules in account.css en dan viel de oranje FAB weg op
   bv. /bouwmaterialen-kopen/ (grijze plain button → "kapot" volgens user). */
.tkm-tabbar--5 .tkm-tabbar__list { grid-template-columns: repeat(5, 1fr); }
.tkm-tabbar--5 .tkm-tabbar__item.is-primary { position: relative; }
.tkm-tabbar--5 .tkm-tabbar__item.is-primary .tkm-tabbar__link {
  color: var(--tkm-color-paper-bright);
  padding-top: 40px;
}
.tkm-tabbar--5 .tkm-tabbar__item.is-primary .tkm-tabbar__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--tkm-radius-full);
  background: linear-gradient(135deg, var(--tkm-color-primary), var(--tkm-color-primary-hover));
  box-shadow: 0 6px 18px rgba(232, 93, 26, .45);
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--tkm-color-paper-bright);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.tkm-tabbar--5 .tkm-tabbar__item.is-primary:hover .tkm-tabbar__icon,
.tkm-tabbar--5 .tkm-tabbar__item.is-primary.is-active .tkm-tabbar__icon {
  transform: translateX(-50%) scale(1.06);
  box-shadow: 0 8px 22px rgba(232, 93, 26, .55);
}
.tkm-tabbar--5 .tkm-tabbar__item.is-primary .tkm-tabbar__label {
  color: var(--tkm-color-primary);
  font-weight: 700;
}
.tkm-tabbar--5 .tkm-tabbar__item.is-primary.is-active .tkm-tabbar__icon::after {
  content: none; /* de FAB-pil is zelf al de active-indicator */
}

/* --- Materiaal verkopen — minimale Marktplaats-stijl header + form -------- */

/* Sticky top-bar: pijl-terug + gecentreerde titel */
.tkm-sell-head {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 var(--tkm-space-3);
  background: var(--tkm-color-paper-bright);
  border-bottom: 1px solid var(--tkm-color-line);
  position: sticky;
  top: 0;
  z-index: 200;
}
.tkm-sell-head__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--tkm-color-ink);
  text-decoration: none;
  border-radius: var(--tkm-radius-full);
  transition: background 140ms ease;
}
.tkm-sell-head__back:hover { background: var(--tkm-color-paper); }
.tkm-sell-head__title {
  flex: 1;
  text-align: center;
  font-family: var(--tkm-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--tkm-color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Balancing spacer zodat title echt gecentreerd is */
.tkm-sell-head__spacer { width: 40px; flex-shrink: 0; }

/* Main area */
.tkm-main--sell {
  background: var(--tkm-color-paper);
  min-height: calc(100dvh - 56px);
}
.tkm-sell-body {
  padding: 0;
  max-width: 680px;
  margin: 0 auto;
}

/* RTCL form binnen sell-body: clean, geen dubbele padding */
.tkm-body--verkopen .tkm-sell-body .rtcl-listing-form,
.tkm-body--verkopen .tkm-sell-body .rtcl-form-wrap {
  padding: var(--tkm-space-4);
  background: transparent;
  border: none;
  box-shadow: none;
}
/* Verberg RTCL-titels bovenin het form (we hebben onze eigen sell-head titel) */
.tkm-body--verkopen .rtcl-form-title,
.tkm-body--verkopen .rtcl-listing-form > h2,
.tkm-body--verkopen .rtcl-listing-form > h3,
.tkm-body--verkopen .rtcl-form-section-title:first-child { display: none; }

/* Form-groups: platte rijen met dunne scheidingslijn, Marktplaats-stijl */
.tkm-body--verkopen .rtcl-form-group {
  padding: var(--tkm-space-4) 0;
  border-bottom: 1px solid var(--tkm-color-line);
  margin: 0 !important;
}
.tkm-body--verkopen .rtcl-form-group:last-of-type { border-bottom: none; }

/* Labels mooier */
.tkm-body--verkopen .rtcl-field-label,
.tkm-body--verkopen .rtcl-form-group label:not(.rtcl-form-radio-group label) {
  font-size: var(--tkm-text-sm);
  font-weight: 600;
  color: var(--tkm-color-ink);
  margin-bottom: 6px;
  display: block;
}
/* Inputs */
.tkm-body--verkopen .rtcl-form-control,
.tkm-body--verkopen .rtcl-form-group input[type="text"],
.tkm-body--verkopen .rtcl-form-group input[type="number"],
.tkm-body--verkopen .rtcl-form-group input[type="url"],
.tkm-body--verkopen .rtcl-form-group select,
.tkm-body--verkopen .rtcl-form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  font-size: var(--tkm-text-base);
  font-family: var(--tkm-font-body);
  background: var(--tkm-color-paper-bright);
  color: var(--tkm-color-ink);
  transition: border-color 140ms ease, box-shadow 140ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.tkm-body--verkopen .rtcl-form-control:focus,
.tkm-body--verkopen .rtcl-form-group input:focus,
.tkm-body--verkopen .rtcl-form-group select:focus,
.tkm-body--verkopen .rtcl-form-group textarea:focus {
  outline: none;
  border-color: var(--tkm-color-primary);
  box-shadow: 0 0 0 4px var(--tkm-color-primary-soft);
}

/* Submit-knop: sticky onderaan, volle breedte */
.tkm-body--verkopen .rtcl-btn.rtcl-submit-btn,
.tkm-body--verkopen .rtcl-listing-form input[type="submit"],
.tkm-body--verkopen .rtcl-listing-form button[type="submit"] {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--tkm-color-primary);
  color: #fff;
  font-family: var(--tkm-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  border: none;
  border-radius: var(--tkm-radius-md);
  cursor: pointer;
  transition: background 140ms ease;
  margin-top: var(--tkm-space-4);
}
.tkm-body--verkopen .rtcl-listing-form button[type="submit"]:hover { background: var(--tkm-color-primary-hover); }

/* Verberg tabbar op de sell-pagina (geen navigatie nodig tijdens plaatsen) */
.tkm-body--verkopen .tkm-tabbar { display: none !important; }

/* CategoryWizard (WAT VERKOOP JE?) integreren in het form-design */
.tkm-body--verkopen .tkm-category-wizard {
  background: var(--tkm-color-paper-bright);
  border-radius: var(--tkm-radius-lg);
  border: 1px solid var(--tkm-color-line);
  padding: var(--tkm-space-4);
  margin: var(--tkm-space-4);
}


/* --- Account dashboard --------------------------------------------------- */

.tkm-main--account { background: var(--tkm-color-paper); min-height: 70vh; }
.tkm-body--account .tkm-main--account { padding: 0; }

/* ── Mobiele topbar ────────────────────────────────────────────────────────
   Sticky mini-header met brandnaam links en ≡-knop rechts. Geeft context
   aan de hamburgerknop die anders alleen rechtsboven zweeft zonder label.
   Op desktop verborgen (there is the sidebar-nav). */
.tkm-dash__topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--tkm-color-paper-bright);
  border-bottom: 1px solid var(--tkm-color-line);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
@media (min-width: 900px) { .tkm-dash__topbar { display: none; } }

.tkm-dash__topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  /* Extra zijwaartse padding bovenop de tkm-container (24px) — totaal ≥ 36px */
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
.tkm-dash__topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tkm-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--tkm-color-ink);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.tkm-dash__topbar-brand svg { color: var(--tkm-color-primary); flex-shrink: 0; }
.tkm-dash__topbar-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tkm-color-ink);
  transition: background 150ms ease, border-color 150ms ease;
}
.tkm-dash__topbar-btn:hover {
  background: var(--tkm-color-primary-soft);
  border-color: var(--tkm-color-primary);
  color: var(--tkm-color-primary);
}

.tkm-dash { padding: 0 0 var(--tkm-space-7); }
@media (min-width: 900px) {
  .tkm-dash { padding: var(--tkm-space-7) 0 var(--tkm-space-8); }
}

/* ── Container: mobile = single column, desktop = 2-koloms grid ────────── */
.tkm-dash__container {
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-5);
  padding-top: var(--tkm-space-5);
}
@media (min-width: 900px) {
  .tkm-dash__container {
    grid-template-columns: 280px 1fr;   /* secondary (nav) links | primary (content) rechts */
    gap: var(--tkm-space-6);
    padding-top: 0;
    align-items: start;
  }
  /* Swap visuele volgorde: secondary (quicklinks) links, primary (hero/stats) rechts */
  .tkm-dash__primary   { order: 2; }
  .tkm-dash__secondary { order: 1; }
}

/* ── Primaire kolom (hero + stats + klus) ─────────────────────────────── */
.tkm-dash__primary {
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-5);
}
@media (min-width: 900px) {
  .tkm-dash__primary { gap: var(--tkm-space-6); }
}

/* ── Secundaire kolom (quicklinks — sticky op desktop) ────────────────── */
.tkm-dash__secondary {
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-5);
}
@media (min-width: 900px) {
  .tkm-dash__secondary {
    position: sticky;
    top: calc(var(--tkm-space-5) + 60px); /* onder sticky site-header */
    gap: var(--tkm-space-4);
  }
}

/* Guest-card (niet ingelogd) */
.tkm-account-guest { padding: var(--tkm-space-7) 0; }
.tkm-account-guest__card {
  max-width: 480px;
  margin: 0 auto;
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  padding: var(--tkm-space-5);
  box-shadow: var(--tkm-shadow-sm);
}

/* ── Flex-wrapper: ruimte + volgorde-controle ─────────────────────────── */
.tkm-dash__content {
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-4); /* 16px tussen blokken op mobiel */
}
@media (min-width: 900px) {
  .tkm-dash__content { gap: var(--tkm-space-5); } /* 24px op laptop */
  /* Desktop-volgorde: hero → stats → snelle acties → klus */
  .tkm-dash__hero             { order: 1; }
  .tkm-dash__section--stats   { order: 2; }
  .tkm-dash__quickactions     { order: 3; }
  .tkm-dash__section--klus    { order: 4; }
}
/* Mobiel: geen kaart-stijl — full-width app-secties met scheiding */
@media (max-width: 899px) {
  .tkm-dash__content { gap: 0; }
  .tkm-dash__hero,
  .tkm-dash__section {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--tkm-color-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .tkm-dash__hero { border-top: none !important; }
}

/* Hero-card */
.tkm-dash__hero {
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  padding: var(--tkm-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-4);
  box-shadow: var(--tkm-shadow-sm);
}
@media (min-width: 768px) {
  .tkm-dash__hero { padding: var(--tkm-space-6); }
}
.tkm-dash__hero-inner {
  display: flex;
  align-items: center;
  gap: var(--tkm-space-4);
}
.tkm-dash__avatar {
  flex-shrink: 0;
  width: 72px; height: 72px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--tkm-color-paper);
  border: 2px solid var(--tkm-color-line);
}
@media (min-width: 768px) {
  .tkm-dash__avatar { width: 84px; height: 84px; }
}
.tkm-dash__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* hero-aside: vult de ruimte naast avatar (member-since tekst) */
.tkm-dash__hero-aside {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* identity-blok: eigen volledige breedte-rij — geen flex-squeeze meer */
.tkm-dash__identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Expliciete breedte-begrenzing zodat lange namen altijd wrappen */
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.tkm-dash__name {
  margin: 0 !important;
  font-family: var(--tkm-font-sans) !important;  /* geen display-font: naam is functioneel */
  font-size: 1rem !important;                      /* theme-override-proof */
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--tkm-color-ink) !important;
  line-height: 1.3 !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}
.tkm-dash__email {
  font-size: var(--tkm-text-sm);
  color: var(--tkm-color-muted);
  overflow-wrap: break-word;
  word-break: break-all;
}
.tkm-dash__meta { font-size: var(--tkm-text-sm); color: var(--tkm-color-muted); }
.tkm-dash__edit {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tkm-radius-md);
  color: var(--tkm-color-muted);
  background: var(--tkm-color-paper);
  border: 1px solid var(--tkm-color-line);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.tkm-dash__edit:hover,
.tkm-dash__edit:focus-visible {
  color: var(--tkm-color-primary);
  border-color: var(--tkm-color-primary);
  background: var(--tkm-color-primary-soft);
}
.tkm-dash__hero-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tkm-space-2);
}
@media (max-width: 340px) {
  .tkm-dash__hero-cta { grid-template-columns: 1fr; }
}
.tkm-dash__hero-cta .tkm-btn {
  padding: 12px 10px;
  font-size: 0.95rem;
  gap: 6px;
  min-width: 0; /* laat grid-cell krimpen ipv. overflowen */
}
.tkm-dash__hero-cta .tkm-btn svg { flex-shrink: 0; }
.tkm-dash__cta-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tkm-dash__cta-shop {
  background: var(--tkm-color-paper);
  color: var(--tkm-color-ink);
  border-color: var(--tkm-color-line);
}
.tkm-dash__cta-shop:hover { background: var(--tkm-color-paper-bright); }

/* Section wrappers */
.tkm-dash__section {
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  padding: var(--tkm-space-5);
  box-shadow: var(--tkm-shadow-sm);
}
@media (min-width: 768px) {
  .tkm-dash__section { padding: var(--tkm-space-6); }
}
/* Quick-actions: zichtbaar op alle schermgroottes */
.tkm-dash__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tkm-space-3);
  margin-bottom: var(--tkm-space-4);
}
.tkm-dash__section-head h2 {
  margin: 0;
  font-family: var(--tkm-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tkm-color-muted);
}
.tkm-dash__section-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--tkm-font-display);
  font-size: var(--tkm-text-sm);
  font-weight: 600;
  color: var(--tkm-color-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.tkm-dash__section-link svg { transition: transform 160ms ease; }
.tkm-dash__section-link:hover svg { transform: translateX(2px); }

/* Stats */
.tkm-dash__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tkm-space-3);
}
@media (min-width: 640px) { .tkm-dash__stats { grid-template-columns: repeat(4, 1fr); } }
.tkm-dash__stat {
  padding: var(--tkm-space-4);
  background: var(--tkm-color-paper);
  border-radius: var(--tkm-radius-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid transparent;
}
.tkm-dash__stat-label {
  font-size: 0.78rem;
  font-family: var(--tkm-font-display);
  font-weight: 500;
  color: var(--tkm-color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tkm-dash__stat-value {
  font-family: var(--tkm-font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--tkm-color-ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.tkm-dash__stat--total .tkm-dash__stat-value { color: var(--tkm-color-ink); }
.tkm-dash__stat--published { background: var(--tkm-color-accent-soft); }
.tkm-dash__stat--published .tkm-dash__stat-value { color: var(--tkm-color-accent); }
.tkm-dash__stat--pending { background: var(--tkm-color-primary-soft); }
.tkm-dash__stat--pending .tkm-dash__stat-value { color: var(--tkm-color-primary); }
.tkm-dash__stat--expired { background: var(--tkm-color-paper); border-color: var(--tkm-color-line); }
.tkm-dash__stat--expired .tkm-dash__stat-value { color: var(--tkm-color-muted); }

/* --- Klus wizard --------------------------------------------------------- */
.tkm-dash__section--klus {
  background: linear-gradient(160deg, #FFF8F3 0%, var(--tkm-color-paper-bright) 60%);
  border-color: var(--tkm-color-primary-soft);
}
.tkm-klus { display: flex; flex-direction: column; gap: var(--tkm-space-4); }
.tkm-klus__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tkm-space-3);
  flex-wrap: wrap;
}
.tkm-klus__title-block { flex: 1; min-width: 200px; }
.tkm-klus__eyebrow { color: var(--tkm-color-primary); }
.tkm-klus__title {
  margin: 2px 0 4px;
  font-family: var(--tkm-font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tkm-klus__subtitle { margin: 0; color: var(--tkm-color-muted); font-size: var(--tkm-text-sm); }
.tkm-klus__reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--tkm-font-display);
  font-weight: 500;
  font-size: var(--tkm-text-sm);
  color: var(--tkm-color-muted);
  padding: 6px 10px;
  border-radius: var(--tkm-radius-sm);
  border: 1px solid var(--tkm-color-line);
  background: var(--tkm-color-paper-bright);
}
.tkm-klus__reset:hover { color: var(--tkm-color-ink); border-color: var(--tkm-color-ink); }

.tkm-klus__grid {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-2);
}
@media (min-width: 520px) { .tkm-klus__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 820px) { .tkm-klus__grid { grid-template-columns: repeat(3, 1fr); } }
.tkm-klus__grid li::before { content: none !important; }
.tkm-klus__grid li { list-style: none; }
.tkm-klus__card {
  display: flex;
  align-items: center;
  gap: var(--tkm-space-3);
  padding: 12px 14px;
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.tkm-klus__card:hover,
.tkm-klus__card:focus-visible {
  border-color: var(--tkm-color-primary);
  background: #fff;
  transform: translateY(-1px);
  box-shadow: var(--tkm-shadow-sm);
}
.tkm-klus__card-label {
  flex: 1;
  font-family: var(--tkm-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--tkm-color-ink);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tkm-klus__card-desc {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--tkm-color-muted);
  font-family: var(--tkm-font-sans);
  letter-spacing: 0;
}
.tkm-klus__card-arrow {
  flex-shrink: 0;
  color: var(--tkm-color-muted);
  transition: color 160ms ease, transform 160ms ease;
}
.tkm-klus__card:hover .tkm-klus__card-arrow { color: var(--tkm-color-primary); transform: translateX(2px); }

.tkm-klus__result { display: flex; flex-direction: column; gap: var(--tkm-space-4); }
.tkm-klus__result-head {
  padding: var(--tkm-space-4);
  background: var(--tkm-color-paper-bright);
  border-radius: var(--tkm-radius-md);
  border: 1px solid var(--tkm-color-primary-soft);
}
.tkm-klus__result-desc { margin: 6px 0 0; color: var(--tkm-color-muted); font-size: var(--tkm-text-sm); }

.tkm-klus__block { display: flex; flex-direction: column; gap: 10px; }
.tkm-klus__block-title {
  margin: 0;
  font-family: var(--tkm-font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tkm-color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tkm-klus__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tkm-klus__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  border-radius: 999px;
  font-family: var(--tkm-font-display);
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}
.tkm-klus__chip--material {
  background: var(--tkm-color-paper-bright);
  color: var(--tkm-color-ink);
  border: 1px solid var(--tkm-color-line);
}
.tkm-klus__chip--material:hover {
  background: var(--tkm-color-primary);
  color: #fff;
  border-color: var(--tkm-color-primary);
}

.tkm-klus__types { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 520px) { .tkm-klus__types { grid-template-columns: repeat(2, 1fr); } }
.tkm-klus__type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.tkm-klus__type:hover {
  border-color: var(--tkm-color-accent);
  background: #fff;
  transform: translateY(-1px);
}
.tkm-klus__type-name { font-family: var(--tkm-font-display); font-weight: 600; font-size: 0.95rem; color: var(--tkm-color-ink); }
.tkm-klus__type svg { color: var(--tkm-color-accent); }

/* --- Quicklinks list ----------------------------------------------------- */
.tkm-dash__quicklinks {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tkm-dash__quicklinks li::before { content: none !important; }
.tkm-dash__quicklinks li { list-style: none; }
.tkm-dash__quicklink {
  display: flex;
  align-items: center;
  gap: var(--tkm-space-3);
  padding: 12px 14px;
  border-radius: var(--tkm-radius-md);
  background: transparent;
  border: 1px solid transparent;
  transition: background 140ms ease, border-color 140ms ease;
  text-decoration: none;
}
.tkm-dash__quicklink:hover,
.tkm-dash__quicklink:focus-visible {
  background: var(--tkm-color-paper);
  border-color: var(--tkm-color-line);
}
.tkm-dash__quicklink-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  border-radius: var(--tkm-radius-md);
}
.tkm-dash__quicklink--logout .tkm-dash__quicklink-icon {
  background: var(--tkm-color-paper);
  color: var(--tkm-color-muted);
}
.tkm-dash__quicklink-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tkm-dash__quicklink-label {
  font-family: var(--tkm-font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--tkm-color-ink);
}
.tkm-dash__quicklink-desc { font-size: 0.82rem; color: var(--tkm-color-muted); }
.tkm-dash__quicklink-badge {
  flex-shrink: 0;
  background: var(--tkm-color-primary);
  color: #fff;
  font-family: var(--tkm-font-display);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}
.tkm-dash__quicklink-chev { flex-shrink: 0; color: var(--tkm-color-muted); transition: color 140ms ease, transform 140ms ease; }
.tkm-dash__quicklink:hover .tkm-dash__quicklink-chev { color: var(--tkm-color-ink); transform: translateX(2px); }

/* --- RTCL my-account subpages restyle (advertenties, chat, favorieten, etc.)
   We overschrijven zelden Hele RTCL-UI; deze regels geven het onze typografie,
   kleuren en spacing zonder hun functionaliteit aan te raken. ------------- */

.tkm-body--wrapped .rtcl-MyAccount-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-5);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--tkm-space-5);
}
@media (min-width: 960px) {
  .tkm-body--wrapped .rtcl-MyAccount-wrap {
    grid-template-columns: 260px 1fr;
    gap: var(--tkm-space-6);
    padding: 0 var(--tkm-space-6);
  }
}
.tkm-body--wrapped .rtcl-MyAccount-navigation {
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  padding: var(--tkm-space-4);
  box-shadow: var(--tkm-shadow-sm);
  height: fit-content;
  position: sticky;
  top: 140px;
}
@media (max-width: 959.98px) {
  /* Op mobiel: de sidebar-nav verbergen — bottom tab-bar vervult die rol */
  .tkm-body--wrapped .rtcl-MyAccount-navigation { display: none; }
}
.tkm-body--wrapped .rtcl-myaccount-logo { display: none; } /* RTCL's eigen logo, wij hebben al een header */
.tkm-body--wrapped .rtcl-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tkm-body--wrapped .rtcl-MyAccount-navigation ul li { list-style: none; }
.tkm-body--wrapped .rtcl-MyAccount-navigation ul li::before { content: none !important; }
.tkm-body--wrapped .rtcl-MyAccount-navigation-link a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--tkm-radius-md);
  font-family: var(--tkm-font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--tkm-color-ink);
  transition: background 140ms ease, color 140ms ease;
  text-decoration: none;
}
.tkm-body--wrapped .rtcl-MyAccount-navigation-link a:hover,
.tkm-body--wrapped .rtcl-MyAccount-navigation-link.is-active a {
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
}
.tkm-body--wrapped .rtcl-MyAccount-navigation-link--logout a {
  color: var(--tkm-color-muted);
  border-top: 1px solid var(--tkm-color-line);
  margin-top: 6px;
  padding-top: 14px;
  border-radius: 0;
}

.tkm-body--wrapped .rtcl-MyAccount-content {
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  padding: var(--tkm-space-5);
  box-shadow: var(--tkm-shadow-sm);
}
@media (min-width: 768px) { .tkm-body--wrapped .rtcl-MyAccount-content { padding: var(--tkm-space-6); } }

.tkm-body--wrapped .rtcl-myaccount-content-title {
  margin: 0 0 var(--tkm-space-5);
  font-family: var(--tkm-font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--tkm-color-ink);
  letter-spacing: -0.01em;
  padding-bottom: var(--tkm-space-3);
  border-bottom: 1px solid var(--tkm-color-line);
}

/* RTCL dashboard-stats cards (op /mijn-account/ subpages die ze nog gebruiken) */
.tkm-body--wrapped .rtcl-user-info {
  display: flex;
  align-items: center;
  gap: var(--tkm-space-4);
  padding: var(--tkm-space-4);
  background: var(--tkm-color-paper);
  border-radius: var(--tkm-radius-md);
  margin-bottom: var(--tkm-space-5);
}
.tkm-body--wrapped .rtcl-user-avatar img {
  width: 64px; height: 64px;
  border-radius: 999px;
  border: 2px solid var(--tkm-color-line);
  background: var(--tkm-color-paper-bright);
}
.tkm-body--wrapped .rtcl-user-details h5 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-family: var(--tkm-font-display);
  font-weight: 600;
}
.tkm-body--wrapped .rtcl-media-heading { margin: 0; color: var(--tkm-color-muted); font-size: 0.9rem; }

.tkm-body--wrapped .rtcl-listing-statistics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tkm-space-3);
}
@media (min-width: 720px) {
  .tkm-body--wrapped .rtcl-listing-statistics { grid-template-columns: repeat(4, 1fr); }
}
.tkm-body--wrapped .rtcl-listing-count {
  background: var(--tkm-color-paper);
  border-radius: var(--tkm-radius-md);
  padding: var(--tkm-space-4);
  border: 1px solid var(--tkm-color-line);
}
.tkm-body--wrapped .rtcl-listing-count-inner {
  display: flex;
  align-items: center;
  gap: var(--tkm-space-3);
}
.tkm-body--wrapped .rtcl-listing-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tkm-color-primary-soft);
  border-radius: var(--tkm-radius-sm);
}
.tkm-body--wrapped .rtcl-listing-icon svg path { fill: var(--tkm-color-primary) !important; }
.tkm-body--wrapped .rtcl-listing-number h5 { margin: 0 0 2px; font-size: 0.78rem; color: var(--tkm-color-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.tkm-body--wrapped .rtcl-listing-number span {
  font-family: var(--tkm-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tkm-color-ink);
}

/* RTCL forms: inputs, labels, radios, submit-knop */
.tkm-body--wrapped .rtcl-form-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: var(--tkm-space-4);
}
@media (min-width: 720px) {
  .tkm-body--wrapped .rtcl-form-group {
    grid-template-columns: 180px 1fr;
    gap: var(--tkm-space-4);
    align-items: start;
  }
}
.tkm-body--wrapped .rtcl-field-label,
.tkm-body--wrapped .rtcl-form-group label {
  font-family: var(--tkm-font-display);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--tkm-color-ink);
  padding-top: 10px;
}
.tkm-body--wrapped .rtcl-form-control {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  font-size: 1rem;
  font-family: var(--tkm-font-sans);
  color: var(--tkm-color-ink);
  background: var(--tkm-color-paper-bright);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.tkm-body--wrapped .rtcl-form-control:focus,
.tkm-body--wrapped .rtcl-form-control:focus-visible {
  outline: none;
  border-color: var(--tkm-color-primary);
  box-shadow: 0 0 0 4px var(--tkm-color-primary-soft);
}
.tkm-body--wrapped .description.small { font-size: 0.78rem; color: var(--tkm-color-muted); margin-top: 4px; }
.tkm-body--wrapped .require-star { color: var(--tkm-color-primary); margin-left: 2px; }

.tkm-body--wrapped .rtcl-form-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tkm-body--wrapped .rtcl-form-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  cursor: pointer;
  background: var(--tkm-color-paper);
  transition: border-color 140ms ease, background 140ms ease;
  font-weight: 500;
  font-size: 0.92rem;
}
.tkm-body--wrapped .rtcl-form-radio-group label:hover {
  border-color: var(--tkm-color-primary);
  background: var(--tkm-color-paper-bright);
}
.tkm-body--wrapped .rtcl-form-radio-group input[type="radio"] { accent-color: var(--tkm-color-primary); }

.tkm-body--wrapped .rtcl-btn,
.tkm-body--wrapped input.rtcl-btn,
.tkm-body--wrapped button.rtcl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  background: var(--tkm-color-primary);
  color: #fff !important;
  border: 0;
  border-radius: var(--tkm-radius-md);
  font-family: var(--tkm-font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 8px 20px -14px rgba(232, 93, 26, .55);
}
.tkm-body--wrapped .rtcl-btn:hover { background: var(--tkm-color-primary-hover); transform: translateY(-1px); }

.tkm-body--wrapped .rtcl-profile-picture-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tkm-space-4);
  align-items: center;
}
.tkm-body--wrapped .rtcl-gravatar-img img {
  width: 80px; height: 80px;
  border-radius: 999px;
  border: 2px solid var(--tkm-color-line);
}
.tkm-body--wrapped .rtcl-media-upload {
  padding: var(--tkm-space-3);
  border: 1px dashed var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  background: var(--tkm-color-paper);
  min-width: 200px;
}

/* Favorieten empty state */
.tkm-body--wrapped .rtcl-favourite-listings .rtcl-no-data-found {
  text-align: center;
  padding: var(--tkm-space-6) var(--tkm-space-4);
  background: var(--tkm-color-paper);
  border-radius: var(--tkm-radius-md);
  color: var(--tkm-color-muted);
  font-size: 1rem;
}

/* --- /bouwmaterialen-kopen/ responsive safety ---------------------------- */
/* (Verwijderd in v0.15.2 — de gebruiker heeft de mobile-layout zelf netter
   opgelost in theme-CSS. Deze override trok de boel scheef.) */

/* Tabbar niet tonen op de klus-selectie-view als daar de KlusWizard direct
   actief is — maar wel op dashboard. Default aan laten; geen CSS nodig. */

/* --- Motion-safe fallbacks ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tkm-klus__card,
  .tkm-klus__type,
  .tkm-dash__quicklink,
  .tkm-dash__section-link svg,
  .tkm-dash__quicklink-chev,
  .tkm-klus__card-arrow {
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================================
   v0.15.1 — Listing detail mobile action bar (Bewaar · Bel · Chat).
   Verschijnt alleen op singular rtcl_listing pages, onderaan sticky, <760px.
   Op desktop verborgen (sidebar toont de acties al).
   ========================================================================= */

.tkm-listing-actions {
  display: none; /* mobiel-only */
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--tkm-color-paper-bright);
  border-top: 1px solid var(--tkm-color-line);
  z-index: 55; /* boven content, onder drawer (z:60) */
  padding: 6px 12px calc(10px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -4px 20px -8px rgba(14, 20, 16, .08);
}
@media (max-width: 759.98px) {
  .tkm-listing-actions { display: block; }
  body.tkm-has-listing-actions {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0));
  }
}

.tkm-listing-actions__header {
  font-family: var(--tkm-font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tkm-color-muted);
  text-align: center;
  margin: 0 0 4px;
  padding: 0;
  line-height: 1;
}

.tkm-listing-actions__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* gelijke kolommen — was 1fr 2fr 1fr */
  gap: 6px;
  align-items: stretch;
  max-width: 480px;
  margin: 0 auto;
}

.tkm-listing-actions__btn {
  /* Icoon boven label: compacter en leesbaar op smalle schermen */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px;
  padding: 6px 4px;
  border-radius: var(--tkm-radius-md);
  font-family: var(--tkm-font-display);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0;
  text-decoration: none !important;
  border: 1.5px solid var(--tkm-color-line) !important;
  background-color: transparent !important;
  color: var(--tkm-color-ink) !important;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
  height: 54px;
  line-height: 1.1;
  min-width: 0;
  cursor: pointer;
  /* Nuclear reset — voorkomt dat RTCL/Salient CSS het grid breekt */
  float: none !important;
  width: auto !important;
  box-sizing: border-box !important;
}
.tkm-listing-actions__btn:hover,
.tkm-listing-actions__btn:focus-visible {
  border-color: var(--tkm-color-ink) !important;
  background-color: var(--tkm-color-paper) !important;
}
.tkm-listing-actions__btn:active { transform: scale(0.98); }

.tkm-listing-actions__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.tkm-listing-actions__icon svg { display: block; }
.tkm-listing-actions__label {
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Favoriet — Override RTCL's .rtcl-favourites GROEN in default-staat.
   RTCL's CSS gebruikt `a.rtcl-favourites` (element+class = spec 0,1,1);
   onze selector matcht hoger via parent + element + class. */
a.tkm-listing-actions__btn--fav.rtcl-favourites,
.tkm-listing-actions__inner a.rtcl-favourites {
  background-color: transparent !important;
  border-color: var(--tkm-color-line) !important;
  color: var(--tkm-color-ink) !important;
}

/* Actieve staat (RTCL zet `rtcl-added-favourite` op de <a> na toggle) */
.tkm-listing-actions__btn--fav.rtcl-added-favourite {
  background-color: var(--tkm-color-primary-soft) !important;
  border-color: var(--tkm-color-primary) !important;
  color: var(--tkm-color-primary) !important;
}
.tkm-listing-actions__btn--fav.rtcl-added-favourite svg {
  fill: currentColor;
}

/* Bel-knop — standaard outline, hover wordt oranje */
.tkm-listing-actions__btn--call:hover,
.tkm-listing-actions__btn--call:focus-visible {
  color: var(--tkm-color-primary) !important;
  border-color: var(--tkm-color-primary) !important;
}

/* Chat — primaire oranje CTA. Gelijke breedte als de andere twee; onderscheid
   komt puur van kleur (niet van grootte) zodat de bar consistent en
   predictable aanvoelt. Layout blijft icoon-boven-label zoals de anderen. */
.tkm-listing-actions__btn--chat {
  background-color: var(--tkm-color-primary) !important;
  border-color: var(--tkm-color-primary) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -14px rgba(232, 93, 26, .55);
}
.tkm-listing-actions__btn--chat:hover,
.tkm-listing-actions__btn--chat:focus-visible {
  background-color: var(--tkm-color-primary-hover) !important;
  border-color: var(--tkm-color-primary-hover) !important;
  color: #fff !important;
}

/* Op mobile: verberg RTCL's eigen duplicaat-acties in de page (ze staan in
   de sidebar); de sticky bar is de primaire afstandsbediening. Op desktop
   blijven ze gewoon zichtbaar. */
@media (max-width: 759.98px) {
  body.tkm-has-listing-actions #rtcl-favourites { display: none !important; }
  body.tkm-has-listing-actions #tk-chat-button-container { display: none !important; }
}

/* Header overlay op singular rtcl_listing — voorkom dat Salient's layout
   onze sticky header overlapt of dubbele padding toevoegt. */
body.tkm-overlay.single-rtcl_listing {
  padding-top: 0 !important;
}
body.tkm-overlay.single-rtcl_listing #ajax-content-wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* =========================================================================
   Verkoper chat-knop — geïnjecteerd in .rtcl-listing-user-info via JS
   (ListingActionBarInjector::renderSellerChatButton)
   ========================================================================= */

.tkm-seller-chat {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--tkm-color-line);
}

.tkm-seller-chat__btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  border-radius: var(--tkm-radius-md);
  background-color: var(--tkm-color-primary) !important;
  color: #fff !important;
  font-family: var(--tkm-font-display);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 140ms ease;
  border: none !important;
  box-shadow: 0 4px 16px -8px rgba(232, 93, 26, .4);
}
.tkm-seller-chat__btn:hover,
.tkm-seller-chat__btn:focus-visible {
  background-color: var(--tkm-color-primary-hover) !important;
  color: #fff !important;
}
.tkm-seller-chat__btn svg { flex-shrink: 0; }

/* =========================================================================
   v0.15.2 — RTCL mobile-navbar verbergen + eigen breadcrumb op /mijn-account/
   subpages. RTCL's eigen "Account overzicht" h4 + logo + open-menu knopje
   dubbelt onze nieuwe header + tab-bar; dus uit met dat ding.
   ========================================================================= */

/* RTCL's mobile-navbar dichttrekken op al onze wrapped pages. */
/* RTCL's eigen mobile-navbar (.rtcl-MyAccount-mobile-navbar) overal verbergen
   — we hebben onze eigen site-header + breadcrumb + bottom tabbar. Meerdere
   selectors + defensieve properties zodat Salient/RTCL stijlen 'm niet terug
   kunnen forceren. */
.rtcl-MyAccount-mobile-navbar,
.rtcl-MyAccount-wrap .rtcl-MyAccount-mobile-navbar,
.tkm-body .rtcl-MyAccount-mobile-navbar,
.tkm-body--wrapped .rtcl-MyAccount-mobile-navbar {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
/* Safety: ook de gerelateerde "mobile menu open" state van RTCL neutraal */
.tkm-body--wrapped .rtcl-MyAccount-navigation.is-mobile-open { transform: none !important; }

/* --- Breadcrumb ---------------------------------------------------------- */
.tkm-crumbs {
  background: var(--tkm-color-paper-bright);
  border-bottom: 1px solid var(--tkm-color-line);
}

.tkm-crumbs__inner {
  display: flex;
  align-items: center;
  gap: var(--tkm-space-3);
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 48px;
}
.tkm-crumbs__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 8px 8px;
  border-radius: var(--tkm-radius-sm);
  font-family: var(--tkm-font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--tkm-color-ink);
  transition: color 140ms ease, background 140ms ease;
  flex-shrink: 0;
  margin-left: -8px; /* optical alignment met container padding */
}
.tkm-crumbs__back:hover,
.tkm-crumbs__back:focus-visible {
  color: var(--tkm-color-primary);
  background: var(--tkm-color-primary-soft);
}
.tkm-crumbs__back svg { transition: transform 140ms ease; }
.tkm-crumbs__back:hover svg { transform: translateX(-2px); }

.tkm-crumbs__trail {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.tkm-crumbs__trail li { list-style: none; }
.tkm-crumbs__trail li::before { content: none !important; }

.tkm-crumbs__item {
  font-family: var(--tkm-font-display);
  font-size: 0.9rem;
  color: var(--tkm-color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.tkm-crumbs__item a {
  color: var(--tkm-color-muted);
  text-decoration: none;
  transition: color 140ms ease;
  font-weight: 500;
}
.tkm-crumbs__item a:hover,
.tkm-crumbs__item a:focus-visible { color: var(--tkm-color-primary); }
.tkm-crumbs__item--current {
  color: var(--tkm-color-ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tkm-crumbs__sep {
  display: inline-flex;
  align-items: center;
  color: var(--tkm-color-muted);
  flex-shrink: 0;
}

/* Als de breadcrumb aanwezig is verbergen we de dubbele WP-page-title header
   (h1 = "Mijn account") — de breadcrumb + RTCL's eigen sectie-titel vertellen
   al waar we zijn. Op de dashboard-root (mijn-account.php) bestaat die h1
   niet, en de breadcrumb verschijnt daar sowieso niet — dus dit raakt alleen
   /mijn-account/<sub>/. */
.tkm-body--wrapped .tkm-crumbs + main .tkm-page__head { display: none; }

/* Mobile: breadcrumb als "mobile page header". De intermediate "Mijn account"
   crumb verbergen — op mobiel schermen duplicaat-info; alleen "Terug"-knop +
   huidige pagina blijven over. iOS-style nav feel. */
@media (max-width: 760px) {
  .tkm-crumbs__inner {
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 6px;
    min-height: 52px;
  }
  .tkm-crumbs__back {
    padding: 10px 12px 10px 8px;
    font-size: 1rem;
    font-weight: 600;
  }
  .tkm-crumbs__back svg { width: 20px; height: 20px; }
  /* Verberg "Mijn account >" intermediate + separator; de "Terug"-knop is
     de primaire wayfinder. Huidige pagina wordt het visuele pagina-label. */
  .tkm-crumbs__trail .tkm-crumbs__item:not(.tkm-crumbs__item--current),
  .tkm-crumbs__trail .tkm-crumbs__sep { display: none; }
  .tkm-crumbs__item--current {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--tkm-color-ink);
  }
}

/* ========================================================================
   Drawer v2 varianten — shop-header aliassen v2 styles + account-pill
   ======================================================================== */

/* De site-header drawer (hamburger) is shop-stijl: zoeken, categorieën,
   info. Erft alle v2 layout-regels (head/scroll flow) zodat we geen code
   dupliceren. */
.tkm-drawer--shop {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0; /* v0.23.38: geen extra gap tussen head en scroll; head heeft eigen padding */
}
.tkm-drawer--shop .tkm-drawer__head {
  flex-shrink: 0;
  padding: var(--tkm-space-3) var(--tkm-space-4); /* 12px top/bottom, 16px sides */
  margin: 0;
  /* v0.23.15: GEEN border-bottom meer — gaf dubbele divider samen met de
     hero-search border 2px erna. Visuele scheiding nu alleen via padding. */
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--tkm-color-paper-bright);
  position: sticky;
  top: 0;
  z-index: 2;
}
.tkm-drawer--shop .tkm-drawer__scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--tkm-space-2) var(--tkm-space-4) var(--tkm-space-6); /* 8px top — dicht op logo */
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-4);
}

/* Compact pill-link naar Mijn TKM in de shop-drawer (ingelogd) */
.tkm-drawer__account-pill {
  display: flex;
  align-items: center;
  gap: var(--tkm-space-3);
  padding: 12px 14px;
  background: var(--tkm-color-paper);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  color: var(--tkm-color-ink);
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease;
}
.tkm-drawer__account-pill:hover {
  background: var(--tkm-color-primary-soft);
  border-color: var(--tkm-color-primary);
}
.tkm-drawer__account-pill-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--tkm-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  flex-shrink: 0;
}
.tkm-drawer__account-pill-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.tkm-drawer__account-pill-text strong {
  font-family: var(--tkm-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tkm-color-ink);
}
.tkm-drawer__account-pill-text small {
  font-size: 0.8rem;
  color: var(--tkm-color-muted);
}

/* Login + registreer 2-koloms grid voor gasten */
.tkm-drawer__auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tkm-space-2);
}
.tkm-drawer__auth-row .tkm-btn { width: 100%; justify-content: center; }

/* ========================================================================
   AccountDrawer — fullscreen slide-over vanaf "Mijn TKM"-tab
   ──
   Volledig los van de site-header-drawer (`#tkm-drawer`). Openen via
   data-tkm-account-drawer-open (button in MobileTabBar). Body krijgt
   `tkm-account-open` class → translate = 0.
   ======================================================================== */
.tkm-account-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  max-width: 100vw;
  background: var(--tkm-color-paper-bright);
  box-shadow: -12px 0 40px rgba(11, 25, 41, 0.18);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10001; /* boven tabbar */
  display: flex;
  flex-direction: column;
  visibility: hidden;
}
.tkm-account-drawer[aria-hidden="false"] { visibility: visible; }
body.tkm-account-open { overflow: hidden; }
body.tkm-account-open .tkm-account-drawer { transform: translateX(0); }

.tkm-account-drawer__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 25, 41, 0.48);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms;
  z-index: 10000;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
body.tkm-account-open .tkm-account-drawer__backdrop { opacity: 1; visibility: visible; }

.tkm-account-drawer__head {
  flex-shrink: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--tkm-color-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--tkm-color-paper-bright);
  position: sticky;
  top: 0;
  z-index: 2;
}
.tkm-account-drawer__title {
  font-family: var(--tkm-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tkm-color-ink);
}
.tkm-account-drawer__close {
  appearance: none;
  background: transparent;
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-full);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tkm-color-ink);
  transition: background 160ms ease;
}
.tkm-account-drawer__close:hover { background: var(--tkm-color-paper); }

.tkm-account-drawer__scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--tkm-space-4) 20px calc(var(--tkm-space-6) + 80px);
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-4);
}

/* Profile-kaart */
.tkm-account-drawer__profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: linear-gradient(135deg, var(--tkm-color-primary-soft) 0%, var(--tkm-color-paper) 100%);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  text-decoration: none;
  color: var(--tkm-color-ink);
  transition: border-color 160ms ease, transform 160ms ease;
}
.tkm-account-drawer__profile:hover {
  border-color: var(--tkm-color-primary);
  transform: translateY(-1px);
}
.tkm-account-drawer__avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--tkm-radius-full);
  overflow: hidden;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--tkm-color-paper-bright);
  box-shadow: 0 2px 6px rgba(11, 25, 41, 0.08);
}
.tkm-account-drawer__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tkm-account-drawer__profile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.tkm-account-drawer__profile-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tkm-color-muted);
  font-weight: 600;
}
.tkm-account-drawer__profile-name {
  font-family: var(--tkm-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tkm-color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tkm-account-drawer__profile-cta {
  font-size: 0.78rem;
  color: var(--tkm-color-primary);
  font-weight: 600;
  margin-top: 2px;
}

/* Quick stats-strip (3 kolommen) */
.tkm-account-drawer__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.tkm-account-drawer__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  background: var(--tkm-color-paper);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  text-decoration: none;
  color: var(--tkm-color-ink);
  transition: border-color 160ms ease, background 160ms ease;
}
.tkm-account-drawer__stat:hover {
  border-color: var(--tkm-color-primary);
  background: var(--tkm-color-primary-soft);
}
.tkm-account-drawer__stat strong {
  font-family: var(--tkm-font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--tkm-color-ink);
  line-height: 1;
}
.tkm-account-drawer__stat small {
  font-size: 0.72rem;
  color: var(--tkm-color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Sectie + label */
.tkm-account-drawer__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tkm-account-drawer__section--logout {
  margin-top: auto;
  padding-top: var(--tkm-space-3);
  border-top: 1px dashed var(--tkm-color-line);
}
.tkm-account-drawer__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tkm-color-muted);
  font-weight: 700;
  padding-left: 4px;
}

/* Lijst + item */
.tkm-account-drawer__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tkm-account-drawer__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--tkm-color-paper);
  border: 1px solid transparent;
  border-radius: var(--tkm-radius-lg);
  text-decoration: none;
  color: var(--tkm-color-ink);
  transition: background 160ms ease, border-color 160ms ease;
}
.tkm-account-drawer__item:hover,
.tkm-account-drawer__item:focus-visible {
  background: var(--tkm-color-primary-soft);
  border-color: var(--tkm-color-primary);
}
.tkm-account-drawer__item-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--tkm-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--tkm-color-paper-bright);
  color: var(--tkm-color-ink);
  border: 1px solid var(--tkm-color-line);
}
.tkm-account-drawer__item-icon--home   { background: #eff6ff; color: #1d4ed8; border-color: #dbeafe; }
.tkm-account-drawer__item-icon--ads    { background: #ecfdf5; color: #047857; border-color: #d1fae5; }
.tkm-account-drawer__item-icon--fav    { background: #fef2f2; color: #b91c1c; border-color: #fee2e2; }
.tkm-account-drawer__item-icon--chat   { background: var(--tkm-color-primary-soft); color: var(--tkm-color-primary); border-color: transparent; }
.tkm-account-drawer__item-icon--bell   { background: #fff7ed; color: #c2410c; border-color: #ffedd5; }
.tkm-account-drawer__item-icon--user   { background: #faf5ff; color: #7c3aed; border-color: #ede9fe; }
.tkm-account-drawer__item-icon--shield { background: #f0fdf4; color: #15803d; border-color: #dcfce7; }
.tkm-account-drawer__item-icon--info   { background: #f8fafc; color: #475569; border-color: #e2e8f0; }

.tkm-account-drawer__item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.tkm-account-drawer__item-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--tkm-color-ink);
}
.tkm-account-drawer__item-sub {
  font-size: 0.8rem;
  color: var(--tkm-color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tkm-account-drawer__chev {
  color: var(--tkm-color-muted);
  flex-shrink: 0;
}
.tkm-account-drawer__item:hover .tkm-account-drawer__chev {
  color: var(--tkm-color-primary);
  transform: translateX(2px);
  transition: transform 160ms ease, color 160ms ease;
}

.tkm-account-drawer__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--tkm-color-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  flex-shrink: 0;
}
.tkm-account-drawer__badge--accent { background: var(--tkm-color-accent); }

/* Uitloggen-knop */
.tkm-account-drawer__logout {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: transparent;
  border: 1px dashed var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  color: var(--tkm-color-danger, #b91c1c);
  font-weight: 600;
  text-decoration: none;
  justify-content: center;
  transition: background 160ms ease, border-color 160ms ease;
}
.tkm-account-drawer__logout:hover {
  background: #fef2f2;
  border-color: var(--tkm-color-danger, #b91c1c);
  border-style: solid;
}

/* Guest state */
.tkm-account-drawer__guest {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: 12px;
  padding-top: var(--tkm-space-4);
}
.tkm-account-drawer__guest-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: var(--tkm-radius-full);
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tkm-account-drawer__guest-title {
  font-family: var(--tkm-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tkm-color-ink);
  margin: 0;
}
.tkm-account-drawer__guest-body {
  color: var(--tkm-color-muted);
  font-size: 0.9rem;
  margin: 0;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
.tkm-account-drawer__guest-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tkm-account-drawer__guest-actions .tkm-btn {
  width: 100%;
  justify-content: center;
}
.tkm-account-drawer__guest-sep {
  text-align: center;
  font-size: 0.8rem;
  color: var(--tkm-color-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  position: relative;
  margin: var(--tkm-space-2) 0;
}
.tkm-account-drawer__guest-sep::before,
.tkm-account-drawer__guest-sep::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: var(--tkm-color-line);
}
.tkm-account-drawer__guest-sep::before { left: 0; }
.tkm-account-drawer__guest-sep::after  { right: 0; }

/* ========================================================================
   Tabbar-link als button — zelfde visuele reset als <a> versie
   ======================================================================== */
.tkm-tabbar__link--drawer {
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
/* Focus-ring consistent met de <a>-variant */
.tkm-tabbar__link--drawer:focus-visible {
  outline: 2px solid var(--tkm-color-primary);
  outline-offset: 2px;
  border-radius: var(--tkm-radius-md);
}

/* Als de account-drawer open is, licht de Mijn TKM-tab subtiel op */
body.tkm-account-open .tkm-tabbar__item [data-tkm-account-drawer-open] {
  color: var(--tkm-color-primary);
}
body.tkm-account-open .tkm-tabbar__item [data-tkm-account-drawer-open] .tkm-tabbar__icon {
  background: var(--tkm-color-primary-soft);
  border-radius: 999px;
}

/* Op schermen waar de website-drawer altijd verborgen is (≥960px desktop),
   tonen we de account-drawer ook rechts i.p.v. fullscreen — feels goed
   voor gebruikers die toevallig de tabbar zien op tablet-landscape. */
@media (min-width: 760px) {
  .tkm-account-drawer {
    width: 400px;
  }
}


/* ========================================================================
   Category Wizard — horizontale swipeable categorie-balk (shoppage)
   ======================================================================== */
.tkm-cat-wizard {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--tkm-color-paper-bright);
  border-bottom: 1px solid var(--tkm-color-line);
  box-shadow: 0 2px 8px -2px rgba(14,20,16,.08);
  width: 100%;
}

.tkm-cat-wizard__track {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* Verberg scrollbar maar behoud scroll-functionaliteit */
  scrollbar-width: none;
}
.tkm-cat-wizard__track::-webkit-scrollbar { display: none; }

.tkm-cat-wizard__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 7px 13px;
  border-radius: var(--tkm-radius-full);
  border: 1.5px solid var(--tkm-color-line);
  background: var(--tkm-color-paper);
  color: var(--tkm-color-ink);
  font-family: var(--tkm-font-display);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease;
  -webkit-tap-highlight-color: transparent;
}
.tkm-cat-wizard__pill:active { transform: scale(0.95); }
.tkm-cat-wizard__pill:hover {
  border-color: var(--tkm-color-primary);
  color: var(--tkm-color-primary);
}
.tkm-cat-wizard__pill.is-active {
  background: var(--tkm-color-primary);
  border-color: var(--tkm-color-primary);
  color: #fff;
  font-weight: 600;
}

.tkm-cat-wizard__pill-icon {
  font-size: 1rem;
  line-height: 1;
}
.tkm-cat-wizard__pill-label {
  line-height: 1;
}

/* ========================================================================
   ListingFilterBar — filter-chip-row + categorie-kaart-carousel
   Op /bouwmaterialen-kopen/ (body.tkm-has-filterbar). Vervangt RTCL's
   sidebar-widget en de oude CategoryWizard-pills voor een modernere shop-UX.
   ======================================================================== */

.tkm-filterbar-wrap {
  margin: 0 auto var(--tkm-space-5);
  padding-top: var(--tkm-space-4);
  padding-bottom: var(--tkm-space-2);
}

.tkm-filterbar {
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-4);
}
/* Visuele volgorde: top → cards → chips → active → toolbar
   (HTML heeft chips voor cards om logische lezing te behouden bij no-CSS) */
.tkm-filterbar__top     { order: 1; }
.tkm-filterbar__cards   { order: 2; }
.tkm-filterbar__chips   { order: 3; }
.tkm-filterbar__active  { order: 4; }
.tkm-filterbar__toolbar { order: 5; }

/* ── TOP BAR: hamburger + zoekbalk (Marktplaats-stijl) ────────────── */
.tkm-filterbar__top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tkm-filterbar__menu {
  appearance: none;
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tkm-color-ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 140ms ease, border-color 140ms ease;
}
.tkm-filterbar__menu:hover {
  background: var(--tkm-color-primary-soft);
  border-color: var(--tkm-color-primary);
  color: var(--tkm-color-primary);
}
.tkm-filterbar__search {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-full);
  height: 44px;
  padding: 0 14px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.tkm-filterbar__search:focus-within {
  border-color: var(--tkm-color-primary);
  box-shadow: 0 0 0 3px var(--tkm-color-primary-soft);
}
.tkm-filterbar__search-icon { color: var(--tkm-color-muted); flex-shrink: 0; }
.tkm-filterbar__search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: 0;
  font-size: 0.95rem;
  color: var(--tkm-color-ink);
  padding: 0 10px;
  min-width: 0;
}
.tkm-filterbar__search input::placeholder { color: var(--tkm-color-muted); }
.tkm-filterbar__search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: var(--tkm-color-muted);
  background: var(--tkm-color-paper);
  flex-shrink: 0;
  transition: background 140ms ease, color 140ms ease;
}
.tkm-filterbar__search-clear:hover { background: var(--tkm-color-primary-soft); color: var(--tkm-color-primary); }

/* ── BOTTOM TOOLBAR: result-count + sort-dropdown ─────────────────── */
.tkm-filterbar__toolbar:empty { display: none; }
.tkm-filterbar__toolbar .rtcl-listings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 2px 0;
  border-top: 1px solid var(--tkm-color-line);
  margin: 0;
  flex-wrap: wrap;
}
.tkm-filterbar__toolbar .rtcl-result-count {
  font-size: 0.88rem;
  color: var(--tkm-color-muted);
  font-weight: 500;
}
.tkm-filterbar__toolbar .rtcl-ordering {
  margin: 0;
}
.tkm-filterbar__toolbar .rtcl-ordering select {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 32px 8px 14px;
  background: var(--tkm-color-paper-bright);
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23555%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid var(--tkm-color-line);
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--tkm-color-ink);
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.tkm-filterbar__toolbar .rtcl-ordering select:hover,
.tkm-filterbar__toolbar .rtcl-ordering select:focus {
  border-color: var(--tkm-color-primary);
  background-color: var(--tkm-color-primary-soft);
  outline: none;
}

/* ── Chip row ─────────────────────────────────────────────────────── */
.tkm-filterbar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tkm-filterbar__chip { position: relative; }
.tkm-filterbar__chip > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--tkm-color-ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease;
}
.tkm-filterbar__chip > summary::-webkit-details-marker { display: none; }
.tkm-filterbar__chip > summary::marker { content: ''; }
.tkm-filterbar__chip > summary:hover {
  background: var(--tkm-color-primary-soft);
  border-color: var(--tkm-color-primary);
}
.tkm-filterbar__chip.is-active > summary {
  background: var(--tkm-color-primary);
  border-color: var(--tkm-color-primary);
  color: #fff;
}
.tkm-filterbar__chip-caret { transition: transform 180ms ease; flex-shrink: 0; opacity: .75; }
.tkm-filterbar__chip[open] > summary .tkm-filterbar__chip-caret { transform: rotate(180deg); }

.tkm-filterbar__popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  max-width: calc(100vw - 32px);
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  box-shadow: 0 12px 40px rgba(11, 25, 41, 0.14);
  z-index: 40;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  overflow: hidden;
}
/* v0.23.30 — STRIKT: popover ENKEL zichtbaar als parent-chip [open] heeft.
   `display: flex` hierboven overschreef anders de UA-default hide van
   <details>-content, waardoor popovers zichtbaar bleven zelfs zonder [open]
   attribuut → bug "meerdere popovers tegelijk zichtbaar". */
.tkm-filterbar__chip:not([open]) > .tkm-filterbar__popover {
  display: none !important;
}
/* v0.23.31 — DUBBELE LAAG met :has(): als er ergens later in de chips-rij óók
   een open chip staat, verberg DEZE popover. Gevolg: alleen de LAATSTE open
   chip toont z'n popover, ook als JS-mutex (om welke reden dan ook) faalt. */
.tkm-filterbar__chips .tkm-filterbar__chip[open]:has(~ .tkm-filterbar__chip[open]) > .tkm-filterbar__popover {
  display: none !important;
}
.tkm-filterbar__popover--wide { min-width: min(520px, calc(100vw - 32px)); }
.tkm-filterbar__popover-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--tkm-color-line);
  flex-shrink: 0;
}
.tkm-filterbar__popover-search input {
  border: 0;
  background: transparent;
  flex: 1;
  font-size: 0.92rem;
  outline: 0;
  color: var(--tkm-color-ink);
}
.tkm-filterbar__popover-search svg { color: var(--tkm-color-muted); flex-shrink: 0; }
.tkm-filterbar__popover-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--tkm-space-3) var(--tkm-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-3);
  -webkit-overflow-scrolling: touch;
}
.tkm-filterbar__popover-actions {
  flex-shrink: 0;
  border-top: 1px solid var(--tkm-color-line);
  padding: 10px 14px;
  display: flex;
  justify-content: flex-end;
  background: var(--tkm-color-paper);
}
.tkm-filterbar__popover-actions .tkm-btn { min-width: 120px; justify-content: center; }

/* Field styling binnen popovers */
.tkm-filterbar__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tkm-filterbar__field > span {
  font-size: 0.8rem;
  color: var(--tkm-color-muted);
  font-weight: 600;
}
.tkm-filterbar__field input[type='text'],
.tkm-filterbar__field input[type='number'] {
  padding: 9px 12px;
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  background: var(--tkm-color-paper-bright);
  font-size: 0.92rem;
  color: var(--tkm-color-ink);
  width: 100%;
}
.tkm-filterbar__field input[type='range'] {
  width: 100%;
  accent-color: var(--tkm-color-primary);
}

.tkm-filterbar__pricegrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tkm-filterbar__price-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.tkm-filterbar__price-presets .tkm-chip {
  appearance: none;
  background: var(--tkm-color-paper);
  border: 1px solid var(--tkm-color-line);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--tkm-color-ink);
  cursor: pointer;
  font-family: inherit;
}
.tkm-filterbar__price-presets .tkm-chip:hover {
  background: var(--tkm-color-primary-soft);
  border-color: var(--tkm-color-primary);
  color: var(--tkm-color-primary);
}

/* Material group (gegroepeerde checkboxen in dropdown) */
.tkm-filterbar__matgroup-title {
  font-family: var(--tkm-font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tkm-color-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 6px;
}
.tkm-filterbar__matgroup-items,
.tkm-filterbar__provgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}

/* Checkbox-label */
.tkm-filterbar__check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  font-size: 0.9rem;
  color: var(--tkm-color-ink);
  cursor: pointer;
  border-radius: var(--tkm-radius-sm);
  transition: background 120ms ease;
  line-height: 1.3;
}
.tkm-filterbar__check:hover { background: var(--tkm-color-primary-soft); }
.tkm-filterbar__check input {
  accent-color: var(--tkm-color-primary);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
}
.tkm-filterbar__check-text { flex: 1; }

/* Materiaal-list: 2-kolom grid (desktop) → 1-kolom mobiel */
.tkm-filterbar__matlist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 16px;
}
@media (max-width: 640px) {
  .tkm-filterbar__matlist { grid-template-columns: 1fr; }
}

/* Field-row: input + icon-knop ernaast (voor geo-address + mijn-locatie) */
.tkm-filterbar__field-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.tkm-filterbar__field-row input { flex: 1; }
.tkm-filterbar__iconbtn {
  appearance: none;
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tkm-color-muted);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  flex-shrink: 0;
}
.tkm-filterbar__iconbtn:hover {
  background: var(--tkm-color-primary-soft);
  border-color: var(--tkm-color-primary);
  color: var(--tkm-color-primary);
}

/* Popover-actions: twee knoppen naast elkaar (Wissen + Toepassen) */
.tkm-filterbar__popover-actions {
  display: flex;
  gap: 8px;
}
.tkm-filterbar__popover-actions .tkm-btn { min-width: 0; flex: 1; }
.tkm-filterbar__popover-actions .tkm-btn--primary { flex: 2; }

/* Reset link */
.tkm-filterbar__reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 0.82rem;
  color: var(--tkm-color-muted);
  text-decoration: underline;
  margin-left: auto;
}
.tkm-filterbar__reset:hover { color: var(--tkm-color-primary); }

/* ── Category card carousel ───────────────────────────────────────── */
.tkm-filterbar__cards {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 4px var(--tkm-space-4) 12px;
  margin: 0 calc(var(--tkm-space-4) * -1);
}
.tkm-filterbar__cards::-webkit-scrollbar { height: 6px; }
.tkm-filterbar__cards::-webkit-scrollbar-thumb { background: var(--tkm-color-line); border-radius: 3px; }

.tkm-filterbar__card {
  appearance: none;
  flex: 0 0 160px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  color: var(--tkm-color-ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  min-height: 116px;
}
.tkm-filterbar__card:hover {
  border-color: var(--tkm-color-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(11, 25, 41, 0.08);
}
.tkm-filterbar__card.is-active {
  border-color: var(--tkm-color-primary);
  background: var(--tkm-color-primary-soft);
  box-shadow: 0 0 0 2px var(--tkm-color-primary) inset;
}
.tkm-filterbar__card-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  border-radius: var(--tkm-radius-md);
}
.tkm-filterbar__card-title {
  font-family: var(--tkm-font-display);
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--tkm-color-ink);
  line-height: 1.2;
}
.tkm-filterbar__card-sub {
  font-size: 0.76rem;
  color: var(--tkm-color-muted);
  font-weight: 500;
}

/* Mobile: compactere chips + horizontaal scrollable als ze niet passen */
@media (max-width: 640px) {
  .tkm-filterbar__chips {
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 4px;
    margin: 0 calc(var(--tkm-space-4) * -1);
    padding-left: var(--tkm-space-4);
    padding-right: var(--tkm-space-4);
    scroll-snap-type: x proximity;
  }
  .tkm-filterbar__chips::-webkit-scrollbar { display: none; }
  .tkm-filterbar__chip { flex-shrink: 0; scroll-snap-align: start; }
  .tkm-filterbar__chip > summary { padding: 8px 12px; font-size: 0.82rem; }
  .tkm-filterbar__card { flex: 0 0 140px; padding: 12px; min-height: 108px; }
  .tkm-filterbar__card-icon { width: 38px; height: 38px; }
  .tkm-filterbar__card-title { font-size: 0.88rem; }
  .tkm-filterbar__matgroup-items,
  .tkm-filterbar__provgrid { grid-template-columns: 1fr; }

  /* Bottom-sheet stijl popover: fixed BOVEN de tabbar (niet bottom:0).
     Geen drag-handle meer — die suggereerde swipe-down maar op een website
     leidt swipe-down tot pagina-pull-to-refresh i.p.v. sheet sluiten. */
  .tkm-filterbar__chip[open] > .tkm-filterbar__popover {
    position: fixed;
    left: 0;
    right: 0;
    /* Bottom = tabbar-hoogte (64px) + safe-area + 12px lucht zodat sheet
       visueel ademt boven de tabbar i.p.v. ertegenaan plakken. */
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px);
    top: auto;
    max-width: calc(100% - 16px); /* 8px lucht aan beide zijkanten */
    margin: 0 8px;
    min-width: 0;
    width: calc(100% - 16px);
    max-height: 70vh;
    border-radius: var(--tkm-radius-lg);
    box-shadow: 0 -10px 40px rgba(11, 25, 41, 0.18), 0 4px 12px rgba(0,0,0,0.06);
    z-index: 10001;
    animation: tkm-slide-up 220ms cubic-bezier(.4,0,.2,1);
  }
  /* GEEN drag-handle meer — verwijderd in v0.23.14. */
  .tkm-filterbar__chip[open] > .tkm-filterbar__popover::before {
    content: none !important;
    display: none !important;
  }
  /* Body non-scrollable wanneer sheet open — geeft tegelijk standby tegen
     de "swipe-down om te sluiten"-reflex die op website pagina-refresh zou
     triggeren. */
  body.tkm-filter-sheet-open {
    overflow: hidden;
    overscroll-behavior: contain; /* voorkomt pull-to-refresh */
  }

  /* Tabbar BLIJFT zichtbaar onder de sheet — gebruiker kan altijd weg
     navigeren. Sheet zit dankzij de bottom-offset boven de tabbar. */
}

/* Legacy backdrop-div volledig onzichtbaar maken mocht die nog ergens hangen */
.tkm-filter-sheet-backdrop { display: none !important; }

/* Popover boven alles: super-hoge z-index (Salient admin-bar is 99999, maar
   wordt verborgen op front-end, dus 99999 werkt voor frontend). */
.tkm-filterbar__chip[open] > .tkm-filterbar__popover {
  z-index: 99999 !important;
}

/* noUiSlider binnen onze popover: zorg dat hij full-width is en niet
   zero-width rendert (default noUiSlider bug bij init in verborgen parent) */
.tkm-filterbar__popover-body .rtcl-noUiSlider {
  width: 100%;
  margin: 18px 0 14px;
}
.tkm-filterbar__popover-body .rtcl-range-label {
  font-size: 0.92rem;
  color: var(--tkm-color-ink);
  margin-bottom: 10px;
  font-weight: 600;
  font-family: var(--tkm-font-display);
}
.tkm-filterbar__popover-body .rtcl-range-label .rtcl-range-value {
  color: var(--tkm-color-primary);
  font-weight: 800;
  font-size: 1.1rem;
}

/* Live prijs-label boven slider — door JS toegevoegd. "€0 – €10.000" */
.tkm-filterbar__price-live {
  font-family: var(--tkm-font-display);
  font-size: 0.96rem;
  color: var(--tkm-color-ink);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tkm-color-line);
  font-weight: 600;
}
.tkm-filterbar__price-live > span {
  color: var(--tkm-color-muted);
  font-weight: 500;
  font-size: 0.84rem;
}
.tkm-filterbar__price-live strong {
  color: var(--tkm-color-primary);
  font-weight: 800;
  font-size: 1rem;
}

/* Provincie-knoppen (eigen UI, geen RTCL-proxy) */
.tkm-filterbar__prov {
  appearance: none;
  background: var(--tkm-color-paper);
  border: 1px solid var(--tkm-color-line);
  padding: 10px 14px;
  border-radius: var(--tkm-radius-md);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--tkm-color-ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease;
  font-weight: 500;
}
.tkm-filterbar__prov:hover {
  background: var(--tkm-color-primary-soft);
  border-color: var(--tkm-color-primary);
}
.tkm-filterbar__prov.is-active {
  background: var(--tkm-color-primary);
  border-color: var(--tkm-color-primary);
  color: #fff;
}
.tkm-filterbar__prov[data-tkm-prov-clear] {
  grid-column: 1 / -1;
  background: var(--tkm-color-paper-bright);
  font-style: italic;
  color: var(--tkm-color-muted);
}
.tkm-filterbar__prov[data-tkm-prov-clear].is-active {
  background: var(--tkm-color-ink);
  color: #fff;
  border-color: var(--tkm-color-ink);
  font-style: normal;
}

@keyframes tkm-slide-up {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── Op shop-page: verberg de originele widget maar behoud JS + events ─────
   BELANGRIJK: we gebruiken NIET `display: none` want dat:
    (a) haalt onze nu-verhuisde RTCL-content mee weg als die nog niet is
        overgeplaatst
    (b) breekt sommige RTCL JS-listeners die op visibility rekenen.
   In plaats daarvan: de widget-wrapper wordt visueel weggepositioneerd
   (geen ruimte, niet zichtbaar), maar blijft in de DOM en functioneel. */
body.tkm-has-filterbar .rtcl-widget-ajax-filter-wrapper {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none;
}
/* Lege "Show Filter"-button op mobiel van RTCL hoeft niet meer */
body.tkm-has-filterbar .rtcl-ajax-filter-floating-mobile,
body.tkm-has-filterbar #tkm-cat-wizard,
body.tkm-has-filterbar .tkm-cat-wizard {
  display: none !important;
}
/* ── Sidebar volledig uit layout halen ────────────────────────────────────
   De RTCL-widget-wrapper is door place()-JS al naar <body> verplaatst,
   dus display:none hier raakt hem niet meer. We verbergen alleen de
   sidebar-kolom zodat hij geen ruimte meer inneemt. */
body.tkm-has-filterbar #rtcl-secondary,
body.tkm-has-filterbar .rtcl-col-sm-4,
body.tkm-has-filterbar .rtcl-col-sm-3,
body.tkm-has-filterbar .rtcl-col-md-3,
body.tkm-has-filterbar .rtcl-col-md-4,
body.tkm-has-filterbar .rtcl-sidebar,
body.tkm-has-filterbar aside.widget-area,
body.tkm-has-filterbar .sidebar,
body.tkm-has-filterbar #sidebar,
body.tkm-has-filterbar .left-sidebar { display: none !important; }

/* ── Listings-kolom volledig breed maken ──────────────────────────────────
   Zonder sidebar naast het: content neemt 100% van de row-breedte.
   .post-area = Salient span_9-kolom; #rtcl-primary etc = RTCL-kolommen. */
body.tkm-has-filterbar #rtcl-primary,
body.tkm-has-filterbar .rtcl-col-sm-8,
body.tkm-has-filterbar .rtcl-col-sm-9,
body.tkm-has-filterbar .rtcl-col-md-8,
body.tkm-has-filterbar .rtcl-col-md-9,
body.tkm-has-filterbar .post-area {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── RTCL-content binnen onze popover-slots weer zichtbaar maken ─────
   Wanneer we een RTCL-filter-content-block verhuizen in onze popover-body,
   willen we hem 100% normal tonen (de widget-wrapper-override hierboven
   was display: hidden; we winnen terug binnen de popover). */
.tkm-filterbar__popover-body [class*="rtcl-filter-content"],
.tkm-filterbar__popover-body .rtcl-ajax-filter-data,
.tkm-filterbar__popover-body .rtcl-ajax-filter-data-item,
.tkm-filterbar__popover-body .rtcl-price-range-wrap,
.tkm-filterbar__popover-body .rtcl-radius-search-wrap {
  visibility: visible !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  pointer-events: auto !important;
  overflow: visible !important;
}
.tkm-filterbar__popover-body .rtcl-filter-content { padding: 0; }

/* Checkbox-items herstyled voor onze popover-look */
.tkm-filterbar__popover-body .rtcl-ajax-filter-data-item {
  padding: 0;
  margin: 0;
  list-style: none;
}
.tkm-filterbar__popover-body .rtcl-ajax-filter-diiWrap {
  display: block;
}
.tkm-filterbar__popover-body .rtcl-filter-checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  font-size: 0.88rem;
  color: var(--tkm-color-ink);
  cursor: pointer;
  border-radius: var(--tkm-radius-sm);
  transition: background 120ms ease;
  line-height: 1.3;
}
.tkm-filterbar__popover-body .rtcl-filter-checkbox-label:hover {
  background: var(--tkm-color-primary-soft);
}
.tkm-filterbar__popover-body .rtcl-filter-checkbox {
  accent-color: var(--tkm-color-primary);
  margin: 0;
  flex-shrink: 0;
}
.tkm-filterbar__popover-body .rtcl-filter-checkbox-text {
  flex: 1;
}

/* Filter_category & filter_location: 2-koloms grid in popover */
.tkm-filterbar__popover-body > .filter-list,
.tkm-filterbar__popover-body .rtcl-ajax-filter-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

/* Prijs-range slider zichtbaar maken */
.tkm-filterbar__popover-body .rtcl-price-range-wrap,
.tkm-filterbar__popover-body .rtcl-radius-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tkm-filterbar__popover-body .rtcl-range-slider-input-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tkm-filterbar__popover-body .rtcl-range-slider-input-wrap input {
  padding: 9px 12px;
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  font-size: 0.92rem;
  background: var(--tkm-color-paper-bright);
  color: var(--tkm-color-ink);
  width: 100%;
}
.tkm-filterbar__popover-body .rtcl-geo-address-field {
  position: relative;
}
.tkm-filterbar__popover-body .rtcl-geo-address-input {
  padding: 9px 36px 9px 12px;
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  font-size: 0.92rem;
  background: var(--tkm-color-paper-bright);
  color: var(--tkm-color-ink);
  width: 100%;
}
.tkm-filterbar__popover-body .rtcl-get-location {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--tkm-color-muted);
}
.tkm-filterbar__popover-body .rtcl-get-location:hover { color: var(--tkm-color-primary); }

/* "Meer/Minder"-button van RTCL */
.tkm-filterbar__popover-body .rtcl-more-less-btn {
  grid-column: 1 / -1;
  margin-top: 6px;
}
.tkm-filterbar__popover-body .rtcl-more-less-btn .text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--tkm-color-primary);
  cursor: pointer;
  font-weight: 600;
}

/* Loading placeholder */
.tkm-filterbar__loading {
  padding: 24px;
  text-align: center;
  color: var(--tkm-color-muted);
  font-size: 0.88rem;
}

/* Active filters (RTCL's chip-bar) styling.
 * v0.23.109: ook `.tkm-fallback-actives-container` (onze PHP-fallback)
 *   dezelfde styling — zelfde inner-classes dus 't werkt automatisch.
 * v0.23.126: ALSO `.rtcl-listings-wrapper > .rtcl-active-filters-container`
 *   — RTCL's NATIVE container (de echte bron van waarheid). We klonen 'm
 *   niet meer in onze slot; in plaats daarvan stylen we 'm net zo netjes
 *   wáár RTCL 'm ook rendert. Zo nooit meer een dubbele summary. */
.tkm-filterbar__active:empty { display: none; }

.tkm-filterbar__active .rtcl-active-filters-container,
.tkm-filterbar__active .tkm-fallback-actives-container,
.rtcl-listings-wrapper > .rtcl-active-filters-container {
  background: transparent;
  padding: 0;
  margin: 0;
}
/* RTCL's native container krijgt wat lucht eromheen (staat los onder de
   filterbar i.p.v. erin). */
.rtcl-listings-wrapper > .rtcl-active-filters-container {
  margin: 4px auto 14px;
}

.tkm-filterbar__active .rtcl-active-filters-wrap,
.rtcl-listings-wrapper > .rtcl-active-filters-container .rtcl-active-filters-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.tkm-filterbar__active .rtcl-active-filters,
.rtcl-listings-wrapper > .rtcl-active-filters-container .rtcl-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.tkm-filterbar__active .rtcl-active-filter,
.rtcl-listings-wrapper > .rtcl-active-filters-container .rtcl-active-filter {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* compact: alleen de waardes als chip, "Categories:"-label verbergen */
.tkm-filterbar__active .rtcl-active-filter .af-name,
.rtcl-listings-wrapper > .rtcl-active-filters-container .rtcl-active-filter .af-name {
  display: none;
}
.tkm-filterbar__active .rtcl-active-filter .af-items,
.rtcl-listings-wrapper > .rtcl-active-filters-container .rtcl-active-filter .af-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tkm-filterbar__active .rtcl-active-filter .afi,
.rtcl-listings-wrapper > .rtcl-active-filters-container .rtcl-active-filter .afi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.tkm-filterbar__active .rtcl-active-filter .afi .rtcl-remove-filter,
.rtcl-listings-wrapper > .rtcl-active-filters-container .rtcl-active-filter .afi .rtcl-remove-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--tkm-color-primary);
  color: #fff;
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
}
.tkm-filterbar__active .rtcl-active-filter .afi .remove-icon::before,
.rtcl-listings-wrapper > .rtcl-active-filters-container .rtcl-active-filter .afi .remove-icon::before {
  content: '\00d7';
  display: block;
  font-weight: 700;
}
.tkm-filterbar__active .rtcl-clear-filters,
.rtcl-listings-wrapper > .rtcl-active-filters-container .rtcl-clear-filters {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  color: var(--tkm-color-muted);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
}
.tkm-filterbar__active .rtcl-clear-filters:hover,
.rtcl-listings-wrapper > .rtcl-active-filters-container .rtcl-clear-filters:hover {
  color: var(--tkm-color-primary);
}
.tkm-filterbar__active .rtcl-clear-filters .icon-wrap,
.rtcl-listings-wrapper > .rtcl-active-filters-container .rtcl-clear-filters .icon-wrap {
  display: none;
}

/* ==========================================================================
   MATERIAAL VERKOPEN — Verkoper-landingspagina /materiaal-verkopen/
   Unieke designs: verticale timeline, dark benefits-strip, cats-grid
   ========================================================================== */

/* ── Hero-aanpassingen voor sell-pagina ─────────────────────────────────── */
.tkm-sell-hero__inner { display: flex; flex-direction: column; align-items: flex-start; }
.tkm-sell-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tkm-space-3);
  margin-top: var(--tkm-space-5);
}
.tkm-sell-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tkm-space-2);
  list-style: none;
  margin: var(--tkm-space-4) 0 0;
  padding: 0;
}
.tkm-sell-hero__pills li {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 4px 12px;
}

/* ── Verticale stappen-timeline ─────────────────────────────────────────── */
.tkm-sell-timeline {
  list-style: none;
  margin: var(--tkm-space-7) auto 0;
  padding: 0;
  max-width: 680px;
}
.tkm-sell-step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--tkm-space-4);
  padding-bottom: var(--tkm-space-7);
  position: relative;
}
.tkm-sell-step:last-child { padding-bottom: 0; }
/* Verbindingslijn tussen stappen */
.tkm-sell-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 25px;
  top: 52px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--tkm-color-primary) 0%, var(--tkm-color-primary-soft) 100%);
}
.tkm-sell-step__num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--tkm-color-primary);
  color: #fff;
  font-family: var(--tkm-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px var(--tkm-color-primary-soft);
}
.tkm-sell-step__body { padding-top: 12px; }
.tkm-sell-step__body h3 {
  margin: 0 0 8px;
  font-family: var(--tkm-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--tkm-color-ink);
  letter-spacing: -0.01em;
}
.tkm-sell-step__body p {
  margin: 0;
  color: var(--tkm-color-muted);
  font-size: var(--tkm-text-sm);
  line-height: 1.7;
  max-width: 520px;
}

/* ── Benefits — donkere achtergrond, stat + tekst ──────────────────────── */
.tkm-sell-benefits {
  background: var(--tkm-color-ink);
  padding: var(--tkm-space-8) 0;
}
.tkm-section__head--on-dark .tkm-eyebrow { opacity: 0.6; }
.tkm-on-dark {
  color: #fff;
}
.tkm-sell-benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-6);
  margin-top: var(--tkm-space-6);
}
@media (min-width: 600px) {
  .tkm-sell-benefits__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .tkm-sell-benefits__grid { grid-template-columns: repeat(4, 1fr); }
}
.tkm-sell-benefit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: var(--tkm-space-4);
  border-left: 3px solid var(--tkm-color-primary);
}
.tkm-sell-benefit__stat {
  font-family: var(--tkm-font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--tkm-color-primary);
  line-height: 1;
  letter-spacing: -0.03em;
}
.tkm-sell-benefit__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}
.tkm-sell-benefit__desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  margin: 0;
}

/* ── Materiaalcategorieën-grid ──────────────────────────────────────────── */
.tkm-sell-cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tkm-space-3);
  margin-top: var(--tkm-space-6);
}
@media (min-width: 540px) {
  .tkm-sell-cats { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .tkm-sell-cats { grid-template-columns: repeat(3, 1fr); gap: var(--tkm-space-4); }
}
.tkm-sell-cat {
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  padding: var(--tkm-space-4) var(--tkm-space-4);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.tkm-sell-cat:hover {
  border-color: var(--tkm-color-primary-soft);
  box-shadow: var(--tkm-shadow-sm);
}
.tkm-sell-cat__name {
  margin: 0 0 5px;
  font-family: var(--tkm-font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tkm-color-ink);
}
.tkm-sell-cat__examples {
  margin: 0;
  font-size: 0.78rem;
  color: var(--tkm-color-muted);
  line-height: 1.55;
}
.tkm-sell-cats__note {
  margin-top: var(--tkm-space-5);
  font-size: var(--tkm-text-sm);
  color: var(--tkm-color-muted);
  text-align: center;
}
.tkm-sell-cats__note a { color: var(--tkm-color-primary); font-weight: 500; }

/* ── Wizard-startsectie ─────────────────────────────────────────────────── */
.tkm-sell-start {
  background: linear-gradient(160deg, #FFF8F3 0%, var(--tkm-color-paper-bright) 60%);
  border-top: 2px solid var(--tkm-color-primary-soft);
  padding: var(--tkm-space-8) 0;
}
.tkm-sell-start__head {
  text-align: center;
  margin-bottom: var(--tkm-space-6);
}
.tkm-sell-start__head h2 {
  margin: var(--tkm-space-2) 0 var(--tkm-space-2);
  font-family: var(--tkm-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.tkm-sell-start__head p {
  margin: 0;
  color: var(--tkm-color-muted);
  font-size: var(--tkm-text-sm);
}

/* Ghost-licht knop voor op donkere/hero achtergrond */
.tkm-btn--ghost-light {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border: 1.5px solid rgba(255,255,255,0.35);
  padding: 12px 20px;
  border-radius: var(--tkm-radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.tkm-btn--ghost-light:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}

/* ==========================================================================
   v0.20.40 — Listing detail: Marktplaats-stijl layout (single rtcl_listing)
   Desktop: [foto links] [titel + prijs + verkoper rechts] | beschrijving
   full-width eronder | kaart | gerelateerd
   ========================================================================== */

/* Salient sidebar verbergen; post-area vult volledige breedte ------------- */
body.single-rtcl_listing #sidebar { display: none !important; }
body.single-rtcl_listing .post-area {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

/* Salient heading-row (bevat h1) — JS verplaatst de h1 naar info-kolom --- */
body.single-rtcl_listing .row.heading-title.hentry { display: none !important; }

/* Salient next/prev + comments: irrelevant op listing-pagina's ------------ */
body.single-rtcl_listing .blog_next_prev_buttons { display: none !important; }
body.single-rtcl_listing .comments-section { display: none !important; }

/* Back-link --------------------------------------------------------------- */
body.single-rtcl_listing .back-to-ads-wrapper { margin-bottom: 12px; }
body.single-rtcl_listing .btn-back-to-ads {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--tkm-font-display); font-size: 0.85rem; font-weight: 500;
  color: #fff !important; text-decoration: none !important;
  transition: opacity 140ms ease;
}
body.single-rtcl_listing .btn-back-to-ads:hover { opacity: 0.82; }

/* Meta-bar als compacte inline-tags --------------------------------------- */
body.single-rtcl_listing .rtcl-listing-meta { margin-bottom: 10px; }
body.single-rtcl_listing .rtcl-listing-badge-wrap { display: none; }
body.single-rtcl_listing .rtcl-listing-meta-data {
  display: flex !important; flex-wrap: wrap !important; gap: 2px 10px !important;
  list-style: none !important; margin: 0 !important; padding: 0 !important;
  font-size: 0.78rem; color: var(--tkm-color-muted);
}
body.single-rtcl_listing .rtcl-listing-meta-data li { list-style: none !important; }
body.single-rtcl_listing .rtcl-listing-meta-data li::before { content: none !important; }
body.single-rtcl_listing .rtcl-listing-meta-data a { color: inherit; }

/* 2-kolom grid (desktop ≥ 760 px) ========================================
   Rij 1: foto (links) | info-kolom (rechts)
   Rij 2: beschrijving (vol breedte — JS voegt .tkm-sl-desc toe)
   Rij 3: meta-bar (vol breedte, onderaan als samenvatting)
   ======================================================================== */
@media (min-width: 760px) {
  body.single-rtcl_listing .rtcl-single-listing-details {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 352px !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 28px;
    align-items: start;
  }
  body.single-rtcl_listing #rtcl-slider-wrapper       { grid-column: 1; grid-row: 1; margin-bottom: 0 !important; }
  body.single-rtcl_listing .rtcl-main-content-wrapper { grid-column: 2; grid-row: 1; }
  body.single-rtcl_listing .tkm-sl-desc {
    grid-column: 1 / -1; grid-row: 2;
    padding-top: 20px; margin-top: 0;
    border-top: 1px solid var(--tkm-color-line);
  }
  body.single-rtcl_listing .rtcl-listing-meta {
    grid-column: 1 / -1; grid-row: 3;
    padding-top: 16px; margin-top: 4px;
    border-top: 1px solid var(--tkm-color-line);
    margin-bottom: 0;
  }
}

/* h1 in de info-kolom (via JS geplaatst) ---------------------------------- */
body.single-rtcl_listing .rtcl-main-content-wrapper h1.entry-title {
  font-size: 1.3rem !important;
  font-family: var(--tkm-font-display) !important;
  font-weight: 700 !important;
  color: var(--tkm-color-ink) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

/* Prijs ------------------------------------------------------------------- */
body.single-rtcl_listing .rtcl-price-wrap { margin-bottom: 14px; }
body.single-rtcl_listing .rtcl-price .rtcl-price-amount.amount bdi {
  font-family: var(--tkm-font-display); font-size: 1.5rem;
  font-weight: 700; color: var(--tkm-color-ink);
}
body.single-rtcl_listing .rtcl-price-type-label {
  font-size: 0.8rem; color: var(--tkm-color-muted);
}

/* Verkoper-kaart ========================================================== */
body.single-rtcl_listing .rtcl-listing-bottom-sidebar {
  border: none !important; margin: 0 !important; padding: 0 !important;
}
body.single-rtcl_listing .listing-sidebar {
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  overflow: hidden;
}
body.single-rtcl_listing .rtcl-listing-user-info { padding: 0 !important; }
body.single-rtcl_listing .rtcl-listing-side-title {
  padding: 10px 16px !important; border-bottom: 1px solid var(--tkm-color-line);
}
body.single-rtcl_listing .rtcl-listing-side-title h3 {
  font-size: 0.7rem !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.07em !important;
  color: var(--tkm-color-muted) !important; margin: 0 !important;
  font-family: var(--tkm-font-sans) !important;
}
body.single-rtcl_listing .rtcl-list-group { margin: 0 !important; padding: 0 !important; }
body.single-rtcl_listing .rtcl-list-group-item {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--tkm-color-line) !important;
  margin: 0 !important;
}
body.single-rtcl_listing .rtcl-list-group-item:last-child { border-bottom: none !important; }
body.single-rtcl_listing .rtcl-list-group-item .media { display: flex; align-items: center; gap: 12px; }
body.single-rtcl_listing .rtcl-list-group-item .media-body { flex: 1; min-width: 0; }
body.single-rtcl_listing .rtcl-list-group-item .media-body > span:first-child {
  display: block; font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--tkm-color-muted); margin-bottom: 2px; font-family: var(--tkm-font-sans);
}
body.single-rtcl_listing .rtcl-listing-author {
  font-weight: 700 !important; font-family: var(--tkm-font-display) !important;
  font-size: 0.95rem !important; color: var(--tkm-color-ink) !important;
  text-decoration: none !important;
}
body.single-rtcl_listing .rtcl-listing-author:hover { color: var(--tkm-color-primary) !important; }
body.single-rtcl_listing .rtcl-list-group-item .avatar {
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important; border: 2px solid var(--tkm-color-line);
}
body.single-rtcl_listing .rtcl-list-group-item .locations,
body.single-rtcl_listing .rtcl-list-group-item .numbers {
  font-weight: 600; font-family: var(--tkm-font-display);
  color: var(--tkm-color-ink); font-size: 0.88rem;
}
body.single-rtcl_listing .reveal-phone small.text-muted {
  font-size: 0.72rem; color: var(--tkm-color-muted);
}
body.single-rtcl_listing .rtcl-list-group-item [class*="rtcl-icon"] {
  color: var(--tkm-color-primary); flex-shrink: 0; width: 18px; text-align: center;
}
body.single-rtcl_listing .tk-profile-btn {
  font-size: 0.78rem !important; font-weight: 600 !important;
  color: var(--tkm-color-primary) !important; text-decoration: none !important;
  font-family: var(--tkm-font-display) !important;
}
body.single-rtcl_listing .tk-profile-btn:hover { text-decoration: underline !important; }
body.single-rtcl_listing .tk-sidebar-extra { margin-top: 6px !important; }
body.single-rtcl_listing .rtcl-author-badge { display: none; }

/* Acties: favoriet + social (onderaan info-kolom) ------------------------- */
body.single-rtcl_listing .single-listing-custom-fields-action {
  margin-top: 12px !important; padding: 0 !important;
}
body.single-rtcl_listing .rtcl-single-listing-action {
  display: flex !important; flex-wrap: wrap; align-items: center;
  gap: 6px; list-style: none !important; margin: 0 !important; padding: 0 !important;
}
body.single-rtcl_listing .rtcl-single-listing-action li { list-style: none !important; }
body.single-rtcl_listing .rtcl-single-listing-action li::before { content: none !important; }
body.single-rtcl_listing #rtcl-favourites a {
  display: inline-flex !important; align-items: center; gap: 5px;
  padding: 7px 12px;
  border: 1px solid var(--tkm-color-line) !important;
  border-radius: var(--tkm-radius-md) !important;
  font-size: 0.8rem; font-family: var(--tkm-font-display); font-weight: 600;
  color: var(--tkm-color-ink) !important; text-decoration: none !important;
  background: transparent !important;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
body.single-rtcl_listing #rtcl-favourites a:hover,
body.single-rtcl_listing #rtcl-favourites a.rtcl-added-favourite {
  border-color: var(--tkm-color-primary) !important;
  color: var(--tkm-color-primary) !important;
  background: var(--tkm-color-primary-soft) !important;
}
/* "Misbruik melden" verbergen */
body.single-rtcl_listing #rtcl-report-abuse-modal-link { display: none !important; }
/* Social-share als kleine ronde icoon-knoppen */
body.single-rtcl_listing .rtcl-sidebar-social { display: flex !important; gap: 4px; margin-left: auto !important; }
body.single-rtcl_listing .rtcl-sidebar-social a {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--tkm-color-line);
  color: var(--tkm-color-muted) !important; font-size: 0.8rem;
  text-decoration: none !important;
  transition: border-color 140ms ease, color 140ms ease;
}
body.single-rtcl_listing .rtcl-sidebar-social a:hover {
  border-color: var(--tkm-color-primary); color: var(--tkm-color-primary) !important;
}

/* Beschrijving ============================================================
   .tkm-sl-desc wordt door JS toegevoegd aan .rtcl-listing-description
   en het element wordt verplaatst naar direct child van het grid
   ======================================================================== */
body.single-rtcl_listing .rtcl-listing-description {
  font-size: 0.93rem; line-height: 1.7; color: var(--tkm-color-ink);
}
body.single-rtcl_listing .rtcl-listing-description p { margin-bottom: 12px; }
body.single-rtcl_listing .tkm-sl-desc::before {
  content: 'Omschrijving';
  display: block;
  font-family: var(--tkm-font-display); font-size: 1rem; font-weight: 700;
  color: var(--tkm-color-ink); margin-bottom: 12px;
}

/* Kaart ------------------------------------------------------------------- */
body.single-rtcl_listing .rtcl-single-listing-map {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--tkm-color-line);
}
body.single-rtcl_listing .rtcl-section-heading-simple h3 {
  font-family: var(--tkm-font-display) !important; font-size: 1rem !important;
  font-weight: 700 !important; color: var(--tkm-color-ink) !important;
  margin-bottom: 12px !important;
}

/* Gerelateerde advertenties ----------------------------------------------- */
body.single-rtcl_listing .rtcl-related-listing-wrap {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--tkm-color-line);
}
body.single-rtcl_listing .rtcl-related-title h3 {
  font-family: var(--tkm-font-display) !important; font-size: 1rem !important;
  font-weight: 700 !important; color: var(--tkm-color-ink) !important;
  margin-bottom: 12px !important;
}
body.single-rtcl_listing .rtcl-related-slider-item .listing-title a {
  font-family: var(--tkm-font-display); font-size: 0.88rem; font-weight: 600;
  color: var(--tkm-color-ink) !important; text-decoration: none !important;
}
body.single-rtcl_listing .rtcl-related-slider-item .listing-title a:hover {
  color: var(--tkm-color-primary) !important;
}

/* Mobiel ================================================================== */
@media (max-width: 759.98px) {
  /* Flex-volgorde: foto's eerst, dan info, dan beschrijving, meta onderaan */
  body.single-rtcl_listing .rtcl-single-listing-details {
    display: flex !important;
    flex-direction: column;
  }
  body.single-rtcl_listing #rtcl-slider-wrapper        { order: 1; }
  body.single-rtcl_listing .rtcl-main-content-wrapper  { order: 2; padding-top: 16px; }
  body.single-rtcl_listing .tkm-sl-desc                { order: 3; padding-top: 16px; border-top: 1px solid var(--tkm-color-line); margin-top: 4px; }
  body.single-rtcl_listing .rtcl-listing-meta          { order: 99; padding-top: 16px; border-top: 1px solid var(--tkm-color-line); margin-top: 8px; }
  /* Verkoper-kaart: edge-to-edge */
  body.single-rtcl_listing .listing-sidebar {
    border-radius: 0;
    border-left: none !important;
    border-right: none !important;
  }
  body.single-rtcl_listing .rtcl-single-listing-action { margin-top: 8px !important; }

  /* v0.23.37 — Side-padding op mobiel: 24px (= --tkm-space-5, zelfde als
     .tkm-container op mobiel) zodat de content uitlijnt met de rest van de
     pagina. Slider (#rtcl-slider-wrapper) blijft full-bleed via JS. */
  body.single-rtcl_listing .tk-back-container,
  body.single-rtcl_listing .rtcl-listing-meta,
  body.single-rtcl_listing .rtcl-main-content-wrapper,
  body.single-rtcl_listing .tkm-sl-desc,
  body.single-rtcl_listing .rtcl-listing-description,
  body.single-rtcl_listing .rtcl-single-listing-map,
  body.single-rtcl_listing .rtcl-related-listing-wrap,
  body.single-rtcl_listing .single-listing-custom-fields-action {
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================================
   VENDOR PROFILE PAGE  (body.tkm-vendor-page — VendorProfilePage.php)
   Detectie via isVendorPage() + body_class filter; werkt ook met
   custom author_base "verkoper" i.p.v. standaard "author".
   ============================================================================ */

body.tkm-vendor-page #ajax-content-wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Outer wrapper */
.tkm-vendor-profile {
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 64px;
}

/* ── Cover banner ─────────────────────────────────────────────────────────── */
.tkm-vendor-cover {
  width: 100%;
  height: 160px;
  background-color: #c8d9c2;           /* zacht TKM-groen als fallback */
  background-size: cover;
  background-position: center;
}

/* ── Header / info-balk ───────────────────────────────────────────────────── */
.tkm-vendor-header {
  background: #fff;
  border-bottom: 1px solid var(--tkm-color-line);
}
.tkm-vendor-header__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 28px 24px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* ── Avatar (overlapt de cover) ───────────────────────────────────────────── */
.tkm-vendor-avatar-wrap {
  flex-shrink: 0;
  margin-top: -48px;
}
.tkm-vendor-avatar {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
  background: #eee;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

/* ── Naam + badges + bio ─────────────────────────────────────────────────── */
.tkm-vendor-info {
  flex: 1 1 0;
  min-width: 0;
  padding-top: 14px;
}
.tkm-vendor-name {
  font-family: var(--tkm-font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--tkm-color-ink) !important;
  line-height: 1.2 !important;
  margin: 0 0 10px !important;
}

/* Badges (since / locatie / rating / count) */
.tkm-vendor-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-bottom: 12px;
}
.tkm-vendor-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--tkm-color-muted);
  line-height: 1.35;
  white-space: nowrap;
}
.tkm-vendor-badge svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.tkm-vendor-badge--rating strong {
  color: var(--tkm-color-ink);
  font-weight: 600;
}
.tkm-vendor-reviews-link {
  color: var(--tkm-color-primary);
  text-decoration: none;
  font-weight: 500;
}
.tkm-vendor-reviews-link:hover {
  text-decoration: underline;
}

/* Sterren */
.tkm-vendor-stars {
  display: inline-flex;
  gap: 1px;
  color: #f59f00;
  vertical-align: middle;
}
.tkm-star--empty { color: #ddd; }
.tkm-star--half  { opacity: 0.45; }

/* Bio */
.tkm-vendor-bio {
  font-size: 0.88rem;
  color: var(--tkm-color-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 560px;
}

/* ── Contact-knoppen ─────────────────────────────────────────────────────── */
.tkm-vendor-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  min-width: 148px;
}
.tkm-vendor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  padding: 0 20px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
}
.tkm-vendor-btn:hover  { opacity: 0.88; }
.tkm-vendor-btn:active { transform: scale(0.97); }
.tkm-vendor-btn--whatsapp {
  background: #25d366;
  color: #fff !important;
}
.tkm-vendor-btn--call {
  background: #fff;
  color: var(--tkm-color-ink) !important;
  border: 1.5px solid var(--tkm-color-line);
}

/* ── Advertenties-grid ───────────────────────────────────────────────────── */
.tkm-vendor-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 28px 0;
}
.tkm-vendor-listings-header {
  margin-bottom: 20px;
}
.tkm-vendor-listings-title {
  font-family: var(--tkm-font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--tkm-color-ink) !important;
  margin: 0 !important;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.tkm-vendor-listings-count {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--tkm-color-muted);
}

/* RTCL listings-wrapper: verwijder eigen witruimte boven het grid */
.tkm-vendor-content .rtcl-listings-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ── Mobiel (≤ 680px) ────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .tkm-vendor-cover { height: 100px; }

  .tkm-vendor-avatar-wrap { margin-top: -40px; }
  .tkm-vendor-avatar { width: 80px; height: 80px; }

  .tkm-vendor-header__inner {
    padding: 0 16px 20px;
    flex-wrap: wrap;
    gap: 0 14px;
  }

  /* Info direct naast de avatar, buttons eronder als volle breedte */
  .tkm-vendor-info    { padding-top: 10px; }
  .tkm-vendor-name    { font-size: 1.15rem !important; }

  .tkm-vendor-actions {
    flex-direction: row;
    width: 100%;
    padding-top: 4px;
    min-width: 0;
  }
  .tkm-vendor-btn { flex: 1; }

  .tkm-vendor-content { padding: 20px 16px 0; }
}

/* ============================================================================
   VENDOR PROFILE — Contact-kaart, Reviews, Review-formulier
   (v0.20.45 — TransactionService + privacy-gated contact)
   ============================================================================ */

/* ── Primaire actie-knop (nieuw) ─────────────────────────────────────────── */
.tkm-vendor-btn--chat {
  background: var(--tkm-color-primary, #3a6b35);
  color: #fff !important;
}
.tkm-vendor-btn--chat:hover { opacity: 0.88; }

/* ── Contactgegevens-kaart ───────────────────────────────────────────────── */
.tkm-vendor-contact {
  background: #fff;
  border-bottom: 1px solid var(--tkm-color-line);
}
.tkm-vendor-contact__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
}
.tkm-vendor-contact__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.87rem;
  color: var(--tkm-color-muted);
}
.tkm-vendor-contact__icon {
  flex-shrink: 0;
  display: flex;
  color: var(--tkm-color-muted);
  opacity: 0.75;
}
.tkm-vendor-contact__icon--wa {
  color: #25d366;
  opacity: 1;
}
.tkm-vendor-contact__link {
  color: var(--tkm-color-ink);
  text-decoration: none;
}
.tkm-vendor-contact__link:hover {
  text-decoration: underline;
  color: var(--tkm-color-primary);
}

@media (max-width: 680px) {
  .tkm-vendor-contact__inner {
    padding: 12px 16px;
    gap: 6px 18px;
  }
}

/* ── Beoordelingen-sectie ────────────────────────────────────────────────── */
.tkm-vendor-reviews-section {
  background: #fff;
  margin-top: 32px;
  border-top: 1px solid var(--tkm-color-line);
  padding-bottom: 48px;
}
.tkm-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}
.tkm-reviews-empty {
  font-size: 0.9rem;
  color: var(--tkm-color-muted);
  margin: 0 0 24px;
}
.tkm-reviews-login-hint {
  font-size: 0.87rem;
  color: var(--tkm-color-muted);
  margin-top: 16px;
}
.tkm-reviews-login-hint a {
  color: var(--tkm-color-primary);
}

/* Individuele review */
.tkm-review-item {
  padding: 16px;
  background: var(--tkm-color-paper, #f6f6f3);
  border-radius: 10px;
}
.tkm-review-item__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.tkm-review-item__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #ddd;
}
.tkm-review-item__meta {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tkm-review-item__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tkm-color-ink);
  line-height: 1.3;
}
.tkm-review-item__date {
  font-size: 0.78rem;
  color: var(--tkm-color-muted);
}
.tkm-review-item__text {
  font-size: 0.87rem;
  color: var(--tkm-color-ink);
  line-height: 1.6;
  margin: 0;
}

/* ── Review-formulier ────────────────────────────────────────────────────── */
.tkm-review-form-wrap {
  background: var(--tkm-color-paper, #f6f6f3);
  border: 1.5px solid var(--tkm-color-line);
  border-radius: 12px;
  padding: 24px;
  margin-top: 24px;
}
.tkm-review-form__title {
  font-family: var(--tkm-font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 0 0 16px !important;
  color: var(--tkm-color-ink) !important;
}
.tkm-review-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Ster-selector */
.tkm-star-select {
  display: flex;
  flex-direction: row-reverse; /* RTL-trick: CSS :checked ~ label werkt correct */
  justify-content: flex-end;
  gap: 6px;
}
.tkm-star-select__label {
  color: #d0d0d0;
  cursor: pointer;
  transition: color 0.1s, transform 0.1s;
  display: block;
  line-height: 1;
}
.tkm-star-select__label:hover,
.tkm-star-select__label.is-active {
  color: #f59f00;
}
.tkm-star-select__label:active { transform: scale(0.93); }

/* Textarea */
.tkm-review-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1.5px solid var(--tkm-color-line);
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.55;
  font-family: inherit;
  color: var(--tkm-color-ink);
  background: #fff;
  resize: vertical;
  transition: border-color 0.15s;
}
.tkm-review-textarea:focus {
  outline: none;
  border-color: var(--tkm-color-primary);
}

/* Footer (submit + status) */
.tkm-review-form__footer {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.tkm-vendor-btn--primary {
  background: var(--tkm-color-primary, #3a6b35);
  color: #fff !important;
  height: 44px;
  padding: 0 24px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: opacity 0.15s;
}
.tkm-vendor-btn--primary:hover    { opacity: 0.87; }
.tkm-vendor-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.tkm-review-form__status {
  font-size: 0.85rem;
  color: var(--tkm-color-error, #c0392b);
}
.tkm-review-success {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--tkm-color-primary);
  padding: 12px 0 0;
}

/* ============================================================================
   CHAT — Transactie bevestigen balk (.tkm-chat__transaction)
   ============================================================================ */

.tkm-chat__transaction {
  border-bottom: 1px solid var(--tkm-color-line);
  background: #fff;
}
.tkm-txn__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 0.83rem;
  flex-wrap: wrap;
}
.tkm-txn__label {
  flex: 1 1 0;
  min-width: 0;
  color: var(--tkm-color-muted);
  line-height: 1.4;
}
.tkm-txn__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: var(--tkm-color-primary, #3a6b35);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}
.tkm-txn__btn:hover    { opacity: 0.87; }
.tkm-txn__btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Wachten-staat (één partij bevestigd) */
.tkm-txn__bar--waiting {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  font-size: 0.83rem;
  color: var(--tkm-color-muted);
  font-style: italic;
}
.tkm-txn__bar--waiting svg { color: #aaa; }

/* Beide bevestigd */
.tkm-txn__bar--done,
.tkm-txn__bar--reviewed {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  font-size: 0.83rem;
  color: var(--tkm-color-primary, #3a6b35);
  font-weight: 500;
}
.tkm-txn__bar--done svg,
.tkm-txn__bar--reviewed svg { color: var(--tkm-color-primary, #3a6b35); }

.tkm-txn__review-link {
  color: var(--tkm-color-primary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.tkm-txn__review-link:hover { text-decoration: underline; }

/* ============================================================================
   LISTING SLIDER — image performance (v0.20.71)
   Root-causes opgelost:
   1. Native loading="lazy" op Swiper-slides: Swiper positioneert slides via
      CSS transform:translate3d(). De browser ziet die slides nooit als
      "in-viewport" voor de IntersectionObserver die native lazy-load aanstuurt.
      Resultaat: foto's komen niet op als de gebruiker swipt. Fix: native lazy
      NIET toevoegen — Swiper's eigen data-src-systeem doet het correct.
   2. #rtcl-slider-wrapper heeft geen expliciete hoogte → collapst naar 0px
      vóórdat de eerste foto laadt → zichtbare "pop" in layout. Fix: aspect-ratio.
   3. Salient NectarScrollEffects zet na DOMContentLoaded transform + opacity
      als inline style op elementen die in beeld scrollen. Alleen opacity/filter
      negeren was onvoldoende — ook transform + visibility neutraliseren.
   ============================================================================ */

/* will-change: auto — voorkom onnodige GPU-compositing-lagen           */
body.single-rtcl_listing .rtcl-slider-item img,
body.single-rtcl_listing .rtcl-slider-thumb-item img {
  will-change: auto !important;
}

/* Thumbnail-strip: vaste breedte (80px) per thumb — links uitgelijnd.
   Marktplaats-stijl: bij 2 foto's staan 2 smalle blokjes, niet 2 halve-
   breedte blokken. Bij veel foto's scrolt de strip horizontaal.
   Swiper's transform uitschakelen: thumbs passen in de meeste gevallen;
   horizontale overflow-scroll vangt het geval van 10+ foto's op. */
body.single-rtcl_listing .rtcl-slider-nav { margin-top: 10px; }
body.single-rtcl_listing .rtcl-slider-nav .swiper-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  transform: none !important;
  width: auto !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.single-rtcl_listing .rtcl-slider-nav .swiper-wrapper::-webkit-scrollbar { display: none; }
body.single-rtcl_listing .rtcl-slider-nav .swiper-slide {
  flex: 0 0 80px !important;
  width: 80px !important;
  margin: 0 !important;
  min-width: 0;
  height: auto !important;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.62;
  transition: opacity 200ms ease, transform 200ms ease;
  background: var(--tkm-color-paper);
}
body.single-rtcl_listing .rtcl-slider-nav .swiper-slide:hover {
  opacity: 0.92;
  transform: translateY(-2px);
}
body.single-rtcl_listing .rtcl-slider-nav .swiper-slide-thumb-active {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--tkm-color-primary);
}
body.single-rtcl_listing .rtcl-slider-nav .rtcl-slider-thumb-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Hoofdslider: aspect-ratio reserveert direct de juiste hoogte —
   browser hoeft niet te wachten op foto-dimensies om layout te bepalen.
   BELANGRIJK: aspect-ratio op .rtcl-slider (alleen foto-gedeelte), NIET
   op #rtcl-slider-wrapper. De wrapper bevat ook de thumbnail-nav, en als
   we de wrapper forceren naar 4:3 zou de nav overflow'en en de
   .rtcl-main-content-wrapper eronder overlappen — title + prijs zouden
   "geglitched" verschijnen tussen de thumbnails. */
body.single-rtcl_listing #rtcl-slider-wrapper {
  position: relative;
  display: block;
}
body.single-rtcl_listing .rtcl-slider {
  aspect-ratio: 4/3;
  min-height: 220px;
  position: relative;
  width: 100%;
  margin-bottom: 8px;
}
body.single-rtcl_listing .rtcl-slider-nav {
  position: relative !important;
  width: 100% !important;
  display: block !important;
  clear: both !important;
}
body.single-rtcl_listing .rtcl-slider-item {
  height: 100%;
  overflow: hidden;
  background: #fff;
}

/* ─── TKM Lightbox: fullscreen foto-viewer met arrows + swipe ─────────────
   Klik op slider-foto → opent fullscreen overlay met FULL-quality foto
   (data-large_image, geen crop). Pure CSS+JS, geen library.
*/
.tkm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(8, 12, 14, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms;
  user-select: none;
  -webkit-user-select: none;
}
.tkm-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.tkm-lightbox[hidden] { display: none !important; }

.tkm-lightbox__stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 64px;
  box-sizing: border-box;
  cursor: zoom-out;
}
.tkm-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  cursor: default;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}

.tkm-lightbox__close,
.tkm-lightbox__prev,
.tkm-lightbox__next {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 160ms ease, transform 160ms ease;
}
.tkm-lightbox__close:hover,
.tkm-lightbox__prev:hover,
.tkm-lightbox__next:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.05);
}
.tkm-lightbox__close { top: 20px; right: 20px; }
.tkm-lightbox__prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.tkm-lightbox__next  { right: 20px; top: 50%; transform: translateY(-50%); }
.tkm-lightbox__prev:hover { transform: translateY(-50%) scale(1.05); }
.tkm-lightbox__next:hover { transform: translateY(-50%) scale(1.05); }

.tkm-lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-family: var(--tkm-font-display, system-ui);
  font-size: 0.88rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.5);
  padding: 8px 16px;
  border-radius: 20px;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Mobile: kleinere knoppen, minder padding zodat foto groter is */
@media (max-width: 600px) {
  .tkm-lightbox__stage {
    padding: 48px 12px;
  }
  .tkm-lightbox__close,
  .tkm-lightbox__prev,
  .tkm-lightbox__next {
    width: 40px; height: 40px;
  }
  .tkm-lightbox__close { top: 12px; right: 12px; }
  .tkm-lightbox__prev  { left: 8px; }
  .tkm-lightbox__next  { right: 8px; }
  .tkm-lightbox__counter {
    bottom: 14px;
    font-size: 0.8rem;
    padding: 6px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tkm-lightbox { transition: none; }
}

/* Mobiel: thumbnails ZICHTBAAR + BINNEN content-rand (niet afgekapt).
   De #rtcl-slider-wrapper krijgt op mobiel margin-left/right:-16px (door
   onze JS in ListingActionBarInjector — 4px BREATHE buffer ipv full edge).
   Thumb-nav valt erbinnen — geen padding nodig, thumbs aligneren met de
   slider-foto edges (4px van scherm aan elke kant) als één gallery-blok. */
@media (max-width: 759.98px) {
  body.single-rtcl_listing .rtcl-slider-nav {
    display: block !important;
    margin-top: 8px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
  body.single-rtcl_listing .rtcl-slider-nav .swiper-slide {
    border-radius: 6px;
  }
}

/* Main-content-wrapper (titel/prijs/seller) MOET onder de slider komen,
   geen overlap, geen z-index magic die Salient kan hijacken. */
body.single-rtcl_listing .rtcl-main-content-wrapper {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important;
  background: transparent;
  clear: both;
}
body.single-rtcl_listing .rtcl-main-content-wrapper h1.entry-title,
body.single-rtcl_listing .rtcl-price-wrap {
  position: static !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Gerelateerde advertenties: forceer image-boven, content-onder layout
   (Salient's .grid-item .item-content default = position:absolute overlay,
   wat title/prijs op de foto plakt — hier neutraliseren) */
body.single-rtcl_listing .rtcl-related-slider-item .related-item-inner,
body.single-rtcl_listing .rtcl-related-slider-item .grid-item {
  position: relative !important;
  display: block !important;
  background: transparent !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: var(--tkm-radius-md);
}
body.single-rtcl_listing .rtcl-related-slider-item .listing-thumb {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}
body.single-rtcl_listing .rtcl-related-slider-item .listing-thumb img,
body.single-rtcl_listing .rtcl-related-slider-item .rtcl-thumbnail {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: 4/3;
  object-fit: cover;
}
body.single-rtcl_listing .rtcl-related-slider-item .item-content {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  background: var(--tkm-color-paper-bright) !important;
  display: block !important;
  width: 100% !important;
  padding: 12px 14px !important;
  opacity: 1 !important;
}
body.single-rtcl_listing .rtcl-slider-item img.rtcl-responsive-img {
  display: block;
  width: 100%;
  height: 100%;
  /* contain = hele foto zichtbaar, portret-foto's krijgen witte letterbox-vlakken
     links/rechts (achtergrond van .rtcl-slider-item = #fff). Geen bijsnijding. */
  object-fit: contain;
  object-position: center;
  background: #fff;
}

/* ── Nuclear override: opacity · filter · transform · visibility ────────
   Swiper:   .swiper-lazy start op opacity 0 → 1
   lazysizes: img.lazyloading/.lazyload opacity + filter:brightness
   Salient:  NectarScrollEffects past transform + opacity toe via JS
   → ook transform en visibility neutraliseren; beelden zijn dan altijd
     direct zichtbaar, ongeacht welk framework er iets mee doet.        */
body.single-rtcl_listing #rtcl-slider-wrapper img,
body.single-rtcl_listing .swiper-lazy,
body.single-rtcl_listing img.lazyloading,
body.single-rtcl_listing img.lazyload,
body.single-rtcl_listing img.lazyloaded {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
  -webkit-transition: none !important;
  animation: none !important;
  visibility: visible !important;
}
body.single-rtcl_listing .swiper-lazy-preloader { display: none !important; }

/* ==========================================================================
   v0.20.51 — Homepage redesign
   ========================================================================== */

/* ── Hero: zoekbalk-wrap + autocomplete dropdown ──────────────────────────── */
.tkm-hero__search-wrap {
  position: relative;
  max-width: 660px;
}
.tkm-hero__search-wrap .tkm-hero__search {
  max-width: 100%;
  width: 100%;
}

.tkm-hero__suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-border, #ddd);
  border-radius: var(--tkm-radius-lg);
  box-shadow: 0 8px 32px rgba(14, 20, 16, .16);
  list-style: none;
  margin: 0;
  padding: var(--tkm-space-1) 0;
  z-index: 200;
  overflow: hidden;
}

.tkm-suggest-item {
  display: flex;
  align-items: center;
  gap: var(--tkm-space-2);
  padding: 10px var(--tkm-space-4);
  cursor: pointer;
  color: var(--tkm-color-ink);
  font-size: 0.92rem;
  line-height: 1.3;
  transition: background 0.1s;
  outline: none;
}
.tkm-suggest-item:hover,
.tkm-suggest-item:focus { background: var(--tkm-color-paper); }
.tkm-suggest-item svg   { color: var(--tkm-color-muted); flex-shrink: 0; }

/* ── Hero: advertentieteller ──────────────────────────────────────────────── */
.tkm-hero__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--tkm-text-sm);
  color: rgba(246, 243, 238, .72);
  margin-top: calc(var(--tkm-space-2) * -1);
  margin-bottom: var(--tkm-space-4);
}
.tkm-hero__count svg    { color: var(--tkm-color-accent); flex-shrink: 0; }
.tkm-hero__count strong { color: var(--tkm-color-paper); font-weight: 700; }

/* ── Hero-card: afbeelding + body-wrapper ─────────────────────────────────── */
/* Override bestaande padding; body-wrapper draagt nu de padding */
.tkm-hero__card {
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  display: block;
}
.tkm-hero__card-img {
  width: 100%;
  height: 110px;
  overflow: hidden;
  background: var(--tkm-color-sand);
}
.tkm-hero__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tkm-hero__card-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(14, 20, 16, .20);
}
.tkm-hero__card-body {
  padding: var(--tkm-space-4);
}

/* ── FeaturedListings: telling in header ─────────────────────────────────── */
.tkm-featured__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tkm-color-accent-soft);
  color: var(--tkm-color-accent);
  font-size: var(--tkm-text-xs);
  font-weight: 700;
  font-family: var(--tkm-font-body);
  letter-spacing: .04em;
  padding: 2px 9px;
  border-radius: var(--tkm-radius-full);
  margin-left: var(--tkm-space-2);
  vertical-align: middle;
  line-height: 1.6;
}

/* ── FeaturedListings: Nieuw-badge ───────────────────────────────────────── */
.tkm-listing__new {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--tkm-color-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--tkm-radius-full);
  line-height: 1.4;
}

/* ── FeaturedListings: datum + locatie-row ───────────────────────────────── */
.tkm-listing__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tkm-space-2);
  margin-top: var(--tkm-space-1);
}
.tkm-listing__row .tkm-listing__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}
.tkm-listing__row .tkm-listing__meta svg { flex-shrink: 0; }
.tkm-listing__date {
  font-size: var(--tkm-text-xs);
  color: var(--tkm-color-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── FeaturedListings: "bekijk alle" footer-knop ────────────────────────── */
.tkm-featured__more {
  margin-top: var(--tkm-space-8);
  text-align: center;
}

/* ==========================================================================
   v0.20.52 — Gratis-adverteren & Lokaal-ophalen templates
   ========================================================================== */

/* Drie-kolomsgrid voor feature-cards op de nieuwe USP-pagina's */
.tkm-free__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-6);
}
@media (min-width: 768px) {
  .tkm-free__grid { grid-template-columns: repeat(3, 1fr); }
}

.tkm-free__card {
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-xl);
  padding: var(--tkm-space-6);
}
.tkm-free__card h2 {
  font-size: 1.2rem;
  margin: var(--tkm-space-4) 0 var(--tkm-space-3);
}
.tkm-free__card p {
  color: var(--tkm-color-ink);
  line-height: 1.65;
  margin-bottom: var(--tkm-space-4);
}

.tkm-free__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--tkm-color-accent-soft);
  color: var(--tkm-color-accent);
  border-radius: var(--tkm-radius-lg);
}
.tkm-free__card:nth-child(odd) .tkm-free__icon {
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
}
/* h3 inside free-card (SEO-hiërarchie: sectie heeft h2, cards h3) */
.tkm-free__card h3 {
  font-size: 1.2rem;
  margin: var(--tkm-space-4) 0 var(--tkm-space-3);
  font-family: var(--tkm-font-display);
  font-weight: 700;
  color: var(--tkm-color-ink);
}

/* Multi-column inhoudsgrid — voor "voor wie?" en doelgroepkolommen.
   2 kolommen op tablet, 4 op desktop.                                */
.tkm-deep__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tkm-space-5);
}
@media (min-width: 600px) { .tkm-deep__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tkm-deep__cols { grid-template-columns: repeat(4, 1fr); } }

.tkm-deep__col {
  padding: var(--tkm-space-5);
  background: var(--tkm-color-paper-bright);
  border-radius: var(--tkm-radius-lg);
  border: 1px solid var(--tkm-color-line);
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-2);
}
.tkm-deep__col h3 {
  font-family: var(--tkm-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--tkm-color-ink);
  margin: 0 0 var(--tkm-space-1);
}
.tkm-deep__col p {
  color: var(--tkm-color-muted);
  line-height: 1.6;
  margin: 0;
  font-size: 0.95rem;
}

/* ============================================================================
   v0.20.69 — Salient Nectar social share widget verbergen
   De floating share-balk (.nectar-social.fixed) is niet gewenst op TKM —
   wordt door Salient op alle pagina's geïnjecteerd maar past niet bij onze
   mobile action bar en breekt de UX op advertentie-pagina's.
   ============================================================================ */
.nectar-social.fixed,
.nectar-social.fixed.visible {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ╭──────────────────────────────────────────────────────────────────────╮
   │ Drawer cat-stack — Marktplaats-stijl multi-page slide-navigatie     │
   │ Sectie 5 in tkm-drawer (.tkm-drawer--shop). Vervangt de oude        │
   │ accordion (.tkm-drawer__cat-accordion) door een drill-down stack:    │
   │ root → level-0 → level-1 → level-2. Pages slide-in vanaf rechts,    │
   │ vorige pages slide-out naar links met subtle pushed-back effect.    │
   ╰──────────────────────────────────────────────────────────────────────╯ */
.tkm-drawer__section--cat-stack {
  /* Section-padding wegnemen — de stack vult zelf de volledige breedte */
  padding: 0 !important;
  gap: 0 !important;
}
.tkm-drawer__section--cat-stack > .tkm-drawer__label { display: none; }

.tkm-cat-stack {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  /* min-height groeit mee met de active-page via JS (data-stack-height) */
}

.tkm-cat-stack__page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--tkm-color-paper-bright);
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 280ms cubic-bezier(.22,.8,.26,1),
              opacity 200ms ease,
              visibility 0s linear 280ms;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.tkm-cat-stack__page.is-active {
  position: relative; /* duwt de stack-hoogte mee */
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition: transform 280ms cubic-bezier(.22,.8,.26,1),
              opacity 200ms ease,
              visibility 0s linear 0s;
}
.tkm-cat-stack__page.is-prev {
  transform: translateX(-30%);
  opacity: 0.35;
  visibility: visible;
  pointer-events: none;
  transition: transform 280ms cubic-bezier(.22,.8,.26,1),
              opacity 200ms ease,
              visibility 0s linear 280ms;
}

/* ── Page head: back-knop + titel ───────────────────────────────────── */
.tkm-cat-stack__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 6px;
  /* v0.23.37: geen border-bottom — gaf dubbele divider-feel samen met de
     border-bottom van tkm-drawer__head erboven. */
  background: var(--tkm-color-paper-bright);
  position: sticky;
  top: 0;
  z-index: 2;
}
.tkm-cat-stack__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--tkm-radius-full);
  color: var(--tkm-color-ink);
  background: transparent;
  flex-shrink: 0;
  transition: background 140ms ease, color 140ms ease;
}
.tkm-cat-stack__back:hover,
.tkm-cat-stack__back:focus-visible {
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
}
.tkm-cat-stack__title {
  font-family: var(--tkm-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--tkm-color-ink);
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Search per page ────────────────────────────────────────────────── */
.tkm-cat-stack__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 10px 10px;
  padding: 9px 12px;
  background: var(--tkm-color-paper);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-full);
  color: var(--tkm-color-muted);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.tkm-cat-stack__search:focus-within {
  border-color: var(--tkm-color-primary);
  box-shadow: 0 0 0 3px var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
}
.tkm-cat-stack__search input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 0.95rem;
  color: var(--tkm-color-ink);
  outline: none;
  padding: 0;
}
.tkm-cat-stack__search input::placeholder { color: var(--tkm-color-muted); }

/* Hero-variant op page 0 — prominentere zoekbalk, groter, accent border.
   Top-margin (16px) zorgt voor lucht tussen close-button-rand en zoekbalk. */
.tkm-cat-stack__search--hero {
  margin: 16px 10px 12px;
  padding: 14px 16px;
  background: var(--tkm-color-paper-bright);
  border: 2px solid var(--tkm-color-line);
  gap: 10px;
}
.tkm-cat-stack__search--hero:focus-within {
  border-color: var(--tkm-color-primary);
  box-shadow: 0 0 0 4px var(--tkm-color-primary-soft);
}
.tkm-cat-stack__search--hero input {
  font-size: 1.02rem;
  font-weight: 500;
}
.tkm-cat-stack__search--hero input::placeholder {
  color: var(--tkm-color-muted);
  font-weight: 400;
}

/* ── "Alle advertenties in X" pill (alleen op deeper pages) ─────────── */
.tkm-cat-stack__all-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px 8px;
  padding: 12px 14px;
  background: var(--tkm-color-accent-soft);
  color: var(--tkm-color-accent);
  border-radius: var(--tkm-radius-md);
  font-family: var(--tkm-font-display);
  font-size: 0.92rem;
  font-weight: 600;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
  min-width: 0; /* flex-truncation */
}
/* v0.23.37: tekst afkappen met ellipsis als categorienaam te lang is */
.tkm-cat-stack__all-link > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tkm-cat-stack__all-link > svg { flex-shrink: 0; }
.tkm-cat-stack__all-link:hover,
.tkm-cat-stack__all-link:focus-visible {
  background: var(--tkm-color-accent);
  color: #fff !important; /* expliciet wit — voorkomt Salient-overschrijving */
}
.tkm-cat-stack__all-link > svg { transition: transform 180ms ease; }
.tkm-cat-stack__all-link:hover > svg { transform: translateX(3px); }

/* ── Lijst items — mobile-first, touch-friendly ─────────────────────── */
.tkm-cat-stack__list {
  display: flex;
  flex-direction: column;
  padding: 0 6px 20px;
  gap: 2px;
}
.tkm-cat-stack__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 14px;
  border-radius: var(--tkm-radius-md);
  text-align: left;
  background: transparent;
  color: var(--tkm-color-ink);
  font-family: var(--tkm-font-display);
  transition: background 140ms ease, color 140ms ease, transform 120ms ease;
  cursor: pointer;
  min-height: 64px; /* WCAG touch-target — comfortabel op mobiel */
}
.tkm-cat-stack__item:hover,
.tkm-cat-stack__item:focus-visible {
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
}
.tkm-cat-stack__item:active { transform: scale(.99); }

.tkm-cat-stack__item-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* v0.23.41: SVG in plaats van emoji — geen font-size meer nodig */
  color: var(--tkm-color-accent);
  background: var(--tkm-color-accent-soft);
  border: 1px solid transparent;
  border-radius: var(--tkm-radius-md);
  transition: background 140ms ease, border-color 140ms ease,
              color 140ms ease, transform 200ms ease;
}
.tkm-cat-stack__item-icon svg { flex-shrink: 0; }
.tkm-cat-stack__item:hover .tkm-cat-stack__item-icon,
.tkm-cat-stack__item:focus-visible .tkm-cat-stack__item-icon {
  background: var(--tkm-color-accent);
  border-color: var(--tkm-color-accent);
  color: #fff;
  transform: scale(1.04);
}

.tkm-cat-stack__item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tkm-cat-stack__item-name {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tkm-cat-stack__item-eyebrow {
  font-size: 0.8rem;
  color: var(--tkm-color-muted);
  font-weight: 400;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tkm-cat-stack__item-chevron {
  flex-shrink: 0;
  color: var(--tkm-color-muted);
  transition: transform 160ms ease, color 140ms ease;
}
.tkm-cat-stack__item:hover .tkm-cat-stack__item-chevron,
.tkm-cat-stack__item:focus-visible .tkm-cat-stack__item-chevron {
  color: var(--tkm-color-primary);
  transform: translateX(2px);
}

/* Items zonder children (deepest level → link i.p.v. drill) krijgen geen
   chevron, en geen muted eyebrow. JS voegt .is-leaf toe. */
.tkm-cat-stack__item.is-leaf .tkm-cat-stack__item-chevron { display: none; }

/* Items die uit de zoekfilter vallen */
.tkm-cat-stack__item.is-hidden { display: none; }

/* Empty state — als zoekfilter niets oplevert */
.tkm-cat-stack__empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--tkm-color-muted);
  font-size: 0.9rem;
  display: none;
}
.tkm-cat-stack__page.is-empty .tkm-cat-stack__empty { display: block; }
.tkm-cat-stack__page.is-empty .tkm-cat-stack__list { display: none; }

/* v0.23.40 — is-searching: verberg de standaard categorie-rij als de
   smart-search dropdown actief is. De dropdown toont eigen resultaten. */
.tkm-cat-stack__page.is-searching > .tkm-cat-stack__list  { display: none; }
.tkm-cat-stack__page.is-searching > .tkm-cat-stack__empty { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   SMART-SEARCH DROPDOWN  (hero-zoekbalk in de categorie-drawer)
   Twee secties: categorieën (client-side) + materialen (AJAX).
   ═══════════════════════════════════════════════════════════════════════ */

/* Zoekbalk-varianten: normaal rond, met-dropdown vlak-onderaan (has-drop) */
.tkm-cat-stack__search--hero.has-drop {
  border-radius: 14px 14px 0 0;
  border-bottom-color: var(--tkm-color-paper); /* visueel "verbonden" met drop */
  margin-bottom: 0;
}

/* ── Dropdown-container ─────────────────────────────────────────── */
.tkm-search-drop {
  margin: 0 10px 12px;
  background: var(--tkm-color-paper-bright);
  border: 2px solid var(--tkm-color-line);
  border-top: none;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  /* Zachte shadow voor diepte */
  box-shadow: 0 6px 20px rgba(0,0,0,.07);
}

/* ── Sectie (categorieën / materialen) ─────────────────────────── */
.tkm-search-drop__section {
  padding: 10px 0 6px;
}
.tkm-search-drop__section + .tkm-search-drop__section {
  border-top: 1px solid var(--tkm-color-line);
}

/* Label boven elke sectie */
.tkm-search-drop__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tkm-color-muted);
  padding: 0 14px 6px;
}

/* ── Categorie-rijen ───────────────────────────────────────────── */
.tkm-search-drop__cat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  color: var(--tkm-color-ink);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 100ms ease;
}
.tkm-search-drop__cat-item:hover,
.tkm-search-drop__cat-item:focus-visible {
  background: var(--tkm-color-paper);
  outline: none;
}
.tkm-search-drop__cat-icon {
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
.tkm-search-drop__cat-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tkm-search-drop__arrow {
  flex-shrink: 0;
  color: var(--tkm-color-muted);
  transition: transform 140ms ease;
}
.tkm-search-drop__cat-item:hover .tkm-search-drop__arrow { transform: translateX(3px); }

/* ── Listing-rijen ─────────────────────────────────────────────── */
.tkm-search-drop__listing {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: var(--tkm-color-ink);
  transition: background 100ms ease;
}
.tkm-search-drop__listing:hover,
.tkm-search-drop__listing:focus-visible {
  background: var(--tkm-color-paper);
  outline: none;
}
.tkm-search-drop__thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--tkm-radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--tkm-color-paper);
}
.tkm-search-drop__thumb--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tkm-color-line);
  color: var(--tkm-color-muted);
}
.tkm-search-drop__thumb--ph svg { width: 22px; height: 22px; }
.tkm-search-drop__listing-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tkm-search-drop__listing-title {
  font-size: 0.875rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tkm-color-ink);
}
.tkm-search-drop__listing-meta {
  font-size: 0.775rem;
  color: var(--tkm-color-muted);
}

/* ── "Alle resultaten" footer-link ─────────────────────────────── */
.tkm-search-drop__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--tkm-color-accent);
  border-top: 1px solid var(--tkm-color-line);
  transition: background 100ms ease;
}
.tkm-search-drop__all:hover,
.tkm-search-drop__all:focus-visible {
  background: var(--tkm-color-accent-soft);
  outline: none;
}
.tkm-search-drop__all .tkm-search-drop__arrow { color: var(--tkm-color-accent); }
.tkm-search-drop__all:hover .tkm-search-drop__arrow { transform: translateX(3px); }

/* ── Laad-indicator (drie pulserende dots) ─────────────────────── */
.tkm-search-drop__loading {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 0.84rem;
  color: var(--tkm-color-muted);
}
.tkm-search-drop__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tkm-color-muted);
  animation: tkm-dot-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
.tkm-search-drop__dot:nth-child(2) { animation-delay: .2s; }
.tkm-search-drop__dot:nth-child(3) { animation-delay: .4s; }
@keyframes tkm-dot-pulse {
  0%, 80%, 100% { opacity: .25; transform: scale(.8); }
  40%           { opacity: 1;   transform: scale(1); }
}

/* ── Geen resultaten ───────────────────────────────────────────── */
.tkm-search-drop__empty {
  padding: 16px 14px;
  font-size: 0.875rem;
  color: var(--tkm-color-muted);
  text-align: center;
}

/* Zoek-highlight: <mark> binnen resultaten */
.tkm-search-drop mark {
  background: transparent;
  color: var(--tkm-color-accent);
  font-weight: 700;
}

/* ╭──────────────────────────────────────────────────────────────────────╮
   │ Drawer divider + below-area — visueel onderscheid tussen het         │
   │ categorie/zoek-deel (boven, hero) en de "rest" (onder: account,      │
   │ info, footer). Below-area krijgt een lichte achtergrond + extra      │
   │ padding zodat het duidelijk een aparte sectie is.                   │
   ╰──────────────────────────────────────────────────────────────────────╯ */
.tkm-drawer__divider {
  height: 8px;
  margin: 24px -16px 0;
  background:
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.04) 100%),
    var(--tkm-color-paper);
  border-top: 1px solid var(--tkm-color-line);
  flex-shrink: 0;
}
.tkm-drawer__below {
  background: var(--tkm-color-paper);
  margin: 0 -16px -16px; /* trekt full-width tot de drawer-randen */
  padding: 18px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-4);
}
.tkm-drawer__below .tkm-drawer__account-pill {
  margin-top: 0; /* verwijder eventuele section-spacing — divider regelt dit */
}

/* Compactere info-sectie binnen below-area — kleiner, bondiger, secundair.
   De hoofd-actie (categorie kiezen) zit boven de divider, dit is supporting. */
.tkm-drawer__below .tkm-drawer__section { gap: 4px; }
.tkm-drawer__below .tkm-drawer__label {
  font-size: 0.7rem;
  padding: 0 8px;
  margin-bottom: 2px;
}
.tkm-drawer__below .tkm-drawer__item {
  padding: 8px 10px;
  font-size: 0.85rem;
  font-weight: 400;
  gap: 10px;
}
.tkm-drawer__below .tkm-drawer__item-icon {
  width: 18px;
  height: 18px;
  opacity: 0.65;
}
.tkm-drawer__below .tkm-drawer__item-icon svg { width: 15px; height: 15px; }

.tkm-drawer__below .tkm-drawer__footer {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--tkm-color-line);
  text-align: center;
  color: var(--tkm-color-muted);
  font-size: 0.78rem;
}

/* ╭──────────────────────────────────────────────────────────────────────╮
   │ Filterbar — categorie-CTA (Marktplaats-stijl)                       │
   │ Vervangt de oude "Materiaal kiezen"-popover én de cards-rij. Eén    │
   │ prominente pill die de drawer-stack opent voor multi-level navigatie.│
   ╰──────────────────────────────────────────────────────────────────────╯ */
.tkm-filterbar__cat-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 12px;
  background: var(--tkm-color-primary);
  border: 1px solid var(--tkm-color-primary);
  border-radius: 999px;
  font-family: var(--tkm-font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease, box-shadow 200ms ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.tkm-filterbar__cat-cta:hover,
.tkm-filterbar__cat-cta:focus-visible {
  background: var(--tkm-color-primary-strong, var(--tkm-color-primary));
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.tkm-filterbar__cat-cta:active { transform: scale(.98); }

/* v0.23.157: in no-category state staat alleen de "Categorie kiezen"-CTA
   in de chips-rij (radius/prijs zijn dan hidden). Lijn 'm rechts uit zodat
   'ie niet recht onder de hero-CTA "Kies een materiaalsoort" valt (anders
   2 oranje knoppen onder elkaar links). Mét categorie keren de chips terug
   en blijft de rij links uitgelijnd (default). */
body.tkm-no-category .tkm-filterbar__chips {
  justify-content: flex-end;
}

.tkm-filterbar__cat-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(255,255,255,.15);
  border-radius: 6px;
  flex-shrink: 0;
}
.tkm-filterbar__cat-cta-label { flex: 1; }
.tkm-filterbar__cat-cta-caret {
  flex-shrink: 0;
  opacity: .85;
  transition: transform 180ms ease;
}
.tkm-filterbar__cat-cta:hover .tkm-filterbar__cat-cta-caret { transform: translateX(2px); }

/* Mobiel: full-width prominent — maakt 'm de eerste-lijns-CTA op de shop */
@media (max-width: 720px) {
  .tkm-filterbar__cat-cta {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 16px 12px 14px;
    font-size: 0.96rem;
  }
  .tkm-filterbar__cat-cta-icon { width: 28px; height: 28px; }
}

/* Active filters CHIPS-rij wraps onder de CTA op mobiel — fine-tune onder. */
@media (max-width: 720px) {
  .tkm-filterbar__chips {
    flex-wrap: wrap;
    gap: 8px;
  }
  .tkm-filterbar__cat-cta + * { margin-top: 4px; }
}

/* ╭──────────────────────────────────────────────────────────────────────╮
   │ BrandStatement — krachtig brand-block met decoratieve blokjes.       │
   │ Plaatsing op homepage tussen CategoryGrid en HowItWorks. Schept       │
   │ presence + verankert de circulaire missie van TweedekansMateriaal.  │
   ╰──────────────────────────────────────────────────────────────────────╯ */
.tkm-brand-statement {
  position: relative;
  padding: clamp(56px, 10vw, 96px) 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,.08) 0%, transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,.05) 0%, transparent 35%),
    var(--tkm-color-primary);
  color: #fff;
  overflow: hidden;
}
.tkm-brand-statement__inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* Decoratieve blokjes (zoals het logo-mark) — subtiel boven de tagline */
.tkm-brand-statement__decor {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 24px;
  opacity: 0.95;
}
.tkm-brand-statement__block {
  display: inline-block;
  width: 36px;
  height: 12px;
  background: #fff;
  border-radius: 3px;
  transform-origin: left center;
  animation: tkm-brand-block-fade 600ms cubic-bezier(.22,.8,.26,1) backwards;
}
.tkm-brand-statement__block--1 { animation-delay: 0ms; }
.tkm-brand-statement__block--2 { animation-delay: 80ms; transform: translateX(8px); }
.tkm-brand-statement__block--3 { animation-delay: 160ms; }
.tkm-brand-statement__block--4 { animation-delay: 240ms; transform: translateX(8px); }
@keyframes tkm-brand-block-fade {
  from { opacity: 0; transform: translateY(-8px) scaleX(0.5); }
  to   { opacity: 0.95; transform: translateY(0) scaleX(1); }
}

.tkm-brand-statement__tagline {
  font-family: var(--tkm-font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.tkm-brand-statement__line-1 {
  display: block;
  color: #fff;
}
.tkm-brand-statement__line-2 {
  display: block;
  color: #fff;
  margin-top: 4px;
  opacity: 0.92;
}

.tkm-brand-statement__body {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.55;
  margin: 0 auto 36px;
  max-width: 600px;
  color: rgba(255,255,255,0.92);
  text-wrap: pretty;
}

.tkm-brand-statement__ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.tkm-brand-statement__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: var(--tkm-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 140ms ease, background 140ms ease, color 140ms ease, box-shadow 200ms ease;
}
.tkm-brand-statement__cta--primary {
  background: var(--tkm-color-accent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}
.tkm-brand-statement__cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.28);
  color: #fff;
}
.tkm-brand-statement__cta--primary svg { transition: transform 200ms ease; }
.tkm-brand-statement__cta--primary:hover svg { transform: translateX(3px); }
.tkm-brand-statement__cta--outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.45);
}
.tkm-brand-statement__cta--outline:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.75);
}

/* ╭──────────────────────────────────────────────────────────────────────╮
   │ StatsBand — vier kerngetallen, fris en levend.                       │
   │ Plaats: tussen TrustStrip en FeaturedListings. Trust-kicker via      │
   │ getallen i.p.v. de iconenrij van TrustStrip.                         │
   ╰──────────────────────────────────────────────────────────────────────╯ */
.tkm-stats-band {
  padding: clamp(40px, 6vw, 64px) 0;
  background: var(--tkm-color-paper);
  border-top: 1px solid var(--tkm-color-line);
  border-bottom: 1px solid var(--tkm-color-line);
}
.tkm-stats-band__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(20px, 3vw, 32px);
  align-items: stretch;
}
.tkm-stats-band__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 8px;
  position: relative;
}
.tkm-stats-band__item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: calc(clamp(20px, 3vw, 32px) * -0.5);
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: var(--tkm-color-line);
}
@media (max-width: 720px) {
  .tkm-stats-band__item:not(:last-child)::after { display: none; }
  .tkm-stats-band__item:not(:last-child) {
    border-bottom: 1px solid var(--tkm-color-line);
    padding-bottom: 20px;
  }
}
.tkm-stats-band__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--tkm-radius-full);
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  margin-bottom: 8px;
}
.tkm-stats-band__icon svg { display: block; }
.tkm-stats-band__value {
  font-family: var(--tkm-font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--tkm-color-primary);
  font-variant-numeric: tabular-nums;
}
.tkm-stats-band__label {
  font-size: 0.88rem;
  color: var(--tkm-color-muted);
  font-weight: 500;
  line-height: 1.35;
  max-width: 200px;
}

/* ╭──────────────────────────────────────────────────────────────────────╮
   │ Homepage row-ritme — alternerend bg-patroon zodat geen 2 dezelfde   │
   │ achtergronden achter elkaar voorkomen. Werkelijke block-classes     │
   │ (geverifieerd in v0.23.1): .tkm-catgrid (niet --grid), .tkm-how     │
   │ (niet --it-works), .tkm-usp (niet --grid).                          │
   ╰──────────────────────────────────────────────────────────────────────╯ */
.tkm-main {
  background: var(--tkm-color-paper-bright);
}
/* Volgorde in home.php:
     1. Hero            (eigen donker)
     2. StatsBand       paper          ← grijs
     3. FeaturedListings paper-bright  ← wit
     4. CategoryGrid    paper          ← grijs
     5. BrandStatement  (eigen primary)
     6. HowItWorks      paper-bright  ← wit
     7. UspGrid         paper          ← grijs
     8. CtaBand         (eigen kleurband)
     9. Faq             paper-bright  ← wit
   Forceren met !important zodat block-eigen styling niet overrult. */
/* v0.23.21: HowItWorks override WEGGEHAALD — die forceerde paper-bright maar
   liet de tekst-kleuren (wit op surface-dark) onaangetast → wit-op-wit, onleesbaar.
   HowItWorks behoudt nu z'n eigen donkere achtergrond als kleurband. Het row-ritme
   wordt: Hero(donker) → StatsBand(grijs) → Featured(wit) → CategoryGrid(grijs) →
   BrandStatement(oranje) → HowItWorks(donker) → UspGrid(grijs) → CtaBand(oranje) →
   Faq(wit). Alterneert nog steeds prima. */
.tkm-main > .tkm-stats-band,
.tkm-main > .tkm-catgrid,
.tkm-main > .tkm-usp {
  background: var(--tkm-color-paper) !important;
}
/* v0.23.35 — alleen Featured (cards-rij) krijgt witte bg in main; FAQ valt
   terug op default cream (--tkm-color-paper) zodat er duidelijk contrast is
   met de LatestPosts blog-rij die er op de homepage onder komt (wit). */
.tkm-main > .tkm-featured {
  background: var(--tkm-color-paper-bright) !important;
}
/* LatestPosts onder FAQ → forceer wit zodat er alternatie is met de cream FAQ */
.tkm-main > .tkm-latest-posts {
  background: var(--tkm-color-paper-bright) !important;
}
/* v0.23.36 — FAQ background duidelijker zichtbaar maken op de homepage:
   default cream (#F6F3EE) was te subtiel naast wit, gebruiker zag geen
   verschil. Gebruik een warmere/donkerder beige zodat FAQ duidelijk staat
   tussen CTA-band (oranje accent) en LatestPosts (wit). */
.tkm-main > .tkm-faq {
  background: #EFEAE0 !important;
}

/* ╭──────────────────────────────────────────────────────────────────────╮
   │ Filterbar geo-autocomplete (v0.23.3) — locatie-suggesties dropdown   │
   │ via Nominatim. Vervangt RTCL's eigen dropdown die niet doorkwam in   │
   │ onze proxy-UI. Verschijnt onder de address-input bij typen.          │
   ╰──────────────────────────────────────────────────────────────────────╯ */
.tkm-filterbar__geo-suggest {
  margin-top: 6px;
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  z-index: 5;
}
.tkm-filterbar__geo-suggest[hidden] { display: none; }

.tkm-filterbar__geo-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--tkm-color-line);
  cursor: pointer;
  color: var(--tkm-color-ink);
  transition: background 140ms ease, color 140ms ease;
}
.tkm-filterbar__geo-suggest-item:last-child { border-bottom: 0; }
.tkm-filterbar__geo-suggest-item:hover,
.tkm-filterbar__geo-suggest-item:focus-visible,
.tkm-filterbar__geo-suggest-item.is-active {
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
  outline: none;
}
.tkm-filterbar__geo-suggest-item svg {
  flex-shrink: 0;
  color: var(--tkm-color-muted);
}
.tkm-filterbar__geo-suggest-item:hover svg,
.tkm-filterbar__geo-suggest-item.is-active svg {
  color: var(--tkm-color-primary);
}
.tkm-filterbar__geo-suggest-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tkm-filterbar__geo-suggest-text strong {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tkm-filterbar__geo-suggest-text small {
  font-size: 0.78rem;
  color: var(--tkm-color-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tkm-filterbar__geo-suggest-item:hover .tkm-filterbar__geo-suggest-text small,
.tkm-filterbar__geo-suggest-item.is-active .tkm-filterbar__geo-suggest-text small {
  color: var(--tkm-color-primary);
  opacity: 0.75;
}

/* ╭──────────────────────────────────────────────────────────────────────╮
   │ Listings-loader (v0.23.4) — visuele indicator op de listings-grid    │
   │ tijdens filter-apply zodat de gebruiker ziet dat er iets gebeurt.    │
   ╰──────────────────────────────────────────────────────────────────────╯ */
.tkm-listings-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 60px;
  gap: 12px;
  z-index: 10;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  font-family: var(--tkm-font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tkm-color-primary);
  animation: tkm-loader-fade-in 200ms ease backwards;
}
@keyframes tkm-loader-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.tkm-listings-loader__spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--tkm-color-primary-soft);
  border-top-color: var(--tkm-color-primary);
  animation: tkm-loader-spin 800ms linear infinite;
}
@keyframes tkm-loader-spin {
  to { transform: rotate(360deg); }
}

/* ── AJAX-filter loading state (v0.23.42) ────────────────────────────────── */
/* Dims de listings-grid zodra een filter via RTCL AJAX wordt toegepast.
   Wordt automatisch verwijderd door onze rtcl-ajax-filter-complete listener.
   pointer-events:none voorkomt dat gebruiker filters dubbel klikt. */
.tkm-listings-loading {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 150ms ease;
  position: relative;
}
.tkm-listings-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(255,255,255,0.35);
  border-radius: inherit;
}

/* ╭──────────────────────────────────────────────────────────────────────╮
   │ v0.23.17 fijntunes                                                   │
   ╰──────────────────────────────────────────────────────────────────────╯ */

/* v0.23.154: de listings-WRAPPER zelf full-width (100vw breakout) zodat
   een eventuele achtergrond/scheiding schermbreed loopt — net als de
   filterbar-wrap al doet. De INHOUD (listings/actions/filters) blijft
   gecentreerd op 1240px = exact de breedte van .tkm-container (menu/
   header), dus alles lijnt netjes uit. */
.rtcl-listings-wrapper {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
  overflow-x: clip; /* voorkomt horizontale scroll door de 100vw breakout */
  /* v0.23.159: FOUC-/glitch-fix. De 1240-cap stond tot nu toe op de
     KINDEREN (`> .rtcl-listings` etc.). Bij een cold-load met filter-
     params vervangt RTCL Pro's init-AJAX de .rtcl-listings-node opnieuw;
     in dat ene frame is de nieuwe node héél even géén direct kind meer,
     matcht de child-cap niet, en schiet de grid full-width uit tot de
     cap weer herpakt — precies de glitch die de gebruiker zag ("eerst
     full width, dan pas in de box"). Door de 1240-grens hier op de
     STABIELE wrapper te zetten (bestaat al bij first-paint en wordt
     nooit vervangen) is ELKE descendant altijd gebonden: er is simpelweg
     geen bredere ruimte meer om in te flitsen. De child-caps blijven
     staan als extra zekerheid. Settled-positie is identiek — live
     geverifieerd: grid 1240px / left 344 vóór én na, en ook nadat de
     child-cap kunstmatig werd weggehaald bleef de grid op 1240. */
  padding-left:  max(0px, calc((100vw - 1240px) / 2));
  padding-right: max(0px, calc((100vw - 1240px) / 2));
}

/* (1) Container-padding consistent voor RTCL no-result wrapper.
   .tkm-filterbar-wrap heeft al .tkm-container; we doen hetzelfde voor de
   wrappers die RTCL Pro server-side rendert (geen DOM-toegang vanuit PHP).
   Sinds v0.23.19: ook .rtcl-listings-actions (count + sort) — staat nu als
   direct sibling boven .rtcl-listings, beide krijgen dezelfde width. */
.rtcl-ajax-filter-result-wrap,
.rtcl-listings-wrapper > .rtcl-listings,
.rtcl-listings-wrapper > .rtcl-listings-actions,
.rtcl-listings-wrapper > .rtcl-active-filters-container,
.rtcl-listings-wrapper > .rtcl-ajax-pagination-container {
  width: 100%;
  /* v0.23.155: !important nodig — RTCL Pro's eigen grid-CSS (.columns-5)
     zet anders een bredere max-width (gemeten 1700px) op de grid waardoor
     'ie buiten de menu-breedte uitsteekt. Cap hard op 1240px = exact
     .tkm-container (menu/header) zodat alles uitlijnt. */
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--tkm-space-5);
  padding-right: var(--tkm-space-5);
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .rtcl-ajax-filter-result-wrap,
  .rtcl-listings-wrapper > .rtcl-listings,
  .rtcl-listings-wrapper > .rtcl-listings-actions,
  .rtcl-listings-wrapper > .rtcl-active-filters-container,
  .rtcl-listings-wrapper > .rtcl-ajax-pagination-container {
    padding-left: var(--tkm-space-6);
    padding-right: var(--tkm-space-6);
  }
}
/* Listings GRID binnen no-result-wrap: zonder dubbele padding. */
.rtcl-ajax-filter-result-wrap > .rtcl-ajax-listings,
.rtcl-ajax-filter-result-wrap > .rtcl-listings {
  padding-left: 0;
  padding-right: 0;
}

/* (2) Top-zoekbalk INPUT volledig transparant — geen eigen browser-styling
   (webkit-search-decoration, focus-ring, autofill bg). De WRAPPER
   .tkm-filterbar__search heeft al border + bg + focus-shadow. */
.tkm-filterbar__search input,
.tkm-filterbar__search input:focus,
.tkm-filterbar__search input:focus-visible,
.tkm-filterbar__search input:active,
.tkm-filterbar__search input:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.tkm-filterbar__search input::-webkit-search-decoration,
.tkm-filterbar__search input::-webkit-search-cancel-button,
.tkm-filterbar__search input::-webkit-search-results-button,
.tkm-filterbar__search input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
/* iOS Safari autofill geeft yellow bg — overschrijven via inset shadow */
.tkm-filterbar__search input:-webkit-autofill,
.tkm-filterbar__search input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--tkm-color-paper-bright) inset !important;
  -webkit-text-fill-color: var(--tkm-color-ink) !important;
}

/* (3) rtcl-listings-wrapper iets omhoog — visuele lucht tussen filterbar
   en listings is nu te groot. Trek hem 12px naar boven. */
.rtcl-listings-wrapper {
  margin-top: -8px;
}
.rtcl-listings-wrapper > .rtcl-listings,
.rtcl-listings-wrapper > .rtcl-ajax-filter-result-wrap {
  margin-top: 0;
  padding-top: 4px;
}

/* ============================================================================
   v0.23.32 — HOMEPAGE REDESIGN
   - Clean Quiety-style hero (no product cards)
   - Voordelen consolidatie
   - AllCategories tile-grid (alle 16 listing types)
   - Equal-sized featured listing cards
   - Alternating section backgrounds via .tkm-section--alt
   ============================================================================ */

/* ── Hero (clean v10) ───────────────────────────────────────────────────── */
.tkm-hero--clean {
  background: linear-gradient(180deg, #0E1F2C 0%, #0A1620 60%, #0E1F2C 100%);
  color: #F6F3EE;
  padding: clamp(60px, 9vw, 120px) 0 clamp(60px, 8vw, 100px);
  position: relative;
  overflow: visible;        /* v0.23.36: was 'hidden' — knipte de zoek-suggest dropdown af */
  isolation: isolate;
  z-index: 30;              /* v0.23.36: bovenop volgende sections, anders valt zoek-suggest erachter */
}
.tkm-hero--clean .tkm-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;        /* v0.23.36: blob-clipping verplaatst van hero naar bg-wrapper
                              zodat de hero zelf overflow:visible kan zijn voor de zoek-suggest */
  border-radius: inherit;
}
.tkm-hero--clean .tkm-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
}
.tkm-hero--clean .tkm-hero__blob--orange {
  width: 480px; height: 480px;
  top: -120px; left: -150px;
  background: radial-gradient(circle, #E85D1A 0%, transparent 70%);
}
.tkm-hero--clean .tkm-hero__blob--green {
  width: 400px; height: 400px;
  bottom: -100px; right: -120px;
  background: radial-gradient(circle, #2F7D3B 0%, transparent 70%);
  opacity: 0.35;
}
.tkm-hero--clean .tkm-hero__blob--peach {
  width: 360px; height: 360px;
  top: 30%; right: 5%;
  background: radial-gradient(circle, #F5B0A0 0%, transparent 70%);
  opacity: 0.18;
}
.tkm-hero--clean .tkm-hero__grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 30%, transparent 80%);
}
.tkm-hero--clean .tkm-hero__inner {
  position: relative;
  z-index: 2;
  /* v0.23.105: flex-COLUMN i.p.v. row, zodat `.tkm-hero__layout` en
   * `.tkm-hero__below` netjes stacken (anders staat .tkm-hero__below
   * NAAST de hero-content op mobiel → kapotte layout). */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tkm-hero--clean .tkm-hero__layout,
.tkm-hero--clean .tkm-hero__below {
  width: 100%;
  /* min-width:0 voorkomt dat lange titels de flex-container expanden */
  min-width: 0;
}
.tkm-hero--clean .tkm-hero__center {
  width: 100%;
  max-width: 880px;
  min-width: 0; /* v0.23.105: voorkomt overflow door lange woorden */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.tkm-hero--clean .tkm-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: rgba(232, 93, 26, 0.13);
  border: 1px solid rgba(232, 93, 26, 0.32);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #FFD2BB;
  letter-spacing: 0.02em;
}
.tkm-hero--clean .tkm-hero__badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #E85D1A;
  box-shadow: 0 0 8px rgba(232, 93, 26, 0.7);
  animation: tkm-pulse 2s ease-in-out infinite;
}
@keyframes tkm-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.3); }
}
.tkm-hero--clean .tkm-hero__title {
  margin: 0;
  font-family: var(--tkm-font-display);
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.tkm-hero--clean .tkm-hero__title-accent {
  color: #FF8A4F;
  background: linear-gradient(120deg, #FF8A4F 0%, #FFB780 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 600;
  /* v0.23.86: italic + background-clip:text knipt soms de laatste letter af
     aan de rechterkant. Inline-block + padding-right + ruimte rond de schuine
     glyph zorgt dat de gradient tot voorbij het laatste letter loopt. */
  display: inline-block;
  padding-right: 0.15em;
}
.tkm-hero--clean .tkm-hero__subtitle {
  margin: 0;
  max-width: 640px;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.55;
  color: rgba(246, 243, 238, 0.78);
}
.tkm-hero--clean .tkm-hero__search-wrap {
  width: 100%;
  max-width: 720px;
  position: relative;
  margin-top: 8px;
}
.tkm-hero--clean .tkm-hero__search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border-radius: 999px;
  padding: 8px 8px 8px 22px;
  box-shadow:
    0 14px 50px rgba(0, 0, 0, 0.35),
    0 4px 16px rgba(232, 93, 26, 0.18);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.tkm-hero--clean .tkm-hero__search:focus-within {
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.42),
    0 6px 22px rgba(232, 93, 26, 0.32),
    0 0 0 3px rgba(232, 93, 26, 0.18);
  transform: translateY(-1px);
}
.tkm-hero--clean .tkm-hero__search-icon {
  flex-shrink: 0;
  display: flex;
  color: #6B7280;
}
.tkm-hero--clean .tkm-hero__search-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 16px 6px;
  font-size: 1rem;
  color: #0E1F2C;
  min-width: 0;
}
.tkm-hero--clean .tkm-hero__search-input::placeholder {
  color: #9AA0A6;
}
.tkm-hero--clean .tkm-hero__search-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  cursor: pointer;
  padding: 14px 24px;
  background: linear-gradient(120deg, #E85D1A 0%, #F47A35 100%);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.96rem;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(232, 93, 26, 0.35);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.tkm-hero--clean .tkm-hero__search-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(232, 93, 26, 0.45);
}
.tkm-hero--clean .tkm-hero__suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  padding: 8px;
  list-style: none;
  margin: 0;
  z-index: 30;
  max-height: 320px;
  overflow-y: auto;
}
.tkm-hero--clean .tkm-suggest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #0E1F2C;
  cursor: pointer;
  font-size: 0.94rem;
}
.tkm-hero--clean .tkm-suggest-item:hover,
.tkm-hero--clean .tkm-suggest-item:focus {
  background: rgba(232, 93, 26, 0.08);
  outline: 0;
}
.tkm-hero--clean .tkm-suggest-item svg {
  color: #9AA0A6;
}
.tkm-hero--clean .tkm-hero__quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 10px;
  font-size: 0.88rem;
}
.tkm-hero--clean .tkm-hero__quick-label {
  color: rgba(246, 243, 238, 0.55);
  margin-right: 4px;
}
.tkm-hero--clean .tkm-hero__quick a {
  color: rgba(246, 243, 238, 0.92);
  text-decoration: none;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  transition: all 160ms ease;
}
.tkm-hero--clean .tkm-hero__quick a:hover {
  background: rgba(232, 93, 26, 0.18);
  border-color: rgba(232, 93, 26, 0.45);
  color: #FFE2D0;
}
.tkm-hero--clean .tkm-hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px 56px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.tkm-hero--clean .tkm-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tkm-hero--clean .tkm-hero__stat strong {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  font-family: var(--tkm-font-display);
}
.tkm-hero--clean .tkm-hero__stat span {
  font-size: 0.84rem;
  color: rgba(246, 243, 238, 0.58);
  letter-spacing: 0.02em;
}

/* Mobile hero adjustments */
@media (max-width: 640px) {
  .tkm-hero--clean { padding: 48px 0 56px; }
  .tkm-hero--clean .tkm-hero__search {
    flex-wrap: wrap;
    border-radius: 24px;
    padding: 12px;
    gap: 6px;
  }
  .tkm-hero--clean .tkm-hero__search-input {
    flex-basis: 100%;
    padding: 8px 4px;
  }
  .tkm-hero--clean .tkm-hero__search-icon {
    padding-left: 8px;
  }
  .tkm-hero--clean .tkm-hero__search-btn {
    flex: 1;
    justify-content: center;
    padding: 14px 20px;
  }
  .tkm-hero--clean .tkm-hero__stats { gap: 22px 36px; }
}

/* ── Voordelen block ────────────────────────────────────────────────────── */
/* v0.23.34 — bg van wit naar brand-cream zodat het contrast geeft met de
   wit-bg FeaturedListings die direct eronder komt op de homepage. */
.tkm-voordelen { background: var(--tkm-color-paper); padding: clamp(60px, 8vw, 110px) 0; }
.tkm-voordelen .tkm-section__head--center {
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.tkm-voordelen .tkm-section__head h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.tkm-voordelen .tkm-section__lede {
  max-width: 620px;
  margin: 0;
  color: var(--tkm-color-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}
.tkm-voordelen__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.tkm-voordelen__card {
  background: #FFFFFF;
  border: 1px solid #ECEEF1;
  border-radius: 18px;
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.tkm-voordelen__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(11, 25, 41, 0.08);
  border-color: #DDE2E7;
}
.tkm-voordelen__icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tkm-voordelen__icon[data-color="orange"] { background: rgba(232, 93, 26, 0.12); color: #E85D1A; }
.tkm-voordelen__icon[data-color="blue"]   { background: rgba(40, 120, 168, 0.12); color: #2878A8; }
.tkm-voordelen__icon[data-color="green"]  { background: rgba(47, 125, 59, 0.12); color: #2F7D3B; }
.tkm-voordelen__icon[data-color="purple"] { background: rgba(120, 82, 200, 0.12); color: #7852C8; }
.tkm-voordelen__card h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0E1F2C;
}
.tkm-voordelen__card p {
  margin: 0;
  color: var(--tkm-color-muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* ── AllCategories — zoekbalk + kaart-grid (v0.23.42) ───────────────────── */
.tkm-allcats { background: #F7F5F1; padding: clamp(60px, 8vw, 110px) 0; }
.tkm-allcats .tkm-section__head--center {
  text-align: center;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.tkm-allcats .tkm-section__head h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.tkm-allcats .tkm-section__lede {
  max-width: 580px;
  margin: 0;
  color: var(--tkm-color-muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

/* ── Search bar ─────────────────────────────────────────────────────────── */
.tkm-allcats__search-wrap {
  max-width: 640px;
  margin: 0 auto clamp(28px, 5vw, 52px);
}
.tkm-allcats__search-field {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid #D0D5DD;
  border-radius: 14px;
  padding: 0 18px;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(11,25,41,0.05);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.tkm-allcats__search-field:focus-within {
  border-color: #E85D1A;
  box-shadow: 0 0 0 3px rgba(232,93,26,0.12), 0 2px 8px rgba(11,25,41,0.05);
}
.tkm-allcats__search-icon { flex-shrink: 0; color: var(--tkm-color-muted); }
.tkm-allcats__search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1rem;
  color: #0E1F2C;
  padding: 16px 0;
  font-family: inherit;
}
.tkm-allcats__search-input::placeholder { color: #A0AEC0; }
.tkm-allcats__search-input::-webkit-search-cancel-button { display: none; }
.tkm-allcats__search-field.has-drop {
  border-radius: 14px 14px 0 0;
  border-bottom-color: #F0F2F4;
}
.tkm-allcats__drop {
  position: absolute;
  top: calc(100% + 1px);
  left: -1.5px; right: -1.5px;
  border: 1.5px solid #E85D1A;
  border-top: 1px solid #ECEEF1;
  border-radius: 0 0 14px 14px;
  background: #fff;
  z-index: 200;
  max-height: 400px;
  overflow-y: auto;
  box-shadow: 0 12px 28px rgba(11,25,41,0.10);
}

/* ── Grid ───────────────────────────────────────────────────────────────── */
.tkm-allcats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) {
  .tkm-allcats__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .tkm-allcats__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 420px) {
  .tkm-allcats__grid { grid-template-columns: 1fr; }
}

/* ── Card (v0.23.158: de hele kaart is nu één klikbare tegel) ─────────────── */
.tkm-allcats__card {
  background: #fff;
  border: 1px solid #ECEEF1;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: #0E1F2C;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 140ms ease;
}
.tkm-allcats__card:hover {
  border-color: #E85D1A;
  box-shadow: 0 8px 28px rgba(11,25,41,0.09);
  transform: translateY(-2px);
  background: #FDFAF8;
}
.tkm-allcats__card-head {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Icoon */
.tkm-allcats__tile-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFF6F0;
  border-radius: 10px;
  color: #E85D1A;
  transition: color 160ms ease, background 160ms ease;
}
.tkm-allcats__tile-icon svg { flex-shrink: 0; }
.tkm-allcats__card:hover .tkm-allcats__tile-icon {
  background: #E85D1A;
  color: #fff;
}

/* Naam + eyebrow */
.tkm-allcats__tile-name {
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.25;
  color: #0E1F2C;
}
.tkm-allcats__tile-eyebrow {
  font-size: 0.75rem;
  color: var(--tkm-color-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chevron */
.tkm-allcats__tile-chevron {
  flex-shrink: 0;
  color: #C8CCD1;
  transition: transform 160ms ease, color 160ms ease;
}
.tkm-allcats__card:hover .tkm-allcats__tile-chevron {
  color: #E85D1A;
  transform: translateX(2px);
}

/* v0.23.158: sub-categorie-chips + browse-voet CSS verwijderd — de kaart
   is nu één klikbare tegel (icoon + naam + beschrijving). Sub-categorieën
   blijven doorzoekbaar via de smart-search balk. */

/* ── Equal-sized FeaturedListings cards ─────────────────────────────────── */
.tkm-home .rtcl-listings .listing-item,
.tkm-home .rtcl-related-listings .listing-item {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.tkm-home .rtcl-listings .item-content,
.tkm-home .rtcl-related-listings .item-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.tkm-home .rtcl-listings .listing-thumb img,
.tkm-home .rtcl-related-listings .listing-thumb img {
  aspect-ratio: 4/3 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}
.tkm-home .rtcl-listings .listing-title,
.tkm-home .rtcl-related-listings .listing-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.6em !important;
}

/* ── Section background alternation on home ──────────────────────────────── */
.tkm-home > section { position: relative; }
/* Default background colors are set per block; this is an override hook for
   when we want to force a specific section to use the alt background. */
.tkm-section--alt { background: #F7F5F1; }

/* ── Section header center variant (used by Voordelen + AllCategories) ──── */
.tkm-section__head--center { text-align: center; }
.tkm-section__head--center .tkm-eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 auto;
}

/* ============================================================================
   v0.23.33 — Single advertentie pages: compactere header op mobiel
   - Action-row verbergen (de 2 grote knoppen "Materiaal kopen / Advertentie")
   - Top-row krimpen: kleinere logo, kleinere icons, lagere row-height
   - Resultaat: meer schermruimte voor de advertentie zelf op mobiel
   ============================================================================ */
@media (max-width: 959.98px) {
  body.single-rtcl_listing .tkm-header__action-row {
    display: none !important;
  }
  body.single-rtcl_listing .tkm-header__row {
    min-height: 52px;
    gap: var(--tkm-space-2);
  }
  body.single-rtcl_listing .tkm-header__logo .tkm-logo__mark {
    width: 26px;
    height: 26px;
  }
  body.single-rtcl_listing .tkm-header__logo .tkm-logo__word {
    font-size: 0.92rem;
  }
  body.single-rtcl_listing .tkm-header__burger {
    width: 36px;
    height: 36px;
    gap: 4px;
  }
  body.single-rtcl_listing .tkm-header__burger span {
    width: 18px;
  }
  body.single-rtcl_listing .tkm-header__account {
    padding: 6px;
  }
  body.single-rtcl_listing .tkm-header__account svg {
    width: 19px;
    height: 19px;
  }
}

/* v0.23.82: HTML `hidden` attribute moet display:none afdwingen, ook als
 * een element CSS `display: inline-flex` of soortgelijk heeft staan. */
.tkm-filterbar__chip[hidden],
[data-tkm-needs-category][hidden] {
  display: none !important;
}

/* v0.23.153: listings-actions (result-count + sorteer) staan nu ALTIJD
 * boven de grid — ook zonder gekozen categorie. De oude pre-hide regel
 * (body.tkm-no-category .rtcl-listings-actions { display:none }) is
 * verwijderd op verzoek: de balk hoort permanent zichtbaar te zijn.
 * De `tkm-no-category` body-class blijft bestaan voor de hero/filterbar-
 * layout (zie .tkm-filterbar-wrap padding-regel verderop). */

/* v0.23.107: PHP-fallback active-filters bar — wanneer RTCL Pro de bar
 * zelf niet rendert (no-results state na refresh met filter-URL), valt
 * onze server-side gerenderde versie in. We gebruiken `<a href>` voor
 * remove-links zodat klik = full page reload zonder die filter. Browser-
 * defaults (blauwe onderstreepte links) overschrijven met inherit.
 * v0.23.109: container-class hernoemd naar `.tkm-fallback-actives-container`
 * (was `.rtcl-active-filters-container.tkm-fallback-actives`) zodat RTCL
 * Pro 'm niet als z'n eigen managed-element ziet en niet meer overschrijft. */
.tkm-fallback-actives-container a.afi,
.tkm-fallback-actives-container a.rtcl-clear-filters {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* v0.23.126: CSS-safety-net tegen DUBBELE summary. RTCL Pro rendert z'n
 * eigen `.rtcl-active-filters-container` soms client-side ná onze JS-init,
 * waardoor onze PHP-fallback ÉN RTCL's echte bar tegelijk zichtbaar zijn.
 * Zodra er ergens een echte RTCL-container met chips (`.afi`) bestaat,
 * verbergen we onze fallback — RTCL's versie is dan de bron van waarheid. */
body:has(.rtcl-active-filters-container:not(.tkm-fallback-actives) .afi) .tkm-fallback-actives-container {
  display: none;
}
/* RTCL's lege placeholder-container (geen `.afi` erin) → verbergen,
 * anders pakt 'ie onnodig verticale ruimte met 0 zichtbare content. */
.rtcl-listings-wrapper > .rtcl-active-filters-container:not(:has(.afi)) {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════════════
 * v0.23.83 — Home hero strakkere zoekbalk + USP-strip
 * ════════════════════════════════════════════════════════════════════════════ */

/* Strakkere search bar — minder padding, subtieler hover, betere mobile fit */
.tkm-hero__search {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 8px 18px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(14, 20, 16, 0.18), 0 2px 6px rgba(14, 20, 16, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.6);
  min-height: 56px;
}
.tkm-hero__search:focus-within {
  box-shadow: 0 8px 32px rgba(232, 93, 26, 0.25), 0 0 0 3px rgba(232, 93, 26, 0.15);
}
.tkm-hero__search-icon {
  display: inline-flex;
  align-items: center;
  color: #8a8a8a;
  flex-shrink: 0;
}
.tkm-hero__search input,
.tkm-hero__search-input {
  flex: 1;
  min-width: 0;
  padding: 0 6px;
  border: none;
  background: transparent;
  font-size: 1rem;
  color: #0E1410;
  outline: none;
  font-family: inherit;
}
.tkm-hero__search input::placeholder,
.tkm-hero__search-input::placeholder {
  color: #a0a0a0;
}
.tkm-hero__search-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 22px !important;
  min-height: 40px !important;
  background: #E85D1A;
  color: #ffffff !important;
  border: none;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 140ms ease, transform 100ms ease;
  flex-shrink: 0;
}
.tkm-hero__search-btn:hover {
  background: #d54f0e;
  transform: translateY(-1px);
}
.tkm-hero__search-btn svg {
  margin-top: 1px;
}

/* v0.23.104: wrapper rond USPs + live-stat. Staat ÓNDER het 2-col layout
 * (text + phone), dus full-width. Margin-top creëert breathing room.
 * v0.23.106: tightere spacing op mobiel — phone + USPs voelen nu als
 * één doorlopend ritme i.p.v. 2 losse blokken met dood-zone ertussen. */
.tkm-hero__below {
  margin-top: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
@media (min-width: 720px) {
  .tkm-hero__below {
    margin-top: 36px;
  }
}

/* USP-strip onder de search bar */
.tkm-hero__usps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
}
.tkm-hero__usp {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 14px;
  text-align: left;
}
.tkm-hero__usp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(232, 93, 26, 0.18);
  border-radius: 10px;
  color: #ffb787;
  flex-shrink: 0;
}
.tkm-hero__usp-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tkm-hero__usp-body strong {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.tkm-hero__usp-body span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  line-height: 1.4;
}

/* Live-stat onder USPs */
.tkm-hero__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
}
.tkm-hero__live strong {
  color: #ffffff;
  font-weight: 700;
}
.tkm-hero__live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #34c759;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.25);
  animation: tkm-hero-pulse 2s ease-in-out infinite;
}
@keyframes tkm-hero-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.25); }
  50%      { box-shadow: 0 0 0 6px rgba(52, 199, 89, 0.0); }
}

/* ── Mobile responsive ────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .tkm-hero__search {
    padding: 6px 6px 6px 16px;
    min-height: 52px;
  }
  .tkm-hero__search-btn {
    padding: 0 16px !important;
    min-height: 38px !important;
    font-size: 0.9rem;
  }
  .tkm-hero__search-btn span {
    display: none; /* alleen icon op mobiel */
  }
  .tkm-hero__usps {
    grid-template-columns: 1fr;
    gap: 8px;
    max-width: 420px;
    margin: 22px auto 14px;
  }
  .tkm-hero__usp {
    padding: 12px 14px;
    border-radius: 12px;
  }
  .tkm-hero__usp-icon {
    width: 34px;
    height: 34px;
  }
  .tkm-hero__live {
    font-size: 0.75rem;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * v0.23.103 — Home hero dual-CTA strip (vervangt zoekbalk)
 *
 * Twee prominente knoppen: "Materiaal kopen" (primaire, oranje fill, pulse)
 * en "Advertentie plaatsen" (secundaire, glass-stijl). Veel duidelijker dan
 * de oude zoekbalk waar gebruikers eerst moesten typen voor ze ergens komen.
 * ════════════════════════════════════════════════════════════════════════════ */

.tkm-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 6px 0 4px;
  max-width: 620px;
  width: 100%;
}

.tkm-hero__cta {
  position: relative;
  flex: 1 1 260px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px 16px 16px;
  border-radius: 18px;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
  isolation: isolate;
  overflow: hidden;
}

.tkm-hero__cta:hover,
.tkm-hero__cta:focus-visible {
  transform: translateY(-3px);
  outline: none;
}

/* ─── Primaire CTA: kopen ─────────────────────────────────────── */
.tkm-hero__cta--buy {
  background: linear-gradient(135deg, #ff8a3d 0%, #E85D1A 60%, #c84a0e 100%);
  color: #ffffff;
  box-shadow:
    0 16px 36px -10px rgba(232, 93, 26, 0.6),
    0 6px 14px -4px rgba(232, 93, 26, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.tkm-hero__cta--buy:hover,
.tkm-hero__cta--buy:focus-visible {
  box-shadow:
    0 22px 44px -12px rgba(232, 93, 26, 0.7),
    0 8px 18px -4px rgba(232, 93, 26, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.tkm-hero__cta--buy .tkm-hero__cta-icon {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
}
.tkm-hero__cta--buy .tkm-hero__cta-sub {
  color: rgba(255, 255, 255, 0.86);
}

/* Pulse-glow rondom de primaire CTA */
.tkm-hero__cta-pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  box-shadow: 0 0 0 0 rgba(255, 138, 61, 0.55);
  animation: tkm-hero-cta-pulse 2.6s ease-out infinite;
}
@keyframes tkm-hero-cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 138, 61, 0.5); }
  70%  { box-shadow: 0 0 0 18px rgba(255, 138, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 138, 61, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tkm-hero__cta-pulse { animation: none; }
}

/* ─── Secundaire CTA: verkopen ────────────────────────────────── */
.tkm-hero__cta--sell {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 8px 22px -8px rgba(14, 20, 16, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.tkm-hero__cta--sell:hover,
.tkm-hero__cta--sell:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    0 14px 30px -10px rgba(14, 20, 16, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.tkm-hero__cta--sell .tkm-hero__cta-icon {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.tkm-hero__cta--sell .tkm-hero__cta-sub {
  color: rgba(255, 255, 255, 0.7);
}

/* ─── Inhoud (icon + text + arrow) ────────────────────────────── */
.tkm-hero__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
}

.tkm-hero__cta-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.tkm-hero__cta-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: inherit;
}
.tkm-hero__cta-sub {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.tkm-hero__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-left: 2px;
  transition: transform 220ms ease;
  opacity: 0.85;
}
.tkm-hero__cta:hover .tkm-hero__cta-arrow,
.tkm-hero__cta:focus-visible .tkm-hero__cta-arrow {
  transform: translateX(4px);
  opacity: 1;
}

/* ─── Mobile: stack verticaal ────────────────────────────────── */
@media (max-width: 720px) {
  .tkm-hero__cta-row {
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 2px;
  }
  .tkm-hero__cta {
    flex: 1 1 auto;
    width: 100%;
    padding: 14px 16px 14px 14px;
    border-radius: 16px;
  }
  .tkm-hero__cta-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .tkm-hero__cta-title {
    font-size: 1rem;
  }
  .tkm-hero__cta-sub {
    font-size: 0.74rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * v0.23.85 — Hero 2-col layout (content links, phone rechts) op desktop
 * ════════════════════════════════════════════════════════════════════════════ */

/* Layout-grid: alleen actief op .tkm-hero--with-phone, anders blijft de
 * standaard centered-layout van .tkm-hero__center-only-content gewoon werken. */
.tkm-hero--with-phone .tkm-hero__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
  justify-items: center;
}
@media (min-width: 720px) {
  .tkm-hero--with-phone .tkm-hero__layout {
    gap: 32px;
  }
}
@media (min-width: 980px) {
  .tkm-hero--with-phone .tkm-hero__layout {
    grid-template-columns: 1fr 320px;
    gap: 56px;
    align-items: center;
    justify-items: stretch;
  }
  .tkm-hero--with-phone .tkm-hero__center {
    text-align: left;
    margin: 0;
    max-width: 600px;
  }
  /* v0.23.104: USPs + live-stat staan nu ONDER de 2-col layout in
   * `.tkm-hero__below`, dus weer gecentreerd full-width. De oude
   * left-align overrides voor `--with-phone` zijn niet meer nodig. */
  .tkm-hero--with-phone .tkm-hero__title,
  .tkm-hero--with-phone .tkm-hero__subtitle,
  .tkm-hero--with-phone .tkm-hero__badge,
  .tkm-hero--with-phone .tkm-hero__search-wrap {
    margin-left: 0;
    margin-right: 0;
  }
}

.tkm-hero__phone-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════════════
 * v0.23.85 — Phone-demo (refined): geen rotation, mooiere details
 * ════════════════════════════════════════════════════════════════════════════ */
.tkm-hero__phone {
  position: relative;
  width: 300px;
  perspective: 1200px;
}

/* Frame */
.tkm-hero__phone-frame {
  position: relative;
  width: 300px;
  height: 600px;
  background:
    linear-gradient(160deg, #2a2a30 0%, #0a0a0d 100%);
  border-radius: 44px;
  padding: 11px;
  box-shadow:
    0 40px 80px -20px rgba(232, 93, 26, 0.4),
    0 24px 48px -12px rgba(14, 20, 16, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 0 0 3px rgba(0, 0, 0, 0.5);
  transform: translateY(0);
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tkm-hero__phone:hover .tkm-hero__phone-frame {
  transform: translateY(-6px);
}

/* Glow erachter voor premium ambient-light effect.
 * v0.23.106: symmetrische inset (was -50/-30/-30/-30 wat bovenkant te
 * "loos" maakte) + iets gedimde intensiteit. */
.tkm-hero__phone-glow {
  position: absolute;
  inset: -30px -28px -30px -28px;
  background:
    radial-gradient(300px 320px at 50% 50%, rgba(232, 93, 26, 0.35), transparent 70%),
    radial-gradient(220px 240px at 30% 30%, rgba(255, 183, 135, 0.22), transparent 70%);
  z-index: -1;
  pointer-events: none;
  filter: blur(24px);
}

/* v0.23.86 — Floating UI-badges (witter, opvallender, platform-relevant)
   Tonen TKM-value-props in micro-context: bespaarde euro's + CO₂-impact */
.tkm-hero__phone-orbit {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  color: #0E1410;
  font-size: 0.78rem;
  font-weight: 600;
  z-index: 2;
  box-shadow:
    0 12px 32px rgba(14, 20, 16, 0.28),
    0 4px 12px rgba(232, 93, 26, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Icon-bubble binnen de badge — gekleurde cirkel achter het svg */
.tkm-hero__phone-orbit-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #E85D1A 0%, #f3a26d 100%);
  color: #ffffff;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(232, 93, 26, 0.4);
}
.tkm-hero__phone-orbit-icon--green {
  background: linear-gradient(135deg, #2a9d4a 0%, #5cc97e 100%);
  box-shadow: 0 2px 6px rgba(42, 157, 74, 0.4);
}

/* Text-stack: cijfer bovenaan (groot/bold), label eronder (klein/grijs) */
.tkm-hero__phone-orbit-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.tkm-hero__phone-orbit-text strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0E1410;
  letter-spacing: -0.02em;
}
.tkm-hero__phone-orbit-text span {
  font-size: 0.65rem;
  color: #6a6a6a;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-top: 1px;
}

.tkm-hero__phone-orbit--save {
  top: 70px;
  left: -76px;
  animation: tkm-orbit-float-a 4.5s ease-in-out infinite;
}
.tkm-hero__phone-orbit--like {
  bottom: 120px;
  right: -78px;
  animation: tkm-orbit-float-b 5.5s ease-in-out infinite;
}
@keyframes tkm-orbit-float-a {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-4px, -8px); }
}
@keyframes tkm-orbit-float-b {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(4px, 8px); }
}

/* Mobile breakpoint — phone iets kleiner, orbits OVER de phone-edge zodat
 * 't één geheel voelt i.p.v. los element op een lege achtergrond.
 * v0.23.106: orbits zichtbaar gemaakt + smaller + over-the-edge positie
 * + iets ingekrompen tekst zodat ze niet te dominant zijn op smal scherm. */
@media (max-width: 720px) {
  .tkm-hero__phone {
    width: 260px;
  }
  .tkm-hero__phone-frame {
    width: 260px;
    height: 520px;
    border-radius: 38px;
    padding: 9px;
  }
  .tkm-hero__phone-orbit {
    /* Compactere badge: minder padding, kleinere icon, tighter font */
    padding: 6px 12px 6px 6px;
    gap: 7px;
    font-size: 0.74rem;
    /* Border subtieler op witte bg + zachtere shadow voor mobile */
    box-shadow:
      0 8px 22px rgba(14, 20, 16, 0.32),
      0 2px 8px rgba(232, 93, 26, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  .tkm-hero__phone-orbit-icon {
    width: 26px;
    height: 26px;
  }
  .tkm-hero__phone-orbit-text strong {
    font-size: 0.82rem;
  }
  .tkm-hero__phone-orbit-text span {
    font-size: 0.62rem;
  }
  /* Save-badge: links boven, OVER de phone-rand zodat 't lijkt of de
   * badge uit de chat-feed pop't. */
  .tkm-hero__phone-orbit--save {
    top: 60px;
    left: -22px;
    right: auto;
  }
  /* Like-badge: rechts onder, OVER de phone-rand voor symmetrie */
  .tkm-hero__phone-orbit--like {
    bottom: 90px;
    right: -22px;
    left: auto;
  }
}

/* Notch — refined dynamic-island stijl */
.tkm-hero__phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 26px;
  background: #050507;
  border-radius: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.tkm-hero__phone-notch-cam {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2a2a32 0%, #0a0a0d 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Screen */
.tkm-hero__phone-screen {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #f6f4f0 0%, #ffffff 100%);
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Chat header */
.tkm-hero__phone-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 48px 14px 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.tkm-hero__phone-back {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #0E1410;
  cursor: default;
  flex-shrink: 0;
  padding: 0;
}
.tkm-hero__phone-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E85D1A 0%, #f3a26d 60%, #ffd9c2 100%);
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(232, 93, 26, 0.35);
}
.tkm-hero__phone-avatar-letter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}
.tkm-hero__phone-avatar-status {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  background: #34c759;
  border: 2px solid #ffffff;
  border-radius: 50%;
}
.tkm-hero__phone-who {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.tkm-hero__phone-who strong {
  color: #0E1410;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.tkm-hero__phone-online {
  font-size: 0.68rem;
  color: #34c759;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.tkm-hero__phone-icon-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #6a6a6a;
  cursor: default;
  flex-shrink: 0;
  padding: 0;
}

/* Listing-card binnen chat (context van wat besproken wordt) */
.tkm-hero__phone-listing {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 12px 0;
  padding: 10px 12px;
  background: linear-gradient(135deg, #fff8f3 0%, #ffffff 100%);
  border: 1px solid rgba(232, 93, 26, 0.15);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(232, 93, 26, 0.06);
}
.tkm-hero__phone-listing-thumb {
  width: 42px;
  height: 42px;
  background: #f3eee6;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.tkm-hero__phone-listing-thumb svg {
  width: 100%;
  height: 100%;
  display: block;
}
.tkm-hero__phone-listing-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.tkm-hero__phone-listing-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #0E1410;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.tkm-hero__phone-listing-meta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  color: #8a8a8a;
  line-height: 1.2;
}
.tkm-hero__phone-listing-meta svg {
  color: #E85D1A;
  flex-shrink: 0;
}
.tkm-hero__phone-listing-price {
  font-size: 0.88rem;
  color: #E85D1A;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}

/* Chat messages — fade-in op timeline */
.tkm-hero__phone-chat {
  flex: 1;
  padding: 12px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.tkm-hero__phone-msg {
  position: relative;
  max-width: 82%;
  padding: 8px 12px 14px;
  font-size: 0.78rem;
  line-height: 1.35;
  border-radius: 16px;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  animation-fill-mode: forwards;
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  letter-spacing: -0.005em;
}
.tkm-hero__phone-msg--mine {
  align-self: flex-end;
  background: linear-gradient(135deg, #E85D1A 0%, #d54f0e 100%);
  color: #ffffff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 6px rgba(232, 93, 26, 0.25);
}
.tkm-hero__phone-msg--theirs {
  align-self: flex-start;
  background: #ffffff;
  color: #0E1410;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.04);
}
.tkm-hero__phone-msg-text {
  display: block;
}
.tkm-hero__phone-time {
  position: absolute;
  bottom: 3px;
  right: 9px;
  font-size: 0.58rem;
  opacity: 0.75;
  font-weight: 500;
  letter-spacing: 0;
}
.tkm-hero__phone-msg--theirs .tkm-hero__phone-time {
  color: #a0a0a0;
}

/* Reply-input bar onderaan voor authentic chat-feel */
.tkm-hero__phone-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px 14px;
  padding: 8px 6px 8px 14px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
}
.tkm-hero__phone-input-field {
  flex: 1;
  font-size: 0.74rem;
  color: #a0a0a0;
}
.tkm-hero__phone-input-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #E85D1A 0%, #d54f0e 100%);
  color: #ffffff;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(232, 93, 26, 0.4);
}

/* Typing indicator (3 bouncing dots) — v0.23.94: right-aligned (mine-side)
   suggereert dat de gebruiker (koper) z'n volgende bericht aan het typen is */
.tkm-hero__phone-typing {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #ffd9c2 0%, #ffb787 100%);
  border-radius: 14px;
  border-bottom-right-radius: 4px;
  opacity: 0;
  animation-fill-mode: forwards;
  animation-duration: 200ms;
  box-shadow: 0 2px 6px rgba(232, 93, 26, 0.18);
}
.tkm-hero__phone-typing span {
  background: #d54f0e;
}
.tkm-hero__phone-typing span {
  width: 6px;
  height: 6px;
  background: #8a8a8a;
  border-radius: 50%;
  animation: tkm-phone-typing 1.2s ease-in-out infinite;
}
.tkm-hero__phone-typing span:nth-child(2) { animation-delay: 0.15s; }
.tkm-hero__phone-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes tkm-phone-typing {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(-4px); opacity: 1; }
}

/* Deal-banner (success message onderaan) */
.tkm-hero__phone-deal {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 12px;
  background: rgba(52, 199, 89, 0.12);
  color: #2a9d4a;
  border: 1px solid rgba(52, 199, 89, 0.25);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0;
  animation-fill-mode: forwards;
  animation-duration: 360ms;
}

/* v0.23.92: Animation timeline — vraag → antwoord → typing (NIET resolved).
 * t=0.6s: msg-1 (Hi, beschikbaar?)
 * t=2.5s: msg-2 (Ja zeker, kan nog opgehaald)
 * t=4.0s: typing-dots (suggereert "verkoper typt nog meer")
 * Daarna: statisch eindbeeld, typing-dots blijven bouncen.
 */
.tkm-hero__phone-msg[data-anim="msg-1"]     { animation-name: tkm-phone-fadein; animation-delay: 0.6s; }
.tkm-hero__phone-msg[data-anim="msg-2"]     { animation-name: tkm-phone-fadein; animation-delay: 2.5s; }
.tkm-hero__phone-typing[data-anim="typing"] { animation-name: tkm-phone-fadein; animation-delay: 4.0s; }

@keyframes tkm-phone-fadein {
  to { opacity: 1; transform: translateY(0); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .tkm-hero__phone-frame,
  .tkm-hero__phone-msg,
  .tkm-hero__phone-typing,
  .tkm-hero__phone-deal,
  .tkm-hero__phone-dot,
  .tkm-hero__phone-typing span {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Mobile: phone iets kleiner */
@media (max-width: 720px) {
  .tkm-hero__phone {
    width: 240px;
    margin: 24px auto 0;
  }
  .tkm-hero__phone-frame {
    width: 240px;
    height: 460px;
    border-radius: 32px;
    padding: 10px;
  }
  .tkm-hero__phone-screen {
    border-radius: 24px;
  }
  .tkm-hero__phone-msg {
    font-size: 0.74rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * v0.23.79 — Welkom-hero + categorie-carousel op /bouwmaterialen-kopen/
 * ════════════════════════════════════════════════════════════════════════════
 * Toont alleen wanneer user geen materiaal heeft gekozen.
 *   1. Hero met gradient + duidelijke "kies materiaalsoort" CTA
 *   2. 16 categorie-kaartjes als horizontaal scrollbare carousel
 *      met pijltjes-knoppen + scroll-snap
 *   3. CTA naar volledige drawer voor de complete 3-level tree
 * Listings blijven zichtbaar onder dit blok.
 */

/* v0.23.122: FULL-WIDTH breakout. De welkom-hero zat geboxed binnen
   `.tkm-filterbar-wrap.tkm-container` (max 1240px). Met de left:50% +
   -50vw-techniek trekt 'ie edge-to-edge over de hele viewport, ongeacht
   hoeveel padding de ancestors hebben — de content erbinnen blijft wel
   netjes uitgelijnd via `.tkm-welcome__hero-content`. */
.tkm-welcome {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  /* v0.23.124: negatieve margin-top trekt de hero strak tegen de topbar.
     Gemeten gap was 46px (16px filterbar-wrap padding + 8px oude margin +
     22px ancestor-ruimte). De wrap-padding wordt apart genuld via de
     body.tkm-no-category-regel hieronder; deze -22px sluit de rest. */
  margin-top: -22px;
  margin-bottom: 28px;
}
/* Filterbar-wrap padding-top weg in no-category-state zodat de hero
   echt flush tegen de topbar zit (de padding is alleen nuttig wanneer
   de top-bar/chips zichtbaar zijn, dus mét categorie). */
body.tkm-no-category .tkm-filterbar-wrap {
  padding-top: 0;
}

/* ═══ HERO (v0.23.128 — WIT + BRANDED, 2-col, quick-picks)
   Was: forest-green hero met alleen tekst links → "saai en kaal".
   Nu: schoon wit met warm-oranje glow + 2-col layout (text links,
   quick-pick cluster rechts). TKM-brand: oranje primary + cream accent.
   ════════════════════════════════════════════════════════════════════ */
.tkm-welcome__hero {
  position: relative;
  padding: clamp(40px, 6vw, 72px) 0 clamp(40px, 5vw, 64px);
  overflow: hidden;
  isolation: isolate;
  color: #1c2b22;
  box-shadow: inset 0 -1px 0 rgba(14, 20, 16, 0.06);
}

/* Floating orbs — subtiele warme accent-glows (was felle lime/emerald
   die domineerden). Op witte achtergrond hoeft niet veel. */
.tkm-welcome__hero-orb {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.5;
}
.tkm-welcome__hero-orb--a {
  top: -120px;
  right: 4%;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(232, 93, 26, 0.18), transparent 70%);
  animation: tkm-welcome-orb-drift-a 18s ease-in-out infinite alternate;
}
.tkm-welcome__hero-orb--b {
  bottom: -130px;
  left: 2%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(47, 125, 59, 0.10), transparent 70%);
  animation: tkm-welcome-orb-drift-b 22s ease-in-out infinite alternate;
}
@keyframes tkm-welcome-orb-drift-a {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-40px, 26px) scale(1.1); }
}
@keyframes tkm-welcome-orb-drift-b {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(48px, -34px) scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .tkm-welcome__hero-orb--a,
  .tkm-welcome__hero-orb--b { animation: none; }
}

/* v0.23.129: warmere cream-gradient (was te wit/kaal). Diagonale flow
   van crème-wit linksboven naar warmere cream rechtsonder, met een
   subtiele oranje brand-glow rechtsboven. Niet meer "kaal". */
.tkm-welcome__hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(880px 480px at 90% 4%, rgba(232, 93, 26, 0.10), transparent 60%),
    radial-gradient(640px 440px at 5% 100%, rgba(217, 210, 195, 0.28), transparent 65%),
    linear-gradient(135deg, #FFFFFF 0%, #FBF6EE 55%, #F6EFE0 100%);
}
/* Subtiele dot-grid texture (donker op wit, low-opacity) */
.tkm-welcome__hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(14, 20, 16, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 85%);
}

/* v0.23.132: 16 hand-getekende bouwmateriaal-illustraties scattered
   rond de hero-bg. Decoratief, organisch gespreid met lichte rotatie
   per stuk. Opacity is verhoogd naar 0.15-0.20 voor betere zichtbaar-
   heid (was te subtiel op 0.07-0.10). Alle 16 ook op mobiel maar
   kleiner. */
.tkm-welcome__illos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.tkm-welcome__illo {
  position: absolute;
  color: #E85D1A;
  opacity: 0.18;
}
/* Per stuk eigen positie + rotatie. Verdeeld over de hele hero. */
.tkm-welcome__illo--hammer {
  top: 4%;
  left: -1%;
  width: 80px;
  height: 80px;
  transform: rotate(-18deg);
}
.tkm-welcome__illo--planks {
  top: 2%;
  right: 41%;
  width: 86px;
  height: 86px;
  transform: rotate(7deg);
  color: #2F7D3B;
  opacity: 0.15;
}
.tkm-welcome__illo--brick {
  top: 36%;
  left: -1%;
  width: 66px;
  height: 66px;
  transform: rotate(-6deg);
}
.tkm-welcome__illo--pipe {
  bottom: -3%;
  left: 18%;
  width: 84px;
  height: 84px;
  transform: rotate(12deg);
  color: #2F7D3B;
  opacity: 0.15;
}
.tkm-welcome__illo--bolt {
  bottom: 8%;
  right: 1%;
  width: 62px;
  height: 62px;
  transform: rotate(22deg);
}
.tkm-welcome__illo--ruler {
  top: 48%;
  right: -2%;
  width: 96px;
  height: 96px;
  transform: rotate(-12deg);
  opacity: 0.14;
}
.tkm-welcome__illo--helmet {
  top: 8%;
  right: 1%;
  width: 74px;
  height: 74px;
  transform: rotate(-8deg);
  color: #2F7D3B;
  opacity: 0.16;
}
.tkm-welcome__illo--saw {
  top: 1%;
  left: 30%;
  width: 88px;
  height: 88px;
  transform: rotate(-4deg);
  opacity: 0.15;
}
.tkm-welcome__illo--screwdriver {
  bottom: 1%;
  left: 38%;
  width: 90px;
  height: 90px;
  transform: rotate(15deg);
  opacity: 0.15;
}
.tkm-welcome__illo--wrench {
  top: 16%;
  right: 27%;
  width: 70px;
  height: 70px;
  transform: rotate(-22deg);
  color: #2F7D3B;
  opacity: 0.13;
}
.tkm-welcome__illo--tape {
  bottom: 14%;
  left: 1%;
  width: 76px;
  height: 76px;
  transform: rotate(-10deg);
  opacity: 0.14;
}
.tkm-welcome__illo--brush {
  top: 58%;
  left: 36%;
  width: 82px;
  height: 82px;
  transform: rotate(18deg);
  color: #2F7D3B;
  opacity: 0.13;
}
/* v0.23.132: 4 nieuwe iconen */
.tkm-welcome__illo--drill {
  bottom: 18%;
  right: 30%;
  width: 88px;
  height: 88px;
  transform: rotate(-14deg);
  opacity: 0.14;
}
.tkm-welcome__illo--nail {
  top: 28%;
  left: 24%;
  width: 70px;
  height: 70px;
  transform: rotate(8deg);
  color: #2F7D3B;
  opacity: 0.13;
}
.tkm-welcome__illo--trowel {
  top: 72%;
  right: 12%;
  width: 84px;
  height: 84px;
  transform: rotate(-20deg);
  opacity: 0.14;
}
.tkm-welcome__illo--nut {
  top: 38%;
  right: 44%;
  width: 60px;
  height: 60px;
  transform: rotate(10deg);
  opacity: 0.15;
}

/* Mobiel: alle 16 illustraties zichtbaar, kleiner zodat ze passen
   zonder de tekst te overlappen. Opacity iets lager dan desktop. */
@media (max-width: 720px) {
  .tkm-welcome__illo {
    opacity: 0.12;
  }
  .tkm-welcome__illo--planks,
  .tkm-welcome__illo--pipe,
  .tkm-welcome__illo--helmet,
  .tkm-welcome__illo--brush,
  .tkm-welcome__illo--nail { opacity: 0.10; color: #2F7D3B; }

  .tkm-welcome__illo--hammer       { width: 46px; height: 46px; top: 2%;   left: -2%; }
  .tkm-welcome__illo--planks       { width: 44px; height: 44px; top: 1%;   right: 38%; }
  .tkm-welcome__illo--brick        { width: 40px; height: 40px; top: 28%;  left: -2%; }
  .tkm-welcome__illo--pipe         { width: 48px; height: 48px; bottom: -3%; left: 24%; }
  .tkm-welcome__illo--bolt         { width: 40px; height: 40px; bottom: 7%; right: 0%; }
  .tkm-welcome__illo--ruler        { width: 50px; height: 50px; top: 52%;  right: -4%; }
  .tkm-welcome__illo--helmet       { width: 44px; height: 44px; top: 3%;   right: 1%; }
  .tkm-welcome__illo--saw          { width: 48px; height: 48px; top: 0%;   left: 38%; }
  .tkm-welcome__illo--screwdriver  { width: 50px; height: 50px; bottom: 0%; left: 44%; }
  .tkm-welcome__illo--wrench       { width: 40px; height: 40px; top: 22%;  right: 32%; }
  .tkm-welcome__illo--tape         { width: 44px; height: 44px; bottom: 14%; left: 0%; }
  .tkm-welcome__illo--brush        { width: 46px; height: 46px; top: 62%;  left: 38%; }
  .tkm-welcome__illo--drill        { width: 48px; height: 48px; bottom: 22%; right: 34%; }
  .tkm-welcome__illo--nail         { width: 42px; height: 42px; top: 38%;  left: 28%; }
  .tkm-welcome__illo--trowel       { width: 46px; height: 46px; top: 74%;  right: 16%; }
  .tkm-welcome__illo--nut          { width: 38px; height: 38px; top: 42%;  right: 46%; }
}

/* Content uitgelijnd met de rest van de pagina (1240px container). */
.tkm-welcome__hero-content {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

/* v0.23.128: 2-col grid — tekst links, quick-picks rechts */
.tkm-welcome__hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 980px) {
  .tkm-welcome__hero-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
  }
}
.tkm-welcome__hero-text {
  min-width: 0;
}

.tkm-welcome__title {
  margin: 0 0 14px;
  /* v0.23.131: kleinere clamp + iets strakker letter-spacing zodat
     "Bij De Juiste Categorie" netjes op één regel past i.p.v. weer
     "Categorie" naar een 3e regel te duwen. */
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: #16241c;
  /* Hard ingestelde regel-split via <br> — niet meer rekenen op
     natural-wrap die "Bij" alleen achterliet. */
  text-wrap: balance;
}
/* Warm oranje gradient accent — TKM brand primary, pop't tegen wit. */
.tkm-welcome__title-accent {
  background: linear-gradient(120deg, #E85D1A 0%, #F47A35 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.tkm-welcome__lead {
  margin: 0 0 22px;
  font-size: 1rem;
  line-height: 1.55;
  color: #56625b;
  max-width: 580px;
}
.tkm-welcome__lead strong {
  color: #16241c;
  font-weight: 600;
}

/* v0.23.128: eyebrow-pill op witte achtergrond — oranje-soft cream
   met oranje brand-accent (was glass-white op forest-green). */
.tkm-welcome__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  margin-bottom: 16px;
  background: #FFF1E7;
  border: 1px solid rgba(232, 93, 26, 0.18);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #E85D1A;
}
.tkm-welcome__eyebrow-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E85D1A;
  box-shadow: 0 0 0 0 rgba(232, 93, 26, 0.5);
  animation: tkm-welcome-pulse-dot 2s ease-out infinite;
}
@keyframes tkm-welcome-pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(232, 93, 26, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(232, 93, 26, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 93, 26, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tkm-welcome__eyebrow-dot { animation: none; }
}

/* v0.23.101: action-row, CTA + steps in flex-layout */
.tkm-welcome__action {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ═══ Prominente CTA — onmogelijk te missen ════════════════════════════ */
.tkm-welcome__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px 14px 16px;
  background: linear-gradient(135deg, #ff8a3d 0%, #E85D1A 100%);
  color: #ffffff;
  border: none;
  border-radius: 16px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    0 12px 28px -8px rgba(232, 93, 26, 0.55),
    0 4px 10px -4px rgba(232, 93, 26, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 200ms ease, box-shadow 200ms ease;
  overflow: hidden;
  isolation: isolate;
}
.tkm-welcome__cta:hover,
.tkm-welcome__cta:focus-visible {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 18px 36px -10px rgba(232, 93, 26, 0.65),
    0 6px 14px -4px rgba(232, 93, 26, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  outline: none;
}
.tkm-welcome__cta:active {
  transform: translateY(0) scale(1);
}

.tkm-welcome__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  flex-shrink: 0;
  z-index: 1;
}

.tkm-welcome__cta-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  z-index: 1;
  /* v0.23.124: text-block groeit mee zodat de arrow netjes flush-rechts
     komt i.p.v. los te zweven naast de tekst. */
  flex: 1;
  min-width: 0;
}
.tkm-welcome__cta-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.tkm-welcome__cta-sub {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
}

.tkm-welcome__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  transition: transform 200ms ease;
  z-index: 1;
}
.tkm-welcome__cta:hover .tkm-welcome__cta-arrow,
.tkm-welcome__cta:focus-visible .tkm-welcome__cta-arrow {
  transform: translateX(3px);
}

/* Pulse-glow rondom de hele knop, trekt periodiek de aandacht */
.tkm-welcome__cta-pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  box-shadow: 0 0 0 0 rgba(255, 138, 61, 0.55);
  animation: tkm-welcome-cta-pulse 2.4s ease-out infinite;
}
@keyframes tkm-welcome-cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 138, 61, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 138, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 138, 61, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tkm-welcome__cta-pulse { animation: none; }
}

/* v0.23.124: 3-stappen-uitleg — schoon & minimaal. Was een zware glass-
   pill (desktop) + bordered timeline-box (mobiel) die de gebruiker niet
   mooi vond. Nu: gewoon 3 nette genummerde items, geen kader, geen lijnen,
   geen achtergrond. Step 1 krijgt een witte cirkel als "next action"-hint. */
.tkm-welcome__steps {
  display: flex;
  align-items: center;
  gap: 6px 16px;
  flex-wrap: wrap;
  padding: 0;
  background: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.tkm-welcome__step {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #56625b;
}
.tkm-welcome__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: #FFFFFF;
  border: 1px solid rgba(14, 20, 16, 0.12);
  color: #56625b;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
/* Step 1 = volgende actie → orange-fill, brand-primary hint */
.tkm-welcome__step:first-of-type .tkm-welcome__step-num {
  background: #E85D1A;
  border-color: #E85D1A;
  color: #ffffff;
}
.tkm-welcome__step-arrow {
  display: inline-flex;
  color: rgba(14, 20, 16, 0.22);
}
.tkm-welcome__step-arrow svg { display: block; }

/* ═══ v0.23.128: QUICK-PICK CLUSTER — rechter kolom in shop hero
   ─────────────────────────────────────────────────────────────
   4 populaire categorie-kaarten in een 2×2 grid. Direct klikbaar
   (link naar `?filter_ad_type=slug`). Eronder een "alle 16 →"-link
   die de drawer opent. Geeft de hero een tweede zwaartepunt en
   biedt directe shortcuts naast de hoofd-CTA. */
.tkm-welcome__quick {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: stretch;
  justify-content: center;
}
.tkm-welcome__quick-label {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #E85D1A;
}
.tkm-welcome__quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.tkm-welcome__quick-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 16px 14px;
  background: #FFFFFF;
  border: 1px solid rgba(14, 20, 16, 0.08);
  border-radius: 14px;
  color: #16241c;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(14, 20, 16, 0.04);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.tkm-welcome__quick-card:hover,
.tkm-welcome__quick-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px -6px rgba(14, 20, 16, 0.12);
  border-color: rgba(232, 93, 26, 0.28);
  outline: none;
}
.tkm-welcome__quick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #FFF1E7;
  color: #E85D1A;
  border-radius: 10px;
  flex-shrink: 0;
}
.tkm-welcome__quick-name {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.005em;
}
.tkm-welcome__quick-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 6px 0 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: #E85D1A;
  transition: gap 180ms ease;
}
.tkm-welcome__quick-more:hover,
.tkm-welcome__quick-more:focus-visible {
  gap: 10px;
  outline: none;
}

/* Mobile: quick-cluster blijft 2x2 maar onder de tekst, met iets
   minder padding zodat 't compacter staat. */
@media (max-width: 720px) {
  .tkm-welcome__quick-card {
    padding: 14px 14px 12px;
    border-radius: 12px;
  }
  .tkm-welcome__quick-icon {
    width: 36px;
    height: 36px;
  }
  .tkm-welcome__quick-name {
    font-size: 0.82rem;
  }
}

/* ═══ CATEGORIE-CAROUSEL ════════════════════════════════════════════════ */
.tkm-welcome__cats {
  margin-top: 24px;
  padding: 24px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #ececec;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.03);
}

.tkm-welcome__cats-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.tkm-welcome__cats-head-text {
  flex: 1;
  min-width: 240px;
}
.tkm-welcome__cats-eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #E85D1A;
  margin-bottom: 4px;
}
.tkm-welcome__cats-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0E1410;
}

/* Pijltjes-knoppen */
.tkm-welcome__cats-controls {
  display: flex;
  gap: 8px;
}
.tkm-welcome__cats-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #ffffff;
  border: 1px solid #e1e1e1;
  border-radius: 50%;
  color: #0E1410;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease, opacity 140ms ease;
  font-family: inherit;
}
.tkm-welcome__cats-arrow:hover:not([disabled]),
.tkm-welcome__cats-arrow:focus-visible {
  background: #E85D1A;
  border-color: #E85D1A;
  color: #ffffff;
  transform: translateY(-1px);
}
.tkm-welcome__cats-arrow[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Track wrap met fade-edges links/rechts */
.tkm-welcome__cats-track-wrap {
  position: relative;
  margin: 0 -4px; /* compenseer scroll-padding */
}
.tkm-welcome__cats-track-wrap::before,
.tkm-welcome__cats-track-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  z-index: 1;
}
.tkm-welcome__cats-track-wrap::before {
  left: 0;
  background: linear-gradient(to right, #ffffff, transparent);
}
.tkm-welcome__cats-track-wrap::after {
  right: 0;
  background: linear-gradient(to left, #ffffff, transparent);
}

.tkm-welcome__cats-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
  padding: 4px 4px 12px;
}
.tkm-welcome__cats-track::-webkit-scrollbar {
  display: none; /* Webkit */
}

.tkm-welcome__cat {
  flex: 0 0 220px;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border: 1px solid #ececec;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
  position: relative;
}
.tkm-welcome__cat:hover,
.tkm-welcome__cat:focus-visible {
  background: linear-gradient(180deg, #ffffff 0%, #fff8f3 100%);
  border-color: #f3a26d;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(232, 93, 26, 0.14);
}
.tkm-welcome__cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(232, 93, 26, 0.1);
  border-radius: 12px;
  color: #E85D1A;
  flex-shrink: 0;
  transition: background 140ms ease, color 140ms ease;
}
.tkm-welcome__cat:hover .tkm-welcome__cat-icon,
.tkm-welcome__cat:focus-visible .tkm-welcome__cat-icon {
  background: #E85D1A;
  color: #ffffff;
}
.tkm-welcome__cat-icon svg {
  display: block;
}
.tkm-welcome__cat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tkm-welcome__cat-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0E1410;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.tkm-welcome__cat-eyebrow {
  font-size: 0.75rem;
  color: #8a8a8a;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tkm-welcome__cat-arrow {
  color: #c4c4c4;
  flex-shrink: 0;
  transition: color 140ms ease, transform 140ms ease;
}
.tkm-welcome__cat:hover .tkm-welcome__cat-arrow,
.tkm-welcome__cat:focus-visible .tkm-welcome__cat-arrow {
  color: #E85D1A;
  transform: translateX(2px);
}

/* Footer-CTA (drawer-link) */
.tkm-welcome__cats-foot {
  margin-top: 14px;
  text-align: center;
}
.tkm-welcome__cats-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: transparent;
  color: #E85D1A;
  border: 1px solid #f3a26d;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.tkm-welcome__cats-more:hover,
.tkm-welcome__cats-more:focus-visible {
  background: #E85D1A;
  color: #ffffff;
  border-color: #E85D1A;
}

/* ═══ MOBILE RESPONSIVE ═════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .tkm-welcome__hero {
    /* v0.23.122: edge-to-edge full-width, geen border-radius op mobiel.
       padding loopt nu via hero-content. */
    padding: 30px 0 26px;
    border-radius: 0;
  }
  .tkm-welcome__hero-content {
    padding: 0 20px;
  }
  .tkm-welcome__eyebrow {
    font-size: 0.72rem;
    padding: 5px 12px 5px 10px;
    margin-bottom: 14px;
  }
  .tkm-welcome__title {
    font-size: 1.75rem;
    line-height: 1.1;
  }
  .tkm-welcome__lead {
    font-size: 0.92rem;
    margin-bottom: 18px;
  }
  .tkm-welcome__action {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .tkm-welcome__cta {
    width: 100%;
    padding: 12px 14px 12px 12px;
    border-radius: 14px;
  }
  .tkm-welcome__cta-icon {
    width: 38px;
    height: 38px;
  }
  .tkm-welcome__cta-title {
    font-size: 0.95rem;
  }
  .tkm-welcome__cta-sub {
    font-size: 0.72rem;
  }
  /* v0.23.124: steps op mobiel — schone verticale stack. Geen bordered
   * timeline-box, geen connector-lijnen, geen shimmer-animaties meer
   * (vond de gebruiker niet mooi). Gewoon 3 nette genummerde regels. */
  .tkm-welcome__steps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: flex-start;
    gap: 11px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    width: auto;
  }
  .tkm-welcome__step {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 0.92rem;
  }
  .tkm-welcome__step-num {
    width: 28px;
    height: 28px;
    font-size: 0.82rem;
  }
  .tkm-welcome__step-text {
    font-size: 0.92rem;
    font-weight: 600;
    color: #16241c;
  }
  /* Pijl-spans niet nodig in verticale stack — verbergen. */
  .tkm-welcome__step-arrow {
    display: none;
  }
  .tkm-welcome__cats {
    padding: 18px 14px;
    border-radius: 16px;
  }
  .tkm-welcome__cats-head {
    flex-direction: column;
    align-items: stretch;
  }
  .tkm-welcome__cats-controls {
    align-self: flex-end;
  }
  .tkm-welcome__cats-title {
    font-size: 1.2rem;
  }
  .tkm-welcome__cat {
    flex: 0 0 200px;
    padding: 12px 12px;
  }
  .tkm-welcome__cat-icon {
    width: 42px;
    height: 42px;
  }
  .tkm-welcome__cat-eyebrow {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * v0.23.121 — HomeExplore: navigeerbare kaarten-carousel op de homepage
 *
 * Branded rounded shell + horizontale carousel van witte kaartjes met
 * prev/next pijlen. Vervangt het oude statische Voordelen-block.
 * ════════════════════════════════════════════════════════════════════════════ */

.tkm-explore {
  background: var(--tkm-color-paper, #f7f5f0);
  padding: clamp(40px, 6vw, 72px) 0;
}

/* ─── Branded shell ─────────────────────────────────────────────────── */
.tkm-explore__shell {
  position: relative;
  border-radius: 28px;
  padding: clamp(28px, 4vw, 44px) clamp(20px, 3.5vw, 40px);
  overflow: hidden;
  isolation: isolate;
}
.tkm-explore__shell-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(620px 380px at 92% 8%, rgba(47, 125, 59, 0.16), transparent 60%),
    radial-gradient(440px 320px at 4% 95%, rgba(232, 93, 26, 0.08), transparent 62%),
    linear-gradient(160deg, #eef4ec 0%, #e6f0e4 55%, #f0f5ee 100%);
}
.tkm-explore__shell-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 34px,
    rgba(47, 125, 59, 0.03) 34px, rgba(47, 125, 59, 0.03) 68px
  );
  opacity: 0.8;
}

/* ─── Header: titel-tekst + carousel-controls ───────────────────────── */
.tkm-explore__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.tkm-explore__head-text {
  flex: 1;
  min-width: 240px;
}
.tkm-explore__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #2F7D3B;
  margin-bottom: 8px;
}
.tkm-explore__eyebrow-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2F7D3B;
  box-shadow: 0 0 0 0 rgba(47, 125, 59, 0.55);
  animation: tkm-explore-dot 2.4s ease-out infinite;
}
@keyframes tkm-explore-dot {
  0%   { box-shadow: 0 0 0 0 rgba(47, 125, 59, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(47, 125, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 125, 59, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tkm-explore__eyebrow-dot { animation: none; }
}
.tkm-explore__title {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #0E1F1A;
}

/* Prev/next pijlen */
.tkm-explore__controls {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.tkm-explore__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(14, 31, 26, 0.1);
  color: #0E1F1A;
  cursor: pointer;
  font-family: inherit;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
  box-shadow: 0 2px 8px rgba(14, 31, 26, 0.06);
}
.tkm-explore__arrow:hover:not([disabled]) {
  background: #2F7D3B;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(47, 125, 59, 0.28);
}
.tkm-explore__arrow[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ─── Carousel track ────────────────────────────────────────────────── */
.tkm-explore__track-wrap {
  position: relative;
  /* Subtiele fade aan de rechterrand als hint dat er meer is */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent 100%);
}
.tkm-explore__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 4px 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tkm-explore__track::-webkit-scrollbar { display: none; }

/* ─── Kaart ─────────────────────────────────────────────────────────── */
.tkm-explore__card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 24px;
  background: #ffffff;
  border: 1px solid rgba(14, 31, 26, 0.06);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(14, 31, 26, 0.05);
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.tkm-explore__card--link {
  cursor: pointer;
}
.tkm-explore__card--link:hover,
.tkm-explore__card--link:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(14, 31, 26, 0.12);
  border-color: rgba(47, 125, 59, 0.2);
  outline: none;
}

.tkm-explore__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  flex-shrink: 0;
}
.tkm-explore__card-icon[data-color="orange"] { background: rgba(232, 93, 26, 0.12);  color: #E85D1A; }
.tkm-explore__card-icon[data-color="green"]  { background: rgba(47, 125, 59, 0.12);  color: #2F7D3B; }
.tkm-explore__card-icon[data-color="blue"]   { background: rgba(37, 99, 165, 0.12);  color: #2563A5; }
.tkm-explore__card-icon[data-color="purple"] { background: rgba(124, 58, 173, 0.12); color: #7C3AAD; }

.tkm-explore__card-title {
  margin: 2px 0 0;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #0E1F1A;
}
.tkm-explore__card-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #5a6560;
  flex: 1;
}
.tkm-explore__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #2F7D3B;
  transition: gap 180ms ease;
}
.tkm-explore__card--link:hover .tkm-explore__card-cta,
.tkm-explore__card--link:focus-visible .tkm-explore__card-cta {
  gap: 10px;
}

/* ─── Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .tkm-explore__shell {
    border-radius: 22px;
  }
  .tkm-explore__head {
    align-items: flex-start;
  }
  .tkm-explore__card {
    flex: 0 0 248px;
    padding: 18px 18px 20px;
  }
  .tkm-explore__card-icon {
    width: 46px;
    height: 46px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * v0.23.123 — WIT HERO-THEMA + SUBTIELE EXPLORE-ACHTERGROND
 *
 * De homepage-hero was donker navy → voelde zwaar/technisch. Dit override-
 * blok flipt 'm naar een schone, frisse WITTE look (PlantZone-stijl):
 * lichte achtergrond, donkere tekst, subtiele decoratie. Plus: de zware
 * groene "box" achter de explore-kaarten weg, alleen nog een subtiele
 * frisse sectie-achtergrond.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Hero: donker → wit ─────────────────────────────────────────────── */
/* v0.23.125: pure wit i.p.v. de groen-getinte gradient — past beter bij
   de warme brand (oranje + cream) i.p.v. groen-overload. */
.tkm-hero--clean {
  background: #ffffff;
  color: #1c2b22;
}

/* Blobs subtieler: op wit zijn de oude opacity's veel te fel. */
.tkm-hero--clean .tkm-hero__blob--orange { opacity: 0.10; }
.tkm-hero--clean .tkm-hero__blob--green  { opacity: 0.12; }
.tkm-hero--clean .tkm-hero__blob--peach  { opacity: 0.10; }

/* Grid-pattern: witte lijnen → onzichtbaar op wit. Donkere, hele subtiele
   lijnen i.p.v. */
.tkm-hero--clean .tkm-hero__grid-pattern {
  background-image:
    linear-gradient(rgba(20, 50, 30, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 50, 30, 0.045) 1px, transparent 1px);
}

/* Titel + subtitle → donkere tekst */
.tkm-hero--clean .tkm-hero__title {
  color: #16241c;
}
.tkm-hero--clean .tkm-hero__subtitle {
  color: #56625b;
}
/* Titel-accent: richer oranje zodat 't pop't tegen wit (de lichte
   #FF8A4F→#FFB780 was te bleek op witte achtergrond). */
.tkm-hero--clean .tkm-hero__title-accent {
  background: linear-gradient(120deg, #E85D1A 0%, #F47A35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Secundaire CTA (Advertentie plaatsen): glass → witte card ──────── */
.tkm-hero--clean .tkm-hero__cta--sell {
  background: #ffffff;
  border: 1px solid rgba(20, 50, 30, 0.12);
  color: #1c2b22;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 6px 18px -8px rgba(20, 50, 30, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.tkm-hero--clean .tkm-hero__cta--sell:hover,
.tkm-hero--clean .tkm-hero__cta--sell:focus-visible {
  background: #ffffff;
  border-color: rgba(47, 125, 59, 0.4);
  box-shadow:
    0 12px 26px -10px rgba(20, 50, 30, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.tkm-hero--clean .tkm-hero__cta--sell .tkm-hero__cta-icon {
  background: rgba(47, 125, 59, 0.12);
  border: 1px solid rgba(47, 125, 59, 0.2);
  color: #2F7D3B;
}
.tkm-hero--clean .tkm-hero__cta--sell .tkm-hero__cta-sub {
  color: #6a766f;
}

/* ── USP-strip: donkere glass-cards → witte cards ──────────────────── */
.tkm-hero--clean .tkm-hero__usp {
  background: #ffffff;
  border: 1px solid rgba(20, 50, 30, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 4px 14px -6px rgba(20, 50, 30, 0.1);
}
.tkm-hero--clean .tkm-hero__usp-icon {
  background: rgba(232, 93, 26, 0.12);
  color: #E85D1A;
}
.tkm-hero--clean .tkm-hero__usp-body strong {
  color: #16241c;
}
.tkm-hero--clean .tkm-hero__usp-body span {
  color: #6a766f;
}

/* ── Live-stat onder USPs → donkere tekst ──────────────────────────── */
.tkm-hero--clean .tkm-hero__live {
  color: #6a766f;
}
.tkm-hero--clean .tkm-hero__live strong {
  color: #16241c;
}

/* ── Phone-glow iets dimmen op witte achtergrond ───────────────────── */
.tkm-hero--clean .tkm-hero__phone-glow {
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════════════════
 * Explore-sectie: zware groene box WEG, warme cream sectie-bg (brand)
 * ════════════════════════════════════════════════════════════════════════════ */
.tkm-explore {
  background: #F6F3EE;
}
/* De "shell" was een grote groene gradient-box — die weg. Cards zitten nu
   gewoon op de subtiele sectie-achtergrond, geen kader eromheen. */
.tkm-explore__shell {
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.tkm-explore__shell-bg {
  display: none;
}
@media (max-width: 720px) {
  .tkm-explore__shell {
    border-radius: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * v0.23.125 — BRANDED HOMEPAGE: minder groen, meer oranje + warm ritme
 *
 * De gebruiker vond groen "overal extreem". TKM-brand = oranje (#E85D1A)
 * primary + groen (#2F7D3B) ALLEEN als accent. Dit blok:
 *   1. Explore-accenten groen → oranje
 *   2. Homepage achtergrond-ritme: wit ↔ cream alterneren
 *   3. Consistente sectie-witruimte (boven + onder)
 *   4. HomeUsps-block (verplaatst uit hero) styling
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Explore: groene accenten → brand-oranje ────────────────────── */
.tkm-explore__eyebrow {
  color: #E85D1A;
}
.tkm-explore__eyebrow-dot {
  background: #E85D1A;
  animation: tkm-explore-dot-orange 2.4s ease-out infinite;
}
@keyframes tkm-explore-dot-orange {
  0%   { box-shadow: 0 0 0 0 rgba(232, 93, 26, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(232, 93, 26, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 93, 26, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tkm-explore__eyebrow-dot { animation: none; }
}
.tkm-explore__arrow:hover:not([disabled]) {
  background: #E85D1A;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(232, 93, 26, 0.3);
}
.tkm-explore__card--link:hover,
.tkm-explore__card--link:focus-visible {
  border-color: rgba(232, 93, 26, 0.25);
}
.tkm-explore__card-cta {
  color: #E85D1A;
}
/* Card-icon kleuren: groen-accent behouden alléén waar 't echt over
   duurzaamheid gaat (circulair bouwen) — de rest wordt oranje/warm. */
.tkm-explore__card-icon[data-color="green"] {
  background: rgba(47, 125, 59, 0.12);
  color: #2F7D3B;
}

/* ── 2 + 3. Achtergrond-ritme + consistente witruimte ──────────────── */
/* Wit ↔ cream alterneren; donker (HowItWorks) + oranje (CtaBand) als
   accent-breaks. Gescoped op .tkm-home zodat andere pagina's die deze
   blocks hergebruiken ongemoeid blijven. */
.tkm-home .tkm-hero--clean    { background: #FFFFFF; }
.tkm-home .tkm-explore        { background: #F6F3EE; }
.tkm-home .tkm-featured       { background: #FFFFFF; }
.tkm-home .tkm-allcats        { background: #F6F3EE; }
/* HowItWorks blijft donker (.tkm-how) — bewuste contrast-break */
/* CtaBand-sectie transparant; oranje inner-box breekt het ritme */
.tkm-home .tkm-faq            { background: #FFFFFF; }
.tkm-home .tkm-latest-posts   { background: #F6F3EE; }
/* v0.23.147: omgedraaid — sectie zand, cards wit voor sterker contrast */
.tkm-homeusps                 { background: #F0E6D2; }

/* Consistente verticale witruimte voor alle homepage content-secties.
   Hero/HowItWorks/CtaBand houden hun eigen (grotere) padding — dat zijn
   bewuste accent-secties. */
.tkm-home .tkm-explore,
.tkm-home .tkm-featured,
.tkm-home .tkm-allcats,
.tkm-home .tkm-faq,
.tkm-home .tkm-latest-posts,
.tkm-homeusps {
  padding-top: clamp(52px, 6.5vw, 92px);
  padding-bottom: clamp(52px, 6.5vw, 92px);
}

/* ── 4. HomeUsps-block (3 USP's + live-stat, onderaan de homepage) ─── */
.tkm-homeusps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.tkm-homeusps__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  /* v0.23.147: cards wit op zand-sectie, met soft shadow voor diepte */
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  box-shadow: 0 4px 16px -8px rgba(60, 45, 20, 0.08);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.tkm-homeusps__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(60, 45, 20, 0.14);
}
.tkm-homeusps__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #FFF1E7;
  color: #E85D1A;
  border-radius: 12px;
  flex-shrink: 0;
}
.tkm-homeusps__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.tkm-homeusps__body strong {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0E1410;
}
.tkm-homeusps__body span {
  font-size: 0.86rem;
  line-height: 1.45;
  color: #565A54;
}
.tkm-homeusps__live {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto;
  font-size: 0.88rem;
  color: #565A54;
  text-align: center;
  flex-wrap: wrap;
}
.tkm-homeusps__live strong {
  color: #0E1410;
  font-weight: 700;
}
/* Live-dot blijft groen — universeel "live/online"-signaal, geen
   brand-statement. Klein genoeg om niet "groen-overload" te zijn. */
.tkm-homeusps__live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2F7D3B;
  box-shadow: 0 0 0 0 rgba(47, 125, 59, 0.5);
  animation: tkm-homeusps-pulse 2s ease-out infinite;
}
@keyframes tkm-homeusps-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 125, 59, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(47, 125, 59, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tkm-homeusps__live-dot { animation: none; }
}
@media (max-width: 860px) {
  .tkm-homeusps__grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
}