/* =============================================
   VAN ZIJL — MAIN CSS v2.0
   Typografie (design-lettertypes, lokaal gehost):
   - Work Sans 300: subtitels/labels, 12px, letter-spacing 0.3em, ALL CAPS
   - Work Sans 400: lopende tekst, 12px, letter-spacing 0.05em
   - EB Garamond 400 (+ italic): titels, nadruk in titels
   - IBM Plex Mono: kleine technische labels/meta
   ============================================= */

/* --- Fonts: design-lettertypes, lokaal gehost (SIL OFL 1.1) ---
   Work Sans (sans), EB Garamond (serif), IBM Plex Mono (mono).
   Alleen de latin-subset (woff2) — dekt het Nederlands. */

/* Work Sans — sans */
@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/work-sans/WorkSans-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/work-sans/WorkSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/work-sans/WorkSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/work-sans/WorkSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/work-sans/WorkSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* EB Garamond — serif */
@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/eb-garamond/EBGaramond-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/eb-garamond/EBGaramond-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/eb-garamond/EBGaramond-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/eb-garamond/EBGaramond-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* IBM Plex Mono — mono */
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/ibm-plex-mono/IBMPlexMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* --- Design tokens --- */
:root {
    --rood:          #C0392B;
    --rood-donker:   #922B21;
    --zwart:         #1C1C1C;
    --donker:        #111111;
    --wit:           #F5F0E8;
    --crème:         #EDE8DC;
    --grijs:         #888;
    --header-h:      72px;
    --topbar-h:      32px;

    /* Typografie — design-lettertypes */
    --font-serif:    'EB Garamond', Georgia, 'Times New Roman', serif;
    --font-sans:     'Work Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-mono:     'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
    /* Aliassen voor bestaande code */
    --font-cat:      var(--font-sans);
    --font-jun:      var(--font-serif);

    --fs-label:      12px;
    --ls-label:      0.30em;   /* 300 tussenspace = 0.3em */
    --fs-body:       12px;
    --ls-body:       0.05em;   /* 50 tussenspace = 0.05em */
    --fs-titel:      42px;
    --ls-titel:      0em;      /* 0 tussenspace */
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
    background: var(--wit);
    color: var(--zwart);
    font-family: var(--font-cat);
    font-weight: 400;
    font-size: var(--fs-body);
    letter-spacing: var(--ls-body);
    line-height: 1.7;
    padding-top: var(--header-h);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* =============================================
   TOPBAR
   ============================================= */
.topbar { display: none; }

/* =============================================
   HEADER — horizontaal bovenin
   ============================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0; right: 0;
    height: var(--header-h);
    background: var(--wit);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem;
    z-index: 199;
    transition: box-shadow 0.3s;
    overflow: visible; /* nodig voor dropdowns */
}

.site-header.scrolled {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* Homepage: header loopt naadloos over in de banner — geen randlijn.
   Bij het scrollen geeft de box-shadow van .scrolled nog scheiding. */
.home .site-header:not(.scrolled) {
    border-bottom-color: transparent;
}

/* WordPress-adminbalk: zet de vaste header eronder i.p.v. erachter.
   Alleen zichtbaar voor ingelogde beheerders — bezoekers hebben geen
   adminbalk, dus live verandert er niets. */
.admin-bar .site-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

.header-logo {
    display: flex;
    align-items: center;
    height: 100%;
}
.header-logo img,
/* Inline SVG logo */
.header-logo svg {
    height: 100%;
    width: auto;
    display: block;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 100%;
    overflow: visible;
}

/* =============================================
   DROPDOWN NAVIGATIE
   ============================================= */
.nav-item-wrap {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

/* Pijltje */
.nav-item-wrap > .nav-item::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    margin-left: 5px;
    opacity: 0.5;
    transition: transform 0.2s;
    vertical-align: middle;
}
.nav-item-wrap:hover > .nav-item::after {
    transform: rotate(-135deg) translateY(2px);
    opacity: 1;
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--wit);
    border: 0.5px solid rgba(0,0,0,0.12);
    min-width: 210px;
    padding: 0.5rem 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    /* Onzichtbare brug zodat hover niet wegvalt bij gap */
    margin-top: 0;
}

/* Brug tussen header en dropdown */
.nav-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background: transparent;
}

.nav-item-wrap:hover .nav-dropdown {
    opacity: 1;
    pointer-events: auto;
}

.nav-dropdown a {
    display: block;
    font-family: var(--font-cat);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--zwart);
    padding: 0.55rem 1.2rem;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}
.nav-dropdown a:hover {
    color: var(--rood);
    background: var(--crème);
}

.nav-item {
    font-family: var(--font-cat);
    font-weight: 300;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--zwart);
    transition: color 0.2s;
    white-space: nowrap;
}

.nav-item:hover { color: var(--rood); }

.nav-item--underline {
    /* rode onderstreping verwijderd */
}

.nav-item--rood {
    background: var(--rood);
    color: #fff;
    padding: 0.45rem 1.1rem;
    font-weight: 700;
}
.nav-item--rood:hover { background: var(--rood-donker); color: #fff; }

.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.nav-hamburger span {
    display: block; width: 24px; height: 2px;
    background: var(--zwart);
}

/* =============================================
   GEDEELDE STIJLEN
   ============================================= */

/* Labels (Catamaran 300, 12px, 0.3em spacing, caps) */
.label {
    font-family: var(--font-cat);
    font-weight: 300;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--zwart);
    display: block;
    margin-bottom: 0.8rem;
}
.label--licht { color: rgba(255,255,255,0.7); }
.label--underline { /* rode onderstreping verwijderd */ }

/* Titels (Junicode / IM Fell English, 42px, 0 spacing) */
.sectie-titel,
h1.hero-titel,
.hero-text-b .hero-titel {
    font-family: var(--font-jun);
    font-weight: 400;
    font-size: var(--fs-titel);
    letter-spacing: var(--ls-titel);
    line-height: 1.15;
    color: var(--zwart);
    margin-bottom: 1.5rem;
}

/* Woorden in titels die bold zijn (Junicode Bold) */
.sectie-titel em,
.sectie-titel strong,
h1.hero-titel em,
h1.hero-titel strong,
.hero-text-b .hero-titel em,
.hero-text-b .hero-titel strong {
    font-family: var(--font-jun);
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
}

/* Rode onderstreping verwijderd */

.sectie-titel--licht { color: #fff; }
.sectie-titel--groot { font-size: 52px; white-space: nowrap; }
@media (max-width: 900px) { .sectie-titel--groot { font-size: 32px; white-space: normal; } }

/* Bodytekst (Catamaran 400, 12px, 0.05em) */
.body-tekst {
    font-family: var(--font-cat);
    font-weight: 400;
    font-size: var(--fs-body);
    letter-spacing: var(--ls-body);
    line-height: 1.8;
    color: #444;
    margin-bottom: 1.2rem;
    max-width: 480px;
}
.body-tekst--licht { color: rgba(255,255,255,0.82); }

/* handgeschreven stijl verwijderd */

/* Knoppen */
.btn-rood {
    display: inline-block;
    background: var(--rood);
    color: #fff;
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    padding: 0.55rem 1.4rem;
    transition: background 0.2s;
    border: none;
    cursor: pointer;
}
.btn-rood:hover { background: var(--rood-donker); }
.btn-rood--groot { padding: 0.75rem 2rem; font-size: 0.75rem; }

.btn-zwart {
    display: inline-block;
    background: var(--zwart);
    color: #fff;
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    padding: 0.55rem 1.4rem;
    transition: background 0.2s;
    cursor: pointer;
}
.btn-zwart:hover { background: #333; }
.btn-zwart--klein { padding: 0.4rem 1rem; font-size: 0.6rem; }

/* Blok basisstijl */
.blok {
    position: relative;
    padding: 5rem 5vw;
}

/* Scroll fade-in */
.fade-in {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Homepage-hero — zachte entree bij het laden, zodat de pagina
   niet abrupt/"raar" inpopt maar rustig in beeld komt. */
@keyframes vzHeroIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.blok-hero .hero-content {
    animation: vzHeroIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.blok-hero .scroll-pijl {
    animation: vzHeroIn 0.8s ease 0.5s both;
}

.fade-in.zichtbaar {
    opacity: 1;
    transform: translateY(0);
}

/* Lichte cascade binnen een grid-rij: kaarten in dezelfde rij komen
   per kolom net na elkaar in, zodat ze niet allemaal tegelijk
   "ploppen". Elke kaart start pas als hij zelf in beeld is (JS), dus
   dit werkt ook voor grids die meerdere rijen hoog zijn. */
.shop-grid .fade-in:nth-child(4n+2),
.aanbiedingen-grid .fade-in:nth-child(3n+2) { transition-delay: 80ms; }
.shop-grid .fade-in:nth-child(4n+3),
.aanbiedingen-grid .fade-in:nth-child(3n+3) { transition-delay: 160ms; }
.shop-grid .fade-in:nth-child(4n+4) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
    .blok-hero .hero-content,
    .blok-hero .scroll-pijl { animation: none; }
    /* Geen bewegings-/verschijn-effecten: content direct zichtbaar. */
    .fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .shop-grid .fade-in,
    .aanbiedingen-grid .fade-in { transition-delay: 0ms; }
}

/* =============================================
   BLOK 1 — HERO
   ============================================= */

/* Spacer geeft extra scrollhoogte; hero blijft sticky
   terwijl de tekst swapt (zie main.js).
   dvh met vh-fallback: mobiele adresbalk verandert de
   werkelijke viewporthoogte. */
.hero-spacer {
    position: relative;
    height: 150vh;
    height: 150svh;   /* svh = stabiel; verandert niet met de mobiele adresbalk */
}
.hero-spacer .blok-hero {
    position: sticky;
    /* Pin net onder de vaste header, en vul precies de rest van
       het scherm — zo valt niets onder de fold en hoef je niet
       een stukje te scrollen voordat blok 1 vastklikt.
       svh i.p.v. dvh: hoogte blijft gelijk tijdens scrollen. */
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    height: calc(100svh - var(--header-h));
    min-height: 0;
}

.blok-hero {
    position: relative;
    min-height: 100vh;
    padding: 0;
    overflow: hidden;
    background: var(--wit);
    display: flex;
    align-items: center;   /* tekst gecentreerd in de hero */
    justify-content: center;
}

/* Achtergrond: volledige banner-illustratie (station, watertoren, koe),
   strak bijgesneden zodat de inhoud de volle breedte vult.
   'center bottom' schuift het beeld omhoog: station, koe en voorgrond
   volledig in beeld; de bovenkant (toren-top/lucht) mag wegvallen. */
.hero-media {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    --banner-positie: center 82%;  /* verticale uitsnede (0%=boven, 100%=onder) */
    --banner-zoom: 1.1;            /* inzoomen: >1 = breder, zijkanten croppen */
}
.hero-banner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--banner-positie);
    transform: scale(var(--banner-zoom, 1));
    transform-origin: center center;
}

/* Gecentreerde content in het midden van de illustratie */
.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 3rem;
    max-width: 620px;
}
/* Crème-ovaal achter de tekst: de banner vervaagt hierachter naar de crème
   papierkleur (zelfde als de illustratie-achtergrond), voor leesbaarheid. */
.hero-content::before {
    content: "";
    position: absolute;
    inset: -1rem -6rem;   /* breed ovaal */
    z-index: -1;
    background: radial-gradient(ellipse 50% 50% at center,
        rgba(237, 232, 220, 0.97) 0%,
        rgba(237, 232, 220, 0.92) 50%,
        rgba(237, 232, 220, 0.45) 72%,
        rgba(237, 232, 220, 0) 90%);
    pointer-events: none;
}

.hero-label {
    margin-bottom: 1rem;
}

.hero-titel {
    font-family: var(--font-jun);
    font-weight: 400;
    font-size: 52px;
    letter-spacing: 0;
    line-height: 1.1;
    color: var(--zwart);
    margin-bottom: 1.2rem;
    white-space: nowrap;
}
.hero-titel strong {
    font-weight: 700;
    font-family: var(--font-jun);
}
@media (max-width: 700px) {
    .hero-titel { font-size: 32px; white-space: normal; }
}

.hero-tekst {
    font-family: var(--font-cat);
    font-weight: 400;
    font-size: var(--fs-body);
    letter-spacing: var(--ls-body);
    line-height: 1.8;
    color: #444;
    margin-bottom: 2rem;
    max-width: 420px;
}

/* Twee tekstlagen gestapeld in dezelfde grid-cel; de container
   groeit mee met de langste laag zodat de knoppen niet springen
   en tekst op kleine schermen niet wordt afgekapt. */
.hero-text-swap {
    display: grid;
    width: 100%;
    margin-bottom: 2rem;   /* ruimte tussen (langere) tekst B en de knoppen */
}
.hero-text-layer {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* beide lagen op dezelfde verticale as centreren */
    transition: opacity 0.35s ease, transform 0.35s ease;
    will-change: opacity, transform;
}
.hero-text-layer .hero-tekst {
    margin-bottom: 0;
}

/* Uitgangssituatie: laag A zichtbaar, laag B wacht onder beeld */
.hero-text-a {
    opacity: 1;
    transform: translateY(0);
}
.hero-text-b {
    opacity: 0;
    transform: translateY(30px);
    pointer-events: none;
}

/* Na de drempel (class-toggle in main.js): A schuift omhoog
   weg, B laadt smooth van onder in */
.hero-text-swap.is-geswapt .hero-text-a {
    opacity: 0;
    transform: translateY(-24px);
    pointer-events: none;
}
.hero-text-swap.is-geswapt .hero-text-b {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .hero-text-layer {
        transition: opacity 0.35s ease;
        transform: none !important;
    }
}

.hero-knoppen {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

/* Scroll pijl onderaan gecentreerd */
.scroll-pijl {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    background: var(--zwart);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
    z-index: 3;
}
.scroll-pijl:hover { background: var(--rood); }

/* =============================================
   BLOK 2 — RONDNEUZEN
   ============================================= */
.blok-rondneuzen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    background: var(--wit);
    padding: 6rem 5vw;
}

.rondneuzen-illustratie {
    position: relative;
}

.koe-img {
    width: 100%;
    max-width: 500px;
    filter: grayscale(20%) contrast(1.05);
}

.rondneuzen-content .btn-rood {
    margin-top: 1.5rem;
}

/* =============================================
   BLOK 3 — NIEUWS & AANBIEDINGEN
   ============================================= */
.blok-aanbiedingen {
    position: relative;
    background-color: var(--donker);
    padding: 6rem 5vw;
    text-align: center;
    overflow: hidden;
}

/* Krijtbord achtergrond op lage opacity */
.blok-aanbiedingen::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/krijtbord.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

.blok-aanbiedingen > * {
    position: relative;
    z-index: 1;
}

.blok-aanbiedingen .label {
    text-align: center;
    margin-bottom: 0.5rem;
}

.blok-aanbiedingen .sectie-titel {
    text-align: center;
    margin-bottom: 3.5rem;
}

.aanbiedingen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.aanbieding-kaart {
    position: relative;
    text-align: left;
}

.aanbieding-kaart img,
.kaart-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.15);
    margin-bottom: 1.2rem;
}
.kaart-placeholder {
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.kaart-placeholder-tekst {
    font-family: var(--font-cat);
    font-size: 0.65rem;
    letter-spacing: var(--ls-body);
    color: rgba(255,255,255,0.3);
    text-align: center;
    line-height: 1.6;
    padding: 1rem;
}

.aanbieding-prijs {
    position: absolute;
    top: auto;
    bottom: calc(1.2rem + (100% * 0.75) - 2.5rem);
    right: 1rem;
    font-size: 1.1rem;
    color: #fff;
    font-family: var(--font-jun);
    font-weight: 700;
}

.badge-nieuw {
    position: absolute;
    top: -1.5rem;
    right: 0;
    font-size: 0.7rem;
    font-family: var(--font-cat);
    font-weight: 700;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: #fff;
    background: var(--rood);
    padding: 0.2rem 0.5rem;
}

.aanbieding-titel {
    font-family: var(--font-jun);
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0;
    color: #fff;
    margin-bottom: 0.4rem;
}

.aanbieding-detail {
    font-size: 0.75rem;
    font-family: var(--font-cat);
    font-weight: 300;
    text-decoration: none;
    letter-spacing: 0.05em;
}

.aanbieding-sub {
    font-family: var(--font-cat);
    font-weight: 300;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

/* =============================================
   BLOK 4 — SHOP GRID
   ============================================= */
.blok-shop {
    background: var(--crème);
    padding: 8rem 5vw;
    text-align: center;
}

.blok-shop .label,
.blok-shop .sectie-titel {
    text-align: center;
}

.blok-shop .sectie-titel {
    margin-bottom: 3.5rem;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 3rem;
    max-width: 1100px;
    margin: 0 auto;
}

.shop-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    /* Zelfde crème als de sectie-achtergrond. Nodig omdat de illustraties
       mix-blend-mode: multiply gebruiken: tijdens de opacity-fade wordt de
       kaart een isolatie-group; zonder eigen crème-achtergrond zou de blend
       dan tegen transparant renderen en op het eind "poppen". */
    background: var(--crème);
}

.shop-item-img {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-item-img img {
    max-height: 160px;
    width: auto;
    /* mix-blend-mode: multiply zorgt dat de crème achtergrond van de illustraties
       naadloos opgaat in de crème blokachtergrond — geen witte vlakken zichtbaar */
    mix-blend-mode: multiply;
    object-fit: contain;
}

.shop-item-naam {
    font-family: var(--font-jun);
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0;
}
.shop-item-naam--rood {
    /* rode onderstreping verwijderd */
}

/* =============================================
   BLOK 5 — OVER ONS
   ============================================= */
.blok-overons {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 5vw;
}

.overons-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
}

.overons-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.60);
}

.overons-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.overons-content .body-tekst {
    text-align: center;
    max-width: 520px;
}

.overons-content .btn-rood {
    margin-top: 1.5rem;
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
    background: var(--zwart);
    color: rgba(255,255,255,0.6);
}

.footer-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 3rem;
    padding: 4rem 5vw;
    max-width: 1200px;
    margin: 0 auto;
}

/* Kolom basis */
.footer-kolom {}

.footer-naam {
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0.8rem;
}

.footer-adres,
.footer-contact {
    font-family: var(--font-cat);
    font-weight: 300;
    font-size: var(--fs-label);
    letter-spacing: 0.04em;
    line-height: 1.8;
    color: rgba(255,255,255,0.65);
    margin-bottom: 0.6rem;
}

.footer-contact a,
.footer-adres a {
    color: rgba(255,255,255,0.65);
    transition: color 0.2s;
}
.footer-contact a:hover,
.footer-adres a:hover { color: #fff; }

/* Social iconen */
.footer-social {
    display: flex;
    gap: 0.8rem;
    margin-top: 1.2rem;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.65);
    transition: border-color 0.2s, color 0.2s;
}
.social-icon:hover {
    border-color: #fff;
    color: #fff;
}

/* Openingstijden */
.footer-heading {
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1rem;
}

.footer-tijden {
    border-collapse: collapse;
    width: 100%;
}

.footer-tijden td {
    font-family: var(--font-cat);
    font-weight: 300;
    font-size: var(--fs-label);
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.65);
    padding: 0.25rem 0;
}

.footer-tijden td:last-child {
    padding-left: 1.5rem;
}

/* Quicklinks */
.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links li a {
    font-family: var(--font-cat);
    font-weight: 300;
    font-size: var(--fs-label);
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.65);
    transition: color 0.2s;
}
.footer-links li a:hover { color: #fff; }

/* Onderste balk */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 1.2rem 5vw;
    text-align: center;
}

.footer-copy {
    font-family: var(--font-cat);
    font-weight: 300;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
}

@media (max-width: 900px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 600px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 3rem 6vw;
    }
}

/* =============================================
   STANDAARD PAGINA'S
   ============================================= */
.main-content {
    padding: 5rem 5vw;
    max-width: 860px;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1100px) {
    .shop-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    :root { --fs-titel: 32px; }

    .hero-content { padding: 3rem 2rem; }
    .hero-knoppen { flex-direction: column; align-items: center; }

    .blok-rondneuzen { grid-template-columns: 1fr; }

    .aanbiedingen-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }

    .header-nav { display: none; }
    .header-nav.open { display: flex; flex-direction: column; position: fixed; top: calc(var(--topbar-h) + var(--header-h)); left: 0; right: 0; background: var(--wit); padding: 1.5rem 2rem; gap: 1.2rem; border-bottom: 1px solid rgba(0,0,0,0.1); z-index: 198; }
    .nav-hamburger { display: flex; }
}

@media (max-width: 600px) {
    :root { --fs-titel: 26px; }
    .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .blok { padding: 4rem 6vw; }
}

/* =============================================
   PAGINA TEMPLATES — GEDEELDE STIJLEN
   ============================================= */

/* Pagina hero (kleiner dan homepage hero) */
/* =============================================
   UNIFORME PAGINA-HERO
   Zelfde look & feel op alle content-pagina's.
   Eigen ontwerp (uitzonderingen): voorpagina,
   gasflessen en autowascentrum.
   ============================================= */
.pagina-hero,
.shop-hero,
.aanhang-hero {
    position: relative;
    display: block;
    padding: 4rem 5vw 2.5rem;
}
.pagina-hero .body-tekst,
.shop-hero .body-tekst,
.aanhang-hero .body-tekst {
    max-width: 640px;
}
.pagina-hero .body-tekst + .body-tekst,
.shop-hero .body-tekst + .body-tekst,
.aanhang-hero .body-tekst + .body-tekst {
    margin-top: 1rem;
}
/* Pagina's die zelf al 5vw zij-padding op de <main> hebben:
   hero niet dubbel insetten. */
.pagina-shop .shop-hero,
.pagina-aanhang .aanhang-hero,
.pagina-brandstoffen .pagina-hero {
    padding-left: 0;
    padding-right: 0;
}

/* =============================================
   UNIFORME DIENST-HERO (design handoff)
   Tekst links, illustratie rechts, crème vlak,
   titel-nadruk in rood cursief. Gebruikt op
   brandstoffen, hobbywash, autowascentrum,
   aanhangwagens en gasflessen.
   ============================================= */
.vz-hero {
    background: var(--crème);
    border-bottom: 1px solid rgba(28, 28, 28, 0.08);
    overflow: hidden;
}
.vz-hero-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 3.5rem 5vw;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3rem;
    align-items: center;
}
.vz-hero-text { min-width: 0; }
.vz-hero-eyebrow {
    font-family: var(--font-cat);
    font-weight: 300;
    font-size: var(--fs-label);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--grijs);
    margin-bottom: 1.1rem;
}
.vz-hero-title {
    font-family: var(--font-jun);
    font-weight: 400;
    font-size: clamp(2.2rem, 4.4vw, 3.4rem);
    line-height: 1.06;
    letter-spacing: 0;
    color: var(--zwart);
    margin: 0;
}
.vz-hero-title em,
.vz-hero-title strong {
    font-style: italic;
    font-weight: 400;
    color: var(--rood);
}
.vz-hero-ctas {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 1.9rem;
}
.vz-hero-ghost {
    display: inline-block;
    border: 1.5px solid rgba(28, 28, 28, 0.28);
    color: var(--zwart);
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    padding: 0.62rem 1.8rem;
    transition: border-color 0.2s, background 0.2s;
}
.vz-hero-ghost:hover {
    border-color: var(--zwart);
    background: rgba(28, 28, 28, 0.04);
}
.vz-hero-art {
    justify-self: center;
    text-align: center;
}
.vz-hero-art img {
    display: inline-block;
    max-width: 440px;
    max-height: 420px;
    width: auto;
    height: auto;
    mix-blend-mode: multiply;
}
/* Aanhangwagens heeft een smalle (1200px) main — hero over de volle
   containerbreedte trekken door de zijpadding te compenseren. */
.pagina-aanhang .vz-hero {
    margin-left: -5vw;
    margin-right: -5vw;
}
@media (max-width: 860px) {
    .vz-hero-inner {
        grid-template-columns: 1fr;
        gap: 1.6rem;
        padding: 2.8rem 5vw;
    }
    .vz-hero-art {
        order: -1;
    }
    .vz-hero-art img {
        max-width: 260px;
        max-height: 240px;
    }
}

/* =============================================
   DIENST-/SPOKE-PAGINA (tekstueel, blauwdruk)
   Zie CLAUDE.md → vaste blokstructuur dienstpagina.
   ============================================= */
.pagina-dienst {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 5vw 5rem;
}
.pagina-dienst .pagina-hero {
    padding-left: 0;
    padding-right: 0;
}
.pagina-dienst .dienst-sectie {
    margin-top: 3rem;
}
.pagina-dienst .dienst-sectie > .sectie-titel {
    font-size: 28px;
    margin-bottom: 1rem;
}
.pagina-dienst .dienst-antwoord {
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 660px;
}
.pagina-dienst .dienst-lijst {
    margin: 0.5rem 0 1.2rem 1.2rem;
    line-height: 1.9;
}
.pagina-dienst .dienst-faq h3 {
    font-family: var(--font-jun);
    font-weight: 400;
    font-size: 20px;
    margin: 1.6rem 0 0.4rem;
}
.pagina-dienst .dienst-faq p {
    max-width: 660px;
}

/* Pagina sectie */
.pagina-sectie {
    padding: 5rem 5vw;
}

.pagina-sectie--crème { background: var(--crème); }
.pagina-sectie--donker {
    background: var(--donker);
    position: relative;
    overflow: hidden;
}
.pagina-sectie--donker::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/krijtbord.jpg');
    background-size: cover;
    opacity: 0.18;
    pointer-events: none;
}
.pagina-sectie--donker > * { position: relative; z-index: 1; }
.pagina-sectie--kaart { padding: 0; }

/* Intro layout: tekst links, afbeelding rechts */
.pagina-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.pagina-intro-afbeelding img {
    width: 100%;
    height: 420px;
    object-fit: cover;
}

/* Items grid (brandstoffen, shop categorieën, voorzieningen) */
.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.item-kaart {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.item-icoon {
    height: 120px;
    width: auto;
    mix-blend-mode: multiply;
    object-fit: contain;
}

.item-naam {
    font-family: var(--font-jun);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0;
    text-decoration: underline;
    text-decoration-color: var(--rood);
    text-underline-offset: 3px;
}

/* Diensten grid (autowascentrum) */
.diensten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.dienst-kaart {
    background: #fff;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    border-bottom: 3px solid var(--rood);
}

.dienst-naam {
    font-family: var(--font-jun);
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 0;
}

.dienst-prijs {
    font-size: 1.4rem;
    color: var(--rood);
    font-style: italic;
}

/* Openingstijden tabel */
.openingstijden-tabel {
    max-width: 480px;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.openingstijd-rij {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--grijs-licht, #e8e2d8);
}

.openingstijd-dag {
    font-family: var(--font-cat);
    font-weight: 300;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.openingstijd-tijd {
    font-family: var(--font-jun);
    font-size: 1rem;
    letter-spacing: 0;
}

/* Contact pagina */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
}

.contact-gegevens {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

.contact-gegeven {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.contact-gegeven a { transition: color 0.2s; }
.contact-gegeven a:hover { color: var(--rood); }

/* Tijdlijn Over ons */
.tijdlijn {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 3rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.tijdlijn-item {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 2rem;
    padding: 2rem 0;
    border-bottom: 1px solid var(--grijs-licht, #e8e2d8);
}

.tijdlijn-jaar {
    font-size: 2rem;
    color: var(--rood);
    line-height: 1;
    padding-top: 0.2rem;
}

.tijdlijn-titel {
    font-family: var(--font-jun);
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0;
    margin-bottom: 0.5rem;
}

.tijdlijn-foto {
    margin-top: 1rem;
    max-width: 300px;
    height: auto;
}

/* Team grid */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    text-align: center;
}

.team-foto {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    filter: grayscale(20%);
    margin-bottom: 1rem;
}

.team-naam {
    font-family: var(--font-jun);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0;
    margin-bottom: 0.3rem;
}

.team-functie { margin-top: 0.2rem; }

/* Galerij grid */
.galerij-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.galerij-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    filter: grayscale(20%);
    transition: filter 0.3s;
}
.galerij-item:hover img { filter: grayscale(0%); }

.galerij-bijschrift {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Text align helper */
.text-center { text-align: center; }

/* Responsive pagina's */
@media (max-width: 900px) {
    .pagina-intro { grid-template-columns: 1fr; gap: 2rem; }
    .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
    .tijdlijn-item { grid-template-columns: 70px 1fr; }
}

/* Actieve nav item */
.nav-item.actief { color: var(--rood); }
.nav-item--rood.actief { background: var(--rood-donker); }

/* =============================================
   AANHANGWAGENS PAGINA
   ============================================= */
.pagina-aanhang {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5vw 6rem;
}

/* Hero: styling via de uniforme .vz-hero component (zie boven) */
.aanhang-hero .sectie-titel {
    margin-bottom: 1rem;
}

/* =============================================
   CAROUSEL SELECTOR
   ============================================= */
.aanhang-carousel-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 0 3rem;
    /* Op krijtbord bg: transparant, anders crème */
    background: transparent;
}

/* Op normale pagina (aanhangwagens) is wrapper crème */
.pagina-aanhang .aanhang-carousel-wrap {
    background: var(--crème);
    margin: 0 -5vw;
    padding-left: 5vw;
    padding-right: 5vw;
}

/* De drie slides naast elkaar, gecentreerd */
.aanhang-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    max-width: 1100px;
    margin: 2rem auto;
    position: relative;
}

.carousel-slide {
    cursor: pointer;
    transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    user-select: none;
}

/* Actieve (midden) slide — groot en scherp */
.carousel-slide.actief {
    opacity: 1;
    transform: scale(1);
    filter: none;
    flex: 0 0 44%;
    z-index: 2;
    cursor: default;
}

/* Buurslides — kleiner, vaag, klikbaar */
.carousel-slide.vorige,
.carousel-slide.volgende {
    opacity: 0.35;
    transform: scale(0.82);
    filter: grayscale(40%);
    flex: 0 0 26%;
    z-index: 1;
}

.carousel-slide.vorige { transform: scale(0.82) translateX(16px); }
.carousel-slide.volgende { transform: scale(0.82) translateX(-16px); }

.carousel-slide:not(.actief):hover {
    opacity: 0.6;
}

.carousel-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
    background: rgba(255,255,255,0.95);
    padding: 1.5rem;
    display: block;
}

.carousel-naam {
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--zwart);
    text-align: center;
    transition: opacity 0.4s;
}
.blok-aanhang-krijtbord .carousel-naam {
    color: #fff;
}

.carousel-slide:not(.actief) .carousel-naam {
    opacity: 0;
}

/* Navigatie pijlen */
.carousel-pijl {
    position: absolute;
    top: 50%;
    transform: translateY(-60%);
    background: var(--zwart);
    color: #fff;
    border: none;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
}

.carousel-pijl:hover { background: var(--rood); }
.carousel-pijl--links  { left: 0; }
.carousel-pijl--rechts { right: 0; }

/* Dots */
.carousel-dots {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0,0,0,0.2);
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    padding: 0;
}

.carousel-dot.actief {
    background: var(--rood);
    transform: scale(1.3);
}

/* =============================================
   INFO PANELEN
   ============================================= */
.aanhang-info-wrap {
    padding: 3rem 0 4rem;
}

/* Op krijtbord achtergrond — lichte tekststijl */
.blok-aanhang-krijtbord .aanhang-info-wrap .aanhang-subkop,
.blok-aanhang-krijtbord .aanhang-info-wrap .kenmerken-lijst li,
.blok-aanhang-krijtbord .aanhang-info-wrap .kenmerken-lijst li span,
.blok-aanhang-krijtbord .aanhang-info-wrap .prijs-bedrag,
.blok-aanhang-krijtbord .aanhang-info-wrap .prijs-omschrijving,
.blok-aanhang-krijtbord .aanhang-info-wrap .body-tekst {
    color: rgba(255,255,255,0.85);
}
.blok-aanhang-krijtbord .aanhang-info-wrap .aanhang-subkop {
    border-bottom-color: rgba(255,255,255,0.2);
}
.blok-aanhang-krijtbord .aanhang-info-wrap .kenmerken-lijst li,
.blok-aanhang-krijtbord .aanhang-info-wrap .prijs-regel {
    border-bottom-color: rgba(255,255,255,0.1);
}
.blok-aanhang-krijtbord .aanhang-info-wrap .prijs-korting {
    color: rgba(255,255,255,0.6);
}

.aanhang-info-paneel {
    display: none;
}

.aanhang-info-paneel.actief {
    display: block;
    animation: fadeInPanel 0.4s ease;
}

@keyframes fadeInPanel {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.aanhang-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 4rem;
    align-items: start;
}

.info-blok--breed {
    /* Derde kolom: extra info + reserveer */
}

/* Kenmerken & prijs elementen */
.aanhang-subkop {
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--zwart);
    margin-bottom: 1.2rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--crème);
}

.kenmerken-lijst {
    list-style: none;
}

.kenmerken-lijst li {
    font-family: var(--font-cat);
    font-size: var(--fs-body);
    letter-spacing: var(--ls-body);
    color: #444;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex;
    gap: 0.8rem;
}

.kenmerken-lijst li span {
    font-weight: 700;
    color: var(--zwart);
    min-width: 115px;
    flex-shrink: 0;
}

.prijs-lijst {
    list-style: none;
}

.prijs-regel {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.prijs-bedrag {
    font-family: var(--font-jun);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--zwart);
    letter-spacing: 0;
    white-space: nowrap;
}

.prijs-omschrijving {
    font-family: var(--font-cat);
    font-size: var(--fs-body);
    letter-spacing: var(--ls-body);
    color: #666;
}

.prijs-korting {
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    color: var(--rood);
    text-transform: uppercase;
    padding: 0.45rem 0;
    display: block;
}

.info-blok--breed .body-tekst {
    max-width: 100%;
    margin-bottom: 2rem;
}

.reserveer-blok {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--crème);
}

.reserveer-blok .body-tekst {
    margin-bottom: 1.2rem;
}

/* =============================================
   RESPONSIVE AANHANGWAGENS
   ============================================= */
@media (max-width: 1000px) {
    .aanhang-info-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
    .info-blok--breed {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .carousel-slide.vorige,
    .carousel-slide.volgende {
        flex: 0 0 18%;
        opacity: 0.25;
    }
    .carousel-slide.actief {
        flex: 0 0 60%;
    }
    .aanhang-info-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .carousel-pijl {
        width: 38px;
        height: 38px;
    }
}
/* =============================================
   BRANDSTOFFEN PAGINA
   ============================================= */

/* Grid selector */
.brand-grid-wrap {
    margin-bottom: 3rem;
}

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

.brand-grid-kaart {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 14px 16px 16px;
    background: var(--wit);
    border: 1.5px solid var(--crème);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.12s;
}

.brand-grid-kaart::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--kl);
    border-radius: 8px 8px 0 0;
}

.brand-grid-kaart:hover {
    border-color: var(--kl);
    transform: translateY(-2px);
}

.brand-grid-kaart.actief {
    border-color: var(--kl);
    border-width: 2px;
    background: #fff;
}

.brand-grid-kaart.binnenkort { opacity: 0.5; }

.bgk-type {
    font-family: var(--font-cat);
    font-weight: 300;
    font-size: 0.6rem;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--grijs);
    margin-top: 6px;
}

.bgk-naam {
    font-family: var(--font-jun);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--zwart);
    line-height: 1.2;
}

.brand-grid-kaart.actief .bgk-naam { color: var(--kl); }

.bgk-label {
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: 0.58rem;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--kl);
    color: #fff;
    margin-top: 4px;
    opacity: 0.85;
}

.bgk-soon {
    position: absolute;
    top: 8px;
    right: 8px;
    font-family: var(--font-cat);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--crème);
    color: var(--grijs);
    padding: 2px 5px;
    border-radius: 3px;
}

/* Panelen */
.brand-panelen { }

.brand-paneel {
    display: none;
    animation: fadeInPanel 0.3s ease;
}

.brand-paneel.actief { display: block; }

.paneel-inner {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 4rem;
    align-items: start;
    padding: 3rem 0 2rem;
    border-top: 2px solid var(--kl);
}

/* Afbeelding kolom */
.paneel-afbeelding img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

/* Placeholder als er nog geen afbeelding is */
.afb-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    border: 2px dashed var(--kl);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.015);
    opacity: 0.6;
}

.afb-placeholder-inner {
    text-align: center;
    color: var(--kl);
    padding: 2rem;
}

.afb-placeholder-inner p {
    font-family: var(--font-cat);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-body);
    line-height: 1.6;
    margin-top: 0.8rem;
    color: var(--grijs);
}

.afb-placeholder-inner strong {
    color: var(--zwart);
    font-weight: 700;
}

.afb-veld {
    margin-top: 0.5rem !important;
    font-size: 0.6rem !important;
    opacity: 0.6;
}

.afb-veld code {
    font-family: monospace;
    background: var(--crème);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--zwart);
}

/* Info kolom */
.paneel-header {
    background: var(--kl);
    border-radius: 8px;
    padding: 1.5rem 1.8rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.paneel-header::after {
    content: '';
    position: absolute;
    right: -20px; top: -20px;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
}

.paneel-type {
    font-family: var(--font-cat);
    font-weight: 300;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    display: block;
    margin-bottom: 4px;
}

.paneel-naam {
    font-family: var(--font-jun);
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 400;
    letter-spacing: 0;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 0.8rem;
}

.paneel-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.brand-badge {
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: 0.58rem;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    background: rgba(255,255,255,0.18);
    color: #fff;
}

.paneel-beschrijving {
    max-width: 100%;
    font-size: 13px;
    line-height: 1.9;
    margin-bottom: 1.5rem;
}

.paneel-twee-kolommen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.pagina-brandstoffen {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5vw 6rem;
}

/* Hero */
.brand-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3rem;
    padding: 4rem 0 3rem;
}

/* Als template-part, geen extra <main> wrapper nodig */
.pagina-tankstation .brand-hero,
.pagina-voorzieningen .brand-hero {
    padding-top: 2rem;
}

.brand-hero-ill img {
    width: 220px;
    opacity: 0.6;
    mix-blend-mode: multiply;
}

/* =============================================
   KAARTENRIJ
   ============================================= */
.brand-kaarten {
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 2px solid var(--crème);
    margin-bottom: 0;
}
.brand-kaarten::-webkit-scrollbar { display: none; }

.brand-kaart {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 1.2rem 1.6rem 1rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s, border-color 0.2s;
    position: relative;
    min-width: 110px;
}

.brand-kaart:hover {
    background: rgba(0,0,0,0.03);
}

.brand-kaart.actief {
    border-bottom-color: var(--kaart-kleur);
    background: rgba(0,0,0,0.02);
}

.brand-kaart.binnenkort {
    opacity: 0.55;
}

.kaart-type {
    font-family: var(--font-cat);
    font-weight: 300;
    font-size: 0.6rem;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--grijs);
}

.kaart-naam {
    font-family: var(--font-jun);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--zwart);
    line-height: 1.2;
}

.kaart-label {
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: 0.6rem;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--kaart-kleur);
    margin-top: 0.1rem;
}

.kaart-binnenkort {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-family: var(--font-cat);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--crème);
    color: var(--grijs);
    padding: 0.15rem 0.4rem;
}

/* =============================================
   INFO PANELEN
   ============================================= */
.brand-panelen {
    position: relative;
}

.brand-paneel {
    display: none;
}

.brand-paneel.actief {
    display: block;
    animation: fadeInPanel 0.35s ease;
}

.paneel-inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 5rem;
    padding: 3.5rem 0 2rem;
    border-bottom: 1px solid var(--crème);
}

/* Kleurlijn links van paneel */
.paneel-inner::before {
    content: '';
    position: absolute;
    left: -5vw;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--kaart-kleur);
    opacity: 0.6;
    transition: opacity 0.3s;
}

.brand-paneel.actief .paneel-inner::before {
    opacity: 1;
}

/* Paneel header */
.paneel-header {
    margin-bottom: 1.5rem;
}

.paneel-type {
    font-family: var(--font-cat);
    font-weight: 300;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--grijs);
    display: block;
    margin-bottom: 0.4rem;
}

.paneel-naam {
    font-family: var(--font-jun);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--zwart);
    line-height: 1.1;
    margin-bottom: 1rem;
}

/* Badges */
.paneel-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.badge {
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: 0.6rem;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--kaart-kleur);
    color: var(--kaart-kleur);
}

/* Beschrijving */
.paneel-beschrijving {
    max-width: 100%;
    margin-bottom: 2rem;
    font-size: 13px;
    line-height: 1.9;
}

/* Geschikt voor */
.paneel-voor {
    margin-top: 1rem;
}

.voor-lijst {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.voor-lijst li {
    font-family: var(--font-cat);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-body);
    color: #555;
    padding: 0.3rem 0.8rem;
    background: var(--crème);
}

/* Specs tabel */
.specs-tabel {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.specs-tabel tr {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.spec-key {
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-body);
    color: var(--zwart);
    padding: 0.6rem 1rem 0.6rem 0;
    width: 50%;
    vertical-align: top;
}

.spec-val {
    font-family: var(--font-cat);
    font-weight: 400;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-body);
    color: #555;
    padding: 0.6rem 0;
    vertical-align: top;
}

/* Coming soon */
.paneel-coming-soon {
    margin-top: 2rem;
    padding: 1.2rem 1.5rem;
    border-left: 3px solid var(--kaart-kleur);
    background: rgba(0,0,0,0.02);
}

.paneel-coming-soon .body-tekst {
    margin: 0;
    color: var(--grijs);
    font-style: italic;
}

/* =============================================
   RESPONSIVE BRANDSTOFFEN
   ============================================= */
@media (max-width: 900px) {
    .brand-hero {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .brand-hero-ill { display: none; }

    .paneel-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .paneel-inner::before { display: none; }

    .brand-kaart { min-width: 90px; padding: 1rem 1rem 0.8rem; }
    .kaart-naam { font-size: 0.85rem; }
}

/* =============================================
   NIEUWS & AANBIEDINGEN — extra stijlen
   ============================================= */

/* Badge varianten */
.badge-nieuws {
    background: var(--zwart) !important;
}

/* "Alle berichten" knop onder blok 3 */
.aanbiedingen-meer {
    text-align: center;
    margin-top: 3rem;
}

.btn-rood-outline {
    display: inline-block;
    border: 2px solid rgba(255,255,255,0.4);
    color: #fff;
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    padding: 0.6rem 1.8rem;
    transition: border-color 0.2s, background 0.2s;
}
.btn-rood-outline:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.1);
}

/* Aanbieding titel link */
.aanbieding-titel a {
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s;
}
.aanbieding-titel a:hover { opacity: 0.8; }

/* Kaart afbeelding links */
.aanbieding-kaart a img,
.archief-kaart-afb img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s;
}
.aanbieding-kaart a img:hover,
.archief-kaart-afb:hover img { opacity: 0.9; }

/* =============================================
   ARCHIEF PAGINA
   ============================================= */
.pagina-archief {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5vw 6rem;
}

.archief-hero {
    padding: 4rem 0 3rem;
}

.archief-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.archief-kaart {
    position: relative;
    background: var(--wit);
}

.archief-kaart-afb {
    display: block;
    overflow: hidden;
}

.archief-kaart-afb .kaart-placeholder {
    aspect-ratio: 4/3;
}

.archief-kaart-info {
    padding: 1rem 0;
}

.archief-datum {
    font-family: var(--font-cat);
    font-weight: 300;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--grijs);
    display: block;
    margin-bottom: 0.4rem;
}

.archief-paginering {
    margin-top: 4rem;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.archief-paginering a,
.archief-paginering span {
    font-family: var(--font-cat);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--crème);
    color: var(--zwart);
    transition: background 0.2s;
}
.archief-paginering a:hover { background: var(--crème); }
.archief-paginering .current { background: var(--zwart); color: #fff; border-color: var(--zwart); }

/* =============================================
   SINGLE BERICHT PAGINA
   ============================================= */
.pagina-single {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 5vw 6rem;
}

.single-header {
    padding: 4rem 0 2rem;
}

.single-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.single-prijs {
    font-family: var(--font-jun);
    font-size: 2rem;
    font-weight: 700;
    color: var(--rood);
    letter-spacing: 0;
    margin-top: 0.5rem;
}

.single-afbeelding {
    margin-bottom: 3rem;
}

.single-afbeelding img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    border-radius: 4px;
}

.single-content {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 3rem;
}

.single-content p { margin-bottom: 1rem; }
.single-content h2 { font-family: var(--font-jun); font-size: 1.5rem; margin: 2rem 0 1rem; }
.single-content ul, .single-content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.single-content li { margin-bottom: 0.4rem; }

.single-terug { padding-top: 2rem; border-top: 1px solid var(--crème); }

/* Klein btn variant */
.btn-rood--klein {
    padding: 0.35rem 0.9rem;
    font-size: 0.6rem;
    display: inline-block;
    margin-top: 0.8rem;
}

@media (max-width: 900px) {
    .archief-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .archief-grid { grid-template-columns: 1fr; }
}

/* =============================================
   VOORZIENINGEN PAGINA
   ============================================= */
.pagina-voorzieningen { max-width: 1200px; margin: 0 auto; padding: 0; }


/* Overzichtskaarten — elke voorziening als kaart, met
   doorlink naar de eigen pagina waar die bestaat */
.voorz-overzicht {
    padding: 2rem 5vw 5rem;
}

.voorz-overzicht-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: stretch;
}

.voorz-kaart {
    background: #fff;
    border-bottom: 3px solid var(--rood);
    padding: 2.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.voorz-kaart-ill {
    height: 110px;
    display: flex;
    align-items: center;
}
.voorz-kaart-ill img {
    height: 100%;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.voorz-kaart-titel {
    font-family: var(--font-jun);
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: 0;
    color: var(--zwart);
}

.voorz-kaart-knop {
    margin-top: auto;
    align-self: flex-start;
}

/* Krijtbord aanhangwagen blok */
.blok-aanhang-krijtbord {
    position: relative;
    padding: 5rem 5vw;
    overflow: hidden;
}

.krijtbord-bg {
    position: absolute;
    inset: 0;
    background-color: #1e2a1e;
    background-image: url('../images/krijtbord.jpg');
    background-size: cover;
    background-position: center;
}

.krijtbord-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 18, 10, 0.72);
}

.aanhang-krijtbord-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.aanhang-krijtbord-header { margin-bottom: 3rem; }

/* =============================================
   TANKSTATION PAGINA
   ============================================= */
.pagina-tankstation { max-width: 1200px; margin: 0 auto; }

.blok-tankpas { background: var(--crème); padding: 6rem 5vw; }

.tankpas-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
}

.betaal-iconen {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 2rem;
}

.betaal-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: var(--font-cat);
    font-size: 0.6rem;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--zwart);
}

.tankpas-subtitel {
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--zwart);
    margin: 2rem 0 0.8rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--rood);
    display: inline-block;
}

.voorwaarden-lijst {
    list-style: none;
    margin-top: 1rem;
}
.voorwaarden-lijst li {
    font-family: var(--font-cat);
    font-size: var(--fs-body);
    letter-spacing: var(--ls-body);
    color: #444;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding-left: 1.2rem;
    position: relative;
}
.voorwaarden-lijst li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--rood);
    font-weight: 700;
}

/* =============================================
   SHOP PAGINA
   ============================================= */
.pagina-shop { max-width: 1200px; margin: 0 auto; padding: 0 5vw; }
.shop-producten-blok { padding: 4rem 0 6rem; }

.shop-producten-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1.5rem;
}

.shop-product-tag {
    font-family: var(--font-cat);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-body);
    padding: 6px 14px;
    background: var(--crème);
    color: var(--zwart);
    border-radius: 3px;
    transition: background 0.15s, color 0.15s;
    cursor: default;
}
.shop-product-tag:hover { background: var(--rood); color: #fff; }

/* =============================================
   AUTOWASCENTRUM PAGINA
   Lay-out wordt intern beheerd via .aw-wrap.
   De <main> moet full-width zijn.
   ============================================= */
.pagina-autowas { max-width: none; width: 100%; margin: 0; padding: 0; }

/* =============================================
   OVER ONS PAGINA
   ============================================= */
.pagina-overons { max-width: 1200px; margin: 0 auto; }

.overons-blok { padding: 5rem 5vw; }
.overons-blok-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}
.overons-foto img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 4px;
}

/* Team */
.overons-team { padding: 5rem 5vw; background: var(--crème); text-align: center; }
.team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 0;
}
.team-kaart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 140px;
}
.team-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--rood);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-jun);
    font-size: 1.2rem;
    font-weight: 400;
}
.team-naam {
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--zwart);
    text-align: center;
}
.team-functie {
    font-family: var(--font-cat);
    font-weight: 300;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--grijs);
    text-align: center;
}

/* =============================================
   RESPONSIVE PAGINA'S
   ============================================= */
@media (max-width: 900px) {
    .tankpas-inner,
    .overons-blok-inner,
    .autowas-inner,
    .autowas-blok--alt .autowas-inner { grid-template-columns: 1fr; gap: 2rem; }
    .autowas-ill { display: none; }
}

/* =============================================
   BRANDSTOF PANEEL — nieuw zonder afbeelding
   ============================================= */
.brand-paneel-kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    background: var(--kl);
    border-radius: 8px 8px 0 0;
    padding: 1.5rem 2rem;
    position: relative;
    overflow: hidden;
}

.brand-paneel-kop::after {
    content: '';
    position: absolute;
    right: -20px; top: -20px;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
}

.brand-paneel-kop .paneel-type {
    color: rgba(255,255,255,0.65);
    margin-bottom: 3px;
}

.brand-paneel-kop .paneel-naam {
    color: #fff;
    font-size: clamp(1.4rem, 2vw, 2rem);
    margin-bottom: 0;
}

.brand-paneel-kop .paneel-badges {
    flex-shrink: 0;
    align-self: center;
}

.brand-paneel-body {
    border: 0.5px solid var(--crème);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 2rem;
    background: var(--wit);
}

.brand-paneel-body .paneel-beschrijving {
    max-width: 100%;
    margin-bottom: 1.5rem;
    font-size: 13px;
}

.brand-paneel-kolommen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

/* Verwijder oude paneel-inner stijl conflict */
.brand-paneel .paneel-inner {
    display: block;
}

/* Grid 7 items — iets compacter */
.brand-grid {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
    .brand-grid { grid-template-columns: repeat(2, 1fr); }
    .brand-paneel-kop { flex-direction: column; gap: 1rem; }
    .brand-paneel-kolommen { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* =============================================
   VOORZIENINGEN — opmerking op kaart
   ============================================= */
.voorz-opmerking-tekst {
    font-family: var(--font-cat);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-body);
    color: var(--zwart);
    margin-top: 0.8rem;
    padding-left: 1rem;
    border-left: 3px solid var(--rood);
    border-radius: 0;
    line-height: 1.6;
}

/* =============================================
   HERO ILLUSTRATIE DOORLOOP FIX
   ============================================= */
/* Blok rondneuzen heeft transparante achtergrond zodat hero illustratie doorloopt */
.blok-rondneuzen {
    background: transparent;
}

/* Zorg dat sections erna wel een achtergrond hebben */
.blok-aanbiedingen,
.blok-shop,
.blok-overons {
    position: relative;
    z-index: 2;
}

/* =============================================
   BETAAL ICONEN
   ============================================= */
.betaal-iconen-wrap {
    margin: 1.5rem 0 1rem;
}

.betaal-iconen-img {
    width: 100%;
    max-width: 480px;
    height: auto;
    mix-blend-mode: multiply;
}

.betaal-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 2rem;
}

.betaal-label {
    font-family: var(--font-cat);
    font-size: 0.6rem;
    font-weight: 300;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--grijs);
    padding: 2px 8px;
    border: 0.5px solid var(--crème);
    border-radius: 2px;
}

/* =============================================
   GASFLESSEN PAGINA
   ============================================= */
.pagina-gasflessen {
    max-width: 1200px;
    margin: 0 auto;
}

.pagina-gasflessen .pagina-hero {
    padding: 4rem 5vw 2rem;
}

.gasflessen-grid-sectie {
    padding: 2rem 5vw 5rem;
}

.gasflessen-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gasfles-kaart {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 4rem;
    align-items: start;
    padding: 4rem 0;
    border-bottom: 1px solid var(--crème);
}

/* Afwisselend: even kaarten afbeelding rechts */
.gasfles-kaart:nth-child(even) {
    grid-template-columns: 1fr 260px;
}
.gasfles-kaart:nth-child(even) .gasfles-afbeelding {
    order: 2;
}
.gasfles-kaart:nth-child(even) .gasfles-info {
    order: 1;
}

.gasfles-afbeelding {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.gasfles-afbeelding img {
    width: 100%;
    max-width: 200px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.1));
}

.gasfles-type {
    font-family: var(--font-cat);
    font-weight: 300;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--grijs);
    display: block;
    margin-bottom: 0.4rem;
}

.gasfles-naam {
    font-family: var(--font-jun);
    font-size: clamp(1.4rem, 2vw, 2rem);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--zwart);
    line-height: 1.2;
    margin-bottom: 0.8rem;
}

.gasfles-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.2rem;
}

.gasfles-tag {
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: 0.58rem;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    padding: 3px 8px;
    background: var(--crème);
    color: var(--zwart);
    border-radius: 2px;
}

.gasfles-omschrijving {
    max-width: 100%;
    margin-bottom: 1.5rem;
    font-size: 13px;
    line-height: 1.8;
}

.gasfles-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.gasfles-toepassingen {
    list-style: none;
    margin-top: 0.5rem;
}

.gasfles-toepassingen li {
    font-family: var(--font-cat);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-body);
    color: #555;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding-left: 1rem;
    position: relative;
}

.gasfles-toepassingen li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--rood);
    font-size: 0.7rem;
}

/* Info blok onderaan */
.gasflessen-info-blok {
    background: var(--crème);
    padding: 5rem 5vw;
}

.gasflessen-info-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .gasfles-kaart,
    .gasfles-kaart:nth-child(even) {
        grid-template-columns: 1fr;
    }
    .gasfles-kaart:nth-child(even) .gasfles-afbeelding,
    .gasfles-kaart:nth-child(even) .gasfles-info { order: unset; }
    .gasfles-detail-grid { grid-template-columns: 1fr; }
    .gasflessen-info-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* =============================================
   AUTOWASCENTRUM — scoped stijlen
   Alle regels zijn gebonden aan .pagina-autowas
   zodat er geen conflict is met andere pagina's.
   ============================================= */

.pagina-autowas {
    --aw-mono:     var(--font-mono);
    --aw-ivory:    #fbf7ed;
    --aw-ivory-2:  #f5f0e2;
    --aw-ink-2:    #4a4036;
    --aw-rule:     #cdbfa6;
    --aw-rule-2:   #b8a98e;
    --aw-red-soft: #c05040;
    --aw-red-tint: #f8e3dd;
    --aw-shadow:   0 1px 0 rgba(42,37,32,.06), 0 8px 24px -12px rgba(42,37,32,.18);
}

/* ---------- Typografie helpers ---------- */
.pagina-autowas .aw-eyebrow {
    font-family:    var(--aw-mono);
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--grijs);
    display:        block;
}
.pagina-autowas .aw-eyebrow--rood { color: var(--rood); }

.pagina-autowas h1,
.pagina-autowas h2 {
    font-family:    var(--font-jun);
    font-weight:    400;
    line-height:    1.05;
    letter-spacing: -0.015em;
    margin:         0;
}
.pagina-autowas h1 { font-size: clamp(36px, 5.4vw, 64px); margin: 14px 0 18px; }
.pagina-autowas h2 { font-size: clamp(30px, 3.6vw, 44px); margin-top: 10px; }
.pagina-autowas h3 {
    font-family: var(--font-jun);
    font-size:   19px;
    font-weight: 400;
    margin:      8px 0 0;
    line-height: 1.2;
}
.pagina-autowas em { font-style: italic; color: var(--rood); }

/* ---------- Layout ---------- */
.pagina-autowas .aw-wrap {
    max-width: 1280px;
    margin:    0 auto;
    padding:   0 40px;
}
@media (max-width: 720px) { .pagina-autowas .aw-wrap { padding: 0 22px; } }

.pagina-autowas .aw-section { padding: 64px 0; }
@media (max-width: 720px) { .pagina-autowas .aw-section { padding: 48px 0; } }
.pagina-autowas .aw-section--alt {
    background:    var(--crème);
    border-top:    1px solid var(--aw-rule);
    border-bottom: 1px solid var(--aw-rule);
}

/* ---------- Knoppen ---------- */
.pagina-autowas .aw-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    background:      var(--rood);
    color:           #fff;
    border:          none;
    padding:         13px 22px;
    font-family:     var(--aw-mono);
    font-size:       11.5px;
    letter-spacing:  0.2em;
    text-transform:  uppercase;
    text-decoration: none;
    cursor:          pointer;
    transition:      background 160ms ease, transform 160ms ease;
}
.pagina-autowas .aw-btn:hover  { background: var(--rood-donker); color: #fff; }
.pagina-autowas .aw-btn:active { transform: translateY(1px); }
.pagina-autowas .aw-btn--ghost {
    background: transparent;
    color:      var(--zwart);
    border:     1px solid var(--aw-rule-2);
}
.pagina-autowas .aw-btn--ghost:hover { background: var(--crème); border-color: var(--aw-ink-2); color: var(--zwart); }
.pagina-autowas .aw-btn--sm   { padding: 10px 16px; font-size: 10.5px; }
.pagina-autowas .aw-btn--zelf { align-self: flex-start; }

/* ---------- Sectie header ---------- */
.pagina-autowas .aw-sec-head {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   40px;
    align-items:           end;
    margin-bottom:         36px;
    border-bottom:         1px solid var(--aw-rule);
    padding-bottom:        22px;
}
.pagina-autowas .aw-sec-sub {
    font-family:  var(--font-jun);
    font-size:    16px;
    color:        var(--aw-ink-2);
    max-width:    420px;
    justify-self: end;
    text-align:   right;
    margin:       0;
}
@media (max-width: 800px) {
    .pagina-autowas .aw-sec-head { grid-template-columns: 1fr; gap: 14px; }
    .pagina-autowas .aw-sec-sub  { justify-self: start; text-align: left; }
}

/* ---------- Hero ---------- */
.pagina-autowas .aw-hero {
    border-bottom: 1px solid var(--aw-rule);
    overflow:      hidden;
}
.pagina-autowas .aw-hero-canvas {
    position:    relative;
    min-height:  420px;
    display:     grid;
    place-items: center;
    padding:     56px 0 64px;
}
.pagina-autowas .aw-hero-illus {
    position:   absolute;
    inset:      0;
    background:
        repeating-linear-gradient(135deg, transparent 0 14px, rgba(42,37,32,.045) 14px 15px),
        linear-gradient(180deg, var(--wit) 0%, var(--crème) 100%);
    z-index:    0;
}
.pagina-autowas .aw-hero-content {
    position:   relative;
    z-index:    1;
    text-align: center;
    max-width:  720px;
    padding:    0 24px;
}
.pagina-autowas .aw-lede {
    font-family:  var(--font-jun);
    font-size:    17px;
    line-height:  1.5;
    color:        var(--aw-ink-2);
    max-width:    520px;
    margin:       0 auto 24px;
}
.pagina-autowas .aw-hero-ctas {
    display:         inline-flex;
    gap:             12px;
    flex-wrap:       wrap;
    justify-content: center;
}
.pagina-autowas .aw-hero-meta {
    margin-top:      36px;
    display:         flex;
    justify-content: center;
    gap:             36px;
    flex-wrap:       wrap;
    font-family:     var(--aw-mono);
    font-size:       10.5px;
    letter-spacing:  0.16em;
    text-transform:  uppercase;
    color:           var(--grijs);
}
.pagina-autowas .aw-hero-meta strong { color: var(--zwart); font-weight: 600; }

/* ---------- Tier stack ---------- */
.pagina-autowas .aw-stack {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   16px;
    align-items:           stretch;
}
@media (max-width: 1000px) { .pagina-autowas .aw-stack { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 600px)  { .pagina-autowas .aw-stack { grid-template-columns: 1fr; } }

.pagina-autowas .aw-tier {
    position:        relative;
    background:      var(--aw-ivory);
    border:          1px solid var(--aw-rule-2);
    display:         flex;
    flex-direction:  column;
    transition:      transform 200ms ease, box-shadow 200ms ease;
}
.pagina-autowas .aw-tier:hover { transform: translateY(-3px); box-shadow: var(--aw-shadow); }

.pagina-autowas .aw-tier--featured {
    background:   var(--aw-ivory-2);
    border-color: var(--rood);
    border-width: 1.5px;
}
.pagina-autowas .aw-tier--featured::before {
    content:        'AANBEVOLEN · MEEST COMPLEET';
    position:       absolute;
    top: -1px; left: -1px; right: -1px;
    background:     var(--rood);
    color:          #fff;
    text-align:     center;
    font-family:    var(--aw-mono);
    font-size:      9.5px;
    letter-spacing: 0.24em;
    padding:        7px 0;
}
.pagina-autowas .aw-tier--featured .aw-tier-head { padding-top: 44px; }

.pagina-autowas .aw-tier-head {
    padding:       22px 22px 18px;
    border-bottom: 1px solid var(--aw-rule);
}
.pagina-autowas .aw-tier-meta-row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
}
.pagina-autowas .aw-tier-num {
    font-family:    var(--aw-mono);
    font-size:      10px;
    letter-spacing: 0.24em;
    color:          var(--grijs);
}
.pagina-autowas .aw-tier-duration {
    font-family:    var(--aw-mono);
    font-size:      9.5px;
    letter-spacing: 0.18em;
    color:          var(--grijs);
    text-transform: uppercase;
}
.pagina-autowas .aw-tier-name {
    font-family:    var(--font-jun);
    font-size:      26px;
    font-weight:    400;
    letter-spacing: -0.01em;
    line-height:    1.1;
    margin-top:     4px;
}
.pagina-autowas .aw-tier-tag {
    margin-top:  6px;
    font-family: var(--font-jun);
    font-style:  italic;
    font-size:   14px;
    color:       var(--grijs);
    min-height:  22px;
}
.pagina-autowas .aw-tier-price {
    margin-top:  14px;
    display:     flex;
    align-items: baseline;
    gap:         4px;
}
.pagina-autowas .aw-tier-euro {
    font-family: var(--font-jun);
    font-size:   18px;
    color:       var(--grijs);
}
.pagina-autowas .aw-tier-amt {
    font-family:    var(--font-jun);
    font-size:      38px;
    font-weight:    500;
    letter-spacing: -0.02em;
}
.pagina-autowas .aw-tier--featured .aw-tier-amt { color: var(--rood); }

.pagina-autowas .aw-tier-body {
    padding:        18px 22px 16px;
    flex:           1;
    display:        flex;
    flex-direction: column;
}
.pagina-autowas .aw-added-label {
    font-family:    var(--aw-mono);
    font-size:      9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--rood);
    margin-bottom:  10px;
}
.pagina-autowas .aw-tier:not(.aw-tier--last) .aw-added-label::before { content: '↑ '; }

.pagina-autowas .aw-added-list {
    list-style:    none;
    margin:        0;
    padding:       0 0 12px;
    border-bottom: 1px dashed var(--aw-rule);
}
.pagina-autowas .aw-added-list li {
    display:     flex;
    gap:         10px;
    align-items: flex-start;
    padding:     5px 0;
    font-family: var(--font-jun);
    font-size:   15.5px;
    color:       var(--zwart);
}
.pagina-autowas .aw-added-list li::before {
    content:     '+';
    color:       var(--rood);
    font-family: var(--aw-mono);
    font-weight: 600;
    font-size:   14px;
    flex-shrink: 0;
    width:       14px;
    line-height: 1.6;
}
.pagina-autowas .aw-tier--last .aw-added-list li::before {
    content:     '·';
    color:       var(--grijs);
    font-size:   18px;
    line-height: 1;
    padding-top: 2px;
}

.pagina-autowas .aw-included-label {
    font-family:    var(--aw-mono);
    font-size:      9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--grijs);
    margin:         14px 0 8px;
}
.pagina-autowas .aw-included-list {
    list-style:  none;
    margin:      0;
    padding:     0;
    font-family: var(--font-jun);
    font-size:   13.5px;
    color:       var(--grijs);
    line-height: 1.45;
}
.pagina-autowas .aw-included-list li { padding: 2px 0; display: flex; gap: 8px; }
.pagina-autowas .aw-included-list li::before {
    content:     '✓';
    color:       var(--aw-rule-2);
    font-family: var(--aw-mono);
    font-size:   11px;
    flex-shrink: 0;
}

.pagina-autowas .aw-tier-foot {
    padding:    14px 18px 18px;
    border-top: 1px solid var(--aw-rule);
    background: rgba(255,255,255,.4);
}
.pagina-autowas .aw-tier-foot .aw-btn { width: 100%; padding: 11px 0; }

/* ---------- Note bar ---------- */
.pagina-autowas .aw-note-bar {
    margin-top:  24px;
    display:     grid;
    grid-template-columns: auto 1fr auto;
    gap:         22px;
    align-items: center;
    padding:     18px 24px;
    background:  var(--aw-ivory);
    border:      1px solid var(--aw-rule);
    border-left: 3px solid var(--rood);
}
.pagina-autowas .aw-note-icon {
    width:          38px;
    height:         38px;
    background:     var(--aw-red-tint);
    color:          var(--rood);
    display:        grid;
    place-items:    center;
    font-family:    var(--aw-mono);
    font-size:      14px;
    font-style:     normal;
    font-weight:    600;
    letter-spacing: 0;
    border-radius:  50%;
    flex-shrink:    0;
}
.pagina-autowas .aw-note-text {
    font-family: var(--font-jun);
    font-size:   16px;
    color:       var(--aw-ink-2);
}
.pagina-autowas .aw-note-text strong { color: var(--zwart); font-weight: 600; }
.pagina-autowas .aw-note-label {
    font-family:    var(--aw-mono);
    font-size:      10.5px;
    letter-spacing: 0.16em;
    color:          var(--rood);
    text-transform: uppercase;
    margin-left:    6px;
}
@media (max-width: 700px) {
    .pagina-autowas .aw-note-bar { grid-template-columns: auto 1fr; }
    .pagina-autowas .aw-note-bar .aw-btn { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- Waspassen ---------- */
.pagina-autowas .aw-passes {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   18px;
}
@media (max-width: 800px) { .pagina-autowas .aw-passes { grid-template-columns: 1fr; } }

.pagina-autowas .aw-pass {
    position:              relative;
    background:            var(--aw-ivory);
    border:                1px solid var(--aw-rule-2);
    padding:               26px 26px 22px;
    display:               grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows:    auto auto auto;
    gap:                   4px 18px;
    align-items:           start;
    transition:            transform 200ms ease, box-shadow 200ms ease;
}
.pagina-autowas .aw-pass:hover { transform: translateY(-2px); box-shadow: var(--aw-shadow); }
.pagina-autowas .aw-pass--featured {
    background:   var(--aw-ivory-2);
    border-color: var(--rood);
    border-width: 1.5px;
    padding-top:  38px;
}
.pagina-autowas .aw-pass--featured::before {
    content:        'VOORDELIGST VOOR VEELRIJDERS';
    position:       absolute;
    top: -1px; left: -1px; right: -1px;
    background:     var(--rood);
    color:          #fff;
    text-align:     center;
    font-family:    var(--aw-mono);
    font-size:      9.5px;
    letter-spacing: 0.24em;
    padding:        6px 0;
}
.pagina-autowas .aw-pass-icon {
    grid-row:    1 / 3;
    width:       56px;
    height:      56px;
    border:      1px solid var(--aw-rule-2);
    display:     grid;
    place-items: center;
    font-family: var(--font-jun);
    font-size:   28px;
    font-weight: 500;
    font-style:  italic;
    color:       var(--rood);
    background:  var(--crème);
}
.pagina-autowas .aw-pass-num {
    font-family:    var(--aw-mono);
    font-size:      10px;
    letter-spacing: 0.22em;
    color:          var(--grijs);
    align-self:     end;
}
.pagina-autowas .aw-pass-name {
    font-family:    var(--font-jun);
    font-size:      24px;
    font-weight:    400;
    letter-spacing: -0.01em;
    line-height:    1.1;
}
.pagina-autowas .aw-pass-headline {
    grid-column: 2 / 3;
    font-family: var(--font-jun);
    font-size:   16px;
    color:       var(--aw-ink-2);
    margin-top:  4px;
}
.pagina-autowas .aw-pass-headline strong { color: var(--rood); font-weight: 600; }
.pagina-autowas .aw-pass-price {
    grid-column: 3 / 4;
    grid-row:    1 / 3;
    text-align:  right;
    font-family: var(--font-jun);
    font-size:   14px;
    color:       var(--grijs);
    align-self:  center;
}
.pagina-autowas .aw-pass-big {
    font-size: 22px;
    color:     var(--zwart);
    display:   block;
}
.pagina-autowas .aw-pass--featured .aw-pass-big { color: var(--rood); }
.pagina-autowas .aw-pass-sub {
    font-family: var(--aw-mono);
    font-size:   9.5px;
    letter-spacing: 0.12em;
    color:       var(--grijs);
    display:     block;
    margin-top:  3px;
}
.pagina-autowas .aw-pass-foot {
    grid-column:     1 / -1;
    margin-top:      16px;
    padding-top:     14px;
    border-top:      1px dashed var(--aw-rule);
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             14px;
    flex-wrap:       wrap;
}
.pagina-autowas .aw-pass-small {
    font-family:    var(--aw-mono);
    font-size:      9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color:          var(--grijs);
}
@media (max-width: 800px) {
    .pagina-autowas .aw-pass { grid-template-columns: auto 1fr; }
    .pagina-autowas .aw-pass-price { grid-column: 1 / -1; text-align: left; margin-top: 8px; }
}

/* ---------- Proceslijst ---------- */
.pagina-autowas .aw-process {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   0;
    border-top:            1px solid var(--aw-rule);
    border-bottom:         1px solid var(--aw-rule);
}
.pagina-autowas .aw-process-step {
    padding:      26px 22px;
    border-right: 1px solid var(--aw-rule);
}
.pagina-autowas .aw-process-step:last-child { border-right: none; }
.pagina-autowas .aw-process-num {
    font-family:    var(--aw-mono);
    font-size:      10.5px;
    letter-spacing: 0.22em;
    color:          var(--rood);
}
.pagina-autowas .aw-process-step p {
    font-family: var(--font-jun);
    font-size:   14px;
    color:       var(--aw-ink-2);
    margin:      8px 0 0;
    line-height: 1.45;
}
@media (max-width: 1000px) {
    .pagina-autowas .aw-process { grid-template-columns: 1fr 1fr; }
    .pagina-autowas .aw-process-step { border-bottom: 1px solid var(--aw-rule); }
    .pagina-autowas .aw-process-step:nth-child(2n) { border-right: none; }
}
@media (max-width: 600px) {
    .pagina-autowas .aw-process { grid-template-columns: 1fr; }
    .pagina-autowas .aw-process-step { border-right: none; }
}

/* ---------- Wasstappen accordion ---------- */
.pagina-autowas .aw-steps-grid {
    display:       grid;
    grid-template-columns: 1fr 1fr;
    border-top:    1px solid var(--aw-rule);
    border-bottom: 1px solid var(--aw-rule);
}
@media (max-width: 800px) {
    .pagina-autowas .aw-steps-grid { grid-template-columns: 1fr; }
    .pagina-autowas .aw-step-item:nth-child(odd) { border-right: none; }
}

.pagina-autowas .aw-step-item {
    border-bottom: 1px solid var(--aw-rule);
    display:       grid;
    grid-template-columns: 44px 1fr 24px;
    grid-template-rows: auto auto;
    gap:           16px;
    padding:       16px 20px;
    align-items:   center;
    cursor:        pointer;
    transition:    background 140ms ease;
}
.pagina-autowas .aw-step-item:nth-child(odd) { border-right: 1px solid var(--aw-rule); }
.pagina-autowas .aw-step-item:hover,
.pagina-autowas .aw-step-item[aria-expanded="true"] { background: var(--aw-ivory); }
.pagina-autowas .aw-step-item:focus-visible { outline: 2px solid var(--rood); outline-offset: -2px; }

.pagina-autowas .aw-step-num {
    font-family:    var(--aw-mono);
    font-size:      10.5px;
    letter-spacing: 0.16em;
    color:          var(--grijs);
}
.pagina-autowas .aw-step-name {
    font-family: var(--font-jun);
    font-size:   18px;
    font-weight: 400;
}
.pagina-autowas .aw-step-toggle {
    font-family: var(--aw-mono);
    font-size:   16px;
    color:       var(--grijs);
    transition:  transform 200ms ease;
    text-align:  right;
}
.pagina-autowas .aw-step-item[aria-expanded="true"] .aw-step-toggle {
    transform: rotate(45deg);
    color:     var(--rood);
}

.pagina-autowas .aw-step-body {
    grid-column: 1 / -1;
    padding:     4px 0 8px 60px;
}
.pagina-autowas .aw-step-body[hidden] { display: none; }
.pagina-autowas .aw-step-body p {
    font-family: var(--font-jun);
    font-size:   15px;
    color:       var(--aw-ink-2);
    margin:      0;
}

.pagina-autowas .aw-pills {
    display:    flex;
    gap:        5px;
    margin-top: 8px;
    flex-wrap:  wrap;
}
.pagina-autowas .aw-pill {
    font-family:    var(--aw-mono);
    font-size:      9.5px;
    letter-spacing: 0.14em;
    padding:        3px 7px;
    border:         1px solid var(--aw-rule-2);
    color:          var(--grijs);
}
.pagina-autowas .aw-pill--on { background: var(--rood); color: #fff; border-color: var(--rood); }

/* ---------- Atmosferisch blok ---------- */
/* ---------- Afsluiting (atmosferisch + waspassen + CTA) ---------- */
.pagina-autowas .aw-closing {
    border-top: 1px solid var(--aw-rule);
}

/* Bovenste helft: crème achtergrond met foto en merktekst */
.pagina-autowas .aw-closing > .aw-atmos-grid {
    background:    var(--crème);
    border-bottom: 1px solid var(--aw-rule);
}

/* Onderste helft: donkere achtergrond met waspassen en CTA */
.pagina-autowas .aw-closing-conversion {
    background: var(--zwart);
    padding:    56px 0 64px;
}

/* Sectie-koptekst aangepast voor donkere achtergrond */
.pagina-autowas .aw-closing-head {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   40px;
    align-items:           end;
    margin-bottom:         28px;
    border-bottom:         1px solid rgba(245,240,232,.12);
    padding-bottom:        22px;
}
.pagina-autowas .aw-closing-head h2  { color: var(--wit); }
.pagina-autowas .aw-closing-head .aw-eyebrow { color: var(--aw-red-soft); }
.pagina-autowas .aw-closing-sub {
    font-family:  var(--font-jun);
    font-size:    16px;
    color:        rgba(245,240,232,.55);
    max-width:    420px;
    justify-self: end;
    text-align:   right;
    margin:       0;
}
@media (max-width: 800px) {
    .pagina-autowas .aw-closing-head { grid-template-columns: 1fr; gap: 12px; }
    .pagina-autowas .aw-closing-sub  { justify-self: start; text-align: left; }
}

/* CTA-rij onder de waspassen */
.pagina-autowas .aw-closing-cta {
    margin-top:      32px;
    padding-top:     28px;
    border-top:      1px solid rgba(245,240,232,.12);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             12px;
}
.pagina-autowas .aw-closing-cta address {
    width:          100%;
    text-align:     center;
    margin-top:     10px;
    font-style:     normal;
    font-family:    var(--aw-mono);
    font-size:      10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          rgba(245,240,232,.45);
}
/* Ghost-knop op donkere achtergrond */
.pagina-autowas .aw-closing-conversion .aw-btn--ghost {
    color:        var(--wit);
    border-color: rgba(245,240,232,.3);
}
.pagina-autowas .aw-closing-conversion .aw-btn--ghost:hover {
    background:   rgba(245,240,232,.08);
    border-color: var(--wit);
    color:        var(--wit);
}

.pagina-autowas .aw-atmos-grid {
    display:               grid;
    grid-template-columns: 1.1fr 1fr;
    min-height:            380px;
}
.pagina-autowas .aw-atmos-img {
    border-right: 1px solid var(--aw-rule);
    overflow:     hidden;
}
.pagina-autowas .aw-atmos-img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}
.pagina-autowas .aw-atmos-text {
    padding:        56px 48px;
    display:        flex;
    flex-direction: column;
    justify-content: center;
}
.pagina-autowas .aw-atmos-text h2 { margin: 12px 0 14px; }
.pagina-autowas .aw-atmos-text p {
    font-family: var(--font-jun);
    font-size:   16px;
    color:       var(--aw-ink-2);
    max-width:   460px;
    margin:      0 0 20px;
}
.pagina-autowas .aw-stats {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   18px;
    margin-top:            22px;
    padding-top:           22px;
    border-top:            1px solid var(--aw-rule-2);
    max-width:             460px;
}
.pagina-autowas .aw-stat-n {
    font-family:    var(--font-jun);
    font-size:      28px;
    font-weight:    500;
    color:          var(--rood);
    letter-spacing: -0.01em;
}
.pagina-autowas .aw-stat-l {
    font-family:    var(--aw-mono);
    font-size:      9.5px;
    letter-spacing: 0.16em;
    color:          var(--grijs);
    text-transform: uppercase;
    margin-top:     4px;
}
@media (max-width: 900px) {
    .pagina-autowas .aw-atmos-grid { grid-template-columns: 1fr; }
    .pagina-autowas .aw-atmos-img { min-height: 260px; border-right: none; border-bottom: 1px solid var(--aw-rule); }
    .pagina-autowas .aw-atmos-text { padding: 40px 22px; }
}

/* ---------- Modals ---------- */
.pagina-autowas .aw-modal-bg {
    position:        fixed;
    inset:           0;
    background:      rgba(42,37,32,.5);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         200;
    padding:         20px;
}
.pagina-autowas .aw-modal-bg[hidden] { display: none; }

.pagina-autowas .aw-modal {
    background:  var(--aw-ivory);
    max-width:   540px;
    width:       100%;
    max-height:  86vh;
    overflow-y:  auto;
    border:      1px solid var(--aw-rule-2);
    position:    relative;
}
.pagina-autowas .aw-modal-close {
    position:    absolute;
    top:         14px;
    right:       14px;
    width:       30px;
    height:      30px;
    background:  transparent;
    border:      1px solid var(--aw-rule-2);
    cursor:      pointer;
    font-family: var(--aw-mono);
    font-size:   18px;
    color:       var(--zwart);
    display:     grid;
    place-items: center;
}
.pagina-autowas .aw-modal-close:hover { background: var(--crème); }
.pagina-autowas .aw-modal-head {
    padding:       30px 32px 20px;
    border-bottom: 1px solid var(--aw-rule);
}
.pagina-autowas .aw-modal-head .aw-tier-num { display: block; margin-bottom: 4px; }
.pagina-autowas .aw-modal-head h3 {
    font-family: var(--font-jun);
    font-size:   28px;
    font-weight: 400;
    margin:      0;
}
.pagina-autowas .aw-modal-price {
    font-family: var(--font-jun);
    font-size:   24px;
    margin-top:  6px;
}
.pagina-autowas .aw-modal-body { padding: 20px 32px 32px; }
.pagina-autowas .aw-modal-body > p {
    font-family: var(--font-jun);
    font-size:   16px;
    color:       var(--aw-ink-2);
    margin:      0 0 16px;
}
.pagina-autowas .aw-modal-body ol {
    margin:      0;
    padding:     0;
    list-style:  none;
    counter-reset: stp;
}
.pagina-autowas .aw-modal-body ol li {
    counter-increment: stp;
    padding:           11px 0;
    border-bottom:     1px dashed var(--aw-rule);
    display:           flex;
    align-items:       baseline;
    gap:               12px;
    font-family:       var(--font-jun);
    font-size:         16px;
}
.pagina-autowas .aw-modal-body ol li:last-child { border-bottom: none; }
.pagina-autowas .aw-modal-body ol li::before {
    content:        counter(stp, decimal-leading-zero);
    font-family:    var(--aw-mono);
    font-size:      10px;
    letter-spacing: 0.18em;
    color:          var(--grijs);
    flex-shrink:    0;
}
.pagina-autowas .aw-modal-hz {
    margin-left:    auto;
    font-family:    var(--aw-mono);
    font-size:      9.5px;
    letter-spacing: 0.16em;
    color:          var(--grijs);
}
.pagina-autowas .aw-modal-body .aw-btn { width: 100%; margin-top: 20px; }

/* =============================================
   AUTOWASSEN HUB — keuze tussen wasstraat / zelf wassen
   ============================================= */
.pagina-hub-autowassen { background: var(--wit); }
.hub-sectie { padding: 4rem 5vw 5rem; }
.hub-wrap { max-width: 1200px; margin: 0 auto; }
.hub-sec-head { margin-bottom: 2.5rem; }
.hub-sec-head .sectie-titel { margin-top: 0.5rem; }
.hub-sec-head .sectie-titel em {
    font-style: italic;
    color: var(--rood);
}
.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}
.hub-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    background: #fff;
    border: 1px solid rgba(28, 28, 28, 0.1);
    border-bottom: 3px solid var(--rood);
    padding: 2rem 1.8rem 1.5rem;
    position: relative;
    color: var(--zwart);
    transition: transform 0.15s, box-shadow 0.15s;
}
a.hub-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.35);
}
.hub-tag {
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: 0.6rem;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--rood);
}
.hub-name {
    font-family: var(--font-jun);
    font-size: 1.65rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.1;
}
.hub-desc {
    font-family: var(--font-cat);
    font-size: var(--fs-body);
    letter-spacing: var(--ls-body);
    line-height: 1.7;
    color: #4a443b;
    flex-grow: 1;
    margin-top: 0.2rem;
}
.hub-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(28, 28, 28, 0.08);
}
.hub-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grijs);
}
.hub-go {
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--rood);
}
.hub-card--soon {
    border-bottom-color: var(--grijs);
    opacity: 0.72;
}
.hub-card--soon .hub-tag { color: var(--grijs); }
.hub-status {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--crème);
    color: var(--grijs);
    padding: 3px 7px;
    border-radius: 3px;
}
@media (max-width: 700px) {
    .hub-grid { grid-template-columns: 1fr; }
}

/* =============================================
   TIJDELIJK — COMING SOON (lancering)
   Vergrendelt alle knoppen op de homepage en toont
   een coming-soon balk. Verwijder dit HELE blok om
   de homepage weer werkend te maken.
   ============================================= */
.home .blok .btn-rood:not(.vz-live),
.home .blok .btn-zwart:not(.vz-live),
.home .blok .btn-rood-outline:not(.vz-live) {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
}
.home .blok .btn-rood:not(.vz-live)::before,
.home .blok .btn-zwart:not(.vz-live)::before,
.home .blok .btn-rood-outline:not(.vz-live)::before {
    content: "\1F512\00A0";   /* slotje + spatie */
}
/* Ruimte zodat de vaste balk de footer niet afdekt */
body.home {
    padding-bottom: 48px;
}
/* Nieuws & Aanbiedingen: placeholder-info vervangen door 'coming soon' */
.home .blok-aanbiedingen .aanbieding-kaart:has(.kaart-placeholder) .aanbieding-titel,
.home .blok-aanbiedingen .aanbieding-kaart:has(.kaart-placeholder) .aanbieding-sub,
.home .blok-aanbiedingen .kaart-placeholder-tekst {
    visibility: hidden;
}
.home .blok-aanbiedingen .kaart-placeholder {
    position: relative;
    min-height: 180px;
}
.home .blok-aanbiedingen .kaart-placeholder::after {
    content: "\1F512\00A0 Coming soon";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(28, 28, 28, 0.78);
    color: #fff;
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Vaste coming-soon balk onderaan de homepage */
.home::after {
    content: "\1F512\00A0 Coming soon \2014 we werken aan de nieuwe website";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    background: var(--rood);
    color: #fff;
    font-family: var(--font-cat);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    padding: 11px 16px;
    padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
}