/*
 * Ajustes de menu e botoes da loja (14/09/2026)
 *
 * Este arquivo e carregado DEPOIS do CSS adicional do personalizador (wp_head,
 * prioridade 110; o do personalizador sai na 101). Aquele CSS tem 566
 * !important em 537 regras, entao os !important daqui existem so para empatar a
 * forca: empatado, vence quem vem depois.
 *
 * O que muda, e por que:
 * - Botoes: um formato so. Canto de 8px, Lato 700, sem maiusculas forcadas. O
 *   cobre de fundo fica um tom mais escuro (#9a5b2a) porque texto branco sobre o
 *   #b87333 da 3,8:1 de contraste, abaixo dos 4,5:1 recomendados para texto
 *   desse tamanho; sobre o #9a5b2a da 5,4:1. O hover mantem o padrao que o site
 *   ja usava: fundo transparente, texto e borda cobre.
 * - Botao da capa: sai o laranja #ff6210 em pilula, entra o mesmo botao cobre.
 * - Menu: Lato 400 no lugar de Lora 700. A Lora so e carregada em 400, entao o
 *   700 era negrito falso desenhado pelo navegador. Sem maiusculas forcadas; o
 *   item atual e o hover ganham sublinhado cobre em vez de texto laranja.
 * - Icones sociais e total do carrinho no cabecalho: menores e na fonte do menu,
 *   para nao competirem com os itens.
 */

:root {
	--alef-cobre: #b87333;
	--alef-cobre-botao: #9a5b2a;
	--alef-raio: 8px;
}

/* ---------- Menu ---------- */

#ast-hf-menu-1 > .menu-item > .menu-link,
#ast-hf-menu-1-mobile > .menu-item > .menu-link {
	font-family: 'Lato', sans-serif !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0.01em !important;
}

#ast-hf-menu-1 > .menu-item > .menu-link {
	font-size: 15px !important;
	color: #ffffff !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

#ast-hf-menu-1 > .menu-item > .menu-link:hover,
#ast-hf-menu-1 > .menu-item.current-menu-item > .menu-link {
	color: #ffffff !important;
	text-decoration: underline !important;
	text-decoration-color: var(--alef-cobre) !important;
}

#ast-hf-menu-1-mobile > .menu-item > .menu-link {
	font-size: 17px !important;
}

#ast-hf-menu-1-mobile > .menu-item.current-menu-item > .menu-link {
	color: var(--alef-cobre) !important;
}

/* ---------- Icones sociais e carrinho do cabecalho ---------- */

.ast-header-social-1-wrap .ast-builder-social-element svg {
	width: 22px !important;
	height: 22px !important;
}

.ast-header-social-1-wrap .ast-builder-social-element {
	margin-left: 8px !important;
	margin-right: 8px !important;
}

.ast-header-woo-cart .ast-woo-header-cart-total,
.ast-header-woo-cart .ast-woo-header-cart-total .amount {
	font-family: 'Lato', sans-serif !important;
	font-weight: 400 !important;
	font-size: 15px !important;
}

@media (max-width: 544px) {
	.ast-header-social-1-wrap .ast-builder-social-element svg {
		width: 20px !important;
		height: 20px !important;
	}

	.ast-header-social-1-wrap .ast-builder-social-element {
		margin-left: 6px !important;
		margin-right: 6px !important;
	}
}

/* ---------- Botoes ---------- */

body .woocommerce .button,
body .woocommerce button[type="submit"],
body .woocommerce input[type="submit"],
body .woocommerce a.button,
body .woocommerce-page .button,
body .woocommerce-page button[type="submit"],
body .woocommerce ul.products li.product .button,
body .woocommerce ul.products li.product .add_to_cart_button,
body.single-product form.cart .button,
body.woocommerce-checkout #place_order,
body .cta-loja-btn,
body .wp-block-uagb-buttons .uagb-buttons-repeater {
	font-family: 'Lato', sans-serif !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	background: var(--alef-cobre-botao) !important;
	border: 2px solid var(--alef-cobre-botao) !important;
	border-radius: var(--alef-raio) !important;
	color: #ffffff !important;
}

body .wp-block-uagb-buttons .uagb-buttons-repeater .uagb-button__link {
	font-family: 'Lato', sans-serif !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: #ffffff !important;
}

body.single-product form.cart .button {
	padding: 14px 28px !important;
}

body.woocommerce-checkout #place_order {
	font-size: 17px !important;
	padding: 16px 28px !important;
}

@media (max-width: 544px) {
	body.single-product form.cart .button {
		padding: 13px 18px !important;
	}
}

body .woocommerce .button:hover,
body .woocommerce button[type="submit"]:hover,
body .woocommerce input[type="submit"]:hover,
body .woocommerce a.button:hover,
body .woocommerce-page .button:hover,
body .woocommerce-page button[type="submit"]:hover,
body .woocommerce ul.products li.product .button:hover,
body .woocommerce ul.products li.product .add_to_cart_button:hover,
body.single-product form.cart .button:hover,
body.woocommerce-checkout #place_order:hover,
body .cta-loja-btn:hover,
body .wp-block-uagb-buttons .uagb-buttons-repeater:hover {
	background: transparent !important;
	border-color: var(--alef-cobre) !important;
	color: var(--alef-cobre) !important;
}

body .wp-block-uagb-buttons .uagb-buttons-repeater:hover .uagb-button__link {
	color: var(--alef-cobre) !important;
}

/* ---------- Fonte da interface (PROPOSTA de 16/09/2026, so no staging ate o ok) ----------
 *
 * O corpo do site e Lora (serifa) por escolha do personalizador, e fica assim nos textos
 * corridos. Aqui so os elementos de INTERFACE passam para a Lato dos titulos, menu e botoes:
 * rotulos e links dos formularios da loja e o rodape. Texto longo continua em Lora.
 */
.woocommerce form label,
.woocommerce-page form label,
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-LostPassword,
.woocommerce-privacy-policy-text,
.custom-footer,
.custom-footer a,
.payment-note {
	font-family: 'Lato', sans-serif !important;
}

/* ---------- Organizacao no tablet e no computador (16/09/2026, revisao no staging) ----------
 *
 * Medido com print em 768 (tablet em pe), 1024 (deitado) e 1440. Cada bloco diz o que corrigiu.
 */

/* Paginacao da loja: vinha em vermelho, fora da paleta; passa para o cobre dos botoes.
 * A borda vermelha fica no <ul> e no <li> do WooCommerce, nao no link; os dois zeram. */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
	border: 0 !important;
	margin: 0 3px !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.ast-pagination .page-numbers {
	background: transparent !important;
	border: 1px solid var(--alef-cobre) !important;
	color: #ffffff !important;
	border-radius: var(--alef-raio) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.ast-pagination .page-numbers.current {
	background: var(--alef-cobre-botao) !important;
	border-color: var(--alef-cobre-botao) !important;
	color: #ffffff !important;
}

/* Resumo do pedido no checkout deitado: nome longo de produto quebrava em 5 linhas com
 * espacamento de tabela; linha mais junta ate 1024 px. */
@media (max-width: 1024px) {
	.woocommerce-checkout-review-order-table td.product-name {
		line-height: 1.5 !important;
	}
}

@media (max-width: 921px) {
	/* Faixa branca entre o conteudo e o rodape (carrinho, produto, conta, checkout): o #primary
	 * ganha 64px de margem inferior nesta largura e o fundo branco do body aparecia no vao. */
	body.woocommerce-cart #primary,
	body.woocommerce-checkout #primary,
	body.woocommerce-account #primary,
	body.single-product #primary {
		margin-bottom: 0 !important;
	}

	/* Produtos relacionados: 4 itens em 3 colunas deixavam um orfao; 2 x 2. */
	.single-product .related ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 768px) {
	/* Banner "Conheca a colecao" na home, tablet em pe E celular: os numeros (100%, 3000+,
	 * 99,9%) ficavam em posicao absoluta e invadiam o logo. Passam a fluir abaixo dele,
	 * centralizados; no celular quebram de linha se precisar. */
	.cta-loja-stats {
		position: static !important;
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
		gap: 12px 20px !important;
		margin-top: 12px;
	}
	.cta-loja-stat-label {
		white-space: nowrap;
	}
	.cta-loja-banner {
		padding-bottom: 32px !important;
	}

	/* Instagram: os tres cartoes "Ver Reels" empilhados viram uma linha de tres (cabem tres de
	 * 100 px ate em 360 px). */
	.instagram-mobile {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	/* Pagina do cobre, barra "cientificamente comprovado": a coluna centralizada deixava o
	 * paragrafo com a largura do texto (365 px) e ele passava da tela em 360 px. */
	.barra-cientifica-inner,
	.barra-texto,
	.barra-fonte {
		max-width: 100% !important;
		white-space: normal !important;
	}
}

@media (min-width: 600px) and (max-width: 768px) {
	/* Selos da loja (envio, pagamento, cobre, atendimento): 4 linhas viram 2 x 2 no tablet. */
	.trust-badges-inner {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 20px 32px;
	}
}

@media (max-width: 480px) {
	/* Seletor "Ordenacao" da loja: 315 px de largura fixa passava da tela em 360 px. */
	.woocommerce .woocommerce-ordering,
	.woocommerce-page .woocommerce-ordering {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.woocommerce .woocommerce-ordering select,
	.woocommerce-page .woocommerce-ordering select {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* Foco visivel de teclado nos mesmos elementos */
body .woocommerce .button:focus-visible,
body.woocommerce-checkout #place_order:focus-visible,
body .cta-loja-btn:focus-visible,
body .wp-block-uagb-buttons .uagb-buttons-repeater:focus-visible,
#ast-hf-menu-1 > .menu-item > .menu-link:focus-visible {
	outline: 2px solid var(--alef-cobre) !important;
	outline-offset: 3px !important;
}