/* ============================================================
   DataFlow Harbor — ontwerpbasis (laag 2, geladen ná style.css)
   Richting: Shopify-admin-helderheid met Meubelbaas-warmte.
   - Tokens: warm-neutrale grond (crème-verwant), charcoal voor
     topbalk en primaire knop, oranje alleen als merk/aandacht,
     semantische kleuren los van het merk.
   - Overschrijft de basisvariabelen van style.css zodat álle
     pagina's dezelfde grond en primitieven krijgen; nieuwe
     componenten (kaarten, paginakop, zijkolom, opslaanbalk) staan
     onderaan en worden scherm voor scherm in gebruik genomen.
   ============================================================ */

:root {
    --bg: #f6f3ef;
    --surface: #ffffff;
    --surface-2: #faf8f5;
    --surface-3: #f1ede7;
    --border: #e4ded6;
    --border-strong: #cfc7bc;
    --text: #232323;
    --muted: #5f5a54;
    --text-3: #716b64;   /* ≥ 4,5:1 op wit, --bg en --surface-3 */
    --nav-tekst: #4a453f;
    --code-bg: #f1ede7;
    --shadow: rgba(35, 30, 20, 0.14);
    --shadow-1: 0 1px 2px rgba(35, 30, 20, .06), 0 0 0 1px rgba(35, 30, 20, .045);
    --shadow-2: 0 6px 20px rgba(35, 30, 20, .10);
    --radius: 12px;

    --brand: #ffa641;
    --brand-dark: #9a5a00;      /* tekst/links op licht: 5,6:1 */
    --brand-tint: #ffefdc;
    --brand-tint-soft: #fff6ea;
    --brand-ring: rgba(255, 166, 65, .35);

    --ink: #232323;
    --ink-2: #363535;
    --on-ink: #ffffff;
    --on-ink-muted: #b5b0a9;

    --ok: #087a35;   --ok-bg: #ddffe0;   /* 5,1:1 op --ok-bg, 5,5:1 op wit */
    --warn: #9a5a00; --warn-bg: #fff1dc;
    --crit: #b42318; --crit-bg: #fde8e6;
    --info: #1c5fb8; --info-bg: #e6eefb;
    --new: #5f5a54;  --new-bg: #ece8e2;

    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;   /* het bestaande lettertype van de suite (bewust géén webfont) */
    --font-head: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --suitebar-height: 48px;
    --sidebar-width: 232px;
    --venster-boven: var(--suitebar-height);   /* onderkant van de zichtbare bovenbalken; vensterOpen() zet hem bij openen */
}
html[data-theme="dark"] {
    --bg: #181512;
    --surface: #221e1a;
    --surface-2: #27221d;
    --surface-3: #2e2823;
    --border: #38312a;
    --border-strong: #4a4138;
    --text: #efe9e1;
    --muted: #b3aca3;
    --text-3: #9d958b;   /* ≥ 4,5:1 op --surface, --bg en --surface-3 */
    --nav-tekst: #b3aca3;
    --code-bg: #2e2823;
    --shadow: rgba(0, 0, 0, 0.5);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .04);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, .5);
    --brand-dark: #ffb865;
    --brand-tint: #3a2a16;
    --brand-tint-soft: #2c2218;
    --brand-ring: rgba(255, 166, 65, .45);
    --ink: #f2ede6; --ink-2: #e2dcd3; --on-ink: #1a1714; --on-ink-muted: #6d665e;
    --ok: #7fd394;   --ok-bg: #1b3524;
    --warn: #f0b264; --warn-bg: #3a2a14;
    --crit: #f19a91; --crit-bg: #3c1f1c;
    --info: #8db6f2; --info-bg: #1b2a44;
    --new: #b3aca3;  --new-bg: #332d27;
}

/* ── Basis ─────────────────────────────────────────────────── */
body { font-family: var(--font-ui); font: 400 13.5px/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; }
h1, h2, h3, legend { font-family: var(--font-head); text-wrap: balance; }
h1 { font-size: 20px; font-weight: 600; line-height: 1.25; }
a { color: var(--brand-dark); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
svg.i--s { width: 13px; height: 13px; vertical-align: -2px; }
svg.i--xs { width: 11px; height: 11px; vertical-align: -1px; }
/* Inhoud vult de ruimte naast de zijbalk, zoals in de ontwerpcanvassen
   (.main{flex:1;padding:20px 24px} naast een zijbalk van 232 px). */
.container { max-width: none; margin: 0; padding: 20px 24px; }
.footer { max-width: 1160px; padding: 0 24px; font-size: 12px; color: var(--text-3); }

/* ── Suitebar: charcoal met oranje onderstreping ───────────── */
.suitebar { background: var(--ink); color: var(--on-ink); border-bottom: 0; padding: 0 12px 0 10px; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.suitebar::-webkit-scrollbar { display: none; }
.suitebar__brand { display: flex; align-items: center; gap: 10px; height: 100%; padding-right: 14px; margin-right: 6px; border-right: 1px solid rgba(255,255,255,.12); color: var(--on-ink); font-family: var(--font-head); font-weight: 600; font-size: 14px; }
.mark { width: 26px; height: 26px; border-radius: 7px; background: var(--brand); color: #232323; display: grid; place-items: center; font: 700 13px var(--font-head); }
.suitebar__apps { height: 100%; gap: 2px; }
.suitebar__app { position: relative; display: flex; align-items: center; height: 100%; padding: 0 12px; border-radius: 0; font-size: 13px; font-weight: 500; color: var(--on-ink-muted); }
.suitebar__app:hover { color: var(--on-ink); background: transparent; }
.suitebar__app.active { color: var(--on-ink); background: transparent; font-weight: 500; }
.suitebar__app.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); }
.suitebar__app--extern, html[data-theme="dark"] .suitebar__app--extern { height: auto; margin-left: auto; padding: 4px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: transparent; color: var(--on-ink-muted); font-size: 12px; }
.suitebar__app--extern:hover, html[data-theme="dark"] .suitebar__app--extern:hover { color: var(--on-ink); background: rgba(255,255,255,.08); }
html[data-theme="dark"] .suitebar { background: #110f0d; }
html[data-theme="dark"] .suitebar__brand, html[data-theme="dark"] .suitebar__app.active, html[data-theme="dark"] .suitebar__app:hover { color: #efe9e1; }
html[data-theme="dark"] .suitebar__app { color: #857d73; }
.testmodus-balk { top: var(--suitebar-height); }

/* ── Zijbalk ───────────────────────────────────────────────── */
.sidebar { padding: 6px 10px 12px; }
.sidebar-brand { padding: 10px 10px 8px; border-bottom: 0; }
.sidebar-brand .brand { font: 600 13px var(--font-head); color: var(--text); }
.sidebar-nav { padding: 0; }
.nav-section { font: 600 10.5px/1 var(--font-ui); letter-spacing: .08em; padding: 14px 10px 6px; color: var(--text-3); }
/* "Naar inhoud" (eerste element op elke pagina): alleen zichtbaar bij toetsenbordfocus. */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 2000; padding: 10px 14px; border-radius: 8px; background: var(--ink); color: var(--on-ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 8px; outline: 2px solid var(--brand); outline-offset: 2px; }
main#inhoud:focus { outline: none; }
.nav-link { position: relative; gap: 10px; justify-content: flex-start; padding: 7px 10px; border-left: 0; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--nav-tekst); }
.nav-link:hover { background: var(--surface-3); color: var(--text); }
.nav-link.active { background: var(--brand-tint); color: var(--text); font-weight: 500; }
.nav-link.active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.nav-link svg.i { color: var(--text-3); }
.nav-link.active svg.i { color: var(--brand-dark); }
.nav-link { white-space: nowrap; }
.nav-count { margin-left: auto; flex: none; background: var(--warn-bg); color: var(--warn); font-size: 11px; }
/* Zijbalk met uitklapbare hoofditems (component zijbalk, docs/ui/componenten/zijbalk.md; PIM sinds 11-10-2026).
   Hoofditem = .nav-hoofd (knop), subitems in .nav-subs; data-dicht = ingeklapt. Tellers staan in één vaste
   kolom rechts (vóór de pijl van het hoofditem); uitgeklapt bij de pagina, ingeklapt op het hoofditem. */
body[data-module="pim"], body[data-module="admin"], body[data-module="meldingen"] { --sidebar-width: 256px; }
.zijbalk .nav-link, .nav-hoofd { position: relative; }
.zijbalk .nav-link__label, .nav-hoofd__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zijbalk .nav-link:has(.nav-count), .nav-hoofd:has(.nav-count) { padding-right: 76px; }
.zijbalk .nav-count { position: absolute; right: 34px; top: 50%; margin: 0; transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.nav-hoofd { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 2px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 600 13px/1.2 var(--font-ui); text-align: left; cursor: pointer; }
.nav-hoofd:hover { background: var(--surface-3); }
.nav-hoofd:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.nav-hoofd svg.i { flex: none; color: var(--text-3); }
.nav-groep[data-actief] > .nav-hoofd svg.i:first-child { color: var(--brand-dark); }
.nav-hoofd__chev { position: absolute; right: 10px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); transition: transform .15s; }
.nav-groep[data-dicht] .nav-hoofd__chev { transform: translateY(-50%) rotate(-90deg); }
.nav-groep:not([data-dicht]) > .nav-hoofd .nav-count { visibility: hidden; }
.nav-subs { display: flex; flex-direction: column; margin: 2px 0 6px 19px; padding-left: 8px; border-left: 1px solid var(--border); }
.nav-groep[data-dicht] > .nav-subs { display: none; }
.nav-subs .nav-link { gap: 9px; padding: 6px 10px; }
.nav-subs .nav-link svg.i { width: 15px; height: 15px; }
.nav-subs .nav-link.active::before { left: -9px; }
.nav-scheiding { height: 1px; margin: 10px 6px; background: var(--border); }
@media (prefers-reduced-motion: reduce) { .nav-hoofd__chev { transition: none; } }
/* Startpagina PIM (views/home.php): per hoofditem van de zijbalk een kaart met zijn pagina's. */
.startgroepen { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.startgroep { padding: 16px 18px; }
.startgroep__kop { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 14px/1.3 var(--font-head); }
.startgroep__kop svg.i { color: var(--brand-dark); }
.startgroep__links { margin: 0; padding: 0; list-style: none; }
.startgroep__links a { display: flex; align-items: center; gap: 9px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 13px; }
.startgroep__links a:hover { background: var(--surface-3); }
.startgroep__links a svg.i { flex: none; width: 15px; height: 15px; color: var(--text-3); }
.startgroep__links .nav-count { margin-left: auto; }
.sidebar-user { padding: 10px; gap: 6px; font-size: 12px; }
.sidebar-user .user-name { font-size: 12px; }
.theme-toggle { font-size: 12px; }

/* ── Primitieven (gelden overal) ───────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500; line-height: 1.2; box-shadow: var(--shadow-1); }
.btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn--primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); box-shadow: none; }
.btn--ms, .btn--ms:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); box-shadow: none; }
.btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn--brand { background: var(--brand); border-color: var(--brand); color: #232323; }
.btn--brand:hover { background: #e8922a; border-color: #e8922a; }
.btn--danger, html[data-theme="dark"] .btn--danger { color: var(--crit); border-color: var(--border-strong); }
.btn--danger:hover, html[data-theme="dark"] .btn--danger:hover { background: var(--crit-bg); }
/* Uitgeschakeld moet zichtbaar zijn (was het suitebreed niet). */
.btn:disabled, .btn:disabled:hover { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn.btn--uitleg, .btn.btn--uitleg:hover { opacity: .45; cursor: help; box-shadow: none; }   /* Niet bruikbaar maar mét tooltip (aria-disabled; een :disabled-knop krijgt geen hover) */
.btn--plain { border-color: transparent; background: transparent; box-shadow: none; color: var(--muted); }
.btn--plain:hover { background: var(--surface-3); color: var(--text); }
.btn--klein, .btn--small { min-height: 26px; padding: 0 9px; font-size: 12px; }
.btn--icon { width: 32px; padding: 0; justify-content: center; }
.link-btn { font-size: 13px; }
.icon-btn { border-radius: 6px; }

input[type=text], input[type=number], input[type=email], input[type=password],
input[type=url], input[type=tel], input[type=date], input[type=datetime-local],
input[type=time], input[type=search], textarea, select, .kies__invoer, .col-row .col-select {
    border-color: var(--border-strong); border-radius: 8px; font-size: 13.5px;
    box-shadow: inset 0 1px 1px rgba(35, 30, 20, .04);
}
input[type=text], input[type=number], input[type=email], input[type=password],
input[type=url], input[type=tel], input[type=date], input[type=datetime-local],
input[type=time], input[type=search], select { min-height: 34px; padding-top: 0; padding-bottom: 0; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.field > span { font-size: 12.5px; font-weight: 500; margin-bottom: 5px; }
.field small.muted, .field > small { font-size: 12px; color: var(--text-3); }

.badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; font-size: 11.5px; font-weight: 500; line-height: 1; white-space: nowrap; }
.badge--icoon { padding: 0 5px; }
.badge .i { width: 12px; height: 12px; }
/* Neutrale kleur alleen voor een badge zónder variant: bestaande varianten uit style.css
   (.badge--st-*, .badge--ref, …) houden zo hun eigen kleur, licht én donker. */
.badge:not([class*="badge--"]), .badge--dot { background: var(--new-bg); color: var(--new); }
.badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.badge--ok, .badge--active, .badge--kanaal-active { background: var(--ok-bg); color: var(--ok); }
.badge--warn, .badge--uitlopend, .badge--wacht, .badge--kanaal-draft, .badge--soon { background: var(--warn-bg); color: var(--warn); }
.badge--crit, .badge--error, .badge--req, .badge--blok { background: var(--crit-bg); color: var(--crit); }
.badge--info, .badge--vg { background: var(--info-bg); color: var(--info); }
.badge--brand { background: var(--brand-tint); color: var(--brand-dark); }
.badge--draft, .badge--archived, .badge--kanaal-archived { background: var(--new-bg); color: var(--new); }
/* Donker: style.css kleurt .badge daar met hogere specificiteit grijs; elke variant dus expliciet terugzetten (de tokens zijn zelf al thema-bewust). */
html[data-theme="dark"] .badge:not([class*="badge--"]), html[data-theme="dark"] .badge--dot, html[data-theme="dark"] .badge--draft, html[data-theme="dark"] .badge--archived, html[data-theme="dark"] .badge--kanaal-archived { background: var(--new-bg); color: var(--new); }
html[data-theme="dark"] .badge--ok, html[data-theme="dark"] .badge--active, html[data-theme="dark"] .badge--kanaal-active { background: var(--ok-bg); color: var(--ok); }
html[data-theme="dark"] .badge--warn, html[data-theme="dark"] .badge--uitlopend, html[data-theme="dark"] .badge--wacht, html[data-theme="dark"] .badge--kanaal-draft, html[data-theme="dark"] .badge--soon { background: var(--warn-bg); color: var(--warn); }
html[data-theme="dark"] .badge--crit, html[data-theme="dark"] .badge--error, html[data-theme="dark"] .badge--req, html[data-theme="dark"] .badge--blok { background: var(--crit-bg); color: var(--crit); }
html[data-theme="dark"] .badge--info, html[data-theme="dark"] .badge--vg { background: var(--info-bg); color: var(--info); }
html[data-theme="dark"] .badge--brand { background: var(--brand-tint); color: var(--brand-dark); }

.table { border: 0; box-shadow: var(--shadow-1); }
.table th { font: 600 11px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 10px 12px; }
/* Tabelstandaard (besluit Kjelt 12-10-2026): koptekst staat bovenaan; loopt een kop over twee regels, dan komt de
   tweede regel eronder (niet onderaan vast en naar boven gestapeld). Koppen van één regel staan zo op één lijn. */
.table > thead > tr > th { vertical-align: top; }
.table > thead > tr > th.mee { vertical-align: middle; }   /* alleen een vinkje: midden, op de lijn van de koptekst */
.mxtabel > thead > tr > th { vertical-align: bottom; }   /* matrix: koppen staan onderaan, boven hun kolom (zoals de categoriekoppen) */
.table td { padding: 9px 12px; font-size: 13px; vertical-align: middle; }
.table tbody tr:hover td { background: var(--surface-2); }
.table .row-current td, .table tr.is-current td { background: var(--brand-tint); }
/* Zoektreffer in een uitgeklapte groep (productenlijst: variant-SKU gevonden). */
.table tbody tr.is-treffer td { background: var(--brand-tint); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table code { white-space: nowrap; font-size: 12px; padding: 1px 5px; }
.table a { text-decoration: none; }
.table a:hover { text-decoration: underline; }

.flash { border-radius: 8px; font-size: 13px; }
.flash--success, html[data-theme="dark"] .flash--success { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.flash--error, html[data-theme="dark"] .flash--error { background: var(--crit-bg); color: var(--crit); border-color: transparent; }
.flash--info { background: var(--info-bg); color: var(--info); border-color: transparent; }
.pagination__link.is-current { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.tabs .tab.active { color: var(--text); border-bottom-color: var(--brand); }
.empty { border-color: var(--border-strong); }
.card { border: 0; box-shadow: var(--shadow-1); min-width: 0; }
.card:has(> .card__head), .card:has(> .card__body) { padding: 0; }
.card--link:hover { box-shadow: var(--shadow-1), 0 0 0 1px var(--brand); border: 0; }
.form-section { min-inline-size: 0; border: 0; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); padding: 14px 20px 18px; margin-bottom: 16px; }
.form-section legend { float: left; width: 100%; padding: 0; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.form-section legend + * { clear: both; }
.form-actions--plak { border-top-color: var(--border); }
.filter-blok { padding: 12px 16px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); }

.form--stil .field--missing-required > span:first-child { color: var(--crit); }

/* ── Paginakop ─────────────────────────────────────────────── */
.muted { color: var(--text-3); font-size: inherit; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); margin-bottom: 10px; }
.crumbs a { color: var(--brand-dark); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.phead { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.phead__back { width: 32px; height: 32px; flex: none; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; color: var(--muted); box-shadow: var(--shadow-1); text-decoration: none; }
.phead__back:hover { color: var(--text); background: var(--surface-2); }
.phead__title { flex: 1; min-width: 260px; }
.phead__title h1 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.phead__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; color: var(--muted); font-size: 12.5px; }
.phead__meta a { color: var(--brand-dark); text-decoration: none; }
.phead__meta a:hover { text-decoration: underline; }
/* Een badge als link in de meta (bv. "3 problemen" → naar de kaart) houdt de kleur van zijn variant. */
.phead__meta a.badge--ok { color: var(--ok); }
.phead__meta a.badge--warn { color: var(--warn); }
.phead__meta a.badge--crit { color: var(--crit); }
.phead__meta a.badge--info { color: var(--info); }
.phead__meta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--surface-3); padding: 1px 5px; border-radius: 4px; color: var(--text); white-space: nowrap; }
.phead__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Kolommen & kaarten ────────────────────────────────────── */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.cols:not(:has(> aside)) { grid-template-columns: minmax(0, 1fr); }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
/* Vangnet ruimte tussen blokken (besluit Kjelt 4-10-2026: blokken plakken nooit tegen elkaar).
   De standaard is een .stack (gap 16 px); staan kaarten of formulierkaarten toch los onder elkaar
   in de pagina, dan krijgen ze dezelfde 16 px. Marges vallen samen in de documentstroom, dus waar
   al ruimte was verdubbelt er niets; in grids/flex (.stack, .cols, tegelrijen) geldt dit niet. */
:where(.container > :is(.card, .form-section, .table-scroll) + :is(.card, .form-section, .table-scroll)) { margin-top: 16px; }   /* :where = gewicht 0: een eigen marge wint altijd */
.card__head { display: flex; align-items: center; gap: 10px; padding: 14px 20px 0; flex-wrap: wrap; }
.card__head h2 { flex: none; }
.card__head h2 { margin: 0; font-size: 14px; font-weight: 600; }
.card__head .sub { color: var(--text-3); font-size: 12px; flex: 0 1 auto; min-width: 0; }
.card__head .spacer { flex: 1; }
.card__body { padding: 14px 20px 18px; }
.card__body + .card__body { border-top: 1px solid var(--border); }
.card--flush { padding: 0; overflow: hidden; }
.card--flush .card__head { padding: 14px 20px 12px; }
.card--flush .table { margin: 0; box-shadow: none; border-radius: 0 0 var(--radius) var(--radius); }
.card--flush .table th:first-child, .card--flush .table td:first-child { padding-left: 20px; }
.card--flush .table th:last-child, .card--flush .table td:last-child { padding-right: 20px; }
.card--flush .table td:not(:first-child) { white-space: nowrap; }
.card--flush .table td:first-child { min-width: 180px; }
.card .form--inline { border: 0; padding: 0; max-width: none; }
.card .variants { margin: 0; padding: 0; border: 0; }
.card .variants h2 { display: none; }

/* Veldraster in een kaart: 2–3 velden naast elkaar, lange velden over de volle breedte. */
.fgrid { min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 16px; }
.fgrid > .field, .fgrid > [data-veldslot] { margin: 0; min-width: 0; }
.fgrid > .field:has(textarea), .fgrid > .field:has(.media-field), .fgrid > .field:has(.check-list),
.fgrid > [data-veldslot]:has(textarea), .fgrid > .field:has(.richtext) { grid-column: 1 / -1; }
/* Multi-waardeveld: één lege rij oogt als een gewoon veld (geen ✕), "+ waarde" klein eronder. */
.multi-field__row { margin-bottom: 6px; }
.multi-field__row:only-of-type:has(input[value=""]) .multi-field__remove { display: none; }
.multi-field__add { font-size: 12px; color: var(--text-3); text-decoration: none; }
.multi-field__add:hover { color: var(--brand-dark); }
/* Eenheid naast het veld (style.css zet .field > span op block; hier weer een rij van maken). */
.field > span.input-unit, .field > span.js-kleurcode { display: flex; align-items: center; gap: 8px; font-size: inherit; font-weight: 400; margin: 0; }
.field > span.input-unit > .muted { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
/* Bestandskiezer als knop */
input[type=file] { font-size: 12.5px; color: var(--text-3); }
input[type=file]::file-selector-button { font: 500 12px var(--font-ui); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; padding: 5px 10px; margin-right: 10px; box-shadow: var(--shadow-1); cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--surface-2); }
.fgrid .inline-fields { grid-column: 1 / -1; }
.fgrid .field--check { grid-column: 1 / -1; }
/* Gecombineerd product (productscherm): bestaande bundel en titel elk 50 %, de knop op een eigen regel. */
.inline-fields.bnd-koppel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: end; }
.inline-fields.bnd-koppel .field { min-width: 0; }
.inline-fields.bnd-koppel .form-actions { grid-column: 1 / -1; }
@media (max-width: 600px) { .inline-fields.bnd-koppel { grid-template-columns: minmax(0, 1fr); } }

/* Herkomst-indicator naast een veldlabel (feed / handmatig / altijd uit feed) */
.src { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--text-3); cursor: help; vertical-align: middle; }
.src svg.i { width: 13px; height: 13px; vertical-align: 0; }
/* Uitleg-tooltip (dfh-ui.js, docs/ui/componenten/uitleg-tooltip.md): donker vlak boven het icoontje, direct
   zichtbaar; omgekeerde kleuren, dus licht en donker vanzelf goed. Boven vensters en de actiebalk. */
.src:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.uitleg-tip { position: fixed; z-index: 1200; max-width: min(300px, calc(100vw - 16px)); padding: 7px 10px; border-radius: 8px;
    background: var(--text); color: var(--surface); font-size: 12px; font-weight: 500; line-height: 1.45; text-align: left;
    white-space: normal; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); pointer-events: none; }
.uitleg-tip[hidden] { display: none; }
.src--feed { color: var(--info); }
.src--hand { color: var(--ok); }
.src--lock { color: var(--warn); }
.src--as { color: var(--brand-dark); }
.veldslot-toon .js-veld-unlock { margin-left: 6px; color: var(--brand-dark); text-decoration: none; font-size: 12px; }
.veldslot-toon .js-veld-unlock:hover { text-decoration: underline; }

/* Media-galerij als tegels */
.card .media-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.card .media-item { width: auto; }
.card .media-item img, .card .media-item video { width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; }
.card .media-eigen { position: absolute; left: 6px; top: 6px; bottom: auto; height: auto; line-height: 1.3; pointer-events: none; z-index: 1; font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: rgba(35,35,35,.78); color: #fff; }
.card .media-item.is-verborgen img { opacity: .45; }

/* Zijkolom-onderdelen */
.dl-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 13px; align-items: baseline; }
.dl-kv dt { color: var(--muted); margin: 0; white-space: nowrap; }
.dl-kv dd { margin: 0; text-align: right; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.dl-kv dd select { width: 100%; text-align: left; }
.dl-kv dd.wide { grid-column: 1 / -1; text-align: left; }
.meter { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin: 8px 0 4px; }
.meter-txt { font-size: 12px; color: var(--text-3); margin: 0 0 6px; }
.meter i { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.meter--warn i { background: var(--warn); }
.miss { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.miss li { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.miss li svg.i { color: var(--warn); width: 14px; height: 14px; }
.miss li.opt svg.i { color: var(--text-3); }
.miss-meer { margin-top: 8px; font-size: 12.5px; }
.miss-meer > summary { cursor: pointer; color: var(--brand-dark); list-style: none; }
.miss-meer > summary::-webkit-details-marker { display: none; }
.miss-meer[open] > summary { margin-bottom: 4px; }
.chan { display: grid; gap: 10px; }
.chan__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.chan__row .chan__sub { grid-column: 2 / -1; }
.chan__ico { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); font: 700 11px var(--font-head); }
.chan__ico--shop { background: #e7f4ea; color: #1f6b3a; }
.chan__name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chan__name a { margin-left: 4px; }
.chan__sub { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.note { display: flex; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--info-bg); color: var(--info); font-size: 12.5px; align-items: flex-start; }
.note--warn { background: var(--warn-bg); color: var(--warn); }
.note svg.i { margin-top: 1px; }
.note a { color: inherit; text-decoration: underline; }
.switch { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.switch input { margin: 3px 0 0; accent-color: var(--ink); width: 15px; height: 15px; }
.switch b { font-weight: 500; display: block; }
.switch small { color: var(--text-3); font-size: 12px; }
.danger { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.danger p { margin: 0; color: var(--muted); font-size: 12.5px; }
.danger form { margin: 0; }

/* ── Stappenbalk (feedpijplijn) ────────────────────────────── */
.stappen { display: flex; width: 100%; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; margin-bottom: 16px; }
.stappen__stap { flex: 1; display: flex; gap: 10px; align-items: center; padding: 12px 16px; position: relative; color: var(--muted); text-decoration: none; border-right: 1px solid var(--border); min-width: 0; }
.stappen__stap:last-child { border-right: 0; }
.stappen__stap:hover { background: var(--surface-2); text-decoration: none; }
.stappen__stap.is-huidig { background: var(--brand-tint); color: var(--text); }
.stappen__stap.is-huidig::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand); }
.stappen__n { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--muted); }
.stappen__stap.is-klaar .stappen__n { background: var(--ok-bg); color: var(--ok); }
.stappen__stap.is-huidig .stappen__n { background: var(--ink); color: var(--on-ink); }
.stappen__stap.is-warn .stappen__n { background: var(--warn-bg); color: var(--warn); }
.stappen__tekst { min-width: 0; }
.stappen__t { display: block; font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stappen__s { display: block; font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Filterblok: vaste rij + "Meer filters" ────────────────── */
.filter-blok { margin: 0 0 16px; }
.filter-blok__rij { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.filter-blok__rij .field { flex: 0 0 auto; min-width: 150px; margin: 0; }
.filter-blok__rij .field--zoek { flex: 1 1 260px; }
.filter-blok__rij .filter-blok__acties { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.filter-meer { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.filter-meer > summary { cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--brand-dark); list-style: none; display: flex; align-items: center; gap: 6px; }
.filter-meer > summary::-webkit-details-marker { display: none; }
.filter-meer__tel { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-dark); }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 16px; margin-top: 12px; }
.filter-grid .field { margin: 0; }

/* ── Tabelstandaard: sorteren, kolommen, nooit geprop ──────── */
/* Cellen lopen nooit door naar een tweede regel: wat niet past wordt
   afgekapt of samengevat als "+n" (.celrij). Alleen op tabellen die
   de nieuwe standaard voeren, zodat bestaande schermen ongemoeid blijven. */
.table--vast th, .table--vast td { white-space: nowrap; }
/* Knoppen in een cel zijn geen tekst: die houden hun eigen flex-uitlijning
   (anders staat het label niet gecentreerd en klapt een icoon weg). */
/* :not(.table--vrij) is hier alleen nog specificiteit: de variant .table--vrij zelf is weg (geen view
   gebruikte hem); laten staan, anders winnen andere celregels het van deze afkapregel. */
.table--vast:not(.table--vrij) td > a:not(.btn):not(.badge), .table--vast:not(.table--vrij) td > span:not(.badge):not(.celrij) { max-width: 100%; display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.celrij { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; vertical-align: middle; }
.celrij .meer { font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--surface-3); border-radius: 999px; padding: 1px 7px; cursor: default; }

/* Horizontale scroll: de bestaande .table-scroll krijgt schaduwranden die
   alleen verschijnen als er links of rechts nog inhoud staat (pure CSS,
   background-attachment local/scroll — geen extra wrapper, geen JS). */
.table-scroll { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-1); background:
    linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left / 28px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, rgba(255,255,255,0)) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(35,30,20,.13), rgba(35,30,20,0)) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(35,30,20,.13), rgba(35,30,20,0)) right / 12px 100% no-repeat scroll,
    var(--surface); }
html[data-theme="dark"] .table-scroll { background:
    linear-gradient(to right, var(--surface) 30%, rgba(0,0,0,0)) left / 28px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, rgba(0,0,0,0)) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) right / 12px 100% no-repeat scroll,
    var(--surface); }
.card--flush .table-scroll { box-shadow: none; border-radius: 0; }

/* Eerste kolom vastgezet tijdens horizontaal scrollen (opt-in) */
.table--plak th:first-child, .table--plak td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.table--plak thead th:first-child { background: var(--surface-2); z-index: 2; }
.table--plak tbody tr:hover td:first-child { background: var(--surface-2); }
.table--plak th:first-child::after, .table--plak td:first-child::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: var(--border); }


/* Sorteerbare kolomkoppen */
.table th.sorteer { padding: 0; vertical-align: top; }
.table th.sorteer > a, .table th.sorteer > button { display: flex; align-items: flex-start; gap: 5px; width: 100%; padding: 10px 12px; color: inherit; text-decoration: none; white-space: nowrap; font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; cursor: pointer; }
.table th.sorteer > a:hover, .table th.sorteer > button:hover { color: var(--text); text-decoration: none; }
.table th.sorteer > button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.table th.sorteer.num > a, .table th.sorteer.num > button { justify-content: flex-end; }
.table th.sorteer .pijl { width: 8px; height: 12px; margin-top: 1px; flex: none; fill: currentColor; stroke: none; opacity: .5; }
.table th.sorteer > a:hover .pijl, .table th.sorteer > button:hover .pijl { opacity: .9; }
.table th.is-sorteer { color: var(--text); }
.table th.is-sorteer .pijl { opacity: 1; }
/* De eerste/laatste kolom houdt zijn ruimere kaartrand, ook als de kop een knop is:
   de ruimte verhuist van de cel naar de knop, zodat de hele kop klikbaar blijft. */
.card--flush .table th.sorteer:first-child, .card--flush .table th.sorteer:last-child { padding: 0; }
.card--flush .table th.sorteer:first-child > button, .card--flush .table th.sorteer:first-child > a { padding-left: 20px; }
.card--flush .table th.sorteer:last-child > button, .card--flush .table th.sorteer:last-child > a { padding-right: 20px; }

/* Kolomkiezer — de bestaande .col-manager (details + checkboxes, onthoudt
   zijn keuze al in localStorage via app.js) in de nieuwe vormgeving. */
/* Het invoerveld ín een zoekveld volgt de 32 px van het blok (invoer is elders 34 px). */
.search input { height: 100%; min-height: 0; }
.col-manager > summary.btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; font-size: 13px; }   /* altijd 32 px, ook met .btn--klein: één balk = één hoogte */
.col-manager__list { border-radius: 10px; box-shadow: var(--shadow-2); padding: 12px 14px; margin-top: 6px; min-width: 240px; max-height: 360px; }
.col-manager__list label { font-size: 12.5px; padding: 3px 0; gap: 8px; }
.col-manager__list input { accent-color: var(--ink); width: 14px; height: 14px; margin: 0; }
.col-manager__all { border-bottom: 1px solid var(--border); margin-bottom: 6px; padding-bottom: 6px; }
.col-manager__all strong { font-weight: 600; }
/* Bij veel kolommen (≥ 10) zet app.js een kop in de lijst: zoekveld, snelknoppen en teller; blijft staan tijdens scrollen. */
.col-manager__list label[hidden] { display: none; }
.col-manager__kop { position: sticky; top: -12px; z-index: 1; margin: -12px -14px 6px; padding: 12px 14px 8px; background: var(--surface); border-bottom: 1px solid var(--border); display: grid; gap: 6px; }
.col-manager__list input.col-manager__zoek { width: 100%; height: 30px; font-size: 12.5px; }
.col-manager__acties { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.col-manager__acties .link-btn { font-size: 12px; padding: 0; }
.col-manager__herstelgroep { display: inline-flex; align-items: baseline; gap: 12px; margin-left: auto; white-space: nowrap; }   /* Herstel: Volgorde · Breedte — één niet-brekende groep rechts op de regel van Alles aan/uit */
.col-manager__herstel { margin-right: -6px; font-size: 12px; color: var(--text-3); }
.col-manager__tel { font-size: 11.5px; color: var(--text-3); }
.col-manager__leeg { margin: 4px 0; font-size: 12.5px; color: var(--text-3); font-style: italic; }
.col-manager__list .col-manager__hint { margin: 2px 0 4px; font-size: 11.5px; line-height: 1.4; color: var(--text-3); }
.col-manager__greep { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 22px; flex: none; cursor: grab; color: var(--text-3); border-radius: 4px; }
.col-manager__greep svg { fill: currentColor; }
.col-manager__list label[draggable="true"] { cursor: grab; border-radius: 6px; padding: 4px 6px 4px 2px; margin: 1px -6px 1px -2px; border: 1px solid transparent; position: relative; background: var(--surface); }
.col-manager__list label[draggable="true"]:hover { background: var(--surface-2); border-color: var(--border); }
.col-manager__list label[draggable="true"]:hover .col-manager__greep { color: var(--text); background: var(--surface-3); }
.col-manager__list label[draggable="true"]:active { cursor: grabbing; }
.col-manager__list label.is-slepen { background: var(--brand-tint); border: 1px dashed var(--brand); color: var(--brand-dark); }
.col-manager__list label.is-slepen > * { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .col-manager__list label { transition: none !important; } }
.col-manager > summary.is-gefilterd { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }


/* ── Veldoverloop: een waarde wikkelt nooit in een regelhoog veld ── */
input[type=text], input[type=url], input[type=email], input[type=search], select { text-overflow: ellipsis; }
textarea.groei { min-height: 34px; line-height: 1.35; padding: 7px 10px; resize: none; overflow: hidden; }

/* ── Chips (bron en doel in mapping- en regelschermen) ─────── */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Herkomst van een kolom moet in één oogopslag te zien zijn (Mappen): ruwe feedkolom = effen grijs,
   nieuwe kolom uit Transformeren = blauw gestreept, alleen in regels genoemd = gestippeld en gedempt,
   productveld = merktint, eigen kolom in de nieuwe feed = gestreept op donkerder grond. De oude
   klassenamen (chip--src/--new/--extern/--dst/--custom) zijn aliassen van de ontwerpnamen. */
.chip--src { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.chip--nieuw, .chip--new { border-style: dashed; border-color: var(--info); background: var(--info-bg); color: var(--info); }
.chip--extern { border-style: dotted; background: transparent; color: var(--text-3); }
.chip__mark { color: var(--brand-dark); font-weight: 400; }
.chip--doel, .chip--dst { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-dark); }
.chip--leeg { border-style: dashed; color: var(--text-3); background: transparent; }

/* ── Veldherkomst (feed, handmatig, vergrendeld) ───────────── */
.src { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--text-3); cursor: help; }
.src svg.i { width: 13px; height: 13px; }
.src--hand { color: var(--ok); }
.src--lock { color: var(--warn); }

/* ── Bulkbalk boven een lijst met selectie ─────────────────── */
.bulkbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; margin-bottom: 12px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); font-size: 13px; }
.bulkbar .grow { flex: 1; }
.bulkbar__aantal { font-weight: 600; }

/* ── Filterrij bovenin een kaart (tegelrij + zoekveld) ─────── */
.filters { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; max-width: none; margin: 0; }
.filters .spacer { flex: 1; }
.search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-3); min-width: 240px; margin: 0; box-shadow: inset 0 1px 1px rgba(35,30,20,.04); }
.search input { border: 0; background: transparent; outline: none; flex: 1; min-width: 0; color: var(--text); height: auto; padding: 0; font: inherit; box-shadow: none; }
.search input::placeholder { color: var(--text-3); }
.search svg.i { flex: none; }
.search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.search__wis { color: var(--text-3); text-decoration: none; font-size: 16px; line-height: 1; padding: 0 2px; }
.search__wis:hover { color: var(--text); text-decoration: none; }

/* Segmentkiezer: standen met een teller (Alle / Aandacht / …) */
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-3); border-radius: 8px; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; }
.seg > a, .seg > span, .seg > button { white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); text-decoration: none; }
.seg > :is(a, button):hover { color: var(--text); text-decoration: none; background: rgba(255,255,255,.5); }
html[data-theme="dark"] .seg > :is(a, button):hover { background: rgba(255,255,255,.06); }
.seg .is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.seg .n { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* Een stand die nu niet kan (bv. Per week bij een periode korter dan een week): zichtbaar uitgeschakeld,
   de reden in title. In een .stack niet uitrekken over de hele breedte. */
.seg > [aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* Compacte maat (bv. in een kaartkop, alleen icoontjes): kleinere knoppen; tooltip/aria-label per knop verplicht. */
.seg.seg--klein { padding: 2px; gap: 2px; border-radius: 7px; }
.seg.seg--klein > :is(a, button) { padding: 3px 6px; border-radius: 5px; font-size: 12px; border: 0; background: none; cursor: pointer; }
.seg.seg--klein > :is(a, button).is-on { background: var(--surface); }
.seg.seg--klein svg.i { width: 14px; height: 14px; }
/* Telefoon: een weergavekiezer in een filterbalk krijgt een eigen regel over de volle breedte, standen even ruim
   (groeien wel, krimpen niet: zijn er te veel, dan schuift hij opzij zoals altijd); de lege spacer ervóór vervalt. */
@media (max-width: 768px) {
    .filter-bar > .seg { flex: 1 1 100%; display: flex; }
    .filter-bar > .seg > :is(a, span) { flex: 1 0 auto; justify-content: center; }
    .filter-bar:has(> .seg) > .spacer { display: none; }
}
.stack > .seg { justify-self: start; }
.warn-ic { color: var(--warn); }

/* ── Groepsrij en actiekolom in een tabel ──────────────────── */
.table tr.grp td { background: var(--surface-3); padding: 6px 12px; font: 600 12px/1.5 var(--font-ui); color: var(--muted); }
.table tr.grp td > .grprij { display: flex; align-items: center; gap: 8px; }
.table tr.grp h3 { font: inherit; color: inherit; margin: 0; }
.table tr.grp .spacer { flex: 1; }
.table tr.grp:hover td { background: var(--surface-3); }
.table td.act, .table th.act { text-align: right; white-space: nowrap; width: 1%; }
.table--vast td > span.runreden:not(.badge), .table .runreden { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.card--flush .table--groepen tbody td:first-child, .table--groepen tbody td:first-child { padding-left: 36px; }
.card--flush .table--groepen tbody tr.grp td:first-child, .table--groepen tbody tr.grp td:first-child { padding-left: 20px; }
.card--flush .table--groepen tr.grp td:last-child { padding-right: 12px; }
.table--groepen tbody:not(:last-child) tr:last-child td { border-bottom: 1px solid var(--border); }
.table a.row { color: var(--text); font-weight: 500; }
.table a.row:hover { color: var(--brand-dark); }
/* In een cel die als geheel gedempt is (bronfeeds onder een samenvoeging)
   loopt de link mee in het grijs, zoals in de canvassen. */
.table td.muted a.row { color: inherit; font-weight: 400; }
.table td.muted a.row:hover { color: var(--brand-dark); }

/* ── Ruwe feed: compacte tabel, kolomfilter in de kop, mapping-tag ── */
.table--compact th, .table--compact td { padding: 6px 10px; font-size: 12.5px; white-space: nowrap; }
.table--compact th { line-height: 1.2; vertical-align: middle; }
.card--flush .table--compact td:first-child, .card--flush .table--compact th:first-child { min-width: 0; }
code:not(pre code) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--surface-3); padding: 1px 5px; border-radius: 4px; white-space: nowrap; color: var(--text); }
/* De filterknop in de kolomkop erft de kopopmaak; de chevron is het teken dat je erop kunt klikken. */
.table .th-filter { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; white-space: nowrap; text-align: left; }
.table .th-filter svg.i { width: 13px; height: 13px; color: var(--text-3); }
.table .th-filter:hover, .table .th-filter:hover svg.i { color: var(--text); }
.table .th-filter--active, .table .th-filter--active svg.i { color: var(--brand-dark); }
.table .th-filter:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
.map-tag { display: block; font: 500 10.5px/normal var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--brand-dark); margin-top: 2px; }
.map-tag--none { color: var(--text-3); }

/* Paginering onderaan een kaart (het .pag-blok van de canvassen), dezelfde partial als elders. */
.card--flush .pagination { margin: 0; padding: 10px 20px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-3); gap: 12px; }
.card--flush .pagination__info { color: inherit; font-size: inherit; }
.card--flush .pagination__pages { gap: 4px; }
.card--flush .pagination__link { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 500; box-shadow: var(--shadow-1); }
.card--flush .pagination__link:hover { background: var(--surface-2); border-color: var(--border-strong); }
.card--flush .pagination__link.is-current { background: var(--ink); border-color: var(--ink); color: var(--on-ink); box-shadow: none; }

/* Zijkolom: runstaafjes, lijstje, definitielijst, notitie */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.bars i { flex: 1; background: var(--border-strong); border-radius: 2px 2px 0 0; }
.bars i.ok { background: var(--ok); }
.bars i.warn { background: var(--warn); }
.bars i.crit { background: var(--crit); }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 12.5px; }
.list li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.list .spacer { flex: 1; }
.list .runreden { max-width: 140px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
/* Zelfde beeld als 1fr/auto in het canvas (label links, waarde rechts), maar een lange
   waarde (URL) kapt af met … in plaats van de kaart uit te rekken. */
.dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; font-size: 13px; margin: 0; align-items: center; }
.dl dt { color: var(--muted); margin: 0; white-space: nowrap; }
.dl dd { margin: 0; text-align: right; font-weight: 500; min-width: 0; }
.dl dd code { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.dl dd a { color: var(--brand-dark); text-decoration: none; }
.dl dd a:hover { text-decoration: underline; }
.note--crit { background: var(--crit-bg); color: var(--crit); }
.note svg.i { flex: none; }
.note form { display: block; }
.fld__hint, .card .fld__hint { font-size: 12px; line-height: 1.5; color: var(--text-3); margin: 0; }

/* ── Mappen: instellingen, koppelingentabel, feedkolommen ──────── */
.settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fld { display: grid; gap: 5px; min-width: 0; margin: 0; align-content: start; }
.fld__label { font-size: 12.5px; font-weight: 500; }
.fld select, .fld input[type=text], .sel { width: 100%; height: 34px; min-height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 13.5px; box-shadow: inset 0 1px 1px rgba(35,30,20,.04); }
.sel { display: block; line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel--vast { background: var(--surface-2); color: var(--muted); cursor: default; }
.settings .kies { width: 100%; }
.pv-wissel { display: inline; }
.pv-wissel > summary { display: inline; cursor: pointer; list-style: none; }
.pv-wissel > summary::-webkit-details-marker { display: none; }
.pv-wissel > summary a { color: var(--brand-dark); }
.pv-wissel__form { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.pv-wissel__form input[type=text] { height: 26px; min-height: 26px; width: 220px; font-size: 12.5px; padding: 0 8px; }
.srcline { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sep { display: inline-flex; align-items: center; height: 24px; padding: 0 6px; border: 1px dashed var(--border-strong); border-radius: 4px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--text-3); white-space: pre; }
.sep i { font-style: italic; font-family: var(--font-ui); }
.chip .ed { color: var(--brand-dark); font-size: 11px; }
.chip--eigen, .chip--custom { border-style: dashed; border-color: var(--muted); background: var(--surface-3); color: var(--text); }
.req { color: var(--crit); font-weight: 600; }
.smp { color: var(--muted); font-size: 12.5px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.smp.is-empty { color: var(--text-3); font-style: italic; }
.smp b { color: var(--text); }
.tf-n { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.tf-n svg.i { width: 13px; height: 13px; color: var(--text-3); }
.tf-n.has, .tf-n.has svg.i { color: var(--brand-dark); }
/* Lege verplichte cel: kolom kiezen is een select vermomd als spookchip; kiezen = koppelen. */
.kies-kolom { display: inline-block; margin: 0; }
.kies-kolom select.chip { height: 24px; min-height: 24px; padding: 0 22px 0 8px; font-size: 12px; cursor: pointer; box-shadow: none; max-width: 150px; }
.koppeltabel td { vertical-align: middle; }
.card--flush .koppeltabel tbody td:first-child { padding-left: 20px; }   /* geen inspringing onder de groepskop (canvas) */
.koppeltabel .srcline { display: flex; }
/* Kolombreedtes zoals het canvas (24 % / rest / 24 % / 90 px) passen alleen als de
   voorbeeldtekst niet breder mag worden dan zijn kolom. */
.koppeltabel .smp { max-width: 190px; }
.koppeltabel td.act { padding-left: 4px; }
.koppeltabel .srcline .chip { max-width: 220px; }
.koppeltabel .grprij .badge { margin-left: 8px; }
/* Regelmenu (⋯) in de actiekolom */
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 240px; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-2), 0 0 0 1px var(--border); padding: 6px; display: grid; gap: 2px; text-align: left; }
.menu__list form { margin: 0; display: block; }
.menu__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; white-space: nowrap; }
.menu__item:hover { background: var(--surface-2); }
.menu__item--crit { color: var(--crit); }
.menu__item svg.i { flex: none; color: var(--text-3); }
/* Voet onder een kaarttabel (het .pag-blok van de canvassen, zonder paginering) */
.tabelvoet { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-3); }
/* Inklapbare kaart (Koppeling toevoegen) */
.card--details > summary { cursor: pointer; list-style: none; padding-bottom: 14px; }
.card--details > summary::-webkit-details-marker { display: none; }
.card--details > summary svg.i:last-child { color: var(--text-3); transition: transform .15s; }
.card--details[open] > summary svg.i:last-child { transform: rotate(180deg); }
.card--details[open] > summary { border-bottom: 1px solid var(--border); }
.card--details .map-add { border: 0; border-radius: 0; max-width: none; }
.map-add__grid { gap: 16px 20px; }
.map-add .col-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.map-add .col-join { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.map-add .col-join input { height: 28px; min-height: 28px; width: 90px; font-family: ui-monospace, Menlo, monospace; }
.map-add .col-pick { display: flex; gap: 6px; align-items: center; }
.map-add .col-pick .col-select { flex: 1; min-width: 0; }
.seg--toggle { margin-bottom: 10px; }
.seg--toggle .toggle { border: 0; background: none; cursor: pointer; font: inherit; padding: 5px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.seg--toggle .toggle.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
/* Feedkolommen in de zijkolom */
.search--klein { min-width: 0; height: 30px; margin-bottom: 8px; }
.collist { display: grid; gap: 2px; margin: 0 -8px; padding: 0 8px; }
.col-it { display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; min-width: 0; }
.col-it:hover { background: var(--surface-2); }
.col-it i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.col-it i.ok { background: var(--ok); }
.col-it i.new { background: var(--info); }
.col-it > span { min-width: 0; }
.col-it .nm { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.col-it .to { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.col-it .vv { font-size: 11.5px; color: var(--text-3); font-family: ui-monospace, Menlo, monospace; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-it.unused .nm { color: var(--muted); }

/* ── Transformeren: regels als leesbare kaartregels ─────────────── */
.rules { display: grid; gap: 8px; }
.rgrp { font: 600 11px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 10px 0 4px; display: flex; align-items: center; gap: 8px; }
.rgrp .badge { letter-spacing: 0; text-transform: none; }
.rule { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.rule--set { background: var(--surface-2); }
.rule--add { border-style: dashed; background: var(--surface-2); grid-template-columns: 28px minmax(0, 1fr); }
.rule__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--muted); }
.rule__main { display: grid; gap: 6px; min-width: 0; }
.rule__line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.rule__op { font-weight: 600; }
.rule__cfg { color: var(--muted); }
.rule__cfg code { font-size: 12px; }
.rule__cond { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rule__side { display: flex; gap: 4px; }
.arrow { color: var(--text-3); }
.io { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); flex-wrap: wrap; }
.io code { background: var(--surface-3); border: 1px solid var(--border); max-width: 260px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }
.io code.out { color: var(--brand-dark); border-color: var(--brand); background: var(--brand-tint); }
.io .req { font-weight: 500; }
/* Bewerkformulier onder de leesbare regel (potlood) */
.rule__edit { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--border); }
.rule__edit .tf-form, .rule--add .tf-form { margin: 0; }
.rule .tf-grid .field, .rule .tf-cfg .field, .rule .tf-toolbar .field { margin: 0; }
.rule .tf-grid .field > span, .rule .tf-cond .muted { font-size: 12.5px; font-weight: 500; color: var(--text); }
.rule .tf-extra > summary { font-size: 12.5px; }
.rule .tf-io { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; }
.rule .tf-io code { font-size: 12px; }
.rule .tf-io .tf-out { color: var(--brand-dark); border-color: var(--brand); background: var(--brand-tint); }
.rule .tf-form-actions { margin-top: 10px; }
.rule .tf-ai { margin-bottom: 8px; }
.tf-override { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.ai { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-3); font-size: 13px; }
.ai .grow { flex: 1; }
/* Zijkolom: voorbeeldrij (sleutel/waarde) en regelsets */
/* (.card__body ervoor: style.css kent al een .kv als kaartje met hoofdletter-labels;
   in een kaart is het de kale sleutel/waarde-lijst van de canvassen.) */
.card__body .kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; font-size: 12.5px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.card__body .kv dt { color: var(--text-3); margin: 0; white-space: nowrap; font: inherit; letter-spacing: 0; text-transform: none; }
.card__body .kv dd { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-form { display: grid; gap: 8px; margin-bottom: 12px; }
.fld--check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; }
.fld--check input { accent-color: var(--ink); width: 14px; height: 14px; margin: 0; }
.list li .inline-form { margin: 0; display: inline-flex; }
.list li a { color: var(--text); text-decoration: none; }
.list li a:hover { color: var(--brand-dark); text-decoration: underline; }
.koppel-set { display: flex; gap: 6px; margin-top: 10px; }
.koppel-set select { flex: 1; min-width: 0; height: 30px; min-height: 30px; font-size: 12.5px; }

/* ── Statustegels (Preview): vier tellers boven de tabel ─────────── */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 12px 16px; display: grid; gap: 2px; border: 2px solid transparent; min-width: 0; }
.stat.is-on { border-color: var(--ink); }
.stat__n { font: 600 22px/1.2 var(--font-head); font-variant-numeric: tabular-nums; }
.stat__l { font-size: 12px; color: var(--muted); }
.stat--crit .stat__n { color: var(--crit); }
.stat--ok .stat__n { color: var(--ok); }
@media (max-width: 768px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.filters .seg > span .badge { margin-right: 2px; }

/* ── Selecteren: vinkjes, hoort-bij-chips, onderbalk ─────────────── */
.selectietabel th.mee, .selectietabel td.mee { width: 108px; white-space: nowrap; }
.selectietabel td.mee .hb-knoppen { margin-left: 8px; }
.selectietabel td[data-rol="titel"] { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card--flush .selectietabel th:first-child, .card--flush .selectietabel td:first-child { min-width: 0; }
.selectietabel .mee__label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.selectietabel input[type=checkbox] { width: 15px; height: 15px; margin: 0; accent-color: var(--ink); border-radius: 4px; vertical-align: middle; cursor: pointer; }
.selectietabel input[type=checkbox]:disabled { cursor: not-allowed; opacity: .5; }
.selectietabel tr.is-gedempt td { color: var(--text-3); }
.selectietabel tr.is-gedempt td code { color: var(--text-3); }
.selectietabel td.vg-cel > span:first-child { margin-right: 4px; }
/* De "hoort bij"-chips (variant/bundel) als badges van de canvassen; de
   classes blijven staan omdat de koppel-JS erop werkt. */
.selectietabel .hb { display: inline-flex; align-items: center; gap: 5px; height: 20px; max-width: 320px; padding: 0 8px; margin-left: 6px; border: 0; border-radius: 999px; font: 500 11.5px/1 var(--font-ui); letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; vertical-align: middle; }
.selectietabel .hb b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.selectietabel .hb__soort { font-size: inherit; font-weight: 500; letter-spacing: 0; text-transform: none; }
.selectietabel .hb__n { opacity: 1; }
.selectietabel .hb svg.i { width: 13px; height: 13px; }
.selectietabel .hb--variant { background: var(--info-bg); color: var(--info); }   /* tabelstandaard besluit 4: variant blauw, bundel paars */
.selectietabel .hb--bundel { background: var(--bundel-bg); color: var(--bundel); }
.selectietabel .hb--onderdeel { background: transparent; box-shadow: inset 0 0 0 1px var(--bundel); color: var(--bundel); cursor: default; }
.sel-nieuwevar { margin: 12px 16px; }
.selectietabel .hb--pimgroep { background: var(--info-bg); color: var(--info); }
.selectietabel .hb--pimdoel { cursor: default; padding-right: 6px; }
.selectietabel .hb__knop { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.selectietabel .hb__weg { border: 0; background: none; padding: 0 0 0 2px; margin: 0; font: inherit; font-size: 13px; line-height: 1; color: inherit; opacity: .6; cursor: pointer; }
.selectietabel .hb__weg:hover { opacity: 1; }
.selectietabel .hb__weg--los { margin-left: -2px; color: var(--muted); font-size: 14px; }
.selectietabel .hb--variant:has(+ .hb__weg--los:not([hidden])) { border-radius: 999px 0 0 999px; padding-right: 4px; }   /* Kruisje "los product" ín de variantpill */
.selectietabel .hb--variant + .hb__weg--los { display: inline-flex; align-items: center; height: 20px; padding: 0 8px 0 2px; margin-left: 0; border-radius: 0 999px 999px 0; background: var(--info-bg); color: var(--info); vertical-align: middle; }
.selectietabel .hb--variant + .hb__weg--los[hidden] { display: none; }
.selectietabel td.vg-cel .sel-pimgroep { display: inline-block; width: auto; min-width: 170px; max-width: 240px; height: 22px; margin-left: 6px; font-size: 12px; line-height: 20px; vertical-align: middle; }
.selectietabel td.vg-cel .sel-pimgroep[hidden] { display: none; }
.sel-pimgroep { display: block; width: 100%; min-width: 220px; max-width: 300px; height: 26px; padding: 0 24px 0 8px; margin: 0; border: 1px solid var(--border); border-radius: 6px; background-color: var(--surface); background-position: right 6px center; color: var(--text); font: 500 12.5px/24px var(--font-ui); text-overflow: ellipsis; }
.sel-pimgroep:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.sel-pimgroep.sel-pimgroep--kies { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
/* Weergave "Per variantgroep": kopregel per groep. */
.selectietabel tr.sel-grp td { background: var(--surface-3); padding: 9px 12px; border-top: 1px solid var(--border); }
.selectietabel .sel-grp__naam { font-weight: 600; margin-right: 6px; }
.selectietabel tr.sel-grp .js-grp-check { margin: 0 10px 0 4px; vertical-align: -2px; }
.selectietabel .sel-grp__tel { color: var(--muted); font-size: 12.5px; margin-left: 6px; }
.selectietabel tr.sel-grp--onderdelen td { background: var(--bundel-bg); border-top: 0; }
.card--flush .selectietabel tr.sel-grp--onderdelen > td:first-child { padding-left: 46px; }   /* wint van .card--flush .table td:first-child */   /* Subkop Bundelonderdelen onder de groep van hun kast */
.selectietabel tr.sel-grp--onderdelen .sel-grp__naam, .selectietabel tr.sel-grp--onderdelen > td > .i { color: var(--bundel); }
.hb-legenda.selectietabel { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 6px 10px; }   /* Legenda Selecteren: tekens in één kolom, uitleg ernaast */
.hb-legenda.selectietabel > span { display: contents; }
.hb-legenda__onderdeel { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; color: var(--bundel); font-size: 12px; font-weight: 600; }
.selectietabel tr.sel-grp--bundel td { background: var(--surface-2); border-top: 0; }
.card--flush .selectietabel tr.sel-grp--bundel > td:first-child { padding-left: 22px; }   /* Kop per bundel binnen een variantgroep */
.selectietabel tr.sel-grp--bundel .sel-grp__naam, .selectietabel tr.sel-grp--bundel > td > .i { color: var(--bundel); }
.selectietabel tr.is-onderdeel > td:nth-child(2), .selectietabel tr.is-onderdeel > td:nth-child(3) { padding-left: 30px; }   /* Bundelonderdelen ingesprongen onder hun kast */
.selectietabel tr.is-onderdeel:not([data-hb-band]):not([data-pim-band]) > td:first-child { box-shadow: inset 3px 0 0 var(--bundel); }   /* een variantband (feed of PIM) gaat voor: die zegt bij welke groep de rij hoort */
.selectietabel .hb--pim { background: var(--surface-3); color: var(--muted); text-decoration: none; cursor: pointer; }
.selectietabel .sel-grp .js-hb-pim { border: 0; cursor: pointer; font: inherit; font-size: 11.5px; }
/* Popover "hoort bij" (varianten / bundel / PIM-groep): ruim en leesbaar. */
.hbpop.colf { width: min(600px, calc(100vw - 32px)); min-width: 0; max-width: none; padding: 14px 16px 12px; border-radius: 10px; font-size: 13px; box-shadow: 0 12px 32px rgba(0, 0, 0, .22); }
.hbpop .hbpop__koprij { align-items: flex-start; gap: 12px; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.hbpop .hbpop__kop { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.hbpop .hbpop__koprij .link-btn { flex: none; font-size: 18px; line-height: 1; color: var(--muted); }
.hbpop .hbpop__groep { margin: 10px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.hbpop .hbpop__lijst { max-height: 360px; display: flex; flex-direction: column; gap: 2px; }
.hbpop .hbpop__lid { display: flex; flex-direction: column; gap: 3px; padding: 7px 10px; border-radius: 6px; line-height: 1.35; }
.hbpop .hbpop__lid--hier { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--brand); }
.hbpop .hbpop__titel { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbpop .hbpop__kop { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbpop .hbpop__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.hbpop .hbpop__meta code { font-size: 11.5px; padding: 1px 6px; border-radius: 4px; background: var(--surface-3); color: var(--text); }
.hbpop .hbpop__link { display: inline-block; margin-top: 10px; font-weight: 500; }
.selectietabel .hb--pim:hover { color: var(--text); text-decoration: none; }
/* Rij die al in de PIM staat: iets gedempter; band = zijn bestaande variantgroep (de feedband wint). */
.selectietabel tr.is-in-pim td { background: var(--surface-2); }
tr[data-pim-band]:not([data-hb-band]) > td:first-child { box-shadow: inset 4px 0 0 var(--pim-band, transparent); }
tr[data-pim-band="1"] { --pim-band: var(--hb-band-1); } tr[data-pim-band="2"] { --pim-band: var(--hb-band-2); }
tr[data-pim-band="3"] { --pim-band: var(--hb-band-3); } tr[data-pim-band="4"] { --pim-band: var(--hb-band-4); }
tr[data-pim-band="5"] { --pim-band: var(--hb-band-5); } tr[data-pim-band="6"] { --pim-band: var(--hb-band-6); }
.selectietabel .hb-knoppen { display: inline-flex; gap: 0; margin-left: 4px; vertical-align: middle; opacity: .55; }
.selectietabel tr:hover .hb-knoppen, .selectietabel .hb-knoppen:focus-within { opacity: 1; }
.selectietabel .hb-knoppen .btn { width: auto; min-width: 22px; min-height: 22px; padding: 0 5px; font-size: 12px; }
.selectietabel tr.vg-anker td, .selectietabel tr.b-anker td { background: var(--brand-tint); }
.filters__select { height: 32px; min-height: 32px; font-size: 12.5px; max-width: 260px; }
/* Zoekbare keuzelijst als filter (select.filters__select.js-zoekbaar): zelfde maat als een gewone filterkeuze. */
.filters__form .kies { flex: 0 1 auto; width: 160px; min-width: 0; }
.filters__form .kies__invoer { height: 32px; min-height: 32px; padding: 0 30px 0 10px; font-size: 12.5px; text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%238a847c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center; background-size: 14px; }
.filters__form .kies__invoer::placeholder { color: var(--text); opacity: 1; }
.filters__form .kies__lijst { min-width: 260px; right: auto; }
/* GET-filterformulier binnen de filterbalk (zoekveld + keuzes + Zoeken op één regel). */
.filters__form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; border: 0; max-width: none; }
.filters__form .search { min-width: 220px; }
.selectietabel .badge svg.i { margin-right: 1px; }
.bulkbar--onder { margin: 16px 0 0; padding: 12px 20px; font-size: 13.5px; }
.bulkbar--onder > span { font-size: 13px; }
.bulkbar--onder .muted { font-weight: 400; }

/* ── Formulierkaarten (Feed bewerken, Samenvoegen, Resultaat) ───── */
.card--fieldset { min-inline-size: 0; border: 0; margin: 0; padding: 0; }
.card--fieldset[hidden] { display: none; }
.card__body.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card__body.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fld--breed { grid-column: 1 / -1; }
.card__body.vinkjes { display: grid; gap: 12px; }
.fld--check { align-items: flex-start; font-weight: 400; font-size: 13px; cursor: pointer; }
.fld--check input { margin-top: 2px; flex: none; }
.fld--check .fld__hint { display: block; margin-top: 2px; }
.fld textarea, .vinkjes textarea { min-height: 76px; padding: 8px 10px; }
.phead__b { font-weight: 500; }
.btn--block { width: 100%; justify-content: center; }
.gevaar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gevaar__titel { font-weight: 500; font-size: 13px; }
.bronfeeds .mee__label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.bronfeeds .mee__label b { font-weight: 500; }
.bronfeeds input[type=checkbox] { width: 15px; height: 15px; margin: 0; accent-color: var(--ink); }
.bronfeeds__sleutel { width: 180px; height: 34px; min-height: 34px; }
.bronfeeds__volgorde { width: 64px; height: 30px; min-height: 30px; text-align: center; }
.bronfeeds tr.is-gedempt td { color: var(--text-3); }

/* ── Lijstpagina's (Regelsets, Lijsten) ──────────────────────────── */
.phead__telling { font-weight: 400; font-size: 15px; color: var(--text); }
.phead__title h1 svg.i { width: 20px; height: 20px; }
.tabelbalk .search--klein { margin: 0; height: 28px; }
.toevoegrij { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.toevoegrij__knop { padding-bottom: 0; }
.list li .badge { flex: none; }

/* Balkje boven een tabel (kolomkiezer rechts) */
.tabelbalk { display: flex; align-items: center; gap: 8px; padding: 9px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.tabelbalk .grow { flex: 1; }
.tabelbalk .tel { font-size: 11px; line-height: 1.5; font-weight: 600; padding: 0 6px; border-radius: 999px; background: var(--surface-3); color: var(--muted); margin-left: 2px; }

/* ── Responsief ────────────────────────────────────────────── */
@media (max-width: 1040px) { .cols { grid-template-columns: 1fr; } .stappen { flex-wrap: wrap; } .stappen__stap { flex: 1 1 45%; } }
@media (max-width: 768px) {
    .container { padding: 16px; margin-top: 0; }   /* de menuknop staat in de suitebar: geen vrije rij meer nodig */
    .phead__actions { width: 100%; justify-content: flex-end; }
    .suitebar__app--extern { display: none; }
    .filter-blok__rij .field { flex: 1 1 100%; }
    .filter-blok__rij .filter-blok__acties { margin-left: 0; }
    .col-manager__list { position: static; width: 100%; box-shadow: none; }
}

/* ── AI-feedopzet (canvas AIOpzet / AIPreview) ─────────────── */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.note--ok { background: var(--ok-bg); color: var(--ok); }
/* Modelkeuze: twee tegels met een eigen radiorondje; gekozen tegel in de merktint. */
.card__body.tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tegel { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; align-items: flex-start; margin: 0; font-weight: 400; cursor: pointer; min-width: 0; }
.tegel:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 0 0 3px var(--brand-ring); }
.tegel:has(input:disabled) { cursor: default; }
.tegel input { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); margin: 2px 0 0; flex: none; cursor: inherit; }
.tegel input:checked { border: 5px solid var(--ink); }
.tegel input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tegel > span { min-width: 0; }
.tegel__t { font-weight: 600; font-size: 13px; }
.tegel .fld__hint { display: block; }
.card__body .fld--check > span > .fld__hint { display: block; margin-top: 2px; }
.ta--vast { display: block; min-height: 64px; padding: 8px 10px; line-height: 1.45; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 13.5px; box-shadow: inset 0 1px 1px rgba(35,30,20,.04); }
/* Stappenkaart: per stap een rij met nummer/vinkje, titel + toelichting en statusbadge. */
.card__body.stapkaarten { display: grid; gap: 8px; }
.stapkaart { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); min-width: 0; }
.stapkaart__nr { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--font-ui); background: var(--surface-3); color: var(--text-3); flex: none; }
.stapkaart--klaar .stapkaart__nr { background: var(--ok-bg); color: var(--ok); }
.stapkaart--bezig .stapkaart__nr { background: var(--warn-bg); color: var(--warn); }
.stapkaart--fout .stapkaart__nr { background: var(--crit-bg); color: var(--crit); }
.stapkaart--nu .stapkaart__nr { background: var(--brand-tint); color: var(--brand-dark); }
.stapkaart__tekst { flex: 1; min-width: 0; }
.stapkaart__titel { font-weight: 500; font-size: 13px; display: block; }
.stapkaart .badge { flex: none; }
.kop3 { font-size: 12px; font-weight: 600; margin: 0 0 8px; color: var(--text-3); letter-spacing: .06em; text-transform: uppercase; }
.card__body.grid2--ruim { gap: 20px; }
.list--scroll { max-height: 20rem; overflow-y: auto; }
.card__body--details details + details { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.card__body--details summary { cursor: pointer; font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 8px; list-style: none; }
.card__body--details summary::-webkit-details-marker { display: none; }
.card__body--details summary::before { content: ''; width: 0; height: 0; border-left: 5px solid var(--text-3); border-top: 4px solid transparent; border-bottom: 4px solid transparent; flex: none; transition: transform .15s; }
.card__body--details details[open] > summary::before { transform: rotate(90deg); }
.card__body--details details > *:not(summary) { margin-top: 8px; }
.card__body--details .spacer { flex: 1; }
.table--klein { font-size: 12px; box-shadow: none; }
.table--klein th, .table--klein td { padding: 5px 8px; }
/* Gesprek over het plan: bubbels (jij grijs, AI in de merktint) en het vraagformulier. */
.card__body.chat { display: grid; gap: 10px; }
.chat__b { border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.chat__b--u { background: var(--surface-3); }
.chat__b--ai { background: var(--brand-tint); }
.chat__b--bezig { opacity: .8; }
.chat__kop { font-size: 11px; color: var(--text-3); margin-bottom: 4px; }
.chat__b details { margin-top: 6px; }
.chat__b summary { cursor: pointer; font-size: 12px; }
.chat__b .list { margin-top: 6px; }
.chat__dry { margin-top: 6px; font-size: 12px; }
.card__body.chat__form { display: grid; gap: 10px; }
.chat__form textarea { min-height: 64px; }
.chat__form .seg--toggle { margin: 0; justify-self: start; max-width: 100%; }
.chat__acties { display: flex; align-items: center; gap: 8px; }
.seg--toggle label.toggle { position: relative; display: inline-flex; align-items: center; gap: 4px; margin: 0; white-space: nowrap; }
.seg--toggle label.toggle input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.seg--toggle .toggle:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.seg--toggle .toggle:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.seg--toggle .toggle:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Team & rollen (Admin → Team & rollen): de rechtenboom van een rol of gebruiker. Rijen per niveau
   ingesprongen (app › app-groep › pagina); de keuze Geen/Lezen/Bewerken is een .seg--toggle met
   radio's (zonder de standaardmarge onder de seg). Oranje = op gebruikersniveau / hier ingesteld:
   .seg--eigen (gekozen knop in merkkleur) + de bron als .badge--brand; de rij zelf houdt zijn kleur. */
.rechtenboom td { vertical-align: middle; }
.rechtenboom .seg--toggle { margin: 0; }
.rechtenboom__rij--1 td { background: var(--surface-2); }
.card--flush .rechtenboom__rij--2 td:first-child { padding-left: 36px; }
.card--flush .rechtenboom__rij--3 td:first-child { padding-left: 76px; }
.rechtenboom .seg--eigen .toggle:has(input:checked) { background: var(--brand); color: #232323; }
@media (max-width: 600px) {
    .rechtenboom { width: 100%; table-layout: auto; }
    .rechtenboom thead { display: none; }
    .rechtenboom tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--border); }
    .rechtenboom td { border: 0; width: auto; }
    .rechtenboom td:nth-child(2) { grid-column: 1 / -1; order: 3; padding-top: 0; }
    .card--flush .rechtenboom__rij--2 td:first-child { padding-left: 28px; }
    .card--flush .rechtenboom__rij--3 td:first-child { padding-left: 56px; }
}

/* ── Conceptproducten (canvas Concepten) ───────────────────── */
/* Statustegels: zoals .stats, maar vijf breed en met kleurstanden; een tegel kan een filterlink zijn. */
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 12px 16px; display: grid; gap: 2px; border: 2px solid transparent; min-width: 0; color: inherit; text-decoration: none; }
a.tile:hover { text-decoration: none; border-color: var(--border-strong); }
.tile.is-on { border-color: var(--ink); }
.tile__n { font: 600 22px/1.2 var(--font-head); font-variant-numeric: tabular-nums; }
.tile__l { font-size: 12px; color: var(--muted); }
.tile--rood .tile__n { color: var(--crit); }
.tile--amber .tile__n { color: var(--warn); }
.tile--groen .tile__n { color: var(--ok); }
/* Filterblok met .fld-velden (zoekveld groeit, selects vast) en de kolomkiezer erin. */
.filter-blok__rij .fld { flex: 0 0 auto; min-width: 150px; margin: 0; }
.filter-blok__rij .fld--zoek { flex: 1 1 260px; }
.filter-blok__rij .fld input[type=search] { width: 100%; height: 34px; min-height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 13.5px; box-shadow: inset 0 1px 1px rgba(35,30,20,.04); margin: 0; }
.filter-blok__rij .fld select { margin: 0; }
.filter-blok__rij > .btn { flex: none; }
.filter-blok__rij .col-manager { flex: none; }
.kolknop .tel { font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 999px; background: var(--surface-3); color: var(--muted); }
/* Automatisering-kaart: vinkjes in twee kolommen. */
.card__body.auto-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.auto-grid .fld--check { font-size: 13px; }
.auto-grid .fld--check .fld__hint { display: inline; }
.auto-grid__sub { padding-left: 24px; }
/* Compleetheid-chips: verplicht rood, optioneel grijs; badges erin houden hun eigen kleur. */
.mist { display: inline-flex; gap: 4px; flex-wrap: wrap; vertical-align: middle; margin-right: 4px; }
.mist > span:not(.badge) { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--crit-bg); color: var(--crit); white-space: nowrap; }
.mist > span.opt { background: var(--surface-3); color: var(--muted); }
.mist > span.tel { background: var(--surface-3); color: var(--text); font-weight: 600; }
.card--flush .table td.compleet, .table td.compleet { white-space: normal; min-width: 220px; }
.table th.compleet { width: 30%; }
.table--vast:not(.table--vrij) td > span.mist:not(.badge) { display: inline-flex; overflow: visible; }
.table a.row, .table a.row:visited { color: var(--text); font-weight: 500; text-decoration: none; }
.table a.row:hover { color: var(--brand-dark); text-decoration: underline; }
.card--flush .table td.mee, .card--flush .table th.mee, .table td.mee, .table th.mee { width: 46px; min-width: 0; padding-right: 8px; }
.table td.mee form { margin: 0; display: flex; }
.table td.mee input, .table th.mee input { accent-color: var(--ink); width: 15px; height: 15px; margin: 0; }
.concepttabel tr.vg-member td.lid { padding-left: 32px; }
.concepttabel tr.vg-member td { background: var(--surface-2); }
.concepttabel tr.is-onderdeel > td[data-col="titel"] { padding-left: 34px; }   /* Bundelonderdelen ingesprongen onder hun hoofdproduct */
.concepttabel tr.vg-member.is-onderdeel > td[data-col="titel"] { padding-left: 56px; }
.concepttabel tr.is-onderdeel > td:first-child { box-shadow: inset 3px 0 0 var(--bundel); }
.card--flush > .empty { margin: 20px; }
.bulkbar b { font-weight: 600; }
.link-knop { border: 0; background: none; padding: 0; font: inherit; color: var(--brand-dark); cursor: pointer; text-decoration: none; }
.link-knop:hover { text-decoration: underline; }
.link-knop--crit { color: var(--crit); }
/* ── Concept bewerken (canvas ConceptBewerken) ─────────────── */
.form-section legend .sub { color: var(--text-3); font-size: 12px; font-weight: 400; margin-left: 6px; }
.btn.is-uit { opacity: .45; pointer-events: none; }
.miss--crit li svg.i { color: var(--crit); }
.miss--crit li { color: var(--crit); }
.auto-status { display: grid; gap: 6px; margin: 0 0 16px; }
.auto-status__row { font-size: 12.5px; color: var(--muted); }
.auto-status__row--klaar { color: var(--ok); }
.auto-status__row--fout { color: var(--crit); }
.src--feed { color: var(--info); }
.src--as { color: var(--brand-dark); }
/* ── AI-aanvullen (canvas AISuggesties) ────────────────────── */
.table th.mee .mee__label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.card--flush .table td.vrij, .table--vast td.vrij { white-space: normal; }
.card--flush .table td.mee.mee { width: 110px; }
.table td.veld { font-weight: 500; }
/* ── Variantgroep aanvullen (canvas ConceptGroep) ──────────── */
.filterstand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 -4px; }
.filterstand .seg--toggle { margin: 0; }
.filterstand .form-missing-note { margin: 0; }
.form--stil .form-section--varianten .varianten { display: grid; gap: 10px; }
.form--stil .vg-groep { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin: 0; background: var(--surface); display: grid; gap: 10px; min-width: 0; }
.form--stil .vg-groep__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-start; }
.form--stil .vg-groep__kop > b { font-weight: 600; font-size: 13px; }
.form--stil .vg-groep__kop .spacer { flex: 1; }
.fgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form--stil .pv-blok { margin: 0; }
.form--stil .pv-blok__kop { margin: 0 0 8px; font: 600 11px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); border: 0; }
.form--stil .pv-veld { min-width: 0; }
.form--stil .pv-alle { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.form--stil .fotokiezer { max-width: none; margin-top: 6px; gap: 8px; }
.form--stil .fk-tegel img, .form--stil .fk-leeg { width: 88px; height: 88px; border-radius: 8px; }
.form--stil .fk-groot { right: 4px; bottom: 4px; min-height: 24px; padding: 0 6px; }
/* In een filterstand blijft een variantkader zonder lege velden weg; met velden staat hij gewoon. */
.card__body p.meter-txt, p.meter-txt { font-size: 12px; line-height: 1.5; color: var(--text-3); margin: 0 0 6px; }
/* ── Promoveren (canvas Promoveren / PromoveerResultaat) ───── */
.progress { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.card__body.voortgang { display: grid; gap: 14px; }
.voortgang__kop { display: flex; align-items: baseline; gap: 10px; }
.voortgang__kop .spacer { flex: 1; }
.voortgang__n { font: 600 28px var(--font-head); font-variant-numeric: tabular-nums; }
.voortgang form { margin: 0; }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aanvultabel th.compleet { width: 38%; }
.aanvultabel td.compleet { min-width: 260px; }
/* ── Productenlijst (canvas Producten) ─────────────────────── */
.titelcel { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; vertical-align: middle; }
.titelcel > a.row { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titelcel b { font-weight: 500; }
.titelcel .badge { flex: none; }
.thumb { width: 34px; height: 34px; border-radius: 6px; background: var(--surface-3); flex: none; display: grid; place-items: center; color: var(--text-3); font-size: 10px; font-weight: 600; letter-spacing: .04em; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb svg.i { width: 16px; height: 16px; }
.table--vast:not(.table--vrij) td > span.titelcel:not(.badge) { display: inline-flex; overflow: visible; }
.producttabel tr.vg-member td.lid { padding-left: 28px; }
.producttabel tr.vg-member td { background: var(--surface-2); }
.producttabel tr.vg-row td { cursor: pointer; }
.filter-grid .fld { margin: 0; }
.toon { display: flex; gap: 14px; align-items: center; font-size: 12.5px; color: var(--muted); margin-top: 12px; flex-wrap: wrap; }
.toon .fld--check { font-size: 12.5px; gap: 6px; align-items: center; }
.toon .fld--check input { margin: 0; }
.toon .seg > a { padding: 3px 9px; font-size: 12px; }
.toon__sep { width: 1px; height: 18px; background: var(--border); }
/* ── Variantgroep (canvas Variantgroep) ────────────────────── */
.vg-status-form { margin: 0; }
.sel--klein.vg-status { min-width: 150px; width: auto; margin: 0; border-color: var(--border-strong); background-color: var(--surface); color: var(--text); }
.variantentabel td { vertical-align: middle; }
.card--details > summary.card__head { padding-bottom: 14px; }
.card--details > summary.card__head svg.i:last-child { color: var(--text-3); transition: transform .15s; }
.card--details[open] > summary.card__head svg.i:last-child { transform: rotate(180deg); }
.fk-soort { max-width: 104px; margin-top: 4px; height: 26px; min-height: 26px; font-size: 11.5px; padding: 0 6px; }
.fk-tekst { display: block; font-size: 11px; }
/* Formulieren in de kolomopzet vullen de hoofdkolom (style.css beperkt .form tot 640 px). */
.cols .form, .form--stil, .form--savebar { max-width: none; margin: 0; }

/* ---- Nieuw product: stappenbalk en typekiezer (canvas "Nieuw") ---- */
.pipe { display: flex; margin: 0 0 16px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; }
.pipe__step { flex: 1; display: flex; gap: 10px; align-items: center; padding: 12px 16px; position: relative; color: var(--muted); min-width: 0; border-right: 1px solid var(--border); text-decoration: none; }
.pipe__step:last-child { border-right: 0; }
a.pipe__step:hover { background: var(--surface-2); color: var(--text); }
.pipe__step.is-current { background: var(--brand-tint); color: var(--text); }
.pipe__step.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand); }
.pipe__n { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--muted); }
.pipe__step.is-done .pipe__n { background: var(--ok-bg); color: var(--ok); }
.pipe__step.is-current .pipe__n { background: var(--ink); color: var(--on-ink); }
.pipe__step.is-warn .pipe__n { background: var(--warn-bg); color: var(--warn); }
.pipe__t { font-weight: 500; font-size: 13px; white-space: nowrap; }
.pipe__s { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kiezer { display: grid; grid-template-columns: 286px minmax(0, 1fr); padding: 0; }
.kiezer__boom { border-right: 1px solid var(--border); padding: 14px 12px 16px; min-width: 0; }
.kiezer__rechts { padding: 16px 20px 18px; min-width: 0; display: flex; flex-direction: column; }
.search--boom { width: 100%; min-width: 0; margin-bottom: 10px; }
.boomkop { font: 600 10.5px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 4px 8px 7px; }
.boomkop:not(:first-child) { margin-top: 12px; padding-top: 13px; border-top: 1px solid var(--border); }
.tak { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 7px; color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: none; position: relative; cursor: pointer; }
.tak:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.tak .dr { width: 12px; height: 12px; flex: none; color: var(--text-3); transition: transform .12s; }
.tak .dr--open { transform: rotate(90deg); }
.tak .n { margin-left: auto; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tak--d1 { padding-left: 26px; }
.tak--d2 { padding-left: 44px; }
.tak.is-on { background: var(--brand-tint); color: var(--text); font-weight: 600; }
.tak.is-on::before { content: ""; position: absolute; left: -12px; top: 5px; bottom: 5px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.tak.is-pad { color: var(--text); }
.tak[hidden] { display: none; }
.boom-leeg { font-size: 12.5px; padding: 4px 8px; margin: 0; }
.crumbs--kiezer { margin-bottom: 10px; }
.typekaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.typekaart { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); min-width: 0; cursor: pointer; border: 1.5px solid transparent; color: var(--text); text-decoration: none; }
.typekaart:hover { background: var(--surface-2); text-decoration: none; }
.typekaart.is-on { border-color: var(--ink); background: var(--surface); }
.typekaart .ico { width: 36px; height: 36px; border-radius: 9px; background: var(--brand-tint); color: var(--brand-dark); display: grid; place-items: center; flex: none; }
.typekaart__tekst { min-width: 0; }
.typekaart h3 { font-size: 13.5px; font-weight: 600; margin: 0; }
.typekaart p { margin: 2px 0 0; font-size: 12px; color: var(--text-3); }
.typedetail { margin-top: 14px; box-shadow: none; background: var(--surface-2); }
.typedetail .card__body { padding: 14px 16px; }
.typedetail__kop { display: flex; align-items: baseline; gap: 8px; }
.typedetail__kop b { font-family: var(--font-head); font-size: 14px; }
.typedetail__kop .muted { font-size: 12.5px; }
.typedetail p.muted { margin: 6px 0 0; font-size: 12.5px; }
.velddemo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kiezerbalk { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.kiezerbalk .grow { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); }
.kiezerbalk b { color: var(--text); }
.kiezer__voet { margin: 12px 2px 0; font-size: 12.5px; }
@media (max-width: 900px) { .kiezer { grid-template-columns: 1fr; } .kiezer__boom { border-right: 0; border-bottom: 1px solid var(--border); } }

/* ---- Collectie-detail (canvas "Collectie") ---- */
.btn--crit { color: var(--crit); }
.btn--crit:hover { color: var(--crit); background: var(--crit-bg); }
.btn.is-uit { pointer-events: none; }
.search--kop { min-width: 180px; height: 28px; margin: 0; }
.regel-form { border-top: 1px solid var(--border); }
.card--flush .table.regels th:first-child, .card--flush .table.regels td:first-child { width: 60px; min-width: 0; }
.regel__veld { font-weight: 500; }
.regel-form__voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.regel-form__voet .fld__hint { margin: 0; }
.lid-resultaten { margin-top: 8px; display: grid; gap: 6px; }
.lid-rij { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.lid-rij__tekst { min-width: 0; font-size: 12.5px; }
.lid-rij__tekst strong { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lid-rij__tekst .muted { font-size: 11.5px; }
.lid-rij__acties { display: flex; gap: 4px; flex: none; }
.richtext-view--klein { font-size: 12.5px; color: var(--muted); }
.richtext-view--klein > :first-child { margin-top: 0; }
.richtext-view--klein > :last-child { margin-bottom: 0; }

/* ---- Collectie bewerken / Volgorde (canvas "CollectieBewerken", "Volgorde") ---- */
.fgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.afbeelding-rij { display: flex; gap: 12px; align-items: center; margin: 4px 0 6px; }
.afbeelding-rij__velden { flex: 1; min-width: 0; display: grid; gap: 6px; }
.thumb--groot { width: 96px; height: 64px; border-radius: 8px; flex: none; object-fit: cover; }
.thumb--leeg { display: grid; place-items: center; color: var(--text-3); background: var(--surface-3); }
.volgorde tr.is-gepind td { background: var(--brand-tint); }
.score-balk { display: inline-block; width: 70px; height: 6px; border-radius: 999px; background: var(--surface-3); vertical-align: middle; overflow: hidden; }
.score-balk i { display: block; height: 100%; background: var(--ok); }
.pin-rij { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.pin-rij__pos { width: 58px; height: 26px; padding: 0 6px; font-size: 12px; }
.stack--klein { display: grid; gap: 12px; }
.stack--klein .field { margin: 0; }
.field--klein input { max-width: 120px; }

/* ---- Ranking-profielen (canvas "Ranking", "RankingProfiel") ---- */
.celsub { font-size: 12px; margin-top: 2px; }
.factor__naam { font-weight: 500; }
.gewicht { display: flex; align-items: center; gap: 8px; }
.gewicht__inp { width: 64px; height: 28px; padding: 0 8px; font-size: 13px; text-align: center; }
.factor__params { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.factor__param { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.factor__param .gewicht__inp { width: 80px; text-align: left; }
.sel--klein { height: 28px; padding: 0 26px 0 8px; font-size: 12.5px; }
.fld--kop { margin: 0; display: flex; align-items: center; gap: 8px; }
.fld--kop .fld__label { margin: 0; }
.stack--klein textarea { min-height: 72px; }

/* ---- Bundels (canvas "Bundels", "Bundel") ---- */
.nieuwe-bundel { display: flex; align-items: flex-end; gap: 10px; }
.nieuwe-bundel .field { margin: 0; flex: 1; max-width: 420px; }
.groep-instellingen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 24px; border-top: 1px solid var(--border); }
.switch--rij { margin-top: 4px; }
.optienaam { margin: 0; }
.optienaam .fld { margin: 0; }
.optienaam__rij { display: flex; gap: 6px; }
.optienaam__rij input { height: 28px; font-size: 12.5px; width: 240px; }
.combi-blok__uitleg { margin: 0; padding: 10px 20px; border-bottom: 1px solid var(--border); }
.combi-blok { overflow-x: auto; }
.combi-blok .form { margin: 0; }
.combi-blok .table td { white-space: normal; }
.combi-blok .table td:first-child { min-width: 0; }
.combi-blok .form-actions { margin: 0; padding: 10px 20px; border-top: 1px solid var(--border); }
.combi-blok .table input[type="number"], .combi-blok .table input[type="text"] { height: 28px; font-size: 12.5px; }
.mediatiles { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.mediatile { margin: 0; position: relative; }
.mediatile img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.mediatile__weg { position: absolute; top: 4px; right: 4px; margin: 0; }
.mediatile__weg .btn { background: var(--surface); }
.upload-rij { display: flex; align-items: center; gap: 10px; margin: 0; }
.combi-blok .table { table-layout: fixed; width: 100%; }
.combi-blok .table th:nth-child(1) { width: 70px; }
.combi-blok .table th:nth-child(3) { width: 150px; }
.combi-blok .table th:nth-child(4) { width: 130px; }
.combi-blok .table th:nth-child(5) { width: 130px; }
.combi-blok .table th:nth-child(6) { width: 180px; }
.combi-blok .table td input[type="number"], .combi-blok .table td input[type="text"] { width: 100%; max-width: 100% !important; }

/* ---- Kanaal (canvas "Kanaal", "KanaalTransformeren", "KanaalPreview", "KanaalInstellingen") ---- */
.seg--filter { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-3); border-radius: 8px; }
.seg--filter button { padding: 5px 10px; border: 0; border-radius: 6px; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--muted); background: transparent; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; min-height: 0; line-height: 1.2; }
.seg--filter button.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.seg--filter .n { font-size: 11px; color: var(--text-3); }
.srcline { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.srcline .sep { color: var(--text-3); font-size: 12px; }
.chip--ghost { border-style: dashed; color: var(--text-3); background: transparent; }
.table--vast:not(.table--vrij) td > span.srcline:not(.badge) { display: flex; overflow: visible; }
.smp { color: var(--muted); font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.smp.is-empty { color: var(--text-3); font-style: italic; }
.tf-n { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.tf-n svg.i { width: 13px; height: 13px; color: var(--text-3); }
.tf-n.has, .tf-n.has svg.i { color: var(--brand-dark); }
.doelnaam { font-weight: 500; }
.maptabel tr.ingebouwd td, .maptabel tr.is-uit td .doelnaam { color: var(--text-3); }
.maptabel tr.ingebouwd .badge { background: var(--surface-3); }
.table tr.grp td { background: var(--surface-3); font-weight: 600; font-size: 12px; padding: 6px 12px 6px 20px; color: var(--muted); }
.menu__item--crit { color: var(--crit); }
.mapping-form { border-bottom: 1px solid var(--border); }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 28px; margin-top: 12px; }
.bars i { flex: 1; background: var(--border-strong); border-radius: 2px 2px 0 0; min-height: 3px; }
.bars i.ok { background: var(--ok); }
.bars i.crit { background: var(--crit); }
.rules { display: grid; gap: 8px; }
.rgrp { font: 600 11px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 10px 0 4px; display: flex; align-items: center; gap: 8px; }
.rgrp .btn { text-transform: none; letter-spacing: 0; }
.rule { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.rule--leeg { background: var(--surface-2); }
.rule--add { border-style: dashed; background: var(--surface-2); grid-template-columns: 28px minmax(0, 1fr); }
.rule--add[hidden] { display: none; }
.rule__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--muted); }
.rule__main { display: grid; gap: 6px; min-width: 0; }
.rule__line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.rule__op { font-weight: 600; }
.rule__cfg { color: var(--muted); }
.rule__side { display: flex; gap: 4px; }
.io { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); flex-wrap: wrap; }
.io code { background: var(--surface-3); border: 1px solid var(--border); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.io code.out { color: var(--brand-dark); border-color: var(--brand); background: var(--brand-tint); }
.arrow { color: var(--text-3); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 12.5px; margin: 0; }
.kv dt { color: var(--text-3); margin: 0; }
.kv dd { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stapform { margin: 0; display: grid; gap: 10px; }
.stapform__ai { display: flex; gap: 8px; align-items: flex-end; }
.stapform__ai .field { flex: 1; margin: 0; }
.stapform__velden { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
.stapform__velden .field { margin: 0; min-width: 160px; }
.stapform__velden .field[hidden] { display: none; }
.stapform__knop { display: flex; align-items: flex-end; }
.tf-ai-note--error { color: var(--crit); }
.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filters .fld--kop form, .filters form { margin: 0; }
.plantabel th.mee, .plantabel td.mee { width: 60px; min-width: 0; }
.plantabel tr.is-uit td { color: var(--text-3); }
.wijzigingen summary { cursor: pointer; color: var(--brand-dark); font-size: 12.5px; }
.wijzigingen__lijst { margin: 6px 0 0; padding-left: 0; list-style: none; display: grid; gap: 3px; font-size: 12px; }
.wijzigingen__lijst .oud { text-decoration: line-through; }
.catzoek { margin: 0; position: relative; }
.catzoek .search { min-width: 0; width: 100%; }
.cat-resultaten { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border-radius: 10px; max-height: 260px; overflow: auto; box-shadow: var(--shadow-2), 0 0 0 1px var(--border); padding: 4px; }
.cat-resultaten button { display: block; width: 100%; text-align: left; padding: 6px 10px; border: 0; border-radius: 6px; background: none; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text); }
.cat-resultaten button:hover { background: var(--surface-3); }
.cattabel tr.is-leeg td { background: var(--warn-bg); }
.veldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.veldset legend { font-weight: 500; font-size: 13px; padding: 0; margin-bottom: 4px; }
.zoekkop { display: flex; gap: 6px; align-items: center; margin: 0; }
.zoekkop .search--kop { min-width: 260px; }
.fgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.maptabel { table-layout: fixed; }
.maptabel td { overflow: hidden; }
.maptabel th.act { width: 48px; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.note--crit { background: var(--crit-bg); color: var(--crit); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.maptabel th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Leveranciers (canvas "Leveranciers", "Leverancier") ---- */
.magazijnen li { align-items: center; }
.magazijn__naam { min-width: 0; }
.magazijn__naam a { color: var(--text); font-weight: 500; }
.card__head--tussen { border-top: 1px solid var(--border); }
.uitzondering { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.uitzondering .field { margin: 0; flex: 1; min-width: 200px; }

/* ---- Productvelden (canvas "Velden", "VeldBekijken", "VeldBewerken", "Beeldlabels") ---- */
.dl-kv--links { grid-template-columns: 200px 1fr; }
.dl-kv--links dd { text-align: left; }
.collist { display: grid; gap: 2px; }
.col-it { display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; }
.col-it i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.col-it i.ok { background: var(--ok); }
.col-it .nm { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.col-it .to { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.col-it .vv { font-size: 11.5px; color: var(--text-3); font-family: ui-monospace, Menlo, monospace; }
.col-it.unused .nm { color: var(--muted); }
.col-it__rechts { display: inline-flex; align-items: center; gap: 4px; }
.menu__form { display: flex; gap: 6px; padding: 4px; }
.menu__form input { height: 28px; font-size: 12.5px; flex: 1; min-width: 0; }
tr.is-weg { display: none; }
.vinklijst { display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.indeling .form { margin: 0; }
.card--details > summary.card__head .sub { text-transform: none; }
#nieuw-veld .form--inline, #nieuw-veld .inline-fields { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
#nieuw-veld .inline-fields .field { margin: 0; min-width: 180px; flex: 1; }
#nieuw-veld .inline-fields .field[hidden] { display: none; }

.form--stil textarea, .card__body > textarea { width: 100%; }
#veldtabel { table-layout: fixed; }
#veldtabel th.act { width: 178px; }
#veldtabel td { overflow: hidden; text-overflow: ellipsis; }
#veldtabel td.act { white-space: nowrap; }

/* ---- Automatiseringen (canvas "Automatiseringen") ---- */
.auto-lijst { display: grid; gap: 12px; }
.auto-rij { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.auto-rij .fld__hint { display: block; }
.auto-vink { display: inline-flex; width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--ink); background: var(--ink); align-items: center; justify-content: center; flex: none; margin-top: 2px; }
.auto-vink svg.i { width: 11px; height: 11px; stroke: var(--on-ink); }
.auto-vink--klok { background: transparent; border-color: var(--border-strong); }
.auto-vink--klok svg.i { stroke: var(--text-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---- Cronjobs (canvas "Cron") ---- */
#crontabel { table-layout: fixed; }
#crontabel th.act { width: 290px; }
#crontabel td { overflow: hidden; text-overflow: ellipsis; }
.crontabel td .crontabel__hint { display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crontabel .act form { display: inline; }
.crontabel__schema > td { background: var(--surface-2); padding: 10px 20px; }
.crontabel__schema .inline-fields { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.crontabel__schema .inline-fields .field { margin: 0; min-width: 150px; }
.crontabel__schema .inline-fields .field[hidden] { display: none; }
.crontabel__schema .inline-fields .switch { align-items: center; height: 32px; }
.crontabel__schema .inline-fields input[type="time"] { height: 32px; font-size: 13px; }

/* ---- Koppelingen (canvas "Koppelingen") ---- */
.koptabel__detail > td { background: var(--surface-2); padding: 14px 20px; }
.koptabel__detail .form { margin: 0; }
.koptabel__acties { margin-top: 12px; display: flex; justify-content: flex-end; }
.koptabel input.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.koptabel .dl-kv--links dd code { font-size: 12px; }
.stack [data-kanaaltype][hidden] { display: none; }
.koptabel th.act { width: 250px; }
.koptabel td.act { white-space: nowrap; }

/* ---- API-kosten (canvas "ApiKosten") ---- */
.periode-form { margin: 0; }
.stat__n .muted { font-size: 13px; font-weight: 500; }
.prijstabel input.inp--prijs { width: 110px; height: 32px; font-size: 13px; font-variant-numeric: tabular-nums; }
.prijstabel input.inp--model { width: 240px; height: 32px; font-size: 13px; font-family: ui-monospace, Menlo, monospace; }
.verdeling { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-2); gap: 2px; }
.verdeling i { display: block; height: 100%; }
.verdeling__a { background: var(--brand); }
.verdeling__b { background: var(--info); }

/* ---- Start (canvas "Main") ---- */
.start-status { margin-bottom: 16px; }
.start-status .card__body { display: flex; gap: 12px; flex-wrap: wrap; }
.start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.start-grid .list li a { font-weight: 500; }
@media (max-width: 1100px) { .start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Nacontrole 21-9-2026: ruimte en uitlijning ---- */
.table td.act { white-space: nowrap; }
#feedtabel { table-layout: fixed; min-width: var(--feed-min, 1080px); }   /* --feed-min uit views/mappen/index.php: Feed houdt minstens 185 px (smaller = zijwaarts scrollen) */
/* De flow van links naar rechts: een lijn vóór elk blok (Instroom, PIM, Shopify); koppen mogen over twee regels. */
#feedtabel :is(th, td):is(.fase-start, .act) { border-left: 1px solid var(--border); }   /* .act: lijn ná het laatste blok (Shopify), zodat Live niet bij de knop lijkt te horen */
#feedtabel > thead th { white-space: normal; }
#feedtabel :is(th.sorteer.num > button, td.num) { padding-left: 8px; padding-right: 8px; }   /* veel smalle getalkolommen: kop en getal houden zo hun ruimte (zelfde rand, dus uitgelijnd) */
#feedtabel > thead th > button { white-space: normal; line-height: 1.25; text-align: inherit; }
/* Bronfeed onder een samenvoeging: id en sleutel blijven leesbaar (mag naar een tweede regel). */
#feedtabel tr.vg-member td { background: var(--surface-2); }
#feedtabel tr.vg-member td.lid { padding-left: 52px; }
#feedtabel td { overflow: hidden; text-overflow: ellipsis; }
#feedtabel td .celrij { max-width: 100%; }
#volgordetabel { table-layout: fixed; min-width: 1180px; }
#volgordetabel th.act { width: 110px; }
#volgordetabel td { overflow: hidden; text-overflow: ellipsis; }
#volgordetabel th.factor { white-space: normal; font-size: 10.5px; line-height: 1.25; }
.combi-blok .table th:nth-child(2) { width: auto; }
.combi-blok .table td, .combi-blok .table td > * { white-space: normal; }
.combi-blok .table td > span:not(.badge) { display: inline; overflow: visible; }
.pipe__step > span:not(.pipe__n) { display: grid; min-width: 0; }
.dl-kv dd { overflow-wrap: break-word; }
#aanvultabel { table-layout: fixed; }
#aanvultabel td:not(.compleet) { overflow: hidden; text-overflow: ellipsis; }
.combi-blok .table td:not(:first-child) { white-space: normal; }

/* ---- Nacontrole 21-9-2026 (2): computed-style-vergelijking met de canvassen ---- */
/* Knoppen erven het lettertype niet standaard (<button> valt terug op Arial). */
.btn, button.btn, .btn--klein, button.subtab, .theme-toggle { font-family: inherit; }
/* Invoer en keuzelijsten zoals .inp/.sel op de canvassen: 0 10px binnenruimte, eigen chevron rechts. */
input[type=text], input[type=number], input[type=email], input[type=password], input[type=url], input[type=tel] { padding-left: 10px; padding-right: 10px; }
/* Zoekvelden houden links ruimte voor het vergrootglas uit style.css; in een .search-blok staat het icoon ernaast. */
input[type=search] { padding-left: 32px; padding-right: 10px; }
.search input[type=search] { padding: 0; }
select:not([multiple]) { appearance: none; -webkit-appearance: none; padding-left: 10px; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%238a847c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 14px; }
select.sel--klein { padding-right: 26px; background-position: right 7px center; }
/* Stappenbalk: titel en ondertitel op de regelhoogte van de balk (20,25 px), zoals op de canvassen. */
.stappen__tekst, .pipe__step > span:not(.pipe__n) { line-height: 20.25px; }
.stappen__t, .stappen__s, .pipe__t, .pipe__s { line-height: inherit; }
/* Segmentbalk: de teller heeft op de canvassen dezelfde binnenruimte als het segment (37 px hoog). */
.seg .n, .seg--filter .n { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 6px; }
.seg--filter button { line-height: 18.75px; min-height: 0; }
.search input { padding: 0; }
.btn { line-height: 1.5; }
/* Uitklapmenu's (⋯) en de kolomkiezer mogen niet afgeknipt worden door de kaart of de scrollende tabel: app.js zet has-popover zolang ze open staan. */
.card.has-popover, .card--flush.has-popover, .table-scroll.has-popover { overflow: visible; }
.table td.act, .maptabel td.act, #veldtabel td.act, #crontabel td.act, #feedtabel td.act, #aanvultabel td.act { overflow: visible; }
#veldtabel th.act { width: 100px; }
#veldtabel th.sorteer > button { padding-left: 8px; padding-right: 8px; }
#veldtabel td[data-col="3"] { overflow: visible; white-space: normal; }
.magazijn__naam a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.has-popover .table { overflow: visible; }
/* Tabellen passend op de canvasbreedte (1440 px: inhoud 1160, hoofdkolom 824) */
#producttabel { table-layout: fixed; }
#producttabel th.act { width: 56px; }
#producttabel td { overflow: hidden; text-overflow: ellipsis; }
#producttabel td.act { overflow: visible; }
.variantentabel { table-layout: fixed; }
.variantentabel th.act { width: 116px; }
.variantentabel td { overflow: hidden; text-overflow: ellipsis; }
.variantentabel td.act { overflow: visible; }
.comptabel { table-layout: fixed; }
.comptabel th.act { width: 156px; }
.comptabel td { overflow: hidden; text-overflow: ellipsis; }
.comptabel td.act { overflow: visible; }
#crontabel th.act { width: 270px; }
#volgordetabel { min-width: 920px; }
#volgordetabel th.act { width: 90px; }
.koptabel th.act { width: 265px; }
#aanvultabel th:first-child { width: 300px; }
#aanvultabel th[data-col="sku"] { width: 150px; }
#aanvultabel th[data-col="type"] { width: 170px; }
#aanvultabel th[data-col="status"] { width: 110px; }
#aanvultabel th[data-col^="v"] { width: 140px; }
#aanvultabel td.compleet { white-space: normal; }
.combi-blok .table th:nth-child(6) { width: 170px; }
.dl-kv dd.wide { overflow-wrap: anywhere; }
.variantentabel .vg-status-form select { width: 100%; max-width: 100%; }

/* ---- Kolomkop van drie regels (Ruwe feed, Preview): naam + filter, waar de kolom naartoe gaat
   (knop = koppelen), en de vulgraad met het aantal unieke waarden + een metertje. ---- */
.table--k3 th { vertical-align: top; padding-top: 8px; padding-bottom: 8px; text-transform: none; letter-spacing: 0; }
.k3 { display: grid; gap: 3px; min-width: 0; justify-items: start; }
.k3 .th-filter { font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.k3 .th-filter--active { color: var(--brand-dark); }
.k3__knop { display: block; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; max-width: 220px; }
.k3__knop:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.k3__doel { display: inline-block; font-size: 11px; font-weight: 500; line-height: 1; color: var(--brand-dark); background: var(--brand-tint); border: 1px solid transparent; border-radius: 5px; padding: 3px 6px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.k3__doel--none { color: var(--text-3); background: var(--surface-3); }
.k3__knop:hover .k3__doel { border-color: var(--border-strong); }
.k3__knop.is-open .k3__doel { background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.k3__vul { font-size: 10.5px; font-weight: 400; line-height: 1.3; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.k3__vul b { font-weight: 600; color: var(--muted); }
.k3__meter { display: block; width: 100%; min-width: 60px; max-width: 130px; height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.k3__meter i { display: block; height: 100%; background: var(--ok); }
.k3__meter i.warn { background: var(--warn); }
.k3__meter i.leeg { background: var(--border-strong); }
.k3.is-ruis .th-filter, .k3.is-ruis .k3__vul, .k3.is-ruis .k3__meter { opacity: .6; }

/* Koppelpaneel onder een kolomkop (app.js plaatst het; staat buiten de scrollende tabel). */
.kolpaneel { position: absolute; z-index: 60; width: 380px; max-width: calc(100vw - 16px); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-2); text-align: left; }
.kolpaneel__kop { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: 10px 10px 0 0; }
.kolpaneel__kop .spacer { flex: 1; }
.kolpaneel__kop .chip { max-width: 290px; overflow: hidden; text-overflow: ellipsis; }
.kolpaneel h4 { font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 0; }
.kolpaneel__sec { padding: 11px 12px; display: grid; gap: 8px; }
.kolpaneel__doelen { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
.kolpaneel__doelen .leeg { color: var(--text-3); font-style: italic; }
/* Kruisje op een koppeling-chip: verwijdert díe mapping-regel (paneeltjes Ruwe feed + Preview). */
.chip__tekst { overflow: hidden; text-overflow: ellipsis; }
.chip__x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: -3px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .55; font-size: 14px; line-height: 1; cursor: pointer; }
.chip__x:hover, .chip__x:focus-visible { opacity: 1; background: var(--crit-bg); color: var(--crit); outline: none; }
.kolpaneel__veld { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; margin: 0; }
.kolpaneel__veld .kies { min-width: 0; }
.kolpaneel__veld input[type=text] { grid-column: 1 / -1; }
.kolpaneel__hint { margin: 0; font-size: 12px; color: var(--text-3); }

/* ---- Stappenbalk van een feed: bronfeed van een samenvoeging heeft maar één stap ---- */
.stappen--enkel { width: auto; display: inline-flex; }
.stappen--enkel .stappen__stap { flex: 0 0 auto; padding-right: 28px; }

/* ---- Ruwe feed: recente runs als compacte strook van één regel ---- */
.runstrook { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 14px; font-size: 12px; }
.runstrook__kop { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-right: 4px; }
.runstrook__run { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1); white-space: nowrap; cursor: default; }
.runstrook__rijen { color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ---- Mappen: koppeling toevoegen bovenaan, alle velden per veldgroep (links de bron, rechts het PIM-veld) ---- */
.chip--vast { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.chip__soort { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.chip--leeg { border-style: dashed; color: var(--text-3); background: transparent; }
button.chip { cursor: pointer; font-family: inherit; }
button.chip--leeg:hover { color: var(--brand-dark); border-color: var(--brand); background: var(--brand-tint-soft); }
.map-add--boven { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 14px 18px 16px; margin: 0 0 16px; max-width: none; }
/* In de inklapbare kaart (Mappen) is het formulier de kaartinhoud, geen eigen kaart. */
.map-add-kaart { margin: 0 0 16px; }
.map-add-kaart > .map-add--boven { background: none; box-shadow: none; border-radius: 0; margin: 0; padding: 16px 20px 18px; }
.map-inst > summary .sub, .map-add-kaart > summary .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.map-add--boven h3 { margin: 0 0 10px; font-size: 14px; }
.map-add--boven .map-add__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 14px 18px; align-items: start; }
.map-add__pijl { align-self: center; font-size: 18px; color: var(--text-3); padding-top: 22px; }
.map-add--boven .map-add__submit { align-self: end; }
.map-add--boven .toggle-group { margin-bottom: 8px; }
.map-add--boven .field { margin: 0; }
@media (max-width: 1040px) { .map-add--boven .map-add__grid { grid-template-columns: 1fr; } .map-add__pijl { display: none; } }
.map-balk { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 10px; }
.map-balk .map-legend { margin: 0; flex: 1 1 auto; }
.pv-kiezer { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--muted); }
.pv-kiezer input[type=text] { width: 230px; min-height: 28px; height: 28px; font-size: 12.5px; }
.koppeltabel { table-layout: fixed; }
.koppeltabel td { vertical-align: middle; }
.koppeltabel td.map-arrow { color: var(--text-3); padding-left: 0; padding-right: 0; text-align: center; }
.koppeltabel tr.is-leeg td { padding-top: 5px; padding-bottom: 5px; }
.koppeltabel tr.is-leeg .chip--dst { background: transparent; border-color: var(--border-strong); color: var(--muted); }
.koppeltabel .bronregel { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.koppeltabel .bronregel + .bronregel { margin-top: 4px; }
.koppeltabel .voorbeeld { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.koppeltabel th.act, .koppeltabel td.act { width: 200px; white-space: normal; overflow: visible; }
.koppeltabel td.act form { display: inline; }
.koppeltabel td.act .link-btn { margin-left: 8px; }
/* Knoppen naast elkaar in een tabelcel (Openen + Verwijderen); formulieren inline. */
.td-acties { white-space: nowrap; text-align: right; }
.td-acties > form { display: inline; margin: 0 0 0 6px; }
.koppeltabel .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Mappen van een kanaal (views/sync/_mappen.php): subregel van het doel onder de chip, acties wrappen binnen de kolom. */
.koppeltabel--kanaal .map-doelsub { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.koppeltabel--kanaal .map-acties { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 10px; }
.koppeltabel--kanaal td.act .link-btn { margin-left: 0; }
@media (max-width: 720px) {   /* telefoon: elke koppeling als kaartje, bron → doel op de eerste regel, voorbeeld en acties eronder */
    .koppeltabel--kanaal, .koppeltabel--kanaal > tbody { display: block; width: 100%; }
    .koppeltabel--kanaal > thead { display: none; }
    .koppeltabel--kanaal > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
    .koppeltabel--kanaal > tbody > tr > td { display: block; width: auto !important; min-width: 0; max-width: 100%; padding: 0; border: 0; }
    .koppeltabel--kanaal > tbody > tr.grp > td { flex: 1 1 100%; }
    .koppeltabel--kanaal > tbody > tr > td:is(.voorbeeld, .act) { flex: 1 1 100%; }
    .koppeltabel--kanaal .map-acties { justify-content: flex-start; }
}
.kies-kolom { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.kies-kolom select { min-height: 28px; height: 28px; font-size: 12.5px; max-width: 260px; }
.map-voet { margin: 8px 0 0; font-size: 12.5px; }

/* ---- Preview nieuwe feed: preset per producttype ---- */

/* ---- Kolomkop-paneel: sectie "Bewerkingen" (bestaande regels + het gewone transformatieformulier, smal gezet) ---- */
.kolpaneel { width: 420px; }
.kolpaneel__sec + .kolpaneel__sec { border-top: 1px solid var(--border); }
.kolpaneel h4 { display: flex; align-items: center; gap: 8px; }
.kolpaneel__link { margin-left: auto; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.kolpaneel__regels { display: grid; gap: 4px; font-size: 12.5px; }
.kolpaneel__regels .leeg { color: var(--text-3); font-style: italic; }
.kolpaneel__regel { display: flex; align-items: center; gap: 8px; }
.kolpaneel__nr { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; background: var(--surface-3); color: var(--muted); }
.kolpaneel__tf > summary { list-style: none; width: max-content; cursor: pointer; }
.kolpaneel__tf > summary::-webkit-details-marker { display: none; }
.kolpaneel__tfform { margin-top: 10px; }
.kolpaneel .tf-form { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; max-width: none; }
.kolpaneel .tf-grid, .kolpaneel .tf-cfg { display: grid; gap: 8px; grid-template-columns: 1fr; }
.kolpaneel .tf-grid .field, .kolpaneel .tf-cfg .field, .kolpaneel .tf-cfg-field { min-width: 0; margin: 0; }
.kolpaneel .tf-form input[type=text], .kolpaneel .tf-form input[type=number], .kolpaneel .tf-form select { width: 100%; max-width: none; }
.kolpaneel .tf-ai { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.kolpaneel .tf-ai-desc { flex: 1 1 100%; }
.kolpaneel .tf-io { flex-wrap: wrap; margin-top: 8px; }
.kolpaneel .tf-form-actions { margin-top: 10px; }
.kolpaneel .tf-extra { margin-top: 8px; }

/* Bestaande bewerking openklappen in het paneel (pijltje links; formulier wordt dan pas opgehaald) */
.kolpaneel__regel-det > summary { list-style: none; cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: 0 -4px; }
.kolpaneel__regel-det > summary::-webkit-details-marker { display: none; }
.kolpaneel__regel-det > summary:hover { background: var(--surface-2); }
.kolpaneel__pijl { flex: none; width: 10px; font-size: 10px; color: var(--text-3); transition: transform .12s; }
.kolpaneel__regel-det[open] > summary .kolpaneel__pijl { transform: rotate(90deg); color: var(--brand-dark); }
.kolpaneel__regel--set { padding-left: 18px; }
.kolpaneel__regel--set .badge { margin-left: auto; text-decoration: none; }
.kolpaneel__regel-form { margin: 8px 0 10px 18px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font-size: 12.5px; color: var(--muted); }
.kolpaneel__weg { margin: 8px 0 0; text-align: right; }
/* Tellertje in het labeltje onder de kolomtitel: aantal transformaties op de kolom / de bronkolom van het veld */
.k3__knop { display: inline-flex; align-items: center; gap: 4px; }
.k3__knop .k3__doel { min-width: 0; }
.k3__tf { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; background: var(--info-bg); color: var(--info); font-variant-numeric: tabular-nums; }
.k3.is-ruis .k3__tf { opacity: .7; }
/* Regelset-regel: bron = kolomnaam óf productveld */
.tf-kolomsoort { display: inline-flex; margin: 0 0 6px; }
.tf-kolomsoort .toggle { padding: 3px 10px; font-size: 12px; }
.tf-veldkeuze { width: 100%; }
/* Veld met meerdere entries: entry-keuze in "Koppeling toevoegen" en in de kolomkop-paneeltjes */
.map-entry { margin-top: 8px !important; max-width: 220px; }
.kolpaneel__entry { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--muted); }
.kolpaneel__entry select { flex: 1; min-height: 30px; }
.koppeltabel .bronregel .badge { margin-left: 2px; }
/* AI-feedopzet: vangnet (momentopnames van de opzet terugzetten) */
.vangnet { margin-top: 24px; max-width: 760px; }
.vangnet__rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 6px 0; font-size: 13px; }
.vangnet__rij + .vangnet__rij { border-top: 1px solid var(--border); }
/* Zwevende melding als je na een actie verderop op de pagina terugkomt (app.js "Plek onthouden") */
.flash-toast { position: fixed; z-index: 200; top: calc(var(--suitebar-height, 48px) + 12px); right: 24px; max-width: min(560px, calc(100vw - 48px)); padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.4; background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); border-left: 4px solid var(--ok); cursor: pointer; transition: opacity .35s, transform .35s; }
.flash-toast.flash--error { border-left-color: var(--crit); }
.flash-toast.flash--info { border-left-color: var(--info); }
.flash-toast.is-weg { opacity: 0; transform: translateY(-6px); }

/* POS-kortingen: bewust onopvallend en ingeklapt — de klant kijkt mee, dus zonder korting geen kortingsregel in beeld. */
.pos-korting-knop { position: relative; display: inline-block; box-sizing: content-box; width: 8px; height: 8px; margin-left: 8px; padding: 0; border: 1.5px solid var(--border-strong); border-radius: 50%; background: transparent; vertical-align: middle; cursor: pointer; opacity: .55; }
.pos-korting-knop::after { content: ''; position: absolute; inset: -10px; } /* groter klikvlak (tablet) */
.pos-korting-knop:hover, .pos-korting-knop[aria-expanded="true"] { opacity: 1; border-color: var(--text-3); }
.pos-korting-knop.is-actief { opacity: 1; border-color: var(--brand-dark); background: var(--brand-dark); }
tr.pos-korting-rij > td { background: var(--surface-2); }
.pos-korting-label { font-size: 12px; color: var(--text-3); }
.pos-korting { margin-top: 6px; font-size: 13px; }
.pos-korting__velden { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.pos-korting__velden select { width: auto; }
.pos-korting__velden .pos-korting__waarde { width: 90px; }
.pos-korting__velden input[type="text"] { flex: 1 1 200px; max-width: 320px; }
/* POS-orderregels: afbeelding links, titel + variant + art.nr. onder elkaar (leesbaar voor de klant). */
.pos-regel > td { vertical-align: middle; }
.pos-regel__img { width: 72px; }
.pos-regel__img img, .pos-regel__geenimg { display: block; width: 56px; height: 56px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border); background: #fff; }
.pos-regel__geenimg { background: var(--surface-2); }
.pos-regel__titel { font-size: 14px; }
.pos-regel__variant { font-size: 13px; margin-top: 2px; }
.pos-regel__sku { color: var(--text-3); font-size: 12px; margin-top: 2px; }
.pos-verzending { margin-top: 12px; align-items: flex-end; }
/* POS: voorraad uit de PIM onder de producttitel (stip + tekst), zoekveld met knop "Handmatig artikel" ernaast. */
.pos-voorraad { margin-top: 3px; font-size: 12px; color: var(--text-3); }
.pos-voorraad--ok, .pos-voorraad--warn { color: var(--text); }
.pos-voorraad--ok::before, .pos-voorraad--warn::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.pos-voorraad--ok::before { background: var(--ok); }
.pos-voorraad--warn::before { background: var(--warn); }
.pos-zoekrij { align-items: flex-end; }
.pos-zoekrij__knop { flex: 0 0 auto !important; min-width: 0 !important; }
.pos-regel__zoom { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; border-radius: 8px; }
.pos-regel__zoom:hover img { border-color: var(--border-strong); }
/* POS-afrekenen: snelknoppen, betaalregels (methode + bedrag) en het betalingenblok na doorvoeren. */
.pos-betaal-snel { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.pos-betaal__regel { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pos-betaal__regel select { flex: 1; }
.pos-betaal__regel .pos-betaal__bedrag { width: 140px; }
.pos-betalingen { margin-top: 1.2rem; }

.filters__form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; border: 0; max-width: none; }
.filters__form .search { min-width: 220px; }
/* ---- Feedfilters: stap 1 "Ruwe feed & filters" (views/feeds/show.php) ---- */
.ffilter { margin-bottom: 16px; }
.ffilter > summary.card__head { flex-wrap: nowrap; }
.ffilter > summary .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ffilter__stand { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ffilter__stand b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.ffilter__stand .cmp-meter { margin: 0 0 0 4px; width: 90px; }
.ffilter__form { display: flex; flex-direction: column; gap: 8px; }
.ffilter__regels { display: flex; flex-direction: column; }
.ffilter__regel { display: grid; grid-template-columns: 24px auto minmax(160px, 1.3fr) minmax(150px, 1fr) minmax(140px, 1.2fr) 90px 32px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--surface-3); }
.ffilter__regel > select, .ffilter__waarde input { margin: 0; min-width: 0; width: 100%; }
.ffilter__waarde { position: relative; min-width: 0; display: block; }
.ffilter__waarde input[readonly] { background: var(--surface-2); color: var(--text-3); }
/* Waardekeuze onder het waardeveld (app.js): waarden uit de kolom met hun aantal. */
.ffilter__keuzes { left: 0; right: auto; min-width: 100%; max-width: 420px; max-height: 280px; overflow-y: auto; }
.ffilter__keuzes .menu__item { justify-content: space-between; gap: 16px; }
.ffilter__keuzes .menu__item.is-actief { background: var(--surface-2); }
.ffilter__keuzes .menu__item .n { color: var(--text-3); font-variant-numeric: tabular-nums; }
.ffilter__keuzes-leeg { padding: 7px 10px; font-size: 12.5px; color: var(--text-3); }
.ffilter.has-popover, .ffilter.has-popover .card__body { overflow: visible; }
.ffilter__nr { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ffilter__als { font-size: 13px; color: var(--muted); white-space: nowrap; }
.ffilter__n { font-size: 12.5px; white-space: nowrap; }
.ffilter__n a { font-weight: 600; }
.ffilter__acties { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.table tr.is-uitgesloten td { color: var(--text-3); background: var(--surface-2); }
/* Eén balk = één hoogte: een segmentbalk in een filterbalk is even hoog als het zoekveld
   en de knoppen (32 px). Een teller ín een segment krijgt geen eigen binnenruimte
   (de regel ".seg .n" hierboven is voor losse tellers). */
.filter-bar .seg { height: 32px; box-sizing: border-box; align-items: stretch; }
.filter-bar .seg > a { padding-top: 0; padding-bottom: 0; }
.seg > a .n, .seg > span .n { padding: 0; }
/* Smal (hoofdkolom < ±760 px): kolom + voorwaarde op regel 1, waarde + aantal + × op regel 2. */
@media (max-width: 1100px) {
    .ffilter > summary.card__head { flex-wrap: wrap; }
    .ffilter__regel { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) auto 32px; row-gap: 6px; }
    .ffilter__als { display: none; }
    .ffilter__regel > .ffilter__nr { grid-column: 1; grid-row: 1; }
    .ffilter__regel > select:not(.js-ffilter-vw) { grid-column: 2; grid-row: 1; }
    .ffilter__regel > .js-ffilter-vw { grid-column: 3 / span 3; grid-row: 1; }
    .ffilter__regel > .ffilter__waarde { grid-column: 2 / span 2; grid-row: 2; }
    .ffilter__regel > .ffilter__n { grid-column: 4; grid-row: 2; }
    .ffilter__regel > .btn { grid-column: 5; grid-row: 2; }
}
/* ---- Compleetheid van een feedopzet (Preview nieuwe feed → tegel → /feeds/{id}/compleetheid) ---- */
.stat-tile--laden .stat-tile__num { color: var(--text-3); }
.stat-tile__num--ok { color: var(--ok); }
.stat-tile__num--warn { color: var(--warn); }
.stat-tile__num--crit { color: var(--crit); }
.cmp-card { margin-top: 16px; }
.cmp-kern { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cmp-kern__n { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp-kern__n small { font-size: 13px; font-weight: 400; color: var(--text-3); }
.cmp-kern__l { font-size: 12.5px; color: var(--muted); }
.cmp-kern__hint { font-size: 12px; color: var(--text-3); }
.cmp-balk { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin: 6px 0 4px; }
.cmp-balk i, .cmp-meter i { display: block; height: 100%; border-radius: 999px; }
.cmp-meter { display: inline-block; vertical-align: middle; width: 110px; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-right: 8px; }
.cmp-meter--ok { background: var(--ok); }
.cmp-meter--warn { background: var(--warn); }
.cmp-meter--crit { background: var(--crit); }
.cmp-pct { font-variant-numeric: tabular-nums; font-size: 12.5px; }
.cmp-stil { color: var(--text-3); font-size: 12.5px; }
/* Dataverzoek-kaart: kop met legenda; de kleuren zijn die van de Excel zelf (vast, ook in donker). */
.cmp-verzoek { margin-bottom: 16px; }
.cmp-verzoek .card__head { flex-wrap: wrap; gap: 10px; border-bottom: 0; padding: 14px 20px; }
.cmp-verzoek__tekst { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cmp-legenda { display: inline-flex; gap: 6px; }
.cmp-legenda__k { font-size: 12px; line-height: 1; padding: 4px 8px; border-radius: 4px; color: #3a3a3a; }
.cmp-legenda__k--mist { background: #f8cbad; }
.cmp-legenda__k--goed { background: #d8f0d8; }
.cmp-legenda__k--nvt { background: #f0f0f0; color: #8a8a8a; }

.cmp-flush { padding: 0 !important; }
.cmp-tabel { box-shadow: none; width: 100%; }
.cmp-tabel td { white-space: nowrap; }
.cmp-tabel tr.cmp-basis td { background: var(--surface-2); font-weight: 600; }
.cmp-tabel tr.cmp-groep td { font-weight: 600; border-top: 1px solid var(--border); }
.cmp-tabel tr.cmp-type .cmp-naam { padding-left: 32px; }
.cmp-tabel .cmp-naam a { color: var(--text); }
.cmp-tabel td.cmp-gaten { white-space: normal; }
.cmp-gat { white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; height: 22px; padding: 0 8px; margin: 2px 4px 2px 0; border-radius: 6px; font-size: 12px; background: var(--warn-bg); color: var(--warn); }
.cmp-gat--open { background: var(--crit-bg); color: var(--crit); }
.cmp-gat b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp-summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.cmp-velden { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.cmp-velden td { padding: 7px 0; border-top: 1px solid var(--border); vertical-align: top; }
.cmp-velden td.cmp-st { width: 22px; }
.cmp-velden td.cmp-vp { width: 200px; }
.cmp-velden td.cmp-vm { width: 180px; }
.cmp-oorzaak { color: var(--muted); font-size: 12.5px; }
.cmp-vb { color: var(--text-3); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.st { font-size: 12px; }
.st--ok { color: var(--ok); }
.st--deels { color: var(--warn); }
.st--open { color: var(--crit); }
.cmp-kolommen { box-shadow: none; width: 100%; }
.cmp-kolommen code { font-size: 12px; }
.bs-balk { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-3); margin: 4px 0 14px; }
.bs-balk i { display: block; height: 100%; }
.bs--ok { background: var(--ok); }
.bs--info { background: var(--info); }
.bs--warn { background: var(--warn); }
.bs--brand { background: var(--brand); }
.bs--crit { background: var(--crit); }
.bs-leg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; font-size: 13px; }
.bs-leg div { display: flex; align-items: center; gap: 8px; }
.bs-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.bs-n { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.bs-sig { font-size: 12px; color: var(--text-3); margin-top: 12px; }
@media (max-width: 800px) { .cmp-kern, .bs-leg { grid-template-columns: 1fr; } }
.card__head .inline-form { margin: 0; display: inline-flex; }


/* ── Mappen en Transformeren (views/mappings/edit.php + _transform.php) ──
   Zelfde opbouw als Ruwe feed/Preview/Selecteren: kaarten in een .stack,
   de koppeltabel in een .card--flush met bovenin de filterbalk (voorbeeldproduct
   + aantal gekoppeld) en daaronder de legenda-strook .map-legend. Transformeren:
   één kaart met de voorbeeldrij als filterbalk, de groepen als
   .card__body--details met .rules/.rule, en "Regel toevoegen" als .rule--add. */
.card.map-add--boven { margin: 0; }
.map-add--boven .seg--toggle { margin-bottom: 8px; }
.map-add__pijl svg.i { display: block; }
/* Koppeling toevoegen: pijl en knop op de hoogte van de invoervelden
   (onder de keuzeknoppen .seg--toggle van 32,75 px + 8 px en het label). */
.map-add--boven { --map-kop: calc(32.75px + 8px + var(--fld-kop)); }
.map-add--boven .map-add__pijl { align-self: start; padding-top: calc(var(--map-kop) + 9px); }
.map-add--boven .map-add__submit { align-self: start; padding-top: calc(var(--map-kop) + 1px); }
.card--flush > .map-legend { margin: 0; padding: 8px 20px; border-bottom: 1px solid var(--border); }
.filters .pv-kiezer { gap: 8px; font-size: 13px; }
.filters .search input[name=pvkey] { width: 300px; height: auto; min-height: 0; border: 0; padding: 0; font-size: 13px; box-shadow: none; }
.tf-groepen > p.fld__hint { margin: 0 0 4px; }
.tf-groepen > p.fld__hint + details, .tf-groepen > .empty + details { margin-top: 10px; }
/* Groepen als inklapbare regels (zelfde uiterlijk als .card__body--details, maar
   alleen op het eigen niveau: de formulieren binnenin hebben ook <details>). */
.tf-groepen > details + details { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.tf-groepen > details > summary { cursor: pointer; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; list-style: none; padding: 2px 0; }
.tf-groepen > details > summary::-webkit-details-marker { display: none; }
.tf-groepen > details > summary::before { content: ''; width: 0; height: 0; border-left: 5px solid var(--text-3); border-top: 4px solid transparent; border-bottom: 4px solid transparent; flex: none; transition: transform .15s; }
.tf-groepen > details[open] > summary::before { transform: rotate(90deg); }
.tf-groepen > details > summary .badge { font-weight: 500; }
.tf-groepen > details > .rules { margin: 10px 0 4px; }
.tf-override .field { margin: 0; min-width: 0; }
.rule__side form { margin: 0; }
.rule__n svg.i { color: var(--muted); }
.tf-regelsets .card__body > p { margin: 0 0 8px; }
.tf-regelsets .linked-sets { margin: 8px 0; }
.tf-regelsets .form--inline { margin-top: 8px; }

/* ── Formulierrijen: velden naast elkaar lijnen BOVENAAN uit ────────────
   Label boven, invoer eronder; alle labels op één hoogte en alle invoervelden
   op één hoogte. Een hulptekst (small/.fld__hint) onder een veld verschuift de
   buren niet meer (vroeger align-items: flex-end → het veld mét hulptekst
   schoof omhoog). Heeft de rij velden mét label, dan krijgen knoppen en andere
   bedieningselementen zonder label de hoogte van een label als marge
   (--fld-kop = regelhoogte + marge van .field > span) en staan ze op de hoogte
   van de invoervelden (--fld-hoog, 34 px). Rijen zonder labels blijven zoals ze
   waren. :is() met #nieuw-veld houdt de specificiteit boven de oudere
   per-scherm-regels. (.pos-row lijnde al bovenaan uit.) */
:root { --fld-kop: calc(12.5px * 1.5 + 5px); --fld-hoog: 34px; }
:is(.inline-fields, #nieuw-veld .inline-fields, #nieuw-veld .form--inline, .crontabel__schema .inline-fields,
    .filter-bar--row, .tf-grid, .uitzondering) { align-items: flex-start; }
.tf-override { align-items: start; }
:is(.inline-fields, #nieuw-veld .inline-fields, .crontabel__schema .inline-fields, .filter-bar--row, .tf-grid, .uitzondering, .tf-override):has(> .field > span:first-child)
    > :is(.form-actions, .row-actions, .switch, .fld--check, .kies, .search, input:not([type=hidden]), select, .field:not(:has(> span:first-child))) {
    margin-top: var(--fld-kop); min-height: var(--fld-hoog); }
:is(.inline-fields, #nieuw-veld .inline-fields, .crontabel__schema .inline-fields, .filter-bar--row, .tf-grid, .uitzondering, .tf-override):has(> .field > span:first-child)
    > :is(.form-actions, .row-actions) { display: flex; align-items: center; gap: 8px; }
:is(.inline-fields, #nieuw-veld .inline-fields, .crontabel__schema .inline-fields, .filter-bar--row, .tf-grid, .uitzondering, .tf-override):has(> .field > span:first-child)
    > :is(.btn, button) { margin-top: calc(var(--fld-kop) + (var(--fld-hoog) - 32px) / 2); }
:is(.inline-fields, #nieuw-veld .inline-fields, .crontabel__schema .inline-fields, .filter-bar--row, .tf-grid, .uitzondering, .tf-override):has(> .field > span:first-child)
    > :is(.btn--klein, .btn--small) { margin-top: calc(var(--fld-kop) + (var(--fld-hoog) - 26px) / 2); }
/* Regelset-formulier: de keuze "Kolomnaam in feed / Productveld" staat op de
   labelregel van Kolom (rechts naast het label), zodat het invoerveld op één
   lijn blijft met Bewerking en de configvelden ernaast. */
.tf-field-col:has(> .tf-kolomsoort) { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: var(--fld-kop) auto; column-gap: 10px; }
.tf-field-col:has(> .tf-kolomsoort) > span:first-child { margin: 0; }
.tf-field-col:has(> .tf-kolomsoort) > :not(span:first-child):not(.tf-kolomsoort) { grid-column: 1 / -1; }
.tf-field-col > .tf-kolomsoort { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; margin: 0; }
.tf-field-col > .tf-kolomsoort .toggle { padding: 0 8px; font-size: 11.5px; line-height: 18px; }
/* POS: configuratie-id (+ potlood) onder de titel van de samenstel-modal. */
.pos-config-id { margin-top: 2px; font-size: 12px; color: var(--text-3); }
/* configurator.css (laadt later) geeft het kopje een vaste donkere kleur + opacity: hier de modal volgen. */
.modal .pos-config-id .configurator-config-header { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; color: inherit; opacity: 1; }
.modal .pos-config-id .configurator-config-header-edit { display: inline-flex; padding: 3px; border: 0; border-radius: 4px; background: none; color: inherit; cursor: pointer; }
.modal .pos-config-id .configurator-config-header-edit:hover { background: var(--surface-2); color: var(--text); }
/* Modals beginnen op desktop naast de zijbalk (z-index 1000, boven de modal-laag),
   zoals ze al onder de suitebar beginnen — anders valt een brede modal eronder. */
@media (min-width: 769px) { body.with-suitebar .modal { left: var(--sidebar-width); } }

/* ── Automatisering-popup (conceptlijst): één regel per keuze ──────────── */
.auto-popup__paneel { width: 520px; max-width: calc(100vw - 32px); padding: 18px 20px 16px; border-radius: 10px; }
.auto-popup__paneel .auto-popup__kop { margin: 0 0 2px; font-size: 14px; font-weight: 600; }
.auto-popup__paneel p.auto-popup__sub { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }
.auto-opties { display: grid; gap: 2px; }
.auto-popup__paneel p.auto-opties__kop { margin: 0 0 4px; padding: 0 10px; font: 600 11px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.auto-popup__paneel p.auto-opties__kop--extra { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.auto-opt { display: grid; grid-template-columns: 18px 1fr; column-gap: 12px; align-items: start; margin: 0; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.auto-opt:hover { background: var(--surface-2); }
.auto-opt input[type=checkbox] { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ink); }
.auto-opt__tekst { display: grid; gap: 2px; min-width: 0; }
.auto-opt__tekst b { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.3; }
.auto-opt__tekst small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.auto-popup__paneel .auto-popup__acties { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }

/* Mappen → Instellingen: vaste regel naast Variantgroep (altijd aan, ter informatie). */
.map-vasteregel .fld--check { min-height: 34px; align-items: center; cursor: default; color: var(--text); }
.map-vasteregel .fld--check input:disabled { opacity: .7; }

/* Conceptlijst: bestaande varianten van een groep (al product) onder de concepten. */
.concepttabel tr.is-bestaand td { color: var(--muted); }
.concepttabel tr.is-bestaand td a { color: var(--muted); }

/* ── Productscherm (views/products/form.php, redesign 1-10-2026) ─────────────
   Kaart per veldgroep, velden als rij: label links (170 px), invoer rechts,
   twee kolommen. Signalen: .pv-rij--mist (rood, noodzakelijk leeg), --gat
   (oranje rand: leeg, meestal gevuld bij het type), --zelden (ingeklapt tot de
   kaart open is of de stand "Alle" aan staat). Alleen-lezen waarden in .pv-vak
   (--gedeeld = groepsveld, --berekend = formule, --slot = altijd uit feed).
   Eenheden als vakje in het veld (.input-unit, .pv-vak__eenheid). */
.pv-form.form { display: block; max-width: none; margin: 0; }
.pv-form .pv-nav { position: sticky; top: calc(var(--suitebar-height) + 6px); z-index: 40; display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin-bottom: 8px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.pv-nav__links { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }   /* 4 px: tabjes (en hun hover) staan nooit tegen elkaar */
.pv-nav__link { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 8px; flex: none; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.pv-nav__link:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.pv-nav__link.is-actief { background: var(--surface-3); color: var(--text); }
.pv-tel { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.pv-tel--crit { background: var(--crit-bg); color: var(--crit); }
.pv-tel--warn { background: var(--warn-bg); color: var(--warn); }
.search.pv-nav__zoek { flex: none; min-width: 0; width: 180px; }
.pv-form .pv-nav__zoek input { width: 100%; min-height: 0; height: auto; padding: 0; border: 0; box-shadow: none; background: none; font-size: 13px; }
.pv-form .pv-nav__modus { margin: 0; flex: none; }
.pv-kaart { scroll-margin-top: 150px; }
.pv-kaart .card__head .sub { color: var(--muted); }

/* Veldrijen */
.pv-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 4px; }
.pv-velden + .pv-velden, .pv-velden + .pv-pakketten, .pv-pakketten + .pv-velden, .pv-aanzichten + .pv-velden, .pv-velden + .pv-aanzichten, .pv-velden + .pv-som { margin-top: 10px; }
.pv-rij { min-width: 0; }
.pv-rij--breed, .pv-rij--media { grid-column: 1 / -1; }
.pv-form .pv-rij:has(.js-cond[hidden]):not(:has(.js-cond:not([hidden]))) { display: none !important; }
.pv-gat-teken { color: var(--warn); margin-left: 4px; vertical-align: -2px; }
.pv-form .pv-rij .field:has(> .kleur-dot) > select { width: calc(100% - 26px); }
.pv-form .pv-rij .field > .kleur-dot { grid-row: 1; justify-self: end; align-self: center; }
.pv-form .pv-rij .field { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 4px; margin: 0; min-height: 40px; padding: 3px 0; }
.pv-form .pv-rij .field > span:first-child { grid-column: 1; margin: 0; font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.35; display: block; }
.pv-form .pv-rij .field > :not(span:first-child) { grid-column: 2; min-width: 0; }
.pv-form .pv-rij--nodig .field > span:first-child { color: var(--text); font-weight: 600; }
.pv-form .pv-rij--breed .field:has(textarea), .pv-form .pv-rij--media .field, .pv-form .pv-rij--breed .field:has(.check-list), .pv-form .pv-rij .field:has(.pv-vak--tekstblok) { align-items: start; }
.pv-form .pv-rij .field:has(.pv-vak--tekstblok) > span:first-child { padding-top: 12px; }
.pv-form .pv-rij--breed .field:has(textarea) > span:first-child, .pv-form .pv-rij--breed .field:has(.check-list) > span:first-child { padding-top: 8px; }
.pv-form .pv-rij--media .field { grid-template-columns: minmax(0, 1fr); }
.pv-form .pv-rij.pv-rij--media .field > :not(span:first-child), .pv-form .pv-rij.pv-rij--media .field > span:first-child { grid-column: 1; }
.pv-form .pv-rij.pv-rij--media .field > span:first-child { margin-bottom: 4px; }
.pv-form .pv-rij :is(input[type=text], input[type=number], select, textarea) { width: 100%; max-width: none; }
.pv-form .pv-rij :is(input[type=text], input[type=number], select) { height: 36px; min-height: 36px; }
.pv-form .pv-rij .input-unit:not(.js-kleurcode) > input { height: 34px; min-height: 34px; }
.pv-form .pv-rij textarea:not(.js-richtext) { min-height: 36px; field-sizing: content; max-height: 220px; resize: vertical; padding-top: 7px; padding-bottom: 7px; }
.pv-form .pv-rij .src { margin-left: 4px; }
.src--groep { color: var(--info); }
.pv-form.pv--nodig .pv-rij:not(.pv-rij--nodig), .pv-form.pv--nodig .pv-zelden-knop, .pv-form.pv--nodig .pv-pakketten:not(:has(.req)) { display: none; }
.pv-form.pv--zoek [data-pv-rij]:not(.is-treffer), .pv-form.pv--zoek .pv-zelden-knop { display: none; }
.pv-zelden-knop { margin-top: 8px; font-size: 12.5px; }
.pv-pct { font-size: 11px; font-weight: 600; color: var(--warn); }

/* Eenheid-vakjes: één omlijst veld met grijs vakje voor/achter de waarde */
.pv-form .input-unit:not(.js-kleurcode) { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; background: var(--surface); }
.pv-form .input-unit:not(.js-kleurcode):focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.pv-form .input-unit:not(.js-kleurcode) > input { border: 0; border-radius: 0; box-shadow: none; background: transparent; flex: 1; min-width: 0; min-height: 34px; }
.pv-form .input-unit:not(.js-kleurcode) > .muted, .pv-form .input-unit--prijs::before { display: flex; align-items: center; padding: 0 10px; background: var(--surface-3); color: var(--muted); font-size: 12px; border-left: 1px solid var(--border); white-space: nowrap; }
.pv-form .input-unit--week::before { content: "week"; order: -1; border-left: 0; border-right: 1px solid var(--border); display: flex; align-items: center; padding: 0 10px; background: var(--surface-3); color: var(--muted); font-size: 12px; }
.pv-form .input-unit--prijs::before { content: "€"; order: -1; border-left: 0; border-right: 1px solid var(--border); }
.pv-form .multi-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; align-items: start; }
.pv-form .multi-field__row { grid-column: 1; display: flex; align-items: stretch; margin: 0 0 4px; }
.pv-form .multi-field__row:last-of-type { margin-bottom: 0; }
.pv-form .multi-field__row > input { flex: 1; min-width: 0; }
.pv-form .multi-field__row > input:has(+ .muted) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pv-form .multi-field__row > .muted { display: flex; align-items: center; padding: 0 10px; background: var(--surface-3); color: var(--muted); font-size: 12px; border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 8px 8px 0; white-space: nowrap; }
.pv-form .multi-field__row:only-of-type .multi-field__remove { display: none; }
.pv-form .multi-field__remove { margin-left: 4px; align-self: center; }
.pv-form .multi-field__row:focus-within > .muted { border-color: var(--brand); }
.pv-form .pv-rij--gat .multi-field__row > .muted { border-color: var(--warn); }
.pv-form .pv-rij--mist .multi-field__row > .muted { border-color: var(--crit); }
.pv-form .multi-field__add { grid-column: 2; grid-row: 1; font-size: 0; width: 28px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--text-3); }
.pv-form .multi-field__add::before { content: "+"; font-size: 16px; }
.pv-form .multi-field__add:hover { background: var(--surface-3); color: var(--text); }

/* Ja/nee als gesplitste schakelaar */
.pv-jn { display: flex; height: 36px; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.pv-jn__k { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; margin: 0; background: var(--surface-3); color: var(--muted); font-size: 13px; cursor: pointer; user-select: none; }
.pv-jn__k + .pv-jn__k { border-left: 1px solid var(--border-strong); }
.pv-jn__k input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pv-jn__k:has(input:checked) { background: var(--ink); color: var(--on-ink); font-weight: 600; }
.pv-jn__k.is-aan { background: var(--ink); color: var(--on-ink); font-weight: 600; }
/* Vaste stand (altijd een van beide, $jnVast) en compact in een instellingenrij (28 px, zoals .rmix). */
.rmix .pv-jn.pv-jn { height: 28px; width: 102px; border-radius: 6px; }   /* dubbele klasse: wint van :is(.pv2, …) .pv-jn verderop */
.rmix .pv-jn__k { font-size: 12.5px; }
.pv-jn--lezen { flex: 1; height: 34px; border: 0; border-radius: 0; cursor: default; }
.pv-jn--lezen .pv-jn__k { cursor: default; }
.pv-vak:has(> .pv-vak__tekst > .pv-jn--lezen) { padding: 0; overflow: hidden; }
.pv-vak__tekst:has(> .pv-jn--lezen) { display: flex; align-self: stretch; }
.pv-jn__k:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: -2px; box-shadow: inset 0 0 0 4px var(--surface); }
.pv-form .pv-rij--gat .pv-jn__k:not(:has(input:checked)) { background: var(--warn-bg); }
.pv-form .pv-rij--mist .pv-jn__k:not(:has(input:checked)) { background: var(--crit-bg); }

/* Signalen op de invoer */
.pv-form .pv-rij--gat :is(input[type=text], input[type=number], select, textarea, .input-unit:not(.js-kleurcode), .pv-jn),
.pv-form .pv-rij--gat .multi-field__row > input { border-color: var(--warn); }
.pv-form .pv-rij--gat :is(input[type=text], input[type=number], select, textarea, .input-unit:not(.js-kleurcode)),
.pv-form .pv-rij--gat .multi-field__row > input { background-color: var(--warn-bg); }
.pv-form .pv-rij--mist :is(input[type=text], input[type=number], select, textarea, .input-unit:not(.js-kleurcode), .pv-jn, .media-field),
.pv-form .pv-rij--mist .multi-field__row > input { border-color: var(--crit); }
/* Niet opgeslagen: het veld uit de foutmelding (app.js, actiebalk "Naar het eerste veld"). */
.pv-form .pv-rij--fout :is(input[type=text], input[type=number], select, textarea, .input-unit, .pv-jn, .media-field) { border-color: var(--crit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--crit) 16%, transparent); }
.pv-form .pv-rij--mist :is(input[type=text], input[type=number], select, textarea, .input-unit:not(.js-kleurcode)) { background-color: var(--crit-bg); }
.pv-form .pv-rij--mist .media-field { border: 1px dashed var(--crit); border-radius: 8px; padding: 10px; background: var(--crit-bg); }

.pv-form .pv-rij .kies { width: 100%; flex: none; }
.pv-form .pv-rij .kies--multi { min-height: 36px; box-sizing: border-box; border-color: var(--border-strong); padding: 0 8px; }
.pv-form .pv-rij .kies--multi .kies__invoer { min-height: 34px; height: 34px; }
.pv-form .pv-rij--gat .kies--multi { border-color: var(--warn); background: var(--warn-bg); }
.pv-form .pv-rij--mist .kies--multi { border-color: var(--crit); background: var(--crit-bg); }
.pv-form .pv-rij--gat :is(.pv-vak, .check-list) { border: 1px solid var(--warn); background: var(--warn-bg); }
.pv-form .pv-rij--mist :is(.pv-vak, .check-list) { border: 1px solid var(--crit); background: var(--crit-bg); }
.pv-form .pv-rij .check-list { border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; }
/* Alleen-lezen waarden */
.pv-vak { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--text); box-sizing: border-box; min-width: 0; }
.pv-vak__tekst { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-vak--gedeeld { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.pv-vak__groep { flex: none; font-size: 11.5px; font-weight: 600; color: var(--info); text-decoration: none; white-space: nowrap; }
.pv-vak__groep:hover { text-decoration: underline; }
.pv-vak--berekend { border-style: dashed; background: var(--surface-2); font-variant-numeric: tabular-nums; overflow: hidden; }
.pv-vak--voor { padding-left: 0; }
.pv-vak--na { padding-right: 0; }
/* Eenheidvakje binnen de ronde rand houden (anders steekt de grijze achtergrond over de hoeken). */
.pv-vak--na, .pv-vak--voor { overflow: hidden; }
.pv-vak__eenheid { align-self: stretch; display: flex; align-items: center; padding: 0 10px; background: var(--surface-3); color: var(--muted); font-size: 12px; border-left: 1px solid var(--border); }
.pv-vak--voor .pv-vak__eenheid:first-child { border-left: 0; border-right: 1px solid var(--border); }
.pv-vak--slot { color: var(--muted); }
.pv-vak--tekstblok { display: block; padding: 12px 14px; }
.pv-beschrijving { font-size: 13.5px; line-height: 1.55; max-height: 240px; overflow-y: auto; padding-right: 6px; }
.pv-beschrijving h2, .pv-beschrijving h3 { font-size: 14px; margin: 12px 0 4px; }
.pv-beschrijving > :first-child { margin-top: 0; }
.pv-beschrijving > :last-child { margin-bottom: 0; }
.pv-groepskop { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--info) 25%, transparent); font-size: 12px; font-weight: 600; color: var(--info); }
.pv-vak__knop { flex: none; margin-left: auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); cursor: pointer; }
.pv-vak__knop:hover { background: var(--surface-3); color: var(--text); }
.pv-vak--na .pv-vak__knop { margin-right: 2px; }
.pv-voorraad td:first-child, .pv-voorraad th:first-child { white-space: nowrap; min-width: 180px; }

/* Aanzichten van de productfoto's */
.pv-aanzichten { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.pv-aanzichten__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pv-form .media-item:has(select.media-label option[value=""]:checked) select.media-label { border-color: var(--warn); background-color: var(--warn-bg); }


/* Varianten, voorraad en pakketten */
.pv-vartabel__foto { width: 44px; }
.pv-vartabel__foto img, .pv-vartabel__geenfoto { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; display: block; background: var(--surface-3); }
.pv-kaart .table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pv-kaart .table tr.row-current td { background: var(--brand-tint-soft); }
.pv-voorraad .pv-aantal { width: 110px; margin-left: auto; }
.pv-voorraad .pv-aantal input { text-align: right; }
.pv-voorraad tfoot td { border-bottom: 0; }
.pv-pakkettabel input { width: 90px; text-align: right; }
.pv-pakkettabel td:first-child { white-space: nowrap; }
.pv-kaart .table th { text-transform: none; letter-spacing: 0; font-size: 12px; }
.pv-form .fk-uitklap { margin-top: 10px; }
.pv-form .fk-uitklap > summary { cursor: pointer; font-size: 12.5px; color: var(--text); }
.pv-form .fk-uitklap[open] > summary { margin-bottom: 8px; }
.pv-pakkettabel input[readonly] { border-color: transparent; background: none; box-shadow: none; }
.pv-pakketten__acties { display: flex; gap: 14px; margin-top: 6px; font-size: 12.5px; }
.pv-voet, .pv-kaart .card__body p.pv-voet { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 0; font-size: 12px; line-height: 1.45; }
.pv-voet a { flex: none; }
.pv-leeg { margin: 0; }
.pv-som { margin-top: 10px; display: flex; gap: 24px; flex-wrap: wrap; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; }

/* Zijkolom */
.pv-zij__body { display: flex; flex-direction: column; gap: 10px; }
.pv-zij__body > .field { margin: 0; }
.pv-zij .dl-kv dd { font-weight: 400; }
.pv-poort, .pv-poort__lijst { display: flex; flex-direction: column; gap: 4px; }
.pv-poort__kop { font-size: 13px; font-weight: 600; }
.pv-poort__item { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 3px 0; font: inherit; font-size: 13px; color: var(--text); text-align: left; cursor: pointer; }
.pv-poort__item svg.i { color: var(--crit); flex: none; }
.pv-poort__item:hover span { text-decoration: underline; }
.pv-ok, .pv-gaten { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; }
.pv-ok svg.i { color: var(--ok); flex: none; margin-top: 2px; }
.pv-gaten svg.i { color: var(--warn); flex: none; margin-top: 2px; }
.pv-klein { font-size: 13px; margin: 0; }
.pv-kanaal { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.pv-kanaal + .pv-kanaal { padding-top: 8px; border-top: 1px solid var(--border); }
.pv-kanaal__kop, .pv-kanaal__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pv-kanaal__meta { font-size: 12px; }
.pv-onder { margin-top: 16px; }
.pv-poort__n { margin-left: auto; font-size: 12px; }
a.pv-poort__item { text-decoration: none; }
/* Variantgroep (views/products/edit_group.php): verschil per variant, variantacties, assen. */
.pv-form .media-item { position: relative; }
.pv-variantfoto { position: absolute; left: 6px; top: 6px; z-index: 1; font-size: 10.5px; font-weight: 600; line-height: 1.3; padding: 2px 6px; border-radius: 4px; background: rgba(35,35,35,.8); color: #fff; pointer-events: none; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-vartabel .nowrap { white-space: nowrap; }
.pv-vartabel th, .pv-vartabel td { padding-left: 8px; padding-right: 8px; }   /* compact: 9 kolommen naast de zijkolom */
.pv-vartabel__titel { min-width: 140px; }   /* titel op één regel met … (titelcel, tooltip); SKU nowrap */
.pv-verschil { margin: 6px 0 0; font-size: 12.5px; }
.pv-verschil > summary { cursor: pointer; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.pv-verschil > summary svg.i { color: var(--warn); }
.pv-verschil ul { margin: 6px 0 0; padding: 8px 10px; list-style: none; display: flex; flex-direction: column; gap: 6px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.pv-verschil li { display: flex; flex-direction: column; gap: 1px; }
.pv-mist { display: inline-flex; align-items: center; gap: 4px; color: var(--crit); white-space: nowrap; font-size: 12.5px; }
.pv-mist svg.i, .pv-compleet svg.i { flex: none; }
.pv-compleet { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); white-space: nowrap; font-size: 12.5px; }
.pv-kaart .card__body > .pv-gaten { margin-top: 10px; }
.pv-varacties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: flex-start; }
.pv-uitklap > summary { list-style: none; cursor: pointer; }
.pv-uitklap > summary::-webkit-details-marker { display: none; }
.pv-varacties .pv-uitklap[open] { flex: 1 1 100%; order: 1; }
.pv-uitklap__paneel { margin-top: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pv-uitklap--zij .pv-uitklap__paneel { padding: 10px; }
.pv-uitklap__paneel .search { width: 100%; max-width: 420px; }
.pv-zoekresultaten { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pv-zoekresultaten:empty { display: none; }
.pv-statustelling { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-alleop { display: flex; align-items: flex-end; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.pv-alleop .field { margin: 0; flex: 1; }
.pv-alleop .field > span { font-size: 12px; color: var(--muted); }
.pv-as { display: flex; flex-direction: column; gap: 6px; }
.pv-as + .pv-as { padding-top: 8px; border-top: 1px solid var(--border); }
.pv-as__kop { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.pv-as__kop svg.i { color: var(--muted); }
.pv-as__n { margin-left: auto; font-size: 12px; }
.pv-as__waarden { display: flex; flex-wrap: wrap; gap: 4px; }
.pv-asopties { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; width: 100%; }
.pv-asoptie { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 0; }
.link-btn--danger { color: var(--crit); align-self: flex-start; }
/* Leverancierspagina (views/suppliers/show.php): navigatie zonder zoeken/standen, adressen en contacten als blokken. */
.lev-nav { margin-bottom: 16px; }
#lev-form { display: flex; flex-direction: column; gap: 16px; }
/* Tabbladen: met JS staat er één paneel tegelijk (data-tab-paneel); zonder JS gewoon alles onder elkaar. */
.lev-cols.is-tabs [data-tab-paneel]:not(.is-actief) { display: none; }
.lev-cols.is-tabs #lev-form:not(:has(> .is-actief)) { display: none; }
.lev-nav .pv-nav__link.is-actief { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.lev-cols .danger-zone { margin-top: 4px; }
.lev-lijst { display: flex; flex-direction: column; gap: 10px; }
.lev-lijst:empty { display: none; }
.lev-blok { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); padding: 10px 12px 12px; }
.lev-blok__kop { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lev-blok__kop select { width: auto; min-width: 150px; }
.lev-blok__titel { font-size: 13px; }
.lev-blok__primair { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin: 0; }
.lev-blok__kop .js-lev-weg { margin-left: auto; }
.lev-blok__velden { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }
.lev-blok__velden .field { margin: 0; }
.lev-blok__velden .field > span { font-size: 12px; color: var(--muted); }
.lev-blok__breed { grid-column: span 2; }
.lev-blok__vol { grid-column: 1 / -1; }
/* Magazijnpagina, Merken: keuze Alle / Alleen gekozen merken (seg met radio's) en de keuzelijst eronder. */
.mag-merken__modus { margin: 0; align-self: start; width: max-content; }
.mag-merken__keuze { max-width: 520px; }
/* Leverancierspagina met actiebalk (.pv2.lev-pagina, 12-10-2026): geen zijkolom, de kaarten vullen de breedte van de balk. */
.pv2 .pv-cols.lev-cols { grid-template-columns: minmax(0, 1fr); }
.pv2.lev-pagina .lev-nav { margin-top: 4px; }
/* Uploadvak (partials/uploadvak.php, docs/ui/componenten/uploadvak.md): één bestand slepen of kiezen; leeg =
   gestippeld, slepen/hover = merkkleur, gekozen = één groene rand met vinkje. */
.uploadvak { position: relative; display: flex; align-items: center; gap: 14px; padding: 22px 20px; border: 1.5px dashed var(--border-strong);
    border-radius: 12px; background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.uploadvak:hover, .uploadvak.is-sleep { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, transparent); }
.uploadvak:has(.uploadvak__invoer:focus-visible) { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.uploadvak.is-gekozen:has(.uploadvak__invoer) {   /* één kleur: wint ook van hover en focus */
     border-style: solid; border-color: var(--ok); background: color-mix(in srgb, var(--ok) 6%, transparent); box-shadow: none; }
.uploadvak__invoer { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.uploadvak__icoon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-dark); }
.uploadvak__icoon svg.i { width: 20px; height: 20px; }
.uploadvak.is-gekozen .uploadvak__icoon { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.uploadvak__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.uploadvak__tekst strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Keuzetegels (partials/keuzetegels.php, docs/ui/componenten/keuzetegels.md): meerdere keuzes als tegels in twee
   kolommen, kop met teller en Alles / Niets; gekozen = oranje rand en zachte merkkleur. */
.keuzetegels { display: flex; flex-direction: column; gap: 10px; }
.keuzetegels__kop { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.keuzetegels__kop .spacer { flex: 1; }
.keuzetegels__lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.keuzetegel { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border);
    border-radius: 10px; background: var(--surface-2); cursor: pointer; font-size: 13px; transition: border-color .15s, background .15s; }
.keuzetegel:hover { border-color: var(--border-strong); }
.keuzetegel:has(input:checked) { border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.keuzetegel:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.keuzetegel input { flex: none; margin: 0; accent-color: var(--brand); }
.keuzetegel input:focus, .keuzetegel input:focus-visible { outline: none; box-shadow: none; }   /* de tegel toont de focus, geen extra vierkant om het vinkje */
.keuzetegel__naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keuzetegel__tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.keuzetegel__sub { font-size: 12px; line-height: 1.35; color: var(--muted); }
.keuzetegel--breed { grid-column: 1 / -1; }
.keuzetegel--uit { cursor: not-allowed; border-style: dashed; background: transparent; color: var(--text-3); }
.keuzetegel--uit:hover { border-color: var(--border); }
@media (max-width: 520px) { .keuzetegels__lijst { grid-template-columns: minmax(0, 1fr); } }
/* Afhaalvoorbeeld bij de afhaalregels van een magazijn (app.js). */
.lev-afhaalvb, :is(.pv2, .mag-form, .lev-blok__velden) p.lev-afhaalvb { margin: -2px 0 0; font-size: 12px; color: var(--muted); }
/* Ingevuld formulier inlezen (venster op de leverancierspagina): per onderdeel een kopregel, nieuw = uit de PDF. */
.lev-inlees { display: flex; flex-direction: column; gap: 12px; }
.lev-inlees__tabel td:first-child, .lev-inlees__tabel th:first-child { width: 28px; }
.lev-inlees__tabel td:nth-child(2) { min-width: 190px; }
.lev-inlees__tabel td:nth-child(3), .lev-inlees__tabel td:nth-child(4) { overflow-wrap: anywhere; }
.lev-inlees__deel td { padding-top: 14px; font-size: 12px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.lev-inlees__nieuw { font-weight: 600; }
.lev-inlees__kop { margin: 4px 0 0; font-size: 13px; }
.lev-inlees__info { margin: 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.lev-inlees__melding { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--warn-bg); font-size: 13px; }
/* Tabblad Sluitingen: de regel die in het formulier staat om te wijzigen. */
.lev-cols tr.is-bewerk > td { background: var(--brand-tint); }
.lev-cols td.act { white-space: nowrap; }
.lev-cols td.act > form { display: inline-block; margin: 0 0 0 4px; }
/* Adresblokken (showroom, magazijn) in- en uitklappen: de kop is een knop met chevron, titel en samenvatting
   (adres · openingstijden); dicht = alleen de kop. */
.lev-blok__klap { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lev-blok__klap:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.lev-blok__chev { flex: none; color: var(--text-3); transition: transform .15s ease; }
.lev-blok__klap[aria-expanded="true"] .lev-blok__chev { transform: rotate(90deg); }
.lev-blok__samenvatting { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-3); }
.lev-blok.is-dicht .lev-blok__inhoud { display: none; }
.lev-blok__klap--vast { cursor: default; }
.lev-blok--geerfd { background: var(--surface-2); }
.lev-blok--geerfd .lev-blok__kop { margin-bottom: 0; }
/* Lijst met blokken van de leverancier erboven (showroom, contactpersonen) op een merkpagina. */
.lev-lijst--geerfd { margin-top: 10px; }
.lev-blok.is-dicht .lev-blok__kop { margin-bottom: 0; }
.lev-showroom { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }   /* showroomvelden onder een adres met soort Showroom */
/* Openingstijden per dag (showroom): dag · open ja/nee · van–tot; een dichte dag is grijs. */
.lev-tijden { display: grid; gap: 6px; max-width: 520px; }
.lev-tijden__dag { display: grid; grid-template-columns: 96px max-content 1fr; align-items: center; gap: 12px; }
.lev-tijden__naam { font-size: 13px; color: var(--text); }
.lev-tijden__van-tot { display: inline-flex; align-items: center; gap: 8px; }
.lev-tijden__van-tot input[type=time] { width: 110px; }
.lev-tijden__tot { font-size: 12px; color: var(--text-3); }
.lev-tijden__dag.is-dicht .lev-tijden__van-tot { opacity: .4; }
.mag-form { container-type: inline-size; }   /* magazijnpagina: de container-query's hieronder werken ook daar (zonder .pv-hoofd) */
@container (max-width: 520px) { .lev-tijden__dag { grid-template-columns: 1fr max-content; } .lev-tijden__van-tot { grid-column: 1 / -1; } .lev-tijden__dag.is-dicht .lev-tijden__van-tot { display: none; } }
@container (max-width: 760px) { .lev-blok__velden { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lev-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
/* Magazijnpagina (views/suppliers/magazijn.php): kaarten over de volle breedte, zoals de leverancierspagina. */
form.mag-form { max-width: none; margin: 16px 0 0; }
.lev-sectie + .lev-sectie { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); scroll-margin-top: 80px; }
#sec-mag { scroll-margin-top: 80px; }
.lev-sectie__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lev-sectie__kop h3 { font-size: 14px; margin: 0; display: flex; align-items: center; gap: 6px; }
.lev-sectie__kop p { margin: 2px 0 0; font-size: 12.5px; }
.lev-leeg { margin: 0; padding: 14px; border: 1px dashed var(--border-strong); border-radius: 10px; color: var(--muted); font-size: 13px; text-align: center; }
.lev-sectie:has(.js-lev-rij) .lev-leeg { display: none; }
.lev-magazijn-bij { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: 10px; }
.lev-lijst__sub { display: block; max-width: 260px; font-size: 12px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.lev-lijsttabel td { vertical-align: middle; }
.lev-filters .filters__select { width: auto; min-width: 0; max-width: 140px; }
.lev-filters .search { min-width: 150px; flex: 0 1 160px; }
.lev-filters > .spacer { flex: 1 1 0; min-width: 0; }
.chip--voorstel { border-style: dashed; background: transparent; color: var(--muted); }
.lev-chips { display: inline-flex; gap: 4px; align-items: center; max-width: 100%; overflow: hidden; }
/* .table--vast maakt spans in cellen inline-block (afkappen); de chiprij moet flex blijven voor de tussenruimte. */
.table--vast:not(.table--vrij) td > span.lev-chips:not(.badge) { display: inline-flex; }
/* Naam en subregel onder elkaar (.table--vast maakt spans inline-block: dan stonden ze naast
   elkaar en werd de kolom twee keer zo breed) en lange namen afkappen. */
.table--vast.lev-lijsttabel:not(.table--vrij) td[data-col="0"] > a.row:not(.btn) { max-width: 260px; }
.table--vast.lev-lijsttabel:not(.table--vrij) td[data-col="0"] > span.lev-lijst__sub:not(.badge) { display: block; max-width: 260px; }
.lev-eigen { margin-top: 20px; }
.lev-eigen .table { width: 100%; }
.lev-eigen .table td:last-child { text-align: right; white-space: nowrap; }
.lev-eigen form.form--inline { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.lev-eigen form.form--inline .field { flex: 1 1 320px; max-width: 460px; margin: 0; }
.lev-eigen form.form--inline .form-actions { margin: 0; padding: 0; border: 0; background: none; }
.lev-shopifysync { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.lev-sectie--ruim { margin-top: 18px; }
.lev-beleidtabel { width: 100%; }
.lev-beleidtabel th:first-child { width: 34%; }
.lev-beleidtabel select { max-width: 380px; width: 100%; }
.lev-beleidtabel tr.is-afwijkend td { background: color-mix(in srgb, var(--info) 6%, transparent); }
.lev-beleidtabel td.td-acties { text-align: right; }
.lev-beleidtabel td.td-acties form { display: inline; margin: 0; }
.lev-formvoet { display: flex; justify-content: flex-end; margin-top: 10px; }
.lev-toevoegrij { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: 10px; }
.lev-toevoegrij .field { margin: 0; flex: 1 1 220px; }
.lev-toevoegrij .field > span { font-size: 12px; color: var(--muted); }
.lev-blok--magazijn { background: var(--surface); }
.lev-blok--magazijn.is-uit { opacity: .7; }
.lev-blok--magazijn .lev-blok__kop { flex-wrap: wrap; gap: 8px 10px; }
.lev-blok__knoppen { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.lev-magazijn-bij .field { margin: 0; flex: 1 1 280px; max-width: 460px; }
.lev-kaartje { display: flex; flex-direction: column; gap: 2px; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.lev-kaartje a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lev-merken { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.lev-merktabel { width: 100%; }
.lev-waar { white-space: nowrap; }
.lev-waar + .lev-waar::before { content: "·"; margin: 0 6px; color: var(--muted); }
.lev-merken + .lev-merken { margin-top: 14px; }
.lev-merknaam { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.lev-merktabel th:first-child { width: 22%; }
.lev-merktabel th.num { width: 110px; }
.lev-merktabel td.td-acties { text-align: right; white-space: nowrap; }
.lev-merkbij { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.lev-merkbij .field { margin: 0; min-width: 240px; flex: 0 1 320px; }
.lev-merkbij .field > span { font-size: 12px; color: var(--muted); }
.lev-voorstel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lev-voorstel__chip { cursor: pointer; }
.lev-voorstel__chip:hover { border-color: var(--brand); }
.lev-voorstel__chip .muted { font-size: 11px; }
.lev-leegmelding { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--info-bg); font-size: 13px; }
.lev-leegmelding svg.i { color: var(--info); flex: none; margin-top: 2px; }
/* Merken als eigen rij (migratie 146): merkrij in de lijst, erven op de merkpagina. */
.lev-lijsttabel tr.lev-merkrij td { background: var(--surface-2); }
.lev-lijsttabel tr.lev-merkrij td.lid { padding-left: 32px; }
.lev-geerfd { display: block; margin-top: 3px; font-size: 12px; color: var(--text-3); }
/* Ja/nee die van de leverancier erft: "Van … : Ja/Nee" naast de schakelaar i.p.v. eronder (rij blijft even hoog). */
.lev-jn-erf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lev-jn-erf .lev-geerfd { margin-top: 0; }
.lev-geerfd-lijst { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: 10px; }
.lev-geerfd-lijst p { margin: 0 0 6px; }
.lev-geerfd-lijst ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.lev-geerfd-lijst li + li { margin-top: 3px; }
.lev-sectie .table-scroll:has(> .lev-merkrijtabel) { margin-bottom: 14px; }
/* Leverancier met merken: links naar de merken (Adressen, Contactpersonen) als chips. */
/* Overzicht Sluitingen: Effect en Notitie mogen afbreken, zodat Status bij 1440 px in beeld blijft. */
#sluittabel td:is([data-col="4"], [data-col="5"]) { white-space: normal; min-width: 160px; }
.lev-merklinks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 12px; }
.lev-merklinks a.chip { text-decoration: none; color: var(--text); }
.lev-merklinks a.chip:hover { border-color: var(--brand); }
.lev-sectie > form.lev-merkbij + form.lev-merkbij { margin-top: 12px; }
.pv-cols { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
@media (max-width: 1100px) { .pv-cols { grid-template-columns: minmax(0, 1fr); } }
.pv-hoofd { container-type: inline-size; }
@container (max-width: 760px) { .pv-velden { grid-template-columns: minmax(0, 1fr); } }
.pv-cols:not(:has(> aside)) { grid-template-columns: minmax(0, 1fr); }
.pv-velden > .pv-subkop { grid-column: 1 / -1; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding-top: 10px; }
.pv-rij.is-gemarkeerd { animation: pv-markeer 1.6s ease-out; border-radius: 8px; }
.pv2 .card.is-gemarkeerd { animation: pv-markeer 1.6s ease-out; }   /* menu-item in de actiebalk → kaart (bv. Bundel opheffen…) */
@keyframes pv-markeer { from { box-shadow: 0 0 0 3px var(--brand-ring); } to { box-shadow: 0 0 0 3px transparent; } }
@media (max-width: 1100px) { .pv-form .pv-nav { flex-wrap: wrap; } }
/* Productscherm op een telefoon: navigatie als één scrollregel met zoeken + stand eronder,
   geen legenda, en het label boven het veld i.p.v. ernaast. */
@media (max-width: 720px) {
    .pv-form .pv-nav { position: static; flex-wrap: wrap; gap: 6px; padding: 6px; }   /* niet plakken: de actiebalk plakt al onder de suitebar */
    .pv-kaart { scroll-margin-top: calc(var(--suitebar-height) + 64px); }   /* onder suitebar én de plakkende actiebalk */
    .pv-form .pv-nav__links { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .pv-form .pv-nav__links::-webkit-scrollbar { display: none; }
    .pv-form .pv-nav__zoek { flex: 1 1 auto; width: auto; }
    .pv-form .pv-kaart .pv-rij .field { grid-template-columns: minmax(0, 1fr); }
    .pv-form .pv-kaart .pv-rij .field > span:first-child,
    .pv-form .pv-kaart .pv-rij .field > :not(span:first-child) { grid-column: 1; }
    .pv-form .pv-kaart .pv-rij .field > span:first-child { padding-top: 0; }
    .pv-kaart .card__body, .pv-kaart .card__head { padding-left: 14px; padding-right: 14px; }
    .pv-form .card .media-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .pv-form .card .media-item select.media-label { font-size: 11px; padding-left: 6px; }
}

/* Productenlijst (views/products/index.php, lijststandaard 2-10-2026). */
/* Hoofdbalk: zoeken, Type, Leverancier, Status, Sorteren + knoppen passen naast de kolomkiezer vanaf ±1440 px. */
.pl-filters .filters__select { width: auto; min-width: 0; max-width: 160px; }
.pl-filters .search { min-width: 180px; flex: 0 1 200px; }
.pl-filters .kies { width: 130px; }
#producttabel { min-width: max(var(--pl-min, 1000px), var(--pl-nodig, 0px)); }   /* smaller = horizontaal scrollen; met veldkolommen breder (--pl-min); Titel ≥ 290 px tot 1440 px (--pl-nodig, app.js) */
/* Titel: lange namen over hooguit twee regels i.p.v. afgekapt op één (volledige naam in de tooltip). */
@media (min-width: 701px) {
    :is(#producttabel, #aanvultabel) td:first-child .titelcel__tekst > a.row, :is(#producttabel, #aanvultabel) td:first-child .titelcel__naam { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
    :is(#producttabel, #aanvultabel) td:first-child .titelcel { width: 100%; }
    /* Soort-iconen (variant, bundel, zit in bundel, configurator) rechts in de titelkolom: foto + naam links,
       de kolombreedte bepaalt de afstand (besluit Kjelt 13-10-2026, rustiger). */
    :is(#producttabel, #aanvultabel) td:first-child .titelcel__tekst { flex: 1 1 auto; }   /* ook Producten aanvullen (13-10-2026) */
}
/* Rechts uitgelijnde koppen (getallen) houden 12 px links vrij: "VOORRAAD" plakte tegen "MARGE %". */
#producttabel th.sorteer.num > a { padding-left: 12px; }
#producttabel th[data-col="4"] { width: 96px !important; }
/* Tot 1440 px: Type, SKU, Marge %, Status, Bijgewerkt en de actiekolom compacter, zodat Titel ruimte houdt
   (pl-compact zet app.js, alleen zolang er geen eigen kolombreedtes zijn); ≥ 1440 ongewijzigd. */
#producttabel.pl-compact th[data-col="1"] { width: 100px !important; }
#producttabel.pl-compact th[data-col="2"] { width: 96px !important; }
#producttabel.pl-compact th[data-col="7"] { width: 92px !important; }
#producttabel.pl-compact th[data-col="3"] { width: 112px !important; }
#producttabel.pl-compact th[data-col="5"] { width: 100px !important; }
#producttabel.pl-compact th[data-col="6"] { width: 100px !important; }
#producttabel.pl-compact th.act { width: 96px !important; }
.pl-filters > .spacer { flex: 1 1 0; min-width: 0; }
.pl-filters > .filters__form { flex: 0 1 auto; flex-wrap: nowrap; }
@media (max-width: 1100px) { .pl-filters > .filters__form { flex-wrap: wrap; } }
.card--flush > .pl-meer { margin: 0; padding: 8px 20px 10px; border-top: 0; border-bottom: 1px solid var(--border); }
.pl-meer__rij { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pl-meer__rij .filters__select { width: auto; max-width: 240px; }
.pl-balk { flex-wrap: wrap; gap: 8px 10px; }
.pl-balk__label { font-size: 12px; color: var(--muted); }
.pl-balk .seg > a { padding: 3px 10px; font-size: 12px; }
.pl-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text); margin: 0; }
.pl-check input, .lev-blok__primair input, .pv-asoptie input { accent-color: var(--ink); width: 14px; height: 14px; margin: 0; }
.pl-statussen { display: inline-flex; gap: 4px; }
#producttabel .pl-marge, #producttabel .pl-getal { font-variant-numeric: tabular-nums; white-space: nowrap; }
#producttabel .pl-marge.is-neg, #producttabel .pl-getal.is-neg { color: var(--crit); }
.pl-filters .link-btn, .lev-filters .link-btn { white-space: nowrap; }

/* Nieuw product: producttype kiezen (views/products/choose_type.php). */
.tk { display: flex; flex-direction: column; gap: 16px; }
.tk-zoek { width: 100%; height: 44px; font-size: 15px; }
.tk-zoek input { font-size: 15px; }
.tk-resultaten { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; max-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.tk-resultaten li + li { border-top: 1px solid var(--border); }
.tk-treffer { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; color: var(--text); text-decoration: none; }
.tk-treffer:hover, .tk-resultaten li.is-actief .tk-treffer { background: var(--brand-tint); text-decoration: none; }
.tk-pad { font-size: 12.5px; }
.tk-treffer .tk-n { margin-left: auto; font-size: 12px; white-space: nowrap; }
.tk-geen { margin-top: 10px; }
.tk-populair { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.tk-chip { text-decoration: none; height: 28px; }
.tk-chip:hover { border-color: var(--brand); text-decoration: none; }
.tk-chip .muted { font-size: 11px; }
.tk-kolommen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 380px; }
.tk-kolom { max-height: 520px; overflow-y: auto; border-left: 1px solid var(--border); display: flex; flex-direction: column; }
.tk-kolom:first-child { border-left: 0; }
.tk-kolom__kop { position: sticky; top: 0; z-index: 1; padding: 8px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); font: 600 10.5px/1.4 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tk-kolom__leeg { margin: 0; padding: 12px 14px; font-size: 12.5px; color: var(--text-3); }
.tk-rij { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 14px; border: 0; background: none; text-align: left; font: inherit; font-size: 13.5px; color: var(--text); text-decoration: none; cursor: pointer; }
.tk-rij:hover { background: var(--surface-2); text-decoration: none; }
a.tk-rij:hover .tk-rij__naam { color: var(--brand-dark); text-decoration: underline; }
.tk-rij.is-open { background: var(--brand-tint); }
.tk-rij--groep .tk-rij__naam { font-weight: 500; }
.tk-rij__naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-rij__n { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tk-rij svg.i { color: var(--text-3); flex: none; }
@media (max-width: 760px) { .tk-kolommen { grid-template-columns: 1fr; } .tk-kolom { border-left: 0; border-top: 1px solid var(--border); max-height: none; } }
#producttabel td.num .muted { font-size: 12px; }
/* Bulkacties (Selectiebalk): vinkje vóór de naam, alle vinkjes in één lijn (leden niet extra inspringen,
   het ↳-pijltje schuift in). */
#producttabel .pl-kies-ruimte { flex: none; width: 18px; }   /* vinkjes zelf: blok Vinkje */
/* Kopvinkje (Selectiebalk: alles op deze pagina) op één regel vóór "Titel", in lijn met de rijvinkjes. */
@media (min-width: 721px) {
    :is(#producttabel, .table--kies) thead th:first-child { white-space: nowrap; }
    :is(#producttabel, .table--kies) thead th:first-child .vink-vak { display: inline-flex; vertical-align: middle; margin: 0 12px 0 20px; }
    :is(#producttabel, .table--kies) thead th:first-child .vink-vak + a { display: inline-flex; vertical-align: middle; }
}
:is(#producttabel, .table--kies).pl-met-kies tr.vg-member td.lid { padding-left: 20px; }
:is(#producttabel, .table--kies).pl-met-kies tr.vg-member .pl-lid-pijl { margin-left: 8px; }
/* ── Productvelden-tabellen (overzicht /product-fields en de producttypepagina) ──
   Rijsoorten: tr.grp.pvo-grp (veldgroep) en tr.pvo-veld; --pvo-d = inspringen. Kolommen hebben een
   vaste breedte; de eerste kolom krijgt de rest. .pvo__cel kapt af binnen zijn cel
   (max-width 0 + min-width 100%: telt niet mee in de kolombreedte), .pvo__knip is de
   tekst die met … afkapt. */
.card--flush .pvotabel tr.pvo-veld td:first-child,
.card--flush .pvotabel tr.pvo-grp[data-ouder] td:first-child { padding-left: calc(41px + var(--pvo-d, 0) * 16px); }
.pvotabel .pvo__cel { display: flex; align-items: center; gap: 6px; max-width: 0; min-width: 100%; overflow: hidden; }
.pvotabel .pvo__cel > * { flex: none; }
.pvotabel .pvo__cel > .pvo__knip, .pvotabel .pvo__cel > .pvo__meta { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvotabel .pvo__meta { display: flex; align-items: center; gap: 6px; }
.pvotabel .pvo__naam { font-size: 13px; font-weight: 600; color: var(--text); }
.pvotabel .pvo__tel { font-size: 12px; font-weight: 400; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pvotabel tr.pvo-veld td, .pvotabel.table--plak tr.pvo-veld td:first-child { background: var(--surface-2); }
.pvotabel tr.pvo-veld:hover td, .pvotabel.table--plak tbody tr.pvo-veld:hover td:first-child { background: var(--surface-3); }
.pvotabel tr.pvo-grp .pvo__tel { margin-left: 2px; }
.pvotabel .pvo__label { font-weight: 500; }
.pvotabel .pvo__label svg.i { color: var(--text-3); }
.pvotabel .pvo__bij { font-size: 12px; color: var(--text-3); }
.pvotabel td[data-col="var"], .pvotabel td[data-col="soort"] { color: var(--muted); }
.pvotabel .pvo__vul { display: flex; align-items: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.pvotabel .pvo__meter { width: 56px; flex: none; }
.pvotabel .pvo__meter--neutraal { background: var(--text-3); }
.pvotabel td.act { width: 64px; }
.pvotabel td.act a { font-size: 12.5px; }
/* Productvelden-matrix (/product-fields?weergave=matrix): rijen = velden, kolommen =
   categorieën (klik = een niveau dieper). Cel td.mx-cel--n (verplicht), --deels (voor een
   deel van de types, "3/7"), --o (optioneel), --auto (berekend), --niet (geldt niet, leeg);
   .mx-sw = hetzelfde als staaltje in de legenda. */
.mxtabel th.mx-kol { min-width: 64px; padding: 8px 6px; text-align: center; vertical-align: bottom; white-space: normal; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--text); }
.mxtabel th.mx-kol small { display: block; min-height: 13px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.mxtabel th.mx-kol a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.mxtabel th.mx-kol a:hover { color: var(--brand-dark); text-decoration-color: currentColor; }

/* Gekleurde cellen zoals de Excel-matrix: N verplicht (rode tint), deels "3/7" (amber),
   O optioneel (groene tint), leeg = geldt niet. Kleur én letter, nooit alleen kleur. */
.mxtabel td.mx-cel { text-align: center; padding: 5px 4px; border-left: 1px solid var(--surface); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: default; }
.mxtabel tbody tr:not(.grp) td.mx-cel--n, .mx-sw.mx-cel--n { background: var(--crit-bg); color: var(--crit); }
.mxtabel tbody tr:not(.grp) td.mx-cel--deels, .mx-sw.mx-cel--deels { background: var(--warn-bg); color: var(--warn); }
.mxtabel tbody tr:not(.grp) td.mx-cel--o, .mx-sw.mx-cel--o { background: var(--ok-bg); color: var(--ok); font-weight: 500; }
.mxtabel tbody tr:not(.grp) td.mx-cel--auto, .mx-sw.mx-cel--auto { background: var(--info-bg); color: var(--info); font-weight: 500; }
.mxtabel tbody tr:not(.grp) td.mx-cel--niet, .mx-sw.mx-cel--niet { background: var(--surface); }
.mxtabel tbody tr:not(.grp):hover td.mx-cel { filter: brightness(.97); }
.mx-sw { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 18px; padding: 0 5px; margin-left: 8px; border-radius: 4px; font-size: 11px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--border); }
.mxtabel tbody tr:not(.grp):hover td { background: var(--surface-2); }
.mxtabel .mx-veld { display: flex; align-items: center; gap: 6px; min-width: 190px; max-width: 300px; }
.mxtabel .mx-veld a { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.mxtabel .mx-veld a:hover { color: var(--brand-dark); }
.mxtabel .mx-veld svg.i, .mx-tel { color: var(--text-3); }
.mx-tel { font-size: 12px; font-weight: 400; }
.mxtabel .mx-voorwaarde { color: var(--text-3); cursor: help; }   /* veld met een voorwaarde (bv. alleen als Vorm = Rond) */
.mx-pad { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.mx-pad a { color: var(--brand-dark); }
.mx-pad b { font-weight: 600; color: var(--text); }
.mx-legenda { display: inline-flex; align-items: center; gap: 6px; margin-left: 16px; font-size: 12px; color: var(--muted); }
@media (max-width: 900px) { .mx-legenda { display: none; } }
@media (max-width: 700px) {
    .card--flush .mxtabel td:first-child, .card--flush .mxtabel th:first-child { padding-left: 12px; }
    .mxtabel .mx-veld { min-width: 120px; max-width: 140px; font-size: 12.5px; }
    .mxtabel th.mx-kol { min-width: 56px; }
}

/* Niveaukolommen (hoofdgroep, categorie, type): gevulde pil = op dit niveau ingesteld,
   omlijnde pil .badge--geerfd = geërfd van een hoger niveau (zelfde kleur, zonder vlak),
   .pvo-lvl--niet = geldt hier niet. Donker: style.css kleurt .badge met html[data-theme] —
   daarom hier dezelfde specificiteit. */
.badge.badge--geerfd, html[data-theme="dark"] .badge.badge--geerfd { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent); }
.badge.badge--geerfd:not(.badge--req), html[data-theme="dark"] .badge.badge--geerfd:not(.badge--req) { color: var(--muted); }
.pvo-lvl { font-size: 12px; color: var(--muted); }
.pvo-lvl--niet { color: var(--text-3); }
.pvotabel th[data-col^="l"] { overflow: hidden; text-overflow: ellipsis; }

/* Productvelden — weergave Velden (.pvolijst): thema (tr.grp) → toepassing (tr.pvo-sub,
   "Afmetingen · Zitmeubel") → veld. Eis = pil Verplicht/Optioneel + waar de eis staat. */
.pvolijst tr.pvo-sub td { background: var(--surface-2); padding: 6px 12px 6px 32px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); }
.card--flush .pvolijst tr.pvo-sub td:first-child { padding-left: 32px; }
.pvolijst tr.pvo-sub b { font-weight: 600; color: var(--text); }
.pvolijst tr.pvo-sub .pvo__tel { margin-left: 4px; }
/* Eerste kolom Vast (slotje): smal, iets donkerder vlak, sorteer- en filterbaar (2-10-2026). */
.card--flush .pvolijst.table--plak th.pvo-vast, .card--flush .pvolijst.table--plak td.pvo-vast { background: var(--surface-3); text-align: center; padding-left: 0; padding-right: 0; color: var(--muted); }
.card--flush .pvolijst.table--plak tbody tr:hover td.pvo-vast { background: var(--surface-3); }
.card--flush .pvolijst th.pvo-vast button { justify-content: center; width: 100%; }
.card--flush .pvolijst td.pvo-vast svg.i { vertical-align: middle; }
.card--flush .pvolijst tr.pvo-lijstrij td.pvo__veld { padding-left: 16px; }
.pvolijst .veld-slot.veld-slot--mobiel { display: none; }
.card--flush .pvolijst { table-layout: fixed; }
/* Vaste kolombreedtes (smaller tot 1600 px); de actiekolom krijgt wat overblijft. */
.pvolijst th.pvo-vast { width: 64px; }
.pvolijst th.pvo-veldkop { width: 280px; }
.pvolijst th[data-col="eis"] { width: 130px; }
.pvolijst th[data-col="vw"] { width: 170px; }
/* Verplicht voor en Voorwaarde: zelfde opmaak als Soort en Bij varianten (grijs, normale grootte). */
.pvotabel td[data-col="vv"], .pvotabel td[data-col="vw"] { color: var(--muted); }
.pvolijst th[data-col="wijze"] { width: 150px; }
.pvolijst .pvo-wijze { gap: 4px; }
.pvolijst th[data-col="vv"] { width: 210px; }
.pvolijst .pvo-vv b { font-weight: 600; color: var(--text); }
.pvolijst th[data-col="soort"] { width: 190px; }
.pvolijst th[data-col="var"] { width: 160px; }
.pvolijst th[data-col="gevuld"] { width: 170px; }
@media (max-width: 1600px) {
    .pvolijst th.pvo-veldkop { width: 180px; }
    .pvolijst th[data-col="eis"] { width: 110px; }
    .pvolijst th[data-col="vv"] { width: 150px; }
    .pvolijst th[data-col="wijze"] { width: 120px; }
    .pvolijst th[data-col="vw"] { width: 120px; }
    .pvolijst th[data-col="soort"] { width: 120px; }
    .pvolijst th[data-col="var"] { width: 120px; }
    .pvolijst th[data-col="gevuld"] { width: 130px; }
}
/* Ondergrens: kolommen + ±90 px voor "bewerken"; smaller scherm = horizontaal scrollen in .table-scroll. */
.card--flush .pvolijst { min-width: 1134px; }
@media (max-width: 700px) { .card--flush .pvolijst { min-width: 0; } }
.card--flush .pvolijst th.act { width: auto; }
.card--flush .pvolijst td.act { text-align: left; padding-left: 20px; }   /* de actiekolom vangt de restbreedte op: de kolommen links blijven compact */
.pvo-filters .filters__form > .pvo-meer { flex-basis: 100%; margin-top: 2px; }
.pvo-meer__rij { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* In-/uitklappen van thema's en toepassingen (app.js): pijltje draait, hele groepsrij klikbaar. */
.pvolijst tr[data-klap] { cursor: pointer; }
.pvolijst .pvo-klap, .typetabel .pvo-klap { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 6px; padding: 0; border: 0; background: none; color: var(--text-3); cursor: pointer; vertical-align: middle; }
.pvolijst .pvo-klap svg.i, .typetabel .pvo-klap svg.i { transform: rotate(90deg); transition: transform .15s ease; }
.pvolijst tr.is-dicht .pvo-klap svg.i, .typetabel tr.is-dicht .pvo-klap svg.i { transform: none; }
.pvolijst tr.pvo-thema .grprij { display: flex; align-items: center; gap: 0; }
.pvolijst tr.pvo-thema .grprij h3 { margin-right: 6px; }
.pvo-klapalles { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
/* Blok Vulling (veldformulier, vast veld, kernveld): hoe een veld gevuld wordt. */
.vulling__blok + .vulling__blok { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.vulling__blok > b { display: inline-block; margin-bottom: 6px; }
.vulling__blok .field { margin-top: 4px; }
.vulling__form { max-width: none; }
.vulling__uitleg { margin: 0; }
/* Pagina van een vast veld / kernveld (views/fields/vast.php): waarden links naast hun label. */
.vast__dl { grid-template-columns: 220px minmax(0, 1fr); }
.vast__dl dd { text-align: left; margin: 0; }
.vast__keuzes { display: flex; flex-wrap: wrap; gap: 4px; }
.vast__uitleg { margin: -6px 0 16px; }
.vast__slot { margin-right: 6px; }
.vast__beleid { margin-top: 14px; max-width: none; }
@media (max-width: 700px) { .vast__dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; } .vast__dl dd { margin-bottom: 8px; } }
.pvolijst .pvo__label a { color: var(--text); font-weight: 500; }
.pvolijst .pvo__label a:hover { color: var(--brand-dark); }
.pvo-uitleg { font-size: 12px; }
.pvo-telling { font-weight: 600; color: var(--text); }
/* Vijf filters (thema · hoofdgroep · toepassing · producttype · eis) op één regel bij 1440 px. */
.pvo-filters .search { min-width: 0; width: 125px; }
.pvo-filters .filters__select { width: 165px; max-width: none; }
.pvo-filters .filters__select[name="hg"] { width: 178px; }
.pvo-filters .filters__select[name="cat"] { width: 192px; }
.pvo-filters .filters__select[name="type"] { width: 215px; }
.pvo-filters .filters__select[name="eis"] { width: 112px; }
.typetabel-filters .search { width: 240px; }
.pvo-balk .muted { font-size: 12.5px; }
@media (max-width: 900px) { .pvo-uitleg { display: none; } }


/* Veld bewerken (views/fields/form.php): kaarten Veld · Waar het geldt · Wanneer het
   verplicht is · Gedrag, met een samenvatting in de zijkolom. */
form.veldform { max-width: none; display: block; }
.veldform .fgrid .veldform__breed { grid-column: 1 / -1; }
.veldform .fgrid .field--check { align-self: end; }
.veldform__sub { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); font: 600 10.5px/1.4 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.veldform__sub small { font-weight: 400; letter-spacing: 0; text-transform: none; }
.veldform__links { display: block; margin: 12px 0 0; font-size: 12.5px; }
/* Berekend veld: formulevak in het veldformulier, alleen-lezen uitkomst op het productscherm */
.veldform__formule { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.veldform .field--formule code { white-space: nowrap; }
.veld-berekend input[readonly] { background: var(--surface-2); color: var(--text); font-variant-numeric: tabular-nums; cursor: default; }
.veld-berekend .badge { margin-left: 6px; }
.veldform .note { margin-top: 8px; }

/* Keuze-editor (veldformulier, keuzelijst/afbeeldinglabels; app.js createListEditor):
   elke keuze een regel met kruisje, nieuwe keuze alleen via het eigen invoerveld. */
.keuze-editor { border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); overflow: hidden; }
.keuze-editor__kop { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.keuze-editor__kop .keuze-editor__zoek { flex: 1; min-width: 0; min-height: 30px; height: 30px; font-size: 13px; }
.keuze-editor__tel { font-size: 12px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.keuze-lijst { list-style: none; margin: 0; padding: 4px 0; max-height: 260px; overflow-y: auto; }
.keuze { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: 13px; }
.keuze:hover { background: var(--surface-2); }
.keuze__naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keuze__kleur { width: 22px; height: 22px; min-height: 0; padding: 0; border: 1px solid var(--border-strong); border-radius: 4px; background: none; cursor: pointer; flex: none; }
.keuze__weg { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border: 0; border-radius: 999px; background: transparent; color: var(--text-3); cursor: pointer; opacity: 0; }
.keuze:hover .keuze__weg, .keuze__weg:focus-visible { opacity: 1; }
.keuze__weg:hover { background: var(--crit-bg); color: var(--crit); }
.keuze-editor__leeg { margin: 0; padding: 10px; font-size: 12.5px; color: var(--text-3); }
.keuze-editor__nieuw { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border); background: var(--surface-2); }
.keuze-editor__nieuw input { flex: 1; min-width: 0; }
.keuze-editor__melding { font-size: 12px; color: var(--crit); }
.keuze-editor + textarea { margin-top: 8px; }

/* Producttypen kiezen in drie stappen (app.js dfhBoomkiezer): chips erboven, dan drie
   kolommen Hoofdgroep → Toepassing → Producttype. Rij = vinkje + naam (klik opent de
   volgende kolom); onderliggende types van een gekozen niveau staan grijs "valt eronder". */
.boomkiezer { border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); overflow: hidden; }
.boomkiezer__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; min-height: 40px; border-bottom: 1px solid var(--border); }
.boomkiezer__algemeen { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.boomkiezer__geen { font-size: 12.5px; color: var(--text-3); }
.boomkiezer__kolommen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.boomkiezer__kolommen.is-uit { opacity: .45; pointer-events: none; }
.boomkiezer__kolom { max-height: 260px; overflow-y: auto; border-left: 1px solid var(--border); }
.boomkiezer__kolom:first-child { border-left: 0; }
.boomkiezer__kop { position: sticky; top: 0; z-index: 1; padding: 6px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); font: 600 10.5px/1.4 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.boomkiezer__rij { display: flex; align-items: center; gap: 8px; padding: 3px 10px; font-size: 13px; }
.boomkiezer__rij:hover { background: var(--surface-2); }
.boomkiezer__rij.is-open { background: var(--brand-tint); }
.boomkiezer__rij input { width: 15px; height: 15px; margin: 0; flex: none; accent-color: var(--ink); }
.boomkiezer__rij svg.i { color: var(--text-3); flex: none; }
.boomkiezer__naam { flex: 1; min-width: 0; padding: 4px 0; border: 0; background: none; text-align: left; font: inherit; color: var(--text); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boomkiezer__erf, .boomkiezer__tel { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.boomkiezer__tel { color: var(--brand-dark); }
.boomkiezer .boomkiezer__leeg { margin: 0; padding: 10px; font-size: 12.5px; color: var(--text-3); }
.boomkiezer__algemeen input { width: 15px; height: 15px; margin: 0; accent-color: var(--ink); }
@media (max-width: 700px) { .boomkiezer__kolommen { grid-template-columns: 1fr; } .boomkiezer__kolom { border-left: 0; border-top: 1px solid var(--border); } }

/* Vaste plek voor het slotje vóór een veldnaam (overzicht, matrix, per type): ook zonder
   slotje is de plek er, zodat alle veldnamen op dezelfde lijn beginnen. */
.veld-slot { display: inline-flex; align-items: center; justify-content: center; width: 14px; flex: none; color: var(--text-3); }

/* Producttypes: dezelfde rijen als het overzicht. .typetabel = de boom (inspringen op
   --pvo-d), .pvotabel--los = veldrijen zonder type-rij erboven (detailpagina). */
.card--flush .typetabel td:first-child { padding-left: calc(20px + var(--pvo-d, 0) * 16px); }
.typetabel a.pvo__naam { color: var(--text); text-decoration: none; }
.typetabel a.pvo__naam:hover { color: var(--brand-dark); text-decoration: underline; }
.typetabel td.act .btn + .btn { margin-left: 4px; }
/* Boom in- en uitklappen + sorteren per niveau (app.js, table.typetabel). Hoofdtype = groepsrij,
   een type zonder onderliggende types krijgt een lege pijlplek (namen op één lijn); alle rijen wit
   (tabelstandaard besluit 5A: groepsrij = gewone datarij),
   .is-context = bovenliggend type dat alleen voor de context in een gefilterde lijst staat. */
.typetabel .pvo-klap--leeg { cursor: default; }
.typetabel tr.typerij--wortel a.pvo__naam,
.typetabel tr[data-klap] a.pvo__naam, .typetabel tr[data-klap] td[data-col="prod"] { font-weight: 600; }   /* groep met onderliggende types (Producten = opgeteld) */
.typetabel tr.is-context > td > *, .typetabel tr.is-context a.pvo__naam { opacity: .55; }
.card--flush .pvotabel--los tr.pvo-veld td:first-child,
.card--flush .pvotabel--los tr.pvo-grp[data-ouder] td:first-child { padding-left: 20px; }
.pvotabel--los tr.pvo-veld td, .pvotabel--los.table--plak tr.pvo-veld td:first-child { background: var(--surface); }
.dl-kv .pvo__meter { width: 56px; vertical-align: middle; }
.typekaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.typekinderen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.typekinderen li { display: flex; justify-content: space-between; gap: 8px; }
.typeform { display: grid; gap: 14px; }
.typeform .field { margin: 0; }

/* Telefoon: elke rij wordt twee regels (naam + pillen, daaronder herkomst + vulgraad);
   soort, varianten en de kolomkiezer vallen weg. */
@media (max-width: 700px) {
    .pvo-balk .col-manager { display: none; }
    .tabelbalk.pvo-balk { flex-wrap: wrap; row-gap: 8px; }
    .pvotabel, .pvotabel tbody { display: block; }
    .pvotabel thead { display: none; }
    .pvotabel tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 6px; row-gap: 3px; align-items: center;
        padding: 9px 16px 9px calc(16px + var(--pvo-d, 0) * 10px); border-bottom: 1px solid var(--border); }
    .pvotabel tr.pvo-veld, .pvotabel tr.pvo-grp[data-ouder] { padding-left: calc(37px + var(--pvo-d, 0) * 10px); }
    .pvotabel--los tr.pvo-veld, .pvotabel--los tr.pvo-grp[data-ouder] { padding-left: 16px; }
    .pvotabel tr.pvo-veld { background: var(--surface-2); }
    .pvotabel--los tr.pvo-veld { background: var(--surface); }   /* ná de regel hierboven: losse tabel = wit, net als zijn cellen */
    .pvotabel tr[hidden] { display: none; }
    .card--flush .pvotabel td, .card--flush .pvotabel tr td:first-child,
    .card--flush .pvotabel tr.pvo-veld td:first-child,
    .card--flush .typetabel td:first-child, .card--flush .pvotabel--los tr.pvo-veld td:first-child, .card--flush .pvotabel--los tr.pvo-grp[data-ouder] td:first-child,
    .card--flush .pvotabel tr.pvo-grp td:first-child, .card--flush .pvotabel tr.pvo-grp[data-ouder] td:first-child { display: block; padding: 0; border: 0; background: none; position: static; min-width: 0; }
    .pvotabel .pvo__cel { max-width: none; min-width: 0; }
    .pvotabel td::after { display: none; }
    .pvotabel tr > td:first-child { grid-column: 1; grid-row: 1; }
    .pvotabel td[data-col="n"], .pvotabel td[data-col="l3"], .pvotabel td[data-col="eis"] { grid-column: 2 / 4; grid-row: 1; justify-self: end; }
    .pvolijst td[data-col="vw"] { grid-column: 1; grid-row: 2; font-size: 12px; }
    .pvolijst td[data-col="wijze"], .pvolijst td[data-col="vv"] { display: none; }
    .card--flush .pvolijst tr.pvo-lijstrij td:first-child, .card--flush .pvolijst tr.pvo-sub td:first-child { padding-left: 0; }
    .card--flush .pvolijst.table--plak tr td.pvo-vast { display: none; }
    .card--flush .pvolijst tr.pvo-lijstrij td.pvo__veld { grid-column: 1; grid-row: 1; display: block; padding: 0; border: 0; background: none; position: static; min-width: 0; }
    .pvolijst .veld-slot.veld-slot--mobiel { display: inline-flex; }
    .pvotabel td[data-col="o"] { grid-column: 3; grid-row: 1; }
    .pvotabel tr.pvo-veld td[data-col="o"] { grid-column: 2; }
    .pvotabel td[data-col="spec"], .pvotabel tr.pvo-veld td[data-col="soort"] { grid-column: 1; grid-row: 2; font-size: 12px; color: var(--text-3); }
    .pvotabel td[data-col="gevuld"] { grid-column: 2 / 4; grid-row: 2; justify-self: end; font-size: 12px; }
    .pvotabel td[data-col="soort"], .pvotabel td[data-col="var"], .pvotabel td[data-col="l1"], .pvotabel td[data-col="l2"], .pvotabel td.act { display: none; }
    .pvotabel tr.pvo-veld td[data-col="soort"] { display: block; }
    .pvotabel tr.grp td { grid-column: 1 / -1; }
    .pvotabel .pvo__meter { width: 40px; }
    .typetabel td[data-col="n"] { grid-column: 2; }
    .typetabel td[data-col="prod"] { display: none; }
}

/* Kolomkiezer: overal exact dezelfde maat (partial views/partials/kolomkiezer.php, design-manual §7). */
.col-manager > summary.btn { height: 32px; min-height: 32px; padding: 0 12px; font-size: 12.5px; gap: 6px; }
.col-manager > .col-manager__list { width: 300px; min-width: min(300px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: 440px; box-sizing: border-box; }
.col-manager__list label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Menu's in de paginakop (AI) boven de plakkende veldnavigatie (.pv-nav, z-index 40). */
.phead .auto-popup[open] { position: relative; z-index: 60; }
.phead .auto-popup__paneel { z-index: 61; }

/* Productvelden, Volgorde bewerken (?bewerk=1): balk met uitleg/Annuleren/Opslaan + nieuw thema,
   greep per eigen veld en per thema, de rij of het thema dat je sleept. */
.pvo-bewerkbalk { flex-wrap: wrap; row-gap: 8px; }
.pvo-bewerkbalk__opslaan, .pvo-bewerkbalk__thema { display: flex; align-items: center; gap: 8px; }
.pvo-bewerkbalk__opslaan { flex: 1 1 420px; }
.pvo-bewerkbalk__thema input { width: 180px; height: 30px; }
.pvolijst .pvo-greep { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 22px; margin-right: 6px; border-radius: 4px; color: var(--text-3); cursor: grab; }
.pvolijst .pvo-greep:hover { color: var(--text); background: var(--surface-3); }
.pvolijst .pvo-greep:active { cursor: grabbing; }
.pvolijst tr.is-slepen > td, .pvolijst tbody.is-slepen > tr > td { background: var(--brand-tint); }
.pvolijst tbody.is-slepen { opacity: .7; }
.pvolijst .pvo-thema-form { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.pvolijst .pvo-thema-form input { width: 170px; height: 28px; font-size: 12.5px; }
.pvolijst .pvo-thema-vast { font-size: 12px; }
/* ── WMS (views/wms): nummers, referentie, statusbadges, picken, locatieboom, popups ──
   Vervangt het oude WMS-blok uit style.css (eigen kleuren); alles via tokens. */
/* WMS-nummer (O10234 / P10234 / I1004): hét klikbare handvat van een rij of kop; klantnaam erachter. */
.nr { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
a.nr { color: var(--brand-dark); text-decoration: none; }
a.nr:hover { text-decoration: underline; }
h1 .nr { color: var(--brand-dark); }
h1 .klant { font-weight: 500; }
.nr-klant { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.nr-klant .nr { flex: none; }
.nr-klant .klant { color: var(--text); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-klant .klant::before { content: "·"; color: var(--text-3); margin-right: 6px; }
.table--vast:not(.table--vrij) td > span.nr-klant:not(.badge) { display: inline-flex; max-width: 210px; vertical-align: bottom; }
/* Referentie (Shopify-ordernummer): omlijnde pil in de merktint, "ref" klein ervoor. */
.badge--ref, html[data-theme="dark"] .badge--ref { background: var(--brand-tint); color: var(--text); box-shadow: inset 0 0 0 1px var(--brand); font-weight: 600; font-variant-numeric: tabular-nums; }
.badge--ref small { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
/* Statusbadges (WmsStatus::badge): open = info, ok, wacht = let op, blok = fout, dicht/neutraal = neutraal. */
.badge--st-open, html[data-theme="dark"] .badge--st-open { background: var(--info-bg); color: var(--info); }
.badge--st-ok, html[data-theme="dark"] .badge--st-ok { background: var(--ok-bg); color: var(--ok); }
.badge--st-wacht, html[data-theme="dark"] .badge--st-wacht { background: var(--warn-bg); color: var(--warn); }
.badge--st-blok, html[data-theme="dark"] .badge--st-blok { background: var(--crit-bg); color: var(--crit); }
.badge--st-dicht, .badge--st-neutraal, html[data-theme="dark"] .badge--st-dicht, html[data-theme="dark"] .badge--st-neutraal { background: var(--new-bg); color: var(--new); }
/* Celtekst die afkapt (verzendmethode, artikelnaam): volledige tekst in de title. */
.afkap, .table--vast:not(.table--vrij) td > .afkap:not(.badge):not(.btn) { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.table .afkap--breed, .table--vast:not(.table--vrij) td > .afkap--breed:not(.badge):not(.btn) { max-width: 420px; }
.table .afkap--smal, .table--vast:not(.table--vrij) td > .afkap--smal:not(.badge):not(.btn) { max-width: 160px; }
/* Formulier op één regel (veld + knop), o.a. leverdatum, snooze, vastleggen. */
.rijform { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; border: 0; max-width: none; }
.rijform input, .rijform select { min-height: 32px; height: 32px; width: auto; }
.rijform input[type=number] { width: 76px; }
.dl dd .rijform { justify-content: flex-end; }
/* Formulier in een regelmenu (⋯): bv. "Snooze tot [datum] Snooze". */
.menu__form { display: flex; align-items: center; gap: 6px; padding: 6px 10px; }
.menu__form input { min-height: 28px; height: 28px; font-size: 12.5px; }
.menu__kop { padding: 6px 10px 0; font: 600 10.5px/1.4 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.menu__scheid { height: 1px; background: var(--border); margin: 4px 0; }
/* Fulfillment-kaart op de orderpagina: kop met nummer, magazijn en badges; tabel; acties. */
.card__head h2 .nr { margin-right: 6px; }
.card__acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card__acties form { margin: 0; }
/* Adres in een zijkaart. */
.adres { margin: 0; font-style: normal; font-size: 13px; line-height: 1.55; }
.adres + .adres { margin-top: 12px; }
.adres__kop, .card__body h4, dialog.dlg h4 { margin: 0 0 6px; font: 600 10.5px/1.4 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.adres a { color: var(--brand-dark); }
/* Interne opmerkingen: plaatsen bovenaan, daaronder de opmerkingen met een scheidingslijn. */
.opmerking { padding: 12px 0 0; margin-top: 12px; border-top: 1px solid var(--border); }
.opmerking__tekst { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.opmerking__voet { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--text-3); }
.opmerking__voet form { margin: 0; }
.opmerking-form { display: grid; gap: 8px; margin: 0; max-width: none; padding: 0; border: 0; }
.opmerking-form textarea { width: 100%; min-height: 64px; padding: 8px 10px; }
.opmerking-form .btn { justify-self: start; }
/* Picken per regel: − stand +  (elke klik = POST). Klaar = groene streep links, deels = amber. */
.pick__teller { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.pick__knop { width: 28px; justify-content: center; padding: 0; font-size: 15px; }
.pick__stand { min-width: 44px; text-align: center; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.pick__stand small { font-weight: 400; color: var(--text-3); font-size: 12px; }
.pick__stand--klaar { color: var(--ok); }
.table tr.pick--klaar td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.table tr.pick--deels td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
/* Locatieboom in een kaart: elk niveau inklapbaar (app.js toggelt [hidden] op .loc__kinderen). */
.locboom { font-size: 13px; }
.loc__rij { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 20px; border-top: 1px solid var(--border); min-height: 44px; }
.locboom > .loc:first-child > .loc__rij { border-top: 0; }
.loc__rij:hover { background: var(--surface-2); }
.loc--d0 > .loc__rij { background: var(--surface-3); }
.loc--d1 > .loc__rij { padding-left: 44px; }
.loc--d2 > .loc__rij { padding-left: 68px; }
.loc--d3 > .loc__rij { padding-left: 92px; }
.loc__toggle { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: var(--text-3); font-size: 13px; cursor: pointer; line-height: 1; flex: none; }
.loc__toggle:hover { color: var(--text); }
.loc__toggle--leeg { display: inline-block; }
.loc__code { text-decoration: none; }
.loc__code code { font-weight: 600; font-size: 12.5px; }
.loc__naam { min-width: 90px; font-weight: 500; }
.loc--blad .loc__naam { font-weight: 400; }
.loc__meta { font-size: 12px; color: var(--text-3); }
.loc__type { margin: 0 0 0 auto; }
.loc__type select { min-height: 28px; height: 28px; font-size: 12.5px; }
.loc__boekbaar { margin: 0; }
.loc__voorraad { min-width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
/* Popups (native <dialog>): compacte aanmaakformulieren (zendingen, afhaal, correcties). */
dialog.dlg { border: 0; border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 18px 20px; width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; box-shadow: var(--shadow-2); }
dialog.dlg::backdrop { background: rgba(0, 0, 0, .45); }
dialog.dlg h2 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
dialog.dlg .form { max-width: none; }
dialog.dlg .form-section { margin-bottom: 12px; box-shadow: none; border: 1px solid var(--border); }
dialog.dlg .form-actions { display: flex; gap: 8px; margin-top: 12px; }
.dlg__lijst { margin: 4px 0 12px; padding-left: 18px; font-size: 13px; }
/* Pakketten-editor (zendingen): 1 regel = 1 collo; omschrijving rekt mee, maatvelden smal. */
.pakketten { box-shadow: none; margin-bottom: 8px; }
.pakketten th, .pakketten td { padding: 4px 6px; }
.pakketten td:first-child { width: 99%; }
.pakketten input { min-height: 30px; height: 30px; font-size: 12.5px; }
.pakketten input.maat { width: 64px; }
.pakketten input.pakket-omschrijving { width: 100%; min-width: 160px; }
.js-pakketten > .field { max-width: 260px; margin-bottom: 10px; }
.pakketten__voet { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-3); }
.card__body > .switch + .inline-fields { margin-top: 12px; }
/* Veldraster van precies twee kolommen (smalle zijkaart: Boeken, Verplaatsen). */
.fgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card__body > .fgrid + .btn, .card__body > .field + .btn { margin-top: 12px; }
.card__body > .field + .fgrid, .card__body > .dl + .field { margin-top: 12px; }
.card__body > .dl + .fld__hint, .card__body > .fld__hint + .list, .card__body > .dl + .list { margin-top: 10px; }
.list .afkap { min-width: 0; max-width: 100%; }
/* Formulierkaarten in een .stack: de stack regelt de tussenruimte. */
form.stack > .form-section { margin: 0; }
.form-section legend small { font-weight: 400; font-size: 12px; color: var(--text-3); margin-left: 4px; }
dialog.dlg { outline: none; }
dialog.dlg .form-actions { position: static; background: none; border: 0; padding: 0; box-shadow: none; }
dialog.dlg .fgrid { margin-bottom: 12px; }
dialog.dlg .form { margin: 0; }
/* Detailpagina met een volwaardige zijkolom (WMS: order, picklijst, inkooporder, …):
   verhouding i.p.v. vaste 320 px, zodat bedragen en adressen even zwaar wegen. */
.cols.cols--zij { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); }
@media (max-width: 1040px) { .cols.cols--zij { grid-template-columns: minmax(0, 1fr); } }
/* Kaarttabellen knippen nooit af: in een .table-scroll scrollen ze horizontaal. */
.card--flush > .table-scroll > .table { margin: 0; box-shadow: none; }
/* Stapeltabel (WMS): onder 900 px wordt elke rij een blok, elke cel "label: waarde"
   (labels uit de kolomkop via app.js). Niets wordt afgekapt; de eerste cel is de kop van het blok. */
@media (max-width: 768px) {
    .table.table--stapel { display: block; }
    .table.table--stapel thead { display: none; }
    .table.table--stapel tbody, .table.table--stapel tr { display: block; width: 100%; }
    .table.table--stapel tr { padding: 10px 16px; border-bottom: 1px solid var(--border); }
    .table.table--stapel tbody tr:last-child { border-bottom: 0; }
    .table.table--stapel tbody tr:hover td { background: none; }
    html body .table.table--stapel td, html body .card--flush .table.table--stapel td:first-child, html body .card--flush .table.table--stapel td:last-child {
        display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
        min-width: 0; width: 100%; padding: 3px 0; border: 0; white-space: normal; text-align: right; }
    .table.table--stapel td::before { content: attr(data-label); flex: none; margin-right: auto; font: 600 10.5px/1.6 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); text-align: left; }
    .table.table--stapel td[data-label=""]::before { content: none; }
    .table.table--stapel td:first-child { justify-content: flex-start; text-align: left; font-size: 14px; padding-bottom: 6px; }
    .table.table--stapel td:first-child::before { content: none; }
    .table.table--stapel td.act { justify-content: flex-end; }
    .table.table--stapel td:empty { display: none; }
    html body .table.table--stapel td .afkap, html body .table.table--stapel td > .afkap:not(.badge):not(.btn),
    html body .table.table--stapel td > span.nr-klant:not(.badge), html body .table.table--stapel .nr-klant .klant {
        max-width: none; overflow: visible; white-space: normal; text-overflow: clip; display: inline; }
    html body .table.table--stapel td > span.nr-klant:not(.badge) { display: inline-flex; flex-wrap: wrap; }
    .card--flush .table-scroll:has(> .table--stapel) { overflow: visible; background: none; }
    .table.table--stapel.pick tr.pick--klaar, .table.table--stapel.pick tr.pick--deels { box-shadow: inset 3px 0 0 var(--ok); }
    .table.table--stapel.pick tr.pick--deels { box-shadow: inset 3px 0 0 var(--warn); }
    .table.table--stapel.pick tr td:first-child { box-shadow: none; }
    /* Locatieboom: minder insprong, voorraad mag naar een eigen regel. */
    .loc--d1 > .loc__rij { padding-left: 32px; } .loc--d2 > .loc__rij { padding-left: 44px; } .loc--d3 > .loc__rij { padding-left: 56px; }
    .loc__rij { padding-right: 16px; }
    .loc__type { margin-left: 0; }
    /* Filterbalk: zoekveld vult de breedte. */
    .filters__form { width: 100%; }
    .filters__form .search { flex: 1 1 100%; min-width: 0; }
}
/* Pakketeditor in een smalle popup: scrollt i.p.v. afknippen. */
dialog.dlg .js-pakketten { overflow-x: auto; }
@media (max-width: 600px) { dialog.dlg { padding: 14px 16px; } .pakketten input.pakket-omschrijving { min-width: 120px; } }
/* Kolom die de restruimte vult en daarbinnen afkapt (artikelnaam in detailtabellen):
   de tabel past zo altijd in zijn kaart, de volledige naam staat in de title. */
.table td.td-vul { width: 100%; max-width: 0; }
.table--vast:not(.table--vrij) td.td-vul > .afkap:not(.badge):not(.btn) { display: block; max-width: 100%; }
/* Kaartkop met WMS-nummer + magazijn: de naam mag op een smal scherm doorlopen. */
.card__head h2:has(> .nr) { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 768px) {
    html body .table.table--stapel td.td-vul { max-width: none; }
    html body .table.table--stapel td.td-vul > .afkap:not(.badge):not(.btn) { display: inline; }
    /* Locatieboom: regel 1 code + naam, regel 2 telling, regel 3 type/boekbaar/voorraad/menu. */
    .loc__meta { order: 1; flex-basis: 100%; padding-left: 34px; }
    .loc__type, .loc__boekbaar, .loc__voorraad, .loc__rij > .menu, .loc__rij > .badge { order: 2; }
    .loc__type { margin-left: 34px; }
    .loc__voorraad { min-width: 0; margin-left: auto; }
}
/* Pakketeditor op een telefoon: omschrijving over de volle breedte, maten eronder (placeholders = kolomnamen). */
@media (max-width: 600px) {
    .pakketten thead { display: none; }
    .pakketten tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--border); }
    .pakketten td, .pakketten td:first-child { padding: 0; width: auto; border: 0; }
    .pakketten td:first-child { grid-column: 1 / -1; }
    .pakketten input.maat { width: 100%; }
    .pakketten input.pakket-omschrijving { min-width: 0; }
    dialog.dlg .js-pakketten { overflow-x: visible; }
}

/* Kolombreedte slepen (elke kolomkiezer-tabel; app.js zet data-kolombreedte):
   greep op de rechterrand van een kolomkop; zichtbare lijn bij hover/focus/slepen. Ook de
   eerste kop (zonder data-col) moet positioned zijn; .table--plak th:first-child (sticky) wint
   in specificiteit en blijft dus plakken. */
table[data-kolombreedte] thead th { position: relative; }
/* Tabel met automatische opmaak waarin een breedte is aangepast (app.js zet .is-breedte-vast na
   het meten): vaste opmaak, zodat smaller slepen werkt; te lange inhoud wordt afgekapt. */
table.is-breedte-vast { table-layout: fixed; }
table.is-breedte-vast > thead > tr > th, table.is-breedte-vast > tbody > tr > td { overflow: hidden; text-overflow: ellipsis; }
.kolom-greep { position: absolute; top: 0; right: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 3; touch-action: none; }
.kolom-greep::after { content: ""; position: absolute; top: 20%; bottom: 20%; right: 2px; width: 2px; border-radius: 1px; background: transparent; transition: background .12s; }
th:hover > .kolom-greep::after { background: var(--border-strong); }
th > .kolom-greep:hover::after, th > .kolom-greep:focus-visible::after, .is-kolom-slepen th > .kolom-greep::after { background: var(--brand); }   /* wint van th:hover hierboven */
.kolom-greep:focus-visible { outline: none; }
body.is-kolom-slepen, body.is-kolom-slepen * { cursor: col-resize !important; user-select: none; }
@media (max-width: 700px) { .kolom-greep { display: none; } }
/* Plakkende eerste kolom (.table--plak) werkte niet: .table had overflow: hidden en werd daarmee
   zelf het scrollvak voor position: sticky (dat nooit scrolt). clip knipt hetzelfde af maar is
   geen scrollvak, dus de kolom plakt nu in .table-scroll (gevonden bij kolombreedte, 4-10-2026). */
.table.table--plak { overflow: clip; }

/* Opgeslagen weergaven (elke kolomkiezer-tabel) onder het zoekveld van het Kolommen-paneel:
   uitklapregel, chips (Standaard + eigen + gedeeld), deelmenu, Opslaan/Terug, nieuwe weergave. */
.col-manager__weergaven { display: grid; gap: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
@media (min-width: 769px) { .col-manager > .col-manager__list:has(.col-manager__weergaven) { width: 340px; } }   /* mobiel: het paneel staat in de pagina (static), zoals altijd */
.col-manager__wkies { display: flex; align-items: baseline; gap: 8px; width: 100%; border: 0; background: none; padding: 4px 0; font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; text-align: left; }
/* Uitklapregels Weergave / Productvelden: label = sectiekop (handboek §3), waarde in gewone tekst. */
.col-manager__wlabel { flex: none; width: 112px; font: 600 10.5px/1.4 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.col-manager__wnu { font-weight: 500; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-manager__wkies:hover .col-manager__wnu { color: var(--brand-dark); }
.col-manager__wkies .col-manager__wpijl { align-self: center; }
.col-manager__wgewijzigd { font-size: 11.5px; color: var(--warn); white-space: nowrap; }
.col-manager__wgewijzigd::before { content: '· '; color: var(--text-3); }
.col-manager__wpijl { margin-left: auto; flex: none; color: var(--text-3); transition: transform .15s ease; }
.col-manager__weergaven.is-open .col-manager__wpijl { transform: rotate(180deg); }
.col-manager__wpaneel { display: grid; gap: 6px; }
.col-manager__wlijst { display: flex; flex-wrap: wrap; gap: 4px; }
/* Weergave-pillen = de chip-standaard (.chip 24 px, radius 6; actief = .chip--doel; .chip__x) */
.col-manager__wlijst .chip { max-width: 100%; }
button.col-manager__w { cursor: pointer; font-family: inherit; }
button.col-manager__w:not(.chip--doel):hover, .col-manager__witem:not(.chip--doel):hover { border-color: var(--text-3); }
.col-manager__witem { gap: 2px; padding-right: 6px; }
.col-manager__wnaar { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; max-width: 160px; white-space: nowrap; }
.col-manager__wknop { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 0; background: none; color: inherit; opacity: .55; padding: 0; cursor: pointer; border-radius: 50%; }
.col-manager__wknop:hover, .col-manager__wknop:focus-visible { opacity: 1; background: var(--surface-3); outline: none; }
.col-manager__wstatus { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.col-manager__wuitleg { font-size: 12px; color: var(--text-3); }
.col-manager__wsub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.col-manager__wteam { flex: none; color: var(--text-3); }
.col-manager__wknop.is-open { opacity: 1; background: var(--surface-3); }
.col-manager__witem .col-manager__wteam { margin-right: 1px; color: inherit; opacity: .7; }
.col-manager__list input.col-manager__wnaam.col-manager__whernoem { flex: 0 1 170px; width: 170px; height: 24px; padding: 0 8px; }
.col-manager__wdelen { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.col-manager__list label.col-manager__wkeuze { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 12.5px; cursor: pointer; }
.col-manager__list label.col-manager__wkeuze.is-uit { cursor: default; color: var(--text-3); }
.col-manager__list label.col-manager__wkeuze:has(.col-manager__whint) { flex-wrap: wrap; row-gap: 0; }
.col-manager__whint { flex-basis: 100%; padding-left: 22px; font-size: 11px; color: var(--text-3); }
/* Veld als kolom: blok onder de kop van het Kolommen-paneel (zelfde zoekbare multi-select als Delen). */
table[data-veldkolommen][style*="--pl-min"] { min-width: var(--pl-min); }   /* veldkolommen erbij: tabel breder, zijwaarts scrollen (Services\VeldKolommen::minBreedte) */
/* Telefoon: de plakkende titelkolom houdt hooguit de helft van het scherm, anders bedekt hij bij een brede tabel alles;
   een open kolomkiezer krijgt in de tabelbalk een eigen regel (het paneel staat daar in de pagina). */
@media (max-width: 768px) {
    #producttabel > thead > tr > th:first-child, #aanvultabel > thead > tr > th:first-child { width: 55vw; }
    #producttabel .titelcel .thumb { display: none; }   /* telefoon: ruimte voor de naam (soort-iconen blijven) */
    .tabelbalk:has(> .col-manager[open]) { flex-wrap: wrap; }
    .tabelbalk > .col-manager[open] { flex-basis: 100%; }
}
.col-manager__velden { padding: 6px 0; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.col-manager__veldeninhoud { display: grid; gap: 6px; padding-top: 6px; }
.col-manager__velden.is-open .col-manager__wpijl { transform: rotate(180deg); }
.col-manager__veldenrij { display: flex; align-items: flex-start; gap: 6px; }
.col-manager__veldenrij .kies { flex: 1 1 auto; min-width: 0; }
.col-manager__veldeninhoud > .col-manager__whint { flex-basis: auto; padding-left: 0; }
.col-manager__veldeninhoud > .col-manager__whint:empty { display: none; }
/* Eén hoogte voor invoer en knoppen in het paneel (naamveld/Bewaren, zoekveld/Tonen). */
.col-manager__wnieuw .btn, .col-manager__veldenrij .btn { flex: none; height: 32px; min-height: 32px; padding: 0 12px; }
/* Delen → Specifiek: de bestaande zoekbare multi-select (.kies--multi) in het deelmenu; het
   paneel maakt elk input 14 px (vinkjes), dus het zoekveld krijgt zijn maat terug. */
.col-manager__wspecifiek { margin: 4px 0 0; font-size: 12px; }   /* volle breedte van het deelmenu, ook onder de rondjes */
:is(.col-manager__wspecifiek, .col-manager__velden) .kies { min-width: 0; }
/* Compact in het paneel; de keuzelijst klapt ín het veld naar beneden open (static) in plaats van
   eroverheen te zweven, zodat hij niet onder de paneelrand doorloopt en het paneel meeschuift. */
:is(.col-manager__wspecifiek, .col-manager__velden) .kies--multi { min-height: 32px; padding: 2px 6px; gap: 4px; box-sizing: border-box; }
:is(.col-manager__wspecifiek, .col-manager__velden) .kies--multi:focus-within { box-shadow: 0 0 0 2px var(--brand-tint); }
.col-manager__list :is(.col-manager__wspecifiek, .col-manager__velden) input.kies__invoer { width: auto; min-width: 7rem; height: 26px; min-height: 0; padding: 0 4px; font-size: 12.5px; accent-color: auto; box-shadow: none; }
:is(.col-manager__wspecifiek, .col-manager__velden) .kies__chip { font-size: 11.5px; padding: 1px 8px; }
:is(.col-manager__wspecifiek, .col-manager__velden) .kies__lijst { position: static; flex-basis: 100%; margin: 2px -6px -2px; padding: 4px; max-height: 176px; border: 0; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; box-shadow: none; }
:is(.col-manager__wspecifiek, .col-manager__velden) .kies__item { font-size: 12.5px; padding: 4px 8px; }
:is(.col-manager__wspecifiek, .col-manager__velden) .kies__groep { font-size: 10.5px; padding: 6px 8px 2px; }
.col-manager__w .i { flex: none; opacity: .7; }
.col-manager__wstatus .link-btn, .col-manager__wplus { font-size: 12px; padding: 0; }
.col-manager__wplus { display: inline-flex; align-items: center; gap: 2px; justify-self: start; }
.col-manager__wnieuw { display: flex; gap: 6px; }
.col-manager__list input.col-manager__wnaam { width: auto; flex: 1 1 auto; min-width: 0; height: 32px; min-height: 32px; box-sizing: border-box; font-size: 12.5px; accent-color: auto; }

/* ── Bundelpagina en bundellijst (views/bundles/, redesign 4-10-2026) + combinatietabel
   (views/partials/combo_tabel.php, ook op de productpagina). Design manual §16 "Bundels". */
/* Bundelpagina na herontwerp (5-10-2026): meer lucht tussen blokken, opbouw-overzicht, compacte keuzegroepen. */
.bnd-meer { display: inline; margin-left: 6px; }
.bnd-meer > summary { display: inline; cursor: pointer; text-decoration: underline; }
@media (max-width: 640px) {
}
.bnd-sku { white-space: nowrap; }   /* SKU nooit afbreken (STF-9703 op één regel) */
.bnd-combos { margin: 12px 0 16px; }   /* Combinaties per bundel op de productpagina (kaart Gecombineerd product) */
.bnd-opheffen__keuzes { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }   /* Opheffen: drie keuzes */
.bnd-opheffen__keuzes .field--check { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 8px; }   /* rondje en tekst altijd naast elkaar */
.bnd-opheffen__keuzes .field--check > input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ink); }   /* 16 + 8 gap = tekst op 24px */
.bnd-opheffen__keuzes .field--check > span { flex: 1; min-width: 0; }
.bnd-opheffen__keuzes .field--check small { display: block; color: var(--text-3); font-size: 12px; }
.bnd-opheffen__alles b { color: var(--crit); }
/* Gevolg van "producten uit de feed": alleen zichtbaar als die keuze aan staat, uitgelijnd met de labeltekst. */
.bnd-opheffen__gevolg { display: none; margin: -4px 0 0 24px; padding: 8px 10px; list-style: none; border-radius: 8px; background: var(--surface-2); font-size: 12.5px; }
.bnd-opheffen:has(input[value="alles"]:checked) .bnd-opheffen__gevolg, .bnd-opheffen:has(input[value="alles"]:disabled) .bnd-opheffen__gevolg { display: grid; gap: 4px; }
.bnd-opheffen__gevolg b { font-variant-numeric: tabular-nums; }
.bnd-opheffen__gevolg summary { cursor: pointer; }
.bnd-opheffen__blijven { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.bnd-opheffen__blijven small { display: block; color: var(--text-3); }
.fk-groot.btn--icon { width: 26px; background: var(--surface); }
.bnd-actie { margin-top: 8px; }   /* Knop onder 'Eerst oplossen' (onderdelen op Actief) */
.bnd-lijst { margin: 0; padding-left: 16px; }
.bnd-droog > summary { display: inline-flex; align-items: center; gap: 4px; list-style: none; cursor: pointer; font-weight: 500; }   /* Droge weergave "Wat gaat er naar Shopify" */
.bnd-droog > summary::-webkit-details-marker { display: none; }
.bnd-droog__pijl { transition: transform .12s; color: var(--text-3); }
.bnd-droog[open] > summary .bnd-droog__pijl { transform: rotate(90deg); color: var(--brand-dark); }
.bnd-droog__inhoud { display: grid; gap: 10px; margin-top: 10px; }
.bnd-droog__inhoud > * { margin: 0; }
.bnd-droog, .bnd-droog__inhoud > * { min-width: 0; }   /* lange JSON-regels of de tabel rekken de zijkolom niet op */
.bnd-json { margin: 8px 0 0; max-height: 420px; overflow: auto; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font-size: 11.5px; line-height: 1.45; white-space: pre; }
.bnd-titelveld { margin: 0; }
.combo-tabel td { vertical-align: middle; }
.combo-tabel__foto { min-width: 130px; }
.combo-tabel__thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: zoom-in; vertical-align: middle; }
.combo-tabel__foto .fk-details { margin-top: 4px; }
.combo-tabel__foto .fk-details > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.combo-tabel__prijs { max-width: 120px; }
.combo-tabel__sku { max-width: 180px; }
.combo-tabel__foto small { white-space: nowrap; }
.combo-tabel__vast { margin: 0 0 10px; font-size: 12.5px; }   /* Vaste onderdelen één keer boven de combinatietabel */
.combo-tabel__samen { min-width: 200px; }
.combo-tabel__opties { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.combo-tabel__optie { white-space: nowrap; }
.combo-tabel__extra { display: block; margin-top: 2px; }
.combo-tabel__std { white-space: nowrap; }
@media (max-width: 640px) {
  .combo-tabel__samen { min-width: 180px; }
  .combo-tabel__optie { white-space: normal; }
}

/* ── UI-bouwstenen (docs/ui/README.md → Bouwstenen): opmaak voor src/ui.php en
   public/assets/js/dfh-ui.js. Tot 4-10-2026 een eigen bestand dfh-ui.css; staat bewust onderaan
   (zelfde volgorde als toen: ná de rest van dfh.css). ── */
/* Statusbadge Gearchiveerd: gedempt, nooit rood (besluit 2). Dark mode apart: style.css kleurt
   .badge daar met hogere specificiteit. */
.badge--gedempt { background: transparent; color: var(--text-3); box-shadow: inset 0 0 0 1px var(--border); }
html[data-theme="dark"] .badge--gedempt { background: transparent; color: var(--text-3); box-shadow: inset 0 0 0 1px var(--border); }

/* Vulmeter van een optioneel veld: neutraal (geen oordeel). */
.cmp-meter--neutraal { background: var(--text-3); }

/* Dialoog (dfh.dialoog / data-bevestig): smalle variant van dialog.dlg. */
dialog.dlg.dlg--smal { width: min(460px, calc(100vw - 2rem)); }
.dfh-dialoog .modal__kop h2 { margin: 0; font-size: 1.05rem; }
.dfh-dialoog__sluit { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer; }
.dfh-dialoog__sluit:hover { background: var(--surface-3); color: var(--text); }
.dfh-dialoog__tekst { margin: 10px 0 0; white-space: pre-line; color: var(--text); line-height: 1.5; }
.dfh-dialoog__acties { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* Schermlezer-only (live-regio van dfh.zeg). */
.dfh-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Generiek in-/uitklappen: knop met pijltje (i-chev-r), open = 90° gedraaid. */
.klap-knop { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 6px; padding: 0; border: 0; background: none; color: var(--text-3); cursor: pointer; vertical-align: middle; }
.klap-knop svg.i { transform: rotate(90deg); transition: transform .15s ease; }
.is-dicht > * .klap-knop svg.i, .is-dicht .klap-knop svg.i { transform: none; }
[data-klap-sleutel] [data-klap] { cursor: pointer; }
/* Subgroep onder een groepskop (tr.grp.grp--sub): lichter en per niveau ingesprongen (--niveau op de td,
   standaard 1; Collecties: de typeboom). */
.table tr.grp.grp--sub td, .table tr.grp.grp--sub:hover td { background: var(--surface-2); border-top: 1px solid var(--border); }
.card--flush .table--groepen tbody tr.grp.grp--sub td:first-child { padding-left: calc(20px + var(--niveau, 1) * 18px); }
.table tr.grp.grp--sub h3 { color: var(--text); }

/* Generiek volgorde slepen: greep (button) per item; tijdens slepen gemarkeerd. */
.volgorde-greep { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--text-3); cursor: grab; touch-action: none; }
.volgorde-greep:hover, .volgorde-greep:focus-visible { color: var(--text); background: var(--surface-3); }
.volgorde-greep:active { cursor: grabbing; }
[data-volgorde] > .is-slepen { background: var(--brand-tint); outline: 1px dashed var(--brand); outline-offset: -1px; }
[data-volgorde] > .is-slepen > * { background: transparent; }
@media (prefers-reduced-motion: reduce) { .klap-knop svg.i { transition: none; } }

/* ── Stijlgids (/admin/stijlgids, views/admin/stijlgids/): navigatie links, per voorbeeld een
   kaart met live uitvoer en het codeblok. .is-smal zet het voorbeeldvlak op 390 px. ── */
.sg { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start; }
.sg__nav { position: sticky; top: calc(var(--suitebar-height, 48px) + 16px); display: grid; gap: 2px; font-size: 13px; }
.sg__nav a { padding: 4px 8px; border-radius: 6px; color: var(--muted); text-decoration: none; }
.sg__nav a:hover { background: var(--surface-3); color: var(--text); }
.sg__smal { margin-top: 10px; justify-self: start; }
.sg__inhoud { min-width: 0; display: grid; gap: 28px; }
.sg.is-smal .sg__inhoud { max-width: 390px; }
.sg-sectie { scroll-margin-top: calc(var(--suitebar-height, 48px) + 16px); }
.sg-sectie > h2 { margin: 0 0 12px; font-size: 16px; }
.sg-zijbalk { width: 256px; max-width: 100%; padding: 6px 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }   /* voorbeeldvak zijbalk (breedte = PIM) */
.sg-vb { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin-bottom: 14px; overflow: clip; scroll-margin-top: calc(var(--suitebar-height, 48px) + 16px); }
.sg-vb:has(.kies--open) { overflow: visible; position: relative; z-index: 5; }   /* een open keuzelijst valt niet weg achter de rand van het voorbeeld */
.sg-vb__kop { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; padding: 12px 16px 0; }
.sg-vb__kop h3 { margin: 0; font-size: 14px; }
.sg-vb__doc { font-size: 12px; color: var(--text-3); }
.sg-vb__wanneer { margin: 4px 16px 0; font-size: 12.5px; color: var(--muted); }
.sg-vb__live { padding: 16px; min-width: 0; display: grid; gap: 10px; }
.sg-vb__live > .pv2 { width: 100%; min-width: 0; justify-self: stretch; }   /* veldraster-voorbeelden (container-query): niet tot 0 px krimpen */
.sg-vb__code { border-top: 1px solid var(--border); background: var(--surface-2); }
.sg-vb__code summary { padding: 8px 16px; cursor: pointer; font-size: 12.5px; color: var(--muted); }
.sg-vb__code pre { margin: 0; padding: 0 16px 12px; overflow-x: auto; font-size: 12px; line-height: 1.5; white-space: pre; }
.sg-rij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sg-stapel { display: grid; gap: 8px; }
.sg-tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.sg-token { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-size: 12px; }
.sg-token i { display: block; height: 32px; border-bottom: 1px solid var(--border); }
.sg-token span { display: block; padding: 6px 8px; font-family: ui-monospace, monospace; font-size: 11.5px; }
.sg-iconen { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; font-size: 12px; }
.sg-iconen span { display: flex; gap: 6px; align-items: center; min-width: 0; }
.sg-tekst th, .sg-tekst td { white-space: normal; vertical-align: top; }
.sg-tekst code { white-space: normal; overflow-wrap: anywhere; }
.sg-uitvoer { display: grid; gap: 4px; margin-bottom: 8px; font-size: 12.5px; color: var(--muted); }
.sg-uitvoer input { font-family: ui-monospace, monospace; font-size: 12px; }
@media (max-width: 768px) {
    .sg { grid-template-columns: minmax(0, 1fr); }
    .sg__nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
    .sg__smal { margin-top: 0; }
}

/* ---- Tabelstandaard (docs/ui/componenten/tabel.md, besluiten Kjelt 4-10-2026) ---- */
/* Soortkleuren: variant blauw (info), bundel paars, configurator groenblauw. Donker apart (zie badge-regel). */
:root { --bundel: #6b4fa3; --bundel-bg: #f0ebf8; --configurator: #0f6e56; --configurator-bg: #e1f5ee; }
html[data-theme="dark"] { --bundel: #cdb4ff; --bundel-bg: #352653; --configurator: #5dcaa5; --configurator-bg: #0d3a31; }
.badge--bundel { background: var(--bundel-bg); color: var(--bundel); }
html[data-theme="dark"] .badge--bundel { background: var(--bundel-bg); color: var(--bundel); }

/* Soort-kenmerk (\App\soortIcoon): icoon (+ aantal) als kleine pil; "zit in een bundel" = omlijnd rondje. */
.soort { display: inline-flex; align-items: center; gap: 3px; flex: none; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1; text-decoration: none; vertical-align: middle; }
.soort .i { width: 13px; height: 13px; }
a.soort:hover { text-decoration: none; filter: brightness(.95); }
button.soort { border: 0; cursor: pointer; font-family: inherit; }   /* soortIcoon met $knop (eigen klikactie) */
button.soort--in-bundel { background: transparent; }
button.soort--in-bundel:hover, button.soort--in-bundel:focus-visible { background: var(--bundel-bg); }
.soort--variant { background: var(--info-bg); color: var(--info); }
.soort--bundel { background: var(--bundel-bg); color: var(--bundel); }
.soort--configurator { background: var(--configurator-bg); color: var(--configurator); width: 26px; justify-content: center; padding: 0; }
.soort--in-bundel { width: 20px; padding: 0; justify-content: center; border-radius: 50%; color: var(--bundel); box-shadow: inset 0 0 0 1.5px currentColor; }
.soort--in-bundel .i { width: 11px; height: 11px; }

/* Titelcel: naam (a.row) op één regel met "…", optioneel één grijze subregel (\App\titelcel). */
.titelcel__tekst { display: grid; min-width: 0; line-height: 1.3; }
.titelcel__tekst > a.row, .titelcel__naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titelcel__sub { display: block; font-size: 12px; line-height: 1.3; color: var(--text-3); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titelcel .soort + .soort { margin-left: -4px; }
/* Groepsrij A (tabelstandaard besluit 5): klapknop vooraan, rijen zonder leden dezelfde ruimte; klikbare rij. */
.klap-ruimte { display: inline-block; width: 18px; margin-right: -4px; flex: none; }
.titelcel > .klap-knop { margin-right: -4px; flex: none; }
tr[data-klap] > td { cursor: pointer; }
td.lid .titelcel > .muted:first-child { flex: none; width: 14px; }
.table td.boomcel { padding-left: calc(12px + var(--niveau, 0) * 22px); }   /* boom zonder klappen: inspringen per niveau via --niveau, nooit inline padding */
/* Telefoon: de titelcel kapt af met …, waardoor automatische tabelopmaak hem bijna geen breedte gaf; minimaal 150 px. */
@media (max-width: 768px) { .table td .titelcel__tekst { min-width: 150px; } }

/* ── Periodekiezer + vergelijker (views/partials/periodekiezer.php, docs/ui/componenten/periodekiezer.md):
   twee knoppen; periodepaneel = snelkeuzes links + kalender van twee maanden; vergelijkmenu. Gekozen
   begin/einde = --ink (zoals de actieve paginering), het bereik ertussen = --brand-tint, vandaag
   onderstreept in --brand. Smal (≤ 640 px): paneel over de volle breedte, snelkeuzes als pillen, één maand. */
.pk { display: grid; gap: 6px; justify-items: start; min-width: 0; }
/* Leveranciers- en magazijnpagina: elk invulveld even hoog als de gewone velden daar (34 px) — ook de
   keuzelijst met chips en het Ja/nee-segment (besluit Kjelt 12-10-2026: hoogte consistent). */
.lev-blok__velden .kies--multi, .mag-form .kies--multi { min-height: 34px; box-sizing: border-box; padding: 2px 6px; gap: 4px; border-color: var(--border-strong); }
.lev-blok__velden .kies--multi .kies__invoer, .mag-form .kies--multi .kies__invoer { min-height: 28px; height: 28px; padding: 0 4px; }
:is(.lev-cols, .mag-form) .pv-jn.pv-jn { height: 34px; }   /* .pv-jn.pv-jn: wint van het segmentblok verderop */
:is(.lev-cols, .mag-form) .pv-jn .pv-jn__k.pv-jn__k { height: 30px; }
/* Invoercontrole (docs/ui/componenten/invoercontrole.md): veld met een fout formaat rood, melding eronder. */
input.is-ongeldig { border-color: var(--crit); box-shadow: 0 0 0 1px var(--crit); }
.veld-melding, .field > .veld-melding, .lev-blok__velden .field > .veld-melding { display: block; margin-top: 4px; font-size: 12px; color: var(--crit); }
/* Invoerstand (formulier, bv. een sluiting van–tot): de knop is het invulveld; een kaart met overflow
   (card--flush) knipt het open paneel niet af. */
.pk--invoer, .pk--invoer .pk__knoppen, .pk--invoer .pk__veld { width: 100%; }
.pk--invoer .pk__knop { width: 100%; height: 34px; min-height: 34px; justify-content: flex-start; font-weight: 400; }
.pk--invoer .pk__knop .pk__chev { margin-left: auto; }
.card:has(.pk--invoer .pk__paneel:not([hidden])) { overflow: visible; }
.pk__form { display: none; }
.pk__knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.pk__veld { position: relative; }
.pk__knop .i { color: var(--text-3); }
.pk__knop .pk__chev { margin-left: 2px; }
.pk__knop.is-on { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-dark); }
.pk__knop.is-on .i { color: currentColor; }
.pk__knop[aria-expanded="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.pk__uitleg { margin: 0; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pk__paneel, .pk__menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-2), 0 0 0 1px var(--border); }
.pk__paneel[hidden], .pk__menu[hidden] { display: none; }
.pk__paneel.is-rechts, .pk__menu.is-rechts { left: auto; right: 0; }
.pk__paneel { display: flex; width: 680px; max-width: calc(100vw - 32px); }
/* In een venster (JS zet left/top/max-height): vast boven het venster (991), onder de suitebar (1200); het hele paneel scrolt. */
.pk__paneel.is-vast, .pk__menu.is-vast { position: fixed; right: auto; z-index: 1150; overflow-y: auto; }
.pk__paneel.is-vast .pk__snelkeuzes { max-height: none; }
.pk__snelkeuzes { width: 176px; flex: none; padding: 8px 6px; border-right: 1px solid var(--border); max-height: calc(100vh - 140px); overflow-y: auto; }
.pk__groep + .pk__groep { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.pk__groepkop { padding: 4px 10px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.pk__snel, .pk__optie { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.pk__snel:hover, .pk__optie:hover { background: var(--surface-2); }
.pk__snel[aria-pressed="true"], .pk__optie[aria-checked="true"] { background: var(--brand-tint); color: var(--brand-dark); font-weight: 500; }
.pk__optie .pk__vink { visibility: hidden; }
.pk__optie[aria-checked="true"] .pk__vink { visibility: visible; }
.pk__menu { width: 250px; padding: 6px; }
.pk__kal { position: relative; flex: 1; min-width: 0; padding: 12px 14px; display: grid; gap: 10px; align-content: start; }
.pk__nav { position: absolute; top: 8px; width: 28px; min-height: 28px; }
.pk__nav--vorige { left: 10px; }
.pk__nav--volgende { right: 10px; }
.pk__maanden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pk__maandkop { height: 28px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.pk__dagen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.pk__wd { padding: 4px 0; text-align: center; font-size: 11px; color: var(--text-3); }
.pk__cel { display: flex; justify-content: center; }
.pk__cel.is-binnen { background: var(--brand-tint); }
.pk__cel.is-start { background: linear-gradient(90deg, transparent 50%, var(--brand-tint) 50%); }
.pk__cel.is-eind { background: linear-gradient(90deg, var(--brand-tint) 50%, transparent 50%); }
.pk__dag { width: 32px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; cursor: pointer; }
.pk__dag:hover { background: var(--surface-3); }
.pk__cel.is-binnen .pk__dag { color: var(--brand-dark); }
.pk__cel.is-binnen .pk__dag:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--brand); }
.pk__dag[aria-current="date"] { font-weight: 700; text-decoration: underline 2px var(--brand); text-underline-offset: 3px; }
.pk__dag.is-gekozen, .pk__dag.is-gekozen:hover { background: var(--ink); color: var(--on-ink); font-weight: 600; }
.pk__dag:disabled { color: var(--text-3); opacity: .45; cursor: default; background: transparent; }
.pk__dag:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.pk__voet { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.pk__bereik { flex: 1; min-width: 160px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    /* Vast onder de knop (top en max-height zet de JS), boven de menuknop van de zijbalk (1100), onder de suitebar (1200). */
    .pk__paneel { position: fixed; left: 8px; right: 8px; top: 56px; z-index: 1150; width: auto; max-width: none; flex-direction: column; max-height: calc(100dvh - 72px); overflow-y: auto; }
    .pk__paneel.is-rechts { left: 8px; right: 8px; }
    .pk__snelkeuzes { width: auto; max-height: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; border-right: 0; border-bottom: 1px solid var(--border); }
    .pk__groep { display: contents; }
    .pk__groepkop { display: none; }
    .pk__snel { width: auto; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; }
    .pk__maanden { grid-template-columns: minmax(0, 1fr); }
    .pk__dag { width: 38px; height: 36px; }
    .pk__bereik { flex-basis: 100%; }
    .pk__voet [data-pk-annuleer] { margin-left: auto; }
}

/* ── KPI-tegels met vergelijking (views/partials/kpis.php): label, waarde, verschil met de
   vergelijkingsperiode (pijl + %; groen = beter, rood = slechter — ook bij kosten waar lager beter is). */
.kpis-blok { display: grid; gap: 8px; min-width: 0; }
.kpis-blok__titel { margin: 0; font: 600 14px/1.3 var(--font-head); }
.kpis { --kpi-kol: 3; display: grid; grid-template-columns: repeat(var(--kpi-kol), minmax(0, 1fr)); gap: 12px; }
.kpis--2 { --kpi-kol: 2; }
.kpis--4 { --kpi-kol: 4; }
.kpi { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 14px 18px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.kpi__l { font-size: 12.5px; color: var(--muted); }
.kpi__n { font: 600 24px/1.2 var(--font-head); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi__vgl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); }
.kpi__vgl--ok { color: var(--ok); }
.kpi__vgl--crit { color: var(--crit); }
svg.i.kpi__pijl { width: 8px; height: 12px; fill: currentColor; stroke: none; }
.kpi__vorige { color: var(--text-3); font-weight: 400; }
.kpi__sub { font-size: 12px; color: var(--text-3); }
/* Doelregel (budget & doelen): meter over de hele breedte + "Doel € … · 87%". */
.kpi__doel { display: grid; gap: 4px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.kpi__doel .cmp-meter { display: block; width: 100%; height: 4px; margin: 0; }
@media (max-width: 1100px) { .kpis--4 { --kpi-kol: 2; } }
/* Vier tegels op een telefoon per twee (zoals de zes erboven), anders wisselt het ritme op één pagina. */
@media (max-width: 640px) { .kpis.kpis--4 { --kpi-kol: 2; } .kpis--4 .kpi { padding: 10px 12px; } .kpis--4 .kpi__n { font-size: 17px; } }
@media (max-width: 640px) { .kpis { --kpi-kol: 1; } }
/* Zes tegels op één rij (dashboard), klikbare tegel (naar de grafiek), sparklijn. */
.kpis--6 { --kpi-kol: 6; }
.kpis--6 .kpi__n { font-size: 20px; }
/* Het getal schaalt mee met de breedte van de tegel (container-eenheden), zodat een groot bedrag in een
   smalle tegel (tablet, drie of zes op een rij) niet wordt afgekapt; nooit groter dan de vaste maat. */
.kpi { container-type: inline-size; }
.kpi__n { font-size: clamp(15px, 13cqi, 24px); }
.kpis--6 .kpi__n { font-size: clamp(15px, 13cqi, 20px); }
.kpi--link { border: 2px solid transparent; padding: 12px 16px; color: inherit; text-decoration: none; }
.kpi--link:hover { border-color: var(--border-strong); text-decoration: none; }
.kpi--link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.kpi.is-on { border-color: var(--ink); }
/* Met sparklijn: de lijn staat onderaan, zodat de lijnen van een rij op één hoogte liggen. */
.kpi:has(.kpi__spark) { display: flex; flex-direction: column; gap: 4px; }
.kpi__spark { position: relative; display: block; height: 30px; margin-top: auto; flex: none; }
.kpi:has(.kpi__spark) > .kpi__sub { margin-bottom: 8px; }
.kpi:has(.kpi__spark) > .kpi__doel { margin-bottom: 8px; }
/* Admin › Budget & doelen: omzetdoel per maand als invoer in de tabel. */
.budget-tabel th, .budget-tabel td { white-space: nowrap; }
.budget-tabel td.num input { width: 120px; height: 30px; text-align: right; }
.budget-tabel .cmp-meter { width: 64px; }
.kpi__spark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kpi__spark-lijn { fill: none; stroke: var(--reeks-1); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kpi__spark-lijn--vgl { stroke: var(--text-3); stroke-width: 1.25; stroke-dasharray: 3 3; }
@media (max-width: 1280px) { .kpis--6 { --kpi-kol: 3; } }
@media (max-width: 640px) { .kpis--6 { --kpi-kol: 2; } .kpis--6 .kpi { padding: 10px 12px; } .kpis--6 .kpi__n { font-size: 17px; } }

/* Verschil als eigen tabelcel (tabelstandaard): pijl + %, groen = beter, rood = slechter. */
/* position: relative houdt de schermlezertekst (.dfh-sr, absoluut) binnen de cel: anders ontsnapt hij
   aan .table-scroll en wordt de hele pagina breder (pre-PR 6-10-2026: 1.053 px op een telefoon). */
.delta { position: relative; display: inline-flex; align-items: center; gap: 3px; font-weight: 500; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta--ok { color: var(--ok); }
.delta--crit { color: var(--crit); }

/* ── Reekskleuren (grafieken, legenda's) in vaste volgorde: ROAS-analyse 1 = totaal, 2 = Google, 3 = Meta;
   elders de volgorde van de lijnen. Getoetst op kleurenblindheid (licht én donker, skill dataviz). */
:root { --reeks-1: #2a78d6; --reeks-2: #eb6834; --reeks-3: #1baf7a; }
html[data-theme="dark"] { --reeks-1: #3987e5; --reeks-2: #d95926; --reeks-3: #199e70; }
.reeks-stip { display: inline-block; width: 14px; height: 3px; border-radius: 2px; flex: none; }
.reeks-stip--1 { background: var(--reeks-1); }
.reeks-stip--2 { background: var(--reeks-2); }
.reeks-stip--3 { background: var(--reeks-3); }

/* Zijbalk: subpagina onder een pagina (Dashboard › ROAS-analyse, Winst): ingesprongen, iets kleiner. */
.nav-link--sub { margin-left: 18px; padding-top: 6px; padding-bottom: 6px; font-size: 12.5px; }
.nav-link--sub.active::before { left: -28px; }

/* Resultatenrekening (dashboard Winst): subtotalen vet, de netto winst met een lijn erboven. */
.resultaat__rij--sub td, .resultaat__rij--totaal td { font-weight: 600; }
.resultaat__rij--totaal td { border-top: 2px solid var(--border-strong); }

/* Dashboard: periodekiezer links, weergavekiezer rechts. */
.dash-balk { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.dash-balk > .seg { margin-left: auto; }

/* ── Lijngrafiek (docs/ui/componenten/lijngrafiek.md; JS in dfh-ui.js op [data-lijngrafiek]):
   legenda met vinkjes, één y-as, lijnen per reeks (vergelijking gestippeld), kruisdraad + tooltip per punt. */
.lijngrafiek { display: grid; gap: 10px; min-width: 0; }
.lijngrafiek__legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.lijngrafiek__legenda .field--check { margin: 0; gap: 7px; font-size: 12.5px; cursor: pointer; }
.lijngrafiek__vgl-uitleg { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-size: 12px; color: var(--text-3); }
.lijngrafiek__streep { width: 18px; border-top: 2px dashed var(--text-3); }
.lijngrafiek__vlak { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: 300px 26px; min-width: 0; }
.lijngrafiek__y { position: relative; }
.lijngrafiek__y span { position: absolute; right: 10px; transform: translateY(-50%); font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lijngrafiek__plot { position: relative; min-width: 0; cursor: crosshair; }
.lijngrafiek__plot:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 4px; }
.lijngrafiek__raster { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--border); }
.lijngrafiek__raster--nul { border-top-color: var(--border-strong); }
/* Alleen de lijnen-svg's (direct kind); niet de pijl-iconen in de tooltip. */
.lijngrafiek__plot > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lijngrafiek__lijn { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lijngrafiek__lijn--1 { stroke: var(--reeks-1); }
.lijngrafiek__lijn--2 { stroke: var(--reeks-2); }
.lijngrafiek__lijn--3 { stroke: var(--reeks-3); }
.lijngrafiek__lijn--vgl { stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .5; }
.lijngrafiek__x { grid-column: 2; position: relative; }
.lijngrafiek__x span { position: absolute; top: 7px; transform: translateX(-50%); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.lijngrafiek__kruis { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--muted); pointer-events: none; }
.lijngrafiek__punt { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--surface); pointer-events: none; }
.lijngrafiek__punt--1 { background: var(--reeks-1); }
.lijngrafiek__punt--2 { background: var(--reeks-2); }
.lijngrafiek__punt--3 { background: var(--reeks-3); }
.lijngrafiek__tip { position: absolute; top: 8px; z-index: 5; width: 290px; max-width: 100%; padding: 10px 12px; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-2), 0 0 0 1px var(--border); font-size: 12.5px; pointer-events: none; }
.lijngrafiek__tip[hidden] { display: none; }
.lijngrafiek__tip-kop { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-weight: 600; }
.lijngrafiek__tip-kop span + span { font-weight: 400; color: var(--text-3); }
.lijngrafiek__tip-rij { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1px 8px; align-items: center; padding: 3px 0; font-variant-numeric: tabular-nums; }
.lijngrafiek__tip-rij b { font-weight: 600; text-align: right; white-space: nowrap; }
.lijngrafiek__tip-vgl { grid-column: 2 / 4; display: flex; justify-content: flex-end; gap: 6px; color: var(--text-3); font-size: 11.5px; }
@media (max-width: 640px) {
    .lijngrafiek__vlak { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 240px 26px; }
    .lijngrafiek__vgl-uitleg { margin-left: 0; }
}
/* Koppelpunten (configurator, ontwerp-editor elementenbanken, 5-10-2026):
   miniatuur in de lijst, en het pictogram waarop je punten zet (app.js, blok "Koppelpunten"). */
.kp-thumb { width: 56px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.kp-editor { max-width: min(480px, 100%); }
.kp-editor svg { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: manipulation; }
.kp-editor .kp-rand { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.kp-editor .kp-punt { fill: var(--brand); stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; }
.kp-editor .kp-punt:hover { fill: var(--crit); }
.kp-editor .kp-richting { stroke: var(--brand); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.kp-legenda { margin: 12px 0 0; color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.kp-stip { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }

/* Selecteren → popup Variantgroepen (#vg-modal): rustiger opzet, zelfde werking (9-10-2026).
   Titel en uitleg boven, per groep een kaart met de groepstitel als veld eronder en de assen als
   aanvinkbare pillen; acties rechtsonder. Alleen binnen #vg-modal (vg-groep wordt ook elders gebruikt). */
#vg-modal .modal__paneel { max-width: 720px; padding: 20px 22px; }
#vg-modal .modal__kop h2 { font-size: 1.05rem; }
#vg-modal .modal__paneel > p.muted { margin: 4px 0 0; font-size: 12.5px; }
#vg-modal .modal__body { display: grid; gap: 12px; margin-top: 14px; max-height: 62vh; overflow: auto; }
#vg-modal .modal__body > p.muted { margin: 0; font-size: 12.5px; }
#vg-modal .vg-groep { margin: 0; padding: 14px 16px; border-radius: 10px; display: grid; gap: 10px; }
#vg-modal .vg-groep__kop strong { font-size: 13.5px; font-weight: 600; }
#vg-modal .vg-groep__kop .link-btn { font-size: 12.5px; color: var(--crit); }
#vg-modal .vg-groep__naam { display: grid; gap: 4px; margin: 0; }
#vg-modal .vg-groep__naam > span { font-size: 12px; color: var(--text-3); }
#vg-modal .vg-groep__naam input { width: 100%; min-width: 0; }
#vg-modal .vg-groep > .muted { font-size: 12px; line-height: 1.5; }
#vg-modal .vg-groep__velden { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
#vg-modal .vg-groep__veld { gap: 6px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 12.5px; }
#vg-modal .vg-groep__veld:has(input:checked) { border-color: var(--ink); background: var(--surface-3); }
#vg-modal .vg-groep__veld input { margin: 0; accent-color: var(--ink); }
#vg-modal .vg-modal__acties { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ── Kanalen (overzicht + pop-up Kanaal toevoegen; Services\Kanaalsoorten) ── */
.platform { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; }
.pmerk { width: 20px; height: 20px; border-radius: 5px; display: inline-grid; place-items: center; flex: none; font: 700 10px/1 var(--font-ui); color: #fff; background: var(--text-3); }
.pmerk svg { width: 14px; height: 14px; display: block; }
.pmerk--shopify { background: #5e8e3e; }
.pmerk--bol { background: #0000a4; }
.pmerk--google { background: #1a73e8; }
.pmerk--meta { background: #0866ff; }
/* Kanalenlijst: één tabel per groep (views/sync/index.php): de kanaalnaam vult de rest, de andere kolommen vast. */
.kanaaltabel { table-layout: fixed; min-width: 1060px; }
.kanaaltabel .kt-plat { width: 140px; }
.kanaaltabel .kt-derde { width: 190px; }
.kanaaltabel .kt-getal { width: 110px; }
.kanaaltabel .kt-moment { width: 150px; }
.kanaaltabel .kt-status { width: 180px; }
.kanaaltabel .kt-act { width: 100px; }
.card--flush .kanaaltabel td { overflow: hidden; text-overflow: ellipsis; }
/* .table--vast maakt spans in cellen inline-block: het platformmerkje moet flex blijven voor de tussenruimte. */
.table--vast:not(.table--vrij) td > span.platform:not(.badge) { display: inline-flex; }
.kanaal-dlg__tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.kanaal-dlg h4 { margin: 4px 0 -4px; }
.kanaal-dlg .tegel[hidden], .kanaal-dlg .fgrid[hidden] { display: none; }
.kanaal-dlg .tegel__t.platform { gap: 8px; }
.kanaal-dlg .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 4px; }
.map-add .fgrid[hidden], .map-add .fld[hidden] { display: none; }
.map-add .js-mf-extra { margin-top: 10px; }
/* Transformeren van een kanaal: per koppeling een keten van regelkaarten (views/sync/_transformeren.php). */
.tf-keten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); scroll-margin-top: 80px; }
.tf-keten .rule { background: var(--surface); }
.tf-keten__kop { gap: 8px; }
details.rule--add > summary { list-style: none; cursor: pointer; }
details.rule--add > summary::-webkit-details-marker { display: none; }
details.rule--add:not([open]) { grid-template-columns: 28px; border-style: dashed; }
.tf-keten .fgrid .fld[hidden] { display: none; }
.tf-keten .rule > *, .tf-keten .rule__line { min-width: 0; }
.tf-keten .rule__cfg, .tf-keten .rule__cfg code { white-space: normal; overflow-wrap: anywhere; }
/* Kanaalpagina's op een telefoon: lange knoppen en keuzelijsten breken af i.p.v. de pagina te verbreden. */
@media (max-width: 720px) {
    .gevaar { flex-wrap: wrap; }
    .gevaar > form, .gevaar select { min-width: 0; max-width: 100%; }
    :is(.gevaar, .dl-kv dd, .kanaal-dlg) .btn { white-space: normal; height: auto; min-height: 32px; text-align: left; }
    .kanaal-dlg .fgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Productpagina v2 (ontwerp canvas "Productpagina redesign", 9-10-2026) ──────────────
   Alleen binnen .pv2 (views/products/form.php); de groepspagina volgt later. Inhoud max.
   1200 px: hoofdkolom max. 820 + zijkolom 360. Kaartkop als getinte band. Velden in een
   raster van 4 kolommen met het label boven het vak: getal/prijs/ja-nee = 1 kolom
   (.pv-rij--kwart), keuzelijst/tekst/meerkeuze = 2, lange tekst/media = 4 (.pv-rij--breed). */
.pv2 { max-width: 1200px; margin: 0 auto; }
.pv2 .pv-cols { grid-template-columns: minmax(0, 820px) 360px; justify-content: center; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .pv2 .pv-cols { grid-template-columns: minmax(0, 1fr); } }
.pv2 .card > .card__head { min-height: 46px; padding: 0 20px; background: var(--surface-3); border-bottom: 1px solid var(--border); border-top-left-radius: inherit; border-top-right-radius: inherit; flex-wrap: nowrap; }
.pv2 .card > .card__head h2 { font-size: 15px; font-weight: 650; letter-spacing: -.005em; }
.pv2 .card > .card__head .sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2 .card > .card__body { padding: 16px 20px 18px; }
.pv2 .pv-hoofd .pv-velden { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; row-gap: 14px; }
.pv2 .pv-hoofd .pv-velden + .pv-velden { margin-top: 14px; }
.pv2 .pv-hoofd .pv-rij { grid-column: span 2; }
.pv2 .pv-hoofd .pv-rij--kwart { grid-column: span 1; }
.pv2 .pv-hoofd .pv-rij--breed, .pv2 .pv-hoofd .pv-rij--media { grid-column: 1 / -1; }
.pv2 .pv-hoofd .pv-rij .field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: 0; padding: 0; }
.pv2 .pv-hoofd .pv-rij .field > span:first-child { padding: 0; font-size: 12.5px; font-weight: 500; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2 .pv-hoofd .pv-rij--nodig .field > span:first-child { color: var(--text); font-weight: 600; }
.pv2 .pv-hoofd .pv-rij .field > :not(span:first-child) { width: 100%; }
.pv2 .pv-velden > .pv-subkop { grid-column: 1 / -1; margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
/* Raster: 4 kolommen tot de hoofdkolom smaller is dan 600 px (een kwartveld blijft dan ≥ 140 px,
   genoeg voor een getal met eenheid); daaronder 2 kolommen: kwartvelden half, de rest vol. */
@container (max-width: 599px) {
    .pv2 .pv-hoofd .pv-velden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pv2 .pv-hoofd .pv-rij { grid-column: 1 / -1; }
    .pv2 .pv-hoofd .pv-rij--kwart { grid-column: span 1; }
}
/* Actiebalk (.ab): plakt onder de suitebar; rust = acties + Opslaan, --vuil = donker met
   Verwerpen/Opslaan, --bezig = tijdens het opslaan. De bloknavigatie plakt er los onder. */
.pv2 { --pv-boven: 0px; }
body:has(.testmodus-balk) .pv2 { --pv-boven: 36px; }   /* de rode testmodus-balk plakt ook */
.pv2 .ab { position: sticky; top: calc(var(--suitebar-height) + var(--pv-boven) + 12px); z-index: 45; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px; margin-bottom: 0; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); transition: background-color .3s ease, color .3s ease; }
.ab__terug { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 8px; color: var(--text); }
.ab__terug:hover { background: var(--surface-3); text-decoration: none; }
.ab__terug svg.i { width: 18px; height: 18px; }
.ab__pad { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.ab__pad a { color: var(--muted); text-decoration: none; }
.ab__pad a:hover { color: var(--text); text-decoration: underline; }
.ab__hier { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ab__acties { display: flex; align-items: center; gap: 6px; flex: none; }
.ab__acties[hidden] { display: none; }
.pv2 .ab__k { height: 32px; min-height: 32px; padding: 0 12px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.ab__menu { position: relative; }
.ab__menu > summary { list-style: none; }
.ab__menu > summary::-webkit-details-marker { display: none; }
.ab__menu .auto-popup__paneel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 61; }
.ab__menulijst { width: 220px; padding: 6px; display: flex; flex-direction: column; }
.ab__menuitem { appearance: none; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--text); text-align: left; padding: 8px 10px; border-radius: 7px; cursor: pointer; text-decoration: none; }
.ab__menuitem:hover { background: var(--surface-3); text-decoration: none; }
.ab__menuitem--crit { color: var(--crit); }
.ab__menuitem--mobiel { display: none; }   /* alleen op een telefoon, waar de knop in de balk wegvalt */
.ab__stip { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; animation: ab-puls 1.6s ease-out infinite; }
@keyframes ab-puls { 0% { box-shadow: 0 0 0 0 rgba(255, 166, 65, .6); } 100% { box-shadow: 0 0 0 8px rgba(255, 166, 65, 0); } }
.ab__melding { font-size: 13px; font-weight: 600; margin-right: 4px; }
.ab__knop { height: 30px; padding: 0 12px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--on-ink) 30%, transparent); background: transparent; color: inherit; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ab__knop--vol { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.ab__knop:disabled { opacity: .6; cursor: default; }
.pv2 .ab--vuil { background: var(--ink); color: var(--on-ink); }
.ab--vuil .ab__pad, .ab--vuil .ab__pad a, .ab--vuil .ab__terug { color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
.ab--vuil .ab__hier { color: var(--on-ink); }
.ab--bezig .ab__stip { animation: none; border: 2px solid color-mix(in srgb, var(--on-ink) 35%, transparent); border-top-color: var(--on-ink); background: transparent; width: 12px; height: 12px; box-sizing: border-box; animation: ab-draai .8s linear infinite; }
@keyframes ab-draai { to { transform: rotate(360deg); } }
.pv-kop { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 14px; }
.pv-kop h1 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pv-kop__meta { display: flex; flex-wrap: wrap; gap: 0 14px; font-size: 13px; color: var(--muted); }
.pv2 .pv-form .pv-nav { top: calc(var(--suitebar-height) + var(--pv-boven) + 12px + 52px + 8px); z-index: 40; }
.pv2 .pv-kaart { scroll-margin-top: calc(var(--suitebar-height) + var(--pv-boven) + 150px); }
@media (prefers-reduced-motion: reduce) { .ab__stip { animation: none; } .pv2 .ab { transition: none; } }
@media (max-width: 720px) {
    .pv2 .ab { top: calc(var(--suitebar-height) + var(--pv-boven)); border-radius: 0; margin: 0 -16px; }
    .ab__pad { display: none; }
    .ab__rust > a.ab__k { display: none; }
    .ab__menuitem--mobiel { display: flex; align-items: center; gap: 8px; }
}
/* Invoervakken (stap 3): 36 px, radius 8, eenheid als grijs blok zonder scheidingslijn,
   focus in de merkkleur, rood = verplicht leeg, oranje = meestal gevuld bij het type. */
.pv2 .pv-hoofd .pv-rij :is(input[type=text], input[type=number], input[type=date], select, textarea:not(.js-richtext)) { height: 36px; min-height: 36px; border: 1px solid var(--border-strong); border-radius: 8px; background-color: var(--surface); font-size: 13px; padding: 0 10px; box-shadow: none; transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease; }
.pv2 .pv-hoofd .pv-rij textarea:not(.js-richtext) { height: auto; min-height: 72px; padding: 8px 10px; line-height: 1.45; }
.pv2 .pv-hoofd .pv-rij :is(input, select, textarea):focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); outline: none; }
.pv2 .input-unit:not(.js-kleurcode) { height: 36px; box-sizing: border-box; transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease; }
.pv2 .input-unit:not(.js-kleurcode) > input { height: 34px !important; min-height: 34px !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
.pv2 .input-unit:not(.js-kleurcode) > .muted, .pv2 .input-unit--prijs::before, .pv2 .input-unit--week::before { border: 0; min-width: 20px; justify-content: center; }
.pv2 .pv-rij--gat .input-unit:not(.js-kleurcode) > .muted, .pv2 .pv-rij--gat .input-unit--prijs::before, .pv2 .pv-rij--gat .input-unit--week::before { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.pv2 .pv-rij--mist .input-unit:not(.js-kleurcode) > .muted, .pv2 .pv-rij--mist .input-unit--prijs::before, .pv2 .pv-rij--mist .input-unit--week::before { background: color-mix(in srgb, var(--crit) 10%, transparent); }
.pv2 .pv-vak { min-height: 36px; border-radius: 8px; }
.pv2 .pv-vak__eenheid, .pv2 .pv-vak--voor .pv-vak__eenheid:first-child { border: 0; min-width: 20px; justify-content: center; }
.pv2 .pv-vak--gedeeld .pv-vak__eenheid { background: color-mix(in srgb, var(--info) 12%, transparent); }
/* Bron als klein teken achter het label; handmatig aangepast = oranje stipje. */
.pv2 .pv-rij .src { color: var(--text-3); }
.pv2 .pv-rij .src--as { color: var(--brand-dark); }
.pv2 .pv-rij .src--groep { color: var(--info); }
.pv2 .pv-rij .src--hand svg { display: none; }
.pv2 .pv-rij .src--hand::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); vertical-align: 2px; }
/* Ja/nee als segment: grijze baan, gekozen kant als witte knop, Ja in groen. Nog eens klikken = leeg (app.js).
   Ook op de leveranciers- en magazijnpagina (.lev-cols, .mag-form; sinds 12-10-2026): overal waar het partial janee.php staat. */
:is(.pv2, .lev-cols, .mag-form) .pv-jn { display: inline-flex; width: max-content; height: 32px; padding: 2px; gap: 2px; border: 0; border-radius: 8px; background: var(--surface-3); overflow: visible; transition: background-color .3s ease, box-shadow .3s ease; }
:is(.pv2, .lev-cols, .mag-form) .pv-jn__k, :is(.pv2, .lev-cols, .mag-form) .pv-jn__k + .pv-jn__k { flex: none; min-width: 52px; height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-weight: 500; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
:is(.pv2, .lev-cols, .mag-form) .pv-jn__k:hover { color: var(--text); }
:is(.pv2, .lev-cols, .mag-form) .pv-jn__k:has(input:checked), :is(.pv2, .lev-cols, .mag-form) .pv-jn__k.is-aan { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(35, 30, 20, .12), 0 0 0 1px rgba(35, 30, 20, .06); }
:is(.pv2, .lev-cols, .mag-form) .pv-jn__k:has(input[value="1"]:checked), :is(.pv2, .lev-cols, .mag-form) .pv-jn__k.is-aan:first-child { color: var(--ok); }
:is(.pv2, .lev-cols, .mag-form) .pv-jn__k:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 1px; box-shadow: none; }
.pv2 .pv-form .pv-rij--gat .pv-jn { box-shadow: inset 0 0 0 1px var(--warn); background: var(--warn-bg); }
.pv2 .pv-form .pv-rij--mist .pv-jn { box-shadow: inset 0 0 0 1px var(--crit); background: var(--crit-bg); }
.pv2 .pv-form .pv-rij--gat .pv-jn__k:not(:has(input:checked)), .pv2 .pv-form .pv-rij--mist .pv-jn__k:not(:has(input:checked)) { background: transparent; }
.pv2 .pv-vak:has(> .pv-vak__tekst > .pv-jn--lezen) { border: 0; background: none; min-height: 0; padding: 0; }
.pv2 .pv-jn--lezen { flex: none; height: 32px; }
/* Meerdere waarden (maten): eenheid vast aan het vak, + ernaast. */
.pv2 .pv-hoofd .multi-field__row > input:has(+ .muted) { border-radius: 8px 0 0 8px; border-right: 0; }
.pv2 .pv-hoofd .multi-field__row > .muted { border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 8px 8px 0; min-width: 20px; justify-content: center; }
.pv2 .pv-hoofd .multi-field__row:focus-within > input, .pv2 .pv-hoofd .multi-field__row:focus-within > .muted { border-color: var(--brand); }
.pv2 .pv-hoofd .multi-field__row:focus-within > input { box-shadow: none; }
.pv2 .pv-hoofd .pv-rij--gat .multi-field__row > .muted { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.pv2 .pv-hoofd .multi-field__add { width: 24px; }
/* Kleurbolletje bij een keuzelijst met kleuren: in het vak, vóór de pijl. */
.pv2 .pv-hoofd .pv-rij .field:has(> .kleur-dot) { position: relative; }
.pv2 .pv-hoofd .pv-rij .field:has(> .kleur-dot) > select { width: 100%; padding-left: 36px; }
.pv2 .pv-hoofd .pv-rij .field > .kleur-dot { position: absolute; left: 12px; bottom: 10px; margin: 0; width: 16px !important; height: 16px; border-radius: 50%; }
/* Ja/nee niet uitrekken. */
.pv2 .pv-hoofd .pv-rij .field > .pv-jn.pv-jn { width: max-content; }
/* Keuzelijsten (stap 4): enkele keuze = knop met waarde + pijl (app.js dfhKeuzeEnkel), meerkeuze =
   chips met × in één vak (dfhZoekbaarMulti). Eén lijststijl voor allebei (.kies__lijst/.kies__item). */
.pv2 .card { overflow: visible; }
.kies__native { position: absolute !important; inset: auto auto 0 0; width: 1px !important; height: 1px !important; min-height: 0 !important; opacity: 0; pointer-events: none; padding: 0 !important; border: 0 !important; }
.pv2 .kies--enkel { position: relative; width: 100%; flex: none; }
.pv2 .kies__knop { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease; }
.pv2 .kies__knop:focus-visible, .pv2 .kies--open .kies__knop { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); outline: none; }
.pv2 .kies__knop:disabled { cursor: default; color: var(--muted); background: var(--surface-2); }
.kies__waarde { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kies--leeg .kies__waarde { color: var(--text-3); }
.kies__pijl { flex: none; color: var(--muted); transition: transform .2s ease; }
.kies--open .kies__pijl { transform: rotate(180deg); }
.pv2 .pv-rij--gat .kies__knop, .pv2 .pv-rij--gat .kies--multi { border-color: var(--warn); background: var(--warn-bg); }
.pv2 .pv-rij--mist .kies__knop, .pv2 .pv-rij--mist .kies--multi { border-color: var(--crit); background: var(--crit-bg); }
.pv2 .field:has(> .kleur-dot) .kies__knop, .pv2 .field:has(> .kies > .kleur-dot) .kies__knop { padding-left: 36px; }
.pv2 .kies .kies__lijst { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; max-height: 264px; overflow: auto; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 28px rgba(0, 0, 0, .16); display: flex; flex-direction: column; animation: vrij-in .16s ease-out; }
.pv2 .kies .kies__lijst[hidden] { display: none; }
.pv2 .kies .kies__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--text); }
.pv2 .kies .kies__item:hover, .pv2 .kies .kies__item--actief { background: var(--surface-3); }
.pv2 .kies .kies__item--gekozen { font-weight: 600; color: var(--text); }
.pv2 .kies .kies__item--gekozen svg.i { color: var(--brand-dark); flex: none; }
.pv2 .kies .kies__item--leeg { color: var(--muted); border-top: 1px solid var(--border); border-radius: 0 0 7px 7px; margin-top: 2px; }
.pv2 .kies--multi .kies__item--gekozen::before { content: none; }
.pv2 .kies .kies__groep { font-size: 11px; letter-spacing: .04em; padding: 8px 10px 2px; }
.pv2 .kies__zoek { height: 32px; min-height: 32px; margin: 0 0 4px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; flex: none; }
@keyframes vrij-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Meerkeuze: chips in het vak. */
.pv2 .pv-rij .kies--multi { min-height: 36px; padding: 3px 30px 3px 6px; gap: 4px; border: 1px solid var(--border-strong); border-radius: 8px; position: relative; flex-wrap: wrap; }
.pv2 .pv-rij .kies--multi::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.pv2 .pv-rij .kies--multi:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.pv2 .kies--meerdere { border-width: 1px; }
.pv2 .pv-rij .kies--multi .kies__invoer { min-height: 26px; height: 26px; min-width: 4rem; padding: 0 4px; font-size: 13px; }
.pv2 .kies__chip { height: 24px; padding: 0 4px 0 8px; border-radius: 6px; background: var(--surface-3); color: var(--text); font-size: 12px; gap: 2px; }
.pv2 .kies__chip-x { display: inline-flex; padding: 2px; border-radius: 4px; color: var(--muted); }
.pv2 .kies__chip-x:hover { color: var(--crit); background: transparent; }
/* Chipsveld (Tags, Field::isChips): één vak met een chip per waarde en een naamloos tekstvak erachter.
   Het tekstvak erft niets van de gewone invoer (rand, hoogte): het vak eromheen is het invoervak. */
.multi-field.multi-field--chips, .pv2 .pv-hoofd .pv-rij .multi-field.multi-field--chips { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 36px; padding: 3px 6px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); box-sizing: border-box; cursor: text; }
.multi-field--chips:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.multi-field--chips .kies__chip { max-width: 100%; }
.multi-field--chips .kies__chip > span { overflow: hidden; text-overflow: ellipsis; }
.multi-field--chips input.multi-field__chipsinvoer { flex: 1 1 120px; width: auto !important; min-width: 100px; height: 28px !important; min-height: 28px !important; margin: 0; padding: 0 4px; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; outline: none; color: var(--text); font: inherit; font-size: 13px; }
/* Chipsveld bij een gat of verplicht leeg: zelfde rand en achtergrond als de andere velden (de basisregel
   hierboven is specifieker dan .pv-rij--gat, dus hier met dezelfde opbouw). */
.pv2 .pv-hoofd .pv-rij--gat .multi-field.multi-field--chips { border-color: var(--warn); background: var(--warn-bg); }
.pv2 .pv-hoofd .pv-rij--mist .multi-field.multi-field--chips { border-color: var(--crit); background: var(--crit-bg); }
.pv2 .kies__aantal { display: none; }
.pv2 .kies--enkel > .kleur-dot { position: absolute; left: 12px; top: 10px; width: 16px; height: 16px; margin: 0; z-index: 1; pointer-events: none; }
.pv2 .pv-rij .kies--multi .kies__invoer { min-height: 26px !important; height: 26px; border: 0 !important; box-shadow: none !important; background: transparent !important; background-image: none !important; flex: 1; }
.pv2 .kies__zoek { padding-left: 30px; background-position: 9px center; }
.pv2 .pv-rij:not(.pv-rij--gat) > .field .pv-gat-teken { display: none; }
.pv-dd-sub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.pv2 .pv-zij .dl-kv dd { text-align: right; }
.pv2 .pv-zij .dl-kv--stapel { display: flex; flex-direction: column; }
.pv2 .pv-zij .dl-kv--stapel dd { text-align: left; margin: 0; }
/* Foto's (stap 6, zoals Media in Shopify): grote eerste foto (2×2), vier kleine, "+N" opent het
   fotovenster met alle foto's, "+" kiest bestanden (uploaden gebeurt bij Opslaan). Het aanzicht
   staat als label op de foto (de select .media-label zelf). Zelfde invoer als voorheen. */
.pv2 .pv-rij--media .media-field[data-kind=image] .media-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; }
.pv2 .pv-rij--media .media-field[data-kind=image] .media-item { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-3); }
.pv2 .pv-rij--media .media-field[data-kind=image] .media-item:first-child { grid-column: span 2; grid-row: span 2; }
.pv2 .pv-rij--media .media-field[data-kind=image]:not(.media--alles) .media-item:nth-child(n+6) { display: none; }
.pv2 .pv-rij--media .media-item .media-zoom, .pv2 .pv-rij--media .media-item .media-zoom img { display: block; width: 100%; height: 100%; }
.pv2 .pv-rij--media .media-item img { border: 0; border-radius: 0; object-fit: cover; aspect-ratio: auto; }
.pv2 .pv-rij--media .media-item select.media-label { position: absolute; left: 6px; bottom: 6px; z-index: 2; width: auto; max-width: calc(100% - 12px); height: 22px; min-height: 22px; padding: 0 20px 0 7px; border: 0; border-radius: 6px; background-color: rgba(20, 16, 12, .62); color: #ffffff; font-size: 11px; font-weight: 500; text-overflow: ellipsis; box-shadow: none; background-position: right 5px center; background-size: 10px; }
/* Nog geen aanzicht: kleine grijze "+ Aanzicht" (geen oranje balk over elke foto). */
.pv2 .pv-rij--media .media-item:has(select.media-label option[value=""]:checked) select.media-label { background-color: rgba(255, 255, 255, .88); color: #5f5a54; border: 0; font-weight: 400; }
.pv2 .pv-rij--media .media-item .media-remove { top: 6px; right: 6px; }
.pv2 .pv-rij--media .media-item .media-show { position: absolute; right: 6px; top: 6px; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; background: rgba(35,35,35,.78); color: #fff; cursor: pointer; }
.pv2 .pv-rij--media .media-item:has(.media-remove input:checked)::after { content: none; }
.pv2 .pv-rij--media .media-field > small.muted { display: none; }
.pv2 .pv-rij--media .media-field > input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.media-tegel { appearance: none; position: relative; aspect-ratio: 1 / 1; border-radius: 10px; display: flex; align-items: center; justify-content: center; font: inherit; cursor: pointer; }
.media-tegel--meer { border: 0; background: #5a524a; color: #ffffff; font-size: 20px; font-weight: 600; }
.media-tegel--toevoegen { border: 1.5px dashed var(--border-strong); background: transparent; color: var(--text); }
.media-tegel:hover { filter: brightness(1.06); }
.media-tegel svg.i { width: 22px; height: 22px; }
.media-nieuw { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--brand); }
.media-nieuw img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-nieuw span { position: absolute; left: 6px; bottom: 6px; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: var(--brand-tint); color: var(--brand-dark); }
/* Venster (docs/ui/componenten/venster.md): laag + venster onder de zichtbare bovenbalken (--venster-boven,
   gezet door vensterOpen in app.js); de laag is duidelijk donker, ook in het donkere thema. */
.media-laag { position: fixed; inset: var(--venster-boven) 0 0; z-index: 990; background: rgba(0, 0, 0, .6); animation: vrij-in .2s ease; }
html[data-theme="dark"] .media-laag { background: rgba(0, 0, 0, .7); }
#foto-lightbox::backdrop { background: rgba(0, 0, 0, .6); }
html[data-theme="dark"] #foto-lightbox::backdrop { background: rgba(0, 0, 0, .7); }
@media (max-width: 768px) { html.venster-open { overflow: hidden; } }   /* telefoon: de pagina scrolt niet onder het venster door */
/* Fotovenster: dezelfde lijst, groot en met alle foto's; kop (titel + ×) en voet (Annuleren + Klaar) zoals het publicatievenster. */
.pv2 .pv-rij--media .media-field.media--alles { position: fixed; z-index: 991; left: 50%; top: calc(var(--venster-boven) + 24px); transform: translateX(-50%); width: min(1040px, calc(100vw - 32px)); max-height: calc(100dvh - var(--venster-boven) - 48px); overflow: auto; padding: 0; border-radius: 14px; background: var(--surface); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.media--alles .media-venster__kop { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 14px 20px; margin-bottom: 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.media-venster__kop h2 { display: block; margin: 0; font-size: 15px; font-weight: 650; color: var(--text); }
.media--alles .media-venster__voet { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding: 12px 20px; background: var(--surface); border-top: 1px solid var(--border); }
.media-field:not(.media--alles) :is(.media-venster__kop, .media-venster__voet) { display: none; }
.pv2 .pv-rij--media .media-field.media--alles .media-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 0 20px; }
.pv2 .pv-rij--media .media-field.media--alles .media-item:first-child { grid-column: auto; grid-row: auto; }
.media--alles .media-tegel--meer { display: none; }
.media--alles > :not(.media-list):not(.media-venster__kop):not(.media-venster__voet):not(input) { margin-left: 20px; margin-right: 20px; }
@media (max-width: 720px) {
    .pv2 .pv-rij--media .media-field[data-kind=image] .media-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pv2 .pv-rij--media .media-field.media--alles .media-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pv2 .media-list > .media-tegel-plek { list-style: none; display: block; }
.pv2 .media-tegel-plek > .media-tegel { width: 100%; }
/* Fotovenster open: de hoofdkolom even geen container (anders is hij het kader van position: fixed). */
.pv2 .pv-hoofd:has(.media--alles) { container-type: normal; }
/* Fotovenster zoals de andere vensters: onder de suitebar (laag en venster hierboven) en naast de zijbalk. */
@media (min-width: 769px) {
    .pv2 .pv-rij--media .media-field.media--alles { left: calc(var(--sidebar-width) + (100vw - var(--sidebar-width)) / 2); width: min(1040px, calc(100vw - var(--sidebar-width) - 48px)); }
}
.pv2 .pv-hoofd .pv-rij .field > .media-field.media--alles { width: min(1040px, calc(100vw - 32px)); }
@media (min-width: 769px) { .pv2 .pv-hoofd .pv-rij .field > .media-field.media--alles { width: min(1040px, calc(100vw - var(--sidebar-width) - 48px)); } }
.media--alles .media-tegel-plek:has(.media-tegel--meer) { display: none; }
/* Fotomenu (app.js): klik/tik op een foto = klein menu (Groot bekijken · Soort kiezen · Als variantfoto ·
   Verbergen/Weer tonen) boven het raster en het fotovenster. */
.fotomenu { position: fixed; z-index: 1160; min-width: 190px; padding: 6px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-2); animation: vrij-in .12s ease; }
.fotomenu__item { appearance: none; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.fotomenu__item:hover, .fotomenu__item:focus-visible { background: var(--surface-3); outline: none; }
.fotomenu__item svg.i { color: var(--muted); }
.fotomenu__item--crit, .fotomenu__item--crit svg.i { color: var(--crit); }
.fotomenu__item:disabled { cursor: default; color: var(--ok); background: transparent; }
.fotomenu__item:disabled svg.i { color: var(--ok); }
@media (max-width: 768px) { .fotomenu__item { min-height: 44px; font-size: 15px; } }
/* Bloknavigatie op één regel: wat niet past gaat in "Meer" (app.js). */
.pv2 .pv-nav__links { flex-wrap: nowrap; overflow: hidden; }
.pv2 .pv-nav__link[hidden] { display: none; }
.pv-nav__meer { position: relative; flex: none; }
.pv-nav__meer > summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 8px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.pv-nav__meer > summary::-webkit-details-marker { display: none; }
.pv-nav__meer > summary:hover, .pv-nav__meer[open] > summary { background: var(--surface-3); color: var(--text); }
.pv-nav__meerlijst { position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; min-width: 220px; padding: 4px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 28px rgba(0, 0, 0, .16); }
.pv-nav__meerlijst .pv-nav__link { justify-content: space-between; width: 100%; box-sizing: border-box; }
/* Aanzichten ingeklapt (partial aanzichten.php, product- en groepspagina). */
details.pv-aanzichten { gap: 0; padding: 0; }
details.pv-aanzichten[open] { padding-bottom: 12px; }
details.pv-aanzichten[open] > :not(summary) { margin: 0 12px; }
details.pv-aanzichten[open] > summary { margin-bottom: 8px; }
.pv-aanzichten > summary.pv-aanzichten__kop { list-style: none; display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 40px; padding: 4px 6px 4px 10px; cursor: pointer; border-radius: 8px; }
.pv-aanzichten > summary::-webkit-details-marker { display: none; }
.pv-aanzichten > summary:hover { background: var(--surface-3); }
.pv-aanzichten__pijl { flex: none; color: var(--muted); transition: transform .25s ease; }
details[open] > summary .pv-aanzichten__pijl { transform: rotate(90deg); }
.pv-aanzichten__stippen { display: inline-flex; gap: 3px; flex: none; }
.pv-aanzichten__stippen i { width: 8px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--border-strong); }
.pv-aanzichten__stippen i.aan { background: var(--ok); box-shadow: none; }
.pv-aanzichten__stippen i:nth-child(3n) { margin-right: 3px; }
.pv-aanzichten__tekst { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.pv-aanzichten > summary .btn { flex: none; margin-left: auto; }
/* Zoekmachine als Google-voorbeeld (stap 6). */
.pv-serpblok { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.pv-serpkop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pv-serpkop__naam { font-size: 13px; font-weight: 600; }
.pv-serp { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.pv-serp__site { font-size: 14px; color: var(--text); }
.pv-serp__url { font-size: 12px; color: var(--muted); }
.pv-serp__titel { font-size: 18px; line-height: 1.3; color: #1a0dab; margin-top: 4px; }
html[data-theme="dark"] .pv-serp__titel { color: #99c3ff; }
.pv-serp__oms { font-size: 13px; line-height: 1.5; color: var(--muted); }
.pv-serp__prijs { font-size: 13px; color: var(--text); margin-top: 2px; }
.pv-serp__tel { font-size: 12px; color: var(--muted); }
/* AI-knopje in de labelregel van een veld met een AI-automatisering. */
.ai-knop { appearance: none; border: 0; margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 6px; background: transparent; color: var(--brand-dark); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: background-color .2s ease; }
.ai-knop:hover { background: var(--brand-tint); }
.ai-knop:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.pv2 .pv-hoofd .pv-rij .field > span:first-child:has(.ai-knop) { display: flex; align-items: center; gap: 4px; overflow: visible; }
/* Prijzen & Marges (stap 7): Verkoop / Inkoop / Marge in één raster, eerste subkop zonder lijn. */
.pv2 .pv-velden > .pv-subkop--eerste { border-top: 0; padding-top: 0; margin-top: 0; }
.pv2 .pv-velden > .pv-som--raster { grid-column: 1 / -1; margin: 0; }
.pv-vak__lev { margin-left: auto; padding-right: 8px; }
.pv-vak--door .pv-vak__tekst { text-decoration: line-through; color: var(--text-3); }
/* Voorraad (stap 7): koppen op één regel, details als tooltip, Vrij als vet getal in groen/rood. */
.pv2 .pv-voorraad { table-layout: fixed; }
.pv2 .pv-voorraad th { white-space: nowrap; }
.pv-voorraad__kop { display: block; overflow: hidden; text-overflow: ellipsis; }
.pv2 .pv-voorraad th:first-child, .pv2 .pv-voorraad td:first-child { width: 34%; min-width: 0; }
.pv2 .pv-voorraad th:last-child { width: 64px; }
.pv2 .pv-voorraad .pv-aantal { width: 96px; }
.pv-voorraad__vrij { font-weight: 600; font-variant-numeric: tabular-nums; }
.pv-voorraad__vrij.is-vrij { color: var(--ok); }
.pv-voorraad__vrij.is-leeg { color: var(--crit); }
@media (max-width: 720px) {
    .pv-aanzichten__tekst { display: none; }
    .pv-aanzichten > summary .btn { font-size: 12px; padding: 0 8px; }
}

/* ── Groepspagina v2 (ontwerp canvas "Groep", 9-10-2026) ────────────────────────────────
   views/products/edit_group.php, binnen .pv2: deelt actiebalk, raster, invoervakken en
   keuzelijsten met het productscherm (blok hierboven). Hier alleen wat de groep extra heeft:
   blokken binnen een kaart (Tekst / Foto's / Zoekmachine, Per variant), de variantentabel met
   de status als keuzepil en een ⋯-menu per rij, de panelen Nieuwe variant / Koppelen. */
.gp-blok { display: flex; flex-direction: column; gap: 12px; }
.gp-blok + .gp-blok, .pv-varacties + .gp-blok, .pv-gaten + .gp-blok { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.gp-blokkop { margin: 0; font-size: 13px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; }
.gp-blokkop span { font-size: 12px; font-weight: 400; color: var(--text-3); }
.pv2 .gp-blok > .pv-velden + .pv-velden { margin-top: 0; }
.gp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--surface-3); color: var(--text); font-size: 12px; white-space: nowrap; }
.gp-chip__n { color: var(--muted); font-variant-numeric: tabular-nums; }
/* Variantentabel: koppen klein en grijs, regels luchtig. */
.pv2 .gp-vartabel .pv-vartabel th { background: transparent; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); padding-top: 0; padding-bottom: 8px; }
.pv2 .gp-vartabel .pv-vartabel td { padding-top: 9px; padding-bottom: 9px; font-variant-numeric: tabular-nums; vertical-align: middle; }
.pv2 .gp-vartabel .pv-vartabel td.act { text-align: right; width: 1%; white-space: nowrap; }
.pv2 .pv-compleet { color: var(--ok); }
/* Panelen Nieuwe variant / Bestaand product koppelen / Assen wijzigen. */
.pv2 .gp-paneel { gap: 12px; padding: 14px; border-radius: 10px; }
.gp-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; width: 100%; }
.gp-raster > .field { grid-column: span 2; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; min-height: 0; }
.gp-raster > .field > span:first-child { font-size: 12.5px; font-weight: 600; color: var(--text); }
.pv2 .gp-raster :is(input[type=text], input[type=number]) { height: 36px; min-height: 36px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); font-size: 13px; padding: 0 10px; width: 100%; box-sizing: border-box; }
.pv2 .gp-raster :is(input):focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); outline: none; }
.gp-paneel__knoppen { display: flex; justify-content: flex-end; gap: 8px; width: 100%; }
.pv2 .gp-paneel .search { max-width: none; }
@media (max-width: 720px) { .gp-raster > .field { grid-column: 1 / -1; } }
/* Zijkolom. */
.pv2 .gp-alleop { align-items: flex-end; }
.pv2 .gp-alleop .field { display: flex; flex-direction: column; gap: 6px; }
.pv2 .gp-alleop .ab__k { height: 36px; min-height: 36px; }
.pv2 .pv-serpblok + .gp-seovelden { margin-top: 14px; }
/* Aanzichten uitgeklapt: rijen Witfoto/Sfeer/Overig met dezelfde ruimte ertussen; focusrand alleen met het toetsenbord. */
.pv-aanzichten > summary:focus { outline: none; }
.pv-aanzichten > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Tabellen in de kaarten (varianten, voorraad, pakketten): kopregel in verhouding met de rijen. */
.pv2 .pv-kaart .table thead th { height: 40px; padding-top: 0; padding-bottom: 0; vertical-align: middle; }
.pv2 .pv-kaart .table td { vertical-align: middle; }
.pv2 .gp-vartabel .pv-vartabel thead th { height: 40px; padding-top: 0; padding-bottom: 0; vertical-align: middle; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--muted); }
.pv2 .pv-hoofd .pv-velden--blok { margin-top: 14px; }
.pv2 .pv-velden--blok + .pv-aanzichten { margin-top: 12px; }
.pv2 .pv-serpblok { border-top: 0; padding-top: 0; }
.pv2 .pv-velden--blok + .pv-serpblok, .pv2 .pv-rij--media + .pv-serpblok { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
/* Uitklapmenu in de actiebalk (Meer acties e.d.): breedte van het paneel buiten .pv2. */
.ab__menu .auto-popup__paneel { width: 460px; }

/* ══ v2-ontwerpcontrole (10-10-2026) ══ */

/* Afstanden zoals het ontwerp: 16 px tussen de blokken, kop 4 px lager (balk → kop 20 px). */
.pv2 .pv-kop { margin: 20px 0 16px; }
.pv2 .pv-form .pv-nav { margin-bottom: 16px; }
/* Kier tussen de plakkende actiebalk en de bloknavigatie (8 px) gevuld met de paginakleur: de inhoud schuift
   er niet zichtbaar doorheen. Uitgeschakelde Opslaan in donker: rustig vlak, niet de lichtste knop. */
.pv2 .pv-form .pv-nav, .pv2.bp .bp-nav { box-shadow: 0 -8px 0 var(--bg), var(--shadow-1); }
html[data-theme="dark"] .pv2 .ab .btn--primary:disabled { background: var(--surface-2); border-color: var(--border); color: var(--muted); opacity: 1; }
/* Afdekking in de paginakleur boven de plakkende balk (12 px tot de testmodus-balk/suitebar) en in
   de 8 px tussen balk en bloknavigatie: bij scrollen schuift er geen kaartinhoud doorheen. */
.pv2 .ab::before, .pv2 .ab::after { content: ""; position: absolute; left: -24px; right: -24px; background: var(--bg); pointer-events: none; }
.pv2 .ab::before { bottom: 100%; height: 12px; }
.pv2 .ab::after { top: 100%; height: 8px; }
/* Actiebalk: iconen 15/13/12 px met lijn 2, knoppen zonder schaduw (alleen de rand). */
.pv2 .ab svg.i { stroke-width: 2; }
.pv2 .ab__terug svg.i { width: 15px; height: 15px; }
.pv2 .ab__rust .ab__k svg.i { width: 13px; height: 13px; }
.pv2 .ab__rust .ab__menu > summary svg.i:last-child:not(:first-child) { width: 12px; height: 12px; stroke-width: 2.2; }
.pv2 .ab__rust .btn.ab__k:not(.btn--primary) { box-shadow: none; }
/* Donkere stand: knoppen 28 px, 12 px, witte rand; tijdens opslaan een draaiend rondje van 14 px. */
.pv2 .ab__knop { height: 28px; font-size: 12px; border-color: rgba(255, 255, 255, .3); }
.pv2 .ab__knop--vol { border-color: var(--on-ink); }
.pv2 .ab--bezig .ab__stip { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; background: transparent; animation: ab-draai .7s linear infinite; }
/* Meer acties: smalle lijst (het AI-venster blijft 460 px). */
.pv2 .ab__menu .ab__menulijst { width: 220px; min-width: 0; padding: 6px; }
/* Paginakop: badge 22 px, meta als één regel met " · " ertussen, link in infokleur. */
.pv2 .pv-kop .badge { height: 22px; padding: 0 8px; font-size: 12px; }
.pv2 .pv-kop__meta { gap: 0; }
.pv2 .pv-kop__meta > span + span::before { content: "·"; margin: 0 .4em; }
.pv2 .pv-kop__meta a { color: var(--info); }
/* Bloknavigatie: knoppen 34 px hoog maar compact (padding 8) zodat er meer op één regel past;
   zoekveld 140 px met icoon 14 px; Verplicht/Relevant/Alle 28 px, 12 px. */
.pv2 .pv-nav__link, .pv2 .pv-nav__meer > summary { height: 34px; }
.pv2 .search.pv-nav__zoek { width: 140px; box-shadow: none; }
.pv2 .pv-nav__zoek svg.i { width: 14px; height: 14px; color: var(--muted); stroke-width: 2; }
.pv2 .pv-nav__modus { gap: 0; }
.pv2 .pv-nav__modus .toggle { height: 28px; min-height: 28px; padding: 0 10px; font-size: 12px; }
@media (max-width: 720px) {
    .pv2 .ab::before, .pv2 .ab::after { display: none; }   /* mobiel plakt de balk direct onder de kop */
    .pv2 .ab__acties { margin-left: auto; }
    .pv2 .search.pv-nav__zoek { width: auto; }
    .pv2 .pv-kop__meta > span:has(a) { flex-basis: 100%; }   /* variantregel op een eigen regel, zonder punt ervoor */
    .pv2 .pv-kop__meta > span:has(a)::before { content: none; }
}

/* Kaart Algemeen in blokken zoals het ontwerp (.blok/.blokkop): blok zonder kop, "Leverancier en
   merk", "Indeling". Tussen blokken een lijn met 14 px erboven en eronder. */
.pv2 .pv-algblok + .pv-algblok { margin-top: 14px; padding-top: 14px; }
.pv2 .pv-algblok > .pv-velden { margin: 0; }
/* Een blok zonder zichtbare velden valt weg, kop incl. (ontwerp: blokken zonder velden worden
   niet getoond). Stand Verplicht en zoeken kijken naar wat daar zichtbaar blijft (alle velden zijn
   altijd zichtbaar sinds 11-10-2026, besluit Kjelt — geen ingeklapte "zelden gevulde" velden meer). */
.pv2 .pv-algblok:not(:has([data-pv-rij])) { display: none; }
.pv2 .pv-form.pv--nodig .pv-kaart .pv-algblok:not(:has(.pv-rij--nodig)),
.pv2 .pv-form.pv--zoek .pv-kaart .pv-algblok:not(:has(.is-treffer)) { display: none; }

/* Productscherm › Content (ontwerp Main.dc.html, blok Tekst/Foto's/Bestanden/Zoekmachine).
   Scope: de kaart Content van het productscherm (de groepspagina heeft geen .pv-tekstblok). */
.pv2 .pv-subkop__meta { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--text-3); }

/* Tekst: beschrijving en USP's over de volle breedte; leeg gedeeld vak met een rustige tekst. */
#sec-con:has(.pv-tekstblok) .pv-tekstblok > .pv-rij { grid-column: 1 / -1; }
#sec-con:has(.pv-tekstblok) .pv-beschrijving { color: var(--text); padding-bottom: 12px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent); }
#sec-con:has(.pv-tekstblok) .pv-tekstblok .pv-vak--gedeeld:not(.pv-vak--tekstblok) { min-height: 72px; align-items: flex-start; padding: 8px 10px; }
#sec-con:has(.pv-tekstblok) .pv-tekstblok .pv-vak--gedeeld:not(.pv-vak--tekstblok) .pv-vak__tekst { white-space: normal; line-height: 1.45; }
#sec-con:has(.pv-tekstblok) .pv-tekstblok .pv-vak--gedeeld:not(.pv-vak--tekstblok) .pv-vak__tekst:empty::before { content: "Nog geen USP's"; color: var(--text-3); }

/* Foto's: het aantal staat in de blokkop, dus geen veldlabel en geen dubbele "zonder aanzicht". */
#sec-con:has(.pv-tekstblok) .pv-rij--media .field:has(> .media-field[data-kind=image]) > span:first-child { display: none; }
#sec-con:has(.pv-tekstblok) .pv-aanzichten__zonder { display: none; }
#sec-con:has(.pv-tekstblok) .pv-velden--blok + .pv-aanzichten + .pv-velden, #sec-con:has(.pv-tekstblok) .pv-velden--blok + .pv-velden { margin-top: 10px; }
/* Verwijderkruisje klein en alleen bij aanwijzen (blijft zichtbaar als hij aangevinkt is). */
#sec-con:has(.pv-tekstblok) .media-field[data-kind=image] .media-item .media-remove { width: 22px; height: 22px; font-size: 11px; opacity: 0; transition: opacity .15s ease; }
#sec-con:has(.pv-tekstblok) .media-field[data-kind=image] .media-item:is(:hover, :focus-within) .media-remove,
#sec-con:has(.pv-tekstblok) .media-field[data-kind=image] .media-item:has(.media-remove input:checked) .media-remove { opacity: 1; }
@media (hover: none) { #sec-con:has(.pv-tekstblok) .media-field[data-kind=image] .media-item .media-remove { opacity: 1; } }
#sec-con:has(.pv-tekstblok) .media-item:has(.media-eigen)::before { top: 28px !important; }
/* Zonder foto's: één toevoegvak over de volle breedte (rood als foto's nog nodig zijn). */
#sec-con:has(.pv-tekstblok) .media-field[data-kind=image] .media-list:not(:has(.media-item)) { grid-template-columns: minmax(0, 1fr); }
#sec-con:has(.pv-tekstblok) .media-field[data-kind=image] .media-list:not(:has(.media-item)) .media-tegel--toevoegen { aspect-ratio: auto; height: 120px; gap: 8px; font-size: 13px; color: var(--muted); }
#sec-con:has(.pv-tekstblok) .media-field[data-kind=image] .media-list:not(:has(.media-item)) .media-tegel--toevoegen::after { content: "Foto's toevoegen"; }
#sec-con:has(.pv-tekstblok) .pv-rij--mist .media-field[data-kind=image] { border: 0; padding: 0; background: none; }
#sec-con:has(.pv-tekstblok) .pv-rij--mist .media-field[data-kind=image] .media-tegel--toevoegen { border: 1px dashed var(--crit); background: var(--crit-bg); color: var(--crit); }

/* Variantfoto-kiezer: zelfde uitklapregel als de aanzichten, zonder uitlegtekst. */
#sec-con:has(.pv-tekstblok) .fk-uitklap { margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
#sec-con:has(.pv-tekstblok) .fk-uitklap > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 10px 4px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
#sec-con:has(.pv-tekstblok) .fk-uitklap > summary::-webkit-details-marker { display: none; }
#sec-con:has(.pv-tekstblok) .fk-uitklap > summary::before { content: ""; flex: none; width: 6px; height: 6px; margin: 0 2px 0 1px; border-right: 1.8px solid var(--muted); border-bottom: 1.8px solid var(--muted); transform: rotate(-45deg); transition: transform .25s ease; }
#sec-con:has(.pv-tekstblok) .fk-uitklap[open] > summary::before { transform: rotate(45deg); }
#sec-con:has(.pv-tekstblok) .fk-uitklap > summary:hover { background: var(--surface-3); }
#sec-con:has(.pv-tekstblok) .fk-uitklap > summary:focus { outline: none; }
#sec-con:has(.pv-tekstblok) .fk-uitklap > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#sec-con:has(.pv-tekstblok) .fk-uitklap > summary > .muted { display: none; }
#sec-con:has(.pv-tekstblok) .fk-uitklap[open] > summary { margin-bottom: 0; }
#sec-con:has(.pv-tekstblok) .fk-uitklap > .fotokiezer { max-width: none; margin: 0; padding: 4px 12px 12px; gap: 8px; }
#sec-con:has(.pv-tekstblok) .fk-uitklap .fk-tegel img, #sec-con:has(.pv-tekstblok) .fk-uitklap .fk-leeg { width: 88px; height: 88px; border-radius: 8px; border-width: 1px; }
#sec-con:has(.pv-tekstblok) .fk-uitklap .fk-leeg { background: var(--surface); font-size: 11px; line-height: 1.3; padding: 6px; overflow-wrap: anywhere; }
#sec-con:has(.pv-tekstblok) .fk-uitklap .fk-groot { right: 4px; bottom: 4px; }

/* Bestanden: raster van 4 (handleiding 50 %, de andere 25 %). Elk bestandsveld is één gestippeld vak:
   de knop vult het vak, de browsertekst ("Geen bestand gekozen", afgekapt tot "G…zen") is weg; wat
   gekozen is staat eronder (.pv-bestand-gekozen, app.js). */
#sec-con:has(.pv-tekstblok) .pv-bestanden > .pv-rij { grid-column: span 1; }
#sec-con:has(.pv-tekstblok) .pv-bestanden > .pv-subkop + .pv-rij { grid-column: span 2; }
#sec-con:has(.pv-tekstblok) .pv-bestanden .media-field { gap: 6px; }
#sec-con:has(.pv-tekstblok) .pv-bestanden .media-field .media-list { margin: 0; }
#sec-con:has(.pv-tekstblok) .pv-bestanden .media-field > input[type=file] { position: static; width: 100%; height: 36px; padding: 0; opacity: 1; pointer-events: auto; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--surface-2); color: transparent; font: inherit; font-size: 0; box-sizing: border-box; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sec-con:has(.pv-tekstblok) .pv-bestanden .media-field > input[type=file]:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 166, 65, .35); }
#sec-con:has(.pv-tekstblok) .pv-bestanden .media-field > input[type=file]::file-selector-button { width: 100%; height: 100%; margin: 0; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; }
@container (max-width: 560px) { #sec-con:has(.pv-tekstblok) .pv-bestanden > .pv-rij, #sec-con:has(.pv-tekstblok) .pv-bestanden > .pv-subkop + .pv-rij { grid-column: 1 / -1; } }

/* Zoekmachine: invoer over de volle breedte, winkelnaam met hoofdletter. */
#sec-con:has(.pv-tekstblok) .pv-seoinvoer > .pv-rij { grid-column: 1 / -1; }
#sec-con:has(.pv-tekstblok) .pv-serp__site { text-transform: capitalize; }

/* Mobiel: "Aanzichten bepalen" als icoonknop, zodat de regel in de kaart past. */
@media (max-width: 600px) {
    #sec-con:has(.pv-tekstblok) .pv-aanzichten > summary .btn { width: 30px; height: 30px; padding: 0; gap: 0; justify-content: center; font-size: 0; }
    #sec-con:has(.pv-tekstblok) .pv-aanzichten > summary .btn svg { margin: 0; }
    #sec-con:has(.pv-tekstblok) .pv-serpkop .pv-subkop__meta { display: none; }
}

/* Badge "Variantfoto" op de tegel die in de kiezer is gekozen (positie in de kiezer = positie in de lijst). */
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(2) input:checked) .media-list > .media-item:nth-child(1)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(3) input:checked) .media-list > .media-item:nth-child(2)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(4) input:checked) .media-list > .media-item:nth-child(3)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(5) input:checked) .media-list > .media-item:nth-child(4)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(6) input:checked) .media-list > .media-item:nth-child(5)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(7) input:checked) .media-list > .media-item:nth-child(6)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(8) input:checked) .media-list > .media-item:nth-child(7)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(9) input:checked) .media-list > .media-item:nth-child(8)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(10) input:checked) .media-list > .media-item:nth-child(9)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(11) input:checked) .media-list > .media-item:nth-child(10)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(12) input:checked) .media-list > .media-item:nth-child(11)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(13) input:checked) .media-list > .media-item:nth-child(12)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(14) input:checked) .media-list > .media-item:nth-child(13)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(15) input:checked) .media-list > .media-item:nth-child(14)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(16) input:checked) .media-list > .media-item:nth-child(15)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(17) input:checked) .media-list > .media-item:nth-child(16)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(18) input:checked) .media-list > .media-item:nth-child(17)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(19) input:checked) .media-list > .media-item:nth-child(18)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(20) input:checked) .media-list > .media-item:nth-child(19)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(21) input:checked) .media-list > .media-item:nth-child(20)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(22) input:checked) .media-list > .media-item:nth-child(21)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(23) input:checked) .media-list > .media-item:nth-child(22)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(24) input:checked) .media-list > .media-item:nth-child(23)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(25) input:checked) .media-list > .media-item:nth-child(24)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(26) input:checked) .media-list > .media-item:nth-child(25)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(27) input:checked) .media-list > .media-item:nth-child(26)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(28) input:checked) .media-list > .media-item:nth-child(27)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(29) input:checked) .media-list > .media-item:nth-child(28)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(30) input:checked) .media-list > .media-item:nth-child(29)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(31) input:checked) .media-list > .media-item:nth-child(30)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(32) input:checked) .media-list > .media-item:nth-child(31)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(33) input:checked) .media-list > .media-item:nth-child(32)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(34) input:checked) .media-list > .media-item:nth-child(33)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(35) input:checked) .media-list > .media-item:nth-child(34)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(36) input:checked) .media-list > .media-item:nth-child(35)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(37) input:checked) .media-list > .media-item:nth-child(36)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(38) input:checked) .media-list > .media-item:nth-child(37)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(39) input:checked) .media-list > .media-item:nth-child(38)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(40) input:checked) .media-list > .media-item:nth-child(39)::before,
#sec-con:has(.pv-tekstblok) .media-field:has(.fotokiezer > .fk-tegel:nth-child(41) input:checked) .media-list > .media-item:nth-child(40)::before { content: "Variantfoto"; position: absolute; top: 6px; left: 6px; z-index: 2; font-size: 11px; font-weight: 600; line-height: 1.4; padding: 2px 7px; border-radius: 6px; background: var(--brand-tint); color: var(--brand-dark); pointer-events: none; }

/* Beide tabellen staan direct in de kaart (geen eigen kader), kop zonder grijze band, cellen 9/10 px. */
.pv2 :is(#sec-var, #sec-vrd) .table-scroll { box-shadow: none; border-radius: 0; }
.pv2 :is(#sec-var, #sec-vrd) .table thead th { height: 40px; padding: 0 10px; background: transparent; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pv2 :is(#sec-var, #sec-vrd) .table td { padding: 9px 10px; vertical-align: middle; font-variant-numeric: tabular-nums; }
.pv2 :is(#sec-var, #sec-vrd) .table td.num { white-space: nowrap; }
.pv2 :is(#sec-var, #sec-vrd) .titelcel__naam { font-weight: 500; }   /* "Dit product" even zwaar als de gelinkte rijen */
/* Varianten en voorraad: koppen volgens de tabelstandaard (klein, hoofdletters); foto 36 px met rand. */
.pv2 :is(#sec-var, #sec-vrd) .table thead th { font: 600 11px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.pv2 #sec-var .pv-vartabel__foto { width: 36px; }
.pv2 #sec-var .pv-vartabel__foto img, .pv2 #sec-var .pv-vartabel__geenfoto { box-sizing: border-box; border: 1px solid var(--border); }
.pv2 #sec-var td.act { width: 1%; white-space: nowrap; text-align: right; }
.pv2 #sec-var td.act .link-btn { font-size: 12.5px; }
/* Voorraad: korte magazijnnaam op max. twee regels (volle naam in de tooltip), eenheid één keer in de kop;
   de cellen tonen alleen het getal (het invoervak van dit product houdt zijn eenheidsblok). */
.pv2 #sec-vrd .table thead th { white-space: normal; }
.pv-voorraad__eenheid { display: block; font-weight: 500; letter-spacing: 0; text-transform: none; }
.pv2 #sec-vrd .pv-voorraad__kop { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
.pv2 #sec-vrd .pv-voorraad th:first-child, .pv2 #sec-vrd .pv-voorraad td:first-child { width: 30%; }
.pv2 #sec-vrd .pv-voorraad th:last-child, .pv2 #sec-vrd .pv-voorraad td:last-child { width: 72px; padding-right: 12px; }
/* Aantallen: invoervak en vlak getal (andere varianten, groepstotaal) in hetzelfde vak van 96 × 32, zodat de cijfers onder elkaar staan. */
.pv2 #sec-vrd .pv-aantal { display: flex; align-items: stretch; width: 96px; height: 32px; margin-left: auto; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; background: var(--surface); }
.pv2 #sec-vrd .pv-aantal > input { flex: 1; min-width: 0; height: 30px !important; min-height: 30px !important; padding: 0 8px 0 0; text-align: right; font-size: 13px; -moz-appearance: textfield; appearance: textfield; }
.pv2 #sec-vrd .pv-aantal > input::-webkit-inner-spin-button, .pv2 #sec-vrd .pv-aantal > input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }   /* pijltjes namen ±16 px: cijfer stond niet onder de vlakke getallen (pijltoetsen werken nog) */
.pv2 #sec-vrd .pv-aantal > .muted { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; min-width: 0; padding: 0; border: 0; background: var(--surface-3); color: var(--muted); font-size: 12px; }
.pv2 #sec-vrd .pv-aantal--plat { border-color: transparent; background: transparent; }
.pv2 #sec-vrd .pv-aantal--plat > .muted { background: transparent; color: var(--text-3); }
.pv-aantal__n { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; font-size: 13px; }
.pv2 #sec-vrd tfoot td { border-top: 1px solid var(--border); }
@media (max-width: 720px) {
    .pv2 #sec-vrd .pv-voorraad { table-layout: auto; }
    .pv2 #sec-vrd .pv-voorraad th:first-child, .pv2 #sec-vrd .pv-voorraad td:first-child { width: auto; min-width: 110px; }
    .pv2 #sec-vrd .pv-voorraad__kop { min-width: 76px; max-width: 110px; margin-left: auto; }
}

/* Tabellijnen lopen door tot de kaartranden (besluit Kjelt 10-10-2026, ontwerp Main): de tabel steekt
   20 px (de card__body-marge) aan beide kanten uit; eerste/laatste cel houden die 20 px binnenmarge. */
.pv2 :is(#sec-var, #sec-vrd) .table-scroll { margin-left: -20px; margin-right: -20px; }
.pv2 :is(#sec-var, #sec-vrd) .table tr > :first-child { padding-left: 20px; }
.pv2 :is(#sec-var, #sec-vrd) .table tr > :last-child { padding-right: 20px; }
.pv2 #sec-var .table tbody tr:last-child td { border-bottom: 0; }

/* Invoervak-staten voor élke invoersoort (tekst, getal, datum, keuzelijst, boomkeuze, tekstvak,
   meerdere waarden): de basisregel voor invoer in .pv2 won van de gat/mist-regels. */
.pv2 .pv-hoofd .pv-rij--gat :is(input[type=text], input[type=number], input[type=date], select, textarea:not(.js-richtext)) { border-color: var(--warn); background-color: var(--warn-bg); }
.pv2 .pv-hoofd .pv-rij--mist :is(input[type=text], input[type=number], input[type=date], select, textarea:not(.js-richtext)) { border-color: var(--crit); background-color: var(--crit-bg); }
.pv2 .pv-hoofd .pv-rij--gat .multi-field__row > .muted { border-color: var(--warn); }
.pv2 .pv-hoofd .pv-rij--mist .multi-field__row > .muted { border-color: var(--crit); background: color-mix(in srgb, var(--crit) 10%, transparent); }
.pv2 .pv-hoofd .pv-rij--gat .input-unit:not(.js-kleurcode) { border-color: var(--warn); background-color: var(--warn-bg); }
.pv2 .pv-hoofd .pv-rij--mist .input-unit:not(.js-kleurcode) { border-color: var(--crit); background-color: var(--crit-bg); }
.pv2 .pv-hoofd .pv-rij :is(.input-unit:not(.js-kleurcode), .multi-field__row) input { -moz-appearance: textfield; }
.pv2 .pv-hoofd .pv-rij :is(.input-unit, .multi-field__row) input::-webkit-inner-spin-button,
.pv2 .pv-hoofd .pv-rij :is(.input-unit, .multi-field__row) input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Meerdere waarden: focus als één vak (rand + ring om waarde én eenheid). */
.pv2 .pv-hoofd .multi-field__row { border-radius: 8px; }
.pv2 .pv-hoofd .multi-field__row:focus-within:has(> .muted) { box-shadow: 0 0 0 3px var(--brand-ring); }

/* Label boven het vak: lange labels breken over hooguit twee regels; vakken in een rij blijven
   op één lijn (het label groeit omhoog). */
.pv2 .pv-hoofd .pv-rij > .field { position: relative; height: 100%; box-sizing: border-box; justify-content: flex-end; --pv-teken-r: 10px; }
.pv2 .pv-hoofd .pv-rij > .field > span:first-child:not(:has(.ai-knop)) { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* Ja/nee in het veldraster even hoog als de vakken (36 px), zodat label en vak op één lijn staan met de buren (nacontrole 18-10). */
.pv2 .pv-hoofd .pv-velden .pv-jn.pv-jn { height: 36px; }
.pv2 .pv-hoofd .pv-velden .pv-jn .pv-jn__k.pv-jn__k { height: 32px; }
/* Ja/nee: label altijd op één regel (ellipsis, volledige naam in de tooltip); twee regels zetten de
   knoppen lager dan de vakken ernaast. */
.pv2 .pv-hoofd .pv-rij--jn > .field > span:first-child:not(:has(.ai-knop)) { display: block; white-space: nowrap; -webkit-line-clamp: unset; line-clamp: none; }
/* Hint bij een boomkeuze ("Telt ook als: Hout") staat rechts ín het vak, als klein bronwoord —
   onder het vak liet hij de vakken ernaast wegzakken. */
.pv2 .pv-hoofd .pv-rij > .field > .js-tree-path { position: absolute; right: 32px; bottom: 0; height: 36px; max-width: 45%; display: flex; align-items: center; margin: 0; font-size: 11.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.pv2 .pv-hoofd .pv-rij > .field > .js-tree-path[hidden] { display: none; }

/* Bron-tekens: het label zegt alleen wát het veld is (naam, *, variant-as). Het gat-teken, het
   handmatig-stipje en het slot (altijd uit feed) staan rechts ín het vak; bij ja/nee naast de
   knoppen. Gedeeld: alleen "Groep ↗" in het vak, geen tweede teken achter het label. */
.pv2 .pv-hoofd .pv-rij:has(.pv-vak__groep) .src--groep { display: none; }
.pv2 .pv-hoofd .pv-rij > .field > span:first-child .pv-gat-teken,
.pv2 .pv-hoofd .pv-rij > .field > span:first-child .src--hand,
.pv2 .pv-hoofd .pv-rij:has(.pv-vak--slot) > .field > span:first-child .src--lock { position: absolute; right: var(--pv-teken-r); bottom: 11px; z-index: 2; display: flex; align-items: center; height: 14px; margin: 0; }
.pv2 .pv-hoofd .pv-rij > .field > span:first-child .pv-gat-teken { width: 14px; pointer-events: none; }
.pv2 .pv-hoofd .pv-rij .src--hand::before { vertical-align: 0; }
.pv2 .pv-hoofd .pv-rij > .field:has(> :is(select, .kies)) { --pv-teken-r: 32px; }
.pv2 .pv-hoofd .pv-rij > .field:has(> textarea) { --pv-teken-r: 22px; }
.pv2 .pv-hoofd .pv-rij > .field:has(> .input-unit:not(.input-unit--prijs):not(.js-kleurcode)),
.pv2 .pv-hoofd .pv-rij > .field:has(.multi-field__row > .muted),
.pv2 .pv-hoofd .pv-rij > .field:has(> .pv-vak--na) { --pv-teken-r: 54px; }
.pv2 .pv-hoofd .pv-rij > .field:has(> .pv-jn) .src--hand { right: auto; left: 118px; bottom: 11px; }
/* Teken bij een leeg veld, ín het vak (akkoord Kjelt 11-10-2026): oranje ⚠ = meestal gevuld (gat), rood rondje
   met uitroepteken = verplicht leeg (mist), zodat ze ook zonder kleur te onderscheiden zijn. Ja/nee: het teken
   staat in de knoppenrij, rechts van "Nee" (het label-teken .pv-gat-teken valt daar weg). Foto's hebben hun
   eigen rode toevoegtegel. */
.pv2 .pv-hoofd .pv-rij > .field:has(> .pv-jn) > span:first-child .pv-gat-teken { display: none; }
.pv2 .pv-hoofd .pv-rij:is(.pv-rij--gat, .pv-rij--mist) > .field > .pv-jn::after { flex: none; align-self: center; width: 14px; height: 14px; margin: 0 6px 0 4px; }
.pv2 .pv-hoofd .pv-rij--gat > .field > .pv-jn::after { content: "" / ""; }
.pv2 .pv-hoofd .pv-rij--gat > .field > .pv-jn::after { background: var(--warn); -webkit-mask: var(--pv-teken-gat) center / 14px no-repeat; mask: var(--pv-teken-gat) center / 14px no-repeat; }
.pv2 .pv-hoofd { --pv-teken-gat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3Cpath d='M10.3 3.9 2.5 18a2 2 0 0 0 1.7 3h15.6a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E"); }
.pv2 .pv-hoofd .pv-rij--mist:not(.pv-rij--media) > .field:not(:has(> .pv-jn))::after,
.pv2 .pv-hoofd .pv-rij--mist > .field > .pv-jn::after { content: "!" / ""; display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--crit); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1; pointer-events: none; }
html[data-theme="dark"] .pv2 .pv-hoofd .pv-rij--mist > .field::after,
html[data-theme="dark"] .pv2 .pv-hoofd .pv-rij--mist > .field > .pv-jn::after { color: var(--bg); }
.pv2 .pv-hoofd .pv-rij--mist:not(.pv-rij--media) > .field:not(:has(> .pv-jn))::after { position: absolute; right: var(--pv-teken-r); bottom: 11px; z-index: 2; }
.pv2 .pv-hoofd .pv-rij--mist:has(.pv-vak--slot) > .field::after { right: calc(var(--pv-teken-r) + 20px); }
/* Met een teken in het vak: eenheid vast 48 px breed, zodat het teken er netjes vóór staat. */
.pv2 .pv-hoofd .pv-rij:is(.pv-rij--gat, :has(.src--hand), :has(.pv-vak--slot .pv-vak__eenheid)) :is(.input-unit:not(.input-unit--prijs):not(.js-kleurcode) > .muted, .input-unit--week::before, .multi-field__row > .muted, .pv-vak--na > .pv-vak__eenheid:last-child) { width: 48px; min-width: 48px; padding: 0; box-sizing: border-box; justify-content: center; }
.pv2 .pv-hoofd .pv-rij:is(.pv-rij--gat, :has(.src--hand)) > .field > :is(input[type=text], select) { padding-right: 30px; }
.pv2 .pv-hoofd .pv-rij:has(.src--hand) .input-unit > input, .pv2 .pv-hoofd .pv-rij:has(.src--hand) .multi-field__row > input { padding-right: 18px; }
.pv2 .pv-hoofd .pv-rij:has(.pv-vak--slot) > .field > .pv-vak--slot { padding-right: 30px; }
.pv2 .pv-hoofd .pv-rij:has(.pv-vak--slot) > .field > .pv-vak--slot.pv-vak--na { padding-right: 0; }

/* Meerkeuze met chips: het zoekveld in het vak is 26 px (won van de 36 px-invoerregel), zodat het
   vak met één regel chips 36 px hoog blijft. */
.pv2 .pv-hoofd .pv-rij .kies--multi .kies__invoer { height: 26px; padding: 0 4px; }

/* Levertijd: "week" achter het getal, zoals elke eenheid. */
.pv2 .input-unit--week::before { order: 2; }

/* Meerdere waarden (maten): het vak vult de kolom; "+" (waarde toevoegen) rechts in de labelregel,
   zichtbaar bij aanwijzen of focus van de rij (op aanraakschermen altijd). */
.pv2 .pv-hoofd .pv-rij .multi-field { display: flex; flex-direction: column; gap: 4px; }
.pv2 .pv-hoofd .pv-rij .multi-field__row { margin: 0; gap: 0; }
.pv2 .pv-hoofd .pv-rij > .field:has(> .multi-field) > span:first-child { padding-right: 26px; }
.pv2 .pv-hoofd .pv-rij .multi-field__add { position: absolute; top: -3px; right: 0; width: 22px; height: 22px; border-radius: 6px; opacity: 0; transition: opacity .15s ease, background-color .15s ease; }
.pv2 .pv-hoofd .pv-rij:is(:hover, :focus-within) .multi-field__add, .pv2 .pv-hoofd .pv-rij .multi-field__add:focus-visible { opacity: 1; }
@media (hover: none) { .pv2 .pv-hoofd .pv-rij .multi-field__add { opacity: 1; } }

/* Keuzelijst met kleuren: geen ruimte voor het bolletje als er (nog) geen kleur is. */
.pv2 .field:has(> .kies > .kleur-dot[hidden]) .kies__knop, .pv2 .field:has(> .kleur-dot[hidden]) .kies__knop { padding-left: 10px; }
.pv2 .pv-hoofd .pv-rij .field:has(> .kleur-dot[hidden]) > select { padding-left: 10px; }

/* Subkop alleen als er velden onder zichtbaar zijn (form.php: --zelden / --zonder-nodig). */
.pv2 .pv-form.pv--nodig .pv-velden > .pv-subkop--zonder-nodig, .pv2 .pv-form.pv--zoek .pv-velden > .pv-subkop--zelden { display: none; }

/* Zelden-knop: neutrale link onderaan de kaart, met lucht boven. */
.pv2 .pv-hoofd .pv-zelden-knop { margin-top: 14px; }

/* Logistiek: pakketten als eigen blok met kop, kale tabel (kop in kleine hoofdletters), getallen
   rechts met de eenheid als grijs blokje in de cel; daaronder de overige velden na een lijn. */
.pv2 .pv-pakketten__kop { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.pv2 .pv-pakketten__kop > span { font-size: 12px; font-weight: 400; color: var(--text-3); }
.pv2 .pv-pakketten > .table-scroll { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.pv2 .pv-kaart .pv-pakkettabel { border: 0; background: transparent; }
.pv2 .pv-kaart .pv-pakkettabel thead th { height: auto; padding: 0 10px 8px; background: transparent; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--border); }
.pv2 .pv-kaart .pv-pakkettabel thead th .req { letter-spacing: 0; }
.pv2 .pv-kaart .pv-pakkettabel td { padding: 6px 10px; height: 46px; box-sizing: border-box; border-bottom: 1px solid var(--border); background: transparent; }
.pv2 .pv-kaart .pv-pakkettabel :is(th, td):first-child { padding-left: 10px; }
.pv2 .pv-kaart .pv-pakkettabel td.td-acties { width: 36px; padding: 0 4px; text-align: center; }
.pv2 .pv-celvak { display: inline-flex; align-items: stretch; width: 96px; height: 32px; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; background: var(--surface); vertical-align: middle; transition: border-color .3s ease, box-shadow .3s ease; }
.pv2 .pv-celvak:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.pv2 .pv-pakkettabel .pv-celvak > input { flex: 1 1 auto; width: auto; min-width: 0; height: 100%; min-height: 0; margin: 0; padding: 0 8px; border: 0; border-radius: 0; box-shadow: none; background: transparent; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.pv2 .pv-pakkettabel .pv-celvak > input:focus { outline: none; box-shadow: none; }
.pv2 .pv-pakkettabel .pv-celvak > input::-webkit-inner-spin-button, .pv2 .pv-pakkettabel .pv-celvak > input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pv2 .pv-celvak__eenheid { display: flex; align-items: center; justify-content: center; min-width: 20px; padding: 0 8px; background: var(--surface-3); color: var(--muted); font-size: 12px; }
.pv2 .pv-celvak:has(> input[readonly]) { border-color: transparent; background: transparent; box-shadow: none; }
.pv2 .pv-celvak:has(> input[readonly]) > .pv-celvak__eenheid { background: transparent; padding: 0 0 0 2px; color: var(--text-3); }
.pv2 .pv-pakkettabel td.num > .muted { color: var(--text-3); }
.pv2 .pv-pakkettabel .js-pv-pakket-weg { border: 0; background: transparent; box-shadow: none; color: var(--muted); }
.pv2 .pv-pakkettabel .js-pv-pakket-weg:hover { color: var(--crit); background: var(--surface-3); }
.pv2 .pv-pakketten__acties { margin-top: 8px; }
.pv2 .pv-pakketten__acties .link-btn { color: var(--brand-dark); font-size: 12.5px; }
.pv2 .pv-hoofd .pv-pakketten + .pv-velden { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

/* Staat er iets onder het veld (Verschilt per variant, melding), dan groeit de rij mee: height 100%
   liet dat over de volgende regel vallen (groepspagina, SEO-velden). */
.pv2 .pv-hoofd .pv-rij > .field:not(:last-child) { height: auto; }
/* Pakkettabel: lijnen lopen door tot de kaartrand, zoals Varianten en Voorraad (besluit Kjelt 10-10-2026). */
.pv2 .pv-pakketten > .table-scroll { margin-left: -20px; margin-right: -20px; }
.pv2 .pv-kaart .pv-pakkettabel tr > :first-child { padding-left: 20px; }
.pv2 .pv-kaart .pv-pakkettabel tr > :last-child { padding-right: 20px; }

/* Blokkop met uitleg ("Marge berekend"), zoals .blokkop span in het ontwerp. */
.pv2 .pv-velden > .pv-subkop .pv-subkop__uitleg { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--text-3); }
/* Netto inkoopprijs wordt berekend: geen rode ster en een gewoon label (ontwerp "Netto inkoopprijs");
   ontbreekt hij, dan kleurt Bruto. Alleen weergave: de rij blijft meetellen als verplicht. */
.pv2 .pv-hoofd [data-pv-prijzen] .pv-rij:has([data-pv-afgeleid="kostprijs"]) .field > span:first-child { color: var(--muted); font-weight: 500; }
.pv2 .pv-hoofd [data-pv-prijzen] .pv-rij:has([data-pv-afgeleid="kostprijs"]) .field > span:first-child .req { display: none; }
/* Leverancierskorting: de waarde blijft altijd leesbaar, een lange leveranciersnaam kort af. */
.pv2 [data-pv-reken="korting-vak"] > .pv-vak__tekst { flex: none; }
.pv2 [data-pv-reken="korting-vak"] > .pv-vak__lev { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Lege prijsvakken blijven leeg (ontwerp): geen "0.00" met punt als placeholder. */
.pv2 [data-pv-prijzen] input::placeholder { color: transparent; }

/* Ontwerp Main.dc.html (aside): inhoud 14px onder de kop, Status met 12px tussen keuze en meldingen, 8px daarbinnen */
.pv2 .pv-zij .card__body.pv-zij__body { padding-top: 14px; gap: 12px; }
.pv-zij__meld { display: flex; flex-direction: column; gap: 8px; }
.pv-zij__meld:not(:has(> :not([hidden]))) { display: none; }
.pv-zij .pv-ok, .pv-zij .pv-gaten { margin: 0; color: var(--text); }
.pv-zij .pv-poort, .pv-zij .pv-poort__lijst { gap: 8px; }
.pv-zij .pv-poort__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pv-zij .pv-poort__kop .muted { font-weight: 400; }
/* Poortregel: rood rondje (ontwerp .poort__ico) in plaats van het waarschuwingsicoon; ook voor regels die app.js toevoegt */
.pv-zij .pv-poort__item { padding: 0; }
.pv-zij .pv-poort__item > svg.i { display: none; }
.pv-zij .pv-poort__item::before { content: ""; width: 16px; height: 16px; flex: none; box-sizing: border-box; border: 2px solid var(--crit); border-radius: 50%; }
/* Herkomst/Organisatie: rijen met een lijn ertussen (ontwerp .zij-rij), label grijs, waarde rechts */
.pv2 .pv-zij .dl-kv { gap: 0; align-items: baseline; }
.pv2 .pv-zij .dl-kv:not(.dl-kv--stapel) > dd { padding-left: 12px; }
.pv2 .pv-zij .dl-kv > dt, .pv2 .pv-zij .dl-kv > dd { padding: 10px 0; border-top: 1px solid var(--border); }
.pv2 .pv-zij .pv-zij__body > .dl-kv:first-child > dt:first-of-type,
.pv2 .pv-zij .pv-zij__body > .dl-kv:first-child > dd:first-of-type { border-top: 0; padding-top: 0; }
.pv2 .pv-zij .pv-zij__body > .dl-kv + .dl-kv { margin-top: -12px; }
.pv2 .pv-zij .dl-kv--stapel { gap: 4px; }
.pv2 .pv-zij .dl-kv--stapel > dt { font-size: 12px; padding-bottom: 0; }
.pv2 .pv-zij .dl-kv--stapel > dd { padding-top: 0; border-top: 0; }
.pv-zij .pv-dd-sub .badge { height: 18px; padding: 0 6px; font-size: 11px; }

/* Varianten: Ontkoppelen neutraal (geen merkkleur), Compleet met tekst zoals Mist n; koppelpaneel zoekt over de volle breedte. */
.pv2 #vg-attach, .pv2 #vg-attach .search { width: 100%; }
/* Content: Zoekmachine is een eigen blok (kop + scheidingslijn zoals Tekst en Foto's). */
.pv2 .gp-blok > .pv-serpblok { margin-top: 0; padding-top: 0; border-top: 0; }
.pv2 .gp-blok > .pv-serpblok + .gp-seovelden { margin-top: 0; }
/* Variantopbouw: Assen wijzigen en Groep opheffen op één regel onder een lijn; open paneel over de volle breedte. */
.pv2 .gp-opbouwacties { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.pv2 .gp-opbouwacties > .pv-uitklap[open] { flex: 1 1 100%; }

/* Mobiel: de .sr-only-teksten in de tabel blijven binnen de scrollcontainer (anders werd de pagina 700 px breed). */
.pv2 .gp-vartabel { position: relative; }
/* Varianttitels volledig (afbreken i.p.v. afkappen). */
.pv2 .gp-vartabel .pv-vartabel__titel :is(.titelcel, .titelcel__tekst, a.row) { white-space: normal; overflow: visible; text-overflow: clip; }
/* Lijst met tekstwaarden (Tags): volle breedte, en leeg-maar-meestal-gevuld oranje zoals elk ander vak. */
.pv2 .pv-hoofd .pv-rij:has(> .field > .multi-field .multi-field__row > input[type=text]) { grid-column: 1 / -1; }
.pv2 .pv-form .pv-rij--gat .multi-field__row > input[type=text] { border-color: var(--warn); background-color: var(--warn-bg); }

/* ── Bundelpagina v2 (ontwerp canvas "Bundel", 10-10-2026) ──────────────────────────────────
   views/bundles/show.php, binnen .pv2.bp: deelt actiebalk, paginakop, kaartkoppen, raster en
   ja/nee met het productscherm (blokken hierboven). Hier alleen wat de bundel extra heeft:
   bloknavigatie buiten het formulier, de onderdelentabel met kopregels per keuzegroep, de
   −/+-stapper, Los te koop als ja/nee-segment, de combinatietabel met vaste kolommen en fotokiezer
   als popover, de kaart Prijs en de eigen afbeeldingen. */
.bp .bp-nav { position: sticky; top: calc(var(--suitebar-height) + var(--pv-boven) + 12px + 52px + 8px); z-index: 40; display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin-bottom: 16px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.bp .bp-kaart { scroll-margin-top: calc(var(--suitebar-height) + var(--pv-boven) + 150px); }
.bp-soort { background: var(--bundel-bg); color: var(--bundel); gap: 5px; }
html[data-theme="dark"] .bp-soort { background: var(--bundel-bg); color: var(--bundel); }
.bp-klein { margin: 0; font-size: 12.5px; }
/* Opbouw: per stap het label en de waarden als chips. */
.bp-opbouw { display: flex; flex-direction: column; gap: 12px; }
.bp-opbouw > * { margin: 0; }
.bp-stappen { display: flex; flex-direction: column; }
.bp-stap { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.bp-stap:first-child { border-top: 0; padding-top: 0; }
.bp-stap__label { font-weight: 600; }
.bp-chip--geen { color: var(--muted); font-style: italic; }
/* Onderdelen: één tabel tot de kaartrand (zoals de tabellen op het productscherm), vaste kolommen; per blok
   een kopregel (Vast / Keuzegroep) als volle rij met lichte achtergrond en alleen een bovenlijn. */
.bp-tabelvak { margin: 0 -20px; }
@media (min-width: 721px) {
    .bp-tabel :is(th, td):first-child { padding-left: 20px; }
    .bp-tabel :is(th, td):last-child { padding-right: 20px; }
    .bp-tabel .bp-kop > td:first-child, .bp-tabel .bp-kop > td:last-child { padding: 0; }
}
.bp-tabel { table-layout: fixed; width: 100%; overflow: visible; }
.bp-tabel .bp-k-prijs { width: 96px; }
.bp-tabel .bp-k-status { width: 104px; }
.bp-tabel .bp-k-vrij { width: 64px; }
.bp-tabel .bp-k-los { width: 112px; }   /* ja/nee-segment (Los te koop) */
.bp-tabel .bp-k-aantal { width: 116px; }
.bp-tabel .bp-k-act { width: 40px; }
.pv2 .bp-tabel thead th { height: 40px; padding-top: 0; padding-bottom: 0; vertical-align: middle; background: transparent; }
.bp-tabel td { padding-top: 6px; padding-bottom: 6px; height: 48px; box-sizing: border-box; }
.bp-tabel td.act { text-align: right; padding-right: 8px; }
.bp-tabel .titelcel { width: 100%; }
.bp-rij--keuze > td:first-child { box-shadow: inset 2px 0 0 var(--info); padding-left: 20px; }
.bp-rij--vast > td:first-child { box-shadow: inset 2px 0 0 var(--border-strong); padding-left: 20px; }
.bp-rij--extra td { height: 40px; }
.bp-rij--extra form { margin: 0; }
.bp-rij--extra .link-btn { display: inline-flex; align-items: center; gap: 4px; }
.bp-kop > td { padding: 0; height: auto; border-top: 1px solid var(--border); border-bottom: 0; background: var(--surface-2); }
.bp-kop__in { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 20px; white-space: nowrap; min-width: 0; overflow: hidden; }
.bp-kop__ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--surface-3); color: var(--muted); }
.bp-kop--keuze .bp-kop__ico { background: var(--info-bg); color: var(--info); }
.bp-kop__soort { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.bp-kop__naam { flex: none; font-size: 13px; font-weight: 650; color: var(--text); }
a.bp-kop__link { display: inline-flex; align-items: center; gap: 3px; text-decoration: none; }
a.bp-kop__link svg.i { color: var(--text-3); }
a.bp-kop__link:hover { color: var(--text); text-decoration: underline; }
a.bp-kop__link:hover svg.i { color: var(--brand-dark); }
.bp-kop__sub { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--text-3); }
.bp-kop__rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.bp-kop__rechts form { margin: 0; display: flex; align-items: center; gap: 6px; }
.pv2 .bp-optienaam input[type=text] { width: 132px; height: 30px; min-height: 30px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); font-size: 13px; }
.pv2 .bp-optienaam input[type=text]:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); outline: none; }
.bp-optienaam .btn--icon { width: 30px; height: 30px; min-height: 30px; }
.bp-optioneel__lbl { font-size: 12px; color: var(--muted); }
.pv2 .bp-optioneel .pv-jn { height: 30px; }
.pv2 .bp-optioneel .pv-jn__k { height: 26px; min-width: 36px; padding: 0 8px; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pv2 .bp-optioneel .pv-jn__k input { position: absolute; opacity: 0; pointer-events: none; }
/* −/+ stapper (aantal): kiezen = direct opslaan (app.js, blok "Bundelpagina v2"). */
.bp-aantal { margin: 0; }
.bp-stapper { display: flex; align-items: center; width: 104px; height: 32px; margin-left: auto; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); box-sizing: border-box; overflow: hidden; }
.bp-stapper:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.bp-stapper__k { appearance: none; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 2px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.bp-stapper__k:hover { background: var(--surface-3); color: var(--text); }
.pv2 .bp-stapper input[type=number] { flex: 1; min-width: 0; width: 100%; height: 30px; min-height: 30px; padding: 0 2px; border: 0; background: transparent; box-shadow: none; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.bp-stapper input::-webkit-outer-spin-button, .bp-stapper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bp-stapper--los input[type=number] { padding: 0 8px; }
/* Los te koop: ja/nee-segment in een formulier dat bij wijzigen verstuurt. */
.bp-los { margin: 0; }
/* ⋯-menu per rij: zelfde menu als de actiebalk. */
.bp-rijmenu { display: inline-block; text-align: left; }
.bp-rijmenu > summary { list-style: none; }
.bp-rijmenu > summary::-webkit-details-marker { display: none; }
.bp-rijmenu .auto-popup__paneel.ab__menulijst { width: 200px; min-width: 0; padding: 6px; }
.bp-rijmenu .ab__menulijst form { margin: 0; display: flex; flex-direction: column; }
/* Toevoegregel in hetzelfde raster. */
.bp-toevoegen td { border-bottom: 0; padding-top: 10px; height: auto; }
.pv2 .bp-toevoegen input[type=text] { width: 100%; height: 32px; min-height: 32px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); font-size: 13px; box-sizing: border-box; }
.pv2 .bp-toevoegen input[type=text]:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); outline: none; }
/* Combinaties: vaste kolommen; de foto als miniatuur met een knop die de fotokiezer als popover opent. */
.bp-combos .table-scroll { overflow: visible; }
.bp-combos .combo-tabel { table-layout: fixed; width: 100%; overflow: visible; }
.bp-combos .combo-tabel th:nth-child(1) { width: 72px; }
.bp-combos .combo-tabel th:nth-child(3) { width: 76px; }
.bp-combos .combo-tabel th:nth-child(4) { width: 116px; }
.bp-combos .combo-tabel th:nth-child(5) { width: 120px; }
.bp-combos .combo-tabel th:nth-child(6) { width: 132px; }
.pv2 .bp-combos .combo-tabel thead th { height: 40px; padding-top: 0; padding-bottom: 0; vertical-align: middle; background: transparent; }
.bp-combos .combo-tabel td { padding-top: 8px; padding-bottom: 8px; }
.bp-combos .combo-tabel__samen { min-width: 0; overflow: hidden; }
.bp-combos .combo-tabel th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-combos .combo-tabel__foto { position: relative; min-width: 0; white-space: nowrap; }
.bp-combos .combo-tabel__foto > * { vertical-align: middle; }
.bp-combos .combo-tabel__thumb { width: 32px; height: 32px; border-radius: 6px; }
.bp-combos .combo-tabel__foto:has(.fk-details:not([data-eigen=""])) .combo-tabel__thumb { outline: 2px solid var(--brand); outline-offset: 1px; }
.bp-combos .combo-tabel__foto > small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bp-combos .combo-tabel__foto .fk-details { display: inline-block; margin: 0 0 0 4px; }
.bp-combos .combo-tabel__foto .fk-details > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; font-size: 0; color: var(--text-3); }
.bp-combos .combo-tabel__foto .fk-details > summary::-webkit-details-marker { display: none; }
.bp-combos .combo-tabel__foto .fk-details > summary svg.i { width: 16px; height: 16px; }
.bp-combos .combo-tabel__foto .fk-details > summary:hover, .bp-combos .combo-tabel__foto .fk-details[open] > summary { background: var(--surface-3); color: var(--text); }
.bp-combos .fk-details[open] > .fotokiezer { position: absolute; z-index: 25; top: calc(100% - 2px); left: -300px; width: 560px; max-width: calc(100vw - 64px); max-height: 380px; overflow: auto; margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 28px rgba(0, 0, 0, .16); white-space: normal; }
.bp-combos .fotokiezer .fk-tegel img, .bp-combos .fotokiezer .fk-leeg { width: 80px; height: 80px; border-radius: 8px; }
.pv2 .bp-combos :is(.combo-tabel__prijs, .combo-tabel__sku) { width: 100%; max-width: none; height: 32px; min-height: 32px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 13px; box-sizing: border-box; }
.bp-combos .combo-tabel__prijs { text-align: right; }
.bp-combos .form-actions { margin-top: 12px; }
/* Prijs: opbouw van één combinatie. */
.bp-prijs { display: flex; flex-direction: column; gap: 14px; }
.bp-prijs > * { margin: 0; }
.pv2 .bp-prijstabel thead th { height: 40px; padding-top: 0; padding-bottom: 0; vertical-align: middle; background: transparent; }
.bp-prijstabel tfoot td { font-weight: 600; border-bottom: 0; }
.bp-uitkomst { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font-size: 13px; }
/* Content: geërfde omschrijving, eigen omschrijving, eigen afbeeldingen. */
.bp-geerfd { color: var(--muted); border-top-color: var(--border-strong); border-top-style: dashed; }
.bp-eigen { margin-top: 8px; }
.bp-eigen > summary { list-style: none; display: inline-block; cursor: pointer; }
.bp-eigen > summary::-webkit-details-marker { display: none; }
.bp-eigen[open] > summary { margin-bottom: 8px; }
.pv2 .bp-eigen textarea { width: 100%; }
.bp-wis { align-self: flex-end; margin-top: 6px; }
.pv2 .pv-hoofd .bp-mediablok { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.bp-media { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bp-media__item { position: relative; margin: 0; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-3); }
.bp-media__item a, .bp-media__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bp-media__weg { position: absolute; top: 4px; right: 4px; margin: 0; }
.bp-media__weg .btn--icon { width: 26px; background: var(--surface); }
.bp-media__upload { margin: 0; display: contents; }
.bp-media__upload .media-tegel { width: 100%; box-sizing: border-box; }
.bp-media__upload input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Zijkolom: per kanaal een blok; sync-knop over de volle breedte; codes afgekapt. */
.bp-kanaal__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.bp-kanaal form { margin: 0; }
.bp-sync { width: 100%; height: auto; min-height: 32px; padding: 6px 12px; white-space: normal; justify-content: center; text-align: center; line-height: 1.3; }
.bp-code { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-size: 11.5px; }
.bp .pv-zij .bp-status .field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.bp .pv-zij .bp-status .field > span:first-child { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.bp-opheffen { margin: 0; }
@media (max-width: 1100px) { .bp .bp-nav { flex-wrap: wrap; } }
@media (max-width: 720px) {
    .bp .bp-nav { position: static; padding: 6px; }
    .bp-tabelvak, .bp-combos .table-scroll { overflow-x: auto; margin: 0; }
    .bp-stap { grid-template-columns: 1fr; gap: 6px; }
    .bp-media { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bp-kop__in { flex-wrap: wrap; white-space: normal; }
    .bp-kop__rechts { margin-left: 0; flex-wrap: wrap; }
}

/* Bundelbadge in de kop paars (badge--bundel in de markup: zonder variant won de grijze .badge:not([class*="badge--"]))
   met het icoon op 13 px zoals het ontwerp. */
.pv2 .pv-kop .bp-soort svg.i { width: 13px; height: 13px; vertical-align: 0; stroke-width: 2; }
/* "Meer" staat in de bundelnavigatie altijd rechts (de links vullen de balk): lijst rechts uitlijnen,
   anders valt hij op mobiel buiten beeld (rechterkant 523 px bij 390 breed). */
.bp .bp-nav .pv-nav__meerlijst { left: auto; right: 0; }

/* Onderdelen: vlakke tabel in de kaart (geen tweede kader, geen 1rem-marge van .table uit style.css). */
.pv2 .bp-tabel { margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
/* Kolommaten staan bij .bp-tabel hierboven; stapper (104) en ja/nee-segment vullen hun kolom met
   6 px rand, zodat niets in de buurkolom steekt. */
.bp-tabel .bp-rij > td:nth-child(5), .bp-tabel .bp-rij > td:nth-child(6), .bp-tabel .bp-toevoegen > td:nth-child(2) { padding-left: 6px; padding-right: 6px; }
.bp-tabel :is(.bp-rij, .bp-toevoegen) > td.act { padding-left: 4px; padding-right: 4px; }
/* Koppen boven de bediening: Los op de tekst van de keuzepil, Aantal rechts op de stapper, Acties op de knop. */
.pv2 .bp-tabel thead th:nth-child(5) { padding-left: 14px; }
.pv2 .bp-tabel thead th:nth-child(6) { padding-right: 6px; }
.pv2 .bp-tabel thead th:nth-child(7) { padding-left: 4px; padding-right: 4px; }
.bp-tabel .bp-rij > td:nth-child(5) > .muted { padding-left: 8px; }
.bp-tabel .bp-rij > td.act > .muted { padding-right: 8px; }
/* Toevoegregel: SKU-veld op de lijn van de kopregels; + even hoog als veld en stapper (32 px). */
.bp-toevoegen > td:first-child { padding-left: 12px; }
/* Product zoeken in de toevoegregel ([data-product-zoek]): de zwevende lijst van .pv2 .kies; per treffer
   titel + "SKU · type · leverancier". */
.bp-zoek { flex: none; width: 100%; }
.kies .kies__item.kies__item--product { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1px; text-align: left; }
.kies__item--product .kies__titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kies__item--product .kies__sub { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Enkele keuzelijst met data-sub (bv. Soort bij een prijsregel): de subregel mag teruglopen. */
.kies--enkel .kies__item--product .kies__sub { white-space: normal; }
:is(.pv2, .pub--los) .pub__voet > .btn--danger:first-child { margin-right: auto; }   /* Verwijderen links in de voetbalk */
.bp-toevoegen .btn--icon { width: 32px; height: 32px; min-height: 32px; }
/* ⋯ per rij: stille knop zonder kader (ontwerp); vlak verschijnt bij hover en als het menu open is. */
.bp-rijmenu > summary.btn { width: 28px; height: 28px; min-height: 28px; padding: 0; border-color: transparent; background: transparent; color: var(--text-3); box-shadow: none; }
.bp-rijmenu > summary.btn:hover, .bp-rijmenu[open] > summary.btn { background: var(--surface-3); color: var(--text); }
/* Kopregels: Vast gedempter dan Keuzegroep. */
.bp-kop--vast .bp-kop__soort { color: var(--muted); }
/* De sr-only "Acties" (position: absolute) ontsnapte zonder gepositioneerde ouder aan de scrollende
   .bp-tabelvak en maakte de pagina op 390 px 753 px breed; zo blijft hij binnen de kop. */
.bp-tabel thead th.act { position: relative; }

/* Combinaties (gedeelde partial combo_tabel.php, alleen hier opgemaakt): vaste kolommen zoals het
   ontwerp — vinkje en foto zonder kopje, koppen nooit afgekapt; samenstelling met één optie per
   regel (afgekapt, tooltip uit de partial), gelijke rijhoogte, uitgezette combinaties gedempt. */
.pv2.bp .bp-combos .combo-tabel th:nth-child(1) { width: 40px; font-size: 0; }
.pv2.bp .bp-combos .combo-tabel th:nth-child(3) { width: 80px; font-size: 0; }
.pv2.bp .bp-combos .combo-tabel th:nth-child(4) { width: 136px; }
.pv2.bp .bp-combos .combo-tabel th:nth-child(5) { width: 124px; }
.pv2.bp .bp-combos .combo-tabel th:nth-child(6) { width: 168px; }
.pv2.bp .bp-combos .combo-tabel th { text-overflow: clip; }
.pv2.bp .bp-combos .combo-tabel td { height: 56px; padding-top: 8px; padding-bottom: 8px; box-sizing: border-box; }
.pv2.bp .bp-combos .combo-tabel :is(th, td):nth-child(1) { padding-right: 0; }
.pv2.bp .bp-combos .combo-tabel :is(th, td):nth-child(3) { padding-left: 8px; padding-right: 8px; }
.pv2.bp .bp-combos .combo-tabel td:nth-child(1) input[type=checkbox] { display: block; width: 15px; height: 15px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.pv2.bp .bp-combos .combo-tabel__samen { font-size: 13px; line-height: 1.4; }
.pv2.bp .bp-combos .combo-tabel__opties { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; min-width: 0; }
.pv2.bp .bp-combos .combo-tabel__optie { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv2.bp .bp-combos .combo-tabel__optie strong { font-weight: 600; }
.pv2.bp .bp-combos .combo-tabel__samen > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pv2.bp .bp-combos .combo-tabel__extra { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-3); }
.pv2.bp .bp-combos .combo-tabel__std { font-variant-numeric: tabular-nums; }
.pv2.bp .bp-combos .combo-tabel__foto { line-height: 0; }
.pv2.bp .bp-combos .combo-tabel__thumb { display: inline-block; border: 0; }
.pv2.bp .bp-combos .combo-tabel tr:has(> td:first-child input:not(:checked)) :is(.combo-tabel__samen, .combo-tabel__samen .muted, .combo-tabel__std) { color: var(--text-3); }
.pv2.bp .bp-combos .combo-tabel tr:has(> td:first-child input:not(:checked)) .combo-tabel__thumb { opacity: .45; }
/* Eigen prijs en SKU: bedrag rechts zonder spinknoppen, placeholder als lege stand. */
.pv2.bp .bp-combos input.combo-tabel__prijs { text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; background: var(--surface); color: var(--text); }
.pv2.bp .bp-combos input.combo-tabel__prijs::-webkit-outer-spin-button, .pv2.bp .bp-combos input.combo-tabel__prijs::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pv2.bp .bp-combos input.combo-tabel__sku { background: var(--surface); color: var(--text); }
.pv2.bp .bp-combos :is(input.combo-tabel__prijs, input.combo-tabel__sku)::placeholder { color: var(--text-3); opacity: 1; }
.pv2.bp .bp-combos :is(input.combo-tabel__prijs, input.combo-tabel__sku):focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); outline: none; }
/* Fotokiezer: vaste afstand tot de rechterkant van de tabel, zodat hij binnen de kaart blijft. */
.pv2.bp .bp-combos .fk-details[open] > .fotokiezer { left: auto; right: -428px; line-height: 1.35; }
/* Opslaan: blijft onderin plakken (gedrag van .form), maar in de kaartkleur in plaats van een grijze band. */
.pv2.bp .bp-combos .form .form-actions { margin: 0; padding: 12px 0 0; background: var(--surface); box-shadow: none; }

/* Prijs: vaste kolommen, keuzelijst zonder extra marge, lijn boven de standaardprijs. */
.pv2.bp .bp-prijs .pv-velden .field { margin: 0; }
.pv2.bp .bp-prijstabel { table-layout: fixed; width: 100%; }
.pv2.bp .bp-prijstabel th:nth-child(2), .pv2.bp .bp-prijstabel th:nth-child(4) { width: 120px; }
.pv2.bp .bp-prijstabel th:nth-child(3) { width: 80px; }
.pv2.bp .bp-prijstabel td { height: 44px; box-sizing: border-box; font-variant-numeric: tabular-nums; }
.pv2.bp .bp-prijstabel td.num { white-space: nowrap; }
.pv2.bp .bp-prijstabel tbody tr:last-child td { border-bottom: 1px solid var(--border-strong); }
.pv2.bp .bp-uitkomst { min-height: 40px; box-sizing: border-box; font-variant-numeric: tabular-nums; }
.pv2.bp .bp-uitkomst strong { margin-left: 4px; font-weight: 650; }
@media (max-width: 720px) {
    .pv2.bp .bp-prijstabel :is(th, td) { padding-left: 6px; padding-right: 6px; }
    .pv2.bp .bp-prijstabel th { font-size: 10px; letter-spacing: .02em; }
    .pv2.bp .bp-prijstabel th:nth-child(2) { width: 92px; }
    .pv2.bp .bp-prijstabel th:nth-child(3) { width: 48px; }
    .pv2.bp .bp-prijstabel th:nth-child(4) { width: 80px; }
    .pv2.bp .bp-prijs .pv-velden .pv-rij { grid-column: 1 / -1; }
}
/* Tabellijnen tot de kaartrand, zoals Varianten/Voorraad op het productscherm (besluit Kjelt 10-10-2026). */
.pv2.bp :is(.bp-combos, .bp-prijs) .table-scroll { margin-left: -20px; margin-right: -20px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.pv2.bp :is(.bp-combos, .bp-prijs) .table { border: 0; border-radius: 0; box-shadow: none; }
.pv2.bp :is(.bp-combos, .bp-prijs) .table tr > :first-child { padding-left: 20px; }
.pv2.bp :is(.bp-combos, .bp-prijs) .table tr > :last-child { padding-right: 20px; }

/* Content-kaart van de bundelpagina (ontwerp Bundel.dc.html, blok Tekst / Eigen afbeeldingen).
   Tekst: geërfde omschrijving als gestippeld vak met onderin "Geërfd van …" en rechts de link
   "Eigen omschrijving schrijven" (de summary staat absoluut op die voetregel; voetregel en link
   hebben daarom een vaste regelhoogte van 16 px). Foto's: hetzelfde raster als het productscherm. */
.pv2 #content .pv-vak--tekstblok .pv-beschrijving { color: var(--muted); padding-bottom: 12px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent); }
.pv2 #content .pv-vak--tekstblok .pv-beschrijving :is(p, li, strong, b, em, span, h2, h3) { color: inherit; }
.pv2 #content .bp-geerfd { margin-top: 2px; padding-right: 200px; line-height: 16px; color: var(--muted); border-top: 1px dashed var(--border-strong); }
.pv2 #content .bp-eigen { position: relative; margin-top: 0; }
.pv2 #content .bp-eigen:not([open]) { margin-top: -6px; }
.pv2 #content .bp-eigen > summary { position: absolute; right: 15px; top: -29px; margin: 0; font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.pv2 #content .bp-eigen[open] > summary { top: -35px; margin: 0; }
.pv2 #content .bp-eigen textarea { display: block; margin: 0; }
.pv2 #content .bp-wis { display: block; width: max-content; margin: 8px 0 0 auto; font-size: 12px; font-weight: 600; }
/* Eigen afbeeldingen: blokkop zoals de subkoppen van het productscherm. */
.pv2 .pv-hoofd #content .bp-mediablok { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.pv2 #content .bp-mediablok > .gp-blokkop { margin: 0; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; }
/* Fotoraster zoals het productscherm: 5 kolommen, eerste foto 2×2, ✕ klein en pas bij aanwijzen. */
.pv2 #content .bp-media__item { border-radius: 10px; border: 1px solid var(--border); background: var(--surface-3); }
.pv2 #content .bp-media__item:first-child { grid-column: span 2; grid-row: span 2; }
.pv2 #content .bp-media__weg { top: 6px; right: 6px; z-index: 2; opacity: 0; transition: opacity .15s ease; }
.pv2 #content .bp-media__item:is(:hover, :focus-within) .bp-media__weg { opacity: 1; }
@media (hover: none) { .pv2 #content .bp-media__weg { opacity: 1; } }
.pv2 #content .bp-media__weg .btn--icon { width: 22px; height: 22px; min-height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(20, 20, 20, .55); color: #ffffff; box-shadow: none; }
.pv2 #content .bp-media__weg .btn--icon:hover { background: rgba(179, 51, 51, .9); }
.pv2 #content .bp-media__weg .btn--icon svg.i { width: 12px; height: 12px; }
/* Zonder eigen foto's: één toevoegvak over de volle breedte (zoals het productscherm). */
.pv2 #content .bp-media:not(:has(.bp-media__item)) { grid-template-columns: minmax(0, 1fr); }
.pv2 #content .bp-media:not(:has(.bp-media__item)) .media-tegel { aspect-ratio: auto; height: 120px; gap: 8px; font-size: 13px; color: var(--muted); }
.pv2 #content .bp-media:not(:has(.bp-media__item)) .media-tegel .sr-only { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
/* Media-opslag niet ingesteld: uitgeschakeld toevoegvak (uitleg in de tooltip). */
.pv2 #content .bp-media__uit { cursor: not-allowed; color: var(--text-3); font-size: 12px; text-align: center; padding: 6px; box-sizing: border-box; width: 100%; }
.pv2 #content .bp-media__uit:hover { filter: none; }
@media (max-width: 720px) {
    .pv2 #content .bp-geerfd { padding-right: 0; }
    .pv2 #content .bp-eigen:not([open]) { margin-top: 0; }
    .pv2 #content .bp-eigen > summary, .pv2 #content .bp-eigen[open] > summary { position: static; display: inline-block; }
    .pv2 #content .bp-eigen[open] > summary { margin-bottom: 8px; }
}

/* Ontwerp Bundel.dc.html, zijkolom. Kanaalkop zoals de kanalen op het productscherm (icoon + naam),
   'Eerst oplossen' met de punten in tekstkleur, droge weergave compact (optiewaarden · prijs ·
   voorraad, onderdelen als tooltip op de rij), Gegevens met codes zonder chip, Opheffen als
   keuzetegels (gekozen = ink-rand, verwijderen = rood). */
.bp .pv-zij .bp-kanaal__kop { min-height: 22px; }
.bp .pv-zij .bp-kanaal__naam { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; font-weight: 500; }
.bp .pv-zij .bp-kanaal__naam > svg.i { flex: none; width: 17px; height: 17px; color: var(--muted); }
.bp .pv-zij .bp-kanaal__naam > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp .pv-zij .bp-kanaal__kop .badge { flex: none; }
.bp .pv-zij .note--crit > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bp .pv-zij .note--crit .bnd-lijst { color: var(--text); }
.bp .pv-zij .note--crit .bnd-lijst li + li { margin-top: 2px; }
.bp .pv-zij .note--crit .bnd-meer > summary { color: var(--crit); }
.bp .pv-zij .note .bnd-actie { margin-top: 6px; }
.bp .pv-zij .bnd-droog > summary { font-size: 13px; font-weight: 600; color: var(--text); gap: 6px; }
.bp .pv-zij .bnd-droog .bnd-droog > summary { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.bp .pv-zij .bnd-droog__inhoud > p.muted { font-size: 12.5px; line-height: 1.45; }
.bp .pv-zij .bnd-droog .table-scroll { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.bp .pv-zij .bnd-droog .table { width: 100%; font-size: 12.5px; }
.bp .pv-zij .bnd-droog .table th:nth-child(3), .bp .pv-zij .bnd-droog .table td:nth-child(3),
.bp .pv-zij .bnd-droog .table th:nth-child(4), .bp .pv-zij .bnd-droog .table td:nth-child(4),
.bp .pv-zij .bnd-droog .table th:nth-child(6), .bp .pv-zij .bnd-droog .table td:nth-child(6),
.bp .pv-zij .bnd-droog .table th:nth-child(7), .bp .pv-zij .bnd-droog .table td:nth-child(7) { display: none; }
.bp .pv-zij .bnd-droog .table td:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; width: 100%; }
.bp .pv-zij .bnd-droog .table td.num, .bp .pv-zij .bnd-droog .table th.num { white-space: nowrap; }
.bp .pv-zij .bnd-droog .table tr:last-child > td { border-bottom: 0; }
.bp .pv-zij .dl-kv code { padding: 0; background: none; border: 0; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--muted); }
.bp .pv-zij .bnd-opheffen__keuzes { gap: 6px; margin-bottom: 14px; }
.bp .pv-zij .bnd-opheffen__keuzes > .field--check { gap: 10px; margin: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.bp .pv-zij .bnd-opheffen__keuzes > .field--check:hover { border-color: var(--border-strong); }
.bp .pv-zij .bnd-opheffen__keuzes > .field--check:has(input:checked) { border-color: var(--ink); background: var(--surface-2); }
.bp .pv-zij .bnd-opheffen__keuzes > .bnd-opheffen__alles:has(input:checked) { border-color: var(--crit); background: var(--crit-bg); }
.bp .pv-zij .bnd-opheffen__keuzes > .field--check:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.bp .pv-zij .bnd-opheffen__keuzes > .field--check:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(255, 166, 65, .35); }
/* Eén lijn per tegel: geen ring om het rondje (invoer-focus/-achtergrond uit de basis), wel de huiskleur. */
.bp .pv-zij .bnd-opheffen__keuzes input[type=radio] { flex: none; width: 16px; height: 16px; margin: 1px 0 0; padding: 0; border: 0; background: none; box-shadow: none; outline: none; accent-color: var(--ink); }
.bp .pv-zij .bnd-opheffen__keuzes .bnd-opheffen__alles input[type=radio] { accent-color: var(--crit); }
.bp .pv-zij .bnd-opheffen__keuzes > .field--check > span { font-size: 13px; line-height: 1.35; }
.bp .pv-zij .bnd-opheffen__keuzes > .field--check small { margin-top: 2px; }
.bp .pv-zij .bnd-opheffen__gevolg { margin: 0; }

/* Verborgen feedfoto (productscherm v2): "Weer tonen" als rond oog-knopje rechtsboven, net als het ✕;
   aangevinkt = groen (wordt weer getoond bij opslaan). Buiten .pv2 blijft het het oude label. */
.media-show__oog { display: none; }
.pv2 .pv-rij--media .media-item .media-show input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pv2 .pv-rij--media .media-item .media-show .media-show__oog { display: block; width: 13px; height: 13px; }
.pv2 .pv-rij--media .media-item .media-show .media-show__tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pv2 .pv-rij--media .media-item .media-show:hover,
.pv2 .pv-rij--media .media-item .media-show:has(input:checked) { background: var(--ok); }
.pv2 .pv-rij--media .media-item.is-verborgen:has(.media-show input:checked) img { opacity: 1; }

/* Bestandsveld (productscherm v2): aanwijzen en gat/ontbreekt; het vak zelf staat bij Bestanden. */
#sec-con:has(.pv-tekstblok) .pv-bestanden .media-field > input[type=file]:hover { border-color: var(--text-3); background: var(--surface); }
#sec-con:has(.pv-tekstblok) .pv-bestanden .pv-rij--gat .media-field > input[type=file] { border-color: var(--warn); background: var(--warn-bg); }
#sec-con:has(.pv-tekstblok) .pv-bestanden .pv-rij--mist .media-field > input[type=file] { border-color: var(--crit); }
#sec-con:has(.pv-tekstblok) .pv-bestanden .pv-bestand-gekozen { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* AI-knop op de groepspagina: bezig (sterretje draait) en fout (rood, melding in de tooltip); kop Zoekmachine met knop rechts. */
.ai-knop.is-bezig { cursor: progress; opacity: .8; }
.ai-knop.is-bezig svg.i { animation: ab-draai 1s linear infinite; }
.ai-knop.is-fout { color: var(--crit); }
@media (prefers-reduced-motion: reduce) { .ai-knop.is-bezig svg.i { animation: none; } }
.pv2 .gp-blokkop--ai { display: flex; align-items: center; }

/* Actiebalk, uitkomst na opslaan (app.js; zelfde opbouw als de Selectiebalk, besluit Kjelt 13-10-2026): tint + rand +
   tekst in de kleur van de uitkomst. --klaar = groen (opgeslagen), --let = oranje (opgeslagen met waarschuwing),
   --fout = rood (niet opgeslagen; Verwerpen/Opslaan blijven). Alleen de inkt van "gewijzigd" is een vol vlak. */
.pv2 .ab:is(.ab--klaar, .ab--let, .ab--fout) { box-shadow: inset 0 0 0 1px currentColor, var(--shadow-1); }
.pv2 .ab--klaar { background: var(--ok-bg); color: var(--ok); }
.pv2 .ab--let { background: var(--warn-bg); color: var(--warn); }
.pv2 .ab--fout { background: var(--crit-bg); color: var(--crit); }
.pv2 .ab:is(.ab--klaar, .ab--let, .ab--fout) :is(.ab__pad, .ab__pad a, .ab__hier, .ab__terug) { color: currentColor; }
.pv2 .ab:is(.ab--klaar, .ab--let, .ab--fout) .ab__stip { background: currentColor; animation: none; }
.pv2 .ab--fout .ab__knop { border-color: color-mix(in srgb, currentColor 45%, transparent); color: inherit; }
.pv2 .ab--fout .ab__knop--vol { background: var(--crit); border-color: var(--crit); color: var(--surface); }
.pv2 .ab__link { appearance: none; padding: 0; margin: 0 8px; border: 0; background: none; color: inherit; font: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.pv2 .ab__link[hidden] { display: none; }
/* Opslaan…: een lopende oranje balk onderin (zelfde taal als "Bezig" in de Selectiebalk). Via background-position,
   zodat de balk geen overflow: hidden nodig heeft (Meer acties klapt eronder uit). Op .ab__vuil::after (niet
   positioned: hij staat t.o.v. de plakkende .ab), want .ab::before/::after zijn de afdekstroken boven/onder de balk. */
.pv2 .ab--bezig .ab__vuil::after { content: ""; position: absolute; top: auto; left: 14px; right: 14px; bottom: 4px; pointer-events: none; height: 3px; border-radius: 999px; background: linear-gradient(90deg, transparent 0%, transparent 35%, var(--brand) 50%, transparent 65%, transparent 100%) color-mix(in srgb, var(--brand) 18%, transparent); background-size: 300% 100%; animation: ab-loop 1.3s linear infinite; }
@keyframes ab-loop { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .pv2 .ab--bezig .ab__vuil::after { animation: none; background: var(--brand); opacity: .5; } }
.pv2 .ab [data-ab-opslaan]:disabled { opacity: .45; cursor: default; }
/* Na opslaan toont de balk de uitkomst (groen/oranje: de flash bovenaan verdwijnt; rood: die blijft, app.js): de tekst krijgt de
   ruimte naast het pad en loopt zo nodig over twee regels — ook op een telefoon, waar de melding in de
   gewone donkere stand alleen voor schermlezers is. */
.pv2 .ab:is(.ab--klaar, .ab--let, .ab--fout) .ab__pad { flex: 0 1 auto; }
.pv2 .ab:is(.ab--klaar, .ab--let, .ab--fout) .ab__vuil { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.pv2 .ab.ab:is(.ab--klaar, .ab--let, .ab--fout) .ab__vuil .ab__melding, .pv2:has(> #productform) .ab.ab:is(.ab--klaar, .ab--let, .ab--fout) .ab__vuil .ab__melding { position: static; width: auto; height: auto; clip: auto; min-width: 0; margin: 0; overflow: hidden; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; text-align: right; }
@media (max-width: 720px) {
    .pv2 .ab.ab:is(.ab--klaar, .ab--let, .ab--fout) .ab__vuil .ab__melding, .pv2:has(> #productform) .ab.ab:is(.ab--klaar, .ab--let, .ab--fout) .ab__vuil .ab__melding { font-size: 12.5px; text-align: left; }
    .pv2 .ab:is(.ab--klaar, .ab--let, .ab--fout) .ab__vuil { justify-content: flex-start; }
    /* Niet opgeslagen: de melding staat er al boven; in de balk alleen rood + Verwerpen/Opslaan (anders past Opslaan niet). */
    .pv2 .ab.ab.ab--fout .ab__vuil .ab__melding, .pv2:has(> #productform) .ab.ab.ab--fout .ab__vuil .ab__melding, .pv2 .ab--fout .ab__link { display: none; }
    .pv2 .ab.ab--fout .ab__vuil { justify-content: flex-end; }
    /* Een fout- of infomelding blijft boven de pagina staan: de balk schuift er dan niet overheen. */
    .container > .flash + .pv2 .ab, .container > .flash + .pv2:has(> #productform) .ab { margin-top: 0; }
}

/* ── mobiel: lijsten ── */
/* Productenlijst (#producttabel), conceptlijst per feed (#concepttabel), de feedlijst
   (#feedtabel: Feeds, Selecteren, Concepten) en Nieuw product › producttype (.tk). Desktop blijft gelijk;
   alleen het vinkvak (label om een vinkje, alleen voor het raakvlak) staat hier buiten een media query. */
.vink-vak { display: contents; }
@media (max-width: 768px) {
    /* Raakvlakken ≥ 40 px: knoppen, filters, segmenten, paginering, kolomkiezer. */
    :is(.card:has(> .pl-filters), .card:has(> .filters select[name="cf"]), .card:has(.concepttabel), .card:has(#feedtabel)) :is(.btn, .filters__select, .search, .seg > a, .pagination__link),
    .container:has(:is(.pl-filters, select[name="cf"], .concepttabel, #feedtabel)) > .phead .btn,
    .container:has(select[name="cf"]) .phead .btn { min-height: 40px; height: auto; }
    .col-manager > summary.btn { height: 40px; min-height: 40px; }
    :is(.card:has(> .pl-filters), .card:has(> .filters select[name="cf"]), .card:has(.concepttabel), .card:has(#feedtabel)) .search { height: 40px; }
    :is(.card:has(> .pl-filters), .card:has(> .filters select[name="cf"])) .pagination__link { min-width: 40px; height: 40px; }
    :is(.card:has(> .pl-filters), .card:has(> .filters select[name="cf"])) .pagination { flex-wrap: wrap; row-gap: 8px; padding: 10px 16px; }
    :is(.card:has(> .pl-filters), .card:has(> .filters select[name="cf"]), .card:has(.concepttabel), .card:has(#feedtabel)) > .filters { padding: 12px 16px; }
    /* Filterbalk: zoekveld over de volle breedte, filters in twee gelijke kolommen. */
    :is(.card:has(> .pl-filters), .card:has(> .filters select[name="cf"])) > .filters > .filters__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; flex: 1 1 100%; }
    :is(.card:has(> .pl-filters), .card:has(> .filters select[name="cf"])) > .filters > .filters__form > .search { grid-column: 1 / -1; min-width: 0; width: 100%; }
    :is(.card:has(> .pl-filters), .card:has(> .filters select[name="cf"])) > .filters > .filters__form > .filters__select { width: 100%; max-width: none; min-width: 0; }
    .card:has(> .pl-filters) > .filters > .filters__form > .kies { width: 100%; }
    .card:has(> .pl-filters) > .filters > .filters__form .kies__invoer { height: 40px; }
    :is(.card:has(> .pl-filters), .card:has(> .filters select[name="cf"])) > .filters > .filters__form > .btn { justify-content: center; }
    :is(.card:has(> .pl-filters), .card:has(> .filters select[name="cf"])) > .filters > .filters__form > .link-btn { display: inline-flex; align-items: center; min-height: 40px; }
    :is(.card:has(> .pl-filters), .card:has(> .filters select[name="cf"])) > .filters > .spacer { display: none; }
    :is(.card:has(> .pl-filters), .card:has(> .filters select[name="cf"])) > .filters > .col-manager { margin-left: auto; }
    .card:has(> .filters select[name="cf"]) > .filters > .muted { margin-right: auto; display: inline-flex; align-items: center; }
    .card:has(> .filters select[name="cf"]) > .filters > .muted + .col-manager { margin-left: 0; }
    /* Kolomkiezer (component, elke lijst; het paneel staat op een telefoon in de pagina):
       open = eigen regel over de volle breedte, regels en knoppen raakbaar. */
    .col-manager[open] { flex-basis: 100%; width: 100%; display: block; }
    .col-manager[open] > summary.btn { display: flex; width: max-content; margin-left: auto; }
    .col-manager > .col-manager__list { width: 100%; max-width: none; min-width: 0; max-height: 60vh; }
    .col-manager__list label { min-height: 40px; display: flex; align-items: center; }
    .col-manager__list input[type=checkbox] { width: 18px; height: 18px; }
    .col-manager__list input.col-manager__zoek { height: 40px; font-size: 16px; }
    :is(.col-manager__acties, .col-manager__herstelgroep) .link-btn { min-height: 40px; display: inline-flex; align-items: center; }
    .col-manager__wkies { min-height: 40px; align-items: center; }
    .col-manager__list :is(.col-manager__tel, .col-manager__hint, .col-manager__wlabel, .col-manager__whint) { font-size: 12px; }
    .col-manager__wlabel { width: auto; min-width: 112px; }
    /* Meer filters (productenlijst): de kop raakbaar, de keuzes in twee kolommen. */
    .card--flush > .pl-meer { padding: 0 16px 10px; }
    .pl-meer > summary { min-height: 40px; }
    .pl-meer .filter-meer__tel { font-size: 12px; }
    .pl-meer__rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-meer__rij .filters__select { width: 100%; max-width: none; min-width: 0; }
    /* Weergavebalk: Varianten / Bundels / Toon elk op een eigen regel, label in een vaste kolom. */
    .pl-balk { display: grid; grid-template-columns: 72px repeat(3, auto); justify-content: start; align-items: center; gap: 6px 12px; padding: 8px 16px; }
    .pl-balk > .seg { grid-column: 2 / -1; justify-self: start; }
    .pl-balk .seg > a { padding: 0 14px; font-size: 13px; }
    .pl-balk > .toon__sep { display: none; }
    .pl-balk__label { font-size: 12.5px; }
    /* Aanvullen: drie Toon-vinkjes passen niet naast elkaar ("Onderdelen"); de derde op een eigen regel. */
    .pl-balk--av > .pl-balk__label { grid-column: 1; }
    .pl-balk--av > label.pl-check:last-of-type { grid-column: 2; }
    .pl-check { min-height: 40px; font-size: 13px; gap: 6px; }
    .pl-check input { width: 18px; height: 18px; }

    /* Tabellen als compacte rijen: regel 1 de naam (met vinkje/klapknop), daaronder de zichtbare
       kolommen als "Label waarde" naast elkaar. Kolommen die de kolomkiezer verbergt blijven weg
       (inline display:none wint), ingeklapte rijen ([hidden]) ook. De kop wordt een rij sorteerknoppen. */
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) { display: block; width: 100% !important; min-width: 0 !important; table-layout: auto; }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > :is(thead, tbody) { display: block; }
    .card--flush .table-scroll:has(> :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel)) { overflow: visible; }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > thead > tr { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; align-items: center; gap: 6px; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
    html body :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > thead > tr > th { display: block; flex: none; position: static; width: auto !important; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; }
    html body :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > thead > tr > th::after { content: none; }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > thead > tr > th.act { display: none; }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > thead > tr > th > :is(a, button) { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); font-size: 12px; text-decoration: none; }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > thead > tr > th.is-sorteer > :is(a, button),
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > thead > tr > th[aria-sort] > :is(a, button) { border-color: var(--ink); }
    :is(#producttabel, #concepttabel) > thead > tr > th > .kolom-greep { display: none; }
    #concepttabel > thead > tr > th.mee .mee__label { min-height: 40px; padding: 0 12px 0 0; }
    #concepttabel > thead > tr > th.mee input { width: 18px; height: 18px; }

    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; padding: 8px 16px 10px; border-bottom: 1px solid var(--border); }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > tbody > tr[hidden] { display: none; }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > tbody > tr:last-child { border-bottom: 0; }
    html body :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > tbody > tr > td { display: block; position: static; width: auto !important; min-width: 0; max-width: 100%; padding: 0; border: 0; background: none; font-size: 13px; line-height: 1.4; white-space: nowrap; }
    html body :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > tbody > tr > td::after { content: none; }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > tbody > tr:hover > td { background: none; }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > tbody > tr.vg-member { background: var(--surface-2); }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > tbody > tr > td[data-label]::before { content: attr(data-label); margin-right: 6px; font-size: 12px; color: var(--text-3); }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > tbody > tr > td.num { text-align: left; }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > tbody > tr > td .badge { font-size: 12px; }
    /* Weg op een telefoon: lege waarden ("—", ook hele cellen in grijs zoals bij een bundel) en de
       actieknop — die gaat naar dezelfde pagina als de naam ervoor. Een 0 blijft staan (.pl-nul). */
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > tbody > tr > td[data-label]:is(.muted, :has(> span.muted:only-child:not(.pl-nul))) { display: none; }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) > tbody > tr > td.act { display: none; }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) .titelcel { width: 100%; }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) .titelcel__tekst { min-width: 0; flex: 0 1 auto; }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) .titelcel__tekst > a.row { min-height: 40px; display: flex; align-items: center; font-size: 14px; }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) .titelcel__tekst:has(> .titelcel__sub) > a.row { min-height: 24px; padding-top: 4px; }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) .titelcel__sub { font-size: 12px; padding-bottom: 4px; }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) .klap-knop { width: 40px; height: 40px; margin: 0 -10px 0 -12px; flex: none; }
    :is(#producttabel, #concepttabel, #feedtabel, #kanaaltabel) .klap-ruimte { width: 18px; }
    #kanaaltabel > thead { display: none; }   /* niet sorteerbaar: geen rij sorteerknoppen, de labels staan in de rij */
    :is(#producttabel, #concepttabel) .soort { height: 22px; }
    /* Raakvlak van naam en soort-links: de hele tekstregel (naam + subregel) is de link, een
       soort-link krijgt 10 px rondom (onzichtbaar vlak, de knop zelf blijft even groot). */
    :is(#producttabel, #concepttabel, #feedtabel) .titelcel__tekst { position: relative; }
    :is(#producttabel, #concepttabel, #feedtabel) .titelcel__tekst > a.row::after { content: ""; position: absolute; inset: -4px 0; }
    :is(#producttabel, #concepttabel) a.soort { position: relative; }
    :is(#producttabel, #concepttabel) a.soort::after { content: ""; position: absolute; inset: -10px; }
    :is(#producttabel, #concepttabel) .soort__n { font-size: 12px; }
    :is(#producttabel, #concepttabel, .table--kies) .vink-vak { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 -10px 0 -11px; flex: none; cursor: pointer; }
    :is(#producttabel, #concepttabel, .table--kies) .vink-vak > input { width: 18px; height: 18px; }
    #producttabel .pl-kies-ruimte { width: 18px; }
    /* Productenlijst: naam over de volle breedte; leden van een groep iets ingesprongen. */
    html body #producttabel > tbody > tr > td:first-child { flex: 1 1 calc(100% + 56px); max-width: none; margin-left: -56px; }
    #producttabel > tbody > tr { padding-left: 72px; }   /* kolommen onder de naam, niet onder vinkje/klapknop */
    #producttabel.pl-met-kies tr.vg-member td.lid { padding-left: 12px; }
    /* Conceptlijst per feed: vinkje + naam op regel 1, daarna de kolommen. */
    #concepttabel > tbody > tr > td.mee { order: -2; flex: none; margin-left: -60px; }
    #concepttabel > tbody > tr { padding-left: 76px; }
    #concepttabel > tbody > tr > td[data-col="titel"] { order: -1; flex: 1 1 calc(100% - 10px); min-width: 0; }
    #concepttabel > tbody > tr > td[data-col="titel"].lid { padding-left: 4px; }
    #concepttabel > tbody > tr > td[data-col="sleutel"] code { font-size: 12px; }
    #concepttabel > tbody > tr > td.mee + td[data-col="sleutel"] { flex-basis: 100%; order: 0; }
    #concepttabel > tbody > tr > td.mee:empty { width: 40px; }
    /* Feedlijst (Feeds, Selecteren, Concepten): de feed als naam, daaronder run, vulgraad en de
       aantallen van de flow met hun label; Rijen alleen op de computer. De knop valt weg, de naam
       gaat naar dezelfde stap. Bronfeeds iets ingesprongen. */
    html body #feedtabel > tbody > tr > td:first-child { order: -1; flex: 1 1 100%; max-width: none; white-space: normal; }
    html body #feedtabel > tbody > tr > td:is(.fase-start, .act) { border-left: 0; }   /* blokscheiding alleen op de computer */
    html body #feedtabel > tbody > tr > td[data-col="3"] { display: none; }
    #feedtabel > thead > tr > th[data-col="3"] { display: none; }
    #feedtabel > tbody > tr.vg-member td.lid { padding-left: 12px; }
    .card:has(#feedtabel) > .filters > .search { flex: 1 1 100%; min-width: 0; }

    /* Conceptlijst: voortgangsstappen. */
    .container:has(select[name="cf"]) .stappen__s { font-size: 12px; }
    .container:has(select[name="cf"]) .phead__actions { flex-wrap: wrap; }
    .container:has(select[name="cf"]) .auto-popup__paneel { max-width: calc(100vw - 32px); }
    .container:has(select[name="cf"]) .auto-opties__kop { font-size: 12px; }

    /* Nieuw product › producttype: chips en rijen raakbaar. */
    .tk-chip { height: auto; min-height: 40px; }
    .tk-chip .muted, .tk-populair > .muted { font-size: 12px; }
    .tk-rij { min-height: 44px; }
    .tk-rij__n { font-size: 12px; }
    .tk-kolom__kop { font-size: 12px; }
    .tk-treffer { min-height: 44px; align-items: center; }
    .container:has(> .tk) .phead__back, .container:has(.tk) .phead__back { width: 40px; height: 40px; }
}
/* ── einde mobiel: lijsten ── */

/* ── mobiel: productscherm ── */
/* Productscherm v2 (views/products/form.php) op telefoon en smalle tablet. Alleen weergave: velden,
   formulieren en acties blijven gelijk. ≤ 720 px de plakkende kop (actiebalk, bloknavigatie als
   scrollstrook, menu's), zoals de groeps- en bundelpagina; ≤ 768 px de kaarten en velden (de hoofdkolom
   is daar smaller dan 760 px, velden al in 2 kolommen).
   Buiten de media-queries één fix die ook op desktop geldt: het gat-teken stond over "Groep ↗". */
.pv2:has(> #productform) .pv-hoofd .pv-rij > .field:has(> .pv-vak--gedeeld > .pv-vak__groep) { --pv-teken-r: 66px; }

@media (max-width: 720px) {
    /* De suitebar scrolt mee (vak "mobiel: detailpagina's" hieronder); de balk plakt bovenaan het scherm
       en sluit in rust aan op de bovenrand van de pagina. */
    .pv2:has(> #productform) .ab { top: 0; height: 56px; margin: -16px -16px 0; padding: 0 8px; border-radius: 0; gap: 8px; }
    .pv2:has(> #productform) .ab__terug { width: 40px; height: 40px; }
    .pv2:has(> #productform) .ab__acties { margin-left: auto; gap: 6px; }
    .pv2:has(> #productform) .ab__rust .ab__k { height: 40px; min-height: 40px; padding: 0 12px; }
    .pv2:has(> #productform) .ab__k-rest { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .pv2:has(> #productform) .ab__knop { height: 40px; padding: 0 14px; font-size: 13px; }
    /* Niet-opgeslagen: alleen het stipje + Verwerpen/Opslaan (de tekst blijft voor schermlezers). */
    .pv2:has(> #productform) .ab__vuil .ab__melding { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .pv2:has(> #productform) .ab__vuil .ab__stip { margin-right: 4px; }
    /* Menu's (AI, Meer acties): vast onder de balk over de volle breedte, scrollt zelf. */
    .pv2:has(> #productform) .ab__menu { position: static; }   /* paneel hangt aan de plakkende balk zelf */
    .pv2:has(> #productform) .ab__menu > .auto-popup__paneel { position: absolute; left: 8px; right: 8px; top: calc(100% + 4px); width: auto; min-width: 0; max-width: none; max-height: calc(100dvh - var(--suitebar-height) - 72px); overflow-y: auto; box-sizing: border-box; }
    .pv2:has(> #productform) .ab__menu > .ab__menulijst { left: auto; width: 240px; }
    .pv2:has(> #productform) .ab__menuitem { min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
    .pv2:has(> #productform) .ab__menu .auto-popup__paneel .btn { min-height: 40px; }
    .pv2:has(> #productform) .ab__menu .auto-popup__paneel .auto-popup__sub a { display: inline-block; padding: 9px 0; }

    /* Bloknavigatie: één plakkende strook onder de actiebalk die horizontaal scrolt (geen "Meer");
       zoeken + Verplicht/Relevant/Alle daaronder op één regel, die scrollen mee. */
    .pv2:has(> #productform) .pv-form .pv-nav { display: contents; }
    .pv2:has(> #productform) .pv-form .pv-nav__links { position: sticky; top: 56px; z-index: 40; display: flex; flex-wrap: nowrap; gap: 2px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -16px 10px; padding: 4px 12px; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 6px 10px -8px rgba(0, 0, 0, .35); }
    .pv2:has(> #productform) .pv-form .pv-nav__links::-webkit-scrollbar { display: none; }
    .pv2:has(> #productform) .pv-form .pv-nav__link, .pv2:has(> #productform) .pv-form .pv-nav__link[hidden] { display: inline-flex; flex: none; height: 40px; padding: 0 12px; font-size: 14px; }
    .pv2:has(> #productform) .pv-form .pv-nav__meer { display: none; }
    .pv2:has(> #productform) .pv-form .pv-nav__zoek { display: inline-flex; vertical-align: middle; width: calc(100% - 216px); min-width: 0; height: 40px; box-sizing: border-box; margin: 0 6px 16px 0; }
    .pv2:has(> #productform) .pv-form .pv-nav__zoek input { font-size: 16px; }
    .pv2:has(> #productform) .pv-form .pv-nav__modus { display: inline-flex; vertical-align: middle; margin: 0 0 16px; }
    .pv2:has(> #productform) .pv-form .pv-nav__modus .toggle { height: 40px; min-height: 40px; padding: 0 11px; font-size: 13px; }
    .pv2:has(> #productform) .pv-kaart { scroll-margin-top: calc(56px + 48px + 8px); }
}

@media (max-width: 768px) {
    .pv2:has(> #productform) .pv-tel { font-size: 12px; }
    .pv2:has(> #productform) .ab__menu .auto-popup__paneel .auto-opties__kop { font-size: 12px; }
    /* Velden: 2 kolommen (getal, prijs, ja/nee naast elkaar), de rest over de volle breedte. Ook als
       de hoofdkolom even geen container is (fotovenster open), anders wordt het raster 4 breed. */
    .pv2:has(> #productform) .pv-hoofd .pv-velden { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
    .pv2:has(> #productform) .pv-hoofd .pv-rij { grid-column: 1 / -1; }
    .pv2:has(> #productform) .pv-hoofd .pv-rij--kwart { grid-column: span 1; }
    .pv2:has(> #productform) .card > .card__head { padding: 0 14px; }
    .pv2:has(> #productform) .card > .card__body { padding: 14px 14px 16px; }
    .pv2:has(> #productform) .pv-pakketten > .table-scroll { margin-left: -14px; margin-right: -14px; }
    /* Labels breken af i.p.v. afgekapt te worden; het vak blijft onderaan op één lijn. */
    .pv2:has(> #productform) .pv-hoofd .pv-rij > .field > span:first-child:not(:has(.ai-knop)) { -webkit-line-clamp: 4; line-clamp: 4; overflow-wrap: anywhere; hyphens: auto; }
    .pv2:has(> #productform) .pv-hoofd .pv-rij .field > span:first-child { font-size: 13px; }

    /* Invoervakken 40 px, tekst 16 px (iOS zoomt anders in bij het typen). */
    .pv2:has(> #productform) .pv-hoofd .pv-rij :is(input[type=text], input[type=number], input[type=date], input[type=email], input[type=url], select, textarea:not(.js-richtext)) { height: 40px; min-height: 40px; font-size: 16px; }
    .pv2:has(> #productform) .pv-hoofd .pv-rij textarea:not(.js-richtext) { height: auto; min-height: 88px; }
    .pv2:has(> #productform) .input-unit:not(.js-kleurcode) { height: 40px; }
    .pv2:has(> #productform) .input-unit:not(.js-kleurcode) > input { height: 38px !important; min-height: 38px !important; font-size: 16px; }
    .pv2:has(> #productform) .pv-vak { min-height: 40px; }
    .pv2:has(> #productform) .pv-vak__tekst { font-size: 15px; }
    .pv2:has(> #productform) .kies__knop { height: 40px; font-size: 16px; }
    .pv2:has(> #productform) .kies--enkel > .kleur-dot { top: 12px; }
    .pv2:has(> #productform) .kies__zoek, .pv2:has(> #productform) .kies .kies__invoer:not(.kies--multi .kies__invoer) { height: 40px; min-height: 40px; font-size: 16px; }
    .pv2:has(> #productform) .pv-rij .kies--multi .kies__invoer { font-size: 16px; }
    .pv2:has(> #productform) .kies .kies__item { min-height: 40px; font-size: 15px; }
    .pv2:has(> #productform) .pv-hoofd .pv-rij > .field > .js-tree-path { height: 40px; font-size: 12px; }
    .pv2:has(> #productform) .pv-hoofd .pv-rij > .field > span:first-child .pv-gat-teken,
    .pv2:has(> #productform) .pv-hoofd .pv-rij > .field > span:first-child .src--hand,
    .pv2:has(> #productform) .pv-hoofd .pv-rij:has(.pv-vak--slot) > .field > span:first-child .src--lock { bottom: 13px; }
    .pv2:has(> #productform) .pv-hoofd .pv-rij--mist:not(.pv-rij--media) > .field:not(:has(> .pv-jn))::after { bottom: 13px; }
    /* Ja/nee: knoppen 36 px in een vak van 40 (het gat- of mist-teken staat in het vak, rechts van Nee). */
    .pv2:has(> #productform) .pv-hoofd .pv-jn, .pv2:has(> #productform) .pv-hoofd .pv-jn--lezen { height: 40px; }
    .pv2:has(> #productform) .pv-hoofd .pv-jn__k, .pv2:has(> #productform) .pv-hoofd .pv-jn__k + .pv-jn__k { height: 36px; font-size: 14px; }
    .pv2:has(> #productform) .pv-hoofd .pv-rij > .field:has(> .pv-jn) .src--hand { bottom: 15px; }

    /* Kleine knoppen: zichtbaar even groot, raakvlak 40 px via een onzichtbare rand. */
    .pv2:has(> #productform) :is(.ai-knop, .pv-hoofd .pv-rij .multi-field__add, .link-btn--stil, .pv-vak__lev) { position: relative; }
    .pv2:has(> #productform) .pv-hoofd .pv-rij .multi-field__add { position: absolute; }
    .pv2:has(> #productform) :is(.ai-knop, .pv-hoofd .pv-rij .multi-field__add, .link-btn--stil)::after { content: ""; position: absolute; inset: -10px -4px; }
    .pv2:has(> #productform) .ai-knop { font-size: 12px; }
    .pv2:has(> #productform) .pv-vak > .pv-vak__groep { align-self: stretch; display: inline-flex; align-items: center; padding: 0 10px; margin-right: -10px; font-size: 12px; }
    .pv2:has(> #productform) .pv-serpkop .pv-vak__groep { display: inline-flex; align-items: center; min-height: 40px; font-size: 12px; }
    .pv2:has(> #productform) .pv-groepskop .pv-vak__groep { display: inline-flex; align-items: center; min-height: 40px; font-size: 12px; }
    .pv2:has(> #productform) .pv-hoofd .pv-zelden-knop { display: inline-flex; align-items: center; min-height: 40px; margin-top: 6px; font-size: 13px; }
    .pv2:has(> #productform) .pv-pakketten__acties { gap: 20px; }
    .pv2:has(> #productform) .pv-pakketten__acties .link-btn { display: inline-flex; align-items: center; min-height: 40px; font-size: 13px; }
    .pv2:has(> #productform) .richtext__btn { min-width: 40px; height: 40px; }

    /* Content: aanzichten-raster breekt af i.p.v. afkappen, knoppen 40 px; fotolabels en kruisje groter. */
    #sec-con:has(.pv-tekstblok) .pv-aanzichten > summary .btn { height: 40px; min-height: 40px; }
    .pv2:has(> #productform) .pv-rij--media .media-item select.media-label { height: 30px; min-height: 30px; left: 4px; bottom: 4px; max-width: calc(100% - 8px); font-size: 16px; }
    #sec-con:has(.pv-tekstblok) .media-field[data-kind=image] .media-item .media-remove { width: 32px; height: 32px; top: 4px; right: 4px; font-size: 12px; }
    #sec-con:has(.pv-tekstblok) .fk-uitklap .fk-groot { min-width: 32px; height: 32px; }
    #sec-con:has(.pv-tekstblok) .fk-uitklap .fk-leeg { font-size: 12px; }
    #sec-con:has(.pv-tekstblok) .pv-bestanden .media-field > input[type=file] { height: 44px; padding: 5px; }
    #sec-con:has(.pv-tekstblok) .pv-bestanden .media-field > input[type=file]::file-selector-button { height: 32px; }
    /* Mobiele browsers tonen de knoptekst van een bestandsinvoer niet: zelf "+ Bestand kiezen" in het vak. */
    #sec-con:has(.pv-tekstblok) .pv-bestanden .media-field:has(> input[type=file]) { position: relative; }
    #sec-con:has(.pv-tekstblok) .pv-bestanden .media-field > input[type=file]::file-selector-button { color: transparent; }
    #sec-con:has(.pv-tekstblok) .pv-bestanden .media-field:has(> input[type=file])::after { content: "+ Bestand kiezen"; position: absolute; left: 14px; bottom: 0; height: 44px; display: flex; align-items: center; font-size: 14px; font-weight: 500; color: var(--text-2); pointer-events: none; }
    .pv2:has(> #productform) .pv-serp__tel { font-size: 12px; }
    /* Fotovenster: over de volle breedte onder de suitebar, 3 per rij. */
    body:has(#productform) .media-laag { z-index: 1150; }
    body:has(#productform) .pub { z-index: 1151; }   /* publicatievenster boven de laag (die gaat boven de menuknop) */
    .pv2:has(> #productform) .pv-hoofd .pv-rij .field > .media-field.media--alles { z-index: 1151; left: 8px; right: 8px; width: auto; transform: none; top: calc(var(--venster-boven) + 8px); max-height: calc(100dvh - var(--venster-boven) - 16px); }
    .pv2:has(> #productform) .pv-rij--media .media-field.media--alles .media-list { gap: 8px; padding: 0 12px; }
    .pv2:has(> #productform) .media--alles .media-venster__kop { padding: 8px 8px 8px 16px; margin-bottom: 12px; }
    .pv2:has(> #productform) .media--alles .media-venster__voet { padding: 8px 12px; }
    .pv2:has(> #productform) .media--alles .media-venster__voet .btn { min-height: 40px; }
    .pv2:has(> #productform) .media--alles .media-venster__kop .pub__x { width: 40px; height: 40px; }
    .pv2:has(> #productform) .pv-hoofd .pv-rij .field > .media-field.media--alles > :not(.media-list):not(.media-venster__kop):not(.media-venster__voet):not(input) { margin-left: 12px; margin-right: 12px; }

    /* Tabellen: koppen 12 px; varianten en voorraad scrollen binnen de kaart met de eerste kolom vast. */
    .pv2:has(> #productform) .pv-kaart .table th, .pv2:has(> #productform) .pv-kaart .pv-pakkettabel thead th { font-size: 12px; }
    .pv2:has(> #productform) .pv-kaart .badge, .pv2:has(> #productform) .pv-zij .card__body:not(.pubsam) .badge { font-size: 12px; }
    .pv2:has(> #productform) #sec-var .table thead th { font-size: 12px; }
    .pv2:has(> #productform) :is(#sec-var, #sec-vrd) .table-scroll { margin-left: -14px; margin-right: -14px; }
    .pv2:has(> #productform) :is(#sec-var, #sec-vrd) .table tr > :first-child { padding-left: 14px; }
    .pv2:has(> #productform) :is(#sec-var, #sec-vrd) .table tr > :last-child { padding-right: 14px; }
    .pv2:has(> #productform) #sec-var .table td a.row { position: relative; }
    .pv2:has(> #productform) #sec-var .table td a.row::after { content: ""; position: absolute; inset: -12px -4px; }
    .pv2:has(> #productform) #sec-vrd .pv-voorraad { overflow: visible; }
    .pv2:has(> #productform) #sec-vrd .pv-voorraad :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border); }
    .pv2:has(> #productform) #sec-vrd .pv-voorraad tr.row-current td:first-child { background: linear-gradient(var(--brand-tint-soft), var(--brand-tint-soft)), var(--surface); }
    .pv2:has(> #productform) #sec-vrd .pv-aantal { width: 88px; height: 40px; }
    .pv2:has(> #productform) #sec-vrd .pv-aantal > input { height: 38px !important; min-height: 38px !important; font-size: 16px; }
    /* Pakketten: per doos een blok met de vier maten in twee kolommen (label uit data-label). */
    .pv2:has(> #productform) .pv-pakketten > .table-scroll { overflow: visible; }
    .pv2:has(> #productform) .pv-kaart .pv-pakkettabel, .pv2:has(> #productform) .pv-kaart .pv-pakkettabel tbody { display: block; }
    .pv2:has(> #productform) .pv-kaart .pv-pakkettabel thead { display: none; }
    .pv2:has(> #productform) .pv-kaart .pv-pakkettabel tr.js-pv-pakket { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
    .pv2:has(> #productform) .pv-kaart .pv-pakkettabel tr.js-pv-pakket > td { display: flex; flex-direction: column; align-items: stretch; gap: 6px; height: auto; padding: 0 !important; border: 0; text-align: left; }
    .pv2:has(> #productform) .pv-kaart .pv-pakkettabel tr.js-pv-pakket > td.js-pv-pakketnr { grid-column: 1 / -1; justify-content: center; min-height: 40px; font-weight: 600; }
    .pv2:has(> #productform) .pv-kaart .pv-pakkettabel tr.js-pv-pakket > td.td-acties { position: absolute; top: 12px; right: 10px; width: auto; }
    .pv2:has(> #productform) .pv-kaart .pv-pakkettabel tr.js-pv-pakket > td.td-acties:not(:has(button:not([hidden]))) { display: none; }
    .pv2:has(> #productform) .pv-kaart .pv-pakkettabel tr.js-pv-pakket > td.num::before { content: attr(data-label); font-size: 13px; font-weight: 500; color: var(--muted); }
    .pv2:has(> #productform) .pv-pakkettabel .js-pv-pakket-weg { width: 40px; height: 40px; }
    .pv2:has(> #productform) .pv-celvak { width: 100%; height: 40px; }
    .pv2:has(> #productform) .pv-pakkettabel .pv-celvak > input { font-size: 16px; text-align: left; }
    .pv2:has(> #productform) .pv-celvak:has(> input[readonly]) { justify-content: flex-start; }
    .pv2:has(> #productform) .pv-celvak:has(> input[readonly]) > input { flex: 0 1 auto; width: 5ch; min-width: 2ch; field-sizing: content; padding: 0; }

    /* Zijkolom: Status bovenaan (vóór de veldkaarten), de rest blijft onderaan. */
    .pv2:has(> #productform) .pv-cols > .pv-zij { display: contents; }
    .pv2:has(> #productform) .pv-cols > .pv-zij > .card:first-child { order: -1; }
    .pv2:has(> #productform) .pv-zij .pv-poort__item { min-height: 40px; }
    .pv2:has(> #productform) .pv-zij .card__body:not(.pubsam) a, .pv2:has(> #productform) :is(.pv-leeg, .pv-voet, .pv-kop__meta) a { position: relative; }
    .pv2:has(> #productform) .pv-zij .card__body:not(.pubsam) a::after, .pv2:has(> #productform) :is(.pv-leeg, .pv-voet, .pv-kop__meta) a::after { content: ""; position: absolute; inset: -12px -4px; }
    /* Varianten koppelen / Gecombineerd product (onder de kolommen): invoer en knoppen 40 px. */
    .pv2:has(> #productform) :is(#variantgroep, #bundels) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, .btn) { min-height: 40px; font-size: 16px; }
    .pv2:has(> #productform) :is(#variantgroep, #bundels) .btn { font-size: 14px; }
}
/* 721–768 px: de afdekking boven/onder de plakkende actiebalk stak 24 px uit tegen 16 px containermarge
   (8 px horizontale scroll), zoals op de groeps- en bundelpagina. */
@media (min-width: 721px) and (max-width: 768px) {
    .pv2:has(> #productform) .ab::before, .pv2:has(> #productform) .ab::after { left: -16px; right: -16px; }
}
@media (max-width: 600px) {
    #sec-con:has(.pv-tekstblok) .pv-aanzichten > summary .btn { width: 40px; }   /* icoonknop (zie Content, v2-ontwerpcontrole) */
}
/* ── einde mobiel: productscherm ── */

/* Groepspagina, kaart Varianten (≥ 769 px; daaronder de lijstweergave): vaste kolommen, Titel vult de
   rest (min. 144 px, hooguit twee regels), Compleet als teken (✓ of het aantal lege verplichte velden in
   oranje, uitleg in de tooltip), Compleet, Status en de actiekolom plakken rechts zodat ze nooit wegvallen —
   past het niet, dan scrolt de rest eronder door. --gp-act = breedte van de actiekolom (Ontkoppelen;
   een ⋯-menu zet hem smaller), --gp-assen = aantal askolommen (inline op de tabel). */
.gp-prijs-kort { display: none; }
@media (min-width: 769px) {
    .pv2.gp-pagina #sec-var .gp-vartabel { --gp-act: 44px; --gp-status: 124px; }
    .pv2.gp-pagina #sec-var .gp-vartabel .pv-vartabel { table-layout: fixed; width: 100%; overflow: visible;   /* anders is de tabel zelf de scrollcontainer en plakt niets */
        min-width: calc(60px + var(--gp-assen, 1) * 96px + 140px + 96px + 84px + 52px + 44px + var(--gp-status) + var(--gp-act)); }
    .pv2.gp-pagina #sec-var .gp-vartabel th.pv-vartabel__foto { width: 60px; }   /* 36 px foto + 12 px ruimte tot de as (wens Kjelt 15-10-2026) */
    .pv2.gp-pagina #sec-var .gp-vartabel td.pv-vartabel__foto { padding-right: 12px; }
    .pv2.gp-pagina #sec-var .gp-vartabel th.pv-vartabel__as { width: 96px; }
    .pv2.gp-pagina #sec-var .gp-vartabel th.pv-vartabel__sku { width: 96px; }
    .pv2.gp-pagina #sec-var .gp-vartabel th.pv-vartabel__prijs { width: 84px; }
    .pv2.gp-pagina #sec-var .gp-vartabel th.pv-vartabel__vrij { width: 52px; }
    .pv2.gp-pagina #sec-var .gp-vartabel th.pv-vartabel__compleet { width: 44px; }
    .pv2.gp-pagina #sec-var .gp-vartabel .pv-vartabel :is(th, td).pv-vartabel__compleet { text-align: center; }
    .pv2.gp-pagina #sec-var .gp-vartabel th.pv-vartabel__status { width: var(--gp-status); }
    .pv2.gp-pagina #sec-var .gp-vartabel th.act { width: var(--gp-act); }
    .pv2.gp-pagina #sec-var .gp-vartabel td.pv-vartabel__sku { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Waarde van de as: nooit afkappen ("Off White"); past hij niet, dan op twee regels. */
    .pv2.gp-pagina #sec-var .gp-vartabel td.pv-vartabel__as { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
    .pv2.gp-pagina #sec-var .gp-vartabel td.pv-vartabel__titel a.row { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
    .pv2.gp-pagina #sec-var .gp-vartabel :is(th, td):is(.pv-vartabel__compleet, .pv-vartabel__status, .act) { position: sticky; z-index: 1; background: var(--surface); }
    .pv2.gp-pagina #sec-var .gp-vartabel :is(th, td).act { right: 0; }
    .pv2.gp-pagina #sec-var .gp-vartabel :is(th, td).pv-vartabel__status { right: var(--gp-act); }
    .pv2.gp-pagina #sec-var .gp-vartabel :is(th, td).pv-vartabel__compleet { right: calc(var(--gp-act) + var(--gp-status)); box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .18); }
    .pv2.gp-pagina #sec-var .gp-vartabel .gp-lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .pv2.gp-pagina #sec-var .gp-vartabel .pv-mist { color: var(--warn); font-weight: 600; font-variant-numeric: tabular-nums; }
    .pv2.gp-pagina #sec-var .gp-vartabel .pv-mist svg.i { display: none; }
    .pv2.gp-pagina #sec-var .gp-vartabel .pv-compleet svg.i { width: 14px; height: 14px; stroke-width: 2.4; }
}
@media (min-width: 769px) and (max-width: 1439px) {
    .pv2.gp-pagina #sec-var .gp-vartabel .gp-prijs-vol { display: none; }
    .pv2.gp-pagina #sec-var .gp-vartabel .gp-prijs-kort { display: inline; }
    .pv2.gp-pagina #sec-var .gp-vartabel th.pv-vartabel__prijs { width: 72px; }
    .pv2.gp-pagina #sec-var .gp-vartabel .pv-vartabel { min-width: calc(48px + var(--gp-assen, 1) * 80px + 144px + 96px + 72px + 52px + 44px + var(--gp-status) + var(--gp-act)); }
}

/* ── mobiel: groepspagina ── */
/* Groepspagina (views/products/edit_group.php, .pv2.gp-pagina) tot 768 px — alleen weergave:
   - Actiebalk zoals op de bundelpagina (≤ 720 px): plakt direct onder de suitebar en sluit in rust aan op
     de bovenrand van de pagina.
   - Opslaan zonder "voor n varianten"; bij een wijziging kort de melding in (…), knoppen blijven.
   - Varianten-tabel als lijst: foto links, titel, dan as-waarden · SKU · prijs · vrij, dan
     Compleet + status-pil + Ontkoppelen; geen horizontale scroll meer.
   - Raakvlakken minstens 40 px, geen tekst onder 12 px. */
/* Het aantal achter Opslaan: op breed één doorlopende tekst met "Opslaan" (geen los flex-item in de knop). */
.pv2.gp-pagina .ab__lang { display: contents; }
@media (max-width: 768px) {
    .pv2.gp-pagina .ab__terug { width: 40px; height: 40px; }
    .pv2.gp-pagina .ab__rust .ab__k, .pv2.gp-pagina .ab__knop { height: 40px; min-height: 40px; font-size: 13px; }
    .pv2.gp-pagina .ab__lang { display: none; }
    .pv2.gp-pagina .ab__vuil { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
    .pv2.gp-pagina .ab__melding { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
    .pv2.gp-pagina .ab__vuil .ab__knop { flex: none; }
    /* Meer acties: paneel aan de rechterrand van de balk i.p.v. van de knop (viel links buiten beeld). */
    .pv2.gp-pagina .ab__menu { position: static; }
    .pv2.gp-pagina .ab__menu .auto-popup__paneel { right: 8px; top: calc(100% + 4px); max-width: calc(100vw - 32px); }
    .pv2.gp-pagina .ab__menuitem { min-height: 40px; display: flex; align-items: center; }

    /* Kop en bloknavigatie */
    .pv2.gp-pagina .pv-kop .badge { font-size: 12px; }
    .pv2.gp-pagina .pv-nav__link, .pv2.gp-pagina .pv-nav__meer > summary { height: 40px; }
    .pv2.gp-pagina .pv-tel { font-size: 12px; min-width: 20px; height: 20px; }
    .pv2.gp-pagina .search.pv-nav__zoek { height: 40px; }
    .pv2.gp-pagina .pv-nav__modus .toggle { height: 40px; min-height: 40px; padding: 0 14px; font-size: 13px; }

    /* Invoer: 40 px hoog (vakken, keuzelijsten, zoekvelden in de panelen) */
    .pv2.gp-pagina .pv-form :is(input[type=text], input[type=number], input[type=search], input[type=url], input[type=email], select:not([multiple]):not(.kies__native):not(.media-label):not(.vg-status)),
    .pv2.gp-pagina .gp-raster :is(input[type=text], input[type=number], select),
    .pv2.gp-pagina .pv-vak, .pv2.gp-pagina .kies__knop, .pv2.gp-pagina .gp-paneel .search { height: 40px; min-height: 40px; }
    .pv2.gp-pagina .pv-vak :is(input, select) { height: 38px; min-height: 38px; }
    .pv2.gp-pagina .pv-form .search.pv-nav__zoek input { height: auto; min-height: 0; }
    .pv2.gp-pagina .multi-field__remove { width: 40px; height: 40px; }
    .pv2.gp-pagina .pv-hoofd .multi-field__add { width: 40px; height: 40px; }
    .pv2.gp-pagina :is(.gp-paneel__knoppen, .gp-alleop) .btn, .pv2.gp-pagina .pv-varacties > .pv-uitklap > summary.btn { height: 40px; min-height: 40px; }
    .pv2.gp-pagina .pv-zelden-knop, .pv2.gp-pagina .gp-opbouwacties > button, .pv2.gp-pagina .gp-opbouwacties > details > summary { display: inline-flex; align-items: center; min-height: 40px; margin-top: 0; }
    /* Kleine knoppen in een regel tekst: raakvlak 40 px zonder dat de regel hoger wordt. */
    .pv2.gp-pagina :is(.ai-knop, .pv-gaten a, .dl-kv dd a, .pv-kanaal__meta a) { display: inline-flex; align-items: center; justify-content: center; height: auto; min-width: 40px; min-height: 40px; padding-top: 0; padding-bottom: 0; margin-top: -11px; margin-bottom: -11px; }
    .pv2.gp-pagina #sec-var .gp-vartabel a.row { display: flex; align-items: center; min-height: 40px; white-space: normal; }
    .pv2.gp-pagina .ai-knop { font-size: 12px; }
    .pv2.gp-pagina .richtext__btn { min-width: 40px; height: 40px; }
    .pv2.gp-pagina .pv-poort__item { min-height: 40px; padding: 0; }
    .pv2.gp-pagina .pv-asoptie { min-height: 40px; display: flex; align-items: center; gap: 8px; }
    .pv2.gp-pagina .pv-verschil > summary { min-height: 40px; display: flex; align-items: center; gap: 6px; }
    .pv2.gp-pagina .badge { font-size: 12px; }

    /* Foto's: soortkeuze 40 px en het variantlabel leesbaar */
    .pv2.gp-pagina .pv-rij--media .media-item select.media-label { height: 40px; min-height: 40px; font-size: 16px; }
    .pv2.gp-pagina .pv-variantfoto { font-size: 12px; }

    /* Varianten-tabel als lijst */
    .pv2.gp-pagina #sec-var .gp-vartabel { overflow: visible; margin-left: 0; margin-right: 0; }
    .pv2.gp-pagina #sec-var .gp-vartabel :is(.pv-vartabel, .pv-vartabel tbody) { display: block; width: 100%; }
    .pv2.gp-pagina #sec-var .gp-vartabel .pv-vartabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .pv2.gp-pagina #sec-var .gp-vartabel .pv-vartabel tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; position: relative; padding: 12px 0 10px 48px; border-bottom: 1px solid var(--border); }
    .pv2.gp-pagina #sec-var .gp-vartabel .pv-vartabel tr[hidden] { display: none; }
    .pv2.gp-pagina #sec-var .gp-vartabel .pv-vartabel tr::after { content: ""; order: 3; flex: 0 0 100%; height: 4px; }
    .pv2.gp-pagina #sec-var .gp-vartabel .pv-vartabel td { display: block; padding: 0; border: 0; width: auto; min-width: 0; text-align: left; }
    .pv2.gp-pagina #sec-var .gp-vartabel td.pv-vartabel__foto { position: absolute; left: 0; top: 14px; }
    .pv2.gp-pagina #sec-var .gp-vartabel td.pv-vartabel__titel { order: 1; flex: 1 1 100%; min-width: 0; font-weight: 600; }
    .pv2.gp-pagina #sec-var .gp-vartabel :is(.pv-vartabel__as, .pv-vartabel__sku, .pv-vartabel__prijs, .pv-vartabel__vrij) { order: 2; font-size: 12.5px; color: var(--muted); }
    .pv2.gp-pagina #sec-var .gp-vartabel .pv-vartabel__as strong { color: var(--text); font-weight: 600; }
    .pv2.gp-pagina #sec-var .gp-vartabel :is(.pv-vartabel__as, .pv-vartabel__sku, .pv-vartabel__vrij)::before { content: attr(data-label) " "; color: var(--text-3); }
    .pv2.gp-pagina #sec-var .gp-vartabel .pv-vartabel__sku { white-space: normal; overflow-wrap: anywhere; }
    .pv2.gp-pagina #sec-var .gp-vartabel .pv-vartabel__prijs { color: var(--text); }
    .pv2.gp-pagina #sec-var .gp-vartabel :is(.pv-vartabel__compleet, .pv-vartabel__status, td.act) { order: 4; flex: none; width: max-content; }
    /* Onderste regel (Compleet · status · Ontkoppelen) over de volle breedte, ook onder de foto: past zo op 360 px. */
    .pv2.gp-pagina #sec-var .gp-vartabel .pv-vartabel__compleet { margin-right: auto; margin-left: -48px; }
    .pv2.gp-pagina #sec-var .gp-vartabel :is(.pv-mist, .pv-compleet) { min-height: 40px; font-size: 13px; }
    .pv2.gp-pagina #sec-var .gp-vartabel .kies--pil .kies__knop { height: 36px; min-height: 36px; font-size: 14px; padding: 0 10px 0 12px; }   /* pil: groter raakvlak op een telefoon */
    .pv2.gp-pagina #sec-var .gp-vartabel .gp-los { display: inline-flex; align-items: center; min-height: 40px; font-size: 13px; }
}
@media (max-width: 720px) {
    /* Actiebalk: zelfde aanpak en waarden als de bundelpagina (vak "mobiel: bundelpagina"); de suitebar
       scrolt mee (vak "mobiel: detailpagina's"), dus de balk plakt bovenaan het scherm. */
    .pv2.gp-pagina .ab { top: 0; height: 56px; margin-top: -16px; padding-left: 8px; padding-right: 8px; }
    .pv2.gp-pagina .pv-kaart, .pv2.gp-pagina .pv-zij > [id], .pv2.gp-pagina #gp-assen { scroll-margin-top: calc(56px + 64px); }
}
/* 721–768 px: de container heeft hier 16 px zijmarge, de afdekking boven/onder de actiebalk stak 24 px
   uit en gaf de pagina (en de suitebar) 8 px horizontale scroll (776 bij 768). */
@media (min-width: 721px) and (max-width: 768px) {
    .pv2.gp-pagina .ab::before, .pv2.gp-pagina .ab::after { left: -16px; right: -16px; }
}
    /* Herkomst: een link over twee regels (feednaam) mag niet over de subregel ("Gelezen …") vallen. */
@media (max-width: 720px) { .pv2.gp-pagina .dl-kv dd a + .pv-dd-sub { display: block; margin-top: 12px; } }
/* ── einde mobiel: groepspagina ── */

/* ── mobiel: detailpagina's (productscherm en groepspagina) ── */
/* Telefoon (≤ 720 px, akkoord Kjelt 11-10-2026): de suitebar (en de menuknop erin) scrolt mee; alleen de
   actiebalk en de bloknavigatie plakken. Zodra er iets gewijzigd is staat Verwerpen · Opslaan ook onderin
   (.ab-onder, app.js: kopieën van de knoppen in de balk, zelfde form-attribuut). */
@media (max-width: 720px) {
    body.with-suitebar:has(.pv2 > #productform, .pv2.gp-pagina) :is(.suitebar, .sidebar-toggle) { position: absolute; }
    .pv2 .ab-onder { position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; display: flex; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--ink); color: var(--on-ink); box-shadow: 0 -6px 16px rgba(0, 0, 0, .18); }
    .pv2 .ab-onder[hidden] { display: none; }
    .pv2 .ab-onder .ab__knop { flex: 1 1 0; height: 44px; font-size: 15px; }
    .pv2:has(> .ab-onder:not([hidden])) { padding-bottom: 72px; }   /* de laatste kaart valt er niet onder */
}
@media (min-width: 721px) { .pv2 .ab-onder { display: none; } }
/* ── einde mobiel: detailpagina's ── */

/* ── mobiel: bundelpagina ── */
/* Telefoon (≤ 720 px): geen tabellen om horizontaal door te scrollen maar per rij een kaart, alles binnen
   beeld; raakvlakken 40 px, invoer 16 px (iOS zoomt anders in bij het typen), geen tekst onder 12 px.
   Alleen opmaak: formulieren, velden en volgorde in de HTML blijven gelijk. */
@media (max-width: 720px) {
    /* Actiebalk: plakt direct onder de suitebar en sluit in rust aan op de bovenrand van de pagina. */
    .pv2.bp .ab { height: 56px; margin-top: -16px; padding-left: 8px; padding-right: 8px; }
    .pv2.bp .ab__terug { width: 40px; height: 40px; }
    .pv2.bp .ab__k, .pv2.bp .ab__knop { height: 40px; min-height: 40px; }
    .pv2.bp .ab__vuil .ab__melding { font-size: 12px; }
    .pv2.bp .ab__menu .auto-popup__paneel { right: 0; max-width: calc(100vw - 32px); }
    .pv2.bp .ab__menuitem { min-height: 40px; display: flex; align-items: center; }
    .bp .bp-kaart { scroll-margin-top: calc(var(--suitebar-height) + 64px); }
    .bp .bp-kaart > .card__head { flex-wrap: wrap; row-gap: 2px; }
    .bp .bp-kaart > .card__head .sub { white-space: normal; }

    /* Kop: badges 12 px; bloknavigatie met knoppen van 40 px. */
    .pv2.bp .pv-kop h1 { font-size: 20px; gap: 6px 8px; }
    .pv2.bp .pv-kop .badge { font-size: 12px; height: 24px; }
    .pv2.bp .pv-nav__link, .pv2.bp .pv-nav__meer > summary { height: 40px; }
    .pv2.bp .pv-nav__meerlijst a { min-height: 40px; display: flex; align-items: center; }

    /* Onderdelen: per onderdeel een kaartrij — naam + ⋯ bovenaan, prijs · status · vrij eronder,
       dan Los te koop en de stapper. Kopregel van een keuzegroep gestapeld. */
    .bp-tabelvak { overflow: visible; margin: 0; }
    .pv2 .bp-tabel { display: block; min-width: 0; width: 100%; }
    .bp-tabel colgroup, .bp-tabel thead { display: none; }
    .bp-tabel :is(tbody, tfoot) { display: block; }
    .bp-tabel tr { display: block; }
    .bp-tabel td { display: block; height: auto; padding: 0; border: 0; }
    .bp-kop > td { padding: 0; margin-top: 8px; border-top: 1px solid var(--border); }
    .bp-kop__in { flex-wrap: wrap; white-space: normal; row-gap: 8px; padding: 8px 10px; }
    .bp-kop__soort { font-size: 12px; }
    .bp-kop__sub { flex: 1 1 0; white-space: nowrap; }
    .bp-kop__rechts { flex: 1 1 100%; margin-left: 0; flex-wrap: wrap; gap: 8px 12px; }
    .bp-kop__rechts form.bp-optienaam { flex: 1 1 180px; min-width: 0; }
    .pv2 .bp-optienaam input[type=text] { flex: 1; min-width: 0; width: auto; height: 40px; min-height: 40px; font-size: 16px; }
    .bp-optienaam .btn--icon { width: 40px; height: 40px; min-height: 40px; flex: none; }
    .bp-optioneel__lbl { font-size: 12.5px; }
    .pv2 .bp-optioneel .pv-jn { height: 40px; }
    .pv2 .bp-optioneel .pv-jn__k { height: 38px; min-width: 52px; font-size: 13px; }
    a.bp-kop__link { min-height: 32px; }

    .bp-tabel tr.bp-rij:not(.bp-rij--extra) {
        display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px 12px;
        padding: 10px 0 12px 14px; border-bottom: 1px solid var(--border);
    }
    .bp-tabel tr.bp-rij--vast { box-shadow: inset 2px 0 0 var(--border-strong); }
    .bp-tabel tr.bp-rij--keuze { box-shadow: inset 2px 0 0 var(--info); }
    .bp-tabel .bp-rij > td:first-child { box-shadow: none; padding-left: 0; }
    .bp-tabel .bp-rij > td:nth-child(1) { grid-column: 1 / 4; grid-row: 1; min-width: 0; }
    .bp-tabel .bp-rij > td.act { grid-column: 4; grid-row: 1; padding: 0; }
    .bp-tabel .bp-rij > td:nth-child(2) { grid-column: 1; grid-row: 2; text-align: left; font-size: 13px; font-variant-numeric: tabular-nums; }
    .bp-tabel .bp-rij > td:nth-child(3) { grid-column: 2; grid-row: 2; }
    .bp-tabel .bp-rij > td:nth-child(4) { grid-column: 3 / 5; grid-row: 2; text-align: left; font-size: 13px; }
    .bp-tabel .bp-rij > td:nth-child(4)::before { content: "Vrij "; color: var(--text-3); }
    .bp-tabel .bp-rij > td:nth-child(5) { grid-column: 1 / 3; grid-row: 3; padding: 0; display: flex; align-items: center; gap: 8px; }
    .bp-tabel .bp-rij > td:nth-child(5)::before { content: "Los te koop"; flex: none; font-size: 12.5px; color: var(--text-3); }
    .bp-tabel .bp-rij > td:nth-child(5) > .muted { padding-left: 0; }
    .bp-tabel .bp-rij > td:nth-child(6) { grid-column: 3 / 5; grid-row: 3; padding: 0; justify-self: end; }
    .bp-tabel .titelcel { display: flex; flex-wrap: wrap; row-gap: 4px; }
    .bp-tabel .titelcel .badge { font-size: 12px; }
    .bp-tabel .badge { font-size: 12px; }
    .bp-stapper { width: 124px; height: 40px; }
    .bp-stapper__k { width: 40px; height: 38px; margin: 0; border-radius: 0; font-size: 18px; }
    .pv2 .bp-stapper input[type=number] { height: 38px; min-height: 38px; font-size: 16px; }
    .bp-rijmenu > summary.btn { width: 40px; height: 40px; min-height: 40px; }
    .bp-rijmenu .auto-popup__paneel.ab__menulijst { right: 0; left: auto; max-width: calc(100vw - 48px); }
    .bp-rijmenu .ab__menuitem { min-height: 40px; }
    .bp-tabel tr.bp-rij--extra > td { padding: 4px 0 8px 14px; box-shadow: inset 2px 0 0 var(--info); }
    .bp-rij--extra .link-btn { min-height: 40px; text-align: left; }
    /* Toevoegregel: SKU, aantal en + naast elkaar. */
    .bp-tabel tr.bp-toevoegen { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding-top: 12px; }
    .bp-toevoegen > td:first-child { padding-left: 0; }
    .pv2 .bp-toevoegen input[type=text] { height: 40px; min-height: 40px; font-size: 16px; }
    .bp-stapper--los { width: 72px; }
    .bp-toevoegen .btn--icon { width: 40px; height: 40px; min-height: 40px; }

    /* Combinaties (gedeelde partial, alleen hier anders opgemaakt): per combinatie een kaartrij —
       vinkje, samenstelling en foto bovenaan, standaardprijs eronder, dan eigen prijs en SKU met label. */
    .pv2.bp .bp-combos .table-scroll { overflow: visible; }
    .pv2.bp .bp-combos .combo-tabel { display: block; min-width: 0; width: 100%; }
    .pv2.bp .bp-combos .combo-tabel thead { display: none; }
    .pv2.bp .bp-combos .combo-tabel tbody { display: block; }
    .pv2.bp .bp-combos .combo-tabel tr {
        position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 6px 10px;
        padding: 10px 20px 14px 12px; border-bottom: 1px solid var(--border);
    }
    .pv2.bp .bp-combos .combo-tabel td { display: block; height: auto; padding: 0 !important; border: 0; }
    .pv2.bp .bp-combos .combo-tabel td:nth-child(1) { grid-column: 1; grid-row: 1; }
    .pv2.bp .bp-combos .combo-tabel td:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
    .pv2.bp .bp-combos .combo-tabel td:nth-child(3) { grid-column: 4; grid-row: 1; position: static; }
    .pv2.bp .bp-combos .combo-tabel td:nth-child(4) { grid-column: 2 / 5; grid-row: 2; text-align: left; font-size: 12.5px; }
    .pv2.bp .bp-combos .combo-tabel td:nth-child(4)::before { content: "Standaardprijs "; }
    .pv2.bp .bp-combos .combo-tabel td:nth-child(5) { grid-column: 1 / 3; grid-row: 3; }
    .pv2.bp .bp-combos .combo-tabel td:nth-child(6) { grid-column: 3 / 5; grid-row: 3; }
    .pv2.bp .bp-combos .combo-tabel td:is(:nth-child(5), :nth-child(6))::before { display: block; margin-bottom: 4px; font-size: 12px; color: var(--text-3); }
    .pv2.bp .bp-combos .combo-tabel td:nth-child(5)::before { content: "Eigen prijs (€)"; }
    .pv2.bp .bp-combos .combo-tabel td:nth-child(6)::before { content: "Eigen SKU"; }
    .pv2.bp .bp-combos :is(.combo-tabel__prijs, .combo-tabel__sku) { height: 40px; min-height: 40px; font-size: 16px; }
    .pv2.bp .bp-combos .combo-tabel__extra { font-size: 12px; }
    /* Vinkje: raakvlak 40 × 40 met een vak van 20 px (eigen tekening, zelfde kleuren als het origineel). */
    .pv2.bp .bp-combos .combo-tabel td:nth-child(1) input[type=checkbox] {
        appearance: none; -webkit-appearance: none; position: relative; width: 40px; height: 40px; margin: 0 0 0 -10px; border: 0; background: none; cursor: pointer;
    }
    .pv2.bp .bp-combos .combo-tabel td:nth-child(1) input[type=checkbox]::before {
        content: ""; position: absolute; inset: 10px; border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--surface); box-sizing: border-box;
    }
    .pv2.bp .bp-combos .combo-tabel td:nth-child(1) input[type=checkbox]:checked::before { border-color: var(--ink); background: var(--ink); }
    .pv2.bp .bp-combos .combo-tabel td:nth-child(1) input[type=checkbox]:checked::after {
        content: ""; position: absolute; left: 17px; top: 13px; width: 5px; height: 10px; border: solid var(--on-ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
    }
    .pv2.bp .bp-combos .combo-tabel td:nth-child(1) input[type=checkbox]:focus-visible::before { box-shadow: 0 0 0 3px var(--brand-ring); }
    /* Foto: miniatuur 40 px + fotoknop 40 px; de fotokiezer opent onder de rij over de volle breedte. */
    .pv2.bp .bp-combos .combo-tabel__thumb { width: 40px; height: 40px; }
    .pv2.bp .bp-combos .combo-tabel__foto .fk-details > summary { width: 40px; height: 40px; }
    .pv2.bp .bp-combos .fk-details[open] > .fotokiezer { left: 8px; right: 8px; top: calc(100% - 6px); width: auto; max-width: none; max-height: 60vh; }
    .pv2.bp .bp-combos .fotokiezer .fk-tegel img, .pv2.bp .bp-combos .fotokiezer .fk-leeg { width: 72px; height: 72px; font-size: 12px; }
    .pv2.bp .bp-combos .fotokiezer .fk-groot { width: 32px; height: 32px; min-height: 32px; }
    .pv2.bp .bp-combos .form .form-actions .btn { min-height: 40px; }

    /* Prijs: per onderdeel naam + subtotaal, eronder prijs × aantal; kolomkoppen weg (waren 10 px). */
    .pv2.bp .bp-prijs .table-scroll { overflow: visible; }
    .pv2.bp .bp-prijstabel { display: block; }
    .pv2.bp .bp-prijstabel thead { display: none; }
    .pv2.bp .bp-prijstabel :is(tbody, tfoot) { display: block; }
    .pv2.bp .bp-prijstabel tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 2px 8px; padding: 10px 20px; border-bottom: 1px solid var(--border); }
    .pv2.bp .bp-prijstabel tbody tr:last-child { border-bottom-color: var(--border-strong); }
    .pv2.bp .bp-prijstabel td { display: block; height: auto; padding: 0 !important; border: 0 !important; }
    .pv2.bp .bp-prijstabel td:nth-child(1) { grid-column: 1 / 4; grid-row: 1; min-width: 0; }
    .pv2.bp .bp-prijstabel td:nth-child(4) { grid-column: 4; grid-row: 1; }
    .pv2.bp .bp-prijstabel tbody td:nth-child(2) { grid-column: 1; grid-row: 2; text-align: left; font-size: 12.5px; color: var(--text-3); }
    .pv2.bp .bp-prijstabel tbody td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: left; font-size: 12.5px; color: var(--text-3); }
    .pv2.bp .bp-prijstabel tfoot tr { border-bottom: 0; }
    .pv2.bp .bp-prijstabel tfoot td:is(:nth-child(2), :nth-child(3)) { display: none; }
    .pv2.bp .bp-prijs .kies__knop { min-height: 40px; }

    /* Content: links en knoppen 40 px hoog. */
    .pv2 #content .bp-eigen > summary, .pv2 #content .bp-wis { min-height: 40px; display: inline-flex; align-items: center; }
    .pv2 #content .bp-media__weg .btn--icon { width: 32px; height: 32px; min-height: 32px; }

    /* Zijkolom: knoppen en keuzes 40 px. */
    .bp .pv-zij :is(.btn, .kies__knop) { min-height: 40px; }
    .bp .pv-zij details > summary { min-height: 40px; display: flex; align-items: center; }
    .bp-code { max-width: 160px; font-size: 12px; }
    .bp .pv-zij .dl-kv code, .bp .pv-zij .badge { font-size: 12px; }
    .bp .pv-zij .bnd-droog .table { font-size: 12.5px; }
}
/* 721–768 px: de container heeft hier 16 px zijmarge, de afdekking boven/onder de actiebalk stak 24 px
   uit en gaf de pagina 8 px horizontale scroll (776 bij 768). */
@media (min-width: 721px) and (max-width: 768px) {
    .pv2.bp .ab::before, .pv2.bp .ab::after { left: -16px; right: -16px; }
}
/* Bundellijst (/product-bundles): op de telefoon per bundel een kaartrij — titel bovenaan, de
   zichtbare kolommen eronder als korte regel met label (kolomkiezer blijft werken). */
@media (max-width: 720px) {
    .bp-lijst .filters__form { flex-wrap: wrap; }
    .bp-lijst .filters__form .search { flex: 1 1 100%; }
    .bp-lijst .filters__form :is(.filters__select, .btn) { flex: 1 1 140px; min-height: 40px; font-size: 16px; }
    .bp-lijst .filters__form .btn { font-size: 14px; }
    .bp-lijst .filters__form .search input { font-size: 16px; min-height: 38px; }
    .bp-lijst .table-scroll { overflow: visible; }
    .bp-lijst #bundeltabel { display: block; min-width: 0; }
    .bp-lijst #bundeltabel thead { display: none; }
    .bp-lijst #bundeltabel tbody { display: block; }
    .bp-lijst #bundeltabel tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
    .bp-lijst #bundeltabel td { display: block; padding: 0; border: 0; height: auto; text-align: left; font-size: 13px; }
    .bp-lijst #bundeltabel td:first-child { flex: 1 1 100%; min-width: 0; position: static; background: transparent; }
    .bp-lijst #bundeltabel td:first-child::after { content: none; }   /* plaklijn van .table--plak: geen kolom meer */
    .bp-lijst #bundeltabel td:first-child a.row { min-height: 24px; display: inline-flex; align-items: center; }
    .bp-lijst #bundeltabel td:is([data-col=onderdelen], [data-col=combinaties])::before { color: var(--text-3); }
    .bp-lijst #bundeltabel td[data-col=onderdelen]::before { content: "Onderdelen "; }
    .bp-lijst #bundeltabel td[data-col=combinaties]::before { content: "Actief "; }
    .bp-lijst #bundeltabel .badge { font-size: 12px; }
}
/* ── einde mobiel: bundelpagina ── */
/* ── mobiel: invoer 16 px ── iOS zoomt in bij focus op een invoerveld met tekst < 16 px. Eén regel voor
   alle invoer op de mobiel-omgezette schermen: product-, groeps- en bundelpagina (.pv2), productenlijst,
   conceptlijst per feed, de feedlijst, bundellijst en Nieuw product › producttype (.tk). */
@media (max-width: 720px) {
    :is(.pv2, .card:has(> .pl-filters), .card:has(> .filters select[name="cf"]), .card:has(.concepttabel), .card:has(#feedtabel), .bp-lijst, .bnd-titelveld, .tk)
        :is(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden]), select, textarea, .kies__knop, .kies__invoer) { font-size: 16px; }
}
/* ── Publicatievenster (docs/ui/componenten/publicatievenster.md, ontwerp 10-10-2026) ──────────────
   Kaart Kanalen in de zijkolom: samenvatting (.pubsam) + schuifjesknop; het venster .pub met tabs per
   soort kanaal en een schakelaar per kanaal. Laag = .media-laag (zelfde als het fotovenster). */
.pv2 .pv-pub .card__head { align-items: center; }
.pv2 .pv-pub__open { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -4px -6px -4px 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.pv2 .pv-pub__open:hover { background: var(--surface-3); color: var(--text); }
.pv2 .pv-pub__open:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.pv2 .pv-pub__open svg.i { width: 16px; height: 16px; }
.pv2 .pubsam { display: flex; flex-direction: column; gap: 10px; }
.pv2 .pubsam__rij { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--text); }
.pv2 .pubsam__rij[hidden] { display: none; }
.pv2 .pubsam__rij > svg.i { flex: none; width: 17px; height: 17px; color: var(--muted); }
.pv2 .pubsam__rij--leeg, .pv2 .pubsam__rij--concept { color: var(--muted); font-weight: 400; }
.pv2 .pubsam__rij--warn { color: var(--warn); font-size: 12.5px; }
.pv2 .pubsam__rij--warn > svg.i { width: 15px; height: 15px; color: var(--warn); }
.pv2 .pubsam__stand { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 2px; font-size: 12px; }
.pv2 .pubsam__standrij { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pv2 .pubsam__rij > .pv-vak__groep { margin-left: auto; }   /* variant in een groep: verkoopkanalen op de groepspagina */
.pv2 .pub, .pub--los { position: fixed; z-index: 991; left: 0; right: 0; top: calc(var(--venster-boven) + 24px); margin: 0 auto; width: min(860px, calc(100vw - 32px)); max-height: calc(100dvh - var(--venster-boven) - 48px); display: flex; flex-direction: column; border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); animation: vrij-in .2s ease; }
.pv2 .pub[hidden], .pub--los[hidden] { display: none; }
@media (min-width: 769px) {
    .pv2 .pub, .pub--los { left: var(--sidebar-width); width: min(860px, calc(100vw - var(--sidebar-width) - 48px)); }
}
/* Los venster buiten het productscherm (.pub.pub--los, data-venster in dfh-ui.js): zelfde kop, kruisje en
   voetbalk; .pub--klein = een paar velden (bv. "Nieuwe bundel"), inhoud in .pub__inhoud. */
.pub--los.pub--klein { width: min(440px, calc(100vw - 32px)); }
.pub--los.pub--middel { width: min(600px, calc(100vw - 32px)); }   /* een lijst keuzes in twee kolommen (Leveranciersformulier) */
.pub--los.pub--breed { width: min(1240px, calc(100vw - 32px)); }   /* een brede tabel (Prijsgeschiedenis, 10 kolommen) */
@media (min-width: 769px) {
    .pub--los.pub--klein { width: min(440px, calc(100vw - var(--sidebar-width) - 48px)); }
    .pub--los.pub--middel { width: min(600px, calc(100vw - var(--sidebar-width) - 48px)); }
    .pub--los.pub--breed { width: min(1240px, calc(100vw - var(--sidebar-width) - 48px)); }
}
.pub--los .pub__inhoud { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; overflow: auto; }
.pub--los > form { display: flex; flex-direction: column; min-height: 0; margin: 0; }
/* Selectiebalk (docs/ui/componenten/selectiebalk.md): zweeft onderaan bij een selectie, in de kleur van de
   actiebalk in rust (--surface, rand, schaduw, afgerond). Standen: --alles (oranje: alles in dit filter), --teveel
   (rood: boven het maximum), --bezig (draaier + voortgangsbalk), --klaar (groen), --stil (vastgelopen taak).
   Knoppen = gewone .btn / .btn--primary. */
.sb { position: sticky; bottom: 16px; z-index: 40; display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 16px 0 0; padding: 10px 12px 10px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: 0 10px 30px rgba(0, 0, 0, .25), var(--shadow-1); font-size: 13.5px; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.sb[hidden] { display: none; }
.sb__links { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; flex: 1; min-width: 0; }
.sb__aantal { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.sb__teller { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-dark); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sb__link { appearance: none; position: relative; padding: 0 0 0 14px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.sb__link::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: var(--border-strong); }
.sb__link:hover { color: var(--text); text-decoration: underline; }
.sb__link[hidden] { display: none; }
.sb__pct { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.sb__pct[hidden] { display: none; }
.sb__acties { display: flex; align-items: center; gap: 8px; flex: none; }
.sb__acties[hidden] { display: none; }
.sb__acties .btn svg.i { width: 12px; height: 12px; }
.sb__menu .auto-popup__paneel.ab__menulijst { top: auto; bottom: calc(100% + 8px); right: 0; width: auto; min-width: 210px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, .3); }
.sb__menu.is-uit > summary { opacity: .5; pointer-events: none; }
.sb-menukop { padding: 6px 10px 4px; color: var(--text-3); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.sb-menuitem { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.sb-menuitem svg.i { width: 14px; height: 14px; color: var(--muted); }
.ab__menuitem--crit.sb-menuitem svg.i { color: var(--crit); }
.sb-stip { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--new); }
.sb-stip--active { background: var(--ok); }
.sb-stip--uitlopend { background: var(--warn); }
.sb-stip--archived { background: var(--text-3); }
/* Standen */
.sb--alles { border-color: var(--brand); background: var(--brand-tint-soft); }
.sb--teveel { border-color: var(--crit); background: var(--crit-bg); color: var(--crit); }
.sb--teveel .sb__link { color: var(--crit); }
.sb--teveel .sb__link::before { background: currentColor; opacity: .4; }
.sb__draai { flex: none; width: 16px; height: 16px; border: 2px solid var(--border-strong); border-top-color: var(--brand); border-radius: 50%; animation: ab-draai .9s linear infinite; }
.sb__klaar-ico { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ok); color: var(--surface); }
.sb__klaar-ico svg.i { width: 11px; height: 11px; stroke-width: 3; }
/* Geen overflow: hidden op .sb (dan vallen de menu's die naar boven openklappen weg): de balk rondt zelf af. */
/* Voortgang: een dunne baan binnen de balk (vrij van de ronde hoeken), over de volle breedte; de vulling loopt tot 100%. */
.sb__voortgang { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 3px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--brand) 18%, transparent); }
.sb__voortgang[hidden] { display: none; }
.sb__voortgang > i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-tint), var(--brand)); background-size: 200% 100%; animation: sb-glans 1.6s linear infinite; transition: width .4s ease; }
@keyframes sb-glans { to { background-position: -200% 0; } }
.sb--klaar { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); cursor: pointer; }
.sb--klaar .sb__link { color: var(--ok); }
.sb--klaar .sb__link::before { background: currentColor; opacity: .4; }
.sb:is(.sb--stil, .sb--let) { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.sb:is(.sb--stil, .sb--let) .sb__link { color: var(--warn); }
.sb:is(.sb--stil, .sb--let) .sb__link::before { background: currentColor; opacity: .4; }
.sb--let { cursor: pointer; }
.sb--fout { border-color: var(--crit); background: var(--crit-bg); color: var(--crit); cursor: pointer; }
.sb--fout .sb__link { color: var(--crit); }
.sb--fout .sb__link::before { background: currentColor; opacity: .4; }
@media (prefers-reduced-motion: reduce) { .sb__draai, .sb__voortgang > i { animation: none; } }
/* Binnen een voorbeeld (stijlgids): niet zwevend, ook niet op een telefoon. */
.sb.sb--inline { position: relative; bottom: auto; left: auto; right: auto; margin: 0; }
@media (max-width: 720px) {
    .sb:not(.sb--inline) { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); margin: 0; }
    .sb { padding: 10px 12px; flex-wrap: wrap; }
    .sb__acties { width: 100%; }
    .sb__acties > * { flex: 1; min-width: 0; }
    .sb__acties .btn, .sb__menu > summary { width: 100%; justify-content: center; min-height: 42px; white-space: normal; text-align: center; }
    .sb__link { padding-left: 0; }
    .sb__link::before { display: none; }
    /* Menu's op de volle breedte van de balk (de balk is fixed en dus het kader), anders valt het linkermenu buiten beeld. */
    .sb__menu { position: static; }
    .sb__menu .auto-popup__paneel.ab__menulijst { left: 0; right: 0; bottom: calc(100% + 8px); min-width: 0; }
    /* Ruimte onderaan zodat de vaste balk de laatste rijen en de paginering niet afdekt. */
    body:has(.sb:not([hidden]):not(.sb--inline)) .container { padding-bottom: 150px; }
}

/* Vinkje (docs/ui/componenten/vinkje.md): eigen vinkje in de inktkleur voor selecteren in tabellen (rij-, groeps- en
   kopvinkjes); half = streepje. Focusring alleen bij toetsenbordgebruik (geen oranje vak na een klik). */
:is(input.vink, #producttabel .pl-kies, #producttabel .pl-kies-groep, input[data-sb-pagina], .concepttabel input[type=checkbox], #selectie-form input.row-check, #selectie-form input.js-grp-check, #selectie-form #check-all, #sg-sb input[type=checkbox])[type=checkbox] { appearance: none; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0; padding: 0; border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--surface); box-shadow: none; outline: none; cursor: pointer; vertical-align: middle; transition: background-color .15s ease, border-color .15s ease; }
:is(input.vink, #producttabel .pl-kies, #producttabel .pl-kies-groep, input[data-sb-pagina], .concepttabel input[type=checkbox], #selectie-form input.row-check, #selectie-form input.js-grp-check, #selectie-form #check-all, #sg-sb input[type=checkbox])[type=checkbox]:hover { border-color: var(--muted); }
:is(input.vink, #producttabel .pl-kies, #producttabel .pl-kies-groep, input[data-sb-pagina], .concepttabel input[type=checkbox], #selectie-form input.row-check, #selectie-form input.js-grp-check, #selectie-form #check-all, #sg-sb input[type=checkbox])[type=checkbox]:is(:checked, :indeterminate) { border-color: var(--ink); background: var(--ink); }
:is(input.vink, #producttabel .pl-kies, #producttabel .pl-kies-groep, input[data-sb-pagina], .concepttabel input[type=checkbox], #selectie-form input.row-check, #selectie-form input.js-grp-check, #selectie-form #check-all, #sg-sb input[type=checkbox])[type=checkbox]:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--on-ink); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
:is(input.vink, #producttabel .pl-kies, #producttabel .pl-kies-groep, input[data-sb-pagina], .concepttabel input[type=checkbox], #selectie-form input.row-check, #selectie-form input.js-grp-check, #selectie-form #check-all, #sg-sb input[type=checkbox])[type=checkbox]:indeterminate::after { content: ""; width: 9px; height: 2px; border-radius: 1px; background: var(--on-ink); }
:is(input.vink, #producttabel .pl-kies, #producttabel .pl-kies-groep, input[data-sb-pagina], .concepttabel input[type=checkbox], #selectie-form input.row-check, #selectie-form input.js-grp-check, #selectie-form #check-all, #sg-sb input[type=checkbox])[type=checkbox]:focus-visible { box-shadow: 0 0 0 3px var(--brand-ring); }
:is(input.vink, #producttabel .pl-kies, #producttabel .pl-kies-groep, input[data-sb-pagina], .concepttabel input[type=checkbox], #selectie-form input.row-check, #selectie-form input.js-grp-check, #selectie-form #check-all, #sg-sb input[type=checkbox])[type=checkbox]:disabled { opacity: .45; cursor: not-allowed; }
/* Geselecteerde rij: lichte oranje tint + oranje streep links (tabelstandaard, sectie Selecteren). */
:is(#producttabel, .concepttabel, .table--kies, #selectie-form table, #sg-sb table) tbody tr:has(> td input[type=checkbox]:checked:not([data-sb-pagina])) > td { background: var(--brand-tint-soft); }
:is(#producttabel, .concepttabel, .table--kies, #selectie-form table, #sg-sb table) tbody tr:has(> td input[type=checkbox]:checked:not([data-sb-pagina])) > td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
@media (max-width: 720px) {
    /* Telefoon: rijen zijn kaarten (flex met losse cellen) — tint en streep op de hele kaart. */
    :is(#producttabel, .concepttabel, .table--kies, #selectie-form table, #sg-sb table) tbody tr:has(> td input[type=checkbox]:checked:not([data-sb-pagina])) { background: var(--brand-tint-soft); box-shadow: inset 3px 0 0 var(--brand); }
    :is(#producttabel, .concepttabel, .table--kies, #selectie-form table, #sg-sb table) tbody tr:has(> td input[type=checkbox]:checked:not([data-sb-pagina])) > td { background: transparent; box-shadow: none; }
}
/* Keuzerondjes (docs/ui/componenten/keuzerondjes.md): één keuze uit een paar opties. Twee vormen:
   .keuzes = omrande rijen (A), .keuzes.keuzes--lijst = lijst zonder randen (D). Eén eigen rondje in de
   huiskleur (gekozen = oranje: merk en aandacht, zoals de actieve Kolommen-knop); --gevaar = rood als hij gekozen is. */
.keuzes { display: flex; flex-direction: column; gap: 6px; }
.keuzes__optie { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; font-size: 13px; line-height: 1.35; color: var(--text); }
.keuzes__optie:hover { border-color: var(--border-strong); }
.keuzes__optie:has(input:checked) { border-color: var(--brand); background: var(--brand-tint-soft); }
.keuzes__optie--gevaar:has(input:checked) { border-color: var(--crit); background: var(--crit-bg); }
.keuzes__optie:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.keuzes__optie:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(255, 166, 65, .35); }
.keuzes__optie input[type=radio] { appearance: none; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 0; padding: 0; border: 1.5px solid var(--border-strong); border-radius: 50%; background: none; box-shadow: none; outline: none; cursor: inherit; }
.keuzes__optie input[type=radio]:checked { border-color: var(--brand); }
.keuzes__optie input[type=radio]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.keuzes__optie--gevaar input[type=radio]:checked { border-color: var(--crit); }
.keuzes__optie--gevaar input[type=radio]:checked::after { background: var(--crit); }
.keuzes__optie > span { flex: 1; min-width: 0; }
.keuzes__optie small { display: block; margin-top: 2px; color: var(--text-3); font-size: 12px; }
/* D: lijst zonder randen; met toelichting staat het rondje bij de eerste regel */
.keuzes--lijst { gap: 10px; }
.keuzes--lijst .keuzes__optie, .keuzes--lijst .keuzes__optie:has(input:checked), .keuzes--lijst .keuzes__optie--gevaar:has(input:checked) { align-items: flex-start; padding: 0; border: 0; background: none; }
.keuzes--lijst .keuzes__optie input[type=radio] { margin-top: 0; }
.keuzes--lijst .keuzes__optie:has(input:focus-visible) { box-shadow: none; }
.keuzes--lijst .keuzes__optie input[type=radio]:focus-visible { box-shadow: 0 0 0 3px rgba(255, 166, 65, .35); }
/* Producttype wijzigen (views/products/_type_wijzigen.php): voorstel onder de boomkiezer. */
.venster-voorstel { display: flex; flex-direction: column; gap: 10px; }
.venster-voorstel:empty { display: none; }
.venster-voorstel p { margin: 0; }
.tw-kop { font-size: 13.5px; }
.tw-leden td { vertical-align: top; }
.tw-mist { margin-top: 4px; font-size: 12px; color: var(--crit); }
#tw-open { margin-left: 6px; vertical-align: middle; }
.pvw-doel { margin-top: 8px; }
.pvw-doel[hidden] { display: none; }
:is(.pv2, .pub--los) .pub__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--border); }
:is(.pv2, .pub--los) .pub__kop h2 { margin: 0; font-size: 15px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.pv2, .pub--los) .pub__x { appearance: none; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
:is(.pv2, .pub--los) .pub__x:hover { background: var(--surface-3); color: var(--text); }
:is(.pv2, .pub--los) .pub__x svg.i { width: 16px; height: 16px; }
.pv2 .pub__concept { display: flex; align-items: center; gap: 8px; padding: 12px 20px 0; font-size: 12.5px; }
.pv2 .pub__body { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: 16px; min-height: 300px; padding: 16px 20px; overflow: auto; }
.pv2 .pub__nav { display: flex; flex-direction: column; gap: 2px; }
.pv2 .pub__tab { appearance: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; transition: background-color .2s ease; }
.pv2 .pub__tab:hover, .pv2 .pub__tab--aan { background: var(--surface-3); }
.pv2 .pub__tab--aan { font-weight: 600; }
.pv2 .pub__tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.pv2 .pub__tel { color: var(--muted); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pv2 .pub__lijst { border: 1px solid var(--border); border-radius: 10px; padding: 0 14px 4px; }
.pv2 .pub__lijst[hidden] { display: none; }
.pv2 .pub__groep { font-size: 12px; font-weight: 600; color: var(--muted); padding: 12px 0 6px; }
.pv2 .pub__groep .muted { font-weight: 400; }
.pv2 .pub__geldt { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
.pv2 .pub__geldt strong { color: var(--text); font-weight: 600; }
.pv2 .pub__rij { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.pv2 .pub__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pv2 .pub__naam { font-size: 13px; font-weight: 600; }
.pv2 .pub__sub { font-size: 12px; color: var(--muted); }
.pv2 .pub__sub--warn { color: var(--warn); }
:is(.pv2, .pub--los) .pub__voet { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); }
/* Schakelaar (role=switch): grijs = uit, groen = aan. Ook in het datumveld met opties (.dv, buiten .pv2, bv. Productivity). */
.pv2 .schak, .dv .schak { appearance: none; position: relative; flex: none; width: 34px; height: 20px; padding: 0; border: 0; border-radius: 10px; background: var(--border-strong); cursor: pointer; transition: background-color .2s ease; }
.pv2 .schak i, .dv .schak i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s ease; }
.pv2 .schak--aan, .dv .schak--aan { background: var(--ok); }
.pv2 .schak--aan i, .dv .schak--aan i { transform: translateX(14px); }
.pv2 .schak:focus-visible, .dv .schak:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pv2 .schak:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 720px) {
    .pv2 .pub, .pub--los { top: calc(var(--venster-boven) + 8px); width: calc(100vw - 16px); max-height: calc(100dvh - var(--venster-boven) - 16px); }
    .pv2 .pub__body { grid-template-columns: minmax(0, 1fr); gap: 12px; min-height: 0; padding: 12px 16px; }
    .pv2 .pub__nav { flex-direction: row; overflow-x: auto; gap: 4px; scrollbar-width: none; }
    .pv2 .pub__tab { flex: none; }
}

/* ── AI-voorbeeld (docs/ui/componenten/ai-voorbeeld.md, akkoord Kjelt 11-10-2026) ────────────────────
   Venster .pub.aivb op het productscherm van een actief product: per veld Nu en Voorstel naast elkaar;
   kop, kruisje en voetbalk van het publicatievenster. */
.pv2 .aivb { width: min(980px, calc(100vw - 32px)); }
@media (min-width: 769px) {
    .pv2 .aivb { width: min(980px, calc(100vw - var(--sidebar-width) - 48px)); }
}
.pv2 .aivb__body { display: flex; flex-direction: column; gap: 18px; padding: 16px 20px; overflow: auto; }
.pv2 .aivb__rij { display: flex; flex-direction: column; gap: 8px; }
.pv2 .aivb__label { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.pv2 .aivb__kolommen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pv2 .aivb__kol { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; line-height: 1.5; color: var(--text); }
.pv2 .aivb__kol--na { border-color: var(--border-strong); background: var(--surface-2); }
.pv2 .aivb__kop { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pv2 .aivb__tekst { margin: 0; overflow-wrap: anywhere; }
.pv2 .aivb__lijst { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.pv2 .aivb__leeg { color: var(--muted); }
.pv2 .aivb__opmaak { overflow-wrap: anywhere; }
.pv2 .aivb__opmaak > :first-child { margin-top: 0; }
.pv2 .aivb__opmaak > :last-child { margin-bottom: 0; }
.pv2 .aivb__opmaak p, .pv2 .aivb__opmaak ul, .pv2 .aivb__opmaak ol { margin: 0 0 8px; }
.pv2 .aivb__opmaak ul, .pv2 .aivb__opmaak ol { padding-left: 18px; }
.pv2 .aivb__opmaak h2, .pv2 .aivb__opmaak h3, .pv2 .aivb__opmaak h4 { margin: 10px 0 4px; font-size: 13.5px; font-weight: 650; }
/* AI-venster (partials/ai_venster.php, besluiten Kjelt 15-10-2026): meerdere taken in één voorstelvenster — per taak een
   sectie met kop en vinkje "Overnemen", de tabel van Velden aanvullen, meldingen (fout/let op/leeg) en de aanzichten. */
.pv2 .aivb__sectie { display: flex; flex-direction: column; gap: 10px; }
.pv2 .aivb__sectie + .aivb__sectie { padding-top: 16px; border-top: 1px solid var(--border); }
.pv2 .aivb__sectiekop { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.pv2 .aivb__sectiekop .spacer { flex: 1; }
.pv2 .aivb__sectietitel { margin: 0; font-size: 14px; font-weight: 600; }
.pv2 .aivb__over { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.pv2 .aivb__over input, .pv2 .aivb__vink input { margin: 0; accent-color: var(--brand); }
.pv2 .aivb__tabelwrap { border: 1px solid var(--border); border-radius: 10px; }
.pv2 .aivb__tabel { font-size: 13px; }
.pv2 .aivb__tabel td { vertical-align: top; }
.pv2 .aivb__tabel td:nth-child(4) { min-width: 200px; overflow-wrap: anywhere; }
.pv2 .aivb__vink { width: 28px; }
.pv2 .aivb__nu { color: var(--muted); }
.pv2 .aivb__sub { display: block; font-size: 12px; color: var(--text-3); }
.pv2 .aivb__perlid { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.pv2 .aivb__melding { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.pv2 .aivb__melding--fout { background: var(--crit-bg); color: var(--crit); }
.pv2 .aivb__melding--let { background: var(--warn-bg); color: var(--text); }
.pv2 .aivb__melding--let > strong { display: block; margin-bottom: 4px; color: var(--warn); font-weight: 600; }
.pv2 .aivb__melding--leeg { background: var(--surface-2); color: var(--muted); }
.pv2 .aivb__niet summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.pv2 .aivb__niet p { margin: 6px 0 0; font-size: 12.5px; }
.pv2 .aivb__fotocel { width: 72px; }
.pv2 .aivb__fotocel img { display: block; width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.pv2 .aivb__tabel--fotos td { vertical-align: middle; }
.pv2 .aivb__voetnoot { display: inline-flex; align-items: center; }
.pv2 .aivb__sectietitel .src, .pv2 .aivb__melding strong .src { margin-left: 4px; }
.pv2 .aiv-modus { display: flex; align-items: center; gap: 6px; }
.pv2 .aiv-modus .seg--toggle { margin: 0; }
/* Kop van een AI-venster: icoon naar Automatiseringen naast het kruisje (geen uitleglink in het venster). */
.pub__kopknoppen { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
@media (max-width: 720px) {   /* aanvultabel als kaartjes: vinkje links, veld/voorstel/bron/zekerheid eronder */
    .pv2 .aivb__tabelwrap { overflow: visible; }
    .pv2 .aivb__tabel thead, .pv2 .aivb__tabel .aivb__nu { display: none; }
    .pv2 .aivb__tabel, .pv2 .aivb__tabel tbody { display: block; }
    .pv2 .aivb__tabel tr { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; padding: 10px 12px; }
    .pv2 .aivb__tabel tr + tr { border-top: 1px solid var(--border); }
    .pv2 .aivb__tabel td { display: block; padding: 2px 0; border: 0; grid-column: 2; min-width: 0; }
    .pv2 .aivb__tabel td.aivb__vink { grid-column: 1; grid-row: 1 / span 4; }
    .pv2 .aivb__tabel td:nth-child(4) { min-width: 0; }
}
@media (max-width: 720px) {
    .pv2 .aivb__body { padding: 12px 16px; }
    .pv2 .aivb__kolommen { grid-template-columns: minmax(0, 1fr); }
}

/* Schil mobiel (≤ 768 px, waar de zijbalk inklapt): de menuknop staat links ín de suitebar (vast, boven
   de apps die eronder doorscrollen); de testmodus-balk is één dunne regel die met de pagina meescrolt
   (korte tekst), zodat de plakkende actiebalk direct onder de suitebar kan staan. */
@media (max-width: 768px) {
    .sidebar .nav-link { min-height: 44px; }   /* raakvlak 44 px in de lade */
    .sidebar .nav-link.active::before { top: 12px; bottom: 12px; }
    body.with-suitebar .suitebar { padding-left: 54px; }
    body.with-suitebar .sidebar-toggle { top: calc((var(--suitebar-height) - 36px) / 2); left: 8px; z-index: 1201; width: 38px; height: 36px; padding: 11px 10px; border: 0; border-radius: 8px; background: var(--ink); }
    html[data-theme="dark"] body.with-suitebar .sidebar-toggle { background: #110f0d; }
    html[data-theme="dark"] body.with-suitebar .sidebar-toggle span { background: #efe9e1; }   /* zoals de suitebar-tekst in donker */
    body.with-suitebar .sidebar-toggle:hover { background: rgba(255, 255, 255, .08); }
    body.with-suitebar .sidebar-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
    body.with-suitebar .sidebar-toggle span { background: var(--on-ink); }
    body.with-suitebar .testmodus-balk { position: static; padding: 3px 12px; font-size: 12px; line-height: 18px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .testmodus-balk__lang { display: none; }
    body:has(.testmodus-balk) .pv2 { --pv-boven: 0px; }
}
@media (min-width: 769px) { .testmodus-balk__kort { display: none; } }

/* Ankers in de zijkolom (Variantopbouw, Variantgroep, Bundels): niet onder de plakkende actiebalk en bloknavigatie. */
.pv2 .pv-zij > [id], .pv2 #variantgroep, .pv2 #bundels, .pv2 #gp-assen { scroll-margin-top: calc(var(--suitebar-height) + var(--pv-boven) + 150px); }

/* ── stijlgids: detailpagina ── */
.sg-ab { display: grid; gap: 14px; padding: 16px; border-radius: 10px; background: var(--bg); }
.sg-ab__stand { display: grid; gap: 6px; min-width: 0; }
.sg-ab__label { font-size: 12px; color: var(--muted); }
.sg-ab .ab { position: relative; top: auto; margin: 0; padding: 0 8px; border-radius: var(--radius); }
.sg-ab .ab::before, .sg-ab .ab::after { display: none; }
.sg-pub { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; padding: 16px; border-radius: 10px; background: var(--bg); }
.sg-pub .sg-pub__kaart { flex: 1 1 260px; max-width: 320px; min-width: 0; margin: 0; }
.sg-pub .pub { flex: 1 1 420px; min-width: 0; position: static; z-index: auto; width: auto; max-height: none; margin: 0; animation: none; box-shadow: var(--shadow-1); }
.sg-pub .pub__body { min-height: 0; }
.sg-schak { display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; font-size: 13px; }
.sg.is-smal .sg-pub .pub__body { grid-template-columns: minmax(0, 1fr); }
.sg.is-smal .sg-pub .pub__nav { flex-direction: row; overflow-x: auto; gap: 4px; }
.sg.is-smal .sg-pub .pub__tab { flex: none; }
@media (max-width: 720px) { .sg-ab .ab--vuil .ab__melding { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.sg.is-smal .sg-ab .ab--vuil .ab__melding { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sg.is-smal .sg-ab .ab__pad, .sg.is-smal .sg-ab .ab__rust > a.ab__k { display: none; }
.sg.is-smal .sg-ab .ab__acties { margin-left: auto; }

/* Instellingen › Automatiseringen (11-10-2026): per tekstsoort een kaart met een groot tekstvak voor de
   AI-aanwijzingen, teller eronder; zijkolom met schakelaars en links. */
.auto-kaart .card__head { gap: 10px; flex-wrap: wrap; }
.auto-kaart .field { margin: 0; }
.auto-prompt { width: 100%; min-height: 220px; resize: vertical; font: inherit; font-size: 13px; line-height: 1.55; }
.auto-teller { margin-top: 6px; text-align: right; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.auto-teller--vol { color: var(--warn); }
.auto-schakelaars { display: flex; flex-direction: column; gap: 12px; }
.auto-schakelaars .field--check { align-items: flex-start; margin: 0; }
.auto-schakelaars .field--check span { display: flex; flex-direction: column; gap: 2px; }
.auto-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.auto-links li { display: flex; justify-content: space-between; gap: 12px; }
.auto-links a { white-space: nowrap; }
@media (max-width: 720px) { .auto-prompt { font-size: 16px; } }   /* iOS zoomt niet in bij 16 px */
.auto-doel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12.5px; }
.auto-doel .spacer { flex: 1; }
.auto-doel__veld { text-decoration: none; }

/* Automatiseringen, lijst en detail (herontwerp 13-10-2026; patroon docs/ui/patronen/lijst-en-detail.md): tabbladen
   (nav.sig-tabs.auto-tabs met a.sig-tabs__tab, aantal in .sig-tabs__n), per tab .auto-werk = links het detail, rechts (zijkolom .auto-zij) de lijst .auto-nav (groepskop .auto-nav__groep, rij
   .auto-nav__rij met .auto-nav__naam + grijze .auto-nav__sub, gekozen = .is-actief zoals het actieve zijbalkitem: tint + los merkstreepje); .auto-detail
   met de gekozen kaart. Binnen een kaart: .auto-blok (handboek, laatste wijzigingen) met kop .auto-blok__kop en
   onderaan .auto-voet (Terug naar standaard links, teller rechts). Mobiel: lijst boven, detail eronder. */
/* Actief-signatuur (docs/ui/componenten/actief-signatuur.md, besluit Kjelt 15-10-2026): het gekozen item heeft de oranje tint
   en een oranje stuk óp een dunne neutrale lijn — zijbalk = verticale lijn (.nav-subs, .nav-link.active::before), lijstmenu =
   .auto-nav__rij.is-actief, tabbladen = horizontale lijn hieronder. Tab: tintvak los boven de lijn (6 px), streepje 3 px op de lijn
   met 6 px marge, alleen bovenhoeken rond. */
.sig-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.sig-tabs__tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px;
    color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.sig-tabs__tab:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.sig-tabs__tab.is-actief { background: var(--brand-tint); color: var(--text); }
.sig-tabs__tab.is-actief::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -8px; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); }
.sig-tabs__n { font-size: 11px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.auto-tabs { margin: 0 0 16px; }
.auto-werk { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; max-width: 1240px; }   /* standaard: hoofdkolom links, zijkolom rechts */
.auto-werk[hidden] { display: none; }
.auto-nav { display: flex; flex-direction: column; padding: 8px; position: sticky; top: calc(var(--suitebar-height) + 12px); }
.auto-nav__groep { padding: 10px 10px 4px; font: 600 11px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.auto-nav__groep:not(:first-child) { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 14px; }
.auto-nav__rij { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.auto-nav__rij:hover { background: var(--surface-3); text-decoration: none; }
/* Gekozen = zoals het actieve item in de zijbalk (.nav-link.active): tint + los merkstreepje links, geen eenzijdige rand. */
.auto-nav__rij.is-actief { background: var(--brand-tint); }
.auto-nav__rij.is-actief::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.auto-nav__rij.is-actief .auto-nav__naam { color: var(--text); font-weight: 600; }
.auto-nav__naam { font-size: 13px; font-weight: 500; }
.auto-nav__sub { font-size: 12px; color: var(--text-3); }
.auto-detail { min-width: 0; }
.auto-blok { display: flex; flex-direction: column; gap: 8px; }
.auto-blok + .auto-blok { padding-top: 16px; border-top: 1px solid var(--border); }
.auto-blok__kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auto-blok__kop h3 { margin: 0; font-size: 14px; font-weight: 600; }
.auto-blok__kop .spacer, .auto-voet .spacer { flex: 1; }
.auto-voet { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.auto-voet .auto-teller { margin: 0; }
.auto-voet + .uploadvak { margin-top: 12px; }
@media (max-width: 900px) {
    .auto-werk { grid-template-columns: minmax(0, 1fr); }
    .auto-nav { position: static; }
    .auto-zij { order: -1; }   /* mobiel: lijst boven, detail eronder */
}

/* Pagina met twee kolommen in de breedte van het productscherm (ontwerp 9-10-2026: 820 + 360, gecentreerd,
   max. 1200 px), voor instellings- en detailpagina's zonder actiebalk: kop en .cols in .pagina-breed. */
.pagina-breed { max-width: 1200px; margin: 0 auto; }
.pagina-breed > .phead, .pagina-breed > form > .phead { max-width: none; }
.pagina-breed .cols { grid-template-columns: minmax(0, 820px) 360px; justify-content: center; gap: 20px; }
.pagina-breed .cols:not(:has(> aside)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { .pagina-breed .cols { grid-template-columns: minmax(0, 1fr); } }

/* ── Collecties (views/collections/, 11-10-2026): lijst = platte tabel (.collplat, verderop), detail =
   paginapatroon detailpagina. Alleen eigen: de cel-invoer in de volgordetabel (ranking-profielpagina). */
.table .cel-invoer { width: 72px; height: 28px; min-height: 28px; padding: 0 8px; font-size: 12.5px; }
#volgordetabel .cmp-meter { width: 64px; }
#volgordetabel th.factor { width: 130px; }
#volgordetabel th.act { width: 230px; }
#volgordetabel th.product { width: 280px; }
.collectie-afbeelding { display: block; max-width: 100%; max-height: 160px; border-radius: 6px; }
.coll-tabel td.act form { display: inline; }
.table .cel-invoer--breed { width: 160px; }

/* Collecties › Menu's (views/collections/menus.php, app.js blok "Menu-editor"): de menuboom met per
   regel greep, klapknop, naam + subregel, niveau en acties; het toevoegpaneel rechts. */
.menuboom { list-style: none; margin: 0; padding: 0; }
.menuboom .menuboom { padding-left: 28px; }
.menu-rij { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; cursor: pointer; min-height: 40px; }
.menu-rij:hover { background: var(--surface-2); }
.menu-rij.is-gekozen { background: var(--brand-tint); outline: 1px solid var(--brand); outline-offset: -1px; }
.menu-rij .klap-knop { margin-right: 0; }
.menu-rij .klap-ruimte { width: 18px; flex: none; }
.menu-rij__tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.menu-rij__naam { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menuboom--wortel > .menuboom__item > .menu-rij .menu-rij__naam { font-weight: 600; }
.menu-rij__sub { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-rij__sub .badge { margin-right: 4px; }
.menu-rij__niveau { font-size: 11px; color: var(--text-3); flex: none; }
.menu-rij__acties { display: inline-flex; gap: 2px; flex: none; opacity: 0; }
.menu-rij:hover .menu-rij__acties, .menu-rij:focus-within .menu-rij__acties, .menu-rij.is-gekozen .menu-rij__acties { opacity: 1; }
.menu-rij__knop { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer; }
.menu-rij__knop:hover, .menu-rij__knop:focus-visible { background: var(--surface-3); color: var(--text); }
.menu-rij__bewerk { display: flex; gap: 8px; padding: 4px 8px; }
.menu-rij__bewerk input { flex: 1; min-width: 0; }
.menuboom .is-slepen > .menu-rij { background: var(--brand-tint); outline: 1px dashed var(--brand); outline-offset: -1px; }
.menu-doel { margin: 0 0 10px; font-size: 12.5px; }
.menu-doel b { color: var(--text); font-weight: 600; }
.menu-bron { list-style: none; margin: 10px 0 0; padding: 0; max-height: 520px; overflow-y: auto; }
.menu-bron li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.menu-bron li .titelcel__tekst { flex: 1; min-width: 0; }
.menu-bron li.is-in-menu .titelcel__naam { color: var(--text-3); }
@media (hover: none) { .menu-rij__acties { opacity: 1; } }

/* Collecties › Volgorde, weergave Kaarten: productkaarten zoals de shop ze toont, met positie, vastgezet,
   prijs, voorraad en de rankingfactoren (score + meter per factor). */
.pkaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.pkaart { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); color: var(--text); text-decoration: none; }
.pkaart:hover { border-color: var(--border-strong, var(--text-3)); }
.pkaart.is-buiten { border-style: dashed; }
.pkaart__foto { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #fff; color: var(--text-3); }
.pkaart__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pkaart__foto > svg.i { width: 32px; height: 32px; }
.pkaart.is-buiten .pkaart__foto { background: var(--surface-2); }
.pkaart__pos { position: absolute; top: 8px; left: 8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--surface); color: var(--text); font: 600 12px/24px var(--font-ui); text-align: center; box-shadow: 0 0 0 1px var(--border); }
.pkaart__body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; min-width: 0; }
.pkaart__titel { font-weight: 500; font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pkaart__prijs { font-weight: 600; font-size: 13.5px; }
.pkaart__prijs s { font-weight: 400; margin-left: 4px; }
.pkaart__sub { font-size: 12px; color: var(--text-3); }
.pkaart__let { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--warn); }
.pkaart__score { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3); }
.pkaart__score b { color: var(--text); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pkaart__factoren { display: grid; grid-template-columns: minmax(0, 1fr) 72px 56px; gap: 7px 12px; align-items: center; margin-top: 4px; font-size: 12px; }
.pkaart__factor { display: contents; }
.pkaart__flabel { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pkaart__factor .cmp-meter { width: 72px; margin: 0; }
.pkaart__fwaarde { text-align: right; white-space: nowrap; color: var(--text-2, var(--text)); font-variant-numeric: tabular-nums; }

/* Collecties — overzicht (views/collections/index.php): bovenaan .werkbank met kop (pad + "Nieuwe collectie in …") en a.signaal (CollectieSignalen; klik = filter
   ?signaal=). Daaronder de tabel (.collplat). */
.werkbank { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.werkbank__kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.werkbank__titel { flex: 1 1 260px; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.werkbank__titel h2 { margin: 0; font-size: 16px; font-weight: 600; }
.werkbank__signalen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.signaal { --toon: var(--text-3); --toon-bg: var(--surface-3); position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); text-decoration: none; transition: border-color .12s, background .12s; }
.signaal--ok { --toon: var(--ok); --toon-bg: var(--ok-bg, var(--surface-3)); }
.signaal--crit { --toon: var(--crit); --toon-bg: var(--crit-bg, var(--surface-3)); }
.signaal--warn { --toon: var(--warn); --toon-bg: var(--warn-bg, var(--surface-3)); }
.signaal--info { --toon: var(--info); --toon-bg: var(--info-bg, var(--surface-3)); }
a.signaal:hover { border-color: var(--toon); }
.signaal.is-on { border-color: var(--toon); background: var(--toon-bg); }
.signaal__kop { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signaal__ico { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--toon-bg); color: var(--toon); }
.signaal__x { margin-left: auto; display: inline-flex; color: var(--muted); }
.signaal__n { font-size: 24px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.signaal__sub { font-size: 12px; color: var(--text-3); }
.signaal__balk { display: block; height: 4px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.signaal__balk i { display: block; height: 100%; border-radius: inherit; background: var(--toon); }
.signaal--nul { opacity: .6; }
.signaal--nul .signaal__ico { background: var(--surface-3); color: var(--text-3); }
@media (max-width: 1300px) { .werkbank__signalen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .werkbank__signalen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.coll-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* Collecties › tab Inhoud (views/collections/show.php, ontwerp B): links .stack met de regels als
   regels (blok "Collectie › Regels" hieronder), rechts #preview
   met .pkaarten--shop (drie productkaarten naast elkaar zoals de webshop; .shopkaart = kaart +
   kruisje rechtsboven). Onder 1100 px onder elkaar, op mobiel twee kaarten naast elkaar. */
.pkaarten--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.shopkaart { position: relative; display: flex; min-width: 0; }
.shopkaart > .pkaart { flex: 1; min-width: 0; }
.preview-voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 16px; }
.preview-voet .pagination { flex: 1; margin: 0; }
.preview-per { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.preview-per select { width: 76px; }
@media (max-width: 640px) { .pkaarten--shop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
/* Collectiepagina in de detailopzet (.pv2.coll-pagina): kaarten zijn smaller, dus kortere meters. */
.coll-pagina .pkaart__factoren { grid-template-columns: minmax(0, 1fr) 44px auto; gap: 7px 8px; }
.coll-pagina .pkaart__factor .cmp-meter { width: 44px; }
/* Collecties-overzicht, weergave Tabel (opzet): platte tabel zoals Producten. */
.collplat th:first-child { width: 340px; }
.collplat th[data-col="pad"] { width: 240px; }
.collplat th:is([data-col="prod"], [data-col="regels"]) { width: 100px; }
.collplat th[data-col="aandacht"] { width: 230px; }
.collplat th:is([data-col="menu"], [data-col="volgorde"], [data-col="shopify"], [data-col="bijgewerkt"]) { width: 130px; }
.collplat th[data-col="sjabloon"] { width: 190px; }
/* Collectie › Sortering, kaarten: slepen naar een plek (.sorteerkaart, .is-slepen, .is-doel) en het
   pinknopje .kaartpin (rechtsboven; .is-vast = vastgezet, altijd zichtbaar en oranje). */
.sorteerkaart { cursor: grab; }
.sorteerkaart.is-slepen { opacity: .45; }
.sorteerkaart.is-doel > .pkaart { outline: 2px dashed var(--brand); outline-offset: 3px; }
.sorteerkaart.is-vast > .pkaart { border-color: var(--brand); }
.pkaarten.is-bezig { opacity: .6; pointer-events: none; }
.kaartpin { position: absolute; top: 8px; right: 8px; z-index: 2; height: 24px; min-width: 24px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 999px; background: rgba(20, 16, 12, .72); color: #ffffff; font: 600 11.5px/1 var(--font-ui); cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; }
.kaartpin svg.i { width: 13px; height: 13px; }
.sorteerkaart:hover .kaartpin, .kaartpin:focus-visible, .kaartpin.is-vast { opacity: 1; }
.kaartpin:hover { background: rgba(20, 16, 12, .9); }
.kaartpin.is-vast { padding: 0 8px 0 7px; }
.kaartpin.is-vast svg.i { color: var(--brand); }
@media (hover: none) { .kaartpin { opacity: 1; } }
/* Keuzelijst in een filterbalk (select.filters__select → .kies.kies--enkel.kies--filter, app.js dfhKeuzeEnkel;
   besluit Kjelt 12-10-2026): zelfde lijst als op detailpagina's, knop zo hoog als de andere filters. */
.kies--filter { position: relative; flex: none; max-width: 100%; }
.kies--filter .kies__knop { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.kies--filter .kies__knop:focus-visible, .kies--filter.kies--open .kies__knop { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); outline: none; }
.kies--filter .kies__lijst { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 100%; width: max-content; max-width: 360px; max-height: 300px; overflow: auto; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 28px rgba(0, 0, 0, .16); display: flex; flex-direction: column; animation: vrij-in .16s ease-out; }
.kies--filter .kies__lijst[hidden] { display: none; }
.kies--filter .kies__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap; }
.kies--filter .kies__item:hover, .kies--filter .kies__item--actief { background: var(--surface-3); }
.kies--filter .kies__item--gekozen { font-weight: 600; }
.kies--filter .kies__item--gekozen svg.i { color: var(--brand-dark); flex: none; }
.kies--filter .kies__zoek { height: 32px; min-height: 32px; margin: 0 0 4px; padding: 0 10px 0 30px; background-position: 9px center; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; flex: none; }
.card:has(.kies--filter.kies--open) { overflow: visible; }
/* Fotomaat Groot in een tabel (.seg[data-fotomaat], app.js): grotere miniatuur in de titelcel. */
.table.foto-groot .thumb { width: 72px; height: 72px; border-radius: 8px; }
.table.foto-groot .thumb svg.i { width: 22px; height: 22px; }
.seg > button { border: 0; background: none; font-family: inherit; cursor: pointer; line-height: 18px; min-height: 0; }   /* even hoog als .seg > a (28 px, gemeten) */
.seg > button.is-on { background: var(--surface); }
/* Collectie › Regels (show.php), opbouw zoals Shopify met onze kleuren: .rgroep = kaart per groep (alle
   condities), .rconditie = vak per conditie met .rconditie__rij (pillen .rpil voor veld en voorwaarde, prullenbak
   .rprul) en .rconditie__waarden (chips .rchip); .regelgroep__of tussen groepen; .rgroep--uit = uitsluiten;
   .rlink "+ Uitsluiten", .rnieuw = gestippeld vak voor een nieuwe groep; .rform = het formulier op de plek waar
   je klikte (.rform-plek), met de live teller .regel-telling; .regel-waarde-keuze houdt de (meer)keuze. */
.regelgroep__of { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 12px; font-weight: 600; }
.regelgroep__of::before, .regelgroep__of::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.regel-waarde-keuze { min-width: 0; }
/* Venster "Teksten schrijven met AI" (collectie › Pagina & SEO): status onder de keuzetegels. Bezig =
   blauwe badge met draaiende spark (zoals de AI-badge bij Concepten), fout = rode tekst. */
.ai-status { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.ai-status--fout { color: var(--crit); }
.ai-status__bezig svg.i { animation: ab-draai 1.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ai-status__bezig svg.i { animation: none; } }

.rgroep { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.rgroep__kop { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.rgroep__bron { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--text); }
.rgroep__bron svg.i { color: var(--text-3); }
.rgroep--uit { border-style: dashed; }
.rgroep--uit .rgroep__bron, .rgroep--uit .rgroep__bron svg.i { color: var(--crit); }
.rconditie { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.rconditie.is-bewerk { border-color: var(--brand); }
.rconditie__rij { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 10px; min-width: 0; }
.rconditie__rij form { display: contents; }
.rconditie__waarden { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); }
.rpil { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 62%; height: 26px; padding: 0 9px 0 10px; border: 0; border-radius: 999px; background: var(--surface-3); color: var(--text); font: 500 12.5px/1 var(--font-ui); white-space: nowrap; cursor: pointer; }
.rpil:hover { background: var(--border); }
.rpil svg.i { flex: none; color: var(--text-3); }
.rpil__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rpil--knop { align-self: flex-start; color: var(--text); }
.rgroep__voet { display: flex; }
.rchip { display: inline-flex; align-items: center; max-width: 100%; height: 26px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rprul { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer; }
.rprul:hover { color: var(--crit); background: var(--crit-bg); }
.rlink { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border: 0; background: none; color: var(--muted); font: 500 13px var(--font-ui); cursor: pointer; }
.rlink:hover { color: var(--text); }
.rnieuw { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 40px; border: 1.5px dashed var(--border-strong); border-radius: 12px; background: none; color: var(--muted); font: 500 13px var(--font-ui); cursor: pointer; }
.rnieuw:hover { border-color: var(--brand); color: var(--text); }
.rform { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--brand); border-radius: 10px; background: var(--surface); }
.rconditie .rform { margin: 0 7px 7px; }
.rform__kop { font-size: 12px; font-weight: 600; color: var(--muted); }
.rform__form { display: flex; flex-direction: column; gap: 8px; }
.rform__rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.rform__rij .kies { min-width: 0; }
.rform input:is([type=text], [type=number]) { width: 100%; height: 32px; min-height: 32px; font-size: 13px; }
.rform__voet { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.regel-telling { font-size: 12px; }
.rform-plek:empty { display: none; }

.rgroep__modus { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rgroep__modus .kies--filter .kies__knop { height: 26px; padding: 0 8px; }
.rgroep__voet { gap: 6px; }
.rgroep__kop { align-items: center; }
/* Collectie-preview: werkbalk (.preview-balk: weergave, status, kolommen, sorteren), actief filter als chip
   (Status-knop "n van 4"), kolommen 3–6 (.pkaarten--k3 … --k6), statusbadge op de kaart (.pkaart__status), lijst. */
.preview-balk { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
@media (max-width: 900px) { .preview-balk { flex-wrap: wrap; } }
.preview-balk { min-height: 32px; }
.preview-balk .spacer { flex: 1; }
.preview-balk > .preview-status > summary.btn { height: 32px; min-height: 32px; padding: 0 12px; font-size: 12.5px; }
.preview-balk__weergave { height: 32px; padding: 2px; align-items: stretch; }
.preview-balk__weergave > :is(a, button) { padding: 0 10px; }
.preview-balk__weergave > :is(a, button) svg.i { width: 16px; height: 16px; }
.preview-status { position: relative; }
.preview-status > .auto-popup__paneel { left: 0; right: auto; width: 260px; min-width: 0; padding: 10px; }
.preview-balk select[name=kol] { width: 130px; }
.preview-balk select[name=sort] { width: 220px; }
.rgroep__modus select { width: 70px; }
.pkaarten--shop.pkaarten--k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pkaarten--shop.pkaarten--k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pkaarten--shop.pkaarten--k6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.pkaarten--k5 .pkaart__titel, .pkaarten--k6 .pkaart__titel { font-size: 12px; }
.pkaart__status { position: absolute; right: 8px; bottom: 8px; }
.preview-lijst .thumb { width: 40px; height: 40px; }
@media (max-width: 640px) { .pkaarten--shop:is(.pkaarten--k4, .pkaarten--k5, .pkaarten--k6) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.preview-status .auto-opt { align-items: center; }
.preview-status .auto-opt__tekst { display: flex; justify-content: space-between; gap: 12px; }

/* Sortering, lijst: dezelfde slepen/pinnen als de kaarten (tr.sorteerkaart in tbody[data-kaart-sorteer]). */
tr.sorteerkaart { cursor: grab; }
tr.sorteerkaart.is-doel > td { box-shadow: inset 0 2px 0 var(--brand); }
tr.sorteerkaart.is-vast > td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.sorteer-greep { display: inline-flex; margin-right: 6px; color: var(--text-3); opacity: 0; vertical-align: -1px; }
tr.sorteerkaart:hover .sorteer-greep { opacity: 1; }
.kaartpin--rij { position: static; opacity: 1; margin-right: 6px; vertical-align: middle; background: var(--surface-3); color: var(--text-3); }
.kaartpin--rij:hover { background: var(--border); color: var(--text); }
.kaartpin--rij.is-vast { background: rgba(20, 16, 12, .72); color: #ffffff; }
#volgordetabel td.act { white-space: nowrap; }
/* Eén collectiepagina (12-10-2026): blok Sortering rechts (.rsort met keuzerondjes, .rsort__pin = vastzetten),
   kop "Pagina & SEO" boven de teksten (.coll-sectie); pinnetje naast het uitsluitkruisje op een kaart. */
.rsort { display: flex; flex-direction: column; gap: 2px; }
.rsort__optie { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.rsort__optie:hover { background: var(--surface-2); }
.rsort__optie input { margin: 0; accent-color: var(--brand); }
.rsort__optie span:first-of-type { flex: 1; }
.rsort__pin { display: grid; grid-template-columns: minmax(0, 1fr) 64px auto; gap: 6px; align-items: center; }
.coll-sectie { margin: 28px 0 12px; font-size: 18px; font-weight: 600; scroll-margin-top: 96px; }
#pagina-seo { scroll-margin-top: 96px; }
.preview-balk__label { font-size: 12.5px; }
.preview-balk select[name=sortering] { width: 220px; }

/* Knop Scores in de werkbalk van de preview: .zonder-scores op #preview verbergt score en factoren. */
.preview-balk > .preview-scores { height: 32px; min-height: 32px; padding: 0 12px; font-size: 12.5px; }
.preview-scores.is-aan { background: var(--surface-3); border-color: var(--border-strong); }
#preview.zonder-scores :is(.pkaart__score, .pkaart__factoren) { display: none; }
#preview.zonder-scores .preview-lijst td[title="Score"] { display: none; }
/* Nieuwe collectie (views/collections/create.php): titel als groot invulveld zoals in Shopify, de eerste conditie
   als vast formulier (.rform--vast) in de groep. */
.coll-nieuw-kop { margin-bottom: 4px; }
.coll-pagina input.coll-titel-invoer { width: 100%; height: auto; min-height: 0; padding: 6px 0; border: 0; border-bottom: 1px dashed var(--border-strong); border-radius: 0; background: none; color: var(--text); font: 600 24px/1.25 var(--font-ui); }
.coll-pagina input.coll-titel-invoer:focus { outline: none; border-bottom-color: var(--brand); box-shadow: none; }
.rform--vast { border-color: var(--border); background: var(--surface-2); }

/* Hoek rechtsboven op een previewkaart (.shopkaart__hoek): kruisje (uitsluiten/verwijderen, alleen bij hover) en
   pinnetje (altijd in de hoek; vastgezet = pilletje "Vast"). Zelfde vorm als het positienummer: donker en rond, 24 px. */
.shopkaart__hoek { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; align-items: center; gap: 6px; }
.shopkaart__hoek .kaartpin { position: static; }
.shopkaart__actie { display: none; }
.shopkaart:hover .shopkaart__actie, .shopkaart__actie:focus-within { display: block; }
.kaartknop { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: rgba(20, 16, 12, .72); color: #ffffff; cursor: pointer; }
.kaartknop:hover { background: var(--crit); }
.kaartknop svg.i { width: 12px; height: 12px; }
@media (hover: none) { .shopkaart__actie { display: block; } }

/* Ranking-profiel (views/ranking/profiel.php): verdeling van de score in procenten. .rverdeling = gestapelde
   balk (één deel per factor, breedte = aandeel); .rfactor = rij met naam, schuifje, procentveld, weghalen en
   eventueel instellingen eronder. Voorbeeld: .rvoorbeeld met kaarten of tabel; .rschuif = verschuiving t.o.v.
   het opgeslagen profiel (↑ groen, ↓ rood, Nieuw, =). */
.rprofiel { display: flex; flex-direction: column; gap: 4px; }
.rverdeling { display: flex; height: 30px; margin-bottom: 10px; border-radius: 8px; overflow: hidden; background: var(--surface-3); }
.rverdeling__deel { display: flex; align-items: center; min-width: 0; padding: 0 8px; overflow: hidden; color: #ffffff; font: 600 11.5px/1 var(--font-ui); white-space: nowrap; }
.rverdeling__deel > span { overflow: hidden; text-overflow: ellipsis; }
.rverdeling__deel + .rverdeling__deel { border-left: 2px solid var(--surface); }
.rverdeling__deel--0 { background: var(--reeks-1); }
.rverdeling__deel--1 { background: var(--reeks-2); }
.rverdeling__deel--2 { background: var(--reeks-3); }
.rverdeling__deel--3 { background: color-mix(in srgb, var(--reeks-1) 55%, #1a1714); }
.rverdeling__deel--4 { background: color-mix(in srgb, var(--reeks-2) 55%, #1a1714); }
.rverdeling__deel--5 { background: color-mix(in srgb, var(--reeks-3) 55%, #1a1714); }
.rfactor { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr) 76px 28px; align-items: center; gap: 6px 16px; padding: 10px 0; border-top: 1px solid var(--border); }
.rfactor:first-of-type { border-top: 0; }
.rfactor__naam { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.rfactor__label { font-weight: 500; cursor: help; }
.rfactor__schuif { width: 100%; accent-color: var(--brand); }
.rfactor__pct { display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); }
.rfactor__pct .cel-invoer { width: 56px; text-align: right; }
.rprofiel__erbij { padding-top: 10px; border-top: 1px solid var(--border); }
.rvoorbeeld { transition: opacity .15s; }
.rvoorbeeld.is-bezig { opacity: .55; }
.rschuif { display: inline-block; padding: 0 6px; border-radius: 999px; font: 600 11.5px/20px var(--font-ui); white-space: nowrap; background: var(--surface-3); color: var(--text-3); }
.rschuif--op { background: var(--ok-bg, var(--surface-3)); color: var(--ok); }
.rschuif--neer { background: var(--crit-bg, var(--surface-3)); color: var(--crit); }
.rschuif--nieuw { background: var(--info-bg, var(--surface-3)); color: var(--info); }
.rschuif--kaart { position: absolute; top: 9px; right: 8px; }
.pkaart__pos--vast { background: var(--brand); color: #1a1714; box-shadow: none; }
@media (max-width: 720px) {
    .rfactor { grid-template-columns: minmax(0, 1fr) 76px 28px; }
    .rfactor__naam { grid-column: 1 / -1; }
    .rvoorbeeld .pkaarten--k6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rvoorbeeld td .cmp-meter { display: inline-block; width: 64px; margin: 0 8px 0 0; vertical-align: middle; }
.rvoorbeeld td { white-space: nowrap; }
.rvoorbeeld td:nth-child(3) { white-space: normal; min-width: 220px; }
/* Ranking-profiel: indeling zoals de collectiepagina — links het voorbeeld, rechts (plakt mee) profiel en een
   compacte verdeling: naam + procent + kruisje op één regel, het schuifje eronder. */
.rp-cols { grid-template-columns: minmax(0, 820px) 360px; justify-content: center; align-items: start; }
@media (max-width: 1100px) { .rp-cols { grid-template-columns: minmax(0, 1fr); } }
.rp-cols .card__head .kies:has(> .rp-collectie), .rp-cols .card__head .rp-collectie { width: 260px; }
.rp-zij { position: sticky; top: calc(var(--suitebar-height) + var(--pv-boven, 0px) + 76px); }
:is(.rp-zij, .rsort__maker) .rverdeling { height: 10px; margin-bottom: 4px; border-radius: 999px; }
:is(.rp-zij, .rsort__maker) .rverdeling__deel { padding: 0; }
:is(.rp-zij, .rsort__maker) .rverdeling__deel > span { display: none; }
:is(.rp-zij, .rsort__maker) .rverdeling__deel + .rverdeling__deel { border-left-width: 1px; }
:is(.rp-zij, .rsort__maker) .rfactor { grid-template-columns: minmax(0, 1fr) auto 24px; gap: 2px 8px; padding: 8px 0 6px; }
:is(.rp-zij, .rsort__maker) .rfactor__naam { gap: 6px; font-size: 13px; }
:is(.rp-zij, .rsort__maker) .rfactor__naam .cel-invoer { height: 26px; font-size: 12px; }
:is(.rp-zij, .rsort__maker) .rfactor__schuif { grid-column: 1 / -1; grid-row: 2; height: 16px; margin: 0; }
:is(.rp-zij, .rsort__maker) .rfactor__pct .cel-invoer { width: 46px; height: 26px; padding: 0 6px; font-size: 12.5px; }
:is(.rp-zij, .rsort__maker) .rprofiel__erbij { padding-top: 8px; }
@media (max-width: 1100px) { .rp-zij { position: static; } }
.rp-cols .pkaart__factoren { grid-template-columns: minmax(0, 1fr) 44px auto; gap: 7px 8px; }
.rp-cols .pkaart__factor .cmp-meter { width: 44px; }
:is(.rp-zij, .rsort__maker) .field { gap: 4px; }
:is(.rp-zij, .rsort__maker) .field > span { font-size: 12px; }
:is(.rp-zij, .rsort__maker) .card__body.stack { gap: 10px; }
/* Ranking-profielen (views/ranking/index.php): mini-verdeling per profiel en de collecties waarop het actief is. */
.rverdeling--mini { height: 8px; margin: 0 0 6px; border-radius: 999px; }
.rverdeling--mini .rverdeling__deel { padding: 0; }
.rverdeling--mini .rverdeling__deel + .rverdeling__deel { border-left-width: 1px; }
.rp-actief { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.rp-actief > b { font-variant-numeric: tabular-nums; margin-right: 2px; }
.rp-chip { display: inline-block; max-width: 160px; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2, var(--text)); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.rp-chip:hover { background: var(--border); color: var(--text); }
.rp-profielen td { vertical-align: middle; }
/* Statusknop in de werkbalk van de preview: alleen het icoon (tooltip = gekozen statussen); .is-aan = afwijkend van
   de standaard (Actief en Uitlopend), met een oranje stip. */
.preview-balk > .preview-status > summary.btn--icoon { width: 32px; padding: 0; justify-content: center; position: relative; }
.preview-balk > .preview-status > summary.btn--icoon.is-aan::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }

/* Instellingen van een factor als korte zin met een klein invulvak (.rfactor__mini) of een keuze (.rfactor__keuze). */
.rfactor__zin { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
:is(.rp-zij, .rsort__maker) input.rfactor__mini { width: 46px; min-height: 0; height: 22px; padding: 0 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); font: 500 12px/1 var(--font-ui); text-align: center; -moz-appearance: textfield; }
.rfactor__mini::-webkit-inner-spin-button, .rfactor__mini::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
:is(.rp-zij, .rsort__maker) input.rfactor__mini:focus { outline: none; border-color: var(--brand); }
.rfactor__keuze { display: inline-flex; padding: 2px; border-radius: 6px; background: var(--surface-3); }
.rfactor__keuze label { display: inline-flex; cursor: pointer; }
.rfactor__keuze input { position: absolute; opacity: 0; pointer-events: none; }
.rfactor__keuze span { padding: 2px 8px; border-radius: 4px; font: 500 12px/16px var(--font-ui); color: var(--text-3); }
.rfactor__keuze input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.rfactor__keuze input:focus-visible + span { outline: 2px solid var(--brand); }

/* Instellingen van een factor: label naast de naam (.rfactor__chip) dat een klein venster opent met het veld en uitleg;
   kruisje zonder kader, alleen bij hover/focus van de rij. */
.rfactor__instelling { position: relative; }
.rfactor__chip { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 6px 0 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2, var(--text)); font: 500 11.5px/1 var(--font-ui); cursor: pointer; list-style: none; white-space: nowrap; }
.rfactor__chip::-webkit-details-marker { display: none; }
.rfactor__chip:hover, .rfactor__instelling[open] > .rfactor__chip { background: var(--border); color: var(--text); }
.rfactor__chip svg.i { width: 12px; height: 12px; opacity: .7; }
.rfactor__paneel { min-width: 240px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.rfactor__paneel .rfactor__zin { color: var(--text); font-size: 12.5px; flex-wrap: wrap; white-space: normal; }
.rfactor__hulp { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-3); white-space: normal; }

/* Kop van het ranking-profiel: naam en omschrijving direct bewerkbaar (horen bij #profiel-form via form=…). */
.rp-kop { display: flex; flex-direction: column; gap: 2px; }
.rp-kop__titel { display: flex; align-items: center; gap: 10px; }
.rp-pagina input.coll-titel-invoer { flex: 1; min-width: 0; width: auto; height: auto; min-height: 0; padding: 4px 0; border: 0; border-bottom: 1px dashed transparent; border-radius: 0; background: none; color: var(--text); font: 600 24px/1.25 var(--font-ui); }
.rp-pagina input.coll-titel-invoer:hover { border-bottom-color: var(--border-strong); }
.rp-pagina input.coll-titel-invoer:focus { outline: none; border-bottom-color: var(--brand); box-shadow: none; }
.rp-pagina input.rp-kop__omschrijving { width: 100%; height: auto; min-height: 0; padding: 2px 0; border: 0; border-bottom: 1px dashed transparent; border-radius: 0; background: none; color: var(--text-3); font: 400 13px/1.4 var(--font-ui); }
.rp-pagina input.rp-kop__omschrijving:hover { border-bottom-color: var(--border-strong); }
.rp-pagina input.rp-kop__omschrijving:focus { outline: none; border-bottom-color: var(--brand); box-shadow: none; color: var(--text); }
.rp-pagina input.coll-titel-invoer { flex: 0 1 auto; field-sizing: content; min-width: 120px; max-width: 100%; }
.rfactor__paneel { width: 280px; min-width: 0; }

/* Rij van een factor: label, procentveld en kruisje allemaal 28 px hoog (zoals de kleine knoppen in de app). */
:is(.rp-zij, .rsort__maker) .rfactor { grid-template-columns: minmax(0, 1fr) auto 28px; }
:is(.rp-zij, .rsort__maker) .rfactor__pct .cel-invoer { width: 52px; height: 28px; min-height: 28px; padding: 0 8px; font-size: 13px; }
:is(.rp-zij, .rsort__maker) .rfactor [data-rp-weg] { width: 28px; height: 28px; }
:is(.rp-zij, .rsort__maker) .rfactor [data-rp-weg]:hover { color: var(--crit); }
:is(.rp-zij, .rsort__maker) .rfactor__chip { height: 28px; padding: 0 8px 0 10px; gap: 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: 12px; }
:is(.rp-zij, .rsort__maker) .rfactor__chip:hover, :is(.rp-zij, .rsort__maker) .rfactor__instelling[open] > .rfactor__chip { background: var(--surface-3); }
.rp-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-3); }
.rp-legenda > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: help; }
.rp-legenda b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-legenda i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.rp-profielen .rverdeling--mini { max-width: 360px; }
.rp-profielen td[data-col=collecties], .rp-profielen td[data-col=verdeling] { white-space: normal; }

/* Eigen profiel op de collectiepagina (kaart Sortering): schuifjes-icoon naast Profielen, de maker onder de keuzes. */
.rsort__eigen { display: inline-flex; margin-left: 8px; }
.rsort__eigen .icon-btn { width: 28px; height: 28px; }
.rsort__maker { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.rsort__makeracties { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.pkaarten.is-voorbeeld { outline: 2px dashed var(--brand); outline-offset: 6px; border-radius: 6px; }

/* Regels: één vorm voor alle bedieningselementen (besluit Kjelt 12-10-2026) — 28 px hoog, radius 6 px, rand
   --border, achtergrond --surface, 12.5px/500; kaders (groep, conditie) radius 10 px. Zelfde maat als de kleine
   knoppen in de app en de schuifjes van het rankingprofiel. */
.rgroep { border-radius: 10px; }
.rconditie { border-radius: 8px; }
.rpil, .rchip, .rpil--knop, .rlink, .rgroep__modus .kies--filter .kies__knop {
    height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
    color: var(--text); font: 500 12.5px/1 var(--font-ui); }
.rpil { gap: 6px; padding-right: 8px; }
.rpil:hover, .rpil--knop:hover, .rlink:hover { background: var(--surface-3); border-color: var(--border-strong); }
.rlink { align-self: flex-start; gap: 6px; }
.rprul { width: 28px; height: 28px; }
.rnieuw { height: 36px; border-radius: 10px; }
.rgroep__modus .kies--filter .kies__knop { padding: 0 8px 0 10px; }
.rgroep__modus .kies--filter { height: 28px; }

/* Sortering: lijn tussen de eigen (PIM) sorteringen en die van Shopify. */
.rsort__makeracties .spacer { flex: 1; }

/* Handmatig › zoekresultaten (#lid-resultaten.lidres): lijst binnen de kaart, titel op twee regels, rechts de
   icoonknoppen Toevoegen / Uitsluiten (28 px, zoals de andere bediening op de collectiepagina). */
.lidres { display: flex; flex-direction: column; margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.lidres__rij { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 12px; min-width: 0; }
.lidres__rij + .lidres__rij { border-top: 1px solid var(--border); }
.lidres__rij:hover { background: var(--surface-2); }
.lidres__tekst { flex: 1; min-width: 0; }
.lidres__naam { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lidres__sub { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lidres .icon-btn { flex: none; width: 28px; height: 28px; }
.lidres__erbij:hover { color: var(--ok); }
.lidres__uit:hover { color: var(--crit); }
.lidres__leeg { margin: 0; padding: 10px 12px; }
.rlink { width: fit-content; }
.coll-filters .search { width: 240px; }
/* Fotolabels op de pagina van het afbeeldingenveld (views/fields/vast.php, Services\FotoLabels). */
.fotolabels td:first-child { white-space: nowrap; }
.fotolabels input[type="text"] { width: calc(100% - 56px); min-width: 120px; }
.fotolabels th.num { width: 84px; white-space: normal; }
/* Fotolabels-voorbeeld "Zo ziet de klant het" naast de labeltabel (views/fields/vast.php, app.js Fotolabels-voorbeeld). */
.fotolabels-indeling { display: grid; grid-template-columns: minmax(300px, 460px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .fotolabels-indeling { grid-template-columns: minmax(0, 1fr); } }
.fotovoorbeeld { position: sticky; top: 72px; border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface); }
.fotovoorbeeld__kop { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.fotovoorbeeld__kop h3 { margin: 0; font-size: 14px; }
.fotovoorbeeld__kop .spacer { flex: 1; }
.fotovoorbeeld__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.fotovoorbeeld__tegel { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: #fff; }
.fotovoorbeeld__tegel:first-child { grid-column: span 2; grid-row: span 2; }
.fotovoorbeeld__tegel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fotovoorbeeld__tegel.is-uit { opacity: .35; }
.fotovoorbeeld__pos { position: absolute; left: 4px; top: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 10.5px; line-height: 18px; text-align: center; }
.fotovoorbeeld__label { position: absolute; left: 4px; bottom: 4px; max-width: calc(100% - 8px); padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fotovoorbeeld__raster.is-lijst { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.fotovoorbeeld__raster.is-lijst .fotovoorbeeld__tegel { display: grid; grid-template-columns: 26px 48px minmax(0, 1fr); align-items: center; gap: 8px; aspect-ratio: auto; grid-column: auto; grid-row: auto; padding: 4px; background: var(--surface); }
.fotovoorbeeld__raster.is-lijst .fotovoorbeeld__tegel img { width: 48px; height: 48px; border-radius: 6px; background: #fff; grid-column: 2; grid-row: 1; }
.fotovoorbeeld__raster.is-lijst .fotovoorbeeld__pos { position: static; grid-column: 1; grid-row: 1; background: var(--surface-3); color: var(--text-2, var(--text)); }
.fotovoorbeeld__raster.is-lijst .fotovoorbeeld__label { position: static; grid-column: 3; grid-row: 1; background: none; color: var(--text); font-size: 12.5px; padding: 0; }
/* Balk "Voorbeeldproduct" boven tabel en voorbeeld: hier kies je welk product het voorbeeld toont. */
.fotolabels__balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; padding: 6px 8px 6px 12px; border-radius: 10px; background: var(--surface-3); }
.fotolabels__balk-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.fotolabels__balk select, .fotolabels__balk .zoekbaar { flex: 0 1 420px; min-width: 240px; margin: 0; }
/* In de fotolabelkaart staan de knoppen gewoon onder de tabel (geen vaste/donkere actiebalk). */
.fotolabels-indeling .form { max-width: none; margin: 0; }
.fotolabels-indeling .form-actions { position: static; background: none; border: 0; box-shadow: none; padding: 12px 0 0; margin: 0; }
/* Mobiel: tabjes scrollen horizontaal, invoer 16 px (geen inzoomen op iOS). */
@media (max-width: 720px) {
    #fotolabels nav.tabs { flex-wrap: nowrap; overflow-x: auto; }
    #fotolabels input[type="text"], #fotolabels select { font-size: 16px; }
    .fotolabels input[type="text"] { min-width: 0; }
    .fotolabels__balk select, .fotolabels__balk .zoekbaar { min-width: 0; flex: 1 1 auto; }
}
/* Aanzichtenregel (stippen + knop "Aanzichten bepalen") mag mobiel afbreken: met 17 labels past hij niet op één regel. */
@media (max-width: 720px) { .pv-aanzichten__kop { flex-wrap: wrap; } }
/* Alt-tekst bovenaan het fotomenu (alleen lezen). */
.fotomenu__alt { display: flex; flex-direction: column; gap: 2px; max-width: 280px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 12px; line-height: 1.35; color: var(--text); }
.fotomenu__alt-kop { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }

/* Collectie-overzicht: vinkje vóór de titelcel en in de kop; keuzes in de Selectiebalk (sortering, sjabloon). */
.coll-kiescel { display: flex; align-items: center; gap: 10px; min-width: 0; }
#collplat thead th:first-child .vink-vak { margin-right: 10px; vertical-align: middle; }
/* Kopvinkje van het collectie-overzicht op één lijn met "Collectie" en de rijvinkjes. */
#collplat thead th:first-child { white-space: nowrap; }
#collplat thead th:first-child .vink-vak { display: inline-flex; vertical-align: middle; margin: 0 0 0 20px; }
#collplat thead th:first-child .vink-vak + button,
#collplat thead th:first-child .vink-vak + a { display: inline-flex; width: auto; vertical-align: middle; }

/* Hoverfoto op een previewkaart (collectie, ranking-profiel): de tweede foto zoals de webshop hem bij hover toont. */
.pkaart__foto img.pkaart__hover { opacity: 0; transition: opacity .2s ease; }
.pkaart:hover .pkaart__foto img.pkaart__hover { opacity: 1; }

/* Blok Mix van een rankingprofiel (views/ranking/_mix.php): korte zinnen met klein invulvak of Aan/Uit. */
.rmix { display: flex; flex-direction: column; }
.rmix .rfactor__zin { color: var(--text); font-size: 12.5px; white-space: normal; }
.rmix input.rfactor__mini { width: 46px; height: 24px; min-height: 0; padding: 0 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); font: 500 12px/1 var(--font-ui); text-align: center; }

/* Tonen: welke soorten producten een collectie toont (kaart Regels, en Selectiebalk › Tonen wijzigen). */
.rsoorten { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rsoorten__label { margin-right: 4px; font-size: 12.5px; color: var(--text-3); }
.rsoorten__optie { display: inline-flex; cursor: pointer; }
.rsoorten__optie input { position: absolute; opacity: 0; pointer-events: none; }
.rsoorten__optie span { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-3); font: 500 12.5px/1 var(--font-ui); }
.rsoorten__optie input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.rsoorten__optie input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
.tekst-crit { color: var(--crit); }

/* Tonen, duidelijker (13-10-2026): kop + drie vakken met een echt vinkje, de naam en het aantal; uit = gedimd. */
.rsoorten { flex-direction: column; align-items: stretch; gap: 6px; }
.rsoorten__label { margin: 0; font-size: 12px; color: var(--text-3); }
.rsoorten__opties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rsoorten .rsoorten__optie { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; }
.rsoorten .rsoorten__optie input.vink { position: static; opacity: 1; pointer-events: auto; }
.rsoorten .rsoorten__optie span { flex: 1; min-width: 0; height: auto; padding: 0; border: 0; background: none; color: var(--text); font: 500 12.5px/1 var(--font-ui); }
.rsoorten .rsoorten__optie b { font: 600 12px/1 var(--font-ui); color: var(--text-3); font-variant-numeric: tabular-nums; }
.rsoorten .rsoorten__optie:has(input:not(:checked)) span { color: var(--text-3); text-decoration: line-through; }
.rsoorten .rsoorten__optie:has(input:checked) { border-color: var(--border-strong); }
.rsoorten .rsoorten__optie:hover { background: var(--surface-2); }
.rsoorten .rsoorten__opties { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.rsoorten .rsoorten__optie { height: 36px; border: 0; border-radius: 0; background: var(--surface); }
.rsoorten .rsoorten__optie + .rsoorten__optie { border-top: 1px solid var(--border); }
.rsoorten .rsoorten__optie:has(input:checked) { border-color: var(--border); }
.rsoorten .rsoorten__optie input:checked + span { height: auto; padding: 0; border: 0; background: none; color: var(--text); }

/* Sortering: keuzes in twee groepen met een kopje; eigen profiel als eigen kaart (geen kader-in-kader). */
.rsort__groep { padding: 2px 8px 4px; font: 600 11px/1.4 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.rsort__groep span { margin-left: 6px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.rsort__groep--lijn { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
:is(#eigen-profiel, #eigen-mix) .rsort__maker { gap: 8px; padding: 16px 20px; border: 0; border-radius: 0; background: none; }
.rsort__makeracties { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); }

/* Inklapbare kaart (docs/ui/componenten/inklapkaart.md). */
section.card[data-inklap] > .card__head { align-items: center; }
.inklap__titel { cursor: pointer; user-select: none; }
.inklap__knop { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; margin-left: 6px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-3); cursor: pointer; }
.inklap__knop:hover { color: var(--text); background: var(--surface-3); }
.inklap__knop svg.i { transition: transform .15s ease; }
section.card.is-ingeklapt > .inklap__knop svg.i, section.card.is-ingeklapt > .card__head .inklap__knop svg.i { transform: rotate(-90deg); }
section.card.is-ingeklapt > :not(.card__head) { display: none; }
section.card.is-ingeklapt > .card__head { border-bottom: 0; }
.inklap__knop { margin-left: auto; } section.card[data-inklap] > .card__head .spacer + .link-btn, section.card[data-inklap] > .card__head .rsort__eigen { margin-left: 0; } section.card[data-inklap] > .card__head .spacer ~ .inklap__knop { margin-left: 6px; }

/* Mix › Merk of leverancier pushen: per regel merk, punten, periode, stand en kruisje. */
.rmix__regel--push { flex-direction: column; align-items: stretch; }
.rmix__pushes { display: flex; flex-direction: column; gap: 6px; }
.rmix__push { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.rmix__push select { flex: 1 1 100%; height: 28px; }
.rmix__push .icon-btn { width: 28px; height: 28px; margin-left: auto; }
.rmix__pushes > .btn { align-self: flex-start; }

.rmix__push { display: grid; grid-template-columns: minmax(0, 1fr) 28px; }
.rmix__push > select, .rmix__push > .kies { grid-column: 1; grid-row: 1; }
.rmix__push > .icon-btn { grid-column: 2; grid-row: 1; margin: 0; }
.rmix__push > .rfactor__zin, .rmix__push > .badge { grid-column: 1 / -1; justify-self: start; }

/* Mix-labels op een previewkaart: wat de Mix-regels deden (groen = naar voren/gepusht, rood = lager/onderaan). */
.pkaart__mix { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.pkaart__mixlabel { padding: 2px 7px; border-radius: 999px; background: var(--ok-bg, var(--surface-3)); color: var(--ok); font: 500 11px/1.4 var(--font-ui); }
.pkaart__mixlabel.is-neer { background: var(--crit-bg, var(--surface-3)); color: var(--crit); }
#preview.zonder-mix .pkaart__mix { display: none; }
section.card.is-ingeklapt { overflow: hidden; } section.card.is-ingeklapt > .card__head { border-radius: inherit; }

/* Blok Mix, opgeruimd (13-10-2026): kopjes Spreiding / Voorrang / Merk pushen, per regel naam links en instelling
   rechts in één kolom (28 px hoog). */
.rmix { gap: 0; }
.rmix__kop { margin: 14px 0 4px; font: 600 11px/1.4 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.rmix__kop:first-child { margin-top: 0; }
.rmix__rij { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; border-bottom: 1px solid var(--border); }
.rmix__rij:last-of-type { border-bottom: 0; }
.rmix__naam { font-size: 13px; color: var(--text); }
.rmix__ctl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.rmix .rmix__ctl input.rfactor__mini { height: 28px; width: 44px; }
.rmix__regel--push { padding: 0; border: 0; }

.rmix__ctl--getal { display: grid; grid-template-columns: auto 44px 52px; align-items: center; gap: 6px; }
.rmix__ctl--getal > span:first-child { text-align: right; }
/* Mix: alle invulvakjes even breed (56 px) en de Aan/Uit-knoppen beginnen op dezelfde lijn (vakje + eenheid). */
.rmix__ctl--getal { grid-template-columns: auto 56px 52px; }
.rmix .rmix__ctl input.rfactor__mini { width: 56px; }

/* Samenvatting van de Mix boven de kaarten (knop Mix): per regel hoeveel kaarten hij in deze collectie raakte. */
.preview-mixsamenvatting { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: 8px; }
.preview-mixsamenvatting__kop { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; font: 600 12px/1 var(--font-ui); color: var(--text-2, var(--text)); }
#preview.zonder-mix .preview-mixsamenvatting { display: none; }

/* Mix als factorregels op de kaart: Mix-punten (balkje) en Plek door Mix (plek op score → plek na de Mix). */
.pkaart__mixfactoren { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.pkaart__mixpijl { font: 600 12px/1 var(--font-ui); color: var(--text-3); }
.pkaart__mixpijl.is-op { color: var(--ok); }
.pkaart__mixpijl.is-neer { color: var(--crit); }
#preview.zonder-mix .pkaart__mixfactoren { display: none; }
.pkaart__opbouw { margin-left: auto; margin-right: 6px; font-size: 11.5px; color: var(--ok); font-variant-numeric: tabular-nums; }
#preview.zonder-mix .pkaart__opbouw { display: none; }

/* Mix-samenvatting compact (één regel, geen kader); alleen zichtbaar met de knop Mix aan (standaard uit). */
.preview-mixsamenvatting { gap: 4px 6px; padding: 0; border: 0; }
.preview-mixsamenvatting__kop { margin-right: 2px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.preview-mixsamenvatting .pkaart__mixlabel { padding: 1px 6px; font-size: 10.5px; }
.preview-mixsamenvatting { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }

/* mobiel: ranking-profiel (views/ranking/profiel.php) — de keuzelijst Collectie op volle breedte onder de titel. */
@media (max-width: 720px) {
    .rp-cols #preview > .card__head { flex-wrap: wrap; row-gap: 8px; }
    .rp-cols #preview > .card__head .spacer { display: none; }
    .rp-cols #preview > .card__head :is(.kies:has(> .rp-collectie), .rp-collectie) { flex-basis: 100%; width: 100%; }
}

/* Uitleg-icoon als gevuld bolletje met "i" (docs/ui/componenten/uitleg-tooltip.md; proef Kjelt 15-10-2026). Geldt voor elk
   .src met het icoon i-info. Terugdraaien = dit blok weghalen (dan weer het lijn-icoon i-info). */
.src:has(> svg.i > use[href="#i-info"]) > svg.i { display: none; }
.src:has(> svg.i > use[href="#i-info"])::before { content: "i"; display: inline-grid; place-items: center; box-sizing: border-box; width: 17px; height: 17px;
    border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--muted);
    font: 600 11px/1 Georgia, "Times New Roman", serif; font-style: normal; transition: border-color .15s, color .15s; }
.src:has(> svg.i > use[href="#i-info"]):is(:hover, :focus-visible)::before { border-color: var(--brand); color: var(--text); }
.src:has(> svg.i > use[href="#i-info"]):focus-visible { outline: none; }

/* Tekstlijst (docs/ui/componenten/tekstlijst.md, besluit Kjelt 15-10-2026): USP's en andere tekst-lijstvelden. Elke waarde is
   één omlijnde rij over de volle veldbreedte: sleepgreep, nummer in een rondje, tekstveld zonder eigen rand, prullenbak bij
   hover/focus (touch: altijd). Focus = focusring op de hele rij. Onderaan een even brede stippelrij "+ … toevoegen" (neutraal).
   Selectors gaan bewust boven de compacte opmaak van .multi-field in .pv-form en .pv2 uit. */
.pv-form .multi-field.multi-field--lijst, .pv2 .pv-hoofd .pv-rij .multi-field.multi-field--lijst { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
/* Telling en ⓘ direct achter het label, de AI-knop rechts. */
.field > span:has(> [data-lijst-tel]) > :is([data-lijst-tel], .src) { order: 1; }
.field > span:has(> [data-lijst-tel]) > .ai-knop { order: 2; }
.multi-field__tel { margin-left: 6px; font-weight: 400; font-variant-numeric: tabular-nums; }
.pv-form .multi-field--lijst .multi-field__row, .pv2 .pv-hoofd .pv-rij .multi-field--lijst .multi-field__row { display: flex; align-items: center; gap: 8px; margin: 0; height: 40px; padding: 0 6px 0 4px;
    border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); transition: border-color .2s ease, box-shadow .2s ease; }
.pv-form .multi-field--lijst .multi-field__row:focus-within, .pv2 .pv-hoofd .pv-rij .multi-field--lijst .multi-field__row:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.pv-form .pv-rij--gat .multi-field--lijst .multi-field__row { border-color: var(--warn); background: var(--warn-bg); }
.pv-form .pv-rij--mist .multi-field--lijst .multi-field__row { border-color: var(--crit); background: var(--crit-bg); }
.pv-form .multi-field--lijst .multi-field__row > input, .pv2 .pv-hoofd .pv-rij .multi-field--lijst .multi-field__row > input,
.pv-form .pv-rij--gat .multi-field--lijst .multi-field__row > input, .pv-form .pv-rij--mist .multi-field--lijst .multi-field__row > input { flex: 1; min-width: 0; width: auto; height: 38px; min-height: 38px; margin: 0; padding: 0 4px;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.pv-form .multi-field--lijst .multi-field__row > input:focus, .pv2 .pv-hoofd .pv-rij .multi-field--lijst .multi-field__row > input:focus { border: 0; box-shadow: none; outline: none; }
.multi-field--lijst .multi-field__greep { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 100%; color: var(--text-3); cursor: grab; }
.multi-field--lijst .multi-field__greep:active { cursor: grabbing; }
.multi-field--lijst .multi-field__nr { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--border-strong); border-radius: 50%;
    background: var(--surface-2, var(--surface)); font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--muted); }
.multi-field--lijst .multi-field__row.is-slepen { opacity: .5; }
.pv-form .multi-field--lijst .multi-field__remove, .pv2 .pv-hoofd .pv-rij .multi-field--lijst .multi-field__remove { flex: none; margin: 0; opacity: 0; transition: opacity .15s; color: var(--muted); }
.multi-field--lijst .multi-field__row:is(:hover, :focus-within) .multi-field__remove { opacity: 1; }
.multi-field--lijst .multi-field__remove:hover { color: var(--crit); }
.multi-field--lijst .multi-field__row:only-of-type .multi-field__remove { display: none; }
.pv-form .multi-field--lijst .multi-field__add.multi-field__add--regel, .pv2 .pv-hoofd .pv-rij .multi-field--lijst .multi-field__add.multi-field__add--regel,
.pv2:has(> #productform) .pv-hoofd .pv-rij .multi-field--lijst .multi-field__add.multi-field__add--regel { position: static; inset: auto; grid-column: auto; grid-row: auto; opacity: 1;
    display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: 100%; height: 40px; margin: 0; padding: 0 12px;
    font-size: 13px; font-weight: 400; border: 1px dashed var(--border-strong); border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.pv-form .multi-field--lijst .multi-field__add--regel::before, .pv-form .multi-field--lijst .multi-field__add--regel::after { content: none; }
.pv-form .multi-field--lijst .multi-field__add.multi-field__add--regel:hover, .pv2 .pv-hoofd .pv-rij .multi-field--lijst .multi-field__add.multi-field__add--regel:hover { border-style: solid; border-color: var(--border-strong); color: var(--text); background: transparent; }
.multi-field--lijst .multi-field__add--regel[hidden] { display: none !important; }
@media (hover: none) { .pv-form .multi-field--lijst .multi-field__remove, .pv2 .pv-hoofd .pv-rij .multi-field--lijst .multi-field__remove { opacity: 1; } }   /* touch: prullenbak altijd zichtbaar */
/* Tekstlijst: de kop heeft geen "+"-knop rechts (die staat onderaan als regel), dus de AI-knop lijnt uit met de rijen. */
.pv2 .pv-hoofd .pv-rij > .field:has(> .multi-field--lijst) > span:first-child { padding-right: 0; }

/* Keuzelijst, vorm "pil" (docs/ui/componenten/keuzelijst.md; statuskeuze per variant in de tabel Varianten, select.vg-status):
   de knop is de statuspil met stip in de kleur van de status, de opties hebben hun eigen stip. De lijst staat vast op het
   scherm (app.js zet top/left), zodat de scrollende tabel hem niet afknipt. Kiezen = direct opslaan (onchange van de select). */
.pv2 .kies.kies--pil { display: inline-flex; width: auto; max-width: 100%; vertical-align: middle; }
.pv2 .kies--pil .kies__knop { display: inline-flex; align-items: center; gap: 6px; width: auto; max-width: 100%; height: 24px; min-height: 24px; padding: 0 7px 0 9px;
    border: 0; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1; background: var(--new-bg); color: var(--new); box-shadow: none; cursor: pointer; }
.pv2 .kies--pil .kies__knop::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pv2 .kies--pil .kies__waarde { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv2 .kies--pil .kies__pijl { width: 12px; height: 12px; margin: 0; color: currentColor; opacity: .8; }
.pv2 .kies--pil.kies--st-active .kies__knop { background: var(--ok-bg); color: var(--ok); }
.pv2 .kies--pil.kies--st-uitlopend .kies__knop { background: var(--warn-bg); color: var(--warn); }
.pv2 .kies--pil.kies--st-archived .kies__knop { background: transparent; color: var(--text-3); box-shadow: inset 0 0 0 1px var(--border); }
.pv2 .kies--pil .kies__knop:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.pv2 .kies--pil .kies__lijst { position: fixed; top: 0; left: 0; right: auto; z-index: 70; width: max-content; min-width: 168px; }
/* Keuzelijst in een venster (.kies--vast, app.js dfhKiesVastPlaats; keuzelijst.md "In een venster"): de lijst staat vast op het
   scherm boven het venster, zodat de scrollende vensterinhoud hem niet afknipt. Breedte = het veld (inline gezet). */
:is(.pv2, .pub) .kies.kies--vast > .kies__lijst { position: fixed; top: 0; left: 0; right: auto; z-index: 1200; max-width: calc(100vw - 16px); }
.kies__item .kies__stip { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--new); }
.kies__item .kies__stip--active { background: var(--ok); }
.kies__item .kies__stip--uitlopend { background: var(--warn); }
.kies__item .kies__stip--archived { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-3); }
.pv2 .kies--pil .kies__item { gap: 8px; justify-content: flex-start; }
.pv2 .kies--pil .kies__item > svg.i { margin-left: auto; }
/* Open pil-lijst in een plakkende cel: die cel boven de cellen van de rijen eronder (anders vallen de opties erachter). */
.pv2 .pv-vartabel td:has(> .kies--open), .pv2.gp-pagina #sec-var .gp-vartabel .pv-vartabel td.pv-vartabel__status:has(> .kies--open) { z-index: 6; }

/* Zijkolomveld (Field::ZIJKOLOM_VELDEN: Tags, besluit Kjelt 15-10-2026): klein en rustig onderaan het blok Organisatie op
   productscherm en groepspagina; zelfde invoer als in een kaart. Nooit een gat-kleur (Vulgraad::NEUTRAAL). */
.pv2 .pv-zijveld { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); }
.pv2 .pv-zijveld .pv-rij { margin: 0; padding: 0; border: 0; background: none; }
.pv2 .pv-zijveld .field > span:first-child { font-size: 12px; color: var(--muted); }
.pv2 .pv-zijveld .multi-field--chips { min-height: 32px; padding: 3px 6px; gap: 4px; font-size: 12px; }
.pv2 .pv-zijveld .kies__chip { font-size: 12px; padding: 1px 4px 1px 8px; }
.pv2 .pv-zijveld .multi-field__chipsinvoer { font-size: 12px; min-width: 80px; }
.pv2 .pv-zijveld .field, .pv2 .pv-zij .pv-zijveld .pv-rij > .field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
.pv2 .pv-zijveld .field > :is(.multi-field, .pv-vak) { width: 100%; max-width: none; }
.pv2 .pv-zijveld .multi-field__chipsinvoer { font-size: 13px; }
.pv2 .pv-zijveld .multi-field__chipsinvoer::placeholder { color: var(--muted); opacity: 1; }

/* Aanzichten uitgeklapt (views/partials/aanzichten.php, besluit Kjelt 15-10-2026): tabel volgens de tabelstandaard, rijen = wat,
   kolommen = soort; aanwezig = .badge--ok "✓ n", ontbrekend = \App\leeg() "—", combinatie die niet bestaat = lege cel. */
details.pv-aanzichten[open] > .pv-aanzichten__tabel { margin-top: 10px; }
.pv-aanzichten__tabel .table th.pv-aanzichten__soort, .pv-aanzichten__tabel .table td.pv-aanzichten__cel { text-align: center; width: 18%; }
.pv-aanzichten__tabel .table td { padding-top: 6px; padding-bottom: 6px; white-space: nowrap; }
@media (max-width: 720px) {   /* telefoon: alles in beeld, geen zijwaarts scrollen */
    .pv-aanzichten__tabel .table { font-size: 13px; }
    .pv-aanzichten__tabel .table :is(th, td) { padding-left: 4px; padding-right: 4px; }
    .pv-aanzichten__tabel .table td:first-child { white-space: normal; }
    .pv-aanzichten__tabel .table th.pv-aanzichten__soort, .pv-aanzichten__tabel .table td.pv-aanzichten__cel { width: auto; }
    .pv-aanzichten__tabel .badge { padding-left: 6px; padding-right: 6px; }
}

/* Aanzichten, weergave B "Per soort" (standaard; A = de tabel hierboven, besluit Kjelt 15-10-2026): kolom per soort met alleen de
   aanzichten die bij die soort bestaan. Schakelaar in de kop = .seg.seg--klein (data-aanzicht-schakel, app.js blok "Aanzichten"). */
details.pv-aanzichten[open] > .pv-aanzichten__soorten { margin-top: 12px; }
.pv-aanzichten__soorten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pv-aanzichten__soort-kol { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.pv-aanzichten__soort-kop { font-size: 13px; padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--border); align-self: stretch; }
.pv-aanzichten__mist { font-size: 12px; color: var(--muted); padding: 2px 0; }
@media (max-width: 720px) { .pv-aanzichten__soorten { grid-template-columns: 1fr; } }
details.pv-aanzichten [data-aanzicht-weergave][hidden] { display: none; }
.pv-aanzichten > summary .pv-aanzichten__schakel { margin-left: auto; flex: none; }
.pv-aanzichten > summary .pv-aanzichten__schakel + .btn { margin-left: 0; }

/* Verkoopprijs (kaart Prijzen & Marges › Verkoop, Services\Verkoopprijs): vier kwartvelden op één lijn — labels op één regel
   (afgekapt, volle naam in de tooltip), icoon handmatig/fx achter het label, negatieve korting als alert-icoon in de labelregel. */
.pv2 .pv-hoofd .pv-rij.pv-vp > .field > span:first-child { display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: visible; -webkit-line-clamp: unset; line-clamp: none; min-width: 0; }
.pv2 .pv-vp .pv-vp__naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pv2 .pv-vp .field > span:first-child > :not(.pv-vp__naam) { flex: none; }
.pv2 .pv-vp .pv-vak > svg.i { margin-left: auto; color: var(--text-3); flex: none; }
.pv2 .pv-vp .src.pv-vp__neg { color: var(--warn); }   /* negatieve korting: waarschuwing in de labelregel, uitleg in de tooltip */
.pv2 .pv-vp .src.pv-vp__neg[hidden] { display: none; }
.pv2 .pv-ik { display: contents; }   /* Inkoop-blok: draagt alleen data-attributen, de rijen staan gewoon in het raster */
.pv2 .pv-vp-bron { display: contents; }   /* Verkoop-blok zonder leveranciersfeed: advies/actie als gewone invoerrij in het raster */
/* Eén vak Inkoopkorting (besluit Kjelt 15-10-2026, ontwerp v3): labelregel = "Inkoopkorting ⓘ" links, de leverancierskorting als
   link rechts (doorgestreept bij een eigen afspraak; te krap = zonder naam, app.js); in het vak getal (grijs = de geldende korting),
   oranje actie-icoon als de korting niet op een actie-inkoop geldt, × bij een eigen afspraak, %. */
.pv2 .pv-hoofd .pv-rij.pv-vp > .field > span.pv-ik__kop, .pv2 .pv-hoofd .pv-rij > .field > span.erf__kop { width: 100%; overflow: hidden; }
.pv2 .pv-vp .field > span.pv-ik__kop > .pv-ik__lev, .pv2 .field > span.erf__kop > .erf__bron { flex: 0 1 auto; }   /* wint van .pv-vp …> :not(.pv-vp__naam) { flex: none } */
.pv2 .pv-ik__kop > .pv-vp__naam, .pv2 .pv-ik__kop > .src, .pv2 .erf__kop > .erf__naam, .pv2 .erf__kop > .src { flex: none; }   /* het label blijft heel; de leveranciersnaam valt weg */
.pv2 .pv-ik__kop > .pv-ik__lev, .pv2 .erf__kop > .erf__bron { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; font-weight: 600; color: var(--info); text-decoration: none; }
.pv2 .pv-ik__kop > a.pv-ik__lev:hover, .pv2 .erf__kop > a.erf__bron:hover { text-decoration: underline; }
.pv2 .pv-ik__kop > span.pv-ik__lev, .pv2 .erf__kop > span.erf__bron { color: var(--muted); }
.pv2 .pv-ik__kop > .pv-ik__lev.is-afwijkend, .pv2 .erf__kop > .erf__bron.is-overschreven { color: var(--text-3); text-decoration: line-through; }
.pv2 .pv-form .pv-ik__korting > input { flex: 1 1 3em; min-width: 3em; }
.pv2 .pv-form .pv-ik__korting > input::placeholder { color: var(--text-3); opacity: 1; }   /* de geldende korting */
.pv2 .pv-ik__korting > .pv-ik__actie { flex: none; align-self: center; margin-right: 4px; color: var(--warn); }   /* geen korting op de actie-inkoop (semantisch, leesbaar) */
.pv2 .pv-ik__korting > .pv-ik__actie.is-ok { color: var(--ok); }   /* de leverancier geeft ook korting op een actie-inkoop */
.pv2 .pv-ik__korting > .pv-ik__actie[hidden] { display: none; }
.pv2 .pv-ik__korting > .pv-ik__wis, .pv2 .erf__wis { flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 4px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.pv2 .pv-ik__korting > .pv-ik__wis:hover, .pv2 .erf__wis:hover { background: var(--surface-3); color: var(--text); }
.pv2 .pv-form .pv-ik__korting.is-afwijkend, .pv2 .pv-form .erf--eigen.input-unit { border-color: var(--brand); }   /* eigen afspraak (geerfde-waarde.md) */
#sec-com .pv-velden { align-items: start; }   /* Commercieel: een erfregel onder een veld laat de labels van de buren niet zakken */
.vast__formule { margin: 0; white-space: pre-wrap; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }   /* formule van een vast berekend veld (alleen lezen) */
.pv2 .pv-form .pv-ik__korting.is-telt-niet > input { color: var(--text-3); text-decoration: line-through; }   /* eigen afspraak die niet telt op een actie-inkoop (optie B) */
/* Korting zonder basis (geen advies- of actieprijs): grijs en niet te bewerken, zoals een berekend vak. */
.pv2 .pv-vp .input-unit:has(input:disabled) { background: var(--surface-2); border-style: dashed; }
.pv2 .pv-vp input:disabled { background: transparent; color: var(--muted); cursor: not-allowed; }

/* Prijsgeschiedenis (views/products/_prijsgeschiedenis.php): klokje in de kaartkop, tabel met plakkende datumkolom; een gewijzigde
   cel met pijl (prijzen neutraal, marge lager = warn, hoger = ok), ongewijzigd gedempt; de bron staat in de kolom Door. */
.pv2 .pv-pub__open.pv-kopknop { margin: -4px 0 -4px 8px; }   /* kaartkop-icoonknop van Kanalen, naast "Verplicht n/m" */
.pl-tabel .table { min-width: 0; }
.pl-tabel :is(th, td) { padding-left: 6px; padding-right: 6px; }
.pub__kop h2.pl-titel { display: flex; align-items: center; gap: 6px; min-width: 0; }   /* alleen de titel kapt af, de ⓘ blijft zichtbaar */
.pl-titel__tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 768px) { .pl-tabel .table { min-width: 980px; } }   /* smal scherm: de tabel houdt zijn breedte en scrolt zijwaarts (vanaf ±1400 px past hij) */
.pl-tabel .pl-plak { position: sticky; left: 0; z-index: 1; background: var(--surface); white-space: nowrap; }
/* Rij van een prijsmelding (?prijslog=<spoor-id>): zachte merktint die na een paar seconden wegvalt. */
.pl-tabel tbody tr td { transition: background-color 1.2s ease; }
.pl-tabel tbody tr.pl-rij--melding td, .pl-tabel tbody tr.pl-rij--melding td.pl-plak { background: var(--brand-tint); transition: none; }
.pl-tabel th.pl-plak { background: var(--surface-2); z-index: 2; }   /* kopcel = de kleur van de kopregel (zoals .table--plak) */
.pl-tabel td.num { white-space: nowrap; }
.pl-bron { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%;
    background: var(--surface-3); color: var(--muted); font-size: 10px; font-weight: 600; vertical-align: middle; }
.pl-cel { font-weight: 600; }
.pl-cel--prijs { color: var(--text); }
.pl-cel--hoger { color: var(--ok); }
.pl-cel--lager { color: var(--warn); }
/* Invoer (de oorzaak, feedback Kjelt 15-10-2026): de hele cel licht getint met een smal streepje links, geen pil en geen icoon
   (wie het deed staat in de kolom Door); rijen even hoog als een gewone tabelrij. Feed = info, persoon/scherm = merk. */
.pl-tabel td.pl-cel--invoer { font-weight: 600; color: var(--text); }
.pl-tabel td.pl-cel--feed { background: color-mix(in srgb, var(--info) 12%, transparent); box-shadow: inset 3px 0 0 var(--info); }
.pl-tabel td.pl-cel--hand { background: color-mix(in srgb, var(--brand) 12%, transparent); box-shadow: inset 3px 0 0 var(--brand); }
.pl-bron--feed { background: color-mix(in srgb, var(--info) 22%, transparent); color: var(--info); }
.pl-bron--hand { background: color-mix(in srgb, var(--brand) 30%, transparent); color: var(--text); }
.pl-fx { margin-left: 4px; color: var(--text-3); }
/* Kolom Door: wie of wat de wijziging deed (persoon, feed, Lokaal of Systeem). */
.pl-tabel .table--compact th { white-space: normal; }   /* kopjes mogen over twee regels (10 kolommen in het venster) */
.pl-tabel td.pl-door { white-space: nowrap; font-size: 13px; }
.pl-tabel td.pl-door .pl-bron { width: 18px; height: 18px; margin-right: 6px; font-size: 9px; }   /* compacte rij (table--compact, ±33 px) */
.pl-tabel td.pl-door .pl-bron .i { width: 11px; height: 11px; }
.pl-door__wie, .pl-door__link { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; max-width: 150px; }
.pl-door__link:hover .pl-door__naam { text-decoration: underline; }
.pl-door__naam { overflow: hidden; text-overflow: ellipsis; }
.pl-fx .i { vertical-align: -1px; }

/* Colli (migratie 194, blok Logistiek, ontwerp 41/07): een onvolledige colliregel rustig gemarkeerd (wens Kjelt 19-10-2026): alleen
   het teken van een leeg verplicht veld (rood rondje "!") achter "Colli 2", de vakken in hun gewone rand; en de regel Samen.
   "Alleen per volle colli" = geërfde waarde (blok "Geërfde waarde bij een ja/nee"). */
.pv2 .pv-pakkettabel tr.pv-pakket--mist > td:first-child::after { content: "!" / ""; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 6px; border-radius: 50%; background: var(--crit); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1; vertical-align: 1px; }
html[data-theme="dark"] .pv2 .pv-pakkettabel tr.pv-pakket--mist > td:first-child::after { color: var(--bg); }
.pv2 .pv-kaart .pv-pakkettabel tfoot td { height: 40px; padding: 6px 10px; border-bottom: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv2 .pv-kaart .pv-pakkettabel tfoot td:first-child { font-weight: 600; color: var(--text); }
.pv2 .pv-pakkettabel td.pv-colli-getal { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv2 .pv-pakketten__kop .pv-pakketten__bewerk { margin-left: auto; font-size: 12.5px; font-weight: 500; }
.pv2 .pv-pakkettabel .pv-colli-sig__icoon { flex: none; align-self: center; color: var(--warn); margin: 0 2px; }
/* Signaal in een invulvak: het ⚠ links ín het vak (het getal staat rechts), zodat het vak even breed blijft als de andere. */
.pv2 .pv-pakkettabel .pv-colli-sig .pv-celvak:not(:has(> input[readonly])) { position: relative; }
.pv2 .pv-pakkettabel .pv-colli-sig .pv-celvak:not(:has(> input[readonly])) > .pv-colli-sig__icoon { position: absolute; left: 6px; top: 50%; margin: 0; transform: translateY(-50%); }
.pv2 .pv-pakkettabel .pv-colli-sig .pv-celvak:not(:has(> input[readonly])) > input { padding-left: 22px; }
/* Leeg en alleen lezen (feedwaarde, nieuwe regel): "—" zoals de tabelstandaard (\App\leeg()), zonder eenheid; geen ⚠ zonder waarde. */
.pv2 .pv-pakkettabel .pv-celvak.is-leeg:has(> input[readonly]) > .pv-celvak__eenheid { display: none; }
.pv2 .pv-pakkettabel .pv-celvak.is-leeg:has(> input[readonly])::after { content: "—"; color: var(--text-3); }
.pv2 .pv-pakkettabel .pv-celvak.is-leeg > .pv-colli-sig__icoon { display: none; }
/* Telefoon (kaartjes): het "!" naast "Colli 2", niet eronder. */
@media (max-width: 768px) {
    .pv2:has(> #productform) .pv-kaart .pv-pakkettabel tr.js-pv-pakket.pv-pakket--mist > td.js-pv-pakketnr { flex-direction: row; align-items: center; justify-content: flex-start; }
}
/* 41/10: de colli-tabel is een omlijnd tabelletje; de kolomkoprij is de kop ("Colli * 2" · koppen · Bewerken rechts), koppen op
   één regel met ⓘ/fx 4 px achter het woord; rij-hover in de accentkleur zoals in de andere tabellen; vakjes 80 px zodat alles past. */
.pv2 .pv-pakketten--colli > .table-scroll { margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; }
.pv2 .pv-kaart .pv-pakketten--colli .pv-pakkettabel { width: 100%; }
.pv2 .pv-kaart .pv-pakketten--colli .pv-pakkettabel thead th { padding: 12px 8px; white-space: nowrap; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.pv2 .pv-kaart .pv-pakketten--colli .pv-pakkettabel :is(th, td) { padding-left: 8px; padding-right: 8px; }
.pv2 .pv-kaart .pv-pakketten--colli .pv-pakkettabel tr > :first-child { padding-left: 14px; }
.pv2 .pv-kaart .pv-pakketten--colli .pv-pakkettabel tr > :last-child { padding-right: 14px; }
.pv2 .pv-kaart .pv-pakketten--colli .pv-pakkettabel tbody tr:last-child > td { border-bottom: 0; }
.pv2 .pv-kaart .pv-pakketten--colli .pv-pakkettabel tfoot td { border-top: 1px solid var(--border); }
.pv2 .pv-pakketten--colli .pv-pakkettabel thead th .src { margin-left: 4px; vertical-align: -1px; }
.pv2 .pv-pakketten--colli .pv-pakkettabel th.pv-pakkettabel__kop { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text); }
.pv2 .pv-pakketten--colli .pv-pakkettabel th.pv-pakkettabel__kop .muted { font-weight: 400; margin-left: 4px; }
.pv2 .pv-pakketten--colli .pv-pakkettabel thead th.td-acties { width: auto; text-align: right; text-transform: none; letter-spacing: 0; }
.pv2 .pv-pakketten--colli .pv-pakkettabel thead th.td-acties .pv-pakketten__bewerk { font-size: 12.5px; font-weight: 500; }
.pv2 .pv-pakketten--colli .pv-pakkettabel tbody tr:hover > td { background: var(--brand-tint-soft); }
.pv2 .pv-pakketten--colli .pv-celvak { width: 80px; }
.pv2:has(> #productform) .pv-pakketten--colli > .table-scroll { margin-left: 0; margin-right: 0; }
.pv2 .pv-pakketten__kop--smal { display: none; }   /* alleen op de telefoon (daar valt de tabelkop weg) */
.pv2 .pv-pakketten__kop--smal .req { margin-left: -4px; }
.pv2 .pv-pakketten__kop--smal .pv-pakketten__bewerk { margin-left: auto; }
.pv2 .pv-pakketten--colli thead th .src { color: var(--text-3); font-weight: 400; }   /* ⓘ/fx zoals bij de veldlabels (nacontrole A4) */
.pv2 .pv-hoofd .pv-pakketten--colli + .pv-velden { margin-top: 16px; padding-top: 0; border-top: 0; }   /* geen lijn binnen dezelfde subsectie (A3) */
@media (max-width: 768px) {
    .pv2:has(> #productform) .pv-pakketten__kop--smal { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px; }
    .pv2:has(> #productform) .pv-pakketten--colli .pv-pakkettabel tr.js-pv-pakket > td.pv-colli-getal { font-size: 16px; color: var(--text); }   /* waarden even groot als de maten (A2) */
    .pv2:has(> #productform) .pv-pakketten--colli .pv-celvak:has(> input[readonly]) > input { width: auto; }   /* eenheid direct achter het getal */
}   /* ook op mobiel binnen de kaart (wint van de rand-tot-rand-regel) */

/* ---- Vervoerders & tarieven (Admin › Vervoerders, migratie 196) --------------------------------------------------- */
/* Tabellen Pakkettypes en Toeslagen: vaste kolommen binnen de kaart; invoer = 100 % van de kolom (input-unit, keuzelijst,
   ja/nee). Onder 900 px scrolt de tabel zijwaarts; daarboven niet (anders knipt de scrollbak de uitklaplijst af). */
.vv-scroll { overflow: visible; position: relative; }   /* relative: verborgen invoer (ja/nee, sr-tekst) blijft binnen de scrollbak */
@media (max-width: 900px) { .vv-scroll { overflow-x: auto; } .vv-tabel { min-width: 1040px; } }
.vv-tabel { width: 100%; table-layout: fixed; }
.vv-tabel th { white-space: nowrap; }
.vv-tabel td { padding-top: 8px; padding-bottom: 8px; vertical-align: middle; }
.vv-tabel td > input, .vv-tabel td > select, .vv-tabel td > .input-unit, .vv-tabel td > .kies { width: 100%; }
.vv-tabel .input-unit { display: flex; }   /* in een tabelcel geen .field eromheen: het vak zelf flex, zoals in het raster */
.vv-tabel .input-unit > input { width: auto; min-width: 0; }
.vv-tabel .vv-k-soort { width: 17%; }
.vv-tabel .vv-k-getal { width: 13%; }
.vv-tabel .vv-k-jn { width: 13%; }
.vv-tabel .vv-k-geldig { width: 14%; }
.vv-tabel .vv-k-act { width: 96px; }   /* Naam (zonder breedte) vult de rest: geen gat vóór de rij-acties */
.vv-tabel td.act { display: table-cell; white-space: nowrap; text-align: right; }
.vv-tabel tr.vv-meer > td { background: var(--surface-2); padding: 12px 16px; }
.vv-tabel tr.vv-rij:has(+ tr.vv-meer:not([hidden])) > td { border-bottom-color: transparent; }
.vv-verlopen > td { opacity: .55; }
.vv-meer-knop .i { transition: transform .15s ease; }
.vv-meer-knop[aria-expanded="true"] .i { transform: rotate(180deg); }
.vv-meer-knop.is-gevuld { color: var(--brand-dark); border-color: var(--brand); }   /* er staan voorwaarden onder Meer */
.vv-tabel td.act > * + * { margin-left: 4px; }
.vv-weg { cursor: pointer; }
.vv-weg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.vv-weg:has(input:checked) { background: var(--crit); color: var(--on-ink); }
tr.vv-rij:has(.vv-weg input:checked) > td:not(.act) { opacity: .45; text-decoration: line-through; }
.vv-bij { padding-top: 12px; padding-bottom: 12px; }
.vv-pagina #vervoerder-form { display: contents; }   /* de kaarten van het formulier en het Testvak zijn broers in één .stack: overal 16 px */
@media (max-width: 720px) { .vv-pagina .pv-kop__meta { flex-direction: column; } .vv-pagina .pv-kop__meta > span + span::before { content: none; } }
.vv-test { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; max-width: 760px; }
@media (max-width: 720px) { .vv-test { grid-template-columns: minmax(0, 1fr); } }
/* Geërfde waarde bij een ja/nee (docs/ui/componenten/geerfde-waarde.md; eerst Alleen per volle colli ← magazijn): de geërfde kant
   grijs gemarkeerd (niet als gekozen), eigen keuze = gewone gekozen kant + oranje rand + × erachter (.erf__wis). */
.pv2 .erf-jn { display: flex; align-items: center; gap: 2px; width: 100%; box-sizing: border-box; border-radius: 8px; background: var(--surface-3); }
.pv2 .erf-jn > .pv-jn.pv-jn { flex: 1 1 auto; width: auto; background: transparent; }   /* de ja/nee vult de kolom, zoals het vak van Inkoopkorting */
.pv2 .erf-jn.erf--eigen { box-shadow: 0 0 0 1px var(--brand); }   /* eigen afspraak: de omlijning loopt om ja/nee én × heen */
.pv2 .erf-jn > .erf__wis { margin-right: 4px; }
/* Geërfde kant = vorm van gekozen, maar gestippeld en gewone letter (niet zelf gekozen, zoals een berekend vak); de andere kant --text-3. */
.pv2 .erf-jn:not(.erf--eigen) .pv-jn__k.pv-jn__k { color: var(--text-3); }
.pv2 .erf-jn[data-erf="1"]:not(.erf--eigen) .pv-jn__k:nth-of-type(1).pv-jn__k,
.pv2 .erf-jn[data-erf="0"]:not(.erf--eigen) .pv-jn__k:nth-of-type(2).pv-jn__k { background: var(--surface); color: var(--text-2); font-weight: 400; box-shadow: none; outline: 1px dashed var(--border-strong); outline-offset: -1px; }
.pv2 .erf-jn .erf__wis[hidden] { display: none; }

.pv2 .erf__kop > a.erf__bron, .pv2 .erf__kop > a.erf__bron:hover { text-decoration: none; }   /* zoals de link van Inkoopkorting */
.pv2 .erf__kop > a.erf__bron.is-overschreven { text-decoration: line-through; }
.pv2 .pv-ik__kop.erf__kop > .erf__naam { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* te krap: het label kapt af (volle naam in de tooltip), de bron blijft heel */
.pv2 .field > span.pv-ik__kop.erf__kop > .erf__bron { flex: none; overflow: visible; }   /* specifieker dan de pv-ik-regel (flex: 0 1 auto) */
.pv2 .erf-jn > .pv-jn > .pv-jn__k.pv-jn__k, .pv2 .erf-jn > .pv-jn > .pv-jn__k + .pv-jn__k.pv-jn__k { flex: 1 1 0; }   /* Ja · Nee vullen de baan tot de ×, in beide standen */
.pv-vak__kort { display: none; }   /* Verzending: " + 1 extra colli" breed, " + 1" op een telefoon (UI 19-10: het aantal mag niet wegvallen) */
@media (max-width: 720px) { .pv-vak__lang { display: none; } .pv-vak__kort { display: inline; } }
.pv2 .pv-pakketten--colli ~ .pv-velden .pv-rij--kwart .pv-jn:not(.pv-jn--lezen) { width: 100%; }   /* ja/nee in de colli-rijen even breed als Alleen per volle colli (UI 19-10) */
.pv2 .pv-pakketten--colli ~ .pv-velden .pv-rij--kwart .pv-jn:not(.pv-jn--lezen) > .pv-jn__k { flex: 1 1 0; }
/* Handmatig-stipje: staat normaal op 118 px (naast een ja/nee van 110 px). Bij een ja/nee over de hele breedte viel het over
   "Nee" en ving het de klik af (bug 5356, 19-10): hier blijft het achter het label. */
.pv2 .pv-pakketten--colli ~ .pv-velden .pv-rij--kwart > .field:has(> .pv-jn) > span:first-child .src--hand { position: static; display: inline-flex; margin-left: 4px; }
.pv2 .erf-jn > .erf__letop { flex: none; align-self: center; color: var(--warn); margin: 0 2px; }   /* eigen keuze minder streng dan het magazijn (matrix 41/16) */
.pv2 .erf-jn > .erf__letop[hidden] { display: none; }
/* Telefoon: ⚠ en × passen naast Ja · Nee doordat de baan en de knoppen mogen krimpen (de standaard min-width van 52 px laat los). */
.pv2 .erf-jn > .pv-jn.pv-jn { min-width: 0; }
.pv2 .erf-jn > .pv-jn > .pv-jn__k.pv-jn__k { min-width: 0; padding: 0 6px; }
.pv2 .erf-jn > :is(.erf__letop, .erf__wis) { flex: none; }

/* ===== Meldingen (migratie 189, bouwspec 30-design-meldingen) ===== */
/* --- Meldingen B: bel + paneel (suitebar, docs/ui/componenten/meldingenpaneel.md) --- */
/* Bel in de suitebar (elke app): icoonknop in de inktkleuren van de suitebar, teller .tel rechtsboven (rood: kritiek). */
.suitebar__bel { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0 6px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--on-ink-muted); cursor: pointer; }
.suitebar__bel:hover { color: var(--on-ink); background: rgba(255, 255, 255, .08); }
.suitebar__bel.is-open { color: var(--on-ink); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
.suitebar__bel:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.suitebar__bel .i { width: 18px; height: 18px; }
.suitebar__bel .tel { position: absolute; top: 1px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--crit); color: #ffffff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--ink); }
html[data-theme="dark"] .suitebar__bel { color: #857d73; }
html[data-theme="dark"] .suitebar__bel:hover, html[data-theme="dark"] .suitebar__bel.is-open { color: #efe9e1; }
html[data-theme="dark"] .suitebar__bel .tel { background: #e5675c; color: #110f0d; box-shadow: 0 0 0 2px #110f0d; }
/* Paneel onder de bel (.pv2.meldpaneel): 400 px, vast onder de bel (app.js zet --meldpaneel-top/-rechts), eigen scrollvak. */
.meldpaneel { position: fixed; z-index: 1150; top: var(--meldpaneel-top, calc(var(--suitebar-height) + 6px)); right: var(--meldpaneel-rechts, 12px); width: 400px; max-width: calc(100vw - 24px); max-height: calc(100dvh - var(--meldpaneel-top, 54px) - 12px); margin: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); overflow: hidden; }
.meldpaneel[hidden] { display: none; }
.meldpaneel--inline { position: static; width: 400px; max-width: 100%; max-height: none; }   /* stijlgids: in de pagina i.p.v. onder de bel */
.meldpaneel:focus { outline: none; }
.meldpaneel[aria-busy="true"] > [data-meldpaneel-fragment] { opacity: .6; transition: opacity .15s ease; }
.meldpaneel > [data-meldpaneel-fragment] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.meldpaneel .pub__kop { padding: 12px 12px 12px 16px; }
.meldpaneel .pub__kop h2 { flex: 1 1 auto; }
.meldpaneel__tabs { padding: 10px 12px 6px; }
.meldpaneel__acties { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.meldpaneel__inhoud { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.meldpaneel__inhoud--lijst { gap: 0; padding: 0; }
.meldpaneel__inhoud > .empty { margin: 0; }
.meldpaneel .pub__lijst { padding: 0 12px; }
.meldpaneel .pub__rij:first-child { border-top: 0; }
.meldpaneel__soort { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface-3); color: var(--muted); }
.meldpaneel__soort .i { width: 15px; height: 15px; }
.meldpaneel__label { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.meldpaneel .meldpaneel__voet { justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 12.5px; }
.meldpaneel__voet .muted { font-variant-numeric: tabular-nums; }
/* Meldingrij (paneel): soorticoon, titel + subregel, blauwe stip als hij ongelezen is. */
.melding { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.melding:last-child { border-bottom: 0; }
.melding:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.melding:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.melding__ikoon { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface-3); color: var(--muted); }
.melding__ikoon .i { width: 15px; height: 15px; }
.melding__ikoon--kritiek { background: var(--crit-bg); color: var(--crit); }
.melding__ikoon--taak { background: var(--info-bg); color: var(--info); }
.melding__tekst { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.melding__titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; }
.melding--ongelezen .melding__titel { font-weight: 600; }
.melding__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-3); }
/* Ongelezen-stip (paneel én lijst /meldingen/); --leeg = gelezen, houdt de ruimte vast zodat titels uitlijnen. */
.ongelezen { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--info); }
.ongelezen--leeg { background: transparent; }
@media (max-width: 768px) {   /* bel blijft rechts in beeld, ook als de apps eronder doorscrollen */
    .suitebar__bel { position: sticky; right: 0; margin-right: 0; }
    .suitebar__bel, .suitebar__bel:hover, .suitebar__bel.is-open { background: var(--ink); box-shadow: -10px 0 10px var(--ink), 14px 0 0 var(--ink); }
    html[data-theme="dark"] :is(.suitebar__bel, .suitebar__bel:hover, .suitebar__bel.is-open) { background: #110f0d; box-shadow: -10px 0 10px #110f0d, 14px 0 0 #110f0d; }
}
@media (max-width: 720px) {   /* telefoon: schermvullend onder de suitebar */
    .meldpaneel { left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: none; border-width: 1px 0 0; border-radius: 0; }
    .melding { min-height: 56px; }
}

/* --- einde Meldingen B --- */
/* --- Meldingen C: lijst /meldingen/ --- */
/* Lijst /meldingen/ (views/meldingen/index.php, bouwspec §4): tabs boven de kaart (de soort staat in de zijbalk), vinkjes + Selectiebalk,
   marge "8,4% → −22,3%" (negatief = --crit), titelcel met de ongelezen-stip (.ongelezen: blok Meldingen B), venster Afhandelen. */
.mld-tabs { margin: 0 0 16px; }
/* Groepsrij = indelende kopregel (tabel.md 5, type B): leden niet inspringen, vinkjes op één lijn met kop- en groepsvinkje.
   Een rij zonder vinkje (afgehandeld, lege groep) houdt de ruimte van het vinkvak (tabel.md 11). */
.card--flush .mld-tabel.table--groepen tbody tr:not(.grp) td:first-child { padding-left: 20px; }
.mld-kies-ruimte { flex: none; display: inline-block; width: 19px; }
.mld-marge { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mld-neg { color: var(--crit); font-weight: 600; }
/* Ongelezen = alleen de blauwe stip; de titel blijft 500 zoals elke a.row (controle 1, punt 3). */
.mld-meer .kies { flex: none; width: 240px; }   /* Leverancier in Meer filters: vaste breedte zoals de andere filters (punt 8) */
/* Lege staat (docs/ui/componenten/lege-staat.md). In een kaart zonder binnenmarge staat het vak op dezelfde lijn als de
   filterbalk (padding 20px); --klaar = doel bereikt: vinkje in een groen rondje, kop, één regel waarom, één link. */
.card--flush > .empty { margin: 20px; }
.empty--blok { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; }
.empty--blok .empty__ikoon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px;
  background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.empty--blok strong { color: var(--text); font-size: 15px; }
.mld-tabel tr.grp .link-btn { font-weight: 500; }
.mld-ster { color: var(--crit); }
.mld-venster textarea { width: 100%; resize: vertical; }
.mld-venster .veld-melding[hidden] { display: none; }
@media (max-width: 768px) {
    /* Stapeltabel: groepsrij blijft één balk (naam + "Alle n afhandelen"), zonder kolomlabel. */
    html body .mld-tabel.table--stapel tr.grp td { display: block; padding: 6px 0; text-align: left; }
    .mld-tabel.table--stapel tr.grp { padding: 4px 16px; background: var(--surface-3); }
    .mld-tabel.table--stapel tr.grp td::before { content: none; }
    .mld-tabel.table--stapel tr.grp .grprij { width: 100%; }
    .mld-tabel.table--stapel td:first-child .titelcel__tekst { text-align: left; }
    /* Gestapeld is er geen plakkende kolom: zonder de scheidingslijn van .table--plak, titel links (ook Prijsregels, punt 12). */
    :is(.mld-tabel, #prijsregeltabel).table--stapel td:first-child::after { content: none; }
    #prijsregeltabel.table--stapel td:first-child .titelcel__tekst { text-align: left; }
    /* Per leverancier | Lijst blijft compact, rechts op de regel van Kolommen (controle 1, punt 13); alleen de gewone seg
       (Open · Afgehandeld · Alles) krijgt de volle breedte. */
    .card > .filter-bar > .seg.seg--klein[data-mld-weergave] { flex: none; width: auto; margin-left: auto; }
    .card > .filter-bar > .seg.seg--klein[data-mld-weergave] > a { flex: none; }
}
/* --- einde Meldingen C --- */
/* --- Meldingen D: Admin › Meldingen › Prijsregels --- */

/* --- einde Meldingen D --- */
/* ── Datumveld (docs/ui/componenten/datumveld.md, views/partials/datumveld.php): één dag in een formulier. Invoervak van 36 px
   (zoals het invoervak) met kalendericoon en ×; paneel = de kalender van de periodekiezer met één maand. */
.dv { position: relative; display: block; width: 100%; min-width: 0; }
.dv__vak { display: flex; align-items: center; gap: 8px; height: 36px; box-sizing: border-box; padding: 0 4px 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); cursor: text; }
.dv__vak .dv__ico { flex: none; color: var(--text-3); }
/* Specifieker dan .pv2 .pv-hoofd .pv-rij :is(input[type=text]) (invoervak): het vak is .dv__vak, het input zelf is kaal. */
.dv .dv__vak > input[type="text"].dv__invoer.dv__invoer, .dv .dv__vak > input[type="text"].dv__invoer.dv__invoer:focus { flex: 1 1 auto; width: auto; min-width: 0; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; outline: none; }
.dv__invoer::placeholder { color: var(--text-3); }
.dv__x { flex: none; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer; }
.dv__x:hover { background: var(--surface-3); color: var(--text); }
.dv__x[hidden] { display: none; }
.dv--open .dv__vak, .dv__vak:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.dv--fout .dv__vak { border-color: var(--crit); box-shadow: 0 0 0 1px var(--crit); }
.dv:has(.dv__invoer:disabled) .dv__vak { background: var(--surface-2); cursor: default; }
.dv:has(.dv__invoer:disabled) .dv__invoer { color: var(--muted); }
/* Hint en melding onder het vak nemen geen hoogte in (anders zakken de buren in de rij omlaag): ze hangen in de rij-afstand. */
.dv__hint, .dv .dv__fout { position: absolute; left: 0; right: 0; top: 100%; margin-top: 2px; font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv__hint { color: var(--text-3); }
.dv__hint[hidden], .dv__fout[hidden] { display: none; }
.dv .dv__paneel { display: block; position: fixed; z-index: 1150; width: 288px; max-width: calc(100vw - 16px); overflow-y: auto; }   /* plek zet de JS (onder of boven het vak), dus nooit afgeknipt door een kaart of tabel */
.dv .dv__paneel[hidden] { display: none; }
.dv .dv__paneel .pk__maanden { grid-template-columns: minmax(0, 1fr); }
.dv .dv__paneel .pk__voet [data-dv-leeg] { margin-left: auto; }
@media (max-width: 640px) {
    /* Telefoon: paneel over de volle breedte van het veld, onder het vak (niet vast bovenin zoals de periodekiezer). */
    .dv .dv__paneel { right: auto; }   /* breedte = het vak (JS), minstens 288 px */
    .dv .dv__paneel .pk__dag { width: 38px; height: 36px; }
    .dv .dv__vak > input[type="text"].dv__invoer.dv__invoer { font-size: 16px; }   /* iOS zoomt niet in */
    .dv:not(:focus-within) .dv__x { display: none; }   /* × pas bij focus: anders past "21 okt 2026" niet in een kwartcel */
}
.dv.dv--fout { margin-bottom: 8px; }   /* ruimte voor de melding, zodat hij het label eronder niet raakt (de buren in de rij schuiven niet) */
/* Datumveld met opties (Einddatum, Tijd; ronde 2): vakken bovenin het paneel, schakelaars onder de kalender. Zonder Tijd geen
   tijdvakken, zonder Einddatum geen tweede rij (Tijd alleen = van–tot op dezelfde dag). */
.dv .dv__paneel:has(.dv__velden) { width: 304px; }
.dv__velden { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 14px 0; }   /* minmax(0,…): de rij wordt niet breder dan het paneel */
.dv__rij { display: flex; align-items: center; gap: 6px; }
.dv .dv__velden input.dv__veld.dv__veld { flex: 1 1 0; width: auto; min-width: 0; height: 36px; min-height: 0; margin: 0; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; box-shadow: none; }
.dv .dv__velden input.dv__veld--tijd.dv__veld--tijd { flex: 0 0 64px; padding: 0 4px; text-align: center; }   /* vaste breedte: de rij past altijd */
.dv .dv__velden input.dv__veld.dv__veld:focus, .dv .dv__velden input.dv__veld.is-actief { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); outline: none; }
.dv .dv__velden input.dv__veld.is-ongeldig { border-color: var(--crit); box-shadow: 0 0 0 1px var(--crit); }
.dv__streep, .dv__pijl { flex: none; color: var(--text-3); }
.dv__streep { margin: 0 -2px; }   /* netto 4 px aan weerszijden (gap 6) */
.dv__pijl { width: 14px; text-align: center; }
.dv__pijl--plek { visibility: hidden; }   /* met Einddatum: dezelfde ruimte als de pijl, zodat begin- en eindvak even breed zijn */
.dv:not(.dv--eind) .dv__pijl--plek { display: none; }
.dv:not(.dv--tijd) :is(.dv__veld--tijd, .dv__streep) { display: none; }
.dv:not(.dv--eind) .dv__rij--eind { display: none; }
.dv.dv--eind .dv__rij:first-child :is([data-dv-veld="tijdTot"], .dv__streep) { display: none; }   /* met Einddatum hoort de eindtijd bij de eindrij */
.dv__opties { display: grid; gap: 10px; padding: 10px 0 2px; border-top: 1px solid var(--border); }
.dv__optie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; font-size: 13px; color: var(--text); cursor: pointer; }
.dv--opties .dv__invoer { cursor: pointer; }