/* =========================================================================
   KUGOO RUSSIA SOCHI — своя таблица стилей (#293).
   НЕ надстройка над styles.css: общий файл scooters-zone здесь не подключается
   вовсе. Именно совместный styles.css и давал «тот же сайт в других цветах»,
   от которого владелец отказался.
   Правила системы: плоско, без теней, без скруглений, без градиентов; рамки
   1.5px цвета чернил; цена — самый крупный элемент карточки; заголовки —
   узкий Oswald заглавными; текст — IBM Plex Sans.
   Шрифты СВОИ, woff2 с кириллицей, из /new/fonts-kugoo/ — Google CDN не
   используется (из РФ он медленный и ненадёжный). Оба шрифта под OFL,
   лицензии лежат рядом с файлами.
   ========================================================================= */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/new/fonts-kugoo/oswald-var-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/new/fonts-kugoo/oswald-var-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/new/fonts-kugoo/oswald-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/new/fonts-kugoo/oswald-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/new/fonts-kugoo/ibm-plex-sans-var-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/new/fonts-kugoo/ibm-plex-sans-var-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/new/fonts-kugoo/ibm-plex-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/new/fonts-kugoo/ibm-plex-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- токены ------------------------------------------------------- */
:root {
  --paper:      #FBFAF8;
  --paper-2:    #EFECE6;
  --ink:        #16161A;
  --ink-soft:   #3B3833;
  --accent:     #DA3C03;
  --accent-2:   #FF7D58;
  --muted:      #55504A;
  --muted-2:    #8A847C;
  --line:       #C6C0B6;
  --line-2:     #E7E2DA;
  --line-dark:  #34333A;
  --dark-text:  #A5A19B;
  --pad:        20px;
  --frame:      1.5px;
  --h:          'Oswald', 'Arial Narrow', Arial, sans-serif;
  --t:          'IBM Plex Sans', system-ui, -apple-system, Arial, sans-serif;
}

/* ---------- сброс -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.55 var(--t);
  font-feature-settings: "tnum" 1;          /* табличные цифры: цены и адреса */
}
img, svg { display: block; max-width: 100%; height: auto; border: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--h); font-weight: 700; text-transform: uppercase; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* никаких скруглений и теней — правило системы, а не случайность */
* { border-radius: 0 !important; box-shadow: none !important; }

.wrap { padding-left: var(--pad); padding-right: var(--pad); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- шапка (#295: одна гарнитура, рабочее меню) -------------------
   ВСЯ шапка — Oswald. Один масштаб на четыре ступени и общая база 1.0–1.05:
     знак      17px моб. / 22px деск.  (b=700, остальное 400, трекинг −0.005em)
     телефон   16px моб. / 20px деск.  (700, трекинг .01em — это главное действие)
     категории 12px моб. / 13px деск.  (600 ЗАГЛАВНЫМИ, трекинг .06em)
     маршруты  11px моб. / 12px деск.  (600 ЗАГЛАВНЫМИ, трекинг .08em)
   Чем мельче кегль, тем больше трекинг — оптическая компенсация, а не вкус.
   IBM Plex в шапке НЕ используется вовсе: раньше знак был Oswald, а нав и телефон
   Plex'ом на несвязанных кеглях, и это читалось как несовпадение. -------------- */
.k-hdr {
  border-bottom: 1px solid var(--line-2); background: var(--paper);
  font-family: var(--h);            /* #295: вся шапка наследует Oswald */
}
/* Мобильный: строка 1 — знак и телефон, строка 2 — две кнопки маршрута во всю
   ширину (подпись «— маршрут» видна целиком: это кнопка, а не ярлык города),
   строка 3 — прокручиваемая полоса категорий. Всё на flex-wrap, без скриптов. */
.k-hdr__top {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  padding: 12px var(--pad);
}
.k-hdr__brand { flex: 1 1 auto; min-width: 0; }
.k-hdr__tel { order: 2; }
.k-routes { order: 3; }               /* #296: кнопка одна — рядом с телефоном, не строкой */
.k-hdr__brand { display: block; min-width: 0; }
/* #296: ОДИН ВЕС на весь знак — 600. Он держится и на 17px (мобильная шапка, две
   строки), и на 22px: 700 на мелком кегле забивался в пятно, 400 рассыпался.
   Деление осталось ТОЛЬКО цветом: KUGOO акцентом, RUSSIA SOCHI чернилами. */
.k-hdr__logo {
  display: block; font: 600 17px/1.02 var(--h); letter-spacing: -.005em;
  text-transform: uppercase; max-width: 13ch;
}
.k-wm__a { color: var(--accent); }
.k-wm__b { color: var(--ink); }

/* Навигация в одну строку — только на десктопе; на мобильном её роль играет
   прокручиваемая полоса .k-hdr__scroll ниже. */
.k-hdr__nav { display: none; }

.k-hdr__tel {
  font: 700 16px/1 var(--h); letter-spacing: .01em; white-space: nowrap; color: var(--ink);
}
.k-hdr__tel:hover { color: var(--accent); }

/* #296: ОДНА кнопка «Маршрут» с раскрытием — нативные <details>/<summary>, без JS.
   Панель НАКЛАДЫВАЕТСЯ (position:absolute), поэтому раскрытие не толкает страницу. */
.k-routes { display: flex; }
.k-route { position: relative; }
.k-route > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: var(--frame) solid var(--ink); padding: 0 12px; height: 32px;
  font: 600 11px/1 var(--h); letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; list-style: none;          /* убираем родной треугольник */
}
.k-route > summary::-webkit-details-marker { display: none; }
.k-route > summary::marker { content: ""; }
/* свой указатель: шеврон из двух границ, поворачивается при раскрытии */
.k-route > summary::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .12s linear;
}
.k-route[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.k-route > summary:hover, .k-route[open] > summary { border-color: var(--accent); color: var(--accent); }
.k-route > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.k-route__menu {
  /* #296: на мобильном кнопка стоит СЛЕВА, поэтому панель раскрывается ВПРАВО от неё
     (первая версия была прибита к right:0 и уезжала за левый край — города обрезались).
     Ширина ограничена окном, поэтому панель не может вылезти ни в одну сторону. */
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: auto;
  min-width: 240px; max-width: calc(100vw - 2 * var(--pad));
  background: var(--paper); border: var(--frame) solid var(--ink);
  display: flex; flex-direction: column;
}
.k-route__menu a {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
}
.k-route__menu a:last-child { border-bottom: 0; }
.k-route__menu a:hover { background: var(--paper-2); }
.k-route__menu b {
  font: 600 12px/1 var(--h); letter-spacing: .07em; text-transform: uppercase; color: var(--ink);
}
.k-route__menu a:hover b { color: var(--accent); }
.k-route__menu span { font: 400 12px/1.35 var(--t); color: var(--muted); text-transform: none; }
/* Мобильная полоса категорий: горизонтальная прокрутка, БЕЗ скриптов. */
.k-hdr__scroll {
  display: flex; gap: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 0 var(--pad) 10px; scrollbar-width: none;
}
.k-hdr__scroll::-webkit-scrollbar { display: none; }
.k-hdr__scroll a {
  font: 600 12px/1 var(--h); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; padding-bottom: 4px; border-bottom: 2px solid transparent;
}
.k-hdr__scroll a:hover, .k-hdr__scroll a:focus-visible {
  color: var(--accent); border-bottom-color: var(--accent);
}

/* ---------- первый экран ------------------------------------------------- */
.k-hero { padding: 18px var(--pad) 24px; }   /* #296: шапка снова в две строки */
.k-eyebrow {
  font: 500 11px var(--t); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.k-hero h1 { font: 700 38px/1.04 var(--h); letter-spacing: .01em; margin-bottom: 20px; }
.k-hero__sub { font: 400 14px/1.55 var(--t); color: var(--muted); margin: -8px 0 20px; }

.k-digits {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  margin-bottom: 20px;
}
.k-digit { padding: 14px 14px 14px 0; }
.k-digit + .k-digit { border-left: 1px solid var(--line-2); padding-left: 14px; }
.k-digit__num { font: 600 32px/1 var(--h); color: var(--accent); }
.k-digit__label { font: 400 12px/1.3 var(--t); color: var(--muted); margin-top: 4px; }

.k-shot { background: var(--paper-2); margin-bottom: 20px; }
.k-shot img { width: 100%; }

.k-cta { display: flex; gap: 10px; }
.k-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: 0 14px;
  font: 600 14px var(--h); letter-spacing: .1em; text-transform: uppercase;
}
.k-btn--fill { background: var(--accent); color: #fff; }
.k-btn--fill:hover { background: var(--accent-2); }
.k-btn--ghost { border: var(--frame) solid var(--ink); color: var(--ink); }
.k-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- оранжевая полоса -------------------------------------------- */
.k-strip {
  background: var(--accent); color: #fff;
  padding: 12px var(--pad);
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  font: 500 11px var(--t); letter-spacing: .06em; text-transform: uppercase;
}
.k-strip__dot { opacity: .55; }

/* ---------- секции ------------------------------------------------------- */
.k-sect { padding: 28px var(--pad); }
.k-sect--tight { padding-top: 8px; }
.k-sect__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.k-sect__head h2 { font: 600 22px var(--h); }
.k-sect__note { font: 400 12px var(--t); color: var(--muted-2); text-align: right; }

/* ---------- карточки каталога ------------------------------------------- */
.k-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.k-card {
  background: #fff; border: 1px solid var(--ink); padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.k-card:hover { border-color: var(--accent); }
.k-card__shot { background: var(--paper-2); }
.k-card__shot img { width: 100%; }
.k-card__name { font: 500 13px/1.3 var(--t); }
.k-card__spec { font: 400 11px/1.4 var(--t); color: var(--muted-2); }
.k-card__price { font: 600 24px/1 var(--h); margin-top: auto; }
.k-card__price span { font: 500 12px var(--t); color: var(--muted-2); }
/* #297: «цена до подорожания» — плоско, в системе kugoo-2026: без плашки,
   без скруглений, приглушённым, метка словами. */
.k-card__before { margin-top: 4px; font: 400 11px/1.35 var(--t); color: var(--muted-2); }
.k-card__before s { text-decoration: line-through; margin-right: 5px; }
.k-card__stock {
  font: 500 10px var(--t); letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.k-more {
  display: flex; align-items: center; justify-content: center; min-height: 46px;
  border: var(--frame) solid var(--ink); margin-top: 14px;
  font: 600 12px var(--h); letter-spacing: .1em; text-transform: uppercase;
}
.k-more:hover { border-color: var(--accent); color: var(--accent); }

/* Четыре ссылки-категории под сеткой (см. комментарий в build.py: кнопки «Все 59
   моделей» из макета нет, потому что такой страницы на сайте не существует). */
/* ---------- направления (#294): крупные карточки с фото ------------------ */
.k-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.k-cat { border: 1px solid var(--ink); background: #fff; display: block; }
.k-cat:hover { border-color: var(--accent); }
.k-cat:hover .k-cat__name { color: var(--accent); }
.k-cat__shot { background: var(--paper-2); border-bottom: 1px solid var(--ink); }
.k-cat__shot img { width: 100%; }
.k-cat__name {
  font: 600 14px var(--h); text-transform: uppercase; letter-spacing: .04em;
  padding: 12px; text-align: center;
}

/* ---------- тёмный блок «Почему у нас» ---------------------------------- */
.k-why { background: var(--ink); color: var(--paper); padding: 28px var(--pad); }
.k-why h2 { font: 600 22px var(--h); margin-bottom: 18px; }
.k-why__item { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line-dark); }
.k-why__num { font: 600 18px var(--h); color: var(--accent-2); }
.k-why__t { font: 600 14px var(--t); }
.k-why__x { font: 400 12px/1.5 var(--t); color: var(--dark-text); margin-top: 2px; }

/* ---------- отзывы ------------------------------------------------------- */
.k-rev__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.k-rev__head h2 { font: 600 22px var(--h); }
.k-rate { text-align: right; }
.k-rate__num { font: 600 44px/1 var(--h); color: var(--accent); }
.k-rate__label { font: 400 11px/1.35 var(--t); color: var(--muted-2); margin-top: 4px; }
/* #294: имя автора СВЕРХУ, жирным, цветом чернил; служебная строка — мелкая
   и приглушённая, под текстом. */
.k-quote { border-left: 2px solid var(--accent); padding: 2px 0 2px 14px; }
.k-quote + .k-quote { margin-top: 18px; }
.k-quote__who { font: 600 14px var(--t); color: var(--ink); margin-bottom: 6px; }
.k-quote__text { font: 400 13px/1.55 var(--t); color: var(--ink-soft); }
.k-quote__meta { font: 400 11px var(--t); color: var(--muted-2); margin-top: 6px; }

/* ---------- магазины ---------------------------------------------------- */
.k-shops { display: flex; flex-direction: column; gap: 14px; }
.k-shop { border: 1px solid var(--ink); }
.k-shop__map { border-bottom: 1px solid var(--ink); background: var(--paper-2); }
.k-shop__map iframe { display: block; width: 100%; height: 130px; border: 0; }
.k-shop__body { padding: 14px; }
.k-shop__city { font: 600 15px var(--h); text-transform: uppercase; margin-bottom: 4px; }
.k-shop__addr { font: 400 13px/1.5 var(--t); }
.k-shop__hours { font: 400 12px var(--t); color: var(--muted-2); margin-top: 6px; }
.k-shop__tel { display: inline-block; font: 600 14px var(--h); color: var(--accent); margin-top: 8px; }

/* ---------- подвал ------------------------------------------------------ */
.k-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2);
}
.k-foot__tag { font: 400 12px/1.45 var(--t); color: var(--muted); }
.k-foot__tel { font: 600 16px var(--h); color: var(--accent); }
.k-legal { padding: 16px var(--pad) 32px; font: 400 11px/1.5 var(--t); color: var(--muted-2); }
.k-legal a { text-decoration: underline; }
/* #295: контакты и салоны ушли из шапки — здесь их постоянное место. */
.k-legal__links {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-2);
}
.k-legal__links a {
  font: 600 11px/1 var(--h); letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.k-legal__links a:hover { color: var(--accent); }
.k-shop__links { display: flex; gap: 16px; margin-top: 10px; }
.k-shop__links a {
  font: 600 11px/1 var(--h); letter-spacing: .07em; text-transform: uppercase;
  padding-bottom: 3px; border-bottom: 1px solid var(--line);
}
.k-shop__links a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- текстовый блок (#294: подача, а не сокращение) -------------- */
.k-text { padding: 28px var(--pad); border-top: 1px solid var(--ink); }
.k-text__head { margin-bottom: 18px; }
.k-text__head h2 { font: 600 22px var(--h); }
.k-text__lead { font: 400 14px/1.5 var(--t); color: var(--muted); margin: 8px 0 0; max-width: 60ch; }
.k-text__body p {
  font: 400 15px/1.7 var(--t); color: var(--ink-soft); max-width: 66ch;
  padding-top: 14px; border-top: 1px solid var(--line-2); margin: 0 0 14px;
}
.k-text__body p:first-child {
  font: 400 17px/1.6 var(--t); color: var(--ink); border-top: 0; padding-top: 0;
}

/* =========================================================================
   ДЕСКТОП — доска 1b. Один брейкпоинт: до 1000px мобильная раскладка.
   ========================================================================= */
@media (min-width: 1000px) {
  :root { --pad: 56px; }
  body { font-size: 16px; }

  .k-hdr__top { padding: 16px var(--pad); gap: 24px; }
  .k-hdr__logo { font-size: 22px; max-width: none; }
  .k-hdr__scroll { display: none; }                 /* на десктопе категории в строке */
  .k-hdr__nav {
    display: flex; gap: 22px; flex: 1 1 auto; justify-content: center;
    font: 600 13px/1 var(--h); letter-spacing: .06em; text-transform: uppercase;
  }
  .k-hdr__nav a { padding-bottom: 3px; border-bottom: 2px solid transparent; }
  .k-hdr__nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
  .k-hdr__top { flex-wrap: nowrap; }
  .k-hdr__brand { flex: 0 0 auto; }
  .k-hdr__tel { order: 0; font-size: 20px; }
  .k-routes { order: 0; }
  /* #304: РАСЧЁТ, А НЕ ГЛАЗОМЕР. Замерены собственные ширины строки шапки:
     знак 246 + навигация 553 + действия 405 + поля 112 + зазоры 48 = 1364 px.
     До #300 действий было два (телефон и маршрут) и строка помещалась с 1000 px;
     поиск, WhatsApp и выбор телефона добавили ~250 px, и в диапазоне 1000–1364
     навигация сжималась, а `overflow:hidden` + центрирование срезали её С ОБЕИХ
     СТОРОН — отсюда «ТРОСАМОКАТЫ» слева и обрезанные «ЭЛЕКТРОСКУТЕРЫ» справа.
     Лечим не подгонкой, а порогами: строчная навигация включается только там, где
     она измеримо помещается, ниже работает та же прокручиваемая полоса, что на
     телефоне. Выравнивание с центра на начало — чтобы даже при будущем промахе
     первое слово не резалось. */
  .k-hdr__nav { display: none; }
  .k-hdr__scroll { display: flex; }

  .k-route > summary { height: 34px; font-size: 12px; }
  /* на десктопе кнопка у правого края — панель раскрывается влево */
  .k-route__menu { left: auto; right: 0; max-width: none; }

  /* Доска 1b: слева текст сверху и цифры+кнопки снизу, справа фото во всю высоту.
     Разметка при этом остаётся мобильной (текст, цифры, фото, кнопки) — раскладку
     делает grid, а не второй набор блоков. */
  .k-hero {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto;
    gap: 0 56px; padding: 64px var(--pad); align-items: start;
  }
  .k-hero__intro { grid-column: 1; grid-row: 1; }
  .k-hero .k-digits { grid-column: 1; grid-row: 2; align-self: end; }
  .k-hero .k-cta    { grid-column: 1; grid-row: 3; }
  .k-hero .k-shot   { grid-column: 2; grid-row: 1 / 4; height: 100%; }
  .k-eyebrow { font-size: 12px; letter-spacing: .18em; margin-bottom: 16px; }
  .k-hero h1 { font: 700 72px/1.0 var(--h); margin-bottom: 32px; }
  .k-hero__sub { font-size: 15px; margin: 0 0 32px; max-width: 46ch; }
  .k-digits { margin-bottom: 28px; }
  .k-digit { padding: 18px 18px 18px 0; }
  .k-digit + .k-digit { padding-left: 18px; }
  .k-digit__num { font-size: 40px; }
  .k-digit__label { font-size: 13px; }
  .k-cta { gap: 12px; }
  .k-btn { min-height: 58px; font-size: 15px; }
  .k-shot { margin: 0; align-self: stretch; display: flex; }
  .k-shot img { width: 100%; object-fit: cover; }

  .k-strip { padding: 14px var(--pad); font-size: 12px; gap: 8px 16px; }

  .k-sect { padding: 56px var(--pad); }
  .k-sect--tight { padding-top: 24px; }
  .k-sect__head { margin-bottom: 24px; }
  .k-sect__head h2 { font-size: 40px; }
  .k-sect__note { font-size: 14px; }

  .k-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .k-cats { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .k-cat__name { font-size: 17px; padding: 16px; }
  .k-card { padding: 16px; gap: 10px; }
  .k-card__name { font-size: 14px; }
  .k-card__spec { font-size: 12px; }
  .k-card__price { font-size: 30px; }
  .k-more { max-width: 320px; margin: 24px auto 0; }
  .k-grid--cats { grid-template-columns: repeat(4, 1fr); margin-top: 20px; }
  .k-grid--cats .k-more { max-width: none; margin: 0; min-height: 58px; font-size: 13px; }

  .k-why { padding: 56px var(--pad); }
  .k-why h2 { font-size: 40px; margin-bottom: 24px; }
  .k-why__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
  .k-why__num { font-size: 22px; }

  .k-rev__head h2 { font-size: 40px; }
  .k-rate__num { font-size: 64px; }
  .k-rate__label { font-size: 13px; }
  .k-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
  .k-quote + .k-quote { margin-top: 0; }
  .k-quote__who { font-size: 15px; }
  .k-quote__text { font-size: 14px; }
  .k-hdr__logo { font-size: 22px; max-width: none; }
  .k-hdr__cities { display: block; }
  .k-hdr__brand { flex-direction: row; align-items: baseline; gap: 10px; }

  .k-shops { flex-direction: row; }
  .k-shop { flex: 1; }
  .k-shop__map iframe { height: 220px; }
  .k-shop__body { padding: 20px; }
  .k-shop__city { font-size: 20px; }
  .k-shop__addr { font-size: 15px; }

  .k-foot { margin-top: 24px; padding-top: 20px; }
  .k-foot__tag { font-size: 13px; }
  .k-foot__tel { font-size: 22px; }
  .k-legal { padding: 20px var(--pad) 48px; font-size: 12px; }
  .k-text { padding: 56px var(--pad); }
  .k-text__head { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: baseline;
                  margin-bottom: 28px; }
  .k-text__head h2 { font-size: 40px; }
  .k-text__lead { margin: 0; font-size: 16px; }
  .k-text__body p:first-child { font-size: 19px; max-width: 72ch; }
}

/* Печать: без тёмного блока и без карт — экономим тонер посетителю. */
@media print {
  .k-why { background: #fff; color: #000; }
  .k-shop__map, .k-strip { display: none; }
}

/* Очень широкий экран: остальные абзацы текста — в две колонки, чтобы строка
   оставалась комфортной (#294). Первый абзац-лид всегда во всю ширину. */
@media (min-width: 1280px) {
  .k-text__body { column-count: 2; column-gap: 56px; }
  .k-text__body p { max-width: none; break-inside: avoid; }
  .k-text__body p:first-child { column-span: all; margin-bottom: 24px; }
}

/* ============ #299: ВНУТРЕННИЕ СТРАНИЦЫ ДИЗАЙН-СИСТЕМЫ ============
   Крошки, шапка страницы и пустое состояние. Та же плоская система, что на главной:
   ни теней, ни скруглений, ни градиентов; заголовки Oswald, текст IBM Plex. */
.k-phead { padding: 18px var(--pad) 6px; }
/* #300: крошки читаются ОДНОЙ строкой. Было: gap и на <ol>, и на <li> — вокруг
   разделителя набегало вдвое больше воздуха, и строка распадалась на куски.
   Теперь расстояние задаёт ТОЛЬКО разделитель, подчёркиваний нет ни в одном состоянии. */
.k-crumbs ol {
  display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 10px; padding: 0;
  align-items: baseline;
}
.k-crumbs li { display: inline; }
.k-crumbs li + li::before {
  content: "/"; margin: 0 6px; color: var(--line); font-weight: 400;
}
.k-crumbs a, .k-crumbs span {
  font: 600 11px/1.35 var(--h); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; border: 0;
}
.k-crumbs a:hover { color: var(--accent); text-decoration: none; }
.k-crumbs span { color: var(--ink); }
.k-phead h1 {
  font: 600 30px/1.04 var(--h); letter-spacing: -.01em; text-transform: uppercase;
  margin: 0 0 8px; color: var(--ink);
}
.k-phead__lead { font: 400 14px/1.5 var(--t); color: var(--muted); margin: 0 0 6px; max-width: 62ch; }
.k-phead__count {
  font: 600 11px/1 var(--h); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin: 0;
}
.k-empty {
  grid-column: 1 / -1; border: var(--frame) solid var(--line);
  padding: 22px; font: 400 14px/1.55 var(--t); color: var(--muted);
}
@media (min-width: 900px) {
  .k-phead { padding: 26px var(--pad) 10px; }
  .k-phead h1 { font-size: 46px; }
  .k-phead__lead { font-size: 15px; }
}

/* ============ #300: ШАПКА — ЗНАК, ДЕЙСТВИЯ, ВЫБОР ТЕЛЕФОНА ============
   🔴 ЦВЕТ ШАПКИ — ОДИН ПЕРЕКЛЮЧАТЕЛЬ. В профиле сайта ключ "header_style":
   "light" (по умолчанию) или "accent" (оранжевая). Он попадает в <html data-hdr="…">.
   Разметка при этом НЕ меняется: оба варианта знака лежат рядом, лишний прячет CSS. */
.k-hdr { background: var(--hdr-bg, var(--paper)); }
:root { --hdr-bg: var(--paper); --hdr-fg: var(--ink); }
.k-hdr__mark { display: inline-flex; align-items: center; }
.k-hdr__mark img { display: block; height: 26px; width: auto; }
.k-hdr__mark--white { display: none; }
.k-hdr__brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
/* #304: ряд действий ПЕРЕНОСИТСЯ, а не переполняет экран. Раньше он «помещался»
   только потому, что элементы сжимались — и первой схлопывалась иконка поиска.
   Сделав их несжимаемыми, мы обязаны дать ряду возможность перенестись, иначе на
   360–390 px появляется горизонтальная прокрутка всей страницы. */
.k-hdr__act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
/* на узких экранах у WhatsApp остаётся только иконка — подпись съедает 62 px */
@media (max-width: 429px) { .k-hdr__wa span { display: none; } .k-hdr__wa { padding: 0 9px; } }
/* #304: действия шапки НЕ СЖИМАЮТСЯ — НА ВСЕХ ШИРИНАХ, включая телефон.
   Иконка поиска это ссылка без текста: как гибкий элемент она сжималась первой и
   схлопывала свой <svg> до 0×0, оставляя в шапке пустой квадрат с рамкой. */
.k-hdr__act > * { flex: 0 0 auto; }
.k-hdr__act svg { flex: 0 0 auto; display: block; }
.k-hdr__search, .k-hdr__wa {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
  border: var(--frame) solid var(--ink); color: var(--ink); text-decoration: none;
  font: 600 11px/1 var(--h); letter-spacing: .08em; text-transform: uppercase;
}
.k-hdr__search { padding: 0 8px; }
.k-hdr__search:hover, .k-hdr__wa:hover { border-color: var(--accent); color: var(--accent); }
/* выбор телефона — тот же механизм, что «Маршрут» (#296): нативные details, ноль JS */
.k-phones { position: relative; }
.k-phones > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border: var(--frame) solid var(--ink);
  font: 700 14px/1 var(--h); letter-spacing: .01em; color: var(--ink); white-space: nowrap;
}
.k-phones > summary::-webkit-details-marker { display: none; }
.k-phones > summary::after {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
  transition: transform .15s;
}
.k-phones[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.k-phones > summary:hover, .k-phones[open] > summary { border-color: var(--accent); color: var(--accent); }
.k-phones > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.k-phones__menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  max-width: calc(100vw - 2 * var(--pad)); min-width: 210px;
  background: var(--paper); border: var(--frame) solid var(--ink);
}
.k-phones__menu a {
  display: block; padding: 9px 12px; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line-2);
}
.k-phones__menu a:last-child { border-bottom: 0; }
.k-phones__menu a:hover { background: var(--paper-2); }
.k-phones__menu b { display: block; font: 700 15px/1.2 var(--h); }
.k-phones__menu span { display: block; font: 400 11px/1.3 var(--t); color: var(--muted-2); }

/* ============ #300: ЗАЯВКА (форма без скриптов) ============ */
.k-lead { padding: 26px var(--pad); border-top: 1px solid var(--line-2); }
.k-lead__intro h2 { font: 600 22px/1.1 var(--h); text-transform: uppercase; margin: 0 0 6px; }
.k-lead__intro p { font: 400 14px/1.55 var(--t); color: var(--muted); margin: 0 0 16px; max-width: 56ch; }
.k-lead__form { display: grid; gap: 12px; max-width: 520px; }
.k-field span {
  display: block; font: 600 10px/1 var(--h); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 5px;
}
.k-field input {
  width: 100%; height: 46px; padding: 0 12px; background: var(--paper);
  border: var(--frame) solid var(--ink); color: var(--ink); font: 400 15px/1 var(--t);
}
.k-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.k-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 48px;
  padding: 0 22px; background: var(--accent); color: #fff; border: 0; cursor: pointer;
  font: 600 13px/1 var(--h); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
}
.k-btn:hover { background: var(--ink); }
.k-btn--ghost { background: transparent; color: var(--ink); border: var(--frame) solid var(--ink); }
.k-btn--ghost:hover { background: var(--ink); color: var(--paper); }
.k-lead__note { font: 400 12px/1.45 var(--t); color: var(--muted-2); margin: 0; }
.k-lead__note a { color: inherit; }
.k-thanks { display: flex; flex-wrap: wrap; gap: 10px; }

/* ============ #300: БОГАТЫЙ ПОДВАЛ ============ */
.k-foot2 { border-top: var(--frame) solid var(--ink); margin-top: 8px; }
.k-foot2__grid { display: grid; gap: 26px; padding: 26px var(--pad); }
.k-foot2 h3 {
  font: 600 11px/1 var(--h); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); margin: 0 0 10px;
}
.k-foot2__tag { font: 400 13px/1.5 var(--t); color: var(--muted); margin: 10px 0 0; max-width: 34ch; }
.k-foot2__col a { display: block; text-decoration: none; color: var(--ink); margin-bottom: 9px; }
.k-foot2__col a:hover { color: var(--accent); }
.k-foot2__phones b { display: block; font: 700 16px/1.2 var(--h); }
.k-foot2__phones span { display: block; font: 400 11px/1.3 var(--t); color: var(--muted-2); }
.k-fshop { margin-bottom: 14px; }
.k-fshop b { display: block; font: 600 13px/1.2 var(--h); text-transform: uppercase; letter-spacing: .04em; }
.k-fshop span { display: block; font: 400 13px/1.5 var(--t); color: var(--muted); }
.k-fshop a { display: inline-block; margin-top: 4px; font: 600 11px/1 var(--h);
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.k-foot2__cats a { font: 400 14px/1.4 var(--t); }
.k-foot2__legal {
  border-top: 1px solid var(--line-2); padding: 16px var(--pad) 30px;
  font: 400 12px/1.6 var(--t); color: var(--muted-2);
}
.k-foot2__legal p { margin: 0 0 4px; }
.k-foot2__legal a { color: var(--muted); }
.k-foot2__oferta { margin-top: 8px !important; max-width: 78ch; }

@media (min-width: 900px) {
  .k-foot2__grid { grid-template-columns: 1.4fr 1fr 1.4fr 1fr; gap: 30px; }
  .k-lead { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; padding: 40px var(--pad); }
  .k-lead__intro h2 { font-size: 30px; }
}

/* ---- ОРАНЖЕВАЯ ШАПКА: включается ключом header_style:"accent" в профиле ---- */
[data-hdr="accent"] { --hdr-bg: var(--accent); --hdr-fg: #fff; }
[data-hdr="accent"] .k-hdr { border-bottom-color: rgba(255,255,255,.35); }
[data-hdr="accent"] .k-hdr__mark--red { display: none; }
[data-hdr="accent"] .k-hdr__mark--white { display: block; }
[data-hdr="accent"] .k-wm__a, [data-hdr="accent"] .k-wm__b,
[data-hdr="accent"] .k-hdr__nav a, [data-hdr="accent"] .k-hdr__scroll a,
[data-hdr="accent"] .k-phones > summary, [data-hdr="accent"] .k-hdr__search,
[data-hdr="accent"] .k-hdr__wa, [data-hdr="accent"] .k-route > summary { color: #fff; }
[data-hdr="accent"] .k-phones > summary, [data-hdr="accent"] .k-hdr__search,
[data-hdr="accent"] .k-hdr__wa, [data-hdr="accent"] .k-route > summary { border-color: rgba(255,255,255,.6); }
[data-hdr="accent"] .k-hdr__nav a:hover, [data-hdr="accent"] .k-phones > summary:hover,
[data-hdr="accent"] .k-hdr__search:hover, [data-hdr="accent"] .k-hdr__wa:hover,
[data-hdr="accent"] .k-route > summary:hover { color: var(--paper-2); border-color: #fff; }

/* #301: ЗНАК НА ОРАНЖЕВОЙ ШАПКЕ. Двухцветное деление (KUGOO акцентом, RUSSIA SOCHI
   чернилами) на акцентном фоне жить не может: акцент СТАЛ фоном. Проверено числом —
   любая пара «светлый + тёмный» на #DA3C03 не вытягивает 4.5:1 обоими тонами сразу.
   Решение: знак получает СВОЁ белое поле — там оба фирменных цвета работают как
   задумано (акцент на белом 4.54:1, чернила на белом 16.9:1), а плоскую систему
   белый прямоугольник не нарушает. */
[data-hdr="accent"] .k-hdr__logo {
  background: #fff; padding: 4px 9px 5px; display: inline-block;
}
[data-hdr="accent"] .k-wm__a { color: var(--accent); }
[data-hdr="accent"] .k-wm__b { color: var(--ink); }
/* рамки кнопок: 0.6 давало ~2.9:1 к фону — для границ элементов управления мало */
[data-hdr="accent"] .k-phones > summary, [data-hdr="accent"] .k-hdr__search,
[data-hdr="accent"] .k-hdr__wa, [data-hdr="accent"] .k-route > summary {
  border-color: rgba(255,255,255,.85);
}

/* ============ #301: КАРТОЧКА ТОВАРА ============ */
.k-phead--prod { padding-bottom: 0; }
.k-prod { padding: 6px var(--pad) 0; display: grid; gap: 18px; }
/* Галерея без скриптов: лента с прилипанием. Пальцем — свайп, мышью — колесо/перетаскивание. */
.k-gal {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; border: var(--frame) solid var(--line);
}
.k-gal::-webkit-scrollbar { display: none; }
.k-gal__item { flex: 0 0 100%; margin: 0; scroll-snap-align: center; background: #fff; }
.k-gal__item img { display: block; width: 100%; height: auto; }
.k-buy__cat {
  font: 600 11px/1 var(--h); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); margin: 0 0 6px;
}
.k-buy h1 {
  font: 600 26px/1.06 var(--h); letter-spacing: -.01em; text-transform: uppercase;
  margin: 0 0 6px; color: var(--ink);
}
.k-buy__spec { font: 400 13px/1.4 var(--t); color: var(--muted); margin: 0 0 14px; }
.k-buy__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.k-buy__new { font: 600 34px/1 var(--h); color: var(--ink); }
.k-buy__old { font: 400 17px/1 var(--t); color: var(--muted-2); text-decoration: line-through; }
.k-buy__before { margin: 6px 0 0; font: 400 13px/1.35 var(--t); color: var(--muted-2); }
.k-buy__before s { text-decoration: line-through; margin-right: 6px; }
.k-buy__install { font: 400 13px/1.4 var(--t); color: var(--muted); margin: 8px 0 0; }
.k-buy__stock {
  font: 600 11px/1 var(--h); letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); margin: 12px 0 0;
}
.k-cfg { margin-top: 18px; border-top: 1px solid var(--line-2); padding-top: 14px; }
.k-cfg h2 { font: 600 13px/1 var(--h); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2); margin: 0 0 10px; }
.k-cfg ul { list-style: none; margin: 0; padding: 0; }
.k-cfg li {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--line-2);
}
.k-cfg li span { font: 400 14px/1.35 var(--t); color: var(--ink); }
.k-cfg li b { font: 600 16px/1 var(--h); white-space: nowrap; }
.k-cfg__note { font: 400 12px/1.45 var(--t); color: var(--muted-2); margin: 10px 0 0; }
.k-buy__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.k-specs { display: grid; gap: 0; margin: 0; }
.k-specs > div {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line-2);
}
.k-specs dt { font: 400 14px/1.4 var(--t); color: var(--muted); margin: 0; }
.k-specs dd { font: 600 14px/1.4 var(--t); color: var(--ink); margin: 0; text-align: right; }
@media (min-width: 900px) {
  .k-prod { grid-template-columns: 1.15fr 1fr; gap: 34px; align-items: start;
            padding: 10px var(--pad) 0; }
  .k-buy h1 { font-size: 34px; }
  .k-buy__new { font-size: 42px; }
  .k-specs { grid-template-columns: 1fr 1fr; column-gap: 40px; }
}

/* ============ #302: СЛУЖЕБНЫЕ СТРАНИЦЫ ============ */
.k-salon { display: grid; gap: 18px; padding: 6px var(--pad) 0; }
.k-salon__facts { margin: 0; }
.k-salon__facts > div {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line-2);
}
.k-salon__facts dt { font: 400 13px/1.4 var(--t); color: var(--muted); margin: 0; }
.k-salon__facts dd { font: 600 15px/1.4 var(--t); color: var(--ink); margin: 0; text-align: right; }
.k-salon__facts dd a { color: inherit; }
.k-salon__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.k-salon__map { border: var(--frame) solid var(--line); }
.k-salon__map iframe { display: block; width: 100%; height: 300px; border: 0; }
.k-contacts { display: grid; gap: 12px; }
.k-contacts__item {
  border: var(--frame) solid var(--line); padding: 16px;
  display: grid; gap: 4px; align-content: start;
}
.k-contacts__item b { font: 600 20px/1.15 var(--h); color: var(--ink); }
.k-contacts__item span { font: 400 12px/1.4 var(--t); color: var(--muted-2); margin-bottom: 8px; }
.k-contacts__item .k-btn { justify-self: start; height: 40px; }
/* документ (политика): узкая комфортная колонка, без двух колонок */
.k-text--doc .k-text__body { max-width: 78ch; }
.k-text--doc .k-text__body h2 {
  font: 600 15px/1.25 var(--h); text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink); margin: 22px 0 8px;
}
/* поиск — единственная страница со скриптом */
.k-search { margin-bottom: 18px; }
.k-search__form { display: flex; gap: 10px; flex-wrap: wrap; }
.k-search__input {
  flex: 1 1 240px; height: 48px; padding: 0 14px; background: var(--paper);
  border: var(--frame) solid var(--ink); color: var(--ink); font: 400 15px/1 var(--t);
}
.k-search__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.k-search__empty { border: var(--frame) solid var(--line); padding: 20px; margin-bottom: 18px; }
.k-search__empty p { margin: 0; font: 400 14px/1.55 var(--t); color: var(--muted); }
.k-search__dd { display: none; }
/* Плитки, которые рисует ОБЩИЙ new/search.js: он эмитит классы старой системы
   (.prod, .prod__name…). Скрипт трогать нельзя — его md5 это ?v= на боевом
   scooters-zone, — поэтому одеваем его разметку в наш вид здесь. */
.k-grid .prod { border: var(--frame) solid var(--ink); background: var(--paper); display: flex;
  flex-direction: column; }
.k-grid .prod__img { display: block; background: #fff; }
.k-grid .prod__img img { display: block; width: 100%; height: auto; }
.k-grid .prod__body { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.k-grid .prod__name { font: 600 13px/1.25 var(--h); margin: 0; }
.k-grid .prod__name a { color: var(--ink); }
.k-grid .prod__price { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-top: auto; }
.k-grid .prod__new { font: 600 22px/1 var(--h); color: var(--ink); }
.k-grid .prod__old { font: 400 12px/1 var(--t); color: var(--muted-2); text-decoration: line-through; }
.k-grid .prod__before { font: 400 11px/1.3 var(--t); color: var(--muted-2); }
.k-grid .prod__before s { text-decoration: line-through; margin-right: 5px; }
.k-grid .prod__foot { margin-top: 10px; }
.k-grid .prod__foot .btn { display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
  border: var(--frame) solid var(--ink); font: 600 11px/1 var(--h); letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink); }
.k-grid .prod__foot .btn:hover { background: var(--ink); color: var(--paper); }
.k-grid .prod__badge { font: 600 10px/1 var(--h); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2); }
@media (min-width: 900px) {
  .k-salon { grid-template-columns: 1fr 1.2fr; gap: 30px; align-items: start; }
  .k-salon__map iframe { height: 380px; }
  .k-contacts { grid-template-columns: repeat(3, 1fr); }
}
/* #302: бейдж «В наличии в шоуруме» ЗАШИТ в общий new/search.js (строка 70), а его
   md5 — это `?v=` на 222 страницах боевого scooters-zone, поэтому скрипт неприкосновенен.
   На этом сайте бейдж и не нужен: каталог целиком «в наличии», а лексика здесь — «зал»
   и «салон» (#294). Прячем показом, а не правкой чужого файла. */
.k-grid .prod__badge { display: none; }


/* #304: пороги строчной навигации — по измеренной ширине, с запасом.
   1280–1439: тесная посадка (зазор 16, кегль 12) и WhatsApp одной иконкой.
   от 1440:   штатный вид (зазор 22, кегль 13, подпись WhatsApp). */
@media (min-width: 1280px) {
  .k-hdr__nav {
    display: flex; gap: 16px; flex: 0 1 auto; min-width: 0; overflow: hidden;
    justify-content: flex-start;
    font: 600 12px/1 var(--h); letter-spacing: .05em; text-transform: uppercase;
  }
  .k-hdr__scroll { display: none; }
  .k-hdr__wa span { display: none; }          /* только иконка — экономит ~62 px */
  .k-hdr__wa { padding: 0 9px; }
}
@media (min-width: 1440px) {
  .k-hdr__nav { gap: 22px; font-size: 13px; letter-spacing: .06em; justify-content: center; }
  .k-hdr__wa span { display: inline; }
  .k-hdr__wa { padding: 0 10px; }
}

/* #304: страховка на очень узких экранах (320 px и уже). Ничего из этого не меняет
   вид на 360+, но убирает горизонтальную прокрутку всей страницы:
   · элементы сетки могут быть уже своего содержимого (иначе картинка карточки
     распирает колонку по своей натуральной ширине);
   · картинки не выходят за колонку;
   · панель выбора телефона не шире экрана. */
.k-grid > *, .k-shops > *, .k-prod > * { min-width: 0; }
.k-grid img, .k-cat__shot img, .k-card__shot img { max-width: 100%; height: auto; }
.k-phones__menu { max-width: calc(100vw - 2 * var(--pad)); }

/* #304: статическая карта вместо чужого виджета. Вся картинка — ссылка на маршрут,
   рядом явная кнопка: интерактивная карта теперь только там, и это должно быть видно. */
.k-shop__map { display: block; border-bottom: 1px solid var(--line-2); }
.k-shop__map img, .k-salon__map img { display: block; width: 100%; height: auto; }
.k-salon__maplink {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  margin: 0; padding: 12px; border-top: 1px solid var(--line-2);
}
.k-salon__maplink span { font: 400 12px/1.4 var(--t); color: var(--muted-2); }
/* #305: подпись авторства под картой — мелко и приглушённо, как требует лицензия */
.k-mapcred { margin: 0; padding: 8px 12px; font: 400 11px/1.4 var(--t); color: var(--muted-2); }
.k-mapcred a { color: inherit; text-decoration: underline; }
.k-salon__maplink .k-mapcred { padding: 0; }