/* ============================================
   СТИЛИ МАГАЗИНА В СТИЛЕ WILDBERRIES
   5 товаров в ряд с современным дизайном
   ============================================ */

/* Контейнер магазина */
.shop-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Сетка товаров - 6 в ряд (как на Wildberries) */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Принудительно 6 колонок */
.woocommerce .products.columns-6 {
    grid-template-columns: repeat(6, 1fr) !important;
}

.woocommerce ul.products[class*="columns-"] {
    grid-template-columns: repeat(6, 1fr) !important;
}

/* Карточка товара - компактная как на Wildberries */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    position: relative;
    background: rgba(255,255,255,0.02) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
    transition: all 0.2s ease !important;
}

/* Убираем эффект при наведении на карточку */
.woocommerce ul.products li.product:hover {
    background: rgba(255,255,255,0.02) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Оранжевая подсветка только на фото при наведении */
.woocommerce ul.products li.product:hover img {
    box-shadow: 0 4px 20px rgba(232, 115, 46, 0.4), 0 2px 8px rgba(232, 115, 46, 0.3) !important;
}

/* Изображение товара */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    display: block;
    text-decoration: none;
}

.woocommerce ul.products li.product img {
    width: 100% !important;
    height: 280px !important;
    object-fit: cover !important;
    background: transparent !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    padding: 0 !important;
    /* Вертикальный формат 3:4 (900×1200) - полностью видно, закругленные углы со всех сторон */
}

/* Контейнер с информацией - компактный */
.woocommerce ul.products li.product .product-info {
    padding: 8px 4px !important;
}

/* Название товара - компактное */
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.3 !important;
    height: 34px !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Рейтинг */
.woocommerce .star-rating {
    float: none;
    display: inline-flex;
    align-items: center;
    margin: 0 0 8px 0;
    font-size: 14px;
}

.woocommerce .star-rating span {
    color: #ffa800;
}

/* Цена - ЖИРНАЯ ОРАНЖЕВАЯ СПРАВА */
.woocommerce ul.products li.product .price {
    display: block !important;
    margin: 0 0 8px 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #e8732e !important;
    text-align: right !important;
}

.woocommerce ul.products li.product .price del {
    font-size: 16px !important;
    color: #999 !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none !important;
    color: #e8732e !important;
    font-weight: 700 !important;
}

/* Все варианты отображения цены */
.woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
    font-weight: 700 !important;
    color: #e8732e !important;
}

/* Кнопка "В корзину" - компактная */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
    width: 100%;
    background: transparent !important;
    color: #fff !important;
    border: 2px solid #e8732e !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: block;
    text-decoration: none !important;
    margin-top: 6px !important;
    height: auto !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
    background: #e8732e !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(232, 115, 46, 0.6), 0 4px 12px rgba(232, 115, 46, 0.4);
    transform: none;
}

/* Состояние кнопки во время загрузки */
.woocommerce ul.products li.product .add_to_cart_button.loading,
.woocommerce ul.products li.product .ajax_add_to_cart.loading,
.single_add_to_cart_button.loading,
button.loading {
    opacity: 0.6 !important;
    cursor: wait !important;
    pointer-events: none !important;
}

/* Состояние кнопки после добавления в корзину */
.woocommerce ul.products li.product .add_to_cart_button.added,
.woocommerce ul.products li.product .ajax_add_to_cart.added,
.single_add_to_cart_button.added,
button.added {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #fff !important;
}

/* Кнопка "В корзине" - зеленая с hover эффектом */
.woocommerce ul.products li.product .add_to_cart_button.added-to-cart {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #fff !important;
    cursor: pointer !important;
}

.woocommerce ul.products li.product .add_to_cart_button.added-to-cart:hover {
    background: #059669 !important;
    border-color: #059669 !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.6), 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}

/* Кнопка "Нет в наличии" - наследует ВСЕ стили от "Добавить", меняем только цвет */
.woocommerce ul.products li.product .out-of-stock-btn,
.woocommerce ul.products li.product button.out-of-stock-btn,
.woocommerce ul.products li.product span.out-of-stock-btn {
    color: #ef4444 !important; /* КРАСНЫЙ текст */
    border-color: #ef4444 !important; /* КРАСНАЯ рамка */
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.woocommerce ul.products li.product .out-of-stock-btn i,
.woocommerce ul.products li.product button.out-of-stock-btn i,
.woocommerce ul.products li.product span.out-of-stock-btn i {
    color: #ef4444 !important; /* КРАСНАЯ иконка */
}

.woocommerce ul.products li.product .out-of-stock-btn .button-text,
.woocommerce ul.products li.product button.out-of-stock-btn .button-text,
.woocommerce ul.products li.product span.out-of-stock-btn .button-text {
    color: #ef4444 !important; /* КРАСНЫЙ текст */
}

.woocommerce ul.products li.product .out-of-stock-btn:hover,
.woocommerce ul.products li.product button.out-of-stock-btn:hover,
.woocommerce ul.products li.product span.out-of-stock-btn:hover {
    background: transparent !important;
    color: #ef4444 !important; /* КРАСНЫЙ при наведении */
    border-color: #ef4444 !important; /* КРАСНАЯ рамка при наведении */
    transform: none !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* Анимация для счетчика корзины */
.cart-count.bounce,
.cart-contents-count.bounce {
    animation: bounceAnimation 0.5s ease;
}

@keyframes bounceAnimation {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.3);
    }
    50% {
        transform: scale(0.9);
    }
    75% {
        transform: scale(1.15);
    }
}

/* Бейдж "Sale" */
.woocommerce span.onsale {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e8732e;
    color: #fff;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    z-index: 10;
    text-transform: uppercase;
}

/* Бейдж "Нет в наличии" */
.woocommerce ul.products li.product .out-of-stock-label {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    z-index: 10;
}

/* Кнопка "Избранное" */
.woocommerce ul.products li.product .wishlist-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.woocommerce ul.products li.product .wishlist-button:hover {
    background: #e8732e;
    color: #fff;
}

/* Пагинация */
.woocommerce nav.woocommerce-pagination {
    margin-top: 40px;
    text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
    display: inline-flex;
    gap: 8px;
    border: none;
}

.woocommerce nav.woocommerce-pagination ul li {
    margin: 0;
    border: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    padding: 10px 15px;
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: #e8732e;
    color: #fff;
    border-color: #e8732e;
}

/* Фильтры и сортировка */
.woocommerce-ordering {
    margin-bottom: 30px;
}

.woocommerce-ordering select {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
}

/* Результаты поиска */
.woocommerce-result-count {
    margin-bottom: 20px;
    color: #666;
    font-size: 14px;
}

/* ============================================
   АДАПТИВНОСТЬ
   ============================================ */

/* Планшеты (4 товара в ряд) */
@media (max-width: 1200px) {
    ul.products {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }
}

/* Маленькие планшеты (3 товара в ряд) */
@media (max-width: 992px) {
    ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }
    
    .woocommerce ul.products li.product img {
        height: 300px !important;
        object-fit: contain !important;
    }
}

/* Мобильные устройства (2 товара в ряд) */
@media (max-width: 768px) {
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .shop-container {
        padding: 20px 10px;
    }
    
    .woocommerce ul.products li.product img {
        height: 250px !important;
        object-fit: contain !important;
    }
    
    .woocommerce ul.products li.product h2,
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 12px !important;
        height: 36px;
    }
    
    .woocommerce ul.products li.product .price {
        font-size: 16px !important;
    }
    
    .woocommerce ul.products li.product .button {
        padding: 10px 15px !important;
        font-size: 12px !important;
    }
}

/* Очень маленькие экраны (1 товар в ряд) */
@media (max-width: 480px) {
    ul.products {
        grid-template-columns: 1fr !important;
    }
    
    .woocommerce ul.products li.product img {
        height: 350px !important;
        object-fit: contain !important;
    }
}

/* ============================================
   КОРЗИНА И CHECKOUT
   ============================================ */

/* Общие стили для форм */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    width: 100%;
    transition: border-color 0.3s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: #e8732e;
    outline: none;
}

/* Кнопка оформления заказа */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background: #e8732e !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 15px 30px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background: #d16525 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(232, 115, 46, 0.4);
}

/* Таблица корзины */
.woocommerce table.shop_table {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.woocommerce table.shop_table th {
    background: #f5f5f5;
    padding: 15px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    color: #333;
}

.woocommerce table.shop_table td {
    padding: 15px;
    border-top: 1px solid #eee;
}

/* Итоговая стоимость */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 16px;
}

/* ============================================
   СТРАНИЦА ТОВАРА
   ============================================ */

.woocommerce div.product {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    margin: 20px auto;
    max-width: 1200px;
}

.woocommerce div.product .product_title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.woocommerce div.product p.price {
    font-size: 32px;
    font-weight: 700;
    color: #e8732e;
    margin-bottom: 20px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 25px;
}

/* ============================================
   УВЕДОМЛЕНИЯ
   ============================================ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid;
}

.woocommerce-message {
    background: #f0f9ff;
    border-color: #0ea5e9;
    color: #0369a1;
}

.woocommerce-info {
    background: #fefce8;
    border-color: #eab308;
    color: #854d0e;
}

.woocommerce-error {
    background: #fef2f2;
    border-color: #ef4444;
    color: #991b1b;
}