/** Shopify CDN: Minification failed

Line 10:0 Unexpected "\x01"

**/
/* VDV huisstijl-aanvullingen (bovenop Horizon). Kleuren: navy #002D62, koppen #003E82, goud #CBA562, achtergrond #FAFAFD. */
.vdv-prijs-login__link{font-weight:600;color:#003E82;text-decoration:underline;text-underline-offset:3px}
.vdv-login-knop{display:inline-flex;justify-content:center;width:100%}
.vdv-usp{display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:center;padding:.6rem 1rem;background:#002D62;color:#fff;font-size:.9rem}

"✓";color:#CBA562;margin-right:.45rem;font-weight:700}
.vdv-band-goud{background:#CBA562;color:#002D62}
.vdv-tabs{margin-top:1.5rem;border-top:1px solid #D9DEE8}
.vdv-tabs__lijst{display:flex;gap:0;overflow-x:auto;border-bottom:1px solid #D9DEE8}
.vdv-tabs__knop{background:none;border:0;border-bottom:3px solid transparent;padding:.9rem 1.1rem;font:inherit;font-weight:600;color:#333;cursor:pointer;white-space:nowrap}
.vdv-tabs__knop[aria-selected="true"]{color:#003E82;border-bottom-color:#CBA562}
.vdv-tabs__paneel{padding:1.25rem .25rem;line-height:1.6}
.vdv-tabs__paneel[hidden]{display:none}
.vdv-kenmerken{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.25rem;margin:0}
.vdv-kenmerken dt{color:#555}.vdv-kenmerken dd{margin:0;font-weight:600}
.vdv-docs{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.vdv-docs a{display:flex;justify-content:space-between;align-items:center;padding:.7rem .9rem;border:1px solid #D9DEE8;border-radius:4px;text-decoration:none;color:#003E82;font-weight:600}
.vdv-docs a:hover{border-color:#CBA562}
.vdv-clp{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.vdv-clp img{width:52px;height:52px}
.vdv-artnr{font-size:.8rem;color:#666;letter-spacing:.02em}

/* submenu in de menubalk (Merken) */
.nav .nav-sub{position:relative}
.nav .nav-sub-lijst{position:absolute;left:0;top:100%;z-index:40;min-width:220px;max-height:70vh;overflow:auto;margin:0;padding:.5rem 0;list-style:none;background:#fff;border:1px solid #D9DEE8;border-radius:0 0 4px 4px;box-shadow:0 12px 30px rgba(0,45,98,.18);display:none}
.nav .nav-sub:hover .nav-sub-lijst,.nav .nav-sub:focus-within .nav-sub-lijst{display:block}
.nav .nav-sub-lijst li a{display:block;height:auto;padding:.5rem 1rem;color:#002D62;border:0;font-weight:500}
.nav .nav-sub-lijst li a:hover{background:#F2F4F8;color:#003E82}
.nav ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.nav ul::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap}

/* collectiepagina: aanvullingen */
.paginering{display:flex;gap:1rem;align-items:center;justify-content:center;margin:2rem 0 1rem}
.pg-prijsfilter{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.25rem 1rem .75rem}
.pg-prijsfilter .field span{display:block;font-size:.8rem;color:#555;margin-bottom:.2rem}
.pg-prijsfilter .invoer{width:100%}
.actieve-filters .chip{text-decoration:none}
.prod .prod-art{display:block}

/* segmenttegel zonder foto: blauw vlak met alleen de naam */
.pg-vak-tegel{background:linear-gradient(140deg,#003E82,#002D62);min-height:160px}

/* zoekvak op zoek- en 404-pagina */
.pg-zoekvak{display:flex;gap:.5rem;max-width:640px}.pg-zoekvak .invoer{flex:1}
/* merkenoverzicht */
.pg-merkgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.pg-merktegel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;min-height:140px;padding:1rem;background:#fff;border:1px solid #D9DEE8;border-radius:4px;text-decoration:none;color:#002D62;text-align:center}
.pg-merktegel:hover{border-color:#CBA562}
.pg-merktegel img{max-height:60px;width:auto;object-fit:contain}
.pg-merktegel-naam{font-family:var(--font-kop);font-weight:700;font-size:1.25rem}
.pg-merktegel small{color:#666}
.totalen{align-self:start;padding:1.25rem;background:#fff;border:1px solid #D9DEE8;border-radius:4px}
.totaal-lijst{margin:0 0 1rem}.totaal-lijst div{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid #EEF1F6}.totaal-lijst dd{margin:0;font-weight:600}.totaal-lijst .totaal dd{font-size:1.2rem;color:#002D62}
/* nettoprijs met bruto en kortingspercentage (klanten met 'korting tonen') */
.vdv-korting{font-size:.8em;font-weight:400;color:var(--ink-soft,#5b6573);white-space:nowrap}
.vdv-korting s{opacity:.75;margin-right:.25em}
/* snel bestellen: keuzelijst bij meerdere treffers */
.quick-keuze{display:flex;flex-direction:column;gap:4px;width:100%}
.quick-keuze button{text-align:left;background:#fff;border:1px solid var(--line,#d9dee8);border-radius:6px;padding:6px 10px;font:inherit;font-size:.875rem;cursor:pointer;color:var(--ink,#1b2430)}
.quick-keuze button b{font-family:var(--mono,inherit);color:var(--navy,#002D62);margin-right:6px}
.quick-keuze button:hover{border-color:var(--navy,#002D62);background:var(--sand,#faf6ec)}

/* kopknoppen Mijn account / Winkelwagen in het kopletttertype (i/j-puntjes gelijk) */
.icon-btn .lbl{font-family:var(--font-kop);font-weight:600;letter-spacing:.01em}

/* winkelwagen: artikelkolom ruimte geven, geen afbreekstreepjes */
/* winkelwagen past zonder zijwaarts scrollen, ook op een laptop (24-10-2026: de knop Verwijderen stond buiten beeld):
   artikelnummer mag afbreken, artikelkolom smaller, onder 1500 px alleen het prullenbak-icoon */
.pg-wagen td[data-label="Artikel"]{min-width:170px;width:34%;hyphens:manual;overflow-wrap:normal}
.pg-wagen td[data-label="Artikelnr."]{white-space:nowrap;font-size:.8125rem}   /* 26-10-2026: nummer nooit afbreken (Jay-Jay: rommelig) */
.pg-wagen .tabel{font-size:.9rem}.pg-wagen th,.pg-wagen td{padding-left:12px;padding-right:12px}
@media (min-width:1280px){.layout-split.pg-cart-split{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}}
.pg-wagen .qty{grid-template-columns:32px 46px 32px}
@media (min-width:700px){.pg-wagen .btn-weg span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.pg-wagen .btn-weg{padding:8px}}
.pg-wagen .pg-sub{display:block;white-space:normal}
/* productenrij (homepage): kaarten gelijk uitlijnen, prijsregel op een regel */
.pg-kaart h3{min-height:2.5em}
.pg-kaart-prijs{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:.875rem;color:var(--ink-soft)}
.pg-kaart-prijs b{font-size:1.125rem;color:var(--ink);white-space:nowrap}
.pg-kaart-prijs .vdv-korting{font-size:.8125rem}
.pg-kaart-voet{min-height:96px}
/* melding: mist u een artikel */
.pg-mis-artikel{display:flex;gap:12px;align-items:flex-start;margin:32px 0 8px;padding:14px 18px;border:1px solid var(--line,#d9dee8);border-left:3px solid var(--gold,#CBA562);border-radius:8px;background:#fff;font-size:.9375rem}
.pg-mis-artikel .ico{width:20px;height:20px;flex:none;color:var(--gold-ink,#8a6d2b);margin-top:2px}
.pg-mis-artikel p{margin:0}
.pg-mis-artikel a{color:var(--navy,#002D62)}
/* op kleur: keuzevelden in het koopblok */
.pg-add-kleur{display:grid;gap:10px}
.pg-veld{display:grid;gap:4px;font-size:.875rem;color:var(--ink-soft,#5b6573)}
.pg-veld .invoer{height:44px;border:1px solid var(--line-2,#c9d0dc);border-radius:6px;padding:0 12px;font:inherit;background:#fff;width:100%}
.pg-veld .invoer:focus{outline:2px solid var(--navy,#002D62);outline-offset:1px}

/* 23-10: variantkeuze onder het label, stoplicht bij voorraad */
.pg-inhoudkeuze{display:grid;gap:4px}
.pg-inhoudkeuze .select{width:100%}
.pg-inhoudkeuze .select select{height:44px;width:100%;border:1px solid var(--line-2,#c9d0dc);border-radius:6px;padding:0 40px 0 12px;font:inherit;background:#fff;color:var(--ink,#1b2330)}
.pg-inhoudkeuze .select select:focus{outline:2px solid var(--navy,#002D62);outline-offset:1px}
.pg-levering li.vr-ok .ico{color:#1f7a3a}
.pg-levering li.vr-ok span{color:#1f7a3a;font-weight:600}
.pg-levering li.vr-beperkt .ico{color:#b2641a}
.pg-levering li.vr-beperkt span{color:#b2641a;font-weight:600}
.pg-levering li.vr-overleg .ico,.pg-levering li.vr-nee .ico{color:#a8302e}
.pg-levering li.vr-overleg span,.pg-levering li.vr-nee span{color:#a8302e;font-weight:600}
.pg-levering li.vr-meng .ico{color:var(--gold-ink,#8a6a1e)}
.pg-kaart-volgt b{font-size:1rem}
.pg-kaart-volgt span{font-size:.8125rem}
.pg-volgt{font-weight:600;color:var(--navy,#002D62);white-space:nowrap}
/* 23-10: waarschuwing component A/B en link naar op kleur */
.pg-component{display:flex;gap:10px;align-items:flex-start;margin:var(--s3,12px) 0 0;padding:10px 14px;border-radius:6px;background:#fdf3e7;border-left:3px solid #b2641a;font-size:.875rem;color:#5c3a12;line-height:1.45}
.pg-component .ico{width:18px;height:18px;flex:none;color:#b2641a;margin-top:1px}
.pg-andere-kleur{margin:var(--s3,12px) 0 0;padding:14px 16px;border:1px solid var(--line,#e3e7ee);border-radius:6px;background:var(--sand,#faf6ec)}
.pg-andere-kleur-kop{display:flex;gap:8px;align-items:center;margin:0 0 4px;font-family:var(--font-kop,inherit);font-weight:700;color:var(--navy,#002D62)}
.pg-andere-kleur-kop .ico{width:18px;height:18px;color:var(--gold-ink,#8a6a1e)}
.pg-andere-kleur-tekst{margin:0 0 10px;font-size:.875rem;color:var(--ink-soft,#5b6573)}
.pg-andere-kleur-knoppen{display:flex;flex-wrap:wrap;gap:8px}
.pg-andere-kleur-knoppen .btn{min-height:40px}

/* Sikkens Zuidwest (zusterbedrijf) op Schilders en bouw, 24-10-2026: rustige witte kaart in de VDV-stijl, paars alleen als accent */
.szw-blok{display:grid;grid-template-columns:1fr auto;grid-template-areas:"tekst logo" "knop logo";align-items:center;gap:12px 32px;margin:0 0 24px;padding:24px 28px;border:0;border-radius:10px;background:linear-gradient(130deg,#3A1A5C 30%,#6A4A92 100%);color:#fff}
.szw-blok .szw-tekst{grid-area:tekst;min-width:0}
.szw-blok .szw-merk{margin:0 0 4px;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#E4F0A0}
.szw-blok h2{margin:0 0 6px;font-size:1.375rem;line-height:1.3;color:#fff}
.szw-blok p{margin:0 0 4px;line-height:1.5;color:rgba(255,255,255,.92)}
.szw-blok a:not(.szw-knop){color:#fff;text-decoration:underline;text-underline-offset:2px}
.szw-contact{font-size:.9375rem}
.szw-blok .szw-knop{grid-area:knop;justify-self:start;margin-top:4px}
.szw-blok .szw-logo{grid-area:logo;height:56px;width:auto;margin:0}
.szw-knop{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:6px;background:#AFCB08;color:#2E1450;font-weight:700;text-decoration:none;white-space:nowrap}
.szw-knop:hover{background:#C3DC2A}
.szw-knop:focus-visible,.szw-dicht:focus-visible{outline:2px solid #fff;outline-offset:2px}
.szw-wolk{position:fixed;right:16px;bottom:16px;z-index:60;max-width:420px;padding:18px 48px 18px 20px;border:0;border-radius:12px;color:#fff;background:#4F2678;box-shadow:0 10px 28px rgba(30,15,50,.35);animation:szw-in .45s ease-out 1.4s both}   /* 26-10-2026: paars vlak, schuift na 1,4 s van rechts in beeld */
.szw-wolk[hidden]{display:none}
.szw-wolk p{margin:0 0 10px;line-height:1.45;font-size:.9375rem}
.szw-wolk .szw-logo{display:block;height:40px;width:auto;margin:0 0 12px}
.szw-dicht{position:absolute;top:6px;right:6px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.85);font-size:1.375rem;line-height:1;cursor:pointer}
.szw-dicht:hover{background:rgba(255,255,255,.15);color:#fff}
@keyframes szw-in{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.szw-wolk{animation:none}}
@media (max-width:600px){.szw-wolk{left:16px;right:16px;max-width:none}.szw-blok{grid-template-columns:1fr;grid-template-areas:"logo" "tekst" "knop"}.szw-blok .szw-logo{height:40px}}

/* winkelwagen 24-10-2026: op schermen onder 1200px de totalen onder de tabel, zodat prijs en verwijderen zichtbaar blijven */
@media (min-width:900px) and (max-width:1279px){.layout-split.pg-cart-split{grid-template-columns:minmax(0,1fr) !important}.pg-cart-split .totalen{max-width:520px}}
.tabel .acties .btn-weg{color:#b3261e;font-weight:600;white-space:nowrap}
.tabel .acties .btn-weg .ico{width:18px;height:18px;stroke:currentColor}
.pg-opmerking{margin:16px 0 0}.pg-opmerking textarea{width:100%;min-height:72px;border:1px solid var(--line-2,#c9d0dc);border-radius:6px;padding:10px 12px;font:inherit}
/* lege merkregel houdt zijn hoogte: titels en knoppen springen niet (24-10-2026; vaste hoogte, want de regel bevat soms alleen witruimte) */
.pg-kaart .prod-brand{min-height:1.3em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* prijs en knop altijd onderaan de kaart, hoe lang de titel ook is (24-10-2026) */
.pg-kaart .pg-kaart-tekst{display:flex;flex-direction:column}.pg-kaart .pg-kaart-voet{margin-top:auto}.pg-kaart .prod-brand:empty{display:block}.prod-brand:empty::before{content:"\00a0"}
/* merkencarrousel: logo uit het thema (24-10-2026) */
.pg-car-merk img{max-width:140px;max-height:52px;width:auto;height:auto;object-fit:contain}
/* groepsknop in de menubalk is sinds 23-10-2026 een link naar de groepspagina */
a.mega-knop{text-decoration:none}

/* Actie-badge (24-10-2026): tag 'actie' op het product -> rood label op kaart en productpagina */
.prod-art{position:relative}
.pg-label-actie{background:#b3261e;color:#fff;letter-spacing:.06em}
.pg-label-inline{position:static;display:inline-block;vertical-align:middle;margin-left:10px;font-size:.75rem;padding:4px 10px;border-radius:6px}

/* merklogo's (24-10-2026): op de merkpagina naast de kop en in het Merken-menu */
.pg-merklogo{height:56px;width:auto;max-width:200px;vertical-align:middle;margin-right:18px;object-fit:contain}
.mega-merken-alle a{display:flex;align-items:center;gap:10px;min-height:36px}
.mega-merklogo{height:26px;width:72px;object-fit:contain;object-position:left;flex:0 0 72px}

.pg-samen{margin-top:40px;padding-top:32px;border-top:1px solid var(--line,#d9dee8)}
/* totaalblok: de bestelknop met zijn statusregel en de 'Let op'-noot zijn geen links/rechts-rijen (24-10-2026: na
   'Bestelling controleren' stond de melding naast de knop en brak 'Let op' af) */
.totalen .vdv-bestel{display:block}.totalen .vdv-bestel .vdv-bestel-melding{margin:10px 0 0}
.totalen .vdv-totaal-noot{display:block;padding:.5rem 0 0}.vdv-totaal-noot dt{display:inline;font-weight:700}.vdv-totaal-noot dt::after{content:': '}.vdv-totaal-noot dd{display:inline;font-weight:400}
/* productpagina: voorbehoud onder de tabbladen (24-10-2026 (avond)) */
.pg-info-noot{margin:18px 0 0;padding-top:12px;border-top:1px solid var(--line,#D9DEE8);font-size:.8125rem;line-height:1.5;color:var(--ink-soft,#5b6573)}
/* tabblad Kenmerken (TDS Management, 26-10-2026) */
.vdv-kenmerken-lijst{margin:0;display:grid;gap:0}
.vdv-kenmerken-lijst div{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--line,#EEF1F6)}
.vdv-kenmerken-lijst dt{margin:0;font-weight:600;color:var(--ink-soft,#5b6573)}
.vdv-kenmerken-lijst dd{margin:0}
.vdv-kenmerken-bron{margin:10px 0 0;font-size:.8125rem;color:var(--ink-soft,#5b6573)}
@media (max-width:600px){.vdv-kenmerken-lijst div{grid-template-columns:1fr;gap:2px}}
/* wolkje Sikkens Zuidwest: contactlinks in de tekst (26-10-2026) */
.szw-wolk p a{color:#fff;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
/* wolkje: kop op eigen regel, tekst breder (26-10-2026) */
.szw-wolk p b{display:block;margin:0 0 4px;font-size:1.0625rem;color:#fff}
.szw-wolk .szw-knop{background:#AFCB08;color:#2E1450}
/* hero-kerngetal met icoon (26-10-2026) */
.pg-cijfers dd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pg-cijfer-ico{width:1em;height:1em;flex:none;stroke:currentColor}
/* hero 26-10-2026 (voorbeeld Jay-Jay): intro groot en vet in lichtblauw, kleine regel eronder, stempel 'Sinds 1924' */
.pg-hero-tekst .pg-intro{font-size:clamp(1.25rem,2vw,1.625rem);font-weight:700;line-height:1.3;color:#7FC4F0;max-width:28ch;font-family:var(--font-kop)}
.pg-hero-noot{margin:-6px 0 0;font-size:.9375rem;line-height:1.5;color:rgba(255,255,255,.75);max-width:48ch}
.pg-cijfers-een{grid-template-columns:auto}
.pg-stempel{display:flex !important;flex-direction:row !important;align-items:center;gap:14px;color:var(--gold,#CBA562)}
.pg-stempel dd{margin:0;line-height:0}.pg-stempel svg{display:block;font-family:var(--font-kop)}
.pg-stempel-tekst{margin:0;font-size:.9375rem;color:rgba(255,255,255,.8)}
/* hero: beeldmerk 'Sinds 1924' rechts naast kop en intro; kerngetallen weg (26-10-2026) */
.pg-hero-kopregel{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.pg-hero-kopteksten{display:grid;gap:var(--s4,16px);min-width:0}
/* beeldmerk 'Sinds 1924': vast rechtsboven in het blauwe vlak, op de hoogte van de kop, buiten de tekststroom (26-10-2026) */
.pg-hero-tekst{position:relative}
.pg-hero-sinds{position:absolute;top:var(--s6,40px);right:var(--s5,32px);width:58px;height:auto}
@media(min-width:900px){.pg-hero-sinds{top:var(--s7,56px);right:var(--s7,56px);width:64px}}
.pg-hero-kopteksten{padding-right:76px}
@media(min-width:1200px){.pg-hero-kopteksten{padding-right:0}}
@media (max-width:600px){.pg-hero-sinds{width:56px}}
/* voet: beeldmerk 'Sinds 1924' rechtsonder (26-10-2026) */
@media(min-width:900px){.foot .foot-top{grid-template-columns:1.4fr 1fr 1fr 1fr auto}}   /* specifieker dan vdv-concept.css (laadt later) */
@media(min-width:900px){.foot .foot-top.foot-top-info{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr auto;gap:var(--s6)}}   /* 27-10-2026: kolom informatiepagina's */
.foot-sinds{display:block;width:64px;height:auto;margin-top:2px}
/* promotietegels met merklogo's (26-10-2026) */
.pg-pt-logos .pg-pt-achter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pg-pt-logos::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,20,50,.15),rgba(0,20,50,.75))}
.pg-logo-rij{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pg-logo-rij a{display:grid;place-items:center;height:64px;padding:8px 10px;border-radius:8px;background:#fff;color:var(--navy-2,#003E82);font-weight:700;text-decoration:none;font-size:.8125rem;text-align:center;transition:transform .15s}
.pg-logo-rij a:hover{transform:translateY(-2px)}
.pg-logo-rij img{max-width:100%;max-height:44px;object-fit:contain}
@media(max-width:600px){.pg-logo-rij{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pg-pt-logos-klein{display:flex;align-items:center;gap:14px;margin-bottom:auto;min-height:56px}
.pg-pt-logos-klein img{max-height:44px;max-width:120px;object-fit:contain}
.pg-pt-logos-klein i{width:1px;align-self:stretch;background:var(--line,#d9dee8)}
/* contactpagina (26-10-2026) */
.pg-contact-intro{margin:8px 0 0;max-width:60ch;color:var(--ink-soft,#5b6573)}
.pg-contact-grid{display:grid;gap:24px;margin:24px 0 48px}
@media(min-width:900px){.pg-contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;align-items:start}}
.pg-contact-info{padding:24px;border-radius:10px;background:var(--navy,#002D62);color:#fff}
.pg-contact-info h2{margin:0 0 8px;font-size:1.25rem;color:#fff}
.pg-contact-info address{font-style:normal;line-height:1.6;color:rgba(255,255,255,.85)}
.pg-contact-info ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.pg-contact-info li{display:flex;gap:10px;align-items:center}.pg-contact-info .ico{color:var(--gold,#CBA562);width:20px;height:20px}
.pg-contact-info a{color:#fff;text-decoration:none}.pg-contact-info a:hover{text-decoration:underline}
.pg-contact-noot{margin:20px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.2);font-size:.9375rem;color:rgba(255,255,255,.8)}
.pg-contact-formulier{padding:24px;border:1px solid var(--line,#d9dee8);border-radius:10px;background:#fff}
.pg-contact-velden{display:grid;gap:16px}
@media(min-width:700px){.pg-contact-velden{grid-template-columns:1fr 1fr}.pg-veld-breed{grid-column:1/-1}}
.pg-contact-velden .pg-veld{display:grid;gap:6px;font-weight:600;font-size:.9375rem;color:var(--navy-2,#003E82)}
.pg-contact-velden .pg-veld i{color:#b3261e;font-style:normal}.pg-contact-velden small{font-weight:400;color:var(--ink-soft,#5b6573)}
.pg-contact-velden .invoer{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--line-2,#c9d0dc);border-radius:6px;font:inherit;font-weight:400;color:var(--ink,#1b2430);background:#fff}
.pg-contact-velden textarea.invoer{min-height:160px;resize:vertical}
.pg-contact-velden .invoer:focus{outline:2px solid var(--navy,#002D62);outline-offset:1px}
.pg-contact-privacy{margin:16px 0;font-size:.875rem;color:var(--ink-soft,#5b6573)}
.pg-contact-formulier .melding{display:flex;gap:10px;margin:0 0 16px}
/* beleidspagina's (privacyverklaring, algemene voorwaarden): rustige opmaak met tabellen en kaders (26-10-2026) */
.shopify-policy__container{max-width:900px !important;margin:40px auto 64px !important;padding:0 16px}
.shopify-policy__title h1{font-family:var(--font-kop);color:var(--navy-2,#003E82);font-size:clamp(1.75rem,3.4vw,2.5rem);margin:0 0 24px;text-align:left}
.shopify-policy__body{color:var(--ink,#1b2430);line-height:1.65;font-size:1rem}
.shopify-policy__body h2{font-family:var(--font-kop);color:var(--navy-2,#003E82);font-size:1.375rem;margin:40px 0 14px;padding-bottom:8px;border-bottom:2px solid var(--navy-2,#003E82)}
.shopify-policy__body p{margin:0 0 14px}
.shopify-policy__body a{color:var(--navy-2,#003E82);text-decoration:underline;text-underline-offset:2px}
.shopify-policy__body blockquote{margin:0 0 14px;padding:16px 20px;border-left:4px solid var(--navy-2,#003E82);border-radius:0 10px 10px 0;background:#EEF3FA}
.shopify-policy__body blockquote p:last-child{margin:0}
.shopify-policy__body table{width:100%;border-collapse:separate;border-spacing:0;margin:0 0 18px;border:1px solid var(--line,#d9dee8);border-radius:10px;overflow:hidden;font-size:.9375rem}
.shopify-policy__body th{background:var(--navy,#002D62);color:#fff;text-align:left;padding:12px 16px;font-weight:700}
.shopify-policy__body td{padding:12px 16px;border-top:1px solid var(--line,#EEF1F6);vertical-align:top}
.shopify-policy__body tr:nth-child(even) td{background:#F7F9FC}
.shopify-policy__body td:first-child{width:32%;color:var(--navy-2,#003E82)}
@media(max-width:600px){.shopify-policy__body td:first-child{width:auto}.shopify-policy__body table,.shopify-policy__body tbody,.shopify-policy__body tr,.shopify-policy__body td{display:block}.shopify-policy__body thead{display:none}}
.vdv-download{display:inline-flex;align-items:center;gap:8px}
/* servicestrook i.p.v. vier vinkjes (26-10-2026) */
.pg-usp.pg-usp-strook{background:#F3F5F9;border-bottom:1px solid var(--line,#d9dee8)}
.pg-usp-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;padding-block:6px}
.pg-usp-beloften{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:.875rem;font-weight:600;color:var(--navy-2,#003E82)}
.pg-usp-beloften span+span::before{content:"";display:inline-block;width:5px;height:5px;margin:0 12px 2px;border-radius:50%;background:var(--gold,#CBA562);vertical-align:middle}
.pg-usp-hulp{margin:0;display:flex;align-items:center;gap:6px;font-size:.875rem;color:var(--ink-soft,#5b6573);white-space:nowrap}
.pg-usp-hulp a{color:var(--navy-2,#003E82);font-weight:700;text-decoration:none}.pg-usp-hulp a:hover{text-decoration:underline}
.pg-usp-hulp .ico{width:16px;height:16px;color:var(--gold-ink,#8a6d2b)}
@media(max-width:899px){.pg-usp-hulp{display:none}.pg-usp-beloften{justify-content:center;font-size:.8125rem}}
/* linker- en rechterrand gelijk: eerste menu-item op de lijn van het logo, winkelwagen op de rechterlijn */
@media(min-width:900px){
  .head-nav .nav > ul > li:first-child > .mega-knop,.head-nav .nav > ul > li:first-child > a{padding-left:0}
  .head-bar .head-actions .icon-btn:last-child{padding-right:0}
}
/* zoekveld in het midden van de pagina, logo links en account/winkelwagen rechts */
@media(min-width:1100px){
  .head-bar .head-row{grid-template-columns:1fr minmax(320px,560px) 1fr}
  .head-bar .head-row .logo{justify-self:start}
}
/* intro in de hero: leesletter, normaal gewicht, iets groter (de kop blijft in de kopletter) */
.pg-hero .pg-hero-tekst .pg-intro,.pg-hero-tekst p.pg-intro{font-family:var(--font);font-weight:400;font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.55;color:rgba(255,255,255,.9);max-width:40ch;letter-spacing:0}


/* ================================================================================================================
   KOPBALK v4 (26-10-2026, Jay-Jay: 'laat je eigen creativiteit los, het moet de meest professionele layout hebben')
   Drie lagen met elk een eigen taak, rustig en strak uitgelijnd op dezelfde linker- en rechterlijn:
   1. dienstbalk (donkerst): beloften links, telefoon/contact/taal rechts  (vervangt de aparte servicebalk)
   2. merkbalk (navy): logo, wit zoekveld in het midden, account en winkelwagen
   3. menubalk (wit): categorieen in navy, gouden onderstreping bij aanwijzen; Acties goud blok, Snel bestellen navy blok
   Beweging: alleen de onderstreping (transform, 180 ms, sterke ease-out), alleen bij een echte muis.
   ================================================================================================================ */
:root{--kop-ease:cubic-bezier(.23,1,.32,1)}

/* 1. dienstbalk */
.topbar{background:#001A3D;color:rgba(255,255,255,.78);font-size:.8125rem}
.topbar .wrap{min-height:36px;gap:24px}
.topbar .topbar-beloften{gap:0;min-width:0}
.topbar .topbar-beloften li{white-space:nowrap}
@media(min-width:900px){.topbar .topbar-beloften li+li::before{content:"";display:inline-block;width:4px;height:4px;margin:0 14px;border-radius:50%;background:var(--gold,#CBA562);opacity:.9}}
.topbar-rechts{display:flex;align-items:center;gap:18px;flex:none}
.topbar-rechts a{color:#fff;font-weight:600;text-decoration:none;white-space:nowrap}
.topbar-rechts .ico{width:14px;height:14px;color:var(--gold,#CBA562)}
@media(min-width:900px){.topbar-rechts a.alleen-desktop{display:inline-flex !important;align-items:center;gap:7px}}
@media(max-width:1519px){.topbar .topbar-beloften li.topbar-extra{display:none !important}}
@media(hover:hover) and (pointer:fine){.topbar-rechts a:hover{color:var(--gold-2,#D9B877)}}

/* 2. merkbalk */
@media(min-width:900px){
  .head-bar .head-row{min-height:84px}
  .head-actions .icon-btn:last-child{padding-right:0}
  .head-actions .icon-btn .lbl{white-space:nowrap}
}
@media(min-width:1100px){
  .head-bar .head-row{grid-template-columns:1fr minmax(360px,560px) 1fr}
  .head-bar .head-row .logo{justify-self:start}
}
.head-bar .head-search{background:#fff;border:1px solid #fff;border-radius:6px;box-shadow:0 1px 2px rgba(0,10,30,.25);overflow:hidden}
.head-bar .head-search:focus-within{border-color:var(--gold,#CBA562);box-shadow:0 0 0 3px rgba(203,165,98,.35)}
.head-bar .head-search input{color:var(--ink,#1A2230);height:46px;font-size:1rem}
.head-bar .head-search input::placeholder{color:#6B7482}
.head-bar .head-search .kbd{color:#6B7482;border-color:#C9D0DA;background:#F4F6F9}
.head-bar .head-search button{background:var(--gold,#CBA562);color:var(--navy,#002D62);border-left:0;padding:0 18px;transition:background-color .15s ease}
.head-bar .head-search button .ico{width:20px;height:20px}
@media(hover:hover) and (pointer:fine){.head-bar .head-search button:hover{background:var(--gold-2,#D9B877);color:var(--navy,#002D62)}}

/* 3. menubalk */
@media(min-width:900px){
  .site-head .head-nav{background:#fff;border-bottom:1px solid #DCE2EA;box-shadow:0 2px 6px -4px rgba(0,26,61,.18)}
  .head-nav .nav ul{gap:0;align-items:stretch}
  .head-nav .mega-knop,.head-nav .nav > ul > li > a{position:relative;height:52px;padding:0 14px;border-bottom:0;
    font-family:var(--font-kop);font-weight:700;font-size:.9375rem;letter-spacing:0;color:var(--navy,#002D62);background:none}
  .head-nav .nav > ul > li:first-child > .mega-knop,.head-nav .nav > ul > li:first-child > a{padding-left:0}
  /* gouden onderstreping onder de tekst, groeit vanaf links */
  .head-nav .mega-knop::after,.head-nav .nav > ul > li > a::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;
    background:var(--gold,#CBA562);transform:scaleX(0);transform-origin:left;transition:transform 180ms var(--kop-ease)}
  .head-nav .nav > ul > li:first-child > .mega-knop::after,.head-nav .nav > ul > li:first-child > a::after{left:0}
  .head-nav .mega-knop[aria-expanded="true"]::after{transform:scaleX(1)}
  .head-nav .mega-knop[aria-expanded="true"]{color:var(--navy-2,#003E82)}
  /* Acties en Snel bestellen: recht blok over de volle hoogte van de balk */
  .head-nav .mega-knop.mega-knop-actie,.head-nav .nav .nav-quick a{height:52px;margin:0 0 0 10px;padding:0 22px;border:0;border-radius:0;font-weight:700}
  .head-nav .mega-knop.mega-knop-actie{background:var(--gold,#CBA562);color:var(--navy,#002D62)}
  .head-nav .mega-knop.mega-knop-actie[aria-expanded="true"]{background:var(--gold-2,#D9B877);color:var(--navy,#002D62)}
  .head-nav .nav .nav-quick a{background:var(--navy,#002D62);color:#fff;gap:9px}
  .head-nav .nav .nav-quick a .ico{width:18px;height:18px;color:var(--gold,#CBA562)}
  .head-nav .mega-knop.mega-knop-actie::after,.head-nav .nav .nav-quick a::after{content:none}
  .head-nav .mega-knop.mega-knop-actie,.head-nav .nav .nav-quick a{transition:background-color .15s ease}
}
@media(min-width:900px) and (hover:hover) and (pointer:fine){
  .head-nav .mega-knop:hover,.head-nav .nav > ul > li > a:hover{color:var(--navy-2,#003E82)}
  .head-nav .mega-knop:hover::after,.head-nav .nav > ul > li > a:hover::after{transform:scaleX(1)}
  .head-nav .mega-knop.mega-knop-actie:hover{background:var(--gold-2,#D9B877);color:var(--navy,#002D62)}
  .head-nav .nav .nav-quick a:hover{background:var(--navy-2,#003E82);color:#fff}
}
@media(min-width:900px) and (max-width:1279px){
  .head-nav .mega-knop,.head-nav .nav > ul > li > a{padding:0 10px;font-size:.875rem}
  .head-nav .mega-knop::after,.head-nav .nav > ul > li > a::after{left:10px;right:10px}
}
@media(prefers-reduced-motion:reduce){.head-nav .mega-knop::after,.head-nav .nav > ul > li > a::after{transition:none}}

/* ================================================================================================================
   HERO v2 (26-10-2026, Jay-Jay: 'pak dit helemaal opnieuw aan'; de kop bleef goed)
   Twee gelijke helften: links het blauwe vlak met veel lucht, rechts de foto die zacht in het blauw overloopt.
   Kop in de kopletter vet (ongewijzigd), intro in dezelfde letterfamilie maar normaal gewicht, knoppen, daaronder
   een rustige noot met een dunne lijn erboven. Beweging alleen bij binnenkomst (een keer per bezoek aan de pagina).
   ================================================================================================================ */
.pg-hero .pg-hero-blok{border-radius:var(--r,3px);background:radial-gradient(120% 90% at 0% 0%,#003674 0%,#002D62 55%);box-shadow:0 18px 40px -24px rgba(0,26,61,.55)}
.pg-hero .pg-hero-tekst{gap:0;padding:36px 24px 32px}
.pg-hero .pg-hero-kopteksten{padding-right:0;gap:0}
.pg-hero .pg-hero-tekst h1{font-family:var(--font-kop);font-weight:700;font-size:clamp(2rem,3.4vw,3.25rem);line-height:1.06;letter-spacing:-.01em;max-width:none;margin:0}
.pg-hero .pg-hero-tekst .pg-intro{font-family:var(--font-kop);font-weight:400;font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.6;color:rgba(255,255,255,.86);max-width:42ch;margin:20px 0 0}
.pg-hero .pg-hero-knoppen{margin-top:32px;gap:12px}
.pg-hero .pg-hero-knoppen .btn{min-height:52px;padding:0 26px;font-size:1rem}
.pg-hero .pg-hero-knoppen .btn-ghost{border-color:rgba(255,255,255,.4)}
.pg-hero .pg-hero-noot{margin:32px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);max-width:46ch;font-size:.9375rem;line-height:1.55;color:rgba(255,255,255,.7)}
.pg-hero .pg-hero-noot a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:rgba(203,165,98,.8);text-underline-offset:3px;white-space:nowrap}
.pg-hero .pg-hero-foto{background:#002D62}
.pg-hero .pg-hero-foto img{object-position:50% 55%}
/* foto loopt zacht over in het blauw (mobiel: naar onderen, breed scherm: naar links) */
.pg-hero .pg-hero-foto::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,45,98,0) 55%,rgba(0,45,98,1) 100%)}
@media(min-width:900px){
  .pg-hero .pg-hero-blok{grid-template-columns:minmax(0,11fr) minmax(0,10fr);min-height:540px}
  .pg-hero .pg-hero-tekst{padding:64px 48px 56px 64px}
  .pg-hero .pg-hero-foto::after{background:linear-gradient(90deg,rgba(0,45,98,1) 0%,rgba(0,45,98,.7) 22%,rgba(0,45,98,.25) 42%,rgba(0,45,98,0) 60%)}
}
@media(min-width:1280px){.pg-hero .pg-hero-tekst{padding:72px 56px 64px 72px}}
/* knoppen voelen het indrukken */
.btn{transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.btn:active{transform:scale(.97)}
/* binnenkomst: tekst schuift kort omhoog in een vlotte reeks, foto zoomt heel licht uit */
@media(prefers-reduced-motion:no-preference){
  .pg-hero .pg-hero-tekst h1,.pg-hero .pg-hero-tekst .pg-intro,.pg-hero .pg-hero-knoppen,.pg-hero .pg-hero-noot{animation:hero-in .5s cubic-bezier(.23,1,.32,1) both}
  .pg-hero .pg-hero-tekst .pg-intro{animation-delay:.06s}
  .pg-hero .pg-hero-knoppen{animation-delay:.12s}
  .pg-hero .pg-hero-noot{animation-delay:.18s}
  .pg-hero .pg-hero-foto img{animation:hero-foto 1.2s cubic-bezier(.23,1,.32,1) both}
}
@keyframes hero-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes hero-foto{from{transform:scale(1.04)}to{transform:none}}
/* kopbalk: account en winkelwagen nooit over twee regels */
.head-actions .icon-btn,.head-actions .icon-btn .lbl{white-space:nowrap}
@media(max-width:599px){.pg-hero .pg-hero-knoppen .btn{width:100%}}
/* 26-10-2026 (Jay-Jay): geen '/'-sneltoetshint in het zoekveld (klanten kennen die niet); geen lijn tussen merkbalk en
   menubalk, zodat het blauwe blok Snel bestellen naadloos aansluit */
.head-bar .head-search .kbd{display:none !important}
@media(min-width:900px){.site-head .head-bar{border-bottom:0}}
/* hero v2.1 (26-10-2026, Jay-Jay: 'gesplitst zoals eerst'): een afgerond vlak, links het blauwe tekstdeel en rechts de
   foto, strak naast elkaar zonder overloop (de rest van v2 blijft) */
.pg-hero .pg-hero-foto::after{content:none}

/* LETTERTYPE KOPBALK (26-10-2026, akkoord Jay-Jay): Plus Jakarta Sans, zelf gehost in het thema (geen Google, AVG),
   licentie SIL OFL 1.1, bron @fontsource-variable/plus-jakarta-sans 5.2.8 (latin, variabel gewicht 200-800) */
@font-face{font-family:"VDV Jakarta";src:url("vdv-jakarta.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--font-ui:"VDV Jakarta",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.site-head,.site-head button,.site-head input{font-family:var(--font-ui)}
.topbar{font-size:.8125rem;font-weight:500;letter-spacing:0;word-spacing:.06em}
.topbar-rechts a{font-weight:700}
.site-head .icon-btn .lbl{font-family:var(--font-ui);font-weight:700;font-size:.9375rem;letter-spacing:-.005em}
.head-bar .head-search input{font-family:var(--font-ui);font-weight:500;font-size:.9688rem}
@media(min-width:900px){
  .head-nav .mega-knop,.head-nav .nav > ul > li > a{font-family:var(--font-ui);font-weight:700;font-size:.9375rem;letter-spacing:-.005em}
}
.lang button{font-family:var(--font-ui)}
/* 26-10-2026 (Jay-Jay, vergeleken met concept_v2): merkbalk hoger, logo en zoekveld met meer lucht, zoals in het concept.
   De vierde belofte in de dienstbalk past met het nieuwe lettertype nergens naast telefoon en contact (de inhoud is max.
   1280 px breed), dus die vervalt; de tekst blijft als instelling bestaan. */
@media(min-width:900px){.site-head .head-bar .head-row{min-height:104px;padding-block:8px}}
.topbar .topbar-beloften li.topbar-extra{display:none !important}
/* merkbalk nog iets groter (Jay-Jay 26-10-2026): hoger en het logo mee in verhouding */
@media(min-width:900px){
  .site-head .head-bar .head-row{min-height:120px;padding-block:10px}
  .site-head .head-bar .logo{width:236px}
}
/* zoekveld breder en iets hoger (akkoord Jay-Jay 26-10-2026): het belangrijkste gereedschap in de merkbalk */
@media(min-width:1100px){.site-head .head-bar .head-row{grid-template-columns:1fr minmax(360px,640px) 1fr}}
@media(min-width:900px){.site-head .head-bar .head-search input{height:50px;font-size:1rem}.site-head .head-bar .head-search button{padding:0 20px}}
/* zoekveld blijft wit tijdens typen (concept-stijl maakte het bij focus doorzichtig donker) en het zoekvak op de
   zoekpagina krijgt een lichte opmaak (het erfde de witte tekst voor de donkere kopbalk) - 26-10-2026 */
.site-head .head-bar .head-search:focus-within{background:#fff}
.site-head .head-bar .head-search input{background:#fff;color:var(--ink,#1A2230)}
.pg-zoekvak.search{background:#fff;border:1px solid var(--line-2,#C9D0DA);border-radius:var(--r,3px)}
.pg-zoekvak.search:focus-within{background:#fff;border-color:var(--navy-2,#003E82);box-shadow:0 0 0 3px rgba(0,62,130,.15)}
.pg-zoekvak.search input{color:var(--ink,#1A2230);background:#fff}
.pg-zoekvak.search input::placeholder{color:#6B7482}
.pg-zoekvak.search button{background:var(--navy,#002D62);color:#fff;border-left:0}
@media(hover:hover) and (pointer:fine){.pg-zoekvak.search button:hover{background:var(--navy-2,#003E82);color:#fff}}
/* merklogo in wit op een fototegel (Propspeed, 26-10-2026) */
.pg-pt-foto img.pg-pt-logo-wit{position:relative;inset:auto;z-index:1;width:min(190px,60%);height:auto;object-fit:contain;margin:0 0 6px;filter:drop-shadow(0 1px 8px rgba(0,0,0,.35))}
/* eigen merklogo op een wit plaatje op een fototegel (Jay-Jay 26-10-2026: 'het eigen Propspeed-logo') */
.pg-pt-foto .pg-pt-logo-plaat{position:relative;z-index:1;display:inline-flex;align-self:flex-start;align-items:center;padding:10px 14px;margin:0 0 8px;background:#fff;border-radius:var(--r,3px);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.pg-pt-foto .pg-pt-logo-plaat img{position:static;inset:auto;z-index:auto;display:block;width:130px;height:auto;object-fit:contain}

/* WINTERORDER-TEGEL v2 (26-10-2026): tekst links, rechts het boekje of het jaartal groot en omlijnd */
.pg-pt-goud.pg-wo{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:20px;
  background:linear-gradient(135deg,#D6B677 0%,#CBA562 55%,#C29A55 100%);overflow:hidden}
@media(min-width:600px){.pg-pt-goud.pg-wo{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.pg-wo .pg-pt-tekst{max-width:none;gap:0}
.pg-wo .pg-pt-label{justify-self:start;margin:0 0 14px;padding:4px 10px;border-radius:var(--r,3px);background:none;border:1px solid rgba(0,45,98,.45);
  font-family:var(--font-ui,var(--font));font-weight:700;font-size:.8125rem;letter-spacing:.01em;color:var(--navy,#002D62)}
.pg-wo h3{margin:0;font-size:clamp(2rem,3.3vw,2.75rem);line-height:1.05;letter-spacing:-.01em}
.pg-wo:not(.pg-wo-boekje) .pg-wo-jaar-kop{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pg-wo .pg-pt-tekst > p:not(.pg-pt-label){margin:12px 0 0;max-width:34ch;font-size:1rem;line-height:1.55}
.pg-wo-acties{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px}
.pg-wo-acties .btn{margin:0;min-height:48px;padding:0 24px}
.pg-wo-pdf{display:inline-flex;align-items:center;gap:8px;color:var(--navy,#002D62);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,45,98,.35)}
.pg-wo-pdf .ico{width:18px;height:18px}
.pg-wo-beeld{position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
/* zonder boekje: het jaartal als groot, omlijnd beeldmerk dat de kop afmaakt ('Winterorder' + '2026') */
.pg-wo-jaar{font-family:var(--font-kop);font-weight:700;font-size:clamp(4rem,6.6vw,6.75rem);line-height:.9;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:2px var(--navy,#002D62);opacity:.9;user-select:none}
@media(max-width:599px){.pg-wo-jaar{font-size:4.5rem;justify-self:start}.pg-wo-beeld{justify-content:flex-start}}
/* met boekje: de voorkant schuin met schaduw, recht en iets omhoog bij aanwijzen */
.pg-pt-goud.pg-wo .pg-wo-cover img{position:static;inset:auto;display:block;width:min(220px,100%);height:auto;aspect-ratio:auto;margin:0;object-fit:contain;
  border-radius:2px;box-shadow:0 18px 30px -12px rgba(0,26,61,.45),0 4px 10px rgba(0,26,61,.2);transform:rotate(-6deg);
  transition:transform 220ms cubic-bezier(.23,1,.32,1),box-shadow 220ms cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){.pg-wo-cover:hover img{transform:rotate(-2deg) translateY(-6px);box-shadow:0 24px 36px -14px rgba(0,26,61,.5),0 6px 14px rgba(0,26,61,.2)}}
@media(prefers-reduced-motion:reduce){.pg-pt-goud.pg-wo .pg-wo-cover img{transition:none}}
.pg-pt-goud.pg-wo{padding-right:clamp(24px,3vw,44px)}

/* WINTERORDER-TEGEL v3 (26-10-2026, Jay-Jay: 'helemaal opnieuw, nog wat saai'): redactionele opbouw. Links 'Winterorder'
   groot, tekst en knop; rechts het jaartal massief donkerblauw en heel groot, dat onderaan uit de tegel loopt. Met producten
   in de collectie een waaier van productkaartjes, met een boekje de voorkant. Beweging alleen bij aanwijzen met de muis. */
.pg-pt-goud.pg-wo{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:0;padding:0;min-height:360px;
  background:radial-gradient(120% 120% at 0% 0%,#DDBF84 0%,#CBA562 48%,#BE9550 100%)}
@media(min-width:600px){.pg-pt-goud.pg-wo{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.pg-wo .pg-pt-tekst{align-self:center;padding:36px 0 36px clamp(24px,3.2vw,44px);z-index:1}
.pg-wo h3{font-size:clamp(2.25rem,3.6vw,3.1rem);line-height:1;letter-spacing:-.02em;color:var(--navy,#002D62)}
.pg-wo .pg-pt-tekst > p:not(.pg-pt-label){margin:14px 0 0;max-width:36ch;font-size:1.0625rem;color:rgba(0,45,98,.88)}
.pg-wo-acties{margin-top:24px}
.pg-wo-beeld{position:relative;align-self:stretch;justify-content:flex-end;align-items:flex-end;overflow:hidden;min-height:150px}
/* het jaartal: massief, groot, loopt onder en rechts net uit de tegel */
.pg-wo-jaar{display:block;color:var(--navy,#002D62);-webkit-text-stroke:0;opacity:1;font-size:clamp(6.5rem,11.5vw,11rem);line-height:.74;
  letter-spacing:-.06em;margin:0 clamp(18px,2.2vw,32px) -.07em 0;transform:translateY(0);transition:transform 260ms cubic-bezier(.23,1,.32,1)}
@media(max-width:599px){.pg-wo-jaar{font-size:6.5rem}.pg-wo-beeld{justify-content:flex-end}}
@media(hover:hover) and (pointer:fine){.pg-wo:hover .pg-wo-jaar{transform:translateY(-6px)}}
/* waaier van productkaartjes */
.pg-wo-waaier{position:relative;display:block;width:100%;height:100%;min-height:240px}
.pg-wo-waaier span{position:absolute;bottom:28px;width:48%;aspect-ratio:1;background:#fff;border-radius:var(--r,3px);padding:10px;
  box-shadow:0 16px 28px -14px rgba(0,26,61,.45);transition:transform 240ms cubic-bezier(.23,1,.32,1)}
.pg-wo-waaier span:nth-child(1){right:44%;transform:rotate(-9deg)}
.pg-wo-waaier span:nth-child(2){right:24%;bottom:44px;transform:rotate(-1deg);z-index:2}
.pg-wo-waaier span:nth-child(3){right:4%;transform:rotate(8deg)}
.pg-pt-goud.pg-wo .pg-wo-waaier img{position:static;inset:auto;display:block;width:100%;height:100%;aspect-ratio:auto;margin:0;object-fit:contain;border-radius:0}
@media(hover:hover) and (pointer:fine){
  .pg-wo-waaier:hover span:nth-child(1){transform:rotate(-12deg) translateX(-6px)}
  .pg-wo-waaier:hover span:nth-child(2){transform:rotate(-1deg) translateY(-6px)}
  .pg-wo-waaier:hover span:nth-child(3){transform:rotate(11deg) translateX(6px)}
}
/* boekje: midden-rechts in de tegel */
.pg-wo-boekje .pg-wo-beeld{align-items:center;justify-content:center;padding:24px}
@media(prefers-reduced-motion:reduce){.pg-wo-jaar,.pg-wo-waaier span{transition:none}}
/* jaartal los van de kolommen: rechtsonder in de tegel, schaalt mee zodat het nooit tegen tekst of knop komt */
.pg-pt-goud.pg-wo:not(.pg-wo-boekje) .pg-wo-jaar{position:absolute;right:clamp(18px,2.2vw,32px);bottom:-.07em;margin:0;font-size:clamp(5rem,8.2vw,9.5rem);z-index:0;pointer-events:none}
@media(max-width:1199px){.pg-pt-goud.pg-wo:not(.pg-wo-boekje) .pg-wo-jaar{font-size:clamp(4.5rem,7vw,7rem)}}
@media(max-width:599px){.pg-pt-goud.pg-wo:not(.pg-wo-boekje){min-height:300px}.pg-pt-goud.pg-wo:not(.pg-wo-boekje) .pg-wo-jaar{font-size:5.5rem}.pg-wo:not(.pg-wo-boekje) .pg-pt-tekst{padding-bottom:96px}}
.pg-pt-goud.pg-wo:not(.pg-wo-boekje) .pg-wo-beeld{position:static;min-height:0}
/* waaier van eigen foto's in de winterordertegel: staande kaartjes, foto vult het kaartje */
.pg-wo-fotos span{width:44%;aspect-ratio:4/5;padding:6px}
.pg-pt-goud.pg-wo .pg-wo-fotos img{object-fit:cover}
.pg-wo-fotos span:nth-child(1){right:46%}
.pg-wo-fotos span:nth-child(2){right:26%;bottom:40px}
.pg-wo-fotos span:nth-child(3){right:5%}
.pg-wo-fotos span{width:50%}
.pg-wo-fotos span:nth-child(1){right:42%;bottom:34px}
.pg-wo-fotos span:nth-child(2){right:22%;bottom:52px}
.pg-wo-fotos span:nth-child(3){right:2%;bottom:34px}

/* LETTERTYPE OVERAL (26-10-2026, Jay-Jay: 'doe alles maar'): Plus Jakarta Sans voor tekst EN koppen, zodat de hele site
   een familie is en elke klant (Windows, Mac, telefoon) hetzelfde ziet. html:root wint van de :root in vdv-concept.css. */
html:root{--font:"VDV Jakarta",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--font-kop:"VDV Jakarta",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--font-ui:"VDV Jakarta",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body,button,input,select,textarea{font-family:var(--font)}
h1,h2,h3,h4,.h-display,.h-section,.h-sub,.h-klein{font-family:var(--font-kop);font-weight:800;letter-spacing:-.02em}
.btn{font-family:var(--font);font-weight:700}
.pg-hero .pg-hero-tekst h1{font-weight:800;letter-spacing:-.025em}
.pg-hero .pg-hero-tekst .pg-intro{font-family:var(--font);font-weight:400}
.pg-hero .pg-hero-tekst h1{max-width:none;text-wrap:balance}
h1,h2,h3,h4{word-spacing:.04em}
body{word-spacing:.02em}
/* lichte tegel met een foto bovenin (Propspeed, 26-10-2026) */
.pg-pt-zand .pg-pt-fotokop{display:block;margin:calc(-1 * var(--s5,24px)) calc(-1 * var(--s5,24px)) 6px;aspect-ratio:16/9;overflow:hidden}
.pg-pt-zand .pg-pt-fotokop img{position:static;display:block;width:100%;height:100%;object-fit:cover;object-position:40% 72%;transition:transform .6s cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){.pg-pt-zand:hover .pg-pt-fotokop img{transform:scale(1.04)}}
/* fototegel met de tekst bovenin, zodat het onderwerp onderaan zichtbaar blijft (Propspeed-doos, 26-10-2026) */
.pg-pt-foto.pg-pt-foto-boven{justify-content:flex-start}
.pg-pt-foto.pg-pt-foto-boven::before{background:linear-gradient(0deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.78) 100%)}
.pg-pt-foto.pg-pt-foto-boven img{object-position:30% 88%}

/* OVERNAME UIT ONTWERP V3 (26-10-2026, Jay-Jay: 'deze kleurcombo vond ik wel nice', 'die nieuwe winterorder kaft en dat die beweegt',
   'die barcode links in snel bestellen', 'geen witte rand om de zoekbalk') */
/* winterordertegel: licht zand met donkerblauw, kaft schuin rechts; recht en iets omhoog bij aanwijzen van de tegel */
.pg-pt-goud.pg-wo{background:#D9BC78}   /* 26-10-2026 Jay-Jay: weer goud, maar lichter dan #CBA562 */
.pg-pt-goud.pg-wo h3,.pg-pt-goud.pg-wo .pg-wo-jaar-kop{color:var(--navy,#002D62)}
.pg-pt-goud.pg-wo .pg-pt-tekst > p:not(.pg-pt-label){color:#4C5970}
.pg-pt-goud.pg-wo .pg-wo-cover{display:block;position:relative;isolation:isolate}
/* zachte lichtgloed achter de kaft (Jay-Jay 26-10-2026) */
.pg-pt-goud.pg-wo .pg-wo-cover::before{content:"";position:absolute;left:-14%;right:-14%;top:-16%;bottom:-16%;background:radial-gradient(closest-side,rgba(255,248,226,.85),rgba(255,248,226,.35) 55%,rgba(255,248,226,0));z-index:0;pointer-events:none}
.pg-pt-goud.pg-wo .pg-wo-cover img{position:relative;z-index:1}
.pg-pt-goud.pg-wo .pg-wo-cover img{width:min(210px,100%);border-radius:3px;transform:rotate(3deg);
  box-shadow:0 2px 4px rgba(0,0,0,.12),0 24px 40px -14px rgba(0,33,74,.45);
  transition:transform 500ms cubic-bezier(.16,1,.3,1),opacity 500ms ease;will-change:transform}   /* 26-10-2026: geen schaduw-overgang meer (herschildert elk frame), alleen transform/opacity op de GPU */
@media(hover:hover) and (pointer:fine){
  .pg-pt-goud.pg-wo:hover .pg-wo-cover img,.pg-wo-cover:hover img{transform:rotate(0) translateY(-4px)}
}
/* binnenkomst: de kaft draait één keer in zijn schuine stand als de tegel in beeld komt */
@media(prefers-reduced-motion:no-preference){
  .js .pg-wo[data-groep]:not(.is-in) .pg-wo-cover img{opacity:0;transform:translateY(24px) rotate(9deg)}
}
/* snel bestellen: barcode links in het veld */
.quick-row .q-art-veld{grid-area:art;position:relative;display:block;min-width:0}
.quick-row .q-art-veld .ico{position:absolute;left:14px;top:50%;width:20px;height:20px;margin-top:-10px;color:#6B7488;pointer-events:none}
.quick-row .q-art-veld .q-art{padding-left:44px}
.quick-row .q-art.is-typend::placeholder{color:var(--ink,#1A2230);font-weight:600;letter-spacing:.01em}
/* gasten: voorbeeld van het veld boven de inlogknop */
.quick-voorbeeld{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;margin:0 0 16px;border:1.5px solid #C9CED9;border-radius:var(--r,3px);background:#fff;
  font-size:1.0625rem;color:#6B7488}
.quick-voorbeeld .ico{width:20px;height:20px;flex:none}
.quick-voorbeeld .is-typend{color:var(--ink,#1A2230);font-weight:600;letter-spacing:.01em}
.quick-voorbeeld .is-typend::after{content:"";display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-.15em;background:var(--navy,#002D62);animation:vdv-cursor 1s steps(1) infinite}
@keyframes vdv-cursor{50%{opacity:0}}
/* zoekbalk in de kop: geen witte rand om de gouden knop */
.site-head .head-bar .head-search{border:0;box-shadow:none}
.site-head .head-bar .head-search:focus-within{border:0;box-shadow:0 0 0 3px rgba(203,165,98,.55)}
.site-head .head-bar .head-search button{margin:0;border:0}
/* Propspeed-tegel: blikken en verfbakken onderaan in beeld */
.pg-pt-foto.pg-pt-foto-boven img{object-position:50% 100%}
/* winkelwagen 26-10-2026: rustiger, geen zijwaartse balk */
.pg-wagen td[data-label="Artikel"]{min-width:0;width:auto}
.pg-wagen .pg-naam{display:block;line-height:1.3}
.pg-wagen .pg-sub{font-size:.8125rem;color:var(--ink-soft,#5b6573);margin-top:2px}
.pg-wagen .btn-weg{color:#b3261e}

/* 27-10-2026 (Jay-Jay): meer ruimte tussen de tekst en de knop Klant login */
.quick-login .btn{margin-top:20px}
/* topbalk-overloop 27-10-2026 */
/* Jay-Jay 27-10-2026: bij smallere schermen liep de topbalk over het telefoonnummer. De beloften worden nooit over
   de rechterkant heen getekend (afknippen i.p.v. overlappen) en onder 1140px vervalt de eerste belofte. */
.topbar .topbar-beloften{overflow:hidden;flex:1 1 auto}
@media(max-width:1139px){.topbar .topbar-beloften li:first-child{display:none !important}.topbar .topbar-beloften li:nth-child(2)::before{display:none}}
/* voet 27-10-2026 (Jay-Jay): webshop en informatiepagina's dezelfde voet; sociale media rustig, in de lijn van de voet */
.foot .foot-sociaal{display:flex;gap:8px;margin-top:var(--s4,16px)}
.foot .foot-sociaal a{width:34px;height:34px;border:1px solid rgba(255,255,255,.28);border-radius:6px;display:grid;place-items:center;color:#fff}
.foot .foot-sociaal svg{width:16px;height:16px}
@media(hover:hover) and (pointer:fine){.foot .foot-sociaal a:hover{border-color:var(--gold,#CBA562);color:var(--gold,#CBA562)}}
.foot address{line-height:1.7}

/* voet ronde 2, 27-10-2026 (Jay-Jay: uitlijning met het linkerblok): linkerblok zo breed als zijn inhoud, vaste afstand,
   drie gelijke kolommen, Sinds 1924 rechts */
@media(min-width:900px){.foot .foot-top{grid-template-columns:auto repeat(3,minmax(0,1fr)) auto;column-gap:clamp(40px,5vw,96px)}}

/* voet ronde 3, 27-10-2026 (Jay-Jay: logo omhoog, tekst strak uitgelijnd): de adresregels staan op dezelfde hoogte en met
   dezelfde regelafstand als de regels van Contact/Bestellen/Informatie; het logo schuift daarvoor boven de koppen uit */
@media(min-width:900px){.foot .foot-top>div:first-child .logo{margin-top:-43px}.foot .foot-top address{line-height:31.25px}}

/* voet ronde 5, 27-10-2026 (Jay-Jay: koppen op de hoogte van 'Van Dongen Verf B.V.'): logo weer bovenaan, de kolommen
   Contact/Bestellen/Informatie zakken tot hun kop naast de bedrijfsnaam staat; Sinds 1924 blijft bovenaan */
@media(min-width:900px){.foot .foot-top>div:first-child .logo{margin-top:0}.foot .foot-top>div:not(:first-child):not(.foot-sinds-kolom){padding-top:var(--vdv-voet-kolom,76px)}}
@media(min-width:900px){.foot .foot-top h2{margin-bottom:10.25px}}   /* ronde 5b: regels exact op de adresregels (31,25 px) */
/* voet ronde 6, 27-10-2026 (Jay-Jay: bovenste donkerblauwe rand kleiner, Sinds 1924 uitlijnen): bovenrand 64 -> 32 px; het beeldmerk
   staat naast het tekstblok, van de koppen tot de laatste regel (bovenkant op de koppen) */
@media(min-width:900px){.foot .foot-top{padding-top:32px}.foot .foot-top>.foot-sinds-kolom{padding-top:75px}}

/* 29-10-2026 taalkeuze: NL | EN (alleen zichtbaar als er meer dan een taal gepubliceerd is).
   Webshopkop: de bestaande taalknop .lang (actieve taal goud en vet); het Shopify-taalformulier zelf telt niet mee in de opmaak.
   Kop informatiesite: kleine witte tekstkeuze rechtsboven, actieve taal vet. */
.lang .vdv-taal-form{display:contents}
.vo-taal{position:absolute;top:clamp(10px,1.2vw,18px);right:max(12px,calc((100% - 1254px) / 2));display:flex;align-items:center;gap:6px;margin:0;color:#fff;font-size:.8125rem;letter-spacing:.06em;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.vo-kop:not(.vo-kop-sub) .vo-taal{top:calc(clamp(48px,6.5vw,93px) + 10px);right:max(12px,calc(31.46vw - 396px))}
.vo-taal button{background:none;border:0;padding:2px;margin:0;color:inherit;font:inherit;font-weight:400;cursor:pointer;pointer-events:auto}
.vo-taal button[aria-current="true"]{font-weight:700}
.vo-taal button:hover,.vo-taal button:focus-visible{text-decoration:underline}
.vo-taal-streep{opacity:.7}

/* 29-10-2026 smalle promotegels: lange woorden netjes afbreken op lettergreep (Schuur-machines) i.p.v. midden in het woord */
.pg-pt h3,.pg-pt p{overflow-wrap:normal;hyphens:auto;-webkit-hyphens:auto}
@media (min-width:600px) and (max-width:1100px){.pg-promo-klein .pg-pt h3{font-size:1.15rem}}

.pg-biocide{margin:8px 0 4px;font-size:14px;font-weight:600;color:var(--navy,#002D62)}
.pg-opmerking-kop{font-size:16px;margin:0 0 4px}
.pg-opmerking-hulp{margin:0 0 8px;font-size:14px;color:#4b5563}