/* ============================================================
   МАГАЗИН: витрина, примерочная, коллекция и карточка предмета.

   Слой косметики (рубашки, рамки, титулы, аура сета) переехал в
   styles/cosmetics.css — его читает и сукно, и витрина, поэтому держать его
   в файле магазина было неправильно.

   Порядок подключения важен: cosmetics.css идёт ПЕРЕД этим файлом (см.
   index.html и styles/README.md). Здесь только магазин: ни одного правила,
   которое красит сам предмет.
   ============================================================ */

/* ========================= ШАПКА И ВКЛАДКИ ========================= */
.shop-top{display:flex;align-items:center;gap:10px;padding:6px 16px 10px}
.shop-back{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:11px;background:var(--card);border:1px solid var(--bord);font-size:20px;cursor:pointer}
.shop-title{font-family:'Unbounded','Rajdhani',sans-serif;font-weight:700;font-size:18px;flex:1}
.shop-bal{display:flex;gap:6px}
.shop-tabs{display:flex;gap:8px;padding:0 16px 12px}
.stab{flex:1;padding:9px 4px;border-radius:12px;border:1px solid var(--bord);background:var(--card);
  color:var(--muted);font-weight:700;font-size:12.5px;font-family:'Manrope',sans-serif}
.stab.on{color:var(--text);border-color:var(--p1);background:rgba(124,92,255,.14);
  box-shadow:0 0 14px rgba(124,92,255,.2)}
.stabpane{display:none;padding:0 16px}
.stabpane.on{display:block;animation:fade .25s ease}

/* Заголовок полки. */
.shop-cat{display:flex;align-items:center;gap:7px;margin:16px 2px 9px;font-size:12px;
  color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.shop-cat i{font-size:15px;color:var(--p1)}
.shop-cat .rest{margin-left:auto;font-weight:700;font-size:10.5px;letter-spacing:.4px;color:var(--dim)}

/* ========================= ВИТРИНА НЕДЕЛИ ========================= */
/* Причина заходить в магазин: четыре товара с таймером. Раньше витрина была
   статичным списком — посмотрел один раз, дальше незачем. */
.feat-head{display:flex;align-items:baseline;gap:8px;margin:6px 2px 9px}
.feat-head .lb{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.feat-head .tm{margin-left:auto;font-family:'Rajdhani';font-weight:700;font-size:12px;color:var(--gold)}
.feat-row{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.feat-row::-webkit-scrollbar{display:none}
.feat{
  flex:none;width:158px;border-radius:16px;padding:11px;cursor:pointer;position:relative;overflow:hidden;
  border:1px solid var(--rc,var(--bord));
  background:
    radial-gradient(90% 130% at 100% 0%, color-mix(in srgb, var(--rc) 26%, transparent), transparent 62%),
    linear-gradient(140deg,rgba(124,92,255,.14),rgba(8,6,15,.5));
}
.feat .sw{height:66px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.feat .nm{font-weight:800;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feat .rr{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--rc);margin-bottom:7px}

/* ========================= ПОЛКА ========================= */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.citem{position:relative;border-radius:15px;padding:11px;background:var(--card);
  border:1px solid var(--rc,var(--bord));overflow:hidden;cursor:pointer}
.citem .rglow{position:absolute;inset:0;pointer-events:none;opacity:.12;
  background:radial-gradient(circle at 50% 0%,var(--rc),transparent 70%)}
.citem .sw{height:62px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.citem .cn{font-weight:700;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.citem .cr{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--rc,var(--muted));margin-bottom:7px;display:flex;align-items:center;gap:5px}
.citem .cr .set{color:var(--dim);letter-spacing:0;text-transform:none;font-weight:600}

/* Кнопка «купить / надеть / надето / не продаётся» — одна форма, четыре роли. */
.buy{width:100%;border:1px solid var(--bord);border-radius:10px;padding:7px;font-weight:700;
  font-size:12px;font-family:'Rajdhani';display:flex;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;background:transparent;color:var(--text)}
.buy i{font-size:14px}.buy .gold{color:var(--gold)}.buy .gem{color:var(--teal)}
.buy.equipped{color:#04241c;background:var(--teal);border-color:var(--teal)}
.buy.equip{color:var(--teal);border-color:rgba(45,226,197,.5);background:rgba(45,226,197,.08)}
.buy.locked{color:var(--dim);border-style:dashed;cursor:default}
.buy:active{transform:scale(.97)}

/* ========================= ОБРАЗЦЫ ========================= */
/* Хозяева красящего слоя: позиционированы и имеют размер (см. cosmetics.css). */
.sw-back{position:relative;width:38px;height:53px;border-radius:6px;overflow:hidden;--emb:15px;
  box-shadow:0 3px 8px rgba(0,0,0,.45)}
.sw-back.lg{width:52px;height:73px;border-radius:8px;--emb:21px}
.sw-frame{width:46px;height:46px;border-radius:50%;position:relative;
  background:linear-gradient(135deg,#7C5CFF,#B14BFF)}
.sw-frame .frm{position:absolute;inset:-4px;border-radius:50%;background:var(--ring);
  -webkit-mask:radial-gradient(transparent 21px,#000 22px);mask:radial-gradient(transparent 21px,#000 22px);
  filter:drop-shadow(0 0 6px var(--glow,transparent))}
.sw-chip{width:30px;height:30px;border-radius:50%;background:var(--chipc);
  border:2px dashed rgba(255,255,255,.6);box-shadow:0 0 12px var(--chipc)}
.sw-plate{padding:6px 12px;border-radius:9px;border:1px solid;font-weight:700;font-size:11px}
.sw-title{font-family:'Rajdhani';font-weight:700;font-size:13px;letter-spacing:1px;
  text-transform:uppercase;color:var(--tc);text-align:center;line-height:1.15}
.sw-title.none{color:var(--dim);text-transform:none;font-size:12px;letter-spacing:0}

/* Образец компаньона. Дрон рисуется тем же ригом, что за столом (companion/
   rig.js), поэтому здесь только рамка кадра — вид приезжает вместе с ним. */
.sw-pet{position:relative;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
.sw-pet.lg{width:120px;height:120px}
.ins-hero-pet{padding-bottom:6px}
/* У модуля статичной картинки нет — есть подпись сцены и кнопка «Тест». */
.sw-strike{flex-direction:column;gap:4px;width:auto;height:auto;min-width:120px}
.sw-strike-tag{font-family:'Rajdhani';font-weight:700;font-size:9px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--teal);text-align:center;line-height:1.1}
.sw-strike.lg .sw-strike-tag{font-size:12px}

/* ===== стенд испытаний в карточке предмета =====
   Товар, чья ценность — полторы секунды зрелища, нельзя продавать статичной
   карточкой. Две болванки и кнопка: ракету дают запустить ДО покупки. */
.ins-bench{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:12px;margin:2px 0 12px;border-radius:12px;
  background:radial-gradient(120% 160% at 50% 20%,#16543f,#07281f 66%,#041813);
  border:1px solid rgba(255,194,75,.22)}
.ins-bench .bench-pad{position:relative;width:52px;height:52px;display:flex;
  align-items:center;justify-content:center;border-radius:10px}
.ins-bench .bench-pad.target{border:1px dashed rgba(255,255,255,.28);color:var(--dim);font-size:20px;
  transition:border-color .2s,color .2s}
.ins-bench .bench-pad.target.hit{border-color:var(--pink);color:var(--pink)}
.ins-bench .bench-arrow{flex:1;height:1px;max-width:70px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 5px,transparent 5px 10px)}
.ins-bench .bench-go{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:10px;
  font-family:inherit;font-weight:700;font-size:12px;cursor:pointer;color:#04241c;border:0;
  background:linear-gradient(135deg,#a9fbea,#2DE2C5)}
.ins-bench .bench-go:active{transform:scale(.96)}

/* Слой компаньонов живёт на z-index 44 (под подписями стола). Карточка
   предмета — оверлей на 70, и без этого подъёма тестовая сцена честно
   проигралась бы ЗА ней. Класс висит только на время теста. */
#companions.over-card{z-index:80}

/* ========================= ПРИМЕРОЧНАЯ ========================= */
/* Примерка на мини-сукне, а не портрет на пустом фоне: важно, как вещь увидят
   ДРУГИЕ, а это видно только на зелёном и рядом с чужими образами. */
.dress-felt{
  position:relative;border-radius:100px/74px;padding:20px 14px 16px;margin:2px 0 4px;
  background:radial-gradient(120% 140% at 50% 26%, #16543f, #07281f 62%, #041813);
  border:1px solid rgba(255,194,75,.26);
  box-shadow:inset 0 0 30px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.45);
  display:flex;flex-direction:column;align-items:center;gap:9px;
}
.dress-felt .board{display:flex;gap:4px}
.dress-felt .fc{width:26px;height:37px;border-radius:5px;position:relative;flex:none;
  background:linear-gradient(160deg,#fff,#e9e6f7);box-shadow:0 3px 7px rgba(0,0,0,.45);
  font-family:'Rajdhani';font-weight:700}
.dress-felt .fc i{position:absolute;top:2px;left:3px;font-style:normal;font-size:10px;line-height:1}
.dress-felt .fc b{position:absolute;bottom:1px;right:2px;font-size:13px;line-height:1}
.dress-felt .fc.red{color:#E23B5C}.dress-felt .fc.blk{color:#1b1340}
.dress-felt .me{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.dress-felt .hand{display:flex;gap:5px}
/* Дрон в примерочной стоит ТАМ ЖЕ, где за столом: слева от карт у себя,
   у плеча аватара у соседей. Примерочная, показывающая вещь не на своём
   месте, обманывает покупателя. */
.dress-felt .dress-pet{position:absolute;pointer-events:none}
.dress-felt .me .dress-pet{left:-6px;top:2px}
.dress-felt .opp .dress-pet{right:-8px;top:-8px}
.dress-felt .opp{position:absolute;display:flex;flex-direction:column;align-items:center;gap:3px}
.dress-felt .opp.l{left:12px;top:16px}
.dress-felt .opp.r{right:12px;top:16px}
.dress-felt .opp .hand .sw-back{width:20px;height:28px;border-radius:4px;--emb:8px}
.dress-felt .opp .nick{font-size:8.5px;color:#cfc8ff}
.dress-felt .nameline{display:flex;flex-direction:column;align-items:center;gap:3px}
.dress-felt .avwrap{position:relative}

.dp-slot{margin-top:14px}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp-head .lab{font-weight:700;font-size:13px}
.dp-head .cur{font-size:11px;color:var(--muted)}
.dp-row{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.dp-row::-webkit-scrollbar{display:none}
.dp-opt{flex:none;width:74px;border-radius:13px;padding:9px 7px;background:var(--card);
  border:1px solid var(--rc,var(--bord));text-align:center;cursor:pointer;opacity:.85}
/* Выбранное отмечается галочкой, а не только цветом рамки: у редких предметов
   рамка по редкости бирюзовая, и «надето» было от неё не отличить. */
.dp-opt{position:relative}
.dp-opt.on{opacity:1;border-color:var(--teal);box-shadow:0 0 12px rgba(45,226,197,.25)}
.dp-opt.on::after{
  content:'✓';position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:800;
  color:#04241c;background:var(--teal);box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.dp-opt.locked{opacity:.42}
.dp-opt .swm{height:46px;display:flex;align-items:center;justify-content:center;margin-bottom:5px}
.dp-opt .nm{font-size:9.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-opt .lk{font-size:9px;color:var(--muted);margin-top:1px}

/* ========================= КОЛЛЕКЦИЯ ========================= */
/* Место, где вещи лежат как вещи: по сетам, с происхождением и прогрессом. */
.coll-sum{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 4px}
.coll-card{padding:13px;border-radius:15px;background:var(--card);border:1px solid var(--bord)}
.coll-card .k{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.coll-card .v{font-family:'Rajdhani';font-weight:700;font-size:22px;line-height:1.1;margin-top:2px}
.coll-card .v small{font-size:13px;color:var(--muted);font-weight:700}

/* Обёртка полок сетов. На телефоне её в потоке нет (`display:contents`) — сеты
   идут подряд, как и раньше; сеткой она становится только на десктопе. */
.setgrid{display:contents}
.setrow{margin-top:14px;padding:13px;border-radius:15px;background:var(--card);
  border:1px solid color-mix(in srgb, var(--sc) 45%, transparent)}
.setrow .top{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.setrow .top .nm{font-weight:800;font-size:14px;color:var(--sc)}
.setrow .top .pr{margin-left:auto;font-family:'Rajdhani';font-weight:700;font-size:13px;color:var(--muted)}
.setrow .bar{height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:11px}
.setrow .bar i{display:block;height:100%;border-radius:3px;background:var(--sc)}
.setrow .items{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none}
.setrow .items::-webkit-scrollbar{display:none}
.setrow .it{flex:none;width:66px;text-align:center;cursor:pointer;opacity:.4}
.setrow .it.have{opacity:1}
.setrow .it .swm{height:56px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.setrow .it .nm{font-size:9px;font-weight:700;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Метка происхождения: заслугу нельзя купить — и это её главная ценность. */
.src{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 6px;border-radius:6px;white-space:nowrap}
.src-shop{color:var(--muted);background:rgba(255,255,255,.07)}
.src-starter{color:var(--dim);background:rgba(255,255,255,.05)}
.src-ranked{color:#04241c;background:var(--teal)}
.src-club{color:#2a1600;background:var(--gold)}
.src-season{color:#fff;background:var(--mag)}

/* ========================= КАРТОЧКА ПРЕДМЕТА ========================= */
/* Того, чего не было совсем: у вещи появляется материал, сет, сезон и
   происхождение. Это превращает позицию каталога в вещь. */
.ins-back{position:fixed;inset:0;z-index:70;background:rgba(4,3,10,.72);
  backdrop-filter:blur(6px);display:flex;align-items:flex-end;animation:fade .2s ease}
/* `display:flex` в классе сильнее атрибута `hidden` — без этой строки закрытая
   карточка остаётся размытым слоем поверх всего магазина. */
.ins-back[hidden]{display:none}
.ins{width:100%;max-height:88dvh;overflow-y:auto;padding:18px 16px 22px;
  border-radius:24px 24px 0 0;background:var(--lg-strong);border-top:1px solid var(--rc,var(--bord));
  box-shadow:var(--shadow-pop);animation:insup .28s var(--ease-glass)}
@keyframes insup{from{transform:translateY(14%)}to{transform:none}}
.ins-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ins-top .nm{font-family:'Unbounded','Rajdhani',sans-serif;font-weight:700;font-size:17px;flex:1}
.ins-x{width:30px;height:30px;flex:none;border-radius:10px;background:var(--glass);
  border:1px solid var(--bord);color:var(--muted);font-size:16px;cursor:pointer}
.ins-hero{display:flex;justify-content:center;padding:6px 0 14px}
.ins-back-card{position:relative;width:92px;height:130px;border-radius:11px;overflow:hidden;--emb:38px;
  box-shadow:0 12px 30px rgba(0,0,0,.6)}
.ins-rar{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rc)}
.ins-lore{font-size:13px;color:var(--muted);font-style:italic;line-height:1.5;
  padding-left:11px;border-left:2px solid var(--rc);margin-bottom:14px}
.ins-meta{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:12.5px;margin-bottom:16px}
.ins-meta dt{color:var(--dim);white-space:nowrap;margin:0}
.ins-meta dd{margin:0;font-weight:600}
.ins-acts{display:flex;gap:9px}
.ins-acts .buy{flex:1}
.ins-acts .buy.go{color:#2a1600;background:linear-gradient(135deg,#FFE6A8,var(--gold));border-color:transparent}
.ins-acts .buy.go.gems{color:#04241c;background:linear-gradient(135deg,#a9fbea,var(--teal))}

.gemPill{cursor:pointer}
.waiting{padding:24px 0;text-align:center;color:var(--dim);font-size:13px}

/* ========================= ПЛАНШЕТ ========================= */
/* 769–1023: сцена ещё узкая (#scr ограничен 560px), поэтому меняется только
   то, что в две колонки уже не влезает. Отступ 16px общий для шапки, вкладок
   и полок — раньше панель обнуляла свой, и содержимое уезжало на 16px влево
   от заголовка. */
@media (min-width:900px){
  .cgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .coll-sum{grid-template-columns:repeat(2,1fr)}
  .ins-back{align-items:center;justify-content:center}
  .ins{max-width:520px;border-radius:22px;border:1px solid var(--rc,var(--bord))}
  .dress-felt{max-width:520px;margin:2px auto 4px}
}

/* ========================= ДЕСКТОП ========================= */
/* Магазин на широком экране — раздел приложения, а не мобильный экран во весь
   вьюпорт: слева остаётся сайдбар (см. desktop.css), сцена отдаётся витрине
   целиком, кнопка «назад» не нужна.

   Три вещи, из-за которых мобильная вёрстка на десктопе выглядела кривой:
   · страница жила в читаемой колонке 680px, а слева пустовал зарезервированный
     под сайдбар отступ 240px — витрина стояла не по центру и занимала половину
     экрана;
   · горизонтальные скроллеры (витрина недели, полки слотов, предметы сета) на
     десктопе прокручивать нечем: мышь их не тянет, а последний предмет
     обрезался краем колонки. Здесь они — сетки с переносом;
   · размеры образцов и плиток мобильные: на 215-пиксельной плитке рубашка
     38×53 выглядела потерянной.

   Ховеры добавлены только здесь: на телефоне их нет, и трогать базу нельзя. */
@media (min-width:1024px){
  /* ---- сцена и общая сетка страницы ---- */
  #p-shop{top:0;left:0;right:0;width:auto;padding:0 32px 44px}
  .shop-top,.shop-tabs,.shop-body{max-width:1180px;margin-left:auto;margin-right:auto;
    padding-left:0;padding-right:0}

  /* ---- шапка: заголовок и кошелёк, как в десктопном лобби ---- */
  .shop-back{display:none}          /* назад — это сайдбар */
  .shop-top{padding-top:26px;padding-bottom:0;gap:14px}
  .shop-title{font-family:'Unbounded','Rajdhani',sans-serif;font-weight:800;font-size:26px}
  .shop-bal{gap:11px}
  .shop-bal .cpill{font-size:15px;padding:9px 13px;border-radius:13px}
  .shop-bal .cpill i{font-size:18px}

  /* ---- вкладки: сегменты по содержимому, а не три растянутые кнопки ---- */
  .shop-tabs{gap:9px;padding-top:20px;padding-bottom:22px}
  .stab{flex:none;padding:10px 22px;font-size:13.5px;cursor:pointer;
    transition:color .15s,background .15s,border-color .15s}
  .stab:hover{color:var(--text);background:rgba(255,255,255,.06);border-color:rgba(124,92,255,.3)}
  .stab.on:hover{background:rgba(124,92,255,.2)}
  .stabpane{padding:0}

  /* ---- витрина недели: сетка, а не скроллер ---- */
  .feat-head{margin:0 2px 12px}
  .feat-head .lb{font-size:13px}
  .feat-head .tm{font-size:14px}
  /* Четыре товара витрины: на узком десктопе 2×2, на широком — в одну строку
     (см. блок ≥1280). Ряд из трёх с одиноким четвёртым под ним — хуже обоих. */
  .feat-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;overflow:visible;padding:0}
  .feat{width:auto;padding:16px;border-radius:20px;transition:transform .16s,box-shadow .16s}
  .feat:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.45)}
  .feat .sw{height:118px;margin-bottom:12px}
  .feat .nm{font-size:15px}
  .feat .rr{font-size:10px;margin-bottom:11px}

  /* ---- полки ---- */
  .shop-cat{margin:28px 2px 12px;font-size:12.5px}
  .shop-cat i{font-size:16px}
  .cgrid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px}
  .citem{padding:14px;border-radius:18px;transition:transform .16s,box-shadow .16s}
  .citem:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.42)}
  .citem .sw{height:88px;margin-bottom:10px}
  .citem .cn{font-size:13.5px}
  .citem .cr{font-size:10px;margin-bottom:9px}

  /* ---- образцы под крупную плитку ----
     У рамки вместе с размером обязан меняться радиус маски: кольцо — полоса
     ВОКРУГ портрета (cosmetics.css), и от старой дырки 21px на 56 пикселях
     остаётся заливка вместо кольца. Толщина всюду те же 6px. */
  .citem .sw-back{width:50px;height:70px;border-radius:8px;--emb:20px}
  .citem .sw-frame{width:56px;height:56px}
  .citem .sw-frame .frm{-webkit-mask:radial-gradient(transparent 26px,#000 27px);
    mask:radial-gradient(transparent 26px,#000 27px)}
  .citem .sw-chip{width:38px;height:38px}
  .citem .sw-plate{font-size:12px;padding:7px 13px}
  .citem .sw-title{font-size:14px}
  .feat .sw-back.lg{width:76px;height:107px;border-radius:11px;--emb:31px}
  .feat .sw-frame{width:66px;height:66px}
  .feat .sw-frame .frm{-webkit-mask:radial-gradient(transparent 31px,#000 32px);
    mask:radial-gradient(transparent 31px,#000 32px)}
  .feat .sw-chip{width:46px;height:46px}
  .feat .sw-plate{font-size:13px;padding:8px 16px}
  .feat .sw-title{font-size:16px}

  /* ---- кнопка действия ---- */
  .buy{padding:8px;font-size:12.5px;transition:background .14s,border-color .14s,color .14s}
  .buy.equipped,.buy.locked{cursor:default}
  .buy:not(.locked):not(.equipped):hover{border-color:rgba(124,92,255,.55);background:rgba(124,92,255,.14)}
  .buy.equip:hover{border-color:var(--teal);background:rgba(45,226,197,.16)}

  /* ---- примерочная ----
     Сукно становится настоящим овалом: мобильные 100px/74px на 340 пикселях
     читались как скруглённый прямоугольник, а не как стол. */
  .dress-felt{max-width:440px;margin:0 auto;padding:32px 20px 24px;border-radius:50%/44%}
  /* Внутри эллипса верхние углы узкие: соседи по прежним 12px оказывались
     за краем сукна. Проценты держат их на зелёном при любой ширине колонки. */
  .dress-felt .opp.l{left:16%;top:16%}
  .dress-felt .opp.r{right:16%;top:16%}
  .dress-slots{min-width:0}
  .dp-slot{margin-top:0}
  .dp-slot+.dp-slot{margin-top:24px}
  /* Что надето — рядом с названием слота, а не у правого края: на телефоне это
     концы одной строки в 340px, на десктопе между ними была вся ширина полки. */
  .dp-head{justify-content:flex-start;gap:10px;margin-bottom:10px}
  .dp-head .lab{font-size:14px}
  .dp-head .cur{font-size:11.5px;padding:3px 9px;border-radius:8px;
    background:rgba(255,255,255,.06);border:1px solid var(--bord)}
  .dp-head .cur:empty{display:none}
  .dp-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
    gap:10px;overflow:visible;padding:0}
  .dp-opt{width:auto;padding:11px 8px;transition:transform .14s,opacity .14s,border-color .14s}
  .dp-opt:not(.locked):hover{opacity:1;transform:translateY(-2px)}
  .dp-opt .swm{height:56px;margin-bottom:7px}
  .dp-opt .nm{font-size:10.5px}

  /* ---- коллекция ----
     Объём этой вкладки от аккаунта почти не зависит: итогов всегда два, сетов в
     каталоге два, заслуг две. Поэтому панель честно двухколоночная и шире не
     тянется — на всю сцену она оставляла пустую треть справа, а ряды кончались
     на разной высоте, и вкладка читалась как недоделанная. Все три блока —
     итоги, сеты, заслуги — идут по одним дорожкам. */
  #shopColl{max-width:880px}
  .coll-sum,.setgrid,#shopColl .cgrid{display:grid;gap:16px;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .coll-sum{margin:0}
  .setgrid{margin-top:20px;align-items:start}
  .coll-card{padding:17px 19px;border-radius:18px}
  .coll-card .v{font-size:27px}
  .setrow{margin-top:0;padding:16px 18px;border-radius:18px}
  .setrow .top .nm{font-size:15px}
  .setrow .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));
    gap:10px;overflow:visible}
  .setrow .it{width:auto;transition:transform .14s,opacity .14s}
  .setrow .it:hover{opacity:1;transform:translateY(-2px)}

  /* ---- карточка предмета ---- */
  .ins{padding:22px 22px 24px}
  .ins-x{transition:color .14s,background .14s}
  .ins-x:hover{color:var(--text);background:rgba(255,255,255,.1)}
  .ins-acts .buy.go:hover{filter:brightness(1.07)}
}

/* ========================= ШИРОКИЙ ЭКРАН ========================= */
/* Тот же порог, что у рельсов стола: 1280 — ширина, на которой сцене хватает
   места на две колонки. Ровно здесь примерка встаёт рядом с полками слотов, а
   витрина недели выстраивается в одну строку. */
@media (min-width:1280px){
  .feat-row{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

  /* Примерка слева, полки справа. Сукно липкое: листаешь слот — вещь на виду,
     а не уехала вверх, как это было в одной колонке. */
  #shopDress.on{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);
    gap:30px;align-items:start}
  .dress-felt{position:sticky;top:14px;max-width:none;margin:0;padding:34px 22px 26px}
}