/*
 * Назначение файла: стыковка вёрстки 2026 со старым шеллом движка.
 * Эталонные модули (`verstka-updated`) лежат в движке как есть, чтобы их можно
 * было перезалить целиком; всё, что нужно поправить под движок, живёт здесь.
 * Причины правок — в комментариях к каждому блоку.
 */

/* Старая шапка была position:fixed, и монолит отбивал её высоту паддингом
   у .viewport (140/164px, на мобильной 35px). Новая шапка стоит в потоке —
   паддинг превращается в пустую полосу над сайтом.
   overflow:hidden монолита заменён на overflow-x:clip: hidden делает .viewport
   скролл-контейнером, и position:sticky у .header__middle не работает —
   шапка не прилипает. clip режет так же, но контейнером прокрутки не становится. */
.viewport {
  padding-top: 0;
  overflow-x: clip;
  overflow-y: visible;
}

/* Склейка «Каталог + поиск» (решение заказчика): кнопка каталога и строка
   поиска — один элемент в общей рамке. У эталона они стоят порознь, поэтому
   правила живут здесь, а не в копии эталонного search.css. */
.header__catalog-search {
  display: flex;
  align-items: stretch;
  flex: 1;
  max-width: 700px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-base);
  overflow: hidden;
}

.header__catalog-search .header_catalog-two {
  border-radius: 0;
  flex-shrink: 0;
  padding-inline: 20px;
}

.header__catalog-search .search {
  flex: 1;
  min-width: 0;
}

.header__catalog-search .search__form {
  height: 100%;
}

.header__catalog-search .search__input {
  height: 100%;
  border: none;
  border-radius: 0;
}

/* Иконка поиска — залитая акцентом, как на боевой шапке. */
.header__catalog-search .search__button-inner {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-base);
  background-color: var(--color-accent);
}

.header__catalog-search .search__icon {
  width: 16px;
  filter: brightness(0) invert(1);
}

/* Кнопка поиска — как на боевой шапке: акцентный блок во всю высоту поля
   и белая лупа, а не маленький квадрат внутри поля. */
.header__catalog-search .search__button {
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 100%;
  border-radius: 0;
  background-color: var(--color-accent);
  transform: none;
}

.header__catalog-search .search__button-inner {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}

.header__catalog-search .search__icon {
  width: 18px;
  height: 18px;
}

.header__catalog-search .search__input {
  padding-right: 56px;
}

/* Город: только пин и название, без подписи «Ваш город». */
.header__location strong {
  font-weight: var(--fw-medium);
}

.header__location .toper_city-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  font: inherit;
}

/* Телеграм и телефон — по одной оптической линии: у .header__phone свой
   padding-block на область наведения, из-за него иконка уезжала вверх. */
.header__contacts {
  align-items: center;
}

.header__social-link {
  align-self: center;
}

/* «Заказать звонок» — компактная кнопка верхней полосы, не главная кнопка страницы. */
.header__callback {
  padding: 10px 12px;
  margin-block: 4px;
  line-height: 1.1;
  gap: 4px;
  height: auto;
}

.header__callback svg {
  width: 14px;
  height: auto;
}

/* Форма поиска снова носит классы .header_search.search — по ним DigiSearch
   (конфиг 714) находит поле: inputSelector ".header_search.search input".
   Правила монолита на этих классах (absolute, свои размеры) перебиваем здесь:
   селекторы намеренно длиннее, чем `.header .header_search input`. */
.header .header__catalog-search .search__form {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  border: none;
  background: none;
}

.header .header__catalog-search .search__input {
  position: static;
  width: 100%;
  height: 100%;
  padding: 8px 56px 8px 16px;
  border: none;
  border-radius: 0;
  background: none;
  font-size: var(--fs-md);
}

.header .header__catalog-search .search__button {
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 100%;
  min-width: 0;
  border: none;
  border-radius: 0;
  background-color: var(--color-accent);
  transform: none;
}

/* Город: вид как на боевой шапке — красный пин, тёмный полужирный текст,
   пунктирное подчёркивание (город — переключатель, а не ссылка). */
/* Блок города — флексом: у инлайновой строки кнопка выравнивалась по базовой
   линии и надпись «Москва» вставала выше центра полосы. */
.header .header__location {
  display: flex;
  align-items: center;
}

.header__location strong {
  display: inline-flex;
  align-items: center;
  font-weight: inherit;
}

.header .header__location .toper_city-item {
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: #2c2b40;
  text-decoration: none;
}

.header .header__location .toper_city-item {
  align-items: center;
}

.header .header__location .toper_city-item svg {
  flex: none;
  color: var(--color-accent);
}

/* Пунктир рисуем подчёркиванием текста, а не рамкой: border-bottom входит
   в высоту строки и уводил надпись вверх относительно пина. */
.header .header__location .toper_city-item span {
  line-height: 1;
  text-decoration: underline dotted rgba(44, 43, 64, 0.45);
  text-underline-offset: 4px;
}

.header .header__location .toper_city-item:hover {
  color: var(--color-accent);
}

.header .header__location .toper_city-item:hover span {
  border-bottom-color: var(--color-accent);
}

/* Попап телефона: расписание — последняя строка, лишнего поля снизу быть не должно. */
.header__phone-popup {
  padding: 20px;
  gap: 12px;
}

/* Отступ под расписанием нужен только когда под ним кнопка (до 1023px).
   Кнопка остаётся последним элементом и скрытой, поэтому :last-child не годится. */
@media (min-width: 1024px) {
  .header__phone-popup-schedule {
    margin-bottom: 0;
  }
}

/* Панель мобильного меню: прокручивается только список пунктов, шапка панели,
   город и нижний блок с телефонами держатся на месте. */
.mobile-menu__panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-menu__header,
.mobile-menu__location,
.mobile-menu__contacts {
  flex: none;
}

.mobile-menu__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.mobile-menu__contacts {
  border-top: var(--border-base-light);
  background-color: var(--color-light);
}

/* Город в панели — тот же вид, что в десктопной шапке. */
.mobile-menu__location .toper_city-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: #2c2b40;
  text-decoration: none;
}

.mobile-menu__location .toper_city-item svg {
  flex: none;
  color: var(--color-accent);
}

.mobile-menu__location .toper_city-item span {
  line-height: 1;
  text-decoration: underline dotted rgba(44, 43, 64, 0.45);
  text-underline-offset: 4px;
}

/* Панель мобильного меню поверх движковых плашек: нижняя панель .mob-ftr и
   плашка cookie стоят на z-index 999999 и перекрывали контакты в самом низу меню. */
.mobile-menu {
  z-index: 1000000;
}

/* Кнопка поиска: наведение — темнее акцента (серый приходил из эталонного
   .search__button:hover), нажатие без масштабирования — внутри общей рамки
   уменьшение открывало щель. */
.header .header__catalog-search .search__button:active,
.header .header__catalog-search .header_catalog-two:active {
  transform: none;
}

/* Продавливается содержимое, а не красный блок: масштаб блока внутри общей
   рамки открывал щель между кнопкой и полем. */
.header .header__catalog-search .search__icon,
.header .header__catalog-search .header_catalog-two .button__icon {
  transition: transform var(--dur-press) var(--ease-out);
}

.header .header__catalog-search .search__button:active .search__icon,
.header .header__catalog-search .header_catalog-two:active .button__icon {
  transform: scale(0.86);
}

/* Наведение — только для мыши: на тач-устройствах :hover залипает после тапа. */
@media (hover: hover) and (pointer: fine) {
  .header .header__catalog-search .header_catalog-two:hover,
  .header .header__catalog-search .search__button:hover {
    background-color: var(--color-accent-hover);
    color: var(--color-light);
    opacity: 1;
  }
}

.header .header__catalog-search .search__icon {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
}

/* Телефон в верхней полосе: строка выше иконки на пару пикселей — у ссылки
   наследовался межстрочный интервал body. */
.header__phone,
.header__phone-link {
  line-height: 1;
}

.header__phone-icon {
  width: 12px;
  height: 12px;
  flex: none;
}

/* «Распродажа» — первый пункт нижнего меню, акцентом и со значком, как в эталоне
   (.header__main-link--sale). Разметку меню печатает модуль админки, поэтому по позиции. */
.header__bottom-inner .header_menu > li:first-child > a {
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.header__bottom-inner .header_menu > li:first-child > a::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url("/template/new/assets/icons/sale-badge.svg") no-repeat center / contain;
}

/* Мобильная шапка: бургер слева, поиск справа, одной плашкой. */
@media (max-width: 767px) {
  /* justify-content: space-between приходит с класса .header_row (он нужен
     DigiSearch) — при двух видимых элементах он растаскивал бургер и поле
     по краям, между ними зияла щель. */
  .header__middle-inner {
    gap: 0;
    justify-content: flex-start;
  }

  .header__catalog-search {
    flex: 1 1 auto;
  }

  .header__burger {
    order: -1;
    flex: none;
    width: 46px;
    height: 42px;
    border-radius: var(--radius-base) 0 0 var(--radius-base);
  }

  .header__catalog-search {
    height: 42px;
    border-radius: 0 var(--radius-base) var(--radius-base) 0;
    border-left: none;
  }

  .header__burger img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
  }
}

/* Нижнее меню: движковые правила монолита (18px, полупрозрачный тёмный, uppercase,
   разрядка) заменяются эталонными — тёмный цвет, обычный регистр, 16px. */
.header__bottom-inner .header_menu > li > a {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
  text-transform: none;
  letter-spacing: normal;
}

.header__bottom-inner .header_menu > li > a:hover {
  color: var(--color-accent);
}

/* Нижнее меню: монолит печатает <ul class="header_menu"> блоком, и при сужении
   окна пункты сыпались в несколько строк, прижимаясь к низу полосы. */
.header__bottom-inner .header_menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 44px;
}

.header__bottom-inner .header_menu > li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 768-1023: пунктов больше, чем ширины. Меню становится одной строкой
   с горизонтальной прокруткой — порядок и состав не режем. */
@media (max-width: 1023px) and (min-width: 768px) {
  .header__bottom-inner .header_menu {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 20px;
    min-height: 40px;
  }

  .header__bottom-inner .header_menu::-webkit-scrollbar {
    display: none;
  }

  .header__bottom-inner .header_menu > li {
    flex: none;
    white-space: nowrap;
  }
}

/* Попап телефона раскрывается и по тапу: на планшете и телефоне навести мышь
   нельзя, а второй номер и расписание нужны. Класс ставит header-phone.js. */
.header__phone.is-open .header__phone-popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* До 1023px «Заказать звонок» уезжает из полосы в попап телефона — в узкой
   верхней полосе кнопке места нет. */
.header__phone-popup .header__callback-popup {
  display: none;
}

@media (max-width: 1023px) {
  .header__top-inner > .header__callback {
    display: none;
  }

  .header__phone-popup .header__callback-popup {
    display: inline-flex;
  }
}

/* Окно выбора города (fancybox) поверх панели мобильного меню. */
.fancybox-container {
  z-index: 1000001;
}

/* 768-1023: верхнему меню не нужен ни распор на всю полосу, ни отступ в 80px —
   иначе пункты выдавливают телефон и кнопку. */
@media (max-width: 1023px) and (min-width: 768px) {
  .header__top-nav {
    flex: none;
    margin-left: 0;
    margin-inline: 16px;
  }
}

/* Поле в фокусе видно и без курсора: мягкое акцентное кольцо вокруг плашки. */
.header__catalog-search:focus-within {
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* Средняя полоса: поля контейнера одинаковые на всех ширинах. */
.header__middle-inner {
  padding: 0 20px;
}

/* ==========================================================================
   Формы движка
   ========================================================================== */

/* Текстовые поля по спецификации получают :focus-visible и от клика мышью,
   и кольцо в 2px читается как ошибка ввода. Клик — акцентная рамка, как у
   `.input:focus` эталона (`verstka-updated/css/modules/inputs.css`).
   Кольцо остаётся клавиатуре: правило ниже возвращает его при табе. */
/* Мост делает ровно одно: гасит браузерное кольцо при клике мышью. Собственный
   вид фокуса у полей движка уже есть (`.cart_callback input:focus`,
   `.subscribe_input:focus` и прочие) — своих рамок сверху не рисуем, иначе внутри
   поля появляется второй прямоугольник. */
.viewport input:focus,
.viewport textarea:focus,
.viewport select:focus {
  outline: none;
}

/* Таб — полноценное кольцо. `:focus-visible` в паре с `:not(:hover)` не годится
   (мышь может уйти), поэтому опираемся на `:focus-visible` + признак клавиатуры,
   который ставит `bridge-keyboard.js`. */
body.is-keyboard .viewport input:focus-visible,
body.is-keyboard .viewport textarea:focus-visible,
body.is-keyboard .viewport select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Яндекс SmartCaptcha рисует свою рамку впритык к краю контейнера: без запаса
   по высоте нижняя граница виджета срезается. */
.smart-captcha {
  min-height: 76px;
  overflow: visible;
}

.smart-captcha iframe {
  display: block;
}