/* ============================================================
   VisArtis — страница торгов (auction.html).
   Поверх tokens.css и base.css; только стили этой страницы.
   Канон — главная (ЗАКОН v1.0): белое полотно, фиолетовый
   акцент. Панели без теней: от полотна их отделяет рамка,
   а не подсветка. Без вечных анимаций, движение только
   событийное и только transform/opacity.

   ИЕРАРХИЯ ВНИМАНИЯ ПАНЕЛИ (правка заказчика). Самое крупное —
   ЦЕНА (44px), самое заметное действие — кнопка «Сделать ставку»
   (56px, заливка акцентом). Счётчик до конца торгов служебная
   строка: 13.5px, --ink-2; тревожным цветом он горит только
   последние 15 минут — окно продления из правил торгов, а не
   целый час. Шаг ставки тише всего кеглем: 13px (цвет --ink-2 —
   на панели --surface-1 более светлый --ink-3 не добирает 4.5:1).
   Ни одна цифра на панели не спорит с ценой.
   ============================================================ */

/* Фон под фотографией светлый в обеих темах: тёмная подложка съедает контур
   вещи, а покупателю на торгах нужно видеть силуэт, скол и край. Токен
   объявлен здесь же — страница торгов не подключает стили карточки лота. */
:root { --photo-bed: #F4F4F6; }
html[data-theme="dark"] { --photo-bed: #E8E7EB; }

/* Полотно, кнопки, бейджи и высота шапки живут в base.css.
   Страница торгов — законное исключение из ряда категорий: там
   её нет, и --header-h base.css поправит сам (63px вместо 112px),
   поэтому липкая колонка ниже считает отступ от токена. */

.room { padding-top: var(--s3); }

/* --- Хлебная крошка --- */
.room-crumbs { font-size: 13.5px; color: var(--ink-2); margin-bottom: var(--s3); }
.room-crumbs a { color: var(--ink-2); }
.room-crumbs a:hover { color: var(--accent); }
.room-crumbs .sep { margin: 0 6px; color: var(--ink-3); }
.room-crumbs .here { color: var(--ink-black); }

/* --- Две колонки: лот 60 / торги 40 --- */
.room-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--s6);
  align-items: start;
}

/* ============ Слева: название, лайки, фото ============ */

/* Название лота, справа от него — сердечко со счётчиком лайков.
   Сердечко на странице одно: два счётчика одного лота разошлись бы
   при первом же нажатии. */
.room-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s2); margin-bottom: var(--s2);
}
/* Т1 остаётся 34px, но на узком экране длинное имя вещи занимало пять
   строк и отодвигало фотографию за край видимого. */
.room-head__title { margin: 0; flex: 1 1 auto; min-width: 0; font-size: clamp(26px, 5.6vw, 34px); }
.room-head__likes { flex: 0 0 auto; padding-top: 4px; }
/* base.css держит сердечко на фото абсолютом; здесь оно стоит в строке
   рядом с названием, поэтому позиционирование и подсветку снимаем. */
.room-head__likes .like {
  position: static; top: auto; left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--page-white); color: var(--accent);
  box-shadow: none;
  transition: border-color .2s var(--ease), transform .1s var(--ease);
}
.room-head__likes .like:hover { transform: none; border-color: var(--accent); }
.room-head__likes .like:active { transform: translateY(1px); }
.room-head__likes .like.is-liked svg { fill: var(--accent); stroke: var(--accent); }
.room-head__likes .like__n { font-size: 14.5px; color: var(--ink-black); }

.room-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: min(74vh, 720px);
  background: var(--photo-bed);
  border: 0;
  border-radius: var(--r-photo);
  overflow: hidden;
  position: relative;
}
.room-photo img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.room-photo__empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); font-size: 15px;
}

.room-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.room-thumbs button {
  width: 64px; height: 64px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-photo);
  background: var(--photo-bed); overflow: hidden;
  transition: border-color .2s var(--ease);
}
.room-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.room-thumbs button[aria-current] { border-color: var(--accent); }
.room-thumbs button:hover { border-color: var(--accent-light); }

/* ============ Слева: описание лота ============
   Раскрывающихся стрелок здесь нет: заказчик просит показывать
   описание целиком. Разделяет разделы линия, а не аккордеон. */

.room-card { margin-top: var(--gap-section); }
.room-card__head { margin: 0 0 var(--s2); }

.room-specs { width: 100%; border-collapse: collapse; font-size: 15px; }
.room-specs th, .room-specs td {
  text-align: left; vertical-align: top;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.room-specs tr:last-child th, .room-specs tr:last-child td { border-bottom: 0; }
.room-specs th {
  width: 38%; font-weight: 400; color: var(--ink-2);
  padding-right: var(--s2);
}

.room-desc { margin-top: var(--s3); font-size: 16px; line-height: 1.65; }
.room-desc p { margin: 0 0 12px; }
.room-desc p:last-child { margin-bottom: 0; }

.room-where {
  margin: var(--s3) 0 0; padding-top: var(--s2);
  border-top: 1px solid var(--line);
  font-size: 15px; color: var(--ink-black);
}
.room-where b { font-weight: 400; color: var(--ink-2); }

/* Ссылка-переход на сайте одна: 14.5px/500 акцентом со стрелкой */
.room-card .full-link,
.room-tabpane .full-link {
  display: inline-block; margin-top: var(--s2);
  font-size: 14.5px; font-weight: 500; color: var(--accent);
}
.room-card .full-link::after,
.room-tabpane .full-link::after { content: ' →'; }
.room-card .full-link:hover,
.room-tabpane .full-link:hover { color: var(--accent-dark); }

/* ============ Слева: вкладки ============
   Рецепт вкладок сайта (.cab-tabs / .cab-tab из cabinet.css) —
   повторён здесь один в один, потому что cabinet.css на этой
   странице не грузится. Правки — только вместе с оригиналом. */

.room-tabsec { margin-top: var(--gap-section); scroll-margin-top: calc(var(--header-h) + var(--s3)); }
.room-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.room-tabs::-webkit-scrollbar { display: none; }
.room-tab {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--r-control);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 15px;
  white-space: nowrap;
}
.room-tab:hover { color: var(--accent-dark); background: var(--accent-bg); }
.room-tab.is-on { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 500; }

.room-tabpane { font-size: 15px; line-height: 1.6; }
.room-tabpane[hidden] { display: none; }
.room-tabpane h3 { margin: 0 0 var(--s1); }
.room-tabpane p { margin: 0 0 12px; }
.room-tabpane p:last-child { margin-bottom: 0; }
.room-tabpane ul { margin: 0 0 12px; padding: 0; list-style: none; }
.room-tabpane li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.room-tabpane li:last-child { border-bottom: 0; }
.room-tabpane__group + .room-tabpane__group { margin-top: var(--s3); }
.room-tabpane__label {
  font-size: 11px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 500; margin: 0 0 6px;
}
.room-tabpane__note { color: var(--ink-2); font-size: 13.5px; }

/* ============ Справа: панель торгов ============ */

.room-right { min-width: 0; position: sticky; top: calc(var(--header-h) + var(--s3)); }

.bid-panel {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: none;
  padding: var(--s3);
}

.bid-status { display: flex; align-items: center; gap: 10px; }
.badge--room { background: var(--accent-bg); color: var(--accent-dark); }
.badge--room.is-live { background: var(--accent); color: var(--on-accent); }
.badge--room.is-warn { background: transparent; border: 1px solid var(--warn); color: var(--warn); }
/* п.1: «наблюдают N». Наблюдающих нет — строки нет вовсе */
.bid-status__watch { margin-left: auto; font-size: 13.5px; color: var(--ink-2); }

/* --- пп.2–4: завершение торгов, тихий счётчик, ссылка на правила ---
   Служебный ярус. Ни одной крупной цифры: время здесь — факт,
   а не призыв. Крупное на панели ровно одно — цена. */
.bid-when {
  margin-top: var(--s2); padding-top: var(--s2);
  border-top: 1px solid var(--line);
}
.bid-when__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 15px;
}
.bid-when__label { color: var(--ink-2); }
.bid-when__date { color: var(--ink-black); text-align: right; }
.bid-when__left {
  margin: 4px 0 0;
  font-size: 13.5px; color: var(--ink-2); line-height: 1.5;
}
.bid-when__left .num { font-variant-numeric: tabular-nums; }
.bid-when__left .num.is-warn { color: var(--warn); }
.bid-when__left span + span { margin-left: 6px; }
.bid-when__rules {
  display: inline-block; margin-top: 8px;
  font-size: 13.5px; color: var(--accent);
}
.bid-when__rules:hover { color: var(--accent-dark); }

/* --- п.5: цена. Самое крупное на панели --- */
.bid-current { border-top: 1px solid var(--line); margin-top: var(--s2); padding-top: var(--s2); }
.bid-current__label {
  font-size: 11px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 500;
}
.bid-current__value {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(34px, 3.6vw, 44px); line-height: 1.1;
  color: var(--ink-black); letter-spacing: -.01em;
  margin-top: 2px;
}
.bid-current__est { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); }
/* п.6: состояние резервной цены — с первой секунды торгов */
.bid-reserve { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.bid-reserve[hidden] { display: none; }
.bid-reserve.is-close { color: var(--accent-dark); }

/* Подскок цены при новой ставке: только transform/opacity, одноразово */
@keyframes bid-bump { 0% { transform: scale(.96); opacity: .4; } 100% { transform: none; opacity: 1; } }
.bid-current__value.is-bumped { animation: bid-bump .35s var(--ease); }

/* --- «Вас перебили» --- */
.bid-alert {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: var(--s2); padding: 12px 14px;
  border: 1px solid var(--warn); border-radius: var(--r-control);
  background: var(--warn-bg);
}
.bid-alert[hidden], .bid-buyout[hidden] { display: none; }
.bid-alert__word { color: var(--warn); font-weight: 500; font-size: 15px; }
.bid-alert .btn { flex: 0 0 auto; }
@keyframes alert-in { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
.bid-alert.is-fresh { animation: alert-in .3s var(--ease); }

/* --- п.7: главная кнопка. Самое заметное действие страницы ---
   Ступеней у кнопки три, и они уже описаны в base.css: .btn-primary
   (заливка акцентом), .btn-ghost, .btn-quiet. Здесь задаётся только
   рост и вес главной кнопки панели — цвет, hover и «выключено»
   приходят из канона, а не из четвёртой копии тех же правил. */

.bid-actions { margin-top: var(--s3); }
.bid-main {
  width: 100%; min-height: 56px;
  font-size: 17px; font-weight: 600; letter-spacing: .01em;
}
.bid-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Выключённая кнопка стоит не на белом полотне, а на панели --surface-1:
   её заливка --surface-2 отличается от панели почти ничем, и без края плита
   растворяется. Цвета канона не трогаем — возвращаем только рамку. */
.bid-main:disabled, .bid-dock .btn:disabled { border-color: var(--line); }
/* Шаг ставки — самая тихая строка панели. Цвет --ink-2, а не --ink-3:
   --ink-3 держит 4.6:1 на белом полотне, но панель залита --surface-1,
   и на ней он падает до 4.34:1 — ниже порога для строки, которую
   человек обязан прочитать перед ставкой. Тише строку держит кегль
   (13px против 13.5px у соседей), а не недостаточный контраст. */
.bid-step { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.bid-step:empty { display: none; }
.bid-error { margin: 10px 0 0; font-size: 13.5px; color: var(--warn); }
.bid-error.is-ok { color: var(--ok); }
.bid-buyout { width: 100%; margin-top: 12px; }

/* --- п.8 и своя сумма: два тихих раскрывающихся блока --- */
.bid-fold { margin-top: var(--s2); border-top: 1px solid var(--line); padding-top: 12px; }
.bid-fold summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: var(--accent);
}
.bid-fold summary::-webkit-details-marker { display: none; }
.bid-fold summary::before {
  content: ''; flex: 0 0 auto;
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s var(--ease);
}
.bid-fold[open] summary::before { transform: rotate(45deg); }
.bid-fold__body { padding-top: 12px; }
.bid-fold__text { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.bid-fold__hint { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); }
.bid-fold__hint.is-bad { color: var(--warn); }
.bid-fold__state { margin: 10px 0 0; font-size: 13.5px; color: var(--ok); }
.bid-fold__cancel {
  margin-top: 8px; padding: 0;
  background: none; border: 0;
  font-size: 13.5px; color: var(--ink-2);
}
.bid-fold__cancel:hover { color: var(--warn); }

.bid-own__row { display: flex; gap: 8px; }
.bid-own__row input {
  flex: 1 1 auto; min-width: 0; min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--page-white); color: var(--ink-black);
  font: inherit; font-size: 15px; font-variant-numeric: tabular-nums;
}
.bid-own__row input::placeholder { color: var(--ink-3); }
.bid-own__row input:focus { outline: none; border-color: var(--accent); }
.bid-own__row .btn { flex: 0 0 auto; min-height: 44px; padding: 0 14px; }

/* --- п.9: сделано ставок и лидер --- */
.bid-tally {
  margin: var(--s2) 0 0; padding-top: var(--s2);
  border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-2); line-height: 1.55;
}
.bid-tally[hidden] { display: none; }
.bid-tally b { color: var(--ink-black); font-weight: 500; }
.bid-tally.is-mine b { color: var(--ok); }

/* --- Итог завершённых торгов --- */
.bid-result { margin-top: var(--s2); border-top: 1px solid var(--line); padding-top: var(--s2); }
.bid-result__plate {
  padding: var(--s2);
  background: var(--accent-bg); border-radius: var(--r-panel);
}
.bid-result__plate.is-unsold { background: var(--surface-2); }
.bid-result__verdict { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.3; }
.bid-result__verdict .price { font-size: 20px; }
.bid-result__note { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); }
.bid-result__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--s2); }
.bid-result__actions .btn { flex: 1 1 150px; }

.bid-conn { margin: var(--s2) 0 0; font-size: 13.5px; color: var(--warn); }

/* --- п.10: история ставок — раскрывающийся блок со стрелкой --- */
.bid-history { margin-top: var(--s3); border-top: 1px solid var(--line); }
.bid-history summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 2px;
}
.bid-history summary::-webkit-details-marker { display: none; }
.bid-history__word { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.3; }
.bid-history summary .num { margin-left: auto; color: var(--ink-2); font-size: 13.5px; }
.bid-history summary::after {
  content: ''; flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 1.6px solid var(--ink-2); border-bottom: 1.6px solid var(--ink-2);
  transform: rotate(45deg); margin-bottom: 3px;
  transition: transform .2s var(--ease);
}
.bid-history[open] summary::after { transform: rotate(-135deg); }
.bid-history summary:hover .bid-history__word { color: var(--accent); }
.bid-history summary:hover::after { border-color: var(--accent); }
.bid-history__body { padding-bottom: var(--s2); }
.bid-history__feed {
  margin: 0; padding: 0; list-style: none;
  max-height: 380px; overflow-y: auto;
}
.bid-history__feed li { border-bottom: 1px solid var(--line); }
.bid-history__empty { padding: 14px 2px; color: var(--ink-2); font-size: 13.5px; border-bottom: 0 !important; }
.bid-history__more {
  margin-top: 12px; padding: 0;
  background: none; border: 0;
  font-size: 13.5px; color: var(--accent);
}
.bid-history__more:hover { color: var(--accent-dark); }
.bid-history__more[hidden] { display: none; }

.bh-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; font-size: 13.5px; }
.bh-row__sum { font-family: var(--serif); font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bh-row__who { color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-row__tag {
  flex: 0 0 auto; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-dark); background: var(--accent-bg);
  padding: 3px 7px; border-radius: var(--r-control);
}
.bh-row__when { margin-left: auto; flex: 0 0 auto; color: var(--ink-2); font-size: 13.5px; }
/* Кнопка «Перебить» стоит у последней ставки и подставляет следующий шаг */
.bh-row__beat { flex: 0 0 auto; margin-left: auto; min-height: 34px; padding: 0 12px; font-size: 13.5px; }
/* .btn задаёт display: inline-flex, и он сильнее браузерного [hidden] */
.bh-row__beat[hidden] { display: none; }
.bh-row__beat + .bh-row__when { margin-left: 10px; }
.bh-row.is-mine .bh-row__sum { color: var(--accent); }
.bh-row.is-note { color: var(--ink-2); font-size: 13.5px; }
@keyframes row-in { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
.bh-row.is-new { animation: row-in .35s var(--ease); }

/* ============ Мобильная панель снизу ============
   Тот же порядок веса, что и на панели: цена крупная,
   кнопка «Сделать ставку» — главная, счётчик тихий. */

.bid-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  align-items: center; gap: 12px;
  padding: 10px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: var(--page-white);
  border-top: 1px solid var(--line);
}
.bid-dock[hidden] { display: none; }
.bid-dock__info { min-width: 0; display: flex; flex-direction: column; }
.bid-dock__price {
  font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1.2;
  color: var(--ink-black); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bid-dock__clock { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bid-dock__clock.is-warn { color: var(--warn); }
.bid-dock .btn { flex: 1 1 auto; min-height: 48px; font-weight: 600; }

/* ============ п.19: подтверждение ставки ============
   Первое окно — быстрое: фокус сразу на кнопке, Enter подтверждает.
   Второе не окно вовсе, а короткая отметка, которая уходит сама. */

.bid-modal {
  position: fixed; inset: 0; z-index: 220;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s3);
}
.bid-modal[hidden] { display: none !important; }
.bid-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 20, 20, .45); }
.bid-modal__card {
  position: relative;
  width: 100%; max-width: 460px;
  max-height: 86vh; overflow-y: auto;
  background: var(--page-white);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-pop);
  padding: var(--s4);
}
.bid-modal__close {
  position: absolute; right: 12px; top: 12px;
  width: 32px; height: 32px;
  border: 0; background: none;
  color: var(--ink-2); font-size: 15px; cursor: pointer;
}
.bid-modal__close:hover { color: var(--accent); }
.bid-modal__head { margin: 0 0 var(--s1); font-size: 22px; font-weight: 600; }
.bid-modal__lot { margin: 0 0 var(--s2); font-size: 13.5px; color: var(--ink-2); }
.bid-modal__sum {
  font-family: var(--serif); font-weight: 600;
  font-size: 34px; line-height: 1.15; color: var(--ink-black);
}
.bid-modal__sum:empty { display: none; }
.bid-modal__note { margin: var(--s2) 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.bid-modal__actions { display: flex; gap: 10px; margin-top: var(--s3); }
.bid-modal__actions .btn { flex: 1 1 auto; }
@keyframes modal-in { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.bid-modal__card { animation: modal-in .18s var(--ease); }

/* ============ Лайтбокс (всегда тёмный — фото смотрят на чёрном) ============ */

.room-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(16, 15, 20, .94);
  display: flex; align-items: center; justify-content: center;
}
.room-lightbox[hidden] { display: none; }
.room-lightbox img {
  max-width: min(92vw, 1400px); max-height: 92vh;
  object-fit: contain; cursor: zoom-out;
}
.room-lightbox__close,
.room-lightbox__arrow {
  position: absolute; z-index: 1;
  background: none; border: 0; color: #ECEAF2;
  font-size: 30px; line-height: 1; padding: 14px;
  opacity: .75; transition: opacity .2s;
}
.room-lightbox__close:hover, .room-lightbox__arrow:hover { opacity: 1; }
.room-lightbox__close { top: 10px; right: 14px; }
.room-lightbox__arrow { top: 50%; transform: translateY(-50%); font-size: 44px; }
.room-lightbox__arrow--prev { left: 8px; }
.room-lightbox__arrow--next { right: 8px; }
.room-lightbox__counter {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: #ECEAF2; font-size: 13.5px; opacity: .8;
}

/* --- Сообщение об ошибке --- */
.room-error { padding: var(--s12) 0; text-align: center; }
.room-error p { color: var(--ink-2); margin: 0 0 var(--s3); }

/* ============ Адаптив ============ */

@media (max-width: 960px) {
  /* minmax(0,…): иначе 1fr = minmax(auto,…), и внутренняя ширина полей
     панели распирала колонку за 375px — страница скроллилась вбок */
  .room-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  /* Порядок одной колонки: название → фото → панель торгов →
     история ставок → описание лота → вкладки */
  .room-left, .room-right { display: contents; }
  .room-head { order: 1; }
  .room-gallery { order: 2; }
  .bid-panel { order: 3; }
  .bid-history { order: 4; margin-top: 0; }
  .room-card { order: 5; margin-top: 0; }
  .room-tabsec { order: 6; margin-top: 0; }
  .bid-dock { display: flex; }
  /* контент не прячется за нижней панелью */
  .site-footer { padding-bottom: 96px; }
  .room-photo { aspect-ratio: 4 / 3; }
  .bid-history__feed { max-height: none; }
}

@media (max-width: 560px) {
  .room-head { gap: 12px; }
  /* «Завершение торгов» и дата в одну строку на 375px не встают:
     «мск» отрывалось на свою строку и висело под датой */
  .bid-when__row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .bid-when__date { text-align: left; }
  .bid-modal { padding: var(--s2); }
  .bid-modal__card { padding: var(--s3); }
  .bid-modal__actions { flex-direction: column-reverse; }
  .room-specs th { width: 44%; }
  /* В строке истории на 375px сумма, имя, время и «Перебить» в один ряд
     не помещались: кнопка съедала имя до одной буквы. Кнопка уходит
     на свою строку, ряд остаётся читаемым. */
  .bh-row { flex-wrap: wrap; row-gap: 6px; }
  .bh-row__who { flex: 1 1 auto; }
  .bh-row__beat { order: 5; margin-left: 0; }
}

/* Тихо при «поменьше движения» */
@media (prefers-reduced-motion: reduce) {
  .bid-current__value.is-bumped,
  .bid-alert.is-fresh,
  .bid-modal__card,
  .bh-row.is-new { animation: none; }
}