/* ================================================================
   Smakelijk Achterhoek — huisstijl stylesheet voor Gebiedonline
   Gebaseerd op de echte broncode (cx_/go_ classes, Bootstrap 5)
   Versie: v220
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700;800&family=Caveat:wght@600;700&display=swap');

/* --- 1. Basis: lettertype + pagina-achtergrond -------------------
   Baloo 2 op alle koppen, crème als vaste paginakleur. ------------- */
body.go_page,
.cx_btn-label,
h1, h2, h3, h4, h5, h6,
.go_row-title,
.go_card-title-wrapper,
.navbar-brand {
  font-family: 'Baloo 2', sans-serif !important;
}

body.go_page {
  background-color: #FAF6EC !important;
  color: #283129;
}
/* Fotoslider-rijen (grote carrousel-rijen) hebben geen instelbaar
   achtergrondveld en vallen terug op een vaste witte kleur — dat trekken
   we gelijk met de ingestelde thema-achtergrondkleur (crème) */
.go_row.go_section-slider {
  background-color: #FAF6EC !important;
}

.go_row-title {
  font-weight: 800 !important;
  color: #283129;
  letter-spacing: -0.01em;
}

/* --- 1b. Handgetekende omcirkeling om sectiekoppen ------------------
   Een losse, licht onregelmatige cirkel achter go_row-title (SVG als
   background-image, ruim buiten de tekst geplaatst zodat de lijn er
   niet doorheen loopt). Kleur is neutraal huisstijlgroen; pas 'stroke'
   in de data-URI aan voor een andere kleur per rij indien gewenst. */
.go_row-title {
  position: relative;
  display: table;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  padding: 8px 6px 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 14'%3E%3Cpath d='M2 6 C 60 -2, 170 -2, 228 6' fill='none' stroke='%23154D26' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: bottom center !important;
  background-size: 100% 14px !important;
}
/* Vangnet: als de kop in een flex-rij naast een link/knop staat
   (bv. "Het laatste nieuws" + "Bekijk al het nieuws" ernaast), werkt
   margin:auto alleen als de rij zelf niet al met justify-content de
   ruimte verdeelt. Geen :has() (validator ondersteunt dit niet) — dit
   dekt de bekende rij-classes uit de site zelf. */
.go_row {
  text-align: center;
}

/* --- 2. Topmenu (logo + Over ons / Contact / Iets plaatsen / etc.)
   Achtergrond crème, logo groter, zoekbalk als ronde kaart. -------- */
.go_menu-top-bar {
  background-color: #FAF6EC !important;
  border-bottom: 1px solid #E8DFC9;
  padding-top: 28px;
  padding-bottom: 28px;
}
.go_navbar-brand img,
.go_logo img {
  max-height: 108px !important;
  height: auto !important;
  width: auto !important;
}
/* Zoek/filter-balk (bv. op Agenda, Adressen): ronde hoeken, kaart-stijl,
   met badge + ronde pil om het invoerveld (optie B+D). Om terug te gaan
   naar de oorspronkelijke, eenvoudige balk: verwijder deze hele sectie
   3b en zet de oude "Zoek/filter-balk"-regel terug (alleen
   background-color/border-radius/border op .go_search-wrapper). */
.go_search-wrapper {
  position: relative;
  background-color: #EDF3DA !important;
  border-radius: 22px !important;
  overflow: visible !important;
  border: 1px solid #DCE7C8;
  padding-top: 34px !important;
}
.go_search-wrapper::before {
  content: "Zoek & vind" !important;
  position: absolute !important;
  top: -14px !important;
  left: 24px !important;
  background: #E2A93E !important;
  color: #154D26 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  z-index: 2 !important;
}
.go_search-wrapper .go_filter-field-wrapper {
  border: 2px solid #154D26 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: #fff !important;
}
.go_search-wrapper .go_filter-field-wrapper input,
.go_search-wrapper .go_filter-field-wrapper button {
  border: none !important;
  background: transparent !important;
}
/* Zoekicoon (vergrootglas) in het zoekveld zelf: van grijs naar
   huisstijlgroen, iets groter */
.go_search-wrapper .go_filter-field-wrapper button i.fa-search {
  color: #154D26 !important;
  font-size: 16px !important;
}
.go_search-wrapper .go_filter-field-wrapper button:hover i.fa-search {
  color: #E2A93E !important;
}
.go_search-wrapper .btn.go_button {
  border-radius: 999px !important;
}
/* "Zoek"-label boven het invoerveld is overbodig naast de "Zoek &
   vind"-badge en de placeholdertekst — verbergen (alleen dit label,
   niet de "Onderwerp"/"Productgroep"-labels verderop) */
.go_search-wrapper .go_search-row .go_filter-label {
  display: none !important;
}
/* Zoekicoon (vergrootglas) in het zoekveld zelf: van grijs naar
   huisstijlgroen, iets groter */
.go_search-wrapper .go_filter-field-wrapper button i.fa-search {
  color: #154D26 !important;
  font-size: 16px !important;
}
.go_search-wrapper .go_filter-field-wrapper button:hover i.fa-search {
  color: #E2A93E !important;
}

.go_top-menu .go_topmenu-button {
  color: #283129 !important;
  font-weight: 600;
  font-size: 14px;   /* tekstgrootte van de items */
  padding: 8px 4px;  /* ruimte rond elk item */
}
.go_top-menu {
  gap: 4px;
}
.go_top-menu .go_topmenu-button i {
  color: #154D26 !important;
  font-size: 16px;   /* icoongrootte */
}
.go_top-menu .go_topmenu-button:hover {
  color: #154D26 !important;
}

/* --- 3. Hoofdmenu --------------------------------------------------
   Menutekst in huisstijlkleuren; huidige pagina als groene pil;
   "Word lid" als losse gele knop rechts naast het zoekicoon. -------- */
.go_main-menu-bar,
.go_main-menu-bar .go_main-menu-wrapper,
nav.go_hoofdmenu,
nav.go_hoofdmenu .cx_menu-container {
  background-color: #FAF6EC !important;
  background-image: none !important;
}
.go_main-menu-bar {
  border-bottom: 1px solid #E8DFC9;
}
.go_hoofdmenu .nav-link,
.go_hoofdmenu .cx_btn-label {
  font-weight: 700 !important;
  font-size: 16px;
  color: #283129 !important;
}
.go_hoofdmenu .nav-link:hover {
  color: #154D26 !important;
}
.go_hoofdmenu .nav-link.active:not(.dropdown-toggle),
/* --- Hoofdmenu op een lichtgroene balk i.p.v. tussen twee dunne
   lijnen: de kleur (#EDF3DA, dezelfde tint als de zoekbalk en de
   icoonrondjes) verzorgt de scheiding met het crème erboven. ------- */
.go_hoofdmenu,
nav.go_hoofdmenu,
.go_main-menu-bar,
.container-fluid.go_main-menu-bar,
.go_main-menu-wrapper,
.go_main-menu-wrapper .go_hoofdmenu,
.go_hoofdmenu .cx_menu-container,
.go_hoofdmenu .navbar-collapse,
.go_hoofdmenu .collapse,
.go_hoofdmenu .navbar-nav,
.go_hoofdmenu .container,
.go_hoofdmenu .container-fluid,
.go_hoofdmenu .container-xl {
  background-color: #EDF3DA !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.go_hoofdmenu .nav-link,
.go_hoofdmenu .nav-link span {
  color: #154D26 !important;
}

.go_hoofdmenu .nav-item.active > .nav-link:not(.dropdown-toggle),
nav.go_hoofdmenu .nav-link.active:not(.dropdown-toggle),
html body .go_hoofdmenu.go_hoofdmenu a.nav-link.active.active:not(.dropdown-toggle) {
  color: #ffffff !important;
  background-color: #154D26 !important;
  border-radius: 999px;
}
html body .go_hoofdmenu.go_hoofdmenu a.nav-link.active.active:not(.dropdown-toggle) span {
  color: #ffffff !important;
}
/* Open dropdownmenu (.show): lichter/omlijnd, zodat het niet identiek oogt
   aan de "huidige pagina"-pil hierboven en er geen twee volle groene
   pillen tegelijk lijken te branden */
.go_hoofdmenu .dropdown-toggle.show,
.go_hoofdmenu .nav-item.show .nav-link,
nav.go_hoofdmenu .dropdown-toggle.show,
html body .go_hoofdmenu.go_hoofdmenu a.dropdown-toggle.show.show {
  color: #154D26 !important;
  background-color: transparent !important;
  border: 1.5px solid #154D26;
  border-radius: 999px;
}
html body .go_hoofdmenu.go_hoofdmenu a.dropdown-toggle.show.show span {
  color: #154D26 !important;
}
/* Dropdown-knop die "actief" is omdat er een kind-pagina open staat: alleen
   de tekst accentueren, geen vaste groene pil (die knop is geen link zelf) */
.go_hoofdmenu .dropdown-toggle.active:not(.show) {
  color: #154D26 !important;
  background-color: transparent !important;
}
/* Eigen, merk-kleurige focusring in plaats van de standaard blauwe browser-
   focusring (toegankelijkheid blijft behouden, alleen de kleur/stijl wijzigt) */
.go_hoofdmenu .nav-link:focus-visible,
.go_hoofdmenu .dropdown-toggle:focus-visible {
  outline: 2px solid #154D26 !important;
  outline-offset: 2px;
}
/* Op hover moet de tekst wit blijven zolang de "huidige pagina"-pil groen
   is — anders wordt de tekst onleesbaar (groen op groen) */
.go_hoofdmenu .nav-link.active:not(.dropdown-toggle):hover,
.go_hoofdmenu .nav-item.active > .nav-link:not(.dropdown-toggle):hover,
nav.go_hoofdmenu .nav-link.active:not(.dropdown-toggle):hover {
  color: #ffffff !important;
}
/* Open dropdownmenu blijft op hover ook de omlijnde stijl (niet wit) */
.go_hoofdmenu .dropdown-toggle.show:hover,
.go_hoofdmenu .nav-item.show .nav-link:hover,
nav.go_hoofdmenu .dropdown-toggle.show:hover {
  color: #154D26 !important;
}
.go_hoofdmenu .dropdown-menu {
  border-radius: 18px;
  border: 1px solid #E8DFC9;
}
/* Huidige pagina binnen het geopende "Meer"-dropdownmenu: donkergroene
   rij met witte tekst (was onleesbaar: donkergroen op donkergroen) */
.go_hoofdmenu .dropdown-item.active,
.go_hoofdmenu .dropdown-item.active:hover,
.go_hoofdmenu .dropdown-item.active:focus {
  background-color: #154D26 !important;
  color: #ffffff !important;
}
.go_hoofdmenu .dropdown-item:hover {
  background-color: #EDF3DA;
  color: #154D26;
}

/* "Word lid"-knop in het hoofdmenu (geel), zodra dit als los menu-item
   op het hoofdniveau staat (bv. link naar /wordlid) */
.go_hoofdmenu .navbar-nav > .nav-item > a.nav-link[href="/wordlid"] {
  background-color: #E2A93E !important;
  color: #283129 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  padding: 8px 18px !important;
}
.go_hoofdmenu .navbar-nav > .nav-item > a.nav-link[href="/wordlid"]:hover {
  background-color: #E2A93E !important;
}
/* Dit menu-item altijd helemaal rechts tonen (vlak voor het vergrootglas),
   ongeacht de volgorde in de menu-instellingen zelf */
.go_hoofdmenu .navbar-nav > .nav-item > a.nav-link[href="/wordlid"] {
  position: absolute !important;
  right: 60px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}
.go_hoofdmenu .cx_menu-container {
  position: relative !important;
}
/* Bootstrap's "me-auto" op de menulijst zelf duwt het zoekicoon helemaal
   naar de rand — dat overschrijven we zodat ze dicht bij elkaar komen */
nav.go_hoofdmenu ul.navbar-nav.me-auto {
  margin-right: 0 !important;
  margin-inline-end: 0 !important;
}
.go_hoofdmenu .collapse.navbar-collapse {
  justify-content: flex-start !important;
}

/* --- 4. Knoppen (algemeen: word lid, versturen, bewerken, etc.) --
   Alle knoppen naar ronde pil-vorm in huisstijlkleuren; kleine
   beheerknoppen (potlood) bewust uitgezonderd. --------------------- */
.btn.btn-primary,
.go_button {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 800 !important;
  background-color: #154D26 !important;
  border-color: #154D26 !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
}
.btn.btn-primary:hover,
.go_button:hover {
  background-color: #0F3A1D !important;
  border-color: #0F3A1D !important;
}
/* Zoekschermen (classmanager/beheer): knoppen als "Zoeken", "Wissen",
   "Bewaar zoekvraag", "Nieuwe ... invoeren" gebruiken alleen .btn
   zonder .go_button — hier ook afronden en in de huisstijl zetten */
.btn.btn-default,
.btn.btn-secondary:not(.go_button):not(.go_button-secondary) {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  background-color: #C3D797 !important;
  border-color: #C3D797 !important;
  color: #154D26 !important;
}
.btn.btn-default:hover,
.btn.btn-secondary:not(.go_button):not(.go_button-secondary):hover {
  background-color: #B3CB7F !important;
  border-color: #B3CB7F !important;
}

/* Uitzondering: kleine beheer-knoppen (potlood/bewerken) — niet
   meenemen in de pil-stijl, anders wordt de bewerk-UI onleesbaar. */
.go_webpage-controls .btn,
a[href*="cmd=open"].btn {
  border-radius: 4px !important;
  padding: 4px 10px !important;
}

/* "Uitgebreid zoeken" (btn-secondary, niet btn-primary!): witte tekst */
.btn.btn-secondary.go_button {
  background-color: #154D26 !important;
  border-color: #154D26 !important;
  color: #ffffff !important;
}
.btn.btn-secondary.go_button:hover {
  background-color: #0F3A1D !important;
  border-color: #0F3A1D !important;
}

/* Bewerken / Kopiëren / Verwijderen (go_button-secondary, andere class!) */
.btn.btn-secondary.go_button-secondary {
  background-color: #EDF3DA !important;
  border-color: #EDF3DA !important;
  color: #154D26 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}
.btn.btn-secondary.go_button-secondary:hover {
  background-color: #DCE7C8 !important;
  border-color: #DCE7C8 !important;
}

/* --- 5. Homepage-blokken (WORD LID / DOE MEE / NIEUWSBRIEF) ------
   Ronde hoeken + hover; plus twee zelf toe te kennen CSS-classes
   (sa-qr-blok, sa-link-blok) voor klikbare kaartblokken. ----------- */
.go_block.cx_card .go_card.go_block-content {
  /* achtergrondkleur bewust NIET forceren: die stel je zelf per blok in */
  border-radius: 28px !important;
  transition: transform .15s ease;
}
.go_block.cx_card .go_card.go_block-content:hover {
  transform: translateY(-2px);
}
.go_block-text p strong {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* QR-code / lidmaatschap-blok (CSS Class: sa-qr-blok)
   Blok heeft een target-url, is dus zelf klikbaar: geef het ook de
   uitstraling van een klikbare kaart (hover-lift + pointer) --------- */
.sa-qr-blok .go_block-content,
.go_block-content.sa-qr-blok,
.sa-qr-blok.go_block-content,
a.sa-qr-blok,
.sa-qr-blok {
  padding: 32px 32px 36px !important;
  cursor: pointer;
  text-align: center !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.sa-qr-blok .go_block-content:hover,
.go_block-content.sa-qr-blok:hover,
.sa-qr-blok.go_block-content:hover,
a.sa-qr-blok:hover,
.sa-qr-blok:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(21,77,38,.12);
}
.sa-qr-blok img {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 20px !important;
  box-shadow: 0 4px 14px rgba(21,77,38,.10) !important;
  display: inline-block !important;
}
/* tekst onder de QR ook centreren, zodat het geheel als één
   gecentreerde kaart oogt */
.sa-qr-blok .go_block-text,
.sa-qr-blok p {
  text-align: center !important;
}

/* Blokken zonder QR maar wél met een target-url (CSS Class:
   sa-link-blok) — zelfde klikbare kaart-uitstraling, zonder de
   beeld-specifieke styling van sa-qr-blok --------------------------- */
.sa-link-blok .go_block-content,
.go_block-content.sa-link-blok,
.sa-link-blok.go_block-content,
a.sa-link-blok,
.sa-link-blok {
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.sa-link-blok .go_block-content:hover,
.go_block-content.sa-link-blok:hover,
.sa-link-blok.go_block-content:hover,
a.sa-link-blok:hover,
.sa-link-blok:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(21,77,38,.12);
}

/* --- 5b. Volle-breedte hero-afbeelding/video (CSS Class: sa-hero-blok,
   of "header"/"hero") --
   Blok met een los geüploade hero-afbeelding of video (bv. 1170x520)
   die anders wordt uitgeknepen door de standaard block-content
   max-breedte — hier op de volle containerbreedte tonen, ongeschaald
   qua verhouding. */
.sa-hero-blok,
.go_block.header,
.go_block.hero,
.sa-hero-blok .go_block-content,
.go_block.header .go_block-content,
.go_block.hero .go_block-content,
.sa-hero-blok img,
.go_block.header img,
.go_block.hero img {
  width: 100% !important;
  max-width: none !important;
}
.sa-hero-blok,
.sa-hero-blok .go_block,
.go_block.sa-hero-blok,
.go_block.header,
.go_block.hero,
.sa-hero-blok .card,
.sa-hero-blok .go_card,
.go_block.header .card,
.go_block.hero .card,
.go_block.header .go_card,
.go_block.hero .go_card {
  background-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}
.sa-hero-blok .go_block-content,
.go_block.header .go_block-content,
.go_block.hero .go_block-content {
  padding: 0 !important;
}
.sa-hero-blok img,
.go_block.header img,
.go_block.hero img {
  display: block !important;
  height: auto !important;
  border-radius: 24px !important;
}
.go_block.cx_card.sa-hero-blok .go_card.go_block-content,
.go_block.cx_card.header .go_card.go_block-content,
.go_block.cx_card.hero .go_card.go_block-content,
.sa-hero-blok .go_card.go_block-content,
.go_block.header .go_card.go_block-content,
.go_block.hero .go_card.go_block-content,
.go_block.header.cx_card .go_card.go_block-content,
.go_block.hero.cx_card .go_card.go_block-content {
  border-radius: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.sa-hero-blok .go_video-wrapper,
.go_block.header .go_video-wrapper,
.go_block.hero .go_video-wrapper,
.sa-hero-blok iframe,
.go_block.header iframe,
.go_block.hero iframe {
  border-radius: 24px !important;
  overflow: hidden !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}
/* De video-wrapper op dezelfde beeldverhouding zetten als de
   overlay-afbeelding (1170:520), zodat de overlay er straks precies
   op past zonder vervorming. */
.sa-hero-blok .go_video-wrapper,
.go_block.header .go_video-wrapper,
.go_block.hero .go_video-wrapper,
.sa-hero-blok .go_video-wrapper {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  overflow: hidden !important;
}
/* De Vimeo-speler snijdt zelf bij als de videoverhouding niet exact
   16:9 is; standaard vanuit het midden, waardoor de bovenkant wegvalt.
   Iframe hier iets hoger maken en aan de bovenkant vastzetten, zodat
   de bijsnijding onderaan gebeurt i.p.v. bovenaan. */
.go_block.header .go_video-wrapper iframe,
.go_block.hero .go_video-wrapper iframe,
.sa-hero-blok .go_video-wrapper iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 112% !important;
  object-position: top !important;
}
.sa-hero-blok iframe,
.go_block.header iframe,
.go_block.hero iframe {
  height: 100% !important;
}
/* Vimeo/YouTube embed-code plaatst soms zelf een geneste wrapper-div
   met een vaste beeldverhouding (bv. via padding-bottom-trucje), die
   voorrang zou hebben boven onze buitenste aspect-ratio — hier elke
   laag tussen .go_video-wrapper en de iframe dwingen om de volledige
   ruimte te vullen, zodat de video nooit kleiner oogt dan het kader. */
.sa-hero-blok .go_video-wrapper > *,
.go_block.header .go_video-wrapper > *,
.go_block.hero .go_video-wrapper > * {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  max-width: none !important;
}
/* Het herokader is nu zelf 16:9 (gelijk aan de video en de overlay),
   dus de vroegere 178%-schaaltruc is niet meer nodig: die sneed de
   video juist boven en onder af. Iframe vult nu exact het kader. */
.sa-hero-blok .go_video-wrapper iframe,
.go_block.header .go_video-wrapper iframe,
.go_block.hero .go_video-wrapper iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}
/* Hero sluit direct aan op het hoofdmenu: de videowrapper krijgt van
   Gebiedonline 32px marge bovenaan, en de kaart eromheen 28px ronde
   hoeken — bij een full-bleed hero moeten beide weg. */
.sa-hero-blok .go_video-wrapper,
.sa-hero-blok.sa-hero-blok.sa-hero-blok .go_video-wrapper,
.go_row .go_block.sa-hero-blok .go_card .go_video-wrapper,
.go_block.header .go_video-wrapper,
.go_block.hero .go_video-wrapper {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.sa-hero-blok .go_block-content,
.sa-hero-blok .card,
.sa-hero-blok .go_card,
.sa-hero-blok .go_video-wrapper,
.sa-hero-blok .go_video-wrapper::after,
.sa-hero-blok iframe,
.go_block.header .go_block-content,
.go_block.header .go_video-wrapper::after,
.go_block.hero .go_block-content,
.go_block.hero .go_video-wrapper::after {
  border-radius: 0 !important;
  overflow: hidden !important;
}

/* Overlay-afbeelding boven de video (kop/tekst/logo + gradient): plakt
   bovenop de iframe, pointer-events:none zodat de video-bediening
   (play/pauze/fullscreen) erdoorheen blijft werken. */
.sa-hero-blok .go_video-wrapper,
.go_block.header .go_video-wrapper,
.go_block.hero .go_video-wrapper {
  position: relative !important;
}
/* Full-bleed hero: het blok breekt uit de 1170px-container zodat de
   1920-brede overlay op ware grootte komt en de tekst leesbaar blijft.
   Alleen op tablet en breder; op telefoon blijft de normale breedte. */
@media (min-width: 768px) {
  /* Crème strook tussen hoofdmenu en hero weghalen: de rij/container
     eromheen heeft standaard padding bovenaan. */
  .go_row:has(.go_block.header),
  .go_row:has(.go_block.hero),
  .go_row:has(.sa-hero-blok) {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .go_row:has(.go_block.header) > .go_container,
  .go_row:has(.go_block.hero) > .go_container,
  .go_row:has(.sa-hero-blok) > .go_container,
  .go_row:has(.sa-hero-blok) .cx_card-row,
  .go_row:has(.go_block.header) .cx_card-row,
  .go_row:has(.go_block.hero) .cx_card-row {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  /* Ook de content-wrapper zelf heeft padding bovenaan; alleen weghalen
     wanneer de hero de eerste strook op de pagina is. */
  .cx_content-inner > .go_row:first-child:has(.go_block.header),
  .cx_content-inner > .go_row:first-child:has(.go_block.hero),
  .cx_content-inner > .go_row:first-child:has(.sa-hero-blok) {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .cx_content-inner:has(> .go_row:first-child .sa-hero-blok),
  .cx_content-inner:has(> .go_row:first-child .go_block.header),
  .cx_content-inner:has(> .go_row:first-child .go_block.hero) {
    padding-top: 0 !important;
  }
  .go_row:has(.sa-hero-blok) .go_container,
  .go_row:has(.go_block.header) .go_container,
  .go_row:has(.go_block.hero) .go_container {
    padding-top: 0 !important;
  }
  .go_row:has(.sa-hero-blok) .cx_grid-col,
  .go_row:has(.go_block.header) .cx_grid-col,
  .go_row:has(.go_block.hero) .cx_grid-col {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .go_block.header,
  .go_block.hero,
  .sa-hero-blok,
  .go_block.sa-hero-blok {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  .go_block.header .go_block-content,
  .go_block.hero .go_block-content,
  .sa-hero-blok .go_block-content,
  .go_block.header .card,
  .go_block.hero .card,
  .sa-hero-blok .card,
  .go_block.header .go_card,
  .go_block.hero .go_card,
  .sa-hero-blok .go_card,
  .go_block.header .go_video-wrapper,
  .go_block.hero .go_video-wrapper,
  .sa-hero-blok .go_video-wrapper,
  .go_block.header iframe,
  .go_block.hero iframe,
  .sa-hero-blok iframe {
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  .go_block.header .go_video-wrapper::after,
  .go_block.hero .go_video-wrapper::after,
  .sa-hero-blok .go_video-wrapper::after {
    border-radius: 0 !important;
  }
}
.sa-hero-blok .go_video-wrapper::after,
.go_block.header .go_video-wrapper::after,
.go_block.hero .go_video-wrapper::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: 24px !important;
  background-image: url('https://smakelijkachterhoek.nl/engine/download/blob/gebiedsplatform/99678/2026/35/Hero-template--zonder-foto-1920x1080.png?app=gebiedsplatform&class=11534&id=189&field=99678') !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  z-index: 2 !important;
}
/* Op smalle schermen wordt de hele overlay (incl. tekst) evenredig
   kleiner en dus moeilijk leesbaar — daar een grotere, simpelere
   variant tonen i.p.v. de 1170x520-overlay te verkleinen. Vervang de
   URL hieronder door een los ontworpen mobiele overlay-afbeelding
   zodra die er is (bv. met alleen kop + logo, groter lettertype). */
@media (max-width: 640px) {
  .sa-hero-blok .go_video-wrapper,
  .go_block.header .go_video-wrapper,
  .go_block.hero .go_video-wrapper {
    aspect-ratio: 800 / 520 !important;
  }
  .sa-hero-blok .go_video-wrapper::after,
  .go_block.header .go_video-wrapper::after,
  .go_block.hero .go_video-wrapper::after {
    /* Vul hier de URL van de 800x520-mobiele overlay in (dezelfde als
       bij de statische hero) i.p.v. de 1170x520-desktopversie. */
    background-image: url('https://smakelijkachterhoek.nl/engine/download/blob/gebiedsplatform/99678/2026/31/Hero-template-zonder-foto-800x520.png?app=gebiedsplatform&class=11534&id=188&field=99678') !important;
    background-size: 100% 100% !important;
  }
}

/* --- 5c. Hero over de VOLLE BROWSERBREEDTE (CSS Class: sa-hero-volledig,
   te combineren met sa-hero-blok / "header" / "hero") ---------------
   De hero blijft standaard binnen de 1170px-contentkolom. Met deze
   extra class breekt hij daaruit en loopt van schermrand tot schermrand
   (100vw), zonder ronde hoeken — een echte full-bleed hero. Alleen
   toevoegen aan de hero zelf; de rest van de pagina blijft in de
   normale kolom staan. */
.sa-hero-volledig,
.go_block.sa-hero-volledig,
.sa-hero-volledig .go_block-content,
.sa-hero-volledig .go_card.go_block-content {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;
}
.sa-hero-volledig img,
.sa-hero-volledig .go_video-wrapper,
.sa-hero-volledig .go_video-wrapper::after,
.sa-hero-volledig iframe,
.sa-hero-volledig .go_card.go_block-content {
  border-radius: 0 !important;
}
/* De strook/rij eromheen mag geen zijmarge of overflow-clip meer
   opleggen, anders wordt de breakout weer afgesneden. */
.go_row:has(.sa-hero-volledig) .go_container,
.go_row:has(.sa-hero-volledig) .container-fluid,
.go_row:has(.sa-hero-volledig) .cx_card-row,
.go_row:has(.sa-hero-volledig) .cx_grid-col {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
}

/* --- 23. Foto naast/tussen tekst (CSS Classes: sa-blok-foto-tekst
   voor een los blok, sa-strook-foto-tekst voor een hele strook) ---
   Zet de eerste afbeelding in het blok/de strook naast de tekst i.p.v.
   erboven, met de tekst eromheen vloeiend. Werkt alleen als
   afbeelding + tekst in dezelfde container zitten (één blok, of één
   strook met daarin een los blok/paragraaf). */
.sa-blok-foto-tekst .go_block-content,
.sa-strook-foto-tekst .go_container {
  overflow: auto !important; /* clearfix voor de float */
  display: block !important; /* float werkt niet op flex-items */
}
.sa-blok-foto-tekst .go_block-title + div,
.sa-strook-foto-tekst .go_row-title + div {
  float: right !important;
  width: 45% !important;
  margin: 4px 24px 16px 24px !important;
}
.sa-blok-foto-tekst .go_block-content .image-wrapper,
.sa-strook-foto-tekst .go_container .image-wrapper,
.sa-blok-foto-tekst .go_block-content .cx_template-image-wrapper,
.sa-strook-foto-tekst .go_container .cx_template-image-wrapper {
  float: right !important;
  max-width: 45% !important;
  width: auto !important;
  height: auto !important;
  margin: 4px 24px 16px 24px !important;
}
.sa-blok-foto-tekst .go_block-content img,
.sa-strook-foto-tekst .go_container img {
  border-radius: 16px !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
}
.sa-blok-foto-tekst .go_block-content p,
.sa-strook-foto-tekst .go_container p {
  margin: 0 0 14px !important;
}
@media (max-width: 640px) {
  .sa-blok-foto-tekst .go_block-content img,
  .sa-strook-foto-tekst .go_container img,
  .sa-blok-foto-tekst .go_block-content picture,
  .sa-strook-foto-tekst .go_container picture,
  .sa-blok-foto-tekst .go_block-content .image-wrapper,
  .sa-strook-foto-tekst .go_container .image-wrapper,
  .sa-blok-foto-tekst .go_block-content .cx_template-image-wrapper,
  .sa-strook-foto-tekst .go_container .cx_template-image-wrapper {
    float: none !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 0 16px !important;
  }
}

/* Vangnet: overige blokken/kaarten (bv. Word lid / Doneer-pagina) die
   geen .cx_card of andere specifieke klasse hebben en daardoor de gele
   Gebiedonline-standaardkleur + scherpe hoeken behielden i.p.v. de
   huisstijl-kaartstijl ---------------------------------------------- */
.card.go_card,
.go_block .go_card,
.go_block-content {
  /* achtergrondkleur bewust NIET forceren: die vul je zelf per blok in
     via het CMS — hier alleen vormgeving (hoeken/rand) */
  border-radius: 22px !important;
  border-color: #EFE7D4 !important;
}
/* QR-code afbeeldingen: eigen witte kaart binnen het getinte blok,
   zodat de code goed scanbaar blijft (contrast). NIET op sa-link-blok
   (custom-vormgegeven afbeeldingen, bv. met afgeknipt hoekje). */
.go_block:not(.sa-link-blok) img,
.go_card:not(.sa-link-blok) img {
  border-radius: 14px !important;
}
.sa-link-blok img {
  border-radius: 0 !important;
}
.go_block.sa-link-blok,
.go_block.sa-link-blok .go_card,
.go_block.sa-link-blok .go_block-content {
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Strook-variant van sa-link-blok, voor een hele klikbare rij/strook
   (CSS Class: sa-link-strook) — bv. een fotoslider-strook met eigen
   target-url. Werkt op .go_row (de strook), niet op .go_block. */
.go_row.sa-link-strook {
  cursor: pointer !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  position: relative !important;
  z-index: 1 !important;
}
.go_row.sa-link-strook:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: 0 20px 40px rgba(21,77,38,.22) !important;
}
/* Titels binnen deze blokken (bv. "Word lid", "Doneer") volgen dezelfde
   Baloo 2 kop-stijl als de rest van de site */
.go_block-title,
.go_block h1, .go_block h2, .go_block h3,
.go_card-title, .go_card .card-title {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 800 !important;
  color: #283129 !important;
}
/* Tekst-alinea's in kaarten (bv. bestuur/personen): een Enter in de
   tekst maakt een nieuwe <p> met browser-standaard marge, wat als een
   hele lege regel oogt — verkleinen tot een normale regelafstand. */
.go_block-text p,
.go_card p,
.go_block p,
.card-body p {
  margin: 0 0 2px !important;
}
.go_block-text p:last-child,
.go_card p:last-child,
.go_block p:last-child,
.card-body p:last-child {
  margin-bottom: 0 !important;
}

/* --- 6. Nieuws-/aanbodkaarten ("Het laatste nieuws") -------------
   Gelijke kaarthoogte + tekst-afkap, alleen op de homepage-rij. ---- */
.go_card.go_card-with-border {
  border-radius: 22px !important;
  border-color: #EFE7D4 !important;
  background-color: #EDF3DA !important;
}
/* Nieuwskaarten ("Het laatste nieuws"): vaste totaalhoogte zodat alle
   kaarten in de rij gelijk zijn, ongeacht het type bericht (aanbod/
   activiteit/bericht hebben van nature andere inhoud/lengte). We laten
   de eigen overlap-opmaak (negative margin-top op de content-wrapper)
   intact en knippen overtollige tekst af i.p.v. de hoogte te forceren
   via flex, wat botst met die overlap. Deze regels zijn specifiek voor
   de HOMEPAGE (image-top layout, rij #go_row-10030) — zonder deze scope
   raken ze ook de kaarten op andere pagina's, zoals de Actueel-lijst
   (/berichten), die een ander (image-left) layout gebruiken. */
#go_row-10030 a.go_card,
a.go_card[class*="go_card-"]:not(.go_card-organization):not(.go_card-person):not(.go_card-small):not(.go_card-location):not(:has(.cx_template-image-left)):not(:has(.go_message-row-view-wrapper)) {
  height: 370px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
#go_row-10030 a.go_card .card-body,
a.go_card[class*="go_card-"]:not(.go_card-organization):not(.go_card-person):not(.go_card-small):not(.go_card-location):not(:has(.cx_template-image-left)):not(:has(.go_message-row-view-wrapper)) .card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
#go_row-10030 a.go_card .cx_template.cx_template-image-top,
a.go_card[class*="go_card-"]:not(.go_card-organization):not(.go_card-person):not(.go_card-small):not(.go_card-location):not(:has(.cx_template-image-left)):not(:has(.go_message-row-view-wrapper)) .cx_template.cx_template-image-top {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  height: auto !important;
}
#go_row-10030 a.go_card .cx_template-image-wrapper,
a.go_card[class*="go_card-"]:not(.go_card-organization):not(.go_card-person):not(.go_card-small):not(.go_card-location):not(:has(.cx_template-image-left)):not(:has(.go_message-row-view-wrapper)) .cx_template-image-wrapper {
  flex: 0 0 190px !important;
}
#go_row-10030 a.go_card .cx_template-content-wrapper,
a.go_card[class*="go_card-"]:not(.go_card-organization):not(.go_card-person):not(.go_card-small):not(.go_card-location):not(:has(.cx_template-image-left)):not(:has(.go_message-row-view-wrapper)) .cx_template-content-wrapper {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  flex: 1 !important;
}
#go_row-10030 a.go_card .cx_template-image-wrapper,
a.go_card[class*="go_card-"]:not(.go_card-organization):not(.go_card-person):not(.go_card-small):not(.go_card-location):not(:has(.cx_template-image-left)):not(:has(.go_message-row-view-wrapper)) .cx_template-image-wrapper {
  height: 190px !important;
  overflow: hidden !important;
}
#go_row-10030 a.go_card .cx_template-image-wrapper img,
a.go_card[class*="go_card-"]:not(.go_card-organization):not(.go_card-person):not(.go_card-small):not(.go_card-location):not(:has(.cx_template-image-left)):not(:has(.go_message-row-view-wrapper)) .cx_template-image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  /* Center-crop sneed regelmatig hoofden af op portretfoto's — de
     bovenkant van het beeld tonen i.p.v. het midden. */
  object-position: top center !important;
}
/* titel en introtekst afkappen op een vast aantal regels, zodat
   kortere/langere berichten niet meer voor uitschietende kaarten
   zorgen */
#go_row-10030 a.go_card .go_card-title-wrapper,
a.go_card[class*="go_card-"]:not(.go_card-organization):not(.go_card-person):not(.go_card-small):not(.go_card-location):not(:has(.cx_template-image-left)):not(:has(.go_message-row-view-wrapper)) .go_card-title-wrapper {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
#go_row-10030 a.go_card .go_card-text-intro,
a.go_card[class*="go_card-"]:not(.go_card-organization):not(.go_card-person):not(.go_card-small):not(.go_card-location):not(:has(.cx_template-image-left)):not(:has(.go_message-row-view-wrapper)) .go_card-text-intro {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* Gebiedonline zet per berichttype (aanbod/activiteit/bericht) een
   andere margin-top op de content-wrapper (die over de foto overlapt),
   waardoor de categorielabel niet bij elk type op dezelfde hoogte
   begint (bijv. "BERICHT"-kaarten zakken lager uit dan "AANBOD"/
   "ACTIVITEIT"). In plaats van hun margin-top-trucs te blijven volgen,
   wordt de content-wrapper hier absoluut gepositioneerd op een vaste
   afstand vanaf de bovenkant van de kaart (net onder de 190px-foto) —
   dat werkt voor ieder type identiek, ongeacht wat Gebiedonline zelf
   per type instelt. */
#go_row-10030 a.go_card,
a.go_card[class*="go_card-"]:not(.go_card-organization):not(.go_card-person):not(.go_card-small):not(.go_card-location):not(:has(.cx_template-image-left)):not(:has(.go_message-row-view-wrapper)) {
  position: relative !important;
}
#go_row-10030 a.go_card .cx_template.cx_template-image-top,
a.go_card[class*="go_card-"]:not(.go_card-organization):not(.go_card-person):not(.go_card-small):not(.go_card-location):not(:has(.cx_template-image-left)):not(:has(.go_message-row-view-wrapper)) .cx_template.cx_template-image-top {
  position: static !important;
}
/* Berichtkaarten (go_card-message) tonen een extra "auteur"-blok
   (foto + naam) vóór het categorielabel dat andere kaarttypen niet
   hebben — daardoor zakte "BERICHT" lager uit dan "AANBOD"/
   "ACTIVITEIT". Dat blok verbergen zodat alle typen dezelfde
   opbouw hebben. */
#go_row-10030 a.go_card .go_source-wrapper.meta-wrapper,
#go_row-10030 a.go_card .go_no-source,
a.go_card[class*="go_card-"]:not(.go_card-organization):not(.go_card-person):not(.go_card-small):not(.go_card-location):not(:has(.cx_template-image-left)):not(:has(.go_message-row-view-wrapper)) .go_source-wrapper.meta-wrapper,
a.go_card[class*="go_card-"]:not(.go_card-organization):not(.go_card-person):not(.go_card-small):not(.go_card-location):not(:has(.cx_template-image-left)):not(:has(.go_message-row-view-wrapper)) .go_no-source {
  display: none !important;
}
/* Ondanks bovenstaande fixes verschilt de positie van het categorielabel
   zelf nog steeds per type (activiteit/bericht 15px lager dan
   aanbod/service) — Gebiedonline's eigen basisstijl zet kennelijk een
   afwijkende margin-top op .category-wrapper per kaarttype. Hier op
   één vaste waarde forceren voor alle typen. */
#go_row-10030 a.go_card .category-wrapper,
a.go_card[class*="go_card-"]:not(.go_card-organization):not(.go_card-person):not(.go_card-small):not(.go_card-location):not(:has(.cx_template-image-left)):not(:has(.go_message-row-view-wrapper)) .category-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#go_row-10030 a.go_card .cx_template-image-top .cx_template-content-wrapper,
a.go_card[class*="go_card-"]:not(.go_card-organization):not(.go_card-person):not(.go_card-small):not(.go_card-location):not(:has(.cx_template-image-left)):not(:has(.go_message-row-view-wrapper)) .cx_template-image-top .cx_template-content-wrapper {
  position: absolute !important;
  top: 190px !important;
  left: 0 !important;
  right: 0 !important;
  margin-top: 0 !important;
}
.go_card .category-wrapper {
  color: #E2A93E;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.go_card .go_card-title-wrapper {
  font-weight: 700 !important;
  color: #283129;
}
.go_card .go_source-name-wrapper {
  font-weight: 600;
  color: #6E7567;
  font-size: 13px;
}
.go_card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
/* --- 6b. Detail-popup (bv. bij aanbod-locaties, "meer info"-venster)
   Categorie-icoontje en tekst komen los ingevoerd met harde inline
   kleuren (fel rood icoon, zwarte tekst) — hier naar de huisstijl
   getrokken: icoon groen, "Adres:" bold/Baloo/groen net als de titel,
   lichtgroene achtergrond, ronde hoeken boven én onder. -------------- */
.cx_editor-modal i[style*="color"] {
  color: #154D26 !important;
}
.cx_editor-modal span[style*="color:black"],
.cx_editor-modal span[style*="color: black"] {
  color: #283129 !important;
}
.cx_editor-modal {
  font-family: 'Baloo 2', sans-serif !important;
}
.cx_editor-modal strong {
  color: #154D26 !important;
}
.modal-body.cx_editor-modal {
  background: #EDF3DA !important;
}
.cx_editor-modal,
.modal-content:has(.cx_editor-modal) {
  border-radius: 20px !important;
  overflow: hidden !important;
}
.modal-header:has(+ .cx_editor-modal),
.modal-content:has(.cx_editor-modal) .modal-header {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 700 !important;
  color: #154D26 !important;
}
.modal-content:has(.cx_editor-modal) .modal-title {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 700 !important;
  color: #154D26 !important;
}
/* Activiteiten-/agendalijst (/activiteiten): ander sjabloon
   (cx_template-no-image met los datumblok + kleine vierkante foto
   i.p.v. cx_template-image-top) dan de homepage-nieuwskaarten, maar
   viel toch onder de brede 370px-hoogteregel hierboven — met deze
   kortere inhoud bleef er dan veel lege ruimte onderin het kader over.
   Hier specifiek voor deze paginacontext teruggezet naar een normale,
   zichzelf-sluitende hoogte. */
.go_calender-list-wrapper a.card.cx_paragraph.cx_card.go_card.go_card-no-border {
  height: auto !important;
  display: block !important;
  position: static !important;
  overflow: visible !important;
}

/* Link "Bekijk al het nieuws" */
.go_link {
  color: #154D26 !important;
  font-weight: 700;
}
.go_link:hover {
  color: #C2603A !important;
}
/* Handgetekend pijltje omlaag i.p.v. het standaard fa-arrow-circle-right
   icoon: link + pijl gecentreerd onder elkaar. */
.go_link {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: center;
}
.go_link i,
.go_link .fa {
  display: none !important;
}
.go_link::after {
  content: "";
  display: block;
  width: 22px;
  height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30'%3E%3Cpath d='M13 2 C 12 12, 13.5 20, 14 26' fill='none' stroke='%23E2A93E' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M5 19 C 8 22, 11 25, 14 27 C 17 24, 19.5 21, 22 18' fill='none' stroke='%23E2A93E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(-90deg);
}

/* --- 18a2. Filter-chips (Onderwerp/Productgroep, bv. "Groenten (36)"):
   ronde pil i.p.v. rechthoekige knop, actief = donkergroen met wit,
   inactief = wit met dunne rand, zoals de rest van de huisstijl --- */
a.go_filter-button {
  border-radius: 999px !important;
  border: 1px solid #DCE7C8 !important;
  background: #fff !important;
  color: #154D26 !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
}
a.go_filter-button:hover {
  border-color: #154D26 !important;
  background: #F1F5E8 !important;
}
a.go_filter-button[aria-pressed="true"] {
  background: #154D26 !important;
  border-color: #154D26 !important;
  color: #FAF6EC !important;
}

/* --- 18b. Filter-popup: checkboxes als ronde, gevulde bolletjes i.p.v.
   de standaard vierkante browser-checkbox (Bootstrap .form-check). --- */
.form-check-input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 2px solid #C9C1A8 !important;
  background: #fff !important;
  margin-top: 2px !important;
  cursor: pointer;
}
.form-check-input[type="checkbox"]:checked {
  border-color: #154D26 !important;
  background: #154D26 !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}
.form-check-input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px rgba(21,77,38,.25) !important;
}
.form-check-label {
  color: #283129;
  cursor: pointer;
}

/* --- 18c. Agendalijst dagnummer: compact wit kaartje met duidelijkere
   hiërarchie i.p.v. platte tekst (zie variant 15a). Tijdstip stond
   voorheen wit-op-lichtgroen (bijna onleesbaar) — nu leesbaar met een
   scheidingslijntje erboven. ------------------------------------------ */
.go_feed-message-date-wrapper {
  background: #fff !important;
  border-radius: 12px !important;
  padding: 10px 6px !important;
  text-align: center !important;
  align-self: flex-start !important;
  width: 80px !important;
  flex: 0 0 auto !important;
}
.go_feed-message-date-wrapper .go_day-name-wrapper {
  font-size: 12px !important;
  color: #6E7567 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}
.go_feed-message-date-wrapper .go_date-day-wrapper {
  font-weight: 800 !important;
  font-size: 26px !important;
  color: #154D26 !important;
  line-height: 1 !important;
}
.go_feed-message-date-wrapper .go_date-month-wrapper {
  font-weight: 800 !important;
  font-size: 13px !important;
  color: #A87A1C !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  margin-top: 2px !important;
}
.go_feed-message-date-wrapper .go_date-time-wrapper {
  font-size: 12px !important;
  color: #6E7567 !important;
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px solid #EAE2CC !important;
}
.go_feed-message-date-wrapper .go_date-time-wrapper:empty {
  display: none !important;
}
/* Datumkaartje en foto op gelijke, compactere hoogte i.p.v. de foto
   z'n eigen (grotere) hoogte te laten bepalen. */
.go_message-row-view-wrapper {
  align-items: stretch !important;
}
.go_feed-message-date-wrapper {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 110px !important;
  flex: 0 0 auto !important;
}
.go_message-row-view-wrapper .cx_template-image-wrapper,
.go_message-row-view-wrapper.go_message-row-view-wrapper .cx_template-image-wrapper img {
  object-fit: cover !important;
}
.go_message-row-view-wrapper .cx_template-image-wrapper {
  align-self: stretch !important;
}
.go_message-row-view-wrapper .cx_template-image-wrapper img {
  height: 100% !important;
  width: 100% !important;
}
/* De regel hierboven verliest van sectie 6 (regel ~678, die expliciet
   190px zet op .cx_template-image-wrapper binnen elk go_card-type) —
   hier met exact dezelfde selectoropbouw (dus gegarandeerd hogere/gelijke
   specificiteit, en later in het bestand dus wint bij gelijkspel). */
#go_row-10030 a.go_card .go_message-row-view-wrapper .cx_template-image-wrapper,
a.go_card[class*="go_card-"]:not(.go_card-organization):not(.go_card-person):not(.go_card-small):not(.go_card-location):not(:has(.cx_template-image-left)):not(:has(.go_message-row-view-wrapper)) .go_message-row-view-wrapper .cx_template-image-wrapper {
  height: auto !important;
  flex: 0 0 140px !important;
}
/* Datumkaartje compacter maken (minder ruimte tussen de regels), zodat
   de hele rij (foto + datumkaartje) op een kleine hoogte blijft i.p.v.
   dat de foto uitgerekt moet worden om de hoogte van het datumkaartje
   bij te benen. */
.go_feed-message-date-wrapper {
  padding: 6px 6px !important;
}
.go_feed-message-date-wrapper .go_date-time-wrapper {
  margin-top: 3px !important;
  padding-top: 3px !important;
  font-weight: 800 !important;
}

.go_row.Verkooppunten .go_block.cx_card .go_card {
  border-radius: 20px !important;
  transition: transform .15s ease;
}
.go_row.Verkooppunten .go_block.cx_card .go_card:hover {
  transform: translateY(-2px);
}

/* --- 8. Kaart (Leaflet) — kleine correcties ----------------------
   Ronde hoeken op kaart-embed en popups. --------------------------- */
/* Kaart-pins: elke marker krijgt van Gebiedonline een eigen felle
   inline kleur per categorie (rood/oranje/magenta/paars/etc, zie
   .go_map-commissaris i style="color:..."), wat rommelig oogt naast
   de huisstijl. Force alle pin-iconen naar één rustige huisstijlkleur
   (!important wint van de inline style). */
.go_map-commissaris i {
  color: #4B7A52 !important;
}
.leaflet-popup-content-wrapper {
  border-radius: 18px !important;
  font-family: 'Baloo 2', sans-serif;
}
.go_map-commissaris {
  box-shadow: 0 3px 10px rgba(0,0,0,.25) !important;
}
/* Kaart-embed op de homepage: afgeronde hoeken */
#cxMap,
.leaflet-container {
  border-radius: 20px !important;
  overflow: hidden;
}

/* --- 9. Links algemeen --------------------------------------------
   Standaard linkkleur + hoverkleur in de huisstijl. ---------------- */
.go_container a:not(.btn):not(.go_button):not(.card) {
  color: #154D26;
}
.go_container a:not(.btn):not(.go_button):not(.card):hover {
  color: #C2603A;
}

/* --- 10. Footer ----------------------------------------------------
   Kleuren, regelafstand, nieuwsbrief-uitlijning, logo/tekst linksboven
   en social-iconen (via ::before, herkend op de link-URL). --------- */
footer,
.go_footer,
.go_footer-web {
  background-color: #103E20 !important;
  color: #CFE3BE !important;
}
footer a,
.go_footer a,
.go_footer-web a {
  color: #CFE3BE !important;
}
footer a:hover,
.go_footer a:hover,
.go_footer-web a:hover {
  color: #ACCD63 !important;
}
/* Regels in de footer-kolommen (Terug naar homepage / Volg ons.../
   Over Slow Food...) staan te ver uit elkaar — compacter maken */
footer li,
.go_footer li,
.go_footer-web li,
footer ul,
.go_footer ul,
.go_footer-web ul {
  margin-bottom: 0 !important;
  line-height: 1.3 !important;
}
footer p,
.go_footer p,
.go_footer-web p,
footer .nav-item,
.go_footer .nav-item,
.go_footer-web .nav-item {
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
}

/* "Blijf op de hoogte!" kop (in go_footer-default-wrapper) heeft nu te
   weinig contrast — naar crème, ongeacht of het een h2/h3/h4/div is */
.go_footer-web h1,
.go_footer-web h2,
.go_footer-web h3,
.go_footer-web h4,
.go_footer-default-wrapper h1,
.go_footer-default-wrapper h2,
.go_footer-default-wrapper h3,
.go_footer-default-wrapper h4 {
  color: #FAF6EC !important;
}
/* Inschrijf-knop: gele/oker pil met donkere tekst, ongeacht of het
   element een button, input of link is */
.go_footer-web button,
.go_footer-web input[type="submit"],
.go_footer-web .btn,
.go_footer-default-wrapper button,
.go_footer-default-wrapper input[type="submit"],
.go_footer-default-wrapper .btn {
  background-color: #E2A93E !important;
  border-color: #E2A93E !important;
  color: #103E20 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 10px 20px !important;
}
.go_footer-web input[type="email"],
.go_footer-web input[type="text"],
.go_footer-default-wrapper input[type="email"],
.go_footer-default-wrapper input[type="text"] {
  border-radius: 999px !important;
}

/* Nieuwsbrief-blok: kop/tekst/formulier op één regel, in plaats van
   onder elkaar — op basis van de echte classnamen. Harde reset omdat
   Bootstrap .row/.col/toolbar-wrappers standaard marges/padding zetten
   die de uitlijning verstoorden. */
.go_footer-newsletter-subscription-wrapper .row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
}
.go_footer-newsletter-subscription-wrapper .col {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  width: auto !important;
}
.go_footer-newsletter-subscription-wrapper p {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  font-size: 13px !important;
  margin: 0 !important;
  color: #CFE3BE !important;
}
.go_footer-newsletter-subscription-wrapper form {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
.go_footer-newsletter-subscription-wrapper .row,
.go_footer-newsletter-subscription-wrapper [class*="col"],
.go_footer-newsletter-subscription-wrapper .cx_fieldlines,
.go_footer-newsletter-subscription-wrapper .cx_fieldline,
.go_footer-newsletter-subscription-wrapper .cx_fieldline-content,
.go_footer-newsletter-subscription-wrapper .cx_widget,
.go_footer-newsletter-subscription-wrapper .btn-toolbar,
.go_footer-newsletter-subscription-wrapper .cx_paragraph-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}
/* De knop-toolbar (#cxs_1193) heeft Bootstrap d-table + w-100 die
   'm laten uitrekken/anders gedragen dan het e-mailveld — expliciet
   defeaten zodat beide even hoog en verticaal gelijk uitlijnen */
.go_footer-newsletter-subscription-wrapper .cx_btn-toolbar.d-table {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  table-layout: auto !important;
}
/* cx_form-group-lg reserveert normaliter ruimte voor een label boven
   het veld — hier is geen label, dus die ruimte duwt het veld
   onnodig naar beneden t.o.v. de knop */
.go_footer-newsletter-subscription-wrapper .cx_form-group-lg {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.go_footer-newsletter-subscription-wrapper .cx_fieldline-content,
.go_footer-newsletter-subscription-wrapper .cx_widget-E_mail {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.go_footer-newsletter-subscription-wrapper .cx_grid-row,
.go_footer-newsletter-subscription-wrapper .cx_btn-toolbar {
  margin: 0 !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  height: 48px !important;
}
.go_footer-newsletter-subscription-wrapper .cx_grid-col {
  padding: 0 !important;
}
.go_footer-newsletter-subscription-wrapper .cx_form-group-lg label,
.go_footer-newsletter-subscription-wrapper label[for="E_mail"] {
  display: none !important;
}
/* Kop "Blijf op de hoogte!" (h3) onderdrukken — de tekst ernaast
   ("Schrijf je hier in...") volstaat op deze regel */
.go_footer-newsletter-subscription-wrapper h3 {
  display: none !important;
}
.go_footer-newsletter-subscription-wrapper input#E_mail {
  border-radius: 999px !important;
  padding: 0 16px !important;
  width: 220px !important;
  height: 48px !important;
  box-sizing: border-box !important;
  border: none !important;
  vertical-align: middle !important;
  line-height: 48px !important;
  margin-top: 0 !important;
  align-self: center !important;
}
.go_footer-newsletter-subscription-wrapper .btn.btn-primary.cx_btn {
  background-color: #E2A93E !important;
  border-color: #E2A93E !important;
  color: #103E20 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  white-space: nowrap;
  height: 48px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 22px !important;
  margin: 0 !important;
}

/* Onderste regel (Privacy / Beveiligingsprobleem / Gebiedonline) iets
   kleiner */
.go_footer-default-wrapper a {
  font-size: 12px !important;
}

/* Logo + korte tekst bovenaan het footer-menu (echte, al gehoste
   SA-woordmerk-afbeelding — de transparante witte SF Achterhoek-slak
   staat niet op de Gebiedonline-mediaserver, dus die kan niet via
   CSS content:url() worden ingeladen zonder eerst als webafbeelding
   te zijn geüpload) */
.go_footer-menuwrapper {
  display: flex !important;
  flex-direction: column !important;
  padding-top: 0 !important;
}
.go_footer-menuwrapper .go_container.d-table {
  display: flex !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding-left: 79px !important;
  box-sizing: border-box !important;
}
.go_footer-menuwrapper::before {
  content: "" !important;
  display: block !important;
  order: -2 !important;
  width: 220px !important;
  height: 64px !important;
  background-image: url('https://smakelijkachterhoek.nl/engine/download/blob/gebiedsplatform/99678/2026/29/Community_Achterhoek_600_Wit_Trans_1.png?app=gebiedsplatform&class=11534&id=185&field=99678');
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
  margin: 0 0 8px 0 !important;
}
.go_footer-menuwrapper::after {
  content: "De voedselcommunity voor de Achterhoek, Twente & Liemers. Een initiatief van Slow Food Achterhoek." !important;
  display: block !important;
  order: -1 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #CFE3BE !important;
  max-width: 460px !important;
  margin: 0 0 24px 0 !important;
}
@media (max-width: 767px) {
  .go_footer-menuwrapper .go_container.d-table {
    padding-left: 24px !important;
  }
  .go_footer-menuwrapper::before,
  .go_footer-menuwrapper::after {
    margin-left: 24px !important;
  }
}

/* Social-media icoontjes vóór de tekstlinks (Font Awesome is al geladen
   op de site) — geen los icoon-element in de HTML, dus via ::before op
   de links zelf. Tekst wordt onderdrukt en de li's naast elkaar gezet.
   Kolom-onafhankelijk: werkt in welke kolom van het footer-menu de
   social-links ook staan. */
.go_footer-menuwrapper .go_container ul:nth-of-type(3) li {
  display: inline-flex !important;
  margin: 0 8px 0 0 !important;
}
.go_footer-menuwrapper a[href*="instagram.com"],
.go_footer-menuwrapper a[href*="facebook.com"],
.go_footer-menuwrapper a[href*="youtube.com"],
.go_footer-menuwrapper a[href*="linkedin.com"] {
  font-size: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #1F5630 !important;
}
.go_footer-menuwrapper a[href*="instagram.com"]::before,
.go_footer-menuwrapper a[href*="facebook.com"]::before,
.go_footer-menuwrapper a[href*="youtube.com"]::before,
.go_footer-menuwrapper a[href*="linkedin.com"]::before {
  font-weight: 900;
  font-size: 15px !important;
  margin-right: 0 !important;
  color: #CFE3BE;
}
.go_footer-menuwrapper a[href*="instagram.com"]::before,
.go_footer-menuwrapper a[href*="facebook.com"]::before,
.go_footer-menuwrapper a[href*="youtube.com"]::before {
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", FontAwesome !important;
}
.go_footer-menuwrapper a[href*="linkedin.com"]::before {
  font-family: "Font Awesome 6 Brands", FontAwesome !important;
}
.go_footer-menuwrapper a[href*="instagram.com"]::before {
  content: "\f16d";
}
.go_footer-menuwrapper a[href*="facebook.com"]::before {
  content: "\f39e";
}
.go_footer-menuwrapper a[href*="youtube.com"]::before {
  content: "\f167";
}
.go_footer-menuwrapper a[href*="linkedin.com"]::before {
  content: "\f0e1";
}

/* --- 11. Aanbod/zoekpagina (/aanbod) ------------------------------
   Kaartstijl voor adreskaarten en de detailpagina. ----------------- */
/* Adreskaarten op het /aanbod-overzicht (rasterweergave) */
a.card.go_card.go_card-no-border {
  background-color: #EDF3DA !important;
  border-radius: 22px !important;
  overflow: hidden;
}
a.card.go_card.go_card-no-border .card-body {
  background-color: #EDF3DA !important;
}

/* Detailpagina van een adres (/aanbod/{id}/...): hoofdkaart + reacties */
.go_wall-wrapper .card.go_card.go_wall-card {
  background-color: #FAF6EC !important;
  border-radius: 22px !important;
  overflow: hidden;
}
/* De donkergroene contactstrook onderin de kaart: ronde hoeken onderaan */
.go_contact-wrapper {
  border-radius: 0 0 22px 22px !important;
  overflow: hidden;
}
#comments.card.go_card.go_comments-wrapper {
  background-color: #EDF3DA !important;
  border-radius: 22px !important;
}

/* Contactregel op de detailpagina (e-mail/website/telefoon): niet afbreken */
.go_contact-wrapper .go_card-meta-line {
  white-space: nowrap;
}
/* Iconen (@ / globe / facebook / telefoon) in de donkergroene strook
   waren te donker/vaag — lichter maken zodat ze goed opvallen */
.go_contact-wrapper .go_card-meta-line i {
  color: #CFE3BE !important;
  opacity: 1 !important;
}

/* --- 11b. Organisatie-tegels: gelijke hoogte per rij in de ledenlijst.
   Organisatie-tegels (ledenlijst): gelijke hoogte per rij,
   ongeacht of een organisatie SDG-iconen/foto's toont. LET OP: alleen
   in de ledenlijst-grid (kaarten in een cx_grid-row-equalHeight of
   direct in de contentkolom) — NIET op de projectdetailpagina, waar
   dezelfde .go_card-organization class hergebruikt wordt in een
   image-left lijst-item (.go_wall-relations-wrapper). Vandaar de
   :not()-uitsluiting. --------------------------------------------- */
.cx_grid-col a.go_card.go_card-organization,
a.go_card.go_card-organization,
a.card.go_card.go_card-organization {
  height: 220px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
/* Uitzondering: op de projectdetailpagina (zijbalk) is dit dezelfde
   class maar in een image-left lijst-item — daar overschrijft sectie
   12 (.go_wall-relations-wrapper) deze afmetingen weer, met een
   selector die zwaarder weegt zodat 'ie wint van de regel hierboven. */
/* SDG-iconenrij (varieert sterk in aantal/hoogte per organisatie) —
   verkleinen en op minder rijen tonen i.p.v. verbergen. Dit zijn losse
   <img>-tags zonder eigen class, dus op de src herkennen. Let op: de
   organisatie-tegel gebruikt go_card-organization (niet
   go_card-with-source), dus breed targeten. */
a.go_card img[src*="SDG-icon"],
a.card img[src*="SDG-icon"] {
  width: 32px !important;
  height: 32px !important;
  margin: 0 4px 4px 0 !important;
  display: inline-block !important;
}

/* --- 11c. "Afzender"-kaartje (organisatie-widget in de zijbalk van een
   bericht/activiteit): zelfde go_card-organization class, maar hier
   los in een go_network-category-wrapper — niet in de ledenlijst-grid
   en niet in .go_wall-relations-wrapper. Krijgt anders de 220px-vaste
   hoogte van 11b, wat het logo krap/afgesneden laat ogen. Hier een
   horizontale, luchtige kaart van: logo links, naam/type rechts,
   SDG-iconen op een eigen regel eronder. --------------------------- */
.go_network-category-wrapper a.go_card.go_card-organization {
  height: auto !important;
  width: 100% !important;
  display: block !important;
  overflow: visible !important;
  padding: 20px !important;
}
.go_network-category-wrapper a.go_card.go_card-organization .cx_template.cx_template-image-left {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}
.go_network-category-wrapper a.go_card.go_card-organization .cx_template-image-wrapper {
  flex: 0 0 56px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}
.go_network-category-wrapper a.go_card.go_card-organization .cx_template-image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.go_network-category-wrapper a.go_card.go_card-organization .cx_template-content-wrapper {
  flex: 1 !important;
}
.go_network-category-wrapper a.go_card.go_card-organization .go_card-title-wrapper {
  margin: 0 !important;
}
.go_network-category-wrapper a.go_card.go_card-organization .go_card-line1 {
  margin: 2px 0 0 !important;
}
.go_network-category-wrapper a.go_card.go_card-organization .cx_template-content-wrapper > div:last-child {
  flex-basis: 100% !important;
  margin-top: 12px !important;
  padding-top: 0 !important;
}
.go_network-category-wrapper a.go_card.go_card-organization .cx_template-content-wrapper > div:last-child br {
  display: none !important;
}

/* --- 12. Projectdetailpagina (zijbalk): compacte lijst-widgets zodat
   de pagina korter wordt.
   Projectdetailpagina (zijbalk): compactere widgets zodat de
   pagina minder lang wordt. Contactpersonen/Betrokken organisaties/
   Betrokken locaties/Activiteiten/Berichten delen dezelfde
   .cx_template-image-left opzet met een relatief grote foto/logo
   (262-388px breed) t.o.v. de korte titel — dat maakt elke regel
   onnodig hoog. Hier verkleinen tot een compacte thumbnail. -------- */
.go_wall-project .go_wall-relations-wrapper .cx_template-image-wrapper {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.go_wall-project .go_wall-relations-wrapper .cx_template-image-wrapper img,
.go_wall-project .go_wall-relations-wrapper .cx_template-image-wrapper picture {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* Aanbod/Organisatie-detailpagina (bv. Hoofdlocatie-kaart): grotere
   foto, niet de compacte 56px-icoongrootte van projectpagina's. */
.go_wall-aanbod .go_wall-relations-wrapper .cx_template-image-wrapper,
.go_wall-organization .go_wall-relations-wrapper .cx_template-image-wrapper {
  width: 180px !important;
  height: 180px !important;
  flex: 0 0 180px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.go_wall-aanbod .go_wall-relations-wrapper .cx_template-image-wrapper img,
.go_wall-organization .go_wall-relations-wrapper .cx_template-image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* "AANBOD"-categorielabel bovenaan de detailkaart: even groot/zwaar
   als "Betrokken personen"/"Hoofdlocatie" in de zijbalk, i.p.v. de
   kleine hoofdletter-stijl die er nu los naast staat. */
.go_wall-card-category {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #154D26 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.go_wall-relations-wrapper .cx_template.cx_template-image-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
/* Herstelt de afmetingen/layout die sectie 11b breed zette op
   a.go_card.go_card-organization — hier moet het weer een compacte,
   horizontale lijstregel zijn i.p.v. een 220px-hoge tegel. */
.go_wall-relations-wrapper .cx_grid-col a.go_card.go_card-organization,
.go_wall-relations-wrapper a.card.go_card.go_card-organization {
  height: auto !important;
  width: auto !important;
  display: flex !important;
  flex-direction: row !important;
  overflow: visible !important;
}
.go_wall-relations-wrapper .card-body {
  padding: 10px 14px !important;
}
.go_wall-relations-wrapper .go_card-title-wrapper {
  font-size: 15px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
.go_wall-relations-wrapper .go_card-line1,
.go_wall-relations-wrapper .go_card-meta-wrapper {
  font-size: 12px !important;
  margin: 2px 0 0 !important;
}
/* SDG-iconen (bij organisaties) blijven zichtbaar maar compact, niet
   de hele rijhoogte laten opblazen */
.go_wall-relations-wrapper .cx_template-content-wrapper img[src*="SDG-icon"] {
  width: 22px !important;
  height: 22px !important;
  margin: 4px 3px 0 0 !important;
}

/* --- 12b. Hoofdlocatie-kaart (go_card-location): zelfde opzet als
   Betrokken personen — grote vierkante foto links, naam/type rechts,
   op een lichtgroen kader. Hoge specificiteit om te winnen van de
   compacte 56px-lijstregel uit sectie 12 (bedoeld voor personen/
   organisaties, niet voor de Hoofdlocatie-kaart). ------------------- */
.go_wall-relations-wrapper a.go_card-location.go_card-location {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 20px !important;
  background: #EDF3DA !important;
  border-radius: 24px !important;
  height: auto !important;
  overflow: hidden !important;
}
/* Alles behalve de eerste inhoudsblok (foto+titel) verbergen — een
   eventueel extra, verder leeg blok (adres/openingstijden e.d.) mag de
   kaart niet onnodig hoog maken. */
.go_wall-relations-wrapper a.go_card-location.go_card-location > *:not(:first-child) {
  display: none !important;
}
.go_wall-relations-wrapper a.go_card-location.go_card-location .card-body {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 0 !important;
  width: 100% !important;
}
.go_wall-relations-wrapper a.go_card-location.go_card-location .cx_template.cx_template-image-left {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
}
/* Eventuele lege/overtollige elementen na foto+titel (bv. een leeg
   adres- of openingstijden-blok, alleen bij locaties aanwezig) mogen
   de kaart niet extra hoog maken. */
.go_wall-relations-wrapper a.go_card-location.go_card-location .cx_template-content-wrapper > *:empty {
  display: none !important;
}
.go_wall-relations-wrapper a.go_card-location.go_card-location .cx_template-content-wrapper {
  align-self: center !important;
}
.go_wall-relations-wrapper a.go_card-location.go_card-location .cx_template-image-wrapper {
  width: 180px !important;
  height: 180px !important;
  flex: 0 0 180px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.go_wall-relations-wrapper a.go_card-location.go_card-location .cx_template-image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.go_wall-relations-wrapper a.go_card-location.go_card-location .go_card-title-wrapper {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #154D26 !important;
  margin: 0 0 4px !important;
}
.go_wall-relations-wrapper a.go_card-location.go_card-location .go_card-line1 {
  font-size: 14px !important;
  color: #154D26 !important;
}

/* --- 13. Mobiele weergave: headerknop niet meer over de foto heen.
   Headerknop ("maak je eigen profiel aan" e.d.) op smalle
   schermen: staat standaard los over de achtergrondfoto midden in
   beeld (float-end + geen eigen positionering in de mobiele grid) —
   op mobiel netjes ONDER de afbeelding plaatsen i.p.v. erover ------ */
@media (max-width: 767px) {
  .go_content-header-grid.go_content-header-hasBackground.go_content-header-hasButtons {
    display: flex !important;
    flex-direction: column !important;
  }
  .go_content-header-grid.go_content-header-hasBackground.go_content-header-hasButtons .go_content-header-background {
    order: 1 !important;
    position: relative !important;
  }
  .go_content-header-grid.go_content-header-hasBackground.go_content-header-hasButtons .go_content-header {
    order: 2 !important;
    position: relative !important;
    padding: 16px !important;
  }
  .go_content-header-grid.go_content-header-hasBackground.go_content-header-hasButtons .go_content-header-buttons {
    float: none !important;
  }
  .go_content-header-grid.go_content-header-hasBackground.go_content-header-hasButtons .go_content-header-buttons a.float-end {
    float: none !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* --- 14. Activiteiten: losse thema's in dezelfde pil-stijl als tags.
   Activiteiten: zelf ingevoerd thema (los <li>, geen link)
   naast de vaste thema-tags (.go_theme-label) — zelfde pil-stijl --- */
dd.go_module-theme-labels ul,
.go_module-theme-labels ul {
  display: flex !important;
  flex-wrap: wrap !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
dd.go_module-theme-labels ul li,
.go_module-theme-labels ul li {
  display: inline-flex !important;
  align-items: center !important;
  background: #EFEFEF !important;
  color: #555 !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 14px !important;
  margin: 4px 6px 4px 0 !important;
  list-style: none !important;
}
dd.go_module-theme-labels ul li a,
.go_module-theme-labels ul li a {
  color: #555 !important;
  text-decoration: none !important;
}


/* --- 14b/14c. "20 jaar"-jubileumbadge: VERWIJDERD ----------------
   Deze functie (kaart automatisch markeren op basis van een
   mede-organisator of een los thema-label zonder link) vereiste
   :has()-selectors, die de Gebiedonline CSS-validator afwijst — dat
   blokkeerde de upload van dit hele bestand. Zonder :has() is dit
   effect (een bovenliggend element stylen op basis van een kenmerk
   van een onderliggend element) niet met CSS te bouwen. Als het
   jubileumjaar toch een visuele badge moet krijgen: gebruik een eigen,
   door de content-editor handmatig toe te kennen CSS-class per blok
   (zoals sa-qr-blok/sa-link-blok in sectie 5), i.p.v. automatische
   herkenning op basis van organisator/thema. */

/* --- 15. ANBI-pagina: geen afronding op de kaartjes, compacte
   documentthumbnails/iconen naast de titel.
   ANBI-strook: eigen afbeeldingen (kaartjes met afgeknipt
   hoekje, PNG met transparante hoek) mogen niet door een algemene
   img/button border-radius-regel afgerond worden ------------------ */
img[src*="ANBI-kaartje"],
img[alt*="Statuten"],
img[alt*="statuten"],
img[alt*="Beleidsplan"],
img[alt*="beleidsplan"],
img[alt*="Jaarverslag"],
img[alt*="jaarverslag"],
.sa-link-blok img,
.go_block.cx_card.sa-link-blok .go_card.go_block-content img {
  border-radius: 0 !important;
}

/* ANBI-documentkaarten: de document-thumbnail (met alt "Document '...'
   groter tonen") mag niet de hele breedte/hoogte van de kaart vullen —
   compact naast de titel weergeven, zoals in een gewoon bericht. --- */
.cx_template-image-wrapper img[alt*="groter tonen"] {
  width: 90px !important;
  height: 120px !important;
  object-fit: cover !important;
  flex: 0 0 90px !important;
}

/* ANBI-documentkaarten: handmatig geplaatste icoontjes (jaarverslag,
   beleidsplan e.d.) mogen niet de hele kaart vullen — compact naast
   de titel, zoals een documentbestand met thumbnail. --------------- */
.cx_widget img[src*="anbi-iconen"],
img[src*="Jaarverslag-icoon"],
img[alt*="jaarverslag"],
img[alt*="Jaarverslag"],
img[alt*="beleidsplan"],
img[alt*="Beleidsplan"] {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
}

/* --- 15c. ANBI-strook: kader met crème kaart (zoals mockup 18a),
   kerngegevens (Naam/KvK/RSIN/Contact) in 2 kolommen naast elkaar
   i.p.v. onder elkaar, alles gecentreerd. --------------------------- */
#go_row-10084 .go_container {
  max-width: 1100px;
  background: #FAF6EC;
  border-radius: 24px;
  padding: 48px 56px;
  text-align: left;
}
#go_row-10084 .go_container h2 {
  text-align: center !important;
}
#go_row-10084 .go_container > p:nth-of-type(1) {
  display: block !important;
  width: 100% !important;
  margin: 0 0 24px !important;
  text-align: center !important;
}
#go_row-10084 .go_container > p:nth-of-type(1) > strong,
#go_row-10084 .go_container > p:nth-of-type(1) > b {
  display: block;
  text-align: center !important;
}
#go_row-10084 .go_container > p:nth-of-type(2),
#go_row-10084 .go_container > p:nth-of-type(3),
#go_row-10084 .go_container > p:nth-of-type(4),
#go_row-10084 .go_container > p:nth-of-type(5) {
  display: inline-block !important;
  width: calc(50% - 20px) !important;
  vertical-align: top !important;
  margin: 0 0 20px !important;
}
#go_row-10084 .go_container > p:nth-of-type(even) {
  margin-right: 20px !important;
}
#go_row-10084 .go_container > p:nth-of-type(2) > strong,
#go_row-10084 .go_container > p:nth-of-type(3) > strong,
#go_row-10084 .go_container > p:nth-of-type(4) > strong,
#go_row-10084 .go_container > p:nth-of-type(5) > strong {
  display: block;
}
#go_row-10084 .go_container > p:nth-of-type(6) {
  border-top: 1px solid #E6DCC2;
  padding-top: 24px;
  margin-top: 4px;
  clear: both;
}

/* --- 15b. ANBI-strook (webpagina "Slow Food Achterhoek", strook "Anbi",
   #go_row-10084): elke gegevensregel staat als eigen alinea met het
   label vetgedrukt aan het begin (bv. "**Naam:** Vereniging ..."). Zet
   het label op een eigen regel, in oker/kleiner/hoofdletters, boven de
   waarde — zodat het niet langer als één ononderbroken lopende tekst
   oogt. Werkt alleen zodra elk label in de tekst als <strong>/<b> aan
   het begin van een <p> staat. --------------------------------------- */
#go_row-10084 .go_container p {
  text-align: left !important;
  margin: 0 0 20px !important;
}
#go_row-10084 .go_container p:has(> strong:first-child),
#go_row-10084 .go_container p:has(> b:first-child) {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#go_row-10084 .go_container p > strong,
#go_row-10084 .go_container p > b {
  color: #8B6E2E !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
#go_row-10084 .go_container h2 {
  text-align: center !important;
}

/* --- 16. Losse webpagina's: minder witruimte tussen secties.
   Webpagina's (bv. "Slow Food Achterhoek"): secties (.go_row)
   stonden verder uit elkaar dan op de homepage — verticale padding en
   standaard kop/alinea-marges verkleind. */
.cx_content-inner .go_row {
  margin: 0 !important;
}
.cx_content-inner .go_container {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.cx_content-inner .go_row-title {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}
.cx_content-inner .go_container > p {
  margin: 0 0 8px !important;
}
.cx_content-inner .go_container > p:last-of-type {
  margin-bottom: 0 !important;
}
/* Brede, hoge-specificiteit vangnet: browser-standaardmarges op h1/h2/p
   binnen deze webpagina-secties resetten, ongeacht welk element van de
   drie hierboven wel/niet matcht */
.cx_content-inner .go_section .go_row h1,
.cx_content-inner .go_section .go_row h2,
.cx_content-inner .go_section .go_row .go_container h1,
.cx_content-inner .go_section .go_row .go_container h2 {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}
.cx_content-inner .go_section .go_row p,
.cx_content-inner .go_section .go_row .go_container p {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}
.cx_content-inner .go_section .go_row {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* --- 17. "Breder scherm"-modus: content niet breder dan het hoofdmenu.
   "Breder scherm"-modus: content mag niet breder worden dan het
   hoofdmenu erboven — kader terugbrengen naar dezelfde breedte/centrering
   als de nav in plaats van edge-to-edge vol te lopen. Achtergrond blijft
   crème doorlopen tot de randen (alleen de inhoud wordt gecentreerd).
   Beperkt tot binnen .cx_content-fw zodat het hoofdmenu (dat ook een
   .container-fluid gebruikt) hier niet door geraakt wordt. */
.cx_content-fw div.container-fluid {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  background-color: #FAF6EC !important;
}
.cx_content.cx_content-fw,
.content.go_content-webpage {
  background-color: #FAF6EC !important;
}

/* --- 15d. "Is alles nog steeds actueel?"-melding (aanbod-detailpagina):
   erft standaard een grijs/bruin lettype dat op de donkergroene
   achtergrond niet leesbaar is — kop en tekst wit maken. ------------- */
.go_notification-wrapper-large.go_content-header h1,
.go_notification-wrapper-large.go_content-header p {
  color: #fff !important;
}

/* --- 15e. Adreskaarten compacter op mobiel. Oorzaken: content-wrapper
   met margin-top: 190px (overlap-truc sectie 6) en een foto die op volle
   breedte hoog wordt. Sectie 6 heeft specificiteit ~7 classes, daarom
   staat de class hieronder negen keer herhaald. Let op: overflow moet
   open, anders klipt de kaart de tekst weg. ------------------------ */
@media (max-width: 991px) {
  .go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: block !important;
    padding: 0 !important;
  }
  .go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service .card-body,
  .go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service .cx_template {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    position: static !important;
    padding: 0 !important;
  }
  .go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service .cx_template-image-wrapper {
    height: 150px !important;
    max-height: 150px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: static !important;
    display: block !important;
  }
  .go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service .cx_template-image-wrapper img {
    width: 100% !important;
    height: 150px !important;
    object-fit: cover !important;
  }
  .go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service .cx_template-content-wrapper {
    margin: 0 !important;
    padding: 12px 16px 16px !important;
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Sectie 6 zet deze tekst wit omdat hij daar over de donkere foto valt.
     Op mobiel staat hij onder de foto op lichtgroen: dus donkergroen. */
  .go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service .cx_template-content-wrapper,
  .go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service .cx_template-content-wrapper h2,
  .go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service .cx_template-content-wrapper h3,
  .go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service .cx_template-content-wrapper p,
  .go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service .cx_template-content-wrapper span,
  .go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service .cx_template-content-wrapper div,
  .go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service .go_card-title-wrapper,
  .go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service .go_card-text-intro,
  .go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service .go_source-name-wrapper,
  .go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service .category-wrapper {
    color: #154D26 !important;
    text-shadow: none !important;
  }
  .go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service .cx_template-content-wrapper::before,
  .go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service.go_card-service .cx_template-content-wrapper::after {
    display: none !important;
  }
  .cx_grid-row-equalHeight > .cx_grid-col,
  .cx_grid-row-equalHeight > .cx_grid-col > .cx_card {
    height: auto !important;
    min-height: 0 !important;
  }
}


/* --- 5f. Hero: nergens ronding, op elk schermformaat. Op tablet bleef
   linksboven een ronding zichtbaar doordat algemene blokregels
   (.go_block.cx_card .go_card.go_block-content, 28px / 22px) specifieker
   waren. Deze regels staan bewust buiten elke media-query en achteraan
   het bestand. ---------------------------------------------------- */
.go_block.cx_card.sa-hero-blok .go_card.go_block-content,
.go_block.cx_card.sa-hero-blok .go_block-content,
.go_block.cx_card.sa-hero-blok .card,
.go_block.cx_card.sa-hero-blok .go_card,
.go_block.cx_card.sa-hero-blok .go_video-wrapper,
.go_block.cx_card.sa-hero-blok .go_video-wrapper::after,
.go_block.cx_card.sa-hero-blok .go_video-wrapper::before,
.go_block.cx_card.sa-hero-blok iframe,
.go_block.cx_card.sa-hero-blok img,
.go_block.cx_card.header .go_card.go_block-content,
.go_block.cx_card.header .go_video-wrapper,
.go_block.cx_card.header .go_video-wrapper::after,
.go_block.cx_card.header iframe,
.go_block.cx_card.hero .go_card.go_block-content,
.go_block.cx_card.hero .go_video-wrapper,
.go_block.cx_card.hero .go_video-wrapper::after,
.go_block.cx_card.hero iframe {
  border-radius: 0 !important;
}


/* --- 18. Webshop-activiteiten (detailpagina).
   Een activiteit die als webshop-item dient, wordt gemarkeerd met de
   VASTE thema-tag "Leegstand" (thema=24) — een thema dat verder nergens
   gebruikt wordt. Dat label staat in de HTML als link met thema-nummer,
   dus daarop kan zonder nesting geselecteerd worden.

   Waarom niet het vrije themaveld ("anders: webshop"): dat verschijnt
   als <li> ZONDER link, en "een li zonder link" vraagt om
   :not(:has(a)) — een :has() binnen een :not(). Safari ondersteunt die
   nesting niet, dus die route werkt niet. CSS kan ook niet op de tekst
   "webshop" selecteren.

   Verder: .go_button matcht ook de beheerknoppen "Verwijder"/"Bewerken",
   dus de aanmeldknop wordt aangewezen via href*="register.vm". En de
   wrapper heet .go_wall-activiteit (NEDERLANDS), niet -activity. ---- */
.go_wall-activiteit:has(.go_module-theme-labels a[href*="thema=24"]) .go_wall-card-category {
  display: none !important;
}

/* het markeringslabel zelf onzichtbaar; andere thema-tags blijven */
.go_wall-activiteit:has(.go_module-theme-labels a[href*="thema=24"]) .go_module-theme-labels a[href*="thema=24"] {
  display: none !important;
}

/* knoptekst "Meld je aan" -> "Bestel": bestaande tekst onzichtbaar
   (font-size 0), nieuwe tekst via ::after — CSS kan tekst niet echt
   vervangen. Alleen de aanmeldknop, niet de beheerknoppen. */
.go_wall-activiteit:has(.go_module-theme-labels a[href*="thema=24"]) a.go_button[href*="register.vm"] {
  font-size: 0 !important;
  line-height: 0 !important;
}
.go_wall-activiteit:has(.go_module-theme-labels a[href*="thema=24"]) a.go_button[href*="register.vm"]::after {
  content: "Bestel";
  font-size: 1.05rem;
  line-height: 1.4;
  font-weight: 700;
  font-family: 'Baloo 2', sans-serif;
}


/* --- 19. Activiteitentegel met volledige 4:3-foto — via de stroknaam.
   Werkt op een strook met de naam "webshop": Gebiedonline maakt van de
   stroknaam automatisch een class (.go_row.webshop) — exact zoals
   getypt, dus hoofdlettergevoelig. Net als bij Anbi en Hero_Film.

   Sectie 6 zet drie waarden die AAN ELKAAR GEKOPPELD zijn — foto 190px,
   tekstblok absoluut op top:190px, kaart 370px — met een selector van
   ~9 class-eenheden (lange :not()-keten). Een gewone class-regel (4
   eenheden) verliest daarvan, ook mét !important. Daarom staat .webshop
   hieronder acht keer herhaald: dat tilt de specificiteit erboven.

   Een vaste fotohoogte werkt hier niet, want de tegelbreedte varieert
   (twee blokken in een strook = ~715px per tegel, homepage ~340px).
   Daarom: fotokader op aspect-ratio 4/3, tekstblok terug in de normale
   flow en alle vaste hoogtes op auto. ------------------------------- */
.go_row.webshop.webshop.webshop.webshop.webshop.webshop.webshop.webshop a.go_card .cx_template-image-wrapper {
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
}
.go_row.webshop.webshop.webshop.webshop.webshop.webshop.webshop.webshop a.go_card .cx_template-image-wrapper img,
.go_row.webshop.webshop.webshop.webshop.webshop.webshop.webshop.webshop a.go_card .cx_template-image-wrapper picture {
  height: 100% !important;
  width: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
}
.go_row.webshop.webshop.webshop.webshop.webshop.webshop.webshop.webshop a.go_card .cx_template-content-wrapper {
  position: static !important;
  top: auto !important;
  margin-top: 0 !important;
  height: auto !important;
  padding: 16px 20px 20px !important;
}
.go_row.webshop.webshop.webshop.webshop.webshop.webshop.webshop.webshop a.go_card,
.go_row.webshop.webshop.webshop.webshop.webshop.webshop.webshop.webshop a.go_card .card-body,
.go_row.webshop.webshop.webshop.webshop.webshop.webshop.webshop.webshop a.go_card .cx_template,
.go_row.webshop.webshop.webshop.webshop.webshop.webshop.webshop.webshop .cx_grid-row-equalHeight > .cx_grid-col {
  height: auto !important;
  min-height: 0 !important;
}

/* In webshop-tegels zijn het type-label ("ACTIVITEIT" + de "2w"-teller)
   en de datum/locatie-regels niet relevant — die horen bij een agenda,
   niet bij een product. Verbergen; titel en foto blijven. */
.go_row.webshop.webshop.webshop.webshop.webshop.webshop.webshop.webshop a.go_card .category-wrapper,
.go_row.webshop.webshop.webshop.webshop.webshop.webshop.webshop.webshop a.go_card .go_card-meta-wrapper {
  display: none !important;
}

/* Webshop-detailpagina: agenda-elementen die bij een product niet horen.
   Datum/tijd in de kop, het (lege) Thema-blok, en de knoppen "Nodig
   mensen uit" en "Bericht toevoegen over deze activiteit". De knoppen
   worden op hun href aangewezen, niet op een class — .go_button raakt
   ook Bewerken/Verwijderen. */
.go_wall-activiteit:has(.go_module-theme-labels a[href*="thema=24"]) .go_wall-card-header .go_card-meta-wrapper,
.go_wall-activiteit:has(.go_module-theme-labels a[href*="thema=24"]) .go_property:has(.go_module-theme-labels),
.go_wall-activiteit:has(.go_module-theme-labels a[href*="thema=24"]) a[href*="inviteParticipant"],
.go_wall-activiteit:has(.go_module-theme-labels a[href*="thema=24"]) a[href*="classmanager:bericht"] {
  display: none !important;
}

/* Label "Kosten toelichting" -> "Prijs per stuk". CSS kan tekst niet
   vervangen: bestaande tekst onzichtbaar (font-size 0) en nieuwe tekst
   via ::after. Het is de EERSTE property in de lijst (de tweede is
   Thema, die hierboven al verborgen wordt) — vandaar :first-of-type.
   Komt er een property bij vóór de prijs, dan moet dit nummer mee. */
.go_wall-activiteit:has(.go_module-theme-labels a[href*="thema=24"]) dl .go_property:first-of-type dt.go_property-label {
  font-size: 0 !important;
  line-height: 0 !important;
}
.go_wall-activiteit:has(.go_module-theme-labels a[href*="thema=24"]) dl .go_property:first-of-type dt.go_property-label::after {
  content: "Prijs per stuk";
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 700;
  font-family: 'Baloo 2', sans-serif;
}

/* Label "Maximum aantal deelnemers:" -> "Voorraad:". Staat als los <b>
   in .go_wall-card-module-wrapper (geen eigen class), dus aangewezen als
   het enige vetgedrukte label in die wrapper. Zelfde truc als bij
   "Bestel": origineel op font-size 0, nieuwe tekst via ::after. */
.go_wall-activiteit:has(.go_module-theme-labels a[href*="thema=24"]) .go_wall-card-module-wrapper > b,
.go_wall-activiteit:has(.go_module-theme-labels a[href*="thema=24"]) .go_wall-card-module-wrapper b:first-child {
  font-size: 0 !important;
  line-height: 0 !important;
}
.go_wall-activiteit:has(.go_module-theme-labels a[href*="thema=24"]) .go_wall-card-module-wrapper > b::after,
.go_wall-activiteit:has(.go_module-theme-labels a[href*="thema=24"]) .go_wall-card-module-wrapper b:first-child::after {
  content: "Voorraad:";
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 700;
  font-family: 'Baloo 2', sans-serif;
}

/* Aanmeldformulier (register.vm) als bestelformulier. De kop is
   "Leuk dat je wilt deelnemen aan <i>Productnaam</i>" en heeft geen
   eigen class; hij wordt aangewezen via de contentwrapper + :has(i).
   Truc: de h1 zelf op font-size 0 (dat verbergt alleen de losse
   tekst), nieuwe aanhef via ::before, en de cursieve titel krijgt zijn
   eigen font-size terug — zo blijft de productnaam staan. */
.cx_content-md:has(form input[name="bestelling"]) > .cx_content-inner > h1:has(i) {
  font-size: 0 !important;
  line-height: 0 !important;
}
.cx_content-md:has(form input[name="bestelling"]) > .cx_content-inner > h1:has(i)::before {
  content: "Je bestelling: ";
  font-size: 2.1rem;
  line-height: 1.25;
  font-weight: 700;
  font-family: 'Baloo 2', sans-serif;
}
.cx_content-md:has(form input[name="bestelling"]) > .cx_content-inner > h1:has(i) i {
  font-size: 2.1rem;
  line-height: 1.25;
  font-style: normal;
}

/* Marker voor "dit is een bestelformulier": een vraag met het label
   "bestelling" (veldnaam `bestelling`), die speciaal hiervoor in het
   formulier staat en door de regel hieronder onzichtbaar wordt gemaakt.
   Het veld blijft in de HTML aanwezig, dus de marker blijft werken.

   Eerdere pogingen waren niet houdbaar: form-id verschuift steeds
   (20/21 -> 28/29 -> 37), en veldnamen als hoeveelheid(_1/_10) of
   Straat_en_huisnummer veranderen zodra het formulier wordt aangepast.
   Deze vraag heeft geen ander doel dan markeren, dus die naam blijft.

   Bestelformulier: de optie "Mijn naam mag getoond worden als deelnemer"
   hoort bij een activiteit met deelnemerslijst, niet bij een bestelling.
   Het veld heeft een eigen widget-id, dus dit raakt alleen deze vraag. */
.cx_content-md:has(form input[name="bestelling"]) #cx_marker_value_Visible,
.cx_content-md:has(form input[name="bestelling"]) #cx_marker_line_cx_marker_value_Visible {
  display: none !important;
}

/* De markeringsvraag zelf onzichtbaar (blijft in de HTML staan). */
.cx_content-md:has(form input[name="bestelling"]) #cx_marker_value_bestelling,
.cx_content-md:has(form input[name="bestelling"]) #cx_marker_line_cx_marker_value_bestelling {
  display: none !important;
}