/* 💰 Harga customer (price-book.js, docs/SJA_PRICE_BOOK.md). Compact, desktop first (owner 2026-10-30: "numbers need not be that big, most people use a computer"):
   >= 900px a dense table of ~40px rows, < 900px tight cards with 44px targets and no sideways scroll at 360. Name FIRST (15px bold), the small code after it,
   price and Bonus are the LAST columns: the owner-approved exception to "code first" for THIS screen only. Colour is a signal: amber = a real warning (a PO
   without a price) or a pending change, indigo = a scheduled change, green = "baru berlaku", red = errors. */
.pb-ov { position: fixed; inset: 0; z-index: 150; display: flex; justify-content: center; background: rgba(16, 24, 40, .45); }
.pb-sheet { display: flex; flex-direction: column; width: 100%; max-width: 1400px; height: 100%; background: #EEF1F4; min-width: 0; }
.pb-bar { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; padding: .25rem .5rem; padding-top: calc(.25rem + env(safe-area-inset-top)); background: #fff; border-bottom: 1px solid var(--border); }
.pb-iconbtn { min-height: 44px; min-width: 44px; padding: .2rem .6rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; color: var(--dark); font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer; }
.pb-title { flex: 1; min-width: 0; font-weight: 800; font-size: 1rem; color: var(--dark); overflow-wrap: anywhere; }
.pb-title small { font-weight: 600; color: var(--muted); margin-left: .35rem; }
.pb-main { flex: 1 1 auto; min-height: 0; display: flex; min-width: 0; }
.pb-modes { display: flex; gap: .4rem; flex: 0 0 auto; padding: .25rem .5rem; background: #fff; border-bottom: 1px solid var(--border); }
.pb-mode { flex: 1 1 0; min-height: 44px; padding: 0 .6rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; color: var(--dark); font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; }
.pb-mode[aria-pressed="true"] { background: var(--p); border-color: var(--p); color: #fff; }

/* customer / product list (left on desktop) */
.pb-side { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #fff; }
.pb-pane { flex: 1 1 auto; min-width: 0; display: none; flex-direction: column; }
.pb-sheet.pb-has-acct .pb-side { display: none; }
.pb-sheet.pb-has-acct .pb-pane { display: flex; }
.pb-search { padding: .4rem .5rem .25rem; flex: 0 0 auto; }
.pb-q { width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 .65rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; font: inherit; font-size: 16px; }
.pb-side-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; overflow-anchor: none; padding: 0 .5rem calc(1rem + env(safe-area-inset-bottom)); }
.pb-grp { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .4rem; width: 100%; min-height: 44px; margin: .2rem 0 0; padding: .2rem .3rem; border: none; border-bottom: 1px solid var(--border); background: #F3F4F8; font: inherit; font-size: .78rem; font-weight: 800; color: var(--dark); text-align: left; cursor: pointer; }
.pb-grp .pb-gn { font-weight: 600; color: var(--muted); font-size: .72rem; }
.pb-grp[aria-current="true"] { background: #E0E7FF; box-shadow: inset 3px 0 0 var(--p); }
.pb-acct { display: flex; align-items: center; gap: .45rem; width: 100%; min-height: 44px; padding: .2rem .5rem .2rem 1rem; margin: 0; border: none; border-bottom: 1px solid #F1F5F9; background: #fff; font: inherit; text-align: left; color: var(--dark); cursor: pointer; }
.pb-acct[aria-current="true"] { background: #EEF2FF; box-shadow: inset 3px 0 0 var(--p); }
.pb-acct b { flex: 1; min-width: 0; font-size: .9rem; overflow-wrap: anywhere; }
.pb-acct.pb-off { opacity: .55; }
.pb-prodbtn { padding-left: .8rem; }
.pb-kind { display: inline-block; flex: 0 0 auto; font-size: .68rem; font-weight: 800; border-radius: 6px; padding: .02rem .35rem; border: 1px solid #CBD5E1; background: #F1F5F9; color: #334155; }

/* head of the right side */
.pb-head { flex: 0 0 auto; padding: .35rem .5rem .3rem; background: #fff; border-bottom: 1px solid var(--border); }
.pb-head-top { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.pb-acct-name { flex: 1; min-width: 0; min-height: 44px; border: none; background: none; font: inherit; font-weight: 800; font-size: 1rem; text-align: left; color: var(--dark); overflow-wrap: anywhere; cursor: pointer; }
.pb-acct-name small { font-weight: 600; }
.pb-gtag { color: var(--p); font-weight: 700; }
.pb-nv { flex: 0 0 auto; font-size: 1.2rem; }
.pb-back-acct { flex: 0 0 auto; }
.pb-tax { margin: .1rem 0 0; font-size: .74rem; color: var(--ink2); }
.pb-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; margin: .35rem 0 0; }
.pb-tools:empty { display: none; }
.pb-tools .pb-btn { padding: .2rem .45rem; line-height: 1.2; font-size: .82rem; }
.pb-btn { min-height: 44px; padding: .25rem .75rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; color: var(--dark); font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; }
.pb-btn[aria-pressed="true"] { background: var(--p); border-color: var(--p); color: #fff; }
.pb-btn-p { min-height: 48px; padding: .4rem .9rem; border: none; border-radius: 10px; background: var(--p); color: #fff; font: inherit; font-weight: 800; font-size: .92rem; cursor: pointer; }
.pb-btn-p:disabled { background: #C7CBD6; cursor: default; }
.pb-btn-d { color: #B42318; border-color: #F4B4AE; }
.pb-missnote { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; margin: .3rem 0 0; padding: .3rem .5rem; font-size: .8rem; }
.pb-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; overflow-anchor: none; padding: .3rem .5rem calc(1rem + env(safe-area-inset-bottom)); }
.pb-rowq { margin: .1rem 0 .3rem; }

/* the start-day chips ("Berlaku mulai": Hari ini / Besok / 1 <next month> preselected / Pilih tanggal) */
.pb-bday { margin: 0; padding: .3rem .5rem; background: #fff; border-bottom: 1px solid var(--border); }
.pb-bdt { font-size: .74rem; font-weight: 700; color: var(--ink2); margin: 0 0 .2rem; }
.pb-bdc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
.pb-bd { min-height: 44px; padding: 0 .2rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; color: var(--dark); font: inherit; font-weight: 800; font-size: .78rem; line-height: 1.15; cursor: pointer; }
.pb-bd[aria-pressed="true"] { border: 2px solid var(--p); background: #E0E7FF; color: #312E81; }
.pb-bday input[type="date"] { width: 100%; box-sizing: border-box; min-height: 44px; margin-top: .3rem; padding: .25rem .6rem; border: 1px solid var(--border-input); border-radius: 10px; font: inherit; font-size: 16px; }
.pb-bday .pb-note { margin: .3rem 0 0; }

/* the change strip / bar: "N bonus berubah · mulai <day>", Batal, Simpan */
.pb-bbar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; padding-bottom: calc(.45rem + env(safe-area-inset-bottom)); background: #FFFBEB; border-top: 1px solid #FCD34D; box-shadow: 0 -6px 18px rgba(20, 24, 40, .12); }
.pb-bt { flex: 1 1 auto; min-width: 0; }
.pb-bcnt { font-size: .9rem; font-weight: 800; color: #92400E; }
.pb-bwh { font-size: .76rem; color: var(--ink2); }
.pb-bmsg { font-size: .76rem; font-weight: 700; color: #991B1B; overflow-wrap: anywhere; }
.pb-bmsg:empty { display: none; }
.pb-bbar .pb-btn-p { min-height: 44px; }
.pb-selbar { position: sticky; bottom: 0; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; padding: .4rem .55rem; padding-bottom: calc(.4rem + env(safe-area-inset-bottom)); background: var(--dark); color: #fff; font-weight: 700; font-size: .88rem; }
.pb-selbar .pb-btn { color: var(--dark); }
.pb-selbar .pb-btn-p { min-height: 48px; }

/* category blocks: ONE collapsible header (~38px desktop / 44px phone) + its rows, one bordered block each */
.pb-blk { margin: 0 0 .4rem; background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.pb-cath { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .5rem; width: 100%; min-height: 44px; padding: .15rem .6rem; border: none; background: #F3F4F8; font: inherit; text-align: left; color: var(--dark); cursor: pointer; }
.pb-cath-s { cursor: default; min-height: 32px; }
.pb-cath b { font-size: .88rem; font-weight: 800; }
.pb-arr { flex: 0 0 .9rem; font-size: .75rem; color: var(--ink2); }
.pb-cn { font-size: .74rem; color: var(--ink2); }
.pb-chg, .pb-new, .pb-beda { display: inline-block; padding: .02rem .45rem; border-radius: 6px; font-size: .68rem; font-weight: 800; }
.pb-chg { background: #FEF3C7; color: #92400E; }
.pb-new { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.pb-beda { background: #EEF2FF; color: var(--s); border: 1px solid #C7D2FE; }
.pb-cols { display: none; }

/* a row (phone: a tight card inside the block; name + small code on top, price + Bonus at the bottom) */
.pb-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "prod prod hist" "since next next" "price bq bq"; align-items: center; gap: .1rem .5rem; padding: .35rem .55rem; border-top: 1px solid #EEF0F4; min-width: 0; }
.pb-selmode .pb-row { grid-template-columns: 44px auto minmax(0, 1fr) auto; grid-template-areas: "chk prod prod hist" "chk since next next" "chk price bq bq"; }
.pb-chk { grid-area: chk; display: none; width: 44px; min-height: 44px; border: none; background: none; font-size: 1.3rem; cursor: pointer; }
.pb-selmode .pb-chk { display: block; }
.pb-prod { grid-area: prod; min-width: 0; display: flex; align-items: baseline; gap: .4rem; overflow: hidden; }
.pb-prod b { font-size: .95rem; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-code { flex: 0 0 auto; font-size: .7rem; color: var(--muted); }
.pb-val { min-height: 44px; min-width: 44px; padding: .1rem .45rem; border: none; border-radius: 8px; background: transparent; color: var(--dark); font: inherit; text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.pb-price { grid-area: price; font-size: .95rem; font-weight: 800; color: var(--p); }
.pb-val .pb-cap, .pb-since .pb-cap { display: block; font-size: .6rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; line-height: 1.1; }
.pb-none { color: var(--muted); font-weight: 600; }
.pb-since { grid-area: since; font-size: .74rem; color: var(--ink2); min-width: 0; }
.pb-next { grid-area: next; display: flex; flex-wrap: wrap; gap: .25rem; min-width: 0; }
.pb-next:empty { display: none; }
.pb-chip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .25rem; max-width: 100%; padding: 0 .1rem 0 .5rem; border-radius: 999px; border: 1px solid #C7D2FE; background: #EEF2FF; color: var(--s); font-size: .76rem; font-weight: 700; }
.pb-chip b { font-variant-numeric: tabular-nums; }
.pb-chip button { min-height: 44px; padding: 0 .5rem; border: none; border-radius: 999px; background: transparent; color: #B42318; font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; }
.pb-miss, .pb-chip-w { display: inline-block; flex: 0 0 auto; max-width: 100%; padding: .02rem .5rem; border-radius: 999px; border: 1px solid #FCD34D; background: #FFFBEB; color: #92400E; font-size: .7rem; font-weight: 800; line-height: 1.5; }
.pb-hist-btn { grid-area: hist; min-height: 44px; min-width: 44px; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; font-size: .95rem; cursor: pointer; }
.pb-hist-btn[aria-expanded="true"] { background: var(--light); }
.pb-hist { grid-column: 1 / -1; margin: .1rem 0 0; border-top: 1px solid #F1F5F9; }
.pb-h { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .6rem; padding: .2rem .1rem; border-bottom: 1px solid #F8FAFC; font-size: .8rem; min-width: 0; }
.pb-h .pb-hd { font-weight: 800; min-width: 5.6rem; }
.pb-h .pb-by { color: var(--muted); font-size: .74rem; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pb-h .pb-sched { font-size: .68rem; font-weight: 800; color: var(--s); background: #EEF2FF; border-radius: 6px; padding: 0 .3rem; }
.pb-h button { min-height: 44px; padding: 0 .5rem; border: none; background: none; color: #B42318; font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; }
.pb-prow { cursor: pointer; }
.pb-prow.pb-off { opacity: .6; }
.pb-who { margin: -.1rem 0 .2rem; font-weight: 800; font-size: .95rem; color: var(--dark); overflow-wrap: anywhere; }

/* Bonus: the value with an up / down pair (step 0.5; ArrowUp / ArrowDown when the value is focused). Amber while the change is pending. */
.pb-bq { grid-area: bq; display: flex; align-items: center; justify-content: flex-end; gap: .35rem; min-width: 0; }
.pb-bv { order: 1; min-width: 3.6rem; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .4rem; border-radius: 10px; background: #F3F4F8; font-size: .95rem; font-weight: 800; color: var(--dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-bv:focus-visible { outline: 2px solid var(--p); }
.pb-bstep { min-width: 44px; min-height: 44px; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; color: var(--dark); font: inherit; font-size: .9rem; line-height: 1; cursor: pointer; padding: 0; }
.pb-bdn { order: 0; } .pb-bup { order: 2; }
.pb-bchg { background: #FFFBEB; box-shadow: inset 3px 0 0 #D97706; }
.pb-bchg .pb-bv { background: #FEF3C7; color: #92400E; }
.pb-bwas { grid-column: 1 / -1; font-size: .74rem; font-weight: 700; color: #92400E; }

/* messages */
.pb-note { font-size: .85rem; border-radius: 10px; padding: .5rem .65rem; margin: .4rem 0; overflow-wrap: anywhere; line-height: 1.4; }
.pb-note-d { background: #FEF2F2; color: #991B1B; border-left: 4px solid var(--danger); }
.pb-note-w { background: #FFFBEB; color: #92400E; border-left: 4px solid var(--warn); }
.pb-note-i { background: var(--light); color: var(--ink2); border-left: 4px solid var(--border-input); }
.pb-empty { padding: 1.5rem .6rem; text-align: center; color: var(--muted); font-size: .95rem; }

/* dialog */
.pb-dlg-ov { position: fixed; inset: 0; z-index: 160; display: flex; align-items: flex-end; justify-content: center; background: rgba(16, 24, 40, .5); }
.pb-dlg { width: 100%; max-width: 520px; max-height: 92%; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; background: #fff; border-radius: 16px 16px 0 0; padding: .7rem .8rem calc(.8rem + env(safe-area-inset-bottom)); }
.pb-dlg-wide { max-width: 760px; }
.pb-dlg-t { display: flex; align-items: center; gap: .4rem; font-weight: 800; font-size: 1.02rem; margin: 0 0 .4rem; }
.pb-dlg-t span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pb-dlg label { display: block; font-size: .82rem; font-weight: 700; color: var(--ink2); margin: .55rem 0 .15rem; }
.pb-dlg input[type="text"], .pb-dlg input[type="date"], .pb-dlg select, .pb-dlg textarea { width: 100%; box-sizing: border-box; min-height: 48px; padding: .35rem .65rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; font: inherit; font-size: 16px; }
.pb-dlg textarea { font-family: monospace; font-size: .78rem; white-space: pre; overflow: auto; }
.pb-dlg .price-echo, .pb-dlg .cart-qecho { font-size: .82rem; color: var(--ink2); min-height: 1.1rem; }
.pb-dlg .cart-qerr { font-size: .82rem; color: #991B1B; }
.pb-quick { display: flex; flex-wrap: wrap; gap: .4rem; margin: .35rem 0 0; }
.pb-two { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pb-sum { margin: .6rem 0 .2rem; padding: .5rem .65rem; border-radius: 10px; background: #EEF2FF; color: var(--s); font-size: .88rem; font-weight: 700; overflow-wrap: anywhere; }
.pb-sum:empty { display: none; }
.pb-act { display: flex; gap: .5rem; margin-top: .7rem; }
.pb-act .pb-btn-p { flex: 1; }
.pb-list { max-height: 34vh; overflow-y: auto; margin: .4rem 0; border: 1px solid var(--border); border-radius: 10px; }
.pb-li { padding: .35rem .6rem; border-bottom: 1px solid #F1F5F9; font-size: .82rem; overflow-wrap: anywhere; }
.pb-li:last-child { border-bottom: none; }
.pb-arrow { color: var(--muted); }

/* Price book plus: Per customer | Per produk, "Harga belum ada" (amber = a real warning: an open PO without a price), group box, copy */
.pb-modes { display: flex; gap: .4rem; flex: 0 0 auto; padding: .35rem .5rem; background: #fff; border-bottom: 1px solid var(--border); }
.pb-mode { flex: 1 1 0; min-height: 44px; padding: 0 .6rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; color: var(--dark); font: inherit; font-weight: 800; font-size: .92rem; cursor: pointer; }
.pb-mode[aria-pressed="true"] { background: var(--p); border-color: var(--p); color: #fff; }
.pb-miss, .pb-chip-w, .mp-chip { display: inline-block; flex: 0 0 auto; max-width: 100%; padding: .05rem .5rem; border-radius: 999px; border: 1px solid #FCD34D; background: #FFFBEB; color: #92400E; font-size: .72rem; font-weight: 800; line-height: 1.5; }
.mp-chip { margin: .2rem .3rem 0 0; }
.pb-prow { cursor: pointer; }
.pb-prow.pb-off { opacity: .6; }
.pb-who { margin: -.1rem 0 .2rem; font-weight: 800; font-size: .95rem; color: var(--dark); overflow-wrap: anywhere; }
.pb-missnote { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; }
.pb-grpbox { margin: .7rem 0 0; padding: .2rem .55rem; border: 1px solid var(--border); border-radius: 10px; background: #F8FAFC; }
.pb-dlg .pb-ck, .pb-ck { display: flex; align-items: center; gap: .65rem; min-height: 44px; margin: 0; font-size: .9rem; font-weight: 600; color: var(--dark); overflow-wrap: anywhere; }
.pb-ck input { width: 24px; height: 24px; flex: 0 0 auto; margin: 0; }
.pb-ck > span { min-width: 0; }
.pb-ck-all { font-weight: 800; border-bottom: 1px solid var(--border); }
.pb-fields { display: flex; flex-wrap: wrap; gap: 0 1.2rem; margin: .4rem 0 0; }

/* Faktur line: where the price came from (finished-goods-orders.js, one small line under the price box) */
.pb-src { grid-column: 1 / -1; font-size: .78rem; color: var(--ink2); font-variant-numeric: tabular-nums; }


/* the reminder: one small dismissible banner (never a modal) */
.pb-rm { position: fixed; z-index: 155; top: calc(.5rem + env(safe-area-inset-top)); left: .5rem; right: .5rem; max-width: 460px; margin-left: auto; padding: .45rem .55rem; background: #fff; border: 1px solid #A7F3D0; border-left: 4px solid #10B981; border-radius: 12px; box-shadow: 0 8px 24px rgba(16, 24, 40, .22); }
.pb-rm-top { display: flex; align-items: center; gap: .4rem; }
.pb-rm-t { flex: 1; min-width: 0; font-size: .85rem; }
.pb-rm-list { max-height: 50vh; overflow-y: auto; margin-top: .3rem; border-top: 1px solid var(--border); }
.pb-rm-c { padding: .3rem 0; border-bottom: 1px solid #F1F5F9; font-size: .82rem; }
.pb-rm-r { padding: .05rem 0 .05rem .5rem; font-variant-numeric: tabular-nums; }
.pb-rm-r small { color: var(--muted); }
.pb-rm-code { font-weight: 800; }

/* group mode: the member row (phone: a "K/N customer" toggle opening the checkbox list; desktop: inline checkboxes) */
.pb-gwrap { margin: .2rem 0 0; }
.pb-gtog { min-height: 44px; }
.pb-gmem { display: none; flex-wrap: wrap; gap: 0 .9rem; padding: .1rem 0; }
.pb-gopen .pb-gmem { display: flex; }
.pb-gck { min-height: 44px; }
@media (min-width: 900px) {
  .pb-gtog { display: none; }
  .pb-gmem { display: flex; gap: 0 .7rem; }
  .pb-gck { min-height: 30px; font-size: .84rem; }
  .pb-gck input { width: 18px; height: 18px; }
  .pb-gwrap { margin: 0; }
  .pb-modes { justify-content: flex-start; }
  .pb-mode { flex: 0 0 180px; min-height: 36px; }
  .pb-side { flex: 0 0 250px; width: 250px; border-right: 1px solid var(--border); }
  .pb-pane { display: flex; }
  .pb-sheet.pb-has-acct .pb-side { display: flex; }
  .pb-back-acct { display: none; }
  .pb-search { padding: .35rem .5rem .2rem; }
  .pb-q { min-height: 36px; font-size: 13px; }
  .pb-grp { min-height: 30px; }
  .pb-acct { min-height: 34px; }
  .pb-acct b { font-size: .84rem; }
  .pb-acct-name { cursor: default; pointer-events: none; min-height: 36px; }
  .pb-nv { min-height: 36px; min-width: 36px; }
  .pb-iconbtn { min-height: 36px; }
  .pb-head { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .9rem; padding: .35rem .8rem; order: 1; }
  .pb-head > .pb-head-top { flex: 0 1 auto; }
  .pb-tools { display: flex; flex-wrap: wrap; margin: 0 0 0 auto; }
  .pb-tools .pb-btn { min-height: 32px; font-size: .8rem; }
  .pb-btn { min-height: 34px; }
  .pb-missnote { margin: 0; }
  .pb-bday { order: 2; display: flex; align-items: center; gap: .6rem; padding: .3rem .8rem; flex-wrap: wrap; }
  .pb-bdt { margin: 0; }
  .pb-bdc { display: flex; gap: .3rem; }
  .pb-bd { min-height: 32px; padding: 0 .8rem; font-size: .8rem; border-radius: 8px; }
  .pb-bday input[type="date"] { width: auto; min-height: 32px; margin: 0; font-size: 13px; }
  #pb-selbar-host { order: 3; }
  .pb-body { order: 4; padding: 0 .8rem 1rem; }
  .pb-bbar { position: static; min-height: 44px; padding: .25rem .8rem; box-shadow: none; border-top: none; border-bottom: 1px solid #FCD34D; }
  .pb-bbar .pb-btn-p, .pb-bbar .pb-btn { min-height: 32px; padding: 0 .9rem; }
  .pb-bt { display: flex; align-items: baseline; gap: .6rem; }
  .pb-selbar { position: static; }
  .pb-rowq { margin: .3rem 0; }
  .pb-rowq .pb-q { max-width: 320px; }
  .pb-cath { min-height: 38px; }
  .pb-cols, .pb-row { grid-template-columns: minmax(220px, 1fr) 64px minmax(160px, 230px) 130px 120px 36px; column-gap: .6rem; }
  .pb-selmode .pb-cols, .pb-selmode .pb-row { grid-template-columns: 44px minmax(220px, 1fr) 64px minmax(160px, 230px) 130px 120px 36px; }
  .pb-cols { display: grid; position: sticky; top: 0; z-index: 1; padding: .3rem .6rem; margin: 0 0 .3rem; background: #E4E7EC; border-radius: 8px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--ink2); }
  .pb-ch-r { text-align: right; } .pb-ch-c { text-align: center; }
  .pb-selmode .pb-cols::before { content: ""; }
  .pb-row { grid-template-areas: "prod since next price bq hist"; min-height: 40px; padding: .15rem .6rem; }
  .pb-selmode .pb-row { grid-template-areas: "chk prod since next price bq hist"; }
  .pb-prod b { font-size: .94rem; }
  .pb-val .pb-cap, .pb-since .pb-cap { display: none; }
  .pb-val { min-height: 32px; text-align: right; }
  .pb-price { font-size: .94rem; justify-self: end; }
  .pb-bq { justify-content: center; display: grid; grid-template-columns: auto 26px; grid-template-rows: 14px 14px; gap: 2px 4px; align-content: center; }
  .pb-bv { grid-row: 1 / 3; grid-column: 1; order: 0; min-width: 3.2rem; min-height: 30px; font-size: .88rem; border-radius: 7px; }
  .pb-bstep { min-width: 26px; width: 26px; min-height: 14px; height: 14px; font-size: 9px; }
  .pb-bup { grid-column: 2; grid-row: 1; border-radius: 5px 5px 2px 2px; order: 0; }
  .pb-bdn { grid-column: 2; grid-row: 2; border-radius: 2px 2px 5px 5px; order: 0; }
  .pb-hist-btn { min-height: 32px; min-width: 32px; justify-self: end; }
  .pb-chip button, .pb-h button { min-height: 32px; }
  .pb-chk { min-height: 32px; }
  .pb-dlg-ov { align-items: center; }
  .pb-dlg { border-radius: 16px; }
  .pb-rm { left: auto; right: 1rem; }
}