body,
html {
    margin: 0;
    padding: 0;
}

body {
    background-color: #fff;
    font-family: Oswald, sans-serif;
    overflow-x: hidden;
    --product-text-inset: clamp(0px, 2.5vw, 48px);
}

.home-background {
    position: relative;
    width: 100%;
    height: 60vw;
    overflow: hidden;
}

.header-main {
    position: relative;
    z-index: 2;
}

.bg-img {
    position: absolute;
    top: -48vw;
    left: 0;
    width: 100%;
    height: 60vw;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
    transition: opacity 450ms ease;
    opacity: 0;

}

.bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

.bg-wrap::after {
    content: "";
    position: absolute;
    top: -48vw;
    left: 0;
    width: 100%;
    height: 60vw;
    background: linear-gradient(
            to bottom,
            rgba(0,0,0,.82) 0%,
            rgba(0,0,0,.55) 8%,
            rgba(0,0,0,.22) 16%,
            rgba(0,0,0,0) 28%,
            rgba(0,0,0,0) 100%
    );
    z-index: 0;
    pointer-events: none;
}




.bg-img.is-visible {
    opacity: 1;

}

.middle-hover {
    background-color: #fff;
    position: relative;
    z-index: 1;
}

.header-main {
    margin: 41px auto 0 auto;
    width: 90%;
    max-width: 1542px;
    height: 49px;
    position: sticky;
    top: 0;
    z-index: 100;
    transition:
        margin 380ms cubic-bezier(.22, 1, .36, 1),
        width 380ms cubic-bezier(.22, 1, .36, 1),
        max-width 380ms cubic-bezier(.22, 1, .36, 1),
        height 380ms cubic-bezier(.22, 1, .36, 1),
        padding 380ms cubic-bezier(.22, 1, .36, 1),
        background-color 380ms cubic-bezier(.22, 1, .36, 1),
        box-shadow 380ms cubic-bezier(.22, 1, .36, 1),
        backdrop-filter 380ms cubic-bezier(.22, 1, .36, 1);
    will-change: margin, width, padding, background-color;
}

.header-main img {
    width: 150px;
}

/* Volledige-breedte achtergrondband ACHTER de (transparante) header.
   Per pagina ingesteld via het ACF-veld 'header_image'. De header (sticky,
   z-index 100) zweeft erover; de band vult de volledige breedte en duwt de
   pagina-inhoud naar onder.
   --band-height = totale zichtbare hoogte van de band (incl. de zone achter de
   header). --header-occupy = ruimte die de header in de flow inneemt
   (41px bovenmarge + 49px balkhoogte). Pas --band-height aan om hoger/lager. */
.header-image-band {
    --band-height: 120px;
    --header-occupy: 90px;
    position: relative;
    z-index: 0;
    height: calc(var(--band-height) - var(--header-occupy));
}

.header-image-band::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--header-occupy) * -1);
    bottom: 0;
    background-image:
        linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, 0) 100%),
        var(--header-bg);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

/* ® / ™ / ℠ klein en rechtsboven (superscript) i.p.v. op volle titelgrootte. */
.tm-mark {
    font-size: 0.55em;
    vertical-align: super;
    line-height: 0;
    font-weight: inherit;
    margin-left: 0.02em;
}

/* Logo crossfade between default (often white over banner) and dark variants. */
.nav-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.nav-logo-img {
    display: block;
    transition: opacity 320ms ease;
}

.nav-logo-img--scrolled {
    position: absolute;
    top: 50%;
    left: 0;
    width: 150px;
    height: auto;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
}

@keyframes headerSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* Desktop-only sticky/scrolled treatment. Mobile keeps its own fixed header. */
@media (min-width: 1025px) {
    .header-main.is-stuck {
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        height: 72px;
        padding: 0 5%;
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        backdrop-filter: blur(12px) saturate(140%);
        box-shadow:
            0 6px 24px rgba(15, 23, 42, 0.08),
            0 1px 0 rgba(15, 23, 42, 0.05);
        /* Geen headerSlideDown-animatie: die botste met de margin-transitie
           (41px -> 0) rond de scroll-drempel en gaf een glitch. De transition
           hierboven verzorgt de vloeiende overgang al. */
    }

    /* Banner pages: nav text is white. Darken it once the bar turns white. */
    body.has-banner .header-main.is-stuck .nav-left .nav-item,
    body.has-banner .header-main.is-stuck .nav-left .nav-item:visited,
    body.has-banner .header-main.is-stuck .nav-left .nav-item:active,
    body.has-banner .header-main.is-stuck .nav-left .nav-item:focus {
        color: #111 !important;
        text-shadow: none !important;
    }

    body.has-banner .header-main.is-stuck .nav-left .nav-item:hover {
        color: #99997E !important;
    }

    body.has-banner .header-main.is-stuck .lang-toggle,
    body.has-banner .header-main.is-stuck .lang-toggle .lang-current,
    body.has-banner .header-main.is-stuck .lang-toggle .lang-caret {
        color: #111 !important;
    }

    .header-main.is-stuck .nav-logo--swappable .nav-logo-img--default  { opacity: 0; }
    .header-main.is-stuck .nav-logo--swappable .nav-logo-img--scrolled { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .header-main,
    .nav-logo-img {
        transition: none;
    }
    .header-main.is-stuck {
        animation: none;
    }
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.nav-toggle-input {
    display: none;
}

.nav-toggle {
    display: none;
    background: #99997E;
    border: none;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
}

.nav-toggle:hover {
    background: #faf8e7;
    transition: .5s;
}

.nav-toggle:hover .nav-toggle-bar {
    background: #99997E;
    transition: .5s;
}

.nav-toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: #faf8e7;
    margin: 3px 0;
    transition: transform .2s ease, opacity .2s ease;
}

.nav-left {
    display: flex;
    gap: 30px;
    margin-left: 100px;
    align-items: center;
}

.nav-right {
    display: flex;
    gap: 10px;
}

.nav-item {
    font: bold 12px/17px 'Open Sans', sans-serif;
    color: #000000;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    text-shadow: 0 3px 6px #00000074;
}

.nav-item:hover {
    color: #99997E;
    cursor: pointer;
}

.nav-item-group {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-bottom: 0;
}

.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 420px;
    background: #fff;
    padding: 16px 18px;
    box-sizing: border-box;
    border-radius: 12px;
    z-index: 500;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.nav-item-group:focus-within .mega-menu,
.nav-item-group:hover .mega-menu {
    display: grid;
}

.mega-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mega-col--right {
    border-left: 1px solid rgba(17, 24, 39, .15);
    padding-left: 16px;
}

.mega-menu p {
    margin: 0;
    font: 500 12px/16px 'Open Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: .3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}

.mega-menu p:hover {
    color: #99997E;
}

.mega-menu p.no-btn {
    justify-content: flex-start;
    pointer-events: none;
}

.mega-menu p.no-btn--left {
    color: #99997E;
    font-weight: 700;
}

.mega-menu p.no-btn--right {
    color: #99997E;
    font-weight: 700;
}

.mega-btn {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #99997E;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .2s ease, transform .2s ease;
}

.mega-menu p:hover .mega-btn {
    opacity: 1;
    transform: translateX(0);
}

.mega-col--right .mega-btn {
    background: #2ec4b6;
}

.mega-menu p.mega-gap {
    margin-bottom: 30px;
}

.mega-menu p.bold {
    font-weight: 700;
}

/* Eenvoudige submenu-dropdown (bv. "Onze merken") voor gewone nav-items met subitems. */
.nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    padding: 8px 0;
    box-sizing: border-box;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, .12);
    z-index: 500;
    flex-direction: column;
}

.nav-item-group:focus-within .nav-dropdown,
.nav-item-group:hover .nav-dropdown {
    display: flex;
}

.nav-dropdown-link,
.nav-dropdown-link:visited {
    display: block;
    padding: 8px 18px;
    font: 500 13px/18px 'Open Sans', sans-serif;
    color: #111827;
    text-decoration: none;
    white-space: nowrap;
}

.nav-dropdown-link:hover,
.nav-dropdown-link:focus {
    color: #99997E;
    background: rgba(153, 153, 126, .08);
}

.lang-dropdown {
    position: relative;
    display: inline-flex;
    width: fit-content;
}

.lang-toggle {
    font: bold 14px/19px 'Open Sans', sans-serif;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
    background: 0 0;
    border-radius: 10px;
    padding: 4px 8px;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
}

.lang-toggle:hover {
    border-color: #fff;
}

.lang-caret {
    font-size: 10px;
    line-height: 1;
}

.lang-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 100%;
    background: #f3f6fa;
    border: 1px solid #d9e1ea;
    border-radius: 10px;
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 6px;
    z-index: 400;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

.lang-dropdown:focus-within .lang-menu,
.lang-dropdown:hover .lang-menu {
    display: flex;
}

.lang-dropdown.force-closed .lang-menu,
.lang-dropdown.force-closed:focus-within .lang-menu,
.lang-dropdown.force-closed:hover .lang-menu {
    display: none;
}

.lang-option {
    font: bold 12px/16px 'Open Sans', sans-serif;
    color: #111827;
    text-transform: uppercase;
    background: transparent;
    border: none;
    padding: 6px 8px;
    text-align: left;
    cursor: pointer;
}

.lang-option:hover {
    background: #fff;
    color: #99997E;
}

.offerte-btn {
    background-color: #faf8e7;
    opacity: 1;
    font: bold 12px/17px 'Open Sans', sans-serif;
    color: #99997E;
    text-align: center;
    text-transform: uppercase;
    padding: 10px;
    text-decoration: none;
    border-radius: 15px;
    border: none;
}

.offerte-btn:hover {
    background-color: #99997E;
    color: #faf8e7;
    cursor: pointer;
    transition: .5s;
}

.contact-btn {
    background-color: #99997E;
    opacity: 1;
    font: bold 16px/22px 'Open Sans', sans-serif;
    color: #faf8e7;
    text-align: center;
    text-transform: uppercase;
    padding: 10px 18px;
    text-decoration: none;
    border-radius: 15px;
    border: none;
}

.nav-left .contact-btn {
    font: bold 12px/17px 'Open Sans', sans-serif;

}

.contact-btn:hover {
    background-color: #faf8e7;
    color: #99997E;
    cursor: pointer;
    transition: .5s;
}

.search-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    background-color: #faf8e7;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.search-btn::before {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    top: 50%;
    left: 50%;
    transform: translate(-62%, -62%);
    border: 2px solid #99997E;
    border-radius: 50%;
    box-sizing: border-box;
}

.search-btn::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 2px;
    background: #99997E;
    border-radius: 1px;
    top: 55%;
    left: 50%;
    transform: translate(10%, 95%) rotate(45deg);
}

.search-btn:hover {
    cursor: pointer;
}

.login-btn {
    background-color: #111827;
    opacity: 1;
    font: bold 16px/22px 'Open Sans', sans-serif;
    color: #faf8e7;
    text-align: center;
    text-transform: uppercase;
    padding: 10px;
    text-decoration: none;
    border-radius: 15px;
    border: 1px solid #fff;
}

.login-btn:hover {
    color: #111827;
    background-color: #faf8e7;
    cursor: pointer;
    transition: .5s;
}

.zorg {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0 60px;
    position: absolute;
    top: 48vw;
    margin-top: 0;
    overflow: visible;

}

.zorg::before {
    content: none;
}

.zorg-list {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    z-index: 1;
}

.zorg p,
.zorg a {
    font: bold 18px/24px 'Open Sans', sans-serif;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    white-space: nowrap;
    flex: 0 0 auto;
    text-decoration: none;
}

.zorg-list .slick-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.zorg-list .slick-slide {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    outline: 0;
    box-sizing: border-box;
    width: auto;
    float: none;
}

.zorg-list .slick-slide p {
    transition: all .3s ease;
    cursor: pointer;
}

.zorg-list p {
    transition: all .3s ease;
    padding: 10px 10px;
    border-radius: 15px;
    display: inline-block;
}

.zorg-list a {
    padding: 10px 10px;
    border-radius: 15px;
    display: inline-block;
}

.zorg-list .slick-slide img {
    transition: transform .5s ease, opacity .5s ease;
}

.zorg-list p:hover,
.zorg-list a:hover {
    background-color: #faf8e7;
    color: #99997E;
    transform: translateY(-17px);
    cursor: pointer;
}

.zorg-nav {
    background-color: #F3F6FA;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 120;

    /* Perfecte centering voor de SVG */
    display: flex;
    justify-content: center;
    align-items: center;

    transition: background-color 0.3s ease;
}

/* Zorg dat de SVG niet te klein of te groot is */
.zorg-nav svg {
    width: 10px;
    height: auto;
    display: block;
}

.zorg-prev {
    left: 6vw;
    transform: translateY(-50%) scaleX(-1);
}

.zorg-next {
    right: 6vw;
}

.middle-hover {
    margin-top: 56vw;
    display: flex;
    flex-wrap: wrap;
    padding: 0 100px;
    box-sizing: border-box;
    justify-content: center;
    gap: 60px;
    background: linear-gradient(to top, #111827 3rem, transparent 3rem);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .4s ease, transform .4s ease;
}

.middle-hover.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.middle-hover strong,
.middle-hover b{
    color: #99997E;
}

.middle-hover h1 {
    text-transform: uppercase;
    font-family: Oswald, sans-serif;
    font-size: 36px;
    font-weight: lighter;
}

.middle-hover p {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    padding-bottom: 20px;
    padding-top: 20px;

}

.middle-hover .hover-text p:first-of-type {
    padding-top: 0;
}

.hover-main {
    flex: 0 1 550px;
}

.hover-text {
    flex: 0 1 400px;
}

.middle-hover img {
    flex: 0 0 100%;
    width: 600px;
    max-width: 70%;
    height: auto;
    margin: 40px auto 0 auto;
    display: block;
    margin-bottom: -60px;
}

.middle-section {
    background: linear-gradient(to bottom, #111827 40rem, transparent 40rem);
    width: 100%;
    height: 920px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 70px;
}

.middle-text {
    display: flex;
    flex-direction: column;
    color: #a9a9a9;
    align-items: center;
    max-width: 700px;
}

.btn-centra {
    background-color: #99997E;
    color: #fff;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 80%;
    right: 10%;
    z-index: 30;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    -webkit-appearance: none;
    appearance: none;
}

.image-wrapper .btn-centra {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.btn-centra:hover {
    background-color: #fff;
    color: #99997E;
    transition: 0.6s;

}

.middle-text h1 {
    font-family: Oswald, sans-serif;
    font-size: 40px;
    font-weight: lighter;
    color: #fff;
}

.middle-text h1 strong,
.middle-text h1 b{
    color: #fff;
}

.middle-text p {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-weight: lighter;
    margin-bottom: 8px;
}

.centra-nav {
    position: absolute;
    top: -30%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    background: 0 0;
    color: #fff;
    font-size: 44px;
    line-height: 1;
    cursor: pointer;
    z-index: 50;
}

.centra-prev {
    left: 1rem;
}

.centra-next {
    right: 1rem;
}

.images-centra {
    display: flex;
    gap: 100px;
    margin-top: 20px;
    justify-content: center;
    position: relative;
}

.images-centra img {
    height: auto;
}

.images-centra .image-wrapper:nth-of-type(2) {
    transform: scale(1.5);
    opacity: 1;
    z-index: 20;
}

.image-wrapper {
    position: relative;
    display: inline-flex;
}

.image-wrapper img {
    width: 300px;
    height: auto;
    display: block;
    border-radius: 15px;
}

.centra-caption {
    position: absolute;
    left: 14px;
    bottom: 22px;
    color: #fff;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.images-centra .centra-caption {
    left: 20px;
    bottom: 30px;
    max-width: 160px;
}

.images-centra .image-wrapper:nth-of-type(2) .centra-caption {
    max-width: none;
}

.images-centra .centra-caption h3 {
    margin: 8px 0 0 0;
    font: bold 14px/20px Oswald;
    text-shadow: 0 0 10px #00000065;
}

.images-centra .centra-tag {
    padding: 2px 2px;
}

.centra-tag {
    display: inline-block;
    background: #faf8e7;
    color: #99997E;
    font: bold 10px/14px 'Open Sans', sans-serif;
    padding: 4px 8px;
}

.product-section {
    margin-left: 100px;
}

.product-section h1 {
    font-family: Oswald, sans-serif;
    font-size: 50px;
    line-height: 45px;
    font-weight: 700;
    color: #99997E;
    text-transform: uppercase;
    letter-spacing: 0;
    text-align: left;
}

.product-section h2 {
    font-family: Oswald, sans-serif;
    font-size: 32px;
    font-weight: 200;
    color: #2e2e2e;
    text-transform: uppercase;
    letter-spacing: 0;
    text-align: left;
}

.product-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.product-subhead {
    display: flex;
    align-items: center;
    gap: 18px;
}

.product-subhead-cta {
    margin-left: 60px;
    background-color: #99997E;
    color: #faf8e7;
    border: none;
    border-radius: 15px;
    padding: 8px 14px;
    font: bold 12px/16px 'Open Sans', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
}

.product-pager {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #2e2e2e;
    text-transform: uppercase;
}

.pager-btn-left {
    background: 0 0;
    border: none;
    color: #2e2e2e;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.pager-btn-right {
    background: 0 0;
    border: none;
    color: #99997E;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.pager-count {
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.pager-current {
    color: #99997E;
}

.btn-black {
    margin-left: 500px;
    background-color: #000;
    opacity: 1;
    font: bold 14px/19px 'Open Sans', sans-serif;
    color: #faf8e7;
    text-align: center;
    text-transform: uppercase;
    padding: 10px 18px;
    text-decoration: none;
    border-radius: 25px;
    border: none;
    cursor: pointer;
}

.btn-black:hover {
    color: #000;
    background-color: #fff;
    border: 1px solid #000;
    transition: .5s;
}

.product-types {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.next-btn {
    background-color: #ece4e4;
    color: #99997E;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-types div {
    max-width: 300px;
}

.product-types div p {
    font-size: 10px;
}

.product-types img {
    width: 100%;
    transition: transform 250ms ease;
}

.product-types p {
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
}

.product-types h3 {
    color: #99997E;
    text-transform: uppercase;
    font-family: Oswald, sans-serif;
}

.product-types div:hover h3 {
    color: #111827;
}

.next-btn {
    position: relative;
    background-color: #ece4e4;
    color: #99997E;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all .3s ease;
    align-self: center;
    line-height: 1;
    padding: 0;
    font-size: 0;
}

/* De hover status: knop wordt breed en toont tekst */
.product-types div:hover .next-btn {
    width: 220px; /* Breed genoeg voor de tekst */
    height: 40px;
    border-radius: 999px;
    background-color: #99997E;
    color: transparent; /* Verbergt de > */
}

.next-btn::before {
    content: "\203A";
    color: currentColor;
    font-size: 18px;
    font-weight: 700;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -54%); /* iets hoger voor visuele center */
    line-height: 1;
    display: block;
    opacity: 1;
    transition: opacity .2s ease;
}

/* De tekst die verschijnt bij hover */
.next-btn::after {
    content: "Bekijk product \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0   ›";
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity .3s ease;
}

.product-types div:hover .next-btn::after {
    opacity: 1;
}

.product-types div:hover .next-btn::before {
    opacity: 0;
}

.next-btn {
    transition: width .3s ease, background-color .1s ease;
}

.product-types div:hover .next-btn::after {
    opacity: 1;
}

.product-types div:hover img {
    transform: scale(1.05);
}

.product-types div:hover {
    cursor: pointer;
}

.bottom-image {
    position: relative;
    width: 100%;
    border-radius: 24px;
    margin: 80px 0;
    overflow: visible;
    box-sizing: border-box;
    height: 1080px;

}

.bottom-image-media {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    overflow: hidden;
    z-index: 0;
}

.bottom-image-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.bottom-image-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, .5);
    z-index: 1;
    pointer-events: none;
}

.bottom-image::before {
    content: none;
}

.bottom-overlay {
    position: sticky;
    top: 20vh;
    left: 0;
    right: 0;
    margin: 0 auto;
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
    padding: 30px 36px;
    border-radius: 16px;
    transform: none;
    z-index: 1;
    box-sizing: border-box;
    width: calc(100vw - 80px);
    max-width: 800px;
}

.bottom-overlay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
}

.bottom-overlay-col {
    min-width: 0;
}

.bottom-overlay h2 {
    font: bold 22px/28px 'Open Sans', sans-serif;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

.bottom-overlay p {
    font: normal 14px/20px 'Open Sans', sans-serif;
    margin: 0 0 16px 0;
    opacity: .9;
}

.cta-btn {
    background-color: #99997E;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 999px;
    text-transform: uppercase;
    font: bold 12px/16px 'Open Sans', sans-serif;
    cursor: pointer;
    white-space: nowrap;
}

/* ==========================================================================
   Slanke "Banner"-block op productpagina's (lange, smalle CTA-banner).
   Het standaard .bottom-image-blok is een hero van 1080px hoog met een
   sticky overlay; daardoor bleef de hoogte gelijk, ook na het croppen van
   de afbeelding. Op productpagina's tonen we hetzelfde blok als een lage,
   brede banner met achtergrondfoto, titel, korte tekst en een link.
   Enkel scoped op .single-product zodat de grote hero-banner op andere
   pagina's ongewijzigd blijft. Geen database-wijziging nodig.
   ========================================================================== */
body.single-product .bottom-image {
    height: auto;
    /* !important nodig: responsive.css zet globaal
       `.bottom-image { min-height:auto !important; padding-bottom:0 !important }`
       (whitespace-fix boven de footer). Daardoor plakte de knop tegen de
       onderrand. We overschrijven dat enkel op productpagina's met een hogere
       specificiteit zodat de gelijke ademruimte boven/onder behouden blijft. */
    min-height: 380px !important;
    margin: 40px 0;
    padding: 48px 56px 52px !important;
    overflow: visible;
    display: flex;
    align-items: center;
}

/* Distrac-stijl: donkere scrim links voor leesbaarheid i.p.v. de witte
   wash + zwarte tekstbox (zoals de .section-4 hero-banner). */
body.single-product .bottom-image-media::after {
    background: linear-gradient(90deg,
        rgba(0, 0, 0, .65) 0%,
        rgba(0, 0, 0, .35) 40%,
        rgba(0, 0, 0, 0) 70%);
}

body.single-product .bottom-overlay {
    position: static;
    top: auto;
    transform: none;
    margin: 0;
    width: auto;
    max-width: 560px;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

body.single-product .bottom-overlay-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
}

/* Titel in distrac heading-stijl (Oswald, uppercase). */
body.single-product .bottom-overlay h2 {
    font: bold 34px/40px Oswald, sans-serif;
    text-transform: uppercase;
    margin: 0 0 12px 0;
}

body.single-product .bottom-overlay p {
    font: normal 16px/26px 'Open Sans', sans-serif;
    opacity: 1;
    margin: 0 0 24px 0;
    max-width: 46ch;
}

/* Link in distrac-knopstijl (zoals .contact-btn) i.p.v. de teal pill. */
body.single-product .bottom-image .cta-btn {
    display: inline-block;
    background-color: #99997E;
    color: #faf8e7;
    font: bold 16px/22px 'Open Sans', sans-serif;
    text-transform: uppercase;
    padding: 12px 24px;
    border-radius: 15px;
    border: none;
    text-decoration: none;
}

body.single-product .bottom-image .cta-btn:hover {
    background-color: #faf8e7;
    color: #99997E;
    transition: .5s;
}

/* Geen afgeronde hoeken op de productbanner. */
body.single-product .bottom-image,
body.single-product .bottom-image-media,
body.single-product .bottom-image-img {
    border-radius: 0;
}

/* ==========================================================================
   FAQ-accordion (faq-blok) - distrac-stijl.
   ========================================================================== */
.section-faq {
    width: 90%;
    max-width: 1000px;
    margin: 80px auto;
}

/* Titelopties (prompts.md #3): accentlijn onder de titel + uitlijning.
   Uitlijning zelf staat inline (text-align) op het titel-element; deze klassen
   geven de titel volle breedte (+ align-self) zodat text-align ook werkt binnen
   flex-gecentreerde containers, en regelen de positie van de accentlijn. */
.ttl-align-left,
.ttl-align-center,
.ttl-align-right {
    width: 100%;
    align-self: stretch;
}

.ttl-line::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    background: #99997E;
    margin: 14px 0 0 0;
    border-radius: 2px;
}

.ttl-line.ttl-align-center::after {
    margin-left: auto;
    margin-right: auto;
}

.ttl-line.ttl-align-right::after {
    margin-left: auto;
    margin-right: 0;
}

.faq-title {
    font: bold 33px/40px Oswald, sans-serif;
    text-transform: uppercase;
    color: #111827;
    margin: 0 0 24px 0;
}

.faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.faq-item {
    border-bottom: 1px solid #e4e8ed;
}

.faq-item:first-child {
    border-top: 1px solid #e4e8ed;
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 22px 4px;
    text-align: left;
    font: 600 18px/26px 'Open Sans', sans-serif;
    color: #111827;
    transition: color .3s;
}

.faq-question:hover {
    color: #99997E;
}

.faq-icon {
    position: relative;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    background: #99997E;
    transition: transform .3s, opacity .3s;
}

.faq-icon::before {
    top: 7px;
    left: 0;
    width: 16px;
    height: 2px;
}

.faq-icon::after {
    left: 7px;
    top: 0;
    width: 2px;
    height: 16px;
}

.faq-item.is-open .faq-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.faq-answer-inner {
    padding: 0 4px 22px 4px;
    font: normal 16px/26px 'Open Sans', sans-serif;
    color: #404040;
}

.faq-answer-inner a {
    color: #99997E;
    text-decoration: underline;
}

.bottom-section {
    display: flex;
    flex-direction: row;
    gap: 80px;
    margin: 80px 70px;
    width: 90%;
    padding: 0 80px;
    box-sizing: border-box;
    overflow-x: visible;
}

.bottom-main {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex: 0 0 20%;
    margin-left: 0;
}

.bottom-main h1 {
    color: #111827;
    font-weight: 200;
    margin-top: 0;
}

.bottom-main p {
    font: normal 20px/30px 'Open Sans', sans-serif;
}

.bottom-main h1 strong,
.bottom-main h1 b{
    font-weight: bold;
}

.bottom-columns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    margin-left: 0;
    max-width: 100%;
    box-sizing: border-box;
    align-items: stretch;
    overflow-x: visible;
}

.bottom-news-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    padding-top: 0;
}

.bottom-news-wrap .news-pager {
    position: absolute;
    top: -56px;
    right: 0;
    z-index: 2;
    margin-bottom: 0;
}

.bottom-section.news-slider-enabled .bottom-columns {
    display: block;
    width: min(1240px, 100%);
    overflow: hidden;
}

.bottom-section.news-slider-enabled .bottom-columns .slick-list {
    margin: 0 -12px;
    overflow: hidden;
    padding-right: 12px;
    box-sizing: border-box;
}

.bottom-section.news-slider-enabled .bottom-columns .column-card {
    margin: 0;
    min-width: 0;
}

.column-card {
    flex: 1; /* Geef alle kaarten gelijke breedte en laat ze groeien */
    min-width: 300px; /* Voorkom dat ze te smal worden */
    height: clamp(420px, 52vw, 560px);
    background: #f3f6fa;
    border-radius: 20px;
    display: flex;
    flex-direction: column; /* Stapel inhoud verticaal */
    overflow: hidden;
}

.card-content {
    padding: 30px 40px;
    flex-grow: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bottom-card-media {
    position: relative;
    width: 100%;
    line-height: 0;
    margin-top: auto;
}

.bottom-card-media img {
    width: 100%;
    height: clamp(180px, 22vw, 250px);
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.column-card:hover img {
    transform: scale(1.08);
}

.bottom-card-btn {
    position: absolute;
    left: 50%;
    top: -20px;
    transform: translateX(-50%);
    z-index: 10;
    background: #99997E;
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    cursor: pointer;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 28px;
}

.btn-label-hover {
    display: none;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.bottom-card-btn:hover,
.column-card:hover .bottom-card-btn {
    width: 140px;
    border-radius: 20px;
}

.bottom-card-btn:hover .btn-label,
.column-card:hover .btn-label {
    display: none;
}

.bottom-card-btn:hover .btn-label-hover,
.column-card:hover .btn-label-hover {
    display: block;
}

.bottom-columns h1 {
    font: 200 23px/33px Oswald, sans-serif;
}

.bottom-columns .card-content h1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.bottom-columns p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

.bottom-columns .card-content p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

.bottom-columns strong,
.bottom-columns b{
    color: #99997E;
}

.bottom-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 50px;
    row-gap: 30px;
    /* Footer zonder donkere achtergrond: leest mee met de (witte) pagina. */
    background: #fff;
    border-radius: 40px 40px 0 0;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding: 28px 40px 2px;
    align-items: start;
    font-size: .9rem;

}

.bottom-grid h1 {
    color: #111827;
    font-size: 18px;
    text-transform: uppercase;
}

.bottom-grid p {
    color: #111827;
    opacity: 1;
}

/* Sociale icons zijn witte glyphs; op de witte footer donker kleuren. */
.grid-icons img {
    filter: brightness(0);
}

.item-rij-1 {
    grid-column: span 3;
    margin: 24px 30px 16px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.item-rij-1 img:hover {
    cursor: pointer;
}

.grid-icons {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.contact-info p {
    margin: 2px;
    font-size: 14px;
}

.bottom-grid input {
    background-color: #fff;
    color: #111827;
    border: 1px solid #c7ccd4;
    border-radius: 15px;
    padding: 5px 10px;
    box-sizing: border-box;
    width: 100%;
    min-width: 260px;
    -webkit-text-fill-color: #111827 !important;
}

.bottom-grid>.item-rij-1:first-child input {
    width: 100%;
}

.bottom-grid>.item-rij-1:first-child button {
    padding: 5px 10px;
    border-radius: 15px;
    box-sizing: border-box;
    align-self: flex-start;
    font-size: 12px;
    white-space: nowrap;
}

.item-rij-1 h1 {
    font: bold 18px/20px 'Open Sans', sans-serif;
}

.item-rij-1 p {
    font: lighter 18px/30px 'Open Sans', sans-serif;
}

.item-rij-1 .contact-info p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 30px;
    margin: 2px;
}

.contact-link,
.contact-link:visited,
.contact-link:hover,
.contact-link:active,
.contact-link:focus {
    color: #111827;
    text-decoration: none;
}

.paragraph-grid p {
    font: 16px/22px 'Open Sans', sans-serif;
    margin: 0 10px;
}

.categorie {
    font: 16px/22px 'Open Sans', sans-serif;

}

.subcategorie {
    font: normal 14px/19px 'Open Sans' , sans-serif;
}

.paragraph-grid:hover p {
    cursor: pointer;
}

.grid-icons img {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    max-width: none;
    max-height: none;
    object-fit: contain;
    display: block;
    flex: 0 0 26px;
}

.item-rij-2 {
    grid-column: span 4;
    display: flex;
    align-items: center;
    margin: 10px 40px;
}

.item-rij-2 p {
    color: #111827;
    opacity: 1;
    font: 18px/22px 'Open Sans', sans-serif;
    text-wrap: nowrap;
}

.item-rij-1-kolom-3 {
    grid-column: span 3;
    margin: 34px 0 10px ;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.item-rij-1-kolom-3 h1 {
    margin: 0;
    padding-bottom: 5px;
    font: bold 18px/20px 'Open Sans', sans-serif;
    white-space: nowrap;
}

.item-rij-1-kolom-3 h1:hover {
    cursor: pointer;
}

.item-rij-2-kolom-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    grid-column: 10/13;
}

.bottom-grid>.item-rij-1:nth-child(4) {
    grid-column: 10/13;
}



.item-rij-2 img {
    width: 180px;
}

.paragraph-grid p {
    margin: 0;
    padding: 0;
}

.zorg-2 {
    position: relative;
    padding-top: 22vw;
    padding-bottom: 60px;
    margin-top: 0;
}

.zorg-2>img {
    position: absolute;
    top: -12vw;
    left: 0;
    width: 100%;
    height: 60vw;
    object-fit: cover;
    z-index: -1;
}

.zorg-2 h1 {
    font-family: Oswald, sans-serif;
    font-size: 38px;
    line-height: 38px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    color: #fff;
    text-shadow: 2px 2px 4px #00000080;
    text-transform: uppercase;
    text-align: left;
    opacity: 1;
    margin: 0 220px 0 220px;
}

.products-wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin: 30px 220px;
}

.product-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 16px 16px;
    border-radius: 20px;
}

.product-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-info h2,
.product-info p {
    margin: 0;
}

.product-info h2 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 18px;
    font-family: Oswald, sans-serif;
    color: #111827;

}

.product-info p {
    font-family: Oswald, sans-serif;
    font-size: 12px;
    line-height: 13px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    color: #717171;
    margin: 0;
}

.arrow-btn {
    border: none;
    font-weight: 700;
    background-color: #99997E;
    cursor: pointer;
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
    font-size: 20px;
    line-height: normal;
    padding-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    font-family: Arial, sans-serif;
    text-indent: 0;
    overflow: visible;
}

.arrow-btn:visited,
.arrow-btn:hover,
.arrow-btn:active,
.arrow-btn:focus {
    color: #fff;
    background-color: #99997E;
    text-decoration: none;
    outline: none;
}

.product-card:hover .arrow-btn {
    background-color: #fff;
    color: #99997E;
    transition: .5s;
    border: 2px solid #99997E;
}

.product-card:hover {
    transform: scale(1.2);
    cursor: pointer;
}

.overzicht {
    grid-column: 5;
    grid-row: span 2;
    background-color: #99997E;
    color: #fff;
    padding: 24px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.overzicht:hover>button {
    background-color: #2ec4b6;
    color: #fff;
    transition: .5s;
    border: 2px solid #fff;
}

.overzicht:hover {
    transform: scale(1.2);
    cursor: pointer;
}

.overzicht h2 {
    font-family: Oswald, sans-serif;
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    color: #fff;
    text-transform: uppercase;
    text-align: left;
    opacity: 1;
    margin: 0;
}

.overzicht .contact-btn {
    margin-top: auto;
    align-self: center;
}

.overzicht button {
    background-color: #fff;
    color: #99997E;
    padding: 8px 26px;
    border-radius: 15px;
    border: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 10px;
    justify-content: center;
    margin-top: 60px;
}

.section-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    margin: 140px auto 80px;
    width: 85%;
    max-width: 1200px;
    gap: 20px;
}

.section-2 h1 {
    font: 200 38px/48px'Oswald', sans-serif;
}

.section-2 p {
    font: 18px/28px'Open Sans', sans-serif;
}

.section-2 strong,
.section-2 b{
    color: #99997E;
}

.section-2 a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.section-2 .contact-btn:hover {
    transform: scale(1.2);
}
.info {
    grid-column: 1;
    grid-row: 1;
}

.images-big {
    grid-column: 2;
    grid-row: 1/span 2;
    display: flex;
        align-items: stretch;
    justify-content: center;
    object-fit: cover;
}

.images-big .image-card {
    width: 100%;
    height: 100%;
    position: relative;
}

.images-big img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 15px;
    background: #0000004D;
}

.images-big .image-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, 0) 100%) 0 0 no-repeat padding-box;
    border-radius: 15px;
    pointer-events: none;
}

.images-small {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.images-small img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    position: relative;
}

.images-small .image-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, 0) 100%) 0 0 no-repeat padding-box;
    border-radius: 15px;
    pointer-events: none;
}

.section-2 {
    margin-top: 250px;
}

.section-2 .image-card {
    position: relative;
    display: inline-block;
}

.section-2 .image-card img {
    display: block;
}

.section-2 .centra-caption {
    position: absolute;
    left: 20px;
    bottom: 12px;
    color: #fff;
    text-transform: uppercase;
    z-index: 2;
}

.section-2 .images-big .centra-caption {
    left: 40px;
    bottom: 40px;
}

.images-big .centra-caption {
    left: 20px;
    bottom: 20px;
}

.images-big .centra-caption h3 {
    font-family: Oswald, sans-serif;
    font-size: 28px;
    line-height: 28px;
    max-width: none;
}

.images-small .centra-caption h3 {
    font: bold 15px/21px Oswald;
    max-width: 120px;
}

.images-small .centra-caption .centra-tag {
    font: bold 9px/15px Open Sans;
    padding: 2px 4px;
}

.section-2 .centra-tag {
    display: inline-block;
    background: #faf8e7;
    color: #99997E;
    font: bold 10px/14px 'Open Sans', sans-serif;
    padding: 4px 8px;
}

.images-big .centra-tag {
    font-size: 16px;
    line-height: 20px;
    padding: 2px 4px;
}

.section-2 .image-btn {
    position: absolute;
    right: 44px;
    bottom: 36px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: none;
    background: #99997E;
    color: #fff;
    font: bold 18px/1 'Open Sans', sans-serif;
    cursor: pointer;
    z-index: 2;
    transition: background-color .6s ease, color .6s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}

.section-2 .image-btn svg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 16px;
    transform: translate(-50%, -50%);
    display: block;
    pointer-events: none;
}

.section-2 .image-btn svg path {
    stroke: currentColor;
    transition: stroke .6s ease;
}

.section-2 .image-btn:hover,
.section-2 .image-btn:focus {
    background-color: #fff;
    color: #99997E;
    cursor: pointer;
    outline: none;
}

.images-small .image-btn {
    bottom: 30px;
}

.section-3 {
    display: flex;
    flex-direction: row;
    margin: 100px auto;
    width: 85%;
    max-width: 1200px;
    gap: 50px;
    padding: 10px 0;
}

.section-3 h1 {
    font: 200 38px/48px Oswald, sans-serif;
}

.section-3 p {
    font: 18px/28px'Open Sans', sans-serif;
}

.section-3 strong,
.section-3 b{
    color: #99997E;
}

.section-3-info span,
.section-3-info b{
    color: #99997E !important;
}

.section-3 img {
    position: relative;
    display: block;
    border-radius: 40px;
    object-fit: cover;
    width: 750px;
    height: 30vw;
}

.section-3-info {
    align-self: center;
}

.section-4 {
    position: relative;
    width: 100%;
    min-height: 600px;
    border-radius: 24px;
    overflow: visible;
    margin: 40px 0;
    margin-bottom: 80px;
    background-blend-mode: overlay;
}

.section-4::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: transparent linear-gradient(90deg, #0000008D 0%, #0000005D 30%, #00000000 50%) 0% 0% no-repeat padding-box;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
    z-index: 1;
    pointer-events: none;
}

.section-4-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    z-index: 0;

}

.section-4 h1 {
    font: bold 38px/48px Oswald, sans-serif;
}

.section-4 p {
    font: 18px/28px'Open Sans', sans-serif;
}

.section-4-overlay {
    position: relative;
    top: 10vh;
    margin-left: 400px;
    max-width: 600px;
    color: #fff;
    padding: 30px 36px;
    border-radius: 16px;
    z-index: 2;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: 100%;
}

.product-pager-pg3 .pager-count,
.product-pager-pg3 .pager-current,
.product-pager-pg3 .pager-total {
    font: lighter 30px/55px Oswald, sans-serif;
    color: #000;
}

.product-pager-pg3 {
    display: none;
}

.section-5 {
    display: grid;
    grid-template-columns: minmax(0, 670px) minmax(0, 1fr);
    gap: 10px;
    /* Minder witruimte/titelzone bovenaan zodat de foto meer in beeld komt. */
    --section5-col-top-padding: 28px;
    max-width: 1542px;
    margin: 70px 140px 10px;
    background-color: #f3f6fa;
    box-shadow: 0 0 0 100vmax #f3f6fa;
    clip-path: inset(-100vmax -100vmax -5vmax -100vmax);
}

.small-img {
    position: absolute;
    bottom: 0;
    left: -320px;
    width: 300px;
    height: 270px;
    border-radius: 25px 25px 0 0;
    z-index: 10;
}

.col-1 {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: var(--section5-col-top-padding);
}

.section-5 > .col-1,
.section-5 > .col-2 {
    min-width: 0;
}

.section-5 > .col-1 {
    width: 100%;
    max-width: 670px;
}

.button-container {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.button-container button {
    padding: 12px 28px;
    border-radius: 30px;
    border: none;
    font: bold 12px 'Open Sans', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
}

.button-container button:first-child {
    background-color: #99997E;
    color: #fff;
}

.button-container button:first-child:hover {
    color: #99997E;
    background-color: #fff;
    transition: .5s;
}

.button-container button:last-child {
    background-color: #fff;
    color: #99997E;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .08);
}

.button-container button:last-child:hover {
    color: #fff;
    background-color: #99997E;
    transition: .5s;
}

.big-img {
    width: 100%;
    max-width: 670px;
    /* Grotere foto (was clamp(220px, 32vw, 420px)). */
    height: clamp(260px, 38vw, 500px);
    object-fit: cover;
    object-position: center center;
    border-radius: 25px 25px 0 0;

}

.big-img-wrap {
    position: relative;
    width: 100%;
    max-width: 670px;
}

.section5-dots {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 13;
}

.section5-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    opacity: 0.9;
    cursor: pointer;
    padding: 0;
}

.section5-dot.is-active {
    background: #99997E;
}

.section5-edge-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 13;


}

.section5-prev.section5-edge-btn {
    left: 0;
}

.section5-next.section5-edge-btn {
    right: 0;
}

.big-img.big-img--tall-crop {
    height: clamp(360px, 48vw, 640px);
    object-position: center center;
}

.col-2 {
    display: flex;
    flex-direction: column;
    padding-top: var(--section5-col-top-padding);
    transform: none;
    padding-left: var(--product-text-inset);
}

.small-img {
    display: none;
}

/* Downloads (titel + links) altijd onderaan het downloads_with_media-blok. */
.section-5 .col-2 .download-container {
    margin-top: auto;
}

.download-container h3 {
    font: bold 23px/35px 'Open Sans', sans-serif;
    color: #99997E;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.download-container>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    max-width: 250px;
}

.download-container div p {
    margin: 0;
    color: #000;
    text-decoration: underline;
    font: 18px/28px 'Open Sans', sans-serif;
}

.download-container div button {
    width: 45px;
    height: 32px;
    background-color: #000000;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.download-container div button:hover {
    transform: scale(1.2);
}

.download-container svg {
    width: 21px;
}

.col-1 img.main-img {


        width: 100%;
        max-width: 600px;
        height: 400px;
        object-fit: cover;
        border-radius: 25px 25px 0 0;

}

.pager-btn {
    background: 0 0;
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    color: #99997E;
    cursor: pointer;
}

.product-pager-pg3 .pager-btn {
    font-size: 0;
    line-height: 0;
}

.product-pager-pg3 .pager-btn::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}

.product-pager-pg3 .pager-btn.section5-prev::before {
    transform: rotate(-135deg);
}

.section-6 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 90%;
    max-width: 1542px;
    margin: 80px auto;
    gap: 0;
    margin-top: 20px;
    margin-bottom: 50px;
    /* Media niet laten uitrekken wanneer de tekstkolom langer is. */
    align-items: start;
}

.section-6 img {
    height: auto;
    border-radius: 25px;
    margin-bottom: 90px;
}

.section-6-left,
.section-6-right {
    display: flex;
    flex-direction: column;
}

.section-6-left {
    gap: 20px;
}

.section-6-left img {
    width: 100%;
    max-width: 670px;
}

/* Klikbare poster die de YouTube iframe vervangt op klik. */
.section-6-left .video-poster {
    position: relative;
    display: block;
    width: 100%;
    max-width: 670px;
    padding: 0;
    border: 0;
    background: #000;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    min-height: 500px;
}

.section-6-left .video-poster img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
    transition: transform .4s ease, opacity .3s ease;
}

.section-6-left .video-poster:hover img,
.section-6-left .video-poster:focus-visible img {
    transform: scale(1.03);
    opacity: 0.92;
}

.section-6-left .video-poster-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78px;
    height: 78px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: #99997E;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    transition: transform .25s ease, background-color .25s ease;
    pointer-events: none;
}

.section-6-left .video-poster:hover .video-poster-play,
.section-6-left .video-poster:focus-visible .video-poster-play {
    transform: translate(-50%, -50%) scale(1.08);
}

.section-6-left .video-poster-play svg {
    margin-left: 4px;
}

@media (max-width: 800px) {
    .section-6-left .video-poster {
        min-height: 0;
    }
}

.section-6 h3 {
    font-family: Oswald, sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: 0;
    color: #99997E;
    text-transform: uppercase;
    text-align: left;
    opacity: 1;
}

.section-6 p {
    font: 14px/24px 'Open Sans', sans-serif;
}

.section-6 ul {
    list-style-type: disc;
    padding-left: 20px;
}

.section-6 li {
    margin-bottom: 1px;
    color: #000;
    font: 14px/24px 'Open Sans', sans-serif;
}

.section-6 ul li::marker {
    color: #b3b298;
    font-size: 1.4em;
}

.hover-text ul, ol{
    margin: 0;
}



.product-container-p3 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.product-container-p3 h1 {
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    text-align: left;
    font-size: 25px;
}

.btn-product {
    background-color: #99997E;
    color: #fff;
    padding: 16px 28px;
    border-radius: 30px;
    border: none;
    font: bold 12px 'Open Sans', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
}

.btn-product,
.btn-product:visited,
.btn-product:active,
.btn-product:focus {
    color: #fff;
    text-decoration: none;
}

.btn-product:hover {
    background-color: #fff;
    color: #99997E;
    transition: .5s;
}

.section-7 {
    width: 90%;
    max-width: 1542px;
    margin: 80px auto;
    box-shadow: 0 0 0 100vmax #2b2f38;
    clip-path: inset(-6vmax -100vmax -6vmax -100vmax);
    background-color: #2b2f38;
}

.section-7--single-product {
    position: relative;
    box-shadow: none;
    clip-path: none;
    background: transparent;
    margin-top: 180px;
    /* Blok op halve hoogte; minder ruimte bovenaan zodat de foto's
       meer in beeld komen dan de titelbalk (was 60 / 520 / 60). */
    padding-top: 10px;
    min-height: 260px;
    padding-bottom: 30px;
}

.section-7--single-product::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background-color: #2b2f38;
    z-index: -1;
}

.section-7 .product-container-p3 {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    justify-content: flex-start;
    gap: 16px;
}

/* Titelbalk dichter op de foto's zetten (minder header, meer beeld). */
.section-7--single-product .product-container-p3 {
    margin-bottom: 8px;
}

.section-7 .product-container-p3 > a {
    margin-left: auto;
    margin-right: 0;
    transform: none;
}

.product-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 480px));
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    height: 500px;
    align-items: stretch;
}

.section-7--single-product .product-gallery {
    height: auto;
    /* Galerij op halve hoogte. */
    min-height: 125px;
}

.section-7--single-product .product-gallery > .img-left {
    display: none !important;
}

.section-7--single-product .product-gallery > .img-right {
    display: flex;
}

.section-7--single-product .product-gallery > .img-right:nth-of-type(n+5) {
    display: none !important;
}

.section-7--single-product .product-gallery > :nth-child(n+3) {
    display: flex !important;
}

.section-7--single-product .product-gallery > :nth-child(n+5) {
    display: none !important;
}

.product-gallery > :nth-child(n+3) {
    display: none;
}

.product-gallery>* {
    height: 100%;
}

.section-7--single-product .product-gallery > * {
    height: auto;
}

.product-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
    display: block;
}

.img-left {
    position: relative;
    width: 100%;
    max-width: 760px;
}

.img-left:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent linear-gradient(90deg, #0000004D 0, #00000000 100%) 0 0 no-repeat padding-box;
    pointer-events: none;
    z-index: 1;
}

.left-text {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
}

.left-text h2 {
    width: 100%;
    margin: 0 0 10px 0;
    z-index: 2;
    font: bold 12px/18px Oswald, sans-serif;
    color: #1118275E;
    margin-bottom: 0;
    text-transform: uppercase;
    text-shadow: 0px 0px 5px #00000080;
}

.left-text p {
    flex: 1;
    margin: 0;
    font: 14px/24px 'Open Sans', sans-serif;
}

.section-7--single-product .left-text h2 {
    font: bold 25px/35px Oswald, sans-serif;
    letter-spacing: 0;
    color: #FFFFFF;
    text-shadow: 0 0 5px #00000080;
    text-transform: uppercase;
}

.section-7--single-product .left-text p {
    text-align: left;
    font: normal normal normal 16px/26px 'Open Sans', sans-serif;
    letter-spacing: 0;
    color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
    position: relative;
    z-index: 2;
}

.left-text button {
    width: 48px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    color: #99997E;
    border: none;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 36px;
    font-weight: 700;
}

.section-7--single-product .left-text button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    padding: 0;
}

.section-7--single-product .left-text > a,
.section-7--single-product .left-text > a:visited,
.section-7--single-product .left-text > a:hover,
.section-7--single-product .left-text > a:active,
.section-7--single-product .left-text > a:focus {
    text-decoration: none !important;
}

.left-text button:hover {
    color: #fff;
    background-color: #99997E;
    transition: .5s;
}

.img-right {
    display: flex;
    flex-direction: column;
    background: #f3f6fa;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    width: 480px;
    max-width: 100%;
}

.section-7 .img-right {
    margin-left: -8px;
}

.section-7 .product-gallery {
    justify-content: start;
    column-gap: 30px;
}

.img-right h2 {
    padding: 30px 30px 0 30px;
    margin: 12px;
    font: bold 12px/18px Oswald, sans-serif;
    color: #1118275E;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.img-right p {
    padding: 10px 30px 10px;
    margin: 12px;
    font: 14px/24px 'Open Sans', sans-serif;
    display: none;
}

.img-right > a {
    align-self: center;
    margin-top: auto;
    margin-bottom: -20px;
    z-index: 2;
    line-height: 0;
    text-decoration: none;
}

.img-right > button {
    align-self: center;
    margin-top: auto;
    margin-bottom: -20px;
    z-index: 2;
}

.img-right button {
    align-self: center;
    background: #99997E;
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    margin-bottom: 0;
    z-index: 2;
    margin-top: 0;
    font-size: 20px;
}

.img-right button:hover {
    background-color: #fff;
    color: #99997E;
    transition: .5s;
}

.img-right img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    border-radius: 0 0 20px 20px;
}

.section-7--single-product .img-right img {
    height: 150px;
}

.section-7--single-product .img-right h2 {
    font: bold 25px/35px Oswald, sans-serif;
    letter-spacing: 0;
    color: #000000;
    text-shadow: none;
    text-transform: uppercase;
}

.section-7--single-product .img-right p {
    text-align: left;
    font: normal normal normal 16px/26px 'Open Sans', sans-serif;
    letter-spacing: 0;
    color: #000000;
}

.section-7--single-product .img-right button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    padding: 0;
}

.section-7--single-product .img-right > a,
.section-7--single-product .img-right > button {
    margin-bottom: -20px;
    z-index: 3;
}

.second-text {
    margin-top: 50px;
}

.section-8 {
    margin-bottom: 220px;
    padding-top: 40px;
    background: linear-gradient(to bottom, #111827 20rem, transparent 20rem);
}

.section-8 .product-container-p3 {
    width: 90%;
    max-width: 1542px;
    margin: 0 auto;
}

.product-container-main h1 {
    font-size: 25px;
}

.referentie-gallerij {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
    width: 100%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;

}

.referentie-gallerij .slick-list {
    overflow: visible;
    margin: 0 -20px;
}

.referentie-gallerij > div,
.referentie-gallerij .slick-slide > div {
    position: relative;
    flex: 0 0 400px;
    width: 400px;
    height: 300px;
}

.referentie-gallerij .slick-slide {
    margin: 0 20px;
    box-sizing: border-box;
}

.referentie-gallerij img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
}

.referentie-gallerij button,
.referentie-gallerij h2,
.referentie-gallerij span {
    position: absolute;
    color: #fff;
    z-index: 2;
}

.referentie-gallerij span {
    bottom: 80px;
    left: 30px;
    background: #faf8e7;
    color: #99997E;
    padding: 5px 5px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 3px;
}

.referentie-gallerij h2 {
    bottom: 10px;
    left: 30px;
    font-family: Oswald, sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    max-width: 70%;
}

.referentie-gallerij button {
    bottom: 40px;
    right: 30px;
    background: #99997E;
    border: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    cursor: pointer;
    color: #fff;
    transition: background-color .6s ease, color .6s ease;
}

.referentie-gallerij a {
    cursor: pointer;
    text-decoration: none;
}

.referentie-gallerij button svg {
    display: block;
}

.referentie-gallerij button svg path {
    stroke: currentColor;
    transition: stroke .6s ease;
}

.referentie-gallerij button:hover,
.referentie-gallerij button:focus {
    background-color: #fff;
    color: #99997E;
    cursor: pointer;
}

.product-pager-2 {
    display: flex;
    align-items: center;
    gap: 5px;
    top: 100%;
    left: 0;
}

.pager-btn-2 {
    background: 0 0;
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    cursor: pointer;
    color: #fff;
}

.pager-count-2 {
    font-family: Oswald;
    font-size: 25px;
    color: #fff;
}

.product-container-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 60px;
}

.section-5-product-container h1 {
    /* Line-height was gelijk aan font-size (33px) waardoor lange titels op
       2 regels tegen elkaar plakten; iets meer ruimte tussen de regels. */
    font: bold 33px/40px Oswald, sans-serif;
    margin-top: 63px;
    text-transform: uppercase;
    margin-bottom: 0;
}

.section-5-product-container h2 {
    font: lighter 23px/43px Oswald, sans-serif;
    text-transform: uppercase;
    color: #99997E;
    margin: 0;
}

.section-5-product-container p {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 28px;
}

.section-9 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin: 40px 80px 0;
}

.section-9 h1 {
    font: bold 43px/53px Oswald;
}

.section-9 p {
    font: normal normal normal 20px/30px Open Sans;
    margin-bottom: 40px;
}

.section-10 {
    display: flex;
    flex-direction: row;
    margin: 0 80px 100px;
    gap: 30px;
}

.section-10 #filter-form {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.section-10 h1 {
    font: bold 14px/20px Open Sans;
    color: #99997E;
}

.section-10 div {
    background: #f3f6fa;
    border-radius: 8px;
    padding: 0 10px;
    position: relative;
}

.section-10 #filter-form > div:hover {
    background: #99997E;
}

.section-10 .filter-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 130px;
    border: solid 2px #99997E;
    background: #fff;
    padding: 10px 12px;
    border-radius: 8px;
    z-index: 5;
}

.section-10 div:focus-within .filter-submenu,
.section-10 div:hover .filter-submenu {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-10 .filter-submenu p {
    margin: 0;
    font: 12px/16px 'Open Sans', sans-serif;
    color: #000;
}

.section-10 .filter-submenu label {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.section-10 .filter-submenu span {
    font: 12px/16px 'Open Sans', sans-serif;
    color: #000;
}

.filter-submenu div {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 5px;
    background: #fff;
    gap: 10px;
}

.section-10 .filter-submenu input[type=checkbox] {
    width: 14px;
    height: 14px;
    margin: 0;
}

.section-10 div:hover h1 {
    color: #f3f6fa;
}

.section-10 .filter-reset-item {
    display: block;
    cursor: pointer;
}

.section-10 .filter-reset-link {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
}

.section-10 div:hover h1 .filter-caret {
    rotate: 90deg;
    display: inline-block;
    transition: .2s;
}

.section-11 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    margin: 40px 80px;
    gap: 50px 10px;
}

body.page4 {
    background: linear-gradient(to bottom, transparent 32rem, #f3f6fa 32rem);
}

.section-11 > div {
    width: 360px;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.section-11 .product-card-clickable {
    cursor: pointer;
}

.section-11>div {
    border: 1px solid #1118275F;
}

.section-11 img {
    width: 100%;
    height: clamp(190px, 16vw, 250px);
    object-fit: cover;
    object-position: center;
    display: block;
}

.section-11-info {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.section-11 h2 {
    font: bold 12px/18px Oswald;
    color: #1118275E;
    margin-bottom: 0;
}

.section-11 h1 {
    font: bold 18px/20px Oswald;
    margin-top: 0;
    text-transform: uppercase;
}

.section-11 p {
    font: 12px/22px Open Sans;
    color: #717171;
}

.section-11 .product-excerpt {
    font: 12px/22px Open Sans;
    color: #717171;
}

.section-11 button {
    font: bold 14px/20px Open Sans;
    background: transparent;
    border: none;
    color: #99997E;
    padding: 8px;
}

.section-11-info button,
.section-11-info a {
    margin-top: auto;
    align-self: flex-start;
}

.section-11 button span {
    background: #99997E;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: white;
    font-size: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    line-height: 0;
    padding-bottom: 2px;
}

.section-11 div:hover button {
    background: #99997E;
    color: white;
    border-radius: 26px;
    padding: 8px 20px;
    transition: 0.5s;
}

.section-11 div:hover {
    cursor: pointer;
}

.section-11 div:hover img{
    transform: scale(1.2);
    transition: 0.5s;
}





.section-11 div:hover h1 {
    color: #99997E;
    transition: 0.5s;

}

.section-12{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F3F6FA;;
}

.dark-img {
    position: relative;
    width: 60%;
    border-radius: 20px;

}


.dark-img img {
    display: block;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    height: 280px;
    border-radius: 20px;
    background: #111827;
}

.dark-img:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #111827;
    opacity: 0.83;
    z-index: 2;
    border-radius: 20px;


}

.dark-img .dark-img-content {
    display: grid;
    grid-template-columns: 3fr 1fr;
    position: absolute;
    inset: 0;
    align-items: center;
    text-align: left;
    color: #ffffff;
    padding: 20px;
    z-index: 4;

}

.dark-img-content:first-child,
.dark-img-content:last-child {
    margin: 40px 80px;
    padding: 20px;
}

.dark-img-content button {
    padding: 10px 60px;
    white-space: nowrap;
}

.dark-img-content h1 {
    font: bold 38px/48px Oswald;
}

.section-13{
    gap: 7px;
    margin: 0 80px 80px;

    display: flex;
    justify-content: center;
    align-items: center;
}



.section-13 button {
    padding: 8px 30px;
    border-radius: 30px;

}



.number {
    padding: 6px 10px;
    font: normal normal normal 20px/20px Open Sans;
    cursor: pointer;
}

.section-13 .number .current {
    background-color: #99997E;
    border-radius: 5px;
    color: white;
    padding: 6px 10px;
    font: normal normal normal 20px/20px Open Sans;
    cursor: pointer;
}

/* Page 5 */

.section-14 img {
    position: absolute;
    top: 0vw;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0;
    transition: opacity 400ms ease-in-out;
}

.section-14 img.is-visible {
    opacity: 1;
}

.section-14.project-overview-banner {
    position: relative;
    min-height: clamp(300px, 36vw, 620px);
    overflow: hidden;
}

.section-14.project-overview-banner img {
    top: 0;
    object-position: top center;
    z-index: 0;
}

.section-14.project-overview-banner > div {
    z-index: 1;
}

/* Page 5 */
.section-14 > div {
    position: absolute;
    top: 22vw;
    left: 100px;
    max-width: 280px;
}


.section-14 > div > div  {
    display: flex;
    justify-content: space-between;
}

.section-14 span{
    color: white;
}

.centra-tag-alt {
    padding: 5px;
    border-radius: 10px;
    background: #99997E;
    font: bold 12px/17px Open Sans;
    align-self: center;
    display: inline-flex;
}



.section-14 h3 {
    font:  bold 36px/46px Oswald;
    color: white;
    margin: 0;
    text-shadow: 0 0 10px #00000080;
}

.pager-pg4 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 200px;
}
.pager-pg4 span

{
    font:  300 11px/52px Open Sans;
}

.pager-btn-pg4 {
    background: transparent;
    color: white;
    border: none;
    font-size: 25px;
}

.pager-btn-pg4 {
    cursor: pointer;
}

.section-15 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: min(calc(100% - 40px), 1120px);
    margin: 200px auto;
    margin-top: 900px;
    gap: 20px;
    scroll-margin-top: 100px;
}

@media (min-width: 1600px) {
    .section-15 {
        gap: 14px;
    }
}

@media (min-width: 2200px) {
    .section-15 {
        gap: 10px;
    }
}

.section-15 img {
}

.project-overzicht {
    margin-top: -300px;
    margin-left: -100px;
    gap: 10px;
}

.section-15 > .project-overzicht {
    width: auto;
    height: auto;
    overflow: visible;
}




.project-overzicht h1{
    font: bold 28px/53px Oswald;
    color: #99997E;

}

.project-overzicht p {

    font: normal 18px/28px Open Sans;
    max-width: 300px;
}

.project-overzicht h4 {
    font: lighter 18px/38px Oswald;
    color: #717171;
}

.project-overzicht h3 {
    font:  bold 14px/20px Open Sans;
    color: #99997E;
    display: inline-block;
    margin: 6px 14px 0 0;
    padding: 10px 20px;
    background: #F3F6FA;
    border-radius: 10px;

}

.s15-h3 {
    max-width: 340px;
}

.project-overzicht h3:hover {
    background: #99997E;
    color: white;
    cursor: pointer;
}

.section-15 > div {
    position: relative;
    width: 360px;
    height: 260px;
    overflow: hidden;
    border-radius: 20px;
    gap: 20px;
}

.section-15 div:nth-of-type(1) {
    overflow: visible;
}

.section-15 > div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.section-15 > div span,
.section-15 > div h2,
.section-15 > div button {
    position: absolute;
    z-index: 2;
}


.section-15 > div h2 {
    max-width: 220px;
}

.section-15 > div button {
    font-size: 22px;
    font-weight: 700;
}

.section-15 > div span {
    bottom: 80px;
    left: 20px;
    background: #FAF8E7;
    color: #99997E;
    padding: 2px;
    text-transform: uppercase;
    font: bold 10px/15px Open Sans;
}

.section-15 > div h2 {
    bottom: 20px;
    left: 20px;
    margin: 0;
    color: white;
    font-size: 18px;
    text-transform: uppercase;

}

.section-15 > div button {
    bottom: 20px;
    right: 20px;
    background: #99997E;
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
}

/* Page 6 */

.centra-tag-alt.pg6{
    background: #FAF8E7;
    color: #99997E;
    font: bold 16px/22px Open Sans;
    padding: 8px 14px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.section-14.pg6 {
    position: relative;
    isolation: isolate;
    min-height: clamp(320px, 42vw, 760px);
}

.section-14.pg6 > div:last-of-type {
    left: auto;
    right: 200px;
    top: 28vw;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.section-14.pg6 > div {
    position: absolute;
    top: 22vw;
    left: 200px;
    max-width: 440px;
}

.section-14.pg6 h3 {
    font:  bold 58px/63px Oswald;

}



.slider-prev, .slider-next {
    backdrop-filter: blur(30px);
    background:  0% 0% no-repeat padding-box;
    -webkit-backdrop-filter: blur(30px);
    font-size: 32px;
    border-radius: 50%;
    width: 43px;
    height: 43px;
    padding: 0;
    color: white;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    background: rgba(0, 0, 0, 0.1);
}

.slider-current {
    font: bold 16px/22px Open Sans;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 10px 30px;
    display: inline-block;
    border-radius: 27px;
    border: 1px solid #747272;
    background: rgba(0, 0, 0, 0.1);

}

.section-16 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 600px 200px 120px;
    gap: 30px;
}

/* Single project: keep first banner section visually first (no huge jump to next block) */
.single-project .section-14.pg6 + .section-16 {
    margin-top: 40px;
}

/* Single project: header overlays banner and banner starts at top of viewport */
.single-project .header-main {
    position: absolute;
    top: 41px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    margin: 0;
}

.single-project .section-14.pg6,
.single-project .section-14.pg6 img {
    margin-top: 0;
    top: 0;
}

.section-16 h1 {
    font: lighter 38px/48px Oswald;
    max-width: 580px;

}

.section-16 strong,
.section-16 b{
    color: #99997E;
}

.section-16 p {
    font: normal 18px/28px Open Sans;
    max-width: 520px;
}

.section-16 div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 10px;
}

.section-16 .contact-btn {
    align-self: flex-start;
    padding: 10px 28px;
    border-radius: 40px;
}

.single-project .section-16 {
    align-items: start;
}

.single-project .section-16 .s16-title {
    grid-column: 1 / -1;
    margin: 0 0 10px;
}

.single-project .section-16 .s16-col-2 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 0;
}

.section-17 {
    overflow: hidden;
    width: 100%;
    background: #111827;
    margin-bottom: 0 ;
}

/* Wanneer de (donkere) project-gallery het laatste blok is, witruimte laten
   vóór de footer zodat die als losse afgeronde kaart leest (zoals op /over-ons). */
.section-17:has(+ footer.bottom-grid),
.section-17:has(+ .bottom-grid-wrapper) {
    margin-bottom: clamp(90px, 10vw, 200px);
}

.section-17 h1 {
    color: white;
    text-align: center;
    margin: 80px;
    font:  bold 43px/58px Oswald;
}

.marquee {
    display: flex;
    overflow: hidden;
    gap: 40px;
    position: relative;
    user-select: none;
    margin-bottom: 80px;
}

.marquee-content {
    flex-shrink: 0;
    display: flex;
    min-width: 100%;
    gap: 40px;
    width: max-content;
}

.marquee img {
    height: 320px;
    width: 420px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 30px;
}

.marquee .wide {
    width: 820px;
}

.section-17 .pg17-item {
    position: relative;
    display: block;
    width: 420px;
    height: 320px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 30px;
}

.section-17 .pg17-item.wide {
    width: 420px;
}

.section-17 .pg17-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.section-17 .pg17-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 16px;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0));
    color: #fff;
    font: 600 14px/20px 'Open Sans', sans-serif;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.section-17 .pg17-item:hover .pg17-hover {
    opacity: 1;
}

.scroll {
    animation: section17-scroll 60s linear infinite;
}

.section-17 .marquee-static {
    overflow: visible;
}

.section-17 .marquee-static .marquee-content {
    min-width: 0;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}


@keyframes section17-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-100% - 40px));
    }
}

.section-18 {
    background: #F3F6FA;
    padding-bottom: 60px;
}

.section-18 .product-container-main h1 {
    color: #99997E;
}

.section-18 .pager-btn-2,
.section-18 .pager-count-2 {
    color: #111827;
    font-weight: lighter;

}



.section-18 .product-container-p3{
    margin: 0 80px 0;
}

.section-18 .btn-product{
    background:#111827;
}
.section-18 .btn-product:hover {
    color: #111827;
    background-color:  #FAF8E7;
    cursor: pointer;
    transition: 0.5s;
}

.section-18 .product-container-p3{
    padding-top: 80px;
}

.section-18 .section-11 > div {
    width: 360px;
    background: white;
}

.section-18 .section-11 img {
    width: 100%;
}

.section-18 .section-11 {
    grid-template-rows: 1fr;
}

.single-project .section-18 .section-11 {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 20px;
}

.single-project .section-18 .section-11 > div {
    flex: 0 0 360px;
}


.section-19 {
    display: flex;
    margin: 50px 50px 100px;

}

.contact-container {
    display: flex;
    flex-direction: column;
    max-width: 470px;
    gap: 10px;
    margin: 0 100px;



}

.section-19 h1{
    font: bold 43px/53px Oswald;

}

.section-19 strong,
.section-19 b{
    color: #99997E;
}

.section-19 p {
    color: #717171;
    font: normal 18px/28px Open Sans;
    max-width: 360px;
    margin-top: 0;

}

.contact-container button:nth-of-type(2) {
    color: #111827;
    background: none;
    border: 1px solid #111827;
}

.contact-container button {
    max-width: 170px;
    gap: 20px;
    border-radius: 27px;
}

.contact-container button:nth-of-type(2):hover {

    background: #111827;
    color: white;
}

.question-form label {
    display: block;
    font: bold 12px/17px Open Sans;
}

.question-form  {
    display: flex;
    flex-direction: column;
    padding: 50px 80px;
    background: #F3F6FA;
    gap: 10px;
    box-shadow: 0px 0px 30px #00000019;
    border-radius: 20px;
    margin-left: 200px;

    margin-top: 50px;
}

.question-form button {
    min-width: 260px;
    min-height: 50px;
    border-radius: 25px;
    align-self: flex-end;
}

.question-form  h1 {
    font:  bold 18px/43px Oswald;;
}

.question-form strong,
.question-form b{
    color: #99997E;
}

.question-form input {
    width: 262px;
    height: 25px;
    border: 0.5px solid #99997E;
    border-radius: 10px;
    padding: 5px 10px;
    font: normal 12px/17px Open Sans;
}

.form-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.form-main {
    display: flex;
    gap: 20px;

}

.form-content {
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-container.vraag textarea {
    width: 566px;
    height: 100px;
    resize: none;
    font: normal 12px/17px Open Sans;
    border: 0.5px solid #99997E;
    border-radius: 10px;
    padding: 5px 10px;

}

/* Page 7 */

.pg7 {
    background: #F2F6FA;
}

.section-20 {
    margin: 0 80px 0 140px;
    display: flex;
    gap: 80px;

}

.project-overzicht.pg7 {
    margin-top: 0;
    margin-left: 0;
    gap: 10px;
}

.project-overzicht.pg7 h1 {
    font: bold 43px/53px Oswald;
}

.project-overzicht.pg7 p {
    font: normal  18px/28px Open Sans;
}



.news-container {
    border: 1px solid #1118275F;
    width: 320px;
    height: 450px;
    background: white;
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 20px ;
    overflow: hidden;
}

.news-container button {
    position: absolute;
    bottom: 207px;
    left: 50%;
    transform: translate(-50%, 50%);
    background-color: #99997E;
    color: #FAF8E7;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    box-sizing: border-box;
    font-size: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
}

.news-container h1{
    font: lighter 18px/28px Oswald;
    padding: 20px 30px 0;
    margin-bottom: 0;
}

.news-container strong  {
    font-weight: bold;
}

.news-container p {
    font: normal 12px/22px Open Sans;
    color: #707070;
    padding: 20px 30px 10px;
    margin-top: 0;

}

.news-container img {
    width: 100%;
    height: 211px;
    border-radius: 0 0 20px 20px;
    bottom: 0;
    display: block;
    object-fit: cover;
    object-position: center center;



}

.news-container > a:last-of-type {
    display: block;
    margin-top: auto;
}

.news-main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 20px;

    margin-top: 200px;
}

.news-container:hover img{
    transform: scale(1.1);
    transition: 0.3s;
}

.news-btn-overlay:hover
{
    cursor: pointer;
}

.section-13.alt {
    margin-left: 360px;
}

/* Page 8 */

.section-21 {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.section-21 h1 {
    font:  bold 14px/20px Open Sans;
    color: #99997E;
    display: inline-block;
    margin: 6px 14px 0 0;
    padding: 10px 20px;
    background: #F3F6FA;
    border-radius: 10px;
}

.section-21 h2 {
    font:  bold 43px/58px Oswald;
    max-width: 900px;
    text-align: center;
}

.section-21 h3 {
    font: lighter  16px/24px Open Sans;
}

.section-21 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
}

.section-21 h1 {
    font: bold 14px/20px 'Open Sans', sans-serif;
    color: #99997E;
    display: inline-block;
    margin: 6px 14px 0 0;
    padding: 10px 20px;
    background: #F3F6FA;
    border-radius: 10px;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
}


.section-21 h1:hover {
    background: #99997E;
    color: transparent;
}

.section-21 h1:hover::after {
    content: "ZIEKENHUIS";
    font: bold 14px/20px 'Open Sans', sans-serif;

    color: #F3F6FA;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    white-space: nowrap;
}

.section-21 h2 {
    font:  bold 43px/58px Oswald;
    max-width: 900px;
    text-align: center;
}

.section-21 h3 {
    font: lighter  16px/24px Open Sans;
}

.img-container {
    width: 100%;
    position: relative;
}


.img-container img {
    width: 1200px;
    display: block;
    margin: 0 auto;
    height: 600px;
    border-radius: 30px;
    object-fit: cover;
}

.s21-slider {
    position: absolute;
    bottom: 3%;
    left: 45%;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;

}

.s21-slider button {
    background: none;
    color: white;
    border: none;
    cursor: pointer;
    width: 19px;
    height: 29px;



}

.s21-prev {
    transform: scaleX(-1);
}

.dots-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.circle {
    width: 10px;
    height: 10px;
    border: 2px solid white;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.circle.active {
    background: white;
}

.section-22 {
    display: flex;
    width: 100%;
    max-width: 1200px;
    margin: 100px auto;
    gap: 50px;
}

.text-media {
    max-width: 720px;
}

.text-media p {
    font: normal 16px/26px Open Sans;
}

.section-22 .text-media ul,
.section-22 .text-media ol,
.section-22 .text-media li {
    font: normal 16px/26px Open Sans;
}

.text-media h1 {
    font: bold 22px/26px Oswald;
    margin: 30px auto;
}

.img-video img {
    height: 400px;
    width: 100%;
    border-radius: 30px;
}

.img-video {
    position: relative;

}

.img-video div:nth-of-type(1){
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.quote {
    border-left: 3px solid #99997E;;
    margin: 40px 0;
    display: flex;
    align-items: center;
    flex-direction: column;
}


.quote-content {
    margin-left: 30px;
}

.quote-content div:nth-of-type(1) {
    margin:0;
}

.quote > div {
    align-self: flex-start; /* affects the wrapper that contains svg */
}

.quote svg{
    width: 28px;
    height: 28px;
    display: block;
    margin-left: 30px;


}


.quote h1 {
    font: lighter 25px/30px Oswald;
    margin: 12px 0;
    margin-left: 30px;


}


.s22-card-main {
    background: #F3F6FA;
    padding: 20px;
    width: 430px;
    border-radius: 30px;
    box-sizing: border-box;
    overflow: hidden;
    max-height: 760px;
}

.s22-card-main h1 {
    font: bold 25px/55px Oswald;
    color: #99997E;
    margin-left: 20px;
    margin-bottom: 0;

}

.s22-card-main h2 {
    font: lighter 14px/20px Oswald;
    color: #99997E;
    margin-bottom: 0;
    margin-top: 0;
}

.s22-card-main p {
    font: lighter 16px/22px Oswald;
    margin-top: 0;
}

.card-sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 20px;

}

.card-sub-content {
    flex: 1 1 auto;
    min-width: 0;
}

.card-sub-link {
    margin-left: auto;
    flex: 0 0 auto;
}

.card-sub p {
    max-width: 300px;
    margin: 0;
}

.card-sub + .card-sub {
    margin-top: 8px;
}

.card-sub button {
    background: #111827;
    border: none;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.card-sub button:hover {
    background: #99997E;
    cursor: pointer;
    transition: 0.3s;
}

.card-sub-2 {
    display: flex;
    gap: 66px;
    margin-bottom: 30px;
}

.card-sub-2 h1 {
    font:  bold 16px/22px Open Sans;
    color: #111827;
    text-decoration: underline;
    margin-bottom: 10px;
}

.card-sub-2 button {
    border: none;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F3F6FA;;
    cursor: pointer;
}

.card-bottom {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    background: #111827;
    padding: 20px;

    box-sizing: border-box;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -20px;
    border-radius: 30px;
}

.card-bottom h1 {
    font: bold 25px/55px Oswald;
    color: white;
    margin-left: 20px;
}

.card-bottom p {
    font:  lighter 15px/24px Open Sans;
    color: white;
    margin-left: 20px;
}

.card-bottom input {
    background: #1E293C;
    height: 72px;
    border-radius: 15px;
    border: none;
    margin: 0 20px 0;
    padding-left: 16px;
    color: white;
    font: normal 16px/26px Open Sans;
}

.card-bottom button {
    margin: 10px 20px 20px;
    font:  bold 16px/22px Open Sans;
    border-radius: 23px;
    padding: 10px;

}

.section-23 {
    padding: 40px 0 120px;
    margin-bottom: 0px;
    background: #F3F6FA;
}

.s23-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95%;
    max-width: 1500px;
    margin: 0 auto 30px;
    gap: 24px;
}

.s23-head.s23-head--few-items {
    justify-content: space-around;
}

.s23-head h1 {
    font: bold 35px/45px Oswald;
    color: #99997E;
}

.s23-slider {
    min-width: 100px;
    display: flex;
    align-items: center;
    font: 300 30px/1.2 Open Sans;
    color: #99997E;
    gap: 10px;
}

/* Teller + pijlen (.s23-slider) worden in JS getoond/verborgen: enkel
   zichtbaar wanneer er meer varianten zijn dan er passen (iets om te sliden). */

.s23-slider svg {
    display: block;
}

.s23-slider button {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    line-height: 0;
}

.s23-content {
    width: 95%;
    max-width: 1500px;
    margin: 0 auto;
}

.s23-content h1 {
    font: lighter 25px/35px Oswald;
    padding: 50px 50px 0;
    margin: 0;
}


.s23-content strong {
    font-weight: bold;
}

.s23-content p {
    font: lighter 16px/26px Open Sans;
    padding: 0px 50px 10px;
    margin: 0;
}

.s23-content h3 {
    padding: 0 50px;
}

.s23-content ul {
    padding-left: 50px;
    padding-right: 50px;
    font: lighter 16px/26px Open Sans;
}

.s23-content img {
    width: 100%;
    display: block;
    margin-top: auto;
    flex-shrink: 0;
    border-radius: 0 0 20px 20px !important;
}

.s23-content .s23-card  button {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #99997E;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    margin: 0 auto -25px;
    cursor: pointer;
}


.s23-card {
    width: 100%;
    position: relative;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 !important;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
}

.single-product .section-23.alt .s23-card {
    min-height: 620px;
    justify-content: flex-start;
    gap: 6px;
}

.s23-card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.s23-card .card-text {
    flex: 1 1 auto;

}

.single-product .section-23.alt .s23-card .card-text {
    min-height: 16px;
    margin-top: 10px;
}

.s23-card > img {
    display: block !important;
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: center ;
    background: #fff;
    margin-top: 0;
    vertical-align: bottom;
}

/* Kaarten zonder beschrijving krijgen vaak kleine, vierkante product-uitsneden
   (bv. 260x260). Met object-fit:cover in een hoge slot werden die fors uitvergroot
   en bijgesneden -> "veel te lang". contain toont de volledige afbeelding,
   gecentreerd op de witte kaart (geen lelijke letterboxing want al op wit). */
.single-product .section-23.alt .s23-card.s23-card--no-description > img {
    height: auto;
    max-height: 360px;
    object-fit: contain;
    object-position: center;
    padding: 0;
    box-sizing: border-box;
}

/* Zonder beschrijving niet de lege tekstzone laten uitrekken (flex:1 1 auto duwde
   de afbeelding naar onder -> grote witruimte erboven). De inhoud wordt verticaal
   gecentreerd zodat de kleine afbeelding netjes in het midden van de kaart staat. */
.single-product .section-23.alt .s23-card--no-description {
    justify-content: center;
}
.single-product .section-23.alt .s23-card--no-description .card-text {
    flex: 0 0 auto;
    min-height: 0;
}

/* Single post: force equal text block height across "Andere blogberichten" cards.
   LET OP: enkel voor blogberichten, NIET voor producten. Op een productpagina heeft
   <body> ook de klasse 'single', waardoor deze min-hoogtes op de uitvoeringen-kaarten
   lekten: elke beschrijvings-<p> werd 156px hoog -> reusachtige kaarten met grote
   witruimte. :not(.single-product) houdt het beperkt tot echte blogberichten. */
body.single:not(.single-product) .section-23 .s23-card h1 {
    min-height: 60px;
}

body.single:not(.single-product) .section-23 .s23-card p {
    min-height: 156px;
}

.s23-card:hover img {
    transform: scale(1.1);
    transition: 0.3s;
    cursor: pointer;
}

.s23-card svg {
    width: 25px;
    height: 18px;
    display: block;
}



.s23-content .slick-list {
    margin: 0 -20px;
}

.s23-content .slick-slide {
    margin: 0 20px;
    box-sizing: border-box;
}

.s23-content .slick-slide > div {
    height: 100%;
}

.s23-content .slick-slide .s23-card {
    height: 100%;
}

.pg8 {
    background: linear-gradient(
            to bottom,
            transparent 154rem,
            #F3F6FA 154rem
    );

}

/* Page 9 */

.login-section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 90px - 300px);
    padding: 60px 20px;
}

.login-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0px 0px 30px #00000019;
    max-width: 400px;
    width: 100%;
    padding: 45px 50px;
    text-align: center;
}

.login-logo {
    width: 200px;
    margin-bottom: 20px;
}

.login-description {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #717171;
    font-weight: 400;
    margin-bottom: 30px;
    line-height: 1.5;
}

.login-form {
    text-align: left;
}

.login-form label {
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    color: #1a1a1a;
    display: block;
    margin-bottom: 8px;
}

.login-form input[type="email"],
.login-form input[type="password"],
.login-form input[type="text"]
{
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #000;
    border-radius: 8px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    margin-bottom: 20px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.login-form input[type="email"]:focus,
.login-form input[type="password"]:focus {
    border-color: #99997E;
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 400 !important;
    text-transform: none !important;
    color: #000;
    cursor: pointer;
}

.remember-me input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #99997E;
    cursor: pointer;
}

.remember-me span {
    line-height: 1;
}

.forgot-password {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #99997E;
    text-decoration: none;
}

.forgot-password:hover {
    text-decoration: underline;
}

.login-btn-submit {
    width: 100%;
    padding: 14px;
    background-color: #99997E;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.login-btn-submit:hover {
    background-color: #2ec4b6;
}

.register-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #717171;
    margin-top: 25px;
}

.register-link {
    color: #99997E;
    font-weight: 700;
    text-decoration: none;
}

.register-link:hover {
    text-decoration: underline;
}

/* Page 10 */

/* ==================== CONTACT PAGE LAYOUT ==================== */
.contact-page {
    display: flex;
    gap: 40px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 60px 20px;
    align-items: stretch;
}

/* ==================== LEFT COLUMN ==================== */
.contact-left {
    flex: 1;
    min-width: 0;
}

.contact-heading {
    font-family: 'Oswald', sans-serif;
    font-size: 45px;
    font-weight: 700;
    line-height: 55px;
    color: #000;
    margin-bottom: 12px;
    margin-top: 0;
}

.contact-heading span {
    color: #99997E;
}

.contact-subtitle {
    color: #000000;
    margin-bottom: 30px;
    max-width: 650px;
    font: normal 20px/30px Open Sans;
}

/* Contact Cards Row */
.contact-cards {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.contact-card {
    flex: 1;
    text-align: left;
}

.contact-icon {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 8px;
    color: #333;
    flex-shrink: 0;
}

.contact-icon svg {
    width: 20px;
    height: 20px;
}

.contact-label {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: #99997E;
    margin: 0 0 8px 0;

}

.contact-value {
    font-size: 12px;
    color: #333;
    line-height: 1.4;
    margin: 0;
    text-decoration: none;
    display: block;
}

.contact-value,
.contact-value:link,
.contact-value:visited,
.contact-value:active,
.contact-value:focus {
    color: inherit;
    text-decoration: none;
}


.search-card-link,
.search-card-link:visited,
.search-card-link:hover,
.search-card-link:active,
.search-card-link:focus {
    text-decoration: none;
}

.contact-value:hover {
    color: #99997E;
}

/* ==================== SHOWROOMS ==================== */
.showrooms-heading {
    font-family: 'Oswald', sans-serif;
    font-size: 35px;
    line-height: 55px;
    font-weight: 800;
    color: #000;
    margin-bottom: 20px;
}

.showrooms-row {
    display: flex;
    gap: 20px;
}

.showroom {
    flex: 1;
}

.showroom-name {
    font-size: 16px;
    font-weight: 700;
    color: #99997E;
    margin: 0 0 8px;
}

.showroom-contact {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #333;
    margin-bottom: 4px;
}

.showroom-address {
    font-size: 12px;
    color: #333;
    margin-bottom: 12px;
}

a.showroom-link:any-link,
a.showroom-link:visited,
a.showroom-link:link,
a.showroom-link:active,
a.showroom-link:focus {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    text-decoration: none !important;
}

a.showroom-link:hover {
    color: #99997E !important; /* jouw hoverkleur */
    -webkit-text-fill-color: #99997E !important;
    text-decoration: none !important;
}

.showroom-link {
    color: #333;
    text-decoration: none;
}

.showroom-link:hover {
    color: #99997E;
}

.info-icon {
    display: inline-flex;
    vertical-align: middle;
}

.info-icon svg {
    width: 14px;
    height: 14px;
}

.hours-title {
    font-size: 13px;
    font-weight: 700;
    color: #000;
    margin: 0 0 6px;
}

.hours-grid {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 2px 12px;
    font-size: 12px;
    color: #333;
    margin-bottom: 20px;
}

.hours-grid span:nth-child(4n+1),
.hours-grid span:nth-child(4n+3) {
    font-weight: 600;
}

.map-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.map-embed {
    width: 100%;
    height: 200px;
    background: #D5DBE1;
}

.map-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(100%);
}

.map-bar {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    background: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.map-bar p {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.route-btn {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #99997E;
    border: none;
    padding: 8px 16px;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.route-btn:hover {
    background: #99997E;
    color: #faf8e7;
}

/* ==================== RIGHT COLUMN / FORM CARD ==================== */
.contact-right {
    width: 580px;
    flex-shrink: 0;
    display: flex;
}

.contact-form-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0px 0px 30px #00000019;
    padding: 40px;
    flex: 1;
}

.form-heading {
    font-family: 'Oswald', sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 55px;
    color: #99997E;
    margin: 0 0 10px 0;
}

/* Tabs */
.form-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.form-tab {
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    background: #F3F6FA;
    color: #000;
    transition: all 0.2s;
}

.form-tab.active {
    background: #99997E;
    color: #fff;
}

.form-tab:hover:not(.active) {
    background: #e4e8ed;
}

/* Form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row {
    display: flex;
    gap: 12px;
}

.form-row--2col .form-group {
    flex: 1;
}

/* Address row */
.form-row--address {
    display: flex;
    gap: 12px;
}

.form-row--address .addr-half {
    flex: 1;
    display: flex;
    gap: 8px;
}

.form-row--address .addr-half > div {
    flex: 1;
}

.form-row--address .addr-half > .addr-col-nr {
    flex: 0 0 70px;
}

.form-row--address .addr-half > .addr-col-postcode {
    flex: 0 0 90px;
}

.form-row--address label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.form-row--address input {
    width: 100%;
    border: 1px solid #99997E;
    border-radius: 8px;
    padding: 6px 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}

.form-group label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    border: 1px solid #99997E;
    border-radius: 8px;
    padding: 6px 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #99997E;
}

.form-group--full {
    width: 100%;
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

/* Buttons */
.form-actions {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-top: 8px;

}

.btn-file {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 50px;
    cursor: pointer;
    background: #fff;
    color: #99997E;
    border: 2px solid #99997E;
    transition: background 0.2s;
}

.btn-file:hover {
    background: #fef0ed;
}

.btn-submit {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 16px 28px;
    border-radius: 50px;
    cursor: pointer;
    background: #99997E;
    color: #fff;
    border: 2px solid #99997E;
    transition: background 0.2s;
    flex: 1;

}

.btn-submit:hover {
    background: #2ec4b6;
}

/* Page 11 */

.section-24 {
    width: 80%;
    margin: 40px auto;
}

.section-24 img {
    width: 100%;
    display: block;
    object-fit: cover;
    height: 500px;
    border-radius: 40px;
}

.section-24.alt {
    width: 100%;
    margin: -90px 0 40px;
    padding-top: 0;
    overflow: hidden;
}

.section-24.alt img {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -5vw;
    height: 40vw;
    object-fit: cover;
    border-radius: 0;
}

.section-24.alt .title-text {
    width: min(1100px, 92%);
    margin: 50px auto 80px;
    justify-content: center;
    align-items: center;
    gap: 80px;
}

.section-24.alt .title-text > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-24.alt .title-text h1 {
    margin: 0 0 18px;
    text-align: center;
}

.section-24.alt .title-text p {
    margin: 0;
    max-width: 620px;
}

.section-24.alt .title-text .contact-btn {
    align-self: center;
}

.title-text {
    display: flex;
    flex-direction: row;
    gap: 30px;
    margin-top: 50px;
}

.title-text button {
    width: 200px;
    border-radius: 23px;
    font: bold 16px/22px Open Sans;
    min-width: 200px;
}

.title-text h1 {
    font: bold 45px/55px Oswald;

}

.title-text p {
    max-width: 690px;
    font: normal 20px/30px Open Sans;
}

.section-24:not(.alt) .title-text {
    width: min(1100px, 92%);
    margin: 50px auto 0;
    justify-content: center;
}

.section-24:not(.alt) .title-text > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-24:not(.alt) .title-text h1,
.section-24:not(.alt) .title-text p {
    text-align: left;
}

.section-24:not(.alt) .title-text .contact-btn {
    align-self: center;
}

.section-3.alt.reverse > .section-3-info {
    order: -1;
}



.section-3.alt h1 {
    font:  bold 30px/35px Oswald;
    text-transform: uppercase;
}

.section-3.alt p {
    font: normal normal normal 20px/30px Open Sans;
}

.section-3.alt button {
    width: 188px;
    border-radius: 23px;
    font:  bold 16px/22px Open Sans;
}

.section-3.alt.reverse  {
    background: #F3F6FA;
}

.section-3.alt {
    margin: 40px 0;
    padding: 100px 90px;

}

.section-25 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60px;



}



.section-25 h1 {
    color: #111827;
    font: bold 45px/60px Oswald;
    max-width: 756px;
    display: block;
    width: 100%;
    text-align: left

}

.section-25 h1:nth-of-type(1) {
}


.section-25 p {
    font: normal 16px/26px Open Sans;
    max-width: 756px;

}

.section-26 {
    background: #111827;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 100px 0;

}

.section-26 svg {
    width: 45px;
    margin: 0;

}

.section-26 h1 {
    font: italic normal 300 60px/70px Open Sans;
    color: white;
    max-width: 1180px;
    white-space: pre-line;
    margin: 0 0 30px;
}

.section-26 p {
    color: #FAF8E7;
    font:  bold 20px/40px Oswald;
}

.section-26 strong,
.section-26 b
{
    color: #99997E;
}

.pg11 {
    background: linear-gradient(
            to top,
            #F3F6FA 0 50rem,
            transparent 50rem 100%


    );
}

/* Wordpress */

.mega-col p a{text-decoration:none;color:inherit;display:flex;align-items:center;justify-content:space-between;width:100%}.mega-col p a:hover{color:#99997E}.mega-col p a .mega-btn{opacity:0;transform:translateX(-4px);transition:opacity .2s ease,transform .2s ease}.mega-col p a:hover .mega-btn{opacity:1;transform:translateX(0)}
.nav-left .nav-item:visited {
    color: #fff !important;
}

.offerte-btn:visited:hover {
    color: #FAF8E7 !important;

}

.offerte-btn:visited {
    color: #99997E !important;

}

.contact-btn:visited {
    color: #faf8e7;
}

.contact-btn:hover,
.contact-btn:visited:hover {
    color: #99997E !important;
}

.mega-col p a:visited {
    color: #000 !important;
}

.nav-left .nav-item:hover,
.offerte-btn:hover,
.contact-btn:hover,
.mega-col p a:hover {
    text-decoration: none !important;
}

.mega-col p a {
    text-decoration: none;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.mega-col p a.bold {
    font-weight: 700;
}

.mega-col p a.mega-gap {
    margin-bottom: 30px;
}

.mega-col p a:hover {
    color: #99997E;
}

.mega-col p a:visited {
    color: #000 !important;
}

.search-container {
    position: relative;
}

.search-btn {
    position: relative;
    z-index: 10;
    cursor: pointer;
}


.search-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 999;
    background: #FAF8E7;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    margin-top: 10px;
    min-width: 280px;
    border-radius: 30px;

}

.search-form {
    display: flex;
    border: none;
    border-radius: 30px;
}

.search-field {
    padding: 8px;
    flex-grow: 1;
    border-radius: 30px;
    background: #FAF8E7;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;


}

.search-field::placeholder {
    color: #6b7280;
    -webkit-text-fill-color: #6b7280;
}

.search-field:focus {
    outline: none;
}

.is-hidden {
    display: none !important;
}

.search-submit-icon {
    border-radius: 50%;
    background: #99997E;
    width: 35px;
    height: 35px;          /* Cruciaal voor een cirkel */
    display: flex;
    align-items: center;   /* Centreert verticaal */
    justify-content: center; /* Centreert horizontaal */
    padding: 0;
    flex-shrink: 0;
}

.search-field::-webkit-search-cancel-button {
    filter: invert(1);
}

.search-submit-icon svg {
    width: 15px;
    height: auto;
    display: block;
}

.paragraph-grid {
    column-count: 1;
    display: block;
    column-gap: 130px;
}

.footer-col {
    break-inside: avoid;
    display: block;
    margin-bottom: 10px ;
}

.cat-title {
    color: #717171; /* Grijzige kleur uit je screenshot */
    text-decoration: none;
    margin-bottom: 0px;
    padding: 0;
    display: block;
    font: 16px/22px 'Open Sans', sans-serif;

}

.sub-title {
    color: #717171;
    text-decoration: none;
    margin: 0;
    padding: 0;
    display: block;
    font: normal 14px/19px 'Open Sans' , sans-serif;
}

/* Voor het '-' streepje in je screenshot */
.sub-title:empty::before, .cat-title:empty::before {
    content: "-";
    color: #717171;
}

/* Zorgt dat zowel nieuwe als bezochte links dezelfde kleur hebben */
.cat-title,
.cat-title:visited,
.sub-title,
.sub-title:visited {
    color: #717171; /* Of de kleur die je in je screenshot gebruikte */
    text-decoration: none;
}

/* Optioneel: een kleurverandering als je er met de muis overheen gaat */
.cat-title:hover,
.sub-title:hover {
    color: #111827;
}

.item-rij-1-kolom-3 a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.item-rij-1-kolom-3 a h1 {
    margin: 0;
    padding-bottom: 10px;
    text-wrap: nowrap;
}

.bottom-grid .contact-btn,
.bottom-grid .contact-btn:visited,
.bottom-grid .contact-btn:active,
.bottom-grid .contact-btn:focus,
.bottom-grid .login-btn,
.bottom-grid .login-btn:visited,
.bottom-grid .login-btn:active,
.bottom-grid .login-btn:focus {
    width: 150px;
    text-decoration: none;
}

.bottom-grid {
    margin-bottom: 0;
    padding-bottom: 0;
}

.bottom-grid .item-rij-1,
.bottom-grid .item-rij-2,
.bottom-grid .item-rij-1-kolom-3,
.bottom-grid .item-rij-2-kolom-3 {
    margin-bottom: 0;
}

.item-rij-1.buttons {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

.item-rij-2-kolom-3 a {
    width: 230px;
    font: bold 16px/22px 'Open Sans', sans-serif;
}

.newsletter-btn {
    padding: 10px 10px;
    border-radius: 15px;
    box-sizing: border-box;
    align-self: flex-start;
    white-space: nowrap;
    font:  bold 12px/17px 'Open Sans', sans-serif !important;
    background: #99997E;
    color: white;
    width: 130px;
    text-transform: uppercase;
    border: none;
    height: 33px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.newsletter-btn:hover,
.newsletter-btn:visited:hover {
    background-color: #faf8e7;
    color: #99997E !important;
    cursor: pointer;
    transition: .5s;
    text-decoration: none;
}

.logo-container {
    display: flex;
    overflow: hidden;
    gap: 100px;
    position: relative;
    user-select: none;
    box-sizing: border-box;
    width: 60%;
    margin: 50px auto;
    padding: 60px 40px;
    background: #F3F6FA;
    border-radius: 40px;
}

.logo-track {
    flex-shrink: 0;
    display: flex;
    min-width: max-content;
    align-items: center;
    gap: 100px;
    width: max-content;
    height: 70px;
    animation: none;
}

.logo-scroll {
    animation: logo-marquee 40s linear infinite;
}



.logo-track img {
    height: 40px !important;
    width: auto !important;
    max-width: 130px;
    object-fit: contain;
    flex: 0 0 auto;
}

.logo-track .logo4 {
    height: 20px;
    width: auto !important;
    max-width: 130px;
}


@keyframes logo-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% - 100px));
    }
}

.bottom-image a,.bottom-image a:visited,.bottom-image a:hover,.bottom-image a:active {
    text-decoration: none;
    text-transform: none;
    color: white;
}

.bottom-card-btn,
.bottom-card-btn:visited,
.bottom-card-btn:hover,
.bottom-card-btn:active,
.bottom-card-btn:focus {
    text-decoration: none !important;
    color: white;
    font: bold 19px/22px Open Sans;
}

.login-btn:visited {
    color: white;

}

.login-btn:hover {
    color: black;
}

html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

/* Selecteer de wrapper van je content (tussen header en footer) */
main,
#primary,
.middle-hover {
    flex: 1 0 auto;
}

footer.bottom-grid {
    flex-shrink: 0;
}


.news-image-link {
    display: block;
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
}

/* Styling voor de knop: deze blijft nu WEL rond */
.news-btn-overlay,
.news-button-overlay {
    position: absolute;
    z-index: 10;
    width: 40px;
    height: 40px;
    padding: 0;
    box-sizing: border-box;
    background-color: #99997E;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Jouw positionering: */
    bottom: 207px;
    left: 50%;
    transform: translate(-50%, 50%);
    text-decoration: none;
}

.page-id-187,
.page-id-2523{
    background: #F2F6FA;
}



.page-btn {
    background-color: #99997E;
    opacity: 1;
    font: bold 16px/22px 'Open Sans', sans-serif;
    color: #faf8e7;
    text-align: center;
    text-transform: uppercase;
    padding: 10px 18px;
    text-decoration: none;
    border-radius: 15px;
    border: none;
}

.page-btn:hover {
    background-color: #faf8e7;
    color: #99997E;
    cursor: pointer;
    transition: .5s;
}

.page-btn.alt {
    background-color: #111827;
    color: #faf8e7;

}

.page-btn.alt:hover {
    color: #111827;
    background-color: #faf8e7;
    cursor: none;
    transition: .5s;
}

.page-btn.disabled {
    cursor: default;
    pointer-events: none;
}

.page-btn.alt.disabled:hover {
    background-color: #111827;
    color: #faf8e7;
    transition: none;
}

.page-btn,
.page-btn:visited,
.page-btn:active,
.page-btn:focus {
    color: #faf8e7;
    text-decoration: none;
    outline: none;
}

.section-13 .number a,
.section-13 .number a:visited,
.section-13 .number a:active {
    text-decoration: none;
    color: #111827;
}

.section-13 .number .current {
    background-color: #99997E;
    border-radius: 5px;
    color: white;
    padding: 5px 10px;
}

.section-20 {
    margin-bottom: 80px;
}

.card-bottom form {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.card-bottom form input {
    background: #1E293C;
    height: 72px;
    border-radius: 15px;
    border: none;
    margin: 0 20px 0;
    padding-left: 16px;
    color: white !important;
    font: normal 16px/26px Open Sans;
}


.card-bottom form button {
    margin: 10px 20px 20px;
    font:  bold 16px/22px Open Sans;
    border-radius: 23px;
    cursor: pointer;
}

.card-sub-2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin-bottom: 30px;
    margin-left: 20px;
}

.card-sub-2 h1 {
    font: bold 16px/22px Open Sans;
    color: #111827;
    text-decoration: underline;
    margin: 0;
}

.card-sub-2 button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background: #F3F6FA;
    cursor: pointer;
    padding: 0;
    margin-left: 50px;
}

.card-sub-2 button:hover {
    border: 1px solid #99997E;
}

.card-sub-2 button svg {
    width: 8px !important;
    height: 12px !important;
    display: block;
}

.card-sub-link button svg {
    width: 8px; !important;
    height: 12px; !important;
}

.card-sub-link {
    display: block;
    text-decoration: none;
}

.card-sub button {
    background: #111827;
    border: none;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.card-sub button svg {
    width: 8px !important;
    height: 12px !important;
    overflow: visible;
}

.card-sub button svg path {
    stroke: #ffffff;
    stroke-width: 3px;
}

.s23-slider button svg path {
    stroke: #99997E;
    transition: stroke 0.3s ease;
}

.s23-slider button.slick-disabled svg path {
    stroke: #C5C5B1;
}

.section-23 .s23-slider .slick-arrow.slick-hidden {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.45;
    pointer-events: none;
}

.bottom-grid-wrapper {
    background: #f3f6fa;
    margin: 0;
}

.login-error-msg {
    color: #f1633d;
    margin-bottom: 20px;
    text-align: center;"
font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: bold;
}

input.wpcf7-form-control.wpcf7-submit.btn-submit {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 50px;
    cursor: pointer;
    background: #99997E;
    color: #fff;
    border: 2px solid #99997E;
    transition: background 0.2s;
    flex: 1;
    width: 100%;
}

input.wpcf7-form-control.wpcf7-submit.btn-submit:hover {
    background: #fff;
    color: #99997E;
}

.btn-file {
    position: relative;
    overflow: hidden;
    display: inline-block;
    cursor: pointer;
}

.btn-file input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 100px;
}

.form-actions p {
    display: contents;
}

.contact-form-card p {
    margin: 0;
    padding: 0;
    display: contents;
}

.contact-form-card br {
    display: none;
}

.form-group {
    margin-bottom: 15px;
}

.form-row--address {
    margin-bottom: 20px;
}


/* Zorg dat de container de spinner netjes opneemt */
.form-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px;
    align-items: center; /* Zorgt dat spinner en buttons op één lijn staan */
    position: relative;
}

/* Haal de absolute positionering weg */
.wpcf7-spinner {
    margin: 0 !important;
    display: inline-block;
    flex-shrink: 0; /* Voorkomt dat de spinner platgedrukt wordt */
}

/* Zorg dat de submit-button en de spinner samen in hun eigen flex-item zitten */
.form-actions .wpcf7-form-control-wrap {
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex: 1 !important;
}

.contact-container a:nth-of-type(2) {
    color: #111827;
    background: none;
    border: 1px solid #111827;
}

.contact-container a {
    max-width: 220px;
    gap: 20px;
    border-radius: 27px;
}

.contact-container a:nth-of-type(2):hover {

    background: #111827;
    color: white;
}

/* Zorg dat de CF7-wrappers de layout niet breken */
.question-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* Fix voor de form-main flexbox */
.question-form .form-main {
    display: flex;
    gap: 20px;
    margin-bottom: 0px;
}

/* Zorg dat de velden in de containers 100% breed zijn */
.question-form .form-container {
    flex: 1;
}

.question-form input,
.question-form textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Verwijder de automatische p-tags van CF7 die alles verschuiven */
.wpcf7-form p {
    margin: 0;
    display: contents; /* Dit zorgt ervoor dat de p-tag de layout niet beïnvloedt */
}

.question-form .wpcf7-form p {
    display: contents;
}

.question-form .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.question-form .wpcf7-submit {
    min-width: 260px;
    min-height: 50px;
    border-radius: 25px;
    margin-left: auto;
    padding: 12px 28px;
    background: #99997E;
    color: #FAF8E7;
    border: none;
    font: bold 16px/22px Open Sans;
    cursor: pointer;
}

.question-form .wpcf7-submit:hover {
    background: #111827;
    color: #FAF8E7;
}

.page-id-305,
.page-id-334{
    background: #F2F6FA;
}

.question-form .form-container {
    gap: 0 !important;
}

.question-form .wpcf7-form {
    gap: 6px !important; /* of 0 als je alles strak wil */
}

.question-form label {
    margin: 0 !important;
    line-height: 1.2;
}

.question-form .wpcf7-response-output {
    width: 50%;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Zorg dat de knop niet de volledige breedte pakt */
.question-form .contact-btn {
    width: auto !important;
    display: inline-block;
    padding: 10px 30px; /* Geef de knop wat ademruimte */
    cursor: pointer;
}

/* Zorg dat de wrapper van de knop (indien aanwezig) niet centreert of stretched */
.question-form .wpcf7-form-control-wrap {
    width: 100%;
}

.form-container label {
    display: block !important;
    margin-bottom: 2px !important;
    padding-bottom: 0 !important;
    line-height: 1.2 !important;

    /* DIT ZIJN DE NIEUWE REGELS */
    color: #000000 !important;   /* Forceer zwart */
    font-weight: bold !important; /* Forceer dikgedrukt */
    text-transform: uppercase;   /* Optioneel: als je alles in hoofdletters wilt */
}



.question-form .wpcf7-form {
    align-items: stretch;
}

/* Zorg dat de rest van je formulier (titel, velden) wel 100% breed blijft */
.question-form h1,
.question-form .form-head,
.question-form .form-main {
    width: 100%;
}

.contact-container h1 {
    color: #000000 !important;   /* Forceer zwart */

}

.form-container input {
    padding: 20px;
}

.login-card.register{

    max-width: 500px;

}

.offerte-btn-pg3 {
    background-color: #faf8e7;
    opacity: 1;
    font: bold 16px/22px 'Open Sans', sans-serif;
    color: #99997E;
    text-align: center;
    text-transform: uppercase;
    padding: 10px 18px;
    text-decoration: none;
    border-radius: 15px;
    border: none;
}

.offerte-btn-pg3:hover {
    background-color: #99997E;
    color: #faf8e7;
    cursor: pointer;
    transition: .5s;
}

.offerte-btn-pg3:visited:hover {
    color: #FAF8E7 !important;

}

.offerte-btn-pg3:visited {
    color: #99997E !important;

}

.card-bottom input.wpcf7-submit {
    background-color: #99997E;
    color: #faf8e7;
    font: bold 16px/22px 'Open Sans', sans-serif;
    text-transform: uppercase;
    padding: 10px 18px;
    border-radius: 23px;
    border: none;
    cursor: pointer;
    transition: background-color .5s ease;
    display: inline-block;
    width: auto;
    max-height: 50px;
}

.card-bottom input.wpcf7-submit:hover {
    background-color: #faf8e7;
    color: #99997E;
}

.card-bottom .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    max-width: 250px;
}

.card-bottom input.wpcf7-text {
    max-width: 350px;
}

.img-video {
    display: block !important;
    position: relative !important; /* Forceert de video terug in de normale tekststroom */
    width: 100%;
    max-width: 1542px;
    height: 400px !important; /* Harde hoogte om ruimte te claimen */
    margin-top: 50px !important;
    margin-bottom: 50px !important;
    clear: both !important; /* Zorgt dat er geen zwevende tekst naast komt */
}

.video-container-inner {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 30px;
    overflow: hidden;
    background-color: #000;
}

.video-container-inner iframe,
.video-container-inner video,
.video-container-inner img {
    width: 100% !important;
    height: 400px !important;
    object-fit: cover;
    border-radius: 30px;
    display: block;
}

.section-3-info span {
    color: #2EC4B6;
}

.route-btn:visited:hover {
    color: #fff !important;

}

.route-btn:visited {
    color: #fff !important;

}

.no-results-content {
    margin: 0 10px;
}

.text-content {
    max-width: 600px;
}

.section-6-right .text-content > :first-child {
    margin-top: 0;
}

.text-content p,
.text-content li
{
    font: normal normal normal 14px/24px Open Sans;
}
.text-content h3 {
    font-family: Oswald, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: 0;
    color: #99997E;
    text-transform: uppercase;
    text-align: left;
    opacity: 1;
    margin-bottom: 15px;
}



.section-6 {
    display: flex;
    gap: 40px;
}

.section-6.is-reversed {
    flex-direction: row-reverse;
}

.section-columns {
    width: 90%;
    max-width: 1542px;
    margin: 10px auto 250px;
}

.section-columns .container {
    display: flex;
    gap: 60px;
    justify-content: center;
}

.section-columns .container p {
    max-width: 600px;
    font: normal normal normal 16px/26px Open Sans;

}

.section-columns .col {
    flex: 0 1 620px;
    max-width: 620px;
    min-width: 0;
}

.section-columns .col:nth-child(2) {
    margin-left: 0;
}

.section-6-right {
    margin-left: 0;
    padding-left: var(--product-text-inset);
}

.section-6.is-reversed .section-6-right {
    padding-left: 0;
}

.section-23.alt .s23-head h1:nth-of-type(1) {
    text-transform: uppercase;
}

.section-23.alt .s23-content {

}

.section-23.alt .s23-content h2
{
    margin: 50px 50px 0;
    font: normal  14px/25px Oswald;
    color: #1118275E;
    text-transform: uppercase;
    letter-spacing: 0;
    padding: 0;
}

.section-23.alt .s23-content h1
{
    margin: 0 50px 0px;
    padding: 0;
    font: bold 25px/30px Oswald;
    text-transform: uppercase;
    letter-spacing: 0;
}

.section-23.alt .s23-card > h1:first-child {
    margin-top: 75px;
}
.section-23.alt .s23-content li {
    font: lighter 16px/26px Open Sans;

}

.section-23.alt .s23-content li::marker {
    color: #99997E;
}

.section-23.alt .s23-content ul {
    padding-left: 1.2rem; /* Genoeg ruimte voor het bolletje, maar niet meer */
    list-style-position: outside; /* Zorgt dat tekst bij meerdere regels netjes onder elkaar blijft */
}

.text-content ul {
    padding-left: 1.2rem; /* Genoeg ruimte voor het bolletje, maar niet meer */
    margin-left: 0;
    list-style-position: outside; /* Zorgt dat tekst bij meerdere regels netjes onder elkaar blijft */
}

.section-5  .product-description {
    font: normal normal normal 20px/20px Open Sans;
    /* Tekst even ver laten doorlopen als de titel (geen smallere kolom). */
    max-width: none;
}

/* De hoofdcontainer van de slide (aangemaakt door Slick) */
.referentie-gallerij .slick-slide {
    width: 400px !important; /* Forceer de breedte hier */
    height: 300px !important;
    margin: 0 20px;
    position: relative;
    overflow: hidden; /* Zorgt dat niets buiten de 300px hoogte komt */
    border-radius: 25px;
}

/* De div die JIJ in PHP hebt gezet */
.referentie-gallerij .slick-slide > div {
    width: 100%;
    height: 100%;
    position: relative;
}

/* De afbeelding zelf */
.referentie-gallerij img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* Dit zorgt dat de verhouding goed blijft */
    display: block;
}

html {
    scroll-behavior: smooth;
}

.product-container-p3.project {
    padding-top: 0 ;
}

.product-container-main.project {
}

.product-section {
    margin-left: 100px;
    width: calc(100% - 100px); /* Zorgt dat de sectie stopt bij de rechterrand */
    overflow: hidden; /* DIT IS DE FIX: alles wat buiten de 100% valt wordt onzichtbaar */
    position: relative;
}

.product-types {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: max-content; /* Zorgt dat items hun breedte behouden */
    transition: transform 0.5s ease-in-out; /* Voor de animatie later */
}

.product-types > div {
    flex: 0 0 300px; /* Geef de items een vaste breedte zodat ze niet vervormen */
    width: 300px;
}

/* Fix voor die zwarte knop die alles wegduwt */
.product-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Duwt de knop automatisch naar rechts */
    width: 100%;
    padding-right: 100px; /* Symmetrie met de linkerkant */
}

.btn-black {
    margin-left: 0; /* Verwijder die 500px, de flexbox doet nu het werk */
}

.btn-black,
.btn-black:visited,
.btn-black:active,
.btn-black:focus {
    color: #FFFFFF !important; /* Forceert wit als tekstkleur */
    text-decoration: none !important; /* Haalt de standaard blauwe onderstreping weg */
    outline: none !important; /* Verwijdert de blauwe rand bij focus/klik */
}

.btn-black:hover {
    color: #000 !important;
    background-color: #fff;
    border: 1px solid #000;
    transition: .5s;/* Optioneel: iets lichter zwart bij hover */
}

/* Section 2 CTA hover scale */
.section-2 .info .contact-btn {
    display: inline-block !important;
    transform: translateZ(0);
    transform-origin: center center;
    transition: transform .25s ease;
}

.section-2 .info .contact-btn:hover {
    transform: scale(1.15) !important;
}

.grey-background-wrapper {
    background: #F3F6FA;
    padding-top: 30px;
}

.section-18.pg11 {
    padding-top: 50px ;
}

.section-18.pg11 {
    background-color: #F3F6FA;
    padding-top: 50px; /* Dit zorgt voor de gewenste afstand */
    margin-top: 0;     /* Forceer margin op 0 */
    display: flow-root; /* DIT IS DE KEY: het houdt binnenwaartse marges binnenboord */
}



.section-11 a {
    font: bold 14px/20px Open Sans;
    background: transparent;
    border: none;
    color: #99997E;
    padding: 8px;
}

.section-11 a span {
    background: #99997E;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: white;
    font-size: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    line-height: 0;
    padding-bottom: 2px;
}

.section-11 div:hover a {
    background: #99997E;
    color: white;
    border-radius: 26px;
    padding: 8px 20px;
    transition: 0.5s;
}

body.page-id-296 {
    background-color: #F3F6FA;
}

.edit-link,
.post-edit-link {
    display: none !important;
}

/* De knop moet dit hebben om het vinkje te positioneren */
.btn-file {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Het vinkje (onzichtbaar bij start) */
.btn-file::after {
    content: '✓';
    display: none;
    font-weight: bold;
    color: #4CAF50; /* Groen vinkje */
    font-size: 18px;
}

/* Wanneer er een bestand is: toon vinkje en maak tekst groen */
.btn-file.has-file::after {
    display: inline-block;
}

.btn-file.has-file {
    color: #4CAF50 !important;
    border-color: #4CAF50 !important;
}

/* Zorg dat de echte upload-input onzichtbaar over de hele knop zit */
#file-upload {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.single-product .section-7--single-product .product-gallery .img-right > img {
    /* Halve hoogte: was 430px. */
    height: 215px !important;
    min-height: 215px;
    max-height: 215px;
}

/* === Custom Overrides (single-product) === */
.single-product .product-pager-2 {
    align-items: center;
}

.single-product .pager-btn-2 {
    line-height: 1;
    padding: 0;
}

.single-product .pager-count-2 {
    display: flex;
    align-items: center;
    height: 40px;
    line-height: 1;
    gap: 8px;
    white-space: nowrap;
}

.single-product .pager-current-2,
.single-product .pager-total-2 {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font: lighter 30px Oswald;

}

.single-product .section-5 .button-container {
    gap: 10px;
}

.single-product .section-5,
body.page-template-single-product .section-5,
body.page-template-page-templates-single-product-php .section-5 {
    width: 90%;
    max-width: 90%;
    box-sizing: border-box;
    position: relative;
    background-color: transparent;
    box-shadow: none;
    clip-path: none;
    isolation: isolate;
}

.single-product .section-5::before,
body.page-template-single-product .section-5::before,
body.page-template-page-templates-single-product-php .section-5::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #f3f6fa;
    z-index: -1;
    pointer-events: none;
}

.single-product .section-23.alt,
body.page-template-single-product .section-23.alt,
body.page-template-page-templates-single-product-php .section-23.alt {
    position: relative;
    background: transparent;
    isolation: isolate;
}

.single-product .section-23.alt::before,
body.page-template-single-product .section-23.alt::before,
body.page-template-page-templates-single-product-php .section-23.alt::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #f3f6fa;
    z-index: -1;
    pointer-events: none;
}

.single-product .section-5 h1,
.single-product .section-5 h2,
.single-product .section-5 p,
.single-product .section-5 a,
.single-product .section-5 span,
body.page-template-single-product .section-5 h1,
body.page-template-single-product .section-5 h2,
body.page-template-single-product .section-5 p,
body.page-template-single-product .section-5 a,
body.page-template-single-product .section-5 span,
body.page-template-page-templates-single-product-php .section-5 h1,
body.page-template-page-templates-single-product-php .section-5 h2,
body.page-template-page-templates-single-product-php .section-5 p,
body.page-template-page-templates-single-product-php .section-5 a,
body.page-template-page-templates-single-product-php .section-5 span {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.section-3.alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px; /* Dit zorgt voor de ruimte tussen beeld en tekst, ongeacht de kant */
}

.section-3.alt img {
    max-width: 50%;
    height: auto;
    object-fit: cover;
}

.section-3.alt .section-3-info {
    flex: 1;
}

/* Mobiel: altijd tekst onder de afbeelding */
@media (max-width: 768px) {
    .section-3.alt {
        flex-direction: column !important;
        gap: 20px;
    }

    .section-3.alt img {
        max-width: 100%;
    }
}


.section-3.alt.has-bg {
    background-color: #F3F6FA;
    padding-top: 100px;
    padding-bottom: 100px;
}

.section-25 .wysiwyg-content {
    width: 100%;
    max-width: 756px;
}

.section-25 h2 {
    color: #111827;
    font: bold 30px/40px Oswald;
    max-width: 756px;
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 30px;
}

.section-25 .form-row {
    margin-bottom: 15px;
}

.section-25 .form-group label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 4px;
}

.section-25 .form-group input,
.section-25 .form-group textarea {
    width: 100%;
    border: 1px solid #99997E;
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    box-sizing: border-box;
}

.section-25 .form-group input:focus,
.section-25 .form-group textarea:focus {
    outline: none;
    border-color: #99997E;
}

.section-25 .form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.section-25 .form-actions {
    margin-top: 16px;
}

.wpcf7-form .newsletter-btn,
.wpcf7-submit {
    background: #99997E !important;
    color: white !important;
    padding: 10px 10px;
    border-radius: 15px;
    box-sizing: border-box;
    align-self: flex-start;
    white-space: nowrap;
    font: bold 12px/17px 'Open Sans', sans-serif !important;
    width: 130px;
    text-transform: uppercase;
    border: none;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
}

.wpcf7-submit {
    height: auto;
}

.wpcf7-form .newsletter-btn:hover {
    background-color: #99997E !important;
    color: #000 !important;
}

.wpcf7-submit:hover:not(.newsletter-btn) {
    background-color: #faf8e7 !important;
    color: #000000 !important;
}


.wpcf7-form-control-wrap {
    display: block;
}

.section-6 {
    display: grid;
    grid-template-columns: minmax(0, 670px) minmax(0, 1fr);
    /* Kolommen niet op gelijke hoogte trekken: anders rekt de media-kolom
       (en de foto) mee met een lange tekstkolom. */
    align-items: start;
    gap: 10px;
    margin: 100px auto;
    width: 90%;
    max-width: 1542px;
    box-sizing: border-box;
    overflow: hidden;
}

.section-6.is-reversed .section-6-left {
    order: 2;
}

.section-6.is-reversed .section-6-right {
    order: 1;
}

.section-6-left {
    width: 100%;
    max-width: 670px;
    min-width: 0;
    display: flex;
    height: auto;
}

.section-6-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Media op natuurlijke hoogte (foto = eigen verhouding; video/iframe houden hun
   inline aspect-ratio 16/9). Niet meer uitrekken naar de hoogte van de tekst. */
.section-6-left img,
.section-6-left video,
.section-6-left iframe {
    width: 100% !important;
    max-width: none;
    height: auto !important;
    object-fit: cover;
    border-radius: 24px;
    display: block;
    flex: 0 0 auto;
}


/* ==========================================================================
   404 Page
   ========================================================================== */

.error-404-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 70vh;
    padding: 80px 20px;
    width: 90%;
    max-width: 1542px;
    margin: 0 auto;
}

.error-404-number {
    font: 700 180px/1 Oswald, sans-serif;
    color: #99997E;
    letter-spacing: -4px;
    margin-bottom: 10px;
}

.error-404-page h1 {
    font: 500 36px/44px Oswald, sans-serif;
    color: #111827;
    text-transform: uppercase;
    margin: 0 0 15px;
}

.error-404-page p {
    font: normal 16px/26px 'Open Sans', sans-serif;
    color: #707070;
    max-width: 500px;
    margin: 0 0 40px;
}

.error-404-search {
    width: 100%;
    max-width: 480px;
    margin-bottom: 30px;
}

.error-404-search .search-form {
    display: flex;
    align-items: center;
    border: 2px solid #111827;
    border-radius: 30px;
    overflow: hidden;
    background: white;
}

.error-404-search .search-field {
    flex: 1;
    border: none;
    outline: none;
    padding: 12px 20px;
    font: normal 14px/20px 'Open Sans', sans-serif;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    background: transparent !important;
}

.error-404-search .search-field::placeholder {
    color: #999;
}

.error-404-search .search-submit-btn {
    background: #99997E;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 4px;
    flex-shrink: 0;
}

.error-404-search .search-submit-btn:hover {
    background: #2ec4b6;
}

.error-404-home-btn {
    display: inline-block;
    margin-top: 10px;
}


/* ==========================================================================
   Search Results Page
   ========================================================================== */

.search-results-page {
    width: 90%;
    max-width: 1542px;
    margin: 0 auto;
    padding: 60px 0 80px;
}

.search-header {
    margin-bottom: 50px;
}

.search-header h1 {
    font: 500 36px/44px Oswald, sans-serif;
    color: #111827;
    text-transform: uppercase;
    margin: 0 0 25px;
}

.search-header h1 span {
    color: #99997E;
}

.search-refine {
    display: flex;
    align-items: center;
    border: 2px solid #111827;
    border-radius: 30px;
    overflow: hidden;
    background: white;
    max-width: 480px;
}

.search-refine .search-field {
    flex: 1;
    border: none;
    outline: none;
    padding: 12px 20px;
    font: normal 14px/20px 'Open Sans', sans-serif;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    background: transparent !important;
}

.search-refine .search-field::placeholder {
    color: #999;
}

.search-refine .search-submit-btn {
    background: #99997E;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.search-refine .search-submit-btn:hover {
    background: #2ec4b6;
}

.search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 25px;
}

.search-card {
    border: 1px solid #1118275F;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.search-card-image {
    display: block;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.search-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.search-card:hover .search-card-image img {
    transform: scale(1.1);
}

.search-card-content {
    padding: 20px 25px 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.post-type-badge {
    display: inline-block;
    font: bold 10px/14px 'Open Sans', sans-serif;
    text-transform: uppercase;
    color: #99997E;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.search-card h2 {
    font: lighter 18px/26px Oswald, sans-serif;
    margin: 0 0 10px;
}

.search-card h2 a {
    color: #111827;
    text-decoration: none;
}

.search-card h2 a:hover {
    color: #99997E;
}

.search-card .excerpt {
    font: normal 12px/22px 'Open Sans', sans-serif;
    color: #707070;
    margin: 0 0 15px;
    flex: 1;
}

.search-card-link {
    align-self: flex-start;
}

.search-card-btn {
    background-color: #99997E;
    color: #FAF8E7;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.section-11-info button:hover {
    cursor: pointer;

}

.search-card-link,
.search-card-link:visited,
.search-card-link:active,
.search-card-link:focus {
    text-decoration: none;
}

.search-card-btn:hover {
    background-color: #2ec4b6;
}

.search-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 50px;
    justify-content: center;
}

.no-results {
    text-align: center;
    padding: 80px 20px;
}

.no-results h2 {
    font: 500 30px/38px Oswald, sans-serif;
    color: #111827;
    text-transform: uppercase;
    margin: 0 0 15px;
}

.no-results p {
    font: normal 16px/26px 'Open Sans', sans-serif;
    color: #707070;
    margin: 0 0 30px;
}

/* parent grid */
.product-category-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
    align-items: stretch;
}

/* card */
.product-category-item {
    height: 100%;
    display: grid;
    grid-template-rows: 180px auto 1fr auto; /* img, titel, tekst, knop */
    gap: 12px;
}

/* image mag card niet meer uitrekken */
.product-category-item > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* description vast op 3 regels */
.category-description {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* editor-html marges neutraliseren */
.category-description p {
    margin: 0;
}

/* knop altijd onderaan */
.next-btn {
    align-self: end;
}


.logo-track.logo-scroll img.logo4 {
    width: 90px;
    height: 90px;      /* zelfde als width = vierkant */
    object-fit: contain; /* logo blijft volledig zichtbaar */
    display: block;
    flex: 0 0 90px;    /* voorkomt uitrekken in flex track */


}

.bottom-section.news-slider-enabled .bottom-columns .slick-track {
    display: flex !important;
    flex-direction: row;
    gap: 24px;
}

.bottom-section.news-slider-enabled .bottom-columns .slick-slide {
    display: flex !important;
    height: auto !important;
    align-items: stretch;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.bottom-section.news-slider-enabled .bottom-columns .slick-slide > div {
    display: flex;
    width: 100%;
    min-width: 0;
}

.bottom-section.news-slider-enabled .bottom-columns .slick-slide .column-card {
    min-width: 0;
}

.column-card {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #f3f6fa;
    border-radius: 20px;
    overflow: hidden;
}

.card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.bottom-card-media {
    margin-top: auto;
}

.bottom-card-media img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.bottom-card-media > a:not(.bottom-card-btn) {
    display: block;
    width: 100%;
}

.bottom-card-media > a:not(.bottom-card-btn) img {
    width: 100%;
    display: block;
}

.bottom-card-media > a.bottom-card-btn {
    width: 40px;
    flex: 0 0 40px;
}

body.has-banner .nav-left .nav-item,
body.has-banner .nav-left .nav-item:visited,
body.has-banner .nav-left .nav-item:hover,
body.has-banner .nav-left .nav-item:active,
body.has-banner .nav-left .nav-item:focus {
    color: #fff !important;
}

body:not(.has-banner) .nav-left .nav-item,
body:not(.has-banner) .nav-right .lang-toggle,
body:not(.has-banner) .nav-right .lang-toggle .lang-current,
body:not(.has-banner) .nav-right .lang-toggle .lang-caret,
body:not(.has-banner) .nav-right .lang-toggle:hover,
body:not(.has-banner) .nav-right .lang-toggle:focus,
body:not(.has-banner) .nav-left .nav-item:visited,
body:not(.has-banner) .nav-left .nav-item:hover,
body:not(.has-banner) .nav-left .nav-item:active,
body:not(.has-banner) .nav-left .nav-item:focus {
    color: #111 !important;
    text-shadow: none !important;
}

.section-25 .form-row {
    display: flex;
}

.section-25 .form-row .form-group {
    flex: 1 1 100%;
    width: 100%;
}

.section-25 .form-row .form-group > p {
    margin: 0;
    width: 100%;
}

.section-25 .form-row .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.no-cat {
    color: white;
}

.no-btn--right span {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
}

.hover-text li {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 26px;

}

.download-container h3 {
    font: bold 19px/30px 'Open Sans', sans-serif;
    color: #99997E;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.download-container .download-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, minmax(0, auto));
    column-gap: 32px;
    row-gap: 8px;
    width: fit-content;
}

.download-container .download-grid>div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 4px 0;
    max-width: 250px;
    width: 250px;
    gap: 45px;
}

.download-container .download-row p {
    margin: 0;
    color: #000;
    text-decoration: underline;
    font: 14px/28px 'Open Sans', sans-serif;
}

.download-container .download-row button {
    width: 45px;
    height: 32px;
    background-color: #000000;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

}

.download-container .download-row button:hover {
    transform: scale(1.2);
}

.download-container svg {
    width: 21px;
}

/* Downloads: 1 kolom tot 5 items, vanaf 6 items verdeeld over 2 kolommen */
.download-container {
    max-width: 100%;
}

.download-container:not(:has(> .download-row:nth-of-type(6))) {
    max-width: 550px;
}

.download-container > .download-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 0;
    width: 100%;
    max-width: 100%;
    gap: 52px;
}

.download-container:not(:has(> .download-row:nth-of-type(6))) > .download-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: stretch;
    width: 100%;
    max-width: 100%;
    column-gap: 12px !important;
    row-gap: 0;
}

.download-container:not(:has(> .download-row:nth-of-type(6))) > .download-row > p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.download-container > .download-row > p {
    min-width: 0;
}

.download-container > .download-row > a {
    justify-self: auto;
}

.download-container:has(> .download-row:nth-of-type(6)) {
    column-count: 2;
    column-gap: 48px;
    column-fill: balance;
    max-width: calc(360px * 2 + 48px);
}

.download-container:has(> .download-row:nth-of-type(6)) > .download-row {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 8px;
    width: 360px;
    max-width: 360px;
    gap: 52px !important;
    justify-content: space-between;
}

.download-container:has(> .download-row:nth-of-type(6)) h3 {
    column-span: all;
}

.product-gallery-section {
    --pg-cell: 300px;
    width: 100%;
    margin-bottom: 20px;
    padding: 64px 0 80px;
}

.product-gallery-section h1 {
    color: #111;
    text-align: center;
    margin: 0 auto 44px;
    font: bold 43px/58px Oswald;
    max-width: 1200px;
}

.product-gallery-section .product-gallery-masonry {
    display: grid;
    grid-template-rows: var(--pg-cell) var(--pg-cell);
    grid-auto-flow: column;
    grid-auto-columns: var(--pg-cell);
    gap: 10px;
    width: min(1320px, calc(100% - 64px));
    margin: 0 auto;
    justify-content: center;
    justify-items: stretch;
    overflow-x: auto;
    align-items: stretch;
}

.product-gallery-section .product-gallery-slider {
    position: relative;
    overflow: hidden;
}

.product-gallery-section .product-gallery-slides {
    display: flex;
    width: 100%;
    transition: transform 360ms ease;
    will-change: transform;
}

.product-gallery-section .product-gallery-slide {
    width: 100%;
    flex: 0 0 100%;
}

.product-gallery-section .product-gallery-controls {
    position: absolute;
    left: 50%;
    width: min(1320px, calc(100% - 64px));
    top: 50%;
    transform: translate(-50%, -50%);
    height: 0;
    pointer-events: none;
    z-index: 3;
}

.product-gallery-section .product-gallery-btn {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid #99997E;
    background: #fff;
    color: #99997E;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    pointer-events: auto;
}

.product-gallery-section .product-gallery-btn:hover {
    background: #99997E;
    color: #fff;
    border-color: #99997E;
}

.product-gallery-section .product-gallery-prev,
.product-gallery-section .product-gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.product-gallery-section .product-gallery-prev {
    left: -12px;
}

.product-gallery-section .product-gallery-next {
    right: -12px;
}

.product-gallery-section .product-gallery-dots {
    position: relative;
    margin-top: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    z-index: 3;
}

.product-gallery-section .product-gallery-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #fff;
    opacity: 0.85;
    cursor: pointer;
    padding: 0;
    border: 1px solid  #99997E;
}

.product-gallery-section .product-gallery-dot.is-active {
    background: #99997E;
    opacity: 1;
}

.product-gallery-section .product-gallery-card {
    position: relative;
    margin: 0;
    align-self: stretch;
    justify-self: stretch;
    height: 100%;
    overflow: hidden;
    border-radius: 0;
}

.product-gallery-section .product-gallery-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.product-gallery-section .product-gallery-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
    overflow: hidden;
}

.product-gallery-section .product-gallery-link img {
    transition: transform .35s ease;
}

.product-gallery-section .product-gallery-card:hover .product-gallery-link img {
    transform: scale(1.04);
}

/* patroon per 5 afbeeldingen:
   1: 300x150
   2: 150x300
   3: 150x300
   4: 150x150
   5: 150x150 */
.product-gallery-section .product-gallery-card:nth-child(5n + 1) {
    grid-row: 1;
    grid-column: 1 / span 2;
}

.product-gallery-section .product-gallery-card:nth-child(5n + 2) {
    grid-row: 1 / span 2;
    grid-column: 3;
}

.product-gallery-section .product-gallery-card:nth-child(5n + 3) {
    grid-row: 1 / span 2;
    grid-column: 4;
}

.product-gallery-section .product-gallery-card:nth-child(5n + 4) {
    grid-row: 2;
    grid-column: 1;
}

.product-gallery-section .product-gallery-card:nth-child(5n + 5) {
    grid-row: 2;
    grid-column: 2;
}

.product-gallery-section .product-gallery-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;

    padding: 16px 18px 28px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: #fff;
    font: 600 14px/20px 'Open Sans', sans-serif;
    text-align: center;
    background: linear-gradient(
            to top,
            rgba(153, 153, 126, 0.72) 0%,
            rgba(153, 153, 126, 0.46) 24%,
            rgba(153, 153, 126, 0.20) 40%,
            rgba(153, 153, 126, 0.06) 50%,
            rgba(153, 153, 126, 0) 100%
    );
    box-shadow: inset 0 -170px 170px rgba(153, 153, 126, 0.52);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.product-gallery-section .product-gallery-card:hover .product-gallery-caption {
    opacity: 1;
    transform: translateY(0);
}

/* Final override: spacing between section-5 and section-6 on single-product */
.single-product .section-5,
body.page-template-single-product .section-5,
body.page-template-page-templates-single-product-php .section-5 {
    margin-bottom: 100px !important;
}

.single-product .section-6,
body.page-template-single-product .section-6,
body.page-template-page-templates-single-product-php .section-6 {
    margin-top: 20px !important;
}

/* Final alignment: keep main single-product sections centered on zoom/resize */
.single-product .section-5,
.single-product .section-6,
.single-product .section-7,
.single-product .section-8,
.single-product .section-23,
body.page-template-single-product .section-5,
body.page-template-single-product .section-6,
body.page-template-single-product .section-7,
body.page-template-single-product .section-8,
body.page-template-single-product .section-23,
body.page-template-page-templates-single-product-php .section-5,
body.page-template-page-templates-single-product-php .section-6,
body.page-template-page-templates-single-product-php .section-7,
body.page-template-page-templates-single-product-php .section-8,
body.page-template-page-templates-single-product-php .section-23 {
    width: min(1542px, 92vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Section-5 has extra legacy margins; force true centering explicitly */
.single-product .section-5,
body.page-template-single-product .section-5,
body.page-template-page-templates-single-product-php .section-5 {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 70px !important;
    margin-bottom: 110px !important;
}

.section-25 .wysiwyg-content ul,
.section-25 .wysiwyg-content ol,
.section-25 .wysiwyg-content li {
    font: normal 16px/26px 'Open Sans', sans-serif;
}

/* Banner project (banner_project) op productpagina's: enkel hoogte geven zodat de
   volgende blokken er niet overheen vallen. Bewust GEEN position:relative en GEEN
   overflow:hidden. z-index haalt de absoluut gepositioneerde afbeelding naar voren
   (basis .section-14 img staat op z-index:-1). */
.section-14.banner-project-flow {
    min-height: clamp(300px, 36vw, 620px);
}
.section-14.banner-project-flow img {
    z-index: 0;
}