/* ============================================================
   Loftwoning — Impreza child theme
   Styling voor alle standaard Impreza- en WPBakery-elementen.
   ============================================================ */

/* ------------------------------------------------------------
   0. Design tokens
   ------------------------------------------------------------ */
:root {
  --lw-brons: #a5825e;
  --lw-brons-donker: #8a6a48;
  --lw-brons-licht: #c9a87e;
  --lw-donker: #23211d;
  --lw-donkerder: #1a1815;
  --lw-creme: #fbf8f4;
  --lw-zand: #f2ede6;
  --lw-tekst: #4a463f;
  --lw-grijs: #8b857b;
  --lw-lijn: #e5dcd0;
  --lw-white: #ffffff;
  --lw-font-kop: 'Jost', sans-serif;
  --lw-font-tekst: 'Karla', sans-serif;
  --lw-max: 1440px;
  --lw-pad: clamp(20px, 3vw, 48px);
  --lw-radius-kaart: 26px;
  --lw-radius-media: 16px;
  --lw-schaduw-zacht: 0 2px 14px rgba(35,33,29,.06);
  --lw-schaduw-kaart: 0 14px 40px -18px rgba(35,33,29,.28);
  --lw-schaduw-diep: 0 30px 70px -30px rgba(35,33,29,.45);
  --lw-space-s: 1rem;
  --lw-space-m: 1.75rem;
  --lw-space-l: clamp(2rem, 4vw, 3.5rem);
  --lw-space-xl: clamp(3.5rem, 8vw, 6.875rem);
  --lw-space-sectie: clamp(4.5rem, 9vw, 8.125rem);
}

/* ------------------------------------------------------------
   1. Basis
   ------------------------------------------------------------ */
body.lw-theme{
  background: var(--lw-creme);
  color: var(--lw-donker);
  font-family: var(--lw-font-tekst);
  font-size: 19px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
.lw-theme :where(p, li, td){ color: var(--lw-tekst); text-wrap: pretty; }
.lw-theme ::selection{ background: var(--lw-brons); color: #fff; }

/* ------------------------------------------------------------
   2. Typografie — koppen
   ------------------------------------------------------------ */
.lw-theme :where(h1, h2, h3, h4, h5, h6),
.lw-theme .w-post-elm.post_title,
.lw-theme .us-btn-style_raw{
  font-family: var(--lw-font-kop);
  color: var(--lw-donker);
  letter-spacing: -0.005em;
  text-wrap: pretty;
  margin-top: 0;
}
.lw-theme h1{ font-size: clamp(38px, 4.6vw, 66px); font-weight: 200; line-height: 1.06; margin-bottom: 22px; }
.lw-theme h2{ font-size: clamp(30px, 3.2vw, 46px); font-weight: 200; line-height: 1.12; margin-bottom: 26px; }
.lw-theme h3{ font-size: clamp(24px, 2.2vw, 30px); font-weight: 300; line-height: 1.2;  margin-bottom: 16px; }
.lw-theme h4{ font-size: 22px; font-weight: 300; line-height: 1.3; margin-bottom: 12px; }
.lw-theme h5{ font-size: 17px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.lw-theme h6{
  font-size: 12px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  color: var(--lw-grijs); margin-bottom: 12px;
}

/* Kicker: kleine bronzen bovenkop (klasse "lw-kicker" op een tekstelement) */
.lw-theme .lw-kicker,
.lw-theme .lw-kicker :where(p, h1, h2, h3, h4, h5, h6){
  font-family: var(--lw-font-kop);
  font-size: 12px !important;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--lw-brons) !important;
  line-height: 1.4;
  margin-bottom: 18px;
}

/* ------------------------------------------------------------
   3. Links
   ------------------------------------------------------------ */
.lw-theme a{ color: var(--lw-brons); text-decoration: none; transition: color .2s; }
.lw-theme a:hover{ color: var(--lw-brons-donker); }
.lw-theme a:focus-visible{ outline: 2px solid var(--lw-brons); outline-offset: 3px; }

/* ------------------------------------------------------------
   4. Knoppen (us_btn + WPBakery vc_btn + formulieren)
   ------------------------------------------------------------ */
.lw-theme .w-btn,
.lw-theme .vc_general.vc_btn3,
.lw-theme button[type="submit"],
.lw-theme input[type="submit"],
.lw-theme .wpcf7-submit{
  font-family: var(--lw-font-kop) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  padding: 19px 34px !important;
  /* border: 1px solid transparent !important; */
  transition: background .25s, color .25s, border-color .25s !important;
}
.lw-theme .w-btn.us-btn-style_solid,
.lw-theme .vc_general.vc_btn3,
.lw-theme button[type="submit"],
.lw-theme input[type="submit"],
.lw-theme .wpcf7-submit{
  background: var(--lw-brons) !important;
  color: #fff !important;
}
.lw-theme .w-btn.us-btn-style_solid:hover,
.lw-theme .vc_general.vc_btn3:hover,
.lw-theme button[type="submit"]:hover,
.lw-theme input[type="submit"]:hover,
.lw-theme .wpcf7-submit:hover{
  background: var(--lw-donker) !important;
  color: #fff !important;
}
.lw-theme .w-btn.us-btn-style_outlined{
  background: transparent !important;
  color: var(--lw-donker) !important;
  border-color: rgba(35,33,29,.25) !important;
}
.lw-theme .w-btn.us-btn-style_outlined:hover{
  background: var(--lw-donker) !important;
  color: #fff !important;
  border-color: var(--lw-donker) !important;
}
/* Op donkere secties */
.lw-theme .lw-sectie-donker .w-btn.us-btn-style_outlined,
.lw-theme .color_scheme_footer .w-btn.us-btn-style_outlined{
  color: #fff !important; border-color: rgba(255,255,255,.35) !important;
}
.lw-theme .lw-sectie-donker .w-btn.us-btn-style_outlined:hover{
  background: #fff !important; color: var(--lw-donker) !important;
}
/* Tekstlink met lijn */
.lw-theme .w-btn.us-btn-style_link{
  background: transparent !important;
  color: var(--lw-donker) !important;
  padding: 0 0 6px !important;
  border-bottom: 1px solid var(--lw-brons) !important;
}
.lw-theme .w-btn.us-btn-style_link:hover{ color: var(--lw-brons) !important; }

/* ------------------------------------------------------------
   5. Secties (vc_row) — achtergrondvarianten
   ------------------------------------------------------------ */
.lw-theme .l-section{ padding-top: var(--lw-space-sectie); padding-bottom: var(--lw-space-sectie); }
.lw-theme .l-section.height_small{ padding-top: var(--lw-space-l); padding-bottom: var(--lw-space-l); }
.lw-theme .l-section.height_medium{ padding-top: var(--lw-space-xl); padding-bottom: var(--lw-space-xl); }
.lw-theme .l-section-h{ max-width: var(--lw-max); padding-left: var(--lw-pad); padding-right: var(--lw-pad); }

.lw-theme .lw-sectie-zand{ background: var(--lw-zand) !important; }
.lw-theme .lw-sectie-donker{ background: var(--lw-donker) !important; }
.lw-theme .lw-sectie-donker :where(h1,h2,h3,h4,h5,h6){ color: #fff; }
.lw-theme .lw-sectie-donker :where(p, li){ color: rgba(255,255,255,.72); }
.lw-theme .lw-sectie-donker .lw-kicker,
.lw-theme .lw-sectie-donker .lw-kicker :where(p,h1,h2,h3,h4,h5,h6){ color: var(--lw-brons-licht) !important; }
.lw-theme .lw-sectie-donker a{ color: var(--lw-brons-licht); }

/* Impreza's eigen kleurenschema's meenemen */
.lw-theme .color_scheme_alternate{ background: var(--lw-zand); }
.lw-theme .color_scheme_footer :where(h1,h2,h3,h4,h5,h6){ color: #fff; }
.lw-theme .color_scheme_footer :where(p, li){ color: rgba(255,255,255,.72); }

/* Kolomafstand — Impreza rekent kolombreedtes zelf uit met percentages en
   padding als goot. Gebruik daarom GEEN `gap` op .g-cols: dan tellen goot én
   percentage samen op boven 100% en vallen de kolommen onder elkaar. */
.lw-theme .g-cols.type_default{ column-gap: 0; row-gap: 0; }
.lw-theme .g-cols.type_default > div{ padding-left: 12px; padding-right: 12px; }
.g-cols.via_flex.type_default>div>.vc_column-inner{ padding-left: 0px; padding-right: 0px; }
.lw-theme .g-cols.type_default{ margin-left: -12px; margin-right: -12px; }
@media (max-width: 767px){
  .lw-theme .g-cols.type_default > div + div{ margin-top: var(--lw-space-l); }
}

/* ------------------------------------------------------------
   6. Kaarten en blokken
   ------------------------------------------------------------ */
.lw-theme .lw-kaart{
  background: var(--lw-brons);
  color: #fff;
  border-radius: var(--lw-radius-kaart);
  padding: clamp(25px, 3vw, 30px) clamp(14px, 3vw, 16px);
  box-shadow: var(--lw-schaduw-kaart);
  transition: background .25s;
}
.lw-theme .lw-kaart:hover{ background: var(--lw-brons-donker); }
.lw-theme .lw-kaart :where(h1,h2,h3,h4,h5,h6,p,li,a,span){ color: #fff; }
.lw-theme .lw-kaart img{ border-radius: var(--lw-radius-media); }

/* 
  We willen de .lw-kaart volledig klikbaar maken vc zet er zoveel wrappers omheen waardoor het hover effect niet altijd op de kaart zelf plaatsvindt.
  Hoe dit werkt:
  .vc_column_container:has(...): Selecteert de buitenste container, maar alleen als de voorwaarde binnen de haakjes waar is.
  .vc_column-link:hover: De voorwaarde is dat de link met de klasse .vc_column-link actief wordt gehoverd.
  .lw-kaart: Als de container is geselecteerd, zoekt CSS binnen die specifieke container naar het element .lw-kaart om de styling op toe te passen. 
*/
.vc_column_container:has(.vc_column-link:hover) .lw-kaart {
  background: var(--lw-brons-donker); /* Vervang door jouw gewenste kleur */
}

.lw-theme .lw-omlijnd{
  background: #fff;
  border: 1px solid rgba(35,33,29,.12);
  padding: clamp(28px, 3vw, 44px);
}

/* Kenmerkenblok: definitielijst of tabel binnen .lw-specsheet */
.lw-theme .lw-specsheet{
  background: var(--lw-brons); color: #fff;
  border-radius: var(--lw-radius-kaart); padding: 44px 40px;
}
.lw-theme .lw-specsheet :where(h1,h2,h3,h4){
  font-size: 22px; font-weight: 300; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; margin-bottom: 24px;
}
.lw-theme .lw-specsheet table{ border: 0; margin: 0; }
.lw-theme .lw-specsheet :where(td, th){
  border: 0; border-top: 1px solid rgba(255,255,255,.28);
  padding: 15px 0; color: rgba(255,255,255,.78); font-size: 16px;
}
.lw-theme .lw-specsheet :where(td, th):last-child{
  font-family: var(--lw-font-kop); font-size: 19px; font-weight: 300;
  color: #fff; text-align: right;
}

.lw-theme .lw-specsheet-note{
  display: block; margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.78);
}

/* Streepjeslijst */
.lw-theme .lw-streepjes ul{ list-style: none; padding-left: 0; margin: 0; }
.lw-theme .lw-streepjes li{
  display: flex; align-items: center; gap: 12px; margin: 0 0 .7em; padding: 0;
}
.lw-theme .lw-streepjes li::before{
  content: ""; width: 14px; height: 1px; flex: 0 0 auto; background: currentColor; opacity: .55;
}

/* ------------------------------------------------------------
   7. Afbeeldingen, galerij, slider
   ------------------------------------------------------------ */
.lw-theme .w-image img,
.lw-theme .wpb_single_image img{ border-radius: 0; display: block; }
.lw-theme .lw-rond img,
.lw-theme .lw-rond .w-image-h{ border-radius: var(--lw-radius-media); overflow: hidden; }
.lw-theme .w-image-meta,
.lw-theme .wp-caption-text,
.lw-theme .vc_figure-caption{
  font-family: var(--lw-font-kop);
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lw-grijs); margin-top: 14px;
}
.lw-theme .w-gallery-item img{ border-radius: 0; }
.acf-loft-impression{ display: grid; gap: 24px; }
.acf-loft-impression-row{ display: flex; gap: 24px; }
.acf-loft-impression-item{ flex: 1; min-width: 0; }
.acf-loft-impression-open{ display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.acf-loft-impression-open img{ display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lw-theme .acf-loft-plattegronden-pdf-preview{ padding: 0; }
.acf-loft-plattegronden-pdf-preview embed{ position: absolute; inset: 0; width: 100%; height: 100%; }
.acf-loft-plattegronden-pdf-preview .acf-loft-impression-open{ position: absolute; right: 14px; bottom: 14px; z-index: 1; width: 40px; height: 40px; }
.acf-loft-impression-zoom{ position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 40px; height: 40px; background: rgba(20,20,20,.8); color: #fff; font-size: 20px; border-radius: 50%; }
.lw-theme .acf-loft-plattegronden-pdf-preview .acf-loft-impression-zoom{ right: 0; bottom: 0; color: #fff; }
.acf-loft-impression-open:focus-visible{ outline: 2px solid var(--lw-brons); outline-offset: 3px; }
.acf-loft-impression-lightbox{ position: fixed; inset: 0; box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: clamp(16px, 3vw, 40px); border: 0; background: #171717; color: #fff; overflow: hidden; }
.acf-loft-impression-lightbox[open]{ display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 12px; align-items: center; }
.acf-loft-impression-lightbox::backdrop{ background: rgba(0,0,0,.8); }
.acf-loft-impression-lightbox-content{ display: grid; min-width: 0; justify-items: center; touch-action: pan-y; }
.acf-loft-impression-lightbox-content img{ display: block; width: 100%; height: calc(100dvh - 145px); object-fit: contain; }
.acf-loft-impression-lightbox-content iframe{ display: block; width: 100%; height: calc(100dvh - 175px); border: 0; background: #fff; }
.acf-loft-impression-lightbox-content [hidden]{ display: none !important; }
.acf-loft-plattegronden-pdf-link{ color: #fff; text-decoration: underline; font-size: 14px; }
.acf-loft-plattegronden-pdf-link:hover, .acf-loft-plattegronden-pdf-link:focus-visible{ color: #fff; }
.acf-loft-impression-counter{ font-size: 14px; line-height: 1.5; }
.acf-loft-impression-lightbox button{ display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; font-size: 24px; }
.acf-loft-impression-lightbox button:hover, .acf-loft-impression-lightbox button:focus-visible{ background: rgba(255,255,255,.3); }
.acf-loft-impression-lightbox button:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
.acf-loft-impression-lightbox button[hidden]{ display: none; }
.acf-loft-impression-close{ position: absolute; top: 16px; right: 16px; z-index: 1; }
@media (max-width: 600px){
  .acf-loft-impression-row{ flex-direction: column; }
  .acf-loft-impression-lightbox[open]{ grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 0; padding: 12px; }
  .acf-loft-impression-lightbox button{ width: 40px; height: 40px; }
  .acf-loft-impression-lightbox-content img{ height: calc(100dvh - 110px); }
  .acf-loft-impression-lightbox-content iframe{ height: calc(100dvh - 140px); }
}
.lw-theme .owl-dot span, .lw-theme .w-slider-dot span{ border-radius: 0 !important; background: var(--lw-lijn) !important; }
.lw-theme .owl-dot.active span, .lw-theme .w-slider-dot.active span{ background: var(--lw-brons) !important; }

/* ------------------------------------------------------------
   8. Separator, quote, lijsten
   ------------------------------------------------------------ */
.lw-theme .w-separator{ border-color: var(--lw-lijn) !important; }
.lw-theme .lw-lijn-kort .w-separator{ width: 56px; margin-left: 0; border-top-color: var(--lw-brons) !important; }
.lw-theme blockquote,
.lw-theme .wp-block-quote{
  border: 0; border-left: 1px solid var(--lw-brons);
  padding: 0 0 0 var(--lw-space-m); margin: var(--lw-space-m) 0;
  font-family: var(--lw-font-kop); font-size: 22px; font-weight: 300; line-height: 1.5;
  color: var(--lw-donker); background: none;
}
.lw-theme blockquote cite{
  display: block; margin-top: 14px;
  font-family: var(--lw-font-kop); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lw-grijs); font-style: normal;
}
.lw-theme ul, .lw-theme ol{ padding-left: 1.3em; }
.lw-theme li{ margin-bottom: .5em; }

/* ------------------------------------------------------------
   9. Tabbladen, accordeon, tabellen
   ------------------------------------------------------------ */
.lw-theme .w-tabs-item,
.lw-theme .vc_tta-tab > a{
  font-family: var(--lw-font-kop) !important;
  font-size: 12px !important; letter-spacing: .18em !important;
  text-transform: uppercase !important; border-radius: 0 !important;
}
.lw-theme .w-tabs-list,
.lw-theme .vc_tta-tabs-list{ border-bottom: 1px solid var(--lw-lijn); }
.lw-theme .w-tabs-item.active,
.lw-theme .vc_tta-tab.vc_active > a{
  color: var(--lw-donker) !important;
  border-bottom: 1px solid var(--lw-brons) !important;
  background: transparent !important;
}
.lw-theme .w-tabs-section-header,
.lw-theme .vc_tta-panel-title > a{
  font-family: var(--lw-font-kop) !important;
  font-size: 20px !important; font-weight: 300 !important;
  border-radius: 0 !important; background: transparent !important;
  border-top: 1px solid var(--lw-lijn) !important;
  padding: 22px 0 !important;
}
.lw-theme table{ width: 100%; border-collapse: collapse; border: 0; }
.lw-theme table th{
  font-family: var(--lw-font-kop); font-weight: 400; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--lw-grijs); text-align: left;
}
.lw-theme table :where(td, th){ border: 0; border-bottom: 1px solid var(--lw-lijn); padding: 15px 0; }

/* ------------------------------------------------------------
   10. Formulieren (incl. Contact Form 7)
   ------------------------------------------------------------ */
div#gform_confirmation_message_1 > h6 {
    line-height: 1rem !important;
}
.lw-theme :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], input[type="date"], select, textarea){
  font-family: var(--lw-font-tekst) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: var(--lw-donker) !important;
  background: #fff !important;
  border: 1px solid rgba(35,33,29,.16) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 15px 16px !important;
  width: 100%;
  transition: border-color .2s;
}
.lw-theme .gchoice{
  padding-inline-end: 8px !important;
}
.lw-theme :where(input, select, textarea):focus{
  border-color: var(--lw-brons) !important; outline: none !important;
}
.lw-theme label,
.lw-theme legend,
.lw-theme .wpcf7-form label{
  display: block;
  font-family: var(--lw-font-kop);
  font-size: 12px !important; letter-spacing: .16em; text-transform: uppercase;
  color: #5c5850; margin-bottom: 9px; font-weight: 400 !important;
}
/* ------------------------------------------------------------
   Doel checkbox als button weergeven checkbox zelf niet
   ------------------------------------------------------------ */
/* Stap 1: Verberg de standaard checkbox, zodat deze als button kan worden weergegeven */
.lw-theme .ginput_container.ginput_container_checkbox input[type="checkbox"]{
  display: none !important;
}
/* Stap 2: Stijl de checkbox als button */
.lw-theme .ginput_container.ginput_container_checkbox input[type="checkbox"] + label{
  display: inline-block;
  padding: 9px 15px;
  background: var(--lw-white);
  color: var(--lw-donker);
  border: 1px solid rgba(35, 33, 29, .16) !important;
  border-radius: 0;
  cursor: pointer;
  transition: background .2s, color .2s;
  text-transform: unset !important;
}
/* Stap 2: extra small screens padding kleiner maken */
@media (max-width: 370px){
  .lw-theme .ginput_container.ginput_container_checkbox input[type="checkbox"] + label{
    padding: 6px 4px;
  }
}
.lw-theme .ginput_container.ginput_container_checkbox input[type="checkbox"]:checked + label{
  background: var(--lw-brons);
  color: #fff;
}
/* Stap 3: Klik op de button om de checkbox te selecteren */
.lw-theme .ginput_container.ginput_container_checkbox input[type="checkbox"] + label{
  user-select: none;
}
/* Stap 4: Hover effect voor de checkbox button text: goud en border: goud */
.lw-theme .ginput_container.ginput_container_checkbox input[type="checkbox"] + label:hover{
  background: var(--lw-white);
  color: var(--lw-brons);
  border-color: var(--lw-brons) !important;
}
.lw-theme ::placeholder{ color: #a19a8e; opacity: 1; }
.lw-theme .wpcf7-response-output{
  border: 0 !important; border-left: 1px solid var(--lw-brons) !important;
  background: var(--lw-zand); padding: 16px 20px !important; margin: 20px 0 0 !important;
  font-size: 16px;
}
.lw-theme .ginput_container_consent{
  display: flex;
  align-items: center;
  gap: 8px;
}
.lw-theme .gform_required_legend{
  display: none;
}
.lw-theme .ginput_container_consent input[type="checkbox"]{
  border: 1px solid rgba(35, 33, 29, .16) !important;
  margin-bottom: 4px !important;
}
.lw-theme .ginput_container_consent input[type="checkbox"]:checked{
  border: 1px solid var(--lw-brons) !important;
}
/* ------------------------------------------------------------
   11. Header en navigatie
   ------------------------------------------------------------ */
.lw-theme .l-header{ background: rgba(251,248,244,.94); }
.lw-theme .l-subheader{ border-bottom: 1px solid rgba(35,33,29,.08); }
.lw-theme .l-subheader-h{ max-width: var(--lw-max); padding: 0 var(--lw-pad); }
.lw-theme .w-nav-list.level_1 > .w-nav-item > .w-nav-anchor{
  font-family: var(--lw-font-kop);
  font-size: 13px; font-weight: 400; letter-spacing: .18em;
  text-transform: uppercase; color: #5c5850;
}
.lw-theme .w-nav-item.level_1:hover > .w-nav-anchor,
.lw-theme .w-nav-item.level_1.current-menu-item > .w-nav-anchor,
.lw-theme .w-nav-item.level_1.current-menu-parent > .w-nav-anchor{
  color: var(--lw-donker);
}
/*.lw-theme .w-nav-item.level_1.current-menu-item > .w-nav-anchor::after,
.lw-theme .w-nav-item.level_1.current-menu-parent > .w-nav-anchor::after{
  content: ""; position: absolute; left: 1em; right: 1em; bottom: 8px;
  height: 1px; background: var(--lw-brons);
}*/
.lw-theme .w-nav-item.level_1.current-menu-item > .w-nav-anchor > .w-nav-title:after,
.lw-theme .w-nav-item.level_1.current-menu-parent > .w-nav-anchor > .w-nav-title:after {
    display: block;
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: -.4em;
    margin: 0 auto -2px;
    height: 2px;
    width: 100%;
    background: var(--lw-brons) !important;
    opacity: 1 !important;
    transition: all .2s;
}
.lw-theme .w-nav-list.level_2{
  background: #fff; border: 1px solid rgba(35,33,29,.1); border-radius: 0; box-shadow: var(--lw-schaduw-zacht);
}
.lw-theme .w-nav-list.level_2 .w-nav-anchor{
  font-family: var(--lw-font-kop); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
.lw-theme .w-nav.type_mobile .w-nav-list.level_1{ background: var(--lw-creme); }

/* ------------------------------------------------------------
   12. Footer
   ------------------------------------------------------------ */
#menu-footer-snelmenu{ padding: 0 !important; }
.lw-theme .l-footer{ background: var(--lw-donkerder); color: rgba(255,255,255,.6); }
.lw-theme .l-footer :where(h1,h2,h3,h4,h5,h6), .lw-theme .l-footer :where(h1,h2,h3,h4,h5,h6) :where(*){
  font-size: 12px !important; letter-spacing: .2em !important; text-transform: uppercase !important; color: #fff !important; font-weight: bold !important; margin-bottom: 20px !important;
}
.lw-theme .l-footer :where(p, li, span){ color: rgba(255,255,255,.6); font-size: 16px; }
.lw-theme .l-footer a{ color: rgba(255,255,255,.6); }
.lw-theme .l-footer a:hover{ color: var(--lw-brons-licht); }
.lw-theme .l-footer .w-image img{ filter: brightness(0) invert(1); opacity: .92; }

/* ------------------------------------------------------------
   13. Berichten, archieven, paginering
   ------------------------------------------------------------ */
.lw-theme .w-grid-item-h{ border-radius: 0; box-shadow: none; }
.lw-theme .w-grid-item .post_title{ font-size: 26px; font-weight: 300; }
.lw-theme .w-post-elm.post_date,
.lw-theme .w-post-elm.post_taxonomy{
  font-family: var(--lw-font-kop); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lw-grijs);
}
.lw-theme .w-post-elm.post_taxonomy a{ color: var(--lw-brons); }
.lw-theme .pagination .page-numbers{
  font-family: var(--lw-font-kop); font-size: 12px; letter-spacing: .16em;
  border-radius: 0; border-color: var(--lw-lijn);
}
.lw-theme .pagination .page-numbers.current{ background: var(--lw-brons); color: #fff; border-color: var(--lw-brons); }

/* ------------------------------------------------------------
   14. Diverse Impreza-elementen
   ------------------------------------------------------------ */
.lw-theme .w-counter-number{ font-family: var(--lw-font-kop); font-weight: 200; color: var(--lw-brons); }
.lw-theme .w-iconbox-title{ font-family: var(--lw-font-kop); font-weight: 300; font-size: 22px; }
.lw-theme .w-iconbox-icon{ color: var(--lw-brons); }
.lw-theme .w-progbar-bar-h{ background: var(--lw-brons) !important; border-radius: 0 !important; }
.lw-theme .w-testimonial-text{ font-family: var(--lw-font-kop); font-weight: 300; font-size: 22px; line-height: 1.5; }
.lw-theme .w-cta{ background: var(--lw-donker); color: #fff; border-radius: 0; }
.lw-theme .w-socials-item-link{ border-radius: 0; }
.lw-theme .w-search-form-btn{ border-radius: 0; }

/* Impreza's ronde hoeken globaal uitzetten (huisstijl is hoekig,
   behalve de bronzen kaarten). */
.lw-theme :where(.w-btn, .w-form-row-field, .w-image-h, .w-grid-item-h, .w-post-elm){ border-radius: 0; }

@media (max-width: 600px){
  .lw-theme .lw-kaart, .lw-theme .lw-omlijnd, .lw-theme .lw-specsheet{ padding: 32px 26px; }
  body.lw-theme{ font-size: 17px; }
}


/* ------------------------------------------------------------
   15. Loftwoning-hulpklassen (gebruikt in de geïmporteerde pagina's)
   ------------------------------------------------------------ */

/* Hero: volledige sectiebreedte, tekst verticaal gecentreerd */
.lw-theme .lw-hero{
  position: relative;
  background: var(--lw-donker) !important;
  background-size: cover !important;
  background-position: center !important;
  min-height: min(78vh, 760px);
  display: flex; align-items: center;
}
.lw-theme .lw-hero.lw-hero-medium{ min-height: min(56vh, 520px); }
.lw-theme .lw-hero::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(20,19,16,.82) 0%, rgba(20,19,16,.55) 55%, rgba(20,19,16,.25) 100%);
}
.lw-theme .lw-hero > .l-section-h{ position: relative; z-index: 1; }
.lw-theme .lw-hero :where(h1,h2,h3){ color: #fff; }
.lw-theme .lw-hero :where(p, li){ color: rgba(255,255,255,.8); }
.lw-theme .lw-hero .lw-kicker,
.lw-theme .lw-hero .lw-kicker :where(p,h1,h2,h3,h4,h5,h6){ display:flex; align-items: center; gap:16px; color: var(--lw-brons-licht) !important; }
.lw-theme .lw-hero .lw-kicker :where(p,h1,h2,h3,h4,h5,h6)::before{ content: ""; display:block; width:56px; height: 1px; background: var(--lw-brons-licht) !important; }

@media (max-width: 600px){ 
  .lw-theme .lw-hero .w-btn-wrapper, .lw-theme .lw-hero .w-btn-wrapper > *{
    width: 100%;
  }
}
/* Introparagraaf */
.lw-theme .lw-lead p{ font-size: 20px; line-height: 1.7; }

/* Afbeeldingsplaatshouder — vervang door een Image-element */
.lw-theme .lw-slot{
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--lw-lijn); color: var(--lw-grijs);
  font-family: var(--lw-font-kop); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; text-align: center; padding: 20px; overflow: hidden;
}
.lw-theme .lw-slot span{ color: inherit; }
.lw-theme .lw-slot img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lw-theme .lw-ratio-16x10 .lw-slot, .lw-theme .lw-slot.lw-ratio-16x10{ aspect-ratio: 16/10; }
.lw-theme .lw-slot.lw-ratio-16x11{ aspect-ratio: 16/11; border-radius: var(--lw-radius-media); background: rgba(255,255,255,.15); color: #fff; }
.lw-theme .lw-slot.lw-ratio-4x3{ aspect-ratio: 4/3; }
.lw-theme .lw-slot.lw-ratio-1x1{ aspect-ratio: 1/1; }
.lw-theme .lw-slot.lw-ratio-3x4{ aspect-ratio: 3/4; background: #fff; border: 1px solid rgba(35,33,29,.1); }
.lw-theme .lw-slot.lw-ratio-vol{ min-height: min(56vh, 520px); }

/* Kaart: koptekstregel met label rechts */
.lw-theme .lw-kaart-kop{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-direction: row !important;
  margin-bottom: 20px;
}
.lw-theme .lw-kaart-kop strong, .lw-theme .lw-kaart-kop .lw-strong{
  font-family: var(--lw-font-kop); font-weight: 300; font-size: 26px; letter-spacing: .04em; color: #fff;
}
.lw-mb-0{ margin-bottom: 0 !important; }
.lw-theme .lw-kaart-kop em, .lw-theme .lw-kaart-kop .lw-type, .lw-theme .lw-kaart-kop .lw-type *{
  font-family: var(--lw-font-kop); font-style: normal; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7);
}
.lw-theme .lw-kaart-link{
  display: block; margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.3);
  font-family: var(--lw-font-kop); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: #fff !important;
}
.lw-theme .lw-kaart .lw-slot{ margin-bottom: 4px; }

/* Licht kenmerkenblok (contactgegevens) */
.lw-theme .lw-specsheet-licht{
  background: var(--lw-zand); border-radius: 0; padding: 44px 40px;
}
.lw-theme .lw-specsheet-licht :where(h1,h2,h3,h4){
  font-family: var(--lw-font-kop); font-size: 22px; font-weight: 300; letter-spacing: .06em;
  text-transform: uppercase; color: var(--lw-donker); margin-bottom: 24px;
}
.lw-theme .lw-specsheet-licht :where(td, th){
  border: 0; border-top: 1px solid rgba(35,33,29,.14); padding: 15px 0;
}
.lw-theme .lw-specsheet-licht :where(td, th):first-child{
  font-family: var(--lw-font-kop); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lw-grijs);
}
.lw-theme .lw-specsheet-licht :where(td, th):last-child{ text-align: right; color: var(--lw-donker); font-size: 17px; }

/* Optieraster en tags */
.lw-theme .lw-opties ul{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: rgba(255,255,255,.14);
}
.lw-theme .lw-opties li{
  margin: 0; background: var(--lw-donker); padding: 26px 20px;
  font-family: var(--lw-font-kop); font-size: 16px; font-weight: 300; color: #fff;
}
.lw-theme .lw-tags ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.lw-theme .lw-tags li{
  margin: 0; font-family: var(--lw-font-kop); font-size: 13px; letter-spacing: .08em;
  color: #5c5850; border: 1px solid rgba(35,33,29,.18); padding: 10px 16px;
}

/* Pijlers */
.lw-theme .lw-pijler{ padding: 26px 0; border-top: 1px solid rgba(35,33,29,.12); }
.lw-theme .lw-sectie-donker .lw-pijler{ border-top-color: rgba(255,255,255,.14); }
.lw-theme .lw-pijler h4{ margin-bottom: 8px; }
.lw-theme .lw-pijler p{ font-size: 16px; line-height: 1.7; margin: 0; }

/* Donker infoblok */
.lw-theme .lw-infobox{ background: var(--lw-donker); color: #fff; padding: 44px 40px; }
.lw-theme .lw-infobox.lw-kicker{ background: var(--lw-donker); color: #fff; padding: 44px 40px 0px 40px; }
.lw-theme .lw-infobox :where(h1,h2,h3,h4){ color: #fff; }
.lw-theme .lw-infobox p{ color: rgba(255,255,255,.7); font-size: 17px; }
.lw-theme .lw-infobox .lw-kicker p{ color: var(--lw-brons-licht) !important; }

/* Kruimelpad */
.lw-theme .lw-crumbs p{
  font-family: var(--lw-font-kop); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lw-grijs); margin: 0;
}
.lw-theme .lw-crumbs a{ color: var(--lw-grijs); }

/* Kop met link ernaast */
.lw-theme .lw-grid-kop{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.lw-theme .lw-grid-kop :where(h1,h2,h3){ margin: 0; }
.lw-theme .lw-grid-kop a{
  font-family: var(--lw-font-kop); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--lw-donker); border-bottom: 1px solid var(--lw-brons); padding-bottom: 6px;
}

/* Gecentreerde slotsectie */
.lw-theme .lw-midden{ text-align: center; }
@media (max-width: 600px){
  .lw-theme .lw-midden .w-btn-wrapper, .lw-theme .lw-midden .w-btn-wrapper > a{
    width: 100%;
  }
}
.lw-theme .lw-midden p{ max-width: 620px; margin-left: auto; margin-right: auto; }

/* Onderschrift onder een plaatshouder/afbeelding */
.lw-theme .lw-onderschrift{
  font-family: var(--lw-font-kop); font-size: 13px !important; letter-spacing: .14em;
  text-transform: uppercase; color: #5c5850 !important; margin: 14px 0 0;
}


/* ------------------------------------------------------------
   16. Werkwijze-stappen en conceptcijfers
   ------------------------------------------------------------ */

/* Genummerde stap: nummer links, kop + tekst rechts. Zet deze klasse op een
   Text Block; opmaak: <span>01</span><h3>Kop</h3><p>Tekst</p>
   NB: WPBakery wikkelt de inhoud in .wpb_wrapper — het grid moet dáárop staan. */
.lw-theme .lw-stap{ padding: 30px 0; border-top: 1px solid rgba(255,255,255,.18); }
.lw-theme .lw-stap:last-child{ border-bottom: 1px solid rgba(255,255,255,.18); }
.lw-theme .lw-stap > .wpb_wrapper,
.lw-theme .lw-stap.lw-geen-wrapper{
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: start;
  gap: 0 24px;
}
/* Eerste element = het nummer. Staat links, over beide regels. */
.lw-theme .lw-stap > .wpb_wrapper > :first-child{
  grid-column: 1; grid-row: 1 / span 2;
  margin: 0; padding-top: 3px;
  font-family: var(--lw-font-kop);
  font-size: 17px; font-weight: 300; letter-spacing: .08em;
  color: var(--lw-brons-licht) !important;
  max-width: none;
}
.lw-theme .lw-stap > .wpb_wrapper > :first-child span{ color: inherit; font: inherit; }

.lw-theme .lw-stap :where(h3, h4){
  grid-column: 2; grid-row: 1;
  margin: 0 0 6px; padding-top: 0; color: #fff;
  font-size: 24px; font-weight: 300; letter-spacing: .01em;
}
.lw-theme .lw-stap > .wpb_wrapper > p:not(:first-child){
  grid-column: 2; grid-row: 2; margin: 0;
  font-size: 16px; line-height: 1.7;
  color: rgba(255,255,255,.66); max-width: 46ch;
}

/* Lichte variant, voor stappen op een crème of zand achtergrond */
.lw-theme .lw-stap-licht{ border-top-color: rgba(35,33,29,.12); }
.lw-theme .lw-stap-licht:last-child{ border-bottom-color: rgba(35,33,29,.12); }
.lw-theme .lw-stap-licht > .wpb_wrapper > :first-child{ color: var(--lw-brons) !important; }
.lw-theme .lw-stap-licht :where(h3, h4){ color: var(--lw-donker); }
.lw-theme .lw-stap-licht > .wpb_wrapper > p:not(:first-child){ color: var(--lw-tekst); }

/* Drie cijfers naast elkaar, gescheiden door een dunne lijn.
   Opmaak: <ul><li><strong>10</strong><span>Woningtypen</span></li>…</ul> */
.lw-theme .lw-cijfers ul{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
}
.lw-theme .lw-cijfers li{
  margin: 0; padding: 0 34px;
  border-left: 1px solid rgba(35,33,29,.16);
}
.lw-theme .lw-cijfers li:first-child{ padding-left: 0; border-left: 0; }
.lw-theme .lw-cijfers strong{
  display: block;
  font-family: var(--lw-font-kop); font-weight: 200; font-size: 46px; line-height: 1;
  color: var(--lw-brons); letter-spacing: 0;
}
@media (max-width: 600px){
  .lw-theme .lw-cijfers li:first-child{ 
    margin: 0; padding: 0 22px;
    border-left: 1px solid rgba(35,33,29,.16);
  }
  .lw-theme .lw-cijfers li{ width: 100%; }
}
.lw-theme .lw-cijfers span{
  display: block; margin-top: 12px;
  font-family: var(--lw-font-kop); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--lw-grijs);
}
.lw-theme .lw-sectie-donker .lw-cijfers li{ border-left-color: rgba(255,255,255,.2); }
.lw-theme .lw-sectie-donker .lw-cijfers strong{ color: var(--lw-brons-licht); }
.lw-theme .lw-sectie-donker .lw-cijfers span{ color: rgba(255,255,255,.55); }

@media (max-width: 600px){
  .lw-theme .lw-stap > .wpb_wrapper{ grid-template-columns: 52px minmax(0, 1fr); gap: 0 16px; }
  .lw-theme .lw-cijfers li{ padding: 0 22px; }
  .lw-theme .lw-cijfers strong{ font-size: 36px; }
}

/* ------------------------------------------------------------
   17. Tekstblok-ritme
   Elk WPBakery-tekstblok is een eigen blok; zonder ondermarge plakken
   kop en alinea tegen elkaar.
   ------------------------------------------------------------ */
.lw-theme .wpb_text_column{ margin-bottom: var(--lw-space-m); }
.lw-theme .wpb_text_column:last-child{ margin-bottom: 0; }
.lw-theme .wpb_text_column > .wpb_wrapper > :last-child{ margin-bottom: 0; }
.lw-theme .lw-stap{ margin-bottom: 0 !important; }
.lw-theme .lw-kicker{ margin-bottom: 0 !important; }

/* ------------------------------------------------------------
   18. woningen grid
   De LW-woningen grid is een WPBakery row. We willen volledige controle via de css
   doormiddel van een eigen class toe te voegen aan de row. De LW-woningen grid class is lw-grid-woningen.

   We hebbe de volgende breakpoints gedefinieerd:
   - 4 kolommen vanaf 1200px
   - 3 kolommen vanaf 992px
   - 2 kolommen vanaf 768px
   - 1 kolom vanaf 576px

    Er zijn twee grids een van 4 kolommen en een van 3 kolommen. De grid van
    4 kolommen is de standaard grid. De grid van 3 kolommen wordt weergegeven op de single woning type pagina.

    3 kolommen heeft vc_col-sm-4 als class en 4 kolommen heeft vc_col-sm-3 als class. 
    De grid van 3 kolommen wordt weergegeven op de single woning type pagina.
   ------------------------------------------------------------ */

   @media (min-width: 1200px){
    .lw-grid-woningen .vc_col-sm-3{
        width: calc(25% - 24px) !important;
    }
    .lw-grid-woningen .vc_col-sm-4{
        width: calc(33.3333% - 24px) !important;
    }
   }
   @media (min-width: 992px) and (max-width: 1199px){
    .lw-grid-woningen .vc_col-sm-3{
        width: calc(33.3333% - 24px) !important;
    }
    .lw-grid-woningen .vc_col-sm-4{
        width: calc(33.3333% - 24px) !important;
    }
   }
   @media (min-width: 768px) and (max-width: 991px){
    .lw-grid-woningen .vc_col-sm-3{
        width: calc(50% - 24px) !important;
    }
    .lw-grid-woningen .vc_col-sm-4{
        width: calc(50% - 24px) !important;
    }
   }
   @media (min-width: 576px) and (max-width: 767px){
    .lw-grid-woningen .vc_col-sm-3{
        width: calc(100% - 24px) !important;
    }
    .lw-grid-woningen .vc_col-sm-4{
        width: calc(100% - 24px) !important;
    }
   }
   @media (max-width: 600px){
    .lw-grid-woningen .l-section-h{
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
   }
   .lw-grid-woningen .via_flex{
    display: flex;
    flex-wrap: wrap;
    gap: 28px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
   }

   .lw-grid-woningen .vc_col-sm-3, .lw-grid-woningen .vc_col-sm-3 .vc_column-inner,
   .lw-grid-woningen .vc_col-sm-4, .lw-grid-woningen .vc_col-sm-4 .vc_column-inner{
    padding-left: 0px !important;
    padding-right: 0px !important;
   }
   /* ------------------------------------------------------------
      End of woningen grid
   ------------------------------------------------------------ */
   /* ------------------------------------------------------------
      Additional custom styles for woningen grid can be added here
   ------------------------------------------------------------ */
   .primary-link > a > .w-text-value{
    color: var(--lw-brons-licht) !important;
   }
   .primary-link > a > .fas{
    color: var(--lw-brons-licht) !important;
   }
   .primary-link > a:hover > .w-text-value, .primary-link > a:focus > .w-text-value{
    color: rgba(255,255,255,.6) !important;
   }
   .primary-link > a:hover > .fas, .primary-link > a:focus > .fas{
    color: rgba(255,255,255,.6) !important;
   }