/* Static storefront fixes: Aspro without Bitrix JS + light theme 1:1 with artpatent.ru */

html {
  color-scheme: light only;
  --theme-base-color: #343638;
  --theme-base-opacity-color: #3436381a;
  --theme-more-color: #343638;
  --theme-border-radius: 4px;
  --theme-text-transform: uppercase;
  --theme-letter-spacing: 0.8px;
  --theme-button-font-size: 2px;
  --theme-button-padding-2px: 2px;
  --theme-button-padding-1px: 1px;
  --theme-more-color-hue: 210;
  --theme-more-color-saturation: 4%;
  --theme-more-color-lightness: 21%;
  --theme-base-color-hue: 210;
  --theme-base-color-saturation: 4%;
  --theme-base-color-lightness: 21%;
  --theme-lightness-hover-diff: 6%;

  /*
   * Force LIGHT theme. Aspro uses --light/--dark toggles; without setTheme.js
   * dual-tone vars resolve wrong and look like a dark/washed theme.
   */
  --ON_toggle: initial;
  --OFF_toggle: ;
  --light: var(--ON_toggle);
  --dark: var(--OFF_toggle);
  --white_text_black: #333333;
  --white_text_black_reverse: #ffffff;
  --basic_text_black: #555555;
  --light_basic_text_black: #666666;
  --black_bg_black: #ffffff;
  --darkerblack_bg_black: #f8f8f8;
  --stroke_black: #e5e5e5;
  --stroke_black_hover: #ffffff;
  --card_bg_black: #ffffff;
  --light_bg_black: #fafafa;
  --fill_dark_light: #333333;
  --fill_dark_light_white_hover: #333333;
  --fill_dark_light_hover: #343638;
  --dff_dark_light: #ffffff;
  --dff_opacity_dark_light: #00000026;
  --df_opacity_dark_light: #0000001a;
  --d1b_dark_light: #333333;
  --d2d_dark_light: #2d2d2d;
  --d3_dark_light: #333333;
  --df4_dark_light: #f4f4f4;
  --d6t9_dark_light: #666666;
  --d3t9_dark_light: #333333;
}

body,
body.theme-light,
body.theme-default,
html.theme-light,
html.theme-default {
  color-scheme: light only;
  background-color: #fff;
  color: #555;
  --white_text_black: #333333;
  --basic_text_black: #555555;
  --light_basic_text_black: #666666;
  --black_bg_black: #ffffff;
  --darkerblack_bg_black: #f8f8f8;
  --stroke_black: #e5e5e5;
  --card_bg_black: #ffffff;
  --light_bg_black: #fafafa;
  --light: var(--ON_toggle);
  --dark: var(--OFF_toggle);
}

/* Never apply dark-theme body/html classes on this storefront */
html.theme-dark,
body.theme-dark {
  color-scheme: light only;
}

/* ===== Header: solid white + dark text on inner pages (matches prod) ===== */
body:not(.front_page) .header,
body:not(.front_page) .header.light,
body:not(.front_page) .header .top-bar,
body:not(.front_page) .header .nav-bar,
body:not(.front_page) .header__inner,
body:not(.front_page) .ap-header-root .header {
  color: #343638 !important;
  background: #fff !important;
}

body:not(.front_page) .header .banner-light-text,
body:not(.front_page) .header .menu-light-text,
body:not(.front_page) .header .top-bar__text,
body:not(.front_page) .header .top-bar__link,
body:not(.front_page) .header .top-bar__phone,
body:not(.front_page) .header .dark_link,
body:not(.front_page) .header a,
body:not(.front_page) .header .header-menu__title,
body:not(.front_page) .header .header-menu__link {
  color: #343638 !important;
}

body:not(.front_page) .header svg path,
body:not(.front_page) .header .banner-light-icon-fill *,
body:not(.front_page) .header .menu-light-icon-fill *,
body:not(.front_page) .header .fill-dark-light,
body:not(.front_page) .header .fill-dark-light * {
  fill: #343638 !important;
}

/* Social buttons keep dark tile + white glyph (same on home and inner pages) */
body:not(.front_page) .header .top-bar__social svg path {
  fill: #fff !important;
}

body:not(.front_page) .header .banner-light-icon-stroke *,
body:not(.front_page) .header .menu-light-icon-stroke * {
  stroke: #343638 !important;
}

/* Home: transparent header only with front_page + header_opacity */
body.front_page.header_opacity .header {
  background: transparent;
}

/* Menu: one row; overflow items move into «...» via Header.tsx */
.nav-bar__desktop-menu .header-menu__wrapper,
.header-menu__wrapper {
  flex-wrap: nowrap !important;
  white-space: nowrap;
  overflow: visible;
  min-width: 0;
  width: 100%;
}

.header-menu__item {
  flex-shrink: 0;
}

.header-menu__item.ap-menu-hidden {
  display: none !important;
}

/* Menu titles keep prod's 16px (template_styles); items that don't fit go to «...» — 02.10.2026 */

/* Year / filter chips — never wash out */
.news-list__filter a,
.news-list__filter span,
.section-filter a,
.section-filter span,
.filter-panel a,
.filter-panel span,
.tabs .nav-tabs a,
.select-outer,
.select-outer a,
.year_block a,
.year_block span,
a[href*="year="] {
  color: #343638 !important;
  opacity: 1 !important;
}

a[href*="year="]:not(.active):not(.current) {
  color: #6a6e72 !important;
}

/* Sidebar promo / banners — readable text on white */
.side_right .banner,
.side_right .banners-side,
.side_right .text,
.side_right p,
.side_right .title,
.side_right .name,
.right_block .banner,
.right_block p,
.right_block .text,
.sidebar .text,
.sidebar p,
.banners-content,
.banners-content p,
.banners-content .title {
  color: #343638 !important;
}

.side_right .muted,
.side_right .font_upper,
.right_block .muted,
.right_block .font_upper {
  color: #6a6e72 !important;
}

/* Page titles / breadcrumbs — grey strip is LIGHT on prod (#f8f8f8), titles DARK */
body:not(.has-long-banner) .page-top-wrapper--grey {
  background: #f8f8f8 !important;
  border-bottom-color: #e5e5e5 !important;
}

.page-top,
.page-top h1,
#pagetitle,
.page-top .switcher-title,
.breadcrumb,
.breadcrumb a,
.breadcrumb span {
  color: #333 !important;
}

body:not(.front_page) .page-top-wrapper--grey #pagetitle,
body:not(.front_page) .page-top-wrapper--grey .switcher-title,
body:not(.front_page) section.page-top #pagetitle {
  color: #333 !important;
}

/* Menu "dotted" trim waits for JS — show links immediately */
.hide-dotted:not(.dotted-complete),
.hide-dotted:not(.dotted-complete) * {
  opacity: 1 !important;
}

/* Owl carousels: Aspro shows loader + hides children until .owl-loaded (we use Swiper) */
.owl-carousel {
  display: block !important;
  background-image: none !important;
  min-height: 0 !important;
}

.owl-carousel:not(.owl-loaded) {
  display: flex !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 16px;
  -webkit-overflow-scrolling: touch;
  background-image: none !important;
  min-height: 0 !important;
}

.owl-carousel:not(.owl-loaded) *,
.owl-carousel:not(.owl-loaded) .owl-item,
.owl-carousel:not(.owl-loaded) > .owl-stage-outer,
.owl-carousel:not(.owl-loaded) > .owl-stage {
  display: revert !important;
}

.owl-carousel:not(.owl-loaded) > * {
  flex: 0 0 auto;
}

.swiper-container:not(.swiper-initialized) {
  overflow: hidden;
}

.swiper-container:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
}

.swiper-container:not(.swiper-initialized) .swiper-slide {
  flex-shrink: 0;
  width: 100%;
}

/* Main banner: Swiper lazy never completes on static export — show hero + search */
.main-slider .swiper-lazy:not(.swiper-lazy-loaded) > div,
.main-slider .swiper-lazy:not(.swiper-lazy-loaded) .banners-big__inner,
.main-slider .swiper-lazy:not(.swiper-lazy-loaded) .tm-hero-search {
  opacity: 1 !important;
  visibility: visible !important;
}

.main-slider .swiper-lazy:not(.swiper-lazy-loaded) {
  background-size: cover !important;
}

/* Home slide without bg photo (--no-bg): dark text on white */
.main-slider .main-slider__item--no-bg .banners-big__item--dark,
.main-slider .main-slider__item--no-bg .banners-big__item--dark .switcher-title,
.main-slider .main-slider__item--no-bg .banners-big__item--dark .banners-big__top-text,
.main-slider .main-slider__item--no-bg .banners-big__item--dark .banners-big__text-wrapper {
  color: #141618 !important;
}

.banners-big--normal .banners-big__depend-height {
  min-height: 420px;
}

@media (min-width: 768px) {
  .banners-big--normal .banners-big__depend-height {
    min-height: 580px;
  }
}

.lazyload[style*="background-image"],
[data-bg] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body.front_page .main.banner-auto {
  position: relative;
}

.appear-block,
.lazyloaded,
.lazyload {
  opacity: 1 !important;
  visibility: visible !important;
}

.item-views .item,
.blog-list__item,
.news-list__item,
.services-list__item,
.projects-list__item,
.reviews-list__item,
.brands-list__item {
  opacity: 1 !important;
  visibility: visible !important;
}

.blog-list__item-image,
.news-list__item-image,
.company-item__picture {
  min-height: 120px;
  background-color: #f3f3f3;
}

/* Review avatars are 60×60 — do not inflate to 120px placeholder */
.reviews-list__item-image-wrapper--image-small .reviews-list__item-image {
  min-height: 0 !important;
  background-color: transparent;
}

.brands-list__image {
  max-height: 80px;
  width: auto;
  object-fit: contain;
}

/* Home reviews: 2 wide cards on desktop, equal height, shadow padding like prod Owl */
.reviews-list .ap-owl-as-swiper.ap-reviews-swiper {
  overflow: visible;
  padding: 24px 0;
  margin: -24px 0;
}

.reviews-list .ap-reviews-swiper .swiper-wrapper {
  align-items: stretch;
}

.reviews-list .ap-reviews-swiper .swiper-slide {
  height: auto;
  display: flex;
  box-sizing: border-box;
}

.reviews-list .ap-reviews-swiper .swiper-slide > .reviews-list__item {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.reviews-list .ap-reviews-swiper .swiper-slide > .reviews-list__item.bordered {
  height: 100%;
}

.reviews-list .ap-reviews-swiper .reviews-list__item-preview-wrapper {
  flex: 1 1 auto;
}

@media (max-width: 767px) {
  .reviews-list .owl-carousel--items-width-360-adaptive.ap-reviews-swiper .swiper-slide {
    width: 360px !important;
  }
}

@media (max-width: 450px) {
  .reviews-list .owl-carousel--items-width-360-adaptive.ap-reviews-swiper .swiper-slide {
    width: 260px !important;
  }
}

/* Keep imported items paintable; overflow hiding uses .ap-menu-hidden */
.header-menu__item.unvisible:not(.ap-menu-hidden) {
  visibility: visible !important;
  opacity: 1 !important;
}

/*
 * Project cards (items-list-inner): keep image fixed, text takes remaining width.
 * Without min-width:0 on the text column, titles collapse to 1-letter-wide columns.
 */
.items-list-inner__item.flexbox--direction-row {
  align-items: flex-start;
  flex-wrap: nowrap;
}

.items-list-inner__item-image-wrapper {
  flex: 0 0 auto;
  max-width: 300px;
  width: auto;
}

.items-list-inner__item-text-wrapper {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.items-list-inner__item-title,
.items-list-inner__item-text-top-part {
  word-break: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* Size comes from aspro-sections BIG_PICTURES (300×200); keep link as containing block */
.items-list-inner__item-image-wrapper--BIG_PICTURES .items-list-inner__item-link {
  position: relative;
  display: block;
  overflow: hidden;
}

.items-list-inner__item-image-wrapper--BIG_PICTURES .items-list-inner__item-image,
.news-list__item-image,
.blog-list__item-image {
  display: block !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: none !important;
}

.items-list-inner__item-image-wrapper--BIG_PICTURES .items-list-inner__item-image {
  position: absolute;
  inset: 0;
}

/*
 * Site custom CSS in aspro-bundle applied grayscale to lists / whole columns.
 * Prod public pages do not show that wash — keep full color.
 */
.blog-list__item-image,
.company-item__picture,
.brands-list__image-wrapper,
.reviews-list__item-image,
.brand-list-inner__image-bg,
.review-list-inner__image-bg,
.news-list__item-image,
.news-list__item-image--absolute,
.contacts-list__item-image,
.items-list-inner__item-image,
.right_block,
.right_block.narrow_Y,
.main .right_block,
.fancy .lazyloaded {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Content column: light surface, dark readable text */
.main,
.right_block,
.left_block,
.sidearea {
  color: #555;
}

.main a.dark_link,
.right_block a.dark_link,
.ordered-block__title,
.items-list-inner__item-title,
.news-list__item-title,
.blog-list__item-title,
.services-list__item-title {
  color: #333 !important;
}

@media (max-width: 767px) {
  .items-list-inner__item.flexbox--direction-row {
    flex-wrap: wrap;
  }

  .items-list-inner__item-image-wrapper {
    max-width: 100%;
  }
}

/* Reviews / brands: ensure cards and lazy bg images paint without Bitrix JS */
.review-list-inner__item {
  background-color: #fff;
  background-color: var(--card_bg_black);
}

.review-list-inner__image-bg,
.brand-list-inner__image-bg {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1 !important;
  visibility: visible !important;
}

.brand-list-inner__item {
  background-color: #fff;
  background-color: var(--card_bg_black);
}


/* Sidebar banner lazy images */
.left_block img.lazyload[data-src],
.sidearea img.lazyload[data-src] {
  min-height: 200px;
  width: 100%;
  object-fit: cover;
}


/* Footer: force readable light-on-dark (Aspro vars sometimes flip) */
.footer,
.footer a,
.footer .footer__title,
.footer .footer__phone,
.footer p,
.footer span {
  color: #fff !important;
}

.footer a:hover {
  opacity: 0.8;
}

.footer .muted,
.footer .font_upper {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* ===== Weber F-02/F-03: no page-level horizontal scroll ===== */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

html.mobile-menu-open,
body.mobile-menu-open {
  overflow: hidden;
}

.content-md,
.right_block,
.detail-text,
.blog-detail,
.news-detail,
.article-content,
.ordered-block {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.content-md table,
.right_block table,
.detail-text table,
.blog-detail table,
.news-detail table,
.article-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.content-md img,
.right_block img,
.detail-text img,
.blog-detail img,
.news-detail img,
.article-content img,
.content-md iframe,
.right_block iframe,
.content-md video,
input[type="file"] {
  max-width: 100%;
  height: auto;
}

.swiper,
.swiper-container,
.owl-carousel,
.reviews-list,
.review-list-inner,
.reviews-list__inner {
  overflow: hidden;
  max-width: 100%;
}

/* News year strip: scroll inside the strip, not the window */
.head-block-wrapper {
  max-width: 100%;
  min-width: 0;
}

.head-block.dropdown-select__list,
.head-block .line-block {
  max-width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}

/* TZK landings keep prod's full-bleed blocks (100vw, left:-16px, margin 0 -16px) — 02.10.2026:
   html/body clip the overflow (overflow-x: clip above), so there is no horizontal scroll.
   Their fixes live in ap-site.css («Лендинги»). */
.footer-4 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100%;
}

@media (max-width: 991px) {
  .container .left_block {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden;
  }
}

@font-face {
  font-family: "FontAwesome";
  src: url("/fonts/font-awesome/fontawesome-webfont.woff2?v=4.7.0") format("woff2"),
    url("/fonts/font-awesome/fontawesome-webfont.woff?v=4.7.0") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Post-audit fixes — 16.09.2026
   Закрывают F-06 (структура H1), F-07/UI-06 (зоны касания), F-08 (cookie),
   UI-02 (обрезка китайского текста первого экрана), UI-04 (ARIA меню).
   Добавлено отдельным блоком в конец файла, чтобы правки было видно.
   ========================================================================== */

/* F-06 — страницы с новым hero-баннером дублировали заголовок: серая плашка
   с <h1 id="pagetitle"> оставалась видимой на EN/CH-страницах услуг. */
body:has(section.banner) .page-top-info {
  display: none !important;
}

/* UI-02 — текст первого экрана на /ch/ обрезался по высоте (line-clamp: 5). */
@media (max-width: 767px) {
  .banners-big__text-block,
  .banners-big__text-block--small {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    -webkit-line-clamp: none !important;
    line-clamp: none !important;
    overflow: visible !important;
  }

  .banners-big__text-wrapper {
    height: auto !important;
  }
}

/* F-07 / UI-06 — зоны касания. Площадь увеличивается псевдоэлементом,
   поэтому вёрстка и отступы не меняются. */
.nav-bar__burger,
.nav-bar__phone-mobile-link {
  min-width: 44px;
  min-height: 44px;
}

.index-block__link,
.ap-new-footer__section-link,
.ap-new-footer__copyright-link,
.services-list__item-childs-item > a,
.mobile-menu__nav-link {
  position: relative;
}

.index-block__link::after,
.ap-new-footer__section-link::after,
.ap-new-footer__copyright-link::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.mobile-menu__nav-link {
  display: block;
  min-height: 44px;
  padding-top: 11px;
  padding-bottom: 11px;
}

.mobile-menu__submenu-toggle {
  min-width: 44px;
  min-height: 44px;
}

/* F-08 — cookie-баннер: текст 9.196px и кнопки высотой 37px. */
.cookie-banner,
.cookie-banner p,
.cookie-banner a {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.cookie-banner .btn,
.cookie-buttons .btn {
  font-size: 14px !important;
  min-height: 44px !important;
  padding: 10px 18px !important;
}

/* UI-04 — видимый фокус для клавиатурной навигации по меню. */
#burgerMenuBtn:focus-visible,
.mobile-menu__close:focus-visible,
.mobile-menu__nav-link:focus-visible,
.mobile-menu__submenu-toggle:focus-visible {
  outline: 2px solid #1f6feb;
  outline-offset: 2px;
}

/* Подстраховка от горизонтального скролла на узких экранах: длинные ссылки
   и таблицы внутри контента. */
@media (max-width: 767px) {
  .detail a,
  .detail p,
  .detail li {
    overflow-wrap: anywhere;
  }

  .detail table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
}

/* Клиентский поиск по сайту: статический экспорт не обрабатывает ?q=,
   поэтому страница /search/ ищет по индексу страниц на стороне браузера. */
.ap-search-results {
  margin: 24px 0 40px;
}

.ap-search-results__status {
  color: #6a6e72;
  margin-bottom: 16px;
}

.ap-search-results__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ap-search-results__item {
  padding: 14px 0;
  border-bottom: 1px solid #e5e5e5;
}

.ap-search-results__link {
  font-size: 17px;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.ap-search-results__desc {
  display: block;
  color: #6a6e72;
  font-size: 14px;
  line-height: 1.5;
}

/* ==========================================================================
   Правки по замечаниям 16.09.2026 — шапка, иконки, мобильная вёрстка
   ========================================================================== */

/* 1. ИКОНКИ МЕНЯЛИ ЦВЕТ ПРИ ПЕРЕХОДЕ СО СТРАНИЦЫ НА СТРАНИЦУ.
   Правило `body:not(.front_page) .header svg path { fill: #343638 !important }`
   выше по файлу закрашивало и контурные иконки: на внутренних страницах
   булавка адреса, конверт и часы превращались в чёрные кляксы.
   Контурная иконка = <svg fill="none"> с path без собственного fill. */
body:not(.front_page) .header svg[fill="none"] path:not([fill]),
body:not(.front_page) .header svg[fill="none"] circle:not([fill]),
body:not(.front_page) .header svg[fill="none"] rect:not([fill]),
body:not(.front_page) .ap-footer-root svg[fill="none"] path:not([fill]) {
  fill: none !important;
}

/* 2. ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКОВ УБРАН ИЗ ШАПКИ (языки — в подвале). */
.top-bar__lang {
  display: none !important;
}

/* 3. ШАПКА НЕ ПОМЕЩАЛАСЬ.
   3a. Телефон и «Заказать обратный звонок» с иконками соцсетей встают в одну
       строку, как только хватает ширины (раньше вторая строка включалась
       жёстко до 1320 px). */
@media (min-width: 981px) {
  .top-bar {
    column-gap: 12px;
  }

  .top-bar__tail {
    flex: 0 1 auto;
    margin-left: auto;
    order: 3;
    gap: 12px;
  }

  .top-bar__item--phone {
    order: 2;
    margin-left: 0;
  }
}

/* 3b. На ноутбучных ширинах всё немного плотнее — иначе пункты меню
       не помещаются и молча исчезают. С 1401 px шапка как на боевом
       (там всё помещается в строку) — 02.10.2026. */
@media (min-width: 981px) and (max-width: 1400px) {
  .top-bar {
    column-gap: 10px;
  }

  .top-bar__text,
  .top-bar__link {
    font-size: 13px;
  }

  .top-bar__phone {
    font-size: 14px;
  }

  .top-bar__icon {
    width: 17px;
    height: 17px;
  }

  .top-bar__social {
    width: 27px;
    height: 27px;
  }

  .nav-bar__desktop-menu .header-menu__item {
    margin: 0 9px;
  }

  .nav-bar__cta {
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
  }
}

/* 3c. Если пункты меню всё же не влезают (узкий ноутбук), скрипт прячет их
       и складывает в кнопку «…». Сама кнопка была display:none, поэтому
       «Новости» и «Контакты» просто пропадали из шапки. */
@media (min-width: 981px) {
  /* :has(.ap-more-link) — показываем кнопку только после того, как скрипт
     реально сложил в неё пункты, иначе она мигает при загрузке */
  .header-menu__item--more-items:not(.ap-menu-hidden):has(.ap-more-link) {
    display: flex !important;
  }
}

/* 4. МОБИЛЬНАЯ ВЁРСТКА: блок клиентов («Наши клиенты»).
   Карточка выстраивалась колонкой с логотипом 180×120 и отступами 36 px —
   один клиент занимал почти весь экран. Делаем компактную строку. */
@media (max-width: 767px) {
  .brand-list-inner .brand-list-inner__item {
    flex-direction: row !important;
    align-items: center !important;
    padding: 14px 16px !important;
    gap: 14px;
  }

  .brand-list-inner .brand-list-inner__image-wrapper {
    margin-right: 0 !important;
    flex: 0 0 auto;
  }

  .brand-list-inner .brand-list-inner__image {
    width: 96px !important;
    height: 58px !important;
  }

  .brand-list-inner .brand-list-inner__content-wrapper {
    width: auto !important;
    min-width: 0;
  }

  .brand-list-inner .brand-list-inner__top {
    margin-bottom: 4px;
  }

  .brand-list-inner .brand-list-inner__name {
    font-size: 1em;
    line-height: 1.35;
  }
}

/* 5. МОБИЛЬНАЯ ВЁРСТКА: список услуг внутри карточки на главной и /services/.
   Ссылки шли сплошным текстом через тире — на узком экране это читается
   как «стена». Делаем нормальный список: одна услуга — одна строка. */
@media (max-width: 767px) {
  .services-list__item-childs .list-unstyled,
  .services-list__item-childs-item-wraper {
    display: block;
  }

  .services-list__item-childs-item {
    display: block;
    padding: 5px 0;
  }

  .services-list__item-childs-item-separator {
    display: none;
  }
}

/* 6. Языки переехали из шапки в подвал (рядом с политикой и cookie). */
.ap-new-footer__lang {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ap-new-footer__lang .ap-new-footer__copyright-link + .ap-new-footer__copyright-link {
  border-left: 1px solid currentColor;
  padding-left: 10px;
  opacity: 0.85;
}

/* 7. Заголовок страницы обрезался на узких экранах: блок .topic шириной 178 px
   при overflow:hidden съедал последнее слово («…персонаже» вместо
   «…персонажей»). Отдаём заголовку всю ширину контейнера. */
@media (max-width: 600px) {
  .page-top .cowl .topic {
    width: 100%;
    overflow: visible;
  }

  .page-top #pagetitle,
  .page-top .switcher-title {
    overflow-wrap: anywhere;
  }
}

/* 8. МОБИЛЬНАЯ ВЁРСТКА: полоса логотипов клиентов на главной.
   Слайдер показывал один логотип на весь экран, прижатый к левому краю без
   отступов, — логотип выглядел обрезанным, вокруг пустота. На телефоне
   раскладываем логотипы сеткой 2 в ряд и гасим трансформации слайдера. */
@media (max-width: 767px) {
  .brands-list .swiper-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    transform: none !important;
    transition: none !important;
    justify-content: center;
    padding-inline: 10px;
    row-gap: 6px;
  }

  .brands-list .swiper-slide {
    width: 50% !important;
    max-width: 50% !important;
    margin: 0 !important;
    height: auto !important;
  }

  .brands-list .brands-list__item {
    padding: 12px 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .brands-list .brands-list__image-wrapper {
    margin: 0 auto !important;
    max-width: 100%;
  }

  .brands-list .brands-list__image {
    max-width: 100%;
    background-size: contain;
  }
}

/* 9. Иконки в карточках услуг на главной обрезались снизу: SVG рисовался
   40×47 в контейнере 40×40 с overflow:hidden, и у ®, шестерёнки и остальных
   срезало нижнюю часть (и на десктопе, и на телефоне).
   Вписываем иконку в квадрат, пропорции сохраняются сами. */
.services-list__item-image-wrapper--ICONS .services-list__item-link {
  overflow: visible;
}

.services-list__item-image-wrapper--ICONS .services-list__item-link > .svg,
.services-list__item-image-wrapper--ICONS .services-list__item-link svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ================================================================
   Правки по повторному аудиту от 18.09
   ================================================================ */

/* FORM-01. Чекбокс согласия был display:none — его нельзя было поставить
   с клавиатуры, а браузер не смог бы показать подсказку валидации
   ("An invalid form control is not focusable") и молча отменил бы отправку.
   Делаем его прозрачным, но фокусируемым; галочку рисуем по :checked. */
.callback__checkbox-wrap,
.contact-form__checkbox-wrap {
  position: relative;
}

.callback__checkbox,
.contact-form__checkbox {
  display: block !important;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.callback__checkbox-wrap svg,
.contact-form__checkbox-wrap svg {
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

.callback__checkbox:checked ~ svg,
.contact-form__checkbox:checked ~ svg {
  opacity: 1;
}

.callback__checkbox-wrap:focus-within {
  outline: 2px solid #fff !important;
  outline-offset: 2px;
}

.contact-form__checkbox-wrap:focus-within {
  outline: 2px solid var(--white_text_black, #343638) !important;
  outline-offset: 2px;
}

.callback__checkbox-wrap:has(.callback__checkbox:user-invalid) {
  border-color: #ff6b6b;
}

.contact-form__checkbox-wrap:has(.contact-form__checkbox:user-invalid) {
  border-color: #d93025;
}

/* UI-01. Декоративные узоры блоков с формами имели фиксированную ширину
   479 px и 414 px: на телефоне контейнер (272–342 px) считался «шире
   содержимого» и аудит читал это как обрезанную форму. Сами поля не
   обрезались, но метрику чиним — узор теперь по ширине блока. */
.callback__inner::before,
.callback__inner::after,
.contact-form__inner::before,
.contact-form__inner::after {
  max-width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

/* PERF-01. Owl-карусели пересобираются в Swiper: на время пересборки
   контейнер очищается и схлопывается в 0×0 — отсюда CLS 0,35–0,45.
   Высоту резервирует JS (ap-carousel-reserve), здесь — страховка,
   чтобы пустой контейнер не схлопнулся до нуля. */
.owl-carousel[data-ap-swiper="1"] {
  min-height: var(--ap-carousel-reserve, 0px);
}

/* A11Y. В aspro-bundle.css есть правило `* { outline: 0 !important }` —
   оно гасило обводку фокуса на всём сайте, включая ссылки и кнопки, так что
   при навигации с клавиатуры не было видно, где ты находишься (WCAG 2.4.7).
   Возвращаем обводку — только для клавиатуры, мышь её не показывает. */
:focus-visible {
  outline: 2px solid #1b6ef3 !important;
  outline-offset: 2px;
}

.banners-big :focus-visible,
.callback__inner :focus-visible {
  outline-color: #fff !important;
}

/* PERF-01 (главное). Строка `.owl-carousel:not(.owl-loaded)` держала карточки
   горизонтальной лентой, но класс owl-loaded вешается сразу, за полсекунды
   до инициализации Swiper. В этом промежутке шесть карточек вставали в
   столбик (333 px → 1596 px) и всё под ними уезжало вниз, а потом
   возвращалось. Лента должна жить до момента, когда Swiper реально забрал
   блок себе — то есть до появления data-ap-swiper="1". */
.owl-carousel.owl-loaded:not([data-ap-swiper="1"]) {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: flex-start;
  overflow: hidden;
  gap: var(--ap-gap, 16px);
  background-image: none !important;
}

/* та же геометрия, что потом поставит Swiper: slidesPerView и spaceBetween
   приходят из data-plugin-options, их проставляет JS в --ap-items/--ap-gap */
.owl-carousel.owl-loaded:not([data-ap-swiper="1"]) > * {
  flex: 0 0 calc((100% - (var(--ap-items, 1) - 1) * var(--ap-gap, 16px)) / var(--ap-items, 1));
  max-width: calc((100% - (var(--ap-items, 1) - 1) * var(--ap-gap, 16px)) / var(--ap-items, 1));
}

.owl-carousel.owl-loaded:not([data-ap-swiper="1"]) *,
.owl-carousel.owl-loaded:not([data-ap-swiper="1"]) .owl-item,
.owl-carousel.owl-loaded:not([data-ap-swiper="1"]) > .owl-stage-outer,
.owl-carousel.owl-loaded:not([data-ap-swiper="1"]) > .owl-stage {
  display: revert !important;
}

/* …и та же геометрия с первого кадра, до того как отработает JS: у двух
   каруселей на страницах услуг набор точек фиксированный, так что число
   карточек в строке можно задать прямо в CSS. Тогда блок не меняет высоту
   ни разу за загрузку. */
.reviews__slider,
.articles__slider {
  --ap-items: 1;
  --ap-gap: 24px;
}

@media (min-width: 768px) {
  .reviews__slider,
  .articles__slider {
    --ap-items: 2;
  }
}

@media (min-width: 1024px) {
  .reviews__slider {
    --ap-items: 3;
  }
  .articles__slider {
    --ap-items: 4;
  }
}

.reviews__slider.owl-carousel:not([data-ap-swiper="1"]),
.articles__slider.owl-carousel:not([data-ap-swiper="1"]) {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: flex-start;
  overflow: hidden;
  gap: var(--ap-gap, 24px);
  background-image: none !important;
}

.reviews__slider.owl-carousel:not([data-ap-swiper="1"]) > *,
.articles__slider.owl-carousel:not([data-ap-swiper="1"]) > * {
  flex: 0 0 calc((100% - (var(--ap-items, 1) - 1) * var(--ap-gap, 24px)) / var(--ap-items, 1));
  max-width: calc((100% - (var(--ap-items, 1) - 1) * var(--ap-gap, 24px)) / var(--ap-items, 1));
}

/* UI-02. Первый экран на телефоне: контейнер слайдера жёстко 420 px, а
   содержимое слайда — 420–443 px, лишнее срезалось overflow:hidden.
   В английской версии из-за этого пропадала кнопка «Patent an invention».
   На узких экранах высоту задаёт содержимое. */
@media (max-width: 767px) {
  .banners-big--normal .banners-big__depend-height {
    min-height: 0;
    height: auto !important;
  }
  .banners-big .main-slider .swiper-wrapper,
  .banners-big .main-slider__wrapper {
    height: auto !important;
    align-items: stretch;
  }
  .banners-big .main-slider .main-slider__item,
  .banners-big .main-slider .swiper-slide {
    height: auto !important;
    min-height: 400px;
  }
  .banners-big .main-slider .banners-big__item {
    height: auto !important;
  }
}

@media (max-width: 767px) {
  /* отрицательный margin-bottom у ряда кнопок давал лишние 5 px «прокрутки» */
  .banners-big .banners-big__buttons {
    margin-bottom: 0 !important;
  }
  .banners-big .main-slider .banners-big__text.banners-big__depend-height {
    height: auto !important;
    min-height: 0;
  }
}

@media (max-width: 767px) {
  /* внутренний слой баннера был position:absolute и не влиял на высоту слайда:
     английский заголовок высотой 461 px жил в слайде 400 px и срезался сверху */
  .banners-big .maxwidth-banner .maxwidth-theme {
    position: static !important;
    height: auto !important;
  }
  .banners-big .main-slider .banners-big__item {
    height: auto !important;
    min-height: 400px;
  }
  .banners-big .main-slider .banners-big__inner {
    height: auto !important;
    min-height: 400px;
  }
}

@media (max-width: 767px) {
  /* содержимое первого экрана прижималось к низу — при высоте по содержимому
     это давало пустую полосу сверху; центрируем */
  .banners-big .main-slider .banners-big__inner {
    align-items: center;
  }
}

/* ================================================================
   Текстовые блоки страниц услуг: единая типографика
   ================================================================
   Абзацы были 16px/24px с отступом 8px, тогда как сам блок — 18px/29px.
   Там, где текст пришёл из Битрикса одним абзацем с <br><br>, между
   смысловыми кусками получалась пустая строка (~24px), а там, где
   абзацы настоящие, — 8px. Из-за этого одни страницы читались
   свободно, другие «слипшимися». Приводим к одному виду. */
.text-block__body p {
  font-size: 18px !important;
  line-height: 29px !important;
  margin: 0 0 20px !important;
}

.text-block__body p:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 767px) {
  .text-block__body p {
    font-size: 16px !important;
    line-height: 26px !important;
    margin: 0 0 16px !important;
  }
}

/* Заголовки внутри текстового блока: воздух сверху, чтобы раздел
   визуально отделялся от предыдущего текста. */
.text-block__body h2,
.text-block__body h3 {
  margin: 36px 0 16px !important;
  font-weight: 700;
}

.text-block__body > h2:first-child,
.text-block__body > h3:first-child,
.text-block__body > *:first-child > h2:first-child {
  margin-top: 0 !important;
}

@media (max-width: 767px) {
  .text-block__body h2,
  .text-block__body h3 {
    margin: 28px 0 12px !important;
  }
}

/* Списки: маркеры на месте, интервалы такие же, как между абзацами. */
.text-block__body ul,
.text-block__body ol {
  margin: 0 0 20px !important;
  padding-left: 24px !important;
}

.text-block__body ul {
  list-style: disc !important;
}

.text-block__body ol {
  list-style: decimal !important;
}

.text-block__body li {
  margin-bottom: 10px !important;
}

.text-block__body li:last-child {
  margin-bottom: 0 !important;
}

.text-block__body li > p {
  margin: 0 !important;
}

/* Пустые абзацы из редактора Битрикса давали произвольные разрывы. */
.text-block__body p:empty {
  display: none;
}

/* Кнопка в шапке страницы услуги может быть ссылкой, а не span. */
a.banner__btn {
  text-decoration: none;
  color: var(--white_text_black);
}

a.banner__btn:hover {
  color: #fff;
}

/* ================================================================
   Раздел «Сотрудники»
   ================================================================
   Стиль компонента подключается в сборке после основного бандла и
   перебивает `.grid-list { display: grid }` своим `display: flex` —
   карточки схлопывались в ноль по ширине и высоте. На проде порядок
   подключения обратный, поэтому там всё работает. Возвращаем сетку. */
.staff-block-inner__list.grid-list {
  display: grid;
}


/* ------------------------------------------------------------------
   Тёмные блоки: вернуть белый текст.

   Правило «Sidebar promo / banners» выше красит `.side_right p` в #343638,
   чтобы текст баннеров в правом сайдбаре читался на белом. Но Аспро вешает
   класс side_right на обёртку всей страницы, поэтому правило задевало каждый
   абзац — в том числе в тёмных блоках, где текст сливался с фоном (1:1):
   «Остались вопросы?», описание и текст согласия в форме обратного звонка,
   «Вы не нашли все ответы…» и описание компании в подвале.

   Цвет — как на боевом сайте. Приглушённость (0.6–0.8) этим элементам даёт
   opacity из их собственных правил, её не трогаем. Два класса в селекторе
   перебивают `.side_right p` по весу, а не только по порядку.
   ------------------------------------------------------------------ */
.callback__inner .callback__pretitle,
.callback__inner .callback__desc,
.callback__inner .callback__consent-text,
.callback__inner p,
.faq__contact .faq__contact-desc,
.faq__contact p,
.ap-new-footer .ap-new-footer__desc,
.ap-new-footer p {
  color: #fff !important;
}