/* Estilos do Cabeçalho da Categoria de Produto */
/* Oculta o cabeçalho de página padrão do tema APENAS em páginas de categoria de produto */
.term-description {
    display: none;
}

/* Design Moderno para Cabeçalho de Categoria WooCommerce */

.category-header-container {
    display: flex;
    flex-wrap: wrap; /* Garante a responsividade */
    align-items: flex-start; /* Alinha os itens no topo */
    gap: 2rem; /* Espaçamento entre texto e imagem */
    padding: 2rem;
    margin-bottom: 2.5rem;
    background-color: #f9f9f9; /* Cor de fundo suave */
    border: 1px solid #e0e0e0; /* Borda sutil */
    border-radius: 8px; /* Bordas arredondadas */
}

.category-header-text {
    flex: 1 1 60%; /* Permite que o texto cresça e ocupe pelo menos 60% */
    min-width: 300px; /* Largura mínima para evitar que o texto seja espremido */
    /* O texto volta ao alinhamento padrão (esquerda) */
}

.category-header-text .woocommerce-products-header__title {
    font-size: 2.2rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.category-header-text .woocommerce-archive-description {
    font-size: 1rem;
    color: #555;
}

.category-header-image {
    flex: 1 1 30%; /* Permite que a imagem ocupe até 30% */
    max-width: 250px; /* Tamanho máximo para a imagem */
    margin-left: auto; /* Alinha a imagem à direita */
}

.category-header-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3; /* Proporção da imagem */
    object-fit: contain;
    border-radius: 8px;
    display: block;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Sombra sutil para destaque */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-header-image img:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Media Query para Tablets e Celulares */
@media (max-width: 767.98px) {
    .category-header-container {
        flex-direction: column; /* Empilha os itens */
        text-align: center; /* Centraliza o texto */
        padding: 1.5rem;
    }

    .category-header-text {
        order: 1; /* Texto vem primeiro */
    }

    .category-header-image {
        order: 2; /* Imagem vem depois */
        margin-left: 0; /* Remove o alinhamento à direita */
        max-width: 200px; /* Imagem um pouco menor no mobile */
    }

    .category-header-text .woocommerce-products-header__title {
        font-size: 1.8rem; /* Título menor para mobile */
    }
}