/* Шрифты лежат у нас, а не у Google. Две причины.
     1. В Lato с Google нет кириллицы: русский текст рисовался системным
        шрифтом (Helvetica, Arial, Roboto — смотря у кого), а цифры и
        латиница — Lato, и в одной строке «185/60R14 Бел-267» стояли два
        разных шрифта. Здесь Lato 3 с кириллицей.
     2. Google Fonts получает адрес каждого посетителя, а по 152-ФЗ это
        передача данных за границу.
     Имя у шрифта своё: лицензия OFL запрещает урезанной копии называться
     «Lato» (Reserved Font Name). Лицензии — в config/fonts-*-OFL.txt.
     Знака ₽ в Lato нет — он придёт из системного шрифта. */
  @font-face { font-family: "Rovnye Sans"; font-weight: 400; font-display: swap;
    src: url("/static/rs-400.woff2") format("woff2"); }
  @font-face { font-family: "Rovnye Sans"; font-weight: 700; font-display: swap;
    src: url("/static/rs-700.woff2") format("woff2"); }
  @font-face { font-family: "Rovnye Sans"; font-weight: 900; font-display: swap;
    src: url("/static/rs-900.woff2") format("woff2"); }
  /* Знак магазина — Montserrat 900, урезанный до букв и цифр. */
  @font-face { font-family: "Rovnye Mark"; font-weight: 900; font-display: swap;
    src: url("/static/mark-900.woff2") format("woff2"); }

  /* Светлая страница целиком. Каталожные фото идут с залитым белым фоном,
     на белом поле они ложатся без швов — на тёмном превращались в плитки. */
  :root {
    --ink: #0e1116; --ink-2: #171b22; --ink-3: #222833;
    --paper: #f5f6f8; --card: #fff; --line: #e4e7eb;
    --bar: rgba(255,255,255,.93); --strip: #f4f6f8; --hover: #f1f3f6;
    --field: #fff; --field-line: #c9cfd6; --tint: #fff;
    /* Фотографии поставщиков идут с залитым белым фоном. На тёмной
       странице они превращались бы в белые плитки, поэтому подложка
       под фото остаётся светлой в обеих темах — только приглушается. */
    --plate: #fff;
    --bone: #eceef1; --bone-2: #f5f6f8;
    --disc-1: #ffeeda; --disc-2: #ffdfc2; --disc-3: #ffd0a2;
    --chip-on: var(--ink); --chip-on-text: var(--on-dark);
    --text: #11151a; --muted: #6a7380; --on-dark: #eef1f5; --on-dark-dim: #9aa5b4;
    --accent: #ff7a1a; --accent-2: #ffb25c;
    /* На белом чистый #ff7a1a даёт контраст около 2.9:1 и плохо читается,
       поэтому у текста свой, притемнённый тон того же цвета. */
    --accent-txt: #d9620a; --blue: #1559b8;
    --accent-ink: #1a0d00; --good: #15803d; --warn: #b45309;
    /* Незаполненное обязательное поле. На тёмной теме тот же тон
       уходит в грязь, поэтому в тёмной он свой. */
    --bad: #c0392b;
    /* Отступ под липкой шапкой: её высота плюс воздух. Одна величина —
       иначе при смене высоты шапки якоря и липкая колонка разъезжаются. */
    --sticky: 101px;
    --r: 14px; --shadow: 0 1px 2px rgba(16,22,30,.06), 0 8px 24px rgba(16,22,30,.07);
    --shadow-up: 0 2px 6px rgba(16,22,30,.09), 0 18px 40px rgba(16,22,30,.14);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--paper); color: var(--text);
    /* Lato (у нас — «Rovnye Sans»), как у Tire Rack. Пока шрифт грузится, стоит
       Helvetica: рисунок буквы близкий, вёрстка не поедет. */
    font: 15px/1.55 "Rovnye Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
  .num { font-variant-numeric: tabular-nums; }

  /* --- шапка --- */
  .util { background: var(--strip); border-bottom: 1px solid var(--line);
    font-size: 12px; color: var(--muted); }
  .util .wrap { display: flex; gap: 18px; align-items: center; height: 33px;
    white-space: nowrap; overflow: hidden; }
  .util b { color: var(--text); font-weight: 700; }
  header {
    position: sticky; top: 0; z-index: 40;
    background: var(--bar);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
    color: var(--text);
  }
  .bar { display: flex; align-items: center; gap: 22px; height: 78px; }
  /* Знак магазина. У названия своя гарнитура, как у зарубежных: для вывески
     берут более характерную, чем для текста. Два яруса, нижнее слово растянуто
     точно по ширине верхнего (разрядку считает скрипт), между ними черта.
     Montserrat 900; Lato запасной, если шрифт не придёт. */
  :root { --mark-font: "Rovnye Mark", "Rovnye Sans", "Helvetica Neue", Arial, sans-serif; }
  .mark { font-family: var(--mark-font); font-size: 20px; font-weight: 900;
    letter-spacing: -.03em; white-space: nowrap; line-height: .97;
    display: inline-flex; align-items: center; gap: 12px; color: var(--text); }
  .mark .words { display: inline-block; }
  /* Шина катится и ложится. Высоту ставит скрипт — ровно по высоте надписи;
     запасное значение на случай, если скрипт не успел. */
  .mark .fall { height: 2.26em; width: auto; flex: 0 0 auto; }
  .mark .top { display: block; }
  .mark .rule { display: block; height: 3px; background: var(--accent);
    margin: 3px 0 2px; }
  .mark .bottom { display: block; color: var(--accent-txt); }
  .nav { display: flex; gap: 17px; font-size: 13.5px; font-weight: 700; }
  .nav a { padding-bottom: 2px; border-bottom: 2px solid transparent; }
  .nav a.on { border-bottom-color: var(--accent); }
  .nav a:hover { border-bottom-color: var(--line); }
  /* Шапка липкая и накрыла бы начало блока, к которому ведёт ссылка. */
  .anchor { display: block; position: relative; top: calc(var(--sticky) * -1);
    height: 0; }
  #catalog { scroll-margin-top: var(--sticky); }
  .tagline { color: var(--muted); font-size: 13px; }
  .bar .spacer { flex: 1; }
  .call {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 15px; border-radius: 8px; font-weight: 700;
    background: var(--card); color: var(--text); border: 1.5px solid var(--text);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .call:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16,22,30,.2); }

  /* --- герой --- */
  .hero {
    /* Высота полосы. Снимок вынут из потока и держать её больше нечему,
       а без неё герой сжимается по тексту и фотография обрезается. */
    --band: 252px;
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--card); color: var(--text);
    border-bottom: 1px solid var(--line); padding: 16px 0 18px;
  }
  .hero .inner { min-height: var(--band); }
  /* Текст и поля — поверх подложки. */
  /* min-width нужен обязательно: колонка сетки по умолчанию не сжимается
     меньше своего содержимого, и строка из четырёх списков «по автомобилю»
     распирала её, выезжая на фотографию. */
  .hero .inner > :not(.art) { position: relative; z-index: 1; min-width: 0; }
  .hero .inner { position: relative; display: grid;
    grid-template-columns: 1fr 400px; gap: 14px; align-items: center; }
  .hero h1 { margin: 0 0 4px; font-size: 31px; line-height: 1.14; font-weight: 900;
    letter-spacing: -.02em; }
  .hero h1 .n { color: var(--accent-txt); }

  /* Два заголовка в глубину. Передний — свой каталог, задний — соседний:
     тот же крупный счётчик, но размытый, мельче и ниже-правее, как будто
     стоит на полку дальше. Так видно, что рядом есть ещё одна такая же
     полка, и на неё можно встать — плитки в полосе категорий для этого
     не нужно. Глубину даёт размытие и размер, а не бледность: выцветший
     текст читается как «недоступно», а размытый — как «не в фокусе».
     Поворота по оси Y тут нет намеренно: от него буквы сжимались по
     горизонтали и надпись выглядела набранной другим, узким шрифтом.
     Сдвиг и отступ вынесены в переменные: на узком экране заголовок мельче,
     и те же пиксели увели бы задний за край. */
  .heads { position: relative;
    --сдвиг: 92px; --глубина: 26px; padding-bottom: calc(var(--глубина) + 4px); }
  .heads .near, .heads .far { display: block; margin: 0 0 4px; font-size: 31px;
    line-height: 1.14; font-weight: 900; letter-spacing: -.02em;
    color: var(--text); text-decoration: none; transform-origin: left center;
    transition: transform .42s ease, filter .42s ease, opacity .42s ease; }
  .heads .n { color: var(--accent-txt); }
  .heads .near { position: relative; z-index: 2; }
  .heads .far { position: absolute; left: 0; top: var(--глубина); z-index: 1;
    white-space: nowrap; cursor: pointer; opacity: .5; filter: blur(2.2px);
    transform: translateX(var(--сдвиг)) scale(.74); }
  .heads .far:hover { opacity: .8; filter: blur(1px); }
  /* Переворот перед переходом: передний уходит назад и вправо, задний
     выходит вперёд. На соседней странице заголовки уже стоят в этом
     положении, поэтому движение читается как одно, а не как два разных. */
  .heads.turning .near { opacity: .5; filter: blur(2.2px);
    transform: translate(var(--сдвиг), var(--глубина)) scale(.74); }
  .heads.turning .far { opacity: 1; filter: none;
    transform: translateY(calc(-1 * var(--глубина))); }

  /* Уход на соседнюю полку. Шапка и верхняя полоса остаются на месте —
     они одинаковые на обеих страницах, и если их не трогать, переход
     читается как смена содержимого, а не как новая страница. Гасим только
     то, что ниже, и ровно настолько, чтобы глаз успел заметить движение. */
  .leaving .hero .inner > div > :not(.heads),
  .leaving .hero .inner > .art,
  .leaving .cats, .leaving .entries, .leaving .wrap > .block,
  .leaving .cols, .leaving footer {
    opacity: 0; transform: translateY(8px);
    transition: opacity .32s ease, transform .32s ease; }
  @media (prefers-reduced-motion: reduce) {
    .leaving .hero .inner > div > *, .leaving .hero .inner > .art,
    .leaving .cats, .leaving .entries,
    .leaving .wrap > .block, .leaving .cols, .leaving footer {
      opacity: 1; transform: none; transition: none; } }

  /* Приход: содержимое проявляется снизу вверх тем же движением. */
  .arriving .hero .inner > div > :not(.heads),
  .arriving .hero .inner > .art,
  .arriving .cats, .arriving .entries {
    animation: приход .36s ease both; }
  @keyframes приход { from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; } }

  .hero p { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; }
  .hero .lab { font-size: 11.5px; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--muted); margin: 2px 0 8px;
    display: flex; align-items: baseline; flex-wrap: wrap;
    /* Между вкладками зазор нужен, между строками — нет: подсказка
       относится к вкладке над собой и должна стоять к ней вплотную. */
    column-gap: 14px; row-gap: 0; }
  /* Два входа в каталог переключаются на месте: отдельными страницами они
     разъехались бы, а человек выбирает способ, а не раздел. */
  .lab .tab { background: none; border: 0; padding: 0 0 3px; font: inherit;
    color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent;
    border-radius: 0; }
  .lab .tab:hover { color: var(--text); transform: none; box-shadow: none; }
  .lab .tab.on { color: var(--text); border-bottom-color: var(--accent); }
  /* Подсказка — отдельной строкой под вкладками, слева, прямо под
     «по размеру»: в одну строку с вкладками она читалась как третья
     вкладка, а прижатая вправо висела посреди пустого места.
     Атрибут hidden ей ставит тот же переключатель, что и панелям. */
  /* Своя строка — но прижатая влево: кнопка по умолчанию выравнивает
     текст по центру, и растянутая на всю ширину подсказка снова уезжала
     на середину. */
  .lab .hint { flex: 0 0 100%; margin-top: 1px; text-transform: none;
    letter-spacing: 0; text-align: left; }
  .lab .hint[hidden] { display: none; }

  /* Выбор машины: четыре ступени, каждая открывается после предыдущей.
     Списков четыре, а не три, и в одну строку они не помещались — строка
     выезжала на фотографию справа, поля на ней выглядели полупрозрачными.
     Поэтому сетка 2×2 с потолком по ширине: фотография занимает правые 58%
     полосы, и поля не должны её доставать ни на каком экране. */
  .picker.cars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; max-width: 460px; align-items: end; }
  .picker.cars .field { min-width: 0; }
  .picker.cars > .go, .cars-msg { grid-column: 1 / -1; justify-self: start; }
  .picker.cars select:disabled { opacity: .5; cursor: default; }
  .cars-msg { flex: 1 0 100%; font-size: 12.5px; color: var(--muted);
    text-transform: none; letter-spacing: 0; font-weight: 400; }
  .cars-msg.bad { color: var(--bad); font-weight: 700; }

  /* Строка над выдачей: по какой машине подобрано и из чего выбирать.
     Размеры вынесены в отдельный ряд крупными кнопками: в общей строке
     они читались как справка, и второй штатный размер замечали не все. */
  .car-note { background: var(--strip); border: 1px solid var(--line);
    border-radius: var(--r); padding: 11px 14px 13px; margin-bottom: 14px; }
  .car-note .who { display: flex; align-items: baseline; gap: 8px;
    flex-wrap: wrap; margin-bottom: 9px; }
  .car-note b { font-size: 15px; }
  .car-note .who span { color: var(--muted); font-size: 13px; }
  .car-note .more { margin-left: auto; }
  .chips.sizes { gap: 8px; margin-top: 0; }
  .chips.sizes .chip.size { display: inline-flex; align-items: baseline; gap: 7px;
    padding: 8px 14px; border-width: 1.5px; }
  .chips.sizes .chip.size b { font-size: 15px; font-weight: 800; }
  .chips.sizes .chip.size .n { margin-left: 0; font-size: 11.5px; }
  .chips.sizes .chip.size:hover { border-color: var(--accent); }
  /* Давление показываем под размерами: оно меняется вместе с выбором. */
  .car-note .press { margin-top: 9px; font-size: 13px; color: var(--muted); }
  .car-note .press b { font-size: 13.5px; color: var(--text); }
  .car-note .press span { font-size: 12px; }
  /* Предложение дисков — не приписка, а отдельная строка с кнопкой:
     человек, который подобрал шины по машине, и есть покупатель дисков,
     и надеяться, что он сам догадается нажать надпись в шапке, не стоит. */
  .car-note .tothe { margin-top: 11px; padding-top: 10px;
    border-top: 1px dashed var(--line); display: flex; align-items: center;
    gap: 10px; flex-wrap: wrap; color: var(--text); }
  /* Ссылка, которая выглядит кнопкой: правило .go написано для button,
     а здесь нужен переход по адресу, а не действие на месте. */
  a.go.small { padding: 7px 14px; font-size: 13px; font-weight: 700;
    border-radius: 10px; text-decoration: none; display: inline-block;
    background: var(--accent); color: var(--accent-ink);
    transition: transform .14s ease, box-shadow .14s ease; }
  a.go.small:hover { transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(255,122,26,.4); }
  .как-ссылка { background: none; border: 0; padding: 0; font: inherit;
    color: var(--accent-txt); text-decoration: underline;
    text-underline-offset: 2px; cursor: pointer; }
  .как-ссылка:hover { color: var(--accent); transform: none; box-shadow: none; }

  /* Картинка справа: круг фирменного цвета как фокус, рисунок поверх.
     В круге намеренно не наш артикул — шапка не должна рекламировать
     одну модель. Подставить фотографию можно через shop.hero_image. */
  .art { --art: 268px; position: relative; padding: 10px 0 16px; }
  .art::before { content: ""; position: absolute; left: 50%; top: 48%;
    width: calc(var(--art) * 1.12); height: calc(var(--art) * 1.12);
    margin: calc(var(--art) * -.56) 0 0 calc(var(--art) * -.56); border-radius: 50%;
    background: radial-gradient(circle at 50% 36%, var(--disc-1),
      var(--disc-2) 60%, var(--disc-3));
    box-shadow: 0 0 0 16px rgba(255,122,26,.08), 0 0 64px 22px rgba(255,122,26,.17);
    animation: discIn .75s cubic-bezier(.2,.75,.2,1) both; }
  .art::after { content: ""; position: absolute; left: 50%; bottom: 2px;
    width: 58%; height: 20px; transform: translateX(-50%); border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(16,22,30,.24), transparent 71%); }
  .art > * { position: relative; z-index: 1; display: block; width: auto;
    max-width: 100%; max-height: var(--art); margin: 0 auto;}
  .art > svg { width: var(--art); height: var(--art); }
  .art > * {
    animation: artIn .75s cubic-bezier(.2,.75,.2,1) both;
    transition: transform 2.4s cubic-bezier(.17,.73,.2,1); }
  /* Фотографии поставщиков идут с залитым белым фоном, а не с прозрачностью:
     без multiply поверх круга лежал бы белый прямоугольник. */
  .art > img { mix-blend-mode: multiply; }

  /* Фотография вместо рисунка: ни круга, ни гашения белого — это снимок
     обстановки, а не каталожная шина на белом фоне. Снимок горизонтальный,
     слот почти квадратный, поэтому обрезаем по месту, а не сплющиваем. */
  /* Снимок не плитка, а подложка: уходит в правый край экрана, заезжает
     под поля подбора и растворяется влево в цвет страницы. Отдельной
     приклеенной картинкой он смотрелся чужеродно. */
  .art.photo { position: absolute; right: 0; top: 0; bottom: 0;
    width: 58%; padding: 0; margin: 0; height: auto;
    max-width: none; z-index: 0; pointer-events: none; }
  .art.photo::before, .art.photo::after { content: none; }
  /* Фон не должен себя показывать: ни выезда при загрузке, ни поворота
     под курсором. Это задник, а не элемент, с которым работают. */
  .art.photo > img { mix-blend-mode: normal; width: 100%; height: 100%;
    animation: none; transition: none; transform: none;
    max-height: none; object-fit: cover; border-radius: 0; box-shadow: none;
    /* Два растворения сразу: влево — под текст, вниз — к полосе значков.
       mask-composite поддерживают не все, поэтому у webkit свой вариант. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%,
        rgba(0,0,0,.55) 26%, #000 52%),
      linear-gradient(to bottom, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%,
        rgba(0,0,0,.55) 26%, #000 52%),
      linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-composite: intersect;
  }
  .art.photo:hover > img, .art.photo:hover > * { transform: none; }
  .art:hover > * { transform: rotate(40deg); }
  @keyframes discIn { from { opacity: 0; transform: scale(.72); }
    to { opacity: 1; transform: none; } }
  @keyframes artIn { from { opacity: 0; transform: scale(.86) rotate(-18deg); }
    to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .art::before, .art > * { animation: none; }
    .art > * { transition: none; }
    .art:hover > * { transform: none; } }

  .picker {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
    background: transparent; border: 0; padding: 0;
  }
  /* Своё display перебивает атрибут hidden, и спрятанная панель оставалась
     на экране: при переключении вкладок были видны сразу обе. */
  .picker[hidden] { display: none; }
  .picker .field { flex: 1; min-width: 118px; }
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); }
  .picker select {
    width: 100%; font: inherit; padding: 11px 12px; border-radius: 8px;
    border: 1.5px solid var(--field-line); background: var(--field);
    color: var(--text); appearance: none; font-weight: 600;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                      linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  }
  .picker select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

  button {
    font: inherit; font-weight: 700; cursor: pointer;
    border: 1px solid transparent; border-radius: 10px; padding: 11px 20px;
    background: var(--card); color: var(--text);
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  }
  button.go { background: var(--accent); color: var(--accent-ink); }
  button.go:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,122,26,.4); }
  button.ghost { background: transparent; border-color: var(--line); color: var(--text); }
  button:disabled { opacity: .45; cursor: default; transform: none; }

  .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
  .chip {
    padding: 7px 15px; border-radius: 999px; cursor: pointer; font-size: 13.5px;
    border: 1px solid var(--line); color: var(--text);
    background: var(--card); user-select: none;
    transition: background .14s ease, border-color .14s ease;
  }
  .chip:hover { border-color: var(--field-line); }
  .chip.on { background: var(--chip-on); border-color: var(--chip-on);
    color: var(--chip-on-text); font-weight: 700; }

  /* --- полосы входов: диаметр и марка ---
     Тонкие и без цвета: рядом стоит полоса категорий, единственное место,
     где цвета много. Две цветные полосы подряд спорили бы друг с другом. */
  .entries { background: var(--card); border-bottom: 1px solid var(--line); }
  .entries .wrap { padding-top: 10px; padding-bottom: 10px; }
  .erow { display: flex; align-items: baseline; gap: 12px; padding: 4px 0; }
  .erow + .erow { border-top: 1px dashed var(--line); margin-top: 4px;
    padding-top: 8px; }
  .erow > b { flex: 0 0 104px; font-size: 12.5px; color: var(--muted);
    font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  .chips.mini { margin-top: 0; gap: 6px; }
  .chips.mini .chip { padding: 5px 11px; font-size: 13px; }
  /* Число позиций рядом со значением: по нему видно, где каталог живой,
     а где одна шина. Числу незачем спорить с самим значением. */
  .chip .n { color: var(--muted); font-size: 11.5px; margin-left: 5px;
    font-weight: 400; }
  .chip.on .n { color: inherit; opacity: .75; }
  .erow .more { padding: 5px 11px; font-size: 12.5px; font-weight: 700;
    background: transparent; border-color: var(--line); color: var(--muted);
    border-radius: 999px; }
  .erow .more:hover { border-color: var(--accent); color: var(--accent-txt);
    transform: none; box-shadow: none; }
  @media (max-width: 760px) {
    .erow { flex-direction: column; align-items: stretch; gap: 6px; }
    .erow > b { flex: none; }
    /* Полосы прокручиваются вбок: переносить два десятка марок в столбик
       значит отдать им весь экран. */
    .chips.mini { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px;
      -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .chips.mini::-webkit-scrollbar { display: none; }
    .chips.mini .chip { flex: 0 0 auto; }
  }

  /* --- полоса категорий ---
     Единственное место на странице, где цвета много: вокруг белое поле,
     поэтому значки держат взгляд. Строится из тех же сезонов, что и фильтр,
     так что лишних входов, которые ничего не ищут, здесь не появится. */
  .cats { background: var(--strip); border-bottom: 1px solid var(--line); }
  .cats .wrap { display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 6px; padding-top: 15px; padding-bottom: 15px; align-items: start; }
  .cat { background: none; border: 0; padding: 6px 2px; cursor: pointer;
    text-align: center; border-radius: 10px; font: inherit;
    transition: background .14s ease; }
  .cat:hover { background: var(--hover); }
  .cat .ic { width: 50px; height: 50px; margin: 0 auto 7px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--hover);
    background: color-mix(in srgb, currentColor 13%, var(--tint));
    transition: transform .16s ease; }
  .cat:hover .ic { transform: translateY(-2px); }
  .cat svg { width: 27px; height: 27px; }
  .cat u { text-decoration: none; font-size: 12.5px; font-weight: 700;
    color: var(--text); display: block; line-height: 1.25; }
  .cat.on .ic { background: currentColor; color: #fff; }
  .cat.on .ic svg { color: #fff; }
  .cat.on u { text-decoration: underline; text-underline-offset: 3px; }

  /* --- секции --- */
  section.block { padding: 34px 0 10px; }
  .head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
  .head h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
  .head .sub { color: var(--muted); font-size: 13.5px; }
  .head .spacer { flex: 1; }

  /* --- хиты ---
     Сетка, а не горизонтальная лента: при прокрутке крайняя карточка
     срезалась краем экрана и выглядела как поломка вёрстки. auto-fill
     укладывает целое число карточек в ряд, остальные переносит, и ширина
     карточки при этом не разъезжается. */
  .rail { display: grid; gap: 14px; }

  /* --- карточка --- */
  .tyre {
    display: flex; flex-direction: column; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
    box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
  }
  .tyre:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); }
  .tyre .shot {
    aspect-ratio: 4 / 3; background: var(--plate); overflow: hidden;
    display: flex; align-items: center; justify-content: center; position: relative;
  }
  .tyre .shot img {
    width: 100%; height: 100%; object-fit: contain;
    /* Снимки поставщиков идут с залитым белым фоном, а не с прозрачностью.
       multiply гасит белое об подложку: рамка вокруг шины исчезает. */
    mix-blend-mode: multiply;
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
  }
  .tyre:hover .shot img { transform: scale(1.06); }
  .tyre .shot.empty { background: var(--hover); }
  .tyre .shot .none { color: var(--muted); font-size: 12px; }
  .tyre .tag {
    position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 700;
    padding: 4px 9px; border-radius: 999px; background: var(--ink); color: var(--on-dark);
    letter-spacing: .04em;
  }
  .tyre .body { padding: 13px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
  /* Фото и название внутри карточки — ссылка на страницу товара.
     Цвет не наследуем от ссылки: бренд синий, остальное обычное. */
  .tyre a { display: block; color: inherit; }
  .tyre .brand { color: var(--blue); font-weight: 900; font-size: 12.5px;
    letter-spacing: .02em; }
  .tyre .sz { font-weight: 900; font-size: 15.5px; letter-spacing: -.01em; }
  .tyre .what { color: var(--muted); font-size: 12.5px; flex: 1; line-height: 1.4; }
  .tyre .price { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
  .tyre .per { color: var(--muted); font-size: 11.5px; font-weight: 500; }
  .tyre .stock { font-size: 12px; color: var(--good); font-weight: 600; }
  .tyre .stock.few { color: var(--warn); }
  .tyre button { width: 100%; margin-top: 4px; }

  /* --- две колонки --- */
  .cols { display: grid; grid-template-columns: 286px 1fr; gap: 22px;
    align-items: start; padding-bottom: 50px; }
  /* Колонка липкая целиком, а не одна карточка: иначе под подбором
     оставалась пустая полоса во весь экран. */
  aside.side { position: sticky; top: calc(var(--sticky) - 2px); display: flex;
    flex-direction: column; gap: 14px; }
  aside .card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r); padding: 14px; box-shadow: var(--shadow);
  }
  aside h3 { margin: 0 0 11px; font-size: 15px; font-weight: 800; }
  /* Подсказка в заголовке («Поиск где смотреть размер?») прилипала
     к слову: между ними в разметке нет пробела. Отступ и общая линия
     букв; на узкой колонке ссылка уходит на вторую строку целиком. */
  aside h3:has(> .hint) { display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: 10px; row-gap: 2px; }
  /* Последняя защита для низких экранов: колонка не вылезает за окно,
     а прокручивается внутри себя — иначе связь обрывается на полуслове. */
  aside.side { max-height: calc(100vh - 96px); overflow-y: auto;
    scrollbar-width: thin; }

  /* Вход в платный подбор. Стоит в трёх местах, где человек застревает:
     в шапке тихой строкой, в боковой панели под фильтрами и в пустой выдаче.
     Все три появляются, только когда услуга настроена. */
  /* Широкая кнопка под «Найти» и «Сбросом»: тот же вес, что у них,
     но во всю ширину — заметно, и при этом не спорит с поиском. */
  /* Родительский .acts — флексовый ряд, и кнопка вставала по содержимому.
     Здесь ряда не нужно: кнопка одна и должна занять всю ширину колонки. */
  aside .acts.wide { display: block; margin-top: 9px; }
  .help-btn { display: block; text-align: center; padding: 11px;
    border-radius: 10px; font-weight: 700; font-size: 14px;
    background: var(--accent); color: var(--accent-ink);
    transition: transform .14s ease, box-shadow .14s ease; }
  .help-btn:hover { transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(255,122,26,.35); }
  /* Плитка подбора ведёт на страницу, а не включает фильтр. */
  .cat[data-kind="help"] { text-decoration: none; }
  #empty b { display: block; margin-bottom: 4px; }
  #empty a { color: var(--accent-txt); text-decoration: underline;
    text-underline-offset: 2px; }

  /* Связь: занимает место под подбором и заодно даёт второй путь к нам,
     кроме заявки — кому-то проще написать, чем оставлять телефон. */
  .links { display: flex; flex-direction: column; gap: 7px; }
  .link-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border: 1px solid var(--line); border-radius: 11px; background: var(--paper);
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
  }
  .link-row:hover { border-color: var(--accent); transform: translateX(2px);
    background: var(--card); }
  .link-row .ic {
    width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; background: var(--ink); color: var(--on-dark);
  }
  .link-row.tg .ic { background: #2aabee; color: #fff; }
  .link-row.yt .ic { background: #ff0033; color: #fff; }
  .link-row .t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .link-row .t b { font-size: 13.5px; font-weight: 700; }
  .link-row .t span { font-size: 12px; color: var(--muted); }
  aside .field { margin-bottom: 9px; }
  aside .field label { margin-bottom: 1px; }
  aside select, aside input { padding: 7px 9px; }
  aside .card.links h3 { margin-bottom: 8px; }
  aside .acts { margin-top: 11px; }
  aside .acts button { padding: 9px 12px; }
  /* «Найти» — вторая по силе кнопка в панели: главная тут «Выберу за вас»,
     и две сплошные оранжевые рядом перетягивали друг друга. Поэтому фон
     как у «Сброса», а рамка оранжевая — как у строк связи под курсором.
     Правило точечное, по id: класс .go носят и «Заказать», и «Отправить». */
  #find { background: transparent; color: var(--text);
    border-color: var(--accent); }
  /* Подъём и свечение при наведении остаются от .go: поведение кнопок
     на сайте должно быть одинаковым, меняется только заливка. */
  #find:hover { background: var(--hover); }
  aside .mini { margin-bottom: 10px; gap: 5px; }
  aside .mini .chip { font-size: 12px; padding: 5px 10px; }
  /* Третий селект размера узкий — подписи «Ширина/Высота/Диаметр»
     целиком не влезают, и это нормально: над полем виден их порядок. */
  aside .pair .field { min-width: 0; }
  .sort { width: auto; font: inherit; font-size: 13px; padding: 5px 8px;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--card); color: var(--text); }
  aside .field label { color: var(--muted); text-transform: none; letter-spacing: 0;
    font-size: 12px; }
  aside select, aside input {
    width: 100%; font: inherit; padding: 9px 10px; border-radius: 9px;
    border: 1px solid var(--line); background: var(--paper); color: var(--text);
  }
  aside .pair { display: flex; gap: 8px; }
  aside .acts { display: flex; gap: 8px; margin-top: 14px; }
  aside .acts button { flex: 1; padding: 10px 12px; }
  aside .mini { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
  aside .mini .chip { color: var(--text); border-color: var(--line);
    background: var(--paper); font-size: 12.5px; padding: 6px 12px; }
  aside .mini .chip.on { background: var(--ink); border-color: var(--ink);
    color: var(--on-dark); }

  /* --- правая колонка --- */
  .main .head { margin-bottom: 14px; }
  .main .head h2 { font-size: 19px; }

  .grid { display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }

  /* --- лента роликов --- */
  .vid {
    display: grid; grid-template-columns: 280px 1fr; gap: 18px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    padding: 14px; margin-bottom: 14px; box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  /* Вертикальный ролик в плитке 16:9 обрезался бы по краям, а половина
     кадра у шортса — именно по вертикали. Даём ему свою пропорцию и
     колонку поуже, иначе превью занимает пол-экрана. */
  .vid.vert { grid-template-columns: 172px 1fr; }
  .vid.vert .thumb { aspect-ratio: 9/16; }
  .vid:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }
  .vid.playing { transform: none; }
  .vid .date { color: var(--muted); font-size: 12.5px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; }
  .vid .thumb {
    position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden;
    background: var(--ink-3); grid-row: span 2;
  }
  .vid .thumb iframe { width: 100%; height: 100%; border: 0; display: block; }
  .vid .open {
    display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 600;
    color: var(--muted); border-bottom: 1px dashed var(--line);
  }
  .vid .open:hover { color: var(--accent); border-color: var(--accent); }
  .vid .thumb img { width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s cubic-bezier(.2,.7,.3,1); }
  .vid:hover .thumb img { transform: scale(1.05); }
  /* Нажимается только кнопка, а не всё превью: при клике по картинке
     человек не считает, что включил видео, — а звук уже играет. */
  .vid .play {
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; pointer-events: none;
  }
  .vid .play button {
    pointer-events: auto; cursor: pointer; padding: 0; border: 0;
    /* Safari рисует кнопке собственное оформление, пока у неё системный
       вид: вокруг круга появляется кольцо цветом акцента из настроек
       macOS — у кого-то зелёное. Снимаем системный вид и подсветку касания. */
    appearance: none; -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    width: 52px; height: 52px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 19px;
    background: rgba(14,17,22,.72); color: #fff; backdrop-filter: blur(3px);
    transition: transform .18s ease, background .18s ease;
  }
  .vid:hover .play button { transform: scale(1.08); background: var(--accent);
    color: var(--accent-ink); }
  /* Свой контур фокуса. Без него Safari рисует системный, цветом акцента
     из настроек macOS — у кого-то зелёный, — и он остаётся висеть на
     кнопке после нажатия, будто с этим роликом что-то не так. */
  .vid .play button:focus { outline: none; box-shadow: none; }
  .vid .play button:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 3px;
  }
  .vid h4 { margin: 0 0 4px; font-size: 16.5px; font-weight: 750; line-height: 1.3; }
  .vid .text { color: var(--muted); font-size: 13.5px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden; }

  .note { background: var(--card); border: 1px dashed var(--line);
    border-radius: var(--r); padding: 26px; color: var(--muted); text-align: center; }

  /* --- скелет при загрузке --- */
  .skeleton { background: linear-gradient(90deg, var(--bone) 25%,
    var(--bone-2) 37%, var(--bone) 63%);
    background-size: 400% 100%; animation: shine 1.3s ease infinite;
    border-radius: var(--r); }
  @keyframes shine { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

  /* --- появление при прокрутке ---
     Прячем только тогда, когда скрипт подтвердил, что умеет показать обратно.
     Иначе при любой осечке в javascript товар остался бы невидимым. */
  .anim .rise { opacity: 0; transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease; }
  .anim .rise.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .rise { opacity: 1; transform: none; }
  }

  /* --- заявка --- */
  .sheet { position: fixed; inset: 0; z-index: 60; display: flex; padding: 16px;
    align-items: center; justify-content: center; background: rgba(10,13,18,.55);
    backdrop-filter: blur(3px); }
  .sheet[hidden] { display: none; }
  .sheet .box { width: 100%; max-width: 420px; background: var(--card);
    border-radius: 18px; padding: 20px; max-height: 92vh; overflow-y: auto;
    box-shadow: var(--shadow-up); }
  .sheet h2 { margin: 0 0 4px; font-size: 18px; }
  .sheet .what { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
  .sheet .field { margin-bottom: 12px; }
  .sheet input, .sheet select { width: 100%; font: inherit; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
    color: var(--text); }
  .sheet .consent { display: flex; gap: 9px; align-items: flex-start; font-size: 12px;
    color: var(--muted); margin-bottom: 14px; }
  .sheet .consent input { width: auto; }
  /* Окно «где смотреть размер» шире обычного листа: в нём картинка
     и разбор надписи, в 420 пикселей они не укладываются. */
  .sheet .box.wide { max-width: 560px; }
  .sidewall { width: 100%; height: auto; display: block; margin: 4px 0 16px; }
  .sidewall .mark { font: 800 29px "Rovnye Sans", Arial, sans-serif; fill: #e9ecf1;
    letter-spacing: .08em; }
  /* Разбор надписи: части стоят в том же порядке, что и в самой надписи —
     глаз переносит их с картинки по одной. */
  .parts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .parts > div { display: flex; flex-direction: column; gap: 3px;
    padding: 9px 10px; background: var(--strip); border-radius: 10px; }
  .parts b { font-size: 17px; font-weight: 900; color: var(--accent-txt); }
  .parts span { font-size: 11.5px; line-height: 1.35; color: var(--muted); }
  @media (max-width: 560px) {
    .parts { grid-template-columns: repeat(2, 1fr); }
    /* Частей пять, в два столбца последняя остаётся одна. Растягиваем её
       на ширину: так это выглядит концом разбора, а не выпавшей плиткой. */
    .parts > div:last-child { grid-column: 1 / -1; }
    .sidewall .mark { font-size: 26px; }
  }
  /* Ссылка-подсказка рядом с подписью поля. Не кнопка по виду: действие
     служебное, и спорить с «Показать» ему незачем. */
  .hint { background: none; border: 0; padding: 0; font: inherit;
    font-size: 12px; font-weight: 700; color: var(--accent-txt);
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
  .hint:hover { transform: none; box-shadow: none; color: var(--accent); }

  .sheet .acts { display: flex; gap: 10px; }
  .sheet .acts button { flex: 1; }
  .sheet .msg { margin-top: 10px; font-size: 13px; }
  .sheet .msg.bad { color: var(--bad); font-weight: 700; }
  /* Незаполненное обязательное поле после «Отправить»: одной строчки внизу
     мало — человек видит упрёк, но не видит, где именно пусто. */
  .sheet .field.bad label { color: var(--bad); }
  .sheet .field.bad input, .sheet .field.bad select { border-color: var(--bad); }
  .sheet .consent.bad { color: var(--bad); font-weight: 700; }
  .sheet .consent.bad input { outline: 2px solid var(--bad); outline-offset: 2px; }
  .done { text-align: center; padding: 14px 0; }
  .done .big { font-size: 18px; font-weight: 750; margin-bottom: 6px; }

  footer { background: var(--ink); color: var(--on-dark-dim); padding: 30px 0;
    font-size: 13.5px; }
  footer .bar2 { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
  footer b { color: var(--on-dark); }


  /* --- тёмная тема ---
     Идём за системой: в macOS она сама переключается на закате, и человеку
     в тёмной комнате днём это помогает, а часы бы не помогли. Ручной выбор
     перебивает систему и запоминается в браузере. */
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --paper: #14171c; --card: #1b1f26; --line: #2b313a;
    --text: #e7eaee; --muted: #98a2b0;
    --bar: rgba(20,23,28,.93); --strip: #191d23; --hover: #232832;
    --field: #232832; --field-line: #3a424e; --tint: #1b1f26;
    /* Подложка под фото остаётся светлой: снимки идут с белым фоном. */
    --plate: radial-gradient(58% 58% at 50% 50%, #e8ecf1 0%,
      #cdd3db 48%, #6e7682 78%, #1b1f26 100%);
    --bone: #232832; --bone-2: #2b313a;
    --accent-txt: #ff9140; --blue: #74aaff; --bad: #ff6f61;
    --disc-1: #4a3524; --disc-2: #3a2a1b; --disc-3: #2c2016;
    --chip-on: var(--accent); --chip-on-text: var(--accent-ink);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.34);
    --shadow-up: 0 2px 6px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.45);
  } }

  :root[data-theme="dark"] {
    --paper: #14171c; --card: #1b1f26; --line: #2b313a;
    --text: #e7eaee; --muted: #98a2b0;
    --bar: rgba(20,23,28,.93); --strip: #191d23; --hover: #232832;
    --field: #232832; --field-line: #3a424e; --tint: #1b1f26;
    --plate: radial-gradient(58% 58% at 50% 50%, #e8ecf1 0%,
      #cdd3db 48%, #6e7682 78%, #1b1f26 100%);
    --bone: #232832; --bone-2: #2b313a;
    --accent-txt: #ff9140; --blue: #74aaff; --bad: #ff6f61;
    --disc-1: #4a3524; --disc-2: #3a2a1b; --disc-3: #2c2016;
    --chip-on: var(--accent); --chip-on-text: var(--accent-ink);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.34);
    --shadow-up: 0 2px 6px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.45);
  }

  /* Выключатель темы. Три положения: как в системе, светлая, тёмная. */
  .theme {
    width: 36px; height: 36px; flex: 0 0 36px; padding: 0; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1.5px solid var(--line); color: var(--text);
    cursor: pointer;
  }
  .theme:hover { background: var(--hover); }
  .theme svg { width: 19px; height: 19px; }

  /* --- низкие экраны ---
     На ноутбуке высотой 700-800 пикселей шапка с рисунком и полоса категорий
     съедали 640 пикселей, и от первой карточки «Хита» оставалась одна макушка:
     читалось как поломка вёрстки. Жмём украшение, а не товар — рисунок,
     отступы и значки. Правила по высоте окна, а не по ширине: на широком,
     но низком экране проблема ровно та же. */
  @media (max-height: 900px) {
    .hero { padding: 10px 0 12px; --band: 212px; }
    .art { --art: 178px; padding: 4px 0 8px; }
    .hero h1 { font-size: 27px; }
    .cats .wrap { padding-top: 9px; padding-bottom: 9px; }
    .cat .ic { width: 44px; height: 44px; margin-bottom: 5px; }
    .cat svg { width: 24px; height: 24px; }
    section.block { padding-top: 15px; }
    .head { margin-bottom: 12px; }
    /* Снимок квадратнее — карточка короче, и в экран попадает цена.
       Ради неё всё и затевалось: карточка без цены выше сгиба бесполезна. */
    .tyre .shot { aspect-ratio: 16 / 10; }
    .tyre .body { padding: 11px 12px 12px; gap: 4px; }
  }
  @media (max-height: 740px) {
    /* Ноутбук 1366x768: за вычетом окна браузера остаётся около 640 пикселей.
       Рисунок тут чистое украшение, он и ужимается первым. */
    .util .wrap { height: 24px; }
    .hero { padding: 8px 0 10px; --band: 176px; }
    .art { --art: 118px; padding: 2px 0 6px; }
    .hero h1 { font-size: 23px; }
    .hero p { margin-bottom: 5px; font-size: 13px; }
    .hero .lab { margin: 0 0 4px; }
    .picker select { padding: 8px 11px; }
    .cats .wrap { padding-top: 6px; padding-bottom: 6px; }
    .cat { padding: 3px 2px; }
    .cat .ic { width: 36px; height: 36px; margin-bottom: 4px; }
    .cat svg { width: 20px; height: 20px; }
    .cat u { font-size: 11.5px; }
    section.block { padding-top: 12px; }
    .head { margin-bottom: 8px; }
    /* Снимок ещё площе: так в экран попадает цена, а не одна макушка шины. */
    .tyre .shot { aspect-ratio: 16 / 9; }
    .tyre .body { padding: 10px 11px 11px; gap: 3px; }
    .tyre .what { line-height: 1.3; }
  }

  /* Только широкие и низкие экраны — ноутбуки. На телефоне высота тоже
     меньше 700, но там подпись не мешает: карточки всё равно идут
     в один столбец и сгиб приходится в другое место. */
  @media (max-height: 700px) and (min-width: 761px) {
    /* Совсем низкий экран. Подпись под заголовком объясняет то, что и так
       написано в каждой карточке, — она уходит первой, чтобы на её месте
       поместилась цена товара. Запас остаётся на случай, если Lato не
       загрузится и подставится Helvetica с другими метриками. */
    .hero p { display: none; }
  }

  /* На узком экране название и телефон не умещаются рядом: сжимаем
     буквенный разряд, иначе кнопка звонка уезжает за край. */
  @media (max-width: 560px) {
    .mark { font-size: 16px; gap: 9px; }
    /* На телефоне знак целиком не помещается рядом с номером,
       и номер обрезался. Графика — украшение, номер — то, ради чего
       на сайт и заходят, поэтому убираем графику, а не цифры. */
    .mark .fall { display: none; }
    .call { padding: 8px 13px; font-size: 14px; }
    .bar { gap: 10px; height: 66px; }
    .wrap { padding: 0 14px; }
    .hero { padding: 30px 0 28px; }
  }

  @media (max-width: 920px) {
    .cols { grid-template-columns: 1fr; }
    aside.side { position: static; }
    .vid, .vid.vert { grid-template-columns: 1fr; }
    .vid .thumb { grid-row: auto; }
    .vid.vert .thumb { max-width: 240px; margin: 0 auto; }
    .hero h1 { font-size: 25px; }
    /* Заголовки мельчают — значит, и сдвиг заднего: прежние пиксели увели бы
       его за край. Страница дисков живёт без героя, поэтому правило общее. */
    .heads .near, .heads .far { font-size: 25px; }
    .heads { --сдвиг: 64px; --глубина: 21px; }
    .tagline { display: none; }
    /* Картинка в шапке — украшение. На узком экране место нужнее подбору,
       поэтому колонка схлопывается, а рисунок уходит под него и мельчает. */
    .hero .inner { grid-template-columns: 1fr; gap: 4px; min-height: 0; }
    /* Узкий экран: подложка легла бы прямо под текст и мешала читать.
       Снимок возвращается в поток обычной картинкой во всю ширину. */
    .art.photo { position: static; width: 100%; height: 150px;
      max-width: none; margin-top: 6px; }
    .art.photo > img { border-radius: 12px;
      -webkit-mask-image: none; mask-image: none; }
    .art { --art: 190px; max-width: 260px; margin: 0 auto; padding: 4px 0 12px; }
    /* Пять плиток в ряд на телефоне слипаются: пускаем в две строки. */
    /* Плиток восемь: по три в ряд выходило 3 + 3 + 2, и последний ряд
       выглядел недоделанным — ровно то, на что владелец уже жаловался.
       По четыре — два полных ряда. */
    .cats .wrap { grid-template-columns: repeat(4, 1fr) !important; row-gap: 14px; }
  }

  @media (max-width: 760px) {
    /* Пункты меню уводят кнопку звонка за край — на телефоне их убираем:
       то же самое есть в подвале и в блоке связи. */
    .nav { display: none; }
    .picker { gap: 8px; }
    .picker .field { flex: 1 1 30%; min-width: 0; }
    .picker select { padding: 9px 8px; font-size: 14px; }
    .picker .field label { font-size: 10px; letter-spacing: .04em; }
    .hero h1 { font-size: 23px; }
    .heads .near, .heads .far { font-size: 23px; }
    .heads { --сдвиг: 52px; --глубина: 19px; }
    .cat u { font-size: 12px; }
    .cat .ic { width: 44px; height: 44px; }
    .cat svg { width: 24px; height: 24px; }
  }

  /* Телефоны 320 точек (SE первого поколения, маленькие андроиды): знак,
     стрелка, тема и номер упирались в край на 3 пикселя, и страница
     становилась шире экрана — её можно было таскать вбок. */
  @media (max-width: 360px) {
    header .bar { gap: 6px; }
    .call { padding: 8px 10px; }
  }

  @media (max-width: 420px) {
    .util .wrap { gap: 12px; font-size: 11.5px; }
    .art { --art: 150px; max-width: 200px; }
  }