/* =============================================================================
   Wood, dienstpagina

   Bouwt op wood-collectie.css: de hero, de verhaalblokken, de reviews en het
   terecht-blok zijn dezelfde secties. Hier staan alleen de verschillen:

   - de blokken staan los van elkaar, elk met een eigen achtergrond (wit en
     crème), in plaats van in elkaar te grijpen zoals bij de collectie;
   - de titel staat in het tekstveld zelf, dus de koppen in dat veld krijgen de
     opmaak die bij de collectie op een los titelveld zit;
   - een opsomming in het tekstveld wordt een vinkjeslijst;
   - een call to action kan een gouden tekstregel zijn in plaats van een knop.
   ============================================================================= */

.wood-dienst,
.wood-dienst-tekst {
  --wood-goud: #D9B976;
  --wood-creme: #FAF7F1;
  --wood-inkt: #35332E;
  --wood-goud-zacht: #C29E66;
  --wood-serif: "Libre Baskerville", Georgia, serif;
  --wood-inhoud: 1140px;
}

/* --- De twee blokken ----------------------------------------------------- */

.wood-dienst--wit { background: #fff; }
.wood-dienst--creme { background: var(--wood-creme); }

/*
 * Bij de collectie lopen de verhaalblokken in elkaar over met negatieve marges.
 * Hier niet: elk blok heeft zijn eigen vlak, dus de blokken staan netjes onder
 * elkaar met 80px lucht boven en onder, zoals de containers in Elementor.
 */
.wood-dienst .wood-verhaal__binnen,
.wood-dienst.wood-verhaal--rechts .wood-verhaal__binnen {
  padding: 80px 0;
  align-items: center;
}

.wood-dienst.wood-verhaal--links .wood-verhaal__tekst,
.wood-dienst.wood-verhaal--rechts .wood-verhaal__beeld,
.wood-dienst .wood-verhaal__tekst,
.wood-dienst .wood-verhaal__beeld {
  margin-top: 0;
}

/* --- De tekst uit het veld ----------------------------------------------- */

/*
 * De eerste kop in het veld is de titel van het blok, dus dezelfde opmaak als
 * het titelveld bij de collectie: Libre Baskerville 18px in hoofdletters. Twee
 * klassen in de selector, want in de Elementor-kit van deze site staat
 * `.elementor-kit-7 h3 { line-height: 1.3px }`.
 */
.wood-dienst__body h2,
.wood-dienst__body h3 {
  margin: 8px 0 16px;
  font-family: var(--wood-serif);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wood-inkt);
}

.wood-dienst__body h3 {
  font-size: 15px;
  letter-spacing: 0.08em;
}

.wood-dienst__body h2:not(:first-child),
.wood-dienst__body h3:not(:first-child) {
  margin-top: 32px;
}

.wood-dienst__body p {
  margin: 0 0 16px;
}

.wood-dienst__body > :last-child {
  margin-bottom: 0;
}

/*
 * Een opsomming wordt een vinkjeslijst. Zelfde vinkje als `.custom-list` in
 * style.css, dus gelijk aan de lijstjes die nu met de hand in Elementor staan.
 */
.wood-dienst__body ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.wood-dienst__body ul li {
  position: relative;
  margin: 0 0 1px;
  padding-left: 28px;
  font-size: 16px;
}

.wood-dienst__body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background-color: var(--wood-goud);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5C4.5 12.8 6.5 15 9 18.5C12 14 16 8 21 3.5' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5C4.5 12.8 6.5 15 9 18.5C12 14 16 8 21 3.5' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* --- Call to action ------------------------------------------------------ */

/*
 * De tekstregel is de gouden regel die nu als losse kop onder de tekst staat,
 * bijvoorbeeld het telefoonnummer. Zelfde maat en spatiëring als een aanhef.
 */
.wood-dienst__regel,
.wood-dienst__regelhouder .wood-dienst__regel {
  display: inline-block;
  margin: 24px 0 0;
  color: var(--wood-goud-zacht);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
}

.wood-dienst__regelhouder {
  margin: 0;
}

a.wood-dienst__regel:hover,
a.wood-dienst__regel:focus-visible {
  color: var(--wood-goud);
}

.wood-dienst .wood-knop {
  margin-top: 28px;
}

/* --- De beschrijving onderaan -------------------------------------------- */

/*
 * De aanhef staat boven de tekstkolom en moet met die kolom uitlijnen. De
 * sectie centreert zijn kinderen, dus zonder deze breedte zweeft de aanhef in
 * het midden terwijl de kop eronder links begint.
 */
.wood-dienst-tekst .wood-kop__aanhef {
  width: 100%;
  max-width: 684px;
  margin: 0 0 8px;
}

/* --- Donkergroen blok ---------------------------------------------------- */

/*
 * Kleur van de groene sectie op /vloer-verwijderen/ (#00473C). Alleen de
 * letters draaien mee naar crème; de knop, de aanhef en de vinkjes blijven
 * goud, zoals in die sectie.
 */
.wood-dienst--groen {
  background: #00473C;
}

.wood-dienst--groen .wood-dienst__body,
.wood-dienst--groen .wood-dienst__body h2,
.wood-dienst--groen .wood-dienst__body h3,
.wood-dienst--groen .wood-dienst__body p,
.wood-dienst--groen .wood-dienst__body li {
  color: #FAF7F1;
}

.wood-dienst--groen .wood-kop__aanhef,
.wood-dienst--groen .wood-dienst__regel {
  color: var(--wood-goud);
}

.wood-dienst--groen .wood-dienst__body a {
  color: #FAF7F1;
}

/* De call to action onder de beschrijving lijnt uit met dezelfde tekstkolom. */
.wood-dienst-tekst .wood-dienst__regel,
.wood-dienst-tekst .wood-dienst__regelhouder,
.wood-dienst-tekst .wood-knop {
  align-self: flex-start;
  width: auto;
  max-width: 684px;
}

.wood-dienst-tekst .wood-binnen {
  max-width: 684px;
}

/* De maten en kleuren van de collectie gelden alleen binnen hun eigen secties
   (wood-collectie.css). Deze twee secties staan daar niet bij, dus hier dezelfde
   waarden; anders loopt de galerij over de volle breedte en missen de knoppen hun kleur. */
.wood-project-galerij,
.wood-project-intro,
.wood-landing-patronen {
  --wood-groen: #004339;
  --wood-goud: #D9B976;
  --wood-creme: #FAF7F1;
  --wood-zand: #EDE6DB;
  --wood-tekst: #004339;
  --wood-serif: "Libre Baskerville", Georgia, serif;
  --wood-rond-foto: 0;
  --wood-inhoud: 1140px;
}

/* Landingspagina: de rij naar de andere patronen (PVC stroken, visgraat ...).
   Dezelfde knoppen als het patroonfilter op de collectiepagina, maar als link. */
.wood-landing-patronen {
  background: var(--wood-creme);
  padding: 40px 20px 4px;
}

.wood-landing-patronen .wood-patronen {
  margin: 12px 0 36px;
}

a.wood-patroon,
a.wood-patroon:hover {
  text-decoration: none;
}

a.wood-patroon.is-aan {
  cursor: default;
  transform: none;
}

/* Kleur- en houtstalen (customizen, houtsoorten): kleine vierkantjes met de naam
   eronder, vijf naast elkaar, zoals op de oude site. */
.wood-seo__galerij--stalen {
  grid-template-columns: repeat(5, 1fr);
  gap: 16px 12px;
  margin: 24px 0 32px;
}

.wood-seo__galerij--stalen figure {
  margin: 0 !important;
}

.wood-seo__galerij--stalen img {
  aspect-ratio: 1;
  height: auto;
}

.wood-seo__galerij--stalen figcaption {
  margin-top: 6px;
  font-size: 0.8rem;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .wood-seo__galerij--stalen {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Projecten: kaarten drie naast elkaar, met materiaal en patroon boven de titel. */
.wood-raster--projecten {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wood-kaart .wood-kaart__labels {
  margin: 14px 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wood-groen);
}

.wood-kaart--project .wood-kaart__titel {
  margin-top: 6px;
}

.wood-projecten--bij .wood-vloeren__meer {
  margin-top: 36px;
}

/* De galerij van een project. */
.wood-project-galerij {
  padding: 80px 20px;
  background: #fff;
}

.wood-project-galerij__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.wood-project-galerij__foto {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--wood-zand);
}

.wood-project-galerij__foto img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.wood-project-galerij__foto:hover img {
  transform: scale(1.04);
}

@media (max-width: 820px) {
  .wood-raster--projecten,
  .wood-project-galerij__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .wood-raster--projecten {
    grid-template-columns: minmax(0, 1fr);
  }
  .wood-project-galerij {
    padding: 48px 16px;
  }
}

/* Projectkaart bij aanwijzen: een lichte donkerblauwe waas komt van onderen op,
   met de naam van het project en een dunne gouden pijl (Tim, 25 sep 2026). */
.wood-kaart--project .wood-kaart__beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 67, 57, 0.72) 0%, rgba(0, 67, 57, 0.25) 32%, rgba(0, 67, 57, 0) 55%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.wood-kaart__over {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px;
  color: #FAF7F1;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}

.wood-kaart__over-titel {
  font-family: var(--wood-serif);
  font-size: 1.05rem;
  line-height: 1.35;
}

.wood-kaart__pijl {
  color: var(--wood-goud, #D9B976);
  transition: transform 0.45s ease;
}

.wood-kaart--project .wood-kaart__link:hover .wood-kaart__beeld::after,
.wood-kaart--project .wood-kaart__link:focus-visible .wood-kaart__beeld::after {
  opacity: 1;
}

.wood-kaart--project .wood-kaart__link:hover .wood-kaart__over,
.wood-kaart--project .wood-kaart__link:focus-visible .wood-kaart__over {
  opacity: 1;
  transform: translateY(0);
}

.wood-kaart--project .wood-kaart__link:hover .wood-kaart__pijl {
  transform: translateX(6px);
}

@media (hover: none) {
  .wood-kaart__over { display: none; }
}

/* Artikelen: de tekst staat altijd in de foto, met de waas eronder (Tim, 5 okt 2026). */
.wood-kaart--project .wood-kaart__beeld:has(.wood-kaart__over--vast)::after { opacity: 1; }
.wood-kaart .wood-kaart__over--vast,
.wood-kaart--project .wood-kaart__link:hover .wood-kaart__over--vast {
  display: flex;
  gap: 8px;
  opacity: 1;
  transform: none;
}
.wood-kaart__over-labels {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, 0.85);
}
.wood-kaart .wood-kaart__over--vast .wood-kaart__over-titel {
  margin: 0;
  font-family: var(--wood-serif);
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FAF7F1;
}

@media (prefers-reduced-motion: reduce) {
  .wood-kaart__over,
  .wood-kaart--project .wood-kaart__beeld::after { transition: none; }
}

/* Projecthero: titels zijn hier vaak lang, dus een maat kleiner. */
.wood-hero--project .wood-hero__titel {
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.2;
}

/* Filter als uitklapmenu, op elke schermbreedte (Tim, 2 okt 2026; eerst alleen
   onder 1025px), zoals bij Evi Verbindt: een groene knop met de huidige keuze en
   het aantal, de opties klappen eronder open. */
  .wood-filter-uitklap {
    position: relative;
    display: inline-block;
    min-width: 240px;
    margin: 0 0 36px;
  }

  .wood-filterkop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 11px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--wood-groen, #004339);
    color: #FAF7F1;
    font-size: 0.9rem;
    cursor: pointer;
  }

  .wood-filterkop svg { transition: transform 0.2s ease; }
  .wood-filter-uitklap.is-open .wood-filterkop { border-radius: 20px 20px 0 0; }
  .wood-filter-uitklap.is-open .wood-filterkop svg { transform: rotate(180deg); }

  .wood-filter-uitklap .wood-patronen {
    position: absolute;
    z-index: 6;
    top: 100%;
    left: 0;
    min-width: 100%;
    margin: 0;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1px;
    padding: 6px;
    background: #fff;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 16px 34px -18px rgba(8, 28, 40, 0.55);
  }

  .wood-filter-uitklap.is-open .wood-patronen { display: flex; }

  .wood-filter-uitklap .wood-patroon,
  .wood-filter-uitklap .wood-patroon:hover {
    justify-content: space-between;
    padding: 7px 14px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    transform: none;
    text-align: left;
    white-space: nowrap;
    color: var(--wood-groen, #004339);
  }

  .wood-filter-uitklap .wood-patroon.is-aan {
    background: transparent;
    color: var(--wood-groen, #004339);
    font-weight: 700;
  }

/* Hello kleurt knoppen roze bij hover en focus; de filterknop en de opties houden hun eigen kleur. */
button.wood-filterkop,
button.wood-filterkop:hover,
button.wood-filterkop:focus,
button.wood-filterkop:active {
  background: var(--wood-groen, #004339);
  color: #FAF7F1;
  border-color: transparent;
}

  .wood-filter-uitklap button.wood-patroon,
  .wood-filter-uitklap button.wood-patroon:hover,
  .wood-filter-uitklap button.wood-patroon:focus,
  .wood-filter-uitklap button.wood-patroon:active {
    background: transparent;
    color: var(--wood-groen, #004339);
    border-color: transparent;
  }

.wood-filterkop .wood-filterkop__aantal { opacity: 0.6; margin-left: 6px; font-size: 0.85em; }
.wood-filter-uitklap .wood-patroon__aantal { margin-left: 18px; }

/* Hero op de telefoon: titel en aanhef een stuk kleiner, anders vult de titel
   het hele scherm (Tim, 25 sep 2026). Geldt voor alle heroes met shortcode. */
@media (max-width: 767px) {
  .wood-hero .wood-hero__titel,
  .wood-hero--project .wood-hero__titel {
    font-size: 27px;
    line-height: 1.2;
  }
  .wood-hero .wood-hero__aanhef {
    font-size: 13px;
    letter-spacing: 0.14em;
  }
  .wood-hero .wood-hero__tekst {
    font-size: 15px;
    line-height: 1.55;
  }
}

/* Lichte hero-foto (automatisch gemeten): de tekst blijft wit, met een zachte
   donkere waas alleen achter de tekst en een lichte schaduw om de letters.
   Donkere foto's krijgen niets extra: wit leest daar al goed. Desktop en telefoon
   worden apart gemeten (andere uitsnede): wood-hero--licht en wood-hero--licht-m. */
@media (min-width: 768px) {
  .wood-hero--licht .wood-hero__beeld::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
      rgba(0, 67, 57, 0.55) 0%,
      rgba(0, 67, 57, 0.40) 35%,
      rgba(0, 67, 57, 0.10) 65%,
      rgba(0, 67, 57, 0) 80%);
    pointer-events: none;
  }
  .wood-hero--licht .wood-hero__aanhef,
  .wood-hero--licht .wood-hero__titel,
  .wood-hero--licht .wood-hero__tekst {
    text-shadow: 0 1px 14px rgba(0, 30, 32, 0.4);
  }
}

@media (max-width: 767px) {
  .wood-hero--licht-m .wood-hero__beeld::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(0, 67, 57, 0.18) 0%,
      rgba(0, 67, 57, 0.48) 35%,
      rgba(0, 67, 57, 0.48) 75%,
      rgba(0, 67, 57, 0.18) 100%);
    pointer-events: none;
  }
  .wood-hero--licht-m .wood-hero__aanhef,
  .wood-hero--licht-m .wood-hero__titel,
  .wood-hero--licht-m .wood-hero__tekst {
    text-shadow: 0 1px 14px rgba(0, 30, 32, 0.4);
  }
}

/* Op /portfolio/ is dit het eerste blok. Boven de aanhef 80px, net als op
   /collecties/: alle pagina's zonder hero beginnen gelijk (Tim, 3 okt 2026;
   op 2 okt was het 56px). */
.wood-projecten:not(.wood-projecten--bij) .wood-binnen,
.wood-artikelen--overzicht .wood-binnen {
  padding-top: 80px;
}
.wood-projecten:not(.wood-projecten--bij) .wood-kop {
  margin-bottom: 28px;
}
@media (max-width: 980px) {
  .wood-projecten:not(.wood-projecten--bij) .wood-binnen { padding-top: 40px; }
}

/* Projectoverzicht als metselwerk (Tim, 2 okt 2026): foto's in hun eigen
   verhouding in kolommen, naam en labels alleen in de hover-waas. Alleen het
   overzicht op /portfolio/, niet "meer projecten" onder een project. */
.wood-projecten:not(.wood-projecten--bij) .wood-raster--projecten {
  display: block;
  columns: 3;
  column-gap: clamp(18px, 2.4vw, 30px);
}

.wood-projecten:not(.wood-projecten--bij) .wood-raster--projecten .wood-kaart {
  break-inside: avoid;
  margin-bottom: clamp(18px, 2.4vw, 30px);
}

/* Bijna alle uitgelichte foto's zijn liggend; de afwisseling in hoogte komt
   daarom uit een vast ritme van uitsnedes (staand, vierkant, liggend). */
.wood-projecten:not(.wood-projecten--bij) .wood-raster--projecten .wood-kaart__beeld {
  aspect-ratio: 4 / 3;
}
.wood-projecten:not(.wood-projecten--bij) .wood-raster--projecten .wood-kaart:nth-child(6n+1) .wood-kaart__beeld,
.wood-projecten:not(.wood-projecten--bij) .wood-raster--projecten .wood-kaart:nth-child(6n+5) .wood-kaart__beeld {
  aspect-ratio: 3 / 4;
}
.wood-projecten:not(.wood-projecten--bij) .wood-raster--projecten .wood-kaart:nth-child(6n+3) .wood-kaart__beeld {
  aspect-ratio: 1;
}

.wood-projecten:not(.wood-projecten--bij) .wood-raster--projecten .wood-kaart__labels,
.wood-projecten:not(.wood-projecten--bij) .wood-raster--projecten .wood-kaart__titel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .wood-projecten:not(.wood-projecten--bij) .wood-raster--projecten { columns: 2; }
}

@media (max-width: 520px) {
  .wood-projecten:not(.wood-projecten--bij) .wood-raster--projecten { columns: 1; }
}

/* Zonder hover (telefoon, tablet) staat de naam altijd onderin de foto. */
@media (hover: none) {
  .wood-projecten:not(.wood-projecten--bij) .wood-raster--projecten .wood-kaart__over {
    display: flex;
    opacity: 1;
    transform: none;
    padding: 16px 18px;
  }
  .wood-projecten:not(.wood-projecten--bij) .wood-raster--projecten .wood-kaart__beeld::after {
    opacity: 1;
    background: linear-gradient(to top, rgba(0, 67, 57, 0.7) 0%, rgba(0, 67, 57, 0) 42%);
  }
  .wood-projecten:not(.wood-projecten--bij) .wood-raster--projecten .wood-kaart__pijl { display: none; }
}

/* Project zonder fotohero (Tim, 2 okt 2026): naam op crème, daarna meteen de foto's. */
.wood-project-intro {
  margin-top: 0;
  padding: 72px 20px 8px;
  background: #fff;
  color: var(--wood-tekst);
}

.wood-project-intro .wood-binnen {
  max-width: 1140px;
  margin: 0 auto;
}

.wood-project-intro .wood-project-intro__aanhef {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wood-groen);
}

.wood-project-intro .wood-project-intro__titel {
  margin: 0 0 16px;
  max-width: 820px;
  font-family: var(--wood-serif);
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wood-groen);
}

.wood-project-intro__tekst {
  max-width: 640px;
  margin-bottom: 24px;
}

.wood-project-intro__tekst p:last-child { margin-bottom: 0; }

/* Galerij als metselwerk: foto's in hun eigen verhouding, eerst negen. */
.wood-project-galerij {
  padding-top: 40px;
  background: #fff;
  margin-top: 0;
}

.wood-project-galerij .wood-project-galerij__raster {
  display: block;
  columns: 3;
  column-gap: 16px;
}

.wood-project-galerij .wood-project-galerij__foto {
  aspect-ratio: auto;
  break-inside: avoid;
  margin-bottom: 16px;
}

.wood-project-galerij .wood-project-galerij__foto img {
  display: block;
  height: auto !important;
}

.wood-project-galerij__foto.is-extra { display: none; }
.wood-project-galerij.is-alles .wood-project-galerij__foto.is-extra { display: block; }
/* Knoppen onder de galerij: meer lucht, ze stonden tegen de foto's aan (Tim, 3 okt 2026). */
.wood-project-galerij .wood-vloeren__meer { margin-top: 56px; text-align: center; }

@media (max-width: 820px) {
  .wood-project-galerij .wood-project-galerij__raster { columns: 2; }
}

@media (max-width: 520px) {
  .wood-project-intro { padding: 48px 16px 4px; }
  .wood-project-galerij .wood-project-galerij__raster { columns: 1; }
}

/* Vloeren en projecten samen onder een project: één raster van drie, met filter. */
.wood-projecten--samen .wood-patronen { margin-bottom: 36px; }

/* Opties in het uitklapmenu: zacht vlak bij aanwijzen, de gekozen optie vet. */
.wood-filter-uitklap button.wood-patroon:hover,
.wood-filter-uitklap button.wood-patroon:focus-visible {
  background: #F3EEE6;
  border-radius: 10px;
}

/* Vloerkaarten in de collectie: naam alleen in de waas, net als op het portfolio
   (Tim, 2 okt 2026). De titel eronder blijft voor schermlezers. */
.wood-kaart--vloer .wood-kaart__titel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wood-kaart--vloer .wood-kaart__over { padding: 16px 18px; gap: 8px; }
.wood-kaart--vloer .wood-kaart__over-titel { font-size: 0.95rem; }

@media (hover: none) {
  .wood-kaart--vloer .wood-kaart__over {
    display: flex;
    opacity: 1;
    transform: none;
  }
  .wood-kaart--vloer .wood-kaart__beeld::after {
    opacity: 1;
    background: linear-gradient(to top, rgba(0, 67, 57, 0.7) 0%, rgba(0, 67, 57, 0) 42%);
  }
  .wood-kaart--vloer .wood-kaart__pijl { display: none; }
}

/* Hello kleurt elke knop roze bij :focus (dus ook na een klik, zoals bij
   "Minder tonen") en :hover. Onze knoppen houden in elke toestand hun kleur. */
button.wood-knop:hover,
button.wood-knop:focus,
button.wood-knop:active {
  background: var(--wood-goud, #D9B976);
  color: var(--wood-inkt, #004339);
}

button.wood-knop--zacht:hover,
button.wood-knop--zacht:focus,
button.wood-knop--zacht:active {
  background: transparent;
  color: var(--wood-groen, #004339);
}

button.wood-patroon:focus,
button.wood-patroon:active {
  color: var(--wood-groen, #004339);
}

/* Subtiel filter (Tim, 2 okt 2026): geen groene balk maar een dun omlijnde knop
   in de breedte van de tekst, met chevron. Het menu eronder blijft zoals het was. */
.wood-filter-uitklap {
  position: relative;
  display: inline-block;
  min-width: 0;
  margin: 0 0 32px;
}

button.wood-filterkop,
button.wood-filterkop:hover,
button.wood-filterkop:focus,
button.wood-filterkop:active {
  width: auto;
  gap: 12px;
  padding: 9px 18px;
  background: transparent;
  color: var(--wood-groen, #004339);
  box-shadow: inset 0 0 0 1px rgba(0, 67, 57, 0.25);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

button.wood-filterkop:hover,
.wood-filter-uitklap.is-open button.wood-filterkop {
  box-shadow: inset 0 0 0 1px rgba(0, 67, 57, 0.5);
}

.wood-filter-uitklap.is-open .wood-filterkop { border-radius: 999px; }

.wood-filter-uitklap .wood-patronen {
  top: calc(100% + 6px);
  min-width: 240px;
  border-radius: 14px;
  /* Met patronen én eigenschappen wordt de lijst lang (Tim, 3 okt 2026). */
  max-height: min(70vh, 560px);
  overflow-y: auto;
}

/* Twee filters naast elkaar: patronen en eigenschappen (Tim, 3 okt 2026). */
.wood-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 32px;
}

.wood-filters .wood-filter-uitklap { margin: 0; }

/* Op de telefoon hangt het menu onder de hele rij, anders loopt het rechter
   menu ("Vloerverwarming-koeling geschikt") van het scherm af. */
@media (max-width: 600px) {
  .wood-filters { position: relative; }
  .wood-filters .wood-filter-uitklap { position: static; }
  .wood-filters .wood-patronen { left: 0; right: 0; }
  .wood-filters .wood-patroon { white-space: normal; }
}

/* Alle wazen over foto's in bosgroen #004339, de kleur van de footer (Tim, 3 okt 2026);
   eerst stonden ze op het blauwere #004339.
   Homepage-hero en collectietegels (Tim, 3 okt 2026), shortcodes in
   wood-collectie-secties.php. Eigen kleuren, want ze staan buiten de collectiesecties. */
.wood-home-hero,
.wood-ct {
  --wood-groen: #004339;
  --wood-goud: #D9B976;
  --wood-creme: #FAF7F1;
  --wood-zand: #EDE6DB;
  --wood-serif: "Libre Baskerville", Georgia, serif;
}

.wood-home-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 600px;
  overflow: hidden;
  color: var(--wood-creme);
}

.wood-home-hero .wood-home-hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
}

.wood-home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 67, 57, 0.62), rgba(0, 67, 57, 0.1) 65%);
  pointer-events: none;
}

.wood-home-hero__binnen {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

.wood-home-hero .wood-home-hero__aanhef {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wood-goud);
}

.wood-home-hero .wood-home-hero__titel {
  margin: 0 0 16px;
  max-width: 24ch;
  font-family: var(--wood-serif);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wood-creme);
}

.wood-home-hero .wood-home-hero__tekst {
  margin: 0 0 28px;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--wood-creme);
}

/* Collectietegels: boven 2 x een halve, onder 4 x een kwart, alle zes even hoog. */
.wood-ct {
  padding: 80px 20px;
}

.wood-ct--wit { background: #fff; }

.wood-ct__binnen {
  max-width: 1140px;
  margin: 0 auto;
}

.wood-ct .wood-ct__aanhef {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wood-groen);
}

.wood-ct .wood-ct__titel {
  margin: 0;
  font-family: var(--wood-serif);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wood-groen);
}

.wood-ct__tekst {
  max-width: 78ch;
  margin-top: 12px;
}

.wood-ct__tekst p:last-child { margin-bottom: 0; }

.wood-ct__tegels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.wood-ct__tegel {
  position: relative;
  display: block;
  height: 340px;
  overflow: hidden;
  background: var(--wood-zand);
  color: var(--wood-creme);
  text-decoration: none;
}

.wood-ct__tegel--breed { grid-column: span 2; }

.wood-ct .wood-ct__foto {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wood-ct__tegel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 67, 57, 0.75) 0%, rgba(0, 67, 57, 0.25) 26%, rgba(0, 67, 57, 0) 46%);
  transition: background 0.5s ease;
  pointer-events: none;
}

.wood-ct__onder {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: 12px;
  padding: 24px 26px;
  transform: translateY(26px);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wood-ct__naam {
  font-family: var(--wood-serif);
  font-size: 1.2rem;
  line-height: 1.3;
}

.wood-ct__tegel--breed .wood-ct__naam { font-size: 1.45rem; }

.wood-ct__actie {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--wood-goud);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.wood-ct__actie svg {
  flex: none;
  width: 44px;
  height: 12px;
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wood-ct__bekijk {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--wood-creme);
}

.wood-ct__tegel:hover .wood-ct__foto,
.wood-ct__tegel:focus-visible .wood-ct__foto { transform: scale(1.05); }

.wood-ct__tegel:hover::after,
.wood-ct__tegel:focus-visible::after {
  background: linear-gradient(to top, rgba(0, 67, 57, 0.85) 0%, rgba(0, 67, 57, 0.35) 32%, rgba(0, 67, 57, 0) 58%);
}

.wood-ct__tegel:hover .wood-ct__onder,
.wood-ct__tegel:focus-visible .wood-ct__onder { transform: translateY(0); }

.wood-ct__tegel:hover .wood-ct__actie,
.wood-ct__tegel:focus-visible .wood-ct__actie { opacity: 1; }

.wood-ct__tegel:hover .wood-ct__actie svg,
.wood-ct__tegel:focus-visible .wood-ct__actie svg { width: 64px; transform: translateX(4px); }

.wood-ct__tegel:focus-visible { outline: 2px solid var(--wood-goud); outline-offset: 3px; }

/* Regel voor wie twijfelt: tekst in de kopletter, gewone Wood-knop, geen lijn. */
.wood-ct .wood-ct__twijfel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 20px 0 0;
  padding: 22px 0;
}

/* Alleen de zin in de kopletter; de knop houdt de letter van alle knoppen. */
.wood-ct .wood-ct__twijfeltekst {
  font-family: var(--wood-serif);
  font-size: 19px;
  line-height: 1.45;
  color: var(--wood-groen);
}

/* De linkkleur van de Elementor-kit mag de tegels niet kleuren. */
.wood-ct a.wood-ct__tegel,
.wood-ct a.wood-ct__tegel:hover,
.wood-ct a.wood-ct__tegel:focus,
.wood-ct a.wood-ct__tegel .wood-ct__naam,
.wood-ct a.wood-ct__tegel .wood-ct__bekijk {
  color: var(--wood-creme);
}

@media (hover: none) {
  .wood-ct__onder { transform: none; }
  .wood-ct__actie { opacity: 1; }
}

@media (max-width: 820px) {
  .wood-ct__tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .wood-ct__tegel { height: 260px; }
  .wood-ct__onder { padding: 18px 20px; }
  .wood-home-hero { min-height: 520px; }
}

@media (max-width: 520px) {
  .wood-ct { padding-top: 56px; }
  /* Houten en pvc over de volle breedte, de andere vier twee naast elkaar (Tim, 5 okt 2026). */
  .wood-ct__tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wood-ct__tegel--breed { grid-column: span 2; height: 240px; }
  .wood-ct__tegel { height: 170px; }
  .wood-ct__tegel:not(.wood-ct__tegel--breed) .wood-ct__onder { padding: 12px 14px; transform: none; }
  .wood-ct__tegel:not(.wood-ct__tegel--breed) .wood-ct__naam { font-size: 1rem; }
  .wood-ct__tegel:not(.wood-ct__tegel--breed) .wood-ct__actie { display: none; }
  .wood-ct .wood-ct__twijfeltekst { font-size: 17px; }
  .wood-home-hero__binnen { padding-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .wood-ct__tegel *,
  .wood-ct__tegel::after { transition: none !important; }
}

/* --- Stalen met filter: [wood_stalen] (Vloer customizer, 3 okt 2026) ---- */

.wood-stalen {
  padding: 90px 20px 100px;
  background: var(--wood-zand);
}

.wood-stalen__kop {
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: center;
}

.wood-stalen .wood-stalen__titel {
  margin: 0 0 16px;
  font-family: var(--wood-serif);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wood-inkt);
}

.wood-stalen__intro p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--wood-inkt);
}

/* Het uitklapfilter van de collectie, hier in het midden. */
.wood-stalen .wood-stalen__filters {
  justify-content: center;
  margin-bottom: 32px;
}

/* De uitleg verschijnt pas als er een keuze is; daarvoor neemt hij geen ruimte in. */
.wood-stalen__uitleg {
  max-width: 620px;
  margin: -12px auto 28px;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  color: var(--wood-inkt);
}

.wood-stalen__uitleg:empty { display: none; }

.wood-stalen__raster {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px 18px;
}

.wood-staal {
  margin: 0;
}

.wood-staal img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.wood-staal figcaption {
  margin-top: 9px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--wood-inkt);
}

.wood-staal figcaption span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 300;
  color: #6b675e;
}

.wood-stalen__knoppen {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

@media (max-width: 1024px) {
  .wood-stalen__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .wood-stalen { padding: 60px 16px 70px; }
  .wood-stalen__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
}

/* H1 op pagina's zonder hero: 5px kleiner dan een herotitel (37px), dus 32px
   (Tim, 3 okt 2026). Geldt voor /collecties/, /portfolio/ en de projectpagina's. */
.wood-kop .wood-kop__titel.wood-titel-h1,
.wood-ct .wood-ct__titel.wood-titel-h1,
.wood-project-intro .wood-project-intro__titel {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.06em;
  /* Overal de tekstkleur van de andere koppen, niet groen (Tim, 3 okt 2026). */
  color: var(--wood-inkt, #35332E);
}

.wood-project-intro { padding-top: 80px; }

@media (max-width: 767px) {
  .wood-kop .wood-kop__titel.wood-titel-h1,
  .wood-ct .wood-ct__titel.wood-titel-h1,
  .wood-project-intro .wood-project-intro__titel { font-size: 26px; }
}

/* Hero met tekst onderaan (veld Indeling): de foto blijft staan zoals altijd,
   alleen de tekst zakt, zodat hij niet door het Wood Lab-bord loopt
   (/houten-vloer-customizen/, Tim, 3 okt 2026). De titel breekt na
   "voor iedereen". */
.wood-hero--onder .wood-hero__inhoud { justify-content: flex-end; padding-bottom: 56px; }
.wood-hero--onder .wood-hero__titel { max-width: 13.6em; }

@media (max-width: 767px) {
  /* Op de telefoon is de foto smal uitgesneden; links staat het Wood Lab-bord. */
  .wood-hero--onder .wood-hero__beeld .wood-hero__foto { object-position: 20% 100%; }
}

/* [wood_home_lab]: groen blok met whitewash-achtergrond (Tim, 3 okt 2026). */
.wood-lab {
  --wood-goud: #D9B976;
  --wood-creme: #FAF7F1;
  --wood-serif: "Libre Baskerville", Georgia, serif;
  position: relative;
  overflow: hidden;
  background: #004339;
  color: var(--wood-creme);
}

.wood-lab__achter {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wood-lab__binnen {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: 64px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 120px 20px;
}

.wood-lab .wood-lab__foto {
  display: block;
  width: 100%;
  height: auto !important;
}

.wood-lab .wood-lab__aanhef {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wood-goud);
}

.wood-lab .wood-lab__titel {
  margin: 0 0 20px;
  font-family: var(--wood-serif);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wood-creme);
}

.wood-lab .wood-lab__zin {
  max-width: 56ch;
  margin: 0 0 28px;
}

.wood-lab .wood-lab__zin p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--wood-creme);
}

.wood-lab .wood-lab__zin p:last-child { margin-bottom: 0; }
.wood-lab .wood-lab__zin:last-child { margin-bottom: 0; }

@media (max-width: 820px) {
  .wood-lab__binnen { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 72px 20px; }
}

/* Productpagina (Tim, 3 okt 2026). De inhoud komt uit the_content; de blokken
   breken uit de kolom van Hello naar de volle breedte. */
body.single-producten main.site-main { max-width: none; width: 100%; padding-inline: 0; }
.single-producten .page-content > .wood-productpagina { margin: 0; }

.wood-product {
  --wood-goud: #D9B976;
  --wood-creme: #FAF7F1;
  --wood-serif: "Libre Baskerville", Georgia, serif;
  background: #fff;
  padding: 80px 20px 96px;
}

.wood-product__binnen { max-width: 1140px; margin: 0 auto; }
.wood-product__beeld { position: relative; }

.wood-product .wood-product__groot {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

.wood-product__titelvak {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 50%;
  padding: 34px 40px;
  background: rgba(250, 247, 241, 0.9);
}

.wood-product .wood-product__aanhef {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #004339;
}

.wood-product .wood-product__titel {
  margin: 0;
  font-family: var(--wood-serif);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wood-inkt, #35332E);
}

/* Ingezoomde uitsnede van dezelfde foto, op de vloer. */
.wood-product__klein {
  position: absolute;
  right: 6%;
  bottom: -60px;
  width: 22%;
  aspect-ratio: 1;
  overflow: hidden;
  box-shadow: 0 0 0 10px #fff;
}

.wood-product__klein img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 100%;
  transform: scale(2.6);
  transform-origin: 30% 100%;
}

.wood-product__klein.is-eigen img { transform: none; object-position: 50% 50%; }

.wood-product__onder { max-width: 780px; margin-top: 56px; }

.wood-product__tekst h2 {
  margin: 0 0 16px;
  font-family: var(--wood-serif);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wood-inkt, #35332E);
}

.wood-product__tekst h3 { margin: 24px 0 10px; font-family: var(--wood-serif); font-size: 16px; font-weight: 500; }
.wood-product__tekst p, .wood-product__tekst li { font-size: 16px; line-height: 1.7; }
.wood-product__tekst > *:last-child { margin-bottom: 0; }

/* Vinkjes: drie of minder naast elkaar, meer onder elkaar (Tim). */
.wood-product__eigen {
  list-style: none;
  display: grid;
  gap: 4px;
  margin: 24px 0 30px;
  padding: 0;
}

.wood-product__eigen.is-naast { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.wood-product__eigen li { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; line-height: 1.5; }
.wood-product__eigen svg { flex: none; width: 16px; height: 16px; color: var(--wood-goud); }

@media (max-width: 820px) {
  .wood-product { padding-top: 60px; }
  .wood-product .wood-product__groot { aspect-ratio: 4 / 3; }
  .wood-product__klein { display: none; } /* op de telefoon alleen de grote foto */
  /*
   * De titel in de foto, op een groene waas zoals de collectietegels; de aanhef
   * eronder, boven de tekst (Tim, 5 okt 2026). Anders stonden aanhef, titel en
   * de eerste kop van de tekst direct onder elkaar.
   */
  .wood-product__beeld { margin-bottom: 40px; }
  .wood-product__titelvak {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    padding: 64px 20px 18px;
    background: linear-gradient(to top, rgba(0, 67, 57, 0.82) 0%, rgba(0, 67, 57, 0.4) 55%, rgba(0, 67, 57, 0) 100%);
  }
  .wood-product .wood-product__titel { font-size: 21px; line-height: 1.25; color: #FAF7F1; }
  .wood-product .wood-product__aanhef { position: absolute; top: calc(100% + 18px); left: 0; right: 0; margin: 0; }
  .wood-product__onder { margin-top: 0; padding-top: 22px; }
}

/* "Zoek je vloer" in de collectie (Tim, 5 okt 2026): een groene tegel aan het eind
   van het vloerenraster, zelfde maat als een vloerfoto, de tekst zoals de waas op
   een vloerkaart. Op de productpagina een regel onder de afspraakknop. */
.wood-zoektegel {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  aspect-ratio: 4 / 3;
  padding: 16px 18px;
  border-radius: var(--wood-rond-foto);
  background: var(--wood-groen, #004339);
  color: #FAF7F1;
  text-decoration: none;
}
.wood-zoektegel:hover,
.wood-zoektegel:focus-visible { color: #FAF7F1; }
.wood-zoektegel__aanhef {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, 0.85);
}
.wood-zoektegel__tekst {
  font-family: var(--wood-serif);
  font-size: 0.95rem;
  line-height: 1.35;
}
.wood-zoektegel:hover .wood-kaart__pijl,
.wood-twijfelregel:hover .wood-kaart__pijl { transform: translateX(6px); }

.wood-twijfelregel {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin-top: 20px;
  font-size: 15px;
  color: var(--wood-groen, #004339);
  text-decoration: none;
}
.wood-twijfelregel:hover,
.wood-twijfelregel:focus-visible { color: var(--wood-groen, #004339); }
.wood-twijfelregel .wood-kaart__pijl { flex: none; }
.wood-twijfelregel__houder { margin: 4px 0 28px; }
.wood-twijfelregel__houder .wood-twijfelregel { margin-top: 0; }
.wood-product__tekst a.wood-twijfelregel { text-decoration: none; border-bottom: 0; background-image: none; }