/* ---- new-tokens.css ---- */
/* 04.09.2026 - п.30 списка Никиты «токены почти не используются, 3359 хардкодов цвета».
   Точные совпадения канона заменены на var(--токен, #значение); фолбэк оставлен намеренно -
   если переменная потеряется, цвет останется прежним. Соответствие:
   #0E0E12 --ink · #1E1E24 --ink-2 · #3D3D48 --ink-3 · #6E6E76 --muted · #ECECF0 --line ·
   #F0F0F3 --line-2 · #F7F7F9 --bg · #E11D2E --accent · #B8152B --accent-2 · #1E8C4A --success ·
   #FAEDD1 --warn-soft · #FFFFFF --bg-card (фоны) либо --ink-invert (текст, иконки, обводки).
   Намеренно НЕ трогали #5A5A66, #9C9CA8, #C07A00: их токены (--ink-4, --muted-2, --warn)
   new-catalog-after.css переопределяет внутри .how/.faq/.adv/.viewed/.seo/.contacts-section
   на другие значения - подстановка var() там сменила бы цвет. Заменено в файле: 21. */
/* =========================================
   Encar — редизайн каталога (ранняя версия).
   04.09.2026 (п.29 списка Никиты «токены переопределяют сами себя»):
   • источник правды по цветам — :root в new-catalog.css, он подключается ПОСЛЕ этого файла;
     совпадающие имена здесь закомментированы, чтобы не искать, какое из двух значений работает;
   • вырезаны блоки body[data-variant="a|b|c|d"] — прототипы вариантов дизайна, атрибут
     data-variant не ставит ни один шаблон, на живых страницах его нет.
   ========================================= */

:root {
  /* --ink: #0A0A0B; — перебивается new-catalog.css (#0E0E12), источник правды там */
  /* --ink-2: #1e1e24; — перебивается new-catalog.css (#1E1E24), источник правды там */
  /* --ink-3: #3d3d48; — перебивается new-catalog.css (#3D3D48), источник правды там */
  /* --muted: #6E6E76; — перебивается new-catalog.css (#6E6E76), источник правды там */
  /* --line: #ececf0; — перебивается new-catalog.css (#ECECF0), источник правды там */
  /* --line-2: #ececf0; — перебивается new-catalog.css (#f0f0f3), источник правды там */
  /* --bg: #f7f7f9; — перебивается new-catalog.css (#F7F7F9), источник правды там */
  --bg-card: #FFFFFF;
  /* --bg-elev: #FCFCFA; — перебивается new-catalog.css (#FFFFFF), источник правды там */
  --accent: #E11D2E;
  --accent-ink: #B8152B;
  /* --accent-soft: #f7f7f9; — перебивается new-catalog.css (#f0f0f3), источник правды там */
  --success: #1E8C4A;
  --radius: 10px;
  /* --radius-lg: 14px; — перебивается new-catalog.css (20px), источник правды там */
  --radius-pill: 999px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  /* --shadow-sm: 0 1px 2px rgba(10,10,11,.04); — перебивается new-catalog.css (0 1px 2px rgba(14,14,16,.04)), источник правды там */
  /* --shadow-md: 0 8px 24px rgba(10,10,11,.06); — перебивается new-catalog.css (0 10px 28px rgba(14,14,16,.06)), источник правды там */
}

body[class*="new-design"] *, body[class*="new-design"] *::before, body[class*="new-design"] *::after { box-sizing: border-box; }
/* Не перетираем font-family/size/line-height на body — оставляем боевой Montserrat 14px.
   Наши новые блоки (.topbar, .header, .hero, .search-bar, .filter-section) задают
   свои размеры локально. */
body[class*="new-design"] {
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body[class*="new-design"] button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
body[class*="new-design"] input, body[class*="new-design"] select { font-family: inherit; color: inherit; }
body[class*="new-design"] a { color: inherit; text-decoration: none; }

body[class*="new-design"] .shell { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* --------- TOP UTILITY BAR --------- */
.util {
  background: var(--ink);
  color: #D4D4CF;
  font-size: 12.5px;
  letter-spacing: .01em;
}
.util .shell {
  display: flex; align-items: center; justify-content: space-between;
  height: 40px; gap: 24px;
}
.util .city { display: flex; align-items: center; gap: 6px; }
.util .city .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
.util .city strong { color: var(--ink-invert, #FFFFFF); font-weight: 600; border-bottom: 1px dashed rgba(255,255,255,.4); cursor: pointer; }
.util nav { display: flex; gap: 18px; align-items: center; }
.util .util-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.util nav a { color: #B8B8B0; transition: color .15s var(--ease); }
.util nav a:hover { color: var(--ink-invert, #FFFFFF); }
.util nav a.hot { color: var(--ink-invert, #FFFFFF); }
.util nav a.hot::before {
  content: ""; display: inline-block; width: 5px; height: 5px;
  background: var(--accent); border-radius: 999px; margin-right: 6px; vertical-align: 2px;
}

/* --------- HEADER --------- */
.header { background: var(--bg-card, #FFFFFF); border-bottom: 1px solid var(--line); }
.header .shell {
  height: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.logo {
  display: flex; align-items: baseline; gap: 2px;
  font-family: 'Instrument Serif', serif;
  font-size: 30px; line-height: 1;
  letter-spacing: -.01em;
}
.logo .e { color: var(--accent); font-weight: 400; }
.logo .rus {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em;
  color: var(--ink);
  background: var(--line-2);
  padding: 3px 6px; border-radius: 4px;
  margin-left: 6px; transform: translateY(-6px);
}

.main-nav { display: flex; gap: 0; align-items: center; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.main-nav a {
  padding: 9px 10px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  flex: none;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.main-nav a:hover { background: var(--bg); color: var(--ink); }
.main-nav a.active { color: var(--ink); background: var(--bg); }
.main-nav a .tag {
  font-size: 12px; padding: 2px 5px; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent-ink); font-weight: 700;
  letter-spacing: .04em;
}

.header-right { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; white-space: nowrap; }
.rating {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line);
  font-size: 12.5px;
}
.rating .stars { color: #F5A524; letter-spacing: .5px; font-size: 12px; }
.rating .num { font-weight: 700; }
.phone {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 13.5px;
  padding: 8px 10px; border-radius: 8px;
  white-space: nowrap;
  transition: background .15s var(--ease);
}
@media (max-width: 1180px) {
  .phone .phone-num { display: none; }
  .phone { padding: 8px; }
  .main-nav a .tag { display: none; }
}
@media (max-width: 1060px) {
  .main-nav a { padding: 8px 7px; font-size: 13px; }
}
.phone:hover { background: var(--bg); }
.phone svg { color: var(--accent); }

.cta {
  padding: 10px 14px;
  background: var(--ink);
  color: var(--ink-invert, #FFFFFF);
  border-radius: 8px;
  font-weight: 600; font-size: 13.5px;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.cta:hover { background: var(--ink-2); }
.cta.accent { background: var(--accent); }
.cta.accent:hover { background: var(--accent-ink); }

/* --------- BREADCRUMBS --------- */
.crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted);
  padding: 20px 0 12px;
}
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { opacity: .5; }

/* --------- PAGE TITLE ROW --------- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px;
  padding: 4px 0 28px;
}
.page-title {
  font-size: 52px; line-height: 1.02;
  letter-spacing: -.025em; font-weight: 700;
  margin: 0;
}
.page-title em {
  font-family: 'Instrument Serif', serif;
  font-weight: 400; font-style: italic;
  letter-spacing: -.01em;
}
.page-meta {
  display: flex; align-items: center; gap: 20px;
  padding-bottom: 8px;
}
.count {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px;
}
.count .num {
  font-size: 28px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.count .label { font-size: 12px; color: var(--muted); letter-spacing: .02em; }

.live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 500;
}
.live-pill .pulse {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--success);
  position: relative;
}
.live-pill .pulse::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 999px; border: 2px solid var(--success);
  animation: pulse 1.8s infinite var(--ease);
  opacity: 0;
}
@keyframes pulse {
  0% { transform: scale(.6); opacity: .9; }
  100% { transform: scale(1.8); opacity: 0; }
}
.live-pill strong { font-variant-numeric: tabular-nums; }

/* --------- SEARCH --------- */
.search-zone { display: grid; gap: 14px; margin-bottom: 20px; }

.search-bar {
  display: flex; align-items: center; gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 6px 6px 6px 20px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search-bar:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(10,10,11,.06);
}
.search-bar .icon { color: var(--muted); flex: none; }
.search-bar input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 15.5px; padding: 14px 16px;
  letter-spacing: -.005em;
}
.search-bar input::placeholder { color: var(--muted); }
.search-bar .ai-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--ink-invert, #FFFFFF);
  border-radius: 10px;
  font-size: 13px; font-weight: 600;
  transition: background .15s var(--ease);
}
.search-bar .ai-btn:hover { background: var(--ink-2); }
.search-bar .ai-btn .ai-dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.search-bar .clear {
  padding: 10px; color: var(--muted); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.search-bar .clear:hover { background: var(--bg); color: var(--ink); }

.search-suggestions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted);
  padding: 0 4px;
}
.search-suggestions .label { font-weight: 500; }
.search-suggestions button {
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 12.5px; color: var(--ink-3);
  transition: all .15s var(--ease);
}
.search-suggestions button:hover {
  background: var(--ink); color: var(--ink-invert, #FFFFFF); border-color: var(--ink);
}

/* --------- QUICK CHIPS --------- */
.chips {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  align-items: center;
}
.chips .chips-label {
  font-size: 12px; font-weight: 600; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase;
  padding-right: 4px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500;
  color: var(--ink-3);
  transition: all .15s var(--ease);
  white-space: nowrap;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.active {
  background: var(--ink); color: var(--ink-invert, #FFFFFF); border-color: var(--ink);
}
.chip.active .x { opacity: .6; }
.chip .x { display: inline-flex; }
.chip .emoji { font-size: 13px; filter: saturate(.85); }

/* --------- BRANDS ROW --------- */
.brands {
  display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center;
  padding: 4px 0 20px;
}
.brands .label {
  font-size: 12px; font-weight: 600; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase;
  padding-right: 4px;
}
.brand {
  width: 54px; height: 54px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; letter-spacing: -.02em;
  color: var(--ink);
  transition: all .15s var(--ease);
  position: relative;
}
.brand:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.brand.more {
  background: transparent; color: var(--muted);
  border-style: dashed;
}
.brand.more:hover { color: var(--ink); border-color: var(--ink); border-style: solid; }

/* --------- FILTERS SECTION --------- */
.filters-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 0 0 16px;
}
.filters-head-left { display: flex; align-items: center; gap: 14px; }
.filters-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--ink-invert, #FFFFFF);
  border-radius: 10px;
  font-size: 14px; font-weight: 600;
  transition: background .15s var(--ease);
}
.filters-toggle:hover { background: var(--ink-2); }
.filters-toggle .chev { transition: transform .25s var(--ease); }
.filters-toggle.open .chev { transform: rotate(180deg); }
.filters-toggle .badge {
  padding: 2px 7px; border-radius: 999px;
  background: var(--accent); color: var(--ink-invert, #FFFFFF);
  font-size: 12px; font-weight: 700;
  min-width: 18px; text-align: center;
}

.sort {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
}
.sort .sort-label { color: var(--muted); }
.sort select {
  border: 1px solid var(--line);
  background: var(--bg-card);
  padding: 9px 34px 9px 12px;
  border-radius: 8px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B8B85' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.sort select:hover { border-color: var(--ink); }

.reset {
  font-size: 13px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 8px;
  transition: all .15s var(--ease);
}
.reset:hover { color: var(--ink); background: var(--bg-card); }

/* --------- FILTERS PANEL --------- */
.filters {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .35s var(--ease), opacity .25s var(--ease), margin .25s var(--ease);
}
.filters.open {
  max-height: 1200px;
  opacity: 1;
}
.filters-inner {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}
.filter-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.field {
  display: flex; flex-direction: column; gap: 6px;
}
.field label {
  font-size: 12px; font-weight: 600; color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase;
}
.field .ctrl {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-elev);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.field .ctrl:hover { border-color: var(--ink-3); }
.field .ctrl:focus-within { border-color: var(--ink); background: var(--bg-card, #FFFFFF); }
.field select, .field input {
  width: 100%;
  padding: 11px 34px 11px 12px;
  border: none; outline: none; background: transparent;
  font-size: 14px; font-weight: 500;
  border-radius: 10px;
  appearance: none;
}
.field input { padding-right: 12px; }
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2345454A' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.field.range { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.field.range .ctrl { border-radius: 10px; }

.filters-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding-top: 20px; margin-top: 20px;
  border-top: 1px solid var(--line);
}
.filters-footer .checks {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.check {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500;
  color: var(--ink-3);
  transition: all .15s var(--ease);
  cursor: pointer;
  user-select: none;
}
.check:hover { border-color: var(--ink-3); color: var(--ink); }
.check input { display: none; }
.check .box {
  width: 16px; height: 16px;
  border: 1.5px solid var(--line); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s var(--ease);
}
.check.on { background: var(--ink); color: var(--ink-invert, #FFFFFF); border-color: var(--ink); }
.check.on .box { background: var(--bg-card, #FFFFFF); border-color: var(--ink-invert, #FFFFFF); }
.check.on .box::after {
  content: ""; width: 8px; height: 5px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg) translate(1px, -1px);
}
.show-cta {
  padding: 14px 28px;
  background: var(--accent);
  color: var(--ink-invert, #FFFFFF);
  border-radius: 10px;
  font-weight: 700; font-size: 14.5px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all .15s var(--ease);
  box-shadow: 0 2px 0 var(--accent-ink);
}
.show-cta:hover { background: var(--accent-ink); transform: translateY(1px); box-shadow: 0 1px 0 var(--accent-ink); }
.show-cta .num { font-variant-numeric: tabular-nums; }
.show-cta .arrow { transition: transform .2s var(--ease); }
.show-cta:hover .arrow { transform: translateX(3px); }

/* --------- FLOATING CHAT --------- */
.fab {
  position: fixed; right: 24px; bottom: 24px;
  width: 56px; height: 56px;
  background: var(--ink); color: var(--ink-invert, #FFFFFF);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(10,10,11,.2);
  z-index: 100;
  transition: transform .2s var(--ease);
}
.fab:hover { transform: scale(1.05); }
.fab .dot {
  position: absolute; top: 10px; right: 10px;
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--accent); border: 2px solid var(--ink-invert, #FFFFFF);
}

/* --------- TWEAKS PANEL --------- */
.tweaks {
  position: fixed; right: 24px; bottom: 96px;
  width: 280px;
  background: var(--ink);
  color: var(--ink-invert, #FFFFFF);
  border-radius: 14px;
  padding: 16px;
  z-index: 200;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  display: none;
  font-size: 13px;
}
.tweaks.show { display: block; }
.tweaks h4 {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.5);
  letter-spacing: .08em; text-transform: uppercase;
}
.tweaks .variants { display: grid; gap: 6px; }
.tweaks .variants button {
  text-align: left;
  padding: 10px 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: var(--ink-invert, #FFFFFF);
  font-size: 13px; font-weight: 500;
  transition: all .15s var(--ease);
}
.tweaks .variants button:hover { background: rgba(255,255,255,.1); }
.tweaks .variants button.active {
  background: var(--accent); border-color: var(--accent);
}
.tweaks .variants button .desc {
  display: block; font-size: 12px; color: rgba(255,255,255,.6);
  font-weight: 400; margin-top: 3px;
}
.tweaks .variants button.active .desc { color: rgba(255,255,255,.85); }




/* Body-type shortcuts row (a la Auto.ru category icons) */
.body-types {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin: 4px 0 20px;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.body-type {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s var(--ease);
  text-align: center;
}
.body-type:hover {
  background: var(--line-2, #F0F0F3);
  border-color: var(--line);
}
.body-type.active {
  background: var(--bg, #F7F7F9);
  border-color: #C7D2FE;
}
.body-type svg { color: var(--ink); opacity: .8; }
.body-type.active svg { color: var(--marketplace-blue); opacity: 1; }
.body-type .label {
  font-size: 12px; font-weight: 600; color: var(--ink-3);
  white-space: nowrap;
}
.body-type.active .label { color: var(--marketplace-blue-ink); }
.body-type .count-sm {
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* Hide body-types on other variants */
/* 04.09.2026 (п.29): было body:not([data-variant="d"]) .body-types — вариантов дизайна
   больше нет, поэтому условие убрано, поведение прежнее (элемент скрыт всегда). */
.body-types { display: none; }

/* small screens */
@media (max-width: 900px) {
  .filter-grid { grid-template-columns: repeat(2, 1fr); }
  .page-title { font-size: 36px; }

}

/* ================================================================
   Bitrix24 site_button vs AI-чат-виджет — выравниваем строго друг под другом.
   AI-чат (`.wc-btn`): right: 20px, bottom: 20px, width: 60px (см. widget.js).
   Bitrix24 (`.b24-widget-button-position-bottom-right`): по дефолту ~25px right
   и 25px bottom — выравниваем right=20px, поднимаем над AI-баблом.
   ================================================================ */
.b24-widget-button-position-bottom-right,
.b24-widget-button-shadow.b24-widget-button-position-bottom-right,
.b24-widget-button-wrapper.b24-widget-button-position-bottom-right {
  right: 20px !important;
  bottom: 90px !important;
}
/* AI-чат — на всякий случай прибиваем точные координаты, чтобы не уехал */
.wc-btn {
  right: 20px !important;
  bottom: 20px !important;
}
/* На мобильной версии меньше зазор */
@media (max-width: 720px) {
  .b24-widget-button-position-bottom-right,
  .b24-widget-button-shadow.b24-widget-button-position-bottom-right,
  .b24-widget-button-wrapper.b24-widget-button-position-bottom-right {
    right: 14px !important;
    bottom: 80px !important;
  }
  .wc-btn {
    right: 14px !important;
    bottom: 14px !important;
  }
}


/* ---- new-catalog.css ---- */
/* 04.09.2026 (п.35 аудита Никиты): файл весил 731 КБ и грузился на всех страницах
   нового дизайна. Правила, привязанные к одному body-классу, вынесены в
   css/pages/nd-split-home.css, nd-split-catalog.css, nd-split-product.css и
   nd-split-hybrid.css — header.php подключает их только на своих страницах.
   Здесь остались общие правила и те, чей перенос менял бы победителя каскада.
   Удалён единственный доказанно мёртвый блок — .qpicks .qp-card (разметка
   includes/nd-home-shared/qpicks.php таких классов не выводит, в docroot их нет). */
/* =========================================================
   EncarRus — Korea catalog redesign
   ========================================================= */

:root {
  /* Light, clean neutral palette with red brand accent */
  --ink: #0E0E12;
  --ink-2: #1E1E24;
  --ink-3: #3D3D48;
  --ink-4: #5A5A66;
  /* 31.08.2026 (Ivan): «текст почти сливается с фоном, нужно добавить контраста».
     04.09.2026 — поправка: в тот раз серый ошибочно сделали СВЕТЛЕЕ (#74747E), а замер
     показывает обратное: #6E6E76 даёт 5.05 на белом и 4.72 на фоне страницы #F7F7F9,
     а #74747E — 4.62 и 4.32, то есть на фоне не дотягивает до порога WCAG AA (4.5).
     Единый серый интерфейса — #6E6E76, он же стоит в 238 местах после аудита 03.09. */
  --muted: #6E6E76;
  --muted-2: #9C9CA8;
  --line: #ECECF0;
  --line-2: #f0f0f3;
  --bg: #F7F7F9;
  --bg-2: #F0F0F3;
  --bg-card: #FFFFFF;
  --bg-elev: #FFFFFF;
  --ink-invert: #FFFFFF;

  --accent: #E11D2E;         /* brand red */
  --accent-2: #B8152B;
  --accent-soft: #f0f0f3;
  --accent-glow: rgba(225,29,46,.12);

  --success: #1E8C4A;
  --success-soft: #ececf0;
  --warn: #C07A00;
  --warn-soft: #FAEDD1;

  --radius: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --shadow-sm: 0 1px 2px rgba(14,14,16,.04);
  --shadow-md: 0 10px 28px rgba(14,14,16,.06);
  --shadow-lg: 0 24px 56px rgba(14,14,16,.10);
}

body[class*="new-design"] *, body[class*="new-design"] *::before, body[class*="new-design"] *::after { box-sizing: border-box; }
/* Не перетираем body-уровневые font-family/size/line-height — оставляем стили боевого сайта.
   Новые блоки (.topbar, .header, .hero, .search-bar, .filter-section) задают свои размеры локально. */
body[class*="new-design"] {
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body[class*="new-design"] button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
body[class*="new-design"] input, body[class*="new-design"] select, body[class*="new-design"] textarea { font-family: inherit; color: inherit; }
body[class*="new-design"] a { color: inherit; text-decoration: none; }
body[class*="new-design"] em { font-family: 'Montserrat', system-ui, sans-serif !important; font-style: normal !important; font-weight: inherit !important; letter-spacing: -.01em; }

body[class*="new-design"] .shell { max-width: 1520px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1280px) { body[class*="new-design"] .shell { padding: 0 32px; } }
@media (min-width: 1600px) { body[class*="new-design"] .shell { padding: 0 40px; } }

/* Блоки НЕ обёрнутые в .shell (bitrix-компоненты, SEO, формы, footer) —
   универсальное правило: ограничить 1520px и центрировать.
   Покрывает .catalog-section / .catalog-element--desc / .catalog-element--section
   и любые другие div'ы прямые потомки <main class="content">. */
body[class*="new-design"] .catalog-section,
body[class*="new-design"] .catalog-element--desc,
body[class*="new-design"] .catalog-element--section,
body[class*="new-design"] .catalog-element--section > .container,
body[class*="new-design"] .catalog-element--title,
body[class*="new-design"] .catalog-element--form,
body[class*="new-design"] .footer.new-ft .container,
body[class*="new-design"] .footer.kf-footer .container,
body[class*="new-design"] .seo-block,
body[class*="new-design"] .breadcrumb-inner,
body[class*="new-design"] section.box,
body[class*="new-design"] section.box > .container,
body[class*="new-design"] section[class*="box-"],
body[class*="new-design"] .advantages__wrap,
body[class*="new-design"] .box-slider,
body[class*="new-design"] .box-contacts,
body[class*="new-design"] .reviews,
body[class*="new-design"] .reviews .container,
body[class*="new-design"] .faq,
body[class*="new-design"] .faq .container {
  max-width: 1520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  width: auto !important;
  float: none !important;
}
/* .catalog-element--section имеет inner .container — у нее не нужен padding (есть на section) */
body[class*="new-design"] .catalog-element--section > .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}
@media (min-width: 1280px) {
  body[class*="new-design"] .catalog-section,
  body[class*="new-design"] .catalog-element--desc,
  body[class*="new-design"] .catalog-element--section,
  body[class*="new-design"] .catalog-element--title,
  body[class*="new-design"] .catalog-element--form,
  body[class*="new-design"] .footer.new-ft .container,
  body[class*="new-design"] .footer.kf-footer .container,
  body[class*="new-design"] .seo-block,
  body[class*="new-design"] .breadcrumb-inner,
  body[class*="new-design"] section.box,
  body[class*="new-design"] section[class*="box-"],
  body[class*="new-design"] .advantages__wrap,
  body[class*="new-design"] .box-slider,
  body[class*="new-design"] .box-contacts,
  body[class*="new-design"] .reviews,
  body[class*="new-design"] .faq { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (min-width: 1600px) {
  body[class*="new-design"] .catalog-section,
  body[class*="new-design"] .catalog-element--desc,
  body[class*="new-design"] .catalog-element--section,
  body[class*="new-design"] .catalog-element--title,
  body[class*="new-design"] .catalog-element--form,
  body[class*="new-design"] .footer.new-ft .container,
  body[class*="new-design"] .footer.kf-footer .container,
  body[class*="new-design"] .seo-block,
  body[class*="new-design"] .breadcrumb-inner,
  body[class*="new-design"] section.box,
  body[class*="new-design"] section[class*="box-"],
  body[class*="new-design"] .advantages__wrap,
  body[class*="new-design"] .box-slider,
  body[class*="new-design"] .box-contacts,
  body[class*="new-design"] .reviews,
  body[class*="new-design"] .faq { padding-left: 40px !important; padding-right: 40px !important; }
}

.sec-title, .sec-h2 { font-weight: 700; letter-spacing: -.02em; margin: 0; }
.sec-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}

/* ============ TOP BAR ============ */
.topbar {
  background: var(--ink);
  color: #CFCCC2;
  font-size: 12.5px; letter-spacing: .005em;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.topbar .shell { display: flex; align-items: center; justify-content: space-between; height: 40px; gap: 24px; }
.tb-left { display: flex; align-items: center; gap: 18px; }
.tb-city { display: inline-flex; align-items: center; gap: 6px; color: #E8E5D9; }
.tb-city strong { color: #FFF; font-weight: 700; border-bottom: 1px dashed rgba(255,255,255,.3); cursor: pointer; }
.tb-city svg { color: var(--accent); }
.tb-office { color: rgba(255,255,255,.45); }
.tb-socials {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 4px;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,.08);
}
.tb-soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  color: #A8A49A;
  transition: all .15s var(--ease);
}
.tb-soc:hover { color: #FFF; background: rgba(255,255,255,.08); }
.tb-soc.tbs-tg:hover { color: #26A5E4; }
.tb-soc.tbs-vk:hover { color: #0077FF; }
.tb-soc.tbs-yt:hover { color: #FF0000; }
.tb-soc.tbs-av:hover { color: #97CF26; }
.tb-soc.tbs-max:hover { color: #5D3FD3; }
.tb-soc.tbs-d2:hover { color: #EF4444; }
.tb-nav { display: flex; align-items: center; gap: 22px; }
.tb-nav a { color: #A8A49A; transition: color .15s var(--ease); }
.tb-nav a:hover { color: #FFF; }
.tb-rating .star { color: #F5A524; }
.tb-rating strong { color: #FFF; }
.tb-rating .muted { color: #A8A49A; }
.tb-nav a.hot { color: #FFF; position: relative; }
.tb-nav a.hot::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  background: var(--accent); border-radius: 999px; margin-right: 6px; vertical-align: 2px;
  box-shadow: 0 0 10px var(--accent);
}

.tb-ya-rating {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #FFF; font-size: 12px; font-weight: 600;
  white-space: nowrap;
  transition: all .15s var(--ease);
  margin-left: auto;
}
.tb-ya-rating:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #FFF; }
.tb-ya-rating strong { color: #FFF; font-weight: 800; }
.tb-ya-rating .tb-ya-star { color: #F5A524; font-size: 13px; line-height: 1; }
.tb-ya-rating .tb-ya-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px;
  background: #FC3F1D; color: #FFF;
}
.tb-ya-rating .tb-ya-lbl { color: rgba(255,255,255,.55); font-weight: 500; }

/* ============ HEADER ============ */
.header { background: #FFF; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.header .shell {
  height: 68px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}

.logo { display: inline-flex; align-items: center; flex: none; }
.logo-img { height: 34px; width: auto; display: block; }
.logo-e { color: var(--accent); font-weight: 400; }
.logo-word { color: var(--ink); }
.logo-rus {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 800; letter-spacing: .14em;
  color: #FFF; background: var(--ink);
  padding: 3px 6px 3px 7px; border-radius: 4px;
  margin-left: 7px; transform: translateY(-8px);
}

.main-nav { display: flex; align-items: center; gap: 0; min-width: 0; justify-content: flex-start; }
.main-nav a {
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 13.5px; font-weight: 500;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.main-nav a:hover { background: var(--bg); color: var(--ink); }
.main-nav a.active { background: var(--ink); color: #FFF; }
.main-nav a.active .flag { filter: none; }
.main-nav .flag { font-size: 14px; line-height: 1; display: inline-flex; align-items: center; vertical-align: middle; }
.main-nav .flag-img { width: 20px; height: 14px; }
.main-nav .flag-img img { display: block; width: 100%; height: 100%; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
/* 03.09.2026 (аудит 2.2): «Авто из Китая» обрывалось на «Авто из». На 1440 меню помещается,
   а на 1280-1366 строка переполняется, и последний пункт срезается без многоточия — там же
   режется «Контакты» в верхней строке. Поджимаем поля и межбуквенное расстояние, а флаги
   делаем чуть меньше: пункты помещаются целиком, кегль не трогаем. */
@media (min-width: 1000px) and (max-width: 1439px) {
  .main-nav a { padding-left: 9px; padding-right: 9px; letter-spacing: -.01em; }
  .main-nav .flag-img { width: 17px; height: 12px; }
  .topbar .shell { gap: 10px; }
  .topbar .tb-socials { gap: 7px; }
  /* «Контакты» упирались в правый край ровно на пару пикселей — поджимаем и правую группу. */
  .topbar .tb-nav { gap: 13px; }
  /* Значку избранного не хватало места, и он наезжал на иконку ВКонтакте. Немного убавляем
     кегль адреса (он тут длинный, целиком одной строкой) и разводим значок с соцсетями. */
  .topbar .tb-office { font-size: 12px; }
  .topbar .tb-fav { margin-left: 10px; }
}
@media (min-width: 1000px) and (max-width: 1279px) {
  .main-nav a { padding-left: 7px; padding-right: 7px; font-size: 13px; }
  .topbar .tb-fav { margin-left: 14px; }
}
/* Поджатия полей не хватило: строке недоставало ещё около 40 px. На средних ширинах
   убираем флажки у пунктов — названия важнее, и они наконец помещаются целиком. */
@media (min-width: 1000px) and (max-width: 1439px) {
  .main-nav .flag-img, .main-nav .flag { display: none; }
  .main-nav a { gap: 0; }
}
/* Соцсети в чёрном топбаре — оригинальные цветные SVG (как на боевом) */
.topbar .tb-socials { gap: 10px; }
.topbar .tb-socials .tb-soc { width: 28px; height: 28px; background: transparent !important; }
.topbar .tb-socials .tb-soc img { filter: none !important; opacity: 1 !important; display: block; width: 24px !important; height: 24px !important; transition: transform .15s ease; }
.topbar .tb-socials .tb-soc:hover img { transform: scale(1.08); }
/* Кнопка "Спросить AI" — гарантируем красный фон поверх боевых button-стилей */
body.new-design-catalog .search-bar .s-ai {
  background: #E11D2E !important;
  color: #FFF !important;
  border: 0 !important;
  padding: 13px 20px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

body.new-design-catalog .search-bar .s-ai svg { stroke: #FFF !important; }


body.new-design-catalog .hero .crumbs { padding-bottom: 0; margin-bottom: 16px; }
/* Hero/search/chips на /korea/ — оставляем стандартное ограничение .shell (1520px),
   синхронно с шапкой и каталогом карточек. Старое правило `max-width: none` снято. */
.mnav-nav .flag-img { width: 20px; height: 14px; display: inline-flex; align-items: center; vertical-align: middle; }
.mnav-nav .flag-img img { display: block; width: 100%; height: 100%; border-radius: 2px; }
.header .logo-img { height: 61px !important; width: 108px !important; }
.mnav-head .logo-img { height: 61px !important; width: 108px !important; }


/* Скрываем старые футеры (kf-footer и обычный) для всех страниц нового дизайна */
body[class*="new-design"] footer.footer:not(.new-ft) { display: none !important; }
/* На страницах нового дизайна: общий padding для main-контента под новой шапкой */
body[class*="new-design"] main.content { padding-top: 0; }


/* Search-dropdown стили: input + динамический список (Марка/Модель/Поколение/Комплектация и т.д.) */
.fpanel .field .ctrl-search { position: relative; }
.fpanel .field .ctrl-search input[type="text"] {
  width: 100%; padding: 10px 52px 10px 12px;
  background: #FFF; border: 1px solid var(--line, #e6e6df); border-radius: 10px;
  font-size: 13px; font-family: inherit; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fpanel .field .ctrl-search input[type="text"]:focus {
  outline: 0; border-color: var(--ink, #0e0e12);
  box-shadow: 0 0 0 3px rgba(14,14,16,.06);
}
.fpanel .field .ctrl-search .cs-chev {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; pointer-events: none; color: var(--muted, #6b6b62);
  transition: transform .15s ease;
}
.fpanel .field .ctrl-search.is-open .cs-chev { transform: translateY(-50%) rotate(180deg); }
.fpanel .field .ctrl-search .cs-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  max-height: 280px; overflow-y: auto;
  background: #FFF; border: 1px solid var(--line, #e6e6df); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  display: none; padding: 6px 0;
}
.fpanel .field .ctrl-search.is-open .cs-list { display: block; }
.fpanel .field .ctrl-search .cs-list-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; font-size: 13px; cursor: pointer;
  user-select: none; transition: background .12s ease;
}
.fpanel .field .ctrl-search .cs-list-item:hover { background: var(--bg, #f0f0f3); }
.fpanel .field .ctrl-search .cs-list-item.is-selected {
  background: rgba(14,14,16,.04); color: var(--ink, #0e0e12); font-weight: 600;
}
.fpanel .field .ctrl-search .cs-list-item.is-hidden { display: none; }
.fpanel .field .ctrl-search .cs-count {
  color: var(--muted, #6b6b62); font-size: 12px; font-weight: 400; margin-left: 8px;
}
.fpanel .field .ctrl-search .cs-empty {
  padding: 12px; text-align: center; color: var(--muted, #6b6b62); font-size: 13px;
}
.fpanel .field .ctrl-search .cs-clear {
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; cursor: pointer; opacity: .55;
  background: none; border: 0; padding: 0; color: var(--muted, #6b6b62);
  display: none;
}
.fpanel .field .ctrl-search .cs-clear:hover { opacity: 1; }
.fpanel .field .ctrl-search.has-value .cs-clear { display: block; }
/* Year-picker (Год выпуска от/до) — dropdown со списком годов, стиль как ctrl-search */
.fpanel .field .ctrl-year { position: relative; }
.fpanel .field .ctrl-year input[type="text"] {
  width: 100%; padding: 10px 28px 10px 12px;
  background: #FFF; border: 1px solid var(--line, #e6e6df); border-radius: 10px;
  font-size: 13px; font-family: inherit; color: var(--ink);
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.fpanel .field .ctrl-year input[type="text"]:focus {
  outline: 0; border-color: var(--ink, #0e0e12);
  box-shadow: 0 0 0 3px rgba(14,14,16,.06);
}
.fpanel .field .ctrl-year .cs-chev {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; pointer-events: none; color: var(--muted, #6b6b62);
  transition: transform .15s ease;
}
.fpanel .field .ctrl-year.is-open .cs-chev { transform: translateY(-50%) rotate(180deg); }
.fpanel .field .ctrl-year .cs-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  max-height: 280px; overflow-y: auto;
  background: #FFF; border: 1px solid var(--line, #e6e6df); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  display: none; padding: 6px 0;
}
.fpanel .field .ctrl-year.is-open .cs-list { display: block; }
.fpanel .field .ctrl-year .cs-list-item {
  padding: 8px 12px; font-size: 13px; cursor: pointer;
  user-select: none; transition: background .12s ease;
}
.fpanel .field .ctrl-year .cs-list-item:hover { background: var(--bg, #f0f0f3); }


body.new-design-catalog .fhead .sort select { padding: 8px 28px 8px 12px !important; background: #FFF !important; border: 1px solid var(--line, #e6e6df) !important; border-radius: 10px !important; font-size: 13px; cursor: pointer; }


.main-nav .nav-tag {
  font-size: 12px; font-weight: 800; letter-spacing: .08em;
  color: var(--accent); background: var(--accent-soft);
  padding: 2px 5px; border-radius: 4px;
}
.main-nav .nav-dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--success);
  box-shadow: 0 0 6px var(--success);
}

.header-right { display: flex; align-items: center; gap: 8px; }
.phone-wrap { position: relative; }
.phone {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; color: var(--ink);
  font-weight: 700; font-size: 14px; letter-spacing: -.005em;
  padding: 9px 10px 9px 12px; border-radius: 10px;
  background: transparent; border: 0; cursor: pointer;
  transition: background .15s var(--ease);
}
.phone svg { color: var(--accent); }
.phone:hover { background: var(--bg); }
.phone-wrap.open .phone { background: var(--bg); }
.ph-chev { color: var(--muted); margin-left: 1px; display: inline-flex; transition: transform .2s var(--ease); }
.phone-wrap.open .ph-chev { transform: rotate(180deg); }
.cta-head {
  padding: 12px 18px;
  background: var(--accent);
  color: #FFF !important;
  border-radius: 10px;
  font-weight: 700; font-size: 13.5px;
  box-shadow: 0 2px 0 var(--accent-2), 0 6px 18px rgba(225,29,46,.22);
  transition: transform .1s var(--ease), background .15s var(--ease);
}
.cta-head:hover { color: #FFF !important; background: var(--accent-2); transform: translateY(1px); box-shadow: 0 1px 0 var(--accent-2), 0 4px 14px rgba(225,29,46,.18); }

/* Header socials */
.hd-social { display: inline-flex; align-items: center; gap: 8px; }
.hd-soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--line); background: #FFF; color: var(--ink-3);
  transition: all .15s var(--ease);
}
.hd-soc svg { width: 18px; height: 18px; }
.hd-soc:hover { background: var(--bg); color: var(--ink); border-color: var(--ink-3); transform: translateY(-1px); }
.hd-soc-tg:hover { color: #26A5E4; border-color: #26A5E4; }
.hd-soc-vk:hover { color: #0077FF; border-color: #0077FF; }
.hd-soc-max .hd-soc-max-lbl {
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(135deg, #F7B500, #FF7A00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hd-soc-max:hover { border-color: #F7B500; }

/* ============ HERO ============ */
.hero { padding: 14px 0 10px; }
.crumbs { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); padding-bottom: 10px;
  /* 16.09.2026: цепочка из трёх и более пунктов (посадочные мотоциклов) на телефоне
     не помещалась в строку и тянула страницу вбок — разрешаем перенос. */
  flex-wrap: wrap; row-gap: 4px; }

.hero-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  flex-wrap: nowrap;
}
.hero-row .h1 {
  font-size: 30px; line-height: 1; letter-spacing: -.025em; font-weight: 700;
  margin: 0; color: var(--ink); white-space: nowrap;
}
.hero-row .h1 em {
  font-family: 'Montserrat', system-ui, sans-serif !important; font-weight: inherit !important; font-style: normal !important;
  color: var(--ink); letter-spacing: -.01em;
}
.hero-live {
  display: inline-flex; align-items: center; gap: 10px;
  background: #FFF; border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 16px; font-size: 12.5px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.hero-live .hl-num { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hero-live .hl-lbl { color: var(--muted); }
.hero-live .hl-div { width: 1px; height: 14px; background: var(--line); margin: 0 4px; }
.hero-live .hl-k { color: var(--muted); }
.hero-live .hl-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-live .delta.down { color: #1E8C4A; font-weight: 600; margin-left: 2px; }
.crumbs a { display: inline-flex; align-items: center; gap: 6px; transition: color .15s var(--ease); }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { opacity: .4; }
.crumbs .cur { color: var(--ink); font-weight: 600; }

.hero-grid { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: #FFF; border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 5px 12px 5px 8px; font-size: 12px; font-weight: 500; color: var(--ink-3);
  margin-bottom: 14px;
}
.flag-lg { font-size: 16px; line-height: 1; }

.h1 {
  font-size: 44px; line-height: 1.05; letter-spacing: -.03em; font-weight: 700;
  margin: 0 0 12px; color: var(--ink);
}
.h1 em {
  font-family: 'Montserrat', system-ui, sans-serif !important; font-weight: inherit !important; font-style: normal !important;
  letter-spacing: -.015em; color: var(--accent);
}
.lede { font-size: 14.5px; line-height: 1.5; color: var(--ink-3); max-width: 560px; margin: 0 0 16px; }
.lede strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.trust-strip {
  display: flex; align-items: stretch; gap: 0;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 2px;
}
.tr { display: flex; flex-direction: column; gap: 2px; padding-right: 20px; }
.tr-num {
  font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1; display: flex; align-items: baseline; gap: 3px;
  font-variant-numeric: tabular-nums;
}
.tr-star { color: #F5A524; font-size: 15px; }
.tr-unit { font-size: 12px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.tr-lbl { font-size: 12px; color: var(--muted); line-height: 1.3; }
.tr-div { width: 1px; background: var(--line); margin: 0 20px 0 0; }

/* Live card */
.live-card {
  background: var(--ink);
  color: #FFF;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-md);
}
.lc-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,.6);
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.live-dot { position: relative; width: 8px; height: 8px; }
.live-dot span { position: absolute; inset: 0; background: #4CE896; border-radius: 999px; }
.live-dot::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 999px; border: 2px solid #4CE896;
  animation: pulse 1.8s infinite var(--ease); opacity: 0;
}
@keyframes pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.lc-title { flex: 1; letter-spacing: .01em; }
.lc-time { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(255,255,255,.5); }

.lc-big { padding: 10px 0 8px; }
.lc-num {
  font-size: 36px; font-weight: 700; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lc-unit { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 4px; }

.lc-rows { border-top: 1px solid rgba(255,255,255,.08); padding-top: 8px; }
.lc-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 12px; }
.lc-k { color: rgba(255,255,255,.6); }
.lc-v { color: #FFF; font-weight: 600; font-variant-numeric: tabular-nums; }
.lc-v .up { color: #4CE896; }
.delta { font-size: 12px; font-weight: 500; padding: 1px 5px; border-radius: 4px; margin-left: 4px; }
.delta.down { color: #FF8A8A; background: rgba(255,138,138,.12); }

/* ============ SEARCH SECTION ============ */
.search-section { padding: 0 0 14px; }
.search-wrap { position: relative; }
.search-bar {
  display: flex; align-items: center; gap: 4px;
  background: #FFF;
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 6px 6px 6px 20px;
  box-shadow: 0 5px 0 var(--ink), 0 14px 28px rgba(14,14,16,.08);
  transition: transform .1s var(--ease);
}
.search-bar:focus-within { transform: translateY(-1px); }
.s-icon { color: var(--ink); flex: none; display: flex; }
.search-bar input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 15px; font-weight: 500; padding: 14px 14px;
  letter-spacing: -.005em;
}
.search-bar input::placeholder { color: var(--muted); font-weight: 400; }
.s-voice {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-4);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.s-voice:hover { background: var(--bg); color: var(--ink); }
.s-div { width: 1px; height: 28px; background: var(--line); margin: 0 6px; }
.s-ai {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 20px;
  background: var(--accent);
  color: #FFF;
  border-radius: 12px;
  font-size: 14px; font-weight: 700;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 0 var(--accent-2);
  transition: transform .1s var(--ease), background .15s var(--ease);
}
.s-ai:hover { background: var(--accent-2); transform: translateY(1px); box-shadow: 0 1px 0 var(--accent-2); }
.ai-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.3), transparent 50%);
  pointer-events: none;
}
.s-ai svg { filter: drop-shadow(0 0 4px rgba(255,255,255,.5)); }

.search-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px 0; gap: 16px; }
.s-sug { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.s-sug-label { color: var(--muted); font-weight: 500; margin-right: 4px; }
.s-sug button {
  padding: 6px 12px;
  background: #FFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 500; color: var(--ink-3);
  transition: all .15s var(--ease);
}
.s-sug button:hover { background: var(--ink); color: #FFF; border-color: var(--ink); }

/* ============ SEARCH DROPDOWN (AI-парсер /ajax/ai-parse.php) ============ */
/* Premium-minimal: воздушная тень без offset-stroke, тонкая 1px рамка,
   круглые badge-иконки, сетка с разделителем, серьёзная типографика. */
.search-dropdown {
  position: absolute; left: 0; right: 0; top: calc(100% + 12px);
  background: #FFFFFF;
  border: 1px solid rgba(14,14,16,.08);
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgba(14,14,16,.04),
    0 8px 18px rgba(14,14,16,.06),
    0 22px 44px rgba(14,14,16,.10);
  padding: 22px 24px 16px;
  z-index: 50;
  animation: ndsdIn .18s cubic-bezier(.2,.8,.2,1) both;
}
.search-dropdown[hidden] { display: none; }
@keyframes ndsdIn {
  from { opacity: 0; transform: translateY(-8px) scale(.99); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
.sd-state[hidden] { display: none; }

/* ── Section ── */
.sd-section { padding: 0; }
.sd-sec-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.sd-sec-t {
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--ink, #0E0E12);
  text-transform: none;
}
.sd-sec-s {
  font-size: 12px; color: var(--muted, #6E6E76); font-weight: 500;
  letter-spacing: .01em;
}
.sd-divider {
  height: 1px; background: rgba(14,14,16,.06);
  margin: 18px -24px;
}

/* ── Quick chips ── */
.sd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 7px;
  background: #FFFFFF;
  border: 1px solid rgba(14,14,16,.10);
  border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink, #0E0E12);
  text-decoration: none;
  letter-spacing: -.005em;
  transition:
    border-color .14s cubic-bezier(.2,.8,.2,1),
    background   .14s cubic-bezier(.2,.8,.2,1),
    transform    .12s cubic-bezier(.2,.8,.2,1),
    box-shadow   .14s cubic-bezier(.2,.8,.2,1);
}
.sd-chip:hover {
  border-color: var(--ink, #0E0E12);
  background: var(--ink, #0E0E12);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(14,14,16,.16);
}
.sdc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: #f7f7f9;
  color: var(--ink, #0E0E12);
  flex: none;
  transition: background .14s cubic-bezier(.2,.8,.2,1), color .14s cubic-bezier(.2,.8,.2,1);
}
.sd-chip:hover .sdc-icon { background: rgba(255,255,255,.16); color: #FFFFFF; }
.sdc-l { line-height: 1; }

/* ── Examples (карточки запросов со стрелкой) ── */
/* 07.08.2026 (Ivan): «вот тут стрелки тупо смотрятся, давай их перенесём влево и можно
   будет сделать по 3 ряда фраз поисковых». Стрелка стояла в конце строки
   (justify-content: space-between), а фразы разной длины — между текстом и стрелкой
   зияла пустота на пол-ячейки. Переносим стрелку ВПЕРЁД текста: она становится маркером
   строки, и пустоты нет независимо от длины фразы. Заодно три колонки вместо двух —
   фразы короткие, в 1/3 ширины помещаются целиком. */
.sd-examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (max-width: 1100px) { .sd-examples { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .sd-examples { grid-template-columns: 1fr; } }
.sd-ex {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  text-align: left;
  padding: 11px 14px;
  background: #FFFFFF;
  border: 1px solid rgba(14,14,16,.08);
  border-radius: 12px;
  font-family: inherit;
  cursor: pointer;
  transition:
    border-color .14s cubic-bezier(.2,.8,.2,1),
    background   .14s cubic-bezier(.2,.8,.2,1),
    transform    .12s cubic-bezier(.2,.8,.2,1);
}
.sd-ex:hover {
  border-color: var(--ink, #0E0E12);
  background: #f7f7f9;
  transform: translateY(-1px);
}
.sd-ex-q {
  font-size: 13.5px; color: var(--ink, #0E0E12); font-weight: 500;
  line-height: 1.4; letter-spacing: -.005em;
  flex: 1; min-width: 0;
  /* 24.07.2026: ss01/cv11 у Manrope включали болгарские формы кириллицы
     («д» как g, «т» как m) — Ivan: «шрифт явно не наш». Фичи убраны. */
  font-feature-settings: normal;
}
.sd-ex-arr {
  order: -1;   /* стрелка перед текстом — см. комментарий у .sd-examples */
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: #f7f7f9;
  color: var(--muted, #6E6E76);
  flex: none;
  transition:
    background .14s cubic-bezier(.2,.8,.2,1),
    color      .14s cubic-bezier(.2,.8,.2,1),
    transform  .14s cubic-bezier(.2,.8,.2,1);
}
.sd-ex:hover .sd-ex-arr {
  background: var(--accent, #B8152B); color: #FFFFFF;
  transform: translateX(2px);
}

/* ── Footer ── */
.sd-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 0 0; margin-top: 16px;
  border-top: 1px solid rgba(14,14,16,.06);
}
.sd-foot-l {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted, #6E6E76);
  font-weight: 500; line-height: 1.4;
}
.sd-foot-l svg { color: var(--muted, #6E6E76); flex: none; }
.sd-foot-r {
  font-size: 12px; font-weight: 600; color: var(--ink, #0E0E12);
  font-feature-settings: "tnum" on;
  white-space: nowrap;
}

/* ── Loading ── */
.sd-loading { display: flex !important; align-items: center; gap: 12px; padding: 14px 4px; }
.sd-loading[hidden] { display: none !important; }
.sd-loading-t { font-size: 14px; color: var(--ink-3, #3d3d48); font-weight: 500; }
.sd-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(14,14,16,.12);
  border-top-color: var(--accent, #B8152B);
  border-radius: 50%;
  animation: ndsdSpin .8s linear infinite;
  flex: none;
}
@keyframes ndsdSpin { to { transform: rotate(360deg); } }

/* ── Result ── */
.sd-result-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: #f7f7f9;
  border: 1px solid rgba(14,14,16,.08);
  border-radius: 14px;
  text-decoration: none;
  transition:
    background   .15s cubic-bezier(.2,.8,.2,1),
    border-color .15s cubic-bezier(.2,.8,.2,1),
    transform    .12s cubic-bezier(.2,.8,.2,1);
}
.sd-result-row:hover {
  background: var(--ink, #0E0E12);
  border-color: var(--ink, #0E0E12);
  transform: translateY(-1px);
}
.sd-result-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: #FFFFFF;
  border-radius: 999px;
  color: var(--accent, #B8152B);
  flex: none;
  border: 1px solid rgba(14,14,16,.08);
}
.sd-result-row:hover .sd-result-ico { background: var(--accent, #B8152B); color: #FFFFFF; border-color: var(--accent, #B8152B); }
.sd-result-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.sd-result-t { font-size: 14.5px; font-weight: 700; color: var(--ink, #0E0E12); letter-spacing: -.005em; }
.sd-result-s { font-size: 12px; color: var(--muted, #6E6E76); font-family: 'JetBrains Mono', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-result-row:hover .sd-result-t  { color: #FFFFFF; }
.sd-result-row:hover .sd-result-s  { color: rgba(255,255,255,.55); }
.sd-result-cnt {
  font-size: 12px; font-weight: 700;
  padding: 5px 10px;
  background: #FFFFFF; color: var(--ink, #0E0E12);
  border-radius: 999px;
  font-feature-settings: "tnum" on;
  flex: none;
  border: 1px solid rgba(14,14,16,.08);
}
.sd-result-row:hover .sd-result-cnt { background: var(--accent, #B8152B); color: #FFFFFF; border-color: var(--accent, #B8152B); }

/* ── Error ── */
.sd-error { padding: 14px 4px; }
.sd-err-msg { font-size: 13.5px; color: var(--ink-3, #3d3d48); line-height: 1.5; }

/* ── Mobile ── */
@media (max-width: 720px) {
  .search-dropdown { padding: 16px 16px 12px; border-radius: 16px; }
  .sd-divider { margin: 14px -16px; }
  .sd-sec-h { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 10px; }
  .sd-chip { padding: 6px 11px 6px 6px; font-size: 12.5px; }
  .sdc-icon { width: 22px; height: 22px; }
  .sdc-icon svg { width: 12px; height: 12px; }
  .sd-ex { padding: 10px 12px; }
  .sd-ex-q { font-size: 12.5px; }
  .sd-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ============ APPLIED FILTERS PILLS (под filter-bar) ============ */
.applied-filters {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px;
  margin: 14px 0 22px;
  background: #f7f7f9;
  border: 1px solid rgba(14,14,16,.06);
  border-radius: 14px;
}
.af-lbl {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted, #6E6E76);
  font-family: 'JetBrains Mono', monospace;
  flex: none;
}
.af-pills { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.af-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 14px;
  background: var(--ink, #0E0E12);
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  letter-spacing: -.005em;
  transition:
    background .14s cubic-bezier(.2,.8,.2,1),
    transform  .12s cubic-bezier(.2,.8,.2,1),
    box-shadow .14s cubic-bezier(.2,.8,.2,1);
}
.af-pill:hover {
  background: var(--accent, #B8152B);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(225,29,46,.22);
}
.af-pill-l { line-height: 1; }
.af-pill-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  background: rgba(255,255,255,.14);
  border-radius: 50%;
  color: rgba(255,255,255,.85);
  transition: background .14s cubic-bezier(.2,.8,.2,1), color .14s cubic-bezier(.2,.8,.2,1);
}
.af-pill:hover .af-pill-x { background: rgba(255,255,255,.24); color: #FFFFFF; }

.af-reset-all {
  font-size: 12.5px; font-weight: 600;
  color: var(--muted, #6E6E76);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  transition: color .14s cubic-bezier(.2,.8,.2,1);
  flex: none;
  white-space: nowrap;
}
.af-reset-all:hover { color: var(--accent, #B8152B); }

/* 16.09.2026 (Ivan: «сбросить всё убегает вниз, надо напротив текста „фильтры"»).
   Контейнер переносил свои части, поэтому при длинном ряде пилюль «Сбросить всё»
   уезжало под них. Теперь три части блока живут в одной строке, а переносятся
   только сами пилюли внутри .af-pills; подпись и сброс выравниваем по ПЕРВОЙ
   строке пилюль, а не по центру выросшего блока.
   !important обязателен: корейский вариант блока рендерится с инлайновым
   style="...flex-wrap:wrap;align-items:center..." (includes/nd-applied-filters.php),
   а инлайн бьёт любое правило без !important — правка выглядела бы «не доехавшей».
   [af-reset-all-stays] */
.applied-filters {
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
}
.applied-filters .af-lbl,
.applied-filters .af-reset-all {
  padding-top: 7px;            /* высота пилюли ~27px: центрируем текст по первой строке */
  align-self: flex-start;
}
.applied-filters .af-pills { align-self: flex-start; }
/* Китайский блок (.ndcn-applied) ставит своему сбросу align-self:center правилом
   с более высокой специфичностью — при многострочных пилюлях кнопка уезжала на
   середину блока. Перебиваем явно. [af-reset-stays-top] */
html body[class*="new-design"] .applied-filters .af-reset-all,
html body[class*="new-design"] .ndcn-applied .af-reset-all,
html body.nd-hybrid .applied-filters .af-reset-all {
  align-self: flex-start !important;
  padding-top: 7px;
}

@media (max-width: 720px) {
  .applied-filters { padding: 12px 12px; gap: 10px; border-radius: 12px; }
  .af-lbl { font-size: 12px; }
  .af-pill { font-size: 12px; padding: 6px 7px 6px 12px; }
}

/* ============ BODY TYPES ============ */
.bt-section { padding: 0 0 16px; }
.bt-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.sec-title { font-size: 15px; }
.bt-sub { font-size: 12px; color: var(--muted); }

.bt-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.bt-item {
  background: #FFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 8px 6px 8px;
  display: flex; flex-direction: row; align-items: center; gap: 7px;
  justify-content: flex-start;
  position: relative;
  transition: all .15s var(--ease);
  text-align: left;
}
.bt-item:hover { border-color: var(--ink-3); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.bt-item.active {
  background: var(--ink); color: #FFF; border-color: var(--ink);
}
.bt-ico { height: 20px; width: 40px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.bt-ico svg { width: 40px; height: 20px; }
.bt-item.active .bt-ico { color: #FFF; }
.bt-lbl { font-size: 12px; font-weight: 600; letter-spacing: -.005em; line-height: 1.1; }
.bt-cnt { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: auto; }
.bt-item.active .bt-cnt { color: rgba(255,255,255,.6); }
.bt-flash { position: absolute; top: 4px; right: 6px; font-size: 12px; }

/* ============ FILTERS ============ */
.filters-section { padding: 0 0 28px; }

.chips-row { margin-bottom: 14px; }
.chips-scroll {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none;
  margin: 0 -4px; padding: 2px 4px 6px;
  scroll-snap-type: x proximity;
}
.chips-scroll::-webkit-scrollbar { display: none; }
.chips-scroll > * { flex: none; scroll-snap-align: start; }
.chips-lbl, .brands-lbl {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding-right: 8px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: #FFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  transition: all .15s var(--ease);
  white-space: nowrap;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.active { background: var(--ink); color: #FFF; border-color: var(--ink); }
.chip .x { display: inline-flex; opacity: .6; }

/* Brands */
.brands-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.brands-track { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.brand-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 7px;
  background: #FFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600;
  transition: all .15s var(--ease);
}
.bc-mark {
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--ink); color: #FFF;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Instrument Serif', serif;
  font-size: 15px; font-weight: 400;
  flex: none;
}
.bc-n { color: var(--muted); font-weight: 500; font-size: 12px; font-variant-numeric: tabular-nums; }
.brand-chip:hover { border-color: var(--ink); }
.brand-chip.more { background: transparent; border-style: dashed; color: var(--muted); padding: 7px 14px; }
.brand-chip.more:hover { color: var(--ink); border-color: var(--ink); border-style: solid; }

/* Filter head row */
.fhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 4px 0;
}
.fhead-left { display: flex; align-items: center; gap: 12px; }
.fhead-right { display: flex; align-items: center; gap: 12px; }

.ftoggle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: var(--ink); color: #FFF;
  border-radius: 12px;
  font-size: 14px; font-weight: 700;
  box-shadow: 0 2px 0 #000;
  transition: transform .1s var(--ease);
}
.ftoggle:hover { transform: translateY(1px); box-shadow: 0 1px 0 #000; }
.ft-chev { transition: transform .3s var(--ease); }
.ftoggle.open .ft-chev { transform: rotate(180deg); }
.ft-badge {
  padding: 3px 8px; border-radius: 999px;
  background: var(--accent); color: #FFF;
  font-size: 12px; font-weight: 800;
  min-width: 20px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.freset {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 13px; font-weight: 500; color: var(--muted);
  transition: all .15s var(--ease);
}
.freset:hover { color: var(--ink); background: #FFF; }
.fcount { font-size: 13px; color: var(--muted); margin-left: 4px; }
.fcount strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.sort { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sort-lbl { color: var(--muted); }
.sort select {
  border: 1px solid var(--line);
  background: #FFF;
  padding: 10px 34px 10px 14px;
  border-radius: 10px;
  font-size: 13px; font-weight: 600;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B8B85' stroke-width='2.2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.sort select:hover { border-color: var(--ink); }

.viewtog { display: flex; background: #FFF; border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.vt { width: 36px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.vt.active { background: var(--ink); color: #FFF; }

/* Filter panel */
.fpanel-mhead { display: none; }
.fpanel-scroll { display: contents; }
.fpanel {
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height .4s var(--ease), opacity .25s var(--ease), margin .25s var(--ease);
  margin-top: 0;
}
/* 12.08.2026 (Ivan): контент панели с опциями вырос до ~2000px, а потолок был 1400 —
   «Комфорт/мультимедиа» и всё ниже обрезалось и налезало на карточки. */
.fpanel.open { max-height: 4200px; opacity: 1; margin-top: 16px; }
.fpanel-inner {
  background: #FFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
}
.fgrid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.ctrl {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-elev);
  transition: all .15s var(--ease);
}
.ctrl:hover { border-color: var(--ink-3); }
.ctrl:focus-within { border-color: var(--ink); background: #FFF; box-shadow: 0 0 0 3px rgba(14,14,16,.06); }
.field select, .field input {
  width: 100%;
  padding: 11px 34px 11px 13px;
  border: none; outline: none; background: transparent;
  font-size: 14px; font-weight: 600; color: var(--ink);
  border-radius: 10px;
  appearance: none;
}
.field input { padding-right: 13px; }
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233D3D43' stroke-width='2.2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.range { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.fchecks {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-top: 22px; margin-top: 22px;
  border-top: 1px solid var(--line);
}
.fgroup {
  padding-top: 22px; margin-top: 22px;
  border-top: 1px solid var(--line);
}
.fgroup-title {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.fgroup-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  cursor: pointer;
  transition: all .15s var(--ease);
  user-select: none;
}
.fchip input { display: none; }
.fchip:hover { border-color: var(--ink-3); color: var(--ink); }
.fchip:has(input:checked) {
  background: var(--ink); color: #FFF; border-color: var(--ink);
}
.fcheck {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  cursor: pointer;
  transition: all .15s var(--ease);
  user-select: none;
}
.fcheck:hover { border-color: var(--ink-3); color: var(--ink); }
.fcheck input { display: none; }
.fcheck .fbox {
  width: 16px; height: 16px; border: 1.5px solid var(--line-2); border-radius: 4px;
  background: #FFF;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s var(--ease);
}
.fcheck.on { background: var(--ink); color: #FFF; border-color: var(--ink); }
.fcheck:has(input:checked) { background: var(--ink); color: #FFF; border-color: var(--ink); }
.fcheck.on .fbox, .fcheck:has(input:checked) .fbox { background: #FFF; border-color: #FFF; }
.fcheck.on .fbox::after, .fcheck:has(input:checked) .fbox::after {
  content: ""; width: 8px; height: 5px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg) translate(1px, -1px);
}

.fpanel-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding-top: 22px; margin-top: 22px;
  border-top: 1px solid var(--line);
}
.freset-2 {
  padding: 14px 20px;
  background: transparent;
  color: var(--ink-3);
  font-size: 14px; font-weight: 600;
  border-radius: 10px;
  transition: all .15s var(--ease);
}
.freset-2:hover { background: var(--bg); color: var(--ink); }
.fshow {
  padding: 16px 28px;
  background: var(--accent);
  color: #FFF;
  border-radius: 12px;
  font-size: 15px; font-weight: 800;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 3px 0 var(--accent-2), 0 10px 24px rgba(225,29,46,.2);
  transition: transform .1s var(--ease);
}
.fshow:hover { transform: translateY(1px); box-shadow: 0 2px 0 var(--accent-2), 0 6px 18px rgba(225,29,46,.18); }
.fnum { font-variant-numeric: tabular-nums; }
.farrow { transition: transform .15s var(--ease); }
.fshow:hover .farrow { transform: translateX(4px); }

/* ============ STICKY FILTER FOOTER (3 кнопки) ============ */
/* Прилеплен к низу viewport'а пока открыта fpanel и пока fpanel виден на экране.
   Скрывается двумя путями:
   1. body.nd-filters-shown removed — панель закрыта.
   2. body.nd-filters-out-of-view — панель открыта, но юзер проскроллил мимо неё к выдаче.
   В обоих случаях footer уезжает вниз через transform. */
.ff-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid rgba(14,14,16,.06);
  box-shadow: 0 -12px 36px rgba(14,14,16,.06), 0 -1px 0 rgba(14,14,16,.03);
  padding: 14px 0;
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  /* Плавное появление — длинная мягкая ease cubic-bezier(.16, 1, .3, 1) */
  transition:
    transform .55s cubic-bezier(.16, 1, .3, 1),
    opacity   .45s cubic-bezier(.4, 0, .2, 1);
  will-change: transform, opacity;
}
body.nd-filters-shown .ff-bar {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
body.nd-filters-shown.nd-filters-out-of-view .ff-bar {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}
/* Прокладка под контент чтобы footer не накрывал последний ряд карточек */
body.nd-filters-shown { padding-bottom: 92px; }
body.nd-filters-shown.nd-filters-out-of-view { padding-bottom: 0; }

.ff-shell {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}
@media (min-width: 1280px) { .ff-shell { padding: 0 32px; } }
@media (min-width: 1600px) { .ff-shell { padding: 0 40px; } }

/* `!important` на всех критичных свойствах — `template_styles.css` минифицированный
   содержит глобальное `button { position:absolute; right:2rem; top:50%; translate:0 -50%;
   width:2rem; height:auto; padding:0; border:none; background:rgba(0,0,0,0); }`,
   которое ломает все наши <button>. Перебиваем гарантированно через !important. */
.ff-bar button.ff-btn,
.ff-bar .ff-btn {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  left: auto !important;
  translate: 0 !important;
  transform: none;
  width: auto !important;
  height: auto !important;
  font-family: inherit !important;
  cursor: pointer !important;
  letter-spacing: -.005em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 13px 22px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  transition:
    background   .18s cubic-bezier(.2,.8,.2,1),
    border-color .18s cubic-bezier(.2,.8,.2,1),
    color        .18s cubic-bezier(.2,.8,.2,1),
    transform    .14s cubic-bezier(.2,.8,.2,1),
    box-shadow   .18s cubic-bezier(.2,.8,.2,1) !important;
}

/* Применить фильтр — главная (белый фон, красная рамка, красный текст; hover — инверсия) */
.ff-bar button.ff-apply {
  background: #FFFFFF !important;
  color: var(--accent, #E11D2E) !important;
  border: 1.5px solid var(--accent, #B8152B) !important;
  font-weight: 700 !important;
  order: 3;
}
.ff-bar button.ff-apply:hover {
  background: var(--accent, #B8152B) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(225,29,46,.22);
}
.ff-bar button.ff-apply .ff-cnt {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 9px !important;
  background: rgba(225,29,46,.10) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--accent, #E11D2E) !important;
  font-feature-settings: "tnum" on !important;
  letter-spacing: 0 !important;
  transition: background .18s cubic-bezier(.2,.8,.2,1), color .18s cubic-bezier(.2,.8,.2,1);
}
.ff-bar button.ff-apply:hover .ff-cnt {
  background: rgba(255,255,255,.22) !important;
  color: #FFFFFF !important;
}

/* Сбросить все фильтры — серая рамка, красный текст */
.ff-bar button.ff-reset {
  background: #FFFFFF !important;
  color: var(--accent, #E11D2E) !important;
  border: 1.5px solid rgba(14,14,16,.14) !important;
  order: 2;
}
.ff-bar button.ff-reset:hover {
  border-color: var(--accent, #E11D2E) !important;
  background: #f7f7f9 !important;
}

/* Закрыть фильтр — серая рамка, красный текст */
.ff-bar button.ff-close {
  background: #FFFFFF !important;
  color: var(--accent, #E11D2E) !important;
  border: 1.5px solid rgba(14,14,16,.14) !important;
  order: 1;
  margin-left: auto !important; /* группа из 3 кнопок прижимается вправо */
}
.ff-bar button.ff-close:hover {
  border-color: var(--accent, #E11D2E) !important;
  background: #f7f7f9 !important;
}

@media (max-width: 720px) {
  .ff-bar { padding: 10px 0; }
  body.nd-filters-shown { padding-bottom: 80px; }
  .ff-shell { gap: 6px; padding: 0 12px; justify-content: stretch; }
  .ff-btn { padding: 11px 12px; font-size: 12.5px; flex: 1 1 auto; min-width: 0; }
  .ff-close { margin-left: 0; }
  .ff-apply .ff-cnt { display: none; }
}

/* ============ CATALOG GRID & CARDS ============ */
.catalog-section { padding: 12px 0 60px; }
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  background: #FFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .2s var(--ease), border-color .15s var(--ease), box-shadow .2s var(--ease);
  display: flex; flex-direction: column;
  position: relative;
}
.card:hover { transform: translateY(-3px); border-color: var(--ink-3); box-shadow: var(--shadow-lg); }
.c-img {
  aspect-ratio: 4/3;
  background: var(--bg-2);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.c-img-ph {
  width: 100%; height: 100%;
  background: repeating-linear-gradient(135deg, var(--bg-2) 0, var(--bg-2) 10px, var(--line-2) 10px, var(--line-2) 20px);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--muted-2); letter-spacing: .05em;
}
.c-labels { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.c-label {
  padding: 5px 9px;
  background: rgba(14,14,16,.88);
  color: #FFF;
  backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.c-label.green { background: var(--success); }
.c-label.red { background: var(--accent); }
.c-label.gold { background: #C07A00; color: #FFF; }

.c-fav {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  transition: all .15s var(--ease);
}
.c-fav:hover { background: #FFF; color: var(--accent); }

.c-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; }
.c-dot { width: 5px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.5); }
.c-dot.on { background: #FFF; width: 16px; border-radius: 3px; }

.c-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.c-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.c-name { font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.c-year { font-size: 13px; color: var(--muted); font-weight: 500; margin-top: 2px; font-variant-numeric: tabular-nums; }
.c-badge { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 3px 7px; border-radius: 4px; flex: none; }

.c-props { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; font-size: 12.5px; }
.c-prop { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; border-bottom: 1px dashed var(--line); padding-bottom: 4px; }
.c-prop-k { color: var(--muted); }
.c-prop-v { font-weight: 600; font-variant-numeric: tabular-nums; }

.c-price-box {
  background: var(--bg);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 2px;
}
.c-price-lbl { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.c-price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.c-price {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.c-price-won { font-size: 12px; color: var(--muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }

.c-cta { display: flex; gap: 6px; margin-top: auto; }
.c-btn-sec {
  flex: 1;
  padding: 11px 14px;
  background: var(--bg);
  color: var(--ink);
  border-radius: 10px;
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s var(--ease);
}
.c-btn-sec:hover { background: var(--bg-2); }
.c-btn-pri {
  flex: 1.2;
  padding: 11px 14px;
  background: var(--ink);
  color: #FFF;
  border-radius: 10px;
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s var(--ease);
}
.c-btn-pri:hover { background: var(--accent); }

/* Pagination */
.pager {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 36px 0 0;
}
.pg {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px;
  background: #FFF;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  transition: all .15s var(--ease);
}
.pg:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.pg:disabled { opacity: .4; cursor: not-allowed; }
.pg-pages { display: flex; gap: 4px; align-items: center; }
.pg-n {
  min-width: 40px; height: 40px;
  padding: 0 12px;
  background: transparent;
  border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  transition: all .15s var(--ease);
}
.pg-n:hover { background: #FFF; color: var(--ink); }
.pg-n.active { background: var(--ink); color: #FFF; }
.pg-dots { color: var(--muted); padding: 0 4px; }
.pg-meta { margin-left: auto; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ============ HELPER (подбор) ============ */
.helper-section { padding: 20px 0 64px; }
.helper-card {
  background: var(--ink);
  color: #FFF;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.helper-card::before {
  content: ""; position: absolute; top: -120px; right: -120px;
  width: 360px; height: 360px; border-radius: 999px;
  background: radial-gradient(circle, rgba(225,29,46,.35), transparent 70%);
  pointer-events: none;
}
.hc-left { padding: 44px 48px; position: relative; z-index: 1; }
.hc-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.hc-title { font-size: 44px; line-height: 1.05; letter-spacing: -.025em; font-weight: 700; margin: 0 0 16px; }
.hc-title em { color: var(--accent); }
.hc-lede { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.7); max-width: 520px; margin: 0 0 28px; }

.hc-form {}
.hc-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr auto; gap: 10px; }
.hc-field { display: flex; flex-direction: column; gap: 6px; }
.hc-field label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.hc-ctrl {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  transition: all .15s var(--ease);
}
.hc-ctrl:focus-within { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); }
.hc-ctrl input, .hc-ctrl select {
  width: 100%; background: transparent; border: none; outline: none;
  padding: 13px 14px;
  font-size: 14px; font-weight: 600; color: #FFF;
  appearance: none;
}
.hc-ctrl select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF80' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}
.hc-ctrl input::placeholder { color: rgba(255,255,255,.35); }
.hc-submit {
  padding: 14px 22px;
  background: var(--accent);
  color: #FFF;
  border-radius: 10px;
  font-size: 14px; font-weight: 800;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 2px 0 var(--accent-2);
  white-space: nowrap;
  transition: transform .1s var(--ease);
  height: 44px;
}
.hc-submit:hover { transform: translateY(1px); box-shadow: 0 1px 0 var(--accent-2); }
.hc-field-btn { display: flex; align-items: flex-end; }
.hc-agree { margin-top: 14px; font-size: 12px; color: rgba(255,255,255,.4); }
.hc-agree a { color: rgba(255,255,255,.65); border-bottom: 1px solid rgba(255,255,255,.15); }

.hc-right {
  background: linear-gradient(145deg, #1e1e24, #0e0e12);
  padding: 44px 36px;
  display: flex; flex-direction: column; gap: 24px;
  border-left: 1px solid rgba(255,255,255,.06);
  position: relative; z-index: 1;
}
.hc-manager {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.hc-avatar {
  width: 48px; height: 48px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #FFF;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
  box-shadow: 0 4px 12px rgba(225,29,46,.3);
}
.hc-man-name { font-size: 15px; font-weight: 700; }
.hc-man-role { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 2px; }
.hc-online {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #4CE896;
  padding: 4px 8px; background: rgba(76,232,150,.1); border-radius: 999px;
}
.hc-online span { width: 6px; height: 6px; border-radius: 999px; background: #4CE896; box-shadow: 0 0 6px #4CE896; }

.hc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hc-stat {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 14px 16px;
}
.hc-stat-num { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hc-stat-lbl { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 4px; line-height: 1.3; }

.hc-messengers { margin-top: auto; }
.hc-mes-lbl { font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 10px; }
.hc-mes-row { display: flex; gap: 8px; }
.hc-mes {
  flex: 1;
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  font-size: 13px; font-weight: 700;
  text-align: center;
  transition: all .15s var(--ease);
}
.hc-mes:hover { background: rgba(255,255,255,.12); }
.mes-tg:hover { color: #41BCE7; border-color: rgba(65,188,231,.3); }
.mes-wa:hover { color: #25D366; border-color: rgba(37,211,102,.3); }
.mes-max:hover { color: #5A46FF; border-color: rgba(90,70,255,.3); }

/* ============ HOW IT WORKS ============ */
.how-section { padding: 24px 0 64px; }
.how-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 32px; }
.sec-h2 { font-size: 44px; letter-spacing: -.025em; }
.sec-h2 em { color: var(--accent); }
.how-meta { text-align: right; }
.hm { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.hm-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

.steps {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  position: relative;
}
.step {
  background: #FFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px 22px 22px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  transition: all .2s var(--ease);
}
.step:hover { transform: translateY(-3px); border-color: var(--ink-3); box-shadow: var(--shadow-md); }
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 44px; right: -12px; width: 8px; height: 8px;
  border-top: 1.5px solid var(--line); border-right: 1.5px solid var(--line);
  transform: rotate(45deg);
  z-index: 2;
}
.st-num {
  font-family: 'Instrument Serif', serif;
  font-size: 44px; font-weight: 400; line-height: 1; color: var(--accent);
  font-feature-settings: "lnum";
}
.st-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.st-text { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; flex: 1; }
.st-time {
  display: inline-flex; align-self: flex-start;
  font-size: 12px; font-weight: 700;
  padding: 4px 10px;
  background: var(--bg);
  border-radius: 999px;
  color: var(--ink-3);
  letter-spacing: .02em;
}

/* ============ FAQ ============ */
.faq-section { padding: 24px 0 80px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; }
.faq-left .sec-h2 { font-size: 40px; }
.faq-lede { font-size: 14.5px; color: var(--ink-3); margin: 18px 0 24px; line-height: 1.55; }
.faq-all {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  background: var(--ink); color: #FFF;
  border-radius: 10px;
  font-size: 13px; font-weight: 700;
  transition: background .15s var(--ease);
}
.faq-all:hover { background: var(--accent); }

.faq-right { display: flex; flex-direction: column; gap: 10px; }
.faq {
  background: #FFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .15s var(--ease);
}
.faq[open] { border-color: var(--ink-3); }
.faq summary {
  padding: 18px 22px;
  font-size: 15.5px; font-weight: 700; letter-spacing: -.005em;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq-plus {
  width: 22px; height: 22px; flex: none;
  position: relative;
}
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; background: var(--ink); border-radius: 1px;
  transition: transform .25s var(--ease);
}
.faq-plus::before { top: 10px; left: 2px; right: 2px; height: 2px; }
.faq-plus::after { top: 2px; bottom: 2px; left: 10px; width: 2px; }
.faq[open] .faq-plus::after { transform: scaleY(0); }
.faq-body {
  padding: 0 22px 22px;
  font-size: 14px; color: var(--ink-3); line-height: 1.6;
}

/* ============ FOOTER ============ */
.footer {
  background: var(--ink);
  color: #CFCCC2;
  padding: 64px 0 24px;
  margin-top: 40px;
}
.ft-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.logo-ft { margin-bottom: 16px; }
.logo-ft .logo-img { height: 32px; filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(325deg); }

.ft-desc { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.55); max-width: 320px; margin: 0 0 22px; }
.ft-contacts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.ft-phone { font-size: 22px; font-weight: 800; color: #FFF; letter-spacing: -.01em; }
.ft-addr, .ft-hours { font-size: 13px; color: rgba(255,255,255,.55); }
.ft-messengers { display: flex; gap: 8px; }
.ft-mes {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #FFF;
  letter-spacing: .04em;
  transition: background .15s var(--ease);
}
.ft-mes:hover { background: var(--accent); }

.ft-col { display: flex; flex-direction: column; gap: 10px; }
.ft-h {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 8px;
}
.ft-col a { font-size: 13.5px; color: rgba(255,255,255,.8); transition: color .15s var(--ease); }
.ft-col a:hover { color: var(--accent); }

/* 06.09.2026: копирайт и ссылки в нижней полосе подвала были слишком бледными на тёмном фоне
   (контраст 3.81 при норме 4.5) — тот же оттенок, что у остальных подписей подвала. */
.ft-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding-top: 24px;
  font-size: 12px; color: #9A9AA4;
}
.ft-bar-left { display: flex; gap: 10px; align-items: center; }
.ft-sep { opacity: .4; }
.ft-bar-right { display: flex; gap: 20px; }
.ft-bar-right a { color: rgba(255,255,255,.6); transition: color .15s var(--ease); }
.ft-bar-right a:hover { color: #FFF; }

/* ============ FAB ============ */
.fab {
  position: fixed; right: 28px; bottom: 28px;
  width: 60px; height: 60px;
  background: var(--accent); color: #FFF;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 32px rgba(225,29,46,.4);
  z-index: 100;
  transition: transform .2s var(--ease);
}
.fab:hover { transform: scale(1.08); }
.fab-dot {
  position: absolute; top: 10px; right: 10px;
  width: 12px; height: 12px; border-radius: 999px;
  background: #4CE896; border: 2px solid var(--accent);
  animation: pulse2 2s infinite var(--ease);
}
@keyframes pulse2 {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1280px) {
  .shell { padding: 0 24px; }
  .fgrid { grid-template-columns: repeat(4, 1fr); }
  .bt-row { grid-template-columns: repeat(8, 1fr); }
}

@media (max-width: 1080px) {
  .main-nav a span:not(.flag):not(.nav-tag):not(.nav-dot) { }
  .main-nav .nav-tag { display: none; }
  .phone .ph-chev, .phone .ph-num-lbl { display: none; }
}

/* ======== MOBILE ≤ 860px ======== */
@media (max-width: 860px) {
  html, body { font-size: 14px; }
  .shell { padding: 0 16px; }

  /* Top utility bar — collapse */
  .topbar .shell { height: 36px; gap: 12px; font-size: 12px; }
  .tb-left { gap: 10px; }
  .tb-city .tb-addr, .tb-nav { display: none; }
  .tb-socials { display: none; }
  .tb-office { display: none; }
  .tb-ya-rating { padding: 4px 8px; font-size: 12px; gap: 5px; margin-left: auto; }
  .tb-ya-rating .tb-ya-lbl { display: none; }
  .tb-ya-rating .tb-ya-logo { width: 14px; height: 14px; }
  .tb-right .tb-rating-num-count { display: none; }
  .tb-right a:not(.tb-rating) { display: none; }

  /* Header — logo + phone icon + menu */
  .header .shell {
    height: 60px;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
  }
  .logo-img { height: 26px; }
  .main-nav { display: none; }
  .cta-head { display: none; }
  .header .shell { justify-content: space-between; }
  .header-right { margin-left: auto; gap: 6px; justify-content: flex-end; }
  /* порядок справа налево: бургер, телефон, MAX, ВК, TG */
  .header-right .hd-social { order: 1; display: inline-flex; gap: 6px; }
  .header-right .hd-social .hd-soc-tg  { order: 1; }
  .header-right .hd-social .hd-soc-vk  { order: 2; }
  .header-right .hd-social .hd-soc-max { order: 3; }
  .header-right .phone-wrap { order: 2; }
  .header-right .burger     { order: 3; }
  .hd-soc { width: 40px; height: 40px; border-radius: 10px; }
  .hd-soc svg { width: 18px; height: 18px; }
  .phone {
    width: 40px; height: 40px; padding: 0; font-size: 0;
    justify-content: center;
    border: 1px solid var(--line); border-radius: 10px;
  }
  .phone svg { width: 18px; height: 18px; }
  .phone span, .phone .ph-chev { display: none; }
  .burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px;
    border: 1px solid var(--line); background: #FFF; color: var(--ink);
  }
  .burger svg { width: 18px; height: 18px; }

  /* Mobile drawer */
  .mnav-drawer {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(14,14,16,.5);
    opacity: 0; pointer-events: none; transition: opacity .2s var(--ease);
    overflow: hidden;
  }
  .mnav-drawer.open { opacity: 1; pointer-events: auto; }
  .mnav-sheet {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 86%; max-width: 360px; background: #FFF;
    transform: translateX(100%); transition: transform .25s var(--ease);
    display: flex; flex-direction: column;
    overflow-y: auto;
  }
  .mnav-drawer.open .mnav-sheet { transform: translateX(0); }
  /* 18.08.2026 (Ivan): «отступы меньше в самом верху и добавь кнопку Подбор» */
  .mnav-head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--line);
  }
  .mnav-head .logo-img { height: 26px; }
  .mnav-head .logo { margin-right: auto; line-height: 0; }
  .mnav-head-cta {
    display: inline-flex; align-items: center; flex: none;
    height: 34px; padding: 0 14px; border-radius: 11px;
    background: var(--accent, #E11D2E); color: #FFF !important;
    font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
  }
  .mnav-close { flex: none; }
  .mnav-close {
    width: 36px; height: 36px; border-radius: 10px;
    border: 1px solid var(--line); background: #FFF;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .mnav-nav { padding: 8px 10px; }
  .mnav-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 12px; border-radius: 10px;
    font-size: 15px; font-weight: 600; color: var(--ink);
  }
  .mnav-nav a .flag { font-size: 18px; }
  .mnav-nav a.active { background: var(--bg); }
  .mnav-nav .mnav-sep { height: 1px; background: var(--line); margin: 8px 12px; }
  .mnav-nav .mnav-grp {
    font-size: 12px; font-weight: 800; letter-spacing: .12em;
    color: var(--muted); text-transform: uppercase;
    padding: 14px 12px 6px;
  }
  .mnav-foot { padding: 18px; border-top: 1px solid var(--line); margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
  .mnav-foot .cta-head { display: flex; justify-content: center; }
  .mnav-socials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
  .mnav-soc {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 8px; border-radius: 10px;
    border: 1px solid var(--line); background: #FFF;
    font-size: 13px; font-weight: 600; color: var(--ink);
  }
  .mnav-soc:hover { background: var(--bg); }
  .mnav-soc-max {
    font-size: 12px; font-weight: 800; letter-spacing: .04em;
    background: linear-gradient(135deg, #F7B500, #FF7A00);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  /* Hero */
  .hero { padding: 12px 0 16px; }
  .crumbs { font-size: 12px; gap: 6px; padding-bottom: 8px; flex-wrap: wrap; }
  .hero-row {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: nowrap;
  }
  .hero-row .h1 {
    font-size: 19px; letter-spacing: -.02em; line-height: 1.15;
    white-space: normal; flex: 1 1 auto; min-width: 0;
  }
  .hero-live {
    width: auto; flex: 0 0 auto; justify-content: flex-start;
    font-size: 12px; padding: 5px 9px;
    flex-wrap: nowrap; gap: 5px;
    align-self: flex-start;
  }
  .hero-live .hl-div,
  .hero-live .hl-k,
  .hero-live .hl-v { display: none; }

  /* Search bar */
  .search-section { padding: 0 0 14px; }
  .search-bar {
    padding: 4px 4px 4px 14px; border-radius: 14px;
    box-shadow: 0 3px 0 var(--ink), 0 8px 18px rgba(14,14,16,.08);
  }
  .search-bar input { font-size: 14px; padding: 10px 8px; }
  .search-bar input::placeholder { font-size: 13px; }
  .s-icon svg { width: 18px; height: 18px; }
  .s-voice { width: 36px; height: 36px; }
  .s-voice svg { width: 16px; height: 16px; }
  .s-div { display: none; }
  .s-ai {
    padding: 8px 12px; font-size: 12px; border-radius: 10px;
  }
  .s-ai span:not(.ai-glow) {
    font-size: 0;
  }
  .s-ai svg { width: 14px; height: 14px; }
  .search-foot { padding-top: 10px; }
  .s-sug {
    display: flex; gap: 6px; overflow-x: auto;
    flex-wrap: nowrap; white-space: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .s-sug::-webkit-scrollbar { display: none; }
  .s-sug-label { display: none; }
  .s-sug button { font-size: 12px; padding: 6px 12px; flex: none; }

  /* Body types — horizontal scroll */
  .bt-section { padding: 0 0 12px; }
  .bt-head { flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
  .sec-title { font-size: 13px; }
  .bt-sub { font-size: 12px; }
  .bt-row {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto; gap: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -16px; padding: 0 16px 4px;
  }
  .bt-row::-webkit-scrollbar { display: none; }
  .bt-item {
    flex: 0 0 96px;
    padding: 8px 6px;
    scroll-snap-align: start;
  }
  .bt-ico { height: 22px; }
  .bt-ico svg { width: 48px; height: 22px; }
  .bt-lbl { font-size: 12px; }
  .bt-cnt { font-size: 12px; }

  /* Filters section */
  .filters-section { padding: 0 0 16px; }

  /* Quick chips — horizontal scroll */
  .chips-row { margin-bottom: 20px; }
  .chips-scroll {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    gap: 6px; margin: 0 -16px; padding: 0 16px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .chips-scroll::-webkit-scrollbar { display: none; }
  .chips-lbl { display: none; }
  .chip { padding: 8px 12px; font-size: 12.5px; flex: none; }

  /* Brands — horizontal scroll */
  .brands-row { flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 12px; }
  .brands-lbl { padding-right: 0; }
  .brands-track {
    flex-wrap: nowrap; overflow-x: auto;
    margin: 0 -16px; padding: 0 16px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .brands-track::-webkit-scrollbar { display: none; }
  .brand-chip { flex: none; padding: 6px 10px 6px 6px; font-size: 12.5px; }
  .bc-mark { width: 22px; height: 22px; font-size: 12px; }
  .bc-n { font-size: 12px; }

  /* Filter head row */
  .fhead { flex-direction: column; align-items: stretch; gap: 10px; }
  .fhead-left { flex-wrap: wrap; gap: 8px; }
  .ftoggle { font-size: 13px; padding: 10px 14px; flex: 1; justify-content: center; }
  .freset { font-size: 12px; padding: 8px 12px; }
  .fcount { font-size: 12px; width: 100%; text-align: center; padding-top: 4px; }
  .fhead-right { justify-content: space-between; }
  .sort { flex: 1; }
  .sort-lbl { display: none; }
  .sort select { width: 100%; font-size: 13px; }

  /* Filter panel — full-screen drawer on mobile */
  .fpanel {
    position: fixed; inset: 0; z-index: 120;
    max-height: none; opacity: 0; margin: 0 !important;
    background: #FFF;
    transform: translateY(100%);
    transition: transform .28s var(--ease), opacity .2s var(--ease);
    pointer-events: none;
    overflow: hidden; /* inner scrolls */
    display: flex; flex-direction: column;
  }
  .fpanel.open {
    opacity: 1; transform: translateY(0);
    pointer-events: auto;
    max-height: none;
  }
  body.fpanel-open { overflow: hidden; }
  .fpanel-inner {
    flex: 1 1 auto; min-height: 0;
    padding: 0;
    border: 0; border-radius: 0;
    box-shadow: none; background: #FFF;
    display: flex; flex-direction: column;
  }
  .fpanel-mhead {
    display: flex !important; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
  }
  .fpanel-mhead .fm-close, .fpanel-mhead .fm-reset {
    background: none; border: 0; padding: 4px; font-size: 14px; color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .fpanel-mhead .fm-reset { color: var(--muted); font-size: 13px; }
  .fpanel-mhead .fm-title { font-size: 15px; font-weight: 600; }
  .fpanel-scroll {
    display: block;
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    /* 07.09.2026 (аудит, п. 21): закреплённая внизу плашка «Применить фильтр»
       (.ff-bar, fixed, высота 67px, z-index 130) лежит поверх панели. На низком
       экране (375x667) она накрывала последнюю пару полей «от / до» на 48px и
       перехватывала по ним нажатие. Даём содержимому панели нижний воздух под
       высоту плашки, чтобы до последних полей можно было домотать. */
    padding: 16px 16px 83px;
    -webkit-overflow-scrolling: touch;
  }
  .fgrid { grid-template-columns: 1fr; gap: 14px; }
  .field label { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); }
  .ctrl { border-radius: 10px; background: #FFF; }
  .ctrl input, .ctrl select { font-size: 14px; padding: 12px 14px; }
  .range { grid-template-columns: 1fr 1fr; gap: 6px; }
  .fchecks { padding-top: 16px; margin-top: 16px; gap: 10px; flex-direction: column; }
  .fgroup { padding-top: 16px; margin-top: 16px; }
  .fgroup-title { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); margin-bottom: 10px; }
  .fgroup-chips { gap: 6px; }
  .fchip { font-size: 12.5px; }
  .fpanel-foot {
    position: sticky; bottom: 0; background: #FFF;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    margin: 0; flex: 0 0 auto;
    display: flex; gap: 10px;
  }
  .fpanel-foot .freset-2 { display: none; }
  .fpanel-foot .fshow {
    flex: 1; width: 100%; justify-content: center;
    border-radius: 999px; padding: 16px; font-size: 15px;
  }
  .fpanel .fp-bottom {
    flex-direction: column; align-items: stretch; gap: 10px;
  }
  .fpanel .fp-apply { width: 100%; justify-content: center; }

  /* Catalog grid — 1 column */
  .catalog-section { padding: 8px 0 40px; }
  .grid { grid-template-columns: 1fr; gap: 14px; }
  .c-head { padding: 12px 12px 8px; }
  .c-title { font-size: 16px; }
  .c-sub { font-size: 12px; }
  .c-specs { padding: 0 12px 10px; gap: 6px; }
  .c-spec { font-size: 12px; }
  .c-price { padding: 12px; }
  .c-price-main { font-size: 20px; }
  .c-ctas { grid-template-columns: 1fr; gap: 6px; padding: 0 12px 12px; }

  /* Pagination */
  .pager { padding: 20px 0 0; justify-content: center; gap: 6px; }
  .pager button, .pager a { padding: 8px 10px; font-size: 13px; min-width: 36px; }

  /* Helper block */
  .helper-section { padding: 12px 0 40px; }
  .helper-card { grid-template-columns: 1fr; border-radius: 16px; }
  .hc-left { padding: 28px 20px; }
  .hc-title { font-size: 26px; }
  .hc-lede { font-size: 14px; margin-bottom: 18px; }
  .hc-grid { grid-template-columns: 1fr; gap: 8px; }
  .hc-field-btn { margin-top: 4px; }
  .hc-submit { height: 48px; width: 100%; }
  .hc-right { padding: 24px 20px; border-top: 1px solid rgba(255,255,255,.08); }
  .hc-manager { grid-template-columns: auto 1fr; }
  .hc-online { grid-column: 2; }
  .hc-stats { margin-top: 16px; }

  /* How it works */
  .how-section { padding: 32px 0 40px; }
  .how-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
  .how-head h2, .sec-h2 { font-size: 26px !important; }
  .how-meta { text-align: left; }
  .hm { font-size: 20px; }
  .hm-sub { font-size: 12.5px; }
  .steps { grid-template-columns: 1fr; gap: 10px; }
  .step { padding: 18px 18px 16px; gap: 8px; }
  .step:not(:last-child)::after { display: none; }
  .st-num { font-size: 36px; }
  .st-title { font-size: 16px; }
  .st-text { font-size: 13px; }

  /* FAQ */
  .faq-section { padding: 20px 0 40px; }
  .faq-head { flex-direction: column; align-items: flex-start; }
  .faq-lede { font-size: 13px; }
  .faq-list details summary { font-size: 14px; padding: 16px 14px; }
  .faq-list details[open] > div { font-size: 13px; padding: 0 14px 16px; }

  /* Footer */
  .footer-main { grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px 0; }
  .footer-col.footer-brand { grid-column: 1 / -1; }
  .footer-sub { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 0; font-size: 12px; }

  /* Sticky mobile CTA */
  .m-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(150%) blur(10px);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(14,14,16,.06);
  }
  .m-sticky .m-search {
    flex: 1; display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px; background: var(--bg); border-radius: 10px;
    font-size: 13px; color: var(--ink-3); font-weight: 500;
  }
  .m-sticky .m-search svg { color: var(--ink-3); }
  .m-sticky .m-cta {
    padding: 10px 16px; background: var(--accent); color: #FFF;
    border-radius: 10px; font-weight: 700; font-size: 13px;
    display: inline-flex; align-items: center; gap: 6px;
  }

  body.has-m-sticky { padding-bottom: 0; }
}

/* ======== HIDE mobile-only elements on desktop ======== */
.burger, .mnav-drawer, .m-sticky { display: none; }
@media (max-width: 860px) {
  .burger { display: inline-flex; }
  .mnav-drawer { display: block; }
  .m-sticky { display: none; }
}

/* ======== XS ≤ 400px ======== */
@media (max-width: 400px) {
  .hero-row .h1 { font-size: 18px; }
  .bt-item { flex: 0 0 88px; }
  .fgrid { grid-template-columns: 1fr; }
  .c-ctas { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; }
  .header-right .hd-social .hd-soc-vk { display: none; }
  .hd-soc { width: 34px; height: 34px; }
  .header-right { gap: 4px; }
}

/* =====================================================
   POPOVERS (city / reviews / phone)
   ===================================================== */
.tb-city-wrap, .tb-rating-wrap, .phone-wrap { position: relative; }

.tb-city {
  background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  color: #E8E5D9; font: inherit;
}
.tb-city strong { color: #FFF; font-weight: 700; border-bottom: 1px dashed rgba(255,255,255,.3); }
.tb-city .tb-chev { color: rgba(255,255,255,.4); margin-left: 1px; transition: transform .18s var(--ease); }
.tb-city-wrap.open .tb-chev,
.tb-rating-wrap.open .tb-chev,
.phone-wrap.open .ph-chev { transform: rotate(180deg); }

.tb-rating {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 5px;
  color: #A8A49A;
}
.tb-rating .tb-chev { color: rgba(255,255,255,.4); margin-left: 2px; transition: transform .18s var(--ease); }

/* Generic popover surface */
.city-pop, .rv-pop, .ph-pop {
  position: absolute; z-index: 60;
  background: #FFF; color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow:
    0 2px 4px rgba(14,14,16,.04),
    0 12px 32px rgba(14,14,16,.14),
    0 24px 64px -12px rgba(14,14,16,.18);
  padding: 14px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s;
  text-align: left;
  font-size: 13px; font-weight: 500; color: var(--ink);
}
.tb-city-wrap.open .city-pop,
.tb-rating-wrap.open .rv-pop,
.phone-wrap.open .ph-pop,
.tb-city-wrap:hover .city-pop,
.tb-rating-wrap:hover .rv-pop,
.phone-wrap:hover .ph-pop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}

/* Hover bridge so the gap to the popover doesn't close it */
.tb-city-wrap::after,
.tb-rating-wrap::after,
.phone-wrap::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 100%; height: 12px;
  pointer-events: none;
}
.tb-city-wrap:hover::after,
.tb-rating-wrap:hover::after,
.phone-wrap:hover::after { pointer-events: auto; }

/* === City popover === */
.city-pop {
  top: calc(100% + 10px); left: -12px;
  width: 540px; padding: 22px;
}
.city-pop .cp-grid.cp-offices { grid-template-columns: 1fr 1fr; gap: 10px; }
.city-pop .cp-grid.cp-cities { grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* Скрытие секций на время поиска. Без этого правила не обойтись: у .cp-grid стоит
   display: grid, и он перебивает атрибут hidden — списки продолжали висеть под результатами. */
.city-pop [hidden] { display: none !important; }
/* 03.09.2026: результаты поиска по городу в окне верхней панели. Раскладка та же, что у
   списка популярных городов, плюс аккуратная строка на случай, когда ничего не нашлось. */
.city-pop .cp-grid.cp-found { grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 320px; overflow-y: auto; }
.city-pop .cp-found .cp-empty {
  grid-column: 1 / -1;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  /* Кнопки городов рядом стоят в одну строку, и правило nowrap доставалось этой подсказке —
     длинная фраза уезжала за край окна. */
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--muted, #6E6E76);
  background: #f0f0f3;
  border-radius: 10px;
}
@media (max-width: 640px) {
  .city-pop .cp-grid.cp-found { grid-template-columns: repeat(2, 1fr); max-height: 260px; }
}
.city-pop .cp-city.sm { white-space: nowrap; padding: 9px 14px; font-size: 12.5px; min-width: 0; }
.cp-head {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  margin-bottom: 12px;
}
.cp-search {
  position: relative; margin-bottom: 14px;
}
.cp-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted);
}
.cp-search input {
  width: 100%; padding: 10px 12px 10px 34px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg);
  font: inherit; font-size: 13px;
  outline: none;
}
.cp-search input:focus { border-color: var(--ink-3); background: #FFF; }
.cp-section {
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 8px;
}
.cp-section:first-of-type { margin-top: 0; }
.cp-grid { display: grid; gap: 4px; }
.cp-grid.cp-offices { grid-template-columns: 1fr 1fr; gap: 6px; }
.cp-grid.cp-cities { grid-template-columns: repeat(4, 1fr); gap: 4px; }
.cp-city {
  background: var(--bg) !important; border: 1px solid transparent;
  padding: 12px 18px !important; border-radius: 8px;
  font: inherit; font-size: 13px; color: var(--ink);
  cursor: pointer; text-align: left !important;
  display: flex !important; flex-direction: column !important; gap: 4px !important;
  transition: all .12s var(--ease);
  width: 100%;
}
.cp-city .cp-name { padding-left: 0 !important; display: block; }
.cp-city .cp-meta { padding-left: 0 !important; display: block; }
.cp-city:hover { background: #FFF !important; border-color: var(--line); }
.cp-city.active { background: var(--ink) !important; color: #FFF !important; }
.cp-city.active .cp-name { color: #FFF !important; }
.cp-city.active .cp-meta { color: rgba(255,255,255,.65) !important; }
.cp-city .cp-meta { font-size: 12px; color: var(--muted); font-weight: 500; }
.cp-city.sm {
  padding: 7px 10px; font-size: 12.5px; font-weight: 500;
  flex-direction: row;
}

/* === Reviews popover === */
.rv-pop {
  top: calc(100% + 10px); right: -8px;
  width: 340px; padding: 14px;
}
.rv-head {
  padding: 2px 4px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.rv-head-title { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.rv-head-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.rv-row {
  display: grid; grid-template-columns: 36px 1fr auto;
  align-items: center; gap: 10px;
  padding: 10px 8px; border-radius: 10px;
  color: var(--ink);
  transition: background .12s var(--ease);
}
.rv-row:hover { background: var(--bg); color: var(--ink) !important; }
.rv-row:hover .rv-name, .rv-row:hover .rv-info, .rv-row:hover .rv-cnt strong { color: var(--ink) !important; }
.rv-logo {
  width: 36px; height: 36px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #FFF;
}
/* 07.08.2026: в плашках настоящие логотипы площадок (/include/logos/, те же файлы,
   что на /reviews/) вместобелого кружка-заглушки.
   Ivan: «у всех сделай подложку как ВК и Google» — одна нейтральная светло-серая плашка
   на все площадки. Так и ровнее в столбик, и не спорит с фирменными цветами самих значков
   (у Яндекса/2ГИС/Авито цвет уже внутри логотипа, ставить его ещё и фоном — цвет на цвете). */
.rv-logo { background: #f0f0f3; }
.rv-logo img { width: 22px; height: 22px; display: block; object-fit: contain; }
.rv-info .rv-name { font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; }
.rv-info .rv-cnt { font-size: 12px; color: var(--muted); margin-top: 2px; font-weight: 500; }
.rv-info .rv-cnt strong { color: var(--ink); font-weight: 700; }
.rv-stars { color: #F5A524; letter-spacing: 0; font-size: 12px; margin-right: 4px; }
.rv-go { color: var(--muted); }
.rv-row:hover .rv-go { color: var(--accent); }
.rv-foot {
  margin-top: 4px; padding-top: 10px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.rv-foot a { font-size: 12.5px; font-weight: 600; color: var(--accent) !important; }
.rv-foot a:hover { color: var(--accent-2) !important; }

/* === Phone popover === */
.ph-pop {
  top: calc(100% + 10px); right: 0;
  width: 300px; padding: 14px;
}
.ph-pop-head {
  padding: 2px 4px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.ph-pop-num {
  font-size: 18px; font-weight: 800; letter-spacing: -.01em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.ph-pop-hrs { font-size: 12px; color: var(--muted); margin-top: 3px; }
.ph-act {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; margin-top: 4px;
  border-radius: 10px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink); background: var(--bg);
  transition: all .12s var(--ease);
}
.ph-act:first-of-type { margin-top: 0; }
.ph-act:hover { background: var(--ink); color: #FFF; }
.ph-act:hover svg { color: #FFF !important; }
.ph-act-primary {
  background: var(--accent); color: #FFF !important;
}
.ph-act-primary svg { color: #FFF !important; }
.ph-act-primary:hover { background: var(--accent-2); color: #FFF !important; }
.ph-act-ghost {
  background: transparent; border: 1px solid var(--line);
}
.ph-pop-sep {
  height: 1px; background: var(--line);
  margin: 10px -2px;
}

/* On desktop: fix nav overflow so phone doesn't overlap nav at mid widths */
@media (min-width: 861px) and (max-width: 1180px) {
  .main-nav { gap: 14px; }
  .main-nav a { font-size: 13.5px; }
  .phone .ph-num { display: none; }
  .phone .ph-chev { display: none; }
  .phone { padding: 10px; }
}

/* ============================================================================
   07.09.2026 (аудит, п. 22). В полосе 861-1180px правило выше прячет сам номер:
   в шапке оставалась одна иконка-трубка 36x36 — позвонить с планшета или из
   неполноэкранного окна было нечем, а телефон на этих страницах — главный канал.
   С 1024px возвращаем номер: замер показал, что места хватает — верхнее меню
   само сворачивает лишние пункты в «Ещё» (js/nd-navmore.js), шапка не переносится
   и страница вбок не едет (проверено на 1024, 1100, 1180px).
   Ниже 1024px номер по-прежнему скрыт, но иконке даём нормальную цель нажатия
   44x44 вместо 36x36 (канон: любая кнопка не меньше 44px).
   ============================================================================ */
@media (min-width: 1024px) and (max-width: 1180px) {
  .phone .ph-num { display: block; }
  .phone { padding: 9px 12px; }
}
@media (min-width: 861px) and (max-width: 1023px) {
  .phone { min-width: 44px; min-height: 44px; padding: 14px; }
}

/* Hide popovers on mobile (drawer handles nav) */
@media (max-width: 860px) {
  .city-pop, .rv-pop, .ph-pop { display: none !important; }
}


/* =========================================================
   NEW: bt-head, loadmore, adv, viewed, seo, contacts, footer-v2
   ========================================================= */

/* ------- Body types head ------- */
.bt-head { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin: 28px 0 16px; }
.bt-head .sec-title { font-size: 24px; }
.bt-sub { color: var(--muted); font-size: 14px; }

/* ------- Load more ------- */
.loadmore { margin: 36px 0 8px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.lm-progress { width: 100%; max-width: 520px; display:flex; flex-direction:column; gap:8px; align-items:center; }
.lm-progress-bar { width: 100%; height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.lm-progress-bar > span { display:block; height:100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; transition: width .5s var(--ease); }
.lm-meta { font-size: 13px; color: var(--muted); }
.lm-meta strong { color: var(--ink); font-weight: 700; }
.lm-btn { display:inline-flex; align-items:center; gap:10px; padding: 16px 32px; background: var(--ink); color: #fff; border-radius: 999px; font-weight: 600; font-size: 15px; transition: transform .2s var(--ease), background .2s; position:relative; }
.lm-btn:hover { background: var(--accent); transform: translateY(-2px); }
.lm-btn[disabled] { opacity: .4; cursor: not-allowed; }
.lm-btn.loading .lm-label, .lm-btn.loading .lm-arrow { opacity: 0; }
.lm-btn.loading .lm-spinner { opacity: 1; }
.lm-spinner { position:absolute; left:50%; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; opacity:0; animation: lm-spin .7s linear infinite; }
@keyframes lm-spin { to { transform: rotate(360deg); } }
.lm-pages { display:flex; align-items:center; gap:6px; font-size:13px; color: var(--muted); flex-wrap: wrap; justify-content: center; }
.lm-pages .pg-n { min-width: 28px; height:28px; padding: 0 8px; border-radius: 7px; border:1px solid var(--line); background:#fff; font-size:13px; font-weight:600; color: var(--ink-3); }
.lm-pages .pg-n.active { background: var(--ink); color:#fff; border-color: var(--ink); }
.lm-pages .pg-n:hover:not(.active) { border-color: var(--ink-4); }
.lm-pages .pg-dots { padding: 0 2px; }

/* Card enter animation */
.card-enter { animation: card-in .35s var(--ease) both; }
@keyframes card-in { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }

/* ------- Преимущества Кореи ------- */
.adv-section { padding: 80px 0 40px; }
.adv-head { max-width: 760px; margin-bottom: 40px; }
.adv-head .sec-h2 { font-size: 44px; line-height: 1.05; margin: 8px 0 14px; }
.adv-lede { color: var(--ink-4); font-size: 16px; line-height: 1.55; margin: 0; }
.adv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.adv { background: #fff; padding: 22px 22px 24px; display:flex; flex-direction:column; gap:8px; transition: background .2s; }
.adv:hover { background: var(--bg); }
.adv-n { font-family: 'Instrument Serif', serif; font-size: 26px; color: var(--accent); line-height: 1; }
.adv-t { font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; color: var(--ink); }
.adv-d { color: var(--ink-4); font-size: 13.5px; line-height: 1.5; }
.adv.adv-w { grid-column: span 1; }
@media (max-width: 1100px) { .adv-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .adv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .adv-grid { grid-template-columns: 1fr; } }

/* ------- Просмотренные ранее ------- */
.viewed-section { padding: 56px 0 40px; background: var(--bg-2); }
.viewed-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom: 24px; }
.viewed-head .sec-h2 { font-size: 32px; }
.viewed-ctrls { display:flex; align-items:center; gap:8px; }
.vc-btn { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fff; display:inline-flex; align-items:center; justify-content:center; transition: all .2s; }
.vc-btn:hover { border-color: var(--ink); }
.vc-clear { margin-left: 8px; padding: 8px 14px; border-radius: 999px; border:1px solid var(--line); background:#fff; font-size:13px; color: var(--muted); }
.vc-clear:hover { color: var(--accent); border-color: var(--accent); }
/* 07.09.2026 (аудит, п. 8): лента «Просмотренные ранее» вылетала за сетку на фиксированные
   40px, а боковые поля .shell меняются по ширине экрана (16 / 24 / 32 / 40px). На всех
   ширинах ниже 1600px лента торчала за край на 8-24px и тянула страницу вбок (замер
   1024x1366: документ 1025px при окне 1024px). Повторяем поля .shell один в один:
   24px везде, 32px с 1280px, 40px с 1600px. */
.viewed-scroll { overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; margin: 0 -24px; padding: 0 24px; }
@media (min-width: 1280px) { .viewed-scroll { margin: 0 -32px; padding: 0 32px; } }
@media (min-width: 1600px) { .viewed-scroll { margin: 0 -40px; padding: 0 40px; } }
.viewed-scroll::-webkit-scrollbar { display: none; }
.viewed-track { display:flex; gap:16px; padding-bottom: 4px; }
.vcard { flex: 0 0 260px; background: #fff; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); transition: transform .2s var(--ease), box-shadow .2s; display:flex; flex-direction: column; }
.vcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.vc-img { position: relative; aspect-ratio: 4/3; background: linear-gradient(135deg, #ececf0, #DCDCE2); display:flex; align-items:center; justify-content:center; }
.vc-img-ph { font-size: 12px; color: var(--muted-2); font-weight: 500; padding: 0 12px; text-align:center; }
.vc-lbl { position:absolute; top:10px; left:10px; padding: 4px 10px; border-radius: 999px; background: var(--ink); color:#fff; font-size: 12px; font-weight: 600; }
.vc-lbl.red { background: var(--accent); }
.vc-lbl.gold { background: var(--warn); }
.vc-lbl.green { background: var(--success); }
.vc-ago { position:absolute; bottom:10px; right:10px; padding: 4px 8px; border-radius: 6px; background: rgba(14,14,18,.7); color:#fff; font-size: 12px; font-weight: 500; backdrop-filter: blur(4px); }
.vc-body { padding: 14px 16px 16px; display:flex; flex-direction:column; gap:4px; }
.vc-name { font-weight: 700; font-size: 15px; letter-spacing:-.01em; }
.vc-name span { color: var(--muted); font-weight: 500; }
.vc-trim { color: var(--ink-4); font-size: 13px; }
.vc-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.vc-price { margin-top: 6px; font-weight: 700; font-size: 16px; color: var(--ink); }
.vc-empty { color: var(--muted); font-size: 14px; padding: 32px; text-align: center; width: 100%; }

/* ------- SEO-блок ------- */
.seo-section { padding: 60px 0 72px; background: #fff; border-top: 1px solid var(--line); }
.seo-wrap { max-width: 960px; margin: 0 auto; position: relative; }
.seo-h1 { font-size: 26px; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 20px; color: var(--ink); font-weight: 700; }
.seo-body { position: relative; max-height: 220px; overflow: hidden; transition: max-height .5s var(--ease); }
.seo-wrap.open .seo-body { max-height: 3000px; }
.seo-body::after { content:''; position:absolute; left:0; right:0; bottom:0; height: 120px; background: linear-gradient(180deg, transparent, #fff); pointer-events: none; transition: opacity .3s; }
.seo-wrap.open .seo-body::after { opacity: 0; }
.seo-body p { margin: 0 0 14px; color: var(--ink-3); font-size: 14.5px; line-height: 1.65; }
.seo-body h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 22px 0 10px; color: var(--ink); }
.seo-toggle { display:inline-flex; align-items:center; gap:6px; margin-top: 16px; padding: 10px 18px; border-radius: 999px; border:1px solid var(--line); background:#fff; font-size:13px; font-weight:600; color: var(--ink); transition: all .2s; }
.seo-toggle:hover { background: var(--ink); color:#fff; border-color: var(--ink); }

/* ------- Контакты ------- */
.contacts-section { padding: 64px 0 72px; background: var(--bg); }
.contacts-head { max-width: 760px; margin-bottom: 32px; }
.contacts-head .sec-h2 { font-size: 36px; }
.contacts-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; }
.ct-offices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-office { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; transition: all .2s; }
.ct-office:hover { border-color: var(--ink); box-shadow: var(--shadow-md); }
.ct-city { font-weight: 700; font-size: 16px; letter-spacing: -.01em; margin-bottom: 8px; }
.ct-addr { color: var(--ink-3); font-size: 13.5px; line-height: 1.4; }
.ct-meta { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.ct-phone { margin-top: 14px; font-weight: 700; font-size: 17px; color: var(--ink); }
.ct-sh { margin-top: 8px; font-size: 12px; color: var(--success); font-weight: 600; }
.ct-right { display:flex; flex-direction:column; gap:14px; }
.ct-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); padding: 22px; }
.ct-card-h { font-weight: 700; font-size: 15px; letter-spacing:-.01em; margin-bottom: 14px; }
.ct-mes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ct-mes { display:flex; flex-direction:column; gap:2px; padding: 12px 14px; border:1px solid var(--line); border-radius: 10px; transition: all .15s; }
.ct-mes b { font-size: 13px; font-weight: 700; }
.ct-mes span { font-size: 12px; color: var(--muted); }
.ct-mes:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: var(--shadow-sm); }
.ct-mes.tg:hover { border-color:#2AABEE; } .ct-mes.tg:hover b { color:#2AABEE; }
.ct-mes.wa:hover { border-color:#25D366; } .ct-mes.wa:hover b { color:#25D366; }
.ct-mes.max:hover { border-color:#00A8E8; } .ct-mes.max:hover b { color:#00A8E8; }
.ct-mes.vk:hover { border-color:#0077FF; } .ct-mes.vk:hover b { color:#0077FF; }
.ct-mes.yt:hover { border-color:#FF0000; } .ct-mes.yt:hover b { color:#FF0000; }
.ct-mes.av:hover { border-color:#97CF26; } .ct-mes.av:hover b { color:#97CF26; }
.ct-mes.dr:hover { border-color:#E04040; } .ct-mes.dr:hover b { color:#E04040; }
.ct-mes.dz:hover { border-color:#000; }
.ct-form { background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); padding: 22px; display:flex; flex-direction:column; gap:10px; }
.ct-form input, .ct-form textarea { width:100%; padding: 12px 14px; border:1px solid var(--line); border-radius: 10px; font-size: 14px; outline: none; transition: border-color .15s; background:#fff; }
.ct-form input:focus, .ct-form textarea:focus { border-color: var(--ink); }
.ct-form textarea { resize: vertical; }
.ct-submit { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 13px 16px; background: var(--accent); color:#fff; border-radius: 10px; font-weight: 700; font-size: 14px; margin-top: 4px; transition: background .2s; }
.ct-submit:hover { background: var(--accent-2); }
.ct-agree { font-size: 12px; color: var(--muted); line-height: 1.4; }
.ct-agree a { color: var(--ink-3); text-decoration: underline; }
@media (max-width: 1024px) { .contacts-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ct-offices, .ct-mes-grid { grid-template-columns: 1fr; } }

/* ------- FOOTER (combat) ------- */
.footer { background: #0e0e12; color: #B5B5BF; margin-top: 0; }
.ft-cta { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #fff; padding: 22px 0; }
.ft-cta-in { display:flex; align-items:center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ft-cta-h { font-size: 20px; font-weight: 700; letter-spacing:-.01em; }
.ft-cta-s { font-size: 13px; opacity: .9; margin-top: 2px; }
.ft-cta-right { display:flex; align-items:center; gap: 14px; }
.ft-cta-phone { font-size: 22px; font-weight: 800; letter-spacing:-.01em; color:#fff; }
.ft-cta-btn { display:inline-flex; align-items:center; gap:8px; padding: 12px 22px; background:#fff; color: var(--accent); border-radius: 999px; font-weight: 700; font-size: 14px; transition: transform .2s; }
.ft-cta-btn:hover { transform: translateY(-2px); }

.ft-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding: 52px 0 32px; }
.ft-brand .logo-ft { display:inline-block; margin-bottom: 16px; }
.ft-brand .logo-img { height: 28px; filter: brightness(0) invert(1); }
.ft-desc { color: #9595A0; font-size: 13.5px; line-height: 1.55; margin: 0 0 18px; max-width: 380px; }
.ft-trust { display:flex; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.ft-trust-item { display:flex; align-items:center; gap:8px; background: #1e1e24; border:1px solid #1e1e24; border-radius: 10px; padding: 8px 12px; }
.ft-trust-item b { font-size: 17px; font-weight: 800; color: #FFD24A; letter-spacing:-.01em; }
/* 06.09.2026: та же причина, что у .ft-tr span — тёмный подвал */
.ft-trust-item span { font-size: 12px; color: #9A9AA4; line-height: 1.2; }
.ft-messengers { display:flex; gap: 8px; }
.ft-mes { width: 38px; height: 38px; border-radius: 10px; background: #1e1e24; border:1px solid #1e1e24; display:inline-flex; align-items:center; justify-content:center; font-size: 12px; font-weight:700; color:#B5B5BF; transition: all .2s; }
.ft-mes:hover { background: var(--accent); border-color: var(--accent); color:#fff; }

.ft-col { display:flex; flex-direction: column; gap: 10px; }
.ft-h { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 6px; }
.ft-col a { color: #9595A0; font-size: 13.5px; transition: color .15s; display:inline-flex; align-items:baseline; gap:8px; }
.ft-col a:hover { color: #fff; }
.ft-col a i { font-style: normal; font-size: 12px; color: #555560; font-weight: 600; }

.ft-seo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 32px 0; border-top: 1px solid #1e1e24; border-bottom: 1px solid #1e1e24; }
.ft-seo-h { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.ft-seo-links { display:flex; flex-wrap: wrap; gap: 6px 10px; }
.ft-seo-links a { font-size: 12.5px; color: #6E6E76; line-height: 1.4; transition: color .12s; }
.ft-seo-links a:hover { color: #fff; }

.ft-trustrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 22px 0; border-bottom: 1px solid #1e1e24; }
.ft-tr { display:flex; align-items:center; gap: 12px; color: #9595A0; }
.ft-tr svg { color: var(--accent); flex-shrink: 0; }
.ft-tr b { display:block; color: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
/* 06.09.2026: подписи блока доверия в подвале были #6E6E76 на тёмном — контраст 3.81 */
.ft-tr span { font-size: 12px; color: #9A9AA4; }

.ft-paybar { display:flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid #1e1e24; flex-wrap: wrap; }
.ft-pay-left, .ft-pay-right { display:flex; align-items:center; gap: 10px; flex-wrap: wrap; }
.ft-pay-lbl { color: #6E6E76; font-size: 12px; margin-right: 4px; }
.ft-pay, .ft-app { padding: 5px 12px; border-radius: 7px; background: #1e1e24; border:1px solid #1e1e24; font-size: 12px; color: #B5B5BF; font-weight: 600; }
.ft-app:hover { background: #fff; color: #000; border-color:#fff; }

.ft-bar { display:flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 0; flex-wrap: wrap; }
.ft-bar-left { color: #9A9AA4; font-size: 12px; display:flex; gap:8px; flex-wrap: wrap; align-items: center; }
.ft-bar-right { display:flex; gap: 16px; flex-wrap: wrap; }
.ft-bar-right a { color: #9A9AA4; font-size: 12px; transition: color .15s; }
.ft-bar-right a:hover { color: #fff; }
.ft-sep { color: #3d3d48; }

/* 06.09.2026: дисклеймер в подвале был #55555E на тёмном — контраст 2.61, светлее до 4.9 */
.ft-disc { padding: 16px 0 28px; font-size: 12px; color: #9A9AA4; line-height: 1.55; border-top: 1px solid #1e1e24; }

@media (max-width: 1100px) {
  .ft-top { grid-template-columns: 1fr 1fr 1fr; }
  .ft-brand { grid-column: 1 / -1; }
  .ft-seo { grid-template-columns: 1fr 1fr; }
  .ft-trustrow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ft-top { grid-template-columns: 1fr 1fr; }
  .ft-seo { grid-template-columns: 1fr; }
  .ft-trustrow { grid-template-columns: 1fr; }
  .ft-cta-in { flex-direction: column; align-items:flex-start; }
  .adv-head .sec-h2 { font-size: 32px; }
  .viewed-head .sec-h2 { font-size: 26px; }
}


/* ------- Body-type chips (brand-chip variant) ------- */
.bt-row-v2 { margin-bottom: 12px; }
.bt-chip {
  padding: 6px 14px 6px 6px;
}
.bt-mark {
  width: 40px; height: 26px; border-radius: 14px;
  background: var(--bg-2); color: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  transition: all .15s var(--ease);
}
.bt-chip:hover .bt-mark { background: var(--ink); color: #fff; }
.bt-chip.active {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.bt-chip.active .bt-mark { background: rgba(255,255,255,.14); color: #fff; }
.bt-chip.active .bc-n { color: rgba(255,255,255,.55); }
.bt-chip-ev .bt-mark { background: var(--accent-soft); color: var(--accent); }
.bt-chip-ev:hover .bt-mark { background: var(--accent); color: #fff; }
.bt-chip-ev.active { background: var(--accent); border-color: var(--accent); }
.bt-chip-ev.active .bt-mark { background: rgba(255,255,255,.18); color: #fff; }

@media (max-width: 900px) {
  .bt-chip { flex: none; padding: 5px 12px 5px 5px; font-size: 12.5px; }
  .bt-mark { width: 34px; height: 22px; border-radius: 11px; }
  .bt-mark svg { width: 28px; height: 13px; }
}


/* ============ AI BUTTON (clearer) ============ */
.c-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 3; }
.c-ai {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px 0 8px;
  background: #FFF;
  color: var(--ink);
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 4px 10px rgba(14,14,16,.14);
  transition: all .15s var(--ease);
  border: 1px solid rgba(14,14,16,.06);
}
.c-ai svg { color: var(--accent); }
.c-ai:hover { background: var(--ink); color: #FFF; border-color: var(--ink); transform: translateY(-1px); }
.c-ai:hover svg { color: #FFB5BD; }
.c-fav {
  position: static;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: #FFF;
  border: 1px solid rgba(14,14,16,.06);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 4px 10px rgba(14,14,16,.14);
  color: var(--ink-3);
}
.c-fav.on { color: var(--accent); background: #f7f7f9; }
.c-fav.on svg { fill: currentColor; }

/* ============ HOVER PHOTO ZONES ============ */
.c-img { cursor: pointer; }
.c-img .c-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.c-img .c-photo.on { opacity: 1; }
.c-img .c-photo.p-0 { opacity: 1; } /* first visible by default, overridden by .on when hover */
/* 05.09.2026 (A8a): первый слайд карточки — <img class="c-photo-img"> вместо фона
   (alt, width/height, loading=lazy). Растягиваем на весь слайд с object-fit:cover —
   картинка кадрируется ровно так же, как раньше background-size:cover / center. */
.c-img .c-photo .c-photo-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center;
  display: block; margin: 0; border: 0; border-radius: 0;
}
.c-img:hover .c-photo.p-0:not(.on) { opacity: 0; }
.c-img-ph { position: absolute; inset: 0; z-index: 0; }
.c-zones {
  position: absolute; inset: 0; z-index: 2;
  display: grid; grid-template-columns: repeat(var(--zn, 5), 1fr);
}
.c-zone { cursor: pointer; }
.c-labels, .c-actions, .c-dots { z-index: 4; }
.c-dots { transition: opacity .15s var(--ease); }
.card:hover .c-dots .c-dot { background: rgba(255,255,255,.45); width: 5px; border-radius: 999px; }
.card:hover .c-dots .c-dot.on { background: #FFF; width: 16px; border-radius: 3px; }

/* ============ LIST / GRID VIEW ============ */
.grid.list {
  grid-template-columns: 1fr;
  gap: 12px;
}
.grid.list .card {
  flex-direction: row;
  align-items: stretch;
}
.grid.list .c-img {
  width: 320px; min-width: 320px;
  aspect-ratio: unset;
  align-self: stretch;
}
.grid.list .c-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.1fr 240px;
  gap: 18px 24px;
  padding: 16px 20px;
  align-items: start;
}
.grid.list .c-head { grid-column: 1; }
.grid.list .c-props {
  grid-column: 2; align-self: center;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 18px;
}
.grid.list .c-price-box {
  grid-column: 3; grid-row: 1 / 3;
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 14px;
}
.grid.list .c-cta {
  grid-column: 3; grid-row: 3;
  flex-direction: column; gap: 6px;
}
.grid.list .c-cta .c-btn-sec, .grid.list .c-cta .c-btn-pri { width: 100%; padding: 10px 12px; }
@media (max-width: 900px) {
  .grid.list .card { flex-direction: column; }
  .grid.list .c-img { width: 100%; min-width: 0; aspect-ratio: 4/3; }
  .grid.list .c-body { grid-template-columns: 1fr; }
  .grid.list .c-price-box, .grid.list .c-cta { grid-column: 1; grid-row: auto; }
  .grid.list .c-cta { flex-direction: row; }
}

/* ============ BRANDS POPUP ============ */
.brands-pop {
  margin: 8px 0 16px;
  background: #FFF;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 50px -20px rgba(14,14,16,.18), 0 8px 20px -12px rgba(14,14,16,.1);
  overflow: hidden;
  animation: bp-in .22s var(--ease);
}
@keyframes bp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.bp-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.bp-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.bp-title .bp-sub { color: var(--muted); font-weight: 500; font-size: 12.5px; margin-left: 6px; }
.bp-search {
  flex: 1; max-width: 380px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.bp-search svg { color: var(--muted); flex: none; }
.bp-search input {
  flex: 1; background: transparent; border: 0; outline: none;
  font-size: 13px; color: var(--ink);
  font-family: inherit;
}
.bp-close {
  width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); transition: all .15s var(--ease);
  margin-left: auto;
}
.bp-close:hover { background: var(--bg); color: var(--ink); }
.bp-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.bp-tab {
  display: inline-flex !important; align-items: center; gap: 6px;
  padding: 8px 14px !important;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-3, #6b6b62);
  transition: all .12s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.bp-tab:hover { background: #FFF !important; border-color: var(--line, #e6e6df); }
.bp-tab.active { background: var(--ink, #0e0e12) !important; color: #FFF !important; }
.bp-tab.active span { background: rgba(255,255,255,.18) !important; color: #FFF !important; }
.bp-tab span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; padding: 0 6px; height: 18px;
  background: rgba(0,0,0,.06); color: var(--muted, #6b6b62);
  border-radius: 999px; font-size: 12px; font-weight: 700;
}
.bp-tab span {
  font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums;
  padding: 1px 5px; background: rgba(14,14,16,.06); border-radius: 4px;
}
.bp-tab:hover { background: #FFF; color: var(--ink); }
.bp-tab.active { background: var(--ink); color: #FFF; }
.bp-tab.active span { background: rgba(255,255,255,.15); color: #FFF; }

.bp-body {
  padding: 14px 16px 8px;
  max-height: 420px;
  overflow-y: auto;
}
.bp-group { margin-bottom: 12px; }
.bp-letter { margin-bottom: 22px; }
.bp-letter-h {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700;
  letter-spacing: .15em; color: var(--muted-2, #a8a8a0);
  text-transform: uppercase;
  padding: 6px 0 8px;
  border-bottom: 1px dashed var(--line, #e6e6df);
  margin-bottom: 12px;
}
.bp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px;
}
.bp-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: #FFF;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 13px; font-weight: 600;
  transition: all .1s var(--ease);
  cursor: pointer;
  text-align: left;
  justify-content: flex-start;
}
.bp-item:hover { border-color: var(--ink-3); background: var(--bg); }
.bp-item.sel { background: var(--ink); color: #FFF; border-color: var(--ink); }
.bp-item.sel .bp-n { color: rgba(255,255,255,.55); }
.bp-item .bp-mark {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); border-radius: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 800; color: var(--ink);
  flex: none;
}
.bp-item.sel .bp-mark { background: rgba(255,255,255,.14); color: #FFF; }
.bp-item .bp-n { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 12px; font-variant-numeric: tabular-nums; }
.bp-item.hidden { display: none; }

.bp-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.bp-sel { font-size: 12.5px; color: var(--muted); }
.bp-sel b { color: var(--ink); }
.bp-acts { margin-left: auto; display: flex; gap: 8px; }
.bp-reset {
  padding: 9px 14px;
  background: transparent;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.bp-reset:hover { color: var(--ink); background: #FFF; }
.bp-apply {
  padding: 9px 16px;
  background: var(--ink); color: #FFF;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 700;
}
.bp-apply:hover { background: var(--accent); }
.brand-chip.more {
  background: #FFF;
  border: 1px dashed var(--line-2);
  color: var(--ink);
  font-weight: 700;
}
.brand-chip.more.active {
  background: var(--ink); color: #FFF; border-color: var(--ink); border-style: solid;
}

@media (max-width: 700px) {
  .bp-head { flex-wrap: wrap; gap: 8px; }
  .bp-search { order: 3; max-width: 100%; width: 100%; }
  .bp-body { max-height: 50vh; }
  .bp-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .c-ai span { display: none; }
  .c-ai { padding: 0 8px; width: 30px; justify-content: center; }
}


/* ============ GRID TOOLBAR ============ */
.grid-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.gt-left { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gt-left strong { color: var(--ink); font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.gt-dot { margin: 0 4px; color: var(--muted-2); }
.gt-filter-info { color: var(--muted); }
.gt-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gt-sort { display: flex; align-items: center; gap: 8px; }
.gt-sort-lbl { font-size: 12.5px; color: var(--muted); font-weight: 500; }
#gtSort {
  padding: 8px 30px 8px 12px;
  background: #FFF url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2345454A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  font-family: inherit;
  appearance: none; cursor: pointer;
  min-width: 180px;
}
#gtSort:hover { border-color: var(--ink-3); }
#gtSort:focus { outline: none; border-color: var(--ink); }

.gt-view {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
}
.gt-view .vt {
  width: 34px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border-radius: 7px;
  color: var(--muted);
  transition: all .12s var(--ease);
}
.gt-view .vt:hover { color: var(--ink); }
.gt-view .vt.active { background: #FFF; color: var(--ink); box-shadow: 0 1px 2px rgba(14,14,16,.06); }

@media (max-width: 700px) {
  .grid-toolbar { gap: 10px; }
  .gt-left { width: 100%; }
  #gtSort { min-width: 0; flex: 1; }
}


.c-photo-tag {
  position: absolute; bottom: 10px; right: 10px;
  padding: 3px 7px;
  background: rgba(14,14,16,.78);
  color: #FFF;
  backdrop-filter: blur(4px);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .15s var(--ease);
  pointer-events: none;
}
.c-photo.p-0 .c-photo-tag { opacity: .9; }
.card:hover .c-photo.on .c-photo-tag { opacity: .9; }


/* ============ FIX: «Без ДТП» — зелёный ============ */
.c-label.gold { background: #1F8B4C; color: #FFF; }

/* ============ MOBILE FIXES ============ */
@media (max-width: 700px) {
  /* шире карточка */
  .shell { padding-left: 12px; padding-right: 12px; }
  .grid { gap: 14px; }
  .card { border-radius: 12px; }
  .c-body { padding: 14px 14px 16px; gap: 10px; }
  .c-name { font-size: 16px; }
  .c-props { font-size: 12px; gap: 4px 12px; }
  .c-price { font-size: 20px; }
  .c-price-box { padding: 10px 12px; }
  .c-cta { gap: 6px; }
  .c-btn-sec, .c-btn-pri { padding: 10px 10px; font-size: 12.5px; }

  /* fhead — компакт */
  .fhead { gap: 8px; padding: 10px 0; }
  .fhead-left { flex-wrap: wrap; gap: 6px; width: 100%; }
  .fhead-right { width: 100%; justify-content: space-between; gap: 8px; }
  .fcount { font-size: 12px; }
  .sort select { padding: 6px 28px 6px 10px; font-size: 12.5px; }
  .viewtog .vt { width: 30px; height: 28px; }

  /* brand-chip */
  .brand-chip { padding: 5px 10px 5px 5px; font-size: 12px; }
  .brand-chip .bc-mark { width: 22px; height: 22px; font-size: 12px; }
  .brand-chip .bc-n { font-size: 12px; }

  /* fab Подбор не наезжает на cta */
  body { padding-bottom: 80px; }
}


/* ============ FAQ (typography-first) ============ */
.faq-section { padding: 80px 0; }
.faq-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 80px;
  align-items: start;
}
.faq-left {
  position: sticky; top: 96px;
  display: flex; flex-direction: column; gap: 18px;
}
.faq-left .sec-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.faq-left .sec-h2 {
  /* 03.09.2026 (аудит 1.6): 'Unbounded' и 'Inter' на сайте не подключены — эти
     элементы молча падали на системный шрифт. Ставим тот, что реально загружен. */
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
  color: var(--ink);
  margin: 0;
}
.faq-lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
  max-width: 34ch;
  margin: 0;
}
.faq-lede strong { color: var(--ink); font-weight: 700; }
.faq-cta-row { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.faq-all, .faq-chat {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--ink); color: #FFF;
  border-radius: 10px;
  font-size: 13.5px; font-weight: 700;
  letter-spacing: -.005em;
  transition: background .15s var(--ease), transform .15s var(--ease);
  width: max-content;
}
.faq-all:hover { background: var(--accent); transform: translateY(-1px); }
.faq-chat {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 11px 15px;
}
.faq-chat:hover { background: var(--bg); border-color: var(--ink-3); }

.faq-right {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.faq {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.faq summary {
  display: grid;
  grid-template-columns: 44px 1fr 32px;
  align-items: baseline;
  gap: 18px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  transition: color .15s var(--ease);
}
.faq summary::-webkit-details-marker,
.faq summary::marker { display: none; content: ''; }
.faq summary:hover { color: var(--accent); }
.faq summary:hover .faq-num { color: var(--accent); }

.faq-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; font-weight: 700;
  color: var(--muted-2);
  letter-spacing: .04em;
  padding-top: 4px;
  align-self: start;
  transition: color .15s var(--ease);
}
.faq-q {
  /* 03.09.2026 (аудит 1.6): 'Unbounded' и 'Inter' на сайте не подключены — эти
     элементы молча падали на системный шрифт. Ставим тот, что реально загружен. */
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 19px; font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
.faq-plus {
  position: relative;
  width: 22px; height: 22px;
  align-self: center; justify-self: end;
  flex: none;
  transition: transform .25s var(--ease);
}
.faq-plus::before,
.faq-plus::after {
  content: '';
  position: absolute;
  left: 3px; right: 3px; top: 50%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transform: translateY(-50%);
  transition: transform .25s var(--ease), background .15s var(--ease);
}
.faq-plus::after { transform: translateY(-50%) rotate(90deg); }
.faq[open] .faq-plus::after { transform: translateY(-50%) rotate(0deg); }
.faq summary:hover .faq-plus::before,
.faq summary:hover .faq-plus::after { background: var(--accent); }

.faq-body {
  display: grid;
  grid-template-columns: 44px 1fr 32px;
  gap: 18px;
  padding: 0 0 28px;
  animation: faq-in .3s var(--ease);
}
.faq-body > * { grid-column: 2; }
.faq-body p {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-2, var(--ink));
  text-wrap: pretty;
  max-width: 62ch;
  margin: 0 0 10px;
  hyphens: auto;
}
.faq-body p:last-child { margin-bottom: 0; }
.faq-body p strong { color: var(--ink); font-weight: 700; }
.faq-note {
  color: var(--muted) !important;
  font-size: 14px !important;
}
.faq-list {
  list-style: none; padding: 0;
  margin: 4px 0 12px;
  display: flex; flex-direction: column;
  max-width: 62ch;
}
.faq-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14.5px;
}
.faq-list li:last-child { border-bottom: 0; }
.faq-list li span { color: var(--ink-3); }
.faq-list li b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

@keyframes faq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .faq-section { padding: 56px 0; }
  .faq-grid { grid-template-columns: 1fr; gap: 28px; }
  .faq-left { position: static; gap: 14px; }
  .faq-left .sec-h2 { font-size: 28px; }
  .faq-all, .faq-chat { width: 100%; justify-content: space-between; }
  .faq summary { grid-template-columns: 36px 1fr 28px; gap: 12px; padding: 18px 0; }
  .faq-body { grid-template-columns: 36px 1fr 28px; gap: 12px; padding: 0 0 22px; }
  .faq-q { font-size: 16px; }
  .faq-body p { font-size: 14.5px; }
}


/* ============ FAQ fixes (no overflow) ============ */
.faq-grid { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 56px; }
.faq-left { min-width: 0; }
.faq-left .sec-h2 {
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.14;
  overflow-wrap: break-word;
  hyphens: auto;
}
.faq-lede { max-width: 100%; }
.faq-right { min-width: 0; }
.faq-q { overflow-wrap: break-word; min-width: 0; }
.faq-body p { max-width: 100%; }
.faq-list { max-width: 100%; }

@media (max-width: 1100px) {
  .faq-grid { gap: 36px; }
}
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; }
}


/* section.catalog-section / .section — старый Bitrix-фон/padding
   убираем чтобы под карточками не было серой подложки */
body.new-design-catalog section.catalog-section,
body.new-design-catalog .catalog-section.section {
  background: transparent !important;
  padding-top: 0 !important;
}

body.new-design-catalog #ajax-load,
body.new-design-catalog #ajax-load-list {
  background: transparent !important;
}


/* Карточки внутри .catalog-section выровнены по .shell — max-width 1520px + adaptive padding
   задано общим правилом выше (строка ~63). Здесь только убираем фон, padding не трогаем. */
body.new-design-catalog .catalog-section,
body.new-design-catalog .catalog-section.section,
body.new-design-catalog #ajax-load {
  background: transparent !important;
}


/* Боевое правило `body:not(.page_content) .content > section:nth-child(2n+1)`
   даёт тёмный box-shadow + серый фон чередующимся секциям — это и была «серая
   подложка под блоком авто». Перебиваем для new-design-catalog. */
body[class*="new-design"] main.content > section,
body[class*="new-design"] main.content > section:nth-child(2n+1),
body[class*="new-design"] main.content > section:nth-child(2n),
body[class*="new-design"] .section_gray,
body[class*="new-design"] section.page__catalog,
body[class*="new-design"] .catalog-korean section,
body[class*="new-design"] .pd-hero-section,
body[class*="new-design"] section.hero,
body[class*="new-design"] section.pd-section {
  background: transparent !important;
  box-shadow: none !important;
}


/* Снимаем box-shadow / серый фон со всех вложенных section'ов в каталоге */
body.new-design-catalog .catalog-korean section,
body.new-design-catalog .page__catalog section,
body.new-design-catalog .page__catalog .container > section,
body.new-design-catalog section.hero,
body.new-design-catalog section.search-section,
body.new-design-catalog section.filters-section,
body.new-design-catalog section.catalog-section,
body.new-design-catalog section.catalog-section.section,
body.new-design-catalog #ajax-load {
  box-shadow: none !important;
  background: transparent !important;
}
/* Padding на .catalog-section и #ajax-load задан общим правилом max-width 1520px вверху файла. */
body.new-design-catalog #ajax-load-list,
body.new-design-catalog .grid.section__list {
  gap: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ============================================================================
   07.09.2026 (аудит, пп. 10, 11, 24). Промежуточной раскладки не было вовсе:
   легаси template_styles.css держит три колонки, а custom.css с 991px и ниже
   вообще выключает сетку (`main .section__list{display:block}`) — карточки идут
   в один столбец. Из-за этого:
     - 992-1150px: три колонки по 307-339px — цена ломалась на две строки,
       ярлыки «В наличии в Корее» / «Дешевле таможня» обрезались многоточием,
       сердечко «в избранное» вылезало за правый край фото (замер 1024x1366:
       карточка 307px, цена 44px = 2 строки, сердечко на 10px за краем);
     - 700-991px: одна карточка выше экрана целиком (на 800x600 видно только
       фото и ни одной цены), страница вырастала до 20-26 тысяч px.
   Ставим две колонки на всём промежутке 700-1150px. Ниже 700px (телефоны)
   остаётся одна колонка, выше 1150px — прежние три.
   Селектор с id (1,1,0) перебивает и легаси-правила, и `main .section__list`.
   ============================================================================ */
@media (min-width: 700px) and (max-width: 1150px) {
  body.new-design-catalog #ajax-load-list,
  body.new-design-catalog .section__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* легаси на <=720px сжимает пагинацию до одной колонки — возвращаем во всю ширину */
  body.new-design-catalog #ajax-load-list > .section__pagination,
  body.new-design-catalog .section__list .section__pagination {
    grid-column: 1 / -1;
  }
}

/* Сердечко «в избранное» — фиксированная цель нажатия: строка действий над фото
   ограничена max-width 40% (nd-split-catalog.css:155), и на узких карточках
   ужималось именно оно (замер 1200px: 16px вместо 30px). Кнопка «Спросить ИИ»
   рядом ужимается сама и подпись у неё скрывается отдельным правилом. */
body[class*="new-design"] .c-img .c-actions .c-fav,
body.nd-hybrid .c-img .c-actions .c-fav { flex: none; }


/* Контейнер: max-width 1520px — задано выше (строка 57). Здесь снимаем только bitrix-обёртки .container,
   которые добавляют свой max-width:147rem и боковые padding'и. Сам .shell не трогаем — он сам себя ограничит. */
body.new-design-catalog .catalog-korean .container,
body[class*="new-design"] main.content > .container,
body[class*="new-design"] .page__catalog > .container,
body[class*="new-design"] .page__main > .container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* viewtog list-mode v4 (2026-05-05): фото 320×200 + inline name/trim/year + inline price/krw + CTA справа */
body.nd-view-list .section__list,
body.nd-view-list #ndCatalogContainer .section__list,
body.nd-view-list .nd-mini-grid .section__list,
body.nd-view-list #ajax-load-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}
body.nd-view-list #ndCatalogContainer .element--wrapper,
body.nd-view-list .nd-mini-grid .element--wrapper {
  width: 100% !important;
  max-width: 100% !important;
}
@media (min-width: 720px) {
  body.nd-view-list #ndCatalogContainer a.card,
  body.nd-view-list .nd-mini-grid a.card {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
  }
  body.nd-view-list #ndCatalogContainer a.card > .c-img,
  body.nd-view-list .nd-mini-grid a.card > .c-img {
    flex: 0 0 320px !important;
    width: 320px !important;
    height: auto !important;
    min-height: 200px !important;
    align-self: stretch !important;
    aspect-ratio: unset !important;
  }
  body.nd-view-list #ndCatalogContainer a.card > .c-body,
  body.nd-view-list .nd-mini-grid a.card > .c-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 14px 18px !important;
    min-height: 200px !important;
  }
  /* === имя + комплектация + год в одну строку (block + inline children) === */
body.nd-view-list #ndCatalogContainer a.card .c-head { padding-right: 0 !important; }
body.nd-view-list #ndCatalogContainer a.card .c-head-main { display: block !important; }
body.nd-view-list #ndCatalogContainer a.card .c-name-row,
body.nd-view-list .nd-mini-grid a.card .c-name-row,
body.nd-view-list #ndCatalogContainer a.card .c-name { display: inline !important; }
  body.nd-view-list #ndCatalogContainer a.card .c-trim,
  body.nd-view-list .nd-mini-grid a.card .c-trim,
  body.nd-view-list #ndCatalogContainer a.card .c-year,
  body.nd-view-list .nd-mini-grid a.card .c-year {
    display: inline-block !important;
    margin: 0 !important;
    color: #6b6b62 !important;
    font-size: 14px !important;
  }
  body.nd-view-list #ndCatalogContainer a.card .c-trim::before,
  body.nd-view-list .nd-mini-grid a.card .c-trim::before,
  body.nd-view-list #ndCatalogContainer a.card .c-year::before,
  body.nd-view-list .nd-mini-grid a.card .c-year::before {
    content: '·' !important;
    margin-right: 6px !important;
    color: #c8c8c0 !important;
  }
  /* === цена + ₩ в одну строку === */
  body.nd-view-list #ndCatalogContainer a.card .c-price-row,
  body.nd-view-list .nd-mini-grid a.card .c-price-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 4px 14px !important;
  }
  body.nd-view-list #ndCatalogContainer a.card .c-price-lbl,
  body.nd-view-list .nd-mini-grid a.card .c-price-lbl {
    flex: 1 0 100% !important;
  }
  body.nd-view-list #ndCatalogContainer a.card .c-price-krw,
  body.nd-view-list .nd-mini-grid a.card .c-price-krw {
    margin-left: 0 !important;
  }
  /* === c-body relative, кнопки absolute в нижний правый угол; цена с padding-right под кнопки === */
body.nd-view-list #ndCatalogContainer a.card > .c-body { position: relative !important; }
body.nd-view-list #ndCatalogContainer a.card .c-price-box { padding-right: 260px !important; }
body.nd-view-list #ndCatalogContainer a.card .c-cta,
body.nd-view-list .nd-mini-grid a.card .c-cta {
    position: absolute !important;
    right: 18px !important;
    bottom: 28px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-self: auto !important;
    width: auto !important;
    margin: 0 !important;
    gap: 10px !important;
  }
  body.nd-view-list #ndCatalogContainer a.card .c-cta .c-btn-sec,
  body.nd-view-list .nd-mini-grid a.card .c-cta .c-btn-sec,
  body.nd-view-list #ndCatalogContainer a.card .c-cta .c-btn-pri { width: auto !important; flex: 0 0 auto !important; padding: 10px 18px !important; font-size: 13px !important; }
}

/* === Phase K1 v2 — fix мобильной шапки (10.05.2026) === */
@media (max-width: 860px) {
  /* Новая шапка десктопа (header.header без -fixed-top суффикса) скрывается на мобе.
     На мобе работает .mobile-menu-fixed (Bitrix-шапка) которая уже корректна. */
  body[class*="new-design"] header.header:not(.header-fixed-top) { 
    display: none !important; 
  }
  /* Drawer не должен расширять document */
  body[class*="new-design"] .mnav-drawer { 
    width: 100vw !important;
    max-width: 100vw !important;
  }
  .wrapper { overflow-x: hidden; }
  /* 04.08.2026: `overflow-x: hidden` делает .wrapper скролл-контейнером — браузер не умеет
     hidden по X и visible по Y, и приводит второе к auto. Любой `position: sticky` внутри
     начинает считаться относительно .wrapper, а скроллится окно, поэтому липкие элементы
     просто уезжают. Так с 11.05 не работали табы карточки, и это не замечали.
     `clip` обрезает так же, но контейнером не становится. hidden выше оставлен фолбэком
     для Safari < 16 — там sticky по-прежнему не будет, но горизонтальный скролл закрыт. */
  @supports (overflow-x: clip) {
    .wrapper { overflow-x: clip; }
  }
}
/* === /Phase K1 v2 === */

/* 24.07.2026: живые фасеты панели фильтра (паритет с боевым): затемнение пунктов
   с 0 машин + счётчики на чипах/галках. Выбранные пункты не серятся никогда. */
.fpanel .cs-list-item.is-zero { opacity: .35; pointer-events: none; }
.fpanel .fchip.is-zero, .fpanel .fcheck.is-zero { opacity: .35; pointer-events: none; }
.fpanel .fchip-cnt { font-size: 12px; color: var(--muted, #6E6E76); margin-left: 5px; }
.fpanel .fcheck-cnt { font-size: 12px; color: var(--muted, #6E6E76); margin-left: 6px; }
.fpanel select option:disabled { color: #C2C2C8; }
#ndFilterApply.is-zero { cursor: not-allowed; }

/* 24.07.2026 (Ivan): двойной разделитель между рядами «Кузов» и «Марка» — у обоих
   .brands-row есть и border-top, и border-bottom → между ними рисовались ДВЕ линии
   с зазором. Ряд кузова отдаёт нижнюю границу ряду марки — остаётся одна линия. */
.brands-row.bt-row-v2 { border-bottom: 0; margin-bottom: 0; }

/* 24.07.2026: строка поиска — паритет с боевым (автокомплит, номер Encar, AI-диалог, голос) */
.search-bar .s-clear {
  flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: #F0F0F3; color: #6E6E76; font-size: 16px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.search-bar .s-clear:hover { background: #ececf0; color: var(--ink, #0E0E12); }
/* 07.08.2026 (Ivan): «голосовой поиск перенесём в левую часть и отделим от лупы,
   а саму иконку сделаем более заметной». Был серый контур 30px, зажатый справа между
   крестиком и красной кнопкой «Спросить ИИ» — терялся полностью. Стал акцентной кнопкой
   у левого края: заливка бренда, белая иконка, отделён вертикальной чертой от лупы. */
.search-bar .s-div-mic {
  flex: none; width: 1px; height: 22px; margin: 0 10px 0 12px;
  background: #ececf0; border-radius: 1px;
}
.search-bar .s-mic {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(225,29,46,.10); color: #E11D2E; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 10px;
  transition: color .15s, background .15s, transform .15s;
}
.search-bar .s-mic svg { width: 18px; height: 18px; }
.search-bar .s-mic:hover { background: #E11D2E; color: #fff; transform: scale(1.05); }
.search-bar .s-mic.is-listening { color: #E11D2E; background: #f7f7f9; animation: ndMicPulse 1.2s infinite; }
@keyframes ndMicPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(225,29,46,.25); } 50% { box-shadow: 0 0 0 6px rgba(225,29,46,0); } }

/* автокомплит машин */
.sd-hits { padding: 6px; }
.sd-hit {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 12px; text-decoration: none;
  transition: background .12s;
}
.sd-hit:hover, .sd-hit.is-active { background: #f7f7f9; }
/* 16.09.2026: разделы каталога в подсказке (страницы марки и модели) — отличаются от
   объявлений: вместо фото иконка списка, вместо цены «Смотреть →». */
.sd-sec { background: #FAFAFB; }
.sd-sec-i { display: inline-flex; align-items: center; justify-content: center;
  background: #EFEFF3; color: #0E0E12; border-radius: 8px; }
.sd-sec-go { font-size: 12px; font-weight: 600; color: var(--muted, #6B6B76); white-space: nowrap; }
.sd-hit-photo {
  width: 62px; height: 46px; flex: none; border-radius: 8px; object-fit: cover;
  background: #ececf0; display: block;
}
.sd-hit-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sd-hit-t { font-size: 13.5px; font-weight: 700; color: var(--ink, #0E0E12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-hit-s { font-size: 12px; color: #6E6E76; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-hit-p { flex: none; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--ink, #0E0E12); }
.sd-hits-note { padding: 12px 12px 8px; font-size: 12.5px; color: #6E6E76; }
.sd-hits-note-sub { padding-top: 0; font-size: 12px; }
.sd-showall {
  display: block; margin: 6px 4px 2px; padding: 11px 12px; border-radius: 10px;
  background: #F7F7F9; text-align: center; font-size: 13px; font-weight: 700;
  color: var(--ink, #0E0E12); text-decoration: none;
}
.sd-showall:hover, .sd-showall.is-active { background: #f0f0f3; }

/* ── 08.09.2026: единая строка поиска по четырём каталогам (/ajax/search-all.php) ──
   Каждая подсказка помечена своим каталогом, чтобы перемешанный список читался: закреплённые
   сверху новые из Китая — красным «Хит продаж» (канон #E11D2E, как метка на витрине
   /china-new/) либо тёмным «Новый», машины в наличии — зелёным, б/у Корея и Китай — спокойным
   серым, они и так основная масса выдачи. */
.sd-hit-t { display: flex; align-items: center; gap: 7px; }
.sd-hit-t > .sd-hit-badge { flex: none; }
.sd-hit-badge {
  font-size: 12px; font-weight: 700; line-height: 1.6; letter-spacing: .02em;
  padding: 0 7px; border-radius: 999px; white-space: nowrap;
  background: #F0F0F3; color: #6E6E76;
}
.sd-hit-badge--new_china { background: #E11D2E; color: #fff; }
.sd-hit-badge--sklad     { background: #E7F6EF; color: #0B7A55; }
.sd-hit--new_china       { background: #FFF7F8; }
.sd-hit--new_china:hover, .sd-hit--new_china.is-active { background: #FFEEF0; }

/* подпись «Ищем в каталоге: Китай» — когда каталог назван прямо во фразе */
/* ─── всплывающая строка поиска по иконке в шапке (11.09.2026) ───────────────────────────
   Окно рисуется только на страницах, где своей строки поиска нет (includes/nd-search-modal.php).
   Внутри лежит обычный блок строки поиска со всеми своими состояниями, поэтому тут только
   подложка, ширина и шапка окна — ни одного правила про сам поиск. */
.nd-smodal { position: fixed; inset: 0; z-index: 1200; }
.nd-smodal[hidden] { display: none !important; }
.nd-smodal-back { position: absolute; inset: 0; background: rgba(10,10,14,.74); }
/* 11.09.2026 (Ivan, скриншот карточки: «выглядит как-то багано»). Окно вставало на 81 px, а шапка
   тянется до 137 — строка поиска ложилась прямо на логотип и меню, и это читалось как поломка.
   Высоту шапки подставляет скрипт при открытии (--nd-smodal-top): она разная на компьютере и
   телефоне, а на страницах, прокрученных вниз, шапки может не быть на экране вовсе. */
.nd-smodal-box {
  position: relative; max-width: 760px; padding: 0 16px;
  margin: calc(var(--nd-smodal-top, 9vh) + 14px) auto 0;
}
/* блок строки поиска внутри окна не должен добавлять своих внешних отступов и фона */
.nd-smodal-box .search-section { padding: 0; margin: 0; background: transparent; }
.nd-smodal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 2px 10px; color: #FFF;
}
.nd-smodal-t { font-size: 13px; font-weight: 700; letter-spacing: -.01em; opacity: .92; }
.nd-smodal-x {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #FFF; cursor: pointer; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.nd-smodal-x:hover { background: rgba(255,255,255,.26); }
/* ⛔ 11.09.2026 (Ivan: «кнопка спросить ии багано выглядит»). Виноват глобальный сброс из
   начала этого файла: `body[class*="new-design"] button { padding: 0; background: none;
   color: inherit; border: none }` — его специфичность (0,1,2) ВЫШЕ, чем у одиночных классов
   `.s-ai` и `.sd-ex` (0,1,0). На страницах каталога кнопку ИИ спасает отдельное правило
   `body.new-design-catalog .search-bar .s-ai` с !important, а на карточке машины, в новостях и
   FAQ такого правила нет — и кнопка теряла заливку, отступы и цвет текста (124×17 px вместо
   124×43), у кнопок-примеров пропадали рамка и фон.

   Возвращаем вид, НЕ трогая глобальный сброс: два класса (0,2,0) перебивают его, а действуют
   только внутри окна — на страницы каталога это не влияет вовсе. Компактный вид на узких
   экранах сохраняется: там свои правила с !important, они сильнее. */
.nd-smodal .s-ai {
  display: inline-flex; padding: 13px 20px; border-radius: 12px;
  background: var(--accent, #E11D2E); color: #FFF;
}
.nd-smodal .s-ai:hover { background: var(--accent-2, #B8152B); }
.nd-smodal .s-ai svg { fill: #FFF; }
.nd-smodal .sd-ex {
  padding: 11px 14px; border-radius: 12px;
  background: #FFF; border: 1px solid rgba(14,14,16,.08);
}
.nd-smodal .sd-ex:hover { background: #F7F7F9; border-color: var(--ink, #0E0E12); }

/* пока окно открыто, страница под ним не прокручивается */
body.nd-smodal-open { overflow: hidden; }
@media (max-width: 700px) {
  .nd-smodal-box { margin-top: calc(var(--nd-smodal-top, 0px) + 10px); padding: 0 10px; }
  .nd-smodal-t { font-size: 12px; }
}

.sd-note {
  padding: 9px 12px 4px; font-size: 12px; color: #6E6E76;
}
.sd-note b { color: var(--ink, #0E0E12); font-weight: 700; }
.sd-note-wide { color: #8A5B00; }
/* «Рио в каталоге нет — показываем всё, что есть у Kia»: сервер сообщает в sources[].missing,
   какого слова запроса нет ни в одной найденной модели. Тон тот же, что у sd-note-wide, —
   оба случая про «нашли не совсем то, что просили». */
.sd-note-miss { color: #8A5B00; }
.sd-note-miss b { color: #6A4600; font-weight: 700; }

/* строка «сколько нашлось в каждом каталоге» — под списком, перед кнопкой «Показать все» */
.sd-sources { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 6px 2px; }
.sd-source {
  font-size: 12px; line-height: 1.7; color: #6E6E76; text-decoration: none;
  padding: 1px 9px; border-radius: 999px; background: #F7F7F9; white-space: nowrap;
}
.sd-source b { color: var(--ink, #0E0E12); font-weight: 700; }
.sd-source:hover { background: #EFEFF2; }

/* название машины отдельным элементом: у .sd-hit-t теперь display:flex (в него встала метка
   каталога), а на flex-контейнере text-overflow не работает — длинная комплектация обрезалась
   бы без многоточия */
.sd-hit-t > .sd-hit-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* цвет чипа перебивался общим правилом ссылок каталога — поднимаем точность селектора */
.sd-hits .sd-sources .sd-source { color: #6E6E76; }
.sd-hits .sd-sources .sd-source b { color: var(--ink, #0E0E12); }
/* 09.09.2026: счётчики каталогов стали рабочими ссылками (у каждого свой адрес с фильтром),
   поэтому им нужен вид кнопки, а не подписи — раньше их не читали как кликабельные. */
.sd-hits .sd-sources .sd-source {
  border: 1px solid #E6E6EA; padding: 3px 10px; transition: background .12s, border-color .12s;
}
.sd-hits .sd-sources .sd-source:after {
  content: "→"; margin-left: 5px; color: #B4B4BC; font-weight: 400;
}
.sd-hits .sd-sources .sd-source:hover { background: #fff; border-color: #0F0F13; }
.sd-hits .sd-sources .sd-source:hover:after { color: var(--ink, #0E0E12); }

/* 09.09.2026 (Ivan: «надо две кнопки — показать 193 из Кореи и 133 из Китая»). Когда каталогов
   больше одного, вместо единственной «Показать все» рисуем по кнопке на каталог: у каждой свой
   адрес и своё число. Сетка в две колонки — четыре кнопки (Корея, Китай, новые, наличие) иначе
   растягивают выпадающий блок вниз на пол-экрана. */
.sd-goes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 8px 4px 2px; }
.sd-go {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 12px; border-radius: 10px; background: #F7F7F9;
  text-align: center; font-size: 12.5px; font-weight: 700; line-height: 1.25;
  color: var(--ink, #0E0E12); text-decoration: none; transition: background .12s;
}
.sd-go:hover, .sd-go.is-active { background: #EDEDF1; }
/* нечётная последняя кнопка занимает всю ширину, чтобы не висел пустой столбец */
.sd-goes .sd-go:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .sd-goes { grid-template-columns: 1fr; }
  .sd-go { font-size: 13px; }
}

@media (max-width: 700px) {
  .sd-hit-badge { font-size: 12px; padding: 0 6px; }
  .sd-sources { padding: 6px 4px 0; }
}

/* AI conversational */
.sd-convo { padding: 14px; }
.sd-convo-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.sd-convo-head.is-fallback .sd-convo-text { color: #8A5B00; }
.sd-convo-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #F0F0F3; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.sd-convo-text { font-size: 13px; line-height: 1.5; color: var(--ink, #0E0E12); }
.sd-convo-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #A8A8B2; margin: 10px 0 7px; }
.sd-convo-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.sd-convo-brand {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  border: 1px solid var(--line, #E5E2DB); border-radius: 10px; text-decoration: none;
}
.sd-convo-brand:hover { border-color: var(--ink, #0E0E12); }
.sd-convo-brand b { font-size: 13px; color: var(--ink, #0E0E12); }
.sd-convo-brand span { font-size: 12px; color: #6E6E76; }
.sd-convo-brand em { font-style: normal; font-size: 12px; color: #A8A8B2; }
.sd-convo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-convo-chip {
  border: 1px solid var(--line, #E5E2DB); background: #FFF; border-radius: 100px;
  padding: 7px 12px; font-size: 12px; font-weight: 600; color: var(--ink, #0E0E12); cursor: pointer;
}
.sd-convo-chip:hover { border-color: var(--ink, #0E0E12); }
.sd-convo-chip.is-active { background: var(--ink, #0E0E12); color: #FFF; border-color: var(--ink, #0E0E12); }
.sd-convo-chip span { color: inherit; opacity: .55; }
.sd-convo-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.sd-convo-primary {
  flex: 1 1 auto; text-align: center; padding: 11px 14px; border-radius: 10px;
  background: var(--accent, #E11D2E); color: #FFF; font-size: 13px; font-weight: 700; text-decoration: none;
}
.sd-convo-primary:hover { background: #B8152B; color: #FFF; }
.sd-convo-secondary {
  flex: none; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line, #E5E2DB);
  background: #FFF; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink, #0E0E12);
}
.sd-convo-secondary:hover { border-color: var(--ink, #0E0E12); }
@media (max-width: 560px) {
  .sd-convo-brands { grid-template-columns: 1fr; }
  .sd-hit-p { font-size: 12px; }
}

/* 09.09.2026 (Ivan, скриншот iPhone SE: «очень скудная выдача, практически не видно ни
   названий, ничего»). На 375 px строка карточки — фото + текст + цена в один ряд, и названию
   оставалось 128 px при нужных 240–253: «SsangYong Torres Gasoline 1.5 2WD» схлопывался
   до «S.». Разворачиваем карточку в сетку: название занимает всю ширину справа от фото,
   а характеристики и цена делят вторую строку. Высота карточки при этом не растёт — строк
   по-прежнему две.

   `display: contents` на теле карточки нужен, чтобы название и характеристики стали
   собственными ячейками общей сетки: в разметке они лежат внутри .sd-hit-body, а цена — снаружи,
   и без этого их не выстроить в один ряд. */
@media (max-width: 560px) {
  .sd-hit {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "photo title title"
      "photo specs price";
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
    padding: 8px 8px;
  }
  /* фото чуть меньше и кегль названия на пол-пункта ниже — вместе это ещё ~15 px строке
     названия, чего хватает большинству имён вроде «SsangYong Torres Gasoline 1.5 2WD» */
  .sd-hit-photo { grid-area: photo; width: 54px; height: 40px; }
  .sd-hit-body  { display: contents; }
  .sd-hit-t     { grid-area: title; font-size: 13px; }
  .sd-hit-s     { grid-area: specs; }
  .sd-hit-p     { grid-area: price; justify-self: end; white-space: nowrap; }
}

/* 24.07.2026 (Ivan): на ПК дропдаун во всю ширину строки поиска и цена, прижатая к правому
   краю, оказывалась в полуметре от названия — «можно не увидеть». Теперь текстовый блок
   имеет фиксированную ширину: цены встают колонкой сразу после названий — близко и
   сканируемо. На узких экранах прежняя раскладка (там и так рядом). */
@media (min-width: 900px) {
  .sd-hit { justify-content: flex-start; }
  .sd-hit-body { flex: 0 0 440px; }
  .sd-hit-p { font-size: 14px; }
}

/* 2026-07-24: строка «Кузов» — на всю ширину сетки свойств, чтобы длинное
   «SUV (кроссовер/внедорожник)» помещалось в одну строку (Ivan) */
.c-prop--wide { grid-column: 1 / -1; }
.c-prop--wide .c-prop-v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid.list .c-prop--wide { grid-column: 1 / -1; }

/* ============================================================================
   2026-07-25 (Ivan): всплывающие формы (Консультация / Заявка / Карта) — оформление
   под новый дизайн + конверсионные блоки. Боевые include'ы /include/forms/*.php
   НЕ трогаем (общий docroot с продом) — только стили в контексте нового дизайна
   и JS-обогащение (ndDressConsultForm в new-catalog.js).
   ========================================================================== */
body[class*="new-design"] #colorbox,
body[class*="new-design"] #cboxWrapper,
body[class*="new-design"] #cboxContent,
body[class*="new-design"] #cboxLoadedContent { border-radius: 20px; }
body[class*="new-design"] #cboxOverlay { background: rgba(14,14,18,.55); opacity: 1 !important; }
body[class*="new-design"] #cboxContent { background: #FFF; }
body[class*="new-design"] #cboxLoadedContent { margin: 0; background: #FFF; }
body[class*="new-design"] #cboxClose {
  top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  background: #F0F0F3; color: #6E6E76; opacity: 1; text-indent: 0; font-size: 0;
}
body[class*="new-design"] #cboxClose::before {
  content: '×'; font-size: 20px; line-height: 32px; display: block; text-align: center; color: #6E6E76;
}
body[class*="new-design"] #cboxClose:hover { background: #ececf0; }

body[class*="new-design"] .form {
  /* 18.08.2026 (Ivan: «в форме шрифт не как на сайте»). Здесь стоял Manrope — он на сайте
     НЕ подключён, поэтому вся модалка падала на системный sans-serif и выбивалась из
     Montserrat остальной страницы. */
  padding: 26px 26px 22px; font-family: 'Montserrat', sans-serif;
}
body[class*="new-design"] .form__title {
  font-family: 'Montserrat', 'Manrope', sans-serif; font-weight: 700;
  font-size: 21px; line-height: 1.25; color: var(--ink, #0E0E12); margin: 0 0 6px;
}
body[class*="new-design"] .form__description {
  font-size: 13px; line-height: 1.5; color: #6E6E76; margin: 0 0 16px;
}

/* — контекст авто (вставляет JS): фото + название + цена — */
body[class*="new-design"] .ndf-car {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  padding: 10px; border: 1px solid var(--line, #E5E2DB); border-radius: 12px; background: #f7f7f9;
}
body[class*="new-design"] .ndf-car img { width: 68px; height: 50px; object-fit: cover; border-radius: 8px; flex: none; background: #EEE; }
body[class*="new-design"] .ndf-car-b { min-width: 0; flex: 1 1 auto; }
body[class*="new-design"] .ndf-car-t { font-size: 13.5px; font-weight: 700; color: var(--ink, #0E0E12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[class*="new-design"] .ndf-car-s { font-size: 12px; color: #6E6E76; margin-top: 2px; }
body[class*="new-design"] .ndf-car-p { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 800; white-space: nowrap; }

/* — поля — */
body[class*="new-design"] .form__group { position: relative; margin: 0 0 10px; }
body[class*="new-design"] .form__group .inputtext {
  width: 100%; box-sizing: border-box; height: 52px; padding: 20px 14px 6px;
  border: 1px solid var(--line, #E5E2DB); border-radius: 12px; background: #FFF;
  font-family: inherit; font-size: 15px; color: var(--ink, #0E0E12); transition: border-color .15s;
}
body[class*="new-design"] .form__group .inputtext:focus { outline: none; border-color: #0E0E12; }
/* 18.08.2026 (Ivan: «при наведении текст-подсказка улетает за строку»). Подпись
   позиционировалась абсолютным top, посчитанным под поле 52px, а поле переопределено
   до 48px — «поднятое» состояние оказывалось выше рамки. Спокойное состояние держим
   по центру трансформом (не зависит от высоты поля), поднятое — фиксированным top. */
body[class*="new-design"] .form__label {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  font-size: 15px; line-height: 1.15; color: #A0A0A8;
  pointer-events: none;
  transition: top .15s ease, font-size .15s ease, transform .15s ease, color .15s ease;
}
body[class*="new-design"] .form__group .inputtext:focus + .form__label,
body[class*="new-design"] .form__group .inputtext:not(:placeholder-shown) + .form__label,
body[class*="new-design"] .form__group.is-filled .form__label {
  top: 8px; transform: none; font-size: 12px; color: #6E6E76;
}
body[class*="new-design"] .form__input_required { color: #E11D2E; }

body[class*="new-design"] .form__submit {
  width: 100%; height: 52px; margin: 6px 0 10px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent, #E11D2E); color: #FFF; font-family: inherit; font-size: 15px; font-weight: 700;
  transition: background .15s;
  /* 18.08.2026 (Ivan: «в кнопке текст не по центру»). У боевой кнопки остаются вертикальные
     паддинги (16px), они вместе с фиксированной высотой сдвигали строку вниз ~3-4px.
     Обнуляем и центрируем строку line-height'ом = высоте кнопки. */
  padding: 0 20px; line-height: 52px;
}
body[class*="new-design"] .form__submit:hover { background: #B8152B; }

body[class*="new-design"] .form__consent { display: flex; align-items: flex-start; gap: 8px; }
body[class*="new-design"] .form__consent-label span { font-size: 12px; line-height: 1.45; color: #6E6E76; }
body[class*="new-design"] .form__consent-label a { color: #6E6E76; text-decoration: underline; }
body[class*="new-design"] .form__checkbox { margin-top: 2px; width: 15px; height: 15px; accent-color: #E11D2E; flex: none; }

/* — доверие (вставляет JS) — */
body[class*="new-design"] .ndf-trust {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 9px 12px; border-radius: 10px; background: #f7f7f9;
  font-size: 12px; color: #2C6B45; font-weight: 600;
}
body[class*="new-design"] .ndf-trust b { color: #1E8C4A; }

/* — быстрые каналы (вставляет JS) — */
body[class*="new-design"] .ndf-alt { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line, #E5E2DB); }
body[class*="new-design"] .ndf-alt-t { font-size: 12px; color: #6E6E76; margin-bottom: 8px; text-align: center; }
body[class*="new-design"] .ndf-alt-r { display: flex; gap: 8px; }
body[class*="new-design"] .ndf-alt-b {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; border-radius: 10px; text-decoration: none; color: #FFF !important;
  font-size: 12.5px; font-weight: 700;
}
body[class*="new-design"] .ndf-alt-b svg { flex: none; }
body[class*="new-design"] .ndf-alt-wa { background: #25D366; }
body[class*="new-design"] .ndf-alt-tg { background: #29A9EB; }
body[class*="new-design"] .ndf-alt-mx { background: linear-gradient(135deg,#1F7AE0,#4E3DF0); }
body[class*="new-design"] .ndf-alt-b:hover { filter: brightness(.94); }

/* — успех — */
body[class*="new-design"] .form__success { text-align: center; padding: 10px 0; }
body[class*="new-design"] .form__success-title { font-family: 'Montserrat','Montserrat',sans-serif; font-size: 19px; font-weight: 700; margin-bottom: 6px; }
body[class*="new-design"] .form__success-text { font-size: 13px; color: #6E6E76; line-height: 1.5; }

/* — мобильный bottom-sheet — */
@media (max-width: 560px) {
  body[class*="new-design"] #colorbox { border-radius: 20px 20px 0 0; }
  body[class*="new-design"] #cboxWrapper, body[class*="new-design"] #cboxContent,
  body[class*="new-design"] #cboxLoadedContent { border-radius: 20px 20px 0 0; }
  body[class*="new-design"] .form { padding: 22px 16px 18px; }
  body[class*="new-design"] .form__title { font-size: 18.5px; }
  body[class*="new-design"] .ndf-alt-b { font-size: 12px; }
}

/* 2026-07-25: уплотнение модальных форм — было слишком «долговязо»:
   заголовок в 2 строки, плашка доверия в 3, название авто обрезалось. */
body[class*="new-design"] #cboxLoadedContent { width: auto !important; }
body[class*="new-design"] .form { padding: 22px 22px 18px; }
body[class*="new-design"] .form__title { font-size: 18.5px; line-height: 1.22; margin-bottom: 5px; }
body[class*="new-design"] .form__description { font-size: 12.5px; margin-bottom: 12px; }

/* контекст авто: имя в 2 строки вместо обрезки, цена — снизу под названием */
body[class*="new-design"] .ndf-car { gap: 10px; padding: 9px; margin-bottom: 10px; align-items: center; }
body[class*="new-design"] .ndf-car img { width: 58px; height: 43px; }
body[class*="new-design"] .ndf-car-t { white-space: normal; font-size: 13px; line-height: 1.25; }
body[class*="new-design"] .ndf-car-s { font-size: 12px; }
body[class*="new-design"] .ndf-car-p { font-size: 13px; align-self: center; }

/* доверие — одна компактная строка, разделители точками через ::after */
body[class*="new-design"] .ndf-trust {
  gap: 5px 8px; padding: 8px 11px; font-size: 12px; line-height: 1.35; margin-bottom: 12px;
}
body[class*="new-design"] .ndf-trust > span { display: inline; }

body[class*="new-design"] .form__group { margin-bottom: 8px; }
body[class*="new-design"] .form__group .inputtext { height: 48px; padding: 19px 13px 5px; font-size: 14.5px; }
body[class*="new-design"] .form__label { font-size: 14px; left: 14px; }
body[class*="new-design"] .form__group .inputtext:focus + .form__label,
body[class*="new-design"] .form__group .inputtext:not(:placeholder-shown) + .form__label,
body[class*="new-design"] .form__group.is-filled .form__label { top: 7px; font-size: 12px; }
body[class*="new-design"] .form__submit { height: 48px; line-height: 48px; font-size: 14.5px; margin: 4px 0 9px; }
body[class*="new-design"] .ndf-alt { margin-top: 11px; padding-top: 11px; }
body[class*="new-design"] .ndf-alt-b { height: 38px; font-size: 12px; }
body[class*="new-design"] .ndf-alt-t { margin-bottom: 6px; }

/* 2026-07-25 (Ivan): иконки соцсетей в шапке — как в футере (.ft-mes): цветные SVG
   в скруглённых подложках. В шапке были без фона (background: transparent !important
   строкой 248) и разного размера. Держим тот же язык: квадрат со скруглением + подсветка
   на hover; размер чуть меньше футерных 40px, чтобы не раздувать топбар. */
.topbar .tb-socials { gap: 8px; }
.topbar .tb-socials .tb-soc {
  width: 34px !important; height: 34px !important;
  border-radius: 9px;
  background: rgba(255,255,255,.06) !important;
  transition: background .15s ease, transform .15s ease;
}
.topbar .tb-socials .tb-soc img { width: 20px !important; height: 20px !important; }
.topbar .tb-socials .tb-soc:hover { background: rgba(255,255,255,.14) !important; }
.topbar .tb-socials .tb-soc:hover img { transform: none; }

/* 2026-07-25 (аудит типографики, запрос Ivan): на /korea/ секционные заголовки шли
   пятью разными размерами (44/40/36/32/26) и двумя шрифтами — «Отвечаем на то, что
   спрашивают чаще всего» был набран декоративным Unbounded вместо Montserrat.
   Приводим к одной шкале: секции 44px, второстепенные 32px, всё — Montserrat. */
body.new-design-catalog .faq-section .sec-h2,
body.new-design-catalog .faq-section h2 {
  font-family: 'Montserrat', 'Manrope', sans-serif !important;
  font-size: 44px; font-weight: 700; line-height: 1.08; letter-spacing: -.02em;
}
body.new-design-catalog .viewed-section .sec-h2 { font-size: 44px; }
body.new-design-catalog .contacts-section .sec-h2 { font-size: 44px; }
body.new-design-catalog .seo-section .seo-h1 { font-size: 32px; line-height: 1.15; }
@media (max-width: 900px) {
  body.new-design-catalog .faq-section .sec-h2,
  body.new-design-catalog .faq-section h2,
  body.new-design-catalog .viewed-section .sec-h2,
  body.new-design-catalog .contacts-section .sec-h2 { font-size: 30px; }
  body.new-design-catalog .seo-section .seo-h1 { font-size: 24px; }
}

/* 2026-07-25 (Ivan: «своди»): единая типографика заголовков во всём новом дизайне.
   Было: карточка — Instrument Serif 400, каталог — Montserrat 700, главная — Manrope 800.
   Стало: секционные H2 везде Instrument Serif 400 с красным курсивом в em (фирменный
   акцент карточки). H3 и подзаголовки остаются гротеском — иерархия сохраняется. */
body.new-design-catalog .sec-h2,
body.new-design-catalog .hc-title,
body.new-design-catalog .seo-h1,
body.new-design-catalog .faq-section h2 {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: inherit !important;
  letter-spacing: -.02em;
  line-height: 1.08;
}


/* 2026-07-25: доводка единой типографики.
   1) FAQ каталога держал моё же прежнее правило с Montserrat !important — снимаем.
   2) Главная (body.new-design-home) — тот же Instrument Serif для секционных H2.
   H3 и мелкие заголовки (20px, 17px, 26px) остаются гротеском — иерархия. */
body.new-design-catalog .faq-section .sec-h2,
body.new-design-catalog .faq-section h2 { font-family: 'Instrument Serif', serif !important; font-weight: 400 !important; }

body.new-design-home .sec-h2,
body.new-design-home h2.sec-h2 {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 400 !important;
  letter-spacing: -.02em; line-height: 1.08;
}


/* 2026-07-25 (Ivan): форма подбора на /korea/ — кнопка, иконки мессенджеров, фото менеджера */
/* Кнопку «Получить подборку» снова съел reset body[class*="new-design"] button{background:none} */
body[class*="new-design"] .hc-submit {
  background: var(--accent, #E11D2E) !important; color: #FFF !important;
  padding: 14px 22px; border: 0; border-radius: 10px; font-weight: 800; font-size: 14px;
}
body[class*="new-design"] .hc-submit:hover { background: #B8152B !important; }
/* Мессенджеры: иконка + подпись в ряд */
body[class*="new-design"] .hc-mes { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
body[class*="new-design"] .hc-mes img { width: 18px; height: 18px; flex: none; display: block; }
body[class*="new-design"] .hc-mes:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }
/* Аватар — фото вместо инициалов */
body[class*="new-design"] .hc-avatar--photo { background: none; box-shadow: none; padding: 0; overflow: hidden; }
body[class*="new-design"] .hc-avatar--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; display: block; }


body.new-design-catalog .faq-right .faq-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; color: #C2C2C8 !important; letter-spacing: .04em;
}


/* ============================================================
   2026-08-01 (Ivan): форма подбора в каталоге — 2 галочки согласия по 152-ФЗ.
   Кнопка вынесена из .hc-grid в подвал формы и стоит на одной линии с галочками.
   Явные background/padding — обходим reset body[class*="new-design"] button {}.
   ============================================================ */
.hc-grid { grid-template-columns: 1fr 1.15fr 1.15fr 1fr; }
.hc-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: 16px; flex-wrap: wrap;
}
.hc-consents { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.hc-consent {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.45); cursor: pointer;
}
.hc-consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 16px; height: 16px; margin: 1px 0 0;
  border: 1px solid rgba(255,255,255,.3); border-radius: 5px;
  background: rgba(255,255,255,.06); cursor: pointer; position: relative;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.hc-consent input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.hc-consent input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 5px; top: 1.5px;
  width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.hc-consent input[type="checkbox"]:focus-visible { outline: 2px solid rgba(255,255,255,.5); outline-offset: 2px; }
.hc-consent a { color: rgba(255,255,255,.72); border-bottom: 1px solid rgba(255,255,255,.2); }
.hc-consent a:hover { color: #fff; }

@media (max-width: 900px) { .hc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .hc-grid { grid-template-columns: 1fr; }
  .hc-foot { flex-direction: column; align-items: stretch; gap: 14px; }
  body.new-design-catalog .hc-foot .hc-submit { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------
   2026-08-01: карточка подбора вылезала за экран на телефоне.
   Ряд мессенджеров (.hc-mes-row) — flex без переноса, его min-content ≈ 390px,
   а грид-колонка = max(1fr, min-content) → колонка становилась 390px внутри
   342px карточки, и правые 48px текста/полей уходили под overflow:hidden.
   Лечим: minmax(0,1fr) + min-width:0 у элементов грида + перенос пилюль.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .helper-card { grid-template-columns: minmax(0, 1fr); }
  .hc-left, .hc-right { min-width: 0; }
  .hc-mes-row { flex-wrap: wrap; }
  .hc-mes { flex: 1 1 auto; min-width: 0; }
}

/* 2026-08-01: галочки согласия в форме блока «Контакты» (светлая карточка) */
.ct-consents { display: flex; flex-direction: column; gap: 7px; margin: 2px 0 2px; }
.ct-consent { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; line-height: 1.4; color: var(--muted); cursor: pointer; }
.ct-consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 16px; height: 16px; margin: 1px 0 0;
  border: 1px solid var(--line); border-radius: 5px; background: #fff;
  cursor: pointer; position: relative; transition: background .15s var(--ease), border-color .15s var(--ease);
}
.ct-consent input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.ct-consent input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 5px; top: 1.5px;
  width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ct-consent a { color: var(--ink-3); text-decoration: underline; }


/* 3. Каналы связи под «Напишите менеджеру» */
.faq-mes-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.faq-mes-row .faq-chat { gap: 8px; padding: 9px 14px; font-size: 13px; }
.faq-mes-row .faq-chat img { width: 18px; height: 18px; display: block; flex: none; }
@media (max-width: 900px) { .faq-mes-row .faq-chat { flex: 1 1 auto; justify-content: center; } }

/* ============================================================
   2026-08-01 (Ivan: «в блоке контактов везде добавить иконки соцсетей»)
   ============================================================ */
.ct-mes { display: grid; grid-template-columns: 22px 1fr; align-items: center; column-gap: 11px; }
.ct-mes-ico { width: 22px; height: 22px; display: block; object-fit: contain; }
.ct-mes-ico--txt {
  display: flex; align-items: center; justify-content: center;
  background: #0E0E12; color: #fff; border-radius: 6px;
  font-size: 12px; font-weight: 800; line-height: 1;
}
.ct-mes-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-mes-txt span { font-size: 12px; color: var(--muted); }
.ct-mes-txt b { font-size: 13px; font-weight: 700; }
.ct-mes.dz:hover { border-color: #0E0E12; } .ct-mes.dz:hover b { color: #0E0E12; }

/* ============================================================
   2026-08-01 (Ivan: «текст сразу после пагинации растянут, шрифт большой —
   привести к виду блока ниже»). Это .catalog-element--desc — SEO-текст раздела
   из /korea/inc/ru/catalog_*.php (ОБЩИЙ докрут с продом, файлы не трогаем).
   Своей типографики у блока не было: p/h2 падали на глобальные правила старого
   шаблона, где 1rem привязан к vw (0.46875vw) — на 1920px абзац становился 18px,
   заголовок 27px, а ширина строки доходила до 1440px. Приводим к шкале
   .seo-section: 960px по центру, фиксированные px, спойлер (JS в new-catalog.js).
   ============================================================ */
body.new-design-catalog .catalog-element--desc {
  max-width: 960px !important;
  margin-left: auto !important; margin-right: auto !important;
  padding: 44px 0 8px !important;
  position: relative;
}


body.new-design-catalog .catalog-element--desc p,
body.new-design-catalog .catalog-element--desc li {
  font-size: 14.5px; line-height: 1.65; color: var(--ink-3); margin: 0 0 14px;
}


body.new-design-catalog .catalog-element--desc h2 {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: 26px; line-height: 1.15; letter-spacing: -.02em;
  color: var(--ink); margin: 26px 0 12px;
}


@media (max-width: 900px) {
  /* 2026-08-01 (Ivan: «текст после пагинации упирается в края»): на мобильном
     боковые поля были обнулены, текст шёл от края до края. Выравниваем по карточкам. */
  body.new-design-catalog .catalog-element--desc { padding: 28px 28px 4px !important; }
  body.new-design-catalog .catalog-element--desc p,
  body.new-design-catalog .catalog-element--desc li { font-size: 13.5px; }
  body.new-design-catalog .catalog-element--desc h2 { font-size: 21px; }
}


/* 2026-08-01 (Ivan: «у электро совсем не понятно что электро, может просто молнию голубую»).
   Было: та же машинка-силуэт, что у кузовов, с еле различимой искрой внутри — на 34×21px
   отличить от «Купе» невозможно. Стало: отдельная молния + голубая заливка,
   чтобы чип читался как тип топлива, а не как ещё один кузов. */
.bt-chip-ev .bt-mark { background: #f0f0f3; color: #0EA5E9; }
.bt-chip-ev:hover .bt-mark { background: #0EA5E9; color: #fff; }
.bt-chip-ev.active { background: #0EA5E9; border-color: #0EA5E9; color: #fff; }
.bt-chip-ev.active .bt-mark { background: rgba(255,255,255,.22); color: #fff; }
.bt-chip-ev .bt-mark svg { display: block; }


/* ============================================================
   2026-08-01: избранное — сердечко в карточке, счётчик в шапке, страница /favorites/
   ============================================================ */
/* активное сердце */
body[class*="new-design"] .card .c-fav.on { background: var(--accent); border-color: var(--accent); color: #fff; }
body[class*="new-design"] .card .c-fav.on svg { fill: currentColor; }
body[class*="new-design"] .card .c-fav { transition: background .15s var(--ease), color .15s var(--ease), transform .12s var(--ease); }
body[class*="new-design"] .card .c-fav:active { transform: scale(.9); }

/* вход в шапке */
.tb-fav {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 999px;
  color: var(--muted); transition: all .15s var(--ease);
}
.tb-fav:hover { color: var(--ink); background: rgba(14,14,16,.05); }
.tb-fav.has { color: var(--accent); }
.tb-fav-n { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-fav.has .tb-fav-n { color: var(--accent); }
@media (max-width: 1024px) { .tb-fav { padding: 5px 6px; } }

/* 11.09.2026 (Ivan): лупа рядом с избранным — вход в поиск с любой страницы.
   Повторяет .tb-fav по размеру и наведению, чтобы пара читалась как один блок. */
.tb-search {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 9px; border-radius: 999px; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; line-height: 0;
  transition: all .15s var(--ease);
}
.tb-search:hover { color: var(--ink); background: rgba(14,14,16,.05); }
@media (max-width: 1024px) { .tb-search { padding: 5px 6px; } }

/* страница избранного */
.fav-section { padding: 26px 0 64px; }
.fav-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.fav-head .sec-h2 { margin: 0 0 8px; }
.fav-lede { font-size: 14px; color: var(--muted); margin: 0; }
.fav-count { color: var(--ink); font-weight: 700; }
.fav-count:not(:empty)::before { content: '· '; color: var(--muted); font-weight: 400; }
.fav-clear {
  flex: none; padding: 9px 15px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff;
  font-size: 13px; font-weight: 600; color: var(--ink-3); cursor: pointer;
  transition: all .15s var(--ease);
}
.fav-clear:hover { border-color: var(--accent); color: var(--accent); }
.fav-empty { text-align: center; padding: 56px 20px 64px; }
.fav-empty-ico { color: var(--line); margin-bottom: 14px; }
.fav-empty-t { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.fav-empty-d { font-size: 14px; color: var(--muted); max-width: 420px; margin: 0 auto 20px; line-height: 1.5; }
.fav-empty-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 10px;
  background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 700;
}
.fav-empty-cta:hover { background: var(--accent); color: #fff; }


@media (max-width: 640px) { .fav-head { flex-direction: column; } .fav-clear { width: 100%; } }


/* ============================================================
   2026-08-01 (Ivan): «в шапке всё съехало в 2 строки, надо в 1».
   Топбар — flex без переноса, но текст ВНУТРИ пунктов переносился, и строка
   раздувалась вдвое. Добавленный вход «Избранное» стал последней каплей:
   на 1280 сумма пунктов (город 164 + офис 267 + соцсети 259 + избранное 38 +
   рейтинг 143 + меню 205) с зазорами упиралась в доступные 1216px.
   Лечим: запрещаем перенос внутри пунктов и по мере сужения убираем наименее
   важное — сначала адрес офиса (он есть в блоке контактов и на /contacts/),
   потом часть соцсетей.
   ============================================================ */
.topbar .shell > *, .tb-left > *, .tb-nav > * { white-space: nowrap; }
.topbar .tb-city, .topbar .tb-office, .topbar .tb-rating, .topbar .tb-nav a { white-space: nowrap; }
.tb-left, .tb-nav { min-width: 0; }

@media (max-width: 1500px) {
  .topbar .shell { gap: 16px; }
  .tb-left { gap: 14px; }
  .tb-nav { gap: 16px; }
  /* адрес НЕ прячем — переключаем на короткий вариант (Ivan: «а адрес почему убрал?»).
     Префикс .topbar обязателен: базовое правило .tb-office-short{display:none}
     объявлено НИЖЕ по файлу и при равной специфичности победило бы. */
  .topbar .tb-office-full  { display: none; }
  .topbar .tb-office-short { display: inline; }
}
@media (max-width: 1240px) {
  .topbar .shell { gap: 12px; font-size: 12px; }
  .tb-left { gap: 11px; }
  .tb-nav { gap: 13px; }
  /* оставляем 3 ключевых канала: Telegram, MAX, VK */
  .tb-socials .tbs-av, .tb-socials .tbs-yt, .tb-socials .tbs-d2 { display: none; }
}
@media (max-width: 1100px) {
  .tb-socials { display: none; }
  .tb-rating .muted { display: none; }       /* «· 259 отзывов» — звезда и балл остаются */
}

/* 2026-08-01: вторая строка шапки на узких десктопах — «Авто из Китая» налезал на телефон.
   `.header .shell` — грид `auto 1fr auto`, у `.main-nav` min-width:0, а пункты nowrap:
   колонка сжимается, содержимое вылезает поверх соседней. Поджимаем пункты по ширине.
   (Дефект был и до появления «Избранного» — оно только в верхней полосе.) */
@media (max-width: 1360px) {
  .header .shell { gap: 14px; }
  .main-nav a { padding: 8px 7px; font-size: 12.5px; gap: 5px; }
}
@media (max-width: 1180px) {
  .main-nav a { padding: 7px 6px; font-size: 12px; }
  .main-nav .flag-img { width: 17px; height: 12px; }
}
@media (max-width: 1100px) {
  /* десктопная шапка живёт до 768px; в этой зоне 5 пунктов + телефон + CTA
     физически не помещаются — убираем флажки и поджимаем ещё */
  .main-nav a { padding: 6px 5px; font-size: 12px; gap: 4px; }
  .main-nav .flag, .main-nav .flag-img { display: none; }
  .header .shell { gap: 10px; }
}

/* 2026-08-01: адрес офиса в шапке — два варианта текста, полный по умолчанию */
.tb-office { color: rgba(255,255,255,.45); transition: color .15s var(--ease); }
.tb-office:hover { color: rgba(255,255,255,.8); }
.tb-office-short { display: none; }
@media (max-width: 1240px) { .tb-office { max-width: 190px; overflow: hidden; text-overflow: ellipsis; } }

/* 2026-08-01: блок офисов — 6 представительств как на боевой /contacts/ */
.ct-office .ct-tag {
  display: inline-block; margin-left: 6px; padding: 2px 7px;
  background: var(--bg-2, #f7f7f9); border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); vertical-align: 2px;
}
.ct-office--main { border-color: rgba(14,14,16,.18); }
.ct-office--main .ct-tag { background: var(--accent-soft); color: var(--accent); }
.ct-office .ct-sh a { color: var(--accent); border-bottom: 1px solid currentColor; }
.ct-all {
  grid-column: 1 / -1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px; border: 1px dashed var(--line); border-radius: var(--radius-md, 14px);
  font-size: 13.5px; font-weight: 600; color: var(--ink-3);
  transition: all .15s var(--ease);
}

.ct-all:hover { border-color: var(--ink); border-style: solid; }

@media (max-width: 560px) { .ct-office .ct-tag { display: none; } }
/* эмодзи-иконка офиса — как .ct-office__flag на боевой /contacts/ */
.ct-office .ct-flag { font-size: 22px; line-height: 1; margin-bottom: 10px; }


/* ============================================================
   2026-08-01 (Ivan: «у выпадающей из поиска формы сделать красиво,
   шрифт у кнопки чёрный — сливается»).
   Две поломки поверх дизайна: (1) у .sd-convo-primary свой `color:#FFF`
   перебивался глобальным правилом ссылок старого шаблона → белый текст
   становился чёрным на красном; (2) у .sd-convo-chip и .sd-convo-secondary
   общий сброс `body[class*="new-design"] button {padding:0}` съедал паддинги,
   и «пилюли» выглядели голым текстом. Всё ниже — с префиксом body.new-design-*,
   чтобы выигрывать по специфичности.
   ============================================================ */
body[class*="new-design"] .sd-convo { padding: 18px 18px 16px; }

/* ответ ассистента */
body[class*="new-design"] .sd-convo-head { gap: 12px; align-items: center; margin-bottom: 16px; }
body[class*="new-design"] .sd-convo-avatar {
  width: 34px; height: 34px; font-size: 17px;
  background: var(--accent-soft, #f0f0f3); color: var(--accent);
  box-shadow: 0 0 0 1px rgba(225,29,46,.12) inset;
}
body[class*="new-design"] .sd-convo-text { font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.45; }

body[class*="new-design"] .sd-convo-label {
  font-size: 12px; letter-spacing: .12em; color: #9A9AA6; margin: 16px 0 8px;
}

/* карточки брендов */
body[class*="new-design"] .sd-convo-brands { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
body[class*="new-design"] .sd-convo-brand {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; background: #fff;
  border: 1px solid var(--line, #E6E6DF); border-radius: 12px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
body[class*="new-design"] .sd-convo-brand:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 8px 20px -12px rgba(14,14,16,.28);
}
body[class*="new-design"] .sd-convo-brand b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
body[class*="new-design"] .sd-convo-brand span { font-size: 12px; color: #6E6E76; line-height: 1.35; }
body[class*="new-design"] .sd-convo-brand em {
  margin-top: 5px; padding-top: 7px; border-top: 1px solid rgba(14,14,16,.07);
  font-size: 12px; font-weight: 600; letter-spacing: .05em; color: #A8A8B2;
}

/* уточняющие пилюли */
body[class*="new-design"] .sd-convo-chips { gap: 7px; }
body[class*="new-design"] .sd-convo-chip {
  padding: 8px 13px; background: #fff; color: var(--ink);
  border: 1px solid var(--line, #E6E6DF); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all .15s var(--ease);
}
body[class*="new-design"] .sd-convo-chip:hover { border-color: var(--accent); color: var(--accent); background: #fff; }
body[class*="new-design"] .sd-convo-chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
body[class*="new-design"] .sd-convo-chip span { opacity: .5; font-weight: 500; margin-left: 3px; }
body[class*="new-design"] .sd-convo-chip:hover span { opacity: .75; }

/* действия */
body[class*="new-design"] .sd-convo-actions { gap: 10px; margin-top: 16px; align-items: stretch; }
body[class*="new-design"] .sd-convo-primary {
  flex: 1 1 auto; min-width: 240px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border-radius: 12px;
  background: var(--accent); color: #fff !important;
  font-size: 13.5px; font-weight: 800; letter-spacing: -.005em;
  box-shadow: 0 2px 0 var(--accent-2, #B8152B);
  transition: transform .1s var(--ease), box-shadow .1s var(--ease), background .15s var(--ease);
}
body[class*="new-design"] .sd-convo-primary:hover { background: var(--accent-2, #B8152B); transform: translateY(1px); box-shadow: 0 1px 0 var(--accent-2, #B8152B); }
body[class*="new-design"] .sd-convo-secondary {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 13px 18px; border-radius: 12px;
  border: 1px solid var(--line, #E6E6DF); background: #fff; color: var(--ink);
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .15s var(--ease);
}
body[class*="new-design"] .sd-convo-secondary:hover { border-color: var(--ink); background: var(--bg, #f7f7f9); }
@media (max-width: 560px) {
  body[class*="new-design"] .sd-convo-actions { flex-direction: column; }
  body[class*="new-design"] .sd-convo-primary { min-width: 0; }
  body[class*="new-design"] .sd-convo-secondary { justify-content: center; }
}
/* строка моделей приходила курсивом (тег <em>) — выравниваем начертание */
body[class*="new-design"] .sd-convo-brand em { font-style: normal !important; }

/* 2026-08-01 (Ivan: «часть названий брендов не умещается в одну строку»).
   «Chevrolet (GM Daewoo)» переносился на три строки и ломал высоту всей сетки.
   Колонку расширили под самое длинное имя, а на узких экранах — многоточие
   (полное название в title). */
.bp-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.bp-item { align-items: center; }
.bp-item .bp-name {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bp-item .bp-n { flex: none; padding-left: 6px; }
@media (max-width: 900px) { .bp-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); } }
@media (max-width: 560px) { .bp-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
/* строка моделей была тегом <em> и наследовала акцентный Instrument Serif
   (он задан для <em> в заголовках) — возвращаем основной шрифт */
body[class*="new-design"] .sd-convo-brand em { font-family: Montserrat, sans-serif !important; }

/* 2026-08-01 (Ivan: «непонятно как скрыть это окно, нет крестика») */
/* 19.10.2026: z-index 49 — при прокрутке панель уходит ПОД липкую шапку (.header, 50), а не поверх */
.search-dropdown { position: relative; z-index: 49; }
.sd-close {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line, #E6E6DF); border-radius: 50%;
  color: var(--muted, #6E6E76); cursor: pointer;
  transition: all .15s var(--ease);
}
body[class*="new-design"] .sd-close {
  background: #fff; padding: 0; color: var(--muted, #6E6E76);
}
.sd-close:hover { border-color: var(--ink); color: var(--ink); }
body[class*="new-design"] .sd-close:hover { color: var(--ink); }
/* чтобы кнопка не перекрывала правый край контента состояний */
.search-dropdown .sd-state > *:first-child { padding-right: 34px; }
@media (max-width: 560px) { .sd-close { top: 8px; right: 8px; width: 34px; height: 34px; } }

/* 2026-08-01 (Ivan): под шапкой было 42px пустоты до хлебных крошек
   (.hero padding-top 22 + .crumbs padding-top 20). Сжимаем до 12px. */
/* у правила выше (body.new-design-catalog .hero) стоит !important — перебиваем тем же */
body[class*="new-design"] .hero { padding-top: 12px !important; }
body[class*="new-design"] .hero .crumbs { padding-top: 0; margin-bottom: 12px; }
@media (max-width: 700px) {
  body[class*="new-design"] .hero { padding-top: 8px !important; }
  body[class*="new-design"] .hero .crumbs { margin-bottom: 8px; }
}
/* 2026-08-01 (Ivan: «тут перенос не очень») — плашка типа представительства
   не должна ломаться и уезжать под название города */
.ct-office .ct-city { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ct-office .ct-tag { margin-left: 0; white-space: nowrap; }
/* на средних ширинах «Москва, г. Видное» + «главный офис» не помещались в строку —
   плашка чуть мельче, этого хватает */
@media (max-width: 1300px) {
  .ct-office .ct-tag { font-size: 12px; padding: 2px 6px; letter-spacing: .03em; }
}
/* полоса 1025–1240px: .contacts-grid ещё в две колонки, но офисная колонка узкая —
   у Москвы название с плашкой не помещалось. Чуть уменьшаем заголовок карточки. */
@media (min-width: 1025px) and (max-width: 1240px) {
  .ct-office .ct-city { font-size: 14px; }
  .ct-office .ct-tag { font-size: 12px; padding: 2px 5px; }
}
/* 1025–1150px — колонка офисов самая узкая, плашка не влезает даже уменьшенной.
   Прячем её: тип представительства и так виден по описанию карточки. */
@media (min-width: 1025px) and (max-width: 1150px) { .ct-office .ct-tag { display: none; } }

/* ============================================================
   2026-08-01 (Ivan): «в моб версии 2 раза город указан, оставим верхний,
   но шрифт сделаем меньше, а нижний уберём; кнопка Спросить ИИ пустая».
   На телефоне город рисовался дважды: в старой мобильной шапке
   (.mobile-header-top .header-city, 21px) и в тёмной полосе нового дизайна.
   Нижний убираем; в полосе остаётся только «Избранное» — иначе оно вообще
   было недоступно на телефоне (.tb-nav скрыт ниже 1024).
   ============================================================ */
@media (max-width: 1024px) {
  body[class*="new-design"] .mobile-header-top .header-city { font-size: 14px; }
  body[class*="new-design"] .mobile-header-top .header-city .city-name,
  body[class*="new-design"] .mobile-header-top .header-city span { font-size: 14px; }
  /* тёмная полоса прячется только когда JS реально перенёс сердечко в мобильную шапку —
     иначе избранное стало бы недоступно (Ivan: «убери чёрную полосу») */
  body.nd-fav-in-mobhead .topbar { display: none !important; }
  .topbar .tb-city-wrap { display: none; }
  .topbar .tb-nav { display: flex !important; }
  .topbar .tb-nav > *:not(.tb-fav) { display: none !important; }
  .topbar .shell { justify-content: flex-end; height: 34px; gap: 0; }
}

/* «Избранное», перенесённое в строку старой мобильной шапки (город + телефон).
   Раскладка: город слева, телефон и сердечко — группой справа. */
body.nd-fav-in-mobhead .mobile-header-top { display: flex; align-items: center; gap: 12px; }
body.nd-fav-in-mobhead .mobile-header-top > a[href^="tel"] { margin-left: auto; }
.tb-fav--mob {
  flex: none; margin-left: 0; padding: 3px 6px; gap: 5px;
  color: var(--muted, #6E6E76); border-radius: 999px;
}
.tb-fav--mob.has { color: var(--accent, #E11D2E); }
.tb-fav--mob svg { width: 17px; height: 17px; }
.tb-fav--mob .tb-fav-n { font-size: 12px; font-weight: 700; }

/* Кнопка «Спросить ИИ» на телефоне была пустым красным квадратом:
   ширина 40px, а внутри иконка 14px + gap 8px + подпись с font-size:0
   (она всё равно флекс-элемент) — содержимое вылезало за overflow:hidden.
   Делаем честно иконочную кнопку. */
@media (max-width: 700px) {
  /* перебиваем body.new-design-catalog .search-bar .s-ai { padding: 13px 20px !important }
     (new-catalog.css:252) — там !important, поэтому нужен селектор той же силы */
  body[class*="new-design"] .search-bar .s-ai {
    width: 44px !important; height: 44px !important;
    padding: 0 !important; gap: 0 !important;
    justify-content: center; flex: none;
  }
  body[class*="new-design"] .search-bar .s-ai span:not(.ai-glow) { display: none !important; }
  body[class*="new-design"] .search-bar .s-ai svg { width: 18px !important; height: 18px !important; flex: none; }
}

/* заливка новой иконки-искры: правило выше красит svg через stroke */
body[class*="new-design"] .search-bar .s-ai svg { fill: #FFF !important; stroke: none !important; }

/* ============================================================
   2026-08-01 (Ivan: «пагинация вон как выглядит на мобилке»).
   И кнопка «Загрузить ещё», и номера страниц наследуют rem старого шаблона,
   где 1rem привязан к vw — на телефоне кнопка вырастала до 101px высотой
   с кеглем 22px, а номера становились 62×62 и рассыпались на три ряда.
   Задаём фиксированные px в пределах нового дизайна.
   ============================================================ */
@media (max-width: 700px) {
  body[class*="new-design"] .meili-loadmore {
    display: block; width: 100%; height: auto !important;
    padding: 14px 16px !important;
    font-size: 14px !important; line-height: 1.25 !important;
    border-radius: 12px; white-space: nowrap; text-align: center !important;
  }
  /* Стили пагинации приходят ИНЛАЙНОМ вместе с выдачей (meili-list.php), все с !important
     и в rem. Селектор там `.section__pagination .meili-pager .mp-item` = (0,3,0), поэтому
     `body[...] .section__pagination a` (0,2,2) проигрывал по числу классов. Целимся точнее. */
  body[class*="new-design"] .section__pagination { padding: 18px 0 0 !important; }
  body[class*="new-design"] .section__pagination .meili-pager {
    flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important;
  }
  body[class*="new-design"] .section__pagination .meili-pager .mp-item,
  body[class*="new-design"] .section__pagination .meili-pager .mp-current,
  body[class*="new-design"] .section__pagination .meili-pager .mp-arrow,
  body[class*="new-design"] .section__pagination .meili-pager .mp-dots {
    min-width: 38px !important; width: auto !important;
    height: 38px !important; min-height: 38px !important; max-height: 38px !important;
    padding: 0 9px !important; margin: 0 !important;
    font-size: 14px !important; line-height: 1 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 10px !important; box-sizing: border-box !important;
  }
  body[class*="new-design"] .section__pagination .meili-pager .mp-current {
    border-width: 1.5px !important; font-weight: 700 !important;
  }
  body[class*="new-design"] .section__pagination .meili-pager svg { width: 9px !important; height: 14px !important; }
  body[class*="new-design"] .section__pagination .meili-pager .mp-jump { margin: 6px 0 0 !important; padding-left: 0 !important; border-left: 0 !important; width: 100% !important; justify-content: center !important; gap: 6px !important; }
  body[class*="new-design"] .section__pagination .meili-pager .mp-jump-input,
  body[class*="new-design"] .section__pagination .meili-pager .mp-jump-go { height: 38px !important; min-height: 38px !important; border-radius: 10px !important; font-size: 14px !important; }
  body[class*="new-design"] .section__pagination .meili-pager .mp-jump-input { width: 56px !important; }
  body[class*="new-design"] .section__pagination .meili-pager .mp-jump-label,
  body[class*="new-design"] .section__pagination .meili-pager .mp-jump-total { font-size: 13px !important; }
}

/* 2026-08-01 (Ivan: «отступы очень большие между кнопкой, цифрами и текстом»).
   Складывались из паддингов трёх обёрток: .section__loadmore 28px сверху и снизу,
   .section__pagination 18px сверху, .catalog-element--desc 28px сверху. */
@media (max-width: 700px) {
  body[class*="new-design"] .section__loadmore { padding: 14px 0 10px !important; }
  body[class*="new-design"] .section__pagination { padding-top: 6px !important; }
  body[class*="new-design"] .catalog-element--desc { padding: 14px 28px 4px !important; }
  /* между цифрами и текстом стояло ещё 40px нижнего паддинга самой секции каталога */
  body[class*="new-design"] .catalog-section { padding-bottom: 12px !important; }
}

/* ============================================================
   2026-08-01 (Ivan: «пробелы разные между блоками и соцсети вылезают»).
   1) Пилюли мессенджеров: `min-width: 0` позволял им сжаться уже содержимого —
      подпись «Telegram»/«WhatsApp» вылезала за пилюлю и налезала на соседнюю.
      Теперь минимум по содержимому + перенос: на узком экране 2 + 1.
   2) Отступы правой колонки складывались из gap 24px + margin-top 16px у .hc-stats
      + padding-bottom 20px у .hc-manager — между блоками получалось то 24, то 40px.
      Убираем margin, оставляем один gap.
   ============================================================ */
@media (max-width: 1024px) {
  .hc-mes { flex: 0 1 auto; min-width: max-content; }
  .hc-right { gap: 18px; padding: 24px 24px 26px; }
  .hc-right .hc-stats { margin-top: 0; }
  .hc-right .hc-manager { padding-bottom: 18px; }
  .hc-messengers { margin-top: 0; }
}
@media (max-width: 420px) {
  .hc-mes { padding-left: 10px; padding-right: 12px; font-size: 12.5px; }
  .hc-mes-row { gap: 6px; }
}
/* Попытка сделать 2 колонки гридом откатана: .hc-mes-row остаётся flex (правило
   выше по файлу выигрывает), а min-width:0 возвращал сжатие и обрезку подписей.
   Оставляем перенос флексом: Telegram + WhatsApp в строке, MAX на своей. */

/* 2026-08-01 (Ivan). Сначала правил вёрстку: на мобильном шапка секции складывается
   в колонку, но «5 шагов» и подпись оставались выключкой ВПРАВО и кеглем 28px
   (мобильные правила из new-catalog.css:2155 перебивал легаси new-catalog-after.css:151).
   Затем Ivan: «давай в мобилке уберём про 5 шагов» — прячем блок целиком,
   на телефоне он ничего не добавляет: шаги и так пронумерованы ниже. */
@media (max-width: 700px) {
  body[class*="new-design"] .how-head { gap: 6px; margin-bottom: 18px; }
  body[class*="new-design"] .how-meta { display: none !important; }
}

/* 2026-08-01 (Ivan: «вопрос-ответ странно выглядит в мобилке»).
   `.faq-body` — grid `36px 1fr 28px` (повторяет сетку заголовка: номер / текст / плюс)
   плюс `padding-left: 57px`. На 375px из 277px ширины тексту оставалось 117px —
   отсюда переносы «достав-ка», «Владивосто-ка», «бро-керские» (у абзаца ещё и
   `hyphens: auto`). На мобильном разворачиваем в обычный блок во всю ширину. */
@media (max-width: 700px) {
  body[class*="new-design"] .faq-right .faq-body {
    display: block !important;
    padding: 0 16px 14px !important;
  }
  body[class*="new-design"] .faq-right .faq-body p,
  body[class*="new-design"] .faq-right .faq-body li {
    hyphens: none !important; -webkit-hyphens: none !important;
    max-width: none !important;
  }
  body[class*="new-design"] .faq-right summary { padding: 13px 14px !important; }
}

/* ============================================================
   2026-08-01 (Ivan: «телефон переносится и кнопку не видно текста в ней»).
   1) `.ft-cta-btn` — белый текст на белом фоне: цвет наследовался от
      `.ft-cta { color: #fff }`, а собственное правило кнопки проигрывало.
      Текст был невидим на ВСЕХ страницах с этим подвалом, включая десктоп.
   2) Телефон 22px не помещался в строку на 375px и рвался на две.
   ============================================================ */
body[class*="new-design"] .ft-cta-btn {
  color: var(--accent, #E11D2E) !important;
  background: #fff !important;
  font-weight: 700; white-space: nowrap;
}
body[class*="new-design"] .ft-cta-btn:hover {
  color: #fff !important; background: var(--ink, #0E0E12) !important;
}
body[class*="new-design"] .ft-cta-phone { white-space: nowrap; }
@media (max-width: 700px) {
  body[class*="new-design"] .ft-cta-in { gap: 16px; }
  body[class*="new-design"] .ft-cta-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  body[class*="new-design"] .ft-cta-phone { font-size: 19px !important; }
  body[class*="new-design"] .ft-cta-btn { padding: 11px 16px; font-size: 13px; }
}
@media (max-width: 380px) {
  body[class*="new-design"] .ft-cta-right { flex-direction: column; align-items: stretch; }
  body[class*="new-design"] .ft-cta-btn { text-align: center; }
}

/* 2026-08-01 (Ivan: «кнопка Спросить ИИ прилипает к краю»).
   У строки поиска паддинг был несимметричным (14px слева, 4px справа), плюс
   содержимое переполняло контейнер на 3px — красная кнопка вылезала за скруглённый
   край поля. Выравниваем поля и разрешаем инпуту сжиматься. */
body[class*="new-design"] .search-bar { padding-right: 7px; }
body[class*="new-design"] .search-bar input[type="text"],
body[class*="new-design"] .search-bar #search { min-width: 0; }
@media (max-width: 700px) {
  body[class*="new-design"] .search-bar { padding: 5px 7px 5px 12px; }
}

/* ============================================================
   2026-08-01 (Ivan: «а у нас новая шапка есть? покажи её как вторую шапку
   и я выберу»). ОТВЕТ: отдельной МОБИЛЬНОЙ шапки в новом дизайне нет.
   Ниже 860px `header.header:not(.header-fixed-top)` скрыт целиком, а внутренние
   элементы (главное меню, телефон, CTA) имеют собственные правила скрытия и
   размеры в rem от vw. При принудительном включении получается не альтернатива,
   а россыпь: логотип 59px, телефон 20px, бургер 13px и высота 450px — правила
   старого шаблона перебивают даже !important по всей цепочке.
   Поэтому эксперимент откатан: на мобильном остаётся старая шапка Битрикса,
   а новую мобильную шапку нужно верстать отдельной задачей.
   ============================================================ */

/* ============================================================
   2026-08-03 (Ivan: «в бургер-меню телефон улетает и соцсети все нужно добавить»).
   `.phone` в шапке — круглая иконка 40x40 с `padding: 0`; в выдвижном меню тот же
   класс использовали для строки с номером, и «8 800 505-18-12» не влезал в 40px.
   Даём телефону вид полноценной строки, соцсетям — ряд из пяти иконок.
   ВАЖНО: правила живут в new-catalog.css, а не в new-product.css — бургер общий
   для каталога и карточки, а new-product.css грузится только на карточке.
   ============================================================ */
body[class*="new-design"] .mnav-foot .mnav-phone {
  width: 100% !important; height: auto !important;
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 14px !important; border-radius: 10px !important;
  border: 1px solid var(--line, #ECECF0) !important; background: #FFF !important;
  font-size: 15px !important; font-weight: 700 !important; color: var(--ink, #0E0E12) !important;
  white-space: nowrap;
}
body[class*="new-design"] .mnav-foot .mnav-phone svg { flex: none; }
body[class*="new-design"] .mnav-socials {
  display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
body[class*="new-design"] .mnav-socials .mnav-soc {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 0; gap: 0;
  border: 1px solid var(--line, #ECECF0); border-radius: 10px; background: #FFF;
}
body[class*="new-design"] .mnav-socials .mnav-soc img { display: block; }

/* ============================================================
   2026-08-03 (Ivan: «в фильтре нельзя ввести год выпуска — нажимаю, ничего
   не печатается» + «нет кнопки применить фильтр плавающей»).
   🔑 Обе жалобы — одна причина: у выдвижной панели фильтра `.fpanel` z-index 120,
   и она накрывает собой всё, что должно быть поверх неё:
     • календарь AirDatepicker (z-index 100) и его подложку (99) — поле «Год выпуска»
       readonly, ввод с клавиатуры в нём не предусмотрен, а календарь открывался
       ЗА панелью, поэтому тап выглядел как «ничего не происходит»;
     • плавающую панель с кнопкой «Применить фильтр» `.ff-bar` (z-index 60) —
       она есть и позиционирована fixed, но при открытом фильтре её не видно.
   Поднимаем оба слоя выше 120.
   ============================================================ */
body[class*="new-design"] .air-datepicker { z-index: 200 !important; }
body[class*="new-design"] .air-datepicker-overlay { z-index: 199 !important; }
body[class*="new-design"] .ff-bar { z-index: 130; }

/* ============================================================
   2026-08-03 (Ivan: «плохо выглядит низ фильтра»).
   В нижней панели три кнопки с `white-space: nowrap` и `padding: 13px 22px`:
   «Закрыть фильтр» + «Сбросить все фильтры» + «Применить фильтр N авто».
   Их суммарная ширина на 375px вдвое больше экрана — подписи вылезали
   из своих боксов и наезжали друг на друга.
   Первые две дублируют шапку выдвижной панели (там уже есть «✕» и «Сбросить»),
   поэтому на телефоне прячем их, а «Применить» растягиваем во всю ширину.
   ============================================================ */
/* «80 208авто» без пробела: `.ff-cnt` — flex-контейнер, и пробел между
   <span class="fnum"> и текстовым узлом «авто» схлопывается. Возвращаем зазор. */
body[class*="new-design"] .ff-cnt { gap: 4px; }

@media (max-width: 700px) {
  body[class*="new-design"] .ff-bar #ndFilterClose,
  body[class*="new-design"] .ff-bar #ndFilterReset { display: none !important; }
  body[class*="new-design"] .ff-bar .ff-shell { gap: 0; }
  body[class*="new-design"] .ff-bar #ndFilterApply {
    flex: 1 1 auto; width: 100%;
    justify-content: center; padding: 14px 16px;
  }
}

/* ============================================================
   2026-08-03 (Ivan: «как тупо выглядят выбранные фильтры, они так много места
   занимают»). Блок `.applied-filters` — flex-строка из трёх частей:
   «Фильтры:» (68px) + сами пилюли + «Сбросить всё» (90px). На 375px пилюлям
   оставалось всего **112px**, они сыпались в узкий столбик — блок вырастал
   до 194px ради четырёх коротких пилюль.
   На телефоне: подпись «Фильтры:» убираем (крестики и так говорят, что это),
   пилюли — в одну прокручиваемую строку, «Сбросить всё» прижат справа.

   🔑 Блок рендерится в new-catalog-body.php с ИНЛАЙНОВЫМИ стилями
   (`style="display:flex;...;flex-wrap:wrap;..."`), а инлайн бьёт любое правило
   из таблицы стилей без `!important`. Первая попытка без `!important` выглядела
   как «CSS доехал, но не применился»: правило есть в каскаде, медиа совпадает,
   специфичность выше — а вычисленное значение прежнее.
   ============================================================ */
@media (max-width: 700px) {
  body[class*="new-design"] .applied-filters {
    flex-wrap: nowrap !important; gap: 8px !important;
    padding: 8px 10px !important; align-items: center !important;
  }
  body[class*="new-design"] .applied-filters .af-lbl { display: none !important; }
  body[class*="new-design"] .applied-filters .af-pills {
    flex: 1 1 auto !important; min-width: 0 !important;
    display: flex !important; flex-wrap: nowrap !important; gap: 6px !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  body[class*="new-design"] .applied-filters .af-pills::-webkit-scrollbar { display: none; }
  /* растушёвка справа — видно, что ряд продолжается за «Сбросить всё» */
  body[class*="new-design"] .applied-filters .af-pills {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
  }
  body[class*="new-design"] .applied-filters .af-pills > * { flex: 0 0 auto !important; }
  body[class*="new-design"] .applied-filters .af-pill { font-size: 12.5px !important; }
  body[class*="new-design"] .applied-filters .af-reset-all { flex: 0 0 auto !important; font-size: 12px !important; }
}

/* ============================================================
   2026-08-03 (Ivan: «цвет кузова и салона сделай, мультивыбор кол-во мест тоже»).
   Чипы цвета — с кружком-образцом, как на боевом. Места переехали из <select>
   в такие же чипы, поэтому им нужен компактный инлайновый ряд внутри .field.
   ============================================================ */
.fpanel .fchip-dot {
  display: inline-block; width: 12px; height: 12px; flex: none;
  border-radius: 50%; border: 1px solid transparent; margin-right: 7px;
  box-shadow: inset 0 0 0 1px rgba(14,14,16,.06);
}
.fpanel .fchip-color { display: inline-flex; align-items: center; }
.fpanel .field-wide { grid-column: 1 / -1; }
.fpanel .fgroup-chips-inline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fpanel .fgroup-chips-inline .fchip { min-width: 44px; justify-content: center; }


/* 04.08: правила `body:not(.nd-models-view) #models-view { display:none !important }`
   здесь БЫТЬ НЕ ДОЛЖНО. Оно делало видимость режима полностью зависимой от того,
   что мой JS успел навесить класс: если скрипт не отработал (старый кэш у клиента,
   ошибка выше по файлу), блок моделей оставался скрыт НАВСЕГДА, и режим выглядел
   сломанным. Без него в худшем случае работает инлайновый toggle легаси-модуля —
   то есть поведение деградирует до прежнего, а не в белый экран. */

/* кнопка режима в переключателе вида */
body[class*="new-design"] .viewtog .vt-models { width: auto; padding: 0 12px; gap: 6px; }
body[class*="new-design"] .viewtog .vt-models .vt-models-l { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
@media (max-width: 480px) {
  body[class*="new-design"] .viewtog .vt-models .vt-models-l { display: none; }
  body[class*="new-design"] .viewtog .vt-models { padding: 0; width: 38px; }
}


/* Заглушка режима «По моделям»: список машин прячется сразу по классу на body,
   а карточки моделей приезжают через ~2 с (эндпоинт собирает агрегаты по 80к машин).
   Без неё пользователь эти секунды видит пустоту и SEO-текст — и решает, что режим не работает. */
.nd-models-loading { display: none; }


.nd-models-loading .nd-ml-row {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  background: #FFF; border: 1px solid var(--line, #ECECF0); border-radius: 14px; margin-bottom: 10px;
}
.nd-models-loading .nd-ml-ph { flex: 0 0 112px; height: 76px; border-radius: 10px; }
.nd-models-loading .nd-ml-txt { flex: 1 1 auto; min-width: 0; }
.nd-models-loading .nd-ml-txt b, .nd-models-loading .nd-ml-txt i { display: block; height: 12px; border-radius: 6px; }
.nd-models-loading .nd-ml-txt b { width: 46%; margin-bottom: 8px; }
.nd-models-loading .nd-ml-txt i { width: 72%; }
.nd-models-loading .nd-ml-ph,
.nd-models-loading .nd-ml-txt b,
.nd-models-loading .nd-ml-txt i {
  background: linear-gradient(90deg, #F0F0F3 25%, #ececf0 37%, #F0F0F3 63%);
  background-size: 400% 100%; animation: ndMlSk 1.2s ease-in-out infinite;
}
@keyframes ndMlSk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.nd-models-loading .nd-ml-note { padding: 2px 4px 0; font-size: 12.5px; color: var(--muted, #6E6E76); }


/* ==========================================================================
   ND MINI-CATALOG (12.08.2026) — сетка и панель «малых» каталогов
   (/auction/, /bikes/) поверх гибрида. Карточки — та же разметка .card,
   их стили выше не скоуплены; тут только контейнер и мелкая обвязка.
   ========================================================================== */
.nd-mini-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 20px;
  margin: 18px 0 26px;
}
@media (max-width: 1024px) { .nd-mini-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 719px)  { .nd-mini-grid { grid-template-columns: 1fr; } }

/* строка «N найдено · сортировка» */
.nd-mini-fhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 0 4px; }
.nd-mini-fhead .hl-num { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.nd-mini-fhead .hl-lbl { color: #6E6E76; font-size: 13px; }
.nd-mini-sort {
  border: 1px solid #ececf0; border-radius: 10px; background: #fff;
  padding: 8px 12px; font-size: 13px; font-family: inherit; cursor: pointer;
}


.nd-mini-fbtns { display: flex; flex-direction: column; gap: 8px; }
.nd-mini-fbtns .c-btn-pri, .nd-mini-fbtns .c-btn-sec {
  height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; font-size: 13.5px; cursor: pointer; border: none;
}
.nd-mini-fbtns .c-btn-sec { border: 1px solid #ececf0; background: #fff; }

/* пустой результат */
.nd-mini-empty { padding: 46px 20px; text-align: center; color: #6E6E76; font-size: 14px; }
.nd-mini-empty b { color: #0e0e12; }

/* сообщение «ничего не нашли» в дропдауне */
.sd-none { padding: 18px 16px; color: #6E6E76; font-size: 13.5px; }


/* === 12.08.2026, вылизывание (Ivan): точные фиксы мини-каталогов === */
/* Легаси .container на страницах аукциона/байков не центрован под новый дизайн —
   поиск, панель и сетка упирались в край экрана при карточках в контейнере */
/* 12.08 круг 5: контейнер был центрован сам (max-width 1520 + padding), а внутри него
   ещё и .shell со своим padding — ширина верхних блоков получалась на 64px уже, чем
   у кореи. Контейнер раскрываем полностью, а .shell-геометрию даём его прямым детям,
   которые не обёрнуты в .shell: сетке, пагинации, кнопке догрузки. */
body.nd-hybrid.new-design-catalog .catalog-korean .container,
body.nd-hybrid.new-design-catalog .catalog-korean > .container {
  max-width: none !important; width: auto !important;
  margin: 0 !important; padding: 0 !important;
  box-sizing: border-box !important; float: none !important;
}
body.nd-hybrid.new-design-catalog .catalog-korean #ajax-load,
body.nd-hybrid.new-design-catalog .catalog-korean #auction-pagination,
body.nd-hybrid.new-design-catalog .catalog-korean #bikes-pagination,
body.nd-hybrid.new-design-catalog .catalog-korean .section__loadmore,
body.nd-hybrid.new-design-catalog .catalog-korean .fhead,
body.nd-hybrid.new-design-catalog .catalog-korean .fpanel,
body.nd-hybrid.new-design-catalog .catalog-korean .nd-mini-fhead,
body.nd-hybrid.new-design-catalog .catalog-korean .applied-filters {
  max-width: 1520px; margin-left: auto; margin-right: auto;
  /* 12.08: !important — padding перебивало легаси-правило секций, карточки уходили в край */
  padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box;
}
@media (min-width: 1280px) {
  body.nd-hybrid.new-design-catalog .catalog-korean #ajax-load,
  body.nd-hybrid.new-design-catalog .catalog-korean #auction-pagination,
  body.nd-hybrid.new-design-catalog .catalog-korean #bikes-pagination,
  body.nd-hybrid.new-design-catalog .catalog-korean .section__loadmore,
  body.nd-hybrid.new-design-catalog .catalog-korean .fhead,
  body.nd-hybrid.new-design-catalog .catalog-korean .fpanel,
  body.nd-hybrid.new-design-catalog .catalog-korean .nd-mini-fhead,
  body.nd-hybrid.new-design-catalog .catalog-korean .applied-filters {
    padding-left: 32px !important; padding-right: 32px !important;
  }
}
@media (min-width: 1600px) {
  body.nd-hybrid.new-design-catalog .catalog-korean #ajax-load,
  body.nd-hybrid.new-design-catalog .catalog-korean #auction-pagination,
  body.nd-hybrid.new-design-catalog .catalog-korean #bikes-pagination,
  body.nd-hybrid.new-design-catalog .catalog-korean .section__loadmore,
  body.nd-hybrid.new-design-catalog .catalog-korean .fhead,
  body.nd-hybrid.new-design-catalog .catalog-korean .fpanel,
  body.nd-hybrid.new-design-catalog .catalog-korean .nd-mini-fhead,
  body.nd-hybrid.new-design-catalog .catalog-korean .applied-filters {
    padding-left: 40px !important; padding-right: 40px !important;
  }
}


/* крестик очистки поиска не должен быть виден при пустом поле */
#ndMiniClear[hidden], .s-clear[hidden] { display: none !important; }

/* кнопки панели: страховка на случай пустого var(--ink) */
.nd-mini-fbtns .c-btn-pri { background: var(--ink, #0E0E12); color: #fff; }
.nd-mini-fbtns .c-btn-sec { background: #fff; color: var(--ink, #0E0E12); }

/* тулбар: в контейнере, на одной линии с сеткой */
.nd-mini-fhead { margin-top: 18px; }


/* === 12.08.2026, круг 2 (пометки Ivan) === */
/* МАКС-баннер: body[class*=new-design] a {color:inherit} перебивал белый текст баннера */
body[class*="new-design"] .max-bar, body[class*="new-design"] .max-bar:hover,
body[class*="new-design"] .max-bar__text, body[class*="new-design"] .max-bar__cta { color: #fff; }


/* ряд кнопок панели: свой, на всю ширину, вправо */
.nd-mini-fbtns { grid-column: 1 / -1; display: flex; flex-direction: row; justify-content: flex-end; gap: 10px; padding-top: 16px; }
.nd-mini-fbtns .c-btn-pri, .nd-mini-fbtns .c-btn-sec { flex: 0 0 auto; min-width: 180px; }
@media (max-width: 719px) { .nd-mini-fbtns { flex-direction: column; } .nd-mini-fbtns .c-btn-pri, .nd-mini-fbtns .c-btn-sec { width: 100%; } }


/* 13.08.2026: иконка внешней ссылки в главном меню (Авто из Китая) */
.main-nav a .ext-ic{margin-left:2px;opacity:.45;vertical-align:middle}
.main-nav a:hover .ext-ic{opacity:.8}


/* 17.08.2026 (Ivan): логотипы мессенджеров на кнопках модалки. Файлы фирменные и цветные,
   на цветной кнопке читаются плохо — красим в белый фильтром (brightness(0) invert(1)). */
body[class*="new-design"] .ndf-alt-b { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
body[class*="new-design"] .ndf-alt-i { width: 17px; height: 17px; flex: none; }

/* ============================================================
   18.08.2026 (Ivan, мобильная модалка): «можно сократить отступ и упираются в край соцсети».
   1) Между полосой доверия и первым полем зияло 40px — там сидит ПУСТОЙ .error-msg
      (21px + 7px отступа), он занимает место, пока ошибки нет. Прячем, пока пуст:
      как только скрипт положит внутрь текст ошибки, блок снова появится.
   2) Кнопки мессенджеров на 375px шли впритык к краям: сужаем поля формы, уменьшаем зазор
      и шрифт, даём кнопкам внутренние отступы, чтобы текст не касался краёв.
   ============================================================ */
body[class*=new-design] #form-consultation .error-msg:empty,
body[class*=new-design] .form .error-msg:empty { display: none; }

@media (max-width: 560px) {
  body[class*=new-design] .form { padding: 20px 16px 16px; }
  body[class*=new-design] .ndf-trust { margin-bottom: 10px; }
  body[class*=new-design] .ndf-alt-r { gap: 6px; }
  body[class*=new-design] .ndf-alt-b { font-size: 12px; padding: 0 6px; gap: 6px; }
  body[class*=new-design] .ndf-alt-i { width: 15px; height: 15px; }
}


/* ============================================================
   18.08.2026 — мобильная шапка нового дизайна (вариант B, выбор Ivan).
   Ниже 860px раньше показывалась ЛЕГАСИ-шапка Битрикса (.mobile-menu-fixed): три яруса,
   нечитаемый iframe-рейтинг Яндекса, цветные иконки мессенджеров, 136px высоты.
   Свой JS не пишем — переиспользуем рабочие хуки:
     .open-mobile-menu — открывает новую шторку #mnavDrawer;
     .js-open-cities   — обработчик выбора города (main.js вешается на все такие узлы);
     .tb-fav/.tb-fav-n — счётчик избранного заполняется по querySelectorAll;
     .js-callback-jump — кнопка «Подбор» ведёт на форму заявки.
   ============================================================ */
.nd-mhdr { display: none; }

@media (max-width: 860px) {
  /* 07.09.2026 (аудит, п. 7): у мобильной шапки каталога не было ни одного правила
     position — при прокрутке (страница каталога 24 000px) уезжали телефон, город,
     избранное, кнопка «Подбор» и «Меню», вернуться к ним можно было только
     прокруткой в самый верх. Делаем шапку липкой.
     Прилипание работает, потому что .wrapper обрезает по X через overflow-x: clip,
     а не hidden (см. блок «Phase K1 v2» выше, строка ~3494): hidden сделал бы
     .wrapper скролл-контейнером и sticky бы не сработал.
     z-index 55 — ниже выдвижной панели фильтра (120), плавающей кнопки «Применить»
     (130), шторки меню (100) и списка городов (60), но выше содержимого карточек. */
  body[class*="new-design"] .nd-mhdr,
  body.nd-hybrid .nd-mhdr { display: block; background: #FFF; border-bottom: 1px solid var(--line, #E4E4DE); }
  /* Липкой делаем везде, КРОМЕ карточки авто: там свой липкий ряд разделов
     «01 Характеристики … 07 Вопросы» (.pd-tabs, position: sticky, top: 0, z-index 5),
     и он ушёл бы под шапку. Карточку правит отдельная задача (находки 1 и 3). */
  body[class*="new-design"]:not(.new-design-product) .nd-mhdr,
  body.nd-hybrid .nd-mhdr {
    position: sticky; top: 0; z-index: 55;
  }
  /* Высота липкой шапки (34px тёмная строка + 57px белая). Нужна другим липким
     элементам, чтобы они прилипали ПОД ней, а не под ней прятались.
     Меняете высоту шапки — правьте это значение. */
  html { --nd-mhdr-h: 91px; }
  body[class*="new-design"] .mobile-menu-fixed,
  body.nd-hybrid .mobile-menu-fixed { display: none !important; }

  /* тонкая тёмная строка: город, избранное, телефон */
  .nd-mhdr-top {
    display: flex; align-items: center; gap: 10px;
    height: 34px; padding: 0 14px;
    background: var(--ink, #0E0E12); color: #FFF;
    font-size: 12px;
  }
  .nd-mh-sp { flex: 1; }
  .nd-mh-city {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: #FFF; font-family: inherit; font-size: 12px; font-weight: 600; white-space: nowrap;
  }
  .nd-mh-city svg { opacity: .7; flex: none; }
  .nd-mh-fav { display: inline-flex; align-items: center; gap: 4px; color: #FFF; text-decoration: none; opacity: .85; }
  .nd-mh-fav .tb-fav-n:empty { display: none; }
  .nd-mh-fav .tb-fav-n { font-size: 12px; font-weight: 700; }
  /* 11.09.2026: лупа слева от избранного. Полоса тёмная, поэтому цвет белый, как у соседей. */
  .nd-mh-search {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: 0; background: transparent; color: #FFF; opacity: .85;
    line-height: 0; cursor: pointer;
  }
  .nd-mh-tel { color: #FFF; text-decoration: none; font-size: 12px; font-weight: 700; white-space: nowrap; letter-spacing: -.01em; }

  /* белая строка: логотип, рейтинг, кнопка заявки, бургер */
  .nd-mhdr-row { display: flex; align-items: center; gap: 9px; padding: 9px 14px; }
  .nd-mh-logo { line-height: 0; flex: none; }
  .nd-mh-logo img { height: 30px; width: auto; display: block; }
  .nd-mh-rate {
    display: inline-flex; align-items: baseline; gap: 4px; flex: none;
    color: var(--ink, #0E0E12); text-decoration: none;
    font-size: 12.5px; font-weight: 700; white-space: nowrap;
  }
  .nd-mh-star { color: #F5A623; }
  .nd-mh-rate-n { color: #6E6E76; font-weight: 500; }
  .nd-mh-cta {
    display: inline-flex; align-items: center; flex: none;
    height: 36px; padding: 0 14px; border-radius: 11px;
    background: var(--accent, #E11D2E); color: #FFF !important;
    font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
  }
  .nd-mh-ic {
    width: 38px; height: 38px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 11px; background: #f0f0f3; color: var(--ink, #0E0E12);
    cursor: pointer; padding: 0;
  }
  /* 18.08 (Ivan, вариант 4): кнопка меню с подписью — иконка + слово */
  .nd-mh-burger { width: auto; gap: 7px; padding: 0 11px; }
  .nd-mh-burger-t { font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: -.01em; }
}
/* 18.08.2026 (Ivan): на тёмной строке избранное сливалось (красное сердце на чёрном),
   а рейтинг прятался на узких экранах — он нужен всегда. Сердце и счётчик белые;
   рейтинг остаётся, на самых узких ужимается до «★ 5.0». */
@media (max-width: 860px) {
  .nd-mhdr-top .nd-mh-fav,
  .nd-mhdr-top .nd-mh-search,
  .nd-mhdr-top .nd-mh-fav svg,
  .nd-mhdr-top .nd-mh-search svg,
  .nd-mhdr-top .nd-mh-fav .tb-fav-n { color: #FFF !important; stroke: currentColor; opacity: 1; }
  .nd-mhdr-top .nd-mh-fav svg { fill: none; }
  .nd-mhdr-top .nd-mh-fav.has svg { fill: #FFF; }
  .nd-mhdr-top .nd-mh-fav .tb-fav-n { font-weight: 700; }
  /* место под рейтинг: логотип и кнопка чуть компактнее */
  /* 18.08 (Ivan): логотип крупнее, рейтинг ровно между логотипом и кнопкой */
  .nd-mhdr-row { gap: 8px; }
  .nd-mh-logo img { height: 34px; }
  .nd-mh-cta { height: 34px; padding: 0 12px; font-size: 12px; }
  .nd-mh-rate { flex: 1; justify-content: center; font-size: 12px; gap: 3px; }
}
@media (max-width: 360px) {
  .nd-mh-rate-n { display: none; }   /* только на совсем узких остаётся «★ 5.0» */
}

/* ============================================================
   18.08.2026 (Ivan: «пилюля Проходные выступает сильно влево… отступы сократить
   и сделать как на стр каталога»). У .chips-scroll стоял приём «вылет за сетку»
   (margin -16px / padding 16px) — из-за него первый чип начинался на 8px, а весь
   контент на 24px. Слева выравниваем по сетке, справа вылет оставляем — так ряд
   честно «уезжает» под край экрана и видно, что он листается.
   ============================================================ */
@media (max-width: 860px) {
  .chips-row .chips-scroll,
  .brands-row .brands-track {
    margin-left: 0;
    padding-left: 0;
    margin-right: -24px;
    padding-right: 24px;
  }
  /* вертикальный ритм фильтра на главной — как в каталоге */
  body.new-design-home .h2-filter { padding-top: 18px; padding-bottom: 6px; }
  body.new-design-home .h2k-chips .chips-row { margin-bottom: 12px; }
  body.new-design-home .h2k-chips .brands-row { margin-bottom: 6px; }
}


/* 18.08.2026: легаси-стили `.open-mobile-menu` (боевой шаблон грузится позже) сбрасывали
   у кнопки меню фон и внутренние отступы — плашка пропадала, оставались иконка и текст.
   Возвращаем усиленным селектором. */
@media (max-width: 860px) {
  .nd-mhdr .nd-mh-burger {
    background: #f0f0f3 !important;
    border-radius: 11px !important;
    padding: 0 11px !important;
    height: 38px !important;
    width: auto !important;
    gap: 7px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 0 !important;
  }
  .nd-mhdr .nd-mh-burger:active { background: #ececf0 !important; }
}


/* 18.08.2026 (Ivan): «у кнопки в наличии мигающий зелёный значок, как на ПК».
   На десктопе это .nav-dot — зелёная точка со свечением; в шторке добавляем ту же точку
   и мягкую пульсацию (та же кривая, что у .fab-dot). */
.mnav-nav .nav-dot {
  width: 7px; height: 7px; border-radius: 999px; flex: none;
  background: var(--success, #22C55E);
  box-shadow: 0 0 6px var(--success, #22C55E);
  animation: pulse2 2s infinite var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .mnav-nav .nav-dot { animation: none; }
}

/* 18.08.2026: у логотипа в шторке стоит `.mnav-head .logo-img { height:61px !important }`
   (правило для ПК-вида шторки) — оно перебивало мобильные 26px, и шапка меню оставалась
   82px высотой. Перебиваем тем же весом. */
@media (max-width: 860px) {
  .mnav-head .logo-img { height: 26px !important; width: auto !important; }
}


body.nd-hybrid .ndfaq-msg {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 36px; border-radius: 10px; color: #FFF; font-size: 12px; font-weight: 700; text-decoration: none;
}


/* ============================================================
   20.08.2026 (Ivan: «шрифт не наш тут»).
   В блоке вопросов заголовок был набран Unbounded, номер — JetBrains Mono.
   Ни один из этих шрифтов на сайте не подключён (в шапке грузится только Montserrat),
   поэтому браузер подставлял системные — отсюда чужой вид цифр и вопросов.
   Возвращаем фирменный Montserrat. Размеры и вес подобраны так, чтобы вопрос остался
   заметнее ответа, а номер — спокойным.
   ============================================================ */
body[class*="new-design"] .faq-q,
body.nd-hybrid .faq-q,
body[class*="new-design"] .faq-left .sec-h2,
body.nd-hybrid .faq-left .sec-h2 {
  font-family: Montserrat, sans-serif;
}
body[class*="new-design"] .faq-num,
body.nd-hybrid .faq-num {
  font-family: Montserrat, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
body.nd-hybrid .ndfaq-list .faq-q { font-size: 17px; font-weight: 700; }
@media (max-width: 700px) {
  body.nd-hybrid .ndfaq-list .faq-q { font-size: 15.5px; }
  body[class*="new-design"] .faq-num, body.nd-hybrid .faq-num { font-size: 12px; }
}
/* каталог задаёт номер вопроса отдельным, более сильным правилом — перекрываем и его */
body[class*="new-design"] .faq-right .faq-num,
body.nd-hybrid .faq-right .faq-num,
body[class*="new-design"] .h2b-faq .faq-num,
body.nd-hybrid .h2b-faq .faq-num {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}


/* фон: страница целиком на белом, секции разделяем линией */
body.nd-hybrid .ndcalc,
body.nd-hybrid .ndcalc-how,
body.nd-hybrid .how-section,
body.nd-hybrid .ndcalc-hl { background: #FFF !important; box-shadow: none !important; }


/* 21.08.2026: заголовок мини-шапки задан как одна строка без переноса (white-space: nowrap),
   поэтому под длинные названия его ужали до 30px на ПК и 18px на телефоне — на телефоне
   это уже нечитаемо мелко. Разрешаем перенос и поднимаем размер до 22px: короткие заголовки
   по-прежнему в одну строку, длинные аккуратно переносятся. ПК не трогаем — там 30px читаются. */
@media (max-width: 700px) {
  body.nd-hybrid .hero-row .h1,
  body[class*="new-design"] .hero-row .h1 {
    font-size: 22px !important;
    line-height: 1.15;
    white-space: normal;
  }
}

/* ============================================================
   21.08.2026 (Ivan: «серый фон, тени убери»).
   Источники серого и вуали на страницах нового дизайна:
     • section.hero (мини-шапка с крошками и заголовком) — заливка #f7f7f9 плюс
       внутренняя тень inset 0 10px 20px -7px;
     • section.ndcalc-seo и другие секции старой разметки — то же сочетание;
     • панели формы и результата — тяжёлая тень 0 10px 28px.
   Везде переводим на белое, вместо теней — лёгкая рамка. Тени всплывающих окон
   (выбор города, отзывы, телефоны, модальные) НЕ трогаем: там тень нужна,
   чтобы окно отделялось от страницы.
   ============================================================ */
body.nd-hybrid section.hero,
body[class*="new-design"] section.hero,
body.nd-hybrid .ndcalc-seo,
body.nd-hybrid .ndcalc-how,
body.nd-hybrid .how-section {
  background: #FFF !important;
  box-shadow: none !important;
}


/* ============================================================
   21.08.2026 — детальная страница новости в новом дизайне
   (Ivan: «эту стр приведи в порядок …/news/zapret-na-vvoz-koreyskikh-avto-2026/»).
   Разметку шаблона news.detail не трогаем — переопределяем оформление в скоупе nd-hybrid:
     • шапка статьи: сплошное затемнение фото на 66% -> градиент снизу, фото видно;
       заголовок был 25px/400 -> 40px/800, прижат к низу, выровнен по сетке (32px, как крошки);
     • колонка текста: белая карточка с тенью 0 7px 35px -> без тени; текст 14px -> 16.5px;
     • иерархия заголовков была перевёрнута (h2 21px, h3 24.6px) -> h2 27px, h3 20px;
     • «Популярные новости»: заголовок 50px по центру -> 27px слева; карточки с текстом
       поверх затемнённого фото -> белые карточки с обложкой, как в списке /news/.
   ============================================================ */

/* ---- шапка статьи ---- */
body.nd-hybrid .news-detail-custom .img-container {
  min-height: 440px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body.nd-hybrid .news-detail-custom .img-cover {
  background: linear-gradient(180deg, rgba(10, 10, 14, .10) 0%, rgba(10, 10, 14, .42) 42%, rgba(10, 10, 14, .88) 100%) !important;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
}


body.nd-hybrid .news-detail-custom .name-detail-news {
  font-family: 'Montserrat', sans-serif;
  font-size: 40px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #FFF;
  padding: 0 !important;
  margin: 0 0 12px;
  max-width: 1000px;
}
body.nd-hybrid .news-detail-custom .preview-detail-txt {
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .86);
  padding: 0 !important;
  max-width: 840px;
}


/* ---- колонка текста ---- */
body.nd-hybrid .news-detail-custom .page__box--center {
  box-shadow: none !important;
  background: transparent;
  max-width: 880px;
  margin: 24px 0 56px !important;
  padding: 0 !important;
}
body.nd-hybrid .news-detail-custom .content-news {
  padding: 0 !important;
  background: transparent;
  font-size: 16.5px;
  line-height: 1.72;
  color: #1e1e24;
}
body.nd-hybrid .content-news p {
  font-size: 16.5px;
  line-height: 1.72;
  margin: 0 0 16px;
}
body.nd-hybrid .content-news h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: #0E0E12;
  margin: 36px 0 12px;
}
body.nd-hybrid .content-news h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.32;
  color: #0E0E12;
  margin: 26px 0 10px;
}


body.nd-hybrid .popular-news__header {
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #0E0E12;
  margin: 30px 0 18px;
}
body.nd-hybrid .popular-news-item {
  background: #FFF;
  border: 1px solid #ececf0;
  border-radius: 16px;
  overflow: hidden;
  height: auto;
  margin-bottom: 0;
  transition: border-color .18s ease;
}

body.nd-hybrid .popular-news-item__img {
  padding: 0 !important;
  height: 178px;
  position: relative;
  background: #f0f0f3;
}


/* ---- телефон ---- */
@media (max-width: 700px) {
  body.nd-hybrid .news-detail-custom .img-container,
  body.nd-hybrid .news-detail-custom .img-cover { min-height: 330px; }
  body.nd-hybrid .news-detail-custom .name-detail-news { font-size: 25px; }
  body.nd-hybrid .news-detail-custom .preview-detail-txt { font-size: 14px; }
  body.nd-hybrid .news-detail-custom .page__box--center { margin: 18px 0 40px !important; }
  body.nd-hybrid .news-detail-custom .content-news,
  body.nd-hybrid .content-news p { font-size: 15.5px; line-height: 1.68; }
  body.nd-hybrid .content-news h2 { font-size: 21px; margin: 26px 0 10px; }
  body.nd-hybrid .content-news h3 { font-size: 17.5px; margin: 20px 0 8px; }
  body.nd-hybrid .popular-news__header { font-size: 21px; margin: 22px 0 14px; }
  body.nd-hybrid .popular-news-item { margin-bottom: 14px; }
  body.nd-hybrid .popular-news-item__img { height: 190px; }
}


/* ============================================================
   21.08.2026 (Ivan: «проверь чтобы на всех внутренних страницах были хлебные крошки
   и выглядели они одинаково; главная — иконка домика»).
   До правки на сайте жили ТРИ разных вида крошек:
     1) .crumbs внутри hero нового дизайна — 12px, домик рисунком SVG (эталон);
     2) .breadcrumb-inner (ShowNavChain «korean-car») — 10.5px, домик картинкой;
     3) bitrix:breadcrumb шаблон «breadcrumb» — «главная — доставка» строчными, без домика.
   Плюс на 12 страницах крошек не было вовсе.
   Здесь приводим все три к одному виду; общий блок для страниц без крошек —
   includes/nd-crumbs.php.
   ============================================================ */

/* ---- общий блок для страниц, где крошек не было ---- */
.nd-crumbs { padding: 14px 0 6px; }
.nd-crumbs .ndbc-shell {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.4;
}
@media (min-width: 1280px) { .nd-crumbs .ndbc-shell { padding: 0 32px; } }
@media (min-width: 1600px) { .nd-crumbs .ndbc-shell { padding: 0 40px; } }
.nd-crumbs a { color: #6E6E76; text-decoration: none; }
.nd-crumbs a:hover { color: #0E0E12; }
.nd-crumbs .ndbc-home { display: inline-flex; align-items: center; color: #6E6E76; }
.nd-crumbs .ndbc-sep { color: #C9C9C4; }
.nd-crumbs .ndbc-cur { color: #0E0E12; font-weight: 600; }

/* ---- эталон нового дизайна (.crumbs в hero) — тот же размер и цвета ---- */
.crumbs {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  gap: 8px;
  flex-wrap: wrap;
  color: #6E6E76;
}
.crumbs a { color: #6E6E76; text-decoration: none; }
.crumbs a:hover { color: #0E0E12; }
.crumbs .sep { color: #C9C9C4; }
.crumbs .cur { color: #0E0E12; font-weight: 600; }

/* ---- старые крошки ShowNavChain («korean-car») ---- */
body.nd-hybrid .breadcrumb-inner,
body[class*="new-design"] .breadcrumb-inner {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #6E6E76;
}
body.nd-hybrid .breadcrumb__container--inner,
body[class*="new-design"] .breadcrumb__container--inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #C9C9C4;
}
body.nd-hybrid .breadcrumb__item,
body[class*="new-design"] .breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #C9C9C4;
}
body.nd-hybrid .breadcrumb__link,
body[class*="new-design"] .breadcrumb__link { color: #6E6E76; text-decoration: none; }
body.nd-hybrid .breadcrumb__link:hover,
body[class*="new-design"] .breadcrumb__link:hover { color: #0E0E12; }
body.nd-hybrid .breadcrumb__link .breadcrumb__text,
body[class*="new-design"] .breadcrumb__link .breadcrumb__text { color: #6E6E76; font-weight: 400; }
/* последний пункт (без ссылки) — тёмный и жирнее, как в новом дизайне */
body.nd-hybrid .breadcrumb__item > .breadcrumb__text,
body[class*="new-design"] .breadcrumb__item > .breadcrumb__text { color: #0E0E12; font-weight: 600; }
body.nd-hybrid .breadcrumb-inner img,
body[class*="new-design"] .breadcrumb-inner img {
  width: 14px;
  height: 14px;
  display: block;
  opacity: .75;
}
body.nd-hybrid .breadcrumb-inner a:hover img,
body[class*="new-design"] .breadcrumb-inner a:hover img { opacity: 1; }


/* ---- старый компонент bitrix:breadcrumb («главная — доставка») ---- */
body.nd-hybrid .breadcrumb,
body[class*="new-design"] .breadcrumb {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  padding: 14px 0 6px;
}
body.nd-hybrid .breadcrumb .breadcrumb__container,
body[class*="new-design"] .breadcrumb .breadcrumb__container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
body.nd-hybrid .breadcrumb .breadcrumb__text,
body[class*="new-design"] .breadcrumb .breadcrumb__text { text-transform: none; }

@media (max-width: 700px) {
  .nd-crumbs { padding: 10px 0 4px; }
  .nd-crumbs .ndbc-shell { padding: 0 24px; font-size: 12px; gap: 6px; }
  .crumbs { font-size: 12px; }
  body.nd-hybrid .breadcrumb-inner,
  body[class*="new-design"] .breadcrumb-inner,
  body.nd-hybrid .breadcrumb__item,
  body[class*="new-design"] .breadcrumb__item { font-size: 12px; }
}

/* 21.08.2026 — часть страниц выводит крошки без внутреннего .container (шаблон korean-car
   рисует только .breadcrumb-inner), из-за чего строка прилипала к левому краю окна:
   /delivery/, /cities/, /faq/usa/, /china/collections/. Даём такой строке общую сетку. */
body.nd-hybrid .bread-navigation > .breadcrumb-inner,
body[class*="new-design"] .bread-navigation > .breadcrumb-inner {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
@media (min-width: 1280px) {
  body.nd-hybrid .bread-navigation > .breadcrumb-inner,
  body[class*="new-design"] .bread-navigation > .breadcrumb-inner { padding: 0 32px; }
}
@media (min-width: 1600px) {
  body.nd-hybrid .bread-navigation > .breadcrumb-inner,
  body[class*="new-design"] .bread-navigation > .breadcrumb-inner { padding: 0 40px; }
}
@media (max-width: 700px) {
  body.nd-hybrid .bread-navigation > .breadcrumb-inner,
  body[class*="new-design"] .bread-navigation > .breadcrumb-inner { padding: 0 24px; }
}

/* карточка авто: крошки были 12px против 13px на остальных страницах */
body[class*="new-design"] .pd-crumbs,
.pd-crumbs {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  gap: 8px;
  flex-wrap: wrap;
  color: #6E6E76;
}
.pd-crumbs a { color: #6E6E76; text-decoration: none; }
.pd-crumbs a:hover { color: #0E0E12; }
.pd-crumbs .sep { color: #C9C9C4; }
.pd-crumbs .cur { color: #0E0E12; font-weight: 600; }
.pd-crumbs .home { display: inline-flex; align-items: center; }
@media (max-width: 700px) { .pd-crumbs { font-size: 12px; } }

/* 21.08.2026 — в каталоге цепочка теперь рисуется штатным ShowNavChain внутри .crumbs;
   у .breadcrumb-inner в старых стилях стоит margin:0 auto, из-за чего строка вставала
   по центру hero (уезжала на 673px вместо 32px). Внутри hero — прижимаем влево. */
body .crumbs-chain > .breadcrumb-inner {
  margin: 0;
  max-width: none;
  width: 100%;
  padding: 0;
}

/* 21.08.2026: правило выше перебивалось более сильным селектором старой сетки —
   внутри hero прижимаем цепочку влево принудительно. */
body .crumbs.crumbs-chain > .breadcrumb-inner {
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

/* 21.08.2026: у части новостей в базе нет обложки — плитка «Популярных» показывала
   пустой серый прямоугольник. Под слоем фото кладём светлую заглушку с логотипом:
   есть картинка — её не видно, нет — вместо пустоты аккуратная плашка. */
body.nd-hybrid .popular-news-item__img {
  background-color: #f0f0f3;
  background-image: url(/img/logo.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 96px auto;
}


/* 21.08.2026: на юридических страницах текст стоит узкой колонкой по центру —
   крошки прижимаем к её левому краю, иначе строка висит отдельно у края экрана. */
.nd-crumbs-narrow .ndbc-shell { max-width: 880px; padding-left: 16px; padding-right: 16px; }
@media (min-width: 1280px) { .nd-crumbs-narrow .ndbc-shell { padding-left: 16px; padding-right: 16px; } }
@media (min-width: 1600px) { .nd-crumbs-narrow .ndbc-shell { padding-left: 16px; padding-right: 16px; } }


/* ============================================================
   21.08.2026 (Ivan: «отступ у хлебных крошек слишком маленький, надо сделать как на
   остальных стр и проверь чтобы везде было одинаково»).
   Замер 30 страниц: над строкой крошек было 0 / 12 / 14 / 25 / 32 / 34 / 74 px,
   под ней — 0 / 6 / 7 / 12 / 14 / 16 / 20 / 27 px. Отступы задавались в шести разных
   местах: .breadcrumbs-car-wrapper (14/6 и 24.6/21), .nd-crumbs (14/6), .crumbs внутри
   hero (padding 20/10 + margin 12), .pd-crumbs (20/14), section.hero (12/14 и 14/10),
   и целый ряд страниц без отступов вовсе.
   Стандарт: 20px над строкой крошек и 20px под ней — считаем от самой строки текста,
   поэтому все промежуточные обёртки обнуляем и задаём отступ в одном месте.
   ============================================================ */

/* ---- обнуляем то, что набегало по дороге ---- */
body.nd-hybrid .bread-navigation,
body[class*="new-design"] .bread-navigation,
body.nd-hybrid .breadcrumbs-car--flex,
body[class*="new-design"] .breadcrumbs-car--flex,
body.nd-hybrid .breadcrumbs-car-wrapper > .container,
body[class*="new-design"] .breadcrumbs-car-wrapper > .container {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* ---- один отступ на все три механизма крошек ---- */
body.nd-hybrid .breadcrumbs-car-wrapper,
body[class*="new-design"] .breadcrumbs-car-wrapper {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.nd-crumbs {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
/* страницы, где крошки лежат прямо в .bread-navigation (без обёртки-wrapper):
   /delivery/, /cities/, /catalog/, /faq/usa/ — там отступов не было вовсе */
body.nd-hybrid .bread-navigation:has(> .breadcrumb-inner),
body[class*="new-design"] .bread-navigation:has(> .breadcrumb-inner) {
  padding-top: 20px;
  padding-bottom: 20px;
}
/* крошки внутри hero нового дизайна: отступ сверху даёт сам hero, снизу — margin строки */
body.nd-hybrid section.hero,
body[class*="new-design"] section.hero { padding-top: 20px !important; }
.crumbs,
.pd-crumbs {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 0 20px !important;
}


@media (max-width: 700px) {
  body.nd-hybrid .breadcrumbs-car-wrapper,
  body[class*="new-design"] .breadcrumbs-car-wrapper,
  .nd-crumbs {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  body.nd-hybrid .bread-navigation:has(> .breadcrumb-inner),
  body[class*="new-design"] .bread-navigation:has(> .breadcrumb-inner) {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  body.nd-hybrid section.hero,
  body[class*="new-design"] section.hero { padding-top: 14px !important; }
  .crumbs, .pd-crumbs { margin-bottom: 14px !important; }
}


/* ============================================================
   21.08.2026 (Ivan: «ищи дальше стр с серым фоном и старым дизайном и переделывай их
   под новый лад»). Обход 45 страниц показал источник серого по всему сайту:
   боевое правило `body:not(.page_content) .content > section:nth-child(2n+1)` красит
   КАЖДУЮ нечётную секцию в #f7f7f9 и добавляет внутреннюю тень (класс .section_gray
   в scss/main/_main.scss). До сих пор мы гасили его точечно, страница за страницей —
   теперь снимаем целиком на staging.
   Серых секций было: /kazakhstan/ 7 (и 6 внутренних теней), /china/ 4, /catalog/ 5,
   /credit/ 6, /about/ 9, /contacts/ 25, /china/mazdacx5/ 8, /forma/ 2, /faq/popular/ 2.
   ============================================================ */

/* ---- секции: белый фон, без вуали ---- */
body.nd-hybrid main.content > section:nth-child(2n+1),
body.nd-hybrid main.content > section:nth-child(2n),
body[class*="new-design"] main.content > section:nth-child(2n+1),
body[class*="new-design"] main.content > section:nth-child(2n),
body.nd-hybrid .section_gray,
body[class*="new-design"] .section_gray,
body.nd-hybrid section.box,
body.nd-hybrid section.brn,
body.nd-hybrid section.page__catalog,
body.nd-hybrid section.catalog,
body.nd-hybrid section.ndf-page,
body.nd-hybrid .bg-style {
  background: #FFF !important;
  box-shadow: none !important;
}


/* 21.08.2026: колонки, которые остались центрированными и уводили заголовок на 300+px
   вправо от крошек: .page__box (на /cities/, /delivery/, страницах подборок)
   и .process-container (на /guarantee/, /faq/china-new/, /faq/usa/).
   Ширину чтения оставляем, прижимаем к левому краю сетки. */
@media (min-width: 1001px) {
  body.nd-hybrid main.content .page__box,
  body.nd-hybrid main.content .process-container {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  body.nd-hybrid .st { padding-left: 32px; padding-right: 32px; }
}


body.nd-hybrid .collection-detail p,
body.nd-hybrid .collection-detail li { font-size: 16.5px; line-height: 1.7; margin-bottom: 12px; }


/* 21.08.2026: на телефоне левый край гулял 16/24/30 — приводим к 24px, как в новом дизайне
   (.shell на мобиле тоже 24). Отдельно /statistic/ (был 30) и крошки узкого режима. */
@media (max-width: 700px) {
  body.nd-hybrid .st { padding-left: 24px; padding-right: 24px; }
  .nd-crumbs-narrow .ndbc-shell { padding-left: 24px; padding-right: 24px; }
  body.nd-hybrid .legal-page { padding-left: 24px; padding-right: 24px; }
  body.nd-hybrid .cr-hero__card,
  body.nd-hybrid .process-container { padding-left: 18px; padding-right: 18px; }
}


/* ============================================================
   21.08.2026 (Ivan: «тень же есть еще, проверяй все заново чтобы было без теней»).
   Обход 45 страниц: тени нашлись на 32 из них — 40 разных элементов. Самые заметные:
   колонка контента на /cities/ (0 7px 35px), карточки на /credit/ (0 14px 42px ×6),
   строка поиска и панель фильтра в каталоге, карточки форм, таблица гибридов, кнопки.
   Снимаем тени во всём содержимом страницы. Оставляем только тем элементам, которые
   ВИСЯТ НАД страницей (всплывающие окна, подсказки, выпадающие списки) — там тень
   отделяет их от фона и нужна по делу.
   ============================================================ */
body.nd-hybrid main.content :where(div, section, article, aside, form, details, summary,
  img, picture, a, button, input, select, textarea, table, ul, ol, li, nav, label, span, h1, h2, h3, p),
body[class*="new-design"] main.content :where(div, section, article, aside, form, details, summary,
  img, picture, a, button, input, select, textarea, table, ul, ol, li, nav, label, span, h1, h2, h3, p),
body.nd-hybrid main.content,
body[class*="new-design"] main.content {
  box-shadow: none !important;
}

/* ---- исключения: то, что всплывает поверх страницы ---- */
body.nd-hybrid .city-pop,
body.nd-hybrid .rv-pop,
body.nd-hybrid .ph-pop,
body.nd-hybrid .modal-content,
body.nd-hybrid .pdc-tip,
body.nd-hybrid [role="dialog"],
body[class*="new-design"] .city-pop,
body[class*="new-design"] .rv-pop,
body[class*="new-design"] .ph-pop,
body[class*="new-design"] .modal-content,
body[class*="new-design"] .pdc-tip,
body[class*="new-design"] [role="dialog"] {
  box-shadow: 0 14px 38px rgba(14, 14, 18, .16) !important;
}


/* 21.08.2026: кнопка «Заказать звонок» в нижней полосе держала плотную подложку
   `0 2px 0` — формально тоже тень. Делаем плоской, как остальные кнопки. */
body.nd-hybrid .js-callback-jump,
body[class*="new-design"] .js-callback-jump { box-shadow: none !important; }


body.nd-hybrid .ndkz-hero .shell,
body.nd-hybrid .ndkz-stock .shell,
body.nd-hybrid .ndkz-why .shell,
body.nd-hybrid .ndkz-take .shell {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
@media (min-width: 1280px) {
  body.nd-hybrid .ndkz-hero .shell, body.nd-hybrid .ndkz-stock .shell,
  body.nd-hybrid .ndkz-why .shell, body.nd-hybrid .ndkz-take .shell { padding: 0 32px; }
}
@media (min-width: 1600px) {
  body.nd-hybrid .ndkz-hero .shell, body.nd-hybrid .ndkz-stock .shell,
  body.nd-hybrid .ndkz-why .shell, body.nd-hybrid .ndkz-take .shell { padding: 0 40px; }
}


body.nd-hybrid .ndkz-h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 52px;
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #0E0E12;
  margin: 0 0 18px;
}
body.nd-hybrid .ndkz-h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -.025em;
  color: #0E0E12;
  margin: 0 0 12px;
}
body.nd-hybrid .ndkz-lead { font-size: 17px; line-height: 1.6; color: #3d3d48; margin: 0 0 24px; max-width: 620px; }


/* ---- шапка ---- */
body.nd-hybrid .ndkz-hero { padding: 8px 0 44px; }
body.nd-hybrid .ndkz-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}


body.nd-hybrid .ndkz-hero-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
body.nd-hybrid .ndkz-fact {
  border: 1px solid #ececf0;
  border-radius: 18px;
  padding: 20px;
  background: #FFF;
}
body.nd-hybrid .ndkz-fact-n {
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #0E0E12;
  line-height: 1.1;
  margin-bottom: 6px;
}


/* ---- склад ---- */
body.nd-hybrid .ndkz-stock { padding: 44px 0; border-top: 1px solid #ececf0; }


body.nd-hybrid .ndkz-cars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}


/* ---- преимущества ---- */
body.nd-hybrid .ndkz-why { padding: 44px 0; border-top: 1px solid #ececf0; }
body.nd-hybrid .ndkz-why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}


/* ---- что берём на себя ---- */
body.nd-hybrid .ndkz-take { padding: 44px 0 8px; border-top: 1px solid #ececf0; }
body.nd-hybrid .ndkz-take-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: start;
}


/* ---- планшет и телефон ---- */
@media (max-width: 1200px) {
  body.nd-hybrid .ndkz-cars,
  body.nd-hybrid .ndkz-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.nd-hybrid .ndkz-hero-grid,
  body.nd-hybrid .ndkz-take-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  body.nd-hybrid .ndkz-h1 { font-size: 42px; }
}
@media (max-width: 700px) {
  body.nd-hybrid .ndkz-hero .shell,
  body.nd-hybrid .ndkz-stock .shell,
  body.nd-hybrid .ndkz-why .shell,
  body.nd-hybrid .ndkz-take .shell { padding: 0 24px; }
  body.nd-hybrid .ndkz-hero { padding: 4px 0 32px; }
  body.nd-hybrid .ndkz-stock,
  body.nd-hybrid .ndkz-why,
  body.nd-hybrid .ndkz-take { padding: 32px 0; }
  body.nd-hybrid .ndkz-h1 { font-size: 30px; }
  body.nd-hybrid .ndkz-h2 { font-size: 23px; }
  body.nd-hybrid .ndkz-lead { font-size: 15.5px; }
  body.nd-hybrid .ndkz-cta { flex-direction: column; }
  body.nd-hybrid .ndkz-btn { width: 100%; }
  body.nd-hybrid .ndkz-cars { grid-template-columns: minmax(0, 1fr); }
  body.nd-hybrid .ndkz-why-grid { grid-template-columns: minmax(0, 1fr); }
  body.nd-hybrid .ndkz-hero-facts { gap: 10px; }
  body.nd-hybrid .ndkz-fact { padding: 16px; }
  body.nd-hybrid .ndkz-fact-n { font-size: 24px; }
  body.nd-hybrid .ndkz-head-link { width: 100%; justify-content: center; }
}


/* 21.08.2026: плашка «Найдено N авто» в строке управления каталогом. */
body[class*="new-design"] .nd-found,
body.nd-hybrid .nd-found {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: #f0f0f3;
  font-size: 13.5px;
  color: #3d3d48;
  white-space: nowrap;
}
body[class*="new-design"] .nd-found b,
body.nd-hybrid .nd-found b { color: #0E0E12; font-weight: 800; font-variant-numeric: tabular-nums; }
body[class*="new-design"] .nd-found[hidden],
body.nd-hybrid .nd-found[hidden] { display: none; }
@media (max-width: 700px) {
  body[class*="new-design"] .nd-found,
  body.nd-hybrid .nd-found { height: 34px; padding: 0 11px; font-size: 12.5px; }
  /* 21.08.2026: слово «авто» на телефоне сначала прятали ради места, но «Найдено 48 877»
     без единицы читается странно — места хватает, возвращаем. */
  body[class*="new-design"] .nd-found .nd-found-w,
  body.nd-hybrid .nd-found .nd-found-w { display: inline; }
}


/* ============================================================
   24.08.2026 — единая типографическая шкала (аудит 39 страниц, Ivan: «делай»).
   Было: заголовки первого уровня в 12 разных сочетаниях размера и веса (25–64px,
   вес 400/700/800), основной текст в девяти размерах (11,25–17px). Самые массовые
   группы — 35px/700 (10 страниц, наследие старой rem-шкалы) и 30px/700 (10 страниц).
   Стало:
     главная и городские лендинги      64 / 800   (телефон 34)
     направления (Казахстан)           52 / 800   (телефон 30)
     контентные и сервисные страницы   40 / 800   (телефон 26)
     каталог и карточка авто           34 / 800   (телефон 24)
   Разбор — wiki/features/nd-audit-typography-2026-08-24.
   ============================================================ */

/* ---- база: любой заголовок первого уровня внутри контента ---- */
body.nd-hybrid main.content h1,
body[class*="new-design"] main.content h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 40px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.025em;
  color: #0E0E12;
}

/* ---- каталог, аукцион, мотоциклы, FAQ, калькулятор: компактная шапка со счётчиком ---- */
body.nd-hybrid .hero-row .h1,
body[class*="new-design"] .hero-row .h1,
body[class*="new-design"] main.content h1.pd-h1 {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.025em;
}

/* ---- главная и городские лендинги ---- */
body[class*="new-design-home"] main.content h1,
body[class*="new-design"] main.content h1.hero-h1 {
  font-size: 64px;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.03em;
}

/* ---- посадочная страница направления ---- */
body.nd-hybrid main.content h1.ndkz-h1 {
  font-size: 52px;
  line-height: 1.06;
}

/* ---- страница «Избранное»: заголовок был 44px/400 акцентным шрифтом ---- */
body[class*="new-design"] main.content h1.sec-h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 40px;
  font-weight: 800;
}

/* ---- основной текст: 16px на контентных, 15px в каталоге ---- */
body.nd-hybrid main.content p,
body[class*="new-design"] main.content p { font-size: 16px; line-height: 1.65; }
body[class*="new-design-catalog"] main.content p,
body[class*="new-design-product"] main.content p { font-size: 15px; line-height: 1.6; }
/* блоки со своей выверенной шкалой не трогаем */
body.nd-hybrid .content-news p,
body.nd-hybrid .collection-detail p,
body.nd-hybrid .ndkz-lead,
body.nd-hybrid .legal-page p,
body.nd-hybrid .hero-lead,
body[class*="new-design"] .hero-lead { font-size: inherit; }

/* ---- мелкий текст в основном потоке (аудит: 11,25–12,66px) ---- */
body.nd-hybrid .ab-hero__sub,
body.nd-hybrid .ab-wrap p,
body.nd-hybrid .st-hero-sub,
body.nd-hybrid .rv-card__text,
body[class*="new-design-product"] .pd-desc,
body[class*="new-design-product"] .pd-note { font-size: 15px; line-height: 1.6; }

/* ---- поля ввода: 48px со скруглением 12 (аудит: 10 разных, 16 полей без скругления) ---- */
body.nd-hybrid main.content input[type="text"],
body.nd-hybrid main.content input[type="tel"],
body.nd-hybrid main.content input[type="email"],
body.nd-hybrid main.content input[type="number"],
body.nd-hybrid main.content input[type="search"],
body.nd-hybrid main.content select,
body.nd-hybrid main.content textarea,
body[class*="new-design"] main.content input[type="text"]:not(.s-input):not(#ndcitySearch),
body[class*="new-design"] main.content input[type="tel"],
body[class*="new-design"] main.content input[type="email"],
body[class*="new-design"] main.content select,
body[class*="new-design"] main.content textarea {
  min-height: 48px;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
}
body.nd-hybrid main.content textarea,
body[class*="new-design"] main.content textarea { min-height: 96px; padding-top: 12px; }
/* строка поиска каталога и поиск по городам живут по своим размерам */
body[class*="new-design"] .search-bar input,
body.nd-hybrid .ndcity-search input { min-height: 0; border-radius: 0; }

/* ---- кнопки: 44/12 обычные, 52/14 крупные призывы; чипы-пилюли не трогаем ---- */
body.nd-hybrid main.content .btn,
body.nd-hybrid main.content button[type="submit"],
body.nd-hybrid main.content input[type="submit"],
body[class*="new-design"] main.content button[type="submit"],
body[class*="new-design"] main.content input[type="submit"] {
  min-height: 44px;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

/* ---- акцент в заголовке: PT Serif не подключён и рисовался Georgia ---- */
body.nd-hybrid .ndp-h1 em,
body.nd-hybrid main.content h1 em,
body[class*="new-design"] main.content h1 em {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: inherit !important;
  font-style: normal !important;
}


/* ---- один оттенок подложки под фото (было пять: F0F0F3, F2F3F6, F3F3F1, F5F5F3, F4F4F0) ---- */
body.nd-hybrid .c-img,
body[class*="new-design"] .c-img,
body.nd-hybrid .sc-photo,
body.nd-hybrid .ndn-card-pic,
body.nd-hybrid .popular-news-item__img,
body.nd-hybrid .ndkz-car-photo,
body[class*="new-design"] .pd-main-photo { background-color: #f0f0f3; }

/* ---- телефон ---- */
@media (max-width: 700px) {
  body.nd-hybrid main.content h1,
  body[class*="new-design"] main.content h1 { font-size: 26px; line-height: 1.16; }
  body.nd-hybrid .hero-row .h1,
  body[class*="new-design"] .hero-row .h1,
  body[class*="new-design"] main.content h1.pd-h1 { font-size: 24px; }
  body[class*="new-design-home"] main.content h1,
  body[class*="new-design"] main.content h1.hero-h1 { font-size: 30px; }
  body.nd-hybrid main.content h1.ndkz-h1 { font-size: 30px; }
  body[class*="new-design"] main.content h1.sec-h2 { font-size: 26px; }
  body.nd-hybrid main.content p,
  body[class*="new-design"] main.content p { font-size: 15.5px; }
  body[class*="new-design-catalog"] main.content p,
  body[class*="new-design-product"] main.content p { font-size: 14.5px; }
}

/* 24.08.2026: два хвоста после сведения шкалы.
   1) «Избранное»: заголовок держал акцентный Instrument Serif 400 — правило перебивалось
      более сильным селектором страницы, поэтому задаём явно.
   2) Карточка авто: описание осталось 14,5px — поднимаем до каталожных 15px. */
body[class*="new-design"] main.content h1.sec-h2,
body[class*="new-design"] .fav-head h1 {
  font-family: Montserrat, sans-serif !important;
  font-weight: 800 !important;
  font-style: normal !important;
}
body[class*="new-design-product"] main.content p,
body[class*="new-design-product"] .pd-about p,
body[class*="new-design-product"] .pd-seo p { font-size: 15px !important; line-height: 1.6; }

/* 24.08.2026: хвосты на телефоне после сведения шкалы.
   Шапка каталога держала 22px из более сильного медиа-правила — приводим к 24px,
   как на карточке авто. Заголовок статьи оставался 25px — к общим 26px.
   Подзаголовок на главной и городских лендингах был 14px — к 15,5px, как везде. */
@media (max-width: 700px) {
  body.nd-hybrid .hero-row .h1,
  body[class*="new-design"] .hero-row .h1 { font-size: 24px !important; }
  body.nd-hybrid .news-detail-custom .name-detail-news { font-size: 26px; }
  body[class*="new-design"] .hero-lead,
  body[class*="new-design"] .h2-hero-top p { font-size: 15.5px; }
}
/* лид-абзац главной на телефоне держал 14px из своего медиа-правила */
@media (max-width: 700px) {
  body[class*="new-design"] .h2-hero-top .hero-lead { font-size: 15.5px !important; line-height: 1.55; }
}

/* 24.08.2026 — остатки старых скруглений после сведения шкалы:
   у части кнопок сохранилось 7px и 8px (наследие старого макета), у нескольких полей —
   9-10px и одно поле на карточке авто вовсе без скругления. Приводим к нашим 12px. */
body.nd-hybrid main.content a[class*="btn"],
body.nd-hybrid main.content button[class*="btn"],
body[class*="new-design"] main.content a[class*="btn"]:not([class*="chip"]),
body[class*="new-design"] main.content button[class*="btn"]:not([class*="chip"]) {
  border-radius: 12px;
}
/* пилюли (чипы, переключатели, теги) скругление не теряют */
/* 24.08.2026, поправка: маска [class*="-chip"] задела карточки марок на главной
   (.h2-chip 278x114) — они стали «пилюлями». Перечисляем настоящие чипы поимённо. */
body.nd-hybrid main.content .chip,
body.nd-hybrid main.content .brand-chip,
body.nd-hybrid main.content .bt-chip,
body.nd-hybrid main.content .sd-chip,
body.nd-hybrid main.content .af-pill,
body[class*="new-design"] main.content .chip,
body[class*="new-design"] main.content .brand-chip,
body[class*="new-design"] main.content .bt-chip,
body[class*="new-design"] main.content .sd-chip,
body[class*="new-design"] main.content .af-pill,
body[class*="new-design"] main.content .vt { border-radius: 999px; }
body.nd-hybrid main.content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body[class*="new-design"] main.content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.s-input) {
  border-radius: 12px;
}

/* 24.08.2026 — шкала скруглений вместо сплошного 12px:
   мелкие элементы (до 40px) — 10px, средние (40-48) — 12px, крупные — 14px, чипы — пилюля.
   Здесь дочищаем наследие старой rem-шкалы: 7,03px и 8,44px у вторичных кнопок
   (ссылки на площадки отзывов, мессенджеры, «Показать ещё») и 9px у полей. */
body.nd-hybrid .rv-footer__link,
body.nd-hybrid .rv-show-more,
body.nd-hybrid .ct-social__item,
body.nd-hybrid .ab-social__link,
body.nd-hybrid .ab-video__links a,
body.nd-hybrid .h2b-rv-src,
body[class*="new-design"] .h2b-rv-src,
body.nd-hybrid .hc-mes,
body[class*="new-design"] .hc-mes,
body.nd-hybrid .ndfaq-msg,
body.nd-hybrid .sc-cta { border-radius: 10px; }

body.nd-hybrid main.content select,
body[class*="new-design"] main.content select { border-radius: 12px; }


/* селект сортировки в каталоге: высота 48 -> скругление 12 */
body[class*="new-design"] #ndSortSelect,
body.nd-hybrid #ndSortSelect,
body[class*="new-design"] .sort select,
body.nd-hybrid .sort select { border-radius: 12px; }
/* два последних селекта держали 9-10px из правил вне main.content */
body.nd-hybrid select,
body[class*="new-design"] select { border-radius: 12px; }

/* 24.08.2026: на компьютере принудительный перенос после «под заказ» мешал уложить
   заголовок в две строки — скрываем его, разбивку делает сам браузер. */
@media (min-width: 701px) {
  body[class*="new-design"] h1.hero-h1 br { display: none; }
}

/* 24.08.2026 (Ivan: «популярные марки на главной вон как некрасиво получилось»).
   Логотип стоял отдельной строкой сверху и был прижат влево — при разной пропорции знаков
   (широкий CHEVROLET, круглые кольца Audi) плитки выглядели рвано, а справа зияло пустое
   место. Ставим логотип слева в одну линию с названием: карточка ниже, знаки выровнены. */
body.new-design-home .h2-chip.has-logo,
body[class*="new-design"] .h2-chip.has-logo {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  padding: 14px 16px;
}
body.new-design-home .h2-chip.has-logo .h2-chip-logo,
body[class*="new-design"] .h2-chip.has-logo .h2-chip-logo {
  grid-row: 1 / 3;
  grid-column: 1;
  height: 34px;
  margin: 0;
  justify-content: center;
}
body.new-design-home .h2-chip.has-logo .h2-chip-logo img,
body[class*="new-design"] .h2-chip.has-logo .h2-chip-logo img {
  width: 62px;
  height: 34px;
  object-position: center;
}
body.new-design-home .h2-chip.has-logo .h2-chip-name,
body[class*="new-design"] .h2-chip.has-logo .h2-chip-name { grid-column: 2; align-self: end; }
body.new-design-home .h2-chip.has-logo .h2-chip-cnt,
body[class*="new-design"] .h2-chip.has-logo .h2-chip-cnt { grid-column: 2; align-self: start; }
@media (max-width: 700px) {
  body.new-design-home .h2-chip.has-logo,
  body[class*="new-design"] .h2-chip.has-logo { grid-template-columns: 50px minmax(0, 1fr); column-gap: 10px; padding: 12px 14px; }
  body.new-design-home .h2-chip.has-logo .h2-chip-logo,
  body[class*="new-design"] .h2-chip.has-logo .h2-chip-logo { height: 28px; }
  body.new-design-home .h2-chip.has-logo .h2-chip-logo img,
  body[class*="new-design"] .h2-chip.has-logo .h2-chip-logo img { width: 50px; height: 28px; }
}

/* 24.08.2026 (Ivan: «в моб версии плохо выглядит данный текст ... длинное тире убрал бы»).
   На телефоне хвост «Доставим в <город>» уходит на свою строку, тире не рисуем вовсе,
   а сумма держится одной группой — раньше «₽» отрывался от «500 000». */
@media (max-width: 700px) {
  body[class*="new-design"] h1.hero-h1 #h2CityTail { display: block; }
}

/* 24.08.2026 (Ivan, снимок телефона): в карточке «28.5 млн ₩» знак воны отрывался
   на свою строку. Держим цену в Корее одной группой. */
body[class*="new-design"] .c-price-krw,
body.nd-hybrid .c-price-krw { white-space: nowrap; }

/* 24.08.2026 (Ivan, снимок телефона: «в этих местах можно чуть сократить отступы и сделать
   их одинаковыми»). До правки шаг между блоками карточки гулял: до названия 26px (14 у тела
   + 12 собственного паддинга .c-head — наследство прежней карточки с .c-title/.c-sub),
   от подзаголовка до характеристик 18px (8 + gap 10), дальше 12 и 10. Ставим единый шаг 12px. */
@media (max-width: 700px) {
  .card .c-body { padding: 12px 14px 12px; gap: 12px; }
  .card .c-head { padding: 0; }
  .card .c-price-box { margin-top: 0; }
}


/* 24.08.2026 (Ivan, снимок модалки: «смотри как выпадающая форма выглядит»).
   Между «Введите ваше имя» и «Введите ваш телефон» шла стопка серых полос — это
   13 служебных полей атрибуции (ENC_UTM_*, ENC_YCLID, ENC_YM_*). Сам input у них
   type=hidden и не виден, но Bitrix рисует рядом <span class="form__label"> с кодом поля,
   а .form__group держит отступ 10px — получалось 13 пустых строк с подписями.
   Прячем группу целиком: скрытые поля продолжают отправляться (display:none их не отключает). */
body[class*="new-design"] .form__group:has(> input[type="hidden"]),
body.nd-hybrid .form__group:has(> input[type="hidden"]) { display: none; }
/* запасной путь для браузеров без :has() — служебные поля названы предсказуемо */
body[class*="new-design"] .form__group[class*="ENC_"],
body.nd-hybrid .form__group[class*="ENC_"] { display: none; }

/* 24.08.2026 (Ivan: «пилюлю сортировки нужно сделать размером как смена вида»).
   Селект сортировки был 48px высотой (попал под общее правило полей из аудита 24.08),
   а переключатель вида рядом — 36px с рамкой #ECECF0 и радиусом 10. Приводим к нему. */
@media (max-width: 700px) {
  /* padding у боевого правила .fhead .sort select стоит с !important — перебиваем тем же */
  body[class*="new-design"] .sort select,
  body[class*="new-design"] .fhead .sort select,
  body.nd-hybrid .sort select,
  body.nd-hybrid .fhead .sort select {
    height: 36px !important;
    /* общее правило полей из аудита 24.08 держит min-height: 48px — снимаем его здесь */
    min-height: 36px !important;
    box-sizing: border-box !important;
    padding: 0 30px 0 12px !important;
    border-radius: 10px !important;
    border: 1px solid #ECECF0 !important;
    font-size: 13px;
    line-height: 34px;
    background-position: right 10px center;
  }
  body[class*="new-design"] .sort,
  body.nd-hybrid .sort { align-items: center; }
}


/* 29.08.2026: шапка подборки под фильтром главной («Например, вот эти» + «Показать все»). */
body.new-design-home .h2-preset-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin: 26px 0 14px;
}


/* 29.08.2026 (Ivan, разбор Никиты п.1, вариант 4): акцент в заголовке первого экрана —
   красная плашка вместо тонкого серифного курсива. Никита: «сделать весь текст обычным,
   а „с выгодой от 500 000 ₽“ красным и жирным».
   ВАЖНО: правило намеренно ограничено h1.hero-h1 (главная + городские лендинги).
   На главной ещё 11 таких акцентов в H2 («Авто с площадки Encar», «Что вы ищете?»,
   «Честные отзывы» …) — если плашку раздать всем, страница превращается в набор красных
   прямоугольников, курсивный сериф там остаётся фирменным приёмом. */
body[class*="new-design"] h1.hero-h1 em {
  /* серифный курсив задан правилом с высокой специфичностью в new-home.css — перебиваем */
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  font-weight: 800 !important;
  color: #FFF;
  /* 29.08 (Ivan: «плашка слипается с текстом под ней, сделать её уже»).
     Сплошной background-color рисуется во всю высоту строчного бокса — плашка выходила
     толстой и упиралась в соседнюю строку. Рисуем фон градиентом фиксированной высоты
     (0.92em) и центруем по строке: плашка стала тоньше, воздух между строками появился. */
  background-color: transparent;
  background-image: linear-gradient(var(--accent, #E11D2E), var(--accent, #E11D2E));
  background-repeat: no-repeat;
  background-size: 100% .92em;
  background-position: 0 58%;
  padding: 0 .14em;
  border-radius: 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* плашки на соседних строках слипались: при line-height 1.04 нижний край верхней плашки
   ложился на верхний край нижней. Даём строкам воздух — только когда акцент с подложкой. */
body[class*="new-design"] h1.hero-h1:has(em) { line-height: 1.34; }
@media (max-width: 700px) {
  body[class*="new-design"] h1.hero-h1 em { border-radius: 8px; padding: 0 .14em; }
  body[class*="new-design"] h1.hero-h1:has(em) { line-height: 1.32; }
  /* nowrap не годится: плашка целиком = 388px при экране 390 и вылезала за поля.
     Одинокую «с» в конце строки лечим неразрывным пробелом в самой разметке. */
}

/* ============================================================
   29.08.2026. Правки по разбору Никиты, партия 2.
   ============================================================ */

/* п.25 «Номер шага и заголовок надо делать на одном уровне» + п.24 «данные в блоке гуляют».
   Было: номер 40x40 отдельной строкой сверху, под ним заголовок; метки внизу вставали
   на разной высоте, потому что описания разной длины (замер: 4895 / 4934 / 4956).
   Стало: номер слева в одну линию с заголовком, метки прижаты к низу карточки. */
body[class*="new-design"] .how-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 12px;
  /* stretch, а не start: иначе .how-body не тянется на высоту карточки и прижать метки
     к низу нечем — они снова встают на разной высоте (замер показал 4207 против 4185) */
  align-items: stretch;
}
body[class*="new-design"] .how-n { align-self: start; }
body[class*="new-design"] .how-n {
  width: 34px; height: 34px; margin-bottom: 0;
  font-size: 13px; border-radius: 9px;
}
body[class*="new-design"] .how-item .how-body {
  display: flex; flex-direction: column; height: 100%;
}
body[class*="new-design"] .how-item .how-meta { margin-top: auto; padding-top: 14px; }

/* п.26 «Эти линии плавают» — декоративный пунктир между карточками шагов держался
   на фиксированном top: 38px и после переноса номера влево лёг поперёк заголовков.
   Линия ничего не объясняет, снимаем её. */
body[class*="new-design"] .how-list::before { display: none; }

/* п.10 «На чёрном фоне кнопка добавить в избранное не видна» — сердечко было #0E0E12
   поверх фотографии. Даём белую заливку с мягкой тенью: читается и на светлом, и на тёмном. */
body[class*="new-design"] a.card .c-fav,
body.nd-hybrid a.card .c-fav {
  color: #FFF;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}
body[class*="new-design"] a.card .c-fav.is-on,
body.nd-hybrid a.card .c-fav.is-on { color: var(--accent, #E11D2E); }


/* ============================================================
   29.08.2026. Правки по разбору Никиты, партия 3.
   ============================================================ */

/* п.12 «Кнопки выполнены не очень удачно — у нас приоритет в консультации, стоит сделать её
   акцентной и красного цвета. Сейчас кажется, что кнопки не одного размера».
   Было: «Консультация» — серая на светлой подложке (flex 1), «Подробнее» — чёрная (flex 1.2). */
body[class*="new-design"] a.card .c-cta .c-btn-sec,
body.nd-hybrid a.card .c-cta .c-btn-sec {
  /* !important: базовые .c-btn-sec/.c-btn-pri задают разный flex-grow (1 и 1.2) и в каскаде
     оказываются сильнее — из-за этого кнопки и выглядели разного размера */
  flex: 1 1 0 !important;
  background: var(--accent, #E11D2E);
  color: #FFF;
  font-weight: 700;
}
body[class*="new-design"] a.card .c-cta .c-btn-sec:hover,
body.nd-hybrid a.card .c-cta .c-btn-sec:hover { background: #B8152B; }
body[class*="new-design"] a.card .c-cta .c-btn-sec svg,
body.nd-hybrid a.card .c-cta .c-btn-sec svg { stroke: currentColor; }
body[class*="new-design"] a.card .c-cta .c-btn-pri,
body.nd-hybrid a.card .c-cta .c-btn-pri {
  flex: 1 1 0 !important;
  background: transparent;
  color: var(--ink, #0E0E12);
  border: 1px solid var(--line, #E5E2DB);
}
body[class*="new-design"] a.card .c-cta .c-btn-pri:hover,
body.nd-hybrid a.card .c-cta .c-btn-pri:hover { background: var(--bg, #F7F7F9); color: var(--ink, #0E0E12); }

/* Кнопки всё равно выходили 189 против 219: «Консультация» — <button> с обнулённым паддингом,
   «Подробнее» — <a>, и flex делил остаток по-своему. Гридом две равные колонки — надёжнее. */
body[class*="new-design"] a.card .c-cta,
body.nd-hybrid a.card .c-cta {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
body[class*="new-design"] a.card .c-cta > *,
body.nd-hybrid a.card .c-cta > * { min-width: 0; padding: 11px 10px !important; }

/* п.37 «Жёлтый цвет Корея и Китай — надо убрать и сделать нейтральным» (метки офисов
   в блоке контактов). Приводим к тому же виду, что у меток «представитель». */
body[class*="new-design"] .h2b-off-tag-kr {
  background: #ececf0;
  color: var(--muted, #6E6E76);
}


/* 29.08.2026 (Никита, стр. 29 и 31): баннер-пояснение в шапке разделов /korea/ и /auction/ —
   «непонятно, в чём отличие». */
body[class*="new-design"] .nd-explain,
body.nd-hybrid .nd-explain {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 16px 0 0;
  padding: 14px 18px;
  background: var(--bg, #F7F7F9);
  border-radius: 14px;
}
body[class*="new-design"] .nd-explain-i,
body.nd-hybrid .nd-explain-i {
  width: 44px; height: 44px; border-radius: 12px;
  background: #FFF; color: var(--ink, #0E0E12);
  display: inline-flex; align-items: center; justify-content: center;
}
body[class*="new-design"] .nd-explain-t,
body.nd-hybrid .nd-explain-t { font-size: 15px; font-weight: 700; color: var(--ink, #0E0E12); }
body[class*="new-design"] .nd-explain-d,
body.nd-hybrid .nd-explain-d { font-size: 13.5px; line-height: 1.5; color: var(--muted, #6E6E76); margin-top: 3px; }
body[class*="new-design"] .nd-explain-a,
body.nd-hybrid .nd-explain-a {
  font-size: 13.5px; font-weight: 700; color: var(--ink, #0E0E12);
  white-space: nowrap; text-decoration: none; border-bottom: 1px solid currentColor;
}
@media (max-width: 700px) {
  body[class*="new-design"] .nd-explain,
  body.nd-hybrid .nd-explain { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 12px 14px; }
  body[class*="new-design"] .nd-explain-i,
  body.nd-hybrid .nd-explain-i { width: 36px; height: 36px; border-radius: 10px; }
  body[class*="new-design"] .nd-explain-a,
  body.nd-hybrid .nd-explain-a { grid-column: 2; justify-self: start; }
}

/* ============================================================
   29.08.2026. Блок «Как проходит заказ» — переработан целиком.
   Никита: «блок очень скучно выглядит, данные гуляют, номер шага и заголовок
   надо на одном уровне»; Ivan: «этот блок будут внимательно читать много клиентов,
   нужно максимально убедительно и с ответами на все вопросы».
   Прежние .how-list / .how-item больше не используются (см. includes/nd-home-shared/how.php).
   ============================================================ */
body[class*="new-design"] section.how.ndh,
body.nd-hybrid section.how.ndh { background: #FFF; color: var(--ink, #0E0E12); padding: 44px 0; border-radius: 0; }
body[class*="new-design"] .ndh .sec-sub.ndh-sub { max-width: 660px; text-align: left; margin: 12px 0 0; }

body[class*="new-design"] .ndh-trust { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
body[class*="new-design"] .ndh-tr {
  display: flex; align-items: center; gap: 9px;
  background: var(--bg, #F7F7F9); border-radius: 11px; padding: 10px 14px;
  font-size: 13px; font-weight: 600;
}
body[class*="new-design"] .ndh-tr svg { color: #1E8C4A; flex: none; }

body[class*="new-design"] .ndh-wrap {
  display: grid; grid-template-columns: 1.06fr .94fr; gap: 44px;
  margin-top: 30px; align-items: start;
}
body[class*="new-design"] .ndh-line { position: relative; padding-left: 36px; }
body[class*="new-design"] .ndh-line::before {
  content: ''; position: absolute; left: 11px; top: 10px; bottom: 30px; width: 2px; background: var(--line, #ececf0);
}
body[class*="new-design"] .ndh-fill {
  position: absolute; left: 11px; top: 10px; width: 2px; height: 0;
  background: var(--accent, #E11D2E); transition: height .25s ease;
}
body[class*="new-design"] .ndh-step { position: relative; padding: 0 0 22px; cursor: pointer; }
body[class*="new-design"] .ndh-step:last-child { padding-bottom: 0; }
body[class*="new-design"] .ndh-step::before {
  content: ''; position: absolute; left: -31px; top: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #FFF; border: 2px solid var(--line, #E5E2DB); z-index: 1;
  transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
body[class*="new-design"] .ndh-step.is-done::before { border-color: var(--accent, #E11D2E); background: var(--accent, #E11D2E); }
body[class*="new-design"] .ndh-step.is-on::before {
  border-color: var(--accent, #E11D2E); background: var(--accent, #E11D2E);
  box-shadow: 0 0 0 5px rgba(225, 29, 46, .15);
}
/* 06.09.2026 (Ivan: «текст сливается, проверь все эти стр»). Сплошная проверка контраста
   по 35 страницам нового дизайна: перечисленные ниже подписи не проходили норму читаемости
   (WCAG AA 4.5:1 для мелкого текста). Цвета взяты из той же палитры, вид блоков не меняется. */
/* номера шагов «ШАГ 02…06» были #B9B9C0 — контраст 1.95 на белом, почти не читались */
body[class*="new-design"] .ndh-n { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: #6E6E76; }
body[class*="new-design"] .ndh-step.is-on .ndh-n,
body[class*="new-design"] .ndh-step.is-done .ndh-n { color: var(--accent, #E11D2E); }
body[class*="new-design"] .ndh-t { font-size: 17px; font-weight: 700; margin-top: 2px; }
body[class*="new-design"] .ndh-d { font-size: 13.5px; line-height: 1.55; color: var(--muted, #6E6E76); margin-top: 6px; max-width: 530px; }
body[class*="new-design"] .ndh-get {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 10px;
  background: #f7f7f9; border-radius: 10px; padding: 9px 12px; max-width: 530px;
}
body[class*="new-design"] .ndh-get svg { color: #1E8C4A; flex: none; margin-top: 1px; }
body[class*="new-design"] .ndh-get span { font-size: 13px; line-height: 1.45; color: #14683A; font-weight: 600; }
body[class*="new-design"] .ndh-pay { margin-top: 7px; font-size: 12.5px; color: #6E6E76; }
body[class*="new-design"] .ndh-pay b { font-weight: 700; color: var(--ink, #0E0E12); }
body[class*="new-design"] .ndh-time {
  display: inline-block; margin-top: 9px; font-size: 12px; font-weight: 700;
  color: #6E6E76; background: #f7f7f9; border-radius: 8px; padding: 5px 10px;
  font-variant-numeric: tabular-nums;
}

body[class*="new-design"] .ndh-aside {
  /* шапка липкая и высотой 69px — при top: 20px она накрывала верх панели */
  position: sticky; top: 86px; background: var(--bg, #F7F7F9); border-radius: 20px; padding: 22px;
}
body[class*="new-design"] .ndh-media {
  position: relative; border-radius: 14px; overflow: hidden; background: #ECECF0;
  aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
}
body[class*="new-design"] .ndh-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[class*="new-design"] .ndh-lab {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  background: rgba(14, 14, 18, .78); color: #FFF;
  font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 7px;
}
body[class*="new-design"] .ndh-fact { text-align: center; padding: 0 20px; }
body[class*="new-design"] .ndh-fact b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
body[class*="new-design"] .ndh-fact i { display: block; font-style: normal; font-size: 13px; color: var(--muted, #6E6E76); margin-top: 6px; line-height: 1.4; }
body[class*="new-design"] .ndh-pt { font-size: 16.5px; font-weight: 700; margin-top: 16px; }
body[class*="new-design"] .ndh-list { margin-top: 12px; display: grid; gap: 9px; }
body[class*="new-design"] .ndh-li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.5; color: #3d3d48; }
body[class*="new-design"] .ndh-li svg { color: #1E8C4A; flex: none; margin-top: 3px; }
body[class*="new-design"] .ndh-q { margin-top: 16px; background: #FFF; border-radius: 13px; padding: 14px 16px; }
body[class*="new-design"] .ndh-q b { display: block; font-size: 13.5px; margin-bottom: 5px; }
body[class*="new-design"] .ndh-q span { font-size: 13px; line-height: 1.5; color: var(--muted, #6E6E76); }
body[class*="new-design"] .ndh-btn {
  display: block; margin-top: 14px; background: var(--accent, #E11D2E); color: #FFF;
  text-decoration: none; text-align: center; font-weight: 700; font-size: 14.5px;
  border-radius: 12px; padding: 14px;
}
body[class*="new-design"] .ndh-btn:hover { background: #B8152B; color: #FFF; }
body[class*="new-design"] .ndh-sec { display: block; margin-top: 8px; text-align: center; font-size: 13px; color: #6E6E76; text-decoration: none; }

body[class*="new-design"] .ndh-foot { margin-top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
body[class*="new-design"] .ndh-fi { background: var(--ink, #0E0E12); color: #FFF; border-radius: 14px; padding: 16px 18px; }
body[class*="new-design"] .ndh-fi b { display: block; font-size: 19px; font-weight: 800; }
body[class*="new-design"] .ndh-fi span { font-size: 12px; color: rgba(255, 255, 255, .6); }
body[class*="new-design"] .ndh-fi.is-acc { background: var(--accent, #E11D2E); }
body[class*="new-design"] .ndh-fi.is-acc span { color: rgba(255, 255, 255, .8); }

/* Телефон: панель уезжает под таймлайн, сам таймлайн работает аккордеоном —
   раскрыт только выбранный шаг. Иначе шесть шагов с деталями дают простыню под 2800px. */
@media (max-width: 700px) {
  body[class*="new-design"] section.how.ndh { padding: 30px 0; }
  body[class*="new-design"] .ndh-trust { gap: 8px; }
  body[class*="new-design"] .ndh-tr { font-size: 12.5px; padding: 9px 12px; }
  body[class*="new-design"] .ndh-wrap { grid-template-columns: 1fr; gap: 18px; margin-top: 22px; }
  body[class*="new-design"] .ndh-line { padding-left: 30px; }
  body[class*="new-design"] .ndh-step { padding-bottom: 14px; }
  body[class*="new-design"] .ndh-step .ndh-d,
  body[class*="new-design"] .ndh-step .ndh-get,
  body[class*="new-design"] .ndh-step .ndh-pay { display: none; }
  body[class*="new-design"] .ndh-step.is-on .ndh-d { display: block; }
  body[class*="new-design"] .ndh-step.is-on .ndh-get { display: flex; }
  body[class*="new-design"] .ndh-step.is-on .ndh-pay { display: block; }
  body[class*="new-design"] .ndh-t { font-size: 15.5px; }
  body[class*="new-design"] .ndh-aside { position: static; padding: 16px; }
  body[class*="new-design"] .ndh-media { aspect-ratio: 16 / 11; }
  body[class*="new-design"] .ndh-foot { grid-template-columns: 1fr 1fr; gap: 8px; }
  body[class*="new-design"] .ndh-fi { padding: 13px 14px; }
  body[class*="new-design"] .ndh-fi b { font-size: 16px; }
}


/* 29.08.2026: SEO-текст главной уехал из-под фильтра вниз страницы (Ivan: «отделяет фильтр
   от авто»). Внизу он не мешает и остаётся в индексе. */
body.new-design-home section.h2-seo-tail { padding: 0 0 26px; }
body.new-design-home section.h2-seo-tail .h2-filter-text {
  margin: 0; max-width: 900px; font-size: 13.5px; line-height: 1.6; color: var(--muted, #6E6E76);
}

/* 29.08.2026 (Никита, стр. 10: «лучше использовать значок марки вместо подобной заглушки»).
   В ряду «Марка:» вместо круглой буквы — знак марки. У логотипов разная пропорция
   (широкий CHEVROLET, круглые кольца Audi), поэтому фиксируем бокс и вписываем contain. */
body[class*="new-design"] .brand-chip .bc-logo,
body.nd-hybrid .brand-chip .bc-logo {
  /* 30.08.2026 (Ivan: «большие отступы у некоторых эмблем и названия бренда»).
     Фиксированная ширина 30px давала пустоту у круглых знаков (BMW, ромб Renault):
     файл обрезан по контуру, поэтому бокс тянется по самому знаку. */
  width: auto; max-width: 34px; height: 20px; border-radius: 0; background: none;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
body[class*="new-design"] .brand-chip .bc-logo img,
body.nd-hybrid .brand-chip .bc-logo img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block;
}


/* 29.08.2026 (Никита, стр. 33: «здесь куча пустого места, надо более логично и экономично
   расположить всю инфу»). У .pd-title-row две колонки (1fr auto), но правая пустует —
   справа от заголовка оставалось ~500px белого поля, а чипы VIN/страховая/кузов/владельцы
   висели под заголовком отдельной строкой. Переносим чипы в правую колонку: шапка
   становится ниже, пустота уходит. */
@media (min-width: 1101px) {
  body[class*="new-design"] .pd-title-row { grid-template-columns: minmax(0, 1fr) minmax(300px, 430px); }
  body[class*="new-design"] .pd-title-row > .pd-tags {
    margin-top: 0; align-content: flex-start; justify-content: flex-end;
  }
}


/* 30.08.2026 (Ivan): «в выпадающем окне нет лого, надо их вместо букв… и чтобы всё было ровно».
   Знаки нормализованы по оптической массе и лежат на одинаковом холсте 160x56, поэтому здесь
   достаточно одного бокса с contain — круглые (BMW, Volvo) больше не мельчат. */
body[class*="new-design"] .bp-item .bp-mark-logo,
body.nd-hybrid .bp-item .bp-mark-logo {
  background: none; border: 0; padding: 0;
  width: auto; max-width: 34px; height: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
body[class*="new-design"] .bp-item .bp-mark-logo img,
body.nd-hybrid .bp-item .bp-mark-logo img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block;
}

/* 30.08.2026 (Никита, п.1 стр. 10: «не стоит использовать нигде на сайте подобные цветастые
   иконки — они делают сайт более дешёвым»). Эмодзи ⚡ и 🔋 в чипах «Электро» и «Гибрид»
   заменены на контурные знаки, флаг Кореи в контактах — на нарисованный кружок. */
body[class*="new-design"] .chip .chip-ico,
body.nd-hybrid .chip .chip-ico { margin-right: 6px; vertical-align: -2px; color: currentColor; }
body[class*="new-design"] .ct-flag svg,
body.nd-hybrid .ct-flag svg { display: block; }

/* 30.08.2026. Сначала по разбору Никиты микрофон убрали в кнопку «Спросить ИИ», но Ivan
   вернул его на прежнее место: «иконку голосового ввода верни где была и сделай её чёрной,
   как иконка лупы». Цвет — тот же, что у лупы (--ink). */
body[class*="new-design"] #ndSearchMic,
body.nd-hybrid #ndSearchMic {
  display: inline-flex !important;
  color: var(--ink, #0E0E12);
  /* убираем розовую подложку: рядом с лупой микрофон должен выглядеть так же — просто знак */
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
body[class*="new-design"] #ndSearchMic svg,
body.nd-hybrid #ndSearchMic svg { stroke: currentColor; }
body[class*="new-design"] #ndSearchMic.is-listening,
body.nd-hybrid #ndSearchMic.is-listening { color: var(--accent, #E11D2E); }


/* 30.08.2026 (Ivan: «зачем такое широкое поле поиска? сделай нормально»). Поле было 380px
   и стояло сразу за заголовком — справа от него зияла пустая половина шапки. Сужаем
   и прижимаем к правому краю, к крестику: заголовок слева, поиск справа. */
/* 30.08.2026: сначала поле прижали вправо, но Ivan вернул прежнее место — сразу за
   заголовком, только уже (было 380px). Крестик остаётся у правого края. */
body[class*="new-design"] .bp-head .bp-search,
body.nd-hybrid .bp-head .bp-search {
  /* 30.08.2026. Ivan уточнил: «ширину сделай больше процентов на 30, а выше я писал про
     высоту» — узким должно было стать поле по высоте, а не по ширине.
     Ширина 200 → 260px, высота ужата паддингами (было 8px сверху и снизу). */
  flex: 0 1 260px;
  max-width: 260px;
  margin-left: 0;
  padding: 0 10px;
  /* высоту держало общее правило полей из аудита 24.08 (min-height: 48px) — снимаем его
     здесь, иначе поле остаётся 58px против нужных ~36 */
  height: 36px;
  min-height: 0;
}
body[class*="new-design"] .bp-head .bp-search input,
body.nd-hybrid .bp-head .bp-search input {
  height: 34px;
  min-height: 0;
  padding: 0;
}
body[class*="new-design"] .bp-head .bp-search input,
body.nd-hybrid .bp-head .bp-search input { font-size: 12.5px; }
@media (max-width: 700px) {
  body[class*="new-design"] .bp-head .bp-search,
  body.nd-hybrid .bp-head .bp-search { flex: 1 1 100%; max-width: 100%; margin-left: 0; }
}


body.nd-hybrid .ndd-hero .ndd-h1 { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 10px 0 0; color: #FFF !important; font-family: 'Montserrat', system-ui, sans-serif; }

body.nd-hybrid .ndd-lead { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.68); max-width: 700px; margin-top: 16px; }
body.nd-hybrid .ndd-hbadges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
body.nd-hybrid .ndd-hb { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 10px 18px; font-size: 13.5px; color: rgba(255,255,255,.72); }


body.nd-hybrid .ndd-panel { background: #FFF; border-radius: 24px; box-shadow: 0 18px 60px rgba(14,14,18,.14); padding: 26px 28px; }
body.nd-hybrid .ndd-pick { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
body.nd-hybrid .ndd-fld { flex: 0 1 260px; }


body.nd-hybrid .ndd-answer { margin-top: 20px; border-top: 1px solid #ececf0; padding-top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }


/* --- общие секции --- */
body.nd-hybrid .ndd-sec { padding: 40px 0 56px; background: #FFF; }
body.nd-hybrid .ndd-h2 { font-family: 'Instrument Serif', serif; font-size: 36px; font-weight: 400; letter-spacing: -.02em; line-height: 1.08; margin: 0; color: var(--ink, #0E0E12); }

body.nd-hybrid .ndd-h2--gap { margin-top: 52px; }
body.nd-hybrid .ndd-sub { font-size: 13.5px; line-height: 1.6; color: var(--muted, #6E6E76); margin: 12px 0 0; max-width: 640px; }

/* --- этапы --- */
body.nd-hybrid .ndd-steps { margin-top: 24px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }


/* --- сравнение способов --- */
body.nd-hybrid .ndd-cmp { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }


body.nd-hybrid .ndd-tr { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; padding: 13px 20px; font-size: 14.5px; border-bottom: 1px solid #f0f0f3; }


/* --- полоса документов --- */
body.nd-hybrid .ndd-strip { margin-top: 40px; background: #F7F7F9; border-radius: 20px; padding: 24px 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }


/* --- заявка --- */
body.nd-hybrid .ndd-cta { margin-top: 52px; background: var(--ink, #0E0E12); border-radius: var(--radius-lg, 20px); padding: 32px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: start; scroll-margin-top: 90px; }
body.nd-hybrid .ndd-ctat b { display: block; color: #FFF; font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }


/* --- телефон --- */
@media (max-width: 900px) {
  body.nd-hybrid .ndd-answer,
  body.nd-hybrid .ndd-steps,
  body.nd-hybrid .ndd-cmp,
  body.nd-hybrid .ndd-strip { grid-template-columns: 1fr 1fr; }
  body.nd-hybrid .ndd-cta { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 700px) {
  body.nd-hybrid .ndd-hero { padding: 34px 0 104px; }
  body.nd-hybrid .ndd-hero .ndd-h1 { font-size: 26px; line-height: 1.2; }
  body.nd-hybrid .ndd-lead { font-size: 14.5px; margin-top: 12px; }
  body.nd-hybrid .ndd-hbadges { gap: 8px; margin-top: 20px; }
  body.nd-hybrid .ndd-hb { font-size: 12.5px; padding: 8px 14px; }
  body.nd-hybrid .ndd-panelwrap { margin-top: -80px; }
  body.nd-hybrid .ndd-panel { padding: 18px; border-radius: 20px; }
  body.nd-hybrid .ndd-pick { flex-direction: column; align-items: stretch; gap: 12px; }
  body.nd-hybrid .ndd-fld { flex: 1 1 auto; }
  body.nd-hybrid .ndd-pgo { justify-content: center; }
  body.nd-hybrid .ndd-answer,
  body.nd-hybrid .ndd-steps,
  body.nd-hybrid .ndd-cmp,
  body.nd-hybrid .ndd-strip { grid-template-columns: 1fr; gap: 10px; }
  body.nd-hybrid .ndd-sec { padding: 26px 0 44px; }
  body.nd-hybrid .ndd-h2 { font-size: 26px; line-height: 1.12; }
  body.nd-hybrid .ndd-h2--gap { margin-top: 36px; }
  body.nd-hybrid .ndd-sub { font-size: 14px; }
  body.nd-hybrid .ndd-tr { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 16px; font-size: 14px; }
  body.nd-hybrid .ndd-tr span:nth-child(2) { grid-column: 1; font-size: 12.5px; color: #6E6E76; }
  body.nd-hybrid .ndd-tr span:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  body.nd-hybrid .ndd-tr--h { display: none; }
  body.nd-hybrid .ndd-cta { padding: 22px 18px; border-radius: 20px; }
  body.nd-hybrid .ndd-ctat b { font-size: 20px; }
  body.nd-hybrid .ndd-strip { padding: 18px; }
}

/* ============================================================
   30.08.2026 — /guarantee/ в новом дизайне (только staging, body.nd-hybrid).
   Ivan выбрал первый из трёх показанных вариантов. Разметка —
   includes/nd-guarantee-body.php. Прежний вид: три текстовых блока компонента
   news.list/process_new сплошным текстом (замечание Никиты, п. 48).
   Тёмный блок «чего не обещаем» — не прямая секция main.content, поэтому общее
   правило белого фона (main.content > section, #FFF !important) его не задевает;
   у самой .ndg-page фон белый и переопределять его не нужно.
   ============================================================ */
body.nd-hybrid .ndg-page { background: #FFF; padding: 40px 0 56px; font-family: 'Montserrat', system-ui, sans-serif; }


body.nd-hybrid .ndg-page .ndg-h1 { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 10px 0 0; color: var(--ink, #0E0E12); font-family: 'Montserrat', system-ui, sans-serif; }

body.nd-hybrid .ndg-lead { font-size: 16px; line-height: 1.65; color: var(--ink-3, #3D3D48); max-width: 780px; margin-top: 16px; }

body.nd-hybrid .ndg-hn { background: #f7f7f9; border-radius: 999px; padding: 9px 16px; font-size: 13.5px; color: #1e1e24; }


body.nd-hybrid .ndg-h2 { font-family: 'Instrument Serif', serif; font-size: 36px; font-weight: 400; letter-spacing: -.02em; line-height: 1.08; margin: 52px 0 0; color: var(--ink, #0E0E12); }

body.nd-hybrid .ndg-h2--gap { margin-top: 52px; }


/* --- три обязательства --- */
body.nd-hybrid .ndg-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
body.nd-hybrid .ndg-pc { background: var(--bg-card, #FFF); border: 1px solid var(--line, #ECECF0); border-radius: var(--radius-lg, 20px); padding: 26px 24px; display: flex; flex-direction: column; transition: border-color .18s var(--ease, ease), transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease); }


/* --- проверка до оплаты --- */
body.nd-hybrid .ndg-two { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; margin-top: 24px; align-items: start; }
/* 03.09.2026 (аудит 6.1): пункты 01-10 лежали в две колонки ПОСТРОЧНО (01-02, 03-04...),
   а читаются они сверху вниз — порядок сбивался. Раскладываем по колонкам: 01-05 слева, 06-10 справа. */
body.nd-hybrid .ndg-check { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 0 28px; }


/* --- честный блок --- */
body.nd-hybrid .ndg-honest { margin-top: 52px; background: var(--ink, #0E0E12); border-radius: var(--radius-lg, 20px); padding: 34px; color: #FFF; }
body.nd-hybrid .ndg-honest h2 { font-family: 'Instrument Serif', serif; font-size: 34px; font-weight: 400; letter-spacing: -.02em; line-height: 1.1; margin: 0; color: #FFF; }


body.nd-hybrid .ndg-hg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }


/* --- платная гарантия --- */
body.nd-hybrid .ndg-paid { margin-top: 16px; border: 1px solid var(--line, #ECECF0); border-radius: var(--radius-lg, 20px); padding: 28px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; background: var(--bg, #F7F7F9); }

body.nd-hybrid .ndg-paid h3 { font-size: 22px; font-weight: 800; margin: 12px 0 0; letter-spacing: -.01em; }


/* --- договор и документы --- */
body.nd-hybrid .ndg-docs { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }


/* --- заявка --- */
body.nd-hybrid .ndg-cta { margin-top: 52px; background: var(--accent, #E11D2E); border-radius: var(--radius-lg, 20px); padding: 32px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: start; color: #FFF; scroll-margin-top: 90px; }
body.nd-hybrid .ndg-ctat b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.22; }


/* --- телефон --- */
@media (max-width: 1000px) {
  body.nd-hybrid .ndg-pillars, body.nd-hybrid .ndg-hg { grid-template-columns: 1fr 1fr; }
  body.nd-hybrid .ndg-two { grid-template-columns: 1fr; gap: 22px; }
  body.nd-hybrid .ndg-cta { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px) {
  body.nd-hybrid .ndg-page { padding: 26px 0 44px; }
  body.nd-hybrid .ndg-page .ndg-h1 { font-size: 26px; line-height: 1.2; }
  body.nd-hybrid .ndg-lead { font-size: 14.5px; margin-top: 12px; }
  body.nd-hybrid .ndg-hn { font-size: 12.5px; padding: 8px 14px; }
  body.nd-hybrid .ndg-h2 { font-size: 26px; line-height: 1.12; margin-top: 40px; }
  body.nd-hybrid .ndg-h2--gap { margin-top: 40px; }
  body.nd-hybrid .ndg-pillars, body.nd-hybrid .ndg-hg, body.nd-hybrid .ndg-docs, body.nd-hybrid .ndg-check { grid-template-columns: 1fr; gap: 10px; }
  /* В одну колонку порядок снова обычный, иначе раскладка по столбцам перепутает пункты. */
  body.nd-hybrid .ndg-check { gap: 0; grid-auto-flow: row; grid-template-rows: none; }
  body.nd-hybrid .ndg-pc { padding: 22px 20px; }
  body.nd-hybrid .ndg-honest { padding: 24px 20px; border-radius: 20px; margin-top: 38px; }
  body.nd-hybrid .ndg-honest h2 { font-size: 26px; line-height: 1.12; }
  body.nd-hybrid .ndg-paid { grid-template-columns: 1fr; gap: 20px; padding: 22px 20px; }
  body.nd-hybrid .ndg-paid-btn { text-align: center; }
  body.nd-hybrid .ndg-paid h3 { font-size: 19px; }
  body.nd-hybrid .ndg-docs { margin-top: 38px; }
  body.nd-hybrid .ndg-cta { padding: 24px 20px; border-radius: 20px; margin-top: 38px; }
  body.nd-hybrid .ndg-ctat b { font-size: 20px; }
}

/* ============================================================
   30.08.2026 — /credit/ в новом дизайне (только staging, body.nd-hybrid).
   Замечание Никиты (п. 46): «тут вся страница пляшет». Прежний вид — отдельный
   лендинг на легаси-шкале rem с контейнером 158rem, бегущей строкой и эмодзи.
   Значения ниже — канон сайта (см. memory feedback_nd_page_style_canon):
   .shell 1520 · H1 40/800 · заголовок секции Instrument Serif 36/400 с курсивным em
   · eyebrow 12/600/.12em · подзаголовок 13.5/1.6 muted · карточка var(--line) +
   var(--radius-lg) + hover translateY(-3px) · кнопки 15/800 с красной тенью.
   ⛔ Никаких цифр по ставке/сроку/платежу — ФАС, ч. 3 ст. 28 ФЗ «О рекламе».
   ============================================================ */
body.nd-hybrid .ndcr-page { background: #FFF; padding: 40px 0 56px; font-family: 'Montserrat', system-ui, sans-serif; }


body.nd-hybrid .ndcr-page .ndcr-h1 { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 10px 0 0; color: var(--ink, #0E0E12); font-family: 'Montserrat', system-ui, sans-serif; }

body.nd-hybrid .ndcr-lead { font-size: 16px; line-height: 1.65; color: var(--ink-3, #3D3D48); max-width: 640px; margin-top: 16px; }
body.nd-hybrid .ndcr-h2 { font-family: 'Instrument Serif', serif; font-size: 36px; font-weight: 400; letter-spacing: -.02em; line-height: 1.08; margin: 52px 0 0; color: var(--ink, #0E0E12); }

body.nd-hybrid .ndcr-h2--gap { margin-top: 56px; }


/* --- первый экран --- */
body.nd-hybrid .ndcr-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; margin-top: 4px; }
body.nd-hybrid .ndcr-hero-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }


body.nd-hybrid .ndcr-stat { background: var(--bg, #F7F7F9); border-radius: var(--radius-md, 14px); padding: 16px 20px; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; }
body.nd-hybrid .ndcr-stat b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--accent, #E11D2E); font-variant-numeric: tabular-nums; }

body.nd-hybrid .ndcr-stat small { grid-column: 2; font-size: 12.5px; color: var(--muted, #6E6E76); line-height: 1.4; margin-top: 3px; }

/* --- условия --- */
/* 03.09.2026 (аудит 5.1): семь карточек в сетке на четыре давали 4+3 и пустое место справа.
   Кладём на 12 колонок: первые четыре по три доли, последние три по четыре — обе строки полные,
   без выдумывания восьмого пункта. */
body.nd-hybrid .ndcr-conds { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-top: 26px; }
body.nd-hybrid .ndcr-conds > * { grid-column: span 3; }
body.nd-hybrid .ndcr-conds > *:nth-child(n+5) { grid-column: span 4; }


/* --- банки --- */
body.nd-hybrid .ndcr-banks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; }


/* --- рынки --- */
body.nd-hybrid .ndcr-geo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; }


/* --- важные детали (тёмный блок) --- */
body.nd-hybrid .ndcr-notes { margin-top: 56px; background: var(--ink, #0E0E12); border-radius: var(--radius-lg, 20px); padding: 34px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 36px; align-items: start; color: #FFF; }


body.nd-hybrid .ndcr-note { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 20px 22px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }


/* --- заявка --- */
body.nd-hybrid .ndcr-cta { margin-top: 56px; background: var(--bg, #F7F7F9); border-radius: var(--radius-lg, 20px); padding: 32px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: start; scroll-margin-top: 90px; }
body.nd-hybrid .ndcr-ctat b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.22; }


/* --- телефон --- */
@media (max-width: 1100px) {
  body.nd-hybrid .ndcr-conds, body.nd-hybrid .ndcr-banks, body.nd-hybrid .ndcr-geo { grid-template-columns: 1fr 1fr; }
  body.nd-hybrid .ndcr-conds > *, body.nd-hybrid .ndcr-conds > *:nth-child(n+5) { grid-column: auto; }
  body.nd-hybrid .ndcr-hero, body.nd-hybrid .ndcr-notes, body.nd-hybrid .ndcr-cta { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 760px) {
  body.nd-hybrid .ndcr-page { padding: 26px 0 44px; }
  body.nd-hybrid .ndcr-page .ndcr-h1 { font-size: 26px; line-height: 1.2; }
  body.nd-hybrid .ndcr-lead { font-size: 14.5px; margin-top: 12px; }
  body.nd-hybrid .ndcr-h2 { font-size: 26px; line-height: 1.12; margin-top: 40px; }
  body.nd-hybrid .ndcr-h2--gap { margin-top: 42px; }
  body.nd-hybrid .ndcr-conds, body.nd-hybrid .ndcr-banks, body.nd-hybrid .ndcr-geo { grid-template-columns: 1fr; gap: 10px; }
  body.nd-hybrid .ndcr-hero-btns { gap: 8px; }
  body.nd-hybrid .ndcr-btn-pri, body.nd-hybrid .ndcr-btn-sec { flex: 1 1 100%; justify-content: center; }
  body.nd-hybrid .ndcr-notes { padding: 24px 20px; margin-top: 42px; }
  body.nd-hybrid .ndcr-note { padding: 18px; gap: 14px; }
  body.nd-hybrid .ndcr-cta { padding: 24px 20px; margin-top: 42px; }
  body.nd-hybrid .ndcr-ctat b { font-size: 20px; }
  /* 03.09.2026 (аудит 5.3): плашки свёрстаны сеткой «цифра | текст», и у широкой цифры
     («~1 час») подпись не помещалась рядом — уезжала вниз, плашка выглядела иначе двух
     соседних. На телефоне выстраиваем их обычным потоком: цифра и слово в строке,
     пояснение под ними — одинаково у всех трёх. */
  body.nd-hybrid .ndcr-stat { display: block; }
  body.nd-hybrid .ndcr-stat b { margin-right: 8px; }
  body.nd-hybrid .ndcr-stat small { display: block; margin-top: 4px; }
  body.nd-hybrid .ndcr-stat b { font-size: 22px; }
}


body.nd-hybrid .ndc-h2 { font-family: 'Instrument Serif', serif; font-size: 36px; font-weight: 400; letter-spacing: -.02em; line-height: 1.08; margin: 48px 0 20px; color: var(--ink, #0E0E12); }


/* --- четыре свежие подборки крупно --- */
body.nd-hybrid .ndc-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
body.nd-hybrid .ndc-big {
  display: flex; flex-direction: column; gap: 16px; min-height: 208px; padding: 22px 24px;
  background: var(--bg, #F7F7F9); border: 1px solid transparent; border-radius: var(--radius-lg, 20px);
  text-decoration: none; color: inherit;
  transition: border-color .18s var(--ease, ease), box-shadow .18s var(--ease, ease), transform .18s var(--ease, ease);
}


body.nd-hybrid .ndc-big-t { font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--ink, #0E0E12); letter-spacing: -.01em; }


body.nd-hybrid .ndc-card-tag { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6E6E76); }


@media (max-width: 1100px) {
  body.nd-hybrid .ndc-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.nd-hybrid .ndc-h2 { font-size: 28px; }
}
@media (max-width: 700px) {
  body.nd-hybrid .ndc-top { grid-template-columns: 1fr; gap: 12px; }
  body.nd-hybrid .ndc-big { min-height: 0; padding: 18px; }
  body.nd-hybrid .ndc-big-t { font-size: 16.5px; }
  body.nd-hybrid .ndc-h2 { font-size: 26px; line-height: 1.12; margin: 36px 0 16px; }
}


/* ============================================================
   31.08.2026 — разбор Никиты, п. 11 «стрелки карусели неудобные — они должны быть
   слева и справа» и п. 21 «пресеты („Что вы ищете“) визуально слабые… привести
   к стилю сайта; поднять выше, сразу под первый экран».
   ============================================================ */

/* ---------- п. 11: КРАЕВЫЕ СТРЕЛКИ ЛЕНТ ----------
   ЧТО БЫЛО.
   1) Единственная лента со стрелками — «Просмотренные ранее» на /korea/
      (includes/new-catalog-after.php, .viewed-section): обе кнопки .vc-btn лежали
      в правом верхнем углу шапки секции — ~120px выше и ~200px правее самой ленты.
      Вдобавок глобальный сброс `body[class*="new-design"] button` (специфичность (0,1,2)
      против (0,1,0) у .vc-btn) съедал у них рамку и белый фон: на экране оставались
      голые галочки 16px без кнопки (проверено computed на живом staging).
   2) Ленты .h2-strip со стрелками .h2-arrow (их как раз переделали «слева/справа» 29.08)
      на главной БОЛЬШЕ НЕТ — блок «Свежие машины в каталоге» убран 30.08. Правила
      на строках ~10092-10118 и ~10130-10132 и функция bindArrows() в nd-home2-body.php
      с этого дня мёртвые (вреда не делают, чистить отдельным шагом).
   3) Ряд «Быстро:» (.chips-scroll) не влезает начиная примерно с 1100px
      (замер 31.08 на 1100px: scrollWidth 1129 при clientWidth 1060), а никакой
      подсказки о прокрутке не было. Ряды «Кузов:»/«Марка:» (.brands-track) на десктопе
      переносятся (flex-wrap: wrap) и не скроллятся — им стрелки не нужны.
   ЧТО СТАЛО. Общий каркас .nd-rail-btn: кнопка занимает ВСЮ высоту ленты у её края,
   ширина 76px — это и есть «кликабельная область по краю»; внутри круг 44x44
   (canon: любая кнопка min-height 44) вертикально по центру. Под кнопкой мягкий белый
   градиент — он же подсказка «лента продолжается». Стрелка исчезает, когда лента
   домотана до этого края или влезает целиком. На <=700px стрелок нет — лента листается
   свайпом (то же решение принимали для .h2-arrow 29.08).
   ГРАБЛЯ: `body[class*="new-design"] main.content :where(div, …, span, button, …)
   { box-shadow: none !important }` (см. строки 3388 и 8092) гасит ЛЮБЫЕ тени внутри
   main.content — тень круга задаём с !important и селектором специфичнее (0,1,2).
   ГРАДИЕНТ подобран под белый фон секции: .viewed-section и .chips-row сейчас белые
   (`main.content > section:nth-child(2n+1)`/`(2n)` красит в #FFF !important, строка 8092).
   Если секцию когда-нибудь перекрасят — поменять белый в двух градиентах ниже. */
body[class*="new-design"] .nd-rail-wrap { position: relative; }

body[class*="new-design"] .nd-rail-btn {
  position: absolute; top: 0; bottom: 0; z-index: 20;
  width: 76px; padding: 0; border: 0; cursor: pointer;
  display: flex; align-items: center;
  color: var(--ink, #0E0E12);
}
body[class*="new-design"] .nd-rail-btn[hidden] { display: none; }
body[class*="new-design"] .nd-rail-btn-prev {
  left: 0; justify-content: flex-start;
  background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 46%, rgba(255,255,255,0) 100%);
}
body[class*="new-design"] .nd-rail-btn-next {
  right: 0; justify-content: flex-end;
  background: linear-gradient(270deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 46%, rgba(255,255,255,0) 100%);
}
body[class*="new-design"] .nd-rail-btn > span {
  width: 44px; height: 44px; min-height: 44px; border-radius: 50%;
  background: #FFF; color: inherit;
  border: 1px solid var(--line, #ECECF0);
  box-shadow: 0 4px 14px rgba(14, 14, 18, .16) !important;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
body[class*="new-design"] .nd-rail-btn:hover > span {
  background: var(--ink, #0E0E12); color: #FFF; border-color: var(--ink, #0E0E12);
}
/* в шапке «Просмотренных ранее» осталась одна кнопка «Очистить историю» */
body[class*="new-design"] .viewed-head .viewed-ctrls { gap: 0; }
@media (max-width: 700px) {
  body[class*="new-design"] .nd-rail-btn { display: none !important; }
}

/* 07.09.2026 (аудит, п. 18). Кнопка прокрутки — оверлей шириной 76px поверх ленты,
   поэтому чип, оказавшийся у правого края, читался обрезанным («Полный прие», «Электро»).
   Пока ленте есть что прокручивать (класс nd-rail-over ставит js/nd-scroll-hint.js),
   отдаём кнопке собственную полосу: лента становится на её ширину уже, ни один чип
   под кнопку больше не попадает. Ниже 701px кнопок нет — полоса не нужна.
   Специфичность (0,3,0) перебивает `.chips-row .chips-scroll` (0,2,0) из блока 860px. */
@media (min-width: 701px) {
  body[class*="new-design"] .nd-rail-wrap.nd-rail-over > .chips-scroll {
    margin-right: 76px;
    padding-right: 4px;
  }
}


/* =============================================================================
   31.08.2026 — разбор Никиты, п.7 и п.8.

   п.7. БЫЛО: hero-кнопка главной «Заявка на подбор» и CTA шапки «Бесплатный
   подбор» вели на /forma/ — анкету из 4 шагов (тип авто, марка, бюджет, срок,
   имя, телефон, канал, 2 согласия). СТАЛО: те же кнопки открывают модалку
   .ndqm — телефон (обязателен) + имя с подписью «(необязательно)» + способ
   связи + 2 согласия 152-ФЗ. /forma/ остаётся в href: без JS и по «открыть в
   новой вкладке» человек попадает на полную анкету, как раньше.
   Разметку модалки строит скрипт (js/new-catalog.js, блок ndQuickModal).

   п.8. БЫЛО: способ связи спрашивала только страница /forma/
   (.ndf-tiles[data-field="channel"]). СТАЛО: компонент .ndch добавлен во ВСЕ
   формы нового дизайна, значение уходит в comment строкой «Способ связи: …».
   Модификатор .ndch--on-dark — для форм на тёмной и красной подложке
   (#ndHelperForm в .helper-card, #nddLeadForm в .ndd-cta, #ndgLeadForm в .ndg-cta).

   Правила НЕ скоуплены к body-классу намеренно: new-catalog.css грузится и на
   nd-страницах (body[class*="new-design"]), и на гибридных (body.nd-hybrid),
   а компонент должен выглядеть одинаково везде. Селекторы даны в два класса
   (.ndqm .ndqm-*) — иначе их перебивает reset `body[class*="new-design"] button`
   и `body[class*="new-design"] input` (специфичность 0,1,2). Все размеры в px:
   на легаси-страницах свой root font-size, rem бы поплыл.
   ============================================================================= */

/* ---------- п.8: переключатель способа связи (общий для всех форм) ---------- */
.ndch { display: block; margin: 2px 0 4px; }
.ndch * { box-sizing: border-box; }
.ndch .ndch-t {
  display: block; margin: 0 0 8px;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .01em; line-height: 1.3;
  color: var(--muted, #6E6E76);
}
.ndch .ndch-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ndch .ndch-opt { position: relative; display: inline-block; margin: 0; padding: 0; cursor: pointer; line-height: 1; }
.ndch .ndch-opt input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.ndch .ndch-opt span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 0 14px;
  border: 1px solid var(--line, #ECECF0); border-radius: 12px; background: #FFF;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  color: var(--ink, #0E0E12);
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.ndch .ndch-opt:hover span { border-color: var(--ink-3, #3D3D48); }
.ndch .ndch-opt input:checked + span { background: var(--ink, #0E0E12); border-color: var(--ink, #0E0E12); color: #FFF; }
.ndch .ndch-opt input:focus-visible + span { outline: 2px solid var(--accent, #E11D2E); outline-offset: 2px; }

/* тёмная и красная подложка: .helper-card и .ndd-cta (var(--ink)), .ndg-cta (var(--accent)) */
.ndch--on-dark .ndch-t { color: rgba(255,255,255,.72); }
.ndch--on-dark .ndch-opt span { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.30); color: #FFF; }
.ndch--on-dark .ndch-opt:hover span { border-color: rgba(255,255,255,.60); }
.ndch--on-dark .ndch-opt input:checked + span { background: #FFF; border-color: #FFF; color: var(--ink, #0E0E12); }

@media (max-width: 760px) {
  .ndch .ndch-opts { gap: 6px; }
  .ndch .ndch-opt span { min-height: 40px; padding: 0 12px; font-size: 12.5px; }
}

/* ---------- п.7: короткая заявка в модалке ---------- */
.ndqm {
  position: fixed; inset: 0; z-index: 100010;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ndqm[hidden] { display: none !important; }
.ndqm * { box-sizing: border-box; }
.ndqm .ndqm-back {
  position: absolute; inset: 0; background: rgba(14,14,18,.58);
  opacity: 0; transition: opacity .16s var(--ease, ease);
}
.ndqm.is-open .ndqm-back { opacity: 1; }
.ndqm .ndqm-win {
  position: relative; width: 100%; max-width: 460px;
  max-height: calc(100vh - 40px); overflow: auto; -webkit-overflow-scrolling: touch;
  background: #FFF; border: 1px solid var(--line, #ECECF0);
  border-radius: var(--radius-lg, 20px);
  box-shadow: var(--shadow-lg, 0 24px 56px rgba(14,14,16,.10));
  padding: 30px 30px 24px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .16s var(--ease, ease), transform .16s var(--ease, ease);
}
.ndqm.is-open .ndqm-win { opacity: 1; transform: none; }
.ndqm .ndqm-x {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: var(--bg, #F7F7F9);
  color: var(--ink-3, #3D3D48); cursor: pointer; padding: 0;
  transition: background .12s ease, color .12s ease;
}
.ndqm .ndqm-x:hover { background: var(--bg-2, #F0F0F3); color: var(--ink, #0E0E12); }
.ndqm .ndqm-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent, #E11D2E); margin: 0 0 10px;
}
.ndqm .ndqm-h {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400; font-size: 36px; line-height: 1.08; letter-spacing: -.02em;
  color: var(--ink, #0E0E12); margin: 0 0 10px; padding: 0;
}
.ndqm .ndqm-h em { font-family: 'Montserrat', system-ui, sans-serif !important; font-style: normal !important; font-weight: inherit !important; color: var(--accent, #E11D2E); }
.ndqm .ndqm-sub {
  font-size: 13.5px; line-height: 1.6; color: var(--muted, #6E6E76);
  max-width: 640px; margin: 0 0 18px; padding: 0;
}
.ndqm .ndqm-form { display: grid; gap: 10px; margin: 0; padding: 0; }
.ndqm .ndqm-field { display: block; margin: 0; }
.ndqm .ndqm-lab {
  display: block; margin: 0 0 6px;
  font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink-3, #3D3D48);
}
.ndqm .ndqm-lab i { font-style: normal; font-weight: 500; color: var(--muted, #6E6E76); }
.ndqm .ndqm-field input {
  display: block; width: 100%; min-height: 46px; height: auto; padding: 12px 14px; margin: 0;
  border: 1px solid var(--line, #ECECF0); border-radius: 12px; background: #FFF;
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--ink, #0E0E12);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.ndqm .ndqm-field input::placeholder { color: var(--muted-2, #B4B4BE); font-weight: 400; }
.ndqm .ndqm-field input:focus { outline: 0; border-color: var(--ink, #0E0E12); box-shadow: 0 0 0 3px rgba(14,14,18,.06); }
.ndqm .ndqm-cons {
  display: flex; align-items: flex-start; gap: 8px; margin: 0;
  font-size: 12px; line-height: 1.45; color: var(--muted, #6E6E76); cursor: pointer;
}
.ndqm .ndqm-cons input { width: 15px; height: 15px; min-height: 0; margin: 1px 0 0; padding: 0; flex: 0 0 auto; accent-color: var(--accent, #E11D2E); }
.ndqm .ndqm-cons a { color: var(--ink-3, #3D3D48); text-decoration: underline; }
.ndqm .ndqm-err {
  margin: 0; padding: 10px 12px; border-radius: 10px;
  background: var(--accent-soft, #f0f0f3); border: 1px solid rgba(225,29,46,.25);
  font-size: 12.5px; line-height: 1.45; font-weight: 600; color: var(--accent-2, #B8152B);
}
.ndqm .ndqm-err[hidden] { display: none !important; }
.ndqm .ndqm-submit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; padding: 15px 26px; margin: 4px 0 0;
  border: 0; border-radius: 12px; background: var(--accent, #E11D2E);
  font-family: inherit; font-size: 15px; font-weight: 800; color: #FFF; cursor: pointer;
  box-shadow: 0 3px 0 var(--accent-2, #B8152B), 0 10px 24px rgba(225,29,46,.2);
  transition: transform .1s var(--ease, ease), box-shadow .1s var(--ease, ease);
}
.ndqm .ndqm-submit:hover { transform: translateY(1px); box-shadow: 0 2px 0 var(--accent-2, #B8152B), 0 6px 18px rgba(225,29,46,.18); }
.ndqm .ndqm-submit:disabled { opacity: .65; cursor: default; transform: none; }
.ndqm .ndqm-under { font-size: 12px; line-height: 1.5; color: var(--muted, #6E6E76); text-align: center; margin-top: 2px; }
.ndqm .ndqm-under a { color: var(--ink, #0E0E12); font-weight: 700; text-decoration: none; white-space: nowrap; }
.ndqm .ndqm-ok {
  display: grid; gap: 6px; padding: 22px 16px; text-align: center;
  background: var(--success-soft, #ececf0); border: 1px solid rgba(30,140,74,.28); border-radius: 14px;
}
.ndqm .ndqm-ok b { font-size: 15.5px; font-weight: 800; color: var(--success, #1E8C4A); }
.ndqm .ndqm-ok span { font-size: 13px; line-height: 1.5; color: var(--ink-3, #3D3D48); }

@media (max-width: 760px) {
  .ndqm { padding: 0; align-items: flex-end; }
  .ndqm .ndqm-win {
    max-width: none; max-height: 92vh;
    border-radius: 20px 20px 0 0; border-bottom: 0;
    padding: 24px 18px 20px; transform: translateY(24px);
  }
  .ndqm .ndqm-h { font-size: 26px; line-height: 1.12; }
  .ndqm .ndqm-sub { font-size: 13px; margin-bottom: 14px; }
}


body.new-design-home .h2b-ct-chip em,
body[class*="new-design"] .h2b-ct-chip em { font-size: 12px; }


body.new-design-home .h2b-off-tag { font-size: 12px; padding: 2px 7px; }


body.new-design-home .h2bs-s {
  font-style: normal; font-family: inherit;
  font-size: 12px; color: var(--muted, #6E6E76);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* ============================================================
   31.08.2026 — разбор Никиты, п.16 («не стоит использовать нигде на сайте
   цветастые иконки — они делают сайт дешёвым; если брать иконки, то
   стилизованные под стиль сайта, например красные») и п.17 («варианты кузова
   странно отрисованы — можно взять готовые векторные изображения»).

   П.17. БЫЛО: силуэты кузовов — залитые фигуры на сетке 46x28 с вырезанными
   через fill-rule="evenodd" окнами и «тенью»-эллипсом под машиной; в пилюле
   .bt-mark 40x26 картинка 34x21 схлопывалась в кляксу, кроссовер/минивэн/
   универсал/купе различить было нельзя.
   СТАЛО: контурные силуэты на единой сетке 24x24, stroke 1.7 currentColor,
   round-стыки, общая база (колёса cx 7.1/16.9 cy 16.6 r 2, пол y=16.6).
   Сами иконки — в includes/new-catalog-body.php ($__ndBodyIcons) и
   includes/nd-home2-body.php ($h2kBodyIcons), наборы обязаны совпадать.
   Здесь — только размер бокса под квадратную сетку (было 40x26 + svg 34x21).

   П.16. Иконки офисов в блоке «Контакты» — контур в акценте вместо эмодзи
   (🏢 🏙 🌴); флаги стран остаются рисованными кружками — шаблон принят 30.08
   на флаге Кореи. Плюс молния в табе «Электро», знаки в умном поиске и
   флаг Казахстана на /kazakhstan/.
   ============================================================ */

/* 31.08.2026: блок «п.17 — квадратная сетка иконок кузова» снят — Ivan попросил
   вернуть прежние иконки кузова в фильтрах, вместе с ними и прежний размер пилюли. */

/* п.16 — иконка города в карточке офиса: контур в акценте вместо эмодзи.
   Флаги-кружки (Корея/Беларусь/Китай) цвет не наследуют — им это не мешает. */
body[class*="new-design"] .ct-office .ct-flag,
body.nd-hybrid .ct-office .ct-flag {
  color: var(--accent, #E11D2E);
  display: flex; align-items: center; min-height: 24px;
}
body[class*="new-design"] .ct-office .ct-flag svg,
body.nd-hybrid .ct-office .ct-flag svg { display: block; }

/* п.16 — молния «Электро» в табах выпадашки марок вместо эмодзи ⚡ */
body[class*="new-design"] .bp-tab .bp-ev-ico,
body.nd-hybrid .bp-tab .bp-ev-ico { margin-left: 3px; vertical-align: -1px; }

/* п.16 — умный поиск: аватар ответа ИИ и кнопка «Открыть чат» (js/new-catalog.js).
   Обычный ответ — чёрный знак, fallback-ответ — акцентный треугольник. */
body[class*="new-design"] .sd-convo-avatar svg,
body.nd-hybrid .sd-convo-avatar svg { display: block; color: var(--ink, #0E0E12); }
body[class*="new-design"] .sd-convo-head.is-fallback .sd-convo-avatar svg,
body.nd-hybrid .sd-convo-head.is-fallback .sd-convo-avatar svg { color: var(--accent, #E11D2E); }
body[class*="new-design"] .sd-convo-secondary svg,
body.nd-hybrid .sd-convo-secondary svg { margin-right: 6px; vertical-align: -3px; }


/* =========================================================
   31.08.2026 — п.32 Никиты (отзывы: главная и /reviews/)
   Было: на главной свой блок «Честные отзывы» — бейджи площадок уводили на Яндекс/
         2ГИС/Авито/VK/Google, «Читать далее» вело на /reviews/, фильтра не было вовсе;
         на /reviews/ бейджи-кнопки (30.08) рисовались системным шрифтом (<button>
         не наследует font-family), а ссылка на площадку была только безымянной иконкой.
   Стало: оба места используют один виджет — вкладки-фильтр, раскрытие полного текста,
         подписанная короткая ссылка «На Яндексе» в подвале карточки.
   Здесь: бейдж-кнопка фильтра, вкладки внутри h2b-блока, .rv-card__foot/.rv-card__source.
   Загружается и на главной (body.new-design-home), и на /reviews/ (body.nd-hybrid).
   ========================================================= */

/* --- бейдж-кнопка фильтра: и в шапке виджета (/reviews/), и в h2b-шапке (главная) --- */
body.nd-hybrid .rv-badge-filter,
body[class*="new-design"] .rv-badge-filter {
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
}


/* --- бейджи главной: были ссылками, стали кнопками --- */
body[class*="new-design"] .h2b-rv-src {
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  background: #FFF;
  border: 1px solid var(--line, #ECECF0);
  border-radius: 10px;
  color: var(--ink, #0E0E12);
}
body[class*="new-design"] .h2b-rv-src.rv-badge-filter--on {
  border-color: var(--accent, #E11D2E);
  background: var(--accent-soft, #f0f0f3);
}
body[class*="new-design"] .h2b-rv-src.rv-badge-filter--on b,
body[class*="new-design"] .h2b-rv-src.rv-badge-filter--on span { color: var(--accent, #E11D2E); }

/* --- виджет внутри h2b-секции главной: px вместо rem-шкалы reviews-widget.css --- */
body[class*="new-design"] .h2b-reviews .rv { font-size: 15px; line-height: 1.6; color: var(--ink-3, #3D3D48); }
body[class*="new-design"] .h2b-reviews .rv-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 20px 0 22px; padding-bottom: 0;
  border-bottom: 1px solid var(--line, #ECECF0);
}
body[class*="new-design"] .h2b-reviews .rv-tab {
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--muted, #6E6E76);
  padding: 10px 14px; min-height: 44px;
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; cursor: pointer;
}
body[class*="new-design"] .h2b-reviews .rv-tab:hover { color: var(--ink, #0E0E12); }
body[class*="new-design"] .h2b-reviews .rv-tab--active {
  color: var(--accent, #E11D2E); border-bottom-color: var(--accent, #E11D2E);
}
body[class*="new-design"] .h2b-reviews .rv-tab__count {
  font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--bg, #F7F7F9); color: var(--muted, #6E6E76);
}
body[class*="new-design"] .h2b-reviews .rv-tab--active .rv-tab__count {
  background: var(--accent-soft, #f0f0f3); color: var(--accent, #E11D2E);
}
body[class*="new-design"] .h2b-reviews .rv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start;
}
body[class*="new-design"] .h2b-reviews .rv-empty { font-size: 14px; color: var(--muted, #6E6E76); }

/* --- карточка по канону нового дизайна (оба места) --- */
body[class*="new-design"] .h2b-reviews .rv-card,
body.nd-hybrid .rv-card {
  background: #FFF;
  border: 1px solid var(--line, #ECECF0);
  border-radius: var(--radius-lg, 20px);
  transition: transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease), border-color .18s var(--ease, ease);
}
body[class*="new-design"] .h2b-reviews .rv-card:hover,
body.nd-hybrid .rv-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg, 0 24px 56px rgba(14,14,16,.10));
  border-color: var(--line, #ECECF0);
}
body[class*="new-design"] .h2b-reviews .rv-card__body { display: flex; flex-direction: column; flex: 1; }
body[class*="new-design"] .h2b-reviews .rv-card__text { font-size: 14.5px; line-height: 1.6; }
body[class*="new-design"] .h2b-reviews .rv-card__name { font-size: 15.5px; }
body[class*="new-design"] .h2b-reviews .rv-card__date { font-size: 12.5px; }

/* --- подвал карточки: «Читать далее» + короткая ссылка на площадку --- */
body[class*="new-design"] .rv-card__foot,
body.nd-hybrid .rv-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 12px;
}
body[class*="new-design"] .rv-card__foot .rv-card__more,
body.nd-hybrid .rv-card__foot .rv-card__more {
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--accent, #E11D2E); background: none; border: 0;
  padding: 0; cursor: pointer;
}
body[class*="new-design"] .rv-card__foot .rv-card__more:hover,
body.nd-hybrid .rv-card__foot .rv-card__more:hover { color: var(--accent-2, #B8152B); }
body[class*="new-design"] .rv-card__source,
body.nd-hybrid .rv-card__source {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  font-size: 12.5px; font-weight: 700;
  color: var(--muted, #6E6E76) !important;
  text-decoration: none;
  transition: color .15s var(--ease, ease);
}
body[class*="new-design"] .rv-card__source:hover,
body.nd-hybrid .rv-card__source:hover { color: var(--ink, #0E0E12) !important; }
body[class*="new-design"] .rv-card__source svg,
body.nd-hybrid .rv-card__source svg { flex: none; }
body[class*="new-design"] .rv-card__platform-mark,
body.nd-hybrid .rv-card__platform-mark { display: inline-flex; flex: none; }

@media (max-width: 1100px) {
  body[class*="new-design"] .h2b-reviews .rv-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  body[class*="new-design"] .h2b-reviews .rv-grid { grid-template-columns: 1fr; }
  body[class*="new-design"] .h2b-reviews .rv-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body[class*="new-design"] .h2b-reviews .rv-tabs::-webkit-scrollbar { display: none; }
  body[class*="new-design"] .h2b-reviews .rv-tab { font-size: 13px; padding: 10px 12px; white-space: nowrap; }
}


body.new-design-home .h2b-vrev-play svg {
  padding: 12px;
  background: rgba(255,255,255,.94);
  color: var(--accent, #E11D2E);
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(14,14,16,.35);
  transition: transform .15s var(--ease, ease);
}
body.new-design-home .h2b-vrev-card:hover .h2b-vrev-play svg { transform: scale(1.1); }


/* 31.08.2026 — п. 32 Никиты: на главной фильтр площадок показывался дважды (бейджи
   в шапке блока + ряд вкладок виджета). Прячем ряд вкладок там, где виджет идёт
   под внешней шапкой; сами вкладки остаются в DOM — по ним кликают бейджи. */
body.nd-hybrid .rv-tabs--mirrored,
body[class*="new-design"] .rv-tabs--mirrored { display: none !important; }

/* 31.08.2026 (Ivan: «какая-то серая полоска под первым экраном») — между .h2-hero
   и следующей секцией оставался зазор 8px, и в нём просвечивал серый фон страницы
   (.page_home, #F7F7F9): у самих секций фон белый, а у контейнера .content — прозрачный.
   Закрываем зазор нижним отступом первого экрана: 8px хватает встык, берём 10px с запасом
   на округление при дробном масштабе. Фон соседних секций не трогаем — секция «Как проходит
   заказ» намеренно прозрачная и должна лежать на сером. */
body.new-design-home main.content > section.h2-hero,
body.nd-hybrid main.content > section.h2-hero { padding-bottom: 10px; }

/* 31.08.2026 (Ivan: «на стр о компании текст всё ещё сливается») — заголовок первого
   экрана /about/ лежит на фотографии и в исходной вёрстке белый (.ab-hero h1 { color:#fff }),
   но общее правило нового дизайна body.nd-hybrid main.content h1 { color:#0E0E12 }
   специфичнее (0,2,3 против 0,1,3) и перекрашивало его в чёрный — текст сливался с фото.
   Возвращаем белый селектором специфичнее и усиливаем затемнение под текстом. */
body.nd-hybrid main.content .ab-hero h1,
body[class*="new-design"] main.content .ab-hero h1 { color: #FFF; }
body.nd-hybrid main.content .ab-hero h1 span,
body[class*="new-design"] main.content .ab-hero h1 span { color: #FF3B4E; }


/* ============================================================
   31.08.2026 — ЗАГОЛОВКИ, ВАРИАНТ А (решение Ivan'а: «надо уйти от курсива,
   давай сделаем А вариант» — акцент цветом, без курсива и без антиквы).
   БЫЛО: секционные H2 — Instrument Serif 400 / 36px, акцент внутри <em> —
   красный курсив той же антиквы; H1 внутренних страниц — Montserrat 800
   с курсивным серифным акцентом.
   СТАЛО: всё Montserrat 800, акцент — тот же шрифт и вес, только var(--accent).
   ⛔ Первый экран главной НЕ ТРОГАЕМ: h1.hero-h1 em — красная плашка, принята 29.08,
   её правило объявлено с !important и идёт своим блоком.
   Декоративные цифры серифом (.st-num, .adv-n, .faq-num, .pdk-compare .v) — не заголовки,
   остаются как были.
   ============================================================ */

/* 1. Акцент внутри любых заголовков нового дизайна */
body.nd-hybrid main.content h1 em,
body.nd-hybrid main.content h2 em,
body.nd-hybrid main.content h3 em,
body[class*="new-design"] main.content h1:not(.hero-h1) em,
body[class*="new-design"] main.content h2 em,
body[class*="new-design"] main.content h3 em {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: inherit !important;
  letter-spacing: inherit;
  color: var(--accent, #E11D2E) !important;
  background: none;
  padding: 0;
}

/* 2. Сами заголовки секций — гротеск вместо антиквы */
body[class*="new-design"] .sec-h2,
body[class*="new-design"] main.content h2.sec-h2,
body.nd-hybrid .ndd-h2,
body.nd-hybrid .ndg-h2,
body.nd-hybrid .ndg-honest h2,
body.nd-hybrid .ndcr-h2,
body.nd-hybrid .ndc-h2,
body.nd-hybrid .ndqm .ndqm-h,
body.new-design-catalog .faq-section h2,
body.new-design-home .faq-section h2,
body.new-design-catalog .catalog-element--desc h2 {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-size: 34px;
  line-height: 1.14;
  letter-spacing: -.022em;
}

/* 3. На узком экране — как было в каноне: 26px */
@media (max-width: 860px) {
  body[class*="new-design"] .sec-h2,
  body.nd-hybrid .ndd-h2,
  body.nd-hybrid .ndg-h2,
  body.nd-hybrid .ndg-honest h2,
  body.nd-hybrid .ndcr-h2,
  body.nd-hybrid .ndc-h2,
  body.nd-hybrid .ndqm .ndqm-h { font-size: 26px; line-height: 1.16; }
}


/* 31.08.2026 — мобильные размеры секционных заголовков (проверка на 360/390 px).
   Список селекторов тот же, что в блоке «ЗАГОЛОВКИ, ВАРИАНТ А», плюс заголовки,
   у которых свои классы: .ab-heading (/about/), .ndkz-h2 (/kazakhstan/) и безклассовые
   H2 каталога. Без этого на /korea/ заголовки оставались 34 px, на /about/ — 33 px. */
@media (max-width: 860px) {
  body[class*="new-design"] .sec-h2,
  body[class*="new-design"] main.content h2.sec-h2,
  body[class*="new-design"] main.content .ndcd-body h2,
  body.new-design-catalog .faq-section h2,
  body.new-design-home .faq-section h2,
  body.new-design-catalog .catalog-element--desc h2,
  body.nd-hybrid .ab-heading,
  body[class*="new-design"] .ab-heading,
  body.nd-hybrid .ndkz-h2,
  body.nd-hybrid .ndd-h2,
  body.nd-hybrid .ndg-h2,
  body.nd-hybrid .ndg-honest h2,
  body.nd-hybrid .ndcr-h2,
  body.nd-hybrid .ndc-h2,
  body.nd-hybrid .ndqm .ndqm-h {
    font-size: 26px !important;
    line-height: 1.16;
    letter-spacing: -.02em;
  }
}


/* 31.08.2026 — модалка быстрой заявки: заголовок к варианту А (был серифным на главной,
   где класс body — new-design-home, а правило писалось под nd-hybrid) и крупнее чекбоксы. */
body[class*="new-design"] .ndqm .ndqm-h,
body.nd-hybrid .ndqm .ndqm-h {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-size: 26px;
  line-height: 1.16;
  letter-spacing: -.02em;
}
body[class*="new-design"] .ndqm .ndqm-h em,
body.nd-hybrid .ndqm .ndqm-h em {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: inherit !important;
  color: var(--accent, #E11D2E) !important;
}
@media (max-width: 860px) {
  .ndqm label input[type="checkbox"] { width: 20px; height: 20px; }
  .ndqm label { padding: 4px 0; }
}


/* Подписи соцсетей на главной обрезались многоточием («vk.com/encar…») —
   на телефоне разрешаем перенос. */
@media (max-width: 760px) {
  body[class*="new-design"] .h2bs-s,
  body.nd-hybrid .h2bs-s { white-space: normal; overflow: visible; line-height: 1.35; }
}

/* 31.08.2026 — увеличенные области нажатия на телефоне (проверка на 360/390 px).
   Метки-подписи чуть крупнее: 10-10.5px читались мелко. */
@media (max-width: 760px) {
  /* пилюли фильтров: были 31px */
  body[class*="new-design"] .brand-chip,
  body.nd-hybrid .brand-chip { min-height: 40px; }

  /* «Читать далее» и «На площадке» в отзывах: были 16-19px */
  body[class*="new-design"] .rv-card__more,
  body[class*="new-design"] .rv-card__source,
  body.nd-hybrid .rv-card__more,
  body.nd-hybrid .rv-card__source { display: inline-flex; align-items: center; min-height: 34px; }

  /* «Сбросить», «Подробнее», раскрытие SEO-текста: были 16-24px */
  body[class*="new-design"] .fm-reset,
  body[class*="new-design"] .h2-freset,
  body[class*="new-design"] .sec-link,
  body[class*="new-design"] .seo-toggle,
  body[class*="new-design"] .nd-explain-a,
  body.nd-hybrid .sec-link { display: inline-flex; align-items: center; min-height: 34px; }

  /* мелкие подписи: 10 и 10.5px → 11.5px */
  body[class*="new-design"] .c-label,
  body[class*="new-design"] .h2b-off-tag,
  body[class*="new-design"] .h2b-off-tag-lt,
  body[class*="new-design"] .h2b-off-tag-kr,
  body[class*="new-design"] .sec-eyebrow,
  body.nd-hybrid .ndc-card-tag { font-size: 12px; }
}

/* 31.08.2026 — шапка подборки под фильтром на телефоне: подпись и ссылка вставали
   в одну строку и переносились друг на друга. */
@media (max-width: 760px) {
  body[class*="new-design"] .h2-preset-head,
  body.nd-hybrid .h2-preset-head {
    flex-direction: column; align-items: flex-start; gap: 8px;
  }
  body[class*="new-design"] .h2-preset-head .sec-link { margin-left: 0; }
}


/* 31.08.2026 — метки на фото и надзаголовки в каталоге: часть осталась 10.5px. */
@media (max-width: 760px) {
  body[class*="new-design"] .c-label,
  body.nd-hybrid .c-label { font-size: 12px !important; }
  body[class*="new-design"] .sec-eyebrow,
  body.nd-hybrid .sec-eyebrow { font-size: 12px !important; }
}

/* 31.08.2026 — метки на фото карточек: после укрупнения до 11.5px длинные («В наличии
   в Корее») обрезались. Разрешаем перенос и ограничиваем ширину карточкой. */
@media (max-width: 760px) {
  body[class*="new-design"] .c-label,
  body.nd-hybrid .c-label {
    white-space: normal;
    max-width: calc(100% - 16px);
    line-height: 1.25;
  }
}

/* 31.08.2026 — добор: у меток каталога аукциона («аукцион 2 сентября 2026», 201px текста
   при 190px карточки) стоял nowrap с многоточием и правило переноса не побеждало
   по специфичности. Разрешаем перенос принудительно. */
@media (max-width: 760px) {
  body[class*="new-design"] main.content .c-labels .c-label,
  body.nd-hybrid main.content .c-labels .c-label {
    white-space: normal !important;
    text-overflow: clip !important;
    line-height: 1.25;
  }
}

/* 31.08.2026 — ряд площадок возвращён в строку с заголовком (Ivan: «перенеси обратно»).
   Перенос под заголовок откатан; чтобы ряд не упирался в правый край, разрешаем
   переносить бейджи на вторую строку и прижимаем их к правому краю. */
body[class*="new-design"] .h2b-reviews .sec-head,
body.nd-hybrid .h2b-reviews .sec-head { flex-wrap: wrap; }
body[class*="new-design"] .h2b-rv-srcs,
body.nd-hybrid .h2b-rv-srcs { justify-content: flex-end; max-width: 100%; }

/* Бейджи площадок: у самого бейджа padding был 0 — рамка вплотную к тексту.
   Даём воздух внутри и чуть больше расстояние между значком и названием. */
body[class*="new-design"] .h2b-rv-src,
body.nd-hybrid .h2b-rv-src {
  padding: 9px 14px !important;
  gap: 9px;
  border-radius: 12px;
}
body[class*="new-design"] .rv-badge-filter,
body.nd-hybrid .rv-badge-filter { padding: 9px 14px !important; }
@media (max-width: 760px) {
  body[class*="new-design"] .h2b-rv-srcs,
  body.nd-hybrid .h2b-rv-srcs { justify-content: flex-start; }
  body[class*="new-design"] .h2b-rv-src,
  body.nd-hybrid .h2b-rv-src { padding: 8px 12px !important; }
}

/* 31.08.2026 — карточки отзывов одной высоты в ряду (было align-items: start,
   короткий отзыв давал карточку на 47px ниже соседних). */
body[class*="new-design"] .rv-grid,
body.nd-hybrid .rv-grid { align-items: stretch !important; }
body[class*="new-design"] .rv-card,
body.nd-hybrid .rv-card { height: 100%; }
body[class*="new-design"] .rv-card__body,
body.nd-hybrid .rv-card__body { flex: 1 1 auto; display: flex; flex-direction: column; }
/* нижняя строка карточки — к низу, чтобы ссылки шли на одном уровне.
   06.09.2026 (замечание Никиты «текст отзыва висит внизу карточки»): раньше тут стоял
   селектор «> *:last-child». У короткого отзыва подвала со ссылкой «Читать далее» нет,
   поэтому последним элементом оказывался сам текст — он получал margin-top:auto и уезжал
   к нижнему краю, а под звёздами зияла пустота (карточка «Паша П.» на главной).
   Теперь к низу прижимается только подвал карточки, текст всегда сразу под звёздами. */
body[class*="new-design"] .rv-card__body > .rv-card__foot,
body.nd-hybrid .rv-card__body > .rv-card__foot { margin-top: auto; }

/* 31.08.2026 — кнопка «плей» в видеоотзывах: белый кружок был пуст, значок схлопывался
   в точку. Рисуем кружок фоном самого значка — так он не зависит от раскладки карточки. */
body[class*="new-design"] .h2b-vrev-play svg,
body.nd-hybrid .h2b-vrev-play svg {
  width: 56px !important;
  height: 56px !important;
  flex: none;
  padding: 16px 14px 16px 18px;
  box-sizing: border-box;
  background: rgba(255,255,255,.94);
  border-radius: 50%;
  color: var(--accent, #E11D2E);
  fill: currentColor;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  transition: transform .18s var(--ease, ease), background .18s var(--ease, ease);
}
body[class*="new-design"] .h2b-vrev-card:hover .h2b-vrev-play svg,
body.nd-hybrid .h2b-vrev-card:hover .h2b-vrev-play svg { transform: scale(1.06); background: #FFF; }

/* 31.08.2026 — «лишняя чёрная полоса в футере»: у .footer был padding-top 64px на тёмном
   фоне, и над красной полосой «Остались вопросы» оставалась чёрная лента. */
body[class*="new-design"] footer.footer,
body.nd-hybrid footer.footer { padding-top: 0 !important; }
body[class*="new-design"] footer.footer .ft-cta,
body.nd-hybrid footer.footer .ft-cta { margin-top: 0; }

/* 31.08.2026 — логотип Encar в баннере каталога (Ivan прислал файл): бокс под картинку
   шире круглой иконки, фон белый, чтобы логотип читался на серой плашке. */
body[class*="new-design"] .nd-explain-i--logo,
body.nd-hybrid .nd-explain-i--logo {
  width: auto; min-width: 88px; height: 46px; padding: 8px 12px;
  background: #FFF; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
body[class*="new-design"] .nd-explain-i--logo img,
body.nd-hybrid .nd-explain-i--logo img { width: auto; max-width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 760px) {
  body[class*="new-design"] .nd-explain-i--logo,
  body.nd-hybrid .nd-explain-i--logo { min-width: 74px; height: 40px; padding: 6px 10px; }
}

/* 31.08.2026 — выравнивание логотипа в баннере каталога: к верхней строке, с отступом. */
body[class*="new-design"] .nd-explain-i--logo,
body.nd-hybrid .nd-explain-i--logo { align-self: flex-start; flex: none; margin-right: 4px; }
body[class*="new-design"] .nd-explain:has(.nd-explain-i--logo),
body.nd-hybrid .nd-explain:has(.nd-explain-i--logo) { align-items: flex-start; }

/* 31.08.2026 — баннер каталога с логотипом: первая колонка сетки была жёсткой (44px под
   круглую иконку) и логотип наползал на текст. Для варианта с логотипом — auto. */
body[class*="new-design"] .nd-explain:has(.nd-explain-i--logo),
body.nd-hybrid .nd-explain:has(.nd-explain-i--logo) {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

/* ============================================================
   31.08.2026 — блок «Что вы ищете?», вариант Б (выбор Ivan'а): конструктор запроса
   вместо шести одинаковых карточек-пресетов. Разметка — includes/nd-home-shared/qpicks.php.
   Тёмная плашка со строкой «Ищу … до … с доставкой в …», живой счётчик и кнопка;
   прежние подборки — пилюлями ниже.
   ⛔ .qpicks — прямая секция main.content, её красит общее правило белым !important,
   поэтому тёмный фон только у внутренней плашки .qpb, саму секцию не трогаем.
   ============================================================ */
body[class*="new-design"] .qpb,
body.nd-hybrid .qpb {
  margin-top: 24px;
  background: var(--ink, #0E0E12);
  border-radius: var(--radius-lg, 20px);
  padding: 28px 30px;
  color: #FFF;
}
body[class*="new-design"] .qpb-line,
body.nd-hybrid .qpb-line {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 23px; font-weight: 800; letter-spacing: -.01em;
}
body[class*="new-design"] .qpb-w { white-space: nowrap; }
body[class*="new-design"] .qpb-sel { position: relative; display: inline-flex; }
body[class*="new-design"] .qpb-sel::after {
  content: ''; position: absolute; right: 15px; top: 50%; width: 9px; height: 9px;
  border-right: 2.4px solid rgba(255,255,255,.55); border-bottom: 2.4px solid rgba(255,255,255,.55);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
body[class*="new-design"] .qpb-sel select,
body.nd-hybrid .qpb-sel select {
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 13px;
  padding: 11px 38px 11px 16px;
  font: inherit; font-size: 20px; font-weight: 800; color: #FFF;
  cursor: pointer; min-height: 0; line-height: 1.2;
  transition: border-color .15s var(--ease, ease), background .15s var(--ease, ease);
}
body[class*="new-design"] .qpb-sel select:hover { background: rgba(255,255,255,.16); }
body[class*="new-design"] .qpb-sel select:focus { outline: none; border-color: rgba(255,255,255,.5); }
body[class*="new-design"] .qpb-sel select option { color: #0E0E12; font-size: 15px; }

body[class*="new-design"] .qpb-res,
body.nd-hybrid .qpb-res {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
body[class*="new-design"] .qpb-cnt { font-size: 15px; color: rgba(255,255,255,.7); }
body[class*="new-design"] .qpb-cnt b { color: #FFF; font-size: 24px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
body[class*="new-design"] .qpb-btn,
body.nd-hybrid .qpb-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent, #E11D2E); color: #FFF; text-decoration: none;
  border-radius: 12px; padding: 15px 26px; font-size: 15px; font-weight: 800;
  min-height: 44px; box-shadow: 0 3px 0 var(--accent-2, #B8152B);
  transition: transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease);
}
body[class*="new-design"] .qpb-btn:hover { transform: translateY(1px); box-shadow: 0 2px 0 var(--accent-2, #B8152B); color: #FFF; }
body[class*="new-design"] .qpb-btn.is-off { opacity: .5; pointer-events: none; }
body[class*="new-design"] .qpb-hint { font-size: 12.5px; color: rgba(255,255,255,.45); margin-top: 14px; }
body[class*="new-design"] .qpb-hint b { color: rgba(255,255,255,.75); font-weight: 700; }

/* --- пилюли готовых подборок --- */
body[class*="new-design"] .qp-presets, body.nd-hybrid .qp-presets { margin-top: 22px; }
body[class*="new-design"] .qp-plbl {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted, #6E6E76); margin-bottom: 12px;
}
body[class*="new-design"] .qp-pills { display: flex; gap: 9px; flex-wrap: wrap; }

body[class*="new-design"] .qp-pill,
body.nd-hybrid .qp-pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--bg-card, #FFF); border: 1px solid var(--line, #ECECF0);
  border-radius: 999px; padding: 11px 17px;
  text-decoration: none; color: inherit; font-size: 14px; font-weight: 600;
  transition: border-color .18s var(--ease, ease), transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease);
}
body[class*="new-design"] .qp-pill:hover {
  border-color: var(--ink-3, #3D3D48); transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 10px 28px rgba(14,14,16,.06)); color: inherit;
}
body[class*="new-design"] .qp-pill i {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  background: var(--accent-soft, #f0f0f3); color: var(--accent, #E11D2E);
  display: inline-flex; align-items: center; justify-content: center;
}
body[class*="new-design"] .qp-pill i svg { width: 13px; height: 13px; display: block; }
body[class*="new-design"] .qp-pill span { color: var(--muted, #6E6E76); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- телефон --- */
@media (max-width: 760px) {
  body[class*="new-design"] .qpb, body.nd-hybrid .qpb { padding: 20px 18px; margin-top: 18px; }
  body[class*="new-design"] .qpb-line { font-size: 17px; gap: 8px; }
  body[class*="new-design"] .qpb-sel { flex: 1 1 100%; }
  body[class*="new-design"] .qpb-sel select { width: 100%; font-size: 16px; padding: 12px 36px 12px 14px; }
  body[class*="new-design"] .qpb-res { gap: 12px; }
  body[class*="new-design"] .qpb-cnt { font-size: 14px; flex: 1 1 100%; }
  body[class*="new-design"] .qpb-cnt b { font-size: 21px; }
  body[class*="new-design"] .qpb-btn { margin-left: 0; width: 100%; justify-content: center; }
  body[class*="new-design"] .qp-pill { padding: 10px 14px; font-size: 13.5px; }
}

/* ============================================================
   31.08.2026 — наполнение правой панели блока «Как проходит заказ» (запрос Ivan'а):
   шаг 1 — форма заявки, шаг 2 — запрос шаблона договора, шаг 3 — видео погрузки,
   шаг 4 — сканы ЭПТС и СБКТС, шаг 5 — видео автовоза (без звука), шаг 6 — видеоотзыв VK.
   Панель узкая (~380px), поэтому всё вертикально и с одинаковыми скруглениями.
   ============================================================ */
body[class*="new-design"] .ndh-media[data-media="form"],
body[class*="new-design"] .ndh-media[data-media="doc-request"] { display: block; padding: 0; background: none; }

/* --- видео --- */
body[class*="new-design"] .ndh-video {
  width: 100%; display: block; border-radius: 14px; background: #0E0E12;
  max-height: 420px; object-fit: cover;
}
body[class*="new-design"] .ndh-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; background: #0E0E12;
}
body[class*="new-design"] .ndh-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body[class*="new-design"] .ndh-cap {
  display: block; margin-top: 10px; font-size: 12.5px; line-height: 1.5;
  color: var(--muted, #6E6E76);
}

/* --- сканы документов --- */
body[class*="new-design"] .ndh-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body[class*="new-design"] .ndh-doc {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line, #ECECF0); border-radius: 12px; overflow: hidden;
  background: #FFF; transition: border-color .18s var(--ease, ease), transform .18s var(--ease, ease);
}
body[class*="new-design"] .ndh-doc:hover { border-color: var(--ink-3, #3D3D48); transform: translateY(-2px); }
body[class*="new-design"] .ndh-doc img { width: 100%; display: block; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; }
body[class*="new-design"] .ndh-doc span {
  display: block; padding: 8px 10px; font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--ink, #0E0E12);
}

/* --- карточка «договор и отчёт» --- */
body[class*="new-design"] .ndh-docreq {
  background: var(--bg, #F7F7F9); border-radius: 14px; padding: 18px 18px 20px;
}
body[class*="new-design"] .ndh-docreq b { display: block; font-size: 16px; font-weight: 800; }
body[class*="new-design"] .ndh-docreq p { font-size: 13px; line-height: 1.55; color: var(--ink-3, #3D3D48); margin: 8px 0 0; }
body[class*="new-design"] .ndh-docreq-btn {
  display: inline-flex; align-items: center; justify-content: center; margin-top: 14px;
  min-height: 44px; padding: 12px 20px; border-radius: 12px;
  background: var(--ink, #0E0E12); color: #FFF; text-decoration: none; font-size: 13.5px; font-weight: 700;
}
body[class*="new-design"] .ndh-docreq-btn:hover { background: #1e1e24; color: #FFF; }

/* --- форма шага 1 --- */
body[class*="new-design"] .ndh-form {
  background: var(--bg, #F7F7F9); border-radius: 14px; padding: 18px; display: grid; gap: 9px;
}
body[class*="new-design"] .ndh-form b { font-size: 16px; font-weight: 800; }
body[class*="new-design"] .ndh-form p { font-size: 12.5px; line-height: 1.5; color: var(--muted, #6E6E76); margin: -3px 0 3px; }
body[class*="new-design"] .ndh-form input[type="tel"],
body[class*="new-design"] .ndh-form input[type="text"] {
  width: 100%; height: 44px; min-height: 0; border: 1px solid var(--line, #ECECF0);
  background: #FFF; border-radius: 11px; padding: 0 13px; font: inherit; font-size: 14px; color: var(--ink, #0E0E12);
}
body[class*="new-design"] .ndh-form input:focus { outline: none; border-color: var(--ink-3, #3D3D48); }
body[class*="new-design"] .ndh-cons {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12px; line-height: 1.4; color: var(--muted, #6E6E76); cursor: pointer;
}
body[class*="new-design"] .ndh-cons input { flex: none; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--accent, #E11D2E); }
body[class*="new-design"] .ndh-cons a { color: var(--ink, #0E0E12); text-decoration: underline; }
body[class*="new-design"] .ndh-form button {
  min-height: 46px; border: 0; border-radius: 12px; background: var(--accent, #E11D2E);
  color: #FFF; font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer;
  box-shadow: 0 3px 0 var(--accent-2, #B8152B);
}
body[class*="new-design"] .ndh-form button:hover { background: var(--accent-2, #B8152B); box-shadow: 0 2px 0 var(--accent-2, #B8152B); }
body[class*="new-design"] .ndh-form button:disabled { opacity: .6; cursor: default; }
/* 06.09.2026: подпись под формой была #B4B4BE — контраст 2.72 на белом */
body[class*="new-design"] .ndh-form-note { font-size: 12px; color: var(--muted, #6E6E76); line-height: 1.4; }
body[class*="new-design"] .ndh-media .nd-lead-ok {
  padding: 16px; text-align: center; color: #1F8A4C; font-weight: 700; font-size: 13.5px; line-height: 1.5;
  background: #f7f7f9; border: 1px solid #CDE9D6; border-radius: 12px;
}

@media (max-width: 760px) {
  body[class*="new-design"] .ndh-docs { grid-template-columns: 1fr 1fr; }
  body[class*="new-design"] .ndh-video { max-height: 320px; }
}

/* 31.08.2026 — доводка панели «Как проходит заказ»: метка шага не должна наезжать
   на форму и карточку договора, а нижняя кнопка панели дублирует кнопку формы. */
body[class*="new-design"] .ndh-media[data-media="form"] .ndh-form,
body[class*="new-design"] .ndh-media[data-media="doc-request"] .ndh-docreq { padding-top: 44px; }
body[class*="new-design"] .ndh-media[data-media="form"] .ndh-lab,
body[class*="new-design"] .ndh-media[data-media="doc-request"] .ndh-lab { top: 14px; left: 14px; }
body[class*="new-design"] .ndh-aside:has(.ndh-media[data-media="form"]) .ndh-btn { display: none; }
body[class*="new-design"] .ndh-aside:has(.ndh-media[data-media="form"]) .ndh-sec { margin-top: 4px; }

/* 31.08.2026 — раскладка новых типов панели: содержимое идёт сверху вниз,
   подпись — на всю ширину под медиа. */
body[class*="new-design"] .ndh-media[data-media="docs"],
body[class*="new-design"] .ndh-media[data-media="video"],
body[class*="new-design"] .ndh-media[data-media="vk"] { display: block; }
body[class*="new-design"] .ndh-media .ndh-cap { width: 100%; }
body[class*="new-design"] .ndh-media[data-media="docs"] .ndh-docs { margin-top: 40px; }
body[class*="new-design"] .ndh-media[data-media="video"] .ndh-video,
body[class*="new-design"] .ndh-media[data-media="vk"] .ndh-embed { margin-top: 40px; }

/* 31.08.2026 — шаг 2: видеоотчёт с осмотра над карточкой договора. */
body[class*="new-design"] .ndh-media[data-media="doc-request"] { display: block; }
body[class*="new-design"] .ndh-media[data-media="doc-request"] .ndh-embed { margin-top: 40px; }
body[class*="new-design"] .ndh-media[data-media="doc-request"] .ndh-docreq { padding-top: 18px; margin-top: 12px; }

/* 31.08.2026 — панель «Как проходит заказ»: у .ndh-media была фиксированная высота под фото
   и overflow: hidden — на шаге 2 обрезалась карточка договора под видео, а подписи под
   видео и сканами не помещались. Для новых типов высота по содержимому. */
body[class*="new-design"] .ndh-media[data-media="form"],
body[class*="new-design"] .ndh-media[data-media="doc-request"],
body[class*="new-design"] .ndh-media[data-media="docs"],
body[class*="new-design"] .ndh-media[data-media="video"],
body[class*="new-design"] .ndh-media[data-media="vk"] {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  padding-bottom: 16px;
}

/* 31.08.2026 — сканы документов на телефоне: одна колонка вместо двух (в двух текст
   документа нечитаем), пропорции — по самому документу. */
@media (max-width: 760px) {
  body[class*="new-design"] .ndh-media[data-media="docs"] .ndh-docs { grid-template-columns: 1fr !important; }
  body[class*="new-design"] .ndh-doc img { aspect-ratio: auto; }
}

/* 31.08.2026 — форма шага 1: обводка вокруг формы (запрос Ivan'а). */
body[class*="new-design"] .ndh-media[data-media="form"] .ndh-form {
  background: var(--bg-card, #FFF);
  border: 2px solid var(--accent, #E11D2E);
  border-radius: 16px;
  padding: 44px 20px 20px;
  box-shadow: 0 10px 28px rgba(225,29,46,.10);
}
body[class*="new-design"] .ndh-media[data-media="form"] .ndh-form input[type="tel"],
body[class*="new-design"] .ndh-media[data-media="form"] .ndh-form input[type="text"] {
  background: var(--bg, #F7F7F9);
}
body[class*="new-design"] .ndh-media[data-media="form"] .ndh-lab {
  background: var(--accent, #E11D2E); color: #FFF;
}

/* Кнопка скачивания договора + подпись под ней */
body[class*="new-design"] .ndh-docreq-btn { gap: 9px; }
body[class*="new-design"] .ndh-docreq-note {
  display: block; margin-top: 9px; font-size: 12px; line-height: 1.45; color: var(--muted, #6E6E76);
}

/* Единый вид подписи под медиа на всех шагах — как под видео шага 2. */
body[class*="new-design"] .ndh-media .ndh-cap {
  display: block; width: 100%; margin-top: 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--muted, #6E6E76);
}

/* 31.08.2026 — единый размер медиа-окна на шагах 3-6: как у видео шага 2 (16/9).
   Было: видео 610x420 (пропорции исходника), сканы 610x431 (сетка 3/4). */
body[class*="new-design"] .ndh-media[data-media="video"] .ndh-video {
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: none;
  object-fit: cover;
}
body[class*="new-design"] .ndh-media[data-media="docs"] .ndh-docs {
  aspect-ratio: 16 / 9;
}
body[class*="new-design"] .ndh-media[data-media="docs"] .ndh-doc {
  display: flex; flex-direction: column; min-height: 0;
}
body[class*="new-design"] .ndh-media[data-media="docs"] .ndh-doc img {
  flex: 1 1 auto; min-height: 0; height: auto; aspect-ratio: auto;
  object-fit: cover; object-position: top center;
}
/* На телефоне сканы идут в одну колонку — там 16/9 расплющило бы документ. */
@media (max-width: 760px) {
  body[class*="new-design"] .ndh-media[data-media="docs"] .ndh-docs { aspect-ratio: auto; }
  body[class*="new-design"] .ndh-media[data-media="docs"] .ndh-doc img { flex: 0 0 auto; }
}

/* 31.08.2026 — подпись под медиа на шагах 3-6 сидела на серой плашке: у .ndh-media
   базовый фон #ECECF0, и он выступал из-под видео/сканов. У шага 2 фон уже снят —
   приводим остальные типы к нему. */
body[class*="new-design"] .ndh-media[data-media="video"],
body[class*="new-design"] .ndh-media[data-media="docs"],
body[class*="new-design"] .ndh-media[data-media="vk"] {
  background: none;
  border-radius: 0;
}

/* 31.08.2026 (Ivan: «шаги в моб версии съезжают»). Точка шага стояла по left: -31px,
   а отступ таймлайна на телефоне 30px против 36px на компьютере — из-за этого центр
   точки уезжал с вертикальной линии (10px против 12px) и налезал на край контейнера.
   Привязываем точку к тому же отступу через переменную: центр точки всегда 12px —
   ровно центр линии, при любом брейкпоинте. */
body[class*="new-design"] .ndh-line { --ndh-pad: 36px; padding-left: var(--ndh-pad); }
body[class*="new-design"] .ndh-step::before { left: calc(3px - var(--ndh-pad)); }
@media (max-width: 700px) {
  body[class*="new-design"] .ndh-line { --ndh-pad: 30px; }
}


/* 31.08.2026 — строка мессенджеров под кнопкой в панели «Как проходит заказ»
   (была одна ссылка .ndh-sec, стало три: Telegram, WhatsApp, MAX). */
body[class*="new-design"] .ndh-mes { margin-top: 12px; }
body[class*="new-design"] .ndh-mes-t {
  display: block; font-size: 12.5px; color: var(--muted, #6E6E76); margin-bottom: 8px;
}
body[class*="new-design"] .ndh-mes-row { display: flex; gap: 8px; flex-wrap: wrap; }
body[class*="new-design"] .ndh-mes-row a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px;
  padding: 8px 13px; border: 1px solid var(--line, #ECECF0); border-radius: 10px;
  background: #FFF; font-size: 13px; font-weight: 700; color: var(--ink, #0E0E12);
  text-decoration: none; transition: border-color .18s ease, transform .18s ease;
}
body[class*="new-design"] .ndh-mes-row a:hover { border-color: var(--ink-3, #3D3D48); transform: translateY(-1px); }
body[class*="new-design"] .ndh-mes-row a img { flex: none; }
@media (max-width: 700px) {
  /* три равные кнопки в один ряд — иначе третья (MAX) переносилась и занимала всю ширину */
  body[class*="new-design"] .ndh-mes-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  body[class*="new-design"] .ndh-mes-row a { justify-content: center; padding: 8px 6px; font-size: 12px; gap: 5px; }
}


/* 31.08.2026 (Ivan: «некрасиво выглядит заголовок, надо чтобы располагался ровно»).
   На телефоне текст тёк как обычный инлайн: «с выгодой» оставалось в первой строке рядом
   с «Авто из Кореи», а «от 500 000 ₽» уезжало на вторую — красная плашка разрывалась
   на две части разной длины. Делаем акцент блоком по ширине содержимого: каждая смысловая
   часть занимает свою строку, плашка всегда целая. Если она не влезает по ширине —
   текст внутри переносится, строк становится четыре, и nd-h1fit.js сам уменьшит размер. */
@media (max-width: 700px) {
  body[class*="new-design"] h1.hero-h1 em { display: block; width: fit-content; }
}

/* 31.08.2026 (Ivan: «в мобилке в отзывах дата съезжает»). Строка «звёзды + дата» —
   flex, и на узкой карточке дата сжималась и ломалась на две строки («7 июля / 2026»),
   уезжая ниже звёзд. Дату не сжимаем и не рвём; если места мало — переносим целиком. */
body[class*="new-design"] .rv-card__date-stars,
body.nd-hybrid .rv-card__date-stars { flex-wrap: wrap; gap: 4px 10px; }
body[class*="new-design"] .rv-card__date,
body.nd-hybrid .rv-card__date { white-space: nowrap; flex: 0 0 auto; }
body[class*="new-design"] .rv-card__date-stars .rv-stars,
body.nd-hybrid .rv-card__date-stars .rv-stars { flex: 0 0 auto; }

/* 31.08.2026 (Ivan: «текст шага надо растянуть нормально по ширине контента»).
   В карточке «Договор и отчёт об осмотре» на телефоне абзац шёл шрифтом 15.5px при
   внутренних полях 18px — строки получались короткими, текст выглядел узкой колонкой.
   Уменьшаем поля и кегль: строка становится длиннее, карточка — во всю ширину панели. */
@media (max-width: 700px) {
  body[class*="new-design"] .ndh-docreq { padding: 14px 14px 16px; }
  body[class*="new-design"] .ndh-docreq p { font-size: 13.5px; line-height: 1.5; }
  body[class*="new-design"] .ndh-docreq b { font-size: 15px; }
  body[class*="new-design"] .ndh-docreq-btn { width: 100%; padding: 12px 14px; }
}

/* 31.08.2026 (Ivan: «тут текст слипся с футером»). У секции с SEO-текстом внизу главной
   не было собственных отступов — абзац упирался прямо в красную полосу «Остались вопросы». */
body[class*="new-design"] section.h2-seo-tail { padding: 30px 0 38px; }
body[class*="new-design"] section.h2-seo-tail .h2-filter-text {
  margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted, #6E6E76);
}
@media (max-width: 700px) {
  body[class*="new-design"] section.h2-seo-tail { padding: 22px 0 30px; }
}

/* 31.08.2026 — поправки к правкам выше: конкуренты имели большую специфичность.
   1) кегль абзаца в карточке договора перебивало общее `main.content p` (15.5px);
   2) отступы SEO-секции — общее `main.content > section` (34px сверху, 0 снизу);
   3) дату отзыва переносило на свою строку — держим её в строке со звёздами. */
body[class*="new-design"] main.content .ndh-docreq p { font-size: 13px; line-height: 1.55; }
@media (max-width: 700px) {
  body[class*="new-design"] main.content .ndh-docreq p { font-size: 13.5px; line-height: 1.5; }
}
body[class*="new-design"] main.content > section.h2-seo-tail { padding: 30px 0 38px; }
@media (max-width: 700px) {
  body[class*="new-design"] main.content > section.h2-seo-tail { padding: 22px 0 30px; }
}
body[class*="new-design"] .rv-card__date-stars,
body.nd-hybrid .rv-card__date-stars { flex-wrap: nowrap; gap: 8px; }
body[class*="new-design"] .rv-card__date,
body.nd-hybrid .rv-card__date { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 700px) {
  /* на узкой карточке звёзды чуть мельче — иначе дата не помещается рядом */
  body[class*="new-design"] .h2b-reviews .rv-card__date-stars .rv-star,
  body[class*="new-design"] .h2b-reviews .rv-card__date-stars .rv-stars svg { width: 15px; height: 15px; }
  body[class*="new-design"] .h2b-reviews .rv-card__date { font-size: 12px; }
}


/* 31.08.2026 (Ivan: «тут вот отступ большой») — между списком шагов и панелью с видео
   на телефоне копилось 74px пустоты: зазор сетки 18 + поля панели 16 + отступ медиа 40
   (его ставили под метку «Шаг N», но метка лежит поверх кадра и места над ним не требует). */
@media (max-width: 700px) {
  body[class*="new-design"] .ndh-wrap { gap: 12px; }
  body[class*="new-design"] .ndh-aside { padding: 12px; }
  body[class*="new-design"] .ndh-media[data-media="video"] .ndh-video,
  body[class*="new-design"] .ndh-media[data-media="vk"] .ndh-embed,
  body[class*="new-design"] .ndh-media[data-media="doc-request"] .ndh-embed,
  body[class*="new-design"] .ndh-media[data-media="docs"] .ndh-docs { margin-top: 0; }
}

/* 31.08.2026 (Ivan: «тут текст надо чуть растянуть») — карточка «Договор и отчёт об
   осмотре» на телефоне имела собственные поля 14px внутри панели, из-за чего её текст
   заканчивался левее подписи под видео и колонка казалась узкой. Убираем боковые поля
   и подложку: текст идёт от края до края панели, в одну линию с подписью. */
@media (max-width: 700px) {
  body[class*="new-design"] .ndh-docreq {
    background: none; padding: 6px 0 0; border-top: 1px solid var(--line, #ECECF0); margin-top: 14px;
  }
  body[class*="new-design"] .ndh-docreq b { margin-top: 8px; }
}


/* 31.08.2026 (Ivan: «текст надо адекватно расположить и возможно сделать спойлер»).
   На телефоне баннер каталога держал логотип и текст в одной строке — описание уходило
   в узкую колонку и занимало пол-экрана. Логотип и заголовок ставим в строку, описание —
   во всю ширину и сворачиваем до двух строк с кнопкой. */
body[class*="new-design"] .nd-explain-more,
body.nd-hybrid .nd-explain-more { display: none; }
@media (max-width: 700px) {
  body[class*="new-design"] .nd-explain,
  body.nd-hybrid .nd-explain {
    display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center;
  }
  body[class*="new-design"] .nd-explain-i--logo,
  body.nd-hybrid .nd-explain-i--logo { align-self: center; margin: 0; }
  body[class*="new-design"] .nd-explain-b,
  body.nd-hybrid .nd-explain-b { display: contents; }
  body[class*="new-design"] .nd-explain-t,
  body.nd-hybrid .nd-explain-t { grid-column: 2; margin: 0; }
  body[class*="new-design"] .nd-explain-d,
  body.nd-hybrid .nd-explain-d {
    grid-column: 1 / -1; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  body[class*="new-design"] .nd-explain-d.is-open,
  body.nd-hybrid .nd-explain-d.is-open { -webkit-line-clamp: unset; overflow: visible; }
  body[class*="new-design"] .nd-explain-more,
  body.nd-hybrid .nd-explain-more {
    display: inline-flex; align-items: center; grid-column: 1 / -1; justify-self: start;
    min-height: 32px; padding: 0; border: 0; background: none;
    font: 700 12.5px/1.2 'Montserrat', sans-serif; color: var(--accent, #E11D2E); cursor: pointer;
  }
  body[class*="new-design"] .nd-explain-a,
  body.nd-hybrid .nd-explain-a { grid-column: 1 / -1; justify-self: start; }
}

/* 31.08.2026 (Ivan): «"что на аукционе" убери из моб версии, и кнопку "подробнее" сделай
   более понятной, что там раскроется что-то, и менее заметной». Ссылку на аукцион на
   телефоне прячем (на компьютере остаётся), кнопку-раскрытие делаем серой со стрелкой,
   которая переворачивается при раскрытии. */
@media (max-width: 700px) {
  body[class*="new-design"] .nd-explain-a,
  body.nd-hybrid .nd-explain-a { display: none; }

  body[class*="new-design"] .nd-explain-more,
  body.nd-hybrid .nd-explain-more {
    gap: 6px; font-weight: 600; font-size: 12.5px; color: var(--muted, #6E6E76);
    text-decoration: none;
  }
  body[class*="new-design"] .nd-explain-more::after,
  body.nd-hybrid .nd-explain-more::after {
    content: ""; width: 7px; height: 7px; margin-top: -3px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .18s ease;
  }
  body[class*="new-design"] .nd-explain-more[aria-expanded="true"]::after,
  body.nd-hybrid .nd-explain-more[aria-expanded="true"]::after {
    transform: rotate(-135deg); margin-top: 2px;
  }
}

/* 31.08.2026 (Ivan): плашка статуса в карточке на телефоне занимала две строки
   («В НАЛИЧИИ · В КАТАЛОГЕ 32 ДНЯ · ЦЕНА ОБНОВЛЕНА СЕГОДНЯ») — прячем срок в каталоге,
   остаётся наличие и свежесть цены. Кнопку связи держим в одну строку. */
@media (max-width: 700px) {
  body[class*="new-design"] .po-live-days,
  body.nd-hybrid .po-live-days { display: none; }
  body[class*="new-design"] .po-contact-btn,
  body.nd-hybrid .po-contact-btn { white-space: nowrap; }
}


/* 01.09.2026 — выравнивание контента по колонке шапки на остальных страницах.
   1) SEO-блок внизу каталога был отцентрирован (max-width: 960px + auto): его левый край
      уезжал на 238px правее шапки, тогда как весь остальной каталог выровнен по левому.
   2) На /bikes/ вложенные легаси-контейнеры (.faq → .box-slider) накапливали собственные
      паддинги: заголовок стоял на 121px вместо 32px. */
body[class*="new-design"] .seo-section .seo-wrap,
body.nd-hybrid .seo-section .seo-wrap { margin-left: 0; margin-right: 0; }


body[class*="new-design"] .catalog-element--desc,
body.nd-hybrid .catalog-element--desc { margin-left: 0; margin-right: 0; }


/* описание категории каталога центрировалось правилом с !important — перебиваем тем же */
body[class*="new-design"] .catalog-element--desc,
body.new-design-catalog .catalog-element--desc,
body.nd-hybrid .catalog-element--desc { margin-left: 0 !important; margin-right: 0 !important; }


body[class*="new-design"] .catalog-element--desc,
body.new-design-catalog .catalog-element--desc,
body.nd-hybrid .catalog-element--desc {
  max-width: 1520px !important; margin-left: auto !important; margin-right: auto !important;
  padding-left: 24px; padding-right: 24px;
}
@media (min-width: 1280px) { body[class*="new-design"] .catalog-element--desc { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1600px) { body[class*="new-design"] .catalog-element--desc { padding-left: 40px; padding-right: 40px; } }
body[class*="new-design"] .catalog-element--desc .ndcd-body { max-width: 960px; }
/* паддинги колонки для описания каталога — с !important: у соседних правил каталога он есть */
body[class*="new-design"] .catalog-element--desc,
body.new-design-catalog .catalog-element--desc { padding-left: 24px !important; padding-right: 24px !important; }
@media (min-width: 1280px) {
  body[class*="new-design"] .catalog-element--desc,
  body.new-design-catalog .catalog-element--desc { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (min-width: 1600px) {
  body[class*="new-design"] .catalog-element--desc,
  body.new-design-catalog .catalog-element--desc { padding-left: 40px !important; padding-right: 40px !important; }
}


/* 01.09.2026 (SEO-аудит): точка после суммы в H1 главной больше не лежит в тексте
   заголовка (поисковик видел «₽ . за 15–45 дней»), рисуем её стилем — только на телефоне. */
@media (max-width: 700px) {
  body[class*="new-design"] h1.hero-h1 em .nb::after { content: .; }
}

/* 02.09.2026 — окно выбора города: на телефоне список в две колонки обрезал длинные
   названия («Санкт-Пет…», «Новосиби…»). Даём переносить слово и чуть уменьшаем кегль. */
@media (max-width: 700px) {
  body .cities-list a { white-space: normal; overflow-wrap: anywhere; font-size: 15px; line-height: 1.25; }
  body .cities-list li { padding-top: 6px; padding-bottom: 6px; }
}
body .cities-list__all a { font-weight: 700; }

/* 02.09.2026 (аудит Никиты, п.2.3 — самая частая находка): плавающая кнопка чата
   висит поверх содержимого и накрывает то кнопку «Показать» в подборе, то поле выбора
   цены, то список банков на «Кредите». Даём странице нижний воздух, чтобы под виджетом
   не оставалось кликабельных элементов, и приподнимаем сам виджет над краем. */
body[class*="new-design"] main.content,
body.nd-hybrid main.content { padding-bottom: 96px; }
@media (max-width: 700px) {
  body[class*="new-design"] main.content,
  body.nd-hybrid main.content { padding-bottom: 84px; }
}

/* 02.09.2026 (аудит Никиты: «при клике читать далее ничего не происходит»). Полный текст
   отзыва теперь приходит (правка в reviews-widget.js), но карточка держала его в трёх
   строках: высота фиксирована для ровной сетки, а превью обрезано line-clamp. Раскрытой
   карточке снимаем и то, и другое — опираемся на состояние самой кнопки, потому что
   класс rv-card--expanded теряется при перерисовке виджета. */
body[class*="new-design"] .rv-card:has(.rv-card__more[aria-expanded="true"]),
body.nd-hybrid .rv-card:has(.rv-card__more[aria-expanded="true"]) { height: auto; align-self: start; }
body[class*="new-design"] .rv-card:has(.rv-card__more[aria-expanded="true"]) .rv-card__preview,
body.nd-hybrid .rv-card:has(.rv-card__more[aria-expanded="true"]) .rv-card__preview {
  display: block; -webkit-line-clamp: unset; overflow: visible; max-height: none;
}


/* 03.09.2026 (аудит 3.3): подборки на телефоне — ровная сетка 2 на 3 вместо строки
   с рваным правым краем. Блок стоит в конце файла намеренно: правило .qp-pill с полями
   и кеглем объявлено ниже по файлу и при равной специфичности перебивало эти значения. */
/* 03.09.2026 (аудит 3.3): шесть подборок шли строкой и переносились по ширине текста —
   правый край получался рваный. На телефоне раскладываем ровной сеткой 2 на 3. */
@media (max-width: 640px) {
  body[class*="new-design"] .qp-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  /* Плитка узкая (около 165 px), поэтому поджимаем внутренности: иначе «До 160 л.с.» и
     «Первое авто» ломаются на три строки и подборки выглядят рыхло. */
  body[class*="new-design"] .qp-pills > * {
    width: auto; min-height: 48px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: flex-start; text-align: left;
    gap: 7px; padding: 8px 10px; font-size: 12.5px; line-height: 1.2;
  }
  body[class*="new-design"] .qp-pills > * b,
  body[class*="new-design"] .qp-pills > * span:last-child { font-size: 12px; margin-left: auto; }
}


/* 03.09.2026 (аудит 2.1): красная плашка «с выгодой от 500 000 ₽» рвалась переносом —
   «с выгодой от» оставалось в конце строки, сумма уезжала на следующую, и получались два
   прямоугольника с рваными краями. Держим фразу одной строкой; ширину заголовка всё равно
   подгоняет nd-h1fit.js, поэтому запас по месту есть. На телефоне перенос не мешает —
   там фраза и так стоит отдельной строкой. */
@media (min-width: 900px) {
  body[class*="new-design"] .hero-h1 em,
  body.nd-hybrid .hero-h1 em {
    white-space: nowrap;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}


/* 03.09.2026 (аудит 3.4): на телефоне у кнопки поиска по ИИ подпись скрывалась целиком,
   и оставался красный квадрат со звёздочкой — что он делает, понять было нельзя.
   Возвращаем короткую подпись «ИИ»: длинный текст по-прежнему не помещается,
   а два символа рядом со значком делают кнопку узнаваемой. */
/* 07.09.2026 (аудит, п. 12): граница расширена с 640 до 860px. Раньше три медиазапроса
   не стыковались: длинную подпись гасило правило :1958 (<=860px, font-size:0), иконочный
   режим включался на <=700px, а короткое «ИИ» возвращалось только на <=640px. В зазоре
   641-860px (800x600, 768x1024, 800x1280) от кнопки оставался безымянный красный
   прямоугольник со звёздочкой. Теперь короткая подпись есть на всей полосе до 860px,
   с 861px — полная «Спросить ИИ». Длинный span в этой полосе убираем из потока, иначе
   он остаётся флекс-элементом с нулевым кеглем и тянет лишний зазор. */
@media (max-width: 860px) {
  body[class*="new-design"] .search-bar .s-ai,
  body.nd-hybrid .search-bar .s-ai {
    width: auto !important; min-width: 0 !important;
    padding: 0 12px !important; gap: 6px !important; overflow: visible !important;
    min-height: 44px;                      /* канон: любая кнопка не ниже 44px */
  }
  body[class*="new-design"] .search-bar .s-ai span:not(.ai-glow),
  body.nd-hybrid .search-bar .s-ai span:not(.ai-glow) { display: none !important; }
  body[class*="new-design"] .search-bar .s-ai::after,
  body.nd-hybrid .search-bar .s-ai::after {
    content: 'ИИ';
    font-size: 12.5px; font-weight: 800; color: #FFF; letter-spacing: .02em; line-height: 1;
  }
}


/* 03.09.2026: городской блок на страницах /avto-iz-korei-<код>/ (includes/nd-city-seo.php).
   Раньше его содержимое пряталось внутри скрытой копии старой страницы; теперь оно видимое,
   и ему нужна та же подача, что у остальных секций нового дизайна. */
body.nd-hybrid .nd-city-seo,
body[class*="new-design"] .nd-city-seo { padding: 56px 0 8px; }
body.nd-hybrid .nd-city-seo__h2,
body[class*="new-design"] .nd-city-seo__h2 {
  margin: 0 0 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--ink, #0E0E12);
}
body.nd-hybrid .nd-city-seo__lead,
body[class*="new-design"] .nd-city-seo__lead {
  max-width: 760px;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted, #6E6E76);
}
body.nd-hybrid .nd-city-seo__text,
body[class*="new-design"] .nd-city-seo__text {
  margin-top: 22px;
  max-width: 900px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-3, #3D3D48);
}

body.nd-hybrid .nd-city-faq,
body[class*="new-design"] .nd-city-faq { padding: 26px 0 56px; }
@media (max-width: 640px) {
  body.nd-hybrid .nd-city-seo, body[class*="new-design"] .nd-city-seo { padding: 34px 0 6px; }
  body.nd-hybrid .nd-city-faq, body[class*="new-design"] .nd-city-faq { padding: 18px 0 34px; }
}


/* 03.09.2026 (аудит 2.2, добивка): на 1024 px строке меню не хватало 30 px даже после
   поджатия полей и снятия флажков — кегль уже на минимуме. Самый длинный пункт получает
   короткую подпись «Аукцион AutoHub»; на широких экранах остаётся полная. */
.main-nav .nav-short { display: none; }
@media (max-width: 1099px) {
  .main-nav .nav-long { display: none; }
  .main-nav .nav-short { display: inline; }
}

/* ============================================================================
   08.09.2026 (сверка скорости после выкатки, cwv-1 / W4): сдвиг первого экрана на телефоне.
   До этого на ≤860 px два блока схлопывались уже ПОСЛЕ отрисовки, JS-ом:
     1) .wrapper получал из легаси-CSS padding-top: var(--hh, 9.2rem) = 128,8 px «под старую
        мобильную полосу», а main.js (setMobileMenuHeight) на DOMContentLoaded ставил --hh: 0px,
        потому что .mobile-menu-fixed в новом дизайне скрыт;
     2) .topbar (36 px) прятался классом body.nd-fav-in-mobhead, который вешает new-catalog.js
        (ndFavMobileSlot) — до этого полоса была видна.
   Итог: CLS 0,16–0,18 на Slow 4G. Здесь — то же конечное состояние сразу, стилями из <head>.
   Полоса 861–991 px не трогается: там свои правила в nd-fix-hdr991.css. */
@media (max-width: 860px) {
  html body[class*="new-design"] .wrapper,
  html body.nd-hybrid .wrapper { padding-top: 0 !important; }
  html body[class*="new-design"] .topbar,
  html body.nd-hybrid .topbar { display: none !important; }
}

/* ============================================================================
   10.09.2026 — Ivan: «Прячем тип кузова из фильтра по всему корейскому сайту.
   Вместо него у нас должно идти продолжение фильтров "Быстро" — они не должны
   прокручиваться вправо на ПК-версии, они переходят на следующую строку».

   Ряд «Быстро:» (.chips-scroll) был лентой: flex-wrap: nowrap + overflow-x: auto
   (строка 957) плюс краевая стрелка .nd-rail-btn, которую вешает js/nd-scroll-hint.js.
   На ПК (>= 861px — там, где заканчиваются мобильные правила ленты: блок
   @media (max-width: 860px) со строки 1807) переводим ряд в перенос. Так уже давно
   устроен ряд «Марка» (.brands-track, flex-wrap: wrap, строка 991).
   Стрелка гаснет сама: sync() в nd-scroll-hint.js прячет кнопку и снимает класс
   nd-rail-over, как только scrollWidth <= clientWidth (прокручивать нечего), а вместе
   с классом уходит и резерв полосы margin-right: 76px (строка 6966) — но на всякий
   случай гасим его и здесь: правило (0,4,0) специфичнее (0,3,0).
   На телефоне ленту НЕ трогаем: одна строка со свайпом там компактнее трёх строк пилюль.

   Область действия — только корейский каталог: маркер .nd-chips-wrap стоит в разметке
   includes/new-catalog-body.php. Одного body.new-design-catalog мало — под этим же классом
   живут /china/ и /china-new/ (header.php:22-24), у них своя .filters-section с таким же
   рядом. Тот же .chips-scroll работает ещё в фильтре главной (.h2k-chips) и во вкладках
   /faq/ — там лента уместна, их правило не касается.
   ============================================================================ */
@media (min-width: 861px) {
  body.new-design-catalog .filters-section .chips-row.nd-chips-wrap .chips-scroll {
    flex-wrap: wrap;
    /* именно overflow целиком: задан только overflow-x (959), overflow-y при этом
       вычислился в auto, и одиночный overflow-x: visible браузер вернул бы обратно в auto */
    overflow: visible;
    scroll-snap-type: none;
    row-gap: 8px;
    margin-right: 0;
    padding-right: 0;
  }
}


/* === ВОДЯНОЙ ЗНАК EncarRUS на фото авто — возврат 15.09.2026 ===
   Был в старом дизайне (.element__image::after в custom.scss, «WATERMARK v5»), в новом
   потерялся: разметка каталога сменилась на .card/.c-photo.
   НЕ накладываем там, где знак уже впечатан в сами файлы:
   - байки и аукцион — body.nd-hybrid (их знак наносит бэкенд Passo / скрипт аукциона);
   - лендинги «под заказ» /new/ и /china-new/ — .ndcn-item (запечён 15.09.2026). */
/* position у .c-photo НЕ трогаем: слайды карточки позиционированы absolute inset:0
   (.c-img .c-photo), перебивать на relative — ломает раскладку (наступил 15.09). */
body:not(.nd-hybrid) .c-photo::after {
    content: '';
    position: absolute;
    top: -30%; left: -30%;
    width: 160%; height: 160%;
    background: url('/img/watermark-tile.png') repeat;
    background-size: 240px auto;
    opacity: .17;
    transform: rotate(-25deg);
    pointer-events: none;
    z-index: 2;
}
@media (max-width: 767px) {
    body:not(.nd-hybrid) .c-photo::after { background-size: 175px auto; }
}
.ndcn-item .c-photo::after { display: none !important; }
/* === /ВОДЯНОЙ ЗНАК === */

/* ===== Окно «Все модели <марка>» (15.09.2026) ===============================
   Ivan: ряд «Модель:» под рядом марок убран, модель выбирается пилюлей в строке
   активных фильтров, окно раскрывается под ней. Разметка — окна марок (.bp-*),
   поэтому здесь только сетка поплотнее (в пилюле лишь имя и число) и отступ,
   привязывающий окно к строке фильтров сверху. */
.models-pop { margin-top: 2px; }
.models-pop .bp-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.models-pop .bp-empty { padding: 18px 16px; font-size: 13px; color: var(--muted); }
.af-pick-model svg { opacity: .55; }
@media (max-width: 560px) {
  .models-pop .bp-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
/* На телефоне пилюля «Выберите модель» сжимала соседнюю пилюлю марки: у .af-pills
   flex-контейнер, и «Mercedes-Benz ×» схлопывалась в один крестик. Пилюли строки
   активных фильтров не сжимаем — они переносятся на следующую строку целиком. */
.applied-filters .af-pill { flex: none; white-space: nowrap; }

/* ============================================================
   16.09.2026 (Ivan: «в байках есть баги, полоса фильтров вылезает и не видно надписи»).
   На /bikes/, /auction/, /sklad/ пилюли активных фильтров рисует nd_mini_pills()
   — БЕЗ инлайновых стилей, в отличие от /korea/ (new-catalog-body.php). Поэтому
   `body[class*="new-design"] a { color: inherit }` (0,2,1) бьёт `.af-pill { color:#FFF }`
   (0,1,0), и метка печаталась чёрным по чёрному фону: видно было только крестик.
   Тот же приём уже применён для China (.ndcn-applied в nd-china-catalog.css).
   ============================================================ */
html body[class*="new-design"] .applied-filters .af-pill,
html body[class*="new-design"] .applied-filters .af-pill .af-pill-l,
html body[class*="new-design"] .applied-filters .af-pill:hover,
html body[class*="new-design"] .applied-filters .af-pill:hover .af-pill-l,
html body.nd-hybrid .applied-filters .af-pill,
html body.nd-hybrid .applied-filters .af-pill .af-pill-l,
html body.nd-hybrid .applied-filters .af-pill:hover,
html body.nd-hybrid .applied-filters .af-pill:hover .af-pill-l { color: #FFFFFF; }
html body[class*="new-design"] .applied-filters .af-reset-all,
html body.nd-hybrid .applied-filters .af-reset-all { color: var(--muted, #6E6E76); }
html body[class*="new-design"] .applied-filters .af-reset-all:hover,
html body.nd-hybrid .applied-filters .af-reset-all:hover { color: var(--accent, #B8152B); }

/* ============================================================
   16.09.2026 (Ivan: «в аукционах тоже вылезает фильтр», скриншот /auction/).
   У .applied-filters, в отличие от сетки и пагинации, есть СВОЯ подложка. Колонку
   ему компенсировали внутренним padding (24/32/40px выше по файлу), поэтому серый
   фон растягивался на всю ширину .container и заходил под край контента — на
   телефоне от края до края экрана. Отступ колонки делаем внешним (width/max-width),
   внутренний возвращаем к базовым 16px (10px на телефоне).
   ============================================================ */
body.nd-hybrid.new-design-catalog .catalog-korean .applied-filters {
  width: calc(100% - 48px); max-width: calc(1520px - 48px);
  padding-left: 16px !important; padding-right: 16px !important;
}
@media (min-width: 1280px) {
  body.nd-hybrid.new-design-catalog .catalog-korean .applied-filters {
    width: calc(100% - 64px); max-width: calc(1520px - 64px);
  }
}
@media (min-width: 1600px) {
  body.nd-hybrid.new-design-catalog .catalog-korean .applied-filters {
    width: calc(100% - 80px); max-width: calc(1520px - 80px);
  }
}
@media (max-width: 700px) {
  body.nd-hybrid.new-design-catalog .catalog-korean .applied-filters {
    padding-left: 10px !important; padding-right: 10px !important;
  }
}


/* ============ 16.09.2026: хаб марок мотоциклов /bikes/brands/ ============
   Марки были доступны только чипами фильтра (8 на виду, остальные за JS-попапом).
   Сетка карточек повторяет геометрию чипов: знак марки, имя, количество. */
.bk-hub { padding: 8px 0 48px; }
.bk-hub-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.bk-hub-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--line, #E8E8ED); border-radius: 14px;
  background: #fff; color: var(--ink, #0E0E12); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bk-hub-card:hover { border-color: #C9C9D2; box-shadow: 0 6px 18px rgba(14,14,18,.06); transform: translateY(-1px); }
.bk-hub-mark {
  flex: 0 0 auto; width: 40px; height: 28px; border-radius: 8px; background: #F3F3F6;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #6B6B76;
}
.bk-hub-mark.has-logo { background: #fff; }
.bk-hub-mark img { max-width: 36px; max-height: 24px; width: auto; height: auto; object-fit: contain; }
/* Имя марки переносится, а не обрезается многоточием: «Harley-Davidson» и «Royal Enfield»
   в узкой колонке иначе превращались в «Harl…» и «Royal…». */
.bk-hub-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.bk-hub-num { flex: 0 0 auto; font-size: 13px; color: var(--muted, #6B6B76); font-variant-numeric: tabular-nums; }
.bk-hub-h2 { font-family: 'Instrument Serif', Georgia, serif; font-size: 28px; font-weight: 400;
  margin: 36px 0 14px; color: var(--ink, #0E0E12); }
.bk-hub-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-hub-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--line, #E8E8ED); border-radius: 999px;
  background: #fff; color: var(--ink, #0E0E12); text-decoration: none; font-size: 13.5px;
}
.bk-hub-tag:hover { border-color: #C9C9D2; background: #FAFAFB; }
.bk-hub-tag b { font-weight: 600; color: var(--muted, #6B6B76); }
.bk-hub-text { margin-top: 32px; font-size: 14.5px; line-height: 1.6; color: var(--ink, #0E0E12); }
.bk-hub-text p { margin: 0 0 10px; }
.bk-hub-text a { text-decoration: underline; }
@media (max-width: 700px) {
  .bk-hub-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
  .bk-hub-card { padding: 10px; gap: 8px; }
  .bk-hub-h2 { font-size: 24px; margin: 28px 0 12px; }
}
/* На телефоне две колонки обрезали названия («Harl…», «Trium…») — одна колонка,
   имя марки видно целиком (проверено на 375 px). */
@media (max-width: 520px) {
  .bk-hub-grid { grid-template-columns: 1fr; }
  .bk-hub-card { padding: 10px 12px; }
}


/* 16.09.2026: счётчик в чипе модели (ряд «Модели:» на странице марки мотоциклов) */
.chip .chip-n { color: var(--muted, #6B6B76); font-variant-numeric: tabular-nums; font-size: 12px; }
.chip.active .chip-n { color: rgba(255,255,255,.7); }
.chips-row-models { margin-bottom: 4px; }


/* 16.09.2026: пустая выдача поиска мотоциклов — с предложением подобрать под заказ */
.sd-none-cta { padding: 18px 16px; text-align: left; }
.sd-none-t { font-size: 14px; font-weight: 700; color: var(--ink, #0E0E12); margin-bottom: 4px; }
.sd-none-s { font-size: 13px; color: var(--muted, #6B6B76); margin-bottom: 12px; line-height: 1.4; }
.sd-none-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; border-radius: 999px; background: var(--ink, #0E0E12); color: #fff !important;
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.sd-none-btn:hover { opacity: .88; }


/* ============ 16.09.2026: текст раздела мотоциклов в две колонки ============
   Было: текст на всю ширину экрана (строки по 180 символов). Стало: слева текст
   в читаемой колонке, справа карточки — быстрые ссылки, заявка и порядок заказа.
   Своя раскладка, а не .seo-cols Кореи: те стили лежат в new-catalog-after.css,
   который на /bikes/ не грузится. */
.bkseo-cols {
  display: grid; gap: 40px; align-items: start;
  grid-template-columns: minmax(0, 900px) minmax(280px, 340px);
  justify-content: space-between;
}
.bkseo-main { min-width: 0; }
.bkseo-main h2 { margin-top: 0; }
.bkseo-main p { max-width: 900px; }
.bkseo-aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 92px; }
.bkseo-card {
  background: #fff; border: 1px solid var(--line, #E8E8ED);
  border-radius: 16px; padding: 18px 20px;
}
.bkseo-card-h {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted, #6B6B76); margin-bottom: 12px;
}
.bkseo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bkseo-chips a {
  display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line, #E8E8ED); background: #FAFAFB;
  font-size: 13px; color: var(--ink, #0E0E12); text-decoration: none;
}
.bkseo-chips a:hover { border-color: #C9C9D2; background: #fff; }
.bkseo-cta-t { font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--ink, #0E0E12); margin-bottom: 8px; }
.bkseo-cta-p { font-size: 13.5px; line-height: 1.5; color: var(--muted, #6B6B76); margin: 0 0 14px; }
.bkseo-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; box-sizing: border-box; padding: 12px 18px; border-radius: 999px;
  background: #E1251B; color: #fff !important; font-size: 14px; font-weight: 600; text-decoration: none;
}
.bkseo-cta-btn:hover { opacity: .9; }
.bkseo-cta-tel {
  display: block; margin-top: 12px; font-size: 17px; font-weight: 700;
  color: var(--ink, #0E0E12) !important; text-decoration: none;
}
.bkseo-cta-note { display: block; margin-top: 4px; font-size: 12px; color: var(--muted, #6B6B76); }
.bkseo-steps-l { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: var(--ink, #0E0E12); }
.bkseo-steps-link { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; text-decoration: underline; }
@media (max-width: 1024px) {
  .bkseo-cols { grid-template-columns: 1fr; gap: 24px; }
  .bkseo-aside { position: static; }
}
@media (max-width: 700px) {
  .bkseo-card { padding: 16px; }
  .bkseo-cta-t { font-size: 16px; }
}


/* ============ 17.09.2026: «Загрузить ещё» в каталоге мотоциклов ============ */
.nd-bk-more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px 0 28px; }
/* 17.09.2026 (Ivan: «надо кнопкой красной как в листинге кореи»): вид как у кнопки
   «Консультация» в карточке каталога — фон --accent (#E11D2E), белый текст, вес 700. */
/* ⚠️ Селектор с body: сброс `body[class*="new-design"] button` (0,1,2) сильнее одиночного
   класса и обнулял фон — кнопка выходила прозрачной с чёрным текстом.
   Та же грабля, что с .s-ai/.sd-ex (память feedback_nd_button_reset_beats_single_class). */
body[class*="new-design"] .nd-bk-more .nd-bk-more-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px; border-radius: 12px;
  border: 0; background: var(--accent, #E11D2E);
  font-size: 14.5px; font-weight: 700; color: #FFF; cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
body[class*="new-design"] .nd-bk-more .nd-bk-more-btn:hover { background: #C8121F; box-shadow: 0 8px 22px rgba(225,29,46,.22); }
body[class*="new-design"] .nd-bk-more .nd-bk-more-btn:active { transform: translateY(1px); }
body[class*="new-design"] .nd-bk-more .nd-bk-more-btn[disabled] { opacity: .7; cursor: default; box-shadow: none; }
.nd-bk-more-n {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
  background: rgba(255,255,255,.22); color: #FFF; font-size: 12.5px; font-weight: 700;
}
.nd-bk-more-note { font-size: 12.5px; color: var(--muted, #6B6B76); }
@media (max-width: 700px) {
  /* 17.09.2026: на телефоне .container идёт без боковых полей, а карточки отступают
     на 24 px — кнопка во всю ширину упиралась в края экрана. Повторяем поле карточек. */
  .nd-bk-more { padding-left: 24px; padding-right: 24px; }
  body[class*="new-design"] .nd-bk-more .nd-bk-more-btn { width: 100%; justify-content: center; }
}


/* ============ 17.09.2026: ритм секций в каталоге мотоциклов ============
   Ivan: «кажется, что отступ очень маленький после пагинации до заголовка следующего
   блока. Проверь всю страницу байков на отступы». Замер до правки: сетка → кнопка 8 px,
   пагинация → текст 0 px при внутреннем отступе секции 13,5 px — блоки читались слитно. */
body.new-design-catalog .nd-bk-more { margin-top: 18px; margin-bottom: 26px; }
body.new-design-catalog #bikes-pagination { margin: 4px 0 8px; }
/* Текст раздела: собственный отступ секции вместо инлайнового 2rem (он проигрывал
   каскаду и давал 13,5 px). !important — потому что правило стоит в атрибуте style. */
body.new-design-catalog .seo-text-section.bkseo { padding: 56px 0 !important; }
body.new-design-catalog .seo-text-section.bkseo + section,
body.new-design-catalog .seo-text-section.bkseo + .pd-sec { margin-top: 0; }
@media (max-width: 700px) {
  body.new-design-catalog .nd-bk-more { margin-top: 14px; margin-bottom: 20px; }
  body.new-design-catalog .seo-text-section.bkseo { padding: 36px 0 !important; }
}


/* 17.09.2026: пустая выдача каталога мотоциклов — с двумя действиями вместо тупика */
.nd-bk-empty { text-align: center; padding: 48px 0 40px; }
.nd-bk-empty .section--empty-title { font-size: 20px; font-weight: 700; color: var(--ink, #0E0E12); margin-bottom: 8px; }
.nd-bk-empty .section--empty--text { font-size: 14.5px; color: var(--muted, #6B6B76); max-width: 520px; margin: 0 auto; line-height: 1.5; }
.nd-bk-empty-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
body[class*="new-design"] .nd-bk-empty .nd-bk-empty-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 26px; border-radius: 12px; border: 0;
  background: var(--accent, #E11D2E); color: #FFF !important;
  font-size: 14px; font-weight: 700; text-decoration: none;
}
body[class*="new-design"] .nd-bk-empty .nd-bk-empty-btn:hover { background: #C8121F; }
body[class*="new-design"] .nd-bk-empty .nd-bk-empty-btn--sec {
  background: #FFF; color: var(--ink, #0E0E12) !important; border: 1px solid var(--line, #E8E8ED);
}
body[class*="new-design"] .nd-bk-empty .nd-bk-empty-btn--sec:hover { border-color: #C9C9D2; background: #FAFAFB; }
@media (max-width: 700px) {
  .nd-bk-empty { padding: 32px 16px; }
  .nd-bk-empty-cta { flex-direction: column; }
  body[class*="new-design"] .nd-bk-empty .nd-bk-empty-btn { width: 100%; }
}

/* ============================================================
   20.09.2026 (Ivan: «блок ответов на вопросы — в одном стиле по всему сайту»).
   Левую колонку всех блоков печатает общий includes/nd-faq-aside.php, и у неё
   появилась плашка «Частые вопросы» — раньше она была только на главной
   (.ndfq-eyebrow) и в каталоге (там простой текст без фона). Вид берём с главной.
   align-self обязателен: .faq-left — колонка, без него плашка растянется на всю
   ширину (та же грабля была у .ndfq-eyebrow).
   ============================================================ */
.faq-left .faq-eyebrow {
  align-self: flex-start;
  display: inline-block;
  background: var(--bg, #F7F7F9);
  color: var(--muted, #6E6E76);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  margin: 0 0 14px;
  width: fit-content;
}
@media (max-width: 700px) {
  .faq-left .faq-eyebrow { font-size: 11px; padding: 4px 10px; margin-bottom: 10px; }
}

/* 20.09.2026: три мессенджера в один ряд на телефоне — решение Ivan'а от 18.09
   (css/pages/nd-korea-hubs.css, п.1). Тот файл подключается только на хабах Кореи,
   а ряд мессенджеров теперь печатается общим includes/nd-faq-aside.php на всех
   страницах, поэтому правило переносим сюда — иначе на карточках три кнопки
   занимают три строки по 38px и блок выглядит иначе, чем в каталоге. */
@media (max-width: 760px) {
  .faq-mes-row { flex-wrap: nowrap; gap: 6px; }
  .faq-mes-row .faq-chat {
    flex: 1 1 0; min-width: 0; justify-content: center;
    gap: 6px; padding: 9px 6px; font-size: 12.5px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .faq-mes-row .faq-chat img { width: 16px; height: 16px; }
}

/* 21.09.2026: счётчик машин в строке хлебных крошек.
   Правила переехали сюда из css/pages/nd-korea-hubs.css: тот файл подключается только там,
   где реально выводится блок «Готовые подборки» (includes/nd-korea-hubs.php ставит <link> сам),
   поэтому на страницах моделей (/korea/hyundai/palisade/ и т.п.) их не было вовсе — базовый
   .crumbs с flex-wrap:wrap переносил бейдж под крошки и прижимал влево. new-catalog.css входит
   в склейку на всех страницах каталога. Специфичность .crumbs.crumbs-with-live (0,2,0) заведомо
   выше .crumbs в медиазапросе ≤760. */
.crumbs.crumbs-with-live { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.crumbs.crumbs-with-live > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs.crumbs-with-live .hero-live--crumbs { margin-left: auto; flex: none; }

@media (max-width: 760px) {
  .crumbs.crumbs-with-live .hero-live--crumbs { transform: scale(.92); transform-origin: right center; }
}

/* 22.09.2026 (Ivan): состояние машины по страховой в карточке выдачи — «полоса состояния».
   Зелёная у машин без страховых случаев (39 % каталога), песочная при ремонтах, красная при
   тотале или затоплении; у красных ещё и метка на фото (.c-label--bad). Текст считает
   inc/korea-condition.php. Разбор: wiki/features/korea-card-condition-2026-09-22.md */
.c-cond {
  display: flex; align-items: center; gap: 7px;
  /* 22.09.2026 (Ivan): без своего верхнего отступа. Блок цены ниже уже отбит от полосы
     на 12 px, а собственные 9 px делали зазор сверху 21 px — полоса «провисала». */
  margin: 0; padding: 7px 10px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.3;
}
.c-cond-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; background: currentColor; }
.c-cond--ok   { background: #E8F6EE; color: #1E8C4A; font-weight: 600; }
.c-cond--warn { background: #FFF3E2; color: #B25E00; }
.c-cond--bad  { background: #FDEAE8; color: #C4231B; font-weight: 600; }
/* 24.09.2026 (Ivan): нет отчёта Carhistory — серая «Нет данных по страховой» */
.c-cond--none { background: #F2F3F5; color: #8A8F98; }
.c-label--bad { background: #C4231B; color: #fff; }
/* 20.10.2026 (Ivan): «Проверен дилером» — сертифицированная (CPO) машина Korea, card/template.php.
   Раскладка под снимком на телефоне — nd-fix-a.css, блок от 20.10. */
.c-label.c-label--cpo { background: #1F4FBF; color: #fff; }

@media (max-width: 700px) {
  .c-cond { padding: 6px 9px; font-size: 12px; gap: 6px; }
}

/* 23.09.2026 (задача 12 разбора 23.09): кнопка «Подобрать под заказ» на пустой выдаче поиска.
   ⛔ Селектор из ДВУХ классов: сброс `body[class*=new-design] button` (0,1,2) сильнее одиночного
   класса и оставил бы кнопку голым текстом — грабля уже ловилась на .s-ai и на блоке города. */
body[class*="new-design"] .search-dropdown .sd-lead {
  display: block; width: 100%; margin: 10px 0 2px; padding: 11px 14px;
  border: 0; border-radius: 999px; background: #0E0E12; color: #fff;
  font-family: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.25;
  white-space: nowrap; cursor: pointer;
}
body[class*="new-design"] .search-dropdown .sd-lead:hover { background: #26262E; }

/* 21.10.2026 (догоняем копию China): .ndcn-crumbs-in — крошки China обёрнуты (includes/nd-china-catalog-body.php), цепочка
   режется многоточием, счётчик прижат вправо. Перенесено из encarrus_china_staging/css/pages/new-catalog.css (24.09). */
.crumbs.crumbs-with-live .ndcn-crumbs-in { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; white-space: nowrap; }
.crumbs.crumbs-with-live .ndcn-crumbs-in > * { flex: none; }
.crumbs.crumbs-with-live .ndcn-crumbs-in .cur { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }


/* ---- nd-split-catalog.css ---- */
/* 04.09.2026 (п.30 списка Никиты): цвета переведены на переменные с фолбэком. */
/* =========================================================
   nd-split-catalog.css — вынесено из new-catalog.css 04.09.2026 (п.35 аудита Никиты).
   Причина: new-catalog.css весил 731 КБ и грузился на ВСЕХ страницах нового
   дизайна, хотя правила ниже привязаны к одному body-классу .new-design-catalog
   и на остальных страницах сработать не могут.
   Правила перенесены БЕЗ изменений и в исходном порядке; ничего не удалено.
   Подключается в header.php сразу после new-catalog.css (до nd-fix-*.css),
   поэтому порядок относительно других файлов не меняется. Правила, перенос
   которых мог бы изменить победителя каскада (равная специфичность с более
   поздним правилом ядра), намеренно оставлены в new-catalog.css.
   ========================================================= */

body.new-design-catalog .search-bar .s-ai:hover { background: var(--accent-2, #b8152b) !important; }

body.new-design-catalog .search-bar .s-ai span { color: #FFF !important; }

/* Хлебные крошки — поднять выше */
body.new-design-catalog .hero { padding: 22px 0 14px !important; }

/* Скрываем старый h1 и хлебные крошки на каталоге — у нас свой hero. */
body.new-design-catalog .catalog-korean .breadcrumbs-car-wrapper { display: none !important; }

body.new-design-catalog .catalog-korean > .page__catalog > .container > h1 { display: none !important; }

/* Filter-bar: моя .fpanel открывается кликом "Все фильтры", боевой .custom-filter-wrapper всегда скрыт (используется как DOM-источник данных для search-функционала) */
body.new-design-catalog .custom-filter-wrapper { display: none !important; }

body.new-design-catalog .ftoggle .ft-chev { transform: rotate(-90deg); transition: transform .15s ease; }

body.new-design-catalog.nd-filters-shown .ftoggle .ft-chev { transform: rotate(0); }

body.new-design-catalog .fhead { padding-top: 4px; padding-bottom: 16px; }

/* Кнопка !important — fhead button внутри filters-section должна работать */
body.new-design-catalog .fhead button { background: transparent; border: 0; cursor: pointer; }

body.new-design-catalog .fhead .ftoggle { padding: 10px 16px !important; background: var(--ink) !important; color: #FFF !important; border-radius: 12px !important; display: inline-flex !important; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; box-shadow: 0 2px 0 #000; }

body.new-design-catalog .fhead .freset { padding: 9px 14px !important; background: transparent !important; color: var(--ink-3, #6b6b62) !important; border-radius: 10px !important; display: inline-flex !important; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }

body.new-design-catalog .fhead .freset:hover { background: var(--bg) !important; color: var(--ink) !important; }

body.new-design-catalog .fhead .viewtog .vt { padding: 7px 10px !important; border-radius: 8px !important; color: var(--muted, #6b6b62); display: inline-flex; align-items: center; }

body.new-design-catalog .fhead .viewtog .vt.active { background: var(--ink, #0e0e12) !important; color: #FFF !important; }

/* ============================================================
   STAGING-only fixes: убрать серую подложку и Bitrix-обёртки
   ============================================================ */

/* element--wrapper Bitrix-обёртка вокруг каждой карточки —
   делаем её прозрачной, чтобы .card стал прямым grid-item-ом
   (как в макете new_design/Catalog.html). Без этого .card теряет
   1fr ширину и появляется лишний слой между .grid и .card. */
body.new-design-catalog .element--wrapper {
  display: contents;
}

body.new-design-catalog .section__list {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Шире grid — растянуть карточки на всю ширину shell.
   В макете .grid внутри shell с max-width фиксированной — gap 20px,
   3 колонки. Поднимаем gap немного для сходства со скрином. */
body.new-design-catalog .grid {
  background: transparent !important;
}

/* Убрать неверные подписи фото («Экстерьер 3/4», «Сбоку», «Салон»…) — encar
   не отдаёт реальные ракурсы, статичные подписи могут вводить в заблуждение. */
body.new-design-catalog .c-photo-tag { display: none !important; }

/* .c-ai и .c-fav — читаемость на тёмных фотографиях.
   Полупрозрачный белый фон + blur + тень. */
body.new-design-catalog .c-img .c-actions .c-ai,
body.new-design-catalog .c-img .c-actions .c-fav {
  background: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink, #0E0E12) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

body.new-design-catalog .c-img .c-actions .c-ai svg { color: var(--accent, #E11D2E); }

/* ============================================================================
   07.09.2026 (аудит, п. 20). Режим «Списком»: колонка фото фиксированные 320px
   с overflow:hidden, а на снимке живут и два ярлыка, и «Спросить ИИ» с сердечком.
   Пара кнопок требует 157px, ярлык «В НАЛИЧИИ В КОРЕЕ» — 155px: вместе 332px,
   то есть в 320px они не помещаются никак. Раньше край срезал половину сердечка.
   В списке подпись у кнопки ИИ убираем — остаётся кружок 30x30, как на телефоне
   (рядом, в теле строки, и так есть «Консультация» и «Подробнее»). Кнопкам хватает
   66px, ярлыкам остаётся 228px — целиком видно и то, и другое.
   ============================================================================ */
body.nd-view-list .card .c-img .c-actions { max-width: calc(100% - 20px); }
body.nd-view-list .card .c-img .c-actions .c-ai {
  width: 30px; padding: 0; gap: 0; justify-content: center;
}
body.nd-view-list .card .c-img .c-actions .c-ai span:not(.ai-glow) { display: none; }
body.nd-view-list .card .c-img .c-labels { max-width: calc(100% - 92px); }

body.new-design-catalog .c-img .c-actions .c-ai:hover {
  background: var(--ink, #0E0E12) !important;
  color: #FFF !important;
  border-color: var(--ink, #0E0E12) !important;
}

body.new-design-catalog .c-img .c-actions .c-ai:hover svg { color: #FFB5BD; }

body.new-design-catalog .c-img .c-actions .c-fav:hover {
  background: #FFF !important;
  color: var(--accent, #E11D2E) !important;
}

body.new-design-catalog .c-img .c-actions .c-fav.on {
  background: var(--bg, #f7f7f9) !important;
  color: var(--accent, #E11D2E) !important;
}

body.new-design-catalog .c-img .c-actions .c-fav.on svg { fill: currentColor; }

/* Bitrix .element--wrapper и .section__element — снимаем фон только с обёрток,
   НЕ трогаем дочерние элементы (иначе бейджи .c-label.pass / .c-label.green тоже теряют цвет) */
body.new-design-catalog .element--wrapper,
body.new-design-catalog .element--wrapper:hover,
body.new-design-catalog .section__element {
  background: transparent !important;
}

body.new-design-catalog .element--wrapper.deactive .deactive-wrapper {
  background: rgba(0,0,0,.18) !important;
}

/* body имеет светло-серый --bg (rgb 247,247,249), он виден между секциями
   как серая подложка. Делаем body белым для new-design-catalog. */
body.new-design-catalog {
  background: #FFF !important;
}

body.new-design-catalog .page__catalog {
  background: #FFF !important;
  box-shadow: none !important;
}

@media (max-width: 600px) {
  body.new-design-catalog .catalog-section,
  body.new-design-catalog #ajax-load { padding-left: 14px !important; padding-right: 14px !important; }
}

/* Бейджи .c-labels (слева) и .c-actions (справа «Спросить ИИ» + ♥) — не должны перекрываться */
body.new-design-catalog .c-img .c-labels {
  /* 07.09.2026 (аудит, п. 10/24): было 60% - 14px. Полосе кнопок справа не хватало
     её 40%: «Спросить ИИ» (121px) + сердечко (30px) + зазор = 157px, а 40% узкой
     карточки — 136-143px, из-за чего сердечко ужималось до 16px и вылезало за фото.
     Делим кадр пополам с запасом 20px на боковые отступы: кнопкам 48% (163px на самой
     узкой карточке 339px — хватает на 157px содержимого), ярлыкам 52% минус 20px
     (156px — хватает на самый длинный «В НАЛИЧИИ В КИТАЕ», 152px). */
  max-width: calc(52% - 20px);
  flex-wrap: wrap;
}

body.new-design-catalog .c-img .c-labels .c-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  padding: 4px 7px;
}

body.new-design-catalog .c-img .c-actions {
  max-width: 48%;   /* см. комментарий у .c-labels выше */
}

body.new-design-catalog .c-img .c-actions .c-ai {
  font-size: 12px;
  padding: 5px 9px;
}

body.new-design-catalog .sec-h2 em,
body.new-design-catalog .hc-title em { font-style: italic; color: var(--accent, #E11D2E); font-weight: 400; }

/* 2026-07-25 (Ivan): FAQ каталога — привести к виду карточки (там уже хорошо).
   Было: красные номера, крупные жирные вопросы, толстые рамки, пустая чёрная кнопка. */
body.new-design-catalog .faq-right .faq { border-radius: 12px; border: 1px solid var(--line, #E5E2DB); box-shadow: none; }

body.new-design-catalog .faq-right .faq:hover { border-color: #CFCFD6; }

body.new-design-catalog .faq-right .faq[open] { border-color: var(--ink, #0E0E12); box-shadow: 0 2px 10px rgba(16,24,40,.05); }

body.new-design-catalog .faq-right summary { grid-template-columns: 40px 1fr 22px; gap: 12px; padding: 15px 18px; }

body.new-design-catalog .faq-right .faq-q {
  font-family: 'Montserrat', sans-serif; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--ink, #0E0E12);
}

body.new-design-catalog .faq-right .faq[open] .faq-q { font-weight: 700; }

body.new-design-catalog .faq-right .faq-body { padding: 0 18px 15px 70px; }

body.new-design-catalog .faq-right .faq-body p { font-size: 13.5px; line-height: 1.6; color: var(--ink-3, #3d3d48); margin: 0 0 8px; }

body.new-design-catalog .faq-right .faq-note { font-size: 12.5px; color: var(--muted, #6E6E76); }

/* eyebrow — нейтральный, как на карточке (был ярко-красный) */
body.new-design-catalog .faq-left .sec-eyebrow {
  display: inline-block; background: var(--bg, #f7f7f9); color: var(--muted, #6E6E76);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; margin-bottom: 12px;
}

body.new-design-catalog .faq-left .faq-lede { font-size: 13px; color: var(--muted, #6E6E76); }

/* кнопка «Все вопросы» была чёрным прямоугольником без видимого текста */
body.new-design-catalog .faq-cta-row .faq-all {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 10px;
  background: var(--ink, #0E0E12) !important; color: #FFF !important;
  font-size: 13.5px; font-weight: 700; text-decoration: none !important;
}

body.new-design-catalog .faq-cta-row .faq-all:hover { background: var(--ink-2, #1e1e24) !important; }

@media (max-width: 900px) {
  body.new-design-catalog .faq-right summary { grid-template-columns: 32px 1fr 20px; padding: 14px 15px; gap: 10px; }
  body.new-design-catalog .faq-right .faq-body { padding: 0 15px 14px 57px; }
}

/* 2026-07-25: карточки вопросов на /korea/ сжимались по содержимому (350…765px) и вставали
   «лесенкой» — контейнер .faq-right центрировал детей. На карточке товара это лечит
   `.faq-right .faq { width:100% }`; переносим то же правило на каталог. */
body.new-design-catalog .faq-right { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }

body.new-design-catalog .faq-right .faq { width: 100% !important; }

/* 2026-07-25 (Ivan): кнопка «Получить подборку» стояла выше линии полей — у полей есть
   подпись сверху (label), у кнопки её нет, и ячейка прижимала кнопку к верху ряда.
   Выравниваем по нижней границе полей и уравниваем высоту. */
body.new-design-catalog .hc-field-btn { display: flex; align-items: flex-end; }

body.new-design-catalog .hc-field-btn .hc-submit { height: 48px; width: 100%; justify-content: center; }

body.new-design-catalog .hc-field .hc-ctrl input,
body.new-design-catalog .hc-field .hc-ctrl select { height: 48px; box-sizing: border-box; }

/* 2026-07-25: сама ячейка кнопки короче соседних (у тех есть label сверху) — flex-end внутри
   не помогал. Прижимаем ячейку к низу строки грида: align-self: end. */
body.new-design-catalog .hc-grid .hc-field-btn { align-self: end; }

body.new-design-catalog .hc-foot .hc-submit {
  flex: none; height: 48px; padding: 0 22px;
  background: var(--accent); color: #fff; border-radius: 10px;
  box-shadow: 0 2px 0 var(--accent-2);
}

/* ============================================================
   2026-08-01 (Ivan) — правки блока FAQ на /korea/
   ============================================================ */

/* 1. Плашка «Частые вопросы» растягивалась во всю колонку (546px при тексте ~150px).
      Причина: .faq-left — flex-контейнер (column), его дети блокифицируются
      (display:inline-block из правила выше становится block) и растягиваются
      по поперечной оси через align-items:normal=stretch. */
body.new-design-catalog .faq-left .sec-eyebrow { align-self: flex-start; }

/* 2. «Странная точка» у иконки раскрытия. Легаси-копия FAQ-стилей в
      css/pages/new-catalog-after.css (файл грузится ПОСЛЕ этого) задавала
      .faq-plus::after { top:2px; bottom:2px; left:10px; width:2px } — бокс
      переопределён (left+width+right), right игнорируется → вместо вертикальной
      палочки плюса оставался квадрат 2×2px справа от центра. Свойства width
      в актуальном правиле нет, перекрыть было нечем. Возвращаем нормальный
      плюс↔минус специфичностью 0,3,2 (выигрывает независимо от порядка файлов). */
body.new-design-catalog .faq-right .faq-plus::before,
body.new-design-catalog .faq-right .faq-plus::after {
  top: 50%; bottom: auto; left: 3px; right: 3px;
  width: auto; height: 2px;
}

body.new-design-catalog .faq-right .faq-plus::after { transform: translateY(-50%) rotate(90deg); }

body.new-design-catalog .faq-right .faq[open] .faq-plus::after { transform: translateY(-50%) rotate(0deg); }

body.new-design-catalog .catalog-element--desc .ndcd-body {
  position: relative; max-height: 220px; overflow: hidden;
  transition: max-height .5s var(--ease);
}

body.new-design-catalog .catalog-element--desc.is-short .ndcd-body { max-height: none; }

body.new-design-catalog .catalog-element--desc.open .ndcd-body { max-height: 4000px; }

body.new-design-catalog .catalog-element--desc .ndcd-body::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(180deg, transparent, #fff); pointer-events: none; transition: opacity .3s;
}

body.new-design-catalog .catalog-element--desc.open .ndcd-body::after,
body.new-design-catalog .catalog-element--desc.is-short .ndcd-body::after { opacity: 0; }

body.new-design-catalog .catalog-element--desc ul,
body.new-design-catalog .catalog-element--desc ol { margin: 0 0 14px; padding-left: 1.4em; }

body.new-design-catalog .catalog-element--desc li { margin-bottom: 6px; }

body.new-design-catalog .catalog-element--desc h3 {
  font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin: 22px 0 10px;
}

body.new-design-catalog .catalog-element--desc .ndcd-toggle {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; font-size: 13px; font-weight: 600; color: var(--ink); transition: all .2s;
}

body.new-design-catalog .catalog-element--desc .ndcd-toggle:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

body.new-design-catalog .catalog-element--desc .ndcd-toggle svg { transition: transform .25s var(--ease); }

/* Правки поверх легаси new-catalog-after.css (грузится последним, спец. 0,1,0):
   1) .ct-mes там объявлен flex-column — иконка вставала НАД подписью вместо слева;
   2) .ct-submit съедался общим сбросом body[class*="new-design"] button {background:none;padding:0}
      (спец. 0,2,1) — кнопка «Отправить заявку» рисовалась голым текстом. */
body.new-design-catalog .ct-mes {
  display: grid; grid-template-columns: 22px 1fr;
  align-items: center; column-gap: 11px; row-gap: 0;
}

body.new-design-catalog .ct-mes .ct-mes-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

body.new-design-catalog .ct-submit {
  background: var(--accent); color: #fff; padding: 13px 16px;
  border-radius: 10px; font-weight: 700; font-size: 14px; margin-top: 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}

body.new-design-catalog .ct-submit:hover { background: var(--accent-2); color: #fff; }

/* ============================================================
   2026-08-01 (Ivan): «в листинге уменьшить карточку авто на 15%, но по-прежнему
   3 в ряд — просто между ними будет больше расстояние».
   Ширину сетки не меняем, разницу забирает горизонтальный зазор.
   Арифметика: колонка = (W - 2g)/3. Чтобы колонка стала k от прежней при прежнем
   g0=20px:  g1 = W·(1-k)/2 + k·g0.
   Подбирали итеративно с Ivan'ом: k=0.85 → «слишком мелко, верни +7%» → k=0.92
   → «добавь ещё 5%» → k=0.97:  g1 = 1.5% + 19.4px.
   Проверка на 1440 (контейнер 1376): 1.5%·1376 + 19.4 = 40.0px зазор →
   колонка (1376 - 80.1)/3 = 432.0px = 445.3 × 0.97 ✓
   Проценты в column-gap считаются от ширины контейнера, поэтому пропорция
   держится на любой ширине экрана. Только десктоп — ниже 1025px колонок меньше трёх.
   ============================================================ */
@media (min-width: 1025px) {
  body.new-design-catalog #ajax-load-list,
  body.new-design-catalog .grid.section__list {
    column-gap: calc(1.5% + 19.4px) !important;
    row-gap: 22px !important;
  }
}

/* Побочный эффект сужения карточек: подпись «Спросить ИИ» переносилась на две строки. */
body.new-design-catalog .card .c-ai { white-space: nowrap; }

body.new-design-catalog .card .c-ai span { white-space: nowrap; }

/* ============================================================
   2026-08-01 (Ivan): «эти отступы сделай меньше, как выше сделано».
   Между рядами БЫСТРО/КУЗОВ/МАРКА шаг 14px, а ниже он разъезжался:
   Марка → «Все фильтры» 28px (16 margin + 12 padding ряда),
   «Все фильтры» → «ФИЛЬТРЫ:» 30px (16 padding + 14 margin),
   «ФИЛЬТРЫ:» → карточки 50px (22 margin + 28 padding секции).
   Приводим к тому же шагу. Инлайновые отступы самой строки «ФИЛЬТРЫ:» —
   в new-catalog-body.php (padding 10px 14px; margin 8px 0 10px).
   ============================================================ */
body.new-design-catalog .brands-row { margin-bottom: 6px; }

body.new-design-catalog .fhead { padding-top: 4px; padding-bottom: 8px; }

body.new-design-catalog section.filters-section { padding-bottom: 10px; }

/* ряд «Кузов» примыкает к «Марка» вплотную (общая линия) — правило выше не должно его разводить */
body.new-design-catalog .brands-row.bt-row-v2 { margin-bottom: 0; }

body.new-design-catalog .fav-section .grid { display: grid; grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1024px) { body.new-design-catalog .fav-section .grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 700px)  { body.new-design-catalog .fav-section .grid { grid-template-columns: 1fr; } }

/* цвет текста кнопки перебивался глобальным правилом ссылок старого шаблона — чёрное на чёрном */
body.new-design-catalog .fav-empty .fav-empty-cta,
body.new-design-catalog .fav-empty .fav-empty-cta svg { color: #fff; }

body.new-design-catalog .fav-empty .fav-empty-cta:hover { background: var(--accent); color: #fff; }

body.new-design-catalog .ct-all { color: var(--ink-3); }

body.new-design-catalog .ct-all:hover { color: var(--ink); }

body.new-design-catalog a.ct-phone { color: var(--ink); display: inline-block; }

body.new-design-catalog a.ct-phone:hover { color: var(--accent); }

/* ============================================================
   2026-08-03 (Ivan: «всё стало не на одной линии, уезжает то сильно вправо,
   то чуть-чуть»). Контент страницы живёт в `.shell` (padding 24 / 32 / 40 по
   брейкпоинтам), а список карточек — в легаси-обёртках
   `section.catalog-section > div.section`, и у КАЖДОЙ свои 14px: 14 + 14 = 28.
   Карточки стояли на 4px правее всего остального.

   🔑 Две грабли, обе стоили по заходу:
   1) внутренний контейнер — это `div.section`, а НЕ тег <section>. Селектор
      `.catalog-section > section` (по тегу) не матчил ничего, и стало 38px вместо 24;
   2) в `@media (max-width: 600px)` уже лежит правило со списком селекторов и
      `!important`, которое вешает 14px и на внешний, и на внутренний контейнер.
      Перебивается только специфичностью с тегами — (0,3,2).
   Поэтому ВСЕ правила ниже пишутся одним и тем же высокоспецифичным селектором,
   включая брейкпоинты: если базовое правило специфичнее медиазапросного,
   на широких экранах вернётся рассинхрон (проверено — было 24 против 32).
   ============================================================ */
/* 🔑 Третья грабля: внутренний контейнер — это `#ajax-load`, и в @media (max-width:600px)
   ему задан `padding: 0 14px !important` ПО ID. Специфичность (1,0,0) бьёт любой
   селектор по классам, сколько тегов ни добавляй. Перебиваем тем же id. */
body.new-design-catalog section.catalog-section > div.section,
body.new-design-catalog #ajax-load {
  padding-left: 0 !important; padding-right: 0 !important;
}

@media (max-width: 600px) {
  body.new-design-catalog #ajax-load { padding-left: 0 !important; padding-right: 0 !important; }
}

body.new-design-catalog section.catalog-section {
  padding-left: 24px !important; padding-right: 24px !important;
}

@media (min-width: 1280px) {
  body.new-design-catalog section.catalog-section { padding-left: 32px !important; padding-right: 32px !important; }
}

@media (min-width: 1600px) {
  body.new-design-catalog section.catalog-section { padding-left: 40px !important; padding-right: 40px !important; }
}

/* ============================================================
   2026-08-03 (Ivan: «режим по моделям нужен»).
   Переключение делаем классом на body, а не инлайновым display: новый дизайн
   после каждого loadCatalogAjax() заново показывает #ajax-load и затирал бы
   toggle легаси-модуля.
   ============================================================ */
body.new-design-catalog.nd-models-view #ajax-load,
body.new-design-catalog.nd-models-view #ajax-load-list { display: none !important; }

body.new-design-catalog.nd-models-view #models-view { display: block !important; }

/* Карточки моделей приходят со стилями легаси (`.mv-*` объявлены в inc/custom-filter_full.php).
   Подгоняем под сетку нового дизайна: та же ширина, что у списка машин. */
body.new-design-catalog #models-view { margin-top: 4px; }

body.new-design-catalog #models-view .mv-list { display: flex; flex-direction: column; gap: 10px; }

body.new-design-catalog #models-view .mv-item {
  background: #FFF; border: 1px solid var(--line, #ECECF0); border-radius: 14px; overflow: hidden;
}

body.new-design-catalog #models-view .mv-truncated,
body.new-design-catalog #models-view .mv-loading {
  padding: 14px 4px; color: var(--muted, #6E6E76); font-size: 13px;
}

/* Карточка модели: легаси-стили `.mv-*` рассчитаны на десктоп и в rem (тот же
   множитель 1.4 — 19.6/16.8/18.2px вместо 14/12/13). На 375px колонка с текстом
   ужималась до 65px и «5078 автомобилей · 2018–2026» вставало по слову в строку.
   Задаём фото фиксированную ширину, тексту — абсолютные размеры. */
body.new-design-catalog #models-view .mv-head {
  display: flex !important; align-items: center; gap: 12px; padding: 12px;
}

body.new-design-catalog #models-view .mv-photo {
  flex: 0 0 112px !important; width: 112px !important; height: 76px !important;
  object-fit: cover; border-radius: 10px; background: var(--line-2, #f0f0f3);
}

body.new-design-catalog #models-view .mv-info { flex: 1 1 auto !important; min-width: 0 !important; }

body.new-design-catalog #models-view .mv-name { font-size: 15px !important; font-weight: 700 !important; line-height: 1.25 !important; }

body.new-design-catalog #models-view .mv-meta { font-size: 12px !important; line-height: 1.35 !important; margin-top: 3px !important; color: var(--muted, #6E6E76) !important; }

body.new-design-catalog #models-view .mv-price { font-size: 14px !important; font-weight: 800 !important; margin-top: 4px !important; }

body.new-design-catalog #models-view .mv-chevron { flex: 0 0 auto; color: var(--muted, #6E6E76); }

@media (min-width: 768px) {
  body.new-design-catalog #models-view .mv-photo { flex: 0 0 168px !important; width: 168px !important; height: 112px !important; }
  body.new-design-catalog #models-view .mv-name { font-size: 18px !important; }
  body.new-design-catalog #models-view .mv-meta { font-size: 12.5px !important; }
  body.new-design-catalog #models-view .mv-price { font-size: 16px !important; }
}

/* ============================================================
   2026-08-04 (Ivan: «вот эти 2 вида одинаковые либо не переключается в моб версии»).
   Так и было: на 375px сетка и так в одну колонку, поэтому «Сетка» и «Список»
   давали идентичную карточку 327x553 — переключатель менял класс на body и больше
   ничего. Делаем «Список» настоящим компактным режимом: фото слева, текст справа,
   как в карточках моделей. На десктопе режимы и так отличались — там не трогаем.
   ============================================================ */
@media (max-width: 700px) {
  body.new-design-catalog.nd-view-list #ajax-load-list .card {
    flex-direction: row !important; align-items: stretch; gap: 10px; padding: 8px;
  }
  body.new-design-catalog.nd-view-list #ajax-load-list .card .c-img {
    /* align-self: flex-start — иначе фото растягивается на всю высоту карточки
       и получается узкая вертикальная полоса 128x324 вместо превью */
    flex: 0 0 128px !important; width: 128px !important;
    height: 96px !important; align-self: flex-start;
    border-radius: 10px; overflow: hidden;
  }
  body.new-design-catalog.nd-view-list #ajax-load-list .card .c-body {
    flex: 1 1 auto !important; width: auto !important; min-width: 0; padding: 2px 2px 2px 0 !important;
  }
  /* Компактный режим = «просмотреть много быстро». Оставляем фото, название,
     строку характеристик и рублёвую цену. Всё остальное — бейджи на фото, точки
     галереи, таблица характеристик в две колонки, цена в вонах и две кнопки —
     в 190px ширины не читается и превращается в кашу. */
  body.new-design-catalog.nd-view-list #ajax-load-list .card .c-photo-tag,
  body.new-design-catalog.nd-view-list #ajax-load-list .card .c-zones,
  body.new-design-catalog.nd-view-list #ajax-load-list .card .c-dots,
  body.new-design-catalog.nd-view-list #ajax-load-list .card .c-badges,
  body.new-design-catalog.nd-view-list #ajax-load-list .card .c-actions,
  body.new-design-catalog.nd-view-list #ajax-load-list .card .c-cta { display: none !important; }
  body.new-design-catalog.nd-view-list #ajax-load-list .card .c-img > *:not(.c-photo) { display: none !important; }
  body.new-design-catalog.nd-view-list #ajax-load-list .card .c-title { font-size: 14px !important; line-height: 1.25 !important; }
  body.new-design-catalog.nd-view-list #ajax-load-list .card .c-head { padding-bottom: 4px !important; }
  body.new-design-catalog.nd-view-list #ajax-load-list .card .c-props {
    display: block !important; font-size: 12px !important; line-height: 1.4 !important;
    max-height: 2.9em; overflow: hidden;
  }
  body.new-design-catalog.nd-view-list #ajax-load-list .card .c-props dt,
  body.new-design-catalog.nd-view-list #ajax-load-list .card .c-props dd { display: inline !important; }
  body.new-design-catalog.nd-view-list #ajax-load-list .card .c-price-box {
    background: none !important; padding: 4px 0 0 !important; margin: 0 !important;
  }
  /* `.c-price` лежит НЕ прямым потомком `.c-price-box`, а внутри `.c-price-row`.
     Селектор `> *:not(.c-price)` прятал саму строку с ценой — цена была в DOM,
     но с нулевой высотой. Прячем поимённо подпись и цену в вонах. */
  body.new-design-catalog.nd-view-list #ajax-load-list .card .c-price-lbl,
  body.new-design-catalog.nd-view-list #ajax-load-list .card .c-price-krw { display: none !important; }
  body.new-design-catalog.nd-view-list #ajax-load-list .card .c-price { font-size: 16px !important; font-weight: 800 !important; }
}

body.new-design-catalog.nd-models-view .nd-models-loading { display: block; margin: 10px 0 0; }

body.new-design-catalog.nd-models-view.nd-models-ready .nd-models-loading { display: none; }

/* 2026-08-04 (Ivan: «при виде моделей шрифт поколений выбивается»).
   Чипы поколений внутри аккордеона — снова легаси в rem: 1.2rem при корне 14px
   = 16.8px, паддинг 8.4/16.8, зазор 11.2. Пять поколений занимали ЧЕТЫРЕ ряда
   и смотрелись крупнее названия самой модели. Приводим к виду чипов фильтра. */
/* 04.08 (Ivan: «пилюли поколений сильно прилипают к карточке»): снизу было 2px,
   и ряд чипов упирался в фото первой машины. Разводим 14px. */
body.new-design-catalog #models-view .mv-gens { gap: 6px !important; padding: 12px 12px 14px !important; }

body.new-design-catalog #models-view .mv-gen {
  font-size: 12px !important; font-weight: 600 !important;
  padding: 6px 11px !important; border-radius: 100px !important; line-height: 1.3 !important;
}

@media (min-width: 768px) {
  body.new-design-catalog #models-view .mv-gen { font-size: 12.5px !important; padding: 7px 13px !important; }
}

/* 04.08: ссылка «Все N авто модели на отдельной странице» внутри аккордеона —
   опять легаси в rem: 1.3rem = 18.2px, крупнее названия самой модели (15px).
   И «Показать ещё» рядом. Приводим к размеру подписей нового дизайна. */
body.new-design-catalog #models-view .mv-all-wrap { padding: 12px 12px 14px !important; }

body.new-design-catalog #models-view .mv-all-wrap a {
  font-size: 13px !important; font-weight: 700 !important; line-height: 1.35 !important;
}

body.new-design-catalog #models-view .mv-more-wrap { padding: 12px 12px 0 !important; }

body.new-design-catalog #models-view .mv-more-wrap a,
body.new-design-catalog #models-view .mv-more-wrap button {
  font-size: 13px !important; font-weight: 700 !important;
}

body.new-design-catalog #models-view .mv-cars { padding: 0 12px !important; }

/* ============================================================
   Пустая выдача каталога — конверсионный экран (04.08.2026)
   Ivan: «когда ничего не найдено, нужно показывать более конверсионную стр и текст
   и добавить вотсап ещё для связи» + «текст выглядит как-то не очень выровненный,
   может его сделать по центру, чтобы легко читался и было понятно что делать».
   Разметку отдаёт /ajax/meili-list.php, подсказки считает /inc/korea-empty-suggestions.php.
   ============================================================ */
body.new-design-catalog .nd-empty {
  padding: 26px 0 56px !important;
  /* Центрированная колонка: взгляд идёт сверху вниз по одной оси — заголовок,
     объяснение, варианты действий. Слева-выровненный вариант читался как обрывок
     страницы, потому что рядом не было ничего, что держало бы левый край. */
  max-width: 720px; margin: 0 auto; text-align: center;
}

body.new-design-catalog .nd-empty-head { margin-bottom: 26px; }

body.new-design-catalog .nd-empty-title {
  font-size: 27px; font-weight: 800; letter-spacing: -.02em; color: var(--ink, #0E0E12); line-height: 1.22;
}

body.new-design-catalog .nd-empty-sub {
  margin: 10px auto 0; font-size: 15px; line-height: 1.55; color: var(--muted, #6E6E76); max-width: 520px;
}

body.new-design-catalog .nd-empty-fix { margin-bottom: 28px; }

body.new-design-catalog .nd-empty-fix-h {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted, #6E6E76); margin-bottom: 12px;
}

body.new-design-catalog .nd-empty-fix-list {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}

body.new-design-catalog .nd-empty-fix-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 14px; border: 1px solid rgba(14,14,16,.10); border-radius: 14px;
  background: #fff; text-decoration: none; color: var(--ink, #0E0E12);
  font-size: 14px; font-weight: 600; line-height: 1.2;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

body.new-design-catalog .nd-empty-fix-btn:hover {
  border-color: rgba(14,14,16,.28); box-shadow: 0 4px 14px rgba(14,14,16,.07); transform: translateY(-1px);
}

body.new-design-catalog .nd-empty-fix-btn .nef-n {
  flex: none; padding: 3px 9px; border-radius: 999px;
  background: var(--ink, #0E0E12); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap;
}

body.new-design-catalog .nd-empty-cta {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 26px 24px; border-radius: 18px;
  background: var(--bg, #f7f7f9); border: 1px solid rgba(14,14,16,.06);
}

body.new-design-catalog .nd-empty-cta-txt { max-width: 520px; }

body.new-design-catalog .nd-empty-cta .nec-h {
  font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--ink, #0E0E12);
}

body.new-design-catalog .nd-empty-cta .nec-s {
  margin-top: 7px; font-size: 14.5px; line-height: 1.55; color: var(--muted, #6E6E76);
}

body.new-design-catalog .nd-empty-cta-btns {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}

body.new-design-catalog .nd-empty-cta .nec-btn-pri {
  padding: 14px 26px !important; border: 0 !important; border-radius: 999px !important;
  background: #E1121C !important; color: #fff !important;
  font-size: 15px !important; font-weight: 700 !important; cursor: pointer;
  white-space: nowrap; transition: background .15s;
}

body.new-design-catalog .nd-empty-cta .nec-btn-pri:hover { background: #C50E17 !important; }

body.new-design-catalog .nd-empty-cta .nec-msg {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; text-decoration: none; transition: transform .15s, filter .15s;
}

body.new-design-catalog .nd-empty-cta .nec-msg:hover { transform: translateY(-1px); filter: brightness(1.06); }

body.new-design-catalog .nd-empty-cta .nec-tg  { background: #2AABEE; }

body.new-design-catalog .nd-empty-cta .nec-wa  { background: #25D366; }

body.new-design-catalog .nd-empty-cta .nec-max { background: #fff; border: 1px solid rgba(14,14,16,.10); }

body.new-design-catalog .nd-empty-cta .nec-max img { width: 24px; height: 24px; display: block; }

/* Плавающий виджет чата висит в правом нижнем углу окна (position: fixed) и накрывает всё,
   что под него попадёт при прокрутке — первым же скриншотом он съел иконку MAX.
   Центрированная колонка шириной 720px сама держит кнопки вдали от правого края,
   но на узком десктопе запас нужен явный. */
@media (min-width: 721px) and (max-width: 1100px) {
  body.new-design-catalog .nd-empty { padding-right: 96px !important; }
}

@media (max-width: 720px) {
  body.new-design-catalog .nd-empty { padding: 18px 0 40px !important; }
  body.new-design-catalog .nd-empty-title { font-size: 22px; }
  body.new-design-catalog .nd-empty-sub { font-size: 14.5px; }
  /* Подсказки на телефоне — в колонку: горизонтальная лента прячет варианты,
     а именно они возвращают человека к машинам */
  body.new-design-catalog .nd-empty-fix-list { flex-direction: column; }
  body.new-design-catalog .nd-empty-fix-btn { justify-content: space-between; width: 100%; }
  body.new-design-catalog .nd-empty-cta { padding: 20px 16px 24px; }
  body.new-design-catalog .nd-empty-cta .nec-btn-pri { width: 100%; }
  body.new-design-catalog .nd-empty-cta-btns { width: 100%; }
}

/* 07.08.2026 (Ivan: «в новом дизайне всё ещё не выделяется выбранный бренд»).
   Класс .active на чипе марки проставлялся с 04.08 (ndSyncPathChips), но правило было
   написано ТОЛЬКО для .bt-chip.active — у ряда «МАРКА» подсветки не существовало вовсе.
   Я тогда проверил наличие класса и на этом остановился: надо было смотреть computed-стиль,
   а он у выбранной Kia был байт в байт как у невыбранной Hyundai.
   Стиль повторяет чип кузова: тёмная плашка, буква-аватар полупрозрачная. */
body.new-design-catalog .brands-row .brand-chip.active,
body.new-design-catalog .bp-body a.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

body.new-design-catalog .brands-row .brand-chip.active .bc-mark,
body.new-design-catalog .bp-body a.active .bc-mark {
  background: rgba(255,255,255,.16);
  color: #fff;
}

/* 07.09.2026 (аудит, п. 19): полупрозрачная подложка нужна только буквенной заглушке.
   У знака марки (.bc-logo) она рисовала серый прямоугольник вокруг круглой эмблемы
   (BMW на тёмном чипе выглядел как «заплатка»). Специфичность (0,6,0) — на единицу
   выше правила выше, поэтому !important не нужен. */
body.new-design-catalog .brands-row .brand-chip.active .bc-mark.bc-logo,
body.new-design-catalog .bp-body a.active .bc-mark.bc-logo {
  background: #fff;          /* белая «монетка», а не серая заплатка */
  border-radius: 999px;      /* форма чипа, круглая эмблема ложится в круг */
  padding: 0 5px;            /* знак не упирается в край подложки */
}

body.new-design-catalog .brands-row .brand-chip.active .bc-n,
body.new-design-catalog .bp-body a.active .bc-n {
  color: rgba(255,255,255,.55);
}

/* Голосовой поиск на телефоне: чуть меньше, отступы плотнее — строка и так узкая */
@media (max-width: 600px) {
  body.new-design-catalog .search-bar .s-div-mic { margin: 0 7px 0 8px; height: 18px; }
  body.new-design-catalog .search-bar .s-mic { width: 30px; height: 30px; margin-right: 6px; }
  body.new-design-catalog .search-bar .s-mic svg { width: 16px; height: 16px; }
}

/* by 22.10.2026 (Ivan: «SEO-блоки с текстом тоже должны быть в новом дизайне»): SEO-текст раздела (.catalog-element--desc,
   спойлер ndcd из new-catalog.js) — отдельной карточкой нового дизайна: светлый фон, подпись-eyebrow, заголовки как у секций.
   Только шаблон encarrus_by_staging. */
body.new-design-catalog .catalog-element--desc{box-sizing:border-box;background:var(--bg,#F7F7F9);border-radius:24px;
  width:calc(100% - 48px)!important;max-width:calc(1520px - 48px)!important;margin:40px auto 16px!important;padding:40px 48px 30px!important}
@media (min-width:1280px){body.new-design-catalog .catalog-element--desc{width:calc(100% - 64px)!important;max-width:calc(1520px - 64px)!important}}
@media (min-width:1600px){body.new-design-catalog .catalog-element--desc{width:calc(100% - 80px)!important;max-width:calc(1520px - 80px)!important}}
body.new-design-catalog .catalog-element--desc::before{content:'О каталоге';display:block;font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent,#E11D2E);margin-bottom:14px}
body.new-design-catalog .catalog-element--desc .ndcd-body::after{background:linear-gradient(180deg,rgba(247,247,249,0),var(--bg,#F7F7F9))}
body.new-design-catalog .catalog-element--desc .ndcd-body > p:first-child{font-size:16px;line-height:1.6;color:var(--ink,#0E0E12);max-width:820px}
body.new-design-catalog .catalog-element--desc h2,
body[class*="new-design"] main.content .catalog-element--desc .ndcd-body h2{font-size:26px!important;line-height:1.2!important;letter-spacing:-.02em;font-weight:700;margin:26px 0 12px!important;color:var(--ink,#0E0E12)}
@media (max-width:640px){
  body.new-design-catalog .catalog-element--desc{width:calc(100% - 32px)!important;padding:26px 18px 20px!important;border-radius:18px;margin-top:28px!important}
  body.new-design-catalog .catalog-element--desc h2,
  body[class*="new-design"] main.content .catalog-element--desc .ndcd-body h2{font-size:20px!important}
  body.new-design-catalog .catalog-element--desc .ndcd-body > p:first-child{font-size:14.5px}
}


/* ---- nd-logo-fit.css ---- */
/* 04.09.2026 — доводка эмблем марок по итогам проверки.

   Что нашли: бокс знака одинаков (34x20), но реальная высота отрисовки гуляла от 3 до 22 px.
   Причина: у широких знаков-надписей (Honda, BYD, Geely, Dodge) картинка вписывается по ширине
   и остаётся полоской в несколько пикселей, а у круглых (BMW, Mercedes) занимает всю высоту.
   Плюс в рядах, где знак соседствует с буквенной заглушкой, чипы получались разной высоты:
   заглушка 24 px против знака 20 px.

   Лечим: широким знакам даём больше ширины (52 px против 34) и не даём проседать по высоте
   меньше 14 px; боксу знака и боксу буквы задаём одну высоту, чтобы чипы стояли ровно.
   Файл подключается последним, поэтому перебивает правила new-catalog.css при равной силе. */

body[class*="new-design"] .brand-chip .bc-logo,
body.nd-hybrid .brand-chip .bc-logo {
  max-width: 52px;
  height: 24px;              /* одна высота с буквенной заглушкой .bc-mark (24px) */
}
body[class*="new-design"] .brand-chip .bc-logo img,
body.nd-hybrid .brand-chip .bc-logo img {
  min-height: 14px;          /* полоска-надпись не схлопывается в ниточку */
  max-height: 24px;
}

/* попап «Все марки»: то же самое, там знаков больше всего */
body[class*="new-design"] .bp-item .bp-mark-logo,
body.nd-hybrid .bp-item .bp-mark-logo {
  max-width: 52px;
  height: 26px;
}
body[class*="new-design"] .bp-item .bp-mark-logo img,
body.nd-hybrid .bp-item .bp-mark-logo img {
  min-height: 15px;
  max-height: 26px;
}

@media (max-width: 860px) {
  body[class*="new-design"] .brand-chip .bc-logo,
  body.nd-hybrid .brand-chip .bc-logo { max-width: 44px; height: 22px; }
  body[class*="new-design"] .brand-chip .bc-logo img,
  body.nd-hybrid .brand-chip .bc-logo img { min-height: 12px; max-height: 22px; }
}


/* ---- nd-city-mobile.css ---- */
/* 04.09.2026 - п.30 списка Никиты «токены почти не используются, 3359 хардкодов цвета».
   Точные совпадения канона заменены на var(--токен, #значение); фолбэк оставлен намеренно -
   если переменная потеряется, цвет останется прежним. Соответствие:
   #0E0E12 --ink · #1E1E24 --ink-2 · #3D3D48 --ink-3 · #6E6E76 --muted · #ECECF0 --line ·
   #F0F0F3 --line-2 · #F7F7F9 --bg · #E11D2E --accent · #B8152B --accent-2 · #1E8C4A --success ·
   #FAEDD1 --warn-soft · #FFFFFF --bg-card (фоны) либо --ink-invert (текст, иконки, обводки).
   Намеренно НЕ трогали #5A5A66, #9C9CA8, #C07A00: их токены (--ink-4, --muted-2, --warn)
   new-catalog-after.css переопределяет внутри .how/.faq/.adv/.viewed/.seo/.contacts-section
   на другие значения - подстановка var() там сменила бы цвет. Заменено в файле: 3. */
/* 04.09.2026 (Ivan: «по-моему в моб. версии старая версия всплывашки с выбором города»).

   Так и было: новый список городов (.city-pop) живёт внутри .tb-city-wrap — блока верхней
   панели, а она на телефоне скрыта (new-catalog.css:4579). Поэтому 02.09 кнопке мобильной
   шапки (.nd-mh-city) намеренно оставили старое модальное окно «Выберите свой город»
   (.cities-list в подвале, две колонки и кнопка «Поиск»).

   Теперь на телефоне открывается тот же новый список: скрипт (js/main.js) переносит .city-pop
   в конец body и вешает класс на html. Здесь — вид листа снизу и затемнение под ним.
   На компьютере ничего не меняется: правила действуют только при ширине до 1099 px и только
   когда у .city-pop есть класс is-mobile. */

@media (max-width: 1099px) {
  /* затемнение */
  .ndcm-back {
    position: fixed; inset: 0; z-index: 10001; background: rgba(14, 14, 18, .55);
    opacity: 0; transition: opacity .2s;
  }
  html.ndcm-open .ndcm-back { opacity: 1; }
  .ndcm-back[hidden] { display: none !important; }

  html.ndcm-open, html.ndcm-open body { overflow: hidden; }

  /* сам список: лист снизу на всю ширину */
  .city-pop.is-mobile {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    top: auto !important; transform: translateY(100%); width: auto !important; max-width: none !important;
    max-height: 86vh; overflow-y: auto; z-index: 10002 !important;
    margin: 0 !important; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) !important;
    background: var(--bg-card, #FFFFFF); border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(14, 14, 18, .22);
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    display: block !important; transition: transform .24s ease;
  }
  html.ndcm-open .city-pop.is-mobile { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .city-pop.is-mobile, .ndcm-back { transition: none; }
  }

  /* полоска-ручка сверху, как у листов в приложениях */
  .city-pop.is-mobile::before {
    content: ''; display: block; width: 38px; height: 4px; border-radius: 999px;
    background: #E3E5EA; margin: -6px auto 12px;
  }

  .city-pop.is-mobile .cp-head { font-size: 17px; font-weight: 800; margin-bottom: 12px; padding-right: 40px; }
  .city-pop.is-mobile .cp-search { position: sticky; top: 0; background: var(--bg-card, #FFFFFF); z-index: 2; padding-bottom: 8px; }
  .city-pop.is-mobile .cp-search input { min-height: 46px; font-size: 16px; }  /* 16px — iOS иначе зумит страницу */
  .city-pop.is-mobile .cp-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .city-pop.is-mobile .cp-city { min-height: 46px; }
  .city-pop.is-mobile .cp-section { margin-top: 14px; }

  /* крестик: у выпадающего списка на компьютере его нет — он закрывается кликом мимо */
  .ndcm-x {
    position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; display: grid; place-items: center;
    border: 0; border-radius: 50%; background: #F1F2F5; color: var(--muted, #6E6E76); cursor: pointer; z-index: 3;
  }
}

/* Кнопка связи и её пузырь сидят на z-index 999999 — выше листа; пока список открыт, прячем
   (то же самое сделано для окна квиза, css/pages/nd-quiz.css). */
html.ndcm-open #enc-fab-callback,
html.ndcm-open #enc-fab-greet,
html.ndcm-open #enc-fab-msgs { display: none !important; }


/* ---- nd-fix-a.css ---- */
/* 04.09.2026 - п.30 списка Никиты «токены почти не используются, 3359 хардкодов цвета».
   Точные совпадения канона заменены на var(--токен, #значение); фолбэк оставлен намеренно -
   если переменная потеряется, цвет останется прежним. Соответствие:
   #0E0E12 --ink · #1E1E24 --ink-2 · #3D3D48 --ink-3 · #6E6E76 --muted · #ECECF0 --line ·
   #F0F0F3 --line-2 · #F7F7F9 --bg · #E11D2E --accent · #B8152B --accent-2 · #1E8C4A --success ·
   #FAEDD1 --warn-soft · #FFFFFF --bg-card (фоны) либо --ink-invert (текст, иконки, обводки).
   Намеренно НЕ трогали #5A5A66, #9C9CA8, #C07A00: их токены (--ink-4, --muted-2, --warn)
   new-catalog-after.css переопределяет внутри .how/.faq/.adv/.viewed/.seo/.contacts-section
   на другие значения - подстановка var() там сменила бы цвет. Заменено в файле: 6. */
/* 03.09.2026 — точечные правки по аудиту: карточки каталога (фото, характеристики, цена, элементы поверх снимка).
   Файл подключается последним из nd-fix-*.css, поэтому при равной специфичности выигрывает он.

   Область действия — только выдача каталога: #ndCatalogContainer на /korea/ и /china/.
   Корея — #ndCatalogContainer БЕЗ класса .ndcn-catalog, Китай — С ним.
   Режим «Список» (body.nd-view-list) исключён везде: там своя компактная карточка. */

/* ============================================================
   п.44. Фото обрезалось по бокам, резался водяной знак encar.com.
   Кадр от encar приходит 640×384 (5/3 ≈ 1.667), а .c-img был 4/3 (1.333)
   и рисовал его background-size:cover → срезало примерно по 10 % ширины
   с каждой стороны вместе с подписью encar.com в правом нижнем углу.
   Даём контейнеру собственную пропорцию кадра — кроп исчезает.
   Высота карточек в ряду остаётся одинаковой: соотношение одно для всех .c-img.
   Китайские фото (S3) приходят 800×600, то есть ровно 4/3 — там пропорцию
   НЕ меняем, иначе у них появились бы поля слева и справа.
   ============================================================ */
body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer:not(.ndcn-catalog) .card > .c-img,
body.new-design-catalog:not(.nd-view-list) .fav-section .grid .card > .c-img {
  aspect-ratio: 5 / 3;
}

/* ============================================================
   п.45а. «385 л.с. (30-мин 173)» слипалось в одну строку и ломалось на телефоне.
   У .power-30min не было ни одного правила. Делаем его подписью под значением:
   .c-prop-v — flex-элемент, то есть блочный контейнер, поэтому блочный потомок
   встаёт отдельной строкой. Соседние свойства не съезжают: .c-prop прижимает
   содержимое к верху (align-items:baseline), «Привод» справа остаётся на месте,
   пунктирные подчёркивания ряда держатся на одном уровне.
   ============================================================ */
body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card .c-prop .power-30min {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--muted, #6E6E76);
  white-space: nowrap;
}
/* Значение из двух строк шире ключа — прижимаем обе строки вправо,
   как выровнены значения остальных характеристик. */
body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card .c-prop-v:has(.power-30min) {
  text-align: right;
}

/* ============================================================
   п.45б. Оранжевое предупреждение внутри .c-price-box спорило с ценой —
   четвёртый цвет в карточке. Гасим до приглушённого серого и выносим из
   ценового блока: отрицательные поля вытаскивают плашку за паддинги
   .c-price-box (12px 14px), она получает белый фон и волосяную линию сверху
   и читается как отдельная компактная плашка ПОД ценой, а не как её часть.
   Значок — инлайновый SVG в data-URI: разметку править нельзя, отдельного
   элемента под иконку в карточке нет.
   !important нужен ТОЛЬКО цвету: в шаблоне у этого div инлайновый
   style="color:#B26A00", а инлайн-стиль иначе не перебить.
   ============================================================ */
body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card .c-price-box .electrical-car-price--info {
  color: var(--muted, #6E6E76) !important;
  margin: 10px -14px -12px;
  padding: 8px 14px 8px 32px;
  background: var(--bg-card, #FFFFFF);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E76' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11.2v5'/%3E%3Cpath d='M12 7.4v.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 13px 9px;
  background-size: 13px 13px;
  border-top: 1px solid var(--line, #ECECF0);
  border-radius: 0 0 12px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

/* ============================================================
   п.16. Цена «прыгала»: .c-body — колоночный flex, но margin-top:auto стоял
   только у .c-cta, поэтому блок цены висел сразу под характеристиками,
   а их высота разная («SUV (кроссовер/внедорожник)» переносится, «Седан» нет).
   Переносим авто-отступ на .c-price-box — свободное место уходит НАД ценой,
   и цена с кнопками у всех карточек ряда встают на одну линию.
   У .c-cta авто-отступ снимаем: два margin-top:auto в одной колонке делят
   свободное место пополам, и цена уехала бы в середину карточки.
   ============================================================ */
body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card .c-price-box { margin-top: auto; }
body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card .c-cta { margin-top: 0; }

/* ============================================================
   п.16 (вторая половина). Бейдж «В наличии» — к правому краю.
   Раскрываем .c-labels на всю ширину кадра и толкаем зелёный бейдж вправо.
   Кнопки «Спросить ИИ» + ♥ (.c-actions) уезжают на вторую строку справа —
   иначе они стояли бы ровно на месте бейджа.
   Правый НИЖНИЙ угол кадра намеренно оставлен пустым: там водяной знак
   encar.com, ради которого сделан п.44.
   Контейнер бейджей больше не ловит мышь — раньше он закрывал зоны
   перелистывания фото (.c-zones) в своей полосе.
   ============================================================ */
/* 03.09.2026, после проверки: на компьютере зелёный бейдж НЕ уводим вправо — в правом верхнем
   углу кадров Encar стоит логотип «Trust Encar», и туда же вставали бейдж и две кнопки: три
   слоя в одном углу. Бейджи остаются слева в ряд (их ширина стабильна — «прыгание» лечится
   строкой из п.16 выше), кнопки — в своём углу. Правый край для «В наличии» — только на
   телефоне, где бейджи уже под снимком (см. п.46). Клик по полосе бейджей по-прежнему ведёт
   на карточку — pointer-events не трогаем. */
body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card .c-img > .c-labels {
  left: 12px;
  max-width: calc(100% - 12px - 176px);   /* справа остаётся место под «Спросить ИИ» + ♥ */
  flex-wrap: wrap;                          /* не поместились в строку — второй бейдж ниже, без обрезки */
  gap: 6px;
}
body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card .c-img > .c-labels > .c-label { flex: none; }
body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card .c-img > .c-labels > .c-label {
  min-width: 0;          /* длинный бейдж может ужаться, а не выдавить соседа */
  line-height: 14px;     /* фиксируем высоту пилюли: 4 + 14 + 4 = 22px */
  /* Два !important возвращают бейджам одну строку. Правило от 31.08.2026
     (new-catalog.css, @media max-width:760px) ставит white-space:normal !important
     и text-overflow:clip !important — оно писалось под узкие карточки аукциона
     шириной 190px. В карточке каталога бейджам достаётся вся ширина карточки,
     а перенос на вторую строку ломает высоту полосы под фото (см. п.46 ниже),
     которая резервируется паддингом .c-body и посчитана на одну строку. */
}
/* Одна строка у бейджа — только когда он лежит на фото (широкие экраны). На телефоне
   действует правило от 31.08 с переносом: там «В наличии в Корее» иначе обрывалось. */
@media (min-width: 701px) {
  body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card .c-img > .c-labels > .c-label {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden;
  }
}

/* 07.09.2026 (аудит, п. 24). На узкой карточке под бейджи остаётся 100% - 188px:
   на 1151px (три колонки по 339px) это 151px, а «В НАЛИЧИИ В КОРЕЕ» / «В НАЛИЧИИ В КИТАЕ»
   требуют 155px — бейдж обрывался многоточием. Пока карточка узкая, разрешаем бейджу
   переноситься на вторую строку: он лежит на фото, вертикального места там достаточно
   (запрет переноса нужен был только для полосы ПОД фото на телефоне, <=700px).
   С 1281px карточка от 375px — бейдж снова умещается в строку, правило выше работает. */
@media (min-width: 701px) and (max-width: 1280px) {
  body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card .c-img > .c-labels > .c-label {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible;
  }
}
body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card .c-img > .c-labels > .c-label.green {
  flex: none;
}

/* ============================================================
   п.46. Телефон: поверх фото было четыре элемента (два бейджа, «Спросить ИИ»,
   ♥) плюс точки. Просили оставить на фото только избранное, бейджи убрать
   под снимок, кнопку ИИ — в тело карточки. Разметку править нельзя, поэтому
   переносим стилями: .c-labels и .c-ai позиционируются НИЖЕ кадра, а место
   под них резервируется верхним паддингом .c-body.
   Порог 700px — тот же, на котором в new-catalog.css переключается вся
   остальная мобильная карточка; сетка каталога к этому моменту уже в одну
   колонку (переход на 720px, template_styles.css).
   ============================================================ */
@media (max-width: 700px) {
  /* .c-img перестаёт обрезать содержимое, иначе вынесенные под снимок бейджи
     и кнопка ИИ будут срезаны. Сами фото лежат inset:0 и за кадр не вылезают,
     а скругление верхних углов даёт .card (у неё overflow:hidden). */
  body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card > .c-img {
    overflow: visible;
  }

  /* .c-actions растягиваем на весь кадр, чтобы координаты потомков считались
     от снимка, а не от прежней коробки 30×30 в правом верхнем углу.
     Сам контейнер мышь не ловит — иначе он перекрыл бы зоны перелистывания. */
  body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card .c-img > .c-actions {
    position: absolute;
    inset: 0;
    display: block;
    max-width: none;
    pointer-events: none;
  }

  /* Избранное остаётся на фото — там же, где было. */
  body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card .c-img > .c-actions > .c-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    pointer-events: auto;
  }

  /* Бейджи — первой строкой под снимком, «В наличии» по-прежнему справа.
     Отступы 14px совпадают с боковыми паддингами .c-body на телефоне. */
  body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card .c-img > .c-labels {
    top: 100%;
    left: 14px;
    right: 14px;
    width: auto;                /* базовое правило задаёт полосе ширину под кнопки — тут кнопок на фото нет */
    max-width: none;
    margin-top: 11px;
    flex-wrap: wrap;
  }
  body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card .c-img > .c-labels > .c-label {
    flex: none;                 /* пилюля не сжимается — текст в ней не переносится на вторую строку */
    white-space: nowrap !important;
  }
  /* Под снимком «В наличии» уходит к правому краю — но только у Кореи, где слева стоит
     второй бейдж. У Китая бейдж один, ему место слева. */
  body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer:not(.ndcn-catalog) .card .c-img > .c-labels > .c-label.green {
    margin-left: auto;
  }

  /* Кнопка ИИ — с фото в тело карточки, второй строкой под бейджами.
     41px = 11 (отступ до бейджей) + 22 (высота бейджа) + 8 (зазор).
     Стеклянный вид «поверх фотографии» здесь не нужен: кнопка стоит на белом,
     поэтому спокойный фон и тонкая линия вместо тени и блюра.
     !important — потому что фон и рамку задаёт правило с !important
     в new-catalog.css (оно писалось для читаемости на тёмных снимках). */
  body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card .c-img > .c-actions > .c-ai {
    position: absolute;
    top: 100%;
    left: 14px;
    right: auto;
    margin-top: 41px;
    width: auto;
    padding: 0 12px 0 10px;
    pointer-events: auto;
    background: var(--bg, #F7F7F9) !important;
    border: 1px solid var(--line, #ECECF0) !important;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* На фото подпись прятали (кнопка сжималась в кружок 30×30), потому что место
     занимал снимок. В теле карточки место есть — возвращаем текст «Спросить ИИ»,
     иначе одинокий кружок под бейджами ничего не объясняет. */
  body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card .c-img > .c-actions > .c-ai > span {
    display: inline;
  }

  /* Плашка про вывоз электромобилей: на телефоне у .c-price-box паддинги 10px 12px,
     а не 12px 14px — отрицательные поля подгоняем, иначе она выступала на 2px. */
  body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card .c-price-box .electrical-car-price--info {
    margin: 10px -12px -10px;
  }

  /* Место под перенесённые элементы.
     Китай: только бейджи (кнопки ИИ в китайской карточке нет) — 11 + 22 + 12 = 45px. */
  body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card > .c-body {
    padding-top: 45px;
  }
  /* Корея: бейджи + кнопка ИИ — 41 + 30 (высота кнопки) + 10 = 81px.
     14.09.2026: кнопку «Спросить ИИ» сняли с карточек ещё 08.09 (Ivan), а резерв под неё
     остался — под бейджами зияли лишние 48px. Пока бейджи переносились на вторую строку,
     дыру не было видно; после того как пара снова встала в одну строку, она вылезла.
     Ставим ту же формулу, что у Китая: 11 (отступ до бейджей) + 22 (высота) + 12 = 45px.
     Больше одной строки бейджей быть не может: своих меток (LABELS) нет ни у одной машины,
     печатается максимум «возрастной» бейдж + «В наличии». */
  body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer:not(.ndcn-catalog) .card > .c-body {
    padding-top: 45px;
  }
}

/* ============================================================
   14.09.2026 (Ivan: «вот тут съехали бейджи»). Под снимком на телефоне полоса
   бейджей рассчитана на ОДНУ строку (п.46 выше: .c-labels стоит абсолютно,
   место под неё резервирует верхний паддинг .c-body). Пара «Дешевле таможня» +
   «В наличии в Корее» в эту строку не влезала никогда: 327 px при полосе 297 px
   на 375 px экрана (до подъёма шрифтов до 12px было 315 px — тоже больше).
   Зелёный бейдж переносился на вторую строку и вставал у правого края
   (margin-left: auto из п.46) — читалось как съехавшая вёрстка.

   Ужать пилюли не хватает: без letter-spacing и с padding 6px пара даёт 307 px,
   а на экранах 360 px полоса ещё уже. Поэтому на телефоне печатаем короткий
   текст «В наличии» (дубль в разметке, card/template.php) — пара даёт 264 px
   и обе метки снова стоят в одной строке.
   ============================================================ */
@media (max-width: 700px) {
  body[class*="new-design"] .c-label > .cl-full { display: none; }
  body[class*="new-design"] .c-label > .cl-short { display: inline !important; }
}

/* --- Экраны уже 360px (iPhone SE 1-го поколения и старые Android) ---------------
   Даже с коротким «В наличии» пара бейджей там не всегда влезает в строку:
   полоса 242px против 246-264px у пары. Для таких экранов честно резервируем
   ДВЕ строки (11 + 22 + 8 + 22 + 9 = 72px) и снимаем прижатие зелёного бейджа
   вправо — перенесённая метка встаёт под левой, а не висит у правого края.
   14.09.2026. */
@media (max-width: 359px) {
  body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer:not(.ndcn-catalog) .card > .c-body {
    padding-top: 72px;
  }
  body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer:not(.ndcn-catalog) .card .c-img > .c-labels > .c-label.green {
    margin-left: 0;
  }
}

/* ============================================================
   20.10.2026 (Ivan). Метка «Проверен дилером» у сертифицированных (CPO) машин Korea —
   пилюля .c-label--cpo в .c-labels (card/template.php).
   На фото (от 701px) встаёт в общий ряд с переносом. На телефоне ряд под снимком рассчитан
   на одну строку (п.46), и «Ниже пошлина» + «В наличии» её уже занимают — поэтому при соседе
   слева (класс карточки .card--cpo) CPO-метка идёт отдельной строкой, сразу под рядом (top: 100% от .c-labels — высота ряда без неё,
   на экранах до 359px ряд сам бывает в две строки). Без соседа метка стоит в первой строке рядом
   с «В наличии» (~235px в полосе 297px). Место резервируется только у карточек .card--cpo:
   45 + 6 + 22 = 73px, до 359px — 72 + 28 = 100px.
   ============================================================ */
@media (max-width: 700px) {
  body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer:not(.ndcn-catalog) .card.card--cpo > .c-body {
    padding-top: 73px;
  }
  body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer .card.card--cpo .c-img > .c-labels > .c-label--cpo {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
  }
}
@media (max-width: 359px) {
  body.new-design-catalog:not(.nd-view-list) #ndCatalogContainer:not(.ndcn-catalog) .card.card--cpo > .c-body {
    padding-top: 100px;
  }
}


/* ---- nd-fix-b.css ---- */
/* 04.09.2026 - п.30 списка Никиты «токены почти не используются, 3359 хардкодов цвета».
   Точные совпадения канона заменены на var(--токен, #значение); фолбэк оставлен намеренно -
   если переменная потеряется, цвет останется прежним. Соответствие:
   #0E0E12 --ink · #1E1E24 --ink-2 · #3D3D48 --ink-3 · #6E6E76 --muted · #ECECF0 --line ·
   #F0F0F3 --line-2 · #F7F7F9 --bg · #E11D2E --accent · #B8152B --accent-2 · #1E8C4A --success ·
   #FAEDD1 --warn-soft · #FFFFFF --bg-card (фоны) либо --ink-invert (текст, иконки, обводки).
   Намеренно НЕ трогали #5A5A66, #9C9CA8, #C07A00: их токены (--ink-4, --muted-2, --warn)
   new-catalog-after.css переопределяет внутри .how/.faq/.adv/.viewed/.seo/.contacts-section
   на другие значения - подстановка var() там сменила бы цвет. Заменено в файле: 3. */
/* 03.09.2026 — точечные правки по аудиту: главная: блоки, заголовок, липкие колонки.
   Файл подключается последним, поэтому при равной специфичности выигрывает он.
   Всё под body.new-design-home — чтобы не задеть /korea/, карточку авто и «Избранное»,
   которым nd-fix-*.css подключается тем же кодом в header.php. */

/* ═══ п.12. Липкая колонка «Вопрос-ответ» уезжала под шапку ═══════════════════════
   Было top: 30px (new-home.css:2434) при липкой шапке 69px — заголовок блока и кнопка
   «Задать свой вопрос» подрезались краем шапки. Берём тот же отступ 86px, которым уже
   вылечена соседняя панель «Как проходит заказ» (new-catalog.css:10094). */
body.new-design-home .h2b-faq-aside { top: 86px; }
/* тот же дефект в архивной первой версии главной (/home1/, класс .faq-aside,
   new-home.css:1735). На текущей главной этот класс не используется. */
body.new-design-home .faq-aside { top: 86px; }

/* ═══ п.13а. Жёлтый в блоке «Контактная информация» ═══════════════════════════════ */
/* телефон в тёмной карточке главного офиса был #facc15 — жёлтого в палитре нет;
   на тёмной подложке белый читается лучше и не спорит с акцентом */
body.new-design-home .h2b-off-phone,
body.new-design-home a.h2b-off-phone { color: var(--ink-invert, #FFFFFF); }
/* телефон стал ссылкой (п.13б) — гасим вид «обычной ссылки», оставляем прежний блок */
body.new-design-home a.h2b-off-phone { display: inline-block; text-decoration: none; }
body.new-design-home a.h2b-off-phone:hover { color: var(--ink-invert, #FFFFFF); opacity: .8; }
/* плашки «Корея»/«Китай»: было #FEF3C7 / #b45309 — тот же нейтральный, что у «представитель».
   Дублирует new-catalog.css:9972 — оставляем явно, чтобы жёлтый не вернулся правкой выше. */
body.new-design-home .h2b-off-tag-kr { background: var(--line, #ECECF0); color: var(--muted, #6E6E76); }
/* звёзды рейтинга отзывов были #facc15 → акцент палитры */
body.new-design-home .h2b-rv-stars { color: var(--accent, #E11D2E); }

/* ═══ п.13в. «Связаться»: на десктопе — форма на самой странице, с телефона — звонок ═══
   Разметка (nd-home2-body.php) даёт в карточке две ссылки подряд; лишнюю прячем по ширине
   экрана. 640px — та же граница, на которой сетка офисов становится одноколоночной. */
body.new-design-home a.h2b-off-contact-tel { display: none; }
@media (max-width: 640px) {
  body.new-design-home a.h2b-off-contact-form { display: none; }
  body.new-design-home a.h2b-off-contact-tel { display: inline-block; }
}

/* ═══ п.5 и 17. Значок и заголовок — на одном уровне ══════════════════════════════ */
/* карточки обязательств (.h2-guar-c): значок стоял отдельной строкой над заголовком.
   Переводим карточку в сетку: значок в первой колонке, заголовок рядом, описание
   и метка — во всю ширину. */
body.new-design-home .h2-guar-c {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 12px;
}
body.new-design-home .h2-guar-c .h2-guar-i   { grid-column: 1; grid-row: 1; align-self: center; margin-bottom: 0; }
body.new-design-home .h2-guar-c .h2-guar-t   { grid-column: 2; grid-row: 1; align-self: center; }
body.new-design-home .h2-guar-c .h2-guar-d   { grid-column: 1 / -1; grid-row: 2; margin-top: 12px; }
body.new-design-home .h2-guar-c .h2-guar-tag { grid-column: 1 / -1; grid-row: 3; justify-self: start; }

/* карточки Trade-in / Для дилеров / Кредит (.sbs-card) — та же болезнь:
   значок → надзаголовок → заголовок тремя строками. Карточка была flex-колонкой
   (new-catalog.css:10435); делаем сеткой: значок слева на высоту пары «надзаголовок +
   заголовок», остальное во всю ширину. Строка списка растяжимая (1fr), поэтому кнопка
   остаётся прижатой к низу карточки — как её поставили 30.08. */
body.new-design-home .sbs-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr auto;
  column-gap: 14px;
}
body.new-design-home .sbs-card .sbs-ic      { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin-bottom: 0; }
body.new-design-home .sbs-card .sbs-eyebrow { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 4px; }
body.new-design-home .sbs-card .sbs-t       { grid-column: 2; grid-row: 2; align-self: start; }
body.new-design-home .sbs-card .sbs-d       { grid-column: 1 / -1; grid-row: 3; }
body.new-design-home .sbs-card .sbs-list    { grid-column: 1 / -1; grid-row: 4; }
body.new-design-home .sbs-card .sbs-cta     { grid-column: 1 / -1; grid-row: 5; justify-self: start; margin-top: 0; }

/* плашка «Дополнительно · по желанию» на тёмной полосе гарантии была красной
   (фон rgba(225,29,46,.16), текст #FF6B78) и читалась как предупреждение —
   делаем нейтральной: серая подложка, приглушённый текст. */
body.new-design-home .h2-guar-up-tag { background: rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .70); }

/* ═══ п.6. Кнопка «Перейти в полный каталог» под лентой машин ═════════════════════
   Разметка — в nd-home2-body.php сразу после #h2FreshGrid. Стиль кнопки —
   штатный .h2-btn-pri главной, здесь только центрирование и отступ. */
body.new-design-home .h2-fresh-all { display: flex; justify-content: center; margin-top: 20px; }
@media (max-width: 640px) {
  body.new-design-home .h2-fresh-all .h2-btn-pri { width: 100%; justify-content: center; }
}

/* ═══ п.5 и 17, доводка выравнивания ═════════════════════════════════════════════
   У .sbs-t собственный отступ снизу 10px (new-home.css:1665). В сетке он попадает
   внутрь строки заголовка и сдвигает центр значка вниз на ~5px — значок и заголовок
   переставали читаться как одна строка. Отступ переносим на описание. */
body.new-design-home .sbs-card .sbs-t { margin-bottom: 0; }
body.new-design-home .sbs-card .sbs-d { margin-top: 14px; }

/* ═══ п.13а, про .sbs-ti — правило не нужно ══════════════════════════════════════
   Жёлтый градиент .sbs-ti (#fef3c7 → #fde68a, new-home.css:1656) на текущей главной
   уже не виден: карточку перекрывает body.new-design-home .sbs-card
   { background: var(--ink) !important } (new-catalog.css:10438, правка 30.08 — тёмный
   фон с затемнённым фото). !important бьёт градиент независимо от порядка файлов,
   поэтому своего правила здесь нет — иначе оно было бы мёртвым кодом.
   Значок .sbs-ic тоже нейтральный: rgba(255,255,255,.12) (new-catalog.css:10454). */

/* ═══ 04.09.2026 — два китайских пункта в верхнем меню ═══════════════════════════
   Ivan: «переименуем вкладки, сделаем „Авто из Китая БУ" и „Новые авто из Китая"
   и разместим в верхнем меню». Пунктов в строке стало шесть вместо пяти.

   Замер строки на стенде (ширина колонки .main-nav минус ширина пунктов):
     1920/1600 — свободно было 91 px, шестой пункт с полными подписями требует +218;
     1440      — свободно было 12 px. То есть места не хватало НИ на одной ширине,
                 в том числе на 1920. Поэтому два послабления:

   1) Флажки у пунктов скрыты на всём десктопе. Раньше они уже пропадали на
      1000–1439 px (new-catalog.css: «названия важнее»), теперь то же правило
      действует и выше — это ровно те 156 px, которых не хватало на 1920.
      В мобильной шторке (.mnav-nav) и на плитках направлений флаги остались.
   2) Подписи китайских пунктов двухступенчатые: полные «Авто из Китая БУ» и
      «Новые авто из Китая» — от 1500 px, короткие «Китай БУ» и «Новые из Китая» —
      ниже. Короткая подпись аукциона включается с 1439 px (была с 1099),
      у мотоциклов короткая подпись «Мотоциклы» — с 1099 px.

   Проверено на стенде через headless Chrome; свободное место в строке после правки:
   1920 — 62 px, 1500 — 43, 1440 — 72, 1366 — 51, 1280 — 24, 1200 — 19, 1100 — 45,
   1024 — 62, 1000 — 38. Ниже 1000 px строка шапки не помещалась и до этой правки
   (на 960 px сама .header схлопывается до 473 px) — это отдельный давний дефект. */

@media (min-width: 861px) {
  .header .main-nav .flag,
  .header .main-nav .flag-img { display: none; }
  .header .main-nav a {
    gap: 0;
    padding-left: 9px; padding-right: 9px;
    letter-spacing: -.01em;
  }
}

/* Аукцион: короткая подпись «Аукцион AutoHub» уже с 1439 px (в new-catalog.css — с 1099). */
@media (max-width: 1439px) {
  .header .main-nav .nav-long { display: none; }
  .header .main-nav .nav-short { display: inline; }
}

/* Китайские пункты: полные подписи только там, где строка их держит. */
.header .main-nav .nav-cn-short { display: none; }
@media (max-width: 1499px) {
  .header .main-nav .nav-cn-long { display: none; }
  .header .main-nav .nav-cn-short { display: inline; }
}

/* Япония (16.09.2026, открытие раздела): полная подпись, пока строка её держит.
   Порог тот же, что у китайских пунктов, — ниже 1500 строка переполняется. */
.header .main-nav .nav-jp-short { display: none; }
@media (max-width: 1499px) {
  .header .main-nav .nav-jp-long { display: none; }
  .header .main-nav .nav-jp-short { display: inline; }
}

/* Мотоциклы: короткая подпись — только на самых узких десктопных ширинах. */
.header .main-nav .nav-bike-short { display: none; }

/* Самая тесная полоса: 861–1279 px. Поля и кегль поджаты сильнее,
   а межпунктовый зазор 14 px (new-catalog.css, 861–1180) снят — шесть пунктов
   тратили на него 70 px. Разделяют пункты сами поля. */
@media (min-width: 861px) and (max-width: 1279px) {
  .header .main-nav a { padding-left: 6px; padding-right: 6px; font-size: 12px; }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .header .main-nav { gap: 0; }
}
@media (min-width: 861px) and (max-width: 1099px) {
  .header .main-nav a { padding-left: 5px; padding-right: 5px; font-size: 12px; }
  .header .main-nav .nav-bike-long { display: none; }
  .header .main-nav .nav-bike-short { display: inline; }
}

/* 04.09.2026 — попутно, замечено на снимке мобильной шторки при проверке меню:
   у пункта аукциона в шторке видны СРАЗУ обе подписи — «Авто с аукциона AutoHub»
   и «Аукцион AutoHub». Правила .main-nav .nav-short {display:none} и его включение
   ниже 1099px (new-catalog.css) написаны под ряд .main-nav в шапке, а в шторке
   (.mnav-nav) не действуют ни то, ни другое — оба span'а остаются inline.
   Дефект был и до правки меню; в шторке ширина не жмёт, оставляем длинную подпись. */
.mnav-nav .nav-short { display: none; }


/* ---- nd-fix-c.css ---- */
/* 04.09.2026 - п.30 списка Никиты «токены почти не используются, 3359 хардкодов цвета».
   Точные совпадения канона заменены на var(--токен, #значение); фолбэк оставлен намеренно -
   если переменная потеряется, цвет останется прежним. Соответствие:
   #0E0E12 --ink · #1E1E24 --ink-2 · #3D3D48 --ink-3 · #6E6E76 --muted · #ECECF0 --line ·
   #F0F0F3 --line-2 · #F7F7F9 --bg · #E11D2E --accent · #B8152B --accent-2 · #1E8C4A --success ·
   #FAEDD1 --warn-soft · #FFFFFF --bg-card (фоны) либо --ink-invert (текст, иконки, обводки).
   Намеренно НЕ трогали #5A5A66, #9C9CA8, #C07A00: их токены (--ink-4, --muted-2, --warn)
   new-catalog-after.css переопределяет внутри .how/.faq/.adv/.viewed/.seo/.contacts-section
   на другие значения - подстановка var() там сменила бы цвет. Заменено в файле: 2. */
/* 03.09.2026 — точечные правки по аудиту: блок «Как проходит заказ».
   Файл подключается последним, поэтому при равной специфичности выигрывает он. */

/* ============================================================
   П.9. Правая панель .ndh-aside была sticky (top: 86px) без ограничения высоты.
   Содержимое панели на разных шагах — примерно 750–1040px (самый высокий шаг 2:
   видеоотчёт с осмотра + карточка договора + кнопка скачивания), поэтому на любом
   ноутбуке её низ — блок .ndh-mes «или напишите менеджеру» с кнопками MAX /
   Telegram / WhatsApp — оставался ниже края экрана: панель прилипла и не двигается,
   доскроллить до кнопок нельзя.
   Решение: высота панели ограничена окном, у панели своя прокрутка. Пока содержимое
   помещается, полоса не появляется и панель выглядит ровно как раньше.
   Правила только для компьютера: на телефоне (<=700px) панель и так position: static
   и идёт под лентой шагов — там резать нечего.
   ============================================================ */
@media (min-width: 701px) {
  body[class*="new-design"] .ndh-aside {
    /* 86px — отступ под липкую шапку (задан в new-catalog.css),
       24px — запас снизу, чтобы панель не упиралась в край окна */
    max-height: calc(100vh - 86px - 24px);
    overflow-y: auto;
    /* тонкая полоса вместо системной широкой — Firefox */
    scrollbar-width: thin;
    scrollbar-color: #D8D8D4 transparent;
  }
  /* тонкая полоса — Chrome / Safari. Заодно она всегда видна, когда панель
     прокручивается: это признак, что внизу есть ещё содержимое. */
  body[class*="new-design"] .ndh-aside::-webkit-scrollbar { width: 6px; }
  body[class*="new-design"] .ndh-aside::-webkit-scrollbar-track { background: transparent; }
  body[class*="new-design"] .ndh-aside::-webkit-scrollbar-thumb { background: #D8D8D4; border-radius: 3px; }
}

/* Низкое окно (ноутбук 1366x768, окно в половину экрана, планшет и телефон
   в альбомной, ноутбук с открытой консолью): содержимое панели 830-1010px, а окно
   под неё даёт меньше 600px — липкость превращается в узкую форточку с длинной
   внутренней прокруткой и мешает больше, чем помогает. Снимаем липкость: панель
   едет вместе со страницей и читается целиком.
   Порог 700px по высоте окна: 1080p (окно ~900-940px) остаётся липким. */
@media (min-width: 701px) and (max-height: 700px) {
  body[class*="new-design"] .ndh-aside {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* ============================================================
   П.26. На телефоне шаги работают аккордеоном (в new-catalog.css при <=700px
   .ndh-d / .ndh-get / .ndh-pay видны только у .is-on), но признак «сюда можно
   нажать» был один — первый шаг раскрыт по умолчанию. Добавляем ещё два:
   шеврон у каждого шага (поворачивается у раскрытого) и подсказку над лентой.
   Разметку печатает includes/nd-home-shared/how.php.
   На компьютере ничего не сворачивается — там оба элемента скрыты.
   ============================================================ */
body[class*="new-design"] .ndh-hint { display: none; }
body[class*="new-design"] .ndh-chev { display: none; }

@media (max-width: 700px) {
  /* подсказка-строка над лентой шагов. Именно flex, а не inline-flex: у блочной
     строки margin-bottom: -8px схлопывается с margin-top: 22px у .ndh-wrap и даёт
     зазор 14px; у inline-уровня отступ считался бы через line box и снизу
     оставалась бы лишняя щель под базовой линией */
  body[class*="new-design"] .ndh-hint {
    display: flex; align-items: center; gap: 7px;
    margin: 18px 0 -8px;
    font-size: 12.5px; font-weight: 600; line-height: 1.35;
    color: var(--muted, #6E6E76);
  }
  body[class*="new-design"] .ndh-hint svg { flex: none; color: var(--accent, #E11D2E); }

  /* шеврон в правом верхнем углу шага; padding-right — чтобы длинный заголовок
     шага не заезжал под него */
  body[class*="new-design"] .ndh-step { padding-right: 36px; }
  body[class*="new-design"] .ndh-chev {
    position: absolute; right: 0; top: 3px;
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--bg, #F7F7F9); color: var(--muted, #6E6E76);
    transition: transform .22s ease, background .22s ease, color .22s ease;
  }
  body[class*="new-design"] .ndh-chev svg { display: block; }
  /* раскрытый шаг: шеврон перевёрнут и подсвечен акцентом */
  body[class*="new-design"] .ndh-step.is-on .ndh-chev {
    transform: rotate(180deg);
    background: var(--accent, #E11D2E);
    color: var(--ink-invert, #FFFFFF);
  }
}

/* Если в системе включено «уменьшить движение» — поворот шеврона без анимации. */
@media (prefers-reduced-motion: reduce) {
  body[class*="new-design"] .ndh-chev { transition: none; }
}

/* ---------- п.8 списка Никиты: «срок в днях поднять выше» (04.09.2026) ----------
   Было: в карточке шага срок («1–3 дня», «2–3 недели») стоял ПОСЛЕДНЕЙ строкой, ниже
   строк «Вы получаете» и «Оплата», то есть главный вопрос клиента «сколько ждать»
   читался в самом конце, а на телефоне у нераскрытого шага не показывался вовсе
   (new-catalog.css:10140-10142 прячет .ndh-d/.ndh-get/.ndh-pay у неактивных шагов).
   Стало: шаг — flex-колонка, срок поднят сразу под заголовок через order, разметка не тронута.
   Порядок: номер шага → заголовок → срок → описание → «вы получаете» → «оплата». */
body[class*="new-design"] .ndh-step { display: flex; flex-direction: column; }
body[class*="new-design"] .ndh-step .ndh-chev { order: 0; }
body[class*="new-design"] .ndh-step .ndh-n    { order: 1; }
body[class*="new-design"] .ndh-step .ndh-t    { order: 2; }
body[class*="new-design"] .ndh-step .ndh-time { order: 3; margin: 6px 0 0; }
body[class*="new-design"] .ndh-step .ndh-d    { order: 4; }
body[class*="new-design"] .ndh-step .ndh-get  { order: 5; }
body[class*="new-design"] .ndh-step .ndh-pay  { order: 6; }
/* срок виден и у нераскрытого шага: это и есть смысл правки */
body[class*="new-design"] .ndh-step .ndh-time { align-self: flex-start; }


/* ---- nd-fix-d.css ---- */
/* 03.09.2026 — точечные правки по аудиту: страница /partner/.
   Файл подключается последним, поэтому при равной специфичности выигрывает он. */

/* ============================================================
   Замечание 22: первый экран /partner/ был пустым справа.
   В new-catalog.css сетка шапки изначально двухколоночная (стр. 6045), но правило
   на стр. 6223 от 18.08.2026 схлопывало её в одну колонку с комментарием
   «hero без готового баннера». Кадр теперь есть (наш снимок со склада), поэтому
   возвращаем две колонки. Правило new-catalog.css не трогаем — перебиваем отсюда.
   Медиазапросы приходится повторять: правило-схлопыватель в new-catalog.css идёт
   ПОСЛЕ тамошних медиазапросов и гасит их, поэтому адаптив описываем заново.
   ============================================================ */
body.nd-hybrid .ndp-hero-in { grid-template-columns: minmax(0, 1fr) 480px; }

@media (max-width: 1100px) {
  body.nd-hybrid .ndp-hero-in { grid-template-columns: minmax(0, 1fr) 360px; }
}

/* фото: скругление под стиль карточек страницы (радиусы 10-16px) */
body.nd-hybrid .ndp-hero-pic img { display: block; border-radius: 16px; }

/* ---- телефон и узкий планшет ----
   Одна колонка, фото уходит ПОД текст. В new-catalog.css (стр. 6205) картинке
   задан order:-1 — она встала бы НАД заголовком, и первый экран начинался бы
   с фотографии вместо H1. Возвращаем естественный порядок. */
@media (max-width: 900px) {
  body.nd-hybrid .ndp-hero-in { grid-template-columns: 1fr; gap: 16px; }
  body.nd-hybrid .ndp-hero-pic { display: block; order: 0; }
  /* на планшете в одну колонку фото во всю ширину было бы ~620px по высоте
     и выталкивало бы форму за экран — ограничиваем и центрируем */
  body.nd-hybrid .ndp-hero-pic img { width: 100%; max-width: 520px; margin: 0 auto; }
}


/* ---- nd-fix-e.css ---- */
/* 04.09.2026 - п.30 списка Никиты «токены почти не используются, 3359 хардкодов цвета».
   Точные совпадения канона заменены на var(--токен, #значение); фолбэк оставлен намеренно -
   если переменная потеряется, цвет останется прежним. Соответствие:
   #0E0E12 --ink · #1E1E24 --ink-2 · #3D3D48 --ink-3 · #6E6E76 --muted · #ECECF0 --line ·
   #F0F0F3 --line-2 · #F7F7F9 --bg · #E11D2E --accent · #B8152B --accent-2 · #1E8C4A --success ·
   #FAEDD1 --warn-soft · #FFFFFF --bg-card (фоны) либо --ink-invert (текст, иконки, обводки).
   Намеренно НЕ трогали #5A5A66, #9C9CA8, #C07A00: их токены (--ink-4, --muted-2, --warn)
   new-catalog-after.css переопределяет внутри .how/.faq/.adv/.viewed/.seo/.contacts-section
   на другие значения - подстановка var() там сменила бы цвет. Заменено в файле: 39. */
/* 04.09.2026 — главная под четыре каталога (решения Ivan'а, wiki/features/home-4-catalogs-plan-2026-09-03.md).
   Подключается последним из nd-fix-*.css (header.php), поэтому при равной специфичности выигрывает.
   1) .qpb-mode   — переключатель «Корея / Китай» в «Быстром подборе» (qpicks.php);
   2) .h2-tabs    — вкладки ленты машин под фильтром + .h2-lite (карточки с одним фото) (nd-home2-body.php);
   3) .h2-hubs    — ряд хабовых ссылок каталога, паритет с боевой главной (nd-home2-body.php);
   4) .ndh-tabs   — вкладки направления в «Как проходит заказ» (how.php + nd-how.js). */

/* ---------- общий вид вкладок-пилюль (светлый фон) ---------- */
body[class*="new-design"] .nd-dirtabs { display: flex; flex-wrap: wrap; gap: 8px; }
body[class*="new-design"] .nd-dirtab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 1px solid var(--line, #ECECF0); border-radius: 999px;
  background: var(--bg-card, #FFFFFF); color: var(--ink, #0E0E12); text-decoration: none;
  font: 600 13.5px/1 Montserrat, Inter, system-ui, sans-serif; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
body[class*="new-design"] .nd-dirtab img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex: none; }
body[class*="new-design"] .nd-dirtab svg { flex: none; }
body[class*="new-design"] .nd-dirtab:hover { border-color: var(--ink, #0E0E12); }
body[class*="new-design"] .nd-dirtab.is-on { background: var(--ink, #0E0E12); border-color: var(--ink, #0E0E12); color: var(--ink-invert, #FFFFFF); }
body[class*="new-design"] .nd-dirtab:focus-visible { outline: 2px solid var(--accent, #E11D2E); outline-offset: 2px; }
body[class*="new-design"] .nd-dirtab .nd-dirtab-n { font-weight: 500; opacity: .65; }

/* ---------- 1. «Быстрый подбор»: переключатель направления (тёмный блок .qpb) ---------- */
body[class*="new-design"] .qpb-mode {
  display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  margin: 0 0 16px;
}
body[class*="new-design"] .qpb-mode-links { display: flex; flex-wrap: wrap; gap: 8px; }
body[class*="new-design"] .qpb .nd-dirtab { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: var(--ink-invert, #FFFFFF); }
body[class*="new-design"] .qpb .nd-dirtab:hover { border-color: rgba(255,255,255,.6); }
body[class*="new-design"] .qpb .nd-dirtab.is-on { background: var(--bg-card, #FFFFFF); border-color: var(--ink-invert, #FFFFFF); color: var(--ink, #0E0E12); }
body[class*="new-design"] .qpb .nd-dirtab.is-link { font-weight: 500; }
body[class*="new-design"] .qpb-city-wrap { display: contents; }
body[class*="new-design"] .qpb-city-wrap.is-off { display: none !important; }
@media (max-width: 700px) {
  body[class*="new-design"] .qpb-mode { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 12px; }
  body[class*="new-design"] .nd-dirtab { padding: 8px 11px; font-size: 12.5px; }
  body[class*="new-design"] .qpb-mode .nd-dirtabs .nd-dirtab { flex: 1 1 0; justify-content: center; }
}

/* ---------- 2. Лента под фильтром: вкладки направлений ---------- */
body.new-design-home .h2-tabs { margin: 0 0 14px; }
body.new-design-home #h2FreshGrid.is-loading { opacity: .45; pointer-events: none; transition: opacity .15s; }
body.new-design-home .h2-feed-msg { grid-column: 1 / -1; flex: 1 1 100%; padding: 30px; text-align: center; color: var(--muted, #6E6E76); }
body.new-design-home .h2-feed-msg a { color: var(--accent, #E11D2E); }
/* одно фото на карточку в лентах Китая и наличия: листалка и точки не нужны */
body.new-design-home .h2-lite .c-zones,
body.new-design-home .h2-lite .c-dots,
body.new-design-home .h2-lite .c-photo:not(.p-0) { display: none !important; }
body.new-design-home .h2-lite .c-photo.p-0 { opacity: 1 !important; }

/* ---------- Разделы каталога Кореи: строка на виду + свёрнутый указатель (04.09.2026) ----------
   Переделка ковра из 40 пилюль. Пилюля взята каноном ряда «Быстро:» (.chip в new-catalog.css),
   чтобы на странице не появлялось нового типоразмера. Всё под body.new-design-home. */

body.new-design-home .h2hub {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line, #ECECF0);
}
body.new-design-home .h2hub-lbl {
  font: 600 12px/1.4 Montserrat, Inter, system-ui, sans-serif;
  color: var(--muted, #6E6E76); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}

/* --- строка входов --- */
body.new-design-home .h2hub-pins { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.new-design-home .h2hub-pins > a {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 8px 13px; border: 1px solid var(--line, #ECECF0); border-radius: 999px;
  font: 500 13.5px/1 Montserrat, Inter, system-ui, sans-serif; color: var(--ink, #0E0E12);
  text-decoration: none; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
body.new-design-home .h2hub-pins > a:hover { border-color: var(--ink, #0E0E12); background: var(--bg, #F7F7F9); }
body.new-design-home .h2hub-pins > a i { font-style: normal; font-size: 12px; color: #8A8A94; }
body.new-design-home .h2hub-pins > a:hover i { color: var(--muted, #6E6E76); }

/* --- свёрнутый указатель --- */
body.new-design-home .h2hub-more { margin-top: 12px; }
body.new-design-home .h2hub-more > summary {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 10px 2px;              /* 44px — палец попадает с первого раза */
  font: 500 13.5px/1.3 Montserrat, Inter, system-ui, sans-serif; color: var(--ink, #0E0E12);
  cursor: pointer; list-style: none; user-select: none;
}
body.new-design-home .h2hub-more > summary::-webkit-details-marker { display: none; }
body.new-design-home .h2hub-more > summary:hover { color: var(--accent, #E11D2E); }
body.new-design-home .h2hub-more > summary:focus-visible { outline: 2px solid var(--accent, #E11D2E); outline-offset: 3px; border-radius: 6px; }
body.new-design-home .h2hub-more > summary i { font-style: normal; color: var(--muted, #6E6E76); font-weight: 400; }
body.new-design-home .h2hub-more .h2hub-n {
  font: 600 12px/1 Montserrat, Inter, system-ui, sans-serif; color: var(--muted, #6E6E76);
  background: var(--line-2, #F0F0F3); border-radius: 999px; padding: 5px 9px;
}
body.new-design-home .h2hub-more > summary svg { color: var(--muted, #6E6E76); transition: transform .2s; }
body.new-design-home .h2hub-more[open] > summary svg { transform: rotate(180deg); }

body.new-design-home .h2hub-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 28px; padding: 6px 0 4px;
}
body.new-design-home .h2hub-ct {
  font: 600 12px/1.4 Montserrat, Inter, system-ui, sans-serif; color: var(--muted, #6E6E76);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
body.new-design-home .h2hub-list { display: flex; flex-direction: column; }
body.new-design-home .h2hub-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--line-2, #F0F0F3);
  font: 400 13.5px/1.35 Montserrat, Inter, system-ui, sans-serif; color: var(--ink, #0E0E12); text-decoration: none;
}
body.new-design-home .h2hub-list a:last-child { border-bottom: 0; }
body.new-design-home .h2hub-list a:hover { color: var(--accent, #E11D2E); }
body.new-design-home .h2hub-list a i { font-style: normal; font-size: 12px; color: #8A8A94; white-space: nowrap; }

/* --- подборки --- */
body.new-design-home .h2hub-colls { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-2, #F0F0F3); }
body.new-design-home .h2hub-colls-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
body.new-design-home .h2hub-colls-all {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 13px/1 Montserrat, Inter, system-ui, sans-serif; color: var(--ink, #0E0E12); text-decoration: none; white-space: nowrap;
}
body.new-design-home .h2hub-colls-all:hover { color: var(--accent, #E11D2E); }
body.new-design-home .h2hub-colls-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
body.new-design-home .h2hub-coll {
  display: block; padding: 12px 14px; border: 1px solid var(--line, #ECECF0); border-radius: 12px;
  font: 500 13.5px/1.4 Montserrat, Inter, system-ui, sans-serif; color: var(--ink, #0E0E12); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: border-color .15s, background .15s;
}
body.new-design-home .h2hub-coll:hover { border-color: var(--ink, #0E0E12); background: var(--bg, #F7F7F9); }

@media (max-width: 900px) {
  body.new-design-home .h2hub-cols { grid-template-columns: 1fr 1fr; gap: 6px 20px; }
  body.new-design-home .h2hub-colls-row { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  body.new-design-home .h2hub { margin-top: 20px; padding-top: 16px; }
  /* На телефоне входы переносятся, а не уезжают за край: горизонтальных лент на этой
     странице и так четыре, а краевые стрелки .nd-rail-btn на телефоне скрыты по дизайну
     (new-catalog.css:11181) — значит скрытую часть ленты было бы нечем показать.
     Подпись уходит на свою строку, шесть коротких пилюль ложатся в две-три. */
  body.new-design-home .h2hub-pins { flex-wrap: wrap; gap: 7px; }
  body.new-design-home .h2hub-pins .h2hub-lbl { flex: 0 0 100%; margin-bottom: 1px; }
  body.new-design-home .h2hub-pins > a { padding: 9px 12px; font-size: 13px; }
  body.new-design-home .h2hub-more > summary { font-size: 14px; }
  body.new-design-home .h2hub-more > summary i { display: none; }   /* «— годы, бюджеты, кузова» не влезает */
  body.new-design-home .h2hub-cols { grid-template-columns: 1fr; gap: 2px; }
  body.new-design-home .h2hub-col + .h2hub-col { margin-top: 14px; }
  body.new-design-home .h2hub-list a { min-height: 44px; align-items: center; padding: 10px 0; }
  body.new-design-home .h2hub-colls-head { flex-wrap: wrap; gap: 6px; }
}

/* ---------- 4. «Как проходит заказ»: вкладки направления ---------- */
body[class*="new-design"] .ndh-tabs { margin: 18px 0 0; }
body[class*="new-design"] .ndh-tabs .nd-dirtab { padding: 10px 16px; font-size: 14px; }
body[class*="new-design"] .ndh-line.is-swapping { opacity: .5; }
body[class*="new-design"] .ndh-time:empty { display: none; }
@media (max-width: 700px) {
  body[class*="new-design"] .ndh-tabs { margin-top: 14px; }
  body[class*="new-design"] .ndh-tabs .nd-dirtab { padding: 8px 11px; font-size: 12.5px; }
}


/* ---- nd-fix-f.css ---- */
/* 04.09.2026 - п.30 списка Никиты «токены почти не используются, 3359 хардкодов цвета».
   Точные совпадения канона заменены на var(--токен, #значение); фолбэк оставлен намеренно -
   если переменная потеряется, цвет останется прежним. Соответствие:
   #0E0E12 --ink · #1E1E24 --ink-2 · #3D3D48 --ink-3 · #6E6E76 --muted · #ECECF0 --line ·
   #F0F0F3 --line-2 · #F7F7F9 --bg · #E11D2E --accent · #B8152B --accent-2 · #1E8C4A --success ·
   #FAEDD1 --warn-soft · #FFFFFF --bg-card (фоны) либо --ink-invert (текст, иконки, обводки).
   Намеренно НЕ трогали #5A5A66, #9C9CA8, #C07A00: их токены (--ink-4, --muted-2, --warn)
   new-catalog-after.css переопределяет внутри .how/.faq/.adv/.viewed/.seo/.contacts-section
   на другие значения - подстановка var() там сменила бы цвет. Заменено в файле: 2. */
/* nd-fix-f.css — правки главной по разбору Никиты, 04.09.2026 (пп. 4, 10, 11в, 40).
   Файл подключается из header.php последним, поэтому при равной специфичности выигрывает.
   Все селекторы ограничены главной (body.new-design-home) либо блоками, которые живут
   только на главной и на первой новой главной (обе — new-design-home). */


/* ============================================================
   П.4 — «Готовые подборки выглядят не как готовые».
   Было: шесть ссылок .qp-pill шли строкой (display:flex; flex-wrap) и занимали ширину
   по тексту — правый край рваный (замер 04.09 на 1440: ряд обрывался на 1233px из 1424),
   и читались они как теги, а не как готовые подборки.
   Никита: «сделать пресетами-квадратами… плитки одного размера: иконка, название,
   счётчик авто, ровная сетка».
   Стало: ровная сетка одинаковых плиток — 6 в ряд от 1200px и 3x2 на планшете.
   Иконка сверху, название, счётчик прижат к низу плитки (margin-top:auto; высоту строки
   выравнивает сам grid). Разметку в qpicks.php не трогали: иконка, название и счётчик
   там уже есть. Телефон (<=640px) остаётся как был — сетка 2x3 из new-catalog.css.
   ============================================================ */
@media (min-width: 641px) {
  body[class*="new-design"] .qp-pills,
  body.nd-hybrid .qp-pills {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  body[class*="new-design"] .qp-pill,
  body.nd-hybrid .qp-pill {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    width: auto;
    box-sizing: border-box;
    padding: 16px 16px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.25;
    text-align: left;
  }
  body[class*="new-design"] .qp-pill i,
  body.nd-hybrid .qp-pill i { width: 34px; height: 34px; border-radius: 10px; }
  body[class*="new-design"] .qp-pill i svg,
  body.nd-hybrid .qp-pill i svg { width: 17px; height: 17px; }
  /* счётчик — всегда у нижнего края плитки, независимо от длины названия */
  body[class*="new-design"] .qp-pill span,
  body.nd-hybrid .qp-pill span { margin-top: auto; font-size: 13px; }
  /* Никита просил в плитке «счётчик авто» — на широком экране место есть, подписываем
     единицу измерения: голое число под названием читалось как цена. На телефоне
     (сетка 2x3, плитка ~165px) слово не влезает, поэтому только от 641px. */
  body[class*="new-design"] .qp-pill span::after,
  body.nd-hybrid .qp-pill span::after { content: "\00A0\0430\0432\0442\043E"; }
}
@media (min-width: 1200px) {
  body[class*="new-design"] .qp-pills,
  body.nd-hybrid .qp-pills { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}


/* ============================================================
   П.10 — «Объединить „Подписаться на нас“ и блок видео».
   Было: две секции подряд с двумя заголовками — section.vblog («Видеоблог EncarRus»)
   и section.h2b-social («Подписаться на нас» + подзаголовок).
   Стало: соцсети — хвост секции видеоблога (div.h2bs-tail, см. nd-home2-body.php).
   Здесь снимаем нижнее поле у видеоблога, чтобы между роликами и значками не было
   разрыва в две секции, и отделяем строку значков тонкой линией по ширине контента.
   Селектор :has(+ .h2bs-tail) — чтобы правило действовало только там, где хвост реально
   стоит следом; в браузерах без :has() блок просто останется с прежним отступом.
   ============================================================ */
body.new-design-home main.content > section.vblog:has(+ .h2bs-tail) { padding-bottom: 0; }

/* Отступ сверху задан padding'ом самой обёртки, а не margin'ом подписи: у margin'а
   верхнего элемента нет барьера, он схлопывался наружу и оставлял между видеоблоком
   и соцсетями 34px фона страницы — ровно тот шов, который правило и убирает. */
body.new-design-home .h2bs-tail { background: var(--bg-card, #FFFFFF); padding: 30px 0 70px; }
body.new-design-home .h2bs-cap {
  margin: 0 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line, #ECECF0);
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted, #6E6E76);
}
body.new-design-home .h2bs-cap b { color: var(--ink, #0E0E12); font-weight: 800; }

@media (max-width: 700px) {
  body.new-design-home .h2bs-tail { padding: 22px 0 34px; }
  body.new-design-home .h2bs-cap { margin: 0 0 12px; padding-top: 16px; font-size: 13.5px; }
}


/* ============================================================
   П.11в — «Ещё больше отзывов → просто два значка».
   Было: под отзывами строка-подпись «Ещё больше реальных отзывов — в наших каналах:
   Telegram и MAX» (.h2b-rv-tg).
   Стало: два значка с теми же адресами каналов (.h2b-rv-mes). Оформление повторяет строку
   мессенджеров в блоке «Как проходит заказ» (.ndh-mes-row из new-catalog.css), чтобы
   значки на странице выглядели одинаково.
   ============================================================ */
body.new-design-home .h2b-rv-mes { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.new-design-home .h2b-rv-mes a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid var(--line, #ECECF0);
  border-radius: 10px;
  background: var(--bg-card, #FFFFFF);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #0E0E12);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
body.new-design-home .h2b-rv-mes a:hover { border-color: var(--ink-3, #3D3D48); transform: translateY(-1px); }
body.new-design-home .h2b-rv-mes a img { flex: none; }


/* ============================================================
   П.40 — «На телефоне другой заголовок: две копии текста в H1».
   Разметка H1 приведена к одному тексту (nd-home2-body.php), спаны .h1-pc-only /
   .h1-mob-only убраны совсем. Здесь остаётся единственное отличие телефона — длинное
   тире: на узком экране хвост «привозим с доставкой в <город>» уходит на свою строку
   (правило #h2CityTail{display:block} в new-catalog.css), и тире висело в конце
   предыдущей строки. Прячем его — это знак препинания, а не второй заголовок.
   Решение про тире принято Ivan'ом 24.08.2026 («в моб версии … длинное тире убрал бы»).
   ============================================================ */
@media (max-width: 700px) {
  body[class*="new-design"] h1.hero-h1 .h1-dash { display: none; }
}

/* Заодно: на планшете (701-899px) красная плашка рвалась на два прямоугольника —
   замер 04.09 на 860px показал у неё два клиентских прямоугольника. Правило
   white-space:nowrap для плашки в new-catalog.css начинается только с 900px, а ниже
   700px плашка и так блок. Закрываем промежуток теми же свойствами. Проверено на
   701, 768 и 860 — плашка одна и в поля укладывается. */
@media (min-width: 701px) and (max-width: 899px) {
  body[class*="new-design"] h1.hero-h1 em {
    white-space: nowrap;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}


/* ---- nd-fix-g.css ---- */
/* 04.09.2026 - п.30 списка Никиты «токены почти не используются, 3359 хардкодов цвета».
   Точные совпадения канона заменены на var(--токен, #значение); фолбэк оставлен намеренно -
   если переменная потеряется, цвет останется прежним. Соответствие:
   #0E0E12 --ink · #1E1E24 --ink-2 · #3D3D48 --ink-3 · #6E6E76 --muted · #ECECF0 --line ·
   #F0F0F3 --line-2 · #F7F7F9 --bg · #E11D2E --accent · #B8152B --accent-2 · #1E8C4A --success ·
   #FAEDD1 --warn-soft · #FFFFFF --bg-card (фоны) либо --ink-invert (текст, иконки, обводки).
   Намеренно НЕ трогали #5A5A66, #9C9CA8, #C07A00: их токены (--ink-4, --muted-2, --warn)
   new-catalog-after.css переопределяет внутри .how/.faq/.adv/.viewed/.seo/.contacts-section
   на другие значения - подстановка var() там сменила бы цвет. Заменено в файле: 15. */
/* nd-fix-g.css — правки по разбору Никиты, 04.09.2026.
   Пункты: п.20 (нестилизованные эмодзи) и п.24/31 (в макете появился второй красный).
   Канон красного — #E11D2E (--accent в new-tokens.css), тёмный оттенок наведения — #B8152B (--accent-2).
   Здесь лежит только то, что нельзя привести к канону в исходнике: статические .css,
   общие с боевым сайтом (гейт по хосту в них невозможен), и инлайновые <style> чужих файлов.
   Селектор с body добавлен намеренно: он поднимает специфичность на единицу и потому
   перебивает инлайновые <style> в теле страницы, которые идут ПОСЛЕ этого файла. */

/* 1. SEO-блок под каталогом марки/модели Korea (/korea/<марка>/<модель>/).
      Метка «Видеообзор» и подобные объявлены цветом #e11d2e в 27 файлах
      /korea/inc/ru/catalog_*.php — это инлайновый <style>, общий с боевым сайтом. */
body .encv__label { color: var(--accent, #E11D2E); }

/* 2. Кружок «play» на превью видео в листинге каталога.
      В includes/new-catalog-body.php он залит чистым rgba(255,0,0,.92) —
      это самый заметный «второй красный» на странице каталога. */
body .nd-video-play { background: rgba(225,29,46,.92); }

/* 3. Виджет отзывов /include/reviews-widget.css — статический файл, общий с боевым
      сайтом, гейт по хосту в нём невозможен, поэтому канон подставляем отсюда.
      Было: #e11d2e (основной), #c40d26 (наведение), rgba(230,15,45,.25) (тень). */
body .rv-tab--active { color: var(--accent, #E11D2E); border-bottom-color: var(--accent, #E11D2E); }
body .rv-tab--active .rv-tab__count { color: var(--accent, #E11D2E); }
body .rv-card__more { color: var(--accent, #E11D2E); }
body .rv-card__more:hover { color: var(--accent-2, #B8152B); }
body .rv-show-more { border-color: var(--accent, #E11D2E); color: var(--accent, #E11D2E); }
body .rv-show-more:hover { background: var(--accent, #E11D2E); color: var(--ink-invert, #FFFFFF); box-shadow: 0 .8rem 2.4rem rgba(225,29,46,.25); }
body .rv-footer__link { background: var(--accent, #E11D2E); }
body .rv-footer__link:hover { background: var(--accent-2, #B8152B); box-shadow: 0 .8rem 2.4rem rgba(225,29,46,.25); }

/* 4. Остатки «второго красного» в чужих файлах шаблона стенда (new-catalog.css, new-home.css) —
      править их нельзя (там сейчас работают другие агенты), поэтому канон подставляем отсюда.
      Кнопка пустой выдачи каталога была #E1121C с наведением #C50E17,
      наведение кнопки AI-поиска — #b8152b вместо тёмного акцента #B8152B. */
body.new-design-catalog .nd-empty-cta .nec-btn-pri { background: var(--accent, #E11D2E) !important; }
body.new-design-catalog .nd-empty-cta .nec-btn-pri:hover { background: var(--accent-2, #B8152B) !important; }
body.new-design-catalog .search-bar .s-ai:hover,
body.new-design-home .search-bar .s-ai:hover { background: var(--accent-2, #B8152B) !important; }

/* Намеренно НЕ трогаем:
   — цвета флагов стран в SVG (#C8313E Беларусь, #cd2e3a Корея, #DE2910 Китай);
   — точки «Красный» в фильтре цвета кузова и салона (#D6342C, #c22a2a) — это цвет краски;
   — фирменные цвета соцсетей в наведении (#FF0000 YouTube, #E04040 Drive2);
   — сигнальную пару «дороже/дешевле рынка» и «состояние кузова» в карточке
     (#d32f2f, #922b21, #c0392b) — она работает в паре с зелёным #2e7d32 и несёт смысл. */


/* ---- nd-fix-h.css ---- */
/* ============================================================
   nd-fix-h.css — правки по разбору Никиты, 04.09.2026.
   Пункты 33 (типографика: мелкие размеры и шкала радиусов) и 27 (шрифт карточек).
   Файл подключается из header.php последним, поэтому при равной
   специфичности выигрывает; исходные CSS не тронуты.
   ============================================================ */

/* ============================================================
   П.27 — «на карточках авто местами другой шрифт».
   Замер на стенде (headless Chrome, CDP CSS.getPlatformFontsForNode,
   /korea/ 390px): у .c-name / .c-label / .c-btn-sec / .c-btn-pri / .c-ai
   вычисленный font-weight = 700, а рисовались они гарнитурой
   «Montserrat ExtraBold» — то есть 800. Причина: в списке
   document.fonts на странице есть только Montserrat 800 / 600 / 500 / 400,
   начертания 700 нет вообще. В fonts/Montserrat/stylesheet.css правило
   @font-face для Montserrat-Bold стоит сразу после последовательности
   незакрытых и лишних комментариев (закрывающая пара стоит вплотную
   к следующему правилу), и парсер его
   отбрасывает — файлы при этом на месте и отдаются 200.
   Объявляем недостающее начертание здесь: 700 начинает рисоваться
   настоящим Bold, а не ExtraBold, и вес перестаёт «плавать» по карточке.
   ============================================================ */
@font-face {
  font-family: 'Montserrat';
  src: url('/local/templates/encarrus_by_staging/css/pages/../../fonts/Montserrat/Montserrat-Bold.woff2') format('woff2'),
       url('/local/templates/encarrus_by_staging/css/pages/../../fonts/Montserrat/Montserrat-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* П.27, вторая часть: внутри карточки не должно быть чужого семейства.
   В исходных стилях моноширинный JetBrains Mono назначен двум потомкам
   .card — .c-img-ph (заглушка вместо фото, new-catalog.css:1428) и
   .c-photo-tag (подпись кадра, new-catalog.css:3029). Сейчас оба
   не видны (у заглушки нет текста, подпись скрыта правилом
   new-catalog.css:3367), но при любом возврате их в вёрстку карточка
   получала бы вторую гарнитуру. Приводим всё содержимое карточки
   к одному семейству. */
body[class*="new-design"] .card,
body[class*="new-design"] .card *,
body[class*="new-design"] .card *::before,
body[class*="new-design"] .card *::after {
  font-family: 'Montserrat', system-ui, sans-serif;
}

/* ============================================================
   П.33 (а) — ни одного размера текста мельче 11.5px.
   В подключаемых CSS оставалось четыре объявления font-size: 12px
   (new-catalog.css:4557, new-product.css:213 и :539, new-home.css:1232).
   Плюс замер на живом стенде показал, что на ДЕСКТОПЕ карточки
   подписи блока статистики цен считаются из легаси-rem при корне
   6.75px и дают 9.45-9.79px — прежние правки поднимали их только
   в медиазапросах до 700-760px.
   ============================================================ */

/* 1) карточка товара: подпись под кольцом оценки (было 9px) */
body[class*="new-design"] .pdc-score-val .m { font-size: 12px; letter-spacing: .08em; }

/* 2) карточка товара: подпись на миниатюре галереи (было 9px) */
body[class*="new-design"] .gal-thumb .tn-lbl { font-size: 12px; letter-spacing: .02em; }

/* 3) главная: зелёная точка в плашке сезонности рисовалась глифом «●»
      размером 9px. Меняем глиф на нарисованный кружок — размер шрифта
      из шкалы уходит вовсе, вид не меняется. */
body[class*="new-design"] .sb-axis-badge::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #22c55e;
  font-size: inherit;
}

/* 4) плашка типа представительства в карточке офиса (было 9px на 1151-1240px).
      .ct-city — flex с flex-wrap: wrap, поэтому подросшая плашка при нехватке
      места переносится на вторую строку, а не ломает заголовок. */
body[class*="new-design"] .ct-office .ct-tag { font-size: 12px; padding: 2px 6px; }

/* 5) статистика цен в карточке товара: на десктопе оставались 9.45 и 9.79px */
body[class*="new-design"] .psm-stat-label { font-size: 12px; }
body[class*="new-design"] .psm-up,
body[class*="new-design"] .psm-down,
body[class*="new-design"] .psm-badge { font-size: 12px; }

/* ============================================================
   П.33 (б) — шкала радиусов 4 / 8 / 12 / 999px.
   Замер на стенде: /korea/ 390px — 16 разных значений border-radius,
   главная 1440px — 19, карточка товара 1440px — 16.
   Сначала переопределяем токены (их читают ~65 правил), затем
   точечно сводим оставшиеся значения. Круглое не трогаем:
   50% и 999px оставлены как есть, 100px переведён в 999px.
   Про !important: в header.php new-home.css / new-product.css /
   new-catalog-after.css / nd-catblock-*.css подключаются ПОСЛЕ nd-fix-*,
   поэтому без !important половина правил проигрывала по порядку.
   Если следующий агент будет менять радиус этих же блоков — правку
   тоже придётся делать с !important либо выше по специфичности.
   ============================================================ */
:root {
  --radius: 8px;        /* было 10px  */
  --radius-md: 12px;    /* было 14px  */
  --radius-lg: 12px;    /* было 20px  */
  --radius-pill: 999px; /* без изменений */
}

/* --- 4px: мелкие метки, чекбоксы, миниатюры (было 5-7px) --- */
.tb-soc,
.lm-pages .pg-n,
.vc-ago,
.ft-pay, .ft-app,
.bp-item .bp-mark,
.gt-view .vt,
.hc-consent input[type="checkbox"],
.ct-consent input[type="checkbox"],
.ct-mes-ico--txt,
.nd-models-loading .nd-ml-txt b, .nd-models-loading .nd-ml-txt i,
body[class*="new-design"] .ndh-lab,
body.new-design-home .h2-guar-tag,
body[class*="new-design"] .qp-pill i,
.pd-mini-thumb,
.pdk-seg button,
.pd-stats-tab,
.pd-aph-ph,
.u-ic,
.hs-logo,
.hf-tab,
.hf-chk-b,
.bg-tag,
.qp-cnt,
.how-tag,
.hit-badge,
.hit-photoc,
.sv-save-p,
.rvh-tag,
.is-avail,
body.new-design-home .h2hub-more > summary:focus-visible { border-radius: 4px !important; }

/* --- 8px: кнопки, поля, селекты, пагинация, чипы-квадраты (было 9-11.2px) --- */
.search-bar .ai-btn,
.filters-toggle,
.field .ctrl,
.field select, .field input,
.field.range .ctrl,
.show-cta,
.body-type,
.main-nav a,
.fpanel .field .ctrl-search input[type="text"],
.fpanel .field .ctrl-year input[type="text"],
body.new-design-catalog .fhead .freset,
body.new-design-catalog .fhead .sort select,
.phone,
.cta-head,
.hd-soc,
.s-voice,
.freset,
.sort select,
.viewtog,
.ctrl,
.freset-2,
.c-btn-sec,
.c-btn-pri,
.pg,
.pg-n,
.hc-ctrl,
.hc-submit,
.hc-mes,
.faq-all,
.ft-mes,
.burger,
.mnav-head-cta,
.mnav-close,
.mnav-nav a,
.mnav-soc,
.s-ai,
.m-sticky .m-search,
.m-sticky .m-cta,
.city-pop .cp-found .cp-empty,
.cp-search input,
.rv-row,
.ph-act,
.ct-mes,
.ct-form input, .ct-form textarea,
.ct-submit,
.ft-trust-item,
.bp-search,
.bp-item,
.gt-view,
.faq-all, .faq-chat,
.sd-showall,
.sd-convo-brand,
.sd-convo-primary,
.sd-convo-secondary,
body[class*="new-design"] .ndf-trust,
body[class*="new-design"] .ndf-alt-b,
.topbar .tb-socials .tb-soc,
body[class*="new-design"] .hc-submit,
body.new-design-catalog .faq-cta-row .faq-all,
body.new-design-catalog .hc-foot .hc-submit,
body.new-design-catalog .ct-submit,
.fav-clear,
.fav-empty-cta,
body[class*="new-design"] .section__pagination .meili-pager .mp-dots,
body[class*="new-design"] .section__pagination .meili-pager .mp-jump-go,
body[class*="new-design"] .mnav-foot .mnav-phone,
body[class*="new-design"] .mnav-socials .mnav-soc,
body.new-design-catalog #models-view .mv-photo,
body.new-design-catalog.nd-view-list #ajax-load-list .card .c-img,
.nd-models-loading .nd-ml-ph,
.nd-mini-sort,
.nd-mh-cta,
.nd-mh-ic,
.nd-mhdr .nd-mh-burger,
body[class*="new-design"] .how-n,
body[class*="new-design"] .ndh-tr,
body[class*="new-design"] .ndh-get,
body.new-design-home .h2b-soc,
body.new-design-home .h2b-map-link,
.ndqm .ndqm-x,
.ndqm .ndqm-err,
body[class*="new-design"] .h2b-rv-src,
body[class*="new-design"] .ndh-form input[type="text"],
body[class*="new-design"] .ndh-mes-row a,
.po-cta .btn,
.pdc-legend,
.pdc-view-sw,
body.new-design-product .psm-periods button.psm-per-btn,
.pds-card,
.pd-mgr-submit,
.pd-aph-card,
.pd-ins-grid,
.msp-item,
.poc-c-summary,
body.new-design-product .pd-sold-badge,
body[class*="new-design"] .pd-mgr-submit,
body[class*="new-design"] .po-trust-badge,
body.new-design-product .pd-aph-photo,
body.new-design-product .po-video-ic,
body.new-design-product .po-video-form input,
body[class*="new-design"] .po-video-submit,
.po-price-alt,
.po-price-alt .pa-tip,
body[class*="new-design"] .pdhow-video,
body[class*="new-design"] .pdhow-faq,
body[class*="new-design"] button.pdc-score-a,
body.new-design-product .faq-cta-row .faq-all,
body[class*="new-design"] .pd-thumbs.pd-thumbs-3 .pd-thumb,
body[class*="new-design"] .pd-eq-search,
body[class*="new-design"] .nd-hint-pop,
body[class*="new-design"] button.pd-eq-more,
.hf-tabs,
.hf-sel,
.hf-range-in,
.hf-extra,
a.lb-item,
.rm-foot-link,
.how-n,
.how-cta-btn,
.sv-btn,
.rvh-foot-btn,
.faq-ask,
.instock-more-btn,
.h2b-photo-name,
.h2b-rv-src,
.h2b-faq-ask,
body.new-design-home .fhead .freset,
body[class*="new-design"] .ndti-x { border-radius: 8px !important; }

/* --- 12px: карточки, панели, поповеры, медиа-блоки (было 13-24px) --- */
.tweaks,
body[data-variant="b"] .search-bar,
.body-types,
body.new-design-product .pd-gallery .pd-main-photo,
body.new-design-product .pd-order,
body.new-design-product .pd-desc,
body.new-design-home .nh-cat,
body.new-design-home .nh-perk,
.search-bar,
.search-dropdown,
.sd-result-row,
.applied-filters,
.helper-card,
.city-pop, .rv-pop, .ph-pop,
.brands-pop,
body.new-design-catalog #models-view .mv-item,
.nd-models-loading .nd-ml-row,
body.new-design-catalog .nd-empty-fix-btn,
body.new-design-catalog .nd-empty-cta,
body[class*="new-design"] .ndh-aside,
body[class*="new-design"] .ndh-media,
body[class*="new-design"] .ndh-q,
body[class*="new-design"] .ndh-fi,
body.new-design-home .h2-guar-c,
body.new-design-home .h2-guar-up,
body.new-design-home .h2-guar-up-r,
body.new-design-home .h2b-map,
.ndqm .ndqm-ok,
body.new-design-home .h2b-ct-chip,
body.new-design-home .h2b-off-card,
body.new-design-home .h2bs-ic,
body[class*="new-design"] .ndh-video,
body[class*="new-design"] .ndh-embed,
body[class*="new-design"] .ndh-docreq,
body[class*="new-design"] .ndh-form,
body[class*="new-design"] .ndh-media[data-media="form"] .ndh-form,
.pd-main-photo,
.pd-order,
.pdc-score,
.pdk-compare,
.pd-mgr,
.pd-aph,
.pd-ins,
.m-share-pop,
.pd-similar-grid .card,
body.new-design-product .pd-seo-card,
body.new-design-product .pd-video-section .review,
body.new-design-product .faq-right .faq,
body.new-design-product .po-cond,
.pdhow-sheet,
body.new-design-product .pd-incl,
.pd-mgr-left,
.pd-mgr-right,
.hero-form,
.rm-svg,
.rm-foot,
.rm-mini,
.bg-card,
.qp-card,
.how-item,
.how-cta,
.season-bars,
.si-card,
.hit-card,
.sv-card,
.vb-card,
.rvh-card,
.sbs-card,
.st-item,
.off-card,
.h2-strip-skel,
.h2-chip,
.h2-bene-card,
.h2b-photo,
.h2b-col-card,
.h2b-ct-chip,
.h2b-off-card,
body.new-design-home .h2-promo-card,
body.new-design-home .h2-tile,
body.new-design-home .h2-promo2-track .h2-tile,
body[class*="new-design"] .ndti-sheet { border-radius: 12px !important; }

/* --- 999px: то, что задумано «таблеткой» (было 100px) --- */
.sd-convo-chip,
body.new-design-catalog #models-view .mv-gen,
.m-chip,
.m-share button,
.gal-counter,
.gal-fs,
.po-status,
.pdl,
.pd-eq-tabs button.pd-eq-tab,
.pd-ins-badge,
.pd-meta button.m-share-btn,
.pd-ins-flag { border-radius: 999px !important; }

/* --- точечно: формы, где радиус задан несколькими значениями --- */
body[class*="new-design"] #colorbox,
body[class*="new-design"] #cboxLoadedContent { border-radius: 12px 12px 0 0; }
.ndqm .ndqm-win { border-radius: 12px !important; }
.msp-copy { border-radius: 0 0 8px 8px; }
.sb-bar { border-radius: 4px 4px 0 0; }

/* --- точечно: элементы, которым по форме нужна «таблетка», а стояли 2-3px --- */
body[class*="new-design"] .c-dot,
body[class*="new-design"] .c-dot.on { border-radius: 999px !important; }
body[class*="new-design"] .bt-mark { border-radius: 999px !important; }

/* --- второй проход: то, что пришло из файлов, подключаемых ПОСЛЕ nd-fix-*,
       и из легаси-rem (корень 6.75px даёт 5.4px / 3.375px / 14.85px) --- */
body[class*="new-design"] .ndcc-tile,
body[class*="new-design"] .qp-pill,
body[class*="new-design"] .h2b-photo,
body[class*="new-design"] .vb-card,
body[class*="new-design"] .review,
body[class*="new-design"] .review__video,
body[class*="new-design"] .nd-explain,
body[class*="new-design"] .nd-video-frame,
body[class*="new-design"] .modal-content { border-radius: 12px !important; }

body[class*="new-design"] .meili-loadmore,
body[class*="new-design"] .mp-item,
body[class*="new-design"] .mp-jump-input,
body[class*="new-design"] .mp-jump-go,
body[class*="new-design"] .psm-badge,
body[class*="new-design"] .pd-thumb,
body[class*="new-design"] .hc-ctrl,
body[class*="new-design"] select { border-radius: 8px !important; }

body[class*="new-design"] .copy-notificate { border-radius: 4px !important; }

/* --- третий проход: в new-home.css / new-product.css те же селекторы объявлены
       с !important и подключаются позже, поэтому здесь берём на один элемент
       выше по специфичности (префикс html) --- */
html body.new-design-home .fhead .freset,
html body.new-design-catalog .fhead .freset,
html body[class*="new-design"] .psm-periods button.psm-per-btn,
html body[class*="new-design"] .mp-item,
html body[class*="new-design"] .mp-jump-input,
html body[class*="new-design"] .mp-jump-go,
html body[class*="new-design"] .modal-content .search-form input,
html body[class*="new-design"] .modal-content .search-form button { border-radius: 8px !important; }

html body[class*="new-design"] button.m-share-btn,
html body[class*="new-design"] .m-chip,
html body[class*="new-design"] button.pd-eq-tab { border-radius: 999px !important; }

/* --- четвёртый проход: пагинатор каталога стилизован инлайновым <style> из
       шаблона компонента (catalog_v2/section_vertical.php) с !important и
       тремя классами в селекторе — добираем специфичность.
       Плюс иконки мессенджеров в подвале блока отзывов на главной. --- */
html body[class*="new-design"] .section__pagination .meili-pager .mp-item,
html body[class*="new-design"] .section__pagination .meili-pager .mp-current,
html body[class*="new-design"] .section__pagination .meili-pager .mp-jump-input,
html body[class*="new-design"] .section__pagination .meili-pager .mp-jump-go,
html body[class*="new-design"] .h2b-rv-foot .h2b-rv-mes a { border-radius: 8px !important; }

/* ============================================================
   П.33 (а), продолжение: тексты, размер которых унаследован от легаси-rem.
   У шаблона корневой font-size привязан к ширине окна и гуляет:
   замер на /korea/ — 14px (390), 5.997px (1024), 7.028px (1200),
   6.75px (1440), 9px (1920). Всё, что задано в rem, вместе с ним
   скачет: подпись под названием в карточке (.c-trim) и цена в вонах
   (.c-price-krw) наследуют размер от .card и на 1024px падали
   до 9.6px, а на 1920px раздувались до 18px.
   Фиксируем в пикселях — размер перестаёт зависеть от ширины окна.
   ============================================================ */
body[class*="new-design"] .card { font-size: 13.5px; }
body[class*="new-design"] .meili-loadmore { font-size: 13.5px; }
body[class*="new-design"] .mp-jump-label,
body[class*="new-design"] .mp-jump-total { font-size: 12px; }
body[class*="new-design"] .max-bar__text,
body[class*="new-design"] .max-bar__cta { font-size: 12px; }
body[class*="new-design"] .copy-notificate { font-size: 12px; }

/* Пагинатор каталога — тот же инлайновый <style> из шаблона компонента:
   размеры заданы в rem с !important, поэтому на 1024px номера страниц
   опускались до 8.99-10.79px. Добираем специфичность и фиксируем в px. */
html body[class*="new-design"] .section__pagination .meili-pager .mp-item,
html body[class*="new-design"] .section__pagination .meili-pager .mp-current,
html body[class*="new-design"] .section__pagination .meili-pager .mp-jump-input { font-size: 13px !important; }
/* 07.09.2026 (аудит, п. 17): цвет подписей «Стр.» и «из 4350» был #999 — контраст
   к белому 2,85:1 при норме 4,5:1. Ставим тот же серый, что у всех второстепенных
   подписей нового дизайна (#6E6E76, контраст 5,05:1). Правило дублирует правку
   в инлайновом <style> шаблона компонента (catalog_v2/section_vertical.php:272):
   разметка компонента кэшируется Битриксом, а CSS-файл приезжает свежим всегда. */
html body[class*="new-design"] .section__pagination .meili-pager .mp-jump-label,
html body[class*="new-design"] .section__pagination .meili-pager .mp-jump-total { font-size: 12px !important; color: #6E6E76 !important; }
html body[class*="new-design"] .section .meili-loadmore,
html body[class*="new-design"] .section__pagination .meili-loadmore,
html body[class*="new-design"] a.meili-loadmore { font-size: 13.5px !important; }
html body[class*="new-design"] .section__pagination .meili-pager .mp-arrow { border-radius: 8px !important; }

/* Добор по замеру 04.09: плитки каталогов на главной (подпись типа и подпись
   под счётчиком были 10.5px) и блок отзывов (фильтры по источникам и буква
   в аватаре заданы в rem — на 1024px давали 9.6 и 10.79px). */
html body[class*="new-design"] .ndcc-tile .ndcc-kind,
html body[class*="new-design"] .ndcc-tile .ndcc-num i { font-size: 12px !important; }
html body[class*="new-design"] .h2b-rv-srcs .h2b-rv-src b { font-size: 12px !important; }
html body[class*="new-design"] .rv-card .rv-card__avatar { font-size: 13px !important; }
html body[class*="new-design"] .pd-eq button.pd-eq-more { border-radius: 8px !important; }


/* ---- nd-fix-i.css ---- */
/* nd-fix-i.css — зарезервирован под правки по списку Никиты (04.09.2026). Подключается из header.php последним, поэтому при равной специфичности выигрывает. */

/* ============================================================================
   04.09.2026, по разбору Никиты, п.52: «мобильные страницы вдвое длиннее».
   Замер главной на 390px (Chrome, эмуляция 390x844) до правок: 21 890 px.
   Куда уходила высота (высота секции, px):
     how ndh 2367 | h2b-reviews 1997 | h2b-faq 1939 | h2-filter 1866
     h2b-contacts 1706 | vblog 1695 | sidebyside 1498 | ndcc 1319
     h2-guar 1303 | h2b-encar 1183 | qpicks 1030 | h2b-vrev 666
     h2b-social 449 | h2-hero 343 | h2-seo-tail 290 | подвал 1928
   Три источника пустоты:
     1) одноколоночные перечни и плитки (ndcc 4 плитки в столбик = 1159 px,
        vblog 5 карточек = 1490 px, контакты 5 чипов = 332 px, подвал 3+4 колонки);
     2) внутренние поля карточек (отзывы 28px сверху/снизу, FAQ 18px в каждой
        из 17 строк, подвал 52px сверху) и двойные отступы подряд;
     3) межстрочный интервал 1,65 у всех абзацев внутри main.content.
   Что сделано (только @media max-width:700px, компьютерная версия не тронута):
   плоские перечни в две колонки, поля карточек и ритм секций ужаты,
   интервал абзацев 1,65 -> 1,45. Ни один блок не скрыт и не удалён.
   Итог замера после правок на той же вёрстке (включён/выключен только этот
   файл): 21 819 -> 18 435 px, то есть -3 384 px, -15,5%. На 1440px разницы 0.

   Про префикс `html` во всех селекторах. header.php подключает nd-fix-*.css
   РАНЬШЕ, чем new-home.css и nd-catblock-*.css (см. порядок addString в блоке
   $__ndAny), поэтому при равной специфичности выигрывали они, а не мы: правки
   ритма секций и плиток каталогов молча не применялись. Лишний тип-селектор
   `html` поднимает специфичность на единицу и снимает зависимость от порядка.
   Правило действует только внутри @media (max-width: 700px).
   ============================================================================ */

@media (max-width: 700px) {

  /* --- 1. Ритм секций. Было 34px между секциями (new-home.css, правка 18.08.2026)
         и 18px от заголовка до контента; 15 секций -> ~510px на одни только зазоры.
         По разбору Никиты, п.52: на телефоне это читается как пустота. --- */
  html body.new-design-home main.content > section { padding-top: 22px; padding-bottom: 0; }
  html body.new-design-home main.content > section.qpicks,
  html body.new-design-home main.content > section.hits,
  html body.new-design-home main.content > section.vblog,
  html body.new-design-home main.content > section.how,
  html body.new-design-home section.how { padding-top: 22px; padding-bottom: 22px; }
  html body.new-design-home main.content > section.h2-hero { padding-top: 14px; }
  html body.new-design-home main.content > section.h2b-contacts { padding-bottom: 28px; }
  html body.new-design-home main.content > section.h2-seo-tail { padding: 18px 0 22px; }
  html body.new-design-home .sec-head { margin-bottom: 12px; }

  /* --- 2. Межстрочный интервал. Правило new-catalog.css
         `body[class*="new-design"] main.content p { line-height: 1.65 }` даёт
         на телефоне 25,6px на строку при кегле 15,5px. Для мелких подписей и
         лидов это избыточно. Селектор с main.content — чтобы перебить исходное
         правило по специфичности, а не через !important. --- */
  html body.new-design-home main.content p { line-height: 1.45; }
  html body.new-design-home main.content .sec-sub,
  html body.new-design-home main.content .h2b-sub,
  html body.new-design-home main.content .sec-note,
  html body.new-design-home main.content .ndcc-lead,
  html body.new-design-home main.content .ndh-d,
  html body.new-design-home main.content .ndh-li span,
  html body.new-design-home main.content .rv-card__body { line-height: 1.45; }

  /* --- 3. Четыре плитки каталогов (Корея / Китай б/у / Китай новые / склад).
         Было: одна колонка, плитка 279px, блок 1159px. Стало: сетка 2x2.
         Обложке задана пропорция 16/10, иначе фото сплющивается до 68px. --- */
  html body.new-design-home .ndcc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html body.new-design-home .ndcc-cover { aspect-ratio: 3 / 2; height: auto; }
  html body.new-design-home .ndcc-photo { height: 100%; object-fit: cover; }
  html body.new-design-home .ndcc-body { padding: 12px 12px 14px; gap: 6px; }
  html body.new-design-home .ndcc-lead { font-size: 12.5px; }
  html body.new-design-home .ndcc-go { padding-top: 8px; }
  /* Счётчик на обложке был рассчитан на широкую плитку: max-width 46% при 164px
     даёт 75px, число «148 290» переносилось и наезжало на плашку «С пробегом».
     Раздаём счётчику всю ширину обложки и уменьшаем кегль. */
  html body.new-design-home .ndcc-num { max-width: 100%; left: 12px; right: 12px; bottom: 10px; }
  html body.new-design-home .ndcc-num b { font-size: 20px; }
  html body.new-design-home .ndcc-num i { font-size: 12px; line-height: 1.25; }
  html body.new-design-home .ndcc-top { left: 10px; right: 10px; top: 10px; }
  html body.new-design-home .ndcc-kind { font-size: 12px; padding: 3px 8px; }

  /* --- 4. Видеоблог. Было: 5 карточек в столбик, 1490px (превью 16:9 во всю
         ширину = 191px у каждой). Стало: две колонки, первая (большая) карточка
         остаётся во всю ширину как акцент. --- */
  html body.new-design-home .vb-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  html body.new-design-home .vb-grid .vb-big { grid-column: 1 / -1; }
  html body.new-design-home .vb-body { padding: 10px 12px 12px; }

  /* --- 5. Контакты. Пять чипов связи шли в столбик (332px). Телефон оставляем
         во всю ширину (главное действие), остальные четыре — в две колонки.
         Карточки офисов в две колонки НЕ ставим: адреса переносятся сильнее и
         выигрыш сходит на нет (проверено: 827 -> 795px), ужимаем только поля. --- */
  html body.new-design-home .h2b-ct-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html body.new-design-home .h2b-ct-row .h2b-ct-phone { grid-column: 1 / -1; }
  /* minmax(0,...) и min-width:0 обязательны: у 1fr минимум = min-content, и самый
     широкий чип («Написать в WhatsApp») растягивал колонку до 210px — строка
     вылезала за экран на 55px. Подписи при этом должны переноситься, иначе
     обрезаются по ширине чипа. */
  html body.new-design-home .h2b-ct-chip { min-width: 0; }
  html body.new-design-home .h2b-ct-chip > span { min-width: 0; }
  html body.new-design-home .h2b-ct-chip > span > b,
  html body.new-design-home .h2b-ct-chip > span > em { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; }
  html body.new-design-home .h2b-ct-chip { padding-top: 9px; padding-bottom: 9px; }
  html body.new-design-home .h2b-off-card { padding-top: 10px; padding-bottom: 10px; }
  html body.new-design-home .h2b-off-grid { gap: 8px; }
  html body.new-design-home .h2b-map { margin-top: 8px; }
  /* 07.09.2026 (аудит, п. 16): при 150px виджет Яндекса не успевал разложить свою
     нижнюю строку — «Условия использования / конфиденциальность / масштаб» обрезалась
     ровно пополам краем контейнера, а сверху её ещё накрывали пилюли «Маршрут» и
     «Все офисы». 190px — минимальная высота, при которой строка видна целиком;
     пилюли поднимаем над ней. Страница вырастает на 40px. */
  html body.new-design-home .h2b-map iframe { height: 190px; }
  html body.new-design-home .h2b-map-acts { bottom: 28px; }

  /* --- 6. Отзывы. Шесть карточек с полями 28px сверху и снизу = 336px на одни
         поля; шесть значков площадок шли в столбик (308px). --- */
  html body.new-design-home .h2b-rv-srcs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  html body.new-design-home .rv-card { padding: 12px 18px; }
  html body.new-design-home .rv-card__header { margin-bottom: 10px; gap: 12px; }
  html body.new-design-home .rv-card__avatar { width: 42px; height: 42px; flex: 0 0 42px; }
  html body.new-design-home .rv-card__foot { padding-top: 8px; }
  html body.new-design-home .rv-grid { gap: 10px; }

  /* --- 7. Вопросы и ответы. 17 строк, у каждой поля 18px сверху и снизу
         плюс 10px зазора: только на служебную пустоту уходило ~780px. --- */
  html body.new-design-home .h2b-faq-list .faq > summary { padding-top: 9px; padding-bottom: 9px; }
  html body.new-design-home .h2b-faq-list .faq { margin-bottom: 6px; }
  html body.new-design-home .h2b-faq-in { gap: 14px; }
  html body.new-design-home .h2b-faq-list .faq .faq-body { padding-bottom: 16px; }

  /* --- 8. Гарантии и два больших блока-ссылки (трейд-ин / B2B / кредит).
         Правим только отступы и размер значка, типографику не трогаем. --- */
  html body.new-design-home .h2-guar-c { padding-top: 16px; padding-bottom: 16px; }
  html body.new-design-home .h2-guar-grid { gap: 10px; }
  html body.new-design-home .h2-guar-up { padding-top: 14px; padding-bottom: 14px; margin-top: 10px; }
  html body.new-design-home .h2-guar-up-r { padding-top: 14px; padding-bottom: 14px; }
  html body.new-design-home .sbs-card { padding-top: 22px; padding-bottom: 22px; }
  html body.new-design-home .sbs-card .sbs-ic { width: 34px; height: 34px; }
  html body.new-design-home .sbs-card .sbs-d { margin: 10px 0 12px; }
  html body.new-design-home .sbs-card .sbs-list { margin-bottom: 14px; }
  html body.new-design-home .sbs-grid { gap: 10px; }

  /* --- 9. Фотографии офиса и вертикальные видеоотзывы. Девять снимков в две
         колонки занимали 795px из-за высоты 125px у каждого; задаём пропорции. --- */
  html body.new-design-home .h2b-photos { gap: 8px; }
  html body.new-design-home .h2b-photo { aspect-ratio: 3 / 2; height: auto; }
  html body.new-design-home .h2b-photo.h2b-photo-big { aspect-ratio: 16 / 9; }
  html body.new-design-home .h2b-photo img { width: 100%; height: 100%; object-fit: cover; }
  html body.new-design-home .h2b-vrev-card { height: 300px; }
  html body.new-design-home .h2b-vrev-rail { gap: 10px; }
  html body.new-design-home .h2bs-btn { padding-top: 10px; padding-bottom: 10px; }
  html body.new-design-home .h2bs-grid { gap: 8px; }

  /* --- 10. «Как проходит заказ». Форма имела 44px поля сверху, между колонкой
          шагов и правой колонкой было 22px + 12px зазора подряд. --- */
  /* 04.09.2026 — было padding-top: 24px, и абсолютная метка шага (.ndh-lab, top:12px, высота ~24px)
     накрывала заголовок формы «Оставьте номер — перезвоним». Отступ = метка + её верх + зазор. */
  html body.new-design-home .ndh-media[data-media="form"] .ndh-form { padding-top: 46px; padding-bottom: 16px; }
  html body.new-design-home .ndh-aside .ndh-media { padding-bottom: 10px; }
  html body.new-design-home .ndh-q { padding-top: 10px; padding-bottom: 10px; margin-top: 10px; }
  html body.new-design-home .ndh-list { margin-top: 8px; gap: 7px; }
  html body.new-design-home .ndh-wrap { margin-top: 16px; gap: 10px; }
  html body.new-design-home .ndh-foot { margin-top: 14px; }
  html body.new-design-home .ndh-fi { padding-top: 10px; padding-bottom: 10px; }
  html body.new-design-home .ndh-trust { margin-top: 14px; }
  html body.new-design-home .ndh-hint { margin-top: 12px; }

  /* --- 11. Подбор и лента каталога: двойные отступы подряд (margin блока +
          padding соседнего). Внутреннюю вёрстку панели фильтра не трогаем —
          она выводится position:fixed и в высоту страницы не входит. --- */
  /* 08.09.2026 (макет B3): пять строк про .qpb / .qp-presets / .qp-pills / .qpb-res /
     .qpb-hint убраны — блок «Что вы ищете?» переверстан, его мобильные поля заданы
     в css/pages/nd-qpicks-b3.css (файл подключает сам блок). Остальные строки п.11 —
     про соседние блоки и не менялись. */
  html body.new-design-home .h2k-search { padding-bottom: 12px; }
  html body.new-design-home .h2k-chips .brands-row { padding-top: 8px; padding-bottom: 8px; }
  html body.new-design-home .h2k-fhead { padding-bottom: 12px; }
  html body.new-design-home .ff-bar { padding-top: 8px; padding-bottom: 8px; }
  html body.new-design-home .h2-preset-head { margin-top: 12px; margin-bottom: 8px; }
  html body.new-design-home .cards-grid.instock-grid { margin-top: 14px; }
  html body.new-design-home .h2-fresh-all { margin-top: 14px; }
  html body.new-design-home .h2hub { padding-top: 12px; margin-top: 14px; }
  html body.new-design-home .h2hub-colls { padding-top: 12px; margin-top: 14px; }

  /* --- 12. Подвал: 1928px на телефоне. Ссылочные колонки шли по одной
          (зазор 10px между ссылками), SEO-колонки и строка доверия — в столбик,
          верхнее поле 52px. Списки — в две колонки, поля ужаты. --- */
  html body.new-design-home .ft-cta { padding-top: 16px; padding-bottom: 16px; }
  html body.new-design-home .ft-top { padding-top: 26px; padding-bottom: 20px; gap: 16px; }
  html body.new-design-home .ft-col { gap: 5px; }
  html body.new-design-home .ft-brand .logo-ft { margin-bottom: 10px; }
  html body.new-design-home .ft-brand .ft-desc { margin-bottom: 12px; }
  html body.new-design-home .ft-seo { grid-template-columns: 1fr 1fr; gap: 14px 20px; padding-top: 20px; padding-bottom: 20px; }
  html body.new-design-home .ft-trustrow { grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 16px; padding-bottom: 16px; }
  html body.new-design-home .ft-bar { padding-top: 12px; padding-bottom: 12px; }
  html body.new-design-home .ft-disc { padding-top: 12px; padding-bottom: 18px; line-height: 1.35; }

}

/* ============================================================================
   04.09.2026, п.52, вторая часть: городские посадочные /avto-iz-korei-<город>/
   рендерятся тем же телом главной (класс new-design-home), но добавляют
   легаси-блок вопросов includes/nd-city-seo.php -> section.box.box-38.
   Замер на 390px: сама секция .nd-city-faq — 4653px, из них служебные поля:
   53/70px у box-38, по 33px сверху и снизу у каждой из 10 строк вопроса,
   кнопка «задать вопрос» высотой 216px, блок faq-info с полями 28px и
   отступами 35px. Кегль внутри — легаси-rem, раздутый корневым font-size
   нового дизайна (текст 28px, кнопка 22px). Приводим к мобильным величинам.
   ============================================================================ */
@media (max-width: 700px) {
  html body.new-design-home .nd-city-faq .box-38 { padding-top: 20px; padding-bottom: 24px; }
  html body.new-design-home .nd-city-faq .faq__item { padding-top: 16px; padding-bottom: 16px; }
  html body.new-design-home .nd-city-faq .faq-info { margin: 18px 0; padding: 16px; gap: 14px; }
  html body.new-design-home .nd-city-faq .faq-info--text { font-size: 15px; line-height: 1.45; }
  html body.new-design-home .nd-city-faq .faq__btn { padding-top: 14px; padding-bottom: 14px; font-size: 15px; line-height: 1.3; }
  html body.new-design-home .nd-city-seo .nd-city-seo__text p { line-height: 1.45; }
}

/* ============================================================================
   07.09.2026 — правки главной по списку Никиты, пункты 1, 4 и 5 (группа 2).
   Файл подключается из header.php последним из nd-fix-*.css, но ПОЗЖЕ него идут
   new-home.css и nd-split-home.css, поэтому у всех селекторов ниже стоит лишний
   префикс `html` — он поднимает специфичность на единицу и снимает зависимость
   от порядка подключения (то же соображение, что во врезке в начале файла).
   Мобильные доводки этих же блоков — в css/pages/nd-mob-fix.css (подключается
   в самом конце страницы, из footer.php).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   П.1. «Что вы ищете?» — правила блока (сетка .qpx двумя колонками, тёмная плашка
   квиза .qpq, квадратные плитки подборок 2x3) сняты 08.09.2026 вместе с переходом
   на утверждённый макет B3: тёмных плашек в блоке больше нет, слева квиз 496px,
   справа витрина плиток 204x224 сеткой 4x2, подборок восемь.
   Всё оформление блока теперь в одном файле — css/pages/nd-qpicks-b3.css, его
   подключает сам блок (includes/nd-home-shared/qpicks.php).
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   П.5. Вкладки направлений не читались как переключатель: четыре одинаковые
   пилюли, у активной чёрная заливка — люди принимали ряд за набор ссылок.
   Делаем сегментный переключатель: серая подложка-трек с рамкой, внутри
   активный сегмент чёрной плашкой, неактивные — прозрачные. Под треком —
   короткая подпись-намёк (::after, чтобы не трогать разметку how.php, где
   лежит третий ряд вкладок).
   Рядов на главной три: «Быстрый подбор» (после переделки п.1 его переключатель
   убран вместе с конструктором), лента машин (#h2FeedTabs) и «Как проходит
   заказ» (#ndHowTabs). Правило общее для .nd-dirtabs, поэтому одинаково
   выглядят все ряды главной; на других страницах (/sklad/, /china-new/)
   не действует — селектор ограничен body.new-design-home.
   --------------------------------------------------------------------------- */
html body.new-design-home .nd-dirtabs {
  position: relative;
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  max-width: 100%; box-sizing: border-box;
  padding: 4px;
  background: var(--bg, #F7F7F9);
  border: 1px solid var(--line, #ECECF0);
  border-radius: 999px;
}
html body.new-design-home .nd-dirtabs .nd-dirtab {
  background: transparent; border-color: transparent; color: var(--ink-3, #3D3D48);
}
html body.new-design-home .nd-dirtabs .nd-dirtab:hover {
  background: var(--bg-card, #FFFFFF); border-color: var(--line, #ECECF0); color: var(--ink, #0E0E12);
}
html body.new-design-home .nd-dirtabs .nd-dirtab.is-on {
  background: var(--ink, #0E0E12); border-color: var(--ink, #0E0E12); color: var(--ink-invert, #FFFFFF);
  box-shadow: 0 2px 8px rgba(14, 14, 18, .22);
}
/* подпись-намёк: абсолютная, чтобы не влиять на раскладку самих вкладок */
html body.new-design-home #h2FeedTabs,
html body.new-design-home #ndHowTabs { margin-bottom: 34px; }
html body.new-design-home #h2FeedTabs::after,
html body.new-design-home #ndHowTabs::after {
  position: absolute; left: 4px; top: 100%; margin-top: 7px;
  font: 500 12px/1.25 Montserrat, Inter, system-ui, sans-serif;
  color: var(--muted, #6E6E76); white-space: nowrap; pointer-events: none;
}
html body.new-design-home #h2FeedTabs::after { content: "Нажмите вкладку — сменятся лента и фильтр"; }
html body.new-design-home #ndHowTabs::after { content: "Нажмите вкладку — шаги сменятся под направление"; }

/* ---------------------------------------------------------------------------
   П.4. «Свежие подборки менеджеров» переехали вниз, к SEO-тексту, в собственную
   секцию .h2-colls-tail. 07.09.2026 (Ivan): блок опущен в самый низ страницы, под SEO-текст,
   последним перед подвалом. Разметка живёт в includes/nd-colls-tail.php и подключается из двух
   мест — конца nd-home2-body.php (главная без города) и конца nd-city-seo.php (городские).
   В прежнем месте у блока была верхняя отбивка линией — она отделяла его от
   ряда хабовых ссылок выше. Отдельной секции линия не нужна.
   --------------------------------------------------------------------------- */
html body.new-design-home .h2-colls-tail { padding-top: 6px; }
html body.new-design-home .h2-colls-tail .h2hub-colls {
  margin-top: 0; padding-top: 0; border-top: 0;
}

/* 07.09.2026, добор к п.5: ряд вкладок «Как проходит заказ» лежит в flex-контейнере
   (.hzc-head), поэтому растягивался на всю ширину секции — 1376px подложки вместо
   плашки по содержимому, и сегментный переключатель читался как просто серая полоса.
   Свой CSS how.php печатает ПОСЛЕ nd-fix-*.css, поэтому целимся по id. */
html body.new-design-home #ndHowTabs {
  display: inline-flex; width: max-content; max-width: 100%;
  align-self: flex-start; flex: 0 0 auto;
}

/* ============================================================================
   07.09.2026, вечер — Ivan посмотрел переделку п.1 и вернул решение назад:
   «верни блок ищу как был, а под ним надо сделать квиз и блоки с быстрыми
   подборками». Чёрный конструктор .qpb снова стоит первым блоком секции,
   а .qpx (слева квиз, справа шесть подборок 2x3) переехал под него.
   Разметка — includes/nd-home-shared/qpicks.php; мобильные доводки — nd-mob-fix.css.
   Правила выше (сетка .qpx, тёмная карточка квиза, квадратные плитки) не менялись:
   блок тот же, поменялось только его место на странице.
   ============================================================================ */

/* 08.09.2026 (макет B3): отсюда сняты отступы .qpx, доводка .qp-plbl, инверсия
   сегментного переключателя под чёрную плашку и белая подпись-намёк .qpb-modehint.
   Чёрной плашки .qpb больше нет — конструктор стал белой карточкой на светлом «столе»,
   и все эти правила красили бы белым по белому. Их заменили правила того же смысла
   в css/pages/nd-qpicks-b3.css. */

/* ---------------------------------------------------------------------------
   08.09.2026 (Ivan, скриншот: «на главной перед подвалом странная серая полоса»).
   Секция «Свежие подборки менеджеров» (.h2-colls-tail) стоит последней, фон у неё белый,
   а у main нижний отступ 96px (02.09, чтобы плавающая кнопка чата не накрывала ссылки) —
   через него просвечивал серый фон страницы, и между белым блоком и подвалом получалась
   пустая серая лента. Отступ переносим внутрь самой секции: её белый фон доходит до подвала,
   расстояние до подвала не меняется. Селектор с :last-child сильнее правил в nd-mob-fix.css,
   поэтому порядок подключения файлов роли не играет.
   --------------------------------------------------------------------------- */
html body[class*="new-design"] main.content > section.h2-colls-tail:last-child,
html body.nd-hybrid main.content > section.h2-colls-tail:last-child {
  padding-bottom: 96px; margin-bottom: -96px;
}
@media (max-width: 700px) {
  html body[class*="new-design"] main.content > section.h2-colls-tail:last-child,
  html body.nd-hybrid main.content > section.h2-colls-tail:last-child {
    padding-bottom: 84px; margin-bottom: -84px;
  }
}

/* 08.09.2026 (Ivan, скриншот первого экрана): строку под заголовком на компьютере рвало по месту,
   которое осталось от ширины — «Из Кореи — за 15–» уезжало в конец первой строки. Ставим перенос
   по смыслу: на первой строке — что включено в цену, на второй — срок и выгода. На планшете и
   телефоне перенос убираем: там строка и так короткая, лишний разрыв дал бы дыру. */
html body.new-design-home .hero-lead .lead-br-pc { display: none; }
@media (min-width: 1025px) {
  html body.new-design-home .hero-lead .lead-br-pc { display: inline; }
}

/* ---------------------------------------------------------------------------
   08.09.2026 (Ivan, скриншот шапки): «стрелка упирается в край, и когда две чёрные кнопки
   рядом — они упираются друг в друга».
   Было: пункты меню идут вплотную (gap: 0), поэтому подложка активного (чёрного) пункта
   смыкается с соседней без зазора; у стрелки .cnm-caret стояло right: 4px при ширине 8px —
   3px до края подложки.
   Зазор даём только на экранах шире 1440px: там в строке есть запас. На 1280–1439 строка уже
   тесная (правый край меню и так подходит к телефону вплотную — замер 08.09: 5px перекрытия
   ещё до этой правки), поэтому там правим только положение стрелки, ширину не трогаем.
   Ниже 1280 — не вмешиваемся: поля уже 5–7px, подписи сокращены.
   --------------------------------------------------------------------------- */
/* Селектор с тегом nav: в nd-mob-fix.css (грузится из футера, то есть позже) есть правило
   `html body .header .main-nav a { padding-left: 8px }` той же силы — без тега оно побеждало,
   и зазор получался только за счёт внешних отступов, а строка меню становилась шире. */
@media (min-width: 1440px) {
  html body .header nav.main-nav a { padding-left: 6px; padding-right: 6px; margin-left: 3px; margin-right: 3px; }
  html body .header nav.main-nav #cnmLink { padding-right: 22px; }   /* место под стрелку с воздухом */
  html body .header nav.main-nav .cnm-caret { right: 9px; }          /* было 4px — стрелка липла к краю */
}
/* 08.09.2026, вторая правка (Ivan: «и смыкание ты не исправил»). Первая редакция давала зазор
   только от 1440px, а на экране Ivan'а (уже 1440) чёрные подложки соседних пунктов по-прежнему
   смыкались. Замер: на 1180px строка меню УЖЕ не помещается (scrollWidth 746 при ширине 693,
   overflow: hidden), поэтому расширять пункты нельзя — лишние просто обрежутся. Приём: внутренние
   поля уменьшаем ровно на столько, на сколько добавляем внешние (8+8 -> 5+5 и по 3px margin),
   ширина строки не меняется, а между подложками появляется 6px. */
@media (min-width: 992px) and (max-width: 1439px) {
  html body .header nav.main-nav a { padding-left: 5px; padding-right: 5px; margin-left: 3px; margin-right: 3px; }
  html body .header nav.main-nav #cnmLink { padding-left: 5px; padding-right: 18px; }  /* место под стрелку */
  html body .header nav.main-nav .cnm-caret { right: 7px; }
}


/* ---- new-catalog-after.css ---- */
/* 04.09.2026 - п.30 списка Никиты «токены почти не используются, 3359 хардкодов цвета».
   Точные совпадения канона заменены на var(--токен, #значение); фолбэк оставлен намеренно -
   если переменная потеряется, цвет останется прежним. Соответствие:
   #0E0E12 --ink · #1E1E24 --ink-2 · #3D3D48 --ink-3 · #6E6E76 --muted · #ECECF0 --line ·
   #F0F0F3 --line-2 · #F7F7F9 --bg · #E11D2E --accent · #B8152B --accent-2 · #1E8C4A --success ·
   #FAEDD1 --warn-soft · #FFFFFF --bg-card (фоны) либо --ink-invert (текст, иконки, обводки).
   Намеренно НЕ трогали #5A5A66, #9C9CA8, #C07A00: их токены (--ink-4, --muted-2, --warn)
   new-catalog-after.css переопределяет внутри .how/.faq/.adv/.viewed/.seo/.contacts-section
   на другие значения - подстановка var() там сменила бы цвет. Заменено в файле: 27. */
/* ============================================================
   /korea/ — секции под выдачей (helper, how, faq, adv, viewed,
   seo, contacts). Соответствуют макету new_design/Catalog.html
   строки 711-1100. Подключаются только когда показывается
   includes/new-catalog-after.php (test.encarrus.ru).
   Используются токены из new-tokens.css.
   ============================================================ */

/* Локальные алиасы для переменных, которых нет в new-tokens.css */
.helper-section, .how-section, .faq-section, .adv-section,
.viewed-section, .seo-section, .contacts-section {
  --ink-4: var(--ink-3);
  --muted-2: var(--muted);
  --bg-2: #f7f7f9;
  --shadow-lg: 0 18px 48px rgba(10,10,11,.10);
  --radius-md: var(--radius-lg);
  --accent-2: var(--accent-ink);
  --warn: #F0B43C;
}

/* ============ SEC EYEBROW ============ */
.helper-section .sec-eyebrow,
.how-section .sec-eyebrow,
.faq-section .sec-eyebrow,
.adv-section .sec-eyebrow,
.viewed-section .sec-eyebrow,
.contacts-section .sec-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}

/* ============ HELPER (подбор) ============ */
.helper-section { padding: 20px 0 64px; }
.helper-card {
  background: var(--ink); color: var(--ink-invert, #FFFFFF);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 0;
  box-shadow: var(--shadow-lg); position: relative;
}
.helper-card::before {
  content: ""; position: absolute; top: -120px; right: -120px;
  width: 360px; height: 360px; border-radius: 999px;
  background: radial-gradient(circle, rgba(225,29,46,.35), transparent 70%);
  pointer-events: none;
}
.hc-left { padding: 44px 48px; position: relative; z-index: 1; }
.hc-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.hc-title { font-size: 44px; line-height: 1.05; letter-spacing: -.025em; font-weight: 700; margin: 0 0 16px; }
.hc-title em { color: var(--accent); font-style: normal; }
.hc-lede { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.7); max-width: 520px; margin: 0 0 28px; }

.hc-form {}
.hc-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr auto; gap: 10px; }
.hc-field { display: flex; flex-direction: column; gap: 6px; }
.hc-field label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.hc-ctrl {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; transition: all .15s var(--ease);
}
.hc-ctrl:focus-within { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); }
.hc-ctrl input, .hc-ctrl select {
  width: 100%; background: transparent; border: none; outline: none;
  padding: 13px 14px; font-size: 14px; font-weight: 600; color: var(--ink-invert, #FFFFFF);
  appearance: none;
}
.hc-ctrl select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF80' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 34px; cursor: pointer;
}
.hc-ctrl input::placeholder { color: rgba(255,255,255,.35); }
.hc-submit {
  padding: 14px 22px; background: var(--accent); color: var(--ink-invert, #FFFFFF);
  border: 0; border-radius: 10px; cursor: pointer;
  font-size: 14px; font-weight: 800;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 2px 0 var(--accent-2);
  white-space: nowrap; transition: transform .1s var(--ease);
  height: 44px;
}
.hc-submit:hover { transform: translateY(1px); box-shadow: 0 1px 0 var(--accent-2); }
.hc-field-btn { display: flex; align-items: flex-end; }
.hc-agree { margin-top: 14px; font-size: 12px; color: rgba(255,255,255,.4); }
.hc-agree a { color: rgba(255,255,255,.65); border-bottom: 1px solid rgba(255,255,255,.15); }

.hc-right {
  background: linear-gradient(145deg, var(--ink-2, #1E1E24), var(--ink, #0E0E12));
  padding: 44px 36px;
  display: flex; flex-direction: column; gap: 24px;
  border-left: 1px solid rgba(255,255,255,.06);
  position: relative; z-index: 1;
}
.hc-manager {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.hc-avatar {
  width: 48px; height: 48px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--ink-invert, #FFFFFF);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
  box-shadow: 0 4px 12px rgba(225,29,46,.3);
}
.hc-man-name { font-size: 15px; font-weight: 700; }
.hc-man-role { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 2px; }
.hc-online {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #4CE896;
  padding: 4px 8px; background: rgba(76,232,150,.1); border-radius: 999px;
}
.hc-online span { width: 6px; height: 6px; border-radius: 999px; background: #4CE896; box-shadow: 0 0 6px #4CE896; }

.hc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hc-stat {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px; padding: 14px 16px;
}
.hc-stat-num { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hc-stat-lbl { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 4px; line-height: 1.3; }

.hc-messengers { margin-top: auto; }
.hc-mes-lbl { font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 10px; }
.hc-mes-row { display: flex; gap: 8px; }
.hc-mes {
  flex: 1; padding: 10px 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  font-size: 13px; font-weight: 700; color: var(--ink-invert, #FFFFFF);
  text-align: center; text-decoration: none;
  transition: all .15s var(--ease);
}
.hc-mes:hover { background: rgba(255,255,255,.12); }
.mes-tg:hover { color: #41BCE7; border-color: rgba(65,188,231,.3); }
.mes-wa:hover { color: #25D366; border-color: rgba(37,211,102,.3); }
.mes-max:hover { color: #5A46FF; border-color: rgba(90,70,255,.3); }

/* ============ HOW IT WORKS ============ */
.how-section { padding: 24px 0 64px; }
.how-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 32px; }
.how-section .sec-h2,
.faq-section .sec-h2,
.adv-section .sec-h2,
.viewed-section .sec-h2,
.contacts-section .sec-h2 { font-size: 44px; line-height: 1.05; letter-spacing: -.025em; font-weight: 700; margin: 0; color: var(--ink); }
.how-section .sec-h2 em,
.faq-section .sec-h2 em,
.adv-section .sec-h2 em,
.contacts-section .sec-h2 em { color: var(--accent); font-style: normal; }
.how-meta { text-align: right; }
.hm { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.hm-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; }
.step {
  background: var(--bg-card, #FFFFFF); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 22px 22px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; transition: all .2s var(--ease);
}
.step:hover { transform: translateY(-3px); border-color: var(--ink-3); box-shadow: var(--shadow-md); }
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 44px; right: -12px; width: 8px; height: 8px;
  border-top: 1.5px solid var(--line); border-right: 1.5px solid var(--line);
  transform: rotate(45deg); z-index: 2;
}
.st-num {
  font-family: 'Instrument Serif', serif;
  font-size: 44px; font-weight: 400; line-height: 1; color: var(--accent);
  font-feature-settings: "lnum";
}
.st-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.st-text { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; flex: 1; }
.st-time {
  display: inline-flex; align-self: flex-start;
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; background: var(--bg);
  border-radius: 999px; color: var(--ink-3);
  letter-spacing: .02em;
}

/* ============ FAQ ============ */
.faq-section { padding: 24px 0 80px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.faq-left .sec-h2 { font-size: 40px; }
.faq-lede { font-size: 14.5px; color: var(--ink-3); margin: 18px 0 24px; line-height: 1.55; }
.faq-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.faq-all {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  background: var(--ink); color: var(--ink-invert, #FFFFFF);
  border-radius: 10px; text-decoration: none;
  font-size: 13px; font-weight: 700;
  transition: background .15s var(--ease);
}
.faq-all:hover { background: var(--accent); color: var(--ink-invert, #FFFFFF); }

.faq-right { display: flex; flex-direction: column; gap: 10px; }
.faq {
  background: var(--bg-card, #FFFFFF); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color .15s var(--ease);
}
.faq[open] { border-color: var(--ink-3); }
.faq summary {
  padding: 18px 22px;
  font-size: 15.5px; font-weight: 700; letter-spacing: -.005em;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq-num { color: var(--accent); font-family: 'Instrument Serif', serif; font-size: 18px; font-weight: 400; flex: none; }
.faq-q { flex: 1; color: var(--ink); }
.faq-plus { width: 22px; height: 22px; flex: none; position: relative; }
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; background: var(--ink); border-radius: 1px;
  transition: transform .25s var(--ease);
}
.faq-plus::before { top: 10px; left: 2px; right: 2px; height: 2px; }
.faq-plus::after { top: 2px; bottom: 2px; left: 10px; width: 2px; }
.faq[open] .faq-plus::after { transform: scaleY(0); }
.faq-body { padding: 0 22px 22px; font-size: 14px; color: var(--ink-3); line-height: 1.6; }
.faq-body p { margin: 0 0 10px; }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body strong { color: var(--ink); }
.faq-body .faq-note { color: var(--muted); font-size: 13px; }
.faq-body .faq-list { list-style: none; padding: 0; margin: 8px 0; }
.faq-body .faq-list li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.faq-body .faq-list li b { color: var(--ink); }

/* ============ ПОЧЕМУ КОРЕЯ ============ */
.adv-section { padding: 80px 0 40px; }
.adv-head { max-width: 760px; margin-bottom: 40px; }
.adv-head .sec-h2 { font-size: 44px; line-height: 1.05; margin: 8px 0 14px; }
.adv-lede { color: var(--ink-3); font-size: 16px; line-height: 1.55; margin: 0; }
.adv-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.adv { background: var(--bg-card, #FFFFFF); padding: 22px 22px 24px; display:flex; flex-direction:column; gap:8px; transition: background .2s; }
.adv:hover { background: var(--bg); }
.adv-n { font-family: 'Instrument Serif', serif; font-size: 26px; color: var(--accent); line-height: 1; }
.adv-t { font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; color: var(--ink); }
.adv-d { color: var(--ink-3); font-size: 13.5px; line-height: 1.5; }
.adv.adv-w { grid-column: span 1; }
@media (max-width: 1100px) { .adv-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .adv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .adv-grid { grid-template-columns: 1fr; } }

/* ============ ПРОСМОТРЕННЫЕ РАНЕЕ ============ */
.viewed-section { padding: 56px 0 40px; background: var(--bg, #F7F7F9); }
.viewed-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom: 24px; }
.viewed-head .sec-h2 { font-size: 32px; }
.viewed-ctrls { display:flex; align-items:center; gap:8px; }
.vc-btn { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--bg-card, #FFFFFF); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition: all .2s; color: var(--ink); }
.vc-btn:hover { border-color: var(--ink); }
.vc-clear { margin-left: 8px; padding: 8px 14px; border-radius: 999px; border:1px solid var(--line); background:var(--bg-card, #FFFFFF); cursor:pointer; font-size:13px; color: var(--muted); }
.vc-clear:hover { color: var(--accent); border-color: var(--accent); }
/* 07.09.2026 (аудит, п. 8): лента «Просмотренные ранее» вылетала за сетку на фиксированные
   40px, а боковые поля .shell меняются по ширине экрана (16 / 24 / 32 / 40px). На всех
   ширинах ниже 1600px лента торчала за край на 8-24px и тянула страницу вбок (замер
   1024x1366: документ 1025px при окне 1024px). Повторяем поля .shell один в один:
   24px везде, 32px с 1280px, 40px с 1600px. */
.viewed-scroll { overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; margin: 0 -24px; padding: 0 24px; }
@media (min-width: 1280px) { .viewed-scroll { margin: 0 -32px; padding: 0 32px; } }
@media (min-width: 1600px) { .viewed-scroll { margin: 0 -40px; padding: 0 40px; } }
.viewed-scroll::-webkit-scrollbar { display: none; }
.viewed-track { display:flex; gap:16px; padding-bottom: 4px; }
.vcard {
  flex: 0 0 260px; background: var(--bg-card, #FFFFFF);
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s;
  display:flex; flex-direction: column;
}
.vcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.vc-img { position: relative; aspect-ratio: 4/3; background: linear-gradient(135deg, var(--line, #ECECF0), #DCDCE2); display:flex; align-items:center; justify-content:center; overflow: hidden; }
.vc-img-ph { font-size: 12px; color: var(--muted); font-weight: 500; padding: 0 12px; text-align:center; }
.vc-ago { position:absolute; bottom:10px; right:10px; padding: 4px 8px; border-radius: 6px; background: rgba(14,14,18,.7); color:var(--ink-invert, #FFFFFF); font-size: 12px; font-weight: 500; backdrop-filter: blur(4px); }
.vc-body { padding: 14px 16px 16px; display:flex; flex-direction:column; gap:4px; }
.vc-name { font-weight: 700; font-size: 15px; letter-spacing:-.01em; color: var(--ink); }
.vc-name span { color: var(--muted); font-weight: 500; }
.vc-trim { color: var(--ink-3); font-size: 13px; }
.vc-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.vc-price { margin-top: 6px; font-weight: 700; font-size: 16px; color: var(--ink); }
.vc-empty { color: var(--muted); font-size: 14px; padding: 32px; text-align: center; width: 100%; }

/* ============ SEO-БЛОК ============ */
.seo-section { padding: 60px 0 72px; background: var(--bg-card, #FFFFFF); border-top: 1px solid var(--line); }
.seo-wrap { max-width: 960px; margin: 0 auto; position: relative; }
.seo-h1 { font-size: 26px; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 20px; color: var(--ink); font-weight: 700; }
.seo-body { position: relative; max-height: 220px; overflow: hidden; transition: max-height .5s var(--ease); }
.seo-wrap.open .seo-body { max-height: 3000px; }
.seo-body::after { content:''; position:absolute; left:0; right:0; bottom:0; height: 120px; background: linear-gradient(180deg, transparent, var(--bg-card, #FFFFFF)); pointer-events: none; transition: opacity .3s; }
.seo-wrap.open .seo-body::after { opacity: 0; }
.seo-body p { margin: 0 0 14px; color: var(--ink-3); font-size: 14.5px; line-height: 1.65; }
.seo-body h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 22px 0 10px; color: var(--ink); }
.seo-toggle { display:inline-flex; align-items:center; gap:6px; margin-top: 16px; padding: 10px 18px; border-radius: 999px; border:1px solid var(--line); background:var(--bg-card, #FFFFFF); cursor:pointer; font-size:13px; font-weight:600; color: var(--ink); transition: all .2s; }
.seo-toggle:hover { background: var(--ink); color:var(--ink-invert, #FFFFFF); border-color: var(--ink); }
.seo-toggle svg { transition: transform .25s var(--ease); }

/* ============ КОНТАКТЫ ============ */
.contacts-section { padding: 64px 0 72px; background: var(--bg); }
.contacts-head { max-width: 760px; margin-bottom: 32px; }
.contacts-head .sec-h2 { font-size: 36px; }
.contacts-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: start; }
.ct-offices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-office { background: var(--bg-card, #FFFFFF); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; transition: all .2s; }
.ct-office:hover { border-color: var(--ink); box-shadow: var(--shadow-md); }
.ct-city { font-weight: 700; font-size: 16px; letter-spacing: -.01em; margin-bottom: 8px; color: var(--ink); }
.ct-addr { color: var(--ink-3); font-size: 13.5px; line-height: 1.4; }
.ct-meta { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.ct-phone { margin-top: 14px; font-weight: 700; font-size: 17px; color: var(--ink); }
.ct-sh { margin-top: 8px; font-size: 12px; color: var(--success); font-weight: 600; }
.ct-right { display:flex; flex-direction:column; gap:14px; }
.ct-card { background:var(--bg-card, #FFFFFF); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; }
.ct-card-h { font-weight: 700; font-size: 15px; letter-spacing:-.01em; margin-bottom: 14px; color: var(--ink); }
.ct-mes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ct-mes { display:flex; flex-direction:column; gap:2px; padding: 12px 14px; border:1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); transition: all .15s; }
.ct-mes b { font-size: 13px; font-weight: 700; color: var(--ink); }
.ct-mes span { font-size: 12px; color: var(--muted); }
.ct-mes:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: var(--shadow-sm); }
.ct-mes.tg:hover { border-color:#2AABEE; } .ct-mes.tg:hover b { color:#2AABEE; }
.ct-mes.wa:hover { border-color:#25D366; } .ct-mes.wa:hover b { color:#25D366; }
.ct-mes.max:hover { border-color:#5A46FF; } .ct-mes.max:hover b { color:#5A46FF; }
.ct-mes.vk:hover { border-color:#0077FF; } .ct-mes.vk:hover b { color:#0077FF; }
.ct-mes.yt:hover { border-color:#FF0000; } .ct-mes.yt:hover b { color:#FF0000; }
.ct-mes.av:hover { border-color:#97CF26; } .ct-mes.av:hover b { color:#97CF26; }
.ct-mes.dr:hover { border-color:#E04040; } .ct-mes.dr:hover b { color:#E04040; }
.ct-mes.dz:hover { border-color:#000; }
.ct-form { background:var(--bg-card, #FFFFFF); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; display:flex; flex-direction:column; gap:10px; }
.ct-form input, .ct-form textarea { width:100%; padding: 12px 14px; border:1px solid var(--line); border-radius: 10px; font-size: 14px; outline: none; transition: border-color .15s; background:var(--bg-card, #FFFFFF); font-family: inherit; }
.ct-form input:focus, .ct-form textarea:focus { border-color: var(--ink); }
.ct-form textarea { resize: vertical; }
.ct-submit { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 13px 16px; background: var(--accent); color:var(--ink-invert, #FFFFFF); border:0; border-radius: 10px; cursor:pointer; font-weight: 700; font-size: 14px; margin-top: 4px; transition: background .2s; }
.ct-submit:hover { background: var(--accent-2); }
.ct-agree { font-size: 12px; color: var(--muted); line-height: 1.4; }
.ct-agree a { color: var(--ink-3); text-decoration: underline; }

/* ============ MOBILE ≤ 1024 ============ */
@media (max-width: 1024px) {
  .helper-card { grid-template-columns: 1fr; border-radius: 16px; }
  .hc-left { padding: 32px 24px; }
  .hc-title { font-size: 32px; }
  .hc-grid { grid-template-columns: 1fr 1fr; }
  .hc-field-btn { grid-column: span 2; }
  .hc-right { padding: 32px 24px; border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }

  .how-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:not(:last-child)::after { display: none; }

  .faq-grid { grid-template-columns: 1fr; gap: 24px; }
  .faq-left .sec-h2 { font-size: 30px; }

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

/* ============ MOBILE ≤ 720 ============ */
@media (max-width: 720px) {
  .hc-grid { grid-template-columns: 1fr; }
  .hc-field-btn { grid-column: auto; }
  .hc-submit { width: 100%; height: 48px; }
  .hc-title { font-size: 26px; }
  .helper-section, .how-section, .faq-section, .adv-section, .contacts-section { padding-top: 16px; padding-bottom: 40px; }

  .how-section .sec-h2,
  .faq-section .sec-h2,
  .adv-section .sec-h2,
  .contacts-section .sec-h2 { font-size: 26px; }
  .steps { grid-template-columns: 1fr; }

  .ct-offices { grid-template-columns: 1fr; }
  .ct-mes-grid { grid-template-columns: 1fr; }

  .seo-h1 { font-size: 20px; }
  .seo-body p { font-size: 13.5px; }
}

/* ============================================================
   07.09.2026 — пункты 15, 16 и 17 списка Никиты.
   Правила дописаны в конец файла намеренно: new-catalog-after.css
   подключается последним из «каталожных» (после new-catalog.css и
   всех nd-fix-*.css), поэтому при равной специфичности выигрывает он —
   ничего перебивать через !important не нужно.
   ============================================================ */

/* ---------- п.15: блок этапов заменён общим (includes/nd-home-shared/how.php) ----------
   Разметка .how-section / .steps / .step / .how-head / .hm со страницы ушла, весь стиль
   нового блока лежит в css/pages/nd-how-c.css и подключается самим блоком. Правила выше
   (строки «HOW IT WORKS») намеренно НЕ удалены: они входят в общие перечисления вида
   `.how-section .sec-h2, .faq-section .sec-h2, ...`, и вычищать их из перечислений в день,
   когда файл параллельно правят другие исполнители, рискованнее, чем оставить мёртвыми.
   Отступы самого блока не трогаем: в nd-how-c.css рамка секции задана через
   `html body[class] section#ndHow { padding: 52px 0 }` намеренно одинаковой на всех
   четырёх страницах, где стоит блок. */

/* Форма подбора (.helper-section) на /korea/ выключена — см. $__ndShowHelper
   в includes/new-catalog-after.php. Её стили оставлены на месте: флаг можно вернуть. */

/* ---------- п.16: правая колонка у нижнего SEO-текста ----------
   Было: .seo-wrap шириной 960px прижат влево (margin:0 auto ему перебивают), справа
   пустовало 216px на 1200px ширины и 448px на 1440px. Стало: сетка «текст + колонка».
   Текст остаётся первым в разметке — для поиска порядок блоков не изменился. */
.seo-cols {
  display: grid;
  grid-template-columns: minmax(0, 960px) minmax(280px, 360px);
  gap: 48px;
  align-items: start;
  justify-content: space-between;
}
.seo-aside {
  display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 92px;   /* пока текст развёрнут, колонка едет вместе с ним */
}
.seo-aside-card {
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.seo-aside-h {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}

/* оглавление */
.seo-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: seotoc; }
.seo-toc li { counter-increment: seotoc; }
.seo-toc li + li { border-top: 1px solid var(--line-2, #F0F0F3); }
.seo-toc a {
  display: flex; gap: 10px; padding: 9px 0;
  font-size: 13.5px; line-height: 1.35; color: var(--ink-3);
  text-decoration: none; transition: color .15s var(--ease);
}
.seo-toc a::before {
  content: counter(seotoc, decimal-leading-zero);
  flex: 0 0 auto; padding-top: 1px;
  font-size: 12px; font-weight: 700; color: var(--muted);
  transition: color .15s var(--ease);
}
.seo-toc a:hover, .seo-toc a:hover::before { color: var(--accent); }

/* быстрые ссылки */
.seo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.seo-chips a {
  display: inline-flex; align-items: center;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  text-decoration: none; transition: all .15s var(--ease);
}
.seo-chips a:hover { border-color: var(--ink); color: var(--ink); }

/* призыв */
.seo-cta { background: var(--ink); border-color: var(--ink); color: var(--ink-invert, #FFFFFF); }
.seo-cta-t { font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 8px; }
.seo-cta-p { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.7); margin: 0 0 14px; }
.seo-cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 16px; border-radius: 10px;
  background: var(--accent); color: var(--ink-invert, #FFFFFF);
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background .2s var(--ease);
}
.seo-cta-btn:hover { background: var(--accent-2); }
.seo-cta-tel {
  display: block; margin-top: 12px; text-align: center;
  font-size: 18px; font-weight: 700; color: var(--ink-invert, #FFFFFF); text-decoration: none;
}
.seo-cta-note { display: block; margin-top: 4px; text-align: center; font-size: 12px; color: rgba(255,255,255,.55); }

@media (max-width: 1180px) {
  .seo-cols { grid-template-columns: minmax(0, 1fr) minmax(250px, 310px); gap: 28px; }
}
@media (max-width: 1024px) {
  /* колонка уезжает под текст — так же, как .contacts-grid на этой ширине */
  .seo-cols { grid-template-columns: 1fr; gap: 22px; }
  .seo-aside { position: static; }
}
@media (max-width: 720px) {
  .seo-aside-card { padding: 16px; }
  .seo-cta-t { font-size: 16px; }
}

/* ---------- п.17: плашка типа офиса («ГЛАВНЫЙ ОФИС») ----------
   Было: .ct-office .ct-city выровнен по base line, из-за чего плашка сидела на 1px ниже
   середины строки, а на 1151-1339px «Москва · Видное» + плашка не помещались в строку
   и плашка сваливалась на вторую строку (замер: высота строки 50px вместо 22px, центр
   плашки уезжал на 15px вниз). Стало: выравнивание по центру + в узкой полосе строка
   ужимается ровно настолько, чтобы плашка осталась в одной строке с городом. */
.ct-office .ct-city { align-items: center; }
.ct-office .ct-tag { vertical-align: baseline; }   /* в flex-строке свойство не работает, убираем сдвиг */

@media (min-width: 1151px) and (max-width: 1339px) {
  .ct-office .ct-city { font-size: 14px; gap: 6px; }
  /* специфичность как у правила в nd-fix-h.css, иначе размер плашки не перебить */
  body[class*="new-design"] .ct-office .ct-tag { font-size: 12px; padding: 2px 5px; letter-spacing: .02em; }
}

/* Свёрнутый текст был вдвое ниже правой колонки — под ним зияло ~450px пустоты.
   На десктопе (там, где колонка стоит рядом) показываем больше текста: спойлер
   остаётся, но колонки перестают расходиться по высоте. На телефоне колонка уезжает
   под текст, и прежние 220px там уместнее — правило только для ширины от 1025px.
   07.09.2026, доводка: подбор одного числа (520 → 600) закончен — высоту свёрнутого
   текста на десктопе больше не задаёт константа, её берёт от правой колонки блок
   «доводка 07.09.2026, пп. 2-3» в конце файла. Правило ниже осталось как страховка
   на случай, если flex-раскладка там почему-то не применится. */
@media (min-width: 1025px) {
  .seo-cols .seo-body { max-height: 600px; }
}

/* Вкладки направлений внутри пришедшего блока: на главной их 03.09 переделали в
   сегментный переключатель с подписью-намёком (nd-fix-i.css, п.5), но правило там
   намеренно ограничено body.new-design-home. Чтобы блок на /korea/ выглядел так же,
   как на главной, повторяем оформление здесь.
   07.09.2026, приёмка (дефект 1): у первой редакции селектор был `body.new-design-catalog
   #ndHowTabs` — этот же body стоит на /china/ и /china-new/, и оформление протекло туда
   (замер на /china/ 1440px: подложка rgb(247,247,249), радиус 999px, padding 4px и новая
   строка-подсказка из ::after, которой там не было). Теперь всё заскоплено на
   #ndHow.nd-how--korea — класс печатает сам includes/new-catalog-after.php при выводе блока,
   так что за пределы /korea/ правила не выходят физически. */
html body.new-design-catalog #ndHow.nd-how--korea #ndHowTabs {
  position: relative;
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  /* .hzc > .shell на каталоге — flex-колонка (на главной блок), поэтому inline-flex
     здесь блокифицируется и подложка растягивалась во всю ширину: прижимаем влево */
  align-self: flex-start;
  max-width: 100%; box-sizing: border-box;
  padding: 4px; margin-bottom: 34px;
  background: var(--bg, #F7F7F9);
  border: 1px solid var(--line, #ECECF0);
  border-radius: 999px;
}
html body.new-design-catalog #ndHow.nd-how--korea #ndHowTabs .nd-dirtab {
  background: transparent; border-color: transparent; color: var(--ink-3, #3D3D48);
}
html body.new-design-catalog #ndHow.nd-how--korea #ndHowTabs .nd-dirtab:hover {
  background: var(--bg-card, #FFFFFF); border-color: var(--line, #ECECF0); color: var(--ink, #0E0E12);
}
html body.new-design-catalog #ndHow.nd-how--korea #ndHowTabs .nd-dirtab.is-on {
  background: var(--ink, #0E0E12); border-color: var(--ink, #0E0E12); color: var(--ink-invert, #FFFFFF);
  box-shadow: 0 2px 8px rgba(14, 14, 18, .22);
}
html body.new-design-catalog #ndHow.nd-how--korea #ndHowTabs::after {
  content: "Нажмите вкладку — шаги сменятся под направление";
  position: absolute; left: 4px; top: 100%; margin-top: 7px;
  font: 500 12px/1.25 Montserrat, Inter, system-ui, sans-serif;
  color: var(--muted, #6E6E76); white-space: nowrap; pointer-events: none;
}


/* ---------- дефект 4 (приёмка 07.09.2026): подсказка под вкладками на телефоне ----------
   Полная строка «Нажмите вкладку — шаги сменятся под направление» — 341px при вьюпорте
   375px, на 360-пиксельных телефонах хвост уходил за край. На главной для этого случая
   есть укороченный вариант (nd-mob-fix.css, тот же порог 700px) — повторяем его здесь:
   короткий текст плюс страховка ellipsis, если и он куда-то не влезет. */
@media (max-width: 700px) {
  html body.new-design-catalog #ndHow.nd-how--korea #ndHowTabs { margin-bottom: 30px; }
  html body.new-design-catalog #ndHow.nd-how--korea #ndHowTabs::after {
    content: "Нажмите — сменится направление";
    left: 2px; margin-top: 6px; font-size: 12px;
    max-width: calc(100% - 4px); overflow: hidden; text-overflow: ellipsis;
  }
}

/* ---------- дефект 3 (приёмка 07.09.2026): якорь кнопки «Оставить заявку» ----------
   .seo-cta-btn ведёт на #ndContactsForm; шапка липкая и высотой 69px, поэтому верх формы
   вместе с её заголовком уезжал под шапку (замер: top=0). Запас как у остальных якорей
   нового дизайна (scroll-margin-top: 90px в new-catalog.css) плюс небольшой воздух. */
#ndContactsForm { scroll-margin-top: 96px; }

/* ---------- дефект 5 (приёмка 07.09.2026): колонки SEO-текста ----------
   Было две беды.
   1) justify-content: space-between при жёстких колонках 960px + 360px сливал весь остаток
      ширины в зазор: 56px на 1440px и 120px на 1600px вместо объявленных 48px. Теперь
      остаток ширины целиком забирает правая колонка (fr), а сам текст остаётся в прежних
      960px. Ширину карточек ограничивает max-width: 440px. Зазор в любой ширине ровно 48px.
   2) Правая колонка была выше левой (замер 1440px: 647px против 718px) — тёмная карточка
      призыва свисала ниже кнопки «Развернуть полностью». Левую колонку растягиваем на
      высоту строки сетки, а кнопку прижимаем к её низу: низ кнопки и низ карточки теперь
      на одной линии при любой высоте колонок. Механику спойлера не меняли — это по-прежнему
      max-height с прежней анимацией, только само значение подросло с 520 до 600px (см. выше). */
/* ВАЖНО: правила дописаны в конец файла, то есть НИЖЕ медиа-запросов 1180/1024/720 выше, и при
   равной специфичности перебивают их. Поэтому сами закрыты в min-width: 1181px — иначе две колонки
   остаются и на телефоне (замер первой редакции на 360px: текстовая колонка 10px). */
@media (min-width: 1181px) {
  .seo-cols { justify-content: start; grid-template-columns: minmax(0, 960px) minmax(280px, 1fr); }
  .seo-aside { max-width: 440px; }   /* остаток ширины забирает колонка, но не шире карточки-максимума */
}

@media (min-width: 1025px) {
  .seo-cols .seo-wrap {
    align-self: stretch;                     /* высота строки задаётся более высокой колонкой */
    display: flex; flex-direction: column; align-items: flex-start;
  }
  .seo-cols .seo-h1, .seo-cols .seo-body { width: 100%; }
  .seo-cols .seo-body { margin-bottom: 16px; }   /* прежний воздух до кнопки: был margin-top у кнопки */
  /* 07.09.2026, доводка (п.2): здесь стоял `margin-top: auto` — кнопка прижималась к низу
     колонки. Убрано, см. блок «доводка 07.09.2026, пп. 2-3» в конце файла. */
}


/* ============================================================
   ДОВОДКА 07.09.2026 — хвосты по /korea/ после приёмки.
   ============================================================ */

/* ---------- п.1: кнопка «Развернуть полностью» рисовалась голым текстом ----------
   Замер до правки (1440px, #seoToggle): padding 0px, border none, background прозрачный,
   высота 16px — при том что собственное правило .seo-toggle выше задаёт и пилюлю, и рамку,
   и поля. Причина не в этом файле: в new-catalog.css:64 живёт общий сброс кнопок
   `body[class*="new-design"] button { border:none; background:none; padding:0 }` —
   его специфичность (0,1,1) выше, чем у одноклассового .seo-toggle (0,1,0), и порядок
   подключения файлов тут ни при чём. Поднимаем специфичность своего правила до (0,2,1),
   !important не нужен.
   Ховер повторён отдельно намеренно: без него правило ниже (0,2,1) перебило бы
   border-color у .seo-toggle:hover (0,2,0), и на наведении тёмная пилюля осталась бы
   со светлой рамкой. */
body[class*="new-design"] button.seo-toggle {
  padding: 10px 18px;
  border: 1px solid var(--line, #ECECF0);
  border-radius: 999px;
  background: var(--bg-card, #FFFFFF);
  color: var(--ink, #0E0E12);
}
body[class*="new-design"] button.seo-toggle:hover {
  border-color: var(--ink, #0E0E12);
  background: var(--ink, #0E0E12);
  color: var(--ink-invert, #FFFFFF);
}

/* ---------- пп. 2-3: высота текстовой колонки ----------
   Было: свёрнутый текст жёстко max-height:600px, а кнопку к низу колонки прижимал
   margin-top:auto. Две беды из одного корня — высоту левой колонки задавала константа,
   а правая колонка меняет высоту от ширины экрана (замер: 838.8px на 1280, 775.3px на 1180,
   717.6px на 1440, 675.3px на 1536 и 1600):
   (а) там, где правая колонка выше (узкий десктоп), auto-отступ выдавал пустоту —
       49.7px на 1180px и 113.2px на 1280px, то есть кнопка отрывалась от текста на 66 и
       129px вместо прежних 16;
   (б) там, где выше левая (1536-1600px), она свисала на 50.3px ниже правой, и одним
       числом это не лечится: под 1440px нужно 570px текста, под 1536px — 528px.
   Стало: .seo-body — flex-элемент с нулевой основой (flex-basis: 0). В расчёт собственной
   высоты колонки он тогда не входит, высоту строки сетки задаёт правая колонка, а текст
   растягивается ровно на остаток. Колонки заканчиваются вровень на любой ширине сами
   собой, а кнопка всегда стоит сразу под текстом — прежние 16px воздуха даёт
   margin-bottom у .seo-body.
   Механику спойлера не меняли: развёрнутое состояние возвращает элементу обычное
   auto-поведение и прежний max-height, иначе текст остался бы подрезан по высоте
   правой колонки. Порог 1025px — тот же, что у остальных правил двухколоночной раскладки:
   ниже него колонка уезжает под текст и делить нечего. */
@media (min-width: 1025px) {
  .seo-cols .seo-wrap .seo-body {
    flex: 1 1 0;
    min-height: 420px;   /* пол: если правая колонка вдруг окажется низкой, текст не схлопнется */
    max-height: none;    /* высоту диктует сетка — прежние 600px больше не нужны */
  }
  /* специфичность (0,4,0) — выше, чем у `.seo-wrap.open .seo-body` (0,3,0) и чем у правила
     свёрнутого состояния над этой строкой, иначе развернуть текст было бы нечем */
  .seo-cols .seo-wrap.open .seo-body { flex: 0 0 auto; min-height: 0; max-height: 3000px; }
  .seo-cols .seo-toggle { margin-top: 0; }   /* воздух до кнопки даёт margin-bottom текста */
}