/* ============================================================
   MHDCommerce — Bloco de conta no Drawer mobile
   Arquivo: adicionar ao responsive-site.css (ou ao site.css)
   Usa as classes .drawer-* já existentes
   ============================================================ */

/* Cabeçalho "Olá, Nome!" dentro do drawer */
.drawer-user {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; margin-bottom: 8px;
    background: var(--brand-xlight); border-radius: var(--radius-md);
}
.drawer-user-avatar {
    width: 44px; height: 44px; border-radius: 99px; flex-shrink: 0;
    background: var(--brand); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.drawer-user-avatar svg { width: 22px; height: 22px; }
.drawer-user-info { min-width: 0; }
.drawer-user-hi { font-size: 12px; color: var(--muted); line-height: 1.1; }
.drawer-user-name {
    font-family: 'Sora', sans-serif; font-size: 17px; font-weight: 700; color: var(--text);
    line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Item "Sair" em vermelho */
.drawer-item.danger { color: #c0392b; }
.drawer-item.danger:hover { background: #fdecec; }

/* Item "Entrar ou cadastrar" (deslogado) em destaque */
.drawer-item.drawer-entrar {
    background: var(--brand); color: #fff; font-weight: 600;
    border-radius: var(--radius-md); margin-bottom: 8px;
}
.drawer-item.drawer-entrar:hover { background: var(--brand-mid); }
.drawer-item.drawer-entrar .di-arrow { color: rgba(255,255,255,.7); }