/* ---------------------------------------------------------------------------
   6. Catálogo
   --------------------------------------------------------------------------- */

.magsil-produto__imagem img,
.is-style-magsil-produto-imagem img,
.woocommerce ul.products li.product img,
/*
 * A foto principal da peça entrou nesta lista depois, e por um motivo diferente
 * das outras: nela o recorte é consequência, e o que se quer é reservar o
 * espaço.
 *
 * A galeria do WooCommerce serve a imagem sem width nem height — medido: a única
 * imagem da página sem os dois e sem `aspect-ratio`, renderizando 340x340 no
 * celular. Sem nada declarando a proporção, o navegador só descobre a altura
 * quando o arquivo chega, e o que estiver abaixo — nome, preço, medidas, botões
 * — salta para baixo no meio da leitura. É deslocamento de layout no elemento
 * mais pesado da página, e conta no Core Web Vitals.
 *
 * 4/5 é a proporção que o tema já recorta em `magsil-produto` (800x1000) e a que
 * a listagem usa. Reservar com outra medida deslocaria de novo quando a foto
 * real chegasse.
 */
.woocommerce div.product .woocommerce-product-gallery__wrapper img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	inline-size: 100%;
	block-size: auto;
}

.magsil-preco-sob-consulta {
	display: inline-block;
	font-size: var(--wp--preset--font-size--miudo);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grafite);
}

.magsil-botao-orcamento,
.magsil-botao-whatsapp {
	/*
	 * `border-box` pelo mesmo motivo dos campos do formulário: com content-box, o
	 * `inline-size: 100%` que estes botões recebem no celular vale só para o
	 * conteúdo, e os 2,25rem de padding de cada lado são somados por fora. Medido:
	 * 374px de botão dentro de uma coluna de 342 — 32px para fora da caixa, com a
	 * borda direita cortada, exatamente o defeito que o formulário tinha.
	 *
	 * Não produzia rolagem horizontal, porque o excesso é recortado acima; foi a
	 * varredura de "elemento mais largo que o pai" que o encontrou.
	 */
	box-sizing: border-box;
	display: inline-block;
	margin: 0.9rem 0.5rem 0 0;
	padding: 1rem 2.25rem;
	/* Mesmo raio do elements.button do theme.json — os três botões do catálogo
	   aparecem lado a lado na página do produto e precisam ter a mesma silhueta. */
	border-radius: 5px;
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 180ms ease, color 180ms ease;
}

.magsil-botao-orcamento {
	background-color: var(--wp--preset--color--carvao);
	color: var(--wp--preset--color--areia);
}

.magsil-botao-orcamento:hover,
.magsil-botao-orcamento:focus {
	background-color: var(--wp--preset--color--terracota);
	color: #fff;
}

.magsil-botao-whatsapp {
	background-color: transparent;
	color: var(--wp--preset--color--carvao);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--carvao);
}

.magsil-botao-whatsapp:hover,
.magsil-botao-whatsapp:focus {
	background-color: var(--wp--preset--color--carvao);
	color: var(--wp--preset--color--areia);
}

/* ---------------------------------------------------------------------------
   6.1 O botão do cartão de sugestão

   Os cartões de "Produtos relacionados" saíam com dois botões do tamanho da
   ação principal da página — 262x58 no computador, a mesma medida do
   "Solicitar orçamento" do resumo logo acima. Três chamadas idênticas
   competindo, e a que interessa perdendo destaque por estar mais longe do
   rodapé. No celular era pior: 164x83 cada, porque o rótulo quebra em duas
   linhas no cartão estreito, somando 166px de botão por sugestão.

   Um só, de contorno e menor. É o mesmo tratamento que os cartões da vitrine já
   têm, e é o que separa "veja também" de "peça esta".
   --------------------------------------------------------------------------- */

.magsil-botao-orcamento--compacto {
	padding: 0.6rem 1rem;
	font-size: var(--wp--preset--font-size--miudo);
	/*
	 * Entrelinha curta porque aqui o rótulo quebra, e a quebra é inevitável.
	 *
	 * Nos cartões de sugestão do celular sobram 140px para o texto e ele pede
	 * 169px — medido. Caber numa linha exigiria fonte de 11px, abaixo do que se
	 * lê com conforto no telefone, ou uma coluna só na seção, decisão que a
	 * chegada das fotos pode inverter (duas fotos 4:5 em largura total viram
	 * muita rolagem). Então a quebra fica, e o que se corta é o ar entre as duas
	 * linhas: 63px de botão passam a 52.
	 */
	line-height: 1.25;
	letter-spacing: 0.06em;
	background-color: transparent;
	color: var(--wp--preset--color--carvao);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--corda);
}

.magsil-botao-orcamento--compacto:hover,
.magsil-botao-orcamento--compacto:focus {
	background-color: var(--wp--preset--color--carvao);
	color: var(--wp--preset--color--areia);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--carvao);
}

@media (hover: none) {
	/*
	 * Encolher é para o olho, não para o dedo.
	 *
	 * Com o botão em 35px de altura, o alvo cai abaixo dos 44px onde quer que se
	 * toque — inclusive num tablet ou num notebook de tela sensível, que não
	 * entram na medida de largura de celular. `hover: none` pergunta o que
	 * interessa aqui: existe mouse? Se não existe, a altura mínima volta, e o
	 * botão continua parecendo menor sem ficar mais difícil de acertar.
	 */
	.magsil-botao-orcamento--compacto {
		display: flex;
		align-items: center;
		justify-content: center;
		min-block-size: 44px;
	}

	/* O realce de passagem não vale sem mouse — e ele grudaria no toque. */
	.magsil-botao-orcamento--compacto:hover:not(:focus-visible),
	.magsil-botao-orcamento--compacto:focus:not(:focus-visible) {
		background-color: transparent;
		color: var(--wp--preset--color--carvao);
		box-shadow: inset 0 0 0 1px var(--wp--preset--color--corda);
	}
}

/* ---------------------------------------------------------------------------
   6.2 O botão de contorno é de contorno

   O núcleo zera o fundo do estilo "contorno" com

     :root :where(.wp-block-button.is-style-outline > .wp-block-button__link…)

   e o theme.json pinta todo botão de carvão com

     :root :where(.wp-element-button, .wp-block-button__link)

   As duas valem 0,1,0 — o `:where()` não soma especificidade —, então quem ganha
   é a que sair por último, e a do theme.json sai depois. Resultado: o botão do
   hero era declarado como contorno e renderizava preenchido de carvão, com uma
   borda branca por cima. O do bloco de fechamento, com marcação equivalente,
   saía transparente. Mesmo estilo declarado, dois resultados no mesmo site.

   Uma classe a mais no seletor basta para desempatar, sem `!important` e sem
   depender da ordem de carregamento continuar a que é hoje.
   --------------------------------------------------------------------------- */

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
}

/* ---------------------------------------------------------------------------
   6.3 O botão responde ao dedo

   Medido antes desta seção existir, com evento de toque de verdade no botão de
   enviar o orçamento:

     repouso            fundo carvão
     dedo encostado     fundo carvão   ← nada muda
     depois de soltar   fundo terracota, e fica assim

   O retorno estava invertido. Enquanto o dedo está encostado, que é quando a
   pessoa precisa saber que o toque pegou, não acontecia nada; depois de soltar, o
   `:hover` entrava e permanecia, deixando o botão com cara de ligado. E não é
   detalhe estético: sem retorno na hora da pressão, numa conexão lenta, a pessoa
   toca de novo — foi assim que dois toques viraram dois pedidos de orçamento.

   `:active` não aparecia uma única vez neste arquivo. Agora aparece, e é o único
   estado que acompanha a pressão de verdade: entra ao encostar, sai ao soltar.
   --------------------------------------------------------------------------- */

:is(
	.wp-element-button,
	.magsil-botao-orcamento,
	.magsil-botao-whatsapp,
	.magsil-fab,
	button[type="submit"]
) {
	/*
	 * O caminho do iOS, e ele não é redundante com o `:active` abaixo.
	 *
	 * No Safari do iPhone o `:active` só passa a valer quando existe algum
	 * ouvinte de evento de toque na página — uma peculiaridade antiga, cuja
	 * solução costumeira é justamente pendurar um ouvinte vazio. Este tema não
	 * carrega um byte de JavaScript, e um estado de botão não é motivo para
	 * passar a carregar.
	 *
	 * O realce de toque é o mecanismo nativo do próprio iOS para isto, e responde
	 * ao dedo sem script nenhum. O padrão é um cinza pálido que mal se enxerga
	 * sobre fundo escuro; em terracota translúcida ele se anuncia, e ainda usa a
	 * cor com que o site marca ação.
	 */
	-webkit-tap-highlight-color: rgb(156 63 34 / 30%);
}

:is(
	.wp-element-button,
	.magsil-botao-orcamento,
	.magsil-botao-whatsapp,
	.magsil-fab,
	button[type="submit"]
):active {
	/* Escurece sem depender da cor de origem: vale para o preenchido e para o
	   de contorno, que não tem fundo para escurecer. */
	filter: brightness(0.86);
}

@media (prefers-reduced-motion: no-preference) {
	:is(
		.wp-element-button,
		.magsil-botao-orcamento,
		.magsil-botao-whatsapp,
		.magsil-fab,
		button[type="submit"]
	):active {
		transform: scale(0.97);
	}
}

/* ---------------------------------------------------------------------------
   6.4 O realce de passagem não gruda no toque

   Num aparelho sem mouse, tocar aplica `:hover` — e ele fica aplicado até a
   pessoa tocar em outro lugar. Como o tema pinta o `:hover` de terracota, todo
   botão tocado ficava terracota indefinidamente, inclusive depois de voltar de
   outra página. O mesmo vale para o `:focus` que o theme.json define, que o toque
   também dispara.

   Onde há mouse, nada muda: os dois estados continuam iguais. Onde não há, o
   botão volta ao repouso assim que o dedo sai, e quem diz que o toque pegou é o
   `:active` acima — que é o estado com o significado certo.

   O `:focus-visible`, que é o do teclado, fica de fora de propósito: ele precisa
   continuar visível, e não é ele que gruda no toque.
   --------------------------------------------------------------------------- */

@media (hover: none) {
	:is(.wp-element-button, button[type="submit"]):hover:not(:focus-visible),
	:is(.wp-element-button, button[type="submit"]):focus:not(:focus-visible) {
		background-color: var(--wp--preset--color--carvao);
		color: var(--wp--preset--color--areia);
	}

	.magsil-botao-orcamento:hover:not(:focus-visible),
	.magsil-botao-orcamento:focus:not(:focus-visible) {
		background-color: var(--wp--preset--color--carvao);
		color: var(--wp--preset--color--areia);
	}

	.magsil-botao-whatsapp:hover:not(:focus-visible),
	.magsil-botao-whatsapp:focus:not(:focus-visible) {
		background-color: transparent;
		color: var(--wp--preset--color--carvao);
	}
}

/* Abas da ficha técnica no visual do tema, e não no cinza do WooCommerce */
.woocommerce-tabs ul.tabs {
	padding: 0 !important;
	margin-bottom: var(--wp--preset--spacing--30) !important;
	border-bottom: 1px solid var(--wp--preset--color--corda);
}

.woocommerce-tabs ul.tabs::before {
	display: none !important;
}

.woocommerce-tabs ul.tabs li {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 1.75rem 0 0 !important;
	padding: 0 0 0.85rem !important;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	display: none !important;
}

.woocommerce-tabs ul.tabs li a {
	padding: 0 !important;
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--miudo);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grafite) !important;
	text-decoration: none;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--carvao) !important;
	box-shadow: 0 1px 0 var(--wp--preset--color--terracota);
}

.woocommerce-tabs .panel > h2:first-child {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/*
 * O texto das abas volta para a medida de leitura.
 *
 * As abas da peça ocupam a largura larga, o que está certo para a tabela de
 * atributos e para as listas de conservação — elas são duas colunas e agradecem
 * o espaço. Mas a descrição é texto corrido, e no computador ela saía com 1252px
 * de linha: 103 caracteres a 1440px e 119 a 1920, contra os 45 a 85 em que o
 * olho consegue voltar do fim de uma linha para o começo da seguinte sem se
 * perder. Com as descrições em 220 palavras, isso virou parágrafo de dez linhas
 * atravessando a tela inteira.
 *
 * Só o texto é restringido. Tabela e lista continuam com a largura toda, que é a
 * mesma regra que o projeto aplica no resto do site: seção e imagem ganham a
 * tela, parágrafo não.
 */
.woocommerce-tabs .panel > :is(p, h3, h4) {
	max-inline-size: var(--wp--style--global--content-size, 45rem);
}

/* Tabela de atributos legível */
.woocommerce-product-attributes {
	inline-size: 100%;
	border-collapse: collapse;
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--wp--preset--color--corda);
	text-align: start;
	font-size: var(--wp--preset--font-size--pequeno);
}

.woocommerce-product-attributes th {
	inline-size: 40%;
	font-weight: 500;
	color: var(--wp--preset--color--grafite);
}

.woocommerce-product-attributes td p {
	margin: 0;
}

/* ---------------------------------------------------------------------------