/* ===== Lettertypen (zelf gehost, SIL Open Font License: zie fonts/) ===== */
@font-face {
    font-family: "Lora";
    src: url("fonts/lora-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lora";
    src: url("fonts/lora-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito Sans";
    src: url("fonts/nunito-sans-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito Sans";
    src: url("fonts/nunito-sans-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito Sans";
    src: url("fonts/nunito-sans-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ===== Variabelen (ontwerp: Vibe Cadeaus) ===== */
:root {
    /* Kleuren */
    --kleur-achtergrond: #F6F1E9;   /* pagina, zand/crème */
    --kleur-kaart: #FFFDF9;         /* productkaarten, mandje-knop */
    --kleur-tekst: #3B342C;         /* koppen en hoofdtekst */
    --kleur-tekst-zacht: #6B6157;   /* introductie en beschrijvingen */
    --kleur-rand: #E8DFD0;          /* kaartrand */
    --kleur-lijn: #E4DACA;          /* lijn onder header */
    --kleur-rand-knop: #D8CBB5;     /* rand mandje-knop */
    --kleur-accent: #9E4F2C;        /* In mandje-knop (terracotta) */
    --kleur-accent-hover: #7A3A1F;  /* hover knop en links */
    --kleur-badge: #5E6E52;         /* teller winkelmandje (salie) */
    --kleur-op-accent: #FFFFFF;     /* tekst op knop en badge */

    /* Aanvullend (niet in het ontwerp; afgeleid van het palet) */
    --kleur-fout: #A3321A;
    --kleur-succes: var(--kleur-badge);
    --kleur-succes-licht: #EDF0E8;

    /* Lettertypen */
    --font-kop: "Lora", Georgia, serif;
    --font-tekst: "Nunito Sans", system-ui, sans-serif;

    /* Lettergroottes (desktop) */
    --maat-winkelnaam: 26px;
    --maat-intro-kop: 34px;
    --maat-intro-tekst: 16px;
    --maat-productnaam: 22px;
    --maat-beschrijving: 15px;
    --maat-prijs: 20px;
    --maat-knop: 15px;

    /* Afstanden en maten (desktop) */
    --header-hoogte: 80px;
    --zijmarge: 80px;
    --max-breedte: 1120px;
    --intro-boven: 36px;
    --intro-onder: 28px;
    --raster-gap: 32px;
    --afbeelding-hoogte: 330px;
    --kaart-padding: 22px 24px 24px;
    --kaart-radius: 18px;
    --ondermarge: 64px;
    --mandje-knop: 48px;
    --badge: 22px;

    --radius-klein: 12px;
}

/* ===== Basis ===== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-tekst);
    font-weight: 400;
    line-height: 1.5;
    color: var(--kleur-tekst);
    background: var(--kleur-achtergrond);
}

h1, h2, h3 {
    font-family: var(--font-kop);
    line-height: 1.25;
    color: var(--kleur-tekst);
}

a {
    color: var(--kleur-accent);
}

a:hover {
    color: var(--kleur-accent-hover);
}

.container {
    max-width: calc(var(--max-breedte) + 2 * var(--zijmarge));
    margin: 0 auto;
    padding: 0 var(--zijmarge);
}

main {
    padding-bottom: var(--ondermarge);
}

/* ===== Header ===== */
.kop {
    border-bottom: 1px solid var(--kleur-lijn);
}

.kop-inhoud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    height: var(--header-hoogte);
}

.logo {
    font-family: var(--font-kop);
    font-size: var(--maat-winkelnaam);
    font-weight: 600;
    color: var(--kleur-tekst);
    text-decoration: none;
}

.logo:hover {
    color: var(--kleur-accent-hover);
}

.mandje-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mandje-knop);
    height: var(--mandje-knop);
    border-radius: 50%;
    background: var(--kleur-kaart);
    border: 1px solid var(--kleur-rand-knop);
    color: var(--kleur-tekst);
}

.mandje-link:hover {
    color: var(--kleur-accent-hover);
    border-color: var(--kleur-accent-hover);
}

.mandje-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: var(--badge);
    height: var(--badge);
    padding: 0 5px;
    border-radius: calc(var(--badge) / 2);
    background: var(--kleur-badge);
    color: var(--kleur-op-accent);
    font-size: 12px;
    font-weight: 700;
    line-height: var(--badge);
    text-align: center;
}

/* ===== Introductie ===== */
.intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    padding-top: var(--intro-boven);
    padding-bottom: var(--intro-onder);
}

.intro h1 {
    margin: 0;
    font-size: var(--maat-intro-kop);
    font-weight: 500;
}

.intro p {
    max-width: 440px;
    margin: 0;
    font-size: var(--maat-intro-tekst);
    color: var(--kleur-tekst-zacht);
}

/* ===== Producten ===== */
.producten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--raster-gap);
}

.product-kaart {
    display: flex;
    flex-direction: column;
    background: var(--kleur-kaart);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--kaart-radius);
    overflow: hidden;
}

.product-afbeelding {
    display: block;
    width: 100%;
    height: var(--afbeelding-hoogte);
    object-fit: cover;
}

/* Reserve als een product (nog) geen afbeelding heeft */
.product-icoon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    background: var(--kleur-rand);
}

.product-tekst {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--kaart-padding);
}

.product-tekst h3 {
    margin: 0 0 6px;
    font-size: var(--maat-productnaam);
    font-weight: 600;
}

.beschrijving {
    margin: 0;
    font-size: var(--maat-beschrijving);
    color: var(--kleur-tekst-zacht);
}

/* Prijs en knop onderaan, zodat alle knoppen op één lijn staan */
.product-onder {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 24px;
}

.prijs {
    margin: 0;
    font-size: var(--maat-prijs);
    font-weight: 700;
}

/* ===== Knoppen ===== */
.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 22px;
    border: none;
    border-radius: 24px;
    background: var(--kleur-accent);
    color: var(--kleur-op-accent);
    font-family: var(--font-tekst);
    font-size: var(--maat-knop);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.knop:hover {
    background: var(--kleur-accent-hover);
}

.knop:disabled {
    opacity: 0.6;
    cursor: wait;
}

.knop-klein {
    font: inherit;
    color: var(--kleur-tekst);
    background: var(--kleur-kaart);
    border: 1px solid var(--kleur-rand-knop);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
}

.knop-klein:hover:not(:disabled) {
    border-color: var(--kleur-accent-hover);
    color: var(--kleur-accent-hover);
}

.knop-klein:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.knop:focus-visible,
.knop-klein:focus-visible,
.mandje-link:focus-visible,
.logo:focus-visible {
    outline: 3px solid var(--kleur-accent);
    outline-offset: 2px;
}

/* ===== Winkelmandje ===== */
.mandje,
.afrekenen,
#bevestiging {
    padding-top: 48px;
}

.mandje h2,
.afrekenen h2 {
    margin: 0 0 16px;
    font-size: 26px;
    font-weight: 600;
}

.melding,
.mandje-leeg {
    margin: 0;
    background: var(--kleur-kaart);
    border: 1px dashed var(--kleur-rand-knop);
    border-radius: var(--kaart-radius);
    padding: 32px;
    text-align: center;
    color: var(--kleur-tekst-zacht);
}

/* Op heel smalle schermen scrolt alleen de tabel, niet de hele pagina */
.mandje-scroll {
    position: relative;
    overflow-x: auto;
}

.mandje-tabel {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--kleur-kaart);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--kaart-radius);
    overflow: hidden;
}

.mandje-tabel th,
.mandje-tabel td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--kleur-rand);
}

.mandje-tabel thead th {
    background: var(--kleur-achtergrond);
    font-weight: 700;
}

.mandje-tabel tfoot th,
.mandje-tabel tfoot td {
    font-size: 18px;
    font-weight: 700;
    border-bottom: none;
}

.mandje-tabel tfoot td {
    color: var(--kleur-accent);
}

.aantal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.aantal-getal {
    min-width: 2ch;
    text-align: center;
}

.verwijder-icoon {
    display: none;
}

/* ===== Afrekenen ===== */
.test-uitleg {
    color: var(--kleur-tekst-zacht);
    font-size: 14px;
}

.formulier {
    max-width: 28rem;
    background: var(--kleur-kaart);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--kaart-radius);
    padding: 24px;
}

.veld {
    margin-bottom: 16px;
}

.veld label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.veld input {
    width: 100%;
    font: inherit;
    color: var(--kleur-tekst);
    background: #FFFFFF;
    border: 1px solid var(--kleur-rand-knop);
    border-radius: var(--radius-klein);
    padding: 10px 14px;
}

.veld input:focus-visible {
    outline: 3px solid var(--kleur-accent);
    outline-offset: 1px;
}

.veld input[aria-invalid="true"] {
    border-color: var(--kleur-fout);
}

.veld-fout,
.formulier-fout {
    color: var(--kleur-fout);
    font-size: 14px;
    margin: 4px 0 0;
}

.formulier-fout {
    margin-bottom: 16px;
}

.bevestiging {
    background: var(--kleur-succes-licht);
    border: 1px solid var(--kleur-succes);
    border-radius: var(--kaart-radius);
    padding: 24px;
}

.bevestiging h2 {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 600;
    color: var(--kleur-succes);
}

#bevestiging-nummer {
    white-space: nowrap;
}

.visueel-verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ===== Voet ===== */
.voet {
    border-top: 1px solid var(--kleur-lijn);
    padding: 24px 0;
    text-align: center;
    color: var(--kleur-tekst-zacht);
    font-size: 14px;
}

/* ===== Tablet: 2 kolommen (niet in het ontwerp; voorkomt te smalle kaarten) ===== */
@media (max-width: 1023px) {
    :root {
        --zijmarge: 40px;
    }

    .producten {
        grid-template-columns: repeat(2, 1fr);
    }

    .intro {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ===== Mobiel ===== */
@media (max-width: 700px) {
    :root {
        --maat-winkelnaam: 22px;
        --maat-intro-kop: 24px;
        --maat-intro-tekst: 15px;
        --maat-productnaam: 20px;
        --maat-beschrijving: 14px;
        --maat-prijs: 19px;

        --header-hoogte: 64px;
        --zijmarge: 16px;
        --intro-boven: 20px;
        --intro-onder: 16px;
        --raster-gap: 16px;
        --afbeelding-hoogte: 290px;
        --kaart-padding: 16px 18px 18px;
        --kaart-radius: 16px;
        --ondermarge: 32px;
        --mandje-knop: 44px;
        --badge: 20px;
    }

    .producten {
        grid-template-columns: 1fr;
    }

    .intro {
        gap: 8px;
    }

    .mandje,
    .afrekenen,
    #bevestiging {
        padding-top: 32px;
    }

    .mandje-tabel th,
    .mandje-tabel td {
        padding: 8px;
    }

    /* Kolom "Prijs" (per stuk) verbergen op smalle schermen */
    .kolom-prijs {
        display: none;
    }

    .aantal {
        gap: 4px;
    }

    .verwijder-tekst {
        display: none;
    }

    .verwijder-icoon {
        display: inline;
    }
}