/*
 * Шапка и подвал: приведение типографики к одной шкале.
 *
 * Гарнитура на витрине одна (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;
}

/* Поиск и «Войти» в одной строке с телефоном — тот же служебный размер. */
#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;
    }
}