/*
Minha Conta: desde 01/08/2026 existe um template PHP próprio
(page-myaccount.php, na raiz do tema), criado só para acrescentar a faixa
visual `.pagina-header` (título) em volta do conteúdo. O miolo continua
100% default do plugin (login/pedidos/endereço/editar conta/sair seguem
vindo intactos do WooCommerce via `[woocommerce_my_account]` dentro de
`the_content()`), este arquivo continua sendo só CSS por cima das classes
nativas do WooCommerce, sem markup próprio. Mais seguro numa área de
login/pedidos/endereço.
*/

/* Flexbox, não grid: na página deslogada (login/cadastro) só existe UM filho
   (sem o menu de navegação), com grid_template_columns fixo ele ficaria
   preso na primeira faixa de 240px pensada pro menu. Com flex, um filho
   único naturalmente ocupa a largura toda. */
.woocommerce-account .woocommerce{
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-2xl);
    align-items: flex-start;
}
.woocommerce-account .woocommerce-MyAccount-navigation{
    flex: 0 0 240px;
}
.woocommerce-account .woocommerce-MyAccount-content{
    flex: 1 1 480px;
}
/* Login/cadastro (deslogado): .u-columns é filho direto de .woocommerce,
   sem passar por .woocommerce-MyAccount-content, precisa da largura toda.
   O CSS padrão do WooCommerce usa float nas colunas (.u-column1/.u-column2):
   sobrescrevemos pra flex, senão o float por si só não garante lado a
   lado de forma confiável dentro do nosso layout. */
.woocommerce-account .woocommerce > .u-columns{
    flex: 1 1 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-2xl);
}
.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2{
    float: none;
    width: auto;
    flex: 1 1 320px;
}

.woocommerce-MyAccount-navigation ul{
    background: var(--cor-linho-2);
    border-radius: var(--raio-md);
    overflow: hidden;
}
.woocommerce-MyAccount-navigation li{
    border-bottom: 1px solid rgba(51,41,31,0.1);
}
.woocommerce-MyAccount-navigation li:last-child{ border-bottom: none; }
.woocommerce-MyAccount-navigation li a{
    display: block;
    padding: var(--espaco-sm) var(--espaco-md);
    font-size: var(--texto-sm);
    font-weight: 600;
    color: var(--cor-cacau);
}
.woocommerce-MyAccount-navigation li.is-active a{
    color: var(--cor-mata);
    background: var(--cor-linho);
}
.woocommerce-MyAccount-navigation li a:hover{
    color: var(--cor-terracota);
}

.woocommerce-MyAccount-content p{
    margin-bottom: var(--espaco-md);
}

/* Tabela de pedidos */
.woocommerce-orders-table{
    width: 100%;
}
.woocommerce-orders-table th,
.woocommerce-orders-table td{
    padding: var(--espaco-sm);
    border-bottom: 1px solid var(--cor-linho-2);
    text-align: left;
    font-size: var(--texto-sm);
}
.woocommerce-orders-table__cell-order-status mark{
    background: none;
    color: var(--cor-mata);
    font-weight: 700;
}

/* Endereços */
.woocommerce-Addresses{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--espaco-lg);
}
.woocommerce-Address{
    background: var(--cor-linho-2);
    border-radius: var(--raio-md);
    padding: var(--espaco-lg);
}
.woocommerce-Address-title h3{
    font-size: var(--texto-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.woocommerce-Address-title .edit{
    font-size: var(--texto-xs);
    text-transform: uppercase;
}

/* Login / Registro (página Minha Conta deslogado) */
.woocommerce-account .u-columns{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espaco-2xl);
}
@media (max-width: 767px){
    .woocommerce-account .u-columns{
        grid-template-columns: 1fr;
    }
}
.woocommerce-form-login, .woocommerce-form-register{
    background: var(--cor-linho-2);
    border-radius: var(--raio-md);
    padding: var(--espaco-xl);
}
.woocommerce-form-login .form-row, .woocommerce-form-register .form-row{
    margin-bottom: var(--espaco-md);
}
.woocommerce-form-login label, .woocommerce-form-register label{
    display: block;
    font-size: var(--texto-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cor-cacau-70);
    margin-bottom: var(--espaco-2xs);
}
.woocommerce-form-login .input-text, .woocommerce-form-register .input-text{
    width: 100%;
}
.woocommerce-form-login .woocommerce-form-login__rememberme{
    display: flex;
    align-items: center;
    gap: var(--espaco-xs);
    font-size: var(--texto-sm);
}
.woocommerce-LostPassword{
    display: block;
    margin-top: var(--espaco-sm);
    font-size: var(--texto-sm);
}
/* Achado real (auditoria de responsividade, 01/08/2026): o link "Perdeu
   sua senha?" media ~19px de altura de área clicável real (só a altura da
   linha de texto), abaixo do mínimo de 44px (WCAG 2.5.5). Padding vertical
   com display:inline-block da a folga sem mudar a posição visual do texto
   nem o tamanho da fonte. */
.woocommerce-LostPassword a{
    display: flex;
    align-items: center;
    padding-block: var(--espaco-xs);
    min-height: 44px;
}

/* Item 8 (mapeamento Fase 2): botões "Entrar"/"Cadastre-se" medidos ao vivo
   com 40px de altura, poucos px abaixo do mínimo de 44px recomendado. */
.woocommerce-form-login button[name="login"],
.woocommerce-form-register button[name="register"]{
    min-height: 44px;
}

/* Item 7: ícone "Mostrar senha" (WooCommerce core, .show-password-input)
   media 22x22px de área clicável (mesmo tamanho do ícone, sem padding,
   position:absolute). O core JÁ gera aria-label="Mostrar senha"/"Ocultar
   senha" nesse botão (confirmado ao vivo no DOM: não faltava rótulo de
   acessibilidade pra leitor de tela, só a área de toque visual era
   pequena). Aumentamos a caixa clicável pra 44x44 via min-width/min-height
   + flex centralizando o ícone, sem alterar o tamanho visual do ícone em si
   (::before do core continua 20x22px). Testado ao vivo: caixa passou de
   22x22 pra 44x44, ícone permanece centralizado dentro do campo, sem
   sobrepor texto nem vazar do campo. */
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input{
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 0;
}

/* Editar dados da conta */
.woocommerce-EditAccountForm .form-row{
    margin-bottom: var(--espaco-md);
}
.woocommerce-EditAccountForm fieldset{
    border: 1px solid var(--cor-linho-2);
    border-radius: var(--raio-md);
    padding: var(--espaco-lg);
    margin-top: var(--espaco-lg);
}
.woocommerce-EditAccountForm legend{
    font-family: var(--fonte-display);
    color: var(--cor-mata);
    padding: 0 var(--espaco-xs);
}

/* ==========================================================================
   Detalhe de um pedido (Minha Conta > Pedidos > Pedido #XXXX), 28/08/2026.

   Achado real: essa subtela nunca recebeu tratamento visual do tema. Ela usa
   os templates DEFAULT do proprio plugin WooCommerce (nenhum arquivo em
   woocommerce/myaccount/view-order.php nem woocommerce/order/*.php existe
   neste tema), entao ficava com a estetica crua do plugin por cima do resto
   do site ja com a identidade EQMS aplicada (Home/Loja/Produto/Checkout).
   Este bloco e so CSS por cima das classes nativas do WooCommerce (mesmo
   espirito do resto deste arquivo), sem template PHP proprio: nao ha
   estrutura faltando, so falta o verniz da marca.
   ========================================================================== */

/* Achado real (28/08/2026): o proprio WooCommerce ainda carrega um segundo
   arquivo de CSS legado (woocommerce-layout.css, incondicional, nao depende
   do tema) que aplica float+largura em % nestes MESMOS elementos:
   .woocommerce-MyAccount-navigation/-content (30%/68% flutuando) e
   .col2-set .col-1/.col-2 (48% flutuando, usado tambem nos 2 enderecos do
   pedido). Como a especificidade dessas regras do plugin e maior que a
   dos seletores deste arquivo (3 classes contra 1), elas venciam mesmo
   carregando depois. Sem isso a coluna de conteudo ficava estreita e os
   2 enderecos nao ficavam lado a lado (float competindo com o grid).
   Confirmado ao vivo via getComputedStyle antes e depois do fix. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-columns--addresses .woocommerce-column{
    float: none !important;
    width: auto !important;
}

/* Faixa de status ("O pedido #X foi realizado em Y e esta Z").
   Sem borda lateral colorida (ajuste 28/08, achado do hook de design: borda
   grossa de um lado so em card e o tique mais reconhecivel de UI gerada por
   IA). O acento raro do Brand Book aqui e a faixa de terracota no TOPO de
   cartoes com cabecalho (ja usada em checkout.css/.eqms-coluna-resumo), nao
   borda lateral — como este e so um paragrafo de status, sem cabecalho
   proprio, o destaque fica so no fundo + peso tipografico das marks. */
.woocommerce-MyAccount-content p:has(mark.order-status){
    background: var(--cor-linho-2);
    border-radius: var(--raio-sm);
    padding: var(--espaco-md) var(--espaco-lg);
    font-size: var(--texto-base);
    color: var(--cor-cacau-70);
    margin-bottom: var(--espaco-xl);
}
.woocommerce-MyAccount-content p:has(mark.order-status) mark{
    background: none;
    font-weight: 700;
    color: var(--cor-cacau);
}
.woocommerce-MyAccount-content p:has(mark.order-status) mark.order-status{
    color: var(--cor-terracota);
}

/* "Atualizacoes do pedido" (order updates / notas visiveis ao cliente) */
.woocommerce-MyAccount-content h2{
    font-family: var(--fonte-display);
    color: var(--cor-mata);
    font-size: var(--texto-lg);
    margin-bottom: var(--espaco-md);
}
.woocommerce-OrderUpdates{
    list-style: none;
    margin: 0 0 var(--espaco-xl);
    padding: 0;
    border-left: 2px solid var(--cor-linho-2);
}
.woocommerce-OrderUpdate{
    position: relative;
    padding: 0 0 var(--espaco-lg) var(--espaco-lg);
}
.woocommerce-OrderUpdate::before{
    content: "";
    position: absolute;
    left: -5px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cor-terracota);
}
.woocommerce-OrderUpdate-meta{
    font-size: var(--texto-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cor-cacau-70);
    margin-bottom: var(--espaco-2xs);
}
.woocommerce-OrderUpdate-description p{
    margin: 0;
    font-size: var(--texto-sm);
    color: var(--cor-cacau);
}
.woocommerce-OrderUpdate-description a{
    color: var(--cor-mata);
    text-decoration: underline;
}

/* Cartao "Detalhes do pedido" */
.woocommerce-order-details{
    background: var(--cor-branco);
    border: 1px solid var(--cor-linho-2);
    border-radius: var(--raio-lg);
    padding: var(--espaco-xl);
    box-shadow: var(--sombra-sm);
    margin-bottom: var(--espaco-xl);
}
.woocommerce-order-details__title{
    font-family: var(--fonte-display);
    color: var(--cor-mata);
    font-size: var(--texto-lg);
    margin-bottom: var(--espaco-lg);
}
.woocommerce-table--order-details{
    width: 100%;
    border-collapse: collapse;
}
.woocommerce-table--order-details thead th{
    text-align: left;
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cor-cacau-70);
    padding-bottom: var(--espaco-sm);
    border-bottom: 2px solid var(--cor-mata);
}
.woocommerce-table--order-details thead th.product-total,
.woocommerce-table--order-details tbody td.product-total,
.woocommerce-table--order-details tfoot td{
    text-align: right;
}
.woocommerce-table--order-details tbody td,
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td{
    padding: var(--espaco-sm) 0;
    border-bottom: 1px solid var(--cor-linho-2);
    font-size: var(--texto-sm);
}
.woocommerce-table--order-details .product-name a{
    color: var(--cor-cacau);
    font-weight: 700;
}
.woocommerce-table--order-details .product-quantity{
    color: var(--cor-cacau-70);
    font-weight: 400;
}
.woocommerce-table--order-details tfoot tr:last-of-type th,
.woocommerce-table--order-details tfoot tr:last-of-type td{
    border-bottom: none;
    border-top: 2px solid var(--cor-mata);
    padding-top: var(--espaco-md);
    font-family: var(--fonte-display);
    font-size: var(--texto-md);
    color: var(--cor-mata);
}

/* Enderecos de cobranca/entrega.
   Flex, nao grid: com display:grid aqui os 2 itens saiam em posicoes
   trocadas e em linhas diferentes (cobranca na coluna 2, entrega na coluna
   1 da linha de baixo), mesmo com grid-template-columns correto e sem
   nenhuma regra explicita de grid-row/grid-column disputando — achado real,
   nao investigado ate a causa exata (o proprio WooCommerce ja usa `float`
   nesses elementos por outro arquivo CSS, e mesmo neutralizando o float o
   auto-placement do grid ficava inconsistente). Flex e o padrao ja usado
   com sucesso no resto deste arquivo (nav+conteudo da Minha Conta), sem essa
   ambiguidade. */
.woocommerce-columns--addresses{
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-lg);
}
.woocommerce-column--billing-address,
.woocommerce-column--shipping-address{
    flex: 1 1 260px;
    background: var(--cor-linho-2);
    border-radius: var(--raio-md);
    padding: var(--espaco-lg);
}
.woocommerce-column__title{
    font-family: var(--fonte-corpo);
    font-size: var(--texto-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cor-terracota);
    margin-bottom: var(--espaco-sm);
}
.woocommerce-customer-details address{
    font-style: normal;
    line-height: 1.6;
    color: var(--cor-cacau);
    font-size: var(--texto-sm);
}
.woocommerce-customer-details--phone,
.woocommerce-customer-details--email{
    margin-top: var(--espaco-xs);
    color: var(--cor-cacau-70);
}

/* ================================================================= */
/* Missao 02 (2026-09-03): tela Minha Conta DESLOGADA (login/cadastro) */
/* estava visualmente rejeitada: faixa verde gigante para 1 linha,     */
/* oceano de vazio empurrando o formulario pro meio da pagina, titulos */
/* 'Entrar'/'Cadastre-se' flutuando FORA do card, cards linho-sobre-   */
/* linho quase invisiveis. Correcao estrutural (nao maquiagem):        */
/* - card real (branco + sombra + borda + raio) na COLUNA, com o h2 e  */
/*   o 'Perdeu sua senha?' DENTRO dele;                                 */
/* - faixa de titulo compacta e bloco centralizado com respiro sob     */
/*   controle. Escopo :not(.logged-in) = so a tela deslogada, o painel */
/*   do usuario logado nao e tocado. Reversivel: remover este bloco.   */
/* ================================================================= */

body.woocommerce-account:not(.logged-in) .pagina-header{
    padding-block: var(--espaco-lg);
}
body.woocommerce-account:not(.logged-in) article.secao{
    padding-block: var(--espaco-xl);
}
body.woocommerce-account:not(.logged-in) .conteudo-pagina{
    max-width: 940px;
    margin-inline: auto;
}
body.woocommerce-account:not(.logged-in) .woocommerce > .u-columns{
    max-width: 940px;
    margin-inline: auto;
    align-items: stretch;
    gap: var(--espaco-xl);
}
/* A COLUNA vira o card. O form interno perde fundo/padding proprio,   */
/* assim h2 + campos + 'Perdeu a senha' ficam todos dentro do card.    */
body.woocommerce-account:not(.logged-in) .u-columns .u-column1,
body.woocommerce-account:not(.logged-in) .u-columns .u-column2{
    display: flex;
    flex-direction: column;
    background: var(--cor-branco);
    border: 1px solid var(--vidro-borda-escura);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-sm);
    padding: var(--espaco-xl);
}
body.woocommerce-account:not(.logged-in) .u-column1 > h2,
body.woocommerce-account:not(.logged-in) .u-column2 > h2{
    font-family: var(--fonte-display);
    font-size: var(--texto-xl);
    color: var(--cor-mata);
    margin: 0 0 var(--espaco-md);
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login,
body.woocommerce-account:not(.logged-in) .woocommerce-form-register{
    background: none;
    padding: 0;
    border-radius: 0;
    flex: 1;
}
body.woocommerce-account:not(.logged-in) .woocommerce-LostPassword{
    margin-top: auto;
    padding-top: var(--espaco-sm);
}
/* UI-4: caixa 'mostrar senha' encostava no texto e vazava na borda.   */
body.woocommerce-account:not(.logged-in) .woocommerce-form-row--password,
body.woocommerce-account:not(.logged-in) .woocommerce-form-login p.form-row,
body.woocommerce-account:not(.logged-in) .woocommerce-form-register p.form-row{
    position: relative;
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login .input-text[type=password],
body.woocommerce-account:not(.logged-in) .woocommerce-form-register .input-text[type=password]{
    padding-right: 52px;
}
body.woocommerce-account:not(.logged-in) .show-password-input{
    right: 6px;
}
@media (max-width: 767px){
    body.woocommerce-account:not(.logged-in) .woocommerce > .u-columns{ gap: var(--espaco-md); }
    body.woocommerce-account:not(.logged-in) article.secao{ padding-block: var(--espaco-lg); }
}