/* ============================================================================
   BARTEC (bartec.com.ru) — новый визуальный слой, 2026
   Стиль повторяет материнский сайт bartec.com: акцент #FF6600, тёмный хедер,
   крупная типографика, карточки со скруглениями, чистые белые блоки.
   Подключается из шаблона fileadmin/template/main/bartec_template.html.
   ============================================================================ */

:root {
  --b-orange: #ff6600;
  --b-orange-dark: #e05a00;
  --b-orange-soft: #fff2e8;
  --b-graphite: #20272d;
  --b-ink: #14181c;
  --b-text: #313131;
  --b-muted: #5c6871;
  --b-line: #e3e8ec;
  --b-bg: #f5f7f8;
  --b-white: #fff;
  --b-radius: 14px;
  --b-radius-sm: 10px;
  --b-shadow: 0 10px 30px rgba(20, 24, 28, .08);
  --b-shadow-sm: 0 4px 14px rgba(20, 24, 28, .06);
  --b-container: 1240px;
  --b-font: "Inter", "AkkuratLLWeb", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- базовая типографика и сброс наследия табличной вёрстки ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--b-bg) !important;
  color: var(--b-text) !important;
  font-family: var(--b-font) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  overflow-x: hidden;
}
td { font-family: var(--b-font); }

.b-wrap { min-height: 100vh; display: flex; flex-direction: column; background: var(--b-bg); }
.b-container { width: 100%; max-width: var(--b-container); margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

img { max-width: 100%; height: auto; }
a { color: var(--b-orange-dark); }
a:hover { color: var(--b-orange); }

/* маркерные таблицы нужны только для подстановки меню и колонок TYPO3 —
   визуально они превращаются в обычные блочные контейнеры */
.b-marker, .b-marker > tbody, .b-marker > tbody > tr, .b-marker > tbody > tr > td {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* ---------- хедер ---------- */
.b-header {
  background: var(--b-graphite);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
}

.b-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 76px;
}

.b-logo { display: flex; align-items: center; flex: 0 0 auto; }
.b-logo img { height: 34px; width: auto; display: block; }
.b-logo span { color: #fff; font-weight: 700; letter-spacing: .04em; }

.b-header__tagline {
  color: #b9c3ca;
  font-size: 13px;
  line-height: 1.35;
  max-width: 260px;
  border-left: 1px solid #3a444c;
  padding-left: 18px;
}

.b-header__spacer { flex: 1 1 auto; }

.b-header__contacts { display: flex; align-items: center; gap: 18px; }
a.b-header__phone, a.b-header__phone:link, a.b-header__phone:visited {
  color: #fff !important;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none !important;
  white-space: nowrap;
}
a.b-header__phone:hover { color: var(--b-orange) !important; }
a.b-header__mail, a.b-header__mail:link, a.b-header__mail:visited { color: #b9c3ca !important; font-size: 14px; text-decoration: none !important; }
a.b-header__mail:hover { color: #fff !important; }
a.b-logo, a.b-logo:link, a.b-logo:visited { text-decoration: none !important; border: 0 !important; }
a.b-btn, a.b-btn:link, a.b-btn:visited { color: #000 !important; text-decoration: none !important; border: 0 !important; }
a.b-btn--ghost, a.b-btn--ghost:link, a.b-btn--ghost:visited { color: #fff !important; }
a.b-footer-link, .b-footer a, .b-footer a:link, .b-footer a:visited { color: #b9c3ca !important; text-decoration: none !important; }

.b-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--b-orange);
  color: #000;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.b-btn:hover { background: #ff7d26; color: #000; }
.b-btn--ghost { background: transparent; color: #fff; border: 1px solid #4a555e; }
.b-btn--ghost:hover { background: #2b343b; color: #fff; }
.b-btn--sm { padding: 9px 16px; font-size: 14px; }

.b-burger {
  display: none;
  background: transparent;
  border: 1px solid #4a555e;
  border-radius: var(--b-radius-sm);
  color: #fff;
  width: 44px;
  height: 40px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

/* ---------- основное меню ---------- */
.b-nav { background: var(--b-ink) !important; border-top: 3px solid var(--b-orange); }
.b-nav .b-marker { width: 100%; }

#menu_1 {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 2px;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}

#menu_1 img { display: none !important; }
#menu_1 nobr { display: block; }
#menu_1 .menu1-level1-no, #menu_1 .menu1-level1-act { display: block; }
#menu_1 a, #menu_1 .menu1-level1-no a, #menu_1 .menu1-level1-act a {
  display: block;
  padding: 15px 16px 13px !important;
  color: #e8edf0 !important;
  text-decoration: none !important;
  font-family: var(--b-font) !important;
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: .01em;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
#menu_1 nobr:first-child a { padding-left: 0 !important; }
#menu_1 a:hover, #menu_1 .menu1-level1-no a:hover { color: #fff !important; border-bottom-color: var(--b-orange); }
#menu_1 .menu1-level1-act a { color: var(--b-orange) !important; border-bottom-color: var(--b-orange); }

/* подменю раздела */
.b-subnav { background: #fff; border-bottom: 1px solid var(--b-line); }
.b-subnav .b-marker { width: 100%; }
#menu_2 { display: flex !important; flex-wrap: wrap; gap: 8px; padding: 12px 0 !important; background: transparent !important; border: 0 !important; }
#menu_2 img { display: none !important; }
#menu_2 nobr { display: block; }
#menu_2 .menu2-level1-no, #menu_2 .menu2-level1-act { display: block; }
#menu_2 a, #menu_2 .menu2-level1-no a, #menu_2 .menu2-level1-act a {
  display: block;
  padding: 8px 14px !important;
  border: 1px solid var(--b-line);
  border-radius: 999px;
  color: var(--b-text) !important;
  font-family: var(--b-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  background: #fff;
}
#menu_2 a:hover { border-color: var(--b-orange); color: var(--b-orange-dark) !important; }
#menu_2 .menu2-level1-act a { border-color: var(--b-orange); background: var(--b-orange-soft); color: var(--b-orange-dark) !important; }

/* ---------- хлебные крошки ---------- */
.b-breadcrumbs { background: #fff; border-bottom: 1px solid var(--b-line); font-size: 13px; }
.b-breadcrumbs__inner { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; color: var(--b-muted); }
.b-breadcrumbs a { color: var(--b-muted); text-decoration: none; }
.b-breadcrumbs a:hover { color: var(--b-orange-dark); }
.b-breadcrumbs span.sep { color: #c3ccd2; }

/* ---------- основная сетка ----------
   Разметку колонок задаёт TYPO3 (подчасти привязаны к <td>), поэтому таблицу
   из шаблона превращаем в CSS-grid: слева контент страницы, справа сайдбар. */
.b-main { padding: 28px 0 56px; flex: 1 1 auto; }

.b-layout table.content { display: block; width: 100% !important; max-width: 100%; }
.b-layout table.content > tbody { display: block; }
.b-layout table.content > tbody > tr:nth-child(1) { display: none; } /* строка заголовков колонок */
.b-layout table.content > tbody > tr:nth-child(3) { display: none; } /* декоративная полоса */
.b-layout table.content > tbody > tr:nth-child(2) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}
.b-layout table.content > tbody > tr:nth-child(2) > td {
  display: block;
  width: auto !important;
  background: #fff !important;
  border: 1px solid var(--b-line);
  border-radius: var(--b-radius);
  box-shadow: var(--b-shadow-sm);
  padding: 26px 28px;
  box-sizing: border-box;
  overflow-wrap: break-word;
}
.b-layout table.content > tbody > tr:nth-child(2) > td:nth-child(1) { grid-column: 1; }
.b-layout table.content > tbody > tr:nth-child(2) > td:nth-child(2) { grid-column: 1; margin-top: 22px; }
.b-layout table.content > tbody > tr:nth-child(2) > td:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }

/* вложенная таблица-обёртка вокруг #content_left не должна выглядеть как таблица */
.b-layout table.content > tbody > tr:nth-child(2) > td:nth-child(1) > table,
.b-layout table.content > tbody > tr:nth-child(2) > td:nth-child(1) > table > tbody,
.b-layout table.content > tbody > tr:nth-child(2) > td:nth-child(1) > table > tbody > tr,
.b-layout table.content > tbody > tr:nth-child(2) > td:nth-child(1) > table > tbody > tr > td {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
}

#content_left:empty, #content:empty { display: none; }
/* пустую левую колонку убирает небольшой скрипт в шаблоне (класс b-cell-empty) */
.b-layout td.b-cell-empty { display: none !important; }

/* ---------- типографика контента ---------- */
#content h1, #content_left h1, .b-main h1 {
  font-size: clamp(26px, 3vw, 40px) !important;
  line-height: 1.15;
  margin: 0 0 18px !important;
  color: var(--b-ink) !important;
  font-family: var(--b-font) !important;
  font-weight: 800;
  letter-spacing: -.01em;
}
#content h2, #content_left h2, .b-main h2 {
  font-size: clamp(20px, 2vw, 26px) !important;
  line-height: 1.25;
  margin: 34px 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--b-ink) !important;
  font-family: var(--b-font) !important;
  font-weight: 700;
}
#content h3, #content_left h3, .b-main h3 { font-size: 19px !important; margin: 26px 0 10px !important; color: var(--b-ink) !important; font-weight: 700; }
#content h4, #content_left h4, .b-main h4 { font-size: 17px !important; margin: 20px 0 8px !important; color: var(--b-ink) !important; }
#content p, #content_left p, .b-main p { margin: 0 0 14px; font-size: 16px !important; line-height: 1.65 !important; }
#content ul, #content ol, #content_left ul, #content_left ol { margin: 0 0 16px; padding-left: 22px; }
#content li, #content_left li { margin: 6px 0; }
#content a, #content_left a, .b-main a { color: var(--b-orange-dark); text-decoration: none; border-bottom: 1px solid rgba(255, 102, 0, .35); }
#content a:hover, #content_left a:hover { color: var(--b-orange); border-bottom-color: var(--b-orange); }
#content strong, #content b, #content_left strong, #content_left b { color: var(--b-ink); }
.b-main hr { border: 0; border-top: 1px solid var(--b-line); margin: 28px 0; }
.b-main blockquote {
  margin: 20px 0;
  padding: 16px 20px;
  background: var(--b-orange-soft);
  border-left: 4px solid var(--b-orange);
  border-radius: 0 var(--b-radius-sm) var(--b-radius-sm) 0;
}

/* таблицы внутри контента: старые табличные блоки приводим к аккуратному виду */
.b-main table { border-collapse: collapse; max-width: 100%; }
.b-main td, .b-main th { padding: 8px 10px; vertical-align: top; }
.b-main th { background: var(--b-bg); text-align: left; font-weight: 700; }

/* левая колонка внутри карточки: без собственных рамок и фона */
#content_left { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }

/* картинки-плитки разделов (старые таблицы с картинками 108×108) */
.b-main .csc-default > table td[bgcolor] { background: transparent !important; }

/* формы */
.b-main input[type="text"], .b-main input[type="tel"], .b-main input[type="email"], .b-main textarea, .b-main select {
  width: 100%;
  max-width: 420px;
  padding: 12px 14px;
  border: 1px solid var(--b-line);
  border-radius: var(--b-radius-sm);
  font: inherit;
  box-sizing: border-box;
  background: #fff;
}
.b-main input[type="submit"], .b-main button[type="submit"] { border: 0; cursor: pointer; }
.b-main input[type="submit"] {
  background: var(--b-orange);
  color: #000;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 999px;
}

/* ---------- правая колонка (контакты и призыв) ---------- */
#content_right { background: var(--b-graphite); border-color: var(--b-graphite); color: #e8edf0; position: sticky; top: 96px; }
#content_right, #content_right * { color: #e8edf0; }
#content_right a { color: #fff !important; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }
#content_right a:hover { color: var(--b-orange) !important; border-bottom-color: var(--b-orange); }
#content_right ul { padding-left: 18px; }
#content_right strong, #content_right b { color: #fff; }
#content_right img { border-radius: var(--b-radius-sm); }
#content_right .style6, #content_right .style7, #content_right .style8 { color: #e8edf0 !important; }

/* кнопка-CTA в сайдбаре */
.b-cta { margin-top: 18px; display: grid; gap: 10px; }

/* ---------- подвал ---------- */
.b-footer { background: var(--b-graphite); color: #b9c3ca; margin-top: auto; padding: 46px 0 0; font-size: 14px; }
.b-footer__grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 26px; }
.b-footer h3 { color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 14px; }
.b-footer a { color: #b9c3ca; text-decoration: none; }
.b-footer a:hover { color: var(--b-orange); }
.b-footer ul { list-style: none; margin: 0; padding: 0; }
.b-footer li { margin: 8px 0; }
.b-footer__logo { height: 30px; width: auto; margin-bottom: 14px; }
.b-footer__bottom {
  margin-top: 36px;
  border-top: 1px solid #333c44;
  padding: 18px 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  font-size: 13px;
  color: #8b959d;
}
.b-footer__socials { display: flex; gap: 14px; }
.b-footer__socials img { height: 22px; width: auto; }

/* ---------- всплывающая форма и кнопка обратного звонка (сохраняем логику сайта) ---------- */
.abs { position: relative; z-index: 30; }
.feed_back { position: fixed; right: 24px; bottom: 24px; }
.feed_back_text {
  background: var(--b-orange);
  color: #000;
  border-radius: 999px;
  box-shadow: var(--b-shadow);
  padding: 12px 20px;
  cursor: pointer;
  display: flex;
  gap: 14px;
  align-items: center;
  font-weight: 700;
}
.feed_back_text .podbor { display: none; }
.overlay { display: none; position: fixed; inset: 0; background: rgba(20, 24, 28, .6); z-index: 50; }
/* ВАЖНО (правка 21.09.2026): попап открывается двумя путями —
   inline-обработчиком на .feed_back_text (он добавляет класс b-open) и старым js/custom.js
   (он выставляет inline visibility/opacity). Раньше правило показывало попап только по классу
   через display, а visibility оставалось hidden — форма «Запрос» не появлялась.
   Теперь .b-open снимает все три ограничения. */
.overlay.b-open,
.popup.b-open {
  display: block;
  visibility: visible;
  opacity: 1;
}
.popup {
  display: none;
  position: fixed;
  z-index: 60;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 32px));
  background: #fff;
  border-radius: var(--b-radius);
  padding: 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.popup .fofm { display: grid; gap: 10px; }
.popup input, .popup textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--b-line); border-radius: var(--b-radius-sm); font: inherit; box-sizing: border-box; }
.popup .close_order { position: absolute; right: 16px; top: 12px; cursor: pointer; font-size: 20px; color: var(--b-muted); }
.popup .phoneFormat { margin: 0; font-size: 12px; color: var(--b-muted); }
.popup input[type="submit"] { background: var(--b-orange); color: #000; font-weight: 700; border: 0; border-radius: 999px; cursor: pointer; }

/* ---------- фотографии в разделах (обложка страницы и галерея, 21.09.2026) ----------
   Разметку вставляет инструмент разделов (bartec-migrate.mjs photos): <figure> с картинкой,
   у которой есть alt, width/height (против сдвигов вёрстки) и loading="lazy". */
.b-figure { margin: 18px 0 22px; }
.b-figure img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--b-radius);
  background: #fff;
}
.b-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0;
}
.b-gallery__item { margin: 0; flex: 1 1 280px; max-width: 100%; }
.b-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--b-radius);
  background: #fff;
}
@media screen and (max-width: 640px) {
  .b-gallery { gap: 12px; }
  .b-gallery__item { flex: 1 1 100%; }
}

/* ---------- адаптив ---------- */
@media screen and (max-width: 1080px) {
  .b-marker--layout > tbody > tr { grid-template-columns: minmax(0, 1fr); }
  #content_left, #content, #content_right { grid-column: 1; grid-row: auto; }
  #content_right { position: static; }
  .b-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 860px) {
  .b-header__tagline, .b-header__mail { display: none; }
  .b-burger { display: block; }
  .b-header__contacts { margin-left: auto; }
  .b-nav { display: none; }
  .b-nav.b-open { display: block; }
  #menu_1 { flex-direction: column; gap: 0; }
  #menu_1 a { padding: 14px 0; border-bottom: 1px solid #2c353c; white-space: normal; }
  #menu_1 nobr:first-child a { padding-left: 14px; }
}

@media screen and (max-width: 640px) {
  .b-header__inner { min-height: 64px; gap: 12px; }
  .b-logo img { height: 26px; }
  .b-header__phone { font-size: 16px; }
  .b-main { padding: 18px 0 40px; }
  #content_left, #content, #content_right { padding: 18px 16px; border-radius: var(--b-radius-sm); }
  .b-footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .feed_back { right: 12px; bottom: 12px; }
  .feed_back_text { padding: 10px 16px; font-size: 14px; }
}

/* ============================================================================
   Раскладка v2 (21.09.2026): блоки бывшей левой колонки — горизонтально сверху.

   Что было не так: карточки (системы электрообогрева, взрывозащищённые корпуса,
   системы управления, шахтная техника) стояли в левой колонке, а текст страницы
   по правилам сетки попадал в ту же колонку НИЖЕ них — получалась узкая высокая
   колонка карточек, а весь текст уезжал под неё.

   Что стало: карточки идут одной строкой на всю ширину и стоят ВВЕРХУ, под ними
   в двух колонках — текст страницы и блок контактов.

   Карточки в разметке идут тройками строк (картинка, подпись, отступ между
   карточками), поэтому раскладываем их сеткой: строки 3n+1 — картинки,
   3n+2 — подписи, 3n+3 (отступ) скрываем.

   Откат: удалить этот блок целиком — вернётся прежняя раскладка.
   ============================================================================ */

/* 1) карточки — первая строка на всю ширину, текст и контакты — вторая */
.b-layout table.content > tbody > tr:nth-child(2) > td:nth-child(1) {
  grid-column: 1 / -1;
  grid-row: 1;
  padding: 20px 24px;
}
.b-layout table.content > tbody > tr:nth-child(2) > td:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
  margin-top: 0;
}
.b-layout table.content > tbody > tr:nth-child(2) > td:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

/* 2) карточки внутри блока — в один ряд.
   ВАЖНО: сеткой делаем только tbody. Если сделать grid и на table, и на tbody,
   tbody становится элементом внешней сетки и получает ширину одной её колонки —
   карточки сжимаются в узкие столбики (проверено измерением в браузере).
   ВАЖНО 2: страница открывается в quirks-режиме (нет DOCTYPE), поэтому атрибуты
   height="108"/"10" из старой разметки работают как жёсткая высота: строка подписи
   получалась 10px и текст вылезал из неё. Снимаем это height: auto. */
#content_left > .csc-default > table {
  display: block;
  width: 100%;
}
#content_left > .csc-default > table > tbody {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: none;
  align-items: start;
  gap: 2px 18px;
  width: 100%;
}
#content_left > .csc-default > table > tbody > tr { display: block; }
#content_left > .csc-default > table > tbody > tr > td {
  display: block;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  text-align: center;
}
#content_left > .csc-default > table > tbody > tr:nth-child(3n+1) { grid-row: 1; }
#content_left > .csc-default > table > tbody > tr:nth-child(3n+2) { grid-row: 2; }
#content_left > .csc-default > table > tbody > tr:nth-child(3n+3) { display: none; }
/* четыре карточки по колонкам: 1-я → колонка 1, 2-я → 2, 3-я → 3, 4-я → 4 */
#content_left > .csc-default > table > tbody > tr:nth-child(1),
#content_left > .csc-default > table > tbody > tr:nth-child(2) { grid-column: 1; }
#content_left > .csc-default > table > tbody > tr:nth-child(4),
#content_left > .csc-default > table > tbody > tr:nth-child(5) { grid-column: 2; }
#content_left > .csc-default > table > tbody > tr:nth-child(7),
#content_left > .csc-default > table > tbody > tr:nth-child(8) { grid-column: 3; }
#content_left > .csc-default > table > tbody > tr:nth-child(10),
#content_left > .csc-default > table > tbody > tr:nth-child(11) { grid-column: 4; }

#content_left img {
  display: block;
  margin: 0 auto 6px;
  max-width: 100%;
  height: auto;
  border-radius: var(--b-radius-sm);
}
#content_left b { display: block; font-size: 14px; line-height: 1.35; color: var(--b-ink); }
#content_left a { border-bottom: 0 !important; }

/* 3) на узких экранах карточки встают по две в ряд */
@media screen and (max-width: 900px) {
  #content_left > .csc-default > table > tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  #content_left > .csc-default > table > tbody > tr:nth-child(1) { grid-area: 1 / 1; }
  #content_left > .csc-default > table > tbody > tr:nth-child(2) { grid-area: 2 / 1; }
  #content_left > .csc-default > table > tbody > tr:nth-child(4) { grid-area: 1 / 2; }
  #content_left > .csc-default > table > tbody > tr:nth-child(5) { grid-area: 2 / 2; }
  #content_left > .csc-default > table > tbody > tr:nth-child(7) { grid-area: 3 / 1; }
  #content_left > .csc-default > table > tbody > tr:nth-child(8) { grid-area: 4 / 1; }
  #content_left > .csc-default > table > tbody > tr:nth-child(10) { grid-area: 3 / 2; }
  #content_left > .csc-default > table > tbody > tr:nth-child(11) { grid-area: 4 / 2; }
}

/* 4) мобильный блок инлайн-стилей делает все строки таблицы display: block !important,
   из-за чего на телефоне снова показывались служебная строка «Контакты» и серая полоса */
@media screen and (max-width: 767px) {
  .b-layout table.content > tbody > tr:nth-child(1),
  .b-layout table.content > tbody > tr:nth-child(3) { display: none !important; }
}

/* ============================================================================
   bartec.com.ru — исправление мобильной шапки
   Подготовлено 04.10.2026 по результатам мобильного аудита (Chromium, реальные вьюпорты).

   ПРОБЛЕМА (измерено на 320/360/390/414 px, все страницы)
   -------------------------------------------------------
   Строка шапки .b-header__inner не влезала в ширину экрана:
     состав строки: логотип 124px + отступ + телефон 164px + кнопка «Запрос» 80px
                    + бургер 44px + промежутки 18px = итого 493px
     при экране 360px переполнение составляло 133px, при 320px — 173px.
   Так как у body стоит overflow-x: hidden, лишнее не показывалось полосой прокрутки,
   а просто ОБРЕЗАЛОСЬ: кнопка меню (бургер) оказывалась целиком за правым краем
   (right=493 при ширине экрана 360) и была недостижима — то есть на телефоне
   не работала основная навигация по каталогу.

   ЭТО И ЕСТЬ ПРИЧИНА ФЛАГА «НЕ МОБИЛЬНОЕ» У ЯНДЕКСА (диагностика от 20.09.2026):
   содержимое шире экрана, ключевые элементы управления вне видимой области.

   ИСПРАВЛЕНИЕ
   -----------
   На экранах до 640px телефон остаётся кликабельной ссылкой tel:, но вместо
   длинного номера показывается иконка 38x38. Освободившиеся ~124px позволяют
   уместить логотип, звонок, кнопку «Запрос» и меню.
   Скрывается только дублирующее: подпись-слоган и адрес почты (на этом разрешении
   они и раньше не отображались).

   ПРОВЕРЕНО в Chromium после применения правила: 24 комбинации
   (6 типов страниц × 4 ширины 320/360/390/414) — переполнение шапки 0 px,
   переполнение документа 0 px, бургер и кнопка «Запрос» внутри экрана,
   ссылка tel: сохранена, объём видимого текста не изменился.

   ОТКАТ: удалить этот блок из файла.
   ============================================================================ */

@media (max-width: 640px) {
  .b-header__inner { gap: 8px; flex-wrap: nowrap; align-items: center; }
  .b-header__tagline { display: none; }

  /* номер остаётся кликабельным (tel:), но показан иконкой */
  .b-header__phone {
    font-size: 0 !important;
    width: 38px; height: 38px;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    flex: 0 0 auto;
    border-radius: 8px;
    border: 1px solid #4a555e;
    overflow: hidden;
  }
  .b-header__phone * { display: none !important; }
  .b-header__phone::before { content: "\260E"; font-size: 17px !important; color: #fff; }

  .b-header__contacts { gap: 8px; min-width: 0; }
  .b-header__mail { display: none; }
  .b-logo img { height: 24px; }
  .b-btn--sm { padding: 8px 10px; font-size: 12px; }
  .b-burger { flex: 0 0 auto; width: 40px; }
}

/* ============================================================================
   ESPA SEO AGENT 2026-10-04 (F-33): широкие таблицы характеристик на узких экранах
   Измерено в браузере: таблицы характеристик на странице подкатегории имеют
   min-ширину 332 px. При экране 320 px они уходили за край на 49 px, при 360 px —
   на 9 px, а из-за body{overflow-x:hidden} обрезанная часть была недоступна.
   На 390 px и шире проблемы нет.
   Решение: разрешаем перенос слов в ячейках — таблица влезает в экран.
   Проверено: переполнение вне скролл-контейнеров 0 px на 320 и 360 px,
   шапка не затронута, вёрстка остальных страниц не изменилась.
   Откат: удалить этот блок.
   ============================================================================ */

@media (max-width: 640px) {
  .b-main table td,
  #content table td { overflow-wrap: anywhere; word-break: break-word; }
  .b-main table,
  #content table { max-width: 100%; }
}