/* Похожие проекты на карточке товара: слайдер из карточек каталога.
   Сами карточки стилизует category_item.css, здесь — шапка, стрелки и слайды. */
.similar-block {
    /* Сверху блок шёл от предыдущей секции с её собственным отступом, снизу
       упирался в баннер — выровнял (Катя 20.10.2026). */
    padding-top: 8px;
    padding-bottom: 56px;
}

.similar-block__head {
    /* .block-content — flex-колонка с align-items: center, поэтому шапке
       нужна явная ширина, иначе заголовок со стрелками стоит по центру. */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.similar-block__title {
    /* Заголовок секции на сайте центрируется и занимает всю ширину;
       здесь он стоит в паре со стрелками, поэтому прижат влево. */
    width: auto;
    flex: 1 1 auto;
    text-align: left;
}

.similar-nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.similar-nav__btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--Gray-150, #E4E4E4);
    background: var(--Surface-White, #FFF);
    color: var(--Text-Primary, #1E2433);
    cursor: pointer;
    transition: border-color .15s ease, opacity .15s ease;
}

.similar-nav__btn:hover {
    border-color: var(--Brand-Primary-light, #D4B46B);
}

/* Swiper гасит свои кнопки этим классом, когда листать некуда. */
.similar-nav__btn.swiper-button-disabled {
    opacity: .4;
    cursor: default;
}

.similar-swiper {
    width: 100%;
    overflow: hidden;
}

.similar-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.similar-swiper .product-card {
    width: 100%;
    height: 100%;
}

@media (max-width: 767px) {
    .similar-block {
        padding-top: 4px;
        padding-bottom: 36px;
    }

    .similar-block__head {
        margin-bottom: 16px;
    }

    .similar-nav__btn {
        width: 38px;
        height: 38px;
    }
}