:root {
    --im-layer-header-open: 2147483647;
    --im-layer-bottom-nav: 2147483647;
    --im-layer-overlay: 2147483645;
}

.im-header__logo--main svg {
    width: 220px;
    height: auto;
}

.im-header__logo--top svg {
    width: 204px;
    height: auto;
}

.im-header__logo--mobile {
    max-width: 236px;
}

.im-how-work__item-title {
    display:none !important;
}

@media (max-width: 600px) {
    .im-header__logo svg {
        width: 160px;
        height: auto;
    }
}

@media (max-width: 390px) {
    .im-header__logo--top svg {
        width: 156px;
        height: auto;
    }
}

.im-get-kp {
    height: 48px;
    background: var(--brand-600);
    color: var(--neutral-100);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: var(--font-sm-size);
    font-weight: 500;
    line-height: 150%;
    text-decoration: none;
    transition: all var(--transition-normal);
}
.im-goods__name {
    cursor: pointer;
}

.im-header__action-icon {
    position: relative;
}

.im-cart-count {
    position: absolute;
    top: -8px;
    right: -17px;
    z-index: 1;
    display: flex;
    width: 24px;
    min-width: 24px;
    height: 24px;
    padding: 2px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: var(--04, 6px);
    background: #FFDADA;
    color: #600;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    pointer-events: none;
}

.im-bottom-nav__badge.im-cart-count {
    top: -4px;
    right: -10px;
}

.im-cart-count--wide {
    width: auto;
    min-width: 28px;
}

.im-ready-solutions-page .im-goods__favorite .im-goods__favorite-fill {
    fill: transparent !important;
}

.im-ready-solutions-page .im-goods__favorite.is-active {
    background: var(--neutral-100) !important;
}

.im-ready-solutions-page .im-goods__favorite.is-active .im-goods__favorite-fill {
    fill: var(--brand-600) !important;
}

.im-ready-solutions-page .im-goods__favorite.is-active svg path:not(.im-goods__favorite-fill) {
    fill: var(--brand-600) !important;
}

.im-ready-solutions-page .im-goods__favorite.is-active:hover,
.im-ready-solutions-page .im-goods__favorite.is-active:focus-visible {
    background: var(--brand-110) !important;
}

.im-ready-solutions-page .im-goods__compare-top.is-active,
.im-ready-solutions-page .im-goods__compare-top.is-active:hover,
.im-ready-solutions-page .im-goods__compare-top.is-active:focus-visible {
    background: var(--neutral-100) !important;
}

.im-ready-solutions-page .im-goods__compare-top.is-active .im-compare-ring,
.im-ready-solutions-page .im-goods__compare-top.is-active:hover .im-compare-ring,
.im-ready-solutions-page .im-goods__compare-top.is-active:focus-visible .im-compare-ring {
    fill: none !important;
    stroke: var(--brand-500) !important;
}

@media (hover: hover) {
    .im-ready-solutions-page .im-goods__compare-top:hover {
        transform: scale(1.1) !important;
    }
}

.im-header__search .im-header__search-input.live-search-input {
    width: auto;
    min-width: 0;
    height: auto;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

.im-header__search .im-header__search-input.live-search-input::-webkit-search-cancel-button,
.im-header__search .im-header__search-input.live-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

body.im-desktop-catalog-open .im-header,
body:has(.im-desktop-catalog.is-open) .im-header {
    z-index: var(--im-layer-header-open, 2147483647) !important;
}

.im-desktop-catalog__dropdown {
    z-index: var(--im-layer-overlay, 2147483645) !important;
}

@media (max-width: 1200px) {
    body.im-desktop-catalog-open .im-header,
    body.im-mobile-menu-open .im-header,
    body.im-mobile-catalog-open .im-header,
    body.im-catalog-modal-open .im-header,
    body.fv-im-filters-open .im-header,
    body:has(.im-desktop-catalog.is-open) .im-header,
    body:has(.im-header__mobile-overlay.is-open) .im-header,
    body:has(.im-mobile-catalog.is-open) .im-header,
    body:has(.im-catalog-modal.is-open) .im-header,
    .page:has(.im-ready-solutions-page.is-filters-open) .im-header,
    .page:has(.im-catalog-page.is-filters-open) .im-header {
        z-index: var(--im-layer-header-open, 2147483647) !important;
    }

    body.fv-im-filters-open .im-bottom-nav {
        display: none !important;
        pointer-events: none !important;
    }

    .im-bottom-nav {
        display: block !important;
        z-index: var(--im-layer-bottom-nav, 2147483647) !important;
    }

    body.im-mobile-menu-open .im-bottom-nav,
    body.im-mobile-catalog-open .im-bottom-nav,
    body.im-catalog-modal-open .im-bottom-nav,
    body:has(.im-header__mobile-overlay.is-open) .im-bottom-nav,
    body:has(.im-mobile-catalog.is-open) .im-bottom-nav,
    body:has(.im-catalog-modal.is-open) .im-bottom-nav {
        z-index: var(--im-layer-bottom-nav, 2147483647) !important;
        pointer-events: auto !important;
    }

    .im-mobile-catalog,
    .im-catalog-modal,
    .im-desktop-catalog__dropdown {
        z-index: var(--im-layer-overlay, 2147483645) !important;
    }

    .im-mobile-catalog,
    .im-catalog-modal {
        top: var(--im-header-mobile-offset, 48px) !important;
    }

    .im-header__catalog--mobile {
        display: inline-flex !important;
    }

    .im-ready-solutions-page.is-filters-open .im-catalog-sidebar,
    .im-catalog-page.is-filters-open .im-catalog-sidebar,
    body.fv-im-filters-open .im-ready-solutions-page.is-filters-open .im-catalog-sidebar,
    body.fv-im-filters-open .im-catalog-page.is-filters-open .im-catalog-sidebar,
    #fv_module.fv-mobile {
        z-index: var(--im-layer-overlay, 2147483645) !important;
    }

    body.fv-im-filters-open .im-ready-solutions-page.is-filters-open .im-catalog-sidebar,
    body.fv-im-filters-open .im-catalog-page.is-filters-open .im-catalog-sidebar,
    body.fv-im-filters-open #fv_module.fv-mobile {
        top: var(--im-header-mobile-offset, 48px) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        height: calc(100dvh - var(--im-header-mobile-offset, 48px)) !important;
        max-height: calc(100dvh - var(--im-header-mobile-offset, 48px)) !important;
    }
}

@media (max-width: 1000px) {
    .im-header__catalog--mobile {
        display: none !important;
    }

    .im-bottom-nav {
        z-index: var(--im-layer-bottom-nav, 2147483647) !important;
    }

    body.im-mobile-menu-open .im-bottom-nav,
    body.im-mobile-catalog-open .im-bottom-nav,
    body.im-catalog-modal-open .im-bottom-nav,
    body:has(.im-header__mobile-overlay.is-open) .im-bottom-nav,
    body:has(.im-mobile-catalog.is-open) .im-bottom-nav,
    body:has(.im-catalog-modal.is-open) .im-bottom-nav {
        display: block !important;
        pointer-events: auto !important;
    }
}

/* catalog-card-name-3lines:start */
/* Каталог/поиск: название карточки в 3 строки + меньше шрифт.
   Scoped на сетку каталога ([data-catalog-products-grid] — только category/search),
   специфичность выше базового .im-goods__name из бандла → перекрывает clamp/шрифт. */
[data-catalog-products-grid] .im-goods__name {
    font-size: 14px;
    line-height: 140%;
    -webkit-line-clamp: 3;
}
/* catalog-card-name-3lines:end */

/* catalog-desktop-subcategories-grid:start */
/* Дропдаун «Каталог» (ПК): подкатегории ровной сеткой в порядке следования (row-major),
   карточки друг за другом слева-направо, ряды выровнены сверху. Было masonry
   (column-count) → «волна» + прыгающий порядок чтения.
   ДВА варианта разметки (гридим РЕАЛЬНЫЙ контейнер карточек в каждом):
   - главная (home.twig): контейнер = .im-desktop-catalog__subgrid (был column-count:3);
   - модуль mega_menu (прочие страницы): карточки лежат прямо в .im-desktop-catalog__subpanel.
   Фиксированные 3 колонки (дропдаун content-sized → auto-fill схлопнулся бы в 1). Десктоп-
   каталог показывается только >1200px (где 3×260 влезают); ≤1200px — мобильный каталог. */
.im-desktop-catalog__subgrid,
.im-desktop-catalog__subpanel:has(> .im-desktop-catalog__subcard) {
    display: grid;
    grid-template-columns: repeat(3, 260px);
    gap: 16px;
    column-gap: 16px;
    align-content: start;
    justify-content: start;
}
.im-desktop-catalog__subcategories .im-desktop-catalog__subcard {
    width: 100%;
    margin-bottom: 0;
}
/* catalog-desktop-subcategories-grid:end */
/* pro-badges: bottom-right + unified pills (2026-07-11-badges)
   Полный набор стилей здесь, т.к. не все page-бандлы содержат .im-goods__pro-badge*.
   global.css грузится на каждой странице → единый вид везде. */
.im-goods__pro-badges {
  position: absolute;
  top: auto;
  left: auto;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  max-width: calc(100% - 24px);
  pointer-events: none;
}
.im-goods__pro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  border-radius: 999px;
  background: var(--neutral-black);
  color: var(--neutral-100);
  font-family: var(--font-family);
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--neutral-black) 12%, transparent);
}
.im-goods__pro-badge--line {
  min-height: 24px;
  padding: 4px 11px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
}
.im-goods__image--has-pro-badges .im-goods__badge {
  top: 12px;
  bottom: auto;
}
.im-goods__pro-badge--warranty {
  flex-direction: column;
  min-width: 78px;
  min-height: 34px;
  padding: 4px 12px 5px;
}
.im-goods__pro-badge-value {
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
.im-goods__pro-badge-label {
  margin-top: 1px;
  font-weight: 400;
  font-size: 10px;
  line-height: 1;
}
/* pro-badges: раскладка по углам + шилд «В наличии» (2026-07-15-instock)
   База выше (bottom-right) остаётся у гарантии; модификаторы уводят стопку
   «В наличии»/«Хит продаж» в левый верх, «Ironmebel ПРО» — в левый низ. */
.im-goods__pro-badges--top-left {
  top: 12px;
  bottom: auto;
  left: 12px;
  right: auto;
  align-items: flex-start;
}
.im-goods__pro-badges--bottom-left {
  left: 12px;
  right: auto;
  align-items: flex-start;
}
/* Цвета и скругление шилдов.
   Селекторы с контейнером (0,2,0) — намеренно: в page-бандлах (page-ready-solutions,
   page-sklad, page-news*) лежат старые правила .im-goods__pro-badge--line (0,1,0),
   которые грузятся ПОСЛЕ global.css и ужимают только --line на мобиле. Через
   контейнер global.css становится единственным источником размера всех пилюль,
   иначе «Хит»/«В наличии»/«ПРО» снова разъедутся между собой. */

/* Скругление как у кнопки «Войти» (.im-header__login), а не пилюля */
.im-goods__pro-badges .im-goods__pro-badge {
  border-radius: 8px;
}

/* Пилюли: единый размер на всех страницах */
.im-goods__pro-badges .im-goods__pro-badge--stock,
.im-goods__pro-badges .im-goods__pro-badge--hit,
.im-goods__pro-badges .im-goods__pro-badge--line {
  min-height: 24px;
  padding: 4px 11px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
}
@media (max-width: 600px) {
  .im-goods__pro-badges .im-goods__pro-badge--stock,
  .im-goods__pro-badges .im-goods__pro-badge--hit,
  .im-goods__pro-badges .im-goods__pro-badge--line {
    min-height: 20px;
    padding: 3px 7px;
    font-size: 10px;
  }
}

/* Цвета пилюль */
.im-goods__pro-badges .im-goods__pro-badge--stock {
  background: var(--green-300);
  color: var(--green-800);
}
.im-goods__pro-badges .im-goods__pro-badge--hit {
  background: var(--blue-300);
  color: var(--blue-900);
}
/* «Ironmebel ПРО» — без подложки, просто чёрный текст.
   Горизонтальный padding снят, чтобы текст встал по той же линии, что и плашки слева. */
.im-goods__pro-badges .im-goods__pro-badge--line {
  padding-left: 0;
  padding-right: 0;
  background: none;
  color: var(--neutral-black);
  box-shadow: none;
}

/* Гарантия: обе строки одной ширины и по центру (align-items базы — center,
   из-за него строки жались по контенту и визуально не совпадали) */
.im-goods__pro-badges .im-goods__pro-badge--warranty {
  align-items: stretch;
  justify-content: center;
  gap: 2px;
}
.im-goods__pro-badges .im-goods__pro-badge--warranty-red {
  background: var(--brand-600);
}

/* Узкие карточки (мобильные 2 колонки, ~168-176px): «Ironmebel ПРО» слева и гарантия
   справа не помещаются на одной линии — поднимаем ПРО над гарантией. */
@media (max-width: 600px) {
  .im-goods__image:has(.im-goods__pro-badge--warranty) .im-goods__pro-badges--bottom-left {
    bottom: 56px;
  }
}

/* Шилды УТП карточки товара (2026-08-02-product-utp): один ряд под артикулом.
   Форма и размер общие, различаются только цвета — «В наличии» и «Хит продаж»
   повторяют плашки каталога, остальные серые. */
/* Артикул стоит вплотную к шилдам, поэтому отступ под ним меньше базового (был 28px). */
.im-product-page__meta {
  margin: 0 0 16px;
}
/* Статусные плашки над названием стоят в ряд: «В наличии» и «Хит продаж». */
.im-product-page__badges {
  min-height: 33px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.im-product-page__badge--hit {
  background: var(--blue-100);
  color: var(--blue-600);
}
.im-product-page__utp {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* Ряд держится в пределах колонки с опциями, а не тянется на всю её ширину. */
  max-width: 380px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
/* УТП категории — отдельной строкой под постоянными шилдами. */
.im-product-page__utp--category {
  margin-bottom: 16px;
}
.im-product-page__utp-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--neutral-270);
  color: var(--neutral-black);
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}
.im-product-page__utp-icon {
  flex-shrink: 0;
  /* Иконка УТП категории — произвольный файл из админки, поэтому размер задаём жёстко. */
  width: 12px;
  height: 12px;
  object-fit: contain;
}
@media (max-width: 600px) {
  .im-product-page__utp-tag {
    padding: 3px 8px;
    font-size: 10px;
  }
}

/* Приманка анти-бот защиты форм. Уводим за экран, а не display:none и не [hidden] —
   часть ботов такие поля пропускает и в ловушку не попадает. */
.im-hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Стрелки-иконки на странице тест-драйва — декор, а не кнопки. В разметке это уже <span>,
   но :hover от старых button-правил остался бы: гасим его тем же приёмом, что у .im-dealer__arrow. */
.im-test-drive-page__support-action,
.im-test-drive-page__conditions-note-action,
.im-test-drive-page__audience-action,
.im-test-drive-page__request-trigger {
  pointer-events: none;
}

/* CTA тест-драйва теперь ссылка, а не <button>, — снимаем браузерное подчёркивание. */
.im-hero__cta {
  text-decoration: none;
}

/* Липкая шапка на широких экранах. До 1200px position:sticky уже задан в теме,
   здесь только десктоп. Верхняя строка при скролле схлопывается: иначе прилипшая
   шапка занимала бы 177px высоты экрана.
   Схлопываем .im-header__top-inner, а не .im-header__top: на prod внутрь второго
   вложены ещё .im-header__main и .im-header__bottom (на dev они соседи), и правило
   по .im-header__top убрало бы на боевом всю шапку целиком.
   Высоту строки в --im-header-top-h подставляет скрипт в header.twig — без неё
   пришлось бы задавать max-height с запасом, и анимация треть времени стояла бы. */
@media (min-width: 1201px) {
  .im-header {
    position: sticky;
    top: 0;
  }

  .im-header__top {
    transition: padding 0.22s ease;
  }

  .im-header__top-inner {
    max-height: var(--im-header-top-h, 120px);
    transition: max-height 0.22s ease, opacity 0.18s ease;
  }

  /* overflow только в схлопнутом состоянии: в развёрнутом он обрезал бы выпадашку
     «О компании» — она absolute и выходит за границы строки. */
  .im-header.is-scrolled .im-header__top-inner {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
  }

  .im-header.is-scrolled .im-header__top {
    padding-top: 0;
  }

  /* Нижний отступ и разделитель гасим только там, где .im-header__top и есть
     верхняя строка. На prod это рамка всей шапки — её трогать нельзя. */
  .im-header.is-scrolled .im-header__top:not(:has(.im-header__main)) {
    padding-bottom: 0;
    border-bottom-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .im-header__top,
  .im-header__top-inner,
  .im-header__top-nav {
    transition: none;
  }
}

/* Шапка выше контента страницы, но ниже модалок (15) и нижнего меню.
   В теме --z-header=6 — ровно столько же у стрелок hero-слайдера, из-за чего
   они просвечивали сквозь прилипшую шапку. */
.im-header {
  z-index: 10;
}

/* Меню, каталог и фильтры открывались от нижней границы шапки (--im-header-mobile-offset).
   С двухстрочной шапкой это съедало 128px экрана, поэтому раскрываем их во весь экран.
   !important нужен: у части правил темы и FilterVier он уже стоит, а саму переменную
   main.js пишет инлайном в <html> и из CSS её не перебить. */
@media (max-width: 1200px) {
  .im-header__mobile-overlay,
  .im-mobile-catalog,
  .im-catalog-modal {
    top: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}

/* Панель фильтров — только там, где FilterVier сам переводит её в выдвижной режим
   (класс fv-mobile). Порог задан его настройкой width_mobil = 1200; выше он отдаёт
   фильтр обычным блоком страницы, и растягивать его на весь экран нельзя. */
@media (max-width: 1200px) {
  #fv_module.fv-mobile,
  .im-ready-solutions-page.is-filters-open .im-catalog-sidebar,
  .im-catalog-page.is-filters-open .im-catalog-sidebar {
    top: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  /* При открытых фильтрах страховка темы поднимает шапку поверх всего — это было
     верно, пока панель открывалась под шапкой. Правило там с !important и более
     специфичным селектором, поэтому меняем не z-index, а переменную, из которой
     оно берёт значение. Хук — класс страницы: body-класса в этом флоу нет. */
  html:has(.im-ready-solutions-page.is-filters-open),
  html:has(.im-catalog-page.is-filters-open) {
    --im-layer-header-open: 10;
  }
}

/* Оверлей поиска раскрыт на весь экран, а нижнее меню висит выше него и закрывает
   последний результат выдачи. !important — в global.css выше стоит безусловное
   `.im-bottom-nav { display: block !important }`; так же спрятано меню при фильтрах. */
@media (max-width: 1200px) {
  body:has(.im-header__mobile-search.is-open) .im-bottom-nav {
    display: none !important;
  }
}

/* Модалка выбора города лежит в body с z-index 5 из тематической шкалы. После подъёма
   шапки до 10 та стала протыкать затемнение и оставалась кликабельной поверх модалки. */
.im-city-modal {
  z-index: var(--im-layer-overlay, 2147483645);
}

/* Якоря и переходы по хешу иначе уезжают под прилипшую шапку. */
html {
  scroll-padding-top: var(--im-header-h, 130px);
}

/* FilterVier держит колонку фильтра на z-index 80 и перекрывал ею прилипшую шапку
   на страницах каталога. У модуля для этого есть своя переменная (используется в
   `#fv_module .fv-container` и нигде не задана) — крутим её, а не переопределяем
   чужой селектор с id. Задаём и на #fv_container: модуль переопределяет её там же.
   На широких экранах колонка статична, ей достаточно быть выше
   контента (в теме он ≤ 6); мобильную выдвижную панель не трогаем — ей перекрывать
   шапку положено. */
@media (min-width: 1201px) {
  #fv_module,
  #fv_container {
    --fv-main-zindex: 7;
  }
}

/* FilterVier не пересчитывает свой мобильный режим при изменении ширины окна:
   класс fv-mobile, полученный на узком экране, остаётся, и выдвижная панель
   продолжает висеть поверх шапки. Выше его порога возвращаем её в поток страницы. */
@media (min-width: 1201px) {
  #fv_module.fv-mobile {
    position: static !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* Цельная шапка без белых зазоров: .page даёт padding (16px на десктопе, 8px до
   1200px), гасим его отрицательными отступами и снимаем скругление снизу. */
.im-header {
  width: auto;
  margin-top: -16px;
  margin-left: -16px;
  margin-right: -16px;
  border-radius: 0;
}

@media (max-width: 1200px) {
  .im-header {
    margin-top: -8px;
    margin-left: -8px;
    margin-right: -8px;
  }

  /* Мобильная шапка в две строки: сверху ссылки, ниже логотип + поиск + звонок. */
  .im-header__top-inner {
    flex-wrap: wrap;
  }

  /* Строка ссылок. Отрицательные отступы гасят padding .im-header__top, чтобы
     пункты обрезались ровно по краю экрана — так видно, что строку можно промотать. */
  .im-header__top-nav {
    display: flex;
    order: -1;
    width: 100%;
    margin: 0 -12px 8px;
    padding: 0 12px 2px;
    gap: 18px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    max-height: var(--im-header-nav-h, 40px);
    transition: max-height 0.22s ease, opacity 0.18s ease, margin-bottom 0.22s ease;
  }

  .im-header__top-nav::-webkit-scrollbar {
    display: none;
  }

  /* На 360px тема сужает padding .im-header__top до 8px — минус 12px давал бы
     горизонтальную прокрутку страницы. */
  @media (max-width: 360px) {
    .im-header__top-nav {
      margin: 0 -8px 8px;
      padding: 0 8px 2px;
    }
  }

  .im-header__top-nav .im-header__top-link {
    white-space: nowrap;
  }

  /* Меню «О компании» — fixed, иначе его обрежет overflow прокручиваемой строки:
     у скроллящегося по горизонтали контейнера вторая ось тоже становится clip.
     Высоту шапки для отступа сверху публикует скрипт в header.twig. */
  .im-header__top-nav .im-header__top-dropdown-menu {
    position: fixed;
    top: var(--im-header-h, 128px);
    left: 8px;
    max-height: calc(100vh - var(--im-header-h, 128px) - 24px);
    overflow-y: auto;
  }

  .im-header.is-scrolled .im-header__top-nav {
    max-height: 0;
    margin-bottom: 0;
    /* border-box не даёт схлопнуться ниже padding — гасим и его, иначе остаётся полоска. */
    padding-bottom: 0;
    opacity: 0;
    /* Меню «О компании» внутри — fixed, его не режет overflow строки, а opacity:0
       клики не отключает. Без этого под шапкой висела бы невидимая ловушка тапов. */
    pointer-events: none;
  }

  /* display:contents распускает обёртки, чтобы логотип, звонок и поиск стали
     элементами одного flex-контейнера — иначе поиск не вынести на отдельный ряд. */
  .im-header__top-mobile,
  .im-header__top-mobile .im-header__mobile-actions {
    display: contents;
  }

  .im-header__logo--top {
    order: 1;
  }

  .im-header__top-mobile .im-header__mobile-action--call {
    order: 2;
    flex: 0 0 auto;
  }

  /* Поиск полем во всю ширину отдельной строкой. Кнопка та же, обработчик прежний —
     открывает существующий оверлей поиска. */
  .im-header__top-mobile .im-header__mobile-action--search {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    height: 36px;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--neutral-200);
  }

  .im-header__top-mobile .im-header__mobile-search-label {
    overflow: hidden;
    color: var(--neutral-450);
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* На десктопе строка ссылок живёт внутри .im-header__top и схлопывается вместе с ней. */
@media (min-width: 1201px) {
  .im-header__mobile-search-label {
    display: none;
  }
}

/* Фильтр каталога до 1200px — выдвижной панелью, а не раскрытым блоком страницы.
   Тема переводила его в панель только до 768px; в 769–1200 колонка фильтра стояла
   в потоке во всю ширину и отжимала выдачу вниз. Порог 1200 совпадает с настройкой
   FilterVier width_mobil и с isMobile() фильтров в ready-solutions.js — все три
   должны меняться вместе, иначе панель повиснет открытой и её нечем будет закрыть. */
@media (min-width: 769px) and (max-width: 1200px) {
  /* Выше 1100 тема ещё держит двухколоночную сетку с местом под фильтр. */
  .im-ready-solutions-page__layout {
    grid-template-columns: 1fr;
  }

  /* Кнопка «Фильтры» и сортировка — одной строкой. Тулбар у темы колоночный:
     двумя строками он занимал двойную высоту при пустой правой части.
     Мобильную выпадашку сортировки прячем — её нижний лист свёрстан до 768px,
     в этом диапазоне работает десктопная. */
  .im-ready-solutions-page .im-catalog-toolbar {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .im-ready-solutions-page .im-catalog-toolbar__mobile-row {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
  }

  .im-ready-solutions-page .im-catalog-toolbar__mobile-sort-dropdown {
    display: none;
  }

  /* Отступ темы разводил строки тулбара по вертикали — внутри одной строки лишний. */
  .im-ready-solutions-page .im-catalog-toolbar__filters {
    padding-top: 0;
  }

  /* «Фильтры» — таким же контролом, как сортировка рядом: у темы это голый текст
     без фона, и в паре с кнопкой сортировки он читался бы подписью, а не кнопкой. */
  .im-ready-solutions-page .im-catalog-toolbar__mobile-filters {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--neutral-200);
    font-weight: 500;
    font-size: var(--font-base-size);
    line-height: 125%;
    color: var(--neutral-800);
  }

  .im-ready-solutions-page .im-catalog-toolbar__mobile-filters:hover {
    background: var(--neutral-260);
  }

  .im-ready-solutions-page .im-catalog-toolbar__mobile-filters-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  /* Счётчик выбранных фильтров: своих правил выше 768px у него нет,
     без них он выходит голой цифрой рядом с текстом. */
  .im-ready-solutions-page .im-catalog-toolbar__mobile-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 22px;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--brand-200);
    font-weight: 500;
    font-size: var(--font-sm-size);
    line-height: 114%;
    color: var(--brand-900);
  }

  .im-ready-solutions-page .im-catalog-toolbar__sort {
    min-height: 44px;
    padding: 10px 16px;
    font-size: var(--font-base-size);
  }

  /* Пока фильтр закрыт, панели не должно быть вообще. #fv_module внутри —
     position: fixed без медиазапроса, и display:none у родителя его
     единственное укрытие: иначе он висит поверх страницы и не закрывается. */
  .im-ready-solutions-page .im-catalog-sidebar {
    position: static;
    display: none;
  }

  /* Открытая панель — во весь экран, как её разворачивает body.fv-im-filters-open
     в мобильном режиме FilterVier. width обязателен: ниже 1100 тема задаёт
     колонке width:100%, и у fixed-элемента это ширина окна, а не inset. */
  .im-ready-solutions-page.is-filters-open .im-catalog-sidebar {
    position: fixed;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 2147483646;
  }

  .im-ready-solutions-page.is-filters-open .im-catalog-sidebar__panel {
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Затемнение с кликом «мимо панели». В мобильном режиме FilterVier его гасит
     собственное правило: там панель занимает экран целиком и мимо не кликнуть. */
  .im-ready-solutions-page.is-filters-open .im-catalog-sidebar-backdrop {
    position: fixed;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-modal, 1000);
  }
}

/* Кнопку «Фильтры» шаблон рендерит всегда: FilterVier обновляет каталог
   AJAX-запросом, в его ответе column_left пуст, и вместе с ним из подменяемого
   .im-catalog-content пропадала кнопка. Прячем её там, где фильтра и правда
   нет: класс --no-sidebar стоит на .im-ready-solutions-page__layout, а он в
   подмену не попадает. !important — тема включает кнопку из медиазапроса
   таким же по весу селектором. */
.im-ready-solutions-page__layout--no-sidebar .im-catalog-toolbar__mobile-filters {
  display: none !important;
}

/* Кнопка «Наверх». Слой 19 — под мобильной нижней панелью (20) и модалками,
   чтобы не перехватывать у них клики. */
.im-scroll-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 19;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--neutral-900, #111);
  color: var(--neutral-100, #fff);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

.im-scroll-top[hidden] {
  display: none;
}

.im-scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.im-scroll-top:hover {
  background: var(--brand-600, #c80400);
}

.im-scroll-top:focus-visible {
  outline: 2px solid var(--brand-600, #c80400);
  outline-offset: 3px;
}

/* Пока открыты меню, фильтры, корзинное подтверждение или модалка —
   кнопке на экране не место. */
body.im-mobile-menu-open .im-scroll-top,
body.im-mobile-catalog-open .im-scroll-top,
body.im-cart-confirm-open .im-scroll-top,
body.fv-im-filters-open .im-scroll-top {
  display: none;
}

/* На узких экранах снизу висит панель навигации — поднимаем кнопку над ней. */
@media (max-width: 1200px) {
  .im-scroll-top {
    right: 12px;
    /* Высоту нижней панели подставляет скрипт: на карточке товара она выше
       обычной из-за кнопки «В корзину», и фиксированный отступ прятал кнопку. */
    bottom: calc(var(--im-bottom-nav-h, 69px) + 16px + env(safe-area-inset-bottom));
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .im-scroll-top {
    transition: none;
  }
}

/* [hidden] у значка перебивался авторским display:flex — возвращаем ему смысл,
   иначе пустой счётчик показывает ноль. */
.im-cart-count[hidden] {
  display: none;
}

@media (max-width: 600px), (hover: none), (pointer: coarse) {
  .im-ready-solutions-page .im-goods__card:not(.is-actions-open) .im-goods__favorite,
  .im-ready-solutions-page .im-goods__card:not(.is-actions-open) .im-goods__compare-top,
  .im-ready-solutions-page .im-goods__card:not(.is-actions-open) .im-goods__cart {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Keep shared action states above the legacy page-specific overrides. */
@layer im-action-icons {
  .im-header .im-cart-count {
    top: -8px !important;
    right: -13px !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 12px !important;
  }

  .im-header .im-cart-count--wide {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
  }

  .im-goods__card :is(.im-goods__favorite, .im-goods__compare-top) {
    background: var(--neutral-100) !important;
    color: var(--neutral-600) !important;
    transform: none !important;
    transition: opacity 160ms ease, visibility 160ms ease, color 160ms ease !important;
  }

  .im-goods__card :is(.im-goods__favorite, .im-goods__compare-top):is(.is-active, [aria-pressed="true"], :hover, :focus-visible) {
    color: var(--brand-600) !important;
  }

  .im-goods__card .im-goods__favorite :is(.im-goods__favorite-fill, .im-heart-fill) {
    display: none !important;
  }

  /* The native hollow heart is a compound fill path, not a stroked silhouette. */
  .im-goods__card .im-goods__favorite svg path:not(.im-goods__favorite-fill):not(.im-heart-fill) {
    opacity: 1 !important;
    fill: currentColor !important;
    stroke: none !important;
    transition: none !important;
  }

  .im-goods__card .im-goods__compare-top .im-compare-ring {
    fill: none !important;
    stroke: currentColor !important;
    transition: none !important;
  }

  /* Some related-product cards use native hollow compound paths for comparison. */
  .im-goods__card .im-goods__compare-top svg path {
    fill: currentColor !important;
    stroke: none !important;
    transition: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .im-goods__card :is(.im-goods__favorite, .im-goods__compare-top) {
      transition: none !important;
    }
  }
}

/* Normalize only the new card SVGs; retain the complete 070 stylesheet for cached markup. */
@layer im-action-icons {
  .im-goods__card .im-card-action-icon {
    --im-card-action-stroke-width: 1.5;
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: var(--im-card-action-stroke-width, 1.5) !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .im-goods__card .im-card-action-icon :is(path, circle) {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: var(--im-card-action-stroke-width, 1.5) !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 1 !important;
    transition: none !important;
  }

  @media (max-width: 600px) {
    .im-goods__card .im-card-action-icon {
      width: 13px !important;
      height: 13px !important;
    }
  }

}