/**
 * Restilização do Carrinho, Checkout e Conta aos tokens da marca.
 *
 * Regras deste arquivo (Fase 4, Tarefa 1 — ver
 * docs/specs/2026-08-03-fidelidade-blocks-alinhamento.md):
 *
 * 1. Só classes OFICIAIS dos blocos/telas nativos do WooCommerce
 *    (`.wc-block-*`), nunca um seletor baseado em posição (`:nth-child`,
 *    `:first-of-type` sobre elementos genéricos etc.). A zebra-stripe das
 *    linhas do carrinho no mockup usava `tbody tr:nth-child(even)` — foi
 *    deliberadamente OMITIDA aqui por essa razão (registrado no documento
 *    de alinhamento de fidelidade). Um seletor de posição parte na
 *    primeira vez que o WooCommerce reordenar, remover ou envolver um nó
 *    do próprio DOM que os blocos geram — algo fora do nosso controle e
 *    que já aconteceu entre versões menores do pacote de blocos.
 * 2. Todo valor de cor/tipografia vem de `var(--wp--preset--*)`, gerado a
 *    partir de `theme.json` — não um hex solto — para que a marca não
 *    precise de `!important` para vencer o CSS default dos blocos na
 *    cascata normal (o default do WooCommerce carrega antes do nosso; ver
 *    o enqueue em `functions.php`, sem dependência explícita nos handles
 *    do pacote de blocos, propositalmente, para herdar essa ordem: tema
 *    depois de plugin). ÚNICA exceção, isolada e comentada no próprio
 *    local: o CSS nativo zera `background`/`border` da tabela de itens do
 *    carrinho com `!important` (`table.wc-block-cart-items,...{background:
 *    none!important;...}`) — vencer isso exige `!important` também, não
 *    tem outro jeito dentro da cascata normal.
 * 3. Espaçamento/raio/sombra/tamanho de fonte continuam como valores brutos
 *    (só a paleta de cor e as famílias tipográficas foram mapeadas em
 *    `theme.json` como preset, por escopo desta tarefa — não o resto da
 *    escala) mas espelham 1:1
 *    `frontend/src/styles/tokens/{effects,spacing,typography}.css`,
 *    comentado em cada bloco de regra.
 */

/* ==========================================================================
   Carrinho — aviso informativo apontando para a Personalização
   (`.cart-personalize-hint`, achado de revisão da Tarefa 13, Fix 4) — HTML
   estático antepondo ao bloco pelo filtro `render_block_woocommerce/cart`
   (`Cart_Personalization_Hint`), fora da árvore React dos Blocks — mesma
   composição do mockup (`docs/mockups/cart/index.html`/`cart.css`).
   ========================================================================== */

.cart-personalize-hint {
	display: flex;
	align-items: center;
	gap: 12px; /* --space-3 */
	margin: 0 0 24px; /* --space-6 */
	padding: 16px 20px; /* --space-4 / --space-5 */
	border: 1px solid var( --wp--preset--color--line-200 );
	border-radius: 8px; /* --radius-md */
	background: var( --wp--preset--color--cream-100 );
	box-shadow: 0 2px 6px rgba( 0, 25, 50, 0.08 ); /* --shadow-sm */
	font-size: 0.875rem; /* --fs-small */
	color: var( --wp--preset--color--ink-900 );
}
.cart-personalize-hint svg {
	width: 18px;
	height: 18px;
	color: var( --wp--preset--color--gold-600 );
	flex: 0 0 auto;
}

/* ==========================================================================
   Carrinho — tabela de itens (`.wc-block-cart-items`, uma <table> real)
   ========================================================================== */

/* Cabeçalho em navy com a "régua" de gold por cima — mesma composição do
   mockup (`--radius-md` só na caixa externa, o cabeçalho da tabela em si
   não tem cantos arredondados no bloco nativo).
   `table.wc-block-cart-items,...th{background:none!important;border:0}` é
   uma regra do próprio CSS nativo do WooCommerce (reset da tabela) — as
   duas ÚNICAS declarações `!important` deste arquivo existem só para
   vencer essa regra especificamente; nenhum outro seletor daqui precisa
   disso (ver nota de fidelidade no documento de alinhamento). */
table.wc-block-cart-items .wc-block-cart-items__header th {
	background: var( --wp--preset--color--navy-900 ) !important;
	color: var( --wp--preset--color--cream-50 );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-top: 3px solid var( --wp--preset--color--gold-500 ) !important;
	padding: 12px 16px;
}

/* Hairline entre linhas — mesma cor que `--border` (`line-200`) no
   mockup. A zebra-stripe do mockup (fundo alternado por linha) foi
   deliberadamente omitida — ver nota 1 no topo deste arquivo. */
table.wc-block-cart-items .wc-block-cart-items__row td {
	border-top: 1px solid var( --wp--preset--color--line-200 );
	padding: 16px;
}

.wc-block-cart-item__image img {
	border-radius: 4px; /* --radius-sm */
	border: 1px solid var( --wp--preset--color--line-200 );
}

/* Seletor de quantidade e link de remover — cores neutras (`ink-300`),
   com o mesmo destaque em gold no hover que o mockup usa em
   `.cart-table__remove:hover`. */
.wc-block-components-quantity-selector {
	border: 1px solid var( --wp--preset--color--line-200 );
	border-radius: 4px; /* --radius-sm */
}
.wc-block-cart-item__remove-link {
	color: var( --wp--preset--color--ink-300 );
}
.wc-block-cart-item__remove-link:hover {
	color: var( --wp--preset--color--gold-600 );
}

/* ---------- Tabela de itens — pilha de cartões em contêiner ≤700px (2026-09-18,
   porte do mockup `docs/mockups/cart/cart.css` commit 36aafd5) ----------

   O mockup empilha as 6 colunas (Produto/Cor/QTD/Preço unit./Subtotal/
   Remover) como linhas "rótulo: valor" dentro de um cartão por produto. A
   tabela REAL tem só 3 células por linha (imagem / produto / total — ver
   divergência 2 em `docs/specs/2026-08-03-fidelidade-blocks-alinhamento.md`):
   Cor já é uma lista "nome: valor" nativa (`.wc-block-components-product-details`),
   e preço unitário (`.wc-block-cart-item__prices`) e quantidade
   (`.wc-block-cart-item__quantity`) são <div>s dentro da célula de produto.
   A intenção do mockup é portada para essas 3 células: foto + nome/cor como
   cabeçalho do cartão, e preço unitário / quantidade / subtotal como linhas
   rótulo:valor, com o rótulo vindo de um `::before` de texto FIXO em cada
   classe oficial — o Cart Block não expõe nenhum `data-label` no markup,
   e `nth-child` é proibido pela nota 1 do topo deste arquivo. Como o rótulo
   é um por classe (não por coluna posicional), o texto fixo é a saída
   correta, não um atalho.

   Conflito nativo que estas regras precisam vencer: o próprio `cart.css`
   vendorizado ESCONDE o cabeçalho E o botão de remover por DUAS mecânicas
   independentes, ambas medidas pela largura do CONTÊINER do bloco, não do
   viewport: (a) `@container (max-width: 699px)` — o contexto de contenção é
   `.wp-block-woocommerce-cart { container-type: inline-size }`, declarado
   no mesmo `cart.css` — que também rearranja a linha em grade
   (`grid-template-columns: 80px 132px`); e (b) as classes `.is-mobile`
   (≤400px) / `.is-small` (≤520px) / `.is-medium` (≤700px), aplicadas pelo
   `cart.js` via ResizeObserver. Cada seletor abaixo repete a especificidade
   da regra nativa que sobrescreve (mesmo número de classes, por isso o
   prefixo `.wc-block-cart` em todos) e vence pela ordem de carregamento
   (tema depois do plugin, nota 1) — sem `!important`. O botão de remover
   volta a aparecer, como ícone no canto do cartão (já é um <button> com
   <Icon> de 24px e `aria-label` nativo).

   Por que `@container` e não `@media`: a primeira versão deste bloco usava
   `@media (max-width: 639.98px)` (o 640px do mockup, largura de TELA abaixo
   da qual o cliente viu as colunas se sobrepondo). O code review de
   2026-09-18 apontou o gap: entre 640px e 700px de contêiner o nativo já
   estava no modo estreito (grade `80px 132px`, cabeçalho escondido) mas a
   media query não se aplicava — layout misto, sem rótulos e sem o ícone no
   canto. Varredura no browser (600–750px, passo 2px) confirmou o layout
   misto nessa faixa; o botão de remover em si continuou visível ali só por
   acidente de especificidade (a regra nativa de 4 classes `…__quantity
   .wc-block-cart-item__remove-link { display: inline }` vence os dois
   `display: none` de 3 classes), o que não é algo em que se apoiar. Medir
   pela MESMA unidade que o nativo mede fecha o gap por construção. O limite
   é 700px (não 699px) porque `.is-medium` vale até 700px inclusive e a
   container query nativa até 699px — 700px cobre as duas mecânicas; na
   fresta de 1px entre elas a grade nativa não se aplica, mas as regras
   abaixo são autossuficientes (declaram `display: grid` e as colunas). */
@container ( max-width: 700px ) {
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header {
		display: none;
	}
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		position: relative;
		display: grid;
		grid-template-columns: 64px minmax( 0, 1fr );
		column-gap: 12px; /* --space-3 */
		row-gap: 12px; /* --space-3 */
		padding: 16px; /* --space-4 */
		border-bottom: 1px solid var( --wp--preset--color--line-200 );
	}
	/* O nativo pinta a régua entre cartões com `color-mix(currentColor 20%)`
	   num seletor de 5 classes (`:not(.wc-block-mini-cart-items):not(:last-child)`
	   contam) — só um seletor igualmente específico troca a cor pra
	   `line-200`, a mesma hairline da tabela no desktop. */
	.wc-block-cart table.wc-block-cart-items:not( .wc-block-mini-cart-items ):not( :last-child ) .wc-block-cart-items__row {
		border-bottom-color: var( --wp--preset--color--line-200 );
	}
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td {
		padding: 0;
		border-top: none;
	}
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		grid-column: 1;
		grid-row: 1;
		padding-right: 0;
	}
	/* `padding-right` reserva o canto do cartão para o ícone de remover
	   (24px + 8px de folga), para o nome do produto nunca passar por baixo. */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		grid-column: 2;
		grid-row: 1;
		padding-right: 32px;
	}
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 1 / -1;
		grid-row: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px; /* --space-3 */
		padding-top: 8px; /* --space-2 */
		border-top: 1px dashed var( --wp--preset--color--line-200 );
		text-align: right;
	}
	/* Linhas "rótulo: valor" — `width: 100%` porque o contêiner nativo
	   (`.wc-block-cart-item__wrap`) é flex-column com `align-items:
	   flex-start`, que encolheria cada linha ao conteúdo. */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices,
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
		width: 100%;
		justify-content: space-between;
	}
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-item__prices::before,
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-item__quantity::before,
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-item__total::before {
		font-size: 0.75rem; /* --fs-label */
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var( --wp--preset--color--ink-300 );
	}
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-item__prices::before {
		content: 'Preço unit.';
	}
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-item__quantity::before {
		content: 'Quantidade';
	}
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-item__total::before {
		content: 'Subtotal';
	}
	/* Botão de remover sai da linha "Quantidade" e vira ícone no canto do
	   cartão. Cinco classes de propósito: a regra nativa
	   `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link`
	   (4 classes) força `display: inline`, e as duas de contêiner estreito
	   (`.is-small … .wc-block-cart-item__remove-link` e a `@container`
	   nativa `.wc-block-cart table… .wc-block-cart-item__remove-link`, 3
	   classes cada) forçam `display: none` — este seletor vence todas na
	   cascata normal. */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 12px; /* --space-3 */
		right: 12px; /* --space-3 */
		width: 24px;
		height: 24px;
	}
}

/* ==========================================================================
   Carrinho — coluna única (2026-08-11)

   O mockup do carrinho (`docs/mockups/cart/index.html`) removeu a sidebar
   "Resumo do Pedido": a tabela ganhou um `<tfoot>` com o total, e os CTAs
   ("Pagar online" / "Solicitar cotação") passaram a ser uma fileira flex
   direto abaixo da tabela, na mesma coluna única — não mais dentro de uma
   caixa de resumo separada. O Cart Block **não tem essa opção**: totais e
   o botão de finalizar sempre vivem num nó `.wc-block-cart__sidebar`
   irmão de `.wc-block-cart__main`, agrupados por
   `.wc-block-components-sidebar-layout` (é o próprio componente
   `<SidebarLayout>` do pacote de blocos, com `.wc-block-components-main`
   a 65% e `.wc-block-components-sidebar` a 35% lado a lado) — não existe
   prop/filtro para "mover o total pra dentro da tabela via tfoot", e
   remover essa sidebar de fato (não só via CSS) apagaria o botão de
   avançar para o checkout, inviabilizando a página. A aproximação
   possível, só em CSS, é empilhar a sidebar abaixo da lista de itens em
   vez de ao lado — mantém a mesma proporção "conteúdo maior, resumo por
   baixo" do mockup, sem perder nenhuma função do bloco. Documentado no
   alinhamento de fidelidade. Escopado só ao `.wc-block-cart`: o Checkout
   Block (`pagamento.html`/`cotacao.html` no mockup) manteve o layout de
   2 colunas com sidebar de verdade, e não deve ser afetado por esta regra. */
.wc-block-cart .wc-block-components-sidebar-layout {
	flex-direction: column;
}
.wc-block-cart .wc-block-components-main {
	width: 100%;
	padding: 0;
}
/* `width: 100%` só — nunca `padding: 0` aqui. O componente `<Sidebar>`
   do pacote de blocos renderiza `wc-block-components-sidebar` E
   `wc-block-cart__sidebar` no MESMO <div> (confirmado no bundle
   compilado, `wc-cart-checkout-base-frontend.js`) — um `padding: 0`
   neste seletor de 2 classes (especificidade 0,2,0) venceria o
   `padding: 20px` de `.wc-block-cart__sidebar` (0,1,0) mais abaixo,
   não importa a ordem de carregamento. Bug real já cometido uma vez
   aqui: zerava o padding do card creme, deixando "Total no carrinho"/
   "Finalizar compra" colados na borda, sem respiro — checado de novo
   visualmente (não só "no papel") depois do fix. */
.wc-block-cart .wc-block-components-sidebar {
	width: 100%;
}

/* Superfície creme com borda e sombra suave — mesma caixa de
   `.cart-summary`/`.cart-recap` do mockup. Aplicada ao sidebar inteiro
   (não só ao wrapper de totais, que o CSS nativo já zera com
   `border: 0`) porque no mockup título + linhas + total + CTAs formam
   uma única caixa (no carrinho, agora empilhada abaixo da tabela — ver
   nota acima; no checkout, ainda ao lado do formulário). */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	background: var( --wp--preset--color--cream-50 );
	border: 1px solid var( --wp--preset--color--line-200 );
	border-radius: 8px; /* --radius-md */
	box-shadow: 0 2px 6px rgba( 0, 25, 50, 0.08 ); /* --shadow-sm */
	padding: 20px; /* --space-5 */
}

.wc-block-cart__totals-title {
	color: var( --wp--preset--color--navy-900 );
	font-weight: 600;
}

.wc-block-components-totals-item {
	border-top: 1px solid var( --wp--preset--color--line-200 );
	color: var( --wp--preset--color--ink-900 );
}
.wc-block-components-totals-item:first-child {
	border-top: 0;
}

/* Linha do total geral — mais peso, valor em gold, régua mais forte por
   cima (mesma composição de `.cart-summary__row--total`). */
.wc-block-components-totals-footer-item {
	border-top: 2px solid var( --wp--preset--color--cream-200 );
	font-weight: 700;
	color: var( --wp--preset--color--navy-900 );
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var( --wp--preset--color--gold-600 );
}

/* ==========================================================================
   Botões — primário em navy, secundário outline (mesma composição de
   `.btn--navy`/`.btn--outline` do design system).
   ========================================================================== */

/* `:not(.is-link)` espelha a própria exclusão que o CSS nativo do
   WooCommerce já faz para os botões "link" (remover item, alternar
   cupom) — nunca inflar esses em pílulas grandes maiúsculas. */
.wc-block-components-button:not( .is-link ) {
	background: var( --wp--preset--color--navy-900 );
	color: var( --wp--preset--color--cream-50 );
	border-radius: 8px; /* --radius-md */
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.wc-block-components-button:not( .is-link ):hover {
	background: var( --wp--preset--color--navy-700 );
}

.wc-block-components-button:not( .is-link ).is-style-outline,
.wc-block-components-button:not( .is-link ).outlined {
	background: transparent;
	color: var( --wp--preset--color--navy-900 );
	box-shadow: inset 0 0 0 1px var( --wp--preset--color--navy-900 );
}
.wc-block-components-button:not( .is-link ).is-style-outline:hover,
.wc-block-components-button:not( .is-link ).outlined:hover {
	background: var( --wp--preset--color--navy-900 );
	color: var( --wp--preset--color--cream-50 );
}

/* Par de CTAs do carrinho ("Pagar online" / "Solicitar cotação" — mesma
   fileira `.cart-actions` do mockup atual, hoje diretamente sob a tabela
   na coluna única): dois botões de largura total lado a lado a partir de
   900px. A Tarefa 7 é quem acrescenta o segundo botão ("Solicitar
   cotação") como segundo filho deste mesmo contêiner — esta regra já
   prepara o layout para quando ele existir; com um filho só (estado
   atual), o único botão simplesmente ocupa a largura toda. */
.wc-block-cart__submit-container {
	display: flex;
	flex-direction: column;
	gap: 12px; /* --space-3 */
}
@media ( min-width: 900px ) {
	.wc-block-cart__submit-container {
		flex-direction: row;
	}
	.wc-block-cart__submit-container > * {
		flex: 1 1 0;
	}
}

/* Segundo CTA do Carrinho ("Solicitar cotação", Tarefa 7) —
   `cart-quote-cta.js` insere este link como segundo filho de
   `.wc-block-cart__submit-container`, ao lado do botão nativo "Pagar
   online" (`.wc-block-cart__submit-button`, reroteado pela Tarefa 13). A
   classe nativa `.wc-block-components-button` já dá o formato (altura,
   alinhamento, `:focus`) — `.outlined` é a variante secundária OFICIAL do
   próprio pacote de blocos (não uma classe inventada por este projeto,
   ver `cart.css` vendorizado). `.wc-block-cart__submit-button` NUNCA é
   reaproveitada aqui: o interceptor de clique de
   `cart-personalization-surcharge.js` seleciona exatamente essa classe
   para redirecionar para `?next=pagamento` — usá-la neste botão mandaria
   o cliente para o destino errado. */
.brindara-quote-cta {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

/* Bug real de core corrigido nesta regra — achado ao vivo (ver
   `.claude/agent-memory/woo-specialist-engineer/tier_cart_notice_submit_button_bugfix.md`):
   o próprio `cart.css` vendorizado do WooCommerce (`ProceedToCheckoutBlock`)
   observa, via `IntersectionObserver`, se um marcador invisível sobreposto
   ao botão de finalizar está fora da viewport inicial — se estiver, acrescenta
   o modificador `.wc-block-cart__submit-container--sticky`. Esse modificador
   TEM uma barra fixa visível no rodapé só em `@media(max-width:782px)`
   (mobile) — em qualquer largura maior (`@media(min-width:783px)`) OU
   viewport muito baixa (`@media(screen and max-height:500px)`), o CSS
   nativo só faz `display:none`, SEM nenhum substituto visível. Qualquer
   carrinho cujo conteúdo (o aviso de faixa desta fase incluído, mas não
   exclusivo dele — um carrinho longo sem nenhum código nosso já dispara o
   mesmo) empurre o botão abaixo da viewport inicial nessas larguras/alturas
   perde o único caminho pro checkout até rolar a página até esse ponto
   exato — nenhum atalho visual indica que é preciso rolar mais.
   Confirmado ao vivo (Playwright): 2 produtos com faixa pendente empurram o
   botão ~62px abaixo de uma viewport padrão de 720px de altura, disparando
   o `display:none`; rolar a página até o marcador reaparecer no viewport
   restaura o botão — prova de que não é um erro do nosso JS, é a MESMA
   condição "abaixo da viewport inicial" que o observer nativo usa, sem
   substituto em telas maiores. O design deste projeto não prevê barra fixa
   mobile em nenhum mockup — a correção certa é neutralizar só os dois
   estados "escondido sem substituto", nunca a barra fixa real (`position:
   fixed`, dentro de `@media(max-width:782px)`, intocada aqui).
   Especificidade igual (0,2,0) às duas regras nativas que zeram o display —
   como este arquivo carrega DEPOIS do CSS nativo do WooCommerce (ver nota 1
   no topo deste arquivo), a ordem de carregamento já garante a vitória na
   cascata normal, sem precisar de `!important` (a única exceção documentada
   deste arquivo continua sendo o reset de tabela, nota 1). */
.wc-block-cart .wc-block-cart__submit-container--sticky {
	display: flex;
}

/* ==========================================================================
   Checkout — passos do formulário (`.wc-block-checkout__form`)
   ========================================================================== */

.wc-block-components-checkout-step {
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--line-200 );
	border-radius: 8px; /* --radius-md */
	box-shadow: 0 2px 6px rgba( 0, 25, 50, 0.08 ); /* --shadow-sm */
	padding: 20px; /* --space-5 */
	margin-bottom: 16px; /* --space-4 */
}
.wc-block-components-checkout-step__title {
	color: var( --wp--preset--color--navy-900 );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.75rem; /* --fs-label, 12px — frontend/src/styles/tokens/typography.css */
}

/* Cantos dos campos de texto/seleção do formulário — o mockup do
   pagamento ganhou campos reais de cartão (Número, Nome, Validade/CVV,
   Parcelamento) além dos de endereço já existentes; nenhum gateway real
   com esses campos existe ainda nesta fase (Tarefa 9 é um stub offline),
   mas a linguagem visual de input (raio de 8px, igual a
   `.form-field input` do mockup) vale para qualquer campo que o Checkout
   Block renderizar hoje (contato, endereço) e para os que um gateway
   real vier a registrar depois. `input[type]`/`select` (em vez de
   `input`/`select` puro) empata em especificidade com o seletor nativo
   `.wc-block-components-text-input input[type=text],...` — sem isso,
   nosso raio nunca venceria por especificidade, mesmo carregando depois. */
.wc-block-components-text-input input[type],
.wc-block-components-select-input select,
.wc-block-checkout__form select {
	border-radius: 8px; /* --radius-md */
}

/* ==========================================================================
   Conta — a página de Minha Conta não tem versão em bloco (o
   WooCommerce não oferece um `woocommerce/my-account` block), então
   continua no shortcode clássico `[woocommerce_my_account]`. As classes
   abaixo são as oficiais do CSS clássico do WooCommerce
   (`.woocommerce table.shop_table`, `.woocommerce a.button`), não do
   pacote de blocos — mantidas neste arquivo porque ele é enfileirado nas
   3 telas juntas (carrinho, checkout, conta). Restilização completa da
   Conta é escopo de fase futura (Fase 5) — aqui só a harmonização
   mínima de botão/tabela para não deixar a tela em branco/default do
   WordPress.
   ========================================================================== */

.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce button.button {
	background: var( --wp--preset--color--navy-900 );
	color: var( --wp--preset--color--cream-50 );
	border-radius: 8px; /* --radius-md */
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.woocommerce-account .woocommerce table.shop_table thead th {
	background: var( --wp--preset--color--navy-900 );
	color: var( --wp--preset--color--cream-50 );
	border-top: 3px solid var( --wp--preset--color--gold-500 );
}

/* ==========================================================================
   Carrinho — aviso de faixa (Fase 4, Tarefa 3)

   Renderizado por `cart-tier-notice.js` (`ExperimentalDiscountsMeta` +
   `registerPlugin`, não uma classe oficial do pacote de blocos —
   `.brindara-tier-notice` é nossa, segura de estilizar sem a ressalva da
   nota 1 no topo deste arquivo, que só vale para seletores `.wc-block-*`).
   ========================================================================== */
.brindara-tier-notice {
	margin: 0 0 16px;
}
.brindara-tier-notice__message {
	background: var( --wp--preset--color--cream-200 );
	border-left: 3px solid var( --wp--preset--color--gold-500 );
	border-radius: 4px; /* --radius-sm */
	color: var( --wp--preset--color--ink-900 );
	padding: 12px 16px;
	margin: 0 0 8px;
}

/* ==========================================================================
   Carrinho — calculadora de frete e prazo (2026-09-18, spec 2026-08-21,
   item 9)

   Inserida por `cart-shipping-calculator.js` logo depois da tabela de
   itens, dentro de `.wc-block-cart__main` — ou seja, entre a tabela e a
   sidebar empilhada com totais/CTAs, exatamente onde o mockup
   (`docs/mockups/cart/index.html`, `.pdp-shipping-calc`) a coloca. Mesma
   composição e mesmos valores de `frontend/src/styles/pdp.css:705-744`
   (`.pdp-shipping-calc*`), traduzidos aos presets do `theme.json` — só o
   prefixo muda para `brindara-*`, a convenção deste tema para nós que nós
   mesmos injetamos (`.brindara-quote-cta`, `.brindara-tier-notice`). O
   botão "Calcular" reaproveita `.btn.btn--outline.btn--sm` abaixo.
   ========================================================================== */
.brindara-shipping-calc {
	margin: 24px 0 16px; /* --space-6 / --space-4 */
	padding: 16px; /* --space-4 */
	border: 1px solid var( --wp--preset--color--line-200 );
	border-radius: 8px; /* --radius-md */
	background: var( --wp--preset--color--white );
}
.brindara-shipping-calc__heading {
	display: flex;
	align-items: center;
	gap: 8px; /* --space-2 */
	font-size: 0.875rem; /* --fs-small */
	font-weight: 600;
	color: var( --wp--preset--color--navy-900 );
}
.brindara-shipping-calc__heading svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	color: var( --wp--preset--color--gold-600 );
}
.brindara-shipping-calc__form {
	display: flex;
	gap: 8px; /* --space-2 */
	margin: 12px 0; /* --space-3 */
}
.brindara-shipping-calc__cep {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 12px; /* --space-2 / --space-3 */
	border: 1px solid var( --wp--preset--color--line-200 );
	border-radius: 4px; /* --radius-sm */
	background: var( --wp--preset--color--white );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.875rem; /* --fs-small */
	color: var( --wp--preset--color--ink-900 );
}
.brindara-shipping-calc__results {
	list-style: none;
	margin: 0;
	padding: 8px 0 0; /* --space-2 */
	border-top: 1px dashed var( --wp--preset--color--line-200 );
}
.brindara-shipping-calc__results li {
	display: flex;
	justify-content: space-between;
	gap: 12px; /* --space-3 */
	padding: 4px 0; /* --space-1 */
	font-size: 0.875rem; /* --fs-small */
	color: var( --wp--preset--color--ink-900 );
}

/* ==========================================================================
   Checkout — aviso de prazo de transporte junto às opções de frete
   (2026-09-18, mockup `docs/mockups/cart/pagamento.html:268`,
   `.option-group__hint`)

   Renderizado por `checkout-shipping-notice.js` via Fill de
   `ExperimentalOrderShippingPackages` (Slot nativo dentro do
   `ShippingRatesControl` do Checkout Block) — classe nossa, segura de
   estilizar sem a ressalva da nota 1. Mesma composição do
   `.option-group__hint` do mockup: caption, cor neutra, trecho em negrito.
   ========================================================================== */
.brindara-shipping-notice {
	margin: 0 0 12px; /* --space-3 */
	font-size: 0.8125rem; /* --fs-caption */
	line-height: 1.4;
	color: var( --wp--preset--color--ink-300 );
}
.brindara-shipping-notice strong {
	font-weight: 600;
}

/* ==========================================================================
   Carrinho — nota de sobretaxa de personalização: REMOVIDA (2026-09-18,
   spec 2026-08-21, item 7)

   Entre 2026-08-12 e 2026-09-18 o preço unitário trazia o sufixo
   " (+R$ X,XX/un personalização)" via filtro `subtotalPriceFormat` (nunca
   teve CSS próprio — o componente nativo só interpola o token `<price/>`,
   ver docblock de `cart-personalization-surcharge.js`). Decisão do cliente:
   preço já combinado mostra só o valor final; o custo de personalização
   aparece uma única vez, na seleção (`/personalizacao/`). Nada a estilizar.
   ========================================================================== */

/* ==========================================================================
   Personalização — página própria "/personalizacao/" (Fase 4, Tarefa 13,
   adendo 2026-08-12, reconciliação das Tarefas 4/12)

   Página comum do tema (`page-personalizacao.html`), fora do sistema de
   Blocks — fiel ao mockup `docs/mockups/cart/personalizacao.html` (branch
   `mockup`). A nota 1 no topo deste arquivo ("só classes oficiais dos
   blocos") não se aplica a esta seção: nenhuma classe aqui é `.wc-block-*`.
   ========================================================================== */
.container {
	max-width: 1080px; /* --content-max, igual a contentSize/wideSize do theme.json */
	margin-inline: auto;
	padding-inline: 20px; /* --space-5 */
}

.breadcrumb {
	padding-block: 16px; /* --space-4 */
}
.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px; /* --space-2 */
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem; /* --fs-caption */
	color: var( --wp--preset--color--ink-300 );
}
.breadcrumb__item:not( :last-child )::after {
	content: '/';
	margin-left: 8px; /* --space-2 */
	color: var( --wp--preset--color--ink-300 );
}
.breadcrumb__link {
	color: var( --wp--preset--color--ink-300 );
}
.breadcrumb__link:hover {
	color: var( --wp--preset--color--gold-600 );
}
.breadcrumb__item[aria-current='page'] {
	color: var( --wp--preset--color--navy-900 );
	font-weight: 500;
}

.checkout-page {
	padding-block: 8px 64px; /* --space-2 / --space-16 */
}
.checkout-page__title {
	margin: 0 0 24px; /* --space-6 */
	font-family: var( --wp--preset--font-family--display );
	font-size: 2rem; /* --fs-h1 */
	font-weight: 600;
	color: var( --wp--preset--color--navy-900 );
}
.checkout-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px; /* --space-8 */
	align-items: start;
}
@media ( min-width: 900px ) {
	.checkout-layout {
		grid-template-columns: 1fr 400px;
	}
}
.checkout-layout > *:first-child {
	min-width: 0;
}
@media ( min-width: 900px ) {
	.cart-recap--sticky {
		position: sticky;
		top: 24px; /* --space-6 */
	}
}

/* ---------- Escolha "Personalizar itens" / "Não desejo personalizar"
   (`.option-group`/`.option-card`) — mesmo componente já usado pela Tarefa
   7 (Cotação) e por qualquer página de checkout customizada futura; nasce
   aqui pela primeira vez neste código. ---------- */
.option-group {
	border: none;
	margin: 0 0 24px; /* --space-6 */
	padding: 0;
}
.option-group legend {
	padding: 0 0 12px; /* --space-3 */
	font-size: 0.75rem; /* --fs-label */
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --wp--preset--color--navy-900 );
}
.option-group__list {
	display: flex;
	flex-direction: column;
	gap: 12px; /* --space-3 */
}
.option-card {
	border: 1px solid var( --wp--preset--color--line-200 );
	border-radius: 8px; /* --radius-md */
}
.option-card:has( input:checked ) {
	border-color: var( --wp--preset--color--gold-500 );
	box-shadow: 0 0 0 1px var( --wp--preset--color--gold-500 );
	background: var( --wp--preset--color--cream-50 );
}
.option-card__row {
	display: flex;
	align-items: center;
	gap: 12px; /* --space-3 */
	padding: 16px; /* --space-4 */
	cursor: pointer;
}
.option-card__row > input {
	accent-color: var( --wp--preset--color--gold-500 );
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}
.option-card__icon {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	color: var( --wp--preset--color--gold-600 );
}
.option-card__label {
	flex: 1 1 auto;
	font-size: 0.875rem; /* --fs-small */
	color: var( --wp--preset--color--ink-900 );
	font-weight: 500;
}
.option-card__meta {
	display: block;
	font-size: 0.8125rem; /* --fs-caption */
	color: var( --wp--preset--color--ink-300 );
}
.option-card__chevron {
	margin-left: auto;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var( --wp--preset--color--ink-300 );
	transition: transform 0.2s;
}
.option-card.is-expanded .option-card__chevron {
	transform: rotate( 180deg );
	color: var( --wp--preset--color--gold-600 );
}
.option-card__panel {
	padding: 12px 0 16px; /* --space-3 top/bottom, --space-4 bottom */
	font-size: 0.875rem; /* --fs-small */
	color: var( --wp--preset--color--ink-900 );
	border-top: 1px dashed var( --wp--preset--color--line-200 );
	margin: 0 16px; /* --space-4 */
}

/* ---------- Logomarca do pedido (`.cart-customize`) — mesma composição do
   mockup, versão "estática" (sem checkbox/`<details>`: a visibilidade já é
   a do `.option-card__panel` por fora). ---------- */
.cart-customize {
	align-items: center;
	gap: 12px; /* --space-3 */
	margin-bottom: 24px; /* --space-6 */
	padding: 16px 20px; /* --space-4 / --space-5 */
	border: 1px solid var( --wp--preset--color--line-200 );
	border-radius: 8px; /* --radius-md */
	background: var( --wp--preset--color--cream-100 );
	box-shadow: 0 2px 6px rgba( 0, 25, 50, 0.08 ); /* --shadow-sm */
}
.cart-customize--static {
	display: flex;
	flex-wrap: wrap;
}
.cart-customize--static .cart-customize__body {
	display: block;
	flex: 1 1 100%;
	width: 100%;
	padding-top: 16px; /* --space-4 */
}
.cart-customize__icon {
	width: 18px;
	height: 18px;
	color: var( --wp--preset--color--gold-600 );
	flex: 0 0 auto;
}
.cart-customize__summary {
	font-size: 0.875rem; /* --fs-small */
	font-weight: 500;
	color: var( --wp--preset--color--navy-900 );
}
.cart-customize__hint {
	margin: 0 0 16px; /* --space-4 */
	font-size: 0.8125rem; /* --fs-caption */
	color: var( --wp--preset--color--ink-300 );
}
/* Status/estado "arquivo enviado"/remover — mesmas classes que o widget de
   upload já usava dentro do Cart Block (Fase 4, Tarefa 4); reaproveitadas
   aqui tal qual, só o contêiner que muda de `<details>` para `.cart-customize`. */
.brindara-cart-logo-upload__status {
	color: var( --wp--preset--color--ink-300 );
	font-size: 0.8125rem; /* --fs-caption */
	margin: 12px 0 0;
}
.brindara-cart-logo-upload__uploaded:not( [hidden] ) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px; /* --space-3 */
	background: var( --wp--preset--color--cream-200 );
	border-radius: 4px; /* --radius-sm */
	padding: 12px 16px;
	color: var( --wp--preset--color--ink-900 );
}
.brindara-cart-logo-upload__remove {
	background: none;
	border: none;
	color: var( --wp--preset--color--gold-600 );
	cursor: pointer;
	font-weight: 600;
	text-decoration: underline;
	padding: 0;
}

/* ---------- Formulário genérico sobre fundo claro (`.form-field`/
   `.form-row`) — distinto de qualquer `.field` eventual do Next.js, que é
   estilizado para painel navy; o fundo aqui é creme. ---------- */
.form-row {
	display: grid;
	gap: 16px; /* --space-4 */
}
@media ( min-width: 560px ) {
	.form-row--2 {
		grid-template-columns: 1fr 1fr;
	}
}
.form-field {
	display: flex;
	flex-direction: column;
	gap: 8px; /* --space-2 */
}
.form-field label {
	font-size: 0.8125rem; /* --fs-caption */
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var( --wp--preset--color--navy-900 );
}
.form-field input,
.form-field select,
.form-field textarea {
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.9375rem; /* --fs-body */
	padding: 12px 14px;
	border-radius: 8px; /* --radius-md */
	border: 1px solid var( --wp--preset--color--line-200 );
	background: var( --wp--preset--color--white );
	color: var( --wp--preset--color--ink-900 );
}
.form-field textarea {
	resize: vertical;
	min-height: 96px;
}
.form-field__optional {
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var( --wp--preset--color--ink-300 );
}

/* ---------- Formulário da Cotação (`.checkout-form`, Tarefa 7) — envolve
   as `.form-row`/`.form-field` acima; só espaçamento vertical entre elas
   (mesma regra do mockup, `docs/mockups/cart/cart.css`). ---------- */
.checkout-form {
	display: flex;
	flex-direction: column;
	gap: 16px; /* --space-4 */
	margin-bottom: 24px; /* --space-6 */
}

/* ---------- Checkbox de consentimento LGPD (`.field--consent`/
   `.consent-checkbox`) — mesmas classes/composição do <ConsentCheckbox>
   do Next.js (frontend/src/components/lead/ConsentCheckbox.tsx), única
   fonte de texto/versão para toda superfície de captura de lead
   (Consent_Text). Não existe no mockup original (que não previa LGPD) —
   desvio aceito e documentado, mesmo espírito das demais divergências de
   `docs/specs/2026-08-03-fidelidade-blocks-alinhamento.md`. ---------- */
.field--consent {
	margin-bottom: 8px; /* --space-2 */
}
.consent-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.8125rem; /* --fs-caption */
	color: var( --wp--preset--color--ink-300 );
	cursor: pointer;
}
.consent-checkbox input {
	margin-top: 2px;
	accent-color: var( --wp--preset--color--gold-500 );
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}
.consent-checkbox a {
	color: var( --wp--preset--color--navy-900 );
}

/* ---------- Erro de rede/servidor da página de Personalização
   (`.personalize-error`) — achado de revisão da Tarefa 13, Fix 3. Mesmo
   tom de destaque do `.cart-customize__summary` (navy, seminegrito), pra
   diferenciar de `.brindara-cart-logo-upload__status` (ink-300, neutro,
   usado também pra "Enviando…"/"Removendo…" — nunca um erro real). A
   paleta do tema (`theme.json`) não tem um tom vermelho/de alerta
   dedicado; `ink-900` é o mais escuro/visível disponível. ---------- */
.personalize-error:not( [hidden] ) {
	margin: 0 0 16px; /* --space-4 */
	padding: 12px 16px; /* --space-3 / --space-4 */
	border-radius: 4px; /* --radius-sm */
	background: var( --wp--preset--color--cream-200 );
	font-size: 0.875rem; /* --fs-small */
	font-weight: 600;
	color: var( --wp--preset--color--ink-900 );
}

/* ---------- Lista de personalização por produto (`.personalize-list`) —
   um cartão por produto elegível, dentro do painel "Personalizar itens".
   As classes de campo/select/botão-limpar são as MESMAS do antigo widget
   de Fill (Fase 4, Tarefa 12) — mesmo raciocínio de nome, agora sob um
   `<li>` em vez de um `<div>` de linha. ---------- */
.personalize-list {
	list-style: none;
	margin: 0 0 8px; /* --space-2 */
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px; /* --space-3 */
}
.personalize-list__title {
	margin: 24px 0 12px; /* --space-6 / --space-3 */
	font-size: 0.875rem; /* --fs-small */
	font-weight: 600;
	color: var( --wp--preset--color--navy-900 );
}
.personalize-list__item {
	border: 1px solid var( --wp--preset--color--line-200 );
	border-radius: 8px; /* --radius-md */
	background: var( --wp--preset--color--white );
	padding: 16px; /* --space-4 */
}
.personalize-list__product {
	display: flex;
	align-items: center;
	gap: 12px; /* --space-3 */
	margin-bottom: 12px; /* --space-3 */
}
.personalize-list__product img,
.personalize-list__product-media {
	width: 56px;
	height: 56px;
	border-radius: 4px; /* --radius-sm */
	object-fit: cover;
	flex: 0 0 auto;
}
.personalize-list__product-media--placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var( --wp--preset--color--cream-100 );
	color: var( --wp--preset--color--ink-300 );
}
.personalize-list__product-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.personalize-list__product-name {
	font-weight: 500;
	color: var( --wp--preset--color--navy-900 );
}
.personalize-list__product-meta {
	font-size: 0.8125rem; /* --fs-caption */
	color: var( --wp--preset--color--ink-300 );
}
.personalize-list__badge {
	margin-left: 8px; /* --space-2 */
}
.cart-table__personalize-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 16px; /* --space-4 */
	padding: 8px 0; /* --space-2 */
}
.cart-table__personalize-fields .form-field {
	min-width: 0;
	flex: 1 1 160px;
}
.cart-table__personalize-select {
	width: 100%;
	max-width: 100%;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.875rem; /* --fs-small */
	padding: 8px 10px;
	border: 1px solid var( --wp--preset--color--line-200 );
	border-radius: 4px; /* --radius-sm */
	background: var( --wp--preset--color--white );
	color: var( --wp--preset--color--ink-900 );
}
.cart-table__personalize-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	margin-left: auto;
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	background: none;
	border: none;
	border-radius: 4px; /* --radius-sm */
	color: var( --wp--preset--color--ink-300 );
	cursor: pointer;
}
.cart-table__personalize-clear:hover {
	background: var( --wp--preset--color--cream-200 );
	color: var( --wp--preset--color--gold-600 );
}

/* Selo dourado genérico (`.badge--gold.badge--sm`) — mesma composição já
   validada em `.brindara-cart-personalization__badge` (revisão da Tarefa
   12: as classes literais do mockup, `badge badge--gold badge--sm`, nunca
   existiram fora do Next.js/mockup — sem esta regra renderizavam como
   texto solto). */
.badge {
	display: inline-flex;
	align-items: center;
}
.badge--gold {
	background: var( --wp--preset--color--gold-600 );
	color: var( --wp--preset--color--white );
	border-radius: 4px; /* --radius-sm */
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.badge--sm {
	font-size: 0.6875rem; /* ~11px */
	padding: 2px 8px;
}

/* ---------- Recap ("Itens do Pedido") — mesmo componente que a Tarefa 7
   (Cotação) e o Checkout Block estilizado (`.wc-block-cart__sidebar`) já
   compartilham na linguagem visual, mas com marcação própria: esta página
   não é um bloco. ---------- */
.cart-recap {
	border: 1px solid var( --wp--preset--color--line-200 );
	border-radius: 8px; /* --radius-md */
	box-shadow: 0 2px 6px rgba( 0, 25, 50, 0.08 ); /* --shadow-sm */
	padding: 20px; /* --space-5 */
	background: var( --wp--preset--color--white );
}
.cart-recap__title {
	margin: 0 0 16px; /* --space-4 */
	font-size: 1.125rem; /* --fs-lead */
	font-weight: 600;
	color: var( --wp--preset--color--navy-900 );
}
.cart-recap__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cart-recap__list li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-block: 8px; /* --space-2 */
	font-size: 0.875rem; /* --fs-small */
	color: var( --wp--preset--color--ink-900 );
	border-top: 1px solid var( --wp--preset--color--line-200 );
}
.cart-recap__list li:first-child {
	border-top: none;
}
.cart-recap__item-row {
	display: flex;
	justify-content: space-between;
	gap: 12px; /* --space-3 */
}
.cart-recap__item-row span:first-child {
	min-width: 0;
}
.cart-recap__personalize {
	font-size: 0.8125rem; /* --fs-caption */
	color: var( --wp--preset--color--ink-300 );
}
.cart-recap__personalize.is-configured {
	color: var( --wp--preset--color--gold-600 );
	font-weight: 500;
}
.cart-recap__cta {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 20px; /* --space-5 */
}
.cart-recap__back {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 12px; /* --space-3 */
}

/* ---------- Botões (`.btn`) — a Personalização não é um bloco nativo, então
   precisa da sua própria linguagem de botão em vez de `.wc-block-components-button`.
   Mesma composição visual (navy/outline/uppercase) já estabelecida acima
   para o Cart/Checkout Block. ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px; /* --space-2 */
	border-radius: 8px; /* --radius-md */
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 14px 20px;
	font-size: 0.875rem; /* --fs-small */
	cursor: pointer;
	border: 1px solid transparent;
}
.btn--navy {
	background: var( --wp--preset--color--navy-900 );
	color: var( --wp--preset--color--cream-50 );
}
.btn--navy:hover {
	background: var( --wp--preset--color--navy-700 );
	color: var( --wp--preset--color--cream-50 );
}
.btn--outline {
	background: transparent;
	color: var( --wp--preset--color--navy-900 );
	border-color: var( --wp--preset--color--navy-900 );
}
.btn--outline:hover {
	background: var( --wp--preset--color--navy-900 );
	color: var( --wp--preset--color--cream-50 );
}
.btn--sm {
	padding: 10px 16px;
	font-size: 0.8125rem; /* --fs-caption */
}
.btn--block {
	display: flex;
	width: 100%;
}
/* CTA inerte até uma das duas opções ("Personalizar itens"/"Não desejo
   personalizar") ser marcada — achado E2 da sessão de grilling. O `href`
   também fica `#` enquanto inerte (ver `personalizacao-personalization.js`),
   `pointer-events: none` é só a segunda camada de defesa (o clique já é
   interceptado em JS). */
.btn.is-disabled {
	opacity: 0.5;
	pointer-events: none;
}
/* Variante dourada (`.btn--gold`) — acrescentada pela Tarefa 16 para o botão
   "Baixar PDF do Pedido" da confirmação; mesma composição do mockup
   (`docs/mockups/home/home.css:133`). */
.btn--gold {
	background: var( --wp--preset--color--gold-600 );
	color: var( --wp--preset--color--white );
	border-color: var( --wp--preset--color--gold-600 );
}
.btn--gold:hover {
	background: var( --wp--preset--color--gold-500 );
	color: var( --wp--preset--color--white );
}
.btn svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/* ==========================================================================
   Confirmação do pedido (`order-received`) — stepper das quatro etapas,
   mensagem de pendência de estoque/reembolso e botão de PDF, acrescentados ao
   template nativo por `Order_Confirmation_Presenter` (Fase 4, Tarefa 16;
   itens 4 e 5 do spec de 2026-08-14). Mesma composição do mockup
   (`docs/mockups/cart/confirmacao.html` + `cart.css`).
   ========================================================================== */

/* ---------- Stepper (`.checkout-stepper`) ----------
   Duas diferenças deliberadas sobre `cart.css:908-981`, as duas por causa do
   contexto real (nunca por gosto):

   1. Sem o `padding-top: 140px` do mockup — aquele valor existe só para
      liberar o cabeçalho `position: fixed` das páginas estáticas do mockup.
      Este tema não tem cabeçalho fixo (as `template-part` `header`/`footer`
      não existem no tema, ver `templates/page-cotacao.html`), então o mesmo
      valor deixaria um vão de 140px no topo da página.
   2. O contorno das etapas ainda não concluídas usa `cream-200` no lugar do
      `--border-strong` do mockup (`cream-300`): `cream-300` não está na
      paleta de `theme.json`, e a regra 2 do topo deste arquivo proíbe hex
      solto — `cream-200` é o passo de paleta mais próximo. Na prática nunca
      aparece nesta tela (todas as quatro etapas estão concluídas ou atual na
      confirmação), mas a regra fica correta para qualquer superfície futura
      no meio do fluxo. */
.checkout-stepper {
	background: var( --wp--preset--color--white );
	border-bottom: 1px solid var( --wp--preset--color--line-200 );
	margin-bottom: 24px; /* --space-6 */
}
.checkout-stepper__list {
	list-style: none;
	display: flex;
	max-width: 1080px; /* --content-max, mesmo valor de `.container` acima */
	margin: 0 auto;
	padding: 16px 20px 12px; /* --space-4 / --space-5 / --space-3 */
}
.checkout-stepper__step {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px; /* --space-2 */
	text-align: center;
}
/* Linha de ligação: vai do centro do círculo desta etapa ao da seguinte,
   desenhada atrás dos círculos (`z-index`) para nunca cobrir os números. */
.checkout-stepper__step:not( :last-child )::after {
	content: '';
	position: absolute;
	top: 14px;
	left: 50%;
	width: 100%;
	height: 2px; /* --border-width-strong */
	background: var( --wp--preset--color--cream-200 );
	z-index: 0;
}
.checkout-stepper__step.is-complete:not( :last-child )::after {
	background: var( --wp--preset--color--gold-500 );
}
.checkout-stepper__circle {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px; /* --radius-pill */
	border: 2px solid var( --wp--preset--color--cream-200 ); /* --border-width-strong */
	background: var( --wp--preset--color--white );
	color: var( --wp--preset--color--ink-500 );
	font-size: 0.8125rem; /* --fs-caption */
	font-weight: 600;
}
.checkout-stepper__circle svg {
	width: 14px;
	height: 14px;
}
.checkout-stepper__label {
	font-size: 0.8125rem; /* --fs-caption */
	color: var( --wp--preset--color--ink-500 );
}
.checkout-stepper__step.is-current .checkout-stepper__circle {
	border-color: var( --wp--preset--color--navy-900 );
	background: var( --wp--preset--color--navy-900 );
	color: var( --wp--preset--color--cream-50 );
}
.checkout-stepper__step.is-current .checkout-stepper__label {
	color: var( --wp--preset--color--navy-900 );
	font-weight: 600;
}
.checkout-stepper__step.is-complete .checkout-stepper__circle {
	border-color: var( --wp--preset--color--gold-500 );
	background: var( --wp--preset--color--gold-500 );
	color: var( --wp--preset--color--white );
}
@media ( min-width: 720px ) {
	.checkout-stepper__circle {
		width: 32px;
		height: 32px;
	}
	.checkout-stepper__circle svg {
		width: 16px;
		height: 16px;
	}
	.checkout-stepper__label {
		font-size: 0.875rem; /* --fs-small */
	}
	.checkout-stepper__step:not( :last-child )::after {
		top: 16px;
	}
}

/* ---------- Mensagem de pendência de estoque + garantia de reembolso
   (`.confirm-header__pending-notice`) — só enquanto o pedido está
   `on-hold`/`pending`; ver `Order_Confirmation_Presenter`. ---------- */
.confirm-header__pending-notice {
	display: flex;
	align-items: flex-start;
	gap: 8px; /* --space-2 */
	margin-top: 16px; /* --space-4 */
	padding: 12px 16px; /* --space-3 / --space-4 */
	background: var( --wp--preset--color--cream-100 );
	border-radius: 8px; /* --radius-md */
	font-size: 0.875rem; /* --fs-small */
	color: var( --wp--preset--color--ink-900 );
	text-align: left;
}
.confirm-header__pending-notice svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var( --wp--preset--color--gold-600 );
	margin-top: 2px;
}
.confirm-header__pending-notice p {
	margin: 0;
}

/* ---------- Linha de CTA da confirmação (`.confirm-cta-row`) — hoje só o
   botão estático de PDF (ver `Order_Confirmation_Presenter`); o mockup tem
   outros dois links ("Ver Meus Pedidos"/"Voltar para a Loja") que o próprio
   Order Confirmation Block já cobre com sua navegação nativa. ---------- */
.confirm-cta-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px; /* --space-4 */
	margin-top: 32px; /* --space-8 */
}
.confirm-cta-row .btn {
	min-width: 220px;
	text-align: center;
}

/* ==========================================================================
   Estado de sucesso da Cotação (`/cotacao/`) — cabeçalho de confirmação
   (`.confirm-header`/`.confirm-icon`), badge do número do pedido
   (`.badge--outline`/`.badge--md`) e o cartão de itens (`.confirm-card`),
   preenchidos por `quote-form.js` (Fase 4, Tarefa 17; itens 3 e 4 do spec
   de 2026-08-14). `.checkout-stepper`/`.confirm-cta-row` acima já são
   compartilhados com a Tarefa 16 (`order-received`) — só estas três
   famílias são novas aqui, porque aquela tela usa o resumo NATIVO do Order
   Confirmation Block em vez de um cabeçalho/cartão próprios.
   ========================================================================== */
.confirm-header {
	max-width: 640px;
	margin: 0 auto 32px; /* --space-8 */
	text-align: center;
}
/* Ícone de sucesso em `gold-500`, não no verde do WhatsApp que o mockup usa
   (`#25D366`, `docs/mockups/cart/cart.css:770`) — aquele valor é uma cor de
   marca externa sem equivalente em `theme.json`, e a regra 2 do topo deste
   arquivo proíbe hex solto sem uma exceção já validada em algum outro lugar
   deste tema (não existe nenhuma para esse verde aqui). `gold-500`
   reaproveita a mesma linguagem de "etapa concluída" que o círculo
   `is-complete` do `.checkout-stepper` acima já usa. */
.confirm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: 20px; /* --space-5 */
	border-radius: 999px; /* --radius-pill */
	background: var( --wp--preset--color--gold-500 );
	color: var( --wp--preset--color--white );
}
.confirm-icon svg {
	width: 34px;
	height: 34px;
}
.confirm-header__title {
	margin: 0 0 12px; /* --space-3 */
	font-size: 1.875rem; /* --fs-h1 */
	font-weight: 600; /* --fw-semibold */
	color: var( --wp--preset--color--navy-900 );
}
.confirm-header__subtitle {
	margin: 0 0 20px; /* --space-5 */
	font-size: 0.9375rem; /* --fs-body */
	color: var( --wp--preset--color--ink-900 );
}
.confirm-header__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px; /* --space-3 */
}

/* Variante contornada do badge genérico (`.badge`, definido acima junto com
   `.badge--gold`) — mesma composição do mockup
   (`docs/mockups/home/home.css:157,160`). `--text-gold` (referenciado ali
   mas sem definição em nenhum arquivo de mockup deste repo) é tratado como
   `gold-600`, o mesmo tom que este arquivo já usa em todo outro lugar para
   texto dourado (ex. `.confirm-header__pending-notice svg` acima,
   `.cart-recap__personalize.is-configured`). */
.badge--outline {
	background: transparent;
	color: var( --wp--preset--color--gold-600 );
	box-shadow: inset 0 0 0 1px var( --wp--preset--color--gold-500 );
	border-radius: 4px; /* --radius-sm */
	font-weight: 600;
	white-space: nowrap;
}
.badge--md {
	font-size: 0.875rem; /* --fs-small */
	padding: 4px 10px;
}

.confirm-card {
	max-width: 800px;
	margin: 0 auto;
	padding: 24px; /* --space-6 */
	border: 1px solid var( --wp--preset--color--line-200 );
	border-radius: 8px; /* --radius-md */
	box-shadow: 0 2px 6px rgba( 0, 25, 50, 0.08 ); /* --shadow-sm */
	background: var( --wp--preset--color--white );
}
.confirm-card__section:not( :last-child ) {
	margin-bottom: 24px; /* --space-6 */
}
.confirm-card__heading {
	margin: 0 0 12px; /* --space-3 */
	font-size: 0.75rem; /* --fs-label */
	font-weight: 600; /* --fw-semibold */
	letter-spacing: 0.08em; /* --ls-wide */
	text-transform: uppercase;
	color: var( --wp--preset--color--navy-900 );
	padding-bottom: 8px; /* --space-2 */
	border-bottom: 1px solid var( --wp--preset--color--line-200 );
}