/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/


/* ========================================= */
/* --- SEÇÃO 1: Cores de Fundo e Layout --- */
/* ========================================= */

/* Define o fundo de todo o corpo da página para preto */
body {
    background-color: #000000 !important;
}

/* .ast-builder-menu .main-navigation {
  padding: 0px 40px !important; Ajusta o padding do menu principal 
}

.ast-builder-grid-row > .site-header-section {
  flex-wrap: nowrap;
  padding: 0px 40px !important;  Ajusta o padding do cabeçalho principal 
}*/
.ast-builder-grid-row > .site-header-section {
  flex-wrap: nowrap;
  padding: 0px 40px !important; /* Ajusta o padding do cabeçalho principal */
}

/* Garante que o cabeçalho tenha fundo preto em todo o site */
.site-header,
.ast-primary-header-bar,
.ast-header-break-point .site-header,
.ast-builder-grid-row > .site-header-section,
.ast-builder-grid-row {
    background-color: #000000 !important;
    background-image: none !important; /* Garante que não haja imagens de fundo */
}

/* Garante que o container principal tenha fundo transparente para não esconder o fundo preto do body */
.ast-container {
    background-color: transparent !important;
}

/* Corrige visibilidade do logo */
.ast-site-identity img {
    display: block !important;
    max-width: 140px !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important; /* Garante que o logo não tenha filtros de cor indesejados */
    -webkit-filter: none !important;
}

/* Se o seu logo for um texto do site, como "Italian Pizza Pizzeria" */
.site-title a {
    color: #FFFFFF !important; /* Cor do texto do título do site (ajuste para branco se o fundo for preto) */
}

/* Remove padding lateral do cabeçalho no tema Astra para largura total */
.ast-header-break-point .ast-container,
.ast-main-header-wrap .ast-container,
.ast-header-bar .ast-container {
    padding-left: 0px !important;
    padding-right: 0px !important;
    max-width: 100% !important;
}

/* Ajusta o padding do conteúdo principal para que não fique colado nas laterais */
#primary, #content, .site-content {
    padding-left: 0px !important; /* Ajuste conforme a margem que você deseja */
    padding-right: 0px !important; /* Ajuste conforme a margem que você deseja */
    background-color: #FFFFFF !important; /* Fundo branco para o conteúdo principal */
}


/* ========================================= */
/* --- SEÇÃO 2: WooCommerce: Carrinho e Checkout --- */
/* ========================================= */

/* 1. Altera a cor de fundo do corpo para branco nas páginas de carrinho, checkout e minha conta */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account, /* Adicionado para página Minha Conta */
body.page-template-default.woocommerce-cart,
body.page-template-default.woocommerce-checkout,
body.woocommerce-page.woocommerce-cart,
body.woocommerce-page.woocommerce-checkout,
body.woocommerce-page.woocommerce-account {
    background-color: #ffffff !important; /* Branco puro */
}

/* 2. Centraliza o conteúdo principal nas páginas de carrinho, checkout e minha conta */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce, /* Adicionado para página Minha Conta */
.woocommerce-cart .entry-content .woocommerce,
.woocommerce-checkout .entry-content .woocommerce,
.woocommerce-account .entry-content .woocommerce,
.woocommerce-cart #content .woocommerce,
.woocommerce-checkout #content .woocommerce,
.woocommerce-account #content .woocommerce,
#primary .woocommerce-cart .woocommerce,
#primary .woocommerce-checkout .woocommerce,
#primary .woocommerce-account .woocommerce,
#main .woocommerce-cart .woocommerce,
#main .woocommerce-checkout .woocommerce,
#main .woocommerce-account .woocommerce {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    clear: both !important;
    padding: 20px 0 !important;
    box-sizing: border-box !important;
}

/* 3. Ajustes para elementos internos do carrinho para garantir alinhamento e largura total */
.woocommerce-cart .woocommerce table.shop_table,
.woocommerce-cart .woocommerce .cart-collaterals,
.woocommerce-cart .woocommerce .woocommerce-message,
.woocommerce-cart .woocommerce .woocommerce-error,
.woocommerce-cart .woocommerce .woocommerce-info {
    width: 100% !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* 4. Ajustes para elementos internos do checkout para garantir alinhamento e largura total */
.woocommerce-checkout .woocommerce form.woocommerce-checkout,
.woocommerce-checkout .woocommerce .col2-set,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review,
.woocommerce-checkout #payment {
    width: 100% !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Ajustes específicos para as colunas do checkout, se o tema usar flexbox ou floats para elas */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon,
.woocommerce-checkout .woocommerce-form-login {
    width: 100% !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
}

/* Força os blocos de "Detalhes de Faturamento", "Seu Pedido" etc. a serem 100% e centralizados */
.woocommerce-checkout .woocommerce-checkout-review-order-table,
.woocommerce-checkout #customer_details,
.woocommerce-checkout .woocommerce-checkout-payment {
    width: 100% !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Remove margens negativas ou propriedades que possam quebrar o layout centralizado */
.woocommerce-cart .site-content,
.woocommerce-checkout .site-content,
.woocommerce-account .site-content, /* Adicionado para Minha Conta */
.woocommerce-cart .content-area,
.woocommerce-checkout .content-area,
.woocommerce-account .content-area { /* Adicionado para Minha Conta */
    padding: 0 !important;
    margin: 0 !important;
}

/* Para temas que usam flexbox em seus wrappers de página */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main, /* Adicionado para Minha Conta */
.woocommerce-cart .site-inner,
.woocommerce-checkout .site-inner,
.woocommerce-account .site-inner { /* Adicionado para Minha Conta */
    display: block !important;
}

/* Limpa quaisquer flutuações que possam estar afetando o layout global */
.woocommerce-cart:before,
.woocommerce-cart:after,
.woocommerce-checkout:before,
.woocommerce-checkout:after,
.woocommerce-account:before, /* Adicionado para Minha Conta */
.woocommerce-account:after { /* Adicionado para Minha Conta */
    content: "";
    display: table;
    clear: both;
}


/* ========================================= */
/* --- SEÇÃO 3: Ajustes de Imagens de Produtos (4 Colunas) --- */
/* ========================================= */

/* Força 4 colunas para a lista de produtos (se usado com shortcode columns="4") */
.woocommerce ul.products.columns-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colunas de largura igual */
    gap: 20px; /* Espaçamento entre os produtos */
}

/* Garante que cada item de produto ocupe 1/4 da largura (para 4 colunas) */
.woocommerce ul.products li.product {
    width: auto !important; /* Reseta largura padrão se houver */
    margin-right: 0 !important; /* Reseta margem padrão se houver */
    float: none !important; /* Desativa float se estiver sendo usado pelo tema */
    box-sizing: border-box; /* Garante que padding e borda não aumentem o tamanho total */
}

/* Ajusta o tamanho da imagem dentro de cada item de produto */
.woocommerce ul.products li.product img.woocommerce-thumbnail,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
    width: 100% !important; /* Faz a imagem preencher a largura disponível da coluna */
    height: auto !important; /* Mantém a proporção da imagem */
    /* object-fit: cover; */ /* Para cortar e preencher o espaço se necessário */
}

/* Ajustes responsivos para telas menores (para 4 colunas) */
@media (max-width: 992px) { /* Para tablets grandes e laptops */
    .woocommerce ul.products.columns-4 {
        grid-template-columns: repeat(3, 1fr); /* 3 colunas em telas médias */
    }
}

@media (max-width: 768px) { /* Para tablets e celulares grandes */
    .woocommerce ul.products.columns-4 {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas em telas menores */
    }
}

@media (max-width: 480px) { /* Para celulares */
    .woocommerce ul.products.columns-4 {
        grid-template-columns: repeat(1, 1fr); /* 1 coluna em celulares */
    }
}


/* ========================================= */
/* --- SEÇÃO 4: Ícones do Menu (Somente Ícones e Link Ativo) --- */
/* ========================================= */

/* Estilo para TODOS os links do menu principal para definir as cores padrão */
.main-navigation ul.main-header-menu li > a {
    color: #FF0000 !important; /* Cor padrão para todos os links do menu (vermelho sangue) */
    text-decoration: none !important; /* Remove sublinhado padrão */
    transition: color 0.3s ease; /* Transição suave para o hover */
}

/* Efeito HOVER para TODOS os links do menu principal */
.main-navigation ul.main-header-menu li > a:hover {
    color: #FFFFFF !important; /* Cor ao passar o mouse (branco) */
}

/* Cor para links visitados (vermelho sangue) */
.main-navigation ul.main-header-menu li > a:visited {
    color: #FF0000 !important; /* Cor do link visitado (vermelho sangue) */
}

/* Estilo para os LINKS ESPECÍFICOS dos ícones (Minha Conta e Carrinho)
   Estes links precisam ter uma área clicável definida, mesmo com o texto oculto. */
.main-navigation ul.main-header-menu li.menu-icon-minha-conta > a.menu-link,
.main-navigation ul.main-header-menu li.menu-icon-cart > a.menu-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important; /* Ajuste o padding conforme necessário */
    min-width: 40px !important; /* Largura mínima para a área clicável */
    min-height: 40px !important; /* Altura mínima para a área clicável */
    box-sizing: border-box !important;
    position: relative !important; /* Permite posicionar o pseudo-elemento do LI em relação a ele */
    z-index: 1; /* Garante que o link esteja acima de outros elementos se houver sobreposição */

    /* OCULTAR O TEXTO DESSES LINKS ESPECÍFICOS */
    font-size: 0 !important; /* NOVO: Tenta encolher o texto */
    line-height: 0 !important; /* NOVO: Remove altura da linha do texto */
    color: transparent !important; /* NOVO: Torna o texto invisível */
}

/* Estilo e posicionamento do ÍCONE Font Awesome (que é um ::before do LI) */
.main-navigation ul.main-header-menu li.menu-item.menu-icon-minha-conta::before,
.main-navigation ul.main-header-menu li.menu-item.menu-icon-cart::before {
    text-indent: 0 !important; /* Traz o ícone de volta para a tela */
    position: absolute !important; /* Posição absoluta em relação ao LI pai */
    top: 50% !important; /* Centraliza verticalmente */
    left: 50% !important; /* Centraliza horizontalmente */
    transform: translate(-50%, -50%) !important; /* Ajuste fino de centralização */

    color: #FFFFFF !important; /* Cor inicial do ícone (exemplo: dourado, **AJUSTE ESSA COR DO ÍCONE**) */
    font-size: 20px !important; /* Tamanho do ícone */
    transition: color 0.3s ease; /* Transição suave para o hover */
    z-index: 2; /* Garante que o ícone esteja acima do link, se necessário */
    pointer-events: none; /* CRUCIAL: permite que os cliques passem através do ícone para o link abaixo */
}

/* Efeito HOVER para o ÍCONE (passando o mouse sobre o LINK <a> ou o LI) */
/* Se o mouse passar sobre o link <a>, altere a cor do ::before do LI pai */
.main-navigation ul.main-header-menu li.menu-item.menu-icon-minha-conta > a.menu-link:hover + .fas::before,
.main-navigation ul.main-header-menu li.menu-item.menu-icon-cart > a.menu-link:hover + .fas::before {
    /* Este seletor pode ser mais complicado devido à complexidade do DOM.
       Ele tenta selecionar um irmão adjacente que tenha a classe .fas (que está no LI)
       e então seu ::before. */
    color: #FF0000 !important; /* Cor do ícone ao passar o mouse (branco) */
}

/* ALTERNATIVA para o HOVER do ÍCONE: Se a regra acima não funcionar, esta é a mais confiável.
   Quando o mouse passar sobre o LI, altere a cor do seu ::before. */
.main-navigation ul.main-header-menu li.menu-item.menu-icon-minha-conta:hover::before,
.main-navigation ul.main-header-menu li.menu-item.menu-icon-cart:hover::before {
    color: #FFFFFF !important; /* Cor do ícone ao passar o mouse (branco) */
}


/* Ajustes adicionais para o LI pai, para garantir que o position: relative funcione para o ícone */
.main-navigation ul.main-header-menu li.menu-item.menu-icon-minha-conta,
.main-navigation ul.main-header-menu li.menu-item.menu-icon-cart {
    position: relative !important; /* Permite posicionar o ::before absoluto em relação ao LI */
    padding: 0 !important; /* Remove padding extra do LI que pode mover o ícone */
}

/* Garante que o container do menu não tenha regras que atrapalhem */
.main-navigation ul.main-header-menu {
    display: flex; /* Garante que os LIs fiquem lado a lado */
    align-items: center;
    list-style: none; /* Remove bolinhas da lista */
    margin: 0;
    padding: 0;
}

/* Oculta o ícone padrão do Astra (se houver um elemento <i class="ast-icon">) */
.main-navigation ul.main-header-menu li .ast-icon {
    display: none !important;
}

/* Remove margens extras de ícones Font Awesome genéricos que podem não ter texto visível */
.main-navigation .menu-item .fas,
.main-navigation .menu-item .far,
.main-navigation .menu-item .fab {
    margin-right: 0 !important;
}

/* NOVO: Ajuste para o item do menu de checkout/carrinho do Astra que tem um contador */
/* Isso é para garantir que o R$0.00 não seja afetado pelas regras de ocultação de texto */
.ast-site-header-cart .ast-cart-menu-wrap {
    color: #FF0000 !important; /* Cor do texto do carrinho */
}
.ast-site-header-cart .ast-cart-menu-wrap .ast-icon {
    color: #FFD700 !important; /* Cor do ícone do carrinho */
    font-size: 20px !important;
}
.ast-site-header-cart .ast-cart-menu-wrap:hover .ast-icon {
    color: #FFFFFF !important; /* Cor do ícone do carrinho no hover */
}
.ast-site-header-cart .ast-cart-menu-wrap .ast-cart-count {
    color: #FF0000 !important; /* Cor do número do contador */
}
.ast-site-header-cart .ast-cart-menu-wrap:hover .ast-cart-count {
    color: #FFFFFF !important; /* Cor do número do contador no hover */
}