/* ==========================================================================
   Gutenberg blokken

   GEDEELD BESTAND — dit hoort op alle Groundsailer-branches identiek te zijn.
   Zet hier dus geen kleuren, breedtes, URL's of ID's neer die per site verschillen;
   die horen in de block_tokens van site-config.php.

   Alle waardes komen uit --gs-* custom properties. Die worden vanuit PHP inline
   meegegeven (zie gs_theme_block_tokens_css in functions.php), zowel op de voorkant
   als in de editor.

   Indeling:
     1. Canvas & uitlijning
     2. Gedeeld
     3. Blok: Paginakop
     4. Blok: Sub CTA
     5. Blok: FAQ
     6. Blok: Manufacturer grid
     7. Blok: Categorie-browser
     8. Blok: Sectie
     9. Blok: Tekst met afbeelding
    10. EG-categoriepagina
    11. Blok: Manufacturers Directory
    12. Blok: Zone browser en Market browser
    13. Blok: Latest posts
    14. Blok: Task navigation
    15. Blok: Video browser
    16. Hub-pagina's (zone, markt, News)
    17. Leverancierspagina (manufacturer profile)
   ========================================================================== */

/* 1. Canvas & uitlijning
   ========================================================================== */

/* Het blokken-template zet geen container om de inhoud, zodat blokken zelf bepalen
   hoe breed ze zijn. */
.gs-blocks-page .gs-blocks-canvas {
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* vangt sub-pixel overflow van alignfull op */
}

/* Ruimte onderaan zit op het laatste blok, niet als padding op het canvas. Zo kan
   een sectie zich afmelden: een full-bleed band met eigen achtergrond hoort tegen
   de footer aan te sluiten, zonder witte strook ertussen. */
.gs-blocks-page .gs-blocks-canvas > :last-child {
  margin-bottom: 41px;
}

.gs-blocks-page .gs-blocks-canvas > .gs-flush-bottom:last-child {
  margin-bottom: 0;
}

/* Verticaal ritme tussen blokken. Met `* + *` krijgt alleen de ruimte tússen
   blokken een marge — het eerste blok blijft dus tegen de header staan en er komt
   geen dubbele ruimte onderaan. Elk nieuw blok krijgt dit automatisch, dus blokken
   hoeven zelf geen top- of bottom-marge te zetten. */
/* Op .gs-blocks-page genest, dus (0,2,0). Nodig omdat plugins die hun eigen
   elementen tussen de blokken zetten vaak `margin: 0` op een enkele class zetten —
   AdRotate doet dat met `.g { margin:0 }` en `.g-71 { margin:0 auto }`, beide
   (0,1,0). Bij gelijke specificiteit wint hun inline CSS op bronvolgorde, en dan
   valt de ruimte rond de banner weg. */
.gs-blocks-page .gs-blocks-canvas > * + * {
  margin-top: 56px;
}

/* In de blok-editor bestaat .gs-blocks-canvas niet: daar zit elk blok in een eigen
   .wp-block-wrapper. Zonder deze regel plakken de blokken in de editor tegen elkaar,
   ook al klopt het aan de voorkant. Dit bestand wordt via add_editor_style geladen,
   waardoor WordPress de selector met .editor-styles-wrapper prefixt — op de voorkant
   raakt deze regel dus niets. */
.wp-block + .wp-block {
  margin-top: 56px;
}

.wp-block:last-child {
  margin-bottom: 56px;
}

/* Standaardbreedte: gecentreerde kolom met ruimte aan de zijkanten.

   Elk blok lijnt uit op dezelfde zichtbare inhoudsbreedte: --gs-container (1200px).

   Omdat box-sizing border-box is, telt de horizontale padding mee in max-width.
   Zonder de opgetelde 48px (2 x 24px) zou de inhoud 1152px worden, terwijl de
   full-bleed paginakop zijn inner wél op 1200px zet — dat gaf een zichtbaar
   verschil in uitlijning. De 24px gutter is gelijk aan die van de paginakop. */
.gs-blocks-canvas > * {
  max-width: calc(var(--gs-container) + 48px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Ook hier de gutter meetellen, zodat 'breed' echt 240px breder is dan standaard. */
.gs-blocks-canvas > .alignwide {
  max-width: calc(var(--gs-container) + 240px + 48px);
}

/* Bewust geen 100vw: dat telt de scrollbar mee en veroorzaakt horizontale scroll. */
.gs-blocks-canvas > .alignfull {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Haak om theme-chrome te verbergen op blokpagina's, site-onafhankelijk: geef het
   betreffende element in Elementor de class gs-hide-on-blocks. Werkt op alle vijf
   de sites zonder per-site element-ID's.

   !important omdat Elementor zijn containers styling geeft via
   `.elementor-{template} .elementor-element.elementor-element-{id}` — (0,3,0). */
body.gs-blocks-page .gs-hide-on-blocks {
  display: none !important;
}

/* Op smalle schermen overal dezelfde 20px lucht langs de randen, zodat blokken
   niet tegen de schermrand plakken. */
@media (max-width: 767px) {
  .gs-blocks-canvas > * {
    padding-left: 20px;
    padding-right: 20px;
  }

  .gs-blocks-canvas > .alignfull {
    padding-left: 0;
    padding-right: 0;
  }

  .gs-blocks-page .gs-blocks-canvas > * + * {
    margin-top: 40px;
  }

  .gs-blocks-page .gs-blocks-canvas > :last-child {
    margin-bottom: 56px;
  }

  .gs-blocks-page .gs-blocks-canvas > .gs-flush-bottom:last-child {
    margin-bottom: 0;
  }
}

/* 2. Gedeeld
   ========================================================================== */

.gs-block {
  color: var(--gs-color-text);
}

.gs-block > * {
  box-sizing: border-box;
}

/* Knop uit het design system (.gs-button): staat in css/buttons.css, samen met
   de andere knopsoorten op de site, zodat alle knoppen één standaard volgen. */

/* Sectiekop. Gedeeld: het ontwerp gebruikt dezelfde kop boven meerdere secties.

   Op .gs-block genest omdat de Elementor Kit `.elementor-kit-143664 h2` (0,1,1)
   zet; .gs-block .gs-section-title is (0,2,0) en wint. Elke blok-root draagt
   .gs-block, dus dit werkt in ieder blok. */
.gs-block .gs-section-title {
  margin: 0 0 20px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  text-transform: uppercase;
  color: #666;
}

/* Eyebrow boven de sectiekop (gs_block_section_title met derde argument).
   Bewust het tegenovergestelde van de titel eronder: gewone tekstletter in
   zinsletters in plaats van Condensed-hoofdletters, zodat er niet twee regels
   hoofdletters boven elkaar staan. */
.gs-block .gs-section-head {
  margin: 0 0 20px;
}

.gs-block .gs-section-head .gs-section-title {
  margin: 0;
}

.gs-block .gs-section-eyebrow {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gs-color-primary);
}

/* Kruimelpad in de paginakop van een vast template (gs_block_breadcrumbs).
   Staat op de gekleurde paginakop, dus lichte tekst; de scheidingstekens komen
   hier uit CSS zodat de markup een schone lijst blijft. */
.gs-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gs-color-bg);
}

.gs-breadcrumbs li + li::before {
  content: "\203A";
  padding: 0 8px;
  opacity: 0.6;
}

.gs-block .gs-breadcrumbs a {
  color: inherit;
  text-decoration: none;
  opacity: 0.8;
}

.gs-block .gs-breadcrumbs a:hover,
.gs-block .gs-breadcrumbs a:focus {
  opacity: 1;
  text-decoration: underline;
}

/* Artikelkaart (gs_block_post_card). Gedeeld door de hub-pagina's en de blokken
   Latest posts en Video browser. Beeld en titel volgen de videokaarten op de
   EG-categoriepagina (sectie 10): 4:3, dunne rand, Condensed-titel in de
   hoofdkleur die bij hover naar de accentkleur gaat. */
.gs-post-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gs-post-card__image {
  position: relative;
  display: block;
  margin-bottom: 12px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--gs-color-line);
  border-radius: 4px;
  background-color: var(--gs-color-bg-alt);
}

.gs-post-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.gs-post-card__image:hover img {
  transform: scale(1.03);
}

.gs-post-card__noimage {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--gs-color-bg-alt);
}

.gs-post-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--gs-color-primary);
  color: var(--gs-color-bg);
}

.gs-post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gs-color-text);
}

.gs-block .gs-post-card__label {
  font-weight: 600;
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-block a.gs-post-card__label:hover,
.gs-block a.gs-post-card__label:focus {
  color: var(--gs-color-accent);
}

/* Op .gs-block genest om de h3 van de Elementor Kit (0,1,1) te winnen. */
.gs-block .gs-post-card__title {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
}

.gs-block .gs-post-card__title a {
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-block .gs-post-card__title a:hover,
.gs-block .gs-post-card__title a:focus {
  color: var(--gs-color-accent);
}

.gs-post-card__excerpt {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .gs-post-card__image img {
    transition: none;
  }
}

/* Nieuwsbriefedities (gs_block_editions): titel met de datum eronder, gescheiden
   door een dunne lijn. In de browserpanelen en in de Focus-band van de hub-pagina's;
   op een donkere band zet de context de kleuren om (sectie 16). */
.gs-editions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gs-editions__item + .gs-editions__item {
  border-top: 1px solid var(--gs-color-line);
}

.gs-block a.gs-editions__link {
  display: block;
  padding: 10px 0;
  text-decoration: none;
}

.gs-editions__title {
  display: block;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: var(--gs-color-primary);
}

.gs-block a.gs-editions__link:hover .gs-editions__title,
.gs-block a.gs-editions__link:focus .gs-editions__title {
  color: var(--gs-color-accent);
}

.gs-editions__date {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--gs-color-text);
}

/* Compacte paginering (gs_block_pagination). Zelfde vorm als de pills. */
.gs-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 32px;
}

.gs-block .gs-pagination a,
.gs-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--gs-color-line);
  border-radius: 6px;
  background-color: var(--gs-color-bg);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-block .gs-pagination a:hover,
.gs-block .gs-pagination a:focus {
  border-color: var(--gs-color-primary);
}

.gs-pagination span[aria-current] {
  border-color: var(--gs-color-primary);
  background-color: var(--gs-color-primary);
  color: var(--gs-color-bg);
}

.gs-pagination .gs-pagination__gap {
  min-width: 0;
  padding: 0 4px;
  border: 0;
  background: none;
}

/* Placeholder voor lege blokken. Wordt alleen in de editor gerenderd. */
.gs-block-placeholder {
  padding: var(--gs-space-md);
  border: 1px dashed var(--gs-color-line);
  border-radius: var(--gs-radius);
  background: var(--gs-color-bg-alt);
  color: var(--gs-color-text);
  font-size: 14px;
  text-align: center;
}

/* 3. Blok: Paginakop
   --------------------------------------------------------------------------
   Waarden komen uit het ontwerp. Alleen de twee merkkleuren zijn variabel;
   grijstinten, spacing, radius en typografie zijn op elke site gelijk en staan
   daarom hard.
   ========================================================================== */

/* Full-bleed: het canvas is zelf al schermbreed, dus alleen de breedtebegrenzing
   van .gs-blocks-canvas > * hier opheffen. Bewust geen 100vw met negatieve marges —
   dat telt de scrollbar mee en veroorzaakt horizontaal scrollen.

   Hier NIET de horizontale padding op 0 zetten: deze selector is specifieker (0,2,0)
   dan de blokregel hieronder (0,1,0) en zou die padding dus wegdrukken, waardoor de
   tekst tegen de schermrand komt te staan. De padding hoort bij het blok zelf. */
.gs-blocks-canvas > .gs-block-page-hero {
  max-width: none;
}

/* Geen eigen margin-bottom: de ruimte tussen blokken komt uit het gedeelde
   verticale ritme in sectie 1. */
.gs-block-page-hero {
  background-color: var(--gs-color-primary);
  padding: 56px 24px;
}

.gs-block-page-hero__inner {
  max-width: var(--gs-container);
  margin: 0 auto;
}

/* De Elementor Kit zet `.elementor-kit-143664 h1 { font-size:35px; color:#000 }` —
   specificiteit (0,1,1). Eén enkele class (0,1,0) verliest daarvan, dus alle
   tekstregels hieronder staan bewust op blok-class + element of blok-class + class.
   Niet met !important: dit wint netjes op specificiteit. */

.gs-block-page-hero .gs-block-page-hero__toptitle {
  margin: 0 0 12px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gs-color-accent);
}

.gs-block-page-hero h1.gs-block-page-hero__title {
  margin: 0 0 20px;
  max-width: 780px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 52px;
  line-height: 1;
  color: #fff;
}

/* Elke kop in de hero wit, niet alleen de h1. Het introveld is WYSIWYG, dus een
   redacteur kan er ook een h2 of h3 in zetten; die zou anders de donkere kleur van
   de Elementor Kit krijgen en onleesbaar worden op de navy band.

   Op .gs-block.gs-block-page-hero genest zodat het (0,2,1) is: de Kit zet
   `.elementor-kit-143664 h2` op (0,1,1), en bij gelijke specificiteit zou zijn
   inline CSS winnen. */
.gs-block.gs-block-page-hero h1,
.gs-block.gs-block-page-hero h2,
.gs-block.gs-block-page-hero h3,
.gs-block.gs-block-page-hero h4,
.gs-block.gs-block-page-hero h5,
.gs-block.gs-block-page-hero h6 {
  color: #fff;
}

/* Het introveld is WYSIWYG en levert eigen <p>-tags, vandaar ook de p-regel. */
.gs-block-page-hero .gs-block-page-hero__intro,
.gs-block-page-hero .gs-block-page-hero__intro p {
  max-width: 780px;
  font-family: "Barlow", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.gs-block-page-hero .gs-block-page-hero__intro > *:first-child {
  margin-top: 0;
}

.gs-block-page-hero .gs-block-page-hero__intro > *:last-child {
  margin-bottom: 0;
}

.gs-block-page-hero .gs-block-page-hero__intro a {
  color: #fff;
  text-decoration: underline;
}

/* Ondertitel in het introveld. Sommige pagina's zetten boven de lopende tekst nog
   een tweede kop — de Manufacturers Directory bijvoorbeeld. Die hoort kleiner te
   zijn dan de h1 maar groter dan de tekst; zonder deze regel erft hij de h2-maat
   van de Elementor Kit en wordt hij bijna even groot als de titel. */
.gs-block-page-hero .gs-block-page-hero__intro h2 {
  margin: 0 0 16px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
}

/* Voetnoot onder de intro: kleiner en cursief, zoals in het ontwerp. Geef de
   betreffende alinea in de editor de class gs-block-page-hero__note. */
.gs-block-page-hero .gs-block-page-hero__intro p.gs-block-page-hero__note {
  margin-bottom: 0;
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

/* 52px is te groot voor smalle schermen; het ontwerp geeft hier geen waarde voor. */
@media (max-width: 767px) {
  .gs-block-page-hero {
    padding: 40px 20px;
  }

  .gs-block-page-hero h1.gs-block-page-hero__title {
    font-size: 34px;
  }

  .gs-block-page-hero .gs-block-page-hero__intro,
  .gs-block-page-hero .gs-block-page-hero__intro p {
    font-size: 16px;
  }
}

/* 4. Blok: Sub CTA
   --------------------------------------------------------------------------
   Twee stijlen, gestuurd door het ACF-veld `style`:
     default   accentkleurige balk, tekst links en knop rechts
     centered  lichtgrijs vlak, alles gecentreerd
   De basisregels beschrijven `default`; --centered overschrijft wat afwijkt.
   ========================================================================== */

/* De buitenste laag draagt alleen de paginamarge van het canvas; de achtergrond en
   de eigen padding zitten op __band. Zet die padding hier NIET op het blok zelf:
   dat overschrijft de canvas-padding en dan plakt de balk tegen de schermrand. */
.gs-block-sub-cta__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding: 36px 40px;
  border-radius: 4px;
  background-color: var(--gs-color-accent);
}

.gs-block-sub-cta .gs-block-sub-cta__title {
  margin: 0 0 8px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  color: #fff;
}

.gs-block-sub-cta .gs-block-sub-cta__text,
.gs-block-sub-cta .gs-block-sub-cta__text p {
  margin: 0;
  font-family: "Barlow", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

.gs-block-sub-cta .gs-block-sub-cta__text > *:last-child {
  margin-bottom: 0;
}

.gs-block-sub-cta .gs-block-sub-cta__text a {
  color: #fff;
  text-decoration: underline;
}

/* --- Stijl: centered ------------------------------------------------------ */

.gs-block-sub-cta--centered .gs-block-sub-cta__band {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
  background-color: #f5f5f5;
}

.gs-block-sub-cta--centered .gs-block-sub-cta__title {
  color: var(--gs-color-primary);
}

.gs-block-sub-cta--centered .gs-block-sub-cta__text,
.gs-block-sub-cta--centered .gs-block-sub-cta__text p {
  color: #333;
}

.gs-block-sub-cta--centered .gs-block-sub-cta__text a {
  color: var(--gs-color-primary);
}

@media (max-width: 767px) {
  .gs-block-sub-cta__band {
    padding: 28px 24px;
    gap: 20px;
  }

  .gs-block-sub-cta .gs-block-sub-cta__title {
    font-size: 24px;
  }

  /* Op smal scherm staat alles toch al onder elkaar; alleen uitlijnen verschilt. */
  .gs-block-sub-cta--centered .gs-block-sub-cta__band {
    padding: 28px 24px;
    gap: 16px;
  }
}

/* 5. Blok: FAQ
   --------------------------------------------------------------------------
   Werkt op <details>/<summary>, dus zonder JavaScript. Alle items delen een
   name-attribuut waardoor de browser er een accordeon van maakt.
   ========================================================================== */

.gs-block-faq__item {
  border-bottom: 1px solid #dedede;
  padding: 20px 0;
}

.gs-block-faq__item:first-child {
  border-top: 1px solid #dedede;
}

.gs-block-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}

/* Het standaard driehoekje van <summary> weg in alle browsers. */
.gs-block-faq__question::-webkit-details-marker {
  display: none;
}

.gs-block-faq__question::marker {
  content: "";
}

.gs-block-faq .gs-block-faq__question-text {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: #000;
}

.gs-block-faq__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--gs-color-primary);
  border-radius: 50%;
  color: var(--gs-color-primary);
  transition: all 0.2s ease-in-out;
}

.gs-block-faq__icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--gs-color-primary);
  stroke-width: 3.2;
  transition: all 0.2s ease-in-out;
}

/* Open: plusje wordt een kruisje op een gevulde cirkel. */
.gs-block-faq__item[open] .gs-block-faq__icon {
  background-color: var(--gs-color-primary);
}

.gs-block-faq__item[open] .gs-block-faq__icon svg {
  stroke: #fff;
  transform: rotate(45deg);
}

.gs-block-faq .gs-block-faq__answer,
.gs-block-faq .gs-block-faq__answer p {
  margin: 0;
  max-width: 640px;
  font-family: "Barlow", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

.gs-block-faq .gs-block-faq__answer {
  margin-top: 12px;
}

.gs-block-faq .gs-block-faq__answer p + p {
  margin-top: 12px;
}

.gs-block-faq .gs-block-faq__answer a {
  color: var(--gs-color-primary);
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .gs-block-faq__icon,
  .gs-block-faq__icon svg {
    transition: none;
  }
}

/* 6. Blok: Logoraster
   --------------------------------------------------------------------------
   Vaste kolomtrap 8 -> 6 -> 4 -> 3; bewust niet instelbaar. Logo's hebben geen
   vaste verhouding (208x36 tot 208x208), vandaar een 4:3 tegel met object-fit.
   ========================================================================== */

.gs-block-logo-grid__list {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
}

.gs-block-logo-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #dedede;
  border-radius: 4px;
  text-decoration: none;
  transition: border-color 0.2s ease-in-out;
}

.gs-block-logo-grid__item:hover,
.gs-block-logo-grid__item:focus-visible {
  border-color: var(--gs-color-primary);
}

.gs-block-logo-grid__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Terugval als een leverancier geen logo heeft. */
.gs-block-logo-grid .gs-block-logo-grid__fallback {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: #666;
}

@media (max-width: 1199px) {
  .gs-block-logo-grid__list {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 991px) {
  .gs-block-logo-grid__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {
  .gs-block-logo-grid__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-block-logo-grid__item {
    transition: none;
  }
}

/* 7. Blok: Categorie-browser
   --------------------------------------------------------------------------
   Alle panelen staan in de HTML en zijn verborgen met het hidden-attribuut; het
   script wisselt alleen die vlag om.

   Let op de pills: dat zijn <button>-elementen, en de Elementor Kit zet
   `.elementor-kit-143664 button` (0,1,1) op oranje met witte tekst, 20px en
   uppercase. Vandaar overal button + twee classes (0,2,1) of meer.
   ========================================================================== */

.gs-block-category-browser [hidden] {
  display: none;
}

/* --- Pills ---------------------------------------------------------------- */

/* Krap onder de pills: de tabs en het vlak eronder horen één onderdeel te zijn.
   Met 44px ertussen leest het als twee losse secties.

   De productfilter op de EG-categoriepagina deelt deze pills bewust: dezelfde
   vorm als op de hoofdpagina, dus alle regels staan hier samen. */
.gs-block-category-browser__pills,
.gs-eg-products__pills,
.gs-hub-browser__pills,
.gs-block-video-browser__pills,
.gs-hub-switcher__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

/* Op smalle schermen één horizontaal scrollbare rij in plaats van een hoge kolom
   pills (14 zones stonden onder elkaar voordat het paneel begon). De rij loopt
   door tot de schermrand: de negatieve marge heft de 20px gutter van het canvas op,
   de padding zet de eerste pill weer op de uitlijning. Een half zichtbare pill aan
   de rechterkant laat zien dat er meer is. */
@media (max-width: 767px) {
  .gs-block-category-browser__pills,
  .gs-eg-products__pills,
  .gs-hub-browser__pills,
  .gs-block-video-browser__pills,
  .gs-hub-switcher__pills {
    flex-wrap: nowrap;
    margin-right: -20px;
    margin-left: -20px;
    padding: 0 20px 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .gs-block-category-browser__pills::-webkit-scrollbar,
  .gs-eg-products__pills::-webkit-scrollbar,
  .gs-hub-browser__pills::-webkit-scrollbar,
  .gs-block-video-browser__pills::-webkit-scrollbar,
  .gs-hub-switcher__pills::-webkit-scrollbar {
    display: none;
  }

  .gs-block-category-browser__pills > *,
  .gs-eg-products__pills > *,
  .gs-hub-browser__pills > *,
  .gs-block-video-browser__pills > *,
  .gs-hub-switcher__pills > * {
    flex: none;
  }

  /* De videofilters staan in een kader met eigen padding (16px op mobiel). */
  .gs-block-video-browser__filters .gs-block-video-browser__pills {
    margin-right: -16px;
    margin-left: -16px;
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* Ook gedeeld door de Zone- en Market browser (buttons) en de filters van de
   Video browser (links; die hebben de Kit-regel `.elementor-kit-143664 a` (0,1,1)
   tegen, vandaar a + twee classes). */
.gs-block-category-browser button.gs-block-category-browser__pill,
.gs-eg-products button.gs-eg-products__item,
.gs-hub-browser button.gs-hub-browser__pill,
.gs-block-video-browser a.gs-block-video-browser__pill,
.gs-hub-switcher a.gs-hub-switcher__pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 11px 18px;
  border: 1px solid #dedede;
  border-radius: 6px;
  background-color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  text-transform: none;
  color: var(--gs-color-primary);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* :focus en :active moeten hier expliciet bij, en de radius in elke staat opnieuw.
   De Elementor Kit zet `.elementor-kit-143664 button:hover, ...:focus` (0,2,1) op
   een donkere achtergrond mét `border-radius: 0px`. Die focus blijft na een klik
   staan, dus zonder deze regels verliest een gekozen pill zijn ronding. Zelfde
   patroon als bij de producttabs op de categoriepagina. */
.gs-block-category-browser button.gs-block-category-browser__pill:hover,
.gs-block-category-browser button.gs-block-category-browser__pill:focus,
.gs-block-category-browser button.gs-block-category-browser__pill:active,
.gs-eg-products button.gs-eg-products__item:hover,
.gs-eg-products button.gs-eg-products__item:focus,
.gs-eg-products button.gs-eg-products__item:active,
.gs-hub-browser button.gs-hub-browser__pill:hover,
.gs-hub-browser button.gs-hub-browser__pill:focus,
.gs-hub-browser button.gs-hub-browser__pill:active,
.gs-block-video-browser a.gs-block-video-browser__pill:hover,
.gs-block-video-browser a.gs-block-video-browser__pill:focus,
.gs-hub-switcher a.gs-hub-switcher__pill:hover,
.gs-hub-switcher a.gs-hub-switcher__pill:focus {
  border: 1px solid var(--gs-color-primary);
  border-radius: 6px;
  outline: none;
  background-color: #fff;
  color: var(--gs-color-primary);
}

.gs-block-category-browser button.gs-block-category-browser__pill.is-active,
.gs-block-category-browser button.gs-block-category-browser__pill.is-active:hover,
.gs-block-category-browser button.gs-block-category-browser__pill.is-active:focus,
.gs-block-category-browser button.gs-block-category-browser__pill.is-active:active,
.gs-eg-products button.gs-eg-products__item.is-active,
.gs-eg-products button.gs-eg-products__item.is-active:hover,
.gs-eg-products button.gs-eg-products__item.is-active:focus,
.gs-eg-products button.gs-eg-products__item.is-active:active,
.gs-hub-browser button.gs-hub-browser__pill.is-active,
.gs-hub-browser button.gs-hub-browser__pill.is-active:hover,
.gs-hub-browser button.gs-hub-browser__pill.is-active:focus,
.gs-hub-browser button.gs-hub-browser__pill.is-active:active,
.gs-block-video-browser a.gs-block-video-browser__pill.is-active,
.gs-block-video-browser a.gs-block-video-browser__pill.is-active:hover,
.gs-block-video-browser a.gs-block-video-browser__pill.is-active:focus,
.gs-hub-switcher a.gs-hub-switcher__pill.is-active,
.gs-hub-switcher a.gs-hub-switcher__pill.is-active:hover,
.gs-hub-switcher a.gs-hub-switcher__pill.is-active:focus {
  border: 1px solid var(--gs-color-primary);
  border-radius: 6px;
  outline: none;
  background-color: var(--gs-color-primary);
  color: #fff;
}

/* --- Paneel --------------------------------------------------------------- */

/* Begintoestand en categoriepaneel krijgen bewust hetzelfde kader: het is één
   onderdeel dat van inhoud wisselt, geen twee losse secties onder elkaar.
   Het kader onder de productpills op de EG-categoriepagina deelt deze stijl. */
.gs-block-category-browser__default,
.gs-block-category-browser__panel,
.gs-eg-products .gs-eg-products__frame,
.gs-hub-browser__panel {
  overflow: hidden;
  border: 1px solid #dedede;
  border-top: 4px solid var(--gs-color-accent);
  border-radius: 4px;
  background-color: #f5f5f5;
}

.gs-block-category-browser__intro {
  padding: 36px 40px 32px;
}

.gs-block-category-browser__tag {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid #000;
  border-radius: 2px;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 14px;
  white-space: nowrap;
  color: #000;
}

.gs-block-category-browser h3.gs-block-category-browser__title,
.gs-eg-products h3.gs-eg-products__title {
  margin: 14px 0 16px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.2;
  color: var(--gs-color-primary);
}

.gs-block-category-browser .gs-block-category-browser__description,
.gs-block-category-browser .gs-block-category-browser__description p {
  max-width: 760px;
  font-family: "Barlow", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

.gs-block-category-browser .gs-block-category-browser__description {
  margin: 0 0 24px;
}

.gs-block-category-browser .gs-block-category-browser__description p {
  margin: 0 0 12px;
}

.gs-block-category-browser .gs-block-category-browser__description p:last-child {
  margin-bottom: 0;
}

/* --- Producten ------------------------------------------------------------ */

.gs-block-category-browser__products {
  padding: 32px 40px 40px;
  border-top: 1px solid #dedede;
}

.gs-block-category-browser .gs-block-category-browser__products-label {
  margin: 0 0 16px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #666;
}

.gs-block-category-browser__product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.gs-block-category-browser__product {
  display: block;
  padding: 20px;
  border: 1px solid #dedede;
  border-radius: 4px;
  background-color: #fff;
  text-decoration: none;
  transition: border-color 0.2s ease-in-out;
}

.gs-block-category-browser__product:hover,
.gs-block-category-browser__product:focus-visible {
  border-color: var(--gs-color-primary);
}

.gs-block-category-browser .gs-block-category-browser__product-name {
  display: block;
  margin-bottom: 14px;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: #000;
}

.gs-block-category-browser .gs-block-category-browser__product-link {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--gs-color-accent);
  text-decoration: underline;
}

.gs-block-category-browser__more {
  margin-top: 24px;
}

/* --- Banner van de gekozen categorie -------------------------------------- */

/* Eigen band tussen de producten en de fabrikanten, met dezelfde maatvoering en
   scheidingslijn als de andere banden in het paneel. */
.gs-block-category-browser__banner {
  padding: 32px 40px 40px;
}

/* AdRotate schrijft de maten van een groep alleen in de <head>, en alleen voor de
   groepen die hij daar al kent. Deze banner wisselt per categorie en komt via de
   REST-route binnen, dus die krijgt nooit CSS mee — zie ook .gs-eg-banner. */
.gs-block-category-browser__banner .g {
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
}

.gs-block-category-browser__banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* Ruimte vasthouden zolang de banner onderweg is, zodat de tekst eronder niet
   wegspringt op het moment dat hij binnenkomt. De verhouding is die van een
   leaderboard (970 x 112), dus dit klopt op elke schermbreedte. Het slot wordt
   alleen gerenderd voor categorieën die daadwerkelijk een groep hebben. */
.gs-block-category-browser__panel[data-state="loading"] .gs-block-category-browser__banner::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
  aspect-ratio: 970 / 112;
}

/* --- Fabrikanten ---------------------------------------------------------- */

.gs-block-category-browser__mfg,
.gs-block-category-browser__other,
.gs-block-category-browser .gs-block-category-browser__loading {
  padding: 32px 40px 40px;
}

/* Alleen binnen een categoriepaneel een scheidingslijn: in de begintoestand staat
   het raster bovenaan het kader en zou een lijn er los bij hangen. */
.gs-block-category-browser__panel .gs-block-category-browser__banner,
.gs-block-category-browser__panel .gs-block-category-browser__mfg,
.gs-block-category-browser__panel .gs-block-category-browser__other,
.gs-block-category-browser__panel .gs-block-category-browser__loading {
  border-top: 1px solid #dedede;
}

.gs-block-category-browser .gs-block-category-browser__mfg-empty,
.gs-block-category-browser .gs-block-category-browser__loading {
  margin: 0;
  font-family: "Barlow", sans-serif;
  font-size: 16px;
  color: #666;
}

/* Knop naar de categoriepagina, waar de lijst per product verder filtert. Zelfde
   afstand als onder het productraster. */
.gs-block-category-browser__other-more {
  margin-top: 24px;
}

/* De tegels zelf zijn gedeeld met de categoriepagina, maar het raster niet: daar
   staan ze in een smalle kolom naast de productenlijst en zijn drie kolommen goed.
   Hier vult het raster de volle breedte, en dan worden dezelfde tegels enorm.
   Vandaar de dichtheid van het oorspronkelijke logoraster: 8 kolommen, met dezelfde
   afbouw naar 6, 4 en 3. Genest op het blok, dus (0,2,0) — dat wint ook van de
   media query verderop die .gs-eg-mfg-grid op twee kolommen zet. */
.gs-block-category-browser .gs-eg-mfg-grid {
  grid-template-columns: repeat(8, 1fr);
}

/* Bij deze tegelbreedte (circa 120px) is er geen ruimte voor het introductiepaneel
   dat op de categoriepagina uit de tegel omhoog schuift: zes regels van 13px passen
   daar simpelweg niet in. Hier dus alleen het logo, precies zoals het oorspronkelijke
   raster op deze pagina. De hover blijft de randkleur. */
.gs-block-category-browser .gs-eg-mfg__intro {
  display: none;
}

/* Zichtbaar maken dat er iets gebeurt: zonder dit lijkt een trage aanroep op een
   pagina die niets doet, en dan klikt iemand nog een keer. */
.gs-block-category-browser .gs-block-category-browser__loading {
  animation: gs-cb-pulse 1.2s ease-in-out infinite;
}

@keyframes gs-cb-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-block-category-browser .gs-block-category-browser__loading {
    animation: none;
  }
}

@media (max-width: 1199px) {
  .gs-block-category-browser .gs-eg-mfg-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 991px) {
  .gs-block-category-browser .gs-eg-mfg-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {
  .gs-block-category-browser .gs-eg-mfg-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

@media (max-width: 991px) {
  .gs-block-category-browser__product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .gs-block-category-browser__pills,
  .gs-eg-products__pills {
    margin-bottom: 12px;
  }

  .gs-block-category-browser__intro {
    padding: 28px 24px 24px;
  }

  .gs-block-category-browser__products {
    padding: 24px 24px 28px;
  }

  .gs-block-category-browser__banner {
    padding: 24px 24px 28px;
  }

  .gs-block-category-browser__mfg,
  .gs-block-category-browser__other,
  .gs-block-category-browser .gs-block-category-browser__loading {
    padding: 24px 24px 28px;
  }

  .gs-block-category-browser h3.gs-block-category-browser__title,
  .gs-eg-products h3.gs-eg-products__title {
    font-size: 26px;
  }

  .gs-block-category-browser__product-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-block-category-browser button.gs-block-category-browser__pill,
  .gs-block-category-browser__product {
    transition: none;
  }
}

/* 8. Blok: Sectie
   ========================================================================== */

.gs-block-section__inner {
  max-width: var(--gs-container);
  margin: 0 auto;
  padding-left: var(--gs-space-md);
  padding-right: var(--gs-space-md);
}

/* Breedte-modifiers. De sectie zelf loopt door, alleen de binnenkant wordt begrensd. */
.gs-block-section--width-wide .gs-block-section__inner {
  max-width: calc(var(--gs-container) + 240px);
}

.gs-block-section--width-full .gs-block-section__inner {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Achtergrond-modifiers. */
.gs-block-section--bg-light {
  background-color: var(--gs-color-bg-alt);
}

.gs-block-section--bg-primary {
  background-color: var(--gs-color-primary);
  color: #fff;
}

.gs-block-section--bg-accent {
  background-color: var(--gs-color-accent);
  color: #fff;
}

/* Verticale ruimte. De basis is gelijk aan "normaal", zodat een sectie zonder
   ingevulde waarde er hetzelfde uitziet als de default van het ACF-veld. */
.gs-block-section,
.gs-block-section--spacing-medium {
  padding-top: var(--gs-space-lg);
  padding-bottom: var(--gs-space-lg);
}

.gs-block-section--spacing-none {
  padding-top: 0;
  padding-bottom: 0;
}

.gs-block-section--spacing-small {
  padding-top: var(--gs-space-md);
  padding-bottom: var(--gs-space-md);
}

.gs-block-section--spacing-large {
  padding-top: var(--gs-space-xl);
  padding-bottom: var(--gs-space-xl);
}

/* 9. Blok: Tekst met afbeelding
   ========================================================================== */

.gs-block-text-image {
  padding-top: var(--gs-space-lg);
  padding-bottom: var(--gs-space-lg);
}

.gs-block-text-image__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gs-space-lg);
  align-items: center;
  max-width: var(--gs-container);
  margin: 0 auto;
}

/* Afbeelding links: media vóór de tekst plaatsen zonder de HTML-volgorde te wijzigen,
   zodat schermlezers de tekst als eerste houden. */
.gs-block-text-image--image-left .gs-block-text-image__media {
  order: -1;
  grid-column: 1;
  grid-row: 1;
}

.gs-block-text-image--image-left .gs-block-text-image__content {
  grid-column: 2;
  grid-row: 1;
}

.gs-block-text-image__title {
  margin: 0 0 var(--gs-space-sm);
  color: var(--gs-color-primary);
}

.gs-block-text-image__text > *:first-child {
  margin-top: 0;
}

.gs-block-text-image__text > *:last-child {
  margin-bottom: 0;
}

.gs-block-text-image__cta {
  display: inline-block;
  margin-top: var(--gs-space-md);
  padding: 12px 24px;
  border-radius: var(--gs-radius);
  background-color: var(--gs-color-accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.gs-block-text-image__cta:hover,
.gs-block-text-image__cta:focus {
  background-color: var(--gs-color-primary);
  color: #fff;
}

.gs-block-text-image__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--gs-radius);
}

@media (max-width: 767px) {
  .gs-block-text-image__inner {
    grid-template-columns: 1fr;
    gap: var(--gs-space-md);
  }

  /* Op mobiel altijd tekst boven afbeelding, ongeacht de gekozen positie. */
  .gs-block-text-image--image-left .gs-block-text-image__media,
  .gs-block-text-image--image-left .gs-block-text-image__content {
    grid-column: 1;
    grid-row: auto;
    order: 0;
  }
}

/* 10. EG-categoriepagina (product_category-archief)
   --------------------------------------------------------------------------
   Vaste indeling uit inc/eg-category/. Hergebruikt de paginakop, de sectiekop,
   de knoppen en de tegelstijl van het logoraster.
   ========================================================================== */

/* --- Leaderboard onder de hero -------------------------------------------- */

/* AdRotate schrijft zijn groeps-CSS (.g-79 en dergelijke) in de <head>, en alleen
   voor groepen die hij daar al kent — in de praktijk die uit de header-template.
   Onze banner kiest per categorie een andere groep en rendert in de body, dus die
   krijgt nooit CSS: geen max-width, geen centrering.

   Daarom hier zelf de maten van een leaderboard. De aangeleverde afbeeldingen zijn
   1940x224 (twee keer 970x112); zonder maximum liepen ze buiten de container. */
.gs-eg-banner .g {
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
}

.gs-eg-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* De laatste banner op de pagina staat direct boven de footer. Daar lijnt 41px
   beter uit dan de standaardruimte die :last-child meegeeft.

   Selector is (0,3,0) en wint daarmee ook van de mobiele variant van die regel,
   zodat de banner op elk formaat dezelfde afstand tot de footer houdt. Rendert er
   geen advertentie, dan is de videoband weer het laatste kind en pakt die zijn
   eigen gs-flush-bottom op. */
.gs-blocks-page .gs-blocks-canvas > .gs-eg-banner:last-child {
  margin-bottom: 41px;
}

/* --- Productfilter + omschrijving + fabrikanten per product --------------- */

/* De pills zelf delen hun regels met het Equipment browser-blok (sectie 7).
   Daaronder staan omschrijving en fabrikanten over de volle breedte. */

/* Eén kader om alles wat met de pills meefiltert: omschrijving, recommended en
   other manufacturers. Rand, oranje bovenbalk en grijze achtergrond komen van het
   paneel van het Equipment browser-blok (sectie 7); hier alleen de binnenruimte. */
.gs-eg-products .gs-eg-products__frame {
  padding: 36px 40px 40px;
}

/* Other manufacturers staat onderaan hetzelfde kader, gescheiden met een lijn —
   dezelfde scheiding als tussen de onderdelen van het browserpaneel. */
.gs-eg-products__frame .gs-eg-other {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid #dedede;
}

/* De productnaam bovenaan het kader deelt zijn stijl met de categorietitel in
   het browserpaneel (sectie 7). Daar staat er een label boven; hier is het het
   eerste element, dus zonder bovenmarge. */
.gs-eg-products h3.gs-eg-products__title {
  margin-top: 0;
}

/* De productomschrijving: gewone WYSIWYG-content, dus ook koppen, lijsten en
   links. Zelfde typografie als de beschrijving in het Equipment browser-blok. */
.gs-eg-products .gs-eg-products__description {
  max-width: 760px;
  margin: 0 0 36px;
  font-family: "Barlow", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

.gs-eg-products .gs-eg-products__description p,
.gs-eg-products .gs-eg-products__description ul,
.gs-eg-products .gs-eg-products__description ol {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

.gs-eg-products .gs-eg-products__description > :last-child {
  margin-bottom: 0;
}

.gs-eg-products .gs-eg-products__description h2,
.gs-eg-products .gs-eg-products__description h3,
.gs-eg-products .gs-eg-products__description h4 {
  margin: 20px 0 8px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--gs-color-primary);
}

.gs-eg-products .gs-eg-products__description a {
  color: var(--gs-color-accent);
  text-decoration: underline;
}

.gs-eg-products .gs-eg-products__description img {
  max-width: 100%;
  height: auto;
}

/* Het raster staat niet meer in een smalle kolom naast de productenlijst maar
   over de volle breedte. Vier kolommen houdt de tegels breed genoeg voor het
   introductiepaneel dat bij hover uit de tegel schuift. */
.gs-eg-products .gs-eg-mfg-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* De naam van het gekozen product krijgt de accentkleur, zoals in het ontwerp. */
.gs-eg-products .gs-eg-products__heading-name {
  color: var(--gs-color-accent);
}

.gs-eg-products .gs-eg-products__empty {
  margin: 0;
  font-family: "Barlow", sans-serif;
  font-size: 16px;
  color: #666;
}

/* --- Fabrikantentegel (zelfde vorm als het logoraster) -------------------- */

.gs-eg-mfg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.gs-eg-mfg {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #dedede;
  border-radius: 4px;
  text-decoration: none;
  transition: border-color 0.2s ease-in-out;
}

.gs-eg-mfg:hover,
.gs-eg-mfg:focus-visible {
  border-color: var(--gs-color-primary);
}

/* Introductie bij hover. Verving de 3D-flip van de oude versie: het paneel schuift
   van onderaf in beeld. Bewust geen opacity erbij — met een fade erover valt de
   beweging niet meer op, en dan lijkt het effect halfslachtig.

   Het paneel wordt onder de tegel geparkeerd; overflow: hidden op .gs-eg-mfg knipt
   het weg tot het naar boven schuift.

   De extra pixel in de calc() is geen slordigheid. De tegels staan in een raster met
   aspect-ratio 4/3, dus hun hoogte is vrijwel altijd fractioneel (bijvoorbeeld
   96,75px). Bij een kale translateY(100%) rondt de browser de verplaatsing anders af
   dan de kniprand, en dan blijft er onderaan een streepje van de blauwe achtergrond
   staan — de rand die je op sommige tegels zag uitsteken. Eén pixel extra zet het
   paneel gegarandeerd buiten beeld, en aan de animatie verandert het niets: die
   eindigt nog steeds op translateY(0).

   pointer-events: none zodat het paneel de klik op de tegel niet onderschept. */
.gs-eg-mfg__intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  background-color: var(--gs-color-primary);
  transform: translateY(calc(100% + 1px));
  transition: transform 0.3s ease;
  pointer-events: none;
}

.gs-eg-mfg:hover .gs-eg-mfg__intro,
.gs-eg-mfg:focus-visible .gs-eg-mfg__intro {
  transform: translateY(0);
}

.gs-eg-mfg .gs-eg-mfg__intro-name {
  display: block;
  margin-bottom: 6px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: #fff;
}

/* Langste omschrijving is 473 tekens; op zes regels valt zelden iets weg. */
.gs-eg-mfg .gs-eg-mfg__intro-text {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: "Barlow", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}

/* Alleen de overgang uit, niet de transform: die bepaalt nu of het paneel zichtbaar
   is. Met transform: none zou het permanent over de tegel liggen. Het paneel klapt
   hier dus meteen in beeld in plaats van te schuiven. */
@media (prefers-reduced-motion: reduce) {
  .gs-eg-mfg__intro {
    transition: none;
  }
}

.gs-eg-mfg img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.gs-eg-products .gs-eg-mfg__fallback,
.gs-eg-mfg .gs-eg-mfg__fallback {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: #666;
}

/* --- Overige fabrikanten -------------------------------------------------- */

.gs-eg-other__cols {
  columns: 4;
  column-gap: 28px;
}

/* line-height 1.5 komt uit het ontwerp: daar staat op deze links geen eigen waarde,
   dus erven ze de 1.5 van de body. Met de 1.3 die hier eerst stond werd elke regel
   bijna 3px lager en oogde de lijst samengedrukt. */
.gs-eg-other .gs-eg-other__cols a {
  display: block;
  padding: 5px 0;
  border-bottom: 1px solid #dedede;
  font-family: "Barlow", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  text-decoration: none;
  break-inside: avoid;
}

.gs-eg-other .gs-eg-other__cols a:hover,
.gs-eg-other .gs-eg-other__cols a:focus {
  outline: none;
  color: var(--gs-color-accent);
  text-decoration: underline;
}

/* De lijst filtert mee met de producttabs. display:none is hier nodig omdat het
   hidden-attribuut alleen `display: none` als user-agent-stijl zet — de regel
   hierboven met `display: block` zou dat overrulen en de links toch tonen. */
.gs-eg-other .gs-eg-other__cols a[hidden] {
  display: none;
}

.gs-eg-other .gs-eg-other__empty {
  margin: 0;
  font-family: "Barlow", sans-serif;
  font-size: 15px;
  color: #666;
}

/* --- E-mailcampagnes ------------------------------------------------------ */

.gs-eg-campaigns__panel {
  padding: 20px 24px;
  border: 1px solid #dedede;
  border-radius: 4px;
  background-color: #f5f5f5;
}

.gs-eg-campaigns__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  margin-bottom: 16px;
}

.gs-eg-campaign {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #dedede;
  text-decoration: none;
}

/* Onderste rij van elke kolom heeft geen streep nodig. */
.gs-eg-campaign:nth-last-child(-n + 2) {
  border-bottom: none;
}

.gs-eg-campaign__icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.gs-eg-campaign__icon svg {
  width: 20px;
  height: 20px;
  fill: var(--gs-color-accent);
}

.gs-eg-campaigns .gs-eg-campaign__title {
  display: block;
  margin-bottom: 2px;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: var(--gs-color-primary);
}

.gs-eg-campaigns .gs-eg-campaign__date {
  display: block;
  font-family: "Barlow", sans-serif;
  font-size: 14px;
  color: #666;
}

/* --- Experts -------------------------------------------------------------- */

.gs-eg-experts__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.gs-eg-expert {
  padding: 20px;
  border-radius: 4px;
  background-color: #f5f5f5;
}

.gs-eg-expert__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--gs-color-primary);
}

.gs-eg-expert__person {
  display: flex;
  align-items: center;
  gap: 16px;
}

.gs-eg-expert__avatar {
  flex: none;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid var(--gs-color-accent);
  object-fit: cover;
}

.gs-eg-experts h3.gs-eg-expert__name {
  margin: 0 0 4px;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  color: #000;
}

.gs-eg-experts .gs-eg-expert__company {
  font-family: "Barlow", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #666;
  text-decoration: none;
}

.gs-eg-experts .gs-eg-expert__company:hover,
.gs-eg-experts .gs-eg-expert__company:focus {
  outline: none;
  color: var(--gs-color-accent);
  text-decoration: underline;
}

.gs-eg-experts .gs-eg-expert__bio {
  margin: 0;
  font-family: "Barlow", sans-serif;
  font-size: 15px;
  line-height: 23px;
  color: #333;
}

/* Bio's zijn lang (mediaan 683 tekens), dus standaard ingeklapt op drie regels.
   line-clamp in plaats van een vaste max-height zoals de oude versie: dat past
   zich vanzelf aan als de tekstgrootte ooit verandert. */
.gs-eg-experts--clamped .gs-eg-expert:not(.is-expanded) .gs-eg-expert__bio {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Het is een <button>, en de Elementor Kit zet die op oranje met witte tekst —
   vandaar element + class. Let op dat óók :focus wordt afgedekt: de Kit styleert
   `button:focus` met een achtergrondkleur, en die focus blijft na een klik staan.
   Alleen :hover en :focus-visible afdekken laat de knop na klikken oranje achter. */
.gs-eg-experts button.gs-eg-expert__toggle {
  display: inline-block;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gs-color-primary);
  cursor: pointer;
}

.gs-eg-experts .gs-eg-expert button.gs-eg-expert__toggle:hover,
.gs-eg-experts .gs-eg-expert button.gs-eg-expert__toggle:focus,
.gs-eg-experts .gs-eg-expert button.gs-eg-expert__toggle:active {
  border: 0;
  outline: none;
  background: none;
  background-color: transparent;
  color: var(--gs-color-accent);
  text-decoration: underline;
}

.gs-eg-expert__toggle-less {
  display: none;
}

.gs-eg-expert.is-expanded .gs-eg-expert__toggle-more {
  display: none;
}

.gs-eg-expert.is-expanded .gs-eg-expert__toggle-less {
  display: inline;
}

/* --- Gerelateerde artikelen ----------------------------------------------- */

.gs-eg-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Knop naar de technology zone. Zelfde plaatsing als onder de videoband, zodat de
   twee "view all"-knoppen op de pagina hetzelfde gedrag hebben. */
.gs-eg-articles__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
}

.gs-eg-article__image {
  display: block;
  margin-bottom: 10px;
}

.gs-eg-article__image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.gs-eg-articles h3.gs-eg-article__title {
  margin: 0 0 6px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
}

.gs-eg-articles h3.gs-eg-article__title a {
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-eg-articles h3.gs-eg-article__title a:hover {
  color: var(--gs-color-accent);
}

.gs-eg-articles .gs-eg-article__date {
  margin: 0 0 8px;
  font-family: "Barlow", sans-serif;
  font-size: 14px;
  color: #666;
}

.gs-eg-articles .gs-eg-article__excerpt {
  margin: 0 0 8px;
  font-family: "Barlow", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

/* De Card uit het design system sluit af met een onderstreepte read more in de
   linkkleur. Zelfde eenvoudige hover als de andere tekstlinks hier. */
.gs-eg-articles .gs-eg-article__more {
  font-family: "Barlow", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gs-color-link);
  text-decoration: underline;
}

.gs-eg-articles .gs-eg-article__more:hover,
.gs-eg-articles .gs-eg-article__more:focus {
  outline: none;
  color: var(--gs-color-accent);
  text-decoration: underline;
}

/* --- Video's, full-bleed grijze band -------------------------------------- */

/* Zelfde aanpak als de paginakop: alleen de breedtebegrenzing opheffen, de
   horizontale padding hoort bij de sectie zelf. Geen 100vw. */
.gs-blocks-canvas > .gs-eg-videos {
  max-width: none;
}

.gs-eg-videos {
  padding: 48px 24px 56px;
  background-color: #f5f5f5;
}

.gs-eg-videos__inner {
  max-width: var(--gs-container);
  margin: 0 auto;
}

.gs-eg-videos__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.gs-eg-video__thumb {
  position: relative;
  display: block;
  margin-bottom: 12px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid #dedede;
  border-radius: 4px;
  background-color: #fff;
}

.gs-eg-video__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gs-eg-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--gs-color-primary);
}

.gs-eg-video__play svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

.gs-eg-videos .gs-eg-video__title {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-eg-videos .gs-eg-video__title:hover {
  color: var(--gs-color-accent);
}

.gs-eg-videos__footer {
  display: flex;
  justify-content: flex-end;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1199px) {
  .gs-eg-videos__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1199px) {
  .gs-eg-products .gs-eg-mfg-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  .gs-eg-products .gs-eg-mfg-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gs-eg-mfg-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gs-eg-other__cols {
    columns: 2;
  }

  .gs-eg-experts__grid,
  .gs-eg-campaigns__grid {
    grid-template-columns: 1fr;
  }

  .gs-eg-campaign:nth-last-child(-n + 2) {
    border-bottom: 1px solid #dedede;
  }

  .gs-eg-campaign:last-child {
    border-bottom: none;
  }

  .gs-eg-articles__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gs-eg-videos__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .gs-eg-other__cols {
    columns: 1;
  }

  .gs-eg-products .gs-eg-products__frame {
    padding: 28px 24px 28px;
  }

  .gs-eg-products__frame .gs-eg-other {
    margin-top: 28px;
    padding-top: 24px;
  }

  .gs-eg-articles__grid {
    grid-template-columns: 1fr;
  }

  .gs-eg-videos__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gs-eg-videos {
    padding: 32px 20px 40px;
  }

  .gs-eg-campaigns__panel {
    padding: 16px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-eg-products button.gs-eg-products__item,
  .gs-eg-mfg {
    transition: none;
  }
}

/* 11. Blok: Manufacturers Directory
   ==========================================================================

   Alle onderdelen staan onder .gs-block-manufacturer-directory genest. Dat is niet
   alleen ordelijk: de Elementor Kit zet regels als `.elementor-kit-{id} a` en
   `.elementor-kit-{id} h3` op (0,1,1), en een enkele class (0,1,0) verliest daarvan.
   Met de blok-root ervoor komt elke regel op minimaal (0,2,0) uit. */

.gs-block-manufacturer-directory {
  font-family: "Barlow", sans-serif;
}

/* --- Kop met telling boven een sectie ------------------------------------- */

.gs-block-manufacturer-directory .gs-md-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

/* De gedeelde sectiekop draagt zijn eigen margin-bottom van 20px. Hier zit de
   ruimte op .gs-md-head, anders staat de telling 20px boven de titellijn. */
.gs-block-manufacturer-directory .gs-md-head .gs-section-title {
  margin: 0;
}

.gs-block-manufacturer-directory .gs-md-head__count {
  flex: none;
  font-size: 14px;
  line-height: 1.2;
  color: #666;
  white-space: nowrap;
}

.gs-block-manufacturer-directory .gs-md-empty {
  margin: 18px 0 0;
  font-size: 15px;
  color: #666;
}

/* --- Letterbalk ----------------------------------------------------------- */

.gs-block-manufacturer-directory .gs-md-letters__label {
  margin: 0 0 12px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #666;
}

.gs-block-manufacturer-directory .gs-md-letters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Het ontwerp gebruikt hier knoppen; wij gebruiken links, zodat elke letter een
   eigen URL heeft. Vandaar de expliciete text-decoration en het vaste midden:
   een <a> erft die niet van een button. */
.gs-block-manufacturer-directory .gs-md-letters__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 8px 9px;
  border: 1px solid #dedede;
  border-radius: 2px;
  background-color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gs-color-text);
  transition: all 0.2s ease-in-out;
}

/* :focus mee, en niet alleen :focus-visible: de Kit zet op interactiestaten
   `border-radius: 0`, en na een muisklik blijft de focus op de link staan. Zonder
   deze staat springt de knop die je net aangeklikt hebt vierkant.

   font-weight moet hier expliciet herhaald worden. De Kit zet
   `.elementor-kit-143664 a:hover { font-weight: 500 }` — (0,2,0), en die haalt het
   niet van deze selector (0,3,0), maar hij vult wél de eigenschappen aan die wij
   niet noemen. Zonder deze regel valt de letter bij hover van 600 naar 500 terug en
   verspringt de tekst in de knop. */
.gs-block-manufacturer-directory .gs-md-letters__item:hover,
.gs-block-manufacturer-directory .gs-md-letters__item:focus {
  border-color: var(--gs-color-primary);
  border-radius: 2px;
  font-weight: 600;
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-block-manufacturer-directory .gs-md-letters__item.is-active,
.gs-block-manufacturer-directory .gs-md-letters__item.is-active:hover,
.gs-block-manufacturer-directory .gs-md-letters__item.is-active:focus {
  border-color: var(--gs-color-primary);
  border-radius: 2px;
  font-weight: 600;
  background-color: var(--gs-color-primary);
  color: #fff;
}

/* --- Aanbevolen fabrikanten ----------------------------------------------- */

.gs-block-manufacturer-directory .gs-md-recommended {
  margin-top: 40px;
}

/* auto-fill en niet auto-fit: bij één of twee kaarten houdt auto-fit de kolommen
   leeg en rekt de kaarten over de volle breedte uit. Dat gebeurt hier echt — filter
   op Q of X en er blijft één aanbevolen fabrikant over. */
.gs-block-manufacturer-directory .gs-md-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.gs-block-manufacturer-directory .gs-md-card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: var(--gs-radius);
  background-color: var(--gs-color-bg-alt);
}

/* Vast logovlak op wit. De logo's lopen van breed-en-laag tot bijna vierkant, dus
   zonder vaste hoogte krijgt elke kaart in de rij een andere kop. */
.gs-block-manufacturer-directory .gs-md-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 12px 16px;
  border: 1px solid #dedede;
  border-radius: 2px;
  background-color: #fff;
  text-decoration: none;
}

.gs-block-manufacturer-directory .gs-md-card__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.gs-block-manufacturer-directory .gs-md-card__fallback {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: #666;
}

.gs-block-manufacturer-directory .gs-md-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 14px 6px 6px;
}

.gs-block-manufacturer-directory h3.gs-md-card__name {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  color: var(--gs-color-text);
}

.gs-block-manufacturer-directory .gs-md-card__name a {
  color: inherit;
  text-decoration: none;
}

.gs-block-manufacturer-directory .gs-md-card__name a:hover,
.gs-block-manufacturer-directory .gs-md-card__name a:focus {
  color: var(--gs-color-primary);
}

/* Vier regels: de omschrijvingen lopen van 80 tot 470 tekens, en zonder deze knip
   verschilt de kaarthoogte binnen één rij tot een factor drie. */
.gs-block-manufacturer-directory .gs-md-card__intro {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #333;
}

/* margin-top: auto duwt de knoppenrij naar de onderkant, zodat de knoppen van alle
   kaarten in een rij op dezelfde hoogte staan ook als de tekst korter is. */
.gs-block-manufacturer-directory .gs-md-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: auto;
  padding-top: 10px;
}

/* Zelfde letter als de kleine knop ernaast (gs-button--sm, buttons.css), zodat
   label en link op één basislijn en in dezelfde maat staan. */
.gs-block-manufacturer-directory .gs-md-card__products {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gs-color-link);
}

/* --- Kaart "Your company here?" ------------------------------------------- */

.gs-block-manufacturer-directory .gs-md-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 210px;
  padding: 28px 20px;
  border: 2px dashed var(--gs-color-accent);
  border-radius: var(--gs-radius);
  text-align: center;
  text-decoration: none;
}

.gs-block-manufacturer-directory .gs-md-cta:hover,
.gs-block-manufacturer-directory .gs-md-cta:focus {
  background-color: var(--gs-color-bg-alt);
  border-radius: var(--gs-radius);
}

.gs-block-manufacturer-directory .gs-md-cta__title {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: var(--gs-color-primary);
}

.gs-block-manufacturer-directory .gs-md-cta__text {
  max-width: 200px;
  font-size: 14px;
  line-height: 1.45;
  color: #333;
}

.gs-block-manufacturer-directory .gs-md-cta__action {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gs-color-accent);
}

/* --- Leaderboard tussen de lijsten ---------------------------------------- */

.gs-block-manufacturer-directory .gs-md-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 48px 0;
}

.gs-block-manufacturer-directory .gs-md-banner img {
  max-width: 100%;
  height: auto;
}

/* --- Overige fabrikanten -------------------------------------------------- */

/* grid en niet columns, anders dan bij de EG-categoriepagina: die vult kolom voor
   kolom, waardoor een alfabetische lijst van boven naar beneden per kolom loopt.
   Hier hoort A links te staan en de volgende naam ernaast, zoals in het ontwerp. */
.gs-block-manufacturer-directory .gs-md-other__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
}

.gs-block-manufacturer-directory .gs-md-other__cols a {
  display: block;
  overflow: hidden;
  padding: 7px 0;
  border-bottom: 1px solid #dedede;
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}

.gs-block-manufacturer-directory .gs-md-other__cols a:hover,
.gs-block-manufacturer-directory .gs-md-other__cols a:focus {
  outline: none;
  color: var(--gs-color-accent);
  text-decoration: underline;
}

/* --- Paginering ----------------------------------------------------------- */

/* Uit het design system (components/navigation/Pagination.jsx): geen kaders, geen
   witte vulling, Barlow 14px en de actieve pagina als gevuld blokje. Bewust anders
   dan de letterbalk hierboven — daar zijn het knoppen in een raster, hier een rij
   die onder de lijst wegvalt tot je hem nodig hebt. */
.gs-block-manufacturer-directory .gs-md-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 26px;
  font-family: "Barlow", sans-serif;
}

.gs-block-manufacturer-directory .gs-md-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: var(--gs-radius);
  background-color: transparent;
  font-family: "Barlow", sans-serif;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  color: #333;
  transition: all 0.2s ease-in-out;
}

/* font-weight en border-radius expliciet, om dezelfde reden als bij de letterbalk:
   de Kit vult op a:hover font-weight 500 aan en zet de radius op 0. */
.gs-block-manufacturer-directory a.gs-md-pagination__link:hover,
.gs-block-manufacturer-directory a.gs-md-pagination__link:focus {
  border-radius: var(--gs-radius);
  background-color: var(--gs-color-bg-alt);
  font-weight: 400;
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-block-manufacturer-directory .gs-md-pagination__link.is-active {
  background-color: var(--gs-color-primary);
  color: #fff;
}

.gs-block-manufacturer-directory .gs-md-pagination__gap {
  padding: 0 2px;
  font-size: 14px;
  color: #666;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
  .gs-block-manufacturer-directory .gs-md-other__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}

@media (max-width: 767px) {
  .gs-block-manufacturer-directory .gs-md-grid {
    grid-template-columns: 1fr;
  }

  .gs-block-manufacturer-directory .gs-md-other__cols {
    grid-template-columns: 1fr;
  }

  .gs-block-manufacturer-directory .gs-md-recommended {
    margin-top: 32px;
  }

  .gs-block-manufacturer-directory .gs-md-banner {
    margin: 32px 0;
  }

  /* Onder elkaar in plaats van naast elkaar: met de telling ernaast breekt de
     sectiekop op smalle schermen midden in een woord af. */
  .gs-block-manufacturer-directory .gs-md-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-block-manufacturer-directory .gs-md-letters__item,
  .gs-block-manufacturer-directory .gs-md-pagination__link {
    transition: none;
  }
}

/* 12. Blok: Zone browser en Market browser
   --------------------------------------------------------------------------
   Eén opmaak voor beide blokken (root: .gs-hub-browser). Pills en paneelkader
   delen de regels van de Equipment browser in sectie 7; hier alleen wat binnen
   het paneel anders is: intro met knoppen links, twee kolommen met wat op verzoek
   binnenkomt, en bij zones de aanbevolen fabrikanten over de volle breedte.
   ========================================================================== */

.gs-hub-browser [hidden] {
  display: none;
}

.gs-hub-browser .gs-hub-browser__pill-count {
  margin-left: 8px;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 13px;
  opacity: 0.75;
}

.gs-hub-browser__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  padding: 32px 40px;
}

.gs-hub-browser h3.gs-hub-browser__title {
  margin: 0 0 12px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
  color: var(--gs-color-primary);
}

.gs-hub-browser__description {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.5;
}

.gs-hub-browser__facts {
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gs-color-primary);
}

.gs-hub-browser__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Zelfde kopje als "Products in this category" in de Equipment browser. */
.gs-hub-browser .gs-hub-browser__label {
  margin: 0 0 10px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #666;
}

.gs-hub-browser .gs-hub-browser__label:not(:first-child) {
  margin-top: 24px;
}

.gs-hub-browser__loading,
.gs-hub-browser__empty {
  margin: 0;
  font-size: 14px;
  color: var(--gs-color-text);
}

.gs-hub-browser__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gs-hub-browser__list li + li {
  border-top: 1px solid var(--gs-color-line);
}

.gs-block .gs-hub-browser__list a {
  display: block;
  padding: 8px 0;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-block .gs-hub-browser__list a:hover,
.gs-block .gs-hub-browser__list a:focus {
  color: var(--gs-color-accent);
}

.gs-hub-browser__list time {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 13px;
  color: var(--gs-color-text);
}

.gs-hub-browser__types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gs-block .gs-hub-browser__types a {
  padding: 5px 10px;
  border: 1px solid var(--gs-color-line);
  border-radius: 4px;
  background-color: var(--gs-color-bg);
  font-size: 14px;
  line-height: 1.3;
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-block .gs-hub-browser__types a:hover,
.gs-block .gs-hub-browser__types a:focus {
  border-color: var(--gs-color-primary);
}

.gs-hub-browser__types .gs-hub-browser__types-more {
  border-style: dashed;
}

.gs-hub-browser__experts {
  display: grid;
  gap: 10px;
}

.gs-block a.gs-hub-browser__expert {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--gs-color-text);
}

.gs-hub-browser__expert strong {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  color: var(--gs-color-primary);
}

.gs-hub-browser__expert small {
  display: block;
  font-size: 13px;
  line-height: 1.3;
}

.gs-block a.gs-hub-browser__expert:hover strong,
.gs-block a.gs-hub-browser__expert:focus strong {
  color: var(--gs-color-accent);
}

.gs-hub-browser__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.gs-hub-browser__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--gs-color-primary);
  font-weight: 600;
  font-size: 14px;
  color: var(--gs-color-bg);
}

.gs-hub-browser__mfg {
  padding: 28px 40px 36px;
  border-top: 1px solid var(--gs-color-line);
}

/* Dezelfde tegelbreedte als in de Equipment browser (sectie 7). */
.gs-hub-browser .gs-eg-mfg-grid {
  grid-template-columns: repeat(8, 1fr);
}

@media (max-width: 1199px) {
  .gs-hub-browser .gs-eg-mfg-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 991px) {
  .gs-hub-browser__grid {
    grid-template-columns: 1fr 1fr;
  }

  .gs-hub-browser__intro {
    grid-column: 1 / -1;
  }

  .gs-hub-browser .gs-eg-mfg-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {
  .gs-hub-browser__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 20px;
  }

  .gs-hub-browser__mfg {
    padding: 24px 20px 28px;
  }

  .gs-hub-browser .gs-eg-mfg-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 13. Blok: Latest posts
   --------------------------------------------------------------------------
   Raster van artikelkaarten (gs-post-card, sectie 2). Het aantal kolommen komt
   uit de modifier --cols-2/3/4.
   ========================================================================== */

.gs-block-latest-posts__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 20px;
}

.gs-block-latest-posts__head .gs-section-title,
.gs-block-latest-posts__head .gs-section-head {
  margin-bottom: 0;
}

.gs-block a.gs-block-latest-posts__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-block a.gs-block-latest-posts__more:hover,
.gs-block a.gs-block-latest-posts__more:focus {
  color: var(--gs-color-accent);
}

.gs-block-latest-posts__more .gs-button__arrow {
  width: 10px;
  height: 13px;
  fill: var(--gs-color-accent);
}

.gs-block-latest-posts__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 24px;
}

.gs-block-latest-posts--cols-2 .gs-block-latest-posts__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gs-block-latest-posts--cols-4 .gs-block-latest-posts__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 991px) {
  .gs-block-latest-posts__grid,
  .gs-block-latest-posts--cols-4 .gs-block-latest-posts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .gs-block-latest-posts__grid,
  .gs-block-latest-posts--cols-2 .gs-block-latest-posts__grid,
  .gs-block-latest-posts--cols-4 .gs-block-latest-posts__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 14. Blok: Task navigation
   --------------------------------------------------------------------------
   Een rij kaarten: icoon, werkwoord, en in klein wat het is.
   ========================================================================== */

.gs-block-task-nav__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.gs-block a.gs-block-task-nav__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--gs-color-line);
  border-radius: 6px;
  background-color: var(--gs-color-bg);
  color: var(--gs-color-text);
  text-decoration: none;
  transition: border-color 0.2s ease-in-out;
}

.gs-block a.gs-block-task-nav__item:hover,
.gs-block a.gs-block-task-nav__item:focus {
  border-color: var(--gs-color-primary);
}

.gs-block-task-nav__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--gs-color-bg-alt);
  color: var(--gs-color-primary);
}

.gs-block-task-nav__icon svg {
  width: 22px;
  height: 22px;
}

.gs-block-task-nav__text strong {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  color: var(--gs-color-primary);
}

.gs-block a.gs-block-task-nav__item:hover strong,
.gs-block a.gs-block-task-nav__item:focus strong {
  color: var(--gs-color-accent);
}

.gs-block-task-nav__text small {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.3;
}

/* 15. Blok: Video browser
   --------------------------------------------------------------------------
   Filtergroepen met pills (vorm uit sectie 7), een statusregel en het raster met
   videokaarten (gs-post-card, sectie 2). Paginering: .gs-pagination, sectie 2.
   ========================================================================== */

.gs-block-video-browser {
  scroll-margin-top: 24px;
}

.gs-block-video-browser__filters {
  display: grid;
  gap: 4px;
  padding: 24px 28px 12px;
  border: 1px solid var(--gs-color-line);
  border-radius: 4px;
  background-color: var(--gs-color-bg-alt);
}

.gs-block-video-browser .gs-block-video-browser__label {
  margin: 0 0 8px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #666;
}

.gs-block-video-browser__label small {
  margin-left: 6px;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.gs-block-video-browser .gs-block-video-browser__pill-count {
  margin-left: 6px;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: 13px;
  opacity: 0.75;
}

.gs-block-video-browser .gs-block-video-browser__pill.is-empty {
  opacity: 0.55;
}

.gs-block-video-browser__status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin: 24px 0 20px;
}

.gs-block-video-browser__count {
  margin: 0;
  font-size: 15px;
}

.gs-block-video-browser__count strong {
  margin-right: 8px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  color: var(--gs-color-primary);
}

.gs-block a.gs-block-video-browser__clear {
  font-weight: 600;
  font-size: 15px;
  color: var(--gs-color-primary);
}

.gs-block-video-browser__empty {
  padding: 24px;
  border: 1px dashed var(--gs-color-line);
  border-radius: 4px;
  text-align: center;
}

.gs-block-video-browser__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 24px;
}

@media (max-width: 991px) {
  .gs-block-video-browser__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Zelfde breekpunt als de scrollbare pillrij (sectie 7), die op deze 16px rekent. */
@media (max-width: 767px) {
  .gs-block-video-browser__filters {
    padding: 20px 16px 8px;
  }
}

@media (max-width: 575px) {
  .gs-block-video-browser__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-block-task-nav__item {
    transition: none;
  }
}

/* 16. Hub-pagina's: zone, markt en News (inc/hub-pages/)
   --------------------------------------------------------------------------
   Eén opmaak voor drie paginatypen. De kop is de Paginakop (sectie 3), kaarten,
   sectiekoppen, edities en paginering komen uit sectie 2, de pills uit sectie 7,
   de FAQ uit sectie 5 en de afsluitende band uit sectie 4. Hier staat alleen wat
   de hub-pagina extra heeft.

   Kleurritme: wit, dan de experts op lichtgrijs (--gs-color-bg-alt), direct
   gevolgd door de nieuwsbrief als enige donkere band (--gs-color-primary).
   ========================================================================== */

/* --- Kop: feiten naast de intro -------------------------------------------- */

.gs-hub-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  align-items: end;
  gap: 32px 48px;
}

.gs-hub-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* Rastert mee met het aantal: vier bij een zone, twee bij een markt. */
.gs-hub-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gs-block a.gs-hub-fact {
  display: block;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--gs-color-bg);
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
}

.gs-block a.gs-hub-fact:hover,
.gs-block a.gs-hub-fact:focus {
  background-color: rgba(255, 255, 255, 0.16);
  color: var(--gs-color-bg);
}

.gs-hub-fact strong {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
}

.gs-hub-fact span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.35;
}

/* --- Wisselaar ------------------------------------------------------------ */

/* Sticky balk over de volle breedte, direct onder de vaste Elementor-header. De
   hoogte van die header verschilt per site en per breakpoint, daarom komt de offset
   uit de tokens header-height en header-height-mobile (theme site-config.php). De
   inhoud lijnt uit op --gs-container via de padding, dus er is geen inner nodig.

   Op .gs-blocks-canvas genest: het verticale ritme van het canvas zou hier 56px
   tussen kop en wisselaar zetten, terwijl ze bij elkaar horen. */
.gs-blocks-page .gs-blocks-canvas > .gs-hub-switcher {
  position: sticky;
  top: var(--gs-header-height);
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: 16px;
  max-width: none;
  margin-top: 14px;
  padding: 10px max(24px, calc((100% - var(--gs-container)) / 2));
  border-bottom: 1px solid var(--gs-color-line);
  background-color: var(--gs-color-bg);
}

/* Sticky werkt niet binnen een ouder met overflow hidden. Clip vangt de sub-pixel
   overflow net zo goed op, zonder een scrollcontainer te maken. */
.gs-hub-page .gs-blocks-canvas {
  overflow-x: clip;
}

/* De admin-balk staat boven de header vast (vanaf 601px). */
.admin-bar .gs-blocks-canvas > .gs-hub-switcher {
  top: calc(var(--gs-header-height) + 32px);
}

.gs-hub-switcher .gs-hub-switcher__label {
  flex: none;
  margin: 0;
  font-weight: 600;
  font-size: 15px;
  color: var(--gs-color-text);
}

/* Op desktop lopen de pills door over meerdere regels: horizontaal scrollen gaat
   daar met een muis niet. Op mobiel één scrollbare rij (de gedeelde pillregel). */
.gs-hub-switcher .gs-hub-switcher__pills {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

@media (max-width: 782px) {
  .admin-bar .gs-blocks-canvas > .gs-hub-switcher {
    top: calc(var(--gs-header-height-mobile) + 46px);
  }
}

@media (max-width: 767px) {
  .gs-blocks-page .gs-blocks-canvas > .gs-hub-switcher {
    top: var(--gs-header-height-mobile);
    display: block;
    padding: 10px 0 8px;
  }

  .admin-bar .gs-blocks-canvas > .gs-hub-switcher {
    top: calc(var(--gs-header-height-mobile) + 46px);
  }

  .gs-hub-switcher .gs-hub-switcher__label {
    margin: 0 20px 6px;
    font-size: 14px;
  }

  /* De gedeelde mobiele pillregel zet -20px marges voor een rij binnen de gutter;
     deze balk heeft zelf geen gutter. */
  .gs-hub-switcher .gs-hub-switcher__pills {
    margin: 0;
    padding: 2px 20px;
  }
}

/* Onder 601px scrolt de admin-balk mee weg. */
@media (max-width: 600px) {
  .admin-bar .gs-blocks-canvas > .gs-hub-switcher {
    top: var(--gs-header-height-mobile);
  }
}

/* --- Sectiekop met "meer"-link -------------------------------------------- */

.gs-hub-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 24px;
}

.gs-block .gs-hub-head .gs-section-title,
.gs-block .gs-hub-head .gs-section-head {
  margin-bottom: 0;
}

.gs-block a.gs-hub-head__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-block a.gs-hub-head__more:hover,
.gs-block a.gs-hub-head__more:focus {
  color: var(--gs-color-accent);
}

.gs-hub-head__more .gs-button__arrow,
.gs-hub-expert__cta .gs-button__arrow,
.gs-hub-related__item .gs-button__arrow {
  flex: none;
  width: 10px;
  height: 13px;
  fill: var(--gs-color-accent);
}

.gs-hub-lede {
  max-width: 760px;
  margin: -8px 0 24px;
  font-size: 16px;
  line-height: 1.5;
}

.gs-hub-empty {
  margin: 0;
  font-size: 15px;
}

.gs-hub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- Rasters met artikelkaarten ------------------------------------------ */

.gs-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 24px;
}

.gs-hub-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Eén uitgelicht artikel, vier kleinere ernaast. */
.gs-hub-latest__top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

.gs-block .gs-post-card--lead .gs-post-card__title {
  font-size: 28px;
}

.gs-post-card--lead .gs-post-card__image {
  aspect-ratio: 16 / 9;
}

.gs-hub-latest__rows {
  display: grid;
  align-content: start;
  gap: 16px;
}

/* Rij-variant: beeld links, tekst rechts. */
.gs-post-card--row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.gs-post-card--row .gs-post-card__image {
  margin-bottom: 0;
}

.gs-block .gs-post-card--row .gs-post-card__title {
  font-size: 18px;
}

.gs-hub-latest__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--gs-color-line);
}

.gs-hub-latest__foot p {
  margin: 0;
  font-size: 15px;
}

/* --- Engineering-gids ----------------------------------------------------- */

.gs-block h3.gs-hub-guide__title,
.gs-block h3.gs-hub-equipment__title {
  margin: 32px 0 14px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--gs-color-primary);
}

.gs-hub-guide__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.gs-hub-guide__card {
  padding: 20px 22px;
  border: 1px solid var(--gs-color-line);
  border-radius: 6px;
  background-color: var(--gs-color-bg);
  font-size: 15px;
  line-height: 1.5;
}

.gs-block .gs-hub-guide__card h4 {
  margin: 0 0 8px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--gs-color-primary);
}

.gs-hub-guide__card p:last-child {
  margin-bottom: 0;
}

.gs-hub-guide__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--gs-color-line);
  border-radius: 6px;
}

.gs-hub-guide__table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
}

.gs-hub-guide__table th,
.gs-hub-guide__table td {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--gs-color-line);
  text-align: left;
  vertical-align: top;
}

.gs-hub-guide__table thead th {
  background-color: var(--gs-color-bg-alt);
  font-weight: 600;
  color: var(--gs-color-primary);
}

.gs-hub-guide__table tbody tr:last-child > * {
  border-bottom: 0;
}

.gs-hub-guide__table tbody th {
  width: 26%;
  font-weight: 600;
}

.gs-hub-guide__more {
  margin: 24px 0 0;
  font-size: 15px;
}

.gs-block .gs-hub-guide__more a {
  color: var(--gs-color-primary);
}

/* --- Equipment Guide ------------------------------------------------------ */

.gs-hub-equipment .gs-hub-equipment__title:first-of-type {
  margin-top: 0;
}

.gs-hub-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gs-block .gs-hub-chips a {
  padding: 6px 12px;
  border: 1px solid var(--gs-color-line);
  border-radius: 4px;
  background-color: var(--gs-color-bg);
  font-size: 14px;
  line-height: 1.3;
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-block .gs-hub-chips a:hover,
.gs-block .gs-hub-chips a:focus {
  border-color: var(--gs-color-primary);
}

.gs-hub-chips .gs-hub-chips__more {
  border-style: dashed;
}

/* Dezelfde tegelbreedte als in de Equipment browser (sectie 7). */
.gs-hub-equipment .gs-eg-mfg-grid {
  grid-template-columns: repeat(8, 1fr);
}

.gs-hub-equipment__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 28px;
  padding: 20px 24px;
  border-radius: 6px;
  background-color: var(--gs-color-bg-alt);
}

.gs-hub-equipment__foot p {
  margin: 0;
  max-width: 640px;
  font-size: 15px;
}

/* --- Banden: experts (lichtgrijs) en nieuwsbrief (donker) ------------------ */

.gs-blocks-canvas > .gs-hub-experts,
.gs-blocks-canvas > .gs-hub-focus {
  max-width: none;
  padding-top: 56px;
  padding-bottom: 56px;
}

.gs-hub-band__inner {
  max-width: var(--gs-container);
  margin: 0 auto;
}

.gs-hub-experts {
  background-color: var(--gs-color-bg-alt);
}

/* De twee banden sluiten op elkaar aan: geen witte strook ertussen. */
.gs-blocks-page .gs-blocks-canvas > .gs-hub-experts + .gs-hub-focus {
  margin-top: 0;
}

.gs-hub-experts__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.gs-hub-expert {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--gs-color-line);
  border-radius: 6px;
  background-color: var(--gs-color-bg);
}

.gs-block a.gs-hub-expert__head {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gs-color-text);
  text-decoration: none;
}

.gs-hub-expert__head strong {
  display: block;
  font-size: 16px;
  line-height: 1.3;
  color: var(--gs-color-primary);
}

.gs-hub-expert__head small {
  display: block;
  font-size: 14px;
  line-height: 1.3;
}

.gs-block a.gs-hub-expert__head:hover strong,
.gs-block a.gs-hub-expert__head:focus strong {
  color: var(--gs-color-accent);
}

.gs-hub-expert__avatar {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.gs-hub-expert__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--gs-color-primary);
  font-weight: 600;
  font-size: 20px;
  color: var(--gs-color-bg);
}

.gs-hub-expert__bio {
  flex: 1;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.gs-block a.gs-hub-expert__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-weight: 600;
  font-size: 15px;
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-block a.gs-hub-expert__cta:hover,
.gs-block a.gs-hub-expert__cta:focus {
  color: var(--gs-color-accent);
}

/* LinkedIn rechtsboven in de kaart. De kop krijgt rechts ruimte, zodat een lange
   naam er niet onder doorloopt. */
.gs-hub-expert:has(.gs-hub-expert__linkedin) .gs-hub-expert__head {
  padding-right: 32px;
}

.gs-block a.gs-hub-expert__linkedin {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--gs-color-primary);
  color: var(--gs-color-bg);
  transition: background-color 0.2s, color 0.2s;
}

.gs-block a.gs-hub-expert__linkedin:hover,
.gs-block a.gs-hub-expert__linkedin:focus {
  background-color: var(--gs-color-accent);
  color: var(--gs-color-primary);
}

.gs-hub-expert__linkedin svg {
  display: block;
}

.gs-hub-focus {
  background-color: var(--gs-color-primary);
  color: var(--gs-color-bg);
}

.gs-hub-focus__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  gap: 48px;
}

.gs-hub-focus__inner--single {
  grid-template-columns: minmax(0, 760px);
}

/* Op de donkere band: titel en eyebrow licht, edities wit. */
.gs-hub-focus.gs-block .gs-section-title,
.gs-hub-focus .gs-hub-lede,
.gs-hub-focus .gs-editions__title,
.gs-hub-focus .gs-editions__date {
  color: var(--gs-color-bg);
}

.gs-hub-focus.gs-block .gs-section-eyebrow {
  color: var(--gs-color-bg);
  opacity: 0.85;
}

.gs-hub-focus .gs-editions__item + .gs-editions__item {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.gs-hub-focus .gs-editions__link:hover .gs-editions__title,
.gs-hub-focus .gs-editions__link:focus .gs-editions__title {
  color: var(--gs-color-accent);
}

.gs-hub-focus .gs-editions__date {
  opacity: 0.75;
}

/* Het formulier staat op een witte kaart, zodat Gravity Forms met zijn eigen
   (lichte) opmaak leesbaar blijft. */
/* De kaart is licht, ook al staat ze in een band met .gs-on-dark: zet de donkere
   knopcontext (buttons.css) hier terug, anders worden label, rand en vlak van de
   verzendknop bij hover allemaal wit. `initial` maakt de property ongeldig, zodat
   de lichte terugvalwaarden weer gelden. */
.gs-hub-focus__form {
  --gs-btn-ink: initial;
  --gs-btn-paper: initial;
  --gs-btn-hover-dark: initial;
  padding: 28px;
  border-radius: 6px;
  background-color: var(--gs-color-bg);
  color: var(--gs-color-text);
}

.gs-block .gs-hub-focus__form h3 {
  margin: 0 0 8px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--gs-color-primary);
}

.gs-hub-focus__form > p {
  margin: 0 0 16px;
  font-size: 15px;
}

/* --- Nieuwsbriefformulier (Gravity Forms) ---------------------------------- */

/* Geldt voor elk Gravity Forms-formulier in de nieuwsbriefband (.gs-hub-focus), op
   veldtype en niet op veld-ID of CSS-klasse uit de formuliereditor. Zo hoeft er per
   site niets ingesteld te worden, welk formulier-ID er ook in site-config staat. Prefix met .gravity-theme, zodat deze regels winnen van
   theme.min.css van Gravity Forms (tot (0,4,0) met gf_list_2col). De verzendknop
   volgt de knopstandaard in css/buttons.css. */
.gs-hub-focus .gform_wrapper.gravity-theme .gform_fields {
  row-gap: 18px;
}

.gs-hub-focus .gform_wrapper.gravity-theme .gfield_label,
.gs-hub-focus .gform_wrapper.gravity-theme legend.gfield_label {
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--gs-color-text);
}

.gs-hub-focus .gform_wrapper.gravity-theme :is(input[type="text"], input[type="email"], select) {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--gs-color-line);
  border-radius: var(--gs-btn-radius);
  background-color: var(--gs-color-bg);
  font-size: 15px;
  color: var(--gs-color-text);
}

.gs-hub-focus .gform_wrapper.gravity-theme :is(input[type="text"], input[type="email"], select):focus {
  outline: none;
  border-color: var(--gs-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gs-color-primary) 16%, transparent);
}

/* Keuzevakken als kaartjes in een raster: twee kolommen waar het past, één op
   smalle schermen. Een veld met één keuze (Weekly E-Update) krijgt de hele breedte. */
.gs-hub-focus .gform_wrapper.gravity-theme .gfield--type-checkbox .gfield_checkbox {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gs-hub-focus .gform_wrapper.gravity-theme .gfield--type-checkbox .gchoice {
  position: relative;
  height: auto;
  margin: 0;
}

.gs-hub-focus .gform_wrapper.gravity-theme .gfield--type-checkbox .gchoice:only-child {
  grid-column: 1 / -1;
}

/* Het echte vakje blijft bereikbaar met toetsenbord en schermlezer, maar is
   onzichtbaar; het label tekent het vakje met ::before. */
.gs-hub-focus .gform_wrapper.gravity-theme .gfield--type-checkbox .gfield-choice-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.gs-hub-focus .gform_wrapper.gravity-theme .gfield--type-checkbox .gfield-choice-input + label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: none;
  min-height: 46px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--gs-color-line);
  border-radius: var(--gs-btn-radius);
  background-color: var(--gs-color-bg);
  font-size: 14px;
  line-height: 1.3;
  color: var(--gs-color-text);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.gs-hub-focus .gform_wrapper.gravity-theme .gfield--type-checkbox .gfield-choice-input + label::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--gs-color-line);
  border-radius: 4px;
  background: var(--gs-color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  transition: background-color 0.15s, border-color 0.15s;
}

.gs-hub-focus .gform_wrapper.gravity-theme .gfield--type-checkbox .gfield-choice-input + label:hover {
  border-color: var(--gs-color-primary);
}

.gs-hub-focus .gform_wrapper.gravity-theme .gfield--type-checkbox .gfield-choice-input:checked + label {
  border-color: var(--gs-color-primary);
  background-color: color-mix(in srgb, var(--gs-color-primary) 8%, var(--gs-color-bg));
}

.gs-hub-focus .gform_wrapper.gravity-theme .gfield--type-checkbox .gfield-choice-input:checked + label::before {
  border-color: var(--gs-color-primary);
  background-color: var(--gs-color-primary);
}

.gs-hub-focus .gform_wrapper.gravity-theme .gfield--type-checkbox .gfield-choice-input:focus-visible + label {
  border-color: var(--gs-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gs-color-primary) 30%, transparent);
}

/* Toestemming: vakje en tekst naast elkaar, tekst iets rustiger. */
.gs-hub-focus .gform_wrapper.gravity-theme .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.gs-hub-focus .gform_wrapper.gravity-theme .ginput_container_consent input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--gs-color-primary);
}

.gs-hub-focus .gform_wrapper.gravity-theme .gfield_consent_label {
  max-width: none;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gs-color-text);
}

/* News: compacte inschrijving voor alleen de Weekly E-Update. Verborgen worden de
   dropdowns, tekstvelden en keuzevelden met meer dan één keuze (onderwerpen); een
   veld met één keuze (Weekly E-Update), e-mail, captcha en toestemming blijven.
   Op veldtype en niet op veld-ID, zodat het met elk formulier-ID werkt. Een
   verplicht veld blijft altijd zichtbaar, anders valt het formulier niet te
   versturen. Onder het formulier linkt "Also pick topics for the Thursday edition"
   naar de volledige aanmeldpagina. */
.gs-hub-page--news .gs-hub-focus .gform_wrapper.gravity-theme :is(.gfield--type-select, .gfield--type-text, .gfield--type-checkbox:has(.gchoice + .gchoice)):not(.gfield_contains_required) {
  display: none;
}

.gs-hub-focus__topics {
  margin: 14px 0 0;
  font-size: 15px;
}

.gs-block .gs-hub-focus__topics a {
  font-weight: 600;
  color: var(--gs-color-primary);
  text-decoration: underline;
}

.gs-block .gs-hub-focus__topics a:hover,
.gs-block .gs-hub-focus__topics a:focus {
  color: var(--gs-color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .gs-hub-focus .gform_wrapper.gravity-theme .gfield--type-checkbox .gfield-choice-input + label,
  .gs-hub-focus .gform_wrapper.gravity-theme .gfield--type-checkbox .gfield-choice-input + label::before {
    transition: none;
  }
}

/* --- Verwante zones en markten -------------------------------------------- */

.gs-hub-related__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.gs-block a.gs-hub-related__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--gs-color-line);
  border-radius: 6px;
  color: var(--gs-color-text);
  text-decoration: none;
  transition: border-color 0.2s ease-in-out;
}

.gs-block a.gs-hub-related__item:hover,
.gs-block a.gs-hub-related__item:focus {
  border-color: var(--gs-color-primary);
}

.gs-hub-related__item strong {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--gs-color-primary);
}

.gs-hub-related__item span {
  grid-column: 1;
  font-size: 14px;
  line-height: 1.4;
}

.gs-hub-related__item .gs-button__arrow {
  grid-row: 1 / span 2;
  grid-column: 2;
}

/* --- News: events en directory -------------------------------------------- */

.gs-hub-events__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gs-block a.gs-hub-event {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 14px 18px;
  border: 1px solid var(--gs-color-line);
  border-radius: 6px;
  color: var(--gs-color-primary);
  text-decoration: none;
  transition: border-color 0.2s ease-in-out;
}

.gs-block a.gs-hub-event:hover,
.gs-block a.gs-hub-event:focus {
  border-color: var(--gs-color-primary);
  color: var(--gs-color-accent);
}

.gs-hub-event__date {
  flex: none;
  width: 64px;
  padding: 8px 0;
  border-radius: 4px;
  background-color: var(--gs-color-bg-alt);
  color: var(--gs-color-primary);
  text-align: center;
}

.gs-hub-event__date strong {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 26px;
  line-height: 1;
}

.gs-hub-event__date span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  text-transform: uppercase;
}

.gs-hub-event__title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
}

.gs-hub-directory {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.gs-hub-directory p {
  margin: 0;
  max-width: 760px;
  font-size: 16px;
}

/* "See all editions" onder de Weekly E-Updates, op de donkere band. */
.gs-block a.gs-hub-focus__more {
  margin-top: 16px;
  color: var(--gs-color-bg);
}

.gs-block a.gs-hub-focus__more:hover,
.gs-block a.gs-hub-focus__more:focus {
  color: var(--gs-color-accent);
}

/* --- Banner --------------------------------------------------------------- */

.gs-hub-banner {
  text-align: center;
}

/* Altijd gecentreerd, welke groep er ook staat. AdRotate zet per groep eigen CSS in
   de <head>: groep 71/72 heeft `margin: 0 auto`, maar veel zone- en marktgroepen
   (bijv. 87) hebben `margin: 0` met max-width 970px en stonden daardoor links. Deze
   regel (0,2,0) wint van .g-87 (0,1,0). Breedte zoals bij .gs-eg-banner, voor
   groepen waarvoor AdRotate helemaal geen CSS schrijft. */
.gs-hub-banner .g {
  width: 100%;
  max-width: 970px;
  margin-right: auto;
  margin-left: auto;
}

/* max-width in plaats van width: een kleinere banner wordt niet opgerekt. */
.gs-hub-banner img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1199px) {
  .gs-hub-equipment .gs-eg-mfg-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .gs-hub-experts__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .gs-hub-hero__inner,
  .gs-hub-latest__top,
  .gs-hub-focus__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .gs-hub-grid,
  .gs-hub-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gs-hub-equipment .gs-eg-mfg-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .gs-hub-related__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .gs-blocks-canvas > .gs-hub-experts,
  .gs-blocks-canvas > .gs-hub-focus {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .gs-hub-experts__list,
  .gs-hub-grid,
  .gs-hub-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .gs-hub-equipment .gs-eg-mfg-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gs-block .gs-post-card--lead .gs-post-card__title {
    font-size: 24px;
  }

  .gs-post-card--row {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .gs-hub-focus__form {
    padding: 20px;
  }

  /* Tabellen worden kaarten: elke rij een blok, met de kolomnaam als label. */
  .gs-hub-guide__table thead {
    display: none;
  }

  .gs-hub-guide__table tr,
  .gs-hub-guide__table th,
  .gs-hub-guide__table td {
    display: block;
    width: auto;
  }

  .gs-hub-guide__table tbody tr {
    padding: 8px 0;
    border-bottom: 1px solid var(--gs-color-line);
  }

  .gs-hub-guide__table tbody tr:last-child {
    border-bottom: 0;
  }

  .gs-hub-guide__table th,
  .gs-hub-guide__table td {
    padding: 4px 16px;
    border-bottom: 0;
  }

  .gs-hub-guide__table tbody td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--gs-color-primary);
  }

  .gs-hub-guide__table tbody th {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-hub-fact,
  .gs-hub-related__item {
    transition: none;
  }
}

/* 17. Leverancierspagina (inc/supplier-profile/)
   --------------------------------------------------------------------------
   Eén template voor drie pakketten (gratis, Enhanced, Partner). Welke secties er
   staan bepaalt de PHP; hier staat alleen de opmaak. Kaarten, koppen, knoppen en
   het kruimelpad komen uit sectie 2 en css/buttons.css.

   Elke sectie is een directe child van het canvas en loopt over de volle breedte,
   zodat banden met een eigen achtergrond tot de rand gaan; .gs-sp-wrap zet de
   inhoud op --gs-container. Kleurritme: wit, lichtgrijs (video's, andere
   leveranciers), één donkere band (contact).
   ========================================================================== */

.gs-sp-page .gs-blocks-canvas {
  /* Sticky ankerbalk en zijbalk werken niet binnen overflow hidden; clip wel. */
  overflow-x: clip;
}

/* Koppen niet onder de vaste header en de ankerbalk laten verdwijnen. */
html:has(body.gs-sp-page) {
  scroll-padding-top: calc(var(--gs-header-height) + 72px);
}

.gs-blocks-canvas > .gs-sp-hero,
.gs-blocks-canvas > .gs-sp-anchors,
.gs-blocks-canvas > .gs-sp-body,
.gs-blocks-canvas > .gs-sp-section,
.gs-blocks-canvas > .gs-sp-contact {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.gs-sp-wrap {
  box-sizing: border-box;
  max-width: calc(var(--gs-container) + 48px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.gs-sp-muted {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: var(--gs-color-text);
}

.gs-sp-icon {
  flex: none;
  color: var(--gs-color-primary);
}

/* De Elementor-kit zet `.elementor-kit-… a:hover { font-weight: 500 }` (0,2,1) op
   elke link. Daardoor werd een link bij hover dunner en versprong de rij (de
   ankerbalk). Hier erft een link bij hover gewoon het gewicht van zijn ouder; links
   met een eigen gewicht krijgen dat van hun ouder mee (zie de ankerbalk). Knoppen
   hebben hun eigen regels in css/buttons.css. */
/* De kit zet ook in rust `.elementor-kit-… a { font-weight: 500 }`. Een link erft
   daarom in rust én bij hover het gewicht van zijn ouder; zo verandert er bij hover
   niets. :where houdt de rustregel licht (0,2,0): links met een eigen gewicht
   (.gs-block a.… (0,2,1)) houden dat. Die krijgen hieronder ook hun hover-regel. */
.gs-blocks-page .gs-sp :where(a:not(.gs-button)) {
  font-weight: inherit;
}

.gs-blocks-page .gs-sp :where(a:not(.gs-button)):is(:hover, :focus, :active) {
  font-weight: inherit;
}

/* Links met een eigen gewicht houden dat bij hover. Zelfde specificiteit als de
   regel hierboven; ze winnen omdat ze erna staan. */
.gs-blocks-page .gs-sp :is(a.gs-hub-head__more, a.gs-sp-office__map):is(:hover, :focus, :active) {
  font-weight: 600;
}

.gs-blocks-page .gs-sp a.gs-sp-event__title:is(:hover, :focus, :active) {
  font-weight: 700;
}

/* Eén soort vlak voor de kop, About, Products en de zijbalk: een zweem van de
   hoofdkleur (het "lichte blauw" uit het ontwerp), dezelfde rand en binnenruimte.
   Afgeleid van de token, dus per site in de eigen kleur. */
.gs-sp-panel,
.gs-sp-about,
.gs-sp-products,
.gs-sp-details {
  box-sizing: border-box;
  padding: 28px;
  border: 1px solid var(--gs-color-line);
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--gs-color-primary) 5%, var(--gs-color-bg));
}

/* Sectiekop met filter of link rechts. */
.gs-sp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 24px;
}

.gs-block .gs-sp-head .gs-section-title {
  margin: 0;
}

.gs-sp-section {
  padding-top: 0;
}

.gs-sp-section--soft,
.gs-sp-contact {
  padding-top: 56px;
  padding-bottom: 56px;
}

.gs-sp-section--soft {
  background-color: var(--gs-color-bg-alt);
}

/* Twee banden met een eigen achtergrond sluiten op elkaar aan. */
.gs-blocks-page .gs-blocks-canvas > .gs-sp-contact + .gs-sp-section--soft,
.gs-blocks-page .gs-blocks-canvas > .gs-sp-section--soft + .gs-sp-contact {
  margin-top: 0;
}

/* --- Kaarten en chips ------------------------------------------------------ */

.gs-sp-card {
  display: block;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid var(--gs-color-line);
  border-radius: 4px;
  background-color: var(--gs-color-bg);
  color: var(--gs-color-text);
}

.gs-block .gs-sp-card__title {
  margin: 0 0 12px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
}

.gs-block .gs-sp-card__title a {
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-sp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gs-block .gs-sp-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 12px;
  border: 1px solid var(--gs-color-line);
  border-radius: 4px;
  background-color: var(--gs-color-bg);
  font-size: 14px;
  line-height: 1.3;
  color: var(--gs-color-primary);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.gs-block a.gs-sp-chip:hover,
.gs-block a.gs-sp-chip:focus {
  border-color: var(--gs-color-primary);
}

/* --- 1. Kop --------------------------------------------------------------- */

.gs-sp-hero {
  padding-top: 20px;
}

/* Het kruimelpad is standaard licht (voor de gekleurde paginakop); deze kop is wit. */
.gs-sp-hero .gs-breadcrumbs ol {
  color: var(--gs-color-text);
}

.gs-sp-hero__grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: center;
  gap: 40px;
}

.gs-sp-hero__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  aspect-ratio: 1;
  padding: 20px;
  border: 1px solid var(--gs-color-line);
  border-radius: 4px;
  background-color: var(--gs-color-bg);
}

.gs-sp-hero__logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.gs-sp-hero__initials {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 64px;
  letter-spacing: 0.02em;
  color: var(--gs-color-primary);
}

/* Geen logo: tegel in de hoofdkleur met witte initialen. */
.gs-sp-hero__logo--empty {
  border-color: var(--gs-color-primary);
  background-color: var(--gs-color-primary);
}

.gs-sp-hero__logo--empty .gs-sp-hero__initials {
  color: var(--gs-color-bg);
}

/* Partner met bedrijfsvideo: de video als derde kolom in de kop. */
.gs-sp-hero__grid--video {
  grid-template-columns: 160px minmax(0, 1fr) minmax(0, 440px);
}

.gs-sp-hero__video {
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--gs-color-primary);
}

.gs-sp-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 10px;
}

.gs-sp-hero__eyebrow {
  font-size: 15px;
  font-weight: 600;
  color: var(--gs-color-primary);
}

.gs-sp-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* Partner: tekst op het accent via de knoplabel-token, net als de knoppen (op
   TextilesInside wit, elders de hoofdkleur). Nooit een vaste kleur. */
.gs-sp-badge--partner {
  background-color: var(--gs-color-accent);
  color: var(--gs-btn-accent-label);
}

.gs-sp-badge--enhanced {
  background-color: var(--gs-color-primary);
  color: var(--gs-color-bg);
}

.gs-block h1.gs-sp-hero__title {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  color: var(--gs-color-primary);
}

.gs-sp-hero__tagline {
  max-width: 48em;
  margin: 12px 0 0;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.45;
  color: var(--gs-color-text);
}

.gs-sp-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--gs-color-text);
}

.gs-sp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.gs-sp-hero__claim {
  margin: 14px 0 0;
  font-size: 14px;
}

.gs-block .gs-sp-hero__claim a {
  color: var(--gs-color-primary);
}

/* --- 2. Ankernavigatie ------------------------------------------------------ */

.gs-blocks-page .gs-blocks-canvas > .gs-sp-anchors {
  position: sticky;
  top: var(--gs-header-height);
  z-index: 5;
  margin-top: 32px;
  border-top: 1px solid var(--gs-color-line);
  border-bottom: 1px solid var(--gs-color-line);
  background-color: var(--gs-color-bg);
}

.admin-bar .gs-blocks-canvas > .gs-sp-anchors {
  top: calc(var(--gs-header-height) + 32px);
}

.gs-sp-anchors__inner {
  display: flex;
  align-items: center;
  gap: 0;
  height: 56px;
}

.gs-sp-anchors__list {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 56px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  white-space: nowrap;
  scrollbar-width: none;
}

/* Compacte kop: logo + naam en de knop schuiven in als de grote kop uit beeld is.
   Tot dan nemen ze geen ruimte in en zijn ze niet bereikbaar (visibility). */
.gs-sp-anchors__brand,
.gs-sp-anchors__cta {
  display: flex;
  flex: none;
  align-items: center;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-width 0.25s ease, opacity 0.2s ease, visibility 0.25s;
}

.gs-sp-anchors.is-condensed .gs-sp-anchors__brand,
.gs-sp-anchors.is-condensed .gs-sp-anchors__cta {
  opacity: 1;
  visibility: visible;
}

.gs-sp-anchors.is-condensed .gs-sp-anchors__brand {
  max-width: 320px;
  margin-right: 32px;
}

.gs-sp-anchors.is-condensed .gs-sp-anchors__cta {
  max-width: 320px;
  margin-left: 24px;
}

.gs-block a.gs-sp-anchors__brand {
  gap: 10px;
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-sp-anchors__logo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: 3px;
  border: 1px solid var(--gs-color-line);
  border-radius: 4px;
  background-color: var(--gs-color-bg);
}

.gs-block .gs-sp-anchors__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.gs-sp-anchors__logo--empty {
  border-color: var(--gs-color-primary);
  background-color: var(--gs-color-primary);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--gs-color-bg);
}

.gs-sp-anchors__name {
  overflow: hidden;
  max-width: 220px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gs-sp-anchors__cta .gs-button {
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .gs-sp-anchors__brand,
  .gs-sp-anchors__cta {
    display: none;
  }
}

.gs-block .gs-sp-anchors__list a {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: inherit;
  font-size: 17px;
  letter-spacing: 0.03em;
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-block .gs-sp-anchors__list a {
  display: inline-flex;
  align-items: center;
  height: 56px;
  white-space: nowrap;
  box-sizing: border-box;
  border-bottom: 3px solid transparent;
  padding-top: 3px;
}

.gs-block .gs-sp-anchors__list a:hover,
.gs-block .gs-sp-anchors__list a:focus {
  text-decoration: none;
  border-bottom-color: var(--gs-color-line);
}

/* Het onderdeel dat in beeld is (supplier-profile.js). */
.gs-block .gs-sp-anchors__list a[aria-current="true"] {
  border-bottom-color: var(--gs-color-accent);
}

/* --- 3. About, producten en zijbalk ---------------------------------------- */

.gs-sp-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: 56px;
}

.gs-sp-body__main {
  display: flex;
  flex-direction: column;
  gap: 48px;
  min-width: 0;
}

.gs-sp-prose {
  font-size: 17px;
  line-height: 1.6;
}

.gs-sp-prose > :first-child {
  margin-top: 0;
}

.gs-sp-prose p {
  margin: 0 0 14px;
}

/* Koppen in de bedrijfstekst krijgen de stijl van de sectiekop (About …), welke
   kop de leverancier ook heeft gebruikt. Iets kleiner, zodat de volgorde klopt. */
.gs-block .gs-sp-prose :is(h1, h2, h3, h4, h5, h6),
.gs-block .gs-sp-history summary {
  margin: 28px 0 12px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--gs-color-text);
}

.gs-sp-prose strong,
.gs-sp-prose b {
  font-weight: 600;
}

.gs-sp-history {
  margin-top: 14px;
}

.gs-block .gs-sp-history summary {
  margin-bottom: 0;
  cursor: pointer;
}

.gs-sp-history[open] summary {
  margin-bottom: 12px;
}

.gs-sp-products__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.gs-sp-aside {
  position: sticky;
  top: calc(var(--gs-header-height) + 80px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gs-sp-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* De kop zelf komt uit .gs-section-title (sectie 2), net als About en Products. */
.gs-block .gs-sp-details__title {
  margin: 0;
}

.gs-sp-details .gs-sp-collapse__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gs-sp-details .gs-sp-collapse__body[hidden] {
  display: none;
}

.gs-sp-details dl {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.gs-sp-details dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--gs-color-text);
}

.gs-sp-details dd {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.5;
}

.gs-sp-details dd .gs-sp-chips {
  margin-top: 4px;
}

.gs-block .gs-sp-details dd a {
  color: var(--gs-color-primary);
}

.gs-sp-socials {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gs-sp-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gs-color-line);
  border-radius: 4px;
  background-color: var(--gs-color-bg);
}

.gs-sp-verified {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  color: var(--gs-color-text);
}

/* --- Artikelen, video's, events -------------------------------------------- */

.gs-sp-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gs-sp-filter[hidden] {
  display: none;
}

.gs-block .gs-sp-filter button {
  min-height: 36px;
  padding: 6px 13px;
  border: 1px solid var(--gs-color-line);
  border-radius: 4px;
  background-color: var(--gs-color-bg);
  font: inherit;
  font-size: 14px;
  color: var(--gs-color-primary);
  cursor: pointer;
}

.gs-block .gs-sp-filter button[aria-pressed="true"] {
  border-color: var(--gs-color-primary);
  background-color: var(--gs-color-primary);
  color: var(--gs-color-bg);
}

.gs-sp-articles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}

/* Compacte kaart: klein beeld links, type en datum, titel. */
.gs-sp-article.gs-post-card--row {
  grid-template-columns: 120px minmax(0, 1fr);
  height: 100%;
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid var(--gs-color-line);
  border-radius: 4px;
  background-color: var(--gs-color-bg);
  transition: border-color 0.15s ease;
}

.gs-sp-article.gs-post-card--row:hover,
.gs-sp-article.gs-post-card--row:focus-within {
  border-color: var(--gs-color-primary);
}

.gs-sp-article .gs-post-card__image {
  aspect-ratio: 4 / 3;
  border: 0;
}

.gs-sp-article .gs-post-card__meta {
  margin-bottom: 4px;
  font-size: 13px;
}

.gs-block .gs-sp-article .gs-post-card__title {
  font-size: 18px;
  line-height: 1.25;
}

.gs-sp-articles > div {
  min-width: 0;
}

.gs-sp-articles > [hidden],
.gs-sp-docs__list > [hidden] {
  display: none;
}

.gs-sp-more {
  margin-top: 32px;
  text-align: center;
}

.gs-sp-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}

.gs-sp-split > :only-child {
  grid-column: 1 / -1;
}

.gs-sp-split--wide {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.gs-sp-split__side {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.gs-sp-videos__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Videotegel: beeld 16:9 met donker verloop, titel in wit erop, afspeelknop in de
   accentkleur. Op .gs-block genest om de linkkleuren van de kit te winnen. */
.gs-block a.gs-sp-video {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--gs-color-primary);
  color: var(--gs-color-bg);
  text-decoration: none;
}

.gs-sp-video__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
}

.gs-sp-video__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-sp-video__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.78) 100%);
}

/* Kleine afspeelknop linksboven, zodat hij nooit over datum en titel valt. Bij
   hover alleen een kleurwissel, geen beweging. */
.gs-sp-video__play {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--gs-color-accent);
  color: var(--gs-btn-accent-label);
  transition: background-color 0.15s ease;
}

.gs-sp-video__play svg {
  width: 18px;
  height: 18px;
}

.gs-block a.gs-sp-video:is(:hover, :focus) .gs-sp-video__play {
  background-color: var(--gs-color-bg);
}

.gs-sp-video__body {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
}

.gs-sp-video__date {
  font-size: 13px;
  opacity: 0.85;
}

.gs-sp-video__title {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
}

/* YouTube eerst als plaatje met knop (supplier-profile.js laadt de speler na een klik). */
.gs-block .gs-sp-yt {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background-color: var(--gs-color-primary);
  cursor: pointer;
}

.gs-sp-yt img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-sp-yt .gs-sp-video__play {
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
}

.gs-block .gs-sp-yt:is(:hover, :focus-visible) .gs-sp-video__play {
  background-color: var(--gs-color-bg);
}

.gs-sp-embed iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

.gs-sp-events__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gs-sp-event {
  display: flex;
  align-items: center;
  gap: 16px;
}

.gs-sp-event__date {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 4px;
  background-color: var(--gs-color-primary);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  line-height: 1;
  color: var(--gs-color-bg);
}

.gs-sp-event__date strong {
  font-size: 24px;
}

.gs-sp-event__date span {
  font-size: 14px;
  text-transform: uppercase;
}

.gs-block a.gs-sp-event__title {
  font-weight: 700;
  font-size: 17px;
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-sp-expert {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-top: 3px solid var(--gs-color-accent);
}

.gs-sp-expert__head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.gs-sp-expert__who {
  flex: 1 1 auto;
  min-width: 0;
}

.gs-sp-expert__photo {
  flex: none;
  width: 80px;
  height: 80px;
  border: 3px solid var(--gs-color-bg);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--gs-color-line);
  object-fit: cover;
}

.gs-sp-expert__photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-color: var(--gs-color-primary);
  font-weight: 700;
  font-size: 24px;
  color: var(--gs-color-bg);
}

.gs-sp-expert__name {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--gs-color-primary);
}

.gs-sp-expert__linkedin {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--gs-color-line);
  border-radius: 4px;
}

.gs-sp-expert__bio {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.gs-sp-expert .gs-button {
  align-self: flex-start;
}

/* De kleine knop onder de naam is alleen voor mobiel. */
.gs-sp-expert__ask-sm {
  display: none;
}

/* --- Galerij (Partner) ------------------------------------------------------ */

.gs-sp-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Het eerste beeld groot: twee kolommen en twee rijen breed. */
.gs-sp-gallery > li:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.gs-sp-gallery__item {
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--gs-color-bg-alt);
}

.gs-sp-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: opacity 0.15s ease;
}

.gs-sp-gallery__item:is(:hover, :focus-visible) img {
  opacity: 0.85;
}

.gs-sp-lightbox {
  max-width: min(1100px, 94vw);
  padding: 0;
  border: 0;
  border-radius: 4px;
  background-color: var(--gs-color-text);
  color: var(--gs-color-bg);
}

.gs-sp-lightbox::backdrop {
  background-color: color-mix(in srgb, var(--gs-color-text) 85%, transparent);
}

.gs-sp-lightbox figure {
  margin: 0;
}

.gs-sp-lightbox img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  margin: 0 auto;
}

.gs-sp-lightbox figcaption {
  padding: 10px 16px;
  font-size: 14px;
}

.gs-block .gs-sp-lightbox button {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--gs-color-text) 70%, transparent);
  font-size: 28px;
  line-height: 1;
  color: var(--gs-color-bg);
  cursor: pointer;
}

.gs-block .gs-sp-lightbox button[hidden] {
  display: none;
}

.gs-block .gs-sp-lightbox .gs-sp-lightbox__close {
  top: 10px;
  right: 10px;
}

.gs-block .gs-sp-lightbox .gs-sp-lightbox__prev {
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.gs-block .gs-sp-lightbox .gs-sp-lightbox__next {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

/* --- Documentatie ----------------------------------------------------------- */

.gs-sp-docs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gs-block a.gs-sp-doc {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.gs-block a.gs-sp-doc:hover,
.gs-block a.gs-sp-doc:focus {
  border-color: var(--gs-color-primary);
}

.gs-sp-doc strong {
  display: block;
  color: var(--gs-color-primary);
}

.gs-sp-download {
  margin: 0 0 24px;
  padding: 24px;
  border: 2px solid var(--gs-color-primary);
  border-radius: 4px;
}

.gs-block .gs-sp-download__title {
  margin: 0 0 6px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 24px;
  color: var(--gs-color-primary);
}

/* --- Contact ---------------------------------------------------------------- */

.gs-sp-contact {
  background-color: var(--gs-color-primary);
  color: var(--gs-color-bg);
}

.gs-sp-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 56px;
}

.gs-sp-contact__offices {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.gs-block.gs-sp-contact .gs-section-title {
  color: var(--gs-color-bg);
}

.gs-sp-office {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  line-height: 1.5;
}

.gs-sp-office strong {
  font-size: 17px;
}

.gs-block a.gs-sp-office__map {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
}

.gs-sp-office.is-current strong::after {
  content: " \25CF";
  color: var(--gs-color-accent);
}

/* Kaart: eerst een knop; na de klik de OpenStreetMap-embed. */
.gs-sp-map {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 160px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--gs-color-bg) 30%, transparent);
  border-radius: 4px;
}

.gs-sp-map[hidden] {
  display: none;
}

.gs-sp-map.is-loaded {
  padding: 0;
  border: 0;
  overflow: hidden;
}

.gs-sp-map iframe {
  display: block;
  width: 100%;
  height: 280px;
  border: 0;
}

.gs-block .gs-sp-map__load {
  padding: 10px 18px;
  border: 2px solid var(--gs-color-bg);
  border-radius: 4px;
  background-color: transparent;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gs-color-bg);
  cursor: pointer;
}

.gs-block .gs-sp-map__load:is(:hover, :focus-visible) {
  background-color: var(--gs-color-bg);
  color: var(--gs-color-primary);
}

.gs-sp-map__note {
  margin: 0;
  font-size: 13px;
  opacity: 0.85;
}

.gs-block .gs-sp-office a {
  color: var(--gs-color-bg);
}

.gs-sp-form {
  padding: 28px 28px 24px;
  border-radius: 4px;
  background-color: var(--gs-color-bg);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--gs-color-text) 22%, transparent);
  color: var(--gs-color-text);
}

/* Compacte velden: het label alleen voor schermlezers (de placeholder toont het al),
   een zacht vlak met een dunne rand, en bij focus wit met een rand in de hoofdkleur.
   Specifieker dan de gravity-theme-regels van Gravity Forms. */
.gs-sp-form .gform_wrapper.gravity-theme .gfield_label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.gs-sp-form .gform_wrapper.gravity-theme :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
  box-sizing: border-box;
  height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--gs-color-line);
  border-radius: 4px;
  background-color: var(--gs-color-bg-alt);
  font-size: 15px;
  line-height: 1.4;
  color: var(--gs-color-text);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gs-sp-form .gform_wrapper.gravity-theme :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select):focus {
  border-color: var(--gs-color-primary);
  background-color: var(--gs-color-bg);
}

.gs-sp-form .gform_wrapper.gravity-theme ::placeholder {
  color: color-mix(in srgb, var(--gs-color-text) 60%, transparent);
  opacity: 1;
}

/* reCAPTCHA iets kleiner; de ruimte eromheen schaalt mee. */
.gs-sp-form .gform_wrapper.gravity-theme .ginput_recaptcha {
  height: 66px;
  transform: scale(0.85);
  transform-origin: 0 0;
}

.gs-sp-form .gform_wrapper.gravity-theme .gform_footer {
  margin: 4px 0 0;
  padding: 0;
}

.gs-block .gs-sp-form__title {
  margin: 0 0 16px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 24px;
  line-height: 1.15;
  color: var(--gs-color-primary);
}

/* De Elementor-kit maakt de tekst van elk consentveld site-breed wit, met de
   hoogste voorrang op het veld zelf (bedoeld voor een donkere achtergrond). Dit
   formulier staat op een witte kaart. Een kleur op het label zelf wint van de
   geërfde witte. */
.gs-sp-form .gform_wrapper .gfield--type-consent label {
  color: var(--gs-color-text);
}

/* Compacter formulier: minder ruimte tussen de velden, een lager berichtveld en
   het vooringevulde onderwerp (alleen-lezen) niet in beeld; het gaat wel mee. */
.gs-sp-form .gform_wrapper.gravity-theme .gform_fields {
  row-gap: 10px;
  column-gap: 12px;
}

/*
 * Velden die het profiel zelf al toont (de privacyzin, het onderwerp): verborgen via
 * de eigen class gs-sp-hide, die in Gravity Forms bij het veld staat (Uiterlijk →
 * Aangepaste CSS-class). Zo bepaalt het formulier welk veld weg mag, niet het veldtype.
 */
.gs-sp-form .gform_wrapper.gravity-theme .gfield.gs-sp-hide {
  display: none;
}

/* Gravity Forms zet `.gfield textarea.medium` op 192px (0,4,1); deze regel is zwaarder. */
.gs-sp-form .gform_wrapper.gravity-theme .gfield textarea.textarea {
  height: 96px;
  min-height: 0;
  resize: vertical;
}

.gs-sp-form .gform_wrapper.gravity-theme .gform_footer {
  margin-top: 8px;
  padding-top: 0;
}

/* Bevestiging na een aanvraag (gs_sp_lead_confirmation in de plugin). */
.gs-sp-thanks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  outline: none;
}

.gs-sp-thanks__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--gs-color-accent);
  color: var(--gs-btn-accent-label);
}

.gs-block .gs-sp-thanks__title {
  margin: 6px 0 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  color: var(--gs-color-primary);
}

.gs-sp-thanks__lead {
  margin: 0;
  font-size: 17px;
}

.gs-sp-thanks__next {
  margin: 12px 0 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--gs-color-text);
}

/* Genummerde stappen met de cijfers in rondjes. */
.gs-sp-thanks__steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: gs-sp-stap;
}

.gs-sp-thanks__steps li {
  position: relative;
  min-height: 28px;
  padding-left: 42px;
  font-size: 15px;
  line-height: 1.5;
  counter-increment: gs-sp-stap;
}

.gs-sp-thanks__steps li::before {
  content: counter(gs-sp-stap);
  position: absolute;
  top: -1px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--gs-color-primary);
  font-weight: 700;
  font-size: 14px;
  color: var(--gs-color-bg);
}

.gs-sp-thanks__note {
  margin: 8px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--gs-color-line);
  font-size: 14px;
}

/* De vaste privacyregel hoort bij het formulier; na verzenden niet meer tonen. */
.gs-sp-form:has(.gs-sp-thanks) .gs-sp-form__privacy,
.gs-sp-form:has(.gs-sp-thanks) .gs-sp-form__title {
  display: none;
}

.gs-sp-form__privacy {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--gs-color-text);
}

.gs-block .gs-sp-form__privacy a {
  color: var(--gs-color-primary);
}

/* --- Andere leveranciers en upgrade ----------------------------------------- */

.gs-sp-others {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gs-block a.gs-sp-other {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  text-decoration: none;
}

.gs-block a.gs-sp-other:hover strong,
.gs-block a.gs-sp-other:focus strong {
  text-decoration: underline;
}

.gs-sp-other strong {
  display: block;
  color: var(--gs-color-primary);
}

.gs-sp-other__logo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
}

.gs-sp-other__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: var(--gs-color-primary);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--gs-color-bg);
}

.gs-sp-other__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.gs-sp-upgrade {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  border: 2px solid var(--gs-color-accent);
  border-radius: 4px;
}

.gs-block .gs-sp-upgrade .gs-section-title {
  margin: 0 0 6px;
}

.gs-sp-upgrade p {
  margin: 0;
  color: var(--gs-color-text);
}

/* --- Vaste aanvraagknop op mobiel ------------------------------------------- */

.gs-sp-sticky {
  display: none;
}

/* De knop is het laatste element van het canvas, maar staat vast. Hij krijgt geen
   marge van het verticale ritme (die tilde hem 56px op); het blok ervoor krijgt de
   ondermarge die bij het einde van de pagina hoort (sectie 1). */
.gs-blocks-page .gs-blocks-canvas > .gs-sp-sticky {
  margin: 0;
}

.gs-blocks-page .gs-blocks-canvas > :has(+ .gs-sp-sticky:last-child) {
  margin-bottom: 41px;
}

@media (max-width: 767px) {
  .gs-blocks-page .gs-blocks-canvas > :has(+ .gs-sp-sticky:last-child) {
    margin-bottom: 56px;
  }
}

/* --- Interactie: hover, focus en active ------------------------------------
   Drie bronnen buiten dit bestand grijpen in op elke knop en link:
     - de Elementor-kit: `button:hover` (donker vlak, radius 0, rand 1px) en
       `a:hover` (accentkleur, gewicht 500);
     - hello-elementor/reset.css: `[type=button]:focus` (witte tekst op roze) en
       `a:active` (donkerpaars);
     - de gedeelde artikelkaart: titel in de accentkleur bij hover.
   Volgens de knopstandaard blijft de vorm bij elke toestand gelijk, is oranje nooit
   tekstkleur en verandert het gewicht niet. Daarom zet dit blok per element de
   toestanden hover, focus en active expliciet. De focusring zelf komt uit
   buttons.css (navy, wit op donker). Alles onder .gs-blocks-page .gs-sp genest, zodat
   het van de kit (0,2,1) en de reset wint, zonder voorrangsvlag. */

/* Knoppen die geen .gs-button zijn: de rusttoestand vasthouden. */
.gs-blocks-page .gs-sp .gs-sp-collapse__toggle:is(:hover, :focus, :active) {
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  text-decoration: none;
}

.gs-blocks-page .gs-sp .gs-sp-collapse__toggle:is(:hover, :focus-visible) .gs-sp-collapse__icon {
  border-color: var(--gs-color-primary);
}

.gs-blocks-page .gs-sp .gs-sp-filter button:is(:hover, :focus, :active) {
  border: 1px solid var(--gs-color-primary);
  border-radius: 4px;
  background-color: var(--gs-color-bg);
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-blocks-page .gs-sp .gs-sp-filter button[aria-pressed="true"]:is(:hover, :focus, :active) {
  background-color: var(--gs-color-primary);
  color: var(--gs-color-bg);
}

.gs-blocks-page .gs-sp .gs-sp-map__load:is(:hover, :focus, :active) {
  border: 2px solid var(--gs-color-bg);
  border-radius: 4px;
  background-color: var(--gs-color-bg);
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-blocks-page .gs-sp .gs-sp-yt:is(:hover, :focus, :active) {
  border: 0;
  border-radius: 4px;
  background-color: var(--gs-color-primary);
  color: inherit;
}

.gs-blocks-page .gs-sp .gs-sp-lightbox button:is(:hover, :focus, :active) {
  border: 0;
  border-radius: 50%;
  background-color: var(--gs-color-text);
  color: var(--gs-color-bg);
}

.gs-sp-filter button,
.gs-sp-map__load,
.gs-sp-collapse__icon {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Tekstlinks: hoofdkleur met onderstreping, nooit de accentkleur. */
.gs-blocks-page .gs-sp :is(.gs-sp-details, .gs-sp-hero__claim, .gs-sp-events, .gs-sp-card__title, .gs-sp-prose) a:not(.gs-button):is(:hover, :focus, :active),
.gs-blocks-page .gs-sp .gs-post-card__title a:is(:hover, :focus, :active),
.gs-blocks-page .gs-sp a.gs-hub-head__more:is(:hover, :focus, :active) {
  color: var(--gs-color-primary);
  text-decoration: underline;
}

/* Links die een vlak zijn (chip, kaart, tegel): kleur blijft, alleen de rand of de
   titel geeft de hover aan. */
.gs-blocks-page .gs-sp a.gs-sp-chip:is(:hover, :focus, :active),
.gs-blocks-page .gs-sp .gs-sp-anchors__list a:is(:hover, :focus, :active),
.gs-blocks-page .gs-sp a.gs-sp-anchors__brand:is(:hover, :focus, :active),
.gs-blocks-page .gs-sp .gs-sp-socials a:is(:hover, :focus, :active),
.gs-blocks-page .gs-sp a.gs-sp-expert__linkedin:is(:hover, :focus, :active) {
  color: var(--gs-color-primary);
  text-decoration: none;
}

.gs-blocks-page .gs-sp .gs-sp-socials a:is(:hover, :focus-visible),
.gs-blocks-page .gs-sp a.gs-sp-expert__linkedin:is(:hover, :focus-visible) {
  border-color: var(--gs-color-primary);
}

.gs-blocks-page .gs-sp :is(a.gs-sp-doc, a.gs-sp-other):is(:hover, :focus, :active) {
  color: var(--gs-color-text);
  text-decoration: none;
}

.gs-blocks-page .gs-sp a.gs-sp-other:is(:hover, :focus-visible) {
  border-color: var(--gs-color-primary);
}

.gs-blocks-page .gs-sp a.gs-sp-video:is(:hover, :focus, :active) {
  color: var(--gs-color-bg);
  text-decoration: none;
}

.gs-blocks-page .gs-sp a.gs-sp-video:is(:hover, :focus-visible) .gs-sp-video__title {
  text-decoration: underline;
}

/* Rustkleuren: de kit geeft links de lichtblauwe linkkleur (contrast 2,9:1 op wit,
   te laag). Tekstlinks en iconen in de hoofdkleur. */
.gs-blocks-page .gs-sp .gs-sp-prose a,
.gs-blocks-page .gs-sp .gs-sp-socials a {
  color: var(--gs-color-primary);
}

.gs-blocks-page .gs-sp .gs-sp-prose a {
  text-decoration: underline;
}

/* Kruimelpad (zoals het ontwerp): links in de hoofdkleur, de huidige pagina in de
   tekstkleur. Bij hover onderstreept, nooit de accentkleur. */
.gs-blocks-page .gs-sp-hero .gs-breadcrumbs a {
  color: var(--gs-color-primary);
  opacity: 1;
}

.gs-blocks-page .gs-sp-hero .gs-breadcrumbs a:is(:hover, :focus, :active) {
  color: var(--gs-color-primary);
  text-decoration: underline;
  opacity: 1;
}

/* Op de donkere contactband: wit blijft wit. */
.gs-blocks-page .gs-sp .gs-sp-contact__offices a:is(:hover, :focus, :active) {
  color: var(--gs-color-bg);
  text-decoration: underline;
}

/* Toestemming (nieuwsbrief) in het aanvraagformulier: consent-afspraak, 18px vakje
   en 13,5px tekst naast elkaar. */
.gs-sp-form .gform_wrapper.gravity-theme .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.gs-sp-form .gform_wrapper.gravity-theme .ginput_container_consent input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--gs-color-primary);
}

.gs-sp-form .gform_wrapper.gravity-theme .gfield--type-consent .gfield_consent_label {
  max-width: none;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .gs-sp-filter button,
  .gs-sp-map__load,
  .gs-sp-collapse__icon {
    transition: none;
  }
}

/* --- Responsive ------------------------------------------------------------- */

@media (max-width: 1024px) {
  .gs-sp-body__grid,
  .gs-sp-contact__grid,
  .gs-sp-split,
  .gs-sp-split--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .gs-sp-aside {
    position: static;
  }

  .gs-sp-hero__grid--video {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .gs-sp-hero__video {
    grid-column: 1 / -1;
  }

  .gs-sp-articles {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .gs-blocks-page .gs-blocks-canvas > .gs-sp-anchors {
    top: var(--gs-header-height-mobile);
  }

  .admin-bar .gs-blocks-canvas > .gs-sp-anchors {
    top: calc(var(--gs-header-height-mobile) + 46px);
  }

  .gs-sp-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Knoppen met een lange tekst ("All articles by Vortex Global Limited") blijven
     binnen het scherm en lopen zo nodig over twee regels. */
  .gs-blocks-page .gs-sp .gs-button {
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
  }

  /* Uitklapbare blokken (supplier-profile.js maakt van de kop een knop). */
  /* white-space: normal, want de reset van het thema zet knoppen op nowrap: een
     lange bedrijfsnaam ("About Vortex Global Limited") liep dan buiten beeld. */
  .gs-block .gs-sp-collapse__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
  }

  .gs-sp-collapse__icon {
    position: relative;
    flex: none;
    width: 28px;
    height: 28px;
    border: 1px solid var(--gs-color-line);
    border-radius: 50%;
    background-color: var(--gs-color-bg);
  }

  .gs-sp-collapse__icon::before,
  .gs-sp-collapse__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    border-radius: 1px;
    transform: translate(-50%, -50%);
    background-color: var(--gs-color-primary);
  }

  .gs-sp-collapse__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Open: de plus wordt een min. */
  [data-gs-sp-collapse].is-open .gs-sp-collapse__icon::after {
    display: none;
  }

  /* Het hidden-attribuut moet winnen van de display van het blok zelf (grid, flex). */
  .gs-sp [data-gs-sp-collapse] .gs-sp-collapse__body[hidden] {
    display: none;
  }

  /* De kop over de volle breedte, zodat de plus rechts staat. */
  /* Ook als het blok zelf .gs-block is (Contact): beide schrijfwijzen. */
  :is(.gs-block [data-gs-sp-collapse], .gs-block[data-gs-sp-collapse]) .gs-sp-head .gs-section-title {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Artikelen op mobiel: alleen tekst (type, datum, titel), zonder beeld. */
  .gs-sp-article.gs-post-card--row {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 14px;
  }

  .gs-sp-article .gs-post-card__image {
    display: none;
  }

  .gs-block .gs-sp-article .gs-post-card__title {
    font-size: 17px;
  }

  .gs-sp-articles {
    gap: 8px;
  }

  /* Expert op mobiel: alleen foto en naam. */
  /* Specifieker dan de knopstandaard (buttons.css laadt na dit bestand). De grote
     knop en de bio weg; de kleine knop onder de naam erbij. */
  .gs-sp-expert .gs-sp-expert__bio,
  .gs-block .gs-sp-expert > .gs-button {
    display: none;
  }

  .gs-sp-expert__ask-sm {
    display: block;
    margin-top: 8px;
  }

  .gs-sp-expert {
    gap: 0;
    padding: 14px 16px;
  }

  .gs-sp-expert__photo {
    width: 56px;
    height: 56px;
  }

  /* Contact: dicht een smalle band, open met de vestigingen en het formulier. */
  .gs-sp-contact:not(.is-open) {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .gs-sp-contact .gs-sp-head {
    margin-bottom: 16px;
  }

  /* Dicht: geen ruimte onder de kop. */
  [data-gs-sp-collapse]:not(.is-open) .gs-sp-head {
    margin-bottom: 0;
  }

  .gs-sp-about,
  .gs-sp-products,
  .gs-sp-details {
    padding: 16px 18px;
  }

  .gs-sp-body__main {
    gap: 12px;
  }

  .gs-sp-body__grid {
    gap: 12px;
  }

  .gs-sp-aside {
    gap: 12px;
  }

  .gs-sp-section--soft,
  .gs-sp-contact {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media (max-width: 680px) {
  /* Mobiel: links onder elkaar het label, de badge en de naam, rechts daarvan het
     logo; daaronder tagline, feiten, knoppen en video over de volle breedte. De
     hoofdkolom doet niet mee als vak (display: contents), zodat zijn onderdelen zelf
     in het raster van de kop staan. */
  .gs-sp-hero__grid,
  .gs-sp-hero__grid--video {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "kicker logo"
      "title  logo"
      "rest   rest";
    align-items: start;
    gap: 0 14px;
  }

  .gs-sp-hero__main {
    display: contents;
  }

  .gs-sp-hero__logo {
    grid-area: logo;
    align-self: center;
    width: 104px;
    height: 80px;
    aspect-ratio: auto;
    padding: 8px 10px;
  }

  .gs-sp-hero__kicker {
    grid-area: kicker;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 6px;
  }

  .gs-block h1.gs-sp-hero__title {
    grid-area: title;
    align-self: start;
  }

  .gs-sp-hero__tagline,
  .gs-sp-hero__facts,
  .gs-sp-hero__actions,
  .gs-sp-hero__claim,
  .gs-sp-hero__video {
    grid-column: 1 / -1;
  }

  .gs-sp-hero__video {
    margin-top: 16px;
  }

  .gs-sp-hero__actions .gs-button {
    flex: 1 1 100%;
    justify-content: center;
  }

  .gs-sp-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gs-sp-products__grid,
  .gs-sp-articles,
  .gs-sp-videos__grid,
  .gs-sp-docs__list,
  .gs-sp-others {
    grid-template-columns: minmax(0, 1fr);
  }

  .gs-sp-form {
    padding: 20px 18px;
  }

  .gs-sp-panel,
  .gs-sp-about,
  .gs-sp-products {
    padding: 18px;
  }

  .gs-sp-hero__initials {
    font-size: 36px;
  }

  /* Boven een eventuele vaste balk van de site (zoekbalk); supplier-profile.js meet
     die hoogte. */
  .gs-sp-sticky {
    position: fixed;
    right: 0;
    bottom: var(--gs-sp-sticky-offset, 0px);
    left: 0;
    z-index: 100;
    display: block;
    /* De veilige zone onderin (iPhone) alleen als er geen balk onder de knop staat. */
    padding: 12px 16px max(12px, calc(12px + env(safe-area-inset-bottom, 0px) - var(--gs-sp-sticky-offset, 0px)));
    border-top: 1px solid var(--gs-color-line);
    background-color: var(--gs-color-bg);
  }

  /* Met script: pas zichtbaar als de knoppen in de kop uit beeld zijn. */
  .gs-sp-sticky.is-managed {
    transition: transform 0.2s ease, visibility 0.2s;
  }

  .gs-sp-sticky.is-managed:not(.is-visible) {
    visibility: hidden;
    transform: translateY(110%);
  }

  .gs-sp-sticky .gs-button {
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
  }

  /* Ruimte onder de footer, zodat de vaste knop niets afdekt. */
  body.gs-sp-page:has(.gs-sp-sticky) {
    padding-bottom: calc(80px + var(--gs-sp-sticky-offset, 0px) + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 600px) {
  .admin-bar .gs-blocks-canvas > .gs-sp-anchors {
    top: var(--gs-header-height-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-sp-form .gform_wrapper.gravity-theme :is(input, textarea, select),
  .gs-sp-sticky.is-managed,
  .gs-sp-anchors__brand,
  .gs-sp-anchors__cta,
  .gs-sp-video__play,
  .gs-sp-article.gs-post-card--row,
  .gs-block .gs-sp-chip,
  .gs-block a.gs-sp-doc {
    transition: none;
  }
}