/* ===== СТИЛИ ДЛЯ СТРАНИЦ КАТЕГОРИЙ ТОВАРОВ ===== */

/* Шапка категории */
.woocommerce-products-header {
    text-align: center !important;
    margin-bottom: 40px !important;
}

.woocommerce-products-header__title {
    color: var(--color-white) !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
}

/* Хлебные крошки */
.woocommerce-breadcrumb {
    color: var(--color-text-gray) !important;
    font-size: 0.9rem !important;
    margin-bottom: 20px !important;
}

.woocommerce-breadcrumb a {
    color: var(--color-gold-light) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.woocommerce-breadcrumb a:hover {
    color: var(--color-white) !important;
}

/* Сортировка и результат */
.woocommerce-result-count,
.woocommerce-ordering {
    color: var(--color-text-gray) !important;
    font-size: 0.9rem !important;
    margin-bottom: 20px !important;
}

/* Сортировка (select) */
.woocommerce-ordering .orderby {
    background: var(--color-bg-dark) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius-sm) !important;
    color: var(--color-text-light) !important;
    padding: 8px 12px !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.woocommerce-ordering .orderby:focus {
    outline: none !important;
    border-color: var(--color-gold) !important;
}

/* Сетка товаров */
.products.columns-4 {
    list-style: none !important;
    padding: 0 !important;
    /* margin: 0 -15px !important; */
}

/* Карточка товара */
.products.columns-4 .product {
    background: var(--color-bg-dark-alt) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius-md) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.products.columns-4 .product:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
    border-color: var(--color-gold) !important;
}

/* Ссылка на товар */
.products.columns-4 .woocommerce-LoopProduct-link {
    display: block !important;
    text-decoration: none !important;
    flex-grow: 1 !important;
}

/* Изображение товара */
.products.columns-4 .attachment-woocommerce_thumbnail {
    width: 100% !important;
    height: 370px !important;
    object-fit: cover !important;
    display: block !important;
    border-bottom: 1px solid var(--color-border) !important;
}

/* Заголовок товара */
.products.columns-4 .woocommerce-loop-product__title {
    color: var(--color-white) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin: 15px !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

/* Цена товара */
.products.columns-4 .price {
    color: var(--color-gold-light) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    margin: 0 15px 15px 15px !important;
    text-align: center !important;
}

.products.columns-4 .price .amount {
    background: var(--gradient-gold) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* Кнопки товара */
.products.columns-4 .button {
    display: block !important;
    background: var(--gradient-gold) !important;
    color: var(--color-black) !important;
    border: none !important;
    padding: 12px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: var(--border-radius-sm) !important;
    margin: 0 15px 15px 15px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.products.columns-4 .button:hover {
    background: var(--gradient-gold-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(200, 144, 36, 0.3) !important;
}

/* Нет в наличии */
.products.columns-4 .product.outofstock .woocommerce-loop-product__title {
    position: relative !important;
}

.products.columns-4 .product.outofstock .woocommerce-loop-product__title::after {
    content: "Нет в наличии" !important;
    display: block !important;
    color: #ff6b6b !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    margin-top: 5px !important;
}

.products.columns-4 .product.outofstock .button {
    opacity: 0.8 !important;
    background: linear-gradient(90deg, #666 0%, #888 100%) !important;
    color: #ccc !important;
}

.products.columns-4 .product.outofstock .button:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Разные кнопки для разных типов товаров */
.products.columns-4 .button.product_type_variable {
    /* Кнопка для вариативных товаров */
}

.products.columns-4 .button.add_to_cart_button {
    /* Кнопка для товаров в наличии */
}

/* Адаптивность */
@media (max-width: 1024px) {
    .woocommerce-products-header__title {
        font-size: 2rem !important;
    }
}

@media (max-width: 768px) {
    .woocommerce-products-header__title {
        font-size: 1.8rem !important;
    }

    .products.columns-4 {
        margin: 0 -10px !important;
    }
}

@media (max-width: 480px) {
    .woocommerce-products-header__title {
        font-size: 1.6rem !important;
    }
}

/* Пагинация (если есть) */
.woocommerce-pagination {
    margin-top: 40px !important;
    text-align: center !important;
}

.woocommerce-pagination ul.page-numbers {
    list-style: none !important;
    padding: 0 !important;
    display: inline-flex !important;
    gap: 8px !important;
}

.woocommerce-pagination ul.page-numbers li {
    margin: 0 !important;
}

.woocommerce-pagination ul.page-numbers a,
.woocommerce-pagination ul.page-numbers span {
    display: block !important;
    padding: 8px 15px !important;
    background: var(--color-bg-dark-alt) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius-sm) !important;
    color: var(--color-text-light) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.woocommerce-pagination ul.page-numbers a:hover {
    background: var(--gradient-gold) !important;
    color: var(--color-black) !important;
    border-color: var(--color-gold) !important;
}

.woocommerce-pagination ul.page-numbers span.current {
    background: var(--gradient-gold) !important;
    color: var(--color-black) !important;
    border-color: var(--color-gold) !important;
    font-weight: 600 !important;
}

/* ===== СТИЛИ ДЛЯ КАТЕГОРИЙ ТОВАРОВ ===== */

/* Контейнер с категориями */
.site-main {
    padding: 20px 0;
}

/* Карточка категории */
.product-category {
    background: var(--color-bg-dark-alt) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius-md) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    position: relative !important;
}

.product-category:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
    border-color: var(--color-gold) !important;
}

/* Ссылка категории */
.product-category a {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    flex-grow: 1 !important;
    height: 100% !important;
}

/* Изображение категории */
.product-category img {
    width: 100% !important;
    height: 370px !important;
    object-fit: cover !important;
    display: block !important;
    border-bottom: 1px solid var(--color-border) !important;
    transition: transform 0.3s ease !important;
}

.product-category:hover img {
    transform: scale(1.05) !important;
}

/* Заголовок категории */
.woocommerce-loop-category__title {
    color: var(--color-white) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin: 15px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    flex-grow: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Счетчик товаров в категории */
.woocommerce-loop-category__title mark.count {
    display: inline-block !important;
    background: var(--gradient-gold) !important;
    color: var(--color-black) !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: var(--border-radius-sm) !important;
    margin-left: 8px !important;
    border: none !important;
    min-width: 30px !important;
    text-align: center !important;
}

/* Эффект при наведении на счетчик */
.product-category:hover .woocommerce-loop-category__title mark.count {
    background: var(--gradient-gold-hover) !important;
    box-shadow: 0 2px 8px rgba(200, 144, 36, 0.3) !important;
}

/* Псевдо-кнопка "Смотреть все" */
.product-category::after {
    content: "Смотреть все" !important;
    display: block !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: var(--color-gold-light) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 8px !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 2 !important;
}

.product-category:hover::after {
    transform: translateY(0) !important;
}

/* Адаптивность для категорий */
@media (max-width: 1024px) {
    /* .product-category img {
        height: 220px !important;
    } */

    .woocommerce-loop-category__title {
        font-size: 1rem !important;
    }
}

@media (max-width: 768px) {
    /* .product-category img {
        height: 200px !important;
    } */

    .woocommerce-loop-category__title {
        font-size: 0.95rem !important;
        margin: 12px !important;
    }

    .woocommerce-loop-category__title mark.count {
        font-size: 0.8rem !important;
        padding: 2px 6px !important;
    }
}

@media (max-width: 480px) {
    /* .product-category img {
        height: 180px !important;
    } */

    .woocommerce-loop-category__title {
        font-size: 0.9rem !important;
        margin: 10px !important;
        flex-direction: column !important;
        gap: 5px !important;
    }

    .woocommerce-loop-category__title mark.count {
        margin-left: 0 !important;
        margin-top: 5px !important;
    }

    /* ИЗМЕНЕНИЕ: Делаем карточки категорий по 1 в строке на мобильных */
    .products.columns-4 {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .products.columns-4 .product-category {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* ДОБАВЛЕНИЕ: Делаем обычные карточки товаров тоже по 1 в строке на мобильных */
    .products.columns-4 .product {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* Сетка категорий */
.products.columns-4 .product-category {
    margin-bottom: 20px !important;
}

/* Анимация загрузки */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-category {
    animation: fadeInUp 0.5s ease forwards;
}

.product-category.first {
    animation-delay: 0.1s;
}

/* Состояние пустой категории (если нужно) */
.product-category.no-products {
    opacity: 0.7;
}

.product-category.no-products:hover {
    opacity: 1;
}

/* Затемнение изображения при наведении */
.product-category a::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0) !important;
    transition: background 0.3s ease !important;
    z-index: 1 !important;
}

.product-category:hover a::before {
    background: rgba(0, 0, 0, 0.2) !important;
}