/* Link "Área do Cliente" / "Minha conta" do cabeçalho (site/partials/conta.php).
   Carregado pelo layout em todas as páginas. A cor vem do CSS de cada página
   (nav a / .back-link); aqui só entra o contorno, em currentColor, pra
   acompanhar cabeçalho escuro, claro e o .solid sem regra por página. */
.nav-conta{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.nav-conta svg{flex-shrink:0}

/* Cabeçalhos sem <nav> (cases e blog): o link fica ao lado do botão/voltar. */
.hdr-acoes{display:flex;align-items:center;gap:14px}
.hdr-acoes .nav-conta{padding:7px 14px;border:1px solid currentColor;border-radius:999px}

/* Dentro do <nav>, só no desktop: abaixo de 768px o nav vira o menu do
   hambúrguer e o link segue o estilo dos outros itens. A margem negativa
   compensa o padding pra a pílula não aumentar a altura do cabeçalho. */
@media(min-width:769px){
  .hdr nav a.nav-conta{align-self:center;padding:7px 14px;margin-block:-8px;border:1px solid currentColor;border-radius:999px}
}

@media(max-width:560px){
  .hdr-acoes{gap:10px}
  .hdr-acoes .back-link{white-space:nowrap}
  .hdr-acoes .nav-conta{padding:8px}
  /* Vale pro rótulo da conta e pro complemento do "← Voltar" do blog. */
  .hdr-acoes .back-link span{display:none}
}

/* Nos cases o cabeçalho já leva logo, voltar e o botão vermelho: em tela
   muito estreita não cabe um quarto item sem encostar no logo. */
@media(max-width:380px){
  .hdr-acoes:has(.btn-red) .nav-conta{display:none}
}