/* =====================================================
   CSA Boer - Site CSS

   Overgenomen van apps/gildeboer/boerderijwinkelier/website: dezelfde vormtaal en
   dezelfde agri-* klassenamen, want het is hetzelfde huis en hetzelfde gekochte
   sjabloon. Wat hier wél anders is, is het palet en het kopfont — zie hieronder.
   ===================================================== */

/* === CSS Variables === */
:root {
    /* Een eigen palet, en dat is geen smaakkwestie. Boerderijwinkelier staat op
       bosgroen met goud; zou deze site daar ook op staan, dan leest een bezoeker die
       beide tegenkomt ze als één afzender — precies wat een silo moet voorkomen. Het
       diepe blauwgroen hieronder verwijst naar de tuinderij, de terracotta ernaast naar
       de grond; samen zijn ze onmiskenbaar iets anders dan groen-met-goud. */
    --primary-color: #14504A;
    --secondary-color: #C86B36;
    --white-color: #ffffff;
    --background-color: #FAFBF7;
    --background-medium: #EEF1EA;
    --text-dark: #1a1a1a;
    --text-medium: #666666;
    --text-light: #999999;
    --p-color: #717275;
    --primary-dark: #0F3B36;
    --border-color: #e5e5e5;
    --error-color: #dc2626;
    --whatsapp-color: #25D366;
    --surface-color: #f9f9f9;
    /* De slagschaduw onder een knop in de merkkleur. Als eigen variabele omdat rgba()
       de kleur niet uit --primary-color kan halen; hier stond hem daarom driemaal als
       los rgba(), waarvan tweemaal in het blauw van een ander sjabloon. */
    --shadow-primary: rgba(20, 80, 74, 0.3);
    --shadow-primary-strong: rgba(20, 80, 74, 0.4);
    /* Het groene waas over de herofoto, dat de witte kop leesbaar houdt boven een foto
       waarvan wij de helderheid niet kennen. Als losse kanalen en niet als kleur, omdat
       elke stop in het verloop een andere doorzichtigheid heeft en rgba() de alfa dus van
       buiten moet krijgen. Stond vijfmaal uitgeschreven in twee verlopen. */
    --hero-overlay-dark: 16, 62, 57;
    --hero-overlay-light: 24, 80, 74;
    /* Om dezelfde reden als het waas hierboven: zwart onder een kaart en wit op de donkere
       voettekst komen allebei op tientallen plekken voor, elke keer met een eigen alfa. De
       kleur hoort op één plek, de doorzichtigheid bij de plek waar hij staat. */
    --shadow-color: 0, 0, 0;
    --on-dark: 255, 255, 255;
    /* De navigatiebalk plakt bovenaan, dus alles wat eronder zou verdwijnen rekent
       met zijn hoogte: de letterbalk die eronder meeplakt, en de sprongmarge —
       de balk plus een regel wit, zodat een aangesprongen kop niet tegen de balk
       aan komt te liggen. Stonden als los getal op acht plekken, met een comment
       die zelf zei dat het "dezelfde maat" was. */
    --navbar-height: 90px;
    --scroll-offset: 110px;
    --body-font-family: 'DM Sans', sans-serif;
    /* Een eigen kopfont, om dezelfde reden als het palet hierboven. Lora is een
       contrastschreef met een geschreven inslag, waar boerderijwinkelier op Bitter staat —
       een schreefblok. Naast elkaar gezet is dat het verschil dat een lezer het eerst
       ziet, nog voor de kleur. De lopende tekst blijft DM Sans. */
    --heading-font-family: 'Lora', serif;
    --p-font-size: 18px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
}

/* === Reset === */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: var(--body-font-family);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* Zonder deze marge landt een sprong naar #kennis of #contact onder de
       plakkende navigatiebalk, met de kop uit beeld. */
    scroll-padding-top: var(--scroll-offset);
}

body {
    background-color: var(--background-color);
    color: var(--text-dark);
    font-family: var(--body-font-family);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font-family);
    font-weight: var(--font-weight-medium);
    /* Meeschalend en niet in pixels: dezelfde -1px die hier stond en een kop van 42px
       strak zet, drukt een kop van 20px tegen elkaar aan. Eén regel voor alle zes: de
       waarde stond ook nog eens verderop voor h1 tot en met h3, waardoor deze alleen
       voor h4-h6 gold en niemand aan de bovenkant kon zien wat een h1 nu deed. */
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text-dark);
}

h1 { font-size: 42px; font-weight: var(--font-weight-bold); }
h2 { font-size: 36px; font-weight: var(--font-weight-bold); }
h3 { font-size: 28px; }

p {
    color: var(--p-color);
    font-size: var(--p-font-size);
    font-weight: var(--font-weight-normal);
    overflow-wrap: break-word;
}

ul li {
    color: var(--p-color);
    font-size: var(--p-font-size);
    font-weight: var(--font-weight-normal);
}

a, button { touch-action: manipulation; transition: all 0.3s; }
a { display: inline-block; color: var(--secondary-color); text-decoration: none; }
a:hover { color: var(--secondary-color); }
b, strong { font-weight: var(--font-weight-bold); }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }

::selection {
    background-color: var(--primary-color);
    color: var(--white-color);
}


/* =====================================================
   TOPBAR
   ===================================================== */
.agri-topbar {
    background-color: var(--surface-color);
    color: var(--text-medium);
    font-size: 13px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.agri-topbar__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.agri-topbar__left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.agri-topbar__welcome {
    opacity: 0.9;
    font-size: 13px;
}

.agri-topbar__right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.agri-topbar__divider {
    opacity: 0.3;
    font-size: 11px;
}

.agri-topbar__info-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.agri-topbar__info-item i {
    color: var(--secondary-color);
    font-size: 14px;
}

.agri-topbar__info-item a,
.agri-topbar__info-item span {
    color: var(--text-medium);
    font-size: 13px;
}

.agri-topbar__info-item a:hover {
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .agri-topbar { display: none; }
}


/* =====================================================
   NAVBAR
   ===================================================== */
.agri-navbar {
    background-color: var(--white-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(var(--shadow-color), 0.08);
    padding: 0;
}

.agri-navbar__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--navbar-height);
}

.agri-navbar__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.agri-navbar__toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--primary-color);
    transition: all 0.3s;
}

.agri-navbar__menu {
    display: flex;
    list-style: none;
    gap: 0;
    margin: 0;
    padding: 0;
}

.agri-navbar__menu-link {
    display: block;
    padding: 32px 18px;
    color: var(--text-dark);
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.3px;
    transition: color 0.3s;
    position: relative;
}

.agri-navbar__menu-link:hover,
.agri-navbar__menu-link--active {
    color: var(--primary-color);
}

.agri-navbar__actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.agri-navbar__phone-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--secondary-color);
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    margin-left: 10px;
}

.agri-navbar__phone-wrap > i {
    color: var(--white-color);
    font-size: 18px;
}

.agri-navbar__phone-text {
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1.2;
}

.agri-navbar__phone-label {
    font-size: 14px;
    color: rgba(var(--on-dark), 0.85);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
}

.agri-navbar__phone {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--white-color);
}

.agri-navbar__phone:hover {
    color: var(--white-color);
    opacity: 0.9;
}

@media (max-width: 992px) {
    .agri-navbar__toggle {
        display: flex;
        order: 99;
        margin-left: auto;
    }

    .agri-navbar__menu {
        display: none;
        position: absolute;
        top: var(--navbar-height);
        left: 0;
        right: 0;
        background: var(--white-color);
        flex-direction: column;
        padding: 10px 0;
        box-shadow: 0 5px 10px rgba(var(--shadow-color), 0.1);
    }

    .agri-navbar__menu--open {
        display: flex;
    }

    .agri-navbar__menu-link {
        padding: 12px 20px;
    }

    .agri-navbar__actions {
        display: none;
    }
}


/* =====================================================
   HERO SLIDER
   ===================================================== */
.agri-hero {
    position: relative;
    overflow: visible;
}

.agri-hero__slider {
    position: relative;
    height: 570px;
    overflow: hidden;
}

.agri-hero__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.agri-hero__slide--active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.agri-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right,
        rgba(var(--hero-overlay-dark), 0.82) 0%,
        rgba(var(--hero-overlay-light), 0.6) 50%,
        rgba(var(--hero-overlay-light), 0.45) 100%);
}

/* De golf hoorde bij de groene stappenbalk die eronder zat; die is weg, dus de
   golf verhuist naar de hero zelf. Ook de kleur draait om: hij was groen om de
   balk in de lichte sectie te laten aflopen, nu is hij lichtgrijs zodat de
   sectie eronder in de foto omhoog komt. Dat is dezelfde overgang, van de
   andere kant bekeken. */
.agri-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    /* De golf krijgt zijn kleur van de achtergrond en niet uit de tekening zelf. Een
       `fill` binnen een data-URI kan geen `var()` lezen, dus stond --background-medium
       hier een tweede keer als hexcode en liep hij niet mee als die kleur verandert. Als
       masker bepaalt de tekening alleen nog de vorm; de halve doorzichtigheid van de
       bovenste golf blijft, want een masker rekent met de alfa die erin zit. */
    background-color: var(--background-medium);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0v99.7C62 69 122.4 48.7 205 66c83.8 17.6 160.5 20.4 240-12 54-22 110-26 173-10a392.2 392.2 0 0 0 222-5c55-17 110.3-36.9 160-27.2V0H0Z' fill='%23000' opacity='.5'/%3E%3Cpath d='M0 0v74.7C62 44 122.4 28.7 205 46c83.8 17.6 160.5 25.4 240-7 54-22 110-21 173-5 76.5 19.4 146.5 23.3 222 0 55-17 110.3-31.9 160-22.2V0H0Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0v99.7C62 69 122.4 48.7 205 66c83.8 17.6 160.5 20.4 240-12 54-22 110-26 173-10a392.2 392.2 0 0 0 222-5c55-17 110.3-36.9 160-27.2V0H0Z' fill='%23000' opacity='.5'/%3E%3Cpath d='M0 0v74.7C62 44 122.4 28.7 205 46c83.8 17.6 160.5 25.4 240-7 54-22 110-21 173-5 76.5 19.4 146.5 23.3 222 0 55-17 110.3-31.9 160-22.2V0H0Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    /* De tekening is gevuld aan de bovenkant en golvend aan de onderkant, want
       zo hing hij onder de balk. Hier moet het andersom, dus hij staat op zijn
       kop in plaats van dat er een tweede tekening bijkomt. */
    transform: scaleY(-1);
    z-index: 3;
    pointer-events: none;
}

.agri-hero__content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    text-align: center;
}

.agri-hero__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--white-color);
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* De leus komt uit site.yaml en is dus van tevoren niet op maat te snijden.
   Gildeboer kon hier een vaste 76px met nowrap gebruiken omdat daar één korte
   zin staat; hier loopt een langere leus dan buiten beeld. Vandaar één
   meeschalende maat in plaats van een vaste maat plus vier uitzonderingen. */
.agri-hero__heading {
    color: var(--white-color);
    font-size: clamp(34px, 5.3vw, 76px);
    font-weight: var(--font-weight-medium);
    line-height: 1.1;
    max-width: 100%;
    margin-bottom: 0;
    letter-spacing: -1px;
    /* De leus komt uit data/site.yaml, dus de regelval is niet vooraf bekend: op deze
       breedte hield hij één woord over op de tweede regel. Een max-width die dáár op
       maat is gemaakt, klopt niet meer zodra de zin verandert; dit laat de browser de
       twee regels even lang maken, wat die zin ook is. */
    text-wrap: balance;
}



@media (max-width: 992px) {
    .agri-hero__slider { height: 420px; }
    .agri-hero__label { font-size: 18px; }
}

@media (max-width: 576px) {
    .agri-hero__slider { height: 380px; }
    .agri-hero__label { font-size: 14px; letter-spacing: 3px; }

    .agri-hero__overlay {
        background: linear-gradient(to bottom,
            rgba(var(--hero-overlay-dark), 0.85) 0%,
            rgba(var(--hero-overlay-dark), 0.7) 100%);
    }

    .agri-hero::after { height: 50px; }
}


/* =====================================================
   ABOUT
   ===================================================== */
.agri-about {
    padding: 110px 20px 100px;
    background: var(--white-color);
    position: relative;
}

.agri-about__container {
    max-width: 1140px;
    margin: 0 auto;
}

.agri-about__header {
    text-align: center;
    margin-bottom: 54px;
}

.agri-about__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.agri-about__leaf {
    color: var(--primary-color);
}

.agri-about__heading {
    font-size: 40px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
    margin-bottom: 18px;
    line-height: 1.2;
}

.agri-about__intro {
    max-width: 720px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-medium);
}

/* De twee portretten hingen hier scheefgedraaid over elkaar heen, zoals in het
   gekochte sjabloon. Dat werkt voor sfeerbeelden, maar deze twee foto's zijn het
   bewijs dat er mensen achter de stukken zitten. Dan moet je ze recht kunnen
   aankijken, naast de naam waar ze bij horen. */
.agri-about__schrijvers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
}

.agri-about__schrijver {
    display: flex;
    gap: 26px;
    align-items: flex-start;
}

.agri-about__portret {
    width: 200px;
    /* Zonder deze regel wint de height uit het HTML-attribuut (1198) en doet
       aspect-ratio niets: die rekent alleen een hoogte uit als er geen staat. */
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
    border-radius: 6px;
    flex-shrink: 0;
}

.agri-about__naam {
    font-size: 19px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
    margin-bottom: 2px;
}

.agri-about__rol {
    font-size: 13px;
    color: var(--secondary-color);
    font-weight: var(--font-weight-medium);
    margin-bottom: 12px;
}

.agri-about__bio {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-medium);
}

.agri-about__gevraagd {
    margin-top: 58px;
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
}

.agri-about__subkop {
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 18px;
}

.agri-about__onderwerpen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.agri-about__onderwerp {
    display: inline-block;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-dark);
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 8px 16px;
    transition: all 0.2s;
}

.agri-about__onderwerp:hover {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.agri-about__buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.agri-about__btn {
    display: inline-block;
    padding: 13px 32px;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.5px;
    border-radius: 4px;
    transition: all 0.3s;
}

.agri-about__btn--primary {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.agri-about__btn--primary:hover {
    opacity: 0.9;
    color: var(--white-color);
}

.agri-about__btn--outline {
    background: transparent;
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
}

.agri-about__btn--outline:hover {
    background-color: var(--secondary-color);
    color: var(--white-color);
}

@media (max-width: 992px) {
    .agri-about { padding: 80px 20px 60px; }

    .agri-about__schrijvers {
        grid-template-columns: 1fr;
        gap: 34px;
    }
}

@media (max-width: 576px) {
    .agri-about__heading { font-size: 28px; }

    /* Naast de foto blijft er op een telefoon zo'n 190px over voor de tekst, en
       daar past een regel van vijfentwintig tekens in. Boven elkaar krijgt de
       bio de volle breedte terug. */
    .agri-about__schrijver {
        flex-direction: column;
        gap: 16px;
    }

    .agri-about__portret { width: 150px; }
}


/* =====================================================
   OFFERINGS (Producten)
   ===================================================== */
.agri-offerings {
    padding: 80px 20px 40px;
    background-color: var(--background-medium);
    position: relative;
}

.agri-offerings__container {
    max-width: 1200px;
    margin: 0 auto;
}

.agri-offerings__header {
    text-align: center;
    margin-bottom: 50px;
}

.agri-offerings__icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.agri-offerings__leaf {
    color: var(--white-color);
    font-size: 18px;
}

.agri-offerings__label {
    display: block;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.agri-offerings__heading {
    font-size: 40px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
}

.agri-offerings__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.agri-offerings__card {
    background-color: var(--white-color);
    border-radius: 12px;
    overflow: visible;
    text-align: center;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(var(--shadow-color), 0.06);
    position: relative;
    z-index: 1;
}

/* Alternating tilts */
.agri-offerings__card:nth-child(1) { transform: rotate(-1.5deg); }
.agri-offerings__card:nth-child(2) { transform: rotate(1.5deg); margin-top: 20px; }
.agri-offerings__card:nth-child(3) { transform: rotate(-1.5deg); }
.agri-offerings__card:nth-child(4) { transform: rotate(1.5deg); margin-top: 20px; }
.agri-offerings__card:nth-child(5) { transform: rotate(1.5deg); margin-top: 10px; }
.agri-offerings__card:nth-child(6) { transform: rotate(-1.5deg); margin-top: -10px; }

.agri-offerings__card:hover {
    z-index: 2;
    transform: rotate(0deg) translateY(-6px);
    box-shadow: 0 12px 30px rgba(var(--shadow-color), 0.12);
}

.agri-offerings__card-img {
    height: 220px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.agri-offerings__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.agri-offerings__card:hover .agri-offerings__card-img img {
    transform: scale(1.05);
}

/* De titel plakte tegen de onderrand van de foto. Een regel wit ertussen laat
   het beeld ophouden voordat de tekst begint. */
.agri-offerings__card-body {
    padding: 24px 20px 30px;
    position: relative;
}

.agri-offerings__card-title {
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
    margin-bottom: 8px;
    letter-spacing: 0;
}

.agri-offerings__card-text {
    font-size: 15px;
    color: var(--text-medium);
    line-height: 1.7;
    margin: 0;
}

.agri-offerings__card-img-link { display: block; }
.agri-offerings__card-title-link { text-decoration: none; color: inherit; }
.agri-offerings__card-title-link:hover .agri-offerings__card-title { color: var(--primary-color); }

.agri-offerings__card-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: 15px;
    transition: color 0.2s;
    display: inline-block;
    margin-top: 14px;
}

.agri-offerings__card-link::after {
    content: ' \2192';
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.2s;
}

.agri-offerings__card-link:hover { color: var(--secondary-color); }
.agri-offerings__card-link:hover::after { opacity: 1; }

@media (max-width: 768px) {
    .agri-offerings__header { text-align: left; }
    .agri-offerings__icon-wrapper { margin: 0 0 14px; }
}

@media (max-width: 992px) {
    .agri-offerings__grid { grid-template-columns: repeat(2, 1fr); }
    .agri-offerings__heading { font-size: 32px; }
}

@media (max-width: 576px) {
    /* Producten op de telefoon: één kolom, en de speelse scheefstand uit
       (op smal scherm zouden de kantelingen en negatieve marges overlappen). */
    .agri-offerings__grid { grid-template-columns: 1fr; }
    .agri-offerings__card { transform: none; margin-top: 0; }
}


/* Hele kaart klikbaar: het titel-anker rekt zich onzichtbaar over de kaart uit,
   zodat ook de lege ruimte naar de pagina leidt. De overige ankers in de kaart
   liggen erboven en houden hun eigen klikgebied. */
.agri-offerings__card-title-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.agri-offerings__card-link {
    position: relative;
    z-index: 2;
}


/* =====================================================
   CTA BANNER
   ===================================================== */
.agri-cta {
    position: relative;
    background-color: var(--primary-color);
    padding: 0;
    overflow: visible;
    padding-bottom: 40px;
    margin-bottom: 0;
}

/* Textured background */
.agri-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.3;
}

.agri-cta__container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    min-height: 420px;
}

.agri-cta__container--centered {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    min-height: 0;
}

.agri-cta__content {
    padding: 60px 0;
}

.agri-cta__container--centered .agri-cta__content {
    padding: 50px 0;
}

.agri-cta__heading {
    color: var(--white-color);
    font-size: 48px;
    /* 400 mag hier, ook al laadt Bitter alleen 500 en 700: dit is een <p> en geen kop,
       dus hij staat in DM Sans, en daarvan is 400 het eerste geladen gewicht. */
    font-weight: var(--font-weight-normal);
    margin-bottom: 0;
    line-height: 1.2;
}

/* =====================================================
   PRIJS — afsluiting van "Volledig ontzorgd"
   ===================================================== */
/* Dezelfde achtergrond als de productkaarten erboven, want dit is hun prijs en geen
   eigen hoofdstuk. De scheiding zit in de lijn boven de kaart, niet in een kleurvlak. */
.agri-pricing {
    background-color: var(--background-medium);
    padding: 0 20px 110px;
}

.agri-pricing__container {
    max-width: 1200px;
    margin: 0 auto;
}

.agri-pricing__card {
    max-width: 820px;
    margin: 0 auto;
    padding: 70px 40px 0;
    text-align: center;
    border-top: 1px solid var(--border-color);
}

.agri-pricing__lead {
    color: var(--secondary-color);
    font-size: 30px;
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    margin: 0 0 12px;
}

.agri-pricing__amount {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    font-size: 148px;
    line-height: 1;
    letter-spacing: -3px;
}

.agri-pricing__currency {
    font-size: 74px;
    font-weight: var(--font-weight-bold);
    margin-top: 14px;
    margin-right: 4px;
}

.agri-pricing__period {
    align-self: flex-end;
    color: var(--text-medium);
    font-size: 36px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0;
    margin-bottom: 18px;
    margin-left: 8px;
}

.agri-pricing__note {
    color: var(--text-medium);
    font-size: 20px;
    margin: 28px 0 0;
}

.agri-pricing__link {
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.agri-pricing__link:hover {
    color: var(--secondary-color);
}

@media (max-width: 768px) {
    .agri-pricing {
        padding-bottom: 80px;
    }

    .agri-pricing__card {
        padding: 50px 4px 0;
    }

    .agri-pricing__lead {
        font-size: 22px;
    }

    .agri-pricing__amount {
        font-size: 96px;
        letter-spacing: -2px;
    }

    .agri-pricing__currency {
        font-size: 50px;
        margin-top: 9px;
    }

    .agri-pricing__period {
        font-size: 26px;
        margin-bottom: 12px;
    }

    .agri-pricing__note {
        font-size: 17px;
    }
}

@media (max-width: 992px) {
    .agri-cta__container {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .agri-cta__content {
        text-align: center;
        padding: 50px 20px;
    }
}

@media (max-width: 768px) {
    .agri-cta__heading { font-size: 32px; }
}


/* =====================================================
   LOCATION / CONTACT CARD (split layout)
   ===================================================== */
.location-section {
    background-color: var(--primary-color);
    padding-top: 0;
    padding-bottom: 80px;
    margin-top: -1px;
    position: relative;
}

.location-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.location-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 600px;
    background: var(--white-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(var(--shadow-color), 0.1);
}

.contact-side {
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-details { margin-bottom: 40px; }

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 40px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
}

.contact-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    flex-shrink: 0;
}

.contact-text h3 {
    font-size: var(--p-font-size);
    font-family: var(--body-font-family);
    font-weight: var(--font-weight-medium);
    color: var(--p-color);
    margin-bottom: 8px;
}

.contact-text p {
    font-size: var(--p-font-size);
    font-family: var(--body-font-family);
    font-weight: var(--font-weight-normal);
    color: var(--p-color);
    line-height: 1.5;
    margin: 0;
}

.contact-text a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color 0.3s ease;
}

.contact-text a:hover { color: var(--secondary-color); }

.contact-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
}

.contact-button.primary {
    background: var(--primary-color);
    color: var(--white-color);
    box-shadow: 0 4px 15px var(--shadow-primary);
}

.contact-button.primary:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow-primary-strong);
}

.contact-button.secondary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.contact-button.secondary:hover {
    background: var(--primary-color);
    color: var(--white-color);
    transform: translateY(-2px);
}

/* === Floating WhatsApp widget (oprichter-avatar + ballon) === */
.wa-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

.wa-fab {
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 6px 20px var(--shadow-primary);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wa-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 26px var(--shadow-primary-strong);
}

.wa-fab__avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--white-color);
    display: block;
}

.wa-fab__badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--whatsapp-color);
    color: var(--white-color);
    border: 2px solid var(--white-color);
}

.wa-fab__badge i { font-size: 14px; line-height: 1; }

.wa-bubble {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 268px;
    padding: 14px 30px 14px 14px;
    background: var(--white-color);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(var(--shadow-color), 0.16);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.wa-bubble--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staartje dat naar de avatar wijst */
.wa-bubble::after {
    content: '';
    position: absolute;
    right: 22px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: var(--white-color);
    transform: rotate(45deg);
}

.wa-bubble__avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.wa-bubble__greeting {
    margin: 0;
    font-weight: var(--font-weight-bold);
    font-size: 15px;
    color: var(--text-dark);
    line-height: 1.2;
}

.wa-bubble__sub {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--text-medium);
    line-height: 1.3;
}

.wa-bubble__close {
    position: absolute;
    top: 6px;
    right: 8px;
    border: none;
    background: transparent;
    color: var(--text-light);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px;
}

.wa-bubble__close:hover { color: var(--text-dark); }

@media (max-width: 576px) {
    .wa-widget {
        right: 16px;
        bottom: 16px;
    }
    .wa-fab, .wa-fab__avatar { width: 54px; height: 54px; }
    .wa-bubble { max-width: 230px; }
}

.map-side {
    position: relative;
    background: var(--background-medium);
}

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

.location-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 992px) {
    .location-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .contact-side { padding: 50px 40px; }
    .map-side { min-height: 400px; }
}

@media (max-width: 768px) {
    .contact-side { padding: 40px 30px; }
    .contact-item { padding: 15px 0; margin-bottom: 30px; }
    .contact-icon { width: 45px; height: 45px; }
    .contact-actions { gap: 12px; }
    .map-side { min-height: 350px; }
}

@media (max-width: 480px) {
    .contact-side { padding: 30px 20px; }
    .contact-item { gap: 15px; padding: 12px 0; margin-bottom: 25px; }
    .contact-icon { width: 40px; height: 40px; }
    .contact-text h3 { font-size: 16px; }
    .contact-text p { font-size: 14px; }
    .contact-button { padding: 14px 20px; font-size: 15px; }
    .map-side { min-height: 300px; }
}


/* =====================================================
   CONTACT FORM
   ===================================================== */
.agri-contact {
    position: relative;
    padding: 80px 20px;
    background-color: var(--white-color);
    overflow: hidden;
}

.agri-contact__container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.agri-contact__left {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: auto;
}

.agri-contact__image-wrapper {
    position: relative;
    width: 380px;
    height: 380px;
}

.agri-contact__green-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: var(--primary-color);
}

.agri-contact__photo-circle {
    position: absolute;
    top: 30px;
    right: 0;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 10px 40px rgba(var(--shadow-color), 0.15);
}

.agri-contact__photo-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
}

.agri-contact__small-circle {
    position: absolute;
    bottom: 20px;
    left: 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--secondary-color);
    z-index: 3;
}

.agri-contact__caption {
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    color: var(--text-medium);
    letter-spacing: 0.5px;
    margin-top: 8px;
    position: relative;
    left: 40px;
}

.agri-contact__right { position: relative; }

.agri-contact__label {
    display: block;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.agri-contact__heading {
    font-size: 40px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
    margin-bottom: 32px;
    line-height: 1.2;
}

.agri-contact__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-medium);
    margin-bottom: 24px;
}

.agri-contact__fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.agri-contact__field input,
.agri-contact__field textarea {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    color: var(--text-dark);
    background-color: var(--background-color);
    transition: box-shadow 0.3s;
    outline: none;
}

.agri-contact__field input::placeholder,
.agri-contact__field textarea::placeholder {
    color: var(--text-light);
}

.agri-contact__field input:focus,
.agri-contact__field textarea:focus {
    box-shadow: 0 0 0 2px var(--primary-color);
}

.agri-contact__field textarea {
    resize: vertical;
    min-height: 100px;
}

.agri-contact__btn {
    display: inline-block;
    background-color: var(--secondary-color);
    color: var(--white-color);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    padding: 14px 36px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    margin-top: 8px;
}

.agri-contact__btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.agri-contact__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.agri-contact__hp {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
}

.agri-contact__feedback {
    margin-top: 16px;
    font-size: 15px;
    min-height: 24px;
}

.agri-contact__feedback--success {
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
}

.agri-contact__feedback--error {
    color: var(--error-color);
}

@media (max-width: 992px) {
    .agri-contact__container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .agri-contact__left { min-height: 350px; }
}

@media (max-width: 576px) {
    .agri-contact__heading { font-size: 28px; }

    .agri-contact__image-wrapper {
        width: 280px;
        height: 280px;
    }

    .agri-contact__photo-circle {
        width: 220px;
        height: 220px;
    }

    .agri-contact__green-circle {
        width: 160px;
        height: 160px;
    }

    .agri-contact__small-circle {
        width: 40px;
        height: 40px;
    }
}


/* =====================================================
   SERVICE DETAIL
   ===================================================== */
.service-detail {
    padding: 100px 20px;
    background: var(--white-color);
}

.service-detail__container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Sidebar */
.service-detail__sidebar {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
}

.service-detail__nav { margin-bottom: 30px; }

.service-detail__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.service-detail__nav-group {
    border-bottom: 1px solid var(--border-color);
}

.service-detail__nav-group:last-child { border-bottom: none; }

/* Groen, want dat is hoe de kop er staat. Hij stond hier donker met een --expanded
   erachteraan die hem groen maakte, en die modifier zette het sjabloon op allebei de
   groepen — twee regels om één kleur te kiezen, plus een omklappende chevron voor een
   pijltje dat in geen sjabloon voorkomt. */
.service-detail__nav-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    background: var(--white-color);
    text-decoration: none;
}

/* De lijst staat altijd open: hij is de wegwijzer op een artikelpagina, niet een
   uitklapper. Hier stond de machinerie van een uitklapper — max-height: 0 met een
   overgang, en een --open die hem op 500px zette — terwijl er geen knop is die hem
   dichtdoet. Die 500px was daarmee geen animatiedoel maar een plafond: de twee groepen
   samen zijn bij een zijbalk van 320px ruim 580px hoog, dus overflow: hidden sneed de
   onderste links eraf op elke artikelpagina. */
.service-detail__nav-subitems {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-detail__nav-sublink {
    display: block;
    padding: 8px 20px 8px 36px;
    font-size: 14px;
    color: var(--text-medium);
    text-decoration: none;
    transition: all 0.2s;
}

.service-detail__nav-sublink:hover {
    color: var(--primary-color);
    background: rgba(var(--shadow-color), 0.02);
}

.service-detail__nav-sublink--active {
    color: var(--white-color);
    background: var(--primary-color);
    font-weight: var(--font-weight-medium);
}

.service-detail__nav-sublink--active:hover {
    color: var(--white-color);
    background: var(--primary-color);
}

/* Sidebar CTA */
.service-detail__cta {
    background: var(--primary-color);
    color: var(--white-color);
    padding: 36px 28px;
    border-radius: 6px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.service-detail__cta::before {
    content: "";
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(var(--on-dark), 0.08);
    pointer-events: none;
}

.service-detail__cta::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(var(--on-dark), 0.06);
    pointer-events: none;
}

.service-detail__cta-heading {
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    margin: 0 0 24px;
    color: var(--white-color);
    position: relative;
    z-index: 1;
}

.service-detail__cta-btn {
    display: inline-block;
    padding: 12px 28px;
    background: var(--secondary-color);
    color: var(--white-color);
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    border-radius: 4px;
    text-decoration: none;
    transition: opacity 0.25s ease;
    position: relative;
    z-index: 1;
}

.service-detail__cta-btn:hover {
    opacity: 0.9;
    color: var(--white-color);
}

/* Main Content */
.service-detail__content {
    flex: 1;
    min-width: 0;
}

.service-detail__title {
    font-size: 36px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
    margin: 0 0 28px;
    line-height: 1.3;
}

@media (max-width: 992px) {
    .service-detail { padding: 70px 20px; }
    .service-detail__container { gap: 30px; }
    .service-detail__sidebar { width: 260px; }
}

@media (max-width: 768px) {
    .service-detail { padding: 50px 16px; }
    .service-detail__container { flex-direction: column; }
    /* Onder elkaar hoort de zijbalk ónder het artikel. Boven het artikel staan
       zestien navigatielinks tussen de bezoeker en de kop waar hij voor kwam. */
    .service-detail__sidebar { width: 100%; position: static; order: 2; }
    .service-detail__content { order: 1; }
    .service-detail__title { font-size: 26px; }
}

@media (max-width: 576px) {
    .service-detail__title { font-size: 22px; }
    .service-detail__cta { padding: 28px 20px; }
    .service-detail__cta-heading { font-size: 19px; }
}


/* =====================================================
   FOOTER
   ===================================================== */
.agri-footer {
    position: relative;
    background-color: var(--primary-dark);
    color: rgba(var(--on-dark), 0.75);
    padding: 70px 20px 0;
    overflow: visible;
    border-top: 3px solid var(--primary-color);
}

.agri-footer__wave {
    position: absolute;
    top: -79px;
    left: 0;
    width: 100%;
    height: 80px;
    transform: scaleY(-1);
    z-index: 4;
}

.agri-footer__container {
    max-width: 1200px;
    margin: 0 auto;
}

.agri-footer__grid {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 50px;
}

.agri-footer__brand-text {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(var(--on-dark), 0.6);
    margin-bottom: 22px;
}

.agri-footer__social {
    display: flex;
    gap: 10px;
}

.agri-footer__col-title {
    color: var(--white-color);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    margin-bottom: 24px;
    letter-spacing: 0;
}

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

.agri-footer__links li { margin-bottom: 12px; }

.agri-footer__links a {
    color: rgba(var(--on-dark), 0.6);
    font-size: 14px;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.agri-footer__links a::before {
    content: "\203A";
    font-size: 18px;
    line-height: 1;
}

.agri-footer__links a:hover { color: var(--secondary-color); }

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

.agri-footer__news-item {
    display: flex;
    gap: 14px;
    margin-bottom: 12px;
}

.agri-footer__news-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.agri-footer__news-title {
    display: block;
    font-size: 14px;
    color: rgba(var(--on-dark), 0.6);
    margin-bottom: 4px;
    line-height: 1.5;
}

.agri-footer__news-link {
    text-decoration: none;
    transition: color 0.2s;
}

.agri-footer__news-link:hover { color: rgba(var(--on-dark), 0.9); }

.agri-footer__news-title::before {
    content: "\203A";
    font-size: 18px;
    margin-right: 8px;
    line-height: 1;
}

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

.agri-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 14px;
}

.agri-footer__contact li i {
    color: var(--secondary-color);
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.agri-footer__contact li a {
    color: rgba(var(--on-dark), 0.6);
    font-size: 14px;
}

.agri-footer__contact li a:hover { color: var(--secondary-color); }
.agri-footer__contact li span { color: rgba(var(--on-dark), 0.6); }

/* Bottom Bar */
.agri-footer__bottom {
    border-top: 1px solid rgba(var(--on-dark), 0.08);
    padding: 20px 0;
}

.agri-footer__bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.agri-footer__uitgever {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Het beeldmerk staat op een lichte plaat, want het bestaat alleen in de donkere
   variant en die zou op deze achtergrond wegvallen. Rond, zodat het als merkteken
   leest en niet als een uitgesneden hoekje foto. */
.agri-footer__logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white-color);
    object-fit: contain;
    flex-shrink: 0;
}

.agri-footer__copyright {
    font-size: 13px;
    color: rgba(var(--on-dark), 0.45);
}

.agri-footer__legal {
    display: flex;
    gap: 20px;
}

.agri-footer__legal a {
    font-size: 13px;
    color: rgba(var(--on-dark), 0.45);
}

.agri-footer__legal a:hover { color: var(--secondary-color); }

@media (max-width: 992px) {
    .agri-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media (max-width: 576px) {
    .agri-footer__grid { grid-template-columns: 1fr; }

    .agri-footer__col:nth-child(2),
    .agri-footer__col:nth-child(3) {
        display: none;
    }

    .agri-footer__bottom-container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    /* Op deze breedte past het beeldmerk niet naast de regel zonder die tot drie
       regels te breken; boven de tekst houdt beide leesbaar. */
    .agri-footer__uitgever {
        flex-direction: column;
        gap: 8px;
    }
}


/* =====================================================
   UTILITIES
   ===================================================== */
.section-padding {
    padding-top: 100px;
    padding-bottom: 100px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media screen and (max-width: 992px) {
    .section-padding {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

/* =====================================================
   404
   ===================================================== */
.agri-error {
    padding: 100px 24px 120px;
    text-align: center;
}

.agri-error__container {
    max-width: 640px;
    margin: 0 auto;
}

.agri-error__code {
    display: block;
    font-size: 96px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--primary-color);
    opacity: 0.15;
}

.agri-error__heading {
    font-size: 36px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
    margin: 8px 0 16px;
}

.agri-error__text {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-medium);
    margin-bottom: 32px;
}

.agri-error__links {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.agri-error__btn {
    display: inline-block;
    padding: 13px 32px;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.5px;
    border-radius: 4px;
    transition: all 0.3s;
    text-decoration: none;
}

.agri-error__btn--primary {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.agri-error__btn--primary:hover { opacity: 0.9; }

.agri-error__btn--outline {
    background: transparent;
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
}

.agri-error__btn--outline:hover {
    background-color: var(--secondary-color);
    color: var(--white-color);
}

.agri-error__help {
    font-size: 15px;
    color: var(--text-light);
}

.agri-error__help a { color: var(--primary-color); }

@media (max-width: 576px) {
    .agri-error { padding: 60px 20px 80px; }
    .agri-error__code { font-size: 64px; }
    .agri-error__heading { font-size: 26px; }
}


/* =====================================================
   WOORDMERK (nav + voettekst)
   ===================================================== */
/* Deze site heeft nog geen beeldmerk. Tot die er is staat de naam er als tekst,
   in dezelfde maat als het logo van gildeboer.nl zodat de balk niet verspringt. */
.agri-navbar__logo--wordmark {
    font-family: var(--heading-font-family);
    font-size: 26px;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--primary-color);
    line-height: 50px;
}

.agri-navbar__logo--wordmark:hover { color: var(--secondary-color); }

.agri-footer__wordmark {
    font-family: var(--heading-font-family);
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--white-color);
    margin-bottom: 18px;
}



/* =====================================================
   ARTIKEL (kennis- en productpagina's)
   ===================================================== */
/* De romp eromheen komt van service-detail: zijbalk plus contentkolom. Wat
   hieronder staat is het lijf zelf, dat bij gildeboer niet bestond omdat die
   site geen lopende artikelen heeft. */

.artikel__kruimels {
    margin-bottom: 18px;
}

.artikel__kruimels-lijst {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-light);
}

.artikel__kruimel-link { color: var(--text-medium); }
.artikel__kruimel-link:hover { color: var(--primary-color); }
.artikel__kruimel-scheiding { color: var(--border-color); }
.artikel__kruimel-actief { color: var(--text-light); }

.artikel__meta {
    font-size: 14px;
    color: var(--text-light);
    margin: -14px 0 30px;
}

.artikel__meta-link { color: var(--text-medium); font-weight: var(--font-weight-bold); }
.artikel__meta-link:hover { color: var(--primary-color); }
.artikel__meta-sep { margin: 0 6px; }
/* De datum donkerder dan de rest van de regel: --text-light haalt 2,85:1 op wit en WCAG
   vraagt 4,5:1 voor gewone tekst. Juist bij de datum telt dat, want het schemablok
   herhaalt hem — een datum die de bezoeker niet kan lezen, kan hij ook niet narekenen. */
.artikel__meta time { color: var(--text-medium); }

/* De weg naar de verkooppagina, boven een stuk over een product. Een regel en geen
   knop: wie hier is klikte op het onderwerp en niet op de prijs, dus het aanbod
   hoort zichtbaar te zijn zonder de tekst te overstemmen. */
.artikel__verkoop {
    margin: -16px 0 30px;
    padding-left: 14px;
    border-left: 3px solid var(--secondary-color);
}

.artikel__verkoop-link {
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
}

.artikel__verkoop-link:hover { color: var(--secondary-color); }

/* Het lijf is HTML uit de generator, dus de opmaak hangt aan de elementen zelf
   en niet aan klassen: die kan de tekstschrijver niet meegeven. */
.artikel__lijf {
    font-size: 17px;
    line-height: 1.75;
    color: var(--text-medium);
}

.artikel__lijf p { margin: 0 0 20px; }

.artikel__lijf h2 {
    font-size: 27px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
    line-height: 1.3;
    margin: 44px 0 16px;
}

.artikel__lijf h3 {
    font-size: 21px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
    margin: 32px 0 12px;
}

.artikel__lijf ul,
.artikel__lijf ol { margin: 0 0 20px; padding-left: 22px; }
.artikel__lijf li { margin-bottom: 8px; }

.artikel__lijf a { color: var(--primary-color); text-decoration: underline; }
.artikel__lijf a:hover { color: var(--secondary-color); }

.artikel__lijf strong { color: var(--text-dark); font-weight: var(--font-weight-bold); }

/* Tabellen komen veel voor in deze teksten (kosten, soorten, regels). Op een
   telefoon passen ze niet, dus ze schuiven horizontaal binnen hun eigen kader
   in plaats van de hele pagina mee te trekken. */
.artikel__lijf table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
    font-size: 15px;
}

.artikel__lijf th,
.artikel__lijf td {
    border: 1px solid var(--border-color);
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
}

.artikel__lijf th {
    background-color: var(--background-color);
    color: var(--text-dark);
    font-weight: var(--font-weight-bold);
}

.artikel__lijf--intro {
    font-size: 19px;
    color: var(--text-dark);
}

.artikel__inhoud {
    background-color: var(--background-color);
    border-left: 3px solid var(--primary-color);
    border-radius: 0 8px 8px 0;
    padding: 22px 26px;
    margin: 0 0 34px;
}

.artikel__inhoud-kop {
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.artikel__inhoud-lijst {
    margin: 0;
    padding-left: 20px;
    font-size: 16px;
}

.artikel__inhoud-lijst li { margin-bottom: 7px; }
.artikel__inhoud-link { color: var(--text-medium); }
.artikel__inhoud-link:hover { color: var(--primary-color); }

.artikel__auteur {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background-color: var(--background-color);
    border-radius: 12px;
    padding: 26px;
    margin: 48px 0 0;
}

.artikel__auteur-foto {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.artikel__auteur-naam {
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
}

.artikel__auteur-rol {
    font-size: 14px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.artikel__auteur-bio {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-medium);
}

.artikel__verwant { margin-top: 40px; }

.artikel__verwant-kop {
    font-size: 21px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
    margin-bottom: 14px;
}

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

.artikel__verwant-lijst li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.artikel__verwant-link { color: var(--text-medium); font-size: 16px; }
.artikel__verwant-link:hover { color: var(--primary-color); }

.artikel__aanbeveling {
    background-color: var(--primary-color);
    border-radius: 12px;
    padding: 30px;
    margin-top: 40px;
    text-align: center;
}

.artikel__aanbeveling-tekst {
    color: rgba(var(--on-dark), 0.85);
    font-size: 16px;
    margin-bottom: 16px;
}

.artikel__aanbeveling-knop {
    background-color: var(--secondary-color);
    color: var(--text-dark);
    padding: 14px 30px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
}

.artikel__aanbeveling-knop:hover {
    background-color: var(--white-color);
    color: var(--primary-color);
}

@media (max-width: 992px) {
    .artikel__auteur { flex-direction: column; }
}

@media (max-width: 576px) {
    .artikel__lijf { font-size: 16px; }
    .artikel__lijf--intro { font-size: 17px; }
    .artikel__lijf h2 { font-size: 23px; }
    .artikel__lijf h3 { font-size: 19px; }
    .artikel__inhoud { padding: 18px 20px; }
    .artikel__aanbeveling { padding: 24px 18px; }
    .artikel__aanbeveling-knop { padding: 13px 22px; font-size: 15px; }
}


/* =====================================================
   KENNISBANK (overzichtspagina)
   ===================================================== */
.kennisbank {
    padding: 80px 20px;
    background-color: var(--white-color);
}

.kennisbank__container {
    max-width: 1000px;
    margin: 0 auto;
}

.kennisbank__header {
    text-align: center;
    margin-bottom: 56px;
}

.kennisbank__label {
    display: block;
    color: var(--primary-color);
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.kennisbank__heading {
    font-size: 40px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
    line-height: 1.2;
}

.kennisbank__lead {
    max-width: 640px;
    margin: 16px auto 0;
    font-size: 17px;
}

.kennisbank__sectie-kop {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
    margin-bottom: 22px;
}

/* Wie het schrijft, met een greep uit de onderwerpen eronder. Eén omkaderd blok:
   het antwoord op "wie zegt dit" en waar dat antwoord over gaat, horen bij elkaar. */
.kennisbank__schrijvers {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 34px 32px;
    margin-bottom: 64px;
}

.kennisbank__schrijvers-lead {
    max-width: 720px;
    font-size: 16px;
    margin-bottom: 26px;
}

.kennisbank__schrijvers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.kennisbank__schrijver {
    display: flex;
    gap: 22px;
    align-items: flex-start;
}

/* Dezelfde portretten als op de homepage, alleen kleiner: hier staan ze in een
   omkaderd blok boven het register van alle titels, en mogen ze die lijst niet
   overschreeuwen. */
.kennisbank__schrijver-foto {
    width: 140px;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
    border-radius: 6px;
    flex-shrink: 0;
}

.kennisbank__schrijver-naam {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
    margin-bottom: 2px;
}

.kennisbank__schrijver-rol {
    font-size: 13px;
    color: var(--secondary-color);
    font-weight: var(--font-weight-medium);
    margin-bottom: 10px;
}

.kennisbank__schrijver-bio {
    font-size: 14px;
    line-height: 1.65;
}

/* Kleiner dan de schrijvers erboven: dit is een greep, niet het register. Dat
   staat er hieronder compleet en op alfabet. */
.kennisbank__subkop {
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 30px 0 14px;
    padding-top: 26px;
    border-top: 1px solid var(--border-color);
}

.kennisbank__uitgelicht-lijst {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    list-style: none;
    padding: 0;
}

.kennisbank__uitgelicht-link {
    display: inline-block;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-dark);
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 7px 15px;
    transition: all 0.2s;
}

.kennisbank__uitgelicht-link:hover {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* De letterbalk plakt onder de navigatiebalk mee, zodat je in een lijst die niet op
   één scherm past niet telkens terug hoeft om naar een andere letter te springen. */
.kennisbank__letterbalk {
    position: sticky;
    top: var(--navbar-height);
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background-color: var(--white-color);
    padding: 12px 0 14px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.kennisbank__letterknop {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--background-color);
    color: var(--text-dark);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
}

.kennisbank__letterknop:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}

/* Hier plakt niet alleen de navigatiebalk maar ook de letterbalk eronder, dus een
   sprong naar een letter moet onder die twee samen landen. */
.kennisbank__groep {
    padding-top: 30px;
    scroll-margin-top: calc(var(--scroll-offset) + 40px);
}

.kennisbank__letter {
    font-size: 26px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    margin-bottom: 10px;
}

.kennisbank__lijst {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 36px;
}

.kennisbank__item {
    break-inside: avoid;
    padding: 7px 0;
}

.kennisbank__item-link {
    color: var(--text-medium);
    font-size: 16px;
    line-height: 1.5;
}

.kennisbank__item-link:hover { color: var(--primary-color); }

@media (max-width: 992px) {
    .kennisbank__heading { font-size: 32px; }
    .kennisbank__schrijvers-grid { grid-template-columns: 1fr; }
}

@media (max-width: 576px) {
    .kennisbank { padding: 60px 16px; }
    .kennisbank__heading { font-size: 26px; }
    .kennisbank__schrijvers { padding: 26px 20px; }
    .kennisbank__schrijver {
        flex-direction: column;
        gap: 14px;
    }

    .kennisbank__schrijver-foto { width: 130px; }
    .kennisbank__lijst { columns: 1; }
}


/* =====================================================
   PRODUCT (verkooppagina onder /aanbod/)
   ===================================================== */
/* Geen zijbalk zoals bij een artikel: die is er om binnen de kennisbank de weg te
   vinden, en dat is hier niet de vraag. Eén kolom, van de pitch naar de prijs naar
   de eerste stap. */
.product {
    padding: 60px 20px 90px;
    background-color: var(--white-color);
}

.product__container {
    max-width: 940px;
    margin: 0 auto;
}

/* Ruimer dan bij een artikel: daar zit de kop er meteen onder, hier komt eerst de
   bovenregel "wat wij maken" en die plakte tegen het kruimelpad aan. */
.product .artikel__kruimels { margin-bottom: 34px; }

.product__hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 46px;
    align-items: center;
    margin-bottom: 56px;
}

.product__label {
    display: block;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.product__titel {
    font-size: 42px;
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
    color: var(--text-dark);
    margin-bottom: 18px;
}

.product__pitch {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-medium);
    margin-bottom: 28px;
}

.product__acties {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.product__knop {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    padding: 14px 28px;
    border-radius: 30px;
    transition: all 0.2s;
}

.product__knop:hover {
    background-color: var(--secondary-color);
    color: var(--text-dark);
}

.product__knop--rand {
    background-color: transparent;
    color: var(--primary-color);
    box-shadow: inset 0 0 0 2px var(--primary-color);
}

.product__hero-beeld img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 12px;
}

/* Het bedrag in dezelfde vorm als op de homepage: wie daar de prijs zag, moet hier
   hetzelfde getal op dezelfde manier terugvinden. */
.product__prijs {
    background-color: var(--background-medium);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    margin-bottom: 56px;
}

.product__prijs-label {
    color: var(--primary-color);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.product__prijs-bedrag {
    font-size: 46px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
    line-height: 1.1;
}

.product__prijs-periode {
    font-size: 17px;
    font-weight: var(--font-weight-normal);
    color: var(--text-medium);
    margin-left: 8px;
}

.product__prijs-note {
    max-width: 620px;
    margin: 12px auto 0;
    font-size: 16px;
    color: var(--text-medium);
}

.product__blok { margin-bottom: 56px; }

.product__kop {
    font-size: 27px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
    margin-bottom: 16px;
}

.product__lead {
    font-size: 16px;
    color: var(--text-medium);
    margin-bottom: 20px;
}

.product__stappen {
    counter-reset: stap;
    list-style: none;
    padding: 0;
}

.product__stappen li {
    counter-increment: stap;
    position: relative;
    padding: 0 0 18px 46px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-medium);
}

.product__stappen li::before {
    content: counter(stap);
    position: absolute;
    left: 0;
    top: 2px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 15px;
    font-weight: var(--font-weight-bold);
}

/* De streep erboven scheidt hem van de stappen: zonder die scheiding leest de
   vervolgstap als een vijfde stap, terwijl hij juist de stap ervóór is. */
.product__vervolg {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-dark);
    font-weight: var(--font-weight-medium);
    margin-left: 46px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
}

/* auto-fit en geen vaste twee kolommen: een product met alleen een referentie of
   alleen een grens hield anders een half leeg raster over. */
.product__paar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 56px;
}

.product__kader {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 28px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-medium);
}

/* De grens krijgt de accentkleur en niet een waarschuwingskleur: het is geen
   voorbehoud maar een keuze, en die mag er even stellig staan als het bewijs. */
.product__kader--grens { border-left: 4px solid var(--secondary-color); }

.product__kader-kop {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
    margin-bottom: 10px;
}

.product__vragen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    list-style: none;
    padding: 0;
}

.product__vraag-link {
    display: inline-block;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-dark);
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 7px 15px;
    transition: all 0.2s;
}

.product__vraag-link:hover {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.product__meer {
    margin-top: 16px;
    font-size: 15px;
}

.product__meer a { color: var(--primary-color); font-weight: var(--font-weight-bold); }
.product__meer a:hover { color: var(--secondary-color); }

.product__artikel {
    background-color: var(--primary-color);
    border-radius: 12px;
    padding: 34px;
    margin-bottom: 56px;
    color: rgba(var(--on-dark), 0.85);
}

.product__artikel-label {
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.product__artikel-titel {
    font-size: 25px;
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    margin-bottom: 12px;
}

.product__artikel-titel a { color: var(--white-color); }
.product__artikel-titel a:hover { color: var(--secondary-color); }

.product__artikel-tekst {
    font-size: 16px;
    line-height: 1.7;
    /* Expliciet en niet geërfd van het blok hierboven: `p { color: … }` staat hoger in
       dit bestand en wint van overerving, ongeacht specificiteit. Zonder deze regel
       kreeg deze alinea de grijze bodytekstkleur op donkergroen — 1,9:1. */
    color: rgba(var(--on-dark), 0.85);
    margin-bottom: 18px;
}

.product__artikel-link {
    display: inline-block;
    background-color: var(--secondary-color);
    color: var(--text-dark);
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    padding: 12px 26px;
    border-radius: 30px;
}

.product__artikel-link:hover {
    background-color: var(--white-color);
    color: var(--primary-color);
}

.product__andere {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 30px;
}

.product__ander {
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.product__ander-naam {
    display: block;
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    color: var(--text-dark);
    margin-bottom: 4px;
}

.product__ander-naam:hover { color: var(--primary-color); }

.product__ander-tekst {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-medium);
}

@media (max-width: 992px) {
    .product__hero {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .product__titel { font-size: 34px; }
    .product__paar { grid-template-columns: 1fr; }
    .product__andere { grid-template-columns: 1fr; }
}

@media (max-width: 576px) {
    .product { padding: 40px 16px 70px; }
    .product__titel { font-size: 26px; }
    .product__pitch { font-size: 16px; }
    .product__kop { font-size: 22px; }
    .product__prijs { padding: 26px 20px; }
    .product__prijs-bedrag { font-size: 38px; }
    .product__artikel { padding: 26px 20px; }
    .product__artikel-titel { font-size: 21px; }
    .product__knop { padding: 13px 22px; font-size: 15px; }
}