/* Variáveis */
:root {
    --verde-primario: #2E8B57;
    --verde-secundario: #3CB371;
    --branco: #FFFFFF;
    --cinza-claro: #F5F5F5;
    --cinza-medio: #DDDDDD;
    --cinza-texto: #333333;
    --sombra: 0 3px 10px rgba(0,0,0,0.1);
    --borda: 1px solid var(--cinza-medio);
}

/* Reset e Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--cinza-texto);
    line-height: 1.6;
    background-color: var(--cinza-claro);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* Tipografia */
h1, h2, h3, h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--verde-primario);
}

h1 {
    font-size: 2.5rem;
    line-height: 1.2;
}

h2 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
}

h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: var(--verde-secundario);
    margin: 15px auto 0;
}

h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: 1rem;
}

/* Botões */
.botao {
    display: inline-block;
    background-color: var(--verde-primario);
    color: var(--branco);
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
}

.botao:hover {
    background-color: var(--verde-secundario);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(46, 139, 87, 0.3);
}

.botao-outline {
    background-color: transparent;
    border: 2px solid var(--verde-primario);
    color: var(--verde-primario);
}

.botao-outline:hover {
    background-color: var(--verde-primario);
    color: var(--branco);
}

/* Cabeçalho */
.cabecalho {
    background-color: var(--branco);
    box-shadow: var(--sombra);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.cabecalho .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 50px;
    transition: transform 0.3s;
}

.logo img:hover {
    transform: scale(1.05);
}

.menu ul {
    display: flex;
    gap: 25px;
}

.menu a {
    font-weight: 500;
    padding: 5px 0;
    position: relative;
    transition: color 0.3s;
}

.menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--verde-primario);
    transition: width 0.3s;
}

.menu a:hover {
    color: var(--verde-primario);
}

.menu a:hover::after {
    width: 100%;
}

.acoes {
    display: flex;
    align-items: center;
    gap: 20px;
}

.icone-busca, .icone-carrinho, .icone-conta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: transform 0.3s;
}

.icone-busca:hover, .icone-carrinho:hover, .icone-conta:hover {
    transform: scale(1.1);
}

.icone-carrinho {
    position: relative;
}

.contador {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: var(--verde-primario);
    color: var(--branco);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Banner Principal */
.banner-principal {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://static.vecteezy.com/ti/fotos-gratis/t1/6966201-tropical-verde-folhas-em-fundo-escuro-natureza-verao-floresta-planta-conceito-foto.jpg');
    background-size: cover;
    background-position: center;
    color: var(--branco);
    padding: 120px 0;
    text-align: center;
    margin-bottom: 50px;
}

.banner-principal h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    color: var(--branco);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    animation: fadeInDown 1s ease;
}

.banner-principal p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeIn 1.5s ease;
}

.banner-principal .botao {
    animation: fadeInUp 1s ease;
}

/* Grade de Produtos */
.grade-produtos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 40px 0;
}

.produto {
    background-color: var(--branco);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--sombra);
    transition: all 0.3s ease;
    position: relative;
}

.produto:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.produto img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.produto:hover img {
    transform: scale(1.05);
}

.produto h3 {
    padding: 0 15px;
    margin-top: 15px;
    font-size: 1.2rem;
}

.produto .preco {
    padding: 0 15px;
    font-weight: bold;
    color: var(--verde-primario);
    font-size: 1.2rem;
    margin: 10px 0;
}

.produto .botao {
    display: block;
    margin: 15px;
    text-align: center;
    width: calc(100% - 30px);
}

/* Promoções */
.grade-promocoes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 40px 0;
}

.promocao {
    background-color: var(--branco);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--sombra);
    display: flex;
}

.promocao img {
    width: 50%;
    height: 250px;
    object-fit: cover;
}

.info-promocao {
    width: 50%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.preco-antigo {
    text-decoration: line-through;
    color: #999;
    font-size: 1rem;
}

.preco-promocao {
    color: var(--verde-primario);
    font-weight: bold;
    font-size: 1.5rem;
    margin: 10px 0;
}

/* Benefícios */
.beneficios {
    padding: 60px 0;
    background-color: var(--branco);
}

.itens-beneficios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.beneficio {
    text-align: center;
    padding: 30px 20px;
    border-radius: 8px;
    background-color: var(--cinza-claro);
    transition: all 0.3s ease;
}

.beneficio:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra);
}

.beneficio img {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
}

/* Rodapé */
.rodape {
    background-color: #2a2a2a;
    color: var(--branco);
    padding: 60px 0 0;
}

.rodape .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.rodape h3 {
    color: var(--branco);
    margin-bottom: 25px;
    font-size: 1.2rem;
}

.rodape h3::after {
    background-color: var(--verde-secundario);
}

.rodape a:hover {
    color: var(--verde-secundario);
}

.rodape p {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rodape img {
    filter: brightness(0) invert(1);
    opacity: 0.7;
}

.redes-sociais {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.redes-sociais a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.redes-sociais a:hover {
    background-color: var(--verde-primario);
    transform: translateY(-3px);
}

.form-newsletter input {
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
    font-family: 'Open Sans', sans-serif;
}

.copyright {
    background-color: #1a1a1a;
    padding: 20px 0;
    margin-top: 60px;
    text-align: center;
    font-size: 0.9rem;
    color: #999;
}

/* Animações */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Página Sobre */
.banner-interno {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://static.vecteezy.com/ti/fotos-gratis/t1/6966201-tropical-verde-folhas-em-fundo-escuro-natureza-verao-floresta-planta-conceito-foto.jpg');
    background-size: cover;
    background-position: center;
    color: var(--branco);
    padding: 100px 0;
    text-align: center;
    margin-bottom: 50px;
}

.banner-interno h1 {
    font-size: 2.5rem;
    color: var(--branco);
}

.conteudo-sobre {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

.imagem-sobre img {
    border-radius: 8px;
    box-shadow: var(--sombra);
}

.valores {
    margin: 60px 0;
}

.itens-valores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.valor {
    text-align: center;
    padding: 30px;
    background-color: var(--branco);
    border-radius: 8px;
    box-shadow: var(--sombra);
    transition: all 0.3s ease;
}

.valor:hover {
    transform: translateY(-10px);
}

.valor img {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
}

.equipe {
    margin: 60px 0;
}

.membros {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.membro {
    text-align: center;
    background-color: var(--branco);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--sombra);
}

.membro img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.membro h3 {
    margin: 15px 0 5px;
}

.membro p {
    padding: 0 15px 20px;
    color: #666;
    font-size: 0.9rem;
}

/* Página Busca */
.barra-busca {
    margin-bottom: 40px;
}

.form-busca {
    display: flex;
    margin-bottom: 20px;
}

.form-busca input {
    flex: 1;
    padding: 15px;
    border: var(--borda);
    border-radius: 5px 0 0 5px;
    font-size: 1rem;
}

.form-busca button {
    border-radius: 0 5px 5px 0;
    padding: 0 30px;
}

.filtros {
    display: flex;
    align-items: center;
    gap: 15px;
}

.filtros select {
    padding: 8px 15px;
    border: var(--borda);
    border-radius: 5px;
    background-color: var(--branco);
}

.info-busca {
    margin-bottom: 20px;
    font-style: italic;
    color: #666;
}

.paginacao {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
}

.paginacao a, .pagina-atual {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 5px;
}

.paginacao a {
    border: var(--borda);
}

.pagina-atual {
    background-color: var(--verde-primario);
    color: var(--branco);
}

/* Página Produto */
.caminho {
    margin: 20px 0;
    font-size: 0.9rem;
    color: #666;
}

.caminho a {
    color: var(--verde-primario);
}

.detalhe-produto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 40px 0;
}

.galeria-produto {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.imagem-principal img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 8px;
}

.miniaturas {
    display: flex;
    gap: 10px;
}

.miniaturas img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.miniaturas img:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.info-produto h1 {
    font-size: 2rem;
    color: var(--cinza-texto);
    margin-bottom: 10px;
}

.avaliacao {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.estrelas {
    color: #FFD700;
    font-size: 1.2rem;
}

.preco {
    margin: 20px 0;
}

.preco-atual {
    font-size: 2rem;
    font-weight: bold;
    color: var(--verde-primario);
}

.parcelamento {
    display: block;
    font-size: 0.9rem;
    color: #666;
}

.descricao-curta {
    margin: 20px 0;
    padding: 20px 0;
    border-top: var(--borda);
    border-bottom: var(--borda);
}

.form-compra {
    margin: 30px 0;
}

.opcoes {
    margin-bottom: 20px;
}

.opcao {
    margin-bottom: 15px;
}

.opcao label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.opcao select {
    width: 100%;
    padding: 10px;
    border: var(--borda);
    border-radius: 5px;
}

.quantidade {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.quantidade label {
    margin-right: 15px;
    font-weight: 500;
}

.controle-quantidade {
    display: flex;
    align-items: center;
}

.controle-quantidade button {
    width: 30px;
    height: 30px;
    background-color: var(--cinza-claro);
    border: none;
    font-size: 1rem;
    cursor: pointer;
}

.controle-quantidade input {
    width: 50px;
    height: 30px;
    text-align: center;
    border: var(--borda);
    margin: 0 5px;
}

.entrega {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background-color: var(--cinza-claro);
    border-radius: 5px;
    margin: 20px 0;
}

.entrega img {
    width: 30px;
}

.compartilhar {
    display: flex;
    align-items: center;
    gap: 15px;
}

.compartilhar a img {
    width: 25px;
    transition: transform 0.3s;
}

.compartilhar a:hover img {
    transform: scale(1.2);
}

.detalhes-adicionais {
    margin: 60px 0;
}

.abas {
    display: flex;
    border-bottom: var(--borda);
    margin-bottom: 20px;
}

.aba {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    cursor: pointer;
}

.aba.ativa {
    border-bottom-color: var(--verde-primario);
    color: var(--verde-primario);
    font-weight: 600;
}

.conteudo-aba {
    display: none;
    padding: 20px 0;
}

.conteudo-aba.ativa {
    display: block;
}

.produtos-relacionados {
    margin: 60px 0;
}

/* Página Cadastro */
.cadastro .container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    margin: 60px auto;
}

.formulario-cadastro {
    background-color: var(--branco);
    padding: 40px;
    border-radius: 8px;
    box-shadow: var(--sombra);
}

.campos-duplos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.campo {
    margin-bottom: 20px;
}

.campo label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.campo input,
.campo select {
    width: 100%;
    padding: 12px 15px;
    border: var(--borda);
    border-radius: 5px;
    font-family: 'Open Sans', sans-serif;
}

.campo .dica {
    font-size: 0.8rem;
    color: #666;
    margin-top: 5px;
}

.campo-com-botao {
    display: flex;
    gap: 10px;
}

.campo-com-botao input {
    flex: 1;
}

.campo-com-botao button {
    white-space: nowrap;
}

.termos {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0;
}

.termos input {
    width: auto;
}

.termos label {
    font-size: 0.9rem;
    font-weight: normal;
}

.termos a {
    color: var(--verde-primario);
    text-decoration: underline;
}

.login-link {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
}

.login-link a {
    color: var(--verde-primario);
    font-weight: 500;
}

.beneficios-cadastro {
    background-color: var(--cinza-claro);
    padding: 30px;
    border-radius: 8px;
}

.beneficios-cadastro h2 {
    margin-bottom: 20px;
    text-align: left;
}

.beneficios-cadastro h2::after {
    margin: 15px 0;
}

.beneficios-cadastro ul {
    margin-left: 20px;
}

.beneficios-cadastro li {
    margin-bottom: 15px;
    position: relative;
    padding-left: 25px;
}

.beneficios-cadastro li::before {
    content: '✓';
    color: var(--verde-primario);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Página Pedidos */
.resumo-carrinho {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    margin-bottom: 60px;
}

.itens-carrinho {
    background-color: var(--branco);
    padding: 30px;
    border-radius: 8px;
    box-shadow: var(--sombra);
}

.lista-itens {
    margin-top: 20px;
}

.item-carrinho {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 20px;
    padding: 20px 0;
    border-bottom: var(--borda);
    align-items: center;
}

.produto-info {
    display: flex;
    gap: 15px;
}

.produto-info img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

.produto-info h3 {
    font-size: 1rem;
    margin-bottom: 5px;
}

.produto-info p {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 5px;
}

.remover {
    background: none;
    border: none;
    color: #999;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.remover:hover {
    color: var(--verde-primario);
}

.controle-quantidade {
    display: flex;
    align-items: center;
}

.controle-quantidade button {
    width: 30px;
    height: 30px;
    background-color: var(--cinza-claro);
    border: none;
    font-size: 1rem;
    cursor: pointer;
}

.controle-quantidade input {
    width: 50px;
    height: 30px;
    text-align: center;
    border: var(--borda);
    margin: 0 5px;
}

.produto-preco, .produto-subtotal {
    font-weight: 500;
}

.resumo-compra {
    background-color: var(--branco);
    padding: 30px;
    border-radius: 8px;
    box-shadow: var(--sombra);
    align-self: flex-start;
    position: sticky;
    top: 20px;
}

.detalhes-compra {
    margin: 20px 0;
}

.linha {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.linha.total {
    font-weight: bold;
    font-size: 1.1rem;
    margin: 20px 0;
    padding-top: 10px;
    border-top: var(--borda);
}

.continuar-comprando {
    text-align: center;
    margin-top: 15px;
}

.continuar-comprando a {
    color: var(--verde-primario);
    text-decoration: underline;
}

.cupom {
    margin-top: 30px;
    padding-top: 20px;
    border-top: var(--borda);
}

.cupom h3 {
    font-size: 1rem;
    margin-bottom: 15px;
}

.campo-cupom {
    display: flex;
    gap: 10px;
}

.campo-cupom input {
    flex: 1;
    padding: 10px;
    border: var(--borda);
    border-radius: 5px;
}

.historico-pedidos {
    background-color: var(--branco);
    padding: 30px;
    border-radius: 8px;
    box-shadow: var(--sombra);
}

.tabela-pedidos {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr;
}

.cabecalho-tabela, .linha-tabela {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 15px;
    padding: 15px 0;
    align-items: center;
}

.cabecalho-tabela {
    font-weight: bold;
    border-bottom: var(--borda);
}

.linha-tabela {
    border-bottom: var(--borda);
}

.linha-tabela:last-child {
    border-bottom: none;
}

.status {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.status.entregue {
    background-color: #e6f7ee;
    color: var(--verde-primario);
}

.status.transporte {
    background-color: #fff8e6;
    color: #ffa500;
}

.status.processamento {
    background-color: #e6f3ff;
    color: #0066cc;
}

.link {
    color: var(--verde-primario);
    text-decoration: underline;
}

        .pagina-produtos {
            padding: 40px 0;
        }
        
        .filtros-produtos {
            background-color: var(--branco);
            padding: 20px;
            border-radius: 8px;
            box-shadow: var(--sombra);
            margin-bottom: 30px;
        }
        
        .filtros-superiores {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .ordenacao select {
            padding: 8px 15px;
            border: var(--borda);
            border-radius: 5px;
            font-family: 'Open Sans', sans-serif;
        }
        
        .filtros-laterais {
            display: grid;
            grid-template-columns: 250px 1fr;
            gap: 30px;
        }
        
        .filtros-categorias {
            background-color: var(--cinza-claro);
            padding: 20px;
            border-radius: 8px;
        }
        
        .grupo-filtro {
            margin-bottom: 20px;
        }
        
        .grupo-filtro h3 {
            font-size: 1.1rem;
            margin-bottom: 15px;
            color: var(--cinza-texto);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .grupo-filtro h3::after {
            content: '+';
            font-size: 1.2rem;
        }
        
        .grupo-filtro.ativo h3::after {
            content: '-';
        }
        
        .opcoes-filtro {
            display: none;
        }
        
        .grupo-filtro.ativo .opcoes-filtro {
            display: block;
        }
        
        .opcao-filtro {
            margin-bottom: 10px;
        }
        
        .opcao-filtro label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            cursor: pointer;
        }
        
        .opcao-filtro input[type="checkbox"] {
            width: 16px;
            height: 16px;
        }
        
        .faixa-preco {
            width: 100%;
            height: 5px;
            background-color: var(--cinza-medio);
            border-radius: 5px;
            margin: 15px 0;
            position: relative;
        }
        
        .barra-preco {
            position: absolute;
            height: 100%;
            background-color: var(--verde-primario);
            border-radius: 5px;
        }
        
        .alavancas {
            position: relative;
            height: 20px;
        }
        
        .alavanca {
            position: absolute;
            width: 16px;
            height: 16px;
            background-color: var(--verde-primario);
            border-radius: 50%;
            top: 0;
            transform: translateY(-50%);
            cursor: pointer;
        }
        
        .valores-preco {
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
        }
        
        .resultados-filtro {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 20px;
        }
        
        .paginacao {
            display: flex;
            justify-content: center;
            margin-top: 50px;
        }
        
        .paginacao a {
            display: inline-block;
            padding: 8px 15px;
            margin: 0 5px;
            border: var(--borda);
            border-radius: 5px;
            transition: all 0.3s ease;
        }
        
        .paginacao a:hover {
            background-color: var(--verde-primario);
            color: var(--branco);
            border-color: var(--verde-primario);
        }
        
        .paginacao .ativa {
            background-color: var(--verde-primario);
            color: var(--branco);
            border-color: var(--verde-primario);
        }
        
        /* Responsivo */
        @media (max-width: 768px) {
            .filtros-laterais {
                grid-template-columns: 1fr;
            }
            
            .filtros-superiores {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .grade-produtos {
                grid-template-columns: 1fr 1fr;
            }
        }
        
        @media (max-width: 480px) {
            .grade-produtos {
                grid-template-columns: 1fr;
            }
            
            .paginacao a {
                padding: 6px 10px;
                margin: 0 2px;
            }
        }

        /* Página Contato */
.contato .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 60px auto;
}

.info-contato h2 {
    text-align: left;
}

.info-contato h2::after {
    margin: 15px 0;
}

.dados-contato {
    margin-top: 30px;
}

.item-contato {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.item-contato img {
    width: 24px;
    height: 24px;
    margin-top: 3px;
}

.item-contato h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: var(--cinza-texto);
}

.formulario-contato {
    background-color: var(--branco);
    padding: 30px;
    border-radius: 8px;
    box-shadow: var(--sombra);
}

.formulario-contato h2 {
    text-align: left;
    margin-bottom: 20px;
}

.formulario-contato h2::after {
    margin: 15px 0;
}

.campo {
    margin-bottom: 20px;
}

.campo label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 12px 15px;
    border: var(--borda);
    border-radius: 5px;
    font-family: 'Open Sans', sans-serif;
}

.campo textarea {
    resize: vertical;
    min-height: 120px;
}

.mapa {
    margin: 60px 0;
}

.mapa h2 {
    margin-bottom: 30px;
}

.mapa-container {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--sombra);
}

.fas, .far, .fab {
    margin-right: 8px;
}

.cabecalho .menu .fas {
    width: 20px;
    text-align: center;
}

.acoes .fas, .acoes .far, .acoes .fab {
    margin-right: 0;
    font-size: 1.2rem;
}

.rodape .links .fas {
    font-size: 0.8rem;
    color: var(--verde-primario);
}

.rodape .contato .fas {
    width: 20px;
    color: var(--verde-primario);
}

/* Ícones de destaque em produtos */
.destaque-promocao i, .destaque-novo i {
    margin-right: 3px;
}

/* Ajustes para ícones em filtros */
.grupo-filtro .fas {
    width: 20px;
}

.opcao-filtro .fas {
    font-size: 0.9rem;
    color: var(--verde-primario);
}

/* Botões com ícones */
.botao i {
    margin-right: 5px;
}