/* =====================================================================
   ШАПКА МОСБЕТОНТОРГ v2  (интегрировано в Bitrix-шаблон tmpl)
   Все правила скоупированы под .hd-header / классы .hd-* — чтобы не
   влиять на остальные страницы сайта. Глобальные :root-переменные
   нужны только для самой шапки.
   ===================================================================== */
:root{
--hd-height:130px; /* высота шапки (38 тёмная + 92 основная: лого 72 + отступы 2×10); используется для sticky-смещений в контенте */
--hd-bg:#F5F4F0;--white:#FFF;--dark:#151515;--text:#2A2A2A;--muted:#6B6B6B;--light:#9C9C9C;
--accent:#E25A1B;--accent-h:#C44A12;--accent-bg:#FFF4ED;--accent-bg2:#FFEADB;
--logo-blue:#19577D;--blue-bg:#EEF4FF;
--green:#15803D;
--border:#E2E0DB;--border-l:#EEECE8;
--r:10px;--rl:14px;--rxl:20px;
--sh:0 1px 3px rgba(0,0,0,.05);--shm:0 4px 16px rgba(0,0,0,.06);--shl:0 8px 32px rgba(0,0,0,.07);
--wa:#25D366;--tg:#229ED9;
}
/* Скоупированный сброс + базовый шрифт только внутри шапки */
.hd-header,.hd-header *{margin:0;padding:0;box-sizing:border-box}
.hd-header{font-family:'Onest',sans-serif;color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased}
/* Гасим bootstrap-подчёркивание ссылок на hover/focus внутри шапки (телефон, почта и т.д.) */
.hd-header a:hover,.hd-header a:focus{text-decoration:none}
.hd-w{max-width:1400px;margin:0 auto;padding:0 20px}

/* ---------- ВЕРХНЯЯ ТЁМНАЯ ПОЛОСА ---------- */
.hd-top{background:var(--dark);color:rgba(255,255,255,.65);font-size:12.5px}
.hd-top .hd-w{display:flex;align-items:center;justify-content:space-between;min-height:38px;gap:16px}
.hd-top-trust{display:flex;align-items:center;gap:18px;white-space:nowrap;overflow:hidden}
.hd-top-trust b{color:#fff;font-weight:600}
.hd-top-right{display:flex;align-items:center;gap:14px;white-space:nowrap}
.hd-top-right a{color:rgba(255,255,255,.65);text-decoration:none;transition:color .2s;display:inline-flex;align-items:center;gap:6px}
.hd-top-right a:hover{color:#fff}
.hd-msg-ico{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:transform .15s}
.hd-msg-ico:hover{transform:scale(1.12)}
.hd-msg-ico svg{width:15px;height:15px;fill:#fff}
.hd-msg-ico.wa{background:var(--wa)}.hd-msg-ico.tg{background:var(--tg)}
.hd-247{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:600}
.hd-247 .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(21,128,61,.25);animation:hd-pulse 2s infinite}
@keyframes hd-pulse{0%,100%{box-shadow:0 0 0 3px rgba(21,128,61,.25)}50%{box-shadow:0 0 0 5px rgba(21,128,61,.12)}}
@media(max-width:900px){.hd-top-trust span:nth-child(2){display:none}}
@media(max-width:805px){.hd-top-trust span:nth-child(3){display:none}}
@media(max-width:640px){.hd-mail{display:none!important}}
@media(max-width:480px){.hd-top-trust{display:none}.hd-top .hd-w{justify-content:center}}

/* Sticky на весь хедер: тёмная полоса + основная полоса прилипают вместе. */
.hd-header{position:sticky;top:0;z-index:1100}

/* ---------- ОСНОВНАЯ ПОЛОСА ---------- */
.hd-main{background:var(--white);border-bottom:1px solid var(--border-l);transition:box-shadow .25s}
.hd-main.is-stuck{box-shadow:var(--shm)}
.hd-main .hd-w{display:flex;align-items:center;gap:20px;padding-top:10px;padding-bottom:10px}

/* Логотип + города под ним */
.hd-logo-wrap{flex-shrink:0;display:flex;align-items:center;gap:14px}
.hd-logo{display:block;text-decoration:none;line-height:0}
.hd-logo img{height:72px;width:auto;display:block}
.hd-city-trigger{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--muted);background:none;border:none;cursor:pointer;font-family:inherit;padding:0}
.hd-city-trigger b{color:var(--logo-blue);font-weight:600;border-bottom:1px dashed var(--logo-blue)}
.hd-city-trigger .hd-car{width:8px;height:8px;border-right:1.6px solid var(--logo-blue);border-bottom:1.6px solid var(--logo-blue);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.hd-city-trigger:hover b{color:var(--accent);border-color:var(--accent)}
.hd-city-trigger:hover .hd-car{border-color:var(--accent)}
.hd-city-trigger.open .hd-car{transform:rotate(225deg) translateY(-1px)}

/* Панель городов (60 поддоменов) */
.hd-cities{position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--border-l);box-shadow:var(--shl);z-index:1150;display:none}
.hd-cities.open{display:block}
.hd-cities-in{max-width:1400px;margin:0 auto;padding:22px 20px 26px}
.hd-cities-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.hd-cities-head .t{font-size:16px;font-weight:800;color:var(--dark);letter-spacing:-.2px}
.hd-cities-head .d{font-size:12.5px;color:var(--light)}
.hd-cities-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px 16px;max-height:300px;overflow-y:auto}
@media(max-width:1000px){.hd-cities-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){.hd-cities-grid{grid-template-columns:repeat(2,1fr)}}
.hd-cities-grid a{font-size:13px;color:var(--text);text-decoration:none;padding:5px 8px;border-radius:7px;transition:all .12s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-cities-grid a:hover{background:var(--accent-bg);color:var(--accent)}
.hd-cities-grid a.msk{font-weight:700;color:var(--logo-blue)}

/* Навигация */
.hd-nav{display:flex;align-items:center;gap:0;flex:1;justify-content:center;list-style:none}
.hd-nav>li{position:relative}
.hd-nav>li>a{display:flex;align-items:center;gap:5px;padding:9px 12px;font-size:14px;font-weight:600;color:var(--text);text-decoration:none;border-radius:var(--r);transition:all .15s;white-space:nowrap}
.hd-nav>li>a:hover{background:var(--accent-bg);color:var(--accent)}
.hd-nav>li>a .hd-car{width:9px;height:9px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s;opacity:.55}
.hd-nav>li:hover>a .hd-car,.hd-nav>li.open>a .hd-car{transform:rotate(225deg) translateY(-1px)}

/* Выпадающие меню */
.hd-dd{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(6px);background:var(--white);border:1px solid var(--border-l);border-radius:var(--rl);box-shadow:var(--shl);padding:10px;opacity:0;visibility:hidden;transition:all .18s;z-index:1200;min-width:250px}
.hd-nav>li:hover .hd-dd,.hd-nav>li.open .hd-dd,.hd-nav>li:focus-within .hd-dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.hd-dd a{display:block;padding:8px 14px;font-size:13.5px;font-weight:500;color:var(--text);text-decoration:none;border-radius:8px;transition:all .12s;line-height:1.35}
.hd-dd a:hover{background:var(--accent-bg);color:var(--accent)}

/* Мега-меню каталога */
.hd-mega{min-width:700px;display:grid;grid-template-columns:1.1fr 1.1fr 1fr;gap:6px 14px;padding:16px}
.hd-mega-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--light);padding:0 14px 7px}
.hd-mega-col a{padding:7px 14px}
.hd-mega-price{float:right;font-size:12px;font-weight:700;color:var(--muted)}
.hd-mega-col a:hover .hd-mega-price{color:var(--accent)}
.hd-mega-all{color:var(--accent)!important;font-weight:700!important}
.hd-mega-promo{grid-column:1/-1;margin-top:8px;background:var(--accent-bg);border-radius:var(--r);padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none}
.hd-mega-promo .t{font-size:13px;font-weight:700;color:var(--dark)}
.hd-mega-promo .t small{display:block;font-weight:400;font-size:11.5px;color:var(--muted)}
.hd-mega-promo .p{font-size:14px;font-weight:800;color:var(--accent);white-space:nowrap}
.hd-mega-promo:hover{background:var(--accent-bg2)}

/* Телефон + CTA */
.hd-right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.hd-phone{text-align:right;text-decoration:none;display:block}
.hd-phone .num{font-size:16.5px;font-weight:800;color:var(--dark);letter-spacing:-.2px;white-space:nowrap;transition:color .15s}
.hd-phone:hover .num{color:var(--accent)}
.hd-phone .lbl{font-size:10.5px;color:var(--light);margin-top:-2px}
.hd-cta{padding:11px 18px;background:var(--accent);color:#fff;border:none;border-radius:var(--r);font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s;white-space:nowrap;text-decoration:none;display:inline-block}
.hd-cta:hover{background:var(--accent-h);color:#fff}

/* Бургер */
.hd-burger{display:none;width:44px;height:44px;border:1.5px solid var(--border);border-radius:var(--r);background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0}
.hd-burger span{display:block;width:20px;height:2px;background:var(--dark);border-radius:2px;transition:all .25s}
.hd-burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd-burger.active span:nth-child(2){opacity:0}
.hd-burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- АДАПТИВ ---------- */
/* 1200–1400: меню тесно по ширине. Освобождаем место — переносим
   «Бетон в городе» под логотип и полностью скрываем кнопку «Рассчитать стоимость». */
@media(min-width:1201px) and (max-width:1400px){
  .hd-logo-wrap{flex-direction:column;align-items:flex-start;gap:5px}
  .hd-right .hd-cta{display:none}
}
/* При сужении до 1200 главное меню уже трётся о CTA — переходим на бургер
   и одновременно гасим CTA (она длинная). До 1200 — всё на месте. */
@media(max-width:1200px){
  .hd-nav{display:none}
  .hd-burger{display:flex}
  .hd-cta{display:none}
  .hd-main .hd-w{justify-content:space-between}
}
/* Подпись «Круглосуточно, без выходных» — длинная, гасим раньше телефона */
@media(max-width:768px){
  .hd-phone .lbl{display:none}
}
/* Триггер «Бетон в городе» скрываем до 640px — он доступен в бургер-меню */
@media(max-width:640px){
  .hd-city-trigger{display:none}
}
/* На самых узких — лого ужать, основная полоса ниже. Телефон оставляем
   как кликабельный номер, без подписи. */
@media(max-width:560px){
  :root{--hd-height:102px} /* 38 + 64 при ужатой основной полосе */
  .hd-logo img{height:44px}
  .hd-main .hd-w{padding-top:12px;padding-bottom:12px;gap:10px}
  .hd-phone .num{font-size:15px}
}
/* Совсем узкий — телефон гасим (есть в бургер-меню), оставляем лого+бургер */
@media(max-width:420px){
  .hd-phone{display:none}
}

/* ---------- МОБИЛЬНОЕ МЕНЮ ---------- */
.hd-mob{position:fixed;inset:0;z-index:1090;background:rgba(21,21,21,.45);opacity:0;visibility:hidden;transition:all .25s}
.hd-mob.active{opacity:1;visibility:visible}
.hd-mob-panel{position:absolute;top:0;right:0;width:min(370px,94vw);height:100%;background:var(--white);box-shadow:var(--shl);transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.25,1);display:flex;flex-direction:column}
.hd-mob.active .hd-mob-panel{transform:translateX(0)}
.hd-mob-scroll{flex:1;overflow-y:auto;padding:8px 16px 16px}
.hd-mob-nav{list-style:none}
.hd-mob-nav>li{border-bottom:1px solid var(--border-l)}
.hd-mob-nav>li>a,.hd-mob-nav>li>button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 6px;font-size:15.5px;font-weight:600;color:var(--dark);text-decoration:none;background:none;border:none;font-family:inherit;cursor:pointer;text-align:left}
.hd-mob-nav .hd-car{width:9px;height:9px;border-right:1.8px solid var(--light);border-bottom:1.8px solid var(--light);transform:rotate(45deg);transition:transform .2s}
.hd-mob-nav li.open>button .hd-car{transform:rotate(225deg)}
.hd-mob-sub{display:none;padding:0 6px 10px}
.hd-mob-nav li.open .hd-mob-sub{display:block}
.hd-mob-sub a{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;font-size:14px;color:var(--muted);text-decoration:none;border-radius:8px}
.hd-mob-sub a:hover{background:var(--accent-bg);color:var(--accent)}
.hd-mob-sub .hd-mega-price{font-weight:700;font-size:12.5px;white-space:nowrap}
.hd-mob-sub.cities{display:none;grid-template-columns:1fr 1fr;gap:0 8px;max-height:280px;overflow-y:auto}
.hd-mob-nav li.open .hd-mob-sub.cities{display:grid}
.hd-mob-footer{padding:16px;border-top:1px solid var(--border-l);background:var(--hd-bg)}
.hd-mob-footer .hd-cta{display:block;width:100%;text-align:center;margin-bottom:10px}
.hd-mob-phone{display:block;text-align:center;font-size:19px;font-weight:800;color:var(--dark);text-decoration:none;margin-bottom:2px}
.hd-mob-247{text-align:center;font-size:11.5px;color:var(--light);margin-bottom:4px}
.hd-mob-mail{display:block;text-align:center;font-size:13px;color:var(--muted);text-decoration:none;margin-bottom:12px}
.hd-mob-msg{display:flex;gap:8px}
.hd-mob-msg a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:var(--r);font-size:13px;font-weight:600;text-decoration:none;color:#fff}
.hd-mob-msg a svg{width:16px;height:16px;fill:#fff}
.hd-mob-msg .wa{background:var(--wa)}.hd-mob-msg .tg{background:var(--tg)}