/* Convivência com as folhas de estilo do Elementor Pro.

Por que este arquivo existe separado: o Elementor enfileira TODO o seu CSS
(frontend, por widget, e o kit global) depois dos estilos do tema, e escreve com a
mesma especificidade que a nossa. Em empate de especificidade decide a ordem —
então o plugin vencia sistematicamente, e subir especificidade regra a regra vira
um jogo de gato e rato. Este arquivo é enfileirado por último (functions.php,
prioridade 100), o que resolve a disputa de uma vez, sem `!important` e sem
seletores inflados.

O que vem aqui: apenas regras que já existem em outro arquivo do tema e precisam
ser reafirmadas dentro de um widget do Elementor. Ao mexer no original, mexer aqui
também — a duplicação é deliberada, mas tem esse custo.

Nota: a largura de conteúdo (1280px) NÃO se resolve aqui. Ela é uma configuração
do kit global do Elementor, ajustada via a rota /wp-json/arterio/v1/elementor-kit
(ver inc/elementor-theme-builder.php), para que o editor visual mostre a mesma
largura do site publicado. */
/* --- Convivência com as folhas de estilo dos widgets do Elementor Pro ---

Cada widget WooCommerce do Pro carrega um CSS próprio (widget-woocommerce-*.css),
enfileirado depois do nosso e escrito com a mesma especificidade das nossas regras.
Empate de especificidade se decide pela ordem, então quem chega depois vence. As
regras abaixo repetem intenções já declaradas mais acima, agora prefixadas pela
classe do widget para subir um nível — não são estilos novos, são as mesmas
decisões defendidas contra o CSS do plugin.

Consequência prática: ao mexer nas regras originais, mexer aqui também. */

/* --- Grade e card de produto dentro dos widgets do Elementor ---

Repete o desenho de woocommerce.css usando o mesmo seletor do plugin
(`.elementor-products-grid ul.products.elementor-grid li.product`) — repetir
`.elementor-grid` empata a especificidade e deixa a ordem decidir, a nosso favor.
Cobre vitrine, relacionados e upsell de uma vez.

O Pro fixa as colunas lendo o `columns-N` do Customizer; o original usa 5 no
desktop e 4 no tablet, com vãos bem maiores na vertical que na horizontal. */

.elementor-widget-wc-archive-products .woocommerce.columns-4 ul.products,
.elementor-products-grid ul.products.elementor-grid {
	grid-template-columns: repeat(5, 1fr);
	column-gap: var(--arterio-space-4);
	row-gap: var(--arterio-space-6);
}

@media (max-width: 1023px) {
	.elementor-widget-wc-archive-products .woocommerce.columns-4 ul.products,
	.elementor-products-grid ul.products.elementor-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 767px) {
	.elementor-widget-wc-archive-products .woocommerce.columns-4 ul.products,
	.elementor-products-grid ul.products.elementor-grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--arterio-space-3);
		row-gap: var(--arterio-space-5);
	}
}

.elementor-products-grid ul.products.elementor-grid li.product {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	border: none;
	padding: 0;
	margin: 0;
	text-align: left;
	box-shadow: none;
	background: none;
}

.elementor-products-grid ul.products.elementor-grid li.product .arterio-product-media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--arterio-surface-image);
	border: 1px solid var(--arterio-border-soft);
}

.elementor-products-grid ul.products.elementor-grid li.product .arterio-product-media img {
	width: 100%;
	height: 100%;
	/* `contain` pelo mesmo motivo de woocommerce.css: são fotos de embalagem, e
	recortar corta a marca e a quantidade. */
	object-fit: contain;
	margin: 0;
	border-radius: 0;
}

.elementor-products-grid ul.products.elementor-grid li.product .woocommerce-loop-product__title {
	font-size: 0.875rem;
	font-weight: var(--arterio-weight-normal);
	color: var(--arterio-text);
	padding: 0;
	margin: 0;
}

.elementor-products-grid ul.products.elementor-grid li.product .price {
	font-size: 0.875rem;
	color: var(--arterio-text);
	margin: 0;
}

/* "ADICIONAR" como link de texto — desfaz o sistema de botões do tema e o do
widget de uma vez. */
.elementor-products-grid ul.products.elementor-grid li.product .button,
.elementor-products-grid ul.products.elementor-grid li.product a.added_to_cart {
	display: inline;
	width: auto;
	min-height: 0;
	padding: 0;
	border: none;
	background: none;
	color: var(--arterio-text);
	font-size: 0.75rem;
	font-weight: var(--arterio-weight-normal);
	letter-spacing: 0.025em;
	text-transform: uppercase;
	margin: 0;
}

.elementor-products-grid ul.products.elementor-grid li.product .button:hover {
	background: none;
	color: var(--arterio-text-60);
}

/* Caixas de categoria: sem miniatura e com as divisórias feitas pelo vão de 1px. */
.elementor-products-grid ul.products.elementor-grid li.product.product-category .arterio-product-media,
.elementor-products-grid ul.products.elementor-grid li.product.product-category a img {
	display: none;
}

.elementor-products-grid ul.products.elementor-grid:has(li.product-category) {
	gap: 1px;
	background-color: var(--arterio-border);
	border: 1px solid var(--arterio-border);
}

.elementor-products-grid ul.products.elementor-grid li.product.product-category {
	background-color: #ffffff;
	padding: var(--arterio-space-4);
	gap: 0;
	min-height: 140px;
}

/* A galeria ocupa metade da largura de conteúdo (616px), e como a imagem é
quadrada isso vira um bloco de 616px de altura que domina a página e deixa a
coluna da direita — nome, preço, compra — parecendo vazia. O teto de 480px
mantém a foto grande sem que ela engula a decisão de compra. */
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery {
	max-width: 480px;
}

/* ===== Páginas comuns com conteúdo Elementor (Carrinho, Minha conta) =====

Estas não são templates do Theme Builder: são páginas do WooCommerce cujo corpo
trocamos por Elementor. Por isso continuam dentro do <article> do Astra, e o Astra
limita o wrapper `.elementor` à largura de conteúdo dele (1200px) — 40px a menos
que o site. Resultado: cabeçalho em 104px e carrinho em 144px.

Liberando o teto, quem alinha volta a ser o container da própria seção (1280px do
kit), igual ao resto do site. */
.entry-content > .elementor,
.ast-page-builder-template .entry-content > .elementor {
	max-width: none;
}

/* O título da página vem do Astra, fora de qualquer container — "Carrinho"
nascia colado na borda. Recebe o mesmo container e a mesma escala dos títulos de
arquivo, para as duas páginas não parecerem de outro site. */
/* Só Carrinho e Minha conta: nelas o corpo é Elementor, o body ganha a classe
`elementor-page` e o `#primary` fica sem container por desenho (ver layout.css).
O checkout não é Elementor, já recebe o container do `#primary` — repetir aqui
somava padding e jogava o título para 128px. */
.woocommerce-cart .entry-header,
.woocommerce-account .entry-header {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--arterio-space-3);
	padding-top: var(--arterio-space-5);
}

.woocommerce-cart .entry-header .entry-title,
.woocommerce-account .entry-header .entry-title,
.woocommerce-checkout .entry-header .entry-title {
	font-size: 1.75rem;
	font-weight: var(--arterio-weight-medium);
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--arterio-text);
	margin: 0;
}

/* --- Carrinho ---
O widget do Pro traz o azul/ciano do kit padrão do Elementor. O vocabulário aqui é
o do Cart.tsx do arterio-next: bordas hairline, cantos retos, preto como única cor
de ação.

Os seletores repetem a âncora que o próprio widget usa
(`.elementor-widget-woocommerce-cart .woocommerce ...`, 4 classes). Escrever mais
curto — `.e-cart-section .checkout-button` — perdia por especificidade, não por
ordem: o botão continuava ciano mesmo com esta folha carregando depois. */

.elementor-widget-woocommerce-cart .woocommerce .woocommerce-cart-form,
.elementor-widget-woocommerce-cart .woocommerce .cart_totals {
	border: 1px solid var(--arterio-border);
	border-radius: 0;
	box-shadow: none;
}

.elementor-widget-woocommerce-cart .woocommerce table.shop_table,
.elementor-widget-woocommerce-cart .woocommerce table.shop_table td,
.elementor-widget-woocommerce-cart .woocommerce table.shop_table th {
	border-radius: 0;
	border-color: var(--arterio-border);
}

.elementor-widget-woocommerce-cart .woocommerce table.shop_table th {
	font-size: 0.75rem;
	font-weight: var(--arterio-weight-medium);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--arterio-text-muted);
}

/* Links: aqui NÃO dá para vencer por seletor. A regra do widget é
`.elementor-widget-woocommerce-cart .woocommerce a:not(.add_to_cart_button):not(...)`
com vários `:not()` encadeados, e cada um soma especificidade — qualquer seletor
razoável perde. Mas ela lê de variáveis CSS, que é o ponto de extensão previsto
pelo plugin. Definir a variável é mais limpo e sobrevive a atualização do CSS
dele. */
.elementor-widget-woocommerce-cart {
	--links-normal-color: var(--arterio-text);
	--links-hover-color: var(--arterio-text);
	--product-link-normal-color: var(--arterio-text);
	--product-link-hover-color: var(--arterio-text);
}

.elementor-widget-woocommerce-cart .woocommerce table.shop_table td.product-name a {
	text-decoration: none;
	font-weight: var(--arterio-weight-medium);
}

/* Miniatura de 80px com borda, como no carrinho original. */
.elementor-widget-woocommerce-cart .woocommerce table.shop_table td.product-thumbnail img {
	width: 80px;
	height: 80px;
	max-width: none;
	object-fit: contain;
	border: 1px solid var(--arterio-border);
	border-radius: 0;
	background-color: #ffffff;
}

.elementor-widget-woocommerce-cart .woocommerce .quantity input.qty {
	border: 1px solid var(--arterio-border);
	border-radius: 0;
	min-height: 44px;
	text-align: center;
}

.elementor-widget-woocommerce-cart .woocommerce .cart_totals h2,
.elementor-widget-woocommerce-cart .woocommerce .cart-collaterals h2 {
	font-size: 0.75rem;
	font-weight: var(--arterio-weight-medium);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--arterio-text-muted);
	margin: 0 0 var(--arterio-space-2);
}

/* Ações em preto; "atualizar carrinho" é secundário e fica em contorno. */
.elementor-widget-woocommerce-cart .woocommerce .wc-proceed-to-checkout .checkout-button,
.elementor-widget-woocommerce-cart .woocommerce .wc-proceed-to-checkout a.button,
.elementor-widget-woocommerce-cart .woocommerce button[name="update_cart"] {
	border: 1px solid #000000;
	border-radius: 0;
	min-height: 48px;
	font-size: 0.8125rem;
	font-weight: var(--arterio-weight-medium);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.elementor-widget-woocommerce-cart .woocommerce .wc-proceed-to-checkout .checkout-button,
.elementor-widget-woocommerce-cart .woocommerce .wc-proceed-to-checkout a.button {
	background-color: #000000;
	color: #ffffff;
}

.elementor-widget-woocommerce-cart .woocommerce button[name="update_cart"] {
	background-color: transparent;
	color: #000000;
}

.elementor-widget-woocommerce-cart .woocommerce button[name="update_cart"]:disabled {
	border-color: var(--arterio-border);
	color: var(--arterio-text-muted);
}

/* --- Minha conta ---
Cartões de borda hairline, ecoando o painel de app/conta/page.tsx.
Mesma observação do carrinho: cor de link vai por variável, não por seletor. */

.elementor-widget-woocommerce-my-account {
	--links-normal-color: var(--arterio-text);
	--links-hover-color: var(--arterio-text);
	--tabs-normal-color: var(--arterio-text-muted);
	--tabs-active-color: var(--arterio-text);
}

.elementor-widget-woocommerce-my-account .woocommerce .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.elementor-widget-woocommerce-my-account .woocommerce .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.625rem 0;
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--arterio-text-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--arterio-border);
}

.elementor-widget-woocommerce-my-account .woocommerce .woocommerce-MyAccount-navigation li.is-active a,
.elementor-widget-woocommerce-my-account .woocommerce .woocommerce-MyAccount-navigation li a:hover {
	color: var(--arterio-text);
}

.elementor-widget-woocommerce-my-account .woocommerce .woocommerce-MyAccount-content {
	font-size: 0.9375rem;
}

.elementor-widget-woocommerce-my-account .woocommerce .woocommerce-MyAccount-content a:not(.button) {
	color: var(--arterio-text);
	text-decoration: none;
}

.elementor-widget-woocommerce-my-account .woocommerce table,
.elementor-widget-woocommerce-my-account .woocommerce table td,
.elementor-widget-woocommerce-my-account .woocommerce table th {
	border-radius: 0;
	border-color: var(--arterio-border);
}

/* Avisos do WooCommerce dentro de páginas Elementor. O tratamento base está em
woocommerce.css; o Astra e o kit repintam a barra lateral de azul e o botão de
ciano, e chegam depois. */
.elementor .woocommerce-message,
.elementor .woocommerce-info {
	border-radius: 0;
	border-top-color: #000000;
	background-color: var(--arterio-surface-muted);
	color: var(--arterio-text);
}

.elementor .woocommerce-message::before,
.elementor .woocommerce-info::before {
	color: #000000;
}

.elementor .woocommerce .woocommerce-message a.button,
.elementor .woocommerce .woocommerce-info a.button,
.elementor .woocommerce-message a.button,
.elementor .woocommerce-info a.button {
	background-color: #000000;
	border: 1px solid #000000;
	border-radius: 0;
	color: #ffffff;
	min-height: 40px;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Formulários de entrar/cadastrar da conta. O widget entrega campos cinza sem
borda e botões ciano; o site usa campo branco com borda hairline e ação preta. */
.elementor-widget-woocommerce-my-account .woocommerce form .input-text,
.elementor-widget-woocommerce-my-account .woocommerce form input[type="text"],
.elementor-widget-woocommerce-my-account .woocommerce form input[type="email"],
.elementor-widget-woocommerce-my-account .woocommerce form input[type="password"] {
	background-color: #ffffff;
	border: 1px solid var(--arterio-border);
	border-radius: 0;
	min-height: 48px;
	padding: 0 var(--arterio-space-2);
	box-shadow: none;
}

.elementor-widget-woocommerce-my-account .woocommerce form .input-text:focus {
	border-color: #000000;
	outline: none;
}

.elementor-widget-woocommerce-my-account .woocommerce form .button,
.elementor-widget-woocommerce-my-account .woocommerce form button.button,
.elementor-widget-woocommerce-my-account .woocommerce .woocommerce-Button {
	background-color: #000000;
	border: 1px solid #000000;
	border-radius: 0;
	color: #ffffff;
	min-height: 48px;
	padding: 0 var(--arterio-space-4);
	font-size: 0.8125rem;
	font-weight: var(--arterio-weight-medium);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Caixas de "Entrar" e "Cadastre-se": borda hairline, canto reto. */
.elementor-widget-woocommerce-my-account .woocommerce .u-column1,
.elementor-widget-woocommerce-my-account .woocommerce .u-column2,
.elementor-widget-woocommerce-my-account .woocommerce .woocommerce-form-login,
.elementor-widget-woocommerce-my-account .woocommerce .woocommerce-form-register {
	border: 1px solid var(--arterio-border);
	border-radius: 0;
	box-shadow: none;
}

.elementor-widget-woocommerce-my-account .woocommerce h2 {
	font-size: 1.125rem;
	font-weight: var(--arterio-weight-medium);
	letter-spacing: -0.01em;
	color: var(--arterio-text);
}

/* --- Checkout ---
Aqui não há widget do Elementor de propósito: o formulário nativo recebe os campos
do plugin brazilian-market (CPF/CNPJ, bairro, cálculo de frete). Trocar o
renderizador seria risco funcional sem ganho visual, então o polimento é só CSS
sobre o markup do WooCommerce. */
.woocommerce-checkout form.checkout .input-text,
.woocommerce-checkout form.checkout select,
.woocommerce-checkout form.checkout textarea {
	background-color: #ffffff;
	border: 1px solid var(--arterio-border);
	border-radius: 0;
	min-height: 48px;
	padding: 0 var(--arterio-space-2);
	box-shadow: none;
}

.woocommerce-checkout form.checkout textarea {
	padding: var(--arterio-space-2);
	min-height: 96px;
}

.woocommerce-checkout form.checkout .input-text:focus,
.woocommerce-checkout form.checkout select:focus {
	border-color: #000000;
	outline: none;
}

.woocommerce-checkout form.checkout h3,
.woocommerce-checkout #order_review_heading {
	font-size: 0.75rem;
	font-weight: var(--arterio-weight-medium);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--arterio-text-muted);
	margin-bottom: var(--arterio-space-2);
}

.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-payment {
	border: 1px solid var(--arterio-border);
	border-radius: 0;
	background-color: transparent;
}

.woocommerce-checkout #place_order {
	background-color: #000000;
	border: 1px solid #000000;
	border-radius: 0;
	color: #ffffff;
	width: 100%;
	min-height: 52px;
	font-size: 0.8125rem;
	font-weight: var(--arterio-weight-medium);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* O bloco de pagamento vem com fundo cinza que sangra por baixo do botão. Fundo
neutro e o cinza reservado só para a opção selecionada, que é o que ele deveria
sinalizar. */
.woocommerce-checkout .woocommerce-checkout-payment {
	background-color: transparent;
	border: none;
	border-top: 1px solid var(--arterio-border);
	border-radius: 0;
}

.woocommerce-checkout .woocommerce-checkout-payment ul.payment_methods {
	border-bottom: none;
	padding: var(--arterio-space-2) 0;
}

.woocommerce-checkout .woocommerce-checkout-payment .payment_box {
	background-color: var(--arterio-surface-muted);
	border-radius: 0;
	font-size: 0.875rem;
}

.woocommerce-checkout .woocommerce-checkout-payment .payment_box::before {
	border-bottom-color: var(--arterio-surface-muted);
}

/* O select de País chega desabilitado (loja só entrega no Brasil) e o cinza do
navegador destoava dos demais campos. */
.woocommerce-checkout form.checkout select[disabled],
.woocommerce-checkout form.checkout .select2-container--disabled .select2-selection {
	background-color: #ffffff;
	color: var(--arterio-text-muted);
	opacity: 1;
}

/* ===== Contraste do texto corrido nas páginas de conteúdo =====

Correção de acessibilidade, não de gosto: os parágrafos de Sobre e Contato foram
gravados com #989898, que dá 2,88:1 sobre branco — abaixo do mínimo de 4,5:1 da
WCAG AA para texto normal. Foi um ajuste nosso ao montar as páginas, não um padrão
do Elementor.

`--arterio-text-muted` (#717182) fica em ~4,9:1 e serve para texto secundário; o
texto corrido em si volta à cor normal. A correção definitiva é regravar o
`_elementor_data` dessas páginas — enquanto elas não entram em
tools/elementor/build_templates.py, isto garante que ninguém leia cinza claro. */
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
	color: var(--arterio-text);
}

.elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* Últimos resíduos do cinza-azulado do Elementor/Astra (#1e293b nos títulos de
widget, #69727d nos rótulos de formulário). O site não tem azul em texto — ver a
nota de paleta em design-tokens.css. */
.elementor-widget-heading .elementor-heading-title,
.elementor h1,
.elementor h2,
.elementor h3,
.elementor h4 {
	color: var(--arterio-text);
}

.elementor-widget-woocommerce-my-account .woocommerce form label,
.elementor-widget-woocommerce-my-account .woocommerce .woocommerce-form-row label,
.elementor-widget-woocommerce-cart .woocommerce form label {
	color: var(--arterio-text-60);
}