/*
Theme Name: Magsil
Theme URI: https://magsilmoveis.com.br
Author: Magsil Móveis
Description: Tema de bloco (FSE) sob medida para a Magsil Móveis — site híbrido institucional, catálogo e blog. Leve, acessível e otimizado para Core Web Vitals.
Version: 0.3.3
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: magsil
Tags: full-site-editing, block-patterns, e-commerce, blog, accessibility-ready
*/

/* ===========================================================================
   O sistema de design vive em theme.json. Aqui ficam só os refinamentos que
   ele ainda não expressa: eixos de fonte variável, detalhes editoriais e
   estados de interação.

   As seções são numeradas na ordem em que aparecem no arquivo, e quem
   acrescenta pega o próximo número livre. Só isso — mas convém dizer por quê,
   porque a numeração já tinha derivado uma vez: havia uma 6.21 e uma 6.25 antes
   da 6.3, e a 6.1 e a 6.2 moravam quatrocentas linhas DEPOIS da seção 7. O
   número prometia um lugar e o arquivo entregava outro.

   Quando um assunto já visto reaparece mais adiante, ele ganha número novo em
   vez de voltar para perto do irmão: mover um bloco de CSS muda a ordem da
   cascata e pode mudar o que se vê na tela; renumerar não muda nada. Foi o caso
   do cartão da vitrine (12 e 13), que é assunto da seção 6 e mora depois da 11.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tipografia
   A Fraunces é variável em tamanho óptico (opsz) e suavidade (SOFT). Título
   grande com opsz alto ganha serifas mais finas e desenho mais refinado;
   texto pequeno com opsz baixo mantém legibilidade. Sem isso, a fonte
   renderiza tudo no mesmo desenho e perde metade da graça.
   --------------------------------------------------------------------------- */

:where(h1, h2, h3, h4, h5, h6, .wp-block-post-title, .wp-block-site-title) {
	font-variation-settings: "opsz" 96, "SOFT" 18;
	font-synthesis-weight: none;
}

h1,
.has-display-font-size,
.has-titulo-1-font-size,
.magsil-hero__titulo {
	font-variation-settings: "opsz" 132, "SOFT" 22;
}

h3,
h4,
.has-titulo-3-font-size {
	font-variation-settings: "opsz" 48, "SOFT" 12;
}

/* Números e datas alinhados em colunas */
.magsil-meta,
.is-style-magsil-meta,
time,
.wp-block-post-date {
	font-variant-numeric: tabular-nums;
}

/* Texto corrido com medida confortável e órfãs evitadas */
p {
	text-wrap: pretty;
}

:where(h1, h2, h3) {
	text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   2. Antetítulo (eyebrow)
   Pequeno rótulo acima do título, com um filete curto à esquerda. É o detalhe
   que separa uma seção "com título" de uma seção editorialmente composta.
   --------------------------------------------------------------------------- */

/*
 * O `is-style-magsil-meta` é a classe que o estilo de bloco "Texto auxiliar"
 * gera quando alguém o escolhe no painel — e ela precisa constar aqui, e não só
 * no editor.css, senão a escolha aparece no editor e some no site. O mesmo vale
 * para o cartão e para a imagem de produto, mais abaixo.
 */
.magsil-meta,
.is-style-magsil-meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--miudo);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grafite);
}

/* ---------------------------------------------------------------------------
   2.1 O filete terracota
   Ele marca a abertura de um movimento da página — não todo rótulo em caixa
   alta. Enquanto morou no .magsil-meta, apareceu também em data de post, em
   categoria de produto e em nome de autor, onde não classifica nada; e as
   exceções para escondê-lo (dentro de cartão, sobre foto) foram se acumulando,
   que é o sintoma de um padrão invertido. Agora é preciso pedir por ele.
   --------------------------------------------------------------------------- */

.magsil-meta--filete {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.magsil-meta--filete::before {
	content: "";
	inline-size: 2rem;
	block-size: 1px;
	flex: none;
	background-color: var(--wp--preset--color--terracota);
}

.wp-block-cover .magsil-meta,
.wp-block-cover .is-style-magsil-meta {
	color: var(--wp--preset--color--corda);
}

/* ---------------------------------------------------------------------------
   3. Links
   Sublinhado fino e afastado da base da letra: legível sem cortar as descidas
   das letras (g, p, q). Cor só no hover — link laranja em todo parágrafo
   cansa a leitura.
   --------------------------------------------------------------------------- */

.wp-block-post-content a,
.entry-content a,
.wp-block-paragraph a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	text-decoration-color: var(--wp--preset--color--corda);
	transition: text-decoration-color 160ms ease, color 160ms ease;
}

.wp-block-post-content a:hover,
.entry-content a:hover,
.wp-block-paragraph a:hover {
	text-decoration-color: currentColor;
}

/*
 * Superfícies escuras: o link herda a cor do texto ao redor.
 *
 * A cor global de link é o carvão, que é ótimo sobre areia e invisível sobre
 * carvão — foi assim que o rodapé ficou com links pretos em fundo preto. Em
 * vez de repetir a cor em cada bloco escuro, a regra vale para a superfície.
 */
.has-carvao-background-color a:not(.wp-element-button),
.wp-block-cover a:not(.wp-element-button) {
	color: inherit;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.has-carvao-background-color a:not(.wp-element-button):hover,
.wp-block-cover a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--corda);
	text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------------------
/* ---------------------------------------------------------------------------
   8. Emenda entre o CTA e o rodapé

   As duas são faixas de fundo carvão, uma logo depois da outra. Cada uma trazia
   a própria margem de topo de var(--wp--preset--spacing--60), o que abria entre
   elas uma faixa branca de até 9,5rem — dois blocos escuros separados por uma
   listra clara, que lê como falha de renderização e não como respiro.

   A margem do rodapé continua valendo em toda página que NÃO termina no CTA
   (matérias-primas, post do blog, contato): ali ele precisa mesmo se afastar do
   conteúdo. O :has() desliga a margem só quando o CTA é o último bloco do main,
   que é exatamente o caso em que ela sobra.

   A margem precisou sair do parts/footer.html para chegar até aqui. Enquanto
   ela era atributo do bloco, o WordPress a emitia como estilo inline — e estilo
   inline vence folha de autor, então a regra que a desligava nunca valia. O
   alvo também mudou: quem carrega a margem agora é o invólucro do template-part
   (<footer class="wp-block-template-part">), que é o irmão do <main>. O grupo
   de dentro, que antes tentávamos alcançar, é neto.
   --------------------------------------------------------------------------- */

.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: var(--wp--preset--spacing--60);
}

main:has(> .magsil-cta:last-child) + footer.wp-block-template-part {
	margin-block-start: 0;
}

/*
 * O contato do rodapé é <address>, que o navegador entrega em itálico.
 *
 * O itálico é herança de quando <address> servia para assinar o autor de um
 * documento. Aqui ele é o endereço comercial, e sair inclinado no meio de uma
 * coluna de texto reto lê como citação, não como contato. A semântica é a que
 * se queria; a aparência não.
 */
.magsil-rodape .wp-block-heading {
	margin-block-end: var(--wp--preset--spacing--10);
}

.magsil-endereco {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

/*
 * A lista de políticas imita a navegação da coluna ao lado: sem marcador, sem
 * recuo, e com o mesmo vão de 0,5rem entre as linhas. As duas colunas são
 * listas de link e precisam parecer irmãs, mas só uma delas nasce do bloco de
 * navegação — sem isto, uma sairia com bolinha e recuo e a outra não.
 */
.magsil-rodape__lista {
	list-style: none;
	margin-block-end: 0;
	padding-inline-start: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

/*
 * Sem sublinhado, como o menu ao lado.
 *
 * O bloco de navegação tira o sublinhado dos itens dele; o bloco de lista não,
 * porque o sublinhado é do próprio <a> no navegador. O resultado, visto na
 * captura, eram duas colunas de link lado a lado com aparência de coisas
 * diferentes — uma riscada e a outra não.
 *
 * O destaque no ponteiro continua vindo da regra de superfície escura, que
 * troca a cor no hover. É o mesmo retorno que o menu dá, que é o ponto: quem
 * olha as duas colunas precisa entender que são a mesma espécie de link.
 */
.magsil-rodape__lista a {
	text-decoration: none;
}

/*
 * No celular, a linha de políticas quebra entre os links e não dentro deles.
 *
 * Medido em 390px: "Trocas e Devoluções" saía partido em "Trocas" numa linha e
 * "e Devoluções" na seguinte. O nome do documento é o rótulo do link, e rótulo
 * partido ao meio obriga a remontar a frase para saber onde se está clicando.
 *
 * Cada link vira indivisível; os espaços em volta do "·" continuam sendo os
 * pontos de quebra, que é onde a quebra não custa nada. Nenhum dos três é
 * comprido o bastante para estourar a tela mais estreita que se usa hoje.
 */
.magsil-rodape__legais a {
	white-space: nowrap;
}

/*
 * Dado que perde o sentido ao ser partido no meio.
 *
 * Telefone e CNPJ têm pontos de quebra que o navegador considera legítimos — o
 * espaço depois do DDD, a barra antes do dígito verificador. Nenhum dos dois é
 * legítimo para quem lê: meia inscrição não identifica empresa, e meio telefone
 * não liga para lugar nenhum.
 */
.magsil-nao-quebra {
	white-space: nowrap;
}

/*
 * Entre o celular e o monitor, as quatro colunas viram duas.
 *
 * Abaixo de 782px o bloco de colunas do WordPress já empilha tudo numa só. O
 * problema mora na faixa de cima: medido no navegador, em 820px as quatro
 * colunas ficam com 147px cada, largura em que o nome da marca quebra em duas
 * linhas. Duas colunas de metade resolvem sem tirar nada do ar, e o par de
 * baixo continua alinhado com o de cima — é isso que faz quatro caixas
 * parecerem grade, e não pilha torta.
 *
 * Os dois pesos extras existem porque o core defende o contrário nesta mesma
 * faixa, e defende com força:
 *
 *   @media (min-width: 782px) { .wp-block-columns { flex-wrap: nowrap!important } }
 *   @media (min-width: 782px) { .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 0; flex-grow: 1 } }
 *
 * Contra o `!important` do primeiro, só outro `!important` — e ele vence por
 * ter mais classe no seletor. Contra o segundo, que tem três classes, basta
 * chegar com quatro. Sem esses dois detalhes a regra existe no arquivo e não
 * acontece na tela, que foi exatamente o que a primeira medição encontrou.
 */
@media (782px <= width < 1120px) {
	.magsil-rodape .wp-block-columns.alignwide {
		flex-wrap: wrap !important;
	}

	.magsil-rodape .wp-block-columns.alignwide > .wp-block-column {
		flex-basis: calc(50% - (var(--wp--preset--spacing--50) / 2));
		flex-grow: 0;
	}
}

/* ---------------------------------------------------------------------------
   9. Autoria e medidas, no resumo da peça
   As duas informações que estavam escondidas atrás de uma aba e são justamente
   as que decidem: se cabe no espaço, e quem fez. Ficam entre o resumo e os
   botões, na ordem em que a dúvida aparece.
   --------------------------------------------------------------------------- */

.magsil-autoria {
	margin-block: var(--wp--preset--spacing--20) 0;
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--terracota);
}

/* Sem marcador e sem recuo: é uma tabela de duas colunas escrita como lista,
   porque rótulo e valor são um par — e <ul> é o que um leitor de tela anuncia
   com a contagem certa de itens. */
.magsil-medidas {
	margin-block: var(--wp--preset--spacing--20) 0;
	padding: 0;
	list-style: none;
}

.magsil-medidas li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.6rem;
	border-block-end: 1px solid var(--wp--preset--color--corda);
	font-size: var(--wp--preset--font-size--pequeno);
}

.magsil-medidas__rotulo {
	color: var(--wp--preset--color--grafite);
}

/* Tabular para os números alinharem entre si na coluna da direita: 78 cm sobre
   112 cm com largura de dígito variável desencontra a vírgula e a unidade. */
.magsil-medidas__valor {
	font-variant-numeric: tabular-nums;
}

.magsil-medidas__nota {
	margin-block-start: 0.6rem;
	font-size: var(--wp--preset--font-size--miudo);
	line-height: 1.45;
	color: var(--wp--preset--color--grafite);
}

/* ---------------------------------------------------------------------------
   10. Ficha técnica
   Link utilitário, e não um terceiro botão: quem chega na página de produto tem
   duas ações principais — pedir orçamento e chamar no WhatsApp. A ficha é para
   quem está especificando, e esse leitor procura pelo texto, não pelo destaque.
   --------------------------------------------------------------------------- */

.magsil-ficha-link {
	margin-block: var(--wp--preset--spacing--20) 0;
	font-size: var(--wp--preset--font-size--pequeno);
}

.magsil-ficha-link a {
	color: var(--wp--preset--color--grafite);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--wp--preset--color--corda);
}

.magsil-ficha-link a:hover,
.magsil-ficha-link a:focus {
	color: var(--wp--preset--color--terracota);
	text-decoration-color: currentColor;
}

/* A linha que diz para que a ficha serve, sem roubar peso dos dois botões. */
.magsil-ficha-link__nota {
	display: block;
	margin-block-start: 0.15rem;
	font-size: var(--wp--preset--font-size--miudo);
	line-height: 1.45;
	color: var(--wp--preset--color--grafite);
}

.magsil-aviso {
	padding: 1.1rem 1.35rem;
	margin-block-end: var(--wp--preset--spacing--30);
	border-inline-start: 2px solid;
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1.6;
}

.magsil-aviso--sucesso {
	border-color: var(--wp--preset--color--oliva);
	background-color: color-mix(in srgb, var(--wp--preset--color--oliva) 9%, transparent);
}

.magsil-aviso--erro {
	border-color: var(--wp--preset--color--terracota);
	background-color: color-mix(in srgb, var(--wp--preset--color--terracota) 9%, transparent);
}

/* ---------------------------------------------------------------------------
   11. Botão flutuante de WhatsApp

   O número aparecia na tarja do topo, no rodapé e na página da peça, e sumia
   todo para quem rolou a página no celular — que é onde este público está. Este
   botão é o único caminho que acompanha a rolagem.

   Verde do WhatsApp, e não carvão: o botão é reconhecido antes de ser lido, e a
   cor faz parte desse reconhecimento tanto quanto o símbolo. É a única cor do
   site que vem de fora da paleta, e vem porque não é decoração — é sinalização.

   O anel fino de carvão a 12% existe porque o verde sobre areia dá 1,9:1, abaixo
   dos 3:1 que a WCAG pede para a borda de um componente. Sem ele o botão flutua
   sem contorno sobre o fundo claro. O símbolo branco sobre o verde fica pela
   exceção de logotipo da própria norma: é a marca do WhatsApp, e alterá-la para
   ganhar contraste tiraria justamente o que faz o botão ser reconhecido.
   --------------------------------------------------------------------------- */

.magsil-fab {
	position: fixed;
	z-index: 90;
	inset-block-end: max(1.25rem, env(safe-area-inset-bottom));
	inset-inline-end: 1.25rem;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #25D366;
	color: #FFFFFF;
	box-shadow: 0 0 0 1px rgb(34 29 25 / 12%), var(--wp--preset--shadow--elevado);
	transition: background-color 180ms ease, transform 180ms ease;
}

.magsil-fab__icone {
	inline-size: 1.6rem;
	block-size: 1.6rem;
}

.magsil-fab:hover,
.magsil-fab:focus-visible {
	background-color: #1DA851;
}

@media (prefers-reduced-motion: no-preference) {
	.magsil-fab:hover {
		transform: translateY(-2px);
	}
}

/*
 * O rodapé abre espaço para ele no celular.
 *
 * O botão tem 3,5rem mais o afastamento da borda, e o rodapé terminava com
 * respiro menor que isso — a última linha, que é onde moram os links de
 * política e de termos, ficava embaixo do botão.
 */
@media (width <= 781px) {
	.magsil-rodape {
		padding-block-end: 5.5rem !important;
	}
}

/* ---------------------------------------------------------------------------
   14. Celular — alvos de toque

   Medido no navegador em 390 × 844, e não estimado. A régua é 44 × 44 CSS px, que
   é o critério 2.5.5 da WCAG e o mínimo das diretrizes da Apple e do Google —
   abaixo disso a taxa de erro de toque sobe rápido, e o erro custa mais aqui do
   que numa página comum: quase todo controle deste site leva ao pedido de
   orçamento, que é o produto desta fase.

   Onde o ícone não pode crescer sem estragar o desenho, a área de toque é
   ampliada por um ::after posicionado, e não por padding. O alvo cresce, o
   desenho fica igual.
   --------------------------------------------------------------------------- */

/*
 * O botão do menu media 24 × 24 — o controle mais importante do celular, e o
 * menor da página. É o único caminho para a navegação inteira quando a barra
 * some, então ele cresce de verdade, e não só na área invisível.
 */
/*
 * Sem `display` aqui, e a ausência é o ponto.
 *
 * Estes dois botões são escondidos pelo núcleo a partir de 600px:
 *
 *   @media (min-width:600px) { …-open:not(.always-shown) { display: none } }
 *   @media (min-width:600px) { …:not(.is-menu-open) …-close { display: none } }
 *
 * A primeira versão desta regra declarava `display: flex !important` para poder
 * centralizar o ícone — e o !important venceu as duas, deixando o hambúrguer e o
 * "✕" desenhados no cabeçalho do computador, onde a barra de navegação já está
 * inteira à vista. Pior que a sujeira: o "✕" é `position: absolute; right: 0`, e
 * caía exatamente sobre o último item do menu. Clicar em "Contato" no desktop
 * acionava o botão de fechar um menu que nunca esteve aberto — o link não abria,
 * e nada explicava por quê.
 *
 * O núcleo já entrega `display: flex` ao botão de abrir quando ele deve
 * aparecer, então alinhar o conteúdo não exige redeclarar nada. O de fechar
 * ganha o seu só dentro do painel aberto, que é o único momento em que ele
 * existe para o usuário.
 */
.wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	/* Compensa a área nova para o ícone não descolar da borda do cabeçalho. */
	margin-inline-end: -0.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
}

/*
 * Dentro do painel aberto, cada item ocupa a linha inteira.
 *
 * O menu do cabeçalho é alinhado à direita, e o painel herdava esse alinhamento:
 * com a tela inteira disponível, os seis itens ficavam numa coluna de 67px
 * encostada na borda direita, cada um com 26px de altura. Um alvo de 26px é
 * pequeno; um alvo de 26px espremido contra a borda da tela, onde o polegar já
 * tem menos precisão, é pior.
 *
 * Ocupando a linha toda, o toque vale em qualquer ponto da largura — que é como
 * menu de celular se comporta em qualquer aplicativo — e a altura mínima entrega
 * o alvo de 44px.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	inline-size: 100%;
	align-items: stretch;
	gap: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	inline-size: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	inline-size: 100%;
	min-block-size: 44px;
	padding-block: 0.35rem;
}

/*
 * Ícones sociais do rodapé: 24 × 24 medidos, três deles lado a lado.
 *
 * Aqui o ::after ganha da padding: aumentar o botão empurraria a linha inteira e
 * mudaria o ritmo do rodapé, que já está resolvido. O alvo passa a 44 × 44 sem
 * um pixel de diferença na tela.
 */
.wp-block-social-link-anchor {
	position: relative;
}

.wp-block-social-link-anchor::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	inline-size: 44px;
	block-size: 44px;
}

/*
 * Paginação do catálogo. O número "2" media 9 × 20: é o alvo mais difícil do
 * site inteiro, e está no caminho de quem quer ver o resto das peças.
 */
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: 0.5rem;
}

/*
 * O rodapé é a segunda navegação do site, e no celular é a que fica ao alcance
 * do polegar depois de rolar a página inteira. Os links das colunas "Navegação"
 * e "Linhas" mediam 19px de altura, empilhados — o erro de toque ali manda a
 * pessoa para a linha de produto errada.
 *
 * A altura entra por padding, e não por line-height: mudar o line-height
 * afetaria a entrelinha de qualquer texto que caia dentro do rodapé, e o que se
 * quer aumentar é a área de toque, não o espaço entre as palavras.
 */
@media (width <= 781px) {
	.magsil-rodape .wp-block-navigation-item__content,
	.magsil-rodape__lista a,
	/* O bloco de contato do rodapé é <address> com HTML cru, e não bloco de
	   navegação — ficava de fora da regra acima e continuava com 19px, apesar de
	   ser o segundo caminho mais curto do site para o WhatsApp. */
	.magsil-endereco a,
	/* Os cartões de linha da home: o título é o link, e media 26px. */
	.magsil-categoria a {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}

	/* Sem o ajuste, o respiro dobrado empurraria o rodapé demais. */
	.magsil-rodape .wp-block-navigation__container.is-vertical {
		gap: 0 !important;
	}

	.magsil-rodape__lista li {
		margin-block: 0;
	}
}

/*
 * O título da peça na vitrine é o único caminho para a página dela — o botão do
 * cartão leva ao formulário, não ao produto. Media 24px de altura.
 */
.wp-block-post-title a {
	display: inline-block;
	padding-block: 0.65rem;
}

/*
 * A ordenação do catálogo saía com o desenho padrão do navegador, 19px de
 * altura, num site em que nada mais tem esse aspecto. Ganha o traço do tema e
 * altura de toque.
 */
.woocommerce-ordering select.orderby {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 20rem;
	min-block-size: 44px;
	padding: 0.6rem 2.25rem 0.6rem 0.9rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--carvao);
	background-color: var(--wp--preset--color--branco);
	border: 1px solid var(--wp--preset--color--corda);
	border-radius: 5px;
	/* A seta é desenhada aqui porque `appearance: none` remove a do sistema. */
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	background-repeat: no-repeat;
}

/* ---------------------------------------------------------------------------
   15. Celular — blocos que só quebram no estreito
   --------------------------------------------------------------------------- */

@media (width <= 781px) {

	/*
	 * As abas da peça viram uma faixa que rola de lado.
	 *
	 * Elas passaram de duas para três com a de materiais, e três rótulos em caixa
	 * alta não cabem em 390px. A primeira solução foi deixar quebrar em duas
	 * linhas; esta troca a quebra pela rolagem, que mantém a régua de abas como
	 * uma linha só e é o gesto que se conhece de qualquer aplicativo.
	 *
	 * A objeção contra a rolagem era concreta, e continua de pé: a terceira aba é
	 * "Materiais e conservação", que é o conteúdo que este catálogo tem e a
	 * concorrência não, e esconder o que diferencia atrás de um gesto é perder o
	 * argumento por layout. Por isso a faixa é desenhada para ANUNCIAR que
	 * continua, em vez de terminar numa borda limpa que parece o fim da lista:
	 *
	 *   - `nowrap` com `flex: 0 0 auto` deixa a terceira aba cortada pela metade
	 *     na borda, e meia palavra visível é o que diz "tem mais aqui";
	 *   - a máscara esmaece os últimos 2rem, para o corte parecer proposital;
	 *   - o encaixe é `proximity`, e não `mandatory`: com `mandatory` um arrasto
	 *     curto salta a aba inteira e a pessoa perde a de onde saiu.
	 *
	 * A barra de rolagem é escondida porque no celular ela é desenhada por cima do
	 * conteúdo e some sozinha depois do toque — deixá-la só acrescentaria um traço
	 * cinza sobre o sublinhado da aba ativa.
	 *
	 * Quem navega por teclado não depende do gesto: o foco em uma aba fora da
	 * vista rola a faixa sozinho, que é comportamento do próprio navegador para
	 * contêiner com overflow.
	 */
	/*
	 * O seletor é longo porque o do WooCommerce é longo.
	 *
	 * Ele declara `.woocommerce div.product .woocommerce-tabs ul.tabs { overflow:
	 * hidden }`, e isso vale mais que `.woocommerce-tabs ul.tabs`. Com a regra
	 * curta, o `overflow-x: auto` era descartado e o computado ficava `hidden` —
	 * uma faixa que não cabe e não rola, com a terceira aba inalcançável. Pior que
	 * a quebra em duas linhas que isto veio substituir, e invisível para quem só
	 * lesse o CSS do tema.
	 *
	 * O `overflow-y` continua `hidden`, de propósito: só o eixo horizontal rola.
	 */
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		display: flex;
		flex-wrap: nowrap;
		column-gap: 1.5rem;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
	}

	.woocommerce-tabs ul.tabs::-webkit-scrollbar {
		display: none;
	}

	.woocommerce-tabs ul.tabs li {
		margin: 0 !important;
		padding: 0 !important;
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.woocommerce-tabs ul.tabs li a {
		display: flex;
		align-items: center;
		min-block-size: 44px;
		white-space: nowrap;
	}

	/*
	 * Os dois botões da peça saíam com larguras diferentes, porque cada um se
	 * ajustava ao próprio texto — "Solicitar orçamento" e "Falar no WhatsApp" não
	 * têm o mesmo comprimento. Empilhados num celular, a diferença lê como
	 * desalinho. Em largura total eles viram uma coluna só, e o alvo cresce junto.
	 */
	.magsil-botao-orcamento,
	.magsil-botao-whatsapp {
		display: block;
		inline-size: 100%;
		margin-inline: 0;
		padding-inline: 1rem;
		text-align: center;
	}

	/* O botão de enviar do orçamento segue a mesma regra, pelo mesmo motivo. */
	.magsil-orcamento button[type="submit"] {
		inline-size: 100%;
	}

	/*
	 * O botão do cartão de sugestão cabe numa linha só.
	 *
	 * Os cartões de "Produtos relacionados" ficam em duas colunas de 164px no
	 * celular, e "Solicitar orçamento" com a padding cheia não entrava: quebrava
	 * em duas linhas e o botão ia a 63px de altura, dentro de um cartão que é
	 * sugestão de passagem.
	 *
	 * Estreitar a padding lateral dá mais espaço ao rótulo. A altura mínima de
	 * toque não mora aqui: ela está sob `hover: none`, para valer também no
	 * tablet e no notebook com tela sensível, que passam desta largura.
	 */
	.magsil-botao-orcamento--compacto {
		padding-inline: 0.75rem;
	}

	/*
	 * A tabela de atributos tem coluna de rótulo em 40%, que no estreito deixa o
	 * valor com duas ou três palavras por linha — "Branco fosco, Preto fosco"
	 * quebrando em três. Rótulo em cima, valor embaixo, uma linha por atributo.
	 */
	.woocommerce-product-attributes th {
		inline-size: 45%;
		padding-inline-end: 1rem;
	}
}

/* ---------------------------------------------------------------------------
   16. Acessibilidade e movimento
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--terracota);
	outline-offset: 3px;
}

/*
 * Sobre carvão o terracota não serve como indicador de foco.
 *
 * #9C3F22 sobre #221D19 dá 2,5:1 — abaixo dos 3:1 que a WCAG 2.2 (1.4.11) exige
 * de indicador de foco, que é um limite de contraste de FORMA, não de texto, e
 * por isso não tem a folga que um texto grande teria. Sobre areia o mesmo anel
 * dá 6,4:1 e continua valendo; a troca vale só onde a superfície é escura.
 *
 * E é justamente onde há mais coisa focável: o cabeçalho, o rodapé inteiro com
 * a navegação secundária, a faixa de CTA com dois botões, e o painel de texto do
 * hero no celular — este último dentro do .wp-block-cover.
 */
.magsil-cabecalho :focus-visible,
.has-carvao-background-color :focus-visible,
.wp-block-cover :focus-visible {
	outline-color: var(--wp--preset--color--areia);
}

/*
 * O botão flutuante recebe o contorno por dentro.
 *
 * Ele é o único elemento do site que não sabe o que tem atrás: fica fixo na
 * tela e passa por cima de faixa clara e de faixa escura conforme a rolagem.
 * Qualquer cor de contorno desenhada fora dele acerta uma das duas e erra a
 * outra — areia some sobre a página areia, terracota some sobre o rodapé
 * carvão. Com deslocamento negativo, o contorno é desenhado sobre o próprio
 * botão, cuja cor nós controlamos.
 *
 * E é carvão, não areia: sobre o verde do WhatsApp o carvão dá 8,4:1 e o branco
 * daria 2,0:1 — o mesmo motivo pelo qual o símbolo branco só se sustenta pela
 * exceção de logotipo, que não vale para indicador de foco.
 */
.magsil-fab:focus-visible {
	outline: 2px solid var(--wp--preset--color--carvao);
	outline-offset: -5px;
}

.skip-link:focus {
	background-color: var(--wp--preset--color--areia);
	color: var(--wp--preset--color--carvao);
	padding: 0.75rem 1.25rem;
	z-index: 100000;
	text-decoration: underline;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	block-size: 1px;
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}