/* ==========================================================================
   Minha conta

   Carregado só em `is_account_page()`. Duas telas com layouts diferentes:
   deslogado, as colunas de entrar e cadastrar; logado, a fileira de navegação
   acima do conteúdo — ver o comentário em `woocommerce/myaccount/navigation.php`.
   ========================================================================== */

.woocommerce-account .woocommerce {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   Entrar e cadastrar
   -------------------------------------------------------------------------- */

/*
 * O Storefront empilha as duas colunas com `float` e larguras em porcentagem
 * herdadas de um grid de 1998px. Flex resolve as duas de uma vez, e o `gap`
 * substitui as margens negativas que sobravam na borda.
 */
.woocommerce-account #customer_login.u-columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-8);
	margin: var(--sp-6) 0 var(--sp-16);
}

.woocommerce-account #customer_login > .u-column1,
.woocommerce-account #customer_login > .u-column2 {
	flex: 1 1 340px;
	width: auto;
	float: none;
	margin: 0;
	padding: var(--sp-8);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background-color: var(--paper);
}

.woocommerce-account #customer_login h2 {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--ink);
}

/*
 * A frase de apoio de cada coluna. Sem ela as duas caixas são idênticas de
 * relance, e quem já tem conta hesita entre elas — o cadastro pede um campo
 * só, então nem o tamanho do formulário diferencia.
 *
 * Ela é impressa por `woocommerce_login_form_start`, que é o primeiro ponto
 * DENTRO do formulário — daí o seletor não poder partir do `h2`, que fica
 * fora dele.
 */
.coe-conta__apoio {
	margin: 0 0 var(--sp-6);
	font-family: var(--font-ui);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink-muted);
}

.woocommerce-account .woocommerce-form-row {
	margin-bottom: var(--sp-4);
}

.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .woocommerce-EditAccountForm label,
.woocommerce-account .woocommerce-address-fields label {
	display: block;
	margin-bottom: var(--sp-1);
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}

.woocommerce-account input.input-text,
.woocommerce-account input[type="password"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account select {
	width: 100%;
	height: var(--input-h);
	padding-inline: var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background-color: var(--paper);
	font-family: var(--font-ui);
	font-size: 16px;
	color: var(--ink);
}

.woocommerce-account input.input-text:focus,
.woocommerce-account select:focus {
	border-color: var(--navy);
	outline: 2px solid var(--navy);
	outline-offset: -2px;
}

/*
 * Botões da conta. O laranja é a cor de compra e não deve aparecer fora dela;
 * entrar e salvar são ações de serviço, então vão em navy cheio.
 *
 * Os seletores carregam `.woocommerce-account` para passar do
 * `.woocommerce button.button` do Storefront, que pesa (0,2,1).
 */
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input.button,
.woocommerce-account .woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--btn-h);
	padding-inline: var(--sp-8);
	border: 0;
	border-radius: var(--radius);
	background-color: var(--navy);
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	color: var(--paper);
}

.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce input.button:hover,
.woocommerce-account .woocommerce a.button:hover {
	background-color: var(--navy-hover);
	color: var(--paper);
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-bottom: var(--sp-4);
	font-size: 14px;
	font-weight: 400;
	color: var(--ink-muted);
}

.woocommerce-account .woocommerce-LostPassword {
	margin: var(--sp-4) 0 0;
	font-size: 14px;
}

.woocommerce-account .woocommerce-LostPassword a {
	color: var(--navy);
	text-decoration: underline;
}

/* A explicação da senha gerada, no cadastro. */
.woocommerce-account .woocommerce-privacy-policy-text,
.woocommerce-account .woocommerce-form-register em {
	display: block;
	margin-top: var(--sp-3);
	font-size: 13px;
	font-style: normal;
	line-height: 1.5;
	color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Logado: fileira de navegação e conteúdo

   A navegação era coluna lateral de 240px. Virou fileira horizontal acima do
   conteúdo: a coluna comia um quarto da tela para exibir cinco links, e no
   celular empurrava o conteúdo para baixo de uma lista longa.
   -------------------------------------------------------------------------- */

/*
 * O WooCommerce imprime um `.woocommerce-notices-wrapper` como PRIMEIRO filho,
 * mesmo sem aviso nenhum. Vazio, ele só empilha margem entre o breadcrumb e a
 * fileira.
 */
.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper:empty {
	display: none;
}

/*
 * `.woocommerce-MyAccount-navigation` sai de 25% flutuando à esquerda e
 * `.woocommerce-MyAccount-content` sai de 70% flutuando à direita. Os dois
 * viram bloco de largura inteira, um debaixo do outro.
 *
 * Os seletores repetem `.woocommerce` porque é assim que o `woocommerce.css`
 * escreve as regras de float — sem isso a folha do plugin vence por
 * especificidade e as colunas voltam.
 */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce .woocommerce-MyAccount-navigation,
.woocommerce .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
	margin: 0;
}

/*
 * O conteúdo centralizado, com medida de leitura. Formulário de endereço e
 * tabela de pedidos ocupando 1280px viram linhas longas demais — o olho perde
 * a coluna do lado direito ao voltar para a esquerda.
 */
.woocommerce-account .woocommerce-MyAccount-content {
	max-width: 860px;
	margin-inline: auto;
	padding-top: var(--sp-8);
}

/*
 * O Storefront injeta o ícone dele em cada link da conta por
 * `a::before { content: "\f3fd" }`, com a fonte de ícones do WooCommerce.
 * Medido: sai uma segunda fileira de ícones, apagada, logo acima da nossa.
 *
 * Some na origem. O tema desenha os ícones em SVG inline justamente para não
 * depender de fonte de ícone — que falha suja, renderizando o código do
 * caractere como texto no meio do layout.
 */
.coe-conta-nav a::before,
.woocommerce-MyAccount-navigation li a::before {
	content: none !important;
	display: none !important;
}

.coe-conta-nav {
	border-bottom: 1px solid var(--line);
}

.coe-conta-nav__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.coe-conta-nav__item {
	margin: 0;
	/* O WooCommerce dá borda de baixo a cada <li> da navegação. */
	border: 0;
}

/*
 * O botão inteiro é o alvo: o <a> é quem tem o padding, não o <li>. Alvo de
 * 88px de largura por 76px de altura, bem acima dos 44px do contrato — numa
 * fileira de cinco, tocar no vizinho por engano custa uma navegação.
 */
.coe-conta-nav__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-width: 88px;
	padding: var(--sp-4) var(--sp-3);
	border-bottom: 2px solid transparent;
	border-radius: var(--radius) var(--radius) 0 0;
	color: var(--ink-muted);
	font-family: var(--font-ui);
	text-decoration: none;
}

.coe-conta-nav__link:hover,
.coe-conta-nav__link:focus-visible {
	background-color: var(--paper-2);
	color: var(--navy);
}

.coe-conta-nav__icone {
	display: flex;
	line-height: 0;
	color: inherit;
}

.coe-conta-nav__rotulo {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

/*
 * Página atual: fio navy embaixo, do lado de dentro da borda da fileira.
 *
 * A cor sozinha não pode carregar a informação — o fio de 2px é o segundo
 * sinal, para quem não distingue navy de cinza. É a mesma solução do hover do
 * menu principal, que usa o fio laranja.
 */
.coe-conta-nav__item.is-active .coe-conta-nav__link,
.coe-conta-nav__link[aria-current="page"] {
	border-bottom-color: var(--navy);
	color: var(--navy);
}

/* --------------------------------------------------------------------------
   Painel
   -------------------------------------------------------------------------- */

.coe-conta__ola {
	margin: 0 0 var(--sp-6);
	font-family: var(--font-ui);
	font-size: 18px;
	line-height: 1.4;
	color: var(--ink);
}

.coe-conta__sair {
	margin-left: var(--sp-2);
	font-size: 14px;
	color: var(--ink-muted);
	text-decoration: underline;
}

.coe-conta__atalhos {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.coe-conta__cartao {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
	padding: var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background-color: var(--paper);
	color: var(--ink);
	text-decoration: none;
}

.coe-conta__cartao:hover {
	border-color: var(--navy);
	background-color: var(--paper-2);
}

.coe-conta__icone {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius);
	background-color: var(--paper-2);
	color: var(--navy);
}

.coe-conta__cartao:hover .coe-conta__icone {
	background-color: var(--paper);
}

.coe-conta__texto {
	display: block;
}

.coe-conta__titulo {
	display: block;
	font-family: var(--font-ui);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}

.coe-conta__descricao {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Tabelas e avisos
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-table--order-details {
	width: 100%;
	border: 1px solid var(--line);
	border-collapse: collapse;
	border-radius: var(--radius);
	background-color: var(--paper);
	overflow: hidden;
}

.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account .woocommerce-table--order-details th,
.woocommerce-account .woocommerce-table--order-details td {
	padding: var(--sp-3) var(--sp-4);
	border: 0;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
	text-align: left;
}

.woocommerce-account .woocommerce-orders-table thead th {
	background-color: var(--paper-2);
	font-family: var(--font-ui);
	font-weight: 600;
	color: var(--ink);
}

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	margin: 0 0 var(--sp-6);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--line);
	border-left: 4px solid var(--navy);
	border-radius: var(--radius);
	background-color: var(--paper-2);
	font-family: var(--font-ui);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink);
	list-style: none;
}

.woocommerce-account .woocommerce-error {
	border-left-color: #b32d2e;
}

.woocommerce-account .woocommerce-message a,
.woocommerce-account .woocommerce-info a,
.woocommerce-account .woocommerce-error a {
	color: var(--navy);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Telas estreitas
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	/*
	 * A fileira rola na horizontal em vez de quebrar em duas linhas. Com seis
	 * endpoints em 390px, quebrar deixaria a segunda linha com um item só,
	 * centralizado e solto — parece erro, não layout.
	 *
	 * `justify-content` volta a ser `flex-start`: com `center` e conteúdo mais
	 * largo que a caixa, o começo da lista fica cortado e inalcançável.
	 */
	.coe-conta-nav__lista {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.coe-conta-nav__lista::-webkit-scrollbar {
		display: none;
	}

	.coe-conta-nav__item {
		flex: 0 0 auto;
	}

	.coe-conta-nav__link {
		min-width: 76px;
		padding: var(--sp-3) var(--sp-2);
	}

	.coe-conta-nav__rotulo {
		font-size: 12px;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		padding-top: var(--sp-6);
	}

	.woocommerce-account #customer_login > .u-column1,
	.woocommerce-account #customer_login > .u-column2 {
		padding: var(--sp-6);
	}
}

/* --------------------------------------------------------------------------
   Correções do Storefront

   O tema pai desenha esta tela por conta própria, com seletores de quatro
   classes que as regras acima não alcançam por especificidade. Cada bloco
   abaixo diz qual seletor está vencendo — sem `!important`, que só empurraria
   a briga para a próxima regra.
   -------------------------------------------------------------------------- */

/*
 * Sublinhado nos cartões do painel. Vem de `.hentry .entry-content a
 * { text-decoration: underline }` — regra pensada para link dentro de texto
 * corrido, que num cartão inteiro clicável risca título e descrição.
 */
.woocommerce-account .entry-content .coe-conta__cartao,
.woocommerce-account .entry-content .coe-conta__cartao:hover {
	text-decoration: none;
}

/*
 * Mesma origem, agora no botão "Ver" da tabela de pedidos: ele é um `<a>`, cai
 * na mesma regra do pai e sai com o rótulo riscado dentro do botão.
 */
.woocommerce-account .entry-content a.woocommerce-button,
.woocommerce-account .entry-content a.woocommerce-button:hover {
	text-decoration: none;
}

/*
 * O ícone dos avisos. O Storefront desenha `.woocommerce-info::before` como um
 * glifo do Font Awesome em branco, `position: absolute` no canto esquerdo, e
 * reserva o espaço dele com `padding-left: 3.5em`. Trocado o fundo azul do
 * Storefront pelo claro do tema, sobrou um ícone branco em cima de fundo claro
 * — invisível, mas ocupando a primeira palavra da frase ("Nenhum pedido foi
 * feito ainda").
 *
 * A regra `content: ""` do clearfix é do mesmo par de pseudo-elementos, então
 * o `::after` sai junto — ele só fechava float que aqui não existe.
 */
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-message::after,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-info::after,
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-error::after {
	content: none;
}

/* --------------------------------------------------------------------------
   Endereços

   Dois cartões com o mesmo desenho dos atalhos do painel. O cartão inteiro é o
   alvo — ver o cabeçalho de `woocommerce/myaccount/my-address.php`.
   -------------------------------------------------------------------------- */

.coe-enderecos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--sp-4);
}

.coe-endereco__cartao {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-2);
	height: 100%;
	padding: var(--sp-6);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background-color: var(--paper);
	color: var(--ink);
}

.woocommerce-account .entry-content .coe-endereco__cartao,
.woocommerce-account .entry-content .coe-endereco__cartao:hover {
	text-decoration: none;
}

.coe-endereco__cartao:hover {
	border-color: var(--navy);
	background-color: var(--paper-2);
}

.woocommerce-account .entry-content .coe-endereco__titulo {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}

/*
 * O endereço é o dado da tela, não legenda: sai em tinta cheia, no corpo de
 * 15px do resto da conta, com entrelinha de 1.6 — as linhas quebram por `<br>`
 * e ficavam empilhadas demais para uma pessoa conferir CEP e número de relance.
 * O tom apagado fica só para o cartão sem endereço, que é aviso.
 */
.coe-endereco__texto {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 15px;
	font-style: normal;
	line-height: 1.6;
	color: var(--ink);
}

.coe-endereco__texto--vazio {
	font-size: 14px;
	color: var(--ink-muted);
}

/*
 * Os campos adicionais do endereço — CPF, complemento e bairro — saem do
 * `CheckoutFieldsFrontend::render_address_fields` como
 * `<br><strong>Rótulo</strong>: valor`, dentro deste mesmo `<address>`. O
 * rótulo em tinta cheia separa o nome do dado do dado em si sem precisar de
 * lista nem de tabela.
 */
.coe-endereco__texto strong {
	font-weight: 600;
	color: var(--ink);
}

/*
 * A ação empurrada para o pé do cartão: com endereço cadastrado de um lado e
 * vazio do outro, os dois cartões têm alturas diferentes, e sem o `auto` a
 * palavra de ação flutuaria no meio de um deles.
 */
.coe-endereco__acao {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	margin-top: auto;
	padding-top: var(--sp-2);
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--navy);
}

.coe-endereco__cartao:hover .coe-endereco__acao {
	color: var(--navy-hover);
}

/*
 * Aviso que carrega uma ação — hoje só o "Nenhum pedido foi feito ainda" com o
 * botão "Ver produtos". O WooCommerce imprime os dois como irmãos inline dentro
 * do mesmo `<div>`, então o botão para onde a frase termina, encostado no
 * texto e fora do eixo da caixa.
 *
 * Aqui ele vira estado vazio de verdade: frase e botão empilhados e centrados,
 * com respiro em cima e embaixo. É o formato certo para uma tela cuja única
 * mensagem é "ainda não há nada, comece por aqui".
 *
 * O `:has()` é o que separa este caso dos avisos comuns — erro de validação e
 * recado de sistema continuam alinhados à esquerda, como texto deve ser. Sem
 * ele seria preciso apostar numa classe de endpoint que o WooCommerce pode
 * renomear.
 */
.woocommerce-account .woocommerce-info:has(> a.button) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-4);
	padding-block: var(--sp-8);
	text-align: center;
}

.woocommerce-account .woocommerce-info > a.button {
	float: none;
	margin: 0;
}

/* O botão de copiar o endereço, abaixo dos dois cartões. */
.coe-endereco__copiar {
	margin-top: var(--sp-6);
}