/* ==========================================================================
   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
   ========================================================================== */

/* 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. Gedeeld door meerdere blokken.

   De Elementor Kit zet `.elementor-kit-143664 a` (0,1,1) en `a:hover` (0,2,1).
   Vandaar dubbele classes: .gs-button.gs-button--primary is (0,2,0) en de
   hover-variant (0,3,0) — beide winnen op specificiteit, zonder !important. */
.gs-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 54px 8px 30px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
}

/* Kleine variant uit het design system: 16px tekst en minder padding. */
.gs-button.gs-button--sm {
  padding: 6px 34px 6px 16px;
  font-size: 16px;
}

/* Pijl mee verkleinen in verhouding tot de tekst: 24 x (16/20) = 19px. */
.gs-button.gs-button--sm .gs-button__arrow {
  width: 19px;
  height: 19px;
}

/* Het ontwerp plaatst de pijl op top:8px; gecentreerd is hetzelfde resultaat maar
   blijft kloppen als de knophoogte ooit verandert — ook bij de kleine variant. */
.gs-button .gs-button__arrow {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  fill: currentColor;
}

.gs-button.gs-button--primary {
  background-color: var(--gs-color-primary);
  border-color: var(--gs-color-primary);
  color: #fff;
}

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

.gs-button.gs-button--accent {
  background-color: var(--gs-color-accent);
  border-color: var(--gs-color-accent);
  color: #fff;
}

.gs-button.gs-button--accent:hover,
.gs-button.gs-button--accent:focus {
  background-color: #fff;
  color: var(--gs-color-accent);
}

.gs-button.gs-button--outline {
  background-color: transparent;
  border-color: var(--gs-color-accent);
  color: var(--gs-color-accent);
}

.gs-button.gs-button--outline:hover,
.gs-button.gs-button--outline:focus {
  background-color: var(--gs-color-accent);
  color: #fff;
}

/* 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;
}

/* 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;
}

/* 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. */
.gs-block-category-browser__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.gs-block-category-browser button.gs-block-category-browser__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 {
  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 {
  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. */
.gs-block-category-browser__default,
.gs-block-category-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 {
  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 {
    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 {
    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;
}

/* --- Producten + fabrikanten per product ---------------------------------- */

.gs-eg-products__layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
}

.gs-eg-products button.gs-eg-products__item {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 8px;
  padding: 14px 16px;
  border: 1px solid #dedede;
  border-radius: 4px;
  background-color: #fff;
  font-family: "Barlow", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  text-transform: none;
  /* Lange productnamen mogen over twee regels; white-space expliciet omdat een
	   nowrap van een bovenliggend element anders de tekst uit de knop duwt. */
  white-space: normal;
  overflow-wrap: break-word;
  color: #000;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* :focus moet hier expliciet bij. De Elementor Kit styleert `button:focus` met een
   zwarte achtergrond én `border-radius: 0`, en die focus blijft na een klik staan —
   dat gaf de vreemde hover en de verdwenen ronding. Daarom staat de radius ook in
   elke interactiestaat opnieuw. */
.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 {
  border: 1px solid var(--gs-color-primary);
  border-radius: 4px;
  outline: none;
  background-color: #fff;
  color: #000;
}

.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 {
  border: 1px solid var(--gs-color-primary);
  border-radius: 4px;
  background-color: var(--gs-color-primary);
  color: #fff;
}

/* 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.

   translateY(100%) zet het paneel precies onder de tegel; overflow: hidden op
   .gs-eg-mfg knipt het weg tot het naar boven schuift.

   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(100%);
  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: 991px) {
  .gs-eg-products__layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .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-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;
  }
}