/*
Botões — sempre discretos por padrão (contorno ou link), nunca pílula sólida
grande dominando um card. Referência: Lula Avocado Oil, Deadstock Coffee.
*/

.btn--primario{
    background: var(--cor-mata);
    color: var(--cor-branco);
}
.btn--primario:hover{
    background: var(--cor-musgo);
    color: var(--cor-branco);
}

.btn--secundario{
    background: transparent;
    color: var(--cor-branco);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
}
.btn--secundario:hover{
    background: rgba(255, 255, 255, 0.15);
    color: var(--cor-branco);
}

.btn--contorno{
    background: transparent;
    color: var(--cor-mata);
    border: 1.5px solid var(--cor-mata);
}
.btn--contorno:hover{
    background: var(--cor-mata);
    color: var(--cor-branco);
}

/* Normaliza TODO botão que o WooCommerce gera sozinho (add-to-cart do produto
   único, atualizar carrinho, aplicar cupom, finalizar pedido) pro padrão
   visual do site. O !important aqui é necessário: o CSS padrão do PRÓPRIO
   PLUGIN (woocommerce.css, sempre carregado, fora do controle do tema) já
   define esses mesmos seletores com uma cor roxa/mauve própria — sem isso,
   o botão "Adicionar" sai na cor padrão do plugin, não na cor da marca. Além
   disso o elemento é um <button> com appearance:auto (chrome nativo do SO),
   que também precisa ser desligado pra o background customizado aparecer. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: var(--texto-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: var(--espaco-sm) var(--espaco-lg);
    /* Achado real (auditoria de responsividade, 01/08/2026): o botao
       "ADICIONAR"/"COMPRAR" media 32-40px de altura real (o padding
       vertical do token nao alcancava 44px com esse tamanho de fonte),
       abaixo do minimo de toque recomendado, no CTA principal da pagina
       de produto. min-height garante o toque sem mudar o texto/padding
       visual, display:inline-flex centraliza o texto dentro da altura
       maior. */
    min-height: 44px;
    border-radius: var(--raio-pill) !important;
    transition: all 0.25s ease;
    background: var(--cor-mata) !important;
    color: var(--cor-branco) !important;
    border: 1.5px solid var(--cor-mata) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.single_add_to_cart_button:hover{
    background: var(--cor-musgo) !important;
    border-color: var(--cor-musgo) !important;
    color: var(--cor-branco) !important;
}
/* Redesign minimalista/futurista (07/08/2026): leve elevacao no CTA
   principal do produto unico no hover, mesmo vocabulario de sombra do resto
   do site — nao muda a troca de token de cor (regra do DESIGN.md), so
   acrescenta profundidade. Escopado so ao CTA de produto unico, nao aos
   botoes menores do carrinho/cupom, pra nao alterar paginas fora deste
   piloto. */
.single_add_to_cart_button:hover{
    box-shadow: var(--sombra-md);
    transform: translateY(-2px);
}

.btn--link{
    background: transparent;
    color: var(--cor-mata);
    border: none;
    border-bottom: 1.5px solid var(--cor-mata);
    border-radius: 0;
    padding: 0 0 2px 0;
    text-transform: none;
    letter-spacing: normal;
}
.btn--link:hover{
    color: var(--cor-terracota);
    border-color: var(--cor-terracota);
}