/* 
   CSS PREMIUM HIDRO G - VERSÃO FINAL 
   Ajuste: Menus reduzidos para melhor encaixe no layout.
*/

/* 1. PALETA DE CORES E TEXTOS */
#google-fashion body {
    font-family: 'Open Sans', sans-serif !important;
    color: #333 !important;
    background-color: #fcfcfc !important;
}

#google-fashion .cor-principal, 
#google-fashion .preco-promocional {
    color: #007bb1 !important;
}

#google-fashion .titulo {
    font-family: 'Oswald', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: color 0.3s ease;
}

/* 2. HEADER E MENUS (REDUZIDOS) */
#google-fashion header {
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    border-bottom: 2px solid #0098da !important;
}

/* Redução estratégica do tamanho e espaçamento do menu */
#google-fashion .menu.superior .nivel-um > li > a {
    padding: 8px 10px !important; /* Espaçamento interno reduzido */
}

#google-fashion .menu.superior .nivel-um > li > a strong {
    font-size: 11px !important; /* Fonte reduzida para visual mais clean */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#google-fashion .menu.superior .nivel-um > li > a:hover strong {
    color: #0098da !important;
    transform: scale(1.03); /* Pulsação levemente menor para acompanhar a fonte */
    display: inline-block;
}

/* 3. ANIMAÇÕES NOS CARDS DE PRODUTOS */
#google-fashion .listagem .listagem-item {
    border: 1px solid #f0f0f0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

#google-fashion .listagem .listagem-item:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
    border-color: #0098da !important;
}

#google-fashion .listagem .listagem-item:hover .imagem-produto img {
    filter: brightness(0.95);
    transition: filter 0.3s ease;
}

/* 4. BOTÕES COM GRADIENTE E INTERATIVIDADE */
#google-fashion .botao.principal,
#google-fashion .botao-comprar {
    background: linear-gradient(135deg, #0098da 0%, #007bb1 100%) !important;
    color: #fff !important;
    border: none !important;
    text-shadow: none !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 10px rgba(0, 152, 218, 0.25) !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
}

#google-fashion .botao.principal:hover,
#google-fashion .botao-comprar:hover {
    background: linear-gradient(135deg, #00aceb 0%, #0098da 100%) !important;
    box-shadow: 0 6px 15px rgba(0, 152, 218, 0.4) !important;
    transform: translateY(-2px);
}

/* Botão de Favorito */
#google-fashion .adicionar-favorito {
    transition: all 0.3s ease !important;
    border: 1px solid #eee !important;
}

#google-fashion .adicionar-favorito:hover {
    background: #fff !important;
    color: #ff4757 !important;
    border-color: #ff4757 !important;
    transform: scale(1.1);
}

/* 5. INPUTS E CAMPOS DE BUSCA */
#google-fashion input[type="text"] {
    border-radius: 4px !important;
    border: 1px solid #ddd !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

#google-fashion input[type="text"]:focus {
    border-color: #0098da !important;
    box-shadow: 0 0 5px rgba(0, 152, 218, 0.2) !important;
    outline: none !important;
}

/* 6. RODAPÉ ESTILIZADO */
#rodape .institucional {
    background-color: #1a1a1a !important;
    color: #ccc !important;
}

#rodape h5 {
    color: #0098da !important;
    margin-bottom: 15px !important;
    font-weight: 600 !important;
}

#rodape a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}