/* ========================================
   CSS-ПЕРЕМЕННЫЕ ДЛЯ НАСТРОЙКИ ЭФФЕКТОВ
   ======================================== */
:root {
    --uc-hover-scale: 1.1;                    /* Масштаб увеличения при наведении */
    --uc-hover-duration: 0.4s;                /* Длительность анимации */
    --uc-hover-easing: ease-in-out;           /* Тип плавности анимации */
    --uc-border-radius: 8px;                  /* Радиус скругления изображения при наведении - подставить такой же, какой стоит в карточке */
}

/* ========================================
   1. КАРТОЧКИ ТОВАРОВ В КАТАЛОГЕ
   ======================================== */

/* 1) Контейнер изображения - скрываем выходящие за границы части */
.t-store__card__imgwrapper {
    overflow: hidden;
    border-radius: var(--uc-border-radius);
}

/* 2) Анимация для изображений товара (поддержка обоих вариантов классов) */
.t-store__card__bgimg,
.t-store__card__img {
    transition: transform var(--uc-hover-duration) var(--uc-hover-easing);
    will-change: transform; /* Оптимизация производительности */
}

/* 3) Эффект увеличения при наведении на карточку (для обоих вариантов изображений) */
.t-store__card:hover .t-store__card__bgimg,
.t-store__card:hover .t-store__card__img {
    transform: scale(var(--uc-hover-scale));
}

/* 4) Альтернативный эффект при наведении на ссылку внутри карточки */
.t-store__card a:hover .t-store__card__bgimg,
.t-store__card a:hover .t-store__card__img {
    transform: scale(var(--uc-hover-scale));
}

/* ========================================
   2. ГАЛЕРЕЯ ИЗОБРАЖЕНИЙ В КАРТОЧКЕ ТОВАРА
   ======================================== */

/* 1) Главный контейнер галереи - скрываем выходящие части */
.tn-elem .t-slds__main {
    overflow: hidden !important;
}

/* 2) Анимация для изображений в галерее */
.tn-elem .t-slds__item .tn-atom__slds-img,
.tn-elem[data-elem-type="gallery"] .tn-atom__slds-img {
    transition: transform var(--uc-hover-duration) var(--uc-hover-easing) !important;
    will-change: transform; /* Оптимизация производительности */
}

/* 3) Эффект увеличения при наведении на область галереи */
.tn-elem .t-slds__main:hover .t-slds__item_active .tn-atom__slds-img,
.tn-elem[data-elem-type="gallery"] .t-slds__main:hover .t-slds__item_active .tn-atom__slds-img {
    transform: scale(var(--uc-hover-scale)) !important;
}

/* 4) Альтернативный эффект при наведении на активный слайд */
.tn-elem .t-slds__item_active:hover .tn-atom__slds-img {
    transform: scale(var(--uc-hover-scale)) !important;
}

/* 5) Сохранение border-radius при трансформации */
.tn-elem .t-slds__main {
    border-radius: inherit;
}