/* ============================================================
   MAPA DO SITE (/mapa-do-site).

   Sem font-size nos links de propósito: eles herdam
   --fonte-size-base, que já é diferente nas duas lojas.

   Carregar via @section Styles na view MapaSite.
   ============================================================ */

.mapa-site ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.mapa-site li {
    line-height: 1.7;
}

/* Escada de tamanhos: título 28, seção 20, subtítulo 16, link 13.
   O h1 global cai em 50px nesta página, que é grande demais para um índice. */
.mapa-site-titulo {
    font-size: 2.8rem;
    margin-bottom: 2rem;
}

.mapa-site-secao {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* ---------- Distribuição em colunas -----------------------------------------
   O bloco PODE quebrar entre uma coluna e outra. Segurando o bloco inteiro com
   break-inside: avoid, um departamento de 1.240px esticava o container para
   2.389px e deixava as outras três colunas com buraco embaixo. O que não se
   separa é o título da sua lista, e o item não parte no meio. */

.mapa-site-colunas {
    column-count: 4;
    column-gap: 2.5rem;
}

.mapa-site-colunas li {
    break-inside: avoid;
}

.mapa-site-grupo {
    margin-bottom: 1.6rem;
}

.mapa-site-grupo-titulo {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: .3rem;
    break-inside: avoid;
    break-after: avoid;
}

/* ---------- Marco de letra na lista de produtos ------------------------------
   São 640 links em ordem alfabética. A letra não é âncora, é ponto de apoio
   para o olho enquanto rola. */

.mapa-site-letra {
    font-size: 2rem;
    font-weight: 700;
    margin-top: .8rem;
}

@media (max-width: 991px) {
    .mapa-site-colunas {
        column-count: 2;
    }
}

@media (max-width: 575px) {
    .mapa-site-colunas {
        column-count: 1;
    }
}