/* Публичная витрина: прилавок коллекционера — тёплый уголь, сукно, янтарные
   ценники. Самодостаточна: шрифт и стили только свои (CSP default-src 'none'). */

@font-face {
  font-family: "Oranienbaum";
  src: url("/web/static/fonts/Oranienbaum.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Атрибут hidden должен побеждать любые author-правила display (.card-tile и
   .list-row — display:flex, что без этого перебивало UA-стиль [hidden] и ломало
   «Показать ещё» и живой поиск: плитки оставались видимыми). */
[hidden] { display: none !important; }

:root {
  --bg: #16120e;
  --felt: #1f1913;
  --felt-edge: #35291d;
  --ink: #f0e9dd;
  --ink-soft: #bfae90;
  --amber: #e2a83e;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --shadow: 0 8px 22px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }

html { scrollbar-color: var(--felt-edge) var(--bg); }

body.showcase {
  margin: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, #211a12 0%, var(--bg) 58%);
  color: var(--ink);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--amber); color: #241a08; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}

main {
  max-width: 1500px;
  margin: 0 auto;
  /* нижний отступ держит плавающие кнопки: раньше пилюля корзины накрывала
     последний ряд плиток и кнопку «Показать ещё» */
  padding: 0 1.25rem 6rem;
}

/* ---------- Вывеска ---------- */

.shop-head { padding: 1.1rem 1.25rem 0.8rem; }
.shop-head h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); }

.shop-head {
  max-width: 1500px;
  margin: 0 auto;
  border-bottom: 1px solid var(--felt-edge);
}

.shop-head h1 {
  margin: 0;
  font-family: "Oranienbaum", "Georgia", serif;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* Вывеска сведена к трём строкам: имя, одна строка факта, ряд действий.
   Всё остальное (условия, состояние, откуда цены) — внутри «Как купить»:
   гостю с телефона первый экран нужен под карты, а не под текст о них. */
.shop-meta {
  margin: 0.45rem 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.shop-head-actions .tg-link {
  padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.92rem;
}

.shop-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.7rem 0 0;
}

.shop-terms { max-width: 68ch; }
.shop-terms summary {
  cursor: pointer; color: var(--ink-soft); font-size: 0.92rem;
  padding: 0.35rem 0.8rem; background: var(--felt);
  border: 1px solid var(--felt-edge); border-radius: 999px;
  width: fit-content;
}
/* раскрытая панель уходит на свою строку целиком, а не жмётся рядом с Telegram */
.shop-head-actions .shop-terms[open] { flex-basis: 100%; }
.shop-terms[open] summary { border-radius: 10px 10px 0 0; }
.shop-terms-body {
  padding: 0.7rem 0.9rem; background: var(--felt);
  border: 1px solid var(--felt-edge); border-top: 0;
  border-radius: 0 0 10px 10px;
}
.shop-terms-body p { margin: 0 0 0.5rem; color: var(--ink-soft); font-size: 0.92rem; }
.shop-terms-body p:last-child { margin-bottom: 0; }
/* условия владельца приходят из настроек списком со своими переносами — сохраняем их */
.shop-terms-body .owner-terms, .item-facts .owner-terms { white-space: pre-line; }
/* на странице одной карты условия лежат вне ряда действий — панель там своя */
.item-facts .shop-terms p {
  margin: 0; padding: 0.7rem 0.9rem; background: var(--felt);
  border: 1px solid var(--felt-edge); border-top: 0; color: var(--ink-soft);
  font-size: 0.92rem;
}
.item-facts .shop-terms .muted-note { border-radius: 0 0 10px 10px; padding-top: 0.2rem; }

/* ---------- Рекламная полоса аукционов ---------- */
/* Широкая полоса под вывеской: карты, занятые лотом, из ленты скрыты, и это
   единственное место, где покупатель их видит. Активный лот — ссылка на площадку,
   очередь — анонс без ссылки (лота ещё нет). Янтарь остаётся голосом цены и
   действия: ставка, «Ставка на topdeck», точка «идут сейчас». */

.auction-banner {
  /* янтарная кромка сверху: полоса читается отдельной афишей, а не куском ленты */
  border-top: 1px solid var(--amber);
  border-bottom: 1px solid var(--felt-edge);
  background:
    linear-gradient(180deg, rgba(226, 168, 62, 0.05) 0%, transparent 40%),
    var(--felt);
}

.ab-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0.85rem 1.25rem 0.95rem;
  display: grid;
  gap: 0.7rem;
}

.ab-head h2 {
  margin: 0;
  font-family: "Oranienbaum", "Georgia", serif;
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.01em;
}
.ab-head p { margin: 0.25rem 0 0; color: var(--ink-soft); font-size: 0.88rem; }

.ab-group { display: grid; gap: 0.35rem; }

.ab-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ab-title--queued, .ab-group--queued .ab-title { color: var(--ink-soft); }
.ab-count {
  display: inline-grid; place-items: center;
  min-width: 1.5em; padding: 0 0.3em;
  border: 1px solid var(--felt-edge); border-radius: 999px;
  color: var(--ink-soft); font-size: 0.72rem; font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
/* точка «в эфире»: единственная анимация полосы, и она про состояние */
.ab-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(226, 168, 62, 0.55);
  animation: ab-pulse 2.4s var(--ease-out) infinite;
}
@keyframes ab-pulse {
  0% { box-shadow: 0 0 0 0 rgba(226, 168, 62, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(226, 168, 62, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 168, 62, 0); }
}

/* Лоты в ряд; на узких экранах — горизонтальная прокрутка вместо сжатия карточек */
.ab-lots {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Ряд заполняет ширину полосы: фиксированная ширина колонок прижимала пять
     карточек к левому краю, и на широком экране полоса читалась как узкая
     недоделанная лента. Фото при этом не растёт вместе с колонкой (max-width
     ниже) — иначе карточки раздувались в полэкрана по высоте. */
  /* Все лоты — в одну строку равными долями: с minmax в пикселях ряду не хватало
     десятка пикселей на 1440, пятая карточка уезжала во второй ряд и полоса
     вырастала вдвое. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.9rem 0.8rem;
}
.ab-lot { min-width: 0; }

.ab-card {
  display: grid;
  gap: 0.05rem;
  align-content: start;
  height: 100%;
  padding: 0.5rem 0.55rem 0.55rem;
  /* Текст слева, фото справа: вертикальная плитка держала кадр в 118px, а на
     аукционе покупатель решает именно по фото — в две колонки он вдвое выше
     при той же высоте карточки. */
  /* фото слева, текст справа; колонка фото задана абсолютно: с `auto` и
     процентным max-width ширина кадра зависела от самой себя, и браузер
     вырождал бокс в 46px */
  position: relative;
  /* две колонки: кадр и один текстовый блок. Пять grid-областей растягивались
     по высоте карточки и разносили имя, цену и отсчёт по углам. */
  grid-template-columns: clamp(92px, 10vw, 146px) minmax(0, 1fr);
  grid-template-areas: "photo text";
  gap: 0 0.7rem;
  /* текстовый блок центрируем по кадру и по горизонтали: подписи стоят колонкой
     справа от кадра, и выключка по центру держит её как единый ярлык */
  align-content: center;
  text-align: center;
  border: 1px solid var(--felt-edge);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
a.ab-card:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  a.ab-card:hover { border-color: var(--amber); transform: translateY(-2px); }
}
.ab-card img {
  grid-area: photo;
  /* Высота кадра считается от экрана: полоса не должна занимать больше половины
     первого экрана. object-fit: contain — кадр целиком, без обрезки краёв. */
  /* кадр обрезается по пропорции карты: на снимке лота много красной подложки,
     и cover отдаёт место самой карте (полный кадр остаётся в лайтбоксе) */
  width: 100%;
  aspect-ratio: 63 / 88;
  height: auto;
  object-fit: cover;
  background: var(--felt);
  border-radius: 7px;
  display: block;
  align-self: center;
  margin: 0;
}
.ab-nophoto {
  grid-area: photo;
  display: grid; place-items: center;
  aspect-ratio: 63 / 88;
  width: 100%;
  align-self: center;
  border: 1px dashed var(--felt-edge); border-radius: 7px;
  color: var(--ink-soft); font-size: 0.72rem;
}
.ab-text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.12rem;
  min-width: 0;
}

.ab-name {
  /* обычный перенос по словам: имя карты обрезать нельзя, а места в карточке
     ростом с кадр хватает на две-три строки */
  font-weight: 600;
  /* 0.78rem: на 0.82 «Hybridization» не влезало в колонку и рвалось по слогам */
  font-size: 0.78rem;
  line-height: 1.2;
  overflow-wrap: break-word;
}
.ab-details {
  color: var(--ink-soft);
  font-size: 0.68rem;
  line-height: 1.25;
  /* печать умещается несколькими строками между именем и ставкой; значок сета
     (keyrune) тот же, что на плитках ленты */
  overflow-wrap: break-word;
}
.ab-bid {
  margin-top: 0.2rem;
  white-space: nowrap;
  /* цена — главный голос карточки: крупнее имени и заметно крупнее отсчёта */
  color: var(--amber);
  font-weight: 700;
  /* 1.15rem вылезал за узкую колонку: «старт 500 ₽» длиннее одной цифры */
  font-size: 1.02rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.ab-bidnote {
  /* «3 ставки» — сигнал, что лот живой: янтарная точка перед подписью */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.ab-bidnote.is-live::before {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--amber);
}
.ab-card:not(.ab-card--queued) .ab-time {
  /* отсчёт уступает цене: моно-цифры приглушённым цветом с иконкой часов —
     смысл читается без слова «осталось» */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.15rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.ab-clock { flex: none; opacity: 0.8; }
.ab-arrow {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  color: var(--ink-soft);
  opacity: 0.55;
  transition: color 160ms var(--ease-out), opacity 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  a.ab-card:hover .ab-arrow { color: var(--amber); opacity: 1; }
}

/* Очередь — тише и компактнее: анонс, а не призыв к действию. Строкой вместо
   плитки, чтобы полоса-баннер не вытесняла саму витрину за первый экран. */
.ab-group--queued .ab-lots { grid-auto-columns: minmax(0, 1fr); }
.ab-card--queued {
  /* очередь без рамки: это анонс, а не действие — рамки остаются активным лотам */
  border-color: transparent;
  grid-template-columns: min(6.5vh, 54px) minmax(0, 1fr);
  grid-template-areas: "photo name" "photo details" "photo time";
  align-content: center;
  gap: 0.05rem 0.6rem;
  background: transparent;
  cursor: zoom-in;
}
@media (hover: hover) and (pointer: fine) {
  a.ab-card--queued:hover { background: var(--bg); border-color: var(--felt-edge); }
}
.ab-card--queued img {
  grid-area: photo;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  align-self: start;
  width: 100%;
  margin: 0;
  border-radius: 5px;
  opacity: 0.9;
}
.ab-card--queued .ab-nophoto { grid-area: photo; height: auto; width: 100%;
  font-size: 0.62rem; }
.ab-card--queued .ab-text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.12rem;
  min-width: 0;
}

.ab-card--queued .ab-name {
  color: var(--ink);
  font-size: 0.85rem;
  /* строго одна строка: двойные имена («A // B») наезжали на дату выхода */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ab-card--queued .ab-details { grid-area: details; }
.ab-card--queued .ab-bid { display: none; }
.ab-card--queued .ab-time {
  grid-area: time;
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  /* на телефоне ряд прокручивается, а не растёт в столбик на три экрана */
  .ab-lots {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 140px;
    justify-content: start;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 0.2rem;
  }
  .ab-group--queued .ab-lots { grid-auto-columns: 236px; }
  .ab-card:not(.ab-card--queued) { grid-template-columns: 104px minmax(0, 1fr); }
  .ab-card:not(.ab-card--queued) .ab-details { -webkit-line-clamp: 2; }
  .ab-lots { grid-auto-columns: 252px; }
  /* карточка сама — ссылка на площадку, отдельная строка со стрелкой лишняя;
     печать в узкой колонке тоже не помещается осмысленно */
  .ab-arrow { top: 0.35rem; right: 0.35rem; }
  .ab-card--queued { grid-template-columns: min(5.5vh, 46px) minmax(0, 1fr); }
  .ab-card--queued img { height: auto; }
}
@media (max-width: 560px) {
  .ab-inner { padding: 0.7rem 0.9rem 0.8rem; gap: 0.55rem; }
  .ab-head h2 { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-dot { animation: none; }
  .ab-card { transition: none; }
}

/* ---------- Панель поиска и фильтров ---------- */
/* «Ящик прилавка»: поиск и действие сверху, уточнения ровной сеткой ниже.
   Сортировка живёт рядом с кнопкой, а не среди фильтров: она не сужает
   выдачу, а меняет порядок — смешивать их значит путать гостя. */

.shop-filters {
  margin: 1.1rem 0 0;
  padding: 0.85rem 0.9rem 0.9rem;
  background: var(--felt);
  border: 1px solid var(--felt-edge);
  border-radius: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem 0.8rem;
  align-items: end;
}

.shop-filters input,
.shop-filters select,
.shop-filters button {
  font: inherit;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--felt-edge);
  background: var(--bg);
  color: var(--ink);
}
.shop-filters select { min-height: 40px; width: 100%; }
.shop-filters input::placeholder { color: var(--ink-soft); opacity: 0.7; }

/* Верхняя строка панели — ввод и действие; уточнения строкой ниже. Позиции
   заданы явно: без них .adv (во всю ширину) сбрасывал сортировку с кнопкой
   на третью строку и панель росла в высоту зря. */
.shop-filters { position: relative; grid-template-columns: auto minmax(0, 1fr) auto; }
.finder-alt { grid-column: 1; grid-row: 1; }
.search-field { grid-column: 2; grid-row: 1; }
.filter-tail { grid-column: 3; grid-row: 1; }
.finder-row2 { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }

/* Второй вход — подбор по списку: та же высота и тот же язык, что у поля поиска */
.finder-alt {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 46px; padding: 0.5rem 1rem;
  border: 1px solid var(--amber); border-radius: 8px; background: var(--bg);
  color: var(--ink); text-decoration: none; font-weight: 600; white-space: nowrap;
  transition: background 170ms var(--ease-out), color 170ms var(--ease-out);
}
.finder-alt svg { color: var(--amber); transition: color 170ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .finder-alt:hover { background: var(--amber); color: #241a08; }
  .finder-alt:hover svg { color: #241a08; }
}
.finder-alt:active { transform: scale(0.98); }

/* Быстрые срезы: цена, фойл, новинки — ссылки-переключатели рядом с «Фильтрами» */
.slices { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.slice {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 34px; padding: 0.25rem 0.8rem;
  border: 1px solid var(--felt-edge); border-radius: 999px;
  color: var(--ink-soft); text-decoration: none; font-size: 0.85rem; white-space: nowrap;
  transition: border-color 170ms var(--ease-out), color 170ms var(--ease-out);
}
.slice.on { border-color: var(--amber); color: var(--amber); }
@media (hover: hover) and (pointer: fine) { .slice:hover { color: var(--ink); border-color: var(--ink-soft); } }
.slice-new { color: var(--ink); }
.slice-count {
  display: inline-grid; place-items: center; min-width: 1.5em; padding: 0 0.35em;
  border-radius: 999px; background: var(--amber); color: #241a08;
  font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Поиск — главный вход: своя высота, лупа внутри поля, янтарная каретка */
.search-field { position: relative; display: flex; align-items: center; }
.search-icon {
  position: absolute;
  left: 0.8rem;
  color: var(--ink-soft);
  pointer-events: none;
}
.search-field input {
  width: 100%;
  min-height: 46px;
  padding-left: 2.6rem;
  font-size: 1rem;
  caret-color: var(--amber);
}
.search-field input::-webkit-search-cancel-button { filter: invert(0.7); }

/* Сортировка + «Показать» — правый край верхней строки */
.filter-tail { display: flex; align-items: end; gap: 0.5rem; }
.sort-field { display: grid; gap: 0.2rem; font-size: 0.78rem; color: var(--ink-soft); }
.sort-field select { min-width: 11rem; }
.filters-apply, .adv-apply {
  cursor: pointer;
  min-height: 46px;
  padding: 0.5rem 1.1rem;
  background: var(--amber);
  border-color: var(--amber);
  color: #241a08;
  font-weight: 650;
  transition: transform 140ms var(--ease-out);
}
.filters-apply:active, .adv-apply:active { transform: scale(0.96); }

/* Поля-уточнения: ровная сетка, а не flex-перенос ступенькой */
.adv summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 34px; padding: 0.25rem 0.8rem;
  border: 1px solid var(--felt-edge); border-radius: 999px; background: var(--bg);
  font-size: 0.85rem;
  transition: border-color 170ms var(--ease-out);
}
.adv summary svg { transition: transform 170ms var(--ease-out); color: var(--ink-soft); }
.adv[open] summary { border-color: var(--amber); }
.adv[open] summary svg { transform: rotate(180deg); }
.adv summary::-webkit-details-marker { display: none; }
.adv-count {
  display: inline-grid; place-items: center;
  min-width: 1.35em; height: 1.35em; padding: 0 0.25em;
  border-radius: 999px; background: var(--amber); color: #241a08;
  font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.adv-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.6rem;
  padding: 0.7rem 0 0;
}
.adv-body label { display: grid; gap: 0.2rem; font-size: 0.78rem; color: var(--ink-soft); }
.adv-body label.wide { grid-column: span 2; }
.price-pair { display: flex; gap: 0.4rem; }
.price-pair label { flex: 1 1 0; }
.price-pair input { width: 100%; min-height: 40px; }

@media (min-width: 700px) {
  .adv-apply { display: none; }  /* на десктопе есть кнопка в верхней строке */
  /* с JS раскрытые фильтры — панель под «ящиком», а не разрыв страницы; без JS
     details остаётся блоком в потоке (html.js-гейт, как bottom-sheet телефона) */
  html.js .adv[open] .adv-body {
    position: absolute; left: 0; right: 0; top: calc(100% + 0.4rem); z-index: 55;
    padding: 0.9rem; background: var(--felt);
    border: 1px solid var(--felt-edge); border-radius: 12px; box-shadow: var(--shadow);
  }
}
@media (max-width: 699px) {
  /* Одна колонка: поиск → кнопка «Фильтры» → сортировка с «Показать».
     Позиции переопределяем явно — иначе grid-column: 2 из десктопного правила
     заводит вторую колонку и сжимает поиск в половину экрана. */
  .shop-filters { grid-template-columns: 1fr; }
  .finder-alt { grid-column: 1; grid-row: 1; justify-content: center; }
  .search-field { grid-column: 1; grid-row: 2; }
  .finder-row2 { grid-column: 1; grid-row: 3; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .finder-row2 > * { flex: 0 0 auto; }
  .finder-row2 .slices { flex-wrap: nowrap; }
  .finder-row2::-webkit-scrollbar { display: none; }
  .filter-tail { grid-column: 1; grid-row: 4; justify-content: space-between; }
  .sort-field { flex: 1 1 auto; min-width: 0; }
  .sort-field select { min-width: 0; width: 100%; }
  .adv-body label.wide { grid-column: span 2; }
  /* html.js-гейт: без JS details рендерится сервером открытым и должен
     остаться обычным блоком в потоке страницы (рабочий no-JS фолбэк) — фиксированный
     bottom-sheet уместен только когда JS есть и сам управляет open/close. */
  html.js .adv[open] .adv-body {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--felt); border-top: 1px solid var(--felt-edge);
    border-radius: 14px 14px 0 0; padding: 1rem 1.25rem 1.4rem;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    max-height: 78vh; overflow-y: auto;
  }
  html.js .adv[open] .adv-body .adv-apply { grid-column: 1 / -1; }
}

/* ---------- Строка под панелью: чипсы фильтров и переключатель вида ---------- */

.filter-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  padding: 0.7rem 0 0;
}

.view-toggle { display: inline-flex; border: 1px solid var(--felt-edge); border-radius: 8px; overflow: hidden; }
.view-toggle a { padding: 0.4rem 0.9rem; color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; }
.view-toggle a.on { background: var(--felt); color: var(--ink); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.chip {
  /* 32px по высоте — минимум для попадания большим пальцем: чипсы снимают
     фильтры, и промах здесь стоит гостю случайного сброса выдачи */
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 32px; padding: 0.25rem 0.8rem;
  border: 1px solid var(--amber); border-radius: 999px; color: var(--amber);
  text-decoration: none; font-size: 0.85rem; background: transparent;
}
.chip-reset { border-color: var(--felt-edge); color: var(--ink-soft); }
.chips-found { color: var(--ink-soft); font-size: 0.85rem; margin-left: 0.3rem; }

/* Крючок для постоянных покупателей: «что появилось с прошлого раза» */
.chip-new { font-weight: 600; }
.chip-count {
  display: inline-grid; place-items: center;
  min-width: 1.5em; padding: 0 0.35em;
  border-radius: 999px; background: var(--amber); color: #241a08;
  font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.fresh-link { font-weight: 600; }

/* ---------- Список (вид «Список») ---------- */

.list-rows { list-style: none; margin: 0; padding: 0; }
.list-row {
  display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap;
  padding: 0.4rem 0.2rem; border-bottom: 1px solid var(--felt-edge); font-size: 0.95rem;
}
.lr-qty { color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 1.2em; }
/* имя в списке — ссылка на страницу карты, но цвет остаётся текстовым:
   янтарь на витрине принадлежит цене и действиям (см. .card-name) */
.lr-name { color: var(--ink); text-decoration: none; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .lr-name:hover { text-decoration: underline; text-decoration-color: var(--ink-soft); }
}
.lr-details { color: var(--ink-soft); font-size: 0.85rem; }
.lr-photo { font-size: 0.85rem; }
.lr-price { margin-left: auto; white-space: nowrap; color: var(--amber); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Навигация по секциям (оглавление) ---------- */

.sec-toc {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.5rem 0 0.7rem;
  scrollbar-width: thin;
}

.sec-toc a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--felt-edge);
  border-radius: 999px;
  background: var(--felt);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
}

.sec-toc .count {
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.sec-toc .mana {
  width: 0.7em;
  height: 0.7em;
}

/* ---------- Секции по цвету ---------- */

.color-section {
  margin-top: 2.2rem;
  scroll-margin-top: 5.4rem;
}

.color-section h2 {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  font-family: "Oranienbaum", "Georgia", serif;
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: 0.01em;
}

.color-section .count {
  color: var(--ink-soft);
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.mana {
  align-self: center;
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.35);
}
.mana-white { background: #f2edd7; }
.mana-blue { background: #3f83c0; }
.mana-black { background: #574b56; }
.mana-red { background: #c94f3c; }
.mana-green { background: #3f7d52; }
.mana-multicolor { background: #cfa43b; }
.mana-colorless { background: #9d9789; }
.mana-land { background: #8a6f52; }

/* ---------- Сетка карт ---------- */

.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 1.3rem 1rem;
}

.card-tile {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  scroll-margin-top: 5.4rem;
}

.card-tile:target .card-photo {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.card-photo {
  position: relative;
  display: block;
  aspect-ratio: 63 / 88;
  border-radius: 9px;
  overflow: hidden;
  background: var(--felt);
  box-shadow: var(--shadow);
  transition: transform 170ms var(--ease-out), box-shadow 170ms var(--ease-out);
}

a.card-photo { cursor: zoom-in; }
a.card-photo:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  a.card-photo:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.4);
  }
}

.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* снимок сделан в кармане кляссера: красный пластик по краю кричал громче карты
     и делал сетку пёстрой. Кадр в плитке чуть ближе — карман уходит за срез,
     полный снимок остаётся в лайтбоксе и на странице карты. */
  transform: scale(1.12);
  transform-origin: center;
}

/* каталожная картинка Scryfall: без протектора и кармана — показываем целиком */
.card-photo--catalog img, .item-photo--catalog img { transform: none; }
.card-photo--catalog { cursor: pointer; }
.item-thumb--catalog { outline: 1px dashed var(--felt-edge); }
.item-catalog-note { color: var(--ink-soft); font-size: 0.85rem; margin: 0.6rem 0 0; }

.card-photo--none {
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.85rem;
  border: 1px dashed var(--felt-edge);
  box-shadow: none;
}

/* Имя карты — ссылка на её страницу, но НЕ янтарная: янтарь на витрине занят
   ценой и действиями, и подсветить им каждое имя значило бы потерять ценник
   в общем свечении. Ссылочность читается подчёркиванием при наведении. */
.card-name {
  display: block;
  margin-top: 0.35rem;
  /* место под две строки имени: без него длинное имя сдвигало ценник вниз, и
     цены в одном ряду сетки стояли на разной высоте — сетка теряла ритм */
  min-height: 2.7em;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  overflow-wrap: break-word;
}
@media (hover: hover) and (pointer: fine) {
  .card-name:hover { text-decoration: underline; text-decoration-color: var(--ink-soft); }
}

/* Счётчик снимков на плитке: «фото реального экземпляра» — главный аргумент
   витрины, и несколько снимков стоит обещать до открытия лайтбокса. */
.photo-count {
  position: absolute;
  bottom: 0.35rem;
  right: 0.35rem;
  z-index: 1;
  min-width: 1.4rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: rgba(12, 9, 6, 0.72);
  color: var(--ink);
  font-size: 0.72rem;
  line-height: 1.4rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.photo-count::after { content: " фото"; color: var(--ink-soft); }

/* Метка «новинка»: постоянный покупатель должен видеть пополнение, не сверяя
   ассортимент по памяти. Живёт в свободном верхнем левом углу фото — справа
   сверху фойл-звезда, справа снизу счётчик снимков. */
.new-badge {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  z-index: 1;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(12, 9, 6, 0.78);
  border: 1px solid var(--amber);
  color: var(--amber);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}
.lr-new {
  padding: 0 0.4rem;
  border: 1px solid var(--amber);
  border-radius: 999px;
  color: var(--amber);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.card-details { color: var(--ink-soft); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-details .ss { color: var(--ink-soft); font-size: 0.95em; margin-right: 0.15em; }

/* «FOIL» в строке деталей — янтарём и жирным: слово должно выпрыгивать
   из серой строки печати (в списке и в сетке одинаково) */
.foil-tag {
  color: var(--amber);
  font-weight: 800;
  letter-spacing: 0.03em;
}

/* Фойл-перелив: радужная полоса ПОСТОЯННО ходит по картинке — без наведения и
   зацикленно (владелец: фойл должен быть виден сразу и всем; каталожная картинка
   Scryfall одинакова для фойла и нефойла, различает их только этот слой).
   ::before — слабый статичный радужный тон, чтобы фойл читался и между проходами;
   ::after — движущаяся полоса. Двигаем transform (композитный слой), а не
   background-position: на ленте десятки фойлов одновременно. */
.card-tile.foil .card-photo,
.item-hero.foil .item-photo,
.item-thumb.foil { position: relative; overflow: hidden; }
.card-tile.foil .card-photo::before,
.item-hero.foil .item-photo::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg,
    hsla(330, 100%, 65%, 0.14), hsla(200, 100%, 65%, 0.12) 35%,
    hsla(120, 100%, 65%, 0.12) 65%, hsla(50, 100%, 65%, 0.14));
  mix-blend-mode: screen;
}
.card-tile.foil .card-photo::after,
.item-hero.foil .item-photo::after,
.item-thumb.foil::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: -80%; width: 260%;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 36%, hsla(330, 100%, 62%, 0.34) 43%, hsla(180, 100%, 62%, 0.34) 49%,
    hsla(55, 100%, 62%, 0.34) 55%, transparent 62%);
  mix-blend-mode: screen;
  animation: foil-loop 3.6s linear infinite;
  will-change: transform;
}
.item-hero.foil .item-photo::after { animation-duration: 4.4s; }
@keyframes foil-loop {
  from { transform: translateX(-38%); }
  to { transform: translateX(38%); }
}

/* Звёздочка-метка поверх фото: фойл видно сразу, без наведения.
   pointer-events нет — клик уходит в фото (лайтбокс). */
.foil-star {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  pointer-events: none;
  font-size: 0.9rem;
  line-height: 1;
  color: #241a08;
  background: linear-gradient(145deg, #fff0c0 0%, var(--amber) 55%, #c98a24 100%);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.card-buy {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.1rem;
}
/* действие — в строке цены, у правого края: ряд плиток держит одну высоту */
.card-buy .cart-add { margin: 0 0 0 auto; }
.card-tile .cart-stepper { transform: scale(0.92); transform-origin: right center; }

.price {
  white-space: nowrap;
  color: var(--amber);
  font-weight: 700;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

.qty { color: var(--ink-soft); font-size: 0.85rem; font-variant-numeric: tabular-nums; }

/* ---------- Пусто / подвал ---------- */

.empty {
  margin: 3.5rem auto;
  max-width: 34rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

a { color: var(--amber); text-underline-offset: 3px; }

.shop-foot {
  max-width: 72ch;
  margin: 0 auto;
  padding: 1.4rem 1.25rem 2.4rem;
  border-top: 1px solid var(--felt-edge);
  color: var(--ink-soft);
  font-size: 0.88rem;
}
.shop-foot p { margin: 0 0 0.6rem; }
.copy-list { color: var(--amber); }
.foot-contact { color: var(--ink); }

/* Контакт владельца: янтарная ссылка-«ценник» с самолётиком Telegram. */
.tg-link {
  display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none;
  padding: 0.15rem 0.5rem; border-radius: 7px;
  border: 1px solid var(--amber); color: var(--amber); font-weight: 650;
  white-space: nowrap;
}
.tg-link:hover { background: var(--amber); color: #241a08; }
.tg-glyph { font-size: 0.95em; line-height: 1; }

/* ---------- Лайтбокс (создаётся showcase.js) ---------- */

#lightbox {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh;
  width: 100vw; height: 100vh; display: none;
  align-items: center; justify-content: center; gap: 0.6rem;
}
#lightbox[open] { display: flex; }
#lightbox::backdrop { background: rgba(12, 9, 6, 0.88); backdrop-filter: blur(9px); }
#lightbox figure { margin: 0; display: grid; gap: 0.6rem; justify-items: center; }
#lightbox img {
  max-width: 94vw; max-height: 82vh; border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); cursor: zoom-in; touch-action: pan-y;
}
/* Зум — натуральный размер снимка, а не произвольные 160vw: на маленьких фото
   апскейл давал мыло вместо деталей, за которыми зум и открывают. */
#lightbox img.zoomed { max-width: none; max-height: none; width: auto; cursor: zoom-out; }
#lightbox figure:has(img.zoomed) { overflow: auto; max-width: 94vw; max-height: 88vh; }
.lb-caption { display: grid; gap: 0.15rem; text-align: center; color: var(--ink); }
.lb-caption .lb-price { color: var(--amber); font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-caption .lb-count { color: var(--ink-soft); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.lb-share {
  font: inherit; font-size: 0.85rem; background: none; border: 1px solid var(--felt-edge);
  border-radius: 999px; color: var(--ink-soft); padding: 0.25rem 0.8rem; cursor: pointer;
}
.lb-nav {
  border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: var(--ink);
  font-size: 2rem; line-height: 1; width: 44px; height: 64px; cursor: pointer; flex: none;
}
.lb-nav[hidden] { display: none; }
.lb-close {
  position: fixed; top: 0.7rem; right: 0.7rem; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); color: var(--ink);
}
.lb-close:hover { background: rgba(255, 255, 255, 0.16); }
@media (max-width: 560px) { .lb-nav { display: none; } } /* на тач — свайп */

body.lb-open { overflow: hidden; }

/* ---- Load More: кнопка «показать ещё» под сеткой ---- */
.load-more {
  display: block; margin: 1.6rem auto 0; padding: 0.6rem 1.4rem;
  font: inherit; font-weight: 650; color: #241a08; background: var(--amber);
  border: 0; border-radius: 10px; cursor: pointer;
}

/* ---- Sticky-бар: два ряда — точки цветов и типы внутри текущего цвета ---- */
#secbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; flex-direction: column; gap: 0.3rem; padding: 0.4rem 1.25rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--felt-edge);
}
#secbar[hidden] { display: none; }
.secbar-row { display: flex; align-items: center; gap: 0.9rem; }
/* Второй ряд не переносится (иначе бар прыгал бы по высоте при смене раздела),
   а прокручивается вбок; полосу прокрутки прячем — активный чипс подтягивает
   ряд сам, из paintTypes(). */
.secbar-types {
  display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none;
  scroll-behavior: smooth;
}
.secbar-types::-webkit-scrollbar { display: none; }
.secbar-types[hidden] { display: none; }
.secbar-types a { flex: 0 0 auto; white-space: nowrap; }
.secbar-types a.on { color: var(--ink); border-color: var(--amber); }
.secbar-dots { display: flex; gap: 0.45rem; align-items: center; flex: 0 0 auto; }
.secbar-dot {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.35);
  opacity: 0.5; transition: opacity 170ms var(--ease-out), transform 170ms var(--ease-out);
}
.secbar-dot.on { opacity: 1; outline: 2px solid var(--amber); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .secbar-dot:hover { opacity: 1; transform: scale(1.15); } }
.secbar-title {
  flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: "Oranienbaum", Georgia, serif; font-size: 1.05rem;
}
.secbar-actions { display: flex; gap: 0.4rem; align-items: center; flex: 0 0 auto; }
#secbar .secbar-top, #secbar .secbar-find {
  font: inherit; font-family: system-ui, sans-serif; font-size: 0.85rem;
  background: none; border: 1px solid var(--felt-edge); border-radius: 999px;
  color: var(--ink); padding: 0.2rem 0.8rem; min-height: 30px; cursor: pointer;
  display: inline-flex; align-items: center;
}
#secbar .secbar-find { padding: 0.2rem 0.55rem; color: var(--ink-soft); }
@media (max-width: 560px) {
  #secbar { gap: 0.6rem; padding: 0.35rem 0.9rem; }
  .secbar-title { font-size: 0.95rem; }
  #secbar .secbar-top { display: none; } /* на телефоне наверх — тапом по статус-бару/жестом */
}

/* ---- Подразделы по типу внутри цветовой секции ---- */
.sec-types { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: -0.3rem 0 0.9rem; }
.sec-types a, .secbar-types a {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  min-height: 30px; padding: 0.2rem 0.7rem;
  border: 1px solid var(--felt-edge); border-radius: 999px;
  color: var(--ink-soft); text-decoration: none; font-size: 0.82rem;
}
.sec-types a .count, .secbar-types a .count { font-variant-numeric: tabular-nums; opacity: 0.8; }
@media (hover: hover) and (pointer: fine) {
  .sec-types a:hover, .secbar-types a:hover { color: var(--ink); border-color: var(--ink-soft); }
}
.sub-head {
  display: flex; align-items: baseline; gap: 0.5rem;
  margin: 1.6rem 0 0.7rem; padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--felt-edge);
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft); scroll-margin-top: 5.4rem;
}
.sub-head:first-of-type { margin-top: 0.2rem; }
.sub-head .count { font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }

@media (prefers-reduced-motion: reduce) {
  .card-photo, .shop-filters button { transition: none; }
  #secbar { backdrop-filter: none; }
  .card-tile.foil .card-photo::after, .item-hero.foil .item-photo::after,
  .item-thumb.foil::after { animation: none !important; }
}

@media (max-width: 560px) {
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 1.1rem 0.7rem; }
  .shop-head { padding: 1rem 1rem 0.7rem; }
  .shop-head h1 { font-size: 1.6rem; }
  .shop-meta { font-size: 0.85rem; }
  /* фильтры компактнее: селекты делят одну строку, кнопка добивает её */
  .shop-filters input { flex-basis: 100%; }
  .shop-filters select { flex: 1 1 40%; min-width: 0; }
}

/* ---------- Корзина покупателя (localStorage, см. showcase.js) ---------- */

.cart-add { margin-top: 0.4rem; }
/* в строке списка кнопка идёт последним flex-элементом, отступ сверху не нужен */
.list-row .cart-add { margin: 0; }

.cart-btn {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--amber);
  border-radius: 999px;
  background: transparent;
  color: var(--amber);
  cursor: pointer;
  transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
}
.cart-btn:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .cart-btn:hover { background: var(--amber); color: #241a08; }
}

/* Круглый «+» на плитке ленты. Правило обязано идти ПОСЛЕ .cart-btn: при равной
   специфичности падинг пилюли перебивал нулевой, и в border-box глиф уезжал из
   центра круга вправо-вниз. */
.cart-btn--icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  line-height: 0;
}

.cart-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid var(--amber);
  border-radius: 999px;
  overflow: hidden;
}
.cart-in { min-width: 2.2em; text-align: center; color: var(--amber); font-size: 0.85rem;
  font-variant-numeric: tabular-nums; }
.cart-step {
  font: inherit;
  min-width: 32px;
  min-height: 32px;
  border: 0;
  background: transparent;
  color: var(--amber);
  cursor: pointer;
  line-height: 1;
}
.cart-step[disabled] { opacity: 0.4; cursor: default; }

/* Ряд плавающих кнопок в правом нижнем углу: «?» + пилюля корзины */
#fab-row {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
body.cart-open #fab-row { display: none; }

/* Пилюля-вызов корзины */
#cart-fab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--felt-edge);
  border-radius: 999px;
  background: var(--felt);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 160ms var(--ease-out);
}
#cart-fab.has-items { border-color: var(--amber); color: var(--amber); font-weight: 650; }
#cart-fab:active { transform: scale(0.97); }

/* Кнопка «?» — повторный показ онбординга */
#help-fab {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--felt-edge);
  border-radius: 999px;
  background: var(--felt);
  color: var(--amber);
  font-family: "Oranienbaum", "Georgia", serif;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 160ms var(--ease-out);
}
#help-fab:active { transform: scale(0.97); }

/* Раскрытая панель */
#cart-panel {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 46;
  width: min(360px, calc(100vw - 2rem));
  max-height: min(70vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--felt);
  border: 1px solid var(--felt-edge);
  border-radius: 14px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
#cart-panel[hidden] { display: none; }

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--felt-edge);
  font-family: "Oranienbaum", "Georgia", serif;
  font-size: 1.15rem;
}
.cart-close {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: pointer;
}
.cart-close:hover { background: rgba(255, 255, 255, 0.07); color: var(--ink); }

.cart-list { list-style: none; margin: 0; padding: 0.3rem 0.9rem; overflow-y: auto; flex: 1 1 auto; }
.cart-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "name qty drop" "det price drop";
  gap: 0.1rem 0.5rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--felt-edge);
}
.cart-row:last-child { border-bottom: 0; }
.cart-name { grid-area: name; font-weight: 600; font-size: 0.92rem; }
.cart-det { grid-area: det; color: var(--ink-soft); font-size: 0.78rem; }
.cart-qty { grid-area: qty; display: inline-flex; align-items: center; gap: 0.1rem;
  font-variant-numeric: tabular-nums; }
.cart-price { grid-area: price; color: var(--amber); font-weight: 700; font-size: 0.92rem;
  text-align: right; font-variant-numeric: tabular-nums; }
.cart-drop {
  grid-area: drop; width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-soft); font-size: 1.1rem; cursor: pointer;
}
.cart-drop:hover { background: rgba(255, 255, 255, 0.07); color: var(--ink); }

.cart-empty { margin: 0; padding: 1.2rem 0.9rem; color: var(--ink-soft); font-size: 0.9rem; }
.cart-empty[hidden] { display: none; }

.cart-foot { padding: 0.7rem 0.9rem 0.9rem; border-top: 1px solid var(--felt-edge); }
.cart-total { margin: 0 0 0.6rem; color: var(--ink); font-weight: 650;
  font-variant-numeric: tabular-nums; }
.cart-copy, .cart-clear {
  font: inherit; padding: 0.5rem 0.9rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--amber); background: var(--amber); color: #241a08; font-weight: 650;
}
.cart-clear { background: transparent; border-color: var(--felt-edge); color: var(--ink-soft);
  font-weight: 400; margin-left: 0.4rem; }
.cart-copy[disabled], .cart-clear[disabled] { opacity: 0.5; cursor: default; }
/* «Заказать в Telegram» — главное действие корзины; копирование рядом с ним
   становится вторичным (селектор ловит только случай, когда ник настроен). */
.cart-tg {
  display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none;
  font: inherit; padding: 0.5rem 0.9rem; border-radius: 8px;
  border: 1px solid var(--amber); background: var(--amber); color: #241a08; font-weight: 650;
}
.cart-tg:hover { filter: brightness(1.08); }
.cart-tg.is-off { opacity: 0.5; pointer-events: none; }
.cart-tg ~ .cart-copy {
  background: transparent; border-color: var(--felt-edge); color: var(--ink-soft);
  font-weight: 400;
}
/* С telegram-кнопкой в подвале корзины три действия: главное — на всю ширину,
   два вторичных — строкой ниже. Сетка вместо margin-left, иначе при переносе
   кнопки съезжают ступенькой. :has() нет — остаётся прежняя раскладка. */
.cart-foot:has(.cart-tg) { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cart-foot:has(.cart-tg) > .cart-total,
.cart-foot:has(.cart-tg) > .cart-hint,
.cart-foot:has(.cart-tg) > .cart-fallback { flex: 1 0 100%; margin: 0; }
.cart-foot:has(.cart-tg) > .cart-tg { flex: 1 0 100%; justify-content: center; }
.cart-foot:has(.cart-tg) > .cart-clear { margin-left: 0; }
.cart-hint { margin: 0.6rem 0 0; color: var(--ink-soft); font-size: 0.8rem; }
.cart-fallback { width: 100%; margin-top: 0.6rem; font-family: monospace; font-size: 0.8rem;
  background: var(--bg); color: var(--ink); border: 1px solid var(--felt-edge); border-radius: 8px; }

/* ---------- Онбординг «как заказать» (баннер-картинка, см. showcase.js) ---------- */
#onboarding {
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--felt);
  width: min(92vw, 440px);
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}
#onboarding::backdrop { background: rgba(8, 6, 4, 0.75); }
#onboarding img { display: block; width: 100%; height: auto; }
/* Крестик: sticky, чтобы не уезжал при прокрутке баннера; отрицательный
   нижний margin — кнопка лежит поверх картинки, не сдвигая её вниз */
.onb-close {
  position: sticky;
  top: 0.5rem;
  z-index: 1;
  width: 40px;
  height: 40px;
  margin: 0.5rem 0.5rem -46px auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 8, 6, 0.65);
  color: #f5ecd8;
  cursor: pointer;
}
.onb-close:hover { background: rgba(10, 8, 6, 0.85); }
/* «Понятно» прижата к низу окна — видна и до прокрутки длинного баннера */
.onb-ok {
  position: sticky;
  bottom: 0;
  width: 100%;
  padding: 0.8rem;
  border: 0;
  background: var(--amber);
  color: #241a08;
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  cursor: pointer;
}
.onb-ok:hover { filter: brightness(1.08); }

@media (max-width: 560px) {
  #cart-panel { right: 0.5rem; left: 0.5rem; bottom: 0.5rem; width: auto; max-height: 78vh; }
  #fab-row { right: 0.75rem; bottom: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  #cart-fab, #help-fab, .cart-btn { transition: none; }
}

/* ---------- Состояния поиска и объявления ---------- */

/* Живой регион для скринридера: слышен, не виден. */
.sr-only, .sr-live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.live-count {
  margin: 0.5rem 0 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.live-count[hidden] { display: none; }

.empty-live[hidden] { display: none; }
.empty-live .eq { color: var(--ink); font-weight: 600; }
.live-reset {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--amber);
  border-radius: 999px;
  background: transparent;
  color: var(--amber);
  cursor: pointer;
  transition: transform 140ms var(--ease-out);
}
.live-reset:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .live-reset:hover { background: var(--amber); color: #241a08; }
}

/* Кнопка «Показать» внутри мобильного bottom-sheet фильтров: снаружи она
   оставалась недосягаемой, когда цену вводили руками (селекты сабмитятся сами,
   числовые поля — нет). На десктопе sheet'а нет и кнопка не нужна. */
.adv-apply { display: none; }
@media (max-width: 699px) {
  html.js .adv[open] .adv-body .adv-apply {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.6rem;
    border: 0;
    border-radius: 10px;
    background: var(--amber);
    color: #241a08;
    font: inherit;
    font-weight: 650;
    cursor: pointer;
  }
}

/* ---------- Подтверждения в корзине ---------- */

.cart-sent {
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--felt-edge);
  border-left: 1px solid var(--amber);
  border-radius: 8px;
  background: rgba(226, 168, 62, 0.07);
  color: var(--ink);
  font-size: 0.82rem;
}
.cart-sent[hidden] { display: none; }
.cart-foot:has(.cart-tg) > .cart-sent { flex: 1 0 100%; }

.cart-clear.armed { border-color: var(--amber); color: var(--amber); }

/* ---------- Страница одной карты ---------- */

.item-head {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.1rem 1.25rem 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  border-bottom: 1px solid var(--felt-edge);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 32px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
}
.back-link:hover { color: var(--ink); }
.back-section .mana { width: 0.7em; height: 0.7em; }

.item-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.8rem 1.25rem 6rem;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
}

.item-photo {
  position: relative;
  display: block;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 63 / 88;
  border-radius: 12px;
  overflow: hidden;
  background: var(--felt);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.4);
  cursor: zoom-in;
  transition: transform 170ms var(--ease-out);
}
.item-photo:active { transform: scale(0.99); }
.item-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-photo--none {
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  color: var(--ink-soft);
  border: 1px dashed var(--felt-edge);
  box-shadow: none;
  cursor: default;
}

.item-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.item-thumb {
  width: 58px;
  aspect-ratio: 63 / 88;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--felt-edge);
  background: var(--felt);
}
.item-thumb.on { border-color: var(--amber); }
.item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ярлык с ценой: единственная панель страницы — всё, что нужно для решения,
   в одном прямоугольнике сукна рядом с фотографией экземпляра. */
.item-facts {
  background: var(--felt);
  border: 1px solid var(--felt-edge);
  border-radius: 12px;
  padding: 1.5rem 1.6rem 1.6rem;
}
.item-facts h1 {
  margin: 0;
  font-family: "Oranienbaum", "Georgia", serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.item-ru { margin: 0.35rem 0 0; color: var(--ink-soft); font-size: 1rem; }
.item-print { margin: 1rem 0 0; color: var(--ink-soft); font-size: 0.92rem; }
.item-print .ss { margin-right: 0.25em; }

.item-price {
  margin: 1.3rem 0 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.7rem;
  color: var(--amber);
  font-weight: 700;
  font-size: 2rem;
  /* табличные цифры на крупном кегле стоят слишком широко — поджимаем трекинг,
     чтобы ценник читался одним словом, а не рассыпался на знаки */
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.item-stock { color: var(--ink-soft); font-weight: 400; font-size: 0.88rem; letter-spacing: 0; }

/* Главное действие страницы крупнее, чем в ленте: здесь оно единственное. */
.item-facts .cart-add { margin-top: 1.2rem; }
.item-facts .cart-btn { font-size: 1rem; padding: 0.55rem 1.5rem; }
.item-facts .cart-step { min-width: 40px; min-height: 40px; font-size: 1.15rem; }
.item-facts .cart-in { font-size: 1rem; min-width: 2.6em; }

.item-shot, .item-contact {
  margin: 1.1rem 0 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.item-contact { color: var(--ink); }

/* Короткая механика заказа на странице карты: сюда приходят прямой ссылкой,
   минуя памятку на главной. */
.item-steps {
  margin: 1.2rem 0 0;
  padding: 0.9rem 0 0 1.3rem;
  border-top: 1px solid var(--felt-edge);
  display: grid;
  gap: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.item-steps li::marker { color: var(--amber); }
.item-facts .shop-terms { margin-top: 1.2rem; max-width: none; }

.item-others {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}
.item-others h2 {
  margin: 0 0 1rem;
  font-family: "Oranienbaum", "Georgia", serif;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
}

@media (max-width: 860px) {
  .item-page { grid-template-columns: 1fr; gap: 1.6rem; }
  .item-hero { display: grid; justify-items: center; }
  .item-photo { max-width: min(340px, 72vw); }
  .item-facts { padding: 1.2rem 1.2rem 1.3rem; }
  .item-price { font-size: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .item-photo, .live-reset { transition: none; }
  .card-photo.sheen-once::after, .item-photo.sheen-once::after { animation: none; }
}

/* Подписка на канал новинок: тот же чип, что «Новинки за неделю», но янтарная обводка */
.chip-channel { border-color: var(--amber); color: var(--amber); }
.chip-channel .tg-glyph { margin-right: .35em; }
.foot-channel, .item-channel { margin: .5rem 0; color: var(--ink-soft); }

/* ---------- Подбор по списку (/showcase/match) ---------- */

.match-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.25rem 6rem;
}
.match-page h1 {
  margin: 0.4rem 0 0.3rem;
  font-family: "Oranienbaum", "Georgia", serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.1;
}
.match-lead { margin: 0 0 1rem; max-width: 72ch; color: var(--ink-soft); }

.match-form {
  display: grid;
  gap: 0.8rem;
  padding: 0.9rem;
  background: var(--felt);
  border: 1px solid var(--felt-edge);
  border-radius: 12px;
}
.match-field { display: grid; gap: 0.35rem; font-size: 0.9rem; color: var(--ink-soft); }
.match-field input,
.match-field textarea {
  font: inherit;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--felt-edge);
  background: var(--bg);
  color: var(--ink);
  caret-color: var(--amber);
}
.match-field textarea { resize: vertical; min-height: 7.5em; font-variant-numeric: tabular-nums; }
.match-field ::placeholder { color: var(--ink-soft); opacity: 0.6; }
.match-submit {
  justify-self: start;
  cursor: pointer;
  min-height: 46px;
  padding: 0.5rem 1.4rem;
  font: inherit;
  font-weight: 650;
  border-radius: 8px;
  border: 1px solid var(--amber);
  background: var(--amber);
  color: #241a08;
  transition: transform 140ms var(--ease-out);
}
.match-submit:active { transform: scale(0.96); }
.match-hint { margin: 0; font-size: 0.82rem; color: var(--ink-soft); max-width: 72ch; }

/* После подбора форма сворачивается: находки важнее textarea */
.match-edit { margin: 0.4rem 0 0; }
.match-edit > summary {
  cursor: pointer;
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--felt-edge);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  list-style: none;
}
.match-edit > summary::-webkit-details-marker { display: none; }
.match-edit[open] > summary { margin-bottom: 0.7rem; color: var(--ink); }

.match-error {
  margin: 1rem 0 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid #8a4a2b;
  border-radius: 8px;
  background: #2a1a12;
  color: #f0c9a8;
}

/* Ценник на весь список: сумма янтарём, кнопка справа, оглавление по типам */
.match-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.4rem;
  margin: 1.1rem 0 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--amber);
  border-radius: 12px;
  background: var(--felt);
}
.match-summary.is-empty { border-color: var(--felt-edge); }
.ms-text { min-width: 0; flex: 1 1 24rem; }
.match-source { margin: 0 0 0.25rem; color: var(--ink-soft); font-size: 0.9rem; }
.match-total { margin: 0; font-size: 1.15rem; line-height: 1.35; }
.match-total b { color: var(--amber); font-variant-numeric: tabular-nums; }
.match-total .ms-sum { font-size: 1.35em; white-space: nowrap; }
.mg-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.mg-chips a {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  min-height: 30px; padding: 0.2rem 0.7rem;
  border: 1px solid var(--felt-edge); border-radius: 999px;
  color: var(--ink); text-decoration: none; font-size: 0.85rem;
}
.mg-chips a b { color: var(--amber); font-variant-numeric: tabular-nums; }
.mg-chips a .of { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mg-chips a.is-empty { color: var(--ink-soft); }
.mg-chips a.is-empty b { color: var(--ink-soft); }
.match-add-all {
  cursor: pointer;
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0.5rem 1.2rem;
  font: inherit;
  font-weight: 650;
  border-radius: 999px;
  border: 1px solid var(--amber);
  background: var(--amber);
  color: #241a08;
  transition: transform 140ms var(--ease-out);
}
.match-add-all:active { transform: scale(0.96); }

/* Группы по типу карты — как цветовые секции ленты: антиква + счётчик */
.match-group, .match-absent { margin-top: 2.2rem; scroll-margin-top: 1rem; }
.match-group h2, .match-absent h2 {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--felt-edge);
  font-family: "Oranienbaum", "Georgia", serif;
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: 0.01em;
}
.match-group .count, .match-absent .count {
  color: var(--ink-soft);
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* Сетка группы: строка списка занимает столько колонок, сколько у неё плиток
   (до 4) — одна находка стоит одной картой, шесть однокарточных строк
   ложатся в один ряд, а не в шесть. dense — чтобы широкие блоки не оставляли дыр. */
.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  grid-auto-flow: dense;
  gap: 1.5rem 1rem;
}
.want { min-width: 0; }
.want--w2 { grid-column: span 2; }
.want--w3 { grid-column: span 3; }
.want--w4 { grid-column: span 4; }
/* Заголовок строки — обычный текст, а не flex: в узкой колонке «1 ×» не должно
   оставаться одно на строке, имя переносится словами следом за количеством */
.want-head {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  min-height: 2.6em; /* две строки: плитки соседних строк списка стоят на одной высоте */
  text-wrap: balance;
}
.want-qty { color: var(--ink-soft); font-weight: 400; font-variant-numeric: tabular-nums; margin-right: 0.25em; }
.want-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.1rem 1rem; }
.want--w2 .want-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.want--w3 .want-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.want--w4 .want-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.want-grid--more { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.card-tile.is-exact .card-photo { outline: 2px solid var(--amber); outline-offset: 2px; }
.tile-badge {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  z-index: 1;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--amber);
  color: #241a08;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.want-more { margin-top: 0.6rem; }
.want-more > summary {
  cursor: pointer;
  display: inline-block;
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-decoration: underline;
  text-decoration-color: var(--felt-edge);
  text-underline-offset: 3px;
}
.want-more[open] > summary { margin-bottom: 0.7rem; }

/* Подвал группы: ненайденное свёрнуто, рядом выход в ленту по типу */
.group-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.5rem 1.5rem; margin-top: 1.2rem; color: var(--ink-soft); font-size: 0.9rem;
}
.group-missing > summary { cursor: pointer; display: inline-block; }
.group-all { color: var(--amber); text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .group-all:hover { text-decoration: underline; } }
.missing-list {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem;
  margin: 0.5rem 0 0; padding: 0; list-style: none;
}
.missing-list li {
  padding: 0.15rem 0.6rem;
  border: 1px dashed var(--felt-edge);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* Типы, из которых нет ничего: по строке на тип */
.match-absent .group-missing {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--felt-edge);
  color: var(--ink);
}
.match-absent .group-missing > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; width: 100%;
}
.match-absent .group-missing .group-all { margin-left: auto; font-size: 0.88rem; }
.match-absent .missing-list { margin-bottom: 0.5rem; }

@media (max-width: 560px) {
  .match-summary { padding: 0.85rem 0.9rem; }
  .match-total { font-size: 1.05rem; }
  .mg-chips a { font-size: 0.8rem; min-height: 28px; padding: 0.15rem 0.6rem; }
  .mg-chips a.is-empty { display: none; } /* на телефоне оглавление — только про находки */
  .match-add-all { width: 100%; }
  .match-group h2, .match-absent h2 { font-size: 1.45rem; }
  /* две колонки: широкие строки списка складываются в 2×2 */
  .group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 0.7rem; }
  .want--w3, .want--w4 { grid-column: span 2; }
  .want--w3 .want-grid, .want--w4 .want-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .want-grid { gap: 1rem 0.7rem; }
}