/* =====================================================================================
   RJ DTC Admin · Round 4 · brand shell pages (Pricing, Designs, Variants, Groups, Sync) · page.css  (prefix pg-)
   Shared verbatim by every page in this set (source: pricing/src/page.css).
   Load order: _kit tokens -> base -> data-table cloth + family -> app-shell -> overlays -> page-help ->
   status-feedback -> data-display -> form-controls -> wizard-stepper -> page.css.
   Only what turns kit specimens into a full-viewport page: sticky shell, fixed layers, page states and a
   few page layouts. Values come from tokens. Two dedicated compositions: .kit-d (/) and .kit-m (/m/).
   No size queries.
   ===================================================================================== */

.pg{background:hsl(var(--background))}
.pg a.btn{text-decoration:none}
[hidden]{display:none!important}
.q{color:hsl(var(--muted-foreground))}
.pg-m{font-variant-numeric:tabular-nums;white-space:nowrap}
.pg-mt{margin-top:var(--s-4)}
.pg-mt-s{margin-top:var(--s-2)}
.pg-mb{margin-bottom:var(--s-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- desktop shell: sidebar and top bar stay put ---------- */
.kit-d .pg-app{min-height:100vh;border-radius:0;box-shadow:none}
.kit-d .pg-side{position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.kit-d .pg-side::-webkit-scrollbar{display:none}
.pg-side .pg-sb-settings{margin-top:var(--s-2)}
.kit-d .pg-main{overflow:clip}
.pg-top{position:sticky;top:0;z-index:calc(var(--z-sticky) * 3)}
.pg-top .top-r{gap:var(--s-3)}
.pg-page{width:100%;max-width:var(--content-max);padding:var(--s-6) var(--s-6) var(--s-16)}
.pg-ph{margin-top:var(--s-5)}
.pg-ph .page-title{display:flex;align-items:center;gap:var(--s-3)}
.pg-ph .ph-r{align-self:flex-end}
.pg-page>.pg-back+.pg-ph,.pg-page>.pg-pointer+.pg-ph{margin-top:var(--s-3)}
.pg-page>.pg-ph:first-child{margin-top:0}
.pg-count{font:var(--w-medium) var(--text-small)/1 var(--font-ui);color:hsl(var(--muted-foreground));background:hsl(var(--muted));border-radius:var(--r-pill);padding:var(--s-1) var(--s-2)}
.pg-eyebrow{font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-bottom:var(--s-1)}
.pg-eyebrow .code{font-size:inherit}
.pg-idline{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-3);color:hsl(var(--muted-foreground));font-size:var(--text-body)}
.pg-back{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--text-small);color:hsl(var(--muted-foreground));text-decoration:none}
.pg-back:hover{color:hsl(var(--foreground))}
.pg-note{font-size:var(--text-small);color:hsl(var(--muted-foreground));align-self:center}
.pg-notice .act{align-items:center}
.pg-fine{display:flex;gap:var(--s-2);align-items:flex-start;font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:var(--s-3)}
.pg-fine svg{flex:none;margin-top:1px}
.pg-pad{padding:0 var(--s-4) var(--s-4)}
.pg-pointer{display:flex;gap:var(--s-2);align-items:flex-start;padding:var(--s-3) var(--s-4);border:1px solid hsl(var(--border));background:hsl(var(--muted)/.6);
  border-radius:var(--r-card);font-size:var(--text-body);color:hsl(var(--foreground))}
.pg-pointer svg{flex:none;margin-top:2px;color:hsl(var(--muted-foreground))}
.pg-pointer a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:hsl(var(--foreground)/.35)}
.pg-h2{font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-voice);letter-spacing:var(--tr-section)}
.pg-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card);padding:var(--s-5)}
.pg-dim{opacity:.55;pointer-events:none}

/* tables */
.pg-tbl .dt{table-layout:fixed}
.pg-tbl .dt th{top:var(--topbar-h)}
.pg-tbl .num,.dt .num{text-align:right}
.pg-thsub{display:block;font:var(--w-regular) var(--text-micro)/1.1 var(--font-ui);color:hsl(var(--muted-foreground));text-transform:none;letter-spacing:0}
.pg-sku{font-size:var(--text-small)}
.pg-tblh{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.pg-tblh .r{margin-left:auto}
.pg-tdmsg{padding:var(--s-6) var(--s-4);text-align:center;color:hsl(var(--muted-foreground));font-size:var(--text-body)}
.pg-tdmsg.l{text-align:left;padding:var(--s-1) 0}
.pg-delta{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:var(--w-medium)}
.pg-delta.up{color:hsl(var(--success))}
.pg-delta.dn{color:hsl(var(--destructive))}
.pg-stock{font-variant-numeric:tabular-nums;font-weight:var(--w-medium)}
.pg-stock.low,.pg-stock.oos{color:hsl(var(--warning))}
.pg-skr td{height:var(--row)}
.pg-count-line{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-4);font-size:var(--text-small);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.pg-count-line .r{margin-left:auto}
.pg-subnav{margin-top:var(--s-4)}
.pg-subnav .dt-view{text-decoration:none;color:hsl(var(--muted-foreground))}
.pg-subnav .dt-view.on{color:hsl(var(--foreground))}
.pg-bar{position:sticky;top:var(--topbar-h);z-index:calc(var(--z-sticky) * 2);display:flex;align-items:center;gap:var(--s-3);
  margin:0 calc(var(--s-6) * -1);padding:var(--s-3) var(--s-6);background:hsl(var(--background));border-bottom:1px solid hsl(var(--border))}
.pg-bar+*{margin-top:var(--s-4)}
.pg-bar .pg-search{width:320px}
.pg-search kbd{margin-left:auto}
.pg-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;color:inherit}
.pg-nr{padding:var(--s-8) var(--s-4)}
.pg-tbl .dt-state{white-space:nowrap}
.pg-in{border-top:0}
.pg-in th{position:static}

/* empty / error page states */
.pg-empty{border:1px dashed hsl(var(--secondary-border));border-radius:var(--r-card);margin-top:var(--s-4);padding:var(--s-10) var(--s-6)}
.pg-empty.err{border-style:solid;border-color:hsl(var(--destructive)/.3);background:hsl(var(--destructive)/.03)}
.pg-empty p{max-width:58ch}
.pg-errmeta{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.pg-errmeta code{font-size:var(--text-small)}
.pg-loadline{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-body);color:hsl(var(--muted-foreground))}
.pg-prog{height:6px;border-radius:var(--r-pill);background:hsl(var(--muted));overflow:hidden;margin-top:var(--s-3)}
.pg-prog i{display:block;height:100%;background:hsl(var(--primary));border-radius:inherit}
.pg-page>.sf-alert,.pg-mbody>.sf-alert{margin-top:var(--s-4)}
.pg-page>.sf-alert:first-child,.pg-mbody>.sf-alert:first-child{margin-top:0}

/* split: main column + rail (detail pages) */
.pg-split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s-5);align-items:start;margin-top:var(--s-4)}
.pg-col,.pg-rail{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.pg-raillink{margin-top:var(--s-3);padding-left:0}
.pg-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.pg-fig{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-3) var(--s-4);border:1px solid hsl(var(--border));border-radius:var(--r-card)}
.pg-fig.on{border-color:hsl(var(--primary)/.45);background:hsl(var(--accent)/.6)}
.pg-fig-k{font:var(--w-medium) var(--text-small)/1.2 var(--font-ui);color:hsl(var(--muted-foreground))}
.pg-fig-k em{font-style:normal;font-weight:var(--w-regular)}
.pg-fig b{font:var(--w-semibold) var(--text-kpi)/1.1 var(--font-ui);letter-spacing:-.02em}
.pg-fig small{display:flex;align-items:center;gap:var(--s-1);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.pg-fig small.pg-delta{color:hsl(var(--success))}
.pg-sk-lg{height:24px!important;margin-top:var(--s-2)}
.pg-sub{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:2px}
.pg-offers{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-2)}
.pg-offer{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:var(--s-3);padding:var(--s-2) var(--s-3);border-radius:var(--r-control);color:inherit;text-decoration:none}
.pg-offer:hover{background:hsl(var(--muted))}
.pg-offer b{font-weight:var(--w-medium);font-size:var(--text-body)}
.pg-offer span:not(.chip){font-size:var(--text-small);color:hsl(var(--muted-foreground));grid-row:2}
.pg-offer .chip{grid-column:2;grid-row:1 / span 2;align-self:center}

/* KPI rows */
.pg-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.pg-kpis3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-kpi{cursor:default}
.pg-kpi .dd-kpi-v.pg-kv-s{font-size:var(--text-section);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-kpi.ok .dd-kpi-v{color:hsl(var(--success))}
.pg-kpi.bad .dd-kpi-v,.pg-kpi.warn .dd-kpi-v{color:hsl(var(--warning))}
.pg-ctl{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4)}
.pg-ctl+.pg-ctl{border-top:1px solid hsl(var(--border))}
.pg-ctl b{display:block;font-weight:var(--w-semibold)}
.pg-ctl small{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.pg-ctl-r{margin-left:auto;display:flex;align-items:center;gap:var(--s-3)}
.pg-sw-lg{transform:scale(1.15)}
.pg-gchip{display:inline-flex;align-items:center;gap:var(--s-2);color:inherit;text-decoration:none;font-weight:var(--w-medium)}

/* bulk import */
.pg-steps{margin:0}
.pg-steps .wz-sb{cursor:default}
.pg-batch{display:flex;align-items:center;gap:var(--s-2);margin:var(--s-5) 0 var(--s-3);font-size:var(--text-body);color:hsl(var(--muted-foreground))}
.pg-batch b{color:hsl(var(--foreground));font-weight:var(--w-medium)}
.pg-err td{background:hsl(var(--destructive)/.035)}
.pg-rowerr{font-size:var(--text-small);color:hsl(var(--destructive));margin-top:2px;line-height:1.35}
.pg-savebar{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-4);padding:var(--s-3) var(--s-4);border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card));box-shadow:var(--e-1)}
.kit-d .pg-savebar{position:sticky;bottom:var(--s-4)}
.pg-savebar.in{position:static;box-shadow:none;border:0;padding:var(--s-4) 0 0;margin-top:var(--s-4);border-top:1px solid hsl(var(--border));border-radius:0}
.pg-savebar .r{margin-left:auto;display:flex;gap:var(--s-2)}
.pg-sb-msg{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-body)}
.pg-sb-msg svg{color:hsl(var(--warning));flex:none}
.pg-drop{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-10) var(--s-6);border:1.5px dashed hsl(var(--secondary-border));border-radius:var(--r-card);text-align:center;background:hsl(var(--muted)/.4)}
.pg-drop b{font:var(--w-semibold) var(--text-section)/1.3 var(--font-voice)}
.pg-drop small{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.pg-drop-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-card);background:hsl(var(--background));border:1px solid hsl(var(--border));color:hsl(var(--muted-foreground))}
.pg-browse{color:hsl(var(--primary));text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-weight:var(--w-medium)}
.pg-receipt{max-width:560px}

/* design pricing */
.pg-filters{display:flex;align-items:flex-end;gap:var(--s-5)}
.pg-filters .fc-f{margin:0}
.pg-f-gt{width:460px}
.pg-sel .fc-trigger{width:100%;justify-content:flex-start;gap:var(--s-2)}
.pg-sel .grow{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-selsub{white-space:nowrap}
.pg-sel .fc-pop{min-width:100%}
.pg-cats{display:flex;flex-direction:column;gap:var(--s-4);margin-top:var(--s-5)}
.pg-cat{overflow:hidden}
.pg-cat.is-dirty{border-color:hsl(var(--primary)/.4)}
.pg-dpt{table-layout:fixed}
.pg-dpt th{position:static}
.pg-dpt td{vertical-align:top;padding-top:var(--s-3);padding-bottom:var(--s-3)}
.pg-dpt tr.is-dirty td{background:hsl(var(--accent)/.5)}
.pg-money{height:var(--control-h-sm);max-width:200px}
.pg-money input{text-align:right;font-variant-numeric:tabular-nums}
.pg-money.pg-dirty{border-color:hsl(var(--info))}
.pg-ws{font-family:var(--font-code);font-size:var(--text-small);font-variant-numeric:tabular-nums}
.pg-ws.none{color:hsl(var(--muted-foreground))}
.pg-unsaved{display:inline-flex;align-items:center;gap:var(--s-1);margin-left:var(--s-2);font:var(--w-medium) var(--text-micro)/1 var(--font-ui);color:hsl(var(--info))}
.pg-unsaved::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pg-floor{margin-top:var(--s-2);font-size:var(--text-small);max-width:260px}
.pg-floor p{display:flex;gap:var(--s-1);align-items:flex-start;color:hsl(var(--destructive))}
.pg-floor p svg{flex:none;margin-top:1px}
.pg-floor .fc-ck{margin-top:var(--s-1)}
.pg-shake{animation:pg-shake 360ms var(--ease-standard)}
@keyframes pg-shake{0%,100%{transform:none}30%{transform:translateX(-3px)}60%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.pg-shake{animation:none}}

/* attach sheet */
.pg-attach{display:flex;flex-direction:column}
.pg-attach-b{flex:1;min-height:0;overflow-y:auto}
.pg-acols{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s-5)}
.pg-afacets{display:flex;flex-direction:column;gap:var(--s-1)}
.pg-afacets details{border-bottom:1px solid hsl(var(--border));padding:var(--s-2) 0}
.pg-afacets summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;font-size:var(--text-body);font-weight:var(--w-medium)}
.pg-afacets summary::-webkit-details-marker{display:none}
.pg-afacets .fc-ck{margin-top:var(--s-2)}
.pg-afacets .btn{margin-top:var(--s-3)}
.pg-asearch{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3)}
.pg-asearch .field{flex:1}
.pg-asearch input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit}
.pg-acount{font-size:var(--text-small);white-space:nowrap}
.pg-agrp{display:flex;justify-content:space-between;padding:var(--s-3) var(--s-2) var(--s-1);font:var(--w-semibold) var(--text-small)/1 var(--font-voice);color:hsl(var(--muted-foreground))}
.pg-arow{display:grid;grid-template-columns:auto 28px 110px minmax(0,1fr) auto auto;align-items:center;gap:var(--s-3);padding:var(--s-2);border-radius:var(--r-control);cursor:pointer;font-size:var(--text-body)}
.pg-arow:hover{background:hsl(var(--muted))}
.pg-arow .dt-sw{width:28px;height:28px;border-radius:var(--r-chip)}
.pg-arow-m{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* groups: two-pane */
.pg-two{display:grid;grid-template-columns:360px minmax(0,1fr);border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card));min-height:520px;overflow:hidden}
.pg-two-l{border-right:1px solid hsl(var(--border));padding:var(--s-3);display:flex;flex-direction:column;gap:var(--s-3)}
.pg-two-r{padding:var(--s-6)}
.pg-glist{display:flex;flex-direction:column;gap:2px}
.pg-gli{display:flex;align-items:center;gap:var(--s-3);width:100%;padding:var(--s-2) var(--s-3);border-radius:var(--r-control);text-align:left;color:inherit;background:transparent;border:0;cursor:pointer;min-height:56px}
.pg-gli:hover{background:hsl(var(--muted))}
.pg-gli.on{background:hsl(var(--accent));box-shadow:inset 2px 0 0 hsl(var(--primary))}
.pg-gli-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pg-gli-b b{font-weight:var(--w-semibold);font-size:var(--text-body)}
.pg-gli-b small{font-size:var(--text-small);color:hsl(var(--muted-foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-gn{font:var(--w-medium) var(--text-small)/1 var(--font-ui);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.pg-gsw{flex:none;width:28px;height:28px;border-radius:var(--r-chip);box-shadow:inset 0 0 0 1px hsl(var(--foreground)/.12)}
.pg-gsw.lg{width:48px;height:48px;border-radius:var(--r-card)}
.pg-gsw.sm{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:var(--s-2)}
.pg-gd-h{display:flex;align-items:center;gap:var(--s-4)}
.pg-gd-h .q{font-size:var(--text-small)}
.pg-gd-desc{margin-top:var(--s-3);color:hsl(var(--muted-foreground))}
.pg-gdl{margin-top:var(--s-5);max-width:480px}
.pg-gd-sec{display:flex;gap:var(--s-2);align-items:baseline;margin-top:var(--s-6);padding-bottom:var(--s-2);border-bottom:1px solid hsl(var(--border))}
.pg-mappedl{display:flex;flex-direction:column}
.pg-mapped{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) 0;border-bottom:1px solid hsl(var(--border));color:inherit;text-decoration:none}
.pg-mapped>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}
.pg-mapped b{font-weight:var(--w-medium)}
.pg-mapped small{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.pg-mapped:hover b{text-decoration:underline;text-decoration-color:hsl(var(--foreground)/.3)}

/* sync */
.pg-trigs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
.pg-trig{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-3);border:1px solid hsl(var(--border));border-radius:var(--r-card)}
.pg-trig b{display:block;font-weight:var(--w-semibold);font-size:var(--text-body)}
.pg-trig small{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.pg-trig-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-control);background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.pg-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:var(--s-4);align-items:start}
.pg-grid2 .dd-panel{overflow:hidden}

/* new SKU form */
.pg-formcard{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card);padding:var(--s-6) var(--s-8);margin-top:var(--s-5);max-width:960px}
.pg-form1{grid-template-columns:minmax(0,1fr)}
.pg-formcard .fc-savebar{margin-top:var(--s-6)}
.fc-savebar .r>span{display:contents}

/* ---------- fixed overlay layers ---------- */
.pg-layer{position:fixed;inset:0;z-index:var(--z-scrim);pointer-events:none;overflow:hidden}
.pg-layer>.k-sheet,.pg-layer>.k-dialog,.pg-layer.open>.k-scrim{pointer-events:auto}
.kit-d .pg-help-layer{left:var(--sidebar-w)}
.kit-d .pg-help-layer>.k-sheet,.kit-d .pg-help-layer>.k-scrim{top:var(--topbar-h)}
.pg-help-layer .k-sheet{display:flex;flex-direction:column}
.pg-cmd-layer>.k-dialog{top:14vh;width:auto;background:transparent;box-shadow:none;border-radius:var(--r-frame);overflow:visible;transform:translate(-50%,var(--pop-shift)) scale(.985)}
.pg-cmd-layer.open>.k-dialog{transform:translate(-50%,0)}
.pg-cmd-field{flex:1;min-width:0;border:0;outline:0;background:transparent;font:var(--w-regular) var(--text-read)/1 var(--font-ui);color:hsl(var(--foreground))}
.pg-cmd-field::placeholder{color:hsl(var(--muted-foreground))}
.pg .dt-bulk{position:fixed;bottom:var(--s-6);z-index:var(--z-toast)}
.kit-d .dt-bulk.pg-bulk{left:calc(50% + var(--sidebar-w) / 2)}
.pg-toasts{position:fixed;z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--toast-gap);pointer-events:none}
.kit-d .pg-toasts{left:calc(var(--sidebar-w) + var(--s-6));bottom:var(--s-6);width:360px}
.pg-toasts .toast{pointer-events:auto}

/* preview-state switcher (prototype only, not product UI) */
.pg-proto{position:fixed;z-index:var(--z-toast);display:flex;align-items:center;gap:var(--s-2);transition:opacity var(--motion-hover)}
.kit-d .pg-proto{right:var(--s-5);bottom:var(--s-5)}
.pg-proto>.k-anchor>button{display:inline-flex;align-items:center;gap:var(--s-2);height:var(--control-h-sm);padding:0 var(--s-3);border-radius:var(--r-pill);
  border:1px dashed hsl(var(--input));background:hsl(var(--background)/.94);backdrop-filter:blur(6px);box-shadow:var(--e-pop);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.pg-proto>.k-anchor>button b{font-weight:var(--w-semibold);color:hsl(var(--foreground))}
body:has(.pg-layer.open) .pg-proto{opacity:0;pointer-events:none}

/* ======================================== PHONE ======================================== */
.kit-m .pg-phone{min-height:100vh;display:flex;flex-direction:column;background:hsl(var(--background))}
.kit-m .pg-phone .p-bar{position:sticky;top:0;z-index:calc(var(--z-sticky) * 3)}
.pg-pcrumb{display:flex;align-items:center;gap:var(--s-2)}
.pg-pcrumb>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-pcrumb .pg-proto{position:static}
.pg-pcrumb .pg-proto>.k-anchor>button{box-shadow:none;height:28px;padding:0 10px;font-size:var(--text-micro)}
.kit-m .p-head p .code{font-size:inherit}
.kit-m .pg-headbtn{margin-left:auto;width:var(--control-h-m);height:var(--control-h-m)}
.kit-m .pg-subnav{margin:0;padding:0 var(--s-4);gap:var(--s-4);overflow-x:auto;scrollbar-width:none}
.kit-m .pg-subnav .dt-view{height:44px;white-space:nowrap}
.kit-m .pg-mbody{flex:1;padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.kit-m .pg-mbody>*{min-width:0}
.kit-m .pg-mbody>.sf-alert{margin:0}
.kit-m .pg-mh{font:var(--w-semibold) var(--text-card)/1.2 var(--font-voice);margin-top:var(--s-3)}
.kit-m .pg-mlist,.kit-m .pg-mlist2{margin:0 calc(var(--s-4) * -1);border-top:1px solid hsl(var(--border))}
.kit-m .pg-mli{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border));color:inherit;text-decoration:none;min-height:64px}
.kit-m .pg-mli-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.kit-m .pg-mli-b b{font-weight:var(--w-semibold);font-size:var(--text-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kit-m .pg-mli-s{font-size:var(--text-small);color:hsl(var(--muted-foreground));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kit-m .pg-mli-s .code{font-size:inherit}
.kit-m .pg-mli-f{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-micro);margin-top:2px}
.kit-m .pg-mli-f .code{font-size:var(--text-micro)}
.kit-m .pg-mli-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.kit-m .pg-mli-r small{font-size:var(--text-micro)}
.kit-m .pg-msw{width:40px;height:40px;border-radius:var(--r-control);flex:none}
.kit-m .pg-mli.pg-err{background:hsl(var(--destructive)/.035)}
.kit-m .pg-msearch{width:100%;height:var(--control-h-m)}
.kit-m .pg-mchips{margin:0 calc(var(--s-4) * -1);overflow-x:auto;scrollbar-width:none;padding:0 var(--s-4)}
.kit-m .pg-mchips .dt-chips{flex-wrap:nowrap;width:max-content}
.kit-m .pg-mchips .dt-fchip{height:36px}
.kit-m .pg-vli{padding:var(--s-3) var(--s-4)}
.kit-m .pg-vli .dt-li-s{flex-wrap:wrap}
.kit-m .pg-vli .dt-li-s .q{font-size:var(--text-micro)}
.kit-m .pg-count-line{justify-content:center;margin-top:var(--s-3)}
.kit-m .pg-empty{margin-top:0;padding:var(--s-8) var(--s-4)}
.kit-m .pg-mstep{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.kit-m .pg-mstep b{color:hsl(var(--foreground))}
.kit-m .pg-kpis.m,.kit-m .pg-kpis3.m{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
.kit-m .pg-kpis3.m{grid-template-columns:repeat(3,minmax(0,1fr))}
.kit-m .pg-kpis.m .dd-kpi,.kit-m .pg-kpis3.m .dd-kpi{padding:var(--s-3)}
.kit-m .pg-kpis .dd-kpi-v{font-size:22px}
.kit-m .pg-kpis .dd-kpi-v.pg-kv-s{font-size:var(--text-card)}
.kit-m .pg-figs{grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
.kit-m .pg-fig{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:var(--s-3)}
.kit-m .pg-fig b{font-size:22px}
.kit-m .pg-fig small{flex-basis:100%}
.kit-m .pg-drop{padding:var(--s-8) var(--s-4)}
.kit-m .pg-trigs{grid-template-columns:repeat(2,minmax(0,1fr))}
.kit-m .pg-batch{margin:var(--s-1) 0 0}
.kit-m .pg-glist.m{margin:var(--s-2) calc(var(--s-4) * -1) 0;border-top:1px solid hsl(var(--border))}
.kit-m .pg-glist.m .pg-gli{border-radius:0;border-bottom:1px solid hsl(var(--border));padding:var(--s-3) var(--s-4);min-height:64px}
.kit-m .pg-mform{display:flex;flex-direction:column;gap:var(--s-4)}
.kit-m .pg-cat .dd-panel-h{flex-wrap:wrap}
.kit-m .pg-dplist{display:flex;flex-direction:column}
.kit-m .pg-dprow{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:var(--s-2) var(--s-3);align-items:center;padding:var(--s-3) var(--s-4);border-top:1px solid hsl(var(--border))}
.kit-m .pg-dprow:first-child{border-top:0}
.kit-m .pg-dprow.is-dirty{background:hsl(var(--accent)/.5)}
.kit-m .pg-dprow-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.kit-m .pg-dprow-b b{font-weight:var(--w-medium)}
.kit-m .pg-dprow-b small{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.kit-m .pg-dprow-b .pg-unsaved{margin:2px 0 0}
.kit-m .pg-dprow .pg-money{height:var(--control-h-m);max-width:none}
.kit-m .pg-dprow .pg-floor{grid-column:1 / -1;max-width:none}
.kit-m .pg-offers{padding:var(--s-1)}
.kit-m .pg-ctl{padding:var(--s-3) var(--s-4)}
.kit-m .pg-idline{font-size:var(--text-small)}
.kit-m .pg-pieces button{white-space:nowrap}

/* phone: the one primary action sits at the bottom, in thumb reach */
.kit-m .pg-actbar{position:sticky;bottom:var(--tabbar-h);z-index:calc(var(--z-sticky) * 2);display:flex;gap:var(--s-2);align-items:center;
  padding:var(--s-3) var(--s-4);background:hsl(var(--background)/.96);backdrop-filter:blur(8px);border-top:1px solid hsl(var(--border))}
.kit-m .pg-actbar .btn{flex:1;height:var(--control-h-m-lg);font-size:var(--text-btn-lg)}
.kit-m .pg-actbar .btn-secondary{flex:0 1 auto}
.kit-m .pg-actw{display:flex;flex:1;gap:var(--s-2)}
.kit-m .tabbar{bottom:0}
.kit-m .pg-layer>.k-sheet.k-bottom{display:flex;flex-direction:column}
.kit-m .pg-sheet-h{display:flex;align-items:center;gap:var(--s-2);min-height:52px;padding:0 var(--s-2) 0 var(--s-4);border-bottom:1px solid hsl(var(--border));flex:none}
.kit-m .pg-sheet-h b{flex:1;font:var(--w-semibold) var(--text-section)/1.2 var(--font-voice)}
.kit-m .pg-sheet-b{flex:1;min-height:0;overflow-y:auto;padding:var(--s-4)}
.kit-m .pg-sheet-b .pg-gdl{margin-top:var(--s-4)}
.kit-m .pg-cmd-sheet .sh-cmd{width:100%;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;height:100%}
.kit-m .pg-cmd-sheet .sh-pop-l{max-height:none;flex:1}
.kit-m .pg-toasts{left:var(--s-3);right:var(--s-3);bottom:calc(var(--tabbar-h) + var(--control-h-m-lg) + var(--s-8))}
.kit-m .pg-help-layer .ph-d-body{padding:0 var(--s-4) var(--s-5)}
.kit-m .pg-help-layer .ph-d-head{padding:var(--s-2) var(--s-2) var(--s-3) var(--s-4)}
.kit-m .pg-alist .pg-arow{grid-template-columns:auto 28px minmax(0,1fr) auto;min-height:52px}
.kit-m .pg-alist .pg-arow .q,.kit-m .pg-alist .pg-arow .pg-arow-m{display:none}
.kit-m .pg-attach-b{padding:var(--s-3) var(--s-4)}
.kit-m .ov-sh-f .r{display:flex;gap:var(--s-2);margin-left:auto}

/* product cell: the variant name reads as words, not a handle */
.pg .dt-prod{min-width:0}
.pg .dt-prod>span:last-child{min-width:0;display:flex;flex-direction:column}
.pg .dt-prod .dt-t1,.pg .dt-prod .dt-t2{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg .dt-prod .dt-t2{font-family:var(--font-ui);font-size:var(--text-small)}
.pg .dt-cloth{min-width:0}
.pg .dt-cloth>span:last-child{min-width:0;overflow:hidden}
.pg .dt-cloth small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-side>*{flex-shrink:0}
.pg-dpt td:not(:last-child){padding-top:calc(var(--s-3) + 6px)}
.kit-m .pg-vli .dt-li-m{font-family:var(--font-ui)}
.pg-stack{display:flex;flex-direction:column;gap:var(--s-4)}
.pg-stack .dd-panel{overflow:hidden}
.pg-stack .dt{table-layout:auto}
.kit-m .pg-cat .dd-panel-h{flex-wrap:nowrap}
.kit-m .pg-cat .dd-panel-h .dd-meta{display:none}
.kit-m .pg-mbody .dd-panel+.dd-panel{margin-top:var(--s-3)}