/** Shopify CDN: Minification failed

Line 618:2 All "@import" rules must come first

**/
/* hej-faq-topics — statische stijl van sections/hej-faq-topics.liquid.
 *
 * Instelbare waarden staan als CSS-variabelen in de sectie zelf, omdat ze per
 * sectie-instantie verschillen. Dit bestand bevat uitsluitend regels die voor elke
 * instantie gelijk zijn en daarom een keer gedownload en gecachet kunnen worden.
 *
 * De volgorde van de regels is exact die van het oorspronkelijke inline blok; er is
 * niets samengevoegd, herschikt of weggelaten.
 */
  

  

  .hftx-inner {
    max-width: var(--hftx-max-width);
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ── TITEL ── */
  .hftx-title-wrap {
    margin-bottom: 40px;
    text-align: center;
  }

  .hftx-eyebrow-top {
    font-family: "Inter Tight", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--kleur-groen, #20be72);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0 0 14px;
  }

  .hftx-title {
    font-family: "Inter Tight", sans-serif;
    font-size: var(--hftx-title-size);
    font-weight: 700;
    color: var(--hftx-title-color);
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin: 0 0 14px;
    text-wrap: balance;
  }

  .hftx-title-dot {
    display: inline-block;
    width: 0.16em;
    height: 0.16em;
    margin-left: 0.06em;
    border-radius: 50%;
    background: var(--kleur-groen, #20be72);
    vertical-align: baseline;
  }

  .hftx-subtitle {
    font-family: "Inter Tight", sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--hftx-subtitle-color);
    letter-spacing: -0.01em;
    line-height: 1.5;
    margin: 0;
  }

  /* ── ZOEKBALK ── */
  .hftx-search {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 560px;
    margin: 32px auto 0;
    padding: 16px 24px;
    background: var(--hftx-card-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    transition: border-color 0.2s ease, background 0.2s ease;
  }

  .hftx-search:focus-within {
    border-color: rgba(32, 190, 114, 0.5);
  }

  .hftx-search-icon {
    flex-shrink: 0;
    color: var(--hftx-subtitle-color);
    opacity: 0.8;
  }

  .hftx-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font-family: "Inter Tight", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--hftx-question-color);
    letter-spacing: -0.01em;
  }

  .hftx-search-input::placeholder { color: var(--hftx-subtitle-color); opacity: 0.75; }
  /* eigen groen kruisje in plaats van het blauwe browser-standaard wis-icoon */
  .hftx-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
  .hftx-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
  .hftx-search-input::-ms-clear { display: none; }

  .hftx-search-clear {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--kleur-groen, #20be72);
    opacity: 0.85;
    transition: opacity 0.15s ease;
  }

  .hftx-search-clear:hover { opacity: 1; }

  .hftx-search-empty {
    max-width: 560px;
    margin: 16px auto 0;
    text-align: center;
    font-family: "Inter Tight", sans-serif;
    font-size: 15px;
    color: var(--hftx-subtitle-color);
  }

  /* ── VERTROUWENS-BADGES ── */
  .hftx-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 32px 0 24px;
    padding: 28px 32px;
    background: var(--hftx-card-bg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
  }

  .hftx-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .hftx-badge-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--kleur-groen, #20be72);
  }

  .hftx-badge-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .hftx-badge-title {
    font-family: "Inter Tight", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--hftx-title-color);
    letter-spacing: -0.01em;
    line-height: 1.3;
  }

  .hftx-badge-text {
    font-family: "Inter Tight", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--hftx-subtitle-color);
    letter-spacing: -0.01em;
    line-height: 1.45;
  }

  /* ── TABS ── */
  .hftx-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 40px 0;
  }

  .hftx-tab {
    font-family: "Inter Tight", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    background: var(--hftx-tab-bg);
    color: var(--hftx-tab-text-color);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }

  .hftx-tab:hover {
    background: var(--hftx-tab-bg-hover);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .hftx-tab.is-active {
    background: var(--hftx-tab-active-bg);
    color: var(--hftx-tab-active-text-color);
  }

  .hftx-tab.is-active:hover {
    background: var(--hftx-tab-active-bg);
  }

  /* tijdens zoeken: tabs blijven zichtbaar maar gedimd/inactief, i.p.v. helemaal verdwijnen */
  .hftx-tabs.is-searching {
    opacity: 0.35;
    pointer-events: none;
  }

  /* ── PANELS (sequentiële fade-swap) ── */
  .hftx-panel {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1), transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    /* garandeert altijd ruimte tussen vragen, ook over categorie-grenzen heen: de gap van
       .hftx-list werkt alleen BINNEN één categorie, niet ertussen. Tijdens zoeken kunnen
       meerdere panelen tegelijk zichtbaar zijn en anders zonder ruimte tegen elkaar aan staan. */
    margin-bottom: 12px;
  }

  .hftx-panel:last-child {
    margin-bottom: 0;
  }

  .hftx-panel.is-active {
    display: block;
  }

  .hftx-panel.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .hftx-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* ── ITEM (rij: knop + los gepositioneerde balk-achtergrond + antwoord) ── */
  .hftx-item {
    width: 100%;
    position: relative;
    z-index: 0;
    opacity: 0;
  }

  /* vragen komen 1 voor 1 tevoorschijn zodra hun categorie actief wordt (zelfde soort cascade als het menu) */
  @keyframes hftx-item-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .hftx-panel.is-active .hftx-item {
    animation: hftx-item-in 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .hftx-panel.is-active .hftx-item:nth-child(1)  { animation-delay: 0.02s; }
  .hftx-panel.is-active .hftx-item:nth-child(2)  { animation-delay: 0.06s; }
  .hftx-panel.is-active .hftx-item:nth-child(3)  { animation-delay: 0.10s; }
  .hftx-panel.is-active .hftx-item:nth-child(4)  { animation-delay: 0.14s; }
  .hftx-panel.is-active .hftx-item:nth-child(5)  { animation-delay: 0.18s; }
  .hftx-panel.is-active .hftx-item:nth-child(6)  { animation-delay: 0.22s; }
  .hftx-panel.is-active .hftx-item:nth-child(7)  { animation-delay: 0.26s; }
  .hftx-panel.is-active .hftx-item:nth-child(8)  { animation-delay: 0.30s; }
  .hftx-panel.is-active .hftx-item:nth-child(9)  { animation-delay: 0.34s; }
  .hftx-panel.is-active .hftx-item:nth-child(10) { animation-delay: 0.38s; }

  @media (prefers-reduced-motion: reduce) {
    .hftx-item {
      opacity: 1;
      animation: none;
    }
  }

  /* tijdens zoeken staan alle categorieën tegelijk open; de intro-cascade zou dan bij elke
     toetsaanslag opnieuw afgaan en door het razendsnelle filteren door elkaar heen lopen —
     vragen tonen tijdens het zoeken daarom altijd meteen, zonder animatie */
  .hftx-panels.is-searching .hftx-item {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  /* de panelen zelf hadden nog hun eigen fade/schuif-overgang (zie hierboven bij .hftx-panel):
     als er meerdere categorieën in dezelfde toetsaanslag tegelijk zichtbaar worden, konden ze
     tijdens die 0,32s overgang nog half-transparant over elkaar heen liggen — nu direct zichtbaar
     zonder overgang zolang er gezocht wordt */
  .hftx-panels.is-searching .hftx-panel {
    transition: none;
    transform: none;
  }

  /* ── VRAAG-KNOP: altijd volle breedte, vaste hoogte (referentiepunt voor het plusje) ── */
  .hftx-question {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    padding: 24px 32px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: "Inter Tight", sans-serif;
    font-size: var(--hftx-question-size);
    font-weight: 600;
    color: var(--hftx-question-color);
    text-align: left;
    letter-spacing: -0.03em;
    line-height: 1.25;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .hftx-question:hover { color: var(--kleur-groen, #20be72); }
  .hftx-question[aria-expanded="true"] { color: var(--kleur-groen, #20be72); }

  .hftx-question-text {
    text-align: left;
  }

  /* ── BALK: losse achtergrondlaag achter knop + antwoord, volgt altijd de volledige hoogte van het item
     (dus ook onder een geopend antwoord), breedte varieert alleen op hover-apparaten ── */
  .hftx-question-bar {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--hftx-card-bg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.22);
    transition: width 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    pointer-events: none;
  }

  .hftx-question:hover ~ .hftx-question-bar {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.28);
  }

  /* ── PLUS ICOON: vaste positie helemaal rechts, los van de balk.
     Balk en sectie-achtergrond zijn nu beide donker, dus één lichte kleur volstaat in alle standen. ── */
  .hftx-plus {
    position: absolute;
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
    opacity: 0.75;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, color 0.25s ease;
    color: var(--kleur-wit, #ffffff);
  }

  .hftx-question[aria-expanded="true"] .hftx-plus {
    transform: translateY(-50%) rotate(45deg);
    opacity: 1;
    color: var(--kleur-groen, #20be72);
  }

  /* ── HOVER-BALK: op muis-apparaten omarmt de balk in rust alleen de vraagtekst;
     bij hover, focus of openen groeit de balk naar rechts tot ze het (vast gepositioneerde) plusje raakt ── */
  @media (hover: hover) and (pointer: fine) {
    .hftx-question-bar {
      width: var(--hftx-collapsed-w, auto);
      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
    }

    .hftx-question:hover ~ .hftx-question-bar,
    .hftx-question:focus-visible ~ .hftx-question-bar,
    .hftx-question[aria-expanded="true"] ~ .hftx-question-bar {
      width: 100%;
    }

    /* 2026-09-07 (Codex-audit F4): hier stond white-space: nowrap. Een vraag die breder is dan de
       kolom liep daardoor op muis-apparaten in een smal venster (360/430 px) tot 626 px door en
       maakte de pagina horizontaal scrollbaar. Past de vraag, dan staat hij toch al op één regel;
       past hij niet, dan hoort hij af te breken. Het script meet de balkbreedte via de tekstbox, en
       die is bij een afgebroken vraag gewoon de kolombreedte. Touch-apparaten hadden dit nooit. */
  }

  /* ── ANTWOORD (geen eigen achtergrond meer nodig, de balk erachter volgt automatisch mee) ── */
  .hftx-answer {
    display: grid;
    grid-template-rows: 0fr;
    position: relative;
    z-index: 1;
    transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hftx-answer.is-open {
    grid-template-rows: 1fr;
  }

  .hftx-answer-inner {
    overflow: hidden;
    padding: 0 32px;
    font-family: "Inter Tight", sans-serif;
    font-size: var(--hftx-answer-size);
    color: var(--hftx-answer-color);
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: -0.01em;
    text-align: left;
    transition: padding 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hftx-answer.is-open .hftx-answer-inner {
    padding: 0 32px 28px;
  }

  .hftx-answer-inner p { margin: 0 0 14px; }
  .hftx-answer-inner p:last-child { margin-bottom: 0; }
  .hftx-answer-inner a {
    color: var(--hftx-answer-link-color);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: opacity 0.15s;
  }
  .hftx-answer-inner a:hover { opacity: 0.7; }
  .hftx-answer-inner strong { font-weight: 600; color: var(--hftx-question-color); }
  .hftx-answer-inner ul { margin: 0 0 14px; padding-left: 20px; }
  .hftx-answer-inner li { margin-bottom: 6px; }

  /* ── CTA-BLOK: verwijst door naar de klantenservicepagina ── */
  .hftx-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 48px;
    padding: 32px 36px;
    background: var(--hftx-card-bg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    text-decoration: none;
    transition: border-color 0.25s ease, transform 0.25s ease;
  }

  .hftx-cta:hover {
    border-color: rgba(32, 190, 114, 0.4);
    transform: translateY(-2px);
  }

  .hftx-cta-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .hftx-cta-title {
    font-family: "Inter Tight", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--hftx-title-color);
    letter-spacing: -0.02em;
    line-height: 1.3;
  }

  .hftx-cta-text {
    font-family: "Inter Tight", sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--hftx-subtitle-color);
    letter-spacing: -0.01em;
    line-height: 1.5;
  }

  .hftx-cta-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(32, 190, 114, 0.12);
    color: var(--kleur-groen, #20be72);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }

  .hftx-cta:hover .hftx-cta-arrow {
    background: var(--kleur-groen, #20be72);
    color: var(--kleur-wit, #ffffff);
    transform: translateX(3px);
  }

  /* ── MOBIEL ── */
  @media (max-width: 834px) {
    .hftx-title-wrap { margin-bottom: 28px; }
    .hftx-title      { font-size: var(--hftx-title-size); }
    .hftx-subtitle   { font-size: 17px; }

    .hftx-search {
      margin-top: 24px;
      padding: 13px 18px;
    }

    .hftx-badges {
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 24px 22px;
      margin: 24px 0 16px;
      border-radius: 20px;
    }

    .hftx-tabs {
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      margin: 28px 0;
    }

    .hftx-tab {
      width: 100%;
      text-align: center;
    }

    .hftx-tab {
      padding: 10px 18px;
      font-size: 14px;
    }

    .hftx-list { gap: 10px; }

    .hftx-question-bar {
      border-radius: 14px;
    }

    .hftx-question {
      padding: 20px;
      font-size: var(--hftx-question-size);
    }

    /* ruimte reserveren zodat een omgeklapte tweede regel nooit onder het plusje komt */
    .hftx-question-text {
      display: block;
      padding-right: 30px;
    }

    .hftx-plus {
      right: 20px;
    }

    .hftx-answer-inner {
      padding: 0 20px;
      font-size: var(--hftx-answer-size);
    }

    .hftx-answer.is-open .hftx-answer-inner {
      padding: 0 20px 24px;
    }

    .hftx-cta {
      align-items: center;
      gap: 16px;
      margin-top: 32px;
      padding: 22px 20px;
      border-radius: 20px;
    }

    .hftx-cta-title {
      font-size: 17px;
    }

    .hftx-cta-text {
      font-size: 14px;
    }

    .hftx-cta-arrow {
      width: 38px;
      height: 38px;
    }

    .hftx-inner { padding: 0 20px; }
  }

/* Hieronder de vaste helft van regels die verder van instellingen afhangen. Die regels staan dus
   op twee plekken: het instelbare deel is in de sectie gebleven en houdt daar zijn hogere gewicht,
   het deel dat nooit verandert staat hier. Bewust onderaan, zodat de volgorde klopt met hoe het
   eerst was. */
  @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap');