/* Блоки страниц ЖБИ (раздел /zhelezobetonnye-izdeliya/, его категории и карточки товаров).
   Подключается в templates/base.tpl только для ресурсов из дерева id 917. */

/* Первый экран: иконки 05–08 добавлены в png-sprite.png (ряд справа от .sprite-up).
   ?v= — чтобы не показывался закешированный старый спрайт без новых иконок. */
.sprite-pluses-zhbi1,
.sprite-pluses-zhbi2,
.sprite-pluses-zhbi3,
.sprite-pluses-zhbi4 {
    width: 45px;
    height: 45px;
    background-image: url(/assets/template/images/png-sprite.png?v=zhbi1);
}
.sprite-pluses-zhbi1 { background-position: -87px -303px; }
.sprite-pluses-zhbi2 { background-position: -142px -303px; }
.sprite-pluses-zhbi3 { background-position: -197px -303px; }
.sprite-pluses-zhbi4 { background-position: -252px -303px; }

/* Наши преимущества */
.advantages__icon {
    display: block;
    width: 95px;
    height: 95px;
    margin-bottom: 10px;
}

/* Способы оплаты: фото шаланды, слева уходит в светло-серый, справа проступает */
.payment--zhbi {
    background:
        linear-gradient(90deg, #e8ebee 0%, #e8ebee 52%, rgba(232, 235, 238, .78) 68%, rgba(232, 235, 238, .55) 100%),
        url(/assets/template/images/zhbi/payment-bg-zhbi.jpg) no-repeat right center;
    background-size: cover;
}
.payment__steps {
    max-width: 420px;
    margin-bottom: 30px;
}
.payment__steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.payment__step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}
.payment__step:last-child {
    margin-bottom: 0;
}
.payment__step-num {
    flex: 0 0 36px;
    height: 36px;
    border-radius: 50%;
    background: #294a6c;
    color: #fbbe37;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.payment__step-title {
    font-weight: 700;
    font-size: 17px;
    margin: 4px 0;
}
.payment__step-text {
    font-size: 15px;
    line-height: 1.4;
    color: #555;
}
@media screen and (max-width: 768px) {
    .payment--zhbi {
        background:
            linear-gradient(rgba(232, 235, 238, .9), rgba(232, 235, 238, .9)),
            url(/assets/template/images/zhbi/payment-bg-zhbi.jpg) no-repeat right center;
        background-size: cover;
    }
}

/* Возможно вам понадобится: карточки одной высоты, две строки под название, цена и кнопки внизу */
.marks--zhbi .marks-item {
    display: flex;
    flex-direction: column;
}
.marks--zhbi .marks-title {
    line-height: 1.3;
    min-height: 2.6em;
}
.marks--zhbi .marks-price {
    margin-top: auto;
    padding-top: 4px;
}
.marks--zhbi .marks-buttons {
    margin-top: 14px;
}
/* на мобильных блок — слайдер slick */
.marks--zhbi .slick-track {
    display: flex;
}
.marks--zhbi .slick-slide {
    height: auto;
}
.marks--zhbi .slick-slide > div,
.marks--zhbi .slick-slide .marks-item {
    height: 100%;
}

/* Остались вопросы?: склад с козловым краном под тёмным слоем, полупрозрачная плашка формы */
.questions--zhbi {
    background:
        linear-gradient(rgba(28, 40, 52, .7), rgba(28, 40, 52, .7)),
        url(/assets/template/images/zhbi/questions-bg-zhbi.jpg) no-repeat center;
    background-size: cover;
}
.questions--zhbi .questions__form {
    background: rgba(85, 89, 95, .82);
}