/* qoody.ru v2 — раскладка страниц поверх канона.
   27.08.2026, Куди (logist).

   Здесь только то, чего в каноне нет по смыслу: он описывает КОМПОНЕНТЫ
   (плитка, цена, чип, сегмент темы), а страницы из них собираю я. Ни один
   токен и ни один класс канона тут не переопределяется — если понадобится,
   это правка на стороне дизайнера, иначе через неделю будет две системы.

   Пороги пишу через @container s, как в каноне: медиазапрос спрашивает ширину
   ОКНА, и в раскадровке макетов «телефон» внутри широкого окна раскрывался бы
   в четыре колонки. */

/* ── ОБОЛОЧКА ──────────────────────────────────────────────────────────────
   Нижний отступ main считается от таббара, а не берётся из шкалы: панель
   56 px плюс безопасная зона iPhone, иначе последняя плитка каталога уезжает
   под неё и до кнопки «в корзину» не дотянуться. Это компенсация, шкале она
   не подчиняется. */
.s-main{padding-top:var(--s-sp-5);padding-bottom:calc(56px + var(--s-sp-6) + env(safe-area-inset-bottom,0px))}
@container s (min-width:900px){ .s-main{padding-top:var(--s-sp-7);padding-bottom:var(--s-sp-8)} }
.s-page-h{margin-bottom:var(--s-sp-4)}
.s-section{margin-top:var(--s-sp-7)}
.s-section__hd{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-sp-3);margin-bottom:var(--s-sp-4)}
.s-section__more{font-size:var(--s-fs-2);font-weight:600;color:var(--s-accent-tx);white-space:nowrap}

/* Поиск в шапке. Занимает всё свободное место и НЕ схлопывается: min-width:0
   на flex-элементе обязателен, иначе поле держит ширину плейсхолдера и
   выдавливает корзину за край. Ниже 900 px меню в шапке нет, и поиск получает
   всю строку — он и есть главный способ навигации по 78 позициям. */
.s-hd__search{flex:1;min-width:0;display:flex}
.s-hd__search .s-field{width:100%;height:var(--s-h-ctl-sm);
  background:var(--s-surface-2);border-radius:var(--s-r-pill);padding:0 var(--s-sp-4)}
@container s (min-width:900px){
  .s-hd__search{max-width:340px;margin-left:auto}
  .s-hd__search .s-field{height:40px}
}
/* Поиску в шапке место не всегда: на карточке товара и в корзине он мешает,
   там строка отдана названию и действию. Прячем классом, а не отдельной
   шапкой — две разметки шапки разъедутся на первой же правке. */
.s-hd--plain .s-hd__search{display:none}

/* Счётчик корзины на пустой корзине обязан ИСЧЕЗАТЬ, а не показывать ноль.
   Атрибут hidden сам по себе не справляется: у него display:none приходит из
   стилей браузера, а в каноне у счётчика стоит display:flex — класс перебивает
   UA-правило, и «0» остаётся висеть. Поймано на скриншоте, скриптом не видно:
   в DOM атрибут стоит, значит проверка «hidden выставлен» прошла бы зелёной. */
.s-cartbtn__n[hidden]{display:none}

.s-ft__ab{margin-top:var(--s-sp-3);font-size:var(--s-fs-2);color:var(--s-ink-mid);max-width:280px}

/* ── ГЛАВНАЯ ───────────────────────────────────────────────────────────────
   Первый экран отвечает на «что это за магазин» одной строкой и сразу даёт
   поиск и категории. Крупной картинки-героя нет намеренно: единственный
   фотоматериал каталога — рекламные баннеры WB с наложенным текстом, и во
   всю ширину экрана они читаются как чужая реклама, а не как наша витрина. */
.s-hero{padding:var(--s-sp-6) 0 var(--s-sp-5)}
.s-hero__t{font-size:var(--s-fs-6);font-weight:800;letter-spacing:-.02em;line-height:1.1}
@container s (min-width:900px){ .s-hero__t{font-size:var(--s-fs-7)} }
.s-hero__s{margin-top:var(--s-sp-3);font-size:var(--s-fs-3);color:var(--s-ink-mid);max-width:52ch}
.s-hero__act{margin-top:var(--s-sp-5);display:flex;gap:var(--s-sp-3);flex-wrap:wrap}

/* Плитки категорий. Две колонки на телефоне — та же логика, что у каталога:
   за один взгляд видно все три раздела и не нужно листать. */
.s-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-sp-3)}
@container s (min-width:640px){ .s-cats{grid-template-columns:repeat(3,1fr);gap:var(--s-sp-4)} }
.s-cat{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-sp-5);
  min-height:112px;padding:var(--s-sp-4);border-radius:var(--s-r-3);
  background:var(--s-surface);border:1px solid var(--s-edge)}
.s-cat:hover{border-color:var(--s-line-ctl)}
.s-cat__t{font-size:var(--s-fs-3);font-weight:700;line-height:1.25}
.s-cat__n{font-size:var(--s-fs-1);color:var(--s-ink-soft);font-family:var(--s-mono)}

/* ── КАРТОЧКА ТОВАРА ───────────────────────────────────────────────────────
   Галерея квадратная и с contain — той же геометрии, что плитка каталога.
   Кадры 900x1200, поля возникают по бокам и красятся --s-photo-bg, поэтому
   обрезки нет нигде: она была только на миниатюрах старой витрины (1:1 +
   cover съедал 25 % высоты), а здесь миниатюры заменены точками. */
.s-pd{display:grid;gap:var(--s-sp-5)}
@container s (min-width:900px){
  .s-pd{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:var(--s-sp-7);align-items:start}
}
.s-pd__ph{position:relative;aspect-ratio:1;border-radius:var(--s-r-3);overflow:hidden;
  background:var(--s-photo-bg,var(--s-sunk));display:flex;align-items:center;justify-content:center}
.s-pd__ph img{width:100%;height:100%;object-fit:contain}
.s-pd__dots{display:flex;gap:var(--s-sp-2);justify-content:center;margin-top:var(--s-sp-3)}
.s-pd__dot{width:8px;height:8px;border-radius:50%;background:var(--s-line-ctl);
  border:0;padding:0;flex:none}
.s-pd__dot.is-on{background:var(--s-accent-edge)}
.s-pd__nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;
  border-radius:50%;background:var(--s-surface);border:1px solid var(--s-edge);
  display:flex;align-items:center;justify-content:center;color:var(--s-ink)}
.s-pd__nav--prev{left:var(--s-sp-3)} .s-pd__nav--next{right:var(--s-sp-3)}
.s-pd__t{font-size:var(--s-fs-5);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.s-pd__sku{margin-top:var(--s-sp-2);font-size:var(--s-fs-1);color:var(--s-ink-soft);
  font-family:var(--s-mono)}
.s-pd__buy{display:flex;gap:var(--s-sp-3);align-items:center;margin-top:var(--s-sp-5)}
.s-pd__buy .s-btn{flex:1}
.s-pd__desc{margin-top:var(--s-sp-5);font-size:var(--s-fs-3);color:var(--s-ink-mid);
  line-height:1.6;white-space:pre-line}
.s-spec{display:grid;grid-template-columns:1fr;gap:0;margin-top:var(--s-sp-5)}
.s-spec__r{display:flex;gap:var(--s-sp-4);justify-content:space-between;
  padding:var(--s-sp-3) 0;font-size:var(--s-fs-2);border-top:1px solid var(--s-line)}
.s-spec__k{color:var(--s-ink-soft)} .s-spec__v{text-align:right;font-weight:600}
/* Декларация соответствия и её даты: по закону сведения обязаны быть доступны,
   но покупателю в первую очередь нужны цоколь и мощность. Свёрнутый <details>,
   тач-цель 44 px по высоте строки. */
.s-docs{margin-top:var(--s-sp-4);border-top:1px solid var(--s-line)}
.s-docs__s{display:flex;align-items:center;min-height:44px;cursor:pointer;
  font-size:var(--s-fs-2);color:var(--s-ink-soft);list-style:none}
.s-docs__s::-webkit-details-marker{display:none}
.s-docs__s::after{content:'';margin-left:var(--s-sp-2);width:7px;height:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.s-docs[open] .s-docs__s::after{transform:rotate(-135deg) translateY(0)}
.s-docs .s-spec{margin-top:0}
.s-docs .s-spec__r:first-child{border-top:0}

/* Липкая полоса покупки на телефоне. Появляется, когда кнопка в карточке
   ушла за экран: на длинном описании человек дочитывает до конца и там ему
   нечем купить. Выше 900 px не нужна — блок цены и так виден в правой колонке. */
.s-buybar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:var(--s-sp-3);
  padding:var(--s-sp-3) var(--s-sp-4) calc(var(--s-sp-3) + env(safe-area-inset-bottom,0px));
  background:var(--s-surface);border-top:1px solid var(--s-edge);box-shadow:var(--s-shadow-bar)}
.s-buybar .s-btn{flex:1}
@container s (min-width:900px){ .s-buybar{display:none} }

/* ── КОРЗИНА ───────────────────────────────────────────────────────────────
   Строка товара: фото на своей подложке, название, цена, счётчик. Удаление —
   через минус до нуля, отдельной корзины-иконки нет: два способа убрать одно
   и то же на 390 px только путают. */
.s-cart{display:grid;gap:var(--s-sp-5)}
@container s (min-width:900px){
  .s-cart{grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:var(--s-sp-7);align-items:start}
}
.s-line__act{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-sp-3);margin-top:var(--s-sp-2)}

/* ── ОФОРМЛЕНИЕ ЗАКАЗА ──────────────────────────────────────────────────────
   Два класса, которых нет в ds.css: он писался под каталог и карточку, где
   ни заголовков внутри карточки, ни групп выбора не было. Держу их здесь, а
   не в ds.css — тот принадлежит дизайнеру и переезжает целиком при каждой
   его сборке. Если он заведёт свои — эти уйдут. */

/* Заголовок раздела ВНУТРИ карточки: «Контакты», «Доставка», «Оплата».
   Мельче h1 страницы и не спорит с ним за внимание. */
.s-card__h{margin:0;font-size:15px;font-weight:700;letter-spacing:.01em}

/* Группа взаимоисключающих кнопок (.s-opt). Столбцом, а не строкой: названия
   способов доставки длинные («Онлайн-оплата картой/СБП»), в ряд на 320 px они
   схлопываются в две буквы. */
.s-opts{display:flex;flex-direction:column;gap:var(--s-sp-3)}

/* ── РЕЗУЛЬТАТ ОПЛАТЫ ───────────────────────────────────────────────────────
   Экран, на который ЮKassa возвращает человека после платежа. Он читается
   один раз и целиком, поэтому колонка по центру, а не карточка в сетке:
   на этой странице нет ничего, с чем результат делил бы внимание.
   Цвета — те же три токена, что у статусов заказа (pos/warn/neg), чтобы
   «оплачен» здесь и «оплачен» в списке заказов были одного цвета. Четвёртый
   оттенок ради одного экрана завёл бы разнобой. */
.s-result{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--s-sp-4);padding:var(--s-sp-8) var(--s-sp-4);max-width:420px;margin:0 auto}
.s-result__ic{width:56px;height:56px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:var(--s-sunk);color:var(--s-ink-mid)}
.s-result--ok .s-result__ic{background:var(--s-pos-film);color:var(--s-pos)}
.s-result--wait .s-result__ic{background:var(--s-warn-film);color:var(--s-warn)}
.s-result--err .s-result__ic{background:var(--s-neg-film);color:var(--s-neg)}
.s-result__t{margin:0;font-size:var(--s-fs-5);font-weight:800;letter-spacing:-.01em}
.s-result__s{margin:0;font-size:var(--s-fs-2);color:var(--s-ink-mid);line-height:1.5}
/* Кнопки в столбец: «Мои заказы» и «В каталог» рядом на 320 px переносятся
   по словам и перестают выглядеть кнопками. */
.s-result__act{display:flex;flex-direction:column;gap:var(--s-sp-3);
  width:100%;max-width:280px;margin-top:var(--s-sp-2)}
.s-result__act .s-btn{width:100%}

/* ── ВХОД И РЕГИСТРАЦИЯ ─────────────────────────────────────────────────────
   Одна колонка с потолком ширины: форма из трёх полей, растянутая на 1200 px,
   читается как ошибка вёрстки. Потолок тот же, что у результата оплаты, —
   это два экрана одного рода, «сделай одно действие и уходи». */
.s-auth{max-width:420px;margin:0 auto}
.s-auth__card{margin-top:var(--s-sp-5)}
.s-auth__alt{margin:var(--s-sp-5) 0 0;text-align:center;font-size:var(--s-fs-2);
  color:var(--s-ink-mid)}
.s-auth__hint{margin-top:var(--s-sp-4);text-align:center}
/* Кнопка, которая ведёт себя как ссылка: смена режима «вход ↔ регистрация» —
   не переход по адресу, поэтому <a href="#"> здесь врёт скринридеру и ломает
   историю переходов. */
.s-linkbtn{background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:var(--s-accent-tx);font-weight:600}
.s-linkbtn:hover{text-decoration:underline}

/* ── КАБИНЕТ ────────────────────────────────────────────────────────────────
   Разделы переключаются чипами (те же, что фильтры каталога), а не вкладками
   с подчёркиванием: на 320 px три вкладки с подчёркиванием сжимаются до
   нечитаемых огрызков, а чипы честно скроллятся. */
.s-acc__tabs{margin:var(--s-sp-4) 0 var(--s-sp-5)}

/* Уровень цен — первое, что человек ищет в кабинете: от него зависят все цифры
   в каталоге. Поэтому крупно и отдельной строкой, а не полем в общем списке. */
.s-acc__lvl{display:flex;align-items:baseline;gap:var(--s-sp-3);flex-wrap:wrap}
.s-acc__lvl-t{font-size:var(--s-fs-2);color:var(--s-ink-mid)}
.s-acc__lvl-v{font-size:var(--s-fs-5);font-weight:800;letter-spacing:-.01em}
.s-acc__lvl-d{font-size:var(--s-fs-2);font-weight:700;color:var(--s-accent-tx);
  background:var(--s-accent-film);padding:2px 8px;border-radius:var(--s-r-pill)}
.s-acc__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-sp-4);
  margin-top:var(--s-sp-5)}
.s-acc__cell{display:flex;flex-direction:column;gap:var(--s-sp-1);min-width:0}
.s-acc__cell-t{font-size:var(--s-fs-1);color:var(--s-ink-soft)}
.s-acc__cell-v{font-size:var(--s-fs-3);font-weight:700;font-variant-numeric:tabular-nums}

.s-acc__levels{display:flex;flex-direction:column;gap:var(--s-sp-2);margin-top:var(--s-sp-3)}
.s-acc__level{display:flex;justify-content:space-between;gap:var(--s-sp-3);
  padding:var(--s-sp-3) 0;border-top:1px solid var(--s-line);font-size:var(--s-fs-2)}
.s-acc__level:first-child{border-top:0}
.s-acc__level-n{font-weight:600}
.s-acc__level.is-cur .s-acc__level-n{color:var(--s-accent-tx)}
.s-acc__level-c{color:var(--s-ink-mid);text-align:right}

.s-acc__last{display:flex;justify-content:space-between;gap:var(--s-sp-3);
  margin-top:var(--s-sp-3);font-size:var(--s-fs-2)}
.s-acc__last-s{font-weight:700;font-variant-numeric:tabular-nums}
.s-acc__back{margin-bottom:var(--s-sp-2)}

/* Заказ в списке — кнопка, а не ссылка: карточка открывается на месте, без
   перехода по адресу. Три строки: номер со статусом, дата с числом позиций,
   сумма — в этом порядке человек их и читает. */
.s-acc__orders{display:flex;flex-direction:column;gap:var(--s-sp-3)}
.s-ord{display:flex;flex-direction:column;gap:var(--s-sp-2);width:100%;
  text-align:left;padding:var(--s-sp-4);border:1px solid var(--s-line);
  border-radius:var(--s-r-3);background:var(--s-card);color:inherit;font:inherit;cursor:pointer}
.s-ord:hover{border-color:var(--s-line-ctl)}
.s-ord__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-sp-3)}
.s-ord__n{font-weight:700;font-variant-numeric:tabular-nums}
.s-ord__mid{font-size:var(--s-fs-1);color:var(--s-ink-mid)}
.s-ord__sum{font-size:var(--s-fs-3);font-weight:700;font-variant-numeric:tabular-nums}
.s-ord__isum{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Пара «поле — значение». Значение прижато вправо и переносится, подпись —
   нет: подписи короткие и одинаковой длины, ломать их незачем. */
.s-kv{display:flex;justify-content:space-between;gap:var(--s-sp-4);
  padding:var(--s-sp-3) 0;border-top:1px solid var(--s-line);font-size:var(--s-fs-2)}
.s-kv:first-child{border-top:0;padding-top:0}
.s-kv__t{color:var(--s-ink-mid);white-space:nowrap}
.s-kv__v{text-align:right;min-width:0;overflow-wrap:anywhere}

/* ── КОНТЕНТНЫЕ СТРАНИЦЫ (контакты, гарантия) ───────────────────────────────
   Дизайн-система писалась под каталог и покупку — текстовых страниц в ней нет.
   Держу их здесь: ds.css принадлежит дизайнеру и переезжает целиком при каждой
   его сборке, а эти правила про наш контент, а не про канон. */
.s-lead{margin:var(--s-sp-3) 0 0;font-size:var(--s-fs-3);line-height:1.55;
  color:var(--s-ink-mid);max-width:60ch}
.s-sec-h{margin:var(--s-sp-8) 0 0;font-size:var(--s-fs-5);font-weight:800;letter-spacing:-.01em}
.s-hd__nav a.is-on{color:var(--s-ink)}

/* Каналы связи. Одна колонка на телефоне и три на широком: карточка тут —
   цель нажатия целиком, поэтому она блок со своей областью, а не строка
   с маленькой ссылкой внутри. */
.s-ch{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-sp-3);margin-top:var(--s-sp-5)}
@media (min-width:760px){.s-ch{grid-template-columns:repeat(3,1fr)}}
.s-ch__i{display:flex;flex-direction:column;gap:var(--s-sp-2);padding:var(--s-sp-5);
  border:1px solid var(--s-line);border-radius:var(--s-r-3);background:var(--s-card);
  color:inherit;text-decoration:none;transition:border-color .16s}
.s-ch__i:hover{border-color:var(--s-accent-edge)}
.s-ch__ic{color:var(--s-accent-tx);margin-bottom:var(--s-sp-2)}
.s-ch__t{font-size:var(--s-fs-4);font-weight:800;letter-spacing:-.01em}
.s-ch__v{font-size:var(--s-fs-2);color:var(--s-ink-mid);overflow-wrap:anywhere}
.s-ch__go{margin-top:var(--s-sp-2);font-size:var(--s-fs-1);font-weight:700;color:var(--s-accent-tx)}

/* Факты о бренде: номер крупной цифрой — он же и разделитель, отдельная линия
   между карточками была бы лишней. */
.s-facts{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-sp-4);margin-top:var(--s-sp-5)}
@media (min-width:760px){.s-facts{grid-template-columns:repeat(2,1fr)}}
.s-fact{display:flex;flex-direction:column;gap:var(--s-sp-2);padding:var(--s-sp-4) 0;
  border-top:1px solid var(--s-line)}
.s-fact__n{font-family:var(--s-mono);font-size:var(--s-fs-1);color:var(--s-accent-tx)}
.s-fact__t{font-weight:700}
.s-fact__d{font-size:var(--s-fs-2);color:var(--s-ink-mid);line-height:1.5}

.s-cta{margin-top:var(--s-sp-8)}
.s-req{margin:var(--s-sp-6) 0 0;font-family:var(--s-mono);font-size:var(--s-fs-1);
  line-height:1.9;color:var(--s-ink-soft)}
.s-req a{color:var(--s-ink-mid)}

/* ── ГАРАНТИЯ И ОФЕРТА ──────────────────────────────────────────────────────
   Три числа вверху — то, за чем на эту страницу приходят: сколько месяцев
   гарантии и сколько дней на возврат. Всё остальное читают единицы, и им
   нужен не дизайн, а сплошной текст, который можно спокойно прочесть. */
.s-warrs{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-sp-3);margin-top:var(--s-sp-5)}
@media (min-width:760px){.s-warrs{grid-template-columns:repeat(3,1fr)}}
.s-warr{display:flex;flex-direction:column;gap:var(--s-sp-2);padding:var(--s-sp-5);
  border:1px solid var(--s-line);border-radius:var(--s-r-3);background:var(--s-card)}
.s-warr__n{font-size:var(--s-fs-5);font-weight:800;letter-spacing:-.02em;color:var(--s-accent-tx)}
.s-warr__l{font-size:var(--s-fs-1);text-transform:uppercase;letter-spacing:.08em;
  color:var(--s-ink-soft)}
.s-warr__d{font-size:var(--s-fs-2);color:var(--s-ink-mid);line-height:1.5}

/* Юридический текст. Ширина строки ограничена 68 символами: оферту читают
   подряд, а не по диагонали, и на широком экране строка в 140 символов теряет
   строку при переводе взгляда. Заголовки внутри — h2 документа, поэтому они
   мельче h1 страницы и не спорят с ним. */
.s-legal{margin-top:var(--s-sp-8);max-width:68ch}
.s-legal h2{margin:var(--s-sp-6) 0 var(--s-sp-2);font-size:var(--s-fs-3);
  font-weight:700;letter-spacing:-.01em}
.s-legal h2:first-child{margin-top:0}
.s-legal p{margin:0 0 var(--s-sp-3);font-size:var(--s-fs-2);line-height:1.65;
  color:var(--s-ink-mid)}
.s-legal ul{margin:0 0 var(--s-sp-3);padding-left:1.2em}
.s-legal li{font-size:var(--s-fs-2);line-height:1.65;color:var(--s-ink-mid);
  margin-bottom:var(--s-sp-2)}
/* Якорь #returns ведут с контактов — заголовок не должен уезжать под шапку. */
.s-legal h2[id]{scroll-margin-top:var(--s-sp-8)}

/* ── ИНСТРУКЦИИ ─────────────────────────────────────────────────────────────
   Список: обложка слева, текст справа — статью выбирают по названию, а
   картинка лишь помогает узнать товар. Плитка с крупным кадром здесь была бы
   витриной, а это справочник. */
.s-ins{display:flex;flex-direction:column;gap:var(--s-sp-3);margin-top:var(--s-sp-5)}
.s-ins__i{display:flex;gap:var(--s-sp-4);padding:var(--s-sp-4);text-decoration:none;
  color:inherit;border:1px solid var(--s-line);border-radius:var(--s-r-3);
  background:var(--s-card);transition:border-color .16s}
.s-ins__i:hover{border-color:var(--s-accent-edge)}
/* Обложка — тот же кадр товара 3:4, что и в каталоге. Квадрат 84x84 с cover
   срезал у него четверть по высоте: у карточек WB и предмет, и подпись жмутся
   к краям, и обрезка отъедала как раз их. Держим пропорцию кадра и вписываем
   целиком, поля закрывает подложка — ровно как на плитке каталога. */
.s-ins__ph{flex:none;width:84px;aspect-ratio:3/4;border-radius:var(--s-r-2);overflow:hidden;
  background:var(--s-photo-bg,var(--s-sunk));display:flex;align-items:center;justify-content:center}
.s-ins__ph img{width:100%;height:100%;object-fit:contain;display:block}
.s-ins__tx{display:flex;flex-direction:column;gap:var(--s-sp-2);min-width:0}
.s-ins__t{font-size:var(--s-fs-3);font-weight:700;letter-spacing:-.01em}
/* Аннотацию режем тремя строками: в списке она подсказка, а не текст статьи. */
.s-ins__s{font-size:var(--s-fs-2);color:var(--s-ink-mid);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.s-ins__cover{margin-top:var(--s-sp-5);border-radius:var(--s-r-3);overflow:hidden;
  background:var(--s-sunk)}
.s-ins__cover img{width:100%;height:auto;display:block}
/* Тело статьи приходит готовым HTML из админки: картинки в нём не знают про
   нашу сетку и без ограничения вылезают за колонку на телефоне. */
.s-ins__body img{max-width:100%;height:auto;border-radius:var(--s-r-2)}
.s-ins__body b,.s-ins__body strong{color:var(--s-ink)}

/* ── ПАРТНЁРЫ ───────────────────────────────────────────────────────────────
   На телефоне карта СВЕРХУ фиксированной высоты, список под ней: карта здесь
   отвечает на «далеко ли», список — на «куда именно». На широком экране они
   рядом, и карта тянется во всю высоту колонки. */
.s-pt{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-sp-4);margin-top:var(--s-sp-5)}
.s-pt__map{order:-1;height:320px;border-radius:var(--s-r-3);overflow:hidden;
  background:var(--s-sunk)}
@media (min-width:900px){
  .s-pt{grid-template-columns:minmax(0,380px) minmax(0,1fr);align-items:start}
  .s-pt__map{order:0;height:min(70vh,620px);position:sticky;top:var(--s-sp-4)}
}
.s-pt__list{display:flex;flex-direction:column;gap:var(--s-sp-3);margin-top:var(--s-sp-3)}
.s-pt__c{display:flex;gap:var(--s-sp-3);width:100%;text-align:left;padding:var(--s-sp-4);
  border:1px solid var(--s-line);border-radius:var(--s-r-3);background:var(--s-card);
  color:inherit;font:inherit;cursor:pointer;transition:border-color .16s}
.s-pt__c:hover{border-color:var(--s-line-ctl)}
.s-pt__c.is-on{border-color:var(--s-accent-edge)}
.s-pt__logo{flex:none;width:44px;height:44px;border-radius:var(--s-r-2);overflow:hidden;
  background:#fff;display:flex;align-items:center;justify-content:center}
.s-pt__logo img{width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box}
.s-pt__b{display:flex;flex-direction:column;gap:var(--s-sp-1);min-width:0}
.s-pt__k{font-size:var(--s-fs-1);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.s-pt__n{font-weight:700}
.s-pt__a{font-size:var(--s-fs-2);color:var(--s-ink-mid)}
.s-pt__m{font-size:var(--s-fs-1);color:var(--s-ink-soft)}
.s-pt__m a{color:var(--s-accent-tx)}
/* Селект города — системный, поэтому явно наследуем цвет: в тёмной теме
   браузер иначе рисует чёрный текст на нашей тёмной подложке. */
.s-pt__city{width:100%;border:0;outline:0;background:none;color:var(--s-ink);
  font:inherit;padding:0}
.s-pt__city option{background:var(--s-card);color:var(--s-ink)}
.s-pt__empty{margin-top:var(--s-sp-6)}

/* ── УЗКИЕ ЭКРАНЫ (320 px) ──────────────────────────────────────────────────
   На 320 px две колонки не выдерживали содержимое: «Предохранители
   автомобильные» и «Линзы в фары» задают min-content шире половины экрана, и
   1fr, вопреки ожиданию, растягивал колонку под самое длинное слово — сетка
   вылезала за экран на 55 px. Лечится парой: minmax(0,1fr) снимает нижнюю
   границу, overflow-wrap разрешает рвать длинное слово.
   Подвал переопределяем здесь, а не в ds.css: тот принадлежит дизайнеру и
   переезжает целиком при каждой его сборке — правка бы потерялась. */
.s-cat__t,.s-cat__n{overflow-wrap:anywhere}
.s-ft__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.s-ft__grid a,.s-ft__h{overflow-wrap:anywhere}
@container s (min-width:900px){ .s-ft__grid{grid-template-columns:2fr 1fr 1fr 1fr} }

/* Переключатель темы в подвале. Сегмент из трёх кнопок требует ~185 px, а
   колонка подвала на 320 px даёт около 140 — сегмент вылезал за экран.
   Отдаём ему всю ширину строки: он и по смыслу не «ещё одна колонка ссылок»,
   а отдельная настройка. Кнопкам разрешаем сжиматься — иначе flex держит их
   по содержимому и переполнение возвращается. */
.s-ft__theme{grid-column:1/-1}
.s-ft__theme .s-theme{width:100%}
.s-ft__theme .s-theme__b{flex:1 1 0;min-width:0}