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

/* Скрываем старый Bitrix-компонент карточки авто (catalog.element/element_v2) */
body.new-design-product .page__catalog-element { display: none !important; }

/* === PRODUCT page (new-design) === */
body.new-design-product .product-hero { padding: 28px 0 18px; }

body.new-design-product .pd-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-top: 8px; }

body.new-design-product .pd-h1 { font-size: 34px; line-height: 1.1; letter-spacing: -.02em; font-weight: 700; margin: 0 0 12px; color: var(--ink, #0e0e12); }

/* 07.09.2026, аудит п.17: было color:#b3b3bd — контраст 2.08 к белому при кегле 12.5 px
   (норма 4.5). Стало --muted #6E6E76 = 5.05, тот же серый из канона. */
body.new-design-product .pd-subline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--muted, #6E6E76); font-size: 14px; font-weight: 500; }

body.new-design-product .pd-subline-sep { width: 4px; height: 4px; border-radius: 999px; background: #b8b8b0; }

body.new-design-product .pd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

body.new-design-product .pd-tag { padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line, #e6e6df); font-size: 12px; font-weight: 600; color: var(--ink-3, #6b6b62); display: inline-flex; align-items: center; gap: 4px; }

body.new-design-product .pd-tag .k { color: #9a9a90; font-weight: 500; margin-right: 4px; }

body.new-design-product .pd-hero-section { padding-bottom: 28px; }

body.new-design-product .pd-hero-grid { display: grid; grid-template-columns: 1fr 540px; gap: 28px; align-items: start; }

body.new-design-product .pd-gallery .pd-main-photo { display: block; aspect-ratio: 16/10; overflow: hidden; border-radius: 14px; background: var(--line-2, #f0f0f3); }

body.new-design-product .pd-gallery .pd-main-photo img { width: 100%; height: 100%; object-fit: cover; }

body.new-design-product .pd-no-photo { display: flex; align-items: center; justify-content: center; color: #9a9a90; }

body.new-design-product .pd-thumbs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 8px; }

body.new-design-product .pd-thumb { display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: 8px; background: var(--line-2, #f0f0f3); }

body.new-design-product .pd-thumb img { width: 100%; height: 100%; object-fit: cover; }

body.new-design-product .pd-thumb-more { display: flex; align-items: center; justify-content: center; background: var(--ink, #0e0e12); color: #fff !important; font-weight: 700; font-size: 14px; text-decoration: none !important; }

body.new-design-product .pd-order { background: #fff; border: 1px solid var(--line, #e6e6df); border-radius: 16px; padding: 22px; box-shadow: 0 12px 28px -16px rgba(14,14,16,.1); height: fit-content; position: sticky; top: 18px; }

body.new-design-product .pd-price-lbl { font-size: 12px; font-weight: 600; color: #9a9a90; text-transform: uppercase; letter-spacing: .05em; }

body.new-design-product .pd-price-num { font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--ink, #0e0e12); margin: 4px 0 6px; }

body.new-design-product .pd-price-hint { font-size: 12.5px; color: var(--ink-3, #6b6b62); margin-bottom: 18px; }

body.new-design-product .pd-cta-primary { display: flex; align-items: center; justify-content: center; padding: 14px 18px; background: var(--accent, #E11D2E) !important; color: #fff !important; border-radius: 12px; font-weight: 700; font-size: 14px; text-decoration: none !important; box-shadow: 0 2px 0 var(--accent-2, #b8152b); transition: transform .1s ease; margin-bottom: 8px; }

body.new-design-product .pd-cta-primary:hover { transform: translateY(1px); box-shadow: 0 1px 0 var(--accent-2, #b8152b); }

body.new-design-product .pd-cta-secondary { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; background: var(--bg, #f7f7f9) !important; color: var(--ink, #0e0e12) !important; border-radius: 12px; font-weight: 700; font-size: 14px; text-decoration: none !important; }

body.new-design-product .pd-trust { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line, #e6e6df); }

body.new-design-product .pd-trust-it { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3, #6b6b62); }

body.new-design-product .pd-section-h { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 32px 0 16px; }

body.new-design-product .pd-specs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line, #e6e6df); border: 1px solid var(--line, #e6e6df); border-radius: 12px; overflow: hidden; }

body.new-design-product .pd-spec { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: #fff; }

body.new-design-product .pd-spec-k { font-size: 12px; color: #9a9a90; }

body.new-design-product .pd-spec-v { font-size: 14px; font-weight: 600; color: var(--ink, #0e0e12); }

body.new-design-product .pd-desc { margin-top: 24px; padding: 22px; background: #fff; border: 1px solid var(--line, #e6e6df); border-radius: 14px; }

body.new-design-product .pd-desc-body { font-size: 14px; line-height: 1.6; color: #3a3a36; }

@media (max-width: 1280px) {
  body.new-design-product .pd-hero-grid { grid-template-columns: 1fr 460px; }
}

@media (max-width: 980px) {
  body.new-design-product .pd-hero-grid { grid-template-columns: 1fr; }
  body.new-design-product .pd-order { position: static; }
  body.new-design-product .pd-thumbs { grid-template-columns: repeat(4, 1fr); }
  body.new-design-product .pd-specs-grid { grid-template-columns: repeat(2, 1fr); }
  body.new-design-product .pd-h1 { font-size: 24px; }
}


/* ---- 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-product.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() там сменила бы цвет. Заменено в файле: 329. */
/* ============ PRODUCT PAGE ============ */

/* Контейнер: max-width 1520px (дублируется из new-catalog.css на случай если он не подгружен) */
body.new-design-product .shell { max-width: 1520px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1280px) { body.new-design-product .shell { padding: 0 32px; } }
@media (min-width: 1600px) { body.new-design-product .shell { padding: 0 40px; } }

/* Sticky mini-bar */
.pd-mini {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--ink, #0E0E12); color: var(--ink-invert, #FFFFFF);
  transform: translateY(-100%);
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.pd-mini.show { transform: translateY(0); }
.pd-mini-in { display: flex; align-items: center; gap: 16px; padding: 10px 0; }
.pd-mini-thumb {
  width: 56px; height: 38px; border-radius: 6px;
  background-color: var(--ink-2, #1E1E24);
  background-image: linear-gradient(135deg, var(--ink-2, #1E1E24), var(--ink-3, #3D3D48));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.pd-mini-info { flex: 1; min-width: 0; }
.pd-mini-info .mn-t { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-mini-info .mn-s { font-size: 12px; color: var(--muted, #6E6E76); font-family: 'JetBrains Mono', monospace; }
.pd-mini-price { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 18px; }
.pd-mini-btn {
  background: var(--accent, #E11D2E); color: var(--ink-invert, #FFFFFF); text-decoration: none;
  padding: 11px 22px; border-radius: 8px; font-weight: 700; font-size: 14px;
  white-space: nowrap; transition: background .2s;
}
.pd-mini-btn:hover { background: var(--accent-2, #B8152B); }

/* Breadcrumbs */
.pd-crumbs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 20px 0 14px; font-size: 12px; color: var(--muted, #6E6E76);
}
.pd-crumbs a { color: var(--muted, #6E6E76); text-decoration: none; transition: color .15s; }
.pd-crumbs a:hover { color: var(--ink, #0E0E12); }
.pd-crumbs .home { display: inline-flex; align-items: center; gap: 5px; }
.pd-crumbs .sep { color: #CECED4; }
.pd-crumbs .cur { color: var(--ink, #0E0E12); font-weight: 600; }

/* Meta strip */
.pd-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 10px; }
.m-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted, #6E6E76); font-weight: 500;
  padding: 6px 10px; border: 1px solid var(--line, #ECECF0); border-radius: 100px;
  background: var(--bg-card, #FFFFFF);
}
.m-chip.live { color: var(--success, #1E8C4A); border-color: rgba(30,140,74,.3); background: rgba(30,140,74,.06); font-weight: 600; }
.m-chip.live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success, #1E8C4A); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.m-share { margin-left: auto; display: flex; gap: 8px; }
.m-share button {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink, #0E0E12);
  background: var(--bg-card, #FFFFFF); border: 1px solid var(--line, #ECECF0); border-radius: 100px;
  padding: 7px 12px; cursor: pointer; transition: border-color .15s;
}
.m-share button:hover { border-color: var(--ink, #0E0E12); }

/* Title row */
.pd-title-row {
  display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 24px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line, #ECECF0);
}
/* Main title — full SEO name, Montserrat, tight single block with wrap */
.pd-h1 {
  margin: 0; color: var(--ink, #0E0E12);
  font-family: 'Montserrat', 'Manrope', sans-serif; font-weight: 700;
  font-size: 38px; line-height: 1.12; letter-spacing: -.02em;
  text-wrap: balance;
}

/* Subline — technical monospace descriptor, one visual system */
.pd-subline {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 500; color: var(--muted, #6E6E76);
  text-transform: uppercase; letter-spacing: .04em;
  margin-top: 8px;
}
.pd-subline .pd-sl-km { color: var(--ink, #0E0E12); font-weight: 600; }
.pd-subline .pd-sl-from { color: var(--ink, #0E0E12); }
.pd-subline-sep {
  width: 3px; height: 3px; border-radius: 50%; background: #CECED4;
  display: inline-block;
}

.pd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.pd-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--ink, #0E0E12);
  padding: 5px 10px; border: 1px solid var(--line, #ECECF0); border-radius: 4px; background: var(--bg-card, #FFFFFF);
}
.pd-tag .k { color: var(--muted, #6E6E76); font-family: 'JetBrains Mono', monospace; font-weight: 500; margin-right: 2px; }
.pd-tag.brand { background: var(--bg, #F7F7F9); }
.pd-tag.good { color: var(--success, #1E8C4A); border-color: rgba(30,140,74,.3); background: rgba(30,140,74,.06); }
.pd-tag.warn { color: #C07A00; border-color: rgba(192,122,0,.3); background: rgba(192,122,0,.06); }
.pd-actions-top { display: flex; gap: 8px; }
.pd-iconbtn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink, #0E0E12);
  background: var(--bg-card, #FFFFFF); border: 1px solid var(--line, #ECECF0); border-radius: 8px;
  padding: 9px 14px; cursor: pointer; transition: border-color .15s;
}
.pd-iconbtn:hover { border-color: var(--ink, #0E0E12); }

/* ========= HERO ========= */
/* Панель заказа: ширина увеличена ещё на 20% (было 530, стало 636).
   align-items: start — нужно для работы position:sticky внутри grid. */
.pd-hero {
  display: grid; grid-template-columns: 1fr 540px; gap: 28px;
  padding: 28px 0 40px; align-items: start;
}

/* Hero-grid (новый дизайн product) */
.pd-hero-grid {
  display: grid; grid-template-columns: 1fr 540px; gap: 28px;
  padding: 28px 0 0; align-items: start;
}
@media (max-width: 1280px) { .pd-hero-grid { grid-template-columns: 1fr 460px; } }
@media (max-width: 1024px) { .pd-hero-grid { grid-template-columns: 1fr; } }

/* Галерея фото на странице авто */
.pd-gallery { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pd-main-photo {
  display: block; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden;
  background: var(--ink-2, #1E1E24); position: relative; cursor: zoom-in;
}
.pd-main-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity .2s ease;
}
.pd-main-photo.pd-no-photo {
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5); font-size: 14px;
}

/* Миниатюры — 2 ряда × 8 колонок = 16 ячеек */
.pd-thumbs {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  grid-template-rows: repeat(2, 1fr) !important;
  gap: 6px;
}
.pd-thumb {
  display: block; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden;
  background: var(--ink-2, #1E1E24); position: relative;
  border: 2px solid transparent; transition: border-color .15s;
  cursor: pointer;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb:hover,
.pd-thumb.is-active { border-color: var(--accent, #E11D2E); }
.pd-thumb-more { position: relative; }
.pd-thumb-more img { filter: brightness(.45) blur(1px); }
.pd-thumb-more-count {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-invert, #FFFFFF); font-weight: 700; font-size: 18px;
  font-family: 'JetBrains Mono', monospace; letter-spacing: -.02em;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* Sticky-панель: остаётся видна при прокрутке.
   ВАЖНО: родитель `.page__catalog` в template_styles.css имеет `overflow: hidden`,
   что ломает sticky-context внутри. Снимаем overflow для new-design-product. */
body.new-design-product .page__catalog,
body.new-design-product .catalog-korean,
body.new-design-product main.content,
body.new-design-product .pd-hero-section,
body.new-design-product .catalog-element--section { overflow: visible !important; }
body.new-design-product .pd-order { position: sticky !important; top: 20px !important; align-self: start; z-index: 5; }
/* Sticky левая панель оценки — сделана по аналогии с .pd-order, чтобы при прокрутке
   списка отметок / схемы повреждений итоговый скоринг оставался виден. */
body.new-design-product .pd-check { overflow: visible; }
body.new-design-product .pdc-score { position: sticky !important; top: 20px !important; align-self: start; z-index: 4; }
@media (max-width: 1024px) {
  body.new-design-product .pd-order { position: static !important; }
  body.new-design-product .pdc-score { position: static !important; }
}

/* Отключаем sticky шапку на странице карточки — у нас есть своя плавающая панель цены справа.
   Header / topbar становятся обычными (прокручиваются вместе со страницей). */
body.new-design-product .header,
body.new-design-product .topbar { position: static !important; top: auto !important; }

/* Gallery — main on top, thumbnails below (2 ряда × 4 колонки) */
.gal { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gal-thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding-bottom: 2px;
}
.gal-thumbs::-webkit-scrollbar { height: 0; }
.gal-thumb {
  position: relative; aspect-ratio: 4/3; border-radius: 8px; cursor: pointer;
  background: linear-gradient(135deg, var(--ink-2, #1E1E24), var(--ink-3, #3D3D48));
  border: 2px solid transparent; transition: border-color .15s;
  overflow: hidden; scroll-snap-align: start;
}
.gal-thumb.active { border-color: var(--accent, #E11D2E); }
.gal-thumb:hover { border-color: rgba(225,29,46,.5); }
.gal-thumb .tn-lbl {
  position: absolute; bottom: 4px; left: 4px; right: 4px;
  font-size: 12px; color: var(--ink-invert, #FFFFFF); font-weight: 600; text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  text-transform: uppercase; letter-spacing: .04em;
}
.gal-thumb.more {
  background: var(--bg, #F7F7F9); border: 1px dashed #CECED4; color: var(--ink, #0E0E12);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 15px;
}

.gal-main {
  position: relative; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden;
  background: linear-gradient(135deg, var(--ink-2, #1E1E24), var(--ink-3, #3D3D48));
  display: flex; align-items: center; justify-content: center;
}
.gm-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: rgba(255,255,255,.4);
}
.gm-placeholder .car-silh { width: 160px; height: auto; }
.gm-placeholder span { font-size: 12px; font-family: 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.gal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.9); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink, #0E0E12); transition: background .15s;
}
.gal-arrow:hover { background: var(--bg-card, #FFFFFF); }
.gal-arrow.prev { left: 16px; }
.gal-arrow.next { right: 16px; }
.gal-counter {
  position: absolute; bottom: 16px; left: 16px;
  background: rgba(14,14,18,.75); color: var(--ink-invert, #FFFFFF);
  padding: 6px 12px; border-radius: 100px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.gal-counter .c-tot { color: rgba(255,255,255,.6); }
.gal-fs {
  position: absolute; bottom: 16px; right: 16px;
  background: rgba(14,14,18,.75); color: var(--ink-invert, #FFFFFF); border: none; cursor: pointer;
  padding: 7px 12px; border-radius: 100px;
  font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
  backdrop-filter: blur(8px); transition: background .15s;
}
.gal-fs:hover { background: rgba(14,14,18,.9); }

/* ========= ORDER PANEL ========= */
.pd-order {
  background: var(--bg-card, #FFFFFF); border: 1px solid var(--line, #ECECF0); border-radius: 14px;
  padding: 22px; position: sticky; top: 20px; align-self: start;
  display: flex; flex-direction: column; gap: 14px;
}
.po-status {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  color: var(--success, #1E8C4A); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 10px; background: rgba(30,140,74,.08); border-radius: 100px;
}
.po-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success, #1E8C4A); animation: pulse 2s infinite; }

.po-city-switch { font-size: 13px; color: var(--muted, #6E6E76); }
.po-city-switch select {
  font: inherit; font-weight: 700; color: var(--ink, #0E0E12);
  background: transparent; border: none; border-bottom: 1.5px dashed var(--ink, #0E0E12);
  padding: 0 2px; cursor: pointer;
}

.po-price-main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; row-gap: 2px; }
/* 2026-09-09: цена авто в Корее (воны) рядом с рублёвой — мелкая, приглушённая,
   при нехватке ширины переносится на свою строку (flex-wrap выше). */
.po-price-krw { font-size: 13px; line-height: 1.2; color: var(--muted, #6E6E76); font-weight: 500; white-space: nowrap; }
.po-price-krw b { font-weight: 700; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
.po-price {
  font-family: 'Montserrat', 'Manrope', sans-serif; font-weight: 700;
  font-size: 40px; line-height: 1.05; color: var(--ink, #0E0E12);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.po-price .cur { font-size: 24px; color: var(--muted, #6E6E76); font-family: inherit; font-weight: 700; }
.po-price-lbl { font-size: 12px; color: var(--muted, #6E6E76); line-height: 1.5; margin-top: -6px; }

.po-price-alt {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg, #F7F7F9); border-radius: 8px; padding: 10px 12px;
  font-size: 12px;
}
.po-price-alt .pa-l { color: var(--muted, #6E6E76); font-weight: 500; }
.po-price-alt .pa-r { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--ink, #0E0E12); }
.po-price-alt .pa-save { color: var(--success, #1E8C4A); font-size: 12px; margin-left: 8px; font-weight: 700; }

.po-breakdown { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line, #ECECF0); padding-top: 12px; }
.po-br-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; font-size: 12px;
}
.po-br-row .l { color: var(--muted, #6E6E76); }
.po-br-row .r { font-family: 'JetBrains Mono', monospace; font-weight: 500; color: var(--ink, #0E0E12); }
.po-br-row.total {
  border-top: 1px dashed #CECED4; margin-top: 6px; padding-top: 10px;
  font-size: 14px;
}
.po-br-row.total .l { color: var(--ink, #0E0E12); font-weight: 700; }
.po-br-row.total .r { font-weight: 700; font-size: 15px; }

.po-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.po-cta .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; text-decoration: none; cursor: pointer;
  padding: 14px 18px; border-radius: 10px; font-weight: 700; font-size: 14px;
  transition: all .15s;
}
.po-cta .btn-primary { background: var(--accent, #E11D2E); color: var(--ink-invert, #FFFFFF); border: 1.5px solid var(--accent, #E11D2E); }
.po-cta .btn-primary:hover { background: var(--accent-2, #B8152B); border-color: var(--accent-2, #B8152B); }
.po-cta .btn-ghost { background: var(--bg-card, #FFFFFF); color: var(--ink, #0E0E12); border: 1.5px solid var(--line, #ECECF0); }
.po-cta .btn-ghost:hover { border-color: var(--ink, #0E0E12); }

.po-mes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.po-mes a {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  text-decoration: none; font-size: 12px; font-weight: 600;
  padding: 9px 6px; border-radius: 8px; transition: opacity .15s;
  white-space: nowrap;
}
.po-mes a:hover { opacity: .85; }
.po-mes .m-tg { background: #229ED9; color: var(--ink-invert, #FFFFFF); }
.po-mes .m-wa { background: #25D366; color: var(--ink-invert, #FFFFFF); }
.po-mes .m-mx { background: linear-gradient(135deg, #1F7AE0, #4E3DF0); color: var(--ink-invert, #FFFFFF); }

/* ===== Contact manager dropdown ===== */
.po-contact { position: relative; width: 100%; }
.po-contact-btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; border: 0;
}
.po-contact-btn .po-contact-chev {
  margin-left: auto; transition: transform .2s ease; opacity: .8;
}
.po-contact.open .po-contact-chev { transform: rotate(180deg); }

.po-contact-menu {
  margin-top: 10px;
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--line, #ececf0);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 8px 24px -8px rgba(14,14,18,.12), 0 2px 6px -2px rgba(14,14,18,.06);
  animation: pocMenuIn .18s ease-out;
}
@keyframes pocMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.po-contact-hd {
  font-size: 12px; font-weight: 600; color: var(--muted, #6E6E76);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 8px 10px 6px;
}
.po-contact-sep {
  height: 1px; background: var(--line, #ececf0);
  margin: 4px 8px;
}
.poc-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s ease;
}
.poc-opt:hover { background: var(--bg, #F7F7F9); }
.poc-ico {
  width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--ink-invert, #FFFFFF);
}
.poc-tg .poc-ico { background: #229ED9; }
.poc-wa .poc-ico { background: #25D366; }
.poc-mx .poc-ico { background: linear-gradient(135deg, #1F7AE0, #4E3DF0); }
.poc-call .poc-ico { background: var(--ink, #0E0E12); }
.poc-form .poc-ico { background: var(--bg, #F7F7F9); color: var(--ink, #0E0E12); border: 1px solid var(--line, #ececf0); }
.poc-txt { flex: 1 1 auto; min-width: 0; }
.poc-t { font-size: 13px; font-weight: 600; color: var(--ink, #0E0E12); line-height: 1.2; }
.poc-s { font-size: 12px; color: var(--muted, #6E6E76); line-height: 1.3; margin-top: 2px; }
.poc-arr {
  font-size: 14px; color: var(--muted, #6E6E76); font-weight: 500;
  transition: transform .15s ease;
  font-family: 'JetBrains Mono', monospace;
}
.poc-opt:hover .poc-arr { transform: translateX(2px); color: var(--ink, #0E0E12); }
.poc-form.active { background: var(--bg, #F7F7F9); }

.po-contact-form {
  margin-top: 6px;
  padding: 10px;
  background: var(--bg, #F7F7F9);
  border-radius: 8px;
  display: grid; gap: 8px;
  animation: pocMenuIn .18s ease-out;
}
.pcf-row input,
.pcf-row select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line, #ececf0);
  border-radius: 8px;
  background: var(--bg-card, #FFFFFF);
  font-family: inherit;
  font-size: 13px;
  color: var(--ink, #0E0E12);
  outline: none;
  transition: border-color .12s ease;
}
.pcf-row input:focus,
.pcf-row select:focus {
  border-color: var(--ink, #0E0E12);
}
.pcf-submit { width: 100%; justify-content: center; margin-top: 2px; }
.pcf-legal {
  font-size: 12px; color: var(--muted, #6E6E76); line-height: 1.4;
  text-align: center;
}
.pcf-legal a { color: inherit; text-decoration: underline; }
.pcf-done {
  padding: 14px 10px; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--success, #1E8C4A);
}

.po-credit {
  display: flex; gap: 10px; align-items: center; justify-content: center; text-align: left;
  background: var(--bg, #F7F7F9); border-radius: 8px; padding: 10px 12px;
}
.po-credit .c-icon { color: var(--muted, #6E6E76); flex-shrink: 0; margin-top: 1px; }
.po-credit .c-txt { font-size: 12px; color: var(--muted, #6E6E76); line-height: 1.45; }
.po-credit .c-txt b { color: var(--ink, #0E0E12); font-weight: 700; }
.po-credit .c-txt a { color: var(--accent, #E11D2E); text-decoration: none; font-weight: 600; }

.po-trust {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  border-top: 1px solid var(--line, #ECECF0); padding-top: 16px; margin-top: 2px;
}
.po-tr {
  display: flex; align-items: center; gap: 10px;
  /* +20% от прежних 10px → 12px */
  font-size: 12px; color: var(--muted, #6E6E76); line-height: 1.35;
}
/* SVG-иконки тоже +20% (16→19) */
.po-tr svg { color: var(--ink, #0E0E12); flex-shrink: 0; width: 19px !important; height: 19px !important; }
/* +20% от прежних 11px → 13px */
.po-tr b { display: block; color: var(--ink, #0E0E12); font-weight: 700; font-size: 13px; }

/* ========= TABS ========= */
.pd-tabs {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg, #F7F7F9); border-bottom: 1px solid var(--line, #ECECF0);
  /* 07.09.2026, аудит п.8: было `margin: 0 calc(50% - 50vw); padding: 0 calc(50vw - 50%)`.
     Единица vw считает ширину классической полосы прокрутки, поэтому блок оказывался на 8 px
     шире окна и ВСЯ страница ездила вбок на каждом ПК с полосой прокрутки (Windows).
     Полоса вкладок — прямой ребёнок main.content, её ширина 100% и так во всю страницу,
     растягивать через vw незачем. */
  margin: 0; padding: 0;
}
.pd-tabs-in { display: flex; gap: 0; overflow-x: auto; }
.pd-tabs-in::-webkit-scrollbar { display: none; }
.pd-tab {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 16px 20px; color: var(--muted, #6E6E76); text-decoration: none;
  font-size: 13px; font-weight: 600;
  border-bottom: 2px solid transparent; transition: all .15s;
}
.pd-tab:first-child { padding-left: 0; }
.pd-tab .n { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; color: #CECED4; }
.pd-tab:hover { color: var(--ink, #0E0E12); }
.pd-tab.active { color: var(--ink, #0E0E12); border-bottom-color: var(--accent, #E11D2E); }
.pd-tab.active .n { color: var(--accent, #E11D2E); }

/* ========= SECTIONS ========= */
.pd-section { padding: 32px 0; border-bottom: 1px solid var(--line, #ECECF0); scroll-margin-top: 60px; }
.pd-sec-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; padding-bottom: 20px; flex-wrap: wrap;
}
.pd-sec-head > div:first-child { min-width: 0; flex: 1 1 300px; }
.pd-sec-head h2 {
  font-family: 'Instrument Serif', serif; font-weight: 400;
  font-size: 36px; line-height: 1.08; letter-spacing: -.02em;
  margin: 0 0 8px; color: var(--ink, #0E0E12);
  text-wrap: balance;
}
.pd-sec-head h2 em { font-style: italic; color: var(--accent, #E11D2E); }
.pd-sec-sub { font-size: 13px; color: var(--muted, #6E6E76); }
.pd-sec-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink, #0E0E12); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}

/* ========= SPECS ========= */
.pd-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line, #ECECF0); border: 1px solid var(--line, #ECECF0); border-radius: 12px; overflow: hidden; }
.pd-spec { background: var(--bg-card, #FFFFFF); padding: 20px; display: flex; flex-direction: column; gap: 2px; }
.pd-spec .sp-ico { color: var(--muted, #6E6E76); margin-bottom: 8px; }
.pd-spec .sp-lbl { font-size: 12px; color: var(--muted, #6E6E76); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.pd-spec .sp-val { font-size: 18px; font-weight: 700; color: var(--ink, #0E0E12); line-height: 1.1; margin-top: 2px; }
.pd-spec .sp-sub { font-size: 12px; color: var(--muted, #6E6E76); font-family: 'JetBrains Mono', monospace; margin-top: 4px; }

/* ========= CHECK ========= */
/* 2 колонки: слева — скоринг (узкая), справа — схема повреждений */
.pd-check { display: grid; grid-template-columns: 380px 1fr; gap: 28px; align-items: start; }
.pdc-score {
  background: var(--ink, #0E0E12); color: var(--ink-invert, #FFFFFF); border-radius: 14px; padding: 22px;
  display: flex; flex-direction: column; gap: 18px;
  align-self: start;
}
.pdc-score-top {
  display: grid; grid-template-columns: 120px 1fr; gap: 16px;
  align-items: center;
  padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.pdc-score-ring { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.pdc-score-ring .ring-bg { stroke: rgba(255,255,255,.1); }
.pdc-score-ring .ring-fg { stroke: #2FB666; transform: rotate(-90deg); transform-origin: center; }
.pdc-score-val {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: 'Instrument Serif', serif; text-align: center;
}
.pdc-score-val .v { font-size: 34px; line-height: 1; }
.pdc-score-val .m { font-size: 12px; color: rgba(255,255,255,.5); font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; margin-top: 4px; }
.pdc-score-meta { min-width: 0; }
.pdc-score-t { font-weight: 700; font-size: 15px; line-height: 1.25; margin-bottom: 4px; }
.pdc-score-s { font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.5; }
.pdc-score-a {
  color: #2FB666; font-size: 12px; font-weight: 600; text-decoration: none;
  text-align: center; padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.08); margin-top: auto;
  padding-top: 14px;
}
.pdc-score-a:hover { color: #3FD178; }

.pdc-score-facts { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pdc-score-facts .pdc-ck { align-items: flex-start; }
.pdc-score-facts .pdc-ck .mark {
  width: 20px; height: 20px; background: rgba(47,182,102,.12); color: #5ED892;
}
.pdc-score-facts .pdc-ck.bad .mark { background: rgba(240,180,60,.14); color: #F0B43C; }
.pdc-score-facts .pdc-ck.info .mark { background: rgba(160,170,200,.16); color: #B8C2D8; }
.pdc-score-facts .pdc-ck .t { color: var(--ink-invert, #FFFFFF); font-size: 12.5px; }
.pdc-score-facts .pdc-ck .s { color: rgba(255,255,255,.5); font-size: 12px; }
.pdc-score-facts .pdc-ck.info .t { color: rgba(255,255,255,.92); }

.pdc-body { display: grid; grid-template-columns: 1fr; gap: 20px; }
.pdc-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
.pdc-ck { display: flex; gap: 10px; align-items: flex-start; }
.pdc-ck .mark {
  width: 22px; height: 22px; border-radius: 50%; background: rgba(30,140,74,.1);
  color: var(--success, #1E8C4A); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.pdc-ck.bad .mark { background: rgba(192,122,0,.1); color: #C07A00; }
.pdc-ck.info .mark { background: rgba(120,130,160,.1); color: var(--muted, #6E6E76); }

/* === Price history arrow (как на боевом) === */
.price-history-arrow { display: none; position: relative; vertical-align: middle; margin-left: 10px; font-size: 14px; font-weight: 700; line-height: 1; padding: 5px 9px 5px 7px; border-radius: 8px; cursor: help; user-select: none; }
.price-history-arrow.visible { display: inline-flex; align-items: center; gap: 4px; }
.price-history-arrow.down { background: rgba(39,174,96,.14); color: #1e8449; }
.price-history-arrow.up   { background: rgba(192,57,43,.14); color: #922b21; }
.price-history-arrow .ph-pct { font-size: 13px; }
.price-history-arrow .ph-tooltip { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; background: #2c3e50; color: var(--ink-invert, #FFFFFF); padding: 10px 14px; border-radius: 8px; font-size: 12px; font-weight: 400; line-height: 1.5; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.25); display: none; z-index: 1000; }
.price-history-arrow:hover .ph-tooltip { display: block; }
.price-history-arrow .ph-tooltip .row { display: flex; justify-content: space-between; gap: 20px; }
.price-history-arrow .ph-tooltip .row .k { opacity: .7; }
.price-history-arrow .ph-tooltip .row .v { font-weight: 600; }
.price-history-arrow .ph-tooltip .ph-list { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.15); font-size: 12px; }

/* m-chip как ссылка (на оригинал Encar) */
.m-chip-link { text-decoration: none; transition: border-color .15s, background .15s; cursor: pointer; }
.m-chip-link:hover { border-color: var(--ink, #0E0E12); background: rgba(14,14,18,.04); }


/* === VIN tooltip — собственный класс .nd-vin чтобы НЕ конфликтовал с боевым .vin-value */
body.new-design-product .nd-vin {
  cursor: help;
  border-bottom: 1px dotted #999;
  font-family: 'JetBrains Mono', monospace;
  font-size: inherit;
}
body.new-design-product .nd-vin:hover { color: #1565C0; }
/* В шапке (pd-tag-vin) — мельче шрифт + не обрезать */
body.new-design-product .pd-tag-vin .nd-vin {
  font-size: 12px;
  letter-spacing: 0;
  white-space: nowrap;
  border-bottom-color: rgba(255,255,255,.4);
}
body.new-design-product .pd-tag-vin {
  flex-shrink: 0;
  max-width: none;
}
.pdc-ck .t { font-size: 13px; font-weight: 700; color: var(--ink, #0E0E12); }
.pdc-ck .s { font-size: 12px; color: var(--muted, #6E6E76); margin-top: 1px; }

.pdc-diagram { background: var(--bg, #F7F7F9); border-radius: 12px; padding: 22px; border: 1px solid var(--line, #ECECF0); }
.pdc-diagram-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-bottom: 14px; }
.pdc-diagram-head .t { font-size: 13px; font-weight: 700; color: var(--ink, #0E0E12); }
.pdc-count { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted, #6E6E76); font-weight: 500; }

/* Legend row — 6 damage types */
.pdc-legend {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px; background: var(--bg-card, #FFFFFF); border: 1px solid var(--line, #ECECF0); border-radius: 10px;
  margin-bottom: 18px;
}
.pdl {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--ink, #0E0E12);
  padding: 5px 10px 5px 5px; border-radius: 100px;
  background: var(--bg, #F7F7F9); transition: background .15s;
  cursor: default;
}
.pdl-m {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', 'Manrope', sans-serif; font-weight: 700; font-size: 12px;
  color: var(--ink-invert, #FFFFFF); flex-shrink: 0;
}
.pdl-m.type-X { background: var(--accent, #E11D2E); }
.pdl-m.type-W { background: #1D7AD6; }
.pdl-m.type-C { background: #D97706; }
.pdl-m.type-A { background: #1D7AD6; }
.pdl-m.type-U { background: #7A3FB5; }
.pdl-m.type-T { background: #C2410C; }
.pdl[data-type="A"] .pdl-m { background: #2E8CE6; }

.pdc-svg { position: relative; }
.pdc-svg svg { width: 100%; height: auto; max-height: 460px; display: block; }
.pdc-marker { cursor: pointer; transition: transform .15s; transform-origin: center; transform-box: fill-box; }
.pdc-marker:hover { transform: scale(1.2); }
.pdc-marker .mk-ring { fill: var(--ink-invert, #FFFFFF); stroke: var(--ink-invert, #FFFFFF); stroke-width: 2; }

/* View switcher */
.pdc-view-sw {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--bg, #F7F7F9); border-radius: 10px; margin-bottom: 14px;
}
.pdc-vsw {
  appearance: none; border: 0; background: transparent;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--muted, #6E6E76); padding: 8px 16px; border-radius: 8px;
  cursor: pointer; transition: all .15s; letter-spacing: .01em;
}
.pdc-vsw:hover { color: var(--ink, #0E0E12); }
.pdc-vsw.active {
  background: var(--bg-card, #FFFFFF); color: var(--ink, #0E0E12);
  box-shadow: 0 1px 2px rgba(14,14,18,.06), 0 0 0 1px rgba(14,14,18,.04);
}

/* Real blueprint map — two side-by-side projections */
.pdc-map {
  position: relative; width: 100%;
  background: var(--bg, #F7F7F9); border-radius: 12px;
  padding: 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.pdc-map-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pdc-map-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600; color: var(--muted, #6E6E76);
  letter-spacing: .1em; text-transform: uppercase; text-align: center;
}
.pdc-map-inner {
  position: relative; width: 100%;
  aspect-ratio: 1456 / 1364;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card, #FFFFFF); border-radius: 8px; padding: 8px;
  border: 1px solid var(--line-2, #F0F0F3);
}
.pdc-map-img {
  display: block;
  max-width: 100%; max-height: 100%;
  width: 100%; height: 100%;
  object-fit: contain;
}
.pdc-mk {
  position: absolute; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--ink-invert, #FFFFFF);
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 800;
  color: var(--ink-invert, #FFFFFF); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.08);
  transition: transform .15s; z-index: 2;
}
.pdc-mk:hover { transform: translate(-50%, -50%) scale(1.15); z-index: 3; }
.pdc-mk[data-type="A"] { background: #2E8CE6; }
.pdc-mk[data-type="U"] { background: #7A3FB5; }
.pdc-mk[data-type="T"] { background: #C2410C; }
.pdc-mk[data-type="X"] { background: var(--accent, #E11D2E); }
.pdc-mk[data-type="W"] { background: #EA580C; }
.pdc-mk[data-type="C"] { background: #CA8A04; }
/* pulse ring */
.pdc-mk::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid currentColor; opacity: .35;
  animation: pdcPulse 2.2s ease-out infinite;
}
@keyframes pdcPulse {
  0% { transform: scale(.6); opacity: .5; }
  80% { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

.pdc-tip {
  position: absolute; pointer-events: none; opacity: 0;
  background: var(--ink, #0E0E12); color: var(--ink-invert, #FFFFFF); padding: 10px 14px; border-radius: 8px;
  font-size: 12px; min-width: 180px; max-width: 240px;
  transition: opacity .15s; z-index: 5;
  transform: translate(-50%, -110%);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.pdc-tip.show { opacity: 1; }
.pdc-tip::after {
  content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; background: var(--ink, #0E0E12); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.pdc-tip-type { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.pdc-tip-mk {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; color: var(--ink-invert, #FFFFFF);
}
.pdc-tip-part { color: rgba(255,255,255,.9); margin-top: 5px; font-size: 12px; }
.pdc-tip-note { color: rgba(255,255,255,.55); margin-top: 3px; font-size: 12px; line-height: 1.4; }

/* Summary list */
.pdc-list { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line, #ECECF0); }
.pdc-list-h { font-size: 12px; font-weight: 700; color: var(--ink, #0E0E12); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .05em; }
.pdc-list-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.pdc-li { display: grid; grid-template-columns: 22px 1fr; gap: 4px 10px; align-items: start; }
.pdc-li .pdl-m { grid-row: 1 / 3; }
.pdc-li-t { font-size: 13px; color: var(--ink, #0E0E12); line-height: 1.3; }
.pdc-li-t b { font-weight: 700; }
.pdc-li-s { font-size: 12px; color: var(--muted, #6E6E76); line-height: 1.4; }

/* ========= EQUIPMENT ========= */
.pd-eq-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--line, #ECECF0); margin-bottom: 24px; }
/* Перебиваем глобальный `button { position:absolute; right:2rem; top:50%; ... }`
   из template_styles.css — иначе табы выглядят как plain text без pill-shape.
   См. feedback_global_button_breaks_new_buttons. */
.pd-eq-tabs button.pd-eq-tab {
  position: relative !important;
  right: auto !important; top: auto !important; left: auto !important;
  translate: 0 !important;
  width: auto !important; height: auto !important;
  font: inherit !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--muted, #6E6E76) !important;
  background: var(--bg-card, #FFFFFF) !important;
  border: 1px solid var(--line, #ECECF0) !important;
  border-radius: 100px !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  transition: all .15s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.pd-eq-tabs button.pd-eq-tab:hover { color: var(--ink, #0E0E12) !important; border-color: #CECED4 !important; }
.pd-eq-tabs button.pd-eq-tab.active { background: var(--ink, #0E0E12) !important; color: var(--ink-invert, #FFFFFF) !important; border-color: var(--ink, #0E0E12) !important; }
.pd-eq-tab .cn { font-family: 'JetBrains Mono', monospace; font-size: 12px; opacity: .6; }

/* ========= PRICE STATS MINI (включается через include /include/price-stats-mini.php) =========
   Блок обёрнут в Bootstrap `.container` (max-width ~1140px). На staging внутри `.shell`
   это лишнее ограничение — растягиваем на всю ширину родителя. */
body.new-design-product .container.psm-wrap {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.new-design-product .psm { margin: 0 !important; }

/* Кнопки периода (3 мес / 6 мес / 1 год / Всё) — глобальное `button{position:absolute}`
   из template_styles.css ломает их. Перебиваем со `!important`. */
body.new-design-product .psm-periods button.psm-per-btn {
  position: relative !important;
  right: auto !important; top: auto !important; left: auto !important;
  translate: 0 !important;
  width: auto !important; height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 14px !important;
  border: 1.5px solid #E0E0E0 !important;
  border-radius: 10px !important;
  background: var(--bg-card, #FFFFFF) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #888 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all .18s cubic-bezier(.2,.8,.2,1) !important;
}
body.new-design-product .psm-periods button.psm-per-btn:hover {
  border-color: var(--accent, #B8152B) !important;
  color: var(--accent, #B8152B) !important;
}
body.new-design-product .psm-periods button.psm-per-btn.active {
  background: var(--accent, #B8152B) !important;
  border-color: var(--accent, #B8152B) !important;
  color: var(--ink-invert, #FFFFFF) !important;
}
.pd-eq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 24px; }
.pd-eq-item {
  display: flex; gap: 10px; align-items: center;
  font-size: 13px; color: var(--ink, #0E0E12);
  padding: 6px 0;
}
.pd-eq-item .mk {
  width: 18px; height: 18px; border-radius: 50%; background: rgba(30,140,74,.1);
  color: var(--success, #1E8C4A); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pd-eq-item.off { color: var(--muted, #6E6E76); }
.pd-eq-item.off .mk { background: var(--bg, #F7F7F9); color: #CECED4; }

/* Empty state — STANDARD_OPTIONS пуст у этого авто (без выдуманного fallback'а) */
.pd-eq-empty {
  padding: 24px;
  background: var(--bg, #F7F7F9);
  border: 1px solid var(--line, #ECECF0);
  border-radius: 12px;
}
.pd-eq-empty-msg {
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; color: var(--ink-3, #3d3d48); line-height: 1.5;
}
.pd-eq-empty-msg svg { color: var(--muted, #6E6E76); flex: none; }

/* ========= CALC ========= */
.pd-calc { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
.pdk-controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--line, #ECECF0); margin-bottom: 18px; }
.pdk-field label { display: block; font-size: 12px; color: var(--muted, #6E6E76); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 7px; }
.pdk-field select {
  width: 100%; font: inherit; font-weight: 600; color: var(--ink, #0E0E12);
  background: var(--bg-card, #FFFFFF); border: 1px solid var(--line, #ECECF0); border-radius: 8px;
  padding: 10px 12px; cursor: pointer;
}
.pdk-seg { display: inline-flex; background: var(--bg, #F7F7F9); border-radius: 8px; padding: 3px; }
.pdk-seg button {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--muted, #6E6E76);
  background: transparent; border: none; border-radius: 6px;
  padding: 8px 14px; cursor: pointer; transition: all .15s;
}
.pdk-seg button.active { background: var(--bg-card, #FFFFFF); color: var(--ink, #0E0E12); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.pdk-table { display: flex; flex-direction: column; }
.pdk-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--bg, #F7F7F9); font-size: 13px; }
.pdk-row .l { color: var(--ink, #0E0E12); font-weight: 500; }
.pdk-row .l .hint { font-size: 12px; color: var(--muted, #6E6E76); font-weight: 400; margin-top: 2px; }
.pdk-row .l .tag { font-size: 12px; color: var(--muted, #6E6E76); background: var(--bg, #F7F7F9); padding: 1px 6px; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; }
.pdk-row .r { font-family: 'JetBrains Mono', monospace; font-weight: 500; color: var(--ink, #0E0E12); white-space: nowrap; }
.pdk-row.total { border-top: 2px solid var(--ink, #0E0E12); border-bottom: none; padding-top: 14px; margin-top: 8px; }
.pdk-row.total .l { font-weight: 700; font-size: 15px; }
.pdk-row.total .r { font-weight: 700; font-size: 20px; }

.pdk-compare {
  background: var(--ink, #0E0E12); color: var(--ink-invert, #FFFFFF); border-radius: 14px; padding: 22px;
  display: flex; flex-direction: column; gap: 6px;
}
.pdk-compare .t { font-size: 12px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.pdk-compare .v { font-family: 'Instrument Serif', serif; font-size: 42px; line-height: 1; color: #2FB666; display: flex; align-items: baseline; gap: 4px; }
.pdk-compare .v .sym { font-size: 24px; color: rgba(255,255,255,.5); }
.pdk-compare .s { font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.5; margin-top: 4px; }
.pdk-info-list { list-style: none; padding: 18px 0 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pdk-info-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--ink, #0E0E12); line-height: 1.5; }
.pdk-info-list li svg { color: var(--success, #1E8C4A); flex-shrink: 0; margin-top: 3px; }
.pdk-info-list li b { font-weight: 700; }

/* ========= STATS ========= */
.pd-stats-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; }
.pd-stats-tabs { display: flex; gap: 2px; background: var(--bg, #F7F7F9); border-radius: 8px; padding: 3px; }
.pd-stats-tab {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--muted, #6E6E76);
  background: transparent; border: none; border-radius: 6px;
  padding: 6px 12px; cursor: pointer; transition: all .15s;
}
.pd-stats-tab.active { background: var(--bg-card, #FFFFFF); color: var(--ink, #0E0E12); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.pd-stats-chart { height: 220px; border-radius: 12px; border: 1px solid var(--line, #ECECF0); background: var(--bg, #F7F7F9); padding: 12px; }
.pd-stats-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line, #ECECF0); border: 1px solid var(--line, #ECECF0); border-radius: 12px; margin-top: 16px; overflow: hidden; }
.pd-stats-lgi { background: var(--bg-card, #FFFFFF); padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.pd-stats-lgi .k { font-size: 12px; color: var(--muted, #6E6E76); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.pd-stats-lgi .v { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 18px; color: var(--ink, #0E0E12); margin-top: 2px; }
.pd-stats-lgi .d { font-size: 12px; color: var(--muted, #6E6E76); margin-top: 2px; }
.pd-stats-lgi .d.dn { color: var(--success, #1E8C4A); font-weight: 600; }
.pd-stats-lgi .d.up { color: var(--accent, #E11D2E); font-weight: 600; }

/* ========= SIMILAR ========= */
.pd-similar-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: 240px; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.pd-similar-scroll::-webkit-scrollbar { height: 6px; }
.pd-similar-scroll::-webkit-scrollbar-track { background: var(--bg, #F7F7F9); border-radius: 3px; }
.pd-similar-scroll::-webkit-scrollbar-thumb { background: #CECED4; border-radius: 3px; }
.pds-card { scroll-snap-align: start; background: var(--bg-card, #FFFFFF); border: 1px solid var(--line, #ECECF0); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; display: flex; flex-direction: column; }
.pds-card:hover { border-color: var(--ink, #0E0E12); transform: translateY(-2px); }
.pds-img { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--ink-2, #1E1E24), var(--ink-3, #3D3D48)); position: relative; }
.pds-img .p-yr { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,.95); color: var(--ink, #0E0E12); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 4px; }
.pds-info { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.pds-t { font-size: 13px; font-weight: 700; color: var(--ink, #0E0E12); line-height: 1.3; }
.pds-s { font-size: 12px; color: var(--muted, #6E6E76); font-family: 'JetBrains Mono', monospace; }
.pds-p { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 16px; color: var(--ink, #0E0E12); margin-top: 4px; }
.pds-p .m { font-weight: 400; color: var(--muted, #6E6E76); }

/* ========= MANAGER ========= */
.pd-mgr { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; background: var(--bg, #F7F7F9); border-radius: 16px; padding: 28px; }
.pd-mgr-left .eyebrow { font-size: 12px; color: var(--muted, #6E6E76); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: 10px; }
.pd-mgr h3 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: -.02em; margin: 0 0 12px; color: var(--ink, #0E0E12); }
.pd-mgr h3 em { font-style: italic; color: var(--accent, #E11D2E); }
.pd-mgr p { font-size: 13px; color: var(--muted, #6E6E76); line-height: 1.55; margin: 0 0 20px; }
.pd-mgr-who { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line, #ECECF0); }
.pd-mgr-av { width: 52px; height: 52px; border-radius: 50%; background: var(--ink, #0E0E12); color: var(--ink-invert, #FFFFFF); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }
.pd-mgr-info .nm { font-weight: 700; font-size: 14px; color: var(--ink, #0E0E12); }
.pd-mgr-info .rl { font-size: 12px; color: var(--muted, #6E6E76); font-family: 'JetBrains Mono', monospace; margin-top: 2px; }
.pd-mgr-info .on { font-size: 12px; color: var(--success, #1E8C4A); font-weight: 600; margin-top: 3px; }

/* 07.09.2026: радиус формы 12px -> 16px. Раньше форма была ВЛОЖЕНА в серый контейнер
   (16px снаружи, 12px внутри — верное соотношение для вложения), а с правки п.19 серая
   карточка и форма стали СОСЕДЯМИ, и разные радиусы у соседей читаются как небрежность.
   На Корее и Китае значение всё равно перебивает канон nd-fix-h.css (12px !important),
   на мотоциклах и аукционе, где этот файл не подключается, форма теперь совпадает
   с серой карточкой — 16px, как у соседней карточки заказа `.pd-order` на тех же
   страницах. Замер канона радиусов — в хвосте файла. */
.pd-mgr-right { background: var(--bg-card, #FFFFFF); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.pd-mgr-right .h { font-weight: 700; font-size: 14px; color: var(--ink, #0E0E12); margin-bottom: 4px; }
.pd-mgr-right input, .pd-mgr-right textarea {
  font: inherit; font-size: 13px; color: var(--ink, #0E0E12);
  background: var(--bg, #F7F7F9); border: 1px solid var(--line, #ECECF0); border-radius: 8px;
  padding: 11px 14px; resize: none;
}
.pd-mgr-right input:focus, .pd-mgr-right textarea:focus { outline: none; border-color: var(--ink, #0E0E12); background: var(--bg-card, #FFFFFF); }
.pd-mgr-submit {
  font: inherit; font-weight: 700; font-size: 14px; color: var(--ink-invert, #FFFFFF);
  background: var(--accent, #E11D2E); border: none; border-radius: 10px;
  padding: 14px; cursor: pointer; margin-top: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s;
}
.pd-mgr-submit:hover { background: var(--accent-2, #B8152B); }
.pd-mgr-right .ag { font-size: 12px; color: var(--muted, #6E6E76); line-height: 1.4; margin-top: 2px; }
.pd-mgr-right .ag a { color: var(--ink, #0E0E12); }

/* ========= MOBILE STICKY BAR ========= */
.pd-mbar { display: none; }
body.has-pd-mbar { --pd-mbar-h: 0px; }

/* 07.09.2026, приёмка (находка: «на карточке авто в шапке нет ни одного пункта меню:
   861 px — 0 пунктов и нет кнопки „…", 900 — 0, 991 — 0, 992 — 0; уйти с карточки
   в каталог, контакты или избранное нельзя»).

   ЗДЕСЬ БЫЛО правило (снято):
       @media (max-width: 1100px) { .header .main-nav { display: none } }
   с пояснением «collapse header nav earlier to avoid overlap with CTA».

   ПОЧЕМУ СНЯТО. Наезда на кнопку «Подбор авто», от которого правило защищало, сегодня
   быть не может: шапка нового дизайна — грид auto / 1fr / auto (new-tokens.css:83),
   строка меню сидит в средней колонке с min-width:0 и overflow:hidden (new-tokens.css:108),
   то есть сжимается и обрезается сама, а логотип, телефон и CTA всегда получают свою
   ширину. Правило же гасило строку целиком на ВСЕХ четырёх типах карточек (Корея, Китай,
   мотоциклы, аукцион — new-product.css подключается всем) в полосе 861–1100 px, и вместе
   с ней исчезала кнопка «…»: js/nd-navmore.js по замеру видит nav.clientWidth = 0 и сам
   себя выключает (в самом скрипте это описано как известное следствие этой строки).

   ЧТО ТЕПЕРЬ. Строка меню на карточке ведёт себя как на каталоге: сколько пунктов влезло —
   столько показано, остальные, а вместе с ними «Контакты», «Избранное» и выбор города
   из скрытой тёмной полосы, собирает кнопка «…». Ниже 861 px по-прежнему работает
   мобильная шапка .nd-mhdr со своей шторкой — там строки меню нет вовсе.

   ⛔ Не возвращать display:none для .main-nav на карточке. Замер 07.09 после снятия
      (/korea/product/2255575/): 861 px — 3 пункта + «…», 991 — 4 + «…», 1024 — 4 + «…»,
      1100 — 4 + «…», 1440 — 6 без кнопки; шапка ровно одна, горизонтальной прокрутки нет
      ни на одной ширине. */

@media (max-width: 1100px) {
  .pd-hero { grid-template-columns: 1fr 400px; }
}
@media (max-width: 1000px) {
  .pd-hero { grid-template-columns: 1fr; }
  .pdc-list-items { grid-template-columns: 1fr; }
  .pd-order { position: static; }
  .pd-specs { grid-template-columns: repeat(2, 1fr); }
  .pd-check { grid-template-columns: 1fr; }
  .pd-eq-grid { grid-template-columns: repeat(2, 1fr); }
  .pd-calc { grid-template-columns: 1fr; }
  .pd-stats-legend { grid-template-columns: repeat(2, 1fr); }
  .pd-mgr { grid-template-columns: 1fr; padding: 24px; }
  .pd-h1 { font-size: 28px; }
}
@media (max-width: 640px) {
  .gal { grid-template-columns: 60px 1fr; }
  .pd-title-row { grid-template-columns: 1fr; }
  .pd-actions-top { order: -1; }
  .pd-specs { grid-template-columns: 1fr 1fr; }
  .pd-eq-grid { grid-template-columns: 1fr; }
  .pd-stats-legend { grid-template-columns: 1fr 1fr; }
  .pd-mini { display: none; }
  .pd-mbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    background: var(--bg-card, #FFFFFF); border-top: 1px solid var(--line, #ECECF0); padding: 10px 16px;
    align-items: center; gap: 12px; box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  }
  .mb-price { flex: 1; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; color: var(--ink, #0E0E12); }
  .mb-price .s { display: block; font-weight: 400; font-size: 12px; color: var(--muted, #6E6E76); font-family: 'Montserrat', sans-serif; margin-top: 1px; }
  .mb-btn { background: var(--accent, #E11D2E); color: var(--ink-invert, #FFFFFF); text-decoration: none; padding: 12px 20px; border-radius: 8px; font-weight: 700; font-size: 13px; white-space: nowrap; }
  body.has-pd-mbar { padding-bottom: 64px; }
}


/* ========= AUCTION PHOTOS ========= */
.pd-aph {
  margin: 36px 0 8px;
  padding: 28px;
  background: linear-gradient(180deg, var(--bg, #F7F7F9) 0%, var(--bg-card, #FFFFFF) 100%);
  border: 1px solid var(--line, #ECECF0);
  border-radius: 16px;
}
.pd-aph-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
}
.pd-aph-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600; color: var(--muted, #6E6E76);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px;
}
.pd-aph-t {
  font-family: 'Montserrat', 'Manrope', sans-serif;
  font-weight: 700; font-size: 20px; line-height: 1.25;
  color: var(--ink, #0E0E12); letter-spacing: -.01em;
  text-wrap: balance; max-width: 620px;
}
.pd-aph-more {
  font-size: 13px; color: var(--ink, #0E0E12); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  padding: 10px 14px; border: 1px solid var(--line, #ECECF0); border-radius: 8px;
  background: var(--bg-card, #FFFFFF); transition: all .15s;
}
.pd-aph-more:hover { background: var(--ink, #0E0E12); color: var(--ink-invert, #FFFFFF); border-color: var(--ink, #0E0E12); }

.pd-aph-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
.pd-aph-card {
  background: var(--bg-card, #FFFFFF); border: 1px solid var(--line, #ECECF0); border-radius: 10px;
  padding: 12px; cursor: pointer; transition: all .15s;
}
.pd-aph-card:hover {
  border-color: #CECED4; transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(14,14,18,.06);
}
.pd-aph-ph {
  aspect-ratio: 4/3; border-radius: 6px;
  background: linear-gradient(135deg, var(--bg, #F7F7F9), var(--line, #ECECF0));
  display: flex; align-items: center; justify-content: center;
  color: var(--ink, #0E0E12); margin-bottom: 10px;
  position: relative; overflow: hidden;
}
.pd-aph-ph[data-kind="cert"] { background: linear-gradient(135deg, var(--line-2, #F0F0F3), #FFE9C2); color: #8C5E00; }
.pd-aph-ph[data-kind="vin"] { background: linear-gradient(135deg, var(--line-2, #F0F0F3), #D5E4F7); color: #1D4E8C; }
.pd-aph-ph[data-kind="odo"] { background: linear-gradient(135deg, var(--line-2, #F0F0F3), #C7ECD3); color: #1E6E3E; }
.pd-aph-ph[data-kind="engine"] { background: linear-gradient(135deg, var(--line-2, #F0F0F3), #E0D0F1); color: #5E2E9C; }
.pd-aph-ph[data-kind="docs"] { background: linear-gradient(135deg, var(--line-2, #F0F0F3), #F4CFC1); color: #8C3E1E; }
.pd-aph-ph[data-kind="auction"] { background: linear-gradient(135deg, var(--line, #ECECF0), #C7E3E3); color: #1E6E6E; }
.pd-aph-lbl {
  font-size: 12px; font-weight: 700; color: var(--ink, #0E0E12);
  line-height: 1.3; margin-bottom: 3px;
}
.pd-aph-sub { font-size: 12px; color: var(--muted, #6E6E76); line-height: 1.4; }

@media (max-width: 1100px) { .pd-aph-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .pd-aph-grid { grid-template-columns: repeat(2, 1fr); } .pd-aph { padding: 20px; } }


/* ========= INSURANCE HISTORY ========= */
.pd-ins {
  margin-top: 28px;
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--line, #ECECF0);
  border-radius: 14px;
  padding: 28px;
}
.pd-ins-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap; padding-bottom: 22px;
  border-bottom: 1px solid var(--line, #ECECF0); margin-bottom: 22px;
}
.pd-ins-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600; color: var(--muted, #6E6E76);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px;
}
.pd-ins-t {
  font-family: 'Montserrat', 'Manrope', sans-serif;
  font-weight: 700; font-size: 20px; line-height: 1.25;
  color: var(--ink, #0E0E12); letter-spacing: -.01em; text-wrap: balance;
  max-width: 520px;
}
.pd-ins-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 100px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.pd-ins-badge.ok {
  background: var(--line-2, #F0F0F3); color: #1E6E3E;
}
.pd-ins-badge.ok::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #1E6E3E;
}

.pd-ins-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--line, #ECECF0); border-radius: 10px; overflow: hidden;
  margin-bottom: 22px;
}
.pd-ins-cell {
  padding: 18px 20px; border-right: 1px solid var(--line, #ECECF0);
  background: var(--bg, #F7F7F9);
}
.pd-ins-cell:last-child { border-right: none; }
.pd-ins-n {
  font-family: 'Instrument Serif', serif; font-size: 36px; line-height: 1;
  color: var(--ink, #0E0E12); margin-bottom: 8px; letter-spacing: -.02em;
}
.pd-ins-l {
  font-size: 12px; font-weight: 700; color: var(--ink, #0E0E12);
  margin-bottom: 4px;
}
.pd-ins-s {
  font-size: 12px; color: var(--muted, #6E6E76); line-height: 1.4;
}

.pd-ins-tl {}
.pd-ins-tl-h {
  font-size: 12px; font-weight: 700; color: var(--muted, #6E6E76);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px;
}
.pd-ins-tl-item {
  display: grid; grid-template-columns: 18px 1fr; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--bg, #F7F7F9);
  position: relative;
}
.pd-ins-tl-item:last-child { border-bottom: none; }
.pd-ins-tl-item .tl-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: #C07A00; margin-top: 5px; flex-shrink: 0;
  border: 2px solid var(--ink-invert, #FFFFFF); box-shadow: 0 0 0 1.5px #C07A00;
}
.pd-ins-tl-item .tl-dot.ok {
  background: #1E6E3E; box-shadow: 0 0 0 1.5px #1E6E3E;
}
.pd-ins-tl-item .tl-date {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--muted, #6E6E76); font-weight: 500; margin-bottom: 3px;
}
.pd-ins-tl-item .tl-t {
  font-size: 14px; font-weight: 700; color: var(--ink, #0E0E12);
  margin-bottom: 4px;
}
.pd-ins-tl-item .tl-s {
  font-size: 12.5px; color: var(--ink-3, #5E5E6A); line-height: 1.5;
}

.pd-ins-foot {
  margin-top: 18px; padding: 12px 14px; background: var(--bg, #F7F7F9);
  border-radius: 8px; font-size: 12px; color: var(--muted, #6E6E76); line-height: 1.5;
}

@media (max-width: 900px)  { .pd-ins-grid { grid-template-columns: repeat(2, 1fr); }
  .pd-ins-cell:nth-child(2) { border-right: none; }
  .pd-ins-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line, #ECECF0); }
}
@media (max-width: 520px)  { .pd-ins-grid { grid-template-columns: 1fr; }
  .pd-ins-cell { border-right: none !important; border-bottom: 1px solid var(--line, #ECECF0); }
  .pd-ins-cell:last-child { border-bottom: none; }
}

/* ===== Share popup (TG / MAX / VK / WA + copy) ===== */
.m-share { position: relative; }
/* Кнопки "Поделиться" и "Печать" сделаны 1-в-1 в стиле `.m-chip` (см. ID лота слева).
   `!important` нужен чтобы перебить глобальный `button{position:absolute;border:none}`
   из template_styles.css. См. feedback_global_button_breaks_new_buttons. */
/* 24.09.2026: те же пилюли и вне .pd-meta — у лотов аукциона и мотоциклов кнопки стоят в
   .pd-title-row, и без этого селектора рисовались голым текстом (Ivan, скриншоты). */
.pd-meta button.m-share-btn,
.m-share > button.m-share-btn {
  position: relative !important;
  right: auto !important; top: auto !important; left: auto !important;
  translate: 0 !important;
  width: auto !important; height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--muted, #6E6E76) !important;
  padding: 6px 10px !important;
  border: 1px solid var(--line, #ECECF0) !important;
  border-radius: 100px !important;
  background: var(--bg-card, #FFFFFF) !important;
  cursor: pointer !important;
  transition: border-color .15s ease, background .15s ease, color .15s ease !important;
}
.pd-meta button.m-share-btn:hover,
.m-share > button.m-share-btn:hover {
  border-color: var(--ink, #0E0E12) !important;
  color: var(--ink, #0E0E12) !important;
  background: rgba(14,14,18,.04) !important;
}
.pd-meta button.m-share-btn[aria-expanded="true"],
.m-share > button.m-share-btn[aria-expanded="true"] {
  background: rgba(14,14,18,.04) !important;
  border-color: var(--ink, #0E0E12) !important;
  color: var(--ink, #0E0E12) !important;
}

.m-share-pop {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 230px; padding: 12px;
  background: var(--bg-card, #FFFFFF); border: 1px solid var(--line, #E6E6DF); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  z-index: 100;
}
.msp-title {
  font-size: 12px; font-weight: 700; color: var(--muted, #6E6E76);
  text-transform: uppercase; letter-spacing: .04em;
  padding: 0 4px 8px; border-bottom: 1px solid var(--line, #E6E6DF); margin-bottom: 6px;
}
.msp-list { display: flex; flex-direction: column; gap: 2px; }
.msp-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  color: var(--ink, #0E0E12); text-decoration: none; font-size: 13.5px; font-weight: 500;
  background: transparent; border: 0; cursor: pointer; font-family: inherit;
  text-align: left; width: 100%;
  transition: background .12s ease;
}
.msp-item:hover { background: var(--bg, #f0f0f3); }
.msp-item.copied { background: rgba(30,140,74,.08); color: var(--success, #1E8C4A); }
.msp-item svg { flex: 0 0 22px; }
.msp-copy { border-top: 1px solid var(--line, #E6E6DF); margin-top: 4px; padding-top: 12px !important; border-radius: 0 0 10px 10px; }

@media (max-width: 520px) {
  .m-share-pop { right: -10px; min-width: 90vw; }
}

/* ===== Версия для печати / PDF (переписана 07.08.2026) =====
   Ivan прислал распечатку: «как тупо выглядит файл для печати, надо убрать половину
   и оставить только нужное». На 7 листов уезжали меню сайта, кнопки «Позвонить» на
   КАЖДОЙ странице, пустые серые плейсхолдеры похожих авто и видео-отзывов, форма заявки
   с полями ввода, свёрнутый FAQ и кружок чат-виджета. Плюс тёмная карточка скоринга
   печаталась белым по белому — самая важная часть была нечитаема.
   Старые правила промахнулись, потому что писались под прежнюю разметку (.pd-similar,
   .pd-related, .pd-faq) — в новой секции называются по id: #similar, #request, #reviews, #faq.
   Печатаем только то, с чем клиент идёт к решению: фото, цена, характеристики,

/* JS-driven для браузеров со слабой @media print поддержкой */
body.pd-printing .pd-mini,
body.pd-printing .pd-cta-primary,
body.pd-printing .telegram-popup { display: none !important; }

/* ===== Damage scheme coordinates (1-в-1 с боевым encarrus_v2 _main.scss:4619-5060) ===== */
/* Маркер позиционируется через transform — точка вставляется по центру (left/top считаются от центра пятна) */
.pdc-map-inner { position: relative; }
.pdc-map-inner .pdc-pos {
  position: absolute;
  width: 0; height: 0;
  /* центрируем содержимое (button.pdc-mk) относительно left/top */
  display: inline-flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.pdc-map-inner .pdc-pos > .pdc-mk { pointer-events: auto; transform: translate(-50%, -50%); position: absolute; }

/* Скин (scheme-1, вид сверху) */
.pdc-scheme-1 .pdc-pos-hood              { top: 5%;  left: 50%; }
.pdc-scheme-1 .pdc-pos-dashPanel         { top: 20%; left: 50%; }
.pdc-scheme-1 .pdc-pos-roofPanel         { top: 40%; left: 50%; }
.pdc-scheme-1 .pdc-pos-trunkLead         { top: 95%; left: 50%; }
.pdc-scheme-1 .pdc-pos-frontFenderLeft   { top: 10%; left: 10%; }
.pdc-scheme-1 .pdc-pos-frontFenderRight  { top: 10%; left: 90%; }
.pdc-scheme-1 .pdc-pos-quarterPanelLeft  { top: 75%; left: 15%; }
.pdc-scheme-1 .pdc-pos-quarterPanelRight { top: 75%; left: 85%; }
.pdc-scheme-1 .pdc-pos-frontDoorLeft     { top: 30%; left: 20%; }
.pdc-scheme-1 .pdc-pos-rearDoorLeft      { top: 60%; left: 20%; }
.pdc-scheme-1 .pdc-pos-frontDoorRight    { top: 30%; left: 80%; }
.pdc-scheme-1 .pdc-pos-rearDoorRight     { top: 60%; left: 80%; }

/* Каркас (scheme-2, силовые элементы) */
.pdc-scheme-2 .pdc-pos-frontPanel             { top: 1%;  left: 50%; }
.pdc-scheme-2 .pdc-pos-rearPanel              { top: 90%; left: 50%; }
.pdc-scheme-2 .pdc-pos-trunkFloor             { top: 85%; left: 50%; }
.pdc-scheme-2 .pdc-pos-floorPanel             { top: 50%; left: 50%; }
.pdc-scheme-2 .pdc-pos-crossMember            { top: 55%; left: 50%; }
.pdc-scheme-2 .pdc-pos-sideSillPanelLeft      { top: 50%; left: 33%; }
.pdc-scheme-2 .pdc-pos-sideSillPanelRight     { top: 50%; left: 65%; }
.pdc-scheme-2 .pdc-pos-frontSideMemberLeft    { top: 25%; left: 15%; }
.pdc-scheme-2 .pdc-pos-frontSideMemberRight   { top: 25%; left: 85%; }
.pdc-scheme-2 .pdc-pos-frontWheelHouseLeft    { top: 20%; left: 10%; }
.pdc-scheme-2 .pdc-pos-frontWheelHouseRight   { top: 20%; left: 90%; }
.pdc-scheme-2 .pdc-pos-rearWheelHouseLeft     { top: 85%; left: 10%; }
.pdc-scheme-2 .pdc-pos-rearWheelHouseRight    { top: 85%; left: 90%; }
.pdc-scheme-2 .pdc-pos-pillarPanelFrontLeft   { top: 28%; left: 18%; }
.pdc-scheme-2 .pdc-pos-pillarPanelFrontRight  { top: 28%; left: 82%; }
.pdc-scheme-2 .pdc-pos-pillarPanelMiddleLeft  { top: 50%; left: 18%; }
.pdc-scheme-2 .pdc-pos-pillarPanelMiddleRight { top: 50%; left: 82%; }
.pdc-scheme-2 .pdc-pos-pillarPanelRearLeft    { top: 72%; left: 18%; }
.pdc-scheme-2 .pdc-pos-pillarPanelRearRight   { top: 72%; left: 82%; }
.pdc-scheme-2 .pdc-pos-radiatorSupport        { top: 8%;  left: 50%; }
.pdc-scheme-2 .pdc-pos-packageTray            { top: 80%; left: 50%; }
.pdc-scheme-2 .pdc-pos-rearSideMemberLeft     { top: 80%; left: 15%; }
.pdc-scheme-2 .pdc-pos-rearSideMemberRight    { top: 80%; left: 85%; }
.pdc-scheme-2 .pdc-pos-insidePanelLeft        { top: 45%; left: 22%; }
.pdc-scheme-2 .pdc-pos-insidePanelRight       { top: 45%; left: 78%; }

/* === Форма расчёта кредита (свёрнута по умолчанию, открывается по клику на «Рассчитать →») === */
.poc-c-form {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg, #F7F7F9); border-radius: 8px; padding: 14px;
  border: 1px solid var(--line, #ECECF0);
}
.poc-c-form[hidden] { display: none !important; }
.poc-c-form-h { font-size: 12.5px; font-weight: 700; color: var(--ink, #0E0E12); }
.poc-c-form .pcf-row input[type="text"],
.poc-c-form .pcf-row input[type="tel"] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line, #E6E6DF); border-radius: 8px;
  font-size: 13px; font-family: inherit;
}
.poc-c-form .pcf-row input:focus { outline: 0; border-color: var(--ink, #0E0E12); }
.poc-c-form .pcf-row-2 { display: flex; flex-direction: column; gap: 4px; }
.poc-c-form .pcf-lbl { font-size: 12px; color: var(--muted, #6E6E76); }
.poc-c-form .pcf-lbl b { color: var(--ink, #0E0E12); font-weight: 700; }
.poc-c-form input[type="range"] { width: 100%; }
.pcf-lbl-sub { color: var(--muted, #6E6E76); font-weight: 500; }

/* ===== Кастомный slider — chevron-thumb на чёрной залитой trace ===== */
/* Заполненная часть рисуется через linear-gradient + CSS-переменная --pct, обновляется JS-ом */
.poc-c-form input[type="range"].nd-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 24px;
  background: transparent; outline: none; cursor: pointer;
  margin: 4px 0 2px;
  --pct: 50%;
}
/* WebKit track */
.poc-c-form input[type="range"].nd-slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right, var(--ink, #0E0E12) 0%, var(--ink, #0E0E12) var(--pct), var(--line, #ECECF0) var(--pct), var(--line, #ECECF0) 100%);
}
.poc-c-form input[type="range"].nd-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-card, #FFFFFF); border: 2px solid var(--ink, #0E0E12);
  box-shadow: 0 1px 4px rgba(14,14,16,.18);
  margin-top: -8px; cursor: pointer;
  transition: transform .12s var(--ease, cubic-bezier(.2,.8,.2,1)), box-shadow .12s var(--ease, cubic-bezier(.2,.8,.2,1));
}
.poc-c-form input[type="range"].nd-slider:hover::-webkit-slider-thumb,
.poc-c-form input[type="range"].nd-slider:focus::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 2px 8px rgba(14,14,16,.24); }
/* Firefox */
.poc-c-form input[type="range"].nd-slider::-moz-range-track {
  height: 4px; border-radius: 999px;
  background: var(--line, #ECECF0);
}
.poc-c-form input[type="range"].nd-slider::-moz-range-progress {
  height: 4px; border-radius: 999px; background: var(--ink, #0E0E12);
}
.poc-c-form input[type="range"].nd-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-card, #FFFFFF); border: 2px solid var(--ink, #0E0E12);
  box-shadow: 0 1px 4px rgba(14,14,16,.18);
  cursor: pointer;
}

/* ===== Расширенный summary в форме кредита ===== */
.poc-c-summary {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--line, #ECECF0); border-radius: 10px;
  margin-top: 4px;
}
.poc-c-result {
  padding: 0; background: transparent; border: none; border-radius: 0;
  font-size: 16px; font-weight: 800; color: var(--ink, #0E0E12); text-align: center;
}
.poc-c-result span { font-family: 'JetBrains Mono', monospace; }
.poc-c-meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px; padding-top: 8px;
  border-top: 1px dashed rgba(14,14,16,.10);
}
.poc-c-meta-i { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.poc-c-meta-l { font-size: 12px; color: var(--muted, #6E6E76); text-transform: uppercase; letter-spacing: .04em; }
.poc-c-meta-v { font-size: 12px; font-weight: 700; color: var(--ink, #0E0E12); font-family: 'JetBrains Mono', monospace; white-space: nowrap; }

/* ===== Submit-кнопка: фикс глобального button{position:absolute} из template_styles.css =====
   См. feedback_global_button_breaks_new_buttons. !important на каждом ломаемом свойстве. */
.poc-c-form button.poc-c-submit {
  position: relative !important;
  right: auto !important; top: auto !important; left: auto !important;
  translate: 0 !important;
  width: 100% !important; height: auto !important;
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  padding: 13px 20px !important;
  background: var(--accent, #B8152B) !important;
  color: var(--ink-invert, #FFFFFF) !important;
  border: 1px solid var(--accent, #B8152B) !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
  font-family: inherit !important;
  cursor: pointer !important;
  margin-top: 4px !important;
  box-shadow: 0 2px 0 var(--accent-2, #b8152b), 0 6px 14px rgba(200,25,32,.16) !important;
  transition: background .14s var(--ease, cubic-bezier(.2,.8,.2,1)), transform .12s var(--ease, cubic-bezier(.2,.8,.2,1)), box-shadow .14s var(--ease, cubic-bezier(.2,.8,.2,1)) !important;
}
.poc-c-form button.poc-c-submit:hover {
  background: var(--accent-2, #b8152b) !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--accent-2, #b8152b), 0 10px 20px rgba(200,25,32,.22) !important;
}
.poc-c-form .pcf-legal { font-size: 12px; color: var(--muted, #6E6E76); }

/* === Похожие авто — карточки в стиле каталога /korea/ (.card .c-photo .c-name ...) === */
.pd-similar-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.pd-similar-grid .card {
  display: flex; flex-direction: column; gap: 0;
  background: var(--bg-card, #FFFFFF); border: 1px solid var(--line, #ECECF0); border-radius: 14px;
  text-decoration: none; color: var(--ink, #0E0E12);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pd-similar-grid .card:hover { border-color: var(--ink, #0E0E12); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.pd-similar-grid .c-img { position: relative; aspect-ratio: 4/3; background: var(--line-2, #F0F0F3); overflow: hidden; }
.pd-similar-grid .c-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity .12s ease;
}
.pd-similar-grid .c-photo.on { opacity: 1; }
.pd-similar-grid .c-zones { position: absolute; inset: 0; display: flex; }
.pd-similar-grid .c-zone { flex: 1; cursor: pointer; }
.pd-similar-grid .c-dots {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px;
  pointer-events: none;
}
.pd-similar-grid .c-dot {
  width: 14px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.6);
  transition: background .12s ease;
}
.pd-similar-grid .c-dot.on { background: var(--bg-card, #FFFFFF); }
.pd-similar-grid .c-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.pd-similar-grid .c-name { font-size: 14.5px; font-weight: 700; line-height: 1.2; color: var(--ink, #0E0E12); }
.pd-similar-grid .c-trim { font-size: 12px; color: var(--ink-3, #3d3d48); font-weight: 500; }
.pd-similar-grid .c-year { font-size: 12px; color: var(--muted, #6E6E76); }
.pd-similar-grid .c-props {
  display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px;
  font-size: 12px; color: var(--muted, #6E6E76);
}
.pd-similar-grid .c-props span { white-space: nowrap; }
/* 07.08.2026 (Ivan: «скачет вот тут надписи, давай как-то на одной линии сделаем»).
   У части машин нет строки комплектации («Core»), а у части — двухстрочное название,
   поэтому блок цены висел сразу под контентом и в ряду прыгал на 20-30px.
   Тянем тело карточки на всю высоту и прижимаем цену к низу: линия цен общая для ряда
   независимо от того, сколько строк занял текст выше. */
.pd-similar-grid .card { height: 100%; }
.pd-similar-grid .c-body { flex: 1 1 auto; }
.pd-similar-grid .c-price-box { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line, #ECECF0); }
.pd-similar-grid .c-price { font-size: 17px; font-weight: 800; color: var(--ink, #0E0E12); line-height: 1.1; }
.pd-similar-grid .c-price-hint { font-size: 12px; color: var(--muted, #6E6E76); margin-top: 2px; }

/* === pd-ins (Carhistory) — расширенный страховой блок === */
.pd-ins-flags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line, #ECECF0);
}
.pd-ins-flag {
  display: inline-block; padding: 4px 10px; border-radius: 100px;
  font-size: 12px; font-weight: 600;
  background: var(--line, #ECECF0); color: var(--ink, #0E0E12);
}
.pd-ins-flag.warn { background: rgba(240,180,60,.18); color: #C07A00; }
.pd-ins-flag.bad  { background: rgba(192,57,43,.14); color: #922b21; }

/* Таблица подробностей по случаям ДТП */
.pd-ins-acc {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line, #ECECF0);
}
.pd-ins-acc-h {
  font-size: 12px; font-weight: 700; color: var(--muted, #6E6E76);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px;
}
.pd-ins-acc-tbl {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.pd-ins-acc-tbl thead th {
  text-align: left; padding: 6px 10px;
  font-size: 12px; font-weight: 700; color: var(--muted, #6E6E76);
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--line, #ECECF0); background: var(--bg, #F7F7F9);
}
.pd-ins-acc-tbl thead th.num,
.pd-ins-acc-tbl tbody td.num { text-align: right; }
.pd-ins-acc-tbl tbody td {
  padding: 8px 10px; border-bottom: 1px solid var(--bg, #F7F7F9);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink, #0E0E12);
}
.pd-ins-acc-tbl tbody td:nth-child(1),
.pd-ins-acc-tbl tbody td:nth-child(2) { font-family: inherit; }
.pd-ins-acc-tbl tbody tr:last-child td { border-bottom: 0; }
.pd-ins-acc-tbl .pd-ins-acc-total { font-weight: 700; }
@media (max-width: 768px) {
  .pd-ins-acc-tbl { font-size: 12px; }
  .pd-ins-acc-tbl thead th, .pd-ins-acc-tbl tbody td { padding: 6px 4px; }
  .pd-ins-acc-tbl thead th:nth-child(3),
  .pd-ins-acc-tbl thead th:nth-child(4),
  .pd-ins-acc-tbl thead th:nth-child(5),
  .pd-ins-acc-tbl tbody td:nth-child(3),
  .pd-ins-acc-tbl tbody td:nth-child(4),
  .pd-ins-acc-tbl tbody td:nth-child(5) { display: none; }
}

/* Цветовые модификаторы pd-ins-n */
.pd-ins-n-good { color: var(--success, #1E8C4A); }
.pd-ins-n-warn { color: #C07A00; }
.pd-ins-n-bad  { color: #C0392B; }

/* === Insurance summary (под pdc-score) === */
.pdc-ins {
  background: var(--bg, #F7F7F9); border-radius: 12px; border: 1px solid var(--line, #ECECF0);
  padding: 18px 20px; margin-top: 16px;
}
.pdc-ins-h {
  font-size: 12px; font-weight: 700; color: var(--muted, #6E6E76);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px;
}
.pdc-ins-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}
.pdc-ins-cell {
  display: flex; flex-direction: column; gap: 3px;
  padding-right: 16px; border-right: 1px solid var(--line, #ECECF0);
}
.pdc-ins-cell:last-child { border-right: 0; padding-right: 0; }
.pdc-ins-lbl { font-size: 12px; color: var(--muted, #6E6E76); font-weight: 500; }
.pdc-ins-val { font-size: 17px; font-weight: 700; color: var(--ink, #0E0E12); line-height: 1.2; }
.pdc-ins-val-good { color: var(--success, #1E8C4A); }
.pdc-ins-val-warn { color: #C07A00; }
.pdc-ins-val-bad  { color: #C0392B; }
.pdc-ins-sub  { font-size: 12px; color: var(--muted, #6E6E76); margin-top: 2px; }
@media (max-width: 768px) {
  .pdc-ins-cell { border-right: 0; border-bottom: 1px solid var(--line, #ECECF0); padding-bottom: 12px; padding-right: 0; }
  .pdc-ins-cell:last-child { border-bottom: 0; padding-bottom: 0; }
}
/* SEO-блок + видео-отзывы (Phase 1 rollout 2026-05-08) */
body.new-design-product .pd-seo-section { padding: 32px 0; background: var(--bg, #F7F7F9); margin-top: 24px; }
body.new-design-product .pd-seo-section .shell { max-width: 1520px; margin: 0 auto; }
body.new-design-product .pd-seo-title { font-size: 22px; font-weight: 700; line-height: 1.2; margin-bottom: 14px; color: var(--ink, #0E0E12); letter-spacing: -.01em; }
body.new-design-product .pd-seo-desc { font-size: 14.5px; line-height: 1.65; color: var(--ink-3, #3D3D48); }
body.new-design-product .pd-video-section { padding: 40px 0; }
/* 16.09.2026 (Ivan: «отзывы надо немного сдвинуть влево, они ближе к центру съехали»).
   1280px и поля 20px остались от выкатки 08.05, когда вся страница была на 1280.
   С тех пор канон .shell — 1520px с полями 24/32/40px по ширине экрана
   (body[class*=new-design] .shell в new-catalog.css), и все секции карточки
   (характеристики, похожие, заявка) стоят на нём; секция отзывов одна была уже на 240px
   и начиналась на 120px правее соседей. Ширину выравниваем по канону, поля наследуем
   от базового правила (здесь их больше не задаём). Касается всех четырёх карточек. */
body.new-design-product .pd-video-section .shell { max-width: 1520px; margin: 0 auto; }
body.new-design-product .pd-video-reviews { width: 100%; }

/* === Sold-state (Phase 1 rollout 2026-05-08) === */
/* Бейдж "Уже продан" overlay в галерее */
body.new-design-product .pd-main-photo { position: relative !important; }
body.new-design-product .pd-sold-badge {
  position: absolute; top: 16px; left: 16px; z-index: 5;
  display: inline-flex; flex-direction: column; align-items: flex-start;
  background: var(--accent, #E11D2E); color: var(--ink-invert, #FFFFFF);
  padding: 10px 14px; border-radius: 10px;
  box-shadow: 0 4px 14px rgba(225,29,46,.32);
  pointer-events: none;
}
body.new-design-product .pd-sold-badge-title { font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }
body.new-design-product .pd-sold-badge-date { font-size: 12px; font-weight: 600; opacity: .92; margin-top: 2px; }
/* Чип в meta-strip */
body.new-design-product .m-chip.sold { background: rgba(225,29,46,.1); color: var(--accent-2, #B8152B); }
body.new-design-product .m-chip.sold .dot { background: var(--accent, #E11D2E); }
/* Статус aside */
body.new-design-product .po-status.sold { color: var(--accent-2, #B8152B); }
body.new-design-product .po-status.sold .dot { background: var(--accent, #E11D2E); }
/* При sold: цена зачёркнута */
body.new-design-product .pd-order.is-sold .po-price,
body.new-design-product .pd-order.is-sold .po-price-main { text-decoration: line-through; opacity: .55; }
/* При sold: скрыть через-Беларусь, тумблер 3-5 лет, кредит-блок */
body.new-design-product .pd-order.is-sold .po-price-alt,
body.new-design-product .pd-order.is-sold .passable-calc-switch,
body.new-design-product .pd-order.is-sold .po-credit,
body.new-design-product .pd-order.is-sold #poCreditForm,
body.new-design-product .pd-order.is-sold .po-trust { display: none !important; }
/* При sold: старый блок poContact скрыт, видна "Подобрать аналог" */
body.new-design-product .po-cta.is-sold .po-contact { display: none !important; }
body.new-design-product .po-sold-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 18px;
  background: var(--accent, #E11D2E) !important; color: var(--ink-invert, #FFFFFF) !important;
  border-radius: 12px; font-weight: 700; font-size: 14px;
  text-decoration: none !important;
  box-shadow: 0 2px 0 var(--accent-2, #B8152B), 0 6px 18px rgba(225,29,46,.22);
  transition: transform .1s ease, background .15s ease;
}
body.new-design-product .po-sold-cta:hover { background: var(--accent-2, #B8152B) !important; transform: translateY(1px); }

/* === Уникальный дизайн SEO-карточки + видео-отзывы (Phase 1, 2026-05-08) === */
/* SEO-карточка между Комплектацией и Статистикой */
body.new-design-product .pd-seo-section { padding: 24px 0; background: transparent; margin-top: 0; }
body.new-design-product .pd-seo-card {
  max-width: 920px; margin: 0 auto;
  background: linear-gradient(135deg, var(--bg-card, #FFFFFF) 0%, var(--bg, #F7F7F9) 100%);
  border: 1px solid var(--line, #ECECF0); border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 12px 32px rgba(0,0,0,.04);
}
body.new-design-product .pd-seo-eyebrow {
  display: inline-block;
  padding: 5px 12px; background: rgba(225,29,46,.08); color: var(--accent, #E11D2E);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; margin-bottom: 14px;
}
body.new-design-product .pd-seo-title {
  font-size: 22px !important; font-weight: 800 !important; line-height: 1.2;
  letter-spacing: -.01em; color: var(--ink, #0E0E12); margin: 0 0 12px;
}
body.new-design-product .pd-seo-desc {
  font-size: 14.5px !important; line-height: 1.65; color: var(--ink-3, #3D3D48); margin: 0;
}
@media (max-width: 600px) {
  body.new-design-product .pd-seo-card { padding: 20px; border-radius: 12px; }
  body.new-design-product .pd-seo-title { font-size: 19px !important; }
}

/* Видео-отзывы — секция с центрированным header */
body.new-design-product .pd-video-section { padding: 56px 0 40px !important; background: linear-gradient(180deg, var(--bg-card, #FFFFFF) 0%, var(--bg, #F7F7F9) 100%); }
body.new-design-product .pd-vr-head { text-align: center; max-width: 640px; margin: 0 auto 32px; }
body.new-design-product .pd-vr-eyebrow {
  display: inline-block; padding: 6px 14px;
  background: rgba(225,29,46,.08); color: var(--accent, #E11D2E);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; margin-bottom: 16px;
}
body.new-design-product .pd-vr-title {
  font-size: 32px; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 12px; color: var(--ink, #0E0E12); line-height: 1.15;
}
body.new-design-product .pd-vr-sub { font-size: 14.5px; line-height: 1.55; color: #6b6b62; margin: 0; }
@media (max-width: 600px) {
  body.new-design-product .pd-vr-title { font-size: 24px; }
}

/* === Корректировка ширины SEO-блока + видео-отзывы в общем стиле (2026-05-08) === */
/* SEO-карточка — на всю ширину контейнера .shell, не 920px */
body.new-design-product .pd-seo-card { max-width: none !important; width: 100% !important; }
/* Видео-отзывы — обычный pd-section с pd-sec-head, без центрирования */
body.new-design-product .pd-video-section { padding: 32px 0 !important; background: transparent !important; }
body.new-design-product .pd-video-section .pd-sec-head { max-width: none !important; margin-bottom: 24px !important; text-align: left !important; }

/* === Видео-отзывы: скрыть заголовок из data + переоформить плитки (2026-05-08) === */
body.new-design-product .pd-video-section .box-slider,
body.new-design-product .pd-video-section .box-slider__title { display: none !important; }
body.new-design-product .pd-video-section .swiper-slide { width: auto !important; padding: 0 !important; }
body.new-design-product .pd-video-section .swiper-wrapper { gap: 12px; }
body.new-design-product .pd-video-section .review {
  position: relative; width: 220px; aspect-ratio: 9/16;
  border-radius: 14px; overflow: hidden;
  background: var(--ink, #0E0E12);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 22px rgba(0,0,0,.10);
  transition: transform .2s ease;
}
body.new-design-product .pd-video-section .review:hover { transform: translateY(-2px); }
body.new-design-product .pd-video-section .review__video,
body.new-design-product .pd-video-section .review__image { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
body.new-design-product .pd-video-section .review__video { position: relative; }
body.new-design-product .pd-video-section .review__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: transform .2s ease;
}
body.new-design-product .pd-video-section .review__video:hover .review__play { transform: translate(-50%, -50%) scale(1.08); }
body.new-design-product .pd-video-section .slider-reviews__pagination { margin-top: 16px; text-align: center; }

/* === SEO-карточка — реально на всю ширину (max-width: none не сработал, выкручиваем сильнее) === */
body.new-design-product .pd-seo-section .shell { max-width: none !important; padding: 0 !important; }
body.new-design-product .pd-seo-section .pd-seo-card {
  max-width: none !important; width: 100% !important; margin: 0 !important;
  border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important;
  padding: 28px 24px !important;
}
@media (min-width: 1280px) { body.new-design-product .pd-seo-section .pd-seo-card { padding: 32px 32px !important; } }

/* === Похожие — гарантированный hover-overlay (если c-zones оверлейтся inline-style вне new-catalog.css) === */
body.new-design-product .pd-similar-grid .c-img { position: relative !important; overflow: hidden; }
body.new-design-product .pd-similar-grid .c-zones {
  position: absolute !important; inset: 0 !important;
  display: flex !important; z-index: 4 !important; pointer-events: auto !important;
}
body.new-design-product .pd-similar-grid .c-zone {
  flex: 1 1 0 !important; height: 100% !important;
  pointer-events: auto !important; cursor: pointer;
  background: transparent;
}

/* === SEO-секция: вернуть стандартный shell padding (как у других секций) — 2026-05-08 === */
body.new-design-product .pd-seo-section { padding: 24px 0 !important; }
body.new-design-product .pd-seo-section .shell { max-width: 1520px !important; margin: 0 auto !important; padding: 0 24px !important; }
@media (min-width: 1280px) { body.new-design-product .pd-seo-section .shell { padding: 0 32px !important; } }
@media (min-width: 1600px) { body.new-design-product .pd-seo-section .shell { padding: 0 40px !important; } }
/* Сам текст SEO-описания — без обрамлений (раньше была карточка-pd-seo-card, убираем её стилистику) */
body.new-design-product .pd-seo-desc {
  font-size: 14.5px !important; line-height: 1.7 !important;
  color: var(--ink-3, #3D3D48) !important; margin: 12px 0 0 !important;
  max-width: 920px;
}

/* === Stats block: убрать внутренний заголовок + дубль кнопки + фон карточки (2026-05-08) === */
body.new-design-product .psm-head-left .psm-title { display: none !important; }
body.new-design-product .psm-head-right .psm-link { display: none !important; }
body.new-design-product .psm {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
body.new-design-product .container.psm-wrap { padding: 0 !important; }
body.new-design-product .psm-head { margin-bottom: 16px !important; padding: 0 !important; }
body.new-design-product .psm-head-left { padding: 0 !important; }
body.new-design-product .psm-subtitle { font-size: 13px; color: #6b6b62; margin: 0 !important; }

/* === FAQ block redesign (2026-05-08) === */
body.new-design-product .faq-section { padding: 32px 0 40px !important; }
body.new-design-product .faq-section .shell { max-width: 1520px; margin: 0 auto; padding: 0 24px; }
body.new-design-product .faq-grid { display: grid; grid-template-columns: 360px 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { body.new-design-product .faq-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Левая колонка */
body.new-design-product .faq-left .sec-eyebrow {
  display: inline-block; padding: 5px 12px;
  background: rgba(225,29,46,.08); color: var(--accent, #E11D2E);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; margin-bottom: 14px;
}
body.new-design-product .faq-left .sec-h2 {
  font-size: 28px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15;
  color: var(--ink, #0E0E12); margin: 0 0 16px;
}
body.new-design-product .faq-left .sec-h2 em { font-style: italic; color: var(--accent, #E11D2E); font-weight: 800; }
body.new-design-product .faq-left .faq-lede { font-size: 14px; line-height: 1.55; color: #6b6b62; margin: 0 0 22px; }
body.new-design-product .faq-cta-row { margin-top: 8px; }
body.new-design-product .faq-cta-row .faq-all {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  background: var(--ink, #0E0E12) !important; color: var(--ink-invert, #FFFFFF) !important;
  border-radius: 999px; font-weight: 700; font-size: 14px;
  text-decoration: none !important;
  transition: transform .15s ease, background .15s ease;
}
body.new-design-product .faq-cta-row .faq-all:hover { background: var(--ink-2, #1E1E24) !important; transform: translateY(-1px); }

/* Правая колонка — все карточки одинаковой ширины */
body.new-design-product .faq-right { display: flex; flex-direction: column; gap: 10px; }
body.new-design-product .faq-right .faq {
  width: 100% !important; background: var(--bg-card, #FFFFFF); border: 1px solid var(--line, #ECECF0); border-radius: 14px;
  overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease;
}
body.new-design-product .faq-right .faq[open] { border-color: var(--ink, #0E0E12); box-shadow: 0 4px 16px rgba(0,0,0,.04); }

/* Убрать дефолтный маркер ▶ */
body.new-design-product .faq-right summary { list-style: none !important; }
body.new-design-product .faq-right summary::-webkit-details-marker { display: none !important; }
body.new-design-product .faq-right summary::marker { display: none !important; }

body.new-design-product .faq-right summary {
  display: grid !important;
  grid-template-columns: 56px 1fr 28px;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  user-select: none;
}
body.new-design-product .faq-right .faq-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; color: #b5b5be; letter-spacing: .04em;
}
body.new-design-product .faq-right .faq-q { font-size: 15.5px; font-weight: 700; color: var(--ink, #0E0E12); line-height: 1.35; }

/* Свой "+/−" вместо дефолтного маркера */
body.new-design-product .faq-right .faq-plus {
  position: relative; width: 22px; height: 22px; justify-self: end;
}
body.new-design-product .faq-right .faq-plus::before,
body.new-design-product .faq-right .faq-plus::after {
  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--ink, #0E0E12); border-radius: 1px;
}
body.new-design-product .faq-right .faq-plus::before { width: 14px; height: 2px; }
body.new-design-product .faq-right .faq-plus::after { width: 2px; height: 14px; transition: transform .2s ease, opacity .2s ease; }
body.new-design-product .faq-right .faq[open] .faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

body.new-design-product .faq-right .faq-body {
  padding: 0 20px 18px 92px;
  font-size: 14.5px; line-height: 1.65; color: var(--ink-3, #3D3D48);
}
body.new-design-product .faq-right .faq-body p { margin: 0; }
@media (max-width: 600px) {
  body.new-design-product .faq-right summary { grid-template-columns: 36px 1fr 24px; padding: 14px 16px; gap: 10px; }
  body.new-design-product .faq-right .faq-q { font-size: 14.5px; }
  body.new-design-product .faq-right .faq-body { padding: 0 16px 14px 62px; }
}

/* === Phase P4 — primary CTA submit в форме заявки (11.05.2026) ===
   В new-tokens.css есть body[class*="new-design"] button { background: none; color: inherit; padding: 0 }
   который перебивает .pd-mgr-submit. Повышаем specificity. */
body[class*="new-design"] .pd-mgr-submit {
  background: var(--accent, #E11D2E);
  color: var(--ink-invert, #FFFFFF);
  padding: 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body[class*="new-design"] .pd-mgr-submit:hover { background: var(--accent-2, #B8152B); }
/* === /Phase P4 === */

/* === Phase P1 — sticky tabs nav на моб (11.05.2026) ===
   7 табов с номерами «01 Характеристики ...» не помещаются на 390px.
   Уменьшаем шрифт/padding, скрываем номера, добавляем fade-out справа как подсказку. */
@media (max-width: 720px) {
  .pd-tabs {
    position: sticky;
    -webkit-overflow-scrolling: touch;
  }
  .pd-tabs::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 40px;
    background: linear-gradient(to left, var(--bg-card, #FFFFFF) 25%, rgba(255,255,255,0)); /* фон страницы белый */
    pointer-events: none;
    z-index: 1;
  }
  .pd-tabs-in {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .pd-tab {
    font-size: 12px;
    padding: 12px 12px;
    gap: 5px;
    scroll-snap-align: start;
  }
  .pd-tab .n { display: none; }
}
/* === /Phase P1 === */

/* === Phase K3 — webchat-виджет на моб (11.05.2026) ===
   Bitrix24-виджет .b24-widget-button-wrapper (66×66, z-index 10150) перекрывает форму/CTA.
   На моб: уменьшаем + полупрозрачность, при tap/hover возвращается. */
@media (max-width: 720px) {
  .b24-widget-button-wrapper {
    transform: scale(0.78);
    transform-origin: bottom right;
    opacity: 0.78;
    transition: transform .2s, opacity .2s;
    bottom: 12px !important;
    right: 10px !important;
  }
  .b24-widget-button-wrapper:hover,
  .b24-widget-button-wrapper:active,
  .b24-widget-button-wrapper:focus-within {
    transform: scale(1);
    opacity: 1;
  }
  /* Дополнительный воздух снизу для последних блоков (форма + FAQ) — виджет не упирается */
  body.new-design-product .pd-section:last-of-type { padding-bottom: 70px; }
}
/* === /Phase K3 === */

/* === Phase P3 — FAQ узкий столбец ответа на моб (11.05.2026) ===
   На моб номера 01/02/.. съедают 50% ширины + .faq-body имеет computed display:grid
   из неизвестного источника. Делаем .faq-body block, убираем номер. */
@media (max-width: 600px) {
  body.new-design-product .faq-right summary {
    grid-template-columns: 1fr 28px !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }
  body.new-design-product .faq-right .faq-num {
    display: none !important;
  }
  body.new-design-product .faq-right .faq-body {
    display: block !important;
    grid-template-columns: none !important;
    padding: 0 16px 14px 16px !important;
  }
  body.new-design-product .faq-right .faq-body p {
    width: auto !important;
    max-width: none !important;
  }
}
/* === /Phase P3 === */

/* === Phase P5 — пустая ячейка в спецификах на моб (11.05.2026) ===
   На 2 колонки grid если нечётное количество элементов → последний один в строке + пустая ячейка справа.
   Растягиваем последний на 2 колонки если он одинокий. */
@media (max-width: 980px) {
  body.new-design-product .pd-specs .pd-spec:last-child:nth-child(odd) {
    grid-column: span 2;
  }
}
/* === /Phase P5 === */

/* === 2026-07-22: порт фич со старого дизайна (отзывы/пилюля/sticky CTA/SEO-текст) === */

/* Пилюля доверия под ценой (порт trust-badge 13.07) */
body[class*="new-design"] .po-trust-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg, #F7F7F9); border: 1px solid #E5E2DB; border-radius: 10px;
  padding: 7px 12px; font-size: 12.5px; line-height: 1;
  text-decoration: none; color: var(--ink, #0E0E12);
  margin: 10px 0 2px; white-space: nowrap;
}
body[class*="new-design"] .po-trust-badge .ptb-st { color: #ffb400; font-size: 12px; letter-spacing: 1px; }
body[class*="new-design"] .po-trust-badge b { font-size: 13.5px; }
body[class*="new-design"] .po-trust-badge .ptb-cnt { color: #666; font-weight: 600; }
body[class*="new-design"] .po-trust-badge .ptb-rd { color: var(--accent, #E11D2E); font-weight: 700; }

/* SEO-текст секция */
body.new-design-product .pd-seotext { padding: 28px 0 8px; }
body.new-design-product .pd-seotext-in { max-width: 760px; font-size: 14.5px; line-height: 1.65; color: var(--ink-3, #3D3D48); }
body.new-design-product .pd-seotext-in p { margin: 0 0 10px; }
body.new-design-product .pd-seotext-in b { color: var(--ink, #0E0E12); }

/* Sticky CTA на мобилке (порт с прода 11.07, вёрстка new-design) */
/* 24.09.2026 (Ivan: скриншоты — в меню «Поделиться» видно только Telegram и MAX).
   Меню открывается вниз и выходит за нижний край шапки карточки, а у .product-hero стоит
   overflow: hidden (он держит декоративный фон) — всё ниже края обрезалось. Снимаем обрезку
   только пока меню открыто: в закрытом состоянии шапка ведёт себя как прежде. */
/* Слой шапки карточки держим НИЖЕ шапки сайта (header — z-index 50, его выпадающие меню — 60):
   24.09 его подняли до 1 000 000, и при открытом «Поделиться» заголовок карточки накрывал
   выпадашку «Авто из Кореи» (скриншот Ivan'а). Выше приветствия менеджера меню так не
   поднять — поэтому само приветствие прячем, пока «Поделиться» открыто (правило ниже). */
.product-hero:has(#pdSharePop:not([hidden])) { overflow: visible; position: relative; z-index: 40; }
body:has(#pdSharePop:not([hidden])) #enc-fab-greet { display: none !important; }
.pd-sticky-cta { display: none; }
/* 23.09.2026 (Ivan): панель с кнопками закреплена внизу и вместе с кнопкой чата и
   приветствием менеджера занимала нижнюю треть экрана. Теперь при прокрутке ВНИЗ она
   уезжает, при прокрутке вверх возвращается — управляет initStickyCtaAutohide()
   в js/new-product.js. Переход короткий: панель — основной путь к заявке, она должна
   возвращаться мгновенно. */
.pd-sticky-cta { transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.pd-sticky-cta.nd-cta-away { transform: translateY(130%); }
@media (max-width: 991px) {
  .pd-sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990;
    display: flex; gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--bg-card, #FFFFFF); box-shadow: 0 -4px 16px rgba(0,0,0,.12);
  }
  .pd-sticky-cta a {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; border-radius: 12px; font-weight: 700; font-size: 15px;
    line-height: 1; text-decoration: none;
  }
  .pd-sticky-cta .psc-call { border: 2px solid var(--accent, #E11D2E); color: var(--accent, #E11D2E); background: var(--bg-card, #FFFFFF); }
  .pd-sticky-cta .psc-form { background: var(--accent, #E11D2E); color: var(--ink-invert, #FFFFFF); }
  body.new-design-product { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  /* чат-виджет приподнимаем над панелью */
  body.new-design-product .b24-widget-button-wrapper { bottom: 84px !important; }
  body.new-design-product .encwc-btn { bottom: 84px !important; }
}
/* === /порт 2026-07-22 === */

/* === 2026-07-22: мини-схема состояния кузова в order-панели (вместо плиток преимуществ) === */
body.new-design-product .po-cond {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center;
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid #E5E2DB; border-radius: 14px; background: var(--bg-card, #FFFFFF);
  text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
body.new-design-product .po-cond:hover { border-color: #C4C0B7; box-shadow: 0 6px 20px rgba(0,0,0,.07); }
body.new-design-product .po-cond--ok   { background: linear-gradient(180deg,var(--bg, #F7F7F9) 0%,var(--bg-card, #FFFFFF) 62%); border-color: #CDE9D6; }
body.new-design-product .po-cond--soft { background: linear-gradient(180deg,var(--bg, #F7F7F9) 0%,var(--bg-card, #FFFFFF) 62%); }
body.new-design-product .po-cond--warn { background: linear-gradient(180deg,var(--bg, #F7F7F9) 0%,var(--bg-card, #FFFFFF) 62%); border-color: #F0DCC3; }

body.new-design-product .po-cond-map { position: relative; width: 92px; aspect-ratio: 1456 / 1364; }
body.new-design-product .po-cond-map img { width: 100%; height: 100%; object-fit: contain; display: block; opacity: .82; }
/* маркер в мини-формате: точка-кружок, цифры/буквы не влезают — код передаём цветом + title */
body.new-design-product .po-cond-map .pdc-pos { position: absolute; }
body.new-design-product .po-cond-mk {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  font-size: 0; line-height: 0; font-style: normal;
  border: 1.5px solid var(--ink-invert, #FFFFFF); box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  transform: translate(-50%, -50%);
}
body.new-design-product .po-cond-mk.type-X { background: #C42B1C; }   /* замена */
body.new-design-product .po-cond-mk.type-W { background: #E8830C; }   /* сварка */
body.new-design-product .po-cond-mk.type-C { background: #B07A16; }   /* коррозия */
body.new-design-product .po-cond-mk.type-A,
body.new-design-product .po-cond-mk.type-U,
body.new-design-product .po-cond-mk.type-T { background: #3E7BD6; }   /* царапина/неровность/скол */

body.new-design-product .po-cond-t { font-size: 14.5px; font-weight: 800; line-height: 1.2; }
body.new-design-product .po-cond-s { font-size: 12px; color: #6E6A63; margin-top: 3px; line-height: 1.35; }
body.new-design-product .po-cond-ins { margin-top: 6px; font-size: 12px; font-weight: 700; }
body.new-design-product .po-cond-ok  { color: #1F8A4C; }
body.new-design-product .po-cond-warn { color: #C97A0E; }
body.new-design-product .po-cond-bad { color: #C42B1C; }
body.new-design-product .po-cond-link { display: inline-block; margin-top: 7px; font-size: 12px; font-weight: 700; color: var(--accent, #E11D2E); }

@media (max-width: 480px) {
  body.new-design-product .po-cond { grid-template-columns: 78px 1fr; gap: 12px; padding: 11px 12px; }
  body.new-design-product .po-cond-map { width: 78px; }
  body.new-design-product .po-cond-t { font-size: 13.5px; }
}

/* Тег «плохой новости» в шапке карточки (ДТП с крупными выплатами, угон/затопление) */
body.new-design-product .pd-tag.pd-tag-bad {
  background: var(--bg, #F7F7F9); border-color: #F0C4C0; color: #A4301F; font-weight: 700;
}
/* === /2026-07-22 === */

/* === 2026-07-22: legal-чекбоксы и success-состояние форм карточки === */
body.new-design-product .pd-mgr-consent,
body.new-design-product .pcf-consent {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; line-height: 1.4; color: #6E6A63;
  margin: 2px 0 0; cursor: pointer;
}
body.new-design-product .pd-mgr-consent input[type="checkbox"],
body.new-design-product .pcf-consent input[type="checkbox"] {
  width: 15px; height: 15px; margin: 1px 0 0; flex: 0 0 15px;
  accent-color: var(--accent, #E11D2E); cursor: pointer;
}
body.new-design-product .pd-mgr-consent a,
body.new-design-product .pcf-consent a { color: inherit; text-decoration: underline; }
body.new-design-product .pd-mgr-consent a:hover,
body.new-design-product .pcf-consent a:hover { color: var(--accent, #E11D2E); }
/* 07.09.2026, аудит п.17: было #9A958C — контраст 2.98 к белому при кегле 12 px (норма 4.5).
   Фон формы белый (комментарий про «тёмный блок менеджера» устарел), поэтому просто темнее:
   #6E6A62 = 5.38, тёплый оттенок сохранён. */
body.new-design-product .pd-mgr-right .pd-mgr-consent { color: #6E6A62; }

body.new-design-product .nd-lead-ok {
  padding: 18px 16px; text-align: center;
  color: #1F8A4C; font-weight: 700; font-size: 14.5px; line-height: 1.5;
  background: var(--bg, #F7F7F9); border: 1px solid #CDE9D6; border-radius: 12px;
}
/* === /2026-07-22 === */

/* аватар менеджера без персоны (2026-07-22) */
body.new-design-product .pd-mgr-av--logo { display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.10); color:var(--ink-invert, #FFFFFF); font-size:0; }

/* === 2026-07-23: блок «Доказательства» (реальные фото + пруфы), индикатор цены, CTA видео === */

/* Доказательства — сетка фото */
body.new-design-product .pd-aph-photos {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px;
}
body.new-design-product .pd-aph-photo {
  position: relative; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden;
  border: 0.5px solid var(--line, #E5E2DB); background: var(--line, #ECECF0); display: block;
}
body.new-design-product .pd-aph-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.new-design-product .pd-aph-photo-more::after { content: ''; position: absolute; inset: 0; background: rgba(14,14,18,.55); }
body.new-design-product .pd-aph-more-badge {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
  color: var(--ink-invert, #FFFFFF); font-size: 18px; font-weight: 800;
}
@media (max-width: 720px) {
  body.new-design-product .pd-aph-photos { grid-template-columns: repeat(3, 1fr); }
  body.new-design-product .pd-aph-photo:nth-child(4),
  body.new-design-product .pd-aph-photo:nth-child(5) { display: none; }
  body.new-design-product .pd-aph-photo:nth-child(3) .pd-aph-more-badge { display: flex; }
}

/* Доказательства — карточки-пруфы */
body.new-design-product .pd-aph-proofs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
body.new-design-product .pd-aph-proof {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border: 0.5px solid var(--line, #E5E2DB); border-radius: 12px; background: var(--bg-card, #FFFFFF);
  text-decoration: none; color: inherit; transition: border-color .15s;
}
body.new-design-product .pd-aph-proof:hover { border-color: #C4C0B7; }
body.new-design-product .pd-aph-proof-ic { color: var(--accent, #E11D2E); flex-shrink: 0; display: flex; }
body.new-design-product .pd-aph-proof-ic svg { display: block; }
body.new-design-product .pd-aph-proof-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
body.new-design-product .pd-aph-proof-txt b { font-size: 13px; font-weight: 700; }
body.new-design-product .pd-aph-proof-txt span { font-size: 12px; color: #6E6A63; }
body.new-design-product .pd-aph-proof-arr { color: #A29E96; flex-shrink: 0; }

/* Индикатор актуальности цены */
body.new-design-product .po-fresh {
  display: flex; align-items: center; gap: 8px; margin: 8px 0 2px;
  font-size: 12.5px; color: #1F8A4C; font-weight: 600;
}
body.new-design-product .po-fresh-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #1F8A4C; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(31,138,76,.14);
}
body.new-design-product .po-fresh-trend { font-weight: 600; }
body.new-design-product .po-fresh-trend[hidden] { display: none; }
body.new-design-product .po-fresh-trend.down { color: #1F8A4C; }
body.new-design-product .po-fresh-trend.up { color: #C97A0E; }

/* CTA «Запросить видео» */
body.new-design-product .po-video {
  width: 100%; display: flex; align-items: center; gap: 11px; margin-top: 10px;
  padding: 12px 13px; border: 0.5px solid var(--line, #E5E2DB); border-radius: 12px;
  background: var(--bg-card, #FFFFFF); cursor: pointer; text-align: left; transition: border-color .15s;
}
body.new-design-product .po-video:hover { border-color: #C4C0B7; }
body.new-design-product .po-video-ic {
  width: 38px; height: 38px; border-radius: 10px; background: rgba(225,29,46,.08);
  color: var(--accent, #E11D2E); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
body.new-design-product .po-video-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
body.new-design-product .po-video-txt b { font-size: 14px; font-weight: 700; }
body.new-design-product .po-video-txt span { font-size: 12px; color: #6E6A63; }
body.new-design-product .po-video-arr { color: #A29E96; flex-shrink: 0; transition: transform .2s; }
body.new-design-product .po-video.is-open .po-video-arr { transform: rotate(90deg); }
body.new-design-product .po-video-form { margin-top: 8px; }
body.new-design-product .po-video-form[hidden] { display: none; }

/* 07.08.2026 (Ivan): «плашку про кредит сделать в стиле как ниже про видео».
   Кнопка кредита переиспользует .po-video, поэтому здесь только обнуляем старую
   обёртку .po-credit (была строкой-сноской: серый мелкий текст + отступы) и даём
   иконке свой оттенок, чтобы два соседних блока не выглядели одинаковыми. */
body.new-design-product .po-credit {
  display: block; padding: 0; margin: 0; border: 0; background: none; font-size: inherit;
}
body.new-design-product .po-credit .po-video { margin-top: 10px; }
body.new-design-product .po-credit-btn .po-video-ic {
  background: rgba(14,14,18,.06); color: var(--ink, #0E0E12);
}
body.new-design-product .po-credit-btn:hover .po-video-ic { background: rgba(14,14,18,.10); }
/* === /2026-07-23 === */

/* 2026-07-23: форма видео — оформление + красная кнопка (reset button съедал фон, как pd-mgr-submit) */
body.new-design-product .po-video-form {
  padding: 14px; border: 0.5px solid var(--line, #E5E2DB); border-radius: 12px;
  background: var(--bg, #F7F7F9); margin-top: 8px; display: flex; flex-direction: column; gap: 8px;
}
body.new-design-product .po-video-form .poc-c-form-h { font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
body.new-design-product .po-video-form .pcf-row { margin: 0; }
body.new-design-product .po-video-form input {
  width: 100%; box-sizing: border-box; padding: 11px 13px;
  border: 0.5px solid var(--line, #E5E2DB); border-radius: 10px; font-size: 14px; font-family: inherit;
}
body.new-design-product .po-video-form input:focus { outline: none; border-color: var(--ink, #0E0E12); }
body[class*="new-design"] .po-video-submit {
  width: 100%; padding: 13px; margin-top: 2px;
  background: var(--accent, #E11D2E); color: var(--ink-invert, #FFFFFF); border: none; border-radius: 10px;
  font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
body[class*="new-design"] .po-video-submit:hover { background: var(--accent-2, #B8152B); }

/* 2026-07-23: пункт «Оставить заявку» в меню «Связаться» — это <button>, а не <a>.
   Глобальный reset body[class*="new-design"] button{padding:0} (spec 0,1,2) съедал
   .poc-opt{padding:9px 10px} (spec 0,1,0) → пункт сжимался до 33px (у <a> 51px),
   иконка/текст/стрелка съезжали вверх, ряд ломался. Возвращаем метрики <a>
   правилом button.poc-opt (spec 0,2,2 бьёт reset). */
body[class*="new-design"] button.poc-opt {
  padding: 9px 10px;
  margin: 0;
  font: inherit;
  -webkit-appearance: none; appearance: none;
}

/* 2026-07-23: фирменные цветные иконки мессенджеров (Telegram/WhatsApp/MAX)
   вместо самодельных монохромных глифов. Иконки самодостаточны (свой цвет и форма),
   поэтому цветную подложку .poc-XX .poc-ico убираем и даём SVG заполнить 32×32. */
.poc-tg .poc-ico, .poc-wa .poc-ico, .poc-mx .poc-ico {
  background: none !important; border: 0; color: inherit;
}
.poc-ico-brand { padding: 0; overflow: visible; }
.poc-ico-brand svg { width: 32px; height: 32px; display: block; }

/* 2026-07-23: равные отступы вокруг черты под заголовком карточки.
   Было: над чертой 24px (.pd-title-row padding-bottom), под чертой 46px
   (18px .product-hero padding-bottom + 28px .pd-hero-grid padding-top) — галерея «проваливалась».
   Стало: 24px / 24px. */
body.new-design-product .hero.product-hero { padding-bottom: 0; }
body.new-design-product .pd-hero-grid { padding-top: 14px; }

/* 2026-07-23: цена «Через Беларусь» — сразу после подписи, а не прижата к правому краю
   (было justify-content: space-between). */
.po-price-alt { justify-content: flex-start; gap: 8px; }

/* 2026-07-23: блок «Цена через Беларусь» — вариант C (акцентная строка с полосой).
   Было: серая строка 12px «Через Беларусь:» — терялась, не читалась как второй ценник.
   Экономию не показываем осознанно (ветка rb на legacy-курсе → выгода завышена). */
.po-price-alt {
  display: flex; align-items: center; gap: 11px;
  background: var(--bg-card, #FFFFFF); border: 1px solid var(--line, #ECECF0); border-left: 3px solid var(--success, #1E8C4A);
  border-radius: 10px; padding: 11px 13px;
  box-shadow: 0 1px 3px rgba(16,24,40,.04);
  justify-content: flex-start;
}
.po-price-alt .pa-l {
  display: flex; align-items: center; gap: 6px;
  flex: 1 1 auto; min-width: 0; position: relative; color: inherit;
}
.po-price-alt .pa-title { font-weight: 700; font-size: 12.5px; line-height: 1.25; color: var(--ink, #0E0E12); }
.po-price-alt .pa-r {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 17px;
  color: var(--ink, #0E0E12); white-space: nowrap; flex: none;
}

/* значок «?» — reset button{background:none;padding:0} бьём спецификой 0,2,1 */
body[class*="new-design"] .pa-help {
  width: 16px; height: 16px; flex: none; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: var(--line-2, #F0F0F3); color: var(--muted, #6E6E76);
  font: 700 12px/16px 'Montserrat', sans-serif; text-align: center; cursor: pointer;
  transition: background .15s, color .15s;
}
body[class*="new-design"] .pa-help:hover { background: var(--line, #ECECF0); color: var(--ink, #0E0E12); }
.po-price-alt .pa-tip {
  position: absolute; left: -4px; bottom: calc(100% + 9px); z-index: 30;
  width: min(300px, 74vw);
  background: var(--ink, #0E0E12); color: var(--ink-invert, #FFFFFF); border-radius: 9px; padding: 10px 12px;
  font: 500 12px/1.45 'Montserrat', sans-serif; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease; box-shadow: 0 8px 24px rgba(16,24,40,.18);
}
.po-price-alt .pa-help:hover ~ .pa-tip,
.po-price-alt .pa-help:focus ~ .pa-tip,
.po-price-alt .pa-help:focus-visible ~ .pa-tip { opacity: 1; visibility: visible; }

/* 2026-07-23: на узких экранах «Цена через Беларусь» переносилась в 2 строки и поджимала цену */
@media (max-width: 430px) {
  .po-price-alt { gap: 8px; padding: 10px 11px; }
  .po-price-alt .pa-title { font-size: 12px; }
  .po-price-alt .pa-r { font-size: 15px; }
}

/* 2026-07-24: попап «Как мы проверяем авто» (методика осмотра с /faq/korea-used/) */
.pdhow { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; padding: 18px; }
.pdhow[hidden] { display: none; }
.pdhow-backdrop { position: absolute; inset: 0; background: rgba(14,14,18,.55); }
.pdhow-sheet {
  position: relative; width: min(560px, 100%); max-height: min(84vh, 720px); overflow: auto;
  background: var(--bg-card, #FFFFFF); border-radius: 16px; padding: 26px 26px 22px;
  box-shadow: 0 24px 64px rgba(16,24,40,.28);
}
body[class*="new-design"] .pdhow-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; padding: 0; border: 0;
  border-radius: 50%; background: var(--line-2, #F0F0F3); color: var(--muted, #6E6E76); font-size: 19px; line-height: 32px; cursor: pointer;
}
body[class*="new-design"] .pdhow-close:hover { background: var(--line, #ECECF0); color: var(--ink, #0E0E12); }
.pdhow-h { font-family: 'Montserrat','Montserrat',sans-serif; font-weight: 700; font-size: 21px; margin-bottom: 12px; color: var(--ink, #0E0E12); }
.pdhow-intro { font-size: 13.5px; line-height: 1.55; color: var(--ink-3, #3D3D48); margin: 0 0 14px; }
.pdhow-sub { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #A8A8B2; margin-bottom: 8px; }
.pdhow-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.pdhow-list li { position: relative; padding-left: 20px; font-size: 12.5px; line-height: 1.4; color: var(--ink, #0E0E12); }
.pdhow-list li::before { content: ''; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--line-2, #F0F0F3) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231E8C4A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/8px no-repeat; }
.pdhow-note { font-size: 12px; line-height: 1.5; color: var(--muted, #6E6E76); margin: 0 0 16px; }
.pdhow-actions { display: flex; gap: 8px; flex-wrap: wrap; }
body[class*="new-design"] .pdhow-video {
  flex: 1 1 auto; padding: 12px 16px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--accent, #E11D2E); color: var(--ink-invert, #FFFFFF); font-weight: 700; font-size: 13.5px; font-family: inherit;
}
body[class*="new-design"] .pdhow-video:hover { background: var(--accent-2, #B8152B); }
body[class*="new-design"] .pdhow-faq {
  flex: none; display: inline-flex; align-items: center; padding: 12px 16px; border-radius: 10px;
  border: 1px solid var(--line, #E5E2DB); color: var(--ink, #0E0E12) !important; font-weight: 600; font-size: 13.5px; text-decoration: none;
}
body[class*="new-design"] .pdhow-faq:hover { border-color: var(--ink, #0E0E12); }
@media (max-width: 560px) { .pdhow-list { grid-template-columns: 1fr; } .pdhow-sheet { padding: 20px 16px 16px; } }
/* кнопка-триггер была <a>, стала <button> — тот же вид (reset button бьём спецификой) */
body[class*="new-design"] button.pdc-score-a { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* 24.07.2026 (Ivan): «Как мы проверяем авто» была незаметной (мелкий текст на чёрном).
   Теперь ghost-кнопка на всю ширину скоринг-карточки: белая рамка, при наведении —
   белая заливка. Правило ниже по каскаду перекрывает reset-фикс той же специфичности. */
body[class*="new-design"] button.pdc-score-a {
  display: block; width: 100%;
  margin-top: auto; padding: 12px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.32); border-radius: 10px;
  color: var(--ink-invert, #FFFFFF); font-family: inherit; font-size: 13px; font-weight: 700; text-align: center;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
body[class*="new-design"] button.pdc-score-a:hover {
  background: var(--bg-card, #FFFFFF); color: var(--ink, #0E0E12); border-color: var(--ink-invert, #FFFFFF);
}

/* 2026-07-25 (Ivan: «в комплектации сделать шрифт меньше, как у текста под ключ»):
   размер опций был ПЛАВАЮЩИМ — наследовался от родителя в rem и рос с шириной экрана
   (1280 → 12px, 1440 → 13.5, 1680 → 15.75, 1920 → 18px), тогда как текст SEO-блока
   .pd-seotext-in фиксирован 14.5px. На широком мониторе опции выглядели заметно крупнее.
   Фиксируем их на 14.5px — одинаково на всех ширинах. */
body.new-design-product .pd-eq-item,
body.new-design-product .pd-eq-item span,
body.new-design-product .pd-eq-list li {
  font-size: 14.5px;
  line-height: 1.5;
}

/* 2026-07-25: реальный класс строки опции — .pd-eq-it (не .pd-eq-item, тот от другой вёрстки).
   Размер наследовался от .shell, который масштабируется с шириной экрана (1920 → 18px).
   Фиксируем 14.5px — как у текста .pd-seotext-in «Под ключ из Кореи». */
body.new-design-product .pd-eq-it,
body.new-design-product .pd-eq-it span,
body.new-design-product .pd-eq-grid { font-size: 14.5px; line-height: 1.5; }

/* 2026-07-25 (Ivan): круглое фото менеджера вместо иконки-заглушки + строка должности */
body.new-design-product .pd-mgr-av { width: 52px; height: 52px; flex: none; padding: 0; overflow: hidden; border-radius: 50%; }
body.new-design-product .pd-mgr-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
body.new-design-product .pd-mgr-info .rl-title { font-size: 12px; color: var(--muted, #6E6E76); margin-top: 1px; }

/* 2026-07-25: объединённый блок «Под ключ из Кореи» — генерируемый текст под заголовком */
body.new-design-product .pd-seo-desc-section .pd-seotext-in { max-width: 760px; font-size: 14.5px; line-height: 1.65; color: var(--ink-3, #3D3D48); margin-top: 14px; }
body.new-design-product .pd-seo-desc-section .pd-seotext-in p { margin: 0 0 10px; }
body.new-design-product .pd-seo-desc-section .pd-seotext-in p:last-child { margin-bottom: 0; }
body.new-design-product .pd-seo-desc-section .pd-seotext-in b { color: var(--ink, #0E0E12); }

/* 2026-07-25: блок «Под ключ из Кореи» — две колонки: текст + «Что входит в цену» */
body.new-design-product .pd-seo-cols { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 40px; align-items: start; margin-top: 14px; }
body.new-design-product .pd-seo-cols .pd-seotext-in { margin-top: 0; }
body.new-design-product .pd-incl {
  border: 1px solid var(--line, #E5E2DB); border-radius: 14px; padding: 20px; background: var(--bg-card, #FFFFFF);
}
body.new-design-product .pd-incl-h { font-size: 14.5px; font-weight: 700; color: var(--ink, #0E0E12); margin-bottom: 12px; }
body.new-design-product .pd-incl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
body.new-design-product .pd-incl-list li { position: relative; padding-left: 24px; font-size: 13.5px; line-height: 1.4; color: var(--ink-3, #3D3D48); }
body.new-design-product .pd-incl-list li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--line-2, #F0F0F3) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231E8C4A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/9px no-repeat;
}
body.new-design-product .pd-incl-extra { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #E5E2DB; display: flex; flex-direction: column; gap: 3px; }
body.new-design-product .pd-incl-extra-t { font-size: 13px; font-weight: 700; color: var(--ink, #0E0E12); }
body.new-design-product .pd-incl-extra-s { font-size: 12px; line-height: 1.4; color: var(--muted, #6E6E76); }
body.new-design-product .pd-incl-note { margin-top: 12px; font-size: 12px; line-height: 1.45; color: var(--muted, #6E6E76); }
@media (max-width: 1024px) { body.new-design-product .pd-seo-cols { grid-template-columns: 1fr; gap: 22px; } }

/* 2026-07-25 (Ivan): растянуть правую карточку — шире (440px) и по высоте вровень с текстом.
   Примечание прижимается к низу (margin-top:auto), чтобы карточка не «висела» пустотой. */
body.new-design-product .pd-seo-cols { grid-template-columns: minmax(0,1fr) 440px; align-items: stretch; }
body.new-design-product .pd-seotext-in { max-width: none; }
body.new-design-product .pd-incl { display: flex; flex-direction: column; padding: 24px; }
body.new-design-product .pd-incl-list { gap: 10px; }
body.new-design-product .pd-incl-list li { font-size: 14px; }
body.new-design-product .pd-incl-note { margin-top: auto; padding-top: 14px; }
@media (max-width: 1024px) {
  body.new-design-product .pd-seo-cols { grid-template-columns: 1fr; }
  body.new-design-product .pd-incl-note { margin-top: 12px; }
}

/* 2026-07-25: снять max-width у текста внутри двухколоночного блока — правило выше
   (.pd-seo-desc-section .pd-seotext-in, spec 0,3,0) держало 760px и оставляло пустоту
   между текстом и карточкой. Здесь та же специфичность, но ниже по каскаду. */
body.new-design-product .pd-seo-desc-section .pd-seotext-in { max-width: none; }

/* 2026-07-25 (Ivan): карточка «Что входит в цену» должна начинаться НА ОДНОЙ ЛИНИИ
   с заголовком «Под ключ из Кореи», а не с уровня текста. Заголовок лежит вне
   .pd-seo-cols, поэтому делаем гридом сам .shell, а обёртку колонок «растворяем»
   через display:contents — её дети становятся ячейками общего грида:
   заголовок и текст — левая колонка (строки 1 и 2), карточка — правая на обе строки. */
@media (min-width: 1025px) {
  body.new-design-product .pd-seo-desc-section .shell {
    display: grid; grid-template-columns: minmax(0,1fr) 440px; column-gap: 40px; align-items: start;
  }
  body.new-design-product .pd-seo-desc-section .pd-sec-head { grid-column: 1; grid-row: 1; }
  body.new-design-product .pd-seo-cols { display: contents; }
  body.new-design-product .pd-seo-desc-section .pd-seotext-in { grid-column: 1; grid-row: 2; margin-top: 14px; }
  body.new-design-product .pd-seo-desc-section .pd-incl { grid-column: 2; grid-row: 1 / span 2; height: 100%; }
}

/* 2026-07-25 (Ivan): блок FAQ выбивался из карточки — заголовок и вопросы набраны жирным
   гротеском (800), тогда как все секции карточки используют Instrument Serif 400 + красный
   курсив в em (.pd-sec-head h2). Приводим к общему языку и облегчаем список вопросов. */
body.new-design-product .faq-left .sec-h2 {
  font-family: 'Montserrat', system-ui, sans-serif !important; font-weight: inherit !important;
  font-size: 34px; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 12px;
}
body.new-design-product .faq-left .sec-h2 em { font-style: italic; font-weight: 400; color: var(--accent, #E11D2E); }
/* eyebrow — нейтральная пилюля, как у блока менеджера (была ярко-розовая) */
body.new-design-product .faq-left .sec-eyebrow {
  background: var(--bg, #F7F7F9); color: var(--muted, #6E6E76); font-weight: 700;
  font-size: 12px; letter-spacing: .12em; padding: 5px 11px; margin-bottom: 12px;
}
body.new-design-product .faq-left .faq-lede { font-size: 13px; color: var(--muted, #6E6E76); margin: 0 0 18px; }
body.new-design-product .faq-left .faq-lede strong { color: var(--ink, #0E0E12); font-weight: 700; }

/* Вопросы: легче начертание, ровнее сетка, аккуратный ховер */
body.new-design-product .faq-right { gap: 8px; }
body.new-design-product .faq-right .faq { border-radius: 12px; border-color: var(--line, #E5E2DB); }
body.new-design-product .faq-right .faq:hover { border-color: #CFCFD6; }
body.new-design-product .faq-right .faq[open] { box-shadow: 0 2px 10px rgba(16,24,40,.05); }
body.new-design-product .faq-right summary { grid-template-columns: 40px 1fr 22px; gap: 12px; padding: 15px 18px; }
body.new-design-product .faq-right .faq-num { font-size: 12px; color: #C2C2C8; }
body.new-design-product .faq-right .faq-q { font-size: 14.5px; font-weight: 600; line-height: 1.4; }
body.new-design-product .faq-right .faq[open] .faq-q { font-weight: 700; }
body.new-design-product .faq-right .faq-a,
body.new-design-product .faq-right .faq > div:not(.faq-num) { font-size: 13.5px; line-height: 1.6; color: var(--ink-3, #3D3D48); }
/* CTA — как вторичные кнопки карточки, без «таблетки» на всю ширину */
body.new-design-product .faq-cta-row .faq-all { padding: 12px 20px; font-size: 13.5px; border-radius: 10px; }
@media (max-width: 900px) {
  body.new-design-product .faq-left .sec-h2 { font-size: 27px; }
  body.new-design-product .faq-right summary { grid-template-columns: 32px 1fr 20px; padding: 14px 15px; gap: 10px; }
}

/* 2026-07-25: вопросы FAQ были набраны декоративным Unbounded (шрифт акцентных заголовков) —
   в списке смотрелся тяжело. Переводим на основной текстовый Manrope. */
body.new-design-product .faq-right .faq-q { font-family: 'Montserrat', sans-serif; letter-spacing: -.005em; }

/* ============================================================
   2026-08-01 (Ivan: «блок с фото сделать как в старом дизайне — 1 большая
   фотка и 3 миниатюры с кол-вом фото всего»). Было 16 миниатюр в два ряда:
   на телефоне это лента мелких квадратиков. Стало: главное фото + три крупные
   миниатюры, на последней плашка «Ещё N фото». Остальные снимки остаются
   в галерее fancybox, но из ряда скрыты.
   ============================================================ */
body[class*="new-design"] .pd-thumbs.pd-thumbs-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  /* 03.08: базовое `.pd-thumbs` осталось от раскладки на 16 миниатюр и держит
     `grid-template-rows: repeat(2, 1fr) !important`. Колонки мы переопределили,
     а ряды — нет: под тремя миниатюрами оставался ПУСТОЙ второй ряд ~85px,
     он и читался как «огромный отступ после фото». */
  grid-template-rows: auto !important;
  gap: 8px !important;
  margin-top: 8px;
}
body[class*="new-design"] .pd-thumbs.pd-thumbs-3 .pd-thumb.is-hidden { display: none !important; }
body[class*="new-design"] .pd-thumbs.pd-thumbs-3 .pd-thumb {
  position: relative; aspect-ratio: 4 / 3;
  width: auto !important; height: auto !important; min-width: 0 !important; flex: none !important;
  border-radius: 10px; overflow: hidden; display: block;
}
body[class*="new-design"] .pd-thumbs.pd-thumbs-3 .pd-thumb img {
  width: 100% !important; height: 100% !important; object-fit: cover; display: block;
}
body[class*="new-design"] .pd-thumbs.pd-thumbs-3 .pd-thumb-more::before {
  content: ''; position: absolute; inset: 0; background: rgba(14, 14, 18, .58);
}
body[class*="new-design"] .pd-thumbs.pd-thumbs-3 .pd-thumb-more-count {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--ink-invert, #FFFFFF); font-size: 13px; font-weight: 700; text-align: center; padding: 0 6px; line-height: 1.25;
  background: none; border-radius: 0;
}
@media (max-width: 560px) {
  body[class*="new-design"] .pd-thumbs.pd-thumbs-3 { gap: 6px !important; }
  body[class*="new-design"] .pd-thumbs.pd-thumbs-3 .pd-thumb-more-count { font-size: 12px; }
}

/* ============================================================
   2026-08-01 (Ivan: «решить проблему с огромным кол-вом пилюль на карточке»).
   До заголовка шло 285px пилюль: 6 в .pd-meta (статус, «Обновлено», «Смотрят
   сейчас», «ID лота», «Поделиться», «Печать») и 4 в .pd-tags (VIN, страховая,
   кузов, владельцы). Ничего не удаляем — меняем вес: пилюлями остаются только
   статус и факты о состоянии, служебное становится обычной строкой.

   2026-08-03 (Ivan: «иконки поделиться и печати немного не вписываются
   и верхняя часть все еще очень много места занимает»):
   а) кнопки share/print несут класс `.m-chip`, поэтому правило ниже снимало
      с них рамку и паддинги — на телефоне они висели голыми иконками посреди
      пустой строки. Добавлено `:not(.m-share-btn)`.
   б) служебные подписи собраны в `.pd-meta-svc`, на телефоне уходят одной
      строкой под статус, а иконки встают справа от статуса — минус целый ряд.
   ============================================================ */
/* «Обновлено», «Смотрят сейчас», «ID лота» — не пилюли, а подпись.
   ВАЖНО: `:not(.m-share-btn)` — кнопки share/print тоже `.m-chip`, им нужна рамка. */
body[class*="new-design"] .pd-meta .m-chip:not(.live):not(.sold):not(.m-share-btn) {
  background: none !important; border: 0 !important; padding: 0 !important;
  color: var(--muted, #6E6E76); font-size: 12px; font-weight: 500;
}
/* разделитель-точку не ставим: при переносе строки она оставалась висеть
   в начале второй строки. Разделяем полями — зазора контейнера не хватало,
   подписи «30 чел.» и «ID лота» слипались. */
body[class*="new-design"] .pd-meta-svc {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 16px; min-width: 0;
}
body[class*="new-design"] .pd-meta .m-chip.m-chip-link { color: var(--ink-3, #3D3D48); }
body[class*="new-design"] .pd-meta { gap: 8px 10px !important; align-items: center; }
body[class*="new-design"] .m-share { margin-left: auto; }
/* короткая формулировка — только на телефоне */
/* пара «полная / короткая формулировка». Изначально для строки под ценой,
   с 03.08 переиспользуется и для абзацев (блок менеджера) — поэтому у
   мобильного варианта `display` подбирается по тегу. */
body[class*="new-design"] .pdm-mob { display: none; }

/* факты о состоянии — оставляем пилюлями, но компактнее */
body[class*="new-design"] .pd-tags { gap: 6px !important; }
body[class*="new-design"] .pd-tags .pd-tag {
  padding: 5px 10px !important; font-size: 12px !important;
}

@media (max-width: 700px) {
  /* --- строка 1: статус слева, иконки справа; строка 2: служебные подписи --- */
  body[class*="new-design"] .pd-meta {
    display: grid !important; grid-template-columns: 1fr auto;
    align-items: center; row-gap: 8px; column-gap: 8px; padding-bottom: 12px;
  }
  body[class*="new-design"] .pd-meta > .m-chip { grid-column: 1; grid-row: 1; justify-self: start; }
  body[class*="new-design"] .pd-meta > .m-share {
    grid-column: 2; grid-row: 1; justify-self: end; margin-left: 0; gap: 8px;
  }
  body[class*="new-design"] .pd-meta > .pd-meta-svc {
    grid-column: 1 / -1; grid-row: 2; font-size: 12px;
    /* Три подписи должны лечь в ОДНУ строку — иначе шапка снова растёт на ряд.
       При 11.5px/gap 12 на 375px не хватало 5px, на 360px переносило.
       11px + короткие формулировки (.pdm-mob) + минимальный gap 6px укладывают
       строку даже в 360px (Galaxy A/S — там при gap 8 не хватало ровно 1px).
       space-between растягивает подписи по ширине на экранах пошире.
       Если запас всё же кончится — перенос на вторую строку, ничего не ломается. */
    gap: 2px 6px; flex-wrap: wrap; justify-content: space-between;
  }
  body[class*="new-design"] .pd-meta .m-chip:not(.live):not(.sold):not(.m-share-btn) { font-size: 12px; }
  body[class*="new-design"] .pdm-full { display: none !important; }
  body[class*="new-design"] .pdm-mob { display: inline !important; }
  body[class*="new-design"] p.pdm-mob { display: block !important; }

  /* share/print — круглые кнопки-иконки, подпись прячем целиком (не font-size:0,
     иначе пустой текстовый узел всё равно растягивает кнопку) */
  body[class*="new-design"] .pd-meta .m-share-btn {
    width: 32px !important; height: 32px !important;
    padding: 0 !important; gap: 0 !important;
    justify-content: center !important;
    border: 1px solid var(--line, #ECECF0) !important; border-radius: 50% !important;
    background: var(--bg-card, #FFFFFF) !important; margin: 0 !important; flex: none;
  }
  body[class*="new-design"] .pd-meta .m-share-btn .msb-t { display: none; }
  body[class*="new-design"] .pd-meta .m-share-btn svg { width: 15px; height: 15px; flex: none; }

  body[class*="new-design"] .pd-tags .pd-tag { padding: 4px 9px !important; font-size: 12px !important; }
  /* VIN на телефоне убираем из шапки: он есть в характеристиках ниже (.sp-val)
     и в базовых свойствах. Это снимает целую строку пилюль. */
  body[class*="new-design"] .pd-tags .pd-tag-vin { display: none !important; }
  /* хлебные крошки — в одну строку с горизонтальной прокруткой, без переноса */
  body[class*="new-design"] .pd-crumbs {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    -ms-overflow-style: none; scrollbar-width: none; font-size: 12px;
    padding: 12px 0 8px;
  }
  body[class*="new-design"] .pd-crumbs::-webkit-scrollbar { display: none; }
  /* последняя крошка обрезается на краю экрана и выглядит как баг вёрстки —
     растушёвываем правый край, чтобы читалось как «строка прокручивается» */
  body[class*="new-design"] .pd-crumbs {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  body[class*="new-design"] .pd-crumbs > * { white-space: nowrap; flex: none; }

  /* --- сжимаем вертикальные отступы шапки (Ivan: «верхняя часть много места») --- */
  body[class*="new-design"] .pd-subline {
    font-size: 12px; gap: 4px 8px; margin-top: 10px; letter-spacing: .02em;
  }
  /* «ИЗ КОРЕИ» — третье упоминание Кореи в одном экране (крошка + статус выше),
     из-за него строка характеристик переносилась на второй ряд. Прячем. */
  body[class*="new-design"] .pd-subline .pd-sl-country { display: none; }
  body[class*="new-design"] .pd-tags { margin-top: 12px; }
  /* черта под шапкой на телефоне не нужна — фото и так отделяет блоки,
     а вместе с отступами она съедала 21px (Ivan, 03.08) */
  body[class*="new-design"] .pd-title-row { padding-bottom: 8px; border-bottom: 0; }
  body.new-design-product .pd-hero-grid { padding-top: 12px; }
}

/* ============================================================
   2026-08-03 (Ivan): три замечания по блоку цены на телефоне.
   ============================================================ */

/* 1. Подсказка истории цены уезжала за край экрана.
      Она центрируется по бейджу (`left:50%; translateX(-50%)`), а бейдж на телефоне
      стоял у правого края карточки → на 375px вылезало 12px вправо. Прижали подсказку
      правым краем к бейджу (03.08.2026).
      09.09.2026: бейдж переехал к ЛЕВОМУ краю (просьба Ivan'а выровнять его со всем
      столбцом), и подсказка стала уезжать за ЛЕВЫЙ край — она заметно шире бейджа
      (~180px против ~70px). Теперь прижимаем её левым краем. */
@media (max-width: 700px) {
  body[class*="new-design"] .price-history-arrow .ph-tooltip {
    left: 0; right: auto; transform: none;
    /* white-space: nowrap оставляем: естественная ширина подсказки ~180px,
       при right:0 она целиком помещается даже в 360px. С переносом строк
       «Цена упала на:» и дата ломались пополам. */
  }
}

/* 2. Стрелка стояла не по центру зелёного квадрата: padding был
      несимметричным (`5px 9px 5px 7px`) — вёрстка под вариант «стрелка + %»,
      а по факту в бейдже только стрелка. Центруем флексом. */
body[class*="new-design"] .price-history-arrow.visible {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  padding: 5px 8px;
}

/* 4. 09.09.2026 (Ivan: «в мобилке процент изменения цены нужно подвинуть к левому
      краю, чтобы было однородно с остальными»). Бейдж нёс собственный
      `margin-left: 10px` — на десктопе он стоит в одной строке с ценой, а на
      телефоне переносится на свою строку и этот отступ сдвигал его вправо
      относительно города, подписи и кнопок. Внутри `.po-price-main` зазоры
      держит `gap` контейнера, так что отступ здесь лишний. */
@media (max-width: 700px) {
  body[class*="new-design"] .po-price-main .price-history-arrow { margin-left: 0; }
}

/* 3. Тумблер «Расчёт по таможенной ставке …» приезжает из легаси
      `element_v2/style.css`, где размеры заданы в rem под старый шаблон
      с `html { font-size: 12px }` (1.5rem = 15px). В новом дизайне корень 14px,
      поэтому 1.5rem превращались в 21px: подпись в три строки, тумблер 62x34.
      Переводим в абсолютные px. */
body.new-design-product .passable-calc-switch {
  font-size: 14px !important; gap: 10px !important;
  margin-top: 14px !important; margin-bottom: 4px !important;
}
body.new-design-product .passable-calc-switch__text { font-size: 14px !important; line-height: 1.35 !important; }
body.new-design-product .passable-calc-switch__track {
  width: 44px !important; height: 24px !important; border-radius: 12px !important;
}
body.new-design-product .passable-calc-switch__thumb {
  top: 3px !important; left: 3px !important; width: 18px !important; height: 18px !important;
}
body.new-design-product .passable-calc-switch[aria-checked="true"] .passable-calc-switch__thumb {
  transform: translateX(20px) !important;
}
body.new-design-product .passable-calc-hint {
  font-size: 12px !important; padding-left: 54px !important; max-width: none !important;
  margin-top: 2px !important; margin-bottom: 12px !important;
}
@media (max-width: 700px) {
  body.new-design-product .passable-calc-switch,
  body.new-design-product .passable-calc-switch__text { font-size: 13px !important; }
  body.new-design-product .passable-calc-hint { font-size: 12px !important; padding-left: 54px !important; }
}

/* ============================================================
   2026-08-03 (Ivan: «давай кнопку расчёта в мобилке перенесём сюда» —
   стрелка от тумблера к строке под ценой).
   Тумблер меняет саму цену, поэтому на телефоне он встаёт сразу под подписью
   «с доставкой, таможней и утильсбором», а не через отзывы ниже.
   `.pd-order` — flex-колонка, поэтому хватает `order` и разметку не трогаем.
   ============================================================ */
@media (max-width: 700px) {
  body.new-design-product .pd-order > * { order: 3; }
  body.new-design-product .pd-order > .po-status,
  body.new-design-product .pd-order > .po-city-switch,
  body.new-design-product .pd-order > .po-price-main,
  body.new-design-product .pd-order > .po-price-lbl { order: 1; }
  body.new-design-product .pd-order > .passable-calc-switch,
  body.new-design-product .pd-order > .passable-calc-hint { order: 2; }
  /* отступы у тумблера обнуляем: в flex-колонке они складывались бы
     с `gap: 14px` контейнера и он повис бы в 28px от подписи */
  body.new-design-product .pd-order > .passable-calc-switch {
    margin-top: 0 !important; margin-bottom: 0 !important;
  }
  body.new-design-product .pd-order > .passable-calc-hint {
    margin-top: 0 !important; margin-bottom: 0 !important;
  }
}

/* ============================================================
   2026-08-03 (Ivan: «вот тут везде кажется разные отступы… разнобой,
   может разделители какие-то поставить»).
   Было: у контейнера `gap: 14px`, и поверх него каждый блок нёс свои
   margin-top/bottom (0,8,10,4,14…). Итоговые зазоры шли вразнобой:
   14 · 14 · 8 · 14 · 22 · 26 · 20 · 14 · 24 · 28.
   Стало: одна лесенка — 10px внутри смысловой группы, 20px + волосяная
   черта между группами. Группы: [цена] · [доверие и действия] · [состояние].
   ============================================================ */
body.new-design-product .pd-order { gap: 10px; }
body.new-design-product .pd-order > * { margin-top: 0 !important; margin-bottom: 0 !important; }
/* подпись «с доставкой, таможней…» — часть цены, прижата к ней */
body.new-design-product .pd-order > .po-price-lbl { margin-top: -4px !important; }
/* границы смысловых групп: 20px + волосяная черта посередине зазора */
body.new-design-product .pd-order > .po-trust-badge,
body.new-design-product .pd-order > .po-cond {
  position: relative; margin-top: 10px !important;
}
body.new-design-product .pd-order > .po-trust-badge::before,
body.new-design-product .pd-order > .po-cond::before {
  content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 1px;
  background: var(--line, #ECECF0); pointer-events: none;
}
/* если блоков состояния несколько — черта только перед первым */
body.new-design-product .pd-order > .po-cond + .po-cond { margin-top: 0 !important; }
body.new-design-product .pd-order > .po-cond + .po-cond::before { content: none; }

/* ============================================================
   2026-08-03 (Ivan: «дальше с этими отступами разберись» + «в характеристиках
   на мобилке шрифт какой-то огромный»).
   Было на телефоне:
     • от карточки цены до табов — 80px: складывались padding-bottom 40px
       у `.pd-hero-grid` и ещё 40px у `.pd-hero-section`;
     • от табов до характеристик — 48px (`.pd-section` padding-top);
     • между любыми двумя секциями — 96px (48 снизу + 48 сверху).
   Секции прозрачные (общий reset `background: transparent`), поэтому паддинги
   не «внутри плашки», а честно складываются в пустоту.
   Стало: 22px — единая единица секционного ритма на телефоне
   (44px между секциями, 22px до/после табов).
   ============================================================ */
@media (max-width: 700px) {
  body.new-design-product .pd-hero-grid { padding-bottom: 0; }
  body.new-design-product .pd-hero-section { padding-bottom: 22px; }
  body[class*="new-design"] .pd-section { padding-top: 22px; padding-bottom: 22px; }
  body[class*="new-design"] .pd-section.pd-video-section { padding-top: 22px; padding-bottom: 22px; }
  body[class*="new-design"] .faq-section { padding-top: 22px; padding-bottom: 28px; }

  /* характеристики: значение было 18px/700 при подписи 11px — на телефоне
     контраст читался как «огромный шрифт». 15px держит иерархию и снимает
     ~6px высоты с каждой ячейки */
  body[class*="new-design"] .pd-specs .sp-val { font-size: 15px; }
  body[class*="new-design"] .pd-specs .pd-spec { padding: 12px 14px; }
}

/* ============================================================
   2026-08-03 (Ivan: «меню находит на шапку» + «давай грамотно распределим
   характеристики: широкие рядом с широкими, узкие рядом с узкими»).
   ============================================================ */

/* 1. Табы наезжали на шапку. Причина двойная:
      • `position: sticky` у `.pd-tabs` на телефоне НЕ РАБОТАЕТ — предок `.wrapper`
        имеет `overflow-x: hidden`, а браузер приводит парный `overflow-y` к `auto`
        → `.wrapper` становится скролл-контейнером, и sticky считается относительно
        него, а не окна. Табы просто уезжают вверх вместе со страницей;
      • при этом `z-index: 50` больше, чем 21 у фиксированной шапки, поэтому в момент
        прохода мимо неё табы рисовались ПОВЕРХ логотипа.
      Лечим вторую половину — опускаем табы под шапку по слоям. Чтобы починить сам
      sticky, надо менять `.wrapper` на `overflow-x: clip` (глобально по шаблону,
      Safari 16+) — это отдельное решение, см. wiki. */
/* 1023px, а не 720: фиксированная мобильная шапка живёт до 1023px включительно
   (на 1024+ шапка обычная, в потоке, и накладываться не с чем) */
@media (max-width: 1023px) {
  body[class*="new-design"] .pd-tabs { z-index: 5; }
  /* 04.08.2026: sticky ожил (.wrapper переведён на overflow-x: clip, см. new-catalog.css).
     Без сдвига табы липнут к top: 0 и оказываются ПОД фиксированной шапкой — визуально
     их просто нет. --nd-hdr-h ставит new-product.js по реальной высоте шапки
     (101px до 599px, 108px на планшете), фолбэк 101px — если скрипт не отработал,
     табы встанут чуть ниже нужного, но останутся видимыми. */
  body[class*="new-design"] .pd-tabs { top: var(--nd-hdr-h, 101px); }
}

/* 2. Характеристики: длинные значения — во всю ширину отдельной строкой.
      Раскладку по «узкие/широкие» делает PHP (см. new-product-body.php,
      `$__spWideLen`), сюда приходит готовый класс. */
@media (max-width: 700px) {
  body[class*="new-design"] .pd-specs .pd-spec--wide { grid-column: 1 / -1; }
}

/* ============================================================
   2026-08-03 (Ivan: «в форме кредита вот эта штука выглядит не очень»).
   Итог расчёта `.poc-c-meta` — сетка в 3 колонки. В карточке шириной ~300px
   на колонку остаётся ~97px, а значения моноширинные с `white-space: nowrap`
   («3 910 500 ₽» ≈ 84px) — они вылезали за свою колонку и наезжали на соседнюю.
   Плюс подписи разной длины («СУММА КРЕДИТА» и «СТАВКА (ПРЕДВАРИТ.)» в две
   строки, «ПЕРЕПЛАТА» в одну) ставили значения на разные базовые линии.
   На телефоне разворачиваем в три строки «подпись слева — значение справа».
   ============================================================ */
@media (max-width: 700px) {
  body[class*="new-design"] .poc-c-meta {
    grid-template-columns: 1fr; gap: 7px; padding-top: 9px;
  }
  body[class*="new-design"] .poc-c-meta-i {
    flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px;
  }
  body[class*="new-design"] .poc-c-meta-l { flex: 0 1 auto; text-align: left; }
  body[class*="new-design"] .poc-c-meta-v { flex: 0 0 auto; font-size: 12.5px; }
  /* платёж — главная цифра блока, поднимаем её над подписью */
  body[class*="new-design"] .poc-c-result { font-size: 14px; font-weight: 700; }
  body[class*="new-design"] .poc-c-result span { font-size: 17px; font-weight: 800; }
  body[class*="new-design"] .poc-c-summary { padding: 11px 13px; gap: 8px; }
}

/* ============================================================
   2026-08-03 (Ivan: «схему повреждений сделаем друг под другом обе картинки,
   чтобы они были больше»).
   `.pdc-map` — две проекции в две колонки. На 375px каждая получалась ~140px
   шириной: ни кузов разглядеть, ни по метке попасть пальцем.
   На телефоне ставим их друг под друга — каждая на всю ширину карточки.
   Метки `.pdc-pos` спозиционированы в процентах внутри `.pdc-map-inner`,
   поэтому масштабируются сами.
   ============================================================ */
@media (max-width: 700px) {
  body[class*="new-design"] .pdc-map { grid-template-columns: 1fr; gap: 12px; }
  /* 03.08 (Ivan: «ширину схемы сделай как у блоков выше»): у `.pdc-map` был свой
     серый бокс с `padding: 14px`, из-за чего схемы были 253px против 281px
     у заголовка и легенды. Снимаем паддинг и фон — белые карточки схем встают
     ровно по ширине блоков выше, серому фону тут делать нечего (он всё равно
     оставался бы виден только в зазоре). */
  body[class*="new-design"] .pdc-map { padding: 0; background: none; }
}

/* ============================================================
   2026-08-03 (Ivan: «сделаем поиск по тексту комплектации, чтобы не просматривать
   все опции, а ввести "подогрев" и сразу увидеть»).
   Поле живёт между вкладками категорий и списком, фильтры складываются:
   активная вкладка И строка поиска. Логика — `initEqTabs` в js/new-product.js.
   ============================================================ */
body[class*="new-design"] .pd-eq-search {
  position: relative; display: flex; align-items: center; gap: 8px;
  margin: 12px 0 14px; padding: 0 12px;
  background: var(--bg-card, #FFFFFF); border: 1px solid var(--line, #ECECF0); border-radius: 10px;
  color: var(--muted, #6E6E76);
  transition: border-color .15s ease;
}
body[class*="new-design"] .pd-eq-search:focus-within { border-color: var(--ink, #0E0E12); }
body[class*="new-design"] .pd-eq-search > svg { flex: none; }
body[class*="new-design"] .pd-eq-search input {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: 0; background: none;
  font: inherit; font-size: 14px; color: var(--ink, #0E0E12);
  padding: 11px 0; -webkit-appearance: none; appearance: none;
}
body[class*="new-design"] .pd-eq-search input::placeholder { color: var(--muted, #6E6E76); }
body[class*="new-design"] .pd-eq-search input::-webkit-search-cancel-button { display: none; }
/* глобальный reset `body[class*="new-design"] button { background:none; padding:0 }`
   этой кнопке не мешает — она и должна быть голой иконкой, но фиксируем размер */
body[class*="new-design"] .pd-eq-search-clear {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  color: var(--muted, #6E6E76); cursor: pointer;
}
body[class*="new-design"] .pd-eq-search-clear:hover { color: var(--ink, #0E0E12); background: rgba(14,14,18,.06); }
body[class*="new-design"] .pd-eq-search-clear[hidden] { display: none; }
body[class*="new-design"] .pd-eq-nores {
  padding: 14px 2px; font-size: 13.5px; color: var(--muted, #6E6E76);
}
body[class*="new-design"] .pd-eq-nores[hidden] { display: none; }
@media (max-width: 700px) {
  body[class*="new-design"] .pd-eq-search { margin: 10px 0 12px; }
  body[class*="new-design"] .pd-eq-search input { font-size: 16px; padding: 10px 0; } /* 16px — иначе iOS зумит форму */
}

/* ============================================================
   2026-08-03 (Ivan: «где кол-во владельцев более 1 — вопросик, при наведении
   на который текст, что в Корее это не значит плохое состояние»).
   Компонент общий, не только про владельцев: `.nd-hint` > кнопка `?` + `.nd-hint-pop`.
   На десктопе раскрывается по наведению (CSS), на телефоне — тапом (initNdHints).
   ============================================================ */
body[class*="new-design"] .nd-hint { position: relative; display: inline-flex; vertical-align: middle; margin-left: 5px; }
body[class*="new-design"] .nd-hint-b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex: none;
  border: 1px solid currentColor !important; border-radius: 50% !important;
  background: none !important; padding: 0 !important;
  font: inherit !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important;
  color: inherit; opacity: .55; cursor: pointer;
  transition: opacity .15s ease;
}
body[class*="new-design"] .nd-hint-b:hover,
body[class*="new-design"] .nd-hint.is-open .nd-hint-b { opacity: 1; }
body[class*="new-design"] .nd-hint-pop {
  /* 03.08: было `position: absolute` — попап обрезался предком с `overflow: hidden`
     (`.pd-ins-grid` прячет переполнение ради скруглённых углов), и в блоке
     статистики от подсказки была видна одна строка. `fixed` + координаты из JS
     снимают и обрезку, и вылет за край экрана разом. */
  position: fixed; z-index: 2000; top: 0; left: 0;
  width: 260px; max-width: min(280px, calc(100vw - 32px));
  padding: 11px 13px; border-radius: 10px;
  background: #2C3E50; color: var(--ink-invert, #FFFFFF);
  /* 03.08: было `'Montserrat', sans-serif` — Manrope на сайте НЕ подключён
     (в document.fonts только Montserrat), поэтому подсказка падала на системный
     sans-serif и выглядела «не нашим шрифтом». `inherit` берёт Montserrat. */
  font-family: inherit; font-size: 12px; font-weight: 400; line-height: 1.45;
  letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
body[class*="new-design"] .nd-hint-pop[hidden] { display: none; }
body[class*="new-design"] .nd-hint-pop b { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 5px; }
body[class*="new-design"] .nd-hint-pop span { display: block; }
body[class*="new-design"] .nd-hint-pop span + span { margin-top: 6px; opacity: .82; }

/* Кнопка «Показать все N опций» (2026-08-03).
   `!important` на фоне/рамке/паддинге — иначе кнопку съедает общий reset
   `body[class*="new-design"] button { background:none; border:none; padding:0 }`
   из new-catalog.css. Он уже съел пять кнопок, см. feedback_new_design_section_bg_specificity. */
body[class*="new-design"] button.pd-eq-more {
  display: block; width: 100%; margin-top: 14px;
  padding: 11px 16px !important;
  background: var(--bg-card, #FFFFFF) !important;
  border: 1px solid var(--line, #ECECF0) !important;
  border-radius: 10px !important;
  font: inherit !important; font-size: 13.5px !important; font-weight: 700 !important;
  color: var(--ink, #0E0E12) !important;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
body[class*="new-design"] button.pd-eq-more:hover { border-color: var(--ink, #0E0E12) !important; background: rgba(14,14,18,.03) !important; }
body[class*="new-design"] button.pd-eq-more[hidden] { display: none; }

/* ============================================================
   2026-08-03 (Ivan: «шрифт текста в этом блоке очень крупный по сравнению
   с остальными»).
   Абзацы в SEO-описании рендерились 19.6px против 13-14.5px у соседей.
   Виноват голый `p { font-size: 1.4rem }` из легаси `template_*.css`
   (@media max-width:1000px): он писан под шаблон с `html{font-size: 12px}`,
   а в новом дизайне корень 14px → 1.4rem = 19.6px. Третий случай той же
   грабли за день (см. тумблер ставки и `element_v2/style.css`).
   На странице задеты ровно эти 5 абзацев — у остальных размер задан явно.
   ============================================================ */
body.new-design-product .pd-seo-desc-section .pd-seotext-in p {
  font-size: 14.5px; line-height: 1.65;
}

/* ============================================================
   2026-08-03 (Ivan: «похожие авто на мобилке прокручивались влево-вправо,
   а то много места занимает»).
   Было: сетка в одну колонку, 8 карточек по 436px = 3612px вертикали.
   Стало: горизонтальная лента со снапом, следующая карточка выглядывает
   справа — видно, что можно листать.
   ============================================================ */
@media (max-width: 700px) {
  body[class*="new-design"] .pd-similar-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important; padding-bottom: 2px;
    scrollbar-width: none; -ms-overflow-style: none;
    /* 07.08.2026: в горизонтальной ленте карточки выходили разной высоты (344 и 366px —
       зависит от того, есть ли строка комплектации), поэтому цены в соседних карточках
       стояли на разных уровнях. stretch выравнивает их по самой высокой, а margin-top:auto
       у блока цены прижимает число к низу — линия цен общая. */
    align-items: stretch;
  }
  body[class*="new-design"] .pd-similar-grid::-webkit-scrollbar { display: none; }
  body[class*="new-design"] .pd-similar-grid > * {
    flex: 0 0 auto; width: 270px; max-width: 82%;
    scroll-snap-align: start;
    /* height:100% с десктопа тут вредит: у ленты высота auto, ссылка на 100% замыкается
       сама на себя и карточка снова становится по контенту. Отдаём высоту stretch'у. */
    height: auto; align-self: stretch;
  }
}

/* ============================================================
   2026-08-03, замечания Ivan по блокам «Похожие авто» и «Персональный менеджер».
   ============================================================ */

/* 1. Цена в карточке похожего авто: серый бокс 79px высотой, а сама цена в нём
      всего 14px — крупная плашка ради мелкой цифры, читалось как ошибка вёрстки.
      Ужимаем бокс и делаем цену главной в нём. */
body[class*="new-design"] .pd-similar-grid .c-price-box { padding: 8px 10px; }
body[class*="new-design"] .pd-similar-grid .c-price {
  font-size: 17px; font-weight: 800; line-height: 1.15; color: var(--ink, #0E0E12);
}
body[class*="new-design"] .pd-similar-grid .c-price-hint {
  font-size: 12px; margin-top: 2px; color: var(--muted, #6E6E76);
}

/* 2. «на связи ежедневно 10:00–19:00 МСК» было целиком зелёным — читалось как
      статус «сейчас онлайн», хотя это график. Зелёной осталась только точка. */
body.new-design-product .pd-mgr-info .on {
  color: var(--muted, #6E6E76); font-weight: 500;
  display: flex; align-items: baseline; gap: 6px;
}
body.new-design-product .pd-mgr-info .on .on-dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success, #1E8C4A); transform: translateY(-1px);
}

/* 3. Кнопка «Запросить осмотр этого авто» переносилась на две строки. На телефоне
      подпись короткая (`.pdm-mob` в разметке), плюс запрещаем перенос. */
@media (max-width: 700px) {
  body.new-design-product .pd-mgr-submit { white-space: nowrap; }
}

/* ============================================================
   2026-08-03, вторая итерация по замечаниям Ivan.
   ============================================================ */

/* 1. Цена в карточке похожего авто: серый бокс тянулся во всю ширину карточки
      (234px) ради двух коротких строк. Ужимаем по содержимому. */
body[class*="new-design"] .pd-similar-grid .c-price-box {
  /* родитель — flex-колонка, а она растягивает детей (`align-items: stretch`),
     поэтому одного `inline-block` мало: нужен `align-self: start` */
  display: inline-block; width: auto; align-self: flex-start;
  padding: 7px 12px;
}

/* 2. Блок «Статистика цен»: значения приходят в rem из легаси
      (2rem/2.1rem при корне 14px = 28/29.4px) — на телефоне «4 279 000 – 4 279 000 ₽»
      разъезжалось на две строки. Задаём абсолютные размеры. */
@media (max-width: 700px) {
  body[class*="new-design"] .psm-stat-value { font-size: 19px !important; line-height: 1.25 !important; }
  body[class*="new-design"] .psm-stat-value.psm-red { font-size: 22px !important; }
  body[class*="new-design"] .psm-stat-label { font-size: 12px !important; }
  body[class*="new-design"] .psm-stat-delta { font-size: 12px !important; }
}

/* 3. «на связи ежедневно 10:00–19:00 МСК» переносилось на две строки, и «МСК»
      висело отдельной строкой. Подпись укорочена в разметке (зелёная точка и так
      говорит «на связи»), плюс запрещаем перенос. */
body.new-design-product .pd-mgr-info .on { white-space: nowrap; align-items: center; }

/* 2026-08-03 (Ivan: «в футере лишняя чёрная полоса»).
   У `.footer.new-ft` стоит `padding: 64px 0 24px`, а первым ребёнком идёт красный
   блок `.ft-cta`. Эти 64px и рисовались чёрной полосой над красным. Красный блок
   в футере есть всегда — верхний паддинг ему не нужен. */
body[class*="new-design"] .footer.new-ft { padding-top: 0; }

/* ============================================================
   2026-08-03 (Ivan: «в похожих авто цена всё ещё дурацкая, сделай нормально
   как в карточке товара» + «блок про персонального менеджера уже, чем весь
   остальной контент на странице»).
   ============================================================ */

/* 1. Цена в карточке похожего авто — по образцу карточки товара: без плашки,
      крупное число и приглушённая подпись под ним. Серый бокс на сером фоне
      карточки читался как случайный прямоугольник. */
body[class*="new-design"] .pd-similar-grid .c-price-box {
  background: none !important; padding: 0 !important; border: 0 !important;
  /* 03.08, вторая итерация (Ivan: «чтобы над ценой был текст про цену под ключ,
     а ниже уже цена»): порядок в разметке обратный (цена, потом подпись),
     переворачиваем `column-reverse` — так же, как на карточке товара:
     сперва «Цена "под ключ" в …», под ней крупное число. */
  display: flex; flex-direction: column-reverse; align-items: flex-start;
  /* 07.08.2026 (Ivan: «скачет вот тут надписи, давай на одной линии»): было margin-top: 8px,
     и цена висела сразу под текстом — а текст разной высоты (у части машин нет строки
     комплектации, у части название в две строки), поэтому в ряду цены прыгали на ~22px.
     auto прижимает блок к низу карточки, и линия цен становится общей для всего ряда.
     Правило именно здесь: этот блок ниже по файлу и перебивал ту же настройку сверху. */
  width: auto; gap: 1px; margin-top: auto;
}
body[class*="new-design"] .pd-similar-grid .c-price {
  /* у `.c-price` был свой `padding: 12px` из легаси — он и раздувал блок до 65px */
  padding: 0 !important;
  font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--ink, #0E0E12);
  font-family: 'Montserrat', sans-serif; letter-spacing: -.01em;
}
body[class*="new-design"] .pd-similar-grid .c-price-hint {
  font-size: 12px; margin: 0 !important; color: var(--muted, #6E6E76); font-weight: 500;
}

/* 2. `.pd-mgr` — «карточка» с фоном #F7F7F9, но это РОВНО фон страницы, поэтому
      карточки не видно, а её `padding: 24px` работает как лишний отступ: текст
      блока начинался на 24px правее всего остального контента страницы.
      На телефоне убираем боковые паддинги — блок встаёт по общей сетке. */
@media (max-width: 700px) {
  body.new-design-product .pd-mgr { padding-left: 0; padding-right: 0; }
}


/* Печатные шапка и подвал СКРЫТЫ НА ЭКРАНЕ.
   07.08.2026: правило display для них лежало только внутри @media print, а вне печати
   ничего не скрывало — блок вылез поверх страницы, Ivan увидел логотип с телефоном
   прямо над хлебными крошками. Правило вынесено наружу и идёт ПЕРЕД @media print,
   чтобы печатное display:flex его перебивало. */
.pd-print-head, .pd-print-foot { display: none; }

/* =========================================================================
   ПЕЧАТЬ / PDF — презентационная версия (07.08.2026)
   Ivan: «сделай версию для печати в виде презентации красиво, а не как сейчас.
   В шапке нужно лого, телефон, соцсети прописать текстом, чтобы с распечатки
   люди могли нас найти».

   Устройство: .pd-print-head и .pd-print-foot (в new-product-body.php) видны только
   здесь и через position:fixed повторяются на КАЖДОМ листе — Chrome и Safari так и
   печатают фиксированные элементы. Поля @page подобраны под их высоту.

   ⚠️ Блок обязан оставаться последним в файле: правила ниже перебивают его при равной
   специфичности (оба с !important → выигрывает последний). Уже наступали 07.08.
   ========================================================================= */
@media print {
  @page { size: A4; margin: 12mm 12mm 14mm; }
  html, body { background: var(--bg-card, #FFFFFF) !important; color: #111 !important; }
  body { font-size: 9.5pt !important; line-height: 1.45 !important; }

  /* --- Фирменная шапка на каждом листе --- */
  /* Шапка — обычный блок в начале документа, НЕ position:fixed.
     Chrome при печати кладёт fixed-элементы поверх текста на каждой странице и считает
     координаты от края печатной области: первая версия уехала вниз листа, а подвал
     перекрыл «Комплектацию». Повторяющиеся колонтитулы в Chrome честно делаются только
     через <thead>/<tfoot> таблицы — ради этого перевёрстывать карточку не стоит.
     Поэтому: фирменный титул на первом листе + блок контактов в конце. */
  .pd-print-head {
    display: flex !important; position: static;
    align-items: flex-end; justify-content: space-between;
    margin: 0 0 5mm; padding-bottom: 3mm; border-bottom: 1.5px solid var(--accent, #E11D2E);
    break-after: avoid;
  }
  .pph-brand { display: flex; align-items: baseline; gap: 4mm; }
  .pph-logo { height: 7mm; width: auto; display: block; }
  .pph-tag { font-size: 8pt; color: #55535A; letter-spacing: .02em; }
  .pph-contacts { text-align: right; line-height: 1.25; }
  .pph-phone { display: block; font-size: 12pt; font-weight: 800; letter-spacing: -.01em; color: var(--ink, #0E0E12); }
  .pph-site  { display: block; font-size: 8.5pt; color: #55535A; }

  /* --- Контакты внизу каждого листа: с бумаги не кликнуть, поэтому адреса текстом --- */
  /* Контакты — отдельным блоком в самом конце: человек дочитал и знает, куда писать */
  .pd-print-foot {
    display: flex !important; position: static;
    flex-wrap: wrap; justify-content: center; gap: 1.5mm 6mm;
    margin-top: 6mm; padding-top: 3mm; border-top: 1.5px solid var(--accent, #E11D2E);
    font-size: 8.5pt; color: var(--ink-3, #3D3D48); break-inside: avoid;
  }
  .pd-print-foot span { white-space: nowrap; }

  /* --- Убираем всё, что на бумаге не работает --- */
  #similar, #request, #reviews, #faq,
  .pd-sticky-cta, .pd-mini, .pd-tabs, .pd-tabs-wrap,
  .topbar, header, .header, .mobile-menu-fixed, .mnav-drawer, .mnav-sheet, .open-mobile-menu,
  footer, .footer, .copyright, .breadcrumbs, .crumbs, .pd-crumbs,
  .city-picker-wrapper, .cp-overlay, .cp-sheet, .cp-btn,
  [class*="SmartCaptcha"], .copy-notificate, .b24-widget-button-wrapper, [class*="webchat"],
  .m-share-btn, .pd-share-link-block, #pdSharePop, .m-share,
  .po-credit, .po-video, .po-reviews, .po-contact, .poc-row, .po-trust-badge,
  .pd-thumbs-more, .gal-arrow, .pdc-tip, .nd-hint, .nd-hint-pop, .pdc-cta,
  .pd-eq-search, .pd-eq-more, .pd-eq-tabs, .po-status,
  /* 07.08.2026, правки Ivan по распечатке: «Смотрят сейчас: 20 чел.» вычеркнуто —
     на бумаге счётчик живых просмотров бессмыслен (лист печатают и уносят). */
  .pd-viewers-chip, .m-chip-link .m-chip-arr,
  iframe, video, script, noscript { display: none !important; }
  a[href^="#"]:not(.pd-eq-it) { display: none !important; }

  /* --- Лист 1 как обложка: крупный заголовок, фото, цена --- */
  section.hero.product-hero { padding: 0 0 1.5mm !important; }
  h1 { font-size: 17pt !important; margin: 0 0 1.5mm !important; letter-spacing: -.02em; }
  .m-line, .pd-meta { font-size: 9pt !important; color: #55535A !important; }
  .pd-gallery { break-inside: avoid; }
  .pd-main-photo img { max-height: 88mm !important; width: auto !important; margin: 0 auto !important; }
  /* 11.08: под ужатой картинкой оставалось 467px пустоты — контейнер .pd-main-photo
     держал экранный aspect-ratio 16/10 (при ширине листа = 800px), а img внутри ужат
     до 88mm = 333px. Именно этот провал Ivan перечеркнул крестом. Контейнер должен
     обжимать картинку, а не наоборот. */
  .pd-main-photo { aspect-ratio: auto !important; height: auto !important;
                   min-height: 0 !important; display: block !important; line-height: 0 !important; }
  .pd-thumbs { display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
               grid-template-rows: auto !important; gap: 3mm !important;
               /* стрелка Ivan'а «подтянуть миниатюры к фото»: на экране между ними
                  большой воздух, на листе он превращался в 3 см пустоты */
               margin-top: 4mm !important; }
  .pd-thumbs img { max-height: 26mm !important; }
  .pd-gallery, .pd-main-photo { margin-bottom: 0 !important; }

  /* Зазор между блоком цены и характеристиками (крест Ivan'а на 2-й странице) */
  .pd-hero-grid { gap: 4mm !important; }
  #specs { padding-top: 0 !important; margin-top: 3mm !important; }

  /* Пустота под легендой карты повреждений (стрелка Ivan'а на 4-й странице):
     на экране у схемы фиксированное соотношение сторон под крупный рендер */
  .pdc-map { margin-top: 3mm !important; }
  .pdc-map-col, .pdc-map img, .pdc-map svg { max-height: 62mm !important; }
  .pdc-legend { margin-bottom: 0 !important; }

  /* Цена — акцентный блок обложки */
  .pd-order { border: 1.5px solid var(--ink, #0E0E12) !important; border-radius: 3mm !important;
              padding: 4mm 5mm !important; break-inside: avoid; }
  .po-price-main { font-size: 22pt !important; font-weight: 800 !important; }
  .po-price-lbl, .po-fresh { font-size: 8.5pt !important; color: #55535A !important; }

  /* --- Разрывы страниц.
     Первая версия начинала с нового листа КАЖДЫЙ раздел (#check, #eq, #about-car) —
     и получились полупустые страницы: Ivan перечеркнул одну целиком, где сверху висели
     только «Комплектация/VIN», а ниже пусто. Теперь принудительный разрыв только перед
     «Проверкой авто» (после неё идёт крупный блок состояния, который не должен начинаться
     в подвале листа), остальное укладывается потоком с запретом рвать карточки. --- */
  /* Принудительных разрывов НЕТ вовсе: любой из них оставлял хвост страницы пустым
     (Ivan перечеркнул такой лист крестом). Пусть блоки идут потоком, а от разрыва
     ПОСЕРЕДИНЕ карточки защищает break-inside: avoid ниже. */
  #check, #specs, #eq, #about-car { break-before: auto !important; page-break-before: auto !important; }

  /* 11.08 (Ivan): статистику цен на печать не выводим — на бумаге это график без
     интерактива и лишний лист. Данные живут на /statistic/. */
  #stats, section#stats { display: none !important; }

  /* Двухколоночная сетка «фото | цена» на бумаге давала дыру: колонки разной высоты,
     и под короткой оставалось пустое место до низа листа. В печати разворачиваем в поток. */
  /* Диагностика 07.08: остаток провала (40 из 55px) давал padding-bottom самой сетки
     .pd-hero-grid — на экране это воздух перед характеристиками, на листе дыра. */
  .pd-hero-grid { display: block !important; padding: 0 !important; margin-bottom: 0 !important; }
  .pd-hero-grid > * + * { margin-top: 3mm !important; }

  /* Замер в print-режиме (07.08): между блоком цены и характеристиками было 91px ≈ 24мм —
     ровно тот провал, который Ivan перечеркнул крестом. Складывался из padding-bottom
     секции hero, margin секции #specs и внутренних отступов .shell. Схлопываем все три. */
  section.pd-hero-section { padding-bottom: 0 !important; margin-bottom: 0 !important; }
  #specs { margin-top: 3mm !important; padding-top: 0 !important; }
  .pd-order { margin-bottom: 0 !important; }
  /* Между главным фото и миниатюрами было 25px — стрелка Ivan'а «подтянуть» */
  .pd-main-photo { margin-bottom: 0 !important; padding-bottom: 0 !important; }
  .pd-thumbs { margin-top: 2mm !important; }
  /* 11.08: остаток дыры (10px из 20) давал flex-gap самой .pd-gallery — на экране он
     отделяет фото от ленты миниатюр, на листе складывался с margin выше. Зазор
     оставляем один — те самые 2.5mm у .pd-thumbs. */
  .pd-gallery { gap: 0 !important; }
  /* Остаток провала давали вертикальные padding'и .shell внутри каждой секции —
     на экране они держат ритм страницы, на листе просто съедают место. */
  section.pd-section > .shell, section.pd-hero-section > .shell, section.hero > .shell {
    padding-top: 0 !important; padding-bottom: 0 !important;
  }
  section.pd-section { padding: 0 !important; margin: 4mm 0 0 !important; }
  section.pd-section { padding: 0 0 3mm !important; margin: 0 !important; }
  .shell { max-width: none !important; padding: 0 !important; }
  .sec-h2, h2 { font-size: 13.5pt !important; margin: 0 0 1.5mm !important; letter-spacing: -.01em; }
  .pd-sec-sub { font-size: 8.5pt !important; color: #55535A !important; margin-bottom: 2mm !important; }

  /* --- Скоринг: на экране белым по чёрному, а фоны при печати срезаются --- */
  .pdc-score, .pdc-score-top, .pdc-score-facts, .pdc-ck { background: var(--bg-card, #FFFFFF) !important; box-shadow: none !important; }
  .pdc-score { border: 1px solid #CFCFD6 !important; border-radius: 3mm !important; padding: 4mm !important; }
  .pdc-score *, .pdc-score-top *, .pdc-ck * { color: #111 !important; background-color: transparent !important; }
  .pdc-ck .s, .pdc-score-top .s, .pdc-sub { color: #55535A !important; }

  /* --- Комплектация в две колонки --- */
  .pd-eq-list, .pd-eq-grid, .pd-eq-pane { display: block !important; max-height: none !important; overflow: visible !important; }
  .pd-eq-list, .pd-eq-grid { columns: 2; column-gap: 8mm; }
  .pd-eq-it { font-size: 8.5pt !important; padding: .5mm 0 !important; break-inside: avoid; }

  /* --- Ничего не рвём посередине --- */
  .pd-specs-grid, .pd-spec, .pdc-map, .pd-dmg-card, .pd-ins-grid, .pd-ins-cell,
  .pdc-score, .pd-incl, .pd-stats-grid, table, .pdc-legend, .pd-ins { break-inside: avoid; page-break-inside: avoid; }
  h2, h3, .sec-h2 { break-after: avoid; page-break-after: avoid; }

  /* Город доставки: select скрыт, рядом печатается название текстом */
  #poCity, .po-city-switch select { display: none !important; }
  .po-city-print, .po-city-print[hidden] { display: inline !important; font-weight: 700; }
}

/* ==========================================================================
   PRINT SHEET — собственный документ под A4 (11.08.2026, Ivan)
   На экране не существует: одно правило снаружи, второе внутри @media print
   (грабля 07.08 — печатная шапка вылезла на живую страницу, потому что
   display задавали только внутри медиа-запроса).
   ========================================================================== */
.pd-sheet { display: none; }
@page { size: A4 portrait; margin: 10mm 11mm; }

@media print {
  /* Печатается ТОЛЬКО этот документ. Экранную вёрстку гасим целиком, вместе
     со старыми печатными шапкой/подвалом — они были костылём поверх сайта. */
  /* Гасим всё, что не является листом, не лежит внутри него и не содержит его.
     Через :has() — чтобы печать работала и без JS-переноса в конец body
     (перенос остаётся, он просто делает дерево короче). Раньше правило било
     по `body > *`, и при выключенном скрипте лист оставался внутри скрытого
     .wrapper — на печать уходил пустой лист. */
  /* 22.09.2026: гейт `:has(.pd-sheet)` — правило гасит сайт ТОЛЬКО когда печатный лист
     на странице действительно есть. Без него любая страница нового дизайна без листа
     (карточки Китая, лотов аукциона, японских лотов, мотоциклы) печаталась пустым
     листом с одними колонтитулами браузера — Ivan прислал такую распечатку China. */
  body[class*="new-design"]:has(.pd-sheet) *:not(:has(.pd-sheet)):not(.pd-sheet):not(.pd-sheet *) {
    display: none !important;
  }
  .pd-print-head, .pd-print-foot { display: none !important; }

  body.new-design-product .pd-sheet,
  body[class*="new-design"] .pd-sheet {
    display: block !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font: 400 9pt/1.35 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink, #0E0E12);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .pd-sheet * { box-sizing: border-box; }

  /* --- шапка ------------------------------------------------------------ */
  .ps-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    padding-bottom: 1.8mm; border-bottom: 1.4pt solid var(--accent, #E11D2E); margin-bottom: 3mm;
  }
  .ps-head-l { display: flex; align-items: baseline; gap: 3mm; }
  .ps-logo { height: 8mm; width: auto; display: block; }
  .ps-slogan { font-size: 8pt; color: #55535A; }
  .ps-head-r { text-align: right; line-height: 1.25; }
  .ps-phone { display: block; font-size: 13pt; font-weight: 800; letter-spacing: -.02em; }
  .ps-site  { display: block; font-size: 8pt; color: #55535A; }

  /* --- заголовок -------------------------------------------------------- */
  .ps-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 6mm; margin-bottom: 2.5mm; }
  .ps-h1 { font-size: 17pt; font-weight: 800; letter-spacing: -.025em; margin: 0; line-height: 1.15; }
  .ps-grade { font-size: 9.5pt; color: var(--ink, #0E0E12); margin-top: .8mm; }
  .ps-facts { font-size: 8.5pt; color: #55535A; margin-top: 1.4mm; letter-spacing: .01em; }
  .ps-id { text-align: right; font-size: 7.5pt; color: var(--muted, #6E6E76); white-space: nowrap; }
  .ps-id span { display: block; }
  .ps-id-url { color: #55535A; }

  /* --- фото + цена ------------------------------------------------------ */
  .ps-top { display: flex; gap: 4mm; margin-bottom: 3.5mm; break-inside: avoid; }
  .ps-gal { flex: 1 1 62%; min-width: 0; }
  .ps-photo-main {
    display: block; width: 100%; height: 42mm; object-fit: contain;
    background: var(--bg, #F7F7F9); border-radius: 2mm; border: .5pt solid var(--line, #ECECF0);
  }
  .ps-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6mm; margin-top: 1.6mm; }
  .ps-thumbs img {
    display: block; width: 100%; height: 11mm; object-fit: cover;
    border-radius: 1.2mm; border: .5pt solid var(--line, #ECECF0);
  }

  .ps-price {
    flex: 0 0 38%; border: .8pt solid var(--ink, #0E0E12); border-radius: 2mm;
    padding: 3mm 3.5mm; align-self: flex-start;
  }
  .ps-price-lbl { font-size: 7.5pt; text-transform: uppercase; letter-spacing: .09em; color: #55535A; }
  .ps-price-val { font-size: 19pt; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: .7mm 0 .3mm; }
  .ps-price-city { font-size: 8pt; color: #55535A; }
  .ps-incl-h {
    font-size: 7.5pt; text-transform: uppercase; letter-spacing: .09em; color: #55535A;
    margin: 3mm 0 1.4mm; padding-top: 2.5mm; border-top: .5pt solid var(--line, #ECECF0);
  }
  .ps-incl { list-style: none; margin: 0; padding: 0; }
  .ps-incl li { font-size: 8pt; line-height: 1.4; padding-left: 4mm; position: relative; }
  .ps-incl li::before {
    content: ""; position: absolute; left: 0; top: 1.5mm;
    width: 2.2mm; height: 1.1mm; border-left: 1pt solid var(--ink, #0E0E12); border-bottom: 1pt solid var(--ink, #0E0E12);
    transform: rotate(-45deg);
  }
  .ps-terms { margin-top: 2.5mm; padding-top: 2.2mm; border-top: .5pt solid var(--line, #ECECF0); }
  .ps-term { display: block; font-size: 8pt; line-height: 1.4; color: var(--ink, #0E0E12); }
  .ps-term + .ps-term { margin-top: .8mm; font-size: 7.4pt; color: #55535A; }
  .ps-price-note { font-size: 7pt; line-height: 1.35; color: var(--muted, #6E6E76); margin-top: 2mm; }

  /* --- секции ----------------------------------------------------------- */
  .ps-block { margin-bottom: 2.6mm; }
  .ps-h2 {
    font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: .11em;
    color: var(--ink, #0E0E12); margin: 0 0 2mm; padding-bottom: 1.2mm; border-bottom: .5pt solid var(--ink, #0E0E12);
    display: flex; justify-content: space-between; align-items: baseline;
    break-after: avoid; page-break-after: avoid;
  }
  .ps-h2-n { font-weight: 400; letter-spacing: .04em; color: var(--muted, #6E6E76); }

  /* характеристики: три колонки, точечный лидер между ключом и значением */
  .ps-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 6mm; }
  .ps-spec {
    display: flex; align-items: baseline; gap: 1.5mm;
    font-size: 8.5pt; padding: .9mm 0; border-bottom: .4pt dotted #D8D8DE;
    break-inside: avoid;
  }
  .ps-spec .k { color: #55535A; white-space: nowrap; }
  .ps-spec .v { margin-left: auto; font-weight: 600; text-align: right; }
  .ps-spec .v.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 8pt; letter-spacing: -.01em; }
  .ps-spec-wide { grid-column: 1 / -1; }

  /* состояние */
  .ps-cond { display: flex; gap: 5mm; align-items: flex-start; }
  .ps-score {
    flex: 0 0 42mm; border: .8pt solid var(--ink, #0E0E12); border-radius: 2mm; padding: 2.5mm 3mm;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: .8mm;
  }
  .ps-score .n { font-size: 19pt; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
  .ps-score .d { font-size: 9pt; color: var(--muted, #6E6E76); }
  .ps-score .t { flex: 1 0 100%; font-size: 8pt; color: #55535A; margin-top: 1mm; }
  /* 11.08: columns вместо grid НЕ использовать — в печати Chrome растягивает
     многоколоночный блок до низа листа, и следующий элемент (подвал) уезжает
     на пустую вторую страницу, хотя место оставалось. */
  .ps-cond-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto;
                  display: grid; grid-template-columns: 1fr 1fr; gap: 0 6mm; align-content: start; }
  .ps-cond-list li {
    font-size: 8.5pt; line-height: 1.5; padding-left: 3.4mm; position: relative; break-inside: avoid;
  }
  .ps-cond-list li::before {
    content: ""; position: absolute; left: 0; top: 1.7mm; width: 1.4mm; height: 1.4mm;
    border-radius: 50%; background: var(--ink, #0E0E12);
  }
  .ps-cond-note { font-size: 6.8pt; line-height: 1.28; color: var(--muted, #6E6E76); margin-top: 1mm; }

  /* комплектация: четыре колонки мелким */
  /* Высота ограничена намеренно: лист обязан оставаться одностраничным даже
     у машин с 60+ опциями. Лишнее прячется, счётчик «и ещё N» рядом с заголовком
     говорит, сколько всего. Без этого страховщика лист у богатых комплектаций
     переползал на второй лист, где оставался один подвал. */
  .ps-opts { list-style: none; margin: 0; padding: 0;
             display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 5mm;
             align-content: start; max-height: 50mm; overflow: hidden; }
  .ps-opts li {
    font-size: 7pt; line-height: 1.36; padding-left: 2.6mm; position: relative; break-inside: avoid;
  }
  .ps-opts li::before { content: "·"; position: absolute; left: .6mm; color: var(--muted, #6E6E76); }
  .ps-opts-rest { font-size: 7.5pt; color: var(--muted, #6E6E76); margin-top: 1.6mm; }

  /* --- подвал ----------------------------------------------------------- */
  .ps-foot {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 6mm;
    border-top: 1.4pt solid var(--accent, #E11D2E); padding-top: 1.8mm; margin-top: 2.2mm;
    break-inside: avoid; page-break-inside: avoid;
  }
  .ps-foot-h { font-size: 8.5pt; font-weight: 700; }
  .ps-foot-c { font-size: 8pt; color: #55535A; margin-top: .6mm; }
  .ps-foot-r { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6mm 4mm; text-align: right; max-width: 105mm; }
  .ps-foot-r span { font-size: 7.2pt; color: #55535A; white-space: nowrap; }

  /* Заголовок никогда не остаётся один в низу листа — из-за этого раньше
     появлялись полупустые страницы с одной строкой «Проверка авто». */
  .ps-h2, .ps-price-lbl, .ps-incl-h { break-after: avoid; page-break-after: avoid; }
}

/* 24.08.2026 (Ivan, снимок карточки авто: «на стр авто есть лишний серый блок какой то»).
   На телефоне колонки .pd-mgr складываются одна под другую, и серый контейнер оставался
   видимым только полосой сверху/снизу и уголками вокруг белой формы — выглядел как лишний
   слой. Разводим на две самостоятельные карточки: серая с текстом и менеджером,
   белая с формой в тонкой рамке. Компьютерная раскладка (две колонки внутри серого) не задета. */
@media (max-width: 700px) {
  /* 07.09.2026 (вечер, вторая приёмка): 16px возвращены. Днём здесь стояло 12px —
     «к канону nd-fix-h.css». На Корее и Китае канон и правда 12px и он всё равно
     форсится !important, но на мотоциклах и аукционе nd-fix-h.css не подключается,
     и правка молча поменяла им вид формы и серой карточки на телефоне. Замер канона
     радиусов на этих страницах (1440px, блоки шире 120px и выше 60px): 14px — 25 блоков,
     12px — 11, 20px — 6, то есть единого 12px там нет вовсе, а ближайший родственник
     блока заявки, карточка заказа `.pd-order`, стоит на 16px. Радиус блока заявки
     берём от канона ЕГО страницы: 12px на Корее и Китае (форсит nd-fix-h.css),
     16px на мотоциклах и аукционе. Внутри блока серая карточка и форма всегда равны. */
  .pd-mgr { background: transparent; padding: 0; border-radius: 16px; gap: 12px; }
  .pd-mgr-left { background: var(--bg, #F7F7F9); border-radius: 16px; padding: 20px; }
  .pd-mgr-right { border: 1px solid var(--line, #ECECF0); border-radius: 16px; }
}



/* ============================================================
   31.08.2026 — правки по замечаниям Никиты, п. 54 / 56 / 58 (карточка авто).
   Всё скоуплено `@media (min-width: 701px)`: мобильная раскладка карточки
   уже выверена отдельными блоками 03.08 и не должна поехать.

   п.54 «фото сразу на первом экране».
     Было: до верхней кромки фото 373px (28 max-bar + 41 topbar + 69 header
     + 20 hero + 38 крошки + 47 мета + 106 заголовок + 24 hero-grid),
     низ фото 915px при вьюпорте 900 — нижняя кромка за сгибом.
     Стало: −52px (14 / 12 / 10 / 2 / 8 / 16 / 14) → верх 321, низ 863 —
     фото целиком + первый ряд миниатюр.

   п.56 «слишком много размеров текста».
     Было: 25 размеров font-size на десктопе (9…42px), из них 5 в диапазоне
     9–11,5 и три «полушага» 12,5 / 15 / 17.
     Стало: сведены к шкале 12 / 13 / 13,5 / 14,5 / 16 / 19 / 24 —
     остаётся 13 размеров. Дисплейные 34 / 36 / 40 (H1 карточки, заголовок
     секции Instrument Serif, цена) не трогаем — это канон.

   п.58 «много пустого места» — см. точечные правки padding выше;
     здесь только то, что перебивается !important из new-catalog.css.
   ============================================================ */
@media (min-width: 701px) {

  /* ---- п.54: сжатие шапки карточки (перебиваем !important из new-catalog.css) ---- */
  body.new-design-product section.hero.product-hero { padding-top: 14px !important; }
  body.new-design-product .pd-crumbs { margin-bottom: 12px !important; }
  body.new-design-product .pd-title-row { margin-top: 2px; }

  /* ---- п.56 → 12px: микроподписи (было 9 / 10 / 10,5 / 11 / 11,5) ---- */
  body.new-design-product .pdc-score-val .m,
  body.new-design-product .pd-mgr-right .ag,
  body.new-design-product .pd-ins-kicker,
  body.new-design-product .poc-c-meta-l,
  body.new-design-product .pd-ins-acc-tbl thead th,
  body.new-design-product .pcf-legal,
  body.new-design-product .poc-c-form .pcf-legal,
  body.new-design-product .pdc-score-facts .pdc-ck .s,
  body.new-design-product .faq-left .sec-eyebrow,
  body.new-design-product .pd-mini-info .mn-s,
  body.new-design-product .m-chip,
  body.new-design-product .m-share button,
  body.new-design-product .pd-tag,
  body.new-design-product .po-price-lbl,
  body.new-design-product .po-contact-hd,
  body.new-design-product .po-credit .c-txt,
  body.new-design-product .pd-spec .sp-lbl,
  body.new-design-product .pd-spec .sp-sub,
  body.new-design-product .pdc-score-s,
  body.new-design-product .pd-tag-vin .nd-vin,
  body.new-design-product .pdc-ck .s,
  body.new-design-product .pdc-count,
  body.new-design-product .pdl-m,
  body.new-design-product .pdc-tip-note,
  body.new-design-product .pd-mgr-left .eyebrow,
  body.new-design-product .pd-mgr-info .rl,
  body.new-design-product .pd-mgr-info .on,
  body.new-design-product .pd-ins-s,
  body.new-design-product .pd-ins-foot,
  body.new-design-product .msp-title,
  body.new-design-product .pd-similar-grid .c-props,
  body.new-design-product .pd-ins-flag,
  body.new-design-product .po-trust-badge .ptb-st,
  body.new-design-product .pdhow-sub,
  body.new-design-product .faq-right .faq-num,
  body.new-design-product .pd-similar-grid .c-price-hint,
  body.new-design-product .poc-s,
  body.new-design-product .price-history-arrow .ph-tooltip .ph-list,
  body.new-design-product .poc-c-form .pcf-lbl,
  body.new-design-product .pd-similar-grid .c-year,
  body.new-design-product .pd-ins-acc-tbl tbody td,
  body.new-design-product .pd-sold-badge-date,
  body.new-design-product .po-video-txt span,
  body.new-design-product .pd-incl-note { font-size: 12px; }
  /* у кнопок «Поделиться / Печать» исходные 11px стоят с !important (new-product.css:1180) */
  body.new-design-product .pd-meta button.m-share-btn { font-size: 12px !important; }

  /* ---- п.56 → 13px: вторичный текст (было 12,5) ---- */
  body.new-design-product .pdc-score-facts .pdc-ck .t,
  body.new-design-product .poc-c-form-h,
  body.new-design-product .po-trust-badge,
  body.new-design-product .po-fresh,
  body.new-design-product .po-price-alt .pa-title,
  body.new-design-product .pdhow-list li,
  body.new-design-product .nd-hint-pop b { font-size: 13px; }

  /* ---- п.56 → 16px: акцентные числа (было 15 / 17 / 18) ---- */
  body.new-design-product .pdc-score-t,
  body.new-design-product .po-price-alt .pa-r,
  body.new-design-product .pd-mini-price,
  body.new-design-product .pd-thumb-more-count,
  body.new-design-product .pd-spec .sp-val { font-size: 16px; }

  /* ---- п.56 → 19px: подзаголовки блоков и цена в «Похожих» (было 20 / 21 / 22) ---- */
  body.new-design-product .pd-ins-t,
  body.new-design-product .pdhow-h,
  body.new-design-product .pd-similar-grid .c-price { font-size: 19px; }
}

/* ============================================================
   31.08.2026 — ЗАГОЛОВКИ, ВАРИАНТ А в карточке авто (решение Ivan'а).
   Секционные заголовки карточки были Instrument Serif 400; приводим к общему
   стилю сайта — Montserrat 800, акцент внутри <em> красным без курсива.
   Крупные декоративные цифры (.pdk-compare .v и подобные) не трогаем.
   ============================================================ */
body[class*="new-design"] .pd-mgr h3,
body[class*="new-design"] main.content .pd-sec-h,
body[class*="new-design"] main.content h2 {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-style: normal !important;
}
body[class*="new-design"] main.content h2 em,
body[class*="new-design"] .pd-mgr h3 em {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: inherit !important;
  color: var(--accent, #E11D2E) !important;
}

/* 31.08.2026 — мобильные размеры заголовков в карточке (проверка на 390px: оставались
   36px, потому что медиазапрос варианта А лежит в new-catalog.css и сюда не доставал). */
@media (max-width: 860px) {
  body[class*="new-design"] main.content h2,
  body[class*="new-design"] .pd-mgr h3 { font-size: 26px !important; line-height: 1.16; letter-spacing: -.02em; }
  /* служебные подписи были 9-10px — мелко для телефона */
  body[class*="new-design"] .pd-ins-kicker { font-size: 12px; }
}

/* 31.08.2026 — мелкие подписи в карточке на телефоне: 9-10.5px читались с трудом. */
@media (max-width: 760px) {
  body[class*="new-design"] .pdc-score-val .m { font-size: 12px !important; }
  body[class*="new-design"] main.content .s { font-size: 12px !important; }
  body[class*="new-design"] .poc-c-meta-l { font-size: 12px !important; }
  body[class*="new-design"] .pcf-legal { font-size: 12px !important; line-height: 1.5; }
}

/* 31.08.2026 — добор: шапка таблицы страховых случаев (10px) и подписи блока
   статистики цен (10.5px) в карточке на телефоне. */
@media (max-width: 760px) {
  body[class*="new-design"] main.content table th { font-size: 12px !important; }
  body[class*="new-design"] .psm-stat-label { font-size: 12px !important; }
}

/* ============================================================
   31.08.2026 — первый экран карточки на телефоне (замечание Ivan'а).
   Было: .pd-title-row — flex-строка, заголовок 205px (4 строки), плашки 109px (3 строки),
   .pd-subline — JetBrains Mono 11px с разрядкой. Стало: один столбец во всю ширину.
   ============================================================ */
@media (max-width: 760px) {
  body[class*="new-design"] .pd-title-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  body[class*="new-design"] .pd-title-main { width: 100%; flex: 0 0 auto; }
  body[class*="new-design"] .pd-h1 {
    font-size: 23px !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em;
  }
  /* характеристики: тот же моношрифт, но крупнее и без разрядки — 11px в разрядку читались тяжело */
  body[class*="new-design"] .pd-subline {
    font-size: 12.5px !important;
    letter-spacing: 0 !important;
    line-height: 1.5;
    margin-top: 8px;
  }
  /* плашки — строкой под заголовком, а не колонкой сбоку */
  body[class*="new-design"] .pd-tags {
    width: 100%;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  body[class*="new-design"] .pd-tag {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
  }
  /* крошки: четыре уровня не помещались и обрезались — на телефоне прячем средние */
  body[class*="new-design"] .pd-crumbs { flex-wrap: nowrap; }
  body[class*="new-design"] .pd-crumbs > a:nth-of-type(2),
  body[class*="new-design"] .pd-crumbs > .sep:nth-of-type(2) { display: none; }
}

/* 31.08.2026 — крошки карточки на телефоне: показываем только последний уровень
   («модель» + текущая страница), остальное прячем — четыре уровня не помещались. */
@media (max-width: 760px) {
  /* четыре уровня крошек (433px) не помещались в 342px и рвались многоточием.
     На телефоне оставляем домик и текущую страницу — путь целиком всё равно
     не читался, а ссылки на разделы дублируются в шапке и подвале. */
  body[class*="new-design"] .pd-crumbs > a:not(.home),
  body[class*="new-design"] .pd-crumbs > .sep:not(:first-of-type) { display: none; }
  body[class*="new-design"] .pd-crumbs > .cur {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
}


/* ============================================================
   07.09.2026 — правки по аудиту нового дизайна (scratchpad nd6/audit-table.md),
   участок «карточка машины». Каждая правка помечена номером находки.
   ============================================================ */

/* --- п.1 (блокер): окно шириной 861–991 px — пустой первый экран ---------------
   Легаси-правило `@media(max-width:991px){.header{scale:.5;opacity:0;height:100dvh}}`
   (template_styles.css) превращает шапку в невидимую мобильную шторку, а новая мобильная
   шапка `.nd-mhdr` включается только до 860 px. В зазоре 861–991 px не видно ни той, ни
   другой: вместо шапки — «призрак» высотой в экран, первый блок карточки начинался на
   y≈1300 px вместо 317 px, сверху висела старая битриксовая шапка.
   Возвращаем в этой полосе обычную шапку нового дизайна (ровно та же, что на 1024 px)
   и снимаем отступ, зарезервированный под старую фиксированную шапку.
   Класс `nd-mhdr-live` ставит js/new-product.js, если новая мобильная шапка на этой ширине
   всё-таки показана (например, её брейкпоинт позже расширят) — тогда правило само отступает
   и двух шапок разом не будет. */
@media (min-width: 861px) and (max-width: 991px) {
  body.new-design-product:not(.nd-mhdr-live) .header {
    position: static !important; height: auto !important; scale: 1 !important;
    opacity: 1 !important; pointer-events: auto !important; overflow: visible !important;
    border: 0 !important; z-index: auto !important;
  }
  body.new-design-product:not(.nd-mhdr-live) .container--header { display: block !important; }
  body.new-design-product:not(.nd-mhdr-live) .container--header-mobile { display: none !important; }
  body.new-design-product:not(.nd-mhdr-live) .mobile-menu-fixed { display: none !important; }
  body.new-design-product:not(.nd-mhdr-live) .wrapper { padding-top: 0 !important; }
}

/* --- п.2 (блокер): нижняя липкая панель поверх всплывающих окон ------------------
   `.pd-sticky-cta` сидит на z-index 99990 и рисовалась поверх квиза (z-index 10000),
   полноэкранного просмотрщика фото (fancybox ставит html.with-fancybox) и модалки
   «Как мы проверяем авто» (#pdHowModal, класс html.nd-modal-lock ставит её же скрипт
   в includes/new-product-body.php). Пока открыто любое из окон — панель прячем.
   Виджет чата тут намеренно не трогаем: решение Ivan'а от 07.09. */
html.ndq-lock .pd-sticky-cta,
html.with-fancybox .pd-sticky-cta,
html.nd-modal-lock .pd-sticky-cta { display: none !important; }

/* --- п.3: полоса разделов «01 Характеристики … 07 Вопросы» под мини-панелью ------
   `.pd-tabs` липла к top:0, а сверху лежит фиксированная мини-панель #pdMini (высота 42 px,
   z-index 100) — от вкладок было видно 12 px, и клик по вкладке доставался панели.
   Опускаем вкладки ровно под мини-панель. Высоту меряет js/new-product.js
   (--nd-mini-h, 0 если панель скрыта), фолбэк 42 px — фактический замер на стенде.
   `max()` со старой переменной --nd-hdr-h: если мобильную шапку сделают липкой,
   сдвиг возьмётся по большей из двух. Правило идёт ПОСЛЕ блока @media (max-width:1023px)
   выше по файлу — иначе тот перебивал бы его на планшетах. */
@media (min-width: 641px) {
  body[class*="new-design"] .pd-tabs { top: max(var(--nd-hdr-h, 0px), var(--nd-mini-h, 42px)); }
}

/* --- п.17: контраст строки характеристик под заголовком --------------------------
   Было #B3B3BD (задано в nd-split-product.css) — контраст 2.08 при кегле 12.5 px.
   Стало --muted #6E6E76 = 5.05. Правка внесена в nd-split-product.css, здесь дубль
   на случай, если тот файл не подключён. */
body.new-design-product .pd-subline { color: var(--muted, #6E6E76); }

/* --- п.23: расшифровка VIN на телефоне -------------------------------------------
   Подсказка «наведите для расшифровки» показывалась и на тач-устройствах, где навести
   нечем. На устройствах без мыши пишем «нажмите» (обработчик касания добавлен
   в js/new-product.js). */
.nd-vin-hint-tap { display: none; }
@media (hover: none) {
  .nd-vin-hint-hover { display: none; }
  .nd-vin-hint-tap { display: inline; }
}
/* курсор-подсказка, что VIN интерактивен */
.nd-vin { cursor: help; }

/* ============================================================================
   07.09.2026 — список Никиты, п.19 и п.20 (карточка авто). Группа 6.
   Правила намеренно вынесены в конец файла: new-product.css подключается
   после new-catalog.css на карточках Кореи/Китая и ДО него на гибридных
   карточках аукциона и байков (header.php, ветки $__isProduct и $__ndMiniProduct),
   поэтому селекторы усилены до `html body.new-design-product ...` — так победитель
   каскада не зависит от порядка подключения файлов.
   ============================================================================ */

/* --- п.19: пустой прямоугольник ~195px под карточкой менеджера ---------------
   Замер на 1440px ДО правки: серый контейнер `.pd-mgr` = 542.4px, из которых
   486.4px — высота ФОРМЫ справа плюс 2×28px паддингов контейнера. То есть высоту
   задаёт форма, а не «лишняя» высота контейнера: подтягивать контейнеру нечего,
   он и так по содержимому. Левая колонка при собственной высоте контента 291px
   растягивалась (align-items: stretch по умолчанию) на все 486.4px, и под блоком
   «Иван Сухарев · Менеджер отдела Кореи» оставалось 195.4px пустого СЕРОГО поля.
   На карточке Китая, где блока менеджера нет, — 314px.

   ПЕРВАЯ ПОПЫТКА (07.09, отклонена приёмкой): `align-items: center`. Высота серого
   контейнера от неё не менялась вовсе (542.4px и с правилом, и без), пустота лишь
   делилась пополам — 97.7px сверху + 97.7px снизу. Дыра не исчезла, а переехала.

   ЧИНИМ ПО СУЩЕСТВУ: серый фон снимаем с общего контейнера и отдаём ЛЕВОЙ колонке.
   Она становится самостоятельной карточкой, её высота = высота её содержимого,
   поэтому серого поля под карточкой менеджера не остаётся вовсе — ровно 0px,
   а не «стало меньше». Правая колонка (форма) остаётся белой карточкой и получает
   тонкую рамку — иначе на белом фоне секции у неё пропадает край.
   `align-items: start` здесь обязателен: при stretch левая карточка снова
   растянулась бы по высоте формы и серое поле вернулось бы.
   Контент не добавляли и не выдумывали.

   Это ровно то решение, которое уже принято для телефона 24.08.2026
   (`@media (max-width:700px)` выше по файлу, замечание Ivan'а «лишний серый блок
   какой то») — теперь раскладка блока одинаковая на всех ширинах.

   Нижняя граница медиазапроса — 701px: до 700px мобильные правила уже делают то же
   самое, но со своими gap 12px и padding 20px, и перебивать их не нужно.

   Разметка блока заявки общая для четырёх карточек — Корея, Китай, мотоциклы,
   аукцион (includes/new-product-body.php, nd-china-product-body.php,
   nd-bikes-product-body.php, nd-auction-product-body.php), у всех body получает
   класс new-design-product, поэтому правило одно на все четыре. */
@media (min-width: 701px) {
  html body.new-design-product .pd-mgr {
    background: transparent;
    padding: 0;
    /* 07.09.2026 (вечер, вторая приёмка): было `start`. При выравнивании по верху
       серая карточка стоит вверху, а под ней до низа формы белая полоса
       141px (Корея / мотоциклы / аукцион) и 280px (Китай) — приёмка прочитала это
       как «блок обрублен». `center` делит остаток поровну (70,7 / 70,7 и 140,2 / 140,2),
       и блок читается как две карточки разной высоты, поставленные по центру.
       До 1000px колонка одна, каждая карточка — свой ряд сетки, и выравнивание
       по вертикали на вид не влияет: замер высот на 1000px до и после правки
       совпадает до десятой пикселя. */
    align-items: center;
    gap: 24px;
  }
  html body.new-design-product .pd-mgr-left {
    background: var(--bg, #F7F7F9);
    /* 16px — как было до 07.09; на Корее и Китае перебивается каноном
       nd-fix-h.css (12px !important). Обоснование — в блоке @media (max-width: 700px)
       выше по файлу. */
    border-radius: 16px;
    padding: 28px;
  }
  html body.new-design-product .pd-mgr-right {
    border: 1px solid var(--line, #ECECF0);
  }
}
/* У Китая последний элемент левой колонки — абзац с `margin-bottom: 20px`
   (`.pd-mgr p`), и эти 20px оставались пустой полосой уже внутри самой карточки
   (замер на 390px до правки: 20px). Гасим отступ у последнего элемента. */
html body.new-design-product .pd-mgr-left > *:last-child { margin-bottom: 0; }
/* На карточке Китая последний ВИДИМЫЙ элемент левой колонки — не последний в DOM:
   за `.pdm-full` стоит скрытый мобильный двойник `.pdm-mob`, и `:last-child`
   попадает в него, а не в видимый абзац (замер на 1440px: 20px пустой полосы
   внутри серой карточки оставались). В левой колонке Китая, кроме заголовка
   и этой пары абзацев, ничего нет — гасим отступ у обоих. */
html body.new-design-product .ndcn-mgr .pd-mgr-left > p { margin-bottom: 0; }
/* 16.09.2026 (Ivan, скриншот карточки Китая внутри .ru: «место странно выглядит пустое»).
   Пятый заход к блоку заявки — см. хронику ниже по файлу (07.09). Все четыре прежних
   правки двигали ВЫРАВНИВАНИЕ, а причина у Китая другая: в левой колонке нет блока
   менеджера, и карточка короче формы на 280px (у Кореи — на 141px). Двигать больше нечего,
   заполняем содержанием: список шагов сделки .ndcn-steps (разметка в
   includes/nd-china-product-body.php), оформлен как блок менеджера Кореи — отделён
   линией сверху, номера моноширинные красные, как у вкладок «01 Характеристики».
   Замер 1600px: левая карточка 208 → ~400px, остаток до формы делится центрированием
   как у Кореи. На ≤700px список скрыт — на телефоне карточка выше формы и короткий
   текст важнее (03.08). */
html body.new-design-product .ndcn-steps {
  list-style: none; margin: 18px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--line, #ECECF0);
  display: grid; gap: 12px;
}
html body.new-design-product .ndcn-steps li {
  display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start;
  font-size: 13px; line-height: 1.45; color: var(--ink, #0E0E12); margin: 0;
}
html body.new-design-product .ndcn-steps .n {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  color: var(--accent, #E11D2E); padding-top: 2px; letter-spacing: .02em;
}
@media (max-width: 700px) {
  html body.new-design-product .ndcn-steps { display: none; }
}

/* --- п.20: в блоке «Что спрашивают про…» ответ уезжал вправо на 84px ---------
   Отступ складывался из ДВУХ файлов:
   1) new-product.css выше по этому же файлу:
      `body.new-design-product .faq-right .faq-body { padding: 0 20px 18px 92px }`.
      92px были подобраны под первую сетку вопроса (`summary` = 56px 1fr 28px,
      gap 16px, padding 18px 20px, то есть 20+56+16 = 92). 25.07.2026 сетку вопроса
      переверстали на `40px 1fr 22px`, gap 12px, padding 15px 18px (левый край вопроса
      стал 70px), а padding ответа остался прежним.
   2) new-catalog.css: `.faq-body { display: grid; grid-template-columns: 44px 1fr 32px;
      gap: 18px }` плюс `.faq-body > * { grid-column: 2 }` — абзац падал во вторую
      колонку и получал ещё +62px.
   Итого ответ стоял на 92+62 = 154px против 70px у вопроса, разница — те самые 84px.
   Лечим оба места: грид у карточки выключаем и задаём padding-left ровно по сетке
   вопроса: 18+40+12 = 70px на компьютере, 15+32+10 = 57px до 900px.
   До 600px блок уже выровнен (Phase P3 выше по файлу: номер вопроса скрыт,
   у вопроса и ответа padding-left 16px) — тот блок не трогаем. */
html body.new-design-product .faq-right .faq-body {
  display: block;
  grid-template-columns: none;
  padding: 0 20px 18px 70px;
}
@media (max-width: 900px) {
  html body.new-design-product .faq-right .faq-body { padding: 0 15px 16px 57px; }
}
/* Вилка 601–700px: new-catalog.css принудительно (`!important`) разворачивает ответ
   в блок с `padding: 0 16px 14px`, а вопрос там стоит на 14+32+10 = 56px
   (`summary { padding: 13px 14px !important }` из того же файла) — ответ уезжал
   ВЛЕВО на 40px. Возвращаем его под вопрос. */
@media (min-width: 601px) and (max-width: 700px) {
  html body.new-design-product .faq-right .faq-body { padding-left: 56px !important; }
}


/* ============================================================================
   07.09.2026, вечер (вторая приёмка) — блок заявки: серая карточка возвращена.
   Отменяет ТОЛЬКО предыдущую вечернюю правку «снять подложку от 1001px».
   Правка п.19 (выше по файлу) и остальное сегодняшнее — на месте.
   ============================================================================ */

/* Хроника блока, чтобы не ходить по кругу четвёртый раз.

   1) Исходно серый фон был на КОНТЕЙНЕРЕ `.pd-mgr`, а левая колонка при
      `align-items: stretch` растягивалась по высоте формы. Замер 1440px:
      контейнер 542,4px, содержимое левой колонки 291px, то есть под блоком
      менеджера оставалось 195,4px пустого СЕРОГО поля; у Китая, где в левой
      колонке нет `.pd-mgr-who`, — 314px. Это и есть п.19 списка Никиты.

   2) `align-items: center` при сером КОНТЕЙНЕРЕ (первая попытка утра) высоту
      не меняет вовсе — пустота делится пополам, 97,7px сверху и снизу. Отклонено.

   3) п.19: фон снят с контейнера и отдан ЛЕВОЙ колонке. Колонка стала карточкой
      по высоте своего содержимого, пустого серого поля — 0px. Приёмка: «читается
      обрубленным»: при `align-items: start` карточка прижата к верху, а под ней
      до низа формы белая полоса 141px (Корея, мотоциклы, аукцион) и 280px (Китай),
      край серого обрывается на середине блока.

   4) Вечер, первая попытка: подложку от 1001px сняли совсем. Обрыв ушёл вместе
      с карточкой, зато появился разрыв ровно в один пиксель ширины: на 1000px —
      серая карточка с полями 28px, на 1001px — голый текст на фоне страницы
      без полей. Отклонено этой приёмкой (пункты 1 и 2 разбора).

   ЧТО СЕЙЧАС. Карточка остаётся карточкой на всех ширинах и обнимает своё
   содержимое: её высота = контент + поля, пустого серого 0px на всех шести
   замеренных ширинах и всех четырёх типах карточек. Разницу высот с формой гасим
   не заливкой, а выравниванием (`align-items: center`, задано в блоке п.19 выше):
   остаток делится поровну — 70,7px сверху и снизу у Кореи, мотоциклов и аукциона,
   140,2px у Китая, где левая колонка короче на блок менеджера. Симметричный зазор
   читается как «две карточки разной высоты, поставленные по центру», а не как
   оборванный фон; при этом нет ни пустого серого прямоугольника (пункт 1),
   ни исчезающей подложки (пункт 4).

   РАСКЛАДКА ПО ШИРИНАМ — одна логика везде, две карточки:
     до 700px    — в столбик, поля 20px, зазор 12px;
     701–1000px  — в столбик, поля 28px, зазор 24px;
     от 1001px   — рядом, поля 28px, зазор 24px, по центру по вертикали.
   На границе 1000/1001px у карточки не меняется НИЧЕГО: фон #F7F7F9, поля 28px,
   радиус и рамка формы те же. Меняется только число колонок сетки — это штатная
   точка перелома раскладки карточки (`@media (max-width: 1000px)` выше по файлу,
   там же переключаются `.pd-hero`, `.pd-specs`, `.pd-calc` и остальные пары колонок).

   РАДИУСЫ. Единого значения на четыре типа карточек намеренно НЕТ, потому что
   у страниц разный канон, и замер это показывает (1440px, все блоки шире 120px
   и выше 60px, значение border-radius):
     Корея    — 12px у 44 блоков, 8px у 11 мелких контролов  (nd-fix-h.css подключён);
     Китай    — 12px у 36 блоков, 8px у 8                     (nd-fix-h.css подключён);
     Мотоциклы — 14px у 25, 12px у 11, 20px у 6, 8px у 4      (nd-fix-h.css НЕ подключён);
     Аукцион   — 14px у 25, 12px у 10, 20px у 7, 8px у 4      (nd-fix-h.css НЕ подключён).
   На гибридных страницах (/bikes/, /auction/) header.php не подключает nd-fix-*.css
   вовсе, единого 12px там нет, а соседняя по смыслу карточка заказа `.pd-order`
   стоит на 16px. Поэтому блок заявки берёт радиус канона СВОЕЙ страницы: 12px на
   Корее и Китае (форсит nd-fix-h.css), 16px на мотоциклах и аукционе — то есть
   ровно то, что там было до правок 07.09. Единое требование одно и выполняется
   везде: серая карточка и форма внутри блока имеют ОДИНАКОВЫЙ радиус.

   Правило одно на все четыре типа карточек: разметка блока общая
   (includes/new-product-body.php, nd-china-product-body.php,
   nd-bikes-product-body.php, nd-auction-product-body.php), body везде с классом
   new-design-product. Селекторы `html body.new-design-product ...` — как в блоке
   п.19: победитель каскада не должен зависеть от порядка подключения css-файлов. */

/* [ins-unknown] 09.09.2026 — нейтральные состояния «страховая история не раскрыта».
   Отчёт Carhistory по части машин закрыт продавцом; такие карточки раньше рисовались
   зелёными («Без ДТП по страховой»), теперь — серыми, без утверждения о чистоте.
   См. bugs/korea-insurance-missing-shown-as-clean-2026-09-09. */
.pd-ins-badge.na {
  background: var(--line-2, #F0F0F3); color: var(--muted, #6E6E76);
}
.pd-ins-badge.na::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--muted, #6E6E76);
}
body.new-design-product .po-cond-na { color: var(--muted, #6E6E76); }


/* ============================================================
   09.09.2026 (Ivan: «кажется тут надо с отступами поработать, очень зажато»).
   Причина: в блоке цены на телефоне появилась третья строка — бейдж истории цены
   вместе с ценой в вонах встаёт между самой ценой и подписью «с доставкой…».
   Прежняя лесенка была рассчитана на две строки: `row-gap: 2px` внутри
   `.po-price-main` и подпись, подтянутая к цене на `-4px`. С третьей строкой всё
   слипалось в один ком. Здесь только телефон, десктоп сохраняет прежний вид
   (там переноса нет и подпись по-прежнему прижата к цене).
   ============================================================ */
@media (max-width: 700px) {
  body.new-design-product .po-price-main { row-gap: 8px; }
  body.new-design-product .pd-order > .po-price-lbl { margin-top: 6px !important; }
}


/* === ВОДЯНОЙ ЗНАК EncarRUS на фото карточки авто — возврат 15.09.2026 ===
   Korea (/korea/product/) и China (/china/product/). Байки и аукцион используют ту же
   разметку pd-*, поэтому исключены по body.nd-hybrid — у них знак впечатан в файлы. */
/* .pd-main-photo/.pd-thumb/.pd-mini-thumb уже position:relative + overflow:hidden выше. */
body:not(.nd-hybrid) .pd-main-photo::after,
body:not(.nd-hybrid) .pd-thumb::after,
body:not(.nd-hybrid) .pd-mini-thumb::after {
    content: '';
    position: absolute;
    top: -30%; left: -30%;
    width: 160%; height: 160%;
    background: url('/img/watermark-tile.png') repeat;
    background-size: 312px auto;
    opacity: .14;
    transform: rotate(-25deg);
    pointer-events: none;
    z-index: 2;
}
body:not(.nd-hybrid) .pd-thumb::after,
body:not(.nd-hybrid) .pd-mini-thumb::after { background-size: 130px auto; opacity: .13; }
/* 19.09.2026 (Ivan: «у нас плавает при прокрутке водяной знак наш»). Комментарий выше
   утверждал, что у всех трёх контейнеров уже стоит position:relative + overflow:hidden.
   Для .pd-main-photo и .pd-thumb это правда, а у .pd-mini-thumb не было ни того, ни другого:
   position оставался static, overflow visible. Из-за этого ::after цеплялся не к самой
   миниатюре 56x38, а к ближайшему позиционированному предку — липкой панели .pd-mini
   (position: fixed), растягивался на 160 % ЕЁ размеров со смещением -30 % и ездил по экрану
   поверх содержимого вместе с панелью. Разбор: wiki/seo/korea-card-quality-2026-09-18.md */
body:not(.nd-hybrid) .pd-mini-thumb { position: relative; overflow: hidden; }
@media (max-width: 767px) {
    body:not(.nd-hybrid) .pd-main-photo::after { background-size: 195px auto; }
}
/* === /ВОДЯНОЙ ЗНАК === */
/* ============================================================================
   16.09.2026 — блок заявки, «вариант A»: одна серая подложка на обе колонки
   (решение Ivan'а по макету из трёх вариантов, см. wiki
   features/china-card-request-steps-2026-09-16). Шестой заход к блоку — и
   последний по этой линии: хроника выше по файлу («07.09.2026, вечер») кончалась
   на двух раздельных карточках, поставленных по центру; у Китая без блока
   менеджера это давало по 140px пустоты сверху и снизу.

   Как устроено: серый фон снова на КОНТЕЙНЕРЕ .pd-mgr, форма — белая карточка
   внутри него без рамки. Левая колонка растягивается по высоте формы
   (align-items: stretch) и становится flex-колонкой: заголовок и абзац сверху,
   «якорь» (блок менеджера .pd-mgr-who у Кореи/Японии/мотоциклов или список
   шагов .ndcn-steps у Китая) прижат к низу через margin-top: auto. Пустого
   серого поля под контентом нет — остаток высоты стоит МЕЖДУ абзацем и якорем,
   так блок читается как одна карточка с текстом сверху и подписью снизу.

   Правило одно на все карточки (Корея, Китай, Япония, мотоциклы): у всех body
   получает new-design-product, разметка блока общая. На телефоне (≤700px) та же
   подложка: серый контейнер 16px, белая форма внутри. Радиусы дожимает
   nd-fix-h.css (12px !important на Корее и Китае) — не трогаем.
   ============================================================================ */
@media (min-width: 701px) {
  html body.new-design-product .pd-mgr {
    background: var(--bg, #F7F7F9);
    padding: 28px;
    gap: 32px;
    align-items: stretch;
  }
  html body.new-design-product .pd-mgr-left {
    background: transparent;
    padding: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  /* абзац Китая раньше стоял без нижнего отступа (правило .ndcn-mgr выше) — теперь
     под ним список шагов, отступ нужен как у Кореи перед блоком менеджера */
  html body.new-design-product .ndcn-mgr .pd-mgr-left > p.pdm-full { margin-bottom: 20px; }
  html body.new-design-product .pd-mgr-left > .pd-mgr-who,
  html body.new-design-product .pd-mgr-left > .ndcn-steps { margin-top: auto; }
  html body.new-design-product .pd-mgr-right {
    border: 0;
    background: var(--bg-card, #FFFFFF);
  }
}
@media (max-width: 700px) {
  html body.new-design-product .pd-mgr {
    background: var(--bg, #F7F7F9);
    padding: 16px;
    gap: 16px;
    border-radius: 16px;
  }
  html body.new-design-product .pd-mgr-left { background: transparent; padding: 0; }
  html body.new-design-product .pd-mgr-right { border: 0; background: var(--bg-card, #FFFFFF); }
}

/* ============================================================
   20.09.2026 (Ivan: единый блок вопросов по сайту). На телефоне номер вопроса
   у карточек скрывался (правило выше, ≤600px), а на главной и в каталогах он
   виден — из-за этого один и тот же блок выглядел по-разному. Возвращаем номер
   и колонку под него; ширина 26px рассчитана на двузначные номера (01…99).
   ============================================================ */
@media (max-width: 600px) {
  body.new-design-product .faq-right summary {
    grid-template-columns: 26px 1fr 24px !important;
    gap: 10px !important;
  }
  body.new-design-product .faq-right .faq-num {
    display: inline !important;
    font-size: 12px;
    color: #C2C2C8;
  }
  body.new-design-product .faq-right .faq-body {
    padding: 0 16px 14px 52px !important;
  }
}

/* 24.09.2026: у лотов аукциона и мотоциклов кнопки «Поделиться» и «Печать» стоят вне .pd-meta.
   Держим их одним рядом справа — иначе на телефоне «Печать» падала на следующую строку и
   пряталась под открытым меню. */
.nd-share-row { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; position: relative; }
/* Меню отсчитывается от всего ряда, как у Кореи (там обе кнопки в одном .m-share). Без этого
   оно выравнивалось по кнопке «Поделиться», а та на телефоне не крайняя — меню уезжало за
   левый край экрана. */
.nd-share-row > .m-share { position: static; }
/* Меню открывается по нажатию — оно главнее приветствия менеджера и кнопки чата
   (у тех z-index 999998): на телефоне приветствие закрывало пункт «Копировать ссылку». */
#pdSharePop:not([hidden]) { z-index: 1000000; }
@media (max-width: 700px) {
  /* На телефоне — круглые значки без подписи, как у Кореи и Китая (.pd-meta) */
  body[class*="new-design"] .m-share > .m-share-btn {
    width: 32px !important; height: 32px !important;
    padding: 0 !important; gap: 0 !important;
    justify-content: center !important;
    border: 1px solid var(--line, #ECECF0) !important; border-radius: 50% !important;
    background: var(--bg-card, #FFFFFF) !important; margin: 0 !important; flex: none;
  }
  body[class*="new-design"] .m-share > .m-share-btn .msb-t { display: none; }
  body[class*="new-design"] .m-share > .m-share-btn svg { width: 15px; height: 15px; flex: none; }
}

/* 24.09.2026 (Ivan, разбор Метрики: на компьютере вся связь спрятана за «Консультация по авто»,
   пишут и звонят 0,8 % визитов). На ширине ≥ 992 px каналы стоят строками под кнопкой —
   в стиле «Автокредит»/«Видео» (.po-video), кнопка открывает сразу форму (класс .po-direct
   ставит js/new-catalog.js). На телефоне всё как было: там нижняя панель и шарик. */
.po-contact-rows { display: none; }
@media (min-width: 992px) {
  .po-contact-rows { display: block; }
  .po-contact.po-direct .po-contact-chev,
  .po-contact.po-direct .po-contact-hd,
  .po-contact.po-direct .poc-opt,
  .po-contact.po-direct .po-contact-sep { display: none; }
}
body.new-design-product .po-cta.is-sold .po-contact-rows { display: none !important; }
.po-contact-rows .po-video { margin-top: 10px; }
.po-contact-rows a.po-video { color: inherit; text-decoration: none; }
.po-contact-rows .pcr-msg { display: flex; gap: 6px; margin-left: auto; flex: none; }
.po-contact-rows .pcr-msg a { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 10px; transition: transform .15s ease; }
.po-contact-rows .pcr-msg a:hover { transform: scale(1.1); }
.po-contact-rows .pcr-msg svg { width: 30px; height: 30px; }