/*
 * QA Store: o que a marca QA precisa e o Customizer não faz (tokens de
 * QA-CRM-admin, packages/ui/src/tokens.css).
 *
 * Cores, fontes e logo estão nas configurações (Personalizar > Cores e
 * Tipografia, Identidade do site); esta folha entra depois do GeneratePress e
 * antes do CSS adicional, então o Customizer continua mandando. Aqui ficam as
 * FORMAS da marca (botão em pílula, campo com canto de 12 px, cartões, selos,
 * avisos). Os plugins da QA (cursos, boleto, acesso restrito, economia do QA
 * Master, gravação de teclas) já saem com as cores da marca desde 10/10/2026.
 * Regras da marca: carmim-escuro é o único acento que leva texto; alerta é
 * âmbar, nunca carmim; sem degradê nem sombra colorida.
 */

@font-face {
	font-family: "Plus Jakarta Sans";
	src: url(fontes/plus-jakarta-sans-latin.woff2) format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

:root {
	--qa-branco: #FFFFFF;
	--qa-marfim: #F7F4EE;
	--qa-areia: #EFEAE2;
	--qa-linha: #E6E1D8;
	--qa-tinta: #16140F;
	--qa-cinza: #6B655C;
	--qa-carmim: #E4405F;
	--qa-carmim-escuro: #B5313F;
	--qa-carmim-profundo: #952834; /* hover do carmim-escuro, como no QA CRM */
	--qa-verde: #1E7F5C;
	--qa-verde-profundo: #165E44; /* o verde com 8 pontos a menos de luz, como o carmim-profundo do QA CRM: só o hover */
	--qa-ambar: #C2410C;
	--qa-borda-campo: #8A847A;
	--qa-raio-cartao: 20px;
	--qa-raio-campo: 12px;

	/* O WooCommerce não tem tela para estas: formulários, obrigatório e erro de campo (âmbar). */
	--wc-form-border-color: var(--qa-borda-campo);
	--wc-form-border-radius: var(--qa-raio-campo);
	--wc-primary: var(--qa-tinta);
	--wc-primary-text: var(--qa-branco);
	--wc-secondary: var(--qa-areia);
	--wc-secondary-text: var(--qa-tinta);
	--wc-highlight: var(--qa-tinta);
	--wc-highligh-text: var(--qa-branco);
	--wc-subtext: var(--qa-cinza);
	--wc-green: var(--qa-verde);
	--wc-red: var(--qa-ambar);
	--wc-orange: var(--qa-ambar);
	--wc-blue: var(--qa-tinta);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1 { letter-spacing: -0.02em; }
h2 { letter-spacing: -0.01em; }

:where(a, button, input, select, textarea, summary, .button):focus-visible {
	outline: 2px solid var(--qa-tinta);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ cabeçalho */

#site-navigation,
#mobile-header {
	border-bottom: 1px solid var(--qa-linha);
}

/* Submenu do Catálogo: cartão branco com linha fina. */
.main-navigation ul ul {
	border: 1px solid var(--qa-linha);
	border-radius: 16px;
	padding: 6px;
	box-shadow: 0 12px 32px rgba(22, 20, 15, 0.08);
}

.main-navigation .main-nav ul ul li a {
	border-radius: 10px;
}

/* "Minha conta" em pílula tinta, como no canvas; a altura da barra continua 58 px. */
#site-navigation .main-nav > ul > li > a[href$="/my-account/"] {
	background-color: var(--qa-tinta);
	color: var(--qa-branco);
	border-radius: 999px;
	line-height: 40px;
	margin: 9px 0 9px 8px;
	padding: 0 18px;
}

#site-navigation .main-nav > ul > li > a[href$="/my-account/"]:hover,
#site-navigation .main-nav > ul > li > a[href$="/my-account/"]:focus {
	background-color: var(--qa-carmim-escuro);
	color: var(--qa-branco);
}

/* Logo (Identidade do site): o tamanho está em inc/qa-marca.php, logo depois do CSS do
   GP Premium, para não aparecer grande e encolher ao carregar a página. */

/* Número do carrinho: o GP Premium fixa branco a 10%, feito para o cabeçalho escuro. */
.cart-contents > span.number-of-items {
	background-color: var(--qa-tinta);
	color: var(--qa-branco);
}

/* Do cabeçalho ao título da página: o espaço de separação do Customizer (40 px) também
   entra em cima e, somado ao respiro do conteúdo, dava 80 px. Só o de cima cai para 20;
   o espaço entre blocos e antes do rodapé continua do Customizer. */
.separate-containers .site-main {
	margin-top: 20px;
}

/* ------------------------------------------------------------ botões */
/* Cor e tipo vêm do Customizer; a forma é daqui. No genérico, sem especificidade,
   para não arredondar botão de plugin que já tem o seu (gravação, Mercado Pago). */

:where(button:not(.menu-toggle), input[type="button"], input[type="reset"], input[type="submit"], .button, .wp-block-button__link),
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	border-radius: 999px;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	min-height: 44px;
	padding: 11px 24px;
	line-height: 22px;
	letter-spacing: 0;
}

/* Botão dentro de aviso ("Ver produtos", "Ver carrinho"): o GP Premium tira o fundo e o
   respiro e deixa só o texto; aqui volta a ser o botão da loja, mais baixo, sem
   aumentar a altura do aviso. */
div.woocommerce-message a.button,
div.woocommerce-info a.button,
div.woocommerce-error a.button {
	background-color: var(--accent);
	color: var(--base-3);
}

/* A forma vale também no foco e no mouse por cima: o GP Premium zera o respiro no :hover e o
   botão encolhia. */
div.woocommerce-message a.button,
div.woocommerce-message a.button:focus,
div.woocommerce-message a.button:hover,
div.woocommerce-info a.button,
div.woocommerce-info a.button:focus,
div.woocommerce-info a.button:hover,
div.woocommerce-error a.button,
div.woocommerce-error a.button:focus,
div.woocommerce-error a.button:hover {
	min-height: 0;
	padding: 6px 18px;
	margin: -6px 0 -6px auto;
}

/* Aviso com botão em linha flexível: texto à esquerda, botão à direita, e no celular o botão
   desce para a linha de baixo em vez de flutuar por cima do texto ("Nenhum pedido foi feito
   ainda" + "Ver produtos"). Vale também quando o botão vem antes do texto ("CARRINHO"). */
div.woocommerce-message:has(> a.button),
div.woocommerce-info:has(> a.button),
div.woocommerce-error:has(> a.button) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}

div.woocommerce-message:has(> a.button)::after,
div.woocommerce-info:has(> a.button)::after,
div.woocommerce-error:has(> a.button)::after {
	display: none;
}

div.woocommerce-message > a.button,
div.woocommerce-info > a.button,
div.woocommerce-error > a.button {
	float: none;
	order: 1;
}

div.woocommerce-message a.button:focus,
div.woocommerce-message a.button:hover,
div.woocommerce-info a.button:focus,
div.woocommerce-info a.button:hover,
div.woocommerce-error a.button:focus,
div.woocommerce-error a.button:hover {
	background-color: var(--accent-alt);
	color: var(--base-3);
}

a.generate-back-to-top {
	border-radius: 999px;
}

/* ------------------------------------------------------------ campos */

:where(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="tel"], input[type="number"], textarea, select) {
	border-radius: var(--qa-raio-campo);
}

.select2-container--default .select2-selection--single {
	border-color: var(--qa-borda-campo);
	border-radius: var(--qa-raio-campo);
}

.select2-dropdown {
	border-color: var(--qa-borda-campo);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--qa-tinta);
	color: var(--qa-branco);
}

/* ------------------------------------------------------------ vitrine */

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del,
.woocommerce div.product span.price del,
.woocommerce-price-suffix {
	color: var(--qa-cinza);
	font-weight: 400;
	opacity: 1;
}

.woocommerce ul.products li.product a img,
.wp-block-gallery.has-nested-images figure.wp-block-image img,
.woocommerce div.product div.images img {
	border-radius: 18px;
}

.woocommerce div.product div.images .flex-control-thumbs img {
	border-radius: 10px;
}

/* Selos em pílula (a cor vem do Customizer, tinta; "Pré-venda" é âmbar, no functions.php). */
.woocommerce span.onsale {
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
}

/* Nas listas, o selo flutua a 12 px do canto da foto (QA Master à direita, Pré-venda à
   esquerda), como as tags das categorias da home, sem cobrir o canto arredondado. */
.woocommerce ul.products li.product.sales-flash-overlay .onsale {
	top: 12px;
	right: 12px;
	border-radius: 999px;
}

.woocommerce ul.products li.product.sales-flash-overlay .onsale.encomenda-badge {
	left: 12px;
}

/* Links no meio do texto do produto e das categorias: sublinhados e em carmim-escuro (o
   acento que leva texto). O GeneratePress tira o sublinhado de todo link e a cor de link do
   Customizer (grafite) é quase a do texto, então "neste link" sumia na frase. */
.woocommerce div.product .woocommerce-Tabs-panel a:not(.button),
.woocommerce div.product .woocommerce-product-details__short-description a:not(.button),
.woocommerce .term-description a:not(.button) {
	color: var(--qa-carmim-escuro);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce div.product .woocommerce-Tabs-panel a:not(.button):hover,
.woocommerce div.product .woocommerce-product-details__short-description a:not(.button):hover,
.woocommerce .term-description a:not(.button):hover {
	color: var(--qa-carmim-profundo);
}

.woocommerce div.product .stock.out-of-stock {
	color: var(--qa-ambar);
}

/* Abas do produto (Descrição, Informações): texto com sublinhado tinta na ativa, sobre uma
   linha fina, no lugar das caixas do WooCommerce. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	gap: 28px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--qa-linha);
	overflow: visible;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 12px 0;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--qa-cinza);
	font-weight: 600;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--qa-tinta);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--qa-tinta);
}

/* Seletor de quantidade (− 1 +) do GP Premium: uma pílula com a borda dos campos, na altura
   do botão (50 px), no lugar das três caixas; vale no produto e no carrinho. */
.woocommerce form .quantity.buttons-added {
	display: inline-flex;
	border: 1px solid var(--qa-borda-campo);
	border-radius: 999px;
	background-color: var(--qa-branco);
}

.woocommerce form .quantity.buttons-added:focus-within {
	border-color: var(--qa-tinta);
}

.woocommerce form .quantity.buttons-added .minus,
.woocommerce form .quantity.buttons-added .plus,
.woocommerce form .quantity.buttons-added .qty {
	width: 44px;
	height: 48px;
	min-height: 48px;
	border: 0;
	background-color: transparent;
	color: var(--qa-tinta);
}

/* O GP Premium escreve "-" (hífen, baixo e curto ao lado do "+"): o sinal vem do ::before,
   com o menos tipográfico. */
.woocommerce form .quantity.buttons-added .minus,
.woocommerce form .quantity.buttons-added .plus {
	font-size: 0;
	line-height: 1;
	text-decoration: none;
}

.woocommerce form .quantity.buttons-added .minus::before,
.woocommerce form .quantity.buttons-added .plus::before {
	font-size: 20px;
	font-weight: 500;
}

.woocommerce form .quantity.buttons-added .minus::before {
	content: "\2212";
}

.woocommerce form .quantity.buttons-added .plus::before {
	content: "+";
}

.woocommerce form .quantity.buttons-added .minus {
	border-radius: 999px 0 0 999px;
}

.woocommerce form .quantity.buttons-added .plus {
	border-radius: 0 999px 999px 0;
}

.woocommerce form .quantity.buttons-added .minus:hover,
.woocommerce form .quantity.buttons-added .plus:hover {
	background-color: var(--qa-areia);
}

.woocommerce form .quantity.buttons-added .qty {
	padding: 0;
	border-radius: 0;
	font-weight: 600;
	-moz-appearance: textfield;
}

/* Botão de compra do produto: mais largo e afastado do seletor no desktop. */
@media (min-width: 769px) {
	.woocommerce div.product form.cart div.quantity {
		margin-right: 16px;
	}

	.woocommerce div.product form.cart .single_add_to_cart_button {
		min-width: 220px;
	}
}

/* Paginação: círculos de 40 px com o número no centro. Com o respiro do CSS adicional, o
   "1" (estreito) ficava mais alto que largo e virava oval; de 10 em diante vira pílula. A
   página atual em tinta: o WooCommerce pintava de lilás, por cima do CSS adicional. */
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 999px;
	line-height: 1;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li span.current {
	background-color: var(--qa-tinta);
	color: var(--qa-branco);
}

/* ------------------------------------------------------------ avisos */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: 1px solid var(--qa-linha);
	border-radius: 16px;
}

.woocommerce-message::before { color: var(--qa-verde); }
.woocommerce-info::before { color: var(--qa-tinta); }

.woocommerce-error {
	border-color: rgba(194, 65, 12, 0.3);
}

.woocommerce-error::before { color: var(--qa-ambar); }

div.woocommerce-error a:not(.button) {
	color: var(--qa-tinta);
	text-decoration: underline;
}

/* Depois de atualizar o carrinho, o WooCommerce leva o foco ao aviso para o leitor de
   tela; o anel azul do navegador não precisa aparecer num bloco que não é clicável. */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus {
	outline: none;
}

/* ------------------------------------------------------------ carrinho e checkout */

.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	border-color: var(--qa-linha);
}

/* Miniatura do produto no carrinho: o WooCommerce fixa 32 px. */
.woocommerce-cart table.cart img {
	width: 64px;
	border-radius: 10px;
}

.woocommerce-cart table.cart .product-thumbnail {
	min-width: 64px;
}

/* A pílula do − 1 + é inline-flex (do tamanho dela), então segue o alinhamento à direita da
   célula, como Preço e Subtotal. No celular cada célula vira uma linha "Rótulo: valor", e o
   rótulo "Quantidade:" fica centrado na altura da pílula. */
@media (max-width: 768px) {
	.woocommerce-cart table.cart td.product-quantity {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}

/* Campo do cupom: o WooCommerce dá borda lilás reta e tira o foco; fica como os outros
   campos, na altura do botão "Aplicar cupom". */
.woocommerce-cart table.cart td.actions .coupon .input-text {
	border: 1px solid var(--qa-borda-campo);
	border-radius: var(--qa-raio-campo);
	padding: 10px 16px;
	min-height: 44px;
	margin-right: 8px;
}

/* No desktop cabe um código inteiro; no celular fica a metade da linha do WooCommerce.
   O #content é para passar o GP Premium, que fixa 150 px com um seletor de id. */
@media (min-width: 769px) {
	.woocommerce-cart #content table.cart td.actions .coupon .input-text {
		width: 320px;
	}
}

.woocommerce-cart table.cart td.actions .coupon .input-text:focus-visible {
	outline: 2px solid var(--qa-tinta);
	outline-offset: 2px;
}

.woocommerce-checkout #payment {
	background: var(--qa-marfim);
	border-radius: var(--qa-raio-cartao);
}

/* O GP Premium pinta o fundo de cada forma de pagamento; a primeira leva os cantos de
   cima do cartão, senão o fundo dela cobre o arredondado. */
.woocommerce-checkout #payment ul.payment_methods > li:first-child > label {
	border-radius: var(--qa-raio-cartao) var(--qa-raio-cartao) 0 0;
}

/* Finalizar pedido, "Ir para o checkout" do carrinho e "Adicionar" (página do produto e
   listas): verde de sucesso do QA CRM. No pagamento, com o respiro do cartão nas laterais
   (o GP Premium zera o da linha e o botão encostava nas bordas). */
.woocommerce-checkout #payment div.form-row.place-order {
	padding: 0 20px 20px;
}

.woocommerce #payment #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button.button.alt,
.woocommerce div.product form.cart .single_add_to_cart_button.button.alt,
.woocommerce ul.products li.product .button.add_to_cart_button {
	background-color: var(--qa-verde);
	color: var(--qa-branco);
}

.woocommerce #payment #place_order:hover,
.woocommerce #payment #place_order:focus,
.woocommerce .wc-proceed-to-checkout a.checkout-button.button.alt:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button.button.alt:focus,
.woocommerce div.product form.cart .single_add_to_cart_button.button.alt:hover,
.woocommerce div.product form.cart .single_add_to_cart_button.button.alt:focus,
.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.woocommerce ul.products li.product .button.add_to_cart_button:focus {
	background-color: var(--qa-verde-profundo);
	color: var(--qa-branco);
}

.woocommerce-checkout #payment div.payment_box {
	background-color: var(--qa-areia);
	border-radius: var(--qa-raio-campo);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--qa-areia);
}

/* ------------------------------------------------------------ minha conta */

/* Menu da Minha Conta: um cartão marfim com os itens em pílula e o ativo em tinta, no lugar
   das faixas quadradas. Os cursos (QA Master, QA Pro, na assinatura do logo pelo Meu Curso
   Online) vêm depois de um fio. */
.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
	border: 1px solid var(--qa-linha);
	border-radius: var(--qa-raio-cartao);
	background-color: var(--qa-marfim);
}

.woocommerce-MyAccount-navigation li a {
	padding: 12px 18px;
	border: 0;
	border-radius: 999px;
	color: var(--qa-tinta);
	font-size: 15px;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
}

/* Mouse por cima: fundo areia, sem a linha que o GP Premium punha embaixo do item. */
.woocommerce-MyAccount-navigation li a:hover {
	border: 0;
	background-color: var(--qa-areia);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--qa-tinta);
	color: var(--qa-branco);
}

/* Cursos e "Sair" depois de um fio; o "Sair" em carmim-escuro, como o botão da tela da conta. */
.woocommerce-MyAccount-navigation li:not([class*="--mco-curso-"]) + li[class*="--mco-curso-"],
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 4px;
	padding-top: 8px;
	border-top: 1px solid var(--qa-linha);
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--qa-carmim-escuro);
}

/* Endereços sem itálico (Minha conta, pedido, obrigado). */
.woocommerce address {
	font-style: normal;
}

/* "Editar" de cada endereço como botão, no formato do botão dentro de aviso. */
.woocommerce-account .addresses .woocommerce-Address-title a.edit {
	display: inline-flex;
	align-items: center;
	margin: 0 0 12px;
	padding: 6px 18px;
	border-radius: 999px;
	background-color: var(--accent);
	color: var(--base-3);
	font-size: 15px;
	font-weight: 600;
	line-height: 22px;
	text-decoration: none;
}

.woocommerce-account .addresses .woocommerce-Address-title a.edit:hover,
.woocommerce-account .addresses .woocommerce-Address-title a.edit:focus {
	background-color: var(--accent-alt);
	color: var(--base-3);
}

/* "Sair" (functions.php) ao lado de "Salvar alterações", em vermelho: carmim-escuro, o
   acento que leva texto na marca. */
.woocommerce-EditAccountForm > p:has(> button[name="save_account_details"]) {
	display: inline-block;
	margin-right: 8px;
	vertical-align: top;
}

.woocommerce-account a.button.qa-sair {
	background-color: var(--qa-carmim-escuro);
	color: var(--qa-branco);
	vertical-align: top;
}

.woocommerce-account a.button.qa-sair:hover,
.woocommerce-account a.button.qa-sair:focus {
	background-color: var(--qa-carmim-profundo);
	color: var(--qa-branco);
}

/* ------------------------------------------------------------ rodapé */

.site-info {
	border-top: 1px solid var(--qa-linha);
	font-size: 13px;
}