:root {

    /* ========================================
       WESPI MERKKLEUREN
    ======================================== */

    --wespi-goud: #dfb91a;
    --wespi-goud-licht: #edcf55;
    --wespi-goud-donker: #bd9410;

    --wespi-geel: #f1cb0d;

    --wespi-zwart: #000000;


    /* ========================================
       NEUTRALE KLEUREN
    ======================================== */

    --wit: #ffffff;

    --lichtgrijs: #f6f6f6;

    --grijs: #6b6b6b;

    --donkergrijs: #151515;


    /* ========================================
       WARME NEUTRALEN
    ======================================== */

    --warm-wit: #faf8f3;

    --warm-licht: #f3f0e9;

    --warm-grijs: #716d63;
}


/* ========================================
   BASIS
======================================== */

html {
    width: 100%;

    margin: 0;
    padding: 0;

    scroll-behavior: smooth;

    overflow-x: hidden;
}


body {
    width: 100%;

    margin: 0;
    padding-left: 0;
    padding-right: 0;

    overflow-x: hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--wespi-zwart);

    background: var(--wit);
}


/* ========================================
   BOX SIZING
======================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ========================================
   HOOFDINHOUD
======================================== */

main {
    width: 100%;
    max-width: 100%;

    overflow-x: clip;
}


/* ========================================
   AFBEELDINGEN
======================================== */

img {
    display: block;

    max-width: 100%;
    height: auto;
}


/* ========================================
   LINKS
======================================== */

a {
    color: inherit;

    text-decoration: none;
}


/* ========================================
   FORMULIEREN
======================================== */

button,
input,
textarea,
select {
    font: inherit;
}


/* ========================================
   CONTAINER
======================================== */

.container {
    width: calc(100% - 48px);

    max-width: 1180px;

    margin-left: auto;
    margin-right: auto;
}


/* ========================================
   MOBIEL
======================================== */

@media (max-width: 600px) {

    .container {
        width: calc(100% - 32px);

        max-width: 100%;
    }

}

/* Bevestigde btw-basis direct bij de bestaande prijsblokken. */
.prijs-btw { display: block; margin-top: 10px; color: #555; font-size: 12px; line-height: 1.5; }

/* Alleen zichtbaar tijdens toetsenbordbediening. */
.skiplink {
    position: fixed;
    top: 8px;
    left: 16px;
    z-index: 100001;
    padding: 12px 18px;
    background: #fff;
    color: #1d1b17;
    transform: translateY(-200%);
}
.skiplink:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid #755b0a; outline-offset: 4px; }
main:focus { outline: none; }
.packshot-lightbox :focus-visible,
.bodyform-lightbox :focus-visible { outline-color: #fff; }
.packshot-lightbox::backdrop,
.bodyform-lightbox::backdrop { background: transparent; }
.foutpagina { padding-top: 200px; padding-bottom: 80px; }
.foutpagina h1 { max-width: 800px; font-size: clamp(30px, 5vw, 54px); line-height: 1.15; }
.foutpagina p { margin-top: 24px; }
.foutpagina a { color: #755b0a; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}