/* =====================================================================================
   RJ DTC Admin · Round 2 kit · families/cards-gallery/family.css
   Prefix: cg-   Load order: tokens.css -> base.css -> assets/cloth.css -> family.css
   Product card, cloth card, gallery + view toggle, picker mode, skeleton, empty, fallbacks.
   Values come from tokens only. Cloth textures and garment silhouettes live in assets/.
   ===================================================================================== */

/* ---------- page head inside a specimen (mirrors the app's .ph) ---------- */
.cg-ph{display:flex;align-items:flex-end;gap:var(--s-4);padding:var(--s-6) var(--s-6) var(--s-4)}
.cg-ph .page-title{display:flex;align-items:center;gap:var(--s-3)}
.cg-ph p{color:hsl(var(--muted-foreground));margin-top:var(--s-1)}
.cg-ph .r{margin-left:auto;display:flex;gap:var(--s-2)}
.cg-count{font:var(--w-medium) var(--text-small)/1 var(--font-ui);font-variant-numeric:tabular-nums;color:hsl(var(--muted-foreground));
  background:hsl(var(--muted));border-radius:var(--r-chip);padding:var(--s-1) var(--s-2);letter-spacing:0}

/* ---------- toolbar: status filter, search, sort, view toggle ---------- */
.cg-toolbar{display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-6) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.cg-toolbar .r{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.cg-fchips{display:flex;gap:var(--s-1)}
.cg-fchip{height:var(--control-h-sm);padding:0 var(--s-3);border-radius:var(--r-control);border:1px solid hsl(var(--border));background:hsl(var(--background));
  display:inline-flex;align-items:center;gap:var(--s-2);white-space:nowrap;color:hsl(var(--foreground));
  font:var(--w-medium) var(--text-btn-sm)/1 var(--font-voice);font-stretch:var(--font-stretch-title);
  transition:background-color var(--motion-hover),border-color var(--motion-hover)}
.cg-fchip:hover{background:hsl(var(--muted))}
.cg-fchip .n{font:var(--w-regular) var(--text-micro)/1 var(--font-ui);font-variant-numeric:tabular-nums;color:hsl(var(--muted-foreground))}
.cg-fchip[aria-pressed=true]{background:hsl(var(--accent));border-color:hsl(var(--ring)/.35);color:hsl(var(--accent-foreground))}
.cg-fchip[aria-pressed=true] .n{color:hsl(var(--accent-foreground))}
.cg-fchip .dot{width:6px;height:6px}
.cg-search{width:260px;height:var(--control-h-sm)}
.cg-search svg{color:hsl(var(--muted-foreground))}
.cg-search input{border:0;outline:0;background:transparent;flex:1;min-width:0;font-size:var(--text-body)}
.cg-search input::placeholder{color:hsl(var(--muted-foreground))}
.cg-sortw{position:relative}
.cg-sortw .field{height:var(--control-h-sm);width:auto;gap:var(--s-2);font-size:var(--text-body)}
.cg-sortw .field .q{white-space:nowrap}

/* segmented view toggle (Radix ToggleGroup type=single) */

/* ---------- gallery ---------- */
.cg-pane{padding:var(--s-5) var(--s-6) var(--s-6)}
.cg-grid{display:grid;gap:var(--s-5) var(--s-4)}
.cg-grid.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.cg-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cg-grid.c6{grid-template-columns:repeat(6,minmax(0,1fr))}
.cg-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-3)}
.cg-more{display:flex;align-items:center;justify-content:center;gap:var(--s-4);margin-top:var(--s-6);font-size:var(--text-small);color:hsl(var(--muted-foreground))}

/* ---------- product card (shadcn Card + AspectRatio 3/4) ---------- */
.cg-card{position:relative;display:flex;flex-direction:column;min-width:0;background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:var(--r-card);box-shadow:var(--e-1);outline:0;
  transition:transform var(--motion-hover),box-shadow var(--motion-hover),border-color var(--motion-hover)}
.cg-card:hover,.cg-card.is-hover{transform:translateY(var(--lift-shift));box-shadow:var(--e-card-hover);border-color:hsl(var(--secondary-border))}
.cg-card:focus-visible,.cg-card.is-focus{box-shadow:var(--focus-ring);border-color:hsl(var(--ring))}
.cg-card:has(.open){z-index:5}
.cg-media{position:relative;aspect-ratio:3/4;background:var(--studio);overflow:hidden;
  border-radius:var(--r-card-inner) var(--r-card-inner) 0 0}
.cg-media>.chip{position:absolute;top:var(--s-2);left:var(--s-2);background:hsl(var(--background)/.94);z-index:2}
.cg-garment{position:absolute;inset:9% 12% 5%}
.cg-gfill,.cg-gdetail{position:absolute;inset:0}
.cg-body{display:flex;flex-direction:column;gap:2px;padding:var(--s-3);flex:1;min-width:0}
.cg-title{font:var(--w-semibold) var(--text-card)/var(--lh-card) var(--font-voice);font-stretch:var(--font-stretch-title);letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cg-meta{font-size:var(--text-small);color:hsl(var(--muted-foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg-meta .code{color:hsl(var(--foreground))}
.cg-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--s-2);margin-top:var(--s-2);font-variant-numeric:tabular-nums}
.cg-price b{font:var(--w-semibold) var(--text-card)/1.2 var(--font-ui)}
.cg-price span{font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.cg-ver{font-size:var(--text-micro);color:hsl(var(--muted-foreground));margin-top:2px}
.cg-ver .code{font-size:var(--text-micro)}
.cg-actions{display:flex;align-items:center;gap:var(--s-2);margin-top:auto;padding-top:var(--s-3)}
.cg-actions>.btn{flex:1}
.cg-why{font-size:var(--text-micro);color:hsl(var(--muted-foreground));margin-top:auto;padding-top:var(--s-3);display:flex;gap:6px;align-items:center}

/* the ⋯ menu (shadcn DropdownMenu), wired to kit.js [data-k-pop] */

.cg-menu{position:absolute;right:0;top:calc(100% + var(--s-1));z-index:var(--z-pop);min-width:196px;transform-origin:top right}  /* surface = shared .menu */
.cg-menu.up{top:auto;bottom:calc(100% + var(--s-1));transform-origin:bottom right}

/* disabled card (brand picking from the Global Store: already added) */
.cg-card.is-disabled{background:hsl(var(--muted)/.6);box-shadow:none;transform:none;cursor:not-allowed}
.cg-card.is-disabled .cg-media>*:not(.chip){opacity:.5}

/* ---------- image-missing and failed-photo fallbacks ---------- */
.cg-nophoto{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-3);
  background:hsl(var(--muted));color:hsl(var(--muted-foreground));text-align:center;padding:var(--s-4)}
.cg-nophoto .cg-outline{width:46%;color:hsl(var(--secondary-border))}
.cg-nophoto b{font:var(--w-semibold) var(--text-small)/1.3 var(--font-voice);color:hsl(var(--foreground))}
.cg-nophoto span{font-size:var(--text-micro);line-height:1.4}
.cg-nophoto.err{background:hsl(var(--destructive)/.05)}
.cg-nophoto.err .cg-outline{color:hsl(var(--destructive)/.35)}
.cg-nophoto.err b{color:hsl(var(--destructive))}

/* ---------- cloth card ---------- */
.cg-swatch{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--r-card-inner) var(--r-card-inner) 0 0}
.cg-swatch>.chip{position:absolute;top:var(--s-2);left:var(--s-2);background:hsl(var(--background)/.94);z-index:2}
.cg-swatch>.cg-fab{position:absolute;inset:0}
.cg-codeline{display:flex;align-items:baseline;gap:var(--s-2)}
.cg-codeline .code{font:var(--w-medium) var(--text-card)/1.3 var(--font-code);color:hsl(var(--foreground))}
.cg-codeline small{margin-left:auto;font:var(--text-micro)/1 var(--font-code);color:hsl(var(--muted-foreground))}
.cg-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px var(--s-3);margin-top:var(--s-2);font-size:var(--text-small)}
.cg-dl dt{color:hsl(var(--muted-foreground))}
.cg-dl dd{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}

/* ---------- picker mode (Radix ToggleGroup single | multiple over cards) ---------- */
.cg-picker{display:flex;flex-direction:column}
.cg-pk-top{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-bottom:1px solid hsl(var(--border))}
.cg-pk-top .r{margin-left:auto;display:flex;gap:var(--s-2);align-items:center}
.cg-pk-grid{padding:var(--s-5)}
.cg-pick{text-align:left;cursor:pointer;width:100%}
.cg-pick .cg-swatch{border-radius:var(--r-card-inner) var(--r-card-inner) 0 0}
.cg-tick{position:absolute;top:var(--s-2);right:var(--s-2);z-index:3;width:22px;height:22px;display:grid;place-items:center;
  background:hsl(var(--background));border:1.5px solid hsl(var(--input));color:transparent;box-shadow:var(--e-1);
  transition:background-color var(--motion-hover),border-color var(--motion-hover),color var(--motion-hover)}
.cg-tick.box{border-radius:var(--r-chip)}
.cg-tick.radio{border-radius:var(--r-pill)}
.cg-pick[aria-selected=true]{border-color:hsl(var(--primary));box-shadow:0 0 0 1px hsl(var(--primary)),var(--e-1)}
.cg-pick[aria-selected=true]:hover,.cg-pick[aria-selected=true].is-hover{box-shadow:0 0 0 1px hsl(var(--primary)),var(--e-pop)}
.cg-pick[aria-selected=true] .cg-tick{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.cg-pick.is-anchor .cg-tick{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.cg-pick.is-anchor{border-color:hsl(var(--primary))}
.cg-pick[aria-disabled=true]{cursor:not-allowed;transform:none;box-shadow:none;background:hsl(var(--muted)/.6)}
.cg-pick[aria-disabled=true] .cg-fab{opacity:.45}
.cg-pick[aria-disabled=true] .cg-tick{background:hsl(var(--muted));border-color:hsl(var(--border))}
.cg-pick.is-anchor[aria-disabled=true] .cg-fab{opacity:1}
.cg-pick.is-anchor[aria-disabled=true]{background:hsl(var(--card));cursor:default}
.cg-tag{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--r-chip);font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);
  font-stretch:var(--font-stretch-title);white-space:nowrap}
.cg-tag.anchor{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.cg-tag.sibling{background:hsl(var(--accent));color:hsl(var(--accent-foreground));box-shadow:inset 0 0 0 1px hsl(var(--ring)/.3)}
.cg-tagslot{display:flex;gap:var(--s-1);min-height:20px;margin-top:var(--s-2)}

/* selection bar: the one primary action of the picker */
.cg-selbar{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-5);border-top:1px solid hsl(var(--border));background:hsl(var(--background))}
.cg-selbar .r{margin-left:auto;display:flex;gap:var(--s-2)}
.cg-selbar .cg-mini{width:28px;height:28px;border-radius:var(--r-chip);box-shadow:inset 0 0 0 1px hsl(var(--foreground)/.12);flex:none;position:relative;overflow:hidden}
.cg-selbar .cg-mini>.cg-fab{position:absolute;inset:0}
.cg-selsum{display:flex;flex-direction:column;gap:2px;min-width:0}
.cg-selsum b{font:var(--w-semibold) var(--text-card)/1.2 var(--font-voice);font-stretch:var(--font-stretch-title)}
.cg-selsum span{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.cg-pager{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}

/* ---------- skeleton (shadcn Skeleton): static, no shimmer ---------- */
.cg-sk{background:hsl(var(--muted));border-radius:var(--r-chip);animation:kit-skel var(--motion-skeleton)}
.cg-sk.media{aspect-ratio:3/4;border-radius:var(--r-card-inner) var(--r-card-inner) 0 0}
.cg-sk.sq{aspect-ratio:1/1;border-radius:var(--r-card-inner) var(--r-card-inner) 0 0}
.cg-sk.l{height:10px;margin-top:var(--s-2)}
.cg-sk.l.w9{width:90%}.cg-sk.l.w7{width:70%}.cg-sk.l.w5{width:50%}.cg-sk.l.w4{width:40%}
.cg-sk.btn{height:var(--control-h-sm);border-radius:var(--r-control);margin-top:var(--s-3)}
.cg-card.is-loading{box-shadow:none;transform:none}
.cg-loadline{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-bottom:var(--s-4)}

/* ---------- empty and error surfaces ---------- */
.cg-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-3);padding:var(--s-10) var(--s-6)}
.cg-empty .cg-art{width:84px;height:84px;border-radius:var(--r-frame);display:grid;place-items:center;background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.cg-empty.err .cg-art{background:hsl(var(--destructive)/.07);color:hsl(var(--destructive))}
.cg-empty h3{font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-voice);font-stretch:var(--font-stretch-title);letter-spacing:var(--tr-section)}
.cg-empty p{font-size:var(--text-body);color:hsl(var(--muted-foreground));max-width:34ch}
.cg-empty .cg-row{display:flex;gap:var(--s-2);margin-top:var(--s-2);flex-wrap:wrap;justify-content:center}
.cg-ghostgrid{display:grid;grid-template-columns:repeat(3,28px);gap:6px;opacity:.9}
.cg-ghostgrid i{display:block;height:36px;border-radius:var(--r-chip);border:1.5px dashed hsl(var(--secondary-border))}

/* ---------- table view = data-table's .dt (loaded from ../data-table/family.css); only the thumb is ours ---------- */

.cg-tthumb{position:relative;width:30px;height:40px;border-radius:var(--r-media);background:var(--studio);flex:none;overflow:hidden;box-shadow:inset 0 0 0 1px hsl(var(--foreground)/.08)}
.cg-tthumb .cg-garment{inset:6% 8% 4%}

/* ---------- phone composition ---------- */
.cg-pscroll{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;padding:0 var(--s-4);margin:0}
.cg-pscroll::-webkit-scrollbar{display:none}
.kit-m .cg-fchip{height:40px;flex:none}

.kit-m .cg-search{width:100%;height:var(--control-h-m)}
.cg-pbar2{display:flex;gap:var(--s-2);align-items:center;padding:var(--s-3) var(--s-4)}
.cg-pbar2 .cg-search{flex:1}
.kit-m .cg-body{padding:var(--s-2) 10px 10px}
.kit-m .cg-title{font-size:var(--text-btn-sm)}
.kit-m .cg-meta{font-size:var(--text-micro)}
.kit-m .cg-price{flex-direction:column;gap:0}
.kit-m .cg-actions{gap:var(--s-1)}
.kit-m .cg-actions .btn.sm{padding:0 var(--s-2)}
.kit-m .cg-actions .icon-btn{width:40px;height:40px}
.kit-m .cg-dl{font-size:var(--text-micro)}
.kit-m .cg-empty{padding:var(--s-8) var(--s-4)}
.kit-m .states .cg-card{width:156px}
.cg-list{display:flex;flex-direction:column}
.cg-li{display:flex;align-items:center;gap:var(--s-3);min-height:64px;padding:var(--s-2) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.cg-li:last-child{border-bottom:0}
.cg-li .cg-tthumb{width:36px;height:48px}
.cg-li .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cg-li .t b{font:var(--w-semibold) var(--text-btn-sm)/1.25 var(--font-voice);font-stretch:var(--font-stretch-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg-li .t span{font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.cg-li .p{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-1)}
.cg-li .p b{font:var(--w-semibold) var(--text-btn-sm)/1 var(--font-ui);font-variant-numeric:tabular-nums}

/* phone sheets: full-screen picker and bottom action sheet, on the shared k-stage motion */

.cg-sh-head{display:flex;align-items:center;gap:var(--s-2);height:56px;padding:0 var(--s-2);border-bottom:1px solid hsl(var(--border));flex:none}
.cg-sh-head b{font:var(--w-semibold) var(--text-section)/1 var(--font-voice);font-stretch:var(--font-stretch-title);flex:1}
.cg-sh-body{flex:1;overflow-y:auto;min-height:0}
.cg-sh-foot{flex:none;padding:var(--s-3) var(--s-4) var(--s-4);border-top:1px solid hsl(var(--border));display:flex;flex-direction:column;gap:var(--s-2)}
.cg-sh-foot .btn{width:100%}

.cg-acts{display:flex;flex-direction:column;padding:0 var(--s-2)}
.cg-acts .mi{height:var(--control-h-m-lg);font-size:var(--text-read)}
.cg-acth{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-2) var(--s-4) var(--s-3);border-bottom:1px solid hsl(var(--border));margin-bottom:var(--s-1)}
.cg-acth b{font:var(--w-semibold) var(--text-card)/1.25 var(--font-voice);font-stretch:var(--font-stretch-title);display:block}
.cg-acth span{font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.cg-anchorfield{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);border:1px dashed hsl(var(--secondary-border));border-radius:var(--r-card)}
.cg-anchorfield span{flex:1;font-size:var(--text-small);color:hsl(var(--muted-foreground))}

/* specimens: cards fill their state cell on desktop */
.kit-d .states .state-v>.cg-card,.kit-d .states .state-v>.cg-pick{width:100%;flex:1;align-self:stretch}
.kit-d .states .state-v{align-items:stretch}
.cg-pick.is-anchor[aria-disabled=true] .cg-tick{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.cg-pick[aria-selected=true] .cg-tick,.cg-pick.is-anchor .cg-tick{box-shadow:0 0 0 2px hsl(var(--background))}
.cg-card.is-disabled .cg-swatch>.cg-fab{opacity:.5}
.cg-swatch~.cg-body>.cg-meta{white-space:normal}
.cg-ghostgrid{grid-template-columns:repeat(3,18px);gap:5px}
.cg-ghostgrid i{height:24px}
.kit-m .cg-meta{white-space:normal}
.cg-acth b{color:hsl(var(--foreground))}
.cg-acts .cg-sep{margin:var(--s-1) 0}