/* berlion.pro — стили каталога складской техники.
   База (шапка, подвал, кнопки, контейнер, токены) — из styles.css.
   Здесь только компоненты витрины: hero, сетка категорий, карточки, товар. */

:root { --bp-max: 1280px; }

/* Компенсация фиксированной шапки (styles.css: .header position:fixed) */
body { padding-top: 141px; }
@media (max-width: 768px) { body { padding-top: 84px; } }
@media (max-width: 700px) { body { padding-top: 68px; } }

main { background: var(--page-bg); }

/* Только вертикальные отступы: .bp-sec всегда висит на .container, а короткая
   запись `padding` затерла бы его боковые 24px и на узком экране прижала бы
   карточки к краю экрана. */
.bp-sec { padding-block: 56px; }
.bp-sec__title { font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: var(--dark); margin: 0 0 8px; letter-spacing: -0.02em; }
.bp-sec__subtitle { color: var(--gray-500); font-size: 1.05rem; margin: 0 0 32px; max-width: 640px; }

/* Кнопки-модификаторы (btn/btn-primary/btn-outline/btn-lg есть в styles.css,
   на случай отличий подстрахуем размер) */
.btn-lg { padding: 14px 28px; font-size: 1.05rem; }

/* Темный герой прежней главной удален 16.09.2026: главная переписана
   в языке карточки и сервисных страниц (home.css), градиентного блока
   на сайте больше нет. Классы .bp-sec и .bp-cats остались — ими пользуются
   каталог, поиск и страницы марок. */

/* ---------- СЕТКА КАТЕГОРИЙ ---------- */
.bp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.bp-cat {
  display: flex; flex-direction: column; gap: 12px; padding: 26px 24px;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  text-decoration: none; color: inherit; transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.bp-cat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
.bp-cat__icon { display: inline-flex; width: 56px; height: 56px; color: var(--primary); }
.bp-cat__icon svg { width: 100%; height: 100%; }
.bp-cat__title { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; color: var(--dark); }
.bp-cat__lead { color: var(--gray-500); font-size: .95rem; line-height: 1.5; flex: 1; }
.bp-cat__more { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 700; font-size: .95rem; margin-top: 4px; }
.bp-cat:hover .bp-cat__more svg { transform: translateX(4px); }
.bp-cat__more svg { transition: var(--transition); }

/* ---------- ХЛЕБНЫЕ КРОШКИ ---------- */
/* Хлебные крошки. Это указатель пути, а не строка текста: набор мелкий,
   разделители светлее ссылок, текущая страница не кричит жирным. Одна мера
   на весь сайт — каталог, карточка, марки и сервисные страницы. */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 0;
    padding-top: 18px;
    padding-bottom: 2px;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--gray-500);
}
.crumbs a {
    color: var(--gray-500);
    text-decoration: none;
    border-radius: 3px;
    transition: color .16s ease;
}
.crumbs a:hover { color: var(--primary); }
.crumbs a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Разделитель рисует сам пункт: отдельным элементом он повисал в конце
   строки, когда цепочка переносилась на телефоне. Тон светлее текста. */
.crumbs > * + *::before {
    /* Альтернативный текст пустой: скринридер читает путь по ссылкам,
       а не по знакам между ними. */
    content: "/" / "";
    margin: 0 7px;
    color: var(--gray-300, #D0CFCB);
}
.crumbs__current { color: var(--dark-700); font-weight: 500; }

/* На телефоне цепочка не переносится, а листается пальцем: в две строки она
   съедала первый экран, а перенесенный пункт начинался с «/». Обрезанный
   край гасится маской — видно, что путь длиннее. */
@media (max-width: 768px) {
    .crumbs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), rgba(0, 0, 0, 0));
                mask-image: linear-gradient(90deg, #000 calc(100% - 24px), rgba(0, 0, 0, 0));
    }
    .crumbs::-webkit-scrollbar { display: none; }
    .crumbs > * { flex: 0 0 auto; white-space: nowrap; }
}

/* ---------- ШАПКА КАТЕГОРИИ ---------- */
.cat-hero { background: #fff; border-bottom: 1px solid var(--gray-200); padding: 32px 0; }
.cat-hero .container { display: flex; align-items: center; gap: 22px; }
.cat-hero__icon { flex: none; width: 72px; height: 72px; color: var(--primary); background: var(--primary-light); border-radius: var(--radius-lg); display: inline-flex; align-items: center; justify-content: center; padding: 14px; }
.cat-hero__icon svg { width: 100%; height: 100%; }
.cat-hero__title { font-family: var(--font-heading); font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; color: var(--dark); margin: 0 0 6px; }
.cat-hero__lead { color: var(--gray-500); font-size: 1.05rem; margin: 0; max-width: 720px; }

/* ---------- СЕТКА ТОВАРОВ ---------- */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.prod-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); box-shadow: var(--shadow-sm); }
.prod-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
/* min-width: 0 — для Safari: фото-блок — элемент колонки с aspect-ratio, и WebKit брал
   его минимальную ширину от собственной ширины картинки (300px + отступы), блок
   становился на 26px шире карточки, а плашка марки в углу выходила за ее край. */
.prod-card__imgwrap { position: relative; aspect-ratio: 3/4; background: #fff; padding: 18px; min-width: 0; }
.prod-card__imglink { display: block; width: 100%; height: 100%; }
.prod-card__img { width: 100%; height: 100%; object-fit: contain; }
.prod-card__body { display: flex; flex-direction: column; gap: 12px; padding: 4px 18px 18px; flex: 1; }
.prod-card__title { font-size: 1rem; font-weight: 700; line-height: 1.35; margin: 0; }
.prod-card__title a { color: var(--dark); text-decoration: none; }
.prod-card__title a:hover { color: var(--primary); }
.prod-card__specs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.prod-card__specs li { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; color: var(--gray-500); border-bottom: 1px dashed var(--gray-200); padding-bottom: 3px; }
.prod-card__specs b { color: var(--dark-700); font-weight: 600; text-align: right; }
.prod-card__cities { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: .82rem; line-height: 1.4; color: var(--gray-500); }
.prod-card__cities svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; color: var(--primary); }
.prod-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; }
.prod-card__price { font-size: 1.05rem; color: var(--dark); }
.prod-card__price b { font-size: 1.25rem; font-weight: 800; }
.prod-card__price--ask { font-size: .95rem; color: var(--gray-500); }
.prod-card__btn { padding: 8px 16px; font-size: .9rem; white-space: nowrap; }

/* ---------- ПУСТАЯ КАТЕГОРИЯ ---------- */
.empty-cat { text-align: center; max-width: 520px; margin: 0 auto; padding: 40px 0; }
.empty-cat__icon { width: 84px; height: 84px; color: var(--primary); background: var(--primary-light); border-radius: var(--radius-xl); display: inline-flex; align-items: center; justify-content: center; padding: 18px; margin-bottom: 20px; }
.empty-cat__icon svg { width: 100%; height: 100%; }
.empty-cat__title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--dark); margin: 0 0 10px; }
.empty-cat__text { color: var(--gray-500); line-height: 1.6; margin: 0 0 24px; }

/* Стили карточки товара переехали в product-card.css (макет 2026-09-10):
   он подключается только на странице товара через extraHead. */

/* ---------- БЛОК ПРЕИМУЩЕСТВ ---------- */
.benefits { background: #fff; border-top: 1px solid var(--gray-200); padding: 48px 0; }
.benefits__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.benefit b { display: block; font-family: var(--font-heading); font-size: 1.1rem; color: var(--dark); margin-bottom: 6px; }
.benefit span { color: var(--gray-500); font-size: .95rem; line-height: 1.55; }

@media (max-width: 860px) {
}
@media (max-width: 640px) {
  .bp-sec { padding-block: 40px; }
  .cat-hero .container { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ---------- ЛОГОТИП-ЛОКАП: вордмарк + тег-строка ---------- */
.logo--stack { flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1; }
.logo--stack .logo-img { display: block; }
.logo-tagline {
  font-family: var(--font);
  font-weight: 700;
  /* Кегль подобран так, чтобы правый край строки совпал с правым краем знака:
     на 9px и шрифте Inter она вылезала за него на 11px. Трекинг задан в em,
     поэтому ширина строки меняется вместе с кеглем пропорционально. */
  font-size: 8.34px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--primary);
  white-space: nowrap;
  /* Слово «БЕРЛИОН» в логотипе начинается на 26% его ширины (после значка).
     Отступ в процентах масштабируется вместе с логотипом на любом экране. */
  margin-left: calc(26% - 5px);
}
@media (max-width: 768px) {
  .logo-tagline { font-size: 8px; letter-spacing: 0.13em; }
}

/* ---------- НАВИГАЦИЯ: пункты в одну строку ---------- */
.nav-link { white-space: nowrap; }

/* ---------- БРЕНДЫ ---------- */
/* Знак марки — картинка произвольных пропорций: у TOR он почти квадратный,
   у Xilin вытянутый. Поэтому везде задаем высоту, а ширину отдаем картинке;
   у REM файла знака нет, и вместо картинки идет текстовый вордмарк (--text). */

/* Логотип-плашка в углу фото карточки товара */
.prod-card__brand {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; min-width: 38px; padding: 6px 10px;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  text-decoration: none; transition: var(--transition);
}
.prod-card__brand img { height: 100%; width: auto; max-width: 78px; object-fit: contain; }
.prod-card__brand--text { font-family: var(--font-heading); font-size: .8rem; font-weight: 800; letter-spacing: .06em; color: var(--dark); }
.prod-card__brand:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }

/* Ряд производителей над списком товаров категории и в каталоге.
   Пока это навигация; фасет-фильтр встанет на те же данные (cat.brands). */
.brand-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 26px; }
.brand-row__label { font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-500); }
.brand-row__list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.brand-chip {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 14px;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md, 10px);
  text-decoration: none; transition: var(--transition);
}
.brand-chip img { height: 22px; width: auto; max-width: 92px; object-fit: contain; }
.brand-chip__name { font-family: var(--font-heading); font-size: 1rem; font-weight: 800; letter-spacing: .06em; color: var(--dark); }
.brand-chip__count { font-size: .8rem; font-weight: 700; color: var(--gray-500); background: var(--gray-100); border-radius: 999px; padding: 2px 8px; }
.brand-chip:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.brand-row--wide .brand-chip { height: 56px; padding: 0 18px; }
.brand-row--wide .brand-chip img { height: 30px; max-width: 120px; }
.bp-sec--tight { padding-top: 0; }

/* Шапка страницы бренда */
.brand-hero { background: #fff; border-bottom: 1px solid var(--gray-200); padding: 32px 0; }
.brand-hero__inner { display: flex; align-items: center; gap: 28px; }
.brand-hero__logo {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 168px; height: 104px; padding: 16px;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
}
.brand-hero__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.brand-hero__logo--text { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; letter-spacing: .08em; color: var(--dark); }
.brand-hero__title { font-family: var(--font-heading); font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; color: var(--dark); margin: 0 0 8px; letter-spacing: -0.02em; }
.brand-hero__lead { color: var(--gray-500); font-size: 1.05rem; line-height: 1.6; margin: 0 0 16px; max-width: 720px; }
.brand-hero__meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; }
.brand-hero__meta li { display: flex; flex-direction: column; gap: 2px; }
.brand-hero__meta span { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-500); }
.brand-hero__meta b { font-size: .95rem; font-weight: 700; color: var(--dark); }

/* Цифры о бренде */
.brand-sec { padding-bottom: 0; }
.brand-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.brand-fact { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.brand-fact b { display: block; font-family: var(--font-heading); font-size: 1.7rem; font-weight: 800; color: var(--primary); line-height: 1.1; margin-bottom: 8px; }
.brand-fact span { display: block; color: var(--gray-500); font-size: .9rem; line-height: 1.5; }

/* Текст о бренде + список особенностей */
.brand-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; padding: 48px 0 8px; }
.brand-about__text p { color: var(--dark-700); line-height: 1.7; margin: 0 0 14px; }
.brand-about__text p:last-child { margin-bottom: 0; }
.brand-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.brand-features li { display: flex; gap: 12px; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 18px; }
.brand-features svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--primary); margin-top: 2px; }
.brand-features b { display: block; color: var(--dark); font-size: 1rem; margin-bottom: 4px; }
.brand-features span { display: block; color: var(--gray-500); font-size: .92rem; line-height: 1.55; }

/* Товары марки, разложенные по категориям каталога */
.brand-group + .brand-group { margin-top: 40px; }
.brand-group__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.brand-group__icon { flex: none; width: 40px; height: 40px; color: var(--primary); background: var(--primary-light); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; padding: 8px; }
.brand-group__icon svg { width: 100%; height: 100%; }
.brand-group__title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: var(--dark); margin: 0; }
.brand-group__title a { color: inherit; text-decoration: none; }
.brand-group__title a:hover { color: var(--primary); }
.brand-group__count { font-size: .85rem; color: var(--gray-500); }

/* Запрос КП внизу страницы бренда */
.brand-cta-sec { padding-top: 0; }
.brand-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.brand-cta__title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; color: var(--dark); margin: 0 0 8px; }
.brand-cta__text { color: var(--gray-500); line-height: 1.6; margin: 0; max-width: 620px; }
.brand-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Список марок на /manufactures/ */
.brand-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.brand-card { display: flex; flex-direction: column; gap: 16px; padding: 26px 24px; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: var(--transition); }
.brand-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
.brand-card__logo { display: inline-flex; align-items: center; height: 52px; }
.brand-card__logo img { max-height: 100%; max-width: 170px; width: auto; object-fit: contain; }
.brand-card__logo--text { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; letter-spacing: .08em; color: var(--dark); }
.brand-card__lead { color: var(--gray-500); font-size: .95rem; line-height: 1.55; flex: 1; }
.brand-card__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: .88rem; color: var(--gray-500); }
.brand-card__meta b { color: var(--dark); font-weight: 700; }

@media (max-width: 900px) {
  .brand-about { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; }
}
@media (max-width: 700px) {
  .brand-hero__inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .brand-hero__logo { width: 140px; height: 86px; }
  .brand-cta { padding: 22px 18px; }
  .brand-cta__actions { width: 100%; }
  .brand-cta__actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ---------- КОРЗИНА (панель из styles.css, дополнения berlion.pro) ----------
   Панель и ее строки перенесены с berlion.ru вместе со стилями (styles.css:
   .cart, .cart-line, .cart-qty, .cart-sum). Здесь только то, чего там нет:
   миниатюра машины в строке, подпись марки и артикула, единица «шт»
   и пульс кнопки в шапке при добавлении. */
.cart-line__head { align-items: center; }
.cart-line__pic { flex: none; width: 48px; height: 48px; object-fit: contain; background: #fff; border: 1px solid var(--gray-200); border-radius: 6px; padding: 3px; }
.cart-line__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cart-line__meta { font-size: 12px; line-height: 1.35; color: var(--gray-500); }
.cart-line__unit { margin-left: 8px; font-size: 13px; color: var(--gray-500); }
.cart-line__total--ask { font-size: 14px; font-weight: 600; color: var(--gray-500); }
.cart-btn--pulse { animation: cartBtnPulse 0.55s ease-out 2; border-color: var(--primary); color: var(--primary); }
@keyframes cartBtnPulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(201, 79, 8, 0.45); }
  45%  { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(201, 79, 8, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(201, 79, 8, 0); }
}
@media (prefers-reduced-motion: reduce) { .cart-btn--pulse { animation: none; } }

/* ==========================================================================
   Поиск по модели и артикулу в шапке и на /poisk/ (аудит категории 12.09.2026)
   ========================================================================== */
/* Поле поиска в строке шапки (владелец, 13.09.2026): поле, справа опции
   «где искать», волосяной разделитель и лупа. Одна рамка на всю группу;
   фокус — синяя рамка группы. На телефоне лупы в шапке нет (владелец, 21.09.2026):
   форму переносит в меню бургера berlion-pro.js, стили — у мегаменю ниже. */
.hsearch { position: relative; flex: 1 1 auto; min-width: 0; max-width: 640px; }
.hsearch__box { display: flex; align-items: center; height: 46px; padding: 0 4px 0 16px; border: 1px solid #D1D0CC; border-radius: 6px; background: #fff; transition: border-color .16s ease; }
.hsearch__box:focus-within { border-color: var(--primary, #C94F08); }
.hsearch__field { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; height: 100%; }
.hsearch__field input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; font-family: var(--font); font-size: 15px; color: #1B1C1B; outline: none; }
.hsearch__field input::placeholder { color: #74746E; }
.hsearch__field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hsearch__icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 6px; background: none; color: #66665F; cursor: pointer; transition: background-color .16s ease, color .16s ease; }
.hsearch__icon-btn svg { width: 20px; height: 20px; }
.hsearch__icon-btn:hover, .hsearch__icon-btn[aria-expanded="true"] { background: #F5F5F3; color: #1B1C1B; }
.hsearch__icon-btn:focus-visible { outline: 2px solid var(--primary, #C94F08); outline-offset: 0; }
.hsearch__submit { color: #1B1C1B; }
/* Аккуратный разделитель: волосяная линия в половину высоты поля */
.hsearch__sep { flex: none; width: 1px; height: 22px; margin: 0 4px; background: #D1D0CC; }
.hsearch__scope { position: relative; flex: none; }
.hsearch__scope-menu { position: absolute; right: -44px; top: calc(100% + 10px); z-index: 1020; min-width: 210px; padding: 6px; background: #fff; border: 1px solid #E5E4E1; border-radius: 10px; box-shadow: 0 12px 32px rgba(27, 28, 27, .14); }
.hsearch__scope-title { display: block; padding: 8px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #66665F; }
.hsearch__scope-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 6px; background: none; font-family: var(--font); font-size: 14px; color: #1B1C1B; text-align: left; cursor: pointer; }
.hsearch__scope-opt svg { width: 16px; height: 16px; color: var(--primary, #C94F08); opacity: 0; }
.hsearch__scope-opt:hover, .hsearch__scope-opt:focus-visible { background: #F5F5F3; outline: none; }
.hsearch__scope-opt[aria-checked="true"] { background: #EFEFEC; color: var(--primary, #C94F08); }
.hsearch__scope-opt[aria-checked="true"] svg { opacity: 1; }
.hsearch__drop { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 1018; max-height: 60vh; overflow: auto; background: #fff; border: 1px solid #E5E4E1; border-radius: 10px; box-shadow: 0 12px 32px rgba(27, 28, 27, .14); }
.hsearch__group { margin: 0; padding: 10px 14px 4px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #66665F; }
.hsearch__group + .hsearch__item { border-top: 0; }
.hsearch__item, .psearch__item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: #1B1C1B; text-decoration: none; border-top: 1px solid #E5E4E1; }
.hsearch__item:first-child { border-top: 0; }
.hsearch__item:hover, .hsearch__item.is-active, .psearch__item:hover { background: #EFEFEC; }
.hsearch__item img, .psearch__item img { width: 44px; height: 44px; object-fit: contain; flex: none; border: 1px solid #E5E4E1; border-radius: 4px; padding: 3px; background: #fff; }
.hsearch__item__body, .psearch__item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.hsearch__item__name, .psearch__item__name { font-size: 13px; font-weight: 500; line-height: 1.35; }
.hsearch__item__meta, .psearch__item__meta { font-size: 11px; color: #66665F; }
.hsearch__item__pic, .psearch__item__pic { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #F5F5F3; overflow: hidden; }
.hsearch__item__pic img, .psearch__item__pic img { width: 38px; height: 38px; object-fit: contain; border: 0; padding: 0; background: none; border-radius: 0; }
.hsearch__item__go, .psearch__item__go { flex: none; width: 18px; height: 18px; color: #8A8A84; }
.hsearch__item--cat:hover .hsearch__item__go, .hsearch__item--cat.is-active .hsearch__item__go { color: var(--primary, #C94F08); }
.hsearch__item__price, .psearch__item__price { flex: none; font-family: var(--font-heading); font-size: 14px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.hsearch__none { margin: 0; padding: 14px; font-size: 13px; color: #66665F; }
.hsearch__all { display: block; padding: 10px 14px; border-top: 1px solid #E5E4E1; font-size: 13px; font-weight: 600; color: var(--primary, #C94F08); text-decoration: none; }
.hsearch__all:hover, .hsearch__all.is-active { background: #EFEFEC; }
.header-tg__link { margin-right: 18px; }
.header-tg__link--plain { cursor: default; }
.header-tg__icon { width: 15px; height: 15px; flex: none; object-fit: contain; }
@media (max-width: 768px) {
  /* Пока скрипт не перенес форму в меню (и без скрипта), в строке шапки ее нет */
  .header-main-inner > .hsearch { display: none; }
  .hsearch { max-width: none; }
  /* 16px: при меньшем кегле iOS приближает страницу на фокусе поля */
  .hsearch__field input { font-size: 16px; }
  .hsearch__drop { position: static; margin-top: 8px; max-height: none; box-shadow: none; }
  .hsearch__item__price { display: none; }
}
/* Страница результатов */
.psearch { display: flex; gap: 10px; max-width: 640px; margin-top: 20px; }
.psearch__field { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border: 1px solid #D1D0CC; border-radius: 6px; background: #fff; color: #66665F; }
.psearch__field:focus-within { border-color: var(--primary, #C94F08); }
.psearch__field svg { width: 18px; height: 18px; flex: none; }
.psearch__field input { flex: 1 1 auto; min-width: 0; border: 0; padding: 0; background: transparent; font-family: var(--font); font-size: 15px; color: #1B1C1B; outline: none; }
.psearch__btn { flex: none; }
.psearch__hint { margin: 14px 0 0; font-size: 14px; color: #66665F; }
.psearch__list { list-style: none; margin: 20px 0 0; padding: 0; max-width: 760px; border-top: 1px solid #D1D0CC; }
.psearch__item { padding: 12px 8px; }
.psearch__item img { width: 56px; height: 56px; }
.psearch__item__name { font-size: 15px; }
.psearch__none { margin-top: 24px; max-width: 56ch; }
.psearch__none p { margin: 0 0 16px; color: #45463F; line-height: 1.6; }
.psearch .cl-btn, .psearch__none .cl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 6px; background: var(--primary, #C94F08); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; border: 0; cursor: pointer; }
@media (max-width: 640px) { .psearch { flex-direction: column; } .psearch__item__price { display: none; } }

/* =====================================================================
   Мегаменю каталога (владелец, 13.09.2026, образец — premier-demo.ru).
   Вход — одна синяя кнопка «Каталог» после логотипа: пункты разделов из шапки
   убраны. Панель на всю ширину под шапкой: разделы сеткой в четыре колонки
   (картинка на прозрачном фоне в круглой серой подложке, название со счетчиком,
   до четырех подкатегорий и «Еще»), справа — «Весь каталог» и марки.
   Синий — только кнопка; наведение в панели — цвет текста и серая подложка.
   ===================================================================== */
.hcat { display: flex; align-items: center; margin-right: auto; }
.hcat-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 22px 0 18px;
  border-radius: 6px; background: var(--primary, #C94F08); color: #fff;
  font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .16s ease;
}
.hcat-btn:hover, .hcat-btn[aria-expanded="true"] { background: var(--primary-dark, #AD4206); color: #fff; }
.hcat-btn:focus-visible { outline: 2px solid var(--primary, #C94F08); outline-offset: 3px; }
.hcat-btn__icon { position: relative; width: 18px; height: 18px; flex: none; }
.hcat-btn__icon svg { position: absolute; inset: 0; width: 18px; height: 18px; transition: opacity .16s ease, transform .2s ease; }
.hcat-btn__close { opacity: 0; transform: rotate(-45deg); }
.hcat-btn[aria-expanded="true"] .hcat-btn__grid { opacity: 0; transform: rotate(45deg); }
.hcat-btn[aria-expanded="true"] .hcat-btn__close { opacity: 1; transform: none; }

.hcat-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 1010;
  max-height: calc(100vh - var(--hcat-top, 130px)); max-height: calc(100dvh - var(--hcat-top, 130px));
  overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-top: 1px solid #E5E4E1;
  box-shadow: 0 18px 40px rgba(27, 28, 27, .12);
}
.hcat-panel__inner { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 40px; padding-block: 32px 36px; }
.hcat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 28px; align-content: start; }

.hcat-sec { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: start; }
.hcat-sec__pic { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #F5F5F3; overflow: hidden; }
.hcat-sec__pic img { width: 64px; height: 64px; object-fit: contain; }
.hcat-sec__icon { display: flex; width: 36px; height: 36px; color: #66665F; }
.hcat-sec__icon svg { width: 100%; height: 100%; }
.hcat-sec__body { min-width: 0; padding-top: 4px; }
.hcat-sec__head { display: block; }
.hcat-sec__title { font-family: var(--font-heading); font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.012em; color: #1B1C1B; text-decoration: none; text-wrap: balance; }
.hcat-sec__title:hover, .hcat-sec__title[aria-current] { color: var(--primary, #C94F08); }
.hcat-sec__count { margin-left: 6px; font-size: 12px; color: #66665F; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hcat-sec__toggle { display: none; }
.hcat-sec__list { list-style: none; margin: 10px 0 0; padding: 0; }
.hcat-sec__list a { display: block; padding: 4px 0; font-size: 14px; line-height: 1.45; color: #66665F; text-decoration: none; }
.hcat-sec__list a:hover { color: #1B1C1B; }
.hcat-sec__extra { display: none; }
.hcat-sec.is-more .hcat-sec__extra { display: list-item; }
.hcat-sec__more { margin-top: 6px; padding: 2px 0; border: 0; background: none; font-family: var(--font); font-size: 14px; color: #1B1C1B; text-decoration: underline; text-decoration-color: #D1D0CC; text-underline-offset: 4px; cursor: pointer; }
.hcat-sec__more:hover { text-decoration-color: currentColor; }

.hcat-side { display: flex; flex-direction: column; gap: 12px; }
.hcat-promo { display: block; overflow: hidden; border-radius: 10px; background: #F5F5F3; color: #1B1C1B; text-decoration: none; }
.hcat-promo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.hcat-promo__text { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 14px; }
.hcat-promo__text b { font-family: var(--font-heading); font-size: 15px; font-weight: 600; }
.hcat-promo__text span { font-size: 13px; color: #66665F; }
.hcat-promo:hover b { color: var(--primary, #C94F08); }
.hcat-brands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hcat-brand { display: flex; align-items: center; justify-content: center; height: 64px; padding: 0 12px; border-radius: 6px; background: #F5F5F3; color: #1B1C1B; font-family: var(--font-heading); font-weight: 600; text-decoration: none; transition: background-color .16s ease; }
.hcat-brand:hover { background: #E5E4E1; }
.hcat-brand img { max-width: 100%; max-height: 26px; width: auto; height: auto; object-fit: contain; }

/* Поиск, страницы условий и контакты в панели — только на телефоне (ниже) */
.hcat-search, .hcat-nav, .hcat-contacts { display: none; }

.hcat-panel a:focus-visible, .hcat-panel button:focus-visible { outline: 2px solid var(--primary, #C94F08); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 1280px) {
  .hcat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hcat-panel__inner { grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; }
}
@media (max-width: 1024px) {
  .hcat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Телефон и узкий планшет: кнопка уходит, панель открывает бургер и становится
   списком на весь экран под шапкой; подкатегории раскрываются стрелкой. */
@media (max-width: 768px) {
  .hcat { display: none; }
  .hcat-panel { position: fixed; top: var(--hcat-top, 68px); bottom: 0; max-height: none; box-shadow: none; }
  .hcat-panel__inner { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 4px 28px; }
  .hcat-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hcat-sec { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; padding: 10px 0; border-bottom: 1px solid #E5E4E1; }
  .hcat-sec__pic { width: 48px; height: 48px; }
  .hcat-sec__pic img { width: 42px; height: 42px; }
  .hcat-sec__body { padding-top: 0; }
  .hcat-sec__head { display: flex; align-items: center; gap: 8px; min-height: 48px; }
  .hcat-sec__title { flex: 1 1 auto; font-size: 16px; }
  .hcat-sec__count { margin-left: 0; }
  .hcat-sec__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 6px; background: none; color: #66665F; cursor: pointer; }
  @media (hover: hover) { .hcat-sec__toggle:hover { background: #F5F5F3; } }
  .hcat-sec__toggle svg { width: 20px; height: 20px; transition: transform .2s ease; }
  .hcat-sec__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .hcat-sec__list { display: none; grid-column: 1 / -1; margin: 2px 0 6px; }
  .hcat-sec.is-open .hcat-sec__list { display: block; }
  .hcat-sec__list a { padding: 10px 0; font-size: 15px; }
  .hcat-sec__extra { display: list-item; }
  .hcat-sec__more { display: none; }
  .hcat-side { gap: 16px; }
  .hcat-promo { display: block; background: none; border-radius: 0; border-bottom: 1px solid #E5E4E1; }
  .hcat-promo img { display: none; }
  .hcat-promo__text { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0; }
  .hcat-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Меню бургера несет все, чего на телефоне нет в шапке (владелец, 21.09.2026):
     поиск первой строкой, после каталога — страницы условий и контакты */
  .hcat-panel__inner { gap: 0; }
  .hcat-search { display: block; padding: 12px 0; border-bottom: 1px solid #E5E4E1; }
  .hcat-side { margin-bottom: 8px; }
  .hcat-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #E5E4E1; }
  .hcat-nav__title { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #66665F; }
  .hcat-nav__list { list-style: none; margin: 0; padding: 0; }
  .hcat-nav__list a { display: flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 1.3; color: #1B1C1B; text-decoration: none; }
  .hcat-nav__list a[aria-current] { font-weight: 600; }
  .hcat-contacts { display: block; margin-top: 16px; padding-top: 20px; border-top: 1px solid #E5E4E1; }
  .hcat-contacts__phone { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-heading); font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: #1B1C1B; text-decoration: none; }
  .hcat-contacts__hours { margin: 0; font-size: 13px; color: #66665F; }
  .hcat-contacts__row { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 6px; }
  .hcat-contacts__row a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: #1B1C1B; text-decoration: underline; text-decoration-color: #D1D0CC; text-underline-offset: 4px; }
  body.hcat-open { overflow: hidden; }
}
/* Бургер в открытом меню — крестик (владелец, 21.09.2026, как на berlion.ru):
   класс `active` ставит berlion-pro.js. Полоски 2px с шагом 5px — сдвиг крайних 7px. */
.burger span { transition: transform .22s cubic-bezier(.16, 1, .3, 1), opacity .16s ease; }
.burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .hcat-btn__icon svg, .hcat-sec__toggle svg, .burger span { transition: none; }
}


/* =====================================================================
   Строка шапки (владелец, 13.09.2026): логотип · подпись «Техника для Вашего
   склада» бледно-серым справа от знака · кнопка «Каталог» · поле поиска ·
   телефон · сравнение · корзина. Подпись — #74746E: самый светлый серый,
   который держит контраст AA на мелком кегле (PRODUCT.md, доступность).
   ===================================================================== */
.header-main-inner { gap: 20px; }
.header-tagline { flex: none; max-width: 120px; font-size: 13px; line-height: 1.3; color: #74746E; }
.hcat { margin-right: 0; }
.header-actions { flex: none; gap: 12px; }
.header-phone__call { margin-right: 4px; }

/* Сравнение: та же кнопка, что корзина, счетчик — тот же кружок */
.hcmp { position: relative; }
.hcmp-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 2px solid var(--gray-200, #E5E4E1); border-radius: var(--radius-md, 8px); background: #fff; color: var(--dark-600, #45463F); cursor: pointer; transition: border-color .16s ease, color .16s ease; }
.hcmp-btn:hover, .hcmp-btn[aria-expanded="true"] { border-color: var(--primary, #C94F08); color: var(--primary, #C94F08); }
.hcmp-btn:focus-visible { outline: 2px solid var(--primary, #C94F08); outline-offset: 2px; }
.hcmp-pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 1020; width: 320px; padding: 14px 6px 6px; background: #fff; border: 1px solid #E5E4E1; border-radius: 10px; box-shadow: 0 12px 32px rgba(27, 28, 27, .14); }
.hcmp-pop__title { margin: 0 10px 8px; font-family: var(--font-heading); font-size: 15px; font-weight: 600; color: #1B1C1B; }
.hcmp-pop__empty { margin: 0 10px 10px; font-size: 13px; line-height: 1.5; color: #66665F; }
.hcmp-pop__list { list-style: none; margin: 0; padding: 0; }
.hcmp-pop__row { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 6px; color: #1B1C1B; text-decoration: none; }
.hcmp-pop__row:hover, .hcmp-pop__row:focus-visible { background: #F5F5F3; outline: none; }
.hcmp-pop__name { font-size: 14px; font-weight: 600; }
.hcmp-pop__meta { font-size: 12px; color: #66665F; }
/* Очистка списка из шапки (владелец, 19.09.2026): крестик у строки и кнопка внизу.
   Наведение — серая подложка, как у остальных контурных кнопок сайта. */
.hcmp-pop__item { display: flex; align-items: center; gap: 2px; }
.hcmp-pop__item .hcmp-pop__row { flex: 1 1 auto; min-width: 0; }
.hcmp-pop__del { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 2px; padding: 0; border: 0; border-radius: 6px; background: none; color: #74746E; cursor: pointer; }
.hcmp-pop__del:hover { background: #F5F5F3; color: #1B1C1B; }
.hcmp-pop__del:focus-visible, .hcmp-pop__clear:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hcmp-pop__foot { margin: 6px 4px 0; padding: 6px 0 0; border-top: 1px solid #E5E4E1; }
.hcmp-pop__clear { width: 100%; padding: 9px 6px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: #66665F; text-align: left; cursor: pointer; }
.hcmp-pop__clear:hover { background: #F5F5F3; color: #1B1C1B; }

/* Страница /poisk/: где искать и группы выдачи */
.psearch { flex-wrap: wrap; }
.psearch__scope { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; margin: 4px 0 0; padding: 0; border: 0; }
.psearch__scope-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.psearch__scope-opt { position: relative; }
.psearch__scope-opt input { position: absolute; opacity: 0; }
.psearch__scope-opt span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid #D1D0CC; border-radius: 6px; font-size: 14px; color: #1B1C1B; cursor: pointer; }
.psearch__scope-opt span:hover { background: #F5F5F3; }
.psearch__scope-opt input:checked + span { background: #EFEFEC; border-color: #A9A8A2; color: var(--primary, #C94F08); }
.psearch__scope-opt input:focus-visible + span { outline: 2px solid var(--primary, #C94F08); outline-offset: 2px; }
.psearch__group { margin: 28px 0 0; font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: #1B1C1B; }
.psearch__group + .psearch__list { margin-top: 10px; }

@media (max-width: 1280px) {
  .header-main-inner { gap: 16px; }
  .header-tagline { display: none; }
}
/* Счетчик сравнения при нуле не показываем: у .cart-count свой display перебивает hidden */
.hcmp-count[hidden] { display: none; }
@media (max-width: 1100px) {
  .header-phone__call .phone-number { display: none; }
  /* Номер скрыт — остается значок трубки, иначе телефон пропадает из шапки */
  .header-actions .header-phone__call { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: 0; }
  .header-actions .header-phone__call svg.header-phone__icon { display: block; width: 22px; height: 22px; }
}
@media (max-width: 768px) {
  .header-tagline, .hcmp { display: none; }
  .header-actions { gap: 8px; }
}

/* =====================================================================
   Верхняя полоса (владелец, 13.09.2026): город посетителя и надпись
   о поставках по России слева; почта, Telegram и Max справа — с наведением
   по правилу сайта: серая подложка, текст темнее, знак — фирменным синим.
   ===================================================================== */
.header-geo { color: var(--dark-700, #2D2E2C); font-weight: 600; white-space: nowrap; }
.header-geo svg { color: var(--primary, #C94F08); opacity: 1; }
.header-geo__city { font-variant-numeric: normal; }
.header-delivery { font-weight: 500; }
.header-geo:not([hidden]) + .header-delivery { position: relative; padding-left: 14px; }
.header-geo:not([hidden]) + .header-delivery::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: var(--gray-300, #D0CFCB); }

.header-top .header-mail__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin: -4px 0; padding: 4px 8px; border-radius: 6px;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}
.header-top .header-tg__link { margin-right: 6px; }
/* В покое знак в цвет текста, при наведении — синий: иначе синий знак не менялся и наведения не было видно */
.header-top .header-mail__link svg { color: currentColor; }
.header-top .header-mail__link svg,
.header-top .header-mail__link .header-tg__icon { transition: color .16s ease, transform .16s ease; }
.header-top a.header-mail__link:hover,
.header-top a.header-mail__link:focus-visible { background: #EDECE8; color: var(--dark-700, #2D2E2C); }
.header-top a.header-mail__link:hover svg,
.header-top a.header-mail__link:focus-visible svg { color: var(--primary, #C94F08); }
.header-top a.header-mail__link:hover .header-tg__icon { transform: scale(1.08); }
/* Знак Max — одноцветный силуэт, поэтому маска: цвет берется из ссылки (currentColor),
   в покое серый, как у Telegram и почты, при наведении синий, как их линейные значки */
.header-tg__icon--mask {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url(/images/icons/max.webp) center / contain no-repeat;
  mask: url(/images/icons/max.webp) center / contain no-repeat;
}
.header-top a.header-mail__link:hover .header-tg__icon--mask,
.header-top a.header-mail__link:focus-visible .header-tg__icon--mask { color: var(--primary, #C94F08); }
.header-top a.header-mail__link:focus-visible { outline: 2px solid var(--primary, #C94F08); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .header-top .header-mail__link, .header-top .header-mail__link svg, .header-top .header-mail__link .header-tg__icon { transition: none; }
}


/* =====================================================================
   Выбор города (владелец, 13.09.2026; образец — dns-shop.ru, без выбора
   страны: у нас только Россия). Три части: город-кнопка в верхней полосе,
   вопрос «Ваш город …?» под ней и окно выбора — поиск, крупные города,
   округ → регион → город. Язык тот же: волосяные линии, наведение — серая
   подложка, голубое на выбранном, синий только на главном действии.
   Разметка — src/_includes/city-picker.njk, поведение — berlion-pro.js.
   ===================================================================== */
/* У сайта нет общего [hidden] { display: none }: свой display у блока перебивает
   атрибут, и прозрачное окно перекрывало бы страницу. Прячем явно. */
.header-geo[hidden], .hcat-city[hidden], .geo-ask[hidden], .cityp[hidden], .cityp [hidden] { display: none !important; }
button.header-geo {
  margin: -4px 0 -4px -8px; padding: 4px 8px;
  border: 0; border-radius: 6px; background: none;
  font: inherit; font-size: 12.5px; letter-spacing: .01em; font-weight: 600;
  cursor: pointer; transition: background-color .16s ease, color .16s ease;
}
button.header-geo:hover, button.header-geo:focus-visible { background: #EDECE8; }
button.header-geo:focus-visible { outline: 2px solid var(--primary, #C94F08); outline-offset: 1px; }
.header-geo__chev { flex: none; color: #93928C; opacity: 1; }
button.header-geo:hover .header-geo__chev { color: var(--primary, #C94F08); }

/* Вопрос о городе: позицию считает скрипт от кнопки в полосе */
.geo-ask {
  position: fixed; z-index: 1030; width: 276px; padding: 16px;
  background: #fff; border: 1px solid #E5E4E1; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(27, 28, 27, .14);
  animation: geoAskIn .18s ease-out;
}
.geo-ask::before {
  content: ""; position: absolute; top: -6px; left: 22px; width: 10px; height: 10px;
  background: #fff; border-left: 1px solid #E5E4E1; border-top: 1px solid #E5E4E1;
  transform: rotate(45deg);
}
.geo-ask__q { margin: 0 0 14px; font: 500 15px/1.4 var(--font-heading, inherit); color: #2D2E2C; }
.geo-ask__q b { font-weight: 700; }
.geo-ask__btns { display: flex; gap: 8px; }
.geo-ask__yes, .geo-ask__other {
  flex: 1 1 auto; min-height: 40px; padding: 0 12px; border-radius: 6px;
  font: 600 14px/1 var(--font, inherit); white-space: nowrap; cursor: pointer;
  transition: background-color .16s ease;
}
.geo-ask__yes { border: 1px solid var(--primary, #C94F08); background: var(--primary, #C94F08); color: #fff; }
.geo-ask__yes:hover { background: var(--primary-dark, #AD4206); }
.geo-ask__other { border: 1px solid #D0CFCB; background: #fff; color: #2D2E2C; }
.geo-ask__other:hover { background: #F5F5F3; }
.geo-ask__yes:focus-visible, .geo-ask__other:focus-visible { outline: 2px solid var(--primary, #C94F08); outline-offset: 2px; }
@keyframes geoAskIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Окно выбора города */
.cityp { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; }
.cityp__backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, .48); opacity: 0; transition: opacity .2s ease; }
.cityp__dialog {
  position: relative; display: flex; flex-direction: column;
  width: min(1000px, 100%); height: min(720px, calc(100vh - 96px));
  background: #fff; border-radius: 10px; box-shadow: 0 24px 64px rgba(27, 28, 27, .24);
  opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease;
}
.cityp__dialog:focus { outline: none; }
.cityp.is-open .cityp__backdrop { opacity: 1; }
.cityp.is-open .cityp__dialog { opacity: 1; transform: none; }
.cityp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 28px 0; }
.cityp__title { margin: 0; font: 600 24px/1.2 var(--font-heading, inherit); letter-spacing: -.01em; color: #2D2E2C; }
.cityp__now { margin: 6px 0 0; font-size: 14px; color: #66665F; }
.cityp__now b { font-weight: 600; color: #2D2E2C; }
.cityp__close {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -8px -12px 0 0;
  border: 0; border-radius: 6px; background: none; color: #66665F; cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.cityp__close svg { width: 22px; height: 22px; }
.cityp__close:hover { background: #F5F5F3; color: #2D2E2C; }
.cityp__search { position: relative; flex: none; margin: 18px 28px 0; }
.cityp__search > svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: #66665F; pointer-events: none; }
.cityp__input {
  width: 100%; height: 48px; padding: 0 48px 0 44px;
  border: 1px solid #D0CFCB; border-radius: 6px; background: #fff;
  font: 400 16px/1 var(--font, inherit); color: #2D2E2C; outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.cityp__input::placeholder { color: #74746E; }
.cityp__input:focus { border-color: var(--primary, #C94F08); box-shadow: 0 0 0 3px rgba(201, 79, 8, .16); }
.cityp__clear {
  position: absolute; right: 2px; top: 2px; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: 6px; background: none; color: #66665F; cursor: pointer;
}
.cityp__clear svg { width: 18px; height: 18px; }
.cityp__clear:hover { background: #F5F5F3; color: #2D2E2C; }
.cityp__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 20px 28px 28px; }
.cityp__status { margin: 0; font-size: 14px; line-height: 1.5; color: #66665F; }
.cityp__status:empty { display: none; }
.cityp__cap { margin: 0 0 8px; font: 600 11px/1.2 var(--font, inherit); letter-spacing: .08em; text-transform: uppercase; color: #66665F; }
.cityp__ctx { display: none; }
.cityp__top-wrap { flex: none; padding-bottom: 18px; border-bottom: 1px solid #E5E4E1; }
.cityp__top { display: flex; flex-wrap: wrap; gap: 6px 4px; margin: 0; padding: 0; list-style: none; }
.cityp__top-btn {
  min-height: 36px; padding: 0 12px; border: 1px solid #E5E4E1; border-radius: 6px; background: #fff;
  font: 500 14px/1 var(--font, inherit); color: #2D2E2C; cursor: pointer; transition: background-color .16s ease;
}
.cityp__top-btn:hover { background: #F5F5F3; }
.cityp__top-btn.is-cur { border-color: #A9A8A2; background: #EFEFEC; color: var(--primary, #C94F08); font-weight: 600; }
.cityp__browse {
  flex: 1 1 auto; min-height: 0; display: grid;
  grid-template-columns: 212px minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  padding-top: 18px;
}
.cityp__col { display: flex; flex-direction: column; min-height: 0; padding: 0 16px; border-left: 1px solid #E5E4E1; }
.cityp__col:first-child { padding-left: 0; border-left: 0; }
.cityp__col:last-child { padding-right: 0; }
.cityp__list {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 -6px; padding: 0 6px; list-style: none;
}
.cityp__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 36px; padding: 7px 10px;
  border: 0; border-radius: 6px; background: none;
  font: 400 14.5px/1.3 var(--font, inherit); color: #2D2E2C; text-align: left; cursor: pointer;
  transition: background-color .12s ease;
}
.cityp__item:hover { background: #F5F5F3; }
.cityp__item.is-sel { background: #EFEFEC; color: var(--primary, #C94F08); font-weight: 600; }
.cityp__item.is-cur { color: var(--primary, #C94F08); font-weight: 600; }
.cityp__chev, .cityp__check { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cityp__chev { color: #93928C; }
.cityp__item.is-sel .cityp__chev { color: var(--primary, #C94F08); }
.cityp__check { width: 18px; height: 18px; color: var(--primary, #C94F08); }
.cityp__empty { padding: 8px 10px; font-size: 14px; line-height: 1.5; color: #74746E; }
.cityp__back { display: none; }
.cityp__results { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px; }
.cityp__res { margin: 0; padding: 0; list-style: none; }
.cityp__res-item { display: flex; align-items: baseline; gap: 12px; padding: 10px; border-radius: 6px; cursor: pointer; }
.cityp__res-item:hover, .cityp__res-item.is-active { background: #F5F5F3; }
.cityp__res-name { font: 500 15px/1.3 var(--font, inherit); color: #2D2E2C; }
.cityp__res-name .cityp__check { margin-left: 6px; vertical-align: -3px; }
.cityp__res-name mark { background: none; color: inherit; font-weight: 700; }
.cityp__res-item.is-cur .cityp__res-name { color: var(--primary, #C94F08); font-weight: 600; }
.cityp__res-reg { font-size: 13.5px; color: #66665F; }
.cityp__none { margin: 4px 0 0; max-width: 56ch; font-size: 14.5px; line-height: 1.55; color: #475467; }
.cityp__item:focus-visible, .cityp__top-btn:focus-visible, .cityp__close:focus-visible,
.cityp__clear:focus-visible, .cityp__back:focus-visible, .cityp__res-item:focus-visible {
  outline: 2px solid var(--primary, #C94F08); outline-offset: 1px;
}
body.cityp-open { overflow: hidden; }

/* Город на телефоне: верхней полосы там нет, строка выбора стоит первой в меню каталога */
.hcat-city { display: none; }

@media (max-width: 768px) {
  .hcat-city:not([hidden]) {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px;
    padding: 0 0 2px; border: 0; border-bottom: 1px solid #E5E4E1; background: none;
    font: inherit; color: #2D2E2C; text-align: left; cursor: pointer;
  }
  .hcat-city__pin { flex: none; width: 20px; height: 20px; color: var(--primary, #C94F08); }
  .hcat-city__label { font-size: 14px; color: #66665F; }
  .hcat-city__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px/1.3 var(--font, inherit); }
  .hcat-city__chev { flex: none; width: 18px; height: 18px; color: #93928C; }

  /* Окно на весь экран, переход по шагам: округ → регион → город */
  .cityp { padding: 0; align-items: stretch; }
  .cityp__dialog { width: 100%; height: 100%; border-radius: 0; transform: translateY(12px); }
  .cityp__head { padding: 14px 16px 0; }
  .cityp__title { font-size: 20px; }
  .cityp__close { margin: -6px -10px 0 0; }
  .cityp__search { margin: 12px 16px 0; }
  .cityp__body { padding: 16px 16px max(20px, env(safe-area-inset-bottom)); }
  .cityp__top-wrap { padding-bottom: 14px; }
  .cityp__top { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
  .cityp__top::-webkit-scrollbar { display: none; }
  .cityp__top-btn { min-height: 40px; white-space: nowrap; }
  .cityp__browse { display: flex; flex-direction: column; padding-top: 10px; }
  .cityp__col { display: none; padding: 0; border-left: 0; flex: 1 1 auto; }
  .cityp[data-step="d"] .cityp__col--d,
  .cityp[data-step="r"] .cityp__col--r,
  .cityp[data-step="c"] .cityp__col--c { display: flex; }
  .cityp[data-step="r"] .cityp__top-wrap,
  .cityp[data-step="c"] .cityp__top-wrap { display: none; }
  .cityp__back {
    display: flex; align-items: center; gap: 6px; min-height: 44px; margin: -6px 0 2px -10px; padding: 0 10px;
    border: 0; border-radius: 6px; background: none;
    font: 600 15px/1.2 var(--font, inherit); color: #2D2E2C; text-align: left; cursor: pointer;
  }
  .cityp__back svg { flex: none; width: 18px; height: 18px; color: #66665F; }
  .cityp__back:hover { background: #F5F5F3; }
  .cityp__ctx { display: block; margin: 0 0 10px; font: 600 17px/1.3 var(--font-heading, inherit); color: #2D2E2C; }
  .cityp__item { min-height: 48px; padding: 10px; font-size: 16px; }
  .cityp__res-item { flex-direction: column; gap: 2px; padding: 10px; }
  .cityp__res-name { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .geo-ask { animation: none; }
  .cityp__backdrop, .cityp__dialog, .cityp__item, .cityp__top-btn, .cityp__close, button.header-geo { transition: none; }
}

/* Уведомление корзины ждет под краем экрана, и его тень (0 24px 64px) заходила
   на низ страницы серым пятном — на телефоне поверх меню и окна выбора города.
   Пока уведомление скрыто, тени нет. */
.toast:not(.show) { box-shadow: none; }

/* С left: 50% и без ширины блок ужимался до половины экрана: на телефоне название
   машины шло в четыре строки, а значок во флексе сплющивался в овал.
   Ширина — по тексту, но не шире экрана с полями; значок не сжимается. */
.toast {
  width: max-content;
  max-width: min(560px, calc(100vw - 32px));
  box-sizing: border-box;
  line-height: 1.35;
  text-wrap: pretty;
}
.toast-icon { flex: 0 0 28px; }
@media (max-width: 768px) {
  .toast {
    width: auto;
    max-width: none;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    padding: 12px 16px;
    gap: 12px;
    transform: translateY(calc(100% + 48px));
  }
  .toast.show { transform: translateY(0); }
}

/* Кнопка «Наверх» (base.njk, поведение — berlion-pro.js). Язык карточки: белое поле,
   волосяная рамка, скругление управления 6px, без тени; наведение — серая подложка.
   --totop-lift — высота видимой нижней полосы (панель покупки, сравнение).
   Слой ниже шапки (1000), листов фильтра (1010), корзины и окон. */
.totop {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: #fff;
  color: #2D2E2C;
  border: 1px solid #D1D0CC;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-1 * var(--totop-lift, 0px) + 8px));
  transition: opacity .2s ease, visibility .2s, transform .3s cubic-bezier(.16, 1, .3, 1), background-color .15s ease;
}
.totop.is-visible { opacity: 1; visibility: visible; transform: translateY(calc(-1 * var(--totop-lift, 0px))); }
.totop:hover { background: #F5F5F3; }
.totop:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 768px) {
  .totop { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .totop { transition: none; }
}

/* --------------------------------------------------------------------------
   Подвал: пять колонок вместо четырех — к каталогу и контактам добавились
   «Покупателю» и «Компания» (сервисные страницы, план от 16.09.2026).
   Ссылки строит подвал из lib/info-pages.js, поэтому колонка растет вместе
   со списком страниц, а не правится руками.
   -------------------------------------------------------------------------- */
.footer-grid { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer-bottom { gap: 24px; flex-wrap: wrap; }
.footer-bottom p { margin: 0; }
@media (max-width: 1100px) {
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Верхняя полоса: меню условий рядом с городом (владелец, 16.09.2026).
   Прежние надпись о доставке и часы работы убраны — их место заняли ссылки
   на «Доставку», «Оплату», «Гарантию», «О компании» и «Контакты».
   Наведение — серая подложка, как у остальных элементов полосы.
   -------------------------------------------------------------------------- */
.header-topnav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.header-topnav__link {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--gray-500, #64645E);
    text-decoration: none;
    white-space: nowrap;
    transition: background .16s ease, color .16s ease;
}
.header-topnav__link:hover,
.header-topnav__link:focus-visible { background: #EDECE8; color: var(--dark-700, #2D2E2C); }
.header-topnav__link:focus-visible { outline: 2px solid var(--primary, #C94F08); outline-offset: 1px; }
.header-topnav__link.is-current { color: var(--dark-700, #2D2E2C); font-weight: 600; }

/* Полоса сужается раньше основной строки: сначала уходят «О компании»
   и «Оплата», на планшете — все меню; ссылки остаются в подвале. */
@media (max-width: 1240px) {
    .header-topnav__link:nth-child(4) { display: none; }
}
@media (max-width: 1100px) {
    .header-topnav__link:nth-child(2) { display: none; }
}
@media (max-width: 900px) {
    .header-topnav { display: none; }
    .header-geo:not([hidden]) + .header-top__sep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .header-topnav__link { transition: none; }
}