/* ============================================================================
   POOD — ÁREA DO CLIENTE E TELA DO PEDIDO

   Cobre as telas que o cliente vê depois de comprar:

     .sales-guest-view      quem entrou por "Rastrear meu pedido" (convidado)
     .account               TUDO da conta logada — o Magento marca o <body> com
                            essa classe em customer/account/*, sales/order/*,
                            downloadable, wishlist e newsletter

   O padrão visual é o mesmo de /sales/guest/form (pood-institucional.css, §4g),
   por decisão do Will em 24/09/2026: mesma família, mesma escala, mesmas cores,
   mesmos botões e campos. A largura e o respiro são os de lá — 1140 de caixa
   com 30 de recuo interno, que somam os 40 do modelo com os 10 do .page-main.

   ⚠️ POR QUE NÃO REUSEI AS CLASSES .inst DO INSTITUCIONAL
   Elas pressupõem o HTML dos nossos templates (.inst > .inst__ind + .inst__txt).
   As telas de conta são montadas por uma dúzia de blocos do core, cada um com a
   marcação dele; envolver tudo numa .inst exigiria trocar o htmlTag do container
   `content`, que vale para a página inteira e leva junto mensagens, breadcrumb e
   o que mais um módulo pendurar ali. Aqui as regras miram as classes REAIS do
   Magento e os tokens — o resultado na tela é o mesmo, sem mexer em estrutura.
   ========================================================================= */

:is(.account, .sales-guest-view) {
  background: var(--pood-fundo);
}
:is(.account, .sales-guest-view) .page-main {
  max-width: 1140px;
  padding: 52px 30px 88px;
}
:is(.account, .sales-guest-view) .columns {
  background: transparent;
}

/* ---------------------------------------------------------------------------
   1. Título da página

   O core imprime o número do pedido no <h1> como "Pedido nº 8000000119". O
   status e a data vêm em blocos irmãos, dentro do mesmo container do título.
--------------------------------------------------------------------------- */
:is(.account, .sales-guest-view) .page-title-wrapper {
  margin: 0 0 28px;
}
:is(.account, .sales-guest-view) .page-title-wrapper .page-title,
:is(.account, .sales-guest-view) .page-title-wrapper .page-title span {
  margin: 0;
  font-family: var(--pood-fonte);
  font-size: var(--pood-t-produto);
  font-weight: var(--pood-p-forte);
  line-height: var(--pood-lh-produto);
  letter-spacing: var(--pood-ls-produto);
  color: var(--pood-tinta);
  text-transform: none;
}

/* status em pílula, ao lado do título */
:is(.account, .sales-guest-view) .order-status {
  display: inline-block;
  margin: 10px 0 0;
  padding: 5px 13px;
  border: 0;
  border-radius: var(--pood-r);
  background: var(--pood-tinta);
  color: var(--pood-papel);
  font-size: 11.5px;
  font-weight: var(--pood-p-medio);
  line-height: 1.3;
  text-transform: none;
}
:is(.account, .sales-guest-view) .order-date {
  margin: 10px 0 0;
  font-size: var(--pood-t-apoio);
  color: var(--pood-tinta-2);
}
:is(.account, .sales-guest-view) .order-date .label {
  font-weight: var(--pood-p-medio);
}

/* a barra de ações (Imprimir) desce para a direita do título */
:is(.account, .sales-guest-view) .order-actions-toolbar {
  margin: 14px 0 0;
}
:is(.account, .sales-guest-view) .order-actions-toolbar .action {
  font-size: var(--pood-t-apoio);
  color: var(--pood-tinta-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
:is(.account, .sales-guest-view) .order-actions-toolbar .action:hover {
  color: var(--pood-tinta);
}

/* ---------------------------------------------------------------------------
   2. Rastreio em destaque (.pood-rs)

   É o bloco que o cliente veio ver. Fundo branco sobre o cinza da página, para
   se destacar dos demais sem precisar de cor: a página inteira é neutra e o
   acento é pontuação, não superfície (regra dos tokens).
--------------------------------------------------------------------------- */
.pood-rs {
  margin: 0 0 var(--pood-gap-secao);
}
.pood-rs__titulo {
  margin: 0 0 14px;
  font-size: var(--pood-t-secao);
  font-weight: var(--pood-p-forte);
  line-height: var(--pood-lh-secao);
  color: var(--pood-tinta);
}
.pood-rs__caixa {
  padding: var(--pood-pad-cartao);
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r-cartao);
  background: var(--pood-papel);
}
.pood-rs__caixa + .pood-rs__caixa {
  margin-top: 12px;
}

.pood-rs__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--pood-linha-2);
}
.pood-rs__rot {
  display: block;
  margin: 0 0 5px;
  font-size: var(--pood-t-rotulo);
  font-weight: var(--pood-p-forte);
  letter-spacing: var(--pood-ls-rotulo);
  text-transform: uppercase;
  color: var(--pood-tinta-2);
}
.pood-rs__cod code {
  font-family: var(--pood-fonte);
  font-size: 19px;
  font-weight: var(--pood-p-forte);
  letter-spacing: .05em;
  color: var(--pood-tinta);
  /* duplo clique seleciona o código inteiro, que é o que a pessoa vai colar
     no site dos Correios ou mandar por WhatsApp */
  user-select: all;
}
.pood-rs__link {
  display: inline-flex;
  align-items: center;
  height: var(--pood-h);
  padding: 0 20px;
  border: 1px solid var(--pood-tinta);
  border-radius: var(--pood-r);
  background: transparent;
  color: var(--pood-tinta);
  font-size: var(--pood-t-apoio);
  font-weight: var(--pood-p-medio);
  text-decoration: none;
  white-space: nowrap;
}
.pood-rs__link:hover {
  background: var(--pood-tinta);
  color: var(--pood-papel);
  text-decoration: none;
}

/* a posição atual, em tamanho de leitura */
.pood-rs__agora {
  margin: 18px 0 0;
}
.pood-rs__agora strong {
  display: block;
  font-size: 16px;
  font-weight: var(--pood-p-forte);
  line-height: 1.35;
  color: var(--pood-tinta);
}
.pood-rs__agora span {
  display: block;
  margin-top: 4px;
  font-size: var(--pood-t-apoio);
  color: var(--pood-tinta-2);
}
.pood-rs__caixa--entregue .pood-rs__agora strong {
  color: var(--pood-ok);
}

.pood-rs__vazio {
  margin: 18px 0 0;
  font-size: var(--pood-t-corpo);
  line-height: var(--pood-lh-corpo);
  color: var(--pood-tinta-2);
}

/* ---------------------------------------------------------------------------
   3. Linha do tempo dos eventos

   O fio corre por trás dos marcadores, e não entre eles: com `border-left` em
   cada item o fio quebra a cada evento e o resultado lê como lista pontilhada.
--------------------------------------------------------------------------- */
.pood-rs__linha {
  position: relative;
  margin: 24px 0 0;
  padding: 0 0 0 26px;
  list-style: none;
}
.pood-rs__linha::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--pood-linha);
}
.pood-rs__ev {
  position: relative;
  padding: 0 0 20px;
}
.pood-rs__ev:last-child {
  padding-bottom: 0;
}
.pood-rs__ev::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid var(--pood-linha);
  background: var(--pood-papel);
}
/* o evento mais recente é o único cheio, no acento: é a pontuação da tela */
.pood-rs__ev--atual::before {
  border-color: var(--pood-acento);
  background: var(--pood-acento);
}
.pood-rs__caixa--entregue .pood-rs__ev--atual::before {
  border-color: var(--pood-ok);
  background: var(--pood-ok);
}
.pood-rs__ev-msg {
  display: block;
  font-size: var(--pood-t-corpo);
  line-height: 1.4;
  color: var(--pood-tinta-2);
}
.pood-rs__ev--atual .pood-rs__ev-msg {
  font-weight: var(--pood-p-medio);
  color: var(--pood-tinta);
}
.pood-rs__ev-meta,
.pood-rs__ev-det {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--pood-tinta-3);
}

.pood-rs__caixa--nota code {
  font-family: var(--pood-fonte);
  font-size: var(--pood-t-corpo);
  color: var(--pood-tinta);
}

/* --- retirada na loja: o endereço da LOJA, não o do cliente --------------- */
.pood-rs__loja {
  display: grid;
  grid-template-columns: minmax(74px, auto) 1fr;
  gap: 7px 14px;
  margin: 18px 0 0;
}
.pood-rs__loja dt {
  margin: 0;
  font-size: var(--pood-t-apoio);
  color: var(--pood-tinta-2);
}
.pood-rs__loja dt::after {
  content: ":";
}
.pood-rs__loja dd {
  margin: 0;
  font-size: var(--pood-t-corpo);
  line-height: var(--pood-lh-corpo);
  color: var(--pood-tinta);
}
/* o endereço vem em linhas separadas pelo serviço; cada uma ocupa a sua */
.pood-rs__linha-end {
  display: block;
}
/* o botão do mapa desce e ganha ar, porque vem depois de uma lista */
.pood-rs--retirada .pood-rs__link {
  margin-top: 20px;
}

/* mesma regra do endereço: rótulo e valor na mesma linha, também no celular */
@media (max-width: 520px) {
  .pood-rs__loja {
    grid-template-columns: minmax(72px, auto) 1fr;
    gap: 6px 12px;
  }
}

/* o serviço contratado, ao lado do código: PAC, SEDEX, Braspress */
.pood-rs__servico {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: var(--pood-r);
  background: var(--pood-fundo);
  border: 1px solid var(--pood-linha);
  font-size: 11px;
  font-weight: var(--pood-p-medio);
  letter-spacing: .02em;
  color: var(--pood-tinta-2);
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   4. Dados do pedido (.pood-pd)
--------------------------------------------------------------------------- */
.pood-pd {
  margin: var(--pood-gap-secao) 0 0;
}
.pood-pd__titulo {
  margin: 0 0 18px;
  font-size: var(--pood-t-secao);
  font-weight: var(--pood-p-forte);
  line-height: var(--pood-lh-secao);
  color: var(--pood-tinta);
}
/* Duas colunas, cada uma empilhando os próprios blocos.

   Os quatro lado a lado davam ~240px cada, e o endereço — 8 campos em duas
   colunas — ficava espremido enquanto "Método de entrega", que é uma linha de
   texto, sobrava espaço. Com os dois endereços numa coluna, quem precisa de
   largura fica com metade da faixa. */
.pood-pd__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 20px e não 12: são cartões brancos com borda sobre fundo cinza, e a 12 as
     bordas de dois blocos vizinhos leem como uma linha dupla — o Will relatou
     exatamente isso, "colado um no outro" */
  gap: 20px;
  align-items: start;
}
.pood-pd__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* sem isto o bloco de pagamento estica até a altura da coluna do endereço */
  align-items: stretch;
}

@media (max-width: 767px) {
  .pood-pd__grade {
    grid-template-columns: 1fr;
  }
}
.pood-pd__bloco {
  padding: 22px 24px 24px;
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r-cartao);
  background: var(--pood-papel);
}
/* a caixa que só diz "mesmo endereço" não precisa do mesmo peso visual */
.pood-pd__bloco--nota {
  background: transparent;
}
.pood-pd__rot {
  margin: 0 0 10px;
  font-size: var(--pood-t-rotulo);
  font-weight: var(--pood-p-forte);
  letter-spacing: var(--pood-ls-rotulo);
  text-transform: uppercase;
  color: var(--pood-tinta-2);
}
.pood-pd__bloco address,
.pood-pd__bloco p,
.pood-pd__bloco span,
.pood-pd__bloco dt,
.pood-pd__bloco dd {
  margin: 0;
  font-family: var(--pood-fonte);
  font-size: var(--pood-t-corpo);
  font-style: normal;
  line-height: var(--pood-lh-corpo);
  color: var(--pood-tinta);
}
/* o bloco de pagamento do Pagar.me vem como <span> soltos, um por linha */
.pood-pd__bloco span {
  display: block;
}

/* O endereço em campos rotulados.

   Grade de duas colunas com o rótulo em largura fixa: assim os valores alinham
   entre si e a leitura desce em coluna, como num formulário preenchido. Com
   `dt`/`dd` em fluxo normal o navegador recua o `dd` e cada valor começa num x
   diferente, dependendo do tamanho do rótulo acima. */
.pood-pd__campos {
  display: grid;
  grid-template-columns: minmax(74px, auto) 1fr;
  gap: 7px 14px;
  margin: 0;
}
.pood-pd__campos dt {
  margin: 0;
  font-size: var(--pood-t-apoio);
  font-weight: var(--pood-p-normal);
  line-height: var(--pood-lh-corpo);
  color: var(--pood-tinta-2);
  /* o dois-pontos entra por CSS: no template o rótulo é só o nome, e é ele que
     vai para o i18n — pontuação não pertence à tradução */
}
.pood-pd__campos dt::after {
  content: ":";
}
.pood-pd__campos dd {
  margin: 0;
  font-size: var(--pood-t-corpo);
  line-height: var(--pood-lh-corpo);
  color: var(--pood-tinta);
  overflow-wrap: anywhere;
}

/* 🔴 O rótulo fica NA MESMA LINHA do valor, inclusive no celular.

   A primeira versão empilhava abaixo de 520px, e o Will pediu o contrário: com
   "Destinatário:" ocupando ~95px, sobram ~230px num aparelho de 375 — espaço de
   sobra para o valor, e a leitura em pares fica muito mais compacta. Quando o
   valor não couber, ele quebra dentro da própria coluna, que é o comportamento
   certo: quem quebra é o texto, não a estrutura. */
@media (max-width: 520px) {
  .pood-pd__campos {
    grid-template-columns: minmax(72px, auto) 1fr;
    gap: 6px 12px;
  }
}

/* ---------------------------------------------------------------------------
   5. Itens do pedido e totais
--------------------------------------------------------------------------- */
:is(.account, .sales-guest-view) .order-details-items {
  margin: var(--pood-gap-secao) 0 0;
  padding: 0;
  border: 0;
}
:is(.account, .sales-guest-view) .order-title > strong {
  display: block;
  margin: 0 0 18px;
  font-size: var(--pood-t-secao);
  font-weight: var(--pood-p-forte);
  line-height: var(--pood-lh-secao);
  color: var(--pood-tinta);
}
:is(.account, .sales-guest-view) .order-details-items .table-wrapper,
:is(.account, .sales-guest-view) .table-order-items {
  margin: 0;
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r-cartao);
  background: var(--pood-papel);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}
:is(.account, .sales-guest-view) .table-order-items thead th {
  padding: 14px 20px;
  border-bottom: 1px solid var(--pood-linha);
  background: transparent;
  font-size: var(--pood-t-rotulo);
  font-weight: var(--pood-p-forte);
  letter-spacing: var(--pood-ls-rotulo);
  text-transform: uppercase;
  color: var(--pood-tinta-2);
}
:is(.account, .sales-guest-view) .table-order-items tbody td {
  padding: 16px 20px;
  border-top: 1px solid var(--pood-linha-2);
  font-size: var(--pood-t-corpo);
  line-height: var(--pood-lh-corpo);
  color: var(--pood-tinta);
  vertical-align: top;
}
:is(.account, .sales-guest-view) .table-order-items tbody tr:first-child td {
  border-top: 0;
}
/* 🔴 O respiro lateral precisa de especificidade MAIOR que a do Porto.

   Ele declara `.table-order-items td { padding: 8px 0 }` na folha que o CDN serve
   (§29.5: ilegível pelo CSSOM), e o zero da esquerda é exatamente o que fazia a
   lista de produtos encostar na borda do cartão. Repetir `.table-order-items` na
   frente das células sobe o seletor acima da regra dele. */
:is(.account, .sales-guest-view) .table-order-items.table-order-items thead th,
:is(.account, .sales-guest-view) .table-order-items.table-order-items tbody td,
:is(.account, .sales-guest-view) .table-order-items.table-order-items tfoot td,
:is(.account, .sales-guest-view) .table-order-items.table-order-items tfoot th {
  padding-left: 22px;
  padding-right: 22px;
}
/* a coluna de valores encosta na direita; a primeira, na esquerda */
:is(.account, .sales-guest-view) .table-order-items .col.subtotal,
:is(.account, .sales-guest-view) .table-order-items .col.price {
  text-align: right;
}

:is(.account, .sales-guest-view) .table-order-items .product-item-name {
  font-weight: var(--pood-p-medio);
}

/* --- o item com miniatura (.pood-it) ------------------------------------- */
.pood-it {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.pood-it__foto {
  flex: 0 0 auto;
  width: 72px;
  /* 3:4, a proporção de 77,7% do catálogo (§42.14) */
  aspect-ratio: 3 / 4;
  border-radius: var(--pood-r-caixa);
  background: var(--pood-bloco);
  overflow: hidden;
}
.pood-it__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pood-it__txt {
  /* sem isto o nome longo estica a célula e empurra as colunas de valor */
  min-width: 0;
}

@media (max-width: 767px) {
  .pood-it__foto {
    width: 56px;
  }
}
:is(.account, .sales-guest-view) .table-order-items .item-options dt,
:is(.account, .sales-guest-view) .table-order-items .item-options dd {
  font-size: 11.5px;
  color: var(--pood-tinta-2);
}
:is(.account, .sales-guest-view) .table-order-items .price {
  font-size: var(--pood-t-item);
  font-variant-numeric: tabular-nums;
}
:is(.account, .sales-guest-view) .table-order-items tfoot td,
:is(.account, .sales-guest-view) .table-order-items tfoot th {
  padding: 10px 20px;
  border-top: 1px solid var(--pood-linha-2);
  font-size: var(--pood-t-corpo);
  color: var(--pood-tinta);
}
:is(.account, .sales-guest-view) .table-order-items tfoot .grand_total th,
:is(.account, .sales-guest-view) .table-order-items tfoot .grand_total td {
  padding-top: 14px;
  padding-bottom: 18px;
  border-top: 1px solid var(--pood-linha);
  font-size: 16px;
  font-weight: var(--pood-p-forte);
}

/* ---------------------------------------------------------------------------
   6. Barra lateral da conta (só no fluxo logado)
--------------------------------------------------------------------------- */
.account .sidebar-main .block-collapsible-nav {
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r-cartao);
  background: var(--pood-papel);
  overflow: hidden;
}
.account .block-collapsible-nav .title {
  padding: 16px 20px 12px;
  font-size: var(--pood-t-rotulo);
  font-weight: var(--pood-p-forte);
  letter-spacing: var(--pood-ls-rotulo);
  text-transform: uppercase;
  color: var(--pood-tinta-2);
}
.account .block-collapsible-nav .item a,
.account .block-collapsible-nav .item > strong {
  display: block;
  padding: 9px 20px;
  border: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--pood-tinta-2);
  text-decoration: none;
}
.account .block-collapsible-nav .item a:hover {
  background: var(--pood-fundo);
  color: var(--pood-tinta);
}
/* 🔴 O item atual NÃO leva filete colorido.

   A primeira versão copiou o `box-shadow: inset 2px 0 0 var(--pood-acento)` do
   índice institucional. Lá o item tem 28px de altura e o filete lê como marca;
   aqui, sobre 40px e ao lado de uma seta de ícone, ele vira um risco vermelho
   solto — o Will relatou exatamente assim.

   O estado passa a ser dito por fundo e peso, que é como o resto do site marca
   seleção (swatch escolhido, opção de frete, página atual da paginação). O
   acento continua sendo pontuação, não superfície — a regra dos tokens. */
.account .block-collapsible-nav .item.current a,
.account .block-collapsible-nav .item.current > strong {
  border: 0;
  box-shadow: none;
  background: var(--pood-fundo);
  color: var(--pood-tinta);
  font-weight: var(--pood-p-forte);
}

/* A seta que o Porto põe antes de cada item vem da fonte `porto-icons` e não
   pertence a este desenho: o menu do rodapé e o índice institucional são listas
   sem marcador. Sem ela, o recuo do texto também deixa de ser necessário. */
.account .block-collapsible-nav .item a::before,
.account .block-collapsible-nav .item > strong::before {
  content: none;
}

/* ---------------------------------------------------------------------------
   7. Blocos de "Minha conta" e listas
--------------------------------------------------------------------------- */
.account .block:not(.block-collapsible-nav) .block-title,
.account .box .box-title {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}
.account .block:not(.block-collapsible-nav) .block-title > strong {
  font-size: var(--pood-t-secao);
  font-weight: var(--pood-p-forte);
  line-height: var(--pood-lh-secao);
  color: var(--pood-tinta);
}
.account .box .box-title > span {
  font-size: var(--pood-t-rotulo);
  font-weight: var(--pood-p-forte);
  letter-spacing: var(--pood-ls-rotulo);
  text-transform: uppercase;
  color: var(--pood-tinta-2);
}
.account .block-dashboard-info .box,
.account .block-dashboard-addresses .box,
.account .block-addresses-default .box,
.account .block-addresses-list .items.addresses > li {
  padding: 22px 24px 24px;
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r-cartao);
  background: var(--pood-papel);
}
.account .box-content,
.account .box-content address,
.account .box-content p {
  font-family: var(--pood-fonte);
  font-size: var(--pood-t-corpo);
  font-style: normal;
  line-height: var(--pood-lh-corpo);
  color: var(--pood-tinta);
}

/* ---------------------------------------------------------------------------
   8. Botões e campos — o padrão do formulário de rastreio
--------------------------------------------------------------------------- */
/* 🔴 `display: inline-flex` NAO e enfeite aqui.

   Vários botões desta área são `<a>`, não `<button>` — "Imprimir Boleto" do Pagar.me é
   um deles. Num elemento inline, `height` não centraliza o texto nem na vertical nem na
   horizontal: ele fica encostado num canto e a caixa cresce sozinha. Era exatamente o
   que o Will relatou, "texto desalinhado". */
:is(.account, .sales-guest-view) .action.primary,
:is(.account, .sales-guest-view) a.action.primary,
:is(.account, .sales-guest-view) button.action.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--pood-h);
  padding: 0 26px;
  border: 0;
  border-radius: var(--pood-r);
  background: var(--pood-tinta);
  color: var(--pood-papel);
  font-family: var(--pood-fonte);
  font-size: var(--pood-t-apoio);
  font-weight: var(--pood-p-medio);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  box-sizing: border-box;
}
/* o Porto envolve o rótulo num <span> com estilo próprio em alguns botões */
:is(.account, .sales-guest-view) .action.primary > span {
  display: block;
  line-height: 1;
}
:is(.account, .sales-guest-view) .action.primary:hover {
  background: var(--pood-acento);
  color: var(--pood-papel);
}
:is(.account, .sales-guest-view) .action.secondary,
:is(.account, .sales-guest-view) .action.back,
:is(.account, .sales-guest-view) .action.edit,
:is(.account, .sales-guest-view) .action.change-password,
:is(.account, .sales-guest-view) .action.view {
  font-size: var(--pood-t-apoio);
  color: var(--pood-tinta);
  text-decoration: underline;
  text-underline-offset: 2px;
}
:is(.account, .sales-guest-view) input[type="text"],
:is(.account, .sales-guest-view) input[type="email"],
:is(.account, .sales-guest-view) input[type="password"],
:is(.account, .sales-guest-view) input[type="tel"],
:is(.account, .sales-guest-view) select,
:is(.account, .sales-guest-view) textarea {
  height: var(--pood-h);
  padding: 0 14px;
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r-campo);
  background: var(--pood-papel);
  font-family: var(--pood-fonte);
  font-size: var(--pood-t-corpo);
  color: var(--pood-tinta);
  box-shadow: none;
}
:is(.account, .sales-guest-view) textarea {
  height: auto;
  padding: 12px 14px;
}
:is(.account, .sales-guest-view) input:focus,
:is(.account, .sales-guest-view) select:focus,
:is(.account, .sales-guest-view) textarea:focus {
  border-color: var(--pood-tinta);
  box-shadow: none;
}
:is(.account, .sales-guest-view) .label,
:is(.account, .sales-guest-view) .fieldset > .field > .label {
  font-size: var(--pood-t-apoio);
  font-weight: var(--pood-p-medio);
  color: var(--pood-tinta);
}

/* ---------------------------------------------------------------------------
   9. Minha conta, Meus pedidos e Endereços

   Telas montadas por blocos do core com marcação própria. O que vinha da seção 7
   já dava fundo e borda aos cartões; aqui entra o arranjo e o acabamento.
--------------------------------------------------------------------------- */

/* os dois endereços padrão lado a lado, como no bloco de dados do pedido */
.account .block-dashboard-addresses .block-content,
.account .block-addresses-default .block-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.account .block-dashboard-info .block-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  align-items: start;
}
@media (max-width: 767px) {
  .account .block-dashboard-addresses .block-content,
  .account .block-addresses-default .block-content,
  .account .block-dashboard-info .block-content {
    grid-template-columns: 1fr;
  }
}

/* o título de cada bloco, com a ação à direita */
.account .block:not(.block-collapsible-nav) .block-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

/* 🔴 O PORTO DESENHA UMA CAIXA DENTRO DA CAIXA

   Ele trata cada `.box` como um painel com cabeçalho próprio:

       .box .box-title   { border:1px solid #ddd; background:#f5f5f5 }
       .box .box-content { border:1px solid #ddd; background:#fbfbfb; min-height:135px }
       .box .box-actions { border:1px solid #ddd; background:#f5f5f5 }

   Dentro do nosso cartão branco isso vira três faixas cinza empilhadas, com
   borda dupla nas junções — o Will viu na tela. E o `min-height: 135px` deixa
   um vão vazio embaixo de endereço curto.

   Os seletores dele são (0,2,0); `.account .box ...` é (0,3,0) e vence. */
:is(.account, .sales-guest-view) .box .box-title,
:is(.account, .sales-guest-view) .box .box-content,
:is(.account, .sales-guest-view) .box .box-actions {
  border: 0;
  background: transparent;
  min-height: 0;
  padding: 0;
}
:is(.account, .sales-guest-view) .box .box-title {
  display: block;
  margin: 0 0 12px;
}
:is(.account, .sales-guest-view) .box .box-title > span {
  font-size: var(--pood-t-rotulo);
  font-weight: var(--pood-p-forte);
  letter-spacing: var(--pood-ls-rotulo);
  text-transform: uppercase;
  color: var(--pood-tinta-2);
}

/* "Editar" e "Alterar senha" dentro do cartão: link discreto, não botão */
.account .box-actions {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--pood-linha-2);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.account .box-actions .action {
  font-size: var(--pood-t-apoio);
  color: var(--pood-tinta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Meus pedidos --------------------------------------------------------- */
.account .table-wrapper.orders-history {
  margin: 0;
}
/* a legenda da tabela repete o H1 da página */
.account .orders-history .table-caption {
  display: none;
}
.account .table-order-items.history .col.actions {
  white-space: nowrap;
}
.account .table-order-items.history .col.actions .action + .action::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  margin: 0 10px -1px;
  background: var(--pood-linha);
}
.account .table-order-items.history .action {
  font-size: var(--pood-t-apoio);
  color: var(--pood-tinta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* paginação: o Porto a desenha com a cor antiga da loja */
.account .order-products-toolbar,
.account .toolbar.bottom {
  margin: 24px 0 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.account .pages .item {
  margin: 0;
}
.account .pages .page,
.account .pages .action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r-caixa);
  background: var(--pood-papel);
  font-size: var(--pood-t-apoio);
  color: var(--pood-tinta-2);
  text-decoration: none;
}
.account .pages .item.current .page {
  border-color: var(--pood-tinta);
  background: var(--pood-tinta);
  color: var(--pood-papel);
  font-weight: var(--pood-p-medio);
}
/* o fio cinza que o Porto põe sob a paginação, em cor fora da paleta */
.account .pages {
  border: 0;
}
.account .toolbar .limiter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--pood-t-apoio);
  color: var(--pood-tinta-2);
}
.account .toolbar .limiter .limiter-options {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r-caixa);
  background: var(--pood-papel);
  font-size: var(--pood-t-apoio);
}

/* "você ainda não fez nenhum pedido" */
.account .message.info.empty {
  margin: 0;
  padding: 22px 24px;
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r-cartao);
  background: var(--pood-papel);
  color: var(--pood-tinta-2);
  font-size: var(--pood-t-corpo);
}

/* ---------------------------------------------------------------------------
   10. Tela estreita
--------------------------------------------------------------------------- */

/* 🔴 O MENU DA CONTA É ABSOLUTO EM MOBILE, E SEM COMPENSAÇÃO ELE SOBREPÕE

   O core declara, em ≤767px:

       .block-collapsible-nav { position:absolute; top:0; left:0; width:100%; z-index:5 }

   e conta com um `padding-top` no `.column.main` para reservar o espaço. Esse
   padding NÃO EXISTE neste tema — medido em 24/09/2026. Resultado: o
   `.sidebar-main` fica com altura zero, o "Pedidos feitos recentemente" sobe
   para ocupar o lugar, e o menu desenha por cima dele com z-index 5.

   Devolvendo o menu ao fluxo, o problema desaparece na causa. E `order: -1` no
   `.sidebar-main` o põe ANTES do conteúdo, que é onde ele deve estar: numa tela
   de conta, a navegação vem primeiro — a pedido do Will, que o viu no rodapé. */
@media (max-width: 767px) {
  .account .block-collapsible-nav {
    position: static;
    width: auto;
    z-index: auto;
  }
  .account .columns .sidebar-main {
    order: -1;
    margin-bottom: 24px;
  }
  .account .columns .sidebar-additional {
    order: 3;
  }
}

@media (max-width: 991px) {
  :is(.account, .sales-guest-view) .page-main {
    padding: 34px 16px 56px;
  }
  .pood-rs__caixa {
    padding: 22px 20px 24px;
  }
  .pood-rs__topo {
    flex-direction: column;
    align-items: flex-start;
  }
  .pood-rs__link {
    width: 100%;
    justify-content: center;
  }
  .pood-rs__cod code {
    font-size: 17px;
  }
}

/* ============================================================================
   NOTA FISCAL  —  a secao que o cliente logado ja tinha, mal formatada, e que o
   convidado nao tinha nenhuma.

   Mesmo cartao dos blocos de dados do pedido (`.pood-pd__bloco`): titulo fora,
   conteudo dentro. Os campos reusam `.pood-pd__campos`, que ja poe rotulo e
   valor na mesma linha com os dois-pontos no CSS.
   ============================================================================ */

.pood-nf {
    margin: var(--pood-gap-secao) 0 0;
}

.pood-nf__titulo {
    margin: 0 0 18px;
    font-size: var(--pood-t-secao);
    font-weight: var(--pood-p-forte);
    line-height: var(--pood-lh-secao);
    color: var(--pood-tinta);
}

.pood-nf__bloco {
    padding: 22px 24px 24px;
    border: 1px solid var(--pood-linha);
    border-radius: var(--pood-r-cartao);
    background: var(--pood-papel);
}

.pood-nf__campos {
    margin: 0;
}

/* A chave tem 44 digitos em 11 grupos de 4: 54 caracteres, que nao cabem numa linha
   em tela estreita. Os grupos separados por espaco quebram sozinhos, e o `tabular-nums`
   alinha os digitos para a conferencia a olho ser possivel. */
.pood-nf__chave {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    word-spacing: .12em;
}

.pood-nf__acoes {
    margin: 20px 0 0;
}

/* Herda o `.action.primary` da area da conta, que ja e inline-flex centrado (§51.2) */
.pood-nf__ver {
    min-width: 200px;
}

.pood-nf__nota {
    margin: 14px 0 0;
    font-size: var(--pood-t-apoio);
    line-height: 1.6;
    color: var(--pood-tinta-2);
}

.pood-nf__nota a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 767px) {
    .pood-nf__bloco {
        padding: 18px 16px 20px;
    }

    /* Em tela estreita o botao ocupa a largura: alvo de toque maior e sem risco de
       o rotulo "Ver nota fiscal (DANFE)" quebrar dentro de um botao apertado. */
    .pood-nf__ver {
        display: flex;
        width: 100%;
        min-width: 0;
    }
}