/*
 * Painel lateral da conta (03/10/2026), o mesmo na home logada e em todas as
 * paginas /account/*. Coluna de 260px, alinhada a logo do cabecalho; no
 * celular e no tablet ele some e os atalhos ficam no menu do cabecalho.
 */
.side-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 44px;
    max-width: none;
    margin: 0;
    padding: 22px max(24px, calc((100vw - 1360px) / 2)) 72px calc(max(24px, calc((100vw - 1360px) / 2)) - 16px);
}
/* account.css tem regras proprias de .account-shell (largura, grade, recuo). */
.account-shell.side-shell {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 44px;
    max-width: none;
    margin: 0;
    padding: 22px max(24px, calc((100vw - 1360px) / 2)) 96px calc(max(24px, calc((100vw - 1360px) / 2)) - 16px);
}
.side-nav {
    position: sticky; top: 96px; align-self: start;
    display: flex; flex-direction: column; gap: 20px;
    max-height: calc(100vh - 112px); overflow-y: auto; scrollbar-width: thin;
    color: #231f20;
}
.side-nav-list { display: flex; flex-direction: column; gap: 2px; }
.side-nav-list a {
    display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 10px;
    color: #231f20; font-size: 1rem; font-weight: 500; text-decoration: none;
    transition: background .15s ease;
}
.side-nav-list a:hover { background: #f4f1ea; }
.side-nav-list a.is-active { background: #ebe7dd; font-weight: 700; }
.side-nav-list svg { flex: none; }
.side-nav-sep { height: 1px; margin: 10px 16px; background: #e6e0d2; }
.side-nav-help {
    display: flex; flex-direction: column; gap: 4px; margin: 0 4px; padding: 16px;
    background: #f7f2e8; border-radius: 12px; font-size: .88rem;
}
.side-nav-help a { color: #231f20; word-break: break-word; }
.side-shell > .account-main, .side-shell > .home-main { min-width: 0; padding-top: 6px; }

@media (max-width: 1023px) {
    .side-shell, .account-shell.side-shell { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 18px 20px 56px; }
    .side-nav { display: none; }
}
@media (max-width: 760px) {
    .side-shell, .account-shell.side-shell { padding: 16px 16px 48px; }
}

/* O layout recua o conteudo das paginas de menu (carrinho ao lado); com o
   painel, a grade acima ja cuida da margem, igual na home. */
body[class^="route-account"] .pickup-main-wrap { padding: 0 !important; }
body[class^="route-account"] .pickup-main { padding: 0 !important; }
/* Fundo branco em todas as paginas com o painel (Rodrigo, 03/10): antes
   umas paginas da conta eram cinza-creme e outras creme. */
body[class^="route-account"], .home-member { background: #fff; }

/* Cotacao a pagar (03/10/2026): aviso no padrao da casa, fundo creme claro e
   contorno fino, sem listra lateral; botao a direita, embaixo no celular. */
.payment-needed { display: grid; gap: 10px; margin: 0 0 22px; }
.payment-needed-card {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 16px; background: #FFFCF4; border: 1px solid var(--cat-border, #e3e0cf); border-radius: 8px;
}
.payment-needed-text { display: grid; gap: 3px; min-width: 0; font-size: .9rem; color: #231f20; }
.payment-needed-text strong { font-size: .95rem; }
.payment-needed-note { color: #6b6460; font-size: .84rem; }
.payment-needed-btn { flex: none; white-space: nowrap; }
@media (max-width: 600px) {
    .payment-needed-card { flex-direction: column; align-items: stretch; }
    .payment-needed-btn { text-align: center; }
}