/* RJ DTC Admin · Round 4 · My Products (/products) · page.css (prefix mp-)
   On top of bp.css. Values from tokens only. Desktop .kit-d and phone .kit-m, no size queries. */

.mp-bar{row-gap:var(--s-3)}
.mp-frow{flex-basis:100%;display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.mp-fsels{display:contents}
.mp-flabel{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-small);font-weight:var(--w-semibold);color:hsl(var(--muted-foreground));margin-right:var(--s-1)}

/* gallery */
.kit-d .mp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.mp-card .cg-title a{color:inherit;text-decoration:none}
.mp-card .cg-title a:hover{text-decoration:underline;text-decoration-color:hsl(var(--foreground)/.3)}
.mp-chip{position:absolute;top:var(--s-2);left:var(--s-2);z-index:2}
.mp-card .cg-price .miss{color:hsl(var(--warning))}
.mp-tags{margin-top:var(--s-2)}
.mp-card .cg-ver,.mp-card .bp-flag{margin-top:var(--s-2)}
.mp-card .cg-actions .btn{flex:1}
.mp-card .cg-actions .btn svg{margin-right:2px}
.mp-tick{position:absolute;top:var(--s-2);right:var(--s-2);z-index:3;display:grid;place-items:center;width:var(--control-h-xs);height:var(--control-h-xs);
  border-radius:var(--r-control);background:hsl(var(--background)/.94);box-shadow:var(--e-1);opacity:0;transition:opacity var(--motion-hover)}
.mp-card:hover .mp-tick,.mp-card:focus-within .mp-tick,.mp-selecting .mp-tick,.mp-tick:has(.cb:checked){opacity:1}
.mp-selecting .mp-card{cursor:pointer}
.mp-card.is-sel{border-color:hsl(var(--primary));box-shadow:0 0 0 1px hsl(var(--primary)),var(--e-1)}
.mp-card.is-flash{animation:mp-flash 900ms var(--ease-standard)}
@keyframes mp-flash{0%{box-shadow:0 0 0 2px hsl(var(--ring)/.55),var(--e-1)}100%{box-shadow:var(--e-1)}}
@media (prefers-reduced-motion:reduce){.mp-card.is-flash{animation:none}}

/* bulk pill, fixed to the content column */
.bp .dt-bulk{position:fixed;bottom:var(--s-6);z-index:var(--z-toast)}
.kit-d .dt-bulk.mp-bulk{left:calc(50% + var(--sidebar-w) / 2)}

/* product sheet */
.mp-sheet .ov-sh-h .cg-tthumb{width:36px;height:48px}
.mp-status{display:flex;flex-direction:column;gap:var(--s-2)}
.mp-status .sf-alert{align-items:center}
.mp-status .sf-alert p{flex:1}
.mp-cloths{display:flex;flex-direction:column;border:1px solid hsl(var(--border));border-radius:var(--r-card);overflow:hidden}
.mp-clrow{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3)}
.mp-clrow+.mp-clrow{border-top:1px solid hsl(var(--border))}
.mp-clrow .grow{flex:1;min-width:0}
.mp-clrow b{display:block;font-size:var(--text-body)}
.mp-clrow small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.mp-clrow.off .bp-sw{opacity:.45}
.mp-clrow.off b{color:hsl(var(--muted-foreground))}
.mp-onoff{font-size:var(--text-small);color:hsl(var(--muted-foreground));width:24px;text-align:right}
.mp-cloths>.help{margin:0;padding:var(--s-2) var(--s-3);border-top:1px solid hsl(var(--border));background:hsl(var(--muted)/.4)}
.mp-avnote{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);margin-top:var(--s-2);font-size:var(--text-small)}

/* dialogs */
.mp-dlg{width:min(var(--sheet-w-md),92%)}
.mp-pulist,.mp-seclist,.mp-ds{display:flex;flex-direction:column;margin-top:var(--s-3);border:1px solid hsl(var(--border));border-radius:var(--r-card);overflow:hidden}
.mp-purow,.mp-secrow{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);cursor:pointer}
.mp-purow+.mp-purow,.mp-secrow+.mp-secrow,.mp-dsr+.mp-dsr{border-top:1px solid hsl(var(--border))}
.mp-purow .grow,.mp-secrow .grow{flex:1;min-width:0}
.mp-purow b{display:block;font-size:var(--text-body)}
.mp-purow small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.mp-purow:has(.cb:disabled){cursor:default;background:hsl(var(--muted)/.4)}
.mp-shown{font-size:var(--text-small);text-align:right;max-width:150px}
.mp-secrow .q{font-size:var(--text-small);font-variant-numeric:tabular-nums}
.mp-dsr{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-4)}
.mp-dsr .k{font-weight:var(--w-semibold);font-size:var(--text-body)}
.mp-dsr .v small{display:flex;align-items:center;gap:4px;font-size:var(--text-small);color:hsl(var(--warning));margin-top:2px}
.mp-dsr.warn{background:hsl(var(--warning)/.05)}
.mp-dsr .q{font-size:var(--text-small)}
[data-ds-msg]:not(:empty){margin-top:var(--s-3)}
.mp-dlg .ov-dg-b>p,.mp-pbody>p{color:hsl(var(--muted-foreground))}
.mp-dlg .ov-dg-b>p b{color:hsl(var(--foreground))}

/* ======================================== PHONE ======================================== */
.kit-m .mp-card .cg-actions .btn{height:40px}
.kit-m .mp-card .cg-actions .icon-btn{width:40px;height:40px;flex:none}
.kit-m .mp-card .cg-price span{display:block}
.kit-m .mp-tick{opacity:1;width:32px;height:32px}
.kit-m .bp-phone:not(.mp-selecting) .mp-tick{display:none}
.kit-m .mp-pf{padding:var(--s-3) var(--s-4) 0}
.kit-m .mp-pfc{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.kit-m .mp-pfc .cg-fchip{height:40px}
.kit-m .mp-sheet .ov-sh-f{flex-direction:column;align-items:stretch;gap:var(--s-2)}
.kit-m .mp-sheet .ov-sh-f .r{display:grid;grid-template-columns:1fr 1fr;margin-left:0}
.kit-m .mp-sheet .ov-sh-f .r .btn{width:100%}
.kit-m .mp-sheet .mp-pfull{display:flex;justify-content:space-between;align-items:center}
.kit-m .mp-dsr{grid-template-columns:minmax(0,1fr) auto}
.kit-m .mp-dsr .k{grid-column:1 / -1;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.kit-m .mp-shown{display:none}
.kit-m .mp-clrow{padding:var(--s-3)}