/* CONTA — foto com anel escuro e o nome sobre a placa âmbar inclinada, a mesma
   dos botões do topo (bv-loja.css).
   Serve como <div> (só mostra) ou <button> (abre um menu da conta, se um dia
   houver). Sem foto, a inicial ocupa o lugar. Arquivo independente.
   Estados (quando <button>): :hover, .aberto, :focus-visible.

   <div class="bv-conta">
     <span class="bv-conta-foto"><img src="…" alt="" referrerpolicy="no-referrer"></span>
     <span class="bv-conta-nome">Nome</span>
   </div> */
.bv-conta {
  --bv-inclinacao: -12deg;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 16px 0 0;
  border: 0; background: none; color: #1a0f00;
  font: 700 12px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .02em; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
/* A placa começa no meio da foto: a foto fica por cima da ponta dela. */
.bv-conta::before {
  content: ""; position: absolute; top: 1px; bottom: 1px; left: 16px; right: 0; z-index: -1;
  transform: skewX(var(--bv-inclinacao)); border-radius: 2px;
  background: linear-gradient(100deg, #ffdc4d 0%, #ffb000 42%, #ff7400 100%);
  box-shadow: inset 0 1px 0 #ffffff80, inset 0 -2px 0 #00000026, 0 2px 10px #ff7a0033;
  transition: box-shadow .16s;
}
.bv-conta-foto {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; padding: 2px; border-radius: 50%;
  background: #1a0f00;
  box-shadow: 0 0 0 2px #ffcf3a, 0 2px 8px #0008;
  color: #ffcf3a; font-weight: 800; font-size: 13px;
}
.bv-conta-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #14161c; }
.bv-conta-nome { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
button.bv-conta { cursor: pointer; }
button.bv-conta:hover::before, .bv-conta.aberto::before { filter: brightness(1.08) saturate(1.1); box-shadow: inset 0 1px 0 #ffffffa0, inset 0 -2px 0 #00000026, 0 0 22px #ff8a0073; }
button.bv-conta:focus-visible { outline: none; }
button.bv-conta:focus-visible::before { box-shadow: inset 0 0 0 1px #ff8a00, 0 0 0 2px #07080b, 0 0 0 4px #ffd84a; }
/* O display acima venceria o [hidden] do navegador. */
.bv-conta[hidden], .bv-conta-foto img[hidden] { display: none; }
/* Inicial e foto na mesma célula: a foto cobre a inicial e, se some, ela aparece. */
.bv-conta-foto > * { grid-area: 1 / 1; }