/* Фикс наложения стилей WooCommerce для текста кнопок Swiper */
.woocommerce div.product .woocommerce-Tabs-panel--description .wc-block-components-product-button__button span {
    color: var(--global-palette9) !important;
}
.woocommerce div.product .woocommerce-Tabs-panel--description .wc-block-components-product-button__button {
    color: var(--global-palette9) !important;
}


/* Стилизация точек пагинации Swiper под палитру темы Kadence */
.product-hits-slider .swiper-pagination-bullet-active {
    background: var(--global-palette-btn-bg, #000000) !important;
}
.product-hits-slider .swiper-pagination {
    bottom: 0px !important;
}

/* ---- Карусель----- */

/* Подложка */
/* 1. РОДИТЕЛЬСКАЯ ПОДЛОЖКА (Главный ориентир)
   Задаем контекст позиционирования для стрелок и обнуляем паддинги */
.product-hits-slider-wrapper {
    position: relative !important;
    width: 100% !important; 
    box-sizing: border-box;
    padding: 0 40px !important; /* ВАЖНО: создаем пустые поля по 40px слева и справа за счет паддинга подложки */
}

/* 2. САМ СЛАЙДЕР SWIPER 
   Он автоматически займет оставшуюся ширину (100% минус паддинги родителя)
   и будет плавно прятать слайды благодаря overflow: hidden */
.product-hits-slider-wrapper .product-hits-slider {
    width: 100% !important; 
    position: static !important; /* ВАЖНО: убираем position: relative, чтобы стрелки позиционировались НЕ относительно него! */
    overflow: hidden !important; /* Слайды уходят за горизонт плавно, как раньше */
}

/* 3. КОНТЕЙНЕР СЛАЙДОВ (Заводские настройки Swiper для плавной анимации) */
.product-hits-slider-wrapper .swiper-wrapper {
    overflow: visible !important; 
}

/* Контейнер карточки просто выстраивает элементы сверху вниз */
.product-hit-card .hit-card-inner {
    display: flex;
    flex-direction: column;
    background: transparent;
    height: auto;
}

/* Ссылка на картинке — делаем её блочной, чтобы она заняла всю ширину */
.product-hit-card .hit-card-image-link {
    display: block;
    width: 100%;
    text-decoration: none;
}

/* ОБЕРТКА-МАСКА: Держит пропорции дизайна */
.product-hit-card .hit-card-image-mask {
    width: 100%;
    aspect-ratio: 112 / 141; /* Пропорция вашего дизайнера */
    background-color: var(--global-palette7, #97b283); /* Зеленый фон темы */
    border-radius: 4px; 
    overflow: hidden; 
}

/* САМА КАРТИНКА */
.product-hit-card .hit-card-image {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; 
    transition: transform 2.0s ease; /* Вернули нормальную скорость анимации */
    will-change: transform;
}

/* Кнопка с отступом от картинки */
.product-hit-card .hit-card-button {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 12px; /* Прозрачный зазор дизайнера */
    box-sizing: border-box;
}

/* ЭФФЕКТЫ ПРИ НАВЕДЕНИИ НА КАРТОЧКУ */
/* 1. Увеличиваем картинку в маске */
.product-hit-card:hover .hit-card-image {
    transform: scale(1.10); 
}
/* 2. Добавляем тень зеленой плашке */
.product-hit-card:hover .hit-card-image-mask {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); 
}
/* 3. Синхронно подсвечиваем кнопку в цвет наведения из темы Kadence */
.product-hit-card:hover .hit-card-button {
    background-color: var(--global-palette2, #e03b5c) !important; /* Тут оставляем один важный important, чтобы перебить родной цвет Kadence при ховере */
    color: #ffffff;
}

/* Стрелки навигации карусели 
/.product-hits-slider-wrapper .swiper-button-next,
/.product-hits-slider-wrapper .swiper-button-prev {
/    color: var(--global-palette1, #ff5274);
/    transform: scale(0.6);
/}
*/

/* Прячем встроенные SVG-стрелки Swiper с максимальным приоритетом */
.product-hits-slider-wrapper .swiper-button-prev svg, 
.product-hits-slider-wrapper .swiper-button-next svg,
.product-hits-slider .swiper-button-prev svg,
.product-hits-slider .swiper-button-next svg,
div.swiper-button-prev svg,
div.swiper-button-next svg {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Базовые настройки для твоих стрелок */
.product-hits-slider-wrapper .swiper-button-prev,
.product-hits-slider-wrapper .swiper-button-next {
    color: #F05273 !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
}

/* Очищаем старые двоения Swiper */
.product-hits-slider-wrapper .swiper-button-prev::after,
.product-hits-slider-wrapper .swiper-button-next::after {
    display: none !important; 
}

/* ЛЕВАЯ СТРЕЛКА вместо "‹" пишем \2039 */
.product-hits-slider-wrapper .swiper-button-prev::before {
    content: "\2039" !important;
    color: #F05273 !important;
    font-size: 52px !important;
    font-weight: 700 !important;
    font-family: Verdana, Geneva, sans-serif !important;
    display: inline-block !important;
    transform: scale(1.4, 0.8) !important;
    line-height: 1 !important;
}

/* ПРАВАЯ СТРЕЛКА вместо "›" пишем \203A */
.product-hits-slider-wrapper .swiper-button-next::before {
    content: "\203A" !important;
    color: #F05273 !important;
    font-size: 52px !important;
    font-weight: 700 !important;
    font-family: Verdana, Geneva, sans-serif !important;
    display: inline-block !important;
    transform: scale(1.4, 0.8) !important;
    line-height: 1 !important;
}


/* 4. АБСОЛЮТНОЕ ПОЗИЦИОНИРОВАНИЕ СТРЕЛОК 
   Так как у слайдера теперь стоит `position: static`, стрелки игнорируют его overflow: hidden 
   и позиционируются относительно внешней подложки .product-hits-slider-wrapper */

/* Левая стрелка: садится ровно в левый паддинг подложки */
.product-hits-slider-wrapper .swiper-button-prev {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 10px !important; /* Сдвигаем внутрь левого пустого поля 40px */
    z-index: 99 !important;
}

/* Правая стрелка: садится ровно в правый паддинг подложки */
.product-hits-slider-wrapper .swiper-button-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 10px !important; /* Сдвигаем внутрь правого пустого поля 40px */
    z-index: 99 !important;
}

/* Отключаем любые изменения цвета при наведении (hover) */
.product-hits-slider-wrapper .swiper-button-prev:hover::before,
.product-hits-slider-wrapper .swiper-button-next:hover::before {
    color: #F05273 !important;
}



/* Если товаров мало — полностью скрываем стрелки и точки навигации */
.product-hits-slider-wrapper.hide-carousel-controls .swiper-button-next,
.product-hits-slider-wrapper.hide-carousel-controls .swiper-button-prev,
.product-hits-slider-wrapper.hide-carousel-controls .swiper-pagination {
    display: none !important;
}

/* Стили для карусели, когда элементы зафиксированы (мало товаров) */
.swiper.swiper-less-than-limit .swiper-wrapper {
    transform: none !important;
    justify-content: center; /* Центрируем товары на экране, если их мало */
}

/* ВАЖНО для centered="true": задаем красивую ширину карточек на компьютерах и мобильных */
.product-hits-slider[data-centered="true"] .swiper-slide {
    width: 290px; /* Ширина карточки, при которой края соседних будут плавно заглядывать в экран */
}

@media (max-width: 767px) {
    .product-hits-slider[data-centered="true"] .swiper-slide {
        width: 75%; /* На мобильных карточка займет 75% экрана, а 25% останется на края соседних */
    }
}