/* Страница детали.

   Витрины из подобранных руками позиций больше нет — снесена 17.08.2026
   вместе с файлом и снимками. Страницу открывает поиск по прайсу поставщика,
   и стили сетки ушли вместе с ней. */

/* ============================================================================
   СТРАНИЦА ДЕТАЛИ
   ============================================================================
   Занимает место витрины, как страница заказа занимает место списка: своей
   шапки нет, «назад» в телеграме системная.

   Порядок: название, снимок, цена. Так устроены объявления на площадках, и
   так цена не уезжает вниз за снимок в пол-экрана (решение владельца
   16.08.2026).

   ВЕС ЗАГОЛОВКА И ЦЕНЫ ЗАДАЁТСЯ ЗДЕСЬ. Он средний, не жирный: на странице их
   всего два крупных места, и кричать им не с кем. */

/* Страница обычным потоком, а не прилипшей к экрану: прилипшую прокручивала
   не она сама, а страница под ней — палец листал, полоса справа ехала, а
   объявление стояло на месте (замечание владельца 19.08.2026).

   Пока она открыта, разделы под ней спрятаны — этим она и «поверх», без
   всякого фокуса с положением. */
.part-page {
  padding-bottom: calc(env(safe-area-inset-bottom) + 96px);
}

body.part-open .tab-screen {
  display: none;
}

/* Название стоит под ценой, и главное число на экране — цена. Поэтому 20, а
   не 24: 24 — размер заголовка экрана (docs/POCHERK.md). */
.part-name {
  margin: 14px 0 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.2px;
}

/* Снимок во всю ширину экрана: колодец оболочки ему не нужен. */
/* Лента снимков. Листается пальцем, каждый кадр прилипает к краю: браузер
   останавливает пролистывание ровно на снимке, своего кода для этого не надо.
   Полоса прокрутки спрятана — на телефоне она только мешает. */
.part-shots {
  display: flex;
  margin: 12px -18px 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.part-shots::-webkit-scrollbar {
  display: none;
}

.part-shot {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 4 / 3;
  /* Целиком, а не обрезая: у запчасти важна форма, и обрезанное по краям крыло
     от обрезанной двери не отличить. */
  background: var(--photo) center / contain no-repeat;
}

.part-shots__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.part-shots__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--ink), 0.18);
}

.part-shots__dots i.is-on {
  background: var(--tochka);
}

.part-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px -18px 0;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  background-color: var(--photo);
}

.part-body {
  padding-top: 16px;
}

/* Цена: число крупно, оговорка про доставку — у ПРАВОГО края той же строки.
   Раньше она стояла сразу за числом и читалась его продолжением (макет 16a). */
.part-price {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.part-price b {
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
}

/* Оговорка про доставку — в той же строке, что и цена, у правого края. */
.part-nodelivery {
  color: rgba(var(--ink), 0.42);
  font-size: 13px;
}

/* Кнопки: два действия в ряд, обе ростом и углом со строкой поиска (решение
   владельца 17.08.2026). Заказ главный и синий, вопрос второстепенный и с
   контуром: три равные кнопки не показывают, чего от человека ждут. */
.part-acts {
  display: flex;
  gap: 8px;
  margin-top: 26px;
}

.part-act,
.part-ask {
  flex: 1;
  /* Кнопка выше поля на четыре точки: поле нажимают пальцем один раз, кнопку —
     всерьёз, и рост 44 у площадок именно за этим. */
  height: 44px;
  border: 0;
  border-radius: var(--radius);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.part-act {
  background: var(--accent);
  color: var(--on-accent);
}

.part-ask {
  border: 1px solid var(--edge);
  background: #ffffff;
  color: var(--text);
}

/* Проценка — не действие, а переход: она уводит на свой экран, где лежат сами
   объявления. Поэтому строкой со стрелкой, а не третьей кнопкой (решение
   владельца 17.08.2026). Строка идёт до краёв экрана. */
/* Плашка перехода в проценку. Форму она берёт у `.plashka` целиком — здесь
   только место на странице и точка между словом и надписью. */
/* Переход в проценку: тёмная полоса во всю ширину. Слева лимонная метка
   раздела, рядом сам вопрос, справа шеврон (макет 16a, решение владельца
   24.08.2026). Лимон остался знаком проценки, но теперь он метка на тёмном, а
   не заливка всей плашки: рядом с синей кнопкой лимонная полоса спорила с ней
   за внимание. */
.part-go {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 48px;
  margin-top: 10px;
  padding: 0 14px;
  border-radius: 0;
  /* Тот же серый, что у плашки в проценке: знак один, и в списке, и здесь
     (решение владельца 24.08.2026). Тёмно-синим она была один день — рядом с
     синей кнопкой «Заказать» два тёмных пятна спорили за внимание. */
  background: #626e7b;
}

.part-go .plashka__label {
  color: #dff23f;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 1;
}

.part-go__text {
  flex: 1;
  min-width: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
}

.part-go .plashka__go {
  stroke: #dff23f;
  opacity: 1;
}

/* Заголовок списка характеристик — обычный заголовок раздела, 16, как везде.
   В макете 16a он был мелкой прописной вразрядку; такие подписи остались в
   приложении в одном месте — на метке «Проценка» (решение владельца
   24.08.2026). */
.part-rows__title {
  margin-bottom: 14px;
  font-size: 16px;
}

/* Номера, кузова и коды двигателей — теми же цифрами в одну ширину, что и
   цены. Моноширинный шрифт стоял здесь один день: второй гарнитуры в
   приложении быть не должно (решение владельца 24.08.2026). */
.part-row__code {
  font-variant-numeric: tabular-nums;
}

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

   До 18.08.2026 значение стояло сразу за подписью, в 42% ширины: тогда строк
   было мало и они шли сплошняком. С линиями пара «подпись — значение» держится
   краями строки и не разваливается (образец владельца 17.08.2026). */
.part-rows {
  margin-top: 26px;
}

/* Подпись слева серым, значение сразу за ней своей колонкой — как на карточке
   детали у Дрома (образец владельца, повторно 19.08.2026). Прижатое к правому
   краю значение отрывалось от подписи, и строка читалась двумя кусками: я
   сделал так 18.08 и был неправ. */
.part-row {
  display: grid;
  grid-template-columns: 42% 1fr;
  align-items: baseline;
  gap: 16px;
}

/* Линий между строками нет: их разделяет воздух. Линия делит перечень на
   куски, а это один список про одну деталь (решение владельца 19.08.2026).
   Линия осталась только у строки проценки — там она отделяет переход от
   сведений, и это разные вещи. */
.part-row + .part-row {
  margin-top: 16px;
}

.part-row span {
  color: rgba(var(--ink), 0.62);
  font-size: 16px;
  line-height: 1.3;
}

.part-row em {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* Оговорка про цену и наличие. Даты замера здесь нет намеренно: она пугает
   больше, чем объясняет. */
.part-fine {
  margin-top: 22px;
  color: rgba(var(--ink), 0.42);
  font-size: 13px;
  line-height: 1.4;
}

/* Избранное и «Поделиться» — двумя кнопками в ряд: два равных действия над
   той же деталью. Строками одна под другой они читались обрубками у левого
   края (макет 16a, решение владельца 24.08.2026).

   Ссылка «Поделиться» открывает у другого человека ту же самую позицию, а не
   приложение вообще, — ради этого её и видно (23.08.2026). */
.part-more {
  display: flex;
  gap: 8px;
  margin-top: 26px;
}

.part-fav,
.part-share {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(29, 31, 32, 0.2);
  border-radius: 0;
  background: #ffffff;
  /* Из палитры. Стоял #1a5cae — ещё один забытый синий, который при
     смене цвета остался бы прежним (замечание владельца 26.08.2026). */
  color: var(--accent);
  font: inherit;
  font-size: 16px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.part-share__icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================================
   ОТВЕТ ПОИСКА
   ============================================================================
   Строка ищет по прайсу поставщика. Нашли — открывается страница детали, и
   этот блок не нужен. Не нашли — здесь встаёт карточка с запросом, и витрина
   под ней никуда не девается (решение владельца 16.08.2026). */

.search-answer {
  margin-top: 0;
}

/* НАШЕ СООБЩЕНИЕ. Одно на все случаи, где говорит само приложение: «в каталоге
   такой детали нет», «отправлено», «связь пропала», «добавьте на экран
   „Домой“». Имя общее — `notice`, а не «карточка поиска»: приём один, и
   заводить второй такой же под другим именем нельзя.

   Пузырём, а не полосой во всю ширину: это наш голос, и выглядеть он должен
   так же, как наши слова в переписке (решение владельца 26.08.2026). Полоса от
   края до края читалась как чужая вставка в экран.

   Стоит внутри прилипшей полосы со строкой и потому не уезжает вверх: пока
   человек не решил, искать или свернуть, сообщение должно быть на глазах.
   История номеров, наоборот, вынесена в поток — это удобство, а не разговор.

   Заголовка и «Закрыть» здесь нет. Было и то и другое плюс кнопка во всю
   ширину — владелец назвал это бульоном (26.08.2026). */
.notice {
  margin: 8px 0 0;
  padding: 12px 14px 14px;
  border: 0;
  /* Углы как у кнопки внутри, а не мягкие: круглые смотрелись неправильно
     (замечание владельца 26.08.2026). */
  border-radius: var(--radius);
  background: var(--notice);
}

.notice h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
}

.notice p {
  margin: 6px 0 0;
  color: rgba(var(--ink), 0.5);
  font-size: 13px;
  line-height: 1.35;
}

.notice__acts {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

/* Кнопка по размеру слова, а не во всю ширину: во всю ширину она весила
   больше самого сообщения. */
.notice__act {
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

/* «Свернуть» — тихой кнопкой, без заливки: два синих пятна рядом спорили бы за
   нажатие. Тот же приём, что «Очистить» в строке. */
.notice__quiet {
  height: 36px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 16px;
  font-weight: 300;
  -webkit-tap-highlight-color: transparent;
}


/* ============================================================================
   ВИТРИНА — НАЛИЧИЕ
   ============================================================================
   Весь прайс строками, одна под другой. Сеткой в две колонки он был до
   18.08.2026: в двух колонках цена мельчает, а идти глазом по ценам удобнее в
   столбик (выбор владельца из трёх устройств строки).

   Порядок в строке: цена, название, номер. Первой именно цена — названия у нас
   машинные и кривые, вести по ним глаз нельзя. */

/* Строки идут до краёв экрана: линия-разделитель должна доходить до бортов,
   иначе список читается обрезанным. */
.shop-list {
  margin: 0 -18px;
}

.shop-row {
  display: flex;
  gap: 13px;
  width: 100%;
  padding: 14px 12px;
  border: 0;
  border-bottom: 1px solid var(--hair);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

/* Место под снимок. Снимков у прайса нет, но место оставлено: когда они
   появятся, ставить их будет некуда, а строка без него теряет левый край. */
.shop-row__photo {
  flex: 0 0 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 128px;
  border-radius: var(--radius);
  /* Снимок вписывается целиком, а не обрезается: у запчасти важна форма, и
     обрезанное по краям крыло от обрезанной двери не отличить. Пустой фон
     остаётся виден по бокам — это правильнее, чем врать пропорцией. */
  background: var(--photo) center / contain no-repeat;
}

.shop-row__blank {
  color: rgba(var(--ink), 0.35);
  font-size: 13px;
}

.shop-row__body {
  min-width: 0;
  flex: 1;
}

/* Отметка «в избранное» стоит внутри объявления, а не в списке: в списке она
   шумела и загоралась с задержкой — отметки приезжают с сервера позже самих
   строк (решение владельца 19.08.2026). Вид у неё общий с «Поделиться», выше. */
.part-fav.is-on {
  color: #b57611;
}

/* «Пусто» в избранном: не слово «пусто», а объяснение, откуда там берутся
   позиции. */
/* Пояснение на пустом экране — четырнадцать, как все пояснения в таблице
   почерка. Шестнадцать здесь было соседней ступенью не по делу (замечание
   владельца 26.08.2026). */
.fav-blank {
  padding: 40px 12px;
  color: rgba(var(--ink), 0.45);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.shop-row__price {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}

/* Название синим: так видно, что по нему открывается позиция (решение
   владельца 17.08.2026). Две строки, дальше обрезаем. */
.shop-row__name {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 3px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--accent);
  font-size: 16px;
  line-height: 1.3;
}

.shop-row__number {
  margin-top: 4px;
  color: rgba(var(--ink), 0.4);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Метка конца списка: наблюдатель смотрит на неё и подгружает следующую
   порцию. Своей высоты почти нет — она не должна ничего сдвигать. */
.shop-edge {
  height: 1px;
}

.part-photo__blank {
  color: rgba(var(--ink), 0.35);
  font-size: 13px;
}


/* «Цена по запросу» — там, где цены в прайсе нет вовсе. Тише настоящей цены:
   это не число, а обещание ответить. */
.shop-row__ask {
  color: rgba(var(--ink), 0.55);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
}

/* Подпись под названием: перевод машинный, и человек должен это знать. Тише
   всего на странице — это оговорка, а не сообщение. */
.part-auto {
  margin-top: 3px;
  color: rgba(var(--ink), 0.4);
  font-size: 13px;
}



/* Список моделей и кузовов бывает длинным — до сорока значений. Он переносится
   в своей колонке и делает строку выше; обрезать его нельзя (решение владельца
   21.08.2026). Разрыв по любому месту нужен для кодов без пробелов. */
.part-row em {
  overflow-wrap: anywhere;
}


/* Плашка выгоды в строке витрины. Отступ задаёт строка: сама плашка живёт и в
   проценке, где расстояния свои. */
.shop-row .plashka {
  margin-top: 8px;
}

/* Плашка «В РОССИИ» — та же форма, что у плашки проценки: серая полоса по
   содержимому, метка лимонная, число белое (решение владельца 27.08.2026).

   По содержимому, а не во всю ширину: во всю ширину строка выглядела полосой
   на полкарточки, а в проценке такая же плашка обжимает своё содержимое.

   Выравнивание по базовой линии, а не по центру: кегли разные — 11 у метки и
   16 у числа, — и центровка роняет крупное ниже мелкого. */
.shop-row__rus {
  display: inline-flex;
  align-items: baseline;
  height: 34px;
  padding: 0 12px;
  gap: 9px;
  border-radius: 0;
  background: #626e7b;
}

.shop-row__rus .plashka__label {
  color: #dff23f;
  opacity: 1;
}

.shop-row__rus .plashka__sum {
  color: #ffffff;
}

/* Обе строки в плашке живут в своей строке высотой во всю полосу: так они
   стоят на общей базовой линии и держат полосу ровно 34. */
.shop-row__rus .plashka__label,
.shop-row__rus .plashka__sum {
  line-height: 34px;
}

/* На переходе в проценку плашка — единственное, что есть в строке, и отступ ей
   не нужен: его держит сама строка. */
/* ЗВЕЗДА В СТРОКЕ СПИСКА

   Это отметка, а не кнопка: ставят и снимают её на странице позиции, где рядом
   написано, что она значит. Здесь она только сообщает.

   В избранном звезда стоит у каждой строки и тёмная — там все строки отмечены,
   и звезда работает знаком раздела. На витрине она появляется лишь у отмеченных
   и приглушена: там это подсказка «вы это уже отметили», а не украшение
   (решение владельца 22.08.2026). */
.shop-row {
  position: relative;
}

.shop-row__star {
  position: absolute;
  top: 14px;
  right: 18px;
  color: rgba(var(--ink), 0.62);
  font-size: 16px;
  line-height: 1;
}

/* Звезда видна только у отмеченных — везде, где бы строка ни лежала. Правило
   было привязано к витрине, а находка поиска лежит своим местом: там звезда
   стояла у всего подряд, и человек видел тёмную отметку на позиции, которой в
   избранном нет (замечание владельца 23.08.2026).

   В самом избранном отмечено всё по определению, так что там звёзды на месте —
   отдельного правила для него не нужно. */
.shop-row__star:not(.is-on) {
  display: none;
}