/* Подключение базовых начертаний Mulish */
/* Mulish Regular */
@font-face {
    font-family: 'Mulish';
    src: url('assets/fonts/Mulish/Mulish-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Mulish Italic */
@font-face {
    font-family: 'Mulish';
    src: url('assets/fonts/Mulish/Mulish-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

/* Mulish Light */
@font-face {
    font-family: 'Mulish';
    src: url('assets/fonts/Mulish/Mulish-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Mulish';
    src: url('assets/fonts/Mulish/Mulish-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

/* Mulish Medium */
@font-face {
    font-family: 'Mulish';
    src: url('assets/fonts/Mulish/Mulish-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Mulish';
    src: url('assets/fonts/Mulish/Mulish-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

/* Mulish SemiBold */
@font-face {
    font-family: 'Mulish';
    src: url('assets/fonts/Mulish/Mulish-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Mulish';
    src: url('assets/fonts/Mulish/Mulish-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

/* Mulish Bold */
@font-face {
    font-family: 'Mulish';
    src: url('assets/fonts/Mulish/Mulish-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Mulish';
    src: url('assets/fonts/Mulish/Mulish-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

/* Mulish ExtraBold */
@font-face {
    font-family: 'Mulish';
    src: url('assets/fonts/Mulish/Mulish-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Mulish';
    src: url('assets/fonts/Mulish/Mulish-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

/* Mulish Black */
@font-face {
    font-family: 'Mulish';
    src: url('assets/fonts/Mulish/Mulish-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Mulish';
    src: url('assets/fonts/Mulish/Mulish-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

/* Mulish ExtraLight */
@font-face {
    font-family: 'Mulish';
    src: url('assets/fonts/Mulish/Mulish-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Mulish';
    src: url('assets/fonts/Mulish/Mulish-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

/* Mulish ExtraLightItalic (есть отдельный файл ExtraLightItalic) */
@font-face {
    font-family: 'Mulish';
    src: url('assets/fonts/Mulish/Mulish-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

/* Общие стили: Mulish — дефолт */
html, body, button, input {
    font-family: 'Mulish', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 0;
    color: rgba(64, 64, 64, 1);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Mulish', Arial, sans-serif;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

/* Автоматическая подстановка для i, b, strong */
i, em {
    font-style: italic;
}

b, strong {
    font-weight: 700;
}

a:hover {
    color: rgba(19, 6, 158, 1);
}

.header__inner {
    border-radius: 0px 0px 33px 33px;
    border: 1px solid #eee;
    border-top: 0px;
    padding-left: 60px;
    padding-right: 60px;
    margin: 0 auto;
    box-sizing: content-box;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    margin-left: -60px;
    margin-right: -60px;
}

.top-banner {
    margin: 0px;
    border-radius: 0px;
    width: calc(100% + 120px);
    margin-left: -60px;
    margin-right: -60px;
}

.main__group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.lower__group {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.header__logo {
    display: flex;
}

.header__logo img {
    margin-left: -16px;
    max-width: 240px;
}

.header__right {
    display: flex;
    align-items: center;
    gap: 30px;
}

.header__contacts {
    display: flex;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.header__socials {
    display: flex;
    gap: 10px;
}

.header__phone img, .header__email img {
    width: 18px;
}

.blue-cycle:hover {
    background: linear-gradient(90deg, #1F05B4 0%, #325AFB 100%);
    border: none;
}

.blue-cycle:hover img {
    filter: brightness(0) invert(1);
}

.blue-cycle {
    width: 36px;
    height: 36px;
    border: double 1px transparent;
    border-radius: 50%;
    background-image: linear-gradient(white, white), linear-gradient(90deg, #1F05B4 0%, #325AFB 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0; /* блок не сжимается/не растягивается */
    position: relative;
}

.blue-cycle img {
    position: relative;
    z-index: 1;
    width: 18px;
}


.header__fav,
.header__cart {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

.nav > li > a.header__cart {
    display: flex;
}

.nav > li > a.header__cart:hover, .nav > li > a.header__cart:focus {
    background: none;
}

.header__fav img,
.header__cart img {
    flex-shrink: 0;
    width: 21px;
    height: 21px;
}

.popover {
    font-family: Mulish;
}

.media-body .btn {

}

.media-heading {
    font-size: 16px;
}

.popover-content a {
    color: rgba(64, 64, 64, 1);
}

.popover-content a:hover {
    color: rgba(19, 6, 158, 1)
}

.header__fav span, .header__cart span {
    font-weight: 300;
    font-size: 16px;
    color: rgba(64, 64, 64, 1);
}

.header__fav:hover span, .header__cart:hover span {
    color: rgba(19, 6, 158, 1)
}

.header__nav {
    margin-left: 30px;
}

.header__left {
    display: flex;
    align-items: center;
}

.nav__list {
    display: flex;
    gap: 20px; /* расстояние между пунктами */
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__link, .nav__link:visited {
    font-size: 16px;
    font-weight: 300;
    text-decoration: none;
    color: rgba(64, 64, 64, 1);
}

.nav__link:hover {
    color: rgba(19, 6, 158, 1); /* как у hover для ссылок */
}

.user_entrance {
    flex: 0 0 auto;
}

.user_entrance a {
    font-size: 16px;
    color: rgba(64, 64, 64, 1);
    gap: 10px;
    display: flex;
    align-items: center;
    font-weight: 300;
}

.user_entrance a:hover {
    color: rgba(19, 6, 158, 1);
}

.user_entrance a .glyphicon {
    color: rgba(19, 6, 158, 1);
}

.header__search {
    flex: 1;
    box-sizing: border-box;
}

.header__search form {
    margin: 0 auto; /* центрируем */
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 25px;
    padding: 2px; /* толщина рамки */
    background: linear-gradient(90deg, #1F05B4 0%, #325AFB 100%);
}

.search-input-wrapper input::placeholder {
    color: rgba(19, 6, 158, 0.65);
}

.search-input-wrapper input {
    flex: 1;
    padding: 10px 14px 10px 40px;
    font-size: 16px;
    border: none;
    outline: none;
    border-radius: 25px 0 0 25px;
    background: #fff; /* внутренний фон */
}

.search-input-wrapper .search-icon {
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    pointer-events: none;
    opacity: 0.6;
}

.search-input-wrapper .search-submit {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 0 25px 25px 0;
    background: #fff; /* белая кнопка внутри */
    cursor: pointer;
    position: relative;
    color: #666;
}

.search-input-wrapper .search-submit:hover {
    background: #f9f9f9;
    color: rgba(64, 64, 64, 1);
}

.visually-hidden {
    visibility: hidden;
    display: none;
}





ul.menu, ul.menu li {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

ul.menu {
    border: 1px solid rgba(233, 233, 233, 1);
    border-radius: 16px;
    margin-bottom: 20px;
    overflow: hidden;
}

ul.menu > li {
    list-style: none;
    border-bottom: 1px solid rgba(231, 231, 231, 1);
    line-height: 1.2;
    position: relative;
}

ul.menu > li:last-child {
    border-bottom: none;
}

.menu button {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.menu .item-button {
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    align-items: center;
    width: 100%;
    padding: 10px 10px 10px 15px;
    display: flex;
}

.menu button.item-button:hover {
    background: #F9F9F9;
}

.menu .item-button:hover .item-title {
    background-size: 300%;
    background-position: left;
}

.menu .item-button .item-title {
    background: linear-gradient(90deg, #1F05B4 0%, #325AFB 100%);
    background-size: 100%;
    background-position: left;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* текст становится прозрачным, видно градиент */
    font-weight: 600;
    transition: all 250ms;
}

.item-button:hover .toggler-icon, .item-button.active .toggler-icon {
    opacity: 1;
}



.toggler-icon {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    background-image: url('assets/icons/plus.svg'); /* по умолчанию плюс */
    flex-shrink: 0;
    opacity: 0.75;
    transition: all 250ms;
}

/* если родитель активен — меняем на минус */
.menu .item-button.active .toggler-icon {
    background-image: url('assets/icons/minus.svg');
}

.submenu {
    display: none;
    list-style: none;
    padding: 0px;
    margin: 0px;
}
.submenu.active, .sub-submenu.active {
    display: block;
}

.submenu {

}

.submenu .item-button .item-title {
    background: none;
    color: rgba(154, 154, 154, 1);
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    font-weight: 500;
}

.submenu .item-button {
    padding-left: 15px;
    padding-right: 10px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.submenu .submenu .item-button {
    padding-left: 30px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.submenu .submenu .item-button:hover {
    background: none;
}

.submenu .item-button:hover .item-title {
    color: #000;
    background: none;
}

.submenu .submenu .item-button .item-title {
    font-weight: 400;
}

ul.menu .submenu li:last-child {
    margin-bottom: 0px;
}


ul.menu a {
    text-decoration: none;
    color: rgba(154, 154, 154, 1);
}

ul.menu a:hover {
    color: #000;
}

.menu .submenu button, .menu .submenu a {
    text-align: left;
    font-weight: 400;
    color: rgba(154, 154, 154, 1);
    font-size: 14px;
}

.menu .submenu button:hover {
    color: #000;
}

.sub-submenu {
    font-weight: 400;
    color: rgba(154, 154, 154, 1);
    font-size: 14px;
    padding-top: 5px;
    padding-left: 15px;
}

@media (min-width: 1200px) {
    .container {
        width: 1280px;
    }
}

.sticker-text {
    display: flex;
    align-items: center;
    gap: 12px;
}

.top-banner .close {
    position: relative;
    top: initial;
    right: initial;
}

header {
    margin-bottom: 15px;
}

.panel {
    border-radius: 16px;
    overflow: hidden;
    border-color: rgba(233, 233, 233, 1);
}

.panel-default > .panel-heading {
    background-color: #F9F9F9;
}

.left-block {
    border-radius: 16px;
    overflow: hidden;
    border-color: rgba(233, 233, 233, 1);
}

.block-dark {
    border-radius: 16px;
    overflow: hidden;
}

.carousel-indicators li {
    border: 1px solid black;
    width: 18px;
    height: 18px;
    margin: 0px;
    transition: all 250ms;
}

.carousel-indicators .active {
    width: 18px;
    height: 18px;
    background: linear-gradient(90deg, #1F05B4 0%, #325AFB 100%);
    border-color: transparent; /* рамка скрываем, чтобы не мешала */
    border: none;
}

.carousel-indicators  {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 20px;
    left: 30px;
    gap: 10px;
    margin: 0px;
    width: auto;
}

#carousel-example-generic {
    border: 1px solid #e9e9e9;
    border-radius: 16px;
    overflow: hidden;
    height: 400px;
    margin-bottom: 20px;
}

.carousel-inner {
    border-radius: 0px;
    height: 100%;
}

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    width: 100%;
}

.carousel-inner > .item {
    padding: 30px;
    height: 100%;
}

.item-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.sidebar {
    padding-right: 10px;
}

.main {
    padding-left: 10px;
}

.carousel-caption-wrapper {
    display: flex;
    align-items: center;
    justify-content: start;
    width: auto;
    max-width: 50%;
}

.carousel-caption {
    position: relative;
    top: initial;
    left: initial;
    right: initial;
    bottom: initial;
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: -50px;
}

.carousel-image-wrapper {
    width: fit-content;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
    overflow: hidden; /* чтобы не вылезала */
    flex-shrink: 1;
}

.carousel-image-wrapper img {
    height: 100%;
}

.gradient-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 25px;
    background-color: white;      /* обычный фон */
    color: #1F05B4;               /* текст по умолчанию */
    font-weight: 500;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
    background-clip: padding-box;
    width: fit-content;
    display: inline-flex;
    transition: all 0ms;

}

/* рамка градиентная через псевдоэлемент */
.gradient-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 25px;
    padding: 2px; /* толщина рамки */
    background: linear-gradient(90deg, #1F05B4 0%, #325AFB 100%);
    -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* hover: фон градиентный, текст белый */
.gradient-button:hover {
    background: linear-gradient(90deg, #1F05B4 0%, #325AFB 100%);
    color: white;
}

/* при hover скрываем рамку псевдоэлемента */
.gradient-button:hover::before {
    display: none;
}

.carousel-caption .gradient-button {
    font-size: 18px;
}

.carousel-caption h3 {
    font-size: 40px;
    font-weight: 500;
}

.carousel-caption p {
    font-size: 18px;
}

.info-blocks-wrapper {
    display: flex;
    flex-direction: row;
    gap: 20px; /* расстояние между блоками */
    margin: 0 auto;
    margin-bottom: 20px;
}

/* Горизонтальные блоки */
.info-block {
    display: flex;
    gap: 15px;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    align-items: flex-start; /* чтобы высота блока зависела от самой высокой картинки/текста */
    border: 1px solid #e9e9e9;
    border-radius: 16px;
}

/* Картинка слева */
.info-image {
    width: 35%;       /* ширина картинки под блок */
    height: auto;     /* сохраняем пропорции */
    border-radius: 16px;
    flex-shrink: 0;
    object-fit: cover; /* если нужно обрезать, чтобы заполнить область */
}

/* Текстовая часть */
.info-content {
    width: 65%; /* остаток под текст */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Заголовок */
.info-title {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: rgba(64, 64, 64, 1);
    margin: 0;
}

/* Описание */
.info-description {
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: rgba(154, 154, 154, 1);
    margin: 0;
}

.info-block .gradient-button {
    margin-top: 10px;
    width: fit-content;      /* ширина по содержимому */
    display: inline-flex;    /* сохраняем центрирование текста */
    align-self: flex-start;  /* чтобы не растягивалась на всю ширину родителя */
}

.page-header {
    margin-top: 20px;
    margin-bottom: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.btn-sm, .btn-group-sm > .btn {
    border-radius: 10px;
}

.otz {
    border-radius: 10px;
}

.banner {
    margin-bottom: 20px;
}

.banner-title {
    margin: 0px;
    padding: 0px;
}

.banner-image p {
    margin: 0px;
    padding: 0px;
}

.banner .bg-img-hero-center {
    padding-top: 10px;
    padding-bottom: 10px;
}

.well {
    background-color: rgba(19, 6, 158, 1);
    color: #FFF;
    font-weight: 400;
}

.well a, .well a.nav__link {
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
}

.well a:hover {
    color: #b3dfff;
}

.well h5 {
    font-weight: 700;
}

.thumbnail {
    border-radius: 16px;
    border: 1px solid rgba(233, 233, 233, 1);
    padding: 10px;
    transition: all 250ms;
}

.thumbnail-wrapper {
    padding-left: 3px;
    padding-right: 3px;
}

.thumbnail-row {
    margin-left: -6px;
    margin-right: -6px;
}

.sale-icon-content .label {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    border-radius: 10px;
    padding: 5px 10px;
}

.sale-icon-content span.sale-icon {
    background: none !important;
    border: 1px solid #1e7aca;
}

.sale-icon-content span.newtip-icon {
    background: none !important;
    border: 1px solid #58daef;
}

.sale-icon-content span.promo-icon {
    background: none !important;
    border: 1px solid #59efe8;
}

.product-image {
    position: relative;
    margin-bottom: 10px;
}

span.sale-icon-content {
    padding: 0px;
    top: 10px;
    left: 5px;
}

.thumbnail .caption {
    padding: 10px;
}

.thumbnail .caption h5 {
    margin-bottom: 10px;
}

.thumbnail .caption h5 a {
    font-size: 16px;
    color: rgba(64, 64, 64, 1);
}

.thumbnail .caption h5 a:hover {
    color: rgba(19, 6, 158, 1);
}

.thumbnail .caption .upper-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(64, 64, 64, 1);
    font-size: 14px;
    margin-bottom: 10px;
}

.thumbnail .caption .product-rating {
    display: flex;
    align-items: center;
    gap: 10px;
}

.thumbnail .caption .product-rating-item {
    display: flex;
    align-items: center;
    gap: 2px;
}

.thumbnail .caption .product-rating-item img {
    width: 18px;
}

.thumbnail .caption .is-in-stock {
    margin-bottom: 10px;
    color: rgba(0, 218, 7, 1);
    font-size: 14px;
    font-weight: 500;

}

.thumbnail .caption .is-in-stock .warning {
    border-radius: 100%;
    border: 1px solid rgba(64, 64, 64, 1);
    color: rgba(64, 64, 64, 1);
    font-weight: 700;
    width: 18px;
    height: 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: 2px;
}

.thumbnail .caption .product-price {
    color: rgba(64, 64, 64, 1);
    font-size: 19px;
    font-weight: 500;
    margin-top: 0px;
    margin-bottom: 0px;
}

.gradient-solid-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 10px;
    background: linear-gradient(90deg, #1F05B4 0%, #325AFB 100%);
    background-size: 100%;     /* делаем градиент шире */
    background-position: left;
    color: white;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 250ms; /* плавный сдвиг */
    font-size: 16px;
    font-weight: 500;

}

/* hover: фон градиентный, текст белый */
.gradient-solid-button:hover {
    background-size: 300%;
    color: #FFF;
}

.grey-solid-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 16px;
    color: rgba(64, 64, 64, 1);
    background: none;
    border: 1px solid rgba(233, 233, 233, 1);
}

.grey-solid-button:hover {
    background-color: #F9F9F9;
}





.package-options {
    display: flex;
    flex-direction: column;
    gap: 8px; /* расстояние между вариантами */
    margin-bottom: 10px;
}

.package-option {
    display: flex;
    justify-content: space-between; /* слева цена + радио, справа кол-во */
    align-items: center;
    padding: 0px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 6px;
    transition: background 0.2s;
    margin: 0px;

}

.package-option input[type="radio"] {
    display: none; /* скрываем стандартный radio */
}

/* левая часть: радио + цена */
.left-side {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* кастомный круг */
.package-radio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.package-radio:hover {
    border: double 1px transparent;
    background-image: linear-gradient(white, white), linear-gradient(90deg, #1F05B4 0%, #325AFB 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

/* внутренний кружок при активной кнопке */
.package-radio::after {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(90deg, #1F05B4 0%, #325AFB 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* когда radio выбран */
.package-option input[type="radio"]:checked + .left-side .package-radio::after {
    opacity: 1;
}

/* текст */
.package-price, .package-qty {
    font-weight: 500;
    color: rgba(64, 64, 64, 1);
    font-size: 14px;
}

/* hover эффект */
.package-option:hover {

}

.thumbnail .caption-main-part {
    padding-bottom: 0px;
}

.thumbnail .caption-sliding-part {
    position: absolute;
    background: #FFF;
    z-index: 20;
    border-radius: 0px 0px 16px 16px;
    border: 1px solid rgba(233, 233, 233, 1);
    border-top: none;
    padding: 10px 20px;
    left: 3px;
    right: 3px;

    /* вместо display */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.1s, opacity 0.1s, box-shadow 0.25s;
}

.thumbnail:hover .caption-sliding-part {
    max-height: 500px; /* должно быть достаточно для всего контента */
    opacity: 1;
    box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
}


.thumbnail:hover {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.catalog-block .catalog-table-block-name {
    margin-top: 10px;
    padding: 0px;
    font-weight: 400;
}