/* ===================================================================
   VK HEADER 2026 — Variakeys.de
   Scope: .vk-hdr2026 (staat alleen op de secties van de nieuwe header).
   Zolang die class alleen in preview-post 31 zit, raakt niets hiervan
   de live header (post 13). Toegevoegd 9 sep 2026.
   =================================================================== */

/* ---------- 1. STICKY -------------------------------------------------
   De zwarte servicebalk (38px) scrollt weg, witte balk + gele nav
   blijven plakken. Geen JS nodig: negatieve top-offset.            */
/* ---------- 1. STICKY — ALLEEN MOBIEL --------------------------------
   Op desktop niet nodig (wens Jordi, 9 sep). Onder 1025px blijft de witte
   balk met logo, zoekveld en winkelwagen in beeld; de zwarte USP-balk
   scrollt weg via de negatieve top-offset.

   Het thema zet via JS inline `overflow:auto` op html en body. Dat maakt
   body een scrollport waar position:sticky zich aan vastklampt, waardoor
   de header niet plakt. Geverifieerd 9 sep 2026: het canvas-menu gebruikt
   deze overflow NIET om achtergrond-scroll te blokkeren (body-overflow en
   body-classes blijven bij een geopend menu ongewijzigd), dus overrulen is
   veilig. !important is nodig omdat het een inline style is.        */
@media (max-width: 1024px){
  html:has(.vk-hdr2026),
  body:has(.vk-hdr2026){ overflow: visible !important; }

  header#header:has(.vk-hdr2026){
    position: sticky;
    top: -36px;
    z-index: 998;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
  }
  /* het canvas-menu moet boven de sticky header uitkomen */
  #canvas-menu-mobile,
  .canvas-widget-backdrop{ z-index: 1000; }
}

/* ---------- 2. ZWARTE SERVICEBALK ------------------------------------ */
.vk-hdr2026.elementor-element-65181290 > .elementor-container{
  max-width: 1369px;
  min-height: 38px !important;
}
.vk-hdr2026.elementor-element-65181290 > .elementor-container > .elementor-row{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-height: 38px;
}
.vk-hdr2026.elementor-element-65181290 .elementor-column{
  width: auto !important;
  flex: 0 1 auto;
  min-width: 0;
}
/* USP's krijgen de ruimte, servicekolom duwt zichzelf naar rechts */
.vk-hdr2026.elementor-element-65181290 .elementor-element-78a843c,
.vk-hdr2026.elementor-element-65181290 .elementor-element-2fc0b594,
.vk-hdr2026.elementor-element-65181290 .elementor-element-161e73ea{ flex: 0 0 auto; }
.vk-hdr2026 .vk-hdr-svc{ margin-left: auto; flex: 0 0 auto !important; }

.vk-hdr2026.elementor-element-65181290 .elementor-icon-list-item{
  font-size: 12px;
  white-space: nowrap;
  line-height: 1.2;
}
.vk-hdr2026.elementor-element-65181290 .elementor-icon-list-items{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* servicekolom: telefoon + Kontakt/FAQ/Teamviewer op één regel */
.vk-hdr2026 .vk-hdr-svc > .elementor-column-wrap > .elementor-widget-wrap,
.vk-hdr2026 .vk-hdr-svc > .elementor-widget-wrap{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 4px;
}
.vk-hdr2026 .vk-hdr-svc .elementor-widget{ width: auto !important; margin: 0 !important; }
.vk-hdr2026 .vk-hdr-svc .elementor-widget-button .elementor-button{
  padding: 3px 9px !important;
  font-size: 12px !important;
  line-height: 20px !important;
  color: #fff !important;
  background: transparent !important;
  border-width: 0 !important;
  white-space: nowrap;
}
.vk-hdr2026 .vk-hdr-svc .elementor-widget-button + .elementor-widget-button .elementor-button{
  border-left: 1px solid rgba(255,255,255,.22) !important;
}
.vk-hdr2026 .vk-hdr-svc .elementor-button:hover{ color: #fecf00 !important; }
/* telefoon: kleinere WhatsApp-bol, witte tekst */
.vk-hdr2026 .vk-hdr-svc .elementor-widget-icon-box .elementor-icon-box-title,
.vk-hdr2026 .vk-hdr-svc .elementor-widget-icon-box .elementor-icon-box-title span,
.vk-hdr2026 .vk-hdr-svc .elementor-widget-icon-box a{
  color: #fff !important;
  font-size: 12px !important;
  white-space: nowrap;
}
.vk-hdr2026 .vk-hdr-svc .elementor-icon-box-wrapper{
  display: flex;
  align-items: center;
  gap: 8px;
}
/* De WhatsApp-SVG draagt een INLINE `width:3rem;height:2.8rem` (30x28) en
   stak daarmee buiten zijn container van 22x22 — en buiten de balk. Inline
   styles zijn alleen met !important te verslaan. De groene cirkel zit in de
   SVG zelf, dus de container heeft geen eigen achtergrond of padding nodig. */
.vk-hdr2026 .vk-hdr-svc .elementor-icon{
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border-width: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.vk-hdr2026 .vk-hdr-svc .elementor-icon svg,
.vk-hdr2026 .vk-hdr-svc .elementor-icon img{
  width: 20px !important;
  height: 20px !important;
  display: block;
  flex: none;
}
.vk-hdr2026 .vk-hdr-svc .elementor-widget-icon-box{ margin-right: 8px !important; }
.vk-hdr2026 .vk-hdr-svc,
.vk-hdr2026 .vk-hdr-svc > .elementor-column-wrap,
.vk-hdr2026 .vk-hdr-svc .elementor-widget,
.vk-hdr2026 .vk-hdr-svc .elementor-icon-box-wrapper,
.vk-hdr2026 .vk-hdr-svc .elementor-widget-container{ max-height: 38px; }
.vk-hdr2026 .vk-hdr-svc .elementor-icon-box-content{ display: flex; align-items: center; }
.vk-hdr2026.elementor-element-65181290 .elementor-column,
.vk-hdr2026.elementor-element-65181290 .elementor-column-wrap,
.vk-hdr2026.elementor-element-65181290 .elementor-widget-wrap{ align-content: center; }

/* ---------- 3. WITTE HOOFDBALK --------------------------------------- */
.vk-hdr2026.elementor-element-4edfb9fa{ min-height: 0 !important; }
.vk-hdr2026.elementor-element-4edfb9fa > .elementor-container{ min-height: 92px !important; }
.vk-hdr2026.elementor-element-4edfb9fa > .elementor-container > .elementor-row{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-height: 92px;
}
.vk-hdr2026.elementor-element-4edfb9fa .elementor-column{
  width: auto !important;
  flex: 0 0 auto;
  min-width: 0;
}
/* volgorde: logo · zoek · [TS · Trustami · sterren] · cart/account */
.vk-hdr2026 .elementor-element-52778228{ order: 1; }
.vk-hdr2026 .elementor-element-65bd8d68 { order: 2; flex: 1 1 auto !important; padding: 0 26px !important; }
.vk-hdr2026 .elementor-element-1531b99  { order: 3; }
.vk-hdr2026 .elementor-element-988fc0c  { order: 4; }
.vk-hdr2026 .elementor-element-5824e310 { order: 5; }
.vk-hdr2026 .elementor-element-1302a799 { order: 6; }

.vk-hdr2026 .elementor-element-52778228 img{ height: 46px; width: auto; }

/* --- de twee zegels OPTISCH even groot ---------------------------------
   Gemeten 9 sep 2026 met canvas-pixelanalyse: het Trusted Shops-beeld
   (220x220) vult zijn canvas voor 100%, het Trustami-beeld (2571x2576)
   maar voor 90% — er zit 5% transparante rand omheen. Een gelijke box
   maakt Trustami daardoor zichtbaar ~11% kleiner. De box van Trustami
   krijgt die 10% dus terug: 34 / 0,90 = 38px, zodat het zichtbare merk
   in beide gevallen ~34px meet.                                        */
.vk-hdr2026 .elementor-element-1531b99 img{      /* Trusted Shops */
  height: 42px !important;
  width: 42px !important;
  min-width: 42px;
  object-fit: contain;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}
.vk-hdr2026 .elementor-element-988fc0c img{      /* Trustami */
  height: 48px !important;
  width: 48px !important;
  min-width: 48px;
  object-fit: contain;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}
/* Maatvoering (gemeten 9 sep). Het Trustami-beeld vult zijn canvas voor 90%
   (5% transparante rand rondom), het TS-beeld voor 100%. Zichtbare cirkel is
   dus box x 0,90 respectievelijk box x 1,00:
       TS       42px box -> cirkel 42,0
       Trustami 48px box -> cirkel 43,2  (+3%)
   Die 3% is optische compensatie: TS is een donkere gevulde schijf, Trustami
   een lichte ring met witte kern, en die oogt bij gelijke diameter kleiner.
   Eerder geprobeerd: 0% (Jordi: te klein) en 8,5% (Jordi: te groot).
   GEEN negatieve marges — die lieten de zegels bij hover overlappen. */

/* Het thema zet een hover-transform op afbeeldingen (transition: transform
   0.3s). Daardoor groeide Trustami bij hover over het TS-zegel heen, dat er
   bovendien onder viel omdat het eerder in de DOM staat. Keurmerken horen
   stil te staan, dus binnen het trustcluster geen hover-vergroting. */
.vk-hdr2026 .elementor-element-1531b99 img,
.vk-hdr2026 .elementor-element-988fc0c img,
.vk-hdr2026 .elementor-element-1531b99 img:hover,
.vk-hdr2026 .elementor-element-988fc0c img:hover,
.vk-hdr2026 .elementor-element-1531b99 a:hover img,
.vk-hdr2026 .elementor-element-988fc0c a:hover img{
  transform: none !important;
  transition: none !important;
  scale: none !important;
}

/* beide zegels exact op dezelfde middenlijn centreren */
.vk-hdr2026 .elementor-element-1531b99 .elementor-widget-container,
.vk-hdr2026 .elementor-element-988fc0c .elementor-widget-container,
.vk-hdr2026 .elementor-element-1531b99 .elementor-image,
.vk-hdr2026 .elementor-element-988fc0c .elementor-image{
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.vk-hdr2026 .elementor-element-988fc0c .elementor-widget-container,
.vk-hdr2026 .elementor-element-1531b99 .elementor-widget-container,
.vk-hdr2026 .elementor-element-988fc0c .elementor-image,
.vk-hdr2026 .elementor-element-1531b99 .elementor-image{
  line-height: 0;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- trustcluster: drie kolommen die als één kader lezen --- */
.vk-hdr2026 .elementor-element-1531b99,
.vk-hdr2026 .elementor-element-988fc0c,
.vk-hdr2026 .elementor-element-5824e310{
  align-self: center;
  background: #fffdf5;
  border-top: 1px solid #ebe6d6;
  border-bottom: 1px solid #ebe6d6;
  padding: 7px 0 !important;
  display: flex;
  align-items: center;
}
.vk-hdr2026 .elementor-element-1531b99{
  border-left: 1px solid #ebe6d6;
  border-radius: 9px 0 0 9px;
  padding-left: 12px !important;
}
.vk-hdr2026 .elementor-element-988fc0c{ padding: 6px 4px !important; }
.vk-hdr2026 .elementor-element-5824e310{
  border-right: 1px solid #ebe6d6;
  border-radius: 0 8px 8px 0;
  padding-right: 13px !important;
  padding-left: 4px !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.vk-hdr2026 .elementor-element-5824e310 .elementor-widget{ width: auto !important; margin: 0 !important; }
.vk-hdr2026 .elementor-element-5824e310 > .elementor-column-wrap,
.vk-hdr2026 .elementor-element-5824e310 .elementor-widget-wrap{
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  align-content: center;
  padding: 0 !important;
}
/* de drie trust-kolommen even hoog, kader sluit rondom */
.vk-hdr2026 .elementor-element-1531b99,
.vk-hdr2026 .elementor-element-988fc0c,
.vk-hdr2026 .elementor-element-5824e310{
  height: 60px;
  box-sizing: border-box;
}
.vk-hdr2026 .elementor-element-1531b99 > .elementor-column-wrap,
.vk-hdr2026 .elementor-element-988fc0c > .elementor-column-wrap,
.vk-hdr2026 .elementor-element-1531b99 .elementor-widget-wrap,
.vk-hdr2026 .elementor-element-988fc0c .elementor-widget-wrap{
  display: flex !important;
  align-items: center;
  align-content: center;
  padding: 0 !important;
  height: 100%;
}
.vk-hdr2026 .elementor-element-5824e310 p{ margin: 0 !important; text-align: left !important; }
/* de sterrenwidget draagt text-align:center in zijn eigen inline HTML */
.vk-hdr2026 .elementor-element-27f7d29,
.vk-hdr2026 .elementor-element-27f7d29 p,
.vk-hdr2026 .elementor-element-27eb8f6b,
.vk-hdr2026 .elementor-element-27eb8f6b p{ text-align: left !important; }
.vk-hdr2026 .elementor-element-27f7d29 a{ display: inline-block; line-height: 1; }
/* sterrenregel compacter */
.vk-hdr2026 .elementor-element-27f7d29 a{ font-size: 15px !important; letter-spacing: 1px !important; }
.vk-hdr2026 .elementor-element-27eb8f6b{ font-size: 11px !important; }
.vk-hdr2026 .elementor-element-27eb8f6b p{ line-height: 1.25 !important; }
.vk-hdr2026 #vk-header-reviews{ color: #5f5c50; white-space: nowrap; }

/* zoekveld */
.vk-hdr2026 .elementor-element-65bd8d68 .search-form,
.vk-hdr2026 .elementor-element-65bd8d68 .wrapper-form{ width: 100%; }
.vk-hdr2026 .elementor-element-65bd8d68 input.query{ height: 46px; }

/* cart + account */
.vk-hdr2026 .elementor-element-1302a799 > .elementor-column-wrap > .elementor-widget-wrap,
.vk-hdr2026 .elementor-element-1302a799 > .elementor-widget-wrap{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 14px;
}
.vk-hdr2026 .elementor-element-1302a799 .elementor-widget{ width: auto !important; margin: 0 !important; }
/* de widget-CONTAINER draagt een margin-left:20px uit de themastyling — die
   zat bovenop de flex-gap en duwde de twee iconen 30px uit elkaar */
.vk-hdr2026 .elementor-element-1302a799 .elementor-widget-container{ margin: 0 !important; }

/* Volgorde: eerst account, dan winkelwagen (wens Jordi 9 sep). */
.vk-hdr2026 .elementor-element-949580c{ order: 1; }   /* Ihr Konto */
.vk-hdr2026 .elementor-element-57853ea{ order: 2; }   /* Warenkorb */

/* De twee iconen komen uit VERSCHILLENDE icoonfonts (winkelwagen =
   Line Awesome `las la-shopping-cart` op 30px, account = eigen
   `axicon-user` op 26px) en waren daardoor ongelijk van formaat.
   Beide op één maat en één regelhoogte, zodat ze even groot zijn
   en op dezelfde middenlijn staan. */
.vk-hdr2026 .elementor-element-1302a799 i{
  font-size: 27px !important;
  line-height: 1 !important;
  display: block;
  vertical-align: middle;
}
.vk-hdr2026 .elementor-element-1302a799 a.btn-canvas,
.vk-hdr2026 .elementor-element-1302a799 .canvas-gr-icon{
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  line-height: 1 !important;
}

/* ---------- 4. GELE NAVIGATIE ---------------------------------------- */
.vk-hdr2026.elementor-element-777070f{ min-height: 0 !important; }
.vk-hdr2026.elementor-element-777070f > .elementor-container{ min-height: 48px !important; }
.vk-hdr2026.elementor-element-777070f > .elementor-container > .elementor-row{ min-height: 48px; }
.vk-hdr2026.elementor-element-777070f .elementor-widget-axps-megamenu{ margin: 0 !important; }
.vk-hdr2026.elementor-element-777070f .elementor-row,
.vk-hdr2026.elementor-element-777070f .elementor-column,
.vk-hdr2026.elementor-element-777070f .elementor-column-wrap,
.vk-hdr2026.elementor-element-777070f .elementor-widget-wrap{ min-height: 0 !important; }
.vk-hdr2026.elementor-element-777070f .ets-mm-megamenu,
.vk-hdr2026.elementor-element-777070f .ets_mm_megamenu_content,
.vk-hdr2026.elementor-element-777070f ul.ets_mm_megamenu_content_content > li > a{
  line-height: 48px !important;
  height: 48px !important;
}

/* ---------- 5. RESPONSIVE: krappe desktop ---------------------------- */
@media (min-width: 1025px) and (max-width: 1319px){
  .vk-hdr2026 .elementor-element-65bd8d68{ padding: 0 16px !important; }
  .vk-hdr2026 .elementor-element-52778228 img{ height: 40px; }
  .vk-hdr2026 .vk-hdr-svc .elementor-widget-icon-box{ display: none !important; } /* telefoon eerst weg */
}
@media (min-width: 1025px) and (max-width: 1179px){
  /* zegels wijken, cijfer blijft — het cijfer draagt de boodschap */
  .vk-hdr2026 .elementor-element-988fc0c,
  .vk-hdr2026 .elementor-element-1531b99{ display: none !important; }
  .vk-hdr2026 .elementor-element-5824e310{
    border-left: 1px solid #ebe6d6;
    border-radius: 8px;
    padding-left: 11px !important;
  }
  .vk-hdr2026.elementor-element-65181290 .elementor-icon-list-item{ font-size: 11px; }
}
@media (min-width: 1025px) and (max-width: 1100px){
  .vk-hdr2026 .elementor-element-5824e310{ display: none !important; }
}

/* ---------- 6. MOBIEL + TABLET --------------------------------------- */
@media (max-width: 1024px){
  /* zwarte balk compacter — ook de container, die staat op 38px */
  .vk-hdr2026.elementor-element-65181290 > .elementor-container{ min-height: 32px !important; }
  .vk-hdr2026.elementor-element-65181290 > .elementor-container > .elementor-row{ min-height: 32px; }
  .vk-hdr2026.elementor-element-65181290 .elementor-icon-list-item{ font-size: 11.5px; }
  .vk-hdr2026.elementor-element-69d7230c,
  .vk-hdr2026.elementor-element-69d7230c > .elementor-container{ min-height: 0 !important; }

  /* hoofdblok: rij 1 = burger · logo · cart · account, rij 2 = zoekveld */
  .vk-hdr2026.elementor-element-69d7230c > .elementor-container > .elementor-row{
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
      "burger logo account cart"
      "search search search search";
    align-items: center;
    column-gap: 12px;
    row-gap: 5px;
    padding: 6px 0 7px;
  }
  .vk-hdr2026.elementor-element-69d7230c .elementor-column,
  .vk-hdr2026.elementor-element-69d7230c .elementor-column-wrap,
  .vk-hdr2026.elementor-element-69d7230c .elementor-widget-wrap{
    display: contents !important;
  }
  /* cart + account ook mobiel even groot en op één middenlijn — het zijn
     twee verschillende icoonfonts, dus zonder dit blijven ze ongelijk */
  .vk-hdr2026 .elementor-element-1a9519d i,
  .vk-hdr2026 .elementor-element-1746e71 i{
    font-size: 26px !important;
    line-height: 1 !important;
    display: block;
    width: 26px;
    height: 26px;
    text-align: center;
  }
  .vk-hdr2026 .elementor-element-1a9519d a.btn-canvas,
  .vk-hdr2026 .elementor-element-1746e71 a.btn-canvas,
  .vk-hdr2026 .elementor-element-1a9519d .canvas-gr-icon,
  .vk-hdr2026 .elementor-element-1746e71 .canvas-gr-icon{
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    line-height: 1 !important;
  }
  .vk-hdr2026 .elementor-element-1a9519d .elementor-widget-container,
  .vk-hdr2026 .elementor-element-1746e71 .elementor-widget-container{ margin: 0 !important; }

  .vk-hdr2026 .elementor-element-7d80d1c { grid-area: burger; }
  .vk-hdr2026 .elementor-element-62033d3a{ grid-area: logo; }
  .vk-hdr2026 .elementor-element-63f83aff{ grid-area: search; }
  .vk-hdr2026 .elementor-element-1a9519d { grid-area: cart; }
  .vk-hdr2026 .elementor-element-1746e71 { grid-area: account; }
  .vk-hdr2026.elementor-element-69d7230c .elementor-widget{
    width: auto !important;
    margin: 0 !important;
  }
  .vk-hdr2026 .elementor-element-62033d3a img{ height: 28px; width: auto; }
  .vk-hdr2026 .elementor-element-62033d3a .elementor-image{ text-align: left; line-height: 0; }

  /* het permanente zoekveld */
  .vk-hdr2026 .elementor-element-63f83aff .search-widget,
  .vk-hdr2026 .elementor-element-63f83aff .search-form,
  .vk-hdr2026 .elementor-element-63f83aff .wrapper-form{ width: 100%; }
  .vk-hdr2026 .elementor-element-63f83aff input.query{
    width: 100%;
    height: 38px;
    font-size: 16px;           /* 16px voorkomt inzoomen op iOS */
    border: 2px solid #e6e2d6;
    border-radius: 8px;
  }

  /* mobiele trustregel */
  .vk-hdr2026.elementor-element-a1b2c3f7{ padding: 3px 10px 4px !important; }
  .vk-hdr2026.elementor-element-a1b2c3f7 p{ font-size: 11.5px !important; line-height: 1.25 !important; }
}

@media (max-width: 400px){
  .vk-hdr2026.elementor-element-69d7230c > .elementor-container > .elementor-row{ column-gap: 8px; }
  .vk-hdr2026 .elementor-element-62033d3a img{ height: 24px; }
  .vk-hdr2026.elementor-element-65181290 .elementor-icon-list-item{ font-size: 10.5px; }
}

/* toetsenbordfocus zichtbaar houden */
.vk-hdr2026 a:focus-visible,
.vk-hdr2026 input:focus-visible,
.vk-hdr2026 button:focus-visible{
  outline: 2px solid #16150f;
  outline-offset: 2px;
}