/* ==========================================================================
   GRIDROP · THE LOCKER — the look, shared by both of its homes.

   storeui/locker.js builds this markup on store.html and on account.html. The rules
   lived inline on the store for one afternoon and were about to be copied into the
   profile; a copy is how two pages that must agree stop agreeing, so it is a file.

   THE SHAPE IS THE ONE THE OWNER SPECIFIED — site/study-sellables-prompts-{ar,en}.html
   §08: one row per wardrobe slot, each row a strip of swatches, one ringed and chipped
   as worn, and a locked piece showing ITS REAL ART DIMMED UNDER A SMALL LOCK, «never a
   silhouette or a question mark».

   Logical properties throughout (inset-inline, margin-inline, text-align:start) so the
   whole thing mirrors for Arabic without a second rule. Every control clears 44px: it
   is a touch target before it is a swatch.
   ========================================================================== */

.lk-row{margin:0 0 18px;}
.lk-lbl{display:flex;align-items:baseline;gap:9px;font-size:12px;font-weight:900;letter-spacing:.6px;
  text-transform:uppercase;color:var(--cyan);margin-bottom:9px;}
/* Inter, not JetBrains Mono: the mono face is the right one for a count, but neither host
   page links it, and naming a family a page never loaded renders a system font that looks
   right on one machine and wrong on another (CLAUDE.md RULE #13). */
.lk-ct{font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:11px;color:var(--mut);letter-spacing:0;}
.lk-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;}
.lk-sw{position:relative;display:flex;flex-direction:column;gap:7px;padding:9px;border-radius:14px;
  border:1px solid var(--line);background:linear-gradient(180deg,#131c23,#0c151b);
  color:var(--txt);font:inherit;cursor:pointer;transition:.14s;text-align:center;min-height:44px;}
.lk-sw:hover:not(:disabled){border-color:var(--cyan);transform:translateY(-2px);}
.lk-sw:disabled{cursor:default;}
.lk-sw:focus-visible{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(10,182,212,.35);}
.lk-sw.on{border-color:var(--cyan);box-shadow:0 0 20px -7px var(--cyan);}
.lk-art{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0,#16232b,#0a1015);}
.lk-art img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;}
.lk-badge,.lk-table,.lk-blank{width:100%;height:100%;}
/* GRTABLES.dress() writes the table's own eleven tokens onto this element; the only thing
   this rule adds is the box to spend them in. `--t-surface` is a full background shorthand,
   which is why it is set on `background` and not on `background-image`. */
.lk-table{background:var(--t-surface,#12242c);box-shadow:inset 0 0 0 1px var(--t-edge,transparent);}
/* ONE LINE, ALWAYS. A two-line name made its swatch 33px taller, and because the strip is a
   grid every swatch beside it stretched to match — a whole row of the locker changing height
   because one item is called "Crowned Bronze Shield". The full name stays on the button's
   title, so nothing is lost, and every swatch in every row is now the same box. */
.lk-nm{font-size:12px;font-weight:800;line-height:1.35;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lk-sw.locked .lk-art{filter:grayscale(.55) brightness(.55);}
.lk-sw.locked .lk-nm{color:var(--mut);}
.lk-chip{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:10.5px;
  font-weight:900;border-radius:999px;padding:3px 9px;color:#04222b;background:var(--cyan);}
.lk-chip.lk-off{background:transparent;border:1px solid var(--line);color:var(--mut);}
/* the placeholder that keeps an unchipped swatch exactly as tall as a chipped one — see the
   note in locker.js: without it, one worn swatch stretched every swatch in its grid row */
.lk-chip.lk-hold{visibility:hidden;background:transparent;border:1px solid transparent;}
.lk-chip.lk-hold::before{content:'\00a0';}
.lk-chip svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.lk-chip .lk{stroke-width:1.9;}
.lk-empty{padding:20px;text-align:center;color:var(--mut);font-size:13px;}

/* Arabic sets Cairo at 800+, which needs the taller line to stop the descenders touching —
   the same 1.7+ rule the rest of the site follows. */
body.ar .lk-nm{line-height:1.7;}