/* ═══════════════════════════════════════════════════════
   Единый хедер и футер — БелТехКом
   Брейкпоинты: 1850 / 1340 / 992 / 768 / 414 / 375
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Фирменные цвета (согласовано) ── */
  --teal:       #5ec7d1;  /* бирюзовый тёмный — основной брендовый */
  --teal-light: #b9e6e9;  /* бирюзовый светлый — подложки, плашки */
  --gray:       #e4e4e4;  /* серый — фоны, линии, обводки */
  --gray-text:  #8a8a8a;  /* притемнённый серый — второстепенный текст (E4E4E4 нечитаем на белом) */
  --ink:        #1a2230;  /* чёрный — заголовки и основной текст */
  --white:      #ffffff;

  /* ── Типографическая и кнопочная шкала — 3 размерных ряда ──
     Ряд 1: экраны 1850 и 1340px (значения по умолчанию, ниже)
     Ряд 2: экраны 992 и 768px   (переопределение на @media max-width:992px)
     Ряд 3: экраны 414 и 375px   (переопределение на @media max-width:414px)
     Внутри одного ряда размеры НЕ меняются — это осознанно, чтобы кнопки
     и шрифты не «плавали» между соседними брейкпоинтами. */
  --fs-h1:    44px;  /* 1. крупный заголовок */
  --fs-h2:    28px;  /* 2. заголовок раздела */
  --fs-h3:    20px;  /* 3. заголовок блока/карточки */
  --fs-body:  17px;  /* 4. основной текст */
  --fs-small: 14px;  /* 5. мелкий текст (артикулы, подписи) */
  --fs-btn:   16px;  /* 6. текст кнопок */

  --shadow-hdr: 0 2px 12px rgba(0,0,0,0.08);

  /* ── Единая шкала скруглений — 3 уровня для всего сайта ──
     Чем крупнее элемент, тем заметнее скругление, но без «капсул». */
  --r-btn:     10px;  /* 1. кнопки, поля ввода, маленькие теги */
  --r-card:    20px;  /* 2. карточки и блоки (товары, новости, модалки) */
  --r-section: 32px;  /* 3. секции и панели на всю ширину контейнера */

  /* ── Единая высота/паддинги кнопок по всему сайту ── */
  --btn-h:      52px; /* крупная CTA-кнопка */
  --btn-h-sm:   40px; /* маленькая кнопка (в карточках и т.п.) */
  --btn-pad-x:    28px; /* горизонтальный паддинг крупной кнопки */
  --btn-pad-x-sm: 20px; /* горизонтальный паддинг маленькой кнопки */

  /* ── Цвет основной кнопки — полупрозрачный бирюзовый (по запросу) ── */
  --btn-primary-bg:       #5ec7d199;
  --btn-primary-bg-hover: #5ec7d1cc;
  --btn-primary-color:    var(--white);
}

@media (max-width:992px) {
  :root {
    --fs-h1: 32px; --fs-h2: 24px; --fs-h3: 18px;
    --fs-body: 15px; --fs-small: 13px; --fs-btn: 14px;
    --btn-h: 44px; --btn-h-sm: 36px;
    --btn-pad-x: 20px; --btn-pad-x-sm: 16px;
  }
}
/* 768px — отдельный, более компактный ряд (раньше делил значения с 992px:
   единый ряд был задуман для 992+768 вместе, но на практике на 768 всё
   выглядело слишком крупным/громоздким рядом с сузившимися колонками —
   выделили в свой ряд по образцу блока «Программа подбора»). */
@media (max-width:768px) {
  :root {
    --fs-h1: 24px; --fs-h2: 19px; --fs-h3: 15px;
    --fs-body: 13px; --fs-small: 12px; --fs-btn: 12px;
    --btn-h: 40px; --btn-h-sm: 32px;
    --btn-pad-x: 16px; --btn-pad-x-sm: 12px;
  }
}
@media (max-width:414px) {
  :root {
    --fs-h1: 26px; --fs-h2: 20px; --fs-h3: 16px;
    --fs-body: 14px; --fs-small: 12px; --fs-btn: 13px;
    --btn-h: 38px; --btn-h-sm: 32px;
    --btn-pad-x: 16px; --btn-pad-x-sm: 12px;
  }
}

@font-face { font-family:'BertSans'; src:url('/wp-content/themes/beltehcom/assets/fonts/BertSans-Regular.ttf'); font-weight:400; font-display:swap; }
@font-face { font-family:'BertSans'; src:url('/wp-content/themes/beltehcom/assets/fonts/BertSans-Medium.ttf');  font-weight:500; font-display:swap; }
@font-face { font-family:'BertSans'; src:url('/wp-content/themes/beltehcom/assets/fonts/BertSans-SemiBold.ttf');font-weight:600; font-display:swap; }
@font-face { font-family:'BertSans'; src:url('/wp-content/themes/beltehcom/assets/fonts/BertSans-Bold.ttf');    font-weight:700; font-display:swap; }

body { font-family:'BertSans',sans-serif; }

/* ── Layout ── */
.container-main { max-width:1600px; margin:0 auto; padding:0 80px; }

/* ── Полоса по группам клиентов (обычный поток — уезжает при скролле, ── */
/* .site-header ниже прилипает к самому верху ей на смену)              */
.audience-bar { height:40px; background:var(--white); border-bottom:none; position:relative; z-index:300; }
.audience-bar__inner { display:flex; align-items:stretch; justify-content:flex-end; gap:40px; height:100%; }
.audience-item { position:relative; display:flex; }
.audience-item__toggle {
  display:flex; align-items:center; gap:8px; height:100%;
  background:none; border:none; cursor:pointer; padding:0; font-family:'BertSans',sans-serif;
  font-size:16px; font-weight:700; color:var(--ink);
  letter-spacing:.03em; text-transform:uppercase; transition:color .15s ease;
}
.audience-item__toggle svg { width:10px; height:6px; flex-shrink:0; transition:transform .2s ease; }
.audience-item:hover .audience-item__toggle,
.audience-item.is-open .audience-item__toggle { color:var(--teal); }
.audience-item.is-open .audience-item__toggle svg { transform:rotate(180deg); }
.audience-item__menu {
  display:none; position:absolute; top:100%; left:0; z-index:250;
  background:var(--white); border-radius:0 0 var(--r-card) var(--r-card);
  box-shadow:var(--shadow-hdr); padding:10px; min-width:220px;
}
.audience-item:last-child .audience-item__menu { left:auto; right:0; }
.audience-item.is-open .audience-item__menu { display:block; }
.audience-item__menu a {
  display:block; padding:9px 14px; border-radius:var(--r-btn);
  font-size:var(--fs-small); color:var(--ink); text-decoration:none; transition:background .15s ease;
}
.audience-item__menu a:hover { background:var(--gray); text-decoration:none; }

/* ── Site Header ── */
.site-header {
  height:80px;
  display:flex;
  align-items:center;
  background:var(--white);
  position:sticky;
  top:0; /* .audience-bar не sticky — уезжает при скролле, хедер прилипает к верху сам */
  z-index:200;
  border-bottom:1px solid var(--teal);
  box-shadow: var(--shadow-hdr);
}
.site-header .container-main {
  width:100%;
  display:flex;
  align-items:center;
  gap:20px;
  position:relative;
}
.site-logo {
  flex-shrink:0;
  display:flex;
  align-items:center;
  text-decoration:none;
}
.site-logo img { height:52px; width:auto; display:block; }

.site-nav {
  display:flex;
  align-items:center;
  gap:24px;
  flex:1;
  margin-left:28px;
}
.site-nav a {
  font-size:var(--fs-body);
  font-weight:400;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s ease;
}
.site-nav a:hover { color:var(--teal); }
.site-nav a.nav-active { color:var(--teal); }
.header-phone {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  white-space:nowrap;
}
.header-phone a {
  font-size:var(--fs-body);
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
}
.header-phone a:hover { color:var(--teal); }

/* ── Телефоны по регионам (выпадающий список) ── */
.region-phone { position:relative; flex-shrink:0; }
.region-phone__toggle {
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  background:none; border:none; cursor:pointer; padding:0; font-family:'BertSans',sans-serif;
  color:var(--ink); white-space:nowrap;
}
.region-phone__label {
  font-size:12px; font-weight:400; color:var(--gray-text);
  display:flex; align-items:center; gap:4px;
}
.region-phone__label svg { width:9px; height:6px; color:var(--gray-text); transition:transform .2s ease; flex-shrink:0; }
.region-phone.is-open .region-phone__label svg { transform:rotate(180deg); }
.region-phone__main { font-size:var(--fs-body); font-weight:600; color:var(--ink); }
.region-phone__toggle:hover .region-phone__main { color:var(--teal); }
.region-phone__menu {
  display:none; position:absolute; top:calc(100% + 12px); right:0; z-index:60;
  background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow-hdr);
  padding:10px; min-width:280px;
}
.region-phone.is-open .region-phone__menu { display:block; }
.region-phone__menu a {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 12px; border-radius:var(--r-btn); text-decoration:none; color:var(--ink);
  transition:background .15s ease;
}
.region-phone__menu a:hover { background:var(--gray); }
.region-phone__menu a span { font-size:var(--fs-small); color:var(--gray-text); }
.region-phone__menu a b { font-size:var(--fs-small); font-weight:600; color:var(--ink); white-space:nowrap; }
@media(max-width:992px) {
  .region-phone { display:none; }
}

/* ── Сквозная навигация по категориям (полоса под шапкой, на всех страницах) ── */
.quick-nav {
  background:var(--white);
  border-bottom:1px solid var(--teal);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  position:sticky; top:80px; z-index:190; /* высота .site-header (сама audience-bar не sticky) */
}
.quick-nav::-webkit-scrollbar { display:none; }
@media (max-width:767px) { .quick-nav { display:none; } }
.quick-nav__inner { display:flex; align-items:stretch; gap:0; }
.quick-nav__item {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  flex:1; min-width:118px; padding:9px 8px; text-decoration:none; color:var(--ink);
  border-right:1px solid var(--gray); text-align:center; transition:background .15s ease;
}
.quick-nav__inner .quick-nav__item:last-child { border-right:none; }
.quick-nav__item:hover { background:var(--gray); text-decoration:none; color:var(--ink); }
.quick-nav__icon { width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--teal); flex-shrink:0; }
.quick-nav__icon svg { width:100%; height:100%; }
.quick-nav__text { font-size:12px; line-height:1.25; color:var(--ink); }
@media(max-width:992px) {
  .quick-nav__item { min-width:96px; padding:8px 6px; gap:5px; }
  .quick-nav__icon { width:22px; height:22px; }
  .quick-nav__text { font-size:11px; }
}
@media(max-width:768px) {
  /* Раньше flex:0 0 auto с min-width:88px не помещало все 7 категорий
     в экран — полоса скроллилась вбок и последняя категория обрезалась
     по краю без явного намёка, что дальше есть ещё контент. Возвращаем
     flex:1 (как на более широких экранах) и мельчим — 7 колонок в ряд
     без горизонтального скролла. */
  .quick-nav__inner { justify-content:stretch; }
  .quick-nav__item { flex:1 1 0; min-width:0; padding:6px 3px; gap:4px; }
  .quick-nav__icon { width:18px; height:18px; }
  .quick-nav__text { font-size:9px; line-height:1.15; }
}

.header-cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--btn-primary-bg);
  color:var(--btn-primary-color);
  font-family:'BertSans',sans-serif;
  font-size:var(--fs-btn);
  font-weight:400;
  border-radius:var(--r-btn);
  padding:0 var(--btn-pad-x);
  height:var(--btn-h);
  white-space:nowrap;
  text-decoration:none;
  transition:background .2s ease;
  flex-shrink:0;
}
.header-cta:hover { background:var(--btn-primary-bg-hover); color:var(--btn-primary-color); text-decoration:none; }

/* ── Каталог: выпадающее мега-меню ── */
/* «Каталог» — обычная ссылка на /catalog/, стрелка — отдельная кнопка,
   раскрывающая список категорий, не переходя по ссылке. */
.nav-catalog { position:static; display:flex; align-items:center; gap:4px; }
.nav-catalog__link {
  font-size:var(--fs-body); font-weight:400; color:var(--ink);
  text-decoration:none; white-space:nowrap;
}
.nav-catalog__link:hover, .nav-catalog.is-open .nav-catalog__link { color:var(--teal); }
.nav-catalog__toggle {
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; padding:6px; margin:-6px;
  color:var(--ink);
}
.nav-catalog__toggle:hover, .nav-catalog.is-open .nav-catalog__toggle { color:var(--teal); }
.nav-catalog__toggle svg { width:10px; height:6px; flex-shrink:0; transition:transform .2s ease; }
.nav-catalog.is-open .nav-catalog__toggle svg { transform:rotate(180deg); }

.catalog-menu {
  display:none;
  position:absolute;
  top:calc(100% + 20px);
  left:50%;
  transform:translateX(-50%);
  background:var(--white);
  border-radius:var(--r-card);
  box-shadow:0 16px 40px rgba(0,0,0,0.18);
  padding:32px;
  z-index:300;
  width:min(1180px, calc(100% - 8px));
  max-width:calc(100vw - 32px);
  box-sizing:border-box;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:28px 32px;
}
.nav-catalog.is-open .catalog-menu { display:grid; }
.catalog-menu__col { min-width:0; }
.nav-catalog .catalog-menu a { display:block; overflow-wrap:break-word; white-space:normal; }
.catalog-menu__title {
  font-size:var(--fs-body); font-weight:700; color:var(--ink);
  text-decoration:none; margin-bottom:12px; display:block; line-height:1.3;
}
.catalog-menu__title:hover { color:var(--teal); }
.catalog-menu__sub {
  display:flex; flex-direction:column; gap:8px;
}
.catalog-menu__sub a {
  font-size:var(--fs-small); color:var(--gray-text); text-decoration:none; line-height:1.35;
}
.catalog-menu__sub a:hover { color:var(--teal); }
@media (max-width:1200px) {
  .catalog-menu { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:992px) {
  .catalog-menu { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:768px) {
  .catalog-menu { position:static; width:100%; max-width:none; transform:none; grid-template-columns:1fr; box-shadow:none; padding:4px 0 0; }
  .nav-catalog.is-open .catalog-menu { display:flex; flex-direction:column; gap:0; }
  /* В боковом меню — только названия категорий, без подкатегорий (те
     видны на самой странице категории). Категория выглядит как обычный
     пункт списка — тот же паддинг/разделитель, что у остальных ссылок. */
  .site-nav.mob-open .catalog-menu__title { font-size:var(--fs-small); font-weight:500; padding:9px 0; margin-bottom:0; border-bottom:1px solid var(--gray); }
  .catalog-menu__sub { display:none; }
  /* «Каталог» + стрелка — в ряд (стрелка сразу после текста), список
     категорий — новой строкой на всю ширину под ними. */
  .nav-catalog { flex-wrap:wrap; width:100%; padding:13px 0; border-bottom:1px solid var(--gray); }
  .nav-catalog .catalog-menu { flex-basis:100%; padding-top:8px; }
  /* Паддинг/разделитель этой строки теперь на .nav-catalog целиком —
     общее правило .site-nav.mob-open a такое же на самой ссылке не нужно. */
  .site-nav.mob-open #catalog-link { display:inline; width:auto; padding:0; border-bottom:none; }
}

/* Бургер-кнопка */
.site-mob-btn {
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  flex-shrink:0;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.site-mob-btn span {
  display:block;
  width:24px;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease, width .2s ease;
  transform-origin:center;
}
/* Анимация → крестик */
.site-mob-btn.is-open span:nth-child(1) {
  transform:translateY(7px) rotate(45deg);
}
.site-mob-btn.is-open span:nth-child(2) {
  opacity:0;
  transform:scaleX(0);
}
.site-mob-btn.is-open span:nth-child(3) {
  transform:translateY(-7px) rotate(-45deg);
}

/* Mobile menu — боковая панель справа */
.site-nav.mob-open {
  display:flex !important;
  flex-direction:column;
  position:fixed;
  top:0; right:0; bottom:0;
  left:auto;
  width:min(330px, 86vw);
  background:var(--white);
  z-index:400;
  justify-content:flex-start;
  align-items:flex-start;
  gap:0;
  padding:68px 28px 32px;
  box-shadow:-2px 0 14px rgba(0,0,0,0.15);
  border-left:2px solid var(--teal);
  overflow-y:auto;
  overflow-x:hidden;
}
.site-nav.mob-open a {
  font-size:var(--fs-body);
  font-weight:500;
  color:var(--ink);
  padding:13px 0;
  width:100%;
  border-bottom:1px solid var(--gray);
  display:block;
  position:relative;
  z-index:401;
}
.site-nav.mob-open a:last-of-type { border-bottom:none; }
.site-nav.mob-open a:hover { color:var(--teal); }

/* Клик по левой части экрана закрывает меню — сам оверлей теперь без
   затемнения (прозрачный), только кликабельная зона. */
.mob-overlay {
  display:none;
  position:fixed;
  top:0; left:0; bottom:0;
  right:min(330px, 86vw);
  background:transparent;
  z-index:399;
  cursor:pointer;
}
.mob-overlay.visible { display:block; }

/* Крест — внутри панели */
.nav-close-btn {
  display:none;
  position:absolute;
  top:14px; right:12px;
  background:none;
  border:none;
  cursor:pointer;
  font-size:26px;
  line-height:1;
  color:var(--ink);
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition:background .2s ease;
  flex-shrink:0;
  z-index:402;
}
.nav-close-btn:hover { background:var(--gray); }
.nav-close-btn.visible { display:flex; }

/* ── Site Footer ── */
.site-footer {
  background:var(--white);
  padding:56px 0 0;
  font-family:'BertSans',sans-serif;
}
.site-footer .footer-top {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:48px;
}
.site-footer .footer-logo img { height:48px; width:auto; }
.site-footer .footer-logo-desc {
  font-size:var(--fs-small);
  color:var(--gray-text);
  line-height:1.6;
  margin-top:14px;
}
.site-footer .footer-col-title {
  font-size:var(--fs-small);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:16px;
}
.site-footer .footer-col ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.site-footer .footer-col ul li a {
  font-size:var(--fs-body);
  color:var(--gray-text);
  text-decoration:none;
  transition:color .2s ease;
}
.site-footer .footer-col ul li a:hover { color:var(--teal); }
.site-footer .footer-contacts {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.site-footer .footer-contacts p {
  font-size:var(--fs-body);
  color:var(--gray-text);
  margin:0;
}
.site-footer .footer-cta { margin-top:20px; }
.site-footer .footer-cta a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--btn-primary-bg);
  color:var(--btn-primary-color);
  font-family:'BertSans',sans-serif;
  font-size:var(--fs-btn);
  font-weight:400;
  border-radius:var(--r-btn);
  padding:0 18px;
  height:var(--btn-h);
  text-decoration:none;
  transition:background .2s ease;
}
.site-footer .footer-cta a:hover { background:var(--btn-primary-bg-hover); text-decoration:none; }
.site-footer .footer-divider {
  border:none;
  border-top:1px solid var(--gray);
  margin:0;
}
.site-footer .footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 0;
  flex-wrap:wrap;
}
.site-footer .footer-copy { font-size:var(--fs-small); color:var(--gray-text); }
.site-footer .footer-links { display:flex; gap:20px; }
.site-footer .footer-links a {
  font-size:var(--fs-small);
  color:var(--gray-text);
  text-decoration:none;
  transition:color .2s ease;
}
.site-footer .footer-links a:hover { color:var(--teal); }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — все брейкпоинты
   ══════════════════════════════════════════════════════ */

/* 1850px — широкий экран, всё стандартно */
@media (max-width:1850px) {
  .container-main { max-width:1600px; padding:0 80px; }
}

/* 1340px — средний десктоп */
@media (max-width:1340px) {
  .container-main { padding:0 48px; }
  .site-nav { gap:18px; margin-left:20px; }
}

/* 992px — планшет горизонтальный */
@media (max-width:992px) {
  .container-main { padding:0 32px; }
  .site-header { height:68px; }
  .quick-nav { top:68px; } /* высота .site-header (audience-bar не sticky) */
  .site-logo img { height:34px; }
  .site-nav { gap:10px; margin-left:12px; }
  .header-phone { display:none; }

  /* Полоса «Строителям / Проектировщикам / Сельскому хозяйству» — на этой
     ширине тем же 16px-жирным-капсом смотрится тяжелее, чем основная навигация
     под ней, мельчим и сжимаем интервалы, а не просто урезаем как на 768px. */
  .audience-bar { height:34px; }
  .audience-bar__inner { gap:22px; }
  .audience-item__toggle { font-size:13px; gap:6px; }

  .site-footer .footer-top { grid-template-columns:1fr 1fr; gap:24px; }
}

/* 768px — планшет вертикальный */
@media (max-width:768px) {
  .container-main { padding:0 35px; }
  .site-header { height:64px; top:0; }
  .quick-nav { top:64px; }
  .site-logo img { height:36px; }

  /* Строителям/Проектировщикам/Сельскому хозяйству — раньше уходили в
     боковое меню, теперь остаются в хедере, просто мельче. На 768 ровно
     умещаются в ряд без скролла — overflow-x:auto здесь не нужен (и
     вреден: из-за него overflow-y у браузера становится auto тоже,
     выпадающее меню каждого пункта обрезалось невидимой рамкой). */
  .audience-bar { height:auto; }
  .audience-bar__inner { gap:14px; padding:7px 0; }
  .audience-item__toggle { font-size:10px; gap:3px; white-space:nowrap; }
  .audience-item__toggle svg { width:8px; height:5px; }

  /* скрываем навигацию (уходит в оверлей), телефон + CTA + бургер */
  .site-nav { display:none; }
  /* .site-nav (flex:1) больше не в потоке — без него CTA и бургер
     не прижимались к правому краю, а просто шли сразу за лого с
     обычным gap. margin-left:auto на первом оставшемся элементе
     занимает освободившееся место сам. */
  .header-cta { margin-left:auto; }
  .site-mob-btn { display:flex; margin-left:12px; }

  /* Панель и крестик закрытия были рассчитаны только под высоту хедера
     (68px/14px) — не учитывали, что на этой ширине сверху ещё полоса
     audience-bar (30px), из-за чего «×» наезжал на неё, а список в
     панели начинался слишком рано. */
  .site-nav.mob-open { padding-top:98px; }
  /* Крестик закрытия должен стоять точно там же, где бургер в хедере —
     right у бургера = правый паддинг .container-main (35px здесь), а не
     свой собственный отступ 12px от края панели (панель уже, паддинг
     панели свой — эти отступы разные, кнопки не совпадали по X). */
  .nav-close-btn { top:44px; right:35px; }
  .site-header .container-main { gap:10px; }

  .site-footer .footer-top { grid-template-columns:1fr 1fr; gap:20px; padding-bottom:28px; }
  .site-footer { padding:36px 0 0; }

  /* Телефоны по регионам внутри мобильной панели — на десктопе не
     показываем, там для этого есть .region-phone. */
  .mobile-region-phones { display:flex; flex-direction:column; width:100%; margin-top:8px; padding-top:12px; border-top:1px solid var(--gray); }
  .mobile-region-phones__label { font-size:var(--fs-small); font-weight:600; color:var(--gray-text); text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px; }
  /* Область и номер — каждый на своей строке (не flex, а обычные блочные
     элементы, чтобы точно не слипались в одну строку) с заметным зазором
     между ними. */
  .mobile-region-phones a { text-decoration:none; padding:10px 0; border-bottom:1px solid var(--gray); }
  .mobile-region-phones a:last-child { border-bottom:none; }
  .mobile-region-phones a span { display:block; font-size:var(--fs-small); color:var(--gray-text); margin-bottom:4px; }
  .mobile-region-phones a b { display:block; font-size:var(--fs-small); font-weight:600; color:var(--ink); }
}
@media (min-width:769px) {
  .mobile-region-phones { display:none; }
}
/* .mobile-audience-links только на размере телефона (≤414px) — на
   768px эти пункты остаются видны в самом хедере (.audience-bar). */
.mobile-audience-links { display:none; }

/* 415-767px — узкий промежуток между «ровно 768» (где audience-bar и так
   умещается в ряд без скролла) и «≤414» (где она вообще скрыта и заменена
   боковым меню). Здесь запасной вариант — прокрутка вбок, если места не
   хватает; overflow-x:auto только тут, не на 768, чтобы не обрезать
   выпадающее меню пунктов (см. комментарий в блоке 768px). */
@media (max-width:767px) {
  .audience-bar { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .audience-bar::-webkit-scrollbar { display:none; }
  .audience-bar__inner { justify-content:flex-start; }
  .audience-item { flex-shrink:0; }
}

/* 414px — мобильный большой (iPhone Plus / Android) */
@media (max-width:414px) {
  .container-main { padding:0 14px; }
  .site-header { height:58px; }
  .quick-nav { top:58px; }
  .site-logo img { height:30px; }
  .header-phone { display:none; }
  .nav-close-btn { right:14px; }

  /* Строителям/Проектировщикам/Сельскому хозяйству — на размере телефона
     не помещаются в хедере даже сжатыми/со скроллом, убираем отсюда
     и показываем в боковом меню (.mobile-audience-links ниже, значит
     и .nav-close-btn/.site-nav.mob-open могут вернуться к отступам под
     высоту одного хедера, без audience-bar). */
  .audience-bar { display:none; }
  .nav-close-btn { top:11px; }
  .site-nav.mob-open { padding-top:70px; }

  .mobile-audience-links { display:flex; flex-direction:column; width:100%; margin-top:8px; padding-top:8px; border-top:1px solid var(--gray); }
  .site-nav .audience-item { flex-direction:column; align-items:flex-start; width:100%; }
  .site-nav .audience-item__toggle {
    width:100%; justify-content:space-between; height:auto; padding:13px 0;
    font-size:var(--fs-body); font-weight:500; text-transform:none; letter-spacing:normal; color:var(--ink);
    border-bottom:1px solid var(--gray);
  }
  .site-nav .audience-item:last-child .audience-item__toggle { border-bottom:none; }
  .site-nav .audience-item.is-open .audience-item__toggle { border-bottom-color:transparent; }
  .site-nav .audience-item__menu { position:static; box-shadow:none; padding:4px 0 8px 12px; min-width:0; width:100%; box-sizing:border-box; border-radius:0; }
  .site-nav .audience-item__menu a { padding:9px 0; font-size:var(--fs-small); }

  /* Полоса категорий — та же причина: flex:1 на 7 колонок при 386px
     ширины сжимал текст до нечитаемой каши. Возвращаем прокручиваемый
     ряд фиксированной ширины колонки вместо сжатия. */
  .quick-nav__inner { justify-content:flex-start; }
  .quick-nav__item { flex:0 0 auto; min-width:82px; padding:6px 4px; gap:4px; }
  .quick-nav__icon { width:18px; height:18px; }
  .quick-nav__text { font-size:9px; line-height:1.15; }

  .site-footer { padding:28px 0 0; }
  .site-footer .footer-top { grid-template-columns:1fr 1fr; gap:16px; padding-bottom:20px; }
  .site-footer .footer-bottom { flex-direction:column; align-items:flex-start; gap:6px; }
  .site-footer .footer-links { flex-wrap:wrap; gap:10px; }
  .site-footer .footer-logo img { height:36px; }
  .site-footer .footer-logo-desc { margin-top:8px; }
  .site-footer .footer-col-title { margin-bottom:10px; }
  .site-footer .footer-cta { display:none; }
}

/* 375px — мобильный стандартный (iPhone SE / базовый) */
@media (max-width:375px) {
  .container-main { padding:0 12px; }
  .site-header { height:54px; }
  .quick-nav { top:54px; }
  .site-logo img { height:28px; }
  .site-header .container-main { gap:6px; }
  .site-mob-btn { margin-left:6px; }
  .site-mob-btn span { width:20px; }
  .nav-close-btn { right:12px; }

  .site-footer .footer-top { grid-template-columns:1fr; gap:14px; }
}

/* ═══════════════════════════════════════════════════════
   Модальные формы заявок (общий вид для всех форм на сайте)
   ═══════════════════════════════════════════════════════ */
.modal-overlay {
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,0.5); backdrop-filter:blur(3px);
  align-items:center; justify-content:center; padding:16px;
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:var(--white); border-radius:var(--r-card);
  padding:40px 48px; max-width:560px; width:100%;
  max-height:90vh; overflow-y:auto;
  position:relative; box-shadow:0 24px 64px rgba(0,0,0,0.18);
}
.modal-close {
  position:absolute; top:16px; right:20px;
  background:none; border:none; cursor:pointer;
  font-size:28px; line-height:1; color:var(--gray-text); transition:color .2s ease;
}
.modal-close:hover { color: var(--ink); }
.modal-title { font-size:var(--fs-h3); font-weight:700; margin:0 0 8px; }
.modal-desc { font-size:var(--fs-body); color:var(--gray-text); margin:0 0 28px; line-height:1.5; }
.modal-field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.modal-field label { font-size:var(--fs-small); font-weight:600; color:var(--ink); }
.modal-field input,
.modal-field select,
.modal-field textarea {
  width:100%; padding:12px 16px; border:1px solid var(--gray);
  border-radius:var(--r-btn); font-family:'BertSans',sans-serif;
  font-size:var(--fs-body); color:var(--ink); outline:none;
  background:var(--white);
  transition:border-color .2s ease;
}
.modal-field select { cursor:pointer; }
.modal-field input:focus,
.modal-field select:focus,
.modal-field textarea:focus { border-color:var(--teal); }
.modal-field textarea { resize:vertical; min-height:100px; }
.modal-field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modal-submit {
  width:100%; height:var(--btn-h); background:var(--btn-primary-bg); color:var(--btn-primary-color);
  border:none; border-radius:var(--r-btn); cursor:pointer;
  font-family:'BertSans',sans-serif; font-size:var(--fs-btn); font-weight:400;
  transition:background .2s ease; margin-top:8px;
}
.modal-submit:hover { background:var(--btn-primary-bg-hover); }
.modal-submit:disabled { opacity:.6; cursor:not-allowed; }
.modal-success { display:none; text-align:center; padding:20px 0; }
.modal-success.visible { display:block; }
.modal-success-icon { font-size:48px; margin-bottom:12px; }
.modal-success-text { font-size:var(--fs-h3); font-weight:600; margin:0 0 8px; }
.modal-success-sub { font-size:var(--fs-body); color:var(--gray-text); margin:0; }
@media(max-width:600px) {
  .modal-box { padding:28px 20px; }
  .modal-field-row { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════
   Баннер согласия на cookie
   ═══════════════════════════════════════════════════════ */
.cookie-banner {
  position:fixed; left:16px; right:16px; bottom:16px; z-index:2000;
  max-width:720px; margin:0 auto;
  background:var(--white); color:var(--ink);
  border-top:3px solid var(--teal);
  border-radius:var(--r-card);
  box-shadow:0 12px 32px rgba(0,0,0,0.16);
  padding:20px 24px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.cookie-banner__text { font-size:var(--fs-small); line-height:1.5; margin:0; flex:1; min-width:220px; color:var(--gray-text); }
.cookie-banner__text a { color:var(--teal); text-decoration:underline; }
.cookie-banner__actions { display:flex; gap:10px; flex-shrink:0; }
.cookie-banner__accept,
.cookie-banner__decline {
  height:var(--btn-h-sm); padding:0 var(--btn-pad-x-sm); border-radius:var(--r-btn);
  font-family:'BertSans',sans-serif; font-size:var(--fs-btn); font-weight:400;
  cursor:pointer; white-space:nowrap; transition:opacity .2s ease, background .2s ease;
}
.cookie-banner__accept { background:var(--btn-primary-bg); color:var(--btn-primary-color); border:none; }
.cookie-banner__decline { background:var(--white); color:var(--ink); border:1px solid var(--gray); }
.cookie-banner__accept:hover { background:var(--btn-primary-bg-hover); }
.cookie-banner__decline:hover { background:var(--gray); }
@media (max-width:600px) {
  .cookie-banner { flex-direction:column; align-items:stretch; text-align:left; }
  .cookie-banner__actions { width:100%; }
  .cookie-banner__accept, .cookie-banner__decline { flex:1; }
}

/* ── Согласие на обработку персональных данных (в формах Web3Forms) ── */
.consent-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--fs-small); color: var(--gray-text); line-height: 1.5;
  margin: 14px 0 4px;
}
.consent-row input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--teal); cursor: pointer;
}
.consent-row label { cursor: pointer; }
.consent-row a { color: var(--teal); text-decoration: underline; }
.consent-row a:hover { color: var(--ink); }