/*
 * Тонкая настройка каталога под источник (D-0073) — ОТДЕЛЬНЫЙ файл, потому что
 * sofa-catalog-controls.css генерируется scripts/extract-component-styles.py и
 * при перегенерации теряет ручные правки. Подключается сразу после него, так
 * что перебивает и выборку из системной темы, и стили исходного шаблона.
 */

/* Правки по живой сверке с источником (замечания владельца).
 * ────────────────────────────────────────────────────────────────────────── */

/*
 * Липкий фильтр — выключен. Ядро (`muse-catalog.js:initSticky`) на каждом
 * скролле пишет `.mc-filters` инлайновый `transform: translateY(...)`, и
 * колонка едет за экраном. У источника левая колонка неподвижна. Инлайн
 * ядра перебивается только `!important` в CSS — трогать код ядра нельзя,
 * а глушить его слушатель скролла из проекта означало бы лезть во внутренности
 * компонента: правило ниже даёт тот же результат одной строкой.
 *
 * ТОЛЬКО десктоп. Ниже 760px `.mc-filters` — выезжающая снизу шторка, и её
 * закрытое состояние это тот же `transform: translateY(100%)`; безусловный
 * `none !important` отменил бы выезд (ядро на мобиле и само за transform не
 * берётся — `initSticky` там сразу выходит).
 */
@media(min-width:761px){
  .sofa-catalog .mc-filters{transform:none!important;will-change:auto}
}

/*
 * Единая ширина блоков левой колонки. Меню разделов, фильтр, подписка и
 * новости пришли из разной разметки (первые два — тема, вторые — свои
 * блоки), и каждый нёс свои боковые отступы: категории выходили заметно уже
 * фильтра. Колонку задаёт грид (234px), поэтому достаточно, чтобы КАЖДЫЙ
 * прямой ребёнок занимал её целиком и не добавлял горизонтальных полей.
 */
.sofa-catalog.sofa-left-merged .mc-filters > *{
  width:100%;max-width:100%;margin-left:0;margin-right:0;box-sizing:border-box}
.sofa-catalog.sofa-left-merged .mc-filters .menu_top_block{border-radius:0}
/* внутренняя обёртка меню тоже во всю ширину — иначе список у́же плашки */
.sofa-catalog.sofa-left-merged .mc-filters .menu_top_block > ul.menu{
  width:100%;box-sizing:border-box}

/*
 * Строка сортировки и «активные фильтры» стояли слишком далеко друг от друга:
 * у `.mc-bar` был padding-bottom 24px, рассчитанный на случай, когда чипов
 * нет и следом сразу сетка. Когда чипы есть — это двойной воздух.
 */
.sofa-catalog .mc-bar:has(+ .mc-chips:not([style*="display: none"])){padding-bottom:10px}
.sofa-catalog .mc-chips{margin:0 0 14px}

/*
 * Форма подписки. Её вид у источника держится на правилах `.left_block
 * .subscribe-form …` (красная плашка #b51a39, белый текст, водяной знак с
 * конвертом, кнопка-стрелка), а скрипт переносит блок в сайдбар компонента —
 * предка `.left_block` не остаётся, и все они перестают применяться: форма
 * становилась бесцветной с тёмным текстом. Повторяем их для нового места.
 */
.sofa-catalog .mc-filters .subscribe-form .wrap_bg{background-color:#b51a39;border-radius:0;position:relative}
.sofa-catalog .mc-filters .subscribe-form .wrap_bg:before{
  content:"";position:absolute;top:0;left:0;width:100%;height:100%;display:block;opacity:.2;
  background:url("/site/assets/sofa-static/images/mail_xlg.png") 113px 17px no-repeat}
.sofa-catalog .mc-filters .subscribe-form .top_blocks .text > div,
.sofa-catalog .mc-filters .subscribe-form .top_blocks .text > div div{color:#fff;position:relative}
.sofa-catalog .mc-filters .subscribe-form .top_blocks .more{opacity:.8}
.sofa-catalog .mc-filters .subscribe-form form.sform{position:relative}
.sofa-catalog .mc-filters .subscribe-form input.send_btn,
.sofa-catalog .mc-filters .subscribe-form input.send_btn:hover{
  background-color:#ececf2;border-color:#ececf2;border-radius:0}
.sofa-catalog .mc-filters .subscribe-form input.send_btn{
  background-image:url("/site/assets/sofa-static/images/svg/next.svg");background-position:-245px -332px;
  opacity:.5;transition:opacity .3s ease}
.sofa-catalog .mc-filters .subscribe-form input.send_btn:hover{opacity:.7}
.sofa-catalog .mc-filters .subscribe-form .email_wrap .email_input{border-radius:0}

/*
 * Острые углы. Источник почти нигде не скругляет: скругления оставались от
 * системной темы компонента (выпадающее меню сортировки, поля диапазона цены,
 * чекбоксы фасетов, чипы, кнопки «Применить»/«Сбросить»). Круглыми остаются
 * только те элементы, что круглые ПО СМЫСЛУ: спиннер, точка цвета, водяной
 * знак — их правила адресные и сюда не попадают.
 */
.sofa-catalog .mc-sort-menu,
.sofa-catalog .mc-sort-menu button,
.sofa-catalog .mc-sort-btn,
.sofa-catalog .mc-price input,
.sofa-catalog .mc-price-go,
.sofa-catalog .mc-apply,
.sofa-catalog .mc-reset,
.sofa-catalog .mc-chip,
.sofa-catalog .mc-cat,
.sofa-catalog .mc-fv,
.sofa-catalog .mc-fv input[type=checkbox],
.sofa-catalog .mc-fc,
.sofa-catalog .mc-sw,
.sofa-catalog .mc-search,
.sofa-catalog .mc-filters-toggle,
.sofa-catalog .mc-slider-rail,
.sofa-catalog .mc-slider-fill{border-radius:0}

/*
 * Плашка заголовка — фоном во всю ширину экрана (D-0074). Разметка у нас
 * совпадает с источником один в один, но у него на `<body>` висит класс
 * `fill_bg_n`, а с ним — правило `.fill_bg_n .top_inner_block_wrapper
 * {max-width:none}`. Без класса внешняя обёртка остаётся зажатой в 1350px, и
 * серая подложка обрывается по краям контейнера: на 1280px это незаметно
 * (контейнер и так во всю ширину), а на широком мониторе бросается в глаза.
 *
 * Берём само правило, а не класс на body: второй «бесплатный» класс источника
 * (`id="main"`) тянет за собой `#main .grid-list{grid-template-columns:
 * repeat(auto-fill,minmax(260px,1fr))}` и сломал бы нашу сетку в 4 колонки —
 * `.mc-grid` получает класс `grid-list` от скрипта каталога.
 *
 * Ограничение ширины остаётся на вложенном `section.page-top.maxwidth-theme`,
 * поэтому заголовок и крошки продолжают попадать в ту же колонку, что и
 * контент (проверено: H1 и левая колонка начинаются с одной точки).
 */
.top_inner_block_wrapper.maxwidth-theme{max-width:none;padding:0 0 15px}

/*
 * Вертикальный ритм левой колонки — по источнику (снято с живой страницы):
 * список разделов отбивается от следующего блока на 40px (10px у самого
 * списка + 30px у его обёртки). У нас стояло 27px одним куском, из-за чего
 * верхняя граница плашки фильтра висела в воздухе и читалась как отдельная
 * лишняя черта под категориями.
 */
.sofa-catalog.sofa-left-merged .mc-filters .menu_top_block > ul.menu{margin-bottom:10px}
.sofa-catalog.sofa-left-merged .mc-filters .menu_top_block{margin-bottom:30px}

/*
 * Галочка «в наличии» стояла не по центру: её рисует `::after` с абсолютным
 * позиционированием (left/top подобраны на глаз под квадрат 18px). Центруем
 * флексом самого квадрата — тогда позиция не зависит от подбора и переживёт
 * смену размера; -1px по вертикали — оптическая компенсация: у «птички»
 * визуальный центр ниже геометрического.
 */
.sofa-catalog .mc-filters .mc-switch-tr{
  display:flex;align-items:center;justify-content:center}
.sofa-catalog .mc-filters .mc-switch input:checked + .mc-switch-tr::after{
  position:static;left:auto;top:auto;width:4px;height:8px;margin:-1px 0 0}

/*
 * Кнопки фильтра — каждая на своей строке во всю ширину, как у источника
 * (там «Показать» и «Сбросить» идут отдельными строками, а не парой в ряд).
 * «Искать» первой: это основное действие, у источника оно тоже сверху.
 */
.sofa-catalog.sofa-left-merged .mc-acts{
  display:flex;flex-direction:column;align-items:stretch;gap:8px}
.sofa-catalog.sofa-left-merged .mc-acts .mc-apply{order:1;width:100%;padding:11px 12px;font-weight:700}
.sofa-catalog.sofa-left-merged .mc-acts .mc-reset{
  order:2;width:100%;padding:9px 12px;background:#fff;border:1px solid #e2e4ea;color:#555;font-weight:400}
.sofa-catalog.sofa-left-merged .mc-acts .mc-reset:hover{border-color:#c9ccd3;color:#1d2029}

/*
 * Пункты меню разделов были на 20px уже фильтра и с щелями 4px (D-0078):
 * после переноса в сайдбар компонента меню живёт внутри .right_block, и на
 * его li действует типографика контентных списков темы `.right_block ul li
 * {margin:0 0 4px;padding-left:20px}` (специфичность 0,1,2) — она перебивает
 * базовый `.menu_top_block li{margin:0;padding:0}` (0,1,1). У источника меню
 * стояло в .left_block, там конфликта не было. Возвращаем базу с перевесом;
 * паддинги пунктов флай-аута не трогаем — их правила темы сильнее этого.
 */
.sofa-catalog.sofa-left-merged .mc-filters .menu_top_block li{margin:0;padding:0}

/*
 * Горизонтальная прокрутка на телефоне (D-0075). Плитке раздела на главной
 * `custom.css` источника задаёт `width:200px !important` без верхней границы,
 * и в колонке шириной 173px (375px экрана) она вылезает на 24px за край —
 * весь документ получал прокрутку вбок, заметную прежде всего по «съезжающей»
 * шапке. `max-width` побеждает `width` без гонки !important и на широких
 * экранах ничего не меняет: там колонка шире 200px.
 */
.sections_wrapper .list .item:not(.section_item) .img{max-width:100%}

/* Плитка раздела при наведении поднимается над соседями.
   Тень (`0 0 20px`) и подсветка рамки рисуются вокруг плитки, но соседняя ячейка
   идёт в потоке следующей и при равном слое ложится поверх — правая грань
   оставалась без обводки (владелец: «окантовка не покрывает правую грань»).
   Ячейки уже `position:relative`, не хватало только порядка слоёв. */
.catalog_section_list .section_item:hover{z-index:3}
.catalog_section_list .item_block:hover{z-index:3}

/* ── D-0076. Разбор замечаний: крошки, левая колонка, карточка ───────────── */

/*
 * Хлебные крошки. Разметку я перевёл на классы источника (D-0074), а стилей
 * к ним в перенесённых таблицах не оказалось — они лежат в тех файлах темы,
 * которые проект не тянет. Итог: `.bx-breadcrumb-item` остался блочным, и
 * каждое звено занимало свою строку. Ниже — правила источника, снятые с его
 * живого CSS, ровно в нужном объёме.
 */
.breadcrumbs .bx-breadcrumb-item{display:inline-block;position:relative;line-height:22px;font-size:14px}
.breadcrumbs .drop{position:relative;display:inline-block}
.breadcrumbs .drop > a span,
.breadcrumbs .drop > .number > span[itemprop="name"]{border-bottom:1px dotted #b4b4b4}
.breadcrumbs .drop:hover > a span,
.breadcrumbs .drop:hover > .number > span[itemprop="name"]{border-bottom:none}
.breadcrumbs .dropdown_wrapp{box-sizing:border-box;position:absolute;top:18px;left:0;z-index:500;
  padding-top:8px;text-transform:none}
.breadcrumbs .dropdown{background:#fff;padding:12px;text-align:left;
  box-shadow:0 1px 6px rgba(0,0,0,.16);min-width:170px}
.breadcrumbs .dropdown > a{display:block;line-height:14px;margin-top:7px;text-decoration:none;
  text-transform:none;white-space:nowrap;font-size:13px}
.breadcrumbs .dropdown > a:first-child{margin-top:0}
.breadcrumbs .dropdown > a:hover{color:#bd1c3c}
/* Показ выпадашки: у источника это display none→block по :hover. Оставляем
   его логику, добавляя только плавность и задержку на закрытие. */
.breadcrumbs .drop .dropdown_wrapp{display:block;opacity:0;visibility:hidden;
  transition:opacity .18s ease .12s,visibility 0s linear .3s}
.breadcrumbs .drop:hover .dropdown_wrapp,
.breadcrumbs .drop:focus-within .dropdown_wrapp{opacity:1;visibility:visible;
  transition:opacity .16s ease,visibility 0s}
@media (prefers-reduced-motion: reduce){
  .breadcrumbs .drop .dropdown_wrapp,
  .breadcrumbs .drop:hover .dropdown_wrapp{transition:none}
}

/*
 * Линия под плитками подкатегорий — убрана. Это была моя добавка
 * (`border-top` у строки сортировки): у источника `.sort_header` имеет только
 * `padding:0 0 24px`, никакой разделительной черты над сортировкой нет.
 */
.sofa-catalog .mc-bar{border-top:0;padding-top:0}

/*
 * Фильтр в левой колонке — как у источника, а не серой плашкой. D-0068 завёл
 * плашку `#f8f8f8` с рамкой «в тон категориям», но у источника фильтр стоит
 * на белом: заголовок «Фильтр по параметрам» это просто жирный текст 14px без
 * подложки (`.bx_filter .title .bx_filter_parameters_box_title`), строки
 * параметров разделены тонкими линиями. Из-за плашки и разъезжалась ширина:
 * категории — плашки пунктов внутри колонки, фильтр — сплошной блок с рамкой.
 */
.sofa-catalog.sofa-left-merged .sofa-filter-title{
  background:none;border:0;padding:0 0 4px;font-size:14px;font-weight:700;color:#333;line-height:22px}
.sofa-catalog.sofa-left-merged .mc-fdrawer-body{background:none;border:0}
.sofa-catalog.sofa-left-merged .mc-fdrawer-body > *{
  padding:13px 0 14px;border-bottom:1px solid #f2f2f2}
.sofa-catalog.sofa-left-merged .mc-fdrawer-body > *:first-child{border-top:1px solid #f2f2f2}
.sofa-catalog.sofa-left-merged .mc-acts{background:none;border:0;padding:14px 0 0;margin-bottom:30px}

/*
 * Кнопка «в избранное» видна всегда — и это третий подход к снаряду.
 *
 * Дважды её чинили, не трогая саму затею: сперва задержка стояла на появлении
 * (курсор наискось по сетке успевал войти, запустить отсчёт и выйти — сердце
 * проявлялось вслед уходящему курсору), потом задержку перенесли на скрытие.
 * Моргание стало реже, но не ушло: карточка перерисовывается на каждое событие
 * корзины, а перерисованный узел `:hover` не наследует — под неподвижным
 * курсором кнопка гасла сама по себе. Ради этого же держали класс-дублёр
 * `.sofa-hover`, который JS вешал по elementFromPoint на каждую мутацию DOM.
 *
 * Владелец, третий раз: «при наведении её не видно, какое-то непонятное
 * поведение и моргание». Поэтому убираем не симптом, а причину: у видимой
 * всегда кнопки нет состояния, из которого можно мигнуть. Так это устроено в
 * любом знакомом покупателю магазине, и с телефона избранное перестаёт зависеть
 * от того, наступает ли :hover.
 *
 * В покое кнопка деликатная (белая, серое сердце), на наведении — акцентная,
 * «уже в избранном» — залита акцентом. Три состояния ниже.
 */

/* Кнопка избранного стоит по внутренней сетке карточки: раньше она наследовала ядровые
 * отступы и висела чуть выше и правее фотографии, не совпадая ни с её краем, ни с
 * полями текста. Привязываем к тем же 12px, что у остальных элементов карточки. */
.item_block .muf-acts{top:12px;right:12px;gap:6px}
.item_block .muf-heart,.item_block .muf-cmp{
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);
  border:1px solid #ececec;box-shadow:0 2px 8px rgba(20,22,34,.08);color:#8b8b8b}
.item_block .muf-heart:hover,.item_block .muf-cmp:hover{color:#bd1c3c;border-color:#e6c3cb}
/*
 * «Уже в избранном» — акцентом, и на наведении тоже.
 *
 * Цвет включённого состояния ядро держит в правиле, где перечислен и `:hover`
 * (иначе состояние сбрасывалось бы при наведении). Селектор той же силы, что
 * наш, и грузится позже — сердце при наведении уходило в тёмный, будто товар
 * из избранного убрали. Теперь ядро читает цвет из переменной, задаём её.
 */
/*
 * Три состояния кнопки, которые видно.
 *
 * Кнопка белая, рамка светло-серая, иконка серая — на светлом снимке товара её
 * почти не различить, а «уже в избранном» отличалось от обычного только оттенком
 * серого (владелец: «очень некрасивый hover / active / нажатое состояние»).
 * Теперь: покой — белая с читаемой рамкой; наведение — акцентная рамка и иконка;
 * «в избранном» — заливка акцентом и белая иконка, видно с первого взгляда.
 */
/*
 * Кнопка ПРОПАДАЛА при наведении — и это не про прозрачность.
 *
 * Тема при `:hover` поднимает карточку в `z-index:60` (`.catalog_item_wrapp`),
 * чтобы её раскрытая часть перекрывала соседей. Внутри лежит `.catalog_item` с
 * белым фоном, а наша кнопка — соседним слоем на `z-index:3`: белый фон
 * наведённой карточки просто ложился поверх сердца. Замер: в точке центра
 * кнопки `elementFromPoint` возвращал `a.thumb`, а не саму кнопку.
 *
 * Поднимаем только у наведённой карточки. Задирать всем нельзя: раскрытая
 * карточка налезает на нижний ряд, и чужие сердца оказались бы поверх неё.
 */
.item_block:hover .muf-acts,
.item_block:focus-within .muf-acts{z-index:61}

/*
 * Палитра. Была: серое сердце в белом кружке → при наведении краснеет контур →
 * «в избранном» весь кружок заливается красным. На фотографии мебели, где полно
 * бежевого и красного дерева, красный кружок сливался с фоном, а разница между
 * покоем и наведением сводилась к оттенку рамки (владелец: «абсолютно херовые
 * ховер цвета и контрасты»).
 *
 * Стало: кружок всегда белый и с тенью — он читается на любом снимке; меняется
 * САМА иконка. Покой — тёмно-серый контур, наведение — акцентный контур,
 * «в избранном» — сердце залито акцентом (у ядра svg нарисован обводкой, заливку
 * включаем здесь). Три состояния различаются формой и цветом иконки, а не
 * оттенком рамки.
 */
.item_block .muf-acts{--muf-on-bg:#fff;--muf-on-ink:#bd1c3c;--muf-on-shadow:0 4px 14px rgba(189,28,60,.2)}
.item_block .muf-heart,.item_block .muf-cmp{
  color:#4a4a4a;border-color:rgba(20,22,34,.1);background:rgba(255,255,255,.95);
  box-shadow:0 2px 8px rgba(20,22,34,.14);
  transition:color .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .12s ease}
.item_block .muf-heart:hover,.item_block .muf-cmp:hover{
  color:#bd1c3c;border-color:rgba(189,28,60,.4);background:#fff;
  box-shadow:0 4px 14px rgba(189,28,60,.22)}
.item_block .muf-heart.on,.item_block .muf-cmp.on{
  color:#bd1c3c;border-color:rgba(189,28,60,.4);background:#fff}
.item_block .muf-heart.on svg{fill:currentColor}
.item_block .muf-heart.on:hover,.item_block .muf-cmp.on:hover{
  color:#a81834;border-color:rgba(168,24,52,.55);background:#fff}
/* Нажатие — короткое, едва заметное: кнопка 34px, резкое сжатие на ней читается
   как рывок. Увеличения при наведении нет: раньше об этом спорили два правила
   одинаковой силы (`transform:none` и `scale(1.08)` ниже по файлу), и выигрывало
   последнее — то есть комментарий обещал одно, а кнопка делала другое. */
.item_block .muf-heart:hover,.item_block .muf-cmp:hover{transform:none}
.item_block .muf-heart:active,.item_block .muf-cmp:active{transform:scale(.96)}
/* Воздух под кнопкой: вплотную под ней начиналась фотография, и сердечко читалось
 * как часть снимка, а не как действие карточки. */
.item_block .muf-acts{margin-bottom:8px}
.item_block .image_wrapper_block{padding-top:6px}


/*
 * Блок «галка + счётчик», который встаёт на место кнопки «В корзину».
 * Слева его прижимало сильнее, чем справа: галка-переход в корзину и степпер
 * лежали в потоке без выравнивания, а сам контрол наследовал внешние отступы
 * кнопки. Раскладываем в ряд с равными полями по краям.
 */
/*
 * Счётчик занимает ВСЮ ширину контрола, кнопки прижаты к краям.
 *
 * Было: `.mcc-on` центрировал содержимое и отбивал его паддингами, а `.mcc-step`
 * получал `justify-content:center` с зазором 6px — поверх правила, которое уже
 * прижимало кнопки к краям. Замер на живом проде: блок «− N +» шириной 55px,
 * кнопки по 28px вылезали за его границы на 7px с каждой стороны, а само число
 * схлопывалось в 0 (владелец: «позиционирование +− внутри области отрегулировать,
 * прижать к краям»).
 */
/* Сам контрол — во всю ширину колонки карточки: он занимал 127px из доступных
   155, и содержимому счётчика не хватало ровно этих пикселей.
   Боковые отступы при этом обнуляем: компонентный CSS даёт `margin:0 14px 14px`
   (они отбивали узкий контрол от краёв), и вместе с шириной 100% контрол
   уезжал вправо — левый край 34 против 20 у остальных элементов карточки.
   Колонку и так отбивают паддинги самой карточки. */
/* Без предка `.sofa-catalog`: карточка одна на весь сайт, и контрол обязан
   выглядеть одинаково в каталоге, поиске, корзине, избранном и подборках.
   С этим предком правило не доставало до страницы поиска — там контрол был
   уже остальных элементов карточки (замер: 34/33 против 20/19). */
.item_block .mc-cartctl{
  width:100%;box-sizing:border-box;margin-left:0;margin-right:0}
.item_block .mc-cartctl .mcc-on{
  display:flex;align-items:center;gap:8px;padding:0;width:100%;box-sizing:border-box}
.item_block .mc-cartctl .mcc-step{
  display:flex;align-items:center;justify-content:space-between;gap:0;padding:0 2px}
.item_block .mc-cartctl .mcc-status{flex:0 0 auto;margin:0}
/* Число — по центру между кнопками и с местом под двузначное количество. */
.item_block .mc-cartctl .mcc-n{flex:1 1 auto;min-width:1.6em;text-align:center}
/*
 * Узкая колонка: «+» просто обрезался.
 *
 * Кнопки степпера были фиксированной ширины (35px каждая) плюс поле числа — в
 * сумме 92px, а на планшетной сетке (три колонки, ~147px на карточку) степперу
 * достаётся 58px. Лишнее уезжало за край: владелец видел «артефакт на кнопке».
 * Разрешаем кнопкам сжиматься до 24px — этого хватает под палец, а число
 * остаётся по центру.
 */
.item_block .mc-cartctl .mcc-dec,
.item_block .mc-cartctl .mcc-inc{flex:0 1 auto;min-width:24px}
.item_block .mc-cartctl .mcc-step{min-width:0;overflow:hidden}
@media (max-width:1199px){
  /* Планшетная сетка: на карточку приходится ~147px, из них контролу 108.
     Считаем явно: статус 34 + зазор 4 + степпер 70, внутри степпера
     22 + 17 + 22 = 61. Без этого «+» не влезал и обрезался краем колонки. */
  .item_block .mc-cartctl .mcc-on{gap:4px}
  .item_block .mc-cartctl .mcc-status{flex:0 0 34px;width:34px}
  .item_block .mc-cartctl .mcc-step{padding:0}
  .item_block .mc-cartctl .mcc-dec,
  .item_block .mc-cartctl .mcc-inc{min-width:22px}
  .item_block .mc-cartctl .mcc-n{min-width:1.2em}
}

/*
 * Товар не в наличии: вместо активной кнопки — спокойная надпись (D-0076).
 *
 * Состояние решает РАЗМЕТКА, а не скрипт (D-0095). Шаблон карточки статичен и
 * рисует «В корзину» всем подряд — у токенов нет ветвления, — поэтому раньше
 * скрипт после каждой перерисовки сетки обходил карточки и переписывал контрол
 * руками. Между отрисовкой и обходом покупатель успевал увидеть у отсутствующего
 * товара живую кнопку, а у многовариантного — счётчик, которого там быть не
 * может. Признак приезжает атрибутом (`data-in-stock`, пустой `data-offer`), и
 * CSS показывает нужное состояние сразу.
 */
/* (состояния контрола вынесены ниже, без привязки к .sofa-catalog — D-0097) */

/*
 * Кнопка «Фильтры» на телефоне. `sofa-catalog-controls.css` гасит её насовсем —
 * это верно только для десктопа, где фильтр и так открыт в левой колонке. Ниже
 * 760px левой колонки нет вовсе: фильтр там выезжающая шторка, и открыть её,
 * кроме этой кнопки, нечем — то есть фильтровать каталог с телефона было
 * нельзя. Возвращаем кнопку ровно там, где она единственный вход в фильтр.
 */
@media(max-width:760px){
  .sofa-catalog .mc-bar .mc-filters-toggle{display:inline-flex}
  /*
   * …и в самой шторке остаётся ТОЛЬКО фильтр. Ниже 760px левой колонки нет:
   * `.mc-filters` превращается в выезжающую панель на весь экран, и соседи
   * фильтра по колонке (меню разделов, подписка) съезжали туда же — 465px из
   * 812 уходили им, а параметрам оставалась полоска в 108px при 2000px
   * содержимого. Оба блока на телефоне уже есть в других местах: разделы — в
   * бургер-меню шапки, подписка — в подвале.
   */
  .sofa-catalog .mc-filters > .menu_top_block,
  .sofa-catalog .mc-filters > .sofa-filter-title,
  .sofa-catalog .mc-filters > .subscribe_wrap{display:none}
}

/*
 * Стрелки пагинации (D-0100). Разметка у нас как у источника
 * (`ul.flex-direction-nav` внутри `.module-pagination`), но правила их
 * раскладки лежали в компонентных таблицах Битрикса, которые проект не тянет
 * (D-0065). Оставалась ванильная демо-тема flexslider: она уносит стрелку за
 * край (`right:-50px`) и рисует глиф иконочным шрифтом, которого у нас нет.
 * Итог: документ на КАЖДОЙ странице каталога был на 7px шире экрана (боковая
 * прокрутка), плюс два 404-запроса за шрифтом. Ставим стрелки по краям строки
 * с номерами и гасим чужой глиф — свой SVG уже в разметке.
 */
.module-pagination{position:relative}
.module-pagination .flex-direction-nav a:before{content:none}
.module-pagination .flex-direction-nav li{position:static;background:none;opacity:1;width:auto;height:auto}
.module-pagination .flex-direction-nav a.flex-prev,
.module-pagination .flex-direction-nav a.flex-next{
  position:absolute;top:50%;left:auto;right:auto;margin:-17px 0 0;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  color:#1d2029;background:none;text-indent:0;opacity:1;
  transition:color .16s ease,border-color .16s ease;border:1px solid transparent}
.module-pagination .flex-direction-nav a.flex-prev{left:0}
.module-pagination .flex-direction-nav a.flex-next{right:0}
.module-pagination .flex-direction-nav a:hover{color:#bd1c3c;border-color:#ebebeb}

/*
 * Кнопка «В корзину»: отклик на наведение (D-0096, просьба владельца).
 *
 * Было: заливка не менялась вовсе — кнопка выглядела одинаково и в покое, и под
 * курсором, и покупатель не получал подтверждения, что попал по ней.
 *
 * Стало: заливка чуть темнеет, под кнопкой появляется мягкая тень фирменного
 * цвета, слева выезжает тележка, а подпись сдвигается ей навстречу. Нажатие
 * даёт короткий «провал» на 1px. Ничего не прыгает: меняются только цвет, тень
 * и внутренний отступ, размеры кнопки постоянны.
 */
.sofa-catalog .item_block .to_cart,
.catalog_detail .buy_block .to-cart{
  position:relative;padding-left:26px;
  transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,
             opacity .18s ease,transform .18s ease}
.sofa-catalog .item_block .to_cart::before,
.catalog_detail .buy_block .to-cart::before{
  content:"";position:absolute;left:16px;top:50%;width:18px;height:18px;margin-top:-9px;
  opacity:1;transform:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.3 11.2a1.6 1.6 0 0 0 1.6 1.3h8.3a1.6 1.6 0 0 0 1.6-1.2l1.7-6.6H6.2'/%3E%3Ccircle cx='9.6' cy='20' r='1.3'/%3E%3Ccircle cx='17.6' cy='20' r='1.3'/%3E%3C/svg%3E") center/18px 18px no-repeat;
  transition:opacity .2s ease,transform .2s ease}
.sofa-catalog .item_block .to_cart:hover,
.sofa-catalog .item_block .to_cart:focus-visible,
.catalog_detail .buy_block .to-cart:hover,
.catalog_detail .buy_block .to-cart:focus-visible{
  background-color:#a4152f;border-color:#a4152f;
  box-shadow:0 8px 20px rgba(189,28,60,.28)}
.sofa-catalog .item_block .to_cart:active,
.catalog_detail .buy_block .to-cart:active{transform:translateY(1px);box-shadow:0 4px 12px rgba(189,28,60,.24)}
/* Иконка видна всегда (замечание владельца): раньше она выезжала только по ховеру,
   и вместе с ней прыгала подпись. Ховер меняет теперь только цвет и тень. */
/* На деталке иконка темы уже есть в разметке (`<i>`) — своей второй не рисуем. */
.catalog_detail .buy_block .to-cart:has(i)::before{content:none}
@media (prefers-reduced-motion:reduce){
  .sofa-catalog .item_block .to_cart,
  .sofa-catalog .item_block .to_cart::before,
  .catalog_detail .buy_block .to-cart,
  .catalog_detail .buy_block .to-cart::before{transition:none}
}

/*
 * Обёртка фильтра внутри левой колонки (D-0095). Клиент переписывает её
 * `innerHTML` при каждой смене фильтра, поэтому меню разделов и подписка лежат
 * рядом с ней, а не внутри. `display:contents` оставляет прежнюю раскладку
 * колонки: для флекса (десктоп) и грида (мобильная шторка) детьми по-прежнему
 * считаются шапка, тело и кнопки фильтра, а не сама обёртка.
 */
.sofa-catalog .mc-filters .mc-fpanel{display:contents}

/*
 * Горизонтальная прокрутка на телефоне, вторая причина (D-0077). Форма поиска
 * в шапке шире экрана: `.ms-form`/`.search-wrapper` набирают 379px при 375 —
 * рамка и внутренние поля считаются сверх ширины. Растягивались за ними и
 * оба фиксированных контейнера шапки (#headerfixed, .inline-search-block),
 * из-за чего документ получал прокрутку вбок. Плитку раздела (первая причина)
 * лечили выше — это независимый случай, поэтому скролл и остался.
 */
.search-wrapper,
.inline-search-block .ms,
.inline-search-block .ms-form,
.inline-search-block .ms-panel{max-width:100%;box-sizing:border-box}
#headerfixed,
.inline-search-block.fixed{max-width:100vw;box-sizing:border-box}

/*
 * Прыжок ширины левой колонки на загрузке. Меню разделов приезжает в сайдбар
 * компонента скриптом, а до этого секунду живёт в `.left_block` — там у него
 * своя ширина, и на глазах у покупателя блок дёргается. Держим исходную
 * колонку ровно той же ширины, что и колонка компонента (234px, метрика
 * источника), чтобы переезд был незаметен.
 */
.sofa-catalog .left_block{width:234px;box-sizing:border-box}
.sofa-catalog .left_block .menu_top_block{width:100%;box-sizing:border-box}
@media(max-width:760px){
  .sofa-catalog .left_block{width:auto}
}

/*
 * …и страховка от боковой прокрутки на узких экранах. Точный виновник в
 * вёрстке шапки темы локализовать не удалось: документ остаётся шириной
 * 409px при экране 375 даже когда блок поиска скрыт, то есть переполнение
 * дают не отдельные элементы, а их совокупность (fixed-контейнеры шапки
 * тянутся за шириной документа, документ — за ними). `overflow-x: clip`
 * режет именно горизонталь и, в отличие от `hidden`, не создаёт контекст
 * прокрутки — position:sticky и fixed продолжают работать.
 */
@media(max-width:760px){
  html,body{overflow-x:clip;max-width:100%}
}

/*
 * Скелетоны загрузки — в габаритах и цвете карточки каталога, а не системной
 * темы. Раньше на месте товаров вспыхивали чужие по стилю блоки со своим
 * скруглением и другим фоном: на плоской витрине это читалось как «страница
 * сломалась». Теперь это те же прямоугольники, что и карточки.
 */
.sofa-catalog .mc-skel{
  border:1px solid #f2f2f2;background:#fff;border-radius:0;padding:20px;
  box-shadow:none;min-height:380px}
.sofa-catalog .mc-skel-pic{background:#f7f7f7;border-radius:0;aspect-ratio:1/1;margin-bottom:16px}
.sofa-catalog .mc-skel-line{background:#f2f2f2;border-radius:0;height:12px;margin-bottom:10px}
.sofa-catalog .mc-skel-line.s2{width:55%}

/*
 * Мобильный каталог — 2 колонки (D-0078). На ≤760px фильтры — фикс-шторка и
 * колонку не занимают, но наше правило 234px-трека (sofa-catalog-controls.css,
 * grid-template-columns:234px …) живёт без media-обёртки и продолжало держать
 * сетку в узкой правой колонке с пустой полосой слева; ядро же на ≤420px даёт
 * 1 колонку. Внутренним трекам обязателен minmax(0,1fr): у грида min=auto, и
 * карточку с длинным названием распирало шире контейнера (замерено 418px при
 * контейнере 234) — отсюда же был вклад в боковую прокрутку.
 */
@media(max-width:760px){
  .sofa-catalog.sofa-left-merged [data-component="catalog"]{grid-template-columns:minmax(0,1fr)}
}

/*
 * Деталка товара (D-0078): ровные колонки + крупная «В корзину».
 * ВАЖНО: без предка .sofa-catalog — деталка рендерится в #content.wraps без
 * этого класса (первая версия блока из-за этого молча не применялась).
 *
 * Источник строит колонки трюком «.item_slider float:left 50% + .right_info
 * {padding-left:50%}» (styles.css), а фото опускает `.container .catalog_detail
 * .item_slider{padding-top:80px}` — зона иконок лайков источника, которых у
 * нас нет. Ещё `.middle_info{float:left}` схлопывал .info_item в высоту 0.
 * Итог был: цена прижата к верху, фото ниже на 80px, кнопка 126×40 в пустоте.
 * Переводим на flex: колонки одной высоты, блок покупки по центру напротив
 * фото. До 600px тема сама складывает колонки (css/media.css) — flex выше.
 */
@media (min-width: 601px){
  .catalog_detail .item_main_info{display:flex;align-items:stretch}
  .catalog_detail .item_main_info .img_wrapper{
    flex:0 0 50%;max-width:50%;box-sizing:border-box;
    display:flex;align-items:center;justify-content:center}
  .container .catalog_detail .item_main_info .img_wrapper .item_slider{
    float:none;width:100%;padding:29px 56px;box-sizing:border-box}
  .catalog_detail .item_main_info .right_info{
    flex:0 0 50%;max-width:50%;box-sizing:border-box;padding:0;
    border-left:1px solid #f2f2f2;display:flex;align-items:center}
  .catalog_detail .item_main_info .right_info .info_item{width:100%;padding:30px 34px}
  /* float схлопывал .info_item; при flex-центровке это роняло контент вниз */
  .catalog_detail .item_main_info .right_info .middle_info{float:none;width:100%}
}
.catalog_detail .item_main_info .img_wrapper img{display:block;max-width:100%;height:auto;margin:0 auto}

/* ── Карточка товара: то, чего на ней не хватало (D-0097) ────────────────── */

/* Артикул — над ценой, служебным кеглем: его ищут глазами, но он не главный. */
.sofa-detail-meta{font-size:13px;color:#8b8b8b;margin-bottom:10px}
.sofa-detail-meta span{color:#555}

/* Галерея: превью под большим фото. Появляются, только когда кадров больше одного.
   Сетка, а не flex-обёртка: у ряда превью разной ширины края расходились, и при
   переносе на вторую строку последняя пара «висела» по центру. Фиксированная
   колонка держит их ровным рядом при любом количестве кадров. */
/* Галерея — колонкой: большое фото сверху, превью под ним.
   `.img_wrapper` темы — горизонтальный flex, и превью вставали СБОКУ от кадра, деля
   с ним ширину: главное фото ужималось до 155px при контейнере в 470px, а ряд превью
   ломался на две строки. Из-за этого «стало ещё хуже» после перевода на сетку. */
.catalog_detail .img_wrapper{flex-direction:column;align-items:stretch}
.catalog_detail .img_wrapper .item_slider{width:100%}
/* Ряд слева, перенос — тоже слева, во всю ширину галереи. */
.sofa-thumbs{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:flex-start;width:100%}
.sofa-thumb{
  width:64px;height:64px;padding:0;border:1px solid #ececec;background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:border-color .16s ease}
/* `contain`, а не `cover`: у мебели кадры разного формата, и заполнение по ширине
   срезало края дивана — превью переставало показывать то, что на нём изображено.
   Рамка превью одинаковая, кадр вписан целиком. */
.sofa-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.sofa-thumb:hover{border-color:#c9ccd3}
.sofa-thumb.is-on{border-color:#bd1c3c}

/*
 * ГЕОМЕТРИЯ КАРТОЧКИ ЗАДАНА, А НЕ ВЫТЕКАЕТ ИЗ СОДЕРЖИМОГО.
 *
 * Замер по матрице паритета (docs/CARD_PARITY.md, 2026-08-22) показал, что карточки
 * различаются по высоте даже ВНУТРИ каталога: первый ряд 404px, второй 384px — разница
 * ровно в одну строку названия. Отсюда рваные ряды, «дышащие» блоки и невозможность
 * заранее знать высоту подборки (из-за чего страница дёргается при догрузке).
 *
 * Правило: у карточки постоянная высота при любом содержимом.
 *   — название всегда занимает две строки: длинное обрезается, короткое добивается
 *     пустотой (min-height), поэтому цена и кнопка у соседей стоят на одной линии;
 *   — строка наличия держит своё место, даже когда её нет;
 *   — кнопка прижата к низу карточки.
 * Правила без привязки к странице (никаких `.sofa-catalog …`) — иначе карточка снова
 * начнёт выглядеть по-разному в каталоге, подборках и корзине.
 */
.item_block .catalog_item{display:flex;flex-direction:column;height:100%}
.item_block .item_info{display:flex;flex-direction:column;flex:1 1 auto}
.item_block .item_info--bottom_block{margin-top:auto}
/* Название — ровно две строки. line-height задаём здесь же: без него min-height
   пришлось бы подбирать под шрифт темы, и правило поехало бы при его смене. */
/* Обрезка висит на ССЫЛКЕ, а не на внешнем блоке: в разметке темы текст лежит внутри
   `.item-title > a > span`, а `-webkit-line-clamp` считает строки только у элемента,
   который сам содержит текст. На внешнем блоке правило молча не работало — название
   в три строки поднимало карточку на 20px и тянуло за собой весь ряд сетки. */
.item_block .item-title{min-height:40px}
.item_block .item-title a,
.item_block .item-title a > span{line-height:20px}
/* Обрезка — на самом внутреннем элементе с текстом (`span`). На ссылке она не работала:
   тема задаёт ей `display:flow-root` с большей специфичностью, а `-webkit-line-clamp`
   без `-webkit-box` не действует — правило применялось молча вхолостую. */
.item_block .item-title a > span{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* Строка наличия: фиксированная высота и flex, чтобы не зависеть от строчного бокса.
   Без этого блок был 15px в каталоге и 23px в подборках при одном и том же содержимом —
   разницу давал baseline-зазор вокруг inline-элемента. Место занимает всегда, даже когда
   наличие не выводится: иначе карточки без него короче соседних. */
.item_block .sa_block{display:flex;align-items:center;justify-content:center;height:15px;line-height:15px;margin-top:9px}

/*
 * Карточка в ЯДРОВОЙ сетке выглядит так же, как в проектной.
 *
 * Вид карточки тема задаёт правилом `.catalog_block .catalog_item` — отступы
 * 20/19/26/20 и выравнивание по центру. Предок `.catalog_block` есть у блоков, которые
 * рисует проект («Похожие товары»), но НЕ у тех, что рисует ядро: «С этим часто берут»
 * под корзиной, «Вы недавно смотрели», избранное и сравнение печатают голый `.mc-grid`.
 * Разметка карточки при этом одна и та же — расходился только контейнер, и владелец
 * видел разные отступы и выравнивание в соседних блоках.
 *
 * Повторяем те же свойства с опорой на сетку, а не на класс-обёртку темы.
 */
/* Зазора между карточками нет — границы рисует сама карточка (.grid-list-border-outer),
   как в каталоге и у источника. Ядро по умолчанию ставит --mc-gap:20px, и сетки вне
   .sofa-catalog (избранное, сравнение) дробились зазорами, которых в каталоге нет. */
/* Класс продублирован намеренно: системный muse-product-cards.css грузится ПОСЛЕ
   проектных файлов и задаёт `.mc-grid{gap:var(--mc-gap,20px)}` с той же специфичностью,
   поэтому правило в один класс он перебивает по порядку. */
.mc-grid.mc-grid{gap:0}
/*
 * ЧИСЛО КОЛОНОК — ОДНО НА ВСЕ КОНТЕКСТЫ (D-0110).
 *
 * Было три отдельных объявления: `.items_area.catalog_block` (листинг),
 * `.sofa-catalog .mc-grid` (каталог на мобильном) и `.sofa-related-grid`
 * («похожие»), плюс дефолт ядра. Точки перелома у них не совпадали, и один и
 * тот же товар в каталоге шёл в 2 колонки, а в поиске и избранном — в 1
 * (владелец, п.19: «в каталоге сетка с границами, а в рекомендациях,
 * корзине, избранном — нет»). Ленты рекомендаций остаются лентами: правило ядра
 * `.mc-reco .mc-grid` на класс специфичнее и грузится позже — оно и выигрывает.
 */
.mc-grid.mc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){
  .mc-grid.mc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .mc-grid.mc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* разлиновку рисует граница карточки; ряды прижимаем сами — иначе двойная линия */
  .mc-grid .item_block{width:100%;margin-top:-1px}
}
/* Ниже 420px в одну колонку НЕ уходим (ядро уходит): у каталога сетка так и
   стояла в две, владелец её принял, а расхождение каталога с поиском и
   избранным как раз и было замечанием. */
/* Лента подборки на телефоне: карточка шире, чем в умолчании ядра.
   Ядро даёт 46% ширины (две с половиной карточки в экран) — на 375px это 151px,
   и кнопка «В корзину» с иконкой не помещалась: текст обрезался до «корзину»,
   иконка налезала на него. 62% дают 220px — кнопка целиком, а третья карточка
   всё так же выглядывает и приглашает листать. */
@media (max-width:760px){
  /* класс продублирован: то же правило у ядра грузится позже */
  .mc-reco .mc-grid.mc-grid,.mu-recent-list.mu-recent-list{grid-auto-columns:calc(62% - 8px)}
}
/* Корзина — пять колонок: там нет колонки фильтров, и четыре карточки
   оставляли справа пустую полосу (владелец 22.08). Правило живёт здесь же,
   рядом с общим объявлением, а не отдельным местом. */
/* Порог 1024, а не 1101: у окна 1113px область содержимого — 1098 (полоса
   прокрутки), и правило на 1101 не срабатывало — пятая карточка уезжала
   на вторую строку.

   Привязка к САМОМУ блоку (`.mu-crosssell`), а не к предку `[data-mu-cartpage]`:
   при первой же перерисовке корзины блок переносится ЗА пределы этого контейнера
   (так он не дёргается, см. ядро), предок перестаёт совпадать, и правило
   отваливалось — «сначала 5 в ширину, после добавления 4» (владелец 22.08).
   Класс `mu-crosssell` встречается только у подборки под корзиной. */
@media (min-width:1024px){
  .mu-crosssell .mc-grid.mc-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
.mc-grid .catalog_item{padding:20px 19px 26px 20px;text-align:center}
.mc-grid .item_block{display:flex;flex-direction:column}
.mc-grid .item_block > .catalog_item_wrapp{flex:1 1 auto;display:flex;flex-direction:column}
.mc-grid .item_block .catalog_item{flex:1 1 auto;display:flex;flex-direction:column}
/* Кнопка прижата к низу карточки — иначе у товаров с коротким названием она
   висит посередине, и ряд карточек выглядит рваным. */
.mc-grid .item_block{height:100%}
/* Прижимает кнопку к низу `.item_info--bottom_block` (см. блок геометрии выше), а не сама
   кнопка: `margin-top:auto` на ней съедал отступ 11px между ценой и кнопкой — они
   слипались (замечание владельца). */
/* Зазор в ядровой сетке убран (см. ниже), поэтому ряды разделяет граница карточки —
   как в каталоге. Без этого правила соседние карточки в подборке слипались. */
.mc-grid .item_block{border-right:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0}

/* Вкладки товара: первый элемент не добавляет своего верхнего отступа.
   У «Характеристик» набегало 108px до заголовка — 40px у .tab-content, 25px у .wraps
   и 43px у самого h4, — тогда как у «Доставки» и «Оплаты» текст начинался сразу.
   Отбивку задаёт только контейнер вкладок, содержимое её не удваивает. */
.tab-content > .tab-pane > *:first-child{margin-top:0}
.tab-content > .tab-pane > .wraps:first-child{padding-top:0}
.tab-content > .tab-pane > .wraps:first-child > h4:first-child,
.tab-content > .tab-pane > .sofa-reviews:first-child{margin-top:0}

/* Ссылки-действия во вкладках («Как доехать и часы работы») — кнопкой, а не строкой
   текста: это переход на другую страницу, и он должен читаться как действие. */
.sofa-stores-tab a:not([href^="tel:"]){
  display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:9px 16px;
  border:1px solid #ececec;border-radius:0;background:#fff;color:#1d2029;
  font-weight:700;font-size:13.5px;text-decoration:none;
  transition:border-color .16s ease,color .16s ease,background .16s ease}
.sofa-stores-tab a:not([href^="tel:"]):hover{border-color:#bd1c3c;color:#bd1c3c;background:#faf5f6}
.sofa-stores-tab a:not([href^="tel:"])::after{content:"›";font-size:16px;line-height:1;opacity:.6}

/* Просмотр фото (свой, вместо неперенесённого fancybox — см. sofa-detail-cart.js) */
.sofa-lightbox{
  position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;
  background:rgba(20,20,24,.86);padding:48px 64px}
.sofa-lightbox.is-on{display:flex}
.sofa-lightbox img{max-width:100%;max-height:100%;display:block;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.sofa-lb-x,.sofa-lb-nav{
  position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .16s ease}
.sofa-lb-x:hover,.sofa-lb-nav:hover{background:rgba(255,255,255,.24)}
.sofa-lb-x{top:16px;right:16px;width:44px;height:44px;font-size:28px;line-height:1}
.sofa-lb-nav{top:50%;margin-top:-28px;width:44px;height:56px;font-size:34px;line-height:1}
.sofa-lb-prev{left:12px}
.sofa-lb-next{right:12px}
/* Одиночный кадр листать нечем — стрелки только мешают. */
.sofa-lightbox[data-single="1"] .sofa-lb-nav{display:none}
@media (max-width:760px){
  .sofa-lightbox{padding:56px 12px}
  .sofa-lb-nav{width:38px;height:48px;font-size:28px}
}

/* Наличие: у отсутствующего товара своя серая точка вместо зелёной галки темы
   (тема рисует галку обоим состояниям) и пояснение, что товар всё равно можно
   заказать — на мебельной витрине это не «нельзя купить». */
.catalog_detail .item-stock .icon.sofa-stock-none{
  display:inline-block;width:9px;height:9px;border-radius:50%;background:#c4c4c4;margin-right:8px}
.catalog_detail .sofa-stock-note{display:block;font-size:12px;color:#8b8b8b;margin-top:4px}

/* «Нашли дешевле?» — ссылка-приглашение под наличием, как на источнике. */
/* «Есть в наличии» и «Нашли дешевле?» стоят в одной строке и должны читаться как пара:
   раньше их центры расходились на 6px (у первого блочный поток, у второго свой отступ
   сверху), и связка выглядела случайной. Общий флекс с выравниванием по центру. */
.catalog_detail .quantity_block_wrapper{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.catalog_detail .quantity_block_wrapper .p_block{display:flex;align-items:center}
.catalog_detail .quantity_block_wrapper .item-stock{display:flex;align-items:center;gap:6px}
.catalog_detail .quantity_block_wrapper .item-stock .icon.stock{margin:0;flex:0 0 auto}
.catalog_detail .cheaper_form{margin-top:0}
.sofa-cheaper-toggle{
  border:0;background:none;padding:0;font-size:13px;color:#555;cursor:pointer;
  border-bottom:1px dotted #b4b4b4;line-height:1.6;transition:color .16s ease,border-color .16s ease}
.sofa-cheaper-toggle:hover{color:#bd1c3c;border-color:#bd1c3c}
.sofa-cheaper-toggle[aria-expanded="true"]{color:#bd1c3c;border-color:transparent}
.sofa-cheaper-lead{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:#555}
.sofa-cheaper .mf-field{margin-bottom:12px}

/*
 * МОДАЛЬНЫЕ ОКНА ПРОЕКТА.
 *
 * У источника окна открывает плагин темы (`data-event="jqm"`) — он не
 * переносился, и «Нашли дешевле?» разворачивала форму прямо в колонке товара.
 * Владелец (п.7): «на оригинале кнопка вызывает красивую модалку, тут поведение
 * сильно отличается». Контур общий: подложка + окно + шапка с крестиком, —
 * следующие окна (обратный звонок, авторизация) лягут в него же.
 *
 * Прямые углы и палитра — как у остального сайта.
 */
.sofa-modal{position:fixed;inset:0;z-index:10040;display:flex;align-items:center;justify-content:center;padding:24px}
.sofa-modal[hidden]{display:none}
.sofa-modal-back{position:absolute;inset:0;background:rgba(20,22,34,.55);opacity:0;transition:opacity .2s ease}
.sofa-modal-win{
  position:relative;width:min(460px,100%);max-height:calc(100vh - 48px);overflow-y:auto;
  background:#fff;border:1px solid #ececec;box-shadow:0 24px 60px rgba(20,22,34,.24);
  opacity:0;transform:translateY(12px) scale(.98);transition:opacity .2s ease,transform .22s cubic-bezier(.2,.9,.2,1)}
.sofa-modal.is-on .sofa-modal-back{opacity:1}
.sofa-modal.is-on .sofa-modal-win{opacity:1;transform:none}
.sofa-modal-head{display:flex;align-items:flex-start;gap:14px;padding:20px 20px 0}
.sofa-modal-t{flex:1 1 auto;margin:0;font-size:19px;line-height:1.25;color:#1d2029;font-weight:700}
.sofa-modal-x{
  flex:0 0 auto;width:30px;height:30px;margin:-4px -4px 0 0;padding:0;border:0;border-radius:0;
  background:none;color:#9b9b9b;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:color .16s ease}
.sofa-modal-x:hover{color:#bd1c3c}
.sofa-modal-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.sofa-modal-body{padding:14px 20px 22px}
@media (max-width:560px){
  .sofa-modal{padding:12px}
  .sofa-modal-win{width:100%}
  .sofa-modal-head{padding:16px 16px 0}
  .sofa-modal-body{padding:12px 16px 18px}
}

/* Короткие факты вместо пустого места справа. */
/* Отбивка от кнопки «В избранное» — 30px вместо 22: список условий читается как отдельный
   блок, а не как продолжение кнопок (замечание владельца). */
/* Класс удвоен НЕ для красоты: тема задаёт `.right_block ul{margin:0 0 27px}`,
   а это на один класс специфичнее одиночного `.sofa-detail-perks` — верхний
   отступ обнулялся, и список условий шёл впритык к кнопке «В избранное»
   (замерено: 1px). Владелец просил этот зазор уже не первый раз. */
.sofa-detail-perks.sofa-detail-perks{margin:28px 0 0;padding:0;list-style:none;border-top:1px solid #f2f2f2}
.sofa-detail-perks li{margin:0;padding:0;list-style:none}
.sofa-detail-perks li:before{content:none}
.sofa-detail-perks li a{
  /* левый отступ 20px вместо 26: галочка стоит вплотную к краю колонки, как остальные
     элементы карточки (замечание владельца — «отступ от левого края уменьшить») */
  display:block;padding:11px 0 11px 20px;border-bottom:1px solid #f2f2f2;
  font-size:13px;line-height:1.4;color:#555;position:relative;transition:color .16s ease}
.sofa-detail-perks li a:before{
  content:"";position:absolute;left:0;top:50%;width:12px;height:12px;margin-top:-6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bd1c3c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat}
.sofa-detail-perks li a:hover{color:#bd1c3c}

/* Вкладка «Наличие» и форма вопроса — тот же ритм, что у текста описания. */
.sofa-stores-tab p{margin:0 0 10px;line-height:1.65}
.sofa-ask-tab{max-width:620px}

/* Покупка на деталке: контрол во всю ширину колонки и высотой 50px, как кнопка
   до него. Базовые правила `.mc-cartctl` писались под карточку списка (42px и
   боковые отступы) — здесь они не годятся. */
.catalog_detail .sofa-detail-cart{--mcc-h:50px;margin:0;width:100%}
.catalog_detail .sofa-detail-cart .mcc-on{
  display:flex;align-items:stretch;gap:10px}
.catalog_detail .sofa-detail-cart .mcc-status{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid #ececec;background:#fff;color:#1d2029;font-size:14px;font-weight:700;
  text-decoration:none;transition:border-color .16s ease,color .16s ease}
.catalog_detail .sofa-detail-cart .mcc-status:hover{border-color:#bd1c3c;color:#bd1c3c}
.catalog_detail .sofa-detail-cart .mcc-ok{color:#3aa76d;flex:0 0 auto}
/* Без внутренних полей: с padding:0 6px между рамкой блока и кнопками «−»/«+»
   оставалась мёртвая полоска, и кнопки выглядели вставленными, а не частью
   контрола (замечание владельца). Кнопки прижаты к краям и тянутся во всю высоту,
   поэтому клик работает по всему углу блока, а не только по глифу. */
.catalog_detail .sofa-detail-cart .mcc-step{
  flex:0 0 148px;display:flex;align-items:stretch;justify-content:space-between;
  border:1px solid #ececec;background:#fff;padding:0}
.catalog_detail .sofa-detail-cart .mcc-step button{
  width:42px;height:auto;align-self:stretch;border:0;background:none;font-size:18px;line-height:1;
  color:#555;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:color .16s ease,background .16s ease}
.catalog_detail .sofa-detail-cart .mcc-step button:hover{background:#faf5f6}
.catalog_detail .sofa-detail-cart .mcc-step button:hover{color:#bd1c3c}
.catalog_detail .sofa-detail-cart .mcc-step button:disabled{color:#d0d0d0;cursor:default}
.catalog_detail .sofa-detail-cart .mcc-n{font-size:15px;font-weight:700;color:#1d2029}
/* На узком экране «В корзине» и счётчик делят 390px: без этих поправок подпись
   налезала на галку. */
@media(max-width:600px){
  .catalog_detail .sofa-detail-cart .mcc-on{gap:8px}
  .catalog_detail .sofa-detail-cart .mcc-status{min-width:0;padding:0 8px;font-size:13px;white-space:nowrap}
  .catalog_detail .sofa-detail-cart .mcc-step{flex:0 0 118px}
  .catalog_detail .sofa-detail-cart .mcc-step button{width:30px}
}

/*
 * Карточка списка живёт не только в каталоге (D-0097): те же `.item_block`
 * стоят в блоке «похожие товары» на деталке. Правила вида карточки писались с
 * предком `.sofa-catalog` — на деталке этого класса нет, и карточка приезжала
 * полураздетой: обе строки наличия сразу («Есть в наличииНет в наличии»),
 * счётчик в вечной плашке ожидания. Повторяем их без привязки к странице —
 * классы `.sofa-stock`, `.mc-cartctl` проектные, спутать их не с чем.
 */
.item_block .item-stock.sofa-stock{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:#6d6d6d}
/* margin:0 — иначе к gap флекса добавляется собственный отступ иконки из темы, и до
   подписи набегает 12px вместо 6: точка выглядела оторванной от текста. */
.item_block .sofa-stock .icon.stock{
  width:8px;height:8px;border-radius:50%;background:#4a9c5d;display:inline-block;margin:0;flex:0 0 auto}
.item_block .sofa-stock.s-0 .icon.stock{background:#c9ccd3}
.item_block .sofa-stock.s-1 .sofa-out,
.item_block .sofa-stock.s-0 .sofa-in{display:none}
.item_block .mc-cartctl[data-in-stock="0"] .mcc-add,
.item_block .mc-cartctl[data-in-stock="0"] .mcc-on{display:none}
.item_block .mc-cartctl[data-in-stock="0"]::after{
  content:"Нет в наличии";
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border:1px solid #ececec;background:#fafafa;color:#8b8b8b;font-size:13px;
  text-align:center;box-sizing:border-box}
/* Отсутствующий товар и многовариантный: плашка ожидания им не нужна — их вид
   известен сразу, из разметки. Серой заглушки в состоянии ожидания больше нет
   (кнопка просто приглушается), поэтому гасить `::before` не требуется —
   осталось только вернуть полную непрозрачность и клик. */
.item_block .mc-cartctl[data-offer=""]:not([data-in-stock="0"]) .mcc-on{display:none}
.item_block .mc-cartctl[data-offer=""]:not([data-in-stock="0"]).is-resolving{pointer-events:auto}
.item_block .mc-cartctl[data-offer=""]:not([data-in-stock="0"]).is-resolving .mcc-add{opacity:1!important}

/* Похожие товары: та же сетка и та же карточка, что в списке. */
.sofa-related{margin-top:40px}
.sofa-related-t{margin:0 0 18px;font-size:22px;line-height:1.2;color:#1d2029}
/* Колонки не объявляем — блок печатается с классом `.mc-grid`, а его сетка
   одна на весь проект (см. «ЧИСЛО КОЛОНОК» выше). */

/* Кнопка покупки — 50px высотой, во всю ширину колонки; кнопки избранного
   (их дорисовывает decorateDetail) — отдельной строкой под ней. */
.catalog_detail .buy_block{margin-top:20px}
.catalog_detail .buy_block .to-cart,
.catalog_detail .buy_block .btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:50px;padding:0 30px;font-size:15px;font-weight:700;
  box-sizing:border-box}
/* Избранное — компактной кнопкой рядом, а не плашкой во всю ширину колонки:
   растянутая на 478px рамка вокруг сердечка читалась как вторая кнопка покупки. */
.catalog_detail .buy_block [data-muse-detail-actions]{display:inline-block;width:auto;margin-top:12px}
.catalog_detail .buy_block .muf-dbtn{
  display:inline-flex;align-items:center;gap:8px;width:auto;min-height:0;padding:8px 14px;
  border:1px solid #ececec;background:#fff;color:#555;font-size:13px;font-weight:400;cursor:pointer;
  transition:border-color .16s ease,color .16s ease}
.catalog_detail .buy_block .muf-dbtn:hover{border-color:#bd1c3c;color:#bd1c3c}
.catalog_detail .buy_block .muf-dbtn[aria-pressed="true"]{color:#bd1c3c;border-color:#bd1c3c}
.catalog_detail .buy_block .muf-dbtn::after{content:"В избранное"}
.catalog_detail .buy_block .muf-dbtn[aria-pressed="true"]::after{content:"В избранном"}

/*
 * Мобильная деталка: фото исчезало целиком (D-0078). Тема на ≤600px прячет
 * все div-дети слайдера без класса .flex (`body .item_main_info
 * .item_slider:not(.flex) > div{display:none!important}`) — она ждёт свой
 * мобильный флекс-слайдер, которого мы не подключали. Наша галерея — один
 * кадр в .slides > ul > li.current с абсолютным позиционированием от
 * десктопного слайдера. Возвращаем блоку видимость и складываем в обычный
 * поток: кадр статичен, фото на всю ширину.
 */
@media (max-width: 600px){
  body .catalog_detail .item_main_info .item_slider:not(.flex) > .slides{
    display:block!important;height:auto!important;padding:10px 0 0;overflow:visible}
  .catalog_detail .item_main_info .item_slider .slides ul{margin:0;padding:0}
  .catalog_detail .item_main_info .item_slider .slides li.current{
    position:static;height:auto;line-height:normal}
  .catalog_detail .item_main_info .item_slider .slides li.current img{
    position:static;display:block;width:auto;max-width:100%;max-height:340px;margin:0 auto}
}

/*
 * Страница результатов поиска (/search/).
 *
 * Форма стояла браузерными дефолтами — серая системная кнопка и поле с
 * рамкой ОС (владелец, п.21: «уродство»). Классы кнопок темы не подходят:
 * `.btn.btn-default` в шаблоне растянут на всю ширину под кнопку карточки.
 * Поэтому свои контролы, но в палитре темы: прямые углы, акцент #bd1c3c.
 */
.sofa-search-form{display:flex;gap:0;max-width:640px;margin:0 0 28px}
.sofa-search-input{
  flex:1 1 auto;min-width:0;height:46px;padding:0 16px;
  border:1px solid #e3e3e3;border-right:0;border-radius:0;background:#fff;
  font-family:inherit;font-size:15px;color:#1d2029;outline:0;
  transition:border-color .16s ease}
.sofa-search-input::placeholder{color:#9b9b9b}
.sofa-search-input:focus{border-color:#bd1c3c}
.sofa-search-go{
  flex:0 0 auto;height:46px;padding:0 30px;border:1px solid #bd1c3c;border-radius:0;
  background:#bd1c3c;color:#fff;font-family:inherit;font-size:14px;font-weight:700;
  cursor:pointer;transition:background .16s ease,border-color .16s ease}
.sofa-search-go:hover{background:#a81834;border-color:#a81834}
.sofa-search-corrected{margin:-14px 0 22px;color:#6d6d6d;font-size:13.5px}
@media (max-width:560px){
  .sofa-search-form{max-width:none}
  .sofa-search-go{padding:0 18px}
}


/* --- Высота карточки: убираем воздух под кнопкой --------------------------
 *
 * Под контролом «В корзину» оставалось 41px пустоты (14px собственного отступа
 * плюс 26px нижнего поля карточки) — при наведении, когда кнопка уже видна, это
 * читалось как незаполненная полоса (замечание владельца). Оставляем 20px:
 * кнопка не липнет к краю, но карточка не тянется вниз без причины.
 */
.mc-grid .item_block .catalog_item,
.catalog_block .item_block .catalog_item{padding-bottom:14px}
.item_block .mc-cartctl.mc-cartctl{margin-top:8px;margin-bottom:6px}


/* --- Панель каталога на телефоне ------------------------------------------
 *
 * Было: сортировка отдельной строкой без единой границы (её просто не видно как
 * управляющий элемент), под ней розовая кнопка «Фильтры» с красной рамкой —
 * самый громкий элемент экрана, хотя это служебное действие, а не покупка.
 * Владелец: «кнопочку фильтров лучше поскромнее стилизовать + кнопочку
 * сортировки (не видно границ)».
 *
 * Стало: два одинаковых нейтральных элемента в одну строку, под ними — счётчик
 * найденного. Акцент остался только на числе выбранных фильтров.
 */
@media (max-width:767px){
    /* Класс удвоен: ядро держит панель на `display:grid` и грузится после
     проектных файлов — одиночный класс проигрывает по порядку. */
  .sofa-catalog .mc-bar.mc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
    .sofa-catalog .mc-bar.mc-bar .mc-filters-toggle{order:1;flex:1 1 0;min-width:0;margin:0}
    .sofa-catalog .mc-bar.mc-bar .mc-sortbox{order:2;flex:1 1 0;min-width:0;margin:0}
    .sofa-catalog .mc-bar.mc-bar .mc-total{order:3;flex:1 0 100%;margin:0;font-size:12px;color:#8b8b8b}
  /* Поиск внутри панели на телефоне не нужен: он есть в шапке, а третьим
     элементом в ряду ломает раскладку. */
  .sofa-catalog .mc-bar.mc-bar .mc-search{order:4;flex:1 0 100%;margin:0}

  .sofa-catalog .mc-bar .mc-filters-toggle,
  .sofa-catalog .mc-bar .mc-sort-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;height:44px;padding:0 12px;
    background:#fff;border:1px solid #e0e0e0;border-radius:0;
    font-size:13px;font-weight:600;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sofa-catalog .mc-bar .mc-filters-toggle.mc-active{background:#fff;border-color:#e0e0e0;color:#333}
  .sofa-catalog .mc-bar .mc-filters-toggle svg{width:16px;height:16px;flex:0 0 16px;color:#8b8b8b}
  /* Число выбранных фильтров — единственный акцент в этой строке. */
  .sofa-catalog .mc-bar .mc-filter-count{
    flex:0 0 auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
    background:#bd1c3c;color:#fff;font-size:11px;line-height:18px;font-weight:700}
  .sofa-catalog .mc-bar .mc-sort-btn i{border-color:#8b8b8b}
}