/* Área da cliente ("Meus pedidos") e convites na sacola/pedido. Mesmos tokens de loja.css. */
.conta { padding-block: clamp(28px, 5vw, 56px) clamp(40px, 7vw, 80px); }
.conta__carregando { color: var(--marrom-suave); }
.conta__entrar { max-width: 460px; }
.conta__texto { margin-top: 10px; color: var(--marrom-suave); max-width: 60ch; }
.conta__nota { margin-top: 22px; font-size: .88rem; color: var(--marrom-suave); }
.conta__opcoes { display: grid; gap: 18px; margin-top: 26px; }
.conta__codigo { display: grid; gap: 14px; }
.conta__codigo .botao { justify-self: start; }
.conta__link { justify-self: start; background: none; border: 0; padding: 0; color: var(--rose-800); font: 600 .86rem var(--texto); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.conta__ou { display: flex; align-items: center; gap: 12px; color: var(--marrom-suave); font-size: .84rem; }
.conta__ou::before, .conta__ou::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.conta .aviso { margin-top: 18px; }

/* Botão "Fazer login com o Google": tema claro das diretrizes de marca do Google
   (fundo #FFFFFF, borda #747775 de 1px, texto #1F1F1F, "G" colorido padrão sem alteração,
   espaçamento 12px | G | 10px | texto | 12px, formato pílula). */
.botao-google { display: inline-flex; align-items: center; justify-self: start; gap: 10px; height: 44px; padding: 0 12px; border: 1px solid #747775; border-radius: 999px; background: #fff; color: #1f1f1f; font: 500 14px/20px "Google Sans", Roboto, Arial, sans-serif; letter-spacing: .25px; cursor: pointer; transition: background .2s, box-shadow .2s; }
.botao-google:hover { background: #f8f9fa; box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); }
.botao-google:focus-visible { outline: 2px solid var(--rose-700); outline-offset: 2px; }
.botao-google[aria-busy="true"] { opacity: .6; pointer-events: none; }
.botao-google__logo { display: inline-grid; width: 20px; height: 20px; }
.botao-google__logo svg { width: 20px; height: 20px; }
.botao-google__texto { padding-right: 2px; }

.conta__cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.conta__email { color: var(--marrom-suave); }
.conta__email::before { content: "· "; }
.conta__email:first-child::before { content: none; }

.conta__pedidos { list-style: none; display: grid; gap: 14px; margin-top: 28px; padding: 0; }
.conta__pedido { display: block; padding: 18px 20px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); color: var(--marrom); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.conta__pedido:hover { border-color: var(--rose-400); box-shadow: var(--sombra); color: var(--marrom); }
.conta__pedido-linha { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.conta__pedido-numero { font: 400 1.15rem var(--titulo); }
.conta__pedido-itens { margin-top: 6px; color: var(--marrom-suave); font-size: .9rem; }
.conta__pedido-rodape { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.conta__pedido-acao { font-size: .86rem; font-weight: 600; color: var(--rose-800); }

/* Convite discreto na sacola e link na página do pedido */
.conta-convite { margin-bottom: 16px; font-size: .88rem; color: var(--marrom-suave); }
.conta-convite a { font-weight: 600; }

.conta__bloco { margin-top: 26px; }
.conta__bloco h2 { font: 400 1.35rem var(--titulo); }
.conta__senha { margin-top: 36px; max-width: 460px; padding: 18px 20px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); }
.conta__senha summary { cursor: pointer; font-weight: 600; color: var(--rose-800); }
.conta__senha[open] summary { margin-bottom: 4px; }
.conta__senha .conta__codigo { margin-top: 16px; }