/* ==========================================================================
   conta.css - area logada do cliente no tema "Nova".

   Cobre: grade lateral + conteudo, menu da conta (com a lista horizontal
   rolavel do mobile), cabecalho com avatar, cartoes de indicador, cartao
   de pedido com miniaturas empilhadas, trilha de status vertical e
   horizontal, lista de enderecos, grade de favoritos, detalhe do pedido
   (itens + resumo lateral) e o ajuste do estado vazio dentro do painel.

   Depende de tokens.css (cores, medidas, tempos - tudo por --lv-*),
   base.css (reset, foco visivel global, prefers-reduced-motion) e
   componentes.css (.lv-btn, .lv-cartao, .lv-badge, .lv-avatar, .lv-vazio,
   .lv-tabela, .lv-chip ...). O cartao de produto usado em Favoritos vem
   de vitrine.css; aqui so a grade e o botao de remover.

   Convencao: bloco `lv-<bloco>`, elemento `lv-<bloco>__<parte>`,
   modificador `lv-<bloco>--<variante>`, estado `is-<estado>`.
   ========================================================================== */

/* ==========================================================================
   1. GRADE DA AREA DA CONTA
   ========================================================================== */

.lv-conta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lv-espaco-5);
    align-items: start;
    padding-block: var(--lv-espaco-6) var(--lv-espaco-10);
}

.lv-conta__lateral {
    min-width: 0;
}

.lv-conta__conteudo {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-6);
    min-width: 0;
}

@media (min-width: 1024px) {
    .lv-conta {
        grid-template-columns: var(--lv-largura-lateral-conta) minmax(0, 1fr);
        gap: var(--lv-espaco-7);
        padding-block: var(--lv-espaco-7) var(--lv-espaco-11);
    }

    .lv-conta__lateral {
        position: sticky;
        top: calc(var(--lv-altura-cabecalho) + var(--lv-espaco-4));
    }
}

.lv-conta__titulo {
    font-size: var(--lv-fonte-2xg);
    font-weight: var(--lv-peso-forte);
    letter-spacing: var(--lv-espacamento-apertado);
}

.lv-conta__descricao {
    margin-top: var(--lv-espaco-1);
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-m);
}

/* ==========================================================================
   2. MENU DA CONTA
   ========================================================================== */

.lv-conta-menu {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-5);
    padding: var(--lv-espaco-4);
    border: var(--lv-borda-largura) solid var(--lv-borda);
    border-radius: var(--lv-raio-g);
    background-color: var(--lv-superficie);
}

.lv-conta-menu__grupo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.lv-conta-menu__titulo {
    padding: 0 var(--lv-espaco-3) var(--lv-espaco-2);
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-2xs);
    font-weight: var(--lv-peso-semi);
    letter-spacing: var(--lv-espacamento-caixa-alta);
    text-transform: uppercase;
}

.lv-conta-menu__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--lv-espaco-3);
    width: 100%;
    min-height: var(--lv-alvo-toque);
    padding: var(--lv-espaco-2) var(--lv-espaco-3);
    border-radius: var(--lv-raio-s);
    color: var(--lv-texto);
    font-size: var(--lv-fonte-m);
    font-weight: var(--lv-peso-medio);
    text-align: left;
    text-decoration: none;
    transition:
        background-color var(--lv-transicao-rapida) var(--lv-curva),
        color var(--lv-transicao-rapida) var(--lv-curva);
}

.lv-conta-menu__link:hover {
    background-color: var(--lv-hover);
    text-decoration: none;
}

.lv-conta-menu__link .lv-ic {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--lv-texto-suave);
}

.lv-conta-menu__rotulo {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Barra vertical de 3px com gradiente de marca marcando o item ativo. */
.lv-conta-menu__link.is-ativo,
.lv-conta-menu__link[aria-current="page"] {
    background-color: var(--lv-primaria-suave);
    color: var(--lv-primaria-texto);
    font-weight: var(--lv-peso-semi);
}

.lv-conta-menu__link.is-ativo::before,
.lv-conta-menu__link[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: var(--lv-espaco-2);
    bottom: var(--lv-espaco-2);
    left: 0;
    width: 3px;
    border-radius: var(--lv-raio-pilula);
    background-image: var(--lv-grad-marca);
}

.lv-conta-menu__link.is-ativo .lv-ic,
.lv-conta-menu__link[aria-current="page"] .lv-ic {
    color: var(--lv-primaria-texto);
}

.lv-conta-menu__contador {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 var(--lv-espaco-2);
    border-radius: var(--lv-raio-pilula);
    background-color: var(--lv-superficie-3);
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-2xs);
    font-weight: var(--lv-peso-forte);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.lv-conta-menu__link.is-ativo .lv-conta-menu__contador,
.lv-conta-menu__link[aria-current="page"] .lv-conta-menu__contador {
    background-color: var(--lv-primaria-suave-2);
    color: var(--lv-primaria-texto);
}

.lv-conta-menu__sair {
    color: var(--lv-texto-suave);
}

.lv-conta-menu__sair:hover {
    background-color: var(--lv-erro-suave);
    color: var(--lv-erro-texto);
}

.lv-conta-menu__sair:hover .lv-ic {
    color: var(--lv-erro-texto);
}

/* Abaixo de 1024px o menu vira uma tira horizontal rolavel dentro do
   proprio container - nunca empurra a largura do corpo. */
@media (max-width: 1023.98px) {
    .lv-conta-menu {
        flex-direction: row;
        gap: var(--lv-espaco-2);
        padding: var(--lv-espaco-2);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .lv-conta-menu__grupo {
        flex-direction: row;
        gap: var(--lv-espaco-2);
        flex: 0 0 auto;
    }

    .lv-conta-menu__titulo {
        display: none;
    }

    .lv-conta-menu__link {
        width: auto;
        white-space: nowrap;
        border-radius: var(--lv-raio-pilula);
        padding-inline: var(--lv-espaco-4);
    }

    .lv-conta-menu__link.is-ativo::before,
    .lv-conta-menu__link[aria-current="page"]::before {
        display: none;
    }

    .lv-conta-menu__link.is-ativo,
    .lv-conta-menu__link[aria-current="page"] {
        box-shadow: inset 0 0 0 1px var(--lv-primaria);
    }
}

/* Alternativa em select para telas muito estreitas (o HTML escolhe uma
   das duas formas e esconde a outra). */
.lv-conta-menu-select {
    display: none;
}

@media (max-width: 479.98px) {
    .lv-conta-menu-select {
        display: block;
    }

    .lv-conta-menu-select ~ .lv-conta-menu {
        display: none;
    }
}

/* ==========================================================================
   3. CABECALHO DA CONTA
   ========================================================================== */

.lv-conta-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lv-espaco-4);
    padding: var(--lv-espaco-5);
    border: var(--lv-borda-largura) solid var(--lv-borda);
    border-radius: var(--lv-raio-g);
    background-color: var(--lv-superficie);
    background-image: var(--lv-grad-superficie);
    box-shadow: var(--lv-sombra-1);
}

.lv-conta-topo__corpo {
    flex: 1 1 220px;
    min-width: 0;
}

.lv-conta-topo__nome {
    font-size: var(--lv-fonte-xg);
    font-weight: var(--lv-peso-semi);
    letter-spacing: var(--lv-espacamento-apertado);
    line-height: var(--lv-altura-titulo);
}

.lv-conta-topo__email {
    display: block;
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-m);
    overflow: hidden;
    text-overflow: ellipsis;
}

.lv-conta-topo__desde {
    display: inline-flex;
    align-items: center;
    gap: var(--lv-espaco-1);
    margin-top: var(--lv-espaco-2);
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-xs);
}

.lv-conta-topo__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lv-espaco-2);
    margin-left: auto;
}

/* ==========================================================================
   4. CARTOES DE INDICADOR
   ========================================================================== */

.lv-conta-resumo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lv-espaco-3);
}

@media (min-width: 768px) {
    .lv-conta-resumo {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--lv-espaco-4);
    }
}

.lv-conta-resumo__item {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-1);
    min-height: var(--lv-alvo-toque);
    padding: var(--lv-espaco-4);
    border: var(--lv-borda-largura) solid var(--lv-borda);
    border-radius: var(--lv-raio-m);
    background-color: var(--lv-superficie);
    color: var(--lv-texto);
    text-decoration: none;
    transition:
        border-color var(--lv-transicao-rapida) var(--lv-curva),
        box-shadow var(--lv-transicao-media) var(--lv-curva);
}

.lv-conta-resumo__item:hover {
    border-color: var(--lv-primaria);
    box-shadow: var(--lv-sombra-2);
    text-decoration: none;
}

.lv-conta-resumo__valor {
    font-size: var(--lv-fonte-2xg);
    font-weight: var(--lv-peso-forte);
    line-height: var(--lv-altura-apertada);
    letter-spacing: var(--lv-espacamento-apertado);
    font-variant-numeric: tabular-nums;
}

.lv-conta-resumo__rotulo {
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-xs);
    font-weight: var(--lv-peso-medio);
    letter-spacing: var(--lv-espacamento-largo);
    text-transform: uppercase;
}

.lv-conta-resumo__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: var(--lv-espaco-1);
    border-radius: var(--lv-raio-s);
    background-image: var(--lv-grad-marca-suave);
    color: var(--lv-primaria-texto);
}

/* ==========================================================================
   5. CARTAO DE PEDIDO
   ========================================================================== */

.lv-pedido-cartao {
    display: flex;
    flex-direction: column;
    border: var(--lv-borda-largura) solid var(--lv-borda);
    border-radius: var(--lv-raio-g);
    background-color: var(--lv-superficie);
    box-shadow: var(--lv-sombra-1);
    transition:
        border-color var(--lv-transicao-media) var(--lv-curva),
        box-shadow var(--lv-transicao-media) var(--lv-curva);
}

.lv-pedido-cartao:hover {
    border-color: var(--lv-borda-forte);
    box-shadow: var(--lv-sombra-2);
}

.lv-pedido-cartao__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lv-espaco-2) var(--lv-espaco-4);
    padding: var(--lv-espaco-4) var(--lv-espaco-5);
    border-bottom: var(--lv-borda-largura) solid var(--lv-borda);
    background-color: var(--lv-superficie-2);
    border-radius: var(--lv-raio-g) var(--lv-raio-g) 0 0;
}

.lv-pedido-cartao__numero {
    color: var(--lv-texto);
    font-size: var(--lv-fonte-m);
    font-weight: var(--lv-peso-semi);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.lv-pedido-cartao__numero:hover {
    color: var(--lv-primaria-texto);
}

.lv-pedido-cartao__data {
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-s);
}

.lv-pedido-cartao__situacao {
    margin-left: auto;
}

.lv-pedido-cartao__corpo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lv-espaco-4);
    padding: var(--lv-espaco-5);
}

/* Miniaturas empilhadas com sobreposicao; a borda da superficie separa
   uma da outra sem precisar de sombra. */
.lv-pedido-cartao__miniaturas {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: var(--lv-espaco-3);
}

.lv-pedido-cartao__miniatura {
    width: 48px;
    height: 60px;
    flex: 0 0 auto;
    margin-left: -12px;
    border: var(--lv-borda-largura-forte) solid var(--lv-superficie);
    border-radius: var(--lv-raio-s);
    background-color: var(--lv-superficie-2);
    object-fit: cover;
}

.lv-pedido-cartao__mais {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 60px;
    flex: 0 0 auto;
    margin-left: -12px;
    border: var(--lv-borda-largura-forte) solid var(--lv-superficie);
    border-radius: var(--lv-raio-s);
    background-color: var(--lv-superficie-3);
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-s);
    font-weight: var(--lv-peso-forte);
    font-variant-numeric: tabular-nums;
}

.lv-pedido-cartao__total {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: auto;
}

.lv-pedido-cartao__total-rotulo {
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-xs);
}

.lv-pedido-cartao__total-valor {
    color: var(--lv-texto);
    font-size: var(--lv-fonte-g);
    font-weight: var(--lv-peso-forte);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lv-pedido-cartao__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--lv-espaco-2);
    padding: var(--lv-espaco-3) var(--lv-espaco-5);
    border-top: var(--lv-borda-largura) solid var(--lv-borda);
}

.lv-pedido-cartao__entrega {
    margin-right: auto;
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-s);
}

@media (max-width: 479.98px) {
    .lv-pedido-cartao__corpo {
        flex-direction: column;
        align-items: stretch;
        gap: var(--lv-espaco-3);
    }

    .lv-pedido-cartao__total {
        align-items: flex-start;
        margin-left: 0;
    }

    .lv-pedido-cartao__rodape > .lv-btn {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   6. TRILHA DE STATUS
   ========================================================================== */

.lv-trilha {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
}

.lv-trilha__item {
    position: relative;
    display: flex;
    gap: var(--lv-espaco-4);
    padding-bottom: var(--lv-espaco-6);
}

.lv-trilha__item:last-child {
    padding-bottom: 0;
}

.lv-trilha__marcador {
    position: relative;
    z-index: var(--lv-z-elevado);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: var(--lv-borda-largura-forte) dashed var(--lv-borda-forte);
    border-radius: var(--lv-raio-circulo);
    background-color: var(--lv-superficie);
    color: var(--lv-texto-suave);
}

.lv-trilha__marcador .lv-ic {
    width: 16px;
    height: 16px;
}

/* Linha vertical ligando um marcador ao proximo. */
.lv-trilha__linha {
    position: absolute;
    top: 34px;
    bottom: 0;
    left: 16px;
    width: 2px;
    border-radius: var(--lv-raio-pilula);
    background-color: var(--lv-borda);
}

.lv-trilha__item:last-child .lv-trilha__linha {
    display: none;
}

.lv-trilha__corpo {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: var(--lv-espaco-1);
}

.lv-trilha__titulo {
    color: var(--lv-texto);
    font-size: var(--lv-fonte-m);
    font-weight: var(--lv-peso-semi);
    line-height: var(--lv-altura-titulo);
}

.lv-trilha__data {
    display: block;
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-xs);
    font-variant-numeric: tabular-nums;
}

.lv-trilha__descricao {
    margin-top: var(--lv-espaco-1);
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-s);
    line-height: var(--lv-altura-normal);
}

/* Estado concluido. */
.lv-trilha__item.is-concluido .lv-trilha__marcador {
    border-style: solid;
    border-color: var(--lv-sucesso);
    background-color: var(--lv-sucesso);
    color: var(--lv-sobre-sucesso);
}

.lv-trilha__item.is-concluido .lv-trilha__linha {
    background-color: var(--lv-sucesso);
}

/* Estado atual: gradiente de marca com anel pulsante discreto. O pulso e
   ambiente (nao e resposta a interacao) e o base.css ja o desliga quando o
   usuario pede menos movimento. */
.lv-trilha__item.is-atual .lv-trilha__marcador,
.lv-trilha__item[aria-current="step"] .lv-trilha__marcador {
    border-color: transparent;
    background-image: var(--lv-grad-marca);
    color: var(--lv-sobre-primaria);
    box-shadow: 0 0 0 4px var(--lv-primaria-suave);
    animation: lv-trilha-anel 2s var(--lv-curva) infinite;
}

.lv-trilha__item.is-atual .lv-trilha__titulo,
.lv-trilha__item[aria-current="step"] .lv-trilha__titulo {
    color: var(--lv-primaria-texto);
}

@keyframes lv-trilha-anel {
    0%,
    100% {
        box-shadow: 0 0 0 4px var(--lv-primaria-suave);
    }
    50% {
        box-shadow: 0 0 0 8px var(--lv-primaria-suave);
    }
}

/* --- Variante horizontal ------------------------------------------------- */

@media (min-width: 768px) {
    .lv-trilha--horizontal {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--lv-espaco-2);
    }

    .lv-trilha--horizontal .lv-trilha__item {
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        gap: var(--lv-espaco-2);
        padding-bottom: 0;
        text-align: center;
    }

    .lv-trilha--horizontal .lv-trilha__linha {
        top: 16px;
        right: calc(-50% + 17px);
        bottom: auto;
        left: calc(50% + 17px);
        width: auto;
        height: 2px;
    }

    .lv-trilha--horizontal .lv-trilha__corpo {
        padding-top: 0;
    }
}

/* ==========================================================================
   7. LISTA DE ENDERECOS
   ========================================================================== */

.lv-endereco-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lv-espaco-4);
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .lv-endereco-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.lv-endereco-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-2);
    height: 100%;
    padding: var(--lv-espaco-4);
    border: var(--lv-borda-largura) solid var(--lv-borda);
    border-radius: var(--lv-raio-m);
    background-color: var(--lv-superficie);
}

.lv-endereco-item.is-padrao {
    border-color: var(--lv-primaria);
    box-shadow: 0 0 0 1px var(--lv-primaria);
}

.lv-endereco-item__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lv-espaco-2);
}

.lv-endereco-item__apelido {
    color: var(--lv-texto);
    font-size: var(--lv-fonte-m);
    font-weight: var(--lv-peso-semi);
}

.lv-endereco-item__padrao {
    margin-left: auto;
}

.lv-endereco-item__linhas {
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-s);
    line-height: var(--lv-altura-normal);
}

.lv-endereco-item__linhas span {
    display: block;
}

.lv-endereco-item__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lv-espaco-2);
    margin-top: auto;
    padding-top: var(--lv-espaco-3);
    border-top: var(--lv-borda-largura) solid var(--lv-borda);
}

.lv-endereco-item__excluir {
    color: var(--lv-erro-texto);
}

.lv-endereco-item__excluir:hover {
    background-color: var(--lv-erro-suave);
    color: var(--lv-erro-texto);
}

/* ==========================================================================
   8. FAVORITOS
   ========================================================================== */

.lv-favoritos-grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lv-espaco-4);
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .lv-favoritos-grade {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .lv-favoritos-grade {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.lv-favoritos-item {
    position: relative;
    min-width: 0;
}

/* Botao de remover sobreposto ao cartao de produto (vitrine.css). Fica
   SEMPRE visivel: esconder no repouso deixaria a acao inalcancavel no
   toque. */
.lv-favoritos-item__remover {
    position: absolute;
    top: var(--lv-espaco-2);
    right: var(--lv-espaco-2);
    z-index: var(--lv-z-elevado);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--lv-alvo-toque);
    height: var(--lv-alvo-toque);
    border: var(--lv-borda-largura) solid var(--lv-borda);
    border-radius: var(--lv-raio-circulo);
    background-color: var(--lv-superficie);
    color: var(--lv-texto-suave);
    box-shadow: var(--lv-sombra-1);
    cursor: pointer;
    transition:
        background-color var(--lv-transicao-rapida) var(--lv-curva),
        border-color var(--lv-transicao-rapida) var(--lv-curva),
        color var(--lv-transicao-rapida) var(--lv-curva);
}

.lv-favoritos-item__remover:hover {
    border-color: var(--lv-erro);
    background-color: var(--lv-erro-suave);
    color: var(--lv-erro-texto);
}

/* ==========================================================================
   9. DETALHE DO PEDIDO
   ========================================================================== */

.lv-pedido-detalhe {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lv-espaco-5);
    align-items: start;
}

@media (min-width: 1024px) {
    .lv-pedido-detalhe {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: var(--lv-espaco-6);
    }

    .lv-pedido-detalhe__lateral {
        position: sticky;
        top: calc(var(--lv-altura-cabecalho) + var(--lv-espaco-4));
    }
}

.lv-pedido-detalhe__principal {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-5);
    min-width: 0;
}

.lv-pedido-detalhe__lateral {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-4);
    min-width: 0;
}

.lv-pedido-itens {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-4);
    padding: 0;
    margin: 0;
    list-style: none;
}

.lv-pedido-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--lv-espaco-3);
    align-items: start;
    padding-bottom: var(--lv-espaco-4);
    border-bottom: var(--lv-borda-largura) solid var(--lv-borda);
}

.lv-pedido-itens > .lv-pedido-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.lv-pedido-item__imagem {
    width: 64px;
    height: 80px;
    border-radius: var(--lv-raio-s);
    background-color: var(--lv-superficie-2);
    object-fit: cover;
}

.lv-pedido-item__corpo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lv-pedido-item__nome {
    color: var(--lv-texto);
    font-size: var(--lv-fonte-m);
    font-weight: var(--lv-peso-medio);
    line-height: var(--lv-altura-titulo);
    text-decoration: none;
}

.lv-pedido-item__nome:hover {
    color: var(--lv-primaria-texto);
}

.lv-pedido-item__variacao {
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-xs);
}

.lv-pedido-item__numeros {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--lv-espaco-1) var(--lv-espaco-4);
    margin-top: var(--lv-espaco-2);
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-s);
    font-variant-numeric: tabular-nums;
}

.lv-pedido-item__subtotal {
    color: var(--lv-texto);
    font-weight: var(--lv-peso-semi);
}

@media (min-width: 768px) {
    .lv-pedido-item {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        align-items: center;
    }

    .lv-pedido-item__numeros {
        justify-content: flex-end;
        margin-top: 0;
        text-align: right;
    }
}

/* Blocos de informacao (entrega, pagamento, nota fiscal). */
.lv-pedido-blocos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lv-espaco-4);
}

@media (min-width: 768px) {
    .lv-pedido-blocos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.lv-pedido-bloco {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-2);
    height: 100%;
    padding: var(--lv-espaco-4);
    border: var(--lv-borda-largura) solid var(--lv-borda);
    border-radius: var(--lv-raio-m);
    background-color: var(--lv-superficie);
}

.lv-pedido-bloco__titulo {
    display: flex;
    align-items: center;
    gap: var(--lv-espaco-2);
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-2xs);
    font-weight: var(--lv-peso-semi);
    letter-spacing: var(--lv-espacamento-caixa-alta);
    text-transform: uppercase;
}

.lv-pedido-bloco__corpo {
    color: var(--lv-texto);
    font-size: var(--lv-fonte-s);
    line-height: var(--lv-altura-normal);
}

.lv-pedido-bloco__corpo span {
    display: block;
}

.lv-pedido-bloco__acao {
    margin-top: auto;
    padding-top: var(--lv-espaco-2);
}

/* ==========================================================================
   10. ESTADO VAZIO DENTRO DO PAINEL
   ========================================================================== */

.lv-conta-vazio {
    padding-block: var(--lv-espaco-9);
    border: var(--lv-borda-largura) dashed var(--lv-borda);
    border-radius: var(--lv-raio-g);
    background-color: var(--lv-superficie);
}

.lv-conta-vazio .lv-vazio {
    padding-block: 0;
}