/* ============================================================
   GPM — ШАПКА, написана с нуля по макету Figma (groooose DS)
   node 8888-30740. Светлая тема.

   Подход: НЕ патчим легаси, а полностью задаём вид шапки сами.
   1) Сброс легаси-стилей в пределах .newhead
   2) Сборка по макету
   HTML, тексты, ссылки, картинки, SEO — не трогаем (только стили).
   ============================================================ */

/* =========================================================
   1. СБРОС ЛЕГАСИ В ПРЕДЕЛАХ ШАПКИ
   ========================================================= */
.newhead,
.newhead *,
.newhead *::before,
.newhead *::after { box-sizing: border-box; }

/* Обнуляем оформление у структурных узлов шапки (фон/границы/отступы/позиции),
   чтобы строить с чистого листа. Перебиваем легаси через !important. */
.newhead,
.newhead .concat,
.newhead .pre-menu,
.newhead .pre-menu > div,
.newhead .menu,
.newhead .menu .row,
.newhead .logo,
.newhead .links-menu,
.newhead .links-menu > nav,
.newhead .topmenu,
.newhead .topmenu > li,
.newhead .but,
.newhead .contact,
.newhead .header-socials {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  float: none !important;
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  min-height: 0 !important;
  width: auto !important;
}
/* убираем легаси-псевдоэлементы (разделители, иконки-маркеры) у пунктов */
.newhead .topmenu > li::before,
.newhead .topmenu > li::after { content: none; display: none !important; }
/* убираем фон-картинки у пунктов (services.png и т.п.) */
.newhead .topmenu > li > a { background-image: none; }

/* Скрываем то, что легаси прятало через display:none:
   модалки (поиск/сообщения/директор), мобильное меню на десктопе,
   прелоадер. На <1200 мобильное меню включается media-запросом ниже. */
/* #write_director убран — он fancybox-модалка, прячется своим inline display:none;
   CSS-!important блокировал бы её показ */
.modal, #search_modal, #messages_modal,
.fw-messages-wrap, .preloader { display: none !important; }
.newhead .mobile-menu { display: none; }

/* =========================================================
   2. КОНТЕЙНЕР ШАПКИ  (серая полоса, внутри — белый навбар)
   ========================================================= */
.newhead {
  background: var(--ds-bg);
  padding: 8px 0;
  position: sticky !important; top: 0 !important; z-index: 1000;
  transition: box-shadow .2s ease;
}
/* при скролле: серый топ-бар ПЛАВНО сворачивается (без display:none — иначе скачок/тряска) */
.newhead .pre-menu {
  max-height: 80px;
  transition: max-height .28s ease, opacity .22s ease;
  will-change: max-height;
}
/* overflow:hidden только при сворачивании (чтобы не обрезать кастомный дропдаун в раскрытом состоянии) */
.newhead.gpm-scrolled .pre-menu { max-height: 0; opacity: 0; overflow: hidden; }
.newhead.gpm-scrolled { box-shadow: 0 6px 24px rgba(2, 6, 23, .08); }
.newhead .concat {
  max-width: var(--ds-container);
  margin: 0 auto;
  padding: 0 var(--ds-gutter);      /* поля-гаттеры как в Figma */
}

/* =========================================================
   3. ВЕРХНЯЯ СТРОКА  (город ↔ контакты + соцсети), на сером
   ========================================================= */
.newhead .pre-menu > div {
  display: flex !important;
  align-items: center;
  justify-content: space-between;   /* распределяем на всю ширину хедера */
  flex-wrap: nowrap !important;
  gap: 24px;
  padding: 4px 0 4px;
}
/* «расплющиваем» группы — все пункты становятся прямыми флекс-элементами
   строки и распределяются space-between по всей ширине */
.newhead .pre-menu .my-d-flex.my-align-items-center,
.newhead .pre-menu .contact { display: contents; }
/* иконку города держим вплотную к «Москва» */
.newhead .pre-menu .my-d-flex.my-align-items-center > svg { margin-right: -10px; }
.newhead .pre-menu #selectCity,
.newhead .pre-menu .select {
  font: var(--ds-fw-regular) var(--ds-body-m)/1.2 var(--ds-font);
  color: var(--ds-text); background: transparent; border: 0; outline: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; padding: 4px 4px;
}

/* ============================================================
   КАСТОМНЫЙ ДРОПДАУН ВЫБОРА ГОРОДА (по теме)
   Строится из нативного <select> через JS, сам select прячется.
   ============================================================ */
.gpm-select { position: relative; display: inline-flex; }
.gpm-select select { display: none !important; }
.gpm-select__trigger {
  display: inline-flex; align-items: center; gap: 7px;
  font: var(--ds-fw-medium) var(--ds-body-m)/1.2 var(--ds-font);
  color: var(--ds-text); background: transparent; border: 0; outline: 0; cursor: pointer;
  padding: 6px 10px; border-radius: 10px; transition: background var(--ds-transition);
}
.gpm-select__trigger:hover { background: rgba(2, 6, 23, .05); }
.gpm-select__chevron {
  width: 7px; height: 7px; flex: 0 0 auto; margin-top: -3px;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  border-radius: 0 0 1.5px 0; transform: rotate(45deg); opacity: .65;
  transition: transform .22s ease, margin .22s ease;
}
.gpm-select.open .gpm-select__chevron { transform: rotate(225deg); margin-top: 2px; opacity: 1; }
.gpm-select__list {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px;
  background: var(--ds-surface); border-radius: 16px; box-shadow: var(--ds-shadow-card);
  padding: 6px; z-index: 1100; max-height: 60vh; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
}
.gpm-select.open .gpm-select__list {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.gpm-select__item {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  padding: 11px 14px; border-radius: 10px; border: 0; background: transparent; cursor: pointer;
  font: var(--ds-fw-regular) var(--ds-body-m)/1.2 var(--ds-font);
  color: var(--ds-text); text-decoration: none; white-space: nowrap;
  transition: background var(--ds-transition), color var(--ds-transition);
}
.gpm-select__item:hover { background: var(--ds-brand-soft); color: var(--ds-brand); }
.gpm-select__item.is-current { color: var(--ds-brand); font-weight: var(--ds-fw-medium); }
.gpm-select__item.is-current::after {
  content: ""; float: right; width: 6px; height: 10px; margin: 2px 0 0 12px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
/* «Круглосуточно» и «Работаем…» — отдельные пункты (space-between даст равный отступ) */
.newhead .pre-menu .gruz {
  display: contents;
  font: var(--ds-fw-regular) var(--ds-body-m)/1.2 var(--ds-font); color: var(--ds-text);
}
.newhead .pre-menu .gruz span {
  color: var(--ds-brand); white-space: nowrap;
  font: var(--ds-fw-regular) var(--ds-body-m)/1.2 var(--ds-font);
}

/* правая группа: почта/телефон + соцсети */
/* .contact «расплющен» выше (display:contents) — распределяется space-between */
.newhead .pre-menu .header-socials { display: inline-flex; align-items: center; gap: 4px; }
.newhead .pre-menu .email,
.newhead .pre-menu .phone {
  font: var(--ds-fw-regular) var(--ds-body-m)/1.2 var(--ds-font);
  color: var(--ds-text); text-decoration: none; white-space: nowrap;
  transition: color .2s ease;
}
.newhead .pre-menu .timer { font: var(--ds-fw-regular) var(--ds-body-m)/1.2 var(--ds-font); color: var(--ds-text); white-space: nowrap; }
.newhead .pre-menu .email:hover,
.newhead .pre-menu .phone:hover { color: var(--ds-brand); }
.newhead .pre-menu .email:active,
.newhead .pre-menu .phone:active { color: var(--ds-brand-hover); }

/* соцсети MAX / Telegram — иконки в родных цветах */
.newhead .pre-menu .header-socials { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.newhead .pre-menu .header-socials a {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; transition: background .2s ease;
}
.newhead .pre-menu .header-socials a:hover { background: rgba(2, 6, 23, .06); }
.newhead .pre-menu .header-socials a img { width: 32px; height: 32px; max-width: none; }
/* ТОЛЬКО телеграм над хедером — самолётик на голубом фоне (иконка как в футере) */
.newhead .pre-menu a.call.telegram { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }
.newhead .pre-menu a.call.telegram img { content: url("/verstka/img/telegram.svg"); width: 34px !important; height: 34px !important; max-width: none; }

/* =========================================================
   4. НАВБАР  (белая скруглённая плашка)
   ========================================================= */
.newhead .menu .row {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 8px;
  background: var(--ds-surface);
  border-radius: 20px;
  padding: 8px 10px;
  box-shadow: var(--ds-shadow-soft);
}

/* Логотип */
.newhead .menu .logo { flex: 0 0 auto; padding: 0 8px; display: flex; align-items: center; }
.newhead .menu .logo img { height: 44px; width: auto; display: block; }

/* Меню */
.newhead .links-menu { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-start; padding-left: 8px; }
.newhead .links-menu > nav { flex: 0 1 auto; }   /* блок меню по содержимому, у левого края */
.newhead .links-menu > nav { width: 100%; display: flex; align-items: center; }
.newhead .links-menu meta { display: none !important; }   /* schema-meta не должна влиять на раскладку */
.newhead .topmenu {
  display: flex !important; align-items: center; justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 2px; width: 100%; flex: 1 1 auto; list-style: none;
}
.newhead .topmenu > li { display: flex !important; align-items: center; position: relative !important; flex: 0 0 auto; }

/* Пункт меню */
.newhead .topmenu > li > a {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--ds-fw-regular) var(--ds-body-m)/1.2 var(--ds-font);
  color: var(--ds-text); text-decoration: none; white-space: nowrap;
  padding: 10px 12px; border-radius: 12px;
  transition: color .2s ease;
}
/* аккуратная линия в цвет темы (наследует цвет текста) */
.newhead .topmenu > li > a::before {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 5px;
  height: 2px; background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.newhead .topmenu > li > a:hover { color: var(--ds-brand); }
.newhead .topmenu > li > a:hover::before { transform: scaleX(1); }
.newhead .topmenu > li > a:active { color: var(--ds-brand-hover); }
.newhead .topmenu > li > a:active::before { transform: scaleX(1); }
.newhead .topmenu > li.active > a { color: var(--ds-brand); }
.newhead .topmenu > li.active > a::before { transform: scaleX(1); }

/* стрелка дропдауна — чёткий CSS-шеврон (бордеры), красится currentColor */
.newhead .topmenu > li > a::after {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin: -3px 0 0 1px;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  border-radius: 0 0 1.5px 0;
  transform: rotate(45deg); opacity: .7;
  transition: transform .22s ease, margin .22s ease, opacity .2s ease;
}
.newhead .topmenu > li:hover > a::after { transform: rotate(225deg); margin-top: 1px; opacity: 1; }
.newhead .topmenu > li:not(.arrow):not(.service) > a::after,
.newhead .topmenu > li > a:not(.down):not(.down2)::after { display: none; }  /* без стрелки у пунктов без дропдауна */

/* =========================================================
   5. МЕГА-МЕНЮ (выпадашки) — позиционирование и вид
   ========================================================= */
.newhead .topmenu > li > .container-fluid,
.newhead .topmenu > li > .hidden-small,
.newhead .topmenu > li > div {
  display: none;
  position: absolute !important; top: calc(100% + 14px); left: 0;
  background: var(--ds-surface); border-radius: var(--ds-r-block);
  box-shadow: var(--ds-shadow-card); padding: 24px;
  z-index: 100;
}
.newhead .topmenu > li:hover > .container-fluid,
.newhead .topmenu > li:hover > .hidden-small,
.newhead .topmenu > li:hover > div { display: block; }
.newhead .topmenu .container-fluid a,
.newhead .topmenu .hidden-small a { color: var(--ds-text); text-decoration: none; transition: color .2s ease; }
.newhead .topmenu .container-fluid a:hover,
.newhead .topmenu .hidden-small a:hover { color: var(--ds-brand); }
.newhead .topmenu .hid-services a.hover-red,
.newhead .topmenu .container-fluid .span span { color: var(--ds-brand); }

/* =========================================================
   6. ПРАВЫЙ БЛОК: CTA + серая кнопка
   ========================================================= */
.newhead .but { display: flex !important; align-items: center; gap: 8px; flex: 0 0 auto; }
/* серая иконка-звонок — убираем (по просьбе) */
.newhead .but a.call { display: none !important; }
/* CTA «Заказать звонок» */
.newhead .but a.button:not(.whatsapp):not(.telegram) {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ds-brand); color: var(--ds-on-brand);
  font: var(--ds-fw-medium) var(--ds-body-m)/1 var(--ds-font);
  padding: 15px 22px; border-radius: 16px; text-decoration: none; white-space: nowrap;
  transition: background .2s ease, box-shadow .2s ease, transform .1s ease;
}
/* Состояния (hover/active/focus) — компонент .ds-btn в design-system.css. */
/* скрытые дублирующие текстовые кнопки WhatsApp/Telegram */
.newhead .but a.button.whatsapp,
.newhead .but a.button.telegram { display: none !important; }

/* Поиск по сайту — по умолчанию только красная кнопка-лупа 48×48.
   На hover/focus и когда что-то введено — раскрывается поле слева от кнопки. */
.newhead form.search_form:not(.searchform__mobile) {
  display: inline-flex !important; align-items: center; flex: 0 0 auto;
  position: relative; z-index: 60;
  height: 48px; border-radius: 14px; margin: 0 14px 0 0;
  background: transparent;
  transition: background .2s ease, box-shadow .2s ease;
}
.newhead form.search_form:not(.searchform__mobile):hover,
.newhead form.search_form:not(.searchform__mobile):focus-within,
.newhead form.search_form:not(.searchform__mobile).has-value {
  background: var(--ds-surface); box-shadow: 0 0 0 1px var(--ds-border), var(--ds-shadow-soft); z-index: 120;
}
.newhead form.search_form:not(.searchform__mobile) .form-group { margin: 0; padding: 0; display: flex; overflow: hidden; border-radius: 14px; }
.newhead form.search_form:not(.searchform__mobile) .search_input {
  display: block !important; width: 0 !important; min-width: 0; height: 46px;
  padding: 0; border: 0; background: transparent; outline: 0;
  font: var(--ds-fw-regular) var(--ds-body-m)/1.2 var(--ds-font); color: var(--ds-text);
  transition: width .28s ease, padding .28s ease;
}
.newhead form.search_form:not(.searchform__mobile):hover .search_input,
.newhead form.search_form:not(.searchform__mobile):focus-within .search_input,
.newhead form.search_form:not(.searchform__mobile).has-value .search_input {
  width: 220px !important; padding: 0 8px 0 16px;
}
.newhead form.search_form:not(.searchform__mobile) .search_input::placeholder { color: var(--ds-text-3); }
.newhead form.search_form:not(.searchform__mobile) .serach_btn {
  width: 48px; height: 48px; flex: 0 0 auto; padding: 0; border: 0; cursor: pointer; outline: 0;
  border-radius: 14px; background-color: transparent;
  -webkit-mask: none; mask: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230f172a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='8'/%3E%3Cpath%20d='m21%2021-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  transition: opacity .2s ease, width .2s ease, background-color .2s ease;
  opacity: .7;
}
:root[data-theme="dark"] .newhead form.search_form:not(.searchform__mobile) .serach_btn {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23f1f5f9'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='8'/%3E%3Cpath%20d='m21%2021-4.3-4.3'/%3E%3C/svg%3E");
}
.newhead form.search_form:not(.searchform__mobile) .serach_btn:hover { opacity: 1; }
/* при раскрытом поле — прячем лупу-кнопку, чтобы не мешалась (submit на Enter) */
.newhead form.search_form:not(.searchform__mobile):hover .serach_btn,
.newhead form.search_form:not(.searchform__mobile):focus-within .serach_btn,
.newhead form.search_form:not(.searchform__mobile).has-value .serach_btn {
  width: 0; opacity: 0; pointer-events: none;
}

@media (max-width: 1180px) {
  .newhead form.search_form:not(.searchform__mobile):hover .search_input,
  .newhead form.search_form:not(.searchform__mobile):focus-within .search_input,
  .newhead form.search_form:not(.searchform__mobile).has-value .search_input { width: 160px !important; }
}

/* =========================================================
   7. АДАПТИВ
   Десктоп-навбар — только на широких экранах (≥1200),
   ниже — мобильное меню (бургер).
   ========================================================= */
/* На средне-узком десктопе (1200–1360) поджимаем меню плотнее */
@media (min-width: 1200px) and (max-width: 1360px) {
  .newhead .menu .row { gap: 4px; }
  .newhead .topmenu > li > a { padding: 10px 7px; }
  .newhead .but a.button:not(.whatsapp):not(.telegram) { padding: 14px 18px; }
}

/* ===== МОБИЛЬНАЯ ШАПКА (планшеты и телефоны, <1200) ===== */
@media (max-width: 1199px) {
  .newhead .menu { display: none !important; }

  .newhead { padding: 8px 0; }
  .newhead .concat { padding: 0 var(--ds-gutter); }  /* единый гуттер — как контент (было 16px, шапка была шире) */

  /* ГОРОД над хедером: показываем pre-menu, но только переключатель города */
  .newhead .pre-menu { display: block !important; max-height: none !important; opacity: 1; transition: max-height .22s ease, opacity .22s ease; }
  /* #1 — при скролле прячем строку «Москва», остаётся только шапка */
  .newhead.gpm-scrolled .pre-menu { max-height: 0 !important; opacity: 0; overflow: hidden !important; margin: 0; padding-top: 0; padding-bottom: 0; }
  .newhead .pre-menu > div { justify-content: flex-start !important; gap: 8px; padding: 2px 6px 2px; }
  .newhead .pre-menu .gruz,
  .newhead .pre-menu .email,
  .newhead .pre-menu .timer,
  .newhead .pre-menu .phone,
  .newhead .pre-menu .header-socials { display: none !important; }
  .newhead .pre-menu .gpm-select__trigger { font-size: var(--ds-body-m); }

  /* дублирующий город в панели прячем — он теперь над хедером */
  .newhead .mobile-menu .hiddenly .gpm-select,
  .newhead .mobile-menu .hiddenly select.select { display: none !important; }

  /* белый бар: логотип ↔ соцсети + бургер */
  .newhead .mobile-menu { display: block !important; position: relative; }
  .newhead .mobile-menu > ul.mobmenu {
    display: flex !important; align-items: center; justify-content: space-between;
    list-style: none; margin: 0; padding: 8px 12px;
    background: var(--ds-surface); border-radius: 16px; box-shadow: var(--ds-shadow-soft);
  }
  .newhead .mobile-menu > ul.mobmenu > li { display: flex; align-items: center; }
  .newhead .mobile-menu .header__logo img { height: 40px; width: auto; display: block; }

  /* соцсети + телефон + бургер справа */
  .newhead .mobile-menu .hedaer__social { display: flex; align-items: center; gap: 6px; }
  .newhead .mobile-menu .hedaer__social > a {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
  }
  .newhead .mobile-menu .hedaer__social > a > img { width: 30px; height: 30px; display: block; }
  /* tg/max рядом с телефоном (заказчик 16.10) — одного видимого размера: MAX.svg — квадрат во весь бокс,
     tg.svg — круг ~68% бокса, поэтому его картинка крупнее */
  .newhead .mobile-menu .hedaer__social > a > img[src*="MAX"] { width: 28px; height: 28px; }
  .newhead .mobile-menu .hedaer__social > a > img[src*="tg"] { width: 40px; height: 40px; }

  /* бургер */
  .newhead .mobile-menu .hedaer__social .header__menu { position: static; display: inline-flex; align-items: center; }
  /* бургер — чёткая SVG-иконка через маску (красится currentColor темы) */
  .newhead .mobile-menu .hedaer__social .header__menu .menu-toggle {
    display: inline-block !important; position: relative !important;
    width: 26px !important; height: 26px !important; min-width: 0 !important;
    margin-left: 8px; padding: 0;
    border: 0; outline: 0; flex: 0 0 auto;
    background-color: var(--ds-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cpath%20d='M4%207h16M4%2012h16M4%2017h16'/%3E%3C/svg%3E") center / 22px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cpath%20d='M4%207h16M4%2012h16M4%2017h16'/%3E%3C/svg%3E") center / 22px no-repeat;
    transition: background-color .2s ease;
  }
  .newhead .mobile-menu .menu-toggle::before,
  .newhead .mobile-menu .menu-toggle::after { display: none !important; }
  /* крестик — отдельная SVG-иконка (специфичность выше базового бургера) */
  .newhead .mobile-menu.gpm-open .hedaer__social .header__menu .menu-toggle {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cpath%20d='M6%206L18%2018M18%206L6%2018'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cpath%20d='M6%206L18%2018M18%206L6%2018'/%3E%3C/svg%3E");
  }

  /* выезжающая панель меню */
  .newhead .mobile-menu .hiddenly {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    background: var(--ds-surface); border-radius: 20px; box-shadow: var(--ds-shadow-card);
    padding: 16px; z-index: 200; max-height: 78vh; overflow-y: auto;
  }
  .newhead .mobile-menu.gpm-open .hiddenly { display: block; }
  .newhead .mobile-menu .hiddenly .input input {
    width: 100%; font: var(--ds-fw-regular) var(--ds-body-m)/1.2 var(--ds-font);
    padding: 12px 14px; border: 1px solid var(--ds-border); border-radius: 12px;
    background: var(--ds-surface); color: var(--ds-text); margin-bottom: 12px;
  }

  /* пункты меню в панели (включая «Контакты» без .subdown) */
  .newhead .mobile-menu .submenu { list-style: none; margin: 0; padding: 0; }
  .newhead .mobile-menu .submenu > li { border-bottom: 1px solid var(--ds-border-soft); }
  .newhead .mobile-menu .submenu > li:last-child { border-bottom: 0; }
  .newhead .mobile-menu .submenu > li > a {
    display: block; padding: 12px 6px; text-decoration: none;
    font: var(--ds-fw-medium) 17px/1.25 var(--ds-font); color: var(--ds-text);
  }
  .newhead .mobile-menu .submenu > li > a:hover,
  .newhead .mobile-menu .submenu > li > a:active { color: var(--ds-brand); }
  /* под-подссылки мега-меню на мобиле прячем — верхние ведут на разделы */
  .newhead .mobile-menu .submenu .collapse,
  .newhead .mobile-menu .submenu .card-body { display: none !important; }

  /* «хвост» панели: город, контакты, CTA */
  .newhead .mobile-menu .hiddenly select,
  .newhead .mobile-menu .hiddenly .select {
    -webkit-appearance: none; appearance: none; border: 0; background: transparent;
    font: var(--ds-fw-medium) var(--ds-body-l)/1.2 var(--ds-font); color: var(--ds-text); padding: 13px 6px;
  }
  .newhead .mobile-menu .hiddenly .gruz,
  .newhead .mobile-menu .hiddenly .timer { color: var(--ds-text-2); font: var(--ds-fw-regular) var(--ds-body-m)/1.4 var(--ds-font); padding: 2px 6px; margin: 0; }
  .newhead .mobile-menu .hiddenly .email,
  .newhead .mobile-menu .hiddenly .phone,
  .newhead .mobile-menu .hiddenly a[href^="mailto"],
  .newhead .mobile-menu .hiddenly a[href^="tel"] { display: block; color: var(--ds-brand); text-decoration: none; padding: 2px 6px; font: var(--ds-fw-regular) var(--ds-body-m)/1.5 var(--ds-font); }
  /* контакты в панели (.header__text): три строки одного размера, ровно по левому краю */
  .newhead .mobile-menu .hiddenly .header__text { text-align: left; }
  .newhead .mobile-menu .hiddenly .header__text p {
    margin: 0; padding: 3px 6px; text-align: left;
    font: var(--ds-fw-regular) var(--ds-body-m)/1.4 var(--ds-font); color: var(--ds-text-2);
  }
  .newhead .mobile-menu .hiddenly .header__text p.red { color: var(--ds-brand); }
  .newhead .mobile-menu .hiddenly .header__text p a {
    display: inline; padding: 0; margin: 0;
    font: inherit; color: var(--ds-brand); text-decoration: none;
  }
  /* Инфо-подписи `.gruz` (Грузчики 24/7 / Работаем по всей России) — серые.
     Инлайновый <style> чанка header_desing_new красит `.red`/`.gruz` в
     `#D40000 !important`; перебиваем нейтральным серым (единый вид инфо-строк).
     `.red` (почта) сюда НЕ включаем — у неё брендовый ссылочный вид ниже. */
  body .newhead .pixel-mobile-header .header__text .gruz,
  body .newhead .pixel-mobile-header .header__text p.gruz,
  body .newhead .pixel-mobile-header .header__text p.gruz a {
    color: var(--ds-text-2) !important;
  }
  /* CTA «Заказать звонок» */
  .newhead .mobile-menu .hiddenly a.button,
  .newhead .mobile-menu .hiddenly a.header__btn,
  .newhead .mobile-menu .hiddenly .theme_button {
    display: block !important; text-align: center; margin-top: 14px;
    background: var(--ds-brand); color: var(--ds-on-brand);
    font: var(--ds-fw-medium) var(--ds-body-m)/1 var(--ds-font); padding: 15px; border-radius: 14px;
    text-decoration: none; border: 0;
    text-transform: none;
  }
  /* дубль-поиск «Поиск по сайту» в панели — прячем (сверху уже есть поиск) */
  .newhead .mobile-menu .hiddenly form.search_form,
  .newhead .mobile-menu .hiddenly .searchform { display: none !important; }

  /* Красная иконка-лупа рядом с полем поиска — не нужна (поиск идёт автоматом
     по вводу). Прячем и в панели, и в шапке. */
  .newhead .mobile-menu .serach_btn,
  .newhead .mobile-menu .search_btn_hide { display: none !important; }
  /* После скрытия лупы поле должно занять всю ширину — иначе flex-обёртка
     `.form-group` сжимает input до ширины контента (≈28px) и placeholder
     «Поиск» не виден. `.search_form` — flex-item в column-контейнере, поэтому
     ему тоже нужен width:100%. */
  .newhead .mobile-menu .search_form { display: flex; width: 100%; position: relative; }
  .newhead .mobile-menu .search_form .form-group { flex: 1 1 auto; width: 100%; margin: 0; }
  .newhead .mobile-menu .search_form .search_input { flex: 1 1 auto; width: 100%; }
  /* Выпадающий список подсказок поиска — оверлеем (absolute), иначе он стоит
     в flex-строке рядом с полем и забирает всю ширину, сжимая input до 28px.
     Легаси-правило `.newhead form.search_form.my-mb-2 .gpm-search-inline`
     (0-4-1) держит его static — перебиваем более точным селектором. */
  .newhead .mobile-menu form.search_form.my-mb-2 .gpm-search-inline,
  .newhead .mobile-menu .search_form .gpm-search-inline {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  }

  /* «Москва» в бургере — только информация, не должна открывать список
     городов (город уже выбран пользователем через верхний тумблер шапки). */
  .newhead .mobile-menu .hiddenly .gpm-select,
  .newhead .mobile-menu .hiddenly .gpm-select__trigger,
  .newhead .mobile-menu .hiddenly select.select { pointer-events: none; }
  .newhead .mobile-menu .hiddenly .gpm-select__chevron { display: none; }

  /* Инфо-строки в бургере (Грузчики / город / подпись) — единый стиль:
     один размер, нейтральный серый цвет, одинаковый вертикальный ритм.
     Почта/телефон сюда НЕ включаем — у них свой ссылочный вид (ниже). */
  .newhead .mobile-menu .hiddenly .gruz,
  .newhead .mobile-menu .hiddenly .timer,
  .newhead .mobile-menu .hiddenly .header__text p,
  .newhead .mobile-menu .hiddenly .gpm-select__label {
    font: var(--ds-fw-regular) var(--ds-body-m)/1.4 var(--ds-font);
    color: var(--ds-text-2); padding: 4px 6px; margin: 0;
    text-decoration: none;
  }
  /* Почта / телефон — брендовый цвет + подчёркивание (видно, что ссылка).
     Легаси-инлайн `.pixel-mobile-header .header__text .red` красит и подчёркивает
     через `!important` (color:#D40000, text-decoration:none) — перебить можно
     только тем же `!important`. */
  .newhead .mobile-menu .hiddenly .header__text p a[href^="mailto"],
  .newhead .mobile-menu .hiddenly .header__text p a[href^="tel"],
  body .newhead .mobile-menu a[href^="mailto"],
  body .newhead .mobile-menu a[href^="tel"] {
    color: var(--ds-brand) !important;
    text-decoration: underline !important; text-underline-offset: 2px;
  }

  /* Текущий выбранный город в дропдауне бургера — «Москва» — не показываем
     в списке (пользователь уже на московской версии, дублировать не нужно).
     Скрываем через `.is-current` на `<option>`-эмуляции. */
  .newhead .mobile-menu .gpm-select__item.is-current { display: none; }

  /* Пункт-аккордеон «Москва» в бургер-меню — просто информация, не кнопка:
     скрываем сам пункт списка (`<li>` c collapse-триггером `#collapseCity`),
     город и так виден выше в геолокационной строке и в верхнем dropdown. */
  .newhead .mobile-menu .submenu > li:has(> a[data-target="#collapseCity"]) { display: none; }
}


/* ============================================================
   ДОСБОРКА: правила .newhead, ранее разбросанные по services.css
   и content.css. Собраны сюда, чтобы шапка была в одном файле.
   ============================================================ */

.newhead .my-d-flex.my-align-items-center:has(> .gpm-select) {
  display: flex !important; align-items: center; gap: 6px;
}

.newhead .my-d-flex.my-align-items-center:has(> .gpm-select) > svg { margin-right: 0; }

.newhead .mobmenu-search { display: none !important; }

.newhead .topmenu .container-fluid.hiddenly:has(.personal) {
  width: min(1200px, 96vw); left: -160px !important; padding: 34px 38px;
}

.newhead .topmenu .container-fluid.hiddenly:has(.personal) .row.my-row {
  background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0;
}

.newhead .topmenu .container-fluid.hiddenly:has(.personal)::before {
  content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; background: transparent;
}

.newhead .topmenu .container-fluid.hiddenly:has(.personal) > .row.my-row {
  display: grid !important; grid-template-columns: 2.6fr 1fr 0.95fr; gap: 36px; margin: 0; align-items: start;
}

.newhead .topmenu .container-fluid.hiddenly:has(.personal) > .row.my-row > [class*="col-"],
.newhead .topmenu .container-fluid.hiddenly:has(.personal) > .row.my-row > [class*="my-col"] {
  width: auto !important; max-width: none !important; min-width: 0 !important; padding: 0; margin: 0; flex: none !important;
}

.newhead .topmenu .container-fluid.hiddenly:has(.personal) p.h4 {
  font: var(--ds-fw-medium) var(--ds-h6) / 1.25 var(--ds-font); color: var(--ds-text); margin: 0 0 20px; text-transform: none;
}

.newhead .topmenu .container-fluid.hiddenly:has(.personal) .col-lg-6 > .row.my-row {
  display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0;
}

.newhead .topmenu .container-fluid.hiddenly:has(.personal) .my-col-4 { width: auto !important; padding: 0; }

.newhead .topmenu .personal { display: flex; flex-direction: column; }

.newhead .topmenu .personal .img {
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--ds-r-card, 20px); background-size: cover;
  background-position: center; background-repeat: no-repeat; margin-bottom: 12px; background-color: var(--ds-surface-alt);
}

.newhead .topmenu .personal p { margin: 0 0 4px; }

.newhead .topmenu .personal p a {
  font: var(--ds-fw-medium) var(--ds-body-l) / 1.3 var(--ds-font); color: var(--ds-text); text-decoration: none;
}

.newhead .topmenu .personal p a:hover { color: var(--ds-brand); }

.newhead .topmenu .personal p.span {
  font: var(--ds-fw-regular) var(--ds-body-m) / 1.4 var(--ds-font); color: var(--ds-text-2); margin: 0;
}

.newhead .topmenu .personal p.span span { color: var(--ds-brand); font-weight: var(--ds-fw-medium); }

.newhead .topmenu .hiddenly:not(.persent) .my-col-4:nth-child(1) .personal .img {
  background-image: image-set(url("/assets/template/newdesign/images/svc-loaders.webp") type("image/webp"), url("/assets/template/newdesign/images/svc-loaders.png?2") type("image/png"));
}

.newhead .topmenu .hiddenly:not(.persent) .my-col-4:nth-child(2) .personal .img {
  background-image: image-set(url("/assets/template/newdesign/images/svc-rigging.webp") type("image/webp"), url("/assets/template/newdesign/images/svc-rigging.png?2") type("image/png"));
}

.newhead .topmenu .hiddenly:not(.persent) .my-col-4:nth-child(3) .personal .img {
  background-image: image-set(url("/assets/template/newdesign/images/svc-handyman.webp") type("image/webp"), url("/assets/template/newdesign/images/svc-handyman.png?2") type("image/png"));
}

.newhead .topmenu .hid-services { display: flex; flex-direction: column; gap: 12px; }

.newhead .topmenu .hid-services a {
  font: var(--ds-fw-regular) var(--ds-body-m) / 1.3 var(--ds-font); color: var(--ds-text-2); text-decoration: none;
}

.newhead .topmenu .hid-services a:hover { color: var(--ds-brand); }

.newhead .topmenu .hid-services a.first-item-bigest {
  font: var(--ds-fw-medium) var(--ds-body-l) / 1.3 var(--ds-font); color: var(--ds-text); margin-bottom: 4px;
}

.newhead .topmenu .container-fluid.hiddenly:has(.personal) .col-lg-3 .line {
  border-left: 1px solid var(--ds-border-soft); padding-left: 32px; text-align: center;
}

.newhead .topmenu .container-fluid.hiddenly:has(.personal) .col-lg-3 .line p.h4 { text-align: center; }

.newhead .topmenu .vak-img {
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--ds-r-card, 20px); background-size: cover;
  background-position: center; background-repeat: no-repeat; margin: 0 0 12px; background-color: var(--ds-surface-alt);
  background-image: image-set(url("/assets/template/newdesign/images/svc-vacancy.webp") type("image/webp"), url("/assets/template/newdesign/images/svc-vacancy.png?2") type("image/png"));
}

.newhead .topmenu .vak-img[style] { background-image: image-set(url("/assets/template/newdesign/images/svc-vacancy.webp") type("image/webp"), url("/assets/template/newdesign/images/svc-vacancy.png?2") type("image/png")); }

.newhead .topmenu .line p.hid-text {
  font: var(--ds-fw-regular) var(--ds-body-m) / 1.45 var(--ds-font); color: var(--ds-text-2); margin: 0 0 16px;
}

.newhead .topmenu .line a.more {
  display: inline-flex; align-items: center; justify-content: center;
  font: var(--ds-fw-medium) var(--ds-body-m) / 1 var(--ds-font); text-decoration: none;
  background: var(--ds-brand); color: var(--ds-on-brand); padding: 12px 28px; border-radius: var(--ds-r-pill, 999px);
  transition: background .2s ease;
}

.newhead .topmenu .line a.more:hover { background: var(--ds-brand-hover); }

.newhead .topmenu a.more:hover,
.newhead .topmenu a.more:focus,
.newhead .topmenu a.more:active,
.newhead .topmenu .line:hover a.more,
.newhead .topmenu .container-fluid a.more:hover { color: var(--ds-on-brand) !important; }

.newhead .topmenu .personal { position: relative; cursor: pointer; }

.newhead .topmenu .personal p a::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
}

.newhead .topmenu .personal .img { transition: transform .2s ease, box-shadow .2s ease; }

.newhead .topmenu .personal:hover .img { transform: translateY(-3px); box-shadow: var(--ds-shadow-card); }

.newhead .topmenu .personal:hover p a { color: var(--ds-brand); }

.newhead .topmenu .container-fluid.hiddenly:has(.personal) .col-lg-3 .line { position: relative; cursor: pointer; }

.newhead .topmenu .line a.more::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
}

.newhead .topmenu .line .vak-img { transition: transform .2s ease, box-shadow .2s ease; }

.newhead .topmenu .line:hover .vak-img { transform: translateY(-3px); box-shadow: var(--ds-shadow-card); }

.newhead .topmenu .line:hover a.more { background: var(--ds-brand-hover); }

.newhead .topmenu .personal p.span span { display: block; margin-top: 4px; white-space: nowrap; }

.newhead .topmenu .container-fluid.hiddenly:has(.personal) .col-lg-6 > .row.my-row { align-items: start !important; }

.newhead .topmenu .personal { display: flex; flex-direction: column; height: 100%; }

.newhead .topmenu .personal p:not(.span) { min-height: 58px; margin: 0 0 4px; }

.newhead .topmenu .hiddenly.persent .my-col-4:nth-child(1) .personal .img {
  background-image: image-set(url("/assets/template/newdesign/images/corp-outsourcing.webp") type("image/webp"), url("/assets/template/newdesign/images/corp-outsourcing.jpg") type("image/jpeg"));
}

.newhead .topmenu .hiddenly.persent .my-col-4:nth-child(2) .personal .img {
  background-image: image-set(url("/assets/template/newdesign/images/corp-staffing.webp") type("image/webp"), url("/assets/template/newdesign/images/corp-staffing.jpg") type("image/jpeg"));
}

.newhead .topmenu .hiddenly.persent .my-col-4:nth-child(3) .personal .img {
  background-image: image-set(url("/assets/template/newdesign/images/corp-leasing.webp") type("image/webp"), url("/assets/template/newdesign/images/corp-leasing.jpg") type("image/jpeg"));
}

.newhead .topmenu > li > .hidden-small { min-width: 264px; padding: 14px; }

.newhead .topmenu .hidden-small ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.newhead .topmenu .hidden-small li { margin: 0; list-style: none; }

.newhead .topmenu .hidden-small li a {
  display: block; padding: 9px 14px; border-radius: 10px;
  font: var(--ds-fw-regular) var(--ds-body-m) / 1.3 var(--ds-font); color: var(--ds-text-2); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.newhead .topmenu .hidden-small li a:hover { background: var(--ds-brand-soft); color: var(--ds-brand); }

.newhead .topmenu .hidden-small li a.first-item-bigest {
  font-weight: var(--ds-fw-medium); color: var(--ds-text);
}

.newhead .topmenu .container-fluid.hiddenly.persent { left: -370px !important; }

.newhead .topmenu > li > .hidden-small { position: absolute; }

.newhead .topmenu > li > .hidden-small::before {
  content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; background: transparent;
}

.newhead .topmenu .hid-services a,
.newhead .topmenu .hidden-small li a {
  position: relative; padding-left: 26px;
}

.newhead .topmenu .hid-services a::before,
.newhead .topmenu .hidden-small li a::before {
  content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; flex: 0 0 auto; background-color: var(--ds-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2018l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2018l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .5; transition: opacity .15s ease, transform .15s ease;
}

.newhead .topmenu .hid-services a:hover::before,
.newhead .topmenu .hidden-small li a:hover::before {
  opacity: 1; transform: translateY(-50%) translateX(3px);
}

.newhead .topmenu .hid-services a.first-item-bigest::before { opacity: .8; }

.newhead .topmenu .hiddenly.persent .my-col-4:nth-child(3) .personal .img { background-position: center top; }

.newhead .header-socials { display: inline-flex; align-items: center; gap: 10px; }

.newhead .header-socials a,
.newhead .header-socials a.call,
footer .social a {
  width: 46px !important; height: 46px !important; flex: 0 0 46px; border-radius: 12px;
  background: var(--ds-surface); border: 2px solid var(--ds-border);
  display: inline-flex !important; align-items: center; justify-content: center; overflow: hidden;
  box-sizing: border-box; padding: 0; margin: 0;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.newhead .header-socials a:hover,
footer .social a:hover { box-shadow: var(--ds-shadow-soft); transform: translateY(-2px); border-color: var(--ds-brand-soft-2); }

.newhead .header-socials a img,
.newhead .header-socials a.call img,
footer .social a img { width: 26px !important; height: 26px !important; object-fit: contain; }

.newhead .my-justify-content-between > .my-d-flex.my-align-items-center { gap: 18px !important; }

.newhead .gruz span { margin-left: 0; }        /* зазор задаёт gap группы, а не margin */

.newhead .contact { gap: 22px !important; }     /* правая группа: info · 24/7 · телефон */

  /* Мобильная шапка: трубка и мессенджеры — без рамки фокуса браузера (после нажатия браузер обводил
     их своим контуром: красным/тёмным, заказчик 16.10). С клавиатуры (Tab) фокус виден мягкой подсветкой */
  .newhead .mobile-menu .hedaer__social > a:focus { outline: none; }
  .newhead .mobile-menu .hedaer__social > a:focus-visible { background: var(--ds-brand-soft); }

.newhead .topmenu .hidden-small a,
.newhead .topmenu .hid-services a,
.newhead .topmenu li ul a,
.newhead .topmenu ul ul a { color: var(--ds-text) !important; }

.newhead .topmenu .hidden-small a:hover,
.newhead .topmenu .hid-services a:hover,
.newhead .topmenu li ul a:hover { color: var(--ds-brand) !important; }
/* ============================================================
   ПОИСК ПО САЙТУ (виджет в шапке).
   Клиентский поиск: JS фильтрует /assets/template/js/pages-index.json.
   Разметка ставится JS в контейнер <div data-gpm-search> — либо в шапке,
   либо в другом месте страницы; стили одинаковые.
   ============================================================ */
.gpm-search { position: relative; display: inline-flex; align-items: center; }
.gpm-search__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; border: 0; outline: 0; cursor: pointer;
  background: transparent; color: var(--ds-text); border-radius: 12px;
  transition: background var(--ds-transition), color var(--ds-transition);
}
.gpm-search__toggle:hover { background: rgba(2, 6, 23, .05); color: var(--ds-brand); }
:root[data-theme="dark"] .gpm-search__toggle:hover { background: rgba(255, 255, 255, .08); }
.gpm-search.is-open .gpm-search__toggle { color: var(--ds-brand); }

.gpm-search__panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: min(420px, 92vw);
  background: var(--ds-surface);
  border-radius: 16px; box-shadow: var(--ds-shadow-card);
  padding: 12px; z-index: 1200; box-sizing: border-box;
  border: 1px solid var(--ds-border-soft);
}
.gpm-search__input {
  width: 100%; height: 44px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--ds-border); border-radius: 12px;
  background: var(--ds-surface); color: var(--ds-text);
  font: var(--ds-fw-regular) var(--ds-body-m)/1.2 var(--ds-font);
  transition: border-color var(--ds-transition), box-shadow var(--ds-transition);
}
.gpm-search__input:focus {
  outline: none; border-color: var(--ds-brand);
  box-shadow: 0 0 0 3px var(--ds-brand-soft);
}
.gpm-search__input::placeholder { color: var(--ds-text-3); opacity: 1; }

.gpm-search__list {
  list-style: none; margin: 8px 0 0; padding: 0;
  max-height: 60vh; overflow-y: auto;
}
.gpm-search__list:empty { margin: 0; }
.gpm-search__item a {
  display: block; padding: 10px 12px; border-radius: 10px;
  color: var(--ds-text); text-decoration: none;
  transition: background var(--ds-transition), color var(--ds-transition);
}
.gpm-search__item a:hover { background: var(--ds-brand-soft); color: var(--ds-brand); }
.gpm-search__title {
  display: block; font: var(--ds-fw-medium) var(--ds-body-m)/1.3 var(--ds-font);
  color: inherit;
}
.gpm-search__title mark { background: var(--ds-brand-soft); color: var(--ds-brand); padding: 0 2px; border-radius: 3px; }
.gpm-search__url {
  display: block; margin-top: 2px;
  font: var(--ds-fw-regular) var(--ds-body-s)/1.3 var(--ds-font); color: var(--ds-text-3);
}
.gpm-search__empty {
  padding: 12px; text-align: center;
  font: var(--ds-fw-regular) var(--ds-body-s)/1.3 var(--ds-font); color: var(--ds-text-3);
}

/* Легаси-модалка #search_modal — прячем, используем виджет .gpm-search */
#search_modal { display: none !important; }

/* Узкие телефоны (320–360px): tg · max · телефон · бургер в баре — ячейки компактнее, чтобы не упираться в логотип */
@media (max-width: 360px) {
  .newhead .mobile-menu .hedaer__social { gap: 2px; }
  .newhead .mobile-menu .hedaer__social > a { width: 36px; height: 36px; }
  .newhead .mobile-menu .hedaer__social > a > img[src*="tg"] { width: 38px; height: 38px; }
  .newhead .mobile-menu .hedaer__social > a > img[src*="MAX"] { width: 26px; height: 26px; }
  .newhead .mobile-menu .hedaer__social > a[href^="tel:"] > img { width: 28px; height: 28px; }
}

@media (max-width: 560px) {
  .gpm-search__panel { position: fixed; top: 76px; left: 12px; right: 12px; width: auto; }
}

/* ============================================================
   Живой live-dropdown под существующим полем поиска в шапке
   (input.search_input внутри form.search_form). JS вешает его
   как второй режим site-search.js.
   ============================================================ */
.gpm-search-inline {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: min(360px, 92vw); z-index: 1200;
}
/* Мобилка: dropdown в потоке под полем поиска (не абсолютный),
   иначе перекрывается меню бургера. */
@media (max-width: 1199px) {
  .newhead .mobile-menu .gpm-search-inline,
  .newhead form.search_form.my-mb-2 .gpm-search-inline {
    position: static; width: 100%; margin-top: 6px;
  }
  .newhead .mobile-menu .gpm-search-inline .gpm-search__list,
  .newhead form.search_form.my-mb-2 .gpm-search-inline .gpm-search__list {
    max-height: 45vh;
  }
}
.gpm-search-inline .gpm-search__list {
  list-style: none; margin: 0; padding: 8px;
  max-height: 60vh; overflow-y: auto;
  background: var(--ds-surface); border-radius: 14px;
  border: 1px solid var(--ds-border-soft); box-shadow: var(--ds-shadow-card);
}
.gpm-search-inline .gpm-search__list[hidden] { display: none; }
.gpm-search-inline .gpm-search__empty {
  padding: 12px 14px; background: var(--ds-surface);
  border: 1px solid var(--ds-border-soft); border-radius: 14px; box-shadow: var(--ds-shadow-card);
  font: var(--ds-fw-regular) var(--ds-body-s)/1.3 var(--ds-font); color: var(--ds-text-3);
  text-align: center;
}
.gpm-search-inline .gpm-search__item a {
  display: block; padding: 10px 12px; border-radius: 10px;
  color: var(--ds-text); text-decoration: none;
  transition: background var(--ds-transition), color var(--ds-transition);
}
.gpm-search-inline .gpm-search__item a:hover { background: var(--ds-brand-soft); color: var(--ds-brand); }
.gpm-search-inline .gpm-search__title {
  display: block; font: var(--ds-fw-medium) var(--ds-body-m)/1.3 var(--ds-font); color: inherit;
}
.gpm-search-inline .gpm-search__title mark { background: var(--ds-brand-soft); color: var(--ds-brand); padding: 0 2px; border-radius: 3px; }
.gpm-search-inline .gpm-search__url {
  display: block; margin-top: 2px;
  font: var(--ds-fw-regular) var(--ds-body-s)/1.3 var(--ds-font); color: var(--ds-text-3);
}

/* ============================================================
   Поиск в БУРГЕР-меню (мобилка) — постоянно раскрытый.
   Класс .search_form form-inline my-mb-2 (не searchform__mobile).
   Отдельные стили от десктопной search_form: полная ширина, всегда виден input.
   ============================================================ */
.newhead .mobile-menu form.search_form.my-mb-2 {
  display: flex !important; flex-wrap: wrap;
  width: 100%; min-height: 46px; margin: 0 0 12px !important;
  background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: 12px; padding: 0; position: relative;
}
.newhead .mobile-menu form.search_form.my-mb-2:focus-within {
  border-color: var(--ds-brand); box-shadow: 0 0 0 3px var(--ds-brand-soft);
}
.newhead .mobile-menu form.search_form.my-mb-2 .form-group {
  flex: 1; margin: 0; padding: 0; display: flex;
}
.newhead .mobile-menu form.search_form.my-mb-2 .search_input {
  width: 100% !important; height: 44px !important; padding: 0 14px !important;
  border: 0 !important; outline: 0 !important; background: transparent !important;
  font: var(--ds-fw-regular) var(--ds-body-m)/1.2 var(--ds-font);
  color: var(--ds-text) !important; box-shadow: none !important;
}
.newhead .mobile-menu form.search_form.my-mb-2 .search_input:focus {
  outline: 0 !important; box-shadow: none !important; border: 0 !important;
}
.newhead .mobile-menu form.search_form.my-mb-2 .serach_btn {
  width: 44px; height: 44px; flex: 0 0 auto; padding: 0; border: 0; cursor: pointer; outline: 0;
  background-color: var(--ds-brand);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='8'/%3E%3Cpath%20d='m21%2021-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
/* Убираем нативную рамку/подсветку для type=search в webkit */
.newhead .mobile-menu form.search_form input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* =========================================================
   Головной gpm-workers.ru (шапка без меню, в .but только MAX + Telegram) —
   как на его проде: MAX и Telegram плитками справа в белой плашке,
   в верхней строке их нет (2026-10-13). На Москве/городах в .but есть
   «Заказать звонок» — правило их не касается.
   ========================================================= */
@media (min-width: 1200px) {
  .newhead .but:not(:has(a.button:not(.whatsapp):not(.telegram))) { margin-left: auto; gap: 10px; }
  .newhead .but:not(:has(a.button:not(.whatsapp):not(.telegram))) a.button.whatsapp,
  .newhead .but:not(:has(a.button:not(.whatsapp):not(.telegram))) a.button.telegram {
    display: inline-flex !important; width: 48px; height: 48px; padding: 0; box-sizing: border-box;
    border: 1px solid var(--ds-border-soft); border-radius: var(--ds-r-sm); background: var(--ds-surface) center / 30px 30px no-repeat;
    font-size: 0; color: transparent; text-decoration: none; transition: background-color var(--ds-transition), border-color var(--ds-transition);
  }
  .newhead .but:not(:has(a.button:not(.whatsapp):not(.telegram))) a.button.whatsapp { background-image: url("/pixel/app/img/header/MAX.svg"); }
  .newhead .but:not(:has(a.button:not(.whatsapp):not(.telegram))) a.button.telegram { background-image: url("/verstka/img/telegram.svg"); }
  .newhead .but:not(:has(a.button:not(.whatsapp):not(.telegram))) a.button:hover { border-color: var(--ds-brand); background-color: var(--ds-brand-soft); }
  /* :has внутри :has недопустим — признак головного: .but начинается сразу с MAX (у городов первым идёт звонок) */
  body:has(.newhead .but > a.button.whatsapp:first-child) header .header-socials { display: none !important; }
}

/* =========================================================
   Головной gpm-workers.ru — шапка одной плашкой (2026-10-13):
   у сайта нет меню услуг, и две строки (контакты сверху + почти пустая белая
   плашка) выглядели разрозненно. Верхняя строка накладывается на белую
   плашку: логотип · «Ваш город» · «Грузчики 24 часа» … почта · 24/7 · телефон · MAX · Telegram.
   Содержимое прежнее (как на проде), меняется только раскладка. Только десктоп.
   ========================================================= */
@media (min-width: 1200px) {
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .concat { position: relative !important; }
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .pre-menu {
    position: absolute !important; top: 0; left: 0; right: 0; height: 64px; z-index: 3; pointer-events: none;
    margin: 0 !important; width: calc(100% - 2 * var(--ds-gutter)) !important; max-width: none !important; left: var(--ds-gutter) !important;
  }
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .pre-menu > div {
    height: 100%; width: 100% !important; box-sizing: border-box; align-items: center;
    padding: 0 136px 0 176px !important; justify-content: flex-start !important; gap: 24px; white-space: nowrap;
  }
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .pre-menu > div * { pointer-events: auto; }
  /* «Ваш город» — красная пилюля с меткой; список городов — карточка в две колонки */
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .pre-menu > div > div:first-child > svg { display: none; }
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .gpm-select__trigger {
    gap: 8px; padding: 9px 14px 9px 12px; border-radius: var(--ds-r-pill);
    background: var(--ds-brand-soft); color: var(--ds-brand); font-weight: var(--ds-fw-semibold);
    transition: background var(--ds-transition), box-shadow var(--ds-transition);
  }
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .gpm-select__trigger::before {
    content: ""; width: 16px; height: 16px; flex: 0 0 auto; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200Z'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200Z'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .gpm-select__trigger:hover,
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .gpm-select.open .gpm-select__trigger { background: var(--ds-brand-soft-2); box-shadow: var(--ds-btn-ring); }
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .gpm-select__chevron { opacity: 1; }
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .gpm-select__list {
    top: calc(100% + 12px); left: -8px; width: 400px; padding: 14px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    border: 1px solid var(--ds-border-soft); border-radius: var(--ds-r-card); max-height: none;
  }
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .gpm-select__list::before {
    content: "Выберите город"; grid-column: 1 / -1; padding: 4px 10px 10px;
    font: var(--ds-fw-semibold) var(--ds-body-s)/1.2 var(--ds-font); letter-spacing: .06em; text-transform: uppercase;
    color: var(--ds-text-3);
  }
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .gpm-select__item.is-current { display: none; }
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .gpm-select__item {
    display: flex; align-items: center; gap: 8px; padding: 11px 12px; white-space: nowrap;
  }
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .gpm-select__item::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-border); flex: 0 0 auto;
    transition: background var(--ds-transition);
  }
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .gpm-select__item:hover::before { background: var(--ds-brand); }
  /* контакты — вправо, телефон акцентом */
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .pre-menu .email { color: var(--ds-text-2); margin-left: auto !important; }
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .pre-menu * { white-space: nowrap; }
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .pre-menu .timer { color: var(--ds-text-2); }
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .pre-menu .phone {
    font-weight: var(--ds-fw-semibold); font-size: var(--ds-body-l); color: var(--ds-text);
  }
  /* при прокрутке тема прячет верхнюю строку (.gpm-scrolled) — у головного она часть плашки, оставляем */
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead.gpm-scrolled .pre-menu {
    max-height: none !important; opacity: 1 !important; overflow: visible !important;
  }
  /* белая плашка — единственная строка шапки */
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .menu .row { min-height: 64px; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .pre-menu > div { gap: 14px; padding-left: 166px !important; }
  body:has(.newhead .but > a.button.whatsapp:first-child) .newhead .pre-menu .phone { font-size: var(--ds-body-m); }
}