/* ============================================================
   MDA — UX-правки общей вёрстки (волна 1, 30.09.2026)
   Файл: /local/assets/mda/ux-fixes.css
   Подключение: init.php, Hook 2, прямым тегом мимо бандла (?v=).
   Откат: убрать строку подключения в init.php (или очистить файл).
   Шаблон Aspro (custom.css) держится на !important — поэтому здесь
   тоже !important и селекторы с id/цепочками.
   Цвета темы: шапка rgba(15,8,32,.92), фон страницы #15082b → #0a0418,
   линии rgba(168,92,247,.2).
   ============================================================ */

/* ---------- 4. Фон страницы без canvas ----------
   Фон рисует градиент body + canvas «дыма». У html фона нет —
   белая вспышка до стилей и белые поля при overscroll. */
html {
  background-color: #0a0418 !important;
}
html body#main {
  background-color: #0a0418 !important;
}
@media (prefers-reduced-motion: reduce) {
  /* Скрипт (bitrix/templates/aspro_max/js/mda-animations.js) сам не
     создаёт canvas при reduce — это страховка на смену настройки. */
  #mda-smoke-canvas {
    display: none !important;
  }
}

/* ---------- 1. Мобильная/планшетная шапка при прокрутке ----------
   #mobileheader.fixed был прозрачным: логотип и иконки ложились на контент.
   Фон — псевдоэлементом: backdrop-filter на самой шапке сделал бы её
   контейнером для position:fixed потомков (#mobilemenu, #mobilePhone). */
#mobileheader.fixed::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  background: rgba(15, 8, 32, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(168, 92, 247, 0.2);
  pointer-events: none;
}

/* Дубль «ФИЛЬТР» на телефоне/планшете: под кнопкой-открывашкой панели
   (.filter-panel .bx-filter-title → #mobilefilter) в потоке висел ещё
   компактный фильтр со своим заголовком «ФИЛЬТР», «Цена» и «Показать».
   Aspro при открытии переносит .bx_filter в #mobilefilter, так что
   прятать можно только сам блок в потоке. */
@media (max-width: 991px) {
  #main .filter-panel-wrapper > .filter-compact-block {
    display: none !important;
  }
}

/* ---------- 6. Области нажатия иконок шапки на телефоне ≥44×44 ---------- */
@media (max-width: 991px) {
  #mobileheader .right-icons .wrap_icon.wrap_phones,
  #mobileheader .right-icons .wrap_icon.wrap_cabinet,
  #mobileheader .right-icons .wrap_icon:has(> .inline-search-show) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #mobileheader .right-icons .wrap_icon .top-btn.inline-search-show,
  #mobileheader .right-icons .wrap_icon .top-btn.inline-phone-show,
  #mobileheader .right-icons .wrap_icon.wrap_cabinet .personal-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 !important;
    vertical-align: middle;
    line-height: 1 !important;
  }
  /* иконка кабинета у Aspro сдвинута top:+1px, соседние −3/−4px — выравниваем */
  #mobileheader .right-icons .wrap_icon.wrap_cabinet .personal-link > i.svg {
    top: -3px !important;
  }
}

/* ---------- 2. Панель поиска на десктопе ----------
   .inline-search-block.fixed открывается поверх шапки прозрачной —
   введённый текст ложился на логотип и меню. */
#main .inline-search-block.fixed {
  background: rgba(15, 8, 32, 0.98) !important;
  border-bottom: 1px solid rgba(168, 92, 247, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* ---------- 3. Jivo: не закрывать главные кнопки и модалки ----------
   Корень Jivo — <jdiv> без атрибутов прямо в body; все его слои — fixed
   с z-index 2147483647. Делаем корень контекстом наложения ниже модалок
   Aspro (оверлей 2999, окна 3000, мобильное меню 3000, поиск 3001,
   фильтр 10010, плеер постов .tgplayer 100000), но выше шапки (1051)
   и нижней панели карточки (999). Автооткрытие не трогаем. */
body > jdiv {
  position: relative !important;
  z-index: 2990 !important;
}
/* Кнопку уменьшаем через scale (не transform — его анимирует сам Jivo),
   плашку-приглашение не масштабируем, чтобы текст не мельчал. */
jdiv[class*="__jivoMobileButton"] > jdiv[class^="button__"] {
  scale: 0.86;
  transform-origin: 100% 100%;
}
/* Над нижней панелью «В корзину» в карточке (.counter_wrapp.fixed, 46px)
   и над кнопкой брони на /order/. Вместе с кнопкой едет и приглашение. */
body:has(.counter_wrapp.fixed) jdiv[class*="__jivoMobileButton"],
body:has(.wrapper1.order_page) jdiv[class*="__jivoMobileButton"] {
  translate: 0 -44px;
}
/* Десктоп: кнопка 65px наезжала на «В корзину» в 4-й колонке каталога
   (правый край кнопок = ширина окна − 68px). Уменьшаем до ~48px и
   прижимаем к краю — она уходит в поле справа от сетки. */
jdiv[class*="__jivoDesktopButton"] > jdiv[class^="button__"] {
  scale: 0.74;
  transform-origin: 100% 100%;
}
jdiv[class*="__jivoDesktopButton"] {
  translate: 12px -8px;
}

/* Нижняя панель карточки на телефоне: была прозрачной, сквозь щели
   между счётчиком и кнопкой просвечивал текст страницы. */
@media (max-width: 767px) {
  #main .counter_wrapp.fixed {
    background: rgba(15, 8, 32, 0.96) !important;
    border-top: 1px solid rgba(168, 92, 247, 0.2);
  }
}

/* ---------- 5. Карточка товара ---------- */
/* Липкая строка вкладок (появляется под липкой шапкой при прокрутке). */
#main .product-item-detail-tabs-container-fixed {
  background: rgba(15, 8, 32, 0.94) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(168, 92, 247, 0.2);
}
/* Правая липкая колонка (цена/купить): плагин ставит top:60px, а липкая
   шапка карточки — 88px (+49px строка вкладок) → цена уходила под шапку. */
@media (min-width: 992px) {
  #main .detail .inner-wrapper-sticky[style*="fixed"],
  body.detail_page .inner-wrapper-sticky[style*="fixed"] {
    top: 100px !important;
  }
  body.detail_page:has(#headerfixed.tabs-fixed) .inner-wrapper-sticky[style*="fixed"] {
    top: 150px !important;
  }
}

/* Пустые звёзды рейтинга (отзывов на товары пока нет): прячем только
   блоки с «Нет оценок» — когда появятся оценки, звёзды вернутся сами.
   Микроразметку (meta itemprop) не трогаем. */
#main .rating:has(.inner_rating[title="Нет оценок"]) {
  display: none !important;
}

/* Телефон: короткие крошки «← Раздел» и H1 поменьше — чтобы фото и цена
   попадали в первый экран. */
@media (max-width: 767px) {
  body.detail_page #navigation .breadcrumbs > * {
    display: none !important;
  }
  body.detail_page #navigation .breadcrumbs > div.breadcrumbs__item:last-of-type {
    display: inline-block !important;
  }
  body.detail_page #navigation .breadcrumbs > div.breadcrumbs__item:last-of-type .breadcrumbs__arrow-down,
  body.detail_page #navigation .breadcrumbs > div.breadcrumbs__item:last-of-type .breadcrumbs__dropdown-wrapper {
    display: none !important;
  }
  body.detail_page #navigation .breadcrumbs > div.breadcrumbs__item:last-of-type .breadcrumbs__link::before {
    content: "\2190\00a0";
  }
  body.detail_page #navigation .breadcrumbs > div.breadcrumbs__item:last-of-type .breadcrumbs__link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }
  body.detail_page #pagetitle {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  body.detail_page .topic__heading {
    line-height: 1.2 !important;
  }
}

/* ---------- 6. Мелочи главной ---------- */
/* Заголовок баннера «Бронирование товара» был подчёркнут как ссылка. */
#main .banner_title .head-title a,
#main .banner_title .head-title a:hover {
  text-decoration: none !important;
}
/* «Полёт за бонусами»: абзац прилипал к «Заберите бонусы*». */
#main .pg .pg__h {
  margin-bottom: 18px !important;
}

/* ---------- 7. Подвал: логотипы платёжных систем ----------
   Блок выводит шаблон Aspro (bitrix/templates/aspro_max/page_blocks/
   footer/*.php) — подписываем здесь, чтобы не было впечатления
   онлайн-оплаты. */
#main .footer-bottom__item.pays::after {
  content: "Оплата картой или наличными в магазине";
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(247, 243, 255, 0.6);
  letter-spacing: 0;
  text-transform: none;
}
@media (max-width: 767px) {
  #main .footer-bottom__item.pays::after {
    text-align: center;
  }
}