/* VS — Code-chrome (custom header + footer voor de de-Elementor PDP) */
.vs-ch, .vs-cf {
    --vs-ch-navy: #314696;
    --vs-ch-dark: #1f2a37;
    --vs-ch-green: #62b959;
    --vs-ch-text: #5c676d;
    --vs-ch-line: #e6e9ef;
    --vs-ch-soft: #f5f7fa;
    font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Expliciet (niet erven): op thema-pagina's blaast de thema-body
       (17px / line-height 2) de header anders op t.o.v. de kale
       code-archief/PDP-documenten. */
    font-size: 16px;
    line-height: 1.5;
    color: var(--vs-ch-text);
}
.vs-ch *, .vs-cf * { box-sizing: border-box; }
.vs-ch__wrap { max-width: 1440px; margin: 0 auto; padding: 0 20px; }
.vs-ch__ic { flex: 0 0 auto; }
.vs-ch a { text-decoration: none; color: inherit; line-height: 1.35; }
.vs-ch li { line-height: 1.35; }

/* ---- Thema-lek-reset ----
   Op thema-pagina's (homepage e.d.) drukken kit-regels (.elementor-kit-x
   button/a, body-typografie met letter-spacing en line-height 2) door in de
   chrome; de kale code-archief/PDP-documenten hebben die regels niet. Deze
   resets maken de header/footer/modals op álle pagina's pixel-gelijk. */
.vs-ch, .vs-ch *, .vs-cf, .vs-cf *,
.vs-account-modal, .vs-account-modal *,
.vs-megamenu, .vs-megamenu * { letter-spacing: normal !important; }

/* Kit-button-regels (0,1,1) verslaan onze enkelvoudige classes (0,1,0);
   daarom hier met .vs-ch-prefix (0,2,0) vastgezet. */
.vs-ch .vs-search__toggle,
.vs-ch .vs-search__close {
    background: transparent;
    color: var(--vs-ch-dark);
    border: 0;
    border-radius: 8px;
}
.vs-ch .vs-account__trigger {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 10px;
}

/* "Headroom": alleen de hoofdbalk (.vs-ch__main) verschijnt op scroll-omhoog en
   verdwijnt op scroll-omlaag (aangestuurd door code-chrome.js). De spacer vangt de
   hoogte op zodat de pagina niet springt. Topbalk + nav scrollen normaal mee. */
.vs-ch__main--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    box-shadow: 0 2px 12px rgba(16, 24, 40, .08);
    transition: transform .25s ease;
    will-change: transform;
}
.vs-ch__main--hidden { transform: translateY(-100%); }

/* ---- Topbalk ---- */
.vs-ch__topbar { background: var(--vs-ch-soft); border-bottom: 1px solid var(--vs-ch-line); font-size: 13.5px; }
.vs-ch__topwrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; flex-wrap: wrap; }
.vs-ch__usps { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.vs-ch__usps li { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--vs-ch-dark); }
.vs-ch__usps .vs-ch__ic { color: var(--vs-ch-green); }
.vs-ch__toplinks { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.vs-ch__toplinks a:hover { color: var(--vs-ch-navy); }
.vs-ch__appt { display: inline-flex; align-items: center; gap: 7px; background: var(--vs-ch-navy); color: #fff !important; padding: 8px 14px; border-radius: 8px; font-weight: 700; font-size: 13.5px; line-height: 1.2; }
.vs-ch__appt:hover { filter: brightness(1.08); }

/* ---- Hoofdbalk ---- */
.vs-ch__main { background: #fff; }
.vs-ch__mainwrap { display: flex; align-items: center; gap: 22px; min-height: 86px; }
.vs-ch__logo { display: inline-flex; width: 230px; height: 48px; flex: 0 0 auto; }
.vs-ch__logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.vs-ch__search { flex: 1 1 auto; min-width: 0; max-width: 560px; }
.vs-ch__kiyoh { display: inline-flex; width: 135px; height: 41px; flex: 0 0 auto; }
.vs-ch__kiyoh img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.vs-ch__phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--vs-ch-dark); white-space: nowrap; }
.vs-ch__phone .vs-ch__ic { color: var(--vs-ch-navy); }
.vs-ch__phone--wa .vs-ch__ic { color: #25d366; width: 24px; height: 24px; }
/* Forceer Lato + kleur over thema-styling van de <a>/<span> heen. */
.vs-ch__phone--wa, .vs-ch__phone--wa span {
    font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--vs-ch-dark);
}
.vs-ch__offerte { display: inline-flex; align-items: center; background: var(--vs-ch-navy); color: #fff !important; padding: 12px 22px; border-radius: 8px; font-weight: 700; font-size: 16px; line-height: 1.2; white-space: nowrap; }
.vs-ch__offerte:hover { filter: brightness(1.08); }
.vs-ch__icons { display: inline-flex; align-items: center; gap: 6px; }
.vs-ch__cart, .vs-ch__icons a { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--vs-ch-dark); }
.vs-ch__cart:hover, .vs-ch__icons a:hover { background: var(--vs-ch-soft); }
.vs-ch__cart .vs-ch__ic, .vs-ch__icons svg { width: 22px; height: 22px; }
.vs-ch__badge { position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--vs-ch-navy); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.vs-ch__burger { display: none; }  /* alleen mobiel zichtbaar (zie responsive) */

/* ---- Navigatiebalk ---- */
.vs-ch__nav { background: #fff; border-top: 1px solid var(--vs-ch-line); border-bottom: 1px solid var(--vs-ch-line); }
.vs-ch__menu { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.vs-ch__menu li { position: relative; }
.vs-ch__menu a { display: inline-flex; align-items: center; padding: 15px 16px; font-weight: 700; font-size: 15px; color: var(--vs-ch-dark); }
.vs-ch__menu a:hover, .vs-ch__menu .current-menu-item > a { color: var(--vs-ch-navy); }
/* Submenu's (dropdown) */
.vs-ch__menu ul.sub-menu { position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff; border: 1px solid var(--vs-ch-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(16,24,40,.1); padding: 6px; list-style: none; margin: 0; display: none; z-index: 60; }
.vs-ch__menu li:hover > ul.sub-menu { display: block; }
.vs-ch__menu ul.sub-menu a { padding: 9px 12px; font-size: 14px; font-weight: 600; border-radius: 7px; }
.vs-ch__menu ul.sub-menu a:hover { background: var(--vs-ch-soft); }

/* ---- Footer ---- */
.vs-cf { margin-top: 48px; }
.vs-cf__usps { background: var(--vs-ch-soft); border-top: 1px solid var(--vs-ch-line); border-bottom: 1px solid var(--vs-ch-line); }
.vs-cf__uspwrap { display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap; min-height: 56px; }
.vs-cf__usp { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--vs-ch-dark); font-size: 14.5px; }
.vs-cf__usp .vs-ch__ic { color: var(--vs-ch-green); }
.vs-cf__main { background: var(--vs-ch-dark); color: #cdd3da; padding: 40px 0; }
.vs-cf__cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; gap: 28px; }
.vs-cf__hours { list-style: none; margin: 0; padding: 0; }
.vs-cf__hours li { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 9px; }
.vs-cf__hours li span:last-child { white-space: nowrap; }
.vs-cf__col h4 { color: #fff; font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; margin: 0 0 14px; }
.vs-cf__col ul { list-style: none; margin: 0; padding: 0; }
.vs-cf__col li { margin: 0 0 9px; }
.vs-cf__col a { color: #cdd3da; }
.vs-cf__col a:hover { color: #fff; }
.vs-cf__col p { margin: 0 0 8px; }
.vs-cf__bar { background: #161f29; color: #9aa3ad; font-size: 13px; }
.vs-cf__barwrap { display: flex; align-items: center; justify-content: space-between; min-height: 52px; gap: 12px 20px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.vs-cf__barlinks { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.vs-cf__bar a { color: #9aa3ad; text-decoration: none; }
.vs-cf__bar a:hover { color: #fff; }
.vs-cf__credit { opacity: .8; }
/* Footer-links zonder onderstreping (op thema-pagina's zet de body a-underline). */
.vs-cf a { text-decoration: none; }
.vs-cf a:hover { text-decoration: none; }
/* Merk-kolom + tagline */
.vs-cf__brandname { display: block; color: #fff; font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 500; font-size: 19px; letter-spacing: -.3px; margin: 0 0 12px; }
.vs-cf__brandname strong { font-weight: 800; color: #fff; }
.vs-cf__tagline { margin: 0; color: #aab3bd; font-size: 13.5px; line-height: 1.7; max-width: 320px; }
/* WhatsApp-knop in de contact-kolom */
.vs-cf__wa { display: inline-flex; align-items: center; gap: 8px; background: #25d366; color: #fff; font-weight: 700; font-size: 14px; padding: 9px 14px; border-radius: 6px; text-decoration: none; margin: 0 0 12px; }
.vs-cf__wa:hover { filter: brightness(1.06); color: #fff; }
/* Wint van .vs-cf__col a (grijze linkkleur): WhatsApp-knoptekst wit. */
.vs-cf__contact .vs-cf__wa, .vs-cf__contact .vs-cf__wa:hover { color: #fff; }
.vs-cf__wa .vs-ch__ic { color: #fff; }
/* Trust-rij: betaalmethoden + keurmerk */
.vs-cf__trust { background: var(--vs-ch-dark); border-top: 1px solid rgba(255, 255, 255, .08); }
.vs-cf__trustwrap { display: flex; align-items: center; justify-content: space-between; gap: 16px 20px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
.vs-cf__pay { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
/* !important: op niet-code-pagina's staat het thema/Woo-img-reset (height:auto !important) nog aan. */
.vs-cf__paycard { display: block; height: 30px !important; width: auto !important; max-width: none !important; border-radius: 4px; flex: 0 0 auto; }
.vs-cf__keur { flex: 0 0 auto; display: inline-flex; align-items: center; background: #fff; border-radius: 8px; padding: 8px 16px; }
.vs-cf__keur img { display: block; height: 44px !important; width: auto !important; max-width: none !important; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
    .vs-ch__kiyoh, .vs-ch__phone { display: none; }
    .vs-ch__mainwrap { gap: 14px; min-height: 70px; }
}
@media (max-width: 760px) {
    .vs-ch__topbar { display: none; }
    /* Scheidingslijntjes: lijn onder de header en (verderop) boven de zoekrij. */
    .vs-ch__main { border-bottom: 1px solid var(--vs-ch-line); }
    /* Smallere gutter zodat de zoekbalk net zo breed oogt als de content-tegels. */
    .vs-ch__mainwrap { flex-wrap: wrap; align-items: center; padding: 10px 12px 0; gap: 0 4px; min-height: 0; }
    .vs-ch__logo { order: 0; width: 145px; height: 30px; }
    .vs-ch__offerte { display: none; }            /* op mobiel weg */
    .vs-ch__kiyoh, .vs-ch__phone { display: none; }

    /* Bovenste rij: logo links, op dezelfde balk de iconen + menu rechts.
       Menu meest rechts, de overige iconen vallen op dezelfde hoogte ervoor. */
    .vs-ch__icons { order: 1; margin-left: auto; gap: 2px; align-items: center; flex-wrap: nowrap; }
    .vs-ch__icons .vs-ch__cart { order: 1; }
    .vs-ch__icons .vs-ch__wish { order: 2; }
    .vs-ch__icons .vs-account { order: 3; }

    /* Zoekbalk: altijd open, eigen volle-breedte rij, met scheidingslijn erboven. */
    .vs-ch__search {
        order: 2;
        flex: 0 0 calc(100% + 24px);
        max-width: none;
        margin: 10px -12px 0;
        padding: 10px 12px 12px;
        border-top: 1px solid var(--vs-ch-line);
    }
    .vs-ch__search .vs-search { width: 100%; }
    .vs-ch__search .vs-search__toggle,
    .vs-ch__search .vs-search__close { display: none !important; }
    .vs-ch__search .vs-search__form {
        display: flex !important;
        position: static !important;
        inset: auto !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        animation: none !important;
    }
    .vs-ch__search .vs-search__input {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: 46px !important;
        margin: 0 !important;
    }
    .vs-ch__search .vs-search__submit {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        flex: 0 0 auto !important;
    }

    /* Hamburger-knop: wit met rand, zoals de oude Menu-knop. Het thema geeft
       buttons een navy vulling, witte tekst en dikke padding (deels met
       !important) — daarom hier met .vs-ch-prefix en !important vastgezet. */
    .vs-ch .vs-ch__burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        order: 4;                                 /* menu, helemaal rechts */
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
        margin: 0;
        padding: 0 !important;
        border: 1px solid var(--vs-ch-line) !important;
        border-radius: 10px !important;
        background: #fff !important;
        color: var(--vs-ch-dark) !important;
        box-shadow: none !important;
        cursor: pointer;
    }
    .vs-ch .vs-ch__burger:hover,
    .vs-ch .vs-ch__burger.is-active { background: var(--vs-ch-soft) !important; }
    .vs-ch__burger-bars,
    .vs-ch__burger-bars::before,
    .vs-ch__burger-bars::after {
        content: "";
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        position: relative;
        transition: transform 0.2s ease, opacity 0.15s ease;
    }
    .vs-ch__burger-bars::before { position: absolute; top: -6px; left: 0; }
    .vs-ch__burger-bars::after { position: absolute; top: 6px; left: 0; }
    .vs-ch__burger.is-active .vs-ch__burger-bars { background: transparent; }
    .vs-ch__burger.is-active .vs-ch__burger-bars::before { transform: translateY(6px) rotate(45deg); }
    .vs-ch__burger.is-active .vs-ch__burger-bars::after { transform: translateY(-6px) rotate(-45deg); }

    /* De nav-balk dient alleen nog als drager van het uitklap-menu: geen randen
       of hoogte zolang het menu dicht is (de eigen burger is verborgen). */
    .vs-megamenu__burger { display: none !important; }
    .vs-ch__nav { border: 0 !important; background: transparent !important; }
    .vs-ch__nav .vs-ch__wrap { padding-left: 0; padding-right: 0; }

    .vs-cf__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 640px) {
    .vs-cf__cols { grid-template-columns: 1fr; }
}
/* Hele smalle schermen (320-360px): alles moet op één balk blijven passen. */
@media (max-width: 374px) {
    .vs-ch__logo { width: 116px; height: 24px; }
    .vs-ch__icons .vs-ch__cart,
    .vs-ch__icons a,
    .vs-ch .vs-ch__burger { width: 40px; height: 40px; }
    .vs-ch .vs-account__trigger { width: 40px !important; height: 40px !important; }
}

/* ---- Site-brede modus: custom header/footer nemen het over van Elementor ---- */
body.vs-global-chrome .elementor-location-header { display: none !important; }
body.vs-global-chrome .elementor-location-footer { display: none !important; }
/* hello-elementor valt terug op z'n eigen header/footer (sitetitel /
   "All rights reserved") nu de Elementor-templates op concept staan. */
body.vs-global-chrome .site-header { display: none !important; }
body.vs-global-chrome .site-footer { display: none !important; }
body.vs-global-chrome .vs-ch { position: relative; z-index: 50; }

/* hello-elementor zet globaal `button { padding: 18px 35px }` (met !important) en dat
   blaast onze compacte header-knoppen op zodra het thema-CSS actief is (overal behalve
   de code-PDP, waar het thema gedequeued wordt). Hard overrulen zodat de account- en
   zoek-knoppen compact blijven — de styling komt verder uit account.css/search.css. */
.vs-ch button,
.vs-ch input[type="submit"] {
    min-width: 0 !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
}
.vs-ch .vs-account__trigger {
    padding: 8px 10px !important;
    background: transparent !important;   /* thema geeft buttons een navy vulling — weg */
    color: var(--vs-ch-dark) !important;
}

/* Eenheid in de header-iconen: zoek + account exact zoals cart + hartje
   (donkere kleur, 22px, lijndikte 1.7 i.p.v. grijs/23px/2). */
.vs-ch .vs-search__toggle { color: var(--vs-ch-dark) !important; }
.vs-ch .vs-search__toggle svg,
.vs-ch .vs-account__icon { width: 22px !important; height: 22px !important; }
.vs-ch .vs-search__toggle svg *,
.vs-ch .vs-account__icon * { stroke-width: 1.7px; }
/* Account-glyph oogt kleiner binnen z'n vak → iets groter zodat 'ie optisch matcht */
.vs-ch .vs-account__icon { width: 25px !important; height: 25px !important; }
.vs-ch .vs-search__toggle,
.vs-ch .vs-search__submit,
.vs-ch .vs-search__close { padding: 0 !important; }
.vs-ch .vs-search__field,
.vs-ch input[type="search"],
.vs-ch input[type="text"] { min-height: 0 !important; }

/* Op mobiel: account = alleen het icoon (geen naam/"Inloggen"-tekst ernaast) */
@media (max-width: 760px) {
    .vs-ch .vs-account__trigger-label { display: none !important; }
    .vs-ch .vs-account__trigger { padding: 0 !important; width: 44px; height: 44px; justify-content: center; }
}