.services-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: var(--m60-rem)
}

.service-item {
    display: flex;
    align-items: stretch;
    gap: 30px
}

.service-image {
    flex: 0 0 300px;
    max-width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: 8px
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.service-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.service-text h3 {
    margin-bottom: var(--m30-rem)
}

.service-item.left .service-image {
    order: 1
}

.service-item.left .service-text {
    order: 2
}

.service-item.right .service-text {
    order: 1
}

.service-item.right .service-image {
    order: 2
}

.service-desc {
    margin-bottom: 10px
}

@media (max-width: 768px) {
    .service-item {
        flex-direction:column;
        text-align: center
    }

    .service-image {
        width: 100%;
        height: 200px
    }

    .service-item .service-image {
        order: 1!important;
        width: 100%;
        height: 200px
    }

    .service-item .service-text {
        order: 2!important;
        text-align: left
    }
}


/* Базовые стили для контейнера (по умолчанию Карточки) */
.products-container--view-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

/* Стили для сетки, когда выбран вид Списка */
.products-container--view-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Стили для самой карточки товара внутри списка */
.products-container--view-list .product-card {
    display: flex; /* Выстраиваем картинку, текст и цену в одну линию */
    flex-direction: row;
    width: 100%;
}

/* По умолчанию скрываем оба варианта, чтобы управлять ими строго через модификаторы */
.product .btn-content--card,
.product .btn-content--list {
    display: none;
}

/* Если карточка в режиме ПЛИТКИ (карточки) */
.product--card .btn-content--card {
    display: flex; /* или inline-flex, в зависимости от вашей флекс-сетки */
    align-items: center;
    gap: 8px; /* отступ между текстом и иконкой, если нужен */
}

/* Если карточка в режиме СПИСКА */
.product--list-item .btn-content--list {
    display: flex;
    align-items: center;
    gap: 4px; /* отступ между иконкой и плюсом */
}



.radio-input--error .radio-input__label:before {
    box-shadow: 0 0 0 1.5px #cd0606;
}

/* Базовые стили для кнопки вызова поиска */
.header__search-btn {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Базовые стили для формы (изначально скрыта) */
.header__search-form {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Чтобы нельзя было случайно сфокусировать скрытые инпуты */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Стили при активном состоянии родителя */
.header__search.__active .header__search-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.header__search.__active .header__search-form {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Включаем кликабельность обратно */
}

.search-form__input {
    background-color: #fff;
    color: rgb(51, 51, 51);
}
.search-form__input:focus {
    --input-color: rgb(51, 51, 51) !important;
}