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

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

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

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

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

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

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

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

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

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

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

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

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

/*
 * Мегаменю каталога: родитель отличается от подпунктов.
 *
 * Правило выше выравнивает ВСЕ ссылки выпадающих меню в один служебный
 * набор — 14px/400/#555. В мегаменю из-за этого раздел и его подкатегории
 * читались одинаково, и иерархия пропадала (владелец, п.18). Родителю
 * возвращаем вес и тёмный цвет, подпункты сдвигаем и делаем светлее —
 * тогда список читается как «раздел → что внутри».
 */
/* Признак текстовой ссылки родителя — `.name` внутри: у второй ссылки того же
   пункта (кадр раздела) его нет. Структурнее и надёжнее, чем `:has()`. */
.menu-row .mega-menu .dropdown-menu li.parent-items > a > .name {
    font-weight: 700;
    font-size: 15px;
    color: #1d2029;
}
.menu-row .mega-menu .dropdown-menu li.parent-items > a:hover > .name {
    color: #bd1c3c;
}
/* Подпункты — на ступень внутрь и на тон светлее родителя.
   Ступень даём внешним отступом ПУНКТА, а не padding ссылки: свой
   `padding-left:20px !important` тема держит на
   `.menu-row .mega-menu table td.wide_menu .dropdown-submenu .dropdown-menu > li > a`,
   и перебить его можно было бы только вторым !important. Отступ снаружи
   в эту гонку не вступает. */
.menu-row .mega-menu .dropdown-menu li.parent-items > ul.dropdown-menu > li {
    margin-left: 12px;
}
/* Цвет подпунктам не переопределяем: служебный #555 из правила выше уже
   контрастирует с тёмным родителем, а свои `color` тема держит с !important. */
/* Отбивка «шапка раздела → его список»: 6px после родителя вместо слипшихся строк. */
.menu-row .mega-menu .dropdown-menu li.parent-items > ul.dropdown-menu {
    margin-top: 6px;
}
/*
 * Картинка раздела была выше первой строки текста на 7px (замер: img top 178,
 * ссылка родителя 185) — колонка выглядела сдвинутой. Выравниваем по верху
 * строки: у ссылки родителя есть свой padding-top 2px, столько же даём кадру.
 */
.menu-row .mega-menu .dropdown-menu li.parent-items .menu_img {
    margin-top: 7px;
}

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

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

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

/* --- «О компании» на главной ------------------------------------------------ */

/*
 * Два товара рядом с рассказом о компании. Стоят парой в один ряд, а не
 * колонкой: колонкой они уезжали ниже кнопки «Подробнее» и блок терял опору —
 * текст заканчивался, а картинки продолжались.
 */
.company_bottom_block .sofa-company-pick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.company_bottom_block .sofa-company-pick .sofa-pick-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.company_bottom_block .sofa-company-pick .sofa-pick-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
    background: #f2f2f2;
}

.company_bottom_block .sofa-company-pick .sofa-pick-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 17px;
    color: #222;
}

.company_bottom_block .sofa-company-pick .sofa-pick-price {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 700;
    color: #bd1c3c;
}

.company_bottom_block .sofa-company-pick .sofa-pick-card:hover .sofa-pick-name {
    color: #bd1c3c;
}

@media (max-width: 767px) {
    .company_bottom_block .sofa-company-pick {
        gap: 12px;
    }
}

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

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

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

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

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

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

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


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

/* --- Залипшая шапка: четыре иконки одним рядом ----------------------------
 *
 * До этого справа стояли три блока с разной внутренней геометрией: наши иконки
 * по 40px вплотную, кабинет — иконка 21px в блоке 80px, поиск — 30px в блоке
 * 80px. Шаг между центрами шёл 42 → 60 → 80px, и ряд выглядел рассыпанным.
 * Приводим все четыре к одному размеру и одному зазору.
 */
/* Ширину 80px задаёт не сама ячейка, а обёртка `.wrap_icon` внутри неё —
 * поэтому сбрасываем оба уровня, иначе ряд снова расходится шагом 44/60/80. */
#headerfixed .inner-table-block.small-block,
#headerfixed .inner-table-block.small-block .wrap_icon,
#headerfixed .inner-table-block.small-block.inline-search-show{width:auto;min-width:0}
#headerfixed .wrap_cabinet .personal-link,
#headerfixed .inline-search-show .search-block{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;margin:0}
#headerfixed .wrap_cabinet .personal-link i.svg,
#headerfixed .inline-search-show .search-block i.svg{margin:0}
/* Зазор между иконками одинаковый по всему ряду: свои две держит gap группы,
 * кабинет и поиск — отступом блока. */
.sofa-shopicons--fixed{gap:4px}
#headerfixed .inner-table-block.small-block + .inner-table-block.small-block{padding-left:4px}


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

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

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

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

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