/* ==========================================================================
   layout.css - chrome da vitrine: barra de anuncio, cabecalho fixo, busca,
   mega-menu, menu mobile, mini-carrinho, rodape e grade responsiva.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Esqueleto da pagina
   -------------------------------------------------------------------------- */

.lv-pagina {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.lv-principal {
    flex: 1 1 auto;
    width: 100%;
}

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

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

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

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

    .lv-grade--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lv-grade--lateral {
        grid-template-columns: var(--lv-largura-filtros) minmax(0, 1fr);
        gap: var(--lv-espaco-7);
        align-items: start;
    }

    .lv-grade--lateral-direita {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: var(--lv-espaco-7);
        align-items: start;
    }
}

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

/* --------------------------------------------------------------------------
   2. Barra de anuncio
   -------------------------------------------------------------------------- */

.lv-anuncio {
    position: relative;
    z-index: var(--lv-z-cabecalho);
    min-height: var(--lv-altura-anuncio);
    background-image: var(--lv-grad-marca);
    color: var(--lv-sobre-primaria);
    font-size: var(--lv-fonte-xs);
    font-weight: var(--lv-peso-medio);
    letter-spacing: var(--lv-espacamento-largo);
    overflow: hidden;
}

.lv-anuncio__interno {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lv-espaco-3);
    min-height: var(--lv-altura-anuncio);
    text-align: center;
}

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

.lv-anuncio__item + .lv-anuncio__item::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: var(--lv-raio-circulo);
    background-color: currentColor;
    opacity: 0.6;
}

.lv-anuncio a {
    color: inherit;
    text-decoration: underline;
    font-weight: var(--lv-peso-semi);
}

.lv-anuncio__fechar {
    position: absolute;
    top: 50%;
    right: var(--lv-espaco-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    border-radius: var(--lv-raio-xs);
    color: inherit;
    opacity: 0.85;
}

.lv-anuncio__fechar:hover {
    background-color: rgba(255, 255, 255, 0.16);
    opacity: 1;
}

@media (max-width: 767.98px) {
    .lv-anuncio__item:nth-child(n + 2) {
        display: none;
    }

    .lv-anuncio__interno {
        padding-right: var(--lv-espaco-8);
    }
}

/* --------------------------------------------------------------------------
   3. Cabecalho fixo
   -------------------------------------------------------------------------- */

.lv-cabecalho {
    position: sticky;
    top: 0;
    z-index: var(--lv-z-cabecalho);
    border-bottom: var(--lv-borda-largura) solid var(--lv-borda);
    background-color: var(--lv-superficie);
    transition:
        box-shadow var(--lv-transicao-lenta) var(--lv-curva),
        background-color var(--lv-transicao-lenta) var(--lv-curva);
}

@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .lv-cabecalho {
        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-cabecalho.is-rolado {
    box-shadow: var(--lv-sombra-2);
}

.lv-cabecalho__interno {
    display: flex;
    align-items: center;
    gap: var(--lv-espaco-4);
    min-height: var(--lv-altura-cabecalho);
}

.lv-cabecalho__marca {
    display: inline-flex;
    align-items: center;
    gap: var(--lv-espaco-2);
    flex: 0 0 auto;
    color: var(--lv-texto);
    text-decoration: none;
}

.lv-cabecalho__marca:hover {
    text-decoration: none;
}

.lv-cabecalho__logo {
    height: 30px;
    width: auto;
}

.lv-cabecalho__busca {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 560px;
}

.lv-cabecalho__acoes {
    display: flex;
    align-items: center;
    gap: var(--lv-espaco-1);
    flex: 0 0 auto;
    margin-left: auto;
}

.lv-acao-cabecalho {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: var(--lv-alvo-toque);
    min-height: var(--lv-alvo-toque);
    padding: var(--lv-espaco-1) var(--lv-espaco-2);
    border-radius: var(--lv-raio-s);
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-2xs);
    font-weight: var(--lv-peso-medio);
    text-decoration: none;
    transition:
        background-color var(--lv-transicao-rapida) var(--lv-curva),
        color var(--lv-transicao-rapida) var(--lv-curva);
}

.lv-acao-cabecalho:hover {
    background-color: var(--lv-hover);
    color: var(--lv-texto);
    text-decoration: none;
}

.lv-acao-cabecalho .lv-ic {
    width: 22px;
    height: 22px;
}

.lv-acao-cabecalho__rotulo {
    display: none;
}

.lv-acao-cabecalho__contador {
    position: absolute;
    top: 2px;
    right: 0;
}

@media (min-width: 1024px) {
    .lv-acao-cabecalho__rotulo {
        display: block;
    }
}

/* Botao de menu (hamburguer) - so no mobile. */
.lv-cabecalho__menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--lv-alvo-toque);
    height: var(--lv-alvo-toque);
    flex: 0 0 auto;
    border-radius: var(--lv-raio-s);
    color: var(--lv-texto);
}

.lv-cabecalho__menu-btn:hover {
    background-color: var(--lv-hover);
}

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

@media (max-width: 1023.98px) {
    .lv-cabecalho__interno {
        min-height: var(--lv-altura-cabecalho-compacto);
        flex-wrap: wrap;
        padding-block: var(--lv-espaco-2);
    }

    .lv-cabecalho__busca {
        order: 10;
        flex: 1 0 100%;
        max-width: none;
    }
}

/* --------------------------------------------------------------------------
   4. Busca do cabecalho
   -------------------------------------------------------------------------- */

.lv-busca {
    position: relative;
    width: 100%;
}

.lv-busca__form {
    display: flex;
    align-items: center;
    width: 100%;
}

.lv-busca__campo {
    width: 100%;
    min-height: var(--lv-alvo-toque);
    padding: var(--lv-espaco-2) var(--lv-alvo-toque) var(--lv-espaco-2) var(--lv-espaco-9);
    border: var(--lv-borda-largura) solid var(--lv-borda-forte);
    border-radius: var(--lv-raio-pilula);
    background-color: var(--lv-superficie-2);
    color: var(--lv-texto);
    font-size: var(--lv-fonte-m);
    transition:
        border-color var(--lv-transicao-rapida) var(--lv-curva),
        box-shadow var(--lv-transicao-rapida) var(--lv-curva),
        background-color var(--lv-transicao-rapida) var(--lv-curva);
}

.lv-busca__campo::placeholder {
    color: var(--lv-texto-suave);
}

.lv-busca__campo:focus {
    border-color: var(--lv-primaria);
    background-color: var(--lv-superficie);
    box-shadow: 0 0 0 3px var(--lv-primaria-suave);
    outline: none;
}

.lv-busca__campo:focus-visible {
    outline: var(--lv-foco-largura) solid var(--lv-foco);
    outline-offset: 1px;
}

.lv-busca__icone {
    position: absolute;
    left: var(--lv-espaco-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--lv-texto-suave);
    pointer-events: none;
}

.lv-busca__enviar {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--lv-raio-circulo);
    color: var(--lv-texto-suave);
}

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

/* Painel de sugestoes (autocomplete). */
.lv-busca__sugestoes {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: var(--lv-z-popover);
    max-height: min(480px, 70dvh);
    padding: var(--lv-espaco-2);
    border: var(--lv-borda-largura) solid var(--lv-borda);
    border-radius: var(--lv-raio-m);
    background-color: var(--lv-superficie);
    box-shadow: var(--lv-sombra-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: lv-entrar-escala var(--lv-transicao-media) var(--lv-curva);
}

.lv-busca__sugestoes[hidden] {
    display: none;
}

.lv-busca__grupo-titulo {
    padding: var(--lv-espaco-2) var(--lv-espaco-3) var(--lv-espaco-1);
    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-busca__opcao {
    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);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.lv-busca__opcao:hover,
.lv-busca__opcao.is-realcada,
.lv-busca__opcao[aria-selected="true"] {
    background-color: var(--lv-primaria-suave);
    color: var(--lv-texto);
    text-decoration: none;
}

.lv-busca__opcao .lv-ic {
    color: var(--lv-texto-suave);
}

.lv-busca__miniatura {
    width: 40px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: var(--lv-raio-xs);
    background-color: var(--lv-superficie-2);
    object-fit: cover;
}

.lv-busca__opcao-corpo {
    flex: 1 1 auto;
    min-width: 0;
}

.lv-busca__opcao-nome {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lv-busca__opcao-meta {
    display: block;
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-xs);
}

.lv-busca__opcao-preco {
    flex: 0 0 auto;
    font-weight: var(--lv-peso-semi);
    font-size: var(--lv-fonte-s);
}

.lv-busca__rodape {
    margin-top: var(--lv-espaco-2);
    padding-top: var(--lv-espaco-2);
    border-top: var(--lv-borda-largura) solid var(--lv-borda);
}

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

/* --------------------------------------------------------------------------
   5. Mega-menu de categorias
   -------------------------------------------------------------------------- */

.lv-navcat {
    display: none;
    position: relative;
    z-index: var(--lv-z-megamenu);
    border-bottom: var(--lv-borda-largura) solid var(--lv-borda);
    background-color: var(--lv-superficie);
}

@media (min-width: 1024px) {
    .lv-navcat {
        display: block;
    }
}

@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .lv-navcat {
        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-navcat__lista {
    display: flex;
    align-items: stretch;
    gap: var(--lv-espaco-1);
    padding: 0;
    margin: 0;
    list-style: none;
}

.lv-navcat__item {
    position: relative;
    display: flex;
}

.lv-navcat__link {
    display: inline-flex;
    align-items: center;
    gap: var(--lv-espaco-2);
    min-height: var(--lv-alvo-toque);
    padding: var(--lv-espaco-2) var(--lv-espaco-4);
    border-radius: var(--lv-raio-s);
    color: var(--lv-texto);
    font-size: var(--lv-fonte-m);
    font-weight: var(--lv-peso-medio);
    text-decoration: none;
    white-space: nowrap;
    transition:
        color var(--lv-transicao-rapida) var(--lv-curva),
        background-color var(--lv-transicao-rapida) var(--lv-curva);
}

.lv-navcat__link:hover,
.lv-navcat__link.is-ativo,
.lv-navcat__item:hover > .lv-navcat__link,
.lv-navcat__item:focus-within > .lv-navcat__link {
    background-color: var(--lv-primaria-suave);
    color: var(--lv-primaria-texto);
    text-decoration: none;
}

.lv-navcat__link--destaque {
    color: var(--lv-acento-texto);
    font-weight: var(--lv-peso-semi);
}

/* Painel do mega-menu. */
.lv-megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--lv-z-megamenu);
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: var(--lv-espaco-6);
    width: max-content;
    max-width: min(1100px, calc(100vw - var(--lv-espaco-8)));
    padding: var(--lv-espaco-6);
    border: var(--lv-borda-largura) solid var(--lv-borda);
    border-radius: 0 0 var(--lv-raio-g) var(--lv-raio-g);
    background-color: var(--lv-superficie);
    box-shadow: var(--lv-sombra-4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
        opacity var(--lv-transicao-media) var(--lv-curva),
        transform var(--lv-transicao-media) var(--lv-curva),
        visibility var(--lv-transicao-media) var(--lv-curva);
}

.lv-navcat__item:hover > .lv-megamenu,
.lv-navcat__item:focus-within > .lv-megamenu,
.lv-megamenu.is-aberto {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Alinha a direita quando o item esta perto do fim da barra. */
.lv-navcat__item--fim > .lv-megamenu {
    left: auto;
    right: 0;
}

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

.lv-megamenu__titulo {
    display: block;
    margin-bottom: var(--lv-espaco-3);
    padding-bottom: var(--lv-espaco-2);
    border-bottom: var(--lv-borda-largura) solid var(--lv-borda);
    color: var(--lv-texto);
    font-size: var(--lv-fonte-xs);
    font-weight: var(--lv-peso-semi);
    letter-spacing: var(--lv-espacamento-caixa-alta);
    text-transform: uppercase;
}

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

.lv-megamenu__link {
    display: block;
    padding: var(--lv-espaco-2) var(--lv-espaco-3);
    margin-left: calc(var(--lv-espaco-3) * -1);
    border-radius: var(--lv-raio-xs);
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-m);
    text-decoration: none;
    transition:
        background-color var(--lv-transicao-rapida) var(--lv-curva),
        color var(--lv-transicao-rapida) var(--lv-curva);
}

.lv-megamenu__link:hover {
    background-color: var(--lv-hover);
    color: var(--lv-primaria-texto);
    text-decoration: none;
}

.lv-megamenu__destaque {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-3);
    padding: var(--lv-espaco-4);
    border-radius: var(--lv-raio-m);
    background-image: var(--lv-grad-marca-suave);
}

.lv-megamenu__destaque img {
    width: 100%;
    border-radius: var(--lv-raio-s);
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

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

/* --------------------------------------------------------------------------
   6. Menu mobile (drawer a esquerda)
   -------------------------------------------------------------------------- */

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

.lv-menu-mobile__nivel--2 {
    padding-left: var(--lv-espaco-4);
    margin-block: var(--lv-espaco-1);
    border-left: 2px solid var(--lv-borda);
}

.lv-menu-mobile__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lv-espaco-3);
    width: 100%;
    min-height: var(--lv-alvo-toque);
    padding: var(--lv-espaco-3);
    border-radius: var(--lv-raio-s);
    color: var(--lv-texto);
    font-size: var(--lv-fonte-base);
    font-weight: var(--lv-peso-medio);
    text-align: left;
    text-decoration: none;
    transition: background-color var(--lv-transicao-rapida) var(--lv-curva);
}

.lv-menu-mobile__link:hover,
.lv-menu-mobile__link.is-ativo {
    background-color: var(--lv-primaria-suave);
    color: var(--lv-primaria-texto);
    text-decoration: none;
}

.lv-menu-mobile__nivel--2 .lv-menu-mobile__link {
    font-size: var(--lv-fonte-m);
    font-weight: var(--lv-peso-normal);
    color: var(--lv-texto-suave);
}

.lv-menu-mobile__seta {
    flex: 0 0 auto;
    color: var(--lv-texto-suave);
    transition: transform var(--lv-transicao-media) var(--lv-curva);
}

.lv-menu-mobile__link[aria-expanded="true"] .lv-menu-mobile__seta {
    transform: rotate(180deg);
}

.lv-menu-mobile__secao {
    padding: var(--lv-espaco-4) 0 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;
}

/* --------------------------------------------------------------------------
   7. Mini-carrinho (conteudo do drawer)
   -------------------------------------------------------------------------- */

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

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

.lv-minicarrinho__item {
    display: flex;
    gap: var(--lv-espaco-3);
    padding-bottom: var(--lv-espaco-4);
    border-bottom: var(--lv-borda-largura) solid var(--lv-borda);
}

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

.lv-minicarrinho__imagem {
    width: 72px;
    height: 90px;
    flex: 0 0 auto;
    border-radius: var(--lv-raio-s);
    background-color: var(--lv-superficie-2);
    object-fit: cover;
}

.lv-minicarrinho__corpo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-2);
}

.lv-minicarrinho__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-minicarrinho__nome:hover {
    color: var(--lv-primaria-texto);
}

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

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

.lv-minicarrinho__acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lv-espaco-2);
}

.lv-minicarrinho__frete-gratis {
    padding: var(--lv-espaco-3) var(--lv-espaco-4);
    border-radius: var(--lv-raio-s);
    background-color: var(--lv-superficie-2);
    font-size: var(--lv-fonte-s);
}

.lv-minicarrinho__frete-gratis .lv-progresso {
    margin-top: var(--lv-espaco-2);
}

.lv-minicarrinho__totais {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-2);
    margin-bottom: var(--lv-espaco-4);
    font-size: var(--lv-fonte-m);
}

.lv-minicarrinho__linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lv-espaco-3);
    color: var(--lv-texto-suave);
}

.lv-minicarrinho__linha--total {
    padding-top: var(--lv-espaco-3);
    border-top: var(--lv-borda-largura) solid var(--lv-borda);
    color: var(--lv-texto);
    font-size: var(--lv-fonte-g);
    font-weight: var(--lv-peso-forte);
}

.lv-minicarrinho__valor {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   8. Rodape
   -------------------------------------------------------------------------- */

.lv-rodape {
    margin-top: var(--lv-espaco-11);
    border-top: var(--lv-borda-largura) solid var(--lv-borda);
    background-color: var(--lv-superficie);
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-m);
}

.lv-rodape__vantagens {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lv-espaco-5);
    padding-block: var(--lv-espaco-7);
    border-bottom: var(--lv-borda-largura) solid var(--lv-borda);
}

@media (min-width: 640px) {
    .lv-rodape__vantagens {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .lv-rodape__vantagens {
        grid-template-columns: repeat(4, 1fr);
    }
}

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

.lv-vantagem__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: var(--lv-raio-m);
    background-image: var(--lv-grad-marca-suave);
    color: var(--lv-primaria-texto);
}

.lv-vantagem__titulo {
    display: block;
    color: var(--lv-texto);
    font-size: var(--lv-fonte-m);
    font-weight: var(--lv-peso-semi);
}

.lv-vantagem__texto {
    display: block;
    font-size: var(--lv-fonte-xs);
}

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

@media (min-width: 640px) {
    .lv-rodape__colunas {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .lv-rodape__colunas {
        grid-template-columns: 1.6fr repeat(3, 1fr);
        gap: var(--lv-espaco-8);
    }
}

.lv-rodape__titulo {
    margin-bottom: var(--lv-espaco-4);
    color: var(--lv-texto);
    font-size: var(--lv-fonte-xs);
    font-weight: var(--lv-peso-semi);
    letter-spacing: var(--lv-espacamento-caixa-alta);
    text-transform: uppercase;
}

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

.lv-rodape__lista a {
    display: inline-block;
    padding: var(--lv-espaco-2) 0;
    color: var(--lv-texto-suave);
    text-decoration: none;
}

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

.lv-rodape__marca {
    display: flex;
    flex-direction: column;
    gap: var(--lv-espaco-4);
    max-width: 42ch;
}

.lv-rodape__logo {
    height: 32px;
    width: auto;
}

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

.lv-rodape__rede {
    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-m);
    color: var(--lv-texto-suave);
    transition:
        border-color var(--lv-transicao-rapida) var(--lv-curva),
        color var(--lv-transicao-rapida) var(--lv-curva),
        background-color var(--lv-transicao-rapida) var(--lv-curva);
}

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

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

.lv-rodape__news .lv-campo {
    flex: 1 1 200px;
}

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

.lv-rodape__selo {
    display: inline-flex;
    align-items: center;
    gap: var(--lv-espaco-2);
    padding: var(--lv-espaco-2) var(--lv-espaco-3);
    border: var(--lv-borda-largura) solid var(--lv-borda);
    border-radius: var(--lv-raio-s);
    background-color: var(--lv-superficie-2);
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-xs);
    font-weight: var(--lv-peso-medio);
}

.lv-rodape__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--lv-espaco-4);
    padding-block: var(--lv-espaco-5);
    border-top: var(--lv-borda-largura) solid var(--lv-borda);
    font-size: var(--lv-fonte-xs);
}

.lv-rodape__base a {
    color: var(--lv-texto-suave);
}

/* --------------------------------------------------------------------------
   9. Alternador de tema
   -------------------------------------------------------------------------- */

.lv-tema {
    position: relative;
}

.lv-tema__sol,
.lv-tema__lua {
    transition:
        opacity var(--lv-transicao-media) var(--lv-curva),
        transform var(--lv-transicao-media) var(--lv-curva);
}

/* No modo claro mostra a lua (acao: ir para o escuro). */
.lv-tema__sol {
    display: none;
}

.lv-tema__lua {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .lv-tema__sol {
        display: block;
    }

    :root:not([data-tema="claro"]) .lv-tema__lua {
        display: none;
    }
}

:root[data-tema="escuro"] .lv-tema__sol {
    display: block;
}

:root[data-tema="escuro"] .lv-tema__lua {
    display: none;
}

:root[data-tema="claro"] .lv-tema__sol {
    display: none;
}

:root[data-tema="claro"] .lv-tema__lua {
    display: block;
}

/* --------------------------------------------------------------------------
   10. Cabecalho de pagina interna
   -------------------------------------------------------------------------- */

.lv-cabecalho-pagina {
    padding-block: var(--lv-espaco-7) var(--lv-espaco-6);
}

.lv-cabecalho-pagina__titulo {
    margin-top: var(--lv-espaco-3);
    font-size: var(--lv-fonte-3xg);
    font-weight: var(--lv-peso-forte);
    letter-spacing: var(--lv-espacamento-apertado);
}

.lv-cabecalho-pagina__descricao {
    margin-top: var(--lv-espaco-2);
    max-width: 68ch;
    color: var(--lv-texto-suave);
}

@media (max-width: 767.98px) {
    .lv-cabecalho-pagina__titulo {
        font-size: var(--lv-fonte-2xg);
    }
}

/* --------------------------------------------------------------------------
   11. Layout limpo (checkout, login)
   -------------------------------------------------------------------------- */

.lv-corpo-limpo {
    background-image: var(--lv-grad-brilho);
    background-repeat: no-repeat;
    background-size: 100% 520px;
}

.lv-limpo__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lv-espaco-4);
    min-height: var(--lv-altura-cabecalho);
    border-bottom: var(--lv-borda-largura) solid var(--lv-borda);
    background-color: var(--lv-superficie);
}

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

.lv-limpo__rodape {
    padding-block: var(--lv-espaco-7);
    margin-top: var(--lv-espaco-9);
    border-top: var(--lv-borda-largura) solid var(--lv-borda);
    color: var(--lv-texto-suave);
    font-size: var(--lv-fonte-xs);
    text-align: center;
}

/* Cartao central de autenticacao. */
.lv-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--lv-espaco-9);
}

.lv-auth__caixa {
    width: 100%;
    max-width: 440px;
}

/* --------------------------------------------------------------------------
   12. Troca de logo por tema
   O logo e servido por <img>, que nao herda currentColor. Entao as duas
   versoes vao no HTML e o tema esconde a que nao vale. Mesmo contrato de
   tres estados dos tokens: :root claro, media query guardada, seletor manual.
   -------------------------------------------------------------------------- */

.lv-logo--escuro {
    display: block;
}

.lv-logo--claro {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .lv-logo--escuro {
        display: none;
    }

    :root:not([data-tema="claro"]) .lv-logo--claro {
        display: block;
    }
}

:root[data-tema="escuro"] .lv-logo--escuro {
    display: none;
}

:root[data-tema="escuro"] .lv-logo--claro {
    display: block;
}

:root[data-tema="claro"] .lv-logo--escuro {
    display: block;
}

:root[data-tema="claro"] .lv-logo--claro {
    display: none;
}

/* Imagem com transicao suave de entrada (marcada por data-suave no HTML). */
img[data-suave] {
    opacity: 0;
    transition: opacity var(--lv-transicao-lenta) var(--lv-curva);
}

img[data-suave].is-carregada {
    opacity: 1;
}