* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #15202b; background: #f3f5f7; }
a { color: var(--merk); }
code { background: #eef1f4; padding: 1px 5px; border-radius: 4px; font-size: 90%; }
.wrap { max-width: 900px; margin: 0 auto; padding: 1.5rem; }
.muted { color: #5c6873; }
.klein { font-size: 12px; }
.opdruk-cap { font-size: 12px; color: #5c6873; margin-top: 2px; }
.opdruk-line { font-size: 13px; color: #5c6873; margin-top: 6px; }
.pakket-sel { width: 100%; font-size: 12px; padding: 4px 5px; border: 1px solid #cfd6dd; border-radius: 6px; background: #fff; color: #33404d; }
.lijn-pak { color: var(--merk); font-weight: 600; }
.ot-pak { display: block; font-size: 11px; color: var(--merk); font-weight: 600; margin-top: 1px; }
.mx-pakket { margin-bottom: 12px; }
.mx-pakket select { min-width: 240px; font-size: 14px; padding: 5px 7px; }
.view-link { color: var(--merk); font-weight: 600; text-decoration: none; font-size: 14px; white-space: nowrap; }
.view-link:hover { text-decoration: underline; }
.deco-kop { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.deco-intro { margin: 2px 0 18px; }
.deco-sectie { margin: 0 0 30px; }
.deco-sectie-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--merk); padding-bottom: 7px; margin-bottom: 16px; }
.deco-sectie-kop h3 { margin: 0; color: var(--merk); font-size: 17px; }
.deco-voorbeeld { height: auto; max-width: 100%; background: #eef1f4; border: 1px solid #e3e7ec; border-radius: 8px; padding: 3px; flex: none; }
.deco-sectie-tekst { display: flex; flex-direction: column; gap: 2px; }
.deco-beeld-blok { margin: 10px 0 6px; }
.view-toggle { border: 1px solid var(--merk); background: #fff; color: var(--merk); font-weight: 600; font-size: 13px; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.view-toggle:hover { background: var(--merk); color: #fff; }
body.textiel-verborgen .deco-grid { display: none; }
.deco-oms { color: #5c6873; font-size: 13px; }
.deco-aantal { margin-left: auto; color: #8a939c; font-size: 12px; }
.deco-kaart { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #e3e7ec; border-radius: 12px; background: #fff; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.deco-kaart:hover { box-shadow: 0 6px 18px rgba(0,0,0,.09); transform: translateY(-2px); }
.deco-kaart .titel { font-weight: 600; }
.deco-kaart .ga { color: var(--merk); font-weight: 600; font-size: 13px; margin-top: auto; }

.merkbalk { background: var(--merk); color: #fff; display: flex; justify-content: space-between;
  align-items: center; padding: 12px 20px; gap: 12px; flex-wrap: wrap; }
.merk-links { display: flex; align-items: center; gap: 12px; min-width: 0; margin-left: 280px; }   /* ruimte voor het vaste logo */
.logo { position: fixed; top: 10px; left: 10px; z-index: 100; height: 130px; width: auto; max-width: 260px;
  border-radius: 10px; background: #fff; object-fit: contain; padding: 6px 10px; box-sizing: content-box;
  box-shadow: 0 2px 12px rgba(0,0,0,.15); flex: none; }   /* huisstijl-logo, vast linksboven (10px); content op full-HD is gecentreerd → geen overlap */
.portaal { font-size: 16px; font-weight: 600; line-height: 1.15; }
.klantnaam { font-size: 13px; opacity: .85; }
.merk-rechts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.chip { background: rgba(255,255,255,.18); padding: 5px 11px; border-radius: 999px; font-size: 13px; }
.mand-link { color: #fff; text-decoration: none; }
.mand-link:hover { background: rgba(255,255,255,.30); }
.persoon { display: flex; align-items: center; gap: 6px; }
.persoon label { color: #fff; font-size: 13px; }
.persoon select { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.45);
  border-radius: 6px; padding: 5px 7px; font-size: 13px; }
.persoon option { color: #15202b; }

.inhoud { display: flex; gap: 18px; align-items: flex-start; max-width: 1600px; margin: 0 auto 0 280px; padding: 18px; }   /* links uitgelijnd op de header (280px), vrij van het vaste logo */
.catalogus { flex: 1; min-width: 0; }
.catalogus h2 { margin: .2rem 0 1rem; font-size: 18px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }

.kaart { background: #fff; border: .5px solid #d7dce1; border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px; margin: 0; }
.foto { height: 96px; background: #eef1f4; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; color: #9aa3ad; font-size: 12px; }
.titel { font-weight: 600; }
.besch { font-size: 13px; color: #5c6873; min-height: 2.4em; }
.swatches { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.veld .swatches { flex: 1 1 0; min-width: 0; }
.sw input { display: none; }
.sw span { width: 36px; height: 36px; border-radius: 50%; display: inline-block;
  border: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); cursor: pointer; vertical-align: middle; }
.sw input:checked + span { outline: 2px solid var(--merk); outline-offset: 2px; }
/* kleurbron-switch: tool-swatch (F&R color_swatch) als rond beeld-bolletje */
.sw-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: none;
  vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); cursor: pointer; background: #eef1f4; }
body.bron-tool .sw.has-tool .sw-flat { display: none; }
body.bron-tool .sw.has-tool .sw-img  { display: inline-block; }
.sw input:checked ~ .sw-img { outline: 2px solid var(--merk); outline-offset: 2px; }
.bron-toggle { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.16);
  border-radius: 999px; padding: 3px 3px 3px 10px; }
.bron-lbl-pre { color: #fff; font-size: 13px; opacity: .9; }
.bron-opt { border: none; background: none; color: #fff; font-family: inherit; font-size: 12px;
  padding: 3px 11px; border-radius: 999px; cursor: pointer; line-height: 1.4; }
.bron-opt.actief { background: #fff; color: var(--merk); font-weight: 600; }
.rij { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kaart select, .aantal { padding: 6px; border: 1px solid #cbd2d9; border-radius: 6px; font-size: 14px; }
.aantal { width: 62px; }
.prijs { font-weight: 600; }
.merkknop { background: var(--merk); color: #fff; border: none; border-radius: 8px;
  padding: 8px 13px; cursor: pointer; font-size: 14px; }
.merkknop.breed { width: 100%; margin-top: 10px; padding: 10px; }
.merkknop:hover { filter: brightness(.95); }
.leeg { background: none; border: none; color: #5c6873; cursor: pointer; font-size: 12px;
  margin-top: 8px; text-decoration: underline; padding: 0; }

.mandje { width: 540px; flex: none; background: #fff; border: .5px solid #cbd2d9; border-radius: 12px; padding: 14px;
  position: sticky; top: 18px; max-height: calc(100vh - 36px); display: flex; flex-direction: column; }
.mandje-lijnen { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.mandje h3 { margin: .1rem 0 .8rem; font-size: 16px; }
.lijn { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0;
  border-top: .5px solid #eef1f4; gap: 8px; }
.lijn-sku { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.lijn-prijs { flex: none; white-space: nowrap; }
.lijn-del { flex: none; display: inline-flex; margin: 0; }
.del-knop { border: none; background: none; color: #aab2bb; cursor: pointer; font-size: 17px; line-height: 1; padding: 0 3px; }
.del-knop:hover { color: #d92d20; }
.order-tabel .ot-del { width: 24px; text-align: center; }
.mx-kkop.kleurbaar { cursor: pointer; }
.mx-kkop.kleurbaar:hover .mx-knaam { text-decoration: underline; }
.lijn-c3 { display: inline-block; background: var(--merk); color: #fff; font-family: Consolas, monospace;
  font-weight: 700; font-size: 11px; line-height: 1; padding: 2px 5px; border-radius: 5px;
  letter-spacing: .02em; margin-right: 5px; vertical-align: baseline; }
.budget { margin: 10px 0; }
.balk { height: 7px; background: #e7ebee; border-radius: 999px; overflow: hidden; }
.balk div { height: 100%; background: var(--merk); }
.budget.over .balk div { background: #d92d20; }
.budget-waarschuwing { margin-top: 6px; color: #d92d20; font-weight: 600; font-size: 12px; }
.budgetchip { display: inline-flex; align-items: center; gap: 3px; }
.budgetchip.over { background: rgba(217,45,32,.85); }
.totaal { font-weight: 600; margin-top: 10px; }

/* order-weergave: toggle compact <-> 6 kolommen (bovenaan het mandje) */
.mandje-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: .8rem; }
.mandje-kop h3 { margin: 0; }
.order-toggle { display: inline-flex; border: 1px solid #cbd2d9; border-radius: 8px; overflow: hidden; flex: none; }
.ot-knop { border: none; background: #fff; color: #445; font-size: 12px; font-weight: 600; padding: 5px 11px; cursor: pointer; }
.ot-knop + .ot-knop { border-left: 1px solid #cbd2d9; }
.ot-knop.actief { background: var(--merk); color: #fff; }
.order-tabel { display: none; width: 100%; border-collapse: collapse; font-size: 13px; }
.order-tabel th, .order-tabel td { border-bottom: .5px solid #eef1f4; padding: 6px 6px; text-align: left; vertical-align: middle; }
.order-tabel th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #5c6873;
  font-weight: 700; border-bottom: 1px solid #d7dce1; white-space: nowrap; }
.order-tabel .ot-num { text-align: center; white-space: nowrap; }
.order-tabel .ot-prijs { text-align: right; white-space: nowrap; }
.order-tabel .ot-prod { font-weight: 500; }
.order-tabel .ot-c3 { white-space: nowrap; }
.mandje.kol .order-compact { display: none; }
.mandje.kol .order-tabel { display: table; }

.klantlijst { list-style: none; padding: 0; }
.klantlijst li { padding: 8px 0; }
.klantlijst a { font-size: 16px; }

/* lijst-weergave (bv. KTN, waar een tegel een hele pagina zou zijn) */
.lijst { display: flex; flex-direction: column; gap: 8px; }
.sectiekop { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--merk); margin: 16px 0 2px; padding-bottom: 4px; border-bottom: 1.5px solid var(--merk); }
.sectiekop:first-child { margin-top: 0; }
.grid .sectiekop { grid-column: 1 / -1; }   /* soort-kop spant het volledige tegelraster */
.sk-letter { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em;
  margin-right: 8px; vertical-align: middle; background: var(--merk); color: #fff; border-radius: 5px;
  font-family: Consolas, monospace; font-weight: 700; font-size: .95em; }
.lijstrij { display: flex; align-items: center; gap: 12px; background: #fff;
  border: .5px solid #d7dce1; border-radius: 10px; padding: 9px 12px; margin: 0; flex-wrap: wrap; }
.lr-thumb { width: 38px; height: 38px; border-radius: 8px; background: #eef1f4; color: #9aa3ad;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex: none; }
.lr-naam { flex: 1 1 220px; min-width: 160px; }
.lr-naam .besch { min-height: 0; }
.lr-vast { flex: none; }
.maattabel { font-size: 13px; white-space: nowrap; }
.linkrij { text-decoration: none; color: inherit; cursor: pointer; transition: border-color .12s; }
.linkrij:hover { border-color: var(--merk); }
.lr-thumb-img { width: 46px; height: 46px; border-radius: 8px; object-fit: contain;
  background: #fff; border: .5px solid #e1e5e9; flex: none; }
.artcode { font-size: 12px; color: #5c6873; white-space: nowrap; font-family: Consolas, monospace; }
.ga { color: var(--merk); font-weight: 600; white-space: nowrap; }
.oracle { font-family: Consolas, monospace; font-size: 11px; color: #5c6873; }
.foto-img { height: 120px; width: 100%; object-fit: contain; background: #eef1f4;
  border: .5px solid #dfe4e9; border-radius: 8px; }
.kaart.staand .foto-img { height: 210px; }     /* portret: hoger fotovak -> beeld groter */
.kaart.liggend .foto-img { height: 150px; }    /* landschap: lager/breder -> vult de breedte */

/* detailpagina */
.detail { max-width: 1240px; margin: 0 auto; padding: 18px; }
.terug { display: inline-block; margin-bottom: 14px; text-decoration: none; }
.detail-kop { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.blader { margin-left: auto; display: inline-flex; gap: 8px; }
.blader-knop { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #cbd2d9; border-radius: 8px; padding: 6px 12px; font-size: 14px; font-weight: 500; color: var(--merk); text-decoration: none; white-space: nowrap; }
.blader-knop:hover { background: var(--merk); color: #fff; border-color: var(--merk); }
.detail-kop .terug { margin-bottom: 0; }
.detail-code { display: inline-flex; align-items: center; background: var(--merk); color: #fff;
  font-family: Consolas, monospace; font-weight: 700; font-size: 26px; line-height: 1;
  padding: 8px 15px; border-radius: 10px; letter-spacing: .04em; }
.lr-code { align-self: stretch; display: inline-flex; align-items: center; justify-content: center;
  min-width: 3.4em; padding: 0 10px; background: var(--merk); color: #fff; border-radius: 8px;
  font-family: Consolas, monospace; font-weight: 700; font-size: 17px; letter-spacing: .02em; flex: none; }

/* Lay-out A — staand beeld: [beeld | info | bestel]; beeld op schermhoogte begrensd */
.detail-grid.layout-staand { display: grid; gap: 20px 28px; align-items: start;
  grid-template-columns: auto minmax(0,1fr) 300px; grid-template-areas: "beeld info bestel"; }
/* Lay-out B — liggend beeld: beeld bovenaan, daaronder info + bestel */
.detail-grid.layout-liggend { display: grid; gap: 18px 28px; align-items: start;
  grid-template-columns: minmax(0,1fr) 300px; grid-template-areas: "beeld beeld" "info bestel"; }

.beeldkolom  { grid-area: beeld; min-width: 0; text-align: center; }
.productbeeld { background: #eef1f4; border: 1px solid #dfe4e9; border-radius: 10px; }
.infokolom   { grid-area: info; min-width: 0; }
.bestelkolom { grid-area: bestel; }

.productbeeld { background: #fff; border: .5px solid #e1e5e9; border-radius: 12px; display: block;
  width: auto; max-width: 100%; max-height: 600px; margin: 0 auto; }   /* breed vult de breedte; hoogte-cap 600px (broeken apart aan te pakken) */
/* staand: begrens op de zichtbare schermhoogte — vh telt de adres-/bookmarkbalk al mee */
.layout-staand .productbeeld { width: auto; max-height: 600px; margin: 0 auto; }   /* staand/compact: beeld vult z'n kolom (max-width 100% via basis), hoogte-cap 600 */
.layout-liggend .beeldkolom { text-align: center; }
.layout-liggend .productbeeld { width: auto; max-width: 100%; max-height: 600px; margin: 0 auto; }   /* liggend = breed: vult de breedte, cap 600 */

.maat-knop { margin: 12px auto 0; display: inline-flex; align-items: center; gap: 6px; background: var(--merk); color: #fff; border: none; border-radius: 8px; padding: 8px 14px; font-size: 14px; font-weight: 500; cursor: pointer; }
.maat-knop:hover { filter: brightness(1.08); }
.maat-modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 24px; cursor: zoom-out; }
.maat-modal.open { display: flex; }
.maat-modal img { max-width: 92vw; max-height: 92vh; background: #fff; border-radius: 8px; box-shadow: 0 10px 44px rgba(0,0,0,.45); }

.feature-strip { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.feature-strip img { height: 82px; width: auto; background: #fff; border: .5px solid #e1e5e9; border-radius: 8px; }

.infohead h2 { margin: .1rem 0; }
.infohead .artcode { margin-bottom: 6px; }
.besch-lang { font-size: 14px; line-height: 1.5; margin: 6px 0 14px; }
.infoblokken { display: flex; flex-wrap: wrap; gap: 18px 24px; }
.infoblok { flex: 1 1 240px; min-width: 0; }
.infoblok h3 { margin: 0 0 6px; font-size: 13px; color: var(--merk);
  text-transform: uppercase; letter-spacing: .03em; }
.printtabel { border-collapse: collapse; font-size: 12.5px; }
.printtabel td { border: .5px solid #d7dce1; padding: 5px 9px; vertical-align: top; }
.printtabel td:first-child { font-weight: 500; background: #f6f8fa; color: #15202b; }
.printtabel td:last-child { color: #444; }
.kenmerken { color: #444; font-size: 13px; padding-left: 18px; margin: 0; }
.kenmerken li { margin: 3px 0; }

.bestelblok { background: #fff; border: .5px solid #cbd2d9; border-radius: 12px; padding: 16px; }
.veld { margin: 10px 0; display: flex; align-items: center; gap: 12px; }
.veld label { width: 56px; color: #5c6873; font-size: 14px; }
.kapstok { margin: 14px 0 6px; font-size: 14px; color: #5c6873; }
.kapstok strong { color: #15202b; font-family: Consolas, monospace; }

/* matrix-bestelblok (in de rechter bestelkolom) — A01-test; maten = rijen, kleuren = kolommen */
.detail-grid.met-matrix { grid-template-columns: minmax(0,1fr) max-content; grid-template-areas: "beeld bestel" "info bestel"; }
/* compacte groep (staand/bijna-vierkant): 3 kolommen — beeld smal links, info ernaast, matrix rechts */
.detail-grid.layout-staand.met-matrix { grid-template-columns: auto minmax(0,1fr) max-content; grid-template-areas: "beeld info bestel"; align-items: start; }
.mx-form .mx-scroll { overflow-x: auto; margin-bottom: 12px; }
.mxtabel { border-collapse: collapse; font-size: 12px; }
.mxtabel th, .mxtabel td { border: .5px solid #d7dce1; padding: 4px 5px; text-align: center; }
.mxtabel thead th { background: #f6f8fa; font-weight: 600; }
.mx-hoek { text-align: left; color: #5c6873; font-weight: 500; }
.mx-kkop .sw-cel { display: block; width: 18px; height: 18px; border-radius: 50%; margin: 0 auto 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.mx-knaam { display: block; font-size: 10px; font-weight: 500; line-height: 1.1; color: #15202b; white-space: nowrap; }
.mx-rol { display: block; font-size: 8.5px; font-weight: 700; line-height: 1.15; color: var(--merk); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; margin-top: 11px; }   /* lege-lijn-gat tussen kleurnaam en rol */
.mx-maat { text-align: left; font-weight: 600; white-space: nowrap; color: #15202b; }
.mx-cel { vertical-align: middle; }
.mx-aantal { width: 60px; padding: 4px; margin: 2px auto; display: block; border: 1px solid #cbd2d9; border-radius: 6px; font-size: 14px; text-align: center; background: papayawhip; appearance: textfield; -moz-appearance: textfield; }
.mx-aantal::-webkit-outer-spin-button, .mx-aantal::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }   /* spinners weg */
.mx-aantal.vol { background: greenyellow; }   /* niet-nul aantal springt eruit */
.mx-char7 { display: block; font-family: Consolas, monospace; font-size: 9.5px; font-weight: 600; color: #3f4650; }
.mx-oracle { display: block; font-family: Consolas, monospace; font-size: 9.5px; color: #8a94a0; }
.mx-prijs { display: block; font-size: 9.5px; color: #9aa3ad; }
.mx-codes { display: block; }
/* compacte matrix (>10 maten): codes links · invoer midden · prijs rechts -> lagere rijen, tabel past in hoogte */
.mxtabel.mx-compact td.mx-cel { white-space: nowrap; }
.mxtabel.mx-compact .mx-codes { display: inline-block; vertical-align: middle; text-align: right; }
.mxtabel.mx-compact .mx-aantal { display: inline-block; vertical-align: middle; width: 50px; margin: 0 5px; }
.mxtabel.mx-compact .mx-prijs { display: inline-block; vertical-align: middle; }
.mx-uit { background: #f6f8fa; }
.mx-leeg { color: #c3c9d0; }

@media (max-width: 900px) {
  .detail-grid.layout-staand, .detail-grid.layout-liggend {
    grid-template-columns: 1fr; grid-template-areas: "beeld" "info" "bestel"; }
  .beeldkolom { text-align: center; }
  .layout-staand .productbeeld, .layout-liggend .productbeeld {
    max-height: 52vh; max-width: 100%; margin: 0 auto; }
}

@media (max-width: 820px) { .inhoud { flex-direction: column; } .mandje { width: 100%; } }

/* test-instelbalk (enkel dev): live weergave/taal wisselen zonder de .ini te wijzigen */
.devbar { position: fixed; top: 6px; left: 500px; z-index: 9999; display: flex; align-items: center; gap: 8px;
  background: rgba(20,22,26,.85); color: #fff; padding: 4px 9px; border-radius: 8px; font-size: 11px;
  box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.devbar-lbl { opacity: .6; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.devbar label { display: inline-flex; align-items: center; gap: 3px; }
.devbar select { font-size: 11px; padding: 1px 3px; border-radius: 4px; border: none; }
.devbar-reset { color: #ffe08a; text-decoration: none; opacity: .85; }
.devbar-reset:hover { opacity: 1; }