/* Woonklasse design system for the q1sanitair catalog restyle.
   Rules marked THEME are copied verbatim from the live Woonklasse Shopify theme
   (/Users/sander/Desktop/Projects/loods5-clone/shopify-theme/assets/style.css).
   Rules marked NEW exist only here, for content shapes the Shopify PDP does not
   have (spec table, link-based option rows, add-on grids). */


/* ARCHIVO, en dit was een echte fout die maanden live heeft gestaan.
   De tokens zeiden --font:'Inter', maar er stond nergens een @font-face voor
   Inter. De hele site rendeerde de lopende tekst dus in de systeemfont: San
   Francisco op een Mac, Segoe op Windows, iets anders op Android. Nooit het
   ontwerp, en op elk apparaat anders.
   Ondertussen stond archivo-latin.woff2 al die tijd op de server zonder ooit
   te worden aangeroepen. Het is een VARIABELE font van 35 KB met de volle as
   van 100 tot 900, nagemeten in de browser: de letterbreedte loopt netjes op
   van gewicht 300 naar 900. Een grotesk die past bij Anton, dat zelf een zware
   grotesk is. Kost dus geen enkele nieuwe download.
   Relatief pad, net als bij Anton: deze CSS staat op /wk/, dus dit wordt
   /wk/archivo-latin.woff2. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('archivo-latin.woff2') format('woff2')}

/* MONTSERRAT: de kopletter van Badkamerstijl, dezelfde brede grotesk als de
   wordmark in het druppellogo. Variabel, 35 KB, self-hosted net als de rest. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url('montserrat-latin.woff2') format('woff2')}

/* THEME: tokens */
:root{
  --ink:var(--zand-12);
  --merk:#2E6F74;
  --merk-hover:#3F9095;
  --muted:var(--zand-8);
  /* Twee tinten erbij op 2026-08-22, want --muted haalt 2,63:1 op --bg en
     2,17:1 op --card en stond juist op tekst die het vertrouwen draagt.
     --muted blijft bestaan voor lijnen en decoratie, niet voor tekst.
     --brons is het goud dat wel leesbaar is als tekstkleur; --accent-dark
     haalt 2,15:1 en mag dus nooit tekst zijn. */
  --ink-2:var(--zand-10);
  --brons:var(--goud-11);
  --line:var(--zand-5);
  --bg:var(--zand-2);
  --card:var(--zand-4);
  --accent:var(--goud-9);
  --accent-dark:var(--goud-10);
  --accent-text:#FFFFFF;
  --sale:#A32D2D;
  --success:#3B6D11;
  --max:1360px;
  --r:14px;
  --shadow:0 6px 24px rgba(31,41,40,.10);
  --font:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-kop:'Montserrat',var(--font);
  /* Invoervelden: onder 16px zoomt iOS de pagina bij focus. Bewust een eigen
     token naast de leesschaal, zodat de regel meetbaar en benoemd is. */
  --t-invoer:16px;

  /* DE TYPESCHAAL. Acht stappen, en geen negende. Deze reeks stond al onder .rp
     op de ruimtepagina's; hier staat hij site-breed zodat er maar een schaal is.
     Gemeten aanleiding: woonklasse.css had 92 font-size-declaraties met 20
     unieke waarden, waarvan er ACHT tussen 10 en 13,5px lagen. Dat verschil ziet
     niemand, maar het moet wel onderhouden worden.
     Stapfactoren: 1,29 / 1,33 / 1,62 / 1,24 / 1,24 / 1,21 / 1,17. De laatste
     stap (14 naar 12) blijft onder 1,2 en dat mag alleen omdat de eyebrow
     kapitalen met 0,18em tracking draagt en dus een andere vorm heeft. */
  /* Verhoogd op 2026-08-23 met de keuze voor magazine-editorial. Die richting
     leeft van het verschil tussen de grootste kop en de rest; de stap van
     display naar h1 stond op 1,29 en dat is geen drama maar een maatje groter.
     Nu 1,64 op een breed scherm. */
  --t-display:clamp(42px,6.2vw,92px);
  --t-h1:clamp(32px,3.9vw,56px);
  --t-h2:clamp(27px,3.2vw,42px);
  --t-h3:clamp(20px,2.1vw,26px);
  --t-lead:clamp(18px,1.5vw,21px);
  --t-body:17px;
  --t-meta:14px;
  --t-eyebrow:12px;

  /* De leeskolom. 34rem levert op --t-body ongeveer 62 tekens per regel, en dat
     ligt midden in het comfortabele bereik van 45 tot 78. Elk blok lopende
     tekst krijgt deze breedte; een container die breder mag zijn (tabel, raster,
     beeld) zet hem zelf terug op none. */
  --kolom:34rem;

  /* De kantlijn van de pagina. Samen met --max is dit de enige container die de
     site kent: header, voettekst en elke sectie gebruiken deze twee, zodat de
     inhoud op elke breedte op dezelfde x begint. */
  --gutter:24px;

  /* Vier radiuswaarden, en geen vijfde. Gemeten stand ervoor: 6, 8, 9, 10, 12
     en 14px door elkaar, plus .5rem. Het verschil tussen 9 en 10px ziet
     niemand, maar het moet wel onderhouden worden. */
  --r-sm:8px;
  --r-pill:999px;

  /* ==========================================================================
     DE KLEURTRAP. Twaalf stappen per merkkleur, rolverdeling overgenomen van
     Radix Colors (radix-ui/colors), waarden zelf berekend in OKLab rond onze
     EIGEN kleuren. Het Radix-goud is #978365, een dof olijfbruin khaki, en
     heeft niets met #E8B44A te maken: we nemen de methode over, niet de
     bestanden.

     De rol per stap ligt vast:
       1-2   paginavlak en zacht getint vlak
       3-5   vlak van een element, hover, actief
       6-8   zachte lijn, lijn en focusring, hoverlijn
       9     de volle merkkleur, de knopvulling
       10    hover op stap 9
       11    de laagste stap die als TEKST leesbaar is, >= 4,5:1 op het paginavlak
       12    hoog contrast

     Hiermee wordt "goud mag nooit tekst zijn" een token in plaats van een
     verbod: --goud-11 is per definitie wel leesbaar (6,96:1 op --bg).
     Elke bestaande tokenwaarde staat hier ongewijzigd in: --bg is zand-2,
     --card is zand-4, --line is zand-5, --muted is zand-8, --ink-2 is zand-10,
     --ink is zand-12, --accent is goud-9, --accent-dark is goud-10 en --brons
     is goud-11. Er verschiet dus geen enkele van de 21.000 pagina's van kleur;
     wat erbij komt zijn de tussenstappen die er nog niet waren.
     ========================================================================== */
  /* BADKAMERSTIJL (29 aug 2026): de trappen zijn hier de teal uit het
     druppellogo (stappen 4 en 8 zijn letterlijk de logo-stops #CFE9E9 en
     #5FB1B4; stap 9 is verdiept tot 4,85:1 met witte tekst) en een koel
     porselein-neutraal. Rolverdeling ongewijzigd (Radix-methode, zie boven).
     De oude goud/zand-namen blijven als alias geldig tot de hernoemronde. */
  --teal-1:#F7FBFB;
  --teal-2:#EFF7F7;
  --teal-3:#E1F1F1;
  --teal-4:#CFE9E9;
  --teal-5:#BCE0E1;
  --teal-6:#A3D4D5;
  --teal-7:#83C4C6;
  --teal-8:#5FB1B4;
  --teal-9:#2F7C82;
  --teal-10:#256469;
  --teal-11:#1E5A5E;
  --teal-12:#0C3234;

  --nevel-1:#FAFCFC;
  --nevel-2:#F3F7F7;
  --nevel-3:#EAF0F0;
  --nevel-4:#E0E9E9;
  --nevel-5:#D4DFDF;
  --nevel-6:#C0CCCC;
  --nevel-7:#A7B5B5;
  --nevel-8:#8CA09F;
  --nevel-9:#6A7C7B;
  --nevel-10:#52605F;
  --nevel-11:#32403F;
  --nevel-12:#1F2928;

  --goud-1:var(--teal-1);
  --goud-2:var(--teal-2);
  --goud-3:var(--teal-3);
  --goud-4:var(--teal-4);
  --goud-5:var(--teal-5);
  --goud-6:var(--teal-6);
  --goud-7:var(--teal-7);
  --goud-8:var(--teal-8);
  --goud-9:var(--teal-9);
  --goud-10:var(--teal-10);
  --goud-11:var(--teal-11);
  --goud-12:var(--teal-12);
  --zand-1:var(--nevel-1);
  --zand-2:var(--nevel-2);
  --zand-3:var(--nevel-3);
  --zand-4:var(--nevel-4);
  --zand-5:var(--nevel-5);
  --zand-6:var(--nevel-6);
  --zand-7:var(--nevel-7);
  --zand-8:var(--nevel-8);
  --zand-9:var(--nevel-9);
  --zand-10:var(--nevel-10);
  --zand-11:var(--nevel-11);
  --zand-12:var(--nevel-12);

  /* ==========================================================================
     DE SCHADUWLADDER. Offsets, blur en vooral de NEGATIEVE SPREAD komen van
     Shopify Polaris (polaris-react-archive, polaris-tokens/src/themes/base/
     shadow.ts, waarden 1 op 1 nagekeken). Die spread groeit mee met de blur, en
     dat is precies waarom die kaarten opgetild lijken terwijl een zelfgemaakte
     schaduw een grijze waas geeft.

     De KLEUR is wel vervangen. Polaris rekent met rgba(26,26,26), een neutraal
     grijs afgestemd op een wit adminpaneel; op ons warme #F6F4F2 leest dat als
     vuil. Hier staat onze eigen inkt, 43 42 40. De site had tot vandaag precies
     EEN schaduwwaarde, drie keer gebruikt, en verder niets.
     ========================================================================== */
  --schaduw-kleur:31 41 40;
  --schaduw-1:0 1px 0 0 rgb(var(--schaduw-kleur) / .07);
  --schaduw-2:0 3px 1px -1px rgb(var(--schaduw-kleur) / .07);
  --schaduw-3:0 4px 6px -2px rgb(var(--schaduw-kleur) / .20);
  --schaduw-4:0 8px 16px -4px rgb(var(--schaduw-kleur) / .22);
  --schaduw-5:0 12px 20px -8px rgb(var(--schaduw-kleur) / .24);
  --schaduw-6:0 20px 20px -8px rgb(var(--schaduw-kleur) / .28);
  /* Een rand als schaduw in plaats van als border, truc uit primer/primitives:
     hij telt niet mee in de doosmaat, dus een rand die bij hover verschijnt
     verschuift de layout niet. */
  --lijn-inset:inset 0 0 0 1px var(--zand-5);

  /* ==========================================================================
     BEWEGING. De site draaide op de browserstandaard: vijf verschillende duren
     (.15s .16s .18s .2s .25s) en nul curves. Dat is het verschil tussen een
     kaart die verspringt en een kaart die glijdt.
     De curve komt uit argyleink/open-props (--ease-out-3), de duur uit de regel
     dat een overgang onder 300 ms moet blijven om als reactie te lezen in
     plaats van als animatie.
     ========================================================================== */
  --ease-uit:cubic-bezier(0,0,.3,1);
  --ease-in-uit:cubic-bezier(.5,0,.5,1);
  --duur-snel:120ms;
  --duur:200ms;
  --duur-traag:320ms;

  /* ==========================================================================
     DE SPATIESCHAAL. Stond al in de designtaal beschreven, maar bestond niet
     als token: elke marge en padding in dit bestand is een los getal. Alles
     behalve 4 en 12 is een veelvoud van 8.
     ========================================================================== */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:80px; --sp-10:112px;

  /* ==========================================================================
     HET VERTICALE RITME. Sectieafstand kent drie waarden en die worden met een
     media query geschakeld, niet met een clamp: een clamp(56px,6.4vw,112px)
     landt op 1440px op 92,16px en op 1024px op 65,54px, dus buiten elke schaal
     die verder op de site geldt. Met deze drie stappen komt elke sectieafstand
     uit {56, 80, 112}. De schakelpunten zijn dezelfde als die van de
     typeschaal, zodat kop en ruimte samen verspringen.
     Nieuw op 2026-08-23 voor de unieke stadssecties; bestaande secties staan
     nog op hun eigen clamp en zijn daarmee openstaande schuld, geen precedent.
     ========================================================================== */
  --rij:56px;
}
@media(min-width:768px){ :root{ --rij:80px } }
@media(min-width:1200px){ :root{ --rij:112px } }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5}
img{display:block;max-width:100%;height:auto}
/* Een <picture> die alleen webp- en jpg-varianten van HETZELFDE beeld draagt
   mag geen layoutdoos zijn: waar de <img> een grid- of flexkind was, of met
   position:absolute in zijn kader hing, zou die doos ertussen schuiven en de
   layout veranderen. display:contents haalt hem weg, zodat de <img> weer het
   directe layoutkind van zijn ouder is en elke bestaande regel blijft werken.
   Alleen op .bp en niet op picture in het algemeen: de voor-en-na-pijler op /
   gebruikte al een <picture> zonder deze klasse en die staat zoals hij is
   gemeten. (beeld.mjs, 23 aug 2026) */
picture.bp{display:contents}
a{color:inherit;text-decoration:none}
/* Geen globale letter-spacing meer op koppen. Deze regel gaf ELKE kop -0,01em,
   ook een kaarttitel van 14px en een footerkop, terwijl negatieve tracking
   alleen bij grote letters hoort. Gemeten gevolg: Archivo op 14px kwam op twee
   verschillende waardes uit (0 en -0,14px), afhankelijk van of het element
   toevallig een h-tag was. Tracking hoort bij de MAAT, niet bij de tag, dus hij
   staat nu per component. */
h1,h2,h3,h4{margin:0;font-weight:700}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.chk{width:15px;height:15px;flex:none}
.chk polyline{fill:none;stroke:currentColor;stroke-width:11;stroke-linecap:round;stroke-linejoin:round}

/* THEME: top utility bar */
.topbar{background:var(--bg);border-bottom:1px solid var(--line);font-size:var(--t-eyebrow)}
.topbar-inner{max-width:var(--max);margin:0 auto;padding:8px 24px;display:flex;align-items:center;justify-content:space-between}
.topbar-usps{display:flex;gap:24px;color:var(--ink-2)}
.topbar-usps span{display:inline-flex;align-items:center;gap:8px}
.topbar-usps .chk{width:13px;height:13px}
.topbar-links{display:flex;gap:24px}
.topbar-links a{color:var(--ink);position:relative}
/* Het trefvlak van deze links was 18px hoog, onder de 24px die WCAG 2.2 AA
   vraagt. Vergroot met een ::before, niet met padding: padding zou de balk
   hoger maken en die staat op elke pagina. ::after is hier al bezet door de
   scheidingslijn. 26px past binnen de balk van 35px, dus het vlak steekt
   nergens overheen. */
.topbar-links a::before{content:"";position:absolute;top:50%;left:0;right:0;height:26px;transform:translateY(-50%)}
.topbar-links a:hover{color:var(--brons)}
.topbar-links a:first-child::after{content:"";position:absolute;right:-12px;top:0;bottom:0;width:1px;background:var(--line)}

/* THEME: header */
.header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.header.scrolled{box-shadow:0 4px 18px rgba(0,0,0,.06)}
.header-inner{max-width:var(--max);margin:0 auto;padding:14px 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.header-left{display:flex;align-items:center;gap:24px;min-width:0}
.menu-toggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:0}
.menu-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.topnav{display:flex;align-items:center;gap:24px}
.topnav>a,.topnav .tn-top{font-size:var(--t-meta);font-weight:600;color:var(--ink);padding:6px 0}
.topnav .sale{color:var(--sale)}

/* THEME: hoofdnavigatie met flyouts (2026-08-12)
   Producten en Ruimtes klappen open op hover EN op focus-within, dus het menu
   is ook met alleen het toetsenbord te bedienen en er is geen JavaScript voor
   nodig. Het brede paneel hangt over de volle headerbreedte: .header is
   position:sticky en daarmee het houvast voor een absoluut geplaatst vlak, dus
   .tn-item--mega blijft bewust position:static. */
.tn-item{position:static;display:flex;align-items:center}
.tn-item--drop{position:relative}
.tn-top{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.tn-chev{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease;color:var(--ink-2)}
.tn-panel{position:absolute;top:100%;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;background:var(--bg);z-index:60}
.tn-panel--mega{left:0;right:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 20px 36px rgba(43,42,40,.10)}
.tn-panel--drop{left:-18px;min-width:250px;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 16px 30px rgba(43,42,40,.12);overflow:hidden}
.tn-item:hover>.tn-panel,.tn-item:focus-within>.tn-panel{opacity:1;visibility:visible;transform:none}
.tn-item:hover>.tn-top .tn-chev,.tn-item:focus-within>.tn-top .tn-chev{transform:rotate(180deg)}
.tn-panel-inner{max-width:var(--max);margin:0 auto;padding:28px 24px 32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px}
.tn-panel--drop .tn-panel-inner{display:block;max-width:none;padding:8px}
.tn-col{display:flex;flex-direction:column;min-width:0}
.tn-coltitle{margin:0 0 10px;font-size:var(--t-eyebrow);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2)}
.topnav .tn-col a{display:block;padding:7px 0;font-size:var(--t-meta);font-weight:500;line-height:1.4;color:var(--ink)}
.topnav .tn-col a:hover{text-decoration:underline;text-underline-offset:3px}
.tn-panel--drop .tn-col a{padding:10px 14px;border-radius:var(--r-sm);font-weight:600}
.tn-panel--drop .tn-col a:hover{background:var(--card);text-decoration:none}
/* De enige gouden regel in het menu: /raamdecoratie/assortiment is de best
   converterende route en de enige met echte marge, dus die krijgt gewicht in
   plaats van dezelfde grijze regel als de rest. */
.topnav .tn-col a.tn-featured{margin:0 0 10px;padding:12px 15px;background:var(--accent);color:var(--accent-text);border-radius:var(--r-sm);font-weight:600}
.topnav .tn-col a.tn-featured:hover{background:var(--accent-dark);text-decoration:none}
.tn-featured b{display:block;font-size:var(--t-meta)}
.tn-featured span{display:block;margin-top:2px;font-size:var(--t-eyebrow);line-height:1.35;opacity:.82}
.tn-col--note a{color:var(--ink-2)}

/* De verbouwknop, uiterst rechts. Goud is op deze site de handelingskleur en
   nergens anders in de header aanwezig, dus hij springt eruit zonder een
   zesde kleur te introduceren. Verbouwen is een andere transactie dan een
   bestelling, en dat mag je zien. */
.hdr-verbouw{display:inline-flex;align-items:center;gap:8px;flex:none;background:var(--accent);color:var(--accent-text);padding:10px 17px;border-radius:var(--r-pill);font-size:var(--t-eyebrow);font-weight:700;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;transition:background .15s ease,transform .15s ease;position:relative}
.hdr-verbouw::after{content:"";position:absolute;top:50%;left:0;right:0;height:44px;transform:translateY(-50%)}
.hdr-verbouw:hover{background:var(--accent-dark);transform:translateY(-1px)}
.hdr-verbouw-ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Gemeten op 375px (de gewone iPhone-breedte): met de knop erbij blijft
   scrollWidth gelijk aan clientWidth, dus er ontstaat geen horizontale schuif.
   Het logo krimpt van 130 naar 88px en blijft leesbaar. Daaronder wint de
   winkelmand en verdwijnt de knop; in het menupaneel staat hij dan nog steeds
   bovenaan. */
@media(max-width:339px){.hdr-verbouw{display:none}}

/* ================================================================
   DE AANNEMERSCHROME, /verbouwen en /verbouwen/<ruimte>.
   Zelfde merk, andere winkel. Geen zoekveld dat in de badkamercatalogus zoekt,
   geen winkelmand, geen productmegamenu en geen VERBOUWEN-knop terwijl je daar
   al staat. Wat er wel staat is bereikbaarheid, de ruimtes, en een intake als
   enige harde actie. De styling is strak gehouden in lijn met de ruimtepagina's:
   een rechte knop in plaats van een pil, want dit is de bouwkant.
   ================================================================ */
.topbar--vb .topbar-usps{color:var(--ink-2)}
/* Het telefoonnummer in de balk bovenaan en in de voettekst van de
   aannemerskant. Het is een link, dus het moet er ook uitzien als iets waar je
   op tikt: zwaarder dan de openingstijden ernaast. */
.topbar--vb .topbar-usps{display:flex;align-items:center;gap:16px}
.topbar-tel{font-weight:700;color:var(--ink);white-space:nowrap}
.topbar-tel:hover{color:var(--brons)}
/* Op een telefoon past het nummer naast de openingstijden niet: allebei braken
   ze dan over twee regels. De tijden verdwijnen daar, het nummer blijft, want
   dat is de knop. De tijden staan verderop nog in de voettekst. */
@media(max-width:760px){.topbar--vb .topbar-usps span{display:none}}
.foot-tel{font-weight:700;color:var(--ink) !important}
.footer--vb .foot-cols>div>h2+.foot-tel{margin-bottom:2px}
/* De zwevende WhatsApp-knop stond over het open menu en over de bedrijfsregel
   onderaan. Weg zolang het paneel open is, en ruimte eronder in de voettekst. */
body:has(.mobile-nav.open) .wa-widget{opacity:0;pointer-events:none}
@media(max-width:767px){.footer--vb .foot-bottom{padding-bottom:76px}}
.header--vb{border-bottom:2px solid var(--ink)}
.header-right--vb{display:flex;align-items:center;gap:12px;justify-self:end}
.hdr-wa{display:inline-flex;align-items:center;gap:8px;flex:none;font-size:var(--t-meta);font-weight:600;color:var(--ink);white-space:nowrap}
.hdr-wa:hover{color:var(--brons)}
.hdr-wa-ico{width:18px;height:18px;flex:none}
/* Een pil, net als elke andere knop op de site. De rechthoekige variant die
   hier ooit stond is afgeschaft: het verschil tussen de webshop en de
   aannemerskant wordt gedragen door tekst en inhoud, niet door vorm. */
.hdr-intake{display:inline-flex;align-items:center;flex:none;background:var(--accent);color:var(--accent-text);padding:12px 20px;border-radius:var(--r-pill);font-size:var(--t-meta);font-weight:700;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;transition:background .15s ease;position:relative}
.hdr-intake::after{content:"";position:absolute;top:50%;left:0;right:0;height:44px;transform:translateY(-50%)}
.hdr-intake:hover{background:var(--accent-dark)}
/* De weg terug naar de webshop, het spiegelbeeld van .hdr-verbouw aan de andere
   kant. Wel de lijnvariant en niet goud: op deze kant is het goud vergeven aan
   "Gratis intake", en twee gouden pillen naast elkaar hebben geen rangorde meer.
   Zelfde doos als .hdr-intake met 1px minder padding, zodat de rand de knop niet
   hoger maakt: ze staan naast elkaar en moeten exact even hoog zijn. */
.hdr-webshop{display:inline-flex;align-items:center;gap:8px;flex:none;border:1px solid var(--ink);color:var(--ink);padding:11px 19px;border-radius:var(--r-pill);font-size:var(--t-meta);font-weight:700;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;transition:background .15s ease,color .15s ease;position:relative}
.hdr-webshop::after{content:"";position:absolute;top:50%;left:0;right:0;height:44px;transform:translateY(-50%)}
.hdr-webshop:hover{background:var(--ink);color:var(--bg)}
.hdr-webshop-ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1080px){.hdr-wa span{display:none}}
/* De linkerkolom van de header mag nooit onder de hamburger krimpen. Zonder
   deze regel wint een te brede rechterkolom het van allebei de andere kolommen:
   kolom 1 gaat naar 0, de hamburger steekt eruit, en de logokolom betaalt de
   rest. Zo liep het merk op 390px onder het hamburgerpictogram door. */
@media(max-width:1023px){ .header-left{min-width:min-content} }
@media(max-width:760px){
  /* WhatsApp staat op de telefoon al in de zwevende bel rechtsonder en in het
     paneel. In de header kost hij alleen de ruimte die de twee knoppen nodig
     hebben, dus daar verdwijnt hij. */
  .hdr-wa{display:none}
  .hdr-webshop{padding:9px 13px;font-size:var(--t-eyebrow);gap:5px}
  .hdr-webshop-ic{width:14px;height:14px}
  .hdr-intake{padding:10px 14px;font-size:var(--t-eyebrow);letter-spacing:.08em}
}
@media(max-width:600px){
  /* Vanaf hier past het woord WEBSHOP er niet meer naast zonder het logo te
     verdringen, dus de knop houdt alleen zijn tas. Het label leeft verder in
     aria-label en in het paneel. De twee knoppen krimpen samen en naar dezelfde
     hoogte: 8/11 plus 1px rand tegen 9/12. */
  .header-inner{gap:12px}
  .hdr-webshop{padding:9px 11px;gap:0}
  .hdr-webshop span{display:none}
  .hdr-webshop .hdr-webshop-ic{width:16px;height:16px}
  .hdr-intake{padding:9px 12px}
}
/* Onder 380px is er zelfs voor de tas geen ruimte meer zonder het logo te
   pletten. Daar draagt het paneel de weg terug, bovenaan direct onder de
   belknop. */
@media(max-width:380px){ .hdr-webshop{display:none} }

/* De juridische regel in de neutrale voettekst. Hij haalt vier regels uit de
   kolom Woonklasse, zodat de kolommen Webshop en Verbouwen visueel het zwaarst
   blijven en de tweedeling gelijkwaardig oogt in plaats van een winkel met een
   verbouwaanhangsel. Bewust GEEN border-bottom: .foot-bottom heeft al een
   border-top en twee randen zouden direct op elkaar landen. */
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 24px;padding:20px 0 0}
.foot-legal a{font-size:var(--t-meta);color:var(--ink-2);position:relative}
.foot-legal a::after{content:"";position:absolute;top:50%;left:0;right:0;height:26px;transform:translateY(-50%)}
.foot-legal a:hover{color:var(--ink)}
/* De neutrale voettekst draagt geen beloftestrook, dus de kolommen zijn het
   eerste blok en hebben zelf de scheidslijn nodig die anders van .foot-usps kwam. */
.footer--neutraal .foot-cols{border-top:1px solid var(--line);padding-top:36px;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.footer--neutraal .foot-cols{grid-template-columns:repeat(2,1fr)}}
/* Het item dat naar de huidige pagina wijst. Alleen in de neutrale nav, want
   daar staat Contact zowel in de balk als in de nav en was de klik dood. */
.header--neutraal .topnav a[aria-current="page"]{color:var(--ink);font-weight:600}

/* de voettekst van de aannemerskant. De beloftestrook heeft hier geen eigen
   raster meer nodig: .foot-usps staat nu site-breed op drie kolommen. */
.foot-open{margin:14px 0 0;font-size:var(--t-meta);color:var(--ink-2)}
.header .logo{display:flex;align-items:center;justify-self:center;height:58px;overflow:visible}
.header .logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.header .logo img{height:44px;width:auto;display:block}
/* De wordmark als echte tekst in de kopletter: scherp op elk formaat, en hij
   volgt de brede letterspatiering van het logo. */
.logo-woord{font-family:var(--font-kop);font-weight:500;font-size:var(--t-meta);letter-spacing:.3em;text-transform:uppercase;color:var(--merk);white-space:nowrap}
.header-right{display:flex;align-items:center;justify-content:flex-end;gap:16px}
.header-right .search{flex:0 1 220px;display:flex;align-items:center;gap:8px;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:3px 0;max-width:220px}
.header-right .search input{flex:1;border:0;background:none;padding:3px 0;font-size:var(--t-meta);outline:none;color:var(--ink);font-family:var(--font)}
.header-right .search button{width:26px;height:26px;border:0;border-radius:0;background:none;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.header-right .search svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.header-right .search button svg{width:19px;height:19px;stroke-width:1.8}
.hicon{position:relative;color:var(--ink);display:grid;place-items:center}
.hicon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* De magnifier hoort bij het mobiele formaat: op het bureaublad staat het
   zoekveld zelf al in de header, dus daar zou hij hetzelfde twee keer zijn. */
.hicon-search{display:none}
/* Het icoon zelf is 22px en de hamburger 24px, ruim onder wat een duim raakt.
   Dit vergroot alleen het TREFVLAK (34 breed, 44 hoog) met een overlay in het
   element zelf, dus er verschuift niets: de iconen staan met 16px ertussen, en
   34 + 16 laat 4px over, ze overlappen elkaar dus niet. */
.menu-toggle{position:relative}
.menu-toggle::after,.hicon::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:44px;transform:translate(-50%,-50%)}
.hicon .badge{position:absolute;top:-6px;right:-7px;background:var(--merk);color:var(--bg);font-size:var(--t-eyebrow);font-style:normal;min-width:16px;height:16px;border-radius:var(--r-sm);display:grid;place-items:center;padding:0 4px}

/* NEW: mobile nav panel — the hamburger (.menu-toggle) opens this under the
   header on <=760px, exposing the three pillars. Wired in cart.js, which the
   shared header() loads on every page. */
.mobile-nav{display:none;background:var(--bg);border-bottom:1px solid var(--line)}
.mobile-nav a{display:block;padding:14px 24px;font-size:var(--t-body);font-weight:600;color:var(--ink)}
.mobile-nav a+a{border-top:1px solid var(--line)}
/* Zoeken op mobiel. De .search in de header staat onder 760px op display:none
   en het mobiele menu had geen zoekveld, dus een bezoeker op een telefoon kon
   nergens op de site zoeken (gemeten 2026-08-05 op /webshop, /raamdecoratie,
   /verbouwen en /blog). Zelfde formulier, zelfde bestemming. */
.mnav-search{display:flex;align-items:center;gap:9px;margin:12px 24px;padding:9px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill)}
.mnav-search svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* 16px is hier verplicht: Safari op iOS zoomt in zodra een invoerveld kleiner
   dan 16px focus krijgt, en dan verspringt de hele pagina. Gedocumenteerde
   uitzondering op de typeschaal, niet aanpassen naar een token. */
.mnav-search input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:var(--t-invoer);color:var(--ink);font-family:var(--font)}
.mnav-search button{flex:none;border:0;background:none;padding:0;color:var(--ink);font-family:var(--font);font-size:var(--t-meta);font-weight:600;cursor:pointer}
/* Alleen zichtbaar in de zonder-JavaScript-stand, zie de :target-regel onderin. */
.mobile-nav .mnav-close{display:none;color:var(--ink-2);font-weight:500}

/* Het mobiele paneel volgt dezelfde indeling als het bureaublad: Producten en
   Ruimtes als uitklapper, de rest als platte regel. <details> in plaats van
   JavaScript, zodat het paneel ook open en dicht kan als cart.js niet laadt.
   De verbouwknop staat hier bovenaan: in een lijst is dat de opvallende plek,
   terwijl hij op het bureaublad uiterst rechts staat. */
.mobile-nav .mnav-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 24px 14px;padding:13px 18px;background:var(--accent);color:var(--accent-text);border-radius:var(--r-pill);font-size:var(--t-meta);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.mnav-group{border-top:1px solid var(--line)}
.mnav-group summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;font-size:var(--t-body);font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.mnav-group summary::-webkit-details-marker{display:none}
.mnav-group summary::after{content:"";flex:none;width:9px;height:9px;margin-right:5px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
.mnav-group[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.mnav-sub{background:var(--card);padding:4px 0 8px}
.mobile-nav .mnav-sub a{padding:11px 24px 11px 38px;font-size:var(--t-meta);font-weight:500}
.mobile-nav .mnav-sub a+a{border-top:0}
.mnav-group+.mnav-link,.mnav-group+.mnav-group{border-top:1px solid var(--line)}

/* THEME: buttons */
.btn{display:inline-block;background:var(--accent);color:var(--accent-text);padding:14px 26px;border-radius:var(--r-pill);font-weight:600;font-size:var(--t-meta);border:0;cursor:pointer;transition:.15s}
.btn:hover{background:var(--accent-dark)}

/* THEME: breadcrumb */
.crumbs{max-width:var(--max);margin:0 auto;padding:18px 24px;font-size:var(--t-meta);color:var(--ink-2)}
.crumbs a{color:var(--ink-2);position:relative}
.crumbs a::after{content:"";position:absolute;top:50%;left:0;right:0;height:26px;transform:translateY(-50%)}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 8px;opacity:.5}
/* Er staat geen spatie tussen de kruimels in de HTML, dus een kruimelpad van
   vier niveaus met een lang laatste woord ("Home > Badkamer > Productoverzicht
   > Regendouchesets") is één onbreekbaar geheel en duwde de layout op een
   telefoon van 390 naar 398px breed. Deze zero-width space achter elk pijltje
   geeft de regel een plek om af te breken; er verschuift verder niets. */
.crumbs span::after{content:"\200B"}

/* THEME: pdpx product page */
.pdpx{max-width:var(--max);margin:0 auto;padding:0 24px;display:flex;align-items:flex-start}
/* Het vlak was 924 bij 580 op een breed scherm terwijl het bestand 600x600 is.
   Gemeten gevolg: 212px dood wit links EN rechts, en het beeld werd bovendien
   verkleind naar 500px. Voor een product van 400 tot 2.400 euro is dit het
   belangrijkste beeld van de pagina en het stond er als postzegel bij.
   Het vlak is nu vierkant en precies zo groot als het bestand plus de padding,
   gecentreerd in de kolom. Daarmee staat het beeld op ware grootte, 600 in
   plaats van 500. Groter kan niet: elk galerijbestand is 600x600 en opschalen
   maakt het zichtbaar zacht op een retinascherm. Komt er ooit bronmateriaal van
   1600px, dan mag deze 680 mee omhoog. */
.pdpx-stage{flex:1 1 auto;min-width:0;background:var(--bg);border-radius:var(--r);aspect-ratio:1;max-width:680px;margin-inline:auto;padding:40px;display:flex;align-items:center;justify-content:center}
.pdpx-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply;transition:opacity .25s ease}
.pdpx-card{flex:0 0 420px;width:420px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;margin:16px 0 16px -32px;position:relative}
.pdpx-brand{display:block;font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:.18em;color:var(--ink-2)}
.pdpx-title{font-family:var(--font-kop);font-weight:500;text-transform:uppercase;letter-spacing:.01em;font-size:var(--t-h3);line-height:1.12;margin:6px 0 14px}
.pdpx-price{display:flex;align-items:baseline;gap:8px}
.pdpx-price .now{font-size:var(--t-h3);font-weight:600;color:var(--ink)}
.pdpx-price .was{font-size:var(--t-meta);font-weight:600;color:var(--ink-2);text-decoration:line-through}
.pdpx-vat{font-size:var(--t-eyebrow);color:var(--ink-2);margin:4px 0 0}
/* NEW: levertijd of THIS product, next to the price. The fast variant adds the
   check and the promise; every other product shows only its own lead time. */
.pdpx-lever{display:flex;align-items:flex-start;gap:8px;font-size:var(--t-meta);line-height:1.45;color:var(--ink-2);margin:12px 0 0}
.pdpx-lever .chk{margin-top:2px}
.pdpx-lever--fast{color:var(--ink)}
.pdpx-form{margin-top:24px}
.pdpx-options{display:flex;flex-direction:column;gap:16px;margin:0 0 24px}
.pdpx-option{display:flex;flex-direction:column;gap:8px}
.pdpx-opthead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pdpx-optname{font-size:var(--t-meta);color:var(--ink)}
.pdpx-optval{font-size:var(--t-meta);font-weight:700;color:var(--ink);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdpx-buyrow{display:flex;gap:12px;align-items:stretch}
.pdpx-buyrow .qty{flex:none;background:var(--bg)}
.pdpx-buy-btn{flex:1;border:0;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-text);font-family:var(--font);font-size:var(--t-meta);font-weight:700;padding:14px 22px;cursor:pointer;transition:background-color .2s,color .2s}
.pdpx-buy-btn:hover{background:var(--accent-dark)}
/* Levertijd op aanvraag: geen winkelmand, maar een WhatsApp- of mailroute.
   Zelfde knopvorm als "In winkelmand", nu als link, dus flex + geen onderstreping. */
.pdpx-buyrow--aanvraag{flex-direction:column;gap:8px}
.pdpx-buyrow--aanvraag .pdpx-buy-btn{display:flex;align-items:center;justify-content:center;text-decoration:none;text-align:center}
.pdpx-buy-alt{font-size:var(--t-meta);color:var(--ink-2);text-align:center;text-decoration:underline}
.pdpx-buy-alt:hover{color:var(--ink)}
.pdpx-trust{font-size:var(--t-meta);color:var(--ink-2);text-align:center;line-height:1.6;margin:14px 0 0}
/* Horizontale padding MOET hier staan: .wrap geeft 0 24px, en een shorthand met
   een linker- en rechterwaarde van 0 zet dat uit. Zonder de 24px begon het
   kenmerkenblok 24px linkser dan het kruimelpad, de productkolommen en de
   aanbevelingen, die alle drie op 64px staan. (gemeten 16 aug 2026) */
.pdpx-desc-section{padding:36px 24px 4px}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
.qty button{width:44px;height:48px;border:0;background:var(--card);font-size:var(--t-h3);cursor:pointer;color:var(--ink)}
/* zie de opmerking bij .mnav-search input: 16px tegen de iOS-zoom */
.qty input[type=number]{width:36px;min-height:28px;border:0;background:none;text-align:center;font-size:var(--t-invoer);font-weight:600;-moz-appearance:textfield;font-family:var(--font);color:var(--ink)}
.qty input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}

/* THEME: swatches inside the configurator card */
.pdpx .swatches{display:flex;flex-wrap:wrap;gap:12px;padding:2px}
.pdpx .swatch{position:relative;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;display:grid;place-items:center}
.pdpx .swatch-chip{width:28px;height:28px;flex:none;border-radius:50%;border:1px solid rgba(43,42,40,.15);object-fit:cover}
.pdpx .swatch:hover::after,.pdpx .swatch.active::after{content:"";position:absolute;inset:-4px;border:2px solid var(--line);border-radius:50%}
.pdpx .swatch.active::after{border-color:var(--ink)}

/* THEME: segmented pill track */
.pdpx-seg{position:relative;display:flex;background:var(--card);border-radius:var(--r-pill);padding:3px;overflow-x:auto;scrollbar-width:none;border:1px solid var(--line)}
.pdpx-seg::-webkit-scrollbar{display:none}
.pdpx-seg-btn{position:relative;z-index:1;flex:1 0 auto;border:0;background:none;padding:9px 14px;border-radius:var(--r-pill);font-family:var(--font);font-size:var(--t-meta);font-weight:700;color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:color .2s;text-align:center}
.pdpx-seg-btn.active{color:var(--ink);background:var(--bg);border:1.5px solid var(--line)}

/* Weeskinderen. De browser verdeelt een kop nu over de regels in plaats van hem
   vol te laten lopen en het laatste woord alleen te laten staan. Gemeten stand
   voor deze regel: 32 koppen met een laatste regel van een woord, waaronder
   "vakmensen" op de homepage-hero en "Waskommen" in de categoriekaarten.
   Werkt vanaf Chrome 114, Safari 17.5 en Firefox 121; oudere browsers negeren
   hem gewoon, dus er is geen terugval nodig. Alleen op koppen: op lopende tekst
   is balance duur en boven de zes regels doet de browser het toch niet. */
h1,h2,h3,.ld-hero-title,.bk-hero-title,.ld-catcard-title,.ld-blogcard-title{text-wrap:balance}

/* THEME: footer */
.footer{background:var(--bg);border-top:1px solid var(--line);padding:48px 0 30px;margin-top:20px}
/* De strook draagt DRIE beloftes, dus drie kolommen. Hij stond op vier: de
   vierde bleef leeg en de drie kolommen waren daardoor 313px in plaats van
   440px. Net te smal voor de leveringsregel, die als enige van de drie over
   twee regels brak en de rij scheef trok. Onder 760px gaan ze onder elkaar,
   want drie items in twee kolommen levert altijd een halve tweede rij met een
   gat ernaast. Alle drie de blokken worden door de grid even hoog. */
.foot-usps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 24px;padding-bottom:36px;border-bottom:1px solid var(--line)}
/* Het vinkje lijnt uit op de KOP, niet op het midden van het blok. Zolang het
   in het midden stond zakte het de helft van een regelhoogte mee zodra een van
   de drie koppen afbrak: gemeten 10px op 1200px breed en 11px op 900px, terwijl
   de koppen zelf altijd wel op een lijn stonden. Daarom start en niet center:
   het vinkje is 22px en een kopregel ook, dus ze staan gelijk ongeacht het
   aantal regels eronder.
   Het vinkje MOET grid-row 1/3 houden, ook al staat het maar op de eerste regel.
   Met 1/2 komt rij 2 van de eerste kolom vrij, valt de onderregel daar via
   auto-placement in en staat de kop opeens alleen in de tweede kolom. Dat is
   op 22 aug een halfuur live geweest en zag er kapot uit. */
.foot-usps>div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-content:start}
.foot-usps .chk{width:22px;height:22px;grid-row:1/3;align-self:start}
.foot-usps b{font-size:var(--t-meta)}
.foot-usps span{font-size:var(--t-meta);color:var(--ink-2)}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:36px 0}
.foot-cols h4,.foot-cols h2{font-size:var(--t-meta);margin-bottom:14px}
.foot-cols a{display:block;padding:5px 0;font-size:var(--t-meta);color:var(--ink-2)}
.foot-cols a:hover{color:var(--ink)}
.foot-social{display:flex;gap:12px;margin-top:12px}
/* Zelfde reden: het icoon is 22x22 en dat is te klein om te raken. Hier is er
   wel ruimte, dus het volle 44x44 van WCAG AAA. */
.foot-social a{display:inline-flex;padding:0;color:var(--ink-2);position:relative}
.foot-social a::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.foot-social a:hover{color:var(--ink)}
.foot-social svg{width:22px;height:22px;fill:currentColor}
.foot-bottom{display:flex;align-items:center;gap:16px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap}
.foot-merk{display:flex;align-items:center;gap:12px}
.foot-logo{height:38px;width:auto;display:block}
.foot-bottom p{font-size:var(--t-meta);color:var(--ink-2);margin:0}
/* NEW: bedrijfsgegevens in the footer bottom row (name, Leerdam address, KvK, BTW) */
.foot-bedrijf{margin-left:auto;text-align:right}

/* THEME: floating WhatsApp button */
.wa-widget{position:fixed;right:22px;bottom:22px;z-index:70}
.wa-btn{width:60px;height:60px;border-radius:50%;background:#25d366;border:0;cursor:pointer;color:var(--bg);display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.22);transition:.15s}
.wa-btn svg{width:34px;height:34px;fill:currentColor}
.wa-btn:hover{background:#1ebe5b;transform:translateY(-2px)}
.wa-ico{width:1.05em;height:1.05em;fill:currentColor;vertical-align:-.16em;margin-right:.45em}
.wa-ico--green{fill:#25D366}

/* THEME: responsive */
@media(max-width:1023px){
  .pdpx{flex-direction:column}
  .pdpx-stage{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:1.05;padding:24px}
  .pdpx-card{width:100%;flex:none;margin:16px 0 0}
  /* Het logo staat gecentreerd, dus de nav heeft links altijd precies
     (breedte - logobreedte)/2 - padding tot zijn beschikking: 316px op 768.
     Sinds "Webshop" erbij staat is de rij 407px breed en botst hij daaronder
     op het logo. Onder 1024 gaat de nav daarom in de hamburger, die alle vier
     de pijlers al toont (#wkMobileNav). */
  .menu-toggle{display:grid}
  .topnav{display:none}
  .mobile-nav.open{display:block}
  /* Twee kolommen in plaats van drie zodra het paneel smaller wordt dan waar
     drie kolommen van 300px in passen. Het paneel zelf is hier al verborgen,
     maar de regel staat er voor het geval de nav later lager mag doorlopen. */
  .tn-panel-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}
@media(max-width:1040px){
  .foot-cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .foot-usps{grid-template-columns:1fr;gap:16px}
}
@media(max-width:600px){
  /* Tikdoelen (WCAG 2.5.5): op aanraakschermen minimaal 44px hoog. De
     footerlinks zijn block, dus echte padding; de kruimellinks zitten in een
     rij en groeien via hun bestaande hitzone-pseudo, die kan daar niet
     overlappen. De foot-legal-links krijgen inline-block plus padding, want
     een pseudo van 44px zou daar de rij erboven en eronder afdekken. */
  .foot-cols a{padding:12px 0}
  .foot-legal a{display:inline-block;padding:12px 0}
  /* Ook 6px breder aan beide kanten: "Home" is 38px breed en de norm is 44.
     De scheider tussen twee kruimels is ruim 20px, dus de zones raken elkaar
     niet. */
  .crumbs a::after{height:44px;left:-6px;right:-6px}
}
@media(max-width:760px){
  .pdpx{padding:0 14px}
  .pdpx-card{padding:20px}
  .pdpx-title{font-size:var(--t-h3)}
  .pdpx-desc-section{padding:28px 24px 0}
  .topbar-usps span+span{display:none}
  .header-right .search{display:none}
  /* De verbouwknop blijft op de telefoon staan, alleen compacter: hij is de
     ingang naar de andere helft van het bedrijf en die mag niet alleen achter
     de hamburger zitten. Onder 380px wint de winkelmand en verdwijnt hij; in
     het paneel staat hij dan nog steeds bovenaan. */
  .hdr-verbouw{padding:8px 13px;font-size:var(--t-eyebrow);letter-spacing:.08em;gap:5px}
  .hdr-verbouw-ic{width:14px;height:14px}
  .header-right{gap:12px}
  /* Precies hier verdwijnt het bureaubladzoekveld, dus precies hier komt de
     magnifier ervoor in de plaats. Tussen 761 en 1023 verandert er niets. */
  .hicon-search{display:grid}
  /* Zoeken zonder JavaScript. .mobile-nav.open komt van cart.js; :target komt
     van de browser zelf zodra de magnifier naar #wkMobileNav wijst. Allebei
     zetten ze display:block, dus ze kunnen elkaar niet tegenspreken. */
  #wkMobileNav:target{display:block}
  /* Een sprong naar #wkMobileNav zet de bovenkant van het paneel op y=0, en
     daar staat de sticky .header (87px hoog op elke telefoonbreedte) al
     overheen: het zoekveld van het paneel kwam op y=10 uit en zat dus onder de
     header. Precies het veld waar de magnifier voor bedoeld is. Deze marge
     laat de sprong onder de header eindigen. */
  #wkMobileNav{scroll-margin-top:87px}
  /* Wie zonder JavaScript het paneel opent moet het ook weer dicht kunnen
     krijgen: :target laat pas los bij een echte fragmentnavigatie, en de
     hamburger is een <button> zonder href. Deze regel toont daarom precies dan
     een sluitlink (href="#"). Met JavaScript opent het paneel via .open, dus
     dan blijft het menu er exact uitzien zoals het was. */
  #wkMobileNav:target .mnav-close{display:block}
  /* cart.js zet .wk-nav-js zodra het de bediening overneemt. history.replaceState
     haalt de fragmentnaam wel uit de URL maar niet uit :target, dus zonder deze
     regel bleef het paneel na een landing op #wkMobileNav openstaan tegen elke
     tik in. Vanaf hier telt alleen nog .open. */
  .wk-nav-js #wkMobileNav:target:not(.open){display:none}
  .foot-bedrijf{margin-left:0;text-align:left}
}

/* ===================================================================
   NEW. Content shapes the Shopify PDP does not have: a gallery filmstrip,
   link-based option rows (each option is another captured product page),
   a spec table, and optional add-on grids.
   =================================================================== */

.stage-wrap{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:12px;position:sticky;top:96px}
.stage-wrap .pdpx-stage{width:100%}
.thumbs{display:flex;gap:12px;flex-wrap:wrap;padding:0 8px}
.thumbs img{width:78px;height:78px;object-fit:contain;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;opacity:.7;transition:.15s;padding:4px}
.thumbs img:hover,.thumbs img.active{opacity:1;border-color:var(--ink)}

/* Option rows whose values are links to other product pages */
.pdpx-option .opt-links{display:flex;flex-wrap:wrap;gap:12px;padding:2px}
.pdpx-option .swatch{display:grid}
.pdpx-option .opt-pills{display:flex;flex-wrap:wrap;gap:8px}
.opt-pill{display:inline-block;padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--bg);font-size:var(--t-meta);font-weight:700;color:var(--ink-2);transition:.15s}
.opt-pill:hover{border-color:var(--muted);color:var(--ink)}
.opt-pill.active{color:var(--ink);border-color:var(--ink)}

/* Detailed option row (wastafel): the card shows the current choice only and
   opens a modal with the full grid. Q1 shows the same set in a paddled slider. */
.opt-current{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);font-family:var(--font);cursor:pointer;transition:.15s}
.opt-current:hover{border-color:var(--muted)}
.opt-current:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.opt-current>img{width:64px;height:64px;flex:none;object-fit:contain;background:var(--bg)}
.opt-current-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.opt-current-body b{font-size:var(--t-meta)}
.opt-current-body .delta{font-size:var(--t-eyebrow);color:var(--ink-2);line-height:1.35}
.opt-current-change{flex:none;align-self:center;font-size:var(--t-eyebrow);font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* Compact add-on block: five optional categories, one row each, so none of
   them can be scrolled past. Same idiom as .opt-current above. */
.opt-extras{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);padding:12px;margin:0 0 18px;display:flex;flex-direction:column;gap:8px}
.opt-extras-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 2px 4px}
.opt-extras-head b{font-size:var(--t-meta)}
.opt-extras-head span{font-size:var(--t-eyebrow);color:var(--ink-2)}
.opt-row{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
.opt-row.chosen{border-color:var(--muted)}
.opt-row-thumb{width:44px;height:44px;flex:none;border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.opt-row-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.opt-row-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.opt-row-body b{font-size:var(--t-eyebrow);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt-row.chosen .opt-row-body b{font-weight:700}
.opt-row-body .delta{font-size:var(--t-eyebrow);color:var(--ink-2)}
.opt-row.chosen .opt-row-body .delta{color:var(--ink);font-weight:700}
.opt-row-cta{flex:none;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--t-eyebrow);font-weight:700;padding:8px 14px;cursor:pointer;transition:.15s}
.opt-row-cta:hover{border-color:var(--ink)}
.opt-row-cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* "Stel samen": the choices that belong to the product itself (waskom, greep)
   rather than the optional extras below. Same row idiom, weighted heavier so
   the required step reads first — the card surface instead of the page
   background, and a solid rule down the left of each open choice. Gold stays
   scarce: the primary buy button keeps it, these do not. */
.opt-choices{background:var(--card);border-color:var(--muted)}
.opt-choices .opt-row{background:var(--bg)}
.opt-row-choice{border-left:3px solid var(--muted)}
.opt-row-choice.chosen{border-left-color:var(--ink)}
.opt-row-choice .opt-row-body .delta{color:var(--ink)}
.opt-row-cta-key{background:var(--merk);border-color:var(--merk);color:var(--bg)}
.opt-row-cta-key:hover{background:var(--merk-hover);border-color:var(--merk-hover)}
.opt-row.chosen .opt-row-cta-key{background:var(--bg);border-color:var(--line);color:var(--ink)}
.opt-row.chosen .opt-row-cta-key:hover{border-color:var(--ink)}

/* Running total, in the shape of the plissexxl.nl configurator */
.totals{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);padding:12px 14px;margin:0 0 16px;display:flex;flex-direction:column;gap:8px}
.totals-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:var(--t-meta);color:var(--ink-2)}
.totals-row b{font-size:var(--t-meta);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.totals-grand{border-top:1px solid var(--line);margin-top:2px;padding-top:8px;color:var(--ink);font-weight:700}
.totals-grand b{font-size:var(--t-h3)}

/* Modal picker */
.opt-modal{padding:0;border:0;background:none;max-width:none;max-height:none;overflow:visible}
.opt-modal::backdrop{background:rgba(43,42,40,.55)}
.opt-modal-inner{width:min(920px,92vw);max-height:86vh;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 50px rgba(43,42,40,.28);overflow:hidden}
.opt-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line)}
.opt-modal-head h3,.opt-modal-head h2{font-family:var(--font-kop);font-weight:500;text-transform:uppercase;letter-spacing:.01em;font-size:var(--t-h3)}
.opt-modal-close{width:38px;height:38px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--bg);color:var(--ink);cursor:pointer;transition:.15s}
.opt-modal-close:hover{border-color:var(--muted)}
.opt-modal-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
/* minmax(0,1fr) + min-width:0 below: grid items default to min-width:auto, and
   a <button> item resolves that to its min-content width, which blows the grid
   wider than the dialog. */
.opt-modal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:22px;overflow-y:auto}
.opt-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);font-size:var(--t-eyebrow);line-height:1.35;color:var(--ink);transition:.15s}
.opt-card:hover{border-color:var(--muted);box-shadow:var(--shadow)}
.opt-card.active{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.opt-card img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--bg);border-radius:var(--r-sm)}
.opt-card b{font-size:var(--t-eyebrow)}
.opt-card .delta{color:var(--ink-2);font-size:var(--t-eyebrow)}
.opt-card-flag{position:absolute;top:8px;right:8px;background:var(--merk);color:var(--bg);font-size:var(--t-eyebrow);font-weight:700;letter-spacing:.02em;padding:3px 8px;border-radius:var(--r-pill)}
/* Add-on picker cards are <button>: reset the UA button look, keep .opt-card. */
button.opt-card{width:100%;min-width:0;text-align:left;font-family:var(--font);cursor:pointer;align-items:stretch}
button.opt-card b,button.opt-card .delta{min-width:0;overflow-wrap:anywhere}
button.opt-card:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
button.opt-card.unavailable{opacity:.55;cursor:not-allowed}
button.opt-card.unavailable:hover{border-color:var(--line);box-shadow:none}
/* Image wrapper with a styled empty state, so a missing capture never shows
   the browser's broken-image icon. */
.thumb-img{display:block;width:100%;height:100%}
.thumb-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.thumb-img.thumb-missing{background:var(--card);border-radius:var(--r-sm);position:relative}
.thumb-img.thumb-missing::after{content:"Geen foto";position:absolute;inset:0;display:grid;place-items:center;font-size:var(--t-eyebrow);font-weight:600;color:var(--ink-2);text-align:center}
button.opt-card .opt-card-thumb{aspect-ratio:1;background:var(--bg);border-radius:var(--r-sm);overflow:hidden}
.opt-row-thumb .thumb-img.thumb-missing::after{font-size:var(--t-eyebrow)}
.picker-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-top:1px solid var(--line);background:var(--bg)}
/* Option detail: one option enlarged, with Terug / Toevoegen. The grid and
   foot keep display:grid/flex, which beats the UA [hidden] rule, so hide
   them explicitly while the detail is open. */
.opt-modal-grid[hidden],.picker-foot[hidden]{display:none}
.opt-detail{display:flex;flex-direction:column;gap:16px;padding:22px;overflow-y:auto}
.opt-detail-img{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);overflow:hidden}
.opt-detail-img .thumb-img{aspect-ratio:1;max-height:44vh;margin:0 auto}
.opt-detail-img .thumb-img.thumb-missing::after{font-size:var(--t-meta)}
.opt-detail-body{display:flex;flex-direction:column;gap:8px}
.opt-detail-name{font-size:var(--t-body);line-height:1.35;overflow-wrap:anywhere}
.opt-detail-price{color:var(--ink-2);font-size:var(--t-meta)}
.opt-detail-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.opt-detail-add{flex:0 1 auto}
.picker-hint{font-size:var(--t-eyebrow);color:var(--ink-2);line-height:1.45}
body.modal-open{overflow:hidden}

/* Review step before add-to-cart */
.review-modal .opt-modal-inner{width:min(760px,92vw)}
.review-body{padding:22px;overflow-y:auto}
.review-summary{display:flex;gap:16px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
.review-summary>img{width:96px;height:96px;flex:none;object-fit:contain;background:var(--bg);border-radius:var(--r-sm)}
.review-summary-body{min-width:0;display:flex;flex-direction:column;gap:8px}
.review-title{font-size:var(--t-meta);line-height:1.35}
.review-lines{display:flex;flex-direction:column;gap:4px}
.review-line{display:flex;gap:8px;font-size:var(--t-meta)}
.review-line span{color:var(--ink-2);min-width:120px}
.review-line b{font-weight:700}
.review-price{font-size:var(--t-h3);font-weight:700}
.review-addons{margin-top:22px}
.review-addons-head{font-size:var(--t-meta);margin-bottom:4px}
.review-note{font-size:var(--t-eyebrow);color:var(--ink-2);margin:0 0 14px;line-height:1.5}
.review-block{margin-top:16px}
.review-block h4{font-size:var(--t-meta);margin-bottom:10px}
.review-more{font-weight:400;color:var(--ink-2);font-size:var(--t-eyebrow)}
.review-addon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.review-addon{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);font-size:var(--t-eyebrow)}
.review-addon .thumb{aspect-ratio:1;display:grid;place-items:center;background:var(--bg)}
.review-addon .thumb img{max-width:100%;max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.review-addon .name{line-height:1.35}
.review-addon .price{font-weight:700;font-size:var(--t-meta);margin-top:auto}
.review-add{margin-top:4px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:transparent;color:var(--ink);font-family:var(--font);font-size:var(--t-eyebrow);font-weight:600;cursor:pointer}
.review-add:disabled{color:var(--ink-2);cursor:not-allowed;opacity:.75}
.review-done-head{font-size:var(--t-meta);font-weight:700;margin:0 0 6px}
.review-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;border-top:1px solid var(--line);background:var(--bg)}
.review-back{border:1px solid var(--line);border-radius:var(--r-pill);background:transparent;color:var(--ink);font-family:var(--font);font-size:var(--t-meta);font-weight:600;padding:13px 22px;cursor:pointer}
.review-back:hover{border-color:var(--muted)}
.review-confirm{flex:0 0 auto}
/* Head: title plus "2 van 4" step counter */
.review-head-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.review-progress{font-size:var(--t-eyebrow);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
/* Skipping is a neutral action, not a gold one: gold stays for confirm. */
.review-skip{border:1px solid var(--muted);border-radius:var(--r-pill);background:transparent;color:var(--ink);font-family:var(--font);font-size:var(--t-meta);font-weight:700;padding:13px 22px;cursor:pointer}
.review-skip:hover{border-color:var(--ink)}
.review-totals{margin-top:18px;background:var(--card)}
.review-chips{display:flex;flex-wrap:wrap;gap:8px}
.review-chip{border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--t-eyebrow);font-weight:700;padding:8px 14px;cursor:pointer;transition:.15s}
.review-chip:hover{border-color:var(--ink)}
.review-modal .review-line b{text-align:right;flex:1}

/* Spec table */
.specs{max-width:760px}
.specs h2{font-family:var(--font-kop);font-weight:500;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(26px,3vw,36px);margin-bottom:18px}
.specs table{width:100%;border-collapse:collapse;font-size:var(--t-meta)}
.specs tr{border-bottom:1px solid var(--line)}
.specs tr:nth-child(odd){background:var(--card)}
.specs th{text-align:left;font-weight:600;padding:11px 14px;width:44%;color:var(--ink)}
.specs td{padding:11px 14px;color:var(--ink)}

/* Optional add-on sections below the fold */
.addons{padding:44px 0 8px}
.addons h2{font-family:var(--font-kop);font-weight:500;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(22px,2.4vw,30px);margin-bottom:6px}
.addons .addon-note{font-size:var(--t-meta);color:var(--ink-2);margin:0 0 18px}
/* Same idiom as the theme's .sale-track carousel: a horizontal rail, so a
   40-item Q1 slider does not become a 40-tile wall. */
.addon-grid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px;scrollbar-width:thin}
.addon-grid::-webkit-scrollbar{height:8px}
.addon-grid::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-sm)}
.addon{flex:0 0 240px;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.18s;display:flex;flex-direction:column}
.addon:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.addon .thumb{background:var(--bg);aspect-ratio:1;display:grid;place-items:center;padding:12px}
.addon .thumb img{max-width:100%;max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.addon .info{padding:12px 14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.addon .name{font-size:var(--t-meta);font-weight:600;line-height:1.35}
.addon .price{font-size:var(--t-body);font-weight:800;margin-top:auto}
@media(max-width:1023px){.opt-modal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
  .addon{flex-basis:200px}
  .opt-modal-inner{width:100vw;max-width:100vw;max-height:92vh;border-radius:var(--r) var(--r) 0 0;border-bottom:0}
  .opt-modal{margin:auto auto 0;max-height:92vh}
  .opt-modal-head{padding:16px 16px}
  .opt-modal-head h3,.opt-modal-head h2{font-size:var(--t-h3)}
  .opt-modal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px}
  .opt-detail{padding:16px;gap:12px}
  .opt-detail-img .thumb-img{max-height:38vh}
  .opt-detail-actions{margin-top:8px}
  .opt-detail-actions .review-back,.opt-detail-actions .opt-detail-add{flex:1}
  .opt-current-change{align-self:flex-start}
  .review-body{padding:16px}
  .review-summary{flex-direction:column}
  .review-summary>img{width:100%;height:150px}
  .review-line{flex-direction:column;gap:0}
  .review-line span{min-width:0}
  .review-addon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .review-foot{flex-direction:column-reverse;align-items:stretch;padding:14px 16px}
  .review-foot button{width:100%}
  /* At 390px "Geen afvoerset gekozen" does not fit on one line: wrap to two
     instead of ellipsing the label away. */
  .opt-row-body b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
  .opt-row-cta{padding:8px 12px}
}
@media(max-width:1023px){.stage-wrap{position:static}}

/* NEW: cookie consent banner (only in the DOM once tracking-config.mjs has an
   ID; see transform.mjs consentChrome + assets/consent.js). Fixed bottom bar,
   store tokens only; accept and reject are deliberately IDENTICAL buttons. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:120;padding:16px;background:rgba(43,42,40,.32)}
.consent-box{max-width:680px;margin:0 auto;background:var(--bg);border:1px solid var(--muted);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px}
.consent-box h3{font-family:var(--font-kop);font-weight:500;text-transform:uppercase;letter-spacing:.01em;font-size:var(--t-h3);margin:0 0 8px}
.consent-box p{font-size:var(--t-meta);line-height:1.6;color:var(--ink);margin:0 0 14px}
.consent-box p a{text-decoration:underline;text-underline-offset:2px}
.consent-opts{display:grid;gap:8px;margin:0 0 16px}
.consent-opt{display:flex;align-items:flex-start;gap:8px;font-size:var(--t-meta);line-height:1.5;cursor:pointer}
.consent-opt input{margin:3px 0 0;accent-color:var(--merk)}
.consent-opt input:disabled{cursor:not-allowed}
.consent-opt b{margin-right:6px}
.consent-btns{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.consent-btn{border:0;border-radius:var(--r-pill);background:var(--merk);color:var(--bg);font-family:var(--font);font-size:var(--t-meta);font-weight:700;padding:11px 22px;cursor:pointer;transition:background-color .15s}
.consent-btn:hover{background:var(--merk-hover)}
.consent-save{border:0;background:none;color:var(--ink);font-family:var(--font);font-size:var(--t-meta);font-weight:600;text-decoration:underline;text-underline-offset:2px;padding:11px 6px;cursor:pointer;margin-left:auto}
@media(max-width:600px){
  .consent{padding:0}
  .consent-box{border-radius:var(--r) var(--r) 0 0;border-left:0;border-right:0;border-bottom:0}
  .consent-btns{flex-direction:column;align-items:stretch}
  .consent-save{margin-left:0;text-align:center}
}

/* ---------------------------------------------------------- fototegels
   Lijniconen eruit, echt beeld erin. De gekozen designrichting
   (magazine editorial, 23 aug) verbiedt iconen als decoratie, en met reden:
   een omtreklijn van een toilet zegt niets over materiaal, kleur of maat, en
   acht van die tekeningen van 112px in een band van 1360px is een rij
   postzegels met heel veel lucht ertussen. Precies de eerste sectie onder de
   hero, dus het eerste wat een bezoeker van de aannemerskant zag.

   Twee van de acht ruimtes hebben geen eigen foto (slaapkamer en zolder). Die
   krijgen een vlak in de merkkleur met de naam groot in goud. Dat leest als een
   bewuste kleurblokkade in plaats van als een gat, en het is eerlijk: we tonen
   geen ruimte die we niet hebben gebouwd. Zodra de foto er is vervalt de
   uitzondering vanzelf, want het bestaan van het bestand bepaalt de variant. */
.wk-tegels{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);list-style:none;margin:0;padding:0}
.wk-tegel{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--merk);text-decoration:none}
.wk-tegel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--duur-traag) var(--ease-uit)}
.wk-tegel::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,18,16,.86) 0%,rgba(20,18,16,.62) 12%,rgba(20,18,16,.22) 26%,rgba(20,18,16,.04) 40%,rgba(20,18,16,0) 55%)}
.wk-tegel--leeg{background:var(--zand-11)}
.wk-tegel--leeg::after{background:none}
.wk-tegel-naam{position:absolute;left:var(--sp-4);right:var(--sp-4);bottom:var(--sp-4);z-index:1;margin:0;font-family:var(--font-kop);font-weight:500;text-transform:uppercase;letter-spacing:.01em;line-height:1.08;font-size:var(--t-h3);color:var(--bg);overflow-wrap:anywhere}
/* Op een smalle tegel (twee kolommen op 390) paste "Badmeubelen" niet op een
   regel en werd hij afgeknipt; gemeten 30 aug: scrollWidth 167 tegen 135. Een
   maat kleiner op mobiel plus overflow-wrap houdt elk label binnen zijn tegel. */
@media(max-width:600px){.wk-tegel-naam{font-size:var(--t-lead)}}
.wk-tegel--leeg .wk-tegel-naam{color:var(--goud-9)}
.wk-tegel-belofte{position:absolute;left:var(--sp-4);right:var(--sp-4);top:var(--sp-4);z-index:1;margin:0;font-size:var(--t-meta);line-height:1.5;color:rgba(246,244,242,.78)}
.wk-tegel:hover img,.wk-tegel:focus-visible img{transform:scale(1.05)}
@media(prefers-reduced-motion:reduce){.wk-tegel img,.wk-tegel:hover img{transition:none;transform:none}}
/* Vijf categorieen passen op een brede rij; onder 1100px zijn vijf tegels van
   4/5 te smal om de foto nog te laten zien, dus dan drie en daarna twee. */
.wk-tegels--vijf{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.wk-tegels--vijf{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.wk-tegels{grid-template-columns:repeat(2,1fr)}.wk-tegels--vijf{grid-template-columns:repeat(2,1fr)}}

/* ------------------------------------------------- productfamiliekaart
   Drie families in plaats van tien lijntekeningen. Licht vlak en geen donker
   scrim, want de productfoto's zijn uitsnedes op wit en die drijven in een
   donkere tegel. De toepassingen staan als pillen onderaan, zodat je in een
   oogopslag ziet dat plissé ook voor een velux en een veranda kan. */
.rd-fam{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);list-style:none;margin:0;padding:0}
.rd-fam-kaart{display:flex;flex-direction:column;background:var(--zand-1);border:1px solid var(--zand-5);border-radius:var(--r);overflow:hidden;box-shadow:var(--schaduw-2);transition:box-shadow var(--duur) var(--ease-uit),transform var(--duur) var(--ease-uit)}
.rd-fam-kaart:hover,.rd-fam-kaart:focus-within{box-shadow:var(--schaduw-4);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.rd-fam-kaart,.rd-fam-kaart:hover{transform:none;transition:none}}
.rd-fam-pic{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:var(--sp-3);background:var(--goud-2);border-bottom:1px solid var(--zand-5)}
.rd-fam-pic img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.rd-fam-body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.rd-fam-naam{margin:0;font-family:var(--font-kop);font-weight:500;text-transform:uppercase;font-size:var(--t-h3);line-height:1;color:var(--ink)}
.rd-fam-regel{margin:0;font-size:var(--t-meta);line-height:1.55;color:var(--ink-2);max-width:30rem}
.rd-fam-links{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:auto}
.rd-fam-links a{position:relative;display:inline-flex;align-items:center;padding:9px 15px;border-radius:var(--r-pill);box-shadow:var(--lijn-inset);font-size:var(--t-meta);font-weight:600;color:var(--ink);text-decoration:none;transition:background var(--duur) var(--ease-uit),color var(--duur) var(--ease-uit)}
.rd-fam-links a::after{content:"";position:absolute;top:50%;left:0;right:0;height:44px;transform:translateY(-50%)}
.rd-fam-links a:hover{background:var(--ink);color:var(--bg)}
@media(max-width:900px){.rd-fam{grid-template-columns:1fr}}

/* ------------------------------------------------------- vragen op de hub
   Zelfde accordeon als .rp-faq op de ruimtepagina's. Bewust dezelfde vorm: de
   bezoeker moet niet twee soorten uitklapper leren op een site. */
.lv-faq{max-width:74ch}
.lv-faq details{border-bottom:1px solid var(--line)}
.lv-faq summary{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:20px 0;font-size:var(--t-body);font-weight:600;cursor:pointer;list-style:none;color:var(--ink)}
.lv-faq summary::-webkit-details-marker{display:none}
.lv-faq summary::after{content:"+";color:var(--brons);font-size:var(--t-lead);line-height:1;flex:none}
.lv-faq details[open] summary::after{content:"\2212"}
.lv-faq details>div{padding:0 0 20px;max-width:var(--kolom);color:var(--ink-2);line-height:1.65}

/* De vragensectie als redactionele split: kop links, vragen rechts. Onder
   1000px klapt hij terug naar een kolom, want dan is er geen ruimte naast de
   leeskolom en zou de kop de vragen alleen maar wegduwen.
   De linkerkolom blijft meelopen bij het scrollen; dat is wat een aparte kolom
   rechtvaardigt in plaats van een kop boven het blok. */
/* Het tweede spoor is 46rem en niet 1fr. Met 1fr rekte het spoor mee tot de
   volle containerbreedte terwijl .lv-faq zijn inhoud op 74ch (ongeveer 720px)
   afkapt: gemeten op de stadspagina op 1440px was het spoor 896px bij een
   breedste inhoud van 720,5px, dus 175,5px bleef altijd leeg en de
   rechterkantlijn sprong. 46rem = 736px, net boven die 720,5px. */
.lv-faq-split{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,46rem);gap:var(--sp-8)}
.lv-faq-kop{position:sticky;top:var(--sp-9);align-self:start}
.lv-faq-lead{margin:var(--sp-4) 0 0;font-size:var(--t-lead);line-height:1.55;color:var(--ink-2);max-width:26rem}
.lv-faq-cta{display:inline-flex;align-items:center;margin-top:var(--sp-5);padding:13px 24px;border-radius:var(--r-pill);background:var(--goud-9);color:var(--accent-text);font-size:var(--t-meta);font-weight:700;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;text-decoration:none;transition:background var(--duur) var(--ease-uit)}
.lv-faq-cta:hover{background:var(--goud-10)}
@media(max-width:1000px){
  .lv-faq-split{grid-template-columns:1fr;gap:var(--sp-6)}
  .lv-faq-kop{position:static}
}

/* ------------------------------------------- van de webshop naar de aannemer
   Split met de foto links en de tekst rechts. Bewust een DONKERE band: hij moet
   opvallen tussen de kenmerkentabel en de verwante producten, want dit is de
   enige plek op 6.150 productpagina's waar de aannemerskant zich meldt.
   Het beeld is staand (900x1200), dus links een smalle kolom en rechts de
   tekst; onder 860px eronder in plaats van ernaast. */
.pdpx-plaats{margin-block:var(--sp-9) 0}
.pdpx-plaats-in{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:var(--sp-7);align-items:center;background:var(--merk);border-radius:var(--r);overflow:hidden;color:var(--bg)}
.pdpx-plaats-pic{align-self:stretch}
.pdpx-plaats-pic img{width:100%;height:100%;object-fit:cover;display:block}
.pdpx-plaats-tekst{padding:var(--sp-7) var(--sp-7) var(--sp-7) 0}
.pdpx-plaats-eyebrow{margin:0 0 var(--sp-3);font-size:var(--t-eyebrow);font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--goud-9)}
.pdpx-plaats h2{margin:0 0 var(--sp-3);font-family:var(--font-kop);font-weight:500;text-transform:uppercase;font-size:var(--t-h2);line-height:1;color:var(--bg)}
.pdpx-plaats-lead{margin:0 0 var(--sp-4);font-size:var(--t-lead);line-height:1.5;color:rgba(246,244,242,.86);max-width:34rem}
.pdpx-plaats-punten{margin:0 0 var(--sp-5);padding:0;list-style:none;display:grid;gap:var(--sp-2)}
.pdpx-plaats-punten li{position:relative;padding-left:26px;font-size:var(--t-meta);color:rgba(246,244,242,.86)}
.pdpx-plaats-punten li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:8px;border-left:2px solid var(--goud-9);border-bottom:2px solid var(--goud-9);transform:rotate(-45deg)}
.pdpx-plaats-cta{display:inline-flex;align-items:center;padding:13px 24px;border-radius:var(--r-pill);background:var(--goud-9);color:var(--accent-text);font-size:var(--t-meta);font-weight:700;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;white-space:nowrap;transition:background var(--duur) var(--ease-uit)}
.pdpx-plaats-cta:hover{background:var(--goud-10)}
@media(max-width:860px){
  /* minmax(0,1fr) en niet 1fr: het automatische minimum van 1fr is min-content,
     en de knop staat op white-space:nowrap uit hoofdstuk 5. Gemeten op 23 aug
     2026 op de live PDP: de knop is 310,4px breed en kan niet krimpen, plus
     2x32px padding van .pdpx-plaats-tekst wordt de enige baan 374,4px. Het
     kader is 342px op 390px en 312px op 360px, dus de band stak er 32,4
     respectievelijk 62,4px uit. overflow:hidden op .pdpx-plaats-in sneed dat
     af: rechts bleef nul padding over, de vinkjesregels liepen tot de rand en
     de rechter hoekafronding was weg. Zichtbaar op 6.150 productpagina's.
     Bewuste afwijking van de nowrap-regel, alleen hier: onder 430px mag de
     knop over twee regels. Hij is dan 68px hoog, ruim boven de 48px. */
  .pdpx-plaats-in{grid-template-columns:minmax(0,1fr);gap:0}
  .pdpx-plaats-pic{aspect-ratio:16/10}
  .pdpx-plaats-tekst{padding:var(--sp-6)}
  .pdpx-plaats-cta{white-space:normal;text-align:center}
}

/* Een rij losse diensten onder een tegelraster. Zelfde pilvorm als de rest van
   de site; het label ervoor maakt duidelijk dat het een ander niveau is dan de
   tegels erboven en niet zomaar meer van hetzelfde. */
.wk-sublinks{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:var(--sp-5) 0 0}
.wk-sublinks span{font-size:var(--t-meta);font-weight:600;color:var(--ink-2);margin-right:var(--sp-1)}
.wk-sublinks a{position:relative;display:inline-flex;align-items:center;padding:9px 15px;border-radius:var(--r-pill);box-shadow:var(--lijn-inset);font-size:var(--t-meta);font-weight:600;color:var(--ink);text-decoration:none;transition:background var(--duur) var(--ease-uit),color var(--duur) var(--ease-uit)}
.wk-sublinks a::after{content:"";position:absolute;top:50%;left:0;right:0;height:44px;transform:translateY(-50%)}
.wk-sublinks a:hover{background:var(--ink);color:var(--bg)}