/* Container principal do catálogo */
.meu-catalogo-container {
    padding: 0; /* Ajuste para remover padding extra ao redor da barra de navegação */
    background-color: #f7f7f7; /* Um cinza claro para o fundo geral */
    font-family: Arial, sans-serif; /* Usando uma fonte mais comum e próxima */
}

/* Barra de Navegação/Filtro (top bar similar ao print) */
.meu-catalogo-filtro {
    display: flex;
    justify-content: flex-start; /* Alinhar à esquerda como no print */
    flex-wrap: wrap;
    margin-bottom: 30px;
    gap: 0; /* Remove gap para botões colados */
    background-color: #fff; /* Fundo branco para a barra de filtro */
    padding: 0; /* Remove padding interno da barra */
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* Sombra suave */
    border-bottom: 1px solid #eee; /* Linha sutil na parte inferior */
}

.meu-catalogo-btn-filtro {
    background-color: transparent; /* Fundo transparente para os botões */
    border: none; /* Remove bordas dos botões */
    padding: 15px 25px; /* Mais padding para maior área de clique e espaçamento */
    border-radius: 0; /* Cantos quadrados */
    cursor: pointer;
    font-size: 1em; /* Tamanho de fonte ajustado */
    color: #666; /* Cor de texto padrão para botões inativos */
    transition: background-color 0.3s ease, color 0.3s ease;
    text-transform: none; /* Não uppercase */
    font-weight: normal; /* Peso normal da fonte */
    border-bottom: 3px solid transparent; /* Para a barra roxa de ativo */
}

.meu-catalogo-btn-filtro:hover {
    background-color: #f0f0f0; /* Um fundo cinza claro no hover */
    color: #333; /* Cor mais escura no hover */
}

.meu-catalogo-btn-filtro.active {
    background-color: #fff; /* Fundo branco para o ativo */
    color: #8c52ff; /* Cor roxa do print para o texto ativo */
    border-bottom-color: #8c52ff; /* Barra roxa na parte inferior do botão ativo */
    font-weight: bold; /* Texto em negrito para o ativo */
}

/* Grid de produtos */
.meu-catalogo-grid {
    display: grid;
    /* Ajuste para ter 4 colunas em telas maiores, como no print */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px; /* Espaçamento entre os itens */
    padding: 30px; /* Padding ao redor da grade de produtos */
}

/* Item individual do produto */
.meu-catalogo-item {
    background-color: #fff;
    border: 1px solid #ddd; /* Borda mais fina */
    border-radius: 4px; /* Cantos levemente arredondados */
    padding: 15px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08); /* Sombra mais visível */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.meu-catalogo-item:hover {
    transform: translateY(-3px); /* Levanta um pouco no hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.12); /* Sombra mais pronunciada no hover */
}

.meu-catalogo-imagem {
    width: 100%; /* Ocupa toda a largura do container */
    max-width: 250px; /* Limite a largura da imagem se ela for muito grande */
    margin: 0 auto 15px auto; /* Centraliza e adiciona margem inferior */
}

.meu-catalogo-imagem img {
    width: 100%; /* Garante que a imagem preencha o container */
    height: auto;
    border-radius: 0; /* Remova bordas arredondadas se não quiser na imagem */
    display: block; /* Garante que a imagem se ajuste corretamente */
}

.meu-catalogo-titulo {
    font-size: 1.1em; /* Tamanho da fonte do título */
    margin-top: 0;
    margin-bottom: 5px; /* Menos margem para aproximar do próximo elemento */
    color: #333;
    font-weight: bold; /* Título em negrito */
}

/* Opcional: Se houver um SKU ou código abaixo do título */
/*
.meu-catalogo-sku {
    font-size: 0.85em;
    color: #999;
    margin-bottom: 0;
}
*/

/* Media Queries para Responsividade (ajuste se necessário) */
@media (max-width: 768px) {
    .meu-catalogo-filtro {
        justify-content: center; /* Centraliza os botões em telas menores */
    }
    .meu-catalogo-btn-filtro {
        padding: 12px 18px;
        font-size: 0.9em;
    }
    .meu-catalogo-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .meu-catalogo-btn-filtro {
        padding: 10px 15px;
        font-size: 0.8em;
    }
    .meu-catalogo-grid {
        grid-template-columns: 1fr; /* Uma coluna em telas muito pequenas */
        padding: 15px;
    }
}