/* =========================================================================
   Zesruit — design system stylesheet
   Geladen via mu-plugin zesruit-core.php. Alles containment-first:
   niets mag ooit buiten het scherm vallen.
   ========================================================================= */

:root {
  --zr-pine: #1e4033;
  --zr-leaf: #3e7a52;
  --zr-forest: #152e24;
  --zr-moss: #2d5a42;
  --zr-sage: #a8cbae;
  --zr-mist: #dde8d8;
  --zr-honey: #d9a441;
  --zr-honey-brown: #b0802f;
  --zr-cream: #f3efe6;
  --zr-sand: #e2ddd2;
  --zr-ceramic: #ebe6da;
  --zr-max: 1440px;
  --zr-gutter: clamp(20px, 4vw, 64px);
}

/* -------------------------------------------------------------------------
   1. Containment — geen horizontale overflow, alles binnen max-width
   ---------------------------------------------------------------------- */
html { overflow-x: hidden; }
body { overflow-x: clip; max-width: 100vw; }

/* Elke Elementor-container blijft binnen het scherm */
.e-con, .e-con-inner, .elementor-widget-wrap { max-width: 100%; min-width: 0; }
.e-con > .e-con-inner { max-width: var(--zr-max); margin-inline: auto; width: 100%; }
.elementor-widget { min-width: 0; max-width: 100%; }

/* Media schaalt altijd mee */
img, video, iframe, svg { max-width: 100%; }
img, video { height: auto; }

/* Lange woorden/URL's breken i.p.v. de layout op te rekken */
p, h1, h2, h3, h4, li, a, span { overflow-wrap: break-word; }

/* -------------------------------------------------------------------------
   2. Typografie — vloeiend, schaalt met viewport
   ---------------------------------------------------------------------- */
h1.elementor-heading-title { font-size: clamp(30px, 4.4vw, 60px) !important; line-height: 1.06 !important; }
.zr-h1-hero .elementor-heading-title { font-size: clamp(36px, 5.4vw, 82px) !important; line-height: 1.02 !important; }
.zr-h2-display .elementor-heading-title { font-size: clamp(26px, 2.9vw, 40px) !important; }

.zr-eyebrow, .zr-eyebrow .elementor-heading-title {
  font-family: "IBM Plex Mono", monospace !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

/* -------------------------------------------------------------------------
   3. Hero — statbalk onderaan vastgezet + scroll-cue
   ---------------------------------------------------------------------- */
.zr-hero {
  position: relative;
  background-position: center center !important;
  padding-top: calc(7em + 120px) !important;
}

.zr-hero-stats {
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  padding: 18px 64px !important;
  margin: 0 !important;
  background: linear-gradient(rgba(20, 36, 30, 0), rgba(20, 36, 30, .55));
  border-top: 1px solid rgba(255, 255, 255, .18);
  z-index: 3;
}
/* Inhoud van de statbalk uitlijnen met de herokopie (zelfde 1440-raster) */
.zr-hero > .e-con.zr-hero-stats { max-width: 100%; }
.zr-hero-stats > .elementor-widget { width: 100% !important; max-width: 100% !important; flex: 1 1 100%; }
.zr-statbar-inner {
  max-width: var(--zr-max);
  margin-inline: auto;
  padding-inline: 20px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
@media (max-width: 767px) { .zr-hero-stats { padding: 14px 20px !important; } }
.zr-hero-stats .zr-stat-num {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 19px; font-weight: 600; color: #fff;
}
.zr-hero-stats .zr-stat-label { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.zr-hero-stats .zr-stat-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, .2); display: inline-block; }

/* Scroll-cue (dubbele chevron, zoals in het ontwerp) */
.zr-scrollcue {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 78px; z-index: 4; cursor: pointer; line-height: 0;
}
.zr-scrollcue svg { animation: zrScrollCue 1.7s ease-in-out infinite; }
@keyframes zrScrollCue {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(6px); opacity: 1; }
}
@media (max-width: 767px) { .zr-scrollcue { display: none; } }

/* -------------------------------------------------------------------------
   4. USP-hexagons — horizontale rij op desktop, diamant op mobiel
   ---------------------------------------------------------------------- */
.zr-hexrow {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 1.2vw, 18px);
  width: 100%;
}
.zr-hex {
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: var(--zr-pine);
  box-shadow: inset 0 0 0 4px var(--zr-moss);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), filter .4s ease;
  flex: 0 1 255px;
  min-width: 0;
  /* zelfde verhouding als de logo-zeshoek — NIET platter maken; kleiner
     maken gaat via max-width, de hele hex schaalt dan mee */
  aspect-ratio: 255 / 244;
  max-width: 320px;
  min-height: 0 !important;
}
.zr-hex:hover {
  transform: scale(1.05) translateY(-6px);
  filter: brightness(1.12) drop-shadow(0 8px 20px rgba(62, 122, 82, .25));
}
/* Typografie vult de hex — de kaarten waren groot voor 2 regels 13px tekst */
.zr-hex .elementor-heading-title { font-size: clamp(15px, 1.3vw, 19px) !important; }
.zr-hex .elementor-widget-text-editor { font-size: clamp(12px, 1.05vw, 15.5px); line-height: 1.45; }
.zr-hex .elementor-icon i { font-size: clamp(22px, 2.4vw, 38px); }

/* Tablet: 2 x 2 */
@media (max-width: 1024px) {
  .zr-hexrow { flex-wrap: wrap; }
  .zr-hex { flex: 0 0 46%; }
}
/* Mobiel: diamantformatie (1 / 2 / 1) met vaste hexmaten — zoals het ontwerp */
@media (max-width: 767px) {
  .zr-hexrow {
    display: grid !important;
    /* 2×170 + 10 gap = 350 = precies de contentbreedte op 390px — bij 188px
       werden de middelste hexen samengedrukt en waren ze kleiner dan 1 en 4 */
    grid-template-columns: repeat(2, minmax(0, 160px));
    justify-content: center;
    gap: 6px 10px;
  }
  .zr-hex {
    width: 100%; max-width: 160px; flex: none;
    aspect-ratio: 176 / 168;
    padding: 0 20px !important;
    justify-self: center;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
  }
  .zr-hex > .elementor-widget { width: 100% !important; max-width: 100%; flex: none !important; }
  .zr-hex:nth-child(1), .zr-hex:nth-child(4) { grid-column: 1 / -1; }
  .zr-hex .elementor-heading-title {
    font-size: 14.5px !important; line-height: 1.12 !important; text-align: center;
    overflow-wrap: normal; word-break: keep-all;
  }
  .zr-hex .elementor-widget-text-editor { font-size: 11.5px; overflow: hidden; }
  .zr-hex .elementor-widget-text-editor p {
    margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--zr-sage); text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .zr-hex .elementor-icon i { font-size: 22px; }
}

/* -------------------------------------------------------------------------
   5. Boomlijn — horizon, geen losse groene plaat
   Het bronbeeld is transparant bovenin en wordt vanaf ~54% massief groen.
   We tonen precies dat bovenste deel, zodat de bomen op de sectiegrens
   "staan" in plaats van af te breken in het volgende (lichte) blok.
   ---------------------------------------------------------------------- */
.zr-treeline {
  position: relative;
  /* toppen mogen bóven de wrapper uitsteken (sectie erboven is ook zand en
     de bovenkant van het beeld is transparant) — alleen zijwaarts knippen,
     anders geeft de parallax-scale horizontale overflow */
  overflow-x: clip;
  overflow-y: visible;
  /* 100vw * (815/2560) * 0,545 — houdt de horizon exact op de onderrand.
     GEEN max-height: elke cap breekt de uitsnede (cover schaalt op breedte,
     dus op brede schermen viel de horizon dan buiten het venster en werden
     de bomen halverwege afgekapt). De wrapper is iets lager dan het beeld
     (14.4 vs 17.2vw): het beeld hangt aan de onderrand, dus het snijdt de
     toppen van de hoogste dennen af — dat maakt de lijn rustiger. */
  height: 14.4vw;
  min-height: 84px;
  background: var(--zr-sand);
}
.zr-treeline .elementor-widget-image,
.zr-treeline .elementor-widget-container { height: 100%; }
/* Beeld even hoog als de wrapper => de parallax-JS zet zichzelf uit
   (speling = 0) en de uitsnede blijft altijd kloppen. */
.zr-treeline img {
  /* beeldhoogte volgt de horizonformule (17.2vw), onderrand vastgepind:
     de wrapper (14.4vw) knipt zo alleen bovenaan iets weg */
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 17.2vw; min-height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
  pointer-events: none; /* steekt boven de sectie uit; mag geen kliks vangen */
}
/* Mobiel: op 390px is 17.2vw maar ~67px — bomen onleesbaar klein. Beeld
   180% breed (zijkanten weggeknipt door overflow-x:clip), hoogte volgt de
   horizonformule op die breedte (0.172 × 180% = 31vw), onderrand gepind. */
@media (max-width: 767px) {
  .zr-treeline { height: 20vw; min-height: 78px; }
  .zr-treeline img { width: 180vw !important; max-width: none !important; left: -40vw; height: 31vw; min-height: 0; }
}

/* -------------------------------------------------------------------------
   6. Aanbod — filters + rijen
   ---------------------------------------------------------------------- */
.zr-filter {
  max-width: 100%;
  overflow: hidden;
}
.zr-filter .e-filter,
.zr-filter .elementor-widget-taxonomy-filter,
.zr-filter .elementor-widget-container {
  max-width: 100%;
  flex-wrap: wrap !important;
  display: flex !important;
  gap: 8px;
}
.zr-filter .e-filter-item {
  font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 50px; border: 1px solid rgba(0, 0, 0, .2);
  color: rgba(0, 0, 0, .87); background: transparent; cursor: pointer;
  white-space: nowrap; flex: 0 0 auto;
  transition: background-color .25s ease, color .25s ease, transform .2s ease;
}
.zr-filter .e-filter-item:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.zr-filter .e-filter-item[aria-pressed="true"] { background: var(--zr-pine); color: #fff; border-color: var(--zr-pine); }

.zr-row { border-top: 1px solid rgba(0, 0, 0, .10); }
.zr-row:hover { background: rgba(30, 57, 50, .03); }
.zr-thumbwrap { position: relative; }
.zr-fotobadge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(20, 36, 30, .82); color: #fff;
  font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 50px;
  position: absolute; left: 8px; bottom: 8px; pointer-events: none;
}
.zr-meerinfo a {
  color: var(--zr-leaf) !important; font-size: 13px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;
}
.zr-badge-vrij, .zr-badge-bezet {
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 50px;
  display: inline-block; white-space: nowrap;
}
.zr-badge-vrij  { background: var(--zr-sage); color: var(--zr-pine); }
.zr-badge-bezet {
  background: #ebe6da; color: var(--zr-pine);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22); display: none;
}

/* "Tijdelijk bezet" — foto/info/prijs ontkleurd, contactknop blijft groen */
:is(.zr-bezet, .e-loop-item.outofstock) .zr-dim,
:is(.zr-bezet, .e-loop-item.outofstock) .elementor-widget-image img,
:is(.zr-bezet, .e-loop-item.outofstock) .zr-price { filter: grayscale(1); opacity: .55; }
:is(.zr-bezet, .e-loop-item.outofstock) .zr-badge-vrij  { display: none; }
:is(.zr-bezet, .e-loop-item.outofstock) .zr-badge-bezet { display: inline-block; }
:is(.zr-bezet, .e-loop-item.outofstock) .elementor-widget-button { filter: none; opacity: 1; }
/* Logo's (header/footer/mobiele unitbar) nooit ontkleuren op een bezette
   productpagina — alleen foto/prijs van de unit zelf mag grijs. */
body.zr-bezet [data-elementor-type="header"] .elementor-widget-image img,
body.zr-bezet [data-elementor-type="footer"] .elementor-widget-image img,
body.zr-bezet .zr-unitbar img { filter: none !important; opacity: 1 !important; }

@media (max-width: 767px) {
  .zr-row { padding-block: 18px !important; }
  .zr-row .zr-thumbwrap img { height: 180px !important; }
}

/* -------------------------------------------------------------------------
   7. Inklapblok (offertetool) — eigen toggle, geen Elementor-tabs
   ---------------------------------------------------------------------- */
.zr-collapse {
  background: var(--zr-cream);
  border-radius: 16px;
  overflow: hidden;
}
.zr-collapse-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 28px; cursor: pointer; user-select: none;
}
.zr-collapse-head:focus-visible { outline: 2px solid var(--zr-leaf); outline-offset: -3px; }
.zr-collapse-head .zr-collapse-titel {
  font-family: "DM Sans", sans-serif; font-size: 17px; font-weight: 600; color: var(--zr-pine);
}
.zr-collapse-head .zr-collapse-sub { font-size: 14px; color: rgba(0, 0, 0, .58); margin-top: 3px; }
.zr-collapse-teken {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  background: var(--zr-leaf); color: #fff;
  position: relative;
  margin-left: auto;
}
/* Plus/min met CSS-balken i.p.v. een tekst-"+"-glyph: die zit door de font-metrics
   (baseline/ascent) altijd iets te hoog in de cirkel, ook met place-items:center —
   place-items centreert de tekstbox, niet de inkt. Twee balken zijn wél exact
   gecentreerd (top/left 50% + translate). */
.zr-collapse-teken::before,
.zr-collapse-teken::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: currentColor; border-radius: 2px;
}
.zr-collapse-teken::before { width: 13px; height: 2px; transform: translate(-50%, -50%); }
.zr-collapse-teken::after  { width: 2px; height: 13px; transform: translate(-50%, -50%); transition: opacity .2s ease; }
.zr-collapse.zr-open .zr-collapse-teken::after { opacity: 0; } /* open = minteken */
/* Icoonblok links in de kop (zoals het ontwerp) */
.zr-collapse-icon {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px;
  background: var(--zr-mist); color: var(--zr-pine);
  display: grid; place-items: center;
}
.zr-collapse-head { gap: 20px; }
/* Offertetool-blok als volle-breedte rij ín het aanbodoverzicht, na de laatste
   container. De node wordt bij het filteren bewaard (zie zesruit.js) zodat de
   AJAX-swap van de loop-container hem niet vernietigt. */
.elementor-loop-container > .zr-collapse { grid-column: 1 / -1; margin: 22px 0; width: 100%; }

.zr-collapse-body { display: none !important; }
.zr-collapse.zr-open .zr-collapse-body { display: flex !important; }
.zr-collapse-body .zr-collapse-inner { padding: 0 28px 26px; }

/* -------------------------------------------------------------------------
   8. Nieuwsbriefband
   ---------------------------------------------------------------------- */
.zr-nieuwsbrief .elementor-form {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 10px;
}
.zr-nieuwsbrief .elementor-form-fields-wrapper {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; width: 100%;
}
.zr-nieuwsbrief .elementor-field-group { padding: 0 !important; margin: 0 !important; flex: 1 1 auto; min-width: 0; }
.zr-nieuwsbrief .elementor-field-group.elementor-field-type-submit { flex: 0 0 auto; }
.zr-nieuwsbrief input[type="email"] {
  width: 100%; height: 46px;
  border: none !important; border-radius: 50px !important;
  padding: 0 18px !important;
  font-family: "DM Sans", sans-serif !important; font-size: 14px !important;
  background: #fff; color: rgba(0, 0, 0, .87);
}
.zr-nieuwsbrief .elementor-button {
  height: 46px; min-height: 46px; border-radius: 50px;
  background: rgba(255, 255, 255, .92); color: var(--zr-pine) !important;
  font-weight: 700; font-size: 14px; padding: 0 24px;
  white-space: nowrap; width: auto;
  display: inline-flex; align-items: center; justify-content: center;
}
.zr-nieuwsbrief .elementor-button:hover { background: #fff; }
@media (max-width: 767px) {
  .zr-nieuwsbrief .elementor-form,
  .zr-nieuwsbrief .elementor-form-fields-wrapper { flex-wrap: wrap; }
  .zr-nieuwsbrief .elementor-field-group,
  .zr-nieuwsbrief .elementor-field-group.elementor-field-type-submit { flex: 1 1 100%; }
  .zr-nieuwsbrief .elementor-button { width: 100%; }
}

/* -------------------------------------------------------------------------
   9. Formulieren + knoppen algemeen
   ---------------------------------------------------------------------- */
.elementor-field-textual {
  border: 1px solid rgba(0, 0, 0, .2) !important;
  border-radius: 8px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 15px !important;
}
.elementor-field-textual:focus {
  border-color: var(--zr-leaf) !important;
  box-shadow: 0 0 0 3px rgba(62, 122, 82, .15);
}
.elementor-button { transition: background-color .2s ease, transform .2s ease, filter .3s ease; }
.elementor-button:active { transform: scale(.95); }

/* -------------------------------------------------------------------------
   10. Kaarten
   ---------------------------------------------------------------------- */
.zr-card-lift { transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease; }
.zr-card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 6px rgba(20, 36, 30, .10), 0 20px 40px rgba(20, 36, 30, .16);
}

/* FAQ */
.zr-faq .elementor-accordion-item {
  background: #fff; border-radius: 12px; margin-bottom: 12px; border: none !important;
  box-shadow: 0 0 .5px rgba(0, 0, 0, .14), 0 1px 1px rgba(0, 0, 0, .24); overflow: hidden;
}
.zr-faq .elementor-tab-title { padding: 18px 26px; }
.zr-faq .elementor-tab-content { padding: 0 26px 18px; border: none !important; }

/* Video-band — maatvoering staat in §53 */

/* -------------------------------------------------------------------------
   11. Unit-detailpagina
   ---------------------------------------------------------------------- */
.zr-unit-hero { position: relative; }
.zr-unit-heroimg { position: absolute !important; inset: 0; width: 100% !important; height: 100%; z-index: 0; }
.zr-unit-heroimg img { width: 100%; height: 100%; object-fit: cover; }
.zr-unit-hero > .elementor-widget-text-editor,
.zr-unit-hero .zr-unit-titlecard { position: relative; z-index: 2; }
.zr-unit-titlecard { box-shadow: 0 12px 30px rgba(0, 0, 0, .28); }
.zr-convbar { box-shadow: 0 0 .5px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .12); }

/* Mozaïekgalerij — scherp, vaste verhoudingen */
.zr-prod-gallery .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; }
.zr-prod-gallery .flex-viewport { display: none; }
.zr-prod-gallery .woocommerce-product-gallery__wrapper,
.zr-prod-gallery .flex-control-thumbs {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 12px; margin: 0 !important; padding: 0 !important; list-style: none;
}
.zr-prod-gallery .woocommerce-product-gallery__image,
.zr-prod-gallery .flex-control-thumbs li {
  border-radius: 12px; overflow: hidden; width: auto !important; margin: 0 !important;
  height: 100%; min-height: 0;
}
.zr-prod-gallery .woocommerce-product-gallery__image:first-child,
.zr-prod-gallery .flex-control-thumbs li:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.zr-prod-gallery .woocommerce-product-gallery__image a { display: block; height: 100%; }
.zr-prod-gallery img {
  width: 100%; height: 100% !important; object-fit: cover;
  opacity: 1 !important; cursor: zoom-in;
  image-rendering: auto;
}
.zr-prod-gallery .woocommerce-product-gallery__trigger { z-index: 5; }
/* De fotostrip-/galerij-sectie heeft standaard 40px .e-con-inner-padding
   bovenaan (Elementor-default), waardoor de marge bóven de galerij groter was
   dan eronder. Op álle schermen weghalen; de verticale ruimte regelen we via
   de sectiepadding zelf (§58.4 mobiel, §60 desktop). */
body.single-product .elementor-element-d4fbe72 > .e-con-inner {
  padding-top: 0 !important; padding-bottom: 0 !important;
}
/* Desktop: sectie stond op 8px boven / 40px onder → gelijkgetrokken op 32px. */
@media (min-width: 768px) {
  body.single-product .elementor-element-d4fbe72.zr-prod-gallery {
    padding-top: 32px !important; padding-bottom: 32px !important;
  }
}
@media (max-width: 767px) {
  .zr-prod-gallery .woocommerce-product-gallery__wrapper,
  .zr-prod-gallery .flex-control-thumbs { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
}

.zr-prod-desc p { font-size: 16px; line-height: 1.75; color: rgba(0, 0, 0, .75); }

/* Blokken uit zesruit-unit-blocks.php */
.zr-unit-block { width: 100%; }
.zr-unit-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--zr-leaf); margin-bottom: 6px;
}
.zr-unit-kicker.zr-op-donker { color: rgba(255, 255, 255, .7); }
.zr-unit-h {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(21px, 2vw, 26px); font-weight: 700; letter-spacing: -.015em;
  color: rgba(0, 0, 0, .87); margin: 0 0 22px;
}
.zr-unit-h.zr-op-donker { color: #fff; }

.zr-usp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.zr-usp-card { border: 1px solid rgba(0, 0, 0, .10); border-radius: 12px; padding: 22px; background: #fff; }
.zr-usp-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--zr-sage); color: var(--zr-pine);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.zr-usp-titel { font-size: 17px; font-weight: 700; color: rgba(0, 0, 0, .87); }
.zr-usp-sub { font-size: 14px; color: rgba(0, 0, 0, .58); margin-top: 4px; }
@media (max-width: 1024px) { .zr-usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .zr-usp-grid { grid-template-columns: 1fr; } }

.zr-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.zr-spec-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, .10);
}
.zr-spec-naam { font-size: 15px; color: rgba(0, 0, 0, .58); }
.zr-spec-waarde { font-size: 15px; font-weight: 600; color: rgba(0, 0, 0, .87); text-align: right; }
@media (max-width: 767px) { .zr-spec-grid { grid-template-columns: 1fr; gap: 0; } }

.zr-service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; }
@media (max-width: 900px) { .zr-service-grid { grid-template-columns: 1fr; } }
.zr-service-card {
  background: #fff; border-radius: 12px; padding: 28px;
  box-shadow: 0 0 .5px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .12);
}
.zr-service-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.zr-service-head h4 { margin: 0; font-size: 19px; font-weight: 600; color: rgba(0, 0, 0, .87); }
.zr-service-bedrag { font-size: 15px; font-weight: 700; color: var(--zr-pine); }
.zr-service-bedrag em { font-weight: 400; font-style: normal; color: rgba(0, 0, 0, .58); }
.zr-service-intro { margin: 8px 0 18px; font-size: 14px; color: rgba(0, 0, 0, .58); }
.zr-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.zr-check-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; color: rgba(0, 0, 0, .87);
}
.zr-check-list li::before {
  content: "✓"; color: var(--zr-leaf); font-weight: 800; flex: 0 0 auto;
}
.zr-uitbreiden-card {
  background: var(--zr-pine); color: #fff; border-radius: 12px; padding: 28px;
  display: flex; flex-direction: column;
}
.zr-uitbreiden-card h4 { margin: 0; font-size: 19px; font-weight: 600; }
.zr-uitbreiden-card > p { margin: 8px 0 18px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .7); }
/* Informatieve lijst (géén knoppen): dunne scheidingslijnen + subtiele +-badge
   die aangeeft dat het optionele meerprijs-opties zijn. */
.zr-uitbreiden-items { display: flex; flex-direction: column; }
.zr-uitbreiden-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 2px; font-size: 16px; font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.zr-uitbreiden-item:first-child { border-top: 1px solid rgba(255, 255, 255, .12); }
/* "+" (géén cirkel → geen toggle-uitstraling, géén vinkje → niet "inbegrepen"):
   leest als een optionele toevoeging tegen meerprijs. */
.zr-uitbreiden-item::before {
  content: "+"; flex: 0 0 auto; width: 16px; text-align: center;
  color: var(--zr-honey); font-size: 19px; font-weight: 400; line-height: 1;
}
.zr-uitbreiden-voet,
.zr-uitbreiden-card a.zr-uitbreiden-voet {
  margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 600;
  color: rgba(255, 255, 255, .92) !important; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  width: fit-content; transition: gap .15s, color .15s;
}
.zr-uitbreiden-card a.zr-uitbreiden-voet:hover {
  color: #fff !important; gap: 10px; text-decoration: underline; text-underline-offset: 3px;
}

.zr-locatie-block { width: 100%; }
.zr-locatie-tekst { margin: 0 0 16px; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .72); max-width: 720px; }
.zr-locatie-feiten { display: flex; gap: 28px; flex-wrap: wrap; }
.zr-locatie-feiten span { display: block; font-size: 13px; color: rgba(255, 255, 255, .6); }
.zr-locatie-feiten strong { font-size: 15px; font-weight: 600; color: #fff; }

/* Melding voor ontbrekende inhoud */
.zr-missing {
  background: #fdf6e3; border: 1px dashed var(--zr-honey-brown); border-radius: 10px;
  padding: 14px 18px; font-size: 14px; color: #6b5316; line-height: 1.55;
}
.zr-missing strong { color: #4d3a0d; }
.zr-missing-how { display: block; margin-top: 4px; font-size: 13px; opacity: .85; }
.zr-locatie-block .zr-missing { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .85); }
.zr-locatie-block .zr-missing strong { color: #fff; }

/* -------------------------------------------------------------------------
   12. Footer
   ---------------------------------------------------------------------- */
.zr-footer { background: var(--zr-forest); }
.zr-footer a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.zr-footer a:hover { color: #fff; text-decoration: underline; }
.zr-footer-links p { margin: 0 0 11px; }
.zr-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 20px; margin-top: 36px;
}
@media (max-width: 900px) {
  .zr-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* -------------------------------------------------------------------------
   13. Verticaal ritme — compacter dan het ontwerpraster
   ---------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .zr-sect { padding-block: 56px !important; }
  .zr-sect-tight { padding-block: 40px !important; }
  /* consistente zijmarge op het 1440-raster — óók bij precies 1440px breed */
  .zr-sect, .zr-sect-tight { padding-inline: var(--zr-gutter) !important; }
}
.elementor-element-ca49ab9.zr-sect,
.elementor-element-ca49ab9.zr-sect > .e-con-inner { padding-top: 24px !important; }
@media (max-width: 1024px) {
  .zr-sect, .zr-sect-tight { padding-block: 40px !important; padding-inline: var(--zr-gutter) !important; }
}
@media (max-width: 767px) {
  .zr-sect, .zr-sect-tight { padding-block: 32px !important; }
}

/* -------------------------------------------------------------------------
   14. Offertetool (eigen tool — geen externe licentie nodig)
   ---------------------------------------------------------------------- */
.zr-offertetool { width: 100%; }
.zr-off-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
@media (max-width: 767px) { .zr-off-grid { grid-template-columns: 1fr; } }
.zr-off-veld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.zr-off-veld > span {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(0, 0, 0, .5);
}
.zr-off-veld input, .zr-off-veld select {
  width: 100%; padding: 12px 14px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 8px;
  font-size: 15px; font-family: "DM Sans", sans-serif; color: rgba(0, 0, 0, .87);
  background: #fff; outline: none; box-sizing: border-box;
}
.zr-off-veld input:focus, .zr-off-veld select:focus {
  border-color: var(--zr-leaf);
  box-shadow: 0 0 0 3px rgba(62, 122, 82, .15);
}
.zr-off-bezorg { border: none; margin: 18px 0 0; padding: 0; }
.zr-off-bezorg legend {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(0, 0, 0, .5); padding: 0; margin-bottom: 8px;
}
.zr-off-bezorg label {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: rgba(0, 0, 0, .8); margin-bottom: 6px;
}
.zr-off-bezorg input[type="radio"] { accent-color: var(--zr-leaf); }

.zr-off-totaal {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, .14);
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end;
}
@media (max-width: 767px) { .zr-off-totaal { grid-template-columns: 1fr; } }
.zr-off-regels { display: flex; flex-direction: column; gap: 7px; max-width: 380px; }
.zr-off-regels > div {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 14px; color: rgba(0, 0, 0, .7);
}
.zr-off-regels strong { color: var(--zr-forest); }
.zr-off-regels em { font-style: normal; opacity: .7; }
.zr-off-eind { font-size: 16px !important; color: var(--zr-pine) !important; font-weight: 700; }
.zr-off-eind strong { font-size: 18px; }
.zr-off-knop {
  background: var(--zr-leaf); color: #fff; border: none;
  font-size: 15px; font-weight: 600; padding: 14px 30px; border-radius: 50px;
  cursor: pointer; font-family: "DM Sans", sans-serif; white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.zr-off-knop:hover:not(:disabled) { background: var(--zr-pine); }
.zr-off-knop:active { transform: scale(.95); }
.zr-off-knop:disabled { opacity: .6; cursor: default; }
.zr-off-klein { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: rgba(0, 0, 0, .5); }
.zr-off-melding { margin-top: 12px; font-size: 14px; font-weight: 600; }
.zr-off-melding.zr-ok { color: var(--zr-leaf); }
.zr-off-melding.zr-fout { color: #a33; }

/* Locatieveld + afstandsmelding binnen het bezorgblok */
.zr-off-locatie { margin-top: 14px; max-width: 460px; }
.zr-off-afstand {
  min-height: 18px; font-size: 13px; font-weight: 600;
  color: var(--zr-leaf); margin-top: 2px;
}
.zr-off-afstand.zr-fout { color: #a33; font-weight: 500; }

/* -------------------------------------------------------------------------
   15. Transparante header op de homepage
   ---------------------------------------------------------------------- */
.zr-header-overlay {
  position: absolute !important;
  top: 0; left: 0; right: 0; z-index: 90;
  background: transparent !important;
}
.zr-header-overlay .elementor-nav-menu--main .elementor-nav-menu a {
  color: rgba(255, 255, 255, .85);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14px;
}
.zr-header-overlay .elementor-nav-menu--main .elementor-nav-menu a:hover,
.zr-header-overlay .elementor-nav-menu--main .elementor-item-active { color: #fff; }
.zr-header-overlay .elementor-menu-toggle { color: #fff; }

/* -------------------------------------------------------------------------
   16. Volle-breedte secties: inhoud altijd binnen het 1440-raster
   ---------------------------------------------------------------------- */
.zr-hero > .e-con { max-width: var(--zr-max); margin-inline: auto; width: 100%; }
.zr-hero-inner { max-width: calc(var(--zr-max) - 2 * 64px); margin: 0 auto; }

/* -------------------------------------------------------------------------
   17. Hexagons: maat & inhoud zoals het ontwerp
   ---------------------------------------------------------------------- */
.zr-hex { flex: 0 1 250px; padding: 24px 26px !important; }
.zr-hex .elementor-widget-text-editor p { margin: 0; }

/* -------------------------------------------------------------------------
   18. Kaarten: beeld strak tegen de rand
   ---------------------------------------------------------------------- */
.zr-card-lift { padding: 0 !important; }
.zr-card-lift > .elementor-widget-image,
.zr-card-lift > .elementor-widget-image .elementor-widget-container,
.zr-card-lift > .elementor-widget-image img { width: 100%; display: block; margin: 0; }

/* Locatie-naam in aanbodrij: pin-icoon */
.zr-locname .elementor-heading-title::before {
  content: "";
  display: inline-block; width: 13px; height: 13px; margin-right: 5px;
  vertical-align: -1.5px;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>') center / contain no-repeat;
}

/* -------------------------------------------------------------------------
   19. Filterbar: labels + pills op één regel, sliders eronder
   ---------------------------------------------------------------------- */
.zr-filterbar { row-gap: 10px !important; }
.zr-filterbar .elementor-widget-taxonomy-filter { width: auto !important; max-width: 100%; }
/* Sliders + meta-regel beslaan altijd de volle breedte van de balk */
.zr-filterbar > .elementor-widget-html:has(.zr-sliders) { width: 100% !important; max-width: 100%; flex: 1 1 100%; }
.zr-filterlabel {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(0, 0, 0, .5);
  white-space: nowrap;
}
.zr-filterdivider { width: 1px; height: 24px; background: rgba(0, 0, 0, .12); }

.zr-sliders {
  display: flex; flex-wrap: wrap; gap: 18px 32px; width: 100%;
  border-top: 1px solid rgba(0, 0, 0, .07); padding-top: 14px; margin-top: 4px;
}
.zr-slider { flex: 1 1 240px; min-width: 200px; }
.zr-slider-top {
  display: flex; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: rgba(0, 0, 0, .7); margin-bottom: 6px;
}
.zr-slider-top [data-zr-m2-label], .zr-slider-top [data-zr-prijs-label] { color: var(--zr-pine); font-weight: 700; }
.zr-slider input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%;
  height: 6px; border-radius: 3px; outline: none;
  /* traceerbalk: leaf-groen tot aan de duim (--zr-fill wordt door JS gezet),
     daarna neutraal grijs. Werkt in WebKit én Firefox op de track-achtergrond. */
  background: linear-gradient(to right,
    var(--zr-leaf) 0%, var(--zr-leaf) var(--zr-fill, 0%),
    rgba(0, 0, 0, .10) var(--zr-fill, 0%), rgba(0, 0, 0, .10) 100%);
  transition: background .06s linear;
}
.zr-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--zr-leaf); cursor: pointer; border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.zr-slider input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--zr-leaf); cursor: pointer; border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
/* Firefox: eigen progress-vulling zodat de trace ook daar klopt */
.zr-slider input[type="range"]::-moz-range-progress {
  height: 6px; border-radius: 3px; background: var(--zr-leaf);
}
.zr-slider input[type="range"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(62, 122, 82, .30);
}
.zr-filtermeta {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding-top: 10px; font-size: 14px; font-weight: 600; color: rgba(0, 0, 0, .72);
}
.zr-reset,
button.zr-reset {
  background: none !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; min-height: 0 !important; border-radius: 0 !important;
  cursor: pointer; font-family: "DM Sans", sans-serif;
  font-size: 13px !important; font-weight: 600; color: var(--zr-leaf) !important; opacity: .75;
}
.zr-reset:hover { opacity: 1; text-decoration: underline; }

/* -------------------------------------------------------------------------
   20. Split-kaarten (Locaties): grid — kolommen kunnen nooit instorten
   ---------------------------------------------------------------------- */
.zr-split {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr;
  gap: 0 !important; padding: 0 !important;
  border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 0 .5px rgba(0, 0, 0, .14), 0 1px 1px rgba(0, 0, 0, .24);
}
.zr-split.zr-rev { grid-template-columns: 1fr 1.15fr; }
.zr-split > .e-con { min-width: 0; }
.zr-splitimg { min-height: 380px; }
@media (max-width: 900px) {
  .zr-split, .zr-split.zr-rev { grid-template-columns: 1fr !important; }
  .zr-splitimg { min-height: 220px; order: -1; }
}

/* Duurzaamheidsband: beeldkolom vult altijd de hoogte */
.zr-bandimg { min-height: 380px; }
@media (max-width: 767px) { .zr-bandimg { min-height: 200px; } }

/* -------------------------------------------------------------------------
   21. Containersysteem — definitief (ui-ux-pro-max richtlijnen)
   Breakpoints: 375 / 768 / 1024 / 1440
   ---------------------------------------------------------------------- */
/* Boxed secties: inhoud hard begrensd op het raster */
.e-con-boxed > .e-con-inner {
  max-width: min(var(--zr-max), 100%) !important;
  margin-inline: auto !important;
  width: 100%;
}
/* Volle-breedte secties: directe kindercontainers ook binnen het raster */
.zr-hero > .e-con,
.zr-video > .e-con {
  max-width: var(--zr-max);
  margin-inline: auto;
  width: 100%;
}

/* Aanbodrij = grid: kan structureel niet overlopen of instorten
   kolommen: foto | inhoud | status | prijs | acties */
.zr-row {
  display: grid !important;
  /* vaste kolommen zodat status/prijs/acties in élke rij op dezelfde plek staan */
  grid-template-columns: 180px minmax(0, 1fr) 116px 130px 250px;
  align-items: center;
  gap: 12px 24px;
  width: 100%;
  max-width: 100%;
}
.zr-row .zr-price { text-align: right; justify-self: end; }
.zr-row > .e-con:last-child { justify-self: end; }
.zr-row > .e-con, .zr-row > .elementor-widget { min-width: 0; max-width: 100%; width: auto !important; }
.zr-row .zr-thumbwrap { width: 180px !important; }
@media (max-width: 1024px) {
  .zr-row { grid-template-columns: 140px minmax(0, 1fr) auto; }
  .zr-row .zr-thumbwrap { width: 140px !important; }
  .zr-row .zr-price { grid-column: 3; }
}
@media (max-width: 767px) {
  .zr-row { grid-template-columns: 110px minmax(0, 1fr); gap: 10px 14px; }
  .zr-row .zr-thumbwrap { width: 110px !important; grid-row: span 2; }
  .zr-row .zr-thumbwrap img { height: 80px !important; }
  .zr-row .zr-price { grid-column: 2; justify-self: start; }
  .zr-row > *:nth-child(n+3) { grid-column: 2; justify-self: start; }
}

/* -------------------------------------------------------------------------
   22. Toegankelijkheid & interactie (WCAG AA)
   ---------------------------------------------------------------------- */
a, button, [role="button"], .e-filter-item, .zr-collapse-head,
input[type="range"], select, .elementor-button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--zr-leaf) !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Fotobadge: SVG-icoon (geen emoji) */
.zr-fotobadge svg { flex: 0 0 auto; }

/* -------------------------------------------------------------------------
   23. Systeemfix: geneste containers mogen krimpen in een flex-rij.
   Elementor geeft kinderen width:100% zonder shrink -> kolommen liepen
   over hun ouder heen (afgekapt door border-radius). Dit herstelt dat overal.
   ---------------------------------------------------------------------- */
.e-con .e-con.e-child { flex-shrink: 1; }

/* Nieuwsbrief: e-mailveld mag nooit dichtklappen */
.zr-nieuwsbrief .elementor-field-group.elementor-field-type-email { flex: 1 1 240px; min-width: 200px; }

/* Scroll-cue verankeren aan de hero (widget-wrapper is gepositioneerd) */
.zr-hero .elementor-widget-html { position: static; }
/* Gecentreerd ín de statbalk: die is 56px hoog en zit onderaan de hero */
.zr-scrollcue { bottom: 15px; }

/* Inklapblok: écht dicht als het dicht is */
.zr-collapse-inner { padding-top: 4px; }

/* Boomlijn-parallax (JS zet translateY op het beeld) */
.zr-treeline img { will-change: transform; }

/* Beeldkolommen houden hun vaste aandeel; tekstkolom vult de rest */
.zr-bandimg { flex: 0 0 40% !important; }
.zr-bandimg + .e-con { flex: 1 1 0% !important; }

/* Kenmerken-chips in de aanbodrijen */
.zr-kenmerken { display: flex; flex-wrap: wrap; gap: 6px; }
.zr-chip-feature {
  font-size: 12px; font-weight: 600; color: rgba(0, 0, 0, .72);
  background: var(--zr-ceramic); padding: 4px 11px; border-radius: 7px;
  display: inline-block; white-space: nowrap;
}

/* Band met beeldkolom: geen binnenrand rond het beeld */
.e-con:has(> .zr-bandimg) { padding: 0 !important; }

/* -------------------------------------------------------------------------
   24. Conversiebalk unitpagina — één rij, overlapt de hero (ontwerp)
   ---------------------------------------------------------------------- */
.zr-convbar {
  background: #fff; border-radius: 14px;
  padding: 22px 28px !important;
  margin-top: -60px !important; position: relative; z-index: 10;
}
.zr-cb { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; width: 100%; }
.zr-cb-label {
  font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--zr-leaf);
}
.zr-cb-waarde-rij { display: flex; align-items: baseline; gap: 7px; }
.zr-cb-prijs {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--zr-pine);
}
.zr-cb-prijs.zr-cb-aanvraag { font-size: 24px; }
.zr-cb-eenheid { font-size: 14px; color: rgba(0, 0, 0, .58); }
.zr-cb-sublabel { font-size: 13px; color: rgba(0, 0, 0, .58); }
.zr-cb-waarde { font-size: 16px; font-weight: 700; color: rgba(0, 0, 0, .87); }
.zr-cb-sep { width: 1px; height: 44px; background: rgba(0, 0, 0, .12); flex: 0 0 auto; }
.zr-cb-knop {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--zr-leaf); color: #fff !important;
  font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  padding: 14px 26px; border-radius: 50px; text-decoration: none !important;
  white-space: nowrap; transition: background .2s ease, transform .2s ease;
}
.zr-cb-knop:hover { background: var(--zr-pine); }
.zr-cb-knop:active { transform: scale(.96); }
/* "Tijdelijk bezet"-pil in de conversiebalk, direct naast de contactknop */
.zr-cb-bezet {
  margin-left: auto; align-self: center;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--zr-honey); color: var(--zr-pine);
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  padding: 7px 14px; border-radius: 50px; white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
}
.zr-cb-bezet::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--zr-pine); flex: 0 0 auto;
}
.zr-cb-bezet + .zr-cb-knop { margin-left: 16px; }
@media (max-width: 767px) {
  .zr-convbar { margin-top: -34px !important; padding: 18px 20px !important; }
  .zr-cb { gap: 14px 20px; }
  .zr-cb-sep { display: none; }
  .zr-cb-hoofd { flex: 1 1 100%; }
  .zr-cb-knop { margin-left: 0; width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------------------
   25. Vergelijkbaar aanbod (unitpagina)
   ---------------------------------------------------------------------- */
.zr-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.zr-related-card {
  background: #fff; border: 1px solid rgba(0, 0, 0, .10); border-radius: 12px;
  overflow: hidden; text-decoration: none !important;
  display: flex; flex-direction: column;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.zr-related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(20, 36, 30, .08), 0 16px 32px rgba(20, 36, 30, .14);
}
.zr-related-img { display: block; height: 170px; background: var(--zr-ceramic); }
.zr-related-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zr-related-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 5px; }
.zr-related-titel { font-size: 16px; font-weight: 700; color: rgba(0, 0, 0, .87); }
.zr-related-meta { font-size: 13px; color: rgba(0, 0, 0, .58); }
.zr-related-voet { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.zr-related-prijs { font-size: 16px; font-weight: 800; color: var(--zr-pine); }
.zr-related-prijs em { font-style: normal; font-size: 12px; font-weight: 500; color: rgba(0, 0, 0, .58); }
.zr-related-link { font-size: 13px; font-weight: 600; color: var(--zr-leaf); white-space: nowrap; }
@media (max-width: 900px) { .zr-related-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   26. Voorlopige (verzonnen) inhoud — opvallend, zodat de eigenaar het ziet
   ---------------------------------------------------------------------- */
.zr-vul { color: var(--zr-honey-brown) !important; }
.zr-vul::after { content: " ✎"; font-size: .8em; opacity: .75; }

/* -------------------------------------------------------------------------
   27. Aanbodrij op mobiel — gestapelde kaart zoals het mobiele ontwerp
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  .zr-row {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
    padding-block: 22px !important;
    align-items: center;
  }
  .zr-row .zr-thumbwrap { width: 100% !important; grid-column: 1 / -1; grid-row: auto; }
  .zr-row .zr-thumbwrap img { width: 100%; height: 190px !important; object-fit: cover; border-radius: 12px; }
  .zr-row > .e-con, .zr-row > .elementor-widget { grid-column: 1 / -1; justify-self: stretch; }
  .zr-row .zr-price { grid-column: 1; justify-self: start; font-size: 17px; align-self: center; }
  .zr-row .zr-price .woocommerce-Price-amount, .zr-row .zr-price bdi { white-space: nowrap; }
  .zr-row > .e-con:last-child { grid-column: 2; grid-row: auto; justify-self: end; }
  .zr-row .zr-price, .zr-row > .e-con:last-child { margin-top: 4px; }
  .zr-meerinfo a { font-size: 14px; }
}

/* -------------------------------------------------------------------------
   28. Mobiele header — één rij: logo links, hamburger rechts
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Hero mobiel: inhoud stroomt gewoon (bodem-pinning brak op kleine
     telefoons: knoppen vielen dan van het beeld af) */
  .zr-hero {
    padding-top: 96px !important;
    padding-bottom: 40px !important;
    min-height: 0 !important;
    display: flex !important; flex-direction: column !important;
  }
  /* Statbalk verbergen op mobiel */
  .zr-hero-stats { display: none !important; }
  /* CTA's naast elkaar (Elementor zet containers mobiel standaard op kolom) */
  .zr-hero .e-con:has(> .elementor-widget-button) {
    flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center; gap: 12px !important;
    margin-top: 26px;
  }
  .zr-hero .elementor-widget-button { width: auto !important; flex: 0 0 auto !important; }
  .zr-hero .elementor-widget-button .elementor-button { white-space: nowrap; padding: 13px 22px; font-size: 14.5px; }
  /* Header: logo en hamburger op dezelfde hoogte */
  .zr-header-overlay .e-con-inner {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
  }
  /* Hamburger altijd zichtbaar en aanklikbaar */
  .elementor-menu-toggle { width: 40px; height: 40px; }
  .zr-header-overlay .elementor-menu-toggle { color: #fff; background: rgba(20, 36, 30, .6); border-radius: 8px; }
  .zr-header-overlay .elementor-menu-toggle svg { fill: #fff !important; }
  /* Navigatiewidget mag niet groeien tot een eigen regel */
  [data-elementor-type="header"] .elementor-widget-nav-menu { width: auto !important; max-width: none; flex: 0 0 auto !important; }
  [data-elementor-type="header"] .elementor-widget-image { flex: 0 0 auto !important; }
}
/* Uitklapmenu: rustige donkere overlay met ruime tikdoelen */
.elementor-nav-menu--dropdown.elementor-nav-menu__container { border-radius: 0 0 12px 12px; }
.elementor-nav-menu--dropdown .elementor-item {
  padding: 14px 20px !important; font-size: 17px !important;
  font-family: "Bricolage Grotesque", sans-serif !important; font-weight: 600;
}

/* -------------------------------------------------------------------------
   30. Figuurbeelden op tekstpagina's — vullen hun kolom, vaste stijl
   ---------------------------------------------------------------------- */
.zr-figuur img {
  width: 100% !important;
  height: 100%;
  min-height: 340px;
  max-height: 480px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
@media (max-width: 767px) { .zr-figuur img { min-height: 220px; max-height: 260px; } }

/* -------------------------------------------------------------------------
   31. Locatieblok met plattegrond/beeld (unitpagina)
   ---------------------------------------------------------------------- */
.zr-locatie-met-beeld {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
}
.zr-locatie-beeld { margin: 0; position: relative; }
.zr-locatie-beeld img {
  width: 100%; height: 100%; max-height: 420px; object-fit: cover;
  border-radius: 12px; display: block; background: #fff;
}
.zr-locatie-beeld figcaption {
  position: absolute; left: 14px; top: 14px;
  background: rgba(255, 255, 255, .92); color: var(--zr-pine);
  font-size: 13px; font-weight: 700; padding: 6px 13px; border-radius: 50px;
}
@media (max-width: 900px) { .zr-locatie-met-beeld { grid-template-columns: 1fr; gap: 24px; } }

/* -------------------------------------------------------------------------
   32. Veelgestelde vragen (unitpagina) — native <details>
   ---------------------------------------------------------------------- */
.zr-unit-faq { display: flex; flex-direction: column; gap: 12px; }
.zr-faq-item {
  background: #fff; border-radius: 12px;
  box-shadow: 0 0 .5px rgba(0, 0, 0, .14), 0 1px 1px rgba(0, 0, 0, .24);
}
.zr-faq-item summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 22px; font-size: 16px; font-weight: 600; color: rgba(0, 0, 0, .87);
}
.zr-faq-item summary::-webkit-details-marker { display: none; }
.zr-faq-teken { flex: 0 0 auto; color: var(--zr-leaf); font-size: 20px; line-height: 1; }
.zr-faq-teken::before { content: "+"; }
.zr-faq-item[open] .zr-faq-teken::before { content: "–"; }
.zr-faq-item > p { margin: 0; padding: 0 22px 18px; font-size: 15px; line-height: 1.65; color: rgba(0, 0, 0, .65); }

/* -------------------------------------------------------------------------
   33. "Zo werkt het" strip (homepage)
   ---------------------------------------------------------------------- */
.zr-stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; }
.zr-stap {
  background: #fff; border-radius: 12px; padding: 24px 26px;
  box-shadow: 0 0 .5px rgba(0, 0, 0, .14), 0 1px 1px rgba(0, 0, 0, .24);
  position: relative;
}
.zr-stap-nr {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px; font-weight: 800; color: #fff;
  background: var(--zr-leaf); width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 12px;
}
.zr-stap h4 { margin: 0 0 5px; font-size: 17px; font-weight: 700; color: rgba(0, 0, 0, .87); }
.zr-stap p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(0, 0, 0, .58); }
@media (max-width: 767px) { .zr-stappen { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   34. Tijdlijn (Over ons)
   ---------------------------------------------------------------------- */
.zr-tijdlijn { display: flex; flex-direction: column; gap: 0; width: 100%; max-width: 720px; }
.zr-mijlpaal { display: grid; grid-template-columns: 86px 22px 1fr; gap: 0 18px; }
.zr-mijlpaal-jaar {
  font-family: "IBM Plex Mono", monospace; font-size: 14px; font-weight: 600;
  color: var(--zr-honey-brown); text-align: right; padding-top: 2px;
}
.zr-mijlpaal-as { position: relative; }
.zr-mijlpaal-as::before {
  content: ""; position: absolute; left: 50%; top: 26px; bottom: -6px;
  width: 2px; transform: translateX(-50%); background: rgba(30, 64, 51, .18);
}
.zr-mijlpaal:last-child .zr-mijlpaal-as::before { display: none; }
.zr-mijlpaal-as::after {
  content: ""; position: absolute; left: 50%; top: 6px; width: 12px; height: 12px;
  transform: translateX(-50%);
  background: var(--zr-leaf);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.zr-mijlpaal-body { padding-bottom: 30px; }
.zr-mijlpaal-body h4 { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: rgba(0, 0, 0, .87); }
.zr-mijlpaal-body p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(0, 0, 0, .6); }
@media (max-width: 600px) { .zr-mijlpaal { grid-template-columns: 56px 18px 1fr; gap: 0 12px; } }

/* -------------------------------------------------------------------------
   35. Fotostrip (MOB Zwijnsbergen op Locaties)
   ---------------------------------------------------------------------- */
.zr-fotostrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.zr-fotostrip img {
  width: 100%; height: 190px; object-fit: cover; border-radius: 12px; display: block;
}
@media (max-width: 767px) {
  .zr-fotostrip { grid-template-columns: repeat(2, 1fr); }
  .zr-fotostrip img { height: 130px; }
  .zr-fotostrip a:nth-child(3) { display: none; }
}

/* -------------------------------------------------------------------------
   36. Hexagons: korte subtekst op mobiel (ontwerpkopie)
   ---------------------------------------------------------------------- */
.zr-hex .zr-kort { display: none; }
@media (max-width: 767px) {
  .zr-hex .zr-lang { display: none; }
  .zr-hex .zr-kort { display: inline; }
}

/* -------------------------------------------------------------------------
   37. Aanbodrij mobiel: compacte knoplabels (Info / Aanvragen)
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  .zr-row .zr-meerinfo a { font-size: 0; text-decoration: none; }
  .zr-row .zr-meerinfo a::after {
    content: "Info"; font-size: 14px; font-weight: 700; color: var(--zr-leaf);
    border: 1px solid rgba(62, 122, 82, .4); border-radius: 50px; padding: 10px 20px;
    display: inline-block;
  }
  .zr-row .elementor-button .elementor-button-text { font-size: 0; }
  .zr-row .elementor-button .elementor-button-text::after { content: "Aanvragen"; font-size: 14px; }
}

/* -------------------------------------------------------------------------
   38. Mobiel uitklapmenu — VOLLEDIG SCHERM overlay in huisstijl
   (zoals het mobiele ontwerp: donkergroen vlak, grote nav-items). Elementor
   toont het menu standaard als een klein doosje onder de toggle; dat overlapte
   de hero. We maken er een vaste fullscreen-laag van.
   ---------------------------------------------------------------------- */
nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important; max-width: none !important;
  margin: 0 !important;
  background: var(--zr-forest) !important;
  border-radius: 0 !important;
  padding: 76px 22px 40px !important;
  overflow-y: auto;
  z-index: 90;
  top: 0 !important; left: 0 !important;
  box-shadow: none !important;
  /* flexkolom zodat de bel-CTA met margin-top:auto onderaan hangt */
  display: flex; flex-direction: column;
}
nav.elementor-nav-menu--dropdown[aria-hidden="true"],
nav.elementor-nav-menu--dropdown[style*="display: none"] { display: none !important; }
.elementor-nav-menu--dropdown .elementor-nav-menu {
  display: flex; flex-direction: column; gap: 2px;
  /* de UL krimpt anders tot fit-content en centreert (margin auto) */
  width: 100% !important; margin: 0 !important;
}
.elementor-nav-menu--dropdown .elementor-item,
.elementor-nav-menu--dropdown a.elementor-item {
  color: rgba(255, 255, 255, .9) !important;
  background: transparent !important;
  padding: 16px 2px !important;
  font-family: "Bricolage Grotesque", sans-serif !important;
  font-size: 28px !important; font-weight: 700; letter-spacing: -.015em;
  line-height: 1.1 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
.elementor-nav-menu--dropdown a.elementor-item:hover {
  color: #fff !important;
  background: transparent !important;
}
/* De hamburger/X-toggle moet bóven de overlay blijven zodat je kunt sluiten,
   en het logo linksboven blijft zichtbaar op het donkere vlak. */
[data-elementor-type="header"] .elementor-menu-toggle { z-index: 95; position: relative; }
[data-elementor-type="header"] .elementor-widget-image { z-index: 95; position: relative; }
/* Toggle wordt een witte X als het menu open is */
.elementor-menu-toggle.elementor-active svg,
.elementor-menu-toggle[aria-expanded="true"] svg { fill: #fff !important; stroke: #fff !important; }
/* Header-logo wit zolang het fullscreen-menu open is (leesbaar op donkergroen) */
body.zr-menu-open [data-elementor-type="header"] .elementor-widget-image img {
  filter: brightness(0) invert(1);
}
/* Scroll-lock: de pagina onder het menu mag niet meescrollen — anders scroll
   je het (absoluut gepositioneerde) logo/kruis uit beeld. Het scrollende
   element is <html>, dus die moet óók dicht (via :has). */
body.zr-menu-open { overflow: hidden; }
html:has(body.zr-menu-open) { overflow: hidden; }
body.zr-menu-open [data-elementor-type="header"] {
  position: fixed !important; top: 0; left: 0; right: 0; z-index: 95;
}
/* Telefoon-CTA onderaan het open menu (JS voegt hem toe) */
.zr-menu-bel {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: auto;           /* tegen de onderkant van de overlay */
  flex: 0 0 auto;
  background: var(--zr-leaf); color: #fff !important;
  font-family: "DM Sans", sans-serif; font-size: 16px; font-weight: 600;
  padding: 16px; border-radius: 50px; text-decoration: none !important;
}
.zr-menu-bel:active { transform: scale(.97); }

/* -------------------------------------------------------------------------
   39. Aanbodrij: elk deel in zijn EIGEN kolom — ook als de prijs ontbreekt
   ---------------------------------------------------------------------- */
@media (min-width: 768px) {
  .zr-row > *:nth-child(1) { grid-column: 1; grid-row: 1; }
  .zr-row > *:nth-child(2) { grid-column: 2; grid-row: 1; }
  .zr-row > *:has(.zr-badge-vrij), .zr-row > *:has(.zr-badge-bezet) { grid-column: 3; grid-row: 1; justify-self: start; }
  .zr-row > .zr-price { grid-column: 4; grid-row: 1; }
  .zr-row > .e-con:last-child { grid-column: 5; grid-row: 1; }
}
/* Prijs zoals het ontwerp: €2.980 met kleine eenheid, geen ",00" of "excl. BTW" */
.zr-row .zr-price .woocommerce-Price-amount { font-weight: 800; color: var(--zr-pine); }
.zr-price .woocommerce-price-suffix { font-size: 12px; font-weight: 500; color: rgba(0, 0, 0, .58); }

/* Voorbeeldprijs (geen echte prijs bekend) — honingbruin, met potlood-markering
   zoals de rest van de placeholder-inhoud. */
.zr-price-sample {
  color: var(--zr-honey-brown) !important;
  font-weight: 800; white-space: nowrap;
}
.zr-price-sample::after { content: " ✎"; font-size: .7em; opacity: .7; }
.zr-price-sample .woocommerce-price-suffix { color: var(--zr-honey-brown); opacity: .8; }

/* Alternatief als de voorbeeldprijzen uitstaan (optie zesruit_voorbeeldprijzen = 0):
   nette, ingetogen "Prijs op aanvraag" op dezelfde plek. */
.zr-price-aanvraag {
  color: var(--zr-pine); font-weight: 700; font-size: .82em;
  white-space: nowrap; opacity: .82;
}

/* -------------------------------------------------------------------------
   40. "Zo werkt het" — hexagonnummers + stippellijn, minder braaf
   ---------------------------------------------------------------------- */
.zr-stappen { position: relative; }
.zr-stappen::before {
  content: ""; position: absolute; top: 46px; left: 10%; right: 10%;
  border-top: 2px dashed rgba(30, 64, 51, .18); z-index: 0;
}
.zr-stap { position: relative; z-index: 1; padding: 26px 28px 28px; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.zr-stap:hover { transform: translateY(-4px); box-shadow: 0 2px 6px rgba(20,36,30,.08), 0 14px 28px rgba(20,36,30,.12); }
.zr-stap-nr {
  width: 40px; height: 38px; border-radius: 0;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: var(--zr-pine); box-shadow: inset 0 0 0 3px var(--zr-moss);
  font-size: 16px; margin-bottom: 14px;
}
.zr-stap h4 { font-family: "Bricolage Grotesque", sans-serif; font-size: 18px; }
.zr-stap p { font-size: 14.5px; }
@media (max-width: 767px) { .zr-stappen::before { display: none; } }

/* -------------------------------------------------------------------------
   41. Unitgalerij: maximaal 2 rijen (1 groot + 4 klein), rest achter
   "+N · Alle foto's" — zoals het ontwerp
   ---------------------------------------------------------------------- */
.zr-prod-gallery .woocommerce-product-gallery__wrapper,
.zr-prod-gallery .flex-control-thumbs { grid-auto-rows: 170px; }
.zr-prod-gallery .woocommerce-product-gallery__image:nth-child(n+6),
.zr-prod-gallery .flex-control-thumbs li:nth-child(n+6) { display: none !important; }
.zr-prod-gallery .woocommerce-product-gallery__image:nth-child(5),
.zr-prod-gallery .flex-control-thumbs li:nth-child(5) { position: relative; }
.zr-meerfotos {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(30, 57, 50, .55); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  font-size: 14px; font-weight: 700; pointer-events: none;
}
@media (max-width: 767px) {
  .zr-prod-gallery .woocommerce-product-gallery__wrapper,
  .zr-prod-gallery .flex-control-thumbs { grid-auto-rows: 120px; }
  .zr-prod-gallery .woocommerce-product-gallery__image:nth-child(n+5),
  .zr-prod-gallery .flex-control-thumbs li:nth-child(n+5) { display: none !important; }
}

/* Conversiebalk: shortcode-widget over de volle breedte -> CTA écht rechts */
.zr-convbar .elementor-widget-shortcode { width: 100% !important; }

/* -------------------------------------------------------------------------
   42. Footer — compact, zoals het ontwerp
   ---------------------------------------------------------------------- */
.zr-foot-contact { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.zr-foot-contact a {
  display: inline-flex; align-items: center; gap: 9px;
  color: #fff !important; font-size: 14px; text-decoration: none;
}
.zr-foot-contact a:hover { text-decoration: underline; }
.zr-foot-contact .zr-foot-adres { color: rgba(255, 255, 255, .7); font-size: 14px; }
.zr-foot-onder {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  margin-top: 40px; width: 100%;
}
.zr-foot-onder img { height: 40px; width: auto; }
.zr-foot-onder p { margin: 0; font-size: 12px; color: rgba(255, 255, 255, .45); text-align: center; }
.zr-foot-onder a { color: rgba(255, 255, 255, .45); text-decoration: none; }
.zr-foot-onder a:hover { color: rgba(255, 255, 255, .75); text-decoration: underline; }
@media (max-width: 767px) {
  .zr-foot-contact { align-items: flex-start; }
}

/* -------------------------------------------------------------------------
   43. Unitpagina compacter — lagere hero, kleinere titelkaart, strakker ritme
   ---------------------------------------------------------------------- */
.zr-unit-hero { min-height: 400px !important; height: 400px; }
.zr-unit-titlecard { padding: 20px 26px !important; max-width: 540px; }
.zr-unit-titlecard .elementor-heading-title:first-of-type,
.zr-unit-titlecard h1.elementor-heading-title { font-size: clamp(24px, 2.6vw, 38px) !important; line-height: 1.08 !important; }
body.single-product .zr-sect { padding-block: 44px !important; }
body.single-product .zr-sect-tight { padding-block: 26px !important; }
@media (max-width: 767px) {
  .zr-unit-hero { min-height: 280px !important; height: 280px; }
  body.single-product .zr-sect { padding-block: 32px !important; }
}

/* Aanbodrij mobiel: "Meer informatie" écht vervangen door de Info-pil */
@media (max-width: 767px) {
  .zr-row .zr-meerinfo a { font-size: 0 !important; line-height: 0; }
}

/* -------------------------------------------------------------------------
   44. Unithero: beschikbaarheidsbadge linksboven (zoals het ontwerp)
   ---------------------------------------------------------------------- */
.zr-unit-hero > .elementor-widget-text-editor {
  position: absolute; top: 24px; left: 40px; z-index: 3;
  width: auto !important; margin: 0 !important;
}
@media (max-width: 767px) {
  .zr-unit-hero > .elementor-widget-text-editor { top: 14px; left: 14px; }
}

/* Galerijtegels openen de lichtbak; het "+N"-label is klikbaar */
.zr-meerfotos { pointer-events: auto; cursor: pointer; }
.zr-prod-gallery .flex-control-thumbs li { cursor: zoom-in; }

/* -------------------------------------------------------------------------
   45. Homepage-contactband: formulierkaart breder
   ---------------------------------------------------------------------- */
.elementor-element-f7c2fff {
  width: 42% !important;
  min-width: 420px;
  max-width: 560px;
}
@media (max-width: 900px) {
  .elementor-element-f7c2fff { width: 100% !important; min-width: 0; max-width: none; }
}

/* -------------------------------------------------------------------------
   46. Globale afwerking — kleine details over de hele site
   ---------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Tekstselectie in de huisstijl */
::selection { background: var(--zr-sage); color: var(--zr-pine); }

/* Afbeeldingen krijgen nooit een lelijke onderrand-spatie */
img { vertical-align: middle; }

/* Consistente, rustige knop-overgangen (ook op Elementor-links-als-knop) */
.zr-btn, .elementor-button, a.zr-cb-knop, .zr-off-knop {
  transition: background-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}

/* Focus-ring niet alleen zichtbaar maar ook binnen afgeronde kaarten netjes */
:focus-visible { outline: 2px solid var(--zr-leaf); outline-offset: 2px; border-radius: 4px; }

/* Zachte hover op alle interne kaartlinks die nog geen eigen hover hebben */
.zr-related-card, .zr-split, .zr-card-lift { will-change: transform; }

/* -------------------------------------------------------------------------
   47. Overlap-kaarten (Over ons / Locaties): beeld strekt mee met de kaart
   zodat de overlap ALTIJD consistent is, ongeacht de hoeveelheid tekst.
   ---------------------------------------------------------------------- */
.zr-overlap { display: flex !important; align-items: stretch !important; }
.zr-overlap > .elementor-widget-image {
  align-self: stretch !important;
  display: flex;
}
.zr-overlap > .elementor-widget-image .elementor-widget-container,
.zr-overlap > .elementor-widget-image .elementor-image,
.zr-overlap > .elementor-widget-image a { height: 100%; width: 100%; display: block; }
.zr-overlap-img img {
  width: 100% !important; height: 100% !important;
  object-fit: cover; border-radius: 16px; display: block;
  min-height: 340px;
}
.zr-overlap-card {
  align-self: center;
  background: #fff; border-radius: 16px;
  box-shadow: 0 2px 6px rgba(20,36,30,.08), 0 24px 48px rgba(20,36,30,.12);
}
@media (max-width: 900px) {
  .zr-overlap { flex-direction: column !important; }
  .zr-overlap-card { margin-left: 0 !important; margin-top: -40px !important; }
  .zr-overlap-img img { min-height: 240px; }
}

/* -------------------------------------------------------------------------
   48. Footer: rechterkolom meer ruimte (minder links-dominant)
   ---------------------------------------------------------------------- */
.zr-footer > .e-con-inner > .e-con:first-child,
.zr-footer .e-con.e-flex[class*="e-con"]:first-child { }
.zr-foot-contact { min-width: 300px; }

/* -------------------------------------------------------------------------
   49. Eigen lichtbak (galerij) — premium, met thumbnails + toetsenbord
   ---------------------------------------------------------------------- */
.zr-lb {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(15, 28, 23, .96);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.zr-lb.zr-lb-open { opacity: 1; visibility: visible; }
.zr-lb-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; color: #fff; flex: 0 0 auto;
}
.zr-lb-teller { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.75); }
.zr-lb-sluit {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff;
  display: grid; place-items: center; transition: background .2s ease;
}
.zr-lb-sluit:hover { background: rgba(255,255,255,.12); }
.zr-lb-mid { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 20px; min-height: 0; }
.zr-lb-nav {
  width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.2); color: #fff;
  display: grid; place-items: center; transition: background .2s ease;
}
.zr-lb-nav:hover { background: rgba(255,255,255,.15); }
.zr-lb-fig { flex: 1 1 auto; height: 100%; display: flex; align-items: center; justify-content: center; min-width: 0; }
.zr-lb-fig img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.zr-lb-thumbs {
  flex: 0 0 auto; display: flex; gap: 8px; padding: 14px 20px 20px;
  overflow-x: auto; justify-content: center; scrollbar-width: thin;
}
.zr-lb-thumbs img {
  width: 74px; height: 56px; object-fit: cover; border-radius: 7px; cursor: pointer;
  opacity: .5; border: 2px solid transparent; transition: opacity .2s ease, border-color .2s ease;
  flex: 0 0 auto;
}
.zr-lb-thumbs img:hover { opacity: .85; }
.zr-lb-thumbs img.zr-lb-actief { opacity: 1; border-color: var(--zr-sage); }
body.zr-lb-lock { overflow: hidden; }
/* Lichtbak-knoppen zijn <button>s: de groene kitstijl expliciet terugzetten
   (anders effen groene pillen zonder zichtbaar icoon). */
.zr-lb button.zr-lb-sluit,
.zr-lb button.zr-lb-nav {
  background: rgba(0, 0, 0, .25) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  border-radius: 50% !important;
  padding: 0 !important; min-height: 0 !important;
  box-shadow: none !important;
  display: grid !important; place-items: center;
}
.zr-lb button.zr-lb-sluit:hover,
.zr-lb button.zr-lb-nav:hover { background: rgba(255, 255, 255, .15) !important; }
.zr-lb button svg { stroke: #fff; }
@media (max-width: 767px) {
  .zr-lb-nav { width: 40px; height: 40px; }
  .zr-lb-mid { padding: 0 8px; gap: 8px; }
  .zr-lb-thumbs img { width: 56px; height: 42px; }
}

/* =========================================================================
   54. MOBIEL — één samenhangende laag, gebouwd op het mobiele ontwerp
   (design_handoff/pages/mobile, canvas 390px). Alles wat hieronder staat
   overschrijft bewust de losse mobiele regels uit §27/§28/§37/§43.
   ========================================================================= */
@media (max-width: 767px) {

  /* --- 54.1 Basis: niets mag breder zijn dan het scherm ------------------ */
  :root { --zr-gutter: 20px; }
  .e-con, .e-con-inner, .elementor-widget, .elementor-widget-container { min-width: 0; max-width: 100%; }
  .e-con-inner > * { max-width: 100%; }
  /* Horizontale verschuivingen tussen geneste containers (overlap-kaarten op
     desktop) duwen op 390px alleen maar inhoud van het scherm af.
     Let op: de directe ouder is meestal .e-con-inner, niet .e-con. */
  .e-con > .e-con.e-child,
  .e-con-inner > .e-con.e-child {
    margin-left: 0 !important; margin-right: 0 !important;
  }

  /* --- 54.2 Header: klein logo, hamburger ernaast (ontwerp: 26px / 42px) - */
  [data-elementor-type="header"] .e-con-inner,
  [data-elementor-type="header"] > .e-con {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    padding: 11px 18px !important; gap: 12px;
  }
  [data-elementor-type="header"] .elementor-widget-image { flex: 0 0 auto !important; width: auto !important; }
  [data-elementor-type="header"] .elementor-widget-image img {
    height: 28px !important; width: auto !important; max-width: none;
  }
  [data-elementor-type="header"] .elementor-widget-nav-menu { flex: 0 0 auto !important; width: auto !important; }
  .elementor-menu-toggle {
    width: 42px !important; height: 42px !important;
    background: transparent !important; border-radius: 8px;
  }
  .zr-header-overlay .elementor-menu-toggle,
  .zr-header-overlay .elementor-menu-toggle svg { color: #fff !important; fill: #fff !important; }

  /* --- 54.3 Hero: kop boven, knoppen direct onder de tekst ---------------
     (geen bodem-pinning meer: op kleine schermen vielen de knoppen dan
     buiten beeld — de inhoud bepaalt nu de hoogte) */
  .zr-hero {
    min-height: 0 !important;
    padding: 88px 22px 40px !important;
    display: flex !important; flex-direction: column !important;
  }
  .zr-hero .zr-h1-hero .elementor-heading-title {
    font-size: clamp(34px, 11vw, 42px) !important; line-height: 1.03 !important;
  }
  .zr-hero .elementor-widget-text-editor { font-size: 15.5px; max-width: 320px; }
  .zr-pagehero { padding-inline: 22px !important; }

  /* --- 54.4 Statblokken: 2 kolommen i.p.v. één lange rij ----------------- */
  .zr-statsblok > .elementor-widget-container > div,
  .zr-statsblok .zr-bandstats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 14px !important;
    width: 100%;
  }
  .zr-statsblok > .elementor-widget-container > div > div { min-width: 0; }
  .zr-statsblok > .elementor-widget-container > div div[style*="font-size:48px"],
  .zr-statsblok > .elementor-widget-container > div div[style*="font-size: 48px"] { font-size: 32px !important; }

  /* --- 54.5 Aanbodkaart, exact het mobiele ontwerp ----------------------- */
  .zr-row {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 0 12px !important;
    padding: 22px 0 !important;
    position: relative;
    align-items: center;
  }
  .zr-row > .zr-thumbwrap {
    grid-column: 1 / -1; width: 100% !important; margin-bottom: 14px;
  }
  /* de <a> om de foto is inline-block: width:100% op de img valt dan terug op
     de eigen beeldverhouding (foto krimpt + centreert). Anker blok maken. */
  .zr-row > .zr-thumbwrap a { display: block; width: 100%; }
  .zr-row > .zr-thumbwrap img {
    width: 100% !important; height: 190px !important; object-fit: cover; border-radius: 12px;
  }
  /* inhoud (titel, locatie, chips) met scheidingslijn eronder */
  .zr-row > .e-con:nth-child(2) {
    grid-column: 1 / -1;
    padding-bottom: 14px; margin-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
  }
  /* geneste chip-container heeft eigen 10px padding: chips sprongen 10px
     verder in dan titel/locatie */
  .zr-row > .e-con:nth-child(2) > .e-con { padding-inline: 0 !important; }
  /* status als label óver de foto, zoals het ontwerp */
  .zr-row > .elementor-widget:has(.zr-badge-vrij),
  .zr-row > .elementor-widget:has(.zr-badge-bezet) {
    position: absolute; top: 43px; right: 20px; z-index: 3;
    width: auto !important; margin: 0 !important;
  }
  .zr-row .zr-badge-vrij, .zr-row .zr-badge-bezet { box-shadow: 0 1px 6px rgba(0, 0, 0, .22); }
  .zr-row .zr-badge-vrij { background: rgba(255, 255, 255, .94); color: var(--zr-pine); }
  .zr-row .zr-badge-bezet { background: #ebe6da; color: var(--zr-pine); }
  /* prijs links, knoppen rechts, op één regel */
  .zr-row > .zr-price {
    grid-column: 1; justify-self: start; align-self: center;
    font-size: 20px !important; margin: 0 0 0 10px !important;
    min-width: 0;
  }
  /* voorbeeldprijs ("vanaf €X/mnd") is langer dan een echte prijs en liep
     tegen de Info-knop aan: iets kleiner en "vanaf" mag afbreken */
  .zr-row .zr-price .zr-price-sample { font-size: 17px !important; white-space: normal; }
  .zr-row > .e-con:last-child {
    grid-column: 2; justify-self: end; align-self: center;
    flex-direction: row !important; align-items: center; gap: 10px;
    width: auto !important; margin: 0 10px 0 0 !important;
  }
  .zr-row .elementor-widget-button .elementor-button { white-space: nowrap; }

  /* --- 54.6 Formuliervelden mogen nooit buiten hun kaart vallen ---------- */
  .elementor-form, .elementor-form-fields-wrapper { max-width: 100%; }
  .elementor-form .elementor-field-group { max-width: 100%; padding-inline: 0 !important; }
  .elementor-field-textual, .elementor-field, textarea.elementor-field {
    box-sizing: border-box !important; max-width: 100% !important; width: 100% !important;
  }

  /* --- 54.7 Rustiger verticaal ritme ------------------------------------ */
  .zr-sect { padding-block: 34px !important; }
  .zr-sect-tight { padding-block: 24px !important; }
  .zr-h2-display .elementor-heading-title { font-size: 27px !important; line-height: 1.12 !important; }

  /* --- 54.8 Hexagon-diamant terugzetten --------------------------------
     54.1 zet max-width:100% op élke .e-con; de hexagons ZIJN containers, dus
     die verloren hun 176px-begrenzing en werden 330px breed. */
  .zr-hexrow {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 160px)) !important;
    justify-content: center !important;
    gap: 6px 10px !important;
  }
  .zr-hex {
    width: 100% !important; max-width: 160px !important;
    flex: none !important; justify-self: center;
    aspect-ratio: 176 / 168;
  }
  .zr-hex:nth-child(1), .zr-hex:nth-child(4) { grid-column: 1 / -1; }

  /* --- 54.9 Filterpills: één rij die horizontaal scrollt (ontwerp) ------ */
  /* De balk stond als gecentreerde flexrij; zodra de pills breder werden dan
     de regel schoof alles aan beide kanten buiten beeld. Op mobiel stapelen
     we daarom: label boven, daaronder een rij die horizontaal scrollt. */
  .zr-filterbar {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    row-gap: 8px !important;
  }
  .zr-filterbar > * { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; }
  .zr-filterdivider { display: none !important; }
  .zr-filterlabel { display: block; margin-bottom: 2px; }
  .zr-filterbar .elementor-widget-taxonomy-filter { min-width: 0 !important; }
  .zr-filterbar .e-filter {
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto; scrollbar-width: none;
    width: 100% !important; max-width: 100%;
    justify-content: flex-start !important;
  }
  .zr-filterbar .e-filter::-webkit-scrollbar { display: none; }
  .zr-filterbar .e-filter-item { flex: 0 0 auto; }
  /* "Alle" staat als laatste in de DOM en is standaard actief; in een
     scrollende rij springt de browser daarheen en zie je de eerste pill
     half. Vooraan zetten houdt de rij op scrollLeft 0. */
  .zr-filterbar .e-filter-item[data-filter="__all"] { order: -1; }
  .zr-filterbar { row-gap: 12px !important; }
  .zr-sliders { gap: 14px 20px; }
  .zr-slider { flex: 1 1 100%; min-width: 0; }
}

/* -------------------------------------------------------------------------
   57. Unitpagina — gelijk ritme en gelijke breedte voor élk blok.
   De secties stonden door elkaar op 26px (zr-sect-tight) en 44px (zr-sect),
   waardoor de witruimte tussen de blokken sterk verschilde. Eén maat, en de
   inhoud van alle blokken start op dezelfde lijn.
   ---------------------------------------------------------------------- */
body.single-product [data-elementor-type="product"] > .e-con {
  padding-inline: var(--zr-gutter) !important;
}
body.single-product [data-elementor-type="product"] > .e-con > .e-con-inner {
  max-width: var(--zr-max); margin-inline: auto; width: 100%;
}
@media (min-width: 1025px) {
  body.single-product .zr-sect,
  body.single-product .zr-sect-tight { padding-block: 40px !important; }
  /* blokken die samen één vlak vormen: geen dubbele lucht ertussen */
  body.single-product .zr-prod-gallery { padding-top: 8px !important; }
  body.single-product .elementor-element-55f21a3 { padding-bottom: 16px !important; }
  body.single-product .elementor-element-af5e064 { padding-top: 8px !important; }
}

/* CTA-balk onder de hero: gelijkmatige binnenruimte */
.zr-convbar { padding: 24px 28px !important; }
.zr-convbar .zr-cb { gap: 32px; }
.zr-cb-knop { padding: 15px 30px; }
/* Extra rijen + subprijs horen alleen bij de mobiele prijskaart */
.zr-cb-extra, .zr-cb-subprijs { display: none; }

/* De eigen mobiele unit-topbalk staat standaard uit (alleen ≤767px, zie §58) */
.zr-unitbar { display: none; }

/* Hero-kruimel + fototeller-pil: alleen in de mobiele unit-hero (§58) */
.zr-unit-kruimel-wrap, .zr-hero-fotos { display: none; }

/* -------------------------------------------------------------------------
   58. Unitpagina op mobiel — 1:1 met het mobiele ontwerp
   (Zesruit Unit Mobile.dc.html): eigen topbalk, hero met titel-overlay,
   horizontale fotostrip, verticale prijskaart, USP-grid.
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* --- 58.1 Eigen topbalk i.p.v. de hamburger-header ------------------- */
  body.single-product [data-elementor-type="header"] { display: none !important; }
  .zr-unitbar {
    position: sticky; top: 0; z-index: 95;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 14px; background: var(--zr-forest);
  }
  .zr-unitbar a { color: #fff; text-decoration: none; }
  .zr-unitbar-terug, .zr-unitbar-bel {
    width: 40px; height: 40px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
  }
  .zr-unitbar-logo { display: flex; align-items: center; }
  .zr-unitbar-logo img { height: 24px; width: auto; display: block; }
  /* hamburger rechts — <button>, dus kitstijl terugzetten */
  button.zr-unitbar-menu {
    width: 40px; height: 40px; flex: 0 0 auto;
    display: flex !important; align-items: center; justify-content: center;
    background: none !important; border: none !important;
    padding: 0 !important; min-height: 0 !important;
    color: #fff !important; cursor: pointer; box-shadow: none !important;
  }
  /* menu open op een productpagina: Elementor-header (met kruis) tonen,
     de unitbar zolang verbergen */
  body.single-product.zr-menu-open [data-elementor-type="header"] { display: block !important; }
  body.zr-menu-open .zr-unitbar { display: none !important; }

  /* --- 58.2 Secties herschikken: hero → fotostrip → prijskaart → rest -- */
  body.single-product [data-elementor-type="product"] {
    display: flex !important; flex-direction: column !important;
  }
  .elementor-element-3b9596e { display: none !important; }           /* losse breadcrumb weg */
  .elementor-element-11e3cc8 { order: 1; }                            /* hero */
  .elementor-element-d4fbe72 { order: 2; }                            /* fotostrip */
  .elementor-element-e781e99 { order: 3; }                            /* prijskaart */
  .elementor-element-995199c { order: 4; }                            /* USP's */
  body.single-product [data-elementor-type="product"] > .e-con:not(.elementor-element-11e3cc8):not(.elementor-element-d4fbe72):not(.elementor-element-e781e99):not(.elementor-element-995199c) { order: 5; }

  /* --- 58.3 Hero: full-bleed + titel als witte overlay onderin ----------
     LET OP specificiteit: §57 zet padding-inline op
     `body.single-product [data-elementor-type=product] > .e-con` (0,3,1);
     deze overrides moeten dus mínstens even specifiek zijn. */
  body.single-product [data-elementor-type="product"] > .elementor-element-11e3cc8 { padding: 0 !important; }
  body.single-product .elementor-element-11e3cc8 > .e-con-inner { padding: 0 !important; max-width: none !important; }
  body.single-product .zr-unit-hero {
    padding: 0 !important; border-radius: 0 !important;
    min-height: 340px !important; height: 340px;
    width: 100% !important; max-width: none !important;
  }
  .zr-unit-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(15,28,23,.34) 0%, rgba(15,28,23,0) 32%, rgba(15,28,23,0) 55%, rgba(15,28,23,.82) 100%);
  }
  /* overlay-inhoud op 20px — zelfde lijn als de secties eronder (USP's) */
  .zr-unit-titlecard {
    position: absolute !important; left: 20px; right: 20px; bottom: 18px;
    z-index: 2; background: transparent !important; box-shadow: none !important;
    padding: 0 !important; max-width: none; width: auto;
  }
  /* titel groot wit, oppervlakte-regel klein — per element-ID, want de
     ingevoegde kruimel verschuift anders de nth-child-volgorde */
  .zr-unit-titlecard .elementor-element-4f373e8 .elementor-heading-title {
    color: #fff !important; font-size: 30px !important; line-height: 1.05 !important;
    margin: 0 !important;
  }
  .zr-unit-titlecard .elementor-element-31bcf96 .elementor-heading-title {
    color: rgba(255,255,255,.82) !important; font-size: 13px !important;
    font-weight: 500 !important; margin-top: 4px !important;
  }
  /* beschikbaarheidspil: witte pil linksboven op de foto, op de 20px-lijn */
  .zr-unit-hero > .elementor-widget-text-editor { top: 16px; left: 20px; z-index: 2; }
  .zr-unit-hero .zr-badge-vrij {
    background: #fff !important; color: var(--zr-pine) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.18); padding: 6px 13px;
  }

  /* mini-kruimel boven de titel ("Bedrijfsunits · Eerbeek") */
  .zr-unit-titlecard .zr-unit-kruimel-wrap {
    display: block; order: -1; margin-bottom: 6px;
  }
  .zr-unit-kruimel {
    font-size: 11px; color: rgba(255,255,255,.72);
    letter-spacing: .01em;
  }
  .zr-unit-titlecard { display: flex; flex-direction: column; }

  /* fototeller-pil rechtsonder in de hero. Het is een <button>, dus de
     Elementor-knopstijl (groene balk) expliciet terugzetten. */
  button.zr-hero-fotos {
    display: inline-flex !important; align-items: center; gap: 6px;
    position: absolute; right: 16px; bottom: 16px; z-index: 2;
    width: auto !important; min-height: 0 !important;
    background: rgba(255,255,255,.92) !important; color: var(--zr-pine) !important;
    border: none !important; cursor: pointer;
    font-family: "DM Sans", sans-serif; font-size: 12px !important; font-weight: 700;
    padding: 7px 13px !important; border-radius: 50px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
  }

  /* --- 58.4 Fotostrip: horizontaal scrollen, kleine thumbs -------------- */
  /* Gelijke witruimte rondom de strip: 12px boven, 12px tussen de thumbs en
     12px onder. De Elementor-.e-con-inner zette standaard 40px padding-top —
     dáárdoor was de ruimte bóven de strip veel groter dan eronder. */
  body.single-product [data-elementor-type="product"] > .elementor-element-d4fbe72.zr-prod-gallery {
    padding: 24px 20px !important; background: var(--zr-cream);
  }
  /* het vergrootglas-icoon van WooCommerce past niet op een 76px-strip */
  .zr-prod-gallery .woocommerce-product-gallery__trigger { display: none !important; }
  .zr-prod-gallery .woocommerce-product-gallery__wrapper,
  .zr-prod-gallery .flex-control-thumbs {
    display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important;
    grid-template-columns: none !important; grid-auto-rows: auto !important;
    gap: 12px !important; overflow: hidden; scrollbar-width: none;
  }
  .zr-prod-gallery .woocommerce-product-gallery__wrapper::-webkit-scrollbar,
  .zr-prod-gallery .flex-control-thumbs::-webkit-scrollbar { display: none; }
  /* De zichtbare thumbs (max 4, rest verborgen) delen de breedte gelijk zodat
     ze exact uitlijnen — geen losse restruimte, geen ongelijke hoogtes. */
  .zr-prod-gallery .woocommerce-product-gallery__image,
  .zr-prod-gallery .flex-control-thumbs li {
    flex: 1 1 0 !important; min-width: 0 !important; width: auto !important;
    height: 62px !important; margin: 0 !important;
    grid-column: auto !important; grid-row: auto !important;
    border-radius: 9px; overflow: hidden;
  }
  .zr-prod-gallery .woocommerce-product-gallery__wrapper img,
  .zr-prod-gallery .flex-control-thumbs li img {
    width: 100% !important; height: 100% !important; object-fit: cover; display: block;
  }
  .zr-prod-gallery .woocommerce-product-gallery__image:first-child,
  .zr-prod-gallery .flex-control-thumbs li:first-child {
    outline: 2px solid var(--zr-leaf); outline-offset: -2px;
  }
  /* "+N"-chip compact op de vijfde (rechtse) thumb van de strip */
  .zr-prod-gallery .zr-meerfotos {
    gap: 2px; font-size: 11px; font-weight: 700;
    background: rgba(30, 57, 50, .62); border-radius: 9px;
  }
  .zr-prod-gallery .zr-meerfotos svg { width: 14px; height: 14px; }
  .zr-prod-gallery .zr-meerfotos .zr-meerfotos-lang { display: none; }

  /* --- 58.5 Prijskaart: verticaal, met alle specrijen ------------------- */
  body.single-product .elementor-element-e781e99 { padding: 0 20px 24px !important; background: var(--zr-cream); }
  .zr-convbar {
    margin-top: 0 !important; padding: 22px !important;
    border-radius: 14px; box-shadow: 0 0 .5px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.12);
  }
  /* §57 zet op desktop .zr-convbar .zr-cb { gap:32px } — die moet hier weg,
     anders staan de prijsrijen veel te ver uit elkaar. */
  .zr-convbar .zr-cb { flex-direction: column; align-items: stretch; gap: 0; }
  .zr-cb-hoofd { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,.10); }
  .zr-cb-prijs { font-size: 34px; }
  .zr-cb-subprijs { display: block; font-size: 13px; color: rgba(0,0,0,.58); margin-top: 2px; }
  .zr-cb-sep { display: none; }
  .zr-cb-blok:not(.zr-cb-hoofd) {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0;
  }
  .zr-cb-extra { display: flex; }
  .zr-cb-sublabel { font-size: 14px; color: rgba(0,0,0,.58); }
  .zr-cb-waarde { font-size: 14px; font-weight: 700; color: rgba(0,0,0,.87); }
  .zr-cb-knop { width: 100%; justify-content: center; padding: 15px 24px; margin-top: 18px; }
  /* bezet-pil in de mobiele kaart: eigen regel boven de knop, gecentreerd */
  .zr-cb-bezet { margin: 14px 0 0; align-self: center; }
  .zr-cb-bezet + .zr-cb-knop { margin-left: 0; margin-top: 12px; }

  /* --- 58.6 USP-grid 2 koloms (ontwerp), specs 1 kolom ------------------ */
  .zr-usp-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .zr-usp-card { padding: 16px; }
  .zr-usp-icon { width: 38px; height: 38px; margin-bottom: 11px; }
  .zr-usp-titel { font-size: 15px; }
  .zr-usp-sub { font-size: 12.5px; line-height: 1.4; }
  .zr-spec-grid { grid-template-columns: 1fr; gap: 0; }
  .zr-spec-row { padding: 12px 0; }
}

/* -------------------------------------------------------------------------
   59. Mobiel — compacter: offertetool, contactkaart, donkere kaarten
   Het rekenformulier besloeg ~3 schermen; de contactkaart had 150px-blokken
   met zwevende iconen. Alles strakker, zonder desktop te raken.
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Offertetool: kleinere veldafstanden en labels */
  .zr-off-grid { gap: 10px !important; }
  .zr-off-veld { gap: 4px; }
  .zr-off-veld > span { font-size: 11px; }
  .zr-off-veld input, .zr-off-veld select { padding: 10px 12px; font-size: 14px; }
  .zr-off-bezorg { margin-top: 12px; }
  .zr-off-bezorg label { margin-bottom: 4px; font-size: 13.5px; }
  .zr-off-totaal { margin-top: 14px; padding-top: 14px; gap: 14px; }
  .zr-off-regels { gap: 5px; max-width: none; }
  .zr-off-regels > div { font-size: 13.5px; align-items: baseline; }
  .zr-off-regels > div > span:first-child { flex: 1 1 auto; padding-right: 10px; }
  .zr-off-regels strong { text-align: right; white-space: nowrap; }
  .zr-off-klein { font-size: 11.5px; line-height: 1.5; margin-top: 10px; }
  .zr-collapse-head { padding: 16px 18px; gap: 12px; }
  .zr-collapse-body .zr-collapse-inner { padding: 0 18px 20px; }
  .zr-collapse-head .zr-collapse-sub { font-size: 13px; margin-top: 1px; }

  /* Contactkaart: icoon náást de tekst i.p.v. zwevend erboven */
  .elementor-element-2dfb4ed, .elementor-element-45be780, .elementor-element-a28ef1a {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 14px; row-gap: 2px !important;
    align-items: start;
    padding: 6px 0 !important;
  }
  .elementor-element-2dfb4ed > .elementor-widget-icon,
  .elementor-element-45be780 > .elementor-widget-icon,
  .elementor-element-a28ef1a > .elementor-widget-icon {
    grid-column: 1; grid-row: 1 / span 3; margin: 0 !important;
  }
  .elementor-element-2dfb4ed > *:not(.elementor-widget-icon),
  .elementor-element-45be780 > *:not(.elementor-widget-icon),
  .elementor-element-a28ef1a > *:not(.elementor-widget-icon) {
    grid-column: 2; text-align: left !important;
  }
  /* donkere kaarten: minder binnenruimte en rij-afstand */
  .elementor-element-455212c { padding: 28px 22px !important; gap: 18px !important; }
  .elementor-element-76f0f89 { padding: 28px 22px !important; }
}

/* -------------------------------------------------------------------------
   56. Leesbaarheid — secundaire tekst was aan de kleine kant.
   Eén plek waar de ondersteunende tekstmaten omhoog gaan.
   ---------------------------------------------------------------------- */
.elementor-widget-text-editor { font-size: 16px; }
.elementor-widget-text-editor p { font-size: inherit; line-height: 1.7; }
.zr-chip-feature { font-size: 13px; padding: 5px 12px; }
.zr-kenmerken { gap: 7px; }
.zr-stap p { font-size: 15.5px; }
.zr-usp-sub, .zr-related-meta, .zr-service-intro { font-size: 15px; }
.zr-spec-naam, .zr-spec-waarde { font-size: 15.5px; }
.zr-mijlpaal-body p { font-size: 15.5px; }
.zr-hero-stats .zr-stat-label { font-size: 12px; }
.zr-meerinfo a { font-size: 14px; }
.zr-locatie-tekst, .zr-prod-desc p { font-size: 16.5px; }
.zr-off-klein { font-size: 13px; }
.zr-faq-item > p { font-size: 15.5px; }
.zr-footer, .zr-footer a, .zr-foot-contact a, .zr-foot-contact .zr-foot-adres { font-size: 15px; }
@media (max-width: 767px) {
  .elementor-widget-text-editor { font-size: 15.5px; }
  .zr-chip-feature { font-size: 12.5px; }
}

/* -------------------------------------------------------------------------
   55. Nieuwsbriefband — prominenter, en het aanspreekpunt voor "laat het me
   weten als dit vrijkomt" bij bezette objecten.
   ---------------------------------------------------------------------- */
.zr-nieuwsbrief {
  padding: 34px 38px !important;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(20, 36, 30, .12), 0 18px 40px rgba(20, 36, 30, .16);
  scroll-margin-top: 110px;
}
.zr-nieuwsbrief .elementor-heading-title { font-size: 23px !important; line-height: 1.2 !important; }
.zr-nieuwsbrief .elementor-icon {
  width: 48px; height: 48px; border-radius: 13px;
  display: inline-flex !important; align-items: center; justify-content: center;
}
.zr-nieuwsbrief .elementor-icon i,
.zr-nieuwsbrief .elementor-icon svg { font-size: 24px !important; width: 24px; height: 24px; }
@keyframes zrBelRing {
  0%, 80% { transform: rotate(0); }
  84%     { transform: rotate(12deg); }
  88%     { transform: rotate(-10deg); }
  91%     { transform: rotate(6deg); }
  94%     { transform: rotate(-3deg); }
  97%, 100% { transform: rotate(0); }
}
.zr-nieuwsbrief .elementor-icon i,
.zr-nieuwsbrief .elementor-icon svg {
  transform-origin: 50% 10%;
  animation: zrBelRing 4s ease-in-out infinite;
}
/* Subtekst-alinea had een margin-bottom (~14px) waardoor de linkerkolom onderaan
   uitliep en de band optisch meer ruimte ónder dan bóven kreeg. Weghalen zodat de
   inhoud netjes verticaal gecentreerd staat. */
.zr-nieuwsbrief .elementor-widget-text-editor p:last-child { margin-bottom: 0 !important; }
.zr-nieuwsbrief input[type="email"] { height: 52px; font-size: 15px !important; }
.zr-nieuwsbrief .elementor-button { height: 52px; min-height: 52px; font-size: 15px; padding: 0 28px; }
/* korte toelichting die verschijnt na "houd me op de hoogte" bij een unit */
.zr-nb-context {
  display: none;
  margin: 0 0 14px; padding: 10px 14px;
  background: rgba(255, 255, 255, .14);
  border-left: 3px solid var(--zr-sage);
  border-radius: 8px;
  font-size: 14px; color: #fff;
}
.zr-nb-context.zr-aan { display: block; }
.zr-nb-context strong { color: var(--zr-sage); }
/* pulse zodat duidelijk is waar je terechtkomt */
@keyframes zrNbAandacht {
  0%, 100% { box-shadow: 0 2px 8px rgba(20,36,30,.12), 0 18px 40px rgba(20,36,30,.16); }
  50%      { box-shadow: 0 0 0 4px rgba(168, 203, 174, .55), 0 18px 40px rgba(20,36,30,.16); }
}
.zr-nieuwsbrief.zr-aandacht { animation: zrNbAandacht 1.5s ease-in-out 2; }

/* Subtiele "houd me op de hoogte"-link op bezette rijen.
   Het is een <button>, dus de knopstijl uit de Elementor-kit slaat er anders
   overheen (groene balk); vandaar het expliciet terugzetten. */
button.zr-melding-link,
.zr-row button.zr-melding-link {
  display: inline-flex !important; align-items: center; gap: 6px;
  align-self: flex-start; width: auto !important;
  background: none !important; background-color: transparent !important;
  border: none !important; box-shadow: none !important;
  padding: 0 !important; min-height: 0 !important; border-radius: 0 !important;
  cursor: pointer;
  font-family: "DM Sans", sans-serif; font-size: 13px !important; font-weight: 600;
  color: var(--zr-leaf) !important;
  text-decoration: underline; text-underline-offset: 2px;
  margin-top: 6px !important;
}
button.zr-melding-link:hover { color: var(--zr-pine) !important; }
.zr-melding-link svg { flex: 0 0 auto; }
@media (max-width: 767px) { .zr-melding-link { font-size: 13.5px; } }

@media (max-width: 767px) {
  .zr-nieuwsbrief { padding: 26px 22px !important; border-radius: 16px; }
  .zr-nieuwsbrief .elementor-heading-title { font-size: 20px !important; }
}

/* -------------------------------------------------------------------------
   50. Subpagina-hero's — zelfde ademruimte als de homepage-hero, zodat het
   achtergrondbeeld ook echt tot zijn recht komt.
   ---------------------------------------------------------------------- */
.zr-pagehero {
  min-height: 560px !important;
  background-position: center center !important;
  background-size: cover !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-top: 120px !important;
  padding-bottom: 80px !important;
}
@media (max-width: 1024px) { .zr-pagehero { min-height: 460px !important; padding-top: 104px !important; } }
@media (max-width: 767px)  { .zr-pagehero { min-height: 380px !important; padding-top: 96px !important; padding-bottom: 48px !important; } }

/* -------------------------------------------------------------------------
   51. Over ons — "Ons traject": tijdlijn links, kaart rechts.
   Voorheen stond alles op 720px in een 1440-raster => halve pagina leeg.
   ---------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .zr-traject > .e-con-inner {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    column-gap: 56px;
    align-items: start;
  }
  /* alles expliciet geplaatst: kop bovenaan, tijdlijn links, kaart+beeld rechts */
  .zr-traject > .e-con-inner > .zr-eyebrow   { grid-column: 1 / -1; grid-row: 1; }
  .zr-traject > .e-con-inner > .zr-h2-display { grid-column: 1 / -1; grid-row: 2; }
  .zr-traject-tijdlijn { grid-column: 1; grid-row: 3 / span 2; }
  .zr-traject-kaart    { grid-column: 2; grid-row: 3; }
  .zr-traject-beeld    { grid-column: 2; grid-row: 4; align-self: stretch; }
  .zr-traject-beeld .elementor-widget-container,
  .zr-traject-beeld .elementor-image { height: 100%; }
  .zr-traject-beeld img { height: 100%; min-height: 260px; max-height: none; object-fit: cover; }
}
.zr-traject .zr-tijdlijn { max-width: none; }
.zr-traject .zr-service-card { max-width: none; }

/* -------------------------------------------------------------------------
   52. Hoofdmenu — onderstreping alleen onder de tekst
   De links staan tegen elkaar aan (padding 14px, marge 0) en de streep was
   100% breed, waardoor de strepen van buurlinks aan elkaar vastzaten.
   We zetten hem binnen de padding en animeren met scaleX i.p.v. width.
   ---------------------------------------------------------------------- */
.elementor-nav-menu--main .elementor-item { margin-inline: 4px; }
.elementor-nav-menu--main .elementor-item::after {
  left: 14px !important;
  right: 14px !important;
  width: auto !important;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.elementor-nav-menu--main .elementor-item:hover::after,
.elementor-nav-menu--main .elementor-item:focus-visible::after,
.elementor-nav-menu--main .elementor-item.highlighted::after,
.elementor-nav-menu--main .elementor-item.elementor-item-active::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .elementor-nav-menu--main .elementor-item::after { transition: none; }
}

/* -------------------------------------------------------------------------
   53. Homepage-video — begrensd, speelt pas na een klik
   Het bestand is ~15 MB; met autoplay zou dat bij élke paginaweergave
   binnenkomen. Vandaar preload="none" + een still als overlay.
   ---------------------------------------------------------------------- */
.zr-video { height: 520px; overflow: hidden; background: var(--zr-forest); }
.zr-video .elementor-widget-video,
.zr-video .elementor-widget-container { height: 100%; width: 100%; }
/* Elementor zet aspect-ratio 16/9 op de wrapper; met een vaste hoogte krimpt
   die dan in de breedte. Verhouding loslaten en de video laten bijsnijden. */
.zr-video .e-hosted-video,
.zr-video .elementor-wrapper {
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
}
.zr-video video {
  width: 100% !important; height: 100% !important;
  max-height: none !important;
  object-fit: cover; display: block;
}
@media (max-width: 767px) { .zr-video { height: 260px; } }

/* -------------------------------------------------------------------------
   60. Unitpagina desktop 1:1 met "Zesruit Unit Page Combined.dc.html".
   Het ontwerp heeft een full-bleed hero van 540px met de titelkaart
   linksonder (44px kop), de kruimel er direct boven (28px lucht), en de
   conversiebalk die de hero 36px overlapt. Lokaal stond de hero geboxed
   in het 1440-raster met dubbele 40px-paddings erboven en eronder.
   NB: §57 zet padding-inline op élke > .e-con met !important — full-bleed
   overrides moeten daarom op element-ID met body.single-product-prefix.
   ---------------------------------------------------------------------- */
@media (min-width: 1025px) {
  /* Kruimelpad: 28px onder de header, direct op de hero (ontwerp r.43) */
  body.single-product .elementor-element-3b9596e {
    padding-block: 28px 14px !important;
  }
  /* Hero-sectie full-bleed: geen gutter, geen raster-cap, geen radius */
  body.single-product [data-elementor-type="product"] > .elementor-element-11e3cc8 {
    padding: 0 !important;
  }
  body.single-product .elementor-element-11e3cc8 > .e-con-inner {
    max-width: none !important; padding: 0 !important; margin: 0 !important;
  }
  body.single-product .zr-unit-hero {
    width: 100% !important;
    min-height: 540px !important; height: 540px;
    border-radius: 0 !important;
    padding: 24px 40px 40px !important;
  }
  body.single-product .zr-unit-heroimg,
  body.single-product .zr-unit-heroimg img { border-radius: 0 !important; }
  /* Titelkaart linksonder, maat en typografie uit het ontwerp (r.57-60) */
  body.single-product .zr-unit-titlecard {
    /* horizontale padding 28px = gelijk aan de convbar, zodat de titel exact
       boven "HUURPRIJS / Op aanvraag" uitlijnt (was 32 → titel 4px te rechts).
       Verticale padding compacter (20px) zodat de kaart niet log oogt. */
    padding: 20px 28px !important; max-width: 600px;
    border-radius: 14px; box-shadow: 0 10px 26px rgba(0, 0, 0, .26);
  }
  body.single-product .zr-unit-titlecard h1.elementor-heading-title,
  body.single-product .zr-unit-titlecard .elementor-element-4f373e8 .elementor-heading-title {
    font-size: 40px !important; line-height: 1.05 !important; letter-spacing: -.02em;
  }
  body.single-product .zr-unit-titlecard .elementor-element-31bcf96 .elementor-heading-title {
    font-size: 17px !important; color: rgba(255, 255, 255, .75); margin-top: 4px !important;
  }
  /* Conversiebalk: overlap 36px zoals het ontwerp (r.65) */
  body.single-product .zr-convbar { margin-top: -36px !important; }
  /* Galerij: rijen van 190px (ontwerp r.89) */
  .zr-prod-gallery .woocommerce-product-gallery__wrapper,
  .zr-prod-gallery .flex-control-thumbs { grid-auto-rows: 190px !important; }
}

/* Vergrootglas-trigger van WooCommerce staat niet in het ontwerp — de
   tegels zelf openen de lichtbak al (§44/§60) */
.zr-prod-gallery .woocommerce-product-gallery__trigger { display: none !important; }

/* §60.1 — convbar écht over de hero (de 40px top-padding van de sectie
   at de -36px overlap op) en titelkaart/badge op de rasterlijn van de
   1440-container in plaats van vast 40px vanaf de viewportrand */
@media (min-width: 1025px) {
  body.single-product [data-elementor-type="product"] > .elementor-element-e781e99 {
    padding-top: 0 !important;
  }
  body.single-product .zr-convbar { margin-top: -36px !important; }
  /* linker/rechter inzet van de hero-inhoud = gutter van het contentraster */
  body.single-product .zr-unit-hero {
    padding-inline: max(var(--zr-gutter), calc((100% - var(--zr-max)) / 2)) !important;
  }
  body.single-product .zr-unit-hero > .elementor-widget-text-editor {
    left: max(var(--zr-gutter), calc((100% - var(--zr-max)) / 2));
  }
}

/* -------------------------------------------------------------------------
   60.2 Desktop/tablet: broodkruimel ín de hero, cremen strook boven de hero
        weg, beschikbaarheidslabel naar rechtsboven, convbar strak op de
        galerij. Vanaf 768px (JS verplaatst de breadcrumb op élk formaat, dus
        de oude sectie moet óók op tablet weg om geen lege strook te tonen).
   ---------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Losse breadcrumb-sectie weg → hero zit direct tegen de nav */
  body.single-product .elementor-element-3b9596e { display: none !important; }

  /* Donkere scrim bovenin de hero zodat witte breadcrumb/label leesbaar zijn */
  body.single-product .zr-unit-hero::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 130px;
    background: linear-gradient(rgba(15, 28, 23, .55), rgba(15, 28, 23, 0));
    z-index: 1; pointer-events: none;
  }

  /* Breadcrumb-overlay linksboven, op de rasterlijn; het beschikbaarheidslabel
     stapelt er (via JS) direct onder in deze kolom. */
  body.single-product .zr-hero-kruimel {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    position: absolute; top: 22px; z-index: 3;
    left: max(var(--zr-gutter), calc((100% - var(--zr-max)) / 2));
  }
  body.single-product .zr-hero-kruimel .woocommerce-breadcrumb,
  body.single-product .zr-hero-kruimel .woocommerce-breadcrumb a {
    color: #fff !important; font-size: 13px; text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  }
  body.single-product .zr-hero-kruimel .woocommerce-breadcrumb a { text-decoration: none; }
  body.single-product .zr-hero-kruimel .woocommerce-breadcrumb a:hover { text-decoration: underline; }

  /* Beschikbaarheidslabel direct ónder de breadcrumb (JS hangt het element in
     de .zr-hero-kruimel-kolom). In-flow, geen absolute positie meer. */
  body.single-product .zr-unit-titlecard { position: relative; }
  body.single-product .zr-hero-kruimel > .zr-label-onder-kruimel {
    position: static !important; width: auto !important; margin: 0 !important;
  }

  /* Convbar-sectie: geen 40px onder → gelijke lucht naar de galerij toe
     (de convbar overlapt de hero 36px boven; hieronder nu ~galerijpadding) */
  body.single-product [data-elementor-type="product"] > .elementor-element-e781e99 {
    padding-bottom: 0 !important;
  }
}
/* De overlay-breadcrumb is een desktopfeature; standaard verborgen (mobiel
   toont de eigen mini-kruimel in de titelkaart, §58). */
.zr-hero-kruimel { display: none; }

/* =========================================================================
   61. Product-categoriearchief (WooCommerce) — standaardoutput in de huisstijl
       (/product-categorie/…). Er is geen Elementor-archieftemplate, dus we
       stylen de WooCommerce-loop rechtstreeks.
   ========================================================================= */
.woocommerce.archive #primary,
.woocommerce.archive .content-area,
.woocommerce.tax-product_cat .content-area { width: 100% !important; float: none !important; }

.woocommerce.archive main.site-main,
.woocommerce.tax-product_cat main.site-main {
  max-width: var(--zr-max); margin-inline: auto;
  padding: 40px var(--zr-gutter) 72px; box-sizing: border-box;
}

/* Broodkruimel */
.woocommerce .woocommerce-breadcrumb {
  font-size: 13px; color: rgba(0, 0, 0, .5); margin: 0 0 20px;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--zr-leaf); text-decoration: none; }
.woocommerce .woocommerce-breadcrumb a:hover { text-decoration: underline; }

/* Pagina-kop */
.woocommerce-products-header { margin: 0 0 4px; }
.woocommerce-products-header__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -.02em;
  color: var(--zr-pine); margin: 0;
}
.woocommerce .term-description { color: rgba(0, 0, 0, .66); font-size: 16px; margin: 10px 0 0; max-width: 64ch; }

/* Resultaten-teller + sortering op één regel */
.woocommerce .woocommerce-result-count { float: left; margin: 4px 0 26px; color: rgba(0, 0, 0, .55); font-size: 14px; }
.woocommerce .woocommerce-ordering { float: right; margin: 0 0 26px; }
.woocommerce .woocommerce-ordering select {
  font-family: "DM Sans", sans-serif; font-size: 14px; color: var(--zr-pine);
  padding: 10px 40px 10px 15px; border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 10px; background-color: #fff; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231e4033' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* Kaartraster */
.woocommerce ul.products {
  display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 26px;
  clear: both; margin: 0 !important; padding: 0 !important; list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }

.woocommerce ul.products li.product {
  width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 .5px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .12);
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
}
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
}
.woocommerce ul.products li.product img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  margin: 0 !important; border-radius: 0; display: block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: "Bricolage Grotesque", sans-serif; font-size: 17px; font-weight: 700;
  line-height: 1.25; color: var(--zr-pine); padding: 16px 18px 0; margin: 0;
}
.woocommerce ul.products li.product .price {
  padding: 6px 18px 18px; margin: 0; margin-top: auto;
  color: var(--zr-leaf); font-weight: 700; font-size: 16px;
}
.woocommerce ul.products li.product .price del { color: rgba(0, 0, 0, .4); font-weight: 400; margin-right: 6px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
/* Catalogusmodus: geen "in winkelwagen"-knoppen op het archief */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart { display: none !important; }

/* Bezette objecten: ontkleurd + honey "Tijdelijk bezet"-pil, net als elders */
.woocommerce ul.products li.product.outofstock > a { position: relative; }
.woocommerce ul.products li.product.outofstock img { filter: grayscale(1); opacity: .58; }
.woocommerce ul.products li.product.outofstock > a::after {
  content: "Tijdelijk bezet"; position: absolute; top: 12px; left: 12px;
  background: var(--zr-honey); color: var(--zr-pine);
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 50px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}

@media (max-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (max-width: 767px) {
  .woocommerce.archive main.site-main,
  .woocommerce.tax-product_cat main.site-main { padding: 24px 20px 48px; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .woocommerce-products-header__title { font-size: 30px; }
  .woocommerce .woocommerce-result-count,
  .woocommerce .woocommerce-ordering { float: none; }
  .woocommerce .woocommerce-ordering { margin-bottom: 20px; }
}
@media (max-width: 430px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
}

/* §61 — Duurzaamheid "Bewoners van Veldhuizen": afbeelding boven elke kaart.
   Owner vervangt de foto simpelweg in Elementor (klik afbeelding → media). */
.zr-dierfoto { margin: 0 0 16px !important; line-height: 0; }
.zr-dierfoto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}