/* ui-b.css — variant B "Kaartkop": every tab is one card; the band carries subtabs + actions.
   Only tokens from style.css / skin-sharp.css. Loaded after both, demo only. */
.grouprow[data-group="costs"],.grouprow[data-group="costsgoods"],.grouprow[data-group="import"]{display:none!important}
.b-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius,11px);overflow:hidden;margin:0 0 16px}
.b-band{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;background:var(--bg2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.b-band .subbar{margin:0;background:transparent;border:0;padding:0;box-shadow:none}
.b-band .subtab{padding:5px 11px;font-size:12.5px;border-radius:7px}
.b-actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap}
.b-actions form{margin:0;display:inline-flex;align-items:center}
.b-actions .btn{white-space:nowrap}
.b-scope{font-size:12px;color:var(--muted);margin-right:6px;white-space:nowrap}
.b-actions .segmented,.b-actions .segwin{margin:0}
.b-ic svg{width:13px;height:13px;vertical-align:-2px;margin-right:5px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.b-ic.only svg{margin:0}
.b-body{padding:14px 15px 12px}
.b-body>.b-sec:first-child{border-top:0;padding-top:0}
/* stat tiles — the one tile model */
.b-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.b-stat{border:1px solid var(--line);border-radius:9px;padding:10px 12px;position:relative;min-width:0;background:var(--card)}
.b-stat .l{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
.b-stat .v{font-size:20px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.2}
.b-stat .v small{font-size:13px;font-weight:500;color:var(--muted)}
.b-stat .v.ok{color:var(--ok)}.b-stat .v.err{color:var(--err)}
.b-stat .s{display:block;font-size:11.5px;color:var(--faint);margin-top:3px}
.b-stat.hi{box-shadow:inset 3px 0 0 var(--accent-btn);border-color:var(--accent-btn)}
.b-stat .d{position:absolute;top:9px;right:10px;font-size:10.5px;font-weight:600;border-radius:99px;padding:1px 7px;background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.b-stat .d.dn{background:color-mix(in srgb,var(--err) 14%,transparent);color:var(--err)}
.b-stat .bar{height:4px;background:var(--bg2);border-radius:2px;margin-top:8px;overflow:hidden}
.b-stat .bar i{display:block;height:100%;background:var(--accent-btn)}
/* sections */
.b-sec{padding:14px 0 8px;border-top:1px solid var(--line)}
.b-sech{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.b-sech .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.b-sech .m{font-size:12px;color:var(--faint)}
.b-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.b-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.b-grid32{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:22px}
@media(max-width:980px){.b-grid3,.b-grid2,.b-grid32{grid-template-columns:1fr}}
.b-field{margin-bottom:10px}
.b-field>.l{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.b-lines{font-size:12.5px;line-height:1.7}
.b-link,a.b-link{color:var(--accent);font-weight:600;text-decoration:none}
.b-link:hover{text-decoration:underline}
.b-note{font-size:12px;color:var(--muted);padding-top:6px}
.b-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* rows (settings-style list) */
.b-rows{border-top:1px solid var(--line)}
.b-row{display:grid;grid-template-columns:190px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.b-row b{font-weight:600}.b-row .s{color:var(--muted)}
.b-row form{margin:0}
/* toggle: the app's .switch (ON/OFF text pill) drawn as a real switch inside a b-card */
.b-card .switch{font-size:0;letter-spacing:0;width:34px;height:20px;padding:0;border-radius:99px;position:relative;display:inline-block;vertical-align:middle;background:var(--line2);border-color:var(--line2);flex:none}
.b-card .switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s}
.b-card .switch.on{background:var(--ok);border-color:var(--ok)}
.b-card .switch.on::after{left:16px}
.b-card .switch[disabled]{opacity:.45}
.b-sw{display:inline-flex;align-items:center;gap:8px;font-size:12.5px}
/* checkboxes / radios inline */
.b-chk{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;margin-right:12px}
/* drop zone, tiles, empty state */
.b-drop{border:1px dashed var(--line2);border-radius:9px;padding:18px;text-align:center;background:var(--bg2)}
.b-drop b{display:block;font-size:13.5px;margin-bottom:3px}
.b-drop .s{display:block;font-size:12px;color:var(--muted);margin-bottom:10px}
.b-drop.over{border-color:var(--accent-btn);background:color-mix(in srgb,var(--accent-btn) 10%,var(--bg2))}
.b-tile{border:1px solid var(--line);border-radius:9px;padding:11px 13px;font-size:12.5px}
.b-tile b{display:block;font-size:13px;margin-bottom:2px}
.b-tile .s{display:block;color:var(--muted);font-size:12px;margin-bottom:9px}
.b-tile+.b-tile{margin-top:10px}
.b-empty{padding:28px 16px;text-align:center}
.b-empty b{display:block;font-size:14px;margin-bottom:4px}
.b-empty .s{display:block;font-size:12.5px;color:var(--muted);margin:0 auto 12px;max-width:60ch}
/* tables */
.b-table{width:100%;border-collapse:collapse;font-size:12.5px}
.b-table th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line);font-weight:600;background:transparent}
.b-table td{padding:8px 8px;border-bottom:1px solid var(--td-line);font-variant-numeric:tabular-nums;vertical-align:middle}
.b-table tr:last-child td{border-bottom:0}
.b-table .r,.b-table th.r{text-align:right}
.b-table td.ind{padding-left:22px}
.b-table tr.tot td{border-top:1px solid var(--line);font-weight:700}
.b-table td .n{color:var(--faint);font-size:11px;margin-left:6px}
/* pills */
.b-pill{display:inline-block;font-size:10.5px;font-weight:600;border-radius:99px;padding:1px 8px;background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);white-space:nowrap}
.b-pill.mute{background:var(--bg2);color:var(--muted)}
.b-pill.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.b-pill.err{background:color-mix(in srgb,var(--err) 14%,transparent);color:var(--err)}
/* form controls inside a b-card: compact */
.b-card .field{margin-bottom:0}
.b-card .field label{font-size:12px;margin-bottom:4px}
.b-card .field input,.b-card .field select,.b-card input.b-in,.b-card select.b-in{padding:6px 9px;border-radius:6px;font-size:12.5px;background:var(--card);border:1px solid var(--line);color:var(--txt);font:inherit}
.b-card input.b-in.sm{width:90px}
.b-card .hint{font-size:12px;color:var(--faint)}
.b-card h3,.b-card h4{font-size:13.5px;margin:0 0 6px}

/* import */
.b-actions .vertsel{gap:8px}
.b-card input.b-in.b-wide{width:100%;box-sizing:border-box}
.b-inline .b-inline-btn{align-self:flex-end;margin-bottom:10px}
.b-warntxt{color:var(--warn)}
.b-card .b-fold>summary{font-size:12.5px}
.b-card .b-fold>summary::before,.b-card .b-fold[open]>summary::before{content:none}
.b-lines.b-split{display:flex;gap:14px;flex-wrap:wrap;padding-top:4px}
.b-lines.b-split>.r{margin-left:auto}
.b-card .linkish.b-link{font-size:inherit}
.b-swrow{margin-top:8px}
.b-card .seasonpick{margin:0 0 6px}
.b-card .seasonpick label{font-size:12.5px}
.b-card .b-sw+.b-sw{margin-top:8px}
.b-row>span:last-child{justify-self:end}
.b-card .b-sec .adv{margin-top:0}
.b-card .b-inline .b-inline-btn{margin-bottom:14px}
:root[data-skin] .b-card .switch{font-size:0;letter-spacing:0;padding:0}

/* pnl */
.b-sec .pltbl{margin-top:0}
.b-body>.plrange{margin-bottom:12px}
.b-body>.plrange[hidden]{display:none}
.b-stat .bar.be{position:relative}
.b-stat .bar.be::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--txt)}
.b-stat .bar.under i{background:var(--err)}
.b-card .b-table.pltbl th{background:transparent}
.b-grid3>.b-sec{border-top:0;padding-top:0}

/* products */
.b-actions>.subpane>.b-actions{margin-left:0}
#sizes-coverall{display:contents}
#products .ptools{margin:0}
#products .tscroll{margin:0 -15px;padding:0 15px}
.b-body .ptable{margin-top:10px}
.b-grow{flex:1 1 auto}
.b-table td .n.b-sub{display:block;margin:2px 0 0}
.b-table td.r>.b-inline{justify-content:flex-end}
.b-table form{margin:0;display:inline-flex;gap:6px;align-items:center}
.b-card input.b-in[type=search]{flex:1 1 220px;max-width:340px}
.b-drop>.b-inline{justify-content:center}
.tpl>.b-inline>b,.tpl>.b-inline>.s{margin:0}
.tpl>.b-grid32{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
[data-clauses]>.clause{margin-bottom:6px}
[data-clauses] input.b-in{flex:1 1 130px;max-width:220px}
.pv{border:1px solid var(--line);border-radius:9px;padding:4px 8px;overflow-x:auto;background:var(--bg2)}
.pv .b-table th,.pv .b-table td{white-space:nowrap}
#sizes-build-grid input.b-in{width:72px}
#sizes-build-grid th .drop{margin-left:4px}
.b-body>form>.b-sec:first-child{border-top:0;padding-top:0}
.b-row>label,.b-row>span:first-child{font-size:12.5px;color:var(--muted)}
.b-row>div>.hint{margin-top:4px}
.b-row>span:first-child{justify-self:start}
#sizes-dropform,#sizes-builder{margin-top:12px}
#sizes-build-body{margin-top:8px}

/* costs */
.b-body>.b-grid32:first-child>.b-sec,.b-body>.b-grid2:first-child>.b-sec{border-top:0;padding-top:0}
#costsgoods .b-row{grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) 180px}
#costsgoods .b-row>.b-pill{justify-self:end}
.b-sech .m .segwin{vertical-align:middle}
.b-table td .b-pill{vertical-align:middle}
.b-empty form{display:inline}
#costsgoods .b-drop .btn{margin:0}

/* activity */
.b-card .actlist{margin:0}
.b-card .actday{padding:12px 0 0;margin-bottom:4px}
.b-card .actday:first-child{padding-top:0}
.b-card .actrow{padding:8px 0;border-top:0;border-bottom:1px solid var(--td-line)}
.b-card .actrow:last-child{border-bottom:0}
.b-card .actnote{margin:0;padding-top:10px}
.grouprow[data-group="settings"]{display:none!important}

/* performance */
.b-band button.subtab{font-family:inherit;line-height:inherit;cursor:pointer;appearance:none}
.b-band .subtab .b-pill{margin-left:4px;vertical-align:1px}
.b-lbl{font-size:12px;color:var(--muted);white-space:nowrap}
.b-card .btn.ghost.on{color:var(--txt);box-shadow:inset 0 0 0 1px var(--accent)}
.b-card textarea.b-in{padding:6px 9px;border-radius:6px;font-size:12.5px;background:var(--card);border:1px solid var(--line);color:var(--txt);font:inherit;width:100%;box-sizing:border-box;resize:vertical}
.b-card button.b-pill{border:0;cursor:pointer;font-family:inherit;line-height:inherit}
.b-pill .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px;vertical-align:0}
.b-pill svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.4;vertical-align:-1px;margin-right:3px}
.b-ic.after svg{margin:0 0 0 5px}
.b-card input.b-in.b-search{flex:1 1 200px;max-width:300px;min-width:160px}
.b-spin{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--card)}
.b-card .b-spin input.b-in{border:0;border-radius:0;width:44px;text-align:center;padding:6px 4px}
.b-spin .arrows{display:flex;flex-direction:column;border-left:1px solid var(--line)}
.b-spin .arrows button{border:0;background:none;color:var(--muted);padding:0 5px;flex:1;cursor:pointer;display:grid;place-items:center}
.b-spin .arrows button:hover{background:var(--bg2);color:var(--txt)}
.b-spin .arrows svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2.5}
.b-sech>.b-inline{margin-left:auto}
.b-sech .segwin{vertical-align:middle}
.b-empty .btn{text-decoration:none}

/* settings */
#settings .b-band .setnav{position:static;flex-direction:row;margin:0;top:auto;gap:4px}
#settings .b-band .setnav a{padding:5px 11px;border-radius:7px;font-size:12.5px;font-weight:600;border:0}
#settings .b-band .setnav a.on{background:var(--accent-btn);color:var(--accent-ink)}
#settings .setcols{gap:0}
#settings .setcols.tabbed{max-width:none}
#settings .setcols>*>.b-sec:first-child{border-top:0;padding-top:0}
#settings .b-inline+.b-rows{margin-top:12px}
#settings .b-fold>summary{list-style:none;cursor:pointer}
#settings .b-fold>summary::-webkit-details-marker{display:none}
#settings .b-fold>summary.b-row{display:grid}
#settings .b-fold>summary.b-row:hover{background:var(--bg2)}
#settings .b-fold[open]>summary.b-row{border-bottom:0}
#settings .b-rowbody{padding:4px 0 14px;border-bottom:1px solid var(--line)}
#settings .b-rowbody>form+form,#settings .b-rowbody .b-lines+.b-inline{margin-top:10px}
#settings a.b-row{color:inherit;text-decoration:none}
#settings a.b-row:hover{background:var(--bg2)}
#settings .b-row>span:last-child{justify-self:end;text-align:right}
#settings .b-row .b-pill+.b-link{margin-left:6px}
#settings .b-row.b-stack{grid-template-columns:190px minmax(0,1fr)}
#settings .b-row .b-grid2{display:grid;margin-top:8px;gap:14px 22px}
#settings .b-row .b-grid2 .field{display:block}
#settings .b-form{align-items:flex-end}
#settings .b-foot{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding-top:10px}
#settings .b-foot .hint{margin:0 auto 0 0}
#settings .field input[type=range]{padding:0;border:0;background:transparent;width:100%}
#settings .b-row .hint{margin-top:0}
#settings .b-chk input{width:auto;margin:0}
#settings .b-rows .stylegrid{margin-top:8px}
#settings .b-inline>.b-link{font-size:12.5px}
#settings .b-row.b-stack>span:last-child{justify-self:stretch;text-align:left}
.b-card .b-pill.err{border:0;border-radius:99px;padding:1px 8px;margin:0;font-size:10.5px}
/* performance: sticky horizontal scrollbar under wide tables. overflow:clip keeps the
   card's rounded clipping without making it a scroll container, so sticky works
   against the viewport. */
#performance .b-card{overflow:clip}
.b-hscroll{overflow-x:auto;overflow-y:hidden;position:sticky;bottom:0;z-index:2;background:var(--card);border-top:1px solid var(--line)}
.b-hscroll>div{height:1px}
/* The wrapper shows NO scrollbar of its own (Chrome ≥121 ignores ::-webkit-scrollbar as soon as
   scrollbar-width is set, which is how the bar came back twice); the sticky .b-hscroll is the
   one horizontal bar, and it is always drawn. */
.py-twrap,.py-hwrap{scrollbar-width:none;-ms-overflow-style:none}
.py-twrap::-webkit-scrollbar,.py-hwrap::-webkit-scrollbar{display:none;width:0;height:0}
.b-hscroll{scrollbar-width:auto;scrollbar-color:var(--line2) var(--bg2)}
.b-hscroll::-webkit-scrollbar{height:10px}
.b-hscroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;border:2px solid var(--card)}
.b-hscroll::-webkit-scrollbar-track{background:var(--bg2)}

/* costs: the period switch as the first row of the body (10 buttons never fit beside 5 subtabs) */
.b-toolrow{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:0 0 12px}
.b-toolrow .segwin{margin:0}
/* bulk: the two doors */
.b-door{border:1px solid var(--line);border-radius:9px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.b-door .b-sech{margin-bottom:8px}
.b-door .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:12px}
.b-door .foot .b-note{padding:0}
.b-door input.b-in.big{font-size:20px;font-weight:600;width:120px;padding:6px 10px}
/* bulk: chips for multi-choice, the field label may carry a muted meta */
.b-field>.l .m{font-weight:400;color:var(--faint)}
.b-chips{display:flex;flex-wrap:wrap;gap:6px}
.b-chips label{position:relative;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:99px;padding:4px 11px;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--card);cursor:pointer;user-select:none}
.b-chips label input{position:absolute;opacity:0;width:0;height:0;margin:0}
.b-chips label:hover{border-color:var(--line2);color:var(--txt)}
.b-chips label:has(input:checked){background:var(--accent-btn);border-color:var(--accent-btn);color:var(--accent-ink)}
.b-chips label.auto-hint:not(:has(input:checked)){border-style:dashed}
.b-chips label .n{font-style:normal;color:var(--faint);font-weight:500}
.b-chips label.thin{opacity:.6}
.b-quick{margin-left:4px}
.b-quick .segwin-b{padding:4px 9px;font-size:11.5px}
.b-door .segmented{margin:0}
/* the app's .seasonpick label.auto-hint rule (transparent border) would erase the chip; the
   store's own default seasons show as a dashed chip instead, filled when ticked */
.b-chips.seasonpick label.auto-hint{border-color:var(--line2);border-style:dashed;color:var(--muted)}
.b-chips.seasonpick label.auto-hint:has(input:checked){border-style:solid;border-color:var(--accent-btn);color:var(--accent-ink)}
/* bulk doors: the Daily pane's checkbox look, no chips */
#bulk .seasonpick label.auto-hint{color:var(--txt);border-color:transparent;font-weight:600}
#bulk .b-field .hint{margin-top:4px}
#bulk .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:4px;padding-top:10px}
#bulk .foot .b-note{padding:0}
#bulk .b-in.b-wide{width:100%}
/* bulk: every choice is the same segmented pill row; the summary card mirrors it */
#bulk .segmented{margin:0;flex-wrap:wrap}
#bulk .segmented .seg{font-size:12.5px;padding:5px 12px}
#bulk .segmented .seg.auto-hint:not(:has(input:checked)){color:var(--txt);text-decoration:underline dotted var(--line2);text-underline-offset:3px}
#bulk .segmented .seg .n{font-style:normal;color:var(--faint);font-weight:500}
#bulk .b-field{margin-bottom:14px}
.b-sum{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:12px 14px;display:flex;flex-direction:column;align-self:start}
.b-sum .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px}
.b-sum .line{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line)}
.b-sum .line span{color:var(--muted)}.b-sum .line b{font-weight:600;text-align:right}
.b-sum .line:last-of-type{border-bottom:0}
.b-sum .btn{margin-top:12px;text-align:center}
/* bulk: ontwerp 2, twee bronkaarten naast elkaar (10-09) */
#bulk .b-src{display:grid;grid-template-columns:3fr 2fr;gap:14px;margin-top:4px}
#bulk .b-srccard{border:1px solid var(--line);border-radius:9px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;margin:0}
#bulk .b-srccard:first-child{border-color:var(--accent-btn)}
#bulk .b-srchead{margin-bottom:12px;display:flex;flex-direction:column;gap:2px}
#bulk .b-srchead b{font-size:14px}
#bulk .b-srchead .m{font-size:12px;color:var(--faint)}
#bulk .b-srccard .foot{margin-top:auto;border-top:1px solid var(--line);padding-top:12px}
#bulk .b-count{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#bulk .b-count .segmented button.seg{appearance:none;background:none;border:0;font:inherit;cursor:pointer;color:var(--muted);font-weight:600;border-radius:8px}
#bulk .b-count .segmented button.seg.on{background:var(--accent-btn);color:var(--accent-ink)}
#bulk .b-count input[name=count]{width:84px;padding:7px 10px;font-size:13px;font-weight:600;border-radius:10px;font-variant-numeric:tabular-nums}
#bulk .b-count .or{font-size:12px;color:var(--faint)}
/* alle keuzegroepen in de bronkaart: zelfde pil als Fashion/General in de band */
#bulk .b-srccard .segmented{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
#bulk .b-srccard .segmented .seg{font-size:13px;font-weight:600;color:var(--muted);padding:7px 13px;border-radius:8px;border:0;background:none}
#bulk .b-srccard .segmented .seg:has(input:checked){background:var(--accent-btn);color:var(--accent-ink)}
#bulk .b-srccard .segmented .seg .n{margin-left:4px;font-size:11px;color:var(--faint);font-weight:500}
#bulk .b-srccard .segmented .seg:has(input:checked) .n{color:inherit;opacity:.75}
#bulk .b-srccard .segmented.wrap{flex-wrap:wrap}
#bulk .b-srccard .b-field>.l{margin-bottom:6px}
#bulk .b-srccard .hint{margin-top:6px}
@media(max-width:820px){#bulk .b-src{grid-template-columns:1fr}}
/* bronkaart: groepen in een wikkelende rij, elk zo breed als zijn pillen */
#bulk .b-srccard .b-grid2{display:flex;flex-wrap:wrap;gap:16px 28px}
#bulk .b-srccard .b-grid2>.b-field{margin:0;flex:0 0 auto}
#bulk .b-srccard .b-grid2>.b-field:first-child,#bulk .b-srccard .b-field.catfocus{flex:1 1 100%}
#bulk .b-srccard .segmented{display:inline-flex;width:auto;flex-wrap:nowrap}
/* Category focus krijgt dezelfde pillenbalk als Season en Who for (Xavier 10-09).
   Kan sinds de zes bakken van 10-09: met zestien paste dat niet op één regel. */
#bulk .b-srccard .catfocus .segmented{flex-wrap:wrap}
#bulk .b-srccard .catfocus .seg.auto-hint:not(:has(input:checked)){text-decoration:none;color:var(--txt)}
/* size guides: laat zien dat de tabel op de maten van het product wordt gesneden (10-09) */
.b-fit{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.b-fitrow{display:grid;grid-template-columns:170px auto 1fr;gap:12px;align-items:center}
.b-fitrow .fl{font-size:12.5px;font-weight:600}
.b-fitpills{display:inline-flex;gap:4px}
.b-fitpills span{font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:6px;border:1px solid var(--line);color:var(--txt);background:var(--card);font-variant-numeric:tabular-nums}
.b-fitpills span.off{color:var(--faint);border-style:dashed;background:none;text-decoration:line-through}
@media(max-width:640px){.b-fitrow{grid-template-columns:1fr}}
#pnl .b-stats{grid-template-columns:repeat(auto-fit,minmax(136px,1fr))}
/* pnl: kiezer voor de tegels, in het Settings-menu (10-09) */
#pnl .vm-cols{display:block}
#pnl .vm-list{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin:6px 0 4px}
#pnl .vm-list label{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:12.5px;white-space:nowrap}
#pnl .vm-list input{width:auto;margin:0}
#pnl .vm-links{font-size:12px}
#pnl .vm-links a{color:var(--accent-ink,inherit);text-decoration:underline}
#pnl #plview .viewmenu{min-width:340px}
/* tegel met vergelijkingspil: het label mag er niet onder lopen ("Net · before returns"
   viel achter de chip, 10-09). De pil staat rechtsboven, dus het label houdt die ruimte vrij. */
.b-stat:has(> .d) .l{padding-right:58px}
.b-stat .l{line-height:1.3}
/* een categorie met weinig producten blijft gemarkeerd (thin), zoals vóór de herindeling */
#bulk .b-srccard .catfocus .seg.thin .n{color:var(--warn);font-weight:700}
#bulk .b-srccard .catfocus .seg .n{margin-left:5px;font-size:11px;color:var(--faint);font-weight:600;font-style:normal}
#bulk .b-srccard .catfocus .seg:has(input:checked) .n{color:inherit;opacity:.8}