/*
  Этот блок CSS содержит стили для:
  1. Фиксированного позиционирования элемента с id "rec862484018 - шапка".
  2. Скрытия полосы прокрутки для всего сайта (но сохраняя возможность прокрутки контента).
  3. Кастомизации стрелок навигации в слайдере Swiper.
*/

/*  Или, если нет родительского ID, но уверены в порядке загрузки CSS:  */
/*  Этот вариант будет работать, если элемент с id "rec862484018" находится непосредственно в body или другом элементе,
    и стили для него загружаются после стилей для других элементов, которые могут перекрывать его.  */
#rec862484018 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9998;
}

/*  Кастомизация стрелок слайдера Swiper  */
/*  Эти стили предназначены для изменения внешнего вида стрелок навигации в слайдере Swiper.  */

.swiper-button-next::after,
.swiper-button-prev::after {
    display: none; /*  Скрывает стандартные стрелки, которые генерирует Swiper  */
}

.custom-swiper-arrow {
    /*  Стили для вашей собственной стрелки (например, SVG)  */
    width: 50%;  /*  Уменьшите это значение, чтобы стрелка была меньше внутри круга  */
    height: 50%; /*  Уменьшите это значение, чтобы стрелка была меньше внутри круга  */
}

.swiper-button-next,
.swiper-button-prev {
    /*  Стили для кнопок (контейнеров) стрелок  */
    width: 40px;   /*  Увеличенный размер для мобильных устройств  */
    height: 40px;  /*  Увеличенный размер для мобильных устройств  */
    /*  Добавьте стили для центрирования стрелки внутри кнопки, если необходимо  */
    display: flex;
    justify-content: center; /*  Центрирование по горизонтали  */
    align-items: center;     /*  Центрирование по вертикали  */
    cursor: pointer; /*  Укажите курсор, чтобы было понятно, что это кликабельный элемент  */
}

/*  Решение проблем с overflow в Swiper  */
.mySwiper2 {
    overflow: visible !important; /* Важно: разрешить слайдам выходить за границы контейнера */
    /*  Этот стиль позволяет слайдам выходить за границы контейнера Swiper.
        Это полезно, если слайды содержат элементы, которые должны быть видны за пределами контейнера Swiper.  */
}


#rec887008414 {
    position: fixed; /* Добавили фиксированное позиционирование */
    top: 90px; /* Или любое другое значение, которое вам подходит */
    transition: opacity 0.3s ease-in-out; /* Плавное изменение прозрачности */
    opacity: 0; /* Изначально полностью прозрачный */
    display: none; /* Изначально скрыт */
    z-index: 9999; /* Поверх всего */
}

#rec887008414.show {
    opacity: 1; /* При отображении делаем полностью видимым */
    display: block;
}

@media screen and (min-width: 1200px) {
  .uc-karta_tt_ca_v1 {
    transform-origin: top center; /* Важно: масштабируем относительно верхнего левого угла */
    transform: scale(0.9); /* Масштабируем до 80% */
  }
}

#similar-products-container {
  text-align: center; /* Центрируем элементы по горизонтали */
}

.similar-product-card {
    display: block; /* Элементы в столбик */
    width: 100%; /* Карточки занимают всю ширину */
    margin: 0 auto 20px; /* Автоматические отступы слева и справа, и отступ снизу */
    box-sizing: border-box; /* Учитываем padding и border в ширине */
}