/* Cabeçalho com sessão (só no pacote de homologação). Era <style id="mdmContaCabecalho"> inline.
   O link de conta tem largura fixa no computador: "Entrar", "Olá, Ana" ou um nome longo (cortado com
   reticências) não empurram Loja nem a cesta. No celular, com sessão, aparece só o primeiro nome, ao
   lado da cesta. Decisão do proprietário (06/10): o primeiro nome cabe inteiro (até "Maximiliano") no celular
   e no computador; só nomes maiores que a reserva ganham reticências. */
.mdm-conta-checando [data-conta="cabecalho"],.mdm-conta-checando [data-conta="menu"]{visibility:hidden}
@media(min-width:821px){.hdr__nav [data-conta="cabecalho"]{display:inline-block;inline-size:11em;text-align:end;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}}
.hdr__nav .hdr__conta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* No celular, com sessão, só o nome, ao lado da cesta, usando o espaço que a coluna da direita tem. O limite
   era fixo (5em até 400px, 6,5em até 820px) e cortava "Mateus" com espaço sobrando; agora o nome só ganha
   reticências quando a coluna acaba de verdade, e o menu da conta mostra o nome inteiro. */
@media(max-width:820px){
  /* o vão entre as colunas é o menor possível: com cesta e conta na mesma coluna, cada pixel conta para
     "Mateus" caber inteiro com o logo centrado (em 375: coluna de 138 px para 44 + 8 + 82) */
  .hdr{column-gap:var(--sp-1)}
  .hdr__nav{min-inline-size:0;max-inline-size:100%;gap:var(--sp-3)}
  .hdr__nav .hdr__conta.is-sessao{display:inline-block;inline-size:auto;min-inline-size:0;max-inline-size:100%;padding-block:.75rem;margin-block:-.75rem}
  .conta__ola{display:none}
}

/* Menu da conta (sessao.js): "Olá, <nome>" abre Meus pedidos, Meus dados, Meus cupons e Sair da conta. O botão
   herda o desenho do link que ele substitui (.hdr__link .hdr__conta): mesma largura fixa no computador e só o
   nome no celular. A seta diz que abre; ela vira quando aberto. */
.conta-menu{position:relative;display:inline-flex}
/* no computador o botão parte dos mesmos 11em do link e cresce até 15em para o primeiro nome caber inteiro
   ("Olá, Maximiliano" pede 13,5em); além disso, reticências no nome */
@media(min-width:821px){.hdr__nav .conta-menu__botao{display:inline-flex;align-items:center;justify-content:flex-end;gap:.45em;inline-size:auto;min-inline-size:11em;max-inline-size:15em}}
/* no celular o botão encolhe com a coluna, mas não abaixo do alvo de 44px: quem perde letra é o nome, e a
   seta (que diz que abre) fica sempre à vista */
@media(max-width:820px){
  /* position:static: o painel passa a se posicionar pelo CABEÇALHO (.hdr, sticky), e não pelo botão */
  .hdr__nav .conta-menu{position:static;min-inline-size:0;max-inline-size:100%}
  .hdr__nav .conta-menu__botao.is-sessao{display:inline-flex;align-items:center;gap:.4em;overflow:visible;min-inline-size:var(--alvo-toque)}
  /* Com sessão (06/10) a coluna da direita reserva o que o primeiro nome precisa (até 9em; 7,75em até 400px, onde
     "Maximiliano" cabe justo) e a coluna do menu cede. O logo só sai do centro quando o nome é maior que
     "Mateus": com "Maximiliano", 2 px em 440, 13 px em 375 e cerca de 39 px em 320. Nomes maiores que a reserva
     ganham reticências; a tela não rola de lado. */
  .hdr.hdr--sessao{grid-template-columns:minmax(0,1fr) auto minmax(max-content,1fr)}
  .hdr__nav .conta-menu__botao.is-sessao .conta__nome{max-inline-size:9em}
  /* O painel abre ABAIXO do cabeçalho (06/10), alinhado à direita pela calha e dentro da largura da tela, com um
     vão claro para a barra; fundo creme opaco, fio e sombra; nada vaza pelo lado. A ponte do mouse não vale aqui. */
  .hdr .conta-menu__painel{top:calc(100% + var(--sp-2));right:var(--gutter);left:auto;
    min-inline-size:min(14rem, calc(100vw - 2 * var(--gutter)));max-inline-size:calc(100vw - 2 * var(--gutter));
    background:var(--bg);border-color:color-mix(in srgb, var(--fg) 18%, transparent)}
  .hdr .conta-menu__painel::before{content:none}
}
/* até 400px (320 e 375) a coluna da direita tem 113 a 138 px para cesta + conta: o espaçamento das versaletes do
   nome desce, o botão perde o respiro lateral e a seta e a cesta chegam mais perto, para "Mateus" caber inteiro */
@media(max-width:400px){
  .hdr__nav{gap:var(--sp-1)}
  /* em 320 a coluna tem 113 px: o nome quase sem espaçamento entre letras e o botão sem respiro lateral;
     a seta fica (ela diz que abre) */
  .hdr__nav .conta-menu__botao.is-sessao{gap:.3em;letter-spacing:.06em;padding-inline:0}
  .hdr__nav .conta-menu__botao.is-sessao .conta__nome{max-inline-size:7.75em}
  .hdr__nav .conta-menu__seta{margin-inline-start:0}
}
.conta-menu__botao .conta__nome{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conta-menu__seta{flex:none;vertical-align:middle;margin-inline-start:.15em;transition:transform var(--dur-fast) var(--ease)}
.conta-menu__botao[aria-expanded="true"]{opacity:1}
.conta-menu__botao[aria-expanded="true"] .conta-menu__seta{transform:rotate(180deg)}
/* o painel desce do lado direito, no creme da página, com o fio e a sombra do aviso da cesta */
.conta-menu__painel{position:absolute;top:calc(100% + .85rem);right:0;z-index:2;
  min-inline-size:14rem;max-inline-size:calc(100vw - 2 * var(--gutter));
  background:var(--bg);color:var(--fg);border:var(--border) solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-toast);padding:var(--sp-2) 0;text-align:start}
/* ponte invisível entre o botão e o painel: o mouse atravessa o vão sem fechar o menu */
.conta-menu__painel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:.85rem}
/* o primeiro nome no alto do menu (06/10), em negrito, acima das opções */
.conta-menu__quem{margin:0 0 var(--sp-2);padding:var(--sp-2) var(--sp-4) var(--sp-3);border-bottom:var(--border) solid var(--line);
  font-family:var(--font-body);font-variation-settings:var(--vf-body-bold);font-size:var(--text-body-sm);line-height:1.35;
  letter-spacing:0;text-transform:none;color:var(--fg);white-space:normal;overflow-wrap:anywhere}
.conta-menu__lista{list-style:none;margin:0;padding:0}
.conta-menu__lista a,.conta-menu__sair{display:flex;align-items:center;inline-size:100%;min-block-size:var(--alvo-toque);
  padding:0 var(--sp-4);font-family:var(--font-badge);font-variation-settings:var(--vf-badge-sm);
  font-size:var(--text-caption);letter-spacing:var(--tracking-caps-md);text-transform:uppercase;
  color:var(--fg);text-align:start;white-space:nowrap;transition:background var(--dur-fast) var(--ease)}
.conta-menu__lista a:hover,.conta-menu__sair:hover{background:var(--bg-surface)}
.conta-menu__fim{border-top:var(--border) solid var(--line);margin-top:var(--sp-2);padding-top:var(--sp-2)}
.conta-menu__erro{margin:var(--sp-2) var(--sp-4) 0;font-size:var(--text-body-sm);line-height:1.45;color:var(--c-lacre);white-space:normal}
@media(prefers-reduced-motion:reduce){.conta-menu__seta,.conta-menu__lista a,.conta-menu__sair{transition:none}}

/* Menu principal: na seção Conta, "Sair da conta" é botão com o desenho dos links da lista */
.menu__list .menu__sair{display:inline-block;padding:0;font-family:var(--font-body);font-variation-settings:var(--vf-body-medium);
  font-size:clamp(1.05rem,1.6vw,1.45rem);line-height:1.25;letter-spacing:0;text-transform:none;white-space:nowrap;
  text-align:start;color:inherit;transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.menu__list .menu__sair:hover{opacity:.55;transform:translateX(4px)}
@media(max-width:820px){
  .menu__list .menu__sair{padding-block:calc((var(--alvo-toque) - 1.25em) / 2)}
  .menu__list .menu__sair::after{content:'';position:absolute;inset:0}
}
/* sobre o salmão o texto é sempre tinta (o lacre não passa ali) */
.menu .conta-menu__erro{margin:.3em 0 0;color:var(--c-tinta)}

/* anúncio "Você saiu da conta." para leitor de tela, fora da vista */
.conta-aviso{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Confirmação visível após encerrar a sessão. */
.conta-aviso--visivel{position:fixed;z-index:var(--z-toast);inset:auto 1.25rem 1.25rem auto;width:auto;height:auto;max-width:calc(100vw - 2.5rem);margin:0;padding:1rem 1.5rem;overflow:visible;clip:auto;white-space:normal;border:0;border-radius:var(--r-md);background:var(--bg-invert);color:var(--fg-invert);box-shadow:var(--shadow-toast);font-size:1rem;line-height:1.4;pointer-events:none;animation:conta-aviso-entrar .2s ease-out}
@keyframes conta-aviso-entrar{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.conta-aviso--visivel{animation:none}}