/**
 * Multdivision Storefront: complementos visuais do WooCommerce.
 *
 * Regra: apenas classes de nível superior dos blocos (.wp-block-woocommerce-*)
 * e variáveis do theme.json. Nunca seletores da estrutura interna dos blocos
 * de carrinho e checkout, que o WooCommerce pode mudar entre versões.
 * O visual detalhado do catálogo, produto, carrinho e checkout entra nas
 * etapas 4 e 5.
 */

/* Blocos de carrinho e checkout respiram dentro do layout do tema. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	margin-block: var(--wp--preset--spacing--50);
}

/* Checkout clássico (shortcode), mantido como reserva para gateways que o exijam. */
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* =========================================================================
 * Catálogo e produto (etapa 3).
 * Estrutura neutra e compartilhada. O visual de cada loja (cores, bordas,
 * selos, sombras) fica no tema filho, usando as mesmas classes mdc-*.
 * ========================================================================= */

/* ---------- Topo do catálogo ---------- */
.mdc-breadcrumbs {
	margin-bottom: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
}

.mdc-catalogo__topo {
	margin-bottom: var(--wp--preset--spacing--50);
}

.mdc-catalogo__titulo {
	margin-block: 0;
}

.mdc-catalogo__intro {
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
}

/* Descrição da categoria no fim ou na lateral: texto de apoio, em letra menor. */
.mdc-archive-intro--fim,
.mdc-archive-intro--lateral {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.65;
}

.mdc-archive-intro--fim {
	max-width: 52rem;
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
}

.mdc-archive-intro--lateral {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
}

:is(.mdc-archive-intro--fim, .mdc-archive-intro--lateral) :is(h2, h3, h4) {
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
}

:is(.mdc-archive-intro--fim, .mdc-archive-intro--lateral) p {
	margin: 0 0 var(--wp--preset--spacing--20);
}

/* Lateral no computador; no celular, a cópia de baixo (os filtros ficam recolhidos no topo). */
.mdc-archive-intro--so-celular {
	display: none;
}

@media (max-width: 781px) {
	.mdc-archive-intro--lateral {
		display: none;
	}

	.mdc-archive-intro--so-celular {
		display: block;
	}
}

/* Imagem da categoria: proporção definida no bloco (padrão 3/1). */
.mdc-term-image {
	position: relative;
	margin-block: 0 var(--wp--preset--spacing--50);
	overflow: hidden;
	aspect-ratio: var(--mdc-term-image-ratio, 3/1);
}

/* A imagem ocupa exatamente o quadro (posição absoluta: a altura não depende do tamanho do arquivo). */
.mdc-term-image__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100% !important; /* vence o height:auto do WordPress para imagens com atributos width/height */
	max-width: none;
	object-fit: cover;
}

/* Imagem quadrada ou vertical: inteira, sobre o fundo desfocado dela mesma. */
.mdc-term-image--inteira {
	background-color: var(--wp--preset--color--surface);
}

.mdc-term-image__fundo {
	position: absolute;
	inset: -24px;
	background-position: center;
	background-size: cover;
	filter: blur(24px) saturate(1.1);
	opacity: 0.85;
}

.mdc-term-image--inteira .mdc-term-image__img {
	object-fit: contain;
	filter: drop-shadow(0 12px 24px rgb(0 0 0 / 0.18));
}

/* ---------- Subcategorias (cartões) ---------- */
.mdc-term-children {
	margin-bottom: var(--wp--preset--spacing--50);
}

.mdc-term-children__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mdc-term-children:not(.has-images) .mdc-term-children__list {
	display: flex;
	flex-wrap: wrap;
}

.mdc-term-card__link {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.mdc-term-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--wp--preset--color--surface);
}

.mdc-term-card__name {
	font-weight: 600;
}

/* Celular: subcategorias em faixa com rolagem lateral, para não empurrar os produtos. */
@media (max-width: 599px) {
	.mdc-term-children.has-images .mdc-term-children__list {
		grid-auto-flow: column;
		grid-auto-columns: 7.5rem;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding-bottom: var(--wp--preset--spacing--20);
	}

	.mdc-term-card {
		scroll-snap-align: start;
	}

	.mdc-term-card__name {
		font-size: var(--wp--preset--font-size--small);
	}
}

.mdc-term-card__count {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

/* ---------- Colunas: filtros e produtos ---------- */
.mdc-catalogo__barra {
	margin-bottom: var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--20);
}

.mdc-catalogo__barra > * {
	margin: 0;
}

.mdc-catalogo__barra select {
	box-sizing: border-box;
	height: var(--wp--custom--field--height);
	min-height: var(--wp--custom--field--height);
	padding-inline: 0.75rem;
	font: inherit;
	color: inherit;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
}

/* Títulos dos filtros discretos; o filho define fonte e cor. */
.mdc-catalogo__filtros h3 {
	font-size: var(--wp--preset--font-size--small);
}

.mdc-catalogo__filtros :is(
	.wp-block-woocommerce-product-filter-taxonomy,
	.wp-block-woocommerce-product-filter-price,
	.wp-block-woocommerce-product-filter-status,
	.wp-block-woocommerce-product-filter-attribute,
	.wp-block-woocommerce-product-filter-rating
) {
	margin-top: var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
	/* No celular, o bloco de filtros vira um botão que abre a gaveta nativa do WooCommerce. */
	.mdc-catalogo__filtros {
		flex-basis: auto !important;
	}
}

/* ---------- Cartão de produto (catálogo, relacionados e vitrines) ---------- */
.mdc-produtos .wp-block-post-title {
	margin-block: var(--wp--preset--spacing--20) 0.25rem;
}

.mdc-produtos .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.mdc-produtos .wp-block-woocommerce-product-price {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Botão do cartão alinhado ao texto (o WooCommerce centraliza por padrão). */
.mdc-card__botao {
	justify-content: flex-start;
	align-items: flex-start;
	text-align: left;
}

/* ---------- Design System: cartão de produto (todas as coleções, inclusive a home) ----------
 * Itens da mesma linha com a mesma altura; título reserva 2 linhas, então preços
 * ficam alinhados; botão sempre no rodapé do cartão.
 */
.wp-block-woocommerce-product-collection .wc-block-product {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--card--gap);
}

.wp-block-woocommerce-product-collection .wc-block-product > * {
	margin-block: 0 !important;
}

.wp-block-woocommerce-product-collection .wc-block-product .wp-block-post-title {
	min-height: calc(var(--wp--custom--card--title-lines, 2) * 1.3em);
	line-height: 1.3;
}

.wp-block-woocommerce-product-collection .wc-block-product .wp-block-woocommerce-product-button {
	margin-top: auto !important;
}

/* Botão do cartão: compacto (40 px visíveis, 44 px de toque). */
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-button .wp-element-button {
	position: relative;
	min-height: var(--wp--custom--control--height-sm);
	padding: 0.5rem var(--wp--custom--control--padding-x-sm);
	line-height: 1.2;
}

.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-button .wp-element-button::after {
	content: "";
	position: absolute;
	inset: calc((var(--wp--custom--touch-target) - 100%) / -2) 0;
}

/* ---------- Design System: formulário de compra (marcação clássica estável) ---------- */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce .mdc-produto__compra .single_add_to_cart_button {
	min-height: var(--wp--custom--control--height-lg);
	padding-inline: var(--wp--custom--control--padding-x-lg);
}

.woocommerce .quantity .qty {
	box-sizing: border-box;
	width: 4.5rem;
	height: var(--wp--custom--field--height);
	min-height: var(--wp--custom--field--height);
	padding: 0.5rem;
	border: var(--wp--custom--field--border-width) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--field--radius);
	text-align: center;
	font: inherit;
}

.woocommerce div.product form.cart .variations select {
	box-sizing: border-box;
	height: var(--wp--custom--field--height);
	min-height: var(--wp--custom--field--height);
	padding: 0.5rem 2.25rem 0.5rem var(--wp--custom--field--padding-x);
	border: var(--wp--custom--field--border-width) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--field--radius);
	font: inherit;
	line-height: 1.4;
}

/* Quantidade e botão lado a lado, alinhados (não muda o formulário inteiro, para não
 * afetar campos que plugins de personalização inserem antes do botão). */
.woocommerce div.product form.cart .quantity {
	margin-right: var(--wp--custom--control--gap);
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--custom--control--gap);
}

/* ---------- Design System: formulários clássicos (Minha Conta, checkout clássico) ---------- */
.woocommerce form .form-row :is(input.input-text, select) {
	box-sizing: border-box;
	height: var(--wp--custom--field--height);
	min-height: var(--wp--custom--field--height);
	padding: 0.5rem var(--wp--custom--field--padding-x);
	border: var(--wp--custom--field--border-width) solid var(--wp--custom--field--border-color);
	border-radius: var(--wp--custom--field--radius);
	background-color: var(--wp--custom--field--background);
	font: inherit;
	transition: border-color var(--wp--custom--state--transition), box-shadow var(--wp--custom--state--transition);
}

.woocommerce form .form-row :is(input.input-text, select, textarea):hover {
	border-color: var(--wp--custom--field--border-color-hover);
}

.woocommerce form .form-row :is(input.input-text, select, textarea):focus {
	border-color: var(--wp--custom--field--border-color-focus);
	outline: none;
	box-shadow: var(--wp--custom--field--focus-ring);
}

.woocommerce form .form-row.woocommerce-invalid :is(.input-text, select) {
	border-color: var(--wp--custom--field--error-color);
}

/* Rótulo com caixa de seleção ("Lembrar de mim", aceite de termos): caixa e texto alinhados. */
.woocommerce form .form-row label:has(> input[type="checkbox"]) {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--touch-target);
	margin: 0;
}

.woocommerce form .form-row label > input[type="checkbox"] {
	flex: none;
	margin: 0;
}

/* ---------- Design System: mensagens clássicas do WooCommerce ---------- */
body:not(.mdc-avisos-nativos) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	--mdc-alerta: var(--wp--preset--color--info);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 0;
	border-left: 4px solid var(--mdc-alerta);
	border-radius: var(--wp--custom--radius--sm);
	background-color: color-mix(in srgb, var(--mdc-alerta) 8%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--contrast);
}

body:not(.mdc-avisos-nativos) .woocommerce-message {
	--mdc-alerta: var(--wp--preset--color--success);
}

body:not(.mdc-avisos-nativos) .woocommerce-error {
	--mdc-alerta: var(--wp--preset--color--error);
}

/* Campos de preço do filtro são estreitos: padding lateral menor para o valor não cortar. */
/* Classe repetida só para vencer a largura máxima de 60 px do WooCommerce sem usar classes internas. */
.mdc-catalogo__filtros.mdc-catalogo__filtros .wp-block-woocommerce-product-filter-price input[type="text"] {
	width: 6rem;
	max-width: none;
	padding-inline: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Design System: botões dos filtros ---------- */
.mdc-catalogo__filtros .wp-block-button__link {
	min-height: var(--wp--custom--control--height-sm);
}

/* Paginação com alvos de toque confortáveis. */
.mdc-paginacao {
	margin-top: var(--wp--preset--spacing--60);
	gap: var(--wp--preset--spacing--20);
}

.mdc-paginacao :where(a, .current) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--custom--touch-target);
	min-height: var(--wp--custom--touch-target);
	padding-inline: 0.5rem;
}

.mdc-sem-resultados {
	padding-block: var(--wp--preset--spacing--50);
}

/* ---------- Página de produto ---------- */
.mdc-produto {
	margin-bottom: var(--wp--preset--spacing--60);
}

.mdc-produto__titulo {
	margin-top: 0;
}

.mdc-produto__resumo > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

.mdc-produto__detalhes,
.mdc-produtos--relacionados {
	margin-top: var(--wp--preset--spacing--60);
}

/* Galeria clássica do WooCommerce ocupa toda a coluna (o padrão é 512 px / 48%). */
.woocommerce .mdc-produto__galeria .wp-block-woocommerce-product-image-gallery {
	max-width: none;
}

.mdc-produto__galeria .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

/* Galeria no celular: enquanto o carrossel do WooCommerce mede as fotos, a galeria chega a ficar com a
 * altura de todas as fotos somadas e empurra o resumo do produto para baixo (e depois ele sobe). O limite
 * de altura (foto quadrada + miniaturas) evita esse pulo; a galeria pronta fica abaixo do limite. */
@media (max-width: 781px) {
	.mdc-produto__galeria .woocommerce-product-gallery {
		max-height: calc(100vw * 1.4);
		overflow: hidden;
	}
}

/* ---------- Editor: quadro dos blocos mdc/* ---------- */
.mdc-block-placeholder {
	padding: var(--wp--preset--spacing--30);
	border: 1px dashed var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Prévia dos blocos mdc/* no editor: links não navegam ao clicar. */
.editor-styles-wrapper :is(.mdc-term-children, .mdc-term-image, .mdc-archive-intro) a {
	pointer-events: none;
}

/* ---------- Design System: avisos do WooCommerce em tema de blocos ----------
 * Em tema de blocos o WooCommerce mostra os avisos (produto adicionado, erro de login,
 * cupom aplicado, erro no checkout) como faixas com role="alert" e uma classe de
 * estado (is-success, is-error, is-info, is-warning). O visual segue os alertas do
 * Design System (mesmas cores e borda dos estilos de bloco "Alerta").
 * Seletores: contêiner público + papel ARIA + classe de estado, sem classes internas.
 * Com a classe mdc-avisos-nativos no body (Essentials → Aparência), os avisos ficam como o WooCommerce. */
body:not(.mdc-avisos-nativos) :is(.woocommerce-notices-wrapper, .woocommerce, .wp-block-woocommerce-store-notices, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is([role="alert"], [role="status"]):is(.is-success, .is-error, .is-info, .is-warning) {
	--mdc-alerta: var(--wp--preset--color--info);
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 0;
	border-left: 4px solid var(--mdc-alerta);
	border-radius: var(--wp--custom--radius--sm);
	background-color: color-mix(in srgb, var(--mdc-alerta) 8%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

body:not(.mdc-avisos-nativos) :is(.woocommerce-notices-wrapper, .woocommerce, .wp-block-woocommerce-store-notices, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is([role="alert"], [role="status"]).is-success {
	--mdc-alerta: var(--wp--preset--color--success);
}

body:not(.mdc-avisos-nativos) :is(.woocommerce-notices-wrapper, .woocommerce, .wp-block-woocommerce-store-notices, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is([role="alert"], [role="status"]).is-error {
	--mdc-alerta: var(--wp--preset--color--error);
}

body:not(.mdc-avisos-nativos) :is(.woocommerce-notices-wrapper, .woocommerce, .wp-block-woocommerce-store-notices, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is([role="alert"], [role="status"]).is-warning {
	--mdc-alerta: var(--wp--preset--color--warning);
}

body:not(.mdc-avisos-nativos) :is(.woocommerce-notices-wrapper, .woocommerce, .wp-block-woocommerce-store-notices, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is([role="alert"], [role="status"]):is(.is-success, .is-error, .is-info, .is-warning) > svg {
	flex: 0 0 auto;
	width: var(--wp--custom--icon--lg);
	height: var(--wp--custom--icon--lg);
	border-radius: 50%;
	background-color: var(--mdc-alerta);
	fill: var(--wp--preset--color--base);
}

/* Conteúdo do aviso: texto e link (por exemplo, "Ver carrinho") na mesma linha, centralizados na faixa,
 * com o mesmo espaço em cima e embaixo. Em telas estreitas o link desce para baixo do texto. */
body:not(.mdc-avisos-nativos) :is(.woocommerce-notices-wrapper, .woocommerce, .wp-block-woocommerce-store-notices, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is([role="alert"], [role="status"]):is(.is-success, .is-error, .is-info, .is-warning) {
	align-items: center;
	line-height: 1.5;
}

body:not(.mdc-avisos-nativos) :is(.woocommerce-notices-wrapper, .woocommerce, .wp-block-woocommerce-store-notices, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is([role="alert"], [role="status"]):is(.is-success, .is-error, .is-info, .is-warning) > div {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	min-width: 0;
	margin: 0;
	padding: 0;
}

body:not(.mdc-avisos-nativos) :is(.woocommerce-notices-wrapper, .woocommerce, .wp-block-woocommerce-store-notices, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is([role="alert"], [role="status"]):is(.is-success, .is-error, .is-info, .is-warning) > div > :is(p, ul, ol) {
	margin: 0;
}

/* Link de ação do WooCommerce ("Ver carrinho", "Desfazer"): link compacto, sem flutuar nem esticar a faixa. */
body:not(.mdc-avisos-nativos) :is(.woocommerce-notices-wrapper, .woocommerce, .wp-block-woocommerce-store-notices, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is([role="alert"], [role="status"]):is(.is-success, .is-error, .is-info, .is-warning) > div > a:is(.wc-forward, .button) {
	order: 2;
	display: inline-flex;
	flex: none;
	align-items: center;
	float: none;
	min-height: var(--wp--custom--control--height-sm);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}

body:not(.mdc-avisos-nativos) :is(.woocommerce-notices-wrapper, .woocommerce, .wp-block-woocommerce-store-notices, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is([role="alert"], [role="status"]):is(.is-success, .is-error, .is-info, .is-warning) > div > a:is(.wc-forward, .button):hover {
	color: var(--mdc-alerta);
}

/* Retorno de "Adicionar ao carrinho" (inc/woocommerce.php): texto e, abaixo, as ações. */
.mdc-aviso-texto {
	display: block;
	flex: 1 1 100%;
}

.mdc-aviso-acoes {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--custom--control--gap);
	margin-top: var(--wp--preset--spacing--30);
}

/* Ação principal do aviso: botão compacto (40 px com área de toque de 44 px). */
.mdc-aviso-acoes .mdc-aviso-acoes__finalizar {
	float: none;
	min-height: var(--wp--custom--control--height-sm);
	margin: 0;
	padding: 0 var(--wp--custom--control--padding-x-sm);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

/* "Ver carrinho" (link nativo do WooCommerce) e "Continuar comprando": links secundários. */
.mdc-aviso-acoes .wc-forward {
	float: none;
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--touch-target);
	opacity: 1;
}

.mdc-aviso-acoes__continuar {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--touch-target);
	color: var(--wp--preset--color--contrast);
}

/* =========================================================================
 * Sistema de formulários nos blocos do WooCommerce (Carrinho, Checkout, Minicarrinho)
 *
 * Os campos desses blocos são do WooCommerce (rótulo flutuante, validação,
 * autopreenchimento, gateways). Aqui mudam só a aparência: cor e raio da borda,
 * fundo, foco, erro, caixas de seleção, botões de opção e cartões de opção (frete e
 * pagamento). Altura, espaçamento interno e posição do rótulo não são tocados.
 *
 * Seletores: classes de nível superior dos blocos, elementos, atributos e :has().
 * O prefixo body:not(.mdc-campos-nativos) só dá a especificidade necessária sobre
 * os estilos do WooCommerce; uma página com a classe mdc-campos-nativos no body
 * volta ao visual nativo (saída de emergência, sem editar CSS).
 * ========================================================================= */

body:not(.mdc-campos-nativos) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .wp-block-woocommerce-mini-cart-contents) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="date"], textarea, select) {
	border-color: var(--wp--custom--field--border-color);
	border-radius: var(--wp--custom--field--radius);
	background-color: var(--wp--custom--field--background);
	transition: border-color var(--wp--custom--state--transition), box-shadow var(--wp--custom--state--transition);
}

body:not(.mdc-campos-nativos) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .wp-block-woocommerce-mini-cart-contents) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="date"], textarea, select):hover {
	border-color: var(--wp--custom--field--border-color-hover);
}

body:not(.mdc-campos-nativos) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .wp-block-woocommerce-mini-cart-contents) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="date"], textarea, select):focus {
	border-color: var(--wp--custom--field--border-color-focus);
	outline: none;
	box-shadow: var(--wp--custom--field--focus-ring);
}

body:not(.mdc-campos-nativos) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .wp-block-woocommerce-mini-cart-contents) :is(input, textarea, select)[aria-invalid="true"] {
	border-color: var(--wp--custom--field--error-color);
	box-shadow: inset 0 0 0 1px var(--wp--custom--field--error-color);
}

/* Caixas de seleção. */
body:not(.mdc-campos-nativos) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) input[type="checkbox"] {
	border-color: var(--wp--custom--field--border-color);
	border-radius: var(--wp--custom--field--control-radius);
	background-color: var(--wp--custom--field--background);
}

body:not(.mdc-campos-nativos) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) input[type="checkbox"]:checked {
	border-color: var(--wp--custom--field--control-checked);
	background-color: var(--wp--custom--field--control-checked);
}

body:not(.mdc-campos-nativos) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) input[type="checkbox"]:checked + svg {
	color: var(--wp--custom--field--control-mark);
	fill: var(--wp--custom--field--control-mark);
}

body:not(.mdc-campos-nativos) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(input[type="checkbox"], input[type="radio"]):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--custom--focus--color);
	outline-offset: var(--wp--custom--focus--offset);
}

/* Botões de opção. */
body:not(.mdc-campos-nativos) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) input[type="radio"] {
	border-color: var(--wp--custom--field--border-color);
	background-color: var(--wp--custom--field--background);
}

body:not(.mdc-campos-nativos) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) input[type="radio"]:checked {
	border-color: var(--wp--custom--field--control-checked);
}

body:not(.mdc-campos-nativos) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) input[type="radio"]:checked::before {
	background-color: var(--wp--custom--field--control-checked);
}

/* Cartões de opção (frete, retirada e pagamento): fundo claro, cantos do Design System
 * e destaque na cor da marca para a opção escolhida. */
body:not(.mdc-campos-nativos) .wp-block-woocommerce-checkout :is(div:has(> label > input[type="radio"]), div:has(> div > label > input[type="radio"])) {
	border-radius: var(--wp--custom--field--option-radius);
	background-color: var(--wp--custom--field--background);
}

body:not(.mdc-campos-nativos) .wp-block-woocommerce-checkout :is(div:has(> label > input[type="radio"]), div:has(> div > label > input[type="radio"]))::after {
	border-radius: var(--wp--custom--field--option-radius);
}

body:not(.mdc-campos-nativos) :is(.wp-block-woocommerce-checkout-shipping-methods-block, .wp-block-woocommerce-checkout-pickup-options-block) label:has(> input[type="radio"]:checked),
body:not(.mdc-campos-nativos) .wp-block-woocommerce-checkout-payment-block div:has(> label > input[type="radio"]:checked) {
	border-radius: var(--wp--custom--field--option-radius);
	background-color: var(--wp--custom--field--option-selected-background);
	box-shadow: inset 0 0 0 1.5px var(--wp--custom--field--control-checked);
}

/* Formulário clássico de rastreio de pedido ([woocommerce_order_tracking]): campos lado a
 * lado no desktop, empilhados no celular, com largura de leitura. */
.woocommerce form.track_order {
	max-width: var(--wp--custom--content--narrow);
}

@media (max-width: 600px) {
	.woocommerce form.track_order :is(.form-row-first, .form-row-last) {
		float: none;
		width: 100%;
	}
}

/* ---------- Grade das vitrines (colunas escolhidas no painel; inc/vitrines.php) ---------- */
/* Celular: 1 ou 2 colunas fixas. A partir de 600 px: até N colunas, cada uma com pelo menos 10rem (no
   tablet ou ao lado dos filtros, o número cai sozinho para não espremer os cartões). */
.mdc-grade .wp-block-woocommerce-product-template > li {
	width: auto;
	margin: 0;
}

.mdc-grade--com-colunas .wp-block-woocommerce-product-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(10rem, calc((100% - (var(--mdc-grade-colunas) - 1) * 1.25em) / var(--mdc-grade-colunas))), 1fr));
}

@media (max-width: 599px) {
	:is(.mdc-grade--cel-1, .mdc-grade--cel-2) .wp-block-woocommerce-product-template {
		display: grid;
		grid-template-columns: repeat(var(--mdc-grade-celular), minmax(0, 1fr));
	}
}

/* Home e relacionados com 2 colunas no celular: sem produto sozinho na última linha. */
@media (max-width: 599px) {
	:is(.mdc-grade--home, .mdc-grade--relacionados).mdc-grade--cel-2 .wp-block-woocommerce-product-template > li:last-child:nth-child(odd) {
		display: none;
	}
}

/* ---------- Cabeçalho da categoria: hero compacto (imagem de fundo e nome por cima) ---------- */
.mdc-term-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	min-height: clamp(8rem, 15vw, 11.5rem);
	margin-block: 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--dark);
	isolation: isolate;
}

.mdc-term-hero__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	width: 100%;
	height: 100% !important; /* vence o height:auto do WordPress para imagens com width/height */
	max-width: none;
	object-fit: cover;
}

/* Véu: a imagem fica opaca ao fundo e o nome sempre legível (contraste AA mesmo em fotos claras). */
.mdc-term-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--dark) 78%, transparent), color-mix(in srgb, var(--wp--preset--color--dark) 35%, transparent) 75%),
		color-mix(in srgb, var(--wp--preset--color--dark) 22%, transparent);
}

.mdc-term-hero__conteudo {
	max-width: 46rem;
}

.mdc-term-hero__titulo {
	margin: 0;
	color: var(--wp--preset--color--on-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.1;
	text-shadow: 0 1px 12px rgb(0 0 0 / 0.35);
	overflow-wrap: anywhere;
}

@media (max-width: 599px) {
	.mdc-term-hero {
		min-height: 7rem;
		padding: var(--wp--preset--spacing--30);
		border-radius: var(--wp--custom--radius--md);
	}

	.mdc-term-hero__titulo {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

/* Introdução da categoria logo abaixo do hero. */
.mdc-term-hero + .mdc-catalogo__topo {
	margin-block: 0 var(--wp--preset--spacing--40);
}