/* RJ DTC Admin · Round 4 · Create Product (/create-product) · page.css (prefix cp-)
   On top of bp.css and the wizard-stepper family. Values from tokens only. No size queries. */

.cp-page{padding-bottom:var(--s-10)}
.cp-ph{margin-bottom:var(--s-5)}
.cp-steps{padding:var(--s-4) var(--s-5);border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card));margin-bottom:var(--s-6)}
.cp-head{margin-bottom:var(--s-5)}
.cp-head .wz-next{margin-left:auto}
.cp-split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s-6);align-items:start}
.cp-col{max-width:880px;display:flex;flex-direction:column;gap:var(--s-4)}
.cp-main{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.cp-aside{position:sticky;top:calc(var(--topbar-h) + var(--s-5));display:flex;flex-direction:column;gap:var(--s-4)}
.cp-asnote{font-size:var(--text-small);color:hsl(var(--muted-foreground));padding:0 var(--s-1)}

/* pick */
.cp-tools{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.cp-fsels{display:contents}
.cp-pickn{margin-left:auto;font-size:var(--text-small);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.kit-d .cp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.cp-pick{text-align:left;padding:0;color:inherit;font:inherit;cursor:pointer;display:flex;flex-direction:column}
.cp-pick .cg-media,.cp-pick .cg-body{display:block}
.cp-pick .cg-body{display:flex;flex-direction:column;gap:2px}
.cp-pick .cg-price{display:flex;align-items:baseline;gap:var(--s-2)}
.cp-pick .cg-price span{font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.cp-pick .cg-tick{background:hsl(var(--background)/.94);border:1px solid hsl(var(--input));color:transparent}
.cp-pick[aria-selected=true]{border-color:hsl(var(--primary));box-shadow:0 0 0 1px hsl(var(--primary)),var(--e-1)}
.cp-pick[aria-selected=true] .cg-tick{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.cp-pick:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.cp-added{position:absolute;top:var(--s-2);left:var(--s-2);z-index:2;background:hsl(var(--background)/.94);color:hsl(var(--available));box-shadow:var(--e-1)}
.cp-pick:has(.cp-added) .cg-garment{opacity:.72}
.cp-none{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-1);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.cp-none b{color:hsl(var(--foreground));font-size:var(--text-card)}
.cp-ghost{display:grid;place-items:center;width:44px;height:56px;border:1px dashed hsl(var(--secondary-border));border-radius:var(--r-control);margin-bottom:var(--s-2)}
.cp-pk{display:flex;gap:var(--s-3);align-items:flex-start}
.cp-pkimg{position:relative;flex:none;width:72px;height:96px;border-radius:var(--r-control);overflow:hidden;background:var(--studio)}
.cp-pkimg .cg-garment{position:absolute;inset:0}
.cp-pk b{display:block;font-size:var(--text-card);font-weight:var(--w-semibold);line-height:1.3}
.cp-pk small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:4px}
.cp-pk small b{display:inline;font-size:inherit;color:hsl(var(--foreground))}
.cp-pk+.sf-alert{margin-top:var(--s-3)}
.cp-pk+.sf-alert{flex-wrap:wrap}

/* options & prices */
.cp-pcthumb{width:42px;height:56px}
.wz-pc .cg-tthumb{flex:none}
.cp-preview{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.cp-h2row{display:flex;align-items:baseline;gap:var(--s-3);margin-top:var(--s-2)}
.cp-h2row .q{margin-left:auto;font-size:var(--text-small);font-variant-numeric:tabular-nums}
.cp-h2{font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-voice);letter-spacing:var(--tr-section)}
.cp-pt td:first-child{width:36%}
.cp-pt .field{max-width:200px}
.cp-sug{color:hsl(var(--muted-foreground))}
.cp-ro{font-size:var(--text-body);font-variant-numeric:tabular-nums;display:block;padding-top:var(--s-2)}
.cp-below{display:block;font-size:var(--text-micro);color:hsl(var(--warning));margin-top:2px}
.cp-pt .wz-cn button.switch{border:0;padding:0;margin-top:2px}
.cp-pt .wz-cn .switch{margin-top:2px}
.cp-tablesk{display:flex;flex-direction:column;gap:var(--s-2)}
.cp-tablesk .skel{height:52px;border-radius:var(--r-control)}
.cp-foot{font-size:var(--text-small);color:hsl(var(--muted-foreground))}

/* review */
.cp-confirmbox{border:1px solid hsl(var(--warning)/.35);background:hsl(var(--warning)/.04);border-radius:var(--r-card);padding:var(--s-4)}
.cp-confirmbox .bp-sec-h small{font-variant-numeric:tabular-nums}
.cp-cks{display:flex;flex-direction:column;gap:var(--s-3)}
.cp-ck{display:flex;gap:var(--s-3);align-items:flex-start;cursor:pointer}
.cp-ck .cb{margin-top:2px;flex:none}
.cp-ck b{display:block;font-size:var(--text-body);font-weight:var(--w-semibold)}
.cp-ck small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:2px;line-height:1.45}
.cp-saving{display:flex;flex-direction:column;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.cp-pbar{display:block;height:4px;border-radius:var(--r-pill);background:hsl(var(--muted));overflow:hidden}
.cp-pbar i{display:block;height:100%;width:62%;background:hsl(var(--primary));border-radius:inherit}
.cp-saved{display:flex;gap:var(--s-4);align-items:flex-start;padding:var(--s-5);border:1px solid hsl(var(--available)/.35);background:hsl(var(--available)/.05);border-radius:var(--r-card)}
.cp-okico{color:hsl(var(--available));flex:none}
.cp-saved h3{font:var(--w-semibold) var(--text-section)/1.3 var(--font-voice);letter-spacing:var(--tr-section)}
.cp-saved p{font-size:var(--text-body);color:hsl(var(--muted-foreground));margin-top:var(--s-1);max-width:62ch}
.cp-failed{list-style:none;display:flex;flex-direction:column;gap:4px;margin-top:var(--s-2);font-size:var(--text-small)}
.cp-failed li{display:flex;align-items:center;gap:6px;color:hsl(var(--foreground))}
.cp-failed li.no{color:hsl(var(--destructive))}
.cp-chk li{display:flex;gap:var(--s-2);align-items:flex-start;font-size:var(--text-small)}
.cp-chk li+li{margin-top:var(--s-2)}
.cp-chk svg{color:hsl(var(--available));flex:none;margin-top:2px}
.cp-small{font-size:var(--text-small);margin-bottom:var(--s-3)}
.cp-secs{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-3)}
.cp-sec{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-body);cursor:pointer}
.cp-links{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-1)}
.cp-links .btn{padding-left:0}

/* sticky action bar across the content column */
.kit-d .cp-bar{position:sticky;bottom:0;z-index:calc(var(--z-sticky) * 2);background:hsl(var(--background)/.96);backdrop-filter:blur(8px);border-top:1px solid hsl(var(--border))}
.kit-d .cp-bar{padding:var(--s-3) var(--s-6)}
.cp-bar .wz-save{min-width:0}
.cp-bar .wz-save span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:has(.cp-bar) .bp-proto-d{bottom:calc(var(--s-5) + 64px)}

/* ======================================== PHONE ======================================== */
.kit-m .cp-phone{min-height:100vh}
.kit-m .cp-phone .p-bar .icon-btn{width:var(--control-h-m);height:var(--control-h-m)}
.kit-m .cp-ci{position:sticky;top:52px;z-index:calc(var(--z-sticky) * 2)}
.kit-m .cp-body{flex:1;padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-4)}
.kit-m .cp-mtools{display:flex;flex-direction:column;gap:var(--s-2)}
.kit-m .cp-mtools .cg-pscroll{margin:0 calc(var(--s-4) * -1)}
.kit-m .cp-mtools .bp-fsel{height:40px;max-width:none}
.kit-m .cp-mhead .wz-t{font-size:var(--text-step-m)}
.kit-m .cp-mhead .wz-lede{font-size:var(--text-small);margin-top:2px;color:hsl(var(--muted-foreground))}
.kit-m .cp-pick .cg-body{padding:var(--s-3)}
.kit-m .cp-pick .cg-title{font-size:var(--text-body)}
.kit-m .cp-added{font-size:0;gap:0;width:24px;padding:0;justify-content:center}
.kit-m .cp-mbar .wz-mbtns{display:flex;gap:var(--s-2)}
.kit-m .cp-mbar .wz-mbtns .btn{flex:1;height:var(--control-h-m-lg);font-size:var(--text-btn-lg)}
.kit-m .cp-mbar .wz-mbtns .btn-secondary{flex:0 0 33%}
.kit-m .cp-mpick{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground));min-height:24px}
.kit-m .cp-mpick b{display:block;color:hsl(var(--foreground));font-size:var(--text-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kit-m .cp-mpick>span:last-child{min-width:0;display:flex;flex-direction:column}
.kit-m .cp-mthumb{position:relative;flex:none;width:24px;height:32px;border-radius:var(--r-chip);overflow:hidden;background:var(--studio)}
.kit-m .cp-mthumb .cg-garment{position:absolute;inset:0}
.kit-m .wz-pc{padding:var(--s-3)}
.kit-m .cp-mcards{display:flex;flex-direction:column;gap:var(--s-3)}
.kit-m .wz-mc button.switch{border:0;padding:0}
.kit-m .wz-m2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.kit-m .wz-mc .field{height:var(--control-h-m)}
.kit-m .cp-ro{padding-top:0;font-size:var(--text-card)}
.kit-m .cp-saved{padding:var(--s-4)}
.kit-m .cp-confirmbox{padding:var(--s-3)}
.kit-m .cp-split{display:flex;flex-direction:column;gap:var(--s-4)}
.kit-m .cp-aside{position:static}
.kit-m .cp-pbar2{padding:0}
.kit-m .cp-pf{padding:var(--s-3) var(--s-4) 0}
.kit-m .cp-pfc{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.kit-m .cp-pfc .cg-fchip{height:40px}
.kit-m .cp-pane{display:flex;flex-direction:column;gap:var(--s-3)}
.kit-m .cp-mlede{font-size:var(--text-small);color:hsl(var(--muted-foreground))}