/**
 * Restilização de "Minha conta" (Fase 5, Tarefa 1) — port de
 * `docs/mockups/account/account.css`, seguindo a mesma convenção de
 * `woo-blocks.css` (Fase 4, Tarefa 1): cor/tipografia só via
 * `var(--wp--preset--*)` gerado por `theme.json`, nunca hex solto; o resto
 * da escala (espaçamento/raio/sombra/tamanho de fonte) continua como valor
 * bruto, comentado com o token de `frontend/src/styles/tokens/*.css` que ele
 * espelha. Enfileirado só em `is_account_page()` (`functions.php`).
 *
 * Duas divergências deliberadas do mockup, registradas aqui:
 *
 * 1. `.account-page__title` usa `--font-family--display` (Cormorant
 *    Garamond), não `--font-accent` como o mockup — `--font-accent`
 *    (Fraunces) é reservada ao título do hero da Home por regra explícita de
 *    `frontend/src/styles/tokens/typography.css` ("ACCENT ONLY... Never
 *    section headings"), e nem chega a existir como preset em `theme.json`
 *    (só `body`/`display`). "Minha conta" é um título de documento comum,
 *    não um hero — mesma família que `.checkout-page__title` já usa.
 * 2. As abas (`.account-tabs__list`) são navegação de VERDADE (cada uma é
 *    uma URL/endpoint própria do WooCommerce, `aria-current="page"` na
 *    ativa) — o mockup usava `role="tablist"`/`aria-selected`/JS para trocar
 *    painel sem navegar. Sem JS de tab aqui: `Account_Menu::items()` e as
 *    URLs de cada endpoint já resolvem isso no servidor.
 * 3. (Tarefa 3) `.form-field select` some do mockup original (que não tinha
 *    campo de Tipo de pessoa) — acrescentado aqui com a mesma receita
 *    visual de `.form-field input`, mesmo padrão já usado por
 *    `woo-blocks.css` para o Checkout Block.
 * 4. (Tarefa 3, ajuste pós-revisão) `.form-row--nested` é novo — o mockup
 *    não precisava dele porque usava um único campo "Nome completo"; este
 *    projeto mantém nome/sobrenome nativos separados (ver
 *    `form-edit-account.php`), então a primeira coluna da linha Nome/E-mail
 *    é ela mesma uma `.form-row--2` aninhada.
 * 5. (Tarefa 6) `.auth-page` (Entrar/Criar conta/Recuperar senha/Definir nova
 *    senha) NÃO porta `docs/mockups/account/login.html`/`register.html` — a
 *    Pendência 1 do plano (nenhum mockup aprovado) registra por que: os dois
 *    arquivos existem no repositório, mas replicam o cabeçalho completo do
 *    Next.js (busca, megamenu, CTAs), inviável de duplicar sem reimplementar
 *    o frontend inteiro dentro do WordPress headless. A decisão adotada foi
 *    reaproveitar o chrome global já usado por toda outra tela nativa deste
 *    tema (`wp:template-part` de header/footer, o mesmo de Carrinho/
 *    Checkout/Cotação/Personalização) e o padrão de formulário de
 *    `docs/mockups/cart/cotacao.html`: rótulos visíveis, coluna única,
 *    `.form-field`/`.account-form` já existentes, CTA `.btn.btn--navy.btn--block`
 *    de largura total (não `.btn--gold`, reservado a CTAs secundários/
 *    downloads em outras telas).
 */

#main {
	padding-top: 140px; /* sem hero nesta página — mesmo ajuste do carrinho/checkout */
}

.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-500 );
}
.breadcrumb__item:not(:last-child)::after {
	content: '/';
	margin-left: 8px; /* --space-2 */
	color: var( --wp--preset--color--line-200 );
}
.breadcrumb__link {
	color: var( --wp--preset--color--ink-500 );
}
.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; /* --fw-medium */
}

.account-page {
	padding-block: 8px 64px; /* --space-2 / --space-16 */
}
.account-page__title {
	margin: 0 0 8px; /* --space-2 */
	font-family: var( --wp--preset--font-family--display ); /* ver nota 1 no topo do arquivo */
	font-size: 1.875rem; /* --fs-h1 */
	font-weight: 600; /* --fw-semibold */
	color: var( --wp--preset--color--navy-900 );
}
.account-page__welcome-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px; /* --space-4 */
	margin-bottom: 32px; /* --space-8 */
}
.account-page__welcome-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px; /* --space-3 */
}
.account-page__welcome {
	margin: 0;
	font-size: 1.0625rem; /* --fs-lead */
	color: var( --wp--preset--color--ink-900 );
}
.account-page__welcome-name {
	font-weight: 600; /* --fw-semibold */
	color: var( --wp--preset--color--navy-900 );
}

.account-section {
	margin-bottom: 48px; /* --space-12 */
}
.account-section:last-child {
	margin-bottom: 0;
}
.account-section__title {
	margin: 0 0 24px; /* --space-6 */
	font-size: 1.5rem; /* --fs-h2 */
	font-weight: 600; /* --fw-semibold */
	color: var( --wp--preset--color--navy-900 );
	padding-bottom: 12px; /* --space-3 */
	border-bottom: 1px solid var( --wp--preset--color--line-200 );
}

/* ---------- Abas (Meus pedidos / Dados cadastrais / Alterar senha) ----------
   Navegação real (uma URL por aba, `woocommerce/myaccount/navigation.php`
   sobrescrito) — ver nota 2 no topo do arquivo. */
.account-tabs__list {
	display: flex;
	gap: 8px; /* --space-2 */
	margin-bottom: 32px; /* --space-8 */
	border-bottom: 1px solid var( --wp--preset--color--line-200 );
}
.account-tabs__tab {
	padding: 12px 16px; /* --space-3 / --space-4 */
	margin-bottom: -1px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.8125rem; /* --fs-small */
	font-weight: 600; /* --fw-semibold */
	letter-spacing: 0.08em; /* --ls-wide */
	text-transform: uppercase;
	color: var( --wp--preset--color--ink-500 );
}
.account-tabs__tab:hover {
	color: var( --wp--preset--color--navy-900 );
}
.account-tabs__tab.is-active {
	color: var( --wp--preset--color--navy-900 );
	border-bottom-color: var( --wp--preset--color--gold-500 );
}

/* ---------- Campo de formulário (mesma receita de `.form-field` do
   Carrinho/Checkout — redeclarada aqui porque `account.css`/`woo-blocks.css`
   são folhas irmãs, nenhuma importa a outra). ---------- */
.form-field {
	display: flex;
	flex-direction: column;
	gap: 8px; /* --space-2 */
}
.form-field label {
	font-size: 0.6875rem; /* --fs-caption */
	font-weight: 600; /* --fw-semibold */
	letter-spacing: 0.16em; /* --ls-eyebrow */
	text-transform: uppercase;
	color: var( --wp--preset--color--navy-900 );
}
.form-field input,
.form-field select {
	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-row {
	display: grid;
	gap: 16px; /* --space-4 */
	margin-bottom: 16px; /* --space-4 */
}
@media ( min-width: 560px ) {
	.form-row--2 {
		grid-template-columns: 1fr 1fr;
	}
}
/* (Tarefa 3, ajuste pós-revisão) Nome/Sobrenome viram uma `.form-row--2`
   ANINHADA dentro da primeira coluna da linha Nome/E-mail (ver
   `form-edit-account.php`) — sem `--nested`, a margem inferior própria da
   grade interna desalinharia essa coluna com o campo de E-mail ao lado,
   que não tem grade nenhuma dentro de si. */
.form-row--nested {
	margin-bottom: 0;
}

.account-form {
	max-width: 640px;
}
.account-form__fieldset {
	border: none;
	padding: 0;
	margin: 0 0 20px; /* --space-5 */
}
.account-form__legend {
	padding: 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 );
}
.account-form input[readonly] {
	background: var( --wp--preset--color--cream-100 );
	color: var( --wp--preset--color--ink-500 );
	cursor: not-allowed;
}

/* ---------- Histórico de pedidos/cotações (Tarefa 2) ---------- */
.orders-table {
	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 */
	overflow-x: auto;
}
.orders-table table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
}
.orders-table thead th {
	background: var( --wp--preset--color--navy-900 );
	color: var( --wp--preset--color--white );
	font-size: 0.75rem; /* --fs-label */
	font-weight: 600; /* --fw-semibold */
	letter-spacing: 0.08em; /* --ls-wide */
	text-transform: uppercase;
	text-align: left;
	padding: 12px 16px; /* --space-3 / --space-4 */
	border-top: 3px solid var( --wp--preset--color--gold-500 );
}
.orders-table tbody td {
	padding: 16px; /* --space-4 */
	font-size: 0.8125rem; /* --fs-small */
	color: var( --wp--preset--color--ink-900 );
	border-top: 1px solid var( --wp--preset--color--line-200 );
	vertical-align: middle;
}
.orders-table tbody tr:nth-child(even) {
	background: var( --wp--preset--color--cream-50 );
}
.orders-table__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px; /* --space-3 */
	white-space: nowrap;
}
.orders-table__icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 4px; /* --radius-sm */
	color: var( --wp--preset--color--gold-600 );
}
.orders-table__icon-link svg {
	width: 18px;
	height: 18px;
}
.orders-table__icon-link:hover {
	background: var( --wp--preset--color--cream-100 );
	color: var( --wp--preset--color--gold-600 );
}

/* `#25D366` = o mesmo verde do WhatsApp já usado em `.fab--whatsapp` — uma
   cor de marca externa intencional, sem token próprio em `theme.json` (o
   mesmo caso já discutido em `woo-blocks.css` para `.confirm-icon`, que
   optou por `gold-500` em vez desse verde por ali não haver diferenciação
   semântica a perder). Aqui a diferenciação IMPORTA: a tabela de pedidos já
   usa `.badge--gold`/`.badge--outline` para "respondida"/"aguardando" — sem
   um terceiro tom, "Concluído" ficaria visualmente idêntico a "Cotação
   respondida". Escopado só a esta folha, nunca promovido a uma variante
   global em `woo-blocks.css`. */
.badge--green {
	background: #25d366;
	color: var( --wp--preset--color--white );
}

/* ---------- Cartão de detalhe do pedido (Tarefa 3) ---------- */
.order-detail__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px; /* --space-3 */
	margin-bottom: 8px; /* --space-2 */
}
.order-detail__header .account-page__title {
	margin-bottom: 0;
}
.order-detail__date {
	margin: 0 0 32px; /* --space-8 */
	font-size: 0.8125rem; /* --fs-small */
	color: var( --wp--preset--color--ink-500 );
}
.order-card {
	max-width: 800px;
	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 );
}
.order-card__section:not(:last-child) {
	margin-bottom: 24px; /* --space-6 */
}
.order-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 );
}
.order-card__items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.order-card__items li {
	display: flex;
	justify-content: space-between;
	gap: 12px; /* --space-3 */
	padding-block: 8px; /* --space-2 */
	font-size: 0.8125rem; /* --fs-small */
	color: var( --wp--preset--color--ink-900 );
	border-top: 1px solid var( --wp--preset--color--line-200 );
}
.order-card__items li:first-child {
	border-top: none;
}
.order-card__items li span:first-child {
	min-width: 0;
}
/* Fase 5, Tarefa 5 — o mockup (pedido.html) só tinha um `<span>` de texto
   por item ("Nome × Qtd"); o brief desta tarefa pede imagem/SKU/cor além do
   nome, então este trio de classes é novo (`.order-card__item-media` é o
   PRIMEIRO `<span>` do `<li>`, preenchendo o mesmo slot que
   `.order-card__items li span:first-child` já estiliza acima — o `<li>`
   continua com exatamente dois filhos diretos, sem mudar o `justify-content:
   space-between` herdado). */
.order-card__item-media {
	display: flex;
	align-items: center;
	gap: 12px; /* --space-3 */
	min-width: 0;
}
.order-card__item-thumb {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 4px; /* --radius-sm */
	border: 1px solid var( --wp--preset--color--line-200 );
}
.order-card__item-name {
	display: block;
	font-weight: 500; /* --fw-medium */
	color: var( --wp--preset--color--navy-900 );
}
.order-card__item-meta {
	display: block;
	font-size: 0.75rem; /* --fs-caption */
	color: var( --wp--preset--color--ink-500 );
}
.order-card__item-price {
	flex: 0 0 auto;
	white-space: nowrap;
}
.order-card__row {
	display: flex;
	justify-content: space-between;
	gap: 12px; /* --space-3 */
	padding-block: 8px; /* --space-2 */
	font-size: 0.8125rem; /* --fs-small */
	color: var( --wp--preset--color--ink-900 );
	border-top: 1px solid var( --wp--preset--color--line-200 );
}
.order-card__row span:first-child {
	min-width: 0;
}
.order-card__row--total {
	margin-top: 8px; /* --space-2 */
	padding-top: 12px; /* --space-3 */
	border-top: 2px solid var( --wp--preset--color--ink-300 );
	font-size: 1.0625rem; /* --fs-lead */
	font-weight: 700; /* --fw-bold */
	color: var( --wp--preset--color--navy-900 );
}
.order-card__row--total span:last-child {
	color: var( --wp--preset--color--gold-600 );
}
.order-card__text {
	margin: 0;
	font-size: 0.8125rem; /* --fs-small */
	line-height: 1.65; /* --lh-body */
	color: var( --wp--preset--color--ink-900 );
}
.order-card__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px; /* --space-6 */
	margin-top: 24px; /* --space-6 */
	padding-top: 24px; /* --space-6 */
	border-top: 1px solid var( --wp--preset--color--line-200 );
}
@media ( min-width: 720px ) {
	.order-card__grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}
.order-card__grid .order-card__section:not(:last-child) {
	margin-bottom: 0;
}

.order-detail__cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px; /* --space-4 */
	margin-top: 32px; /* --space-8 */
}
/* Fase 5, Tarefa 5 — erro de rede/servidor do "Refazer pedido"
   (`account-reorder.js`). Mesma receita de `.personalize-error`
   (woo-blocks.css): a paleta do tema não tem um tom vermelho/de alerta
   dedicado, `ink-900` é o mais escuro/visível disponível. */
.reorder-error {
	flex: 1 1 100%;
	margin: 0;
	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 );
}
.order-detail__cta-row [aria-disabled="true"],
.orders-table__icon-link[aria-disabled="true"] {
	pointer-events: none;
	opacity: 0.6;
}

/* ---------- Entrar / Criar conta / Recuperar senha / Definir nova senha
   (Tarefa 6) — ver nota 5 no topo do arquivo. Coluna única centralizada,
   reaproveitando `.form-field`/`.account-form` já existentes; `.btn--navy`/
   `.btn--block` vêm de `woo-blocks.css` (já enfileirado em `is_account_page()`,
   `functions.php`). ---------- */
.auth-page {
	max-width: 480px;
	margin-inline: auto;
}
.auth-page__card {
	padding: 32px; /* --space-8 */
	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 );
}
.auth-page__card + .auth-page__card {
	margin-top: 32px; /* --space-8 */
}
.auth-page__subtitle {
	margin: 0 0 24px; /* --space-6 */
	font-size: 0.9375rem; /* --fs-body */
	line-height: 1.65; /* --lh-body */
	color: var( --wp--preset--color--ink-500 );
}
.auth-page__switch {
	margin: 20px 0 0; /* --space-5 */
	font-size: 0.8125rem; /* --fs-small */
	text-align: center;
	color: var( --wp--preset--color--ink-500 );
}
.auth-page__switch a {
	font-weight: 600; /* --fw-semibold */
	color: var( --wp--preset--color--gold-600 );
}
.auth-page__link {
	font-size: 0.8125rem; /* --fs-small */
	color: var( --wp--preset--color--gold-600 );
}
/* Linha "Lembrar-me" / "Esqueceu a senha?" — as duas únicas telas
   (`myaccount/form-login.php`, `global/form-login.php`) que precisam de dois
   elementos lado a lado sem virar uma grade de campos (`.form-row--2` é
   sempre um par de INPUTS, nunca um checkbox + um link). */
.auth-page__row-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px; /* --space-4 */
	margin-bottom: 20px; /* --space-5 */
}
/* Aviso de cadastro pendente de aprovação (`docs/mockups/account/login.html`)
   é do fluxo de aprovação B2B (fora do escopo desta tarefa — ver
   `docs/specs/2026-08-10-account-tier-price-gating-design.md`) — não portado
   aqui de propósito, nenhuma classe reservada para ele nesta tarefa. */