/* ============================================================
   VisArtis — страница лота: хлебная крошка с шевронами, этикетка
   с сердечком, галерея со знаком платформы, «Детали» в два
   столбика, оплата и доставка, продавец, панель торгов/покупки,
   ленты карточек. Поверх base.css.

   Канон — главная (ЗАКОН v1.0). Разделы отбиты воздухом, а не
   линейками; заголовки — T2 27px и T3 20px; деньги — T4 17px,
   крупная сумма — 27px; карточка предмета одна на весь сайт.
   ============================================================ */

/* Полотно, карточка предмета, кнопки, бейджи, сердечко и высота
   шапки живут в base.css: здесь только то, чего нет больше нигде. */

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

/* --- Хлебная крошка: Категория › Отдел › Полка › № … --- */
.lot-crumbs { font-size: 13.5px; color: var(--ink-2); margin-bottom: var(--s3); }
.lot-crumbs a { color: var(--ink-2); }
.lot-crumbs a:hover { color: var(--accent); }
.lot-crumbs .sep { margin: 0 7px; color: var(--ink-3); }
.lot-crumbs .here { color: var(--ink-black); white-space: nowrap; }

/* --- Две колонки: содержимое + панель --- */
.lot-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--s6);
  align-items: start;
}
.lot-main { min-width: 0; }
@media (max-width: 1100px) {
  .lot-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s4); }
}
@media (max-width: 960px) {
  .lot-layout { grid-template-columns: 1fr; }
}

/* --- Этикетка: название · автор · размер · период + сердечко --- */
.lot-head {
  display: flex; align-items: flex-start; gap: var(--s2);
  margin-bottom: var(--s3);
}
.lot-label { flex: 1 1 auto; min-width: 0; }
.lot-label h1 {
  display: block; font-size: 34px; line-height: 1.15;
  margin: 0; text-wrap: balance;
}
/* Автор, размер и период — лид под титулом (B1, 62ch), а не
   хвост в одну строку с именем: на длинном имени этикетка
   рассыпалась и вторая строка начиналась чужим кеглем. */
.lot-label__meta {
  display: block; max-width: 62ch;
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  color: var(--ink-2); margin: 12px 0 0;
}
.lot-head__like { flex: 0 0 auto; padding-top: 4px; }
.lot-head__like .like { position: static; }

/* --- Галерея: крупное фото слева, колонка превью справа --- */
/* До девяти снимков продавца. Ряд-колонка растягивается по высоте фотографии,
   а сама лента прокручивается внутри — снимки никогда не тянут вёрстку вниз. */
/* ---------- Галерея предмета ----------
   Одна главная фотография, остальные лентой ПОД ней. Прежде превью стояли
   узкой колонкой справа и отъедали у главного кадра восемьдесят четыре
   пикселя ширины — на предмете, ради которого страницу и открыли.

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

.lot-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.lot-gallery__main { min-width: 0; }

.lot-photo {
  /* width задана явно: с одним только aspect-ratio Chrome при срабатывании
     потолка ужимает и ширину — кадр съезжал влево, оставляя треть колонки
     пустой. */
  width: 100%;
  aspect-ratio: 4 / 5;
  /* Без потолка кадр 4/5 в широкой колонке уезжал на 1180px: страница
     открывалась пустой плашкой вокруг картины. */
  max-height: min(74vh, 720px);
  background: var(--photo-bed);
  background-image: none;
  border: 0;
  border-radius: var(--r-photo);
  overflow: hidden;
  position: relative;
}
.lot-photo img {
  width: 100%; height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}
/* Знак платформы — полупрозрачный фиолетовый оверлей, в файл не запекается */
.lot-photo__logo {
  position: absolute; right: 14px; bottom: 12px;
  color: var(--accent); opacity: .18;
  pointer-events: none; user-select: none;
  line-height: 0;
}
.lot-photo__empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); font-size: 15px;
}
.lot-photo__note { margin: 8px 2px 0; font-size: 13.5px; color: var(--ink-2); }
.lot-photo__note[hidden] { display: none; }

/* Превью: ряд под главным кадром. Некрупные — их задача показать, сколько
   кадров есть и что на них, а не соперничать с главным. */
.lot-thumbs { position: relative; min-width: 0; }
.lot-thumbs[hidden] { display: none; }
.lot-thumbs__scroll {
  position: static;
  display: flex; flex-direction: row; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.lot-thumbs button {
  flex: 0 0 auto;
  width: 72px; height: 72px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-photo);
  background: var(--photo-bed); overflow: hidden;
  transition: border-color .2s var(--ease);
  cursor: pointer;
}
.lot-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lot-thumbs button[aria-current] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.lot-thumbs button:hover { border-color: var(--accent-light); }

/* Узкий экран: превью те же, только мельче — раскладка одна на все ширины,
   и отдельного мобильного правила ей больше не нужно. */
@media (max-width: 560px) {
  .lot-thumbs button { width: 60px; height: 60px; }
}

/* --- «Поделиться»: значки без подписей -------------------------
   Кнопки ведут прямо на t.me и vk.com: ни виджетов, ни счётчиков,
   ни сторонних скриптов — чужой код на карточке лота означал бы
   чужие куки у покупателя и лишний блокирующий запрос.
   Ряд стоит сразу под фотографиями и потому отбит 24px, а не
   разделительными 56px: это утилита, а не раздел страницы. */
.lot-main .lot-share { margin-top: var(--s3); }
.lot-share {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.lot-share[hidden] { display: none; }
.lot-share__label { font-size: 13.5px; color: var(--ink-2); }
.lot-share__row { display: flex; gap: 10px; flex-wrap: wrap; }
.lot-share__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--page-white); color: var(--ink-black);
  font-family: var(--sans); font-size: 14px; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease),
              background-color .18s var(--ease);
}
.lot-share__btn svg { flex: 0 0 auto; color: var(--accent); }
.lot-share__btn:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-bg);
}
.lot-share__btn:hover svg { color: var(--accent); }
.lot-share__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Подтверждение копирования: кнопка сама себе уведомление — всплывашки
   на странице лота нет, а заводить её ради одной строки незачем. */
.lot-share__btn.is-done,
.lot-share__btn.is-done:hover {
  border-color: var(--ok); color: var(--ok); background: var(--ok-bg);
}
.lot-share__btn.is-done svg { color: var(--ok); }
/* На телефоне четыре подписанные кнопки разъезжались на три ряда и занимали
   130px сразу под фотографией. Сети остаются одними знаками (имя платформы
   живёт в aria-label и в подсказке), подпись сохраняет только «Копировать
   ссылку» — там знак цепи без слов читается неоднозначно. */
@media (max-width: 520px) {
  .lot-share { gap: 10px; }
  /* Подпись уходит на свою строку: делить строку с кнопками она может только
     за счёт их ширины, и «Копировать ссылку» выезжала за край экрана. */
  .lot-share__label { flex: 0 0 100%; }
  .lot-share__row { gap: 8px; width: 100%; }
  .lot-share__btn { padding: 0 12px; font-size: 13.5px; }
  .lot-share__btn--net { width: 42px; padding: 0; justify-content: center; }
  .lot-share__btn--net span { display: none; }
}

/* ------------------------------------------------------------
   Заголовки левой колонки. Разделы отбиты воздухом (56px), а не
   волосяной линейкой: семь одинаковых 20px-заголовков через
   линейку читались как таблица, а не как страница.
   ------------------------------------------------------------ */
.lot-main section { margin-top: var(--gap-section); }
.lot-main section h2 {
  font-size: clamp(22px, 2.4vw, 27px); line-height: 1.2;
  margin: 0 0 20px; text-wrap: balance;
}
.lot-main section h3 { font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0 0 10px; }
.lot-main .lot-gallery, .lot-main .lot-head { margin-top: 0; }

/* --- «Детали»: два столбика --- */
.lot-details { border-top: 0; padding-top: 0; }
.lot-details__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 var(--s6);
}
.ld {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.ld__k { color: var(--ink-2); white-space: nowrap; }
.ld__v { text-align: right; min-width: 0; }
@media (max-width: 640px) {
  .lot-details__grid { grid-template-columns: 1fr; gap: 0; }
}

/* --- Описание продавца и провенанс --- */
.lot-desc p { margin: 0 0 12px; color: var(--ink-black); }
.lot-prov p { margin: 0 0 10px; color: var(--ink-2); font-size: 15px; }
.lot-prov .chain { margin: 6px 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 15px; }
.lot-prov .chain li { margin-top: 4px; }
.lot-prov .chain .num { color: var(--ink-3); margin-right: 6px; }

/* --- Оплата и доставка --- */
.lot-shipping { border-top: 0; padding-top: 0; }
.pd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s6); }
.pd-cols ul { margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 15px; }
.pd-cols li { padding: 4px 0; display: flex; gap: 8px; align-items: baseline; }
.pd-cols li::before { content: '·'; color: var(--accent); font-weight: 700; }
@media (max-width: 640px) { .pd-cols { grid-template-columns: 1fr; } }

/* Способ, которого ещё нет: пометка приглушённая, чтобы не выглядела обещанием */
.pd-soon {
  font-size: 12.5px; color: var(--ink-3); white-space: nowrap;
}
.pd-place { margin: var(--s3) 0 0; font-size: 15px; color: var(--ink-2); }
.pd-place b { color: var(--ink-black); font-weight: 500; }

/* «Безопасная сделка» — фиолетовая пастель. Один компонент —
   один фон в обеих темах и в обоих местах страницы. */
.safe-deal {
  margin-top: var(--s3);
  background: var(--accent-bg);
  border-radius: var(--r-panel);
  padding: var(--s2) var(--s3);
}
.lot-main .safe-deal h3,
.safe-deal h3 { font-size: 17px; font-weight: 600; margin: 0 0 10px; color: var(--accent-dark); }
.safe-deal ul { margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-black); }
.safe-deal li { display: flex; gap: 10px; align-items: center; padding: 5px 0; }
/* «Запускаем вторым этапом» — честная оговорка рядом с заголовком */
.safe-deal__soon {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-size: 12.5px; font-weight: 400; color: var(--ink-3);
}

/* Значки сделки: монолиния 20px акцентом. Пока разметка
   присылает эмодзи (js/item.js), глиф гасится и вместо него
   рисуется маска; как только придёт SVG — правило отключится
   само и останется чистый значок системы. */
.safe-deal__ico {
  flex: 0 0 20px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.safe-deal__ico svg { width: 20px; height: 20px; }
.safe-deal__ico:not(:has(svg)) { font-size: 0; line-height: 0; }
.safe-deal__ico:not(:has(svg))::before {
  content: ''; display: block; width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: var(--ico) center / 20px 20px no-repeat;
          mask: var(--ico) center / 20px 20px no-repeat;
}
.safe-deal li:nth-child(1) .safe-deal__ico {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10' width='15' height='10' rx='1.6'/%3E%3Cpath d='M8 10V7.5a4 4 0 0 1 8 0V10'/%3E%3C/svg%3E");
}
.safe-deal li:nth-child(2) .safe-deal__ico {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5L12 3.2l8.5 4.3v9L12 20.8 3.5 16.5z'/%3E%3Cpath d='M3.5 7.5L12 11.8l8.5-4.3M12 11.8v9'/%3E%3C/svg%3E");
}
.safe-deal li:nth-child(3) .safe-deal__ico {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.6L12 4.2l9 5.4'/%3E%3Cpath d='M5.5 11v7M9.8 11v7M14.2 11v7M18.5 11v7M3.4 20.2h17.2'/%3E%3C/svg%3E");
}
.safe-deal li:nth-child(4) .safe-deal__ico {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.2L4.4 9.8 9 14.4'/%3E%3Cpath d='M4.4 9.8H15a4.6 4.6 0 0 1 0 9.2h-3.6'/%3E%3C/svg%3E");
}
.safe-deal li:nth-child(5) .safe-deal__ico {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10.2h18M6.6 14.8h3.4'/%3E%3C/svg%3E");
}

/* --- Продавец --- */
.lot-seller { border-top: 0; padding-top: 0; }
.lot-seller__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lot-seller__row .name { font-family: var(--serif); font-size: 17px; font-weight: 600; }
/* Одна строка регалий: «✓ Верифицирован · Продано лотов (N) · Отзывы (N)».
   Точки-разделители — отдельные узлы: счётчика может не быть вовсе. */
.lot-seller__marks { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lot-seller__marks .dot { color: var(--ink-3); }
.lot-seller__row .sold,
.lot-seller__row .reviews { font-size: 13.5px; color: var(--ink-2); }
a.reviews { color: var(--accent); text-decoration: none; }
a.reviews:hover { text-decoration: underline; }
.lot-seller .bio { color: var(--ink-2); font-size: 15px; margin: 8px 0 0; }
.lot-seller__ask { margin-top: var(--s2); }
/* Две спокойные полосы блока продавца: «продавец ограничил вам доступ» и
   «вы у себя не показываете его предметы». Обе без тревожного красного и без
   кнопок: это не поломка и не наказание, а положение дел, о котором честно
   говорят заранее — чтобы человек не бился в отказ после нажатия и не считал
   пропажу предмета из каталога поломкой площадки. */
.lot-seller__closed,
.lot-seller__quiet {
  margin: var(--s2) 0 0; padding: 10px 12px;
  border-left: 2px solid var(--line-strong, var(--line));
  background: var(--surface-1);
  font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
}
.lot-seller__ask svg { flex: 0 0 auto; }

/* --- Вкладки блока продавца: «О продавце» и «Все лоты продавца» ---
   Рецепт вкладок сайта (.cab-tabs / .cab-tab из cabinet.css) повторён здесь
   третий раз — ровно так же, как его повторил зал торгов (.room-tabs в
   auction.css), и по той же причине: cabinet.css на этой странице не
   грузится. Правки — только вместе с оригиналом, иначе вкладок на сайте
   станет три разных. */
.lot-tabs {
  display: flex;
  gap: 2px;
  margin: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  /* На телефоне полоса прокручивается, а не переносит вкладку на вторую
     строку: перенос ломает подчёркивание выбранной. */
  overflow-x: auto;
  scrollbar-width: none;
}
.lot-tabs::-webkit-scrollbar { display: none; }
.lot-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;
  cursor: pointer;
}
.lot-tab[hidden] { display: none; }
.lot-tab:hover { color: var(--accent-dark); background: var(--accent-bg); }
.lot-tab.is-on { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 500; }

.lot-tabpane[hidden] { display: none; }
.lot-tabpane__note { margin: var(--s2) 0 0; font-size: 13.5px; color: var(--ink-2); }

/* «О продавце» — те же строки «ключ — значение», что и в «Деталях»: один
   список сведений на странице, а не два разных. */
.lot-about { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s6); }
@media (max-width: 640px) { .lot-about { grid-template-columns: 1fr; } }
.lot-about + .bio { margin-top: var(--s3); }

/* Лоты продавца во вкладке: колонка уже страницы — справа стоит панель
   покупки, — поэтому три карточки в ряд, а не четыре, как в лентах внизу. */
.lot-tabpane .lot-mgrid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) {
  .lot-tabpane .lot-mgrid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Панель покупки: тихая боковая панель на белом полотне --- */
.lot-panel {
  min-width: 0;
  position: sticky; top: calc(var(--header-h) + var(--s3));
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: var(--s3);
}
.p-row { font-size: 13.5px; color: var(--ink-2); margin-top: 10px; }
.p-row b { color: var(--ink-black); font-weight: 400; }
.p-row:first-child { margin-top: 0; }

.p-price-wrap { margin: var(--s2) 0; }
.p-cap { font-size: 13.5px; color: var(--ink-2); display: block; }
.p-price { font-size: 27px; line-height: 1.2; }
.p-price--ask { font-family: var(--serif); font-size: 20px; color: var(--ink-2); }

/* --- Полный отсчёт до конца торгов: дни : часы : минуты : секунды --- */
.p-count { margin-top: 12px; }
.p-count[hidden] { display: none; }
.p-count__cap { font-size: 13.5px; color: var(--ink-2); margin-bottom: 4px; }
.p-count__grid { display: flex; align-items: flex-start; gap: 2px; }
.p-count__cell {
  flex: 1 1 0; min-width: 0; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.p-count__n {
  font-family: var(--serif);
  font-size: 27px; line-height: 1.15;
  font-weight: 600; color: var(--ink-black);
  font-variant-numeric: tabular-nums;
}
.p-count__u { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-top: 2px; white-space: nowrap; }
.p-count__sep {
  flex: 0 0 auto; padding-top: 1px;
  font-family: var(--serif); font-size: 27px; line-height: 1.15;
  color: var(--ink-3);
}
/* Меньше часа до конца торгов — тревожный цвет */
.p-count.is-urgent .p-count__n,
.p-count.is-urgent .p-count__sep { color: var(--warn); }
.p-count.is-urgent .p-count__cap { color: var(--warn); }
.p-count__over { font-size: 15px; color: var(--warn); }

/* --- Резервная цена: подпись + всплывающая подсказка --- */
.p-reserve {
  position: relative;
  margin-top: 8px; font-size: 13.5px; color: var(--ink-2);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.p-reserve[hidden] { display: none; }
.p-hint {
  flex: 0 0 auto;
  width: 18px; height: 18px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-round);
  background: var(--page-white); color: var(--ink-2);
  font-size: 11px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.p-hint:hover, .p-hint[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
/* Выше мобильной полосы действий (z-index 90), иначе она срезала бы подсказку */
.p-hint__pop {
  position: absolute; z-index: 95;
  left: 0; right: 0; top: calc(100% + 8px);
  background: var(--page-white); border: 1px solid var(--line);
  border-radius: var(--r-panel); box-shadow: var(--shadow-pop);
  padding: var(--s2);
}
.p-hint__pop[hidden] { display: none; }
.p-hint__pop ul { margin: 0; padding: 0; list-style: none; }
.p-hint__pop li {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 13.5px; line-height: 1.45; color: var(--ink-black);
  padding: 5px 0;
}
.p-hint__pop li + li { border-top: 1px solid var(--line); }
.p-hint__pop li::before { content: '·'; color: var(--accent); font-weight: 700; flex: 0 0 auto; }

.p-btn { width: 100%; margin-top: 10px; }
.p-btn svg { flex: 0 0 auto; }
.p-btn[disabled] {
  background: var(--surface-2); color: var(--ink-3);
  cursor: not-allowed; border: 1px solid var(--line);
}
.p-track.is-on { border-color: var(--accent); color: var(--accent); }
.p-track.is-on svg { fill: var(--accent); color: var(--accent); }

.p-link {
  display: block; background: none; border: 0; padding: 0;
  margin-top: 12px; font-size: 15px; color: var(--accent);
  text-align: left; cursor: pointer;
}
.p-link:hover { color: var(--accent-dark); }

.p-pastsale { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); }

/* --- Формы ставки и предложения --- */
.bid-form {
  margin-top: 12px; padding: var(--s2);
  background: var(--page-white); border: 1px solid var(--line); border-radius: var(--r-panel);
}
.form-lbl { display: block; font-size: 13.5px; color: var(--ink-2); margin-bottom: 6px; }
.bid-form__row { display: flex; gap: 8px; }
.bid-form__row input, #modal .bid-form__row input {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--page-white); color: var(--ink-black);
  font-size: 15px; padding: 0 14px; min-height: 46px;
  font-variant-numeric: tabular-nums;
}
.bid-form__row input:focus { outline: none; border-color: var(--accent); }
.form-hint { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); }
.form-err { margin-top: 8px; font-size: 13.5px; color: var(--warn); }
.form-ok { margin-top: 8px; font-size: 13.5px; color: var(--ok); }

/* --- Полная история торгов: от новых к старым, внизу — начало отсчёта --- */
.bids-feed { margin-top: 8px; max-height: 320px; overflow-y: auto; }
.bids-feed[hidden] { display: none; }
.bid-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.bid-row__sum { font-size: 17px; flex: 0 0 auto; }
.bid-row__who { color: var(--ink-2); flex: 1 1 auto; min-width: 0; }
.bid-row__when { color: var(--ink-3); white-space: nowrap; flex: 0 0 auto; }
.bid-row__auto {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1; padding: 4px 6px;
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  color: var(--ink-2);
}
.bid-row.is-mine .bid-row__sum { color: var(--accent); font-weight: 600; }
.bid-row.is-mine .bid-row__who { color: var(--accent); }
/* Стартовая строка — всегда последняя: с неё начался счёт */
.bid-row--start {
  border-bottom: 0; border-top: 1px solid var(--line-strong);
  color: var(--ink-2); font-size: 13.5px;
}
.bid-row--start .bid-row__sum { font-size: 15px; color: var(--ink-2); }
.bids-feed__empty { padding: 8px 0; color: var(--ink-2); font-size: 13.5px; }

/* ------------------------------------------------------------
   Ленты карточек. Оболочка карточки — канон главной: фото без
   рамки и тени (6px), под ним имя и цена. Строка происхождения
   и размеры уходят: они ломали базовую линию цен в ряду.
   ------------------------------------------------------------ */
.lot-strip { margin-top: var(--gap-section); }
.lot-strip__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2); margin-bottom: 20px;
}
.lot-strip__head h2 { font-size: clamp(22px, 2.4vw, 27px); line-height: 1.2; margin: 0; }
/* Ссылка-переход на сайте одна: .see-all — 14.5px/500 акцентом со стрелкой */
.lot-strip__all {
  display: inline-block; white-space: nowrap;
  font-size: 14.5px; font-weight: 500; line-height: 1.6;
  color: var(--accent);
}
.lot-strip__all::first-letter { text-transform: uppercase; }
.lot-strip__all svg { display: none; }
.lot-strip__all::after { content: ' →'; }
.lot-strip__all:hover { color: var(--accent-dark); }
.lot-mgrid { display: grid; gap: var(--s4) var(--s3); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .lot-mgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .lot-mgrid { grid-template-columns: repeat(2, 1fr); gap: var(--s3) var(--s2); } }

/* Обе ленты — «Другие лоты продавца» (.lot-mgrid) и «Похожие»
   (.items-grid) — рисуют одну и ту же карточку из base.css.
   Страница её не переопределяет. */

/* --- Мобильная панель действий: стики снизу --- */
.lot-buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: center; gap: var(--s2);
  padding: 10px max(16px, env(safe-area-inset-left))
           max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right));
  background: var(--page-white);
  border-top: 1px solid var(--line);
}
.lot-buybar__price { font-size: 20px; flex: 1 1 auto; min-width: 0; }
.lot-buybar .btn { flex: 0 0 auto; }
@media (max-width: 960px) {
  .lot-buybar { display: flex; }
  .lot-panel { position: static; }
  .lot-page { padding-bottom: 76px; }
}

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

/* --- Лайтбокс --- */
/* Затемнение — всегда тёмное, в обеих темах: фотографию смотрят на чёрном */
.lot-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(16, 15, 20, .94);
  display: flex; align-items: center; justify-content: center;
}
.lot-lightbox[hidden] { display: none; }
.lot-lightbox img {
  max-width: min(92vw, 1400px); max-height: 92vh;
  object-fit: contain; cursor: zoom-out;
}
.lot-lightbox__close,
.lot-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;
}
.lot-lightbox__close:hover, .lot-lightbox__arrow:hover { opacity: 1; }
.lot-lightbox__close { top: 10px; right: 14px; }
.lot-lightbox__arrow { top: 50%; transform: translateY(-50%); font-size: 44px; }
.lot-lightbox__arrow--prev { left: 8px; }
.lot-lightbox__arrow--next { right: 8px; }
.lot-lightbox__counter {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: #ECEAF2; font-size: 13.5px; opacity: .8;
}

/* --- Мини-окно по центру --- */
.lot-modal { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: var(--s3); }
.lot-modal[hidden] { display: none; }
.lot-modal__backdrop { position: absolute; inset: 0; background: rgba(16, 15, 20, .5); }
.lot-modal__card {
  position: relative; max-width: 480px; width: 100%;
  max-height: 88vh; 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);
}
.lot-modal__card h3 { font-size: 20px; font-weight: 600; margin: 0 0 10px; padding-right: 24px; }
.lot-modal__card p { margin: 0 0 var(--s2); font-size: 15px; }
.lot-modal__close {
  position: absolute; top: 10px; right: 10px;
  background: none; border: 0; color: var(--ink-2); font-size: 18px; padding: 8px;
}
.lot-modal__close:hover { color: var(--accent); }
.lot-modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: var(--s2); }

.lot-modal__card textarea {
  width: 100%; resize: vertical; min-height: 110px;
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--page-white); color: var(--ink-black);
  font: inherit; font-size: 15px; padding: 10px 14px;
}
.lot-modal__card textarea:focus { outline: none; border-color: var(--accent); }

.ab-list { margin: 0 0 var(--s2); padding: 0; list-style: none; font-size: 15px; color: var(--ink-black); }
.ab-list li { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; }
.ab-list li::before { content: '·'; color: var(--accent); font-weight: 700; }

/* Нумерованный список «что дальше» в мини-окне: без тупика в конце */
.next-steps { margin: 14px 0 4px; padding-left: 20px; }
.next-steps li { margin-bottom: 8px; color: var(--ink-2); font-size: 15px; }
.next-steps li::marker { color: var(--accent); font-weight: 600; }

/* Подписка отодвинута от отметок продавца — своё действие, не отметка */
.lot-seller__row .follow { margin-left: auto; flex: 0 0 auto; }
@media (max-width: 640px) {
  .lot-seller__row .follow { margin-left: 0; margin-top: 10px; }
}

/* ---------- «Поделиться»: компактный ряд значков ----------
   Подписи убраны: строка под фотографией — самое дорогое место на странице,
   и три слова там стоят дороже, чем помогают. Название осталось в title и
   aria-label, а отклик копирования — значком и цветом, не текстом.

   Правила стоят в конце файла и перекрывают прежние: там кнопка была
   широкой пилюлей с подписью. */
.lot-share { margin: 10px 0 0; }
.lot-share__row { display: flex; gap: 6px; }
.lot-share__btn {
  width: 34px; height: 34px; padding: 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-control);
  background: transparent; color: var(--ink-2); cursor: pointer;
  font-size: 0;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.lot-share__btn:hover { color: var(--accent); border-color: var(--accent); }
.lot-share__btn.is-done,
.lot-share__btn.is-done:hover { color: var(--ok); border-color: var(--ok); }
.lot-share__btn svg { width: 18px; height: 18px; }
.lot-share__btn span { display: none; }
@media (max-width: 560px) {
  .lot-share__btn { width: 38px; height: 38px; }
  .lot-share__btn--net { width: 38px; padding: 0; }
}

/* Доля положительных отзывов в строке регалий продавца. Тон тот же, что у
   счётчика отзывов: это сводка, а не отличие, и выделять её нечем. */
.lot-seller__row .share { font-size: 13.5px; color: var(--ink-2); }
.lot-seller__row .share .num { font-variant-numeric: tabular-nums; color: var(--ink-black); }

/* ---------- Номер лота в ряду «поделиться» ----------
   Ненавязчиво, но читаемо: тон подписи, а не заголовка. Это кнопка, а не
   надпись, потому что её работа — отдать номер в буфер по нажатию; отклик
   тот же, что у кнопки ссылки рядом, — цветом и словом на себе самой.
   Ряд .lot-share переносит строки сам (flex-wrap), поэтому длинный номер на
   узком экране уезжает под значки целиком, а не рвётся посередине. */
.lot-share__id {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px;
  border: 1px solid transparent; border-radius: var(--r-control);
  background: transparent; color: var(--ink-2); cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; line-height: 1;
  white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.lot-share__id:hover { color: var(--accent); border-color: var(--accent); }
.lot-share__id:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lot-share__id.is-done,
.lot-share__id.is-done:hover { color: var(--ok); border-color: var(--ok); }
.lot-share__id-k {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
.lot-share__id-v { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .lot-share__id { height: 38px; padding: 0 8px; }
}

/* Прежняя цена в панели покупки — строкой под ценником, а не рядом: справа
   в панели узко, и на телефоне строка «было …» уезжала бы за край. */
.p-price-was {
  margin-top: 4px; font-size: 14px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.p-price-was s { color: inherit; }

/* Тихая строка под кнопками покупки: «Купить свой лот нельзя». Не полоса и не
   предупреждение — хозяин и так знает, чей это предмет; ему нужно объяснение
   погасшей кнопки, а не сообщение во весь экран. */
.p-own-note {
  margin: 10px 0 0; font-size: 13.5px; line-height: 1.45;
  color: var(--ink-3); text-align: center;
}
/* Два действия под именем продавца: вопрос и заметная кнопка витрины. */
.lot-seller__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s2); }
.lot-seller__acts .lot-seller__ask { margin-top: 0; }
.lot-about__text { margin: 0; line-height: 1.6; color: var(--ink-2); }
.lot-about__facts { margin: 12px 0 0; font-size: 14px; color: var(--ink-3); }