/* =============================================================================
   CENTERSHIN.RU — дизайн-система
   ---------------------------------------------------------------------------
   Написана с нуля под фирменный стиль (папка «centershin fs») и макет
   главной new4.html. Ключевые решения:
     * фирменные цвета без изменений: синий — основной, оранжево-красный —
       акцент и призыв к действию;
     * заголовки плотным жирным шрифтом, капс — только там, где он несёт
       смысл: призыв к действию и служебные подписи;
     * тёмный герой-блок с подбором поверх фотографии;
     * скруглённые поверхности вместо прямых углов исходного макета:
       плотная товарная сетка с прямыми углами читалась как таблица;
     * форму держит волосяная граница, тень отвечает только за подъём
       при наведении — на светлом фоне одной тени не видно;
     * один видимый фокус на весь сайт и только при работе с клавиатуры.

   Ничего не наследуется от старой темы Stroyka: имена классов свои,
   единый префикс `cs-`. Файл один, порядок разделов = порядок страницы.
   ========================================================================== */

/* ── 1. Токены ───────────────────────────────────────────────────────── */
:root{
  /* фирменные цвета */
  --nv:#00339F;          /* синий, основной */
  --nv-d:#002377;        /* синий тёмный, ховер */
  --nv-l:#2f62d9;
  --nv-50:#f0f4fe;
  --nv-100:#dde6fb;
  --or:#E9432D;          /* красный, акцент */
  --or-d:#cb3420;
  --or-50:#fef0ed;

  /* нейтральные */
  --ink:#101725;
  --ink-2:#3b4453;
  --ink-3:#6c7686;
  --ln:#e4e8ef;
  --ln-2:#eff2f7;
  --bg:#f5f7fa;
  --paper:#fff;
  --surf:#f2f5f9;        /* подложка под фотографией товара */
  --dark:#0b1120;

  /* статусы */
  --ok:#12a150;
  --warn:#e08b16;
  --err:#E9432D;

  /* типографика */
  --font:'HelveticaNeueCyr','Roboto',-apple-system,'Segoe UI',Arial,sans-serif;
  --font-h:'Proxima Nova Cond','Roboto Condensed','Roboto',var(--font);

  /* геометрия */
  --w:1340px;            /* контейнер */
  --gut:16px;

  /*
   * Скругления. В исходном макете углы были прямые — и на плотной
   * товарной сетке это давало ощущение таблицы, а не витрины.
   * Радиус задан шкалой, а не одним числом: панель и кнопка не могут
   * быть скруглены одинаково, иначе кнопка внутри панели выглядит
   * приклеенной к её углу.
   */
  --r:14px;              /* карточки, панели, крупные блоки */
  --r-sm:10px;           /* кнопки, поля, мелкие элементы */
  --r-xs:8px;
  --r-pill:999px;        /* метки, счётчики, круглые кнопки */

  /*
   * Тени слоями и с малой непрозрачностью: одна «мягкая» тень
   * выглядит как размытое пятно, две — как приподнятая карточка.
   */
  --sh-1:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --sh-2:0 2px 4px -2px rgba(16,24,40,.06), 0 12px 24px -8px rgba(16,24,40,.14);
  --sh-3:0 24px 60px -20px rgba(6,12,28,.55);
  --ring:0 0 0 3px rgba(0,51,159,.16);   /* фокус с клавиатуры */
  --t:.18s cubic-bezier(.4,0,.2,1);
}

/* ── 2. База ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.55 var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--nv);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--or)}
/* Телефон не разрывается посреди номера. Браузер считает дефис
   законным местом переноса, и «8-800-550-52-60» в конце строки
   рвался на «8-800-» и «550-52-60» — читается как два разных
   номера. Правило общее: номера на сайте в двух десятках мест,
   и чинить их по одному значило бы однажды пропустить. */
a[href^="tel:"]{white-space:nowrap}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-h);font-weight:800;line-height:1.15;margin:0 0 .6em}
h1{font-size:clamp(28px,3.2vw,36px);letter-spacing:-.02em}
h2{font-size:27px;letter-spacing:-.015em}
h3{font-size:20px;letter-spacing:-.01em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.2em}
table{border-collapse:collapse;width:100%}
::selection{background:var(--nv-100);color:var(--nv-d)}
.cs-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/*
 * hidden обязан побеждать классы.
 *
 * У браузера [hidden] — это всего лишь display:none в таблице стилей
 * по умолчанию, и любой наш класс с display перебивает его. Из-за этого
 * в админке кнопка «Убрать» показывалась у пустого поля с картинкой,
 * а заглушка-подсказка не пряталась после выбора файла.
 */
[hidden]{display:none !important}

/* Один видимый фокус на весь сайт — и только при работе с клавиатуры.
   Раньше обводку рисовал браузер, и на синих кнопках её не было видно. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:0;box-shadow:var(--ring);border-radius:var(--r-xs);
}

/* Цены и количества — моноширинными цифрами: в колонке товаров
   разряды выстраиваются друг под другом, а не пляшут. */
.cs-price,.cs-cart__sum,.cs-totals__row,.cs-totals__grand,.cs-card__total,
.cs-topbar__phone,.cs-search__price{font-variant-numeric:tabular-nums}

.cs-wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
/*
 * Колонка для чтения: новость, статья, акция. В контейнере 1340 px
 * строка текста получается длиной под двести знаков — глаз теряет
 * начало следующей строки. 800 px — это привычные 80–90 знаков.
 *
 * К 800 прибавлены боковые поля: у всего в разметке box-sizing:border-box,
 * и без этой добавки сам текст оказался бы шириной 768 px.
 */
.cs-wrap--read{max-width:calc(800px + var(--gut) * 2)}
/* Только вертикальные отступы. Сокращение margin:36px 0 обнуляло
   боковые auto у .cs-wrap — а секции главной несут оба класса сразу,
   и весь контент ниже шапки прижимался к левому краю. */
.cs-section{margin-top:44px;margin-bottom:44px}
.cs-muted{color:var(--ink-3)}
.cs-nowrap{white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ── 3. Кнопки ───────────────────────────────────────────────────────── */
.cs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 22px;border:0;border-radius:var(--r-sm);
  background:var(--nv);color:#fff;
  font:700 14px/1 var(--font-h);letter-spacing:.01em;
  box-shadow:0 1px 2px rgba(0,51,159,.24);
  transition:background var(--t),color var(--t),box-shadow var(--t),transform var(--t);
}
.cs-btn:hover{background:var(--nv-d);color:#fff;box-shadow:0 4px 12px -2px rgba(0,51,159,.36)}
/* Нажатие должно чувствоваться: кнопка уходит на пиксель вниз
   и теряет подъём — без этого клик на тач-экране «не отзывается». */
.cs-btn:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(0,51,159,.24)}
.cs-btn--accent{background:var(--or);box-shadow:0 1px 2px rgba(233,67,45,.26)}
.cs-btn--accent:hover{background:var(--or-d);box-shadow:0 4px 12px -2px rgba(233,67,45,.4)}
.cs-btn--ghost{background:transparent;color:var(--nv);box-shadow:inset 0 0 0 1.5px var(--nv-100)}
.cs-btn--ghost:hover{background:var(--nv-50);color:var(--nv);box-shadow:inset 0 0 0 1.5px var(--nv)}
.cs-btn--light{background:#fff;color:var(--nv);box-shadow:inset 0 0 0 1px var(--ln),var(--sh-1)}
.cs-btn--light:hover{background:var(--nv-50);color:var(--nv);box-shadow:inset 0 0 0 1px var(--nv-100),var(--sh-1)}
.cs-btn--sm{height:38px;padding:0 16px;font-size:13px;border-radius:var(--r-xs)}
.cs-btn--lg{height:54px;padding:0 32px;font-size:15px;text-transform:uppercase;letter-spacing:.05em}
.cs-btn--block{width:100%}
.cs-btn[disabled]{opacity:.45;pointer-events:none;box-shadow:none}

/* ── 4. Поля ─────────────────────────────────────────────────────────── */
.cs-field{display:flex;flex-direction:column;gap:6px;min-width:0}
/*
 * Поля, идущие друг за другом столбиком (окна, простые формы),
 * сами себя не разделяют: у .cs-field отступ только между подписью
 * и полем. Из-за этого подпись следующего поля оказывалась прижата
 * к предыдущему полю и читалась как подпись к нему.
 *
 * В сетке (.cs-picker__grid) расстояние задаёт gap — там это правило
 * не нужно и мешало бы выравниванию рядов.
 */
form > .cs-field + .cs-field,
form > .cs-field + .cs-hint,
form > .cs-hint + .cs-field,
form > .cs-field + .cs-btn{margin-top:16px}
/* Ряды полей в оформлении: между двумя сетками и между сеткой
   и одиночным полем расстояния не было вовсе. */
form .cs-picker__grid + .cs-picker__grid,
form .cs-picker__grid + .cs-field,
form .cs-field + .cs-picker__grid{margin-top:20px}
.cs-label{font:700 11px/1 var(--font-h);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.cs-input,.cs-select,.cs-textarea{
  width:100%;height:46px;padding:0 14px;
  background:#fff;border:1px solid var(--ln);border-radius:var(--r-sm);
  color:var(--ink);transition:border-color var(--t),box-shadow var(--t);
}
.cs-textarea{height:auto;padding:12px 14px;min-height:104px;resize:vertical}
.cs-input:hover,.cs-select:hover{border-color:#cdd5e2}
/* Кольцо вместо второй рамки внутри: рамка в рамке утолщает поле
   на пиксель, и вся строка формы дёргается при переходе фокуса. */
.cs-input:focus,.cs-select:focus,.cs-textarea:focus{
  outline:0;border-color:var(--nv);box-shadow:var(--ring);
}
.cs-select{
  -webkit-appearance:none;appearance:none;padding-right:38px;cursor:pointer;
  background-repeat:no-repeat;background-position:right 14px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236c7686' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cs-select:disabled{background-color:var(--ln-2);color:var(--ink-3);cursor:not-allowed}
.cs-check{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:14px}
.cs-check input{width:18px;height:18px;accent-color:var(--nv);margin:0;flex:0 0 auto}
/* вариант списком: способ доставки и оплаты занимает всю строку,
   иначе радиокнопки выстраиваются в ряд и подписи наезжают друг на друга */
.cs-check--row{display:flex;width:100%;align-items:flex-start;padding:12px;
  border:1px solid transparent;border-radius:var(--r-sm);transition:background var(--t),border-color var(--t)}
.cs-check--row:hover{background:var(--nv-50)}
.cs-check--row:has(input:checked){background:var(--nv-50);border-color:var(--nv-100)}
.cs-check--row input{margin-top:2px;flex:0 0 auto}
.cs-error{color:var(--err);font-size:13px;margin-top:4px}
.cs-hint{color:var(--ink-3);font-size:12.5px;line-height:1.45}

/* ── 5. Шапка ────────────────────────────────────────────────────────── */
/*
 * Высоту держит сама плашка, а не ссылка внутри неё. Раньше отступ
 * стоял на ссылке — и текст без ссылки (а это обычный случай, поле
 * необязательное) превращал полосу в тонкую линию.
 */
.cs-topline{background:var(--nv-d);color:#fff;text-align:center;font-size:13px;
  letter-spacing:.01em;padding:9px 0;line-height:1.35}
.cs-topline a{color:#fff;text-decoration:none;display:inline-block;
  border-bottom:1px solid rgba(255,255,255,.4)}
.cs-topline a:hover{color:#fff;border-bottom-color:#fff}

.cs-topbar{background:#fff;border-bottom:1px solid var(--ln-2)}
.cs-topbar__in{display:flex;align-items:center;gap:22px;height:44px;font-size:13px;color:var(--ink-2)}
.cs-topbar__spring{margin-left:auto}
.cs-topbar__phone{font:800 18px/1 var(--font-h);color:var(--ink);letter-spacing:-.01em}
.cs-topbar a{color:var(--ink-2)}
.cs-topbar a:hover{color:var(--nv)}
.cs-topbar__in > span{display:inline-flex;align-items:center;gap:6px}
/*
 * Пункт верхней строки с выпадающим списком. Раскрывается по наведению,
 * как разделы в синей полосе, — на десктопе это привычнее клика.
 * Клавиатура доходит сюда табом, поэтому :focus-within тоже раскрывает.
 */
.cs-topbar__drop{position:relative;display:inline-flex;align-items:center}
.cs-topbar__drop > a{display:inline-flex;align-items:center;gap:4px}
.cs-topbar__body{
  position:absolute;left:-10px;top:100%;z-index:130;min-width:210px;
  background:#fff;border:1px solid var(--ln-2);border-radius:var(--r-sm);
  box-shadow:var(--sh-2);padding:6px;
  /* Та же задержка на закрытие, что и у синей полосы: мгновенное
     исчезновение не прощает дрогнувшей руки. */
  opacity:0;visibility:hidden;
  transition:opacity .14s ease, visibility 0s linear .26s;
}
.cs-topbar__drop:hover .cs-topbar__body,
.cs-topbar__drop:focus-within .cs-topbar__body{
  opacity:1;visibility:visible;
  transition:opacity .14s ease, visibility 0s;
}
.cs-topbar__body a{display:block;padding:8px 12px;border-radius:var(--r-xs);font-size:13px}
.cs-topbar__body a:hover{background:var(--nv-50);color:var(--nv)}
.cs-city{
  border:0;background:none;padding:0;
  border-bottom:1px dashed currentColor;cursor:pointer;color:var(--nv);
  font:inherit;line-height:1.2;
}
.cs-city:hover{color:var(--or)}

/* Строка списка в окне «Ваш город». Отдельный класс, а не .cs-city:
   тот — пунктирная кнопка в верхней панели, и в списке она выглядит
   как набор подчёркнутых обрывков. */
/*
 * Окно выбора города.
 *
 * Список в несколько колонок, а не одной лентой: городов сотни, и
 * лентой это экран прокрутки, по которому глаз ищет дольше, чем набрал
 * бы руками. Колонки раскладывает css — количество зависит от ширины
 * окна, разметка одна и та же.
 */
.cs-cities__search{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:18px 24px;background:var(--surf);border-bottom:1px solid var(--ln-2);
}
.cs-cities__lbl{font:700 14px/1 var(--font-h);white-space:nowrap}
.cs-cities__search .cs-input{flex:1 1 260px;min-width:0;max-width:420px}
.cs-cities__eg{color:var(--ink-3);font-size:13px}

.cs-cities__tabs{display:flex;gap:26px;border-bottom:1px solid var(--ln);margin-bottom:20px}
.cs-cities__tab{
  border:0;background:none;padding:0 0 12px;cursor:pointer;
  font:700 15px/1 var(--font-h);color:var(--ink-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--t),border-color var(--t);
}
.cs-cities__tab:hover{color:var(--nv)}
.cs-cities__tab.is-on{color:var(--ink);border-bottom-color:var(--or)}

.cs-cities{columns:5 170px;column-gap:24px}
/* Ссылка не должна разрываться между колонками. */
.cs-citem{
  display:block;break-inside:avoid;padding:6px 8px;margin:0 -8px;
  border-radius:var(--r-xs);color:var(--ink-2);text-decoration:none;
  font-size:14px;line-height:1.35;
}
.cs-citem:hover{background:var(--nv-50);color:var(--nv)}
/* Крупные города набраны жирным — по ним ориентируются в общем списке. */
.cs-citem--pop{font-weight:700;color:var(--ink)}
.cs-citem.is-cur{color:var(--nv);font-weight:700}
.cs-cities__none{columns:1;color:var(--ink-3)}
/* Регион показываем только в результатах поиска: в общем списке
   он превращает две колонки текста в кашу. */
.cs-citem span{color:var(--ink-3);font-weight:400;font-size:13px}

@media(max-width:767.98px){
  .cs-cities__search{padding:14px 16px;gap:10px}
  .cs-cities__lbl,.cs-cities__eg{display:none}
  .cs-cities__search .cs-input{max-width:none}
  .cs-cities{columns:2 130px;column-gap:14px}
}

/*
 * Шапка выше полосы меню по слоям. Полоса меню — z-index:60, и без
 * этого подсказки поиска уходили под неё: первая найденная строка
 * оказывалась закрыта пунктами «Шины · Диски · Аккумуляторы».
 */
.cs-header{background:#fff;position:relative;z-index:70}
.cs-header__in{display:grid;grid-template-columns:230px 1fr auto;align-items:center;gap:26px;padding:16px 0}
/*
 * Логотип задаётся ШИРИНОЙ, а не высотой.
 * Колонка в шапке фиксированная, а глобальное правило img{max-width:100%}
 * подрезает картинку по ширине — при заданной высоте это молча сплющивало
 * логотип по горизонтали. От ширины же высота считается по пропорции
 * файла (300×60), и пропорция сохраняется при любой колонке.
 */
.cs-logo{display:inline-flex;min-width:0}
.cs-logo img{width:100%;max-width:230px;height:auto}

/*
 * Поиск — один элемент, а не три состыкованных.
 * Рамка и скругление живут на обёртке, дети её не рисуют вовсе:
 * иначе на стыках получается двойная линия, а на скруглении —
 * торчащие углы внутренних блоков.
 */
.cs-search{position:relative;min-width:0}
.cs-search__row{
  display:flex;min-width:0;background:#fff;
  border:1px solid var(--ln);border-radius:var(--r-sm);overflow:hidden;
  transition:border-color var(--t),box-shadow var(--t);
}
.cs-search__row:focus-within{border-color:var(--nv);box-shadow:var(--ring)}

/*
 * Подсказки. Обязательно position:absolute: без этого блок остаётся
 * обычным ребёнком строки поиска, встаёт рядом с полем ввода и
 * растаскивает шапку — логотип уезжает влево, меню съезжает вниз.
 * Заметно это только когда в поиске что-то нашлось, поэтому и жило долго.
 */
.cs-search__drop{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:#fff;border:1px solid var(--ln);border-radius:var(--r-sm);
  box-shadow:var(--sh-2);padding:6px;
  max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain;
}
.cs-search__drop[hidden]{display:none}
.cs-search__pick{
  display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px;
  background:var(--nv-50);color:var(--nv);border:0;
  font:700 14px/1 var(--font-h);white-space:nowrap;transition:background var(--t);
}
.cs-search__pick:hover{background:var(--nv-100);color:var(--nv)}
.cs-search__input{flex:1 1 auto;min-width:0;height:48px;border:0;padding:0 16px;background:none}
.cs-search__input:focus{outline:0;box-shadow:none}
.cs-search__go{width:64px;height:48px;background:var(--or);color:#fff;border:0;transition:background var(--t)}
.cs-search__go:hover{background:var(--or-d)}
.cs-actions{display:flex;align-items:center;gap:2px}
.cs-action{display:flex;align-items:center;gap:10px;padding:8px 12px;color:var(--ink);
  border-radius:var(--r-sm);transition:background var(--t),color var(--t)}
.cs-action:hover{color:var(--nv);background:var(--nv-50)}
.cs-action__ico{position:relative;display:flex}
.cs-action__cnt{
  position:absolute;top:-7px;right:-9px;min-width:19px;height:19px;padding:0 5px;
  background:var(--or);color:#fff;border-radius:var(--r-pill);
  box-shadow:0 0 0 2px #fff;
  font:700 11px/19px var(--font);text-align:center;
}
/* подпись и значение — в столбик, иначе «Отследить» и «Заказы»
   слипаются в одну строку */
.cs-action > span:last-child{display:flex;flex-direction:column;gap:1px}
.cs-action__t{display:block;font-size:11px;color:var(--ink-3);line-height:1.1}
.cs-action__v{display:block;font:700 13px/1.2 var(--font-h);white-space:nowrap}

.cs-nav{background:#fff;border-top:1px solid var(--ln-2);box-shadow:var(--sh-1);position:relative;z-index:60}
.cs-nav__in{display:flex;align-items:center;gap:6px;height:60px}
.cs-nav__cat{
  display:inline-flex;align-items:center;gap:10px;padding:0 20px;height:44px;
  background:var(--nv);color:#fff;font:800 13px/1 var(--font-h);
  text-transform:uppercase;letter-spacing:.05em;border:0;cursor:pointer;
  white-space:nowrap;border-radius:var(--r-sm);
  box-shadow:0 1px 2px rgba(0,51,159,.24);transition:background var(--t),box-shadow var(--t);
}
.cs-nav__cat:hover{background:var(--nv-d);color:#fff;box-shadow:0 4px 12px -2px rgba(0,51,159,.36)}
.cs-nav__list{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:2px}
/* Пункты верхней строки в полосе не показываем: на широком экране они
   стоят наверху, рядом с телефоном. Этот список — только для выехавшей
   панели, где верхней строки нет вовсе. */
.cs-nav__list--top{display:none}
/*
 * Пункт меню подсвечивается мягкой плашкой, а не подчёркиванием:
 * полоса снизу привязывает пункт к краю полосы, и на высокой шапке
 * она висит в воздухе.
 */
.cs-nav__link{
  display:inline-flex;align-items:center;gap:8px;padding:0 14px;height:40px;
  color:var(--ink-2);font-weight:600;font-size:14px;border-radius:var(--r-sm);
  transition:background var(--t),color var(--t);
}
.cs-nav__link:hover{color:var(--nv);background:var(--nv-50)}
/* Запись — то, ради чего в сезон приходят на сайт: выделяем цветом,
   иначе пункт теряется между «Услугами» и «Вакансиями». */
.cs-nav__link--hot{color:var(--or)}
.cs-nav__link--hot:hover{color:#fff;background:var(--or)}
.cs-nav__link svg{fill:currentColor;opacity:.6}

/* мега-меню */
/* «Категории» — весь каталог одним списком, как на старом сайте */
/* Обёртка кнопки не должна ломать её высоту: рядом с пунктами меню
   она тянется на всю полосу, как раньше тянулась сама кнопка. */
.cs-cat{position:relative;display:flex;align-items:center;align-self:stretch}
.cs-cat__body{
  display:none;position:absolute;top:calc(100% - 6px);left:0;z-index:120;
  background:#fff;box-shadow:var(--sh-2);border:1px solid var(--ln-2);
  border-radius:var(--r);padding:22px 26px;
  grid-template-columns:repeat(4,minmax(170px,1fr));gap:8px 28px;min-width:760px;
  /* Панель не должна уезжать за нижний край экрана: у аксессуаров
     три десятка групп, и один длинный раздел вытягивал её на два
     экрана — нижние пункты было не достать. Высота ограничена
     окном, остаток прокручивается. */
  max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain;
}
.cs-cat.is-open .cs-cat__body{display:grid}
.cs-cat__t{display:block;font:800 14px/1.3 var(--font-h);color:var(--nv);
  padding:6px 0;border-bottom:1px solid var(--ln-2);margin-bottom:6px}
.cs-cat__l{display:block;padding:6px 8px;margin:0 -8px;color:var(--ink-2);font-size:13px;
  border-radius:var(--r-xs);transition:background var(--t),color var(--t)}
.cs-cat__l:hover{color:var(--nv);background:var(--nv-50)}
.cs-cat__t:hover{color:var(--or)}
/* Стрелка «раскрыть» нужна только в выехавшей панели: на широком экране
   подразделы и так все на виду, столбцами. */
.cs-acc__x{display:none}

.cs-mega{position:relative;display:flex;align-items:center}
/*
 * Выпадающий список раздела.
 *
 * Три вещи, из-за которых он раньше исчезал по дороге к пунктам:
 *
 * 1. Между полосой и списком было четыре пикселя пустоты. Мышь их
 *    пересекала — курсор оказывался ни на пункте, ни на списке,
 *    и всё закрывалось. Теперь список примыкает к полосе вплотную,
 *    а видимый отступ даёт прозрачная рамка сверху: она входит
 *    в область наведения.
 *
 * 2. Закрывался список мгновенно. Дрогнула рука — начинай сначала.
 *    Прячем через visibility с задержкой: четверть секунды список
 *    ещё жив, и вернуться в него успеваешь.
 *
 * 3. Путь наискосок от «Шины» к «Легковым шинам» проходит над «Дисками»,
 *    и по дороге открывался их список вместо нужного. Это лечится
 *    задержкой на открытие — она в скриптах.
 */
.cs-mega__body{
  position:absolute;left:0;top:100%;z-index:60;min-width:260px;
  background:#fff;box-shadow:var(--sh-2);border:1px solid var(--ln-2);border-radius:var(--r);
  padding:8px;
  /* Прозрачная полоса сверху вместо зазора: выглядит так же, но мышь
     по ней проходит, не теряя наведения. */
  border-top:5px solid transparent;background-clip:padding-box;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s ease, transform .14s ease, visibility 0s linear .26s;
}
/* :hover — запасной путь на случай отключённых скриптов; когда скрипты
   работают, открытием управляют они (пауза против случайного задевания). */
html:not(.cs-navjs) .cs-mega:hover .cs-mega__body,
.cs-mega:focus-within .cs-mega__body,
.cs-mega.is-open .cs-mega__body{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .14s ease, transform .14s ease, visibility 0s;
}
.cs-mega__body a{display:block;padding:9px 14px;color:var(--ink-2);font-size:14px;border-radius:var(--r-xs)}
.cs-mega__body a:hover{background:var(--nv-50);color:var(--nv)}
/* Длинный список (группы аксессуаров) — столбцами, а не лентой.
   Число столбцов задано не жёстко: «200px 3» значит «до трёх
   столбцов, но не уже двухсот пикселей». На узком окне столбцов
   станет меньше сами собой, вместо того чтобы сплющить названия. */
.cs-mega__body--wide{columns:200px 3;column-gap:4px;min-width:640px;
  max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain}
.cs-mega__body--wide a{break-inside:avoid}

/*
 * Длинный раздел в «Категориях» занимает всю ширину панели и делится
 * на четыре столбца. Раньше он занимал половину и делился надвое:
 * три десятка групп аксессуаров давали пятнадцать строк, и панель
 * вытягивалась ниже экрана.
 */
.cs-cat__col--wide{grid-column:1 / -1}
.cs-cat__col--wide .cs-cat__sub{columns:170px 4;column-gap:28px}
.cs-cat__col--wide .cs-cat__l{break-inside:avoid}

/* ── 6. Герой с подбором (макет new4) ────────────────────────────────── */
.cs-hero{position:relative;margin:20px 0 36px}

/*
 * Баннер шириной с контент, а не во весь экран: на широком мониторе
 * растянутый макет терял края, и элементы приходилось подгонять под
 * ширину окна.
 *
 * Устройство блока — грид в одну ячейку. В ней лежат друг над другом
 * распорка с пропорциями картинки, сама картинка, затемнение и
 * содержимое. Высота ячейки — большее из двух: пропорции залитого
 * макета и то, что нужно подборщику. Поэтому баннер показывается
 * целиком, а подборщик из него никогда не выпирает.
 *
 * Пропорции стоят на распорке, а не на самом блоке. У блока с
 * aspect-ratio минимальная высота пересчитывается в минимальную ширину,
 * и баннер вылезал за край страницы вместе с горизонтальной прокруткой.
 */
.cs-hero__box{
  position:relative;display:grid;overflow:hidden;
  border-radius:var(--r);background:var(--dark);
  /* minmax(0,1fr), а не колонка по содержимому: иначе ячейка вырастала
     до max-content содержимого (1310 px в блоке шириной 992 px),
     и текст баннера уезжал за правый край. */
  grid-template-columns:minmax(0,1fr);
}
.cs-hero__box > *{grid-area:1/1}
.cs-hero__ratio{width:100%;aspect-ratio:1920/540}
/* Баннер не залит — блок держит высоту одним подборщиком. */
.cs-hero__box--flat .cs-hero__ratio{display:none}
/*
 * Картинка и затемнение вынуты из потока. Иначе высоту ячейки задавали
 * бы они: картинка со своей натуральной высотой растягивала блок вдвое
 * против пропорций, ради которых распорка и заведена.
 */
.cs-hero__img,.cs-hero__sh{position:absolute;inset:0}
.cs-hero__img{width:100%;height:100%;object-fit:cover}

/*
 * Затемнение — только под надписями и только когда они есть.
 * Раньше оно лежало на всей картинке двумя слоями, и готовый макет
 * под ним было не разглядеть.
 */
.cs-hero__sh{
  z-index:1;
  background:linear-gradient(90deg, rgba(8,14,26,.72), rgba(8,14,26,.5) 52%, rgba(8,14,26,0) 82%);
}
.cs-hero__in{
  position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,520px) 1fr;
  gap:40px;align-items:center;padding:36px 30px;
}
/* min(…,100%) — иначе на экране 1024 px колонка уже 490 px,
   и заголовок с описанием вылезали за край баннера. */
.cs-hero__txt{color:#fff;max-width:min(490px,100%);justify-self:start;min-width:0}
/*
 * Готовый макет: надписей нет, в колонке одна кнопка. Посреди картинки
 * она выглядит случайной, поэтому прижимаем её книзу — на уровень
 * «Подобрать шины» в подборщике.
 *
 * 18px — это внутренний отступ .cs-picker__body: низ карточки подборщика
 * и низ колонки совпадают, значит совпадают и кнопки.
 */
.cs-hero__txt--btn{align-self:end;padding-bottom:18px}

/* Картинка для телефона: показывается отдельным блоком под подборщиком. */
.cs-hero__mob{display:none}

/* ── карусель: стрелки и точки (полоса над списком товаров) ─────────── */
.cs-car__ar{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.86);color:var(--ink);
  font:700 22px/1 var(--font-h);box-shadow:var(--sh-1);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s ease;
}
.cs-car__ar--prev{left:14px}
.cs-car__ar--next{right:14px}
.cs-car__ar:hover{background:#fff}
[data-hero]:hover .cs-car__ar,.cs-car__ar:focus-visible{opacity:1}
.cs-car__dots{
  position:absolute;left:0;right:0;bottom:12px;z-index:4;
  display:flex;justify-content:center;gap:8px;
}
.cs-car__dots button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.5);box-shadow:0 0 0 1px rgba(0,0,0,.14);
}
.cs-car__dots button.is-on{background:#fff;width:22px;border-radius:var(--r-pill)}

.cs-kick{
  display:inline-flex;align-items:center;margin:0 0 16px;padding:7px 14px;
  background:var(--or);border-radius:var(--r-pill);
  color:#fff;font:800 11px/1 var(--font-h);letter-spacing:.11em;text-transform:uppercase;
}
.cs-hero__t{margin:0 0 14px;font-size:clamp(32px,4vw,48px);line-height:1.03;
  text-transform:uppercase;color:#fff;letter-spacing:-.02em}
.cs-hero__d{margin:0 0 26px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.8)}

/* подборщик */
.cs-picker{background:#fff;box-shadow:var(--sh-3);border-radius:var(--r);overflow:hidden}
/*
 * Вкладки — сегментированный переключатель: дорожка светлая, активная
 * вкладка белой «таблеткой» поверх. Прежний вариант с подчёркиванием
 * читался как ссылки, а не как выбор одного из трёх.
 */
.cs-picker__tabs{display:flex;gap:4px;background:var(--surf);padding:6px;margin:14px 14px 0;
  border-radius:var(--r-sm)}
.cs-picker__tab{
  flex:1;border:0;background:none;padding:11px 10px;border-radius:var(--r-xs);
  font:700 15px/1 var(--font-h);color:var(--ink-3);
  transition:var(--t);
}
.cs-picker__tab:hover{color:var(--nv)}
.cs-picker__tab.is-on{background:#fff;color:var(--nv);box-shadow:var(--sh-1)}
.cs-picker__body{padding:18px}
.cs-picker__mode{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.cs-picker__mode label{font-size:13px;font-weight:600;color:var(--ink-3);cursor:pointer;
  transition:color var(--t)}
.cs-picker__mode label.is-on{color:var(--nv)}
.cs-switch{
  position:relative;width:46px;height:26px;flex:0 0 46px;border:0;padding:0;
  background:var(--nv);border-radius:var(--r-pill);transition:background .2s;
}
.cs-switch.is-on{background:var(--or)}
.cs-switch i{position:absolute;top:4px;left:4px;width:18px;height:18px;background:#fff;
  border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s}
.cs-switch.is-on i{transform:translateX(20px)}
/* По вертикали отступ больше, чем по горизонтали: подпись поля —
   мелкие прописные, и с зазором в двенадцать пикселей она липнет
   к полю предыдущего ряда, а не к своему. */
.cs-picker__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 12px}
.cs-picker__grid--3{grid-template-columns:repeat(3,1fr)}
.cs-picker__wide{grid-column:1/-1}
/* Подбор во всплывающем окне: без вкладок и переключателя,
   поэтому и рамка вокруг тела лишняя. */
.cs-picker--car{box-shadow:none;background:none;border-radius:0}
.cs-picker--car .cs-picker__body{padding:0}
/* В окне у блока нет своих полей, поэтому вкладкам отступы
   главной не нужны — только зазор до формы под ними. */
.cs-picker--car .cs-picker__tabs{margin:0 0 16px}
.cs-picker__pane{display:none}
.cs-picker__pane.is-on{display:block}
/* Пустая строка под сообщением о загрузке держится всегда — так блок
   не подпрыгивает, пока грузится справочник. */
.cs-picker__note{min-height:18px;margin-top:10px}
/*
 * На широком экране подборщик лежит поверх баннера и задаёт ему высоту.
 * Панели с разным числом полей меняли её при каждом переключении, и
 * баннер прыгал. Кладём панели стопкой в одну ячейку сетки: блок
 * занимает высоту самой высокой панели и остаётся таким всегда.
 * Ниже 992 px подборщик стоит отдельным блоком — там пусть сжимается.
 */
@media(min-width:992px){
  .cs-picker:not(.cs-picker--car) .cs-picker__panes{display:grid}
  .cs-picker:not(.cs-picker--car) .cs-picker__panes > .cs-picker__pane{
    grid-area:1/1;display:block;visibility:hidden;pointer-events:none;
  }
  .cs-picker:not(.cs-picker--car) .cs-picker__panes > .cs-picker__pane.is-on{
    visibility:visible;pointer-events:auto;
  }
}

/* ── 7. Акции ────────────────────────────────────────────────────────── */
.cs-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px}
.cs-head__t{margin:0;font-size:29px;letter-spacing:-.015em}
.cs-head__t b{color:var(--or);font-weight:800}
.cs-head__sub{margin:4px 0 0;color:var(--ink-3);font-size:14px}
.cs-head__sp{margin-left:auto;display:flex;gap:8px;align-items:center;flex:0 0 auto}
.cs-head__sp .cs-btn{white-space:nowrap}
.cs-arr{
  width:40px;height:40px;border:0;background:#fff;color:var(--nv);border-radius:50%;
  box-shadow:var(--sh-1);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--t),color var(--t),box-shadow var(--t);
}
.cs-arr:hover{background:var(--nv);color:#fff;box-shadow:var(--sh-2)}
.cs-arr svg{fill:currentColor}

.cs-promos{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
/* Новости — ровно по четыре в ряд. У акций плитки мельче и их бывает
   пять; у новости есть заголовок в две строки, и на пятой колонке
   он рассыпается по слову на строку. */
.cs-promos--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:991.98px){.cs-promos--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cs-promo{position:relative;background:#fff;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--ln-2);box-shadow:var(--sh-1);display:flex;flex-direction:column;
  transition:box-shadow var(--t),transform var(--t),border-color var(--t)}
.cs-promo:hover{box-shadow:var(--sh-2);transform:translateY(-3px);border-color:transparent}
.cs-promo__pic{position:relative;aspect-ratio:16/9;background:var(--nv);overflow:hidden}
.cs-promo__pic img{width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.cs-promo:hover .cs-promo__pic img{transform:scale(1.05)}
/* акция без картинки: вместо пустого прямоугольника — её название */
.cs-promo__pic--text{display:flex;align-items:center;padding:20px}
.cs-promo__ph{color:#fff;font:700 15px/1.35 var(--font-h)}
.cs-promo__badge{
  position:absolute;top:12px;left:12px;z-index:2;padding:6px 11px;border-radius:var(--r-pill);
  background:var(--or);color:#fff;font:800 10px/1 var(--font-h);
  letter-spacing:.08em;text-transform:uppercase;box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.cs-promo__badge--nv{background:var(--nv)}
/*
 * Без картинки плашке не на чем лежать: она оставалась в левом верхнем
 * углу карточки и накрывала заголовок. Если текст идёт первым —
 * ставим плашку в поток, перед заголовком.
 */
.cs-promo__body:first-child .cs-promo__badge{
  position:static;align-self:flex-start;margin-bottom:10px;box-shadow:none;
}
.cs-promo__body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1 1 auto}
.cs-promo__t{margin:0 0 7px;font:700 15px/1.3 var(--font-h);color:var(--nv)}
.cs-promo__t a{color:inherit}
.cs-promo__d{margin:0 0 14px;font-size:13px;color:var(--ink-3);line-height:1.45}
.cs-promo__more{
  margin-top:auto;align-self:flex-start;color:var(--or);font-weight:700;font-size:13px;
  border-bottom:1px solid transparent;transition:border-color var(--t)
}
.cs-promo:hover .cs-promo__more{border-bottom-color:currentColor}

/* ── 7а. Услуги, марки, цифры ────────────────────────────────────────── */
/*
 * Плитка услуги: подпись сверху, картинка снизу — так на образце,
 * и так честнее: название читается раньше, чем загрузится картинка.
 */
.cs-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.cs-tile{
  display:flex;flex-direction:column;gap:12px;
  background:#fff;border:1px solid var(--ln-2);border-radius:var(--r);
  box-shadow:var(--sh-1);padding:16px;color:var(--ink);
  transition:box-shadow var(--t),transform var(--t),border-color var(--t);
}
.cs-tile:hover{box-shadow:var(--sh-2);transform:translateY(-3px);border-color:transparent;color:var(--nv)}
.cs-tile__t{font:700 14px/1.3 var(--font-h)}
.cs-tile__pic{
  display:block;width:100%;aspect-ratio:4/3;object-fit:contain;
  background:var(--surf);border-radius:var(--r-sm);margin-top:auto;
}
.cs-tile__pic--text{
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:10px;font-size:12px;line-height:1.35;color:var(--ink-3);
}

/* Выбор того, что подбираем: четыре карточки без картинок. */
.cs-kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.cs-kind{
  display:flex;flex-direction:column;gap:8px;min-height:150px;
  background:#fff;border:1px solid var(--ln-2);border-radius:var(--r);
  box-shadow:var(--sh-1);padding:22px;color:var(--ink);
  transition:box-shadow var(--t),transform var(--t),border-color var(--t);
}
.cs-kind:hover{box-shadow:var(--sh-2);transform:translateY(-3px);border-color:transparent}
.cs-kind__t{font:800 18px/1.2 var(--font-h)}
.cs-kind__d{font-size:13px;line-height:1.45;color:var(--ink-3)}
.cs-kind__go{margin-top:auto;font:700 13px/1 var(--font-h);color:var(--or)}

/* Марки автомобилей: колонки, а не сетка — тридцать коротких слов
   сеткой превращаются в рябь. */
.cs-makes{
  columns:7 130px;column-gap:24px;
  background:#fff;border:1px solid var(--ln-2);border-radius:var(--r);
  box-shadow:var(--sh-1);padding:22px 24px;
}
.cs-makes__l{
  display:block;break-inside:avoid;padding:6px 8px;margin:0 -8px;
  border-radius:var(--r-xs);color:var(--ink-2);font-size:14px;line-height:1.35;
}
.cs-makes__l:hover{background:var(--nv-50);color:var(--nv)}

/* Поиск по длинному списку: марок несколько сотен, глазами это полминуты. */
.cs-findbox{
  background:#fff;border:1px solid var(--ln-2);border-radius:var(--r);
  box-shadow:var(--sh-1);padding:16px 20px;margin-bottom:16px;max-width:520px;
}
.cs-findbox .cs-input{width:100%}

/*
 * Шапка выбранной машины: логотип марки слева, фотография справа.
 * Ни то, ни другое не обязательно — справочник отдаёт картинки не всем,
 * и блок обязан выглядеть законченным без них.
 */
.cs-car{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--ln-2);border-radius:var(--r);
  box-shadow:var(--sh-1);padding:20px 24px;
}
.cs-car__logo{
  flex:0 0 auto;width:76px;height:76px;display:flex;align-items:center;justify-content:center;
  background:var(--bg);border-radius:var(--r-sm);padding:10px;
}
.cs-car__logo img{max-width:100%;max-height:100%;object-fit:contain}
.cs-car__body{flex:1 1 260px;min-width:0}
.cs-car__t{margin:0;font-size:clamp(22px,2.4vw,30px);line-height:1.15}
.cs-car__d{margin:8px 0 0;color:var(--ink-3);font-size:15px;line-height:1.5}
.cs-car__pic{flex:0 0 auto;width:min(320px,100%)}
.cs-car__pic img{width:100%;height:auto;object-fit:contain;border-radius:var(--r-sm)}

@media(max-width:767.98px){
  .cs-car{padding:16px;gap:14px}
  .cs-car__logo{width:56px;height:56px}
  .cs-car__pic{width:100%;order:3}
}

/* Параметры дисков: четыре числа, из-за которых диск «по размеру»
   не встаёт на ступицу. */
.cs-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:16px 0 0}
.cs-specs__i{background:var(--bg);border-radius:var(--r-sm);padding:14px 16px}
.cs-specs__k{font:700 14px/1.3 var(--font-h);color:var(--ink)}
.cs-specs__k span{display:block;margin-top:3px;font:400 12px/1.4 var(--font);color:var(--ink-3)}
.cs-specs__v{
  margin:8px 0 0;font:800 18px/1.2 var(--font-h);color:var(--nv);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}

/*
 * Поколения. Фотография здесь — не украшение: своё поколение человек
 * узнаёт в лицо, а год выпуска помнит приблизительно.
 */
.cs-gens{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.cs-gen{
  display:block;background:#fff;border:1px solid var(--ln-2);border-radius:var(--r);
  box-shadow:var(--sh-1);padding:14px 16px 16px;
  transition:box-shadow var(--t),border-color var(--t),transform var(--t);
}
.cs-gen:hover{box-shadow:var(--sh-2);border-color:var(--nv-100);transform:translateY(-2px)}
.cs-gen__pic{
  display:flex;align-items:center;justify-content:center;height:120px;margin-bottom:10px;
  color:var(--nv);
}
.cs-gen__pic img{max-width:100%;max-height:120px;object-fit:contain}
.cs-gen__t{display:block;font:700 16px/1.2 var(--font-h);color:var(--nv)}
.cs-gen:hover .cs-gen__t{color:var(--nv-d)}
.cs-gen__y{display:block;margin-top:5px;font-size:13px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}

@media(max-width:575.98px){
  .cs-gens{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cs-gen{padding:10px 11px 12px}
  .cs-gen__pic{height:84px}
  .cs-gen__pic img{max-height:84px}
  .cs-gen__t{font-size:14px}
}

/*
 * Комплектации. Плитками, а не строкой чипов: у каждой две строки —
 * название и мотор, — и в чип это не помещается.
 */
.cs-mods{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1px;background:#fff;border:1px solid var(--ln-2);
  border-radius:var(--r-sm);overflow:hidden;margin-top:14px;
}
/*
 * Разделители рисуем тенью самой плитки, а не просветом контейнера:
 * при просвете хвост последнего ряда остаётся серым — будто там ещё
 * что-то есть, только не загрузилось.
 */
.cs-mod{display:block;padding:14px 16px;background:#fff;
  box-shadow:0 0 0 1px var(--ln-2);transition:background var(--t)}
.cs-mod:hover{background:var(--nv-50)}
.cs-mod__t{display:block;font-weight:700;color:var(--ink)}
.cs-mod:hover .cs-mod__t{color:var(--nv)}
.cs-mod__d{display:block;margin-top:4px;font-size:13px;color:var(--ink-3)}

/* Заголовок группы топлива — с точкой, как на приборной панели. */
.cs-block__t--dot{display:flex;align-items:center;gap:10px}
.cs-block__t--dot::before{
  content:'';width:11px;height:11px;border-radius:50%;flex:0 0 auto;
  background:var(--or);box-shadow:0 0 0 3px var(--or-50);
}

/*
 * Заводские размеры и всё остальное.
 *
 * Цветом, а не только словами: человек читает страницу глазами по
 * диагонали, а решение «встанет ли это на гарантийную машину» он должен
 * принять до того, как нажмёт на размер.
 */
.cs-sizes__h{display:flex;align-items:center;gap:8px;margin:0 0 4px;
  font:800 15px/1.2 var(--font-h)}
/* Точка только там, где она что-то значит: без модификатора она
   пустая и оставляет непонятный отступ перед заголовком. */
.cs-sizes__h--ok::before,
.cs-sizes__h--warn::before{content:'';width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.cs-sizes__h--ok::before{background:var(--ok);box-shadow:0 0 0 3px rgba(18,161,80,.16)}
.cs-sizes__h--warn::before{background:var(--warn);box-shadow:0 0 0 3px rgba(224,139,22,.18)}

.cs-chip--ok{border-color:rgba(18,161,80,.45)}
.cs-chip--ok:hover{border-color:var(--ok);background:rgba(18,161,80,.08)}
.cs-chip--ok b{color:var(--ok)}
.cs-chip--warn{border-color:rgba(224,139,22,.45)}
.cs-chip--warn:hover{border-color:var(--warn);background:rgba(224,139,22,.1)}
.cs-chip--warn b{color:#a8660c}

/* Про саму машину: топливо, двигатель, мощность. Строками, а не
   плитками: значения короткие, и плитка под «Бензин» выглядит пустой. */
.cs-carinfo{margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:0 28px}
.cs-carinfo__i{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--ln-2);
}
.cs-carinfo__i dt{color:var(--ink-3);font-size:14px;flex:0 0 auto}
.cs-carinfo__i dd{margin:0;font-weight:700;text-align:right;overflow-wrap:anywhere}

/* Компания в цифрах. */
.cs-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px}
.cs-fact__v{
  font:800 40px/1 var(--font-h);color:var(--nv);letter-spacing:-.02em;
  border-bottom:2px solid var(--or);padding-bottom:10px;margin-bottom:12px;
  font-variant-numeric:tabular-nums;
}
/* Приставка и единица измерения — мельче числа: важна цифра. */
.cs-fact__x{font-size:20px;letter-spacing:0}
.cs-fact__l{font-size:13px;line-height:1.45;color:var(--ink-3)}

@media(max-width:991.98px){
  .cs-makes{columns:4 120px}
}
@media(max-width:767.98px){
  .cs-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cs-makes{columns:2 110px;padding:16px}
  .cs-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .cs-fact__v{font-size:30px}
}

/* Услуги списком и вакансии. */
.cs-svc{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.cs-svc__i{
  display:flex;background:#fff;
  border:1px solid var(--ln-2);border-radius:var(--r);box-shadow:var(--sh-1);
  padding:18px;color:var(--ink);
  transition:box-shadow var(--t),transform var(--t),border-color var(--t);
}
.cs-svc__i:hover{box-shadow:var(--sh-2);transform:translateY(-3px);border-color:transparent}
/* Фото на странице услуги. Растянутое во всю колонку оно занимало
   пол-экрана, а у самих снимков сверху и снизу белые поля — выходила
   пустая полоса. Поэтому окно фиксированное и квадратное, а кадр
   обрезается по центру: поля уходят, предмет остаётся. */
.cs-svc__img{display:block;width:100%;max-width:340px;aspect-ratio:1/1;
  object-fit:cover;object-position:center;background:var(--surf);
  margin:18px 0;border-radius:var(--r)}
@media (max-width:560px){.cs-svc__img{max-width:none}}
.cs-svc__b{display:flex;flex:1 1 auto;flex-direction:column;gap:6px;min-width:0}
.cs-svc__t{font:700 16px/1.25 var(--font-h)}
.cs-svc__d{font-size:13px;line-height:1.45;color:var(--ink-3)}
.cs-svc__p{font:800 16px/1 var(--font-h);color:var(--nv);margin-top:2px}
.cs-svc__p .cs-muted{font-weight:400;font-size:13px}

.cs-vac{display:flex;flex-direction:column;gap:14px}
.cs-vac__i{
  background:#fff;border:1px solid var(--ln-2);border-radius:var(--r);
  box-shadow:var(--sh-1);padding:22px 24px;
  transition:box-shadow var(--t),border-color var(--t);
}
.cs-vac__i:hover{box-shadow:var(--sh-2);border-color:transparent}
.cs-vac__t{margin:0 0 6px;font-size:20px}
.cs-vac__t a{color:var(--ink)}
.cs-vac__t a:hover{color:var(--nv)}
.cs-vac__pay{font:800 17px/1.2 var(--font-h);color:var(--nv);font-variant-numeric:tabular-nums}
.cs-vac__d{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.cs-vac__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

@media(max-width:991.98px){
  .cs-vac__i .cs-layout{grid-template-columns:1fr}
}

/* ── 7б. О компании ──────────────────────────────────────────────────── */
.cs-about__hero{position:relative;overflow:hidden;background:var(--dark);margin-bottom:8px}
.cs-about__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-about__sh{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,14,26,.94),rgba(8,14,26,.66) 55%,rgba(8,14,26,.34))}
.cs-about__in{position:relative;padding:64px 30px;color:#fff;max-width:var(--w)}
.cs-about__t{margin:0 0 14px;color:#fff;font-size:clamp(30px,4vw,46px);
  line-height:1.05;letter-spacing:-.02em}
.cs-about__d{margin:0;max-width:620px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.82)}

/*
 * Текстовые блоки: карточка во всю ширину, а строка внутри — короче.
 * Ограничивать саму карточку нельзя: белый прямоугольник на половину
 * экрана выглядит обрезанным. Ограничиваем содержимое — строка длиной
 * в полтора экрана всё равно не читается, как её ни набирай.
 */
.cs-about__text{margin-top:24px}
.cs-about__text > *{max-width:820px}

.cs-about__quote{
  background:var(--nv);color:#fff;border-radius:var(--r);padding:36px 40px;
}
.cs-about__qt{font:800 13px/1 var(--font-h);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:14px}
.cs-about__quote p{margin:0;max-width:900px;font:600 20px/1.55 var(--font-h)}

.cs-adv{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.cs-adv__i{
  background:#fff;border:1px solid var(--ln-2);border-radius:var(--r);
  box-shadow:var(--sh-1);padding:24px;
}
.cs-adv__pic{width:52px;height:52px;object-fit:contain;margin-bottom:14px}
/* Номер вместо картинки: карточка не должна начинаться с пустоты. */
.cs-adv__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;margin-bottom:14px;
  background:var(--nv-50);color:var(--nv);font:800 18px/1 var(--font-h);
}
.cs-adv__t{margin:0 0 8px;font-size:17px}
.cs-adv__d{margin:0;font-size:14px;line-height:1.55;color:var(--ink-3)}

/* История: год слева, событие справа, вертикальная нить между ними. */
.cs-story{list-style:none;margin:0;padding:0;position:relative}
.cs-story::before{content:'';position:absolute;left:97px;top:8px;bottom:8px;
  width:2px;background:var(--ln)}
.cs-story__i{display:grid;grid-template-columns:80px 36px 1fr;align-items:start;
  gap:0 16px;padding:0 0 26px}
.cs-story__y{font:800 20px/1.2 var(--font-h);color:var(--nv);text-align:right;
  font-variant-numeric:tabular-nums}
.cs-story__i::after{content:'';grid-column:2;width:13px;height:13px;border-radius:50%;
  background:var(--or);box-shadow:0 0 0 4px #fff;margin:5px auto 0}
.cs-story__b{grid-column:3;grid-row:1}
.cs-story__t{margin:0 0 6px;font-size:17px}
.cs-story__d{margin:0;font-size:14px;line-height:1.55;color:var(--ink-3)}

.cs-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.cs-gal__i{margin:0;background:#fff;border:1px solid var(--ln-2);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-1)}
.cs-gal__i img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cs-gal__i figcaption{padding:12px 16px;font-size:13px;color:var(--ink-3)}

.cs-about__cta{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--ln-2);border-radius:var(--r);
  box-shadow:var(--sh-1);padding:26px 28px;
}
.cs-about__cta-b{display:flex;gap:10px;flex-wrap:wrap}

@media(max-width:767.98px){
  .cs-about__in{padding:40px 16px}
  .cs-about__quote{padding:24px}
  .cs-about__quote p{font-size:17px}
  .cs-story::before{left:9px}
  .cs-story__i{grid-template-columns:26px 1fr;gap:0 14px}
  .cs-story__y{grid-column:2;text-align:left;font-size:16px;margin-bottom:4px}
  .cs-story__i::after{grid-column:1;grid-row:1;margin-top:6px}
  .cs-story__b{grid-column:2;grid-row:2}
}

/* ── 7в. Запись на шиномонтаж ────────────────────────────────────────── */
/*
 * Одна карточка на всю ширину: шапка с адресом, лента дней, сетка времени.
 * Раскладку «дни слева колонкой» пришлось убрать — двадцать один день
 * в вертикальном списке отодвигал время за нижний край экрана.
 */
.cs-book{
  background:#fff;border:1px solid var(--ln-2);border-radius:var(--r);
  box-shadow:var(--sh-1);overflow:hidden;
}
.cs-book__head{
  padding:26px 24px 22px;text-align:center;background:var(--bg);
  border-bottom:1px solid var(--ln-2);
}
.cs-book__title{
  margin:0;font:800 22px/1.2 var(--font-h);text-transform:uppercase;
  letter-spacing:.02em;color:var(--ink);
}
.cs-book__where{margin:10px 0 0;color:var(--ink-3);font-size:15px}
.cs-book__body{padding:20px 24px 26px}
.cs-book__step{
  font:700 16px/1.3 var(--font-h);color:var(--ink);margin:0 0 12px;
}
.cs-book__step + *{margin-bottom:22px}

/* Лента дней. Полоса прокрутки видна намеренно: без неё не догадаться,
   что дальше пятницы есть ещё две недели. */
.cs-days{
  display:flex;gap:10px;overflow-x:auto;padding:2px 2px 12px;
  scrollbar-color:var(--ink-3) var(--ln-2);
}
.cs-days::-webkit-scrollbar{height:8px}
.cs-days::-webkit-scrollbar-track{background:var(--ln-2);border-radius:4px}
.cs-days::-webkit-scrollbar-thumb{background:var(--ink-3);border-radius:4px}
.cs-day{
  flex:0 0 auto;min-width:96px;padding:10px 14px 12px;text-align:center;
  border:1px solid var(--ln);border-radius:var(--r-sm);background:#fff;
  cursor:pointer;transition:border-color var(--t),background var(--t),color var(--t);
}
.cs-day:hover:not(.is-off){border-color:var(--or);color:var(--or)}
.cs-day.is-on,.cs-day.is-on:hover{background:var(--or);border-color:var(--or);color:#fff}
.cs-day.is-on .cs-day__w{color:rgba(255,255,255,.85)}
.cs-day.is-off{opacity:.5;cursor:not-allowed}
.cs-day__w{display:block;font:400 13px/1 var(--font);color:var(--ink-3);margin-bottom:6px}
.cs-day.is-on .cs-day__d,.cs-day:hover:not(.is-off) .cs-day__d{color:inherit}
.cs-day__d{
  display:block;font:800 18px/1 var(--font-h);color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* Сетка времени. Свободное — красной рамкой, занятое — серым и зачёркнутым:
   так занятость читается с одного взгляда, без легенды. */
.cs-slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.cs-slot{
  height:38px;border:1px solid var(--or);border-radius:var(--r-sm);background:#fff;
  font:400 15px/1 var(--font);color:var(--or);cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.cs-slot:hover:not(:disabled){background:var(--or);color:#fff}
.cs-slot.is-on{background:var(--or);border-color:var(--or);color:#fff;font-weight:700}
.cs-slot.is-busy{
  background:var(--ln-2);color:var(--ink-3);border-color:var(--ln-2);
  cursor:default;text-decoration:line-through;
}

.cs-book__form{margin-top:26px;border-top:1px solid var(--ln-2);padding-top:22px}
.cs-book__chosen{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;
  padding:12px 16px;background:var(--or-50);border-radius:var(--r-sm);font-size:15px;
}
.cs-book__reset{border:0;background:none;padding:0;color:var(--or);cursor:pointer;
  font:inherit;border-bottom:1px dashed currentColor}
.cs-book__reset:hover{color:var(--or-d)}

@media(max-width:991.98px){
  .cs-slots{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:575.98px){
  .cs-book__head{padding:20px 16px 18px}
  .cs-book__title{font-size:18px}
  .cs-book__body{padding:16px}
  .cs-slots{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cs-day{min-width:78px;padding:8px 10px 10px}
}

/* ── 7г. Разделы каталога ────────────────────────────────────────────── */
/*
 * Плитка раздела — это обещание, за которым должен быть товар. Поэтому
 * на ней написано, сколько позиций внутри, и перечислены подразделы:
 * человеку чаще нужны «Легковые шины», а не «Шины вообще».
 */
.cs-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.cs-cat-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--ln-2);
  border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden;
  transition:box-shadow var(--t),border-color var(--t),transform var(--t);
}
.cs-cat-card:hover{box-shadow:var(--sh-2);border-color:var(--nv-100);transform:translateY(-2px)}
.cs-cat-card__pic{
  display:flex;align-items:center;justify-content:center;height:132px;
  background:linear-gradient(180deg,var(--nv-50),#fff);color:var(--nv);
  border-bottom:1px solid var(--ln-2);
}
.cs-cat-card__pic img{max-height:104px;max-width:100%;width:auto;object-fit:contain}
.cs-cat-card__body{display:flex;flex-direction:column;flex:1 1 auto;padding:16px 18px 18px}
.cs-cat-card__t{margin:0;font-size:18px;line-height:1.25}
.cs-cat-card__t a{color:var(--ink)}
.cs-cat-card__t a:hover{color:var(--nv)}
.cs-cat-card__n{margin-top:4px;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cs-cat-card__list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.cs-cat-card__list a{
  display:block;padding:5px 8px;margin-left:-8px;border-radius:var(--r-xs);
  font-size:14px;color:var(--ink-2);
}
.cs-cat-card__list a:hover{background:var(--nv-50);color:var(--nv)}
.cs-cat-card__go{
  display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:14px;
  font:700 14px/1 var(--font-h);color:var(--or);
}
.cs-cat-card__go:hover{color:var(--or-d)}

@media(max-width:575.98px){
  .cs-cats{grid-template-columns:1fr;gap:12px}
  .cs-cat-card{flex-direction:row}
  .cs-cat-card__pic{flex:0 0 104px;height:auto;border-bottom:0;border-right:1px solid var(--ln-2)}
  .cs-cat-card__pic svg{width:44px;height:44px}
}

/* ── 8. Карточка товара ──────────────────────────────────────────────── */
.cs-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.cs-products--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1199.98px){.cs-products--4{grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}}
.cs-products--5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1199.98px){.cs-products--5{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}
.cs-products--6{grid-template-columns:repeat(auto-fill,minmax(195px,1fr))}

.cs-card{
  background:#fff;border-radius:var(--r);
  /* Тень на светло-сером фоне почти не видна, и сетка карточек
     расплывается в одно полотно. Волосяная граница держит форму,
     тень отвечает только за подъём при наведении. */
  border:1px solid var(--ln-2);box-shadow:var(--sh-1);
  display:flex;flex-direction:column;
  position:relative;transition:box-shadow var(--t),transform var(--t),border-color var(--t);
}
.cs-card:hover{box-shadow:var(--sh-2);transform:translateY(-3px);border-color:transparent}
.cs-card__marks{position:absolute;top:12px;left:12px;z-index:2;display:flex;flex-direction:column;gap:6px}

/*
 * Значки сезона — те же, что на старом сайте: снежинка, солнце,
 * половина на половину и красный треугольник у шипованных.
 *
 * Это не прихоть: покупатель шин узнаёт их с одного взгляда, они стоят
 * на ценниках и в прайсах, и рисовать вместо них свои — значит заставить
 * человека заново разбираться, что означает картинка.
 *
 * Один файл-спрайт на все четыре: четыре отдельных запроса ради значков
 * по паре килобайт — плохая сделка, а спрайт лежит в кеше браузера
 * с первой открытой страницы.
 */
.cs-mark{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#fff;box-shadow:var(--sh-1);
}
.cs-mark i{
  display:block;width:20px;height:20px;
  background:url(/assets/img/icon-types.png) no-repeat 0 0;
}
.cs-mark--winter i{background-position:0 0}
.cs-mark--summer i{background-position:0 -20px}
.cs-mark--stud   i{background-position:0 -40px}
.cs-mark--all    i{background-position:0 -60px}

/* Тот же значок в строке текста — рядом с названием и в характеристиках. */
.cs-mark--inline{
  display:inline-block;vertical-align:-4px;width:20px;height:20px;
  background:url(/assets/img/icon-types.png) no-repeat 0 0;
  border-radius:0;box-shadow:none;
}
.cs-mark--inline.cs-mark--winter{background-position:0 0}
.cs-mark--inline.cs-mark--summer{background-position:0 -20px}
.cs-mark--inline.cs-mark--stud{background-position:0 -40px}
.cs-mark--inline.cs-mark--all{background-position:0 -60px}

/*
 * Фотография на белом.
 *
 * Подложка была светло-серой, чтобы товар не «висел» без границ. Но
 * снимки приходят с белым фоном и не всегда обрезаны ровно — серое
 * проступало прямоугольником вокруг шины. Белое на белом честнее,
 * форму карточки держит её собственная граница.
 *
 * 4:3, а не квадрат: у шины и диска силуэт круглый, в квадрате сверху
 * и снизу остаётся пустое поле, и карточка вырастает без причины.
 */
/*
 * Место под фотографию — одной высоты у всех карточек, независимо
 * от ширины колонки. Раньше высота считалась от ширины (aspect-ratio),
 * и в разных сетках снимки выходили разного размера.
 *
 * Высота нарочно небольшая: снимки приходят от разных поставщиков,
 * и мелкие среди них есть. Крупный кадр уменьшить не жалко, а мелкий,
 * растянутый до большой рамки, расплывается — лучше общий размер
 * поменьше и все снимки чёткие.
 */
.cs-card__pic{height:190px;padding:14px;display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:var(--r) var(--r) 0 0}
.cs-card__pic img{width:100%;height:100%;object-fit:contain;
  transition:transform .35s cubic-bezier(.4,0,.2,1)}
.cs-card:hover .cs-card__pic img{transform:scale(1.04)}
/* На узких экранах колонка уже, и место под снимок соразмерно меньше:
   иначе плитка становится картинкой с подписью. */
@media(max-width:1199.98px){.cs-card__pic{height:170px}}
@media(max-width:767.98px){.cs-card__pic{height:150px;padding:10px}}
@media(max-width:359.98px){.cs-card__pic{height:130px}}
.cs-card__body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1 1 auto;gap:9px}
.cs-badges{display:flex;flex-wrap:wrap;gap:6px}
/*
 * В сетке метки уезжают на фотографию. В потоке они сдвигали название
 * вниз только у части карточек — названия, цены и кнопки в ряду
 * переставали стоять на одной линии, и сетка выглядела сломанной.
 * На странице товара метки остаются в потоке: там карточка одна.
 */
.cs-card .cs-badges{
  position:absolute;top:12px;right:12px;z-index:2;
  justify-content:flex-end;max-width:74%;
}
.cs-badge{
  padding:5px 10px;border-radius:var(--r-pill);
  font:700 10px/1 var(--font-h);letter-spacing:.05em;
  text-transform:uppercase;color:#fff;background:var(--ink-3);
}
.cs-badge--sale{background:var(--or)}
.cs-badge--hot{background:var(--nv)}
.cs-badge--new{background:var(--ok)}
.cs-badge a{color:#fff}
.cs-card__name{font-size:14px;line-height:1.4;color:var(--ink);font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cs-card__name a{color:inherit}
.cs-card__name a:hover{color:var(--nv)}
.cs-stock{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
/* Точка вместо слова «наличие»: строка короче, а состояние видно
   боковым зрением при просмотре сетки. */
.cs-stock::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.cs-stock--in{color:var(--ok)}
.cs-stock--out{color:var(--ink-3)}
.cs-rating{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)}
.cs-stars{display:inline-flex;gap:1px}
.cs-stars svg{fill:var(--ln)}
.cs-stars .is-on{fill:#f5a623}
.cs-card__prices{display:flex;align-items:baseline;gap:9px;margin-top:auto;padding-top:4px}
.cs-price{font:800 23px/1 var(--font-h);color:var(--ink);letter-spacing:-.02em}
.cs-price--old{font-size:14px;color:var(--ink-3);text-decoration:line-through;font-weight:400}
/* Счётчик и кнопка — одной высоты: у кнопки она своя (46 или 54
   у крупной), поэтому счётчик тянется по строке, а не задаётся
   числом. Раньше под «В КОРЗИНУ» он был на восемь пикселей ниже. */
.cs-card__buy{display:flex;align-items:stretch;gap:8px;margin-top:4px}

/* счётчик количества */
.cs-qty{display:inline-flex;align-items:stretch;justify-content:space-between;
  border:1px solid var(--ln);border-radius:var(--r-sm);
  min-height:46px;flex:0 0 auto;overflow:hidden}
/* «−» и «+» прижаты к краям, число посередине: при растяжении
   счётчика кнопки оставались слева, а справа была пустота. */
.cs-qty button{flex:0 0 auto;width:36px;border:0;background:none;color:var(--ink-2);
  font-size:18px;line-height:1;transition:background var(--t),color var(--t)}
.cs-qty button:hover{color:var(--nv);background:var(--nv-50)}
.cs-qty input{flex:1 1 auto;width:42px;min-width:32px;border:0;text-align:center;
  font-weight:700;padding:0;font-variant-numeric:tabular-nums;background:none}
.cs-qty input::-webkit-outer-spin-button,
.cs-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* в узкой карточке подпись кнопки не должна переноситься на две строки */
/* Внутри карточки кнопка теряет собственный подъём: два десятка
   светящихся кнопок в сетке перебивают и цены, и фотографии. */
.cs-card__buy .cs-btn{flex:1 1 auto;padding:0 10px;font-size:13px;white-space:nowrap;box-shadow:none}
.cs-card__buy .cs-btn:hover{box-shadow:0 4px 12px -2px rgba(233,67,45,.36)}
.cs-card__buy .cs-qty{flex:0 0 auto;height:auto}
.cs-card__buy .cs-qty button{width:30px}
.cs-card__buy .cs-qty input{width:32px}
/* В карточке товара места больше, чем в плитке каталога: счётчик
   там мельчил рядом с крупной кнопкой «В корзину». */
.cs-buybox .cs-card__buy .cs-qty button{width:38px}
.cs-buybox .cs-card__buy .cs-qty input{width:44px}
.cs-card__total{font-size:12px;color:var(--ink-3);text-align:center;padding-top:8px;
  border-top:1px solid var(--ln-2);margin-top:2px}
.cs-card__total b{color:var(--ink)}

/*
 * Плитки гарантий по маркам. Человек приходит на страницу гарантии
 * за «гарантией на мои шины», поэтому первое, что он видит, —
 * логотипы марок, а не общий текст.
 */
.cs-warr{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;margin:18px 0 26px}
.cs-warr__i{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:18px 12px;min-height:110px;text-align:center;
  border:1px solid var(--ln);border-radius:var(--r-sm);background:#fff;
  transition:border-color var(--t),box-shadow var(--t)}
.cs-warr__i:hover{border-color:var(--nv-100);box-shadow:var(--sh-1)}
.cs-warr__i img{max-width:118px;max-height:34px;width:auto;height:auto;object-fit:contain}
.cs-warr__b{font:800 16px/1 var(--font-h);color:var(--ink)}
.cs-warr__t{font-size:13px;color:var(--ink-2);line-height:1.3}
@media(max-width:575.98px){
  .cs-warr{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cs-warr__i{min-height:96px;padding:14px 8px}
}

/* ── 9. Каталог ──────────────────────────────────────────────────────── */
.cs-crumbs{padding:14px 0;font-size:13px;color:var(--ink-3)}
.cs-crumbs ol{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.cs-crumbs li+li::before{content:'/';margin-right:7px;color:#c8cfda}
.cs-crumbs a{color:var(--ink-3)}
.cs-crumbs a:hover{color:var(--nv)}

.cs-layout{display:grid;grid-template-columns:288px minmax(0,1fr);gap:24px;align-items:start}
/* Правая колонка в 320 px — на странице вакансии и всюду, где нужна
   узкая приставка. Классом, а не инлайном: инлайн не отменить медиазапросом. */
.cs-layout--r320{grid-template-columns:minmax(0,1fr) 320px}
.cs-side{background:#fff;border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
.cs-side__head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:18px 20px;border-bottom:1px solid var(--ln-2);font:800 16px/1 var(--font-h);
}
/* Крестик и затемнение существуют только в выехавшем виде. */
.cs-side__x{display:none}
.cs-side__dim{display:none}
.cs-filter{border-bottom:1px solid var(--ln-2)}
.cs-filter:last-of-type{border-bottom:0}
.cs-filter__t{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:15px 20px;background:none;border:0;font:700 14px/1 var(--font-h);text-align:left;
  transition:color var(--t);
}
.cs-filter__t:hover{color:var(--nv)}
.cs-filter__t svg{fill:var(--ink-3);transition:transform var(--t)}
.cs-filter.is-closed .cs-filter__t svg{transform:rotate(-90deg)}
.cs-filter__b{padding:0 20px 18px;display:flex;flex-direction:column;gap:12px}
.cs-filter.is-closed .cs-filter__b{display:none}
/*
 * Список вместо выпадающего списка: виды аксессуаров выбирают глазами,
 * а не по памяти. Высоту ограничиваем и прокручиваем — иначе два
 * десятка пунктов выдавливают остальные фильтры за пределы экрана,
 * особенно на телефоне.
 */
.cs-list{display:flex;flex-direction:column;gap:2px;max-height:320px;overflow:auto;
  margin:0 -8px;padding:0 8px}
.cs-list__i{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:14px;
  padding:8px 10px;border-radius:var(--r-sm);transition:background var(--t)}
.cs-list__i:hover{background:var(--nv-50)}
.cs-list__i input{width:16px;height:16px;accent-color:var(--nv);margin:0;flex:0 0 auto}
.cs-list__i.is-on{background:var(--nv-50);font-weight:600}
a.cs-list__i{color:var(--ink,inherit);text-decoration:none}
a.cs-list__i.is-on{color:var(--nv)}

.cs-side__actions{padding:18px 20px;display:flex;gap:10px;border-top:1px solid var(--ln-2)}

.cs-toolbar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:#fff;border-radius:var(--r);box-shadow:var(--sh-1);padding:14px 18px;margin-bottom:18px;
}
.cs-toolbar__cnt{color:var(--ink-3);font-size:14px}
/* кнопка открытия фильтров нужна только на узких экранах */
[data-side-toggle]{display:none}
@media(max-width:991.98px){[data-side-toggle]{display:inline-flex}}
.cs-toolbar__sp{margin-left:auto;display:flex;align-items:center;gap:10px}

/*
 * Полоса над списком товаров. Может листаться, поэтому устроена так же,
 * как крупный баннер: слайды друг над другом, высота — от пропорций
 * первой картинки.
 */
.cs-strip{position:relative;margin-bottom:18px;background:#fff;border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-1);aspect-ratio:var(--ar, 1200/200)}
.cs-strip__slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;
  transition:opacity .45s ease}
.cs-strip__slide.is-on{opacity:1;visibility:visible}
.cs-strip:not(.cs-strip--many) .cs-strip__slide{transition:none}
.cs-strip img{width:100%;height:100%;object-fit:cover;display:block}
.cs-strip .cs-car__ar{width:32px;height:32px;font-size:18px}
.cs-strip .cs-car__dots{bottom:8px}

.cs-pager{display:flex;gap:8px;justify-content:center;margin:34px 0;flex-wrap:wrap}
.cs-pager a,.cs-pager span{
  min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:var(--r-sm);box-shadow:var(--sh-1);color:var(--ink);
  font-weight:600;padding:0 12px;transition:background var(--t),color var(--t),box-shadow var(--t);
}
.cs-pager a:hover{background:var(--nv-50);color:var(--nv);box-shadow:var(--sh-2)}
.cs-pager .is-cur{background:var(--nv);color:#fff;box-shadow:0 2px 8px -2px rgba(0,51,159,.5)}

.cs-empty{background:#fff;border-radius:var(--r);box-shadow:var(--sh-1);padding:48px;
  text-align:center;color:var(--ink-3)}
.cs-seo{background:#fff;border-radius:var(--r);box-shadow:var(--sh-1);padding:30px;margin-top:30px;
  font-size:15px;line-height:1.65}
.cs-seo h2,.cs-seo h3{margin-top:1.4em}

/* ── 10. Карточка товара (страница) ──────────────────────────────────── */
.cs-product{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr) 320px;gap:30px;
  background:#fff;border-radius:var(--r);box-shadow:var(--sh-1);padding:28px}
/* Главное фото и миниатюры — тоже на белом, по той же причине.
   Границу добавляем взамен подложки, иначе фото не отделено от карточки. */
.cs-gallery__main{aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:20px;
  background:#fff;border:1px solid var(--ln-2);border-radius:var(--r);margin-bottom:12px}
/* На странице товара снимок один, сравнивать его не с чем — здесь
   важнее чёткость: больше своего размера не растягиваем. */
.cs-gallery__main img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.cs-gallery__thumbs{display:flex;gap:10px;flex-wrap:wrap}
.cs-gallery__thumbs a{width:66px;height:66px;border:1px solid var(--ln);border-radius:var(--r-xs);
  padding:5px;display:flex;background:#fff;transition:border-color var(--t)}
.cs-gallery__thumbs a:hover{border-color:var(--nv-l)}
.cs-gallery__thumbs a.is-on{border-color:var(--nv);box-shadow:0 0 0 1px var(--nv)}
.cs-specs{width:100%;font-size:14px}
.cs-specs tr:nth-child(odd){background:var(--surf)}
.cs-specs th,.cs-specs td{padding:11px 14px;text-align:left;font-weight:400}
/* Скругление у таблицы приходится вешать на угловые ячейки:
   overflow:hidden на самой table ничего не обрезает. */
.cs-specs tr:first-child th{border-radius:var(--r-xs) 0 0 0}
.cs-specs tr:first-child td{border-radius:0 var(--r-xs) 0 0}
.cs-specs tr:last-child th{border-radius:0 0 0 var(--r-xs)}
.cs-specs tr:last-child td{border-radius:0 0 var(--r-xs) 0}
.cs-specs th{color:var(--ink-3);width:46%}
.cs-specs td{font-weight:600}
.cs-buybox{background:#fff;border:1px solid var(--ln);border-radius:var(--r);padding:22px;align-self:start;
  box-shadow:var(--sh-1)}
.cs-buybox .cs-price{font-size:34px;color:var(--nv)}
.cs-features{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:15px}
.cs-features li{display:flex;gap:12px;align-items:flex-start}
.cs-features svg{fill:var(--nv);flex:0 0 auto}
.cs-features b{display:block;font:700 14px/1.2 var(--font-h)}
.cs-features span{font-size:12px;color:var(--ink-3)}

/* шапка карточки товара: рейтинг, артикул, бренд — в одну строку */
.cs-product .cs-head__sub{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.cs-product .cs-rating{cursor:pointer}
.cs-gallery__thumbs a img{width:100%;height:100%;object-fit:contain}
.cs-buybox .cs-card__buy{display:flex;gap:10px}
.cs-buybox .cs-card__buy .cs-btn{flex:1 1 auto}
.cs-buybox .cs-card__total{font-size:13px;color:var(--ink-3)}
/* кэшбэк — это акция, а не служебная метка: цвет как у распродажи */
.cs-buybox .cs-tag{background:var(--or-50);color:var(--or)}
/* текст описания внутри блока не нужно отбивать ещё раз */
.cs-block > .cs-seo{padding:0;box-shadow:none;border-radius:0;margin-top:0}
/* «В избранное» после нажатия */
.cs-btn--ghost.is-on{background:var(--nv);color:#fff}
.cs-btn--ghost.is-on svg{fill:#fff}

.cs-block{background:#fff;border-radius:var(--r);box-shadow:var(--sh-1);padding:28px;margin-top:22px}

/*
 * Разбор от нейросети.
 *
 * Блок нарочно не похож на описание товара: у машинного текста должен
 * быть свой вид, чтобы покупатель не принял его за слова производителя.
 * Отсюда подложка, звёздочка на кнопке и подпись внизу.
 */
.cs-ai{border:1px solid var(--nv-100);background:linear-gradient(180deg,var(--nv-50),#fff 120px)}
.cs-ai.is-lit{animation:cs-ai-lit 1.6s ease}
@keyframes cs-ai-lit{
  0%{box-shadow:0 0 0 0 rgba(0,51,159,.28)}
  40%{box-shadow:0 0 0 6px rgba(0,51,159,.10)}
  100%{box-shadow:var(--sh-1)}
}
.cs-ai__go{justify-content:center;gap:8px}
.cs-ai__sum{margin:0 0 18px;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:70ch}
.cs-ai__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.cs-ai__c{background:#fff;border:1px solid var(--ln-2);border-radius:var(--r-sm);padding:16px}
.cs-ai__h{font:700 13px/1.2 var(--font-h);text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3);margin-bottom:10px;padding-left:16px;position:relative}
.cs-ai__h::before{content:'';position:absolute;left:0;top:2px;width:8px;height:8px;border-radius:2px}
.cs-ai__c--up    .cs-ai__h::before{background:var(--ok)}
.cs-ai__c--watch .cs-ai__h::before{background:var(--warn)}
.cs-ai__c--road  .cs-ai__h::before{background:var(--nv)}
.cs-ai__l{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.cs-ai__l li{font-size:14px;line-height:1.5;color:var(--ink-2)}
.cs-ai__note{margin:18px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
@media (max-width:640px){
  .cs-ai__sum{font-size:15px}
  .cs-ai__cols{grid-template-columns:1fr}
}

/*
 * «Где взять»: варианты поставки одного товара. Не таблица цен,
 * а короткий список — со склада сегодня или под заказ дешевле.
 */
.cs-ways{margin-top:14px;padding:14px;border:1px solid var(--ln-2);border-radius:var(--r-sm)}
.cs-ways__t{font:800 13px/1 var(--font-h);text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3);margin-bottom:10px}
.cs-ways__i{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:6px 0;border-bottom:1px dashed var(--ln-2);font-size:14px}
.cs-ways__i:last-of-type{border-bottom:0}
.cs-ways__w{display:flex;flex-direction:column;gap:2px}
.cs-ways__w .cs-muted{font-size:12px}

/* Флаг страны бренда: маленькая картинка в строке текста. */
.cs-flag{display:inline-block;vertical-align:-2px;margin-left:4px;border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.12)}
/* Описание бренда на его странице каталога. */
.cs-brand__t{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cs-brand__logo{height:28px;width:auto;max-width:120px;object-fit:contain}
.cs-brand__country{font:600 13px/1 var(--font-h);color:var(--ink-3)}

/*
 * Страница разделами (доставка и подобные).
 *
 * Слева оглавление, справа карточки. Оглавление липкое: правила
 * читают вразнобой — посмотрел про выгрузку, вернулся к срокам,
 * и каждый раз прокручивать страницу вверх утомительно.
 */
.cs-doc{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start}
.cs-doc__navbox{
  background:#fff;border-radius:var(--r);box-shadow:var(--sh-1);padding:20px;
  position:sticky;top:16px;
}
.cs-doc__navt{font:800 16px/1 var(--font-h);margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--ln-2)}
.cs-doc__navbox ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cs-doc__navbox a{color:var(--ink-2);text-decoration:none;font-size:14px;line-height:1.35}
.cs-doc__navbox a:hover{color:var(--nv)}
.cs-doc__body > .cs-block:first-child{margin-top:0}
/* Якорь не должен уезжать под липкую шапку. */
.cs-doc__body > .cs-block{scroll-margin-top:16px}
@media(max-width:991.98px){
  .cs-doc{grid-template-columns:minmax(0,1fr)}
  .cs-doc__navbox{position:static}
  .cs-doc__navbox ul{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}

/* Калькулятор доставки: поля в три колонки, кнопка на уровне полей. */
.cs-calc__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cs-calc__go{align-self:end}
@media(max-width:767.98px){
  .cs-calc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:479.98px){
  .cs-calc__grid{grid-template-columns:minmax(0,1fr)}
}
.cs-block__t{margin:0 0 18px;font-size:22px}

/* отзывы */
.cs-review{padding:18px 0;border-bottom:1px solid var(--ln-2)}
.cs-review:last-child{border-bottom:0}
.cs-review__top{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.cs-review__who{font-weight:700}
.cs-review__date{color:var(--ink-3);font-size:13px;margin-left:auto}
.cs-review__plus b{color:var(--ok)}
.cs-review__minus b{color:var(--err)}

/* форма отзыва раскрывается по кнопке, поэтому её поля обычной ширины */
/*
 * Шинный калькулятор.
 *
 * Слева панель размеров, справа тёмная сцена с колёсами: на светлом
 * фоне резина сливается с бумагой, на тёмном читается объём. Цвет
 * закреплён за колесом — синее штатное, красное новое, — и он же
 * в отчёте, поэтому подписи «где чьё» не нужны.
 */
.cs-calc__top{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start}
.cs-cfg{background:#fff;border:1px solid var(--ln-2);border-radius:var(--r);
  box-shadow:var(--sh-1);padding:18px}
.cs-cfg__head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:16px}
.cs-cfg__t{font:700 16px/1.2 var(--font-h)}
.cs-cfg__sw{font-size:13px}
.cs-cfg__tread{margin-bottom:16px}
.cs-cfg__seg{display:flex;gap:6px;margin-top:6px;padding:4px;background:var(--surf);
  border-radius:var(--r-sm)}
.cs-cfg__sb{flex:1 1 0;border:0;background:none;padding:8px 6px;cursor:pointer;
  border-radius:var(--r-xs);font:600 13px/1 var(--font-h);color:var(--ink-3)}
.cs-cfg__sb.is-on{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.cs-cfg__w{border-top:1px solid var(--ln-2);padding-top:14px;margin-top:14px}
.cs-cfg__wh{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cs-cfg__dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
[data-calc-side=from] .cs-cfg__dot{background:var(--nv)}
[data-calc-side=to] .cs-cfg__dot{background:var(--or)}
.cs-cfg__wt{font:700 12px/1 var(--font-h);text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3)}
.cs-cfg__size{margin-left:auto;font:700 14px/1 var(--font-h)}
.cs-cfg__tabs{display:flex;align-items:center;gap:4px;margin-bottom:10px;flex-wrap:wrap}
.cs-cfg__tab{border:0;background:none;padding:4px 6px;cursor:pointer;border-radius:var(--r-xs);
  font:600 11px/1 var(--font-h);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3)}
.cs-cfg__tab.is-on{background:var(--nv-50);color:var(--nv)}
.cs-cfg__hint{margin-left:auto;font-size:11px;color:var(--ink-3)}
.cs-cfg__grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.cs-cfg__grid.is-hidden{display:none}
.cs-cfg__grid .cs-label{font-size:10.5px}
.cs-cfg__grid .cs-select,.cs-cfg__grid .cs-input{padding-left:8px;padding-right:22px;font-size:14px}
.cs-cfg__disk{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;
  color:var(--ink-3)}
.cs-cfg__dv{margin-left:auto;color:var(--ink);font-weight:600}
.cs-cfg__edit{border:0;background:none;padding:0;cursor:pointer;font-size:12px;
  color:var(--nv);text-decoration:underline dotted;text-underline-offset:3px}
.cs-calc__err{margin-top:14px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--or-50);color:var(--or-d);font-size:13px}

/* Сцена */
.cs-view{background:var(--dark);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-2);color:#fff}
.cs-view__bar{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);flex-wrap:wrap}
.cs-view__tabs{display:flex;gap:4px;flex-wrap:wrap}
.cs-view__tab{border:0;background:rgba(255,255,255,.06);color:#c3ccdb;cursor:pointer;
  padding:7px 12px;border-radius:var(--r-xs);font:600 12.5px/1 var(--font-h)}
.cs-view__tab:hover{background:rgba(255,255,255,.12);color:#fff}
.cs-view__tab.is-on{background:#fff;color:var(--dark)}
.cs-view__badge{margin-left:auto;font:700 12px/1 var(--font-h);padding:7px 12px;
  border-radius:100px;background:rgba(255,255,255,.08);color:#cfe0ff}
.cs-view__badge.is-ok{background:rgba(18,161,80,.18);color:#7ee2a8}
.cs-view__badge.is-warn{background:rgba(224,139,22,.18);color:#ffc96b}
.cs-view__badge.is-bad{background:rgba(233,67,45,.2);color:#ff9d8c}
.cs-view__stage{padding:6px 10px}
.cs-view__stage svg{display:block;width:100%;height:auto}
.cs-view__ns{padding:40px;text-align:center;color:#8794a8}
.cs-view__cap{font:600 13px/1 var(--font-h);fill:#8794a8}
.cs-view__num{font:700 15px/1 var(--font-h);fill:#fff}
.cs-view__dim{font:700 12px/1 var(--font-h)}
.cs-view__note{font:400 11.5px/1 var(--font);fill:#6f7b8e}
.cs-view__side{font:700 11px/1 var(--font-h);fill:#7a8699;letter-spacing:.14em}
.cs-view__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(255,255,255,.08);border-top:1px solid rgba(255,255,255,.08)}
.cs-view__fact{background:var(--dark);padding:14px 16px}
.cs-view__fact .cs-label{color:#6f7b8e}
.cs-view__fact b{display:block;margin:6px 0 4px;font:800 22px/1 var(--font-h);color:#fff}
.cs-view__fact b.is-hot{color:#ff9d8c}
.cs-view__fn{font-size:12px;color:#8794a8}

/* Спидометр */
.cs-spd{display:grid;grid-template-columns:220px 180px 1fr;gap:24px;align-items:center}
.cs-spd__g{position:relative;width:160px;height:160px;margin:0 auto}
.cs-spd__g svg{width:100%;height:100%}
.cs-spd__gv{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
.cs-spd__gv b{font:800 34px/1 var(--font-h);color:var(--ink)}
.cs-spd__gv span{margin-top:4px;font-size:11px;line-height:1.3;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.04em}
.cs-spd__nums{display:flex;gap:28px;margin-bottom:14px;flex-wrap:wrap}
.cs-spd__big{display:block;margin-top:4px;font:800 22px/1 var(--font-h);color:var(--nv)}
.cs-spd__range{width:100%;accent-color:var(--nv)}
.cs-spd__marks{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3)}
.cs-spd__presets{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

/* Отчёт */
.cs-rep__head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:18px}
.cs-rep__head .cs-block__t{margin:0}
.cs-rep__score{text-align:right}
.cs-rep__score b{font:800 30px/1 var(--font-h);color:var(--nv)}
.cs-rep__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.cs-rep__card{border:1px solid var(--ln-2);border-radius:var(--r-sm);padding:16px}
.cs-rep__card--verdict.is-ok{background:#f1fbf4;border-color:#c9ecd6}
.cs-rep__card--verdict.is-warn{background:#fff8ec;border-color:#f4dfb8}
.cs-rep__card--verdict.is-bad{background:var(--or-50);border-color:#f6cdc4}
.cs-rep__vh{font:700 17px/1.25 var(--font-h);margin:6px 0 8px}
.cs-rep__vt{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--ink-3)}
.cs-rep__scale{position:relative;margin:8px 0 6px;padding-top:18px}
.cs-rep__bar{height:8px;border-radius:4px;
  background:linear-gradient(90deg,#12a150 0 30%,#e08b16 30% 60%,#E9432D 60% 100%)}
.cs-rep__scale i{position:absolute;bottom:-4px;width:3px;height:16px;border-radius:2px;
  background:var(--ink);transform:translateX(-50%)}
.cs-rep__scale b{position:absolute;top:0;right:0;font:800 15px/1 var(--font-h)}
.cs-rep__legend{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-3)}
.cs-rep__pair{display:flex;gap:20px;margin:10px 0 12px;flex-wrap:wrap}
.cs-rep__pair b{display:block;font:800 20px/1 var(--font-h);color:var(--nv)}
.cs-rep__pair span{font-size:12px;color:var(--ink-3)}
.cs-rep__rows{margin-top:10px}
.cs-rep__row{display:flex;align-items:baseline;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--ln-2);font-size:13px}
.cs-rep__row:last-child{border-bottom:0}
.cs-rep__row span{color:var(--ink-3)}
.cs-rep__row i{margin-left:auto;font-style:normal;color:var(--ink-3);
  text-decoration:line-through;text-decoration-color:var(--ln)}
.cs-rep__row b{min-width:76px;text-align:right}
.cs-rep__row.is-bad b{color:var(--or)}
.cs-rep__t{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:22px}
.cs-rep__t th{text-align:left;padding:10px 12px;background:var(--surf);
  font:700 11.5px/1.2 var(--font-h);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3)}
.cs-rep__t th:last-child,.cs-rep__ch{text-align:right}
.cs-rep__t td{padding:10px 12px;border-bottom:1px solid var(--ln-2)}
.cs-rep__t td:first-child{color:var(--ink-3)}
.cs-rep__t tr.is-warn td{background:var(--or-50)}
.cs-rep__ch{font-weight:700}

/* Альтернативы */
.cs-sizes{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13.5px}
.cs-sizes th{text-align:left;padding:10px 12px;background:var(--surf);
  font:700 11.5px/1.2 var(--font-h);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3)}
.cs-sizes td{padding:8px 12px;border-bottom:1px solid var(--ln-2)}
.cs-sizes th:first-child,.cs-sizes td:first-child{width:34%}
.cs-sizes th:nth-child(2),.cs-sizes td:nth-child(2){width:22%}
.cs-sizes th:nth-child(3),.cs-sizes td:nth-child(3){width:22%}
.cs-sizes tr.is-now td{background:var(--nv-50)}
.cs-sizes tr.is-std td{background:var(--surf)}
.cs-sizes__n{margin-left:8px;font-size:11px;color:var(--ink-3)}
.cs-sizes__f{max-width:150px}
.cs-sizes__pick{border:0;background:none;padding:0;cursor:pointer;font:600 13.5px/1 var(--font-h);
  color:var(--nv);text-decoration:underline dotted;text-underline-offset:3px}
.cs-sizes__pick:hover{color:var(--or)}
.cs-sizes__d{display:inline-block;min-width:54px;text-align:center;padding:3px 8px;
  border-radius:100px;font:700 12px/1.3 var(--font-h)}
.cs-sizes__d.is-ok{background:#e8f7ee;color:#0b7a3c}
.cs-sizes__d.is-mid{background:#fff4e2;color:#a5650a}
.cs-sizes__d.is-far{background:var(--or-50);color:var(--or-d)}
.cs-calc__share{display:flex;align-items:center;gap:12px;margin-top:20px}
.cs-calc__share .cs-muted{font-size:13px}
.cs-note{margin-top:22px;padding:16px 18px;border-radius:var(--r);background:#fff8ec;
  border:1px solid #f4dfb8;font-size:13.5px;line-height:1.55;color:var(--ink-2)}

@media (max-width:980px){
  .cs-calc__top{grid-template-columns:1fr}
  .cs-spd{grid-template-columns:1fr;gap:16px;text-align:center}
  .cs-spd__nums{justify-content:center}
  .cs-spd__presets{justify-content:center}
}
@media (max-width:620px){
  /* Картинка сжимается вместе с экраном, и подписи внутри неё
     превращаются в пыль: внутри svg размер задаётся в координатах
     рисунка, поэтому увеличиваем их вручную. */
  .cs-view__cap{font-size:19px}
  .cs-view__num{font-size:22px}
  .cs-view__dim{font-size:18px}
  .cs-view__note{font-size:16px}
  .cs-view__side{font-size:15px}
  .cs-view__facts{grid-template-columns:1fr}
  .cs-cfg__grid{grid-template-columns:1fr 1fr}
  .cs-rep__t,.cs-sizes{font-size:12.5px}
  .cs-rep__t td,.cs-rep__t th,.cs-sizes td,.cs-sizes th{padding:8px 6px}
}

/*
 * Помощь: карточки тем, внутри — раскрывающиеся вопросы.
 *
 * Раскрытие сделано на <details>, а не на скрипте: работает без
 * javascript, ищется через Ctrl+F и печатается. Скрипт нужен только
 * чтобы показать спрятанный хвост длинной карточки.
 */
.cs-lead{max-width:70ch;margin:0 0 22px;font-size:16px;line-height:1.6;color:var(--ink-2)}
/* Карточки одной высоты. Сетка растягивает их по ряду (stretch —
   поведение по умолчанию, прежний align-items:start его отменял),
   а сама карточка — колонка, у которой ссылка на тему прижата
   к низу через margin-top:auto. Без этого ссылки в соседних
   карточках стояли на разной высоте и ряд выглядел осыпавшимся. */
.cs-help{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:18px}
.cs-help__c{position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--ln-2);
  border-radius:var(--r);box-shadow:var(--sh-1);padding:22px}
.cs-help__ico{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--r-sm);background:var(--or-50);
  color:var(--or);margin-bottom:12px;flex:0 0 auto;align-self:flex-start}
.cs-help__t{font:700 17px/1.25 var(--font-h);margin:0 0 12px}
.cs-help__list{display:flex;flex-direction:column}
.cs-help__q{display:block;border-top:1px solid var(--ln-2);
  padding:11px 22px 11px 0;position:relative;
  font-size:14px;line-height:1.45;color:var(--ink-2)}
.cs-help__q:hover{color:var(--nv)}
.cs-help__q::after{
  content:'';position:absolute;right:5px;top:17px;width:7px;height:7px;
  border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
  transform:rotate(-45deg);transition:transform var(--t),border-color var(--t);
}
.cs-help__q:hover::after{border-color:var(--nv);transform:rotate(-45deg) translate(2px,-2px)}
.cs-help__q.is-extra{display:none}
.cs-help__c.is-open .cs-help__q.is-extra{display:block}
.cs-help__more{
  margin-top:auto;padding-top:14px;
  font:600 13px/1.3 var(--font-h);color:var(--or);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.cs-help__more .cs-muted{font-weight:400}
.cs-help__more:hover{color:var(--or-d)}

/*
 * Страницы темы и вопроса: меню раздела слева, текст справа.
 *
 * Меню липкое: тем девять, ответы длинные, и без этого к соседнему
 * вопросу приходилось бы возвращаться прокруткой вверх.
 */
.cs-hpage{display:grid;grid-template-columns:270px 1fr;gap:28px 36px;align-items:start}
.cs-hpage__main{min-width:0}
.cs-hpage__main h1{margin:0 0 14px}
.cs-hpage__up{margin:0 0 10px;font-size:14px}
.cs-hnav{position:sticky;top:84px;background:#fff;border:1px solid var(--ln-2);
  border-radius:var(--r);box-shadow:var(--sh-1);padding:14px 16px;
  max-height:calc(100vh - 110px);overflow:auto}
.cs-hnav__h{font:700 13px/1 var(--font-h);text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-3);margin:0 0 10px}
.cs-hnav__t{border-top:1px solid var(--ln-2)}
.cs-hnav__t:first-of-type{border-top:0}
.cs-hnav__t > summary{list-style:none;cursor:pointer;display:flex;gap:8px;
  align-items:center;padding:9px 18px 9px 0;position:relative;
  font:600 14px/1.35 var(--font-h);color:var(--ink)}
.cs-hnav__t > summary::-webkit-details-marker{display:none}
.cs-hnav__t > summary:hover{color:var(--nv)}
.cs-hnav__t > summary::after{
  content:'';position:absolute;right:2px;top:14px;width:6px;height:6px;
  border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
  transform:rotate(45deg);transition:transform var(--t)}
.cs-hnav__t[open] > summary::after{transform:rotate(-135deg);top:17px}
.cs-hnav__t.is-cur > summary{color:var(--nv)}
.cs-hnav__n{margin-left:auto;margin-right:12px;font:400 12px/1 var(--font-h);
  color:var(--ink-3)}
.cs-hnav__l{list-style:none;margin:0 0 8px;padding:0 0 0 2px;display:grid;gap:2px}
.cs-hnav__l a{display:block;padding:6px 8px;border-radius:var(--r-sm);
  font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.cs-hnav__l a:hover{background:var(--nv-50);color:var(--nv)}
.cs-hnav__l a.is-cur{background:var(--nv-50);color:var(--nv);font-weight:600}
.cs-hnav__all{color:var(--ink-3)!important;font-size:13px!important}
.cs-hnav__all:hover{color:var(--nv)!important}
.cs-hnav__call{margin-top:12px;padding-top:12px;border-top:1px solid var(--ln-2);
  font-size:13px;line-height:1.5;color:var(--ink-3)}

/* Вопрос и ответ на странице темы. */
.cs-hbody{background:#fff;border:1px solid var(--ln-2);border-radius:var(--r);
  box-shadow:var(--sh-1);padding:4px 26px 22px}
.cs-hq{padding:18px 0;border-top:1px solid var(--ln-2)}
.cs-hq:first-of-type{border-top:0}
.cs-hq__t{font:700 18px/1.3 var(--font-h);margin:0 0 10px}
.cs-hq__t a{color:var(--ink)}
.cs-hq__t a:hover{color:var(--nv)}
.cs-hq__a{font-size:15px;line-height:1.65;color:var(--ink-2)}
.cs-hq__a p{margin:0 0 12px}
.cs-hq__a p:last-child{margin-bottom:0}
.cs-hq__a ul,.cs-hq__a ol{margin:0 0 12px;padding-left:22px}
.cs-hq__a li{margin-bottom:.35em}
.cs-hq__a h3,.cs-hq__a h4{margin:1.2em 0 .4em;font:700 16px/1.3 var(--font-h);color:var(--ink)}
.cs-hq__a table{width:100%;border-collapse:collapse;margin:0 0 12px}
.cs-hq__a th,.cs-hq__a td{border:1px solid var(--ln-2);padding:8px 10px;text-align:left}
.cs-hq__a img{max-width:100%;height:auto;border-radius:var(--r-sm)}
.cs-hbody > .cs-hq__a{padding:18px 0 4px}

/* Соседние вопросы внизу страницы ответа. */
.cs-hnext{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 18px}
.cs-hnext__a{display:block;background:#fff;border:1px solid var(--ln-2);
  border-radius:var(--r-sm);padding:12px 14px;font-size:14px;line-height:1.4}
.cs-hnext__a b{display:block;margin-top:4px;color:var(--nv);font-weight:600}
.cs-hnext__a:hover{border-color:var(--nv-100);box-shadow:var(--sh-1)}
.cs-hnext__a--r{text-align:right}
.cs-hnext__a:only-child{grid-column:1/-1}

@media (max-width:900px){
  .cs-hpage{grid-template-columns:1fr}
  /* На узком экране меню раздела уезжает вниз, под ответ: наверху
     оно отодвинуло бы сам текст на целый экран. */
  .cs-hpage__main{order:-1}
  .cs-hnav{position:static;max-height:none}
  .cs-hnext{grid-template-columns:1fr}
  .cs-hnext__a--r{text-align:left}
}

/*
 * Раздел «Отзывы о шинах»: марки, модели, отзывы на модель.
 *
 * Списки длинные — по три-четыре десятка названий, — поэтому они
 * разложены по буквам и идут колонками: сплошной строкой по такому
 * списку глаз не находит свою марку.
 */
.cs-revlogos{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.cs-revlogos__i{display:flex;align-items:center;justify-content:center;
  height:42px;padding:4px 8px;border-radius:var(--r-sm);
  transition:background var(--t)}
.cs-revlogos__i:hover{background:var(--surf)}
.cs-revlogos__i img{max-height:32px;max-width:120px;object-fit:contain}
.cs-abc{columns:5 200px;column-gap:28px}
.cs-abc__g{break-inside:avoid;margin-bottom:16px}
.cs-abc__l{font:800 15px/1 var(--font-h);color:var(--ink);margin-bottom:6px}
.cs-abc__i{display:block;padding:3px 0;font-size:14px;line-height:1.35}
.cs-abc__i span{color:var(--ink-3);font-size:12.5px}
.cs-revhead{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:center}
.cs-revhead__pic{display:flex;align-items:center;justify-content:center;
  background:var(--surf);border-radius:var(--r-sm);padding:10px;min-height:170px}
.cs-revhead__pic img{max-width:100%;max-height:170px;object-fit:contain}
.cs-revhead__b .cs-block__t{margin-top:0}
.cs-revhead__p{margin:10px 0 16px;font-size:14px;color:var(--ink-2)}
@media (max-width:760px){
  .cs-abc{columns:2 140px;column-gap:18px}
  .cs-revhead{grid-template-columns:1fr}
  .cs-revhead__pic{min-height:0}
}

/*
 * Окно про cookie. Внизу слева, узкое: это уведомление, а не преграда.
 * Появляется с задержкой и выезжает снизу — так его замечают, но оно
 * не перехватывает первый клик.
 */
.cs-cookie{
  position:fixed;left:16px;bottom:16px;z-index:70;width:min(360px,calc(100vw - 32px));
  display:flex;gap:12px;padding:16px 18px;background:#fff;border-radius:var(--r);
  box-shadow:0 12px 32px rgba(16,23,37,.18);border:1px solid var(--ln-2);
  opacity:0;transform:translateY(14px);transition:opacity .25s,transform .25s;
}
.cs-cookie.is-on{opacity:1;transform:none}
.cs-cookie__ico{flex:0 0 auto;color:var(--or);margin-top:2px}
.cs-cookie__t{font:700 15px/1.2 var(--font-h);margin-bottom:6px}
.cs-cookie__d{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--ink-3)}
.cs-cookie__x{
  position:absolute;top:8px;right:10px;border:0;background:none;cursor:pointer;
  font-size:20px;line-height:1;color:var(--ink-3);padding:4px;
}
.cs-cookie__x:hover{color:var(--ink)}
@media (max-width:520px){
  .cs-cookie{left:12px;right:12px;bottom:12px;width:auto}
}

/*
 * Страница отзывов о магазине.
 *
 * Сводка в три колонки: сколько отзывов, как распределены оценки,
 * средняя. Разбивка по звёздам тут не украшение — «4,6» само по себе
 * ничего не значит, а видимая двойка говорит, что отзывы не чистят.
 */
.cs-rev{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:24px;align-items:center}
.cs-rev__n{font:800 40px/1 var(--font-h);color:var(--or)}
.cs-rev__lbl{margin-top:8px;font-size:13px;line-height:1.4;color:var(--ink-3)}
.cs-rev__avg{text-align:center}
.cs-rev__avg .cs-stars{margin-top:8px}
.cs-rev__bars{display:flex;flex-direction:column;gap:6px}
.cs-rev__bar{display:flex;align-items:center;gap:10px}
.cs-rev__track{flex:1 1 auto;height:8px;border-radius:4px;background:var(--ln-2);overflow:hidden}
.cs-rev__track i{display:block;height:100%;background:var(--warn);border-radius:4px}
.cs-rev__cnt{min-width:26px;text-align:right;font-size:13px;color:var(--ink-3)}
.cs-rev__act{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--ln-2)}
.cs-rev__act .cs-muted{font-size:13px}
.cs-review--wide{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:20px 0}
.cs-review__side{display:flex;flex-direction:column;gap:4px}
.cs-review__side .cs-review__date{margin-left:0}
.cs-review__main p{margin:0 0 10px;line-height:1.55}
.cs-review__main p:last-child{margin-bottom:0}
@media (max-width:760px){
  .cs-rev{grid-template-columns:1fr 1fr;gap:18px}
  .cs-rev__bars{grid-column:1 / -1;order:3}
  .cs-review--wide{grid-template-columns:1fr;gap:10px}
  .cs-review__side{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
}
.cs-review-form{border-top:1px solid var(--ln-2);padding-top:20px}
.cs-review-form .cs-picker__grid--3{margin-bottom:0}
.cs-review__plus,.cs-review__minus{margin:4px 0}

/* подсказки поиска */
.cs-search__list{list-style:none;margin:0;padding:0}
.cs-search__list a{display:flex;align-items:center;gap:12px;padding:11px 14px;color:var(--ink);
  border-radius:var(--r-xs)}
.cs-search__list a:hover{background:var(--nv-50)}
.cs-search__list img{width:40px;height:40px;object-fit:contain;flex:0 0 auto}
.cs-search__name{flex:1 1 auto;font-size:14px}
.cs-search__price{font:800 15px/1 var(--font-h);color:var(--nv);white-space:nowrap}
.cs-search__all{display:block;padding:11px 14px;border-top:1px solid var(--ln-2);
  font-size:13px;font-weight:700;text-align:center}

/* ── 11. Корзина и оформление ────────────────────────────────────────── */
.cs-cart{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.cs-cart__table{background:#fff;border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
.cs-cart__row{
  display:grid;grid-template-columns:88px minmax(0,1fr) 130px 150px 140px 44px;
  gap:14px;align-items:center;padding:18px;border-bottom:1px solid var(--ln-2);
}
.cs-cart__row:last-child{border-bottom:0}
.cs-cart__head{font:700 11px/1 var(--font-h);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);background:var(--surf)}
.cs-cart__pic img{width:72px;height:72px;object-fit:contain}
.cs-cart__sum{font:800 18px/1 var(--font-h);color:var(--ink)}
.cs-cart__del{border:0;background:none;color:var(--ink-3);font-size:20px;line-height:1;
  width:34px;height:34px;border-radius:50%;transition:background var(--t),color var(--t)}
.cs-cart__del:hover{color:var(--err);background:var(--or-50)}
.cs-totals{background:#fff;border-radius:var(--r);box-shadow:var(--sh-1);padding:24px}
.cs-totals__row{display:flex;justify-content:space-between;padding:9px 0;font-size:15px}
.cs-totals__grand{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:16px 0 20px;margin-top:8px;border-top:1px solid var(--ln);
  font:800 21px/1 var(--font-h);
}
.cs-steps{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap}
.cs-step{flex:1 1 0;padding:14px 16px;background:#fff;border-radius:var(--r-sm);
  box-shadow:var(--sh-1);font-size:13px;color:var(--ink-3)}
.cs-step.is-on{background:var(--nv);color:#fff;box-shadow:0 2px 10px -2px rgba(0,51,159,.5)}
.cs-step b{display:block;font:700 14px/1.2 var(--font-h)}
/* оформление: правая колонка липнет при прокрутке длинной формы */
.cs-cart .cs-totals{position:sticky;top:16px}
/* подсказка города поверх поля, а не в потоке — форма не прыгает */
[data-city-hint],[data-delivery-hint]{line-height:1.8}
[data-city-hint] a,[data-delivery-hint] a{font-weight:700}

/* ── 12. Подвал ──────────────────────────────────────────────────────── */
.cs-footer{background:var(--nv-d);color:#fff;margin-top:56px;padding:48px 0 0}
.cs-footer a{color:rgba(255,255,255,.8)}
.cs-footer a:hover{color:#fff}
.cs-footer__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr;gap:32px;padding-bottom:36px}
.cs-footer__logo{display:inline-flex;margin-bottom:20px}
.cs-footer__logo img{width:210px;height:auto}
.cs-footer__t{font:800 13px/1 var(--font-h);letter-spacing:.08em;text-transform:uppercase;
  margin:0 0 16px;color:rgba(255,255,255,.55)}
.cs-footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.cs-footer__lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:16px}
.cs-footer__val{font-weight:600}
.cs-footer__bottom{
  border-top:1px solid rgba(255,255,255,.14);padding:20px 0;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.65);
}
.cs-soc{display:flex;gap:8px}
.cs-soc a{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.1);transition:background var(--t)}
.cs-soc a:hover{background:var(--or)}
.cs-soc svg{fill:#fff}

/* ── 13. Модальные окна ──────────────────────────────────────────────── */
.cs-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.cs-modal.is-open{display:flex}
.cs-modal__bg{position:absolute;inset:0;background:rgba(8,14,26,.55);backdrop-filter:blur(3px)}
.cs-modal__box{position:relative;background:#fff;border-radius:var(--r);max-width:640px;width:100%;
  max-height:86vh;overflow:auto;box-shadow:0 32px 70px -24px rgba(6,12,28,.55)}
.cs-modal__box--wide{max-width:960px}
.cs-modal__head{display:flex;align-items:center;padding:20px 24px;border-bottom:1px solid var(--ln-2)}
.cs-modal__t{margin:0;font-size:20px}
.cs-modal__x{margin-left:auto;border:0;background:none;font-size:22px;line-height:1;color:var(--ink-3);
  width:36px;height:36px;border-radius:50%;transition:background var(--t),color var(--t)}
.cs-modal__x:hover{background:var(--ln-2);color:var(--ink)}
.cs-modal__body{padding:24px}
/* Сводка «что оформляем» над полями быстрых форм. */
.cs-sum{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:12px;
  background:var(--surf);border-radius:var(--r-sm)}
.cs-sum__pic{width:52px;height:52px;flex:0 0 auto;object-fit:contain;
  background:#fff;border-radius:var(--r-sm)}
.cs-sum__b{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.cs-sum__t{font:600 14px/1.3 var(--font-h)}
.cs-sum__q{font-size:13px;color:var(--ink-3)}
.cs-sum__q b{font-weight:700;color:var(--ink)}
.cs-sum__p{font:800 17px/1 var(--font-h);color:var(--nv);white-space:nowrap}
@media (max-width:420px){
  .cs-sum__pic{width:44px;height:44px}
  .cs-sum__p{font-size:15px}
}

/* В окне форма идёт столбиком: разделяем всё, что в ней стоит подряд,
   а не только поля, — иначе подсказка и кнопка липнут к полю. */
.cs-modal__body form > * + *{margin-top:16px}
.cs-modal__body form > .cs-picker__grid .cs-field + .cs-field{margin-top:0}

/* ── 14. Служебное ───────────────────────────────────────────────────── */
.cs-alert{padding:14px 18px;font-size:14px;border-radius:var(--r-sm);border-left:3px solid}
.cs-alert--ok{background:#eaf7ef;border-color:var(--ok)}
.cs-alert--warn{background:#fdf5e7;border-color:var(--warn)}
.cs-alert--err{background:var(--or-50);border-color:var(--err)}
.cs-tag{display:inline-block;padding:6px 12px;border-radius:var(--r-pill);
  background:var(--nv-50);color:var(--nv);font-size:13px;font-weight:600}
.cs-chips{display:flex;flex-wrap:wrap;gap:8px}
.cs-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-pill);
  background:#fff;box-shadow:var(--sh-1);font-size:13px;transition:box-shadow var(--t)}
.cs-chip:hover{box-shadow:var(--sh-2)}
.cs-chip b{font-weight:700}
/* Текущий выбор среди фишек — иначе непонятно, где ты находишься. */
.cs-chip.is-cur{background:var(--nv);color:#fff;box-shadow:none}
.cs-chip.is-cur:hover{background:var(--nv-d);color:#fff}
.cs-chip__x{color:var(--ink-3);font-size:15px;line-height:1}

.cs-skeleton{background:linear-gradient(90deg,var(--ln-2) 25%,#f7f9fb 50%,var(--ln-2) 75%);
  background-size:200% 100%;animation:cs-sk 1.2s infinite;border-radius:var(--r-xs)}
@keyframes cs-sk{0%{background-position:200% 0}100%{background-position:-200% 0}}


/* ── 13а. Перенесённый текст ─────────────────────────────────────────
   Содержимое страниц, новостей и акций приехало из NetCat как есть —
   вместе с версткой десятилетней давности: таблицы вместо сеток,
   классы Bootstrap 3, картинки с width в атрибутах. Переписывать
   сотни страниц руками бессмысленно, поэтому приводим их в порядок
   стилями: текст читается, ничего не вылезает за экран. */
.cs-seo{overflow-wrap:break-word}
.cs-seo h1,.cs-seo h2,.cs-seo h3,.cs-seo h4{margin:1.4em 0 .5em;line-height:1.25}
.cs-seo h1{font-size:26px}
.cs-seo h2{font-size:22px}
.cs-seo h3{font-size:18px}
.cs-seo p{margin:0 0 1em}
.cs-seo ul,.cs-seo ol{margin:0 0 1em;padding-left:22px}
.cs-seo li{margin-bottom:.35em}
.cs-seo a{color:var(--nv);text-decoration:underline}
.cs-seo b,.cs-seo strong{font-weight:700}

/* Картинки со старыми width/height в атрибутах не должны рвать колонку. */
.cs-seo img{max-width:100%;height:auto;display:block;margin:1em 0}

/*
 * Размер и обтекание картинки в тексте задаются классами, которые
 * проставляет редактор в админке. Классы, а не инлайновые стили:
 * вёрстка остаётся в css, и если завтра колонка станет шире, править
 * придётся здесь, а не в сотнях записей.
 */
.cs-seo .cs-img--sm{max-width:320px}
.cs-seo .cs-img--md{max-width:640px}
.cs-seo .cs-img--full{width:100%;max-width:100%}
.cs-seo .cs-img--left{float:left;margin:6px 24px 16px 0}
.cs-seo .cs-img--right{float:right;margin:6px 0 16px 24px}
.cs-seo .cs-img--center{margin-left:auto;margin-right:auto}
.cs-seo figure{margin:1.4em 0}
.cs-seo figure img{margin:0}
.cs-seo figcaption{font-size:13px;line-height:1.45;color:var(--ink-3);margin-top:8px}
/* Обтекание не должно вылезать за пределы текста. */
.cs-seo::after{content:'';display:block;clear:both}

@media(max-width:600px){
  /* На телефоне обтекание превращает текст в лапшу из двух-трёх слов
     в строке — картинка идёт отдельным блоком. */
  .cs-seo .cs-img--left,.cs-seo .cs-img--right{float:none;margin:1em 0;max-width:100%}
}
.cs-seo iframe,.cs-seo video{max-width:100%;border:0}

/* Таблицы в старом контенте использовались и для данных, и для верстки.
   Даём им человеческий вид и горизонтальную прокрутку вместо разъезда. */
.cs-seo table{width:100%;border-collapse:collapse;margin:1em 0;font-size:14px;display:block;
  overflow-x:auto;white-space:nowrap}
.cs-seo table td,.cs-seo table th{padding:8px 10px;border:1px solid var(--ln);vertical-align:top;
  white-space:normal}
.cs-seo table th{background:var(--ln-2);text-align:left;font-weight:700}
.cs-seo table[align=left],.cs-seo table[align=right]{float:none}

/*
 * Таблицы, собранные редактором админки.
 *
 * От старого содержимого их отличает класс, и выглядят они как часть
 * сайта, а не как остаток вёрстки десятилетней давности: шапка серая,
 * строки через одну подсвечены, углы скруглены.
 *
 * На широком экране это настоящая таблица во всю ширину колонки.
 * Прокрутка включается только на узком: display:block заставляет
 * ячейки сжиматься по содержимому, и на десктопе таблица висела бы
 * узкой полосой с пустым местом справа.
 */
.cs-seo .cs-table{
  display:table;width:100%;table-layout:auto;white-space:normal;
  border:1px solid var(--ln);border-radius:var(--r-sm);
  border-collapse:separate;border-spacing:0;overflow:hidden;
}
.cs-seo .cs-table th,.cs-seo .cs-table td{
  border:0;border-bottom:1px solid var(--ln-2);padding:11px 14px;
  vertical-align:top;white-space:normal;
}
.cs-seo .cs-table th{background:var(--surf);font-weight:700;text-align:left}
.cs-seo .cs-table tbody tr:nth-child(even){background:var(--surf)}
.cs-seo .cs-table tbody tr:last-child th,
.cs-seo .cs-table tbody tr:last-child td{border-bottom:0}

@media(max-width:700px){
  /* Тарифы и характеристики в телефон по ширине не помещаются,
     и лучше прокрутить таблицу, чем растянуть страницу. */
  .cs-seo .cs-table{display:block;overflow-x:auto;white-space:nowrap}
  .cs-seo .cs-table th,.cs-seo .cs-table td{white-space:nowrap}
}

/* Остатки Bootstrap 3: сетка, кнопки, утилиты. Классы в контенте есть,
   а самого Bootstrap на сайте нет — без этого блоки лепятся в столбик
   без отступов, а «кнопки» выглядят обычными ссылками. */
.cs-seo .row{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 1em}
.cs-seo [class*="col-"]{flex:1 1 260px;min-width:0}
.cs-seo .img-responsive,.cs-seo .img-fluid{max-width:100%;height:auto}
.cs-seo .text-center{text-align:center}
.cs-seo .text-right{text-align:right}
.cs-seo .pull-left{float:left;margin:0 16px 10px 0}
.cs-seo .pull-right{float:right;margin:0 0 10px 16px}
.cs-seo .btn{display:inline-flex;align-items:center;justify-content:center;height:42px;
  padding:0 20px;background:var(--nv);color:#fff;font:700 14px/1 var(--font-h);
  text-decoration:none;margin:0 8px 8px 0}
.cs-seo .btn:hover{background:var(--nv-d);color:#fff}
.cs-seo .btn-danger,.cs-seo .btn-warning{background:var(--or)}
.cs-seo .btn-danger:hover,.cs-seo .btn-warning:hover{background:var(--or-d)}

/* Инлайновые размеры и цвета из визуального редактора старой админки
   ломают тёмный текст на светлом фоне реже, чем сетку, — но ширину
   в пикселях приходится гасить. */
.cs-seo [style*="width"]{max-width:100% !important}
.cs-seo [width]{max-width:100%}

@media(max-width:767.98px){
  .cs-seo .row{display:block}
  .cs-seo .pull-left,.cs-seo .pull-right{float:none;margin:0 0 12px}
}

/* ── 14а. Выехавшее меню ─────────────────────────────────────────────
   Кнопки «Категории» и бургер открывают этот же блок: на широком экране
   он и так виден полосой, на узком — выезжает панелью слева. */
body.cs-nav-open{overflow:hidden}

/* Шапка панели и затемнение существуют только в выехавшем виде. */
.cs-nav__top{display:none}
.cs-nav__dim{display:none}

@media(max-width:1199.98px){
  /*
   * Затемнение. Без него панель висит поверх страницы без всякой границы:
   * на снимке было не понять, где меню, а где сама страница. Щелчок по нему
   * закрывает меню — это привычнее, чем искать крестик.
   */
  body.cs-nav-open .cs-nav__dim{
    display:block;position:fixed;inset:0;z-index:190;
    background:rgba(11,17,32,.55);
  }

  .cs-nav.is-open{
    display:block;position:fixed;inset:0 auto 0 0;width:320px;max-width:88vw;
    background:#fff;z-index:200;overflow:auto;overscroll-behavior:contain;
    box-shadow:var(--sh-2);padding-bottom:24px;
  }
  .cs-nav.is-open .cs-nav__in{display:block;padding:0}

  /* Заголовок с крестиком липнет к верху: список длинный, и после
     прокрутки до «Контактов» закрыть меню было нечем. */
  .cs-nav.is-open .cs-nav__top{
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:2;background:#fff;
    padding:14px 8px 14px 18px;border-bottom:1px solid var(--ln-2);
    font:800 16px/1 var(--font-h);
  }
  .cs-nav__x{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border:0;background:none;color:var(--ink-3);cursor:pointer;
    border-radius:var(--r-sm);
  }
  .cs-nav__x:hover{background:var(--bg);color:var(--ink)}

  .cs-nav.is-open .cs-nav__cat{display:none}
  /* На полосе .cs-cat — флекс-элемент, и в панели он сжимался по самому
     длинному видимому слову: после того как подразделы уехали под
     стрелку, колонка стала вдвое уже панели. */
  .cs-nav.is-open .cs-cat{display:block}
  .cs-nav.is-open .cs-cat__body{position:static;display:block;box-shadow:none;
    min-width:0;padding:0;background:#fff}
  .cs-nav.is-open .cs-cat__col{padding:0;border-bottom:1px solid var(--ln-2)}
  .cs-nav.is-open .cs-cat__t{display:block;padding:14px 52px 14px 18px;border:0;
    margin:0;font:800 15px/1.2 var(--font-h);color:var(--ink)}
  /* В выехавшей панели у пункта нет отрицательных полей: подсветка
     иначе вылезает за край панели. */
  .cs-nav.is-open .cs-cat__l{display:block;padding:9px 18px 9px 32px;margin:0;
    border-radius:0;color:var(--ink-2)}
  .cs-nav.is-open .cs-cat__l:hover{background:var(--nv-50);color:var(--nv)}

  /*
   * Складывающиеся пункты. Раньше панель шла сплошным перечислением:
   * пять разделов со всеми подразделами плюс остальные пункты — три
   * экрана прокрутки, и до нижних никто не доходил.
   *
   * Название и раскрытие разведены: по названию переходят в раздел,
   * по стрелке смотрят, что внутри. Одно вместо другого — обычная
   * причина, по которой из меню невозможно попасть в сам раздел.
   */
  .cs-nav.is-open .cs-cat__col--acc,
  .cs-nav.is-open .cs-nav__extra.cs-mega--acc{position:relative}
  .cs-nav.is-open .cs-acc__x{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:2px;right:6px;width:44px;height:44px;
    border:0;background:none;color:var(--ink-3);cursor:pointer;
    border-radius:var(--r-sm);transition:transform .2s ease;
  }
  .cs-nav.is-open .cs-acc__x:hover{background:var(--bg);color:var(--ink)}
  .cs-nav.is-open .cs-acc__x[aria-expanded="true"]{transform:rotate(180deg)}
  .cs-nav.is-open .cs-cat__sub{display:none;padding-bottom:8px}
  .cs-nav.is-open .cs-cat__col--wide .cs-cat__sub{columns:1}
  .cs-nav.is-open .cs-cat__col--wide{grid-column:auto}
  .cs-nav.is-open .cs-cat__col.is-open .cs-cat__sub{display:block}

  .cs-nav.is-open .cs-nav__list,
  .cs-nav.is-open .cs-nav__list--top{display:block}
  /*
   * Разделы каталога в панели уже перечислены выше — списком с подразделами.
   * Второй раз их же показывал список меню, да ещё с выпадающими панелями,
   * которые в узкой колонке разъезжались поверх текста. Оставляем только
   * то, чего в каталоге нет: заведённые в админке пункты и верхнюю строку,
   * которой на узком экране нет вовсе.
   */
  .cs-nav.is-open .cs-mega:not(.cs-nav__extra){display:none}
  /*
   * В панели пункт — строка, а не флекс-ряд. На полосе .cs-mega
   * выложен флексом, и раскрытый список вставал справа от названия
   * колонкой в пол-панели: «Сервис и услуги» слева, три услуги
   * справа, и всё это поверх соседних пунктов.
   */
  .cs-nav.is-open .cs-nav__extra{display:block;border-bottom:1px solid var(--ln-2)}
  .cs-nav.is-open .cs-nav__link{
    display:block;padding:14px 18px;border-radius:0;color:var(--ink);
  }
  .cs-nav.is-open .cs-nav__extra.cs-mega--acc .cs-nav__link{padding-right:52px}
  .cs-nav.is-open .cs-nav__link:hover{background:var(--nv-50)}
  /* Запись остаётся выделенной и в панели: в сезон это то, ради чего
     меню и открывают. */
  .cs-nav.is-open .cs-nav__link--hot{color:var(--or);font-weight:700}

  /* Выпадающий список пункта в панели — тоже складывающийся, а не
     всплывающая панель поверх текста. */
  /* В панели список раскрывается по стрелке, а не наведением: гасим
     всё, что нужно было для полосы, иначе он остался бы невидимым. */
  .cs-nav.is-open .cs-nav__extra .cs-mega__body{
    position:static;display:none;border:0;box-shadow:none;min-width:0;
    padding:0 0 8px;border-radius:0;
    opacity:1;visibility:visible;transform:none;transition:none;
  }
  .cs-nav.is-open .cs-nav__extra.is-open .cs-mega__body{display:block}
  .cs-nav.is-open .cs-nav__extra .cs-mega__body a{
    padding:9px 18px 9px 32px;border-radius:0;color:var(--ink-2);font-size:14px;
  }
  /* Пункты верхней строки идут последними и отделены: это не разделы
     магазина, а служебные страницы. */
  .cs-nav.is-open .cs-nav__list--top{margin-top:10px;border-top:4px solid var(--bg)}
}

/* ── 15. Адаптив ─────────────────────────────────────────────────────── */
/* На 1200–1400 пунктам тесно: чуть сжимаем отступы, чтобы полоса
   не упиралась в край ровно в тот момент, когда её показали. */
@media(max-width:1399.98px){
  .cs-nav__link{padding:0 10px}
  .cs-nav__cat{padding:0 16px}
  .cs-nav__in{gap:4px}
}

.cs-burger{display:none}
@media(max-width:1199.98px){
  .cs-product{grid-template-columns:minmax(0,380px) minmax(0,1fr);}
  .cs-buybox{grid-column:1/-1}
  .cs-layout{grid-template-columns:250px minmax(0,1fr)}
  /* Подборщик отдаёт часть ширины тексту баннера. */
  .cs-hero__in{grid-template-columns:minmax(0,46%) 1fr;gap:24px;padding:28px 22px}
  .cs-hero__t{font-size:34px}
  .cs-hero__d{font-size:15px}
}
@media(max-width:991.98px){
  /*
   * Планшет и телефон живут по одним правилам. Широкий баннер под
   * подборщиком на таком экране не прочитать: он либо сжимается
   * в полоску, либо режется так, что от макета остаётся середина.
   * Поэтому подборщик стоит на чистом фоне, а под ним — своя
   * квадратная картинка, без надписей и кнопок.
   */
  .cs-hero__box{background:none;border-radius:0;overflow:visible}
  .cs-hero__box .cs-hero__img,
  .cs-hero__box .cs-hero__sh,
  .cs-hero__box .cs-hero__txt,
  .cs-hero__ratio{display:none}
  .cs-hero__in{grid-template-columns:1fr;padding:0;gap:0}
  .cs-hero{margin-top:14px}
  .cs-hero__t{font-size:32px}
  .cs-hero__mob{display:block;margin-top:16px;border-radius:var(--r);overflow:hidden}
  .cs-hero__mob img{display:block;width:100%;height:auto}
  /* На планшете квадрат во всю ширину занял бы почти весь экран —
     держим его в разумных пределах и по центру. */
  @media(min-width:600px){
    .cs-hero__mob{max-width:520px;margin-left:auto;margin-right:auto}
  }
  /* minmax(0,1fr), а не 1fr: колонка грид-раскладки по умолчанию
     не уже своего содержимого, и на узком экране длинное название
     товара распирало её вместе со всей страницей. */
  .cs-layout{grid-template-columns:minmax(0,1fr)}

  /*
   * Выехавший фильтр. Раньше его нельзя было закрыть вовсе: крестика нет,
   * щелчок мимо ничего не делает, а кнопка, которая его открыла, уехала
   * под панель. Оставалось перезагружать страницу.
   */
  .cs-side{position:fixed;inset:0 auto 0 0;width:320px;max-width:88vw;z-index:150;
    transform:translateX(-100%);transition:transform .25s;overflow:auto;
    overscroll-behavior:contain;border-radius:0}
  .cs-side.is-open{transform:none}

  /* Заголовок с крестиком липнет к верху: фильтров на страницу шин
     полтора экрана, и, докрутив до производителя, закрыть панель
     было бы нечем. */
  .cs-side__head{position:sticky;top:0;z-index:2;background:#fff}
  .cs-side__x{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;margin:-10px -8px -10px 0;
    border:0;background:none;color:var(--ink-3);cursor:pointer;border-radius:var(--r-sm);
  }
  .cs-side__x:hover{background:var(--bg);color:var(--ink)}

  /* Щелчок по затемнению закрывает — это привычнее, чем искать крестик. */
  body.cs-side-open .cs-side__dim{
    display:block;position:fixed;inset:0;z-index:140;
    background:rgba(11,17,32,.55);
  }
  body.cs-side-open{overflow:hidden}
  /* minmax(0,1fr), а не 1fr: колонка по умолчанию не уже своего
     содержимого, и поле промокода распирало корзину вместе со всей
     страницей на экране 320 px. */
  .cs-cart{grid-template-columns:minmax(0,1fr)}
  .cs-footer__cols{grid-template-columns:1fr 1fr}
}
/*
 * Шапка и полоса меню переходят в бургер уже на планшете и узком ноутбуке,
 * а не только на телефоне.
 *
 * Девяти пунктам меню нужно около 1160 пикселей: названия вроде «Запись
 * на шиномонтаж» и «Аккумуляторы» не сокращаются. Всё, что уже, полоса
 * не вмещала — «Запись» переносилась на вторую строку, «Вакансии»
 * уезжали за правый край, и вся страница получала горизонтальную
 * прокрутку. Сжать её до 1000 пикселей нельзя, а прокручивать полосу
 * вбок — значит обрезать выпадающие списки разделов: контейнер
 * с прокруткой обрезает и то, что свисает вниз.
 *
 * Поэтому ниже 1200 пикселей полосы нет вовсе, а её содержимое
 * открывается панелью.
 */
@media(max-width:1199.98px){
  .cs-topbar,.cs-nav{display:none}
  .cs-burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
    border:0;background:none;color:var(--ink)}
  /*
   * На узком экране в шапке четыре элемента, а колонок было три —
   * четвёртый молча уезжал на вторую строку, и логотип пропадал.
   * Раскладываем явно: сверху бургер, логотип и значки, поиск —
   * отдельной строкой во всю ширину, как принято в мобильных магазинах.
   */
  .cs-header__in{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:'burger logo actions' 'search search search';
    gap:8px 10px;
    /* var(--gut), а не ноль: правило перебивало боковые поля .cs-wrap,
       и бургер с поисковой строкой упирались в самые края экрана. */
    padding:10px var(--gut);
  }
  /* -8px гасит собственные поля кнопки: значок встаёт по краю поля,
     а не отступает от него на всю ширину зоны нажатия. */
  .cs-burger{grid-area:burger;margin-left:-8px}
  .cs-logo{grid-area:logo;min-width:0}
  .cs-search{grid-area:search}
  .cs-actions{grid-area:actions}
  .cs-logo img{max-width:160px}
  .cs-search__pick,.cs-action__t,.cs-action__v{display:none}
  .cs-search__input,.cs-search__go{height:44px}
  /* На телефоне подсказки шире строки не нужны, но и уже нельзя:
     названия шин длинные и переносятся по три строки. */
  .cs-search__drop{max-height:min(60vh,420px)}
}

@media(max-width:767.98px){
  h1{font-size:26px}
  h2{font-size:22px}
  .cs-btn--lg{height:48px;padding:0 22px;font-size:14px}
  .cs-strip{aspect-ratio:var(--ar-m, 3/1)}
  /* Стрелки без наведения не показать — на телефоне листаем точками. */
  .cs-car__ar{display:none}
  .cs-product{grid-template-columns:1fr;padding:16px}
  .cs-cart__row{grid-template-columns:64px minmax(0,1fr) auto;gap:10px}
  .cs-cart__head{display:none}
  /*
   * Товары — по два в ряд, и на самых узких экранах тоже. В одну колонку
   * карточка занимает почти весь экран: чтобы досмотреть выдачу до конца,
   * приходится крутить страницу метрами. Два в ряд читаются нормально —
   * в мобильных магазинах так и делают.
   */
  /*
   * Панель над списком: «Фильтры», счётчик и сортировка.
   *
   * В одну строку они не влезают, и раньше сортировка переносилась
   * на вторую, оставаясь прижатой к правому краю: сверху две кнопки
   * слева, снизу одинокий список справа, между ними дыра в пол-экрана.
   *
   * Раскладываем явно: первая строка — кнопка и счётчик, вторая —
   * сортировка во всю ширину. Список у неё длинный («сначала дешёвые»),
   * и место ему нужно всё равно.
   */
  .cs-toolbar{gap:10px 12px;padding:12px 14px}
  .cs-toolbar__cnt{margin-left:auto;text-align:right}
  .cs-toolbar__sp{
    margin-left:0;flex:1 0 100%;gap:8px;
    padding-top:10px;border-top:1px solid var(--ln-2);
  }
  .cs-toolbar__sp .cs-select{width:100% !important;flex:1 1 auto;min-width:0}

  /* Заголовок раздела и кнопка «Все товары» в одну строку на узком
     экране не помещаются: заголовок занимает всю ширину, а кнопка
     уезжает за край. Переносим её под заголовок. */
  .cs-head{flex-wrap:wrap;align-items:flex-start;gap:10px}
  .cs-head__sp{margin-left:0;flex:0 0 auto}

  .cs-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cs-promos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  /*
   * Счётчик и «В корзину» в одну строку не помещаются: карточка шириной
   * в половину экрана — это около 165 пикселей, из которых счётчик забирает сто.
   * Кнопка уезжала за край, и подпись обрезалась на середине слова.
   */
  .cs-card__buy{flex-wrap:wrap}
  /* Счётчик на всю ширину карточки: «−» слева, «+» справа,
     число посередине — по нему и попадают пальцем. */
  .cs-card__buy .cs-qty{flex:1 1 100%;min-height:46px}
  .cs-card__buy .cs-btn{flex:1 1 100%}
  .cs-card__buy .cs-qty button{width:44px}
  .cs-card__buy .cs-qty input{width:auto}
  .cs-qty button{width:44px}
  .cs-qty input{width:auto}
  .cs-footer__cols{grid-template-columns:1fr;gap:20px}
  .cs-picker__grid{grid-template-columns:1fr}
}
/*
 * Ленты на главной.
 *
 * На телефоне главная превращалась в свиток: пять товаров в ряду
 * становились пятью строками, четыре новости — четырьмя, и до подвала
 * приходилось листать полминуты. Поэтому ряды главной на узком экране
 * едут вбок, а не вниз: видно два товара и край третьего — этого края
 * достаточно, чтобы человек понял, что ленту можно тянуть.
 *
 * В каталоге и поиске так делать нельзя: там список — это и есть
 * результат, его листают целиком, и прятать половину за краем экрана
 * значит прятать товар.
 */
@media(max-width:767.98px){
  .cs-scroll{
    display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    /* Лента упирается в края экрана, а не в поля контейнера: обрезанная
       карточка у самого края читается как «здесь есть продолжение». */
    margin:0 calc(var(--gut) * -1);
    padding:0 var(--gut) 12px;
    scrollbar-width:thin;
  }
  .cs-scroll::-webkit-scrollbar{height:6px}
  .cs-scroll::-webkit-scrollbar-track{background:var(--ln-2);border-radius:3px}
  .cs-scroll::-webkit-scrollbar-thumb{background:var(--ln);border-radius:3px}
  .cs-scroll > *{flex:0 0 44%;scroll-snap-align:start;min-width:0}
  /* У новости и акции содержимое шире: заголовок в три слова и картинка.
     Показываем одну целиком и край второй. */
  .cs-promos.cs-scroll > *{flex:0 0 76%}
}
@media(max-width:479.98px){
  .cs-scroll > *{flex:0 0 46%}
  .cs-promos.cs-scroll > *{flex:0 0 82%}
}

@media(max-width:479.98px){
  /* Товары остаются по два — карточка ужимается, а не разъезжается
     на весь экран. Акции и новости шире по содержанию, им одна колонка
     как раз впору. */
  .cs-promos{grid-template-columns:1fr}
  .cs-products{gap:8px}
  .cs-card__body{padding:10px 11px 12px;gap:7px}
  .cs-card__name{font-size:13px}
  .cs-price{font-size:19px}
  .cs-price--old{font-size:12px}
  /* Звёзды и строка «общая стоимость» на карточке в 160 пикселей —
     просто рябь: цена и так на виду строкой выше. */
  .cs-rating{display:none}
  .cs-card__total{display:none}
  .cs-mark{width:24px;height:24px}
  .cs-card__marks{top:8px;left:8px;gap:4px}
}

/* ── 16. Печать ──────────────────────────────────────────────────────── */
@media print{
  .cs-topline,.cs-topbar,.cs-nav,.cs-footer,.cs-side,.cs-card__buy{display:none}
  body{background:#fff}
}

/* ── 26. Просмотр фотографии товара ─────────────────────────────────── */
/*
 * Щелчок по фото раньше открывал сам файл картинки — страница товара
 * при этом терялась. Теперь фото показывается поверх страницы.
 */
body.is-locked{overflow:hidden}
.cs-lb{
  position:fixed;inset:0;z-index:1200;cursor:zoom-out;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(8,14,26,.86);
}
.cs-lb__img{max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:var(--r-xs);background:#fff}
.cs-lb__x{
  position:absolute;top:14px;right:16px;width:40px;height:40px;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;font:400 26px/1 var(--font-h);
}
.cs-lb__x:hover{background:rgba(255,255,255,.3)}
/* Листание снимков: стрелки по краям и счётчик снизу. Без них
   открытый снимок оставался один — чтобы увидеть второй, окно
   приходилось закрывать. */
.cs-lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;font:400 32px/1 var(--font-h);
  display:flex;align-items:center;justify-content:center;
}
.cs-lb__nav:hover{background:rgba(255,255,255,.32)}
.cs-lb__nav--prev{left:14px;padding-right:4px}
.cs-lb__nav--next{right:14px;padding-left:4px}
.cs-lb__n{position:absolute;left:0;right:0;bottom:18px;text-align:center;
  color:rgba(255,255,255,.8);font:600 13px/1 var(--font-h);letter-spacing:.04em}
@media(max-width:575.98px){
  .cs-lb{padding:12px}
  .cs-lb__nav{width:44px;height:44px;font-size:26px}
  .cs-lb__nav--prev{left:6px}
  .cs-lb__nav--next{right:6px}
}
.cs-gallery__main a{cursor:zoom-in;display:flex;align-items:center;justify-content:center;
  width:100%;height:100%}

/*
 * Картинка в статье, новости и акции. Была растянута на всю ширину
 * блока: макет 1600×900 занимал экран целиком, а мелкая картинка
 * всё равно раздувалась до той же рамки. Теперь блок не больше самой
 * картинки и не выше 420 px.
 */
.cs-article__pic{display:block;max-width:100%;width:auto;height:auto;
  max-height:420px;margin:18px auto;border-radius:var(--r-xs)}

/* ── 27. Промокод в корзине ─────────────────────────────────────────── */
/*
 * Поле стоит внутри итогов, а не отдельным блоком внизу: его ищут
 * глазами рядом с суммой, и на других сайтах оно там же.
 */
.cs-promo-code{margin:14px 0 4px;padding:14px 0 0;border-top:1px solid var(--ln-2)}
.cs-promo-code__row{display:flex;gap:8px}
.cs-promo-code__row input{
  /* flex-basis 0, а не auto: у поля ввода есть своя «естественная»
     ширина в двадцать знаков, и с basis:auto она попадала в расчёт
     минимальной ширины корзины. */
  flex:1 1 0;width:0;min-width:0;height:42px;padding:0 14px;
  border:1px solid var(--ln);border-radius:var(--r-xs);background:#fff;
  font:600 14px/1 var(--font-b);text-transform:uppercase;
}
.cs-promo-code__row input:focus{outline:0;border-color:var(--nv);box-shadow:var(--ring)}
.cs-promo-code__row .cs-btn{flex:0 0 auto;height:42px}
.cs-promo-code__on{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:var(--r-xs);
  background:var(--nv-50);border:1px dashed var(--nv-100);
}
.cs-promo-code__on b{font:800 14px/1.2 var(--font-h);color:var(--nv);letter-spacing:.04em}
.cs-promo-code__on .cs-muted{display:block;font-size:12px;margin-top:2px}
.cs-promo-code__on button{
  width:28px;height:28px;flex:0 0 auto;border:0;background:none;cursor:pointer;
  color:var(--ink-3);font:400 22px/1 var(--font-h);border-radius:50%;
}
.cs-promo-code__on button:hover{background:#fff;color:var(--ink)}
.cs-promo-code__err{margin:8px 0 0;font-size:13px;color:var(--or-d)}
.cs-promo-code__err[hidden]{display:none}
/* Скидка в итогах — зелёным: это единственная строка, которая уменьшает сумму. */
.cs-totals__row--off b{color:#0f7b3d}

/* ── 28. Партнёрская программа ──────────────────────────────────────── */
.cs-ref-hero{padding:28px 0 4px}
.cs-ref-hero__lead{margin:10px 0 0;font-size:17px;line-height:1.5;color:var(--ink-2);max-width:720px}
.cs-ref-nums{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:20px;
}
.cs-ref-num{background:#fff;border:1px solid var(--ln-2);border-radius:var(--r);padding:18px 20px}
.cs-ref-num b{display:block;font:800 30px/1 var(--font-h);color:var(--nv)}
.cs-ref-num span{display:block;margin-top:7px;font-size:13px;line-height:1.4;color:var(--ink-3)}

.cs-ref-rates{width:100%;border-collapse:collapse;margin-top:12px}
.cs-ref-rates td{padding:10px 0;border-bottom:1px solid var(--ln-2);font-size:15px}
.cs-ref-rates td:last-child{text-align:right;white-space:nowrap}

.cs-ref-list{margin:12px 0 0;padding-left:20px;line-height:1.6;color:var(--ink-2)}
.cs-ref-list li{margin-bottom:8px}

.cs-ref-form{position:sticky;top:16px;align-self:start}
.cs-ref-form__t{margin:0 0 14px;font-size:20px}
.cs-ref-form .cs-field{margin-bottom:14px}
.cs-ref-form .cs-check{margin:6px 0 14px;align-items:flex-start}
.cs-ref-form .cs-check.is-bad span{color:var(--or-d)}

/* Ссылка партнёра: её копируют, а не переписывают. */
.cs-ref-link{display:flex;gap:8px}
.cs-ref-link input{flex:1 1 0;width:0;min-width:0;font-family:var(--font-b)}
.cs-ref-link .cs-btn{flex:0 0 auto}

.cs-ref-tiles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:18px 0;
}
.cs-ref-tile{
  background:#fff;border:1px solid var(--ln-2);border-radius:var(--r);padding:18px 20px;
}
.cs-ref-tile--main{border-color:var(--nv-100);background:var(--nv-50)}
.cs-ref-tile__v{display:block;font:800 26px/1 var(--font-h);color:var(--ink)}
.cs-ref-tile--main .cs-ref-tile__v{color:var(--nv)}
.cs-ref-tile__t{display:block;margin-top:6px;font-size:13px;color:var(--ink-3)}
.cs-ref-tile .cs-btn{margin-top:14px}

.cs-ref-avail{margin:0 0 16px;padding:14px 16px;border-radius:var(--r-xs);
  background:var(--nv-50);font-size:13px;color:var(--ink-3)}
.cs-ref-avail b{display:block;margin-top:4px;font:800 24px/1 var(--font-h);color:var(--nv)}

/* Таблицы кабинета прокручиваются внутри себя: колонок много,
   а на телефоне их не сократить. */
.cs-table-box{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cs-ref-table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.cs-ref-table th{
  padding:10px 12px;text-align:left;border-bottom:1px solid var(--ln);
  font:700 11px/1 var(--font-h);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
}
.cs-ref-table td{padding:12px;border-bottom:1px solid var(--ln-2);vertical-align:top}
.cs-ref-table tbody tr:hover{background:var(--nv-50)}
.cs-nowrap{white-space:nowrap}

.cs-ref-st{
  display:inline-block;padding:3px 9px;border-radius:var(--r-pill);
  font:700 11px/1.5 var(--font-h);white-space:nowrap;
  background:var(--surf);color:var(--ink-3);
}
.cs-ref-st--approved,.cs-ref-st--paid{background:#e6f5ec;color:#0f7b3d}
.cs-ref-st--pending,.cs-ref-st--new{background:#fff4e5;color:#9a5b00}
.cs-ref-st--cancelled,.cs-ref-st--rejected{background:#fdeceb;color:var(--or-d)}

.cs-ref-warn,.cs-ref-ok{border-left:4px solid var(--or)}
.cs-ref-ok{border-left-color:#0f7b3d}
.cs-ref-warn p,.cs-ref-ok p{margin:8px 0 0;color:var(--ink-2)}

@media(max-width:767.98px){
  .cs-ref-form{position:static}
  .cs-ref-num b{font-size:26px}
}
/* Вход в партнёрский кабинет из обычного: других входов в него нет. */
.cs-acc-partner{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;text-decoration:none;color:inherit}
.cs-acc-partner span{color:var(--nv);font-weight:600}

/* ── 29. Подвал: подписка и колонки ─────────────────────────────────── */
.cs-footer__brand{max-width:320px}
.cs-footer__muted{color:rgba(255,255,255,.6)}
.cs-footer__phone a{font:800 18px/1.2 var(--font-h)}
.cs-footer__sub{max-width:300px}
.cs-sub__row{display:flex;gap:8px;margin-bottom:10px}
.cs-sub__input{
  flex:1 1 0;width:0;min-width:0;height:42px;padding:0 14px;
  border:1px solid rgba(255,255,255,.25);border-radius:var(--r-xs);
  background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:14px;
}
.cs-sub__input::placeholder{color:rgba(255,255,255,.5)}
.cs-sub__input:focus{outline:0;border-color:#fff;background:rgba(255,255,255,.14)}
.cs-sub__go{
  flex:0 0 auto;height:42px;padding:0 18px;border:0;border-radius:var(--r-xs);
  background:var(--or);color:#fff;font:800 13px/1 var(--font-h);cursor:pointer;
  letter-spacing:.04em;
}
.cs-sub__go:hover{background:var(--or-d)}
.cs-sub__go[disabled]{opacity:.6;cursor:default}
.cs-sub__agree{display:flex;gap:8px;align-items:flex-start;font-size:12px;
  line-height:1.45;color:rgba(255,255,255,.65);cursor:pointer}
.cs-sub__agree input{width:16px;height:16px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--or)}
.cs-sub__agree a{color:rgba(255,255,255,.9);text-decoration:underline}
.cs-sub__note{margin:10px 0 0;font-size:12px;line-height:1.45;color:rgba(255,255,255,.6)}
.cs-sub__note--ok{color:#8ee0a8}
.cs-sub__note--bad{color:#ffb4a8}
.cs-footer__dev{margin-left:auto}

/* ── 30. Партнёрская программа: колонки пошире ──────────────────────── */
/*
 * Форма заявки стояла в колонке 320 px: восемь полей в столбик,
 * и половина экрана рядом пустовала. Теперь колонка вдвое шире,
 * а поля внутри идут парами.
 */
.cs-ref-cols{grid-template-columns:minmax(0,1fr) 560px}
.cs-ref-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.cs-ref-grid .cs-field{margin-bottom:14px}

/* Вход для тех, кто уже регистрировался: свёрнут, чтобы не спорить
   с заявкой за внимание, но виден. */
.cs-ref-login{
  margin:0 0 20px;padding:14px 16px;border-radius:var(--r-xs);
  background:var(--surf);border:1px solid var(--ln-2);
}
.cs-ref-login summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--nv)}
.cs-ref-login[open] summary{margin-bottom:14px}
.cs-ref-login__foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

@media(max-width:1199.98px){
  .cs-ref-cols{grid-template-columns:minmax(0,1fr) 420px}
}
@media(max-width:991.98px){
  .cs-ref-cols{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:599.98px){
  .cs-ref-grid{grid-template-columns:1fr}
}

/* ── 31. Подбор аккумулятора ────────────────────────────────────────── */
.cs-akb-head{display:flex;align-items:center;gap:22px;margin:8px 0 20px;flex-wrap:wrap}
.cs-akb-head__pic{width:190px;height:auto;border-radius:var(--r-xs);flex:0 0 auto}

/*
 * Требования — одним блоком с одной кнопкой. Ответ справочника не список
 * вариантов: все условия действуют вместе, и разносить их по карточкам
 * значило бы предлагать подбор, которого не бывает.
 */
.cs-akb-fit{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start;
  background:#fff;border:1px solid var(--ln-2);border-radius:var(--r);
  box-shadow:var(--sh-1);padding:26px 28px;margin-bottom:26px;
}
.cs-akb-fit__specs{margin:0;display:grid;gap:0}
.cs-akb-fit__row{
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;
  padding:13px 0;border-bottom:1px solid var(--ln-2);
}
.cs-akb-fit__row:last-child{border-bottom:0;padding-bottom:0}
.cs-akb-fit__row dt{margin:0;color:var(--ink-3);font-size:14px}
.cs-akb-fit__row dd{margin:0;font-size:15px;font-weight:600}
.cs-akb-fit__row--main dd{font-size:17px}
.cs-akb-fit__row--main dd b{font:800 22px/1.2 var(--font-h);color:var(--nv)}
.cs-akb-fit__row .cs-muted{font-weight:400;font-size:13px}
.cs-akb-fit__go{position:sticky;top:16px}
.cs-akb-fit__go .cs-hint{margin-top:10px;text-align:center}

@media(max-width:767.98px){
  .cs-akb-fit{grid-template-columns:minmax(0,1fr);gap:20px;padding:20px}
  .cs-akb-fit__row{grid-template-columns:minmax(0,1fr);gap:4px;padding:11px 0}
  .cs-akb-fit__go{position:static}
  .cs-akb-head__pic{width:120px}
}

/* ── 32. Характеристики в две колонки ───────────────────────────────── */
/*
 * Таблица в один столбец растягивала карточку на два экрана: пока
 * человек долистывал характеристики, кнопка «в корзину» уезжала.
 * Те же строки в две колонки занимают вдвое меньше высоты.
 */
.cs-props{margin:0;display:grid;grid-template-columns:minmax(0,1fr);font-size:14px}
.cs-props__r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px dashed var(--ln-2)}
.cs-props__r dt{margin:0;color:var(--ink-3)}
.cs-props__r dd{margin:0;font-weight:600;text-align:right}
.cs-props__r dd a{color:var(--nv);border-bottom:1px dashed currentColor}
.cs-props__r dd a:hover{border-bottom-color:transparent}

/* ── 33. Меню-якоря страницы товара ─────────────────────────────────── */
/*
 * Липкая полоса с разделами. Прокрутка плавная, а не прыжком:
 * прыжок сбивает — непонятно, вверх ты уехал или вниз. Отступ
 * scroll-margin-top держит заголовок раздела ниже самой полосы,
 * иначе она накрывает то, к чему привела.
 */
.cs-tabs{
  position:sticky;top:0;z-index:20;display:flex;gap:6px;overflow-x:auto;
  background:#fff;border-radius:var(--r);box-shadow:var(--sh-1);
  padding:8px;margin-top:22px;scrollbar-width:none;
}
.cs-tabs::-webkit-scrollbar{display:none}
.cs-tabs__i{
  flex:0 0 auto;padding:10px 16px;border-radius:var(--r-sm);
  font:700 14px/1 var(--font-h);color:var(--ink-2);white-space:nowrap;
  transition:background var(--t),color var(--t);
}
.cs-tabs__i span{
  display:inline-block;margin-left:6px;padding:2px 7px;border-radius:var(--r-pill);
  background:var(--ln-2);color:var(--ink-3);font:700 11px/1.4 var(--font);
}
.cs-tabs__i:hover{background:var(--nv-50);color:var(--nv)}
.cs-tabs__i.is-on{background:var(--nv);color:#fff}
.cs-tabs__i.is-on span{background:rgba(255,255,255,.22);color:#fff}
/* Раздел, к которому ведёт якорь, не должен прятаться под полосой. */
#akcii,#alternativa,#razbor,#opisanie,#otzyvy,#dostavka{scroll-margin-top:78px}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── 34. Альтернатива: тот же размер у других марок ─────────────────── */
.cs-head__n{color:var(--ink-3);font-weight:400;font-size:.75em}
.cs-head__all{margin-left:auto;font-size:14px;white-space:nowrap;min-width:0;max-width:100%}
.cs-alt{display:grid;gap:0}
.cs-alt__head,.cs-alt__r{
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px 54px 110px 130px 84px;
  gap:12px;align-items:center;
}
.cs-alt__head{padding:0 10px 8px;font-size:12px;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.03em;border-bottom:1px solid var(--ln)}
.cs-alt__r{padding:9px 10px;border-radius:var(--r-xs);font-size:14px}
.cs-alt__r:nth-child(odd){background:var(--surf)}
.cs-alt__r.is-current{background:var(--nv-50);box-shadow:inset 0 0 0 1px var(--nv-100)}
.cs-alt__n{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.cs-alt__n a{color:var(--nv);font-weight:600}
.cs-alt__n a:hover{text-decoration:underline}
.cs-alt__you{font-size:11px;color:var(--ink-3)}
.cs-alt__s{color:var(--ink-2);white-space:nowrap}
.cs-alt__t{display:flex;gap:4px}
.cs-alt__q{display:flex;flex-direction:column;gap:3px}
.cs-alt__ql{font-size:11px;color:var(--ink-3)}
.cs-alt__p{text-align:right;white-space:nowrap;display:flex;gap:6px;
  align-items:baseline;justify-content:flex-end}
.cs-alt__p b{font:800 16px/1 var(--font-h)}
.cs-alt__p b.is-sale{color:var(--or)}
.cs-alt__p s{color:var(--ink-3);font-size:12px}
.cs-alt__off{background:var(--or);color:#fff;border-radius:var(--r-xs);
  padding:2px 5px;font:700 11px/1.3 var(--font)}
.cs-alt__b{display:flex;gap:6px;justify-content:flex-end}
.cs-alt__b form{display:contents}
.cs-alt__price{text-align:right}

/* Полоска остатка: три деления вместо цифры. Точный остаток чужого
   склада всё равно меняется в течение дня. */
.cs-bar{display:block;width:44px;height:7px;border-radius:var(--r-pill);background:var(--ln)}
.cs-bar--1{background:linear-gradient(90deg,var(--warn) 33%,var(--ln) 33%)}
.cs-bar--2{background:linear-gradient(90deg,#a8c93a 66%,var(--ln) 66%)}
.cs-bar--3{background:var(--ok)}

.cs-icon-btn{
  width:34px;height:34px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ln);border-radius:var(--r-sm);background:#fff;color:var(--ink-2);
  cursor:pointer;transition:border-color var(--t),color var(--t),background var(--t);
}
.cs-icon-btn:hover{border-color:var(--nv);color:var(--nv)}
.cs-icon-btn.is-on{background:var(--nv);border-color:var(--nv);color:#fff}
.cs-icon-btn.is-done{background:var(--ok);border-color:var(--ok);color:#fff}

/*
 * Телефон: строка на шесть колонок в 320 точек не помещается, а гонять
 * таблицу вбок пальцем — то, от чего мы и уходим. Строка разбирается
 * на карточку: название, под ним размер и наличие, справа цена.
 */
@media(max-width:767.98px){
  /* Почта партнёра и «выйти» в шапке кабинета: на узком экране
     переносятся под заголовок и не тянут страницу вбок. */
  .cs-head__all{margin-left:0;flex-basis:100%;white-space:normal;overflow-wrap:anywhere}
  .cs-alt__head{display:none}
  .cs-alt{gap:8px}
  .cs-alt__r{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:'n n' 's t' 'q p' 'b b';
    gap:6px 12px;padding:12px;border:1px solid var(--ln-2);background:#fff;
  }
  .cs-alt__r:nth-child(odd){background:#fff}
  .cs-alt__r.is-current{background:var(--nv-50)}
  .cs-alt__n{grid-area:n}
  .cs-alt__s{grid-area:s}
  .cs-alt__t{grid-area:t;justify-content:flex-end}
  .cs-alt__q{grid-area:q;flex-direction:row;align-items:center;gap:8px}
  .cs-alt__p{grid-area:p}
  .cs-alt__b{grid-area:b;justify-content:stretch}
  .cs-alt__b form{display:flex;flex:1 1 auto}
  .cs-alt__b form .cs-icon-btn{flex:1 1 auto;width:auto}
  .cs-alt__b > .cs-icon-btn{flex:0 0 52px;width:52px}
  .cs-tabs{top:0;padding:6px;margin-top:16px}
  .cs-tabs__i{padding:9px 12px;font-size:13px}
}

/* ── 35. Акции, в которых участвует товар ───────────────────────────── */
/*
 * Отдельным блоком, а не строкой в колонке покупки: акций бывает
 * несколько, и в колонке они отодвигали вниз всё остальное — цену,
 * наличие, кнопку.
 *
 * Класс нарочно свой: .cs-promos — это сетка плиток на главной
 * и в списках новостей и акций, и общее имя красило их в оранжевый.
 */
.cs-act{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:12px}
.cs-act__i{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;
  border:1px solid var(--ln);border-radius:var(--r-sm);color:var(--ink);
  transition:border-color var(--t),box-shadow var(--t)}
.cs-act__i:hover{border-color:var(--or);box-shadow:var(--sh-1)}
.cs-act__n{min-width:0;font-weight:600}
.cs-act__d{display:block;margin-top:3px;font-weight:400;font-size:13px;color:var(--ink-3)}

/* ── 36. Ответ транспортных компаний ────────────────────────────────── */
/*
 * Список, а не одна строка: у каждой компании своя цена и свой срок,
 * и выбирает человек. Самая дешёвая помечена — но не выбрана за него.
 */
.cs-tk{border:1px solid var(--ln);border-radius:var(--r-sm);overflow:hidden}
.cs-tk__h{padding:10px 14px;background:var(--bg);font-size:13px;color:var(--ink-3)}
.cs-tk__r{display:grid;grid-template-columns:minmax(0,1fr) 120px 120px;gap:12px;
  align-items:center;padding:12px 14px;border-top:1px solid var(--ln-2)}
.cs-tk__r.is-best{background:var(--nv-50)}
.cs-tk__n{font-weight:600;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.cs-tk__n .cs-muted{font-weight:400;font-size:12px}
.cs-tk__best{background:var(--ok);color:#fff;border-radius:var(--r-pill);
  padding:2px 8px;font:700 11px/1.5 var(--font)}
.cs-tk__d{color:var(--ink-2);font-size:14px}
.cs-tk__p{text-align:right;font:800 18px/1 var(--font-h);color:var(--nv)}
.cs-tk .cs-hint{padding:10px 14px;margin:0;border-top:1px dashed var(--ln-2)}
.cs-tk__points{padding:14px;border-top:1px solid var(--ln-2)}
.cs-tk__t{font:800 13px/1 var(--font-h);text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3);margin-bottom:10px}
.cs-tk__list{margin:6px 0 0;padding-left:18px;font-size:14px}
.cs-tk__list li{margin:3px 0}
.cs-tk__map{height:360px;border-radius:var(--r-sm);overflow:hidden;background:var(--bg)}
/* Выбранная точка — под картой, там же, где её и ищут глазами. */
.cs-tk__pt{margin-top:10px;padding:12px 14px;border:1px solid var(--ln-2);
  border-radius:var(--r-sm);font-size:14px;color:var(--ink-3)}
.cs-tk__pt b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}

@media(max-width:767.98px){
  .cs-tk__r{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'n n' 'd p';gap:6px 12px}
  .cs-tk__n{grid-area:n}
  .cs-tk__d{grid-area:d}
  .cs-tk__p{grid-area:p}
  .cs-tk__map{height:280px}
}

/* ── 37. Контакты ───────────────────────────────────────────────────── */
/*
 * Три вопроса, с которыми приходят на эту страницу: куда ехать, куда
 * звонить, кому платить. Поэтому телефоны и адрес — плитками сверху,
 * карта отдельным блоком, реквизиты ниже.
 */
.cs-cnt{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px}
.cs-cnt__i{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;
  border:1px solid var(--ln);border-radius:var(--r-sm);color:var(--ink);
  transition:border-color var(--t),box-shadow var(--t)}
a.cs-cnt__i:hover{border-color:var(--nv);box-shadow:var(--sh-1)}
.cs-cnt__i b{display:block;font:700 17px/1.25 var(--font-h)}
.cs-cnt__i--wide{grid-column:1/-1}
.cs-cnt__ic{flex:0 0 auto;width:40px;height:40px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  background:var(--nv-50);color:var(--nv)}
.cs-cnt__d{display:block;margin-top:4px;font-size:13px;color:var(--ink-3)}

/* Карта: рамка с постоянным соотношением сторон — иначе при загрузке
   страница дёргается, подставляя её высоту. */
.cs-map{position:relative;aspect-ratio:16/7;border-radius:var(--r-sm);
  overflow:hidden;background:var(--bg)}
.cs-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.cs-cnt2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:28px}
/* Реквизиты набирают таблицей в редакторе, а таблица в 320 точек
   не сжимается сама — и растягивает страницу вбок. Фиксируем раскладку,
   а на телефоне разбираем строки на две: подпись и значение. */
.cs-req{font-size:14px}
.cs-req p{margin:0 0 6px}
.cs-req table{border-collapse:collapse;width:100%;table-layout:fixed}
.cs-req td{padding:4px 14px 4px 0;vertical-align:top;word-break:break-word}
.cs-req td:first-child{color:var(--ink-3);width:42%}

@media(max-width:767.98px){
  .cs-map{aspect-ratio:4/5}
  .cs-cnt__i{padding:14px}
  .cs-req table,.cs-req tbody,.cs-req tr,.cs-req td{display:block;width:auto}
  .cs-req tr{padding:6px 0;border-bottom:1px dashed var(--ln-2)}
  .cs-req td{padding:0}
  .cs-req td:first-child{width:auto;font-size:12px}
}

/* Служебная строка расчёта доставки: почему перевозчик промолчал.
   Приходит только сотруднику — в ответе покупателю её нет. */
.cs-tk__dbg{padding:10px 14px;border-top:1px dashed var(--ln-2);
  font-size:12px;color:var(--ink-3);line-height:1.5}

/* ── Подсказка города в расчёте доставки ─────────────────────────────
   Список лежит поверх страницы и не сдвигает кнопку «Рассчитать». */
.cs-suggest{position:relative}
.cs-suggest__list{position:absolute;left:0;right:0;top:100%;z-index:40;margin:4px 0 0;padding:6px;
  list-style:none;background:#fff;border:1px solid var(--ln);border-radius:var(--r-sm);
  box-shadow:var(--sh-2);max-height:320px;overflow:auto}
.cs-suggest__i{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:var(--r-xs);cursor:pointer}
.cs-suggest__i b{font-weight:600;color:var(--ink);font-size:15px}
.cs-suggest__i span{font-size:12px;color:var(--ink-3)}
.cs-suggest__i:hover,.cs-suggest__i.is-on{background:var(--nv-50)}
.cs-suggest__none{padding:10px 12px;color:var(--ink-3);font-size:14px}
.cs-suggest__err{position:absolute;left:0;top:100%;margin-top:4px;font-size:12.5px;color:#d9392b}

/* Строка перевозчика, пока он считает, и если не посчитал. */
.cs-tk__r.is-wait .cs-tk__n{color:var(--ink-2)}
.cs-tk__r.is-wait .cs-tk__d{display:flex;align-items:center;gap:8px;color:var(--ink-3)}
.cs-tk__r.is-off{opacity:.55}
.cs-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--nv-50);
  border-top-color:var(--nv);animation:cs-spin .8s linear infinite;flex:0 0 auto}
@keyframes cs-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cs-spin{animation-duration:2.4s}}

/* Легенда карты пунктов выдачи: чей пункт каким цветом. */
.cs-tk__legend{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.cs-tk__legend button{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--ln);background:#fff;font:600 13px/1 var(--font);color:var(--ink);cursor:pointer}
.cs-tk__legend button span{color:var(--ink-3);font-weight:500}
.cs-tk__legend button:not(.is-on){opacity:.45;text-decoration:line-through}
.cs-tk__legend i,.cs-tk__who i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto}
.cs-tk__who{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  color:var(--ink-2);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}

/*
 * Сертификаты соответствия в карточке товара.
 *
 * Номер документа — ссылка в реестр, всё остальное подписями рядом:
 * человеку важно увидеть, что документ действует, а не читать таблицу.
 */
.cs-certs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cs-certs__i{display:grid;grid-template-columns:minmax(200px,340px) 1fr;
  gap:6px 20px;align-items:baseline;padding:12px 14px;
  background:var(--surf);border-radius:var(--r-sm)}
.cs-certs__n{font-weight:700;font-size:14.5px;word-break:break-word}
.cs-certs__m{display:flex;flex-wrap:wrap;gap:4px 18px;
  font-size:13px;color:var(--ink-2)}
.cs-certs__note{margin:14px 0 0;font-size:13px;line-height:1.5}
@media (max-width:640px){
  .cs-certs__i{grid-template-columns:1fr}
}

/*
 * «Про этот размер» — текст под конкретный товар.
 *
 * Две колонки: слева разбор размера словами, справа автомобили.
 * Список машин длинный, и в одну колонку он отжимает текст вниз,
 * куда до него не доходят.
 */
.cs-sn{display:grid;grid-template-columns:1fr 320px;gap:24px 32px;align-items:start}
.cs-sn__main p{margin:0 0 12px;line-height:1.6}
.cs-sn__main p:last-child{margin-bottom:0}
.cs-sn__tags{display:flex;flex-wrap:wrap;gap:8px}
.cs-sn__tags span{display:inline-block;padding:4px 10px;border-radius:999px;
  background:var(--surf);font-size:13px;color:var(--ink-2)}
.cs-sn__cars{background:var(--surf);border-radius:var(--r-sm);padding:16px 18px}
.cs-sn__h{margin:0 0 10px;font:700 14px/1.35 var(--font-h);color:var(--ink)}
.cs-sn__list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:7px}
.cs-sn__list li{font-size:13.5px;line-height:1.4}
.cs-sn__list b{display:block}
.cs-sn__list span{color:var(--ink-2)}
@media (max-width:860px){
  .cs-sn{grid-template-columns:1fr}
}

/* «Что такое 205/55 R16» — тот же макет, что в карточке товара. */
.cs-szn .cs-sn__main p{font-size:14.5px}

/*
 * «Секунду, загружаем» — страница подбора до проверки браузера.
 * Живёт доли секунды, поэтому ни картинок, ни анимации появления:
 * мелькнувший и тут же исчезнувший блок раздражает сильнее пустоты.
 */
.cs-wait{background:#fff;border-radius:var(--r);box-shadow:var(--sh-1);
  padding:40px;text-align:center;margin-bottom:20px}
.cs-wait__text{margin:0 0 10px;color:var(--ink-2);line-height:1.6}
.cs-wait__text:last-child{margin-bottom:0}
/* Круг тот же, что у расчёта доставки (.cs-spin), только крупнее:
   второй набор правил и вторая анимация под одно и то же —
   это и лишний вес, и два места, где потом разъедутся цвета. */
.cs-wait__spin{width:34px;height:34px;margin:0 auto 18px;border-width:3px}
.cs-wait__late{color:var(--ink)}

/*
 * Размер текста из редактора админки. Ступени, а не произвольные
 * пиксели: контент-менеджер меняет величину абзаца, не разваливая
 * типографику страницы. Те же классы объявлены и в админке —
 * чтобы в редакторе было видно ровно то, что увидит покупатель.
 */
.cs-t--sm{font-size:.875em}
.cs-t--lg{font-size:1.15em}
.cs-t--xl{font-size:1.35em;line-height:1.4}

/*
 * Подсказки перед оплатой: про VPN и про браузер.
 *
 * Две строки, и выглядят они по-разному нарочно. Первая спокойная —
 * это совет. Вторая жёлтая со знаком — это предупреждение, после
 * которого платёж может не пройти. Если оформить их одинаково,
 * читать перестанут обе.
 */
.cs-paynote{margin-top:14px;display:grid;gap:8px}
.cs-paynote__i,.cs-paynote__w{margin:0;padding:11px 14px;border-radius:var(--r-sm);
  font-size:14px;line-height:1.5}
.cs-paynote__i{background:var(--surf);color:var(--ink-2)}
.cs-paynote__w{background:#fdf3dc;color:#6b4e00;display:flex;gap:9px;align-items:flex-start}
.cs-paynote__w::before{content:'!';flex:0 0 18px;width:18px;height:18px;margin-top:1px;
  border-radius:50%;background:#e9a700;color:#fff;font:700 12px/18px var(--font-h);
  text-align:center}