/* RJ DTC Admin · Round 4 · Prices (/products/[offerId]/prices) · page.css (prefix pp-)
   On top of bp.css and the wizard-stepper family (.wz-bar, .wz-save, .wz-errs, .wz-cur, .wz-in). Values from tokens only. */

.pp-page{padding-bottom:var(--s-10)}
.pp-ph{align-items:flex-end}
.pp-pht{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.pp-offer{height:auto;min-height:var(--control-h);width:auto;min-width:340px;padding:var(--s-1) var(--s-3) var(--s-1) var(--s-1);text-align:left}
.pp-offer b{display:block;font-size:var(--text-body);font-weight:var(--w-semibold);line-height:1.25}
.pp-offer small{display:block;font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.pp-othumb{width:28px;height:36px;flex:none}
.pp-offers{min-width:380px;max-height:60vh;overflow-y:auto}
.pp-offers .mi{height:auto;padding-top:var(--s-1);padding-bottom:var(--s-1);gap:var(--s-2)}
.pp-offers .mi small{display:block;font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.pp-scope{margin-bottom:var(--s-4);align-items:center}
.pp-scope p{flex:1}

.pp-bar{gap:var(--s-5)}
.pp-ctl{display:flex;align-items:center;gap:var(--s-2)}
.pp-cl-l{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.pp-bar .seg .dot{width:6px;height:6px;margin-left:4px}
.pp-body{min-height:0}

/* the grid: cloth × way to sell */
.pp-gridwrap{border:1px solid hsl(var(--border));border-radius:var(--r-card);overflow:clip;background:hsl(var(--card))}
.pp-grid{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.pp-c0{width:300px}
.pp-grid thead th{position:sticky;top:calc(var(--topbar-h) + var(--bp-bar-h, 58px));z-index:2;background:hsl(var(--muted));text-align:left;vertical-align:top;
  padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border));font:var(--w-semibold) var(--text-micro)/1.2 var(--font-voice);color:hsl(var(--muted-foreground))}
.pp-grid thead th+th{border-left:1px solid hsl(var(--border))}
.pp-grid tbody th,.pp-grid td{padding:var(--s-3) var(--s-4);border-top:1px solid hsl(var(--border));vertical-align:top;text-align:left;font-weight:var(--w-regular)}
.pp-grid tbody tr:first-child th,.pp-grid tbody tr:first-child td{border-top:0}
.pp-grid td+td,.pp-grid th+td{border-left:1px solid hsl(var(--border))}
.pp-grid td.off,.pp-grid th.off{background:hsl(var(--muted)/.5)}
.pp-th{display:flex;gap:var(--s-2);align-items:flex-start}
.pp-th b{display:block;font-size:var(--text-small);color:hsl(var(--foreground));line-height:1.25}
.pp-th small{display:block;font-weight:var(--w-regular);font-size:var(--text-micro);margin-top:2px}
.pp-th small.pp-na{color:hsl(var(--warning))}
.pp-th button.switch{border:0;padding:0}
.pp-th .switch{margin-top:1px}
.pp-cloth{display:flex;gap:var(--s-3);align-items:flex-start}
.pp-cl{flex:1;min-width:0}
.pp-cl b{display:block;font-size:var(--text-body);font-weight:var(--w-semibold)}
.pp-comb{font-family:var(--font-code);font-size:var(--text-code);color:hsl(var(--muted-foreground));font-weight:var(--w-regular)}
.pp-cl small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:2px}
.pp-cl small.pp-live{font-size:var(--text-micro);font-variant-numeric:tabular-nums}
.pp-drift{margin-top:var(--s-2)}
.pp-more{flex:none;margin-top:2px}
.pp-in{max-width:180px;transition:border-color var(--motion-hover),box-shadow var(--motion-focus)}
.pp-in.is-dirty{border-color:hsl(var(--info));box-shadow:inset 3px 0 0 hsl(var(--info))}
.pp-in.err{border-color:hsl(var(--destructive));box-shadow:inset 3px 0 0 hsl(var(--destructive))}
.pp-use{border:0;background:transparent;padding:0;font:inherit;font-weight:var(--w-semibold);color:hsl(var(--primary));text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.pp-warn{color:hsl(var(--warning))}
.pp-unv{display:flex;align-items:center;gap:4px;color:hsl(var(--warning))}
.pp-legend{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-3);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.pp-key{width:12px;height:12px;border-radius:var(--r-chip);border:1px solid hsl(var(--input));margin-left:var(--s-3)}
.pp-key:first-child{margin-left:0}
.pp-key.is-dirty{border-color:hsl(var(--info));box-shadow:inset 3px 0 0 hsl(var(--info))}
.pp-key.err{border-color:hsl(var(--destructive))}
.pp-key.warn{border-color:hsl(var(--warning));background:hsl(var(--warning)/.12)}
.pp-sk{display:flex;flex-direction:column;gap:var(--s-2)}
.pp-sk .skel{height:84px;border-radius:var(--r-control)}
[data-state=saving] .pp-gridwrap{opacity:.6;pointer-events:none}

/* save bar */
.kit-d .pp-sbar{position:sticky;bottom:0;z-index:calc(var(--z-sticky) * 2);padding:var(--s-3) var(--s-6);background:hsl(var(--background)/.96);backdrop-filter:blur(8px);border-top:1px solid hsl(var(--border))}
body:has(.pp-sbar) .bp-proto-d{bottom:calc(var(--s-5) + 64px)}

/* dialogs and sheet */
.pp-dlg{width:min(var(--sheet-w-md),92%)}
.pp-dlg .ov-dg-b>p{color:hsl(var(--muted-foreground));margin-bottom:var(--s-3)}
.pp-cks{display:flex;flex-direction:column;gap:var(--s-3)}
.pp-ck{display:flex;gap:var(--s-3);align-items:flex-start;cursor:pointer}
.pp-ck .cb{margin-top:2px;flex:none}
.pp-ck b{display:block;font-size:var(--text-body);font-weight:var(--w-semibold)}
.pp-ck small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:2px;line-height:1.45}
.pp-dl{grid-template-columns:minmax(0,1fr) auto;gap:var(--s-3) var(--s-4)}
.pp-dl dt{color:hsl(var(--foreground))}
.pp-dl dt small{display:block;font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.pp-dl dd{font-weight:var(--w-semibold)}
.pp-receipt summary{cursor:pointer;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.pp-receipt code{display:block;margin-top:var(--s-2);font-size:var(--text-micro);color:hsl(var(--muted-foreground));line-height:1.5}
.pp-clsheet .ov-sh-f .r{display:flex;gap:var(--s-2);margin-left:auto}

/* ======================================== PHONE ======================================== */
.kit-m .pp-mtools{position:sticky;top:52px;z-index:calc(var(--z-sticky) * 2);background:hsl(var(--background));border-bottom:1px solid hsl(var(--border));padding:var(--s-2) var(--s-4) var(--s-3);display:flex;flex-direction:column;gap:var(--s-2)}
.kit-m .pp-mtools .seg{width:100%}
.kit-m .pp-mtools .seg button{flex:1}
.kit-m .pp-moffer{margin:0 var(--s-4) var(--s-3);width:calc(100% - var(--s-8));min-width:0}
.kit-m .pp-scope{margin:0 var(--s-4) var(--s-3)}
.kit-m .pp-body{padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}
.kit-m .pp-waysbox{border:1px solid hsl(var(--border));border-radius:var(--r-card);padding:var(--s-3) var(--s-4)}
.kit-m .pp-waysbox .lbl{margin-bottom:var(--s-2)}
.kit-m .pp-way{padding:var(--s-2) 0}
.kit-m .pp-way+.pp-way{border-top:1px solid hsl(var(--border))}
.kit-m .pp-way .pp-th b{font-size:var(--text-body)}
.kit-m .pp-way .pp-th small{font-size:var(--text-small)}
.kit-m .pp-mcard{border:1px solid hsl(var(--border));border-radius:var(--r-card);overflow:hidden;background:hsl(var(--card))}
.kit-m .pp-mh{padding:var(--s-3) var(--s-4);background:hsl(var(--muted)/.6);border-bottom:1px solid hsl(var(--border))}
.kit-m .pp-mrow{display:grid;grid-template-columns:110px minmax(0,1fr);gap:var(--s-3);align-items:start;padding:var(--s-3) var(--s-4)}
.kit-m .pp-mrow+.pp-mrow{border-top:1px solid hsl(var(--border))}
.kit-m .pp-mrow.off{background:hsl(var(--muted)/.4)}
.kit-m .pp-ml{font-size:var(--text-body);font-weight:var(--w-semibold);padding-top:var(--s-3)}
.kit-m .pp-in{max-width:none;height:var(--control-h-m)}
.kit-m .pp-ns{padding-top:var(--s-1)}
.kit-m .pp-legend{flex-wrap:wrap;row-gap:var(--s-1)}
.kit-m .pp-clsheet .ov-sh-f .r{display:grid;grid-template-columns:1fr 1fr;margin-left:0;width:100%}
.kit-m .pp-clsheet .ov-sh-f .r .btn{width:100%}
.kit-m .pp-actbar .wz-save{flex:1;min-width:0;font-size:var(--text-small)}
.kit-m .pp-actbar .btn{flex:none;width:auto;padding:0 var(--s-5)}
.kit-m .pp-actbar .btn-tertiary{display:none}