/* =====================================================================================
   RJ DTC Admin · Round 3 · Global Store product editor · page.css   (prefix: ge-)
   Page composition only. Every control comes from the Round 2 kit (_kit/, a verbatim mirror):
   wizard-stepper (wz-), form-controls (fc-), cards-gallery (cg-), overlays (ov-), page-help (ph-),
   status-feedback (sf-). Values come from tokens.css only. Desktop = .kit-d, phone = .kit-m;
   no width media query anywhere (scripts/check-surface-pair.py).
   ===================================================================================== */

/* Archivo voice on this page's own title-like classes: normal width, never tracked out */
.ge-h2,.ge-h3,.ge-h4,.ge-strip b,.ge-pk-n,.ge-sk,.ge-prev-h,.ge-mtitle b,.ge-dstat b,.ge-side-empty b,.ge-serp-t{
  font-family:var(--font-voice);font-stretch:var(--font-stretch-title);font-variation-settings:normal;letter-spacing:0}
.ge-h2{font-size:var(--text-section);font-weight:var(--w-semibold);line-height:var(--lh-section)}
.ge-h3{font-size:var(--text-card);font-weight:var(--w-semibold);line-height:var(--lh-card)}
.ge-h4{font-size:var(--text-card);font-weight:var(--w-semibold)}
.ge-small{font-size:var(--text-small)}
.ge .q{color:hsl(var(--muted-foreground))}

/* ---------- review strip (presentation chrome above the app; not product UI) ---------- */
body.ge{background:hsl(var(--background));overflow:hidden}
.ge-strip{height:var(--control-h-m);display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-4);border-bottom:1px solid hsl(var(--border));
  background:hsl(var(--canvas));font-size:var(--text-small)}
.ge-strip b{font-size:var(--text-card);font-weight:var(--w-semibold)}
.ge-strip .seg{margin-left:var(--s-3)}
.ge-strip-r{margin-left:auto;font-size:var(--text-small);color:hsl(var(--foreground))}

/* ---------- desktop shell: full-height app, the editor column scrolls, the action bar stays ---------- */
.ge-app{height:calc(100vh - var(--control-h-m));min-height:0}
.ge-app .sidebar{overflow:auto}
.ge-app .sb-item{text-decoration:none;color:inherit}
.ge-app .crumbs a{color:hsl(var(--muted-foreground));text-decoration:none}
.ge-app .crumbs a:hover{color:hsl(var(--foreground));text-decoration:underline}
.ge-view{flex:1;min-height:0;display:flex;flex-direction:column}
.ge-block{display:none;flex:1;min-height:0;flex-direction:column}
.ge-block.on{display:flex}
.ge-block .wz-ph{padding:var(--s-4) var(--s-6)}
.ge-ed{flex:1;min-height:0;display:grid;grid-template-columns:calc(var(--sidebar-w) + var(--s-8)) minmax(0,1fr);border-top:1px solid hsl(var(--border))}
.ge-rail{min-height:0;overflow:auto;padding:var(--s-5) var(--s-3);border-right:1px solid hsl(var(--border));background:hsl(var(--muted)/.35);
  display:flex;flex-direction:column;gap:var(--s-5)}
.ge-rail .wz-rh{padding-bottom:0}
.ge-rail .wz-ri[aria-disabled=true]{pointer-events:none}
.ge-col{min-height:0;overflow:auto;display:flex;flex-direction:column;background:hsl(var(--muted)/.2)}
.ge-in{flex:1;padding:var(--s-6) var(--s-8) var(--s-8)}
.ge-in .wz-stage{max-width:var(--content-max)}
.ge-head{margin-bottom:var(--s-5)}
.ge-flow{display:flex;flex-direction:column;gap:var(--s-4)}

/* content blocks inside a step */
.ge-blk{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card);padding:var(--s-5)}
.ge-blk.flush{padding:0;overflow:hidden}
.ge-blk-h{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-4)}
.ge-blk-h.pad{padding:var(--s-4) var(--s-5);margin:0;border-bottom:1px solid hsl(var(--border))}
.ge-blk-h .q{font-size:var(--text-small)}
.ge-blk-h .r{margin-left:auto;display:flex;gap:var(--s-2);align-items:center}
.ge-blk-h .r.q{display:block}
.ge-acts{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.ge-acts.end{justify-content:flex-end;margin-top:var(--s-4)}
.ge-sp{height:var(--s-3)}

/* step 1 · the chosen cloth: the swatch is the one big moment on the page */
.ge-cloth{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s-6)}
.ge-swatch{display:block;width:100%;aspect-ratio:4/5;border-radius:var(--r-card);box-shadow:inset 0 0 0 1px hsl(var(--foreground)/.1),var(--e-1)}
.ge-cloth-h{display:flex;align-items:flex-start;gap:var(--s-4);padding-bottom:var(--s-4);margin-bottom:var(--s-4);border-bottom:1px solid hsl(var(--border))}
.ge-cloth-h .ge-h3{font-size:var(--text-section);margin-top:2px}
.ge-cloth-h .q{font-size:var(--text-small);margin-top:2px}
.ge-cloth-h .ge-acts{margin-left:auto}
.ge-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3) var(--s-6)}
.ge-dl dt{font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.ge-dl dd{font-size:var(--text-body)}
.ge-side-empty{align-items:flex-start;justify-content:center;color:hsl(var(--muted-foreground));font-size:var(--text-small)}
.ge-side-empty b{color:hsl(var(--foreground));font-size:var(--text-card);font-weight:var(--w-semibold)}
.ge-side-ic{width:40px;height:40px;border-radius:var(--r-card);display:grid;place-items:center;background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.fc-cp-tbl tr[aria-selected]{cursor:pointer}

/* step 2 · siblings */
.ge-sibs{display:flex;gap:var(--s-2);flex-wrap:wrap}
.ge-sib{display:inline-flex;align-items:center;gap:var(--s-2);height:var(--control-h-sm);padding:0 var(--s-3) 0 var(--s-1);border:1px solid hsl(var(--border));
  border-radius:var(--r-control);font-size:var(--text-small);background:hsl(var(--background))}
.ge-sib .fc-sw8{width:24px;height:24px}
.ge-srs{border:1px solid hsl(var(--border));border-radius:var(--r-card);overflow:hidden}
.ge-sr{display:flex;align-items:center;gap:var(--s-3);min-height:var(--row);padding:var(--s-2) var(--s-4);cursor:pointer;transition:background-color var(--motion-hover)}
.ge-sr+.ge-sr{border-top:1px solid hsl(var(--border))}
.ge-sr:hover{background:hsl(var(--muted)/.6)}
.ge-sr .grow{flex:1;min-width:0}
.ge-sr.oos .code,.ge-sr.oos .grow{color:hsl(var(--muted-foreground))}

/* step 3 · specs */
.ge-spec{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:var(--s-4);align-items:center;min-height:56px;padding:var(--s-2) var(--s-5)}
.ge-spec+.ge-spec{border-top:1px solid hsl(var(--border))}
.ge-sk{font-size:var(--text-card);font-weight:var(--w-semibold)}
.ge-svw{display:flex;align-items:center;gap:var(--s-3);min-width:0;flex-wrap:wrap}
.ge-svw .field{max-width:320px}
.ge-svw .help{margin:0}
.ge-src{font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.ge-sa{display:flex;align-items:center;gap:var(--s-2)}

/* step 4 · product form */
.ge-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-6)}
.ge-form.one{grid-template-columns:minmax(0,1fr);max-width:720px}
.ge-full{grid-column:1 / -1}
.ge-form .help{margin-top:var(--s-1)}

/* step 5 · design source picks */
.ge-dhead{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr) auto;gap:var(--s-6);align-items:end}
.ge-dstat{display:flex;flex-direction:column;gap:2px;padding-bottom:var(--s-2);font-size:var(--text-small)}
.ge-dstat b{font-size:var(--text-card);font-weight:var(--w-semibold)}
.ge-pick{display:grid;grid-template-columns:150px minmax(0,1fr) 220px;gap:var(--s-4);align-items:center;min-height:56px;padding:var(--s-2) var(--s-5)}
.ge-pick+.ge-pick{border-top:1px solid hsl(var(--border))}
.ge-pk-n{font-size:var(--text-card);font-weight:var(--w-semibold)}
.ge-opts{display:flex;gap:var(--s-2);flex-wrap:wrap}
.ge-opt{display:inline-flex;align-items:center;height:var(--control-h-xs);padding:0 var(--s-3);border:1px solid hsl(var(--border));border-radius:var(--r-control);
  font-size:var(--text-small);color:hsl(var(--muted-foreground));background:hsl(var(--background))}
.ge-opt.on{border-color:hsl(var(--primary));color:hsl(var(--foreground));box-shadow:0 0 0 1px hsl(var(--primary));font-weight:var(--w-medium)}
.ge-cust{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--text-small);cursor:pointer}

/* step 6 · price lines, avatar, combos, photos */
.ge-lines{display:flex;flex-direction:column;gap:var(--s-2);max-width:520px}
.ge-line{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:var(--s-2);align-items:center}
.ge-tag{font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.ge-lerr{margin:0 0 var(--s-1)}
.ge-lines+.wz-add{margin-top:var(--s-2);margin-left:0}
.ge-ack{margin-top:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);max-width:640px}
.ge-av{padding:0;border:0;background:transparent}
.wz-cr.ge-off{background:hsl(var(--muted)/.5)}
.ge-slots .fc-media{position:relative}
.ge-q{position:absolute;left:var(--s-2);bottom:var(--s-2)}

/* step 7 · search preview */
.ge-serp{max-width:600px;padding:var(--s-4);border:1px solid hsl(var(--border));border-radius:var(--r-card);display:flex;flex-direction:column;gap:var(--s-1)}
.ge-serp-u{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.ge-serp-t{font-size:var(--text-section);font-weight:var(--w-medium);color:hsl(var(--info))}
.ge-serp-d{font-size:var(--text-body);color:hsl(var(--muted-foreground))}

/* rail · what brands will see */
.ge-prev{display:flex;flex-direction:column;gap:var(--s-2);padding:0 var(--s-2)}
.ge-prev-h{font-size:var(--text-small);font-weight:var(--w-semibold);color:hsl(var(--muted-foreground))}
.ge-pcard{pointer-events:none}
.ge-prev-empty{border:1px dashed hsl(var(--secondary-border));border-radius:var(--r-card);padding:var(--s-5) var(--s-4);display:flex;flex-direction:column;gap:var(--s-2);
  color:hsl(var(--muted-foreground));font-size:var(--text-small)}

/* overlays: extra stages layered over the main stage (help drawer is the main stage itself) */
.ge-layer{position:absolute;inset:0;pointer-events:none;z-index:var(--z-scrim)}
.ge-layer.open{pointer-events:auto}
.ge-psheet{display:flex;flex-direction:column}
.ge-sh-h{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-5) var(--s-6) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.ge-sh-h>div{flex:1;min-width:0}
.ge-sh-h .q{font-size:var(--text-small);margin-top:2px}
.ge-sh-b{flex:1;min-height:0;overflow:auto;padding:var(--s-5) var(--s-6);display:flex;flex-direction:column;gap:var(--s-4)}
.ge-sh-b .fc-cp{border:1px solid hsl(var(--border));border-radius:var(--r-card);overflow:hidden}
.ge-sh-f{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-6);border-top:1px solid hsl(var(--border))}
.ge-sh-f .r{margin-left:auto;display:flex;gap:var(--s-2)}
.ge-gl{margin:var(--s-2) 0 var(--s-3) var(--s-5);display:flex;flex-direction:column;gap:2px}
.ge .k-guard .ov-dg-b p+p{margin-top:var(--s-2)}
.ge-toasts{position:absolute;right:var(--s-6);bottom:calc(var(--control-h) + var(--s-8));z-index:var(--z-toast);width:380px;pointer-events:none}
.ge-toasts .toast{pointer-events:auto}

/* ================================ PHONE (.kit-m) ================================ */
.ge-m{height:100vh;display:flex;flex-direction:column}
.kit-m .ge-strip{gap:var(--s-2);padding:0 var(--s-2) 0 var(--s-1)}
.kit-m .ge-strip .btn{height:var(--control-h-sm)}
.kit-m .ge-strip-r{padding:0 var(--s-2)}
.ge-mapp{flex:1;min-height:0;display:flex;flex-direction:column;background:hsl(var(--background))}
.ge-mapp>.p-bar .staging{margin-right:var(--s-1)}
.ge-mapp>.p-bar>b{flex:1}
.ge-mblock .ge-mtitle{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;padding:var(--s-3) var(--s-4) 0}
.ge-mtitle b{font-size:var(--text-step-m);font-weight:var(--w-semibold);line-height:1.25;width:100%}
.ge-ci{display:block;width:100%;text-align:left;border-bottom:1px solid hsl(var(--border))}
.ge-ci .wz-ci-t{display:flex;align-items:center;gap:var(--s-2)}
.ge-ci .wz-ci-t svg{color:hsl(var(--muted-foreground))}
.ge-mscroll{flex:1;min-height:0;overflow:auto;background:hsl(var(--muted)/.25)}
.ge-mscroll .wz-stage{padding:var(--s-4)}
.ge-mlede{color:hsl(var(--muted-foreground));font-size:var(--text-small);margin-bottom:var(--s-3)}
.kit-m .ge-flow{gap:var(--s-3)}
.kit-m .ge-blk{padding:var(--s-4)}
.kit-m .ge-blk.flush{padding:0}
.kit-m .ge-blk-h.pad{padding:var(--s-3) var(--s-4)}
.kit-m .ge-blk-h .q{width:100%}
.kit-m .ge-blk-h .r{margin-left:0}
.kit-m .ge-form{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
.kit-m .ge-dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) var(--s-4);margin-top:var(--s-4)}
.ge-cloth-top{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s-4);align-items:start}
.ge-cloth-top .q{font-size:var(--text-small);margin:2px 0 var(--s-2)}
.ge-cloth-top .ge-h3{font-size:var(--text-section)}
.ge-cloth-m .ge-acts{margin-top:var(--s-4)}
.ge-cloth-m .ge-acts .btn{flex:1}
.kit-m .ge-spec{grid-template-columns:minmax(0,1fr) auto;gap:var(--s-1) var(--s-3);padding:var(--s-3) var(--s-4)}
.kit-m .ge-spec .ge-sk{grid-column:1 / -1;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.kit-m .ge-svw .field{max-width:none}
.kit-m .ge-sr{padding:var(--s-2) var(--s-3);min-height:var(--control-h-m-lg)}
.kit-m .ge-sr .chip{display:none}
.kit-m .ge-sr.oos .chip{display:inline-flex}
.kit-m .ge-dhead{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
.kit-m .ge-pick{grid-template-columns:minmax(0,1fr);gap:var(--s-2);padding:var(--s-3) var(--s-4)}
.kit-m .ge-opt{height:var(--control-h-sm)}
.kit-m .ge-lines{max-width:none}
.kit-m .ge-line{grid-template-columns:minmax(0,1fr) var(--control-h-m)}
.ge-mcombos{display:flex;flex-direction:column;gap:var(--s-2)}
.ge-mlp{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);font-size:var(--text-small);padding-top:var(--s-2);border-top:1px solid hsl(var(--border))}
.ge-mlp .wz-lp{text-align:right}
.kit-m .wz-ol{grid-template-columns:84px minmax(0,1fr) var(--control-h-m)}
.kit-m .wz-ol .field{height:var(--control-h-m)}
.kit-m .wz-add{margin-left:0}
.kit-m .fc-ph-head{flex-wrap:wrap}
.kit-m .fc-ph-head .r{margin-left:0;width:100%}
.kit-m .wz-rv{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
.kit-m .wz-rr{padding:var(--s-3)}
.kit-m .ge-serp-t{font-size:var(--text-card)}
.ge-mpick{padding:0;overflow:hidden}
.ge-mpick .ge-blk-h{padding:var(--s-3) var(--s-4) 0}
.ge-mtools{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.ge-m2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-2)}
.ge-m2 .fc-pop.wide{width:300px}
.ge-m2 .fc-dd+.fc-dd .fc-pop{left:auto;right:0}
.ge-mtools-r{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.ge-mtools .fc-hue{width:28px;height:28px}
.ge-plist{display:flex;flex-direction:column}
.ge-prow{display:grid;grid-template-columns:44px minmax(0,1fr) auto 20px;gap:var(--s-3);align-items:center;min-height:64px;padding:var(--s-2) var(--s-4);text-align:left;
  border-bottom:1px solid hsl(var(--border));transition:background-color var(--motion-hover)}
.ge-prow-t{display:flex;flex-direction:column;min-width:0}
.ge-prow-t b{font-size:var(--text-small)}
.ge-prow-t small{font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.ge-prow-k{color:hsl(var(--primary));opacity:0}
.ge-prow[aria-selected=true]{background:hsl(var(--accent))}
.ge-prow[aria-selected=true] .ge-prow-k{opacity:1}
.ge-prow.oos .ge-prow-t span{color:hsl(var(--muted-foreground))}
.ge-prow .chip.available{display:none}
.ge-mpick .fc-cp-foot,.ge-msheet .fc-cp-foot{padding:var(--s-3) var(--s-4)}
.ge-msheet{display:flex;flex-direction:column}
.ge-msheet-b{flex:1;min-height:0;overflow:auto}
.ge-msheet-b>.ov-note{margin:var(--s-3) var(--s-4) 0}
.ge-mhelp{max-height:86%;display:flex;flex-direction:column}
.ge-mhelp .ph-d-body{flex:1;min-height:0;overflow:auto}
.ge-steps{padding-bottom:var(--s-4)}
.ge-steps-b{padding:var(--s-2) var(--s-3) 0}
.ge-steps .wz-rh{padding:var(--s-2) var(--s-2) var(--s-3)}
.kit-m .ge-toasts{left:var(--s-3);right:var(--s-3);width:auto;bottom:calc(var(--control-h-m-lg) * 2 + var(--s-4))}
.kit-m .k-dialog{width:calc(100% - var(--s-8))}

/* picker fit: narrower detail column, selection shown by the row highlight */
.ge .fc-cp-body{grid-template-columns:minmax(0,1fr) 232px}
.ge-psheet .fc-cp-body{grid-template-columns:minmax(0,1fr)}
.ge-side-empty{justify-content:flex-start;padding-top:var(--s-8)}
.ge-sh-f .fc-sw8{width:var(--s-8);height:var(--s-8)}
.ge-cloth-h>div:first-child{flex:1;min-width:0}
.ge-cloth-h .ge-acts{flex-wrap:nowrap}
.ge-mtools-r{flex-wrap:wrap}
.ge-mtools-r .fc-sw-l{white-space:nowrap}
.kit-m .ge-dhead .btn{justify-self:start;margin-left:calc(var(--s-3) * -1)}
.kit-m .ge-av .chip{display:none}
.kit-m .ge-blk-h .r{margin-left:auto}
.kit-m .ge-blk-h .q{order:3}