/* Biljartshop Maastricht - vormgeving.
   Overgenomen uit voorbeeld A, met daaronder de aanvullingen die een echte
   winkel nodig heeft: meldingen, formulierfouten en het beheerscherm. */

:root{
  --bg:#0B0C0D; --bg2:#131517; --bg3:#1B1F22; --line:#282C31; --line2:#33383E;
  --ink:#F0EBDF; --soft:#9F9A8E; --faint:#6C6862;
  --gold:#C8A24C; --gold-hi:#EAD39A; --felt:#3E8A66; --red:#CF5546;
  --r:3px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Archivo",system-ui,sans-serif;
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Source Serif 4",Georgia,serif;margin:0;font-weight:600;line-height:1.15;text-wrap:balance}
p{margin:0 0 14px;text-wrap:pretty}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.num{font-variant-numeric:tabular-nums}

.demobar{background:#191204;color:var(--gold-hi);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;text-align:center;padding:7px 24px;border-bottom:1px solid #2E230D}
.demobar b{color:#8E815E;text-transform:none;letter-spacing:.02em;font-weight:400}

/* ---------- kop ---------- */
/* Het logo mag groot zijn omdat het wegscrollt; alleen de menubalk blijft
   staan. Anders zou een kop van ruim 250 px op een telefoon het halve scherm
   opeten. */
header.site{background:var(--bg);border-bottom:1px solid var(--line)}
.topline{display:flex;justify-content:center;padding:26px 0 18px}
.topline img{height:168px;width:auto;mix-blend-mode:screen}
.navbalk{position:sticky;top:0;z-index:50;background:var(--bg);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Drie kolommen: links in het midden, zoeken en winkelwagen rechts. Eerder
   stond de winkelwagen absoluut rechts, waardoor het zoekveld eroverheen liep. */
/* Drie kolommen, met het menu in het midden. De buitenste twee stonden op 1fr
   en dat is het venijn: de lege linkerkolom eiste evenveel ruimte als de
   rechter met zoekveld en winkelwagen, waardoor het midden te smal werd en er
   een menu-item naar de tweede regel viel. Met minmax(0,1fr) mogen ze krimpen
   en houdt het menu voorrang. */
.navrow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(auto,1fr);
  align-items:center;gap:14px;padding-top:8px;padding-bottom:8px}
.nav-links{grid-column:2;display:flex;justify-content:center;gap:2px;flex-wrap:nowrap}
.nav-rechts{grid-column:3;display:flex;justify-content:flex-end;align-items:center;gap:8px}
.nav-knop{display:none;align-items:center;justify-content:center;width:42px;height:38px;
  border:1px solid var(--line2);border-radius:2px;background:transparent;color:var(--soft);cursor:pointer}
.nav-knop:hover{border-color:var(--gold);color:var(--gold-hi)}
.navrow a{padding:8px 15px;font-size:14px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--soft);border-radius:2px;white-space:nowrap}
.navrow a:hover,.navrow a.on{color:var(--gold-hi);background:rgba(200,162,76,.1)}
.cartbtn{display:flex;align-items:center;gap:8px;padding:8px 14px;white-space:nowrap;
  border:1px solid var(--line2);border-radius:2px;font-size:13.5px;color:var(--soft)}
.cartbtn:hover{border-color:var(--gold);color:var(--gold-hi)}
.cartbtn b{color:var(--gold-hi)}

/* ---------- algemeen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:2px;
  font-weight:600;font-size:14.5px;letter-spacing:.05em;text-transform:uppercase;transition:.15s}
.btn-p{background:var(--gold);color:#141005}
.btn-p:hover{background:var(--gold-hi)}
.btn-s{border:1px solid var(--line2);color:var(--ink)}
.btn-s:hover{border-color:var(--gold);color:var(--gold-hi)}
.btn[disabled]{opacity:.4;cursor:default}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 12px}
.sec{padding:60px 0}
.sec h2{font-size:clamp(27px,3.6vw,38px);margin-bottom:8px}
.lead{color:var(--soft);max-width:58ch;margin-bottom:28px}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line2),transparent)}
.crumbs{font-size:12.5px;color:var(--faint);padding:20px 0 0;letter-spacing:.04em}
.crumbs a:hover{color:var(--gold)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 58%;opacity:.88}
/* het waas verdonkert de middenband waar de kop staat; boven- en onderrand
   van de foto blijven open, zodat het beeld zelf leesbaar blijft */
.hero .veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(6,7,8,.20) 0%,rgba(6,7,8,.74) 34%,rgba(6,7,8,.80) 70%,rgba(6,7,8,.52) 100%)}
/* Tekst links, het portret rechts. Het portret is de reden dat de tekst niet
   meer gecentreerd staat: twee gecentreerde kolommen naast elkaar lezen
   onrustig, links uitgelijnd loopt de blik netjes van kop naar knop. */
.hero .wrap{position:relative;padding:64px 24px 58px;display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:44px;align-items:center}
.hero h1{font-size:clamp(32px,4.6vw,52px);letter-spacing:-.01em;max-width:15ch;
  text-shadow:0 2px 18px rgba(0,0,0,.8)}
.hero h1 em{font-style:italic;color:var(--gold-hi)}
.hero p{color:#D2CEC3;font-size:18px;max-width:46ch;margin:18px 0 0;text-shadow:0 1px 10px rgba(0,0,0,.85)}
.hero .cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}

/* Het portret is staand (1:1,5). Zonder maximum wordt het in een brede kolom
   zo hoog dat het de hele kop uit beeld duwt; 330 px houdt het in verhouding
   met de tekst ernaast. */
.hero-portret{margin:0 0 0 auto;position:relative;max-width:330px;width:100%}
.hero-portret img{width:100%;height:auto;display:block;border-radius:4px;
  border:1px solid rgba(200,162,76,.35);box-shadow:0 18px 50px rgba(0,0,0,.55)}
.hero-portret figcaption{margin-top:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);text-align:center}
.usp{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.usp div{background:var(--bg);padding:22px 24px;text-align:center}
.usp b{display:block;font-family:"Source Serif 4",Georgia,serif;font-size:19px;color:var(--gold-hi);font-weight:600}
.usp span{font-size:13.5px;color:var(--faint)}

/* ---------- keuen ---------- */
.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.chip{padding:8px 16px;border:1px solid var(--line2);border-radius:99px;font-size:13.5px;color:var(--soft)}
.chip:hover{border-color:var(--gold);color:var(--gold-hi)}
.chip.on{background:var(--gold);border-color:var(--gold);color:#141005;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .18s,transform .18s}
.card:hover{border-color:var(--gold);transform:translateY(-2px)}
/* Vierkant en vrijstaand: een keu is lang en smal, en werd door het afsnijden
   een streep zonder kop of staart. Nu past het hele ding erin, op een zachte
   ondergrond die het midden oplicht zoals een spot boven een biljart. */
.card .ph{aspect-ratio:1/1;position:relative;overflow:hidden;display:grid;place-items:center;
  padding:14px;background:radial-gradient(circle at 50% 45%,#22272B 0,#141719 62%,#101315 100%)}
.card .ph img{width:100%;height:100%;object-fit:contain;opacity:.96;transition:transform .25s}
.card:hover .ph img{transform:scale(1.04)}
.card .bd{padding:16px 17px 18px;display:flex;flex-direction:column;gap:5px;flex:1}
.card .br{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:600}
.card h3{font-family:"Archivo",sans-serif;font-size:16px;font-weight:600;line-height:1.35}
.card .sp{font-size:13px;color:var(--faint)}
.card .pr{margin-top:auto;padding-top:11px;font-family:"Source Serif 4",Georgia,serif;font-size:23px;font-weight:600;color:var(--gold-hi)}
.card .pr small{display:block;font-family:Archivo,sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.02em;color:var(--faint);margin-top:2px}
/* Ronde label linksboven op de foto, in plaats van een hoekig blokje: op een
   vrijstaande foto oogt een rechthoek als een sticker die er niet bij hoort. */
.tag{position:absolute;top:11px;left:11px;z-index:1;font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
  background:rgba(11,12,13,.86);color:var(--gold-hi);border:1px solid var(--line2);
  backdrop-filter:blur(3px)}
.tag.occ{color:#9BE0BE;border-color:#2A6B4E;background:rgba(15,32,24,.88)}
.tag.sale{background:var(--gold);border-color:var(--gold);color:#141005}
.empty{text-align:center;padding:70px 20px;color:var(--faint)}

/* ---------- product ---------- */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:44px;padding:26px 0 64px;align-items:start}
.stage{border:1px solid var(--line);border-radius:var(--r);aspect-ratio:4/3;display:grid;
  place-items:center;overflow:hidden;padding:18px;
  background:radial-gradient(circle at 50% 45%,#22272B 0,#141719 62%,#0E1113 100%)}
.stage img{width:100%;height:100%;object-fit:contain}
.pdp h1{font-size:clamp(25px,3.2vw,34px);margin:8px 0 14px}
.price{font-family:"Source Serif 4",Georgia,serif;font-size:40px;font-weight:600;color:var(--gold-hi);line-height:1}
.vat{font-size:13px;color:var(--faint);margin:8px 0 20px}
.specs{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:8px}
.specs td{padding:10px 0;border-bottom:1px solid var(--line)}
.specs td:first-child{color:var(--faint);width:46%}
.specs tr:last-child td{border-bottom:0}
.buy{border:1px solid var(--line2);border-radius:var(--r);padding:20px;background:var(--bg2);margin:22px 0}
.stock{font-size:13.5px;font-weight:600;color:var(--felt);margin-bottom:14px}
.stock.one{color:var(--gold-hi)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:2px}
.qty button{width:40px;height:46px;font-size:19px;color:var(--soft)}
.qty span{width:42px;text-align:center;font-weight:600}
.buyrow{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.buyrow .btn-p{flex:1;min-width:180px}
.trust{display:flex;flex-direction:column;gap:7px;margin-top:16px;font-size:13.5px;color:var(--soft)}
.trust i{color:var(--felt);font-style:normal;font-weight:700;margin-right:9px}
.cond{display:flex;gap:4px;margin:6px 0 14px;max-width:220px}
.cond i{flex:1;height:5px;border-radius:3px;background:var(--line2)}
.cond i.on{background:var(--felt)}

/* ---------- inkoop ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.steps>div{background:var(--bg2);padding:26px 24px}
.steps .n{font-family:"Source Serif 4",Georgia,serif;font-size:34px;color:var(--gold);line-height:1;margin-bottom:10px}
.steps h3{font-size:19px;margin-bottom:6px}
.steps p{color:var(--soft);font-size:14.5px;margin:0}
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);padding:26px}
.panel h3{font-size:21px;margin-bottom:12px}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:34px;align-items:start}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field label{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.field input,.field textarea{font:inherit;padding:12px 13px;border:1px solid var(--line2);border-radius:2px;
  background:var(--bg);color:var(--ink)}
.field input:focus,.field textarea:focus{border-color:var(--gold);outline:none}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---------- winkelwagen ---------- */
.cartl{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:34px;padding:26px 0 70px;align-items:start}
.crow{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:center}
.crow .ph{width:84px;height:70px;background:var(--bg3);border-radius:2px;display:grid;place-items:center;overflow:hidden}
.crow .ph img{width:100%;height:100%;object-fit:cover}
.crow h4{margin:0;font-size:15px;font-weight:600}
.crow .m{font-size:12.5px;color:var(--faint)}
.rm{font-size:12.5px;color:var(--red);text-decoration:underline;margin-top:5px}
.sum{border:1px solid var(--line2);border-radius:var(--r);background:var(--bg2);padding:22px;position:sticky;top:220px}
.sline{display:flex;justify-content:space-between;padding:7px 0;font-size:14.5px;color:var(--soft)}
.sline.tot{border-top:1px solid var(--line);margin-top:9px;padding-top:14px;color:var(--ink);font-size:18px;font-weight:600}
.sline.tot b{font-family:"Source Serif 4",Georgia,serif;font-size:26px;color:var(--gold-hi)}
.pay{display:flex;flex-direction:column;gap:9px}
.pay label{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--line2);border-radius:2px;cursor:pointer;font-size:15px}
.pay label:has(input:checked){border-color:var(--gold);background:rgba(200,162,76,.09)}
.pay .mark{width:44px;height:26px;border-radius:2px;display:grid;place-items:center;font-size:9px;font-weight:800;color:#fff;flex-shrink:0}
.pay .hint{margin-left:auto;font-size:12.5px;color:var(--faint)}
.done{text-align:center;max-width:620px;margin:0 auto;padding:64px 20px 84px}
.done .chk{width:62px;height:62px;border-radius:50%;background:var(--felt);color:#08130D;display:grid;place-items:center;margin:0 auto 22px;font-size:30px;font-weight:700}
.done h1{font-size:34px;margin-bottom:10px}

footer.site{border-top:1px solid var(--line);background:var(--bg2);color:var(--faint);font-size:13.5px}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px;padding:44px 0 30px}
footer.site h4{font-family:"Archivo",sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
footer.site a:hover{color:var(--gold-hi)}
.fbar{border-top:1px solid var(--line);padding:16px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px}
.paylogos{display:flex;gap:6px;flex-wrap:wrap}
/* ---- chat ----------------------------------------------------------------
   Opzet zoals bij het voorbeeld: een balk met het logo bovenin, de berichten
   op een donkerder vlak zodat de bellen loskomen, ronde invoer met een rond
   verzendknopje, en startvragen die met de eerste vraag verdwijnen.
   -------------------------------------------------------------------------- */
.chat-knop{position:fixed;right:18px;bottom:18px;z-index:70;display:inline-flex;align-items:center;
  gap:9px;padding:12px 18px;border:0;border-radius:999px;background:var(--gold);color:#141005;
  font:inherit;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.5);
  transition:background .15s,transform .15s}
.chat-knop:hover{background:var(--gold-hi);transform:translateY(-1px)}
.chat-knop[hidden]{display:none}

.chat-venster{position:fixed;right:18px;bottom:18px;z-index:75;width:min(400px,calc(100vw - 36px));
  max-height:min(640px,calc(100vh - 36px));display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg2);border:1px solid var(--line2);border-radius:12px;
  box-shadow:0 18px 52px rgba(0,0,0,.6)}
.chat-venster[hidden]{display:none}

.chat-kop{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;
  padding:12px 13px;background:var(--bg3);border-bottom:1px solid var(--line)}
.chat-kop img{width:44px;height:34px;object-fit:contain;border-radius:5px;background:var(--bg)}
.chat-kop b{display:block;font-size:15px;line-height:1.15}
.chat-kop small{display:block;color:var(--faint);font-size:12px;margin-top:1px}
.chat-sluit{background:rgba(255,255,255,.08);border:0;color:var(--soft);width:32px;height:32px;
  border-radius:50%;cursor:pointer;display:grid;place-items:center}
.chat-sluit:hover{background:rgba(255,255,255,.16);color:var(--ink)}

.chat-lijst{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px;
  background:var(--bg)}
.chat-bel{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.5;
  white-space:pre-wrap;overflow-wrap:anywhere}
.chat-van-ons{background:var(--bg2);border:1px solid var(--line);color:var(--soft);
  border-bottom-left-radius:4px;align-self:flex-start}
.chat-van-u{background:var(--gold);color:#141005;border-bottom-right-radius:4px;align-self:flex-end}
.chat-wacht{color:var(--faint);font-style:italic}
/* Antwoorden van het model komen met eigen regelafbrekingen binnen; die moeten
   blijven staan. Vaste tekst in de pagina niet: daar zou de inspringing uit de
   broncode als losse spaties en afbrekingen in beeld komen. */
.chat-vast{white-space:normal}
.chat-van-ons a{color:var(--gold);text-decoration:underline;overflow-wrap:anywhere}
.chat-van-u a{color:inherit;text-decoration:underline}

.chat-starters{display:flex;flex-direction:column;gap:6px;margin-top:2px;align-self:flex-start;
  max-width:96%}
.chat-starters button{text-align:left;background:var(--bg2);border:1px solid var(--line2);
  border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;font-weight:600;
  color:var(--soft);cursor:pointer;transition:.15s}
.chat-starters button:hover{border-color:var(--gold);color:var(--gold-hi)}

/* Gegevens achterlaten: ingeklapt een regel tekst, uitgeklapt drie velden.
   Zit boven het invoerveld, want het hoort bij het afsluiten van een gesprek. */
.chat-contact{border-top:1px solid var(--line);background:var(--bg2)}
.chat-contact-open{display:block;width:100%;text-align:left;padding:11px 14px;border:0;
  background:none;font:inherit;font-size:12.5px;color:var(--gold);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.chat-contact-open:hover{color:var(--gold-hi)}
.chat-contact-vorm{display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px}
.chat-contact-vorm p{margin:0 0 2px;font-size:12.5px;color:var(--faint);line-height:1.5}
.chat-contact-vorm input{font:inherit;font-size:16px;padding:10px 13px;border:1px solid var(--line2);
  border-radius:3px;background:var(--bg);color:var(--ink);min-width:0}
.chat-contact-vorm input:focus{border-color:var(--gold);outline:none}
.chat-contact-knoppen{display:flex;gap:8px;align-items:center}
.btn-klein{padding:9px 16px;font-size:13px}
.chat-contact-terug{background:none;border:0;font:inherit;font-size:12.5px;color:var(--faint);
  cursor:pointer;text-decoration:underline}
.chat-contact-terug:hover{color:var(--ink)}

.chat-invoer{display:flex;gap:8px;align-items:center;padding:10px;
  border-top:1px solid var(--line);background:var(--bg2)}
.chat-invoer input{flex:1;min-width:0;font:inherit;font-size:16px;padding:11px 16px;
  border:1px solid var(--line2);border-radius:999px;background:var(--bg);color:var(--ink)}
.chat-invoer input:focus{border-color:var(--gold);outline:none}
.chat-zend{width:42px;height:42px;flex:none;border:0;border-radius:50%;background:var(--gold);
  color:#141005;cursor:pointer;display:grid;place-items:center}
.chat-zend:hover{background:var(--gold-hi)}
.chat-zend[disabled]{background:var(--line2);color:var(--faint);cursor:default}

.chat-noot{margin:0;padding:0 14px 12px;font-size:11.5px;color:var(--faint);line-height:1.5;
  background:var(--bg2)}
.chat-noot a{color:var(--faint);text-decoration:underline}

@media (max-width:560px){
  .chat-knop span{display:none}
  .chat-knop{padding:14px;border-radius:50%}
  /* dvh in plaats van vh: dat is de hoogte die werkelijk zichtbaar is. Met vh
     rekent de telefoon met het scherm zonder toetsenbord, en verdwijnt de
     onderkant van het venster achter dat toetsenbord zodra het opkomt. */
  .chat-venster{right:10px;left:10px;bottom:10px;width:auto;
    max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px)}
}

/* het aantal achter een filterknop: aanwezig, maar niet luider dan het woord */
.chip-tel{font-variant-numeric:tabular-nums;font-size:11px;opacity:.55;margin-left:3px}
.chip.on .chip-tel{opacity:.75}

.paylogos span{font-size:9px;font-weight:800;color:#fff;padding:4px 7px;border-radius:2px}
/* Het copyrightteken is de ingang naar het beheer. Het valt niet op tussen de
   voettekst, maar wie hem zoekt vindt hem altijd op dezelfde plek - dat scheelt
   een adres onthouden. Iets ruimer aantikbaar, want op een telefoon is een los
   teken van 12px lastig raken. */
.beheerpoort{display:inline-block;padding:2px 5px;margin-left:-5px;border-radius:3px;
  color:inherit;text-decoration:none}
.beheerpoort:hover,.beheerpoort:focus-visible{background:var(--gold);color:#fff}

@media (max-width:900px){ .pdp,.cartl{grid-template-columns:1fr} .sum{position:static} }
@media (max-width:620px){
  .nav-links a{padding:7px 10px;font-size:12.5px}
  .fieldrow{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------------------------------------------------------------------------
   Aanvullingen op het ontwerp van voorbeeld A: onderdelen die een demo niet
   nodig had maar een werkende winkel wel.
   ------------------------------------------------------------------------- */

/* meldingen na een handeling */
.melding{margin:18px 0 0;padding:13px 18px;border-radius:var(--r);font-size:14.5px;
  border:1px solid var(--felt);background:rgba(62,138,102,.12);color:#BFE8D2}
.melding.let-op{border-color:var(--gold);background:rgba(200,162,76,.12);color:var(--gold-hi)}
.melding.fout{border-color:var(--red);background:rgba(207,85,70,.12);color:#F0B8B0}

/* aantalveld: in de demo waren het knoppen, hier een echt invoerveld */
.qty{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:2px;overflow:hidden}
.qty input{width:74px;height:46px;padding:0 12px;font:inherit;font-weight:600;text-align:center;
  background:var(--bg);color:var(--ink);border:0}
.qty input:focus{outline:2px solid var(--gold);outline-offset:-2px}
.qty input[readonly]{color:var(--faint)}

.verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stock.uit{color:var(--red)}

/* De rij met miniaturen. Er stond geen regel voor de omhullende .thumbs, dus
   de vierkantjes stapelden onder elkaar in plaats van naast elkaar. Liggende
   verhouding, want een keu is lang: op een vierkantje zie je alleen het midden. */
.thumbs{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.thumbs a{width:92px;height:69px;flex:0 0 auto;border:1px solid var(--line);
  border-radius:2px;overflow:hidden;display:block;background:var(--bg2)}
.thumbs a:hover{border-color:var(--gold)}
.thumbs a.actief{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.thumbs a img{transition:opacity .15s}
.thumbs a:not(.actief) img{opacity:.72}
.thumbs a:hover img{opacity:1}
.thumbs img{width:100%;height:100%;object-fit:contain;padding:4px}

/* formulieren in de winkel */
.veldfout{border-color:var(--red) !important}
.foutregel{color:#F0B8B0;font-size:13px;margin-top:4px}

/* afrekenen en bevestiging */
.paneel{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:18px}
.paneel h3{font-size:20px;margin-bottom:14px}
.veldrij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Het hidden-attribuut werkt alleen zolang geen enkele regel display zet.
   .veld hieronder doet dat wel (display:flex), en die wint van de standaard
   van de browser. Deze regel zet dat recht voor de hele site. */
[hidden]{display:none !important}

.veld{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.veld label{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.veld input,.veld textarea{font:inherit;padding:12px 13px;border:1px solid var(--line2);border-radius:2px;
  background:var(--bg);color:var(--ink);width:100%}
.veld input:focus,.veld textarea:focus{border-color:var(--gold);outline:none}

.keuzes{display:flex;flex-direction:column;gap:9px}
.keuzes label{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--line2);
  border-radius:2px;cursor:pointer;font-size:15px}
.keuzes label:has(input:checked){border-color:var(--gold);background:rgba(200,162,76,.09)}
.keuzes input{accent-color:var(--gold)}
.keuzes .merk{width:44px;height:26px;border-radius:2px;display:grid;place-items:center;
  font-size:9px;font-weight:800;color:#fff;flex-shrink:0}
.keuzes .wenk{margin-left:auto;font-size:12.5px;color:var(--faint)}

.done{text-align:center;max-width:640px;margin:0 auto;padding:56px 20px 80px}
.done .chk{width:62px;height:62px;border-radius:50%;background:var(--felt);color:#08130D;
  display:grid;place-items:center;margin:0 auto 22px;font-size:30px;font-weight:700}
.done h1{font-size:34px;margin-bottom:10px}
.done .sline{display:flex;justify-content:space-between;padding:7px 0;font-size:14.5px;color:var(--soft)}
.done .sline.tot{border-top:1px solid var(--line);margin-top:9px;padding-top:14px;
  color:var(--ink);font-size:18px;font-weight:600}
.done .sline.tot b{font-family:"Source Serif 4",Georgia,serif;font-size:24px;color:var(--gold-hi)}

@media (max-width:620px){ .veldrij{grid-template-columns:1fr} }

/* stappen bij de inkooppagina */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.steps>div{background:var(--bg2);padding:26px 24px}
.steps .n{font-family:"Source Serif 4",Georgia,serif;font-size:34px;color:var(--gold);line-height:1;margin-bottom:10px}
.steps h3{font-size:19px;margin-bottom:6px}
.steps p{color:var(--soft);font-size:14.5px;margin:0}

/* nieuwsbrief onderaan elke pagina */
.nieuwsbrief{background:var(--bg2);border-top:1px solid var(--line)}
.nieuwsbrief .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:34px;padding:44px 24px;align-items:center}
.nieuwsbrief h2{font-size:clamp(22px,2.8vw,28px);margin-bottom:8px}
.nieuwsbrief p{color:var(--soft);font-size:14.5px;max-width:48ch;margin:0}
.nieuwsbrief form{display:flex;flex-direction:column;gap:10px}
.nieuwsbrief input{font:inherit;padding:12px 14px;border:1px solid var(--line2);border-radius:2px;
  background:var(--bg);color:var(--ink)}
.nieuwsbrief input:focus{border-color:var(--gold);outline:none}
@media (max-width:820px){ .nieuwsbrief .wrap{grid-template-columns:1fr} }

/* lopende tekst: voorwaarden, retourneren, privacy */
.artikel{max-width:70ch;margin:0 auto;padding:24px 0 70px}
.artikel h1{font-size:clamp(28px,4vw,40px);margin-bottom:6px}
.artikel .datum{color:var(--faint);font-size:13.5px;margin-bottom:26px}
.artikel h2{font-size:22px;margin:32px 0 10px}
.artikel p,.artikel li{color:var(--soft)}
.artikel strong{color:var(--ink)}
/* Een knop is geen tekstlink. Zonder de uitzondering won deze regel van
   .btn-p en kreeg de knop goudkleurige letters op een goudkleurige vlakte:
   "Neem contact op" was daardoor niet te lezen. */
.artikel a:not(.btn){color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.artikel ul,.artikel ol{padding-left:20px;margin:0 0 16px}
.artikel li{margin:6px 0}
.artikel li::marker{color:var(--gold-dim,var(--gold))}
.artikel .melding{margin-bottom:24px}

.artikel .uitleg{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px}
.artikel .uitleg th{text-align:left;vertical-align:top;padding:12px 16px 12px 0;width:34%;
  color:var(--ink);font-weight:600;border-bottom:1px solid var(--line)}
.artikel .uitleg td{padding:12px 0;color:var(--soft);border-bottom:1px solid var(--line)}

.modelformulier{border:1px solid var(--line2);border-radius:var(--r);padding:22px;
  background:var(--bg2);margin:18px 0}
.modelformulier p{margin:0 0 12px}
.modelformulier .lijn{border-bottom:1px solid var(--line2);height:44px}
.modelformulier .lijn-kort{display:inline-block;border-bottom:1px solid var(--line2);
  min-width:220px;height:20px}

/* zoekveld in de menubalk */
.zoek{display:flex;align-items:center;border:1px solid var(--line2);border-radius:2px;
  background:var(--bg2);overflow:hidden}
.zoek input{font:inherit;font-size:13.5px;padding:8px 12px;width:186px;min-width:100px;border:0;
  background:transparent;color:var(--ink)}
.zoek input::placeholder{color:var(--faint)}
.zoek input:focus{outline:none}
.zoek:focus-within{border-color:var(--gold)}
.zoek button{display:grid;place-items:center;width:36px;height:34px;border:0;cursor:pointer;
  background:transparent;color:var(--soft)}
.zoek button:hover{color:var(--gold-hi)}
/* Wordt het krap, dan levert eerst het zoekveld ruimte in en daarna pas het
   menu. Een menu dat afbreekt valt op; een zoekveld dat tien pixels smaller
   wordt niet. */
@media (max-width:1240px){
  .zoek input{width:150px}
  .navrow a{padding:8px 11px;letter-spacing:.06em}
}
@media (max-width:1080px){
  .topline img{height:150px}
  .zoek input{width:130px}
  .navrow a{padding:7px 9px;font-size:13px}
  .cartbtn .wagen-tekst{display:none}
}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;gap:30px;text-align:center}
  .hero h1{max-width:none;margin-inline:auto}
  .hero p{margin-inline:auto}
  .hero .cta{justify-content:center}
  .hero-portret{max-width:300px;margin:0 auto}
  .topline{padding:18px 0 12px}
  .topline img{height:150px}
  .navrow{grid-template-columns:1fr;gap:10px}
  .nav-links,.nav-rechts{grid-column:1}
  .nav-rechts{justify-content:space-between}

  /* Menuknop en winkelwagen op één regel, het zoekveld op de regel eronder.
     Met z'n drieën naast elkaar past het niet op een telefoon: het zoekveld
     duwde de winkelwagen dan buiten beeld. */
  .nav-knop{display:flex;order:1;flex:0 0 auto}
  .nav-rechts{order:1;flex-wrap:wrap;justify-content:space-between;gap:10px}
  .cartbtn{order:2;flex:0 0 auto}
  .zoek{order:3;flex:0 0 100%;min-width:0}
  .zoek input{flex:1;width:auto;min-width:0}   /* hier mag hij wel volledig meerekken */
  .cartbtn .wagen-tekst{display:inline}

  /* De links klappen onder de balk uit. */
  .nav-links{order:2;display:none;flex-direction:column;gap:0;
    border-top:1px solid var(--line);margin-top:2px}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 4px;font-size:15.5px;border-bottom:1px solid var(--line)}
  .nav-links a:last-child{border-bottom:0}
}

/* Logomaten bij elkaar, van breed naar smal. De volgorde is hier het hele
   verhaal: bij 600 px passen alle drie de regels, en de laatste wint. */
@media (max-width:620px){
  .topline{padding:16px 0 12px}
  .topline img{height:150px}
}

/* Omschrijving van een keu: opgemaakt in het beheer, getoond zoals getypt. */
.omschrijving{color:var(--soft);margin:0 0 14px}
.omschrijving p{margin:0 0 12px}
.omschrijving p:last-child,.omschrijving ul:last-child{margin-bottom:0}
.omschrijving ul{margin:0 0 12px;padding-left:20px}
.omschrijving li{margin:4px 0}
.omschrijving li::marker{color:var(--gold-dim,var(--gold))}
.omschrijving strong{color:var(--ink)}
.omschrijving a:not(.btn){color:var(--gold-hi);text-decoration:underline}

/* Was-prijs: doorgestreept naast de vraagprijs, kleiner en gedempt zodat het
   duidelijk de oude prijs is en niet wat u nu betaalt. */
.card .pr s{font-size:15px;color:var(--faint);font-weight:400;margin-left:6px;
  font-family:"Archivo",sans-serif}
.price s{font-size:20px;color:var(--faint);font-weight:400;margin-left:8px;
  font-family:"Archivo",sans-serif}
.besparing{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;
  letter-spacing:.04em;color:#9BE0BE;background:rgba(62,138,102,.16);
  border:1px solid rgba(62,138,102,.5);border-radius:2px;padding:3px 10px}

/* De fotokiezer. De knop van de browser ("Bestanden kiezen - Geen bestand
   gekozen") is van het besturingssysteem en past bij geen enkel ontwerp. Dit is
   een gewoon label dat hetzelfde doet, plus ruimte om foto's naartoe te slepen. */
.fotokiezer{display:flex;align-items:center;gap:13px;padding:16px 18px;cursor:pointer;
  border:1px dashed var(--line2);border-radius:var(--r);background:var(--bg);
  color:var(--soft);transition:border-color .15s,background .15s}
.fotokiezer:hover,.fotokiezer.sleep{border-color:var(--gold);background:rgba(200,162,76,.06)}
.fotokiezer.sleep{border-style:solid}
.fotokiezer svg{flex:none;color:var(--gold)}
.fotokiezer b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.fotokiezer small{display:block;font-size:12.5px;color:var(--faint);margin-top:2px;
  overflow-wrap:anywhere}
.fotokiezer.gevuld{border-style:solid;border-color:var(--felt);background:rgba(62,138,102,.07)}
.fotokiezer.gevuld svg{color:var(--felt)}
.fotokiezer.teveel{border-color:var(--gold);background:rgba(200,162,76,.08)}
.fotokiezer.teveel svg{color:var(--gold)}
/* het invoerveld zelf blijft bereikbaar met het toetsenbord */
#fotos:focus-visible + .fotokiezer{outline:2px solid var(--gold);outline-offset:3px}

/* Verkopen of inruilen: twee keuzes naast elkaar, met het hele blok aanklikbaar. */
.keuzerij{display:flex;gap:10px;flex-wrap:wrap}
.keuze{display:flex;align-items:center;gap:9px;padding:11px 14px;cursor:pointer;
  border:1px solid var(--line2);border-radius:2px;background:var(--bg);font-size:14.5px;flex:1;min-width:150px}
.keuze:has(input:checked){border-color:var(--gold);background:rgba(200,162,76,.09);
  box-shadow:inset 0 0 0 1px var(--gold)}
.keuze input{accent-color:var(--gold);width:16px;height:16px}

/* Op de iPhone zoomt Safari de pagina in zodra je een invoerveld aanraakt dat
   kleiner is dan 16px. Het zoekveld is bewust klein op een ruim scherm, maar
   op een telefoon moet het gewoon 16px zijn. */
@media (max-width:820px){
  /* De maat van de menu-items staat hierboven al bij het uitklapmenu; hier
     alleen nog het zoekveld, dat anders door Safari wordt ingezoomd. */
  .zoek input{font-size:16px}
}

/* Op een smal scherm passen het zoekveld en de winkelwagen niet naast elkaar
   met het woord "Winkelwagen" erbij. Het karretje met het aantal zegt genoeg. */
@media (max-width:560px){
  .cartbtn .wagen-tekst{display:none}
  .cartbtn{padding:8px 12px}
  .zoek input::placeholder{font-size:14px}
}

/* ---------------------------------------------------------------------------
   Foto op ware grootte
   ------------------------------------------------------------------------- */
.vergroot{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(6,7,8,.95);padding:20px}
.vergroot.aan{display:flex}
/* achter het venster niet meescrollen */
body.vergroot-open{overflow:hidden}

.vergroot figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;
  align-items:center;gap:12px}
.vergroot img{max-width:92vw;max-height:84vh;width:auto;height:auto;object-fit:contain;
  border-radius:3px;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.vergroot figcaption{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

.vergroot button{position:absolute;background:rgba(20,22,24,.8);color:var(--ink);
  border:1px solid var(--line2);border-radius:50%;cursor:pointer;display:grid;place-items:center;
  width:48px;height:48px;font-size:26px;line-height:1;padding:0;transition:.15s}
.vergroot button:hover{border-color:var(--gold);color:var(--gold-hi);background:rgba(20,22,24,.95)}
.vg-sluit{top:18px;right:18px;font-size:30px}
.vg-vorige{left:18px;top:50%;transform:translateY(-50%)}
.vg-volgende{right:18px;top:50%;transform:translateY(-50%)}

@media (max-width:620px){
  .vergroot{padding:10px}
  .vergroot img{max-width:96vw;max-height:76vh}
  .vergroot button{width:42px;height:42px;font-size:22px}
  .vg-vorige{left:8px} .vg-volgende{right:8px}
}
@media (prefers-reduced-motion:reduce){.vergroot button{transition:none}}