/* =====================================================================
 * 1. ВЕРХНЯЯ ПЛАШКА
 * ===================================================================== */

.ho-topbar {
    background: var(--ho-dark);
    color: #fff;
    font-size: var(--ho-fs-sm);
}

.ho-topbar__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 48px;
}

.ho-topbar a { color: #fff; }
.ho-topbar a:hover { color: var(--ho-accent); }

.ho-topbar__search-btn {
    display: none;
    align-items: center;
    gap: 8px;
    min-height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: var(--ho-fs-sm);
    box-shadow: none;
}

.ho-topbar__search-btn:hover {
    background: none;
    box-shadow: none;
    transform: none;
    color: var(--ho-accent);
}

.ho-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 320px;
    max-width: 420px;
}

.ho-search input[type="search"] {
    width: 100%;
    height: 40px;
    padding: 6px 48px 6px 16px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--ho-radius-pill);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: var(--ho-fs-sm);
    transition: border-color var(--ho-dur) var(--ho-ease), background var(--ho-dur) var(--ho-ease),
        box-shadow var(--ho-dur) var(--ho-ease);
}

.ho-search input[type="search"]::placeholder { color: rgba(255, 255, 255, .62); }

.ho-search input[type="search"]:focus {
    border-color: var(--ho-accent);
    background: rgba(255, 255, 255, .14);
    box-shadow: 0 0 0 4px rgba(238, 89, 31, .18);
    outline: none;
}

.ho-search button {
    position: absolute;
    right: 5px;
    min-height: auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #ff6a2e, #ee591f);
    color: #fff;
    box-shadow: 0 4px 12px rgba(238, 89, 31, .3);
    transition: transform var(--ho-dur) var(--ho-ease), box-shadow var(--ho-dur) var(--ho-ease);
}

.ho-search button:hover {
    background: linear-gradient(180deg, #ff7a41, #f4622a);
    transform: scale(1.06);
    box-shadow: 0 6px 16px rgba(238, 89, 31, .42);
}

.ho-topbar__contacts {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}

.ho-topbar__phone,
.ho-topbar__mail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.ho-topbar__phone { font-weight: 700; }

/* Заявка (корзина) — двухстрочная «пилюля»: подпись + количество/сумма */
.ho-cart {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--ho-radius-pill);
    white-space: nowrap;
}

.ho-cart:hover { border-color: var(--ho-accent); }

.ho-cart__info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.15;
}

.ho-cart__label {
    color: rgba(255, 255, 255, .72);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ho-cart__meta {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
}

.ho-cart__total { font-weight: 700; }
.ho-cart__count { font-size: 12px; font-weight: 700; opacity: .85; }

/* =====================================================================
 * 2. ШАПКА — макет «Шапка v2» в современной подаче:
 *    корпоративные цвета (#013F8D / #4514FF / #EE591F), шрифт Play,
 *    четыре колонки 11% (логотип) / 21% (слоган) / 50% (меню) / 18% (кнопка)
 * ===================================================================== */

.ho-header {
    --ho-bar-bg: linear-gradient(180deg, #0d63c8 0%, #0a51ab 60%, #08489b 100%);
    --ho-bar-bg-alt: linear-gradient(180deg, #6b3dff 0%, #4b1cff 60%, #3a0fe0 100%);
    --ho-glass: rgba(10, 81, 171, .9);

    position: sticky;
    top: 0;
    z-index: 50;
}

/* Фирменная акцентная линия сверху — «подпись» шапки */
.ho-header::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--ho-accent) 0%, #f2814a 28%, #0d63c8 100%);
}

.ho-header__bar {
    position: relative;
    background: var(--ho-bar-bg);
    border-bottom: 1px solid rgba(255, 255, 255, .45);
    transition: background var(--ho-dur) var(--ho-ease), box-shadow var(--ho-dur) var(--ho-ease);
}

.ho-header__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    transition: min-height var(--ho-dur) var(--ho-ease);
}

/* Компактное «стеклянное» состояние при прокрутке (класс ставит main.js) */
.ho-header.is-scrolled .ho-header__bar {
    background: var(--ho-glass);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 12px 32px rgba(0, 26, 61, .3);
}

.ho-header.is-scrolled .ho-header__inner { min-height: 58px; }
.ho-header.is-scrolled .ho-header__logo .custom-logo { max-height: 42px; }
.ho-header.is-scrolled .ho-header__price { min-height: 40px; }

/* Кнопка мобильного меню */
.ho-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transition: background var(--ho-dur) var(--ho-ease), border-color var(--ho-dur) var(--ho-ease);
}

.ho-burger:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
    transform: none;
    box-shadow: none;
}

.ho-burger__bars {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
}

.ho-burger__bars i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--ho-dur) var(--ho-ease), opacity .18s linear, width var(--ho-dur) var(--ho-ease);
}

.ho-burger__bars i:nth-child(1) { top: 0; }
.ho-burger__bars i:nth-child(2) { top: 6px; width: 74%; }
.ho-burger__bars i:nth-child(3) { top: 12px; }

.ho-burger[aria-expanded="true"] .ho-burger__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ho-burger[aria-expanded="true"] .ho-burger__bars i:nth-child(2) { opacity: 0; }
.ho-burger[aria-expanded="true"] .ho-burger__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 1. Логотип — своя ширина, слоган в полосе больше не занимает место */
.ho-header__logo {
    flex: 0 0 auto;
    max-width: 210px;
    min-width: 0;
    padding-left: 10px;
}

.ho-header__logo .custom-logo-link { display: block; }

.ho-header__logo .custom-logo {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 52px;
    transition: transform var(--ho-dur) var(--ho-ease), max-height var(--ho-dur) var(--ho-ease);
}

.ho-header__logo .custom-logo-link:hover .custom-logo { transform: scale(1.03); }

/* 2. Поиск по артикулу — главный инструмент закупщика, в основной полосе */
.ho-search--bar {
    flex: 0 1 250px;
    min-width: 150px;
    max-width: 250px;
    margin-left: 6px;
}

.ho-search--bar input[type="search"] {
    height: 38px;
    padding: 6px 44px 6px 14px;
    font-size: 13.5px;
}

/* 3. Заявка (бывшая «Корзина») — рядом с кнопкой цен */
.ho-header__cart { flex: 0 0 auto; }

.ho-header__cart .ho-cart {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
    transition: border-color var(--ho-dur) var(--ho-ease), background var(--ho-dur) var(--ho-ease),
        transform var(--ho-dur) var(--ho-ease);
}

.ho-header__cart .ho-cart:hover {
    border-color: var(--ho-accent);
    background: rgba(255, 255, 255, .16);
    transform: translateY(-1px);
}

/* 4. Кнопка «Запросить цены» — единственный главный CTA шапки */
.ho-header__actions {
    flex: 0 0 auto;
    margin-left: 4px;
}

.ho-header__price {
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: var(--ho-accent-strong);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .12));
    font-size: 13px;
    letter-spacing: .04em;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(238, 89, 31, .28);
    transition: transform var(--ho-dur) var(--ho-ease), box-shadow var(--ho-dur) var(--ho-ease),
        filter var(--ho-dur) var(--ho-ease);
}

.ho-header__price:hover {
    background-color: var(--ho-accent-hover);
    box-shadow: 0 10px 26px rgba(238, 89, 31, .42);
    filter: saturate(108%);
    transform: translateY(-2px);
}

.ho-header__price:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(238, 89, 31, .3); }

.ho-header__price:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .85);
    outline-offset: 2px;
}

/* Служебная строка: маркеры доверия слева, прайс/почта/контакты/телефон справа.
   Светлее основной полосы — шапка в целом выглядит воздушнее */
.ho-utility {
    background: linear-gradient(180deg, #1470d8 0%, #0d5cb8 100%);
    padding: 10px 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 10px rgba(8, 72, 155, .18);
}

.ho-utility__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
}

/* Маркеры доверия: почему закупщику спокойно с этим поставщиком */
.ho-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ho-trust li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .01em;
    white-space: nowrap;
}

.ho-trust .ho-icon { flex: 0 0 auto; color: #fff; opacity: .82; }

.ho-utility__contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-left: auto;
}

/* Прайс-лист: самый частый файл-запрос снабженца, поэтому с «пунктиром»-кнопкой */
.ho-utility__price {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px dashed rgba(255, 255, 255, .55);
    border-radius: var(--ho-radius-pill);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color var(--ho-dur) var(--ho-ease), background var(--ho-dur) var(--ho-ease),
        transform var(--ho-dur) var(--ho-ease);
}

.ho-utility__price .ho-icon { color: #fff; }

.ho-utility__price:hover {
    border-color: #fff;
    border-style: solid;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.ho-utility__link {
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--ho-dur) var(--ho-ease);
}

.ho-utility__link:hover { color: #fff; text-decoration: underline; }

.ho-utility__phone,
.ho-utility__mail {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: var(--ho-fs-sm);
    font-weight: 700;
    letter-spacing: .01em;
    transition: color var(--ho-dur) var(--ho-ease);
}

/* Телефон — самый заметный элемент строки: закупщик должен видеть его сразу */
.ho-utility__phone {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .015em;
}

.ho-utility__mail { font-size: 13px; font-weight: 600; opacity: .95; }

/* Иконки — белые: на посветлевшей строке оранжевый давал контраст 1.4:1.
   Фирменный акцент остаётся в подчёркивании при наведении. */
.ho-utility__phone svg,
.ho-utility__mail svg {
    color: #fff;
    transition: transform var(--ho-dur) var(--ho-ease);
}

.ho-utility__phone:hover svg,
.ho-utility__mail:hover svg { transform: scale(1.12); }

.ho-utility__phone:hover,
.ho-utility__mail:hover { color: #fff; text-decoration: none; }

/* Оранжевая линия, «выезжающая» при наведении */
.ho-utility__phone::after,
.ho-utility__mail::after {
    content: "";
    position: absolute;
    left: 26px;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--ho-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--ho-dur) var(--ho-ease);
}

.ho-utility__phone:hover::after,
.ho-utility__mail:hover::after { transform: scaleX(1); }

/* Мега-панель каталога: светлая карточка по ширине контейнера.
   Тёмная логотипная полоса + светлая панель — «серьёзно» и не тяжело */
.ho-header__catalog {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 0 var(--ho-gutter);
}

.ho-catalog-panel {
    max-width: calc(var(--ho-container) - var(--ho-gutter) * 2);
    margin: 10px auto 0;
    padding: 22px 26px 16px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(8, 45, 100, .22);
    animation: ho-menu-in .2s var(--ho-ease);
    /* На низких экранах панель прокручивается, а не уезжает за край */
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ho-catalog-panel__groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 32px;
}

.ho-catalog-panel__group { min-width: 0; }

.ho-catalog-panel__parent {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--ho-dark);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--ho-dur) var(--ho-ease);
}

/* Оранжевая «засечка» категории — фирменный акцент */
.ho-catalog-panel__parent::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--ho-accent);
}

.ho-catalog-panel__parent:hover { color: var(--ho-blue); }

.ho-catalog-panel__list {
    margin: 0;
    padding: 0 0 0 12px;
    list-style: none;
    border-left: 1px solid var(--ho-border-light);
}

.ho-catalog-panel__list a {
    display: block;
    padding: 4px 0;
    color: var(--ho-text);
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
    transition: color var(--ho-dur) var(--ho-ease), transform var(--ho-dur) var(--ho-ease);
}

.ho-catalog-panel__list a:hover {
    color: var(--ho-accent);
    transform: translateX(3px);
}

.ho-catalog-panel__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ho-border-light);
}

/* Мини-CTA панели: закупщик с нестандартом сразу видит выход на изготовление */
.ho-catalog-panel__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid rgba(238, 89, 31, .35);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(238, 89, 31, .1), rgba(238, 89, 31, .03));
    color: var(--ho-dark);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--ho-dur) var(--ho-ease), background var(--ho-dur) var(--ho-ease);
}

.ho-catalog-panel__cta .ho-icon { flex: 0 0 auto; color: var(--ho-accent); }

.ho-catalog-panel__cta .ho-icon:last-child { transition: transform var(--ho-dur) var(--ho-ease); }

.ho-catalog-panel__cta:hover {
    border-color: var(--ho-accent);
    background: rgba(238, 89, 31, .14);
    color: var(--ho-dark);
    text-decoration: none;
}

.ho-catalog-panel__cta:hover .ho-icon:last-child { transform: translateX(3px); }

.ho-catalog-panel__foot-links {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.ho-catalog-panel__price {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ho-text);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--ho-dur) var(--ho-ease);
}

.ho-catalog-panel__price .ho-icon { color: var(--ho-blue); }
.ho-catalog-panel__price:hover { color: var(--ho-accent); }

.ho-catalog-panel__all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ho-blue);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--ho-dur) var(--ho-ease);
}

.ho-catalog-panel__all:hover { color: var(--ho-accent); }

.ho-catalog-panel__all .ho-icon { transition: transform var(--ho-dur) var(--ho-ease); }
.ho-catalog-panel__all:hover .ho-icon { transform: translateX(3px); }


.ho-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.ho-logo__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 3px;
    background: var(--ho-accent-strong);
    color: #fff;
    font-weight: 700;
    letter-spacing: .04em;
}

.ho-logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.ho-logo__text strong { font-size: 20px; color: #fff; }
.ho-logo__text small {
    font-size: 11px;
    color: rgba(255, 255, 255, .7);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Кнопка «Каталог» — светлая пилюля на синей полосе, при раскрытии инвертируется */
.ho-catalog-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--ho-dur) var(--ho-ease), color var(--ho-dur) var(--ho-ease),
        border-color var(--ho-dur) var(--ho-ease);
}

.ho-catalog-btn:hover {
    background: rgba(255, 255, 255, .24);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
    transform: none;
    box-shadow: none;
}

.ho-catalog-btn[aria-expanded="true"] {
    background: #fff;
    border-color: #fff;
    color: var(--ho-blue);
}

.ho-catalog-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .85);
    outline-offset: 2px;
}

.ho-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.ho-nav__list {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ho-nav__list > li { position: relative; }

.ho-nav__list > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.2;
    white-space: nowrap;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background var(--ho-dur) var(--ho-ease), color var(--ho-dur) var(--ho-ease),
        transform var(--ho-dur) var(--ho-ease);
}

/* Тонкая оранжевая линия, «выезжающая» под пунктом */
.ho-nav__list > li > a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--ho-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--ho-dur) var(--ho-ease);
}

/* Наведение — светлая подложка (шапка остаётся воздушной),
   активный пункт — ярко-синий (#4514FF) */
.ho-nav__list > li > a:hover,
.ho-nav__list > li:hover > a {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    transform: translateY(-1px);
}

.ho-nav__list > li > a:hover::after,
.ho-nav__list > li:hover > a::after { transform: scaleX(1); }

.ho-nav__list > li.current-menu-item > a,
.ho-nav__list > li.current-menu-ancestor > a {
    background: var(--ho-blue-bright);
    color: #fff;
    box-shadow: 0 6px 16px rgba(69, 20, 255, .35);
}

.ho-nav__list > li.current-menu-item > a::after,
.ho-nav__list > li.current-menu-ancestor > a::after { transform: scaleX(0); }

.ho-nav__list > li > a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .8);
    outline-offset: 2px;
}

/* Выпадающее меню: светлая карточка с мягкой анимацией появления */
.ho-nav__list .sub-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    display: none;
    min-width: 250px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 48px rgba(1, 26, 61, .22);
}

.ho-nav__list > li:hover > .sub-menu,
.ho-nav__list > li:focus-within > .sub-menu {
    display: block;
    animation: ho-menu-in .18s var(--ho-ease);
}

@keyframes ho-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.ho-nav__list .sub-menu a {
    display: block;
    padding: 10px 14px;
    border-bottom: 0;
    border-radius: 8px;
    color: #1d1d1b;
    font-size: 15px;
    font-weight: 500;
    text-transform: none;
    transition: background var(--ho-dur) var(--ho-ease), color var(--ho-dur) var(--ho-ease),
        padding-left var(--ho-dur) var(--ho-ease);
}

.ho-nav__list .sub-menu a:hover {
    background: rgba(1, 63, 141, .07);
    color: var(--ho-blue);
    padding-left: 18px;
}

.ho-nav__list .sub-menu > li + li { border-top: 1px solid var(--ho-border-light); }
.ho-nav__list .sub-menu > li:last-child > a { border-bottom: 0; }

/* Подменю каталога — широкая панель в несколько колонок */
.ho-nav__list .sub-menu--catalog {
    left: 0;
    right: auto;
    width: min(920px, 92vw);
    padding: 12px 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 20px;
}

.ho-nav__list > li:hover > .sub-menu--catalog,
.ho-nav__list > li:focus-within > .sub-menu--catalog { display: grid; }

.ho-nav__list .sub-menu--catalog > li > a {
    padding: 8px 0;
    border-bottom: 0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 15px;
}

.ho-nav__list .sub-menu--catalog > li > a:hover { background: transparent; color: var(--ho-blue-bright); }

.ho-nav__list .sub-menu--catalog .sub-menu {
    position: static;
    display: block;
    min-width: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.ho-nav__list .sub-menu--catalog .sub-menu a {
    padding: 5px 0;
    border-bottom: 0;
    color: #1d1d1b;
    font-size: 14px;
}

.ho-nav__list .sub-menu--catalog .sub-menu a:hover {
    background: transparent;
    color: var(--ho-blue-bright);
    text-decoration: underline;
}

.ho-header__call { min-height: 44px; font-size: var(--ho-fs-sm); }

/* =====================================================================
 * 3. МЕГА-МЕНЮ КАТАЛОГА
 * ===================================================================== */

.ho-mm {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 40;
    padding: 28px 0;
    background: #fff;
    border-top: 1px solid var(--ho-border);
    border-bottom: 1px solid var(--ho-border);
    box-shadow: var(--ho-shadow-md);
}

.ho-mm[hidden] { display: none; }

.ho-mm__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ho-mm__col { margin: 0; }

.ho-mm__title {
    display: block;
    margin-bottom: 10px;
    color: var(--ho-dark);
    font-size: var(--ho-fs-md);
    font-weight: 700;
}

.ho-mm__title:hover { color: var(--ho-accent); }

.ho-mm__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ho-mm__list a {
    display: block;
    padding: 5px 0;
    color: var(--ho-muted);
    font-size: var(--ho-fs-sm);
}

.ho-mm__list a:hover { color: var(--ho-accent); }

/* =====================================================================
 * 4. МОБИЛЬНОЕ МЕНЮ
 * ===================================================================== */

.ho-mobile {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 90;
    width: min(88vw, 400px);
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 24px 0 60px rgba(1, 26, 61, .28);
    overflow-y: auto;
    animation: ho-panel-in .26s var(--ho-ease);
}

/* Затемнение страницы под панелью */
.ho-mobile::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(1, 20, 46, .48);
    backdrop-filter: blur(2px);
}

.ho-mobile[hidden] { display: none; }

@keyframes ho-panel-in {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.ho-mobile__head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--ho-bar-bg);
    color: #fff;
}

.ho-mobile__head strong {
    font-size: var(--ho-fs-md);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.ho-mobile__close {
    width: 40px;
    height: 40px;
    min-height: auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.ho-mobile__close:hover {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
    transform: none;
    box-shadow: none;
}

.ho-mobile__body { padding: 12px 20px 20px; }

.ho-mobile__list,
.ho-mobile-menu__list {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.ho-mobile__list a,
.ho-mobile-menu__list a {
    display: block;
    padding: 14px 12px;
    border-radius: 10px;
    border-bottom: 0;
    color: var(--ho-dark);
    font-size: var(--ho-fs-md);
    font-weight: 500;
    transition: background var(--ho-dur) var(--ho-ease), color var(--ho-dur) var(--ho-ease),
        padding-left var(--ho-dur) var(--ho-ease);
}

.ho-mobile__list a:hover,
.ho-mobile-menu__list a:hover {
    background: rgba(1, 63, 141, .06);
    color: var(--ho-blue);
    padding-left: 18px;
}

.ho-mobile-menu__sub a {
    padding: 10px 12px 10px 28px;
    color: var(--ho-muted);
    font-size: var(--ho-fs-sm);
  }

.ho-mobile__title {
    margin: 18px 0 8px;
    padding-top: 14px;
    border-top: 1px solid var(--ho-border-light);
    font-size: var(--ho-fs-sm);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ho-muted);
}

.ho-mobile__contacts {
    margin-top: auto;
    padding: 20px;
    border-top: 1px solid var(--ho-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

/* =====================================================================
 * 5. ПОДВАЛ
 * ===================================================================== */

.ho-footer { margin-top: auto; background: var(--ho-dark); color: rgba(255, 255, 255, .75); }

.ho-footer__top { border-bottom: 1px solid rgba(255, 255, 255, .12); padding: 24px 0; }

.ho-footer__contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
}

.ho-footer__label { margin: 0; color: rgba(255, 255, 255, .6); }

.ho-footer__phone,
.ho-footer__mail {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: var(--ho-fs-md);
    font-weight: 700;
}

.ho-footer__phone:hover,
.ho-footer__mail:hover { color: var(--ho-accent); }

.ho-footer__main { padding: 40px 0; }

.ho-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 32px;
}

.ho-footer__col { min-width: 0; }

.ho-footer__title {
    margin: 0 0 14px;
    color: #fff;
    font-size: var(--ho-fs-md);
}

.ho-footer .ho-logo { color: #fff; }
.ho-footer .ho-logo__text small { color: rgba(255, 255, 255, .55); }

.ho-footer__text { margin: 16px 0; font-size: var(--ho-fs-sm); }

.ho-footer__address {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--ho-fs-sm);
    margin: 0;
}

.ho-footer__address svg { flex: 0 0 auto; margin-top: 2px; color: var(--ho-accent); }

.ho-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ho-footer__list a {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    color: rgba(255, 255, 255, .75);
    font-size: var(--ho-fs-sm);
}

.ho-footer__list a:hover { color: var(--ho-accent); }
.ho-footer__count { color: rgba(255, 255, 255, .58); }

.ho-footer__subscribe { margin-top: 18px; font-size: var(--ho-fs-sm); }

.ho-subscribe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.ho-subscribe input[type="email"] {
    flex: 1 1 160px;
    height: 44px;
    padding: 10px 14px;
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.ho-subscribe input[type="email"]::placeholder { color: rgba(255, 255, 255, .55); }

.ho-subscribe button { min-height: 44px; padding: 0 18px; }

.ho-consent--compact { font-size: 11px; color: rgba(255, 255, 255, .55); }
.ho-consent--compact span { line-height: 1.35; }

.ho-footer__bottom {
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: var(--ho-fs-xs);
}

.ho-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}

.ho-footer__copy { margin: 0; }

.ho-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ho-footer__legal a,
.ho-footer__extra a {
    color: rgba(255, 255, 255, .6);
    text-decoration: underline;
}

.ho-footer__legal a:hover,
.ho-footer__extra a:hover { color: var(--ho-accent); }

.ho-footer__extra {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-left: auto;
    color: rgba(255, 255, 255, .58);
}

/* =====================================================================
 * 6. МОДАЛЬНОЕ ОКНО, COOKIE-ПЛАШКА, ЛИПКАЯ ПОЛОСА ДЕЙСТВИЙ
 * ===================================================================== */

.ho-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ho-modal[hidden] { display: none; }

.ho-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(29, 29, 27, .55);
}

.ho-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px;
    border-radius: var(--ho-radius-lg);
    background: #fff;
    box-shadow: var(--ho-shadow-md);
}

.ho-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    min-height: auto;
    padding: 0;
    border: 1px solid var(--ho-border);
    background: #fff;
    color: var(--ho-dark);
}

.ho-modal__close:hover {
    background: var(--ho-bg-soft);
    color: var(--ho-accent);
    transform: none;
    box-shadow: none;
}

.ho-cookie {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 24px;
    width: min(680px, calc(100% - 40px));
    padding: 20px 24px;
    border-radius: var(--ho-radius-lg);
    background: #fff;
    border: 1px solid var(--ho-border);
    box-shadow: var(--ho-shadow-md);
}

.ho-cookie[hidden] { display: none; }
.ho-cookie__text p { margin: 6px 0 0; font-size: var(--ho-fs-xs); color: var(--ho-muted); }
.ho-cookie__text a { color: var(--ho-link-legal); text-decoration: underline; }

/* Прайс-лист в мобильном меню: тот же быстрый файл-запрос, что и в шапке */
.ho-mobile__price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px dashed var(--ho-border);
    border-radius: var(--ho-radius);
    color: var(--ho-blue);
    font-size: var(--ho-fs-sm);
    font-weight: 700;
    text-decoration: none;
    transition: border-color var(--ho-dur) var(--ho-ease), color var(--ho-dur) var(--ho-ease);
}

.ho-mobile__price:hover { border-color: var(--ho-accent); color: var(--ho-accent); }

/* Липкая полоса действий (телефоны): главные кнопки всегда под рукой.
   Показывается в мобильной медиа-выборке — см. responsive.css */
.ho-mobile-cta { display: none; }