/* ==========================================================================
   FREERUN ACHTERHOEK — ELEMENTOR COMPAT

   ALLEEN NODIG ALS JE DE ELEMENTOR-SJABLONEN GEBRUIKT.
   Plak dit ONDER het hoofdbestand (4-css-eenmalig.css), in dezelfde
   "Extra CSS" van de Customizer. De volgorde is belangrijk.

   WAAROM DIT BESTAAT
   Elementor bouwt om elke widget twee of drie extra divs. Bovendien komen
   je CSS-klassen op de buitenste div terecht en niet op de kop, de knop of
   de lijst zelf. Zonder dit bestand landt de opmaak dus op het verkeerde
   element en ziet de pagina er half uit.

   Wat hieronder gebeurt:
   - overbodige wikkels uit de layout halen met display: contents
   - de opmaak doorgeven aan het element dat er echt toe doet
   - Elementor zijn eigen kop- en knopstijlen laten erven in plaats van
     opleggen
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CONTAINERS
   Elementor zet elke container op flex met een eigen gap. Mijn secties
   rekenen op grid. Het gaat hier om structuur, dus !important is terecht:
   anders hangt het af van welk stylesheet toevallig later laadt.
   -------------------------------------------------------------------------- */

.fa-scope .e-con,
.fa-scope .e-con-inner {
  --gap: 0px;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

/* Elementor zet op elke container flex-wrap: wrap met align-content: flex-start.
   Daardoor is een flexregel maar zo breed als zijn inhoud, en heeft
   margin-inline: auto geen ruimte meer om mee te centreren: .fa-container
   plakte links tegen de rand. Met nowrap vult de regel de volle breedte en
   centreert de container weer gewoon. */
.fa-scope .e-con {
  flex-wrap: nowrap;
  align-content: stretch;
}

/* Containers met een eigen layout van mij */
.fa-scope .fa-locations,
.fa-scope .fa-offer,
.fa-scope .fa-stats__grid,
.fa-scope .fa-split,
.fa-scope .fa-rental__grid,
.fa-scope .fa-merch,
.fa-scope .fa-steps {
  display: grid !important;
}

.fa-scope .fa-location,
.fa-scope .fa-split__body,
.fa-scope .fa-offer__item,
.fa-scope .fa-hero__content,
.fa-scope .fa-cta__inner {
  display: flex !important;
  flex-direction: column !important;
}

/* Alleen display forceren is niet genoeg: .e-con zet ook flex-direction op
   column, dus knoppen kwamen onder elkaar te staan. */
.fa-scope .fa-btn-row,
.fa-scope .fa-location__head,
.fa-scope .fa-section-head__top,
.fa-scope .fa-creds {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

.fa-scope .fa-hero__inner {
  display: flex !important;
  flex-direction: row !important;
}

/* De container mag nooit zijn eigen breedte begrenzen: dat doet .fa-container */
.fa-scope .e-con > .e-con-inner {
  max-width: none;
  padding: 0;
}

/* --------------------------------------------------------------------------
   2. WIDGETWIKKELS
   display: contents laat de wikkel bestaan voor Elementor, maar haalt hem
   uit de layout. Zo werken mijn grids op de echte inhoud.
   -------------------------------------------------------------------------- */

.fa-scope .fa-hero__media .elementor-widget-image,
.fa-scope .fa-hero__media .elementor-widget-image .elementor-widget-container,
.fa-scope .fa-split__media .elementor-widget-image,
.fa-scope .fa-split__media .elementor-widget-image .elementor-widget-container,
.fa-scope .fa-merch .elementor-widget-html,
.fa-scope .fa-merch .elementor-widget-html .elementor-widget-container {
  display: contents;
}

/* Elementor zet standaard marge onder elke widget. Wij regelen ritme zelf. */
.fa-scope .elementor-widget:not(:last-child) {
  margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   3. KOPPEN
   Mijn klasse komt op de buitenste div terecht. Lettertype en kleur erven
   vanzelf door, maar Elementor zet zelf line-height op de kop. Die zetten
   we terug op erven.
   -------------------------------------------------------------------------- */

/* Extra .elementor-widget in de selector, bewust. Elementor zet zijn globale
   kop-kleur en -lettertype met .elementor-widget-heading .elementor-heading-title
   (specificiteit 0,2,0). Bij een gelijke stand wint wie het laatst laadt, en
   daar wil je niet van afhankelijk zijn. Met deze regel (0,3,0) winnen wij altijd. */
.fa-scope .elementor-widget .elementor-heading-title {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   4. TEKSTBLOKKEN
   -------------------------------------------------------------------------- */

.fa-scope .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

.fa-scope .elementor-widget-text-editor p + p {
  margin-top: var(--fa-s3);
}

/* --------------------------------------------------------------------------
   5. KNOPPEN
   Dit is het belangrijkste stuk. Elementor stopt de knop in drie divs en
   zet zijn eigen opmaak op de <a>. Wij halen de divs uit de layout en geven
   de <a> mijn knopstijl. De varianten (licht, ghost, outline) werken vanzelf
   mee, omdat die alleen custom properties zetten en die overerven.
   -------------------------------------------------------------------------- */

.fa-scope .elementor-widget-button,
.fa-scope .elementor-widget-button > .elementor-widget-container,
.fa-scope .elementor-widget-button .elementor-button-wrapper {
  display: contents;
}

/* De wikkel draagt ook de klasse .fa-btn, en display: contents haalt wel de
   doos weg maar niet de pseudo-elementen. Zonder dit zweeft er een tweede
   afgesneden hoekje los naast de knop. */
.fa-scope .elementor-widget-button.fa-btn::before,
.fa-scope .elementor-widget-button.fa-btn::after {
  content: none;
}

/* LET OP: hier mogen de --fa-btn-* variabelen NIET opnieuw gezet worden.
   De varianten (outline, light, ghost) zetten ze op de wikkel, en de <a>
   erft ze. Zet je ze hier ook, dan blokkeer je die overerving en wordt
   elke knop zwart. Vandaar var() met een terugvalwaarde. */
.fa-scope .elementor-widget-button .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 1.05em 1.9em;
  border: 2px solid var(--fa-btn-bd, var(--fa-black));
  border-radius: 0;
  background: var(--fa-btn-bg, var(--fa-black));
  color: var(--fa-btn-fg, var(--fa-white));
  font-family: var(--fa-font-text);
  font-size: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  fill: currentColor;
  transition: background-color 0.22s var(--fa-ease), color 0.22s var(--fa-ease),
    border-color 0.22s var(--fa-ease), transform 0.22s var(--fa-ease);
  overflow: hidden;
}

/* De afgesneden hoek rechtsonder: het merkteken in het klein. */
.fa-scope .elementor-widget-button .elementor-button::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 14px;
  height: 14px;
  background: currentColor;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0.28;
  transition: width 0.22s var(--fa-ease), height 0.22s var(--fa-ease);
}

.fa-scope .elementor-widget-button .elementor-button:hover,
.fa-scope .elementor-widget-button .elementor-button:focus-visible {
  transform: translateY(-2px);
  background: var(--fa-btn-bg, var(--fa-black));
  color: var(--fa-btn-fg, var(--fa-white));
  border-color: var(--fa-btn-bd, var(--fa-black));
}

.fa-scope .elementor-widget-button .elementor-button:hover::after {
  width: 22px;
  height: 22px;
}

/* De varianten zetten alleen variabelen; die erven door naar de <a>. */
.fa-scope .elementor-widget-button.fa-btn--light:hover {
  --fa-btn-bg: transparent;
  --fa-btn-fg: var(--fa-white);
}

.fa-scope .elementor-widget-button.fa-btn--outline:hover {
  --fa-btn-bg: var(--fa-black);
  --fa-btn-fg: var(--fa-white);
}

.fa-scope .elementor-widget-button.fa-btn--ghost:hover {
  --fa-btn-bg: var(--fa-white);
  --fa-btn-fg: var(--fa-black);
  --fa-btn-bd: var(--fa-white);
}

.fa-scope .elementor-widget-button.fa-btn--sm .elementor-button {
  padding: 0.85em 1.35em;
  font-size: 0.75rem;
}

.fa-scope .elementor-widget-button.fa-btn--block .elementor-button {
  width: 100%;
}

/* De 'lees verder' link in de aanbodkaarten is ook een knopwidget, maar
   moet er als tekstlink uitzien. */
.fa-scope .elementor-widget-button.fa-offer__more .elementor-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--fa-white);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  justify-content: flex-start;
  margin-top: auto;
  padding-top: var(--fa-s2);
}

.fa-scope .elementor-widget-button.fa-offer__more .elementor-button::after {
  display: none;
}

.fa-scope .elementor-widget-button.fa-offer__more .elementor-button:hover {
  transform: none;
  gap: 1em;
}

/* --------------------------------------------------------------------------
   6. OPSOMMINGEN
   Elementor's Icon List vervangt mijn eigen lijstopmaak. Elke regel blijft
   los aanpasbaar in het paneel; de chevron tekenen we met CSS onder 45
   graden, zodat er geen icoonbibliotheek bij nodig is.
   -------------------------------------------------------------------------- */

.fa-scope .elementor-icon-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

.fa-scope .elementor-icon-list-icon {
  display: none;
}

/* Kenmerkenlijst (voor ouders, verhuur) */
.fa-scope .fa-ticks .elementor-icon-list-item {
  display: block;
  margin: 0;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--fa-hairline-dark);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.fa-scope .fa-ticks .elementor-icon-list-item:first-child {
  border-top: 1px solid var(--fa-hairline-dark);
}

.fa-on-black .fa-ticks .elementor-icon-list-item,
.fa-rental .fa-ticks .elementor-icon-list-item {
  border-color: rgba(255, 255, 255, 0.22);
}

.fa-scope .fa-ticks .elementor-icon-list-text {
  display: block;
  position: relative;
  padding-left: 1.6rem;
  color: inherit;
}

/* De chevron: twee randen onder 45 graden. Wijst vooruit, nooit omlaag. */
.fa-scope .fa-ticks .elementor-icon-list-text::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.5em;
  width: 0.4em;
  height: 0.4em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.fa-scope .fa-ticks .elementor-icon-list-text b {
  font-weight: 700;
  color: var(--fa-black);
}

.fa-on-black .fa-ticks .elementor-icon-list-text b,
.fa-rental .fa-ticks .elementor-icon-list-text b {
  color: var(--fa-white);
}

/* Gegevensregels in de locatiekaart.
   Het losse tekstdeel naast de <b> wordt vanzelf de tweede kolom. */
.fa-scope .fa-location__facts {
  margin-bottom: var(--fa-s3);
  border-top: 1px solid var(--fa-hairline-dark);
}

.fa-scope .fa-location__facts .elementor-icon-list-item {
  display: block;
  margin: 0;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--fa-hairline-dark);
}

.fa-scope .fa-location__facts .elementor-icon-list-text {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--fa-s2);
  align-items: baseline;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fa-slate);
  line-height: 1.45;
}

.fa-scope .fa-location__facts .elementor-icon-list-text b {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fa-graphite);
}

.fa-scope .fa-location--invert .elementor-icon-list-text,
.fa-scope .fa-location--invert p {
  color: var(--fa-on-dark-soft);
}

/* --------------------------------------------------------------------------
   7. DE ZWARTE LOCATIEKAART
   In de HTML-versie stond dit als losse stijl op het element zelf.
   Als Elementor-container is het een nette klasse.
   -------------------------------------------------------------------------- */

.fa-scope .fa-location--invert {
  background: var(--fa-black);
  border-color: var(--fa-black);
}

.fa-scope .fa-location--invert .fa-location__city {
  color: var(--fa-white);
}

.fa-scope .fa-location--invert::before {
  background: var(--fa-graphite);
}

/* --------------------------------------------------------------------------
   8. KLEINE DINGEN
   -------------------------------------------------------------------------- */

.fa-scope .fa-section--tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}

/* Elementor's afbeeldingswidget zet soms een eigen breedte neer. */
.fa-scope .elementor-widget-image img {
  width: 100%;
  display: block;
}

/* In de editor zelf zijn lege sierelementen onzichtbaar en dus onklikbaar.
   Dit maakt ze zichtbaar zolang je aan het bewerken bent. */
.elementor-editor-active .fa-scope .fa-wedge,
.elementor-editor-active .fa-scope .fa-hero__accent {
  outline: 1px dashed rgba(125, 125, 125, 0.6);
}


/* --------------------------------------------------------------------------
   9. CORRECTIES NA TEST OP DE LIVE PAGINA
   -------------------------------------------------------------------------- */

/* 9a. Hoekvlakken schoten naar links en dekten de titel af.
   Elementor gebruikt ::before van elke container voor zijn eigen
   achtergrond-overlay en zet daar left: 0 op. Mijn hoekvlak gebruikt
   hetzelfde pseudo-element en zet right: 0. Links en rechts tegelijk kan
   niet: de browser laat dan right vallen en plakt het vlak links, dwars
   over "DIDAM" en over "HUUR HET MATERIAAL".
   left: auto zet dat recht. */
.fa-scope .fa-location::before,
.fa-scope .fa-merch-card::before {
  left: auto !important;
  right: 0 !important;
  bottom: auto !important;
  /* Ook de maat forceren. Elementor zet op datzelfde pseudo-element
     width en height op 100%. Nu laadt onze CSS later en winnen we, maar
     daar wil ik niet van afhangen: bij een plugin-update of een andere
     laadvolgorde zou het hoekvlak zo de hele kaart vullen. */
  width: var(--fa-wedge-sm) !important;
  height: var(--fa-wedge-sm) !important;
  clip-path: polygon(100% 0, 100% 100%, 0 0) !important;
}

.fa-scope .fa-rental::before {
  left: auto !important;
  right: 0 !important;
  bottom: auto !important;
  width: var(--fa-wedge) !important;
  height: var(--fa-wedge) !important;
  clip-path: polygon(100% 0, 100% 100%, 0 0) !important;
}

/* 9b. Sierelementen in een HTML-widget positioneerden zich tegen die widget
   in plaats van tegen de sectie. Door de widget uit de positionering te
   halen vallen de diagonalen weer op hun plek. */
.fa-scope .elementor-widget-html:has(.fa-wedge),
.fa-scope .elementor-widget-html:has(.fa-hero__accent) {
  position: static;
}

/* 9c. De "lees verder" link viel weg achter het hover-vlak.
   De knopwikkel staat op display: contents en kan dus geen z-index dragen;
   die moet op de link zelf. */
.fa-scope .elementor-widget-button.fa-offer__more .elementor-button {
  position: relative;
  z-index: 2;
}

/* 9d. Het hover-vlak in de aanbodkaarten was zo groot dat het over de tekst
   viel. Kleiner, en het blijft in de hoek waar het hoort. */
.fa-scope .fa-offer__item:hover::after,
.fa-scope .fa-offer__item:focus-within::after {
  width: var(--fa-wedge-sm);
  height: var(--fa-wedge-sm);
}

/* 9e. De statusvlag stond deels onder het hoekvlak. */
.fa-scope .fa-location__head {
  position: relative;
  z-index: 2;
}


/* ==========================================================================
   10. HEADER MET WORDPRESS-MENU
   De menulinks komen uit Weergave -> Menu's, niet uit de code. Elementor
   rendert dat menu met eigen klassen; hieronder krijgen die de huisstijl.

   JIJ HOEFT HIER NIETS AAN TE DOEN om links te wijzigen. Dat doe je in
   WordPress bij Weergave -> Menu's.
   ========================================================================== */

/* --- 10a. De balk zelf ---------------------------------------------------- */

.fa-scope .fa-header .fa-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--fa-s3);
  min-height: 78px;
}

/* --- 10b. Het logo -------------------------------------------------------- */

/* HET BLAUW ZAT HIER. Zonder eigen hover-regel pakte de link de
   standaard linkkleur van Elementor (#4054B2, donkerblauw). Alle vier de
   toestanden staan nu vast op wit, dus dat kan niet meer gebeuren. */
.fa-scope .fa-header__logo,
.fa-scope .fa-header__logo:link,
.fa-scope .fa-header__logo:visited,
.fa-scope .fa-header__logo:hover,
.fa-scope .fa-header__logo:focus,
.fa-scope .fa-header__logo:active {
  color: var(--fa-white) !important;
  text-decoration: none;
}

/* De groei-animatie. transform-origin links, anders schuift het logo
   van de rand af. */
.fa-scope .fa-header__logo {
  display: block;
  flex: none;
  width: clamp(150px, 21vw, 208px);
  transform-origin: left center;
  transition: transform 0.28s var(--fa-ease);
  will-change: transform;
}

.fa-scope .fa-header__logo:hover,
.fa-scope .fa-header__logo:focus-visible {
  transform: scale(1.05);
}

.fa-scope .fa-header__logo svg {
  width: 100%;
  height: auto;
  fill: currentColor;
}

/* --- 10c. Het menu, horizontaal op desktop -------------------------------- */

.fa-scope .fa-nav {
  margin-left: auto;
}

.fa-scope .fa-nav .elementor-nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.fa-scope .fa-nav .elementor-nav-menu li {
  margin: 0;
  position: relative;
}

.fa-scope .fa-nav .elementor-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5rem 0 !important;
  color: var(--fa-on-dark);
  font-family: var(--fa-font-text);
  font-size: 0.78125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  fill: currentColor;
  transition: color 0.2s var(--fa-ease);
}

/* Het witte streepje dat vanuit links uitschuift */
.fa-scope .fa-nav .elementor-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--fa-white);
  transition: width 0.24s var(--fa-ease);
}

.fa-scope .fa-nav .elementor-item:hover,
.fa-scope .fa-nav .elementor-item:focus,
.fa-scope .fa-nav .elementor-item.elementor-item-active,
.fa-scope .fa-nav .elementor-item.highlighted {
  color: var(--fa-white);
  background: none;
}

.fa-scope .fa-nav .elementor-item:hover::after,
.fa-scope .fa-nav .elementor-item:focus::after,
.fa-scope .fa-nav .elementor-item.elementor-item-active::after {
  width: 100%;
}

/* --- 10d. Het uitklapmenu onder Diensten ---------------------------------- */

.fa-scope .fa-nav .elementor-nav-menu--dropdown {
  background: var(--fa-black);
  border: 1px solid var(--fa-hairline);
  border-radius: 0;
  min-width: 15rem;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

/* Geen display hier. Elementor verbergt het uitklapmenu en toont het bij
   hover. Stond hier display: block, dan bleef het menu altijd open hangen. */
.fa-scope .fa-nav .sub-menu {
  gap: 0;
  padding: 0.35rem 0;
}

.fa-scope .fa-nav .elementor-sub-item {
  display: block;
  padding: 0.7rem 1.1rem !important;
  color: var(--fa-on-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: border-color 0.2s var(--fa-ease), color 0.2s var(--fa-ease),
    padding-left 0.2s var(--fa-ease);
}

.fa-scope .fa-nav .elementor-sub-item:hover,
.fa-scope .fa-nav .elementor-sub-item:focus,
.fa-scope .fa-nav .elementor-sub-item.elementor-item-active {
  color: var(--fa-white);
  background: none;
  border-left-color: var(--fa-white);
  padding-left: 1.4rem !important;
}

/* --- 10e. Hamburger en mobiel paneel -------------------------------------- */

.fa-scope .elementor-menu-toggle {
  background: transparent !important;
  color: var(--fa-white) !important;
  border: 0;
  padding: 0.6rem;
  margin-inline-start: auto;
}

.fa-scope .elementor-menu-toggle svg,
.fa-scope .elementor-menu-toggle i {
  fill: var(--fa-white);
  color: var(--fa-white);
  font-size: 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
}

/* LET OP: Elementor gebruikt de klasse .elementor-nav-menu--dropdown voor
   TWEE dingen: het uitklapmenu onder Diensten op desktop, en het hele
   mobiele paneel. Zonder media query kreeg het desktop-uitklapmenu de
   mobiele opmaak: Staatliches, veel te groot en te hoog.
   Alles hieronder geldt daarom alleen onder 1025 px, en richt zich op de
   losse <nav> die Elementor voor mobiel neerzet. */
@media (max-width: 1024px) {
  .fa-scope .fa-nav nav.elementor-nav-menu--dropdown {
    background: var(--fa-black);
    border: 0;
    border-top: 1px solid var(--fa-hairline);
    box-shadow: none;
    margin-top: 0;
    min-width: 0;
  }

  .fa-scope .fa-nav nav.elementor-nav-menu--dropdown .elementor-nav-menu {
    display: block;
  }

  .fa-scope .fa-nav nav.elementor-nav-menu--dropdown .elementor-item,
  .fa-scope .fa-nav nav.elementor-nav-menu--dropdown .elementor-sub-item {
    display: block;
    padding: 1rem var(--fa-gutter) !important;
    border-bottom: 1px solid var(--fa-hairline);
    border-left: 0;
    font-family: var(--fa-font-display);
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--fa-white);
  }

  .fa-scope .fa-nav nav.elementor-nav-menu--dropdown .elementor-item::after {
    display: none;
  }

  .fa-scope .fa-nav nav.elementor-nav-menu--dropdown .elementor-sub-item {
    font-family: var(--fa-font-text);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    padding-left: calc(var(--fa-gutter) + 1.25rem) !important;
    color: var(--fa-on-dark-soft);
  }

  /* De knoppen rechts horen op mobiel niet naast de hamburger te staan.
     Ze staan in het uitklapmenu en in de footer. */
  .fa-scope .fa-header__cta {
    display: none;
  }
}

/* Boven 1025 px is het uitklapmenu compact en in Montserrat. */
@media (min-width: 1025px) {
  .fa-scope .fa-nav ul.elementor-nav-menu--dropdown {
    padding: 0.35rem 0;
  }
}

/* --- 10f. Ankerlinks onder de plakkende header ---------------------------- */

/* Klikte je "Bekijk de locaties", dan schoof de titel achter de balk.
   Deze regel houdt er ruimte voor vrij. Pas het getal aan als je de
   header hoger of lager maakt. */
.fa-scope [id]:not(body) {
  scroll-margin-top: 96px;
}


/* --- 10g. Botsing met de oude header opruimen ------------------------------

   De basis-CSS bevat nog regels van de eerste, handgebouwde header. Daarin
   was .fa-nav het menu dat op mobiel verborgen moest worden. Nu is .fa-nav
   de hele Elementor-widget, en die bevat OOK de hamburger. Het gevolg was
   een mobiele balk met alleen een logo en geen enkele manier om het menu te
   openen. Elementor regelt zijn eigen responsive gedrag, dus wij moeten die
   oude regel hier terugdraaien.
   -------------------------------------------------------------------------- */

.fa-scope .fa-nav {
  display: block !important;
  margin-left: auto;
}

/* --- 10h. De twee knoppen rechts in de balk (Shop en Ledenportaal) --------

   Sinds 18 september staan er twee knoppen naast elkaar in plaats van één
   Proefles-knop. Ze zitten in een eigen container.

   WAAROM DEZE REGEL NODIG IS
   De klasse fa-header__cta zit op de Elementor-widget om de knop heen en
   krijgt hieronder display:contents. Daardoor valt de knop zelf in de flexrij
   van zijn ouder. Die ouder is nu deze container, en een Elementor-container
   is standaard een KOLOM met gap 0. Zonder de regels hieronder staan de twee
   knoppen dus onder elkaar geplakt in plaats van naast elkaar.
   -------------------------------------------------------------------------- */

.fa-scope .fa-header__acties {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  /* .e-con zet width: 100% op ELKE container. Zonder deze regel eist deze
     knoppenbalk dus de volle breedte op en duwt hij de header uit elkaar:
     gemeten op 18 september gaf dat 520 px horizontale schuifruimte en
     knoppen die 620 px buiten de balk staken. flex: 0 0 auto alleen is niet
     genoeg, want een expliciete width wint daarvan. */
  width: auto !important;
  max-width: none;
}

/* Elementor legt over elke container een ::before van 100% bij 100%. Op deze
   plek zou die over de knoppen heen liggen en klikken opvangen. */
.fa-scope .fa-header__acties::before {
  display: none;
}

/* --- 10i. De winkelwagen in de balk (alleen op de winkel) -----------------

   De widget fa-winkelwagen komt uit de winkelplugin en geeft KALE HTML terug,
   zonder de wrappers die Elementor om zijn eigen widgets zet. De knoppen
   ernaast krijgen display:contents zodat ze in de flexrij vallen; deze widget
   heeft dat ook nodig, anders staat de winkelwagen als los blok naast de rij
   in plaats van erin.
   -------------------------------------------------------------------------- */

.fa-scope .fa-header__acties .elementor-widget.fa-header__wagen,
.fa-scope .fa-header__acties .elementor-widget.fa-header__wagen > .elementor-widget-container {
  display: contents;
}

/* De verborgen tekst voor schermlezers telde mee in de breedte: het karretje
   werd daardoor 299 px breed in plaats van een icoontje met een cijfer, en duwde
   de knop ernaast de balk uit (gemeten 20 september). Dit haalt hem uit de
   layout zonder hem voor schermlezers te verbergen. */
.fa-scope .fa-winkelwagen .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* In de zwarte balk is de winkelwagen wit, net als het menu. */
.fa-scope .fa-header .fa-winkelwagen {
  color: var(--fa-white);
  min-height: 36px;
  padding-inline: 0.35rem;
}

.fa-scope .fa-header .fa-winkelwagen:hover {
  color: var(--fa-on-dark-soft);
}

.fa-scope .fa-header .fa-winkelwagen:focus-visible {
  outline: 2px solid var(--fa-white);
  outline-offset: 3px;
}

/* Onder 1025 px zijn beide knoppen verborgen (zie 10e). Dan mag de lege
   container ook geen ruimte meer innemen naast de hamburger. */
@media (max-width: 1024px) {
  .fa-scope .fa-header__acties {
    display: none !important;
  }
}

/* De knoppen vanaf 1025 px weer zichtbaar. De oude basisregel zette dat
   breekpunt op 1060 px, waardoor ze tussen 1025 en 1059 px onterecht
   verdwenen terwijl het menu al horizontaal stond. */
@media (min-width: 1025px) {
  /* De klasse fa-header__cta zit op de Elementor-widget om de knop heen, niet
     op de knop zelf. Met inline-flex werd die widget een grijs vlak met een
     witte rand (de achtergrondkleur uit de header-instellingen, met de
     knopstijl erop). Met contents blijft alleen de knop zelf zichtbaar. */
  .fa-scope .fa-header__cta {
    display: contents !important;
  }
}

/* Op mobiel staan logo en hamburger tegenover elkaar. */
@media (max-width: 1024px) {
  .fa-scope .fa-nav .elementor-menu-toggle {
    display: flex !important;
    margin-left: auto;
  }
}


/* ==========================================================================
   11. DE LOCATIEKAART-WIDGET
   Vanaf nu is een locatiekaart een echte Elementor-widget. Je klikt hem aan
   en vult de velden in; hier staat alleen nog de opmaak.
   ========================================================================== */

/* Elementor zet twee divs om elke widget. Zonder deze regel wordt die
   buitenste div het rastervak en zweeft de kaart daar los in. Met
   display: contents valt .fa-location zelf in het raster, precies zoals
   bij de oude opzet. */
.fa-scope .elementor-widget-fa-locatiekaart,
.fa-scope .elementor-widget-fa-locatiekaart > .elementor-widget-container {
  display: contents;
}

/* Het tekstje op de zwarte oproepkaart ("Jouw plaats"). */
.fa-scope .fa-location__tekst {
  color: var(--fa-on-dark-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: var(--fa-s3);
}

/* De knop in de kaart is nu een gewone <a> en geen Elementor-knopwidget,
   dus de basisstijl pakt hem rechtstreeks. Alleen de breedte forceren we,
   omdat .fa-btn--block anders verliest van de inline-flex van de basis. */
.fa-scope .fa-location__foot .fa-btn {
  width: 100%;
}

/* In de editor is een lege kaart lastig aan te klikken. */
.elementor-editor-active .fa-scope .fa-location {
  min-height: 120px;
}


/* ==========================================================================
   12. VEELGESTELDE VRAGEN (Elementor Accordion)
   Bewust de standaard Accordion-widget: zo pas je vragen en antwoorden aan
   in het paneel, met "Item toevoegen" voor een nieuwe vraag.
   ========================================================================== */

.fa-scope .fa-faq .elementor-accordion {
  border: 0;
}

.fa-scope .fa-faq .elementor-accordion-item {
  border: 0;
  border-top: 1px solid var(--fa-hairline-dark);
}

.fa-scope .fa-faq .elementor-accordion-item:last-child {
  border-bottom: 1px solid var(--fa-hairline-dark);
}

/* Flex met de vraag links en de pijl rechts. Zonder deze regel blijft het
   pictogram een inline <span>: die negeert width, waardoor de pijl bovenop
   de eerste letter van de vraag landde. */
.fa-scope .fa-faq .elementor-tab-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: transparent;
  border: 0;
  padding: 1.15rem 0;
  font-family: var(--fa-font-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--fa-black);
  cursor: pointer;
}

.fa-scope .fa-faq .elementor-accordion-title {
  order: 1;
  flex: 1 1 auto;
}

.fa-scope .fa-faq .elementor-tab-title a,
.fa-scope .fa-faq .elementor-tab-title .elementor-accordion-title {
  color: inherit;
  text-decoration: none;
}

.fa-scope .fa-faq .elementor-tab-title.elementor-active {
  color: var(--fa-black);
}

/* De pijl: twee randen onder 45 graden, net als elders op de site. */
.fa-scope .fa-faq .elementor-accordion-icon svg,
.fa-scope .fa-faq .elementor-accordion-icon i {
  display: none;
}

.fa-scope .fa-faq .elementor-accordion-icon {
  display: inline-flex;
  position: relative;
  order: 2;
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0;
}

/* Elementor stopt hier twee losse pictogrammen in, een voor open en een
   voor dicht. Die vervangen we door onze eigen pijl van twee randen. */
.fa-scope .fa-faq .elementor-accordion-icon > * {
  display: none;
}

.fa-scope .fa-faq .elementor-accordion-icon::before {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.24s var(--fa-ease);
}

.fa-scope .fa-faq .elementor-tab-title.elementor-active .elementor-accordion-icon::before {
  transform: rotate(225deg);
}

.fa-scope .fa-faq .elementor-tab-content {
  background: transparent;
  border: 0;
  padding: 0 0 1.35rem;
  color: var(--fa-slate);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.fa-scope .fa-faq .elementor-tab-content p:last-child {
  margin-bottom: 0;
}

/* Op een donker vlak draait het contrast om. */
.fa-on-black .fa-faq .elementor-accordion-item {
  border-color: var(--fa-hairline);
}

.fa-on-black .fa-faq .elementor-tab-title,
.fa-on-black .fa-faq .elementor-tab-content {
  color: var(--fa-on-dark);
}

/* ==========================================================================
   13. LEESBAARHEID OP BESTAANDE PAGINA'S
   Gevonden op de live homepage (14 september 2026). Met deze regels hoeft
   een pagina niet opnieuw geïmporteerd te worden om leesbaar te zijn.
   ========================================================================== */

/* 13a. Tekstblokken werden grijs (#7A7A7A, contrast 3,4 op Mist).
   Elementor geeft elke Text Editor-widget de globale tekstkleur van de kit.
   Dat is precies Steel, en het merkboek verbiedt Steel voor lopende tekst.
   De widget neemt nu de kleur over van de sectie waarin hij staat. */
.fa-scope .elementor-widget.elementor-widget-text-editor {
  color: inherit;
}

/* Tekstblokken die bewust een eigen kleur hebben, houden die. */
.fa-scope .elementor-widget.elementor-widget-text-editor.fa-offer__desc {
  color: var(--fa-on-dark-soft);
}

.fa-scope .elementor-widget.elementor-widget-text-editor.fa-merch-card__desc,
.fa-scope .fa-hero .elementor-widget.elementor-widget-text-editor.fa-hero__lead {
  color: var(--fa-slate);
}

.fa-scope .fa-pagehead .elementor-widget.elementor-widget-text-editor.fa-lead {
  color: var(--fa-on-dark);
}

/* 13b. Koppen op donkere vlakken zonder fa-on-black.
   Oudere sjablonen missen die klasse op de slot-CTA en het verhuurblok.
   Daar werd de kop zwart op zwart (contrast 1,0) of zwart op grafiet (2,6).
   Deze vlakken zijn altijd donker, dus de kop is daar altijd wit. */
.fa-scope .fa-cta .fa-h2,
.fa-scope .fa-cta .fa-h3,
.fa-scope .fa-rental .fa-h2,
.fa-scope .fa-rental .fa-h3,
.fa-scope .fa-panel .fa-h2,
.fa-scope .fa-panel .fa-h3,
.fa-scope .fa-pagehead .fa-display,
.fa-scope .fa-stats .fa-stat__value {
  color: var(--fa-white);
}

/* Alleen op de zwarte vlakken. Het verhuurblok en het paneel zijn grafiet;
   daar staat in de basis-CSS al een lichtere labelkleur (#c9c9c9, contrast
   4,6). Die hier overschrijven gaf 3,4. */
.fa-scope .fa-cta .fa-label,
.fa-scope .fa-stats .fa-label {
  color: var(--fa-on-dark-soft);
}

/* ==========================================================================
   14. FOOTER MET WIDGETS
   De footer bestaat uit gewone Elementor-widgets: kopjes, tekst, lijsten met
   links, social icons en een knop. Zo pas je alles aan in het paneel.
   Hier krijgen die widgets dezelfde opmaak als de oude HTML-footer.

   Elementor laadt de CSS van een widget soms pas in de body, dus NA dit
   bestand. Bij gelijke specificiteit wint Elementor dan. Daarom hebben de
   selectors hieronder bewust een extra klasse.
   ========================================================================== */

/* 14a. Structuur: raster bovenin, kolommen, balk onderin. */
.fa-scope .fa-footer__top {
  display: grid !important;
}

.fa-scope .fa-footer__col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  min-width: 0;
}

.fa-scope .fa-footer__col > .elementor-widget {
  width: 100%;
}

.fa-scope .fa-footer__bottom {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

/* 14b. Ritme. Regel 2 zet de marge onder elke widget op 0; deze twee
   hebben hun afstand nodig. */
.fa-scope .fa-footer .elementor-widget.fa-footer__tagline,
.fa-scope .fa-footer .elementor-widget.fa-footer__heading {
  margin-block-end: var(--fa-s2);
}

/* 14c. Tekst. Regel 13a geeft tekstblokken de kleur van hun sectie; in de
   footer zijn beschrijving en copyright bewust zachter. */
.fa-scope .fa-footer .elementor-widget.elementor-widget-text-editor.fa-footer__blurb,
.fa-scope .fa-footer .elementor-widget.elementor-widget-text-editor.fa-footer__copy {
  color: var(--fa-on-dark-soft);
}

.fa-scope .fa-footer .elementor-widget.elementor-widget-text-editor,
.fa-scope .fa-footer .elementor-icon-list-item .elementor-icon-list-text {
  font-family: var(--fa-font-text);
}

/* 14d. De lijsten Aanbod, Locaties en Contact. */
.fa-scope .fa-footer .fa-footer__list .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
}

.fa-scope .fa-footer .fa-footer__list .elementor-icon-list-items .elementor-icon-list-item,
.fa-scope .fa-footer .fa-footer__legal .elementor-icon-list-items .elementor-icon-list-item {
  display: block;
  margin: 0;
  padding: 0;
}

/* Link en tekst als blok: zo is een regel precies één regelhoogte hoog,
   net als in de oude footer, en is de hele regel klikbaar. */
.fa-scope .fa-footer .elementor-icon-list-item > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.fa-scope .fa-footer .fa-footer__list .elementor-icon-list-text {
  display: block;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--fa-on-dark-soft);
  transition: color 0.2s var(--fa-ease);
}

/* 14e. De juridische links onderin, op één regel. */
.fa-scope .fa-footer .fa-footer__legal .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fa-s1) var(--fa-s3);
  margin: 0;
}

.fa-scope .fa-footer .fa-footer__legal .elementor-icon-list-text {
  display: block;
  padding: 0;
  font-size: 0.75rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--fa-on-dark-soft);
  transition: color 0.2s var(--fa-ease);
}

.fa-scope .fa-footer .elementor-icon-list-item > a:hover .elementor-icon-list-text,
.fa-scope .fa-footer .elementor-icon-list-item > a:focus-visible .elementor-icon-list-text {
  color: var(--fa-white);
}

/* 14f. Social icons. Elementor kleurt ze standaard in de kleur van elk
   merk; hier worden het de lijnvierkantjes uit de huisstijl. */
.fa-scope .fa-footer .fa-socials .elementor-social-icons-wrapper {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.6rem;
  width: auto;
  word-spacing: normal;
}

.fa-scope .fa-footer .fa-socials .elementor-grid-item {
  display: block;
  margin: 0;
}

.fa-scope .fa-footer .fa-socials .elementor-social-icon {
  --e-social-icon-icon-color: var(--fa-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--fa-white);
  background: transparent;
  border: 1px solid var(--fa-hairline);
  border-radius: 0;
  opacity: 1;
  transition: background-color 0.2s var(--fa-ease), color 0.2s var(--fa-ease);
}

.fa-scope .fa-footer .fa-socials .elementor-social-icon:hover,
.fa-scope .fa-footer .fa-socials .elementor-social-icon:focus-visible {
  --e-social-icon-icon-color: var(--fa-black);
  color: var(--fa-black);
  background: var(--fa-white);
}

.fa-scope .fa-footer .fa-socials .elementor-social-icon svg {
  width: 18px;
  height: 18px;
  fill: var(--e-social-icon-icon-color);
}

.fa-scope .fa-footer .fa-socials .elementor-social-icon i {
  font-size: 18px;
  color: var(--e-social-icon-icon-color);
}

/* 14g. De Proefles-knop en de toetsenbordfocus. */
.fa-scope .elementor-widget-button.fa-footer__cta .elementor-button {
  margin-top: var(--fa-s3);
}

.fa-scope .fa-footer a:focus-visible {
  outline: 2px solid var(--fa-white);
  outline-offset: 3px;
}

/* ==========================================================================
   15. AANVRAAGFORMULIER (KINDERFEESTJES)
   Dezelfde vorm als het formulier op de lessenpagina, maar als Elementor-
   widget, zodat de velden in het paneel aan te passen zijn. Ook hier: een
   klasse extra, omdat Elementor zijn widget-CSS soms na dit bestand laadt.
   ========================================================================== */

/* 15a. Het aanvraagformulier (Elementor Pro Form). Elementor zet de velden
   in flex met procentuele breedtes; wij maken er een raster van twee
   kolommen van, net als op de lessenpagina. */
.fa-scope .fa-form .elementor-form {
  background: var(--fa-white);
  border: 2px solid var(--fa-black);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.fa-scope .fa-form .elementor-form .elementor-form-fields-wrapper {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0 !important;
}

@media (min-width: 620px) {
  .fa-scope .fa-form .elementor-form .elementor-form-fields-wrapper {
    grid-template-columns: 1fr 1fr;
  }

  .fa-scope .fa-form .elementor-form .elementor-field-group.elementor-col-100 {
    grid-column: 1 / -1;
  }
}

.fa-scope .fa-form .elementor-form .elementor-field-group {
  display: grid !important;
  align-content: start;
  gap: 0.35rem;
  width: auto !important;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
}

.fa-scope .fa-form .elementor-form .elementor-field-group > label,
.fa-scope .fa-form .elementor-form .elementor-field-label {
  margin: 0;
  padding: 0;
  font-family: var(--fa-font-text);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--fa-graphite);
}

.fa-scope .fa-form .elementor-form .elementor-field-group .elementor-field-textual {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.75rem;
  border: 2px solid var(--fa-black);
  border-radius: 0;
  background: var(--fa-white);
  box-shadow: none;
  font-family: var(--fa-font-text);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--fa-black);
}

.fa-scope .fa-form .elementor-form textarea.elementor-field-textual {
  min-height: 88px;
  resize: vertical;
}

.fa-scope .fa-form .elementor-form .elementor-field-group .elementor-field-textual:focus {
  outline: 3px solid var(--fa-black);
  outline-offset: 2px;
}

/* Keuzelijsten: Elementors pijltje eruit, de dunne huisstijlpijl erin. */
.fa-scope .fa-form .elementor-form .elementor-select-wrapper {
  position: relative;
  width: 100%;
}

.fa-scope .fa-form .elementor-form .elementor-select-wrapper::before {
  content: none;
}

.fa-scope .fa-form .elementor-form .elementor-select-wrapper .select-caret-down-wrapper {
  display: none;
}

.fa-scope .fa-form .elementor-form .elementor-select-wrapper select {
  appearance: none;
  padding-right: 2.5rem;
}

.fa-scope .fa-form .elementor-form .elementor-select-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--fa-black);
  border-bottom: 2px solid var(--fa-black);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Het vinkje voor toestemming. */
.fa-scope .fa-form .elementor-form .elementor-field-subgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.fa-scope .fa-form .elementor-form .elementor-field-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.fa-scope .fa-form .elementor-form .elementor-field-option input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0.1rem 0 0;
  accent-color: var(--fa-black);
}

.fa-scope .fa-form .elementor-form .elementor-field-option label {
  font-family: var(--fa-font-text);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5;
  text-transform: none;
  color: var(--fa-slate);
}

/* De verzendknop: de zwarte huisstijlknop over de volle breedte. */
.fa-scope .fa-form .elementor-form .elementor-field-group.elementor-field-type-submit {
  grid-column: 1 / -1;
}

.fa-scope .fa-form .elementor-form .elementor-button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 1.05em 1.9em;
  border: 2px solid var(--fa-black);
  border-radius: 0;
  background: var(--fa-black);
  color: var(--fa-white);
  font-family: var(--fa-font-text);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.22s var(--fa-ease), color 0.22s var(--fa-ease);
}

.fa-scope .fa-form .elementor-form .elementor-button[type="submit"]:hover,
.fa-scope .fa-form .elementor-form .elementor-button[type="submit"]:focus-visible {
  background: var(--fa-white);
  color: var(--fa-black);
}

/* De melding na het verzenden. */
.fa-scope .fa-form .elementor-form .elementor-message {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--fa-mist);
  color: var(--fa-black);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
}

.fa-scope .fa-form .elementor-form .elementor-message::before {
  content: none;
}

/* ==========================================================================
   16. KINDERFEESTJES, OPZET B
   Compacter en bewust anders dan de homepage: een donkere kop met foto,
   de pakketten direct daaronder en kaartjes in plaats van grote secties.
   Alle klassen beginnen met fa-kf-, zodat niets anders erdoor verandert.
   ========================================================================== */

/* 16a. Ritme: kleinere secties dan elders op de site. */
.fa-scope .fa-kf-sectie {
  position: relative;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.fa-scope .fa-kf-sectie--wit {
  background: var(--fa-white);
}

.fa-scope .fa-kf-sectie--mist {
  background: var(--fa-mist);
}

.fa-scope .fa-kf-sectie--zwart {
  background: var(--fa-black);
}

/* Kopregel: titel links, korte zin rechts. */
.fa-scope .fa-kf-rij {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fa-s2) var(--fa-s5);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.fa-scope .elementor-widget.elementor-widget-text-editor.fa-kf-rij__tekst {
  max-width: 46ch;
  color: var(--fa-slate);
}

.fa-scope .fa-kf-sectie .elementor-widget.fa-kf-sectie__kop {
  margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}

/* 16b. De kop. Foto en donkere laag stel je in Elementor in (container,
   Stijl > Achtergrond); hier staat alleen de indeling. */
.fa-scope .fa-kf-kop {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background-color: var(--fa-black);
  background-position: center;
  background-size: cover;
}

.fa-scope .fa-kf-kop > .fa-container {
  position: relative;
  z-index: 1;
}

.fa-scope .fa-kf-kop__grid {
  display: grid !important;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 960px) {
  .fa-scope .fa-kf-kop__grid {
    grid-template-columns: 1.25fr 0.85fr;
  }
}

.fa-scope .fa-kf-kop__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s3);
}

.fa-scope .fa-kf-kop .elementor-widget.fa-kf-h1 {
  font-family: var(--fa-font-display);
  font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--fa-white);
}

.fa-scope .fa-kf-kop .elementor-widget.elementor-widget-text-editor.fa-kf-lead {
  max-width: 44ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  line-height: 1.55;
  color: var(--fa-on-dark);
}

/* De vier feiten als labels met een dunne rand. */
.fa-scope .fa-kf-kop .fa-kf-feiten .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.fa-scope .fa-kf-kop .fa-kf-feiten .elementor-icon-list-items .elementor-icon-list-item {
  display: block;
  margin: 0;
  padding: 0;
}

.fa-scope .fa-kf-kop .fa-kf-feiten .elementor-icon-list-text {
  display: block;
  padding: 0.5rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-family: var(--fa-font-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fa-white);
}

/* Het witte kaartje met wat er inbegrepen is, met een schuine hoek van
   45 graden rechtsboven. */
.fa-scope .fa-kf-inbegrepen {
  display: flex !important;
  flex-direction: column !important;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--fa-white);
  color: var(--fa-black);
  clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%);
}

/* Binnen het witte kaartje gelden de donkere kleuren weer, ook al staat het
   in een zwart vlak. */
.fa-scope .fa-kf-inbegrepen .fa-ticks .elementor-icon-list-item {
  padding: 0.7rem 0;
  border-color: var(--fa-hairline-dark);
  font-size: 0.9375rem;
  color: var(--fa-slate);
}

.fa-scope .fa-kf-inbegrepen .fa-ticks .elementor-icon-list-text {
  color: var(--fa-slate);
}

.fa-scope .fa-kf-inbegrepen .fa-ticks .elementor-icon-list-text b {
  color: var(--fa-black);
}

.fa-scope .fa-kf-inbegrepen p {
  color: var(--fa-slate);
}

.fa-scope .fa-kf-inbegrepen p strong {
  color: var(--fa-black);
}

.fa-scope .fa-kf-inbegrepen .elementor-widget.elementor-widget-text-editor.fa-kf-extra {
  margin-top: var(--fa-s2);
  font-size: 0.875rem;
}

/* Op een telefoon zo compact mogelijk, zodat de prijzen snel in beeld komen. */
@media (max-width: 759px) {
  .fa-scope .fa-kf-kop {
    padding-block: 2.25rem;
  }

  .fa-scope .fa-kf-kop__grid {
    gap: 1.75rem;
  }

  .fa-scope .fa-kf-kop__tekst {
    gap: 1.1rem;
  }

  .fa-scope .fa-kf-inbegrepen {
    padding: 1.25rem;
  }

  .fa-scope .fa-kf-inbegrepen .fa-ticks .elementor-icon-list-item {
    padding: 0.5rem 0;
    font-size: 0.875rem;
  }
}

/* Kaarttitels, in de kop en in de kaartjes verderop. */
.fa-scope .elementor-widget.fa-kf-kaart__titel {
  margin-block-end: var(--fa-s2);
  font-family: var(--fa-font-display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fa-black);
}

/* 16c. De pakketten: drie vakken in één zwart kader. */
.fa-scope .fa-kf-pakketten {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 2px;
  background: var(--fa-black);
  border: 2px solid var(--fa-black);
}

@media (min-width: 760px) {
  .fa-scope .fa-kf-pakketten {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fa-scope .fa-kf-pakket {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: 0.5rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--fa-white);
}

.fa-scope .fa-kf-pakket > .elementor-widget {
  width: 100%;
}

.fa-scope .elementor-widget.fa-kf-pakket__duur {
  font-family: var(--fa-font-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fa-graphite);
}

.fa-scope .elementor-widget.fa-kf-pakket__prijs {
  font-family: var(--fa-font-display);
  font-size: clamp(2.75rem, 2rem + 2.6vw, 4rem);
  line-height: 1;
  color: var(--fa-black);
}

.fa-scope .elementor-widget.elementor-widget-text-editor.fa-kf-pakket__tekst {
  margin-bottom: var(--fa-s2);
  font-size: 0.9375rem;
  color: var(--fa-slate);
}

.fa-scope .elementor-widget-button.fa-kf-pakket__knop .elementor-button {
  margin-top: auto;
}

.fa-scope .elementor-widget.elementor-widget-text-editor.fa-kf-noot {
  max-width: 70ch;
  margin-top: var(--fa-s3);
  font-size: 0.875rem;
  color: var(--fa-slate);
}

/* 16d. Goed om te weten: drie kaartjes. */
.fa-scope .fa-kf-info {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 900px) {
  .fa-scope .fa-kf-info {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fa-scope .fa-kf-kaart {
  display: flex !important;
  flex-direction: column !important;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--fa-white);
  border-top: 4px solid var(--fa-black);
}

.fa-scope .fa-kf-kaart .fa-ticks .elementor-icon-list-item {
  padding: 0.55rem 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.fa-scope .fa-kf-kaart .fa-ticks .elementor-icon-list-item:first-child {
  border-top: 0;
}

/* Het programma genummerd: de volgorde is hier echt de volgorde. */
.fa-scope .fa-kf-kaart .fa-kf-stappen .elementor-icon-list-items {
  counter-reset: fa-stap;
  margin: 0;
}

.fa-scope .fa-kf-kaart .fa-kf-stappen .elementor-icon-list-items .elementor-icon-list-item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--fa-hairline-dark);
  counter-increment: fa-stap;
}

.fa-scope .fa-kf-kaart .fa-kf-stappen .elementor-icon-list-items .elementor-icon-list-item::before {
  content: counter(fa-stap, decimal-leading-zero);
  min-width: 1.6rem;
  font-family: var(--fa-font-display);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--fa-graphite);
}

.fa-scope .fa-kf-kaart .fa-kf-stappen .elementor-icon-list-text {
  padding: 0;
  font-family: var(--fa-font-text);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fa-black);
}

/* 16e. Aanvragen: tekst links, formulier rechts, op zwart. */
.fa-scope .fa-kf-aanvraag {
  display: grid !important;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 960px) {
  .fa-scope .fa-kf-aanvraag {
    grid-template-columns: 0.8fr 1.4fr;
  }

  .fa-scope .fa-kf-aanvraag__tekst {
    position: sticky;
    top: 110px;
  }
}

.fa-scope .fa-kf-aanvraag__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s3);
}

.fa-scope .fa-kf-aanvraag__tekst .elementor-widget-text-editor {
  max-width: 40ch;
}

.fa-scope .fa-kf-aanvraag .fa-kf-bel .elementor-icon-list-items {
  margin: 0;
}

.fa-scope .fa-kf-aanvraag .fa-kf-bel .elementor-icon-list-items .elementor-icon-list-item > a {
  display: inline-block;
  color: var(--fa-white);
  text-decoration: none;
}

.fa-scope .fa-kf-aanvraag .fa-kf-bel .elementor-icon-list-text {
  padding: 0 0 0.2rem;
  border-bottom: 2px solid var(--fa-white);
  font-family: var(--fa-font-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fa-white);
}

/* 16f. De vragen in twee kolommen. */
.fa-scope .fa-kf-faq {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .fa-scope .fa-kf-faq {
    grid-template-columns: 1fr 1fr;
  }
}

/* Onder elkaar zou de naad tussen de twee lijsten een dubbele lijn geven. */
@media (max-width: 899px) {
  .fa-scope .fa-kf-faq > .elementor-widget + .elementor-widget .elementor-accordion-item:first-child {
    border-top: 0;
  }
}

/* 16g. Het label "Populair". Een gewone kop in het pakket: in Elementor sleep
   je hem naar een ander pakket of verwijder je hem. De schuine kant loopt
   onder 45 graden. */
.fa-scope .fa-kf-pakket {
  position: relative;
}

.fa-scope .fa-kf-pakket > .elementor-widget.fa-kf-populair {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: 26px;
  padding: 0 12px 0 34px;
  background: var(--fa-black);
  clip-path: polygon(26px 0, 100% 0, 100% 100%, 0 100%);
  font-family: var(--fa-font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 26px;
  text-transform: uppercase;
  color: var(--fa-white);
}

/* 16h. De uitnodiging om te downloaden, onder de bellink. */
.fa-scope .fa-kf-uitnodiging {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: var(--fa-s3);
  width: 100%;
  margin-top: var(--fa-s2);
  padding-top: var(--fa-s3);
  border-top: 1px solid var(--fa-hairline);
}

.fa-scope .fa-kf-uitnodiging > .elementor-widget {
  flex: none;
}

.fa-scope .fa-kf-uitnodiging .fa-kf-uitnodiging__beeld {
  display: block;
  width: 96px;
  height: auto;
  box-shadow: 6px 6px 0 var(--fa-graphite);
}

.fa-scope .fa-kf-uitnodiging__tekst {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column !important;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
}

.fa-scope .fa-kf-aanvraag .elementor-widget.fa-kf-uitnodiging__titel {
  font-family: var(--fa-font-display);
  font-size: 1.35rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fa-white);
}

.fa-scope .fa-kf-aanvraag .elementor-widget.elementor-widget-text-editor.fa-kf-uitnodiging__zin {
  max-width: 34ch;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fa-on-dark);
}

/* ==========================================================================
   17. WORKSHOPS, OPZET A
   Geen prijzen en geen pakketten: alles is op maat. Bewust anders dan de
   homepage en Kinderfeestjes: een lichte kop met een brede foto en een zwarte
   feitenbalk, groepstegels die het formulier alvast invullen, een zwart vlak
   over het maatwerk en het formulier op wit.
   Alle klassen beginnen met fa-ws-, zodat niets anders erdoor verandert.
   ========================================================================== */

/* 17a. Ritme en achtergronden. */
.fa-scope .fa-ws-sectie {
  position: relative;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.fa-scope .fa-ws-sectie--wit {
  background: var(--fa-white);
}

.fa-scope .fa-ws-sectie--mist {
  background: var(--fa-mist);
}

.fa-scope .fa-ws-sectie--zwart {
  background: var(--fa-black);
  color: var(--fa-on-dark);
}

/* Kopregel: titel links, korte zin rechts. */
.fa-scope .fa-ws-rij {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fa-s2) var(--fa-s5);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.fa-scope .elementor-widget.elementor-widget-text-editor.fa-ws-rij__tekst {
  max-width: 46ch;
  color: var(--fa-slate);
}

.fa-scope .fa-ws-sectie .elementor-widget.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* 17b. De kop: titel en tekst naast elkaar, daaronder een brede foto met
   een zwarte feitenbalk die over de onderrand valt. */
.fa-scope .fa-ws-kop {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 6vw, 4.5rem);
  background: var(--fa-white);
}

.fa-scope .fa-ws-kop__rij {
  display: grid !important;
  gap: var(--fa-s3) clamp(2rem, 5vw, 4rem);
  align-items: end;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

@media (min-width: 960px) {
  .fa-scope .fa-ws-kop__rij {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.fa-scope .fa-ws-kop__titel,
.fa-scope .fa-ws-kop__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s2);
}

.fa-scope .fa-ws-kop__tekst {
  gap: var(--fa-s3);
}

.fa-scope .fa-ws-kop .elementor-widget.fa-ws-h1 {
  font-family: var(--fa-font-display);
  font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope .fa-ws-kop .elementor-widget.elementor-widget-text-editor.fa-ws-lead {
  max-width: 44ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  line-height: 1.55;
  color: var(--fa-slate);
}

.fa-scope .fa-ws-kop__beeld {
  display: flex !important;
  flex-direction: column !important;
  position: relative;
}

.fa-scope .fa-ws-kop__beeld .elementor-widget-image.fa-ws-foto {
  position: relative;
  width: 100%;
  margin: 0;
}

.fa-scope .fa-ws-kop__beeld .elementor-widget-image.fa-ws-foto img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 30%;
}

/* Schuine hoek rechtsboven, onder 45 graden. */
.fa-scope .fa-ws-kop__beeld .elementor-widget-image.fa-ws-foto::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(44px, 7vw, 104px);
  height: clamp(44px, 7vw, 104px);
  background: var(--fa-white);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  pointer-events: none;
}

@media (min-width: 760px) {
  .fa-scope .fa-ws-kop__beeld .elementor-widget-image.fa-ws-foto img {
    aspect-ratio: 21 / 8;
  }
}

.fa-scope .fa-ws-specs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  position: relative;
  z-index: 1;
  background: var(--fa-black);
}

.fa-scope .fa-ws-spec {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  border-top: 1px solid var(--fa-hairline);
  border-left: 1px solid var(--fa-hairline);
}

.fa-scope .fa-ws-specs .fa-ws-spec:nth-child(odd) {
  border-left: 0;
}

.fa-scope .fa-ws-specs .fa-ws-spec:nth-child(-n+2) {
  border-top: 0;
}

@media (min-width: 760px) {
  /* De balk schuift over de foto en krijgt linksboven een schuine kant. */
  .fa-scope .fa-ws-specs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(100%, 1000px);
    margin-top: -2.75rem;
    margin-left: auto;
    clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0 40px);
  }

  .fa-scope .fa-ws-specs .fa-ws-spec:nth-child(n) {
    padding: 1.25rem 1.4rem;
    border-top: 0;
    border-left: 1px solid var(--fa-hairline);
  }

  .fa-scope .fa-ws-specs .fa-ws-spec:first-child {
    padding-left: 2.75rem;
    border-left: 0;
  }
}

.fa-scope .fa-ws-specs .elementor-widget.fa-ws-spec__label {
  font-family: var(--fa-font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fa-on-dark-soft);
}

.fa-scope .fa-ws-specs .elementor-widget.fa-ws-spec__waarde {
  font-family: var(--fa-font-display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--fa-white);
}

@media (max-width: 759px) {
  .fa-scope .fa-ws-kop {
    padding-block: 2rem 2.5rem;
  }

  .fa-scope .fa-ws-kop__rij {
    margin-bottom: 1.5rem;
  }
}

/* 17c. Voor wie: acht tegels. De hele tegel is klikbaar; de link zelf staat
   in de knop, en een laag over de tegel maakt het vlak groter. */
.fa-scope .fa-ws-groepen {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 1000px) {
  .fa-scope .fa-ws-groepen {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
}

.fa-scope .fa-ws-groep {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem;
  position: relative;
  padding: clamp(1rem, 2vw, 1.4rem);
  background: var(--fa-white);
  color: var(--fa-black);
  transition: background-color 0.2s var(--fa-ease), color 0.2s var(--fa-ease);
}

.fa-scope .fa-ws-groep .elementor-widget.fa-ws-groep__naam {
  font-family: var(--fa-font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.65rem);
  line-height: 1;
  text-transform: uppercase;
  color: inherit;
}

.fa-scope .fa-ws-groep .elementor-widget.fa-ws-groep__naam .elementor-heading-title {
  color: inherit;
}

.fa-scope .fa-ws-groep .elementor-widget.elementor-widget-text-editor.fa-ws-groep__zin {
  flex: 1 1 auto;
  font-size: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  line-height: 1.5;
  color: var(--fa-slate);
}

.fa-scope .fa-ws-groep .elementor-widget.fa-ws-groep__knop,
.fa-scope .fa-ws-groep .elementor-widget.fa-ws-groep__knop .elementor-widget-container,
.fa-scope .fa-ws-groep .elementor-widget.fa-ws-groep__knop .elementor-button-wrapper {
  position: static;
}

/* Regel 1-9 maakt van elke knopwidget een zwarte blokknop (gecentreerd,
   position: relative, hoekje via ::after). Hier is het een tekstlink, dus
   dat zetten we allemaal terug. Door display: contents op de wikkel is de
   <a> zelf het vak in de tegel. */
.fa-scope .fa-ws-groep .elementor-widget.fa-ws-groep__knop .elementor-button {
  position: static;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  font-family: var(--fa-font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  transform: none;
}

/* De laag die de hele tegel klikbaar maakt. */
.fa-scope .fa-ws-groep .elementor-widget.fa-ws-groep__knop .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Pijl vooruit, als een hoek van 45 graden. */
.fa-scope .fa-ws-groep .elementor-widget.fa-ws-groep__knop .elementor-button::after,
.fa-scope .fa-ws-groep .elementor-widget.fa-ws-groep__knop .elementor-button:hover::after {
  content: "";
  position: static;
  width: 0.45rem;
  height: 0.45rem;
  background: none;
  clip-path: none;
  opacity: 1;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--fa-ease);
}

.fa-scope .fa-ws-groep:hover {
  background: var(--fa-black);
  color: var(--fa-white);
}

.fa-scope .fa-ws-groep:hover .elementor-widget.elementor-widget-text-editor.fa-ws-groep__zin {
  color: var(--fa-on-dark);
}

.fa-scope .fa-ws-groep .elementor-widget.fa-ws-groep__knop .elementor-button:hover {
  background: transparent;
  color: inherit;
  transform: none;
}

.fa-scope .fa-ws-groep:hover .elementor-widget.fa-ws-groep__knop .elementor-button::after {
  transform: translateX(3px) rotate(45deg);
}

.fa-scope .fa-ws-groep:has(.elementor-button:focus-visible) {
  outline: 3px solid var(--fa-black);
  outline-offset: 3px;
}

.fa-scope .fa-ws-groep .elementor-widget.fa-ws-groep__knop .elementor-button:focus-visible {
  outline: none;
}

/* 17d. Op maat, op zwart: tekst met de verhouding per trainer, en de stappen. */
.fa-scope .fa-ws-maat {
  display: grid !important;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

@media (min-width: 960px) {
  .fa-scope .fa-ws-maat {
    grid-template-columns: 1fr 1fr;
  }
}

.fa-scope .fa-ws-maat__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s3);
}

.fa-scope .fa-ws-maat .fa-label {
  color: var(--fa-on-dark-soft);
}

.fa-scope .fa-ws-maat .elementor-widget.fa-h2 {
  color: var(--fa-white);
}

.fa-scope .fa-ws-maat__tekst .elementor-widget.elementor-widget-text-editor {
  max-width: 46ch;
  color: var(--fa-on-dark);
}

.fa-scope .fa-ws-ratio {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--fa-s2);
  width: 100%;
  padding-top: var(--fa-s3);
  border-top: 1px solid var(--fa-hairline);
}

.fa-scope .fa-ws-ratio .fa-ws-ratio__rij {
  display: grid;
  grid-template-columns: repeat(25, minmax(0, 1fr));
  gap: 3px;
  max-width: 440px;
}

.fa-scope .fa-ws-ratio .fa-ws-ratio__rij span {
  display: block;
  aspect-ratio: 1 / 2.2;
  background: var(--fa-white);
}

.fa-scope .fa-ws-ratio .fa-ws-ratio__rij span:nth-child(n+21) {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--fa-on-dark-soft);
}

.fa-scope .fa-ws-ratio .elementor-widget.elementor-widget-text-editor.fa-ws-ratio__tekst {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fa-on-dark);
}

.fa-scope .fa-ws-ratio .fa-ws-ratio__tekst strong {
  color: var(--fa-white);
}

.fa-scope .fa-ws-stappen {
  display: flex !important;
  flex-direction: column !important;
  gap: 0;
  counter-reset: fa-ws-stap;
}

.fa-scope .fa-ws-stappen .elementor-widget.fa-ws-stappen__kop {
  margin-block-end: var(--fa-s2);
  font-family: var(--fa-font-display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fa-white);
}

.fa-scope .fa-ws-stap {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem;
  position: relative;
  padding: 1.15rem 0 1.15rem 4rem;
  border-top: 1px solid var(--fa-hairline);
  counter-increment: fa-ws-stap;
}

.fa-scope .fa-ws-stap:last-child {
  border-bottom: 1px solid var(--fa-hairline);
}

.fa-scope .fa-ws-stap .elementor-widget.fa-ws-stap__titel {
  position: static;
  font-family: var(--fa-font-display);
  font-size: 1.35rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fa-white);
}

/* Het nummer in een pijlvorm die vooruit wijst. De volgorde is hier echt de
   volgorde, dus nummeren klopt. */
.fa-scope .fa-ws-stap .elementor-widget.fa-ws-stap__titel::before {
  content: counter(fa-ws-stap);
  position: absolute;
  top: 1.05rem;
  left: 0;
  display: flex;
  align-items: center;
  width: 2.9rem;
  height: 1.9rem;
  padding-left: 0.65rem;
  box-sizing: border-box;
  background: var(--fa-white);
  clip-path: polygon(0 0, calc(100% - 0.95rem) 0, 100% 50%, calc(100% - 0.95rem) 100%, 0 100%);
  font-family: var(--fa-font-display);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--fa-black);
}

.fa-scope .fa-ws-stap .elementor-widget.elementor-widget-text-editor.fa-ws-stap__zin {
  max-width: 44ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fa-on-dark);
}

/* 17e. Aanvragen: tekst links, formulier rechts, op wit. */
.fa-scope .fa-ws-aanvraag {
  display: grid !important;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 960px) {
  .fa-scope .fa-ws-aanvraag {
    grid-template-columns: 0.8fr 1.4fr;
  }

  .fa-scope .fa-ws-aanvraag__tekst {
    position: sticky;
    top: 110px;
  }
}

.fa-scope .fa-ws-aanvraag__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s3);
}

.fa-scope .fa-ws-aanvraag__tekst .elementor-widget.elementor-widget-text-editor {
  max-width: 40ch;
  color: var(--fa-slate);
}

.fa-scope .fa-ws-aanvraag .fa-ws-bel .elementor-icon-list-items {
  margin: 0;
}

.fa-scope .fa-ws-aanvraag .fa-ws-bel .elementor-icon-list-items .elementor-icon-list-item > a {
  display: inline-block;
  color: var(--fa-black);
  text-decoration: none;
}

.fa-scope .fa-ws-aanvraag .fa-ws-bel .elementor-icon-list-text {
  padding: 0 0 0.2rem;
  border-bottom: 2px solid var(--fa-black);
  font-family: var(--fa-font-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fa-black);
}

/* 17f. De vragen: kop links, één lijst rechts. */
.fa-scope .fa-ws-vragen {
  display: grid !important;
  gap: var(--fa-s3) clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 960px) {
  .fa-scope .fa-ws-vragen {
    grid-template-columns: 0.8fr 1.4fr;
  }
}

.fa-scope .fa-ws-vragen__kop {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s2);
}

.fa-scope .fa-ws-vragen__kop .elementor-widget.elementor-widget-text-editor {
  max-width: 34ch;
  color: var(--fa-slate);
}

/* ==========================================================================
   18. MOBIEL
   Gevonden bij een controle van de live site op 375 px (15 september 2026).
   Controleer na elke wijziging alle pagina's ook op een telefoon.
   ========================================================================== */

/* 18a. Het hamburgermenu. Elementor zet het uitklappaneel in de menuwidget,
   en die is maar zo breed als de hamburger. Het paneel duwde de balk 336 px
   hoog: het logo zakte naar het midden en "Materiaal huren" viel van het
   scherm. Nu valt het paneel onder de balk, over de volle breedte. */
@media (max-width: 1024px) {
  .fa-scope .fa-header .fa-container {
    position: relative;
  }

  .fa-scope .fa-header .elementor-widget.fa-nav,
  .fa-scope .fa-header .fa-nav > .elementor-widget-container {
    position: static;
  }

  .fa-scope .fa-header .fa-nav nav.elementor-nav-menu--dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto !important;
    z-index: 60;
  }

  .fa-scope .fa-header .fa-nav .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
}

/* 18b. Ruimte in de kop van de homepage en in het slotblok. Regel 2 zet de
   marges van alle widgets op 0, en deze containers hadden geen gap. Label,
   titel, tekst en knoppen plakten daardoor tegen elkaar, ook op desktop. */
.fa-scope .fa-hero__content,
.fa-scope .fa-cta__inner {
  gap: var(--fa-s3);
}

.fa-scope .fa-cta__inner > .fa-btn-row {
  margin-top: var(--fa-s1);
}

/* 18c. Alleen op een telefoon. */
@media (max-width: 599px) {
  /* De vier regels onder de knoppen: onder elkaar, niet krap in twee kolommen. */
  .fa-scope .fa-hero__proof {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .fa-scope .fa-hero .fa-btn-row {
    margin-bottom: var(--fa-s4);
  }

  /* De grijze driehoek viel over die regels. */
  .fa-scope .fa-hero__accent {
    width: 44px;
    height: 44px;
  }

  /* Schuine hoekjes van 72 px lazen op een smal scherm als losse vlakken. */
  .fa-scope {
    --fa-wedge: 48px;
    --fa-wedge-sm: 32px;
  }

  /* Knoptekst over twee regels plakte tegen elkaar (regelhoogte 1). */
  .fa-scope .elementor-widget-button .elementor-button {
    line-height: 1.25;
    text-align: center;
  }

  /* De Ally-knop (toegankelijkheid) staat rechtsonder op 24 px en viel over
     "Aanmelden" in de onderbalk van de lessenpagina. Ally zet die positie zelf
     vast in zijn shadow DOM, dus de balk houdt rechts ruimte vrij. Staat Ally
     ooit ergens anders, dan kan deze ruimte weg. */
  .fa-scope .fal-plakbalk {
    padding-right: 80px !important;
  }

  .fa-scope .fal-plakbalk > span {
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.3;
  }
}

/* ==========================================================================
   19. EVENTS, OPZET A
   Voor organisatoren. Bewust anders dan de homepage, Kinderfeestjes en
   Workshops: een zwarte kop zonder foto met een voorbeeldprogramma, de
   onderdelen als rijen met ruimte en duur, een checklist met foto, en het
   formulier op grafiet. Alle klassen beginnen met fa-ev-.
   ========================================================================== */

/* 19a. Ritme en achtergronden. */
.fa-scope .fa-ev-sectie {
  position: relative;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.fa-scope .fa-ev-sectie--wit {
  background: var(--fa-white);
}

.fa-scope .fa-ev-sectie--mist {
  background: var(--fa-mist);
}

.fa-scope .fa-ev-sectie--grafiet {
  background: var(--fa-graphite);
  color: var(--fa-on-dark);
}

.fa-scope .fa-ev-sectie .elementor-widget.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

.fa-scope .fa-ev-rij {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fa-s2) var(--fa-s5);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.fa-scope .elementor-widget.elementor-widget-text-editor.fa-ev-rij__tekst {
  max-width: 46ch;
  color: var(--fa-slate);
}

/* 19b. De kop: zwart, tekst links, het voorbeeldprogramma rechts. */
.fa-scope .fa-ev-kop {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background: var(--fa-black);
  overflow: hidden;
}

.fa-scope .fa-ev-kop > .fa-container {
  position: relative;
  z-index: 1;
}

.fa-scope .fa-ev-kop__grid {
  display: grid !important;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 960px) {
  .fa-scope .fa-ev-kop__grid {
    grid-template-columns: 1.2fr 0.8fr;
  }
}

.fa-scope .fa-ev-kop__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s3);
}

.fa-scope .fa-ev-kop .fa-label {
  color: var(--fa-on-dark-soft);
}

.fa-scope .fa-ev-kop .elementor-widget.fa-ev-h1 {
  font-family: var(--fa-font-display);
  font-size: clamp(2.75rem, 1.4rem + 5vw, 5.5rem);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--fa-white);
}

.fa-scope .fa-ev-kop .elementor-widget.elementor-widget-text-editor.fa-ev-lead {
  max-width: 46ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  line-height: 1.55;
  color: var(--fa-on-dark);
}

/* Het voorbeeldprogramma als dagschema: tijden in een vaste kolom. */
.fa-scope .fa-ev-programma {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--fa-white);
  border-top: 6px solid var(--fa-graphite);
  color: var(--fa-black);
}

.fa-scope .fa-ev-programma .elementor-widget.fa-ev-programma__label {
  font-family: var(--fa-font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fa-graphite);
}

.fa-scope .fa-ev-programma .elementor-widget.fa-ev-programma__titel {
  font-family: var(--fa-font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope .fa-ev-regels {
  display: flex !important;
  flex-direction: column !important;
  gap: 0;
  margin-top: var(--fa-s2);
  border-top: 2px solid var(--fa-black);
}

.fa-scope .fa-ev-regel {
  display: grid !important;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--fa-hairline-dark);
}

.fa-scope .fa-ev-regel .elementor-widget.fa-ev-regel__tijd {
  font-family: var(--fa-font-display);
  font-size: 1.35rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fa-black);
}

.fa-scope .fa-ev-regel .elementor-widget.fa-ev-regel__wat {
  font-family: var(--fa-font-text);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--fa-slate);
}

.fa-scope .fa-ev-programma .elementor-widget.elementor-widget-text-editor.fa-ev-programma__noot {
  margin-top: var(--fa-s1);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fa-graphite);
}

@media (max-width: 759px) {
  .fa-scope .fa-ev-kop {
    padding-block: 2.25rem 2.75rem;
  }
}

/* 19c. De onderdelen als rijen: naam en tekst, drie specificaties, knop. */
.fa-scope .fa-ev-onderdelen {
  display: flex !important;
  flex-direction: column !important;
  gap: 0;
  border-top: 2px solid var(--fa-black);
}

.fa-scope .fa-ev-onderdeel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 2rem;
  align-items: center;
  padding-block: clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--fa-hairline-dark);
}

@media (min-width: 900px) {
  .fa-scope .fa-ev-onderdeel {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) auto;
  }
}

.fa-scope .fa-ev-onderdeel__kop {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem;
}

.fa-scope .fa-ev-onderdeel .elementor-widget.fa-ev-onderdeel__naam {
  font-family: var(--fa-font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope .fa-ev-onderdeel .elementor-widget.elementor-widget-text-editor.fa-ev-onderdeel__tekst {
  max-width: 52ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fa-slate);
}

.fa-scope .fa-ev-onderdeel__specs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.fa-scope .fa-ev-spec {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem;
  padding: 0.2rem 0.85rem;
  border-left: 1px solid var(--fa-hairline-dark);
}

@media (max-width: 899px) {
  .fa-scope .fa-ev-onderdeel__specs .fa-ev-spec:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

.fa-scope .fa-ev-spec .elementor-widget.fa-ev-spec__label {
  font-family: var(--fa-font-text);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fa-graphite);
}

.fa-scope .fa-ev-spec .elementor-widget.fa-ev-spec__waarde {
  font-family: var(--fa-font-display);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope .fa-ev-onderdeel .elementor-widget-button .elementor-button {
  justify-self: start;
  white-space: nowrap;
}

/* 19d. Voor de organisator: foto en twee lijstjes. */
.fa-scope .fa-ev-check {
  display: grid !important;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 960px) {
  .fa-scope .fa-ev-check {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.fa-scope .fa-ev-check .elementor-widget-image.fa-ev-foto {
  position: relative;
  width: 100%;
  margin: 0;
}

.fa-scope .fa-ev-check .elementor-widget-image.fa-ev-foto img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 960px) {
  .fa-scope .fa-ev-check .elementor-widget-image.fa-ev-foto img {
    aspect-ratio: 4 / 5;
  }
}

/* Schuine hoek linksonder, punt omhoog. */
.fa-scope .fa-ev-check .elementor-widget-image.fa-ev-foto::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(44px, 7vw, 104px);
  height: clamp(44px, 7vw, 104px);
  background: var(--fa-mist);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
}

.fa-scope .fa-ev-check__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s3);
}

.fa-scope .fa-ev-lijsten {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  width: 100%;
}

@media (min-width: 640px) {
  .fa-scope .fa-ev-lijsten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fa-scope .fa-ev-lijst {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  background: var(--fa-white);
}

.fa-scope .fa-ev-lijst .elementor-widget.fa-ev-lijst__titel {
  font-family: var(--fa-font-display);
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope .fa-ev-lijst .fa-ticks .elementor-icon-list-item {
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.fa-scope .fa-ev-lijst .fa-ticks .elementor-icon-list-item:first-child {
  border-top: 0;
}

/* 19e. Aanvragen op grafiet. Labels in #c9c9c9: Steel haalt op grafiet het
   contrast niet. */
.fa-scope .fa-ev-aanvraag {
  display: grid !important;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 960px) {
  .fa-scope .fa-ev-aanvraag {
    grid-template-columns: 0.8fr 1.4fr;
  }

  .fa-scope .fa-ev-aanvraag__tekst {
    position: sticky;
    top: 110px;
  }
}

.fa-scope .fa-ev-aanvraag__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s3);
}

.fa-scope .fa-ev-aanvraag .fa-label {
  color: #c9c9c9;
}

.fa-scope .fa-ev-aanvraag .elementor-widget.fa-h2 {
  color: var(--fa-white);
}

.fa-scope .fa-ev-aanvraag__tekst .elementor-widget.elementor-widget-text-editor {
  max-width: 40ch;
  color: var(--fa-on-dark);
}

.fa-scope .fa-ev-aanvraag .fa-ev-bel .elementor-icon-list-items {
  margin: 0;
}

.fa-scope .fa-ev-aanvraag .fa-ev-bel .elementor-icon-list-items .elementor-icon-list-item > a {
  display: inline-block;
  color: var(--fa-white);
  text-decoration: none;
}

.fa-scope .fa-ev-aanvraag .fa-ev-bel .elementor-icon-list-text {
  padding: 0 0 0.2rem;
  border-bottom: 2px solid var(--fa-white);
  font-family: var(--fa-font-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fa-white);
}

/* 19f. De vragen: één smalle kolom. */
.fa-scope .fa-ev-vragen {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--fa-s3);
  max-width: 52rem;
}

/* 19g. Alles op maat: drie punten onder een dikke streep. */
.fa-scope .fa-ev-maat {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

@media (min-width: 900px) {
  .fa-scope .fa-ev-maat {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fa-scope .fa-ev-maat__item {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem;
  padding-top: 0.9rem;
  border-top: 3px solid var(--fa-black);
}

.fa-scope .fa-ev-maat__item .elementor-widget.fa-ev-maat__titel {
  font-family: var(--fa-font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope .fa-ev-maat__item .elementor-widget.elementor-widget-text-editor {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fa-slate);
}

/* De uitnodiging onder de bouwstenen. */
.fa-scope .fa-ev-sectie .elementor-widget.elementor-widget-text-editor.fa-ev-noot {
  margin-top: var(--fa-s2);
  max-width: 54ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fa-graphite);
}

/* 19h. Reacties van organisatoren: drie kaartjes. */
.fa-scope .fa-ev-quotes {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 900px) {
  .fa-scope .fa-ev-quotes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fa-scope .fa-ev-quote {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--fa-mist);
  border-top: 4px solid var(--fa-black);
}

.fa-scope .fa-ev-quote .elementor-widget.elementor-widget-text-editor.fa-ev-quote__tekst {
  flex: 1 1 auto;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--fa-slate);
}

.fa-scope .fa-ev-quote .elementor-widget.fa-ev-quote__naam {
  font-family: var(--fa-font-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--fa-black);
}

/* ==========================================================================
   20. SCHILDJE BIJ DE EIGEN LESSEN
   Het lessenblok op de lessenpagina blijft zoals het is. De plugin zet het
   schildje erbij (freerun-home.js, deel 7); deze regels geven het vorm.
   Het blok gebruikt eigen kleurnamen, dus hier staan de waarden van de
   huisstijl er los bij.
   ========================================================================== */

.fa-scope .fal .fal-rles.fa-eigen-kaart {
  position: relative;
  padding-right: 2.25rem;
}

.fa-scope .fal .fa-eigen {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  line-height: 0;
  color: inherit;
}

.fa-scope .fal .fa-eigen__svg {
  display: block;
  width: 0.95rem;
  height: 1rem;
  fill: currentColor;
}

.fa-scope .fal .fa-eigen-regel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--fa-font-text);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--fa-black);
}

.fa-scope .fal .fa-eigen-legenda {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-family: var(--fa-font-text);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--fa-graphite);
}

/* ==========================================================================
   21. MATERIAAL HUREN, OPZET A
   Een verhuurpagina: pakketten met foto en prijs, een trainer als extra, en
   een aanvraag met datum. De pakketten komen straks uit het beheerscherm
   "Verhuur"; de opmaak hieronder verandert daar niet door.
   Alle klassen beginnen met fa-mh-.
   ========================================================================== */

/* 21a. Ritme en achtergronden. */
.fa-scope .fa-mh-sectie {
  position: relative;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.fa-scope .fa-mh-sectie--wit {
  background: var(--fa-white);
}

.fa-scope .fa-mh-sectie--mist {
  background: var(--fa-mist);
}

.fa-scope .fa-mh-sectie--zwart {
  background: var(--fa-black);
  color: var(--fa-on-dark);
}

.fa-scope .fa-mh-sectie .elementor-widget.elementor-widget-text-editor p:last-child,
.fa-scope .fa-mh-kop .elementor-widget.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

.fa-scope .fa-mh-rij {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fa-s2) var(--fa-s5);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.fa-scope .elementor-widget.elementor-widget-text-editor.fa-mh-rij__tekst {
  max-width: 46ch;
  color: var(--fa-slate);
}

/* 21b. De kop op mist, met het stappenplan als wit kaartje ernaast. */
.fa-scope .fa-mh-kop {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--fa-mist);
}

.fa-scope .fa-mh-kop__grid {
  display: grid !important;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 960px) {
  .fa-scope .fa-mh-kop__grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.fa-scope .fa-mh-kop__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s3);
}

.fa-scope .fa-mh-kop .elementor-widget.fa-mh-h1 {
  font-family: var(--fa-font-display);
  font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope .fa-mh-kop .elementor-widget.elementor-widget-text-editor.fa-mh-lead {
  max-width: 44ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  line-height: 1.55;
  color: var(--fa-slate);
}

.fa-scope .fa-mh-stappen {
  display: flex !important;
  flex-direction: column !important;
  gap: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--fa-white);
  counter-reset: fa-mh-stap;
}

.fa-scope .fa-mh-stappen .elementor-widget.fa-mh-stappen__kop {
  margin-block-end: var(--fa-s2);
  font-family: var(--fa-font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fa-graphite);
}

.fa-scope .fa-mh-stap {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem;
  position: relative;
  padding: 0.9rem 0 0.9rem 3rem;
  border-top: 1px solid var(--fa-hairline-dark);
  counter-increment: fa-mh-stap;
}

.fa-scope .fa-mh-stap .elementor-widget.fa-mh-stap__titel {
  position: static;
  font-family: var(--fa-font-display);
  font-size: 1.25rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fa-black);
}

/* Het nummer in een zwart vierkant: de volgorde is hier echt de volgorde. */
.fa-scope .fa-mh-stap .elementor-widget.fa-mh-stap__titel::before {
  content: counter(fa-mh-stap);
  position: absolute;
  top: 0.85rem;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  background: var(--fa-black);
  font-family: var(--fa-font-display);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--fa-white);
}

.fa-scope .fa-mh-stap .elementor-widget.elementor-widget-text-editor.fa-mh-stap__zin {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fa-slate);
}

/* 21c. De pakketten: kaartjes met foto, prijs en wat erbij zit. */
.fa-scope .fa-mh-pakketten {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 900px) {
  .fa-scope .fa-mh-pakketten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fa-scope .fa-mh-pakket {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  background: var(--fa-white);
  border: 2px solid var(--fa-black);
}

/* Plaatshouder voor de foto uit het beheerscherm. */
.fa-scope .fa-mh-pakket .fa-mh-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 0.4rem;
  background: var(--fa-mist);
  font-family: var(--fa-font-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fa-graphite);
}

.fa-scope .fa-mh-pakket .fa-mh-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fa-scope .fa-mh-pakket .elementor-widget.fa-mh-pakket__naam,
.fa-scope .fa-mh-pakket .fa-mh-pakket__naam {
  margin: 0;
  font-family: var(--fa-font-display);
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope .fa-mh-pakket .elementor-widget.fa-mh-pakket__prijs,
.fa-scope .fa-mh-pakket .fa-mh-pakket__prijs {
  margin: 0;
  font-family: var(--fa-font-display);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1;
  color: var(--fa-graphite);
}

.fa-scope .fa-mh-pakket .elementor-widget.elementor-widget-text-editor.fa-mh-pakket__tekst,
.fa-scope .fa-mh-pakket .fa-mh-pakket__tekst {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fa-slate);
}

.fa-scope .fa-mh-pakket .fa-mh-pakket__lijst {
  flex: 1 1 auto;
}

.fa-scope .fa-mh-pakket .fa-ticks .elementor-icon-list-item,
.fa-scope .fa-mh-pakket .fa-ticks li {
  padding: 0.45rem 0;
  font-size: 0.875rem;
  line-height: 1.45;
}

.fa-scope .fa-mh-pakket .fa-ticks .elementor-icon-list-item:first-child,
.fa-scope .fa-mh-pakket .fa-ticks li:first-child {
  border-top: 0;
}

/* 21d. De trainer als extra, op zwart. */
.fa-scope .fa-mh-trainer {
  display: grid !important;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 760px) {
  .fa-scope .fa-mh-trainer {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.fa-scope .fa-mh-trainer__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s2);
}

.fa-scope .fa-mh-trainer .fa-label {
  color: var(--fa-on-dark-soft);
}

.fa-scope .fa-mh-trainer .elementor-widget.fa-h2 {
  color: var(--fa-white);
}

.fa-scope .fa-mh-trainer__tekst .elementor-widget.elementor-widget-text-editor {
  max-width: 52ch;
  color: var(--fa-on-dark);
}

.fa-scope .fa-mh-trainer__knop {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
}

/* 21e. Goed om te weten: korte feiten naast elkaar. */
.fa-scope .fa-mh-praktisch {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 640px) {
  .fa-scope .fa-mh-praktisch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .fa-scope .fa-mh-praktisch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fa-scope .fa-mh-feit {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--fa-hairline-dark);
}

.fa-scope .fa-mh-feit .elementor-widget.fa-mh-feit__label,
.fa-scope .fa-mh-feit .fa-mh-feit__label {
  margin: 0;
  font-family: var(--fa-font-text);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fa-graphite);
}

.fa-scope .fa-mh-feit .elementor-widget.elementor-widget-text-editor.fa-mh-feit__waarde,
.fa-scope .fa-mh-feit .fa-mh-feit__waarde {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fa-slate);
}

/* 21f. Aanvragen: tekst links, formulier rechts. */
.fa-scope .fa-mh-aanvraag {
  display: grid !important;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 960px) {
  .fa-scope .fa-mh-aanvraag {
    grid-template-columns: 0.8fr 1.4fr;
  }

  .fa-scope .fa-mh-aanvraag__tekst {
    position: sticky;
    top: 110px;
  }
}

.fa-scope .fa-mh-aanvraag__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s3);
}

.fa-scope .fa-mh-aanvraag__tekst .elementor-widget.elementor-widget-text-editor {
  max-width: 40ch;
  color: var(--fa-slate);
}

.fa-scope .fa-mh-aanvraag .fa-mh-bel .elementor-icon-list-items {
  margin: 0;
}

.fa-scope .fa-mh-aanvraag .fa-mh-bel .elementor-icon-list-items .elementor-icon-list-item > a {
  display: inline-block;
  color: var(--fa-black);
  text-decoration: none;
}

.fa-scope .fa-mh-aanvraag .fa-mh-bel .elementor-icon-list-text {
  padding: 0 0 0.2rem;
  border-bottom: 2px solid var(--fa-black);
  font-family: var(--fa-font-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fa-black);
}

/* De vakjes bij "Wat wil je huren?": twee kolommen zodra het past. */
.fa-scope .fa-mh-aanvraag .fa-form .elementor-field-type-checkbox .elementor-field-subgroup {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem 1rem;
}

@media (min-width: 520px) {
  .fa-scope .fa-mh-aanvraag .fa-form .elementor-field-type-checkbox .elementor-field-subgroup {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fa-scope .fa-mh-aanvraag .fa-form .elementor-field-type-checkbox .elementor-field-option label {
  font-size: 0.9375rem;
  color: var(--fa-slate);
}

/* De widget levert de opsomming als gewone <li>. De pijl en de scheidingslijn
   zitten in regel 1-9 op de Elementor-variant, dus die zetten we hier zelf. */
.fa-scope .fa-mh-pakket .fa-ticks li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  border-top: 1px solid var(--fa-hairline-dark);
  color: var(--fa-slate);
}

.fa-scope .fa-mh-pakket .fa-ticks li::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.4rem;
  border-top: 2px solid var(--fa-black);
  border-right: 2px solid var(--fa-black);
  transform: rotate(45deg);
}

/* De widget levert de pakketten als gewone HTML, zonder de wikkels van
   Elementor. Deze twee regels geven die vorm dezelfde ruimte. */
.fa-scope .fa-mh-pakket > .fa-ticks {
  margin: 0.2rem 0 0;
}

.fa-scope .fa-mh-pakket > .fa-mh-pakket__knop {
  margin-top: 0.4rem;
}

/* ==========================================================================
   22. TEAM
   De teamleden komen uit het scherm "Team" en worden door de widget als
   gewone HTML neergezet (geen Elementor-wikkels), dus de selectors hieronder
   mikken op de kale vorm. Missie en visie staan wel als Elementor-tekst op
   de pagina. Alle klassen beginnen met fa-tm-.
   ========================================================================== */

/* 22a. Ritme en achtergronden. */
.fa-scope .fa-tm-sectie {
  position: relative;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.fa-scope .fa-tm-sectie--wit {
  background: var(--fa-white);
}

.fa-scope .fa-tm-sectie--mist {
  background: var(--fa-mist);
}

.fa-scope .fa-tm-sectie--zwart {
  background: var(--fa-black);
  color: var(--fa-on-dark);
  overflow: hidden;
}

.fa-scope .fa-tm-sectie .elementor-widget.elementor-widget-text-editor p:last-child,
.fa-scope .fa-tm-kop .elementor-widget.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

.fa-scope .fa-tm-rij {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fa-s2) var(--fa-s5);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.fa-scope .elementor-widget.elementor-widget-text-editor.fa-tm-rij__tekst {
  max-width: 46ch;
  color: var(--fa-slate);
}

/* 22b. De kop: tekst links, de belofte als zwart vlak rechts. */
.fa-scope .fa-tm-kop {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--fa-white);
}

.fa-scope .fa-tm-kop__grid {
  display: grid !important;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 960px) {
  .fa-scope .fa-tm-kop__grid {
    grid-template-columns: 1.25fr 0.75fr;
  }
}

.fa-scope .fa-tm-kop__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s3);
}

.fa-scope .fa-tm-kop .elementor-widget.fa-tm-h1 {
  font-family: var(--fa-font-display);
  font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope .fa-tm-kop .elementor-widget.elementor-widget-text-editor.fa-tm-lead {
  max-width: 44ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  line-height: 1.55;
  color: var(--fa-slate);
}

.fa-scope .fa-tm-belofte {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--fa-s2);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--fa-black);
  clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%);
}

.fa-scope .fa-tm-belofte .elementor-widget.fa-tm-belofte__zin {
  font-family: var(--fa-font-display);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--fa-white);
}

.fa-scope .fa-tm-belofte .elementor-widget.elementor-widget-text-editor.fa-tm-belofte__noot {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fa-on-dark);
}

/* 22c. De teamleden: portret boven, tekst eronder. Groeit mee als er iemand
   bij komt: vanaf 640 px twee naast elkaar, vanaf 1040 px drie. */
.fa-scope .fa-tm-leden {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 640px) {
  .fa-scope .fa-tm-leden {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .fa-scope .fa-tm-leden {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fa-scope .fa-tm-lid {
  display: flex;
  flex-direction: column;
  background: var(--fa-white);
  border-top: 4px solid var(--fa-black);
}

.fa-scope .fa-tm-portret {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--fa-mist);
  font-family: var(--fa-font-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fa-graphite);
}

.fa-scope .fa-tm-portret img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.fa-scope .fa-tm-lid__tekst {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
}

.fa-scope .fa-tm-lid__naam {
  margin: 0;
  font-family: var(--fa-font-display);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope .fa-tm-lid__rol {
  margin: 0;
  font-family: var(--fa-font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fa-graphite);
}

.fa-scope .fa-tm-lid__over {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fa-slate);
}

.fa-scope .fa-tm-diplomas {
  margin: 0.4rem 0 0;
  padding: 0.7rem 0 0;
  list-style: none;
  border-top: 1px solid var(--fa-hairline-dark);
}

.fa-scope .fa-tm-diplomas li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.3rem 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--fa-slate);
}

.fa-scope .fa-tm-diplomas li::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.35rem;
  border-top: 2px solid var(--fa-black);
  border-right: 2px solid var(--fa-black);
  transform: rotate(45deg);
}

/* 22d. De missie: tekst links, foto rechts. */
.fa-scope .fa-tm-missie {
  display: grid !important;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
  z-index: 1;
}

@media (min-width: 960px) {
  .fa-scope .fa-tm-missie {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.fa-scope .fa-tm-missie__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s3);
}

.fa-scope .fa-tm-missie .fa-label {
  color: var(--fa-on-dark-soft);
}

.fa-scope .fa-tm-missie .elementor-widget.fa-h2 {
  color: var(--fa-white);
}

.fa-scope .fa-tm-missie__tekst .elementor-widget.elementor-widget-text-editor {
  max-width: 50ch;
  color: var(--fa-on-dark);
}

.fa-scope .fa-tm-missie .elementor-widget-image.fa-tm-foto {
  position: relative;
  width: 100%;
  margin: 0;
}

.fa-scope .fa-tm-missie .elementor-widget-image.fa-tm-foto img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 960px) {
  .fa-scope .fa-tm-missie .elementor-widget-image.fa-tm-foto img {
    aspect-ratio: 3 / 4;
  }
}

/* Schuine hoek linksonder, punt omhoog. */
.fa-scope .fa-tm-missie .elementor-widget-image.fa-tm-foto::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(44px, 7vw, 104px);
  height: clamp(44px, 7vw, 104px);
  background: var(--fa-black);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
}

/* 22e. De visie: drie punten onder een dikke streep. */
.fa-scope .fa-tm-visie {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

@media (min-width: 900px) {
  .fa-scope .fa-tm-visie {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fa-scope .fa-tm-punt {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem;
  padding-top: 0.9rem;
  border-top: 3px solid var(--fa-black);
}

.fa-scope .fa-tm-punt .elementor-widget.fa-tm-punt__titel {
  font-family: var(--fa-font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope .fa-tm-punt .elementor-widget.elementor-widget-text-editor {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fa-slate);
}

/* 22f. Stage: tekst links, knop rechts. */
.fa-scope .fa-tm-stage {
  display: grid !important;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 760px) {
  .fa-scope .fa-tm-stage {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.fa-scope .fa-tm-stage__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s2);
}

.fa-scope .fa-tm-stage__tekst .elementor-widget.elementor-widget-text-editor {
  max-width: 56ch;
  color: var(--fa-slate);
}

.fa-scope .fa-tm-stage__knop {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
}

/* ==========================================================================
   23. BEWEGINGSONDERWIJS
   Voor scholen: drie diensten, een lessenreeks in zes stappen en een gesprek
   aanvragen. Alle klassen beginnen met fa-bo-.
   ========================================================================== */

/* 23a. Ritme en achtergronden. */
.fa-scope .fa-bo-sectie {
  position: relative;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.fa-scope .fa-bo-sectie--wit {
  background: var(--fa-white);
}

.fa-scope .fa-bo-sectie--mist {
  background: var(--fa-mist);
}

.fa-scope .fa-bo-sectie--zwart {
  background: var(--fa-black);
  color: var(--fa-on-dark);
  overflow: hidden;
}

.fa-scope .fa-bo-sectie .elementor-widget.elementor-widget-text-editor p:last-child,
.fa-scope .fa-bo-kop .elementor-widget.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

.fa-scope .fa-bo-rij {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fa-s2) var(--fa-s5);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.fa-scope .elementor-widget.elementor-widget-text-editor.fa-bo-rij__tekst {
  max-width: 46ch;
  color: var(--fa-slate);
}

/* 23b. De kop, met het kaartje "In het kort" ernaast. */
.fa-scope .fa-bo-kop {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--fa-white);
}

.fa-scope .fa-bo-kop__grid {
  display: grid !important;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 960px) {
  .fa-scope .fa-bo-kop__grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.fa-scope .fa-bo-kop__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s3);
}

.fa-scope .fa-bo-kop .elementor-widget.fa-bo-h1 {
  font-family: var(--fa-font-display);
  font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope .fa-bo-kop .elementor-widget.elementor-widget-text-editor.fa-bo-lead {
  max-width: 44ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  line-height: 1.55;
  color: var(--fa-slate);
}

.fa-scope .fa-bo-kaart {
  display: flex !important;
  flex-direction: column !important;
  gap: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--fa-mist);
  border-top: 4px solid var(--fa-black);
}

.fa-scope .fa-bo-kaart .elementor-widget.fa-bo-kaart__kop {
  margin-block-end: var(--fa-s2);
  font-family: var(--fa-font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fa-graphite);
}

.fa-scope .fa-bo-feit {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.2rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--fa-hairline-dark);
}

.fa-scope .fa-bo-feit .elementor-widget.fa-bo-feit__label {
  font-family: var(--fa-font-text);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fa-graphite);
}

.fa-scope .fa-bo-feit .elementor-widget.elementor-widget-text-editor.fa-bo-feit__waarde {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--fa-slate);
}

/* 23c. De drie manieren, als kaarten. */
.fa-scope .fa-bo-opties {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 900px) {
  .fa-scope .fa-bo-opties {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fa-scope .fa-bo-optie {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--fa-white);
  border-top: 4px solid var(--fa-black);
}

.fa-scope .fa-bo-optie .elementor-widget.fa-bo-optie__naam {
  font-family: var(--fa-font-display);
  font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.8rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope .fa-bo-optie .elementor-widget.elementor-widget-text-editor.fa-bo-optie__tekst {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fa-slate);
}

.fa-scope .fa-bo-optie .fa-bo-optie__lijst {
  flex: 1 1 auto;
}

.fa-scope .fa-bo-optie .fa-ticks .elementor-icon-list-item {
  padding: 0.45rem 0;
  font-size: 0.875rem;
  line-height: 1.45;
}

.fa-scope .fa-bo-optie .fa-ticks .elementor-icon-list-item:first-child {
  border-top: 0;
}

/* 23d. De lessenreeks: genummerde stappen, twee kolommen zodra het past. */
.fa-scope .fa-bo-reeks {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(2rem, 4vw, 3.5rem);
  counter-reset: fa-bo-les;
  border-top: 2px solid var(--fa-black);
}

@media (min-width: 900px) {
  .fa-scope .fa-bo-reeks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fa-scope .fa-bo-les {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem;
  position: relative;
  padding: 1rem 0 1rem 3.25rem;
  border-bottom: 1px solid var(--fa-hairline-dark);
  counter-increment: fa-bo-les;
}

.fa-scope .fa-bo-les .elementor-widget.fa-bo-les__titel {
  position: static;
  font-family: var(--fa-font-display);
  font-size: 1.3rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fa-black);
}

/* Het lesnummer in een zwart vierkant. De volgorde is hier echt de volgorde. */
.fa-scope .fa-bo-les .elementor-widget.fa-bo-les__titel::before {
  content: counter(fa-bo-les);
  position: absolute;
  top: 0.95rem;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  background: var(--fa-black);
  font-family: var(--fa-font-display);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--fa-white);
}

.fa-scope .fa-bo-les .elementor-widget.elementor-widget-text-editor.fa-bo-les__zin {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fa-slate);
}

.fa-scope .fa-bo-sectie .elementor-widget.elementor-widget-text-editor.fa-bo-noot {
  margin-top: var(--fa-s2);
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fa-graphite);
}

/* 23e. Past in jullie programma, op zwart. */
.fa-scope .fa-bo-past {
  display: grid !important;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  position: relative;
  z-index: 1;
}

@media (min-width: 960px) {
  .fa-scope .fa-bo-past {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.fa-scope .fa-bo-past__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s2);
}

.fa-scope .fa-bo-past .fa-label {
  color: var(--fa-on-dark-soft);
}

.fa-scope .fa-bo-past .elementor-widget.fa-h2 {
  color: var(--fa-white);
}

.fa-scope .fa-bo-past__tekst .elementor-widget.elementor-widget-text-editor {
  max-width: 48ch;
  color: var(--fa-on-dark);
}

.fa-scope .fa-bo-past__lijsten {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) {
  .fa-scope .fa-bo-past__lijsten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fa-scope .fa-bo-lijst {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem;
  padding-top: 0.9rem;
  border-top: 3px solid var(--fa-white);
}

.fa-scope .fa-bo-lijst .elementor-widget.fa-bo-lijst__titel {
  font-family: var(--fa-font-display);
  font-size: 1.35rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fa-white);
}

/* 23f. Een gesprek aanvragen. */
.fa-scope .fa-bo-aanvraag {
  display: grid !important;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 960px) {
  .fa-scope .fa-bo-aanvraag {
    grid-template-columns: 0.8fr 1.4fr;
  }

  .fa-scope .fa-bo-aanvraag__tekst {
    position: sticky;
    top: 110px;
  }
}

.fa-scope .fa-bo-aanvraag__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s3);
}

.fa-scope .fa-bo-aanvraag__tekst .elementor-widget.elementor-widget-text-editor {
  max-width: 42ch;
  color: var(--fa-slate);
}

.fa-scope .fa-bo-aanvraag .fa-bo-bel .elementor-icon-list-items {
  margin: 0;
}

.fa-scope .fa-bo-aanvraag .fa-bo-bel .elementor-icon-list-items .elementor-icon-list-item > a {
  display: inline-block;
  color: var(--fa-black);
  text-decoration: none;
}

.fa-scope .fa-bo-aanvraag .fa-bo-bel .elementor-icon-list-text {
  padding: 0 0 0.2rem;
  border-bottom: 2px solid var(--fa-black);
  font-family: var(--fa-font-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fa-black);
}

/* 23g. De vragen: één smalle kolom. */
.fa-scope .fa-bo-vragen {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--fa-s3);
  max-width: 52rem;
}

/* ==========================================================================
   24. CONTACT
   Bewust simpel: gegevens naast de kop, daaronder snelkoppelingen naar de
   pagina waar het formulier al klaarstaat, en onderaan een kort formulier.
   Alle klassen beginnen met fa-ct-.
   ========================================================================== */

/* 24a. Ritme en achtergronden. */
.fa-scope .fa-ct-sectie {
  position: relative;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.fa-scope .fa-ct-sectie--wit {
  background: var(--fa-white);
}

.fa-scope .fa-ct-sectie--mist {
  background: var(--fa-mist);
}

.fa-scope .fa-ct-sectie .elementor-widget.elementor-widget-text-editor p:last-child,
.fa-scope .fa-ct-kop .elementor-widget.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

.fa-scope .fa-ct-rij {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fa-s2) var(--fa-s5);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.fa-scope .elementor-widget.elementor-widget-text-editor.fa-ct-rij__tekst {
  max-width: 46ch;
  color: var(--fa-slate);
}

/* 24b. De kop, met de gegevens als kaartje ernaast. */
.fa-scope .fa-ct-kop {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--fa-white);
}

.fa-scope .fa-ct-kop__grid {
  display: grid !important;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 960px) {
  .fa-scope .fa-ct-kop__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.fa-scope .fa-ct-kop__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s3);
}

.fa-scope .fa-ct-kop .elementor-widget.fa-ct-h1 {
  font-family: var(--fa-font-display);
  font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope .fa-ct-kop .elementor-widget.elementor-widget-text-editor.fa-ct-lead {
  max-width: 44ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  line-height: 1.55;
  color: var(--fa-slate);
}

.fa-scope .fa-ct-kaart {
  display: flex !important;
  flex-direction: column !important;
  gap: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--fa-mist);
  border-top: 4px solid var(--fa-black);
}

.fa-scope .fa-ct-kaart .elementor-widget.fa-ct-kaart__kop {
  margin-block-end: var(--fa-s2);
  font-family: var(--fa-font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fa-graphite);
}

.fa-scope .fa-ct-regel {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.2rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--fa-hairline-dark);
}

.fa-scope .fa-ct-regel .elementor-widget.fa-ct-regel__label {
  font-family: var(--fa-font-text);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fa-graphite);
}

.fa-scope .fa-ct-regel .elementor-widget.elementor-widget-text-editor.fa-ct-regel__waarde {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--fa-black);
}

/* Telefoon en e-mail zijn links: zelfde maat als de gewone regels. */
.fa-scope .fa-ct-regel .fa-ct-regel__link .elementor-icon-list-items {
  margin: 0;
}

.fa-scope .fa-ct-regel .fa-ct-regel__link .elementor-icon-list-items .elementor-icon-list-item > a {
  display: inline-block;
  color: var(--fa-black);
  text-decoration: none;
}

.fa-scope .fa-ct-regel .fa-ct-regel__link .elementor-icon-list-text {
  padding: 0 0 0.1rem;
  border-bottom: 2px solid var(--fa-black);
  font-family: var(--fa-font-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--fa-black);
}

.fa-scope .fa-ct-kaart .elementor-widget.elementor-widget-text-editor.fa-ct-noot {
  margin-top: var(--fa-s2);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fa-graphite);
}

/* 24c. Snelkoppelingen naar de juiste pagina. */
.fa-scope .fa-ct-routes {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1rem);
}

@media (min-width: 620px) {
  .fa-scope .fa-ct-routes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .fa-scope .fa-ct-routes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fa-scope .fa-ct-route {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem;
  position: relative;
  padding: clamp(1.1rem, 2.2vw, 1.4rem);
  background: var(--fa-white);
  color: var(--fa-black);
  transition: background-color 0.2s var(--fa-ease), color 0.2s var(--fa-ease);
}

.fa-scope .fa-ct-route .elementor-widget.fa-ct-route__naam {
  font-family: var(--fa-font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  line-height: 1;
  text-transform: uppercase;
  color: inherit;
}

.fa-scope .fa-ct-route .elementor-widget.fa-ct-route__naam .elementor-heading-title {
  color: inherit;
}

.fa-scope .fa-ct-route .elementor-widget.elementor-widget-text-editor.fa-ct-route__tekst {
  flex: 1 1 auto;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fa-slate);
}

/* De hele tegel is klikbaar: de knop is een tekstlink met een laag eroverheen.
   Regel 1-9 maakt van elke knopwidget een blokknop, dus dat zetten we terug. */
.fa-scope .fa-ct-route .elementor-widget.fa-ct-route__knop,
.fa-scope .fa-ct-route .elementor-widget.fa-ct-route__knop .elementor-widget-container,
.fa-scope .fa-ct-route .elementor-widget.fa-ct-route__knop .elementor-button-wrapper {
  position: static;
}

.fa-scope .fa-ct-route .elementor-widget.fa-ct-route__knop .elementor-button {
  position: static;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  font-family: var(--fa-font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  transform: none;
}

.fa-scope .fa-ct-route .elementor-widget.fa-ct-route__knop .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.fa-scope .fa-ct-route .elementor-widget.fa-ct-route__knop .elementor-button::after,
.fa-scope .fa-ct-route .elementor-widget.fa-ct-route__knop .elementor-button:hover::after {
  content: "";
  position: static;
  width: 0.45rem;
  height: 0.45rem;
  background: none;
  clip-path: none;
  opacity: 1;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--fa-ease);
}

.fa-scope .fa-ct-route:hover {
  background: var(--fa-black);
  color: var(--fa-white);
}

.fa-scope .fa-ct-route:hover .elementor-widget.elementor-widget-text-editor.fa-ct-route__tekst {
  color: var(--fa-on-dark);
}

.fa-scope .fa-ct-route .elementor-widget.fa-ct-route__knop .elementor-button:hover {
  background: transparent;
  color: inherit;
  transform: none;
}

.fa-scope .fa-ct-route:hover .elementor-widget.fa-ct-route__knop .elementor-button::after {
  transform: translateX(3px) rotate(45deg);
}

.fa-scope .fa-ct-route:has(.elementor-button:focus-visible) {
  outline: 3px solid var(--fa-black);
  outline-offset: 3px;
}

.fa-scope .fa-ct-route .elementor-widget.fa-ct-route__knop .elementor-button:focus-visible {
  outline: none;
}

/* 24d. Het formulier. */
.fa-scope .fa-ct-aanvraag {
  display: grid !important;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 960px) {
  .fa-scope .fa-ct-aanvraag {
    grid-template-columns: 0.8fr 1.4fr;
  }

  .fa-scope .fa-ct-aanvraag__tekst {
    position: sticky;
    top: 110px;
  }
}

.fa-scope .fa-ct-aanvraag__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s3);
}

.fa-scope .fa-ct-aanvraag__tekst .elementor-widget.elementor-widget-text-editor {
  max-width: 42ch;
  color: var(--fa-slate);
}

.fa-scope .fa-ct-aanvraag .fa-ct-bel .elementor-icon-list-items {
  margin: 0;
}

.fa-scope .fa-ct-aanvraag .fa-ct-bel .elementor-icon-list-items .elementor-icon-list-item > a {
  display: inline-block;
  color: var(--fa-black);
  text-decoration: none;
}

.fa-scope .fa-ct-aanvraag .fa-ct-bel .elementor-icon-list-text {
  padding: 0 0 0.2rem;
  border-bottom: 2px solid var(--fa-black);
  font-family: var(--fa-font-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fa-black);
}

/* ==========================================================================
   25. DIENSTEN
   De overzichtspagina: een korte zwarte kop en zes tegels met elk een eigen
   knop. De hele tegel is klikbaar. Alle klassen beginnen met fa-dn-.
   ========================================================================== */

/* 25a. De kop: kort en zwart. */
.fa-scope .fa-dn-kop {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5rem);
  background: var(--fa-black);
  color: var(--fa-on-dark);
  overflow: hidden;
}

.fa-scope .fa-dn-kop__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s2);
  position: relative;
  z-index: 1;
}

.fa-scope .fa-dn-kop .fa-label {
  color: var(--fa-on-dark-soft);
}

.fa-scope .fa-dn-kop .elementor-widget.fa-dn-h1 {
  font-family: var(--fa-font-display);
  font-size: clamp(2.75rem, 1.4rem + 5vw, 5.5rem);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--fa-white);
}

.fa-scope .fa-dn-kop .elementor-widget.elementor-widget-text-editor.fa-dn-lead {
  max-width: 52ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  line-height: 1.55;
  color: var(--fa-on-dark);
}

.fa-scope .fa-dn-kop .elementor-widget.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* 25b. Ritme van de secties eronder. */
.fa-scope .fa-dn-sectie {
  position: relative;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.fa-scope .fa-dn-sectie--wit {
  background: var(--fa-white);
}

.fa-scope .fa-dn-sectie--mist {
  background: var(--fa-mist);
}

.fa-scope .fa-dn-sectie .elementor-widget.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* 25c. De zes tegels. */
.fa-scope .fa-dn-tegels {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 620px) {
  .fa-scope .fa-dn-tegels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .fa-scope .fa-dn-tegels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fa-scope .fa-dn-tegel {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem;
  position: relative;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--fa-white);
  color: var(--fa-black);
  border: 2px solid var(--fa-black);
  transition: background-color 0.2s var(--fa-ease), color 0.2s var(--fa-ease);
}

.fa-scope .fa-dn-tegel .elementor-widget.fa-dn-tegel__label {
  font-family: var(--fa-font-text);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fa-graphite);
}

.fa-scope .fa-dn-tegel .elementor-widget.fa-dn-tegel__naam {
  font-family: var(--fa-font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: inherit;
}

.fa-scope .fa-dn-tegel .elementor-widget.fa-dn-tegel__naam .elementor-heading-title {
  color: inherit;
}

.fa-scope .fa-dn-tegel .elementor-widget.elementor-widget-text-editor.fa-dn-tegel__tekst {
  flex: 1 1 auto;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fa-slate);
}

/* De knop is een tekstlink met een laag over de hele tegel. Regel 1-9 maakt
   van elke knopwidget een blokknop, dus dat zetten we hier terug. */
.fa-scope .fa-dn-tegel .elementor-widget.fa-dn-tegel__knop,
.fa-scope .fa-dn-tegel .elementor-widget.fa-dn-tegel__knop .elementor-widget-container,
.fa-scope .fa-dn-tegel .elementor-widget.fa-dn-tegel__knop .elementor-button-wrapper {
  position: static;
}

.fa-scope .fa-dn-tegel .elementor-widget.fa-dn-tegel__knop .elementor-button {
  position: static;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  font-family: var(--fa-font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  transform: none;
}

.fa-scope .fa-dn-tegel .elementor-widget.fa-dn-tegel__knop .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.fa-scope .fa-dn-tegel .elementor-widget.fa-dn-tegel__knop .elementor-button::after,
.fa-scope .fa-dn-tegel .elementor-widget.fa-dn-tegel__knop .elementor-button:hover::after {
  content: "";
  position: static;
  width: 0.45rem;
  height: 0.45rem;
  background: none;
  clip-path: none;
  opacity: 1;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--fa-ease);
}

.fa-scope .fa-dn-tegel:hover {
  background: var(--fa-black);
  color: var(--fa-white);
}

.fa-scope .fa-dn-tegel:hover .elementor-widget.fa-dn-tegel__label {
  color: var(--fa-on-dark-soft);
}

.fa-scope .fa-dn-tegel:hover .elementor-widget.elementor-widget-text-editor.fa-dn-tegel__tekst {
  color: var(--fa-on-dark);
}

.fa-scope .fa-dn-tegel .elementor-widget.fa-dn-tegel__knop .elementor-button:hover {
  background: transparent;
  color: inherit;
  transform: none;
}

.fa-scope .fa-dn-tegel:hover .elementor-widget.fa-dn-tegel__knop .elementor-button::after {
  transform: translateX(3px) rotate(45deg);
}

.fa-scope .fa-dn-tegel:has(.elementor-button:focus-visible) {
  outline: 3px solid var(--fa-black);
  outline-offset: 3px;
}

.fa-scope .fa-dn-tegel .elementor-widget.fa-dn-tegel__knop .elementor-button:focus-visible {
  outline: none;
}

/* 25d. De slotregel: tekst links, knop rechts. */
.fa-scope .fa-dn-slot {
  display: grid !important;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 760px) {
  .fa-scope .fa-dn-slot {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.fa-scope .fa-dn-slot__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s2);
}

.fa-scope .fa-dn-slot__tekst .elementor-widget.elementor-widget-text-editor {
  max-width: 54ch;
  color: var(--fa-slate);
}

.fa-scope .fa-dn-slot__knop {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
}

/* ==========================================================================
   26. JURIDISCHE PAGINA'S
   Algemene voorwaarden en privacyverklaring: een korte zwarte kop, een
   inhoudsopgave die naar de artikelen springt, en daarna een smalle
   leeskolom. Alle klassen beginnen met fa-jr-.
   ========================================================================== */

/* 26a. De kop. */
.fa-scope .fa-jr-kop {
  position: relative;
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  background: var(--fa-black);
  color: var(--fa-on-dark);
  overflow: hidden;
}

.fa-scope .fa-jr-kop__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s2);
  position: relative;
  z-index: 1;
}

.fa-scope .fa-jr-kop .fa-label {
  color: var(--fa-on-dark-soft);
}

.fa-scope .fa-jr-kop .elementor-widget.fa-jr-h1 {
  font-family: var(--fa-font-display);
  font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--fa-white);
}

.fa-scope .fa-jr-kop .elementor-widget.elementor-widget-text-editor.fa-jr-lead {
  max-width: 56ch;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
  line-height: 1.55;
  color: var(--fa-on-dark);
}

.fa-scope .fa-jr-kop .elementor-widget.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

.fa-scope .fa-jr-meta {
  margin: 0;
  font-family: var(--fa-font-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fa-on-dark-soft);
}

/* 26b. Secties eronder. */
.fa-scope .fa-jr-sectie {
  position: relative;
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

.fa-scope .fa-jr-sectie--wit {
  background: var(--fa-white);
}

.fa-scope .fa-jr-sectie--mist {
  background: var(--fa-mist);
}

/* 26c. De inhoudsopgave. */
.fa-scope .fa-jr-inhoud {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--fa-white);
  border: 2px solid var(--fa-black);
}

.fa-scope .fa-jr-inhoud .elementor-widget.fa-jr-inhoud__kop {
  font-family: var(--fa-font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fa-graphite);
}

.fa-scope .fa-jr-inhoud .elementor-widget.fa-jr-inhoud__lijst ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.15rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .fa-scope .fa-jr-inhoud .elementor-widget.fa-jr-inhoud__lijst ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fa-scope .fa-jr-inhoud .elementor-widget.fa-jr-inhoud__lijst li {
  margin: 0;
  padding: 0;
  border: 0;
}

.fa-scope .fa-jr-inhoud .elementor-widget.fa-jr-inhoud__lijst .elementor-icon-list-text,
.fa-scope .fa-jr-inhoud .elementor-widget.fa-jr-inhoud__lijst a {
  display: block;
  padding-block: 0.3rem;
  font-family: var(--fa-font-text);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--fa-black);
  text-decoration: none;
  border-bottom: 1px solid var(--fa-hairline);
}

.fa-scope .fa-jr-inhoud .elementor-widget.fa-jr-inhoud__lijst a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 26d. De artikelen zelf: een smalle leeskolom. */
.fa-scope .fa-jr-body {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  /* Vaste maat, geen ch: de eenheid ch rekent met het lettertype van deze
     container zelf en niet met dat van de tekst erin. Met 78ch werd de kolom
     op een laptop 878 px breed, ruim 110 tekens per regel. 37rem houdt het
     rond de 75 tekens, en dat leest prettig bij een lange juridische tekst. */
  max-width: 37rem;
}

.fa-scope .fa-jr-artikel {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem;
  scroll-margin-top: 90px;
}

.fa-scope .fa-jr-artikel .elementor-widget.fa-jr-artikel__kop {
  font-family: var(--fa-font-display);
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.9rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope .fa-jr-artikel .elementor-widget.elementor-widget-text-editor.fa-jr-tekst {
  font-size: 0.9875rem;
  line-height: 1.7;
  color: var(--fa-slate);
}

.fa-scope .fa-jr-tekst p {
  margin: 0 0 0.85rem;
}

.fa-scope .fa-jr-tekst p:last-child {
  margin-bottom: 0;
}

.fa-scope .fa-jr-tekst strong {
  color: var(--fa-black);
}

.fa-scope .fa-jr-tekst a {
  color: var(--fa-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fa-scope .fa-jr-tekst ul {
  margin: 0 0 0.85rem;
  padding-left: 1.1rem;
  list-style: none;
}

.fa-scope .fa-jr-tekst ul:last-child {
  margin-bottom: 0;
}

.fa-scope .fa-jr-tekst li {
  position: relative;
  margin-bottom: 0.35rem;
  padding-left: 0.35rem;
}

.fa-scope .fa-jr-tekst li::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 0.62em;
  width: 0.3rem;
  height: 0.3rem;
  background: var(--fa-black);
}

/* Het modelformulier voor herroeping: een kader om uit over te typen. */
.fa-scope .fa-jr-tekst .fa-jr-model {
  padding: 0.9rem 1rem;
  background: var(--fa-mist);
  border-left: 3px solid var(--fa-black);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--fa-black);
}

/* 26e. De slotregel. */
.fa-scope .fa-jr-slot {
  display: grid !important;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}

@media (min-width: 760px) {
  .fa-scope .fa-jr-slot {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.fa-scope .fa-jr-slot__tekst {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s2);
}

.fa-scope .fa-jr-slot__tekst .elementor-widget.elementor-widget-text-editor {
  max-width: 54ch;
  color: var(--fa-slate);
}

.fa-scope .fa-jr-slot__knoppen {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* 26f. Printen: de bezoeker moet de voorwaarden kunnen opslaan (art. 6:234 BW). */
@media print {
  .fa-scope .fa-jr-kop {
    padding-block: 1rem;
    background: none;
    color: #000;
  }

  .fa-scope .fa-jr-kop .elementor-widget.fa-jr-h1,
  .fa-scope .fa-jr-meta,
  .fa-scope .fa-jr-kop .elementor-widget.elementor-widget-text-editor.fa-jr-lead {
    color: #000;
  }

  .fa-scope .fa-jr-kop .fa-wedge,
  .fa-scope .fa-jr-kop .fa-btn-row,
  .fa-scope .fa-jr-slot,
  .fa-scope .fa-header,
  .fa-scope .fa-footer {
    display: none !important;
  }

  .fa-scope .fa-jr-sectie {
    padding-block: 0.5rem;
    background: none;
  }

  .fa-scope .fa-jr-body {
    max-width: none;
  }

  .fa-scope .fa-jr-artikel {
    break-inside: avoid;
  }
}

/* ==========================================================================
   27. WINKEL (WooCommerce)
   Alleen nodig op shop.freerunachterhoek.nl. De plugin laadt dit deel overal,
   maar het raakt niets zolang WooCommerce er niet is: elke regel hieronder
   begint met een WooCommerce-klasse.

   TWEE SOORTEN OPMAAK
   De winkel en de productpagina maakt WooCommerce op de klassieke manier
   (ul.products, div.product). De winkelwagen en het afrekenen gebruiken de
   nieuwere blokken (wc-block-...). Dat zijn twee verschillende sets namen,
   dus ze staan hier apart. WooCommerce noemt de binnenkant van die blokken
   officieel "privé", daarom sturen we daar alleen de onderdelen die ze zelf
   als aanspreekbaar opgeven: knoppen, invoervelden en titels.
   ========================================================================== */

/* 27a. De basis: letters en kleuren van de huisstijl. */
.fa-scope .woocommerce,
.fa-scope .wc-block-components-notice-banner,
.fa-scope .wp-block-woocommerce-cart,
.fa-scope .wp-block-woocommerce-checkout {
  font-family: var(--fa-font-text);
  color: var(--fa-slate);
}

.fa-scope.woocommerce h1,
.fa-scope .woocommerce h1,
.fa-scope.woocommerce h2,
.fa-scope .woocommerce h2,
.fa-scope.woocommerce h3,
.fa-scope .woocommerce h3,
.fa-scope .wc-block-components-title {
  font-family: var(--fa-font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--fa-black);
}

/* 27b. Het productraster. Vier op de laptop, twee op de telefoon, net als
   bij mindedshop. De kaart is dezelfde als de merchkaart op de homepage. */
.fa-scope.woocommerce ul.products ,
.fa-scope .woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .fa-scope.woocommerce ul.products ,
.fa-scope .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .fa-scope.woocommerce ul.products ,
.fa-scope .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* WooCommerce zet zelf breedtes en marges op de kaarten. Die moeten eruit,
   anders vecht dat met het raster hierboven. */
.fa-scope.woocommerce ul.products li.product ,
.fa-scope .woocommerce ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--fa-white);
  border: 2px solid var(--fa-black);
  padding: 0;
  overflow: hidden;
  transition: transform 0.26s var(--fa-ease), box-shadow 0.26s var(--fa-ease);
}

.fa-scope.woocommerce ul.products li.product:hover ,
.fa-scope .woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 10px 10px 0 var(--fa-black);
}

.fa-scope.woocommerce ul.products li.product a img ,
.fa-scope .woocommerce ul.products li.product a img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0;
  border-bottom: 2px solid var(--fa-black);
  background: var(--fa-mist);
}

.fa-scope.woocommerce ul.products li.product .woocommerce-loop-product__title ,
.fa-scope .woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: clamp(0.85rem, 2vw, 1.15rem) clamp(0.85rem, 2vw, 1.15rem) 0;
  font-family: var(--fa-font-display);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope.woocommerce ul.products li.product .price ,
.fa-scope .woocommerce ul.products li.product .price {
  display: block;
  padding: 0.35rem clamp(0.85rem, 2vw, 1.15rem) 0;
  font-family: var(--fa-font-text);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--fa-black);
}

.fa-scope.woocommerce ul.products li.product .price del ,
.fa-scope .woocommerce ul.products li.product .price del {
  margin-right: 0.4rem;
  font-weight: 400;
  color: var(--fa-steel);
}

.fa-scope.woocommerce ul.products li.product .price ins ,
.fa-scope .woocommerce ul.products li.product .price ins {
  text-decoration: none;
}

/* De prijs staat onderaan, ook als de ene naam twee regels is en de andere een. */
.fa-scope.woocommerce ul.products li.product .woocommerce-loop-product__link ,
.fa-scope .woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-decoration: none;
}

/* 27c. Knoppen. Zelfde zwarte blokknop met hoekje als op de hoofdsite. */
.fa-scope.woocommerce a.button,
.fa-scope .woocommerce a.button,
.fa-scope.woocommerce button.button,
.fa-scope .woocommerce button.button,
.fa-scope.woocommerce button.single_add_to_cart_button,
.fa-scope .woocommerce button.single_add_to_cart_button,
.fa-scope.woocommerce input.button,
.fa-scope .woocommerce input.button,
.fa-scope.woocommerce #respond input#submit,
.fa-scope .woocommerce #respond input#submit,
.fa-scope .wc-block-components-button:not(.is-link) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  background: var(--fa-black);
  color: var(--fa-white);
  border: 2px solid var(--fa-black);
  border-radius: 0;
  overflow: hidden;
  font-family: var(--fa-font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s var(--fa-ease), color 0.2s var(--fa-ease);
}

.fa-scope.woocommerce a.button::after,
.fa-scope .woocommerce a.button::after,
.fa-scope.woocommerce button.button::after,
.fa-scope .woocommerce button.button::after,
.fa-scope .wc-block-components-button:not(.is-link)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: var(--fa-white);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  opacity: 0.9;
}

.fa-scope.woocommerce a.button:hover,
.fa-scope .woocommerce a.button:hover,
.fa-scope.woocommerce button.button:hover,
.fa-scope .woocommerce button.button:hover,
.fa-scope.woocommerce input.button:hover,
.fa-scope .woocommerce input.button:hover,
.fa-scope .wc-block-components-button:not(.is-link):hover {
  background: var(--fa-white);
  color: var(--fa-black);
}

/* De knop in het raster hangt onderaan de kaart en loopt over de volle breedte. */
.fa-scope.woocommerce ul.products li.product .button ,
.fa-scope .woocommerce ul.products li.product .button {
  margin: clamp(0.85rem, 2vw, 1.15rem);
  margin-top: auto;
}

/* De "in winkelwagen"-knop op een kaart mag niet de hele kaart overnemen. */
.fa-scope.woocommerce ul.products li.product .added_to_cart ,
.fa-scope .woocommerce ul.products li.product .added_to_cart {
  margin: 0 clamp(0.85rem, 2vw, 1.15rem) clamp(0.85rem, 2vw, 1.15rem);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fa-black);
}

/* 27d. Het label bij een aanbieding. Hoekig, zoals de rest. */
.fa-scope.woocommerce span.onsale ,
.fa-scope .woocommerce span.onsale {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0.35rem 0.7rem;
  background: var(--fa-black);
  color: var(--fa-white);
  border-radius: 0;
  font-family: var(--fa-font-text);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* 27e. De productpagina. */
.fa-scope.woocommerce div.product ,
.fa-scope .woocommerce div.product {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 900px) {
  .fa-scope.woocommerce div.product ,
.fa-scope .woocommerce div.product {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .fa-scope.woocommerce div.product .woocommerce-product-gallery ,
.fa-scope .woocommerce div.product .woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }

  .fa-scope.woocommerce div.product .summary ,
.fa-scope .woocommerce div.product .summary {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }

  .fa-scope.woocommerce div.product .woocommerce-tabs,
.fa-scope .woocommerce div.product .woocommerce-tabs,
  .fa-scope.woocommerce div.product .related,
.fa-scope .woocommerce div.product .related,
  .fa-scope.woocommerce div.product .upsells ,
.fa-scope .woocommerce div.product .upsells {
    grid-column: 1 / -1;
  }
}

.fa-scope.woocommerce div.product .woocommerce-product-gallery__image img ,
.fa-scope .woocommerce div.product .woocommerce-product-gallery__image img {
  border: 2px solid var(--fa-black);
  background: var(--fa-mist);
}

.fa-scope.woocommerce div.product .product_title ,
.fa-scope .woocommerce div.product .product_title {
  font-family: var(--fa-font-display);
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope.woocommerce div.product p.price,
.fa-scope .woocommerce div.product p.price,
.fa-scope.woocommerce div.product span.price ,
.fa-scope .woocommerce div.product span.price {
  font-family: var(--fa-font-text);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--fa-black);
}

.fa-scope.woocommerce div.product .woocommerce-product-details__short-description ,
.fa-scope .woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 0.9875rem;
  line-height: 1.65;
  color: var(--fa-slate);
}

/* Maat en kleur kiezen. */
.fa-scope.woocommerce div.product form.cart .variations label,
.fa-scope .woocommerce div.product form.cart .variations label,
.fa-scope.woocommerce div.product form.cart .variations th ,
.fa-scope .woocommerce div.product form.cart .variations th {
  font-family: var(--fa-font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope.woocommerce div.product form.cart .variations select,
.fa-scope .woocommerce div.product form.cart .variations select,
.fa-scope.woocommerce .quantity input[type="number"],
.fa-scope .woocommerce .quantity input[type="number"],
.fa-scope.woocommerce form .form-row input.input-text,
.fa-scope .woocommerce form .form-row input.input-text,
.fa-scope.woocommerce form .form-row select,
.fa-scope .woocommerce form .form-row select,
.fa-scope .wc-block-components-text-input input[type="text"],
.fa-scope .wc-block-components-text-input input[type="email"],
.fa-scope .wc-block-components-text-input input[type="tel"],
.fa-scope .wc-block-components-select__container select {
  min-height: 48px;
  padding: 0.6rem 0.75rem;
  background: var(--fa-white);
  border: 2px solid var(--fa-black);
  border-radius: 0;
  font-family: var(--fa-font-text);
  font-size: 0.9375rem;
  color: var(--fa-black);
}

.fa-scope.woocommerce div.product form.cart .variations select:focus-visible,
.fa-scope .woocommerce div.product form.cart .variations select:focus-visible,
.fa-scope.woocommerce form .form-row input.input-text:focus-visible,
.fa-scope .woocommerce form .form-row input.input-text:focus-visible,
.fa-scope .wc-block-components-text-input input:focus-visible {
  outline: 3px solid var(--fa-black);
  outline-offset: 2px;
}

/* --- 27e-1. Lucht boven de productpagina ---------------------------------

   Gemeten op 19 september: de galerij begon op 79 px en de header eindigde op
   79 px. Foto en titel plakten dus tegen de zwarte balk. Het thema zet
   padding-top: 0 op .site-main en WooCommerce geeft div.product geen marge,
   dus die ruimte moet hiervandaan komen.

   clamp() laat het meeschalen: op een telefoon ruim 2 rem, op een laptop 4 rem.
   Zo wordt het op een klein scherm geen verspilde halve pagina.
   -------------------------------------------------------------------------- */

.fa-scope.woocommerce div.product,
.fa-scope .woocommerce div.product {
  margin-top: clamp(2rem, 4vw, 4rem);
}

/* Hetzelfde voor het productoverzicht: daar staat onze zwarte kop bovenaan,
   dus de ruimte hoort onder die kop en niet erboven. */
.fa-scope .fa-wk-archiefkop {
  margin-top: 0;
}

/* En voor de winkelpagina's die met een shortcode werken (winkelwagen,
   afrekenen, mijn account): ook daar plakt de inhoud anders tegen de kop. */
.fa-scope.woocommerce .woocommerce-notices-wrapper,
.fa-scope .woocommerce .woocommerce-notices-wrapper {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* --- 27e-2. De samenvatting ordenen -------------------------------------

   De typografie hierboven klopte al, maar de VOLGORDE en de ruimte niet: titel,
   prijs, formulier en regels zweefden onder elkaar zonder hiërarchie. Daardoor
   zag de pagina er onduidelijk uit. Onderstaande regels geven de kolom ritme,
   en horen bij de haken in winkel.php (label op 4, btw-regel op 11, vangnet op
   21, bestelkader 29-36, categorie naar 60).
   -------------------------------------------------------------------------- */

.fa-scope.woocommerce div.product .summary,
.fa-scope .woocommerce div.product .summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.fa-scope.woocommerce div.product .summary > *,
.fa-scope .woocommerce div.product .summary > * {
  margin: 0;
  width: 100%;
}

/* Het labeltje boven de naam. */
.fa-scope.woocommerce .fa-wk-productlabel,
.fa-scope .woocommerce .fa-wk-productlabel {
  margin-bottom: 0.5rem;
  color: var(--fa-graphite);
}

.fa-scope.woocommerce div.product .product_title,
.fa-scope .woocommerce div.product .product_title {
  margin-bottom: 0.5rem;
}

/* Prijs groot, met de btw-regel er klein onder. */
.fa-scope.woocommerce div.product p.price,
.fa-scope .woocommerce div.product p.price {
  margin-bottom: 0.15rem;
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  line-height: 1.1;
}

.fa-scope.woocommerce .fa-wk-prijsnoot,
.fa-scope .woocommerce .fa-wk-prijsnoot {
  margin-bottom: var(--fa-s3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fa-steel);
}

/* De korte beschrijving, of ons vangnet als die ontbreekt. */
.fa-scope.woocommerce div.product .woocommerce-product-details__short-description,
.fa-scope .woocommerce div.product .woocommerce-product-details__short-description,
.fa-scope.woocommerce .fa-wk-geenbeschrijving,
.fa-scope .woocommerce .fa-wk-geenbeschrijving {
  margin-bottom: var(--fa-s3);
  padding-bottom: var(--fa-s3);
  border-bottom: 1px solid var(--fa-hairline-dark);
  font-size: 0.9875rem;
  line-height: 1.65;
  color: var(--fa-slate);
}

/* Het bestelblok: aantal, knop en de drie regels in één kader. Zo is meteen
   duidelijk waar je moet zijn. */
.fa-scope.woocommerce .fa-wk-bestel,
.fa-scope .woocommerce .fa-wk-bestel {
  width: 100%;
  padding: clamp(1rem, 2.5vw, 1.4rem);
  background: var(--fa-mist);
  border: 2px solid var(--fa-black);
}

.fa-scope.woocommerce .fa-wk-bestel form.cart,
.fa-scope .woocommerce .fa-wk-bestel form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.6rem;
  margin: 0;
}

.fa-scope.woocommerce .fa-wk-bestel .quantity,
.fa-scope .woocommerce .fa-wk-bestel .quantity {
  flex: 0 0 auto;
}

.fa-scope.woocommerce .fa-wk-bestel .quantity input[type="number"],
.fa-scope .woocommerce .fa-wk-bestel .quantity input[type="number"] {
  width: 4.5rem;
  height: 100%;
  min-height: 48px;
}

/* De knop vult de rest van de regel. */
.fa-scope.woocommerce .fa-wk-bestel button.single_add_to_cart_button,
.fa-scope .woocommerce .fa-wk-bestel button.single_add_to_cart_button {
  flex: 1 1 12rem;
}

/* Bij een product met maten staat de keuze bóven de knop, dus dan geen rij. */
.fa-scope.woocommerce .fa-wk-bestel form.variations_form,
.fa-scope .woocommerce .fa-wk-bestel form.variations_form {
  display: block;
}

.fa-scope.woocommerce .fa-wk-bestel .fa-wk-zeker,
.fa-scope .woocommerce .fa-wk-bestel .fa-wk-zeker {
  margin-top: var(--fa-s3);
  padding-top: var(--fa-s3);
  border-top: 1px solid var(--fa-hairline-dark);
}

/* De categorie-regel staat nu onderaan en mag klein. */
.fa-scope.woocommerce div.product .product_meta,
.fa-scope .woocommerce div.product .product_meta {
  margin-top: var(--fa-s3);
  font-size: 0.8125rem;
  color: var(--fa-steel);
}

.fa-scope.woocommerce div.product .product_meta a,
.fa-scope .woocommerce div.product .product_meta a {
  color: var(--fa-graphite);
}

/* --- 27e-3. De galerij --------------------------------------------------- */

.fa-scope.woocommerce div.product .woocommerce-product-gallery__image img,
.fa-scope .woocommerce div.product .woocommerce-product-gallery__image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* De kleine plaatjes onder de hoofdfoto. */
.fa-scope.woocommerce div.product .flex-control-thumbs,
.fa-scope .woocommerce div.product .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.fa-scope.woocommerce div.product .flex-control-thumbs img,
.fa-scope .woocommerce div.product .flex-control-thumbs img {
  border: 2px solid var(--fa-hairline-dark);
  cursor: pointer;
}

.fa-scope.woocommerce div.product .flex-control-thumbs img.flex-active,
.fa-scope .woocommerce div.product .flex-control-thumbs img.flex-active {
  border-color: var(--fa-black);
}

/* --- 27e-4. Tabbladen en gerelateerde producten -------------------------- */

.fa-scope.woocommerce div.product .woocommerce-tabs ul.tabs,
.fa-scope .woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 -2px;
  padding: 0;
  list-style: none;
}

.fa-scope.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.fa-scope .woocommerce div.product .woocommerce-tabs ul.tabs::before,
.fa-scope.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.fa-scope .woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}

.fa-scope.woocommerce div.product .woocommerce-tabs ul.tabs li,
.fa-scope .woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: var(--fa-white);
  border: 2px solid var(--fa-black);
  border-radius: 0;
}

.fa-scope.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.fa-scope .woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0.6rem 1rem;
  font-family: var(--fa-font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fa-black);
  text-decoration: none;
}

.fa-scope.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.fa-scope .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--fa-black);
}

.fa-scope.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.fa-scope .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--fa-white);
}

.fa-scope.woocommerce div.product .woocommerce-tabs .panel,
.fa-scope .woocommerce div.product .woocommerce-tabs .panel {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 2px solid var(--fa-black);
  font-size: 0.9875rem;
  line-height: 1.7;
  color: var(--fa-slate);
}

.fa-scope.woocommerce div.product .woocommerce-tabs .panel h2,
.fa-scope .woocommerce div.product .woocommerce-tabs .panel h2 {
  font-family: var(--fa-font-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope.woocommerce div.product .related > h2,
.fa-scope .woocommerce div.product .related > h2,
.fa-scope.woocommerce div.product .upsells > h2,
.fa-scope .woocommerce div.product .upsells > h2 {
  margin-bottom: var(--fa-s3);
  font-family: var(--fa-font-display);
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  text-transform: uppercase;
  color: var(--fa-black);
}

/* 27f. Meldingen: toegevoegd aan de winkelwagen, fouten, informatie. */
.fa-scope .woocommerce-message,
.fa-scope .woocommerce-info,
.fa-scope .woocommerce-error,
.fa-scope .wc-block-components-notice-banner {
  margin-bottom: var(--fa-s3);
  padding: 0.9rem 1.1rem;
  background: var(--fa-mist);
  border: 0;
  border-left: 4px solid var(--fa-black);
  border-radius: 0;
  font-family: var(--fa-font-text);
  font-size: 0.9375rem;
  color: var(--fa-black);
}

.fa-scope .woocommerce-error {
  border-left-color: #b00020;
}

.fa-scope .woocommerce-message::before,
.fa-scope .woocommerce-info::before,
.fa-scope .woocommerce-error::before {
  display: none;
}

/* 27g. Sorteren en tellen boven het raster. */
.fa-scope.woocommerce .woocommerce-result-count ,
.fa-scope .woocommerce .woocommerce-result-count {
  font-size: 0.8125rem;
  color: var(--fa-graphite);
}

.fa-scope.woocommerce .woocommerce-ordering select ,
.fa-scope .woocommerce .woocommerce-ordering select {
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  background: var(--fa-white);
  border: 2px solid var(--fa-black);
  border-radius: 0;
  font-family: var(--fa-font-text);
  font-size: 0.875rem;
}

/* 27h. Paginering. */
.fa-scope.woocommerce nav.woocommerce-pagination ul ,
.fa-scope .woocommerce nav.woocommerce-pagination ul {
  border: 0;
  gap: 0.35rem;
  display: flex;
}

.fa-scope.woocommerce nav.woocommerce-pagination ul li ,
.fa-scope .woocommerce nav.woocommerce-pagination ul li {
  border: 0;
  overflow: visible;
}

.fa-scope.woocommerce nav.woocommerce-pagination ul li a,
.fa-scope .woocommerce nav.woocommerce-pagination ul li a,
.fa-scope.woocommerce nav.woocommerce-pagination ul li span ,
.fa-scope .woocommerce nav.woocommerce-pagination ul li span {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--fa-white);
  border: 2px solid var(--fa-black);
  font-family: var(--fa-font-text);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--fa-black);
}

.fa-scope.woocommerce nav.woocommerce-pagination ul li span.current,
.fa-scope .woocommerce nav.woocommerce-pagination ul li span.current,
.fa-scope.woocommerce nav.woocommerce-pagination ul li a:hover ,
.fa-scope .woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--fa-black);
  color: var(--fa-white);
}

/* 27i. Tabellen: winkelwagen (klassiek) en bestellingen in mijn account. */
.fa-scope.woocommerce table.shop_table ,
.fa-scope .woocommerce table.shop_table {
  border: 2px solid var(--fa-black);
  border-radius: 0;
  border-collapse: collapse;
}

.fa-scope.woocommerce table.shop_table th ,
.fa-scope .woocommerce table.shop_table th {
  font-family: var(--fa-font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope.woocommerce table.shop_table td,
.fa-scope .woocommerce table.shop_table td,
.fa-scope.woocommerce table.shop_table th ,
.fa-scope .woocommerce table.shop_table th {
  border-top: 1px solid var(--fa-hairline-dark);
  padding: 0.85rem;
}

/* 27j. Mijn account: de zijnavigatie als lijst met streepjes. */
.fa-scope .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 2px solid var(--fa-black);
}

.fa-scope .woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid var(--fa-hairline-dark);
}

.fa-scope .woocommerce-MyAccount-navigation ul li:last-child {
  border-bottom: 0;
}

.fa-scope .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 0.75rem 1rem;
  font-family: var(--fa-font-text);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--fa-black);
}

.fa-scope .woocommerce-MyAccount-navigation ul li.is-active a,
.fa-scope .woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--fa-black);
  color: var(--fa-white);
}

/* 27k. De blokken van winkelwagen en afrekenen.
   Alleen de onderdelen die WooCommerce zelf als aanspreekbaar opgeeft. */
.fa-scope .wc-block-components-title,
.fa-scope .wc-block-cart__empty-cart__title {
  font-family: var(--fa-font-display) !important;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope .wc-block-components-product-name {
  font-family: var(--fa-font-display);
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--fa-black);
  text-decoration: none;
}

.fa-scope .wc-block-components-formatted-money-amount,
.fa-scope .wc-block-components-totals-item__value {
  font-family: var(--fa-font-text);
  font-weight: 700;
  color: var(--fa-black);
}

.fa-scope .wc-block-components-panel,
.fa-scope .wc-block-components-totals-wrapper,
.fa-scope .wc-block-cart__totals-title {
  border-color: var(--fa-hairline-dark);
}

.fa-scope .wc-block-components-sidebar,
.fa-scope .wc-block-components-order-summary {
  background: var(--fa-mist);
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.fa-scope .wc-block-components-checkout-step__title {
  font-family: var(--fa-font-display);
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope .wc-block-components-product-image img {
  border: 1px solid var(--fa-hairline-dark);
  border-radius: 0;
}

/* 27l. De winkelwagenknop in de header (eigen widget, zie winkel.php). */
.fa-scope .fa-winkelwagen {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.2rem;
  font-family: var(--fa-font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
}

.fa-scope .fa-winkelwagen__aantal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  background: var(--fa-white);
  color: var(--fa-black);
  font-size: 0.6875rem;
  line-height: 1;
}

.fa-scope .fa-winkelwagen__aantal--leeg {
  opacity: 0.45;
}

/* 27m. De winkelpagina zelf (sjabloon winkel.json). */
.fa-scope .fa-wk-kop {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  background: var(--fa-black);
  color: var(--fa-on-dark);
  overflow: hidden;
}

.fa-scope .fa-wk-kop__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: var(--fa-s2);
  position: relative;
  z-index: 1;
}

.fa-scope .fa-wk-kop .fa-label {
  color: var(--fa-on-dark-soft);
}

.fa-scope .fa-wk-kop .elementor-widget.fa-wk-h1 {
  font-family: var(--fa-font-display);
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5rem);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--fa-white);
}

.fa-scope .fa-wk-kop .elementor-widget.elementor-widget-text-editor.fa-wk-lead {
  max-width: 54ch;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
  line-height: 1.55;
  color: var(--fa-on-dark);
}

.fa-scope .fa-wk-kop .elementor-widget.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

.fa-scope .fa-wk-sectie {
  position: relative;
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

.fa-scope .fa-wk-sectie--wit {
  background: var(--fa-white);
}

.fa-scope .fa-wk-sectie--mist {
  background: var(--fa-mist);
}

.fa-scope .fa-wk-sectie .elementor-widget.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* De drie regels onder de producten: bezorgen, afhalen, vragen. */
.fa-scope .fa-wk-uitleg {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 760px) {
  .fa-scope .fa-wk-uitleg {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fa-scope .fa-wk-blok {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--fa-white);
  border: 2px solid var(--fa-black);
}

.fa-scope .fa-wk-blok .elementor-widget.fa-wk-blok__kop {
  font-family: var(--fa-font-display);
  font-size: 1.15rem;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope .fa-wk-blok .elementor-widget.elementor-widget-text-editor {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--fa-slate);
}

/* ==========================================================================
   28. WINKELPAGINA'S: MAATTABEL, ARCHIEFKOP EN SHORTCODE-PAGINA'S
   Hoort bij de winkelplugin. Raakt niets op de hoofdsite: elke selector hangt
   aan fa-wk- of aan een WooCommerce-klasse.
   ========================================================================== */

/* 28a. De kop die de winkelplugin boven het productoverzicht zet.
   Dat overzicht maakt WooCommerce zelf, daar kan geen Elementor-sjabloon op.
   Deze kop komt uit faw_archief_kop() in de winkelplugin. */
.fa-scope .fa-wk-archiefkop {
  position: relative;
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--fa-black);
  color: var(--fa-on-dark);
  overflow: hidden;
}

.fa-scope .fa-wk-archiefkop__inner {
  position: relative;
  z-index: 1;
  width: min(var(--fa-container), 100%);
  margin-inline: auto;
  padding-inline: var(--fa-gutter);
}

.fa-scope .fa-wk-archiefkop .fa-label {
  margin: 0 0 0.5rem;
  color: var(--fa-on-dark-soft);
}

.fa-scope .fa-wk-archiefkop h1 {
  margin: 0;
  font-family: var(--fa-font-display);
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--fa-white);
}

.fa-scope .fa-wk-archiefkop p {
  max-width: 54ch;
  margin: 0.75rem 0 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  line-height: 1.55;
  color: var(--fa-on-dark);
}

/* 28b. De maattabel. */
.fa-scope .fa-wk-tabellen {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

.fa-scope .fa-wk-tabelblok {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem;
}

/* Smalle schermen: de tabel mag schuiven, de pagina niet. */
.fa-scope .fa-wk-tabel__wrap {
  overflow-x: auto;
  border: 2px solid var(--fa-black);
}

.fa-scope table.fa-wk-tabel {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fa-font-text);
  font-size: 0.9375rem;
  /* Cijfers netjes onder elkaar. */
  font-variant-numeric: tabular-nums;
}

.fa-scope table.fa-wk-tabel th {
  padding: 0.7rem 0.9rem;
  background: var(--fa-black);
  color: var(--fa-white);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.fa-scope table.fa-wk-tabel td {
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--fa-hairline-dark);
  color: var(--fa-slate);
}

.fa-scope table.fa-wk-tabel tbody tr:nth-child(even) td {
  background: var(--fa-mist);
}

.fa-scope table.fa-wk-tabel td:first-child {
  font-weight: 700;
  color: var(--fa-black);
  white-space: nowrap;
}

/* 28c. De pagina's die een WooCommerce-shortcode tonen (winkelwagen,
   afrekenen, mijn account). De shortcode zelf maakt WooCommerce; wij zorgen
   alleen dat hij ruimte krijgt en niet tegen de kop aan plakt. */
.fa-scope .fa-wk-woo {
  margin-block: 0;
}

.fa-scope .elementor-widget.fa-wk-woo .woocommerce {
  margin-block: 0;
}

.fa-scope .elementor-widget.elementor-widget-text-editor.fa-wk-noot {
  margin-top: var(--fa-s3);
  padding: 0.85rem 1.1rem;
  background: var(--fa-mist);
  border-left: 4px solid var(--fa-black);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--fa-black);
}

/* 28d. De veelgestelde vragen op de winkel gebruiken hetzelfde accordeon als
   op de hoofdsite (deel 12). Alleen de ruimte eromheen zetten we hier. */
.fa-scope .fa-wk-vragen {
  max-width: 54rem;
}

/* 28e. Wat de plugin op de productpagina toevoegt (zie winkel.php).
   Dit gaat via de haken van WooCommerce, niet door hun sjablonen te vervangen:
   haken blijven bij updates bestaan, gekopieerde sjablonen verouderen. */
.fa-scope.woocommerce ul.fa-wk-zeker,
.fa-scope .woocommerce ul.fa-wk-zeker {
  display: block;
  margin: var(--fa-s3) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fa-slate);
}

/* Elk punt op een eigen regel, met een streepje ervoor.
   BEWUST NIET de klasse fa-ticks: die zet elk item op display:grid met het
   vinkje in een eigen kolom. In de smalle productkolom knijpt dat raster elk
   woord in een aparte rij - gemeten op 19 september: een regel van 310 px hoog
   voor een zin van een regel. */
.fa-scope.woocommerce ul.fa-wk-zeker li,
.fa-scope .woocommerce ul.fa-wk-zeker li {
  display: block;
  position: relative;
  margin: 0 0 0.45rem;
  padding-left: 1.1rem;
}

.fa-scope.woocommerce ul.fa-wk-zeker li::before,
.fa-scope .woocommerce ul.fa-wk-zeker li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4rem;
  height: 2px;
  background: var(--fa-black);
}

.fa-scope.woocommerce .fa-wk-maatlink ,
.fa-scope .woocommerce .fa-wk-maatlink {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
}

.fa-scope.woocommerce .fa-wk-maatlink a ,
.fa-scope .woocommerce .fa-wk-maatlink a {
  color: var(--fa-black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 28f. Reparaties voor de livegang, gemeten op 25 september 2026.

   1. Het lege eerste vak in het productraster. WooCommerce zet op
      ul.products een ::before en ::after met display:table, een oude
      clearfix uit de tijd van floats. In een grid telt zo'n pseudo-element
      als vak: het eerste product stond in de tweede kolom, op de laptop en
      op de telefoon. Zelfde soort valkuil als 39: het raster ging uit van
      alleen echte kaarten. */
.fa-scope.woocommerce ul.products::before,
.fa-scope.woocommerce ul.products::after,
.fa-scope .woocommerce ul.products::before,
.fa-scope .woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* 2. De miniaturen onder de productfoto waren 21 bij 21 px. WooCommerce geeft
      elk li width: 25% en float: left; binnen ons raster van vier kolommen
      werd dat een kwart van een kwart. */
.fa-scope.woocommerce div.product .flex-control-thumbs li,
.fa-scope .woocommerce div.product .flex-control-thumbs li {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

.fa-scope.woocommerce div.product .flex-control-thumbs img,
.fa-scope .woocommerce div.product .flex-control-thumbs img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* 3. "In winkelwagen" op de kaarten: op een telefoon viel het woord half
      buiten de knop (157 px tekst in een knop van 126 px). Minder
      letterafstand en binnenruimte; past het dan nog niet, dan breekt het
      netjes af in plaats van weggeknipt te worden. */
.fa-scope.woocommerce ul.products li.product .button,
.fa-scope .woocommerce ul.products li.product .button {
  padding-inline: 0.6rem;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 4. De kortingscode in de winkelwagen: op een telefoon viel de knop voor de
      helft buiten beeld (231 px tekst in 141 px). Veld en knop onder elkaar,
      allebei over de volle breedte. */
@media (max-width: 768px) {
  .fa-scope.woocommerce .woocommerce-cart-form .coupon,
  .fa-scope .woocommerce .woocommerce-cart-form .coupon {
    display: flex !important;
    flex-direction: column;
    gap: 0.5rem;
    float: none !important;
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .fa-scope .woocommerce-cart-form .coupon .input-text,
  .fa-scope .woocommerce-cart-form .coupon .button {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }
}

/* 5. Links in de winkel kregen het paars van WooCommerce: de productnaam in
      de winkelwagen, "vul hem hier in" bij de kortingscode, de links in mijn
      account. Zwart en onderstreept, net als in de rest van de site. */
.fa-scope.woocommerce-cart .woocommerce-cart-form a:not(.button):not(.remove),
.fa-scope.woocommerce-checkout .woocommerce a:not(.button),
.fa-scope.woocommerce-account .woocommerce a:not(.button) {
  color: var(--fa-black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 6. De keuze voor de les bij afhalen (zie afrekenen.php in de winkelplugin).
      Een kader, zodat hij opvalt zodra je afhalen kiest. */
.fa-scope .faw-afhaal {
  margin: 0 0 var(--fa-s3);
  padding: 1rem 1.1rem;
  border: 2px solid var(--fa-black);
  background: var(--fa-mist);
}

.fa-scope .faw-afhaal .form-row {
  margin: 0;
}

.fa-scope .faw-afhaal[hidden] {
  display: none !important;
}

/* 7. Het streepje onder het menu in de header werd groen: de standaardkleur
      van Elementor (#61CE70), omdat de globale kleuren op de shop nog op de
      Elementor-standaard stonden en de header daar het streepje van
      Elementor gebruikte. Op een zwarte balk hoort het wit, wat er in de
      globale kleuren ook staat. Geldt op elke site met onze header, en daar
      is de balk altijd zwart. */
.fa-scope .fa-header .elementor-nav-menu--main .elementor-item::before,
.fa-scope .fa-header .elementor-nav-menu--main .elementor-item::after {
  background-color: var(--fa-white) !important;
}

/* 9. Het schild in plaats van de tekst [Foto], bij teamleden en
      verhuurpakketten zonder foto (widgets sinds 1.11.2). */
.fa-scope .fa-tm-portret--leeg svg,
.fa-scope .fa-mh-foto--leeg svg {
  width: 28%;
  height: auto;
  fill: var(--fa-graphite);
  opacity: 0.35;
}

/* 10. De knoppen Shop en Ledenportaal (op de shop: Naar de site) onderaan
       in het uitklapmenu op de telefoon, met een lijn erboven. Zie deel 10
       van freerun-home.js. */
.fa-scope .fa-nav nav.elementor-nav-menu--dropdown li:not(.fa-menu-extra) + .fa-menu-extra {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  margin-top: 0.35rem;
  padding-top: 0.35rem;
}

/* 11. In het uitklapmenu op de telefoon viel het pijltje bij "Diensten" op
       een eigen regel onder het woord: de link was display:block en het
       pijltje een flexvak van de volle breedte. Nu staan ze op één regel,
       met het pijltje rechts. Gemeten op 28 september, 375 px. */
.fa-scope .fa-nav nav.elementor-nav-menu--dropdown a.has-submenu {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.fa-scope .fa-nav nav.elementor-nav-menu--dropdown a.has-submenu .sub-arrow {
  width: auto;
  flex: none;
  margin: 0;
  padding: 0 0.25rem;
}

/* 8. Een omlijnde knop in de header was onzichtbaar: fa-btn--outline is zwart
      op wit, en de header is zwart. Gemeten op 25 september bij "Naar de
      site" op de shop (oudere versie van het headersjabloon). In de header
      krijgt een omlijnde knop daarom altijd een witte lijn en witte tekst. */
.fa-scope .fa-header .elementor-widget-button.fa-btn--outline {
  --fa-btn-bg: transparent;
  --fa-btn-fg: var(--fa-white);
  --fa-btn-bd: var(--fa-white);
}

.fa-scope .fa-header .elementor-widget-button.fa-btn--outline .elementor-button {
  background: transparent;
  color: var(--fa-white);
  border-color: var(--fa-white);
}

.fa-scope .fa-header .elementor-widget-button.fa-btn--outline:hover {
  --fa-btn-bg: var(--fa-white);
  --fa-btn-fg: var(--fa-black);
  --fa-btn-bd: var(--fa-white);
}

.fa-scope .fa-header .elementor-widget-button.fa-btn--outline .elementor-button:hover {
  background: var(--fa-white);
  color: var(--fa-black);
}

/* ==========================================================================
   29. PRODUCTEN UIT DE WINKEL (widget fa-shopfeed)
   Op de hoofdsite: een levende strook met de populairste producten uit
   shop.freerunachterhoek.nl. Dezelfde kaartvorm als de oude merchkaarten,
   zodat de homepage zijn ritme houdt.
   ========================================================================== */

/* De widget geeft kale HTML terug, zonder de wrappers van Elementor. Met
   display: contents valt het raster zelf in de sectie, net als bij de andere
   eigen widgets. */
.fa-scope .elementor-widget-fa-shopfeed,
.fa-scope .elementor-widget-fa-shopfeed > .elementor-widget-container {
  display: contents;
}

.fa-scope .fa-shopfeed {
  display: block;
  width: 100%;
}

.fa-scope .fa-shopfeed__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

@media (min-width: 1000px) {
  .fa-scope .fa-shopfeed__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* HET RASTER BEWEEGT MEE MET HET AANTAL PRODUCTEN
   Gemeten op 21 september 2026: de feed hield één product met een prijs over,
   en die kaart stond 264 px breed links in een raster van 1128 px. Ruim 860 px
   leegte ernaast, onder een grote kop: dat leest als een pagina die niet af is.

   De widget geeft het aantal mee als klasse (--1 tot en met --4). Bij weinig
   producten worden de kaarten groter en staan ze gecentreerd, zodat het een
   bewuste keuze lijkt in plaats van een gat. Vanaf vier producten verandert er
   niets en geldt gewoon de regel hierboven.

   Let op de volgorde: deze regels moeten NA de media query hierboven staan,
   anders wint die met gelijke specificiteit en gebeurt er niets. */

.fa-scope .fa-shopfeed__grid--1 {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1000px) {
  .fa-scope .fa-shopfeed__grid--1 {
    grid-template-columns: minmax(0, 380px);
    justify-content: center;
  }

  .fa-scope .fa-shopfeed__grid--2 {
    grid-template-columns: repeat(2, minmax(0, 340px));
    justify-content: center;
  }

  .fa-scope .fa-shopfeed__grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fa-scope .fa-shopfeed__kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--fa-white);
  border: 2px solid var(--fa-black);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.26s var(--fa-ease), box-shadow 0.26s var(--fa-ease);
}

.fa-scope .fa-shopfeed__kaart:hover,
.fa-scope .fa-shopfeed__kaart:focus-visible {
  transform: translateY(-4px);
  box-shadow: 10px 10px 0 var(--fa-black);
}

/* Het beeld: altijd vierkant, zodat de rij rustig blijft ook als de ene foto
   staand is en de andere liggend. */
.fa-scope .fa-shopfeed__beeld {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--fa-black);
  border-bottom: 2px solid var(--fa-black);
  overflow: hidden;
}

.fa-scope .fa-shopfeed__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Geen foto: het schild gecentreerd op zwart, in plaats van een leeg vlak. */
.fa-scope .fa-shopfeed__schild {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fa-white);
}

.fa-scope .fa-shopfeed__schild svg {
  width: 38%;
  height: auto;
  fill: currentColor;
}

.fa-scope .fa-shopfeed__label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.3rem 0.65rem;
  background: var(--fa-white);
  color: var(--fa-black);
  font-family: var(--fa-font-text);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fa-scope .fa-shopfeed__naam {
  display: block;
  padding: clamp(0.75rem, 2vw, 1rem) clamp(0.75rem, 2vw, 1rem) 0;
  font-family: var(--fa-font-display);
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.2rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-scope .fa-shopfeed__prijs {
  display: block;
  margin-top: auto;
  padding: 0.35rem clamp(0.75rem, 2vw, 1rem) clamp(0.75rem, 2vw, 1rem);
  font-family: var(--fa-font-text);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--fa-black);
  font-variant-numeric: tabular-nums;
}

.fa-scope .fa-shopfeed__leeg {
  margin-bottom: var(--fa-s3);
  color: var(--fa-slate);
}

.fa-scope .fa-shopfeed__cta {
  margin-top: 0;
}