/* ============================================================
   CINDERELA INFANTIL — CSS AVANÇADO (MASTER — tudo consolidado)
   Substitua TODO o conteúdo do editor por este arquivo.
   ============================================================ */

/* ------------------------------------------------------------
   PALETA:
   Azul marinho (marca):   #1E3A5F
   Verde-água (destaque):  #2CA89B
   Laranja (CTA/hover):    #F7941D
   ------------------------------------------------------------ */

/* ================= BARRA SUPERIOR (institucional) ================= */
.topo-barra, .header-top, .topbar {
    background-color: #1E3A5F !important;
}

.topo-barra a, .header-top a, .topbar a {
    color: #ffffff !important;
}

.topo-barra .instagram,
.header-top .instagram,
.topo-barra a[href*="instagram"],
.header-top a[href*="instagram"] {
    background-color: #F7941D !important;
    border-radius: 6px;
}

/* ================= CABEÇALHO ================= */
#topo {
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

/* ================= CAMPO DE BUSCA ================= */
.busca input,
.form-busca input,
input[name="q"],
input[type="search"] {
    border-radius: 24px !important;
    border: 2px solid #F7941D !important;
    padding-left: 16px !important;
}

.busca button,
.form-busca button,
.botao-busca {
    background-color: #F7941D !important;
    border: none !important;
    border-radius: 0 24px 24px 0 !important;
}

.carrinho, .mini-carrinho, .cart-box {
    border-radius: 8px !important;
    overflow: hidden;
}

/* ================= MENU DE CATEGORIAS — BARRA SUPERIOR ================= */
.menu.superior {
    background-color: #2CA89B !important;
    border-radius: 30px !important;
    padding: 4px 12px !important;
    text-align: center;
}

.menu.superior .nivel-um {
    text-align: center;
}

.menu.superior .nivel-um > li {
    float: none;
    display: inline-block;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 2px !important;
}

.menu.superior .nivel-um > li,
.menu.superior .nivel-um > li:hover,
.menu.superior .nivel-um > li.ativo {
    background-color: transparent !important;
    border-color: transparent !important;
}

.menu.superior .nivel-um > li > a {
    background: transparent !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 10px 16px !important;
    transition: all 0.2s ease;
    text-shadow: none !important;
}

/* Força texto branco em tudo dentro do menu superior, incluindo
   qualquer span/ícone interno que esconda a cor por baixo */
.menu.superior,
.menu.superior a,
.menu.superior a *,
.menu.superior li,
.menu.superior li * {
    color: #ffffff !important;
}

.menu.superior .nivel-um > li > a:hover,
.menu.superior .nivel-um > li > a:hover * {
    color: #ffffff !important;
    background-color: rgba(255,255,255,0.18) !important;
}

.menu.superior .nivel-um > li svg,
.menu.superior .nivel-um > li img {
    filter: brightness(0) invert(1) !important;
}

/* Submenu dropdown (nivel-dois/nivel-tres) — o tema deixa com
   fundo BRANCO por padrão, então aqui a gente força o texto pra
   AZUL ESCURO (não branco), senão fica invisível */
.menu.superior .nivel-dois,
.menu.superior .nivel-tres {
    background-color: #ffffff !important;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(30, 58, 95, 0.15);
    overflow: hidden;
}

.menu.superior .nivel-dois a,
.menu.superior .nivel-dois a *,
.menu.superior .nivel-tres a,
.menu.superior .nivel-tres a * {
    color: #1E3A5F !important;
    font-weight: 600 !important;
}

.menu.superior .nivel-dois a:hover,
.menu.superior .nivel-dois a:hover *,
.menu.superior .nivel-tres a:hover,
.menu.superior .nivel-tres a:hover * {
    background-color: #2CA89B !important;
    color: #ffffff !important;
}

/* ================= MENU LATERAL DE CATEGORIAS (.menu.lateral — confirmado via inspecionar) ================= */
.menu.lateral .nivel-um {
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(30, 58, 95, 0.10);
}

.menu.lateral .nivel-um > li > a {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 12px 20px !important;
    color: #1E3A5F !important;
    font-weight: 600 !important;
    display: block;
    transition: all 0.2s ease;
}

.menu.lateral .nivel-um > li {
    border-bottom: 1px solid #f0f0f0;
}

.menu.lateral .nivel-um > li:last-child {
    border-bottom: none;
}

.menu.lateral .nivel-um > li:first-child > a {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.menu.lateral .nivel-um > li:last-child > a {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.menu.lateral .nivel-um > li > a:hover {
    background-color: #2CA89B !important;
    color: #ffffff !important;
    padding-left: 26px !important;
}

/* ================= CARDS DE PRODUTO ================= */
.listagem-item .imagem-produto img {
    border-radius: 14px;
}

.listagem-linha .listagem-item .produto-sobrepor {
    border: none;
    box-shadow: none;
}

.listagem-linha .listagem-item .imagem-produto {
    overflow: hidden;
    border-radius: 14px;
    transition: all 0.3s ease;
}

.listagem-linha .listagem-item .imagem-produto img {
    transition: transform 0.3s ease;
}

.listagem-linha .listagem-item:hover .imagem-produto img {
    transform: scale(1.06);
}

.listagem-linha .listagem-item {
    border-radius: 14px;
    transition: all 0.3s ease;
}

.listagem-linha .listagem-item:hover {
    box-shadow: 0 10px 24px rgba(30, 58, 95, 0.12);
    transform: translateY(-5px);
}

.listagem-item .nome-produto {
    font-weight: 600;
    color: #1E3A5F;
}

.listagem-item .preco-a-vista,
.listagem-item .preco-por {
    color: #1E3A5F;
    font-weight: 700;
}

/* ================= BOTÕES — TODOS EM FORMATO PÍLULA ================= */
.botao.comprar,
.botao.botao-comprar {
    background-color: #1E3A5F;
    color: #ffffff;
    border: none;
    border-radius: 999px !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    padding: 12px 0;
    transition: all 0.3s ease;
}

.botao.comprar:hover,
.botao.botao-comprar:hover {
    background-color: #F7941D;
    color: #ffffff;
}

.botao,
button,
input[type="submit"],
input[type="button"] {
    border-radius: 999px !important;
}

.ordenacao select,
.select-ordenacao,
.dropdown-ordenacao {
    border-radius: 999px !important;
    padding: 8px 16px !important;
}

.indisponivel, .selo-indisponivel, .tag-status {
    border-radius: 999px !important;
}

.filtro-item, .botao-filtro, .filtro a {
    border-radius: 999px !important;
}

.paginacao a, .paginacao span, .pagination a, .pagination span {
    border-radius: 50% !important;
}

/* ================= BADGES DE DESCONTO/OFERTA ================= */
.desconto, .selo-desconto, .tag-desconto {
    background-color: #E63946 !important;
    color: #ffffff !important;
    border-radius: 999px;
    font-weight: 700;
}

/* ================= LARGURA DA PÁGINA (tira o espaço vazio lateral) =================
   Ataca TODOS os possíveis "envelopes" de largura de uma vez:
   html/body, wrappers comuns do tema, e o conteiner-principal. */
html, body {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

body.pagina-inicial,
body.pagina-inicial > div,
.wrapper, #wrapper,
.layout, #layout,
.envelope, #envelope,
.pagina, #pagina,
.container, #container {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.conteiner-principal {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Elementos internos que às vezes têm largura fixa em px própria,
   independente do pai (comum em temas mais antigos) */
#cabecalho, .secao-banners, #corpo, #rodape {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ================= RODAPÉ ================= */
#rodape, .rodape {
    background-color: #1E3A5F;
    color: #ffffff;
}

/* Links do rodapé (Categorias, Conteúdo etc.) — trocado de verde
   claro (ilegível no fundo azul) para branco forte e em negrito */
#rodape a, .rodape a {
    color: #ffffff !important;
    font-weight: 600 !important;
}

#rodape a:hover, .rodape a:hover {
    color: #F7941D !important;
    text-decoration: underline;
}

/* Bloco "Social" (ícone do Instagram) — tira o fundo branco
   destacado e deixa igual ao azul do resto do rodapé.
   Nomes de classe abaixo são estimativa; se não pegar, me manda
   Inspecionar Elemento nessa caixa branca que eu ajusto certinho. */
.rodape-social, .widget-social, .social, #social, aside.social {
    background-color: #1E3A5F !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}

.rodape-social h3, .widget-social h3, .social h3, #social h3,
.rodape-social .titulo, .widget-social .titulo {
    color: #ffffff !important;
}