/**
 * Главная: единая типографика, сетка, вертикальный ритм и кнопки.
 *
 * Файл подключается всем посетителям (с 04.08.2026, до этого был предпросмотр
 * по /?newdesign=1). Подключение — в bitrix/php_interface/init.php, там же
 * осталась задвижка /?newdesign=0 — вернуть себе прежнюю вёрстку.
 *
 * Почему так много перекрытий и !important: блоки главной нарисованы тремя
 * разными наборами стилей (решение intec, шаблоны прежней студии, наши),
 * а отступы блоков конструктор пишет инлайном в атрибут style — иначе их
 * не перебить. Подробности — в docs/ustroystvo-verstki.md.
 */

/* ══════════ 1. Типографика ══════════
   У сайта две гарнитуры: заголовки — Title-golos, текст — Montserrat.
   Из этого выпадали «Хит недели» и «Наша цель» — оба на Montserrat. */

/* Заголовок раздела: 24 px, как у «Преимуществ», «Нам доверяют», «Отзывов».
   У «О компании» селектор длинный не случайно: правило решения
   .widget.c-about-ref.c-about-ref-template-2 .widget-name иначе перевешивает. */
.intec-template-layout-content .h-title,
.widget.c-about-ref .widget-name {
    font-family: 'Title-golos', 'Montserrat', sans-serif;
    font-size: 24px !important;
    font-weight: 400;
    line-height: 1.3;
    color: #1b1e25;
}

/* Заголовок первого экрана — на ступень крупнее заголовков разделов */
.container-926 h2 {
    font-family: 'Title-golos', 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.25;
    color: #1b1e25;
}

/* Подзаголовок был 25,6 px против 29,9 px у заголовка — иерархии не читалось */
.container-926 h3 {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #5a5f6b;
}

/* Заголовок пункта внутри блока. Было четыре разных вида для элементов одного
   порядка: преимущество 21/700/Golos, пункт «О компании» 16/400/Montserrat,
   имя в отзыве 16/600. Golos оставляем только заголовкам разделов — так сразу
   видно, где начинается новый раздел. */
/* Селектор для преимуществ длиннее остальных не случайно: в css/custom.css
   прежней студии стоит .widget.c-advantages.c-advantages-template-2
   .widget-element-name { font-size: 21px !important } — коротким селектором
   его не перебить даже с !important. */
.widget.c-advantages.c-advantages-template-2 .widget-element .widget-element-name,
.widget-advantages-item-name,
.imfood-review-card-name {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #2d2d2d !important;
}

/* Текст под заголовком пункта: был 14 #2d2d2d, 14 #808080 и 16 #4a4a4a */
.c-advantages .widget-element-description,
.imfood-review-card-text {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #4a4a4a !important;
}

/* пояснения в «О компании» второстепенные — цвет у них светлее осознанно */
.widget-advantages-item-preview {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #808080 !important;
}

/* надзаголовок «О КОМПАНИИ» был 10 px — на телефоне почти нечитаем */
.c-about-ref .widget-title {
    font-size: 12px !important;
    line-height: 1.4 !important;
}

@media (max-width: 960px) {
    .intec-template-layout-content .h-title,
    .widget.c-about-ref .widget-name {
        font-size: 20px !important;
    }

    .widget.c-advantages.c-advantages-template-2 .widget-element .widget-element-name,
    .widget-advantages-item-name,
    .imfood-review-card-name {
        font-size: 16px !important;
    }

    .c-advantages .widget-element-description,
    .widget-advantages-item-preview,
    .imfood-review-card-text {
        font-size: 14px !important;
    }
}

@media (max-width: 767px) {
    /* оба заголовка «Наша цель» не уменьшались вовсе и переносились на телефоне */
    .container-926 h2 {
        font-size: 24px;
    }

    .container-926 h3 {
        font-size: 16px;
    }
}

/* ══════════ 2. Сетка ══════════
   Контейнер сайта — 1200 px с полями 20 px. Ему следовали не все. */

/* «Хит недели» жил в жёстких 1100 px и центрировался внутри 1200 —
   отсюда сдвиг заголовка и карточек вправо на 50 px */
.mySwiper {
    width: 100%;
}

/* «Наша цель» растягивалась во всю ширину окна мимо контейнера */
.container-926 > div {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1200px;
}

/* Заголовок «Хита недели» был опущен на 20 px относительными координатами —
   из-за этого не вставал в одну линию с заголовками соседних блоков */
.nav-r {
    position: static;
    top: auto;
}

/* Пустой абзац от старого шаблона: невидимый, но добавлял 20 px пустоты
   между «Нашей целью» и «Хитом недели» */
.c-advantages .bx-section-desc {
    display: none;
}

/* Крайние элементы блока «Наша цель» добавляли свои 35 и 25 px поверх
   общего отступа между блоками */
.container-926 h2:first-child {
    margin-top: 0;
}

.container-926 h3:last-child {
    margin-bottom: 0;
}

@media (max-width: 960px) {
    /* .nav-r добавлял «Хиту недели» свои 20 px и снова уводил заголовок из сетки */
    .nav-r {
        padding: 0;
    }
}

/* ══════════ 3. Вертикальный ритм ══════════
   Между блоками было 50 / 100 / 42 / 50 px. Делаем один шаг: 60 px на
   десктопе, 40 px на телефоне — по 30 (20) px сверху и снизу у каждого блока.
   Отступы конструктор пишет инлайном, поэтому ловим их по атрибуту style.

   Именно padding, а не margin: соседние margin схлопываются между собой, и
   вместо 60 px получалось то 30, то 22 — как раз тот разнобой, который чиним. */

.intec-template-layout-content div[style*="margin-top: 50px"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.intec-template-layout-content div[style*="padding-top: 50px"] {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

/* у этих двух блоков своих вертикальных отступов не было вовсе */
.container-926,
.container-895 {
    margin: 0;
    padding: 30px 0;
}

/* Выключенные в конструкторе блоки остаются в разметке пустыми — отступы им
   не нужны, иначе на главной появляется 60 px пустоты ни за чем.
   Отбираем по содержимому, а не по номеру контейнера: номера меняются, когда
   блок пересобирают в конструкторе. В браузерах без :has() (Safari до 15.4)
   правило просто не сработает — тогда останется прежний лишний воздух. */
.intec-template-layout-content div[style*="margin-top: 50px"]:not(:has(.widget, .catalog-section)),
.intec-template-layout-content div[style*="padding-top: 50px"]:not(:has(.widget, .catalog-section)) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* лишние 25 px сверху у блока «Преимущества» — тоже инлайн, из шаблона */
.c-advantages[style*="padding-top: 25px"] {
    padding-top: 0 !important;
}

/* «Хит недели» физически лежит внутри блока «Преимущества»,
   поэтому расстояние между ними задаём отдельно */
.c-advantages .widget-header {
    margin-top: 60px;
}

@media (max-width: 767px) {
    .intec-template-layout-content div[style*="margin-top: 50px"],
    .intec-template-layout-content div[style*="padding-top: 50px"] {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .container-926,
    .container-895 {
        padding: 20px 0;
    }

    .c-advantages .widget-header {
        margin-top: 40px;
    }

}

/* ══════════ 3a. Блок «Преимущества» ══════════
   Пункт разворачиваем в строку: иконка слева, заголовок и текст справа —
   как в блоке «О компании» ниже по странице. Иконка сверху съедала высоту,
   а между ней и заголовком зияло ~20 px: половину давала сама картинка
   (файл 64×64, рисунок внутри занимает 9…48, снизу 15 px прозрачных полей),
   половину — padding-top заголовка.

   Именно grid, а не flex: иконка, заголовок и описание лежат в разметке
   тремя соседями, флекс поставил бы их в три колонки. */

.c-advantages .widget-element {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
}

.c-advantages .widget-element-icon {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0;
}

.widget.c-advantages.c-advantages-template-2 .widget-element-name {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
    padding: 0;
}

.c-advantages .widget-element-description {
    grid-column: 2;
    grid-row: 2;
    margin-top: 10px;
}

@media (min-width: 768px) {
    /* На десктопе пунктов не четыре в ряд, а два: со значком сбоку в колонке
       263 px заголовки ломались на пять строк. В двух колонках блок читается
       так же, как «О компании». */
    .c-advantages .widget-content > .intec-grid > * {
        flex: 0 0 50% !important;
        margin-bottom: 28px;
        width: 50% !important;
        max-width: 50% !important;
    }
}

/* ══════════ 4. Карточка «Хита недели» ══════════
   Была нерезиновой: ширина 461 px на любом экране, фото жёстко 300 px и
   растянутое по кадру, внутренние поля 30 / 25 / 18% / 12% вразнобой,
   название с фиксированной высотой и обрезкой. */

.sl-item {
    align-items: stretch;
    padding: 20px;
    border-radius: 20px;
}

.slp {
    width: 100%;
    height: auto;
    /* было object-fit: fill — неквадратные фотографии сплющивало */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
}

.sl-title {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 0;
    padding: 16px 0 0;
    height: auto;
    min-height: 62px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.r-weight {
    padding: 0;
    gap: 8px;
}

/* цена стояла с отступом 30 px и не попадала на одну линию с названием и весом */
.sl-item .product-item-price-container {
    padding: 0;
    margin: 8px 0;
}

.r-butn-sl {
    padding: 16px 0 0;
}

/* На узком экране карточек в ряду две, внутри остаётся ~110 px — счётчик и
   кнопка рядом уже не помещались и наезжали друг на друга. Ставим их
   друг под другом, кнопку — во всю ширину карточки. */
@media (max-width: 380px) {
    .r-butn-sl {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .product-item-amount {
        text-align: center;
    }
}

@media (max-width: 767px) {
    .sl-item {
        padding: 12px;
    }

    .sl-title {
        padding: 12px 0 0;
        min-height: 48px;
        font-size: 14px;
        line-height: 20px;
    }

    .r-butn-sl {
        padding: 12px 0 0;
    }
}

/* ══════════ 5. Баннер первого экрана ══════════ */

@media (max-width: 960px) {
    /* заголовок на телефоне был обычного начертания, на десктопе жирный —
       одна и та же надпись выглядела двумя разными */
    .c-slider .widget-item-header {
        font-weight: 700 !important;
    }
}

/* Логотип в мобильной шапке. Геометрически он выровнен с иконками — центры
   совпадают, — но у картинки сверху вишенка, поэтому буквы оптически сидят
   ниже строки. Приподнимаем, положение в потоке не меняется. */
.c-header.c-header-template-1 .widget-view.widget-view-mobile .widget-logotype img {
    position: relative;
    top: -9px;
}

/* ══════════ 6. Слайдер отзывов на телефоне ══════════
   Стрелки лежат абсолютом по краям ленты. На десктопе для них отведены поля
   по 40 px, а на узких экранах шаблон решения обнуляет padding — и стрелки
   наезжают на карточку. Листать можно свайпом и точками, поэтому убираем. */

@media (max-width: 600px) {
    .c-reviews .intec-ui-control-navigation {
        display: none !important;
    }

    /* Поля по 30 px держались под стрелки — без них лента занимает всю ширину.
       Селекторы длинные: и наш прежний отступ ленты, и padding карточки из
       шаблона отзывов записаны через .widget.c-reviews.c-reviews-template-7. */
    .widget.c-reviews.c-reviews-template-7.imfood-reviews .widget-items {
        margin-left: 0;
        margin-right: 0;
    }

    /* 40 px сверху в карточке остались от штатного варианта с фотографией автора */
    .widget.c-reviews.c-reviews-template-7 .widget-item.imfood-review-card {
        padding: 20px;
    }

    .c-reviews .intec-ui-control-dots {
        margin-top: 16px;
    }

    /* «Нам доверяют»: под стрелки отводилось по 70 px с каждой стороны, лента
       сжималась до 191 px из 331 — логотипы жались в середину, а сами стрелки
       ещё и заходили на ленту на 10 px. Точек у этого слайдера нет, поэтому
       стрелки оставляем, но убираем в поля ровно по своей ширине. */
    .widget.c-brands.c-brands-template-1 .widget-content {
        padding-left: 0;
        padding-right: 0;
    }

    .widget.c-brands.c-brands-template-1 .widget-items {
        /* !important: у шаблона правило с такой же силой, но подключается позже */
        margin-left: 48px !important;
        margin-right: 48px !important;
    }

    /* стрелки отсчитываются от контейнера навигации, он шире ленты на 30 px,
       поэтому смещение здесь −18, а не −48 */
    .widget.c-brands.c-brands-template-1 .slider-button-left {
        left: -18px !important;
    }

    .widget.c-brands.c-brands-template-1 .slider-button-right {
        right: -18px !important;
    }
}

/* ══════════ 7. Кнопки ══════════
   Было четыре вида: радиусы 32 / 3 / 2 / 0, высоты 64 / 50 / 54 / 32,
   кегли 16 / 12 / 10 / 14 и два разных цвета. Сводим к одному виду —
   скруглённому, как кнопка баннера в десктопной версии. */

.widget-item-button,
.c-about-ref .widget-button,
.imfood-review-form-toggle {
    border-radius: 999px !important;
}

/* Кнопка «Узнать подробнее» выбивалась из общего ряда: 10 px, капслок и
   разрядка в 1 px — рядом с «Оформить заказ» и «Оставьте свой отзыв»
   читалась как другой шрифт. Приводим к обычному виду.
   !important нужен: правило решения на .intec-ui-control-button длиннее. */
.c-about-ref .widget-button {
    padding: 0 28px;
    height: 48px;
    font-size: 14px !important;
    line-height: 48px;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.imfood-review-form-toggle {
    padding: 0 24px;
    height: 40px;
    font-size: 14px;
}

/* кнопка корзины в «Хите недели»: была чёрная #1a1a1a, остальные — #383b47 */
.sl-b {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background-color: #383b47;
    border-color: #383b47;
}

@media (max-width: 960px) {
    .sl-b {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 767px) {
    .c-about-ref .widget-button {
        height: 40px;
        line-height: 40px;
    }

    /* на телефоне кнопка «Узнать подробнее» стояла у левого края —
       ставим по центру блока */
    .widget.c-about-ref.c-about-ref-template-2 .widget-buttons {
        display: flex;
        justify-content: center;
    }
}

/* Кнопка корзины на узком экране — во всю ширину карточки, под счётчиком.
   Стоит в конце файла осознанно: правило .sl-b { width: 40px } из блока
   до 960 px идёт выше и при равной силе перебило бы это. */
@media (max-width: 380px) {
    .sl-b {
        width: 100%;
    }
}

/* Иконка корзины была 10×10 — в широкой кнопке терялась и читалась как
   смещённая. Делаем крупнее, чтобы центр был очевиден. */
@media (max-width: 960px) {
    .sl-b svg {
        width: 16px;
        height: 16px;
    }
}