/* VB Marketplace — paleta extraída de convitespro.com.br, aprovada no brainstorm de 2026-09-07 */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root {
    --vb-primary: #651628;   /* vinho — header, navegação */
    --vb-secondary: #7D4E49; /* terracota */
    --vb-accent: #FFD19C;    /* pêssego — destaque/hover */
    --vb-success: #4caf50;   /* verde — CTA de finalizar compra */
    --vb-bg: #fafafa;
}

body.woocommerce, body.woocommerce-page, body.woocommerce-shop {
    font-family: 'Raleway', sans-serif;
}

.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-cart h1, .woocommerce-checkout h1,
.wp-block-post-title, .wc-block-cart__title, .wc-block-checkout__title {
    font-family: 'Playfair Display', serif;
}

/* Preço — catálogo clássico e blocos modernos do WooCommerce (tema de blocos) */
.woocommerce ul.products li.product .price,
.wc-block-components-product-price,
.wc-block-components-formatted-money-amount,
.woocommerce-Price-amount {
    color: var(--vb-primary);
    font-weight: 700;
}

/* Botões padrão — catálogo clássico */
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
    background-color: var(--vb-primary);
    color: #fff;
    border-radius: 6px;
}

.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover {
    background-color: var(--vb-secondary);
}

.woocommerce ul.product-category a,
.woocommerce .widget_product_categories a {
    color: var(--vb-secondary);
}

/* Botões — blocos modernos do WooCommerce (Mini Cart, Cart, Checkout) */
.wc-block-components-button.wp-element-button,
.wp-block-woocommerce-mini-cart-shopping-button-block .wc-block-components-button {
    background-color: var(--vb-primary) !important;
    color: #fff !important;
    border-radius: 6px !important;
    border-color: var(--vb-primary) !important;
}

/* Botão "Adicionar ao carrinho" do catálogo — vinho por padrão */
.wc-block-components-product-button__button {
    background-color: var(--vb-primary) !important;
    color: #fff !important;
    border-radius: 6px !important;
    border-color: var(--vb-primary) !important;
}

/* Vira verde depois que o produto já foi adicionado ao carrinho. Não
   existe uma classe "adicionado" pronta nesse bloco — o sinal real é
   o link "Ver carrinho" (.added_to_cart), que fica escondido até o
   clique e visível depois (o atributo "hidden" é controlado via
   Interactivity API, então :not([hidden]) reflete o estado real). */
.wc-block-components-product-button:has(> span:not([hidden]) > .added_to_cart) .wc-block-components-product-button__button {
    background-color: var(--vb-success) !important;
    border-color: var(--vb-success) !important;
}

.wc-block-components-button.wp-element-button:hover {
    background-color: var(--vb-secondary) !important;
    border-color: var(--vb-secondary) !important;
}

/* Botão de finalizar compra — verde, aprovado no brainstorm */
.woocommerce a.checkout-button,
.woocommerce #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-mini-cart-checkout-button-block .wc-block-components-button {
    background-color: var(--vb-success) !important;
    border-color: var(--vb-success) !important;
    color: #fff !important;
}

.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
    background-color: #43a047 !important;
    border-color: #43a047 !important;
}

/* Cabeçalho do site (logo, menu, ícones) — vinho, igual à referência de marca */
header.wp-block-template-part {
    background-color: var(--vb-primary);
}

header.wp-block-template-part .wp-block-site-title a,
header.wp-block-template-part .wp-block-navigation a,
header.wp-block-template-part .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation__responsive-container-open,
header.wp-block-template-part svg {
    color: #fff !important;
    fill: #fff !important;
}

header.wp-block-template-part .wp-block-site-title a:hover,
header.wp-block-template-part .wp-block-navigation a:hover {
    color: var(--vb-accent) !important;
}

/* Espaço reservado pra logo (ainda sem imagem enviada). O bloco
   site-logo não renderiza nenhum elemento no HTML enquanto não há
   logo definida — por isso o tamanho fica no wrapper (.vb-logo-slot),
   que sempre existe, e não no bloco em si. */
header.wp-block-template-part .vb-logo-slot {
    display: flex;
    align-items: center;
    min-width: 140px;
    min-height: 48px;
}

header.wp-block-template-part .wp-block-site-logo img {
    max-height: 48px;
    width: auto;
}

/* Alinhamento dos cards do catálogo — botão sempre no rodapé do card,
   independente do título ter 1 ou 4 linhas */
.wc-block-product-template > li.wc-block-product {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-button {
    margin-top: auto;
    padding-top: 0.75rem;
}

/* Contador de itens do carrinho — pêssego sobre o vinho do cabeçalho */
.wc-block-mini-cart__badge,
.wc-block-mini-cart__quantity-badge {
    background-color: var(--vb-accent) !important;
    color: var(--vb-primary) !important;
}

/* Dropdown de ordenação — não pode estourar a largura no mobile.
   O grupo pai (resultado da busca + ordenação) tem "is-nowrap" do
   tema, então o <select> precisa de min-width:0 pra conseguir
   encolher de verdade dentro do flex, senão max-width sozinho é
   ignorado (o item flex usa a largura intrínseca do conteúdo). */
.wc-block-product-results-count,
.wc-block-catalog-sorting {
    min-width: 0;
    flex-shrink: 1;
}

.wc-block-catalog-sorting {
    max-width: 45%;
    box-sizing: border-box;
}

.wc-block-catalog-sorting select {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .wc-block-catalog-sorting select {
        font-size: 0.8rem;
        padding: 0.4rem 1.5rem 0.4rem 0.5rem;
    }
}

/* Trava qualquer estouro horizontal residual (o seletor de ordenação
   forçava scroll lateral no mobile) */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Botão do carrinho no cabeçalho — sem fundo próprio, ícone branco
   igual aos outros ícones do menu. ".quantity-badge" é o quadrado que
   envolve o ÍCONE (não o número); ".badge" (singular) é a bolinha do
   número, que fica pêssego de propósito. */
.wc-block-mini-cart__button {
    background: transparent !important;
    box-shadow: none !important;
}

.wc-block-mini-cart__quantity-badge {
    background: transparent !important;
}

/* Painel do menu mobile (overlay) — o tema força fundo branco com
   !important; como o texto/ícone do cabeçalho já é branco, sem isso
   o menu abre mas fica invisível (texto branco em fundo branco) */
header.wp-block-template-part .wp-block-navigation__responsive-container {
    background-color: var(--vb-primary) !important;
}

/* Submenu "Loja" (categorias) — mesmo problema do overlay mobile: o
   tema força fundo branco/contorno preto, e como o texto já é branco
   fica invisível. Corrige tanto no dropdown desktop quanto na lista
   expandida dentro do menu mobile. */
header.wp-block-template-part .wp-block-navigation__submenu-container {
    background-color: var(--vb-primary) !important;
    border: none !important;
    box-shadow: none !important;
}

header.wp-block-template-part .wp-block-navigation__submenu-container a {
    color: #fff !important;
}

header.wp-block-template-part .wp-block-navigation__submenu-container a:hover {
    color: var(--vb-accent) !important;
}

/* Contorno preto ao clicar num item do menu mobile — é o foco padrão
   do navegador (Safari/iOS) em QUALQUER elemento focável dentro do
   menu, incluindo o <ul> do submenu (recebe foco via JS), não só
   links/botões */
header.wp-block-template-part a:focus,
header.wp-block-template-part button:focus,
header.wp-block-template-part li:focus,
header.wp-block-template-part ul:focus,
header.wp-block-template-part [tabindex]:focus,
header.wp-block-template-part .wp-block-navigation-item__content:focus,
header.wp-block-template-part .wp-block-navigation__submenu-container:focus,
header.wp-block-template-part .wp-block-navigation-submenu:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Reforça: o core do WP já remove a borda do submenu quando o menu
   mobile está aberto, mas caso alguma variação de estado ainda
   aplique a borda padrão (1px solid rgba(0,0,0,.15)), garante que
   fique sempre sem borda dentro do nosso cabeçalho */
header.wp-block-template-part .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
    border: none !important;
}

/* Rodapé do site — mesmo vinho do cabeçalho */
footer.wp-block-template-part {
    background-color: var(--vb-primary);
}

footer.wp-block-template-part,
footer.wp-block-template-part a,
footer.wp-block-template-part .wp-block-site-title a,
footer.wp-block-template-part .wp-block-site-tagline,
footer.wp-block-template-part svg {
    color: #fff !important;
    fill: #fff !important;
}

footer.wp-block-template-part a:hover {
    color: var(--vb-accent) !important;
}

/* Remove a linha "Nome do tema / Criado com WordPress" gerada pelo
   tema — é o grupo logo depois do último espaçador do rodapé (só
   existe nas versões antigas do rodapé; sem efeito na estrutura nova) */
footer.wp-block-template-part .wp-block-spacer + .wp-block-group {
    display: none;
}

/* Ícones de rede social do rodapé — hover em pêssego */
footer.wp-block-template-part .wp-block-social-link a:hover svg {
    fill: var(--vb-accent) !important;
}