.elementor-kit-4{--e-global-color-primary:#B20D35;--e-global-color-secondary:#2E2A2B;--e-global-color-text:#211E1F;--e-global-color-accent:#FDDA04;--e-global-color-rooddonker:#960B30;--e-global-color-petrol:#7DAEB5;--e-global-color-petroldonker:#699DA4;--e-global-color-geeldonker:#FCD002;--e-global-color-terracotta:#DD775D;--e-global-color-terracottadonker:#D3634A;--e-global-color-crme:#F2EFE9;--e-global-typography-primary-font-family:"Onest";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Onest";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Onest";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Onest";--e-global-typography-accent-font-weight:600;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:899px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   Warenhuis Post — huisstijl en opmaak
   Kleuren gemeten uit Instaposts_2.pdf · lettertype: Onest

   Let op: alle regels beginnen met  body .elementor
   Dat is nodig omdat Elementor zijn eigen basisopmaak (base-desktop.css)
   ná deze stylesheet inlaadt, met .elementor-kit-4s als .elementor .e-div-block-base.
   Het extra "body" ervoor maakt onze regel zwaarder, zodat die wint.
   ============================================================ */

:root {
  --rood:              #B20D35;
  --rood-donker:       #960B30;
  --petrol:            #7DAEB5;
  --petrol-donker:     #699DA4;
  --geel:              #FDDA04;
  --geel-donker:       #FCD002;
  --terracotta:        #DD775D;
  --terracotta-donker: #D3634A;
  --antraciet:         #2E2A2B;
  --antraciet-donker:  #211E1F;
  --creme:             #F2EFE9;
  --streep:            10px;
  --pad:               20px;
}

body {
  background: var(--creme);
  color: var(--antraciet-donker);
  letter-spacing: -0.011em;
}


/* ============================================================
   Streeppatroon
   Zet op een sectie twee klassen: "streep" plus een kleur,
   bijvoorbeeld: streep s-petrol
   ============================================================ */

body .elementor .streep {
  background-image: repeating-linear-gradient(180deg,
    var(--td) 0 calc(var(--streep) / 2),
    var(--tl) calc(var(--streep) / 2) var(--streep));
}

body .elementor .s-petrol    { --tl: var(--petrol);     --td: var(--petrol-donker);     color: var(--antraciet-donker); }
body .elementor .s-geel      { --tl: var(--geel);       --td: var(--geel-donker);       color: var(--antraciet-donker); }
body .elementor .s-terra     { --tl: var(--terracotta); --td: var(--terracotta-donker); color: var(--antraciet-donker); }
body .elementor .s-rood      { --tl: var(--rood);       --td: var(--rood-donker);       color: #fff; }
body .elementor .s-antraciet { --tl: var(--antraciet);  --td: var(--antraciet-donker);  color: var(--creme); }


/* ============================================================
   Opbouw van een pagina
   sectie = een horizontale baan  ·  wrap = de inhoud daarbinnen
   ============================================================ */

body .elementor .sectie {
  display: block;
  padding: 56px 0;
}

body .elementor .wrap {
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* .split zet de padding weer op nul; voor een blok dat ook .wrap is
   willen we die zijkantruimte houden, anders plakt de inhoud op een
   smal scherm tegen de rand. */
body .elementor .wrap.split { padding: 0 var(--pad); }

body .elementor .kolom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0;
}


/* ---------- koppen en tekst ---------- */

body .elementor .sectie h1,
body .elementor .sectie h2,
body .elementor .sectie h3 {
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0 0 14px;
  font-weight: 800;
}

body .elementor .sectie h1 { font-size: clamp(33px, 8vw, 60px); }
body .elementor .sectie h2 { font-size: clamp(27px, 6.4vw, 42px); }
body .elementor .sectie h3 { font-size: clamp(20px, 4.6vw, 26px); font-weight: 700; letter-spacing: -0.03em; }

body .elementor .sectie p {
  margin: 0 0 16px;
  max-width: 62ch;
  line-height: 1.55;
}

body .elementor .lead {
  font-size: clamp(17px, 4vw, 20px);
  font-weight: 400;
  opacity: .92;
}

body .elementor .label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
  margin: 0 0 8px;
}

body .elementor .mini { font-size: 14px; opacity: .7; }


/* ---------- paginakop ---------- */

body .elementor .paginakop { padding: 52px 0 46px; }


/* ============================================================
   Knoppen
   knop + een variant: k-primair (rood), k-secundair (lijn),
   k-licht (crème, voor op een gekleurde baan)
   ============================================================ */

body .elementor .knoppen {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 0;
}

body .elementor .knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  letter-spacing: -0.01em;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  width: auto;
}

body .elementor .k-primair   { background: var(--rood);  color: #fff; }
body .elementor .k-secundair { background: transparent;  color: var(--antraciet-donker); box-shadow: inset 0 0 0 2px currentColor; }
body .elementor .k-licht     { background: var(--creme); color: var(--antraciet-donker); }

body .elementor .knop:hover  { opacity: .9; }


/* ============================================================
   Openingstijden-baan
   ============================================================ */

body .elementor .open-strip .wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

body .elementor .open-kop {
  font-size: clamp(23px, 5.6vw, 31px);
  font-weight: 800;
  margin: 0 0 4px;
}

body .elementor .open-sub { margin: 0; font-size: 15.5px; opacity: .85; }


/* ============================================================
   Contact — adres, openingstijden, kaart
   ============================================================ */

body .elementor .split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 0;
}

body .elementor .adres     { font-size: 17px; margin-bottom: 6px; }
/* Het telefoonnummer en het e-mailadres zijn klikbare links. Elementor
   maakt daar knoppen van, dus die opmaak zetten we hier weer terug naar
   gewone tekst. */
body .elementor .tekstlink {
  display: inline-block;
  width: auto;
  min-height: 0;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}
body .elementor a.tekstlink:hover { text-decoration: underline; }

body .elementor .tijden {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 10px 0 18px;
  padding: 0;
}

/* De openingstijden staan in het midden van hun kolom - de tabel zelf
   wordt niet breder, hij krijgt alleen aan beide kanten evenveel lucht.
   Onder de 900px staat de kolom onder de kaart; ook daar blijft de tabel
   even breed als op desktop en gewoon gecentreerd. */
body .elementor .split > .kolom:nth-child(2) { align-items: center; }
body .elementor .tijden { margin: 10px auto 18px; }

/* Afwijkende dagen (feestdagen en dergelijke) onder de tabel. Staat er
   niets gepland, dan verbergt het scriptje dit blokje vanzelf. */
/* Een dag die deze week afwijkt van de gewone week: we zetten hem in
   het rood met een sterretje, en onderaan staat waarom. */
body .elementor .tijden .rij.afwijkend .tijd,
body .elementor .tijden .ster {
  color: var(--rood);
  font-weight: 600;
}
body .elementor .tijden .ster { margin-left: 3px; }
body .elementor .tijden-anders .ster { color: var(--rood); font-weight: 700; }
body .elementor .let-op { color: var(--rood); font-weight: 600; }

body .elementor .tijden-anders {
  max-width: 340px;
  margin: 0 auto 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(33, 30, 31, .06);
}
body .elementor .tijden-anders p {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.45;
}
body .elementor .tijden-anders p:last-child { margin-bottom: 0; }
/* de shortcode zit in een omhulsel van Elementor; dat mag geen
   extra marge onder de tabel zetten */
body .elementor .elementor-widget-shortcode { margin-bottom: 0; }

body .elementor .rij {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(33, 30, 31, .12);
}

body .elementor .dag  { margin: 0; font-size: 15.5px; }
body .elementor .tijd { margin: 0; font-size: 15.5px; font-variant-numeric: tabular-nums; }

body .elementor .kaart {
  display: block;
  background: #fff;
  border-radius: 18px;
  padding: 26px 22px;
  border: 1px solid rgba(33, 30, 31, .08);
}


/* ============================================================
   Waardenblokken (bereikbaarheid, waarom langskomen)
   ============================================================ */

body .elementor .waarden {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 24px;
  padding: 0;
}

body .elementor .waarde    { display: block; border-top: 3px solid var(--rood); padding: 14px 0 0; }
body .elementor .waarde h3 { font-size: 19px; margin: 0 0 6px; }
body .elementor .waarde p  { font-size: 15.5px; margin: 0; opacity: .85; }

body .elementor .waarden-midden          { text-align: center; justify-content: center; }
body .elementor .waarden-midden .waarde  { border-top: 0; padding-top: 0; }
body .elementor .waarden-midden .waarde h3 { position: relative; padding-top: 18px; }
body .elementor .waarden-midden .waarde h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 3px;
  background: var(--rood);
}
body .elementor .waarden-midden p { margin-left: auto; margin-right: auto; max-width: 32ch; }


/* ============================================================
   Vanaf 900px: desktopindeling
   ============================================================ */

@media (min-width: 900px) {

  :root { --pad: 32px; }

  body .elementor .sectie    { padding: 88px 0; }
  body .elementor .paginakop { padding: 76px 0 64px; }

  body .elementor .open-strip .wrap {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
  }

  body .elementor .split { grid-template-columns: 1fr 1fr; align-items: center; gap: 46px; }

  body .elementor .kaart { padding: 40px; }

  body .elementor .waarden        { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  body .elementor .waarden-midden { grid-template-columns: repeat(auto-fit, minmax(240px, 330px)); gap: 56px; }
}


/* ============================================================
   Voettekst (Theme Builder-sjabloon "Voettekst Warenhuis Post")
   ============================================================ */

body .elementor .voet {
  display: block;
  padding: 44px 0 30px;
  color: var(--creme);
}

body .elementor .fgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 0;
}

body .elementor .fkolom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0;
}

body .elementor .flogo,
body .elementor .flogo img {
  width: auto;
  height: 66px;
  margin: 0 0 14px;
}

body .elementor .fkop {
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .6;
  margin: 0 0 12px;
  font-weight: 600;
  line-height: 1.3;
}

body .elementor .ftekst {
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0 0 6px;
  opacity: .92;
  max-width: 40ch;
}

/* ---------- links in de voettekst ---------- */

body .elementor .flinks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 0;
}

body .elementor .flink {
  display: inline-block;
  width: auto;
  text-align: left;   /* Elementor centreert knoppen; deze zijn gewone regels */
  min-height: 0;
  padding: 0;
  margin: 0 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--creme);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  white-space: normal;
}

body .elementor .flink:hover { text-decoration: underline; opacity: 1; }

body .elementor .k-wit-outline {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75);
}

/* ---------- pictogrammen ---------- */

body .elementor .wa::before {
  content: "";
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  background: currentColor;
  -webkit-mask: center / 19px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 14.4c-.3-.1-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-1.7-.9-2.9-1.6-4-3.5-.3-.5.3-.5.9-1.6.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5 1.9.8 2.6.9 3.5.8.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3zM12 2a10 10 0 00-8.6 15L2 22l5.1-1.3A10 10 0 1012 2zm0 18.2c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3 .8.8-3-.2-.3A8.2 8.2 0 1112 20.2z'/%3E%3C/svg%3E");
          mask: center / 19px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 14.4c-.3-.1-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-1.7-.9-2.9-1.6-4-3.5-.3-.5.3-.5.9-1.6.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5 1.9.8 2.6.9 3.5.8.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3zM12 2a10 10 0 00-8.6 15L2 22l5.1-1.3A10 10 0 1012 2zm0 18.2c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3 .8.8-3-.2-.3A8.2 8.2 0 1112 20.2z'/%3E%3C/svg%3E");
}

body .elementor .soc {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 16px;
  padding: 0;
}

body .elementor .soc-knop {
  position: relative;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--creme);
  box-shadow: inset 0 0 0 2px rgba(242, 239, 233, .35);
  overflow: hidden;
  text-indent: -999px;   /* tekst blijft voor schermlezers, maar valt buiten beeld */
}

body .elementor .soc-knop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
}

body .elementor .soc-instagram::after {
  -webkit-mask: center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.05 1.8.25 2.2.42.6.22 1 .48 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c0 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2 0-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c0-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 3.1a6.7 6.7 0 100 13.4 6.7 6.7 0 000-13.4zm0 11a4.3 4.3 0 110-8.6 4.3 4.3 0 010 8.6zm8.5-11.3a1.6 1.6 0 11-3.1 0 1.6 1.6 0 013.1 0z'/%3E%3C/svg%3E");
          mask: center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.05 1.8.25 2.2.42.6.22 1 .48 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c0 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2 0-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c0-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 3.1a6.7 6.7 0 100 13.4 6.7 6.7 0 000-13.4zm0 11a4.3 4.3 0 110-8.6 4.3 4.3 0 010 8.6zm8.5-11.3a1.6 1.6 0 11-3.1 0 1.6 1.6 0 013.1 0z'/%3E%3C/svg%3E");
}

body .elementor .soc-facebook::after {
  -webkit-mask: center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12a10 10 0 10-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0022 12z'/%3E%3C/svg%3E");
          mask: center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12a10 10 0 10-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0022 12z'/%3E%3C/svg%3E");
}

/* ---------- onderste balk ---------- */

body .elementor .fbalk {
  display: block;
  border-top: 1px solid rgba(242, 239, 233, .18);
  margin-top: 30px;
  padding-top: 18px;
}

body .elementor .fbalk p { margin: 0; font-size: 13.5px; opacity: .66; }

/* ---------- de derde kolom: "Even contact?" ----------
   De eigen marges van de onderdelen zijn hier uitgezet, zodat
   alleen de gap de ruimte bepaalt. Anders tellen marge en gap bij
   elkaar op en wordt de kolom onnodig hoog. */

body .elementor .fgrid > .fkolom:nth-child(3) > * { margin: 0; }

/* "Even contact?" schikt zich in rijen: het kopje en de tweede
   tekstregel nemen de volle breedte, de rest komt naast elkaar.
   Zo sluiten de social-iconen netjes aan tegen de knop ernaast.
   Volgorde van de onderdelen in het sjabloon:
   1 kopje - 2 WhatsApp-knop - 3 tekst - 4 knop - 5 iconen */
body .elementor .fgrid > .fkolom:nth-child(3) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 16px;
}
body .elementor .fgrid > .fkolom:nth-child(3) > .fkop,
body .elementor .fgrid > .fkolom:nth-child(3) > .ftekst:nth-child(3) {
  flex: 0 0 100%;
  width: 100%;
  max-width: none;   /* anders schuift de knop Inschrijven ernaast */
}
/* Elementor geeft blokken standaard width:100%; dat moet eraf,
   anders neemt elke knoppenrij de volle breedte in */
body .elementor .fgrid > .fkolom:nth-child(3) > .knoppen,
body .elementor .fgrid > .fkolom:nth-child(3) > .soc {
  flex: 0 0 auto;
  width: auto;
}


@media (min-width: 900px) {
  body .elementor .voet  { padding: 60px 0 34px; }

  body .elementor .fgrid {
    /* de contactkolom is het breedst, zodat de tekst naast de knop past */
    grid-template-columns: 1.25fr .95fr 1.6fr;
    gap: 48px;
    /* de drie kolommen eindigen onderaan op dezelfde lijn;
       het logo mag daardoor bovenaan uitsteken */
    align-items: end;
  }

  /* het menu en "Even contact?" lijnen allebei boven uit, zodat hun
     kopjes op dezelfde hoogte staan; de logokolom blijft onderaan */
  body .elementor .fgrid > .fkolom:nth-child(2),
  body .elementor .fgrid > .fkolom:nth-child(3)         { align-self: start; }
  body .elementor .fgrid > .fkolom:nth-child(2) .flinks { gap: 16px; }


}


/* ============================================================
   Kop (Theme Builder-sjabloon "Kop Warenhuis Post")
   Het menu is het WordPress-menu "Hoofdmenu"; onder 900px
   klapt Elementor het vanzelf in tot een hamburger.
   ============================================================ */

/* De kop zit in een omhulsel van Elementor dat precies even hoog is
   als de kop zelf. Een sticky element kan alleen binnen zijn eigen
   omhulsel schuiven, dus zetten we dat omhulsel vast in plaats van
   de kop zelf. */
/* --- randen van de browser --- */
/* Op een telefoon loopt de pagina door achter de statusbalk en de
   knoppenbalk van Safari. Die randen krijgen de kleur van het doek.
   Zetten we het doek op antraciet, dan sluit de onderrand aan op de
   voettekst; de bovenrand blijft creme doordat de kop daar plakt. */
html { background: var(--antraciet); }
body { background: var(--creme); }

body header.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Ben je ingelogd, dan staat de beheerbalk van WordPress vast bovenaan.
   De kop moet daar dan onder blijven hangen in plaats van eronder te
   verdwijnen. Onder 600px scrollt die balk gewoon mee, dus daar niet. */
body.admin-bar header.elementor-location-header { top: 32px; }
@media screen and (max-width: 782px) {
  /* Op een telefoon willen we de kop strak tegen de bovenkant. De
     beheerbalk scrollt daar gewoon mee, dus er valt niets onder weg. */
  body header.elementor-location-header,
  body.admin-bar header.elementor-location-header { top: 0; }
}

body .elementor .kop {
  display: block;
  padding: 0;
  background: var(--creme);
  border-bottom: 1px solid rgba(33, 30, 31, .10);
}

body .elementor .navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  height: 64px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

body .elementor .navbar > a {          /* de link om het logo heen */
  flex: 0 0 auto;
  display: block;
  width: auto;
  height: 46px;
}

body .elementor .logo {
  flex: 0 0 auto;
  height: 46px;
  width: auto;
  margin: 0;
}

/* volgorde op mobiel: logo · knoppen · hamburger */
body .elementor .navknoppen {
  order: 2;
  flex: 0 0 auto;
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 0;
}

body .elementor .hoofdnav {
  order: 3;
  flex: 0 0 auto;
  position: static;   /* zodat het uitklapmenu zich richt op de kop, niet op het widget */
}

body .elementor .navbar { position: static; }

/* ---------- ronde pictogramknoppen ---------- */

body .elementor .icoonknop {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--rood);
  color: #fff;
  overflow: hidden;
  text-indent: -999px;   /* tekst blijft voor schermlezers, maar valt buiten beeld */
}

body .elementor .icoonknop.alt {
  background: transparent;
  color: var(--antraciet-donker);
  box-shadow: inset 0 0 0 2px rgba(33, 30, 31, .22);
}

body .elementor .icoonknop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
}

body .elementor .ico-wa::after {
  -webkit-mask: center / 21px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 14.4c-.3-.1-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-1.7-.9-2.9-1.6-4-3.5-.3-.5.3-.5.9-1.6.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5 1.9.8 2.6.9 3.5.8.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3zM12 2a10 10 0 00-8.6 15L2 22l5.1-1.3A10 10 0 1012 2zm0 18.2c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3 .8.8-3-.2-.3A8.2 8.2 0 1112 20.2z'/%3E%3C/svg%3E");
          mask: center / 21px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 14.4c-.3-.1-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-1.7-.9-2.9-1.6-4-3.5-.3-.5.3-.5.9-1.6.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5 1.9.8 2.6.9 3.5.8.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3zM12 2a10 10 0 00-8.6 15L2 22l5.1-1.3A10 10 0 1012 2zm0 18.2c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3 .8.8-3-.2-.3A8.2 8.2 0 1112 20.2z'/%3E%3C/svg%3E");
}

body .elementor .ico-route::after {
  -webkit-mask: center / 21px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z'/%3E%3C/svg%3E");
          mask: center / 21px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z'/%3E%3C/svg%3E");
}

/* ---------- menu ---------- */

body .elementor .hoofdnav .elementor-nav-menu a {
  white-space: nowrap;
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.01em;
  color: var(--antraciet-donker);
  padding: 6px 0;
}

body .elementor .hoofdnav .elementor-nav-menu--main > ul { gap: 26px; }
body .elementor .hoofdnav .elementor-nav-menu a:hover,
body .elementor .hoofdnav .elementor-nav-menu a.elementor-item-active { color: var(--rood); }

/* geel plaatje "2026" achter 75 jaar */
/* De tweede .elementor-kit-4 is nodig om Elementors eigen regel te verslaan:
   .elementor-item:not(:hover):not(:focus):not(.elementor-item-active)::after { opacity: 0 } */
body .elementor .hoofdnav a[href$="/75-jaar/"]::after,
body .elementor .hoofdnav a[href$="/75-jaar/"]:not(:hover):not(:focus):not(.elementor-item-active):not(.highlighted)::after {
  content: "2026";
  /* Elementor gebruikt ::after zelf voor het onderstreep-effect;
     daarom zetten we positie en afmeting hier expliciet terug */
  position: static;
  width: auto;
  height: auto;
  transform: none;
  opacity: 1;
  display: inline-block;
  background: var(--geel);
  color: var(--antraciet-donker);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  padding: 2px 9px;
  border-radius: 999px;
  margin-left: 7px;
  vertical-align: 2px;
  letter-spacing: .02em;
}

/* hamburger en uitklapmenu */
body .elementor .hoofdnav .elementor-menu-toggle {
  background: transparent;
  color: var(--antraciet-donker);
  border-radius: 12px;
}

body .elementor .hoofdnav .elementor-nav-menu__container.elementor-nav-menu--dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--creme);
  border-top: 1px solid rgba(33, 30, 31, .08);
  box-shadow: 0 10px 24px rgba(33, 30, 31, .10);
}

body .elementor .hoofdnav .elementor-nav-menu--dropdown a {
  font-size: 19px;
  font-weight: 600;
  padding: 15px var(--pad);
  border-bottom: 1px solid rgba(33, 30, 31, .07);
  background: transparent;
  color: var(--antraciet-donker);
}

body .elementor .hoofdnav .elementor-nav-menu--dropdown a:hover,
body .elementor .hoofdnav .elementor-nav-menu--dropdown a.elementor-item-active {
  background: transparent;
  color: var(--rood);
}

@media (min-width: 900px) {
  body .elementor .navbar { height: 70px; }
  body .elementor .navbar > a { height: 48px; }
  body .elementor .logo       { height: 48px; }
  body .elementor .hoofdnav { order: 1; margin-left: 16px; }
}


/* ============================================================
   Voorpagina — hero
   Op mobiel: foto schermvullend met tekst eroverheen.
   Vanaf 900px: tekst links, foto rechts.
   ============================================================ */

body .elementor .hero { display: block; position: relative; padding: 0; }

body .elementor .hero-links { display: none; }

body .elementor .hero-video {
  display: block;
  position: relative;
  width: 100%;
  height: min(78vh, 178vw);
  overflow: hidden;
  background: #5c5654;
  padding: 0;
}

body .elementor .hero-video img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

body .elementor .hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .12) 40%, rgba(0, 0, 0, .72) 100%);
}

body .elementor .hero-tekst {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 var(--pad) 30px;
  color: #fff;
}

body .elementor .hero-tekst h1,
body .elementor .hero-links h1 {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0 0 14px;
}

body .elementor .hero-tekst h1 {
  font-size: clamp(31px, 8.4vw, 46px);
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

body .elementor .hero-tekst p {
  font-size: 17px;
  margin: 0 0 18px;
  max-width: 34ch;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

body .elementor .hero-tekst h1 span,
body .elementor .hero-links h1 span {
  display: block;
  font-size: .6em;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: .28em;
  opacity: .95;
}


/* ============================================================
   Assortimentskaarten
   ============================================================ */

body .elementor .groepen {
  display: grid;
  /* ook op een telefoon twee tegels naast elkaar */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
  padding: 0;
}

/* Een tegel is een foto met daaronder een kopje en een korte regel.
   De foto zit tegen de randen aan; de tekst heeft zijn eigen ruimte. */
body .elementor .groep {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  padding: 0 0 18px;
  border: 1px solid rgba(33, 30, 31, .08);
}

body .elementor .groep img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0 0 14px;
  border-radius: 0;
}

body .elementor .groep h3,
body .elementor .groep p {
  padding: 0 16px;
}

body .elementor .groep h3 { margin-bottom: 8px; }
body .elementor .groep p  { font-size: 15.5px; margin: 0; opacity: .82; line-height: 1.5; }

body .elementor .merklogo,
body .elementor .merklogo img { height: 38px; width: auto; margin: 14px 0 0; opacity: .95; }


/* ============================================================
   Instagram-berichten
   ============================================================ */

body .elementor .feed {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}

body .elementor .feed .instagram-media {
  margin: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 14px rgba(33, 30, 31, .10) !important;
}


/* ============================================================
   Redenen om langs te komen
   ============================================================ */

body .elementor .redenen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 26px;
  padding: 0;
}

body .elementor .reden {
  display: block;
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  border: 1px solid rgba(33, 30, 31, .08);
}

body .elementor .reden h3 { font-size: 17px; font-weight: 700; margin: 0 0 5px; }
body .elementor .reden p  { font-size: 14.5px; margin: 0; opacity: .8; line-height: 1.45; }

/* het nummer is ook een alinea, dus die krijgt zijn eigen marge terug */
body .elementor .reden p.rnr { margin: 0 0 16px; }

body .elementor .rnr {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--rood);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 16px;   /* wat meer lucht tussen het nummer en de kop */
  opacity: 1;
}


/* ============================================================
   Beelden met bijschrift
   ============================================================ */

body .elementor .figuur { display: block; padding: 0; }

body .elementor .beeld,
body .elementor .beeld img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

body .elementor .beeld,
body .elementor .beeld img { aspect-ratio: 4 / 3; object-fit: cover; }

body .elementor .bijschrift {
  font-size: 13.5px;
  opacity: .68;
  margin: 9px 0 0;
  line-height: 1.45;
  max-width: 46ch;
}

body .elementor .breedbeeld { display: block; margin: 26px 0 34px; padding: 0; }
body .elementor .breedbeeld img { width: 100%; height: auto; border-radius: 16px; }
body .elementor .breedbeeld .bijschrift { max-width: 60ch; }

body .elementor .archief {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 26px;
  padding: 0;
}
body .elementor .archief img { border-radius: 14px; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }

body .elementor .duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 26px;
  padding: 0;
}
body .elementor .duo img { border-radius: 14px; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }


/* ============================================================
   Collega's
   ============================================================ */

body .elementor .team {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 26px;
  padding: 0;
}

/* Met vier collega's staan ze op een telefoon netjes twee bij twee. */

body .elementor .persoon { display: block; padding: 0; }

body .elementor .pf,
body .elementor .pf img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 14px;
  margin: 0 0 9px;
}

body .elementor .pnaam { font-size: 16.5px; font-weight: 700; margin: 0; }
body .elementor .prol  { font-size: 14.5px; opacity: .75; margin: 0; }


/* ============================================================
   Kaartje met adres
   ============================================================ */

body .elementor .kaartlink {
  position: relative;
  display: block;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(33, 30, 31, .12);
}

body .elementor .kaartlink img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}

/* Het witte kaartje ligt over het plattegrondje heen. Adres links,
   knop rechts: zo blijft het kaartje laag en past het binnen de kaart. */
body .elementor .kaartlabel {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  width: auto;   /* Elementor zet blokken standaard op 100% breed; dat
                    maakte het kaartje te breed, waardoor het rechts
                    buiten het plattegrondje viel */
  background: var(--creme);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 2px 14px rgba(33, 30, 31, .16);
}

/* de knop in het kaartje is iets kleiner dan een gewone knop */
body .elementor .kaartlabel .knop {
  min-height: 40px;
  padding: 0 18px;
  font-size: 15px;
}

/* adres links, knop rechts - op elk formaat hetzelfde */
body .elementor .kaartlabel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 16px;
}
body .elementor .kaartlabel .kaartnaam   { grid-column: 1; grid-row: 1; }
body .elementor .kaartlabel .kaartplaats { grid-column: 1; grid-row: 2; }
body .elementor .kaartlabel .knop {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
}

body .elementor .kaartnaam   { font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; margin: 0; line-height: 1.25; }
body .elementor .kaartplaats { font-size: 15px; margin: 0; line-height: 1.35; }

body .elementor .kaartcta {
  display: inline-block;
  width: auto;
  min-height: 0;
  padding: 0;
  margin: 6px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rood);
  font-weight: 600;
  font-size: 14.5px;
}
body .elementor .kaartcta:hover { text-decoration: underline; opacity: 1; }


/* ============================================================
   Kleine hulpklassen
   ============================================================ */

body .elementor .strak  { padding-top: 0; }
body .elementor .midden { text-align: center; }
body .elementor .midden p        { margin-left: auto; margin-right: auto; }
body .elementor .midden .knoppen { justify-content: center; }
body .elementor .blokkop { max-width: 18ch; }

body .elementor .merk,
body .elementor .merk img { width: 120px; height: auto; margin: 0 0 22px; }

/* de gele openingstijdenbaan is bewust smaller dan een gewone sectie */
body .elementor .open-strip { padding: 26px 0; }


/* ============================================================
   Vanaf 900px
   ============================================================ */

@media (min-width: 900px) {

  body .elementor .hero {
    display: grid;
    grid-template-columns: 55fr 45fr;
    align-items: stretch;
    min-height: 84vh;
  }

  body .elementor .hero-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 48px 64px max(32px, calc((100vw - 1200px) / 2 + 32px));
  }

  body .elementor .hero-links h1 { font-size: clamp(40px, 4.4vw, 60px); color: var(--antraciet-donker); margin-bottom: 18px; }
  body .elementor .hero-links p  { font-size: 20px; opacity: .88; max-width: 26ch; margin-bottom: 26px; }

  body .elementor .hero-video { height: 100%; }
  body .elementor .hero-video::after { background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.20)); }
  body .elementor .hero-tekst { display: none; }

  body .elementor .groepen  { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  body .elementor .redenen  { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  body .elementor .feed     { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
  body .elementor .archief  { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  body .elementor .duo      { grid-template-columns: 1fr 1fr; gap: 30px; }

  body .elementor .team { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  body .elementor .team .persoon:first-child { grid-column: auto; }

  body .elementor .merk,
  body .elementor .merk img { width: 150px; }

  /* bij "omgekeerd" staat de foto rechts */
  body .elementor .omgekeerd > .figuur { order: 2; }
}


/* ---------- openingstijden: stip en de regel van vandaag ---------- */

body .elementor .stip {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #1B7A36;
  margin-right: 9px;
  vertical-align: 1px;
}
body .elementor .stip.dicht { background: var(--rood); }

body .elementor .rij.vandaag .dag,
body .elementor .rij.vandaag .tijd { font-weight: 700; }
body .elementor .rij.vandaag .dag::after {
  content: " · vandaag";
  font-weight: 500;
  opacity: .5;
  font-size: 13px;
}


/* ============================================================
   Tekstpagina (privacy & cookies en soortgelijke pagina's)
   ============================================================ */

body .elementor .tekstblok {
  display: block;
  max-width: 68ch;
  padding: 0;
}

body .elementor .tekstpagina h2 {
  font-size: clamp(22px, 4.6vw, 28px);
  margin: 44px 0 12px;
}

body .elementor .tekstpagina h3 {
  font-size: clamp(17px, 3.4vw, 20px);
  font-weight: 700;
  margin: 28px 0 8px;
}

body .elementor .tekstpagina p {
  font-size: 17px;
  line-height: 1.62;
  margin: 0 0 16px;
  max-width: 68ch;
}

body .elementor .tekstpagina .mini { margin-bottom: 28px; }
body .elementor .tekstpagina .knoppen { margin-top: 22px; }

/* ---------- onderste balk van de voettekst ---------- */

body .elementor .fbalk {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

body .elementor .voetlink {
  display: inline-block;
  width: auto;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--creme);
  font-size: 13.5px;
  font-weight: 400;
  opacity: .66;
  text-decoration: none;
}
body .elementor .voetlink:hover { text-decoration: underline; opacity: .9; }

/* de puntjes tussen de items staan als los tekstelement in de voettekst */
body .elementor .punt {
  margin: 0;
  opacity: .45;
  user-select: none;
}


/* ---------- inschrijfformulier (Piggy) ----------
   Het formulier wordt door een scriptje van Piggy rechtstreeks in de
   pagina getekend, dus niet meer in een iframe. Piggy levert kale HTML
   zonder opmaak; alles hieronder is dus onze eigen huisstijl.
   Let op: wat je in Piggy onder "Styling" instelt (kleuren, lettertype)
   doet hier niets meer - dat gold alleen voor de iframe-versie.
   De teksten en de velden zelf beheer je nog wel gewoon in Piggy. */

body .elementor .formulier {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 30px 26px 26px;
  border-radius: 18px;
  background: var(--creme);
  color: var(--antraciet-donker);
}

/* Piggy verbergt sommige velden met het kenmerk "hidden";
   die moeten verborgen blijven, ook nu wij de velden opmaken */
body .elementor .formulier [hidden] { display: none !important; }

/* de kop en de inleidende regel komen uit Piggy */
body .elementor .formulier form > div:first-child p {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.55;
}
body .elementor .formulier form > div:first-child p:first-child span {
  display: inline-block;
  margin-bottom: 4px;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* ieder veld zit in een eigen blokje */
body .elementor .formulier form > div { margin: 0 0 16px; }
body .elementor .formulier form > div:first-child { margin-bottom: 22px; }
body .elementor .formulier form > div:last-child { margin-bottom: 0; }

body .elementor .formulier label {
  display: block;
  margin: 0 0 6px;
  font-size: 14.5px;
  font-weight: 600;
}

/* een sterretje achter de verplichte velden */
body .elementor .formulier label:has(+ input[required])::after {
  content: " *";
  color: var(--rood);
  font-weight: 700;
}

body .elementor .formulier input[type="text"],
body .elementor .formulier input[type="email"],
body .elementor .formulier input[type="tel"],
body .elementor .formulier textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(33, 30, 31, .22);
  border-radius: 10px;
  background: #fff;
  color: var(--antraciet-donker);
  font: inherit;
  font-size: 16px;   /* 16px voorkomt dat een iPhone inzoomt bij het typen */
}
body .elementor .formulier input:focus,
body .elementor .formulier textarea:focus {
  outline: 2px solid var(--rood);
  outline-offset: 1px;
  border-color: transparent;
}

/* het vinkje voor sparen: hokje en tekst naast elkaar */
body .elementor .formulier input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  flex: 0 0 auto;
  accent-color: var(--rood);
  vertical-align: middle;
}
body .elementor .formulier input[type="checkbox"] + label {
  display: inline;
  margin: 0;
  font-weight: 400;
  font-size: 15.5px;
  vertical-align: middle;
}
body .elementor .formulier form > div:not([hidden]):has(> input[type="checkbox"]) {
  display: flex;
  align-items: center;
}

/* de verzendknop krijgt precies de vorm van de rode knoppen op de site */
body .elementor .formulier button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--rood);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background .15s ease;
}
body .elementor .formulier button[type="submit"]:hover {
  background: var(--rood-donker);
}

/* de knop staat rechts onderin het formulier */
body .elementor .formulier form > div:has(> button[type="submit"]) {
  display: flex;
  justify-content: flex-end;
}

/* Google's zwevende reCAPTCHA-badge is vervangen door het regeltje
   tekst hieronder. Dat mag van Google, mits die tekst er staat. */
body .elementor .formulier .grecaptcha-badge { visibility: hidden; }

body .elementor .formulier .captcha-regel {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  opacity: .6;
  text-align: right;
}
body .elementor .formulier .captcha-regel a {
  color: inherit;
  text-decoration: underline;
}

/* de vaste kop mag het formulier niet afdekken als je erheen springt */
body .elementor #inschrijven { scroll-margin-top: 80px; }
body .elementor #contactformulier { scroll-margin-top: 80px; }
body .elementor #kom-langs { scroll-margin-top: 80px; }


/* ============================================================
   Contactformulier (Elementor-formulier op de contactpagina)
   De opmaak volgt die van het inschrijfformulier hierboven,
   zodat beide formulieren er hetzelfde uitzien.
   ============================================================ */

/* Elementor zet zijn eigen widgets op max-width:100% met een zwaardere
   .elementor-kit-4; vandaar dat deze regel er net zo een gebruikt. */
body .elementor.elementor .e-con > .elementor-widget-form {
  max-width: 640px;
  margin-top: 26px;
}

body .elementor .elementor-field-group {
  margin-bottom: 16px;
  padding: 0;
}

body .elementor .elementor-field-label {
  margin: 0 0 6px;
  padding: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}

/* het sterretje achter een verplicht veld */
body .elementor .elementor-mark-required .elementor-field-label:after {
  color: var(--rood);
  font-weight: 700;
}

body .elementor .elementor-field-textual {
  width: 100%;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid rgba(33, 30, 31, .22);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 16px;   /* 16px voorkomt dat een iPhone inzoomt bij het typen */
  line-height: 1.45;
  box-shadow: none;
}
body .elementor textarea.elementor-field-textual {
  min-height: 150px;
  resize: vertical;
}
body .elementor .elementor-field-textual:focus {
  outline: 2px solid var(--rood);
  outline-offset: 1px;
  border-color: transparent;
  box-shadow: none;
}

/* de verzendknop krijgt de vorm van de rode knoppen op de site */
body .elementor .elementor-widget-form .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--rood);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background .15s ease;
}
body .elementor .elementor-widget-form .elementor-button:hover {
  background: var(--rood-donker);
}

/* meldingen na het versturen */
body .elementor .elementor-message {
  margin-top: 12px;
  font-size: 15.5px;
}

/* de vaste kop mag het formulier niet afdekken als je erheen springt */
body .elementor #contactformulier { scroll-margin-top: 80px; }


/* ---------- icoontjes in de social-knoppen ----------
   Deze regels kijken naar het adres van de knop, dus elke knop die
   naar Instagram of Facebook verwijst krijgt vanzelf het juiste
   icoontje. Je hoeft er geen klasse voor te zetten. */

body .elementor .knop[href*="instagram.com"]::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: currentColor;
    -webkit-mask: center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.05 1.8.25 2.2.42.6.22 1 .48 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c0 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2 0-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c0-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 3.1a6.7 6.7 0 100 13.4 6.7 6.7 0 000-13.4zm0 11a4.3 4.3 0 110-8.6 4.3 4.3 0 010 8.6zm8.5-11.3a1.6 1.6 0 11-3.1 0 1.6 1.6 0 013.1 0z'/%3E%3C/svg%3E");
            mask: center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.05 1.8.25 2.2.42.6.22 1 .48 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c0 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2 0-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c0-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 3.1a6.7 6.7 0 100 13.4 6.7 6.7 0 000-13.4zm0 11a4.3 4.3 0 110-8.6 4.3 4.3 0 010 8.6zm8.5-11.3a1.6 1.6 0 11-3.1 0 1.6 1.6 0 013.1 0z'/%3E%3C/svg%3E");
}

body .elementor .knop[href*="facebook.com"]::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: currentColor;
    -webkit-mask: center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12a10 10 0 10-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0022 12z'/%3E%3C/svg%3E");
            mask: center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12a10 10 0 10-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0022 12z'/%3E%3C/svg%3E");
}


/* ---------- parallax op de jubileumbanner (voorpagina) ----------
   Het streeppatroon van deze baan blijft staan ten opzichte van het
   scherm, terwijl de baan zelf meescrollt. Daardoor lijkt het patroon
   trager te bewegen dan de rest van de pagina.
   Wie in zijn systeem heeft ingesteld dat hij liever geen beweging
   ziet, krijgt gewoon de stilstaande versie. */
@media (prefers-reduced-motion: no-preference) {
  /* Het streeppatroon zelf herhaalt elke 10 pixels; dat zie je niet
     bewegen. Daarom schuift de inhoud van de baan mee: een scriptje
     in de voettekst zet --parallax, deze regel doet de rest. */
  body .elementor .parallax-baan > * {
    transform: translate3d(0, var(--parallax, 0px), 0);
    will-change: transform;
  }
}


/* ---------- foto's die in beeld komen (75 jaar-pagina) ----------
   Een klein scriptje in de kop zet de klasse "wp-anim" op de pagina
   nog voordat er iets getekend is; daardoor staan de foto's meteen op
   onzichtbaar en flitsen ze niet even in beeld. Het scriptje in de
   voettekst verdeelt ze daarna: wat al in beeld staat vervaagt rustig
   in, wat nog onder de vouw zit schuift van opzij binnen.
   Draait er geen JavaScript, dan gebeurt er niets en blijft alles
   gewoon zichtbaar. */

@media (prefers-reduced-motion: no-preference) {

  /* Alles wat straks in-animeert begint onzichtbaar: niet alleen de
     foto's, ook de koppen en alinea's. Anders staat "De groei naar
     400 m2" er eerst even, om daarna alsnog weg te vallen. */
  html.wp-anim body.page-id-33 .sectie .wrap > * { opacity: 0; }

  body .elementor .vervaag-in {
    opacity: 0;
    transition: opacity .8s ease;
  }
  body .elementor .vervaag-in.in-beeld { opacity: 1; }

  body .elementor .schuif-in {
    opacity: 0;
    transform: translateX(var(--vanaf, -36px));
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
  }
  body .elementor .schuif-in.in-beeld {
    opacity: 1;
    transform: none;
  }

  /* bij een omgekeerde split staat de foto rechts; die komt van rechts */
  body .elementor .omgekeerd .schuif-in { --vanaf: 36px; }

  /* in een rij foto's komen ze om en om van links en van rechts */
  body .elementor .archief > .schuif-in:nth-child(even),
  body .elementor .duo     > .schuif-in:nth-child(even) { --vanaf: 36px; }

  /* de foto's in een rij lopen net iets na elkaar */
  body .elementor .archief > .schuif-in:nth-child(2),
  body .elementor .duo     > .schuif-in:nth-child(2) { transition-delay: .09s; }
  body .elementor .archief > .schuif-in:nth-child(3) { transition-delay: .18s; }
}


/* ============================================================
   Diashow
   Gebruikt op de 75 jaar-pagina en op Over ons. De opbouw staat
   in een HTML-element op de pagina zelf; het scriptje eronder in
   de voettekst laat hem draaien. Zonder JavaScript zie je gewoon
   de eerste foto - dat is met opzet.
   ============================================================ */

body .elementor .diashow {
  position: relative;
  margin: 6px 0 0;
}

body .elementor .dia-venster {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(33, 30, 31, .06);
}

body .elementor .dia-spoor {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

body .elementor .dia {
  flex: 0 0 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

body .elementor .dia img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* op een breed scherm wordt de diashow anders veel te hoog */
@media (min-width: 700px) {
  body .elementor .dia img { aspect-ratio: 16 / 9; }
}

/* zolang het scriptje niet gedraaid heeft staat alleen de eerste foto
   in beeld; daarna neemt het spoor het over */
body .elementor .diashow:not(.dia-klaar) .dia:not(:first-child) { display: none; }

/* ---------- knoppen links en rechts ---------- */

body .elementor .dia-knop {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--creme);
  color: var(--antraciet-donker);
  box-shadow: 0 2px 12px rgba(33, 30, 31, .22);
  cursor: pointer;
  opacity: .92;
  transition: opacity .15s ease, transform .15s ease;
}
body .elementor .dia-knop:hover { opacity: 1; }
body .elementor .dia-vorige   { left: 12px; }
body .elementor .dia-volgende { right: 12px; }
body .elementor .diashow:not(.dia-klaar) .dia-knop { display: none; }

/* de pijltjes zelf, getekend met randen */
body .elementor .dia-knop::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
body .elementor .dia-vorige::before   { transform: translate(-40%, -50%) rotate(-135deg); }
body .elementor .dia-volgende::before { transform: translate(-60%, -50%) rotate(45deg); }

/* ---------- bijschrift ---------- */

/* Alle bijschriften liggen in hetzelfde vak op elkaar. Daardoor is het
   blok altijd zo hoog als het langste bijschrift en verspringt de
   pagina niet als je doorklikt naar een langere regel. */
body .elementor .dia-bijschrift {
  display: grid;
  margin: 14px 0 0;
}
body .elementor .dia-bijschrift span {
  grid-area: 1 / 1;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
body .elementor .dia-bijschrift span.actief {
  opacity: .78;
  transform: none;
}

/* ---------- duimnagels ---------- */

/* bijschrift op de donkere baan: wit, wat steviger en met lucht
   tussen de foto en de tekst */
body .elementor .dia-bijschrift { margin-top: 22px; }
body .elementor #in-de-winkel .dia-bijschrift span {
  color: var(--creme);
  font-weight: 600;
}
body .elementor #in-de-winkel .dia-bijschrift span.actief { opacity: 1; }
body .elementor .dia-duimen { margin-top: 22px; }

body .elementor .dia-duimen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
body .elementor .dia-duimen li { margin: 0; padding: 0; list-style: none; }

body .elementor .dia-duim {
  display: block;
  width: 88px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: .5;
  box-shadow: inset 0 0 0 2px transparent;
  transition: opacity .2s ease, box-shadow .2s ease;
}
body .elementor .dia-duim img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
body .elementor .dia-duim:hover  { opacity: .8; }
body .elementor .dia-duim.actief {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--rood);
}
body .elementor .diashow:not(.dia-klaar) .dia-duimen { display: none; }

/* ---------- knoppen naast het beeld ----------
   De pijltjes stonden over de foto heen. Nu staat er een rij van
   drie: knop - venster - knop, zodat ze in de kantlijn vallen. */
body .elementor .dia-baan { position: relative; }
body .elementor .dia-baan .dia-vorige   { left: calc(6px - var(--pad)); }
body .elementor .dia-baan .dia-volgende { right: calc(6px - var(--pad)); }
@media (max-width: 559px) {
  body .elementor .dia-baan .dia-knop { width: 34px; height: 34px; }
}

/* Op een breed scherm is er ruimte naast het stramien, dan schuiven
   de knoppen een knopbreedte verder naar buiten en staan ze helemaal
   naast de foto in plaats van er half overheen. */
@media (min-width: 1340px) {
  body .elementor .dia-baan .dia-vorige   { left: calc(6px - var(--pad) - 44px); }
  body .elementor .dia-baan .dia-volgende { right: calc(6px - var(--pad) - 44px); }
}

/* ---------- rustige duimpjes ----------
   Alleen de foto die je bekijkt is in kleur; de rest staat in
   grijstinten, dat oogt een stuk rustiger onder de diashow. */
body .elementor .dia-duim {
  filter: saturate(.5);
  opacity: .6;
  transition: opacity .2s ease, box-shadow .2s ease, filter .2s ease;
}
body .elementor .dia-duim:hover { filter: saturate(.8); opacity: .85; }
body .elementor .dia-duim.actief { filter: none; opacity: 1; }

/* ---------- meer lucht in "In de winkel" ---------- */
body .elementor #in-de-winkel { padding-top: 104px; padding-bottom: 104px; }
body .elementor #in-de-winkel .label { margin-bottom: 22px; }
body .elementor #in-de-winkel h2 { margin-bottom: 30px; }
body .elementor #in-de-winkel .diashow { margin-top: 0; }
body .elementor #in-de-winkel .dia-bijschrift { margin-top: 26px; }
body .elementor #in-de-winkel .dia-duimen { margin-top: 26px; }


@media (min-width: 700px) {
  body .elementor .dia-duim { width: 116px; }
  body .elementor .dia-bijschrift { font-size: 15.5px; }
}


/* ---------- het plattegrondje op een smal scherm ----------
   Op een telefoon is het plattegrondje zo laag dat het witte kaartje
   de speld zou afdekken. Daarom staat het kaartje daar onder de kaart
   in plaats van eroverheen, en is de kaart zelf wat hoger. */
@media (max-width: 559px) {
  /* de kaart wordt hoger, zodat de speld boven het witte kaartje uitkomt */
  body .elementor .kaartlink img { aspect-ratio: 4 / 3; }

  /* en de knop wordt wat kleiner, zodat hij naast het adres blijft passen */
  body .elementor .kaartlabel {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 10px 12px;
    column-gap: 12px;
  }
  body .elementor .kaartlabel .knop {
    min-height: 36px;
    padding: 0 14px;
    font-size: 14px;
  }
  body .elementor .kaartnaam   { font-size: 15.5px; }
  body .elementor .kaartplaats { font-size: 14px; }
}


/* ---------- de twee logo's in de eerste voettekstkolom ----------
   Het Post-logo en het Top 1 Toys-logo staan naast elkaar; het adres
   en de contactregels eronder nemen weer de volle breedte. */

body .elementor .fgrid > .fkolom:nth-child(1) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;   /* 8px tussen de regels, 18px tussen de twee logo's */
}
body .elementor .fgrid > .fkolom:nth-child(1) > .ftekst,
body .elementor .fgrid > .fkolom:nth-child(1) > .flink {
  flex: 0 0 100%;
  width: 100%;
  max-width: none;   /* anders past het adres nog naast de logo's */
  margin: 0;
}
/* het adres krijgt wat lucht onder de logo's */
body .elementor .fgrid > .fkolom:nth-child(1) > .ftekst { margin-top: 8px; }
body .elementor .fgrid > .fkolom:nth-child(1) > a,
body .elementor .fgrid > .fkolom:nth-child(1) > img {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

/* het Top 1 Toys-logo herkennen we aan de bestandsnaam, want dit
   plaatje heeft (anders dan de rest) geen eigen klasse */
body .elementor .voet img[src*="top1toys"] {
  height: 40px;
  width: auto;
  margin: 0;
  border-radius: 6px;
}


/* ============================================================
   Instagram-berichten (de officiele embed van Instagram zelf)
   Drie vaste berichten staan als iframe in de pagina, zodat de
   video's gewoon afspelen zonder dat er iets opengeklapt hoeft te
   worden. De inhoud komt van instagram.com, dus we kunnen er niet
   in stylen; de vaste balk met de accountnaam snijden we van
   buitenaf weg. Verandert Instagram die balk van hoogte, dan is
   --ig-kop het enige wat je hoeft bij te stellen.
   ============================================================ */

body .elementor .ig-rij {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 26px;
}

@media (min-width: 700px) {
  body .elementor .ig-rij { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

body .elementor .ig-kaart {
  --ig-kop: 54px;
  position: relative;
  height: 620px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 14px rgba(33, 30, 31, .10);
}

body .elementor .ig-kaart iframe {
  display: block;
  width: 100%;
  height: calc(100% + var(--ig-kop));
  margin-top: calc(-1 * var(--ig-kop));
  border: 0;
}

@media (max-width: 699px) {
  body .elementor .ig-kaart { height: 560px; }
}

/* Het contactformulier staat, net als het inschrijfformulier erboven,
   midden op de pagina en is even breed (640px). */
body .elementor #contactformulier .wrap > * {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* In de kop staat een HTML-element met alleen een scriptje erin. Zo'n
   element krijgt van Elementor 20px marge eronder, en dat gaf een
   doorzichtige spleet boven de kop waar de pagina doorheen scrolde.
   Het scriptje draait gewoon door; het hoeft alleen geen ruimte in
   te nemen. */
body header.elementor-location-header > .elementor-widget-html { display: none; }

/* De Facebook-knop krijgt dezelfde rode stijl als de andere knoppen.
   Dit gaat op het adres van de knop, dus elke knop die naar Facebook
   verwijst doet vanzelf mee - je hoeft er geen klasse voor te zetten.
   (De ronde iconen in de voettekst zijn geen .knop en blijven dus
   gewoon zoals ze zijn.) */
body .elementor .knop[href*="facebook.com"] {
  background: var(--rood);
  color: #fff;
  box-shadow: none;
}
body .elementor .knop[href*="facebook.com"]:hover {
  background: var(--rood-donker);
}/* End custom CSS */