/* public/css/custom.css — мобильная адаптация карусели и текста */

/* Глобальный фолбэк: если по каким-то причинам --header-h не проставлен
   (скрипт не успел, кэш, задержка), контент не должен уезжать под фикс‑шапку. */
body{ padding-top: var(--header-h, 85px) !important; }

@media (max-width: 480px){
  html, body { overflow-x: hidden; }
  body{ padding-top: calc(var(--header-h, 80px)) !important; }

  /* Каркас карусели: стрелка — баннер — стрелка */
  .hero-swiper{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    width: 100%;
    max-width: 100%;
    /* Между шапкой и баннером — компактно */
    margin: 8px auto 8px;
    padding: 0 8px; /* зазор от краёв экрана */
  }

  /* Swiper занимает центральную колонку и всю доступную ширину */
  .hero-swiper > .swip.swiper{
    grid-column: 2;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Слайды и изображение — строго по контейнеру */
  .swip.swiper .swiper-slide{
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .swip.swiper .swiper-slide img{
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
  }

  /* Текст внутри слайдов */
  .swip .u-text,
  .swip h1, .swip h2, .swip h3{
    margin: 8px 0;
    font-size: clamp(16px, 4.5vw, 20px);
    line-height: 1.25;
    word-break: break-word;
  }

  /* Внешние стрелки — видимые и кликабельные */
  .hero-nav-prev, .hero-nav-next{
    grid-row: 1;
    width: 36px; height: 36px;
    border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    background: rgba(0,0,0,.25);
    color:#fff;
    border:0; outline:0;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    z-index: 1000;
  }
  /* На мобильных стрелки не показываем: работает свайп */
  .hero-nav-prev, .hero-nav-next,
  .swiper-button-prev, .swiper-button-next{ display: none !important; }
  .hero-nav-prev{ grid-column: 1; justify-self: start; }
  .hero-nav-next{ grid-column: 3; justify-self: end; }
  .hero-nav-prev:hover, .hero-nav-next:hover{ background: rgba(0,0,0,.35); }

  /* Пагинация (если используется) */
  .swiper-pagination{ position: static; margin-top: 6px; text-align: center; }

  /* Общая ширина контейнеров — не более экрана */
  .u-sheet, .u-layout-wrap, .u-container-layout, .u-image, .u-group{
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden;
  }
  /* Конкретный класс-обёртка — убираем верхний отступ */
  .u-layout-wrap.u-layout-wrap-1{ margin-top: 0 !important; }

  /* Убираем внутренние отступы у первого контейнера секции после баннера */
  .u-section-4 .u-container-layout-1{ padding: 0 !important; }

  /* Медиа внутри контента */
  img, video, iframe{ max-width: 100%; height: auto; display: block; }

  /* Точечный фикс "съедается верх текста" в синем блоке главной (u-section-5) */
  .u-section-5 .u-group-1{ margin-top: 0 !important; }
  .u-section-5 .u-container-layout-3{ padding-top: 24px !important; }

  /* Делаем длинные подписи на кнопках читаемыми на узких экранах */
  .u-btn, .u-button-style, a.u-btn{
    font-size: 14px !important;
    letter-spacing: 1px !important;
    line-height: 1.2 !important;
    padding: 12px 14px !important;
    white-space: normal !important;   /* разрешаем перенос */
    word-break: break-word !important;
    text-align: center !important;
    max-width: 100% !important;
  }

  /* Отступ снизу у кнопки "Подробнее/Связаться" перед следующим блоком */
  .u-section-4 .u-btn-2{
    margin-top: 8px !important;
    margin-bottom: 16px !important;
    display: inline-block !important;
  }

  /* Фоновая фигура под секцией — убираем внешние отступы на мобилках */
  .u-shape.u-shape-rectangle.u-shape-1{ margin: 0 !important; }
}

/* На планшетах тоже убираем стрелки (iPad и пр.) */
@media (max-width: 1024px){
  html, body{ overflow-x: hidden; }
  /* Чуть уменьшаем боковые поля страницы, чтобы контент точно влезал */
  .u-header .u-sheet-1,
  .header-inner,
  .u-sheet, .u-sheet-1{
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Карусель и контейнеры — не шире экрана */
  .hero-swiper{ width: 100% !important; margin-left:auto; margin-right:auto; }
  .hero-swiper > .swip.swiper{ width: 100% !important; }
  .u-layout-wrap, .u-container-layout{ max-width: 100% !important; width: 100% !important; overflow: hidden; }
  img, video, iframe{ max-width: 100%; height: auto; }

  .hero-nav-prev, .hero-nav-next,
  .swiper-button-prev, .swiper-button-next{ display: none !important; }

  /* ЛОГОТИП слева — полный; иконки меню и контактов уводим вправо */
  .header-inner{ display:flex; align-items:center; }
  .u-image.u-logo.u-image-1{ flex: 0 0 auto !important; margin-right: 8px; }
  .u-logo-image-1{ height: auto !important; max-height: 44px !important; width: auto !important; }
  .header-desktop-nav{ margin-left: auto !important; }
}

/* Когда открыт оффканвас-меню (класс ставим в JS на body), скрываем стрелки карусели */
/* При открытом оффканвас-меню скрываем стрелки (учитываем разные классы на <body>) */
body.menu-open .hero-nav-prev,
body.menu-open .hero-nav-next,
body.menu-open .swiper-button-prev,
body.menu-open .swiper-button-next,
body.menu-overlay .hero-nav-prev,
body.menu-overlay .hero-nav-next,
body.menu-overlay .swiper-button-prev,
body.menu-overlay .swiper-button-next,
body.u-offcanvas-opened .hero-nav-prev,
body.u-offcanvas-opened .hero-nav-next,
body.u-offcanvas-opened .swiper-button-prev,
body.u-offcanvas-opened .swiper-button-next{ display: none !important; }

/* При открытом оффканвас-меню прячем горизонтальное меню в шапке,
   чтобы текст (например, «Каталог») не просвечивал над оверлеем */
body.menu-open .header-desktop-nav,
body.menu-overlay .header-desktop-nav,
body.u-offcanvas-opened .header-desktop-nav{
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Поднимаем выкатную панель выше оверлея (общая настройка) */
/* z-index панели задаём ниже (единое место) */

/* Узкие мобильные: < 550px — порядок: логотип | каталог | о компании | телефон | почта | бургер */
@media (max-width: 549px){
  .header-inner{ display:flex; align-items:center; }
  /* Логотип слева, не сжимать */
  .u-image.u-logo.u-image-1{ order:0; flex:0 0 auto !important; margin-right: 8px; }
  .u-logo-image-1{ height:auto !important; width:auto !important; max-height:40px !important; }

  /* Меню-иконки сразу за логотипом и уводим вправо */
  .header-desktop-nav{ order:1; margin-left:auto !important; gap:12px; }
  .header-desktop-nav .txt{ display:none !important; }
  .header-desktop-nav .ico{ display:inline-block !important; font-size:18px; }
  /* Скрываем «Главная» и «Контакты» на очень узких */
  .header-desktop-nav li:nth-child(1){ display:none !important; } /* Главная */
  .header-desktop-nav li:nth-child(4){ display:none !important; } /* Контакты */

  /* Телефон и почта следом за иконками */
  a.header_link[href^="tel:"]{ order:2; margin-left:8px; }
  a.header_link[href^="mailto:"]{ order:3; margin-left:8px; }

  /* Бургер в самом конце */
  .u-menu.u-menu-1{ order:4; margin-left:8px; }
  /* Увеличиваем зону тапа и размер иконки бургера */
  .u-menu .menu-collapse a.u-nav-link{
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0 !important; border: 0 !important;
  }
  .u-menu .menu-collapse svg{ width: 26px !important; height: 26px !important; }

}

/* Очень узкие: < 410 — скрываем "О компании" (3‑й пункт списка) */
@media (max-width: 409px){
  .header-desktop-nav li:nth-child(3){ display:none !important; }
}

/* Самые узкие: ≤ 374 — дополнительно скрываем "Каталог" (2‑й пункт списка) */
@media (max-width: 374px){
  .header-desktop-nav li:nth-child(2){ display:none !important; }
}

/* ===== HEADER DESKTOP NAV ===== */
.header-desktop-nav{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 16px;
  padding: 0;
}

/* === КАТАЛОГ: контролируем высоту секции с карточками ===
   Для надёжного прижатия футера используем реальную видимую
   высоту окна (dvh) минус высоты шапки и футера.
   JS в public/js/custom.js уточняет переменные --header-h/--footer-h. */

/* Фолбэк-значения (если JS ещё не успел): */
:root{ --footer-h: 120px; }
/* Брендовая палитра */
:root{
  --brand-blue: #2b8feb;
  --brand-white: #ffffff;
  --brand-accent: #e3e3e3; /* Доп. цвет — используется ограниченно в вебе */
  /* Ширина оффканваса: 1/4 видимой области, не уже 260px */
  --offcanvas-w: clamp(260px, 25vw, 420px);
}

/* Privacy Policy: фирменный цвет заголовков */
.privacy-policy h1,
.privacy-policy h2,
.privacy-policy h3{ color: var(--brand-blue); text-transform: uppercase; }

/* Крупные заголовки на странице Политики */
.privacy-policy h1{ font-size: clamp(32px, 3.2vw, 48px); line-height: 1.15; font-weight: 800; }
.privacy-policy h2{ font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; margin-top: 20px; }
.privacy-policy h3{ font-size: clamp(18px, 1.8vw, 22px); line-height: 1.3; }

/* Privacy Policy: комфортная ширина текста */
.pp-content{
  max-width: 1320px !important;
  margin-left: auto; margin-right: auto;
  padding-left: 16px; padding-right: 16px;
}

/* Privacy Policy: заголовок в 2 строки на широких десктопах */
.pp-hero-title{ margin: 0 auto; text-align: center; display: block; }
@media (min-width: 1400px){
  .pp-hero-title{ max-width: 960px; }
}

/* ===== Cookie banner ===== */
.cookie-banner{
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 9999;
  background: var(--brand-white, #fff);
  color: var(--text-color, #2f2f2f);
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  max-width: 960px; margin: 0 auto;
}
.cookie-banner[hidden]{ display: none !important; }
.cookie-banner__text{ font-size: 14px; line-height: 1.4; }
.cookie-banner__text a{ color: var(--brand-blue, #2b8feb); text-decoration: underline; }
.cookie-banner__actions{
  margin-left: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
  width: 100%;
  max-width: 340px;
}
.cookie-btn{
  cursor: pointer; border: 1px solid transparent; border-radius: 8px;
  padding: 8px 12px; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; /* одинаковая высота */
}
.cookie-btn--accept{ background: var(--brand-blue, #2b8feb); color: #fff; }
.cookie-btn--accept:hover{ filter: brightness(0.95); }
.cookie-btn--decline{ background: #fff; color: #2f2f2f; border-color: #d0d0d0; }
.cookie-btn--decline:hover{ background: #f5f5f5; }
@media (max-width: 600px){
  .cookie-banner{ flex-direction: column; align-items: stretch; }
  .cookie-banner__text{ margin-bottom: 8px; }
  .cookie-banner__actions{
    margin-left: 0;
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr; /* одна колонка на узких */
  }
}

/* ===== Consent page: hover как у баннерных кнопок ===== */
.consent-return-btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 10px 16px; border-radius: 8px;
  transition: filter .15s ease, background-color .15s ease;
}
.consent-return-btn:hover{ filter: brightness(0.95); }

/* (удалены стили оффканваса/аккордеона каталога) */

/* (убрано управление .u-menu-overlay — используем единый псевдоэлемент ниже) */

/* Десктоп/современные браузеры — 100dvh учитывает панели браузера */
.catalog-section{
  min-height: calc(100dvh - var(--header-h, 85px) - var(--footer-h, 120px)) !important;
  margin: 0;
}
/* Фолбэк на старые браузеры без dvh */
@supports not (height: 100dvh){
  .catalog-section{ min-height: calc(100vh - var(--header-h, 85px) - var(--footer-h, 120px)) !important; }
}
/* Внутренний контейнер тянем на всю высоту секции */
.catalog-section .u-sheet-1{ min-height: 100% !important; }
.header-desktop-nav li{ margin: 0; padding: 0; }
.header-desktop-nav a{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  color: var(--brand-blue); text-decoration: none; font-weight: 600;
  font-family: inherit; font-size: 14px;
}
.header-desktop-nav .txt{ text-transform: uppercase; letter-spacing: .02em; }
.header-desktop-nav a:hover{ opacity: 1; color:#000 !important; }
.header-desktop-nav .ico{ display: none; }

/* Выпадающее меню каталога (десктоп) */
.header-desktop-nav li.has-sub{ position: relative; }
.header-submenu{
  /* По умолчанию рендерим, но делаем невидимым —
     так анимация opacity будет работать. */
  display: block;
  position: absolute; left: 0; top: calc(100% + 8px);
  min-width: 260px; padding: 10px 0; margin: 0;
  background: #fff; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 2001;
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease, visibility .2s ease;
}
.header-submenu li{ list-style:none; }
.header-submenu a{ display:block; padding: 10px 16px; gap:0; color:#2f2f2f; font-weight:600; text-transform: uppercase; font-family: inherit; font-size: 14px; letter-spacing: .02em; }
.header-submenu a:hover, .header-submenu a:focus{ background:#00000012; color: var(--brand-blue) !important; }
.header-submenu li, .header-submenu a{ transition: .5s; }
.header-submenu{ overflow:hidden; }
.header-submenu::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(168,209,245,0.35), rgba(168,209,245,0.35)),
    url('/public/img/spider-r.svg');
  background-size: cover; background-position: center; background-repeat:no-repeat;
  opacity:.35; pointer-events:none; z-index:0;
  transform: scaleX(-1);
  transform-origin: center;
}
.header-submenu li, .header-submenu a{ position:relative; z-index:1; }
.header-desktop-nav li.has-sub:hover > .header-submenu{ opacity:1; visibility:visible; }
.header-desktop-nav li.has-sub:focus-within > .header-submenu{ opacity:1; visibility:visible; }
.header-desktop-nav li.has-sub > a{ position: relative; z-index: 2002; }
.header-inner{ position: relative; z-index: 2000; overflow: visible !important; }

/* Управление через JS: когда у пункта есть класс .open — показываем меню всегда */
.header-desktop-nav li.has-sub.open > .header-submenu{ opacity:1; visibility:visible; }

/* Внимание: не отключаем pointer-events у контейнера подменю,
   иначе не сработает наведение и JS-события на самом списке. */
/* ===== Catalog redesign ===== */
:root{
  --catalog-sidebar-width: 280px;
  --catalog-gap: 24px;
  --catalog-gap-sm: 16px;
  --catalog-border: 1px solid rgba(0,0,0,0.06);
  --catalog-text: #2f2f2f;
  --catalog-bg: #ffffff;
  --catalog-muted: #657184;
  --catalog-focus: #2b8feb;
  --catalog-transition: 0.25s ease;
  --catalog-font: "Open Sans", "Roboto", sans-serif;
}

.catalog{
  margin-top: 0;
  padding: clamp(4px, 1vw, 12px) clamp(12px, 4vw, 40px) clamp(32px, 4vw, 48px);
  background: var(--catalog-bg);
  color: var(--catalog-text);
  font-family: var(--catalog-font);
}

/* ===== Placeholder page layout (no-scroll, full-viewport) ===== */
body.catalog-placeholder{ overflow: hidden; }
body.catalog-placeholder .catalog{
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--header-h, 85px) - var(--footer-h, 120px));
  margin: 0;
  overflow: hidden; /* не даём прокручиваться внутреннему контейнеру */
}
@supports not (height: 100dvh){
  body.catalog-placeholder .catalog{ height: calc(100vh - var(--header-h, 85px) - var(--footer-h, 120px)); }
}
body.catalog-placeholder .catalog__layout{
  flex: 1 1 auto;
  min-height: 0; /* для корректного расчёта высоты флекс-детей */
  overflow: hidden;
  grid-template-columns: 1fr; /* сразу одна колонка */
}
body.catalog-placeholder .catalog-sidebar{ display: none !important; }
body.catalog-placeholder .catalog-panel{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* вертикальное центрирование */
}
/* учитываем высоту локальной шапки каталога (крошки + поиск), задаётся из JS в --catalog-head-h */
body.catalog-placeholder .catalog__layout{ 
  height: calc(100% - var(--catalog-head-h, 0px));
}

/* ===== Compact heights: screens with small viewport height ===== */
@media (max-height: 700px){
  .catalog{
    padding: 12px 16px 28px;
  }
  .catalog-panel{ padding: 14px; gap: 14px; }
  .catalog-panel__title{ font-size: 1.1rem; letter-spacing: 0.03em; }
  .catalog-panel__group-title{ font-size: 0.85rem; }
  .catalog-panel__body{ gap: 12px; }
  .catalog-panel__list{ gap: 6px; }
  .catalog-panel__link{ font-size: 0.9rem; line-height: 1.2; padding: 4px 0; min-height: 28px; display: block; }
  .catalog-sidebar__link{ padding: 10px 12px; font-size: 0.85rem; }
  .catalog-sidebar__sub-link{ font-size: 0.85rem; padding: 4px 0; }
  .catalog-search__input{ padding: 12px 88px 12px 14px; font-size: .95rem; }
  /* ограничиваем высоту центральной области и разрешаем локальный скролл, чтобы не терять шапку */
  .catalog__layout{ min-height: 0; }
  .catalog-main{ max-height: calc(100dvh - var(--header-h, 85px) - var(--footer-h, 120px) - var(--catalog-head-h, 0px)); overflow: auto; }
  @supports not (height: 100dvh){
    .catalog-main{ max-height: calc(100vh - var(--header-h, 85px) - var(--footer-h, 120px) - var(--catalog-head-h, 0px)); }
  }
}

@media (max-height: 600px){
  .catalog-panel{ padding: 10px; gap: 10px; }
  .catalog-panel__title{ font-size: 1rem; }
  .catalog-panel__group-title{ font-size: 0.8rem; }
  .catalog-panel__link{ font-size: 0.85rem; min-height: 24px; padding: 3px 0; }
  .catalog-sidebar__link{ padding: 8px 10px; font-size: 0.8rem; }
  .catalog-sidebar__sub-link{ font-size: 0.8rem; padding: 3px 0; }
}

/* Очень маленькие высоты: ужимаем крошки/поиск/футер и панель */
@media (max-height: 568px){
  .catalog__search{ margin-bottom: 6px; }
  .catalog-search__input{ padding: 10px 72px 10px 12px; font-size: .9rem; }
  .catalog-panel{ padding: 8px; gap: 8px; }
  .catalog-panel__title{ font-size: .92rem; letter-spacing: .02em; }
  .catalog-panel__body{ gap: 8px; }
  .catalog-panel__link{ font-size: .8rem; min-height: 22px; line-height: 1.15; }
  /* Для заглушки: выравниваем к верху и разрешаем внутренний скролл, чтобы заголовки не обрезались */
  body.catalog-placeholder .catalog-panel{ justify-content: flex-start; overflow: auto; }
  body.catalog-placeholder .catalog-panel p{ font-size: .84rem; line-height: 1.25; word-break: break-word; }
}

.catalog__header{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2px 0;
  min-height: 10px;
  margin-bottom: clamp(4px, 0.8vw, 10px);
  height: 15px;
}

.catalog-breadcrumbs{
  flex: 0 1 auto;
  line-height: 1.2;
}

.breadcrumb-list{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}

.breadcrumb-list__item{
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--catalog-muted);
}

.breadcrumb-list__item::after{
  content: "/";
  color: rgba(0,0,0,0.2);
  font-size: 0.9em;
}

.breadcrumb-list__item:last-child::after{ content: ''; }

.breadcrumb-list__item--current{
  color: #4a596b;
  font-weight: 600;
}

.breadcrumb-list__link{
  color: inherit;
  text-decoration: none;
  transition: color var(--catalog-transition);
}

.breadcrumb-list__link:hover,
.breadcrumb-list__link:focus-visible{
  color: var(--catalog-focus);
  outline: none;
}


.catalog__search{
  display: flex;
  justify-content: center;
  margin-bottom: clamp(12px, 2.5vw, 28px);
}

.catalog-search{
  position: relative;
  flex: 0 0 680px;
  width: clamp(360px, 52vw, 680px);
  max-width: 100%;
}

.catalog-search__field{ position: relative; }

.catalog-search__input-wrapper{ position: relative; }

.catalog-search__input{
  width: 100%;
  padding: 14px 96px 14px 16px;
  border-radius: 12px;
  border: var(--catalog-border);
  background: #f8fbff;
  font-size: 1rem;
  transition: border-color var(--catalog-transition), box-shadow var(--catalog-transition);
}

.catalog-search__icon{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  width: 28px;
  height: 28px;
  justify-content: center;
  align-items: center;
  color: var(--catalog-focus);
}
.catalog-search__icon svg{
  width: 18px;
  height: 18px;
  display:block;
  fill: currentColor;
}

.catalog-search__input:focus-visible{
  outline: none;
  border-color: var(--catalog-focus);
  box-shadow: 0 0 0 3px rgba(43, 143, 235, 0.2);
}

.catalog-search__reset{
  position: absolute;
  inset: 0 52px 0 auto;
  border: none;
  background: none;
  width: 32px;
  cursor: pointer;
}

.catalog-search__reset::before,
.catalog-search__reset::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: var(--catalog-muted);
  transform-origin: center;
}

.catalog-search__reset::before{ transform: translate(-50%, -50%) rotate(45deg); }
.catalog-search__reset::after{ transform: translate(-50%, -50%) rotate(-45deg); }

.catalog-search__results{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  border-radius: 12px;
  border: var(--catalog-border);
  background: #fff;
  box-shadow: 0 12px 32px rgba(18, 43, 70, 0.12);
  padding: 8px 0;
  max-height: 320px;
  overflow-y: auto;
  z-index: 50;
}

.catalog-search__list{ list-style: none; margin: 0; padding: 0; }

.catalog-search__item{ margin: 0; }

.catalog-search__button{
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--catalog-text);
  transition: background var(--catalog-transition), color var(--catalog-transition);
}

.catalog-search__button mark{
  display: contents;
  background: rgba(43, 143, 235, 0.18);
  color: #2b8feb;
}

.catalog-search__button:hover,
.catalog-search__button:focus-visible,
.catalog-search__button[aria-selected="true"]{
  background: rgba(43, 143, 235, 0.12);
  color: var(--catalog-focus);
  outline: none;
}

.catalog-search__hint{
  font-size: 0.8rem;
  color: var(--catalog-muted);
}

.catalog__layout{
  display: grid;
  grid-template-columns: minmax(220px, var(--catalog-sidebar-width)) 1fr;
  gap: var(--catalog-gap);
  position: relative;
  min-height: 100%;
}

/* На странице-заглушке объединяем колонки в одну */
.catalog__layout--single-column{
  grid-template-columns: 1fr !important;
}

.catalog-sidebar{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--catalog-gap-sm);
  padding-right: 8px;
  height: 100%;
}

.catalog-sidebar__nav{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.catalog-sidebar__list{
  list-style: none;
  margin: 2px 0 0 0 !Important;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.catalog-sidebar__item{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}

.catalog-sidebar__link{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: var(--catalog-border);
  border-radius: 14px;
  background: #f7f9fc;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--catalog-text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform var(--catalog-transition), box-shadow var(--catalog-transition), border-color var(--catalog-transition), background var(--catalog-transition);
}

.catalog-sidebar__link:hover,
.catalog-sidebar__link:focus-visible,
.catalog-sidebar__item--active .catalog-sidebar__link{
  background: #fff;
  border-color: rgba(43, 143, 235, 0.35);
  box-shadow: 0 12px 24px rgba(43, 143, 235, 0.16);
  color: var(--catalog-focus);
  outline: none;
}

.catalog-sidebar__icon{
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: var(--catalog-focus);
}

.catalog-sidebar__label{ flex: 1 1 auto; text-align: left; }

.catalog-sidebar__accordion{
  display: none;
  padding: 0 14px 10px 48px;
  background: rgba(43, 143, 235, 0.06);
}

.catalog-sidebar__item--expanded .catalog-sidebar__accordion{ display: block; }

.catalog-sidebar__group-title{
  margin: 12px 0 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--catalog-muted);
}

.catalog-sidebar__sub-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.catalog-sidebar__sub-link{
  font-size: 0.9rem;
  text-align: left;
  background: none;
  border: none;
  padding: 6px 0;
  color: var(--catalog-text);
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: color var(--catalog-transition), border-color var(--catalog-transition);
}

.catalog-sidebar__sub-link:hover,
.catalog-sidebar__sub-link:focus-visible{
  color: var(--catalog-focus);
  border-color: rgba(43, 143, 235, 0.4);
  outline: none;
}

.catalog-main{
  position: relative;
  padding: 0;
  border: none;
  background: transparent;
  min-height: 100%;
}

.catalog-panel{
  background: #f9fbff;
  border-radius: 18px;
  border: var(--catalog-border);
  box-shadow: 0 6px 18px rgba(12, 43, 73, 0.08);
  padding: clamp(18px, 3vw, 28px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vw, 28px);
  min-height: 100%;
}

.catalog-panel__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.catalog-panel__title{
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.catalog-panel__body{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(16px, 3vw, 24px);
}

.catalog-panel__group{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.catalog-panel__group-title{
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--catalog-muted);
  text-transform: uppercase;
}

.catalog-panel__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.catalog-panel__link{
  text-decoration: none;
  color: var(--catalog-text);
  font-size: 0.95rem;
  border-bottom: 1px solid transparent;
  transition: color var(--catalog-transition), border-color var(--catalog-transition);
}

.catalog-panel__link:hover,
.catalog-panel__link:focus-visible{
  color: var(--catalog-focus);
  border-color: rgba(43, 143, 235, 0.4);
  outline: none;
}

.catalog-panel__empty{
  font-size: 0.95rem;
  color: var(--catalog-muted);
}


@media (max-width: 1024px){

  .catalog{
    padding: 20px 16px 48px;
  }
  .catalog__header{
    flex-direction: column;
    align-items: flex-start;
  }
  .catalog__search{
    justify-content: flex-start;
  }
  .catalog-search{
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }
  .catalog-breadcrumbs{ flex: 1 1 auto; }
  .catalog__layout{
    grid-template-columns: 1fr;
  }
  .catalog-sidebar{ padding-right: 0; }
  .catalog-sidebar__link{ justify-content: space-between; }
  .mega-panel{
    position: static;
    width: 100%;
    height: auto;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto;
    margin-top: 12px;
    display: none;
  }
  .mega-panel[data-visible="true"]{ display: block; }
  .mega-panel__body{ max-height: none; }
}

@media (max-width: 768px){
  .catalog-sidebar__link{
    font-size: 0.85rem;
    padding: 10px 12px;
  }
  .catalog-sidebar__icon{ width: 24px; height: 24px; flex-basis: 24px; }
}

@media (max-width: 480px){
  .catalog{ padding: 16px 12px 40px; }
  .catalog-main{ padding: 16px; }
  .catalog-search__input{ font-size: 0.95rem; }
}

@media (max-width: 360px){
  .catalog-sidebar__link{ gap: 8px; padding: 10px; }
  .catalog-search__input{ padding-right: 36px; }
}

/* Legacy catalog pages (будут постепенно переведены на новый шаблон) */
.catalog-layout{
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
  flex-wrap: wrap;
}
.catalog-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  flex: 1 1 auto;
}
.catalog-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 240px;
  min-height: 160px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  padding: 20px;
  text-decoration: none;
  color: var(--catalog-text, #2f2f2f);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.catalog-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.12);
}
.catalog-card i{
  font-size: 36px;
  margin-bottom: 10px;
  color: var(--catalog-focus, #2b8feb);
}
.catalog-card span{
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.9rem;
}

@media (max-width: 1024px){
  .catalog-layout{ flex-direction: column; align-items: stretch; min-height: auto; }
  .catalog-sidebar{ flex-direction: row; flex-wrap: wrap; gap: 12px; max-height: none; overflow: visible; }
  .catalog-tree{ width: 100%; order: 3; max-height: none; padding-right: 0; margin-right: 0; }
  .catalog-tree.is-open{ max-height: none; }
  .catalog-toggle{ flex: 1 1 220px; }
  .catalog-grid{ max-width: 860px; }
}
@media (max-width: 480px){
  .catalog-grid{ gap:12px; max-width: 100%; justify-content: center; }
  .catalog-tree{ max-width: 100%; font-size: 13px; }
  .catalog-toggle{ white-space: normal; }
}
/* удерживаем меню открытым, когда курсор на списке */
.header-submenu:hover{ display:block; }

/* Медицинская мебель — фон «паутинка» как на /catalog */
#carousel_medf{ position: relative; overflow: hidden; }
#carousel_medf::before{
  content: '';
  position: absolute;
  inset: 0;
  background: url('/public/img/spider-r.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.2;
  pointer-events: none;
}

/* Главная: адрес — верхний регистр */
#carousel_4ab3 .u-text-2{ text-transform: uppercase; }

/* Футер: слоган — верхний регистр и чуть меньше размер */
footer.u-footer .u-text-1{ text-transform: uppercase; font-size: .95rem; }

/* ===== Compact footer for very small heights (placeholder focus) ===== */
@media (max-height: 700px){
  body.catalog-placeholder footer.u-footer .u-sheet-1{ min-height: 44px !important; }
  body.catalog-placeholder footer.u-footer .u-text-1{ margin: 8px auto !important; font-size: .85rem !important; line-height: 1.25 !important; }
}
@media (max-height: 600px){
  body.catalog-placeholder footer.u-footer .u-sheet-1{ min-height: 36px !important; }
  body.catalog-placeholder footer.u-footer .u-text-1{ margin: 6px auto !important; font-size: .8rem !important; line-height: 1.2 !important; max-width: 92vw !important; }
}
@media (max-height: 568px){
  body.catalog-placeholder footer.u-footer .u-sheet-1{ min-height: 28px !important; }
  body.catalog-placeholder footer.u-footer .u-text-1{ margin: 3px auto !important; font-size: .70rem !important; line-height: 1.15 !important; max-width: 86vw !important; }
}

/* Узкие экраны: <=320px — уменьшаем расчётную высоту футера */
@media (max-width: 320px){
  :root{ --footer-h: 43px; }
}

/* Малые ширины: уменьшаем шрифт и разрешаем переносы в футере */
@media (max-width: 390px){
  footer.u-footer .u-text-1{
    font-size: .78rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 87vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (max-width: 360px){
  footer.u-footer .u-text-1{ font-size: .74rem !important; }
}

/* Оффканвас-меню (выезжающее): единый шрифт и верхний регистр */
.ll-nav-rr a.u-nav-link{ text-transform: uppercase; font-weight: 600; font-family: inherit; font-size: 14px; letter-spacing: .02em; color: var(--brand-blue); }

/* Прячем «дефолтное» десктоп-меню nicepage, чтобы не дублировалось с нашим */
.u-menu .u-nav-container{ display:none !important; }

/* На планшетах и мобильных показываем иконки вместо текста, меню остаётся компактным */
@media (max-width: 1024px){
  .header-desktop-nav{ gap: 12px; }
  .header-desktop-nav .txt{ display: none; }
  .header-desktop-nav .ico{ display: inline-block; font-size: 18px; }
  /* На планшетах подменю не показываем — используем оффканвас */
  .header-submenu{ display: none !important; }
}
@media (max-width: 480px){
  .header-desktop-nav{ gap: 10px; margin: 0 8px; }
  .header-desktop-nav a{ padding: 6px 8px; }
  .header-desktop-nav .ico{ font-size: 16px; }
  .u-image.u-logo.u-image-1{ flex: 0 0 auto !important; }
  .u-logo-image-1{ max-height: 40px !important; height: auto !important; width: auto !important; }
  .header-desktop-nav{ margin-left: auto !important; }
  .header-submenu{ display: none !important; }
}

/* Бургер: финальные правила см. ниже (Burger color overrides) */
/* JS-класс как страховка поверх :hover, если наследование сбоит */
.u-header .u-menu-1 .menu-collapse a.u-nav-link.burger-hover svg use{ fill:#000 !important; }

/* ===== Burger color overrides (final, high-priority) ===== */
.u-header .u-menu-1 .menu-collapse a.u-nav-link:not(:hover):not(:focus){
  color: var(--brand-blue) !important;
}
.u-header .u-menu-1 .menu-collapse a.u-nav-link svg use,
.u-header .u-menu-1 .menu-collapse a.u-nav-link svg rect{ transition: fill .2s ease; }
.u-header .u-menu-1 .menu-collapse a.u-nav-link:not(:hover):not(:focus) svg use,
.u-header .u-menu-1 .menu-collapse a.u-nav-link:not(:hover):not(:focus) svg rect{
  fill: var(--brand-blue) !important;
}
.u-header .u-menu-1 .menu-collapse a.u-nav-link:hover,
.u-header .u-menu-1 .menu-collapse a.u-nav-link:focus{
  color: #000 !important;
}
.u-header .u-menu-1 .menu-collapse a.u-nav-link:hover svg use,
.u-header .u-menu-1 .menu-collapse a.u-nav-link:focus svg use,
.u-header .u-menu-1 .menu-collapse a.u-nav-link:hover svg rect,
.u-header .u-menu-1 .menu-collapse a.u-nav-link:focus svg rect{ fill: #000 !important; }

/* Более корректно: скрываем только клик‑фокус, оставляем focus-visible для клавиатуры */
.u-header a:focus:not(:focus-visible){
  outline: none !important;
  box-shadow: none !important;
}
.u-header a:focus-visible{
  outline: 0; /* можем оставить тонкую подсветку, но по требованию убираем */
}

/* ===== Offcanvas Panel (right slide-in) ===== */
/* Make Nicepage offcanvas behave like a right panel with fixed width */
.u-enable-responsive.u-offcanvas .u-sidenav.ll-menu-gg{
  /* panel sizing */
  width: var(--offcanvas-w) !important;
  min-width: 260px !important;
  max-width: 90vw !important;
  flex: 0 0 var(--offcanvas-w) !important;
  /* match dropdown submenu background */
  background: #ffffff !important;
  color: #1f1f1f !important;
  /* заполняем всю высоту контейнера-коллапса */
  height: 100% !important;
  position: relative !important; /* для фонового ::before */
}
/* ensure Nicepage's .u-black pseudo-background does not darken the panel */
.u-enable-responsive.u-offcanvas .u-sidenav.ll-menu-gg.u-black:before{
  background-color: #ffffff !important;
}
/* Ensure the offcanvas transitions from the right on open */
.u-enable-responsive.u-offcanvas.u-menu-open-right .u-sidenav{
  transition: margin-right 500ms ease !important;
  margin-left: auto !important; /* never animate from left */
}
/* closed (right, off-screen) */
.u-enable-responsive.u-offcanvas.u-menu-open-right:not(.open) .u-sidenav{
  margin-left: auto !important;
  margin-right: calc(var(--offcanvas-w) * -1) !important;
}
/* open (slide in from right) */
.u-enable-responsive.u-offcanvas.u-menu-open-right.open .u-sidenav{ margin-left: auto !important; margin-right: 0 !important; }

/* Make the menu list vertical and compact inside the panel */
.u-sidenav .ll-nav-rr{ display:block !important; padding: 6px 0 !important; min-height: auto !important; text-align: left !important; }
.u-sidenav .ll-nav-rr li{
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}
.u-sidenav .ll-nav-rr a.u-nav-link{
  display:flex !important; align-items:center; justify-content:flex-start; gap:10px;
  padding: 8px 10px 8px 25px !important; /* 25px from left edge */
  color:#1f1f1f !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  text-align: left !important;
}
.u-sidenav .ll-nav-rr a.u-nav-link i{ width: 24px; min-width:24px; text-align:center; font-size:24px; }
.u-sidenav .ll-nav-rr a.u-nav-link:hover{ background: rgba(0,0,0,.06); color: var(--brand-blue) !important; }

/* Close button: keep visible and touch-friendly */
.u-enable-responsive .u-menu-close{ margin: 8px 8px 2px auto !important; width: 28px; height: 28px; }

/* Overlay should cover whole viewport; color via Nicepage, but hide desktop arrows while open handled above */
/* (убрано управление .u-menu-overlay — используется body::after) */

/* Small devices: keep the same panel sizing logic */
@media (max-width: 480px){
  .u-enable-responsive.u-offcanvas .u-sidenav.ll-menu-gg{ width: 280px !important; min-width: 260px !important; max-width: 92vw !important; }
}

/* Branded grid background inside the side panel */
.u-enable-responsive.u-offcanvas .u-sidenav.ll-menu-gg::before{
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(168, 209, 245, 0.35), rgba(168, 209, 245, 0.35)),
    url('/public/img/spider-r.svg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-color: #ffffff; /* base equals dropdown submenu */
  opacity: .35; /* match header-submenu feel */
  pointer-events: none; z-index: 0;
  transform: scaleX(-1); /* mirror the web background */
  transform-origin: center;
}
.u-enable-responsive.u-offcanvas .u-sidenav.ll-menu-gg > *{ position: relative; z-index: 1; }

/* Keep desktop header menu visible while offcanvas is open */
body.menu-open .header-desktop-nav,
body.menu-overlay .header-desktop-nav,
body.u-offcanvas-opened .header-desktop-nav{
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Force collapse container to anchor to the right and sit below header */
.u-menu.u-offcanvas .u-nav-container-collapse{
  left: auto !important;
  right: 0 !important;
  top: var(--header-h, 85px) !important;
  bottom: auto !important;
  height: calc(100dvh - var(--header-h, 85px)) !important;
  /* shadow applied only when menu is open (see rule below) */
  box-shadow: none !important;
}
@supports not (height: 100dvh){
  .u-menu.u-offcanvas .u-nav-container-collapse{ height: calc(100vh - var(--header-h, 85px)) !important; }
}
/* (shadow handled directly on .u-nav-container-collapse) */
/* Apply shadow only while open to avoid visible sliver on pages */
.u-enable-responsive.u-offcanvas.open .u-nav-container-collapse{
  box-shadow: -20px 0px 12px 0px #00000024 !important;
}

/* ЕДИНЫЙ ОВЕРЛЕЙ: затемняем ТОЛЬКО контент ниже шапки; меню/шапка остаются сверху */
body.menu-overlay::after,
body.u-offcanvas-opened::after{
  content: '';
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: var(--header-h, 85px);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  z-index: 499 !important; /* выше контента и карусели */

}
nav.u-menu.u-offcanvas .u-sidenav{ position: fixed; z-index: 9000 !important; }
/* Mobile: make the menu full-width and compact the list */
@media (max-width: 600px){
  /* panel takes entire viewport width */
  .u-enable-responsive.u-offcanvas .u-sidenav.ll-menu-gg{
    width: 100vw !important;
    max-width: 100vw !important;
    flex: 0 0 100vw !important;
  }
  /* closed state: fully outside the screen */
  .u-enable-responsive.u-offcanvas.u-menu-open-right:not(.open) .u-sidenav{
    margin-right: -100vw !important;
  }
  /* (перенастройка overlay на мобилках не требуется) */
  /* compact list spacing to avoid scroll */
  .u-sidenav .ll-nav-rr{ padding: 2px 0 !important; }
  .u-sidenav .ll-nav-rr li{ margin: 0 !important; }
  .u-sidenav .ll-nav-rr a.u-nav-link{
    padding: 4px 10px 4px 18px !important;
    line-height: 1.08 !important;
    gap: 6px !important;
  }
  .u-sidenav .ll-nav-rr a.u-nav-link i{ width: 20px; min-width: 20px; font-size: 20px; }
}

/* ===== Home: make .u-group-1 fill its parent ===== */
.u-section-5 .u-layout-cell-2{ display:flex !important; align-items: stretch !important; }
.u-section-5 .u-group-1{
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
}
.u-section-5 .u-container-layout-2{ padding: 0 !important; }
.u-section-5 .u-container-layout-3{
  height: 100% !important;
  padding: 60px !important; /* как в соседнем блоке */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-end !important; /* align content to the right edge */
  text-align: right !important;     /* right-align text inside */
}
/* Right-align the CTA button within the text block */
.u-section-5 .u-group-1 .u-btn-1{ margin-left: auto !important; margin-right: 0 !important; }

/* Headline styles and animation */
.u-section-5 .u-text-1{ line-height: 1.2 !important; letter-spacing: 1px !important; margin: 0 0 10px 0 !important; }
.u-section-5 .u-text-1 .dyn{
  display:inline-block;
  will-change:transform,opacity;
  transition: opacity .35s ease, transform .35s ease;
  text-transform: uppercase;
}
.u-section-5 .u-text-1 .dyn.swap{ opacity:.05; transform: translateY(-0.35em); }

/* Section 6: dynamic ending for "Поможем выбрать ..." */
.u-section-6 .u-text-1{ text-transform: uppercase; }
.u-section-6 .u-text-1 .dyn-choose{
  display:inline-block;
  will-change:transform,opacity;
  transition: opacity .3s ease, transform .3s ease;
  text-transform: uppercase;
}
.u-section-6 .u-text-1 .dyn-choose.swap{ opacity:.05; transform: translateY(-0.35em); }

/* Section 6: phone lines — icon + spaced number */
.u-section-6 .u-text-1 a{ display:inline-flex; align-items:center; gap: 8px; white-space: nowrap; }
.u-section-6 .u-text-1 a i{ margin-right: 4px; }
.catalog-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* ===== Force-disable header dropdown on hover (desktop) ===== */
.header-desktop-nav li.has-sub:hover > .header-submenu,
.header-desktop-nav li.has-sub:focus-within > .header-submenu,
.header-desktop-nav li.has-sub.open > .header-submenu{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.header-submenu:hover{ display: none !important; }