/* ════════════════════════════════════════════════════════════════════════════
   Магазин одежды: матрица размеров, каталог, уценка. Дополняет app.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── карточки моделей ──────────────────────────────────────────────────── */
.models{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:13px}
.model{--tint:transparent;position:relative;border-radius:6px;overflow:hidden;text-align:left;
  display:flex;flex-direction:column;
  background:color-mix(in srgb, var(--tint) 10%, color-mix(in srgb, var(--plate) 86%, transparent));
  border:1px solid color-mix(in srgb, var(--tint) 26%, var(--hair));
  backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:inset 0 1px 0 var(--plate-lip), 0 12px 26px -20px var(--shadow)}
.model:hover{border-color:color-mix(in srgb, var(--signal) 40%, var(--hair))}
.model.broken{--tint:var(--warn)}
.model.dead{--tint:var(--signal)}
.model .shot{aspect-ratio:3/4;background:var(--recess);overflow:hidden}
.model .shot img{width:100%;height:100%;object-fit:cover;display:block}
.model .mb{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px}
.model .mb b{font-family:var(--display);font-weight:600;font-size:14px;line-height:1.25}
.model .mb .pr{font-family:var(--mono);font-size:13px}
.model .mb .pr s{opacity:.4;margin-right:6px;font-size:11.5px}
.model .mb .pr em{font-style:normal;color:var(--signal)}
.model .mb .st{font-size:11.5px;opacity:.55;margin-top:3px}
.model .flag{position:absolute;top:8px;left:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:3px;
  background:color-mix(in srgb, var(--tint) 88%, transparent);color:#fff}

/* ── матрица цвет × size ─────────────────────────────────────────────── */
.mx{border-collapse:separate;border-spacing:0;width:100%;font-family:var(--mono);font-size:13px}
.mx th{font-family:var(--text);font-weight:500;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;opacity:.5;padding:0 0 7px;text-align:center}
.mx th:first-child{text-align:left}
.mx td{text-align:center;padding:4px 3px}
.mx td:first-child{text-align:left;font-family:var(--text);font-size:13px;opacity:.7;
  white-space:nowrap;padding-right:10px}
.mx .cell{display:block;width:100%;padding:7px 0;border-radius:4px;border:1px solid var(--hair);
  background:color-mix(in srgb,var(--plate) 60%,transparent);font:inherit;color:inherit;
  font-variant-numeric:tabular-nums}
.mx .cell.zero{opacity:.32;border-style:dashed}
.mx .cell.core{border-color:color-mix(in srgb,var(--live) 34%,var(--hair))}
.mx .cell.core.zero{border-color:color-mix(in srgb,var(--warn) 55%,var(--hair));
  color:var(--warn);opacity:.9;border-style:solid;
  background:color-mix(in srgb,var(--warn) 10%,transparent)}
.mx .cell.hold{border-color:color-mix(in srgb,var(--signal) 45%,var(--hair));color:var(--signal)}
button.cell:hover{border-color:var(--signal)}
.mx-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12px;opacity:.6}
.mx-legend span{display:flex;align-items:center;gap:6px}
.mx-legend i{width:12px;height:12px;border-radius:3px;border:1px solid var(--hair);display:block}
.mx-legend i.core{border-color:color-mix(in srgb,var(--live) 45%,var(--hair))}
.mx-legend i.gap{border-color:color-mix(in srgb,var(--warn) 60%,var(--hair));
  background:color-mix(in srgb,var(--warn) 14%,transparent)}
.mx-legend i.no{border-style:dashed;opacity:.4}

/* ── выбор размера на кассе ────────────────────────────────────────────── */
.pick{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.pick button{font-family:var(--mono);font-size:13px;padding:8px 13px;border-radius:4px;
  border:1px solid var(--hair);background:color-mix(in srgb,var(--plate) 55%,transparent);
  color:inherit;cursor:pointer}
.pick button.on{border-color:var(--signal);color:var(--signal)}
.pick button:disabled{opacity:.28;cursor:default;text-decoration:line-through}
.pick button:not(:disabled):hover{border-color:var(--signal)}

/* ── онлайн-заказы ─────────────────────────────────────────────────────── */
.ords{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:13px}
.ord-lines{list-style:none;margin:9px 0 0;padding:0;font-size:13.5px}
.ord-lines li{display:flex;gap:9px;align-items:center;padding:6px 0;
  border-bottom:1px solid color-mix(in srgb,var(--hair) 30%,transparent)}
.ord-lines li:last-child{border:0}
.ord-lines li img{width:34px;height:45px;object-fit:cover;border-radius:3px;flex:0 0 34px}
.ord-lines li i{font-style:normal;font-family:var(--mono);font-size:11.5px;opacity:.5}
.ord-lines li em{font-style:normal;margin-left:auto;font-family:var(--mono)}

/* ── уценка ────────────────────────────────────────────────────────────── */
.md-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:11px 16px;
  border-bottom:1px solid color-mix(in srgb,var(--hair) 42%,transparent)}
.md-row:last-child{border:0}
.md-row img{width:40px;height:53px;object-fit:cover;border-radius:3px;flex:0 0 40px}
.md-row .nm b{font-family:var(--display);font-weight:600;font-size:14.5px;display:block}
.md-row .nm span{font-size:12.5px;opacity:.55}
.md-row .why{margin-left:auto;text-align:right}
.md-row .why b{font-family:var(--mono);font-size:14px;display:block;color:var(--signal)}
.md-row .why span{font-size:11.5px;opacity:.5}