.overlay {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.overlay img {
  display: block;
  width: 100%;
  transition: transform 0.3s ease;
}

.overlay:hover img {
  transform: scale(1.1); /* Увеличение изображения при наведении */
}

.overlay figcaption {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(10px); /* Сдвиг для анимации "вылетающего" текста */
}

.overlay:hover figcaption {
  opacity: 1;
  transform: translateY(0); /* Сброс сдвига */
}

.overlay h5 {
  margin: 0;
  font-size: 1.2em;
  text-align: center;
  color: #fff;
}

/* Контейнер под галерею */
.product-media {
  max-height: 560px;          /* можно 480/520/600 под ваш дизайн */
  overflow: hidden;
}

/* Любые изображения внутри галереи */
#product img {
  max-height: 540px;
  width: 100%;
  height: auto;
  object-fit: contain;        /* ключевое: вертикальные не раздувают блок */
  display: block;
}

/* Если msGallery использует элементы с фиксированной высотой, страхуемся */
#product .carousel-item,
#product .swiper-slide,
#product .gallery-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Каталог: список категорий как list-group */
#msCatalog .card-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#msCatalog .card-body ul li + li {
  border-top: 1px solid rgba(0,0,0,.08);
}

#msCatalog .card-body ul li a {
  display: flex;
  padding: .65rem .25rem;
  text-decoration: none;
}

#msCatalog .card-body ul li a:hover {
  text-decoration: underline;
}

/* Offcanvas ширина на телефоне */
@media (max-width: 576px) {
  #offcanvasCategory.offcanvas {
    width: 86vw;
    max-width: 360px;
  }
}