html {
    scroll-padding-top: 50px;
}

.mesh-gradient { /* Плавающие блоки в каталоге */
    background-color: hsla(27, 100%, 98%, 1);
    background-image: radial-gradient(at 40% 20%, hsl(27, 100%, 96%) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsl(190, 100%, 94%) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsl(357, 100%, 96%) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsl(341, 100%, 96%) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsl(19, 100%, 94%) 0px, transparent 50%),
    radial-gradient(at 80% 100%, hsl(242, 100%, 95%) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsl(348, 100%, 95%) 0px, transparent 50%);
}

@media (max-width: 576px) {
    /* Обрезаем верхний баннер на главной */
    .vh-mobile-40 {
        height: 40vh !important;
    }
}

.glow { /* Пока нигде */
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.3),
    -1px 0 3px rgba(255, 255, 255, 0.3),
    1px 0 3px rgba(255, 255, 255, 0.3),
    0 -1px 3px rgba(255, 255, 255, 0.3),
    0 1px 3px rgba(255, 255, 255, 0.3)
}

.text-shadowed { /* Тени на тексте на фотографиях парфюмеров */
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.3),
    -1px 0 3px rgba(0, 0, 0, 0.3),
    1px 0 3px rgba(0, 0, 0, 0.3),
    0 -1px 3px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.3)
}

.rounded { /* Переопределение Bootstrap */
    border-radius: 12px !important;
}

.lg-backdrop { /* Переопределение фона Fullscreen https://github.com/sachinchoolur/lightGallery */
    background-color: var(--black-65-color);
}

.pt-media { /* Отступ изображений сверху, для того чтобы выровнять по блокам текста, ровно по шрифту */
    padding-top: 0.6rem;
}

a:hover { /* Все ссылки при наведении курсора */
    color: var(--primary-color);
}


/*-------------------------------------------------------*/
/* Исправление выравнивания на странице с таблицей продуктов */

/* Убедимся, что row является flex-контейнером с переносом */
.products-row-container .row.d-flex {
  display: flex;
  flex-wrap: wrap;
}

/* Колонки становятся flex-контейнерами */
.products-row-container .col-6.col-lg-3 {
  display: flex;
}

/* Карточка растягивается на всю высоту колонки */
.products-row-container .card.has-image.parent {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Контейнер изображения фиксирует пропорции */
.products-row-container .image-wrapper {
  position: relative;
  overflow: hidden;
  flex-shrink: 0; /* Не позволяет изображению растягиваться */
}

/* Изображение сохраняет пропорции и выравнивается по нижнему краю */
.products-row-container .image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

/* Текстовый блок выравнивается по верхнему краю */
.products-row-container .card-body {
  flex-shrink: 0; /* Не сжимается */
  flex-grow: 0; /* Не растягивается */
  padding: 1rem; /* Убедитесь, что padding соответствует вашему дизайну */
}

/*-------------------------------------------------------*/
/* Исправление выравнивания в виджете похожих продуктов */

/* Стили для слайдера */
.gallery.stretched.slider {
  --swiper-wrapper-height: auto; /* Отключаем фиксированную высоту Swiper */
}

/* Контейнер слайдов */
.gallery.stretched.slider .swiper-wrapper {
  display: flex;
  align-items: stretch; /* Все слайды растягиваются на максимальную высоту */
  height: auto !important; /* Переопределяем фиксированную высоту */
}

/* Каждый слайд */
.gallery.stretched.slider .swiper-slide {
  display: flex;
  flex-direction: column;
  height: auto; /* Позволяем слайду подстраиваться под содержимое */
}

/* Элемент внутри слайда */
.gallery.stretched.slider .swiper-slide .item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Карточка внутри слайда */
.gallery.stretched.slider .card.has-image.parent {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Контейнер изображения */
.gallery.stretched.slider .image-wrapper {
  position: relative;
  overflow: hidden;
  flex-shrink: 0; /* Не сжимаем контейнер изображения */
}

/* Изображение внутри слайда */
.gallery.stretched.slider .image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* Убедимся, что изображение заполняет контейнер */
}

/* Текстовый блок */
.gallery.stretched.slider .card-body {
  flex-shrink: 0; /* Не сжимаем текстовый блок */
  flex-grow: 0; /* Не растягиваем текстовый блок */
  padding: 1rem; /* Убедитесь, что padding соответствует вашему дизайну */
}

/* Иконка перехода на страницу */
.gallery.stretched.slider .gallery-icon {
  flex-shrink: 0; /* Не сжимаем иконку */
}

/* Адаптивность для разных разрешений */
@media (max-width: 767px) {
  .gallery.stretched.slider .image-wrapper {
    min-height: 150px; /* Минимальная высота для мобильных устройств */
  }
}
/*-------------------------------------------------------*/