/* Veste o checkout em blocos do WooCommerce com o design do site.
 *
 * De onde vem: plugin/blocks/tipo-25/style.css e a conversao do
 * design/Checkout.dc.html feita pela esteira. Este arquivo porta as MESMAS
 * declaracoes para as classes que o WooCommerce de fato emite — nenhum valor foi
 * inventado aqui, cada regra tem origem numa regra do tipo-25.
 *
 * Por que nao usar o tipo-25 diretamente: o block.json dele declara que "campos
 * do formulario e itens do carrinho ficam literais (funcionais)" — e maquete
 * estatica. Usa-la como checkout real significaria reimplementar validacao,
 * envio, impostos, i18n e a integracao com o Stripe num formulario de pagamento.
 * O BUILD-SPEC oferece os dois caminhos e este e o primeiro: manter os blocos
 * Woo e vesti-los.
 *
 * So tokens, nenhum valor cru de cor — mesma regra do tipo-25. Os fallbacks
 * existem para o checkout nao ficar sem forma se um preset faltar no theme.json.
 * Tons translucidos usam color-mix() sobre o token solido mais proximo.
 *
 * ESPECIFICIDADE: o proprio WooCommerce carrega ~166 KB de checkout.css, quase
 * todo em seletor de classe unica. As regras aqui usam duas classes ou o escopo
 * `.wc-block-checkout` justamente para ganhar sem `!important` — se alguma nao
 * aplicar, o conserto e subir a especificidade, nao adicionar `!important`.
 *
 * Carregado so no checkout, por dicarvalho_assets() em functions.php.
 */

/* ---- cabecalho da pagina (theme/templates/page-checkout.html) ------------- */
/* design/Checkout.dc.html: sobretitulo em maiusculas douradas e um H1 grande em
 * serifada. O WooCommerce nao tem nada disso — o template dele e sem titulo.
 *
 * O sobretitulo do prototipo diz "COMPRA SEGURA · ENVÍO ASEGURADO". A segunda
 * metade NAO entra: "envio asegurado" e uma das tres promessas comerciais
 * retiradas na Fase A por rastrearem ao prototipo e nao a cliente. "Compra
 * segura" fica porque e verificavel — o checkout roda em HTTPS e o pagamento
 * passa pelo Stripe. Se a cliente confirmar o que oferece de envio, a frase
 * volta inteira, e o lugar de editar e Aparencia -> Editor. */
/* O respiro do header fica no MAIN e nao no cabecalho: o bloco de avisos do
   WooCommerce e irmao do cabecalho e vem ANTES dele, entao um padding aplicado
   so ao cabecalho deixava "X se ha añadido a tu carrito" por cima da navegacao.
   No main, tudo o que a pagina contem desce junto. */
.dc-checkout {
	padding-top: calc(var(--dc-altura-do-header, 131px) + 3.5rem);
}

.dc-checkout__cabecalho {
	padding: 0 3rem;
}

.dc-checkout__eyebrow {
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--acento, #c9a86a);
	font-family: var(--wp--preset--font-family--base, "Instrument Sans", sans-serif);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.dc-checkout__titulo {
	margin: 0;
	color: var(--wp--preset--color--contraste, #ede6d8);
	font-family: var(--wp--preset--font-family--familia-2, "Cormorant Garamond", serif);
	font-weight: 300;
	font-size: clamp(42px, 6vw, 86px);
	line-height: 1.04;
}

@media (max-width: 1120px) {
	.dc-checkout {
		padding-top: calc(var(--dc-altura-do-header, 97px) + 2.5rem);
	}

	.dc-checkout__cabecalho {
		padding: 0 20px;
	}
}

/* ---- layout: formulario a esquerda, resumo a direita, resumo sticky ------- */
/* tipo-25: grid 1.1fr .9fr, gap 4rem, padding 1.875rem 3rem 6.25rem */

/* O padding da pagina vai no `.wp-block-woocommerce-checkout`, o no EXTERNO, e
 * NAO em `.wc-block-checkout`.
 *
 * Motivo, que so apareceu medindo a cadeia de ancestrais: a classe
 * `.wc-block-checkout` esta em DOIS nos — o wrapper externo (1440px) e o grid
 * interno (`wc-block-components-sidebar-layout wc-block-checkout`, 1344px). Uma
 * regra escrita para `.wc-block-checkout` recuava 48px nos DOIS, um dentro do
 * outro: o conteudo do grid sobrava 1248 em vez de 1344, as colunas saiam
 * 651/533 no lugar de 704/576, e o cartao comecava em x=96 enquanto o titulo da
 * pagina comecava em 48 — o desalinhamento entre o H1 e a moldura do formulario.
 *
 * `box-sizing` e o que impede o scroll horizontal: sem ele o padding soma POR
 * FORA e a pagina mede 1536 num viewport de 1440. */
.wp-block-woocommerce-checkout {
	box-sizing: border-box;
	padding: 1.875rem 3rem 6.25rem;
}

/* O no interno carrega a mesma classe e nao pode recuar de novo. */
.wc-block-checkout.wc-block-components-sidebar-layout {
	padding: 0;
}

/* Grid, e nao o flex do WooCommerce. Medido no prototipo a 1440px:
 * `grid-template-columns: 704px 576px; gap: 64px` — 1344 exatos, que e a
 * largura util depois dos 3rem de padding de cada lado.
 *
 * Com o flex do Woo as colunas saiam 636 e 548: 96px sumiam entre as duas,
 * porque `.wc-block-components-sidebar-layout .wc-block-components-main` do
 * plugin declara `width: 65%` e briga com o `flex-basis: 0%` que punhamos aqui.
 * Em vez de disputar duas propriedades que se anulam, a grade fixa a proporcao
 * de uma vez: 704/576 = 1.2222, escrito como fracao para acompanhar qualquer
 * largura sem recalcular. */
.wc-block-checkout .wc-block-components-sidebar-layout {
	display: grid;
	grid-template-columns: 704fr 576fr;
	gap: 4rem;
	align-items: start;
}

/* O plugin poe `width: 65%` / `35%` nas colunas. Dentro do grid isso volta a
 * competir com a fracao — zerar deixa a grade mandar sozinha. */
.wc-block-checkout .wc-block-checkout__main,
.wc-block-checkout .wc-block-checkout__sidebar {
	width: auto;
	max-width: none;
	min-width: 0;
}

.wc-block-checkout .wc-block-checkout__main {
	padding-right: 0;
}

/* `flex: 0.9 1 0%` vivia aqui e saiu junto com o flex container: dentro de um
 * grid ele nao faz nada, e declaracao inerte confunde quem for mexer depois.
 * O sticky continua — grid nao atrapalha, e o `align-items: start` do container
 * e o que faz a coluna ter altura propria para grudar. */
.wc-block-checkout .wc-block-checkout__sidebar {
	position: sticky;
	top: 7.5rem;
}

/* ---- a coluna do formulario e um cartao ---------------------------------- */
/* tipo-25__form */

.wc-block-checkout .wc-block-checkout__form {
	background: var(--wp--preset--color--superficie, #14110d);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--acento, #c9a86a) 25%, transparent);
	padding: 2.75rem;
}

/* ---- titulos de etapa ---------------------------------------------------- */
/* tipo-25__heading. O Woo tem um titulo por etapa; o design tem um so, entao o
   tratamento e o mesmo em todos — tipografia de display, sem peso. */

.wc-block-checkout .wc-block-components-checkout-step__title {
	margin: 0 0 1.75rem;
	font-family: var(--wp--preset--font-family--display, 'Cormorant Garamond', serif);
	font-weight: 400;
	font-size: 2.125rem;
	line-height: 1.1;
	color: var(--wp--preset--color--contraste, #ede6d8);
	text-transform: none;
	letter-spacing: normal;
}

.wc-block-checkout .wc-block-components-checkout-step__description {
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 55%, transparent);
	font-size: .8125rem;
}

/* ---- campos -------------------------------------------------------------- */
/* tipo-25__input / __select / __textarea */

/* ATENCAO ao nome: o select do Woo e `wc-blockS-components-select__select`, com
 * S em "blocks" — todo o resto da familia e `wc-block-components-*`. A primeira
 * versao deste arquivo escreveu sem o S e os dois selects (Pais e Provincia)
 * ficaram sem estilo nenhum. Confirmado no DOM em 2026-07-30. */
/* O `__address_2-hidden-input` e o campo "Apartamento, habitacion, escalera"
 * que so aparece depois do clique em "+ Añadir". Ele NAO vive dentro de
 * `.wc-block-components-text-input` como os irmaos, entao nao herdava nada e
 * ficava branco pelo padrao do navegador — invisivel ate alguem abrir o campo,
 * que e o pior momento para descobrir. */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-address-form__address_2-hidden-input,
.wc-block-checkout .wc-blocks-components-select__select,
.wc-block-checkout .wc-block-components-textarea {
	width: 100%;
	background: var(--wp--preset--color--base, #0b0a08);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 20%, transparent);
	border-radius: 0;
	color: var(--wp--preset--color--contraste, #ede6d8);
	font-family: var(--wp--preset--font-family--body, 'Instrument Sans', sans-serif);
	font-size: .875rem;
	font-weight: 400;
	/* 15px 16px, medido no prototipo. Os presets de spacing nao valem 15/16px,
	 * e o fallback nunca entrava — o campo saia com 16px 12px. */
	padding: 15px 16px;
}

/* O MESMO fundo e a MESMA cor de texto da regra acima, repetidos com o seletor
 * de atributo. Não é redundância: o WooCommerce 10.9.4 pinta os campos de
 * branco em `blocks/checkout.css` com
 *
 *   .wc-block-components-form .wc-block-components-text-input input[type="text"]
 *
 * — especificidade (0,3,1), que ganha da regra acima (0,2,1). O sintoma era a
 * metade esquerda do checkout com caixas brancas e placeholder ilegível, e
 * apenas os dois <select> (País e Provincia) escuros, porque a regra deles é
 * outra família e o Woo não a sobrescreve.
 *
 * Só background e color são repetidos: largura, borda, padding e tipografia da
 * regra acima continuam valendo, e duplicá-los criaria dois lugares para mudar.
 *
 * Se um dia os campos voltarem a ficar brancos, o suspeito é este par de
 * especificidades depois de um update do WooCommerce — meça a regra vencedora
 * antes de mexer em qualquer outra coisa. */
.wc-block-checkout .wc-block-components-text-input input[type="text"],
.wc-block-checkout .wc-block-components-text-input input[type="email"],
.wc-block-checkout .wc-block-components-text-input input[type="tel"],
.wc-block-checkout .wc-block-components-text-input input[type="number"],
.wc-block-checkout .wc-block-components-text-input input[type="url"],
.wc-block-checkout .wc-block-components-text-input input[type="password"] {
	background: var(--wp--preset--color--base, #0b0a08);
	color: var(--wp--preset--color--contraste, #ede6d8);
	/* A mesma regra do Woo que pintava de branco tambem impoe `font-size: 16px`
	 * e `padding: 16px 12px`. O prototipo mede 14px e 15px 16px, e a regra de
	 * cima perdia nos tres — nao so na cor. */
	font-size: .875rem;
	padding: 15px 16px;
}

.wc-block-checkout .wc-blocks-components-select__select {
	appearance: none;
	cursor: pointer;
}

/* O select tem SEMPRE um valor, entao o rotulo flutuante do Woo esta sempre na
 * posicao encolhida — `absolute; top:6px` — enquanto o padding uniforme do
 * design comeca o valor em 14px. Os dois se sobrepunham: "Pais/Region" caia em
 * cima de "Espana". Visto na tela em 2026-07-30.
 *
 * O input de texto nao tem esse problema: sem valor, o rotulo ocupa a linha do
 * placeholder, e so encolhe quando o campo ganha conteudo. Por isso a correcao
 * e so aqui.
 *
 * O rotulo assume o mesmo tratamento mudo dos outros rotulos do design —
 * minusculo, versalete, espacado — e o valor desce para caber embaixo. */
.wc-block-checkout .wc-blocks-components-select__container label {
	top: .5rem;
	left: var(--wp--preset--spacing--20, 1rem);
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 50%, transparent);
}

.wc-block-checkout .wc-blocks-components-select__select {
	padding-top: 1.625rem;
	padding-bottom: .625rem;
	/* O Woo fixa `height: 50px` no select. Com o padding de cima aberto para o
	 * rotulo, 50px cortavam o valor pela metade — "Espana" saia sem a parte de
	 * baixo. Altura automatica deixa a caixa crescer o quanto o conteudo pedir;
	 * o min-height mantem os selects alinhados com os inputs de texto ao lado,
	 * que tem 50px. */
	height: auto;
	min-height: 3.5rem;
}

/* Cinco linhas. O WooCommerce entrega o campo com `rows="2"` — 71px medidos —, e
   duas linhas para uma instrução de entrega («llamar antes, el portal es el del
   fondo…») obrigam a rolar dentro da caixa enquanto se escreve.

   O `rows` é atributo do React e mudá-lo por JS voltaria atrás a cada redesenho;
   altura é assunto de CSS de qualquer forma. A conta: 5 linhas de texto + os
   30px de padding + 2px de borda (o campo é `border-box`). A primeira
   declaração é o valor em px para quem não tem a unidade `lh`; a segunda, a
   mesma altura escrita em linhas, que acompanha qualquer mudança de tipografia.

   `resize: vertical` fica: quem escrever mais do que cabe pode puxar. */
.wc-block-checkout .wc-block-components-textarea {
	resize: vertical;
	min-height: 130px;
	min-height: calc(5lh + 32px);
}

/* O label flutuante do Woo nao existe no design, onde o campo tem placeholder.
   Mantido, mas em tom mudo, para nao perder acessibilidade nem duplicar o texto. */
.wc-block-checkout .wc-block-components-text-input label,
.wc-block-checkout .wc-block-components-select label {
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 55%, transparent);
	font-family: var(--wp--preset--font-family--body, 'Instrument Sans', sans-serif);
	font-size: .8125rem;
}

.wc-block-checkout .wc-block-components-text-input.is-active label {
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* ---- formas de pagamento ------------------------------------------------- */
/* tipo-25__payment, __payment-label, __payment-option(+--activo).
   No Woo cada forma e um radio-control__option.

   No protótipo as formas são CHIPS numa linha — «Tarjeta · Bizum ·
   Transferencia» —, não caixas empilhadas de largura inteira. O que muda de
   verdade é isto:

   1. o container vira linha que quebra (`row` + `wrap`);
   2. cada opção vira `display: contents`, para o rótulo (o chip, largura do
      texto) e a descrição da forma escolhida (linha inteira, embaixo) virarem
      itens irmãos da mesma linha em vez de ficarem um dentro do outro. Sem
      isso, a descrição do BACS — «Te enviaremos los datos…» — esticaria o chip
      dela até a largura do cartão.

   ATENÇÃO para quando o Stripe entrar: com mais de uma forma habilitada, vale
   conferir na tela se o WooCommerce esconde a descrição das opções NÃO
   escolhidas. Hoje há uma só (BACS) e a questão não se coloca. */

.wc-block-checkout .wc-block-components-radio-control {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: .625rem;
}

.wc-block-checkout .wc-block-components-radio-control-accordion-option {
	display: contents;
}

/* Duas molduras que o WooCommerce desenha em PSEUDO-ELEMENTO e que sobram no
   desenho de chips:
     .wc-block-components-radio-control::after                    — as laterais
       da caixa que envolve a lista inteira de formas (o modo
       `--highlight-checked`). Com os chips soltos, ela virava uma linha fina
       encostada na margem direita do cartão.
     .wc-block-components-radio-control-accordion-option::after   — o realce da
       opção escolhida. A opção agora é `display: contents`, e o pseudo de um
       `display: contents` passa a ser filho do AVÔ: o realce descolava do chip
       e ia parar na borda do grupo.
   Os dois só se veem medindo `border-right`: `border-top` neles é 0, e uma
   varredura que olhe só o topo — como a primeira que fizemos — não os acha. */
.wc-block-checkout .wc-block-components-radio-control::after,
.wc-block-checkout .wc-block-components-radio-control-accordion-option::after {
	display: none;
}

/* Três classes: o WooCommerce zera a borda do rótulo em
   `.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option`,
   e uma regra de duas classes empatava e perdia por ordem — o chip saía sem
   contorno, só com a cor do texto. Medido no DOM em 2026-07-31. */
.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option {
	position: relative;
	width: auto;
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 25%, transparent);
	border-radius: 0;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 60%, transparent);
	padding: .625rem var(--wp--preset--spacing--20, 1rem);
}

/* A descrição da forma escolhida: linha inteira, abaixo dos chips, em tom
   mudo. Ela não está no protótipo, mas o protótipo também não vende — e
   transferência bancária sem a frase «te enviaremos los datos» deixa o
   comprador sem saber o que acontece depois de confirmar. */
.wc-block-checkout .wc-block-components-radio-control-accordion-content {
	flex: 0 0 100%;
	margin: 0;
	padding: 0;
	font-size: .8125rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 55%, transparent);
}

.wc-block-checkout .wc-block-components-radio-control-accordion-content:empty {
	display: none;
}

/* O modificador do selecionado e `__option-checked` (hifen simples), nao
 * `__option--checked`. Escrito errado na primeira versao — a opcao selecionada
 * ficava sem a borda de acento. */
.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option-checked,
.wc-block-checkout .wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: color-mix(in srgb, var(--wp--preset--color--acento, #c9a86a) 50%, transparent);
	color: var(--wp--preset--color--acento, #c9a86a);
}

.wc-block-checkout .wc-block-components-radio-control__label {
	font-size: var(--wp--preset--font-size--small, .6875rem);
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* ---- a seção «Pago» ------------------------------------------------------ */
/* No protótipo o pagamento é um bloco à parte dentro do mesmo cartão: linha
   fina em cima, o rótulo «PAGO» em versalete miúdo e os chips embaixo.

   O título vem do atributo do bloco (bin/checkout-como-prototipo.php grava
   «Pago» ali). Ele NÃO herda o tratamento dos outros títulos de etapa — o
   «Facturación y envío» é serifada de 34px, este é rótulo de 11px —, por isso a
   regra específica. */
.wc-block-checkout .wc-block-checkout__payment-method {
	margin-top: 1.75rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 14%, transparent);
	padding-top: 1.375rem;
}

.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-checkout-step__title {
	margin: 0 0 .75rem;
	font-family: var(--wp--preset--font-family--base, "Instrument Sans", sans-serif);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 55%, transparent);
}

/* ---- botao de finalizar -------------------------------------------------- */
/* tipo-25__submit */

.wc-block-checkout .wc-block-components-checkout-place-order-button {
	cursor: pointer;
	width: 100%;
	background: var(--wp--preset--color--acento, #c9a86a);
	border: none;
	border-radius: 0;
	color: var(--wp--preset--color--base, #0b0a08);
	font-family: var(--wp--preset--font-family--body, 'Instrument Sans', sans-serif);
	font-weight: 600;
	font-size: .75rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	padding: var(--wp--preset--spacing--20, 1.125rem) 0;
}

.wc-block-checkout .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
	background: var(--wp--preset--color--contraste, #ede6d8);
}

/* ---- aviso de termos ----------------------------------------------------- */
/* tipo-25__confirm — no design e a linha de reforco sob o botao. */

.wc-block-checkout .wc-block-checkout__terms {
	margin: var(--wp--preset--spacing--20, 1rem) 0 0;
	font-size: .8125rem;
	color: var(--wp--preset--color--acento, #c9a86a);
	text-align: center;
}

.wc-block-checkout .wc-block-checkout__terms a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* ---- resumo do pedido ---------------------------------------------------- */
/* tipo-25__summary / __items */

/* O wrapper do resumo e `.wp-block-woocommerce-checkout-order-summary-block`, e
 * nao `.wc-block-components-checkout-order-summary`, que NAO EXISTE — a primeira
 * versao deste arquivo mirou nessa classe inventada e por isso a caixa do resumo
 * continuava com borda. Confirmado no DOM em 2026-07-30. */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block {
	background: transparent;
	border: none;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	padding: 0;
}

.wc-block-checkout .wc-block-components-checkout-order-summary__title {
	padding: 0;
}

.wc-block-checkout .wc-block-components-checkout-order-summary__title-text {
	font-size: .75rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 55%, transparent);
}

.wc-block-checkout .wc-block-components-order-summary__content {
	display: flex;
	flex-direction: column;
}

/* ---- item do resumo ------------------------------------------------------ */
/* tipo-25__item e filhos. O design tem 4 colunas — imagem, texto, preco e o
   botao de remover. O checkout do Woo NAO emite botao de remover (o
   summary-cart-items-block e read-only e nao tem atributo para isso), entao a
   quarta coluna nao existe aqui e o grid vai a 3. O botao de remover e o item 3
   do one-page checkout, ainda em aberto — ver o spec da Fase A, adendo. */

.wc-block-checkout .wc-block-components-order-summary-item {
	display: grid;
	grid-template-columns: 110px 1fr auto;
	align-items: center;
	gap: var(--wp--preset--spacing--70, 1.5rem);
	padding: var(--wp--preset--spacing--70, 1.5rem) 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 14%, transparent);
}

.wc-block-checkout .wc-block-components-order-summary-item__image {
	width: 110px;
	height: 110px;
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--superficie-2, #161310);
}

/* O `max-width: none` e o que faz a miniatura preencher a caixa. O WooCommerce
 * declara `width: 48px; max-width: 48px` na propria miniatura, e o nosso
 * `width: 100%` sozinho nao adiantava: o teto de 48px continuava valendo e a
 * obra saia como uma tira estreita de 48px dentro de uma caixa de 110px, com
 * duas faixas escuras nas laterais.
 *
 * Sintoma parecido, causa diferente da borda do aviso: la o problema era
 * especificidade, aqui e uma propriedade que simplesmente nao tinhamos
 * declarado. */
.wc-block-checkout .wc-block-components-order-summary-item__image img {
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

/* A contagem de quantidade do Woo nao aparece no design, e nao teria o que
   mostrar: cada obra e peca unica, gravada com sold_individually, entao a
   quantidade e sempre 1. Escondida, nao removida — se algum dia entrar produto
   com estoque, basta apagar esta regra. */
.wc-block-checkout .wc-block-components-order-summary-item__quantity {
	display: none;
}

.wc-block-checkout .wc-block-components-order-summary-item .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--display, 'Cormorant Garamond', serif);
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--wp--preset--color--contraste, #ede6d8);
	text-decoration: none;
}

.wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata {
	margin-top: var(--wp--preset--spacing--10, .3125rem);
	font-size: .75rem;
	letter-spacing: .08em;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 50%, transparent);
}

.wc-block-checkout .wc-block-components-order-summary-item__total-price {
	font-family: var(--wp--preset--font-family--display, 'Cormorant Garamond', serif);
	font-size: 1.375rem;
	color: var(--wp--preset--color--acento, #c9a86a);
}

/* ---- linhas de total ---------------------------------------------------- */
/* tipo-25__line, __line-label, __line-value, e as variantes --subtotal,
   --envio e --total. No Woo cada linha e um totals-item, e o total e o
   totals-footer-item. */

.wc-block-checkout .wc-block-components-totals-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: .75rem 0;
}

.wc-block-checkout .wc-block-components-totals-item__label {
	font-size: .75rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 55%, transparent);
}

.wc-block-checkout .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--display, 'Cormorant Garamond', serif);
	font-size: 1.375rem;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 80%, transparent);
}

/* Envio: no design a linha do envio tem borda embaixo e valor em corpo de texto,
   nao em display — e um dado operacional, nao um numero de destaque. */
.wc-block-checkout .wc-block-components-totals-shipping {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 14%, transparent);
}

.wc-block-checkout .wc-block-components-totals-shipping .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--body, 'Instrument Sans', sans-serif);
	font-size: .8125rem;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 70%, transparent);
}

/* Total: o numero grande em acento, com o rotulo mais espacado. */
.wc-block-checkout .wc-block-components-totals-footer-item {
	padding: var(--wp--preset--spacing--20, 1.125rem) 0 0;
	border-top: none;
}

.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	letter-spacing: .24em;
}

.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--wp--preset--font-size--display-small, 2.75rem);
	line-height: 1.05;
	color: var(--wp--preset--color--acento, #c9a86a);
}

/* ---- nota de rodape do resumo ------------------------------------------- */
/* tipo-25__nota */

.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__description {
	margin: var(--wp--preset--spacing--20, .875rem) 0 0;
	font-size: .75rem;
	line-height: 1.7;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 45%, transparent);
}

/* ---- correcoes vistas no navegador em 2026-07-30 ------------------------- */
/* Tudo abaixo saiu de olhar a tela renderizada, nao do CSS do design: sao
 * elementos que o WooCommerce emite e que o design nao previu, ou cujo seletor
 * real so aparece no DOM montado pelo React. */

/* O Woo imprime o preco DUAS vezes por item: o unitario
 * (__individual-prices) e o total da linha (__total-price). Com quantidade
 * sempre 1 — toda obra e sold_individually — os dois sao o mesmo numero, e o
 * design mostra um so. */
.wc-block-checkout .wc-block-components-order-summary-item__individual-prices {
	display: none;
}

/* Os separadores do resumo. O Woo poe borda em cima de cada grupo de totais e
 * uma caixa em volta do bloco inteiro; o design tem borda embaixo de cada ITEM
 * e uma unica linha sob o envio. */
.wc-block-checkout .wc-block-components-totals-wrapper {
	border-top: none;
	padding-top: 0;
}

.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
	border-top: none;
}

/* Avisos da loja: "se ha anadido a tu carrito", erros de pagamento, avisos de
 * cupom. Ate 2026-07-30 este arquivo tinha a SUA PROPRIA copia de
 * background/border/font-size para `.wc-block-components-notice-banner`, sem
 * escopo — duplicando, com valores diferentes (fundo `superficie`, borda de
 * 1px `#c0392b`, 13px), a regra generica que theme/style.css ja define pra
 * esse mesmo seletor (fundo creme a 7%, borda esquerda `#c4634f`, 14px). Duas
 * folhas resolvendo o mesmo estado de erro é o tipo de duplicação que gera
 * divergência — o mesmo aviso tinha desenho diferente na ficha da obra e no
 * checkout. A fonte da verdade agora é so theme/style.css: sem regra propria
 * aqui, o aviso do checkout herda o mesmo fundo/borda/tipografia que qualquer
 * outra pagina. O que sobra abaixo e so o que e mesmo exclusivo do checkout —
 * o icone (que theme/style.css esconde nas outras paginas) e a cor do link
 * dentro do aviso —, por isso escopado sob `.wc-block-checkout`. */
.wc-block-checkout .wc-block-components-notice-banner > svg {
	fill: var(--wp--preset--color--acento, #c9a86a);
	background: transparent;
}

.wc-block-checkout .wc-block-components-notice-banner.is-error > svg {
	fill: #c4634f;
}

.wc-block-checkout .wc-block-components-notice-banner a {
	color: var(--wp--preset--color--acento, #c9a86a);
}

/* Caixas de selecao: "usar la misma direccion", "anade una nota". O default do
 * navegador e branco com check azul — o unico elemento de sistema na tela. */
.wc-block-checkout .wc-block-components-checkbox__input[type="checkbox"] {
	appearance: none;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0 .5rem 0 0;
	background: var(--wp--preset--color--base, #0b0a08);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 30%, transparent);
	border-radius: 0;
	cursor: pointer;
}

.wc-block-checkout .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--wp--preset--color--acento, #c9a86a);
	border-color: var(--wp--preset--color--acento, #c9a86a);
}

.wc-block-checkout .wc-block-components-checkbox__mark {
	fill: var(--wp--preset--color--base, #0b0a08);
}

.wc-block-checkout .wc-block-components-checkbox__label {
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 65%, transparent);
	font-size: .8125rem;
}

/* O circulo do radio. O Woo o posiciona em `absolute; top:16px; left:16px` e
 * conta com um padding-left grande na opcao para abrir espaco; o padding do
 * design e 10px 14px, entao o circulo caia EM CIMA do texto — visivel na tela
 * como um ponto branco sobre "Envio a convenir".
 *
 * O design nao tem circulo: a opcao ativa se marca por borda e cor (ver
 * tipo-25__payment-option--activo). Entao o input fica invisivel — mas NAO
 * `display:none`, que o tiraria da ordem de tabulacao e do leitor de tela.
 * Ele passa a cobrir a opcao inteira com opacity 0, o que de quebra torna todo
 * o retangulo clicavel, e o anel de foco migra para a opcao. */
.wc-block-checkout .wc-block-components-radio-control__input {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.wc-block-checkout .wc-block-components-radio-control__option:has(:focus-visible) {
	outline: 2px solid var(--wp--preset--color--acento, #c9a86a);
	outline-offset: 2px;
}

/* Cupom. O painel NÃO aparece hoje: a decisão comercial foi tomada em
 * 2026-07-31 e os cupons estão desligados na opção `woocommerce_enable_coupons`
 * (ver bin/checkout-como-prototipo.php), que é o que o protótipo pede.
 *
 * A regra fica porque reativar cupom é um clique no admin, não uma mudança de
 * código — no dia em que a cliente tiver campanha, o painel volta já vestido, em
 * tom mudo para não competir com o total. */
.wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button {
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 55%, transparent);
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ---- o carrinho esvaziando COM a pagina ja aberta ------------------------ */
/* Descoberto em 2026-07-30, testando a abordagem de por o bloco de carrinho
 * dentro do checkout: quando o carrinho fica vazio SEM recarregar a pagina, quem
 * decide o que aparece nao e o nosso filtro render_block — ele ja rodou, no
 * carregamento, quando ainda havia item. Quem assume e o proprio bloco de
 * checkout, com um estado vazio dele: icone generico de carrinho, "Tu carrito
 * esta actualmente vacio" e um botao cinza de sistema.
 *
 * Ou seja: o dicarvalho/tipo-26 cobre o caso servidor (entrar no /checkout/ com
 * o carrinho ja vazio) e ESTE bloco cobre o caso cliente (o carrinho esvaziar
 * com a pagina aberta — outra aba, sessao expirando, ou um botao de remover, se
 * o item 3 do one-page checkout for feito um dia).
 *
 * Sao duas telas para o mesmo estado, e isso e uma duplicacao consciente: a do
 * tipo-26 e editavel pela cliente e fiel ao design; esta e do WooCommerce e so
 * da para vestir. As regras abaixo aproximam as duas — mesma tipografia de
 * display em italico, mesmo botao em acento (ver plugin/blocks/tipo-26/style.css). */

.wc-block-checkout-empty {
	padding: 2.5rem 3rem 7.5rem;
	text-align: left;
}

/* O icone de carrinho generico nao existe no design.
 *
 * O seletor precisa das DUAS classes: o Woo escreve
 * `.wc-block-checkout-empty .wc-block-checkout-empty__image` (0,2,0), e uma
 * versao anterior desta regra usava `.wc-block-checkout-empty > svg` (0,1,1),
 * que perde. Igualando a especificidade, esta folha ganha por ordem — ela
 * carrega depois. Medido no navegador em 2026-07-30, comparando as duas regras
 * que casavam com o elemento. */
.wc-block-checkout-empty .wc-block-checkout-empty__image {
	display: none;
}

.wc-block-checkout-empty__title {
	margin: 0 0 .5rem;
	font-family: var(--wp--preset--font-family--display, 'Cormorant Garamond', serif);
	font-size: 1.875rem;
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--contraste, #ede6d8);
	opacity: .6;
}

.wc-block-checkout-empty__description {
	margin: 0 0 1.875rem;
	font-size: .8125rem;
	line-height: 1.7;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 45%, transparent);
}

.wc-block-checkout-empty .wp-block-button__link,
.wc-block-checkout-empty a.wc-block-components-button {
	display: inline-block;
	padding: var(--wp--preset--spacing--20, 1.0625rem) 2.375rem;
	background: var(--wp--preset--color--acento, #c9a86a);
	border: none;
	border-radius: 0;
	color: var(--wp--preset--color--base, #0b0a08);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
}

/* ---- responsivo --------------------------------------------------------- */
/* tipo-25: no mobile o grid vai a 1 coluna e o resumo perde o sticky. */

/* Entre 783 e 1119 o header e o titulo ja recuam 20px (theme/style.css). Sem
   esta faixa o checkout continuava em 48 e o cartao saia desalinhado do H1. */
@media (max-width: 1120px) {
	.wp-block-woocommerce-checkout {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}

@media (max-width: 782px) {
	.wp-block-woocommerce-checkout {
		padding: 1.875rem 1.25rem 3.75rem;
	}

	/* Os campos VOLTAM a 16px no telefone.
	 *
	 * Mais acima este arquivo sobrescreve, de proposito, os 16px que o
	 * WooCommerce impoe, porque o prototipo mede 14px. Mas os 16px do Woo nao
	 * sao escolha tipografica: abaixo deles o Safari do iOS DA ZOOM na pagina
	 * ao focar o campo, e a pessoa fica com o formulario cortado tendo de fechar
	 * o zoom na mao — no formulario de maior valor do site, campo a campo.
	 *
	 * O prototipo foi medido no escritorio, e la os 14px ficam: esta regra vale
	 * so ate 782px. A divergencia de 2px num telefone nao se percebe; o zoom se
	 * percebe em todos os doze campos.
	 *
	 * O seletor repete a especificidade da regra que ele corrige (0,3,0 + tipo)
	 * porque aquela ja existe para vencer o proprio WooCommerce. */
	.wc-block-checkout .wc-block-components-text-input input[type="text"],
	.wc-block-checkout .wc-block-components-text-input input[type="email"],
	.wc-block-checkout .wc-block-components-text-input input[type="tel"],
	.wc-block-checkout .wc-block-components-text-input input[type="number"],
	.wc-block-checkout .wc-block-components-text-input input[type="url"],
	.wc-block-checkout .wc-block-components-text-input input[type="password"],
	.wc-block-checkout .wc-blocks-components-select__select,
	.wc-block-checkout textarea {
		font-size: 16px;
	}

	/* A grade de duas colunas empilha. Antes disso quem empilhava era o flex do
	   WooCommerce; trocado o container por grid, a regra precisa ser explicita —
	   sem ela o mobile ficava com duas colunas de 147 e 179px e scroll lateral. */
	.wc-block-checkout .wc-block-components-sidebar-layout {
		grid-template-columns: 1fr;
	}

	.wc-block-checkout .wc-block-components-sidebar-layout {
		gap: var(--wp--preset--spacing--70, 1.5rem);
	}

	.wc-block-checkout .wc-block-checkout__sidebar {
		position: static;
	}

	.wc-block-checkout .wc-block-checkout__form {
		padding: var(--wp--preset--spacing--70, 1.5rem);
	}

	.wc-block-checkout .wc-block-components-order-summary-item {
		grid-template-columns: 72px 1fr auto;
		gap: var(--wp--preset--spacing--20, 1rem);
	}

	.wc-block-checkout .wc-block-components-order-summary-item__image,
	.wc-block-checkout .wc-block-components-order-summary-item__image img {
		width: 72px;
		height: 72px;
	}

	.wc-block-checkout .wc-block-components-order-summary-item .wc-block-components-product-name {
		font-size: 1.25rem;
	}
}

/* ---- paridade com o protótipo -------------------------------------------- */
/* design/Checkout.dc.html tem UMA seção («Facturación y envío»), o bloco de
   pagamento e o botão de finalizar. As podas de estrutura estão em
   bin/checkout-como-prototipo.php; o que sobra aqui é o que o WooCommerce
   reinsere pelo JS mesmo sem o bloco na página, ou o que só se resolve em CSS. */

/* «Opciones de envío». O bloco foi removido do conteúdo da página, mas o app
   React do checkout reinsere a etapa sempre que há entrega física — não há
   atributo nem filtro que a desligue.

   Esconder é seguro AQUI e só aqui: a loja tem exatamente UM método habilitado
   («Envío a convenir», custo zero, confirmado no WC_Shipping_Zones em
   2026-07-31), e método único se autosseleciona. No dia em que houver um
   segundo, esta regra passa a esconder uma escolha real do comprador e precisa
   sair. O envio continua visível como linha do resumo, à direita, que é onde o
   protótipo o mostra. */
.wc-block-checkout .wc-block-checkout__shipping-option {
	display: none;
}

/* Título vazio não vira espaço em branco. Os blocos de etapa que sobraram têm
   `title: ""` (ver o script de poda) para o cartão ler como uma seção só. */
.wc-block-checkout .wc-block-components-checkout-step__title:empty {
	display: none;
	margin: 0;
}

/* Os dois <select> (País e Provincia) mediam 63px contra 50px dos <input>: o
   WooCommerce reserva espaço acima do valor para o rótulo flutuante, e o
   protótipo não tem rótulo — tem o valor sozinho, na mesma altura de todos os
   campos. A diferença de 13px era o que fazia a borda deles parecer mais
   grossa. */
.wc-block-checkout .wc-blocks-components-select__label {
	display: none;
}

/* `min-height: 56px` e `line-height: 25px` do WooCommerce sobravam depois de o
   rótulo sair: 15 + 15 de padding + 25 de linha + 2 de borda = 57, contra os 50
   dos <input>, cuja linha é a natural do texto de 14px. Zerar os dois faz o
   select medir exatamente como os irmãos. */
.wc-block-checkout .wc-blocks-components-select__select {
	padding: 15px 16px;
	height: auto;
	min-height: 0;
	line-height: normal;
}

.wc-block-checkout .wc-blocks-components-select__container {
	height: auto;
}

/* ---- foco, campo ativo e autofill ---------------------------------------- */
/* O WooCommerce reveste os tres estados com o tema CLARO dele, e cada um
   sozinho basta para quebrar o cartao escuro:
     :focus            -> background #fff, border 1.5px, color #2b2d2f
     .is-active :focus -> padding-left 8.5px, padding-top 24px
     :-webkit-autofill -> fundo do proprio navegador
   O primeiro e o que pintava o campo de branco ao clicar; o `1.5px` do mesmo
   bloco e a "borda mais grossa" que aparecia em alguns campos — eram os
   focados, nao campos diferentes.

   Especificidade: as regras do plugin sao (0,3,2). O `.wc-block-checkout` a
   mais deixa estas em (0,4,2), que ganha sem depender da ordem de carga. */
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input[type="text"]:focus,
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input[type="email"]:focus,
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input[type="tel"]:focus,
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input[type="number"]:focus,
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input[type="url"]:focus,
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input.is-active input:focus,
.wc-block-checkout .wc-blocks-components-select__select:focus,
.wc-block-checkout .wc-block-components-textarea:focus {
	background: var(--wp--preset--color--base, #0b0a08);
	color: var(--wp--preset--color--contraste, #ede6d8);
	border: 1px solid var(--wp--preset--color--acento, #c9a86a);
	/* Repetido de proposito: a regra `.is-active input:focus` do plugin muda o
	   padding para 8.5px/24px e o campo "pula" ao receber o cursor. */
	padding: 15px 16px;
}

/* O anel de foco do navegador e azul (#005fcc) e destoa de tudo. Ele NAO some:
   sai o outline nativo e entra um de acento, porque foco invisivel e barreira
   de acessibilidade — quem navega por teclado perde o lugar. */
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-blocks-components-select__select:focus,
.wc-block-checkout .wc-block-components-textarea:focus {
	outline: 2px solid color-mix(in srgb, var(--wp--preset--color--acento, #c9a86a) 45%, transparent);
	outline-offset: 1px;
}

/* Autofill: o Chrome pinta o fundo por conta propria e ignora `background`. O
   unico jeito de vencer e uma sombra interna do tamanho do campo. */
.wc-block-checkout input:-webkit-autofill,
.wc-block-checkout input:-webkit-autofill:hover,
.wc-block-checkout input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--wp--preset--color--base, #0b0a08) inset;
	-webkit-text-fill-color: var(--wp--preset--color--contraste, #ede6d8);
	caret-color: var(--wp--preset--color--contraste, #ede6d8);
}

/* ---- botão × de remover, e a nota do pedido ------------------------------ */
/* Ambos inseridos/abertos por theme/assets/js/checkout.js. */

/* A linha do resumo vira grid de três colunas para o × ter uma célula própria:
   antes ela era imagem + texto + preço, e um quarto filho sem coluna caía para
   baixo do preço. */
.wc-block-checkout .wc-block-components-order-summary-item {
	position: relative;
	/* border-box de novo, e pelo mesmo motivo do bloco do checkout: sem ele o
	   `padding-right` soma POR FORA e a linha do resumo estoura 12px em 782px,
	   levando a pagina inteira a rolar de lado. */
	box-sizing: border-box;
	padding-right: 3rem;
}

.dc-remover-item {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 18%, transparent);
	border-radius: 0;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #ede6d8) 60%, transparent);
	font-family: var(--wp--preset--font-family--base, "Instrument Sans", sans-serif);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.dc-remover-item:hover,
.dc-remover-item:focus-visible {
	border-color: var(--wp--preset--color--acento, #c9a86a);
	color: var(--wp--preset--color--acento, #c9a86a);
	background: color-mix(in srgb, var(--wp--preset--color--acento, #c9a86a) 10%, transparent);
}

/* Enquanto a remoção está em curso o botão fica desabilitado — sem este estado
   ele parece clicável e não responde. */
.dc-remover-item[disabled] {
	opacity: .4;
	cursor: default;
}

/* O checkbox «Añade una nota a tu pedido» some: o JS o marca no carregamento e
   o campo fica aberto, como no protótipo. Esconder o controle evita que alguém
   feche o campo e ache que perdeu o que escreveu. */
.wc-block-checkout .wc-block-checkout__add-note .wc-block-components-checkbox {
	display: none;
}

/* ---- ordem e largura dos campos, como no protótipo ------------------------ */
/* A ORDEM não está mais aqui. Até 2026-07-31 este arquivo empurrava cada campo
   com `order`, e o próprio comentário anotava o preço: o desenho mudava, o Tab
   não, e quem navega por teclado percorria o formulário numa sequência que não
   é a que vê. Agora quem ordena é o `priority` do locale, em
   plugin/inc/woocommerce.php — o WooCommerce monta o DOM já na ordem certa, e
   foco e desenho voltam a contar a mesma história.

   O que sobra aqui é largura, que é mesmo assunto de CSS. O formulário é um
   flex de duas colunas (`flex: 1 0 calc(50% - 12px)` nos campos que emparelham).

   No protótipo a «Provincia» ocupa a linha inteira e o «Teléfono» divide a
   última linha com o e-mail. No WooCommerce os dois vêm a 50% e sobra o par
   errado. */
/* Três classes, e não duas: o WooCommerce declara o par de 50% em
   `.wc-block-components-address-form .wc-block-components-address-form__state`,
   e uma regra de duas classes empata em especificidade e perde por ordem — a
   folha dele carrega depois. Medido no DOM em 2026-07-31: com duas classes o
   campo continuava com `flex: 1 0 calc(50% - 12px)`. */
.wc-block-checkout .wc-block-components-address-form > .wc-block-components-address-form__state {
	flex: 0 0 100%;
}

/* O respiro entre as linhas. O formulário tem `gap: 0 12px` — 12px ENTRE
   COLUNAS e ZERO entre linhas —, e quem abre a distância vertical é um
   `margin-top: 12px` distribuído campo a campo pelo WooCommerce. O País é o
   único que não recebe nenhum: «Nombre de la empresa» encostava em «España».
   Medido na tela em 2026-07-31 (company bottom=643, country top=643).

   Só o País. A Provincia PARECE ter o mesmo problema e não tem: o respiro dela
   está na caixa de dentro (`.wc-blocks-components-select`, margin-top 12px), e
   uma regra que pegasse os dois selects somava 12+12 e abria um buraco de 24px
   antes do «Teléfono». Medir o invólucro não basta aqui — ele começa 12px acima
   do que se vê.

   Mesmo valor dos irmãos, e não um novo: se o WooCommerce mudar o ritmo do
   formulário, o País muda junto. O `:not(:first-child)` evita um respiro solto
   no topo caso um dia o País volte a ser o primeiro campo. */
.wc-block-checkout .wc-block-components-address-form > .wc-block-components-address-form__country:not(:first-child) {
	margin-top: 12px;
}

/* O campo de e-mail é filho do bloco de CONTACTO, não do formulário de
   endereço — o WooCommerce separa os dois e não há atributo que os junte. Quem
   o traz para cá é theme/assets/js/checkout.js; esta regra só o veste como o
   irmão de linha do telefone. Se o JS não rodar, o campo fica onde o
   WooCommerce o pôs (no topo, largura inteira) e o checkout continua
   funcionando. */
.wc-block-checkout .wc-block-components-address-form > .wc-block-components-address-form__email {
	flex: 1 0 calc(50% - 12px);
	min-width: 0;
}

/* Com o e-mail fora, o conteúdo do bloco de contacto fica vazio e viraria um
   respiro entre o título e os campos. O título continua lá — é o «Facturación y
   envío» do protótipo. */
.wc-block-checkout .wc-block-checkout__contact-fields .wc-block-components-checkout-step__content:empty {
	display: none;
}

/* «Usar la misma dirección para facturación». O protótipo tem UM endereço, e é
   o que o comprador preenche. A caixa nasce marcada, então escondê-la mantém o
   comportamento que ela já tem por padrão — o endereço de facturación segue o
   de envío. Voltar atrás é apagar esta regra; quem precisar de facturación
   diferente hoje passa pelo pedido, no admin. */
.wc-block-checkout .wc-block-checkout__use-address-for-billing {
	display: none;
}

/* ---- o asterisco dos campos obrigatórios --------------------------------- */
/* O protótipo escreve «Nombre *», «Teléfono *». O WooCommerce faz o contrário:
   marca só o que é opcional, com «(opcional)» no fim do rótulo — e esse
   «(opcional)» também está no protótipo, nos dois campos que o têm.

   Então o asterisco é o que falta, e ele sai do próprio `required` do input, em
   vez de ser escrito à mão em cada rótulo: campo que deixar de ser obrigatório
   perde o asterisco junto, sem ninguém lembrar de vir aqui.

   Os dois <select> (País e Provincia) ficam de fora porque o rótulo deles está
   escondido (ver acima) — e select sempre tem valor, então o asterisco não
   diria nada. */
.wc-block-checkout .wc-block-components-text-input:has( input:required ) label::after {
	content: " *";
}