/* RJ DTC Admin · Round 4 · brand Global Store (/global-store) · page.css (prefix bg-)
   On top of bp.css. Values from tokens only. Desktop .kit-d and phone .kit-m, no size queries. */

/* toolbar: chips + fabric code on the first line, the catalogue filters on the second */
.bg-bar{row-gap:var(--s-3)}
.bg-frow{flex-basis:100%;display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.bg-fsels{display:contents}
.bg-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)}
.bg-pricebox{width:288px;padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2)}
.bg-range{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-top:var(--s-2)}
.bg-range .lbl{font-size:var(--text-small)}
.bg-range .field input{border:0;outline:0;background:transparent;width:100%;min-width:0;font-variant-numeric:tabular-nums}
.bg-sym{font:var(--w-medium) var(--text-code)/1 var(--font-code);color:hsl(var(--muted-foreground))}
.bg-pf-f{display:flex;justify-content:flex-end;margin-top:var(--s-2)}

/* gallery */
.kit-d .bg-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.bg-card .cg-title a{color:inherit;text-decoration:none}
.bg-card .cg-title a:hover{text-decoration:underline;text-decoration-color:hsl(var(--foreground)/.3)}
.bg-card .cg-media>span:first-child{position:absolute;top:var(--s-2);left:var(--s-2);z-index:2}
.bg-card .chip.bp-in{background:hsl(var(--background)/.94);color:hsl(var(--available));box-shadow:var(--e-1)}
.bg-card .cg-nophoto span.code{font-size:var(--text-micro)}
.bg-card .cg-nophoto .cg-outline{width:34%}
.bg-actslot{flex:1;min-width:0;display:flex}
.bg-actslot .btn{flex:1}
.bg-card.is-adding{border-color:hsl(var(--ring)/.6)}
.bg-card.is-flash{animation:bg-flash 900ms var(--ease-standard)}
@keyframes bg-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){.bg-card.is-flash{animation:none}}
.bg-prog{display:flex;flex-direction:column;gap:6px;margin-top:var(--s-2);font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.bg-pbar{display:block;height:4px;border-radius:var(--r-pill);background:hsl(var(--muted));overflow:hidden}
.bg-pbar i{display:block;height:100%;width:calc(var(--p, .2) * 100%);background:hsl(var(--primary));border-radius:inherit;transition:width var(--motion-sheet-in)}
.bg-err{margin-top:var(--s-2)}
.bg-card .cg-ver,.bg-card .bp-flag{margin-top:var(--s-1)}

/* detail sheet */
.bg-dmedia{display:flex;flex-direction:column;gap:var(--s-2)}
.bg-dph{position:relative;aspect-ratio:3/4;max-height:420px;border-radius:var(--r-card);overflow:hidden;background:var(--studio)}
.bg-dph.cloth .cg-fab{position:absolute;inset:0}
.bg-dph .cg-garment{position:absolute;inset:0}
.bg-thumbs{display:flex;gap:var(--s-2)}
.bg-th{position:relative;width:56px;height:72px;border-radius:var(--r-control);overflow:hidden;background:var(--studio);border:1px solid hsl(var(--border));padding:0}
.bg-th.on{border-color:hsl(var(--primary));box-shadow:0 0 0 1px hsl(var(--primary))}
.bg-th .cg-fab,.bg-th .cg-garment{position:absolute;inset:0}
.bg-th:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.bg-dprice{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap}
.bg-dprice b{font:var(--w-semibold) var(--text-section)/1 var(--font-voice);font-variant-numeric:tabular-nums}
.bg-dprice span{color:hsl(var(--muted-foreground));font-size:var(--text-small)}
.bg-dprice small{flex-basis:100%;font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.bg-dl{padding-top:var(--s-3);border-top:1px solid hsl(var(--border))}
.bg-dnote{font-size:var(--text-small)}
.bg-detail .ov-sh-f .r{display:flex;gap:var(--s-2);margin-left:auto}

/* ======================================== PHONE ======================================== */
.kit-m .bg-ptools .cg-pbar2{padding-bottom:var(--s-2)}
.kit-m .bg-filterbtn{position:relative}
.kit-m .bg-filterbtn .cnt{margin-left:2px}
.kit-m .bg-card .cg-actions .btn{height:40px}
.kit-m .bg-card .cg-actions .icon-btn{width:40px;height:40px;flex:none}
.kit-m .bg-card .cg-price span{display:block}
.kit-m .bg-card .chip.bp-in{font-size:0;gap:0;width:24px;padding:0;justify-content:center}
.kit-m .bg-card .chip.bp-in svg{width:13px;height:13px}
.kit-m .bg-pf{padding:var(--s-3) var(--s-4) 0}
.kit-m .bg-pfc{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.kit-m .bg-pfc .cg-fchip{height:40px}
.kit-m .bg-pricebox{width:auto;padding:var(--s-3) var(--s-4) 0;gap:var(--s-2)}
.kit-m .bg-range .field{height:var(--control-h-m)}
.kit-m .bg-dph{max-height:none}
.kit-m .bg-detail .ov-sh-f{flex-direction:column;align-items:stretch}
.kit-m .bg-detail .ov-sh-f .r{display:grid;grid-template-columns:1fr 1fr;margin-left:0}
.kit-m .bg-detail .ov-sh-f .r .btn{width:100%}
.kit-m .bg-detail .bg-dnote{text-align:center}
.kit-m .ov-dg-f{flex-wrap:wrap}