/**
 * Переопределение стилей под стилистику техникаоптом.рф
 * Подключить ПОСЛЕ custom.css:
 *   <link href="techopt-override.css" rel="stylesheet" />
 */

/* ========== ШРИФТ Circe (Google Fonts не содержит, подключаем через CDN) ========== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ========== ЛОКАЛЬНЫЕ ИКОНКИ (icomoon) ==========
 * Шрифт icomoon уже подключён через assets/css/icons/icomoon/styles.css.
 * Дублирующий @font-face здесь не нужен.
 */

:root {
  --to-primary: #7B1B16;
  --to-primary-dark: #5a1210;
  --to-bg: #F4F5F7;
  --to-sidebar-width-collapsed: 56px;
  --to-sidebar-width-expanded: 265px;
  --to-header-height: 60px;
  --to-transition: 0.25s ease;
}

/* ========== ШРИФТ ========== */
body,
.page-title,
.nav-sidebar .nav-link,
.menu-desctop-submenu__title,
.breadcrumb,
.content,
.navbar,
input,
button,
.btn,
.card-title,
h1, h2, h3, h4, h5, h6,
a.main-link.b2b-main-link {
  font-family: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Иконочные шрифты — НЕ перебивать */
[class^="icon-"],
[class*=" icon-"],
i[class*="icon-"],
.breadcrumb-item::before,
.list-icons-item::before,
[data-action]::after,
.collapse-icon::before,
.sidebar .nav-group-sub::before {
  font-family: 'icomoon' !important;
}

/* SVG-иконки в хедере — видимость на белом фоне */
.navbar svg.bi,
.comparison svg,
.header-elements svg {
  fill: #333 !important;
}

/* Dropdown стрелка — Bootstrap CSS-треугольник через border */
.dropdown-toggle::after {
  font-family: inherit !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  content: "" !important;
  border-top: 0.3em solid !important;
  border-right: 0.3em solid transparent !important;
  border-bottom: 0 !important;
  border-left: 0.3em solid transparent !important;
  vertical-align: middle !important;
  margin-left: 0.3em !important;
}

/* ========== 1. ВЕРХНЕЕ МЕНЮ (HEADER) — СОВРЕМЕННЫЙ ДИЗАЙН ========== */
.navbar.navbar-expand-md.navbar-dark.fixed-top,
.navbar.navbar-dark.fixed-top,
.navbar.bg-dark,
.navbar.navbar-expand-md.navbar-dark {
  background-color: #fff !important;
  border-bottom: 2px solid var(--to-primary, #7B1B16) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10) !important;
  min-height: var(--to-header-height) !important;
  padding: 0 1.25rem !important;
}

/* --- Логотип ---
 * Картинке — не жёсткие width/height, а max-* ограничения и width:auto/height:auto.
 * Это сохраняет натуральную пропорцию загруженного логотипа (не «сплющиваем» широкие
 * или высокие изображения внутри box'a через object-fit: contain).
 * Контейнер делаем шире и с внутренним padding, чтобы логотип «дышал» и совпадал
 * по визуальной массе с шириной сайдбара (≈ 16rem ≈ 256px). */
.navbar-brand .header_logo,
.amx-navbar-brand .header_logo {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 200px !important;
  max-height: 46px !important;
  object-fit: contain !important;
  transition: opacity 0.2s !important;
}

.navbar-brand:hover .header_logo {
  opacity: 0.85 !important;
}

.navbar-brand,
.amx-navbar-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: var(--to-header-height) !important;
  padding: 0 1.25rem !important;
  margin-right: 1.5rem !important;
}

.navbar-brand > a,
.amx-navbar-brand > a {
  display: inline-flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* На планшете чуть ужимаем, чтобы не выдавливать поиск/меню */
@media (max-width: 1199.98px) {
  .navbar-brand,
  .amx-navbar-brand {
    min-width: 13rem !important;
    padding: 0 1rem !important;
    margin-right: 1rem !important;
  }
  .navbar-brand .header_logo,
  .amx-navbar-brand .header_logo {
    max-width: 170px !important;
    max-height: 48px !important;
  }
}

@media (max-width: 767.98px) {
  .navbar-brand,
  .amx-navbar-brand {
    min-width: 0 !important;
    padding: 0 0.5rem !important;
    margin-right: auto !important;
  }
  .navbar-brand .header_logo,
  .amx-navbar-brand .header_logo {
    max-width: 140px !important;
    max-height: 40px !important;
  }
}

/* --- Navbar collapse — flex layout --- */
.navbar-collapse.amx-navbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

@media (max-width: 1200px) {
  .navbar-collapse.amx-navbar {
    flex-wrap: wrap !important;
  }
  .navbar-collapse > .header-elements:not(:last-child) {
    min-width: 180px !important;
    max-width: 260px !important;
  }
}

/* --- Поиск (перенесён после логотипа через JS) --- */
.navbar-collapse > .header-elements:not(:last-child) {
  flex: 0 0 auto !important;
  max-width: 320px !important;
  min-width: 220px !important;
  margin-right: auto !important;
}

#title-search .form-control {
  background-color: #f5f5f6 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  padding-right: 36px !important;
  font-size: 13px !important;
  color: #333 !important;
  height: 38px !important;
  transition: background-color 0.2s, box-shadow 0.2s !important;
}

#title-search .form-control::placeholder {
  color: #aaa !important;
}

#title-search .form-control:focus {
  background-color: #fff !important;
  box-shadow: 0 0 0 2px rgba(123, 27, 22, 0.15) !important;
  outline: none !important;
  border: none !important;
}

#title-search .form-control-feedback {
  right: 8px !important;
}

#title-search .b2b-catalog-search__submit i {
  color: #999 !important;
  font-size: 14px !important;
}

#title-search .b2b-catalog-search__submit:hover i {
  color: var(--to-primary) !important;
}

/* --- Навигация (меню) — компактные пилюли --- */
.navbar-collapse .col-md-7 {
  flex: 0 0 auto !important;
  max-width: none !important;
  width: auto !important;
}

.navbar-nav.navbar-nav-underline {
  gap: 2px !important;
}

.navbar-nav-underline .navbar-nav-link {
  border-bottom: none !important;
}

.navbar-nav-link,
.navbar .navbar-nav-link,
.collapse.navbar-collapse .navbar-nav-link {
  color: #333 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  transition: all 0.15s !important;
  letter-spacing: 0.01em !important;
}

.navbar-nav-link:hover,
.navbar .navbar-nav-link:hover,
.collapse.navbar-collapse .navbar-nav-link:hover {
  color: var(--to-primary) !important;
  background-color: rgba(123, 27, 22, 0.05) !important;
}

/* Исключаем header_logout из общего hover — у него свой стиль на <a> внутри */
.header_logout.navbar-nav-link,
.header_logout.navbar-nav-link:hover {
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.navbar-nav-link.active,
.navbar-nav-underline .navbar-nav-link.active {
  color: var(--to-primary) !important;
  background-color: rgba(123, 27, 22, 0.08) !important;
  border-bottom: none !important;
  font-weight: 800 !important;
}

/* Иконки в навбаре — скрываем для чистоты */
.navbar-nav-link i[class*="icon-"],
.navbar-nav-link i.mr-2 {
  display: none !important;
}

/* --- Dropdown --- */
.navbar .dropdown-menu {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.05) !important;
  padding: 6px !important;
  margin-top: 8px !important;
}

.navbar .dropdown-item {
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 12.5px !important;
  transition: all 0.12s !important;
}

.navbar .dropdown-item:hover {
  color: var(--to-primary) !important;
  background-color: rgba(123, 27, 22, 0.05) !important;
}

.navbar .dropdown-item i {
  margin-right: 8px !important;
  font-size: 13px !important;
  color: #bbb !important;
}

/* Dropdown стрелка — только в навбаре */
.navbar .dropdown-toggle::after {
  opacity: 0.4 !important;
  transform: scale(0.8) !important;
}

/* --- Сравнение --- */
.navbar-collapse > .comparison {
  flex-shrink: 0 !important;
  margin: 0 4px !important;
}

.comparison a {
  display: flex !important;
  align-items: center !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  transition: background-color 0.15s !important;
}

.comparison a:hover {
  background-color: rgba(0,0,0,0.04) !important;
}

.comparison svg {
  opacity: 0.5 !important;
  transition: opacity 0.15s !important;
}

.comparison a:hover svg {
  opacity: 0.8 !important;
}

.comparison-quantity__value {
  background-color: var(--to-primary) !important;
  border-color: var(--to-primary) !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
}

.comparison-quantity__value span {
  display: inline !important;
  text-align: center !important;
}

/* --- Войти (правый блок) --- */
.navbar-collapse > .header-elements:last-child {
  flex-shrink: 0 !important;
}

.header_logout.navbar-nav-link a,
.header-elements > .d-flex a {
  color: #555 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  transition: all 0.15s !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

.header_logout.navbar-nav-link a:hover,
.header-elements > .d-flex a:hover {
  color: var(--to-primary) !important;
  border-color: var(--to-primary) !important;
  background-color: rgba(123, 27, 22, 0.04) !important;
}

/* ============================================================
 * Кнопка "Выйти" — полностью неподвижна на любом hover/focus/active.
 *
 * Что фиксируем (одинаковые значения для всех состояний):
 *   - transition / transform / animation — отключены;
 *   - padding / margin / border (включая border-width) — без изменения,
 *     чтобы не было «дёргания» от смены толщины обводки или paddings;
 *   - font-weight / font-size / letter-spacing / text-transform /
 *     text-decoration / line-height — текст не «съезжает» и не «сужается»
 *     от перехода bold↔regular, изменения кернинга или появления подчёркивания;
 *   - background / color / outline / box-shadow — визуально статично.
 *
 * Перебиваем: общий :hover на .navbar-nav-link (techopt-override.css:246),
 *             общий a:hover (styles.css:38), общий :hover на ссылках в
 *             .header-elements > .d-flex (techopt-override.css:375),
 *             :before-индикатор Limitless (.navbar-nav-link:before).
 * ============================================================ */

/* Префикс .collapse.navbar-collapse поднимает специфичность до 0,4,X — этого хватает,
 * чтобы перебить базовое правило .collapse.navbar-collapse .navbar-nav-link (0,3,0)
 * и его :hover-вариант, которые до сих пор давали родителю padding 6px 12px,
 * transition all 0.15s и красную подложку на hover. */
.collapse.navbar-collapse .header_logout.navbar-nav-link,
.collapse.navbar-collapse .header_logout.navbar-nav-link:hover,
.collapse.navbar-collapse .header_logout.navbar-nav-link:focus,
.collapse.navbar-collapse .header_logout.navbar-nav-link:focus-within,
.collapse.navbar-collapse .header_logout.navbar-nav-link:active {
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  transition: none !important;
  transform: none !important;
  animation: none !important;
  color: #555 !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.collapse.navbar-collapse .header_logout.navbar-nav-link::before,
.collapse.navbar-collapse .header_logout.navbar-nav-link::after,
.collapse.navbar-collapse .header_logout.navbar-nav-link:hover::before,
.collapse.navbar-collapse .header_logout.navbar-nav-link:hover::after {
  display: none !important;
  content: none !important;
  background-color: transparent !important;
  width: 0 !important;
}

.collapse.navbar-collapse .header_logout.navbar-nav-link a,
.collapse.navbar-collapse .header_logout.navbar-nav-link a:link,
.collapse.navbar-collapse .header_logout.navbar-nav-link a:visited,
.collapse.navbar-collapse .header_logout.navbar-nav-link a:hover,
.collapse.navbar-collapse .header_logout.navbar-nav-link a:focus,
.collapse.navbar-collapse .header_logout.navbar-nav-link a:focus-within,
.collapse.navbar-collapse .header_logout.navbar-nav-link a:active,
.header-elements > .d-flex .header_logout a,
.header-elements > .d-flex .header_logout a:hover,
.header-elements > .d-flex .header_logout a:focus,
.header-elements > .d-flex .header_logout a:active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 14px !important;
  margin: 0 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #555 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  transition: none !important;
  transform: none !important;
  animation: none !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.collapse.navbar-collapse .header_logout.navbar-nav-link a > span,
.collapse.navbar-collapse .header_logout.navbar-nav-link a:hover > span,
.collapse.navbar-collapse .header_logout.navbar-nav-link a:focus > span,
.collapse.navbar-collapse .header_logout.navbar-nav-link a:active > span {
  color: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
  text-decoration: none !important;
  transition: none !important;
  transform: none !important;
  animation: none !important;
}

/* Сброс стилей для ссылки поиска — не должна выглядеть как кнопка */
.header-elements #title-search a {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  display: inline !important;
}

.header-elements #title-search a:hover {
  border-color: transparent !important;
  background-color: transparent !important;
}

/* Бейдж корзины (старая разметка .cart-in-header — на случай использования) */
.header-elements .cart-in-header > i > span {
  background-color: var(--to-primary) !important;
  border-color: var(--to-primary) !important;
}

/* --- Корзина в шапке (bitrix:sale.basket.basket.line, шаблон b2bcabinet) ---
 * Перенесено из styles.css. Разметка компонента:
 *   <a class="navbar-nav-link"><span class="icon-cart5"></span><span class="badge ...">N</span></a>
 * Стилизуем под светлую тему техопта, по аналогии с блоком .comparison выше:
 * тёмная иконка на белом фоне + бордовый круглый счётчик в углу. */
.navbar-collapse .cart_header {
  flex-shrink: 0 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 4px !important;
}

.cart_header .navbar-nav-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  color: #333 !important;
  transition: background-color 0.15s !important;
}

.cart_header .navbar-nav-link:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

.cart_header .navbar-nav-link .icon-cart5 {
  font-size: 18px !important;
  line-height: 1 !important;
  color: #333 !important;
  opacity: 0.55 !important;
  transition: opacity 0.15s !important;
}

.cart_header .navbar-nav-link:hover .icon-cart5 {
  opacity: 0.85 !important;
}

/* Счётчик товаров — бордовый круг в верхнем углу иконки
   (как .comparison-quantity__value). */
.cart_header .navbar-nav-link .badge {
  position: absolute !important;
  top: -4px !important;
  right: -2px !important;
  left: auto !important;
  min-width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  border-radius: 50% !important;
  background-color: var(--to-primary) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  z-index: 9 !important;
}

/* Кнопка корзины обрезалась снизу / заезжала на нижнюю красную границу шапки.
   Причина: базовый navbar тянет строки (align-items: stretch), а корзина лежит
   глубже (.header-elements > .d-flex > .cart_header > .bx-basket > a), причём
   промежуточная обёртка .bx-basket (её создаёт компонент) — display:block и не
   центрировалась. Центрируем всю цепочку по вертикали и снимаем обрезку. */
.navbar .header-elements,
.navbar .header-elements > .d-flex {
  align-items: center !important;
  overflow: visible !important;
}

.navbar-collapse .cart_header {
  align-self: center !important;
  overflow: visible !important;
}

/* Обёртка компонента — flex по центру, без рамки/отступов и без клиппинга. */
.cart_header .bx-basket,
.cart_header .bx-basket.bx-opener {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  height: auto !important;
  line-height: 1 !important;
  overflow: visible !important;
}

/* --- Мультикорзина (sotbit:multibasket.multibasket, шаблон b2bcabinet) в шапке ---
 * Родной шаблон свёрстан под старый тёмный дизайн (тёмный блок 220px, белый текст,
 * оранжевый бейдж) и имеет «битый» box-model в выпадающем списке (padding 16px при
 * height 36px → строки наезжают друг на друга, «Добавить» перекрывается).
 * Полностью переопределяем презентацию под светлую шапку техопта:
 *   • триггер = иконка-корзина + круглый счётчик (как .comparison / .cart_header);
 *   • по наведению — аккуратный дропдаун со списком корзин и кнопкой «Добавить»;
 *   • блок превью товаров и кнопка «Оформить заказ» в шапке не нужны — скрыты.
 * Дропдаун открывается по mouseover, поэтому делаем его вплотную к триггеру
 * (top:100%, без зазора) — иначе курсор «проваливается» в щель и список мигает. */

/* Контейнер компонента — по содержимому */
.cart_header .multibasket,
.cart_header .multibasket.b2b_multibasket {
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
}

/* Превью товаров + кнопка «Оформить заказ» в шапке не используются — убираем */
.cart_header .multibasket .multibasket__products {
  display: none !important;
}

.cart_header .multibasket .multibasket__wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

/* ===== Триггер (текущая корзина) — иконка + счётчик ===== */
.cart_header .multibasket .multibasket__current,
.cart_header .multibasket .multibasket__current.amx-multibasket {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: 220px !important;
  height: auto !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  text-decoration: none !important;
  transition: background-color 0.15s !important;
}

.cart_header .multibasket .multibasket__current:hover,
.cart_header .multibasket .multibasket__current.amx-multibasket:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Название активной корзины — компактный тёмный текст */
.cart_header .multibasket .multibasket__current-name {
  flex: 0 1 auto !important;
  margin: 0 8px 0 0 !important;
  max-width: 120px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #333 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

/* Иконка корзины */
.cart_header .multibasket .multibasket__current-quantity {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.cart_header .multibasket .multibasket__current-quantity svg {
  width: 18px !important;
  height: auto !important;
  opacity: 0.55 !important;
  transition: opacity 0.15s !important;
}

.cart_header .multibasket .multibasket__current-quantity svg path {
  fill: #333 !important;
}

.cart_header .multibasket .multibasket__current:hover .multibasket__current-quantity svg {
  opacity: 0.9 !important;
}

/* Счётчик — круг 18px, приподнят над иконкой. Фон — фирменный красный
 * var(--to-primary) (как у счётчика сравнения и обычной корзины), а не оранжевый
 * цвет корзины: background форсируем !important, перебивая инлайновый стиль от JS.
 * display НЕ форсируем — показом бейджа управляет JS через инлайновый style. */
.cart_header .multibasket .multibasket__current-quantity__value {
  position: absolute !important;
  top: -11px !important;
  right: -9px !important;
  left: auto !important;
  box-sizing: border-box !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: 9px !important;
  background-color: var(--to-primary) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  text-align: center !important;
  color: #fff !important;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.35) !important;
}

.cart_header .multibasket .multibasket__current-quantity__value span {
  display: inline !important;
  color: #fff !important;
}

/* Стрелка дропдауна */
.cart_header .multibasket .multibasket__current-arrow {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 6px !important;
  color: #333 !important;
  opacity: 0.55 !important;
  line-height: 0 !important;
}

.cart_header .multibasket .multibasket__current:hover .multibasket__current-arrow {
  opacity: 0.9 !important;
}

/* ===== Выпадающий список корзин (по наведению) ===== */
.cart_header .multibasket .multibasket__otherbasket_wraper {
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  min-width: 240px !important;
  width: max-content !important;
  max-width: 320px !important;
  padding: 6px !important;
  background-color: #fff !important;
  border: 1px solid #ececec !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14) !important;
  overflow: hidden !important;
}

.cart_header .multibasket .multibasket__baskets_list {
  display: flex !important;
  flex-direction: column !important;
}

/* Строка корзины — нормальный box-model (родной padding 16px при height 36px
 * вызывал наложение строк) */
.cart_header .multibasket .multibasket__otherbasket_wraper .multibasket__item {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  min-height: 36px !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  background-color: transparent !important;
  cursor: pointer !important;
}

.cart_header .multibasket .multibasket__otherbasket_wraper .multibasket__item:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Цветной маркер корзины */
.cart_header .multibasket .multibasket__otherbasket_wraper .multibasket__color {
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 8px 0 0 !important;
  border-radius: 4px !important;
}

.cart_header .multibasket .multibasket__otherbasket_wraper .multibasket__name {
  flex: 1 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #333 !important;
  font-size: 13px !important;
}

/* Иконки редактирования/удаления — фиксированный размер, выровнены вправо */
.cart_header .multibasket .multibasket__otherbasket_wraper .multibasket__edit,
.cart_header .multibasket .multibasket__otherbasket_wraper .multibasket__remove {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: #8a8d94 !important;
  opacity: 0.7 !important;
  transition: background-color 0.15s, opacity 0.15s !important;
}

.cart_header .multibasket .multibasket__otherbasket_wraper .multibasket__edit {
  margin-left: auto !important;
}

.cart_header .multibasket .multibasket__otherbasket_wraper .multibasket__edit:hover,
.cart_header .multibasket .multibasket__otherbasket_wraper .multibasket__remove:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
  border: 0 !important;
  opacity: 1 !important;
}

.cart_header .multibasket .multibasket__otherbasket_wraper .multibasket__edit svg,
.cart_header .multibasket .multibasket__otherbasket_wraper .multibasket__remove svg {
  width: 14px !important;
  height: 14px !important;
}

/* «Добавить корзину» — отдельная строка-кнопка под списком, без наложений */
.cart_header .multibasket .multibasket__otherbasket_wraper .multibasket__add-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  margin-top: 4px !important;
  padding: 8px !important;
  border: 0 !important;
  border-top: 1px solid #eee !important;
  border-radius: 6px !important;
  background-color: transparent !important;
  color: var(--to-primary) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

.cart_header .multibasket .multibasket__otherbasket_wraper .multibasket__add-item:hover {
  background-color: rgba(123, 27, 22, 0.06) !important;
  color: var(--to-primary-dark) !important;
}

.cart_header .multibasket .multibasket__otherbasket_wraper .multibasket__add-item svg {
  margin-right: 6px !important;
}

.cart_header .multibasket .multibasket__otherbasket_wraper .multibasket__add-item svg line {
  stroke: currentColor !important;
}

/* Итоговая цена в дропдауне (если включат SHOW_TOTAL_PRICE) */
.cart_header .multibasket .multibasket__otherbasket_wraper .multibasket__total-price {
  padding: 6px 8px !important;
  color: #333 !important;
  text-align: left !important;
  font-size: 12.5px !important;
}

/* ===== Модалка создания/редактирования корзины — фирменный бордовый ===== */
.multibasket .multibasket__modal__title {
  background-color: var(--to-primary) !important;
}

.multibasket .modal__title-close,
.multibasket .modal__title-close:hover {
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.multibasket__modal-btn-groupe .modal-btn-groupe_ok {
  background-color: var(--to-primary) !important;
  color: #fff !important;
}

.multibasket__modal-btn-groupe .modal-btn-groupe_ok:hover {
  background-color: var(--to-primary-dark) !important;
}

/* Кнопка бургера / sidebar-toggle — скрываем */
.navbar__sidebar-toggle-control {
  display: none !important;
}

/* ========== 2. ЛЕВОЕ МЕНЮ (SIDEBAR-MAIN) ========== */

/* Фон и граница — чистый белый с тенью */
.sidebar-xs .sidebar.sidebar-main,
.sidebar.sidebar-main,
.sidebar-dark.sidebar-main {
  background-color: #fff !important;
  border-right: none !important;
  box-shadow: 1px 0 8px rgba(0,0,0,0.04) !important;
  z-index: 1040 !important;
  transition: width var(--to-transition) !important;
}

/* --- Свёрнутый сайдбар: пункты строго в пределах ширины --- */
.sidebar-xs .sidebar-main .nav-sidebar .nav-link,
.sidebar-xs .sidebar-main .nav-link.myitem {
  justify-content: center !important;
  text-align: center !important;
  padding: 8px 0 !important;
  overflow: hidden !important;
  width: var(--to-sidebar-width-collapsed) !important;
  max-width: var(--to-sidebar-width-collapsed) !important;
}

/* При раскрытии — нормальная ширина */
.sidebar-xs .sidebar.sidebar-main.sidebar-expanded .nav-sidebar .nav-link,
.sidebar-xs .sidebar.sidebar-main.sidebar-expanded .nav-link.myitem {
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 8px 16px !important;
  width: auto !important;
  max-width: none !important;
}

/* Свёрнутый сайдбар — иконки по центру, без margin */
.sidebar-xs .sidebar-main .sidebar-svg-icon {
  margin-right: 0 !important;
}

/* При раскрытии — margin возвращается */
.sidebar-xs .sidebar.sidebar-main.sidebar-expanded .sidebar-svg-icon {
  margin-right: 10px !important;
}

/* При наведении на пункты меню — раскрываем (через JS класс .sidebar-expanded) */
.sidebar-xs .sidebar.sidebar-main.sidebar-expanded {
  width: var(--to-sidebar-width-expanded) !important;
  overflow: visible !important;
}

/* Показываем текст при раскрытии */
.sidebar-xs .sidebar.sidebar-main.sidebar-expanded .nav-link span,
.sidebar-xs .sidebar.sidebar-main.sidebar-expanded .nav-link > span {
  display: inline !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
  overflow: visible !important;
}

/* Иконки — одинаковый размер, отступ, без засветки */
.sidebar.sidebar-main .sidebar-svg-icon {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  flex-shrink: 0 !important;
  /* margin-right: 10px !important;*/
  object-fit: contain !important;
  filter: none !important;
  opacity: 0.85 !important;
  transition: filter 0.15s, opacity 0.15s !important;
}

/* Ссылки в сайдбаре — стиль */
.sidebar.sidebar-main .nav-sidebar .nav-link,
.sidebar.sidebar-main .nav-link.myitem {
  color: #333 !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  transition: background-color 0.15s, color 0.15s !important;
}

/* Сброс hover на li — чтобы не подсвечивался весь блок, если внутри 2 ссылки */
.sidebar.sidebar-main .nav-sidebar > .nav-item:hover,
.sidebar.sidebar-main .nav-sidebar > .nav-item-submenu:hover {
  background-color: transparent !important;
}

/* Hover пункта — лёгкая подсветка фона, только на самой ссылке */
.sidebar.sidebar-main .nav-sidebar .nav-link:hover,
.sidebar.sidebar-main .nav-link.myitem:hover {
  background-color: rgba(123, 27, 22, 0.08) !important;
  color: var(--to-primary) !important;
}

.sidebar.sidebar-main .nav-link:hover span {
  color: var(--to-primary) !important;
}

.sidebar.sidebar-main .nav-link:hover .sidebar-svg-icon {
  filter: none !important;
  opacity: 1 !important;
}

/* Левое меню — без отступов сверху, в самый верх */
body .sidebar.sidebar-main .sidebar-content .nav-sidebar,
body .sidebar.sidebar-main .sidebar-content .card.menu-desctop,
body .sidebar.sidebar-main .sidebar-content .card {
  padding-top: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top: none !important;
}

/* Внешний wrapper .card.card-sidebar-mobile в template_content.php сохраняем
 * для совместимости с Limitless rule (.card:not(.card-sidebar-mobile){display:none})
 * и mobile-toggle логикой (app.js:86), но визуально делаем прозрачным,
 * чтобы не было двойной .card-рамки/фона при вложенном .card.menu-desctop. */
body .sidebar.sidebar-main .sidebar-content > .card.card-sidebar-mobile {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Сам sidebar-content — в самый верх */
body .sidebar.sidebar-main .sidebar-content,
body .sidebar.sidebar-main .sidebar-content.b2bcabinet-sidebar {
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Активный элемент */
.sidebar.sidebar-main .nav-sidebar > .nav-item > .nav-link.active {
  background-color: rgba(123, 27, 22, 0.08) !important;
  color: var(--to-primary) !important;
}

/* --- Подменю — только перекраска тёмного фона на белый --- */

/* Фон popup-подменю в sidebar-xs (Limitless делает тёмный) */
.sidebar-dark .nav-group-sub,
.sidebar-xs .sidebar-main .nav-group-sub {
  background-color: #fff !important;
}

/* Ссылки внутри — чёрные, hover красный */
.sidebar-dark .nav-group-sub a,
.sidebar-xs .sidebar-main .nav-group-sub a {
  color: #333 !important;
}

.sidebar-dark .nav-group-sub a:hover,
.sidebar-xs .sidebar-main .nav-group-sub a:hover {
  color: var(--to-primary) !important;
}

/* menu-desctop-submenu — белый фон вместо тёмного #2a3140 */
.menu-desctop .menu-desctop-submenu,
.menu-desctop-submenu,
body .menu-desctop .menu-desctop-submenu {
  background-color: #fff !important;
}

.menu-desctop .menu-desctop-submenu__row,
.menu-desctop-submenu__row,
body .menu-desctop-submenu__row,
body.sidebar-xs .menu-desctop .menu-desctop-submenu .menu-desctop-submenu__row {
  background-color: #fff !important;
}

/* Цвет ссылок подменю */
.menu-desctop-submenu__title {
  color: #333 !important;
}

.menu-desctop-submenu__title:hover {
  color: var(--to-primary) !important;
}

/* Вложенное подменю 2-го уровня — белый фон */
.nav-item-submenu-menu2 {
  background-color: #fff !important;
}

.nav-item-submenu-menu2 .menu-desctop-submenu__title {
  color: #333 !important;
}

.nav-item-submenu-menu2 .menu-desctop-submenu__title:hover {
  color: var(--to-primary) !important;
}

/* При hover на сайдбар — подменю 1-го уровня сдвигается */
.sidebar-xs .sidebar.sidebar-main.sidebar-expanded > .sidebar-content .nav-item-submenu > .menu-desctop-submenu {
  left: var(--to-sidebar-width-expanded) !important;
}

/* Content-wrapper — отступ слева */
.sidebar-xs .content-wrapper {
  transition: margin-left var(--to-transition) !important;
}

/* ===== Закрепление сайдбара (кнопка-булавка) ===== */
/* Кнопка живёт в самом верху .sidebar-content (вставляется из techopt-override.js).
   Свёрнутый сайдбар — только иконка по центру; раскрытый — иконка + подпись. */
.sidebar-pin-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 0;
  border: none;
  background: transparent;
  color: #888;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.sidebar-xs .sidebar.sidebar-main.sidebar-expanded .sidebar-pin-toggle {
  justify-content: flex-start;
  padding: 10px 16px;
}
.sidebar-pin-toggle:hover {
  background-color: rgba(123, 27, 22, 0.08);
  color: var(--to-primary);
}
.sidebar-pin-toggle__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.15s;
}
/* Закреплено — активный вид + наклон булавки */
.sidebar-pin-toggle.is-pinned {
  color: var(--to-primary);
}
.sidebar-pin-toggle.is-pinned .sidebar-pin-toggle__icon {
  transform: rotate(-30deg);
}

/* На мобильных кнопка не нужна — сайдбар работает как drawer */
@media (max-width: 767.98px) {
  .sidebar-pin-toggle {
    display: none;
  }
}

/* Sidebar mobile toggler — скрыть на десктопе */
.sidebar-mobile-toggler {
  display: none !important;
}

/* Перестановка поиска и кнопок — через JS (techopt-override.js) */

/* ========== 3. ПРАВЫЙ ФИЛЬТР → ЛЕВАЯ СТОРОНА ========== */

/* ========== ПОЛНЫЙ СБРОС sidebar-component для aside-фильтра ========== */
/* Перебиваем ВСЕ стили Limitless для sidebar-component-right */
aside#catalog__filter,
aside#catalog__filter.sidebar,
aside#catalog__filter.sidebar-component,
aside#catalog__filter.sidebar-component-right,
aside#catalog__filter.sidebar-component-left,
aside.catalog__filter.sidebar-component,
.catalog__wrapper > aside.sidebar-component {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  float: none !important;
  transform: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  flex: 0 0 300px !important;
  height: auto !important;
  z-index: 1 !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  order: -1 !important;
}

/* catalog__wrapper — flex-контейнер: фильтр слева, каталог справа */
.catalog__wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 20px !important;
}

/* Sidebar-content внутри aside — sticky */
aside#catalog__filter .sidebar-content {
  position: sticky !important;
  top: calc(var(--to-header-height) + 10px) !important;
  max-height: none !important;
  overflow-y: visible !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* -------- Карточка фильтра — белый фон, скругление, тень -------- */
aside#catalog__filter .index_blank-filter,
aside#catalog__filter .card.bx_filter_section {
  background-color: #fff !important;
  border-radius: 14px !important;
  border: 1px solid #eee !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
  overflow: hidden !important;
}

/* -------- Заголовок ФИЛЬТР -------- */
aside#catalog__filter .card-header {
  background-color: #fff !important;
  border-bottom: none !important;
  padding: 16px 20px 12px !important;
}

aside#catalog__filter .card-header .text-uppercase {
  color: #333 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
}

aside#catalog__filter .card-header .list-icons-item[data-action="collapse"]::after {
  color: #ccc !important;
  font-size: 14px !important;
}

/* -------- Тело фильтра -------- */
aside#catalog__filter .card-body {
  padding: 0 20px 16px !important;
}

/* -------- Секции фильтра (Цена, Цвет, Бренд...) -------- */
aside#catalog__filter .bx_filter_parameters_box {
  margin-bottom: 4px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f2f2f2 !important;
}

aside#catalog__filter .bx_filter_parameters_box:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

/* Название секции */
aside#catalog__filter .bx_filter_parameters_box_title {
  margin-bottom: 10px !important;
}

aside#catalog__filter .bx_filter_parameters_box_title .item_name {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #999 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}

/* -------- Поля цены (мин/макс) -------- */
aside#catalog__filter .min-price,
aside#catalog__filter .max-price {
  background-color: #f7f7f8 !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  color: #333 !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  height: auto !important;
}

aside#catalog__filter .min-price:focus,
aside#catalog__filter .max-price:focus {
  border-color: var(--to-primary) !important;
  box-shadow: 0 0 0 2px rgba(123, 27, 22, 0.1) !important;
  outline: none !important;
  background-color: #fff !important;
}

/* -------- Чекбоксы -------- */
aside#catalog__filter .bx_filter_parameters_box_checkbox {
  margin-bottom: 2px !important;
}

aside#catalog__filter .checkbox__label,
aside#catalog__filter .form-check-label {
  font-size: 13px !important;
  color: #444 !important;
  cursor: pointer !important;
  padding: 4px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: color 0.15s !important;
}

aside#catalog__filter .checkbox__label:hover,
aside#catalog__filter .form-check-label:hover {
  color: var(--to-primary) !important;
}

/* Кастомный чекбокс */
aside#catalog__filter [data-checkbox="div"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border: 1.5px solid #d0d0d0 !important;
  border-radius: 5px !important;
  background-color: #fff !important;
  transition: all 0.15s !important;
  flex-shrink: 0 !important;
}

aside#catalog__filter .checkbox_custom_filter:checked + [data-checkbox="div"] {
  background-color: var(--to-primary) !important;
  border-color: var(--to-primary) !important;
}

/* --- Галочка в кастомном чекбоксе — белая ---
 * В b2b_smart_filterstyle.css галочка рисуется ::after-псевдоэлементом
 * с icomoon-глифом "\e600", цвет наследуется от родителя (label = #444) —
 * на тёмно-красной подложке (:checked → bg = var(--to-primary)) её не видно.
 *
 * Перебиваем цвет SVG/иконочного шрифта во всех его проявлениях:
 *   color                    — стандарт CSS
 *   -webkit-text-fill-color  — спецификация WebKit, может перебивать color
 *   text-shadow              — устранить любой темный текстовый glow
 *   fill                     — если когда-нибудь будет SVG-глиф
 *
 * Дополнительно центрируем глиф, т.к. в исходнике он позиционируется
 * top:0;left:0 без учёта размера символа. */
aside#catalog__filter .checkbox_custom_filter ~ div[data-checkbox="div"]::after,
aside#catalog__filter .checkbox_custom_filter:checked ~ div[data-checkbox="div"]::after,
.checkbox_custom_filter ~ div[data-checkbox="div"]::after,
.checkbox_custom_filter:checked ~ div[data-checkbox="div"]::after {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
  fill: #fff !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
}

/* Также красим сам родитель: некоторые браузеры берут цвет с него
 * до того, как ::after родится. */
aside#catalog__filter .checkbox_custom_filter:checked ~ div[data-checkbox="div"],
.checkbox_custom_filter:checked ~ div[data-checkbox="div"] {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Соседская селекторная пара ".checkbox_custom_filter + [data-checkbox=\"div\"]"
 * (через "+" — техопт) и ".checkbox_custom_filter ~ div[data-checkbox=\"div\"]"
 * (через "~" — базовый style.css): в реальном HTML между input и div могут
 * быть текст-ноды/<label>, поэтому надёжный селектор — "~". Дублируем правило
 * для обеих форм, иначе :checked-фон может не примениться. */
aside#catalog__filter .checkbox_custom_filter:checked ~ [data-checkbox="div"],
.checkbox_custom_filter:checked ~ div[data-checkbox="div"] {
  background-color: var(--to-primary) !important;
  border-color: var(--to-primary) !important;
}

/* -------- Поиск внутри фильтра -------- */
aside#catalog__filter .find_property_value {
  background-color: #f7f7f8 !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 8px !important;
  padding: 6px 32px 6px 10px !important;
  font-size: 12px !important;
  color: #333 !important;
  width: 100% !important;
  transition: border-color 0.2s !important;
}

aside#catalog__filter .find_property_value:focus {
  border-color: var(--to-primary) !important;
  outline: none !important;
  background-color: #fff !important;
}

aside#catalog__filter .find_property_value::placeholder {
  color: #bbb !important;
}

aside#catalog__filter .find_property_value_wrapper {
  position: relative !important;
  margin-bottom: 10px !important;
}

aside#catalog__filter .find_property_value__button {
  background: none !important;
  border: none !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  padding: 2px !important;
  color: #bbb !important;
}

aside#catalog__filter .find_property_value__button:hover {
  color: var(--to-primary) !important;
}

/* -------- Список чекбоксов — скроллбар -------- */
aside#catalog__filter .blank_ul_wrapper {
  max-height: none !important;
  overflow-y: visible !important;
  overflow: visible !important;
}

aside#catalog__filter .blank_ul_wrapper::-webkit-scrollbar {
  width: 3px !important;
}

aside#catalog__filter .blank_ul_wrapper::-webkit-scrollbar-thumb {
  background: #ddd !important;
  border-radius: 3px !important;
}

aside#catalog__filter .blank_ul_wrapper::-webkit-scrollbar-track {
  background: transparent !important;
}

/* -------- Кнопки Применить / Сбросить --------
 * Каждая кнопка — на всю ширину сайдбара (стек в колонку).
 * Порядок: «Применить» (primary, бордовая) сверху, «Сбросить» снизу.
 * В DOM шаблон ставит сначала del_filter, потом set_filter, поэтому
 * переставляем через flex order. */
aside#catalog__filter .bx_filter_button_box,
aside#catalog__filter .bx_filter_button_box .bx_filter_block,
aside#catalog__filter .bx_filter_button_box .filter_buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
}

aside#catalog__filter .bx_filter_button_box {
  padding: 12px 0 4px !important;
}

aside#catalog__filter #set_filter,
aside#catalog__filter #del_filter,
aside#catalog__filter input.bx_filter_search_button,
aside#catalog__filter input.bx_filter_search_reset {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  padding: 11px 20px !important;
  cursor: pointer !important;
  transition: background-color 0.15s, transform 0.1s !important;
  flex: 0 0 auto !important;
  /* Полное центрирование текста внутри <input type="submit">.
   * text-align идёт по горизонтали, line-height + vertical-align по вертикали.
   * font-family + letter-spacing сбрасываем, чтобы шрифт не «уезжал» из-за
   * Bitrix-класса .fonts__main_comment (тот навешивает кастомный font-family
   * и letter-spacing > 0, что визуально смещает текст вправо). */
  text-align: center !important;
  text-indent: 0 !important;
  vertical-align: middle !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  font-family: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
}

aside#catalog__filter #set_filter {
  background-color: var(--to-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
  order: 1 !important;
}

aside#catalog__filter #set_filter:hover {
  background-color: var(--to-primary-dark) !important;
}

aside#catalog__filter #set_filter:active {
  transform: scale(0.99) !important;
}

aside#catalog__filter #del_filter {
  background-color: #f5f5f6 !important;
  color: #888 !important;
  font-weight: 500 !important;
  order: 2 !important;
}

aside#catalog__filter #del_filter:hover {
  background-color: #eee !important;
  color: #555 !important;
}

/* -------- Текст на кнопках умного фильтра в ЛЮБОМ контексте --------
 * Все читаемые стили кнопок (font-size:13px, цвет текста) выше заданы под
 * scope `aside#catalog__filter`. Если эти же кнопки отрисованы вне сайдбара
 * (напр. в шапочном фильтре b2b_smart_filter_AMX_header или в мобильном
 * поповере), они наследуют от родителя font-size:0 / text-fill-color:transparent
 * и текст value «пропадает» сразу на обеих кнопках. Дублируем гарантирующие
 * правила без scope. Специфичность ниже, чем у aside-правил, поэтому вид
 * фильтра в сайдбаре не меняется. */
#set_filter,
#del_filter,
input.bx_filter_search_button,
input.bx_filter_search_reset {
  font-size: 13px !important;
  line-height: 1.3 !important;
  text-indent: 0 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  -webkit-text-fill-color: currentColor !important;
}

#set_filter,
input.bx_filter_search_button {
  color: #fff !important;
  background-color: var(--to-primary) !important;
}

#del_filter,
input.bx_filter_search_reset {
  color: #555 !important;
  background-color: #f5f5f6 !important;
}

/* Внутренний инфо-блок «модификаций фильтра» (modef) не должен растягиваться
 * на всю ширину как кнопки — он содержит просто текст «Найдено: N товаров». */
aside#catalog__filter .bx_filter_popup_result {
  order: 0 !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 12px !important;
  color: #888 !important;
  padding: 2px 0 6px !important;
}

/* -------- Кнопка «Закрыть» — скрываем на десктопе -------- */
.catalog__filter-toggler--close {
  display: none !important;
}

/* -------- Кнопка-тогглер фильтра (иконка-воронка) — в стилистике сайта --------
 * База (b2bcabinet_new/style.css:198) красит её в чужой тёмно-синий #3e495f.
 * Приводим к фирменному бордовому-красному, как FAB и остальные акции. */
.catalog__filter-toggler {
  background-color: var(--to-primary, #7B1B16) !important;
  background: linear-gradient(135deg, var(--to-primary, #7B1B16), #a52722) !important;
  border-radius: 10px !important;
  width: 40px !important;
  height: 40px !important;
  box-shadow: 0 2px 8px rgba(123, 27, 22, 0.30) !important;
  border: none !important;
  transition: filter 0.15s ease, box-shadow 0.15s ease !important;
}
.catalog__filter-toggler:hover {
  filter: brightness(1.06) !important;
  box-shadow: 0 4px 14px rgba(123, 27, 22, 0.40) !important;
}
.catalog__filter-toggler:active {
  filter: brightness(0.96) !important;
}
.catalog__filter-toggler .catalog__filter-toggler-icon {
  color: #fff !important;
}

/* -------- Скроллбар фильтра (общий sidebar-content) -------- */
aside#catalog__filter .sidebar-content::-webkit-scrollbar {
  width: 4px;
}
aside#catalog__filter .sidebar-content::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}
aside#catalog__filter .sidebar-content::-webkit-scrollbar-track {
  background: transparent;
}

/* Каталог — занимает оставшееся место */
.catalog__section-wrapper,
#card__catalog__section-wrapper {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Content — общий фон */
.content {
  background-color: var(--to-bg) !important;
}

/* ========== 4. ОСНОВНЫЕ ЦВЕТА — ПЕРЕОПРЕДЕЛЕНИЕ НА #7B1B16 ========== */
:root {
  --theme-primary: #7B1B16;
  --theme-primary-light: #943630;
  --theme-primary-dark: #5a1210;
  --theme-accent: #7B1B16;
}

/* Кнопки */
.btn-primary,
.btn.btn_b2b,
.catalog__basket-link,
.add_to_cart,
.add_to_cart_btn,
.popup-window-button,
#set_filter {
  background-color: var(--to-primary) !important;
  background: var(--to-primary) !important;
  border-color: var(--to-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn.btn_b2b:hover,
.catalog__basket-link:hover,
.add_to_cart:hover,
#set_filter:hover {
  background-color: var(--to-primary-dark) !important;
  background: var(--to-primary-dark) !important;
  border-color: var(--to-primary-dark) !important;
}

/* Ссылки */
a.main-link.b2b-main-link {
  color: var(--to-primary) !important;
}

a.main-link.b2b-main-link:hover {
  color: var(--to-primary-dark) !important;
}

/* Пагинация */
.catalog .pagination-flat .page-item.active .page-link {
  background-color: var(--to-primary) !important;
  border-color: var(--to-primary) !important;
}

/* Multibasket */
.multibasket.b2b_multibasket .multibasket__current,
.multibasket .multibasket__current {
  background-color: var(--to-primary) !important;
}

.multibasket.b2b_multibasket .multibasket__current:hover,
.multibasket .multibasket__current:hover {
  background-color: var(--to-primary-dark) !important;
}

/* Auth company change */
.auth-company-change {
  background-color: rgba(123, 27, 22, 0.1) !important;
}

.auth-company-change:hover,
.auth-company-change.show {
  background-color: rgba(123, 27, 22, 0.18) !important;
}

.auth-company-change .dropdown-toggle,
.auth-company-change .navbar-nav-link {
  color: #333 !important;
}

/* ========== ХЛЕБНЫЕ КРОШКИ + ЗАГОЛОВОК СТРАНИЦЫ ========== */

/* Блок page-header — чистый, без лишних границ */
body .page-header,
body .page-header-light {
  background-color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body .page-header-content {
  padding: 4px 20px 0 !important;
}

/* Заголовок страницы */
body .page-title.d-flex {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  /* layout.min.css даёт .page-title{padding:8px 0} — сбиваем, чтобы блок
   * заголовка не занимал лишнюю высоту над товарными предложениями. */
  padding: 2px 0 !important;
}

/* Хлебные крошки — строка, компактные */
body .breadcrumb-line,
body .breadcrumb-line.breadcrumb-line-light {
  background-color: transparent !important;
  border: none !important;
  padding: 2px 20px 8px !important;
}

/* Скрываем пустую обёртку breadcrumb-line на страницах, где компонент
 * bitrix:breadcrumb (шаблон b2bcabinet_breadcrumb) вернул пустую строку —
 * напр. на главной (единственный пункт «Главная»). Без этого правила
 * сверху страницы остаётся пустая полоса с padding-bottom 8px. */
body .breadcrumb-line:not(:has(.breadcrumb)),
body .breadcrumb-line:has(> .d-flex:empty),
body .breadcrumb-line:has(> .d-flex > .breadcrumb:empty) {
  display: none !important;
}

body .breadcrumb,
body .breadcrumb-line .breadcrumb {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}

/* Ссылки — мелкие, приглушённые */
body a.breadcrumb-item,
body .breadcrumb-item a,
body .breadcrumb-line a.breadcrumb-item {
  color: #999 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}

body a.breadcrumb-item:hover,
body .breadcrumb-item a:hover,
body .breadcrumb-line a.breadcrumb-item:hover {
  color: var(--to-primary) !important;
}

/* Иконка дома — чуть крупнее */
body a.breadcrumb-item i.icon-home2,
body .breadcrumb-item a i.icon-home2 {
  font-size: 13px !important;
  color: #bbb !important;
  margin-right: 4px !important;
}

/* Разделитель → стрелка */
body .breadcrumb-item + .breadcrumb-item::before {
  content: "›" !important;
  font-family: inherit !important;
  color: #ccc !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  padding: 0 6px !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
}

/* Активный (текущая страница) */
body .breadcrumb-item.active,
body .breadcrumb-line .breadcrumb-item.active {
  color: #555 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Content background */
.content-wrapper {
  background-color: var(--to-bg) !important;
}

/* Весь блок page-content — отступ сверху под fixed шапку */
.page-content {
  padding-top: var(--to-header-height) !important;
}

/* ========== 5. ДОРАБОТКИ ========== */

/* --- Карточки товаров (плитка) — название --- */
body div.blank-zakaza__item .product__property.product__property--name {
  padding: 16px 16px 8px !important;
  max-width: none !important;
  text-align: center !important;
  border-top: 1px solid #f0f0f0 !important;
}

body div.blank-zakaza__item .product__link {
  max-width: none !important;
  white-space: normal !important;
  overflow: hidden !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #333 !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  text-align: center !important;
  min-height: 58px !important;
}

body div.blank-zakaza__item .product__link:hover {
  color: var(--to-primary) !important;
}

/* --- Карточки — картинка --- */
body div.blank-zakaza__item .product__property.product__property--image {
  padding: 20px 16px 16px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: #f9f9fb !important;
  border-bottom: none !important;
}

/* --- Карточки — наличие --- */
body div.blank-zakaza__item .product__property.product__property--avaliable {
  padding: 6px 16px !important;
  font-size: 12px !important;
  color: #999 !important;
  text-align: center !important;
}

/* --- Карточки — цены --- */
body div.blank-zakaza__item .product__property.product__property--price {
  padding: 3px 16px !important;
  text-align: center !important;
}

body div.blank-zakaza__item .wrap-product__property--price {
  display: flex !important;
  justify-content: center !important;
  align-items: baseline !important;
  gap: 6px !important;
  width: 100% !important;
  float: none !important;
}

body div.blank-zakaza__item .wrap-product__property--price .price-title {
  width: auto !important;
  float: none !important;
  font-size: 12px !important;
  color: #888 !important;
}

body div.blank-zakaza__item .wrap-product__property--price .price_item {
  width: auto !important;
  float: none !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #1a1a1a !important;
}

/* --- Карточки — бренд --- */
body div.blank-zakaza__item .product__property.product__property--default:not([title=""]) {
  padding: 8px 16px !important;
  font-size: 11px !important;
  color: #b0b0b0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  text-align: center !important;
  border-top: 1px solid #f0f0f0 !important;
  overflow: visible !important;
  min-height: 28px !important;
}

/* --- Карточки — скрытие пустых блоков --- */
body div.blank-zakaza__item .product__property.product__property--default[title=""] {
  display: none !important;
}

body div.blank-zakaza__item .product__property--price.is-empty {
  display: none !important;
}

/* --- Карточки — количество + кнопки --- */
body div.blank-zakaza__item .product__property.product__property--quantity {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  min-width: auto !important;
  padding: 12px 16px 20px !important;
  margin-top: auto !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border-top: 1px solid #f0f0f0 !important;
}

body div.blank-zakaza__item .quantity-selector {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

body div.blank-zakaza__item .quantity-selector__decrement,
body div.blank-zakaza__item .quantity-selector__increment {
  background-color: var(--to-primary) !important;
  border: none !important;
  border-radius: 8px !important;
  width: 32px !important;
  height: 32px !important;
  color: #fff !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.15s !important;
}

body div.blank-zakaza__item .quantity-selector__decrement:hover,
body div.blank-zakaza__item .quantity-selector__increment:hover {
  background-color: var(--to-primary-dark) !important;
}

body div.blank-zakaza__item .quantity-selector__value {
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  margin: 0 6px !important;
  height: 32px !important;
  width: 52px !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #333 !important;
  outline: none !important;
}

/* --- Карточка — убираем overflow:hidden чтобы hover тени не обрезались --- */
body div.blank-zakaza__item {
  overflow: visible !important;
}

/* --- Карточка hover --- */
body div.blank-zakaza__item {
  border: 1px solid #e8e8e8 !important;
  border-radius: 14px !important;
  background: #fff !important;
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s !important;
}

body div.blank-zakaza__item:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 12px 28px rgba(123,27,22,0.08) !important;
  transform: translateY(-4px) !important;
  border-color: rgba(123,27,22,0.15) !important;
}

/* --- Карточка .product — сброс hover на самом .product --- */
body div.blank-zakaza__item .product {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

body div.blank-zakaza__item .product:hover {
  border: none !important;
  box-shadow: none !important;
  min-height: auto !important;
}

/* ============================================================
 * ПЛИТОЧНЫЙ ВИД КАТАЛОГА (display=block, шаблон itrm_plitka)
 * ============================================================
 * Скоупится через div.blank-zakaza (list-view рендерит table.blank-zakaza
 * с tbody.blank-zakaza__item — те правила не задеваются). */

/* 1) Сброс position:sticky на свойствах .product. item_plitka/style.css
 * задаёт .product__property--image/--name/--quantity position:sticky с
 * left:0/85px/right:0 и z-index:200 — нужно для горизонтального скролла
 * таблицы в list-view. В плитке sticky приводит к тому, что блоки
 * «выезжают» вверх/в сторону и накладываются на соседей. */
body div.blank-zakaza .blank-zakaza__item .product__property,
body div.blank-zakaza .blank-zakaza__item .product__property--image,
body div.blank-zakaza .blank-zakaza__item .product__property--name,
body div.blank-zakaza .blank-zakaza__item .product__property--quantity,
body div.blank-zakaza .blank-zakaza__item .product__property--default {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  white-space: normal !important;
  text-overflow: clip !important;
}

/* 2) Картинка: бокс с фикс. высотой, изображение вписывается с object-fit:contain.
 * item_plitka.css задаёт .product__image-wrapper width:250px и .product__image
 * 250×250 жёстко — это вылезало за карточку шириной 280px при padding'е на
 * .product__property--image. Делаем адаптивно. */
body div.blank-zakaza .blank-zakaza__item .product__image-wrapper {
  width: 100% !important;
  height: 200px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body div.blank-zakaza .blank-zakaza__item .product__image {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 3) Скролл-обёртка: itrm_plitka/style.css задаёт overflow-x/y:hidden +
 * height:100% — клиппит карточки. Для плитки нужен естественный поток.
 * Скоупим по наличию внутри div.blank-zakaza (list-view имеет table). */
body .blank-zakaza__scroll-wrapper:has(div.blank-zakaza),
body .blank-zakaza__scroll-wrapper:has(> .blank-zakaza__wrapper > div.blank-zakaza) {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  height: auto !important;
}

body .blank-zakaza__scroll-wrapper:has(div.blank-zakaza) > .blank-zakaza__wrapper {
  height: auto !important;
}

/* 4) Сетка карточек. item_plitka.css задаёт .blank-zakaza display:flex
 * flex-wrap justify-content:center. Меняем justify на flex-start и
 * align-items на flex-start (а НЕ stretch, иначе короткие карточки
 * растягиваются по высоте самой высокой → визуальная «дыра» между
 * картинкой и нижними блоками). Gap вместо margin-right/bottom. */
body div.blank-zakaza {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  padding: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 5) Карточка-обёртка. item_plitka.css даёт width:280px + margin-right:20px
 * + margin-bottom:22px + min-height:460px. Заменяем margin'ы на gap (выше)
 * и убираем display:flex/flex-direction (block-поток, как было исходно
 * до моих правок). Это устраняет «съезжание» в Chrome/Firefox.
 *
 * АДАПТИВ: 280px только на десктопе. На планшете — 3 в ряд через calc,
 * на мобильном — 2 в ряд, на очень узких — 1 в ряд (full-width). */
body div.blank-zakaza > .blank-zakaza__item {
  margin: 0 !important;
  display: block !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
  width: 280px !important;
}

@media (max-width: 991.98px) {
  body div.blank-zakaza > .blank-zakaza__item {
    width: calc((100% - 32px) / 3) !important;
  }
}
@media (max-width: 767.98px) {
  body div.blank-zakaza {
    padding: 0 !important;
    gap: 12px !important;
  }
  body div.blank-zakaza > .blank-zakaza__item {
    width: calc((100% - 12px) / 2) !important;
    min-height: 0 !important;
  }
}
@media (max-width: 380px) {
  body div.blank-zakaza {
    gap: 10px !important;
  }
  body div.blank-zakaza > .blank-zakaza__item {
    width: 100% !important;
  }
}

/* 6) Секция каталога: оригинал style.css (b2bcabinet_new) задаёт
 * .catalog__section flex-column justify-content:space-between — это
 * раскидывает дочерние секции (search/header/scroll/footer) по краям
 * вертикали, оставляя «дыру» под карточками. flex-start прижимает к верху. */
body .catalog__section {
  justify-content: flex-start !important;
}

/* 7) sticky-флажки .catalog__footer и .blank-zakaza__pagination не должны
 * прилипать к контенту в плитке — оставляем по умолчанию (sticky bottom уже
 * настроен в секции футера). */

/* toggle сайдбара скрыт в секции 1 (header) */

/* Карточки товаров — скругление */
.content .card {
  border-radius: 8px !important;
  border: 1px solid #eee !important;
}

/* --- «Шапка» таблицы каталога в list-view ---
 * Возвращена по запросу: рендерится в catalog.section/.default/template.php
 * (lines 129-216) — это <thead> с <th> для каждой колонки: Доставка, Наличие,
 * Цена(ы), Кол-во и т.п. Только для ?display=list — в плиточном виде <thead>
 * физически отсутствует, селекторы тут безвредны.
 *
 * Раньше шапка была скрыта `display:none !important` (старое решение «убрать
 * дублирующий заголовок»). Теперь — наоборот, форсим показ, чтобы перебить
 * любые старые !important-правила из закэшированного CSS-пака на проде. */
.blank-zakaza__header {
  background-color: #f5f5f6 !important;
  display: table-header-group !important;
}

table.blank-zakaza > thead,
table.blank-zakaza > thead.blank-zakaza__header {
  display: table-header-group !important;
}

.blank-zakaza__header-row,
table.blank-zakaza > thead > tr.blank-zakaza__header-row {
  display: table-row !important;
}

.blank-zakaza__header-property,
.blank-zakaza__header-fullscreen {
  display: table-cell !important;
}

/* --- Скрываем шапку карточки smart-фильтра и аналогичных блоков ---
 * <div class="card-header bg-transparent header-elements-inline"> приходит из
 * шаблонов: b2b_smart_filter*, news.detail, search.tags.cloud, support.wizard.
 * Это дублирующий заголовок секции — по запросу пользователя убираем везде. */
.card-header.bg-transparent.header-elements-inline {
  display: none !important;
}

/* --- Скрываем плашку с аватаром/именем пользователя ---
 * .bx-user-info-anchor-cell приходит из bitrix:main.user.link / b2bcabinet_userprofile
 * (template.php: <div class="mr-3 bx-user-info-anchor-cell"> и
 * .media-body.font-weight-semibold.bx-user-info-anchor-cell). На части страниц
 * она была скрыта точечно — теперь убираем глобально на всех страницах. */
.bx-user-info-anchor-cell,
.sidebar-user .bx-user-info-anchor-cell,
.media .bx-user-info-anchor-cell {
  display: none !important;
}

/* --- Уменьшаем верхний отступ над контентом каталога ---
 * После скрытия header-row пустоту над первой строкой создают
 * .filter-panel__view + .sorting_block + базовый padding-top на .page-content.
 * Подтягиваем их к шапке. */
.page-content {
  padding-top: calc(var(--to-header-height) + 4px) !important;
}

.catalog__section-wrapper {
  padding-top: 0 !important;
}

.blank-zakaza__pagination--top {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* ========== 6. ШАПКА КАТАЛОГА ========== */

/* Контейнер шапки (.filter-panel__view) содержит ДВА типа ссылок:
 *   1) переключатели вида (#button_list, .controls-view__link--block) — должны
 *      выглядеть как 36×36-кнопки-иконки;
 *   2) ссылки сортировки (.sorting_block a — «Цене», «Наличию») — это
 *      ТЕКСТОВЫЕ ссылки, не кнопки.
 * Плюс отдельно есть #close_catalog/#view_catalog — их стилизует свой
 * собственный блок в этом же файле (красные 40×34).
 *
 * Старое правило `.filter-panel__view a` (с !important) применялось
 * ко ВСЕМ <a> внутри, включая sorting_block и close/view → "вёрстка
 * кривая в шапке". Скоупим строго на 2 переключателя по их селекторам.
 *
 * КРИТИЧНО: base b2bcabinet_new/style.css:61 ставит .filter-panel__view
 * position:absolute; top:15px; left:15px; width:24%; z-index:9 — то есть
 * вся шапка плавает абсолютным оверлеем над контентом! Полностью гасим
 * абсолютное позиционирование, возвращаем в нормальный поток. */
.filter-panel__view {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 8px 6px !important;
  margin: 0 !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  z-index: auto !important;
  box-sizing: border-box !important;
}

/* Аналогичный сброс в медиа-запросе ≤525px (b2bcabinet_new/style.css:629
 * там тоже position:relative; width:24% !important — навязывает узкую
 * полоску слева, ломая шапку на мобилке). */
@media (max-width: 525px) {
  .filter-panel__view {
    width: 100% !important;
    position: static !important;
    left: auto !important;
    margin-bottom: 0 !important;
    z-index: auto !important;
  }
}

/* Прямой <div>-ребёнок шапки, в котором живут 4 ссылки-иконки */
.filter-panel__view > div:not(.sorting_block) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Только две ссылки-переключателя вида */
.filter-panel__view #button_list,
.filter-panel__view .controls-view__link--block {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background-color: #f0f0f2 !important;
  border: 1px solid transparent !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

/* Активный переключатель (текущий вид каталога) — burgundy bg + белая иконка.
 * .muted навешивается из section_vertical.php на тот переключатель, который
 * представляет НЕактивный вид. Класс .controls-view__link--block НЕ означает
 * «активный block-view», это просто структурное имя из старого шаблона. */
.filter-panel__view #button_list:not(.muted),
.filter-panel__view .controls-view__link--block:not(.muted) {
  background-color: var(--to-primary) !important;
  border-color: var(--to-primary) !important;
}

.filter-panel__view #button_list:not(.muted) svg path,
.filter-panel__view #button_list:not(.muted) svg .cls-1,
.filter-panel__view .controls-view__link--block:not(.muted) svg path,
.filter-panel__view .controls-view__link--block:not(.muted) svg .cls-1 {
  fill: #fff !important;
  transition: fill 0.15s ease !important;
}

/* Hover активной — burgundy темнее, иконка ОСТАЁТСЯ белой (на красном тёмная иконка
 * не читалась — это и был баг). */
.filter-panel__view #button_list:not(.muted):hover,
.filter-panel__view .controls-view__link--block:not(.muted):hover {
  background-color: var(--to-primary-dark) !important;
  border-color: var(--to-primary-dark) !important;
}

.filter-panel__view #button_list:not(.muted):hover svg path,
.filter-panel__view #button_list:not(.muted):hover svg .cls-1,
.filter-panel__view .controls-view__link--block:not(.muted):hover svg path,
.filter-panel__view .controls-view__link--block:not(.muted):hover svg .cls-1 {
  fill: #fff !important;
}

/* Muted (НЕактивный) — светлый фон, тёмная иконка. */
.filter-panel__view #button_list.muted,
.filter-panel__view .controls-view__link--block.muted {
  background-color: #f0f0f2 !important;
  border-color: transparent !important;
}

.filter-panel__view #button_list.muted svg path,
.filter-panel__view #button_list.muted svg .cls-1,
.filter-panel__view .controls-view__link--block.muted svg path,
.filter-panel__view .controls-view__link--block.muted svg .cls-1 {
  fill: #888 !important;
  transition: fill 0.15s ease !important;
}

/* Hover на muted — показываем preview активного состояния: brand bg + белая иконка.
 * Пользователь понимает, что клик «активирует» эту кнопку. */
.filter-panel__view #button_list.muted:hover,
.filter-panel__view .controls-view__link--block.muted:hover {
  background-color: var(--to-primary) !important;
  border-color: var(--to-primary) !important;
}

.filter-panel__view #button_list.muted:hover svg path,
.filter-panel__view #button_list.muted:hover svg .cls-1,
.filter-panel__view .controls-view__link--block.muted:hover svg path,
.filter-panel__view .controls-view__link--block.muted:hover svg .cls-1 {
  fill: #fff !important;
}

/* Иконка-svg внутри переключателей: контейнер <i> наследует свой шрифт,
 * нам нужен только размер. */
.filter-panel__view #button_list i,
.filter-panel__view .controls-view__link--block i,
.filter-panel__view #button_list i svg,
.filter-panel__view .controls-view__link--block i svg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  line-height: 0 !important;
}

/* --- Блок сортировки в шапке (только в плитке) --- */
.filter-panel__view .sorting_block {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  margin: 0 0 0 12px !important;
  padding: 0 0 0 12px !important;
  border-left: 1px solid #e8e8e8 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

.filter-panel__view .sorting_block > span {
  color: #6b6b6b !important;
  font-weight: 500 !important;
}

.filter-panel__view .sorting_block > a {
  /* НЕ кнопка: обычная текстовая ссылка-чип */
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  padding: 4px 10px !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: var(--to-primary, #7B1B16) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  transition: background-color 0.15s, border-color 0.15s !important;
}

.filter-panel__view .sorting_block > a:hover {
  background-color: rgba(123, 27, 22, 0.06) !important;
  border-color: rgba(123, 27, 22, 0.18) !important;
  color: var(--to-primary-dark, #5a1210) !important;
}

/* На мобильном .sorting_block с white-space:nowrap + inline-flex не переносился
 * и вылезал за экран (особенно с чипами-тогглами фильтра). Разрешаем перенос
 * на свою строку во всю ширину, убираем левый разделитель. */
@media (max-width: 767.98px) {
  .filter-panel__view .sorting_block {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    border-left: none !important;
    row-gap: 6px !important;
  }
  .filter-panel__view .sorting_block .sorting_block__toggles {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* --- Пагинация — современные пилюли --- */
.blank-zakaza__pagination {
  display: flex !important;
  justify-content: center !important;
}

.pagination-flat.pagination {
  gap: 4px !important;
  align-items: center !important;
}

.pagination-flat .page-item .page-link {
  border: none !important;
  border-radius: 8px !important;
  min-width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #555 !important;
  background-color: transparent !important;
  transition: all 0.15s ease !important;
  padding: 0 8px !important;
  line-height: 1 !important;
}

.pagination-flat .page-item:not(.active):not(.disabled) .page-link:hover {
  background-color: rgba(123, 27, 22, 0.08) !important;
  color: var(--to-primary) !important;
}

.pagination-flat .page-item.active .page-link,
.catalog .pagination-flat .page-item.active .page-link {
  background-color: var(--to-primary) !important;
  color: #fff !important;
  border-color: var(--to-primary) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(123, 27, 22, 0.25) !important;
}

.pagination-flat .page-item.disabled .page-link {
  color: #ccc !important;
  background-color: transparent !important;
  opacity: 0.5 !important;
}

/* --- Каталог-футер (Число позиций / В корзину) — sticky --- */
.catalog__footer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 100 !important;
  background-color: #fff !important;
  border-top: 1px solid #eee !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06) !important;
  padding: 12px 20px !important;
  margin-top: 16px !important;
  border-radius: 14px 14px 0 0 !important;
}

.catalog__footer-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  /* Разрешаем перенос: на узких экранах actions+basket не помещаются в одну
   * строку и контент вылезал за правый край экрана (горизонтальный скролл). */
  flex-wrap: wrap !important;
  max-width: 100% !important;
}

.catalog__basket {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  margin: 0 auto !important;
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
  padding: 14px 24px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.catalog__basket-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 28px !important;
  white-space: nowrap !important;
}

/* Каждый параметр (Число позиций / На сумму) выводим в ОДНУ строку:
 * заголовок и значение — рядом, через gap. Раньше тут был column,
 * поэтому value падало под title. */
.catalog__basket-quantity,
.catalog__basket-price {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.catalog__basket-price {
  padding-left: 28px !important;
  border-left: 1px solid #e8e8e8 !important;
}

/* Лейбл — инлайн-подпись слева от значения (раньше была мелкая капс-надстройка
 * сверху, из-за чего параметры выводились в две строки). */
.catalog__basket-quantity-title,
.catalog__basket-price-title {
  font-size: 13px !important;
  color: #6b6b6b !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

.catalog__basket-quantity-value,
.catalog__basket-price-value {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  line-height: 1.3 !important;
}

.catalog__basket-price-value {
  color: var(--to-primary, #b71c1c) !important;
}

.catalog__basket-link {
  padding: 10px 28px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  min-width: 140px !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  /* Текст на тёмно-красном фоне (.btn-primary правило выше задаёт bg). Без
   * явного color текст наследовался из <a> и сливался с фоном. */
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  border: 1px solid var(--to-primary) !important;
}

.catalog__basket-link:hover:not(.disabled) {
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(123, 27, 22, 0.3) !important;
}

.catalog__basket-link:active:not(.disabled) {
  color: #fff !important;
  transform: scale(0.98) !important;
}

/* В HTML кнопка приходит как .catalog__basket-link.disabled при пустой корзине —
 * базовое правило .btn-primary окрашивает её в фирменный красный, что выглядит
 * как «активная» кнопка. Для disabled даём нейтральный серый и cursor:not-allowed. */
.catalog__basket-link.disabled,
.catalog__basket-link.disabled:hover,
.catalog__basket-link.disabled:focus,
.catalog__basket-link.disabled:active {
  background-color: #e6e6e8 !important;
  background: #e6e6e8 !important;
  border-color: #dcdce0 !important;
  color: #9a9a9a !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: none !important;
}

@media (max-width: 767.98px) {
  /* Каталог-футер на мобильном: actions и корзина в столбик во всю ширину,
   * иначе их суммарная min-content ширина превышала экран и блок «вылезал»
   * за правый край (появлялся горизонтальный скролл всей страницы). */
  .catalog__footer {
    padding: 10px 12px !important;
  }

  .catalog__footer-wrapper {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Корзина — наверх, действия — под ней */
  .catalog__basket {
    order: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  .catalog__actions {
    order: 2 !important;
    width: 100% !important;
  }

  .catalog__actions-toggler {
    width: 100% !important;
    justify-content: center !important;
  }

  .catalog__basket-wrapper {
    width: 100% !important;
    margin: 0 !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 6px 16px !important;
  }

  /* Параметры могут переноситься и ужиматься, без принудительной min-ширины */
  .catalog__basket-quantity,
  .catalog__basket-price {
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }

  /* На мобильном перенос — убираем вертикальный разделитель/отступ слева,
   * который при переносе «На сумму» на новую строку висел бы криво. */
  .catalog__basket-price {
    padding-left: 0 !important;
    border-left: none !important;
  }

  .catalog__basket-link {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* --- Кнопки переключения видимости оптовых цен (#close_catalog / #view_catalog) ---
 * Кнопки логически работают парой: в любой момент видна РОВНО ОДНА из них.
 * Состояние хранится в localStorage('hidden'), JS в section_vertical.php
 * ставит инлайн-стиль одной видимой ("display: inline-flex!important;") и
 * другой скрытой ("display: none;").
 *
 * Раньше у меня было `display: inline-flex !important` без условия — оно
 * перебивало инлайн `display: none;` (там нет !important), и обе кнопки
 * всегда отображались одновременно. Решение: применять стили только если
 * элемент НЕ скрыт через инлайн-стиль (`:not([style*="display: none"])`).
 *
 * Подбор размеров: близкое (~40×34) выровненное окно. Картинки разной
 * пропорции (close — квадрат ~512×512, view — широкий ~980×580), поэтому
 * <img> внутри использует object-fit:contain и max-height, чтобы оба
 * значка читались одинаково по высоте и не деформировались. */
.close_catalog:not([style*="display: none"]),
.view_catalog:not([style*="display: none"]),
#close_catalog:not([style*="display: none"]),
#view_catalog:not([style*="display: none"]) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 34px !important;
  padding: 6px 8px !important;
  margin: 0 0 0 6px !important;
  border-radius: 8px !important;
  background-color: var(--to-primary) !important;
  border: 1px solid var(--to-primary) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  transition: background-color 0.15s ease, transform 0.15s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

.close_catalog:not([style*="display: none"]):hover,
.view_catalog:not([style*="display: none"]):hover,
#close_catalog:not([style*="display: none"]):hover,
#view_catalog:not([style*="display: none"]):hover {
  background-color: var(--to-primary-dark) !important;
  transform: translateY(-1px) !important;
}

.close_catalog img,
.view_catalog img,
#close_catalog img,
#view_catalog img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 16px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto !important;
  vertical-align: middle !important;
  /* PNG чёрные → инвертируем в белый, чтобы читалось на тёмно-красной подложке */
  filter: brightness(0) invert(1) !important;
  -webkit-filter: brightness(0) invert(1) !important;
}

.catalog__actions-toggler {
  background-color: #f5f5f6 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #555 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.catalog__actions-toggler:not(:disabled):hover {
  background-color: #eee !important;
}

/* --- Тонкий скроллбар глобально --- */
*::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

*::-webkit-scrollbar-track {
  background: transparent !important;
}

*::-webkit-scrollbar-thumb {
  background-color: #d0d0d0 !important;
  border-radius: 3px !important;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #aaa !important;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #d0d0d0 transparent;
}

/* --- Цвет выделения текста --- */
::selection {
  background-color: rgba(123, 27, 22, 0.15);
  color: #1a1a1a;
}

/* --- Focus-visible — доступность --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
.navbar-nav-link:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--to-primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(123, 27, 22, 0.12) !important;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* --- Sidebar: плавное появление текста --- */
.sidebar-xs .sidebar-main .nav-link span,
.sidebar-xs .sidebar-main .nav-link > span {
  opacity: 0 !important;
  transition: opacity 0.2s ease 0.05s !important;
}

.sidebar-xs .sidebar.sidebar-main.sidebar-expanded .nav-link span,
.sidebar-xs .sidebar.sidebar-main.sidebar-expanded .nav-link > span {
  opacity: 1 !important;
  transition: opacity 0.2s ease 0.1s !important;
}

/* --- Pace.js / спиннер --- */
.pace .pace-progress {
  background-color: var(--to-primary) !important;
  height: 2px !important;
}

#title-search .icon-spinner2.spinner {
  color: var(--to-primary) !important;
}

/* --- Разделитель page-header от контента --- */
body .page-header,
body .page-header-light {
  border-bottom: none !important;
}

/* --- Цены: tabular-nums для ровных столбцов --- */
.wrap-product__property--price .price_item {
  font-variant-numeric: tabular-nums !important;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 767.98px) {
  body .sidebar.sidebar-main {
    width: 0 !important;
    transform: translateX(-100%);
  }

  body .sidebar.sidebar-main.sidebar-mobile-expanded {
    width: var(--to-sidebar-width-expanded) !important;
    transform: translateX(0);
  }

  body .content-wrapper {
    margin-left: 0 !important;
  }

  .catalog__wrapper {
    flex-direction: column !important;
  }

  aside#catalog__filter,
  aside#catalog__filter.sidebar-component {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  aside#catalog__filter .sidebar-content {
    position: static !important;
    max-height: none !important;
  }

  .navbar__sidebar-toggle-control {
    display: block !important;
  }
}
 .sidebar-xs .sidebar-main .nav-sidebar>.nav-item {

        margin: 10px 0px 0px 0px;

    }

/* ========================================================================
   ГЛАВНАЯ СТРАНИЦА — БЛОКИ
   ======================================================================== */

/* ---- Общий заголовок секции ---- */
.home-section__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--to-primary);
  display: inline-block;
}

/* ---- HERO: SLIDER + SIDE BLOCKS ---- */
.home-hero {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
  background: #fff;
}

.home-hero > .row {
  margin: 0;
}
.home-hero > .row > [class*="col-"] {
  padding: 0;
}

/* --- Slider (left) --- */
.home-hero__slider-wrap {
  height: 100%;
  border-radius: 12px 0 0 12px;
  overflow: hidden;
}

.home-hero__slide-link {
  display: block;
  line-height: 0;
}

.home-hero__slide-img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
}

/* Slick dots — styled pagination */
.home-hero .slick-dots {
  bottom: 16px;
  display: flex !important;
  justify-content: center;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.home-hero .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}
.home-hero .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: 2px solid rgba(255,255,255,0.7);
  transition: all 0.3s ease;
  cursor: pointer;
}
.home-hero .slick-dots li button:before {
  display: none;
}
.home-hero .slick-dots li.slick-active button {
  width: 28px;
  border-radius: 5px;
  background: #fff;
  border-color: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.18);
}

/* Slick arrows — styled buttons */
.home-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: all 0.25s ease;
  opacity: 0;
  backdrop-filter: blur(4px);
}
.home-hero__slider-wrap:hover .home-hero__arrow {
  opacity: 1;
}
.home-hero__arrow:hover {
  background: #fff;
  box-shadow: 0 3px 14px rgba(0,0,0,0.22);
  transform: translateY(-50%) scale(1.08);
}
.home-hero__arrow:active {
  transform: translateY(-50%) scale(0.95);
}
.home-hero__arrow--prev {
  left: 14px;
}
.home-hero__arrow--next {
  right: 14px;
}

/* --- Side blocks (right, 2x2 grid) --- */
.home-hero__side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
  height: 340px;
}

.home-hero__side-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem 0.75rem;
  text-decoration: none !important;
  transition: all 0.3s ease;
  border-left: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
}
.home-hero__side-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--to-primary, #7B1B16);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.home-hero__side-card:hover::after {
  transform: scaleX(1);
}

.home-hero__side-card:nth-child(3),
.home-hero__side-card:nth-child(4) {
  border-bottom: none;
}

.home-hero__side-card:hover {
  transform: translateY(-2px);
  z-index: 1;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

.home-hero__side-card--promo { background: #fff8f0; }
.home-hero__side-card--promo:hover { background: #fff0df; }
.home-hero__side-card--register { background: #f0f7ff; }
.home-hero__side-card--register:hover { background: #e3efff; }
.home-hero__side-card--delivery { background: #f0faf0; }
.home-hero__side-card--delivery:hover { background: #e0f5e0; }
.home-hero__side-card--payment { background: #f5f0ff; }
.home-hero__side-card--payment:hover { background: #ebe0ff; }

.home-hero__side-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 0.5rem;
  transition: transform 0.3s ease;
}
.home-hero__side-card:hover .home-hero__side-icon,
.home-hero__side-card:hover .home-hero__side-icon-placeholder {
  transform: scale(1.1);
}

.home-hero__side-icon-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--to-primary), #a52722);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  transition: transform 0.3s ease;
}

.home-hero__side-icon-placeholder i {
  font-size: 1.3rem;
  color: #fff;
}

.home-hero__side-title {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.25rem;
}

.home-hero__side-text {
  display: block;
  font-size: 0.72rem;
  color: #777;
  line-height: 1.35;
}

/* ---- ПРОМО-БАННЕРЫ СЛАЙДЕР ---- */
.home-promo-banners {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}

.home-promo-banners__item {
  padding: 0 6px;
}

.home-promo-banners__item a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.home-promo-banners__item a:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.home-promo-banners__item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

/* Slick arrows для промо */
.home-promo-banners .slick-prev,
.home-promo-banners .slick-next {
  width: 32px;
  height: 32px;
  z-index: 1;
}
.home-promo-banners .slick-prev { left: -6px; }
.home-promo-banners .slick-next { right: -6px; }
.home-promo-banners .slick-prev:before,
.home-promo-banners .slick-next:before {
  color: #999;
  font-size: 20px;
}

/* ---- ПОПУЛЯРНЫЕ КАТЕГОРИИ ---- */
.home-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  padding: 1.75rem 1rem;
  text-align: center;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
  transition: all 0.25s;
  text-decoration: none !important;
  height: 100%;
  min-height: 150px;
}

.home-category-card:hover {
  box-shadow: 0 6px 24px rgba(123,27,22,0.15);
  transform: translateY(-3px);
  border-color: var(--to-primary);
}

.home-category-card__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #f4f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
  transition: background 0.25s;
}

.home-category-card:hover .home-category-card__icon {
  background: linear-gradient(135deg, var(--to-primary), #a52722);
}

.home-category-card__icon i {
  font-size: 1.5rem;
  color: var(--to-primary);
  transition: color 0.25s;
}

.home-category-card:hover .home-category-card__icon i {
  color: #fff;
}

.home-category-card__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}

.home-category-card:hover .home-category-card__name {
  color: var(--to-primary);
}

/* ---- SVG-иконка в карточке категории ---- */
.home-category-card__svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--to-primary, #7B1B16);
  transition: color 0.25s;
}
.home-category-card:hover .home-category-card__svg {
  color: #fff;
}

/* ---- БЛОК ТОВАРОВ (ХИТЫ ПРОДАЖ) ---- */
.home-products__slider {
  margin: 0 -8px;
}
.home-products__item {
  padding: 0 8px;
}

.product-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  transform: translateY(-3px);
}

/* Бейджи */
.product-card__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  gap: 5px;
}
.product-card__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
}
.product-card__badge--hit {
  background: var(--to-primary, #7B1B16);
}
.product-card__badge--new {
  background: #2a7d2a;
}

/* Картинка */
.product-card__image-link {
  display: block;
  background: #f8f8f8;
  padding: 1rem;
  text-align: center;
  line-height: 0;
}
.product-card__img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.product-card:hover .product-card__img {
  transform: scale(1.05);
}

/* Тело карточки */
.product-card__body {
  padding: 0.85rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card__article {
  font-size: 0.72rem;
  color: #999;
  margin-bottom: 0.4rem;
}
.product-card__article span {
  color: #777;
}

.product-card__title {
  display: block;
  text-decoration: none !important;
  margin-bottom: 0.6rem;
  flex: 1;
}
.product-card__title-cat {
  display: block;
  font-size: 0.75rem;
  color: #999;
  margin-bottom: 2px;
}
.product-card__title-name {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: #222;
  line-height: 1.3;
  transition: color 0.2s;
}
.product-card:hover .product-card__title-name {
  color: var(--to-primary, #7B1B16);
}

/* Наличие */
.product-card__availability {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 500;
  margin-top: auto;
}
.product-card__availability--in {
  color: #2a7d2a;
}
.product-card__availability--out {
  color: #b44;
}

/* Slick стрелки для товаров */
.home-products .slick-prev,
.home-products .slick-next {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  z-index: 5;
  transition: all 0.2s;
}
.home-products .slick-prev:hover,
.home-products .slick-next:hover {
  background: var(--to-primary, #7B1B16);
  box-shadow: 0 3px 12px rgba(123,27,22,0.25);
}
.home-products .slick-prev:hover:before,
.home-products .slick-next:hover:before {
  color: #fff;
}
.home-products .slick-prev:before,
.home-products .slick-next:before {
  color: #555;
  font-size: 16px;
  transition: color 0.2s;
}
.home-products .slick-prev {
  left: -12px;
}
.home-products .slick-next {
  right: -12px;
}

/* ---- ПОЧЕМУ МЫ (ПРЕИМУЩЕСТВА) ---- */
.home-adv-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.75rem 1.25rem 1.5rem;
  text-align: center;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.home-adv-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--to-primary, #7B1B16), #c0392b);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.home-adv-card:hover::before {
  transform: scaleX(1);
}
.home-adv-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(123,27,22,0.12);
}

.home-adv-card__icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(123,27,22,0.08), rgba(123,27,22,0.03));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  transition: all 0.3s ease;
}
.home-adv-card__icon-wrap svg {
  width: 26px;
  height: 26px;
  color: var(--to-primary, #7B1B16);
  transition: all 0.3s ease;
}
.home-adv-card:hover .home-adv-card__icon-wrap {
  background: linear-gradient(135deg, var(--to-primary, #7B1B16), #a52722);
  transform: scale(1.08);
}
.home-adv-card:hover .home-adv-card__icon-wrap svg {
  color: #fff;
}

.home-adv-card__number {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--to-primary, #7B1B16);
  line-height: 1.1;
  margin-bottom: 0.3rem;
  letter-spacing: -0.5px;
}

.home-adv-card__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
}

.home-adv-card__text {
  font-size: 0.78rem;
  color: #777;
  line-height: 1.45;
}

/* ---- CTA: СТАТЬ ПАРТНЁРОМ ---- */
.home-cta__inner {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d1215 40%, var(--to-primary, #7B1B16) 100%);
  border-radius: 16px;
  padding: 2.5rem 2.5rem;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  position: relative;
  overflow: hidden;
}
.home-cta__inner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.home-cta__inner::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: 20%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
  pointer-events: none;
}

.home-cta__content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.home-cta__badge {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 1rem;
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
}

.home-cta__title {
  font-size: 1.65rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

.home-cta__text {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
  margin: 0 0 1.5rem;
  max-width: 480px;
}

.home-cta__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.home-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.25s ease;
  cursor: pointer;
  border: none;
}
.home-cta__btn--primary {
  background: #fff;
  color: var(--to-primary, #7B1B16);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.home-cta__btn--primary:hover {
  background: #f0e8e8;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
  color: var(--to-primary-dark, #5a1210);
}
.home-cta__btn--outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.35);
}
.home-cta__btn--outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
  color: #fff;
  transform: translateY(-2px);
}

.home-cta__visual {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  z-index: 1;
  min-width: 200px;
}

.home-cta__stat {
  text-align: center;
  padding: 0.85rem 1.25rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(4px);
  transition: all 0.25s ease;
}
.home-cta__stat:hover {
  background: rgba(255,255,255,0.12);
  transform: scale(1.03);
}

.home-cta__stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.home-cta__stat-label {
  display: block;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
}

/* ---- CTA + ADVANTAGES АДАПТИВ ---- */
@media (max-width: 991px) {
  .home-cta__inner {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1.5rem;
    gap: 1.5rem;
  }
  .home-cta__text {
    max-width: none;
  }
  .home-cta__actions {
    justify-content: center;
  }
  .home-cta__visual {
    flex-direction: row;
    min-width: auto;
    width: 100%;
    justify-content: center;
  }
  .home-cta__stat {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 575px) {
  .home-cta__inner {
    padding: 1.5rem 1.25rem;
  }
  .home-cta__title {
    font-size: 1.3rem;
  }
  .home-cta__actions {
    flex-direction: column;
  }
  .home-cta__btn {
    justify-content: center;
    width: 100%;
  }
  .home-cta__visual {
    flex-direction: column;
  }
}

/* ---- НОВОСТИ ---- */
.home-news__list {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}

.home-news__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}

.home-news__item:last-child {
  border-bottom: none;
}

.home-news__item:hover {
  background: #fafafa;
}

.home-news__date {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--to-primary);
  background: rgba(123,27,22,0.08);
  padding: 4px 10px;
  border-radius: 6px;
  min-width: 90px;
  text-align: center;
}

.home-news__link {
  font-size: 0.9rem;
  color: #333;
  text-decoration: none;
  transition: color 0.15s;
}

.home-news__link:hover {
  color: var(--to-primary);
}

/* ---- БРЕНДЫ (СЛАЙДЕР) ---- */
.home-brands {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}

.home-brands .home-section__title {
  margin-left: 0.5rem;
}

.home-brands__item {
  padding: 0 8px;
}

.home-brands__logo {
  background: #f8f8f8;
  border-radius: 10px;
  padding: 0.75rem;
  text-align: center;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  border: 1px solid transparent;
}
.home-brands__logo img {
  max-width: 100%;
  max-height: 55px;
  object-fit: contain;
  filter: grayscale(40%);
  opacity: 0.8;
  transition: all 0.3s ease;
}
.home-brands__logo:hover {
  border-color: var(--to-primary);
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.home-brands__logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* Slick arrows для брендов */
.home-brands .slick-prev,
.home-brands .slick-next {
  width: 32px;
  height: 32px;
  z-index: 1;
}

.home-brands .slick-prev {
  left: -8px;
}

.home-brands .slick-next {
  right: -8px;
}

.home-brands .slick-prev:before,
.home-brands .slick-next:before {
  color: #999;
  font-size: 20px;
}

/* ---- АДАПТИВ ГЛАВНОЙ ---- */
@media (max-width: 991px) {
  .home-hero__slide-img {
    height: 280px;
  }
  .home-hero__side {
    height: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .home-hero__side-card {
    padding: 1rem 0.5rem;
  }
}

@media (max-width: 767px) {
  .home-hero__arrow {
    width: 32px;
    height: 32px;
    opacity: 1;
  }
  .home-hero__arrow--prev { left: 8px; }
  .home-hero__arrow--next { right: 8px; }
  .home-hero__slider-wrap {
    border-radius: 12px 12px 0 0;
  }
  /* Баннер показываем целиком (без обрезки): высота по натуральным пропорциям */
  .home-hero__slide-img {
    height: auto;
    object-fit: contain;
  }
  .home-hero__side {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .home-hero__side-card {
    border-left: none;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    border-right: 1px solid rgba(0,0,0,0.06);
    padding: 0.85rem 0.5rem;
  }
  .home-hero__side-card:nth-child(2n) {
    border-right: none;
  }
  .home-promo-banners__item img {
    height: 160px;
  }
  .product-card__img {
    height: 150px;
  }
  .home-products .slick-prev { left: -4px; }
  .home-products .slick-next { right: -4px; }
  .home-news__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ========================================================================
   ГЛАВНАЯ — ПРОФЕССИОНАЛЬНЫЙ МОБИЛЬНЫЙ ДИЗАЙН
   (переопределения поверх базовых стилей выше)
   ======================================================================== */

/* --- Планшет: подгонка пропорций hero --- */
@media (max-width: 991.98px) {
  .home-hero {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  }
  .home-hero__slide-img {
    height: 260px;
  }
}

/* --- Основной мобильный layout (≤767) --- */
@media (max-width: 767.98px) {

  /* ===== Глобальные отступы и заголовки ===== */
  .home-hero.mb-4,
  .home-advantages.mb-4,
  .home-categories.mb-4,
  .home-products.mb-4,
  .home-promo-banners.mb-4,
  .home-news.mb-4,
  .home-brands.mb-4,
  .home-cta.mb-4 {
    margin-bottom: 1.25rem !important;
  }

  .home-section__title {
    font-size: 1.05rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.4rem;
    line-height: 1.25;
    letter-spacing: -0.2px;
  }

  /* ===== HERO ===== */
  .home-hero {
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  }
  .home-hero > .row {
    display: block;
  }
  .home-hero__slider-wrap {
    border-radius: 14px 14px 0 0;
    position: relative;
  }
  /* Баннер целиком — натуральные пропорции, без object-fit:cover обрезки */
  .home-hero__slide-img {
    height: auto;
    object-fit: contain;
    border-radius: 0;
  }
  /* Точки слайдера */
  .home-hero__slider-wrap .slick-dots {
    bottom: 10px;
  }
  .home-hero__slider-wrap .slick-dots li button {
    width: 8px;
    height: 8px;
    border-width: 1.5px;
  }
  .home-hero__slider-wrap .slick-dots li.slick-active button {
    width: 22px;
    height: 8px;
  }
  /* Стрелки скрыты на мобильном — есть свайп и точки */
  .home-hero__arrow {
    display: none !important;
  }

  /* Side cards — горизонтальные строки, удобные для тапа */
  .home-hero__side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 1px;
    height: auto;
    background: rgba(0,0,0,0.06);
    border-radius: 0 0 14px 14px;
    overflow: hidden;
  }
  .home-hero__side-card {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 0.7rem;
    padding: 0.85rem 0.8rem;
    border: none !important;
    min-height: 68px;
  }
  .home-hero__side-card:hover {
    transform: none;
    box-shadow: none;
  }
  .home-hero__side-card::after {
    display: none;
  }
  .home-hero__side-icon-placeholder {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--to-primary, #7B1B16), #a52722);
    box-shadow: 0 2px 6px rgba(123,27,22,0.18);
  }
  .home-hero__side-icon-placeholder i {
    font-size: 1.1rem;
  }
  .home-hero__side-body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .home-hero__side-title {
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 0.1rem;
    line-height: 1.2;
  }
  .home-hero__side-text {
    font-size: 0.68rem;
    line-height: 1.3;
    color: #888;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ===== ПРЕИМУЩЕСТВА (Почему мы) ===== */
  .home-advantages .row,
  .home-categories .row {
    margin-left: -6px;
    margin-right: -6px;
  }
  .home-advantages .row > [class*="col-"],
  .home-categories .row > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 12px !important;
  }
  .home-adv-card {
    padding: 1rem 0.85rem 0.95rem;
    border-radius: 12px;
  }
  .home-adv-card__icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    margin-bottom: 0.55rem;
  }
  .home-adv-card__icon-wrap svg {
    width: 20px;
    height: 20px;
  }
  .home-adv-card__number {
    font-size: 1.3rem;
    margin-bottom: 0.2rem;
    letter-spacing: -0.3px;
  }
  .home-adv-card__title {
    font-size: 0.82rem;
    margin-bottom: 0.3rem;
    line-height: 1.25;
  }
  .home-adv-card__text {
    font-size: 0.72rem;
    line-height: 1.4;
  }

  /* ===== КАТЕГОРИИ ===== */
  .home-category-card {
    padding: 1rem 0.5rem;
    border-radius: 12px;
    min-height: 120px;
  }
  .home-category-card__icon {
    width: 46px;
    height: 46px;
    margin-bottom: 0.5rem;
  }
  .home-category-card__svg {
    width: 1.3rem;
    height: 1.3rem;
  }
  .home-category-card__name {
    font-size: 0.78rem;
    line-height: 1.25;
  }

  /* ===== ХИТЫ ПРОДАЖ — компактный слайдер ===== */
  .home-products__slider {
    margin: 0 -4px;
  }
  .home-products__item {
    padding: 0 4px;
  }
  .product-card {
    border-radius: 12px;
  }
  .product-card__badges {
    top: 6px;
    left: 6px;
  }
  .product-card__badge {
    padding: 2px 7px;
    font-size: 0.62rem;
    letter-spacing: 0.3px;
    border-radius: 3px;
  }
  .product-card__image-link {
    padding: 0.6rem;
  }
  .product-card__img {
    height: 125px;
  }
  .product-card__body {
    padding: 0.5rem 0.65rem 0.7rem;
  }
  .product-card__article {
    font-size: 0.65rem;
    margin-bottom: 0.25rem;
  }
  .product-card__title-cat {
    font-size: 0.65rem;
  }
  .product-card__title-name {
    font-size: 0.78rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .product-card__availability {
    font-size: 0.68rem;
  }
  .home-products .slick-prev,
  .home-products .slick-next {
    display: none !important;
  }
  /* Дотики для мобильного — общая стилизация всех слайдеров */
  .home-products .slick-dots,
  .home-promo-banners .slick-dots,
  .home-brands .slick-dots {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
    position: static;
  }
  .home-products .slick-dots li,
  .home-promo-banners .slick-dots li,
  .home-brands .slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
  }
  .home-products .slick-dots li button,
  .home-promo-banners .slick-dots li button,
  .home-brands .slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    background: #d0d0d0;
    border: none;
    font-size: 0;
    transition: all 0.25s ease;
  }
  .home-products .slick-dots li button:before,
  .home-promo-banners .slick-dots li button:before,
  .home-brands .slick-dots li button:before {
    display: none;
  }
  .home-products .slick-dots li.slick-active button,
  .home-promo-banners .slick-dots li.slick-active button,
  .home-brands .slick-dots li.slick-active button {
    width: 22px;
    border-radius: 5px;
    background: var(--to-primary, #7B1B16);
  }

  /* ===== ПРОМО-БАННЕРЫ ===== */
  .home-promo-banners {
    padding: 1rem 0.85rem 1.1rem;
    border-radius: 12px;
  }
  .home-promo-banners__item {
    padding: 0 4px;
  }
  .home-promo-banners__item img {
    height: 145px;
    border-radius: 10px;
  }
  .home-promo-banners .slick-prev,
  .home-promo-banners .slick-next {
    display: none !important;
  }

  /* ===== НОВОСТИ ===== */
  .home-news__list {
    border-radius: 12px;
  }
  .home-news__item {
    padding: 0.85rem 1rem;
    gap: 0.45rem;
  }
  .home-news__date {
    font-size: 0.72rem;
    padding: 3px 9px;
    min-width: 0;
    align-self: flex-start;
    border-radius: 6px;
  }
  .home-news__link {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  /* ===== БРЕНДЫ ===== */
  .home-brands {
    padding: 1rem 0.75rem 1.1rem;
    border-radius: 12px;
  }
  .home-brands__item {
    padding: 0 5px;
  }
  .home-brands__logo {
    min-height: 64px;
    padding: 0.55rem;
    border-radius: 10px;
  }
  .home-brands__logo img {
    max-height: 42px;
  }
  .home-brands .slick-prev,
  .home-brands .slick-next {
    display: none !important;
  }

  /* ===== CTA ===== */
  .home-cta__inner {
    flex-direction: column;
    padding: 1.65rem 1.25rem;
    border-radius: 16px;
    gap: 1.25rem;
    text-align: center;
  }
  .home-cta__inner::before {
    width: 280px;
    height: 280px;
  }
  .home-cta__inner::after {
    width: 200px;
    height: 200px;
  }
  .home-cta__badge {
    font-size: 0.62rem;
    padding: 4px 11px;
    letter-spacing: 0.8px;
    margin-bottom: 0.75rem;
  }
  .home-cta__title {
    font-size: 1.3rem;
    margin-bottom: 0.55rem;
    line-height: 1.2;
  }
  .home-cta__text {
    font-size: 0.83rem;
    line-height: 1.5;
    margin: 0 auto 1.15rem;
    max-width: none;
  }
  .home-cta__actions {
    justify-content: center;
  }
  .home-cta__btn {
    padding: 11px 22px;
    font-size: 0.85rem;
  }
  .home-cta__visual {
    flex-direction: row;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
  .home-cta__stat {
    flex: 1;
    min-width: 0;
    padding: 0.7rem 0.5rem;
    border-radius: 11px;
  }
  .home-cta__stat-number {
    font-size: 1.2rem;
  }
  .home-cta__stat-label {
    font-size: 0.62rem;
    line-height: 1.2;
    margin-top: 3px;
  }
}

/* --- Узкий мобильный (≤480) --- */
@media (max-width: 480px) {
  .home-hero__slide-img {
    height: auto;
    object-fit: contain;
  }
  .home-hero__side {
    grid-template-columns: 1fr;
  }
  .home-hero__side-card {
    min-height: 62px;
    padding: 0.8rem 0.9rem;
  }

  /* 2 колонки для преимуществ и категорий (Bootstrap col-md-6 ниже sm = full) */
  .home-advantages .row > [class*="col-"],
  .home-categories .row > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .home-category-card {
    min-height: 110px;
    padding: 0.85rem 0.4rem;
  }
  .home-category-card__icon {
    width: 42px;
    height: 42px;
  }
  .home-category-card__name {
    font-size: 0.74rem;
  }

  .home-news__item {
    padding: 0.75rem 0.9rem;
  }

  .home-cta__title {
    font-size: 1.2rem;
  }
  .home-cta__actions {
    flex-direction: column;
    gap: 8px;
  }
  .home-cta__btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- Глобальная защита от горизонтального скролла на мобильном --- */
@media (max-width: 767.98px) {
  .content {
    padding: 1rem 0.85rem !important;
    overflow-x: hidden;
  }
  .home-hero,
  .home-advantages,
  .home-categories,
  .home-products,
  .home-promo-banners,
  .home-news,
  .home-brands,
  .home-cta {
    max-width: 100%;
  }
  .home-products__slider,
  .home-promo-banners__slider,
  .home-brands__slider {
    overflow: hidden;
  }
}

/* --- Очень мелкие экраны (≤360) --- */
@media (max-width: 360px) {
  .home-section__title {
    font-size: 1rem;
  }
  .home-hero__slide-img {
    height: auto;
    object-fit: contain;
  }
  .home-hero__arrow {
    width: 30px;
    height: 30px;
  }
  .home-adv-card__number {
    font-size: 1.2rem;
  }
  .home-cta__visual {
    flex-direction: column;
    gap: 0.4rem;
  }
}

/* ========================================================================
   КАТАЛОГ — section_vertical.php МОБИЛЬНЫЙ ДИЗАЙН
   Профессиональный мобильный layout: фильтр-drawer, компактный header,
   адаптивная таблица/карточки, корректный sticky bottom bar.
   ======================================================================== */

/* --- Базовая адаптация контейнера каталога (≤767) --- */
@media (max-width: 767.98px) {

  /* Главный wrapper каталога */
  .index_blank .blank_wrapper,
  .row > .smartfilter_wrapper + .w-100,
  .w-100.overflow-auto.order-2.order-md-1 {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
  }

  /* Карточка-контейнер списка каталога */
  .index_blank-table .card,
  .row > .w-100 > .card {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
    margin: 0 0 1rem 0 !important;
    overflow: hidden;
  }
  .index_blank-table .card-header,
  .row > .w-100 > .card > .card-header {
    padding: 0.85rem 1rem !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }
  .index_blank-table .card-header .card-title,
  .row > .w-100 > .card > .card-header .card-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }
  .index_blank-table .card-body,
  .row > .w-100 > .card > .card-body {
    padding: 0.85rem !important;
  }

  /* Excel-кнопка — занимает всю ширину */
  .card-excel-button {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .card-excel-button .btn,
  .card-excel-button button {
    width: 100% !important;
    margin: 0 !important;
    font-size: 0.85rem !important;
    padding: 0.6rem 0.75rem !important;
  }

  /* Поиск в карточке */
  .index_blank-search {
    padding: 0 0.85rem 0.85rem !important;
  }
  .index_blank-search input,
  .index_blank-search .form-control {
    font-size: 0.9rem !important;
    padding: 0.55rem 0.75rem !important;
    border-radius: 8px !important;
  }

  /* ===== Хедер таблицы: сортировка + чекбоксы + пагинация ===== */
  .table_header {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.85rem !important;
    gap: 0.75rem !important;
    border-top: none !important;
    background: #fafafa;
    border-radius: 10px;
    margin-bottom: 0.75rem;
  }
  .total_products-table_header {
    width: 100%;
  }
  .sorting-checkboxes {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem 1rem !important;
  }
  .sorting-checkboxes > div {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }
  .sorting-checkboxes .form-check-label {
    font-size: 0.82rem !important;
    color: #444 !important;
  }
  .blank_detail-search,
  .index_blank-sorting {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .index_blank-sorting .select2,
  .index_blank-sorting .index_blank-sorting-select,
  .index_blank-sorting select {
    min-width: 0 !important;
    width: 100% !important;
  }
  .index_blank-sorting .select2-container {
    width: 100% !important;
  }
  .index_blank-sorting .select2-selection {
    height: 38px !important;
    border-radius: 8px !important;
    line-height: 38px !important;
  }
  .index_blank-sorting .select2-selection__rendered {
    line-height: 38px !important;
    padding-left: 12px !important;
  }
  .index_blank-sorting .select2-selection__arrow {
    height: 38px !important;
  }
  .index_blank-sorting_title {
    font-size: 0.78rem !important;
    color: #777 !important;
    margin: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }
  .index_blank-sorting_pagination {
    align-items: center !important;
    gap: 0.4rem !important;
  }
  .index_blank-sorting_title-pagination .pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 2px;
  }
  .index_blank-sorting_title-pagination .page-item .page-link {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.78rem !important;
    border-radius: 6px !important;
    min-width: 32px;
    text-align: center;
  }

  .total_products {
    font-size: 0.82rem !important;
    color: #666;
    padding: 0 0.25rem 0.25rem !important;
    margin: 0 !important;
    text-align: left !important;
  }
  .total_products .index_blank-total {
    color: var(--to-primary, #7B1B16);
    font-weight: 700;
  }

  /* ===== Sticky bottom bar (Итого + Корзина) ===== */
  .row-under-modifications,
  .row-under-modifications.row-under-modifications-fixed {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1000 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.65rem 0.85rem !important;
    background: #fff !important;
    border-top: 1px solid #eee !important;
    border-bottom: none !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08) !important;
    gap: 0.6rem !important;
    padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  .row-under-modifications .add_to_cart {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    gap: 1px !important;
    margin: 0 !important;
  }
  .row-under-modifications .add_to_cart > div {
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    line-height: 1.2 !important;
  }
  .index_blank-add_cart-number-title,
  .index_blank-add_cart-total-title {
    font-size: 0.7rem !important;
    color: #888 !important;
    font-weight: 400 !important;
  }
  .index_blank-add_cart-number,
  .index_blank-add_cart-total {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
  }
  .index_blank-add_cart-total {
    color: var(--to-primary, #7B1B16) !important;
  }
  .row-under-modifications .btn.add_to_cart,
  .row-under-modifications button.add_to_cart {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    height: 44px !important;
    padding: 0 1rem !important;
    background: linear-gradient(135deg, var(--to-primary, #7B1B16), #a52722) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 10px rgba(123,27,22,0.25) !important;
    margin: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .row-under-modifications .btn.add_to_cart i {
    margin-right: 6px !important;
  }
  .row-under-modifications .btn.add_to_cart[disabled],
  .row-under-modifications .btn.add_to_cart:disabled {
    background: #c5c5c5 !important;
    box-shadow: none !important;
    opacity: 0.7;
  }
  /* Резерв места под фиксированную панель + FAB (только когда панель есть) */
  .content:has(.row-under-modifications) {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .datatable-footer_table_blank {
    margin: 1rem 0.5rem !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
  }
  .datatable-footer_table_blank .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
  }
  .datatable-footer_table_blank .page-link {
    padding: 0.4rem 0.65rem !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
  }

  /* ===== ФИЛЬТР-ДРАВЕР НА МОБИЛЬНОМ ===== */
  /* ВАЖНО про специфичность: десктопные правила фильтра заданы через ID-селектор
     `aside#catalog__filter` (специфичность 1,1,1) с !important и принудительно
     держат position:static, transform:none, background:transparent, box-shadow:none,
     order:-1, width:300px/100%. Классовый селектор `.smartfilter_wrapper`
     (специфичность 0,2,0) их НЕ перебивал → drawer не выезжал и был прозрачным:
     при клике на FAB появлялся только затемняющий overlay, а самой шторки не было.
     Поэтому drawer обязан использовать ID-селектор (1,2,1) и явно вернуть ВСЕ
     перебитые свойства (position/transform/float/order/background/box-shadow). */
  aside#catalog__filter.smartfilter_wrapper.sidebar-component,
  aside#catalog__filter.sidebar.sidebar-component {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    float: none !important;
    order: 0 !important;
    width: 88% !important;
    min-width: 0 !important;
    max-width: 360px !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 9999 !important;
    background: #fff !important;
    background-color: #fff !important;
    box-shadow: -8px 0 32px rgba(0,0,0,0.20) !important;
    transform: translateX(102%) !important;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    border: none !important;
    border-radius: 16px 0 0 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  body.mobile-filter-open aside#catalog__filter.smartfilter_wrapper.sidebar-component,
  body.mobile-filter-open aside#catalog__filter.sidebar.sidebar-component {
    transform: translateX(0) !important;
  }
  .smartfilter_wrapper .sidebar-content {
    padding: 0 !important;
    background: transparent !important;
  }
  .smartfilter_wrapper .bx_filter {
    padding: 0 1rem 1rem !important;
  }

  /* Шапка drawer'а (вставляется JS) */
  .mobile-filter-drawer-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.5rem;
  }
  .mobile-filter-drawer-header__title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .mobile-filter-drawer-header__title svg {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
    flex: 0 0 16px;
    color: var(--to-primary, #7B1B16);
  }
  .mobile-filter-drawer-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: #f5f5f5;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
  }
  .mobile-filter-drawer-close:hover,
  .mobile-filter-drawer-close:active {
    background: #e8e8e8;
  }
  .mobile-filter-drawer-close svg {
    width: 18px;
    height: 18px;
  }

  /* Overlay */
  .mobile-filter-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  body.mobile-filter-open .mobile-filter-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  body.mobile-filter-open {
    overflow: hidden !important;
  }

  /* FAB (плавающая кнопка фильтра) */
  .mobile-filter-fab {
    position: fixed !important;
    bottom: 84px !important;
    right: 14px !important;
    z-index: 999 !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--to-primary, #7B1B16), #a52722) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(123,27,22,0.40), 0 2px 6px rgba(0,0,0,0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.18s ease, box-shadow 0.2s ease !important;
    padding: 0 !important;
  }
  .mobile-filter-fab:hover { box-shadow: 0 6px 22px rgba(123,27,22,0.50); }
  .mobile-filter-fab:active { transform: scale(0.92); }
  .mobile-filter-fab svg {
    width: 22px !important;
    height: 22px !important;
  }
  .mobile-filter-fab__count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #fff;
    color: var(--to-primary, #7B1B16);
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  }

  /* ===== "Ничего не показано" ===== */
  .nothing_to_show {
    padding: 2.5rem 1rem !important;
    text-align: center;
    font-size: 0.9rem;
  }

  /* ===== Модалка "Товар добавлен" — мобильная адаптация ===== */
  #modal_add_to_bascket .modal-dialog {
    margin: 0.75rem !important;
  }
  #modal_add_to_bascket .modal-content {
    border-radius: 14px !important;
  }
}

/* ===== Мобильный фильтр-drawer: скрываем инжектируемые JS-элементы на ПК =====
   header / FAB / overlay вставляются скриптом на любом разрешении, но стилизуются
   только в @media (max-width: 767.98px). На десктопе они показывались
   нестилизованными (огромный svg, голая кнопка) — поэтому жёстко прячем. */
@media (min-width: 768px) {
  .mobile-filter-drawer-header,
  .mobile-filter-overlay,
  .mobile-filter-fab {
    display: none !important;
  }
}

/* --- Узкие экраны (≤480) --- */
@media (max-width: 480px) {
  .row-under-modifications .btn.add_to_cart,
  .row-under-modifications button.add_to_cart {
    padding: 0 0.85rem !important;
    font-size: 0.78rem !important;
  }
  .row-under-modifications .btn.add_to_cart i {
    margin-right: 4px !important;
    font-size: 1rem;
  }
  .index_blank-add_cart-number-title,
  .index_blank-add_cart-total-title {
    font-size: 0.65rem !important;
  }
  .index_blank-add_cart-number,
  .index_blank-add_cart-total {
    font-size: 0.85rem !important;
  }
}

/* --- Очень узкие (≤360) --- */
@media (max-width: 360px) {
  .mobile-filter-fab {
    width: 48px !important;
    height: 48px !important;
    bottom: 80px !important;
  }
  .row-under-modifications .add_to_cart > div span:first-child {
    display: none !important;
  }
}

/* ========================================================================
   МОБИЛЬНАЯ ШАПКА (navbar) — современный header: логотип слева, один бургер
   справа, drawer на всю высоту выезжает справа с тёмным backdrop.
   ======================================================================== */

/* Шапка drawer'а вставляется JS-ом всегда (см. techopt-override.js,
   initMobileNavDrawer). На десктопе её быть не должно — скрываем по умолчанию,
   мобильный media query ниже возвращает display: flex. */
.mobile-nav-drawer-header {
  display: none !important;
}

@media (max-width: 767.98px) {
  /* === fixed-top navbar === */
  body .navbar.navbar-expand-md.navbar-dark.fixed-top,
  body .navbar.navbar-expand-md.fixed-top,
  body .navbar.navbar-light.fixed-top {
    padding: 0 1rem !important;
    min-height: 60px !important;
    height: 60px !important;
    background: #fff !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 2px 8px rgba(15,23,42,0.06) !important;
    border-bottom: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    z-index: 1030 !important;
  }

  /* === Логотип слева === */
  body .navbar .navbar-brand,
  body .navbar .amx-navbar-brand {
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    order: 1 !important;
  }
  body .navbar .navbar-brand > a,
  body .navbar .amx-navbar-brand > a {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
  }
  body .navbar .header_logo {
    max-height: 38px !important;
    max-width: 180px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* Десктоповый sidebar-control скрываем */
  body .navbar .navbar__sidebar-toggle-control {
    display: none !important;
  }

  /* === Контейнер кнопок (только бургер справа) === */
  body .navbar .navbar-mobile-toggles,
  body .navbar > .d-md-none {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    gap: 0 !important;
    order: 2 !important;
  }

  /* Скрытый помощник: sidebar-mobile-main-toggle оставляем в DOM для
     совместимости с Limitless app.js, но не показываем */
  body .navbar .navbar-burger--hidden {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
  }

  /* === Кнопка-бургер === */
  body .navbar .navbar-toggler.navbar-burger {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 12px !important;
    color: #1f2937 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.18s ease, transform 0.1s ease !important;
    outline: none !important;
    box-shadow: none !important;
    position: relative !important;
  }
  body .navbar .navbar-toggler.navbar-burger:hover,
  body .navbar .navbar-toggler.navbar-burger:focus {
    background: #f3f4f6 !important;
  }
  body .navbar .navbar-toggler.navbar-burger:active {
    transform: scale(0.94) !important;
  }

  /* Анимированные 3 полоски */
  .navbar-burger__bars {
    position: relative !important;
    width: 22px !important;
    height: 16px !important;
    display: inline-block !important;
  }
  .navbar-burger__bars span {
    position: absolute !important;
    left: 0 !important;
    height: 2px !important;
    width: 100% !important;
    background: currentColor !important;
    border-radius: 2px !important;
    transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease !important;
  }
  .navbar-burger__bars span:nth-child(1) { top: 1px !important; }
  .navbar-burger__bars span:nth-child(2) { top: 7px !important; }
  .navbar-burger__bars span:nth-child(3) { top: 13px !important; }

  /* Открытое состояние — бургер превращается в крестик */
  body .navbar .navbar-toggler.navbar-burger[aria-expanded="true"] .navbar-burger__bars span:nth-child(1) {
    top: 7px !important;
    transform: rotate(45deg) !important;
  }
  body .navbar .navbar-toggler.navbar-burger[aria-expanded="true"] .navbar-burger__bars span:nth-child(2) {
    opacity: 0 !important;
  }
  body .navbar .navbar-toggler.navbar-burger[aria-expanded="true"] .navbar-burger__bars span:nth-child(3) {
    top: 7px !important;
    transform: rotate(-45deg) !important;
  }

  /* === Backdrop === */
  .mobile-nav-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15,23,42,0.45) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s !important;
    z-index: 1029 !important;
    pointer-events: none !important;
  }
  body.mobile-nav-open .mobile-nav-backdrop,
  body.sidebar-mobile-main .mobile-nav-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.25s ease !important;
    pointer-events: auto !important;
  }
  body.mobile-nav-open,
  body.sidebar-mobile-main {
    overflow: hidden !important;
  }

  /* === Drawer: navbar-collapse выезжает справа === */
  body .navbar .navbar-collapse,
  body .navbar .amx-navbar {
    position: fixed !important;
    top: 60px !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: min(86vw, 360px) !important;
    max-width: 100vw !important;
    height: calc(100vh - 60px) !important;
    max-height: none !important;
    background: #fff !important;
    box-shadow: -8px 0 24px rgba(15,23,42,0.12) !important;
    padding: 0.75rem 1rem 1rem !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid #f1f5f9 !important;
    border-left: 1px solid #f1f5f9 !important;
    transform: translateX(100%) !important;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.32, 1) !important;
    z-index: 1031 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    /* ВАЖНО: контент прижат к верху drawer-а, а не к низу/центру.
       Без этого Bootstrap-родитель/.navbar-collapse {align-items:center}
       и пустые flex-«растяжки» могут сдвинуть содержимое в середину/низ. */
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    gap: 0 !important;
  }

  /* Защитный сброс: все прямые потомки drawer-а не должны добавлять
     вертикальные отступы от старых правил bootstrap_limitless. Конкретные
     секции (header-elements, col-md-7, comparison, navbar-regions,
     mobile-nav-drawer-header) ниже задают свои padding/border/order. */
  body .navbar .navbar-collapse > * {
    flex-shrink: 0 !important;
    min-height: 0 !important;
  }
  body .navbar .navbar-collapse > .header-elements,
  body .navbar .navbar-collapse > .col-md-7,
  body .navbar .navbar-collapse > .col-sm-1,
  body .navbar .navbar-collapse > .col-1,
  body .navbar .navbar-collapse > .comparison,
  body .navbar .navbar-collapse > .navbar-regions,
  body .navbar .navbar-collapse > .auth-company-change {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Скрываем bxdynamic-маркеры, скрипты, стили и старый cart_header/multibasket,
     которые Bitrix может вставить между секциями (раньше в drawer'е жил
     многокорзинный компонент — теперь он должен быть только в нижней
     panel-mobile, но кэш/legacy-шаблоны могут его всё ещё выводить). */
  body .navbar .navbar-collapse > span[id*="bxdynamic"],
  body .navbar .navbar-collapse > span[id*="_start"],
  body .navbar .navbar-collapse > span[id*="_end"],
  body .navbar .navbar-collapse > script,
  body .navbar .navbar-collapse > style,
  body .navbar .navbar-collapse .cart_header,
  body .navbar .navbar-collapse .multibasket,
  body .navbar .navbar-collapse [id*="multibasket_components"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Перебиваем .navbar-expand-md.navbar-light .navbar-collapse {border-top:1px solid #ddd} */
  body .navbar.navbar-light .navbar-collapse,
  body .navbar.navbar-expand-md .navbar-collapse {
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: none !important;
  }
  body .navbar .navbar-collapse.show,
  body .navbar .amx-navbar.show,
  body .navbar .navbar-collapse.collapsing {
    transform: translateX(0) !important;
    display: flex !important;
  }

  /* Шапка drawer'а с заголовком и кнопкой закрытия */
  .mobile-nav-drawer-header {
    order: -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: -0.75rem -1rem 0.5rem !important;
    padding: 0.625rem 1rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #fff !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
  }
  .mobile-nav-drawer-header__title {
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    letter-spacing: -0.01em !important;
  }
  .mobile-nav-drawer-close {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 -8px 0 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 10px !important;
    color: #1f2937 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .mobile-nav-drawer-close:hover,
  .mobile-nav-drawer-close:focus {
    background: #f3f4f6 !important;
    outline: none !important;
  }
  .mobile-nav-drawer-close:active {
    background: #e5e7eb !important;
  }
  .mobile-nav-drawer-close svg {
    display: block !important;
  }

  /* Поиск — крупный, на всю ширину, в самом верху drawer'а.
     Враппер #title-search и форма — БЕЗ собственных границ/фонов (иначе
     получаются "лишние обводки" вокруг инпута). Граница только на input. */
  body .navbar .navbar-collapse .header-elements:has(#title-search) {
    order: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.25rem 0 0.5rem 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }
  body .navbar .navbar-collapse #title-search {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: normal !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
  body .navbar .navbar-collapse #title-search form,
  body .navbar .navbar-collapse #title-search #b2b-catalog-search,
  body .navbar .navbar-collapse #title-search .form-group,
  body .navbar .navbar-collapse #title-search .form-group-feedback {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    position: relative !important;
  }
  body .navbar .navbar-collapse #title-search-input {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 44px !important;
    line-height: 1.2 !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
    padding: 0 44px 0 14px !important;
    font-size: 0.95rem !important;
    color: #1f2937 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  body .navbar .navbar-collapse #title-search-input::placeholder {
    color: #9ca3af !important;
  }
  body .navbar .navbar-collapse #title-search-input:focus {
    background: #fff !important;
    border-color: #cbd5e1 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06) !important;
  }
  /* Иконка-лупа справа */
  body .navbar .navbar-collapse #title-search .form-control-feedback {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    color: #6b7280 !important;
  }
  body .navbar .navbar-collapse #title-search .form-control-feedback a,
  body .navbar .navbar-collapse #title-search .b2b-catalog-search__submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    color: #6b7280 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
  }
  body .navbar .navbar-collapse #title-search .form-control-feedback a:hover {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
  }
  body .navbar .navbar-collapse #title-search .form-control-feedback i {
    font-size: 16px !important;
    line-height: 1 !important;
    color: inherit !important;
  }

  /* Top menu — крупные кликабельные ссылки */
  body .navbar .navbar-collapse .col-md-7,
  body .navbar .navbar-collapse .col-sm-1,
  body .navbar .navbar-collapse .col-1 {
    order: 3 !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body .navbar .navbar-collapse .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Перебиваем bootstrap_limitless: .nav-item:first-child {margin-top:.625rem},
     .nav-item+.nav-item {margin-top:.625rem}, .nav-item:last-child {margin-bottom:.625rem} */
  body .navbar .navbar-collapse .navbar-nav .nav-item,
  body .navbar .navbar-collapse .navbar-nav .nav-item:first-child,
  body .navbar .navbar-collapse .navbar-nav .nav-item:last-child,
  body .navbar .navbar-collapse .navbar-nav .nav-item:not(.show):last-child,
  body .navbar .navbar-collapse .navbar-nav .nav-item + .nav-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Перебиваем bootstrap_limitless: .navbar-expand-md .navbar-collapse .navbar-nav-link
     {margin-left:-1.25rem; margin-right:-1.25rem; padding:.75rem 1.25rem}.
     Эти отрицательные margin'ы выбивают пункт за пределы drawer'а и совместно с
     padding 12px формируют "огромные" блоки. */
  body .navbar .navbar-collapse .navbar-nav .navbar-nav-link {
    width: 100% !important;
    margin: 0 !important;
    padding: 0.5rem 0.625rem !important;
    border-radius: 8px !important;
    font-size: 0.9375rem !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
    transition: background 0.15s ease !important;
    position: relative !important;
  }
  body .navbar .navbar-collapse .navbar-nav .navbar-nav-link:hover,
  body .navbar .navbar-collapse .navbar-nav .navbar-nav-link.active {
    background: #f3f4f6 !important;
    color: #111827 !important;
  }
  body .navbar .navbar-collapse .navbar-nav .navbar-nav-link::before,
  body .navbar .navbar-collapse .navbar-nav .navbar-nav-link::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }
  /* Dropdown-menu внутри nav-item — bootstrap_limitless даёт margin-top/bottom
     по 1.25rem; на мобильном эти выпадайки всё равно position:absolute и не
     должны влиять на поток, но margin схлопывается с родителем — обнуляем. */
  body .navbar .navbar-collapse .navbar-nav > .nav-item > .dropdown-menu {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /* Скрываем выпадайки в мобильном drawer'е — на тачскрине они всё равно
     неиспользуемы (data-toggle="dropdown" вешает hover-логику) и могут
     визуально "вылетать" поверх соседних пунктов. */
  body .navbar .navbar-collapse .navbar-nav .dropdown-menu {
    display: none !important;
  }

  /* Сравнение — отдельной строкой с pill-бейджем счётчика */
  body .navbar .navbar-collapse .comparison {
    order: 4 !important;
    margin: 0.25rem 0 0 !important;
    padding: 0.375rem 0 0 !important;
    border-top: 1px solid #f1f5f9 !important;
    width: 100% !important;
  }
  body .navbar .navbar-collapse .comparison a {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    width: 100% !important;
    padding: 0.625rem 0.5rem !important;
    border-radius: 8px !important;
    color: #1f2937 !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
  }
  body .navbar .navbar-collapse .comparison a:hover {
    background: #f3f4f6 !important;
  }
  body .navbar .navbar-collapse .comparison a svg {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    color: #1f2937 !important;
    fill: currentColor !important;
  }
  body .navbar .navbar-collapse .comparison a::after {
    content: 'Сравнение' !important;
    order: 2 !important;
    flex: 1 1 auto !important;
    color: inherit !important;
  }
  /* Бейдж-счётчик: компактный круглый pill.
     Перебиваем базовое правило theme/layout/1/style.css:15 — там бейдж
     position:absolute с top:-10px (для десктопа, где он висит "уведомлением"
     поверх иконки). В drawer'е нужен обычный inline-flex элемент в строке. */
  body .navbar .navbar-collapse .comparison a .comparison-quantity__value {
    order: 3 !important;
    flex: 0 0 auto !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 7px !important;
    border-radius: 11px !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: middle !important;
  }
  body .navbar .navbar-collapse .comparison a .comparison-quantity__value > span,
  body .navbar .navbar-collapse .comparison a .comparison-quantity__value [data-entity="current_quantity"] {
    display: inline-block !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    background: transparent !important;
  }

  /* Регионы (если включено) */
  body .navbar .navbar-collapse .navbar-regions {
    order: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Если блок регионов пустой — полностью схлопываем, чтобы не было пустого зазора */
  body .navbar .navbar-collapse .navbar-regions:empty {
    display: none !important;
  }

  /* Личный кабинет (вход/выход) — сразу после поиска, наверху drawer'а */
  body .navbar .navbar-collapse > .header-elements:last-child {
    order: 2 !important;
    margin: 0 !important;
    padding: 0.5rem 0 !important;
    width: 100% !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }
  body .navbar .navbar-collapse .header-elements > .d-flex {
    flex-direction: column !important;
    gap: 0.375rem !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  body .navbar .navbar-collapse .header_logout {
    width: 100% !important;
    margin: 0 !important;
  }
  body .navbar .navbar-collapse .header_logout a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: #1f2937 !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
  }

  /* Свитчер компаний внутри drawer — на всю ширину, согласован по высоте
     с кнопкой "Выйти" (40px), без жёстких max-width из своего style.css */
  body .navbar .navbar-collapse .auth-company-change {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
  }
  body .navbar .navbar-collapse .auth-company-change__current {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    height: 40px !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    font-size: 0.9375rem !important;
  }
  body .navbar .navbar-collapse .auth-company-change__link {
    flex: 1 1 auto !important;
    height: 100% !important;
    padding: 0 12px !important;
    justify-content: flex-start !important;
    font-size: 0.9375rem !important;
  }
  body .navbar .navbar-collapse .auth-company-change__name {
    max-width: none !important;
    flex: 1 1 auto !important;
    font-size: 0.9375rem !important;
  }
  body .navbar .navbar-collapse .header_logout a:hover,
  body .navbar .navbar-collapse .header_logout a:focus {
    background: #111827 !important;
    color: #fff !important;
  }
  body .navbar .navbar-collapse .header_logout a > span {
    color: #fff !important;
  }

  /* === ЛЕВЫЙ САЙДБАР НА МОБИЛЬНОМ — drawer, выезжающий слева ===
     По умолчанию скрыт за левым краем (translateX(-100%)).
     При body.sidebar-mobile-main — выезжает (translateX(0)). */
  body .sidebar.sidebar-main {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(85vw, 320px) !important;
    height: calc(100vh - 60px) !important;
    max-height: none !important;
    background: #fff !important;
    box-shadow: 8px 0 24px rgba(15, 23, 42, 0.12) !important;
    border-right: 1px solid #f1f5f9 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.32, 1) !important;
    z-index: 1031 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.sidebar-mobile-main .sidebar.sidebar-main {
    transform: translateX(0) !important;
  }
  /* Содержимое сайдбара — нормальная ширина в drawer'е */
  body .sidebar.sidebar-main .sidebar-content {
    width: 100% !important;
    padding: 0.5rem 0 !important;
    background: transparent !important;
  }
  /* ИСПРАВЛЕНИЕ: component-style.css:135-138 на ≤1023px ставит
     .card.menu-desctop { display:none }, поэтому весь каталог в
     drawer'е был скрыт (drawer выезжал пустой / "белый экран").
     В мобильном sidebar-main принудительно возвращаем видимость. */
  body .sidebar.sidebar-main .sidebar-content .card.menu-desctop,
  body .sidebar.sidebar-main .sidebar-content .card.card-sidebar-mobile,
  body .sidebar.sidebar-main .sidebar-content .card.menu-desctop.card-sidebar-mobile {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  /* Список пунктов в drawer'е — нормальная вертикальная вёрстка
     (на десктопе nav-sidebar может быть display:flex от Limitless) */
  body .sidebar.sidebar-main .sidebar-content .nav-sidebar {
    display: block !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  body .sidebar.sidebar-main .sidebar-content .nav-sidebar > .nav-item {
    display: block !important;
    width: 100% !important;
    position: static !important;
  }
  /* Подменю 2-3 уровня (.menu-desctop-submenu) в drawer'е — не popup,
     а обычный вложенный блок: визуальный отступ слева, белый фон. */
  body .sidebar.sidebar-main .menu-desctop .menu-desctop-submenu,
  body .sidebar.sidebar-main .menu-desctop .nav-item-submenu-menu2 {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    left: auto !important;
    top: auto !important;
    background: transparent !important;
    padding: 0 !important;
    z-index: auto !important;
  }
  body .sidebar.sidebar-main .menu-desctop .menu-desctop-submenu__row {
    width: 100% !important;
    max-width: none !important;
    background: transparent !important;
    padding: 0 !important;
  }
  body .sidebar.sidebar-main .menu-desctop .nav-group-sub {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding-left: 14px !important;
  }
  body .sidebar.sidebar-main .menu-desctop-submenu__title {
    display: block !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    color: #1f2937 !important;
    font-weight: 500 !important;
  }
  body .sidebar.sidebar-main .menu-desctop .nav-item-submenu-menu2 .nav-group-sub .menu-desctop-submenu__title {
    padding: 8px 14px 8px 28px !important;
    font-size: 0.85rem !important;
    color: #475569 !important;
    font-weight: 400 !important;
  }
  /* Пункты меню — крупнее, удобные для тапа */
  body .sidebar.sidebar-main .nav-sidebar .nav-link {
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    width: 100% !important;
    max-width: none !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  body .sidebar.sidebar-main .sidebar-svg-icon {
    margin-right: 12px !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
  }
  /* Текст пунктов — виден на мобильном (на десктопе .sidebar-xs скрывает) */
  body .sidebar.sidebar-main .nav-link span,
  body .sidebar.sidebar-main .nav-link > span {
    display: inline !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
    overflow: visible !important;
  }

  /* === Drawer всегда полноширинный — гасим десктопную «свёрнуто/раскрыто» логику ===
     Десктопные правила .sidebar-xs .sidebar-main .nav-link {width:56px}
     (свёрнутый сайдбар) имеют высокую специфичность и при снятии класса
     .sidebar-expanded (например тапом по категории) схлопывали пункты меню.
     Принудительно фиксируем ширину drawer'а и пунктов независимо от
     .sidebar-expanded / sidebar-xs. */
  body.sidebar-mobile-main .sidebar.sidebar-main,
  body.sidebar-mobile-main .sidebar.sidebar-main.sidebar-expanded {
    width: min(85vw, 320px) !important;
  }
  body.sidebar-mobile-main .sidebar.sidebar-main .nav-sidebar .nav-link,
  body.sidebar-mobile-main .sidebar.sidebar-main .nav-link.myitem,
  body.sidebar-mobile-main .sidebar.sidebar-main.sidebar-expanded .nav-sidebar .nav-link,
  body.sidebar-mobile-main .sidebar.sidebar-main.sidebar-expanded .nav-link.myitem {
    width: 100% !important;
    max-width: none !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 12px 16px !important;
  }
  body.sidebar-mobile-main .sidebar.sidebar-main .sidebar-svg-icon {
    margin-right: 12px !important;
  }

  /* Кнопка закрытия "×" в левом сайдбаре (вставляется JS-ом) */
  .mobile-sidebar-close {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    margin: 0 0 0.25rem auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    background: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    color: #1f2937 !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .mobile-sidebar-close:hover,
  .mobile-sidebar-close:focus {
    background: #f3f4f6 !important;
    outline: none !important;
  }
  .mobile-sidebar-close:active {
    background: #e5e7eb !important;
  }
  .mobile-sidebar-close svg {
    display: block !important;
  }

  /* === Резерв места под fixed navbar === */
  .page-content {
    padding-top: 64px !important;
  }

  /* === Под page-header — компактнее === */
  .page-header.page-header-light {
    padding: 0.75rem 1rem !important;
  }
  .page-header .page-title h4,
  .page-header .page-title {
    font-size: 1rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }
  .page-header .page-title h4 i {
    font-size: 1rem !important;
  }
  .page-header .breadcrumb-line {
    padding: 0.4rem 0 !important;
  }
  .page-header .breadcrumb {
    font-size: 0.78rem !important;
    flex-wrap: wrap !important;
  }
}

/* ========================================================================
   УСИЛЕНИЕ СПЕЦИФИЧНОСТИ — гарантированно бьём конкурирующие правила
   Дублируем критичные мобильные правила с body-префиксом
   ======================================================================== */
@media (max-width: 767.98px) {
  /* Уверенно ставим home-* секции на всю ширину контейнера */
  body .home-hero,
  body .home-advantages,
  body .home-categories,
  body .home-products,
  body .home-promo-banners,
  body .home-news,
  body .home-brands,
  body .home-cta {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Карточки advantages/categories — компактные 2 колонки */
  body .home-advantages > .row,
  body .home-categories > .row {
    margin-left: -6px !important;
    margin-right: -6px !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }
  body .home-advantages > .row > [class*="col-"],
  body .home-categories > .row > [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-bottom: 12px !important;
  }

  /* Hero — слайдер на всю ширину, side-cards под ним */
  body .home-hero > .row {
    display: block !important;
    margin: 0 !important;
  }
  body .home-hero > .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
  }
}

/* ========================================================================
   СЛАЙДЕР БРЕНДОВ ("НАШИ БРЕНДЫ") НА МОБИЛЬНОМ
   Перебивает старый amxstyle.css: блок выше, картинки крупнее.
   Цели: .slick-list внутри .amx-slider-brand — 220px высоты,
         картинки занимают 92% ширины слайда и до 200px высоты,
         object-fit: contain — без искажений.
   ======================================================================== */
@media (max-width: 767.98px) {
  body .amx-brand-container {
    margin-top: 6vh !important;
    margin-bottom: 1.5rem !important;
  }
  body .amx-brand-container p {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin: 0 0 14px !important;
    text-align: center !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
  }

  /* Контейнер слайдера */
  body .amx-slider-brand,
  body .amx-slider-brand.slider.single-item {
    height: auto !important;
    min-height: 240px !important;
    width: 100% !important;
    padding: 0 !important;
    position: relative !important;
  }

  /* Сам видимый "viewport" — slick-list (генерируется slick.js) */
  body .amx-slider-brand .slick-list,
  body .amx-slider-brand .slick-list.draggable {
    height: 220px !important;
    min-height: 220px !important;
    margin: 0 36px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  body .amx-slider-brand .slick-track {
    height: 220px !important;
  }

  /* Каждый слайд — на всю высоту slick-list */
  body .amx-slider-brand .amx-slickSlide,
  body .amx-slider-brand .slickSlide,
  body .amx-slider-brand .slick-slide {
    margin-top: 0 !important;
    height: 220px !important;
    padding: 0 6px !important;
  }
  /* Ссылка-обёртка центрирует картинку */
  body .amx-slider-brand .amx-slickSlide > a,
  body .amx-slider-brand .slickSlide > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
  }

  /* САМА КАРТИНКА — крупнее */
  body .amx-slider-brand .amx-slickSlide img,
  body .amx-slider-brand .slickSlide img {
    width: auto !important;
    max-width: 92% !important;
    height: auto !important;
    max-height: 200px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* Стрелки — по центру вертикально, не уезжают в "74%" */
  body .amx-slider-brand .slick-prev,
  body .amx-slider-brand .slick-next {
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 2 !important;
    width: 32px !important;
    height: 32px !important;
  }
  body .amx-slider-brand .slick-prev { left: 0 !important; }
  body .amx-slider-brand .slick-next { right: 0 !important; }

  /* Точки — под слайдером, без отрицательного смещения */
  body .amx-slider-brand .slick-dots {
    position: relative !important;
    bottom: auto !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }
}

/* ========================================================================
   SLICK — гасим 404 на ajax-loader.gif
   slick-theme.css ссылается на ./ajax-loader.gif, файл отсутствует в
   assets/css/slick/. Чтобы не плодить 404 в консоли — отключаем фон.
   ======================================================================== */
.slick-loading .slick-list {
  background-image: none !important;
}

/* Кнопка × в левом сайдбаре — невидима на десктопе */
.mobile-sidebar-close {
  display: none;
}

/* ========================================================================
   ПАНЕЛЬ-МОБАЙЛ — нижняя fixed-навигация (только ≤767.98px)
   5 вкладок: Главная / Каталог / Корзина / Заказы / Меню
   Поддержка safe-area-inset-bottom для iOS-устройств с челкой.
   ======================================================================== */
.panel-mobile {
  display: none;
}

@media (max-width: 767.98px) {
  .panel-mobile {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1028 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-around !important;
    width: 100% !important;
    height: 60px !important;
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: #fff !important;
    border-top: 1px solid #e5e7eb !important;
    box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06) !important;
    font-family: inherit !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .panel-mobile__item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 6px 4px !important;
    text-decoration: none !important;
    color: #6b7280 !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: none !important;
    transition: color 0.15s ease, background 0.15s ease !important;
    position: relative !important;
  }
  .panel-mobile__item:hover,
  .panel-mobile__item:focus {
    color: #1f2937 !important;
    text-decoration: none !important;
    outline: none !important;
  }
  .panel-mobile__item:active {
    background: rgba(15, 23, 42, 0.04) !important;
  }

  .panel-mobile__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    color: inherit !important;
  }
  .panel-mobile__icon svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    color: inherit !important;
  }

  .panel-mobile__label {
    display: block !important;
    font-size: 10.5px !important;
    letter-spacing: 0.01em !important;
    color: inherit !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Активная вкладка */
  .panel-mobile__item--active {
    color: #1f2937 !important;
    font-weight: 600 !important;
  }
  .panel-mobile__item--active::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 28px !important;
    height: 3px !important;
    background: #1f2937 !important;
    border-radius: 0 0 3px 3px !important;
  }

  /* Бейдж счётчика (опционально, добавляется JS-ом) */
  .panel-mobile__badge {
    position: absolute !important;
    top: 4px !important;
    right: calc(50% - 18px) !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    background: #dc2626 !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    text-align: center !important;
    box-shadow: 0 0 0 2px #fff !important;
  }

  /* Резервируем место внизу — контент не прячется под панелью.
     :has() ограничивает правило страницами, где panel-mobile реально
     отрендерилась (на auth_footer.php панель отсутствует — лишнего отступа нет). */
  body:has(> .panel-mobile) {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body:has(> .panel-mobile) .page-content {
    padding-bottom: 12px !important;
  }

  /* FAB фильтра сидит над панелью */
  .mobile-filter-fab {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Если открыт любой drawer — нижняя панель прячется */
  body.mobile-nav-open .panel-mobile,
  body.sidebar-mobile-main .panel-mobile {
    transform: translateY(100%) !important;
    transition: transform 0.25s ease !important;
    pointer-events: none !important;
  }
  .panel-mobile {
    transition: transform 0.25s ease !important;
  }
}

@media (max-width: 360px) {
  .panel-mobile__label {
    font-size: 9.5px !important;
  }
  .mobile-filter-fab {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================
   BX.SidePanel — фирменный стиль обёртки и крестика
   ============================================================
   Карточка товара (b2b_new и item_plitka) кликом открывает detail-страницу
   в BX.SidePanel. Сам chrome (label-планка слева + кнопка ×) живёт в
   родительском окне, поэтому стилизуется здесь, а не внутри iframe.
   bgColor лейбла теперь #7B1B16 через JS-опцию label.bgColor — но это inline,
   так что добавляем мягкие визуальные доработки без переопределения цвета.
   ============================================================ */

/* Label-планка слева: чуть мягче, скруглённый угол наружу.
   Bitrix задаёт background-color inline (из JS-опции label.bgColor=#7B1B16),
   мы не трогаем background, только геометрию и тень. */
.side-panel-labels .side-panel-label,
.side-panel-labels-container .side-panel-label {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  box-shadow: 2px 0 8px rgba(123, 27, 22, 0.15) !important;
  transition: opacity 0.2s ease, box-shadow 0.2s ease !important;
  cursor: pointer !important;
}

.side-panel-labels .side-panel-label:hover,
.side-panel-labels-container .side-panel-label:hover {
  opacity: 1 !important;
  box-shadow: 2px 0 12px rgba(123, 27, 22, 0.25) !important;
}

/* Иконка-крестик закрытия SidePanel.
   В разных версиях Bitrix крестик имеет один из этих классов / лежит внутри
   .side-panel-labels — поэтому перечисляем все варианты. */
.side-panel-content-close,
.side-panel-close,
.side-panel-labels .side-panel-label-close,
.side-panel-labels-container .side-panel-label-close {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #ececef !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 100 !important;
}

.side-panel-content-close:hover,
.side-panel-close:hover,
.side-panel-labels .side-panel-label-close:hover,
.side-panel-labels-container .side-panel-label-close:hover {
  background-color: #7B1B16 !important;
  border-color: #7B1B16 !important;
  transform: rotate(90deg) !important;
  box-shadow: 0 4px 14px rgba(123, 27, 22, 0.30) !important;
}

/* Внутренний SVG/icon крестика — burgundy в обычном состоянии, белый при hover.
   Класс .side-panel-content-close-inner иногда содержит ::before/::after с символом
   × — окрашиваем обе ветки. */
.side-panel-content-close .side-panel-content-close-inner,
.side-panel-content-close::before,
.side-panel-content-close::after,
.side-panel-close::before,
.side-panel-close::after {
  color: #7B1B16 !important;
  fill: #7B1B16 !important;
  transition: color 0.15s ease, fill 0.15s ease !important;
}

.side-panel-content-close:hover .side-panel-content-close-inner,
.side-panel-content-close:hover::before,
.side-panel-content-close:hover::after,
.side-panel-close:hover::before,
.side-panel-close:hover::after {
  color: #fff !important;
  fill: #fff !important;
}

/* Сама обёртка SidePanel — скруглённый угол + аккуратная тень слева */
.side-panel-wrap,
.side-panel .side-panel-wrap {
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden !important;
}

/* Затемнение фона за панелью — чуть мягче и теплее */
.side-panel-overlay {
  background-color: rgba(20, 10, 10, 0.45) !important;
}

/* ============================================================================
 * СТРАНИЦА КОРЗИНЫ /orders/make/ — современный редизайн под техникаоптом.рф
 *
 * Перебивает:
 *   – assets/css/basket-upselling/{1,2}.css (общая разметка страницы)
 *   – local/templates/.default/components/bitrix/sale.basket.basket/b2bcabinet_new/style.css
 *   – local/components/sotbit/basket.upselling/templates/b2bcabinet/style.css
 *
 * Цели:
 *   – Светлый фон страницы, белые карточки контента вместо плотных рамок;
 *   – Бордюр-радиус 12 px и мягкие тени, как на главной (home-adv-card);
 *   – Шрифт Inter, цвета через --to-primary;
 *   – Прозрачный плавающий footer-бар вместо серого «жёлтенького» 4 px-блока;
 *   – Кнопка-чип «Действия» + дроп-ап в виде белой карточки;
 *   – Количество +/-: светлая капсула с бордовой обводкой вместо #3e495f;
 *   – Поиск в шапке корзины — pill-стиль из навбара (#f5f5f6);
 *   – Hover-подсветка строк, бордовый акцент сумм.
 * ============================================================================ */

/* ----- Контейнер страницы ----- */
.basket-page {
  /* Старая высота: calc(105vh - 310px) превращала страницу в скролл-окно
   * с плотно прижатым серым footer'ом. Делаем естественный высоты flex-стек —
   * footer прилипнет внизу через sticky. */
  height: auto !important;
  min-height: calc(100vh - var(--to-header-height) - 80px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 0 4px !important;
}

.basket-page-admin-panel,
.basket-page-admin {
  height: auto !important;
  min-height: calc(100vh - var(--to-header-height) - 200px) !important;
}

.basket-page .basket-page__content {
  display: flex !important;
  gap: 16px !important;
  height: auto !important;
  /* Колонки выравниваем по верху, чтобы upselling не растягивался под высоту
   * корзины. После клампинга NUMBER_OF_PAGES=1 (class.php) список товаров
   * фиксированный (5 шт), и stretch-режим оставлял внутри карточки большой
   * пустой блок снизу (см. также правила для .catalog-list__body ниже). */
  align-items: flex-start !important;
  flex: 1 1 auto !important;
}

.basket-page .basket-upselling__basket {
  flex: 1 1 65% !important;
  margin-right: 0 !important;
  min-width: 0 !important;
}

.basket-page .basket-upselling__upselling {
  flex: 0 1 35% !important;
  min-width: 280px !important;
}

/* Возвращаем нормальный скролл документа на десктопе (раньше
 * basket-upselling/1.css ставил body { overflow-y: hidden }). */
body:has(.basket-page) {
  overflow-y: auto !important;
}

/* ----- Карточка корзины (.basket) ----- */
.basket-page .basket {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid #ececef !important;
  overflow: hidden !important;
}

/* ----- Toolbar (поиск + удалить выбранные) ----- */
.basket-page .basket__tool-bar {
  padding: 14px 20px !important;
  border-bottom: 1px solid #f0f0f2 !important;
  background: #fafbfc !important;
  flex: 0 0 auto !important;
}

.basket-page .basket__search {
  width: 320px !important;
  max-width: 100% !important;
}

.basket-page .search-group__input {
  background-color: #f5f5f6 !important;
  border: 1px solid transparent !important;
  border-radius: 10px 0 0 10px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  height: 38px !important;
  color: #333 !important;
  transition: background-color 0.18s, box-shadow 0.18s !important;
}

.basket-page .search-group__input:focus,
.basket-page .search-group__input:focus-visible {
  background-color: #fff !important;
  box-shadow: 0 0 0 2px rgba(123, 27, 22, 0.15) !important;
  outline: none !important;
}

.basket-page .search-group__btn {
  background-color: #f5f5f6 !important;
  border: 1px solid transparent !important;
  border-left: 0 !important;
  border-radius: 0 10px 10px 0 !important;
  width: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
}

.basket-page .search-group__btn:hover {
  background-color: rgba(123, 27, 22, 0.08) !important;
}

.basket-page .search-group__btn:hover svg path {
  fill: var(--to-primary) !important;
}

/* Кнопка «Удалить выбранное» */
.basket-page .basket__toolbar-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  background: #fff !important;
  border: 1px solid #e6e6e9 !important;
  color: #555 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.basket-page .basket__toolbar-btn:hover {
  color: var(--to-primary) !important;
  border-color: var(--to-primary) !important;
  background-color: rgba(123, 27, 22, 0.04) !important;
}

.basket-page .basket__toolbar-btn:hover path {
  fill: var(--to-primary) !important;
}

.basket-page .basket__toolbar-btn span {
  margin-left: 0 !important;
}

/* ----- Заголовок таблицы товаров ----- */
.basket-page .basket__header {
  background: #fafbfc !important;
  border-top: 0 !important;
  border-bottom: 1px solid #ececef !important;
  padding: 12px 20px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #8a8d96 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
}

.basket-page .basket__header .basket__column span {
  font-weight: 600 !important;
}

/* ----- Тело таблицы товаров ----- */
.basket-page .basket__body {
  background: #fff !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 320px) !important;
}

.basket-page .basket__body::after {
  height: 24px !important;
}

.basket-page .basket__item {
  padding: 12px 20px !important;
  border-top: 0 !important;
  border-bottom: 1px solid #f3f3f5 !important;
  font-size: 13px !important;
  color: #2a2a2e !important;
  transition: background-color 0.12s !important;
}

.basket-page .basket__item:hover {
  background-color: rgba(123, 27, 22, 0.025) !important;
}

.basket-page .basket__item:last-child {
  border-bottom: 0 !important;
}

/* Картинка товара */
.basket-page .basket__column__img {
  width: 56px !important;
  height: 56px !important;
  padding: 4px !important;
  background: #fff !important;
  border: 1px solid #f0f0f2 !important;
  border-radius: 8px !important;
}

/* Название товара */
.basket-page .basket__product-name {
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  transition: color 0.15s !important;
}

.basket-page .basket__product-name:hover {
  color: var(--to-primary) !important;
  text-decoration: none !important;
}

/* Свойства товара под названием */
.basket-page .basket__product-discrioption > span {
  font-size: 11.5px !important;
  color: #8a8d96 !important;
  margin-top: 2px !important;
}

/* Зачёркнутая старая цена */
.basket-page .basket__full-price-formated {
  color: #b0b3ba !important;
  font-size: 11px !important;
}

/* «По 1 шт» под ценой */
.basket-page .basket__measure-ratio {
  font-size: 11px !important;
  color: #8a8d96 !important;
}

/* Итоговая сумма по строке — бордовый акцент */
.basket-page .total_amount__product,
.basket-page .busket__column__font-bold {
  color: var(--to-primary) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* Скидка — приглушённый зелёный/нейтральный */
.basket-page .basket__column.busket__column__size-12 .basket__column-price-wrap span:only-child {
  font-weight: 500 !important;
}

/* Чекбоксы */
.basket-page .basket__checkbox {
  border-radius: 4px !important;
  border-color: #c4c7ce !important;
  transition: border-color 0.15s, background-color 0.15s !important;
}

.basket-page .basket__checkbox:hover {
  border-color: var(--to-primary) !important;
}

.basket-page .basket__checkbox .basket__checkbox_content {
  color: var(--to-primary) !important;
}

/* Поле «Цена» (input) — мягкая обводка */
.basket-page .price_edit {
  background: #fafbfc !important;
  border: 1px solid #e6e6e9 !important;
  border-radius: 6px !important;
  padding: 5px 8px !important;
  font-size: 12.5px !important;
  color: #2a2a2e !important;
  text-align: right !important;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s !important;
}

.basket-page .price_edit:focus {
  background: #fff !important;
  border-color: var(--to-primary) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 2px rgba(123, 27, 22, 0.12) !important;
}

/* ----- Управление количеством +/- ----- */
.basket-page .input-group-basket {
  background: #fafbfc !important;
  border-radius: 8px !important;
  padding: 2px !important;
  border: 1px solid #e6e6e9 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
}

.basket-page .input-group-basket .input-group-prepend,
.basket-page .input-group-basket .input-group-append {
  width: 28px !important;
  height: 28px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #555 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: background-color 0.12s, color 0.12s !important;
}

.basket-page .input-group-basket .input-group-prepend:hover,
.basket-page .input-group-basket .input-group-append:hover {
  background-color: rgba(123, 27, 22, 0.10) !important;
  color: var(--to-primary) !important;
}

.basket-page .input-group-basket .form-control {
  border: 0 !important;
  background: transparent !important;
  width: 48px !important;
  height: 28px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.basket-page .input-group-basket .form-control:focus {
  outline: 0 !important;
  box-shadow: none !important;
}

/* Иконки «свернуть/показать опт» — лёгкие кружки вместо img-only */
.basket-page .close_catalog,
.basket-page .view_catalog {
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(123, 27, 22, 0.06) !important;
  transition: background-color 0.15s !important;
  opacity: 0.7 !important;
}

.basket-page .close_catalog:hover,
.basket-page .view_catalog:hover {
  background: rgba(123, 27, 22, 0.14) !important;
  opacity: 1 !important;
}

/* ----- Upselling-карточка (правая колонка) -----
 *
 * Базовые стили компонента (sotbit/basket.upselling/.../style.css) рассчитаны
 * на «бесконечный» список товаров: все обёртки height:100%, body имеет
 * flex:1 1 100% + overflow-y:scroll, плюс .catalog-list получает
 * margin-bottom:186px как «зону догрузки».
 *
 * После клампинга NUMBER_OF_PAGES=1 в class.php список фиксирован (5 шт),
 * поэтому раздувание на всю высоту даёт огромное пустое пространство снизу.
 * Здесь схлопываем всю цепочку до content-высоты.
 */
.basket-page .upselling {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid #ececef !important;
  overflow: hidden !important;
  height: auto !important;
}

.basket-page .upselling .upselling__filter,
.basket-page .upselling .upselling__catalog-list {
  box-shadow: none !important;
  border-radius: 0 !important;
}

.basket-page .upselling .upselling__filter {
  border-bottom: 1px solid #f0f0f2 !important;
  background: #fafbfc !important;
  /* Не зажимаем фильтр в фиксированные 240 px — пусть схлопывается до контента */
  flex: 0 0 auto !important;
}

.basket-page .upselling .upselling__catalog-list {
  height: auto !important;
  padding-bottom: 0 !important;
  flex: 0 0 auto !important;
}

.basket-page .catalog-list {
  height: auto !important;
  margin-bottom: 0 !important;
  overflow-y: visible !important;
}

.basket-page .catalog-list .catalog-list__body {
  flex: 0 0 auto !important;
  height: auto !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
}

/* Заголовок «Возможно вас заинтересует» / шапка фильтра */
.basket-page .filter .filter_title {
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #1a1a1a !important;
  letter-spacing: -0.005em !important;
}

.basket-page .filter .filter__roll-up,
.basket-page .filter .filter__roll-down {
  color: var(--to-primary) !important;
  opacity: 0.7 !important;
  transition: opacity 0.15s !important;
}

.basket-page .filter .filter__roll-up:hover,
.basket-page .filter .filter__roll-down:hover {
  opacity: 1 !important;
}

.basket-page .filter .filter__input,
.basket-page .filter input[type="text"] {
  background: #fff !important;
  border: 1px solid #e6e6e9 !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  font-size: 12.5px !important;
  color: #2a2a2e !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.basket-page .filter .filter__input:focus,
.basket-page .filter input[type="text"]:focus {
  border-color: var(--to-primary) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 2px rgba(123, 27, 22, 0.10) !important;
}

.basket-page .filter .filter__selected-item {
  background: rgba(123, 27, 22, 0.06) !important;
  border: 1px solid rgba(123, 27, 22, 0.18) !important;
  border-radius: 6px !important;
  color: #2a2a2e !important;
  font-size: 11.5px !important;
  padding: 3px 8px !important;
  transition: background-color 0.12s !important;
}

.basket-page .filter .filter__selected-item:hover {
  background: rgba(123, 27, 22, 0.12) !important;
}

/* Шапка каталог-листа в upselling */
.basket-page .catalog-list .catalog-list__header {
  background: #fafbfc !important;
  border-top: 0 !important;
  border-bottom: 1px solid #ececef !important;
  padding: 10px 16px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #8a8d96 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  box-shadow: none !important;
}

.basket-page .catalog-list .catalog-list__item {
  padding: 10px 16px !important;
  border-bottom: 1px solid #f3f3f5 !important;
  transition: background-color 0.12s !important;
}

.basket-page .catalog-list .catalog-list__item:hover {
  background-color: rgba(123, 27, 22, 0.025) !important;
}

.basket-page .catalog-list .catalog-list__name {
  color: #1a1a1a !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  transition: color 0.15s !important;
}

.basket-page .catalog-list .catalog-list__name:hover {
  color: var(--to-primary) !important;
}

.basket-page .catalog-list__item .price_whithout_discond {
  color: #b0b3ba !important;
  font-size: 10.5px !important;
}

/* Кнопки фильтра upselling */
.basket-page .filter .filter__btn-guop .btn,
.basket-page .filter .filter__btn-guop button {
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  font-family: 'Inter', 'Manrope', sans-serif !important;
}

/* ----- Footer-бар: total + действия + оформить ----- */
.basket-page__footer,
.basket-page .basket-page__footer {
  position: sticky !important;
  bottom: 0 !important;
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid #ececef !important;
  padding: 14px 20px !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  z-index: 5 !important;
}

/* «Действия» — outlined chip */
.basket-page .basket-page__action-btn {
  margin-right: auto !important;
}

.basket-page .basket-page__action-btn .btn.btn-light.btn-actions,
.basket-page .basket-page__action-btn .btn-actions,
.basket-page .btn-light.btn-actions.btn_b2b_hover {
  background: #fff !important;
  border: 1px solid #e0e0e3 !important;
  color: #444 !important;
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 16px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
}

.basket-page .basket-page__action-btn .btn.btn-light.btn-actions::after,
.basket-page .basket-page__action-btn .btn-actions::after {
  content: "" !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-bottom: 6px solid currentColor !important;
  margin-left: 4px !important;
  opacity: 0.6 !important;
  transition: transform 0.2s ease !important;
}

.basket-page .basket-page__action-btn .btn-actions:hover,
.basket-page .btn-light.btn-actions.btn_b2b_hover:hover {
  border-color: var(--to-primary) !important;
  color: var(--to-primary) !important;
  background: rgba(123, 27, 22, 0.04) !important;
}

/* Дроп-ап «Действия» — белая карточка */
.basket-page .basket-page__actions-container {
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.10), 0 -2px 8px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid #ececef !important;
  padding: 18px !important;
  bottom: calc(100% + 10px) !important;
  left: 16px !important;
  right: 16px !important;
  width: auto !important;
  max-height: 60vh !important;
}

.basket-page .basket-page__actions-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
}

.basket-page .basket-page__actions-item {
  flex: 1 1 auto !important;
  flex-basis: auto !important;
  max-width: none !important;
  background: #fafbfc !important;
  border: 1px solid #ececef !important;
  border-radius: 10px !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.basket-page .basket-page__actions-item:hover {
  background: #fff !important;
  border-color: var(--to-primary) !important;
  box-shadow: 0 4px 14px rgba(123, 27, 22, 0.10) !important;
  transform: translateY(-1px) !important;
}

.basket-page .basket-page__actions-item button {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: 0 !important;
  padding: 14px 16px !important;
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #2a2a2e !important;
  cursor: pointer !important;
}

.basket-page .basket-page__actions-item:hover button {
  color: var(--to-primary) !important;
}

/* ----- Сумма заказа ----- */
.basket-page .basket-page__total-price {
  margin-right: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  font-family: 'Inter', 'Manrope', sans-serif !important;
  white-space: nowrap !important;
}

.basket-page .basket-page__total-price-key {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #8a8d96 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 2px !important;
}

.basket-page .basket-page__total-price-value {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--to-primary) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
}

/* ----- Кнопка «Оформить заказ» ----- */
.basket-page .basket-page__checkout-btn .btn.btn_b2b,
.basket-page .basket-page__checkout-btn .btn_b2b {
  background: var(--to-primary) !important;
  background-color: var(--to-primary) !important;
  border-color: var(--to-primary) !important;
  color: #fff !important;
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 11px 26px !important;
  border-radius: 10px !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 4px 14px rgba(123, 27, 22, 0.25) !important;
  transition: all 0.18s ease !important;
}

.basket-page .basket-page__checkout-btn .btn.btn_b2b:hover,
.basket-page .basket-page__checkout-btn .btn_b2b:hover {
  background: var(--to-primary-dark) !important;
  background-color: var(--to-primary-dark) !important;
  border-color: var(--to-primary-dark) !important;
  box-shadow: 0 6px 20px rgba(123, 27, 22, 0.35) !important;
  transform: translateY(-1px) !important;
}

.basket-page .basket-page__checkout-btn .btn.btn_b2b:active,
.basket-page .basket-page__checkout-btn .btn_b2b:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(123, 27, 22, 0.25) !important;
}

/* ----- Пустая корзина — карточка ----- */
.basket-page .index_cart-empty .card {
  background: #fff !important;
  border: 1px solid #ececef !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;
  padding: 28px !important;
  text-align: center !important;
}

.basket-page .index_cart-empty .card-header {
  background: transparent !important;
  border-bottom: 0 !important;
  padding: 0 !important;
}

.basket-page .index_cart-empty .card-title {
  font-size: 15px !important;
  color: #2a2a2e !important;
  font-weight: 600 !important;
}

.basket-page .index_cart-empty .card-title a {
  color: var(--to-primary) !important;
  font-weight: 600 !important;
}

.basket-page .index_cart-empty .card-title a:hover {
  color: var(--to-primary-dark) !important;
  text-decoration: underline !important;
}

/* ----- Импорт XLS-кнопка (sotbit:b2bcabinet.excel.import) и Export ----- */
.basket-page .basket-page__actions-item input[type="file"] + label,
.basket-page .basket-page__actions-item .upload-file label.btn,
.basket-page .basket-page__actions-item .upload-file .action.btn {
  background: transparent !important;
  border: 0 !important;
  color: #2a2a2e !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* ----- Адаптив ----- */
@media (max-width: 1200px) {
  .basket-page .basket-page__content {
    flex-direction: column !important;
  }
  .basket-page .basket-upselling__basket,
  .basket-page .basket-upselling__upselling {
    flex: 1 1 auto !important;
    width: 100% !important;
  }
  .basket-page .basket__body {
    max-height: none !important;
  }
}

@media (max-width: 767px) {
  .basket-page .basket-page__footer {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .basket-page .basket-page__action-btn {
    order: 1 !important;
    flex: 0 0 auto !important;
  }
  .basket-page .basket-page__total-price {
    order: 2 !important;
    flex: 1 1 auto !important;
    align-items: flex-end !important;
    margin-right: 0 !important;
  }
  .basket-page .basket-page__checkout-btn {
    order: 3 !important;
    flex: 1 1 100% !important;
  }
  .basket-page .basket-page__checkout-btn .btn.btn_b2b {
    width: 100% !important;
  }
  .basket-page .basket__tool-bar {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .basket-page .basket__search {
    width: 100% !important;
  }
  .basket-page .basket__toolbar-btn {
    align-self: flex-start !important;
  }
  .basket-page .basket-page__actions-list {
    grid-template-columns: 1fr !important;
  }
  .basket-page .basket-page__actions-container {
    left: 8px !important;
    right: 8px !important;
  }
}

@media (max-width: 480px) {
  .basket-page .basket__column__img {
    width: 44px !important;
    height: 44px !important;
  }
  .basket-page .basket__product-name {
    font-size: 12.5px !important;
  }
  .basket-page .basket-page__total-price-value {
    font-size: 18px !important;
  }
}

/* ============================================================================
 * СТРАНИЦА ОФОРМЛЕНИЯ ЗАКАЗА /orders/make/make.php
 * Шаблон: local/templates/b2bcabinet/components/bitrix/sale.order.ajax/b2bcabinet_new_amx/
 *
 * Перебивает:
 *   – components/bitrix/sale.order.ajax/b2bcabinet_new_amx/style.css
 *   – Bootstrap .card / .form-control / .form-check / .table-* в этом контексте
 *
 * Цели:
 *   – Главная карточка-обёртка в стилистике cart-page (radius 12 px, мягкая тень);
 *   – Внутренние секции (organization, payment, delivery, basket) — белые мини-карточки
 *     с тонким бордом #ececef вместо плотных #ededed-рамок;
 *   – Шрифт Inter, заголовки uppercase в стилистике подзаголовков таблиц;
 *   – Поля ввода с фокус-кольцом var(--to-primary);
 *   – Радио-опции доставки/оплаты как кликабельные плитки с brand-обводкой при выборе;
 *   – Таблица товаров — без полосок, hover-подсветка строк, бордовая сумма;
 *   – Кнопка «Оформить заказ» — primary с shadow + lift на hover (как cart-checkout);
 *   – Модалка пункта самовывоза — rounded 12 px, чистая шапка/футер.
 * ============================================================================ */

/* ----- Главная карточка-обёртка ----- */
.index_checkout > .row > .col-md-12 > .card,
.index_order_success > .row > .col-md-12 > .card {
  background: #fff !important;
  border: 1px solid #ececef !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

.index_checkout > .row > .col-md-12 > .card > .card-header,
.index_order_success > .row > .col-md-12 > .card > .card-header {
  background: #fafbfc !important;
  border-bottom: 1px solid #ececef !important;
  padding: 16px 22px !important;
}

.index_checkout > .row > .col-md-12 > .card > .card-header .card-title,
.index_order_success > .row > .col-md-12 > .card > .card-header .card-title {
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.005em !important;
  margin: 0 !important;
}

.index_checkout .card-header .list-icons-item,
.index_order_success .card-header .list-icons-item {
  color: #8a8d96 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  transition: all 0.15s !important;
}

.index_checkout .card-header .list-icons-item:hover,
.index_order_success .card-header .list-icons-item:hover {
  color: var(--to-primary) !important;
  background-color: rgba(123, 27, 22, 0.06) !important;
}

/* ----- Тело формы ----- */
.index_checkout .card-body.checkout_form,
.index_order_success .card-body.checkout_form {
  padding: 22px !important;
  border-top: 0 !important;
  background: #fff !important;
}

/* ----- Внутренние блоки: вертикальный стек белых карточек ----- */
.index_checkout .checkout_form-individual,
.index_order_success .checkout_form-individual {
  display: block !important;
  margin-bottom: 0 !important;
  background: transparent !important;
}

/* Каждая вложенная секция (card-order-group, card-delivery, card-paysystem
 * лежат прямо внутри .checkout_form-individual без обёртки) — отдельная карточка */
.index_checkout .checkout_form-individual > .card,
.index_order_success .checkout_form-individual > .card {
  background: #fafbfc !important;
  border: 1px solid #ececef !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
}

.index_checkout .checkout_form-individual > .card:last-child,
.index_order_success .checkout_form-individual > .card:last-child {
  margin-bottom: 0 !important;
}

/* «Order» reorders delivery/paysystem — превращаем в flex-stack чтобы order работал */
.index_checkout .checkout_form-individual:has(.card-paysystem),
.index_order_success .checkout_form-individual:has(.card-paysystem) {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.index_checkout .checkout_form-individual:has(.card-paysystem) > .card,
.index_order_success .checkout_form-individual:has(.card-paysystem) > .card {
  margin-bottom: 0 !important;
}

/* Безопасный fallback inline-style на card-paysystem (style="order: 0|1") */
.index_checkout .card.card-paysystem,
.index_order_success .card.card-paysystem {
  background: #fafbfc !important;
  border: 1px solid #ececef !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
  box-shadow: none !important;
}

.index_checkout .card.card-delivery,
.index_order_success .card.card-delivery {
  background: #fafbfc !important;
  border: 1px solid #ececef !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
  box-shadow: none !important;
}

.index_checkout .card.card-order-group,
.index_order_success .card.card-order-group {
  background: #fafbfc !important;
  border: 1px solid #ececef !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
}

.index_checkout .card.card-order-group:last-of-type,
.index_order_success .card.card-order-group:last-of-type {
  margin-bottom: 0 !important;
}

/* Body внутри вложенных карточек — без своего padding */
.index_checkout .card.card-order-group > .card-body,
.index_checkout .card.card-delivery > .card-body,
.index_checkout .card.card-paysystem > .card-body,
.index_order_success .card.card-order-group > .card-body,
.index_order_success .card.card-delivery > .card-body,
.index_order_success .card.card-paysystem > .card-body {
  padding: 0 !important;
  background: transparent !important;
}

/* Заголовки секций внутри карточек */
.index_checkout .checkout_form-title_inner,
.index_order_success .checkout_form-title_inner {
  background: transparent !important;
  padding: 0 0 12px 0 !important;
  border-bottom: 1px solid #ececef !important;
  margin-bottom: 16px !important;
}

.index_checkout .checkout_form-title_inner .card-title,
.index_order_success .checkout_form-title_inner .card-title {
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #8a8d96 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
}

.index_checkout .checkout_form-title_inner .card-title span,
.index_order_success .checkout_form-title_inner .card-title span {
  font-weight: 700 !important;
}

.index_checkout .payer_type-title,
.index_order_success .payer_type-title {
  padding-left: 0 !important;
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #8a8d96 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 12px !important;
}

.index_checkout .index_checkout-payer_type,
.index_order_success .index_checkout-payer_type {
  padding: 0 0 12px 0 !important;
}

/* ----- Формы: поля + лейблы ----- */
.index_checkout .card-body.checkout_form .form-group,
.index_order_success .card-body.checkout_form .form-group {
  margin-bottom: 14px !important;
}

.index_checkout .form-group.row,
.index_order_success .form-group.row {
  display: flex !important;
  align-items: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.index_checkout .checkout_form-individual .form-group.row .col-form-label,
.index_order_success .checkout_form-individual .form-group.row .col-form-label,
.index_checkout .form-group.row .col-form-label,
.index_order_success .form-group.row .col-form-label {
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #555 !important;
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Текстовые поля и textarea */
.index_checkout .form-control,
.index_order_success .form-control,
.index_checkout input[type="text"].form-control,
.index_checkout input[type="email"].form-control,
.index_checkout input[type="tel"].form-control,
.index_checkout textarea.form-control {
  background: #fff !important;
  border: 1px solid #e0e0e3 !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 13px !important;
  color: #1a1a1a !important;
  height: auto !important;
  min-height: 38px !important;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s !important;
}

.index_checkout .form-control:hover,
.index_order_success .form-control:hover {
  border-color: #c4c7ce !important;
}

.index_checkout .form-control:focus,
.index_order_success .form-control:focus {
  background: #fff !important;
  border-color: var(--to-primary) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(123, 27, 22, 0.10) !important;
}

.index_checkout .form-control[readonly],
.index_order_success .form-control[readonly] {
  background: #f7f8fa !important;
  color: #6b6e76 !important;
  border-color: #ececef !important;
}

.index_checkout .form-control::placeholder,
.index_order_success .form-control::placeholder {
  color: #b0b3ba !important;
}

.index_checkout textarea.form-control,
.index_order_success textarea.form-control {
  min-height: 90px !important;
  resize: vertical !important;
}

/* Select2-стили внутри формы */
.index_checkout .select2-container--default .select2-selection--single,
.index_order_success .select2-container--default .select2-selection--single {
  background: #fff !important;
  border: 1px solid #e0e0e3 !important;
  border-radius: 8px !important;
  min-height: 38px !important;
  padding: 4px 8px !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.index_checkout .select2-container--default.select2-container--focus .select2-selection--single,
.index_checkout .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--to-primary) !important;
  box-shadow: 0 0 0 3px rgba(123, 27, 22, 0.10) !important;
}

.index_checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 13px !important;
  color: #1a1a1a !important;
  line-height: 28px !important;
  padding-left: 4px !important;
}

/* ----- Радио-плитки: доставка / оплата (компактно, в один ряд) ----- */
.index_checkout .index_checkout-delivery_type,
.index_checkout .index_checkout-payment_system,
.index_order_success .index_checkout-delivery_type,
.index_order_success .index_checkout-payment_system {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 10px !important;
}

.index_checkout .index_checkout-delivery_type .form-check.form-check-inline,
.index_checkout .index_checkout-payment_system .form-check.form-check-inline,
.index_order_success .index_checkout-delivery_type .form-check.form-check-inline,
.index_order_success .index_checkout-payment_system .form-check.form-check-inline {
  display: flex !important;
  align-items: center !important;
  flex: 0 1 auto !important;
  max-width: 100% !important;
  background: #fff !important;
  border: 1.5px solid #e6e6e9 !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

/* убираем принудительные переносы строк внутри плитки (<br> из шаблона) */
.index_checkout .index_checkout-delivery_type .form-check.form-check-inline br,
.index_checkout .index_checkout-payment_system .form-check.form-check-inline br,
.index_order_success .index_checkout-delivery_type .form-check.form-check-inline br,
.index_order_success .index_checkout-payment_system .form-check.form-check-inline br {
  display: none !important;
}

.index_checkout .index_checkout-delivery_type .form-check.form-check-inline:hover,
.index_checkout .index_checkout-payment_system .form-check.form-check-inline:hover {
  border-color: var(--to-primary) !important;
  background-color: rgba(123, 27, 22, 0.03) !important;
}

/* Активная (выбранная) плитка — обводка бордовая ярче + лёгкий тинт.
   Bitrix добавляет класс `selected` на label при выборе. */
.index_checkout .index_checkout-delivery_type .form-check.form-check-inline:has(input:checked),
.index_checkout .index_checkout-payment_system .form-check.form-check-inline:has(input:checked),
.index_checkout .index_checkout-delivery_type .form-check-label.selected,
.index_checkout .index_checkout-payment_system .form-check-label.selected {
  border-color: var(--to-primary) !important;
  background-color: rgba(123, 27, 22, 0.05) !important;
  box-shadow: 0 2px 8px rgba(123, 27, 22, 0.08) !important;
}

.index_checkout .form-check.disabled,
.index_order_success .form-check.disabled {
  color: inherit !important;
  opacity: 1 !important;
}

.index_checkout .form-check-label,
.index_order_success .form-check-label {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: auto !important;
  margin: 0 !important;
  cursor: pointer !important;
  font-family: 'Inter', 'Manrope', sans-serif !important;
}

/* Логотип ТК / способа оплаты */
.index_checkout .delivery_payment_logo,
.index_order_success .delivery_payment_logo {
  width: 44px !important;
  min-width: 44px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid #f0f0f2 !important;
  border-radius: 6px !important;
  padding: 3px !important;
}

.index_checkout .delivery_payment_logo img,
.index_order_success .delivery_payment_logo img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* Текст плитки — название и описание в одну строку */
.index_checkout .index_checkout-delivery_text,
.index_order_success .index_checkout-delivery_text {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

.index_checkout .index_checkout-radios_title,
.index_order_success .index_checkout-radios_title {
  display: inline !important;
  white-space: nowrap !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
}

/* описание держим в одну строку, длинное — с многоточием, чтобы не ломать ряд */
.index_checkout .index_checkout-radios_description,
.index_order_success .index_checkout-radios_description {
  display: inline-block !important;
  max-width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: bottom !important;
  font-size: 12px !important;
  color: #8a8d96 !important;
  line-height: 1.4 !important;
}

/* Стоимость доставки — в ту же строку */
.index_checkout .index_checkout-deliveries,
.index_order_success .index_checkout-deliveries {
  flex: 0 0 auto !important;
  margin-left: 6px !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.index_checkout .index_checkout-delivery_cost,
.index_order_success .index_checkout-delivery_cost {
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--to-primary) !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

/* Кастомные радио-точки Bitrix (.form-input-styled через Uniform.js) */
.index_checkout .form-check-label > .uniform-radio,
.index_order_success .form-check-label > .uniform-radio,
.index_checkout .form-check-label > [class*="uniform"] {
  flex-shrink: 0 !important;
  margin-right: 4px !important;
}

/* ----- Карточка-обёртка «Состав заказа» (basket.php) ----- */
.index_checkout .card-body.checkout_form .row > .col-md-12 > .card,
.index_order_success .card-body.checkout_form .row > .col-md-12 > .card {
  background: #fff !important;
  border: 1px solid #ececef !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  margin: 20px 0 !important;
}

.index_checkout .card-body.checkout_form .row > .col-md-12 > .card > .card-header,
.index_order_success .card-body.checkout_form .row > .col-md-12 > .card > .card-header {
  background: #fafbfc !important;
  border-bottom: 1px solid #ececef !important;
  padding: 14px 20px !important;
}

.index_checkout .card-body.checkout_form .row > .col-md-12 > .card > .card-header .card-title,
.index_order_success .card-body.checkout_form .row > .col-md-12 > .card > .card-header .card-title {
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.005em !important;
  margin: 0 !important;
}

/* ----- Таблица товаров в карточке заказа ----- */
.index_checkout .card-body.index_checkout-table,
.index_order_success .card-body.index_checkout-table {
  padding: 0 !important;
}

.index_checkout .index_checkout-table .table-responsive,
.index_order_success .index_checkout-table .table-responsive {
  padding: 0 !important;
}

.index_checkout .index_checkout-table .table,
.index_order_success .index_checkout-table .table {
  margin: 0 !important;
  border: 0 !important;
  background: #fff !important;
}

.index_checkout .index_checkout-table .table thead th,
.index_order_success .index_checkout-table .table thead th {
  background: #fafbfc !important;
  border-top: 0 !important;
  border-bottom: 1px solid #ececef !important;
  padding: 12px 16px !important;
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #8a8d96 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.index_checkout .index_checkout-table .table tbody tr,
.index_order_success .index_checkout-table .table tbody tr {
  transition: background-color 0.12s !important;
}

.index_checkout .index_checkout-table .table tbody tr:hover,
.index_order_success .index_checkout-table .table tbody tr:hover {
  background-color: rgba(123, 27, 22, 0.025) !important;
}

.index_checkout .index_checkout-table .table tbody td,
.index_order_success .index_checkout-table .table tbody td {
  padding: 12px 16px !important;
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 13px !important;
  color: #2a2a2e !important;
  border-color: #f3f3f5 !important;
  vertical-align: middle !important;
}

.index_checkout .index_checkout-table .table tbody td a,
.index_order_success .index_checkout-table .table tbody td a {
  color: #1a1a1a !important;
  font-weight: 500 !important;
  transition: color 0.15s !important;
}

.index_checkout .index_checkout-table .table tbody td a:hover,
.index_order_success .index_checkout-table .table tbody td a:hover {
  color: var(--to-primary) !important;
  text-decoration: none !important;
}

.index_checkout .index_checkout-table .table tbody td .img-responsive,
.index_order_success .index_checkout-table .table tbody td .img-responsive {
  max-width: 56px !important;
  max-height: 56px !important;
  padding: 4px !important;
  background: #fff !important;
  border: 1px solid #f0f0f2 !important;
  border-radius: 8px !important;
}

/* ----- Промокод / Итого под таблицей ----- */
.index_checkout .index_checkout-promocode,
.index_order_success .index_checkout-promocode {
  padding: 16px 20px !important;
  border-top: 1px solid #ececef !important;
  background: #fafbfc !important;
}

.index_checkout .index_checkout-promocode > div:first-child,
.index_order_success .index_checkout-promocode > div:first-child {
  padding: 0 !important;
  border: 0 !important;
}

.index_checkout .index_checkout-promocode .index_checkout-promocode-total_text,
.index_order_success .index_checkout-promocode .index_checkout-promocode-total_text {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  justify-content: flex-end !important;
}

.index_checkout .index_checkout-promocode-total_text h5,
.index_order_success .index_checkout-promocode-total_text h5 {
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #8a8d96 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
}

.index_checkout .index_checkout-promocode-total_text h4,
.index_order_success .index_checkout-promocode-total_text h4 {
  margin: 0 !important;
}

.index_checkout .index_checkout-promocode-total_amount,
.index_order_success .index_checkout-promocode-total_amount {
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--to-primary) !important;
  letter-spacing: -0.01em !important;
}

/* ----- Сводная таблица (summary.php) ----- */
.index_checkout .index_checkout-table_total {
  margin-top: 20px !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 20px !important;
  align-items: stretch !important;
  justify-content: space-between !important;
}

.index_checkout .index_checkout-table_total > .table-responsive {
  flex: 1 1 auto !important;
  background: #fafbfc !important;
  border: 1px solid #ececef !important;
  border-radius: 12px !important;
  padding: 8px !important;
  overflow: hidden !important;
}

.index_checkout .index_checkout-table_total .table.table-bordered {
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.index_checkout .index_checkout-table_total .table.table-bordered th,
.index_checkout .index_checkout-table_total .table.table-bordered td {
  border-color: #ececef !important;
  padding: 12px 14px !important;
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 12.5px !important;
}

.index_checkout .index_checkout-table_total .table.table-bordered th {
  background: transparent !important;
  font-weight: 600 !important;
  color: #8a8d96 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  font-size: 11.5px !important;
  border-color: #ececef !important;
}

.index_checkout .index_checkout-table_total .table.table-bordered th h4 {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.index_checkout .index_checkout-table_total .table.table-bordered td {
  font-weight: 600 !important;
  color: #1a1a1a !important;
  background: transparent !important;
  font-size: 13.5px !important;
}

/* Блок «ИТОГО + Оформить заказ» */
.index_checkout .index_checkout-table_total .index_checkout-total {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 14px !important;
  margin-top: 0 !important;
  background: #fff !important;
  border: 1px solid #ececef !important;
  border-radius: 12px !important;
  padding: 18px 24px !important;
  min-width: 280px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

.index_checkout .index_checkout-table_total .index_checkout-total .index_checkout-total_title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

.index_checkout .index_checkout-table_total .index_checkout-total .index_checkout-total_title span {
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #8a8d96 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 4px !important;
}

.index_checkout .index_checkout-table_total .index_checkout-total .index_checkout-total_title h3 {
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--to-primary) !important;
  letter-spacing: -0.015em !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.index_checkout .index_checkout-table_total .index_checkout-total .form-group.row {
  margin: 0 !important;
}

/* ----- Главная кнопка «Оформить заказ» ----- */
.index_checkout .index_checkout-formalize_button,
.index_order_success .index_checkout-formalize_button,
.index_checkout .btn.btn-light.index_checkout-formalize_button,
.index_order_success .btn.btn-light.index_checkout-formalize_button {
  width: 100% !important;
  background: var(--to-primary) !important;
  background-color: var(--to-primary) !important;
  border: 1px solid var(--to-primary) !important;
  color: #fff !important;
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 12px 22px !important;
  border-radius: 10px !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 4px 14px rgba(123, 27, 22, 0.25) !important;
  transition: all 0.18s ease !important;
  cursor: pointer !important;
}

.index_checkout .index_checkout-formalize_button:hover,
.index_order_success .index_checkout-formalize_button:hover,
.index_checkout .btn.btn-light.index_checkout-formalize_button:hover {
  background: var(--to-primary-dark) !important;
  background-color: var(--to-primary-dark) !important;
  border-color: var(--to-primary-dark) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(123, 27, 22, 0.35) !important;
  transform: translateY(-1px) !important;
}

.index_checkout .index_checkout-formalize_button:active,
.index_order_success .index_checkout-formalize_button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(123, 27, 22, 0.25) !important;
}

/* ----- Базовый стиль .btn_b2b / .btn_save в этом контексте ----- */
.index_checkout .btn.btn_b2b,
.index_order_success .btn.btn_b2b,
.index_checkout .btn.btn_save,
.index_order_success .btn.btn_save {
  background: var(--to-primary) !important;
  background-color: var(--to-primary) !important;
  border: 1px solid var(--to-primary) !important;
  color: #fff !important;
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(123, 27, 22, 0.20) !important;
  transition: all 0.18s ease !important;
}

.index_checkout .btn.btn_b2b a,
.index_order_success .btn.btn_b2b a {
  color: #fff !important;
  text-decoration: none !important;
}

.index_checkout .btn.btn_b2b:hover,
.index_order_success .btn.btn_b2b:hover,
.index_checkout .btn.btn_save:hover,
.index_order_success .btn.btn_save:hover {
  background: var(--to-primary-dark) !important;
  background-color: var(--to-primary-dark) !important;
  border-color: var(--to-primary-dark) !important;
  box-shadow: 0 6px 20px rgba(123, 27, 22, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* ----- Ошибки наличия / error-таблица ----- */
.index_checkout .table.table-striped,
.index_order_success .table.table-striped {
  background: #fff !important;
  border: 1px solid #ececef !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin: 16px 0 !important;
}

.index_checkout .table.table-striped thead .table-secondary,
.index_checkout .table.table-striped thead tr {
  background: #fafbfc !important;
}

.index_checkout .table.table-striped thead th {
  background: #fafbfc !important;
  border: 0 !important;
  border-bottom: 1px solid #ececef !important;
  padding: 10px 14px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #8a8d96 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.index_checkout .table.table-striped tbody .table-danger {
  background: rgba(220, 53, 69, 0.06) !important;
}

.index_checkout .table.table-striped tbody td,
.index_checkout .table.table-striped tbody th {
  padding: 10px 14px !important;
  font-size: 13px !important;
  color: #2a2a2e !important;
  border: 0 !important;
  border-bottom: 1px solid #f3f3f5 !important;
}

.index_checkout .text-danger h6 {
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 20px 0 !important;
}

/* ----- Сообщения об ошибках / inline-ошибки ----- */
.index_checkout .errortext,
.index_order_success .errortext {
  background: rgba(220, 53, 69, 0.06) !important;
  border: 1px solid rgba(220, 53, 69, 0.25) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  color: #b22a3a !important;
  font-size: 13px !important;
  margin: 12px 0 !important;
}

/* Сообщения «Нужно добавить организацию», «Не заполнены реквизиты» */
.index_checkout > div[style*="margin-left"] p {
  background: #fff !important;
  border: 1px solid #ececef !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
  margin: 16px 0 !important;
  font-size: 14px !important;
  color: #2a2a2e !important;
}

.index_checkout > div[style*="margin-left"] p a {
  color: var(--to-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.index_checkout > div[style*="margin-left"] p a:hover {
  color: var(--to-primary-dark) !important;
  text-decoration: underline !important;
}

/* ----- Модалка пункта самовывоза ----- */
#modal_large .modal-dialog,
#modal_large .modal-dialog.modal-lg {
  max-width: min(960px, calc(100vw - 32px)) !important;
}

#modal_large .modal-content {
  background: #fff !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.20), 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
}

#modal_large .modal-header {
  background: #fafbfc !important;
  border-bottom: 1px solid #ececef !important;
  padding: 16px 22px !important;
}

#modal_large .modal-title {
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.005em !important;
}

#modal_large .modal-header .close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1px solid #ececef !important;
  color: #555 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 0 0 auto !important;
  float: none !important;
  text-shadow: none !important;
  transition: all 0.15s !important;
}

#modal_large .modal-header .close:hover {
  background: var(--to-primary) !important;
  border-color: var(--to-primary) !important;
  color: #fff !important;
  transform: rotate(90deg) !important;
}

#modal_large #modal_map_content,
#modal_large .modal-body-issue_point {
  padding: 22px !important;
}

#modal_large .modal-footer {
  background: #fafbfc !important;
  border-top: 1px solid #ececef !important;
  padding: 14px 22px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

#modal_large .popup-window-buttons_btns {
  display: flex !important;
  gap: 10px !important;
}

#modal_large .btn.btn-link {
  background: transparent !important;
  border: 1px solid #e0e0e3 !important;
  color: #555 !important;
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 18px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
}

#modal_large .btn.btn-link:hover {
  color: var(--to-primary) !important;
  border-color: var(--to-primary) !important;
  background: rgba(123, 27, 22, 0.04) !important;
  text-decoration: none !important;
}

/* Внутренняя таблица с пунктами выдачи */
.modal-body-issue_point .data table td {
  font-family: 'Inter', 'Manrope', sans-serif !important;
}

#store_table .store_row {
  border: 2px solid #f3f3f5 !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  margin: 3px 0 !important;
  font-size: 12px !important;
  transition: all 0.15s !important;
}

#store_table .store_row:hover,
#store_table .checked {
  border-color: var(--to-primary) !important;
  background: rgba(123, 27, 22, 0.04) !important;
}

/* ----- Уголок «сборщик» blank_resizer (узкая боковая панелька) ----- */
.blank_resizer {
  display: none !important;
}

/* ----- Адаптив для оформления ----- */
@media screen and (max-width: 1200px) {
  .index_checkout .index_checkout-table_total,
  .index_order_success .index_checkout-table_total {
    flex-direction: column !important;
  }
  .index_checkout .index_checkout-table_total .index_checkout-total {
    min-width: 0 !important;
    width: 100% !important;
  }
  .index_checkout .checkout_form-individual,
  .index_order_success .checkout_form-individual {
    flex-direction: column !important;
  }
}

@media screen and (max-width: 767px) {
  .index_checkout .card-body.checkout_form,
  .index_order_success .card-body.checkout_form {
    padding: 14px !important;
  }
  .index_checkout .checkout_form-individual > div,
  .index_order_success .checkout_form-individual > div {
    padding: 14px !important;
  }
  .index_checkout .form-group.row,
  .index_order_success .form-group.row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .index_checkout .form-group.row .col-form-label,
  .index_order_success .form-group.row .col-form-label {
    margin-bottom: 6px !important;
  }
  /* на телефонах плитки занимают всю ширину (вертикальный список) */
  .index_checkout .index_checkout-delivery_type .form-check.form-check-inline,
  .index_checkout .index_checkout-payment_system .form-check.form-check-inline,
  .index_order_success .index_checkout-delivery_type .form-check.form-check-inline,
  .index_order_success .index_checkout-payment_system .form-check.form-check-inline {
    flex-basis: 100% !important;
  }
  .index_checkout .form-check-label,
  .index_order_success .form-check-label {
    flex-wrap: wrap !important;
  }
  .index_checkout .index_checkout-deliveries,
  .index_order_success .index_checkout-deliveries {
    margin-left: 56px !important;
    text-align: left !important;
    width: 100% !important;
  }
  .index_checkout .index_checkout-delivery_cost,
  .index_order_success .index_checkout-delivery_cost {
    font-size: 14px !important;
  }
}

@media screen and (max-width: 480px) {
  .index_checkout > .row > .col-md-12 > .card > .card-header,
  .index_order_success > .row > .col-md-12 > .card > .card-header {
    padding: 14px 16px !important;
  }
  .index_checkout > .row > .col-md-12 > .card > .card-header .card-title {
    font-size: 14px !important;
  }
  .index_checkout .index_checkout-table_total .index_checkout-total .index_checkout-total_title h3 {
    font-size: 22px !important;
  }
}

/* ============================================================================
 * СПЕЦ. ЦЕНА — акцентная выдача позиций (IS_SPECIAL_PRICE = "Да")
 * Базовые стили бейджа (общие для списка и плитки) + акцент плиточного вида.
 * Списочный вид (table.blank-zakaza) — в techopt-list.css.
 * Карточка-обёртка плитки — div.blank-zakaza__item, внутри — .product--special.
 * ============================================================================ */

/* ---------- Бейдж "Спец цена" (общий) ---------- */
.special-price-badge {
  display: inline-block !important;
  padding: 4px 9px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: linear-gradient(135deg, #932220, #7B1B16) !important;
  border-radius: 5px !important;
  box-shadow: 0 1px 4px rgba(123, 27, 22, 0.4) !important;
  white-space: nowrap !important;
}

/* Бейдж в углу картинки (плитка) */
.special-price-badge--corner {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 5 !important;
}

/* Контейнер для абсолютного бейджа.
 * Выше (стр. ~1504) блок принудительно сбрасывает все .product__property* в
 * position:static !important (чтобы убить sticky из item_plitka/style.css).
 * Из-за этого у бейджа не было позиционированного предка и он улетал в левый
 * верхний угол страницы. Возвращаем картинке position:relative ТОЛЬКО для
 * спец-карточки, со спец-тью (0,4,2) > сброса (0,3,2). relative без смещений
 * не двигает блок и не возвращает баг со sticky. */
body div.blank-zakaza .blank-zakaza__item .product--special .product__property--image {
  position: relative !important;
}

/* ---------- Акцент карточки со спец. ценой (плитка) ---------- */
/* Рамка-обводка вокруг всей карточки (перебивает hover-тень из techopt-cards.css) */
div.blank-zakaza__item:has(.product--special),
div.blank-zakaza__item:has(.product--special):hover {
  border-color: #7B1B16 !important;
  box-shadow: 0 0 0 2px rgba(123, 27, 22, 0.25), 0 10px 24px rgba(123, 27, 22, 0.12) !important;
}

/* Оптовая (продажная) цена — бордовая и жирная */
div.blank-zakaza__item .product--special .price_item.special_price {
  color: #7B1B16 !important;
  font-weight: 800 !important;
}

/* Название товара со спец. ценой */
div.blank-zakaza__item .product--special .product__link.special_price {
  color: #7B1B16 !important;
}