/* Контейнер для кнопок навигации */
.product-new-slider .swiper-button-next,
.product-new-slider .swiper-button-prev {
    position: absolute;
    color: #fff;
    background: #8d6e638a;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 11;
    top: 50%;
    
    /* Сбрасываем стандартные стили Swiper */
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
    background-position: center !important;
    
    /* Изначально скрываем стрелки */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) scale(0.8);
}

/* Показываем стрелки при наведении на контейнер слайдера */
.product-new-slider-container:hover .swiper-button-next,
.product-new-slider-container:hover .swiper-button-prev {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

/* Иконки стрелок с использованием псевдоэлементов */
.product-new-slider .swiper-button-next::after,
.product-new-slider .swiper-button-prev::after {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    border: 1px solid #ffffff;
    border-left: none;
    border-bottom: none;
    transition: all 0.3s ease;
    color: #ffffff;
}

/* Стрелка вперед */
.product-new-slider .swiper-button-next::after {
    transform: rotate(45deg) translate(-1px, -1px);
}

/* Стрелка назад */
.product-new-slider .swiper-button-prev::after {
    transform: rotate(-135deg) translate(-1px, -1px);
}

/* Состояние ховера */
.product-new-slider .swiper-button-next:hover,
.product-new-slider .swiper-button-prev:hover {
    background: #8d6e63;
    border-color: #8d6e63;
    box-shadow: 0 4px 12px rgba(141, 110, 99, 0.3);
}

.product-new-slider .swiper-button-next:hover::after,
.product-new-slider .swiper-button-prev:hover::after {
    border-color: #ffffff;
}

/* Адаптация для мобильных устройств */
@media (max-width: 767px) {
    .product-new-slider .swiper-button-next,
    .product-new-slider .swiper-button-prev {
        width: 36px;
        height: 36px;
        /* На мобильных всегда показываем стрелки */
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) scale(1);
    }
    
    .product-new-slider .swiper-button-next {
        right: -18px;
    }
    
    .product-new-slider .swiper-button-prev {
        left: -18px;
    }
    
    .product-new-slider .swiper-button-next::after,
    .product-new-slider .swiper-button-prev::after {
        width: 10px;
        height: 10px;
    }
}

/* Дополнительные стили для лучшей доступности */
.product-new-slider .swiper-button-next:focus,
.product-new-slider .swiper-button-prev:focus {
    outline: 2px solid #8d6e63;
    outline-offset: 2px;
}

.product-new-slider .swiper-button-next:focus:not(:focus-visible),
.product-new-slider .swiper-button-prev:focus:not(:focus-visible) {
    outline: none;
}

/* ===== СМЕНА ИЗОБРАЖЕНИЯ ПРИ НАВЕДЕНИИ ===== */

.wnps-card-with-flipper {
    position: relative;
    overflow: hidden;
}
.swiper-slide a {
    width: 500px;
}

.wnps-flipper-container {
    position: relative;
    width: 100%;
    height: 100%; /* Используем всю высоту контейнера */
}

.wnps-flipper-front,
.wnps-flipper-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease-in-out;
    backface-visibility: hidden;
}

/* Первое изображение всегда видно */
.wnps-flipper-front {
    opacity: 1;
    z-index: 1;
}

/* Второе изображение изначально невидимо */
.wnps-flipper-back {
    opacity: 0;
    z-index: 2;
}

/* При наведении второе изображение плавно появляется поверх первого */
.wnps-card-with-flipper:not(.wnps-no-flip):hover .wnps-flipper-back {
    opacity: 1;
}

/* Первое изображение остается видимым всегда (можно сделать полупрозрачным при желании) */
.wnps-card-with-flipper:not(.wnps-no-flip):hover .wnps-flipper-front {
    opacity: 1; /* или 0.3 для эффекта затемнения первого изображения */
}

.wnps-flipper-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Гарантируем, что оба изображения всегда на месте */
.wnps-flipper-front,
.wnps-flipper-back {
    background: transparent;
}

/* Полностью скрываем второй слой, если нет второго изображения */
.wnps-no-flip .wnps-flipper-back {
    display: none !important;
}

/* Отключаем любые hover-эффекты если нет второго изображения */
.wnps-no-flip:hover .wnps-flipper-front {
    opacity: 1 !important;
}
/* Контейнер для изображения с бейджем */
.product-image-container {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 4px;
}

.product-image {
    display: block;
    text-align: center;
}

.product-image img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

/* Бейдж "Новинка" в левом нижнем углу изображения */
.new-product-badge {
position: absolute;
    background: #63858d;
    color: white;
    padding: 1px 8px;
    padding-bottom: 2px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    z-index: 10;
    bottom: 5px;
    right: 5px;
}

/* Альтернативные цвета для бейджа новинки */
.new-product-badge.green {
    background: linear-gradient(135deg, #00b894, #00d8a3);
    box-shadow: 0 2px 4px rgba(0, 184, 148, 0.3);
}

.new-product-badge.blue {
    background: linear-gradient(135deg, #0984e3, #00a8ff);
    box-shadow: 0 2px 4px rgba(9, 132, 227, 0.3);
}

.new-product-badge.purple {
    background: linear-gradient(135deg, #6c5ce7, #8a7cff);
    box-shadow: 0 2px 4px rgba(108, 92, 231, 0.3);
}

/* Остальные бейджи */
.favorite-heart {
    position: absolute;
    top: 10px;
    right: 42px;
    z-index: 2;
}
.wcts-out-of-stock-badge2 {
position: absolute;
    bottom: 4px;
    left: 10px;
    background: #ff4444d1;
    color: white;
    padding: 0px 10px;
    padding-bottom: 2px;
    border-radius: 25px;
    font-size: 12px;
    font-weight: bold;
    line-height: 19px;
}
.letu-in-cart-badge2 {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #8d6e63;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    z-index: 10;
}

/* Адаптация для мобильных */
@media (max-width: 767px) {
    .wcts-out-of-stock-badge,
    .letu-in-cart-badge {
        font-size: 10px;
        padding: 3px 6px;
    }
}

.product-card {
display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    padding: 20px;
    align-items: center;
    box-sizing: border-box;
    transition: all 0.3s ease;
    background: #fefcf8;
    border: 1px solid #e8e0d4;
    position: relative;
	    height: 430px;
}

.wcts-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 15px;
}



/* Стили для плавной смены изображения */
.product-image-hover {
    position: relative;
    width: 100%;
    height: 270px;
    overflow: hidden;
    border-radius: 8px;
}

.product-image-main,
.product-image-secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-image-main {
    opacity: 1;
    z-index: 1;
}

.product-image-secondary {
    opacity: 0;
    z-index: 2;
    transition: opacity 0.7s ease;
}

.product-card:hover .product-image-secondary {
    opacity: 1;
}

/* Отключаем смену изображения если нет второго изображения */
.product-card.no-hover-effect .product-image-secondary {
    display: none;
}

/* Адаптация для мобильных - отключаем эффект наведения */
@media (max-width: 767px) {
    .product-card:hover .product-image-secondary {
        opacity: 0;
    }
.product-new-slider .swiper-button-next, .product-new-slider .swiper-button-prev {
    display: none;
}
}