/* ==========================================================================
   Chase — Minha conta no design system

   Duas telas em uma: a de quem NÃO entrou, com os formulários de acesso e de
   cadastro lado a lado, e a de quem entrou, com o menu da conta à esquerda e o
   conteúdo do endpoint à direita.

   O handoff não tem nenhuma das duas. O que vale aqui é a linguagem das telas
   já traduzidas: o cartão do resumo do carrinho, a coluna de 240px dos filtros
   da loja, e o botão amarelo de sempre.

   ── O QUE JÁ ESTAVA CERTO, E NÃO SE REFAZ ──

   O menu da conta logada já é um cartão desde a 1.0.9, com o ícone do
   Storefront desflutuado e o item ativo marcado por uma borda à esquerda. Os
   tokens dele passaram pela ponte junto com o resto, então ele já chegou aqui
   no azul novo. Este arquivo não repete nada daquilo — só troca os floats de
   30% e 68% por grade e acerta o contêiner.

   ── O QUE NÃO FOI MEDIDO, E POR QUÊ ──

   A TELA DE QUEM ESTÁ LOGADO. Ver os endpoints — pedidos, endereços, detalhes
   da conta — exige entrar com senha, e digitar senha em formulário é coisa que
   eu não faço. As regras da seção 6 vêm do markup do template
   `myaccount/navigation.php` e do que o `woocommerce.css` do projeto já
   documenta sobre os floats do Storefront, e precisam de olho humano.

   A tela de quem NÃO entrou foi medida no navegador, e é a que qualquer
   visitante vê.
   ========================================================================== */

/* ==========================================================================
   1. Contêiner e título
   ========================================================================== */

body.woocommerce-account #content > .col-full {
  box-sizing: border-box;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--container-pad) 0;
}

body.woocommerce-account .site-main,
body.woocommerce-account .content-area,
body.woocommerce-account .site-main > article.hentry {
  margin-bottom: 0;
}

body.woocommerce-account .entry-header {
  margin: 0 0 var(--space-6);
  padding: 0;
  border: 0;
}

body.woocommerce-account .entry-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
}

/* ==========================================================================
   2. Acesso e cadastro, lado a lado

   O Storefront flutua as duas colunas em 41,17% e 52,94% — as mesmas
   proporções da página de produto, e pela mesma razão histórica. Aqui elas são
   IGUAIS: entrar e cadastrar valem o mesmo para a loja, e uma coluna maior que
   a outra sugere uma hierarquia que não existe.

   Cada uma vira um `Card` no tom padrão do handoff, igual ao resumo do
   carrinho: `--surface-card`, `radius-lg`, `--shadow-md`, recuo de
   `--space-6`.
   ========================================================================== */

body.woocommerce-account #customer_login.col2-set,
body.woocommerce-account .u-columns.col2-set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  align-items: start;
}

body.woocommerce-account .u-columns.col2-set::before,
body.woocommerce-account .u-columns.col2-set::after {
  content: none;
}

/* O `#customer_login` NO SELETOR NAO E CAPRICHO.

   O Storefront escreve `.col2-set#customer_login .col-1 { width: 41.1765% }`,
   e ID vence qualquer quantidade de classe — a conta e (1,2,0) contra os
   (0,3,1) de um seletor so de classes. Medido sem ele: o cartao ficou com
   239px dentro de uma trilha de 580.

   E o mesmo id que o proprio WooCommerce poe no `<div>`, entao o seletor nao
   inventa nada — so iguala a arma. */
body.woocommerce-account #customer_login.col2-set > .u-column1,
body.woocommerce-account #customer_login.col2-set > .u-column2 {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: var(--space-6);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* "Entrar" e "Cadastre-se" são títulos de cartão, e ficam no mesmo degrau do
   "Resumo" do carrinho. O Storefront os entrega em 30px. */
body.woocommerce-account .u-columns.col2-set > div > h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0 0 var(--space-4);
}

body.woocommerce-account .woocommerce-form {
  margin: 0;
  padding: 0;
  border: 0;
}

/* O ID PRECISA VIR AQUI TAMBEM.

   Ao acrescentar `#customer_login` na regra base para ganhar do Storefront, a
   media query ficou so com as classes — e ID vence classe em qualquer largura.
   Medido a 375px: a grade continuou em duas colunas, de 147,5px cada, com o
   botao transbordando. */
@media (max-width: 768px) {
  body.woocommerce-account #customer_login.col2-set,
  body.woocommerce-account .u-columns.col2-set {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

/* ==========================================================================
   3. Campos

   Os campos desta tela JÁ ESTAVAM no desenho novo — 52px, `radius-md` e borda
   `--border-default` — porque o `woocommerce.css` do projeto os estiliza e os
   tokens dele passaram pela ponte. Aqui entra só o que faltava: o rótulo, que
   vinha em `--text-body`, e o respiro entre um campo e o seguinte.
   ========================================================================== */

body.woocommerce-account .woocommerce-form-row {
  margin: 0 0 var(--space-4);
  padding: 0;
}

body.woocommerce-account .woocommerce-form-row label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
}

body.woocommerce-account .required {
  color: var(--danger-500);
  text-decoration: none;
}

/* O aviso de "sua senha será enviada por e-mail" e afins. */
body.woocommerce-account .woocommerce-privacy-policy-text,
body.woocommerce-account .woocommerce-form__label-for-checkbox ~ p,
body.woocommerce-account form .woocommerce-privacy-policy-text p {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ==========================================================================
   4. Caixa de marcação "Lembrar-me"

   Era a caixa crua do navegador, 13×13 e quadrada. Vai para a mesma do filtro
   da loja e do checkout: 20×20, `radius-sm`, borda em `--border-strong`, e
   marcada em `--action-primary`.

   `accent-color` faz o trabalho numa linha e mantém o controle NATIVO — não há
   `<span>` desenhado por cima, então o estado marcado continua sendo o do
   sistema operacional, com o comportamento de teclado e de leitor de tela que
   vem junto. É a escolha certa quando o markup não permite envolver o campo,
   que é o caso aqui.
   ========================================================================== */

/* `[type='checkbox']` a mais pelo mesmo motivo de sempre: o Storefront escreve
   `.form-row input[type="checkbox"] { width: auto }`, que empata em (0,2,1)
   com um seletor nosso de duas classes — e ele carrega depois. Medido: a
   altura de 20px aplicou e a largura ficou nos 13 do padrao do navegador. */
body.woocommerce-account input.woocommerce-form__input-checkbox[type='checkbox'] {
  width: 20px;
  height: 20px;
  margin: 0 var(--space-2) 0 0;
  vertical-align: middle;
  accent-color: var(--action-primary);
}

body.woocommerce-account .woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-base);
  color: var(--text-body);
  cursor: pointer;
}

/* ==========================================================================
   5. Botões

   O Storefront entrega cinza `#eee`, quadrado, na fonte dele. Viram o
   `Button.jsx` na variante `accent`, tamanho `lg` — o mesmo amarelo do
   "Adicionar ao carrinho" e do "Finalizar pedido".

   OS DOIS SÃO AMARELOS de propósito. Entrar e cadastrar são cada um a ação
   principal do SEU cartão, e estão separados por 32px e por uma moldura —
   então não competem como competiriam dois botões lado a lado. Rebaixar o
   cadastro a secundário desencorajaria justamente o cliente novo.
   ========================================================================== */

body.woocommerce-account .woocommerce-form button[type='submit'],
body.woocommerce-account .woocommerce-Button,
body.woocommerce-account .woocommerce-MyAccount-content .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 14px 24px;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--action-accent);
  color: var(--text-on-yellow);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}

body.woocommerce-account .woocommerce-form button[type='submit']:hover,
body.woocommerce-account .woocommerce-form button[type='submit']:focus-visible,
body.woocommerce-account .woocommerce-Button:hover,
body.woocommerce-account .woocommerce-Button:focus-visible,
body.woocommerce-account .woocommerce-MyAccount-content .button:hover,
body.woocommerce-account .woocommerce-MyAccount-content .button:focus-visible {
  background: var(--action-accent-hover);
  color: var(--text-on-yellow);
}

/* "Perdeu sua senha?" é link, não botão. */
body.woocommerce-account .woocommerce-LostPassword {
  margin: var(--space-4) 0 0;
}

body.woocommerce-account .woocommerce-LostPassword a {
  font-size: var(--text-sm);
  color: var(--text-link);
  text-decoration: none;
}

body.woocommerce-account .woocommerce-LostPassword a:hover,
body.woocommerce-account .woocommerce-LostPassword a:focus-visible {
  color: var(--text-link-hover);
  text-decoration: underline;
}

/* ==========================================================================
   6. A conta de quem entrou

   ATENÇÃO: esta seção NÃO FOI MEDIDA no navegador — ver a nota do cabeçalho.

   O `woocommerce-layout.css` do WooCommerce flutua o menu em 30% e o conteúdo
   em 68%, sem media query nenhuma. É uma das armadilhas que o projeto já
   documenta, e o CSS atual só a desfaz abaixo de 768px.

   A coluna do menu passa a 240px, que é a mesma da lateral de filtros da loja
   — duas colunas de navegação com larguras diferentes no mesmo site não teriam
   por quê.
   ========================================================================== */

body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  margin: 0;
}

body.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper + .woocommerce-MyAccount-navigation,
body.woocommerce-account .entry-content > .woocommerce {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

/* O contêiner de avisos e qualquer bloco solto atravessam as duas colunas. */
body.woocommerce-account .entry-content > .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce-account .entry-content > .woocommerce > .u-columns {
  grid-column: 1 / -1;
}

@media (max-width: 1024px) {
  body.woocommerce-account .entry-content > .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}

/* ==========================================================================
   7. Tabelas de pedidos e endereços

   Mesmo desenho das tabelas das páginas de conteúdo: sem moldura pesada, linha
   de 1px em `--border-subtle`, cabeçalho na família de display.
   ========================================================================== */

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  margin: 0 0 var(--space-6);
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  font-size: var(--text-sm);
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
  padding: var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0 0 var(--space-4);
}

body.woocommerce-account .woocommerce-MyAccount-content p {
  margin: 0 0 var(--space-4);
}

body.woocommerce-account .woocommerce-MyAccount-content > :last-child {
  margin-bottom: 0;
}