/* Next Door Vintage, donker en sfeervol.
   Warm antraciet als achtergrond, objecten uitgelicht als in een etalage
   's avonds. Merkletters blijven: Krona One voor koppen, IBM Plex Sans voor
   tekst. Goud als accent, het merkgroen opgelicht zodat het op donker leeft. */

:root{
  --nacht:#141210;
  --podium:#1b1815;
  --vitrine:#221e1a;
  --lijn:#332d26;
  --lijn-op:#4a4137;

  --creme:#f2ece0;
  --creme-zacht:#a79d8d;
  --goud:#c9a24c;
  --goud-diep:#a8833a;
  --groen:#7f9d64;
  --rood:#c4705a;

  --kop:'Krona One',Georgia,serif;
  --tekst:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --r:3px;
  --breed:1280px;
  --overgang:.25s cubic-bezier(.4,0,.2,1);
  --gloed:0 0 60px -12px rgba(201,162,76,.28);

  /* Hieronder stond alles als vaste kleur door de stylesheet verspreid: 89
     waarden die bij een ander thema allemaal donker zouden blijven. Nu hebben
     ze een naam naar wat ze doen, zodat een tweede set kleuren genoeg is. */
  --veld:#0f0e0c;            /* verzonken invoervlak: zoekbalk, keuzelijst */
  --veld-beheer:#15130f;     /* hetzelfde, maar in het beheer */
  --fotovlak:#17150f;        /* achter een foto die zijn kader niet vult */
  --diepst:#100f0d;          /* voet van de pagina, en de beheeromgeving */
  --op-goud:#17140f;         /* letters op een gouden vlak */
  --goud-op:#dcb45c;         /* goud bij aanwijzen */
  --tekst-zacht:#d8d1c4;     /* lopende tekst, iets rustiger dan de kop */
  --tekst-fluister:#6e655a;  /* invulhulp en telwerk */
  --kopvlak:rgba(20,18,16,.92);
  --schaduw:#000;
  --lijn-overlay:rgba(242,236,224,.09);
  --rij-lijn:rgba(255,255,255,.05);
  --rij-hover:rgba(255,255,255,.02);

  /* Goud als losse kanaalwaarden. Je kunt in css geen doorzichtigheid over een
     variabele leggen zonder de kleur in onderdelen te hebben; met deze vorm
     kan rgba(var(--goud-rgb), .12) wel, en volgt de waas vanzelf het thema. */
  --goud-rgb:201,162,76;
  --badgevlak:rgba(20,18,16,.86);
  --sluier:rgba(23,20,15,.22);
  --schijnsel:rgba(255,240,210,.10);
  --aankondiging:#0e0d0b;    /* het smalle balkje bovenaan */
  --heroverloop:#191613;     /* bovenkant van het verloop achter de startpagina */
  --kop-beheer:#16140f;
  --knop-op-foto:rgba(20,18,16,.72);   /* hartje: ligt op beeld, hoort bij de bediening */
  --rood-tekst:#f0d6ce;
  --rood-op:#e08a72;
  --blauw:#8fb0d8;           /* alleen voor de status verzonden */
  --blauw-waas:rgba(130,160,200,.16);
  --groen-waas:rgba(127,157,100,.2);
  --groen-rand:rgba(127,157,100,.8);
  --rood-waas:rgba(196,112,90,.18);

  /* Letters die rechtstreeks op een foto liggen, met alleen een donker
     verloop eronder. Die horen NIET bij het thema: het verloop blijft in
     beide standen donker, dus de letters moeten in beide standen licht zijn.
     Dit ging bij het lichte thema mis - de categorietitels werden donker op
     een donkere ondergrond en waren niet meer te lezen. Daarom staan ze hier
     apart en worden ze hieronder niet overschreven. */
  --op-beeld:#f2ece0;
  --op-beeld-zacht:#c9c1b2;
  --op-beeld-accent:#d8b878;
}

/* ---------- licht thema ----------

   Dezelfde winkel bij daglicht. Alleen kleuren: geen enkele maat, afstand of
   vorm verandert mee, zodat er niets kan verschuiven dat je niet verwacht.

   Twee dingen die bij een kale paletwissel stukgingen en hier met opzet
   anders zijn: de bovenbalk stond op een vaste kleur en bleef donker terwijl
   de letters zwart werden, en de hartjes op de fotos verdwenen in het wit.
   Allebei staan ze nu in een variabele, dus ze draaien gewoon mee.

   Wat niet meedraait zijn de donkere verlopen over de categorietegels en de
   etalage. Die liggen op beeld en dienen de leesbaarheid van de titel, niet
   de sfeer: wit op een foto heeft ook bij daglicht een donkere ondergrond
   nodig. Merkkleuren van WhatsApp, Facebook en Pinterest blijven ook staan;
   die zijn van hen. */
[data-thema="licht"]{
  --nacht:#faf7f0;
  --podium:#ffffff;
  --vitrine:#ffffff;
  --lijn:#ddd3c2;
  --lijn-op:#b9ab93;

  --creme:#1f1b16;
  --creme-zacht:#5d554a;
  --goud:#7a5c2e;
  --goud-diep:#5f4722;
  --groen:#2f5d4a;
  --rood:#8c2f1f;

  --gloed:0 0 40px -20px rgba(122,92,46,.3);
  --goud-rgb:122,92,46;

  --veld:#f4f0e7;
  --veld-beheer:#f4f0e7;
  --fotovlak:#f1ece2;
  --diepst:#f2ede3;
  --op-goud:#ffffff;
  --goud-op:#5f4722;
  --tekst-zacht:#3a342c;
  --tekst-fluister:#857b6d;
  --kopvlak:rgba(255,255,255,.94);
  --schaduw:#6d6253;
  --lijn-overlay:rgba(31,27,22,.12);
  --rij-lijn:rgba(31,27,22,.07);
  --rij-hover:rgba(31,27,22,.035);
  --badgevlak:rgba(255,255,255,.9);
  --sluier:rgba(31,27,22,.12);
  --schijnsel:rgba(122,92,46,.07);
  --aankondiging:#f0ebe0;
  --heroverloop:#f4f0e7;
  --kop-beheer:#ffffff;
  --knop-op-foto:rgba(255,255,255,.86);
  --rood-tekst:#8c2f1f;
  --rood-op:#6f2416;
  --blauw:#2f5478;
  --blauw-waas:rgba(47,84,120,.12);
  --groen-waas:rgba(47,93,74,.14);
  --groen-rand:rgba(47,93,74,.75);
  --rood-waas:rgba(140,47,31,.12);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--nacht);color:var(--creme);
  font-family:var(--tekst);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--goud);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--creme)}
button{font-family:inherit}
h1,h2,h3{font-family:var(--kop);font-weight:400;line-height:1.24;letter-spacing:-.01em;color:var(--creme)}
h1{font-size:clamp(25px,3vw,38px);margin:0 0 14px}
h2{font-size:clamp(19px,2vw,25px);margin:0 0 18px}
h3{font-size:17px;margin:0 0 8px}
p{margin:0 0 15px}
::selection{background:var(--goud);color:var(--nacht)}

.wrap{max-width:var(--breed);margin:0 auto;padding:0 28px}
.wrap.smal{max-width:780px}
main{min-height:60vh}
.wrap>section,main>.wrap>section{margin:72px 0}
.middenop{padding:90px 0;text-align:center}
.lead{color:var(--creme-zacht);font-size:16.5px}
.meta{color:var(--creme-zacht);font-size:13px}
.bovenkop{font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--goud);margin:0 0 14px;font-weight:500}

/* ---------- aankondiging ---------- */
.aankondiging{background:var(--aankondiging);color:var(--creme-zacht);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--lijn)}
.aankondiging .wrap{display:flex;gap:40px;justify-content:center;padding:11px 28px;flex-wrap:wrap}
.aankondiging span{position:relative}
.aankondiging span+span::before{content:'';position:absolute;left:-21px;top:50%;
  width:4px;height:4px;border-radius:50%;background:var(--goud);opacity:.7;transform:translateY(-50%)}

/* ---------- kop ---------- */
.kop{background:var(--kopvlak);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:50}
.kopbar{display:flex;align-items:center;gap:28px;padding:16px 28px}
.merk{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--creme);flex-shrink:0}
.merk img{width:38px;height:38px;object-fit:contain;border-radius:0;border:0;
  filter:drop-shadow(0 0 14px rgba(var(--goud-rgb),.35))}
.merk span{font-family:var(--kop);font-size:15px;white-space:nowrap}
.merk:hover span{color:var(--goud)}

.hoofdmenu{display:flex;align-items:center;gap:24px;font-size:14px}
.hoofdmenu>a,.uitklap>summary{color:var(--creme);text-decoration:none;cursor:pointer;
  white-space:nowrap;padding:7px 0;border-bottom:1px solid transparent;
  transition:border-color var(--overgang),color var(--overgang)}
.hoofdmenu>a:hover,.uitklap>summary:hover{color:var(--goud);border-bottom-color:var(--goud)}
.uitklap{position:relative}
.uitklap>summary{list-style:none}
.uitklap>summary::-webkit-details-marker{display:none}
.uitklap>summary::after{content:'';display:inline-block;margin-left:7px;
  border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.megamenu{position:absolute;top:calc(100% + 14px);left:-20px;margin:0;padding:18px 22px;
  list-style:none;background:var(--vitrine);border:1px solid var(--lijn-op);border-radius:var(--r);
  box-shadow:0 24px 60px -24px var(--schaduw);min-width:440px;columns:2;column-gap:30px;z-index:60}
.megamenu li{break-inside:avoid;margin:0 0 9px}
.megamenu a{color:var(--creme);text-decoration:none;font-size:14px}
.megamenu a:hover{color:var(--goud)}

.kopacties{display:flex;align-items:center;gap:12px;margin-left:auto}
.zoekbalk{display:flex;align-items:center;background:var(--veld);border:1px solid var(--lijn);
  border-radius:var(--r);max-width:280px;transition:border-color var(--overgang)}
.zoekbalk:focus-within{border-color:var(--goud)}
.zoekbalk input{border:0;background:none;padding:10px 4px 10px 15px;font:inherit;
  font-size:13.5px;width:100%;min-width:0;outline:none;color:var(--creme)}
.zoekbalk input::placeholder{color:var(--tekst-fluister)}
.zoekbalk button{border:0;background:none;padding:9px 14px 9px 6px;cursor:pointer;
  color:var(--creme-zacht);display:flex}
.zoekbalk button:hover{color:var(--goud)}

.taalkiezer{position:relative}
.taalkiezer summary{list-style:none;cursor:pointer;padding:8px 12px;border:1px solid var(--lijn);
  border-radius:var(--r);font-size:11.5px;letter-spacing:.14em;color:var(--creme-zacht)}
.taalkiezer summary::-webkit-details-marker{display:none}
.taalkiezer summary:hover{border-color:var(--goud);color:var(--goud)}
.taalkiezer ul{position:absolute;right:0;top:calc(100% + 12px);margin:0;padding:8px;list-style:none;
  background:var(--vitrine);border:1px solid var(--lijn-op);border-radius:var(--r);
  box-shadow:0 24px 60px -24px var(--schaduw);min-width:170px;z-index:60}
.taalkiezer li a{display:block;padding:8px 13px;border-radius:2px;color:var(--creme);
  text-decoration:none;font-size:14px}
.taalkiezer li a:hover{background:rgba(var(--goud-rgb),.12);color:var(--goud)}
.taalkiezer li a.aan{color:var(--goud)}

.mandknop{display:flex;align-items:center;gap:9px;background:var(--goud);color:var(--op-goud);
  text-decoration:none;padding:10px 18px;border-radius:var(--r);font-size:14px;
  font-weight:600;white-space:nowrap;transition:background var(--overgang)}
.mandknop:hover{background:var(--goud-op);color:var(--op-goud)}
.mandknop b{background:var(--sluier);border-radius:99px;min-width:20px;height:20px;
  display:grid;place-items:center;font-size:11.5px}
.mandbedrag{font-variant-numeric:tabular-nums}

/* ---------- kruimels ---------- */
.kruimels{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:12.5px;
  color:var(--creme-zacht);padding:26px 0 8px}
.kruimels a{color:var(--creme-zacht);text-decoration:none}
.kruimels a:hover{color:var(--goud)}
.kruimels .sep{opacity:.35}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;
  background:radial-gradient(900px 420px at 72% 42%,rgba(var(--goud-rgb),.14),transparent 62%),
             linear-gradient(180deg,var(--heroverloop),var(--nacht));
  border-bottom:1px solid var(--lijn)}
.heroinhoud{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:64px;align-items:center;padding-top:88px;padding-bottom:88px}
.herotekst h1{font-size:clamp(29px,4.2vw,52px);line-height:1.06;margin-bottom:18px}
.herotekst .lead{max-width:40ch;font-size:17px}
.herotekst .knop{margin-top:10px}
.herofoto{position:relative;display:block;text-decoration:none;border-radius:var(--r);
  overflow:hidden;box-shadow:0 40px 90px -40px var(--schaduw), var(--gloed)}
.herofoto img{aspect-ratio:4/3;object-fit:cover;width:100%;
  transition:transform .8s ease,filter .5s ease}
.herofoto:hover img{transform:scale(1.04);filter:brightness(1.06)}
.herofoto::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(10,9,8,.75));
  border:1px solid var(--lijn-overlay);border-radius:var(--r)}
.herolabel{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;gap:16px;
  align-items:baseline;padding:20px 22px;font-size:13.5px;color:var(--op-beeld)}
.herolabel b{margin-left:auto;color:var(--op-beeld-accent);white-space:nowrap;font-size:15px}

/* ---------- knoppen ---------- */
.knop{display:inline-block;background:var(--goud);color:var(--op-goud);border:0;border-radius:var(--r);
  padding:14px 32px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  text-decoration:none;transition:background var(--overgang),transform var(--overgang)}
.knop:hover{background:var(--goud-op);color:var(--op-goud)}
.knop:active{transform:translateY(1px)}
.knop.groot{width:100%;text-align:center;padding:17px 32px;font-size:16px}
.knop.klein{padding:9px 18px;font-size:13px}
.link{background:none;border:0;color:var(--creme-zacht);text-decoration:underline;
  cursor:pointer;font:inherit;font-size:13px;padding:0}
.link:hover{color:var(--rood)}
.meerlink{font-size:14px;text-decoration:none;white-space:nowrap;color:var(--goud)}
.meerlink:hover{text-decoration:underline}

/* ---------- sectiekoppen ---------- */
.sectiekop{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:24px}
.sectiekop h2,.wrap>section>h2{position:relative;padding-bottom:14px;margin-bottom:0}
.sectiekop h2::after,.wrap>section>h2::after{content:'';position:absolute;left:0;bottom:0;
  width:42px;height:1px;background:var(--goud)}
.wrap>section>h2{margin-bottom:24px}

/* ---------- productraster ---------- */
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:34px 26px}
.kaartfoto{position:relative;display:block;border-radius:var(--r);overflow:hidden;
  background:var(--podium);border:1px solid var(--lijn);text-decoration:none;
  transition:border-color var(--overgang),box-shadow var(--overgang)}
.kaartfoto::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 38%,var(--schijnsel),transparent 70%);
  opacity:0;transition:opacity var(--overgang)}
.kaart:hover .kaartfoto{border-color:var(--goud-diep);box-shadow:0 26px 54px -30px var(--schaduw),var(--gloed)}
.kaart:hover .kaartfoto::before{opacity:1}
/* De hele foto, niet het midden ervan.

   Dit stond op object-fit:cover, wat de foto vierkant bijsnijdt. Gemeten over
   alle 88 hoofdfoto's: gemiddeld 23% eraf, en bij de ergste - een liggend
   toetsenbord van 800x384 - meer dan de helft. Je zag dan het middenstuk en
   moest maar raden wat het was.

   Dat botst met waar deze winkel om draait: "wij retoucheren onze foto's niet"
   en "je krijgt wat je op de foto ziet". Dan moet je dat ook kunnen zien.

   Op een donkere achtergrond valt de ruimte naast een liggende foto nauwelijks
   op, dus contain kan hier zonder dat het rommelig wordt. De kaders blijven
   even groot, dus het raster blijft recht. */
.kaartfoto{background:var(--fotovlak)}
.kaartfoto img{aspect-ratio:1;object-fit:contain;width:100%;
  transition:transform .7s ease,filter var(--overgang)}
.kaart:hover .kaartfoto img{transform:scale(1.05);filter:brightness(1.05)}
.kaart.is-verkocht .kaartfoto img{filter:grayscale(.45) brightness(.82)}
.badge{position:absolute;left:12px;top:12px;z-index:2;background:var(--badgevlak);
  color:var(--creme);border:1px solid var(--lijn-op);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 11px;border-radius:2px;backdrop-filter:blur(4px)}
/* Het lint. De kleur komt uit de database (per product of per categorie),
   dus die staat in het style-attribuut; hier alleen de vorm. Rechtsboven, zodat
   hij niet botst met de "Verkocht"-badge linksboven of het hartje rechtsboven. */
.lint{position:absolute;left:0;bottom:14px;z-index:2;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  padding:5px 11px 5px 12px;border-radius:0;
  box-shadow:0 2px 8px -4px rgba(0,0,0,.55);max-width:78%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Op de productpagina staat het lint naast het categorielabel, niet op de foto:
   daar zit de zoom overheen. */
.koplabels{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.koplabels .lint{position:static;border-radius:0;box-shadow:none;max-width:none}

.kaartbody{padding:13px 13px 15px}
.kaarttitel{display:block;color:var(--creme);text-decoration:none;font-size:14.5px;
  line-height:1.45;margin-bottom:6px}
.kaarttitel:hover{color:var(--goud)}
.prijs{font-weight:600;font-size:15px;color:var(--goud)}
.verkocht{color:var(--creme-zacht);font-weight:500;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase}
.prijs.groot{font-size:27px;margin:6px 0 24px}
.verkocht.groot{font-size:19px;margin:6px 0 24px}
.geenfoto{aspect-ratio:1;background:var(--podium);border:1px solid var(--lijn);border-radius:var(--r)}
.geenfoto.groot{aspect-ratio:4/3}

.catraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.cattegel{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--podium);border:1px solid var(--lijn);border-radius:var(--r);
  padding:17px 20px;text-decoration:none;color:var(--creme);font-size:14.5px;
  transition:border-color var(--overgang),background var(--overgang)}
.cattegel:hover{border-color:var(--goud-diep);background:var(--vitrine);color:var(--goud)}
.cattegel small{color:var(--op-beeld-zacht);font-size:12px}

/* Vier beloftes, dus vier of twee kolommen - nooit drie, want dan blijft de
   vierde alleen op een halve regel achter. */
.beloftes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden}
.beloftes div{background:var(--podium);padding:26px 22px;text-align:center;font-size:14px}
.beloftes strong{font-weight:400;color:var(--creme)}

/* ---------- verhaalblokken ---------- */
.verhaal{background:var(--podium);border-block:1px solid var(--lijn);padding:78px 0;margin:72px 0}
.prijzen{padding:78px 0}
.verhaalinhoud,.prijzeninhoud,.contactinhoud{display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:64px;align-items:start}
.verhaalkop h2{margin:0;font-size:clamp(21px,2.6vw,31px)}
.verhaaltekst{max-width:64ch;color:var(--tekst-zacht)}
.verhaaltekst .uitgelicht{font-family:var(--kop);font-size:clamp(19px,2.1vw,25px);
  line-height:1.5;color:var(--creme);margin-bottom:26px}
.prijslijst{margin:0 0 20px;padding-left:0;list-style:none;counter-reset:p}
.prijslijst li{counter-increment:p;position:relative;padding-left:38px;margin-bottom:10px}
.prijslijst li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:0;
  color:var(--goud);font-size:12px;letter-spacing:.1em;padding-top:5px}

/* ---------- klantreacties ---------- */
.reacties{background:radial-gradient(700px 300px at 20% 0%,rgba(var(--goud-rgb),.10),transparent 60%),
  var(--nacht);padding:78px 0;border-block:1px solid var(--lijn)}
.reactieraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.reactie{margin:0;background:var(--vitrine);border:1px solid var(--lijn);border-radius:var(--r);
  padding:28px 24px 24px;position:relative;transition:border-color var(--overgang)}
.reactie:hover{border-color:var(--goud-diep)}
.reactie::before{content:'\201C';position:absolute;top:6px;left:18px;font-family:var(--kop);
  font-size:46px;color:var(--goud);opacity:.5;line-height:1}
.reactie blockquote{margin:0;font-size:14.5px;line-height:1.65;padding-top:16px;color:var(--tekst-zacht)}

/* ---------- kanalen en betalen ---------- */
.kanalen{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.kanaal{display:flex;flex-direction:column;gap:7px;background:var(--podium);
  border:1px solid var(--lijn);border-radius:var(--r);padding:24px 26px;
  text-decoration:none;color:var(--creme);transition:border-color var(--overgang)}
.kanaal:hover{border-color:var(--goud-diep)}
.kanaal strong{font-family:var(--kop);font-size:16px;color:var(--goud)}
.kanaal span{color:var(--creme-zacht);font-size:14px}

.betaalblok{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:44px;
  background:var(--podium);border:1px solid var(--lijn);border-radius:var(--r);
  padding:38px 40px;align-items:center}
.betaalblok h2{margin-top:0}
.betaalblok h2::after{display:none}
ul.betaalwijzen{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
ul.betaalwijzen li{border:1px solid var(--lijn-op);border-radius:2px;padding:8px 14px;
  font-size:12px;color:var(--creme-zacht);letter-spacing:.04em}

/* ---------- contact ---------- */
.contact{background:var(--podium);border-top:1px solid var(--lijn);padding:78px 0;margin-top:72px}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- collectie ---------- */
.collectiekop{max-width:66ch;margin-top:12px}
.intro{margin-top:16px;color:var(--tekst-zacht)}
.sorteer{display:flex;align-items:center;gap:12px 26px;flex-wrap:wrap;margin:28px 0 26px;
  padding-bottom:18px;border-bottom:1px solid var(--lijn)}
.sorteerdeel{display:flex;align-items:center;gap:11px;margin:0}
.filterweg{font-size:13px;color:var(--creme-zacht);text-decoration:none;
  border-bottom:1px solid var(--lijn-op)}
.filterweg:hover{color:var(--goud);border-bottom-color:var(--goud)}
/* ---------- filteren op kenmerken ---------- */
/* Ingeklapt tenzij er iets aanstaat: wie niet filtert wil producten zien, geen
   vinkjes. Staat er wel iets aan, dan klapt hij open - anders zie je niet
   waarom je maar drie dingen krijgt. */
.kenmerken{border:1px solid var(--lijn);border-radius:var(--r);margin:0 0 26px;background:var(--podium)}
.kenmerken>summary{list-style:none;cursor:pointer;padding:13px 18px;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--creme-zacht);
  display:flex;align-items:center;gap:10px}
.kenmerken>summary::-webkit-details-marker{display:none}
.kenmerken>summary::after{content:'';margin-left:auto;border:4px solid transparent;
  border-top-color:currentColor;transform:translateY(2px)}
.kenmerken[open]>summary::after{transform:rotate(180deg) translateY(2px)}
.kenmerken>summary:hover{color:var(--goud)}
.kenmerken>summary b{background:var(--goud);color:var(--op-goud);border-radius:99px;
  min-width:19px;height:19px;display:grid;place-items:center;font-size:11px;font-weight:600}
.kenmerken form{padding:4px 18px 18px}
.kenmerkgroepen{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px}
.kenmerkgroepen fieldset{border:0;margin:0;padding:0;min-width:0}
.kenmerkgroepen legend{padding:0 0 9px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--goud)}
.kenmerk{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--creme-zacht);
  padding:4px 0;cursor:pointer}
.kenmerk:hover{color:var(--creme)}
.kenmerk.aan{color:var(--creme)}
.kenmerk span{margin-left:auto;font-size:11.5px;color:var(--tekst-fluister);font-variant-numeric:tabular-nums}
.kenmerken .knoprij{margin-top:18px;padding-top:15px;border-top:1px solid var(--lijn);
  display:flex;align-items:center;gap:16px}

/* De categorietekst staat onder het raster: eerst kijken, dan lezen. */
.rijketekst.naraster{margin-top:56px;padding-top:30px;border-top:1px solid var(--lijn);
  max-width:70ch}
.sorteer label{font-size:12px;color:var(--creme-zacht);letter-spacing:.1em;text-transform:uppercase}
.sorteer select{font:inherit;font-size:14px;padding:9px 13px;border:1px solid var(--lijn);
  border-radius:var(--r);background:var(--vitrine);color:var(--creme);cursor:pointer}
.sorteer select:focus{outline:1px solid var(--goud);outline-offset:1px}
.leegmelding{background:var(--podium);border:1px solid var(--lijn);padding:26px 28px;
  border-radius:var(--r);color:var(--creme-zacht);margin:22px 0}
.zoekgroot{display:flex;gap:12px;margin:20px 0 30px;max-width:580px}
.zoekgroot input{flex:1;font:inherit;padding:14px 18px;border:1px solid var(--lijn);
  border-radius:var(--r);background:var(--vitrine);color:var(--creme)}
.zoekgroot input:focus{outline:1px solid var(--goud);outline-offset:1px}

/* ---------- productpagina ---------- */
.productlayout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:66px;align-items:start;margin:14px 0 56px}
.media{display:flex;flex-direction:column;gap:14px;min-width:0}
.carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--lijn-op) transparent}
.carousel::-webkit-scrollbar{height:5px}
.carousel::-webkit-scrollbar-thumb{background:var(--lijn-op);border-radius:99px}
.dia{margin:0;flex:0 0 100%;scroll-snap-align:center;min-width:0}
.zoomvenster{position:relative;overflow:hidden;border-radius:var(--r);display:block;
  background:var(--podium);border:1px solid var(--lijn);cursor:zoom-in;touch-action:pan-y;
  box-shadow:0 30px 70px -40px var(--schaduw)}
.zoomvenster:focus-visible{outline:1px solid var(--goud);outline-offset:2px}
/* Ook hier de hele foto. Juist op de productpagina wil je het stuk compleet
   zien voordat je op zoom gaat. */
.zoomvenster{background:var(--fotovlak)}
.zoomvenster img{width:100%;aspect-ratio:4/3;object-fit:contain;
  transition:transform .2s ease-out;transform-origin:center;will-change:transform}
@media(hover:hover){.zoomvenster:hover img{transform:scale(2.6);filter:brightness(1.04)}}
.zoomvenster.vast img{transform:scale(2.6)}
.zoomvenster.vast{cursor:zoom-out}
.zoomvenster.vast .zoomknop{opacity:0}
.zoomknop{position:absolute;right:14px;bottom:14px;background:rgba(20,18,16,.82);
  color:var(--goud);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--lijn-op);pointer-events:none;transition:opacity var(--overgang)}
/* De miniaturen staan in een raster, niet in een rijtje dat zijwaarts schuift.

   Dat rijtje had een verborgen schuifbalk en er pasten er ongeveer zeven naast
   elkaar. Geteld over de hele winkel: gemiddeld 7,6 foto's per product, en bij
   39 van de 88 producten meer dan zes. Bij bijna de helft van je stukken stond
   de rest dus buiten beeld zonder dat iets dat verried. Nu breekt de rij af en
   zie je in een oogopslag welke foto's er zijn. */
.miniaturen{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:8px;padding-bottom:2px}
.mini{border-radius:2px;overflow:hidden;border:1px solid var(--lijn);
  background:var(--podium);transition:border-color var(--overgang)}
.mini:hover{border-color:var(--goud)}
/* Miniaturen blijven bijgesneden: dat zijn knopjes om mee te bladeren, geen
   plek waar je het stuk beoordeelt. Vierkant staat daar rustiger. */
.mini img{width:100%;aspect-ratio:1;height:auto;object-fit:cover}
.mini:hover img{filter:brightness(1.05)}
.galerijhint{font-size:12px;color:var(--creme-zacht);margin:0}

.koopbox{position:sticky;top:104px}
.categorielabel{display:inline-block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--goud);text-decoration:none;margin-bottom:14px}
.categorielabel:hover{color:var(--creme)}
.voorraadregel{font-size:13px;color:var(--groen);margin-bottom:16px}
.voorraadregel::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--groen);margin-right:9px;vertical-align:middle;
  box-shadow:0 0 10px var(--groen-rand)}
.melding{padding:16px 20px;border-radius:var(--r);font-size:14.5px;margin-bottom:20px;
  background:var(--vitrine);border-left:2px solid var(--lijn-op)}
.melding p{margin:7px 0 0}
.verkochtblok{border-left-color:var(--rood)}
.bezetblok{border-left-color:var(--goud)}
.fout{border-left-color:var(--rood);color:var(--rood-tekst)}
.gelukt{border-left-color:var(--groen)}
.vertaalnotitie{font-size:12.5px;color:var(--creme-zacht);background:var(--vitrine);
  padding:10px 14px;border-radius:var(--r);margin:16px 0}
/* rijketekst: koppen die er ook als koppen uitzien.

   Ze stonden op 16px/600 terwijl de lopende tekst 15.5px is - een halve pixel
   verschil leest niemand als een kop. Nu de merkletter, groter, met lucht
   erboven. Een tekst met drie tussenkoppen moet je kunnen scannen. */
.rijketekst{font-size:15.5px;line-height:1.7;color:var(--tekst-zacht)}
.rijketekst>*:first-child{margin-top:0}
.rijketekst h2{font-family:var(--kop);font-weight:400;font-size:19px;
  margin:34px 0 12px;color:var(--creme);letter-spacing:-.01em}
.rijketekst h3{font-family:var(--tekst);font-weight:600;font-size:15px;
  margin:26px 0 8px;color:var(--goud);letter-spacing:.02em}
.rijketekst h4{font-family:var(--tekst);font-weight:600;font-size:14.5px;
  margin:22px 0 6px;color:var(--creme)}
.rijketekst p{margin:0 0 14px}
.rijketekst strong,.rijketekst b{color:var(--creme);font-weight:600}
.rijketekst em,.rijketekst i{color:var(--creme)}
.rijketekst a{color:var(--goud)}
.rijketekst ul,.rijketekst ol{padding-left:22px;margin:0 0 16px}
.rijketekst li{margin-bottom:6px}
.rijketekst hr{border:0;border-top:1px solid var(--lijn);margin:26px 0}
.rijketekst table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14.5px}
.rijketekst th,.rijketekst td{text-align:left;padding:9px 12px;
  border-bottom:1px solid var(--lijn);vertical-align:top}
.rijketekst th{color:var(--creme-zacht);font-weight:500}

/* ---------- informatiepagina's ---------- */
/* Lange leesteksten: voorwaarden, privacy, verzenden. Koppen mogen hier wel
   als koppen ogen, want de pagina bestaat uit niets anders. */
.infotekst{font-size:16px;line-height:1.75;max-width:70ch}
.infotekst h2{font-family:var(--kop);font-weight:400;font-size:19px;
  margin:44px 0 12px;padding-top:26px;border-top:1px solid var(--lijn);color:var(--creme)}
.infotekst h2:first-child{border-top:0;padding-top:0;margin-top:26px}
.infotekst h3{font-family:var(--tekst);font-weight:600;font-size:15.5px;
  margin:26px 0 8px;color:var(--goud)}
.infotekst .lead{font-size:17.5px;color:var(--creme);margin-bottom:22px}
.infotekst ul,.infotekst ol{padding-left:22px;margin:0 0 18px}
.infotekst li{margin-bottom:7px}
.infotekst li>strong{color:var(--creme)}
.infotekst ol.stappen{counter-reset:s;list-style:none;padding-left:0}
.infotekst ol.stappen li{counter-increment:s;padding-left:38px;position:relative}
.infotekst ol.stappen li::before{content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:1px;color:var(--goud);font-size:12px;letter-spacing:.1em}
.infotekst table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:14.5px}
.infotekst th,.infotekst td{text-align:left;padding:10px 12px;
  border-bottom:1px solid var(--lijn);vertical-align:top}
.infotekst thead th{color:var(--goud);font-weight:500;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase}
.infotekst table.gegevens th{width:38%;font-weight:500;color:var(--creme-zacht)}
.infotekst table.tarieven{max-width:420px}
.infotekst blockquote{margin:0 0 20px;padding:18px 22px;background:var(--podium);
  border-left:2px solid var(--goud);border-radius:0 var(--r) var(--r) 0}
.infotekst blockquote p:last-child{margin-bottom:0}
.infotekst blockquote.modelformulier{font-size:14.5px;color:var(--creme-zacht)}
.taalmelding{background:var(--podium);border:1px solid var(--lijn-op);border-radius:var(--r);
  padding:13px 17px;font-size:14px;color:var(--creme-zacht);margin:0 0 26px}
.accordeon{border-top:1px solid var(--lijn)}
.accordeon summary{list-style:none;cursor:pointer;padding:17px 0;font-weight:500;
  font-size:14.5px;display:flex;justify-content:space-between;align-items:center;color:var(--creme)}
.accordeon summary::-webkit-details-marker{display:none}
.accordeon summary::after{content:'+';font-size:19px;color:var(--goud);font-weight:400}
.accordeon[open] summary::after{content:'\2212'}
.accordeon>*:not(summary){padding-bottom:18px}
table.specs{border-collapse:collapse;width:100%;font-size:14.5px}
table.specs td{border-bottom:1px solid var(--lijn);padding:10px 0;vertical-align:top;color:var(--tekst-zacht)}
table.specs td:first-child{color:var(--creme-zacht);width:44%;padding-right:16px}

/* ---------- mandje, afrekenen ---------- */
.mandregels{border-top:1px solid var(--lijn);margin:24px 0 0}
.mandregel{display:grid;grid-template-columns:92px 1fr auto auto;gap:20px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--lijn)}
.mandregel img{border-radius:2px;width:92px;aspect-ratio:1;object-fit:cover}
.verzendkeuze{display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:var(--podium);
  border:1px solid var(--lijn);padding:18px 20px;border-radius:var(--r);margin:26px 0 8px}
.verzendkeuze label{font-size:13.5px;color:var(--creme-zacht)}
.verzendkeuze select{font:inherit;font-size:14px;padding:9px 13px;border:1px solid var(--lijn);
  border-radius:var(--r);background:var(--vitrine);color:var(--creme)}
.vinkregel{display:flex;align-items:center;gap:9px;color:var(--creme);cursor:pointer}
.vinkregel input{width:auto;accent-color:var(--goud)}
.optelling{margin:26px 0}
.regel{display:flex;justify-content:space-between;gap:18px;padding:11px 0;
  border-bottom:1px solid var(--lijn);font-size:15px}
.regel small{color:var(--creme-zacht);font-size:12.5px}
.regel.totaal{font-weight:700;font-size:18px;border-bottom:0;border-top:1px solid var(--goud);
  margin-top:6px;padding-top:15px;color:var(--goud)}
.afrekengrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:54px;align-items:start}
.formulier{display:flex;flex-direction:column;gap:16px;max-width:560px}
.formulier.breed{max-width:880px}
.formulier label{display:flex;flex-direction:column;gap:7px;font-size:12px;
  color:var(--creme-zacht);letter-spacing:.1em;text-transform:uppercase}
.formulier input,.formulier textarea,.formulier select{font:inherit;font-size:15px;
  color:var(--creme);padding:13px 15px;border:1px solid var(--lijn);border-radius:var(--r);
  background:var(--vitrine);width:100%;text-transform:none;letter-spacing:0}
.formulier input:focus,.formulier textarea:focus,.formulier select:focus{
  outline:1px solid var(--goud);outline-offset:1px;border-color:transparent}
.formulier textarea{font-family:var(--tekst);font-size:14.5px}
.formulier .vink{flex-direction:row;align-items:center;gap:10px;color:var(--creme);
  font-size:14.5px;text-transform:none;letter-spacing:0}
.formulier .vink input{width:auto;accent-color:var(--goud)}
.vastgezet{background:var(--vitrine);padding:13px 16px;border-radius:var(--r);
  font-size:14.5px;margin:0;color:var(--creme)}
.vastgezet a{margin-left:10px;font-size:13px}
.tweekolom{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.driekolom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
fieldset{border:1px solid var(--lijn);border-radius:var(--r);padding:16px 18px;margin:0}
legend{font-size:12px;color:var(--creme-zacht);padding:0 7px;letter-spacing:.1em;text-transform:uppercase}
.samenvatting{background:var(--podium);border:1px solid var(--lijn);border-radius:var(--r);padding:26px 28px}
.samenvatting h2{margin-top:0}

/* ---------- voet ---------- */
.voet{background:var(--diepst);border-top:1px solid var(--lijn);padding:56px 0 28px;font-size:14px}
.kolommen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:38px}
.kolommen div{display:flex;flex-direction:column;gap:9px}
.kolommen strong{font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--goud);margin-bottom:8px;font-weight:500}
.kolommen a,.kolommen span{color:var(--creme-zacht);text-decoration:none;font-size:13.5px}
.kolommen a:hover{color:var(--creme)}
.kolommen a.aan{color:var(--goud)}
.voetonder{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--lijn);color:var(--tekst-fluister);font-size:12px}

/* ---------- beheer ---------- */
body.beheer{background:var(--diepst)}
body.beheer .merk span{color:var(--goud)}
body.beheer main{padding:26px 28px 70px}
.beheer.inlog main{padding-top:80px}
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:15px;margin:22px 0}
.tegel{background:var(--vitrine);border:1px solid var(--lijn);border-radius:var(--r);
  padding:20px 22px;display:flex;flex-direction:column;gap:4px}
.tegel b{font-family:var(--kop);font-size:25px;font-weight:400;color:var(--goud)}
.tegel span{color:var(--creme-zacht);font-size:13px}
table.lijst{background:var(--vitrine);border:1px solid var(--lijn);border-radius:var(--r);
  border-collapse:separate;border-spacing:0;overflow:hidden;width:100%;font-size:14px}
table.lijst td,table.lijst th{padding:13px 16px;border-bottom:1px solid var(--lijn);text-align:left}
table.lijst tr:last-child td{border-bottom:0}
table.lijst th{font-size:11px;color:var(--creme-zacht);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em}
table.lijst a{color:var(--goud)}
.rechts{text-align:right}
.status{display:inline-block;padding:3px 11px;border-radius:2px;font-size:11.5px;
  background:var(--lijn);color:var(--creme)}
.status.paid{background:var(--groen-waas);color:var(--groen)}
.status.open{background:rgba(var(--goud-rgb),.18);color:var(--goud)}
.status.failed,.status.expired,.status.canceled,.status.verkocht{background:var(--rood-waas);color:var(--rood)}
.status.shipped{background:var(--blauw-waas);color:var(--blauw)}
.zoek{display:flex;gap:12px;align-items:center;margin:20px 0}
.zoek input{font:inherit;padding:11px 14px;border:1px solid var(--lijn);border-radius:var(--r);
  min-width:260px;background:var(--vitrine);color:var(--creme)}
.rechtsboven{margin-left:auto}
/* ---------- foto's beheren ---------- */
/* Een rij per foto in plaats van een raster: je sleept ze in volgorde, en
   naast elke foto staat zijn eigen alt-tekst. Die twee dingen wil je naast
   elkaar zien, niet onder elkaar in kleine kaartjes. */
.fotobeheer{margin:16px 0 26px}
.fotolijst{list-style:none;margin:14px 0 18px;padding:0;
  display:flex;flex-direction:column;gap:8px}
.fotolijst li{display:grid;grid-template-columns:auto 84px minmax(0,1fr) auto;
  gap:14px;align-items:center;background:var(--vitrine);border:1px solid var(--lijn);
  border-radius:var(--r);padding:10px 14px 10px 8px}
.fotolijst li.sleept{opacity:.4;border-color:var(--goud)}
.fotolijst li[draggable]{cursor:grab}
.fotolijst li[draggable]:active{cursor:grabbing}
.fotolijst .grijp{color:var(--creme-zacht);opacity:.55;letter-spacing:-3px;
  font-size:17px;padding:0 2px;user-select:none}
.fotolijst img{width:84px;height:84px;object-fit:cover;border-radius:2px;
  border:1px solid var(--lijn);background:var(--veld)}
.fotovelden{display:flex;gap:12px;align-items:flex-end;min-width:0}
.fotovelden label{display:flex;flex-direction:column;gap:4px;margin:0;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--creme-zacht)}
.fotovelden .pos{flex:0 0 64px}
.fotovelden .altveld{flex:1;min-width:0;text-transform:none;letter-spacing:0;font-size:11.5px}
.fotovelden input{font:inherit;font-size:13.5px;padding:7px 10px;border:1px solid var(--lijn);
  border-radius:var(--r);background:var(--veld);color:var(--creme);width:100%;text-transform:none;letter-spacing:0}
.fotovelden input:focus{outline:1px solid var(--goud);outline-offset:1px}
.fotoacties{display:flex;flex-direction:column;align-items:flex-end;gap:5px;white-space:nowrap}
@media(max-width:700px){
  .fotolijst li{grid-template-columns:auto 64px minmax(0,1fr);row-gap:10px}
  .fotolijst img{width:64px;height:64px}
  .fotovelden{flex-wrap:wrap}
  .fotoacties{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-end}
}
.taaltabs{display:flex;gap:7px;flex-wrap:wrap;margin:20px 0 14px}
.taaltabs a{padding:8px 16px;border:1px solid var(--lijn);border-radius:var(--r);
  text-decoration:none;color:var(--creme);font-size:13.5px;background:var(--vitrine)}
.taaltabs a.aan{background:var(--goud);color:var(--op-goud);border-color:var(--goud)}
.taaltabs a.leeg{color:var(--creme-zacht);border-style:dashed}
.bronblok{background:var(--vitrine);border:1px solid var(--lijn);border-radius:var(--r);
  padding:18px 20px;max-height:580px;overflow:auto;font-size:14.5px;color:var(--tekst-zacht)}
code{background:var(--vitrine);padding:2px 7px;border-radius:2px;font-size:13px;color:var(--goud)}
input[type=file]{font-size:14px;padding:12px;background:var(--vitrine);
  border:1px dashed var(--lijn-op);color:var(--creme-zacht)}

/* ---------- responsief ---------- */
@media(max-width:1060px){
  .productlayout{grid-template-columns:1fr;gap:38px}
  .koopbox{position:static}
  .heroinhoud{grid-template-columns:1fr;gap:34px;padding-top:52px;padding-bottom:52px}
  .afrekengrid,.verhaalinhoud,.prijzeninhoud,.contactinhoud,.betaalblok{grid-template-columns:1fr;gap:30px}
}
@media(max-width:940px){.beloftes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){
  .kopbar{flex-wrap:wrap;gap:15px}
  .hoofdmenu{order:3;width:100%;overflow-x:auto;gap:20px}
  .megamenu{position:static;columns:1;min-width:0;box-shadow:none;margin-top:9px}
  .zoekbalk{max-width:180px}
}
@media(max-width:640px){
  .wrap{padding:0 18px}
  .verbergklein{display:none}
  .raster{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:24px 14px}
  .mandregel{grid-template-columns:70px 1fr auto;gap:14px}
  .mandregel img{width:70px}
  .mandregel form{grid-column:2/-1}
  .tweekolom,.driekolom{grid-template-columns:1fr}
  .sorteer{gap:12px}
  .sorteerdeel{width:100%;justify-content:space-between}
  .sorteerdeel select{flex:1;margin-left:14px}
  .aankondiging .wrap{gap:22px;font-size:10.5px}
  .wrap>section,main>.wrap>section{margin:50px 0}
  .verhaal,.prijzen,.reacties,.contact{padding:52px 0;margin:50px 0}
  .miniaturen{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ---------- categorietegels met beeld ---------- */
.catraster{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.cattegel{position:relative;display:block;padding:0;aspect-ratio:5/4;overflow:hidden;
  border:1px solid var(--lijn);border-radius:var(--r);background:var(--podium)}
.cattegel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.98);transition:transform .7s ease,filter var(--overgang)}
.cattegel::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,9,8,.15) 30%,rgba(10,9,8,.85))}
.cattegel:hover img{transform:scale(1.06);filter:brightness(1.05) saturate(1)}
.cattegel:hover{border-color:var(--goud-diep);background:var(--podium)}
.cattitel{position:absolute;left:16px;right:52px;bottom:14px;z-index:2;
  font-size:14.5px;line-height:1.3;color:var(--op-beeld)}
.cattegel:hover .cattitel{color:var(--op-beeld-accent)}
.cattegel small{position:absolute;right:14px;bottom:15px;z-index:2;
  color:var(--op-beeld-zacht);font-size:12px;font-variant-numeric:tabular-nums}
.cattegel .geenfoto{position:absolute;inset:0;border:0;border-radius:0}

/* ---------- verhaalblok met beeld ernaast ---------- */
.verhaalinhoud{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:60px;align-items:center}
.verhaalbeeld{position:relative}
.verhaalbeeld img{border-radius:var(--r);aspect-ratio:4/5;object-fit:cover;
  box-shadow:0 30px 70px -40px var(--schaduw),var(--gloed)}
/* Bijschrift onder de sfeerfoto: het is een echt stuk uit de winkel, dus
   zeg welk en laat erheen klikken. */
.verhaalbijschrift{position:absolute;left:0;right:0;bottom:-28px;margin:0;
  font-size:12px;color:var(--creme-zacht);line-height:1.4}
.verhaalbijschrift a{color:var(--creme-zacht);text-decoration:none;
  border-bottom:1px solid var(--lijn-op)}
.verhaalbijschrift a:hover{color:var(--goud);border-bottom-color:var(--goud)}
.verhaaltekst h2{margin-bottom:20px}

/* ---------- reacties: minder doos, meer citaat ---------- */
.reactieraster{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px 30px}
.reactie{background:none;border:0;border-top:1px solid var(--lijn);border-radius:0;
  padding:22px 0 0}
.reactie:hover{border-color:var(--goud-diep);background:none}
.reactie::before{position:static;display:block;font-size:30px;opacity:.65;margin-bottom:2px}
.reactie blockquote{padding-top:0;font-size:14.5px;color:var(--tekst-zacht)}

/* ---------- kanalen: rustiger ---------- */
.kanaal{background:none;border:0;border-top:1px solid var(--lijn);border-radius:0;padding:22px 0 0}
.kanaal:hover{border-color:var(--goud-diep);background:none}

/* tegels iets lichter en tekst die lange namen aankan */
.cattegel img{filter:saturate(.98)}
.cattegel::after{background:linear-gradient(180deg,rgba(10,9,8,.08) 22%,rgba(10,9,8,.94))}
.cattitel{left:15px;right:15px;bottom:34px;font-size:14px}
.cattegel small{left:15px;right:auto;bottom:13px;letter-spacing:.12em;
  text-transform:uppercase;font-size:10.5px}
.cattegel small::after{content:' stuks'}

/* ---------- etalage: automatische slideshow ---------- */
.etalage{position:relative}
.etalagespoor{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  border-radius:var(--r);box-shadow:0 40px 90px -40px var(--schaduw),var(--gloed);
  scrollbar-width:none;-ms-overflow-style:none}
.etalagespoor::-webkit-scrollbar{display:none}
.etalagedia{position:relative;flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;
  display:block;text-decoration:none;overflow:hidden;min-width:0}
.etalagedia img{aspect-ratio:4/3;object-fit:cover;width:100%;
  transition:transform .9s ease,filter .5s ease}
.etalagedia:hover img{transform:scale(1.03);filter:brightness(1.05)}
.etalagedia::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(10,9,8,.8));
  border:1px solid var(--lijn-overlay);border-radius:var(--r)}

.etalagestippen{display:flex;gap:9px;justify-content:center;margin-top:16px}
.etalagestippen a{width:30px;height:3px;border-radius:2px;background:var(--lijn-op);
  transition:background var(--overgang),width var(--overgang)}
.etalagestippen a:hover{background:var(--creme-zacht)}
.etalagestippen a.aan{background:var(--goud);width:46px}

@media(prefers-reduced-motion:reduce){
  .etalagespoor{scroll-behavior:auto}
}
.kiesraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:6px 18px;max-height:320px;overflow:auto;padding:4px 2px}
.kiesraster .vink{font-size:13.5px;text-transform:none;letter-spacing:0;color:var(--creme)}

/* ---------- bewaren en delen ---------- */

/* Het kaartje staat in een kader in plaats van te zweven. Overgenomen uit het
   scraps-werkdocument: daar zit alles in een omlijning, en dat leest rustiger
   dan losse vlakken die in de achtergrond oplossen. */
.kaart{position:relative;border:1px solid var(--lijn);background:var(--podium);
  transition:border-color var(--overgang)}
.kaart:hover{border-color:var(--lijn-op)}
.bewaarvorm{margin:0}
.bewaarvorm.opfoto{position:absolute;right:10px;top:10px;z-index:3}
.hartje{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--lijn-op);background:var(--knop-op-foto);color:var(--creme);
  cursor:pointer;padding:0;backdrop-filter:blur(4px);
  transition:color var(--overgang),border-color var(--overgang),transform var(--overgang)}
.hartje:hover{color:var(--goud);border-color:var(--goud);transform:scale(1.08)}
.hartje.aan{color:var(--goud);border-color:var(--goud)}
.hartje:active{transform:scale(.94)}

.bewaarregel{display:flex;align-items:center;gap:10px;margin:18px 0 6px}
.bewaarvorm.mettekst .hartje{background:none;border-color:var(--lijn)}
.bewaartekst{font-size:13.5px;color:var(--creme-zacht)}

.favknop{display:flex;align-items:center;gap:7px;color:var(--creme);text-decoration:none;
  padding:9px 13px;border:1px solid var(--lijn);border-radius:var(--r);white-space:nowrap;
  transition:border-color var(--overgang),color var(--overgang)}
.favknop:hover{border-color:var(--goud);color:var(--goud)}
.favknop b{background:var(--goud);color:var(--op-goud);border-radius:99px;min-width:19px;height:19px;
  display:grid;place-items:center;font-size:11px}

.deelbalk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 4px;
  padding-top:16px;border-top:1px solid var(--lijn)}
.deellabel{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--creme-zacht);margin-right:4px}
.deelknop{font:inherit;font-size:12.5px;padding:7px 13px;border-radius:var(--r);
  border:1px solid var(--lijn);background:none;color:var(--creme-zacht);
  text-decoration:none;cursor:pointer;transition:border-color var(--overgang),color var(--overgang)}
.deelknop:hover{border-color:var(--goud);color:var(--goud)}
.deelknop.whatsapp:hover{border-color:#25d366;color:#25d366}
.deelknop.pinterest:hover{border-color:#e60023;color:#e60023}
.deelknop.facebook:hover{border-color:#5b8def;color:#5b8def}
.deelknop.gedaan{border-color:var(--groen);color:var(--groen)}
@media(max-width:640px){
  .bewaarvorm.opfoto{right:7px;top:7px}
  .hartje{width:32px;height:32px}
}

/* ============ beheer: eigen opmaak ============
   Het beheer deelt de stylesheet met de winkel, maar heeft andere eisen:
   compacte formulieren, duidelijke groepen, en knoppen die niet de hele
   breedte opslokken. */

/* kopbalk van het beheer (gebruikt .bar, niet .kopbar van de winkel) */
body.beheer header{background:var(--kop-beheer);border-bottom:1px solid var(--lijn);
  position:sticky;top:0;z-index:50}
body.beheer .bar{display:flex;align-items:center;gap:26px;padding:13px 28px;flex-wrap:wrap}
body.beheer .bar .merk{font-family:var(--kop);font-size:14px;color:var(--goud);
  text-decoration:none;letter-spacing:.02em}
/* De beheerbalk heeft negen tabs. Laat die afbreken naar een tweede regel in
   plaats van een schuifbalk: je moet er kunnen kiezen, niet doorheen scrollen. */
body.beheer .hoofdmenu{gap:18px;font-size:13.5px;flex-wrap:wrap;overflow-x:visible;row-gap:2px}
body.beheer .hoofdmenu a{color:var(--creme-zacht);border-bottom:1px solid transparent;padding:5px 0}
body.beheer .hoofdmenu a:hover{color:var(--creme);border-bottom-color:var(--lijn-op)}
body.beheer .hoofdmenu a.aan{color:var(--goud);border-bottom-color:var(--goud)}

body.beheer h1{font-size:26px;margin:4px 0 6px}
body.beheer h2{font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--tekst);font-weight:600;color:var(--creme-zacht);
  margin:34px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--lijn)}
body.beheer .lead{font-size:14.5px;max-width:70ch}

/* knoppen niet meer over de volle breedte */
body.beheer .formulier{gap:18px}
body.beheer .formulier > button,
body.beheer .formulier > .knop,
body.beheer .formulier > a.knop{align-self:flex-start;width:auto;min-width:150px;text-align:center}
body.beheer .knop{padding:11px 24px;font-size:14px}
body.beheer .knop.klein{padding:8px 16px;font-size:13px;min-width:0}
/* een rij knoppen naast elkaar */
body.beheer .knoprij{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
body.beheer .knoprij .knop{align-self:auto}
/* tweede knop is geen hoofdactie */
body.beheer .formulier a.knop.klein,
body.beheer .knoprij a.knop.klein{background:none;color:var(--creme-zacht);
  border:1px solid var(--lijn)}
body.beheer .formulier a.knop.klein:hover,
body.beheer .knoprij a.knop.klein:hover{border-color:var(--goud);color:var(--goud)}

/* velden in een paneel in plaats van los op de achtergrond */
body.beheer .paneel{background:var(--vitrine);border:1px solid var(--lijn);
  border-radius:var(--r);padding:24px 26px;margin-bottom:18px}
body.beheer .paneel > h2:first-child{margin-top:0}
body.beheer .formulier label{gap:6px}
body.beheer .formulier input,
body.beheer .formulier textarea,
body.beheer .formulier select{background:var(--veld-beheer);border-color:var(--lijn)}
body.beheer .formulier input::placeholder,
body.beheer .formulier textarea::placeholder{color:var(--tekst-fluister);opacity:1}
body.beheer .formulier label > .meta{text-transform:none;letter-spacing:0;font-size:12.5px}

/* keuzelijst met producten: nette rijen, prijs in een eigen kolom */
body.beheer fieldset{background:var(--veld-beheer);padding:18px 20px}
.kiesraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:0 24px;max-height:330px;overflow:auto;padding:2px}
.kiesraster .vink{display:grid;grid-template-columns:20px 1fr auto;align-items:start;
  gap:10px;padding:8px 6px;border-bottom:1px solid var(--rij-lijn);
  font-size:13.5px;line-height:1.45;cursor:pointer}
.kiesraster .vink:hover{background:rgba(var(--goud-rgb),.07)}
.kiesraster .vink input{margin-top:3px}
.kiesraster .vink .meta{white-space:nowrap;font-variant-numeric:tabular-nums}
.kiesraster::-webkit-scrollbar{width:8px}
.kiesraster::-webkit-scrollbar-thumb{background:var(--lijn-op);border-radius:8px}
.kiesraster::-webkit-scrollbar-track{background:transparent}

body.beheer .taaltabs{margin:6px 0 22px}
body.beheer .gelukt{margin:14px 0}

body.beheer .formulier > .knoprij{align-self:flex-start;width:auto}

/* Een rechterrand voor het hele beheer.

   Hiervoor stond de breedte alleen op .paneel, en liepen alle andere blokken
   - koppen, cijferkaarten, tabellen - door tot de volle 1280. Dat gaf drie
   verschillende rechterranden onder elkaar en dat oogt slordig zonder dat je
   meteen ziet waarom.

   Nu geldt de maat voor elk blok dat rechtstreeks in de pagina staat. Iets
   wat echt breder moet, zoals de productentabel met negen kolommen, krijgt
   de klasse vol. */
body.beheer main.wrap > *{max-width:1100px}
body.beheer main.wrap > .vol{max-width:none}
/* Lopende tekst blijft wel smal: een regel van elf honderd pixels lees je
   niet, daar raak je bij het terugspringen de volgende regel kwijt. Dat is
   geen uitlijnfout maar leesbaarheid. */
body.beheer main.wrap > p.lead{max-width:46em}
@media(max-width:640px){body.beheer main{padding:20px 16px 60px}body.beheer .paneel{padding:18px 16px}}

/* overzichtstegels: vier naast elkaar passen op een laptop */
body.beheer .tegels{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
/* tabellen: links rustig, pas onderstrepen bij hover */
body.beheer table.lijst a{text-decoration:none}
body.beheer table.lijst a:hover{text-decoration:underline}
body.beheer table.lijst tr:hover td{background:var(--rij-hover)}
/* secundaire knop, ook buiten een formulier */
/* Welk blad je bekijkt moet je kunnen zien. De kleine knoppen in een knoprij
   zijn allemaal vlak gemaakt, dus zonder dit verschilt het open tabblad in
   niets van de twee andere. */
body.beheer .knoprij a.knop.klein.aan{border-color:var(--goud);color:var(--goud);
  background:rgba(var(--goud-rgb),.12)}
body.beheer .knop.tweede{background:none;color:var(--creme-zacht);border:1px solid var(--lijn)}
body.beheer .knop.tweede:hover{border-color:var(--goud);color:var(--goud);background:none}
/* zoekbalk boven een lijst */
body.beheer .zoek input{background:var(--veld-beheer);color:var(--creme)}
body.beheer .zoek input::placeholder{color:var(--tekst-fluister)}

/* losse selects en knoppen buiten een .formulier (bijv. statuskeuze bij een bestelling) */
body.beheer select{font:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--lijn);
  border-radius:var(--r);background:var(--veld-beheer);color:var(--creme)}
body.beheer select:focus{outline:1px solid var(--goud);outline-offset:1px}
body.beheer form:not(.formulier):not(.fotobeheer):not(.altformulier):not(.sjabloonrij){display:inline-flex;gap:10px;align-items:center;flex-wrap:wrap}
body.beheer .tweekolom > div h2:first-child{margin-top:0}

/* deelknoppen met merkteken */
.deelknop{display:inline-flex;align-items:center;gap:7px;line-height:1}
.deelknop svg{flex:0 0 auto}
.deelknop.whatsapp:hover svg{color:#25d366}
.deelknop.pinterest:hover svg{color:#e60023}
.deelknop.facebook:hover svg{color:#5b8def}
@media(max-width:560px){
  /* op een telefoon alleen de iconen, anders past de rij niet */
  .deelknop span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .deelknop{padding:9px 11px}
}

/* de etalage had een lichte lijn om elke dia; die hoort om het geheel */
.etalagedia::after{border:0}
.etalagespoor{border:1px solid var(--lijn);border-radius:var(--r)}
.etalagedia{border-radius:0}
.etalagedia img{border-radius:0}

.mini.aan{border-color:var(--goud)}
.mini.aan img{filter:brightness(1.05)}

/* Delen: vijf knoppen passen niet naast elkaar in de smalle koopbox, en dan
   valt er eentje eenzaam onder de rij. Daarom het label op een eigen regel en
   de knoppen in een raster dat de breedte gelijk verdeelt. */
.deelbalk{display:block}
.deellabel{display:block;margin:0 0 10px}
.deelknoppen{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
.deelknop{justify-content:center;padding:9px 10px;text-align:center}
.deelknop span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:560px){
  .deelknoppen{grid-template-columns:repeat(auto-fit,minmax(56px,1fr))}
  .deelknop span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .deelknop{padding:11px 8px}
}

/* Altijd vijf gelijke kolommen: bij auto-fit viel er in een smalle koopbox
   steeds eentje alleen op een tweede rij, en dat oogt als een fout. */
.deelknoppen{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.deelknop{padding:9px 6px;font-size:12px;gap:6px;min-width:0}
.deelknop svg{width:15px;height:15px}
@media(max-width:560px){.deelknoppen{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Verwijderen mag er niet uitzien als een gewone link: het is onomkeerbaar
   en het bestand gaat mee. */
body.beheer .link.gevaar{color:var(--rood)}
body.beheer .link.gevaar:hover{color:var(--rood-op);text-decoration:underline}

/* ---------- kleuren kiezen (beheer) ---------- */
.kleurlijst{list-style:none;margin:18px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.kleurlijst li{display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:var(--vitrine);border:1px solid var(--lijn);border-radius:var(--r);padding:10px 14px}
.kleurregel{display:flex;align-items:center;gap:13px;margin:0;min-width:0;cursor:pointer}
.kleurregel strong{font-weight:500;color:var(--creme);font-size:14px}
.kleurkeuze{display:flex;align-items:center;gap:13px}
body.beheer input[type=color]{width:46px;height:34px;padding:2px;flex:0 0 auto;
  border:1px solid var(--lijn-op);border-radius:var(--r);background:var(--veld);cursor:pointer}
body.beheer input[type=color]:disabled{opacity:.4;cursor:not-allowed}
.standaardkleur{padding:12px 14px;background:var(--podium);border:1px solid var(--lijn-op);
  border-radius:var(--r);margin-bottom:6px}

/* Een vinkje is geen kopje: niet in kapitalen zetten. */
body.beheer .vinkregel{text-transform:none;letter-spacing:0;font-size:13px;
  display:flex;align-items:center;gap:8px;color:var(--creme-zacht)}

/* ---------- productoverzicht met snelvelden ---------- */
.snelrij td,.snelrij th{vertical-align:middle}
.snelrij .nowrap{white-space:nowrap}
.sorteerkop{color:var(--creme-zacht);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid transparent}
.sorteerkop:hover{color:var(--goud);border-bottom-color:var(--lijn-op)}
.sorteerkop.aan{color:var(--goud)}
body.beheer input.mini{width:74px;font:inherit;font-size:13.5px;padding:6px 8px;
  border:1px solid var(--lijn);border-radius:var(--r);background:var(--veld);color:var(--creme)}
body.beheer input.mini:focus{outline:1px solid var(--goud);outline-offset:1px}
/* Euroteken en bedrag op een regel, en de tabel zo indelen dat de naam de
   ruimte krijgt en de rest smal blijft. Anders wordt elke rij drie regels hoog. */
.snelrij td.rechts{white-space:nowrap}
.snelrij .prijscel{display:flex;align-items:center;justify-content:flex-end;gap:5px}
.snelrij .euro{color:var(--creme-zacht);font-size:13px}
.snelrij .prijsveld{width:78px;text-align:right}
/* De eerste kolom is nu de miniatuur, dus alles schuift een plek op. */
.snelrij th:first-child,.snelrij td:first-child{width:56px;padding-right:0}
.snelrij th:nth-child(2),.snelrij td:nth-child(2){width:34%;min-width:200px}
.snelrij th:nth-child(3),.snelrij td:nth-child(3){width:110px}
.snelrij th:nth-child(4),.snelrij td:nth-child(4){width:100px}
.snelrij th:nth-child(5),.snelrij td:nth-child(5){width:92px}
.snelrij th:nth-child(6),.snelrij th:nth-child(7){width:64px;text-align:center}
.snelrij td:nth-child(6),.snelrij td:nth-child(7){text-align:center}
/* De laatste kolom brak "bekijken" en "verwijderen" halverwege het woord af,
   omdat hij geen eigen breedte had en als laatste de restruimte kreeg. */
.snelrij th:last-child,.snelrij td.acties{width:96px;white-space:nowrap}
.snelrij td.acties{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.rijfoto img{width:44px;height:44px;object-fit:cover;border-radius:2px;
  border:1px solid var(--lijn);background:var(--veld);display:block}
.rijfoto .geenfoto{display:grid;place-items:center;width:44px;height:44px;
  border:1px dashed var(--lijn-op);border-radius:2px;color:var(--creme-zacht);font-size:13px}
.snelrij td,.snelrij th{padding-top:9px;padding-bottom:9px}

/* De categorieen per rij: dichtgeklapt lees je welke het zijn, open vink je ze
   aan. Zeventien vakjes per regel zou de tabel onleesbaar maken. */
.catcel details{max-width:230px}
.catcel summary{list-style:none;cursor:pointer;font-size:12.5px;color:var(--creme-zacht);
  line-height:1.45;padding:3px 0}
.catcel summary::-webkit-details-marker{display:none}
.catcel summary::after{content:" \25BE";color:var(--goud)}
.catcel summary:hover{color:var(--creme)}
.catkeuze{display:flex;flex-direction:column;gap:3px;margin-top:8px;padding:10px 12px;
  background:var(--veld);border:1px solid var(--lijn);border-radius:var(--r);
  max-height:230px;overflow-y:auto}
.catkeuze .vink{display:flex;align-items:center;gap:8px;font-size:13px;
  color:var(--creme-zacht);cursor:pointer;white-space:nowrap}
.catkeuze .vink:hover{color:var(--creme)}
.catacties{display:flex;align-items:center;gap:18px}

/* Teller bij de zoekmachinevelden: groen zolang het past, oranje als je in
   de buurt komt, rood als Google gaat afkappen. */
.tekenteller{display:block;margin-top:5px;font-size:11.5px;color:var(--creme-zacht);
  font-variant-numeric:tabular-nums}
.tekenteller.bijna{color:var(--goud)}
.tekenteller.teveel{color:var(--rood)}

/* ---------- ophaalmomenten ---------- */
/* Verschijnt in het mandje zodra iemand ophalen aanvinkt: dan is het de
   eerstvolgende vraag die hij heeft. */
.ophaaltijden{margin:16px 0 0;padding:16px 18px;background:var(--podium);
  border:1px solid var(--lijn);border-radius:var(--r)}
.ophaaltijden>strong{display:block;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--goud);font-weight:500;margin-bottom:10px}
.ophaaltijden p.meta{margin:0 0 10px}
.ophaaltijden ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.ophaaltijden li{display:flex;gap:14px;justify-content:space-between;font-size:14px;
  padding:5px 0;border-bottom:1px solid var(--lijn)}
.ophaaltijden li:last-child{border-bottom:0}
.ophaaltijden li.dicht{color:var(--creme-zacht)}
.ophaaltijden li.dicht .tijd{color:var(--rood)}
.ophaaltijden .dag{color:var(--creme)}
.ophaaltijden .tijd{white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:560px){.ophaaltijden li{flex-direction:column;gap:2px}}

/* ---------- fotoraster in het beheer ---------- */
/* Alle foto's van een product op een rij, producten onder elkaar. Zo zie je
   in een oogopslag welke donker, scheef of simpelweg afwezig zijn. */
.fotogroep{margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--lijn)}
.fotogroepkop{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.fotogroepkop a{color:var(--creme);text-decoration:none}
.fotogroepkop a:hover strong{color:var(--goud)}
.fotomuur{display:flex;flex-wrap:wrap;gap:8px}
.fotomuur figure{margin:0;position:relative}
.fotomuur img{width:108px;height:108px;object-fit:contain;background:var(--veld);
  border:1px solid var(--lijn);border-radius:2px;display:block}
.fotomuur figure.hoofd img{border-color:var(--goud-diep)}
.fotomuur figcaption{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--goud);margin-top:4px}

/* ---------- bladeren door een lange lijst ---------- */
.bladnummers{display:flex;flex-wrap:wrap;gap:2px;align-items:center}
.bladnummers a,.bladnummers b{display:inline-block;min-width:26px;padding:5px 6px;
  text-align:center;font-size:12.5px;font-weight:400;border-radius:var(--r);
  color:var(--creme-zacht);text-decoration:none}
.bladnummers a:hover{color:var(--goud);background:var(--veld)}
.bladnummers b{color:var(--goud);background:rgba(var(--goud-rgb),.14)}
.knop.uit{opacity:.35;pointer-events:none}

/* ---------- kopbalk en de meelopende opslaanknop ---------- */

/* Winkel en Uitloggen zijn geen tabblad: je verlaat er het beheer mee. Ze
   horen daarom rechtsboven naast de merknaam, met het menu op een eigen
   regel eronder. */
body.beheer .bar{flex-wrap:wrap;align-items:center}
body.beheer .bar .merk{order:1;flex:0 0 auto}
body.beheer .bar .kopacties{order:2;margin-left:auto;flex:0 0 auto;
  display:flex;gap:8px;align-items:center}
body.beheer .bar .hoofdmenu{order:3;flex:1 1 100%;width:100%}
@media(max-width:560px){body.beheer .kopacties .knop{padding:6px 10px;font-size:12px}}

/* De opslaanknop blijft hangen zodra je voorbij scrollt, maar wel ONDER de
   menubalk, want die is zelf ook sticky. Zonder die afstand schuift de knop
   er precies achter en lijkt het of sticky stuk is - zo heb ik hem zelf eerst
   zoekgemaakt. De hoogte van de kopbalk staat in --beheerkop, omdat css de
   hoogte van een ander element niet kan uitlezen; bij een smal scherm breekt
   het menu over meer regels en is die hoogte groter.

   Gemeten, niet gegokt: 127px boven de 1150, daaronder breekt het menu over
   twee regels (163), bij 600 over drie (199) en bij 430 over vier (235). */
:root{--beheerkop:127px}
@media(max-width:1150px){:root{--beheerkop:163px}}
@media(max-width:600px){:root{--beheerkop:199px}}
@media(max-width:430px){:root{--beheerkop:235px}}
.bovenbalk{position:sticky;top:var(--beheerkop);z-index:5;display:flex;
  align-items:center;gap:12px;padding:10px 0;margin:0 0 4px;
  background:var(--nacht);border-bottom:1px solid var(--lijn)}
.bovenbalk .knop{flex:0 0 auto}
.cijferrij{display:grid;gap:12px;margin:0 0 18px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.cijfer{background:var(--veld);border:1px solid var(--lijn);border-radius:var(--r);
  padding:14px 16px;display:flex;flex-direction:column;gap:3px}
.cijfer strong{font-size:26px;font-weight:500;color:var(--goud);line-height:1.1}
.cijfer span{font-size:12px;color:var(--creme-zacht)}
/* Een staafdiagram zonder bibliotheek: de hoogte staat in het style-attribuut
   en de rest is een flexrij. Dertig dagen passen zo op elk scherm. */
/* De staven blijven smal als er weinig dagen zijn: een enkele dag die de
   volle breedte vult leest als een fout, niet als een cijfer. En onderaan
   ruimte voor het schuin gezette datumlabel, anders valt het weg. */
.staven{display:flex;align-items:flex-end;justify-content:flex-start;gap:4px;
  margin-top:14px;min-height:150px;overflow-x:auto;padding-bottom:16px}
.staaf{flex:1 1 0;min-width:18px;max-width:52px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;gap:4px;height:124px}
.staaf i{display:block;width:100%;min-height:2px;background:var(--goud);
  border-radius:2px 2px 0 0;opacity:.85}
.staaf:hover i{opacity:1}
.staaf b{font-size:10.5px;font-weight:400;color:var(--creme-zacht);order:-1}
.staaf span{font-size:9.5px;color:var(--creme-zacht);white-space:nowrap;
  transform:rotate(-45deg);transform-origin:top center;height:0;line-height:1;
  margin-top:6px}
table.lijst{width:100%;border-collapse:collapse;margin-top:10px;font-size:13.5px}
table.lijst td{padding:6px 0;border-bottom:1px solid var(--lijn);
  overflow-wrap:anywhere}
table.lijst tr:last-child td{border-bottom:0}
table.lijst td.getal{text-align:right;white-space:nowrap;padding-left:14px;
  color:var(--goud);font-variant-numeric:tabular-nums}
table.lijst a{color:var(--creme);text-decoration:none}
table.lijst a:hover{color:var(--goud);text-decoration:underline}
.sjabloonrij{display:grid;gap:10px;margin-top:12px;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}
.sjabloon{display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  min-width:0;padding:12px 14px;text-align:left;cursor:pointer;
  background:var(--veld);border:1px solid var(--lijn);border-radius:var(--r);
  color:var(--creme);font:inherit}
.sjabloon:hover{border-color:var(--goud)}
.sjabloon.aan{border-color:var(--goud);background:rgba(var(--goud-rgb),.12)}
.sjabloon strong{font-weight:500;font-size:14px}
.sjabloon .meta{font-size:11.5px;line-height:1.35}
.sjabloon .merk{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--goud)}
.sjabloon .stalen{display:flex;gap:0;border-radius:3px;overflow:hidden;border:1px solid var(--lijn)}
.sjabloon .stalen i{display:block;width:17px;height:17px}
.altlijst{display:flex;flex-direction:column;gap:10px;max-width:880px}
.altrij{display:flex;align-items:center;gap:14px}
.altrij img{width:86px;height:86px;object-fit:contain;background:var(--veld);
  border:1px solid var(--lijn);border-radius:var(--r);display:block;flex:0 0 auto}
.altinvul{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px;margin:0}
.altinvul .meta{font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.altinvul input{font:inherit;font-size:13.5px;padding:8px 10px;border:1px solid var(--lijn);
  border-radius:var(--r);background:var(--veld);color:var(--creme);width:100%}
.altinvul input:focus{outline:1px solid var(--goud);outline-offset:1px}
.bewaarrij{align-items:center;gap:14px;margin:16px 0}
.blader{align-items:center;gap:14px;margin:18px 0}
.lead.smal{max-width:46em}
@media(max-width:560px){.altrij{align-items:flex-start}
  .altrij img{width:62px;height:62px}}
.fotomuur figcaption.mist{color:var(--rood);text-transform:none;letter-spacing:0;font-size:11px}
@media(max-width:560px){.fotomuur img{width:84px;height:84px}}

/* ---------- HTML of hoe het eruitziet ---------- */
.veldtabs{display:inline-flex;gap:2px;margin:6px 0 8px;background:var(--veld);
  border:1px solid var(--lijn);border-radius:var(--r);padding:2px;width:fit-content}
.veldtabs button{font:inherit;font-size:12px;padding:6px 14px;border:0;border-radius:2px;
  background:none;color:var(--creme-zacht);cursor:pointer}
.veldtabs button:hover{color:var(--creme)}
.veldtabs button.aan{background:var(--vitrine);color:var(--goud)}
/* Het voorbeeld staat in een label, en labels in het beheer zijn kleine
   kapitalen. Die opmaak hoort niet over de tekst van de klant heen. */
.htmlvoorbeeld{border:1px solid var(--lijn);border-radius:var(--r);background:var(--vitrine);
  padding:18px 20px;overflow-y:auto;max-height:520px;
  text-transform:none;letter-spacing:normal;font-size:15.5px;color:var(--tekst-zacht)}
.htmlvoorbeeld *{text-transform:none;letter-spacing:normal}
.htmlvoorbeeld h2,.htmlvoorbeeld h3{text-transform:none}
.htmlvoorbeeld:empty::before{content:"Nog niets om te tonen.";color:var(--creme-zacht);font-size:14px}

/* ---------- tekens voor het lintje ---------- */
.tekenrij{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.tekenrij button{font-size:17px;line-height:1;padding:6px 8px;cursor:pointer;
  background:var(--veld);border:1px solid var(--lijn);border-radius:var(--r);color:var(--creme)}
.tekenrij button:hover{border-color:var(--goud);background:var(--vitrine)}

/* Veldfouten bij het afrekenen. Rood alleen is niet genoeg: wie kleuren slecht
   onderscheidt moet ook aan de tekst en de rand kunnen zien welk veld het is.
   Daarom staat er bij elk veld wat eraan mankeert, en zet het formulier
   aria-invalid zodat een schermlezer het meekrijgt. */
.veldfout{display:block;margin-top:5px;font-size:13px;color:var(--rood);line-height:1.45}
.formulier input[aria-invalid="true"],
.formulier textarea[aria-invalid="true"]{border-color:var(--rood)}
.formulier input[aria-invalid="true"]:focus{outline-color:var(--rood)}

/* Knopje om tussen donker en licht te wisselen. Staat in de voet, want het is
   een voorkeur en geen hoofdzaak. Een gewoon formulier: werkt zonder
   javascript, en de keuze blijft een jaar staan. */
.themaknop{margin:0}
.themaknop button{display:inline-flex;align-items:center;gap:7px;background:none;border:0;
  padding:4px 2px;cursor:pointer;color:var(--creme-zacht);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;transition:color var(--overgang)}
.themaknop button:hover{color:var(--goud)}
.themaknop svg{flex:0 0 auto}
@media(max-width:700px){ .themaknop span{display:none} }

/* Vormgevingspagina in het beheer: zes kleuren per thema naast elkaar. */
.kleurraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px 22px}
.kleurveld{display:block;margin:0}
.kleurkop{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--creme-zacht);margin-bottom:6px}
.kleurrij{display:flex;align-items:center;gap:9px}
.kleurrij input[type="color"]{flex:0 0 auto;width:38px;height:34px;padding:0;cursor:pointer;
  border:1px solid var(--lijn-op);border-radius:var(--r);background:none}
.kleurrij input[type="color"]::-webkit-color-swatch{border:0;border-radius:1px}
.kleurrij input[type="color"]::-webkit-color-swatch-wrapper{padding:2px}
.kleurrij input[name]{flex:1 1 auto;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:13.5px;letter-spacing:.02em}
.kleurveld .meta{display:block;margin-top:5px}

/* Logo's van de betaalmethoden in de voet. Ze komen van Mollie, staan op onze
   eigen server (anders stuurt elke bezoeker zijn IP naar mollie.com) en
   dragen hun eigen achtergrond, dus er hoeft geen vlakje onder. */
.betaalwijzen{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.betaalmerk{display:block;width:32px;height:24px;border-radius:4px;
  box-shadow:0 0 0 1px var(--lijn-overlay)}
.betaalnaam{font-size:12px;color:var(--creme-zacht)}

/* Betaalwijzen in het blok "Veilig betalen": nu met logo erbij. */
ul.betaalwijzen.metmerk li{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px}
ul.betaalwijzen.metmerk img{display:block;width:32px;height:24px;border-radius:4px;
  box-shadow:0 0 0 1px var(--lijn-overlay)}

/* Logo's bij de afrekenknop en in het mandje. */
.betaalbalk{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 14px}
.betaalbalk .meta{margin:0}

/* Akkoord met de voorwaarden en de nieuwsbrief. Twee aparte vinkjes: onder de
   AVG mag toestemming voor post niet meeliften op het akkoord met de
   voorwaarden, en mag niets vooraf aangevinkt staan. */
.instemming{margin:20px 0 4px;display:flex;flex-direction:column;gap:12px}
.vink{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:14px;line-height:1.5;cursor:pointer}
.vink input[type="checkbox"]{flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;cursor:pointer;
  accent-color:var(--goud)}
.vink span{color:var(--tekst-zacht)}
.vink a{text-underline-offset:2px}
.vink.fout span{color:var(--rood-tekst)}
.vink.fout input[type="checkbox"]{outline:2px solid var(--rood);outline-offset:2px}

/* Knop om een juridische pagina als bestand te bewaren. */
.bewaarregel{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:28px 0 0;
  padding-top:20px;border-top:1px solid var(--lijn)}
.bewaarregel .meta{margin:0}

/* Vervoerders: bij het product, in het mandje en bij het afrekenen. */
.bezorgregel{margin:14px 0 0;font-size:14px;line-height:1.5}
.bezorgregel.ophalen{padding:12px 14px;border-left:3px solid var(--goud);
  background:rgba(var(--goud-rgb),.07);border-radius:0 var(--r) var(--r) 0;color:var(--tekst-zacht)}
.vervoerders{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.vervoerders b{font-weight:600;color:var(--creme)}