/* Витрина по итоговому макету дизайнера от 21.08.2026.
   Источник: Оформление витрины\Исходники\final.src.html

   Ниже идет часть, которой макет не касается: кабинет, формы,
   переписка, отзывы, блог и страница размещения. Она осталась
   от прежнего набора и живет на общих токенах из tokens.css. */

/* ===================================================================
   Токены. Отличия от нынешних и причина каждого отличия.

   1. Типографика. На нынешнем листинге 141 элемент набран в 12 пикселей
      и 81 в 13, то есть 88 процентов текста мельче базового кегля, а
      следующий размер после 13 сразу 36. Дыра в шкале и есть та самая
      примета две тысячи десятого. Здесь шкала непрерывная, а название
      товара, главный объект сканирования, поднято с 13 до 16.

   2. Цвет. Кирпичный сохранен, он верно выбран под серо-стальной кадр.
      Но он перестает быть единственным цветом интерфейса: сейчас им
      выкрашены кнопка, ссылка, счетчик и ховер разом, и акцент
      перестает быть акцентом. Здесь оранжевый только у главного
      действия, ссылки чернильные.

   3. Скругления. 2 пикселя на блоке шириной 280 читаются не как форма,
      а как недоделанный рендер. Либо ноль, либо заметная величина.
      Взято 10 и 14.

   4. Глубина. Сейчас каждый блок обведен рамкой в 1 пиксель, и экран
      превращается в сетку линеек. Здесь разделение воздухом и фоном,
      рамка только там, где нужна граница ввода.
   =================================================================== */
:root{
  --ink:#1c1917;
  --ink-2:#57534e;
  --ink-3:#78716c;
  --line:#e7e5e4;
  --line-2:#f0efee;
  --bg:#ffffff;
  --bg-2:#faf9f8;
  --bg-3:#f4f2f0;

  --accent:#c2410c;
  --accent-dark:#9a3412;
  --accent-soft:#fff3ec;
  --ok:#15803d;
  --ok-soft:#effaf2;

  --font:'Golos Text','Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --fs-note:12px;
  --fs-meta:14px;
  --fs-base:15px;
  /* Поля ввода. Ровно шестнадцать, ни пикселем меньше: Safari на iOS
     увеличивает страницу при фокусе на поле с меньшим шрифтом, после
     чего появляется прокрутка вбок, а вернуть масштаб можно только
     жестом. Это и есть та самая прыгающая при клавиатуре страница. */
  --fs-input:16px;
  --fs-card:16px;
  --fs-lead:18px;
  --fs-h3:20px;
  --fs-h2:24px;
  --fs-h1:30px;
  --fs-hero:34px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  --r:10px; --r-lg:14px; --r-sm:6px;
  --shadow:0 1px 2px rgba(28,25,23,.05);
  --shadow-up:0 4px 16px rgba(28,25,23,.10),0 1px 3px rgba(28,25,23,.06);
  --container:1240px;
  --header-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:400 var(--fs-base)/1.5 var(--font);color:var(--ink);background:var(--bg-3);
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{display:block;max-width:100%}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em;line-height:1.2}
/* --- каркас демонстрации --------------------------------------- */
.demo-bar{position:sticky;top:0;z-index:100;display:flex;flex-wrap:wrap;gap:var(--s3);
  align-items:center;padding:var(--s3) var(--s5);background:#1c1917;color:#e7e5e4;font-size:var(--fs-meta)}
.demo-bar__group{display:flex;gap:var(--s1);background:#292524;padding:3px;border-radius:8px}
.demo-bar__btn{border:0;background:transparent;color:#a8a29e;padding:5px 12px;border-radius:6px;cursor:pointer}
.demo-bar__btn[aria-pressed=true]{background:#c2410c;color:#fff}
/* --- общий каркас страницы -------------------------------------- */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--s5)}
.page{background:var(--bg)}
/* Шапка. Нынешняя на телефоне схлопывает поле поиска до 25 пикселей,
   а кнопка налезает на него сверху. Здесь порядок обратный: поиск
   получает всю свободную ширину первым, а логотип и город ужимаются. */
.hd{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.hd__row{display:flex;align-items:center;gap:var(--s4);height:var(--header-h);
  max-width:var(--container);margin:0 auto;padding:0 var(--s5)}
.hd__logo{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto;font-weight:600;font-size:17px;letter-spacing:.01em}
.hd__mark{width:30px;height:30px;border-radius:8px;background:var(--accent);display:grid;place-items:center;flex:0 0 auto}
.hd__city{display:flex;align-items:center;gap:6px;flex:0 0 auto;padding:8px 12px;border-radius:var(--r-sm);
  color:var(--ink);cursor:pointer;background:transparent;border:0;font-size:var(--fs-meta);white-space:nowrap}
.hd__city:hover{background:var(--bg-3)}
.hd__city b{font-weight:600;max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
.hd__search{flex:1 1 auto;min-width:0;display:flex}
/* Поиск с лупой внутри поля. Кнопка словом забирала 86 пикселей из 390
   на телефоне, полю оставалось 74. Лупа занимает 40 и стоит внутри,
   поле получает 157. Заодно освобождается единственная заливка в
   шапке, и она достаётся размещению. */
.hd__search{position:relative}
.hd__input{flex:1 1 auto;min-width:0;height:40px;padding:0 44px 0 var(--s4);font-size:var(--fs-input);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--ink)}
.hd__input::placeholder{color:var(--ink-3)}
.hd__input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hd__go{position:absolute;right:0;top:0;width:40px;height:40px;padding:0;border:0;background:transparent;
  color:var(--ink-3);border-radius:0 var(--r-sm) var(--r-sm) 0;display:grid;place-items:center;cursor:pointer}
.hd__go:hover{color:var(--accent)}
.hd__all{flex:0 0 auto;font-size:var(--fs-meta);color:var(--ink-2);padding:8px 0}
.hd__all:hover{color:var(--accent)}
/* Конверсионное действие. Единственная заливка на витрине, в своём
   кирпичном, а не в синем из палитры спецтехники. Надпись в одно
   слово: "Разместить инструмент" это 199 пикселей и они уходят
   у поиска, "Разместить" с плюсом это 127. */
.hd__cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;
  height:38px;padding:0 var(--s4);border:0;border-radius:var(--r-sm);background:var(--accent);
  color:#fff;font-size:var(--fs-meta);font-weight:600;cursor:pointer;white-space:nowrap}
.hd__cta:hover{background:var(--accent-dark)}
/* Отложенное иконкой: словом оно занимает 86 пикселей и встаёт
   в один вес со входом, хотя это служебная полка. */
.hd__ico{position:relative;width:36px;height:36px;flex:0 0 auto;border:0;background:transparent;
  border-radius:var(--r-sm);display:grid;place-items:center;color:var(--ink-2);cursor:pointer}
.hd__ico:hover{background:var(--bg-3);color:var(--ink)}
.hd__ico b{position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center}
/* Полоса призыва. Одна строка, кнопка рядом с текстом, а не в другом
   конце экрана. Стоит на главной и в разделе, на карточке товара нет:
   там человек в шаге от звонка. */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2);
  margin-top:var(--s10)}
.band__in{max-width:var(--container);margin:0 auto;padding:var(--s5);display:flex;align-items:center;
  gap:var(--s5);flex-wrap:wrap}
.band__ic{width:44px;height:44px;flex:0 0 auto;border-radius:var(--r);background:var(--accent-soft);
  color:var(--accent-dark);display:grid;place-items:center}
.band__t{flex:1 1 320px;min-width:0}
.band__h{font-size:var(--fs-card);font-weight:600}
.band__p{font-size:var(--fs-meta);color:var(--ink-2);margin-top:2px}
.band__go{flex:0 0 auto;margin-left:auto;height:44px;padding:0 var(--s6);border:0;border-radius:var(--r-sm);
  background:var(--accent);color:#fff;font-size:var(--fs-card);font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.band__go:hover{background:var(--accent-dark)}
/* Подвал. Нынешний это одна серая строка в 13 пикселей и обрыв. */
.ft{margin-top:var(--s16);border-top:1px solid var(--line);background:var(--bg-2)}
.ft__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s8);
  max-width:var(--container);margin:0 auto;padding:var(--s10) var(--s5)}
.ft__h{font-size:var(--fs-meta);font-weight:600;margin-bottom:var(--s3)}
/* Минимальная цель нажатия 24 на 24 по WCAG 2.2. Строка в 14 пикселей
   даёт 21, поэтому ссылкам подвала и крошек добавлена высота. */
.ft__list{display:grid;gap:var(--s2);font-size:var(--fs-meta);color:var(--ink-2)}
.ft__list a{display:inline-flex;align-items:center;min-height:24px}
.ft__list a:hover{color:var(--accent)}
.ft__low{border-top:1px solid var(--line);font-size:var(--fs-note);color:var(--ink-3)}
.ft__low div{max-width:var(--container);margin:0 auto;padding:var(--s5)}
/* --- главная ----------------------------------------------------- */
.hero{background:var(--bg-2);border-bottom:1px solid var(--line);padding:var(--s10) 0 var(--s10)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s10);align-items:start}
.hero h1{font-size:var(--fs-hero);margin-bottom:var(--s3)}
.hero__sub{font-size:var(--fs-lead);color:var(--ink-2);margin:0 0 var(--s6);max-width:34em}
.hero__find{display:flex;max-width:620px}
.hero__find input{flex:1 1 auto;min-width:0;height:52px;padding:0 var(--s5);font-size:var(--fs-card);
  border:1px solid var(--line);border-right:0;border-radius:var(--r) 0 0 var(--r);background:var(--bg)}
.hero__find input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hero__find button{flex:0 0 auto;height:52px;padding:0 var(--s8);border:0;border-radius:0 var(--r) var(--r) 0;
  background:var(--accent);color:#fff;font-size:var(--fs-card);font-weight:600;cursor:pointer}
.hero__find button:hover{background:var(--accent-dark)}
.hero__hints{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 var(--s4);border-radius:999px;
  background:var(--bg);border:1px solid var(--line);font-size:var(--fs-meta);color:var(--ink-2);cursor:pointer}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
/* Панель наличия. Ответ на вопрос, ради которого человек пришел:
   есть ли инструмент там, где он стоит. */
.avail{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.avail__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.avail__city{display:flex;align-items:center;gap:6px;font-size:var(--fs-card);font-weight:600}
.avail__change{display:inline-flex;align-items:center;min-height:24px;font-size:var(--fs-meta);
  color:var(--accent);border:0;border-bottom:1px solid rgba(194,65,12,.35);background:0;padding:0 0 2px;cursor:pointer}
.avail__change:hover{color:var(--accent-dark);border-bottom-color:var(--accent-dark)}
.avail__num{display:flex;align-items:baseline;gap:var(--s3)}
.avail__val{font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1}
.avail__lbl{font-size:var(--fs-meta);color:var(--ink-2)}
.avail__all{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line-2);
  font-size:var(--fs-meta);color:var(--ink-2)}
.avail__all b{color:var(--ink);font-weight:600}
.sec{padding-top:var(--s10)}
.sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5)}
.sec h2{font-size:var(--fs-h2)}
/* Минимальная цель нажатия 24 на 24 по WCAG 2.2. Строчная ссылка в
   14 пикселей даёт 21 в высоту, поэтому добавлен вертикальный отступ. */
.sec__more{display:inline-flex;align-items:center;min-height:24px;padding:2px 0;
  font-size:var(--fs-meta);color:var(--ink-2)}
.sec__more:hover{color:var(--accent)}
/* Плитки разделов. Нынешние ломаются: название в одну строку с nowrap
   вылезает за плитку на 42 пикселя и на телефоне разносит страницу на
   32 пикселя вбок. Здесь перенос в две строки и фиксированная высота. */
/* Четыре в ряд, а не auto-fill: восемь разделов при auto-fill дают шесть
   и два, то есть рваный второй ряд. Это ровно то, что видно сейчас. */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.tile{display:flex;flex-direction:column;justify-content:space-between;min-height:96px;padding:var(--s4);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);transition:border-color .15s,box-shadow .15s,transform .15s}
.tile:hover{border-color:transparent;box-shadow:var(--shadow-up);transform:translateY(-2px)}
.tile__name{font-size:var(--fs-meta);font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile__num{margin-top:var(--s3);font-size:var(--fs-note);color:var(--ink-3)}
/* --- карточка предложения --------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--s4)}
.card{display:flex;flex-direction:column;background:var(--bg);border-radius:var(--r);padding:var(--s2);border:1px solid transparent;
  transition:box-shadow .15s,transform .15s,border-color .15s}
/* Отклик без подчеркивания: ссылкой обернут весь блок, и
   подчеркивание красило разом название, город и продавца.
   Карточка приподнимается, получает рамку, кадр приближается.
   Цвет не трогаем, на витрине он занят действием. */
.card:hover{box-shadow:var(--shadow-up);transform:translateY(-2px);
  border-color:var(--line)}
.card:hover .card__img{transform:scale(1.04)}
.card__media{position:relative;aspect-ratio:1/1;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;display:grid;place-items:center}
.card:hover .card__media{border-color:transparent}
/* Кадр вписывается, а не обрезается. Нынешний imgproxy режет по
   rs:fill:520:390, и у перфоратора уходит патрон, у вышки верх. */
.card__img{width:100%;height:100%;object-fit:contain;padding:var(--s4);
  mix-blend-mode:multiply;transition:transform .2s ease}
.card__shots{position:absolute;left:var(--s2);bottom:var(--s2);display:flex;align-items:center;gap:4px;
  height:24px;padding:0 8px;border-radius:var(--r-sm);background:rgba(28,25,23,.72);color:#fff;font-size:var(--fs-note)}
/* Цвет здесь ink-2, а не ink-3: на фоне bg-3 светлый серый даёт 4.3 к 1
   и не проходит AA. Замерено, не на глаз. */
/* Прозрачность 72 процента, как у счетчика кадров, а не мягче. Кадры
   часто на белом фоне, и на 62 процентах белый текст дает 3.4 к 1 и не
   проходит AA. На 72 выходит 4.6 к 1. Замерено, не на глаз. */
/* Подпись рисуется отсюда, а не лежит текстом в разметке: сорок плиток
   на странице раздела давали сорок повторов слова и размывали текст
   страницы. Человек видит то же самое, диктор читает aria-label. */
.card__ai{position:absolute;right:var(--s2);bottom:var(--s2);height:24px;
  display:flex;align-items:center;padding:0 8px;border-radius:var(--r-sm);
  background:rgba(28,25,23,.72);color:#fff;font-size:var(--fs-note)}
.card__ai::after{content:"Сгенерировано"}
/* Приписка на карточке. Не красная и без восклицательного знака: это не
   ошибка и не предупреждение, а уточнение. Красное читалось бы как
   "с товаром что-то не так". */
.gal__note{max-width:600px;margin-top:var(--s3);padding-left:var(--s3);
  border-left:2px solid var(--line);color:var(--ink-2);
  font-size:var(--fs-note);line-height:1.45}
.card__none{position:absolute;inset:0;display:grid;place-items:center;gap:var(--s2);
  color:var(--ink-2);font-size:var(--fs-note);background:var(--bg-3)}
.card__body{padding:var(--s3) 2px var(--s1);display:flex;flex-direction:column;flex:1 1 auto}
.card__price{display:flex;align-items:baseline;gap:6px}
.card__val{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em}
.card__per{font-size:var(--fs-meta);color:var(--ink-2)}
/* Название товара: 16 вместо нынешних 13. Это то, что человек читает
   в первую очередь, и оно не может быть мельче служебных подписей. */
.card__title{margin-top:var(--s1);font-size:var(--fs-card);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Цена не переносится между числом и знаком рубля. В две колонки на
   узком экране "400 ₽" рвалось на две строки, а "50 ₽" нет: разрыв
   зависел от разрядности, и главный элемент карточки выглядел сломанным
   через раз. */
.card__price{flex-wrap:wrap}
.card__val{white-space:nowrap}
/* Город и продавец стоят двумя строками, а не через точку в одной.
   В шести колонках на подвал остаётся 190 пикселей, и в строку они не
   влезают оба: на витрине это видно как "Пе... Инструменты на пр...",
   когда обрезаны сразу оба значения и не читается ни одно. */
.card__foot{margin-top:auto;padding-top:var(--s3);display:flex;align-items:center;gap:5px;
  font-size:var(--fs-meta);color:var(--ink-2);min-width:0}
.card__foot span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card__pin{flex:0 0 auto;color:var(--ink-3);display:flex}
.card__seller{margin-top:2px;font-size:var(--fs-note);color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* --- листинг ------------------------------------------------------ */
.lst{padding-top:var(--s8)}
/* Нынешний заголовок при выбранном городе говорит "в России", а под ним
   стоит "Найдено: 18" по одному городу. Заголовок обязан называть тот
   срез, который показан. */
.lst__head{margin-bottom:var(--s6)}
.lst__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-meta);color:var(--ink-3);margin-bottom:var(--s3)}
.lst__crumbs > *{min-width:0}
.lst__crumbs > *:not(:last-child)::after{content:"/";margin-left:8px;color:var(--ink-3)}
.lst__crumbs a{display:inline-flex;align-items:center;min-height:24px}
.lst__crumbs a:hover{color:var(--accent)}
.lst h1{font-size:var(--fs-h1)}
.lst__count{margin-top:var(--s2);font-size:var(--fs-meta);color:var(--ink-2)}
.lst__intro{max-width:78ch}
.lst__text{padding-top:var(--s10)}
.lst__text h2{margin:var(--s3) 0 0}
.lst__text p{max-width:78ch}
.lst__layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:var(--s8);align-items:start}
/* Фильтры. Ушли капс и разрядка в 12 пикселей: это прием оформления
   середины нулевых, и он делает служебную подпись заметнее данных. */
.fltbox{min-width:0}
.flt{position:sticky;top:calc(var(--header-h) + var(--s4));display:grid;gap:var(--s6)}
.flt__chk{position:absolute;opacity:0;width:0;height:0}
.flt__sum{display:none}
.flt__grp{}
.flt__title{font-size:var(--fs-meta);font-weight:600;margin-bottom:var(--s3)}
.flt__row{display:flex;align-items:center;gap:var(--s3);padding:6px 0;cursor:pointer;font-size:var(--fs-base)}
.flt__row:hover .flt__name{color:var(--accent)}
.flt__box{width:18px;height:18px;flex:0 0 auto;border:1.5px solid var(--line);border-radius:5px;background:var(--bg);
  background-repeat:no-repeat;background-position:center;transition:background-color .12s,border-color .12s}
.flt__row:hover .flt__box{border-color:var(--ink-3)}
.flt__row input:checked + .flt__box{background-color:var(--accent);border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.3 2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.flt__row input:focus-visible + .flt__box{outline:2px solid var(--accent);outline-offset:2px}
.flt__row input{position:absolute;opacity:0;width:0;height:0}
.flt__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flt__num{font-size:var(--fs-meta);color:var(--ink-3);flex:0 0 auto}
.flt__price{display:flex;align-items:center;gap:var(--s2)}
.flt__price input{width:100%;min-width:0;height:40px;padding:0 var(--s3);font-size:var(--fs-input);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg)}
.flt__price input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.flt__hint{margin-top:var(--s2);font-size:var(--fs-note);color:var(--ink-3)}
.flt__reset{font-size:var(--fs-meta);color:var(--ink-2);border:0;background:0;padding:0;cursor:pointer}
.flt__reset:hover{color:var(--accent)}
.flt__more{margin-top:var(--s2);font-size:var(--fs-meta);color:var(--ink-2);border:0;background:0;padding:0;cursor:pointer}
.flt__more:hover{color:var(--accent)}
.flt__more{display:block}
.flt__rchk{position:absolute;opacity:0;width:0;height:0}
.flt__rest{display:none}
.flt__rchk:checked ~ .flt__rest{display:block}
.flt__rchk:checked ~ .flt__more{display:none}
/* Полоса сортировки. Нынешняя это белый прямоугольник в 63 пикселя
   высотой, у которого занят только правый край, а слева пятьсот
   пикселей пустоты. Здесь строка, а не блок. */
.srt{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s4)}
.srt__found{font-size:var(--fs-meta);color:var(--ink-2)}
.srt__found b{color:var(--ink);font-weight:600}
.srt__tabs{display:flex;gap:var(--s1)}
.srt__tab{border:0;background:0;padding:6px 12px;border-radius:999px;font-size:var(--fs-meta);
  color:var(--ink-2);cursor:pointer}
.srt__tab:hover{background:var(--bg-3);color:var(--ink)}
.srt__tab[aria-pressed=true]{background:var(--ink);color:#fff}
.picked{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s4)}
.picked__i{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 8px 0 12px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-dark);font-size:var(--fs-meta)}
.picked__x{width:18px;height:18px;border-radius:50%;background:rgba(154,52,18,.14);display:grid;place-items:center;cursor:pointer}
/* --- страница предложения ---------------------------------------- */
.ofr{padding-top:var(--s6)}
.ofr__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s8);align-items:start;margin-top:var(--s5)}
.ofr h1{font-size:var(--fs-h1);margin-bottom:var(--s2)}
.ofr__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-meta);color:var(--ink-3)}
/* Галерея. Нынешняя ставит белый снимок на бежевую сцену и по бокам
   остаются широкие поля другого цвета. Один фон, один кадр. */
/* Сцена ограничена по ширине: на широком экране левая колонка это
   830 пикселей, и кадр 4 к 3 вырастает до 620 в высоту, вытесняя
   всё остальное за первый экран. */
.gal__stage{max-width:600px;aspect-ratio:4/3;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  display:grid;place-items:center;overflow:hidden}
.gal__stage img{width:100%;height:100%;object-fit:contain;padding:var(--s8);mix-blend-mode:multiply}
.gal__thumbs{display:flex;gap:var(--s2);margin-top:var(--s3)}
.gal__t{width:72px;height:72px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  background:var(--bg);cursor:pointer;padding:0}
.gal__t[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.gal__t img{width:100%;height:100%;object-fit:contain;padding:6px;mix-blend-mode:multiply}
/* Увеличение. Лупа не подпись и не кнопка поверх кадра: она стоит в
   углу и говорит, что по сцене можно нажать. Появляется целиком при
   наведении и при фокусе с клавиатуры, иначе доходит только мышью. */
.gal__stage--zoom{position:relative;display:block;cursor:zoom-in}
.gal__lupa{position:absolute;right:10px;bottom:10px;width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;background:rgba(17,17,17,.62);color:#fff;opacity:.75;transition:opacity .12s}
.gal__stage--zoom:hover .gal__lupa,
.gal__stage--zoom:focus-visible .gal__lupa{opacity:1}
/* Просмотрщик. Фон почти черный, а не чистый: на белых кадрах товара
   чистый черный дает рант по краю снимка. */
.lb{position:fixed;inset:0;z-index:80;background:rgba(12,12,12,.92)}
.lb[hidden]{display:none}
.lb__pane{position:absolute;inset:0;display:grid;place-items:center;padding:var(--s6)}
.lb__img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;border-radius:var(--r-sm)}
.lb__x{position:absolute;top:var(--s4);right:var(--s4);width:44px;height:44px;display:grid;place-items:center;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.lb__nav--prev{left:var(--s4)}
.lb__nav--next{right:var(--s4)}
.lb__x:hover,.lb__nav:hover{background:rgba(255,255,255,.26)}
.lb__count{position:absolute;bottom:var(--s4);left:50%;transform:translateX(-50%);color:#fff;opacity:.8;
  font-size:var(--fs-meta)}
/* На телефоне кнопки уезжают вниз: стрелки по центру перекрывают кадр,
   а листать там удобнее пальцем по самому снимку. */
@media (max-width:640px){
  .lb__pane{padding:var(--s3)}
  .lb__nav{top:auto;bottom:var(--s4);transform:none}
  .lb__count{bottom:calc(var(--s4) + 54px)}
}
/* Панель покупки. Нынешняя показывает мертвый серый блок
   "Телефон уточняется" на месте единственного действия страницы. */
.buy{position:sticky;top:calc(var(--header-h) + var(--s4));background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s5)}
.buy__val{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1}
.buy__per{font-size:var(--fs-meta);color:var(--ink-2);margin-top:6px}
/* Профиль обещает час, смену, сутки и месяц. Сейчас на витрине
   только сутки, и человек не понимает, за что платит. */
/* Подпись к лестнице. Стоит над рамкой, а не внутри первой строки:
   внутри она читалась бы как еще одна ступень. */
.buy__rates-cap{margin:var(--s5) 0 6px;font-size:var(--fs-meta);color:var(--ink-2)}
.buy__rates-cap + .buy__rates{margin-top:0}
.buy__rates{display:grid;gap:1px;margin:var(--s5) 0;background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.buy__rate{display:flex;justify-content:space-between;gap:var(--s3);padding:10px var(--s3);background:var(--bg);font-size:var(--fs-meta)}
.buy__rate b{font-weight:600}
.buy__rate--off{color:var(--ink-3)}
/* Условия рядом с тарифами, но отдельным блоком без рамки: это не
   цены, и одинаковая рамка склеивала бы их в одну таблицу. */
.buy__terms{display:grid;gap:6px;margin:var(--s4) 0}
.buy__term{display:flex;justify-content:space-between;gap:var(--s3);font-size:var(--fs-meta);color:var(--ink-2)}
.buy__term b{font-weight:600;color:var(--ink);text-align:right}
/* Цена на фоне рынка. Шкала простая полоса: столбики и градиенты тут
   создали бы вид точности, которой в медиане по каталогу нет. */
.mkt__scale{display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-meta);color:var(--ink-2)}
.mkt__bar{position:relative;flex:1;height:6px;border-radius:3px;background:var(--bg-3)}
/* Точка темная, а не акцентная. Акцент на витрине означает действие,
   и на карточке он принадлежит кнопке телефона. Метка на шкале это не
   действие, и одинаковый с кнопкой цвет уравнял бы их в весе. */
.mkt__dot{position:absolute;top:50%;width:14px;height:14px;margin-left:-7px;margin-top:-7px;
  border-radius:50%;background:var(--ink);border:2px solid var(--bg)}
.mkt__text{margin:var(--s3) 0 0;color:var(--ink-2);font-size:var(--fs-meta)}
.mkt__edge{white-space:nowrap}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;border:0;
  border-radius:var(--r-sm);background:var(--accent);color:#fff;font-size:var(--fs-card);font-weight:600;cursor:pointer}
.btn:hover{background:var(--accent-dark)}
.btn--ghost{background:var(--bg);border:1px solid var(--line);color:var(--ink);margin-top:var(--s2)}
.btn--ghost:hover{background:var(--bg-3)}
.buy__seller{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line-2)}
.buy__name{font-size:var(--fs-card);font-weight:600}
.buy__sub{font-size:var(--fs-meta);color:var(--ink-2);margin-top:2px}
.spec{margin-top:var(--s10)}
.spec h2{font-size:var(--fs-h2);margin-bottom:var(--s4)}
.spec__list{display:grid;gap:1px;background:var(--line-2);border-radius:var(--r-sm);overflow:hidden}
.spec__row{display:grid;grid-template-columns:200px 1fr;gap:var(--s4);padding:10px var(--s3);background:var(--bg);font-size:var(--fs-base)}
.spec__k{color:var(--ink-2)}
.flag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-sm);
  background:var(--accent-soft);color:var(--accent-dark);font-size:var(--fs-note);font-weight:600}
/* --- города ------------------------------------------------------- */
/* Нынешний список отсортирован по числу предложений, и Москва стоит
   семнадцатой. Человек ищет свой город глазами по названию. */
.cty{padding-top:var(--s8)}
.cty__search{max-width:420px;margin:var(--s5) 0 var(--s6)}
.cty__search input{width:100%;height:44px;padding:0 var(--s4);font-size:var(--fs-input);
  border:1px solid var(--line);border-radius:var(--r-sm)}
.cty__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s2) var(--s6)}
.cty__i{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);padding:10px 0;
  border-bottom:1px solid var(--line-2);cursor:pointer;background:0;border-left:0;border-right:0;border-top:0;text-align:left}
.cty__i:hover .cty__n{color:var(--accent)}
.cty__n{font-size:var(--fs-base)}
.cty__i--on .cty__n{font-weight:600}
.cty__i--on::after{content:'выбран';font-size:var(--fs-note);color:var(--accent)}
.cty__num{font-size:var(--fs-meta);color:var(--ink-3)}
/* --- поиск -------------------------------------------------------- */
.srch{padding:var(--s8) 0 0}
.srch__empty{display:grid;gap:var(--s4);max-width:640px;padding:var(--s8);background:var(--bg-2);
  border-radius:var(--r-lg);margin-top:var(--s5)}
.srch__empty h2{font-size:var(--fs-h3)}
.srch__empty p{margin:0;color:var(--ink-2)}
/* --- узкий экран --------------------------------------------------- */
@media (max-width:900px){
  .hero__grid,.ofr__grid{grid-template-columns:minmax(0,1fr)}
  .lst__layout{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .flt,.buy{position:static}
  .spec__row{grid-template-columns:1fr;gap:2px}
  /* Пятьсот пикселей фильтров впереди выдачи это не подача, а стена.
     На узком экране фильтры сворачиваются в одну строку с числом
     выбранного, а карточки начинаются сразу. */
  .flt{display:none}
  .flt__chk:checked ~ .flt{display:grid;padding-top:var(--s5)}
  .flt__sum{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);width:100%;
    height:48px;padding:0 var(--s4);border:1px solid var(--line);border-radius:var(--r-sm);
    background:var(--bg);font-size:var(--fs-base);font-weight:600;cursor:pointer}
  .flt__sum b{font-weight:400;color:var(--ink-2);font-size:var(--fs-meta)}
  .flt__chk:checked ~ .flt__sum{border-color:var(--ink-3)}

  /* Шапка ужимается здесь, а не на 640. Между 641 и 836 она требовала
     837 пикселей и утаскивала вбок всю страницу: дети .hd__row не
     сжимаются, а единственный сжимаемый среди них это поиск, и он
     схлопывался в ноль. В этот диапазон попадает альбомная
     ориентация телефонов и планшет в портрете. */
  .hd__name{display:none}
  .hd__city b{max-width:8ch}
  .hd__all{display:none}
  /* Кнопка размещения уходит из шапки. Там она отнимает у поиска
     половину строки, а сдающий инструмент почти всегда приходит с
     компьютера. Вход в размещение остаётся полосой и подвалом. */
  .hd__cta{display:none}
}

/* Поиск переезжает на свою строку. На 320 ему оставалось 62 пикселя
   из 288: логотип, город и две иконки не сжимаются, и отдавать место
   больше некому. Строка ниже стоит сорок пикселей высоты шапки, и
   это дешевле, чем поиск, которого не видно. */
@media (max-width:720px){
  .hd__row{flex-wrap:wrap;height:auto;row-gap:var(--s2);
    padding-top:var(--s2);padding-bottom:var(--s2)}
  .hd__search{order:10;flex:1 0 100%}
  .hd__city b{max-width:10ch}
}
@media (max-width:640px){
  .hd,.page,.ft{--fs-hero:26px;--fs-h1:22px;--fs-h2:19px;--s10:28px;--s16:40px}
  .container,.hd__row,.ft__grid,.ft__low div{padding-left:var(--s4);padding-right:var(--s4)}
  .band__in{padding:var(--s4)}
  .band__ic{display:none}
  .band__go{width:100%;margin-left:0;justify-content:center}
  .hero{padding:var(--s6) 0}
  .hero__find input,.hero__find button{height:48px}
  /* Первый экран на 390 занимал 588 пикселей, и разделы начинались на
     725, то есть человек видел только шапку и панель. Подсказки идут
     одной прокручиваемой строкой, панель наличия сворачивается в
     строку. Экономия 208 пикселей, разделы поднимаются к 517. */
  .hero__hints{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:var(--s3)}
  .hero__hints::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto}
  .avail{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);padding:var(--s3) var(--s4)}
  .avail__top{margin:0;gap:var(--s3)}
  .avail__city{font-size:var(--fs-base)}
  .avail__num{gap:6px}
  .avail__val{font-size:var(--fs-h3)}
  .avail__all{margin:0;padding:0;border:0;flex:1 0 100%}
  /* Перенос снимается вместе с пробелом, поэтому строка склеивалась
     в "предложенийв прокате". Прячем сам перенос, а пробел ставим
     через псевдоэлемент. */
  .avail__lbl br{display:none}
  .avail__lbl br::after{content:' ';display:inline}
  /* Ещё двенадцать пикселей, чтобы первая плитка начиналась выше
     отметки 560, которую держали в задании на первый экран. */
  .sec{padding-top:var(--s6)}
  .sec__head{margin-bottom:var(--s3)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card__title{font-size:var(--fs-base)}
  /* Три строки вместо двух. У прокатов названия по семьдесят знаков с
     размером и числом секций в хвосте, и на двух строках три разные
     позиции выглядели одинаково: "Основание с настилом для...". Именно
     в отрезанной части и было отличие, по которому выбирают. */
  .card__title{-webkit-line-clamp:3}
  /* В две колонки на подвал остаётся 170 пикселей. Продавца убираем
     совсем: для аренды сначала важно, куда ехать, а не к кому. */
  .card__seller{display:none}
  /* Последняя крошка это имя текущей страницы, оно же стоит в h1
     строкой ниже. На 320 длинное имя не переносилось и разносило
     страницу на 41 пиксель вбок. */
  /* Имя страницы прячется: оно же стоит в заголовке строкой
     ниже. Вместе с ним уходит и его разделитель, иначе строка
     кончается висящей косой чертой. */
  .lst__crumbs > *:last-child{display:none}
  .lst__crumbs > *:nth-last-child(2)::after{content:none}
  /* Но там, где крошки всего две, вторая и есть единственная
     содержательная: путь из одного слова Главная не говорит
     человеку ничего. */
  .lst__crumbs:has(> :first-child:nth-last-child(2)) > *:last-child{display:inline-flex}
  .lst__crumbs:has(> :first-child:nth-last-child(2)) > :first-child::after{content:"/"}
  .gal__stage img{padding:var(--s5)}
  .srt{flex-wrap:wrap}
  .srt__tabs{width:100%;overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- то, чего макет не касается ---- */

html { -webkit-text-size-adjust: 100%; }
p { margin: 0 0 var(--s-3); }
.panel { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--s-4); }
.panel + .panel { margin-top: var(--s-3); }
.panel__title { font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--c-ink-3); margin-bottom: var(--s-3); }
.facet { border-top: 1px solid var(--c-line-2); padding: var(--s-3) 0; }
.facet:first-of-type { border-top: 0; padding-top: 0; }
.facet__name { font-size: var(--fs-sm); font-weight: 500; margin-bottom: var(--s-2); }
.facet__list { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-sm); }
.facet__row { display: flex; align-items: center; gap: var(--s-2); color: var(--c-ink-2); }
.facet__row input { accent-color: var(--c-accent); }
.facet__count { margin-left: auto; color: var(--c-ink-3); font-size: var(--fs-xs); }
.toolbar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.toolbar__count { font-size: var(--fs-sm); color: var(--c-ink-2); }
.links__list { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--fs-sm); }
.links__list a { color: var(--c-ink-2); }
.links__list a:hover { color: var(--c-accent); }
.suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.suggest__item {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  color: var(--c-ink); text-decoration: none;
  border-bottom: 1px solid var(--c-line-2);
}
.suggest__item:last-child { border-bottom: 0; }
.suggest__item:hover { background: var(--c-bg-2); text-decoration: none; }
.suggest__label { font-weight: 500; }
.suggest__hint { font-size: var(--fs-sm); color: var(--c-ink-3); }
.suggest__count { margin-left: auto; font-size: var(--fs-xs); color: var(--c-ink-3); }
.city {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  white-space: nowrap;
  background: var(--c-bg);
}
.city:hover { border-color: var(--c-ink-3); }
.city__name { font-weight: 600; }
@media (max-width: 719px) {
.city { padding: var(--s-2); }
.city__name {
    display: inline-block; vertical-align: bottom;
    max-width: 7ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}
.lst a:focus-visible, .lst button:focus-visible, .lst select:focus-visible, .lst input:focus-visible, .lst summary:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.ofr a:focus-visible, .ofr button:focus-visible, .ofr summary:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.ofr-phone {
  margin-top: var(--s-4);
}
.city {
  
  position: relative;
  border: 0;
  padding: 0;
  background: none;
}
.city__name { font-weight: 600; }
.city__pop {
  position: absolute;
  z-index: 40;
  top: calc(100% + var(--s-2));
  left: 0;
  
  width: 400px;
  max-width: 86vw;
  padding: var(--s-3);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.city__pop[hidden] { display: none; }
.city__pop-head {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-ink-3);
  padding: 0 var(--s-2) var(--s-2);
}
.city__list {
  display: grid;
  
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-1);
  max-height: 60vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.city__item {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  align-items: baseline;
  padding: var(--s-2);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  text-align: left;
  cursor: pointer;
}
.city__item { min-width: 0; }
.city__item > span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.city__item:hover { background: var(--c-bg-2); }
.city__item--on { background: var(--c-accent-soft); font-weight: 600; }
.city__num { color: var(--c-ink-2); font-size: var(--fs-sm); }
#page[aria-busy="true"] { opacity: .55; transition: opacity .12s; }
@media (max-width: 719px) {
.city__name {
    display: inline-block; vertical-align: bottom;
    max-width: 7ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
.city__pop { position: fixed; left: var(--s-3); right: var(--s-3); width: auto; }
}
@media (max-width: 719px) {
.city { flex: none; }
}
.links__list a { color: var(--c-ink); }
.links__list a:hover { color: var(--c-accent); }
@media (max-width:900px) {
}
.sec__b { margin-top: 26px; }
.sec__h {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.sec__t { font-size: var(--fs-h3); margin: 0; }
.sec__n { font-size: var(--fs-sm); color: var(--ink-3); }
.sec__list {
  display: grid; gap: 0 22px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  margin-top: 4px;
}
.sec__i {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 0; border-bottom: 1px solid var(--line-2);
  color: inherit; text-decoration: none;
}
.sec__i:hover .sec__lbl { color: var(--accent); }
.sec__lbl { flex: 1 1 auto; }
.sec__num {
  font-size: var(--fs-sm); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ask { border-bottom: 1px solid var(--line); background: var(--bg-2); }
.ask[hidden] { display: none; }
.ask__row {
  display: flex; align-items: center; gap: 10px;
  max-width: var(--container); margin: 0 auto;
  
  padding: 10px 0; font-size: var(--fs-sm);
}
.ask__pin { color: var(--accent); display: flex; flex: none; }
.ask__text { flex: 1 1 auto; }
.ask__yes, .ask__no, .ask__x {
  font: inherit; cursor: pointer; border-radius: 8px; flex: none;
}
.ask__yes {
  padding: 6px 14px; border: 0;
  background: var(--accent); color: #fff; font-weight: 600;
}
.ask__no {
  padding: 6px 12px; border: 1px solid var(--line-2);
  background: transparent; color: inherit;
}
.ask__no:hover { border-color: var(--ink-3); }
.ask__x {
  padding: 5px; border: 0; background: none; color: var(--ink-3);
  display: flex;
}
@media (max-width: 719px) {
.ask__row { padding-left: var(--s4); padding-right: var(--s4); }
}
@media (max-width: 719px) {
.ask__row { flex-wrap: wrap; }
.ask__text { flex: 1 1 100%; order: -1; }
}
.buy__nophone { margin-top: var(--s5); display: grid; gap: var(--s3); }
.buy__nophone > div { color: var(--ink-3); font-size: var(--fs-sm); }
/* Два состояния остались вовсе без оформления: подпись про источник
   данных в подвале и пустая выдача. Первое условие лицензии, второе
   человек видит, когда в городе ничего нет. */
.ft__src {
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
}
.ft__src a { color: inherit; }
.lst__none {
  display: grid;
  gap: 6px;
  padding: 28px 20px;
  border: 1px dashed var(--c-line);
  border-radius: var(--r-md);
  text-align: center;
  color: var(--c-ink-3);
}
.gal__t[aria-pressed="true"] { border-color: var(--c-accent); }
/* Превью раздела. Строка была выровнена по первой строке текста, с
   картинкой такое выравнивание разъезжается: у длинных названий
   картинка уползает вверх. Место под превью занято всегда, в том числе
   заглушкой, иначе половина строк без снимка съедет влево. */
.sec__i { align-items: center; gap: 10px; }
.sec__pic {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 6px;
  object-fit: contain; background: var(--bg-3);
}
.sec__pic--none { display: grid; place-items: center; color: var(--ink-3); }
.sec__pic--none svg { width: 20px; height: 20px; }
/* Экраны входа. Узкая колонка: длинная строка ввода на всю ширину
   выглядит как поле поиска, а не как шаг, который надо пройти. */
.auth { max-width: 380px; padding-top: 40px; padding-bottom: 64px; }
.auth__h { margin: 0 0 8px; }
.auth__lead { margin: 0 0 24px; color: var(--ink-2); }
.auth__back { margin-left: 6px; }
.auth__form { display: flex; flex-direction: column; gap: 8px; }
.auth__lbl { font-size: var(--fs-sm); color: var(--ink-2); }
.auth__inp {
  height: 48px; padding: 0 14px; font-size: var(--fs-h3);
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
  color: var(--ink); width: 100%;
}
.auth__inp:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Код набирают цифра за цифрой и сверяют глазами с сообщением.
   Разрядка и одинаковая ширина цифр делают сверку возможной. */
.auth__inp--code {
  letter-spacing: .38em; font-variant-numeric: tabular-nums;
  text-align: center;
}
.auth__err { color: var(--bad); font-size: var(--fs-sm); }
.auth__go {
  height: 48px; margin-top: 8px; border: 0; border-radius: 10px;
  background: var(--accent); color: #fff; font-size: var(--fs-base);
  font-weight: 600; cursor: pointer;
}
.auth__again { margin-top: 16px; }
.auth__link {
  border: 0; background: none; padding: 8px 0; color: var(--ink-2);
  font: inherit; cursor: pointer; text-decoration: underline;
}
.auth__link:hover { color: var(--accent); }
.auth__note { margin-top: 24px; font-size: var(--fs-sm); color: var(--ink-3); }
/* Кнопка выхода живет в форме: выход это действие, а не переход по
   ссылке, иначе выйти можно картинкой с чужого сайта. */
.hd__out { flex: 0 0 auto; display: flex; }
.hd__me {
  flex: 0 0 auto; border: 0; background: none; padding: 8px 0;
  font: inherit; font-size: var(--fs-meta); color: var(--ink-2);
  cursor: pointer; text-decoration: none;
}
.hd__me:hover { color: var(--accent); }
/* Кабинет продавца. Две колонки: меню слева, работа справа. Меню
   узкое и постоянное, потому что переключаются между разделами
   десятки раз за заход. */
.lk {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s-8); align-items: start;
  padding-top: var(--s-6); padding-bottom: var(--s-12);
}
.lk__body { min-width: 0; }
.lk__hd {
  display: flex; align-items: center; gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.lk__hd h1 { flex: 1 1 auto; }
.lk__hd .btn { flex: 0 0 auto; }
/* Кнопка витрины растянута на всю ширину: она стоит в карточке
   товара одна под другой, и там это правильно. В кабинете кнопка
   стоит в строке рядом с заголовком, поэтому ширину возвращаем по
   содержимому, а не переписываем общее правило. */
.lk .btn {
  display: inline-flex; width: auto; height: 40px;
  padding: 0 var(--s-5); margin-top: 0;
  border-radius: var(--r-sm); font-size: var(--fs-base);
}
.btn--go { background: var(--c-accent); color: #fff; }
.btn--go:hover { background: var(--c-accent-dark); color: #fff; }
.lk .btn--ghost { background: var(--c-bg); color: var(--c-ink); border: 1px solid var(--c-line); }
.lk .btn--ghost:hover { background: var(--c-bg-2); }
/* Меню. Ненаписанные разделы видны и не кликаются: список без них
   врал бы о размере кабинета, ссылка на них врала бы о готовности. */
.lkn {
  position: sticky; top: var(--s-4);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: var(--s-4);
}
.lkn__who { padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-line-2); }
.lkn__nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.lkn__ct { font-size: var(--fs-xs); color: var(--c-ink-3); margin-top: 2px; }
.lkn__list { display: grid; gap: 2px; margin-top: var(--s-3); }
.lkn__i {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  color: var(--c-ink); font-size: var(--fs-sm); text-decoration: none;
}
.lkn__i:hover { background: var(--c-bg-2); text-decoration: none; }
.lkn__i--on { background: var(--c-accent-soft); color: var(--c-accent); font-weight: 600; }
.lkn__i--todo { color: var(--c-ink-3); cursor: default; }
.lkn__i--todo:hover { background: none; }
.lkn__c {
  margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); border-radius: 999px;
  background: var(--c-accent); color: #fff;
}
.lkn__c--mute { background: var(--c-bg-3); color: var(--c-ink-3); }
/* Плитки обзора. Число и подпись, без стрелок роста: истории у нас
   пока нет, а стрелка без истории это выдумка. */
.lk__tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3); margin-bottom: var(--s-8);
}
.lkt {
  display: block; padding: var(--s-4);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-md); color: var(--c-ink); text-decoration: none;
}
.lkt:hover { border-color: var(--c-ink-3); text-decoration: none; }
.lkt--flat:hover { border-color: var(--c-line); }
.lkt__v { display: block; font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1; }
.lkt__l { display: block; font-size: var(--fs-sm); color: var(--c-ink-2); margin-top: var(--s-1); }
.lk__warn {
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5);
  background: var(--c-warn-soft); color: var(--c-warn);
  border-radius: var(--r-sm); font-size: var(--fs-sm);
}
.lk__warn a { color: var(--c-warn); text-decoration: underline; }
.lk__sec { margin-top: var(--s-8); }
.lk__h2 { font-size: var(--fs-md); margin-bottom: var(--s-3); }
.lk__note { font-size: var(--fs-sm); color: var(--c-ink-3); }
.lk__zero {
  padding: var(--s-12) var(--s-6); text-align: center;
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.lk__zero-h { font-size: var(--fs-lg); font-weight: 600; }
.lk__zero-p {
  max-width: 420px; margin: var(--s-2) auto var(--s-5);
  color: var(--c-ink-2); font-size: var(--fs-sm);
}
/* Вкладки состояний. Число рядом с названием отвечает на вопрос
   "есть ли там что-нибудь" до нажатия. */
.lk__tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.lk__tab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 var(--s-3);
  font-size: var(--fs-sm); color: var(--c-ink-2);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: 999px; text-decoration: none;
}
.lk__tab:hover { border-color: var(--c-ink-3); text-decoration: none; }
.lk__tab--on { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.lk__tabn { opacity: .6; }
/* Строка позиции. Владельцу нужны состояние, цена и причина отказа,
   большой кадр он и так знает в лицо. */
.lko { display: grid; gap: var(--s-2); }
.lko__i {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 150px 150px;
  gap: var(--s-4); align-items: center; padding: var(--s-3);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.lko__i--off { opacity: .6; }
.lko__ph {
  width: 72px; height: 72px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--c-bg-3); display: grid; place-items: center;
}
.lko__ph img { width: 100%; height: 100%; object-fit: contain; }
.lko__none { font-size: var(--fs-xs); color: var(--c-ink-3); text-align: center; }
.lko__ti { min-width: 0; }
.lko__t { color: var(--c-ink); font-weight: 600; }
.lko__m { font-size: var(--fs-sm); color: var(--c-ink-3); margin-top: 2px; }
.lko__why { font-size: var(--fs-sm); color: var(--c-danger); margin-top: var(--s-1); }
.lko__pr b { font-size: var(--fs-md); }
.lko__per { display: block; font-size: var(--fs-xs); color: var(--c-ink-3); }
/* Состояние словом, а не цветной точкой: точку приходится
   расшифровывать, а слово читается сразу. */
.tagx {
  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s-3);
  font-size: var(--fs-xs); border-radius: 999px;
  background: var(--c-bg-3); color: var(--c-ink-2);
}
.tagx--active { background: var(--c-success-soft); color: var(--c-success); }
.tagx--moderation { background: var(--c-warn-soft); color: var(--c-warn); }
.tagx--rejected { background: #fdecec; color: var(--c-danger); }
.lk__pages {
  display: flex; gap: var(--s-4); align-items: center;
  margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--c-ink-3);
}
@media (max-width: 900px) {
.lk { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.lkn { position: static; }
.lkn__list { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
.lko__i { grid-template-columns: 56px minmax(0, 1fr); }
.lko__pr, .lko__st { grid-column: 2; }
.lko__ph { width: 56px; height: 56px; }
}
/* Форма позиции. Одна колонка и порядок как в голове у человека:
   что сдаю, за сколько, где забирать. Пара полей в строку только там,
   где они читаются вместе, вроде города и телефона. */
.f { max-width: 640px; }
.f__sec { margin-bottom: var(--s-8); }
.f__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.f__f { margin-bottom: var(--s-4); }
.f__l { display: block; font-size: var(--fs-sm); color: var(--c-ink-2); margin-bottom: 6px; }
.f__inp, .f__sel, .f__ta {
  width: 100%; padding: 0 var(--s-3); height: 42px;
  font: inherit; color: var(--c-ink); background: var(--c-bg);
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
}
.f__ta { height: auto; padding: var(--s-3); resize: vertical; }
.f__inp:focus, .f__sel:focus, .f__ta:focus {
  outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: transparent;
}
.f__f--bad .f__inp, .f__f--bad .f__sel, .f__f--bad .f__ta { border-color: var(--c-danger); }
.f__h { display: block; font-size: var(--fs-xs); color: var(--c-ink-3); margin-top: 4px; }
.f__e { display: block; font-size: var(--fs-xs); color: var(--c-danger); margin-top: 4px; }
.f__err {
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5);
  background: #fdecec; color: var(--c-danger);
  border-radius: var(--r-sm); font-size: var(--fs-sm);
}
.f__go { display: flex; gap: var(--s-3); margin-bottom: var(--s-3); }
@media (max-width: 640px) {
.f__row { grid-template-columns: minmax(0, 1fr); }
}
/* Состояние позиции и действия над ней стоят рядом: решение "снять"
   принимается, глядя на состояние, а не по памяти. */
.lk__state {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.lk__state form { display: flex; }
/* Кадры позиции в кабинете. Сетка, а не строка: кадры сравнивают
   между собой, выбирая главный, и в строке для этого приходится
   листать. Подписи словами, потому что значок стрелки в углу
   фотографии читается как часть самой фотографии. */
.ph {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-3); margin-bottom: var(--s-5);
}
.ph__i {
  position: relative; margin: 0;
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-md); overflow: hidden;
}
.ph__i--main { border-color: var(--c-accent); }
.ph__img {
  display: block; width: 100%; height: 135px;
  object-fit: cover; background: var(--c-bg-3);
}
.ph__none {
  display: grid; place-items: center; height: 135px;
  background: var(--c-bg-3); color: var(--c-ink-3); font-size: var(--fs-xs);
}
.ph__flag {
  position: absolute; top: var(--s-2); left: var(--s-2);
  padding: 2px var(--s-2); border-radius: var(--r-sm);
  background: var(--c-accent); color: #fff; font-size: var(--fs-xs);
}
.ph__flag--dup { left: auto; right: var(--s-2); background: var(--c-warn); }
.ph__go {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: var(--s-2); border-top: 1px solid var(--c-line-2);
}
.ph__go form { display: flex; flex-wrap: wrap; gap: 4px; }
.ph__b {
  padding: 4px var(--s-2); font: inherit; font-size: var(--fs-xs);
  color: var(--c-ink-2); background: var(--c-bg-2);
  border: 1px solid var(--c-line); border-radius: var(--r-sm); cursor: pointer;
}
.ph__b:hover { background: var(--c-bg-3); color: var(--c-ink); }
.ph__b[disabled] { opacity: .4; cursor: default; }
.ph__b[disabled]:hover { background: var(--c-bg-2); color: var(--c-ink-2); }
.ph__b--bad { color: var(--c-danger); }
/* Поле выбора файлов. Высота своя: системная кнопка внутри поля не
   помещается в сорок два пикселя вместе с рамкой. */
.f__file {
  width: 100%; padding: var(--s-2) var(--s-3);
  font: inherit; font-size: var(--fs-sm); color: var(--c-ink);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
}
.f__file:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; }
/* Решения модератора. Строка отказа несет причину, строка одобрения
   только число: чинить в ней нечего. Отметка снимается кнопкой, а не
   заходом на страницу. */
.lk__hd2 {
  display: flex; align-items: center; gap: var(--s-4);
  margin-bottom: var(--s-3);
}
.lk__hd2 .lk__h2 { flex: 1 1 auto; margin-bottom: 0; }
.lk__sec--first { margin-top: 0; margin-bottom: var(--s-6); }
.nt { display: grid; gap: var(--s-2); }
.nt__i {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-success); border-radius: var(--r-md);
}
.nt__i--rejected { border-left-color: var(--c-danger); }
.nt__b { flex: 1 1 auto; min-width: 0; }
.nt__t { color: var(--c-ink); font-weight: 600; text-decoration: none; }
.nt__t:hover { color: var(--c-accent); }
.nt__w { font-size: var(--fs-sm); color: var(--c-danger); margin-top: 2px; }
.nt__d { font-size: var(--fs-xs); color: var(--c-ink-3); margin-top: var(--s-1); }
.nt__x {
  flex: 0 0 auto; padding: 4px var(--s-3); font: inherit; font-size: var(--fs-xs);
  color: var(--c-ink-2); background: var(--c-bg-2);
  border: 1px solid var(--c-line); border-radius: var(--r-sm); cursor: pointer;
}
.nt__x:hover { background: var(--c-bg-3); color: var(--c-ink); }
/* Строка обращения. Контакта покупателя у открытия номера нет, и это
   написано словами: иначе продавец решит, что телефон потерялся. */
.lkl {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.lkl__b { flex: 1 1 auto; min-width: 0; }
.lkl__t { font-weight: 600; }
.lkl__m { font-size: var(--fs-sm); margin-top: 2px; }
.lkl__m a { color: var(--c-ink-2); }
.lkl__c { font-size: var(--fs-sm); color: var(--c-ink); margin-top: var(--s-1); }
.lkl__c--none { color: var(--c-ink-3); }
.lkl__d { font-size: var(--fs-xs); color: var(--c-ink-3); margin-top: var(--s-1); }
.lkl__go {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2); justify-content: flex-end; max-width: 320px;
}
.tagx--new { background: var(--c-accent-soft); color: var(--c-accent); }
.tagx--in_work { background: var(--c-warn-soft); color: var(--c-warn); }
.tagx--done { background: var(--c-success-soft); color: var(--c-success); }
.tagx--spam { background: var(--c-bg-3); color: var(--c-ink-3); }
@media (max-width: 700px) {
.lkl { flex-direction: column; }
.lkl__go { max-width: none; justify-content: flex-start; }
}
/* Найденная компания. Число позиций стоит рядом с названием: по нему
   человек и узнает свою, названия у прокатов похожи. */
.cmp {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.cmp__b { flex: 1 1 auto; min-width: 0; }
.cmp__t { font-weight: 600; font-size: var(--fs-md); }
.cmp__m { font-size: var(--fs-sm); color: var(--c-ink-3); margin-top: 2px; }
.cmp__w { font-size: var(--fs-sm); color: var(--c-warn); margin-top: var(--s-2); }
.cmp__w--calm { color: var(--c-ink-2); }
.cmp form { flex: 0 0 auto; }
.lk__ok {
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5);
  background: var(--c-success-soft); color: var(--c-success);
  border-radius: var(--r-sm); font-size: var(--fs-sm);
}
@media (max-width: 700px) {
.cmp { flex-direction: column; align-items: stretch; }
}
/* Витрина продавца. Слева кто это и чем занимается, справа связь:
   покупатель пришел сюда за телефоном и за остальным инструментом. */
.dlr { padding-top: var(--s-6); padding-bottom: var(--s-12); }
.dlr__head {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s-8); align-items: start; margin-bottom: var(--s-8);
}
.dlr__main { min-width: 0; }
.dlr__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
  margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--c-ink-3);
}
.dlr__adr { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--c-ink-2); }
.dlr__about { margin-top: var(--s-4); max-width: 60ch; color: var(--c-ink-2); }
.dlr__side {
  padding: var(--s-5);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.dlr__site {
  display: block; margin-top: var(--s-3);
  font-size: var(--fs-sm); color: var(--c-ink-2);
}
.dlr__cities { margin-top: var(--s-5); }
.dlr__ct-h {
  font-size: var(--fs-xs); color: var(--c-ink-3);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--s-2);
}
.dlr__ct {
  display: flex; justify-content: space-between; gap: var(--s-3);
  padding: 4px 0; font-size: var(--fs-sm); color: var(--c-ink-2);
  border-bottom: 1px solid var(--c-line-2);
}
.dlr__ct:last-child { border-bottom: 0; }
.dlr__ct b { color: var(--c-ink); }
@media (max-width: 900px) {
.dlr__head { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}
/* Переписка. Свои реплики справа, чужие слева: это единственный
   способ читать разговор, не подписывая каждую строку. */
.msgp { padding-top: var(--s-6); padding-bottom: var(--s-12); max-width: 760px; }
.msgp__about {
  padding: var(--s-4); margin: var(--s-4) 0 var(--s-6);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.msgp__ttl { font-weight: 600; }
.msgp__sub { font-size: var(--fs-sm); color: var(--c-ink-3); margin-top: 2px; }
.dlg { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.dlg__m {
  max-width: 78%; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-bg);
}
.dlg__m--buyer { justify-self: end; background: var(--c-accent-soft); border-color: transparent; }
.dlg__m--dealer { justify-self: start; }
.dlg__who { font-size: var(--fs-xs); color: var(--c-ink-3); margin-bottom: 2px; }
.dlg__t { white-space: pre-wrap; overflow-wrap: anywhere; }
.dlg__d { font-size: var(--fs-xs); color: var(--c-ink-3); margin-top: var(--s-2); }
.dlg__f { max-width: none; }
/* Строка диалога в списке кабинета. Непрочитанное видно рамкой, а не
   только числом: список читают по диагонали. */
.lkl--link { text-decoration: none; color: inherit; }
.lkl--link:hover { border-color: var(--c-ink-3); text-decoration: none; }
.lkl--new { border-left: 3px solid var(--c-accent); }
.lkl__t .lkn__c { margin-left: var(--s-2); }
.tagx--open { background: var(--c-accent-soft); color: var(--c-accent); }
.tagx--closed { background: var(--c-bg-3); color: var(--c-ink-3); }
@media (max-width: 640px) {
.dlg__m { max-width: 92%; }
}
/* Отложенное. Сердце в углу кадра, поверх карточки: внутри самой
   карточки его быть не может, вся карточка это одна ссылка. */
.card__w { position: relative; }
.card__fav {
  position: absolute; top: var(--s-2); right: var(--s-2); z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px;
  padding: 0; color: var(--c-ink-2); background: var(--c-bg);
  border: 1px solid var(--c-line); border-radius: 999px; cursor: pointer;
}
.card__fav:hover { color: var(--c-accent); }
.card__fav--on {
  color: #fff; background: var(--c-accent); border-color: var(--c-accent);
}
.card__fav--on svg { fill: currentColor; }
.f__fav { margin-top: var(--s-2); }
.f__fav button { display: inline-flex; align-items: center; gap: var(--s-2); }
.f__fav--on button {
  color: var(--c-accent); border-color: var(--c-accent);
}
.f__fav--on button svg { fill: currentColor; }
/* Карточка общего комплекта: сердцу нужна точка отсчета. */
.crd { position: relative; }
/* Счет на оплату. Печатается из браузера, поэтому шапка сайта и
   кнопки при печати убираются. */
.inv { padding-top: var(--s-6); padding-bottom: var(--s-12); max-width: 860px; }
.inv__go { display: flex; gap: var(--s-3); margin-bottom: var(--s-5); }
.inv__doc {
  padding: var(--s-8); background: var(--c-bg);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.inv__ttl { font-size: var(--fs-lg); font-weight: 700; }
.inv__date, .inv__due { font-size: var(--fs-sm); color: var(--c-ink-2); }
.inv__state {
  display: inline-flex; margin-top: var(--s-2); padding: 2px var(--s-3);
  font-size: var(--fs-xs); border-radius: 999px;
  background: var(--c-bg-3); color: var(--c-ink-2);
}
.inv__sides { width: 100%; margin: var(--s-6) 0; border-collapse: collapse; }
.inv__sides th {
  width: 140px; text-align: left; vertical-align: top;
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  font-size: var(--fs-sm); color: var(--c-ink-3); font-weight: 400;
}
.inv__sides td {
  padding: var(--s-3) 0; border-top: 1px solid var(--c-line-2);
  font-size: var(--fs-sm);
}
.inv__items { width: 100%; border-collapse: collapse; margin-top: var(--s-4); }
.inv__items th, .inv__items td {
  padding: var(--s-3); text-align: left; font-size: var(--fs-sm);
  border-bottom: 1px solid var(--c-line-2);
}
.inv__items th:not(:first-child), .inv__items td:not(:first-child) {
  text-align: right; white-space: nowrap;
}
.inv__items tfoot td { border-bottom: 0; }
.inv__note { margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--c-ink-2); }
.tagx--awaiting { background: var(--c-warn-soft); color: var(--c-warn); }
.tagx--paid { background: var(--c-success-soft); color: var(--c-success); }
.tagx--cancelled { background: var(--c-bg-3); color: var(--c-ink-3); }
@media print {
.inv__doc { border: 0; padding: 0; }
}
/* Нашивка купленной услуги. Один цвет на все виды: разноцветные
   нашивки на выдаче превращают ее в ярмарку, и покупатель перестает
   отличать платное от нужного. */
.card__promo {
  position: absolute; left: var(--s-2); top: var(--s-2); z-index: 1;
  padding: 2px var(--s-2); border-radius: var(--r-sm);
  background: var(--c-warn); color: #fff; font-size: var(--fs-xs);
}
.card__w .card { position: relative; }
/* Выделение цветом это рамка, а не заливка: заливка меняет цвет
   текста под собой и ломает читаемость на половине карточек. */
.card--promo { box-shadow: inset 0 0 0 2px var(--c-warn); }
/* Вопросы. Свернуты по умолчанию: развернутый блок из десяти ответов
   занимает два экрана и отодвигает перелинковку за край. */
.faq { display: flex; flex-direction: column; gap: var(--s-2); }
.faq__i { border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: var(--s-3); background: var(--c-bg-2); }
.faq__q { cursor: pointer; font-weight: 600; }
.faq__i[open] .faq__q { margin-bottom: var(--s-2); }
.faq__a { color: var(--c-ink-2); }
.faq__a p { margin: 0 0 var(--s-2); }
.faq__a p:last-child { margin-bottom: 0; }
/* Отзывы о продавце. Оценка без текста ничего не говорит, поэтому
   средняя стоит рядом с числом отзывов, а не сама по себе. */
.otz__avg { font-size: var(--fs-sm); color: var(--c-ink-2); }
.otz__avg b { font-size: var(--fs-card); color: var(--c-ink); }
.otz__list { display: grid; gap: var(--s-4); }
.otz__i {
  padding: var(--s-4);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.otz__h {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: baseline;
  font-size: var(--fs-sm); color: var(--c-ink-3);
}
.otz__nm { font-weight: 600; color: var(--c-ink); }
.otz__tx { margin-top: var(--s-3); color: var(--c-ink-2); max-width: 70ch; }
.otz__ans {
  margin-top: var(--s-4); padding-left: var(--s-4);
  border-left: 2px solid var(--c-line);
}
.otz__ans-h { font-size: var(--fs-xs); color: var(--c-ink-3); }
.otz__more { display: inline-block; margin-top: var(--s-4); font-size: var(--fs-sm); }
.otz__zero { color: var(--c-ink-2); }
.otz__cta { margin-top: var(--s-5); }
.otz__rule { font-size: var(--fs-sm); color: var(--c-ink-3); margin-bottom: var(--s-3); }
.otz__rate { display: grid; gap: var(--s-2); }
.otz__rb { display: flex; gap: var(--s-2); align-items: center; }
.dlr__rt { color: var(--c-ink-2); }
.buy__rt { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--c-ink-2); }
/* Блог. Лента, статья, автор. Ширина текста ограничена: строка в сто
   знаков читается вдвое медленнее, это не вопрос вкуса. */
.blg { padding-top: var(--s-6); padding-bottom: var(--s-12); }
.blg__sub { margin-top: var(--s-3); max-width: 60ch; color: var(--c-ink-2); }
.blg__topics {
  display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0;
}
.blg__topics a {
  display: inline-flex; gap: var(--s-2); align-items: baseline;
  padding: 6px var(--s-3); font-size: var(--fs-sm);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
}
.blg__topics b { color: var(--c-ink-3); font-weight: 500; }
.blg__list { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.blg__au { display: flex; gap: var(--s-5); align-items: flex-start; margin: var(--s-5) 0; }
.blg__au-ph { width: 120px; height: 120px; object-fit: cover; border-radius: var(--r-md); }
.blg__au-r { margin-top: var(--s-2); color: var(--c-ink-3); font-size: var(--fs-sm); }
.blg__au-b { margin-top: var(--s-3); max-width: 60ch; color: var(--c-ink-2); }
.blg__au-s { display: inline-block; margin-top: var(--s-3); font-size: var(--fs-sm); }
.artc {
  padding: var(--s-4);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.artc__ttl { display: block; font-size: var(--fs-card); font-weight: 600; }
.artc__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2);
  font-size: var(--fs-sm); color: var(--c-ink-3);
}
.artc__lead { margin-top: var(--s-3); color: var(--c-ink-2); max-width: 70ch; }
.art { padding-top: var(--s-6); padding-bottom: var(--s-12); max-width: 780px; }
.art__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3);
  font-size: var(--fs-sm); color: var(--c-ink-3);
}
.art__cover { display: block; width: 100%; margin-top: var(--s-5); border-radius: var(--r-md); }
.art__lead {
  margin-top: var(--s-5); padding: var(--s-4);
  background: var(--c-bg-2); border-radius: var(--r-md);
  font-size: var(--fs-card); color: var(--c-ink);
}
.art__toc { margin-top: var(--s-6); padding-left: var(--s-4); border-left: 2px solid var(--c-line); }
.art__toc-h { font-size: var(--fs-xs); color: var(--c-ink-3); text-transform: uppercase; letter-spacing: .04em; }
.art__toc-i { display: block; margin-top: var(--s-2); font-size: var(--fs-sm); }
.art__toc-i--3 { padding-left: var(--s-4); color: var(--c-ink-2); }
.art__body { margin-top: var(--s-6); color: var(--c-ink-2); }
.art__body h2 { margin-top: var(--s-8); color: var(--c-ink); }
.art__body h3 { margin-top: var(--s-6); color: var(--c-ink); }
.art__body p { margin-top: var(--s-4); }
.art__body ul, .art__body ol { margin-top: var(--s-4); padding-left: var(--s-5); }
.art__body li { margin-top: var(--s-2); }
.art__body table { width: 100%; margin-top: var(--s-5); border-collapse: collapse; }
.art__body th, .art__body td {
  padding: var(--s-2) var(--s-3); text-align: left;
  border-bottom: 1px solid var(--c-line);
}
.art__body blockquote {
  margin-top: var(--s-5); padding-left: var(--s-4);
  border-left: 2px solid var(--c-line); color: var(--c-ink-3);
}
.art__body code { padding: 2px 4px; background: var(--c-bg-2); border-radius: 4px; }
.art__go {
  display: flex; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-5); padding: var(--s-4);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-md); font-weight: 600;
}
.art__go b { color: var(--c-ink-3); font-weight: 500; }
.art__cat-list { display: grid; gap: var(--s-3); }
.art__topics { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.art__author {
  margin-top: var(--s-8); padding: var(--s-4);
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.art__au-h { font-size: var(--fs-xs); color: var(--c-ink-3); text-transform: uppercase; letter-spacing: .04em; }
.art__au-n { display: inline-block; margin-top: var(--s-2); font-weight: 600; }
.art__au-r { color: var(--c-ink-3); font-size: var(--fs-sm); }
.art__au-b { margin-top: var(--s-2); color: var(--c-ink-2); }
@media (max-width: 700px) {
.blg__au { flex-direction: column; }
}
/* Страница для тех, кто сдает. Слева обещание и кнопка, справа живые
   цифры площадки: без них обещание "вас увидят" ничем не подкреплено. */
.sdt { padding-top: var(--s-6); padding-bottom: var(--s-12); }
.sdt__head {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s-8); align-items: start; margin: var(--s-5) 0 var(--s-8);
}
.sdt__lead { margin: var(--s-4) 0 var(--s-5); max-width: 56ch; color: var(--c-ink-2); }
.sdt__note { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--c-ink-3); }
.sdt__nums {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
  padding: var(--s-5);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.sdt__n { display: grid; gap: 2px; }
.sdt__n b { font-size: var(--fs-h2); line-height: 1.1; }
.sdt__n span { font-size: var(--fs-sm); color: var(--c-ink-3); }
.sdt__steps { margin-top: var(--s-4); padding-left: var(--s-5); display: grid; gap: var(--s-3); }
.sdt__steps li { color: var(--c-ink-2); max-width: 70ch; }
.sdt__steps b { color: var(--c-ink); }
.sdt__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-4); }
.sdt__card {
  padding: var(--s-4);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-md); color: var(--c-ink-2);
}
.sdt__ct { font-weight: 600; color: var(--c-ink); margin-bottom: var(--s-2); }
.sdt__p { margin-top: var(--s-4); max-width: 70ch; color: var(--c-ink-2); }
.sdt__docs { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.sdt__doc {
  display: inline-flex; gap: var(--s-2); align-items: baseline;
  padding: var(--s-3) var(--s-4);
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-sm); font-weight: 600;
}
.sdt__doc span { font-size: var(--fs-xs); color: var(--c-ink-3); text-transform: uppercase; }
.sdt__go { margin-top: var(--s-8); }
@media (max-width: 900px) {
.sdt__head { grid-template-columns: minmax(0, 1fr); }
.sdt__two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
/* В шапке телефона кнопка остается: это то единственное, ради чего
     сюда приходит вторая сторона площадки. */
}

/* Осталось от прежней темы витрины: этим пользуется то,
   чего макет не касается. Значения прежние, они уже были
   подобраны под песочную гамму. */
:root{
  --bad: #b91c1c;
}

/* Отклик карточки без подчеркивания. Ссылкой обернут весь блок, и
   подчеркивание красило разом название, город и продавца. Здесь
   карточка приподнимается, получает тень и рамку, а кадр слегка
   приближается. Цвет не трогаем: на витрине он занят действием. */
.card:hover .card__title{text-decoration:none}

/* В тексте статьи ссылка обязана отличаться от текста, там
   подчеркивание остается. */
.art__body a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--line)}
.art__body a:hover{text-decoration-color:var(--ink-3)}

/* Лента блога. Обложка сверху, текст под ней: в узкой колонке
   картинка сбоку сжимает заголовок до двух слов в строке. */
.artc { display: flex; flex-direction: column; gap: 10px; }
.artc__pic { display: block; overflow: hidden; border-radius: 10px; }
.artc__pic img { display: block; width: 100%; height: auto; }
.blg__list { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 640px) { .blg__list { grid-template-columns: 1fr; } }

/* Подпись под формой заявки и под номером. Мелкая и тихая: это
   обязательная строка, а не то, ради чего человек пришел. */
.f__note {
  margin: var(--s-2) 0 0; font-size: 12px; line-height: 1.45;
  color: var(--c-ink-2);
}
.f__note a { color: inherit; text-decoration: underline; }

/* Поля формы заявки. Тот же шестнадцатый кегль и по той же причине:
   человек отдает телефон именно здесь, и прыжок страницы в этот
   момент стоит обращения. */
.f input, .f textarea, .f select { font-size: var(--fs-input); }

/* Одна колонка на самых узких экранах. В две колонки карточка получает
   138 пикселей, из них под текст 116: город "Нижний Новгород" требует
   127 и режется всегда, а название режется так, что соседние позиции
   неразличимы. Кадр заодно становится втрое крупнее. */
@media (max-width: 400px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .card__title { -webkit-line-clamp: 2; }
  .card__seller { display: block; }
}

/* Кнопка применения фильтров липнет к низу. Раскрытая панель это
   полторы тысячи пикселей, и чтобы применить одну галочку, надо было
   пролистать ее до дна. */
@media (max-width: 900px) {
  .flt__go {
    position: sticky; bottom: var(--s3); z-index: 3;
    box-shadow: 0 6px 20px rgba(0,0,0,.16);
  }
}

/* Размеры для пальца. Ниже сорока четырех точек человек промахивается,
   и на выдаче это двадцать сердец подряд, в которые он не попадает. */
.card__fav { width: 44px; height: 44px; }
.hd__ico, .hd__go { width: 44px; height: 44px; }
.hd__city { min-height: 44px; }
.ask__x { width: 44px; height: 44px; display: grid; place-items: center; }
.chip { min-height: 44px; display: inline-flex; align-items: center; }
.picked__i { min-height: 44px; }
.flt__row { min-height: 44px; display: flex; align-items: center; }
.faq__q { min-height: 44px; display: flex; align-items: center; }

/* Лента разделов на главной прокручивается вбок, но об этом ничто не
   говорило: она просто обрывалась по краю экрана. Затухание у правого
   края это единственный намек, который читается без подписи. */
@media (max-width: 640px) {
  .hero__hints {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
    mask-image: linear-gradient(to right, #000 88%, transparent);
    padding-right: var(--s5);
  }
}

/* Плашка города не двигает страницу. Она раскрывается после ответа
   сервера, и на медленном канале это происходит через две-три секунды,
   когда человек уже читает и целится пальцем. Сдвиг был сто пикселей,
   то есть промах по первой карточке гарантирован.

   Поэтому на узком экране она встает поверх низа экрана, а не в поток.
   Место под нее в потоке не резервируем: пустая полоса в сто пикселей
   у большинства посетителей, которым плашка не нужна, хуже сдвига. */
@media (max-width: 720px) {
  .ask {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    margin: 0; border-radius: var(--r-sm) var(--r-sm) 0 0;
    box-shadow: 0 -8px 28px rgba(0,0,0,.18);
  }
}

/* Цена и путь к звонку в полосе у нижнего края. На 320 кнопка звонка
   лежала на тысяче сто шестидесятом пикселе: выше заголовок, кадр,
   оговорка про сгенерированное изображение и оценка цены. Для сайта,
   смысл которого в звонке, это второй экран.

   Полоса, а не перестановка блоков: в разметке карточки внутри сетки
   всего два ребенка, фото с описанием в одном и покупка во втором.
   Резать их ради порядка на мобильном значит переписать карточку.

   Полоса ничего не дублирует, в ней ссылка на якорь: форма и кнопка
   остаются одни и работают без скрипта. */
.buy__bar { display: none; }
@media (max-width: 900px) {
  .buy__bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s3); padding: var(--s3) var(--s4);
    background: var(--bg); border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(0,0,0,.10);
  }
  .buy__bar-val { font-size: var(--fs-h3); font-weight: 700; white-space: nowrap; }
  .buy__bar-per { font-size: var(--fs-xs); color: var(--ink-2); }
  .buy__bar .btn { min-height: 44px; }
  /* Полоса перекрывает низ страницы, поэтому подвалу нужен запас. */
  .ft { padding-bottom: 76px; }
}