/*
CTC Separate Stylesheet
Updated: 2026-05-22 11:11:12
*/


/* --- Cores Primárias do Site (Garanta que estejam definidas) --- */
:root {
    --primary-color: #54B435; /* Verde principal */
    --primary-color-dark: #42952A; /* Verde mais escuro para hover/bordas */
    --text-color-light: #ffffff; /* Texto claro (branco) */
    --border-color-light: #e3e3e3; /* Borda cinza clara para inputs */
}


/* Estilos para os Cards de Produto no WooCommerce (Tema Astra Free) */

/* Container individual de cada produto */
.woocommerce ul.products li.product {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease-in-out;
    margin-bottom: 25px !important;
    background-color: #ffffff;
    position: relative; /* Manter relative para o botão absolute funcionar */
    display: flex;
    flex-direction: column;
    height: 95%;
    overflow: hidden; /* Garante que nada saia dos limites do card */
}

/* Efeito ao passar o mouse */
.woocommerce ul.products li.product:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    transform: translateY(-3px);
}

/* REMOVER o margin-bottom da imagem que o WooCommerce aplica */
/* Seletor mais específico para a imagem dentro do link */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
    margin-bottom: 0px !important; /* FORÇA a remover o margin-bottom */
}

/* Wrapper da imagem */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
    margin-bottom: 0px !important;
    border-bottom: none !important;
    padding: 0px !important;
}

/* Imagem do Produto */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid #e0e0e0; /* Borda direto na imagem */
}

/* Wrapper do conteúdo */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* Ajuste o padding inferior para dar espaço ao botão "Adicionar" */
    padding: 15px 15px 60px 15px !important; /* Aumentei o padding inferior para 60px e adicionei laterais */
}

/* Título do Produto */
.woocommerce ul.products li.product .astra-shop-summary-wrap .woocommerce-loop-product__title {
    font-size: 1em;
    margin-bottom: 8px;
    font-weight: 600;
    color: #0F172A;
    /* Removi paddings aqui, pois já estão no summary-wrap */
    margin-top: 0;
}

/* Preço do Produto */
.woocommerce ul.products li.product .astra-shop-summary-wrap .price {
    font-size: 1.2em;
    color: #0F172A;
    font-weight: 700;
    margin-top: auto;
    display: block;
    text-align: right;
    /* Removi paddings aqui, pois já estão no summary-wrap */
    margin-bottom: 5px;
}

/* Botão "Adicionar ao Carrinho" */
.woocommerce ul.products li.product .button.product_type_simple {
    position: absolute !important;
    bottom: 0px !important;
    left: 0px !important;
    right: 0px !important;
    width: 100% !important;
    background-color: #54B435 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 15px !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border-radius: 0 0 12px 12px !important;
    margin: 0px !important;
    z-index: 10;
}

.woocommerce ul.products li.product .button.product_type_simple:hover {
    background-color: #3f8728 !important;
    color: #ffffff !important;
}

/* Remover margens dos seletores problemáticos que mencionou */
.woocommerce-js ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  margin-bottom: 0px !important;
}

.woocommerce-js ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
/* ============================ variaçoes ============= */

/* This targets the "Add to Cart" button that appears after selecting variations */
.product_type_variable.add_to_cart_button.cfvsw_ajax_add_to_cart {
       position: absolute !important;
    bottom: 0px !important;
    left: 0px !important;
    right: 0px !important;
    width: 100% !important;
    background-color: #54B435 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 15px !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border-radius: 0 0 12px 12px !important;
    margin: 0px !important;
    z-index: 10;
}


/* --- Estilo para as caixinhas de variação (não selecionadas) --- */
.cfvsw-swatches-option {
    border: 1px solid #e3e3e3; 
    padding: 8px 12px; 
    border-radius: 15px; 
    cursor: pointer;
    background-color: #fff; 
    color: #0F172A; 
    font-size: 14px; 
    margin-right: 5px; 
    margin-bottom: 5px; 
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}

/* Estilo para a div que contém o input de quantidade e botões +/- */
.woocommerce .quantity.buttons_added,
.woocommerce-cart .quantity.buttons_added,
.woocommerce .cart_item .quantity.buttons_added,
.woocommerce .product-quantity .quantity.buttons_added,
.woocommerce-mini-cart-item .quantity.buttons_added {
    border-radius: 5px !important; /* Mantém o border-radius para a div inteira */
    border: 1px solid #54B435 !important; /* Uma borda sutil ou mais escura */
	  padding-right: 0px !important;
	margin-right: 10px !important;
}

/* Se o input de quantidade for envolvido por botões +/- (comum em temas) */
/* Isso garante que a borda do input não seja afetada pelo wrapper */
.woocommerce .quantity.buttons_added .input-text.qty,
.woocommerce-cart .quantity.buttons_added .input-text.qty {
    /* seus estilos para o input aqui */
	border-top: 0px !important;
	border-bottom: 0px !important;
	border-color: #54B435;
}

.woocommerce-js .quantity .plus {
  margin-right: 0px;
  border: 0px;
}

.woocommerce-js .quantity .minus {
  margin-left: 0px;
  border: 0px;
}

/* search box ======================================= */

/* --- Estilo para o campo de busca (search input) --- */
/* Isso deve afetar o campo de busca no header, no filtro e possivelmente em widgets */
.widget_search input[type="search"],
.woocommerce-product-search input[type="search"],
.site-header .ast-search-menu-icon .search-field, /* Para o campo de busca do header */
.ast-search-box.header-search-form .search-field { /* Se houver outra classe para o search box no header */
    border-radius: 5px !important; /* Cantos arredondados */
    border: 1px solid #cccccc !important; /* Adiciona uma borda sutil, se não tiver */
    padding: 8px 15px !important; /* Ajusta o padding para um bom visual */
    height: auto !important; /* Garante que a altura se ajuste */
	margin-left: 10px !important;
}




/* --- ESTILO PARA O WRAPPER EXTERNO DO BLOCO DE BUSCA (A BORDA PONTILHADA) --- */
.wp-block-search__inside-wrapper {
    /* Define a borda sólida para o wrapper completo, se houver um dotted padrão */
    /* Se a borda pontilhada vier de um elemento pai, isso pode precisar de ajuste */
    border: 1px solid var(--border-color-light) !important; /* Borda sólida cinza clara */
    border-radius: 5px !important; /* Arredonda o wrapper inteiro */
    
    /* Remove a borda dotted se estiver sendo aplicada diretamente aqui */
    border-style: solid !important; 

    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    overflow: hidden; /* Garante que os filhos respeitem o border-radius */
}

/* --- Estilo para o campo de busca (input) do Bloco de Busca (Sidebar) --- */
.wp-block-search__inside-wrapper .wp-block-search__input {
    /* Removendo a borda individual do input, pois o wrapper já terá uma */
    border: none !important; 
    border-radius: 0 !important; /* Remove qualquer arredondamento interno */
    padding: 8px 15px !important; 
    background-color: #ffffff !important; 
    color: #333333 !important; 
    box-shadow: none !important; 
    flex-grow: 1 !important;
}

/* --- REMOVER BORDA/OUTLINE NO FOCO PARA O INPUT DE BUSCA --- */
.wp-block-search__inside-wrapper .wp-block-search__input:focus {
    outline: none !important; /* Remove o outline padrão do navegador */
    border: none !important; /* Garante que nenhuma borda seja aplicada no foco */
    box-shadow: none !important; /* Remove qualquer sombra no foco */
}

/* --- Estilo para o botão de busca do Bloco de Busca (Sidebar) --- */
.wp-block-search__inside-wrapper .wp-block-search__button {
    background-color: var(--primary-color) !important; 
    color: var(--text-color-light) !important; 
    border: none !important; 
    border-radius: 0 5px 5px 0 !important; /* Arredonda apenas os cantos direitos */
    padding: 8px 15px !important; 
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    height: auto !important; 
    display: flex !important; 
    align-items: center !important;
    justify-content: center !important;
    margin-left: -1px !important; /* Sobrepõe a borda do input se houver */
}

/* Efeito hover para o botão de busca */
.wp-block-search__inside-wrapper .wp-block-search__button:hover {
    background-color: var(--primary-color-dark) !important; 
}

/* Estilo para o ícone SVG dentro do botão */
.wp-block-search__inside-wrapper .wp-block-search__button svg.search-icon {
    fill: var(--text-color-light) !important; 
    width: 20px !important; 
    height: 20px !important;
}

/* --- OUTROS ESTILOS DE BUSCA GERAIS (Mantenha se aplicáveis) --- */
/* Isso deve afetar o campo de busca no header, no filtro e possivelmente em widgets */
.widget_search input[type="search"],
.woocommerce-product-search input[type="search"],
.site-header .ast-search-menu-icon .search-field,
.ast-search-box.header-search-form .search-field {
    border-radius: 5px !important; 
    border: 1px solid var(--border-color-light) !important; 
    padding: 8px 15px !important; 
    height: auto !important; 
    background-color: #ffffff !important; /* Garante fundo branco */
    color: #333333 !important; /* Cor do texto */
}

/* Remover outline/borda no foco para outros campos de busca */
.widget_search input[type="search"]:focus,
.woocommerce-product-search input[type="search"]:focus,
.site-header .ast-search-menu-icon .search-field:focus,
.ast-search-box.header-search-form .search-field:focus {
    outline: none !important;
    border-color: var(--primary-color) !important; /* Opcional: borda primária no foco */
    box-shadow: none !important;
}

/* Estilo para o botão de submit do search (lupa ou "Pesquisar") */
.widget_search input[type="submit"],
.woocommerce-product-search button[type="submit"],
.site-header .ast-search-menu-icon .search-submit,
.ast-search-box.header-search-form .search-submit {
    border-radius: 5px !important; 
    background-color: var(--primary-color) !important; 
    color: var(--text-color-light) !important;
    border: none !important;
    padding: 8px 15px !important;
    cursor: pointer !important;
}


/* --- Forçar o Search Box do Header a estar sempre aberto --- */
/* (Mantenha esta seção se ainda estiver usando a funcionalidade "sempre aberto" no header) */
.site-header .ast-search-menu-icon .ast-search-icon {
    display: none !important;
}
.site-header .ast-search-menu-icon.ast-inline-search .search-field-container,
.site-header .ast-search-menu-icon.ast-inline-search .search-form {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    width: auto !important;
    padding: 0 10px !important;
    margin: 0 !important;
}
.site-header .ast-search-menu-icon.ast-inline-search .search-field {
    width: 180px !important;
    max-width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.site-header .ast-search-menu-icon {
    margin-right: 0 !important;
}