/* ===========================================================
   Меню новой шапки zkabel (zeta-header)
   Горизонтальная панель + выпадающие подменю по наведению.
   Файл класть в: <шаблон>/assets/zeta-header/css/menu.css
   =========================================================== */

/* чтобы выпадашки не обрезались */
.header_flex,
.header_flex_right,
.header_flex_right_top,
.header_flex_right_top_flex,
.header_flex_right_top_flex_menu,
.header_flex_right_bottom { overflow: visible; }

/* список -> горизонтальный ряд (контейнеры уже flex с gap:25px) */
.header_flex_right_top_flex_menu > ul,
.header_flex_right_bottom > ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center; flex-wrap: wrap; gap: 25px;
}
.header_flex_right_top_flex_menu > ul > li,
.header_flex_right_bottom > ul > li { position: relative; list-style: none; }

/* пункты 1-го уровня — как в дизайне */
.header_flex_right_top_flex_menu > ul > li > a,
.header_flex_right_top_flex_menu > ul > li > span {
    display: inline-block; white-space: nowrap; text-decoration: none;
    color: #555; font-size: 16px; line-height: 1em; cursor: pointer;
}
.header_flex_right_bottom > ul > li > a,
.header_flex_right_bottom > ul > li > span {
    display: inline-block; white-space: nowrap; text-decoration: none;
    color: #000; font-size: 16px; font-weight: 700; line-height: 1em; cursor: pointer;
}
.header_flex_right_top_flex_menu > ul > li > a:hover,
.header_flex_right_bottom > ul > li > a:hover { color: #e2571f; }

/* выпадающие подменю */
.header_flex_right_top_flex_menu ul ul,
.header_flex_right_bottom ul ul {
    list-style: none; margin: 0; padding: 8px 0;
    position: absolute; top: 100%; left: 0; min-width: 230px;
    background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.12);
    border-radius: 8px; z-index: 1000; display: none;
}
.header_flex_right_top_flex_menu li:hover > ul,
.header_flex_right_bottom li:hover > ul { display: block; }

.header_flex_right_top_flex_menu ul ul li,
.header_flex_right_bottom ul ul li { list-style: none; position: relative; }
.header_flex_right_top_flex_menu ul ul a,
.header_flex_right_top_flex_menu ul ul span,
.header_flex_right_bottom ul ul a,
.header_flex_right_bottom ul ul span {
    display: block; padding: 7px 18px; white-space: nowrap; text-decoration: none;
    color: #2b2b2b; font-size: 14px; font-weight: 400; line-height: 1.3;
}
.header_flex_right_top_flex_menu ul ul a:hover,
.header_flex_right_bottom ul ul a:hover { background: #f5f5f5; color: #e2571f; }

/* 3-й уровень — вбок */
.header_flex_right_top_flex_menu ul ul ul,
.header_flex_right_bottom ul ul ul { top: 0; left: 100%; }

/* подсказка резидента из "хвоста" верхнего меню */
.header_flex_right_top_flex_menu .header-menu-item-hint {
    position: absolute; top: 100%; left: 0; display: none; white-space: normal;
    min-width: 280px; padding: 12px 16px; background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); border-radius: 8px; z-index: 1000;
    color: #555; font-size: 13px; font-weight: 400; line-height: 1.4;
}
.header_flex_right_top_flex_menu li:hover > .header-menu-item-hint { display: block; }

/* --- ПРИ ЖЕЛАНИИ скрыть доп.пункты "хвоста" в верхней строке
   (Прайс-лист, Быстрый заказ, Подбор МУФТ/ВВОДОВ, блок резидента):
.header_flex_right_top_flex_menu > ul > li > a.b-link,
.header_flex_right_top_flex_menu .resident-block { display: none; }
--- */

/* мобильное меню: вертикально, подменю раскрыты */
@media (max-width: 768px) {
    .for_mobile_menu .header_flex_right_top_flex_menu,
    .for_mobile_menu .header_flex_right_bottom { display: block; border: 0; padding: 0; }
    .for_mobile_menu .header_flex_right_top_flex_menu > ul,
    .for_mobile_menu .header_flex_right_bottom > ul { display: block; gap: 0; }
    .for_mobile_menu .header_flex_right_top_flex_menu > ul > li,
    .for_mobile_menu .header_flex_right_bottom > ul > li { padding: 6px 0; }
    .for_mobile_menu .header_flex_right_top_flex_menu ul ul,
    .for_mobile_menu .header_flex_right_bottom ul ul {
        position: static; display: block; box-shadow: none; border-radius: 0;
        padding: 4px 0 4px 16px; min-width: 0;
    }
    .for_mobile_menu .header-menu-item-hint { position: static; display: block; box-shadow: none; min-width: 0; }
}

/* ===========================================================
   Фиксы шапки новой верстки
   =========================================================== */

/* Липкая шапка: top:0, без скачков размеров (только тень при скролле).
   !important — чтобы дизайнерский position:fixed её не перебивал. */
.l-wrapper > header,
.l-wrapper > header.header_cs {
    position: sticky !important;
    top: 0 !important;
    margin: 0 !important;
    z-index: 1000;
    background: #fff;
    padding: 20px 0;
}
.l-wrapper > header { transition: box-shadow .2s ease; box-shadow: none; }
.l-wrapper > header.header_cs { box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
@media screen and (max-width: 600px) {
    .l-wrapper > header,
    .l-wrapper > header.header_cs { padding: 10px 0; }
}

/* Сайт навешивает .add-padding с отступом сверху (рассчитан на старую
   фиксированную шапку). С нашей липкой шапкой это даёт пустое пространство
   и скачок при прокрутке — убираем отступ. */
.l-wrapper.add-padding { padding-top: 0 !important; }

/* логотип: не растягивать SVG (размер колонки задаём на десктопе в медиа ниже) */
.header_flex > .logo { background-size: contain; }

/* ===========================================================
   Фиксы по скриншоту: выпадашки города/входа, корзина, отступы
   =========================================================== */

/* контейнеры-якоря для абсолютных выпадашек — ТОЛЬКО десктоп.
   На мобиле .btn_login позиционируется абсолютно самим дизайном, поэтому
   relative здесь ломал бы раскладку иконок. */
@media screen and (min-width: 1025px) {
    .header_flex_right_top_flex .chose_location,
    .header_flex_right_top_flex .b-location__wrap { position: relative; }
    .header_flex_right_bot .btn_login { position: relative; }
}

/* старые выпадашки .b-personal__dropdown (город/вход) — прячем по умолчанию,
   позиционируем под триггером, чтобы не накрывали меню и не ловили клики */
.header_flex_right .b-personal__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    min-width: 240px;
    z-index: 1200;
}
/* город — по наведению */
.header_flex_right .b-personal__dropdown.js-location-form { display: none; }
.header_flex_right_top_flex .b-location__wrap:hover .b-personal__dropdown.js-location-form { display: block; }
/* вход/кабинет — по клику; класс на стабильной .btn_login + !important.
   Раскрываем ЛЮБУЮ выпадашку внутри .btn_login: и форму входа (гость),
   и меню личного кабинета (авторизован). */
.btn_login .b-personal__dropdown { display: none !important; }
.btn_login.zeta-login-open .b-personal__dropdown { display: block !important; }

/* иконка пользователя в авторизованном состоянии */
.btn_login_ic--user span {
    background-image: url(../img/user.svg) !important;
    background-size: 22px 22px;
    width: 22px;
    height: 22px;
}

/* эффект наведения на кнопку входа */
.btn_login { cursor: pointer; }
.btn_login:hover .btn_login_ic { border-color: #D34D01; }
.btn_login:hover .btn_login_txt p { color: #D34D01; }

/* убираем дублирующий видимый текст из старого блока входа (.b-personal),
   он накладывался на .btn_login и на мобиле вылезал оранжевым "ВХОД".
   Оставляем только саму выпадающую форму. */
.btn_login .b-personal,
.btn_login .b-personal__item,
.btn_login .b-personal__user-name { position: static; background: none; border: 0 !important; }
.btn_login .b-personal { width: 0 !important; }
.btn_login .b-personal__link.in-top-line,
.btn_login .b-personal .reg-link { display: none; }

/* корзина: убрать растяжку на всю ширину + меньше отступ у иконки */
.btn_corzin .w-100,
.btn_corzin .js-header-basket { width: auto; }
.b-header-basket__icon { margin-right: 10px; }

/* отступ между строкой поиска и нижним меню (Решения / Трубная / Полезные) */
.header_flex_right_bottom { margin-top: 12px; }

/* ===========================================================
   Раскладка шапки + ховер кнопки аналогов + мобильные фиксы (v3)
   =========================================================== */

/* ДЕСКТОП: правый блок шире (убрать большой отступ от лого);
   колонка лого = ширине левого меню каталога.
   ВАЖНО: подгони 358px под реальную ширину .left-menu, чтобы лого
   вставало ровно над левым меню. */
@media screen and (min-width: 1025px) {
    /* правый блок заполняет ширину — убирает большой отступ от лого
       и даёт меню больше места (без принудительной ширины лого, иначе
       меню/телефоны переносятся на вторую строку) */
    .header_flex_right { flex: 1 1 auto; min-width: 0; }
    /* размер логотипа на ПК */
    .header_flex > .logo { width: 241px; }
    /* меню и телефоны — строго в одну строку */
    .header_flex_right_top_flex_menu > ul { flex-wrap: nowrap; }
    .header_flex_right_top_flex_menu > ul > li > a,
    .header_flex_right_top_flex_menu > ul > li > span { white-space: nowrap; }
    .header_flex_right_top_flex_tel { flex-shrink: 0; }
    .header_flex_right_top_flex_tel p { white-space: nowrap; }
}

/* analog_btn (теперь ссылка): глобальный a:hover сайта красил текст в оранжевый
   поверх оранжевого фона ("сливается"). Фиксируем белый текст и фон,
   на наведении — подчёркивание. */
.analog_btn,
.analog_btn:link,
.analog_btn:visited,
.analog_btn:hover,
.analog_btn:focus { color: #fff; background: #D34D01; border-color: #D34D01; }
.analog_btn p,
.analog_btn:hover p { color: #fff; }
.analog_btn:hover p { text-decoration: underline; }

/* МОБИЛЬНАЯ раскладка: правый блок на всю ширину, чтобы ряд "поиск + аналоги"
   ложился ровно под лого, а не плавал/накладывался. */
@media screen and (max-width: 600px) {
    .header_flex_right { width: 100%; flex: 0 0 100%; }
    .header_flex_right_bot { width: 100%; }
    .header_flex_right_bot_flex { width: 100%; align-items: center; }
    /* выпадашку входа на мобиле не тянем вправо */
    .header_flex_right .b-personal__dropdown { left: auto; right: 0; }
}

/* МОБИЛЬНАЯ корзина: у компонента уже есть свой круг — свой бордюр НЕ добавляем
   (иначе двойная обводка), только подгоняем размер под 50px как у входа/телефона */
@media screen and (max-width: 600px) {
    .btn_corzin {
        width: auto;
        height: auto;
        padding: 0;
        border: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }
    .btn_corzin .js-header-basket {
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .btn_corzin .b-header-basket__icon { width: 50px; height: 50px; margin: 0; }
}

/* ===========================================================
   Бургер-меню: город (наложение) + показать нижнее меню; планшет (v4)
   =========================================================== */

@media screen and (max-width: 600px) {
    /* город в бургере: гасим старое абсолютное позиционирование (накладывалось
       на иконки шапки), выводим как обычный пункт по центру, список городов скрыт */
    .for_mobile_menu .b-location__wrap,
    .for_mobile_menu .b-location__wrap a,
    .for_mobile_menu .b-location__wrap .b-personal__dropdown { position: static !important; }
    .for_mobile_menu .b-location__wrap { text-align: center; margin-top: 10px; }
    .for_mobile_menu .b-location__icon { display: none; }
    .for_mobile_menu .b-location__wrap .b-personal__dropdown.js-location-form { display: none; }

    /* нижнее меню (Решения/Трубная/Полезные) в бургере — вертикально и по центру */
    .for_mobile_menu .header_flex_right_bottom {
        display: block;
        text-align: center;
        margin: 6px 0;
    }
    .for_mobile_menu .header_flex_right_bottom > ul {
        display: block;
    }
    .for_mobile_menu .header_flex_right_bottom > ul > li { padding: 6px 0; }
}

/* ПЛАНШЕТ / промежуточные разрешения (601–1280): на десктопную строку меню
   не хватает места и всё наслаивается — переключаемся на бургер.
   Верхнее меню/телефоны/город прячем (они доступны в бургере), оставляем
   лого, поиск, кнопки и нижние 3 пункта. */
@media screen and (min-width: 601px) and (max-width: 1280px) {
    .btn_for_menu { display: flex; align-items: center; justify-content: center; }
    .header_flex_right_top { display: none; }
}

/* ===========================================================
   Бургер-меню: вертикально, по центру, только верхний уровень (v5)
   (.for_mobile_menu показывается только на планшете/мобиле, на десктопе скрыт)
   =========================================================== */
.for_mobile_menu .header_flex_right_top_flex_menu,
.for_mobile_menu .header_flex_right_bottom {
    display: block;
    border: 0;
    padding: 0;
    text-align: center;
    overflow: visible;
}
.for_mobile_menu .header_flex_right_top_flex_menu > ul,
.for_mobile_menu .header_flex_right_bottom > ul { display: block; gap: 0; }
.for_mobile_menu .header_flex_right_top_flex_menu > ul > li,
.for_mobile_menu .header_flex_right_bottom > ul > li { padding: 7px 0; position: static; }
/* глубокие подменю в бургере не разворачиваем — чтобы список был компактным */
.for_mobile_menu .header_flex_right_top_flex_menu ul ul,
.for_mobile_menu .header_flex_right_bottom ul ul,
.for_mobile_menu .header-menu-item-hint { display: none; }

/* панель бургера на планшете */
@media screen and (min-width: 601px) and (max-width: 1280px) {
    .for_mobile_menu {
        width: 100%;
        background: #fff;
        padding: 10px 15px;
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
    }
}

/* ===========================================================
   Фокус поиска + отступы на промежуточных разрешениях (v6)
   =========================================================== */

/* поиск не должен подсвечиваться синим при вводе */
.form_search input:focus,
.l-header__search input:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: #AEAEAE !important;
}

/* промежуточные/десктоп: компактнее верхняя строка, чтобы влезали
   меню + телефоны + город (раньше город не влезал), и отступ перед
   нижними пунктами (Решения/Трубная/Полезные) */
@media screen and (min-width: 1025px) {
    .header_flex_right_top_flex { flex-wrap: wrap; row-gap: 6px; }
    .header_flex_right_top_flex_menu { padding-right: 16px; }
    .header_flex_right_top_flex_menu > ul { gap: 41px; }
    .header_flex_right_top_flex_tel { gap: 10px; padding: 2px 16px; }
    .header_flex_right_bottom { margin-top: 16px; }
}

/* ===========================================================
   Ровные разделители у телефонов (v7)
   border-right у блоков зависел от высоты меню/телефонов и вставал криво —
   заменяем на центрированные вертикальные линии фиксированной высоты.
   =========================================================== */
@media screen and (min-width: 1025px) {
    /* border-right стоял у соседних блоков (меню/телефоны) и получался
       несимметричным. Убираем его и вешаем ОБА разделителя на сам блок
       телефонов — слева и справа, с равными внутренними отступами. */
    .header_flex_right_top_flex_menu,
    .header_flex_right_top_flex_tel { border-right: 0 !important; }
    .header_flex_right_top_flex_tel { position: relative; padding: 2px 24px; }
    .header_flex_right_top_flex_tel::before,
    .header_flex_right_top_flex_tel::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 24px;
        background: #AEAEAE;
    }
    .header_flex_right_top_flex_tel::before { left: 0; }
    .header_flex_right_top_flex_tel::after { right: 0; }
}

/* ===========================================================
   Логотип берём из /upload/logo-new.svg (v8)
   Перебиваем background-image и в style.css, и в media.css (мобиле);
   центрирование/no-repeat и background-size: contain сохраняются.
   =========================================================== */
.logo { background-image: url(/upload/logo-new.svg) !important; }

/* ===========================================================
   Большие разрешения: шапку прижимаем к левому краю (v9)
   (контейнер .container по умолчанию центрируется margin:0 auto;
   на широких экранах это даёт большой отступ слева — выравниваем влево)
   =========================================================== */
@media screen and (min-width: 1706px) {
    .l-wrapper > header .container {
        margin-left: 0;
        margin-right: auto;
    }
}

/* ===========================================================
   График работы под телефонами + подчёркивание телефона (v10)
   =========================================================== */
/* подчёркивание номера при наведении */
.header_flex_right_top_flex_tel p a:hover { text-decoration: underline; }

/* график работы — мелким серым, отдельной строкой */
.header_flex_right_top_flex_tel .tel-schedule {
    margin: 5px 0 0;
    font-size: 13px;
    font-weight: 400;
    color: #555;
}

@media screen and (min-width: 1025px) {
    /* телефоны в строку, график — под ними */
    .header_flex_right_top_flex_tel { flex-direction: column; align-items: center; gap: 2px; }
    .header_flex_right_top_flex_tel .tel-row { display: flex; align-items: center; gap: 16px; }
    /* разделители выше — под две строки */
    .header_flex_right_top_flex_tel::before,
    .header_flex_right_top_flex_tel::after { height: 34px; }
}

/* на мобильном график работы скрываем */
@media screen and (max-width: 600px) {
    .header_flex_right_top_flex_tel .tel-schedule { display: none; }
}