/*
 * Тонкая настройка каталога под источник (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("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("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%}

/* ── 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}

/*
 * Иконка «в избранное» — ТОЛЬКО при наведении на карточку (как и просили),
 * но без мигания. Мигало из-за того, что блок появлялся ровно в момент
 * наведения и сам перехватывал курсор: микродрожание на границе давало
 * «появилась-исчезла». Лечится задержкой на скрытие: показ мгновенный,
 * уход — через .25s, поэтому проход курсора по карточке не мигает.
 */
/* ТОЛЬКО там, где наведение существует: на тач-экранах :hover не наступает,
   и спрятанная иконка означала бы, что избранное с телефона недоступно вовсе —
   там она остаётся видимой всегда (ядровое .mc-actions-always). */
@media (hover: hover) and (pointer: fine){
.sofa-catalog .item_block .muf-acts{
  opacity:0;pointer-events:none;
  transition:opacity .16s ease .25s}
.sofa-catalog .item_block:hover .muf-acts,
.sofa-catalog .item_block:focus-within .muf-acts,
.sofa-catalog .item_block.sofa-hover .muf-acts{
  opacity:1;pointer-events:auto;transition:opacity .14s ease 0s}
}
/* отмеченное избранное видно всегда — иначе непонятно, что товар уже добавлен */
.sofa-catalog .item_block .muf-acts:has([aria-pressed="true"]){opacity:1;pointer-events:auto}
.sofa-catalog .item_block .muf-heart{transition:color .15s ease,transform .15s ease}
.sofa-catalog .item_block .muf-heart:hover{transform:scale(1.08)}

/*
 * Блок «галка + счётчик», который встаёт на место кнопки «В корзину».
 * Слева его прижимало сильнее, чем справа: галка-переход в корзину и степпер
 * лежали в потоке без выравнивания, а сам контрол наследовал внешние отступы
 * кнопки. Раскладываем в ряд с равными полями по краям.
 */
.sofa-catalog .item_block .mc-cartctl .mcc-on{
  display:flex;align-items:center;justify-content:center;gap:10px;padding:0 10px;box-sizing:border-box}
.sofa-catalog .item_block .mc-cartctl .mcc-step{
  display:inline-flex;align-items:center;justify-content:center;gap:6px}
.sofa-catalog .item_block .mc-cartctl .mcc-status{flex:0 0 auto;margin:0}

/*
 * Товар не в наличии: вместо активной кнопки — спокойная надпись (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;
  transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,
             padding-left .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:0;transform:translateX(-7px);
  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);
  padding-left:26px}
.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)}
.sofa-catalog .item_block .to_cart:hover::before,
.sofa-catalog .item_block .to_cart:focus-visible::before,
.catalog_detail .buy_block .to-cart:hover::before,
.catalog_detail .buy_block .to-cart:focus-visible::before{opacity:1;transform:none}
/* На деталке иконка темы уже есть в разметке (`<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)}
  .sofa-catalog .mc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* разлиновку рисует inset-тень карточки; соседние ячейки перекрываются на
     1px родным margin-right:-1px, ряды прижимаем сами — иначе двойная линия */
  .sofa-catalog .mc-grid .item_block{width:100%;margin-top:-1px}
}

/*
 * Деталка товара (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}

/* Галерея: превью под большим фото. Появляются, только когда кадров больше одного. */
.sofa-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:center}
.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}
.sofa-thumb img{max-width:100%;max-height:100%;display:block}
.sofa-thumb:hover{border-color:#c9ccd3}
.sofa-thumb.is-on{border-color:#bd1c3c}

/* Наличие: у отсутствующего товара своя серая точка вместо зелёной галки темы
   (тема рисует галку обоим состояниям) и пояснение, что товар всё равно можно
   заказать — на мебельной витрине это не «нельзя купить». */
.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}

/* «Нашли дешевле?» — ссылка-приглашение под наличием, как на источнике. */
.catalog_detail .cheaper_form{margin-top:10px}
.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{margin-top:16px;padding:16px 18px;border:1px solid #ececec;background:#fafafa}
.sofa-cheaper-lead{margin:0 0 12px;font-size:13px;line-height:1.5;color:#555}
.sofa-cheaper .mf-field{margin-bottom:10px}

/* Короткие факты вместо пустого места справа. */
.sofa-detail-perks{margin:22px 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{
  display:block;padding:11px 0 11px 26px;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:2px;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}
.catalog_detail .sofa-detail-cart .mcc-step{
  flex:0 0 148px;display:flex;align-items:center;justify-content:space-between;
  border:1px solid #ececec;background:#fff;padding:0 6px}
.catalog_detail .sofa-detail-cart .mcc-step button{
  width:36px;height:100%;border:0;background:none;font-size:18px;line-height:1;color:#555;cursor:pointer;
  transition:color .16s ease}
.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}
.item_block .sofa-stock .icon.stock{width:8px;height:8px;border-radius:50%;background:#4a9c5d;display:inline-block}
.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}
.item_block .mc-cartctl[data-in-stock="0"].is-resolving::before{content:none}
.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::before{content:none}
.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}
.sofa-related-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
@media(max-width:760px){
  .sofa-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sofa-related-grid .item_block{width:100%;margin-top:-1px}
}

/* Кнопка покупки — 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}
}