:root {
    --color-section-1:  #c2b280;   /* gedempt retro beige/mosterd */
    --color-section-2:  #a47148;   /* gedempt baksteenbruin */
    --color-section-3:  #77878b;   /* gedempt blauwgrijs */
    --color-section-4:  #8d99ae;   /* zacht, gedempt lavendelblauw */
    --color-section-5:  #d4a373;   /* warm bruinoranje, niet fel */
    --color-section-6:  #a3b18a;   /* gedempt grijsgroen */
    --color-section-7:  #b5838d;   /* zacht oudroze */
    --color-section-8:  #6c757d;   /* koel grijsgroen */
    --color-section-9:  #9c6644;   /* diep, mat bruinoranje */
    --color-section-10: #6b705c;   /* gedempt olijfgroen */
    --color-section-11: #7f7f7f;   /* neutraal grijs */
    --color-section-12: #495057;   /* donker, koel blauwgrijs */
    
    --color-footer: #355c7d;    /* diep retro blauw */
    --color-header: #355c7d; /* diep retro blauw */
    --color-text: #fffbe7;         /* zacht geelwit */
    --color-darktext: #111;         /* zacht geelwit */

    --color-cijfer: #096; /* groen voor cijfers */
    --color-cijfer-background: #ececec; /* lichtgrijs voor cijfer achtergrond */
    --color-cijfer-border: #096; 

    --bgcolor-inleiding:      #fdfcf9; /* zeer licht zand-beige, warm */
    --bgcolor-specificaties:  #f1f8f7; /* zeer licht blauwgroen, koel */
    --bgcolor-algemeen:       #fdf9f4; /* zeer licht warm zandkleur */
    --bgcolor-anderen:        #f0f5f6; /* zeer licht grijsblauw, koel */
    --bgcolor-alternatieven:  #f9fbf7; /* zeer licht groengeel, neutraal */
    --bgcolor-afsluiting:     #eef6f2; /* zeer licht mintgrijs, koel */
    --bgcolor-beoordeling:    #fefaf6; /* zeer licht beige, warm neutraal */
    --bgcolor-faq:           #f0f3f9; 

    --spacing-small: 0.8rem;
    --spacing-medium: 1.6rem;

    --font-size-1: 1rem;
    --font-size-2: 1.2rem;
    --font-size-3: 1.44rem;
    --font-size-4: 1.728rem;
    --font-size-5: 2.074rem;
    --font-size-6: 2.488rem;

    --wrapper-width: 800px;

    --color-section-21: #f8f6ef; /* zeer licht retro beige */
    --color-section-22: #e8f0f4; /* zeer licht retro blauwgrijs */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    font-size: var(--font-size-1);
}

main {
    flex: 1 0 auto;
}

.titel {
    text-align: center;
    margin: var(--spacing-medium) 0;
}

.wrapper {
    width: 100%;
    max-width: var(--wrapper-width);
    margin: 0 auto;
}

h1 {
    margin-top: var(--spacing-medium);
    margin-left: var(--spacing-small);
    margin-right: var(--spacing-small);
}

h2 {
    padding-bottom: 2px;
    margin-bottom: 4px;
    margin-top: 35px;
    text-transform: none;
}

h2::first-letter {
    text-transform: uppercase;
}

h3 {
    padding-bottom: 2px;
    margin-bottom: 4px;
    margin-top: 22px;
}

p {
    margin: 6px 0;
    line-height: 1.6;
}

section {
    margin-bottom: 0px;
}

.indent {
    margin-left: 2%;
}

.cijfer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-4);
    width: var(--font-size-6);
    height: var(--font-size-6);
    color: var(--color-cijfer);
    margin-top: 2px;
    margin-bottom: 2px;
    margin-right: var(--spacing-small);
    background-color: var(--color-cijfer-background);
    border: 1px solid var(--color-cijfer-border);
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    line-height: 1;
}

.prijs {
    font-size: 1.5em;
    color: #666;
    margin-right: 10px;
}

.specificaties {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 24px 0;
    background: #f8fafc;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.07);
    font-size: 1.05em;
}

.specificaties tr {
    border-bottom: 1px solid #eeeeee;
}

.specificaties tr:last-child {
    border-bottom: none;
}

.specificaties td {
    padding: 6px 8px;
    color: #222;
    background: #fff;
    vertical-align: top;
    border: none;
    line-height: 1.2;
}

.specificaties tr:nth-child(even) td {
    background: #f8f8f8;
}

/* Toegevoegd: stijl voor de review-afbeelding */
.review-afbeelding {
    max-width: 100%;
    display: block;
    margin-bottom: 20px;
}

.inleiding {
    font-style: italic;
}

.specificaties {
    font-size: 95%;
}

.header {
    background-color: var(--color-header);
    color: var(--color-text);
    padding: var(--spacing-small) 0;
    position: sticky;
    top: 0;
    height: 3rem;
    min-height: 3rem;
    display: flex;
    z-index: 1000;
    align-items: center;
    overflow: visible; /* Voeg deze regel toe */
}

.logo {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    margin-top: 25px;
}

.logo img {
    display: block;
    height: 3rem;
    filter: drop-shadow(0 0px 20px rgba(118, 118, 118, 0.9));
}

.mainmenucard {
    color: var(--color-text);
    padding: var(--spacing-medium);
    margin: 0;
    min-height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mainmenucard a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.mainmenucard a:hover h2 {
}

.mainmenucard h2 {
    font-size: var(--font-size-4);
    margin: 0;
    width: 100%;
}

.submenucard {
    color: var(--color-text);
    padding: var(--spacing-small);
    padding-bottom: var(--spacing-medium);
    margin: 0 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.2s cubic-bezier(.4,0,.2,1);
    background: none;
}

.submenucard a {
    color: inherit;
    text-decoration: none;
    width: 100%;
    display: block;
}

.submenucard h2 {
    font-size: var(--font-size-4);
    margin: 0;
    width: 100%;
}


.producten {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
    width: 100%;
}

.productcard {
    display: grid !important; /* Forceer dat de productcard altijd grid blijft */
    grid-template-columns: 1fr auto;
    align-items: flex-start;
    position: relative;
    background-color: #FFF;
    color: var(--color-darktext);
    padding: var(--spacing-small);
    margin: 0;
    min-height: 5rem;
    border-radius: 5px;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.06);
    transition: box-shadow 0.2s cubic-bezier(.4,0,.2,1), transform 0.2s cubic-bezier(.4,0,.2,1);
    cursor: pointer;
    text-decoration: none;
    font: inherit;
}

.submenucard > a {
    display: block;
}

.productcard-content {
    min-width: 0;
}

.thumb {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    margin-left: 1em;
    margin-top: 0;
}

.thumb img {
    max-height: 50px;
    height: auto;
    display: block;
}

.productcard h3 {
    font-size: var(--font-size-2);
    color: var(--color-darktext);
    font-weight: bold;
    margin: 0 0 0.2em 0; 
    text-align: left;
}



.productcard:hover {
    box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10);
    transform: translateY(-2px) scale(1.01);
    text-decoration: none;
}

.section-1 { background-color: var(--color-section-1); }
.section-2 { background-color: var(--color-section-2); }
.section-3 { background-color: var(--color-section-3); }
.section-4 { background-color: var(--color-section-4); }
.section-5 { background-color: var(--color-section-5); }
.section-6 { background-color: var(--color-section-6); }
.section-7 { background-color: var(--color-section-7); }
.section-8 { background-color: var(--color-section-8); }
.section-9 { background-color: var(--color-section-9); }
.section-10 { background-color: var(--color-section-10); }
.section-11 { background-color: var(--color-section-11); }
.section-12 { background-color: var(--color-section-12); }

.section-21 { background-color: var(--color-section-21); padding: var(--spacing-small); }
.section-22 { background-color: var(--color-section-22); padding: var(--spacing-small); }

.footer {
    background-color: var(--color-footer);
    color: var(--color-text);
    text-align: center;
    padding: var(--spacing-small) 0;
    flex-shrink: 0;
}

.subcategorietitel {
    color: var(--color-text);
    text-align: center;
    font-size: var(--font-size-3);
    font-weight: bold;
    margin-bottom: var(--spacing-small);
    width: 100%;
}

.review-afbeelding {
    margin-top: var(--spacing-medium);
}

.inleiding {
    background-color: var(--bgcolor-inleiding);
    padding: var(--spacing-small);
    border-radius: 6px;
    margin-bottom: var(--spacing-medium);
}
.specificaties {
    background-color: var(--bgcolor-specificaties);
    padding: var(--spacing-small);
    border-radius: 6px;
    margin-bottom: var(--spacing-medium);
}
.algemeen {
    background-color: var(--bgcolor-algemeen);
    padding: var(--spacing-small);
    border-radius: 6px;
    margin-bottom: var(--spacing-medium);
}
.anderen {
    background-color: var(--bgcolor-anderen);
    padding: var(--spacing-small);
    border-radius: 6px;
    margin-bottom: var(--spacing-medium);
}
.alternatieven {
    background-color: var(--bgcolor-alternatieven);
    padding: var(--spacing-small);
    border-radius: 6px;
    margin-bottom: var(--spacing-medium);
}
.afsluiting {
    background-color: var(--bgcolor-afsluiting);
    padding: var(--spacing-small);
    border-radius: 6px;
    margin-bottom: var(--spacing-medium);
}
.beoordeling {
    background-color: var(--bgcolor-beoordeling);
    padding: var(--spacing-small);
    border-radius: 6px;
    margin-bottom: var(--spacing-medium);
}
.faq {
    background-color: var(--bgcolor-faq);
    padding: var(--spacing-small);
    border-radius: 6px;
    margin-bottom: var(--spacing-medium);
}

.affiliatelink {
    position: fixed;
    left: 50%;
    right: 0;
    bottom: var(--spacing-small);
    width: 50vw; /* horizontaal de helft van het scherm */
    background: #b22222; /* firebrick, retro rood */
    color: #fffbe7;
    padding: var(--spacing-small);
    text-align: center;
    z-index: 9999;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
    height: auto;
    font-size: 1.3em;
    display: flex; /* <-- altijd flex */
    align-items: center;
    justify-content: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    transition:
        opacity 0.5s cubic-bezier(.4,0,.2,1),
        transform 0.3s cubic-bezier(.4,0,.2,1);
    opacity: 0;
    pointer-events: none;
}

.affiliatelink.visible {
    opacity: 1;
    pointer-events: auto;
}

.affiliatelink a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fffbe7;
    text-decoration: none;
}


/* Desktop grid layout */
@media (min-width: 768px) {
    .header {
        margin-bottom: var(--spacing-medium);
    }
    main {
        max-width: 1200px;
        width: calc(100% - 2 * var(--spacing-medium)); /* zorgt voor marge bij kleinere schermen */
        margin: var(--spacing-medium) auto var(--spacing-medium) auto; /* boven, rechts, onder, links */
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-small);
    }
    .mainmenucard {
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 10rem;
    }
    .mainmenucard {
        transition: 
            transform 0.2s cubic-bezier(.4,0,.2,1),
            filter 0.2s cubic-bezier(.4,0,.2,1),
            background-color 0.2s cubic-bezier(.4,0,.2,1),
            color 0.2s cubic-bezier(.4,0,.2,1),
            box-shadow 0.2s cubic-bezier(.4,0,.2,1);
    }
    .mainmenucard:hover {
        transform: scale(1.005);
        z-index: 1;
        filter: brightness(1.08);
        color: var(--color-text);
        box-shadow: 0 0 10px 0 rgba(28, 28, 28, 0.22);
    }
    .mainmenucard:hover h2,
    .mainmenucardn:hover a {
        color: var(--color-text);
    }
    .section-21, .section-22 {
        padding: var(--spacing-small);
        margin-bottom: var(--spacing-medium);
        border-radius: 6px;
    }
    .submenucard {
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.2s cubic-bezier(.4,0,.2,1);
    }
    
    .logo img {
        transition: transform 0.2s cubic-bezier(.4,0,.2,1);
        cursor: pointer;
    }
    .logo img:hover {
        transform: scale(1.1);
    }

    h1 {
        margin-left: var(--spacing-medium);
    }    

    .inleiding {
        padding: var(--spacing-medium);
    }
    .specificaties {
        padding: var(--spacing-medium);
    }
    .algemeen {
        padding: var(--spacing-medium);
    }
    .anderen {
        padding: var(--spacing-medium);
    }
    .alternatieven {
        padding: var(--spacing-medium);
    }
    .afsluiting {
        padding: var(--spacing-medium);
    }
    .beoordeling {
        padding: var(--spacing-medium);
    }
    .faq {
        padding: var(--spacing-medium);
    }

    .affiliatelink {
     max-width: 400px; /* Max breedte voor desktop */
     bottom: var(--spacing-medium); /* Ruimte onderaan */
     border-radius: 10px;
    }

}

/* Mobile styles */
@media (max-width: 767px) {
    .wrapper {
        padding: var(--spacing-small);
    }
    .mainmenucard {
        margin-left: 0;
        margin-right: 0;
    }
    
    .submenucard.section-1 {
    padding-top: 2.5em; /* Extra ruimte bovenaan alleen voor de eerste submenucard */
}
    .submenucard {
        padding: var(--spacing-small);
        margin-bottom: var(--spacing-medium);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .submenucard h2 {
        font-size: var(--font-size-3);
    }
    .productcard {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .productcard-content {
        width: 100%;
    }
    .thumb {
        margin-left: 0;
        margin-top: var(--spacing-small);
    }
    .thumb img {
        max-height: 80px; /* Grotere afbeelding op mobiel */
    }
}