/* ==========================================================================
   Номера Краснодара — единый стиль сайта (premium dark).
   Шрифты: Manrope (заголовки) + Inter (текст). Палитра на CSS-переменных.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* фон и поверхности */
  --bg: #090c14;
  --surface-1: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-3: rgba(255, 255, 255, 0.09);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* текст */
  --text: #eef2f8;
  --text-soft: #c3ccdb;
  --text-muted: #8a95aa;
  --text-dim: #6c768a;

  /* акценты */
  --accent: #7c8cff;
  --accent-2: #b07cff;
  --accent-soft: rgba(124, 140, 255, 0.14);
  --accent-line: rgba(124, 140, 255, 0.32);
  --grad: linear-gradient(135deg, #7c8cff 0%, #b07cff 100%);
  --success: #5fe3a1;

  /* форма */
  --radius: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 18px 44px rgba(0, 0, 0, 0.32);
  --shadow-lift: 0 30px 70px rgba(0, 0, 0, 0.5);
  --ring: 0 0 0 1px rgba(255, 255, 255, 0.05);

  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(1100px 520px at 12% -5%, rgba(124, 140, 255, 0.16), transparent 60%),
    radial-gradient(900px 480px at 92% 4%, rgba(176, 124, 255, 0.14), transparent 58%),
    radial-gradient(700px 700px at 50% 120%, rgba(95, 227, 161, 0.06), transparent 60%),
    linear-gradient(180deg, #090c14 0%, #0b0f1a 55%, #080b12 100%);
  background-attachment: fixed;
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3 {
  font-family: "Manrope", "Inter", sans-serif;
  letter-spacing: -0.02em;
}

.page {
  width: min(1160px, calc(100% - 48px));
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.section {
  padding: 84px 0;
  border-top: 1px solid var(--border);
}

.section-header {
  max-width: 680px;
  margin-bottom: 32px;
}

.section-kicker {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.08;
}

.catalog-title-rus-wrap .catalog-title-line {
  display: inline-flex;
  align-items: baseline;
  gap: 0.24em;
  max-width: 100%;
  white-space: nowrap;
  font-size: inherit;
  line-height: inherit;
}

.catalog-title-rus-wrap .catalog-title-line span {
  font-size: inherit;
  line-height: inherit;
}

.catalog-title-rus-wrap .catalog-title-line .catalog-title-rus {
  font-size: 0.9em;
}

.catalog-title-rus-wrap .catalog-title-line .catalog-title-flag {
  font-size: 1.1em;
}

.section-text {
  margin: 16px 0 0;
  color: rgba(17, 24, 39, 0.74);
  font-size: 17px;
  line-height: 1.65;
  opacity: 1;}

.section-text a {
  color: rgba(17, 24, 39, 0.74);
  opacity: 1;}

.section-text a:hover {
  text-decoration: underline;
  color: rgba(17, 24, 39, 0.74);
  opacity: 1;}

/* ----- Шапка (sticky) ----- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 -16px;
  padding: 12px 16px;
  background: rgba(9, 12, 20, 0.7);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
  border-radius: 0 0 16px 16px;
}

/* NOM-461: ВАРИАНТ ШАПКИ ДЛЯ КАБИНЕТА. Раньше это правило жило в стилях кабинета
   и переопределяло селектор чужого компонента — ровно та «вторая правка», ради
   отмены которой заведён единый источник. Теперь вариант живёт ВМЕСТЕ с шапкой:
   страница только помечает себя классом на <body>, а что он означает, решает
   этот файл. Разметка шапки при этом байт-в-байт одна и та же везде.

   Что и зачем (NOM-430): в кабинете шапка НЕ липкая. Кабинет — рабочий экран, а
   не витрина, и постоянная панель отъедает высоту на телефоне; вдобавок сразу
   под шапкой там идёт карточка без отступа, и на неё ложилась тень шапки,
   пряча верх заголовка. Публичных страниц правило не касается. */
.page-cabinet .header{position:static}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.brand-mark {
  width: 44px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--surface-2);
  font-size: 12px;
  color: #dbe2ff;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* NOM-522: пункты меню — ОБЫЧНЫЕ ТЕКСТОВЫЕ ССЫЛКИ, как в макете. Пилюля
   (фон, рамка, скругление 999px) снята: она съедала по 28px на пункт и делала
   из меню ряд кнопок. Подчёркивание на наведении и у активного пункта рисуется
   собственной линией под текстом, а не text-decoration: так линия не прыгает
   по высоте от буквы к букве. */
.nav a {
  position: relative;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.nav a:hover,
.nav a:focus {
  color: var(--text);
  transform: none;
}

.nav a:hover::after,
.nav a:focus-visible::after { opacity: 0.5; }

/* Активный пункт помечает header-menu.js атрибутом aria-current — он и
   остаётся точкой опоры подсветки; меняется только её вид. */
.nav a[aria-current="page"] {
  border-color: transparent;
  background: none;
  color: #ffffff;
}

.nav a[aria-current="page"]::after { opacity: 1; }

.brand-logo {
  width: 42px;
  height: 42px;
  padding: 5px;
  overflow: hidden;
  border-radius: 12px;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* NOM-522: справа две вещи — телефон САЙТА с подписью под ним и кнопка
   «Написать». Канальный номер (952) сюда не попадает: он живёт в канале и в
   контактном блоке городских страниц (NOM-513), в шапке его нет и не было. */
.header-phone-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.header-phone:hover {
  color: var(--text);
}

.header-phone-ico {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  opacity: 0.75;
}

.header-phone-num { font-size: clamp(15px, 1.2vw, 19px); }

/* Подпись под телефоном — светлая: шапка тёмная на всех страницах, а на
   главной ещё и прозрачная поверх кадра, и приглушённый тёмный цвет разделов
   там просто исчезал. Это единственная строка шапки, которая не ссылка,
   поэтому общее правило «.header a { color: #fff }» её не касается. */
.header-hours {
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.64);
}

/* NOM-524: кнопка стала ПРОЗРАЧНОЙ и раскрывающейся. Размер, положение и
   значок прежние — меняется только заливка и то, что за ней открывается. */
.header-write-box {
  position: relative;
  flex: 0 0 auto;
}

.header-write {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: clamp(40px, 3.1vw, 50px);
  padding: 0 clamp(14px, 1.3vw, 24px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: none;
  /* Кнопка перестала быть ссылкой (теперь это summary), и общее правило
     «.header a { color: #fff }» её больше не красит — цвет задаём сами, иначе
     на тёмной шапке она уходит в почти чёрный. */
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  cursor: pointer;
  user-select: none;
  /* Треугольник-раскрывашку браузера убираем: кнопка рисуется сама. */
  list-style: none;
  font-size: clamp(13px, 1.02vw, 15px);
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s ease;
}

.header-write::-webkit-details-marker { display: none; }
.header-write::marker { content: ""; }

.header-write:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

/* Кольцо фокуса видимое: кнопка достижима с клавиатуры, и это должно быть
   заметно, а не угадываться. */
.header-write:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* ПАНЕЛЬ С МЕССЕНДЖЕРАМИ. Лежит в разметке всегда — поэтому работает и без
   JavaScript: браузер раскрывает <details> сам. z-index выше карточки баннера:
   на главной шапка стоит НАД кадром, и панель обязана ложиться поверх, а не
   уезжать под карточку. */
.header-write-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 176px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(10, 14, 22, 0.97);
  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.5);
  backdrop-filter: blur(10px);
}

.header-write-link {
  display: block;
  padding: 9px 14px;
  border-radius: 9px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.header-write-link:hover,
.header-write-link:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

.header-write-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

.header-write-ico {
  width: clamp(15px, 1.15vw, 18px);
  height: clamp(15px, 1.15vw, 18px);
  flex: 0 0 auto;
}

/* ----- Хлебные крошки ----- */
.breadcrumbs {
  padding: 22px 0 0;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
}

.breadcrumbs a {
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.breadcrumbs a:hover {
  color: var(--text-soft);
}

.breadcrumbs span[aria-current="page"] {
  color: var(--text-soft);
}

.breadcrumbs .sep {
  margin: 0 9px;
  color: var(--text-dim);
}

/* ----- Hero ----- */
.hero {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  align-items: center;
  gap: 52px;
  padding: 64px 0 72px;
}

.eyebrow {
  width: fit-content;
  margin: 0 0 22px;
  padding: 8px 14px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  color: #d4daff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

h1 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(40px, 7vw, 76px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff 0%, #c7cfe6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  max-width: 620px;
  margin: 24px 0 0;
  color: var(--text-soft);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.62;
}

.phone-block {
  margin: 36px 0 0;
}

.phone-label {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.phone-link {
  font-family: "Manrope", sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.01em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* ----- Кнопки ----- */
.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

.button-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 12px 30px rgba(124, 140, 255, 0.3);
}

.button-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 18px 40px rgba(124, 140, 255, 0.42);
}

.button-secondary {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
  backdrop-filter: blur(6px);
}

.button-secondary:hover {
  transform: translateY(-2px);
  background: var(--surface-3);
  border-color: var(--accent-line);
}

/* ----- Hero-панель ----- */
.panel {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: var(--shadow-soft), var(--ring);
  backdrop-filter: blur(20px);
}

.plate {
  margin-bottom: 24px;
  padding: 20px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #fbfdff 0%, #e9eefc 100%);
  color: #0c1322;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36), inset 0 0 0 1px rgba(12, 19, 34, 0.08);
}

.plate-number {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  line-height: 1;
}

.plate-main {
  font-size: clamp(34px, 6.5vw, 52px);
  letter-spacing: 0.02em;
}

.plate-region {
  padding-left: 14px;
  border-left: 2px solid rgba(12, 19, 34, 0.25);
  font-size: clamp(24px, 4vw, 32px);
}

.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.feature {
  min-height: 116px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.feature:hover {
  border-color: var(--accent-line);
  background: var(--surface-2);
}

.feature strong {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  opacity: 1;}

.feature span {
  color: rgba(17, 24, 39, 0.70);
  font-size: 14px;
  line-height: 1.5;
  opacity: 1;}

/* ----- Карточки-подборки ----- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}

.collection-card,
.step-card,
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.collection-card .card-tag,
.card-tag {
  width: max-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid rgba(71, 85, 105, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #475569;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 8px 18px rgba(15, 23, 42, 0.06);
}

.collection-card:hover .card-tag {
  border-color: rgba(71, 85, 105, 0.38);
  background: #ffffff;
  color: #1f2937;
}

.collection-card {
  position: relative;
  min-height: 158px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.collection-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px 160px at 100% 0%, rgba(124, 140, 255, 0.12), transparent 70%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.collection-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-line);
  background: var(--surface-2);
  box-shadow: var(--shadow-soft);
}

.collection-card:hover::after {
  opacity: 1;
}

.collection-card strong {
  display: block;
  margin-top: 24px;
  font-family: "Manrope", sans-serif;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
  color: #111827;
  opacity: 1;}

.collection-card .muted {
  display: block;
  margin-top: 10px;
  color: rgba(17, 24, 39, 0.70);
  font-size: 14px;
  line-height: 1.55;
  opacity: 1;}

/* ----- Шаги ----- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}

.step-card {
  min-height: 184px;
  padding: 24px;
}

.step-number {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border-radius: 11px;
  background: var(--grad);
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(124, 140, 255, 0.32);
}

.step-card strong,
.faq-item strong {
  display: block;
  margin-bottom: 10px;
  font-family: "Manrope", sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #111827;
  opacity: 1;}

.muted {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* ----- FAQ ----- */
.faq-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.faq-item {
  min-height: 142px;
  padding: 22px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.faq-item:hover {
  border-color: var(--accent-line);
  background: var(--surface-2);
}

/* ----- Тулбар каталога ----- */
.catalog-toolbar {
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
}

.catalog-toolbar-simple {
  padding: 18px;
  border-radius: 24px;
}

.search-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.search-row-plate-only {
  align-items: center;
}

.search-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plate-mask {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--surface-2);
  box-shadow: var(--ring);
}

.plate-mask-full {
  max-width: 100%;
}

.mask-cell {
  width: 40px;
  height: 48px;
  padding: 0;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  caret-color: var(--accent);
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.mask-cell[data-type="digit"] {
  width: 34px;
}

.mask-cell::placeholder {
  color: var(--text-dim);
  font-weight: 600;
}

.mask-cell:focus {
  border-color: var(--accent);
  background: var(--surface-3);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.mask-cell.filled {
  border-color: var(--accent-line);
}

.mask-sep {
  width: 7px;
  height: 2px;
  border-radius: 2px;
  background: var(--border-strong);
}

.mask-region-divider {
  width: 1px;
  height: 38px;
  margin: 0 2px;
  background: var(--border-strong);
  opacity: 0.75;
}

.region-select {
  position: relative;
  display: inline-flex;
}

.region-select-toggle {
  width: 82px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.region-select-toggle:hover,
.region-select-toggle[aria-expanded="true"] {
  border-color: var(--accent-line);
  background: var(--surface-3);
}

.region-select-value {
  min-width: 3ch;
  text-align: center;
  text-transform: uppercase;
}

.region-select:not(.region-select-filled) .region-select-value {
  color: var(--text-dim);
  font-weight: 600;
}

.region-select-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  width: 180px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-1);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.22);
}

.region-option {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--text-soft);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.region-option:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
  transform: translateY(-1px);
}

.region-option-active,
.region-option-active:hover {
  border-color: transparent;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 8px 20px rgba(124, 140, 255, 0.3);
}

.mask-clear {
  width: 40px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.mask-clear:hover {
  color: var(--text);
  border-color: var(--accent-line);
  background: var(--surface-1);
}

.search-hint {
  color: var(--text-dim);
  font-size: 13px;
}

.filter-status {
  min-height: 24px;
  margin: 4px 0 2px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 760px) {
  .catalog-toolbar-simple {
    padding: 14px;
  }

  .search-row {
    align-items: flex-start;
  }

  .plate-mask {
    width: 100%;
    gap: 5px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mask-cell {
    width: 34px;
    min-width: 34px;
    height: 44px;
    font-size: 19px;
  }

  .mask-cell[data-type="digit"] {
    width: 30px;
    min-width: 30px;
  }

  .region-select-toggle {
    width: 74px;
    min-width: 74px;
    height: 44px;
    font-size: 18px;
  }

  .mask-clear {
    width: 36px;
    min-width: 36px;
    height: 44px;
  }

  .region-select-menu {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}



/* NOM-499: возвращены два правила панели фильтров, которые в NOM-498 попали
   под нож соседством с блоком «Комплектов». К удалённой фиче они отношения не
   имеют: это подпись и фокус у селектора сортировки. */
.catalog-sort-label {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.catalog-sort-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Modern catalog view switcher v1 */
.view-row-modern {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  margin: 6px 0 18px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
}

.view-row-modern .view-pill {
  width: 42px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: rgba(17, 24, 39, 0.56);
  cursor: pointer;
  outline: none;
  box-shadow: none;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.view-row-modern .view-pill svg {
  width: 21px;
  height: 21px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.view-row-modern .view-pill:hover {
  background: rgba(17, 24, 39, 0.06);
  color: #111827;
  transform: translateY(-1px);
}

.view-row-modern .view-pill-active,
.view-row-modern .view-pill-active:hover {
  background: #111827;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(17, 24, 39, 0.22);
  transform: none;
}

.view-row-modern .view-pill:focus-visible {
  box-shadow: 0 0 0 3px rgba(124, 140, 255, 0.22);
}

@media (max-width: 760px) {
  .view-row-modern {
    margin-top: 4px;
    margin-bottom: 16px;
  }

  .view-row-modern .view-pill {
    width: 44px;
    height: 40px;
  }
}
/* End Modern catalog view switcher v1 */

/* ----- Сетка каталога ----- */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.number-card {
  position: relative;
  min-height: 240px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.number-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
  border-color: var(--accent-line);
}

/* фото номера — обрезано ровно по фото, без полей */
.card-photo {
  margin: -16px -16px 0;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: 1px solid var(--border);
}

.card-photo img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
}

.card-photo-failed {
  display: none;
}

/* лёгкая подпись номера */
/* NOM-501: номер текстом на месте картинки — общий вид для серверной и
   клиентской карточки. Класс существовал в стилях и раньше, но его никто не
   рисовал; теперь он живой и один на оба рендерера. */
.catalog-plate {
  padding: 2px 0;
  color: var(--text);
  display: flex;
  align-items: center;
  min-height: 44px;
}

.catalog-plate-region {
  color: var(--text-muted);
  font-weight: 700;
}

.catalog-plate-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  line-height: 1;
}

.catalog-number {
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: 0.04em;
}

.catalog-region {
  min-width: 44px;
  padding-left: 10px;
  border-left: 1px solid var(--border-strong);
  text-align: right;
  font-size: 18px;
  color: var(--text-muted);
}

.number-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--success);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.card-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 8px rgba(95, 227, 161, 0.7);
}

.vehicle-type {
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: #d4daff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.number-category {
  min-height: 44px;
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.price-label {
  display: block;
  margin-bottom: 4px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.price {
  font-family: "Manrope", sans-serif;
  color: var(--text);
  font-size: 24px;
  font-weight: 800;
}

.number-card .button {
  width: 100%;
  margin-top: auto;
  min-height: 46px;
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}

.number-card .button:hover {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 26px rgba(124, 140, 255, 0.34);
}

/* ----- Состояния каталога ----- */
.catalog-loading,
.catalog-empty {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.55;
}

/* NOM-386: служебная страница /noanalytics/ — учёт устройства в статистике. */
.optout-card {
  margin-top: 20px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  max-width: 720px;
}

.optout-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 15px;
  font-weight: 700;
}

.optout-badge-on {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
}

.optout-badge-off {
  border-color: rgba(37, 211, 102, 0.45);
  background: rgba(37, 211, 102, 0.14);
  color: var(--text);
}

.optout-hint {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
}

.optout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.optout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.optout-btn-off:not(:disabled) {
  border-color: rgba(37, 211, 102, 0.45);
  background: rgba(37, 211, 102, 0.14);
}

.optout-btn:disabled {
  cursor: default;
  opacity: 0.5;
}

.optout-note {
  margin: 16px 0 0;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 520px) {
  .optout-actions { flex-direction: column; }
  .optout-btn { width: 100%; }
}

/* NOM-384: экран лимита выдачи — не ошибка, а приглашение к личному подбору.
   Живёт отдельным блоком под гридом, поэтому карточки под ним остаются. */
.catalog-limit {
  margin: 18px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--text);
}

.catalog-limit[hidden] { display: none; }

.catalog-limit-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.catalog-limit-text {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
}

.catalog-limit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.catalog-limit-tel,
.catalog-limit-wa,
.catalog-limit-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.catalog-limit-tel {
  border: 1px solid transparent;
  background: var(--accent);
  color: #0d1020;
}

.catalog-limit-wa {
  border: 1px solid rgba(37, 211, 102, 0.45);
  background: rgba(37, 211, 102, 0.14);
  color: var(--text);
}

.catalog-limit-retry {
  margin-top: 12px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-muted);
  font-weight: 500;
}

.catalog-limit-retry:disabled {
  cursor: default;
  opacity: 0.65;
}

.catalog-limit-retry:not(:disabled) {
  border-color: var(--accent-line);
  color: var(--text);
}

@media (max-width: 520px) {
  .catalog-limit-actions { flex-direction: column; }
  .catalog-limit-tel,
  .catalog-limit-wa,
  .catalog-limit-retry { width: 100%; }
}

.catalog-source-note {
  margin: 10px 0 0;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
}

.catalog-card-date {
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
}

.catalog-actions {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.catalog-load-more {
  min-width: 230px;
}

/* ----- Скелетоны ----- */
.skeleton {
  pointer-events: none;
}

.sk {
  border-radius: 8px;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.05) 30%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.05) 70%
  );
  background-size: 200% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}

.sk-photo {
  width: calc(100% + 32px);
  margin: -16px -16px 0;
  aspect-ratio: 550 / 116;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.sk-plate {
  height: 30px;
  width: 60%;
}

.sk-line {
  height: 16px;
  width: 80%;
}

.sk-price {
  height: 44px;
  margin-top: auto;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.number-card.appear {
  animation: fadeUp 0.4s ease both;
}

/* ----- Лайтбокс ----- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(5, 7, 12, 0.88);
  backdrop-filter: blur(8px);
  animation: fadeUp 0.2s ease both;
}

.lightbox img {
  max-width: min(820px, 94vw);
  max-height: 70vh;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
}

.lightbox-caption {
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: "Manrope", sans-serif;
  color: var(--text-soft);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lightbox-close:hover {
  background: var(--surface-3);
}

/* ----- SEO-блок ----- */
.seo-text {
  max-width: 900px;
}

.seo-text p {
  margin: 0 0 18px;
  color: rgba(17, 24, 39, 0.74);
  font-size: 17px;
  line-height: 1.78;
  opacity: 1;}

.seo-text p:last-child {
  margin-bottom: 0;
  color: rgba(17, 24, 39, 0.74);
  opacity: 1;}

.notice {
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.6;
}

/* ----- Подвал ----- */
.footer {
  padding: 40px 0 48px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer-title {
  display: block;
  margin-bottom: 6px;
  font-family: "Manrope", sans-serif;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
}

.footer-phone {
  font-family: "Manrope", sans-serif;
  font-size: 22px;
  font-weight: 800;
  white-space: nowrap;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[hidden] {
  display: none !important;
}

.number-card[hidden] {
  display: none !important;
}

/* ----- Фокус для доступности ----- */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
.region-select-toggle:focus-visible,
.region-option:focus-visible,
.card-photo img:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ----- Адаптив ----- */
@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-top: 40px;
  }

  .panel {
    padding: 20px;
  }

.section > .section-header,
  .section > .filter-status,
  .section > .view-row,
  .section > .seo-text,
  .footer-inner {
    padding-left: 32px;
    padding-right: 32px;
  }

  .section > .section-header,
  .section > .seo-text {
    box-sizing: border-box;
  }

  .section > .view-row {
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .page {
    width: min(100% - 32px, 1160px);
  }

  .header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .actions,
  .actions .button {
    width: 100%;
  }

  .features {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 60px 0;
  }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

.section > .section-header,
  .section > .filter-status,
  .section > .view-row,
  .section > .seo-text,
  .footer-inner {
    padding-left: 28px;
    padding-right: 28px;
  }

.catalog-title-rus-wrap {
    font-size: clamp(22px, 7vw, 30px);
    letter-spacing: -0.035em;
  }
}

/* ----- Уважение к настройкам движения ----- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Light site and catalog views final v1 */

/* NOM-444: остатки обхода тёмной темы убраны.
   Базовые h1 и .section-kicker рисуются ГРАДИЕНТОМ, обрезанным по глифам
   (background + background-clip:text + color:transparent) — приём тёмной темы.
   Сайт давно светлый, и прежние правила здесь чинили только ЦВЕТ текста, а сам
   градиентный фон на элементе оставляли. Пока background-clip:text работает, он
   не виден; там, где не срабатывает, элемент заливается своим фоном целиком —
   у h1 это белый градиент шириной max-width:780px, то есть та самая светлая
   плита с резкими краями вокруг заголовка. Фон снимается явно.

   Что СОХРАНЕНО и почему: читаемый тёмный цвет (без него заголовок на светлом
   фоне снова стал бы невидимым), отступы и max-width (это обычная типографика
   раздела, а не обход), а также сам .section с его padding и верхней линией —
   блок должен выглядеть как любой другой раздел страницы.
   Что УДАЛЕНО: правило .seo-intro-moved .lead — класса lead ни на одной
   странице внутри этого блока нет, правило не применялось ни разу. */
.seo-intro-moved h1 {
  color: #111827;
  opacity: 1;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

.seo-intro-moved .section-kicker {
  color: #30416f;
  opacity: 1;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

.seo-text h2,
.section-header h2 {
  color: #111827;
  opacity: 1;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

/* NOM-443: порядок заголовков исправлен, ВНЕШНИЙ ВИД НЕ ТРОНУТ.
   На /catalog/ и региональных страницах верхний заголовок страницы и нижний
   блок «О подборе» несли ОДИН И ТОТ ЖЕ текст, но тегами были h2 сверху и h1
   снизу — из-за этого структура страницы начиналась с h2. Теги поменялись
   местами; чтобы страница при этом выглядела ровно как раньше, каждый из них
   получает размер и цвет того тега, который он заменил.

   Почему цвет вообще приходится задавать: базовый h1 (строка ~301) рисуется
   белым градиентом через background-clip:text и color:transparent — он делался
   для ТЁМНОЙ темы. Сайт позже переведён на светлую (body{background:#f4f6fb}),
   и на ней такой h1 невидим. Именно от этого и защищал класс seo-intro-moved
   со своим переопределением цвета — защита сохранена: правило для
   .seo-intro-moved h1 осталось на месте (там, где h1 внутри него и остался —
   главная и страницы категорий), а здесь та же защита распространена на
   заголовок, который стал h1 в шапке секции. */
.section-header h1 {
  max-width: none;
  font-size: clamp(28px, 4vw, 46px);   /* как у h2 — размер не меняется */
  line-height: 1.08;
  letter-spacing: -0.02em;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #111827;
  -webkit-text-fill-color: currentColor;
  opacity: 1;
  text-shadow: none;
}

.seo-intro-moved .seo-text h2 {
  max-width: 780px;
  font-size: clamp(40px, 7vw, 76px);   /* как был h1 — размер не меняется */
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.seo-text p,
.section-text {
  color: rgba(17, 24, 39, 0.74);
  opacity: 1;
}

:root {
  color-scheme: light;

  /* light theme variables */
  --bg: #f4f6fb;
  --surface-1: rgba(255, 255, 255, 0.92);
  --surface-2: rgba(255, 255, 255, 0.78);
  --surface-3: #ffffff;
  --border: rgba(15, 23, 42, 0.10);
  --border-strong: rgba(15, 23, 42, 0.18);

  --text: #111827;
  --text-soft: #1f2937;
  --text-muted: rgba(17, 24, 39, 0.68);
  --text-dim: rgba(17, 24, 39, 0.52);

  --accent-soft: rgba(124, 140, 255, 0.13);
  --accent-line: rgba(124, 140, 255, 0.36);
  --success: #047857;

  --shadow-soft: 0 18px 44px rgba(15, 23, 42, 0.08);
  --shadow-lift: 0 30px 70px rgba(15, 23, 42, 0.14);
  --ring: 0 0 0 1px rgba(15, 23, 42, 0.05);
}

html,
body {
  background: #f4f6fb !important;
  color: #111827 !important;
}

body {
  background:
    radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.10), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(14, 165, 233, 0.10), transparent 30%),
    #f4f6fb !important;
}

body::before,
body::after {
  opacity: 0 !important;
}

main,
.section,
.container,
.page-shell,
.site-shell {
  color: #111827 !important;
}

header,
.site-header,
.header,
.topbar,
.navbar,
.site-nav {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.08) !important;
  color: #111827 !important;
}

.logo,
.brand,
.brand-title,
.nav-link,
.site-nav a,
header a {
  color: #111827 !important;
}

.photo-hero {
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.13) !important;
}

.catalog-toolbar,
.seo-text,
.collection-card,
.info-card,
.faq-card,
.notice-card {
  background: rgba(255, 255, 255, 0.52) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #111827 !important;
}

.view-label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.58) !important;
}

.view-pill,
.mask-cell,
.region-select-toggle,
.region-option {
  background: rgba(255, 255, 255, 0.76) !important;
  color: #111827 !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  box-shadow: none !important;
}

.view-pill:hover,
.region-select-toggle:hover,
.region-option:hover {
  transform: translateY(-1px);
  background: #ffffff !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.10) !important;
}

.view-pill-active,
.view-pill-active:hover,
.region-option-active,
.region-option-active:hover {
  background: #111827 !important;
  color: #ffffff !important;
  border-color: #111827 !important;
}

.filter-status,
.number-card-subline,
.catalog-card-date,
.mask-hint,
.lead,
.section-lead,
p {
  color: rgba(17, 24, 39, 0.68) !important;
}

.plate-mask {
  background: rgba(255, 255, 255, 0.58) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  box-shadow: none !important;
}

.catalog-grid.catalog-view-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}

.number-card {
  background: #f4f6fb !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: #111827 !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
  will-change: transform;
}

.number-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.18) !important;
}

.number-card::before,
.number-card::after {
  display: none !important;
}

.number-card-media {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.catalog-grid.catalog-view-cards .number-card-media {
  height: auto;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.number-image-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.catalog-grid.catalog-view-cards .number-image-button {
  height: auto;
  overflow: visible;
}

.catalog-grid.catalog-view-cards .number-image-button img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.number-card-category {
  background: rgba(17, 24, 39, 0.08) !important;
  color: #111827 !important;
}

.catalog-number,
.catalog-region,
.number-card-price {
  color: #111827 !important;
}

.number-card-price {
  font-weight: 950;
}

.number-card-phone,
.number-card .catalog-actions {
  display: none !important;
}

/* View: list */
.catalog-grid.catalog-view-list,
.carousel-grid.catalog-view-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.catalog-grid.catalog-view-list .number-card,
.carousel-grid.catalog-view-list .number-card {
  display: grid;
  grid-template-columns: minmax(150px, 210px) max-content;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-width: 320px;
  gap: 12px;
  padding: 2px 6px;
  min-height: 0;
  border-radius: 12px;
}

.catalog-grid.catalog-view-list .number-card-main,
.carousel-grid.catalog-view-list .number-card-main {
  display: block;
}

.catalog-grid.catalog-view-list .number-card-side,
.carousel-grid.catalog-view-list .number-card-side {
  display: block;
}

.catalog-grid.catalog-view-list .number-card-media,
.carousel-grid.catalog-view-list .number-card-media {
  overflow: hidden;
}

.catalog-grid.catalog-view-list .number-image-button,
.carousel-grid.catalog-view-list .number-image-button {
  justify-content: flex-start;
}

.catalog-grid.catalog-view-list .number-image-button img,
.carousel-grid.catalog-view-list .number-image-button img {
  display: block;
  width: 100%;
  max-height: 44px;
  object-fit: contain;
  object-position: left center;
}

.catalog-grid.catalog-view-list .number-card-price,
.carousel-grid.catalog-view-list .number-card-price {
  justify-self: start;
  white-space: nowrap;
  font-size: 16px;
  line-height: 1;
}

.catalog-grid.catalog-view-list .number-card-media:empty,
.carousel-grid.catalog-view-list .number-card-media:empty,
.catalog-grid.catalog-view-list .number-card-media.number-card-media-broken,
.carousel-grid.catalog-view-list .number-card-media.number-card-media-broken {
  display: none;
}

.catalog-grid.catalog-view-list .number-card-media:empty + .number-card-main,
.carousel-grid.catalog-view-list .number-card-media:empty + .number-card-main,
.catalog-grid.catalog-view-list .number-card-media.number-card-media-broken + .number-card-main,
.carousel-grid.catalog-view-list .number-card-media.number-card-media-broken + .number-card-main {
  display: block;
  grid-column: 1;
}

.catalog-grid.catalog-view-list .number-card-media:empty + .number-card-main .number-card-topline,
.carousel-grid.catalog-view-list .number-card-media:empty + .number-card-main .number-card-topline,
.catalog-grid.catalog-view-list .number-card-media:empty + .number-card-main .number-card-subline,
.carousel-grid.catalog-view-list .number-card-media:empty + .number-card-main .number-card-subline,
.catalog-grid.catalog-view-list .number-card-media.number-card-media-broken + .number-card-main .number-card-topline,
.carousel-grid.catalog-view-list .number-card-media.number-card-media-broken + .number-card-main .number-card-topline,
.catalog-grid.catalog-view-list .number-card-media.number-card-media-broken + .number-card-main .number-card-subline,
.carousel-grid.catalog-view-list .number-card-media.number-card-media-broken + .number-card-main .number-card-subline {
  display: none;
}

.catalog-grid.catalog-view-list .number-card-media:empty + .number-card-main .catalog-plate,
.carousel-grid.catalog-view-list .number-card-media:empty + .number-card-main .catalog-plate,
.catalog-grid.catalog-view-list .number-card-media.number-card-media-broken + .number-card-main .catalog-plate,
.carousel-grid.catalog-view-list .number-card-media.number-card-media-broken + .number-card-main .catalog-plate {
  margin: 0;
  transform: scale(0.72);
  transform-origin: left center;
}

/* View: compact */
.catalog-grid.catalog-view-compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

.catalog-grid.catalog-view-compact .number-card {
  padding: 10px;
  gap: 8px;
  min-height: auto;
}

.catalog-grid.catalog-view-compact .number-card-media img {
  width: 100%;
  max-height: 72px;
  object-fit: contain;
}

.catalog-grid.catalog-view-compact .number-card-category,
.catalog-grid.catalog-view-compact .number-card-subline,
.catalog-grid.catalog-view-compact .number-card-phone {
  display: none !important;
}

.catalog-grid.catalog-view-compact .catalog-plate {
  transform: scale(0.88);
  transform-origin: left center;
  margin: -2px 0;
}

.catalog-grid.catalog-view-compact .number-card-price {
  font-size: 17px;
}

.view-pill:focus-visible,
.region-select-toggle:focus-visible,
.region-option:focus-visible {
  outline: 3px solid rgba(17, 24, 39, 0.22);
  outline-offset: 3px;
}

@media (max-width: 780px) {
  .catalog-grid.catalog-view-cards {
    grid-template-columns: 1fr;
  }

  .catalog-grid.catalog-view-cards .number-card-media {
    height: auto;
    padding: 7px 0;
  }

  .catalog-grid.catalog-view-cards .number-image-button img {
    max-height: none !important;
  }

  .catalog-grid.catalog-view-list .number-card,
  .carousel-grid.catalog-view-list .number-card {
    grid-template-columns: minmax(130px, 1fr) max-content;
    min-width: 0;
    width: 100%;
    gap: 8px;
  }

  .catalog-grid.catalog-view-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .catalog-grid.catalog-view-compact {
    grid-template-columns: 1fr;
  }
}
/* Load more visible button v1 */
.catalog-load-more {
  background: #111827 !important;
  color: #ffffff !important;
  border-color: #111827 !important;
  box-shadow: 0 16px 34px rgba(17, 24, 39, 0.18) !important;
}

.catalog-load-more:hover {
  background: #020617 !important;
  color: #ffffff !important;
  border-color: #020617 !important;
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(17, 24, 39, 0.24) !important;
}
/* End Load more visible button v1 */

/* Card photo date price layout v1 */
.number-card-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  text-align: center;
}

.number-card-side {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.catalog-card-date {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  color: rgba(17, 24, 39, 0.52) !important;
  font-size: 13px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.catalog-grid.catalog-view-cards .number-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  align-content: start;
  gap: 8px;
  padding-bottom: 16px;
}

.catalog-grid.catalog-view-cards .number-card-price {
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1;
}

.catalog-grid.catalog-view-cards .number-card-main,
.catalog-grid.catalog-view-cards .number-card-side {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.catalog-grid.catalog-view-list .number-card,
.carousel-grid.catalog-view-list .number-card {
  grid-template-columns: minmax(150px, 210px) minmax(68px, 88px) max-content;
  gap: 10px;
  min-width: 405px;
}

.catalog-grid.catalog-view-list .number-card-main,
.carousel-grid.catalog-view-list .number-card-main {
  min-height: 0;
  text-align: left;
}

.catalog-grid.catalog-view-list .catalog-card-date,
.carousel-grid.catalog-view-list .catalog-card-date {
  font-size: 10px;
  white-space: nowrap;
  color: rgba(17, 24, 39, 0.48) !important;
}

.catalog-grid.catalog-view-list .number-card-price,
.carousel-grid.catalog-view-list .number-card-price {
  font-size: 16px;
}

.catalog-grid.catalog-view-compact .number-card-main {
  min-height: 18px;
}

.catalog-grid.catalog-view-compact .catalog-card-date {
  display: inline-flex !important;
  font-size: 12px;
}

.catalog-grid.catalog-view-compact .number-card-price {
  font-size: 17px;
}

@media (max-width: 780px) {
  .catalog-grid.catalog-view-list .number-card,
  .carousel-grid.catalog-view-list .number-card {
    grid-template-columns: minmax(130px, 1fr) minmax(62px, 78px) max-content;
    min-width: 0;
    width: 100%;
    gap: 7px;
  }

  .catalog-grid.catalog-view-list .catalog-card-date,
  .carousel-grid.catalog-view-list .catalog-card-date {
    font-size: 9px;
  }
}
/* End Card photo date price layout v1 */






/* Car preview overlay v1 */
.car-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 22px;
}

.car-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(8px);
}

.car-preview-frame {
  position: relative;
  z-index: 1;
  width: min(1120px, 96vw);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 34px 90px rgba(15, 23, 42, 0.34);
  overflow: hidden;
}

.car-preview-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.car-preview-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 280px;
  overflow: hidden;
  background: #111827;
}

.car-preview-rendered {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.car-preview-rendered.is-loading {
  opacity: 0;
}

.car-preview-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #ffffff;
  font-weight: 900;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.54);
  background: radial-gradient(circle, rgba(15, 23, 42, 0.24), rgba(15, 23, 42, 0.58));
  pointer-events: none;
}

.car-preview-loading::before {
  content: "⚙";
  display: block;
  font-size: 54px;
  line-height: 1;
  animation: car-preview-gear-spin 1.15s linear infinite;
}

.car-preview-loading[hidden] {
  display: none;
}

@keyframes car-preview-gear-spin {
  to {
    transform: rotate(360deg);
  }
}

.car-preview-nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 48px;
  height: 72px;
  border: 0;
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgba(15, 23, 42, 0.54);
  color: #ffffff;
  font-size: 56px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.18s ease, transform 0.18s ease;
}

.car-preview-nav:hover {
  background: rgba(15, 23, 42, 0.74);
  transform: translateY(-50%) scale(1.04);
}

.car-preview-prev {
  left: 14px;
}

.car-preview-next {
  right: 14px;
}

.car-preview-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 16px 14px;
  background: #ffffff;
}

.car-preview-label {
  min-width: 42px;
  color: rgba(17, 24, 39, 0.72);
  font-size: 13px;
  font-weight: 900;
  text-align: right;
}

.car-preview-dot {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.22);
  cursor: pointer;
}

.car-preview-dot.active {
  width: 24px;
  border-radius: 999px;
  background: #111827;
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .car-preview-modal {
    padding: 0;
    place-items: stretch;
  }

  .car-preview-frame {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }

  .car-preview-stage {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .car-preview-rendered {
    object-fit: contain;
  }

  .car-preview-close {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    background: rgba(15, 23, 42, 0.82);
  }

  .car-preview-nav {
    width: 42px;
    height: 64px;
    font-size: 46px;
    background: rgba(15, 23, 42, 0.58);
  }

  .car-preview-prev {
    left: max(8px, env(safe-area-inset-left));
  }

  .car-preview-next {
    right: max(8px, env(safe-area-inset-right));
  }

  .car-preview-controls {
    flex: 0 0 auto;
    padding: 11px 16px max(13px, env(safe-area-inset-bottom));
    border-radius: 0;
  }

  .car-preview-loading::before {
    font-size: 50px;
  }
}
/* End Car preview overlay v1 */

/* End Light site and catalog views final v1 */


/* Photo hero top design v1 */
.photo-hero {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  background: #f4f6fb;
  line-height: 0;
}

.photo-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4000 / 1333;
  object-fit: contain;
  object-position: center center;
}
/* End Photo hero top design v1 */

/* Catalog list centered 2 columns v1 */
/* NOM-496: карусель на главной встаёт в ЭТИ ЖЕ правила — отсюда её ширина,
   число колонок, зазоры и центрирование. Раньше у неё была своя раскладка
   контейнера, и блок стоял вплотную к левому краю секции, тогда как каталог
   центрируется в 940px: плиты расходились на 141px при 1440px и на 49px при
   1024px. Выравниваем карусель по каталогу, каталог не трогаем. */
.catalog-grid[data-catalog-view="list"],
.carousel-grid.catalog-view-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(360px, 430px));
  gap: 16px 18px;
  justify-content: center;
  align-content: start;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.catalog-grid[data-catalog-view="list"] .number-card,
.carousel-grid.catalog-view-list .number-card {
  width: 100%;
  max-width: none;
  margin: 0;
}

@media (max-width: 980px) {
  .catalog-grid[data-catalog-view="list"],
  .carousel-grid.catalog-view-list {
    grid-template-columns: minmax(300px, 1fr);
    max-width: 640px;
  }
}
/* End Catalog list centered 2 columns v1 */

/* BEGIN NOMERA HEADER DARK PREMIUM */
header.header,
.page > .header,
.header {
  background: linear-gradient(180deg, #070910 0%, #10131d 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.34) !important;
  backdrop-filter: blur(12px) !important;
}

.header .brand,
.header .brand span,
.header .brand strong,
.header .nav,
.header .nav a,
.header .header-phone,
.header a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.header .brand-mark,
.header .brand-logo {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

/* NOM-522: пилюли сняты и здесь — иначе тёмная шапка возвращала бы фон и
   рамку поверх обычных текстовых ссылок. */
.header .nav a {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.header .nav a:hover,
.header .nav a:focus {
  background: none !important;
  border-color: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.header .nav a[aria-current="page"] {
  background: none !important;
  border-color: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
}

.header .header-phone {
  font-weight: 900 !important;
}

.header .header-phone:hover,
.header .header-phone:focus {
  color: #d9c6ff !important;
  -webkit-text-fill-color: #d9c6ff !important;
}
/* END NOMERA HEADER DARK PREMIUM */

/* BEGIN NOMERA MOBILE HEADER BURGER PREMIUM */
header.header,
.page > .header,
.header {
  background: linear-gradient(180deg, #020409 0%, #070a12 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.36) !important;
}

.header-burger {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.28);
  cursor: pointer;
  flex: 0 0 auto;
}

.header-burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
  transform-origin: center;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.header-burger span + span {
  margin-top: 5px;
}

.header-menu-shell {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  margin-left: auto;
}

.header-menu-shell .nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}

.header-menu-shell .header-phone {
  margin-left: auto;
  flex: 0 0 auto;
}

@media (max-width: 860px) {
  header.header,
  .page > .header,
  .header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 18px !important;
  }

  .header .brand {
    min-width: 0;
    gap: 12px !important;
  }

  .header .brand span:last-child {
    white-space: nowrap;
    font-size: clamp(1.02rem, 4.6vw, 1.34rem);
    line-height: 1.05;
  }

  .header .brand-mark,
  .header .brand-logo {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 18px !important;
  }

  .header-burger {
    display: inline-flex !important;
  }

  .header-menu-shell {
    display: none !important;
    grid-column: 1 / -1;
    width: 100%;
    margin: 2px 0 0 0;
    padding: 14px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(180deg, rgba(10, 12, 20, 0.98) 0%, rgba(4, 6, 12, 0.98) 100%);
    box-shadow: 0 24px 48px rgba(2, 6, 23, 0.34);
  }

  .header.is-menu-open .header-menu-shell {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    /* NOM-482: десять пунктов дают 574px, и на 375x667 панель не помещалась —
       нижние пункты уезжали за экран. Ограничиваем высоту и прокручиваем
       ВНУТРИ панели, а не страницей. Размеры пунктов и цели тапа не трогаем:
       ужимать то, по чему попадают пальцем, нельзя. 100dvh учитывает
       свернувшуюся адресную строку на телефоне, 100vh — запасной вариант для
       браузеров без dvh. Вычитаем высоту строки шапки и небольшой зазор. */
    max-height: calc(100vh - 128px);
    max-height: calc(100dvh - 128px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .header.is-menu-open .header-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .header.is-menu-open .header-burger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.2);
  }

  .header.is-menu-open .header-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .header-menu-shell .nav {
    display: flex !important;
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  .header-menu-shell .nav a {
    width: 80%;
    margin-left: auto !important;
    margin-right: auto !important;
    min-height: 46px;
    padding: 13px 18px !important;
    border-radius: 18px !important;
    justify-content: space-between !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    font-weight: 800;
    letter-spacing: 0.01em;
  }

  /* NOM-536: УКРАШЕНИЕ ПУНКТА БУРГЕР-МЕНЮ УБРАНО ЦЕЛИКОМ.
     Что здесь было и почему это выглядело сломанным. Общее правило .nav a::after
     (вне всяких медиазапросов) рисует ПОДЧЁРКИВАНИЕ пункта на десктопе:
     position:absolute; left:0; right:0; bottom:-4px; height:2px;
     background:currentColor; opacity:0 — полоса во всю ширину ссылки, невидимая,
     она проявляется на наведении. Здешнее мобильное правило переопределяло у
     неё ТОЛЬКО content, кегль и opacity: подставляло галочку «›» и включало
     её видимость (0.62). Всё остальное — абсолютное положение, left:0, right:0,
     высоту 2px и белую заливку — галочка унаследовала от подчёркивания.
     Получалось не то, что задумано: под каждым пунктом шла белая полоса во всю
     его ширину (это и есть «горизонтальные линии между пунктами»), а символ «›»
     рисовался внутри этой двухпиксельной коробки от её ЛЕВОГО края и вываливался
     наружу — отсюда «галочки слева». Задумана же галочка была справа: у пункта
     стоит justify-content: space-between, но абсолютное позиционирование
     вынимает псевдоэлемент из потока, и space-between до него не доходит.

     ЭТО НЕ ПОСЛЕДСТВИЕ NOM-535. Замер мобильной шапки на коммите ДО неё
     (faaa498^) совпал с нынешним до последнего поля: 0 различий на пяти ширинах
     в обоих состояниях меню. Украшение было сломано и раньше, просто владелец
     смотрел на него после правки шапки. Разделители NOM-535 сюда не протекают —
     их правило лежит внутри десктопного медиазапроса, за порогом 981px.

     Почему убрано, а не починено справа: владельцу не нужны в меню ни линии, ни
     галочки — нужен чистый список. Побочное следствие названо в отчёте: у пункта
     текущей страницы это был единственный признак «вы здесь» в бургере (яркость
     0.62 -> 1). Отдельного признака взамен здесь НЕ заводится: это было бы уже
     новым оформлением, а не починкой, и задача такого не просила. */
  .header-menu-shell .nav a::after {
    content: none !important;
  }

  .header-menu-shell .header-phone {
    display: flex !important;
    width: 80%;
    align-self: center !important;
    min-height: 48px;
    margin-left: 0 !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 20px !important;
    padding: 13px 18px !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.22) 0%, rgba(109, 40, 217, 0.26) 100%) !important;
    border: 1px solid rgba(186, 156, 255, 0.28) !important;
    box-shadow: 0 18px 34px rgba(109, 40, 217, 0.20) !important;
    font-weight: 900 !important;
  }
}
/* END NOMERA MOBILE HEADER BURGER PREMIUM */

/* BEGIN NOMERA MOBILE BURGER FILTER FIX */
@media (max-width: 860px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .page,
  main,
  .section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .header-burger {
    flex-direction: column !important;
    gap: 5px !important;
    line-height: 0 !important;
  }

  .header-burger span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  .header-burger span + span {
    margin-top: 0 !important;
  }

  .header.is-menu-open .header-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  .header.is-menu-open .header-burger span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0.2) !important;
  }

  .header.is-menu-open .header-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  .catalog-toolbar,
  .catalog-toolbar-simple,
  .search-row,
  .search-row-plate-only {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .catalog-toolbar {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .search-row,
  .search-row-plate-only {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .search-label,
  .search-hint {
    width: 100% !important;
    max-width: 100% !important;
  }

  .plate-mask,
  .plate-mask-full {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .plate-mask::-webkit-scrollbar,
  .plate-mask-full::-webkit-scrollbar {
    display: none !important;
  }

  .plate-mask .mask-cell,
  .plate-mask-full .mask-cell {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    flex: 0 0 42px !important;
  }

  .plate-mask .mask-sep,
  .plate-mask-full .mask-sep,
  .plate-mask .mask-region-divider,
  .plate-mask-full .mask-region-divider {
    width: 8px !important;
    min-width: 8px !important;
    flex: 0 0 8px !important;
  }

  .plate-mask .region-select,
  .plate-mask-full .region-select {
    width: 82px !important;
    min-width: 82px !important;
    flex: 0 0 82px !important;
  }

  .plate-mask .region-select-toggle,
  .plate-mask-full .region-select-toggle {
    width: 82px !important;
    min-width: 82px !important;
  }

  .plate-mask .mask-clear,
  .plate-mask-full .mask-clear {
    width: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
  }

  .catalog-sort,
  .catalog-sort-select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}
/* END NOMERA MOBILE BURGER FILTER FIX */

/* BEGIN NOMERA MOBILE FILTER FIT REGION FIX */
@media (max-width: 860px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .page,
  main,
  .section,
  .catalog-toolbar,
  .catalog-toolbar-simple,
  .search-row,
  .search-row-plate-only {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .catalog-toolbar,
  .catalog-toolbar-simple,
  .search-row,
  .search-row-plate-only {
    overflow: visible !important;
  }

  .catalog-toolbar {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .plate-mask,
  .plate-mask-full {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns:
      36px 7px
      36px 36px 36px 7px
      36px 36px 4px
      minmax(54px, 1fr)
      36px !important;
    gap: 4px !important;
    align-items: center !important;
    justify-content: stretch !important;

    padding: 8px !important;
    overflow: visible !important;
    scrollbar-width: none !important;
  }

  .plate-mask::-webkit-scrollbar,
  .plate-mask-full::-webkit-scrollbar {
    display: none !important;
  }

  .plate-mask .mask-cell,
  .plate-mask-full .mask-cell {
    width: 36px !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 54px !important;
    flex: none !important;
    padding: 0 !important;
    font-size: 22px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .plate-mask .mask-sep,
  .plate-mask-full .mask-sep {
    width: 7px !important;
    min-width: 0 !important;
    flex: none !important;
    margin: 0 !important;
    opacity: 0.85 !important;
  }

  .plate-mask .mask-region-divider,
  .plate-mask-full .mask-region-divider {
    width: 4px !important;
    min-width: 0 !important;
    flex: none !important;
    margin: 0 !important;
  }

  .plate-mask .region-select,
  .plate-mask-full .region-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    /* NOM-499: было position: static — и список регионов позиционировать было
       НЕ ОТ ЧЕГО, поэтому он уезжал в нижний лист. Ячейка снова сама себе
       система координат, список выпадает под неё. */
    position: relative !important;
  }

  .plate-mask .region-select-toggle,
  .plate-mask-full .region-select-toggle {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 54px !important;
    padding: 0 8px !important;
    font-size: 22px !important;
    box-sizing: border-box !important;
  }

  .plate-mask .mask-clear,
  .plate-mask-full .mask-clear {
    width: 36px !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 54px !important;
    flex: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* NOM-499: список регионов открывается ПОД своей ячейкой, а не листом у
     нижнего края экрана. Прежний лист был position: fixed — он отрывался от
     поля, накрывал карточки и жил своей жизнью при прокрутке. Теперь это
     обычный выпадающий список: абсолютное положение внутри ячейки, поэтому он
     ездит вместе с ней и при прокрутке, и при открытии клавиатуры.
     Всё остальное оформление листа (крупные цели тапа, три колонки, тёмный
     фон) оставлено как было: менялось МЕСТО, а не вид. */
  .region-select-menu:not([hidden]) {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    bottom: auto !important;
    /* NOM-500: панель выровнена по ПРАВОМУ краю ячейки и больше не растянута
       между её краями. Растяжение (left:0/right:0) отдавало панели ширину
       ячейки — на телефоне это ~130px, три колонки по трети, и подписи лезли
       друг на друга. Правый край выбран не наугад: ячейка региона стоит в
       правой части маски, и панель, растущая ВЛЕВО, за экран не уходит. */
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    z-index: 30000 !important;

    display: grid !important;
    /* Две колонки с настоящим полом: подпись «323» с полями требует около
       сотни точек, и колонка не имеет права быть уже. Шрифт не трогаем —
       чинилась раскладка, а не размер букв (NOM-500 п.3). */
    grid-template-columns: repeat(2, minmax(104px, 1fr)) !important;
    gap: 10px !important;

    /* Своя ширина по содержимому, а не ширина ячейки; потолок — по экрану,
       чтобы на 320px панель гарантированно осталась внутри. */
    width: max-content !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 232px !important;
    padding: 14px !important;

    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: linear-gradient(180deg, rgba(9, 11, 17, 0.98) 0%, rgba(4, 6, 12, 0.98) 100%) !important;
    box-shadow: 0 26px 70px rgba(2, 6, 23, 0.48) !important;
  }

  .region-select-menu:not([hidden]) .region-option {
    min-height: 52px !important;
    border-radius: 16px !important;
    font-weight: 900 !important;
    font-size: 17px !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
  }

  .region-select-menu:not([hidden]) .region-option-active,
  .region-select-menu:not([hidden]) .region-option[aria-selected="true"] {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
  }

  .catalog-sort,
  .catalog-sort-select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 390px) {
  .plate-mask,
  .plate-mask-full {
    grid-template-columns:
      33px 5px
      33px 33px 33px 5px
      33px 33px 3px
      minmax(48px, 1fr)
      34px !important;
    gap: 3px !important;
    padding: 7px !important;
  }

  .plate-mask .mask-cell,
  .plate-mask-full .mask-cell {
    width: 33px !important;
    height: 52px !important;
    font-size: 21px !important;
  }

  .plate-mask .region-select-toggle,
  .plate-mask-full .region-select-toggle {
    height: 52px !important;
    font-size: 21px !important;
  }

  .plate-mask .mask-clear,
  .plate-mask-full .mask-clear {
    width: 34px !important;
    height: 52px !important;
  }
}
/* END NOMERA MOBILE FILTER FIT REGION FIX */

/* BEGIN NOMERA STRICT PLATE IMG WIDTH 2 */
/* strict width is only for LIST view, not card view */
.catalog-grid.catalog-view-list .number-card.number-card-view,
.carousel-grid.catalog-view-list .number-card.number-card-view {
  display: grid !important;
  grid-template-columns: 214px minmax(52px, 1fr) max-content !important;
  align-items: center !important;
  column-gap: 10px !important;
}

.catalog-grid.catalog-view-list .number-card .number-image-button,
.carousel-grid.catalog-view-list .number-card .number-image-button,
.catalog-grid.catalog-view-list .number-image-button,
.carousel-grid.catalog-view-list .number-image-button,
.catalog-list .number-image-button {
  width: 214px !important;
  min-width: 214px !important;
  max-width: 214px !important;
  height: auto !important;
  flex: 0 0 214px !important;
  overflow: visible !important;
}

.catalog-grid.catalog-view-list .number-card .number-image-button img,
.carousel-grid.catalog-view-list .number-card .number-image-button img,
.catalog-grid.catalog-view-list .number-image-button img,
.carousel-grid.catalog-view-list .number-image-button img,
.catalog-grid.catalog-view-list .number-card img,
.carousel-grid.catalog-view-list .number-card img,
.catalog-list .number-image-button img {
  display: block !important;
  width: 214px !important;
  min-width: 214px !important;
  max-width: 214px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: fill !important;
}

@media (max-width: 390px) {
  .catalog-grid.catalog-view-list .number-card.number-card-view,
  .carousel-grid.catalog-view-list .number-card.number-card-view {
    grid-template-columns: 202px minmax(40px, 1fr) max-content !important;
    column-gap: 8px !important;
  }

  .catalog-grid.catalog-view-list .number-card .number-image-button,
  .carousel-grid.catalog-view-list .number-card .number-image-button,
  .catalog-grid.catalog-view-list .number-image-button,
  .carousel-grid.catalog-view-list .number-image-button,
  .catalog-list .number-image-button {
    width: 202px !important;
    min-width: 202px !important;
    max-width: 202px !important;
    flex-basis: 202px !important;
  }

  .catalog-grid.catalog-view-list .number-card .number-image-button img,
  .carousel-grid.catalog-view-list .number-card .number-image-button img,
  .catalog-grid.catalog-view-list .number-image-button img,
  .carousel-grid.catalog-view-list .number-image-button img,
  .catalog-grid.catalog-view-list .number-card img,
  .carousel-grid.catalog-view-list .number-card img,
  .catalog-list .number-image-button img {
    width: 202px !important;
    min-width: 202px !important;
    max-width: 202px !important;
    height: auto !important;
  }
}
/* END NOMERA STRICT PLATE IMG WIDTH 2 */


/* BEGIN NOMERA MOTO NUMBERS */
.moto-mask {
  max-width: 720px !important;
}

@media (max-width: 860px) {
  .plate-mask.moto-mask,
  .plate-mask-full.moto-mask {
    grid-template-columns:
      36px 36px 36px 36px 7px
      36px 36px 4px
      minmax(54px, 1fr)
      36px !important;
  }
}

@media (max-width: 390px) {
  .plate-mask.moto-mask,
  .plate-mask-full.moto-mask {
    grid-template-columns:
      33px 33px 33px 33px 5px
      33px 33px 3px
      minmax(48px, 1fr)
      34px !important;
  }
}
/* END NOMERA MOTO NUMBERS */

/* BEGIN NOMERA MOTO CARD FIT */
.number-card-moto.number-card-view {
  grid-template-columns: 142px minmax(62px, 72px) minmax(96px, 1fr) !important;
  column-gap: 8px !important;
  align-items: center !important;
}

.number-card-moto .number-image-button,
.catalog-grid .number-card-moto .number-image-button {
  width: 142px !important;
  min-width: 142px !important;
  max-width: 142px !important;
  flex-basis: 142px !important;
}

.number-card-moto .number-image-button img,
.catalog-grid .number-card-moto .number-image-button img,
.number-card-moto img {
  width: 142px !important;
  min-width: 142px !important;
  max-width: 142px !important;
  height: auto !important;
}

.number-card-moto .number-card-price {
  font-size: 22px !important;
  white-space: nowrap !important;
}

@media (min-width: 391px) {
  .number-card-moto.number-card-view {
    grid-template-columns: 170px minmax(74px, 86px) minmax(110px, 1fr) !important;
    column-gap: 10px !important;
  }

  .number-card-moto .number-image-button,
  .catalog-grid .number-card-moto .number-image-button,
  .number-card-moto .number-image-button img,
  .catalog-grid .number-card-moto .number-image-button img,
  .number-card-moto img {
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
    flex-basis: 170px !important;
  }
}
/* END NOMERA MOTO CARD FIT */

/* Card details link (SEO-A5a-2) v1 */
.number-card-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.number-card-details {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  color: rgba(17, 24, 39, 0.78);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.number-card-details:hover,
.number-card-details:focus-visible {
  border-color: var(--accent);
  text-decoration: underline;
}

/* List-вид — строгий grid из 3 колонок (media/main/side): actions выносим
   на отдельную строку во всю ширину карточки, иначе 4-й ребёнок авто-встаёт
   под фото в 1-й колонке. grid-column: 1 / -1 работает и для moto-варианта. */
.catalog-grid.catalog-view-list .number-card-actions,
.carousel-grid.catalog-view-list .number-card-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  margin-top: 2px;
}
/* End Card details link (SEO-A5a-2) v1 */

/* BEGIN NOMERA HEADER QUICK ACTIONS — WhatsApp + MAX (000356) */

/* NOM-445: кнопки мессенджеров — рисунок владельца вместо инлайнового SVG.
   ФОРМА. Новая графика — скруглённый КВАДРАТ (радиус ≈21% стороны, замерено по
   альфа-каналу оригиналов). Прежняя кнопка была КРУГОМ (border-radius:999px) с
   фирменной заливкой и белым однотонным глифом внутри. Оставить круг значило бы
   срезать углы рисунка, поэтому:
     * скругление и рамка с кнопки сняты — форму задаёт сам рисунок, обрезать
       его теперь нечем;
     * фирменные заливки .header-ico-wa/tg/max убраны: у каждой иконки свой фон,
       и цветной круг под квадратом читался бы как ободок вокруг него;
     * цветные тени убраны по той же причине — у рисунка своё мягкое свечение.
   РАЗМЕР. Было 42px (и 40px на узких тирах), то есть МЕНЬШЕ порога 44px для
   пальца. Раз кнопки всё равно перерисовываются — доведены до 44px везде. */



/* Мобильная раскладка: WhatsApp и MAX постоянно видны рядом с логотипом и
   бургером, без открытия меню и без горизонтального скролла. */
@media (max-width: 860px) {
  header.header,
  .page > .header,
  .header {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  .header .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .header .brand span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }


  .header-burger {
    grid-column: 3 !important;
    grid-row: 1;
  }

  .header-menu-shell {
    grid-column: 1 / -1 !important;
    grid-row: 2;
  }
}

@media (max-width: 400px) {


    }
/* END NOMERA HEADER QUICK ACTIONS — WhatsApp + MAX (000356) */

/* BEGIN NOMERA HEADER CONTACTS STACK + TELEGRAM (000356-01) */
/* Логотип и иконка 23 не сжимаются; освободившуюся ширину получает навигация. */
.brand,
.brand-mark,
.brand-logo {
  flex-shrink: 0 !important;
}

.header-menu-shell {
  flex: 1 1 auto;
  min-width: 0;
}

/* Правый блок вертикальный: телефон сверху, иконки мессенджеров под ним, по центру. */
.header-contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
}

.header-contacts .header-phone {
  margin: 0;
  white-space: nowrap;
}


/* Telegram: синяя кнопка, тот же размер и hover, что у соседей. */
/* Мобайл: 23 не сжимается; телефон + три мессенджера — отдельной второй строкой
   контактного блока, всегда видимы без открытия меню; бургер не перекрыт; без
   горизонтального скролла. Раскладка: строка 1 — логотип и бургер, строка 2 —
   контакты, строка 3 — сворачиваемая навигация. */
@media (max-width: 860px) {
  header.header,
  .page > .header,
  .header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    row-gap: 12px !important;
  }

  .header .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0;
  }

  .header-burger {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .header-contacts {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .header-menu-shell {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
}
/* END NOMERA HEADER CONTACTS STACK + TELEGRAM (000356-01) */

/* BEGIN NOMERA MOBILE HEADER COMPACT (000356-02) */
/* Цель: цельная невысокая мобильная шапка (~150-175px). Только мобайл (≤860px,
   там же где грид-раскладка контактов). Desktop не трогаем. */
@media (max-width: 860px) {
  header.header,
  .page > .header,
  .header {
    gap: 6px !important;
    row-gap: 6px !important;
    padding: 10px 16px !important;
    min-height: 0 !important;
  }

  /* Строка 1: логотип + название | бургер, по центру */
  .header .brand {
    gap: 10px !important;
    align-items: center;
  }

  .header .brand-mark,
  .header .brand-logo {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    border-radius: 13px !important;
  }

  .header .brand span:last-child {
    font-size: clamp(17px, 4.3vw, 20px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
  }

  .header-burger {
    width: 50px !important;
    height: 50px !important;
    border-radius: 15px !important;
  }

  /* Контактный блок вплотную под первой строкой */
  .header-contacts {
    grid-row: 2 !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  .header-contacts .header-phone {
    font-size: clamp(17px, 4.6vw, 19px) !important;
    font-weight: 900 !important;
    margin: 0 !important;
    line-height: 1.1 !important;
  }


  /* Круг ~40px = и визуал, и touch-target; умеренный glow */

            /* Закрытое меню не занимает отдельную строку (display:none уже задан выше);
     при открытии — раскрывается ниже контактов, компактнее по отступам. */
  .header.is-menu-open .header-menu-shell {
    margin-top: 4px !important;
    padding: 12px !important;
  }
}
/* END NOMERA MOBILE HEADER COMPACT (000356-02) */

/* BEGIN NOMERA MOBILE BRAND MOVE (000356-03) */
/* Бренд-eyebrow над H1 каталога — только на мобильном; на desktop скрыт,
   «Каталог» остаётся. section-brand-eyebrow сам является .section-kicker,
   поэтому наследует текущий стиль надписи-кикера. */
.section-brand-eyebrow {
  display: none;
}

@media (max-width: 860px) {
  .section-brand-eyebrow {
    display: block;
  }
  /* соседний «Каталог» на мобильном прячем, чтобы не было дубля */
  .section-brand-eyebrow + .section-kicker {
    display: none;
  }

  /* Мобильная шапка: строка 1 — [23] [телефон по центру] [burger],
     строка 2 — WhatsApp/Telegram/MAX. Название бренда в шапке скрыто. */
  header.header,
  .page > .header,
  /* NOM-536: ЛОГОТИП И БУРГЕР БОЛЬШЕ НЕ ПРИЖАТЫ К КРОМКАМ ЭКРАНА.
     Было: логотип начинался на -1px, то есть на пиксель ЗА левой кромкой, а
     бургер ровно так же выходил за правую. Виновато не поле, а то, что его
     считали не от того края: шапка полноширинная, она выходит за колонку .page
     на 16px в каждую сторону (margin: 0 -16px в общем правиле) и несёт рамку
     1px, поэтому поле 14px давало до кромки ЭКРАНА 14 - 16 - 1 = -3... -1px.
     Теперь поле задаётся от кромки экрана и выводится из выноса, а не пишется
     готовым числом: --hdr-edge — то, что видит владелец, --hdr-bleed — вынос,
     и обе величины разом задают и margin, и padding, чтобы они не разъехались.
     15px выбрано по виду в Chromium: 8-10px читаются как «почти прижато», 20px
     съедают ширину у телефонного номера в середине ряда. */
  .header {
    --hdr-bleed: 16px;
    --hdr-edge: 15px;
    grid-template-columns: auto 1fr auto !important;
    gap: 6px 10px !important;
    row-gap: 6px !important;
    margin-left: calc(var(--hdr-bleed) * -1) !important;
    margin-right: calc(var(--hdr-bleed) * -1) !important;
    padding: 9px calc(var(--hdr-edge) + var(--hdr-bleed) - 1px) !important;
  }

  .header .brand-name {
    display: none !important;
  }

  .header .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    gap: 0 !important;
    justify-self: start !important;
  }

  /* Контейнер контактов «растворяется»: телефон и иконки становятся
     непосредственными ячейками грида шапки (без JS и абсолютного позиционирования). */
  .header-contacts {
    display: contents !important;
  }

  .header-contacts .header-phone {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
  }

  .header-burger {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }


  .header-menu-shell {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
}

/* На 320 px телефон чуть меньше, но читаемый; горизонтального скролла нет. */
@media (max-width: 360px) {
  .header-contacts .header-phone {
    font-size: 16px !important;
  }
}
/* END NOMERA MOBILE BRAND MOVE (000356-03) */

/* 000360 — неброская ссылка в футере на кабинет продавца */
.footer-seller{margin-top:10px;font-size:13px}
.footer-seller a{color:var(--text-muted,#8a93a6);text-decoration:none;opacity:.75}
.footer-seller a:hover{opacity:1;text-decoration:underline}

/* NOM-493: карусель на главной. Сетка та же, что у каталога, — отдельного
   компонента нет намеренно: это тот же ряд карточек. Единственное своё правило
   — сколько карточек видно: на узком экране браузер рисует 7, и статический
   блок из 10 обязан показывать столько же ДО подмены, иначе страница прыгает в
   момент замены. Прячет каскад, а не скрипт: до его запуска высота уже верная. */
/* NOM-495/NOM-496: у контейнера карусели своих правил раскладки НЕТ ни одного —
   ширину, колонки, зазоры и центрирование он берёт из правил списочного вида
   каталога выше, поэтому обе сетки стоят на одной вертикали по построению.
   Своё здесь только одно: отступ до фильтров. */
.carousel-grid.catalog-view-list{margin-bottom:18px}
/* Семь строк на узком экране — столько же нарисует и выборка в браузере,
   поэтому высота блока при подмене не меняется. Порог 980px — тот же, на
   котором список каталога переходит в одну колонку (NOM-496): один порог на
   раскладку и на число строк, иначе между 901 и 980 статика и выборка
   разошлись бы. */
@media (max-width:980px){
  .carousel-grid.catalog-view-list > .number-card:nth-child(n+8){display:none}
}

/* BEGIN NOM-517 HOME HERO DESKTOP */
/* Верх главной на десктопе по макету владельца: шапка во всю ширину → тёмный
   баннер (слева заголовок, подпись и две кнопки, справа карусель тёмной
   карточкой) → тёмная полоса с четырьмя утверждениями и четырьмя цифрами →
   фильтры и карточки, как были.

   Блок сменил NOM-508 (баннер поверх фотографии) и унаследовал от него две
   вещи, которые менять было нельзя: устройство мобильного и пороги.

   МОБИЛЬНЫЙ НЕ ТРОГАЕМ, и это не обещание, а устройство: обёртка .home-hero
   на узком экране объявлена display:contents, то есть коробки не создаёт
   вовсе — фото и заголовок остаются теми же двумя секциями подряд, что и
   раньше. Всё, что принесла эта задача — подпись, кнопки, десктопная карусель
   и полоса — по умолчанию display:none и включается только за порогом.

   Порог 981px — тот же, на котором список каталога и карусель переходят в одну
   колонку (NOM-496). Один порог на всё: заведи здесь свой — и между 901 и 980
   раскладка разошлась бы с числом нарисованных строк. */
.home-hero { display: contents; }
.home-hero-lead { display: none; }
.home-hero-carousel { display: none; }
.hero-cta { display: none; }
.home-strip { display: none; }

@media (max-width: 980px) {
  [data-carousel-slot="desktop"] { display: none !important; }
}

@media (min-width: 981px) {
  [data-carousel-slot="mobile"] { display: none !important; }

  /* ШАПКА ВО ВСЮ ШИРИНУ. Разметка шапки при этом та же самая, байт-в-байт, на
     всех страницах (NOM-461): меняется только каскад. Приём тот же, что у
     баннера ниже, — отрицательные поля на половину лишней ширины; содержимое
     при этом остаётся в колонке 1160px, то есть ровно над колонкой страницы.

     overflow-x:clip на корне — не украшение: 100vw шире видимой области ровно
     на ширину полосы прокрутки, и без него у полноширинных блоков появлялась бы
     горизонтальная прокрутка на пол-полосы. Именно clip, а не hidden: hidden
     делает корень контейнером прокрутки и ломает position:sticky у самой
     шапки, clip — нет. */
  html { overflow-x: clip; }

  .header {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(24px, calc((100vw - 1376px) / 2));
    padding-right: max(24px, calc((100vw - 1376px) / 2));
    border-radius: 0;
  }

  /* NOM-518: МЕНЮ В ОДНУ СТРОКУ. Разметка шапки не меняется — меняются только
     зазоры и внутренние поля пилюль. Арифметика, а не вкус: десять ссылок несут
     863px собственного текста с полями; при зазоре 12px и полях 14px ряду нужно
     971px, а между логотипом (215) и контактами (158) в колонке 1160px их
     помещается 746 — отсюда и второй ряд. Колонка шапки расширена до 1376px
     (шапка полноширинная, ей незачем сидеть в колонке текста), зазор 12 -> 8,
     поля пилюль 14 -> 12: ряду нужно 895px, свободно 962px. Кегль НЕ трогаем —
     14px было бы легче, но читаемость меню важнее одной строки. */
  /* NOM-522: зазоры и кегли шапки посчитаны под РЯД, а не выбраны на глаз.
     Десять текстовых ссылок несут 530-650px собственного текста; логотип, блок
     телефона и кнопка «Написать» забирают ещё 480-580. При 1200px в строке
     всего 1147, поэтому на узком краю зазоры и кегли идут по нижней границе
     clamp, а к 1920 расходятся. Проверяет ряд и отсутствие наложений [10]. */
  /* NOM-535: ЗАЗОР МЕНЮ СТАЛ ПЕРЕМЕННОЙ. Раньше одно и то же выражение стояло
     в двух местах (здесь и у .header-menu-shell .nav в блоке главной), а теперь
     от него зависит ещё и положение разделителя: он встаёт ровно в середину
     зазора. Три копии одного числа разъехались бы на первой же правке, и
     разделитель уехал бы с середины на букву. */
  .header { --nav-gap: clamp(8px, 0.72vw, 24px); }
  .header .nav { gap: var(--nav-gap); }
  .header .nav a { padding: 0; }

  /* NOM-535: ВОЛОСЯНЫЕ РАЗДЕЛИТЕЛИ МЕЖДУ ССЫЛКАМИ МЕНЮ — те же, что в полосе
     под баннером: 1px шириной, rgba(255,255,255,.14).
     Высота СВОЯ, а не полосная. В полосе разделитель 44px, потому что там он
     отделяет двухстрочные позиции с цифрой 27px; здесь он стоит рядом с
     текстом 12.5-15px, и 44px накрыли бы всю шапку сверху донизу. Высота
     задана в em, а не в пикселях: кегль ссылок текуч (clamp(12.5px,1.02vw,15px)),
     и фиксированное число на одной ширине смотрелось бы вровень с текстом, а на
     другой — заметно выше или ниже него. 1.15em держит пропорцию на всех
     ширинах: 14.4px при 1200, 16.9px при 1440, 17.3px при 1920.

     ПОЧЕМУ ПСЕВДОЭЛЕМЕНТ, А НЕ ЭЛЕМЕНТ РАЗМЕТКИ. Шапка обязана оставаться
     ПОБАЙТНО одинаковой на всех страницах, и она уже вставлена в тысячи готовых
     файлов. Девять новых <span> означали бы правку разметки во всех них; здесь
     же разметка не меняется ни на байт.
     ПОЧЕМУ position:absolute. Разделитель не должен занимать места в ряду:
     запас ширины при 1200 — всего 10.8px, и девять разделителей, встань они в
     поток, съели бы его вместе с зазорами и порвали ряд. Абсолютный
     разделитель стоит в уже существующем зазоре и НЕ стоит ничего.
     Селектор a + a даёт ровно девять штук на десять ссылок: у первой ссылки
     предыдущей нет, поэтому перед ней разделителя не появляется, а после
     последней его негде было бы взять — рисуется он СЛЕВА от своей ссылки.
     У логотипа, телефона и «Написать» его нет и не заводится. */
  .header .nav a + a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--nav-gap) / -2);
    width: 1px;
    height: 1.15em;
    margin-top: -0.575em;
    background: rgba(255, 255, 255, 0.14);
    pointer-events: none;
  }

  /* ТЁМНЫЙ БАННЕР ВО ВСЮ ШИРИНУ. Внутренняя колонка — 1160px, та же, что у
     .page, поэтому левый край заголовка стоит ровно под логотипом в шапке и
     ровно над фильтром каталога. */
  .home-hero {
    display: grid;
    /* До 1200px колонка одна: карточка карусели требует ~420px, и на двух
       колонках раньше этого заголовку оставалось бы меньше 240px. Ниже порога
       баннер остаётся одноколоночным, а порядок «баннер → полоса → фильтры»
       выполняется на любой десктопной ширине. */
    grid-template-columns: minmax(0, 1fr);
    row-gap: 26px;
    align-items: center;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 48px max(24px, calc((100vw - 1160px) / 2)) 48px;
    overflow: hidden;
    isolation: isolate;
    position: relative;
    /* Заливка — подложка под фотографией, а не сама картинка: она видна ровно
       в ту долю секунды, пока кадр не пришёл, и в редком случае, когда он не
       пришёл вовсе. */
    background: linear-gradient(180deg, #0b1220 0%, #070c16 100%);
    color: #ffffff;
  }

  /* NOM-518: ФОТОГРАФИЯ — ЭТО И ЕСТЬ БАННЕР. В NOM-517 она была спрятана, и
     баннер выродился в плоскую синеватую панель; в макете под текстом живой
     тёмный кадр. Кадр становится фоновым слоем: высоту коробки задаёт колонка
     с текстом, поэтому картинка обязана заполнять её, а не диктовать пропорцию —
     cover, а не contain, иначе сверху и снизу встали бы пустые полосы. */
  .home-hero > .photo-hero {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: hidden;
    box-shadow: none !important;
    z-index: 0;
  }

  .home-hero > .photo-hero img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center center;
  }

  /* Затемнение. Два слоя: горизонтальный держит левую колонку, где текст, и
     сходит на нет к правому краю, чтобы кадр остался виден; вертикальный ровняет
     верх и низ, где иначе картинка спорит с шапкой и с полосой. Подложка лежит
     НАД фотографией и ПОД содержимым (z-index колонок ниже — 1). */
  .home-hero > .photo-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(4, 8, 16, 0.62) 0%, rgba(4, 8, 16, 0.30) 42%,
                              rgba(4, 8, 16, 0.58) 100%),
      linear-gradient(90deg, rgba(4, 8, 16, 0.92) 0%, rgba(4, 8, 16, 0.80) 26%,
                             rgba(4, 8, 16, 0.46) 54%, rgba(4, 8, 16, 0.30) 100%);
  }

  .home-hero > .seo-intro-moved,
  .home-hero > .home-hero-carousel {
    position: relative;
    z-index: 1;
  }

  /* Секция заголовка внутри баннера — уже не «раздел страницы»: ни верхней
     линии, ни вертикальных отступов раздела, ни собственного фона. */
  .home-hero > .seo-intro-moved {
    padding: 0;
    border-top: 0;
    background: none !important;
    box-shadow: none !important;
  }

  /* NOM-518: колонка текста ограничена по ширине, а не по колонке сетки.
     Раньше заголовок растягивался на всю левую половину (632px при 1440) и
     подходил к самой карточке; в макете он занимает примерно левую треть, а
     между ним и карточкой виден кадр. */
  .home-hero .seo-text {
    max-width: 440px;
    padding: 0;
    background: none !important;
    box-shadow: none !important;
  }

  .home-hero .seo-intro-moved h1 {
    margin: 0;
    max-width: none;
    font-size: 46px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
  }

  /* Три строки заголовка — это оформление, а не текст: на мобильном спаны
     остаются инлайновыми и строка выглядит ровно так же, как до задачи. */
  .home-hero .seo-intro-moved h1 .hero-h1-line { display: block; }

  /* Селектор с .seo-text не для красоты: общее правило «.seo-text p» задаёт
     тёмный цвет текста разделов, оно специфичнее одного класса, и без этого
     подпись под заголовком осталась бы тёмно-серой на тёмном баннере. */
  .home-hero .seo-text p.home-hero-lead {
    display: block;
    margin: 16px 0 0;
    max-width: 100%;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.78);
    opacity: 1;
  }

  .hero-cta {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    margin: 26px 0 0;
  }

  .hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  }

  .hero-btn:hover,
  .hero-btn:focus-visible { transform: translateY(-1px); }

  /* Знак на кнопке — рисунок, а не символ в тексте: подпись кнопки остаётся
     подписью и для читалки, и для теста. */
  .hero-btn-ico {
    width: 18px;
    height: 18px;
    margin-left: 10px;
    flex: 0 0 18px;
  }

  .hero-btn-light {
    background: #ffffff;
    border: 1px solid #ffffff;
    color: #0d1526 !important;
  }

  .hero-btn-light:hover { background: rgba(255, 255, 255, 0.88); }

  .hero-btn-dark {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.30);
    color: #ffffff !important;
  }

  .hero-btn-dark:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.52);
  }

  /* ТЁМНАЯ КАРТОЧКА КАРУСЕЛИ. Строки внутри — те же самые карточки каталога,
     тем же рендерером; меняется только раскраска и раскладка строки. */
  .home-hero-carousel { display: block; }

  .hero-card {
    padding: 20px 32px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 20px;
    /* Панель НЕПРОЗРАЧНАЯ. На плоской заливке хватало 4% белого, но поверх
       фотографии сквозь такую панель просвечивал кадр, и номера с ценами в ней
       тонули. Здесь тёмная подложка с размытием: карточка читается на любом
       кадре, а не только на удачном. */
    /* NOM-519: 0.82 хватало над плоской заливкой и над тёмной частью кадра.
       После того как карточка встала левее (780 вместо 820), за ней оказалась
       САМАЯ СВЕТЛАЯ часть фотографии — белая плита, и сквозь панель она
       высветляла строки до нечитаемости. Панель практически непрозрачна. */
    background: rgba(9, 13, 22, 0.95);
    backdrop-filter: blur(16px) saturate(115%);
    box-shadow: 0 26px 70px rgba(2, 6, 16, 0.45);
  }

  .hero-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
  }

  .hero-card-title {
    font-family: "Manrope", "Inter", sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
  }

  .hero-card-all {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.72) !important;
    text-decoration: none;
  }

  .hero-card-all:hover { color: #ffffff !important; }

  .hero-card-more {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 14px 0 0;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: #ffffff !important;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease;
  }

  .hero-card-more:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.42);
  }

  /* ПЯТЬ СТРОК, А НЕ ДЕСЯТЬ (NOM-534; было четыре). Статический блок пишется
     в обе точки монтирования одним и тем же набором (иначе они разошлись бы),
     поэтому лишние строки прячет каскад — ровно так же, как на мобильном
     прячутся строки с восьмой. Выборка в браузере берёт пять сама:
     data-carousel-desktop="5" в разметке. Оба числа обязаны меняться вместе:
     разойдись они — статика показывала бы одно число строк, а подмена в
     браузере другое, и карточка прыгала бы при загрузке пула. */
  .home-hero-carousel .carousel-grid.catalog-view-list > .number-card:nth-child(n+6) {
    display: none;
  }

  /* ОДНА КОЛОНКА, ЧЕТЫРЕ СТРОКИ. Общее правило раскладки списка (NOM-496)
     ставит карусели две колонки по 360-430px и ширину 940px с центрированием —
     внутри карточки шириной 480px это давало сетку 2x2, вылезавшую за её края
     на 143px влево. Здесь этой раскладки нет: колонка одна, ширину задаёт
     карточка. */
  .home-hero-carousel .carousel-grid.catalog-view-list {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    max-width: none;
    margin: 0;
    gap: 8px;
  }

  /* Строка макета: слева номер, справа цена, под ценой «Фото». Дата в этой
     карточке не показывается — в макете её нет. */
  /* NOM-520: РАЗМЕР СТРОКИ ПОД ПЛИТУ 200x42.4 И ЦЕНУ В ТОЙ ЖЕ СТРОКЕ.
     Арифметика, а не вкус: карточка 400, боковые поля 32+32, плита 200, самая
     длинная цена пула («11 000 000 ₽») занимает 108.1px при 17px/950. На поля
     строки и зазоры остаётся 400-64-200-108.1 = 27.9px, поэтому поля строки 8
     и зазор колонок 4. Средняя колонка (дата, здесь скрыта) объявлена
     minmax(0,1fr): при обычной цене она забирает остаток и зазор выглядит
     широким, а на самой длинной сжимается в ноль — цена НИКОГДА не переносится
     и не налезает на плиту. */
  .home-hero-carousel .carousel-grid.catalog-view-list .number-card,
  .home-hero-carousel .carousel-grid.catalog-view-list .number-card.number-card-view {
    grid-template-columns: 200px minmax(0, 1fr) max-content !important;
    column-gap: 4px !important;
  }

  .home-hero-carousel .carousel-grid.catalog-view-list .number-image-button {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    flex: 0 0 200px !important;
  }

  .home-hero-carousel .carousel-grid.catalog-view-list .number-card .number-image-button img,
  .home-hero-carousel .carousel-grid.catalog-view-list .number-image-button img,
  .home-hero-carousel .carousel-grid.catalog-view-list .number-card img {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 42.4px !important;
    max-height: 42.4px !important;
  }

  /* Цена не переносится и не сокращается многоточием — это требование, а не
     оформление: обрезанная цена хуже отсутствующей. */
  .home-hero-carousel .carousel-grid.catalog-view-list .number-card-price {
    white-space: nowrap;
    text-overflow: clip;
  }

  .home-hero-carousel .carousel-grid.catalog-view-list .number-card {
    /* NOM-519: БЕЗ ПОЯВЛЕНИЯ. Общий список показывает карточки анимацией
       fadeUp; здесь она не нужна (четыре строки видны сразу) и вдобавок
       ломает картинку: после её окончания строка остаётся на собственном
       слое композиции, и поверх панели с backdrop-filter над светлой частью
       фотографии Chromium рисует этот слой почти чёрным — плиты и цены
       становятся нечитаемыми. Замерено: с анимацией средняя яркость плиты 24
       из 255, без неё — 178. */
    animation: none;
    width: auto;
    min-width: 0;
    max-width: none;
    gap: 2px 14px;
    padding: 10px 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    color: #ffffff !important;
  }

  .home-hero-carousel .carousel-grid.catalog-view-list .number-card:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
    box-shadow: none !important;
  }

  /* NOM-519: плита в баннере — ТА ЖЕ величина, что в списке каталога:
     214x45.3. Своего размера у неё здесь нет вовсе — размер задаёт общий блок
     списка, и двух похожих величин, которые разъедутся на первой правке, не
     заводим. Строка растёт по плите. */
  .home-hero-carousel .carousel-grid.catalog-view-list .number-card-media {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .home-hero-carousel .carousel-grid.catalog-view-list .number-card-main {
    display: none;
  }

  .home-hero-carousel .carousel-grid.catalog-view-list .number-card-side {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .home-hero-carousel .carousel-grid.catalog-view-list .number-card-price {
    justify-self: end;
    font-size: 17px;
    color: #ffffff !important;
  }

  .home-hero-carousel .carousel-grid.catalog-view-list .number-card-actions {
    grid-column: 3;
    grid-row: 2;
    justify-content: flex-end;
    margin-top: 0;
  }

  .home-hero-carousel .carousel-grid.catalog-view-list .number-card-details {
    padding: 3px 12px;
    border-color: rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
  }

  .home-hero-carousel .carousel-grid.catalog-view-list .number-card-details:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
  }

  /* ТЁМНАЯ ПОЛОСА ПОД БАННЕРОМ. Та же ширина и та же внутренняя колонка, что у
     баннера, — визуально это его продолжение, отделённое тонкой линией. */
  .home-strip {
    display: block;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 26px max(24px, calc((100vw - 1160px) / 2));
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    background: linear-gradient(180deg, #0a101d 0%, #090e19 100%);
    color: #ffffff;
  }

  /* NOM-518: ВОСЕМЬ ПОЗИЦИЙ В ОДИН РЯД. Было два ряда по четыре, и полоса
     читалась кашей. Кегль при этом не тронут — сокращены зазоры и внутренние
     поля, как и просила задача: 15px у пунктов и 27px у цифр остались. */
  /* NOM-519: ни одна позиция полосы не переносится ВНУТРИ СЕБЯ — подписи и
     значения набраны в строку. Восемь позиций в один ряд при 1440 не встают:
     их собственная ширина без зазоров 1606px, с зазорами 1728px, а в колонке
     1160px (и даже в разрешённых 1280px) столько нет. Поэтому переносится не
     текст внутри позиции, а сама ГРУППА: пункты рядом, цифры рядом. */
  .home-strip-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 20px;
  }

  .home-strip-points,
  .home-strip-figures {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .home-strip-text,
  .home-figure-label,
  .home-figure-value {
    white-space: nowrap;
  }

  .home-strip-points {
    flex: 1 1 auto;
    gap: 10px;
    min-width: 0;
  }

  /* Цифры не сжимаются: значения набраны без переноса, и сжатая колонка не
     переносила бы их, а выпускала текст на соседнюю — «9 лет» наезжало на
     «99%». Ужимается группа пунктов слева, у неё текст переносится честно. */
  /* Разделитель — не вертикальная линия: группа цифр встаёт на свою строку, и
     линия слева от неё повисала бы в воздухе. */
  .home-strip-figures {
    flex: 0 1 auto;
    gap: 16px;
  }

  .home-strip-point {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 auto;
    font-size: 15px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.88);
  }

  .home-strip-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
  }

  .home-strip-ico svg { width: 18px; height: 18px; }

  /* Ужаться цифра может, но не уже своего содержимого: min-width остаётся
     auto (то есть min-content), поэтому подпись переносится, а значение —
     набранное без переноса — не выходит за колонку и не наезжает на соседнюю. */
  .home-figure {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 1 auto;
  }

  .home-figure-value {
    font-family: "Manrope", "Inter", sans-serif;
    font-size: clamp(20px, 1.9vw, 27px);
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    color: #ffffff;
  }

  .home-figure-codes { font-size: clamp(16px, 1.4vw, 21px); }

  .home-figure-label {
    font-size: 13px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.6);
  }

  /* Между полосой и фильтрами остаётся ровно одна компактная строка —
     заголовок «Каталог номеров». Надзаголовки и подпись раздела на десктопе
     не показываются: они и были той самой «водой», из-за которой каталог
     начинался ниже сгиба. Структура заголовков не меняется — это <p>, а не
     заголовки. */
  .home-catalog {
    padding-top: 26px;
    border-top: 0;
  }

  .home-catalog-header {
    margin-bottom: 14px;
  }

  .home-catalog-header .section-kicker,
  .home-catalog-header .section-text {
    display: none;
  }

  .home-catalog-header h2 {
    margin: 0;
    font-size: clamp(20px, 1.8vw, 28px);
    line-height: 1.15;
  }
}

/* NOM-521: порог 1200, перестраивавший баннер в две колонки, СНЯТ. Внутри
   десктопа раскладка баннера теперь одна на все ширины — см. блок
   NOM-521 HOME HERO ONPHOTO ниже; там элементы расставлены абсолютно, а
   меняются только размеры. Требование владельца: порядок не должен меняться
   при сужении окна, только размеры. */
/* END NOM-517 HOME HERO DESKTOP */
/* BEGIN NOM-521 HOME HERO ONPHOTO */
/* ВЕРХ ГЛАВНОЙ ВО ВСЮ ШИРИНУ ЭКРАНА. Кадр начинается с самой первой точки
   страницы и идёт под шапку; текст прижат к ЛЕВОМУ краю экрана, карточка — к
   ПРАВОМУ; шапка и полоса растянуты на всю ширину и прозрачны, они лежат НА
   кадре. Центрированной колонки 1160px в баннере больше нет — не подогнана,
   а убрана: раньше и текст, и карточка, и полоса жили внутри неё, и на широком
   экране баннер выглядел узкой лентой посреди пустого кадра.

   ЧЕТЫРЕ КРАЯ СОВПАДАЮТ ПО ПОСТРОЕНИЮ. Боковое поле одно на всех — --hero-s, и
   его читают шапка, текст, карточка и полоса. Подогнать их друг к другу
   вручную нельзя было бы: у шапки своё поле, у баннера своё, и они разъезжались
   бы на каждой правке.

   ОДНА РАСКЛАДКА ОТ 981 ДО СКОЛЬКО УГОДНО. Внутри десктопа нет ни одного
   媒-запроса, меняющего порядок, направление, перенос или число рядов: элементы
   баннера расставлены абсолютно, а меняются только размеры — через clamp/vw.
   Требование владельца дословно: «порядок не должен меняться при сужении окна,
   только размеры». Прежний порог 1200, переключавший баннер с одной колонки на
   две, снят — он и был единственным местом, где раскладка перестраивалась.

   Мобильный (<=980) не тронут вовсе: всё ниже висит на классе page-onphoto И
   внутри десктопного媒-запроса. */
@media (min-width: 981px) {
  body.page-onphoto {
    /* Боковое поле — одно на шапку, текст, карточку и полосу. */
    --hero-s: clamp(24px, 2.2vw, 44px);
    /* Высота баннера; шапка и полоса входят в неё. */
    --hero-h: clamp(520px, 41.5vw, 800px);
    --hero-head-h: clamp(64px, 5.2vw, 96px);
    --hero-text-w: clamp(300px, 24vw, 460px);
    /* NOM-523: карточка уже на 15% (320->272, 352->299.2, 422.4->359.0).
       Высота при этом обязана остаться прежней, поэтому то, что потеряла
       строка на сузившейся плите, возвращается ЗАЗОРОМ между строками, а не
       полями внутри них — поля растянули бы саму строку. */
    --card-w: clamp(272px, 18.7vw, 374px);
    --card-pad: clamp(9px, 0.75vw, 16px);
    /* Плита — 62% ВНУТРЕННЕЙ ширины карточки при отношении 4.72. Не число в
       пикселях: карточка тянется по vw, и фиксированная плита либо давила бы
       цену, либо болталась в пустоте. */
    --plate-w: calc((var(--card-w) - 2 * var(--card-pad)) * 0.62);
    --plate-h: calc((var(--card-w) - 2 * var(--card-pad)) * 0.62 / 4.72);
    /* NOM-523: ВЫСОТА КАРТОЧКИ ОСТАЁТСЯ ПРЕЖНЕЙ. Сужение съело высоту строк
       (плита считается от ширины), и чтобы карточка не подросла вверх, здесь
       посчитана высота сетки строк ДО сужения — по прежней ширине карточки.
       Сетке она задаётся жёстко, а сами строки остаются компактными: разницу
       разносит align-content: space-between, то есть она уходит в ЗАЗОРЫ между
       строками, а не в поля внутри них. Это и просила задача. */
    /* NOM-534: ВЕРТИКАЛЬНОЕ ПОЛЕ СТРОКИ УРЕЗАНО (было clamp(4px,0.42vw,8px)).
       Пятой строке не хватало высоты даже после подъёма карточки до 11%: при
       1200 не доставало полутора пикселей, при 1280 — трёх. Забрать их можно
       было только у вертикальных трат, и поле строки — единственная из них,
       которая не трогает ни ширину карточки, ни плиту: плита считается от
       ШИРИНЫ (62%), и поле над ней и под ней к её размеру отношения не имеет.
       Пять строк отдают 2 x (5.04 - 3.12) x 5 = 19.2px при 1200 — этого хватает
       и на пятую строку, и на зазор между строками, и на просвет до полосы. */
    --row-pad-y: clamp(3px, 0.26vw, 6px);
    /* Зазор между строками карточки. Раньше его не было вовсе (gap: 0), а
       просветы получались сами — как остаток жёсткой высоты сетки, разложенный
       через align-content. Жёсткой высоты больше нет (см. карусель ниже),
       поэтому зазор стал тем, чем и был по смыслу: собственной величиной. */
    --row-gap: clamp(2px, 0.22vw, 5px);
  }

  /* ---- ШАПКА НА КАДРЕ. Только главная; на всех прочих страницах шапка
     остаётся сегодняшней — непрозрачной, в потоке, со своей границей. Разметка
     шапки одна и та же везде, побайтно: меняется каскад, а не блок. */
  body.page-onphoto .page { position: relative; }

  body.page-onphoto .header {
    position: absolute;
    top: 0;
    left: calc(50% - 50vw);
    right: auto;
    width: 100vw;
    margin: 0;
    height: var(--hero-head-h);
    min-height: var(--hero-head-h);
    padding-left: var(--hero-s);
    padding-right: var(--hero-s);
    border-radius: 0;
    z-index: 40;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* ---- БАННЕР. Начинается с нулевой точки страницы: шапка вынута из потока,
     под ней ничего не резервируется, и первый блок <main> оказывается вверху. */
  body.page-onphoto .home-hero {
    position: relative;
    display: block;
    width: 100vw;
    max-width: 100vw;
    height: var(--hero-h);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, #0b1220 0%, #070c16 100%);
    color: #ffffff;
  }

  /* Затемнение кадра переписано под новую раскладку: слева плотно (там текст),
     сверху и снизу — потому что там лежат прозрачные шапка и полоса, и белые
     буквы на светлой части кадра иначе пропадают. */
  /* NOM-523: КАДР ОБРЕЗАН НА 20% МЕНЬШЕ. Прежний cover масштабировал кадр по
     высоте баннера и срезал по бокам всё, что не влезло. Теперь кадр —
     фоновая картинка ростом 83.333% высоты баннера (это и есть 1/1.2), по
     центру и прижата книзу; по ширине она остаётся шире экрана на каждой
     проверяемой ширине, поэтому голой полосы у краёв не появляется.
     Картинка переехала из <img> в фон ТОЛЬКО здесь, в десктопном варианте: на
     мобильном <img> остаётся обычной секцией со своим alt, как и был. */
  body.page-onphoto .home-hero > .photo-hero {
    background-color: #0a0e16;
    background-image: url(/photo/num777.webp);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto 83.333%;
  }

  body.page-onphoto .home-hero > .photo-hero img { display: none; }

  body.page-onphoto .home-hero > .photo-hero::after {
    background:
      /* Верхний слой плотнее прежнего: над кадром теперь полоса базового
         цвета, и градиент обязан свести её с кадром без видимого шва. */
      linear-gradient(180deg, #0a0e16 0%, rgba(10, 14, 22, 0.94) 10%,
                              rgba(4, 8, 16, 0.42) 23%, rgba(4, 8, 16, 0.24) 40%,
                              rgba(4, 8, 16, 0.30) 62%, rgba(4, 8, 16, 0.78) 100%),
      linear-gradient(90deg, rgba(4, 8, 16, 0.90) 0%, rgba(4, 8, 16, 0.72) 24%,
                             rgba(4, 8, 16, 0.34) 52%, rgba(4, 8, 16, 0.22) 100%);
  }

  /* ---- ТЕКСТ: прижат к левому краю экрана. */
  body.page-onphoto .home-hero > .seo-intro-moved {
    position: absolute;
    left: var(--hero-s);
    top: calc(var(--hero-h) * 0.24);
    width: var(--hero-text-w);
    max-width: calc(100vw - 2 * var(--hero-s));
    margin: 0;
    z-index: 2;
  }

  body.page-onphoto .home-hero .seo-text { max-width: none; width: 100%; }

  body.page-onphoto .home-hero .seo-intro-moved h1 {
    font-size: clamp(34px, 2.9vw, 56px);
    line-height: 1.08;
  }

  body.page-onphoto .home-hero .seo-text p.home-hero-lead {
    margin-top: clamp(10px, 1vw, 18px);
    font-size: clamp(14px, 1.05vw, 18px);
  }

  /* Кнопки ВСЕГДА в один ряд. Ширина ряда объявлена по содержимому, поэтому
     он не переносится даже когда колонка текста уже, чем сам ряд: колонка
     задаёт перенос заголовка и подписи, а не кнопок. */
  body.page-onphoto .hero-cta {
    width: max-content;
    max-width: none;
    flex-wrap: nowrap;
    gap: clamp(8px, 0.8vw, 12px);
    margin-top: clamp(16px, 1.8vw, 28px);
  }

  body.page-onphoto .hero-btn {
    min-height: clamp(40px, 3.4vw, 52px);
    padding: 0 clamp(13px, 1.35vw, 22px);
    font-size: clamp(13px, 1.05vw, 15px);
  }

  body.page-onphoto .hero-btn-ico {
    width: clamp(14px, 1.25vw, 18px);
    height: clamp(14px, 1.25vw, 18px);
    flex-basis: clamp(14px, 1.25vw, 18px);
    margin-left: clamp(6px, 0.7vw, 10px);
  }

  /* ---- КАРТОЧКА: прижата к правому краю экрана. */
  /* NOM-534: карточка поднята с 15% высоты баннера до 11%. Пятой строке нужна
     вертикаль, а взять её можно только сверху: низ держит полоса (нижние 18%),
     ширину карточки трогать нельзя, плиту — тоже. 11% — предел, дальше карточка
     подходит к прозрачной шапке (var(--hero-head-h) — это 12.3% высоты при 1200
     и 12.0% при 1920), и её верхняя кромка уезжала бы под меню. */
  body.page-onphoto .home-hero > .home-hero-carousel {
    position: absolute;
    right: var(--hero-s);
    left: auto;
    top: calc(var(--hero-h) * 0.11);
    width: var(--card-w);
    z-index: 2;
  }

  body.page-onphoto .hero-card {
    padding: var(--card-pad);
    border-radius: clamp(14px, 1.4vw, 22px);
  }

  /* NOM-523: заголовок карточки и ссылка «Все номера» набраны так, чтобы
     строка помещалась в СУЗИВШУЮСЯ карточку целиком. Иначе они переносятся, и
     высота карточки скачет на 20-30px от ширины к ширине — именно из-за этого
     она и разъезжалась с прежней после сужения. */
  body.page-onphoto .hero-card-head {
    margin-bottom: clamp(6px, 0.6vw, 10px);
    gap: clamp(8px, 0.8vw, 14px);
  }
  /* Обе подписи строки заголовка — в ОДНУ строку и без переноса. Перенос здесь
     не косметика: он менял высоту карточки на 20-30px от ширины к ширине и
     делал её непредсказуемой. Кегли подобраны так, чтобы строка помещалась в
     самую узкую карточку даже запасным шрифтом, который шире рабочего. */
  body.page-onphoto .hero-card-title {
    font-size: clamp(11px, 0.88vw, 15px);
    white-space: nowrap;
  }
  body.page-onphoto .hero-card-all {
    font-size: clamp(9px, 0.72vw, 12px);
    white-space: nowrap;
  }

  /* Высота карточки — не свободная величина: карточка начинается на 15% высоты
     баннера, полоса занимает нижние 18%, значит на всё содержимое остаётся 67%.
     На узком десктопе высота баннера упирается в свой нижний предел (520px), а
     содержимое карточки продолжает расти по vw, поэтому все вертикальные траты
     внутри неё — поля, зазоры, высота нижней кнопки — заданы скупо и меряются
     проверкой [9], а не на глаз. */
  body.page-onphoto .hero-card-more {
    min-height: clamp(34px, 2.6vw, 44px);
    margin-top: clamp(6px, 0.6vw, 10px);
    font-size: clamp(11px, 0.92vw, 14px);
    white-space: nowrap;
  }

  /* Строка карточки. Всё в ней меряется от самой карточки: плита 62% её
     внутренней ширины, на цену остаются оставшиеся 38% минус поля и зазоры,
     и цена набрана кеглем, который в эти 38% помещается при самой длинной
     цене каталога. Средняя колонка (скрытая дата) — minmax(0,1fr): при
     обычной цене она забирает остаток, на самой длинной сжимается в ноль. */
  /* NOM-534: ВЫСОТА СЕТКИ БОЛЬШЕ НЕ ЖЁСТКАЯ. До этой задачи здесь стояла
     подогнанная прямая --grid-h-prev (132px + 8.66vw): она держала высоту
     карточки ровно такой, какой та была ДО сужения в NOM-523, а излишек
     расходился по зазорам через align-content: space-between. Со сменой числа
     строк на пять эта прямая стала не просто неверной, а опасной: жёсткая
     высота НЕ растёт под содержимое, и пятая строка вылезла бы за пределы
     сетки — за нижнюю кромку карточки, поверх полосы, — вместо того чтобы
     сделать карточку выше. Поэтому высоту теперь задаёт само содержимое, а
     зазор между строками стал отдельной величиной, которую видно и можно
     мерить: пять строк плюс четыре зазора, и ничего подгонять не надо. */
  body.page-onphoto .home-hero-carousel .carousel-grid.catalog-view-list {
    height: auto;
    align-content: start;
    gap: var(--row-gap);
  }


  body.page-onphoto .home-hero-carousel .carousel-grid.catalog-view-list .number-card,
  body.page-onphoto .home-hero-carousel .carousel-grid.catalog-view-list .number-card.number-card-view {
    grid-template-columns: var(--plate-w) minmax(0, 1fr) max-content !important;
    /* Плита ужалась вместе с карточкой, и место под цену пришлось выиграть
       полями и зазором строки, а НЕ кеглем: кегль цены задаёт высоту строки, а
       высота карточки обязана остаться прежней. */
    column-gap: clamp(2px, 0.2vw, 4px) !important;
    padding: var(--row-pad-y) clamp(3px, 0.35vw, 6px);
    border-radius: clamp(9px, 1vw, 15px);
  }

  body.page-onphoto .home-hero-carousel .carousel-grid.catalog-view-list .number-image-button {
    width: var(--plate-w) !important;
    min-width: var(--plate-w) !important;
    max-width: var(--plate-w) !important;
    flex: 0 0 var(--plate-w) !important;
  }

  body.page-onphoto .home-hero-carousel .carousel-grid.catalog-view-list .number-card .number-image-button img,
  body.page-onphoto .home-hero-carousel .carousel-grid.catalog-view-list .number-image-button img,
  body.page-onphoto .home-hero-carousel .carousel-grid.catalog-view-list .number-card img {
    width: var(--plate-w) !important;
    min-width: var(--plate-w) !important;
    max-width: var(--plate-w) !important;
    height: var(--plate-h) !important;
    max-height: var(--plate-h) !important;
  }

  /* Кегль цены посчитан, а не выбран: на плиту уходит 62% внутренней ширины
     карточки, значит цене с полями и зазорами остаются 38%. При карточке в её
     нижнем пределе (320px) это ~113px, и самая длинная цена каталога
     («11 000 000 ₽») должна уложиться в них ВМЕСТЕ с полями строки. Отсюда
     верхний предел 14px, а не 16: на 16px строка вылезала за правый край
     карточки на 21px. Проверяется подстановкой этой цены в [8.22]. */
  /* Плита ужалась вместе с карточкой, и на цену осталось меньше: 38% от
     внутренней ширины 254px при 1200 — это 96.5px минус поля и зазоры строки.
     Отсюда кегль ниже прежнего. Проверяется подстановкой самой длинной цены
     каталога в [9.12]. */
  body.page-onphoto .home-hero-carousel .carousel-grid.catalog-view-list .number-card-price {
    font-size: clamp(11px, 0.85vw, 14px);
  }

  body.page-onphoto .home-hero-carousel .carousel-grid.catalog-view-list .number-card-details {
    padding: 2px clamp(6px, 0.7vw, 12px);
    font-size: clamp(10px, 0.85vw, 12px);
  }

  /* ---- ПОЛОСА в низу баннера: во всю ширину, БЕЗ своей заливки, только
     волосяная линия сверху. Прежняя тёмная плашка была отдельным блоком под
     баннером и обрывала кадр; здесь полоса лежит НА кадре. */
  body.page-onphoto .home-hero > .home-strip {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    height: calc(var(--hero-h) * 0.18);
    margin: 0;
    padding: 0 var(--hero-s);
    background: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    z-index: 2;
  }

  body.page-onphoto .home-strip-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(14px, 1.5vw, 30px);
    width: 100%;
    height: 100%;
  }

  body.page-onphoto .home-strip-points {
    flex: 1 1 auto;
    min-width: 0;
    gap: clamp(10px, 1.1vw, 24px);
  }

  /* Разделитель между группами — вертикальная волосяная линия, как в макете. */
  /* Разделитель группы рисует первая цифра своей линией — отдельной рамки у
     группы больше нет, иначе линий было бы две подряд. */
  body.page-onphoto .home-strip-figures {
    flex: 0 1 auto;
    gap: clamp(12px, 1.3vw, 28px);
    padding-left: 0;
    border-left: 0;
  }

  /* NOM-519 п.D отозван владельцем: подписи снова могут занимать две строки —
     в макете они такие. Запрет остаётся ровно один и другой: позиция не
     уходит во ВТОРОЙ РЯД (за это отвечает flex-wrap: nowrap выше). */
  body.page-onphoto .home-strip-text,
  body.page-onphoto .home-figure-label {
    white-space: normal;
  }

  body.page-onphoto .home-figure-value { white-space: nowrap; }
  body.page-onphoto .home-figure-codes { white-space: normal; }

  body.page-onphoto .home-strip-point {
    flex: 1 1 0;
    min-width: 0;
    gap: clamp(8px, 0.8vw, 14px);
    font-size: clamp(12px, 1.02vw, 15px);
  }

  /* NOM-523: иконки ГОЛЫЕ — в макете они тонким контуром и без плашки под
     ними. Коробка, рамка и фон сняты, размер задаёт сама картинка. */
  body.page-onphoto .home-strip-ico {
    width: clamp(22px, 1.9vw, 30px);
    height: clamp(22px, 1.9vw, 30px);
    flex: 0 0 clamp(22px, 1.9vw, 30px);
    border: 0;
    border-radius: 0;
    background: none;
    color: rgba(255, 255, 255, 0.9);
  }

  body.page-onphoto .home-strip-ico svg {
    width: 100%;
    height: 100%;
  }

  /* Волосяные разделители: перед каждой цифрой. Первый из них и есть граница
     между группой пунктов и группой цифр, остальные три — между парами цифр,
     ровно как в макете. Высота задана, поэтому линия не тянется на всю полосу
     и не спорит с её верхней линией. */
  body.page-onphoto .home-figure {
    flex: 0 1 auto;
    position: relative;
    padding-left: clamp(12px, 1.3vw, 28px);
  }

  body.page-onphoto .home-figure::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 44px;
    margin-top: -22px;
    background: rgba(255, 255, 255, 0.14);
  }
  body.page-onphoto .home-figure-value { font-size: clamp(17px, 1.55vw, 27px); }
  body.page-onphoto .home-figure-codes { font-size: clamp(13px, 1.15vw, 21px); }
  body.page-onphoto .home-figure-label { font-size: clamp(11px, 0.9vw, 13px); }

  /* Каталог идёт сразу под баннером, как и был. */
  body.page-onphoto .home-catalog { padding-top: clamp(20px, 2vw, 34px); }
}
/* END NOM-521 HOME HERO ONPHOTO */


/* BEGIN NOM-513 CITY PAGE */
/* Ряд ссылок на города в подвале всего сайта: одна строка, переносится сама. */
.footer-cities{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  margin:10px 0 0;font-size:14px;line-height:1.5}
.footer-cities-cap{font-weight:700;opacity:.75}
.footer-cities-list{display:flex;flex-wrap:wrap;gap:6px 8px}
.footer-cities a{text-decoration:none;opacity:.9}
.footer-cities a:hover{text-decoration:underline;opacity:1}
/* Контакты городской страницы. Городская линия — первая и ЗАМЕТНАЯ: посетитель
   должен видеть, что звонит в свой город, а не в общую линию края. */
.city-phone{margin:6px 0}
.city-phone-main{font-size:clamp(18px,2.2vw,24px);font-weight:800;line-height:1.25}
.city-phone-main .city-phone-link{text-decoration:none}
.city-phone-general{font-size:15px;color:rgba(17,24,39,.72)}
/* END NOM-513 CITY PAGE */


/* BEGIN NOM-522 HEADER CONTENT */
/* Содержимое шапки по макету: слева логотип, посередине текстовое меню, справа
   телефон сайта с подписью и кнопка «Написать». Раскладка одна на весь десктоп
   и тянется по ширине — ни одного порога между 1200 и 1920 здесь нет. */
@media (min-width: 981px) {
  /* Правая часть — РЯД: столбик «телефон + часы» и кнопка рядом с ним.
     Прежде это была колонка «телефон над иконками»; иконок больше нет. */
  .header { gap: clamp(10px, 0.9vw, 22px); }

  .header-contacts {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(8px, 0.75vw, 20px);
    flex: 0 0 auto;
  }

  .header-menu-shell {
    width: auto;
    justify-content: center;
    gap: 0;
    flex: 1 1 auto;
    min-width: 0;
  }

  .header-menu-shell .nav {
    flex-wrap: nowrap;
    /* NOM-535: та же переменная, что и у общего правила выше, — не вторая копия
       выражения. От зазора зависит положение разделителя, и разойдись копии,
       на главной он встал бы не в середину. */
    gap: var(--nav-gap);
  }

  .header .nav a { font-size: clamp(12.5px, 1.02vw, 15px); }

  .brand { flex: 0 0 auto; }
  .brand-name { font-size: clamp(12.5px, 1vw, 17px); }

  .header-write { padding: 0 clamp(10px, 0.9vw, 22px); }
}

/* На узком экране подпись «Ежедневно…» снимается: там дорога каждая строка, а
   кнопка «Написать» встаёт РОВНО НА МЕСТО трёх круглых иконок — во второй ряд
   по центру, теми же правилами, что стояли у .header-actions.

   .header-phone-box объявлена display:contents: на узком экране шапка — сетка,
   и телефон обязан остаться ЕЁ прямым элементом, иначе прежние правила его
   размещения (второй столбец, первый ряд, по центру) перестают действовать и
   мобильная шапка расползается. Обёртка нужна только на десктопе, где телефон
   и часы стоят столбиком. */
@media (max-width: 980px) {
  .header-hours { display: none; }
  .header-phone-box { display: contents; }

  .header-write {
    min-height: 44px;
    padding: 0 16px;
    font-size: 14px;
  }
}

@media (max-width: 860px) {
  /* NOM-524: во второй ряд шапки встаёт теперь ОБЁРТКА кнопки (<details>), а
     не сама кнопка: панель позиционируется от обёртки, и если бы в сетке
     стояла кнопка, обёртка растянулась бы во всю ширину и панель уехала бы
     за левый край экрана. */
  .header-write-box {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  .header-write { margin: 0 !important; }
}
/* END NOM-522 HEADER CONTENT */


/* BEGIN NOM-523 STRIP SIGNATURE */
/* Рукописная подпись в правом конце полосы. Шрифт СВОЙ: файл лежит в
   /assets/fonts/, рядом с ним лицензия OFL. Запроса на чужой хост при показе
   страницы не происходит ни одного — это требование задачи, а не вкус:
   сторонний шрифт означал бы и стороннюю аналитику на каждом заходе.

   Файл — подмножество Caveat ровно под те буквы, что стоят в подписи
   («Больше чем просто номер»), 8 КБ вместо сотен. font-display: swap, запасной
   ряд — системный курсив: не пришёл шрифт — подпись осталась читаемой. */
@font-face {
  font-family: "Caveat Signature";
  src: url("/assets/fonts/caveat-signature.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* На мобильном полосы нет вовсе, значит нет и подписи. */
.home-strip-sign { display: none; }

@media (min-width: 981px) {
  body.page-onphoto .home-strip-sign {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    margin: 0;
    padding-left: clamp(10px, 1vw, 22px);
    flex: 0 0 auto;
    font-family: "Caveat Signature", "Segoe Script", "Brush Script MT", cursive;
    font-weight: 600;
    font-size: clamp(19px, 1.7vw, 31px);
    line-height: 1.02;
    text-align: right;
    /* Подпись лежит на самой светлой части кадра, поэтому и цвет полный, и
       мягкая тень: без неё она пропадала на светлом.
       !important здесь не для красоты: тёмная тема задаёт абзацам внутри main
       цвет rgba(17,24,39,.68) с тем же весом, и без него подпись выходила
       почти чёрной поверх тёмного кадра. */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 10px rgba(4, 8, 16, 0.9), 0 0 2px rgba(4, 8, 16, 0.7);
  }
}
/* END NOM-523 STRIP SIGNATURE */


/* BEGIN NOM-524 WRITE PANEL PLACEMENT */
/* На узком экране кнопка стоит по центру второго ряда шапки, поэтому панель
   привязывается к её середине, а не к правому краю: у правого края она
   вылезала бы за экран. Ширина ограничена шириной окна. */
@media (max-width: 980px) {
  .header-write-panel {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
  }
}
/* END NOM-524 WRITE PANEL PLACEMENT */

/* NOM-572: общий блок «Как законно оформить красивый номер». Внешний вид берётся
   у .seo-text, которая уже стоит вокруг; здесь добавлено ровно то, чего у неё
   нет, — нумерованный список. Отдельной «темы» у блока нет намеренно: он обязан
   выглядеть частью страницы, а не баннером поверх неё. */
.legal-note-steps {
  margin: 0 0 18px;
  padding-left: 22px;
  color: rgba(17, 24, 39, 0.74);
  font-size: 17px;
  line-height: 1.78;
}

.legal-note-steps li {
  margin: 0 0 8px;
}

.legal-note-more {
  margin-bottom: 0;
}