/*
 * Шапка и подвал: приведение типографики к одной шкале.
 *
 * Гарнитура на витрине одна (Open Sans), но исходная тема набирала верхнюю
 * строку четырьмя разными способами сразу: 15/700 у телефона, 13.005/400 у
 * «Заказать звонок», 13.86/500 у слогана и адрес чистым #ff0000 инлайном.
 * Дробные размеры — след относительных единиц, наложенных друг на друга.
 * Глазу это читается как «набрано четырьмя шрифтами», хотя шрифт один.
 *
 * Здесь одна шкала: 13px для служебных ссылок верхней строки, 14px для
 * телефона (он якорь), один вес на роль и три цвета вместо пяти.
 */

/* --- Верхняя строка -------------------------------------------------------- */

.top-block .top-block-item,
.top-block .top-block-item a,
.top-block .callback-block,
.top-block .top-btn {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #555;
}

/*
 * Телефон и «Заказать звонок» — РАЗНЫЕ вещи, и выглядеть должны по-разному.
 *
 * Обе ссылки лежат внутри `.phone-block`, поэтому правило телефона накрывало и
 * кнопку звонка: обе получались 14px/700/#222 и читались как один акцент, хотя
 * телефон — это контакт, а «Заказать звонок» — действие. Разводим по ролям:
 * номер крупнее и жирнее (он якорь верхней строки), запрос звонка — обычным
 * весом и приглушённым цветом, с пунктиром, каким на сайтах помечают «нажми».
 */
.top-block .phone-block a[href^="tel"] {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: #1d2029;
    letter-spacing: .01em;
    transition: color .18s ease;
}

.top-block .phone-block a[href^="tel"]:hover {
    color: #bd1c3c;
}

.top-block .phone-block .callback-block,
.top-block .callback-block {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #666;
    text-decoration: none;
    border-bottom: 1px dashed rgba(102, 102, 102, .5);
    padding-bottom: 1px;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease;
}

.top-block .phone-block .callback-block:hover,
.top-block .callback-block:hover {
    color: #bd1c3c;
    border-bottom-color: rgba(189, 28, 60, .55);
}

/* Мобильное меню: там «Заказать звонок» — пункт списка, пунктир под ним лишний. */
.mobile_menu .callback,
.mobilemenu .callback {
    border-bottom: 0;
}

/*
 * Адрес. Владелец просил его выделить, и это разумно — магазин один, адрес
 * важен. Но чистый #ff0000 полужирным кричит громче логотипа и спорит с
 * фирменным малиновым. Берём фирменный цвет и обычный вес: заметно, но не
 * навязчиво.
 */
.sofa-address {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #bd1c3c;
    text-transform: none;
    letter-spacing: 0;
}

/*
 * Шкала размеров в шапке. Их должно быть три, а не пять.
 *
 * Замер по всей шапке показал разнобой: 16/700 у телефона, 13/400 у служебных
 * ссылок, 13/700 у заголовков колонок меню, 14/400 у пунктов подменю услуг и
 * 13.858/500 у слогана — дробное значение приезжает из относительных единиц,
 * наложенных друг на друга. Разными размерами набраны вещи одного уровня, и
 * шапка читается как «четыре шрифта», хотя гарнитура одна.
 *
 * Шкала теперь ОДНА: 14px на всю шапку. Владелец дважды возвращал задачу —
 * даже сведённые к двум ступеням (16px телефон / 13px остальное) размеры читались
 * как разные шрифты. Роли различаются весом и цветом: телефон — 700 и тёмный,
 * служебные ссылки — 400 и серые, слоган — 500 и светло-серый. Размер один,
 * иерархия есть.
 */

/* Слоган у логотипа — вспомогательный текст, а не второй заголовок.
   В разметке источника это `<h6>` внутри `.top-description`, а не `.slogan`:
   заголовочный тег и давал дробный 13.858px (0.923em от 15px), выбиваясь из
   шкалы. Поэтому селектор перечисляет оба варианта. */
.logo_and_menu-row .slogan,
#header .slogan,
.top-description h6,
#header .top-description h6 {
    font-size: 14px !important;
    margin: 0;
    font-weight: 500;
    line-height: 18px;
    color: #999;
}

/* Пункты выпадающих меню — служебный уровень, как и остальные ссылки шапки.
   Часть из них шла 14px/#222, часть 13px/#666: один и тот же список выглядел
   набранным по-разному в зависимости от того, из какого раздела он раскрыт. */
#header .dropdown-menu a,
#header .mega-menu .dropdown-menu li a,
.menu-row .mega-menu .dropdown-menu a {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #555;
}

#header .dropdown-menu a:hover,
.menu-row .mega-menu .dropdown-menu a:hover {
    color: #bd1c3c;
}

/*
 * Мегаменю каталога: родитель отличается от подпунктов.
 *
 * Правило выше выравнивает ВСЕ ссылки выпадающих меню в один служебный
 * набор — 14px/400/#555. В мегаменю из-за этого раздел и его подкатегории
 * читались одинаково, и иерархия пропадала (владелец, п.18). Родителю
 * возвращаем вес и тёмный цвет, подпункты сдвигаем и делаем светлее —
 * тогда список читается как «раздел → что внутри».
 */
/* Признак текстовой ссылки родителя — `.name` внутри: у второй ссылки того же
   пункта (кадр раздела) его нет. Структурнее и надёжнее, чем `:has()`. */
.menu-row .mega-menu .dropdown-menu li.parent-items > a > .name {
    font-weight: 700;
    font-size: 15px;
    color: #1d2029;
}
.menu-row .mega-menu .dropdown-menu li.parent-items > a:hover > .name {
    color: #bd1c3c;
}
/* Подпункты — на тон светлее родителя, с аккуратным круглым буллетом.
   Раньше ступень давали внешним отступом пункта (margin-left:12px) поверх
   темного `padding-left:20px !important` ссылки — сдвиг выходил двойным (32px),
   провал слева бросался в глаза (жалоба владельца). Убираем margin, а иерархию
   держит маркер: он вписан в те же 20px темы, поэтому с темой не воюем. */
.menu-row .mega-menu .dropdown-menu li.parent-items > ul.dropdown-menu > li {
    margin-left: 0;
}
.menu-row .mega-menu .dropdown-menu li.parent-items > ul.dropdown-menu > li > a {
    position: relative;
}
.menu-row .mega-menu .dropdown-menu li.parent-items > ul.dropdown-menu > li > a::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2px;
    border-radius: 50%;
    background: #c9ccd4;
    transition: background 0.16s ease;
}
.menu-row .mega-menu .dropdown-menu li.parent-items > ul.dropdown-menu > li > a:hover::before {
    background: #bd1c3c;
}
/* Цвет подпунктам не переопределяем: служебный #555 из правила выше уже
   контрастирует с тёмным родителем, а свои `color` тема держит с !important. */
/* Отбивка «шапка раздела → его список»: 6px после родителя вместо слипшихся строк. */
.menu-row .mega-menu .dropdown-menu li.parent-items > ul.dropdown-menu {
    margin-top: 6px;
}
/*
 * Картинка раздела была выше первой строки текста на 7px (замер: img top 178,
 * ссылка родителя 185) — колонка выглядела сдвинутой. Выравниваем по верху
 * строки: у ссылки родителя есть свой padding-top 2px, столько же даём кадру.
 */
.menu-row .mega-menu .dropdown-menu li.parent-items .menu_img {
    margin-top: 7px;
}
/*
 * Плитки разделов шли фиксированной ширины (60px), но высотой в натуральный
 * аспект картинки 1С — у каждого раздела своя (30–43px). Из-за этого текст
 * соседних разделов в сетке (TASK-57) стоял на разной высоте, а сами плитки
 * выглядели вразнобой. Фиксируем единый кадр 60×44 с обрезкой по центру:
 * плитки одинаковы, «плитка + сетка» выровнены (задача владельца — п.6).
 */
.menu-row .mega-menu .dropdown-menu li.parent-items .menu_img img {
    display: block;
    width: 60px;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
}

/* Поиск и «Войти» в одной строке с телефоном — тот же служебный размер. */
#header .search-block .search-input,
#header .personal-link,
#header .top-btn {
    font-size: 14px;
    font-weight: 400;
}

/*
 * …и тот же отклик, что у иконок корзины и избранного. Раньше «Войти» и «Поиск»
 * не реагировали на наведение вовсе: единственные мёртвые элементы в шапке, где
 * всё остальное подсвечивается фирменным (замечание владельца 2026-08-26).
 *
 * Иконки у них — вставленный SVG, и заливка задана ВНУТРИ него отдельным
 * `<style>` с жёстким `fill:#222` (наследие выгрузки темы). Наследование цвета
 * туда не доходит, поэтому перекрашиваем сами фигуры — иначе текст краснел, а
 * значок оставался серым.
 */
#header .personal-link,
#header .top-btn.inline-search-show {
    transition: color .18s ease;
}

#header .personal-link:hover,
#header .personal-link:focus-visible,
#header .top-btn.inline-search-show:hover,
#header .top-btn.inline-search-show:focus-visible {
    color: #bd1c3c;
}

#header .personal-link svg path,
#header .personal-link svg polygon,
#header .top-btn.inline-search-show svg path,
#header .top-btn.inline-search-show svg polygon {
    transition: fill .18s ease;
}

#header .personal-link:hover svg path,
#header .personal-link:hover svg polygon,
#header .top-btn.inline-search-show:hover svg path,
#header .top-btn.inline-search-show:hover svg polygon {
    fill: #bd1c3c;
}

#header .personal-link:active,
#header .top-btn.inline-search-show:active {
    color: #a81834;
}

/* --- Подвал ---------------------------------------------------------------- */

/*
 * В контактах подвала телефон и почта набраны тёмным, а адрес был красным —
 * из-за этого он выпадал из колонки и тянул на себя внимание сильнее, чем
 * телефон. Уравниваем со соседями: выделение остаётся в шапке.
 */
#footer .address .sofa-address,
#footer .contact-block .sofa-address {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #222;
}

@media (max-width: 767px) {
    /* Подвал на телефоне (TASK-55): пять блоков в столбик давали 1135px — почти
       полтора экрана до телефона магазина. Уплотняем навигацию и поднимаем
       контакты выше формы подписки: до них доходят чаще. Правила только для
       мобильной ширины, десктопная раскладка (col-md-*) не трогается. */
    /* Две колонки через CSS-колонки, а не grid/flex: Bootstrap-колонки Aspro несут
       float и фикс-ширины, из-за которых grid ронял группы вразнобой (пустая
       ячейка сверху). column-count раскладывает группы ровно, break-inside:avoid
       не даёт разорвать группу между колонками. */
    #footer .bottom-middle .col-md-7 > .row {
        column-count: 2;
        column-gap: 18px;
    }
    #footer .bottom-middle .col-md-7 > .row > [class*="col-"] {
        float: none;
        width: auto;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }
    #footer .bottom-menu { margin-bottom: 4px; }
    #footer .bottom-menu .item { margin-bottom: 4px; }
    #footer .bottom-menu .title { margin-bottom: 6px; }
    /* Контакты (телефон, адрес) — над формой подписки. В разметке блок контактов
       идёт вторым; поднимаем его флекс-порядком, разметку не трогаем. */
    #footer .bottom-middle .col-md-5 > .row {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    #footer .bottom-middle .col-md-5 > .row > *:last-child { order: -1; }
    /* Контакты и подписка в одну линию с колонками меню: у их внутренних колонок
       Bootstrap-паддинг 15px сдвигал блок вправо (33px против 18px у меню). Обнуляем,
       как у col-md-7 — весь подвал выровнен по левому краю (порядок в подвале). */
    #footer .bottom-middle .col-md-5 > .row > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Крупные вертикальные отступы подвала рассчитаны на десктоп — на телефоне
       сжимаем, чтобы до контактов и копирайта не приходилось листать лишний экран. */
    #footer .bottom-middle { padding-top: 20px; padding-bottom: 18px; }
    #footer .bottom-middle .col-md-7 { margin-bottom: 8px; }
    #footer .bottom-under { padding-top: 14px; padding-bottom: 14px; }
    #footer .bottom-under .row { row-gap: 10px; }

    /* ВЛЕВО, а не по центру: центрованные колонки подвала «разъезжались» и читались
       рыхло (замечание владельца — хочется собраннее). Выравниваем содержимое по
       левому краю — компоновка выглядит аккуратной и осмысленной. */
    #footer .bottom-middle,
    #footer .bottom-middle .col-md-7,
    #footer .bottom-middle .col-md-7 .title,
    #footer .bottom-middle .col-md-7 .item,
    #footer .bottom-middle .col-md-7 a,
    #footer .bottom-middle .col-md-5,
    #footer .bottom-middle .col-md-5 .title,
    #footer .contact-block,
    #footer .subscribe-block-wrapper,
    #footer .bottom-under { text-align: left !important; }
    /* Иконки/значения контактов не центруем в строке. */
    #footer .contact-block .item,
    #footer .contact-block .value { justify-content: flex-start; }
    /* Отступ от краёв экрана: после выравнивания влево текст прилипал к самому
       краю (замечание владельца). Даём подвалу боковые поля. */
    #footer .bottom-middle,
    #footer .bottom-under { padding-left: 18px !important; padding-right: 18px !important; }
    #footer .bottom-middle > .maxwidth-theme,
    #footer .bottom-under > .maxwidth-theme { padding-left: 0; padding-right: 0; }
}

/* --- Корзина и избранное в шапке (TASK-42) ---------------------------------
 *
 * Пришли на смену плавающей плашке у правого края. Правил её оформления здесь
 * больше нет — блок удалён из разметки вместе с режимом темы `basket_fly`.
 *
 * Три места, один вид: правый край строки меню, залипшая шапка и мобильная.
 * Отличаются только размером — в залипшей шапке строка ниже, на телефоне иконка
 * должна попадать под палец.
 *
 * Классы удвоены (`.sofa-shopicon.sofa-shopicon`) там, где спорят с ядровым
 * `.m-cart`: этот класс скрипт вешает на ВИДИМУЮ иконку (см. shell.php), а
 * порядок подключения проектных файлов между собой не гарантирован.
 */
.sofa-shopicons{display:flex;align-items:center;justify-content:flex-end;gap:2px;line-height:0}

.sofa-shopicon.sofa-shopicon{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;color:#222;text-decoration:none;
  transition:color .18s ease,background-color .18s ease}
/* `fill-rule:evenodd` — обязательное: у сердца и тележки контур нарисован двумя
 * вложенными путями, и без этого правила внутренний вырез заливается — сердце
 * превращалось в чёрное пятно. В исходной теме оно приходило из <style> внутри
 * самого <svg>, здесь разметка чистая и правило живёт в CSS. */
.sofa-shopicon svg{width:21px;height:21px;display:block;fill:currentColor;fill-rule:evenodd}
/* Ховер под стекло: плотный #f7f7f7 на полупрозрачной панели читался белым
   пятном, вырезанным из подложки. Полупрозрачная тёмная подсветка ложится на
   любой фон — и на стекле, и на плотной шапке до прокрутки. Скругление мягкое:
   квадрат заливки на круглых иконках выглядел заплаткой. */
.sofa-shopicon:hover,.sofa-shopicon:focus-visible{color:#bd1c3c;background:rgba(17,17,17,.06);border-radius:10px}
.sofa-shopicon:active{color:#a81834}

/* Счётчик. Кружок — единственное скругление в этой шапке, и оно оправдано
 * формой: число в круге читается как счётчик, а не как ярлык. Обводка
 * отделяет его от контура иконки, когда цифра ложится на линию тележки:
 * полупрозрачная, чтобы на стеклянной шапке не выглядеть белым кольцом. */
.sofa-shopicon-n{position:absolute;top:3px;right:1px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:#bd1c3c;color:#fff;
  font:700 10px/16px "Open Sans",Arial,Helvetica,sans-serif;text-align:center;
  box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.sofa-shopicon-n[hidden]{display:none}

/* Ячейка в строке меню: своей ширины ровно по иконкам, чтобы пункты меню
 * распределялись по остатку, а не сжимались все разом. Тонкая линия слева
 * отделяет действия от разделов — иначе тележка читается как пятый пункт. */
.sofa-shopicons-cell{width:1%;white-space:nowrap;text-align:right;vertical-align:middle;padding:0}
.sofa-shopicons--menu{padding-left:14px;margin-left:10px;position:relative}
.sofa-shopicons--menu:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:24px;background:#e6e6e6}

/* Залипшая шапка: строка ниже обычной, иконки тоже. */
/* Размер svg тот же, что у кабинета и поиска рядом (21px у исходной темы):
 * четыре иконки в одну строку должны читаться одним набором, а не двумя. */
.sofa-shopicons--fixed .sofa-shopicon.sofa-shopicon{width:40px;height:40px}
.sofa-shopicons--fixed .sofa-shopicon-n{top:0;right:-1px}
.sofa-shopicons-block{vertical-align:middle}

/* Мобильная шапка: цель под палец — 44px, и никакого фона на hover (на таче он
 * залипает после тапа). */
.sofa-shopicons--mobile{gap:0}
.sofa-shopicons--mobile .sofa-shopicon.sofa-shopicon{width:44px;height:44px}
.sofa-shopicons--mobile .sofa-shopicon:hover{background:none}
.sofa-shopicons--mobile .sofa-shopicon-n{top:5px;right:3px}

/* На узком десктопе (992–1199) строка меню теснее: пунктов четыре, и лишние
 * 20px разделителя отбирают место у «КОНТАКТЫ». */
@media (min-width:992px) and (max-width:1199px){
  .sofa-shopicons--menu{padding-left:10px;margin-left:4px}
  .sofa-shopicons--menu .sofa-shopicon.sofa-shopicon{width:38px;height:38px}
}


/* --- Строка меню: компактная группа у правого края (просьба владельца) -----
 *
 * Тема раскладывает пункты таблицей во всю ширину колонки, поэтому между
 * «КАТАЛОГ» и «УСЛУГИ» получалось 95–105px пустоты — четыре слова, размазанные
 * по 830px. Ширину таблице отдаём по содержимому и прижимаем вправо: пункты
 * собираются в группу и заканчиваются там же, где иконки корзины и избранного,
 * а слева остаётся воздух под логотип и слоган.
 *
 * Ячейкам ширина `auto` нужна отдельно: у темы на них проценты, и без сброса
 * таблица шириной по содержимому всё равно тянула бы их до прежних размеров.
 */
.logo_and_menu-row .mega-menu .table-menu table,
#headerfixed .mega-menu .table-menu table{width:auto;margin-left:auto}
.logo_and_menu-row .mega-menu .table-menu td,
#headerfixed .mega-menu .table-menu td{width:auto}
/* Шаг между пунктами — 32px (16+16). Меньше делает из меню сплошную строку:
 * заглавные буквы без межсловных пробелов читаются как одно длинное слово. */
.logo_and_menu-row .mega-menu .table-menu td.menu-item > .wrap > a,
#headerfixed .mega-menu .table-menu td.menu-item > .wrap > a{padding-left:16px;padding-right:16px}

/* --- Залипшая шапка: четыре иконки одним рядом ----------------------------
 *
 * До этого справа стояли три блока с разной внутренней геометрией: наши иконки
 * по 40px вплотную, кабинет — иконка 21px в блоке 80px, поиск — 30px в блоке
 * 80px. Шаг между центрами шёл 42 → 60 → 80px, и ряд выглядел рассыпанным.
 * Приводим все четыре к одному размеру и одному зазору.
 */
/* Ширину 80px задаёт не сама ячейка, а обёртка `.wrap_icon` внутри неё —
 * поэтому сбрасываем оба уровня, иначе ряд снова расходится шагом 44/60/80. */
#headerfixed .inner-table-block.small-block,
#headerfixed .inner-table-block.small-block .wrap_icon,
#headerfixed .inner-table-block.small-block.inline-search-show{width:auto;min-width:0}
#headerfixed .wrap_cabinet .personal-link,
#headerfixed .inline-search-show .search-block{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;margin:0}
#headerfixed .wrap_cabinet .personal-link i.svg,
#headerfixed .inline-search-show .search-block i.svg{margin:0}
/* Кабинет и поиск — из темы, и ховер им красит она же: белым фоном, который на
   стекле выглядит инородной плашкой (замечание владельца). Приводим весь ряд к
   одной подсветке. */
#headerfixed .wrap_cabinet .personal-link,
#headerfixed .inline-search-show .search-block,
#mobileheader .right-icons .personal-link,
#mobileheader .right-icons .search-block { border-radius: 10px; transition: background-color .16s ease, color .16s ease; }
#headerfixed .wrap_cabinet .personal-link:hover,
#headerfixed .inline-search-show .search-block:hover,
#mobileheader .right-icons .personal-link:hover,
#mobileheader .right-icons .search-block:hover { background: rgba(17,17,17,.06) !important; color: #bd1c3c; }
/*
 * Лупа рисовалась не иконкой, а «маской» темы: сплошным белым квадратом 21×21
 * (`Search_big_mask.svg`) с вырезанной по evenodd формой, сквозь которую
 * просвечивал `background-color:#222`. На белой шапке оригинала подмена
 * незаметна — квадрат сливается с фоном. Наша шапка стеклянная
 * (`rgba(255,255,255,.78)` + blur), сквозь неё идёт контент, и непрозрачный
 * белый квадрат читается плашкой под иконкой (замечание владельца, повторное:
 * прошлый раз я убрал только белый фон ховера, а сама иконка так и осталась
 * плашкой).
 *
 * Рисуем форму маской CSS: подложки нет вовсе, а цвет иконки становится
 * обычным `background-color` — то есть управляемым, и на ховере она красится
 * фирменным заодно с соседями по ряду. Глиф — inline data-URI: путь к файлу из
 * версионного `/site/_v/<хеш>/assets/…` не разрешается (проверено — 404), а
 * абсолютный оставил бы иконку без сброса кэша.
 */
:root {
  --sofa-glyph-search: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='1570%20111%2021%2021'%3E%3Cpath%20fill-rule='evenodd'%20d='M1590.71,131.709a1,1,0,0,1-1.42,0l-4.68-4.677a9.069,9.069,0,1,1,1.42-1.427l4.68,4.678A1,1,0,0,1,1590.71,131.709ZM1579,113a7,7,0,1,0,7,7A7,7,0,0,0,1579,113Z'/%3E%3C/svg%3E");
}
.search-block i.svg.svg-search,
#headerfixed .inline-search-show .search-block i.svg.svg-search {
  background-image: none;
  background-color: #222;
  -webkit-mask: var(--sofa-glyph-search) center / 21px 21px no-repeat;
  mask: var(--sofa-glyph-search) center / 21px 21px no-repeat;
  transition: background-color .18s ease;
}
#headerfixed .inline-search-show .search-block:hover i.svg.svg-search,
#mobileheader .right-icons .search-block:hover i.svg.svg-search {
  background-color: #bd1c3c;
}

/* Зазор между иконками одинаковый по всему ряду: свои две держит gap группы,
 * кабинет и поиск — отступом блока. */
.sofa-shopicons--fixed{gap:4px}
#headerfixed .inner-table-block.small-block + .inner-table-block.small-block{padding-left:4px}


/* --- Мобильное меню -------------------------------------------------------
 *
 * Панель была плоским списком из одиннадцати пунктов одного кегля: разделы
 * каталога, «Личный кабинет», «Корзина0» с неживым нулём и тут же телефон,
 * почта и адрес. Ни группировки, ни способа закрыть панель, кроме тапа по
 * затемнению. Здесь — три ясные части и шапка с крестиком.
 */
.sofa-mmenu-head{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid #ededed;background:#fff}
/* Прокручиваемая часть — под шапкой, а не под краем панели. */
#mobilemenu .scroller{max-height:calc(100% - 66px)}

.sofa-mmenu-logo img{display:block;height:26px;width:auto}
.sofa-mmenu-x{
  flex:0 0 auto;width:36px;height:36px;padding:0;border:0;background:none;color:#8b8b8b;
  display:grid;place-items:center;cursor:pointer;transition:color .16s ease}
.sofa-mmenu-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.sofa-mmenu-x:hover,.sofa-mmenu-x:active{color:#bd1c3c}

/* Разделы — крупнее и с воздухом: это главное, зачем панель открывают. */
#mobilemenu .menu.top > ul > li > a{font-size:16px;font-weight:600;padding-top:15px;padding-bottom:15px}

/* Личные действия: иконка + подпись + счётчик у правого края.
 *
 * Форма селекторов повторяет темину — `#mobilemenu .menu > ul > li >
 * a:not(.not-weight)`: у неё идентификатор, два класса и три тега, и правила
 * попроще она просто не пускает (иконка липла к тексту, кнопка звонка выходила
 * белой на белом). Поэтому здесь та же длина плюс свой класс блока.
 */
#mobilemenu .menu.sofa-mmenu-acts > ul > li > a:not(.not-weight){
  display:flex;align-items:center;gap:12px;padding-left:18px;padding-right:18px}
#mobilemenu .sofa-mmenu-acts svg{flex:0 0 20px;width:20px;height:20px;fill:currentColor;fill-rule:evenodd;color:#8b8b8b}
#mobilemenu .sofa-mmenu-acts ul li a > span{flex:1 1 auto}
#mobilemenu .sofa-mmenu-n{
  flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:#bd1c3c;color:#fff;font:700 11px/20px "Open Sans",Arial,Helvetica,sans-serif;text-align:center}
#mobilemenu .sofa-mmenu-n[hidden]{display:none}

/* Контакты — служебный блок: мельче основного меню, иконки серые, телефон
   акцентный (это то, ради чего сюда доходят), «Заказать звонок» — кнопка. */
#mobilemenu .menu.sofa-mmenu-contacts > ul > li > a:not(.not-weight){
  display:flex;align-items:center;gap:12px;padding-left:18px;padding-right:18px;
  font-size:13px;font-weight:400;line-height:1.45;color:#666}
#mobilemenu .sofa-mmenu-contacts svg{flex:0 0 16px;width:16px;height:16px;fill:currentColor;color:#b0b0b0}
#mobilemenu .menu.sofa-mmenu-contacts > ul > li.sofa-mmenu-phone > a:not(.not-weight){
  font-size:16px;font-weight:700;color:#222}
#mobilemenu .sofa-mmenu-contacts .sofa-mmenu-phone svg{color:#bd1c3c}
#mobilemenu .menu.sofa-mmenu-contacts > ul > li.sofa-mmenu-callback > a.callback{
  display:flex;align-items:center;justify-content:center;
  margin:8px 18px;padding:0 14px;min-height:42px;
  background:#bd1c3c;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
#mobilemenu .menu.sofa-mmenu-contacts > ul > li.sofa-mmenu-callback > a.callback:hover,
#mobilemenu .menu.sofa-mmenu-contacts > ul > li.sofa-mmenu-callback > a.callback:active{
  background:#a81834;color:#fff}
/* Разделители между тремя частями панели — тонкой линией, а не пустотой:
   пустота на телефоне читается как «список кончился». */
#mobilemenu .menu.middle,#mobilemenu .menu.contacts{border-top:8px solid #f5f5f5}


/* --- Мобильная шапка: иконки на одной линии --------------------------------
 *
 * Наши корзина и избранное — кликабельные квадраты 44px, а поиск и кабинет
 * остались «голыми» иконками 21×18 внутри своих ячеек: центры расходились по
 * вертикали на 11px, и ряд выглядел ступенькой. Приводим все к одному квадрату.
 */
#mobileheader .right-icons .wrap_icon > a,
#mobileheader .right-icons .top-btn,
#mobileheader .right-icons .personal-link,
#mobileheader .right-icons .search-block{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;margin:0;vertical-align:middle}
#mobileheader .right-icons .wrap_icon{vertical-align:middle;padding:0}
/* Ячейки таблицы выравнивали содержимое каждая по-своему: наши иконки садились
   по центру своей ячейки (cy 22), а кабинет и поиск — по центру строки высотой
   63 (cy 33). Ряд шёл ступенькой. Переводим ряд в flex — одна общая ось.
   Порядок теперь прямой, как в разметке: кабинет, поиск, избранное, корзина. */
#mobileheader .right-icons{display:flex;flex-direction:row;align-items:center;justify-content:flex-end}

/* Кабинет на телефоне тема прячет — но он часть того же ряда, и владелец ждёт
   его первым. Показываем на всех ширинах мобильной шапки. */
#mobileheader .right-icons .wrap_icon.wrap_cabinet{display:flex}
#mobileheader .right-icons > div{float:none;display:flex;align-items:center}
#mobileheader .right-icons .wrap_icon i.svg{margin:0;display:flex;align-items:center;justify-content:center}

/* --- Мобильная шапка липкая (TASK-52) --------------------------------------
 *
 * После TASK-42 корзина и избранное живут в шапке. На десктопе их держит на
 * экране залипший #headerfixed; на телефоне шапка была обычной — прокрутил
 * каталог, и корзины не видно, а «полёт фото в корзину» летел в никуда (цель
 * ушла за экран). Делаем мобильную шапку sticky: счётчик корзины всегда виден,
 * анимация доходит до иконки.
 *
 * z-index ниже всех оверлеев темы (фильтр каталога 1001, мобильное меню 3002 и
 * его подложка 2999, поиск 3000, модалка звонка 10040) — они по-прежнему
 * перекрывают шапку, когда открыты. Фон непрозрачный: у #mobileheader его не
 * было, и контент просвечивал бы сквозь залипшую шапку. sticky (не fixed) —
 * значит контент не надо сдвигать отступом, шапка сама встаёт к верху.
 */
@media (max-width: 991px) {
  /* Селектор усилен (html body …) и !important — тема задаёт #mobileheader
     свою позицию правилом, которое грузится позже нашего CSS и иначе побеждает
     по каскаду. Проверено на живом проде: без усиления position оставался static. */
  html body #mobileheader {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: transparent;
    box-shadow: 0 1px 0 rgba(17, 17, 17, .06), 0 8px 24px -12px rgba(17, 17, 17, .16);
  }
  /* Стекло рисует ПСЕВДОЭЛЕМЕНТ, а не сама шапка. Причина жёсткая: backdrop-filter
     на элементе делает его «точкой отсчёта» для position:fixed потомков, а внутри
     #mobileheader лежит выезжающее меню #mobilemenu — оно мгновенно уехало на
     -3440px, и меню «пропало» (замечание владельца 2026-08-25). Псевдоэлемент
     потомкам не предок, поэтому меню снова считается от окна. */
  html body #mobileheader::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(255, 255, 255, .78);
    /* Размытие крупное по той же причине, что и на десктопе: при 14px сквозь стекло
       читались пятна контента под шапкой. */
    -webkit-backdrop-filter: saturate(170%) blur(28px);
    backdrop-filter: saturate(170%) blur(28px);
    pointer-events: none;
  }
  /* Содержимое бара — поверх подложки. #mobilemenu намеренно НЕ трогаем:
     position:relative сломал бы его выезд. */
  html body #mobileheader > .mobileheader-v1 { position: relative; z-index: 1; }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html body #mobileheader::before { background: #fff; }
  }
  /* Когда открыто мобильное меню, прячем бар шапки. Подложка меню полупрозрачная
     (0.7), а панель шириной 300px не закрывает правую полосу — иконки залипшей
     шапки (избранное, корзина) просвечивали сквозь затемнение в правом верхнем
     углу (замечание владельца: «топменю под левым меню исчезает, некрасиво»).
     Меню и подложка — соседи бара внутри #mobileheader, поэтому прячем именно бар;
     у самой панели есть свой заголовок с логотипом и крестиком.
     display:none (а не visibility:hidden): бар занимал 63px пустой полосой сверху,
     и под затемнением просвечивала страница — «нестабильность» (замечание владельца).
     Схлопываем полосу совсем: у панели свой заголовок, гэпа сверху больше нет. */
  /* Было `display: none` — бар исчезал одним кадром, и это читалось грубо
     (замечание владельца 2026-08-25). Прячем тем же движением, что и всё
     остальное в системе: бар уезжает вверх, гаснет и схлопывает свою полосу.
     max-height задан близко к реальной высоте (63px), чтобы ход не проходил
     вхолостую; overflow прячет содержимое во время схлопывания. Возврат при
     закрытии меню проигрывается той же кривой в обратную сторону. */
  /* Длительности и ПОРЯДОК фаз. Прежние 0.32/0.24 с читались как «моргнуло»
     (замечание владельца 2026-08-26: «слишком резко исчезает, надо плавнее и чуть
     медленнее»), причём дело было не только в скорости: прозрачность уходила за
     0.24 с, а полоса схлопывалась за 0.32 — бар успевал погаснуть раньше, чем
     начинал двигаться, и глаз читал не движение, а мигание.
     Теперь фазы разведены задержками и идут в естественном порядке.
     ЗАКРЫТИЕ: сперва содержимое уезжает вверх и гаснет, и только потом (задержка
     0.1 с) схлопывается сама полоса.
     ВОЗВРАТ: сперва разворачивается полоса, содержимое проявляется следом (0.12 с) —
     иначе оно проступало в воздухе, до того как под ним появлялось место. */
  #mobileheader .mobileheader-v1 {
    overflow: hidden;
    max-height: 80px;
    opacity: 1;
    transform: translateY(0);
    transition: max-height .46s cubic-bezier(.2, 0, 0, 1) .04s,
                opacity .34s cubic-bezier(.2, 0, 0, 1) .12s,
                transform .46s cubic-bezier(.2, 0, 0, 1);
  }
  #mobileheader:has(#mobilemenu.show) .mobileheader-v1 {
    max-height: 0;
    opacity: 0;
    transform: translateY(-14px);
    pointer-events: none;
    transition: max-height .46s cubic-bezier(.2, 0, 0, 1) .1s,
                opacity .3s cubic-bezier(.2, 0, 0, 1),
                transform .46s cubic-bezier(.2, 0, 0, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    #mobileheader .mobileheader-v1 { transition: none; }
  }

  /* Затемнение под мобильным меню появляется РЫВКОМ: тема переключает
     `#mobilemenu-overlay` с `display:none` на видимый, и 70% черноты возникают
     одним кадром — при том что сама панель едет три десятых секунды. Глаз читает
     это как «экран моргнул и потемнел» (замечание владельца 2026-08-26).

     display анимировать нельзя, поэтому вешаем короткую анимацию появления: она
     проигрывается ровно в тот момент, когда тема показывает слой, и идёт той же
     кривой и длительностью, что выезд панели. Закрытие тема делает мгновенно —
     там рывок не читается, потому что вместе со слоем уходит и меню. */
  @keyframes sofaVeilIn { from { opacity: 0 } to { opacity: .7 } }
  /* Анимацию вешаем на СОСТОЯНИЕ ПОКАЗА, а не на сам элемент: слой лежит в разметке
     всегда, и правило на элементе отыгрывало вхолостую, пока он ещё `display:none`, —
     к моменту показа анимация давно закончилась. Тема открывает слой инлайновым
     `display:block`, по нему и цепляемся: атрибут меняется ровно в момент появления. */
  #mobilemenu-overlay[style*="display: block"],
  #mobilemenu-overlay[style*="display:block"] {
    animation: sofaVeilIn .42s cubic-bezier(.2, 0, 0, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    #mobilemenu-overlay[style*="display: block"],
    #mobilemenu-overlay[style*="display:block"] { animation: none }
  }

  /* Внутренние контейнеры мобильной шапки — прозрачные, иначе они закрывают
     стекло собой (та же причина, что и на десктопе). */
  #mobileheader .mobileheader-v1,
  #mobileheader .maxwidth-theme { background: transparent; }
}

/* --- Мегаменю каталога: разделы чистой сеткой (TASK-57) --------------------
 *
 * Разделы шли float:left по четыре в ряд: короткие (Картины — без подпунктов)
 * оставляли провал, а следующий ряд цеплялся за самый высокий блок предыдущего —
 * ряд получался «лесенкой» с рваным низом. Переводим в CSS-сетку: колонки и ряды
 * выровнены, разделы с подпунктами и без встают ровно. Шесть разделов в три
 * колонки — два полных ряда без пустых ячеек, картинкам больше воздуха.
 *
 * Одно правило на .mega-menu работает и в обычной, и в залипшей шапке: обе несут
 * .mega-menu, а ширина выпадающей панели там одинаковая (1205px) — копии меню не
 * расходятся (AC#3). !important — тема держит float/width/display своими правилами.
 */
.mega-menu td.wide_menu .dropdown-menu ul.menu-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 26px 30px !important;
  align-items: start !important;
  /* Воздух снизу: панель прижимала последний ряд к краю (жалоба владельца). */
  padding-bottom: 24px !important;
}
.mega-menu td.wide_menu .dropdown-menu ul.menu-wrapper > li.parent-items {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/*
 * Слайдер товаров (`sofa_product_slider()`): «Новинки» на главной, «Похожие» на
 * карточке. Карточка — РОВНО каталожная (`sofa_product_card_html`): трек несёт
 * классы контейнера листинга и обёрнут в `.sofa-catalog`, поэтому геометрия
 * карточки применяется как в каталоге. Стрелки навигации — в ШАПКЕ справа (не над
 * карточками): видны на любой ширине, включая узкие экраны (просьба владельца).
 * Скрипт — общий sofa_shell_slider_js().
 */
.sofa-hp-slider {
  margin: 26px 0 34px;
}

/* Шапка: заголовок слева, «ещё» + стрелки справа. */
.sofa-hp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.sofa-hp-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #1d2029;
  line-height: 1.2;
}

.sofa-hp-head-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}

/* «Весь каталог» — красная кнопка, ростом с стрелки навигации (38px). */
.sofa-hp-more {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #bd1c3c;
  border: 1px solid #bd1c3c;
  border-radius: 0;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

/* Цвет держим и на :hover/:focus — тема перекрывала ссылку чёрным при наведении
   (правило с ID сильнее по специфичности, поэтому !important). */
.sofa-hp-more,
.sofa-hp-more:hover,
.sofa-hp-more:focus,
.sofa-hp-more:visited {
  color: #fff !important;
}

.sofa-hp-more:hover {
  background: #a4152f;
  border-color: #a4152f;
}

.sofa-hp-nav {
  display: flex;
  gap: 8px;
}

/* Рамка блока — как у каталога/рекомендаций. Живёт на неподвижной обёртке, а не
   на прокручиваемом треке, чтобы линия не уезжала со скроллом. */
.sofa-hp-viewport {
  position: relative;
  border: 1px solid #f0f0f0;
}

/* Трек: горизонтальный флекс, БЕЗ зазора — вертикальные линии между товарами
   рисуют сами карточки (border-right/bottom #f0f0f0 от темы), ровно как в
   каталоге с gap:0. cursor:grab — намёк, что ленту можно тащить мышью. */
.sofa-hp-slider .sofa-hp-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  overflow-x: auto;
  /* proximity, а не mandatory: mandatory-снап в Chrome ОТМЕНЯЕТ плавный
     программный scrollBy(...,smooth) от стрелок — лента не двигалась. proximity
     мягко доводит до карточки и не ломает кнопки/драг. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
  cursor: grab;
}

.sofa-hp-slider .sofa-hp-track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.sofa-hp-slider .sofa-hp-track::-webkit-scrollbar {
  display: none;
}

/* Карточка — ровно каталожная: 5 в ряд, зазора нет. Вертикальную линию-разделитель
   между товарами ставим сами (в этом контексте тема border не вешает): 1px #f0f0f0,
   как в каталоге; у последней карточки убираем — её закрывает рамка блока. */
.sofa-hp-slider .sofa-hp-track > .item_block {
  flex: 0 0 auto !important;
  width: 20% !important;
  margin: 0 !important;
  float: none !important;
  border-right: 1px solid #f0f0f0 !important;
  scroll-snap-align: start;
}

.sofa-hp-slider .sofa-hp-track > .item_block:last-child {
  border-right: 0 !important;
}

/* Заголовок карточки в слайдере — тёмный, как в каталоге. На главной не грузится
   sofa-catalog-tune.css, и название бралось дефолтным серым — «сливалось» с фото
   на мобиле. Дублируем цвет и обрезку в глобальный CSS. */
.sofa-hp-slider .sofa-hp-track .item-title a,
.sofa-hp-slider .sofa-hp-track .item-title a > span {
  color: #1a1d27;
}
.sofa-hp-slider .sofa-hp-track .item-title a > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* Кадр фото — с ОБРЕЗКОЙ, как в каталоге. Без каталожного CSS у .image_wrapper_block
   на главной overflow:visible, и картинка (.thumb сдвинут на ~6px вниз) НАПЛЫВАЛА на
   название. Обрезаем кадр и вписываем фото ровно в него — карточка как в каталоге. */
.sofa-hp-slider .sofa-hp-track .image_wrapper_block {
  overflow: hidden !important;
  position: relative;
}
.sofa-hp-slider .sofa-hp-track .image_wrapper_block .thumb {
  display: block !important;
  height: 100% !important;
  margin: 0 !important;
}
/* contain, а не cover: сервер отдаёт кадр целиком (как на старом сайте), и обрезать
   его обратно стилями — значит вернуть ту же потерю краёв, только в браузере. */
.sofa-hp-slider .sofa-hp-track .image_wrapper_block .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Стрелки в шапке — КВАДРАТНЫЕ светлые кнопки (как кнопка), видны на любой ширине. */
.sofa-hp-arrow {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e2e5;
  border-radius: 0;
  background: #f2f2f3;
  color: #1d2029;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.sofa-hp-arrow:hover {
  color: #fff;
  background: #bd1c3c;
  border-color: #bd1c3c;
}

/* Скрытую стрелку (у края ленты) не убираем из потока, а гасим — шапка не прыгает. */
.sofa-hp-arrow[hidden] {
  display: flex;
  opacity: 0.35;
  pointer-events: none;
}

@media (max-width: 991px) {
  .sofa-hp-slider .sofa-hp-track > .item_block {
    width: 33.333% !important;
  }
}

@media (max-width: 767px) {
  .sofa-hp-slider .sofa-hp-track > .item_block {
    width: 62% !important;
  }

  .sofa-hp-title {
    font-size: 18px;
  }

  .sofa-hp-arrow {
    width: 34px;
    height: 34px;
  }
}

/*
 * Серый фон под баннерами — до краёв экрана.
 *
 * Тема красит внутренний `.maxwidth-theme` (он ограничен max-width), поэтому на
 * широком мониторе серая полоса не доходила до краёв — по бокам белело. Красим
 * полноширинный `.grey_block` (он тянется во всю ширину окна), а внутренний слой
 * делаем прозрачным, чтобы не было полосы другого оттенка внахлёст.
 */
.front .grey_block {
  background: #f9f9fa;
}

.front .grey_block > .maxwidth-theme {
  background: transparent;
}

/*
 * Баннеры на главной: цель вместо простого пролистывания. Вся плитка — ссылка в
 * каталог, по наведению всплывает подпись и кнопка (плавно снизу). На тач-экранах
 * hover нет — оверлей показываем приглушённо, тап работает по всей плитке.
 */
/* Единый оверлей поверх карусели: позиционируем от обёртки слайдера. Отступ снизу
   переносим из padding в margin (!important — тема задаёт margin позже нас): иначе
   оверлей (bottom:0) садился на край padding, на 20px НИЖЕ картинки, а градиент
   вылезал под фото. Теперь обёртка = картинка, а зазор до плиток даёт margin. */
.top_slider_wrapp {
  position: relative;
  padding-bottom: 0 !important;
  margin-bottom: 22px !important;
}

/* Фото — на весь баннер, без пустых полей по бокам (было `auto 100%` → летербокс). */
.top_slider_wrapp .banner_bg {
  background-size: cover !important;
  background-position: center !important;
}
/* Точки навигации убраны (просьба владельца) — заодно не спорят с кнопкой. */
.top_slider_wrapp .flex-control-nav { display: none !important; }
/* Стрелки — ВСЕГДА видимы (тема прячет их до hover, и на тач/узких их не было),
   и ВЫШЕ градиента оверлея (z-index:3) — иначе тень их перекрывала. */
.top_slider_wrapp .flex-direction-nav { display: block !important; z-index: 5 !important; }
.top_slider_wrapp .flex-direction-nav li { z-index: 5 !important; }
.top_slider_wrapp .flex-direction-nav li,
.top_slider_wrapp .flex-direction-nav li a { display: block !important; opacity: 1 !important; }
/* Тема держит под точками margin-bottom (~20px) — обёртка выше картинки, и
   градиент оверлея вылезал под фото. Точек нет — margin убираем, низ оверлея
   совпадает с низом картинки. */
.top_slider_wrapp .flexslider { margin-bottom: 0 !important; }

/* Подпись+кнопка видны ТОЛЬКО по наведению (ПК). h1 остаётся в DOM (для SEO),
   просто прозрачен до hover — не cloaking. На мобиле показываем всегда (см. ниже). */
.sofa-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 24px 34px;
  /* Клики проходят к карусели (стрелки) — перехватывает только сама ссылка. */
  pointer-events: none;
  /* Оверлей на всю высоту баннера, тёмная подложка в НИЗУ — подпись прижата туда и
     читается на любом фото; кверху затемнение сходит на нет. */
  background: linear-gradient(to top, rgba(12, 14, 22, 0.88) 0%, rgba(12, 14, 22, 0.62) 30%, rgba(12, 14, 22, 0) 64%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.top_slider_wrapp:hover .sofa-banner-overlay { opacity: 1; }
.sofa-banner-cta {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 560px;
  text-align: center;
  text-decoration: none;
}
/* Без тени (владелец: «некрасиво») — контраст даёт подложка оверлея, видимого по hover. */
.sofa-banner-cta-title {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.sofa-banner-cta-btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  background: #bd1c3c;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0;
  transition: background-color 0.18s ease;
}
.sofa-banner-cta:hover .sofa-banner-cta-btn { background: #a4152f; }

/* Мобайл: баннер не полоской; подпись видна всегда (hover нет) и ПОМЕНЬШЕ. */
@media (max-width: 767px) {
  .top_slider_wrapp .flexslider,
  .top_slider_wrapp .flexslider .slides li,
  .top_slider_wrapp .flexslider .slides li .wrapper_inner,
  .top_slider_wrapp .flexslider .slides li .banner_bg,
  .top_slider_wrapp .flexslider .slides li table,
  .top_slider_wrapp .flexslider .slides li td.bg { min-height: 300px; }
  /* Подпись всегда видна, ниже и компактнее (просьба владельца). */
  .sofa-banner-overlay { opacity: 1; padding-bottom: 22px; }
  /* Стрелки на мобиле — по центру по вертикали (были в верхней трети — «пониже»). */
  .top_slider_wrapp .flex-direction-nav li { top: 50% !important; transform: translateY(-50%) !important; }
  .sofa-banner-cta { gap: 9px; }
  .sofa-banner-cta-title { font-size: 14px; line-height: 1.25; max-width: 92%; }
  .sofa-banner-cta-btn { height: 36px; padding: 0 16px; font-size: 13px; }
}

/*
 * Мобильные правила по всему сайту (просьбы владельца).
 */
@media (max-width: 767px) {
  /* Кнопка «В корзину» на карточках — ВСЕГДА видна (кроме режима «уже в корзине»,
     где на её месте счётчик): на тач наведения нет, а без кнопки покупка
     неинтуитивна. Покрывает листинг, слайдер, «похожие» и деталь (все .mc-cartctl). */
  .item_block .mc-cartctl:not(.is-qty) .mcc-add,
  .sofa-detail-cart:not(.is-qty) .mcc-add { opacity: 1 !important; }

  /* Все поля ввода — не меньше 16px: iOS зумит страницу при фокусе на инпут
     с меньшим шрифтом. 16px убирает этот зум. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select { font-size: 16px !important; }
}

/*
 * Очень узкие экраны («мобильные-мобильные»): экономная шапка — меньше высота,
 * лого и иконки (44px→40px, ещё тапабельно), чтобы элементы не были крупными
 * (просьба владельца). Только ≤380px — на обычных телефонах ничего не меняем.
 */
@media (max-width: 380px) {
  #mobileheader .mobileheader-v1 { min-height: 54px; }
  #mobileheader .logo img,
  #mobileheader .logo-row .logo img { max-height: 20px !important; }
  #mobileheader .right-icons > a,
  #mobileheader .right-icons .wrap_icon > a,
  #mobileheader .sofa-shopicon { width: 40px !important; height: 40px !important; }
  #mobileheader .right-icons svg,
  #mobileheader .sofa-shopicon svg { width: 19px !important; height: 19px !important; }
}

/*
 * Выпадающий поиск на мобиле был крупноват: ужимаем поле ввода по высоте (шрифт
 * держим 16px — против зума iOS) и уплотняем строки саджеста. Аккуратнее.
 */
@media (max-width: 767px) {
  .inline-search-block.fixed .search-input { height: 50px !important; }
  .inline-search-block.fixed .ms-suggest,
  .inline-search-block.fixed .ms-row,
  .inline-search-block.fixed .ms-item { padding-top: 8px !important; padding-bottom: 8px !important; }
  .inline-search-block.fixed .ms-thumb,
  .inline-search-block.fixed .ms-row img { width: 40px !important; height: 40px !important; }
}

/* Три баннера на главной. Исходники разных пропорций: при одной ширине 410 px
   высоты выходили 273 / 267 / 288 — правый выпирал вниз, ряд смотрелся кривым.
   Задаём ряду единый кадр 3:2 и заполняем его картинкой: пропорции исходников
   больше не влияют на раскладку. cover, а не contain — поля по краям у баннера
   выглядели бы хуже неровности. */
.adv_list.small_banners .img_inner {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: inherit;
}
.adv_list.small_banners .img_inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Липкая шапка: мягкое появление и «стекло».
   Было: `top .6s linear` — линейная кривая на две трети секунды читается как
   рывок в начале и вялое доползание в конце, а сплошной белый фон обрубает
   контент под собой. Берём ту же кривую с длинным торможением, что у остальных
   переходов системы, и делаем панель полупрозрачной с размытием подложки.
   saturate — чтобы цвета под стеклом не выцветали в серость. */
#headerfixed {
  transition: top .42s cubic-bezier(.2, 0, 0, 1), box-shadow .42s cubic-bezier(.2, 0, 0, 1);
  background: rgba(255, 255, 255, .78);
  /* Размытие крупное намеренно. При 14px сквозь стекло ЧИТАЛСЯ контент: слева
     проплывало тёмное фото товара, справа — белый фон соседней карточки, и граница
     между ними выглядела как непрозрачная плашка под иконкой поиска (замечание
     владельца 2026-08-26 — «белая подложка поверх glass»). Подложки там нет: это
     сама страница просвечивает пятнами. 28px размывают её до ровного тона, а
     saturate держит цвет, чтобы стекло не выцвело в серость. */
  -webkit-backdrop-filter: saturate(170%) blur(28px);
  backdrop-filter: saturate(170%) blur(28px);
  box-shadow: 0 1px 0 rgba(17, 17, 17, .06), 0 8px 24px -12px rgba(17, 17, 17, .18);
}
/* Браузер без поддержки размытия не должен получить полупрозрачную кашу:
   там панель остаётся плотной, как была. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #headerfixed { background: #fff; }
}
/* Стекло было не видно: внутри шапки лежит `.maxwidth-theme` со сплошным белым
   фоном во всю ширину — он закрывал полупрозрачную панель целиком. Гасим фон
   ТОЛЬКО внутри липкой шапки: этот же класс используется по всему сайту, и
   трогать его глобально нельзя. Выпадающее меню оставляем плотным — читаемость
   пунктов важнее эффекта. */
#headerfixed .maxwidth-theme,
#headerfixed .wrapper_inner,
#headerfixed .header-wrapper { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  #headerfixed { transition: none; }
}

/* «Популярные категории» + «Весь каталог» на телефоне. На широком экране
   заголовок и кнопка стоят в одной строке, а на узком кнопка переносится под
   заголовок и липнет к нему вплотную (зазор 0 px) — читается как продолжение
   строки, а не как отдельное действие. Даём воздух. */
@media (max-width: 767px) {
  .top_block > .sofa-hp-more { margin-top: 14px; }
}