/* ==========================================================================
   produto.css - pagina de detalhe do produto: galeria com zoom, selecao de
   variacao, bloco de preco, acoes, barra de compra fixa no mobile,
   simulador de frete, abas de conteudo, avaliacoes e perguntas.
   Depende de tokens.css, base.css, componentes.css, layout.css e vitrine.css.
   ========================================================================== */

/* ==========================================================================
   1. ESTRUTURA
   ========================================================================== */

.lv-produto {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lv-espaco-6);
    padding-block: var(--lv-espaco-5) var(--lv-espaco-9);
}

@media (min-width: 1024px) {
    .lv-produto {
        grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
        gap: var(--lv-espaco-8);
        align-items: start;
    }
}

@media (min-width: 1280px) {
    .lv-produto {
        grid-template-columns: minmax(0, 1.25fr) 440px;
        gap: var(--lv-espaco-10);
    }
}

.lv-produto__compra {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-5);
}

@media (min-width: 1024px) {
    .lv-produto__compra {
        position: sticky;
        /* Nao deixa o cabecalho fixo cobrir o painel nem o foco (2.4.11). */
        top: calc(var(--lv-altura-cabecalho) + var(--lv-espaco-5));
    }
}

/* ==========================================================================
   2. GALERIA
   ========================================================================== */

.lv-galeria {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lv-espaco-3);
}

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

.lv-galeria__palco {
    position: relative;
    /* Altura reservada antes da imagem carregar: CLS zero. */
    aspect-ratio: 4 / 5;
    border: var(--lv-borda-largura) solid var(--lv-borda);
    border-radius: var(--lv-raio-g);
    background-color: var(--lv-superficie-2);
    overflow: hidden;
    order: 1;
}

@media (min-width: 768px) {
    .lv-galeria__palco {
        order: 2;
    }
}

.lv-galeria__imagem {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* O zoom por lente move o background-position; a transicao e so de opacidade
       na troca de foto, para nao brigar com o movimento do ponteiro. */
    transition: opacity var(--lv-transicao-media) var(--lv-curva);
}

.lv-galeria__palco.is-zoom {
    cursor: zoom-in;
}

/* Lente de zoom: um segundo plano com a imagem em escala, posicionado pelo JS
   via variaveis --lv-zoom-x / --lv-zoom-y. */
.lv-galeria__lente {
    position: absolute;
    inset: 0;
    background-image: var(--lv-zoom-img, none);
    background-repeat: no-repeat;
    background-size: 220%;
    background-position: var(--lv-zoom-x, 50%) var(--lv-zoom-y, 50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--lv-transicao-media) var(--lv-curva);
}

.lv-galeria__palco.is-ampliando .lv-galeria__lente {
    opacity: 1;
}

.lv-galeria__selos {
    position: absolute;
    top: var(--lv-espaco-4);
    left: var(--lv-espaco-4);
    z-index: var(--lv-z-base);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lv-espaco-2);
}

.lv-galeria__acoes {
    position: absolute;
    top: var(--lv-espaco-3);
    right: var(--lv-espaco-3);
    z-index: var(--lv-z-elevado);
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-2);
}

.lv-galeria__acao {
    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);
    box-shadow: var(--lv-sombra-2);
    color: var(--lv-texto-suave);
    transition:
        color var(--lv-transicao-rapida) var(--lv-curva),
        background-color var(--lv-transicao-rapida) var(--lv-curva);
}

.lv-galeria__acao:hover {
    background-color: var(--lv-primaria-suave);
    color: var(--lv-primaria-texto);
}

.lv-galeria__acao[aria-pressed="true"] {
    color: var(--lv-erro-texto);
}

/* Setas de troca de foto no palco (alternativa por botao ao arraste). */
.lv-galeria__seta {
    position: absolute;
    top: 50%;
    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);
    transform: translateY(-50%);
    border: var(--lv-borda-largura) solid var(--lv-borda);
    border-radius: var(--lv-raio-circulo);
    background-color: var(--lv-superficie);
    box-shadow: var(--lv-sombra-2);
    color: var(--lv-texto);
}

.lv-galeria__seta:hover {
    background-color: var(--lv-primaria-suave);
    color: var(--lv-primaria-texto);
}

.lv-galeria__seta--anterior {
    left: var(--lv-espaco-3);
}

.lv-galeria__seta--proxima {
    right: var(--lv-espaco-3);
}

.lv-galeria__seta:disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Miniaturas. */
.lv-galeria__miniaturas {
    display: flex;
    gap: var(--lv-espaco-2);
    order: 2;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: var(--lv-espaco-1);
}

.lv-galeria__miniaturas::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    .lv-galeria__miniaturas {
        order: 1;
        flex-direction: column;
        max-height: 640px;
        overflow-x: hidden;
        overflow-y: auto;
        padding-bottom: 0;
        padding-right: var(--lv-espaco-1);
    }
}

.lv-galeria__miniatura {
    position: relative;
    flex: 0 0 auto;
    width: 68px;
    aspect-ratio: 4 / 5;
    border: 2px solid transparent;
    border-radius: var(--lv-raio-s);
    background-color: var(--lv-superficie-2);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--lv-transicao-rapida) var(--lv-curva);
}

@media (min-width: 768px) {
    .lv-galeria__miniatura {
        width: 100%;
    }
}

.lv-galeria__miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lv-galeria__miniatura:hover {
    border-color: var(--lv-borda-forte);
}

.lv-galeria__miniatura[aria-current="true"],
.lv-galeria__miniatura.is-ativa {
    border-color: var(--lv-primaria);
}

.lv-galeria__miniatura--video::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--lv-backdrop);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
}

/* ==========================================================================
   3. CABECALHO DO PRODUTO
   ========================================================================== */

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

.lv-produto__titulo {
    margin-top: var(--lv-espaco-2);
    font-size: var(--lv-fonte-2xg);
    font-weight: var(--lv-peso-forte);
    line-height: var(--lv-altura-titulo);
    letter-spacing: var(--lv-espacamento-apertado);
}

@media (min-width: 1024px) {
    .lv-produto__titulo {
        font-size: var(--lv-fonte-3xg);
    }
}

.lv-produto__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lv-espaco-3);
    margin-top: var(--lv-espaco-3);
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-s);
}

.lv-produto__sku {
    font-family: var(--lv-fonte-mono);
    font-size: var(--lv-fonte-xs);
}

.lv-produto__ancora-avaliacoes {
    display: inline-flex;
    align-items: center;
    gap: var(--lv-espaco-2);
    min-height: var(--lv-alvo-toque-denso);
    color: var(--lv-texto-suave);
    text-decoration: none;
}

.lv-produto__ancora-avaliacoes:hover {
    color: var(--lv-primaria-texto);
    text-decoration: underline;
}

/* ==========================================================================
   4. BLOCO DE PRECO
   ========================================================================== */

.lv-preco {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-2);
    /* Altura reservada: a troca de variacao recalcula o preco e nao pode
       empurrar o botao de comprar (CLS). */
    min-height: 92px;
}

.lv-preco__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--lv-espaco-3);
}

.lv-preco__de {
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-base);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.lv-preco__por {
    color: var(--lv-texto);
    font-size: var(--lv-fonte-3xg);
    font-weight: var(--lv-peso-extra);
    line-height: 1;
    letter-spacing: var(--lv-espacamento-apertado);
    font-variant-numeric: tabular-nums;
}

.lv-preco__economia {
    display: inline-flex;
    align-items: center;
    gap: var(--lv-espaco-1);
    padding: var(--lv-espaco-1) var(--lv-espaco-2);
    border-radius: var(--lv-raio-xs);
    background-color: var(--lv-sucesso-suave);
    color: var(--lv-sucesso-texto);
    font-size: var(--lv-fonte-xs);
    font-weight: var(--lv-peso-semi);
}

.lv-preco__parcelas {
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-m);
}

.lv-preco__parcelas strong {
    color: var(--lv-texto);
}

.lv-preco__avista {
    display: inline-flex;
    align-items: center;
    gap: var(--lv-espaco-2);
    color: var(--lv-sucesso-texto);
    font-size: var(--lv-fonte-m);
    font-weight: var(--lv-peso-medio);
}

.lv-preco__ver-parcelas {
    color: var(--lv-primaria-texto);
    font-size: var(--lv-fonte-s);
    font-weight: var(--lv-peso-semi);
    text-decoration: underline;
}

/* Tabela de parcelamento (dentro de modal). */
.lv-parcelamento {
    width: 100%;
    font-size: var(--lv-fonte-m);
}

.lv-parcelamento td {
    padding: var(--lv-espaco-2) var(--lv-espaco-3);
    border-bottom: var(--lv-borda-largura) solid var(--lv-borda);
    font-variant-numeric: tabular-nums;
}

.lv-parcelamento td:last-child {
    text-align: right;
}

.lv-parcelamento .is-sem-juros {
    color: var(--lv-sucesso-texto);
    font-weight: var(--lv-peso-semi);
}

/* ==========================================================================
   5. SELECAO DE VARIACAO
   ========================================================================== */

.lv-variacoes {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-5);
}

.lv-variacao__cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lv-espaco-3);
    margin-bottom: var(--lv-espaco-3);
}

.lv-variacao__rotulo {
    font-size: var(--lv-fonte-m);
    font-weight: var(--lv-peso-semi);
}

.lv-variacao__escolhido {
    color: var(--lv-texto-suave);
    font-weight: var(--lv-peso-normal);
}

.lv-variacao__guia {
    color: var(--lv-primaria-texto);
    font-size: var(--lv-fonte-s);
    font-weight: var(--lv-peso-semi);
    text-decoration: underline;
}

.lv-variacao__opcoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lv-espaco-2);
}

/* --- Amostra de cor circular --- */
.lv-cor {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Alvo de toque de 44px com o disco visivel de 34px. */
    width: var(--lv-alvo-toque);
    height: var(--lv-alvo-toque);
    border-radius: var(--lv-raio-circulo);
    cursor: pointer;
}

.lv-cor__disco {
    width: 34px;
    height: 34px;
    border: 1px solid var(--lv-borda-forte);
    border-radius: var(--lv-raio-circulo);
    box-shadow: var(--lv-sombra-1);
    transition: transform var(--lv-transicao-rapida) var(--lv-curva);
}

.lv-cor:hover .lv-cor__disco {
    transform: scale(1.07);
}

.lv-cor[aria-checked="true"]::after,
.lv-cor.is-ativa::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--lv-primaria);
    border-radius: var(--lv-raio-circulo);
}

/* Esgotada: risco diagonal alem da cor (cor nunca e o unico canal). */
.lv-cor.is-esgotada .lv-cor__disco {
    opacity: 0.45;
}

.lv-cor.is-esgotada::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 6px;
    right: 6px;
    height: 2px;
    background-color: var(--lv-erro);
    transform: rotate(-45deg);
    transform-origin: center;
}

/* --- Botao de tamanho --- */
.lv-tamanho {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--lv-alvo-toque);
    min-height: var(--lv-alvo-toque);
    padding: 0 var(--lv-espaco-3);
    border: var(--lv-borda-largura) solid var(--lv-borda-forte);
    border-radius: var(--lv-raio-s);
    background-color: var(--lv-superficie);
    color: var(--lv-texto);
    font-size: var(--lv-fonte-m);
    font-weight: var(--lv-peso-medio);
    cursor: pointer;
    transition:
        border-color var(--lv-transicao-rapida) var(--lv-curva),
        background-color var(--lv-transicao-rapida) var(--lv-curva),
        color var(--lv-transicao-rapida) var(--lv-curva);
}

.lv-tamanho:hover:not(.is-esgotado) {
    border-color: var(--lv-primaria);
    color: var(--lv-primaria-texto);
}

.lv-tamanho[aria-checked="true"],
.lv-tamanho.is-ativo {
    border-color: var(--lv-primaria);
    background-color: var(--lv-primaria);
    color: var(--lv-sobre-primaria);
}

/* Esgotado: risco diagonal, opacidade e texto no aria-label. */
.lv-tamanho.is-esgotado {
    position: relative;
    border-style: dashed;
    color: var(--lv-texto-suave);
    opacity: 0.65;
    cursor: not-allowed;
}

.lv-tamanho.is-esgotado::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 4px;
    right: 4px;
    height: 1px;
    background-color: var(--lv-borda-forte);
    transform: rotate(-18deg);
}

.lv-variacao__aviso {
    display: flex;
    align-items: center;
    gap: var(--lv-espaco-2);
    margin-top: var(--lv-espaco-2);
    color: var(--lv-erro-texto);
    font-size: var(--lv-fonte-s);
    font-weight: var(--lv-peso-medio);
}

/* ==========================================================================
   6. ACOES DE COMPRA
   ========================================================================== */

.lv-compra {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-3);
    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);
    box-shadow: var(--lv-sombra-1);
}

.lv-compra__quantidade {
    display: flex;
    align-items: center;
    gap: var(--lv-espaco-3);
}

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

.lv-compra__acoes {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-2);
}

@media (min-width: 480px) {
    .lv-compra__acoes {
        flex-direction: row;
    }

    .lv-compra__acoes .lv-btn--principal {
        flex: 1 1 auto;
    }
}

.lv-compra__garantias {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-2);
    padding-top: var(--lv-espaco-3);
    border-top: var(--lv-borda-largura) solid var(--lv-borda);
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-s);
}

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

.lv-compra__garantia .lv-ic {
    color: var(--lv-primaria-texto);
}

/* "Avise-me quando chegar". */
.lv-avise-me {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-3);
    padding: var(--lv-espaco-4);
    border: var(--lv-borda-largura) solid var(--lv-aviso);
    border-radius: var(--lv-raio-m);
    background-color: var(--lv-aviso-suave);
}

.lv-avise-me__titulo {
    display: flex;
    align-items: center;
    gap: var(--lv-espaco-2);
    color: var(--lv-aviso-texto);
    font-weight: var(--lv-peso-semi);
}

/* ==========================================================================
   7. BARRA DE COMPRA FIXA NO MOBILE
   Aparece quando o botao principal sai da viewport. Fica escondida por
   padrao e o JS troca `is-visivel`. Nunca cobre o elemento focado: o body
   ganha `scroll-padding-bottom` quando ela esta visivel (WCAG 2.4.11).
   ========================================================================== */

.lv-compra-fixa {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--lv-z-grudento);
    display: flex;
    align-items: center;
    gap: var(--lv-espaco-3);
    padding: var(--lv-espaco-3) var(--lv-espaco-4);
    padding-bottom: max(var(--lv-espaco-3), env(safe-area-inset-bottom));
    border-top: var(--lv-borda-largura) solid var(--lv-borda);
    background-color: var(--lv-superficie);
    box-shadow: var(--lv-sombra-4);
    transform: translateY(100%);
    visibility: hidden;
    transition:
        transform var(--lv-transicao-lenta) var(--lv-curva),
        visibility var(--lv-transicao-lenta) var(--lv-curva);
}

@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .lv-compra-fixa {
        background-color: var(--lv-vidro);
        -webkit-backdrop-filter: blur(var(--lv-vidro-blur)) saturate(180%);
        backdrop-filter: blur(var(--lv-vidro-blur)) saturate(180%);
    }
}

.lv-compra-fixa.is-visivel {
    transform: none;
    visibility: visible;
}

/* Enquanto a barra esta visivel, reserva o espaco dela na rolagem por
   ancora e no scroll-into-view do foco. */
body.lv-com-barra-compra {
    scroll-padding-bottom: 92px;
}

@media (min-width: 1024px) {
    .lv-compra-fixa {
        display: none;
    }

    body.lv-com-barra-compra {
        scroll-padding-bottom: 0;
    }
}

.lv-compra-fixa__midia {
    width: 44px;
    height: 55px;
    flex: 0 0 auto;
    border-radius: var(--lv-raio-xs);
    background-color: var(--lv-superficie-2);
    object-fit: cover;
}

.lv-compra-fixa__corpo {
    flex: 1 1 auto;
    min-width: 0;
    line-height: var(--lv-altura-apertada);
}

.lv-compra-fixa__nome {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--lv-texto);
    font-size: var(--lv-fonte-xs);
}

.lv-compra-fixa__variacao {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-2xs);
}

.lv-compra-fixa__preco {
    display: block;
    margin-top: 2px;
    color: var(--lv-texto);
    font-size: var(--lv-fonte-g);
    font-weight: var(--lv-peso-forte);
    font-variant-numeric: tabular-nums;
}

.lv-compra-fixa__btn {
    flex: 0 0 auto;
}

/* ==========================================================================
   8. SIMULADOR DE FRETE
   ========================================================================== */

.lv-frete-sim {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-3);
    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-2);
}

.lv-frete-sim__titulo {
    display: flex;
    align-items: center;
    gap: var(--lv-espaco-2);
    font-size: var(--lv-fonte-m);
    font-weight: var(--lv-peso-semi);
}

.lv-frete-sim__form {
    display: flex;
    gap: var(--lv-espaco-2);
    flex-wrap: wrap;
}

.lv-frete-sim__cep {
    flex: 1 1 150px;
    max-width: 200px;
}

.lv-frete-sim__resultado {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-2);
}

.lv-frete-sim__opcao {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lv-espaco-3);
    padding: var(--lv-espaco-2) 0;
    border-bottom: var(--lv-borda-largura) solid var(--lv-borda);
    font-size: var(--lv-fonte-m);
}

.lv-frete-sim__opcao:last-child {
    border-bottom: 0;
}

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

.lv-frete-sim__valor {
    font-weight: var(--lv-peso-semi);
    font-variant-numeric: tabular-nums;
}

.lv-frete-sim__gratis {
    color: var(--lv-sucesso-texto);
    font-weight: var(--lv-peso-forte);
}

.lv-frete-sim__link {
    color: var(--lv-primaria-texto);
    font-size: var(--lv-fonte-xs);
    text-decoration: underline;
}

/* ==========================================================================
   9. ABAS DE CONTEUDO
   ========================================================================== */

.lv-produto-conteudo {
    padding-block: var(--lv-espaco-8);
    border-top: var(--lv-borda-largura) solid var(--lv-borda);
}

.lv-especificacoes {
    width: 100%;
    max-width: 720px;
    font-size: var(--lv-fonte-m);
}

.lv-especificacoes tr {
    border-bottom: var(--lv-borda-largura) solid var(--lv-borda);
}

.lv-especificacoes th {
    width: 40%;
    padding: var(--lv-espaco-3) var(--lv-espaco-4) var(--lv-espaco-3) 0;
    color: var(--lv-texto-suave);
    font-weight: var(--lv-peso-medio);
    text-align: left;
    vertical-align: top;
}

.lv-especificacoes td {
    padding: var(--lv-espaco-3) 0;
    color: var(--lv-texto);
}

/* ==========================================================================
   10. AVALIACOES
   ========================================================================== */

.lv-avaliacoes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lv-espaco-7);
}

@media (min-width: 1024px) {
    .lv-avaliacoes {
        grid-template-columns: 320px minmax(0, 1fr);
        gap: var(--lv-espaco-9);
        align-items: start;
    }
}

.lv-avaliacoes__resumo {
    display: flex;
    flex-direction: column;
    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);
}

.lv-avaliacoes__nota {
    display: flex;
    align-items: center;
    gap: var(--lv-espaco-4);
}

.lv-avaliacoes__nota-valor {
    font-size: var(--lv-fonte-4xg);
    font-weight: var(--lv-peso-extra);
    line-height: 1;
    letter-spacing: var(--lv-espacamento-apertado);
    font-variant-numeric: tabular-nums;
}

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

/* Distribuicao por estrela. */
.lv-distribuicao {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-2);
}

.lv-distribuicao__linha {
    display: grid;
    grid-template-columns: 46px 1fr 44px;
    align-items: center;
    gap: var(--lv-espaco-3);
    min-height: var(--lv-alvo-toque-denso);
    padding: 0;
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-s);
    text-align: left;
    cursor: pointer;
    background: none;
    border: 0;
}

.lv-distribuicao__linha:hover .lv-distribuicao__barra {
    background-color: var(--lv-primaria-suave-2);
}

.lv-distribuicao__linha[aria-pressed="true"] {
    color: var(--lv-texto);
    font-weight: var(--lv-peso-semi);
}

.lv-distribuicao__estrela {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--lv-aviso);
}

.lv-distribuicao__trilho {
    height: 8px;
    border-radius: var(--lv-raio-pilula);
    background-color: var(--lv-superficie-3);
    overflow: hidden;
}

.lv-distribuicao__barra {
    height: 100%;
    border-radius: inherit;
    background-color: var(--lv-aviso);
    transition:
        width var(--lv-transicao-lenta) var(--lv-curva),
        background-color var(--lv-transicao-rapida) var(--lv-curva);
}

.lv-distribuicao__pct {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Lista de avaliacoes. */
.lv-avaliacoes__lista {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-6);
}

.lv-avaliacao {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-3);
    padding-bottom: var(--lv-espaco-6);
    border-bottom: var(--lv-borda-largura) solid var(--lv-borda);
}

.lv-avaliacao:last-child {
    border-bottom: 0;
}

.lv-avaliacao__topo {
    display: flex;
    align-items: center;
    gap: var(--lv-espaco-3);
    flex-wrap: wrap;
}

.lv-avaliacao__autor {
    font-weight: var(--lv-peso-semi);
}

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

.lv-avaliacao__verificada {
    display: inline-flex;
    align-items: center;
    gap: var(--lv-espaco-1);
    color: var(--lv-sucesso-texto);
    font-size: var(--lv-fonte-xs);
    font-weight: var(--lv-peso-semi);
}

.lv-avaliacao__titulo {
    font-size: var(--lv-fonte-g);
    font-weight: var(--lv-peso-semi);
}

.lv-avaliacao__texto {
    color: var(--lv-texto-suave);
    line-height: var(--lv-altura-solta);
}

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

.lv-avaliacao__fotos {
    display: flex;
    gap: var(--lv-espaco-2);
    flex-wrap: wrap;
}

.lv-avaliacao__foto {
    width: 72px;
    height: 72px;
    border-radius: var(--lv-raio-s);
    background-color: var(--lv-superficie-2);
    object-fit: cover;
    cursor: zoom-in;
}

.lv-avaliacao__rodape {
    display: flex;
    align-items: center;
    gap: var(--lv-espaco-3);
    flex-wrap: wrap;
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-s);
}

.lv-avaliacao__voto {
    display: inline-flex;
    align-items: center;
    gap: var(--lv-espaco-2);
    min-height: var(--lv-alvo-toque-denso);
    padding: 0 var(--lv-espaco-3);
    border: var(--lv-borda-largura) solid var(--lv-borda);
    border-radius: var(--lv-raio-pilula);
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-xs);
    font-weight: var(--lv-peso-medio);
}

.lv-avaliacao__voto:hover,
.lv-avaliacao__voto[aria-pressed="true"] {
    border-color: var(--lv-primaria);
    color: var(--lv-primaria-texto);
}

/* Resposta da loja. */
.lv-avaliacao__resposta {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-2);
    padding: var(--lv-espaco-4);
    margin-left: var(--lv-espaco-5);
    border-left: 3px solid var(--lv-primaria);
    border-radius: 0 var(--lv-raio-s) var(--lv-raio-s) 0;
    background-color: var(--lv-superficie-2);
}

.lv-avaliacao__resposta-autor {
    display: flex;
    align-items: center;
    gap: var(--lv-espaco-2);
    color: var(--lv-primaria-texto);
    font-size: var(--lv-fonte-s);
    font-weight: var(--lv-peso-semi);
}

/* ==========================================================================
   11. PERGUNTAS E RESPOSTAS
   ========================================================================== */

.lv-perguntas {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-5);
    max-width: 860px;
}

.lv-pergunta {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-3);
    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-pergunta__texto {
    display: flex;
    gap: var(--lv-espaco-3);
    font-weight: var(--lv-peso-medio);
}

.lv-pergunta__marcador {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--lv-raio-circulo);
    background-color: var(--lv-superficie-3);
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-xs);
    font-weight: var(--lv-peso-forte);
}

.lv-pergunta__resposta {
    display: flex;
    gap: var(--lv-espaco-3);
    padding-left: var(--lv-espaco-2);
    color: var(--lv-texto-suave);
    line-height: var(--lv-altura-solta);
}

.lv-pergunta__resposta .lv-pergunta__marcador {
    background-image: var(--lv-grad-marca);
    color: var(--lv-sobre-primaria);
}

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

.lv-pergunta__sem-resposta {
    color: var(--lv-aviso-texto);
    font-size: var(--lv-fonte-s);
    font-style: italic;
}

/* ==========================================================================
   12. COMPRE JUNTO
   ========================================================================== */

.lv-compre-junto {
    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);
}

.lv-compre-junto__itens {
    display: flex;
    align-items: center;
    gap: var(--lv-espaco-3);
    flex-wrap: wrap;
}

.lv-compre-junto__item {
    width: 96px;
    text-align: center;
}

.lv-compre-junto__item img {
    width: 96px;
    aspect-ratio: 4 / 5;
    border-radius: var(--lv-raio-s);
    background-color: var(--lv-superficie-2);
    object-fit: cover;
}

.lv-compre-junto__nome {
    display: block;
    margin-top: var(--lv-espaco-2);
    font-size: var(--lv-fonte-2xs);
    line-height: var(--lv-altura-titulo);
    color: var(--lv-texto-suave);
}

.lv-compre-junto__mais {
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-xg);
    font-weight: var(--lv-peso-forte);
}

.lv-compre-junto__total {
    margin-left: auto;
    text-align: right;
}

.lv-compre-junto__total-valor {
    display: block;
    font-size: var(--lv-fonte-xg);
    font-weight: var(--lv-peso-forte);
    font-variant-numeric: tabular-nums;
}