/*
 * Шапка группы компаний ЯМЦК: верхняя полоса, меню, телефон, бургер,
 * окно заявки. Подключается на всех страницах сайта ПОСЛЕ остальных CSS.
 * Все классы с приставкой gh-, чтобы не пересекаться со стилями страниц.
 * Шапка фиксированная: её высота задаётся в --header-height, по этой
 * переменной страницы уже делают отступ сверху (styles.css).
 */
:root {
    --header-height: 106px;
    --gh-primary: #1E3A5F;
    --gh-primary-dark: #152947;
    --gh-dark: #0F172A;
    --gh-dark-2: #1E293B;
    --gh-light: #F1F5F9;
    --gh-light-2: #E2E8F0;
    --gh-accent: #D97706;
    --gh-accent-2: #B45309;
    --gh-muted: #64748B;
}

.gh, .gh *, .gh-modal, .gh-modal * { box-sizing: border-box; }

.gh {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    color: var(--gh-dark);
    box-shadow: 0 2px 12px rgba(15, 23, 42, .06);
}
.gh a { color: inherit; text-decoration: none; }
.gh-wrap { width: min(calc(100% - 32px), 1240px); margin: 0 auto; }

/* верхняя полоса */
.gh-top { background: var(--gh-dark); color: #CBD5E1; font-size: 12.5px; height: 32px; overflow: hidden; }
.gh-top .gh-wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 32px; }
.gh-top b { color: #fff; font-weight: 600; }
.gh-top-r { display: flex; gap: 18px; }

/* основная полоса */
.gh-bar { border-bottom: 1px solid var(--gh-light-2); }
.gh-bar .gh-wrap { display: flex; align-items: center; gap: 22px; height: 73px; }
.gh-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.gh-logo img { height: 40px; width: auto; display: block; }
.gh-logo small { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gh-muted); line-height: 1.2; }
.gh-menu { display: flex; gap: 4px; flex: 1; justify-content: center; }
.gh-menu a { padding: 10px 12px; font-weight: 600; font-size: 13.5px; color: var(--gh-dark-2); border-radius: 6px; white-space: nowrap; }
.gh-menu a:hover { background: var(--gh-light); }
.gh-menu a.gh-on { color: var(--gh-primary); box-shadow: inset 0 -3px 0 var(--gh-accent); }
.gh-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: auto; }
.gh-phone { font-weight: 800; font-size: 16px; color: var(--gh-primary) !important; white-space: nowrap; }
.gh-phone small { display: block; font-weight: 500; font-size: 11px; color: var(--gh-muted); }

.gh-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; border-radius: 8px; padding: 13px 20px;
    font: 700 14px 'Montserrat', sans-serif; line-height: 1.2;
    cursor: pointer; transition: background .2s; text-decoration: none;
    background: var(--gh-accent); color: #fff !important;
}
.gh-btn:hover { background: var(--gh-accent-2); }
.gh-btn:disabled { opacity: .7; cursor: default; }

.gh-burger {
    display: none; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--gh-light-2); border-radius: 8px;
    width: 44px; height: 44px; font-size: 20px; color: var(--gh-primary); cursor: pointer; padding: 0;
}
/* подменю направления: второй ряд, свой набор пунктов у каждого раздела */
:root:has(.gh-sub) { --header-height: 150px; }
.gh-sub { background: var(--gh-light); border-bottom: 1px solid var(--gh-light-2); }
.gh-sub .gh-wrap { display: flex; gap: 2px; height: 43px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gh-sub .gh-wrap::-webkit-scrollbar { display: none; }
.gh-sub a {
    flex-shrink: 0; display: inline-flex; align-items: center; padding: 0 12px;
    font-weight: 600; font-size: 13px; color: var(--gh-muted); white-space: nowrap;
    border-bottom: 3px solid transparent; border-top: 3px solid transparent;
}
.gh-sub a:hover { color: var(--gh-primary); }
.gh-sub a.gh-on { color: var(--gh-primary); border-bottom-color: var(--gh-accent); }
/* первые экраны разделов с отступом под шапку числом — сдвигаем на высоту подменю */
html:has(.gh-sub) .catalog-hero { padding-top: calc(var(--header-height) + 24px); }
.gh-sub a[hidden] { display: none; }

.gh-mnav { display: none; background: #fff; border-top: 1px solid var(--gh-light-2); max-height: calc(100vh - var(--header-height)); overflow-y: auto; box-shadow: 0 12px 24px rgba(15, 23, 42, .12); }
.gh-mnav a { display: block; padding: 14px 16px; font-weight: 600; border-bottom: 1px solid var(--gh-light); }
.gh-mnav a.gh-on { color: var(--gh-primary); }
.gh-mnav.gh-open { display: block; }

/* окно заявки */
.gh-modal {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(15, 23, 42, .6);
    display: none; align-items: center; justify-content: center; padding: 16px;
    font-family: 'Montserrat', sans-serif; line-height: 1.4; color: var(--gh-dark);
}
.gh-modal.gh-open { display: flex; }
.gh-form { position: relative; width: min(460px, 100%); background: #fff; border-radius: 14px; padding: 26px; text-align: left; }
.gh-form h3 { font: 800 24px 'Montserrat', sans-serif; color: var(--gh-primary); margin: 0; letter-spacing: -.015em; }
.gh-x { position: absolute; right: 12px; top: 8px; background: none; border: none; font-size: 28px; line-height: 1; color: var(--gh-muted); cursor: pointer; padding: 4px; }
.gh-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; }
.gh-tabs button {
    border: 1px solid var(--gh-light-2); background: var(--gh-light); border-radius: 999px;
    padding: 8px 13px; font: 600 13px 'Montserrat', sans-serif; color: var(--gh-dark-2); cursor: pointer;
}
.gh-tabs button.gh-on { background: var(--gh-primary); border-color: var(--gh-primary); color: #fff; }
.gh-form input, .gh-form textarea {
    display: block; width: 100%; border: 1px solid var(--gh-light-2); border-radius: 8px;
    padding: 13px 14px; font: 500 14px 'Montserrat', sans-serif; margin: 0 0 10px; background: #fff; color: var(--gh-dark);
}
.gh-form textarea { height: 84px; resize: vertical; }
.gh-form .gh-btn { width: 100%; height: 50px; }
.gh-fine { font-size: 11.5px; color: var(--gh-muted); margin: 10px 0 0; }
.gh-fine a { color: var(--gh-primary); text-decoration: underline; }
/* галочка согласия на обработку персональных данных (обязательная) */
.gh-agree { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 12px; font-size: 12.5px; line-height: 1.4; color: var(--gh-muted); cursor: pointer; text-align: left; }
.gh-agree input[type="checkbox"] { flex: none; width: 18px; height: 18px; min-width: 0; margin: 0; padding: 0; accent-color: var(--gh-primary); cursor: pointer; }
.gh-agree a { color: inherit; text-decoration: underline; }
.quick .gh-agree { flex: 1 1 100%; margin: 0; color: #fff; }

/* окно «Куда позвонить?» */
.gh-call-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin-top: 10px; padding: 14px 16px; border: 1px solid var(--gh-light-2); border-radius: 10px;
    color: var(--gh-dark); text-decoration: none; font-weight: 600; font-size: 14px;
}
.gh-call-row b { color: var(--gh-primary); font-weight: 800; white-space: nowrap; }
.gh-call-row:hover { border-color: var(--gh-primary); background: var(--gh-light); }
.gh-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Блоки, где отступ под шапку был задан числом, а не через --header-height */
.legal-breadcrumbs { padding-top: calc(var(--header-height) + 20px); }
.product-breadcrumbs { padding-top: calc(var(--header-height) + 16px); }
.catalog-filters, .product-gallery { top: calc(var(--header-height) + 12px); }

@media (max-width: 1080px) {
    .gh-menu, .gh-phone { display: none; }
    .gh-burger { display: inline-flex; }
}
@media (max-width: 860px) {
    :root { --header-height: 64px; }
    :root:has(.gh-sub) { --header-height: 108px; }
    .gh-sub .gh-wrap { width: 100%; padding: 0 8px; }
    .gh-top { display: none; }
    .gh-bar .gh-wrap { height: 63px; gap: 12px; }
    .gh-logo img { height: 34px; }
    .gh-cta .gh-btn { padding: 11px 14px; font-size: 13px; }
}
@media (max-width: 420px) {
    .gh-logo small { display: none; }
}